/* Unheard Echoes — shared site styles. Alpha-informed refresh.
   Display: Fraunces · Body: Source Serif 4 · Interface: Inter. */
:root{
  --bg:#F4EFE6; --bg-alt:#EAE4D8; --bg-dark:#E4DED2; --card:#FCFAF6;
  --text:#1A1916; --text-2:#6B6760; --text-3:#9E9B96; --ink-soft:#3D3B36;
  --accent:#8C4A2F; --accent-soft:#F0E6DC; --accent-deep:#763A22; --accent-light:#B06040;
  --changeable:#B0603F; --fixed:#5F7A6A;
  --border:#D8D2C6; --border-soft:#E3DDD1;
  --feature:#211E19;
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --ui:'Inter',-apple-system,system-ui,'Helvetica Neue',Arial,sans-serif;
  --mono:'Courier New',ui-monospace,monospace;
  --maxw:760px; --wide:1080px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--serif);font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;}
a{color:var(--accent-deep);text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.wrap.wide{max-width:var(--wide);}

/* ── full-bleed section bands (alpha style) ── */
main.banded{padding:0;}
.band{padding:74px 0;}
.band.hero{padding:104px 0 40px;}
.band.hero .band-inner>:last-child,.band.hero .prose>:last-child{margin-bottom:0;}
.band.alt{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.band-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.band-inner.wide{max-width:var(--wide);}
.band .prose h2:first-child,.band-inner>h2:first-child{margin-top:0;}

/* ── top nav ── */
header.site{position:sticky;top:0;z-index:20;background:rgba(244,239,230,.97);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border);}
.site-inner{max-width:var(--wide);margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;}
a.brand{font-family:var(--display);font-size:22px;font-weight:500;letter-spacing:.01em;color:var(--text);}
a.brand:hover{color:var(--text);text-decoration:none;}
a.brand .dot{color:var(--accent);}
.site-nav{display:flex;gap:24px;flex-wrap:wrap;align-items:center;}
.site-nav a{font-family:var(--ui);font-size:15px;font-weight:500;letter-spacing:0;color:var(--text-2);padding:2px 0;border-bottom:2px solid transparent;}
.site-nav a:hover{color:var(--text);text-decoration:none;}
.site-nav a.active{color:var(--text);border-bottom-color:var(--accent);}

main{padding:56px 0 88px;}
.eyebrow{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 22px;}
.eyebrow a{color:var(--accent);}
h1.page{font-family:var(--display);font-weight:400;font-size:clamp(32px,5vw,52px);line-height:1.12;margin:0 0 22px;letter-spacing:-.012em;color:var(--text);}
.lede{font-family:var(--serif);font-size:21px;color:var(--text-2);line-height:1.7;margin:0 0 30px;}
.prose p{margin:0 0 18px;}
.prose h2{font-family:var(--display);font-weight:500;font-size:30px;line-height:1.22;margin:44px 0 14px;letter-spacing:-.005em;}
.prose h3{font-family:var(--display);font-weight:500;font-size:21px;margin:30px 0 8px;}
.prose em{font-style:italic;}
.prose strong{font-weight:600;}
hr.sec{border:none;border-top:1px solid var(--border);margin:44px 0;}
.mono-label{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:0 0 10px;}
.muted{color:var(--text-2);}
.small{font-size:15px;}

/* ── home ── */
.hook p{font-size:22px;line-height:1.55;margin:0 0 20px;color:var(--text);}
.hook p:first-child{font-family:var(--display);font-weight:400;font-size:clamp(26px,4vw,34px);line-height:1.25;}
.hook-close{font-family:var(--serif);font-size:20px;line-height:1.6;border-left:3px solid var(--accent);padding-left:20px;margin:24px 0 6px;color:var(--text);}

/* ── feature band (dark, for the one climactic line per page) ── */
.band.feature{background:var(--feature);color:#EDE7DB;}
.band.feature .band-inner{text-align:center;}
.band.feature .fe{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-light);margin:0 0 18px;}
.band.feature .fstat{font-family:var(--display);font-weight:400;font-size:clamp(23px,3.4vw,33px);line-height:1.3;margin:0 auto;max-width:720px;letter-spacing:-.01em;color:#EDE7DB;}
.band.feature .fstat em{color:#E0A883;font-style:italic;}

/* ── constrainability gradient visual ── */
.gradviz{margin:28px 0 10px;}
.gradviz .bar{position:relative;height:18px;border-radius:10px;background:linear-gradient(90deg,#5F7A6A 0%,#7E7A5C 38%,#9A6A4C 64%,#B0603F 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}
.gradviz .ends{display:flex;justify-content:space-between;gap:14px;margin-top:10px;font-family:var(--ui);font-size:12.5px;color:var(--text-2);font-weight:500;}
.gradviz .ends .r{text-align:right;}
.gradviz .ticks{position:relative;height:116px;margin-top:6px;}
.gradviz .mk{position:absolute;top:0;transform:translateX(-50%);width:150px;text-align:center;}
.gradviz .mk .dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--bg);margin:0 auto 8px;box-shadow:0 0 0 1px var(--text-3);}
.gradviz .mk .lb{font-family:var(--serif);font-size:13.5px;line-height:1.35;color:var(--text);}
.gradviz .mk .kd{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.07em;text-transform:uppercase;margin-top:4px;}
.gradviz .kd.fx{color:var(--fixed);} .gradviz .kd.mix{color:#8a7a55;} .gradviz .kd.ch{color:var(--changeable);}
.gradviz .cap{font-family:var(--ui);font-size:13px;color:var(--text-3);margin-top:10px;}
@media(max-width:640px){
  .gradviz .ticks{position:static;height:auto;margin-top:16px;display:flex;flex-direction:column;gap:13px;}
  .gradviz .mk{position:static;transform:none;width:auto;text-align:left;display:flex;align-items:baseline;gap:11px;}
  .gradviz .mk .dot{margin:0;flex:0 0 auto;position:relative;top:2px;}
}

/* ── numbered moves (the four moves, with mini-diagrams) ── */
.moves{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0 6px;}
@media(max-width:640px){.moves{grid-template-columns:1fr;}}
.move{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:22px 22px 20px;}
.move .num{font-family:var(--display);font-size:15px;color:var(--accent);font-weight:500;display:block;margin-bottom:10px;}
.move svg{display:block;margin:8px 0 12px;}
.move h3{font-family:var(--display);font-weight:500;font-size:20px;margin:0 0 7px;letter-spacing:-.005em;}
.move p{font-size:15.5px;line-height:1.6;color:var(--text-2);margin:0;}

/* ── pull-quote ── */
.pullq{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.6vw,27px);line-height:1.32;color:var(--text);border-left:3px solid var(--accent);padding:6px 0 6px 24px;margin:34px 0;letter-spacing:-.005em;}
.pullq.center{border:none;text-align:center;padding:0;max-width:620px;margin:38px auto;}

/* ── labeled-section rhythm (eyebrow above each section heading) ── */
.seclabel{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:48px 0 0;}
.seclabel + h2{margin-top:6px;}

/* ── constrainability gradient as two-column zone-cards ── */
.gradsplit{display:grid;grid-template-columns:1fr;gap:18px;margin:10px 0 6px;}
@media(min-width:680px){.gradsplit{grid-template-columns:1fr 264px;gap:30px;align-items:start;}}
.gradsplit .gp p:last-child{margin-bottom:0;}
.zones{display:flex;flex-direction:column;gap:12px;}
.zone{background:var(--card);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:10px;padding:15px 17px;}
.zone .zl{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;margin:0 0 4px;}
.zone h4{font-family:var(--display);font-weight:500;font-size:18px;margin:0 0 6px;line-height:1.25;}
.zone p{font-size:14.5px;line-height:1.55;color:var(--text-2);margin:0;}
.zone.fx{border-top-color:var(--fixed);} .zone.fx .zl{color:var(--fixed);}
.zone.mix{border-top-color:#8a7a55;} .zone.mix .zl{color:#8a7a55;}
.zone.ch{border-top-color:var(--changeable);} .zone.ch .zl{color:var(--changeable);}

/* ── card kicker (badge + length meta on essay/tool cards) ── */
.ckick{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0 0 9px;}

/* ── home: architecture block (soft-tinted) ── */
.band.tint{background:var(--accent-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.band.tint h2{font-family:var(--display);font-weight:500;font-size:30px;line-height:1.18;margin:6px 0 0;letter-spacing:-.005em;color:var(--text);}
.archnote{font-family:var(--serif);font-size:17px;color:var(--text-2);line-height:1.6;margin:10px 0 24px;max-width:680px;}
.archA{display:grid;grid-template-columns:1fr;gap:22px;}
@media(min-width:660px){.archA{grid-template-columns:1fr 1fr;gap:34px;}}
.agroup .gl{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--border);padding-bottom:8px;margin:0 0 14px;}
.work{display:flex;gap:12px;align-items:baseline;margin:0 0 14px;}
.work .wn{font-family:var(--display);font-size:14px;color:var(--accent);font-weight:500;flex:0 0 auto;width:24px;}
.work .wt{display:block;font-family:var(--display);font-weight:500;font-size:18px;line-height:1.25;color:var(--text);}
.work .wd{display:block;font-family:var(--serif);font-size:14.5px;color:var(--text-2);line-height:1.45;margin-top:2px;}
.archA-foot{grid-column:1/-1;border-top:1px solid var(--border);margin-top:2px;padding-top:16px;display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;}
.archlink{font-family:var(--ui);font-size:14px;font-weight:500;color:var(--accent-deep);}
.pointers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;}
@media(max-width:740px){.pointers{grid-template-columns:1fr;}}
a.pointer{display:block;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:24px;color:var(--text);transition:border-color .16s,transform .16s;}
a.pointer:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px);}
.pointer .pt{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;}
.pointer h3{font-family:var(--display);margin:0 0 6px;font-size:20px;font-weight:500;}
.pointer p{margin:0;color:var(--text-2);font-size:15px;}

/* ── about: section nav (legacy, if used) ── */
.secnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.secnav a{font-family:var(--ui);font-size:12px;letter-spacing:.04em;color:var(--text-2);padding:5px 11px;border:1px solid var(--border);border-radius:20px;}
.secnav a:hover{border-color:var(--accent);color:var(--accent-deep);text-decoration:none;}
section.s{scroll-margin-top:80px;}

/* ── writing cards ── */
.note{background:var(--accent-soft);border:1px solid #e6d2c4;border-radius:10px;padding:14px 18px;font-size:15px;color:var(--text);margin:0 0 24px;}
.cards{display:flex;flex-direction:column;gap:16px;margin-top:8px;}
.ecard{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:24px 26px;}
.ecard h3{font-family:var(--display);margin:0 0 8px;font-size:22px;font-weight:500;line-height:1.25;}
.ecard p{margin:0 0 14px;color:var(--text);font-size:16px;}
.ecard .meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;}
.ecard .pair{font-family:var(--ui);font-size:12px;letter-spacing:.02em;color:var(--text-3);}
.ecard .read{font-family:var(--ui);font-size:13px;font-weight:500;color:var(--accent-deep);}

/* ── tool page ── */
.tool-intro{margin-bottom:18px;}
.toolframe{width:100%;border:0;min-height:120px;background:transparent;display:block;}
.framecard{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px;overflow:hidden;}
.howbox{background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;padding:26px;margin-top:36px;}
.howbox h2{margin-top:0;}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0;}
.legend span.m{font-family:var(--ui);font-weight:600;}
.legend .ch{color:var(--changeable);} .legend .fx{color:var(--fixed);}
.backlink{font-family:var(--ui);font-size:13px;letter-spacing:.02em;color:var(--text-3);margin:0 0 18px;}
.backlink a{color:var(--text-3);}
.backlink a:hover{color:var(--accent-deep);}

/* ── status pills (The Work) ── */
.workfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 2px;}
.wstat{font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:.03em;padding:4px 12px;border-radius:20px;display:inline-block;white-space:nowrap;}
.wstat.active{background:#E2EAE2;color:#3D5447;}
.wstat.scoped{background:#F0E6DC;color:#8C4A2F;}
.wstat.emerging{background:#DDD6C8;color:#6B6760;}
.workfoot .ov{font-family:var(--ui);font-size:13px;color:var(--accent-deep);}

/* ── tools index ── */
.toolcards{display:flex;flex-direction:column;gap:16px;margin-top:8px;}
.tcard{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:24px 26px;}
.tcard .thead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 8px;}
.tcard h3{font-family:var(--display);margin:0;font-size:22px;font-weight:500;line-height:1.25;}
.tcard p{margin:0 0 12px;color:var(--text);font-size:16px;}
.tstat{font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:.03em;padding:4px 11px;border-radius:20px;white-space:nowrap;}
.tstat.live{background:#E2EAE2;color:#3D5447;}
.tstat.dev{background:#DDD6C8;color:#6B6760;}
.tcard .open{font-family:var(--ui);font-size:13px;font-weight:500;color:var(--accent-deep);}

/* ── library ── */
.doclist{display:flex;flex-direction:column;gap:0;margin:6px 0 10px;}
.docitem{padding:16px 0;border-bottom:1px solid var(--border-soft);}
.docitem:last-child{border-bottom:none;}
.docitem h3{font-family:var(--display);margin:0 0 4px;font-size:19px;font-weight:500;}
.docitem p{margin:0 0 6px;color:var(--text-2);font-size:15px;}
.docitem .dmeta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;}
.docitem .dwords{font-family:var(--ui);font-size:12px;letter-spacing:.02em;color:var(--text-3);}
.docitem .dlink{font-family:var(--ui);font-size:13px;font-weight:500;color:var(--accent-deep);}
.soon{font-family:var(--ui);font-size:12px;color:var(--text-3);border:1px solid var(--border);border-radius:20px;padding:2px 10px;}

/* ── contact ── */
.channels{display:flex;flex-direction:column;gap:14px;margin:8px 0 26px;}
.chan{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px 22px;}
.chan .clabel{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 4px;}
.chan p{margin:0;color:var(--text-2);font-size:15px;}
.signup{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 0;}
.signup input{flex:1;min-width:220px;font-family:var(--serif);font-size:16px;padding:11px 15px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);}
.signup input:focus{outline:none;border-color:var(--accent);}
.signup button{font-family:var(--ui);font-size:14px;font-weight:500;letter-spacing:.02em;padding:11px 20px;border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent-deep);border-radius:8px;cursor:pointer;}
.signup button:hover{background:var(--accent);color:#fff;}
.substack-embed{margin:10px 0 4px;}
.substack-embed iframe{width:100%;max-width:480px;height:150px;border:1px solid var(--border);border-radius:10px;background:var(--card);display:block;}

/* ── footer (structured) ── */
footer.site{border-top:1px solid var(--border);background:var(--bg-dark);}
.foot-inner{max-width:var(--wide);margin:0 auto;padding:44px 24px 28px;}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:36px;}
.foot-brand{max-width:360px;}
.f-mark{font-family:var(--display);font-weight:500;font-size:18px;color:var(--text);}
.f-mark .dot{color:var(--accent);}
.foot-blurb{font-family:var(--serif);font-size:14px;line-height:1.7;color:var(--text-2);margin:10px 0 0;}
.foot-cols{display:flex;gap:48px;flex-wrap:wrap;}
.foot-col{display:flex;flex-direction:column;}
.foot-h{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin:0 0 12px;}
.foot-col a{font-family:var(--ui);font-size:14px;color:var(--text-2);padding:5px 0;}
.foot-col a:hover{color:var(--text);text-decoration:none;}
.foot-meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;border-top:1px solid var(--border);margin:28px 0 0;padding:16px 0 0;}
.foot-meta span{font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:.04em;}
/* legacy footer classes (fallback) */
.f-brand{font-family:var(--display);font-size:18px;color:var(--text-2);}
.foot-nav{display:flex;gap:16px;flex-wrap:wrap;}
.foot-nav a{font-family:var(--ui);font-size:14px;color:var(--text-3);}
.foot-note{color:var(--text-3);font-size:13px;width:100%;margin:4px 0 0;}

/* ── essays ── */
.prose.essay{max-width:680px;}
.prose.essay p{font-size:18px;}
.byline{font-family:var(--ui);font-size:13px;letter-spacing:.02em;color:var(--text-3);margin:0 0 30px;}
.prose hr{border:none;border-top:1px solid var(--border);margin:32px 0;}
.prose blockquote{margin:0 0 18px;padding:4px 0 4px 18px;border-left:3px solid var(--accent);color:var(--text-2);font-style:italic;}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;}
.prose li{margin:0 0 7px;}
.essaynav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:24px;font-family:var(--ui);font-size:13px;}
.essaynav a{color:var(--accent-deep);}

/* ── mobile proportions ── */
@media (max-width: 640px){
  .wrap, .band-inner{padding-left:18px;padding-right:18px;}
  main{padding:40px 0 64px;}
  .band{padding:46px 0;}
  .band.hero{padding:54px 0 22px;}
  .site-inner{padding:12px 18px;gap:10px;flex-direction:column;align-items:flex-start;}
  a.brand{font-size:20px;}
  .site-nav{gap:14px 18px;width:100%;}
  .site-nav a{font-size:14px;}
  h1.page{font-size:clamp(27px,7.4vw,34px);}
  .lede{font-size:18px;line-height:1.6;}
  .prose h2{font-size:23px;margin:34px 0 12px;}
  .prose h3{font-size:19px;}
  .hook p{font-size:19px;}
  .hook p:first-child{font-size:clamp(23px,6vw,30px);}
  .hook-close{font-size:18px;padding-left:16px;}
  .howbox{padding:20px;}
  .ecard,.tcard{padding:20px 20px;}
  .foot-cols{gap:30px;}
}