:root{
  --bg:#F4F1ED; --surface:#FBF9F6; --ink:#16140F; --muted:#6B645B; --faint:#A39A8E;
  --line:#E2DCD3; --rust:#7A301E; --rust-deep:#5E2416; --rust-tint:#F1E3DD;
  --font-display:'Young Serif', 'Georgia', serif;
  --font-body:'Source Serif 4', 'Georgia', serif;
  --font-ui:'Work Sans', system-ui, sans-serif;
  --text-xs:clamp(.75rem,.72rem + .15vw,.8125rem);
  --text-sm:clamp(.875rem,.85rem + .15vw,.9375rem);
  --text-base:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --text-lg:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --text-xl:clamp(1.6rem,1.3rem + 1.4vw,2.25rem);
  --text-hero:clamp(2.6rem,1.6rem + 4vw,4.75rem);
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--text-base);line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:8px;z-index:20}
.skip:focus{left:12px}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
main:focus{outline:none}

/* header */
.site-header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:68px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--font-display);font-size:1.05rem;line-height:1.1}
.brand img{width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--line)}
.brand em{font-style:normal;color:var(--rust)}
nav{display:flex;gap:.25rem}
nav a{font-family:var(--font-ui);font-size:var(--text-sm);text-decoration:none;padding:.45rem .8rem;border-radius:999px;color:var(--muted);transition:background .15s,color .15s}
nav a:hover{color:var(--ink);background:var(--rust-tint)}
nav a[aria-current="page"]{color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}

/* hero */
.hero{padding:clamp(2rem,5vw,4.5rem) 0 clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.cover{border-radius:var(--r);overflow:hidden;box-shadow:0 1px 0 var(--line),0 30px 60px -30px rgba(70,40,20,.35);background:var(--bg)}
.cover img{width:100%;height:auto}
.eyebrow{font-family:var(--font-ui);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--rust);font-weight:600;margin:0 0 1rem}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:var(--text-hero);line-height:1.02;letter-spacing:-.01em;margin:0 0 1.25rem}
.hero h1 span{color:var(--rust)}
.lede{font-size:var(--text-lg);line-height:1.5;color:var(--muted);max-width:34ch;margin:0 0 2rem}
.btns{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;text-decoration:none;padding:.8rem 1.3rem;border-radius:999px;border:1px solid var(--ink);transition:transform .15s,background .15s,color .15s}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:var(--rust);border-color:var(--rust)}
.btn-ghost:hover{background:var(--surface)}
.btn:active{transform:translateY(1px)}
.stats{display:flex;gap:2rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);font-family:var(--font-ui)}
.stats b{display:block;font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);line-height:1}
.stats span{font-size:var(--text-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}

/* sections */
.section{padding:clamp(3rem,6vw,5rem) 0;border-top:1px solid var(--line)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.section-head h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);margin:0;line-height:1.1}
.link{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--rust);text-decoration:none}
.link:hover{text-decoration:underline;text-underline-offset:4px}

/* feature */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(1.5rem,4vw,3.5rem);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.5rem,4vw,3rem);text-decoration:none;transition:border-color .2s,transform .2s}
.feature:hover{border-color:var(--rust)}
.feature h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,1.4rem + 2vw,3rem);line-height:1.05;margin:.5rem 0 1rem}
.feature p.excerpt{color:var(--muted);margin:0}
.feature .quote{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.4;color:var(--ink);border-left:3px solid var(--rust);padding-left:1.25rem;margin:0;align-self:center}

.meta{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--muted);display:flex;flex-wrap:wrap;gap:.35rem .9rem;align-items:center}
.pill{display:inline-block;background:var(--rust-tint);color:var(--rust-deep);font-weight:600;padding:.2rem .6rem;border-radius:999px}

/* cards */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.card{display:flex;flex-direction:column;gap:.75rem;padding:1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--rust);transform:translateY(-2px)}
.card h3{font-family:var(--font-display);font-weight:400;font-size:var(--text-lg);line-height:1.2;margin:0}
.card p{margin:0;color:var(--muted);font-size:var(--text-sm);line-height:1.6;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{margin-top:auto}

/* about band */
.about-band{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center}
.about-band img{width:120px;height:120px;border-radius:50%;background:var(--surface);border:1px solid var(--line)}
.about-band p{margin:0;max-width:60ch;color:var(--muted)}
.about-band h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);margin:0 0 .5rem;line-height:1.1}

/* archive */
.page-head{padding:clamp(2.5rem,5vw,4rem) 0 2rem}
.page-head h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,1.6rem + 2.5vw,3.5rem);line-height:1.05;margin:0 0 .75rem}
.page-head p{color:var(--muted);margin:0;max-width:55ch}
.search{margin-top:1.75rem;position:relative;max-width:460px}
.search input{width:100%;font:inherit;font-family:var(--font-ui);font-size:var(--text-sm);padding:.85rem 1rem .85rem 2.75rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.search input:focus{outline:none;border-color:var(--rust);box-shadow:0 0 0 3px var(--rust-tint)}
.search svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--faint)}
.year{display:grid;grid-template-columns:120px 1fr;gap:1.5rem;padding:2rem 0;border-top:1px solid var(--line)}
.year h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);margin:0;color:var(--rust);line-height:1}
.year ol{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:1fr auto;gap:.25rem 1.5rem;padding:1rem 0;border-bottom:1px dashed var(--line);text-decoration:none}
.row:last-child{border-bottom:0}
.row h3{font-family:var(--font-display);font-weight:400;font-size:var(--text-lg);margin:0;line-height:1.25;transition:color .15s}
.row:hover h3{color:var(--rust)}
.row .meta{grid-column:1/-1}
.row time{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--muted);white-space:nowrap;padding-top:.35rem}
.empty{padding:3rem 0;color:var(--muted);font-family:var(--font-ui)}

/* post */
.post{padding:clamp(2rem,5vw,4rem) 0 clamp(3rem,6vw,5rem)}
.post-head{max-width:720px;margin:0 auto 2.5rem;text-align:center}
.post-head .meta{justify-content:center;margin-bottom:1.25rem}
.post-head h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,1.5rem + 3vw,3.75rem);line-height:1.05;margin:0 0 1rem}
.series{font-family:var(--font-ui);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--rust);font-weight:600}
.byline{display:flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--font-ui);font-size:var(--text-sm);color:var(--muted)}
.byline img{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface)}
.prose{max-width:66ch;margin:0 auto}
.prose p{margin:0 0 1.35em;white-space:pre-line}
.prose > p:first-child::first-letter{font-family:var(--font-display);float:left;font-size:3.6em;line-height:.85;padding:.08em .12em 0 0;color:var(--rust)}
.divider{display:flex;justify-content:center;margin:3rem 0;color:var(--rust)}
.post-nav{max-width:860px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.post-nav a{display:block;padding:1.25rem 1.5rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;transition:border-color .2s}
.post-nav a:hover{border-color:var(--rust)}
.post-nav small{display:block;font-family:var(--font-ui);font-size:var(--text-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.3rem}
.post-nav span{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.2}
.post-nav .next{text-align:right;grid-column:2}

/* about page */
.about{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;padding:clamp(2.5rem,5vw,4rem) 0 5rem}
.about .cover{position:sticky;top:96px}
.about h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,1.6rem + 2.5vw,3.5rem);line-height:1.05;margin:0 0 1.5rem}
.about p{max-width:60ch}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:2.5rem 0 3rem;background:var(--surface)}
.footer-inner{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.footer-inner img{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);background:var(--bg)}
.footer-inner p{margin:0;font-family:var(--font-display);line-height:1.35}
.footer-inner span{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--muted)}
.footer-meta{margin-left:auto!important;font-family:var(--font-ui)!important;font-size:var(--text-xs);color:var(--muted)}

.fade{animation:fade .45s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero-grid,.about{grid-template-columns:1fr}
  .hero .cover{max-width:380px;margin-inline:auto}
  .about .cover{position:static;max-width:340px}
  .brand span{display:none}
  .grid{grid-template-columns:1fr}
  .year{grid-template-columns:1fr;gap:.5rem}
  .about-band{grid-template-columns:1fr;text-align:left}
  .about-band img{width:88px;height:88px}
  .post-nav{grid-template-columns:1fr}
  .post-nav .next{grid-column:auto}
  .footer-meta{margin-left:0!important}
}