/* ─────────────────────────────────────────
   Core variables
───────────────────────────────────────── */
:root{
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Fira Mono", monospace;

  --color-bg:#ffffff;
  --color-fg:#111;
  --color-muted:#666;
  --color-accent:#d0007f;         /* favicon magenta */
  --color-border:#e5e5e5;

  --radius:4px;
  --inner-max:760px;
  --gutter:1.25rem;
}

/* ─────────────────────────────────────────
   Global reset / typography
───────────────────────────────────────── */
html{box-sizing:border-box;font-size:16px;}
*,*:before,*:after{box-sizing:inherit;}

body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--color-bg);
  color:var(--color-fg);
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--color-accent);text-decoration:none;}
a:hover,a:focus{text-decoration:underline;}

.inner{
  max-width:var(--inner-max);
  padding:0 var(--gutter);
  margin:0 auto;
}

/* ─────────────────────────────────────────
   Header
───────────────────────────────────────── */
.site-header{
  border-bottom:1px solid var(--color-border);
  padding:1.4rem 0 1rem;
  margin-bottom:1.5rem;
}
.site-title{
  font-size:1.75rem;
  font-weight:600;
  margin:0;
}
.tagline{
  margin:0.2rem 0 1rem;
  color:var(--color-muted);
  font-size:0.95rem;
}

/* nav remains inline, wraps on small screen */
.site-nav{
  display:flex;
  flex-wrap:wrap;
  gap:0.8rem 1rem;
  margin:0 0 0.3rem;
  font-weight:500;
}
.site-nav a{
  padding:0.25rem 0;
}

/* small underline on hover */
.site-nav a::after{
  content:"";
  display:block;
  height:2px;
  width:0%;
  background:var(--color-accent);
  transition:width .25s;
}
.site-nav a:hover::after,
.site-nav a:focus::after{width:100%;}

/* ─────────────────────────────────────────
   Post list & full posts
───────────────────────────────────────── */
.post-title{
  margin:0 0 0.6rem;
  font-size:1.35rem;
  line-height:1.3;
}
.post-full{margin-bottom:3rem;}
.meta{
  color:var(--color-muted);
  font-size:0.86rem;
  margin:0 0 1.2rem;
}

/* images */
.content img,figure>img{
  display:block;
  max-width:100%;
  height:auto;
  margin:1.25rem auto;
  border-radius:var(--radius);
}
figure{margin:1.25rem auto;text-align:center;}

/* code */
code{font-family:var(--font-mono);background:#f6f6f6;padding:0.1rem 0.35rem;border-radius:var(--radius);}
pre code{display:block;padding:1rem;overflow-x:auto;}

/* ─────────────────────────────────────────
   Archive list
───────────────────────────────────────── */
.archive-list{list-style:none;margin:0;padding:0;}
.archive-list li{margin:0 0 0.55rem;font-size:0.95rem;}
.archive-list time{color:var(--color-muted);}

/* ─────────────────────────────────────────
   Footer
───────────────────────────────────────── */
.site-footer{
  border-top:1px solid var(--color-border);
  margin-top:4rem;
  padding:1.5rem 0 2.5rem;
  font-size:0.85rem;
  color:var(--color-muted);
  text-align:center;
}

/* ─────────────────────────────────────────
   Small viewport tweak ≤480px
───────────────────────────────────────── */
@media(max-width:32rem){
  .site-title{font-size:1.5rem;}
  .site-nav{gap:0.6rem 0.8rem;}
}

/* Image compare slider */
.compare{
  position:relative;
  max-width:100%;
  margin:2rem auto;
  overflow:hidden;
  background: transparent; /* fallback while loading */
}
.compare img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:auto;
  display:block;
}
.compare__after{
  position:absolute;
  inset:0;
  clip-path:inset(0 50% 0 0); /* reveal left 50% by default */
  pointer-events:none;
}
.compare__handle{
  position:absolute;
  top:0;
  left:50%;
  width:2px;
  height:100%;
  background:var(--color-accent);
  pointer-events:none;
  z-index:3;
}
.compare__range{
  -webkit-appearance:none;
  appearance:none;
  position:absolute;
  inset:0;               /* full overlay */
  width:100%;
  height:100%;
  opacity:0;             /* hidden but still interactive */
  cursor:ew-resize;
  z-index:4;
  background:transparent;
  border:none;
}
.compare__range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:var(--color-accent);
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
  cursor:ew-resize;
}
.compare__range::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--color-accent);
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
  cursor:ew-resize;
}
.compare__labels{
  position:absolute;
  top:.5rem;
  left:.5rem;
  right:.5rem;
  display:flex;
  justify-content:space-between;
  font-size:.8rem;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  pointer-events:none;
  z-index:2;
}
.compare__labels { display: none !important; }

.site-search {
  margin-left: auto;                /* push it to the right */
}
.site-search input {
  font: inherit;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  width: 10rem;
  transition: width .2s ease;
}
.site-search input:focus {
  width: 14rem;
  outline: none;
  border-color: var(--color-accent);
}
@media (max-width: 32rem) {
  .site-search { width: 100%; margin-top: .5rem; }
  .site-search input { width: 100%; }
}

/* Force side-by-side unless really narrow */
.profile__wrap{
  display:flex;
  gap:2rem;
  align-items:flex-start;
  flex-wrap:nowrap;      /* don’t wrap at desktop widths */
}

/* let text shrink instead of pushing to a new line */
.profile__text{
  flex:1 1 0;            /* grow, shrink, min-width 0 */
  min-width:0;
}

/* When the viewport is narrow, stack vertically */
@media (max-width: 600px){
  .profile__wrap{
    flex-direction:column;
    align-items:center;
  }
}

.profile__photo{
  max-width: 180px;      /* never wider than 180 px */
  width: 40%;            /* but stay responsive on very small screens */
  height: auto;          /* keep natural aspect ratio */
  object-fit: cover;     /* crop if you later set fixed height */
  border-radius: 50%;
  border: 2px solid var(--color-border);
}

/* 404 page */
.not-found{
  text-align:center;
  margin:4rem 0 5rem;
}
.not-found__code{
  font-size:4rem;
  margin:0 0 .5rem;
  font-family:var(--font-mono);
  color:var(--color-accent);
}
.not-found__msg{
  font-size:1.2rem;
  margin:0 0 2rem;
  color:var(--color-muted);
}
.not-found__links{
  list-style:none;
  padding:0;
  margin:0;
  display:inline-flex;
  gap:1.5rem;
  flex-wrap:wrap;
  justify-content:center;
}
.not-found__links a{ font-weight:500; }