/* =========================================================================
   >gabes / the letter — reading system
   One stylesheet for the hub, the archive, an issue and a signal.

   What changed, and why:
   - type never moves, blurs or fades while it is being read. a block rises
     once on first reveal and then it is finished. the old template drove
     opacity, blur, scale and y-offset off distance from the viewport centre,
     which meant a paragraph was only legible while it crossed a band.
   - one column, one measure, left aligned, always. the old template
     alternated left and right; ragged-left body copy over 60ch was the
     slowest thing on the page.
   - sections are as tall as their content. the old ones were 106vh to 254vh,
     which spread four screens of reading over eighteen screens of travel.
   - the receipt is promoted. it is the brand promise and it was set smallest
     and dimmest of anything in the section.
   - native scroll. no transform scroller, no momentum smoothing.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}

:root{
  /* the issue trio. every page sets these three from the manifest. */
  --gr:#060E14;          /* ground */
  --ac:#FFA524;          /* lead accent */
  --ac2:#9D7BFF;         /* second accent */
  --tx:#F2EEE6;          /* figure */
  --no:#FF5470;          /* the negative, for "not this" */

  --tx-90:color-mix(in srgb,var(--tx) 90%,transparent);
  --tx-72:color-mix(in srgb,var(--tx) 72%,transparent);
  --tx-52:color-mix(in srgb,var(--tx) 52%,transparent);
  --tx-30:color-mix(in srgb,var(--tx) 30%,transparent);
  --tx-14:color-mix(in srgb,var(--tx) 14%,transparent);
  --tx-07:color-mix(in srgb,var(--tx) 7%,transparent);

  --rail:190px;                              /* the spine, on wide screens */
  --measure:66ch;                            /* the one reading measure */
  --pad:clamp(1.25rem,4vw,3rem);
  --gap:clamp(4.5rem,9vh,7.5rem);            /* between reading blocks */

  --f-display:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --f-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

html{scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--gr);color:var(--tx);
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(16px,1.05vw,18.5px);line-height:1.68;
  letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* the house rule: hierarchy is size and colour. never weight. */
b,strong{font-weight:400;color:var(--tx)}
h1,h2,h3{font-weight:200;margin:0;letter-spacing:-.028em;line-height:1.02}
a{color:inherit}
img,svg{max-width:100%}

/* ---- the engine sits behind everything and never takes a click ---- */
#c{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;
   opacity:.55;transition:opacity .55s ease}
/* reading zones demote it to a backdrop. it keeps full presence at the cover,
   the interstitials and the close. */
body.reading #c{opacity:.17}
@media (prefers-reduced-motion:reduce){#c{opacity:.14!important;transition:none}}

/* =========================================================================
   the masthead
   ========================================================================= */
.top{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:1.4rem;
  padding:.85rem var(--pad);
  background:color-mix(in srgb,var(--gr) 95%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--tx-07);
}
.mark{font-family:var(--f-mono);font-size:14px;letter-spacing:-.02em;white-space:nowrap}
.mark a{text-decoration:none}
.mark .p{color:var(--ac)}
.mark .sl{opacity:.34;margin:0 .5ch}
.mark a:last-child{color:var(--tx-72)}
.top nav{margin-left:auto;display:flex;align-items:center;gap:1.1rem;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em}
.top nav a{text-decoration:none;color:var(--tx-52);padding:.3rem 0;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.top nav a:hover{color:var(--tx)}
.top nav a.on{color:var(--ac);border-bottom-color:var(--ac)}
/* the read-progress hairline. the only ambient motion left in the chrome. */
.prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:linear-gradient(90deg,var(--ac),var(--ac2));transition:width .12s linear}

/* =========================================================================
   the spine — the thing that was missing. where you are, what is left,
   and one click to any of the five.
   ========================================================================= */
.spine{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:30;
  padding:6.5rem 0 2rem var(--pad);
  display:flex;flex-direction:column;gap:.1rem;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;
  pointer-events:none;
}
.spine .lbl{color:var(--tx-30);font-size:9.5px;letter-spacing:.2em;margin-bottom:.9rem}
.spine a{
  pointer-events:auto;text-decoration:none;display:flex;align-items:baseline;gap:.7ch;
  padding:.42rem 0;color:var(--tx-30);
  border-left:1px solid transparent;padding-left:.85rem;margin-left:-.85rem;
  transition:color .22s,border-color .22s;
}
.spine a .n{font-size:10px;opacity:.8;min-width:2ch}
.spine a:hover{color:var(--tx-72)}
.spine a.on{color:var(--ac);border-left-color:var(--ac)}
.spine .rest{margin-top:auto;pointer-events:auto;color:var(--tx-30);font-size:10px;
  letter-spacing:.14em;line-height:1.7}
.spine .rest a{display:inline;border:0;padding:0;margin:0;color:var(--tx-52)}
.spine .rest a:hover{color:var(--ac)}

/* on a narrow page the spine becomes a bar you can thumb. */
.spinebar{display:none}
@media (max-width:1080px){
  .spine{display:none}
  .spinebar{
    position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
    gap:.35rem;padding:.55rem var(--pad) calc(.55rem + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--gr) 92%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--tx-07);
    overflow-x:auto;scrollbar-width:none;
  }
  .spinebar::-webkit-scrollbar{display:none}
  .spinebar a{
    flex:0 0 auto;text-decoration:none;font-family:var(--f-mono);font-size:11px;
    letter-spacing:.05em;color:var(--tx-52);padding:.4rem .75rem;border-radius:2px;
    border:1px solid var(--tx-14);white-space:nowrap;
  }
  .spinebar a.on{color:var(--gr);background:var(--ac);border-color:var(--ac)}
}

/* =========================================================================
   the reading column
   ========================================================================= */
.page{position:relative;z-index:10}
.wrap{
  max-width:calc(var(--measure) + 2 * var(--pad));
  margin-left:max(var(--rail),calc(50% - var(--measure) / 2 - 8rem));
  margin-right:auto;padding:0 var(--pad);
}
@media (max-width:1080px){.wrap{margin-left:auto;margin-right:auto}}
/* the hub, the archive and a single signal carry no spine, so they get the
   page back instead of holding a rail-shaped gutter open for nothing. */
body.plain{--rail:0px}
body.plain .wrap{margin-left:auto;margin-right:auto}

.sec{padding:var(--gap) 0;scroll-margin-top:5.5rem}
.sec:first-of-type{padding-top:clamp(7rem,17vh,11rem)}

/* the one-time reveal. it runs once and then the block is finished: no
   opacity, no blur, no transform is ever applied to it again. */
.rise{opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}
.rise.in.done{transition:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ---- the cover ----
   the cover headline carries authored line breaks, so it gets more room than
   the reading measure. everything below it stays on the one measure. */
.cover>.wrap:first-of-type{max-width:calc(88ch + 2 * var(--pad))}
.cover h1{max-width:none;width:max-content;max-width:100%}
.eye{font-family:var(--f-mono);font-size:11px;letter-spacing:.19em;color:var(--ac);
  margin-bottom:1.5rem}
.cover h1{font-size:clamp(38px,5.4vw,76px);line-height:.99;text-wrap:balance}
.cover .lede{margin-top:1.9rem;max-width:56ch;color:var(--tx-72);font-size:clamp(15.5px,1.1vw,18px)}
.caret{color:var(--ac);-webkit-text-fill-color:var(--ac)}

/* the contents block. an issue you can enter in the middle. */
.toc{margin-top:2.8rem;border-top:1px solid var(--tx-14)}
.toc a{
  display:grid;grid-template-columns:2.6rem 6.5rem 1fr auto;gap:1rem;align-items:baseline;
  padding:.95rem .3rem;border-bottom:1px solid var(--tx-07);text-decoration:none;
  transition:background .2s,padding-left .2s;
}
.toc a:hover{background:var(--tx-07);padding-left:.8rem}
.toc .n{font-family:var(--f-mono);font-size:11px;color:var(--ac)}
.toc .ln{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;color:var(--ac2)}
.toc .hk{color:var(--tx-90);font-size:clamp(14.5px,1vw,16.5px);line-height:1.4}
.toc .ar{font-family:var(--f-mono);font-size:12px;color:var(--tx-30)}
.toc a:hover .ar{color:var(--ac)}
@media (max-width:640px){
  .toc a{grid-template-columns:2.2rem 1fr;row-gap:.3rem}
  .toc .ln{grid-column:2}
  .toc .hk{grid-column:2}
  .toc .ar{display:none}
}

/* ---- a signal, inside an issue ---- */
.tag{display:flex;align-items:baseline;gap:1.1ch;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.15em;margin-bottom:1.15rem}
.tag .num{color:var(--ac)}
.tag .cat{color:var(--ac2);letter-spacing:.2em}
.tag .day{color:var(--tx-30)}
.sec h2{font-size:clamp(27px,3.15vw,44px);max-width:17ch;line-height:1.06;
  text-wrap:balance}
.knife{
  margin-top:1.5rem;padding-left:1.15rem;border-left:2px solid var(--ac);
  font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--tx-90);max-width:52ch;
}
.body{margin-top:1.9rem;max-width:var(--measure)}
.body p{margin:0 0 1.15em;color:var(--tx-90)}
.body p:last-child{margin-bottom:0}

/* do / not this */
.dd{margin-top:1.8rem;display:grid;gap:.7rem;max-width:var(--measure)}
.dd>div{padding:.9rem 1.05rem;border:1px solid var(--tx-14);border-radius:2px;
  font-size:clamp(14.5px,1vw,16px);line-height:1.55;color:var(--tx-90)}
.dd .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.19em;display:block;
  margin-bottom:.42rem}
.dd .do{border-color:color-mix(in srgb,var(--ac2) 34%,transparent)}
.dd .do .k{color:var(--ac2)}
.dd .no{border-color:color-mix(in srgb,var(--no) 30%,transparent)}
.dd .no .k{color:var(--no)}

.closer{margin-top:1.8rem;max-width:52ch;font-size:clamp(16px,1.15vw,19px);
  line-height:1.55;color:var(--tx-72)}

/* the receipt. promoted: this is the proof the whole brand rests on, and it
   used to be the least legible element on the page. */
.rcpt{
  margin-top:2rem;max-width:var(--measure);
  border:1px solid var(--tx-14);border-left:2px solid var(--ac2);border-radius:2px;
  padding:1rem 1.15rem;background:var(--tx-07);
  font-family:var(--f-mono);font-size:12.5px;line-height:1.72;color:var(--tx-72);
}
.rcpt .k{display:block;font-size:9.5px;letter-spacing:.22em;color:var(--ac2);
  margin-bottom:.5rem}
.ship{margin-top:1.15rem;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.16em;color:var(--tx-30)}

/* ---- interstitial: the engine gets the room back ---- */
.inter{padding:clamp(7rem,15vh,11rem) 0}
.inter>.wrap{max-width:calc(88ch + 2 * var(--pad))}
.inter h2{font-size:clamp(30px,3.6vw,52px);max-width:none;width:max-content;max-width:100%}
.inter .lede{margin-top:1.5rem;max-width:54ch;color:var(--tx-72)}

/* ---- the close ---- */
.subf{margin-top:1.9rem;display:flex;gap:.6rem;flex-wrap:wrap;max-width:34rem}
.subf input{
  flex:1 1 15rem;background:transparent;border:1px solid var(--tx-30);border-radius:2px;
  color:var(--tx);font-family:var(--f-mono);font-size:13.5px;padding:.78rem .9rem;
}
.subf input::placeholder{color:var(--tx-30)}
.subf input:focus{outline:none;border-color:var(--ac)}
.btn{
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.09em;
  color:var(--ac);background:transparent;border:1px solid var(--ac);border-radius:2px;
  padding:.78rem 1.25rem;cursor:pointer;text-decoration:none;display:inline-block;
  transition:background .2s,color .2s;
}
.btn:hover{background:var(--ac);color:var(--gr)}
.btn.ghost{color:var(--tx-72);border-color:var(--tx-30)}
.btn.ghost:hover{background:var(--tx-14);color:var(--tx)}
.okmsg{display:none;margin-top:1rem;color:var(--ac2);font-family:var(--f-mono);font-size:12.5px}
.subf.done+.okmsg{display:block}
.subf.done{display:none}

/* prev / next, so an issue is never a dead end */
.pager{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:var(--gap);
  border-top:1px solid var(--tx-14);padding-top:1.5rem;
}
.pager a{text-decoration:none;font-family:var(--f-mono);font-size:12px;color:var(--tx-52);
  display:block;padding:.5rem 0;transition:color .2s}
.pager a:hover{color:var(--ac)}
.pager .r{text-align:right}
.pager .t{display:block;font-family:var(--f-display);font-size:15.5px;color:var(--tx-90);
  margin-top:.35rem;letter-spacing:-.02em}

.foot{margin-top:2.5rem;padding-bottom:clamp(4rem,10vh,7rem);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:var(--tx-30)}
.foot a{color:var(--tx-52);text-decoration:none}
.foot a:hover{color:var(--ac)}

/* =========================================================================
   the index — search, lanes, and two views of the same 48 things
   ========================================================================= */
.filters{
  position:sticky;top:3.35rem;z-index:20;margin-top:2rem;padding:1rem 0 .9rem;
  background:color-mix(in srgb,var(--gr) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--tx-07);
}
.srch{position:relative;display:block}
.srch input{
  width:100%;background:transparent;border:1px solid var(--tx-14);border-radius:2px;
  color:var(--tx);font-family:var(--f-mono);font-size:13.5px;padding:.72rem .9rem .72rem 2.3rem;
}
.srch input:focus{outline:none;border-color:var(--ac)}
.srch input::placeholder{color:var(--tx-30)}
.srch .i{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  color:var(--tx-30);font-family:var(--f-mono);font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
.chip{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;cursor:pointer;
  color:var(--tx-52);background:transparent;border:1px solid var(--tx-14);border-radius:2px;
  padding:.35rem .7rem;transition:all .18s;
}
.chip:hover{color:var(--tx);border-color:var(--tx-30)}
.chip.on{color:var(--gr);background:var(--ac2);border-color:var(--ac2)}
.chip.view.on{background:var(--ac);border-color:var(--ac)}
.count{margin-top:.8rem;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;
  color:var(--tx-30)}

.list{margin-top:1.6rem}
.card{
  display:block;text-decoration:none;padding:1.5rem 0;border-bottom:1px solid var(--tx-07);
  transition:padding-left .2s,background .2s;
}
.card:hover{background:var(--tx-07);padding-left:.85rem}
.card .meta{display:flex;align-items:center;gap:.9ch;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--tx-30)}
.card .meta .no{color:var(--ac)}
.card .meta .now{color:var(--gr);background:var(--ac);padding:.15em .5em;border-radius:2px;
  letter-spacing:.15em}
.card .meta .eng{color:var(--ac2)}
.card h3{margin-top:.6rem;font-size:clamp(20px,2vw,29px);max-width:22ch;color:var(--tx)}
.card .lede{margin-top:.55rem;max-width:62ch;color:var(--tx-52);
  font-size:clamp(14px,.95vw,15.5px);line-height:1.55}
.card .lanes{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.85rem}
.card .lanes span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.15em;
  color:var(--tx-52);border:1px solid var(--tx-14);border-radius:2px;padding:.22em .5em}
.sw{display:inline-flex;gap:2px;margin-left:.3rem}
.sw i{width:9px;height:9px;border-radius:1px;display:block}

/* the signals view: a week per group, so a signal is never orphaned */
.wk{margin-top:2.2rem}
.wk .h{display:flex;align-items:baseline;gap:1ch;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;color:var(--tx-30);
  padding-bottom:.6rem;border-bottom:1px solid var(--tx-14)}
.wk .h a{color:var(--ac2);text-decoration:none}
.wk .h a:hover{color:var(--ac)}
.row{
  display:grid;grid-template-columns:7.5rem 6rem 1fr auto;gap:1rem;align-items:baseline;
  padding:.85rem .3rem;border-bottom:1px solid var(--tx-07);text-decoration:none;
  transition:background .18s,padding-left .18s;
}
.row:hover{background:var(--tx-07);padding-left:.8rem}
.row .dt{font-family:var(--f-mono);font-size:11px;color:var(--tx-30)}
.row .ln{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;color:var(--ac2)}
.row .hk{color:var(--tx-90);font-size:clamp(14.5px,1vw,16.5px);line-height:1.45}
.row .ar{font-family:var(--f-mono);font-size:12px;color:var(--tx-30)}
.row:hover .ar{color:var(--ac)}
@media (max-width:720px){
  .row{grid-template-columns:1fr;row-gap:.25rem}
  .row .ar{display:none}
}
.empty{padding:3rem 0;color:var(--tx-30);font-family:var(--f-mono);font-size:12.5px}

/* =========================================================================
   the hub
   ========================================================================= */
.hero{padding:clamp(7rem,16vh,11rem) 0 clamp(3rem,7vh,5rem)}
.hero .lane{display:flex;align-items:baseline;gap:1ch;flex-wrap:wrap;margin-bottom:1.2rem}
.hero .lz{font-size:clamp(19px,2.2vw,30px);color:var(--ac2);letter-spacing:-.02em}
.hero .dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--tx-30)}
.hero .lv{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.17em;color:var(--gr);
  background:var(--ac2);padding:.28em .55em;border-radius:2px}
.hero h1{font-size:clamp(34px,5vw,68px);max-width:18ch}
.hero .line{margin-top:1.5rem;max-width:54ch;color:var(--tx-72);
  padding-left:1.15rem;border-left:2px solid var(--ac2)}
.go{margin-top:2rem;display:flex;gap:.7rem;flex-wrap:wrap}

.band{padding:clamp(4rem,9vh,7rem) 0;border-top:1px solid var(--tx-14)}
.band .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;color:var(--tx-30);
  margin-bottom:1.4rem}
.week{display:grid;gap:.1rem;margin-top:1.4rem}