/* ---------------------------------------------------------------------------
   Blog stylesheet.

   The homepage is one self-contained file and stays that way, so the design
   tokens below are deliberately a copy of the ones in index.html rather than a
   shared import. If you change a colour there, change it here too — they are
   the only two places the palette lives.
   --------------------------------------------------------------------------- */
:root{
  --bg:        #faf8f5;
  --bg-warm:   #f4f0ea;
  --ink:       #17150f;
  --ink-2:     #4f4a42;
  --ink-3:     #6b6259;
  --line:      #e5ded4;
  --accent:    #9d4a35;
  --accent-lo: #f2e6e0;
  --data:      #4a6b76;

  /* prose wants a slightly wider column than the homepage's card copy */
  --measure: 68ch;
  --gap:  clamp(1.25rem, 1.6vw, 2.25rem);
  --pad:  clamp(1.25rem, 4.5vw, 5.5rem);
  --shell: min(96rem, 100% - var(--pad) * 2);
}
*{ box-sizing:border-box; }
html{
  scroll-behavior:smooth; scroll-padding-top:5rem;
  -webkit-text-size-adjust:100%; font-size:16px;
}
@media (min-width:2200px){ html{ font-size:18px; } }
@media (min-width:3000px){ html{ font-size:21px; } }
@media (min-width:3600px){ html{ font-size:24px; } }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(1rem, .96rem + .18vw, 1.14rem);
  line-height:1.62; -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern","liga","cv05";
}
::selection{ background:var(--accent-lo); color:var(--ink); }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:'Fraunces',Georgia,serif; font-weight:400; margin:0; letter-spacing:-.012em; }
img{ max-width:100%; height:auto; }
.shell{ width:var(--shell); margin-inline:auto; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--bg); padding:.7rem 1.1rem; border-radius:0 0 .5rem 0;
}
.skip:focus{ left:0; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ---------- masthead ---------- */
.top{
  position:sticky; top:0; z-index:20;
  background:rgb(250 248 245 / .86); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.top .shell{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:.85rem;
}
.top a{ text-decoration:none; }
.top .home{
  font-family:'Fraunces',Georgia,serif; font-size:1.02rem; color:var(--ink);
  display:inline-flex; align-items:center; gap:.5rem;
}
.top .home span{ color:var(--accent); transition:transform .25s cubic-bezier(.2,.8,.3,1); display:inline-block; }
.top .home:hover span{ transform:translateX(-4px); }
.top nav{ display:flex; gap:clamp(.9rem,2vw,1.8rem); font-size:.9rem; color:var(--ink-3); }
.top nav a{ border-bottom:1px solid transparent; padding-bottom:1px; transition:color .2s,border-color .2s; }
.top nav a:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- index page ---------- */
.masthead{ padding-block:clamp(3rem,8vh,6rem) clamp(2rem,5vh,3.5rem); border-bottom:1px solid var(--line); }
.masthead .eyebrow{
  font-size:clamp(.72rem,.68rem + .12vw,.82rem); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 1.1rem;
}
.masthead h1{
  font-size:clamp(2.6rem, 1.6rem + 3.6vw, 5.5rem);
  line-height:1; letter-spacing:-.028em; font-weight:300; margin:0 0 1.2rem;
}
.masthead h1 em{ font-style:italic; font-weight:400; }
.masthead .eyebrow a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); transition:color .2s,border-color .2s; }
.masthead .eyebrow a:hover{ color:var(--accent); border-color:var(--accent); }
.masthead p{
  margin:0; color:var(--ink-2); max-width:44ch;
  font-size:clamp(1.05rem,1rem + .45vw,1.4rem); line-height:1.45;
}

.listing{ padding-block:clamp(2rem,5vh,4rem); }
.posts{ list-style:none; margin:0; padding:0; }
.posts > li{ border-top:1px solid var(--line); }
.posts > li:first-child{ border-top:0; }
.post-link{
  display:grid; gap:.35rem clamp(1.5rem,3vw,3rem);
  grid-template-columns:minmax(0,1fr); align-items:baseline;
  padding-block:clamp(1.4rem,3vh,2.2rem); text-decoration:none;
}
@media (min-width:860px){ .post-link{ grid-template-columns:9rem minmax(0,1fr); } }
.post-link .when{ font-family:'Fraunces',Georgia,serif; color:var(--ink-3); font-size:1.02rem; }
.post-link h2{
  font-size:clamp(1.3rem,1.1rem + .8vw,1.85rem); font-weight:400; line-height:1.26;
  margin:0 0 .4rem;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .35s cubic-bezier(.4,0,.2,1), color .2s;
  padding-bottom:3px;
}
.post-link:hover h2{ background-size:100% 1px; color:var(--accent); }
.post-link p{ margin:0; color:var(--ink-2); max-width:60ch; font-size:.98rem; }
.post-link .meta{ margin:.55rem 0 0; font-size:.8rem; color:var(--ink-3); letter-spacing:.02em; }
.empty{
  margin:0; padding:clamp(2rem,5vh,3.5rem) 0; color:var(--ink-3);
  font-size:clamp(1rem,.96rem + .3vw,1.18rem); max-width:52ch;
}

/* ---------- tags ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:.45rem; margin:0; padding:0; list-style:none; }
.tags li, .tag{
  padding:.2rem .62rem; border:1px solid var(--line); border-radius:99px;
  background:var(--bg); font-size:.76rem; color:var(--ink-3);
  letter-spacing:.04em; white-space:nowrap;
}

/* ---------- article ---------- */
.article{
  width:min(var(--measure), 100% - var(--pad) * 2); margin-inline:auto;
  padding-block:clamp(2.5rem,6vh,5rem) 0;
}
.article-head{ margin:0 0 clamp(2rem,5vh,3.2rem); }
.article-head .when{
  display:block; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin:0 0 1rem;
}
.article-head h1{
  font-size:clamp(2.1rem,1.5rem + 2.4vw,3.6rem); line-height:1.06;
  letter-spacing:-.024em; font-weight:400; margin:0 0 1rem;
}
.article-head .standfirst{
  margin:0; color:var(--ink-2); font-size:clamp(1.08rem,1rem + .5vw,1.35rem);
  line-height:1.45; max-width:52ch;
}
.article-head .about{
  display:flex; align-items:center; gap:.75rem 1rem; flex-wrap:wrap;
  margin:1.4rem 0 0; padding-top:1.3rem; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--ink-3);
}

/* ---------- prose ---------- */
.prose{ color:var(--ink); }
/* one spacing rule, set on the direct children so nothing inside a list or a
   blockquote inherits it. Anything wanting its own rhythm overrides below. */
.prose > *{ margin-block:0; }
.prose > * + *{ margin-top:1.15em; }
.prose h2{
  font-size:clamp(1.45rem,1.25rem + .8vw,1.95rem); font-weight:400; line-height:1.24;
  margin-top:2.5em; letter-spacing:-.018em;
}
.prose h3{
  font-size:clamp(1.15rem,1.05rem + .45vw,1.4rem); font-weight:500; line-height:1.3;
  margin-top:2.1em;
}
.prose h4{ font-size:1.05rem; font-weight:600; font-family:'Inter',sans-serif; margin-top:1.8em; }
/* a heading belongs to the text beneath it, so it sits closer to that than to
   the paragraph it followed */
.prose :is(h2,h3,h4) + *{ margin-top:.7em; }
/* heading anchors, revealed on hover — a paragraph you can point someone at */
.prose h2, .prose h3{ position:relative; }
.prose .headerlink{
  position:absolute; left:-1.1em; width:1.1em; text-decoration:none;
  color:var(--line); opacity:0; transition:opacity .2s, color .2s;
}
.prose :is(h2,h3):hover .headerlink, .prose .headerlink:focus{ opacity:1; }
.prose .headerlink:hover{ color:var(--accent); }
@media (max-width:900px){ .prose .headerlink{ display:none; } }

.prose a{
  text-decoration:none; color:var(--accent);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:1.5px;
  transition:background-size .25s cubic-bezier(.4,0,.2,1);
}
.prose a:hover{ background-size:0% 1px; }
.prose strong{ font-weight:600; }
.prose em{ font-style:italic; }

.prose ul, .prose ol{ padding-left:1.35em; }
.prose li + li{ margin-top:.3em; }
.prose li::marker{ color:var(--ink-3); }
.prose li > ul, .prose li > ol{ margin-top:.4em; }

.prose blockquote{
  margin:1.6em 0; padding:.15em 0 .15em 1.3em;
  border-left:2px solid var(--accent-lo);
  color:var(--ink-2); font-size:1.02em;
}
.prose blockquote p{ margin:0; }
.prose blockquote p + p{ margin-top:.8em; }

.prose hr{
  border:0; border-top:1px solid var(--line); margin:2.6em 0;
}

.prose code{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  font-size:.88em; background:var(--bg-warm); border:1px solid var(--line);
  border-radius:4px; padding:.1em .35em;
}
.prose pre{
  margin-block:1.6em; padding:clamp(.9rem,1.6vw,1.25rem);
  background:var(--bg-warm); border:1px solid var(--line); border-radius:10px;
  overflow-x:auto; line-height:1.55;
}
.prose pre code{
  background:none; border:0; border-radius:0; padding:0; font-size:.85em;
}
.prose .codehilite{ margin-block:1.6em; }
.prose .codehilite pre{ margin:0; }
.prose .table-wrap{ overflow-x:auto; margin-block:1.8em; }

/* Code and tables may break the measure on a wide screen — a wrapped SLURM
   script helps nobody. Half the column across, then back half the element's own
   width, which is how you centre a child wider than its parent. Margins here
   are margin-block above, deliberately: a `margin: x 0` shorthand later in the
   file would reset the margin-left this depends on. */
@media (min-width:1100px){
  .prose .codehilite, .prose > pre, .prose .table-wrap{
    width:min(78ch, calc(100vw - var(--pad) * 2));
    margin-left:50%; transform:translateX(-50%);
  }
}
.prose table{ border-collapse:collapse; width:100%; font-size:.94em; }
.prose th, .prose td{
  text-align:left; padding:.6rem .9rem; border-bottom:1px solid var(--line);
  vertical-align:top;
}
.prose th{ font-weight:600; color:var(--ink); border-bottom-color:var(--ink-3); white-space:nowrap; }
.prose td{ color:var(--ink-2); }

.prose figure{ margin:2em 0; }
.prose figure img, .prose p > img{ display:block; border-radius:10px; border:1px solid var(--line); }
.prose figcaption{ margin-top:.7rem; font-size:.84rem; color:var(--ink-3); }

.prose .footnote-ref{ font-size:.8em; padding:0; background:none; text-decoration:none; }
.prose .footnote hr{ display:none; }   /* the extension emits one; the border above is ours */
.prose .footnote{
  margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.9rem; color:var(--ink-2);
}
.prose .footnote ol{ padding-left:1.2em; }
.prose .footnote-backref{ text-decoration:none; }

/* ---------- syntax colours ----------
   Hand-tuned to the warm ground rather than a stock Pygments theme, so a code
   block reads as part of the page. Every colour clears 4.5:1 on #f4f0ea. */
.codehilite .c, .codehilite .c1, .codehilite .cm, .codehilite .cs,
.codehilite .cp, .codehilite .cpf, .codehilite .ch{ color:#7a7168; font-style:italic; }
.codehilite .k, .codehilite .kn, .codehilite .kd, .codehilite .kc,
.codehilite .kr, .codehilite .kt, .codehilite .ow{ color:#8a4030; font-weight:500; }
.codehilite .s, .codehilite .s1, .codehilite .s2, .codehilite .sb,
.codehilite .sd, .codehilite .se, .codehilite .sh, .codehilite .si,
.codehilite .sr, .codehilite .sx, .codehilite .ss{ color:#3d6b52; }
.codehilite .m, .codehilite .mi, .codehilite .mf, .codehilite .mh,
.codehilite .mo, .codehilite .il{ color:#6b4a86; }
.codehilite .nf, .codehilite .fm{ color:#3f6484; }
.codehilite .nc, .codehilite .nn, .codehilite .ne{ color:#3f6484; font-weight:500; }
.codehilite .nb, .codehilite .bp, .codehilite .nv, .codehilite .vi{ color:#4a6b76; }
.codehilite .nd, .codehilite .na{ color:#6b4a86; }
.codehilite .o, .codehilite .p{ color:#5a544b; }
.codehilite .gd{ color:#8a4030; }
.codehilite .gi{ color:#3d6b52; }
.codehilite .gh, .codehilite .gu{ color:#4f4a42; font-weight:600; }
.codehilite .err{ color:#8a4030; }

/* ---------- article footer ---------- */
.article-foot{
  width:min(var(--measure), 100% - var(--pad) * 2); margin:clamp(3rem,7vh,5rem) auto 0;
  padding-top:clamp(1.6rem,3vh,2.4rem); border-top:1px solid var(--line);
}
.article-foot .back{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-size:.92rem; color:var(--ink-2);
}
.article-foot .back span{ color:var(--accent); display:inline-block; transition:transform .25s cubic-bezier(.2,.8,.3,1); }
.article-foot .back:hover{ color:var(--accent); }
.article-foot .back:hover span{ transform:translateX(-4px); }
.nearby{
  display:grid; gap:var(--gap) clamp(2rem,4vw,3.5rem); margin-top:clamp(1.8rem,4vh,2.8rem);
  grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));
}
.nearby a{
  display:block; text-decoration:none; padding:1.1rem 1.25rem;
  border:1px solid var(--line); border-radius:12px; background:var(--bg);
  transition:border-color .3s, transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
}
.nearby a:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 12px 30px rgb(23 21 15 / .06); }
.nearby .dir{ display:block; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.45rem; }
.nearby strong{ font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:1.06rem; line-height:1.3; }

footer.site{
  padding-block:clamp(2.5rem,5vh,4rem); border-top:1px solid var(--line);
  color:var(--ink-3); font-size:.86rem;
  display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between;
}
footer.site a{ text-decoration:none; border-bottom:1px solid var(--line); transition:color .2s,border-color .2s; }
footer.site a:hover{ color:var(--accent); border-color:var(--accent); }