/* =========================================================================
   >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" */

  /* tint stops. light ink on a dark ground carries at a low percentage;
     dark ink on a bright ground does not, so a bright page overrides these.
     no ghost type: furniture is weight against weight, not faded ink. */
  --t90:90%; --t72:72%; --t52:52%; --t30:30%; --t14:14%; --t07:7%;

  --tx-90:color-mix(in srgb,var(--tx) var(--t90),transparent);
  --tx-72:color-mix(in srgb,var(--tx) var(--t72),transparent);
  --tx-52:color-mix(in srgb,var(--tx) var(--t52),transparent);
  --tx-30:color-mix(in srgb,var(--tx) var(--t30),transparent);
  --tx-14:color-mix(in srgb,var(--tx) var(--t14),transparent);
  --tx-07:color-mix(in srgb,var(--tx) var(--t07),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:400;
  font-size:clamp(17.5px,1.1vw,20px);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:500;color:var(--tx)}
h1,h2,h3{font-weight:300;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 ---- */
#g{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
#c{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;
   opacity:.82;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;flex-wrap:wrap;
  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:15px;letter-spacing:-.02em;white-space:nowrap;min-width:0}
.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:13px;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:12.5px;letter-spacing:.04em;
  pointer-events:none;
}
.spine .lbl{color:var(--tx-30);font-size:12px;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:12px;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:12px;
  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:12.5px;
    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:12.5px;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(17px,1.15vw,19.5px)}
.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:12.5px;color:var(--ac)}
.toc .ln{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.13em;color:var(--ac2)}
.toc .hk{color:var(--tx-90);font-size:clamp(16px,1.05vw,18px);line-height:1.4}
.toc .ar{font-family:var(--f-mono);font-size:13px;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:12.5px;
  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(18.5px,1.4vw,22.5px);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(16px,1.05vw,17.5px);line-height:1.55;color:var(--tx-90)}
.dd .k{font-family:var(--f-mono);font-size:12px;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(17.5px,1.2vw,20.5px);
  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:13.5px;line-height:1.72;color:var(--tx-72);
}
.rcpt .k{display:block;font-size:12px;letter-spacing:.22em;color:var(--ac2);
  margin-bottom:.5rem}
.ship{margin-top:1.15rem;font-family:var(--f-mono);font-size:12.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:14.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:13.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:13.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:13px;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:16.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:12.5px;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:static;margin-top:2rem;padding:1rem 0 .9rem;
  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:14.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:14px}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
.chip{
  font-family:var(--f-mono);font-size:12.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:12.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:12.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(15.5px,1vw,17px);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:12px;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:12.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:12.5px;color:var(--tx-30)}
.row .ln{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.15em;color:var(--ac2)}
.row .hk{color:var(--tx-90);font-size:clamp(16px,1.05vw,18px);line-height:1.45}
.row .ar{font-family:var(--f-mono);font-size:13px;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:13.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:12.5px;letter-spacing:.16em;color:var(--tx-30)}
.hero .lv{font-family:var(--f-mono);font-size:12px;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:12px;letter-spacing:.22em;color:var(--tx-30);
  margin-bottom:1.4rem}
.week{display:grid;gap:.1rem;margin-top:1.4rem}

/* the mobile pass. no row may exceed the viewport, and no label may shrink
   below the floor to make it fit. the header takes a second row instead. */
@media (max-width:560px){
  .top{gap:.55rem 1rem;padding:.7rem var(--pad)}
  .top .mark{font-size:14px}
  .top nav{margin-left:0;width:100%;gap:1.25rem;font-size:12.5px}
  .top nav a{padding:.2rem 0}
}

/* =========================================================================
   the archive as a stack of grounds. each band is one issue in its own trio.
   the list breaks out of the reading measure so the ground runs edge to edge,
   and the content steps back in to the measure.
   ========================================================================= */
.list.stack{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:2.2rem}
/* the band is a pane of the issue's ground laid over the live organism, not
   a flat fill. the wash stays heavy enough that the type never fights it. */
.band{
  display:block;text-decoration:none;color:var(--b-tx);
  padding:clamp(2.4rem,5vw,3.6rem) var(--pad);
  background-color:transparent;
  /* two layers. the top one closes the ground over the reading and opens it
     at both margins, so the organism runs down the page in the gutters and is
     never underneath a word. no plate, no box: it is the ground itself
     thinning out at the edges. */
  background-image:
    linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--b-gr) 62%, transparent) 9%,
      var(--b-gr) 21%,
      var(--b-gr) 79%,
      color-mix(in srgb, var(--b-gr) 62%, transparent) 91%,
      transparent 100%),
    radial-gradient(98% 98% at 68% 42%,
      color-mix(in srgb, var(--b-l) 72%, transparent) 0%,
      color-mix(in srgb, var(--b-gr) 76%, transparent) 50%,
      color-mix(in srgb, var(--b-d) 84%, transparent) 100%);
  border-top:1px solid rgba(0,0,0,.08);
  transition:filter .25s;
}
/* the issue you are on opens its margins wider: the organism is most itself
   in the state you are standing in */
.band.on{
  background-image:
    linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--b-gr) 44%, transparent) 12%,
      var(--b-gr) 25%,
      var(--b-gr) 75%,
      color-mix(in srgb, var(--b-gr) 44%, transparent) 88%,
      transparent 100%),
    radial-gradient(98% 98% at 68% 42%,
      color-mix(in srgb, var(--b-l) 58%, transparent) 0%,
      color-mix(in srgb, var(--b-gr) 62%, transparent) 50%,
      color-mix(in srgb, var(--b-d) 74%, transparent) 100%);
}
.band:hover{filter:saturate(1.08) brightness(1.02)}
.band .bin{
  display:grid;grid-template-columns:190px minmax(0,1fr) 48px;gap:clamp(1.6rem,4vw,3.4rem);
  align-items:start;max-width:calc(var(--rail) + var(--measure) + 26rem);margin:0 auto;
}
.band .bno{display:flex;flex-direction:column;gap:.35rem}
.band .bno .k{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:var(--b-mute)}
.band .bno .n{font-weight:600;font-size:clamp(64px,7vw,96px);line-height:.82;letter-spacing:-.05em;color:var(--b-tx)}
.band .bno .r{font-family:var(--f-mono);font-size:13px;margin-top:.6rem;color:var(--b-mute)}
.band .bno .sw{display:flex;gap:6px;margin-top:.9rem}
.band .bno .sw i{width:24px;height:24px;border-radius:50%;display:block;border:1px solid var(--b-hair)}
.band .btags{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.band .btags span{font-family:var(--f-mono);font-size:12px;letter-spacing:.09em;padding:.4em .8em;border-radius:2px}
.band .btags .eng{border:1px solid var(--b-hair);color:var(--b-tx)}
.band .btags .now{background:var(--b-ac);color:var(--b-gr)}
.band h3{margin:1rem 0 0;font-weight:500;font-size:clamp(28px,3.3vw,46px);line-height:1.02;letter-spacing:-.032em;color:var(--b-tx);max-width:22ch}
.band .lede{margin-top:.9rem;font-size:clamp(15.5px,1.05vw,17.5px);line-height:1.62;max-width:62ch;color:var(--b-tx);opacity:.86}
.band .lanes{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem}
.band .lanes span{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;padding:.4em .8em;border:1px solid var(--b-hair);border-radius:2px;color:var(--b-tx);opacity:.9}
.band .bar{align-self:center;color:var(--b-tx);opacity:.7;transition:transform .2s,opacity .2s}
.band:hover .bar{transform:translateX(6px);opacity:1}
@media (max-width:900px){
  .band .bin{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .band .bno{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:.8rem 1rem}
  .band .bno .n{font-size:56px}
  .band .bno .r,.band .bno .sw{margin-top:0}
  .band .bar{display:none}
  .band h3{font-size:clamp(26px,7vw,34px)}
}

/* =========================================================================
   the signal reader. one signal, read on the left, with the week's engine
   standing in the right field beside it at full presence, never under the
   copy. the week rail at the far edge says where this day sits.
   ========================================================================= */
body.signal{--pad-x:clamp(1.25rem,5vw,5.5rem)}
body.signal .wrap{margin-left:var(--pad-x);margin-right:auto;
  max-width:calc(var(--measure) + 2 * var(--pad));padding-left:0}
body.signal #c{opacity:.92}
body.signal.reading #c{opacity:.92}
@media (max-width:1080px){
  body.signal .wrap{margin-left:auto;margin-right:auto;padding-left:var(--pad)}
  body.signal #c{opacity:.7}
  body.signal.reading #c{opacity:.17}
}
body.signal .sec:first-of-type{padding-top:clamp(6.5rem,16vh,10rem);padding-bottom:0}
@media (max-width:899px){
  /* the engine is a band across the top of the phone; the headline starts under it */
  body.signal .sec:first-of-type{padding-top:clamp(13rem,38vh,20rem)}
  body.signal #c{opacity:.8}
  body.signal.reading #c{opacity:.14}
}
body.signal .sec.read{padding-top:clamp(2.2rem,4.5vh,3.4rem)}
body.signal .tag{font-size:13px}
/* the lane is type, so it reads in ink at full strength. its colour stays
   on the page as the mark beside it, which is where an accent belongs: a
   13px label carried in an accent lands near 3 to 1 on the lighter lanes
   and is barely there. */
body.signal .tag .cat{color:var(--tx-90);letter-spacing:.24em;display:inline-flex;align-items:center;gap:.7ch}
body.signal .tag .cat::before{content:"";width:.62em;height:.62em;border-radius:50%;
  background:var(--ac);box-shadow:0 0 0 1px color-mix(in srgb,var(--tx) 22%,transparent)}
body.signal .tag .day{color:var(--tx-52)}
body.signal .tag .num{color:var(--tx-52)}
body.signal h1.hook{font-size:clamp(33px,3.95vw,62px);line-height:.98;letter-spacing:-.034em;
  max-width:17ch;margin-top:1.1rem}
body.signal .knife{font-size:clamp(19px,1.5vw,24px);line-height:1.46;max-width:50ch;
  margin-top:1.6rem;padding-left:1.1rem;border-left:2px solid var(--ac)}
body.signal .body{margin-top:0;font-size:clamp(17.5px,1.12vw,20.5px)}
body.signal .body p{margin-bottom:1.2em}

/* the week rail: fixed at the right edge on a wide page, an echo of the rooms
   rail on the front of house. the rest of the week, one click each. */
.weekrail{position:fixed;right:clamp(1.25rem,3.2vw,3.2rem);top:clamp(6.5rem,16vh,10rem);z-index:30;
  display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;text-align:right}
.weekrail .lbl{color:var(--tx-30);font-size:11.5px;letter-spacing:.22em;margin-bottom:.7rem}
.weekrail a{text-decoration:none;color:var(--tx-52);display:flex;gap:.9ch;align-items:baseline;
  padding:.36rem 0 .36rem .85rem;border-right:1px solid transparent;padding-right:.85rem;margin-right:-.85rem;
  transition:color .22s,border-color .22s}
.weekrail a .d{color:var(--tx-30);font-size:11.5px;min-width:3ch}
.weekrail a .l{letter-spacing:.14em}
.weekrail a:hover{color:var(--tx-90)}
.weekrail a.on{color:var(--ac);border-right-color:var(--ac)}
.weekrail a.on .d{color:var(--ac)}
.weekrail .iss{margin-top:1.1rem;color:var(--tx-52);text-decoration:none;font-size:12px;letter-spacing:.1em;
  border-bottom:1px solid var(--tx-14);padding-bottom:.15rem}
.weekrail .iss:hover{color:var(--ac);border-bottom-color:var(--ac)}
.weekrail .run{margin-top:1.1rem;color:var(--tx-30);font-size:11.5px;letter-spacing:.14em}
@media (max-width:1080px){.weekrail{display:none}}


/* =========================================================================
   the archive runs the organism. the canvas is the page's own ground, at
   full presence, and never demoted: the stack is what you read, and the
   bands carry their own wash.
   ========================================================================= */
body.archive #c{opacity:.9}
body.archive.reading #c{opacity:.9}
/* on the paper above the stack the organism is a presence, not a figure */
body.archive.on-paper #c{opacity:.46}
/* the paper above the stack is where the organism is in its birth state, so
   it stays light enough to read the headline over */
body.archive .list.stack{margin-top:2.2rem}

/* =========================================================================
   the specimen strip. the archive's hero is the organism's own record of
   itself: one stop per issue, oldest first, each in that issue's colour.
   taking a stop puts the creature behind the page back into that state, so
   the whole evolution is playable from the top of the page.
   ========================================================================= */
.evo{margin-top:clamp(2rem,4vh,3rem);display:flex;align-items:flex-end;gap:clamp(3px,.5vw,7px);
  max-width:calc(var(--measure) + 8rem)}
.evo a{
  flex:1 1 0;min-width:0;text-decoration:none;display:block;position:relative;
  padding-top:.5rem;cursor:pointer;
}
.evo .bar{
  display:block;height:var(--h,44px);border-radius:1px;
  background:linear-gradient(180deg,var(--e-l) 0%,var(--e-g) 46%,var(--e-d) 100%);
  transition:height .28s cubic-bezier(.2,.8,.2,1),filter .2s,transform .28s cubic-bezier(.2,.8,.2,1);
  transform-origin:bottom;
}
.evo .n{display:block;margin-top:.5rem;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.06em;color:var(--tx-30);transition:color .2s}
.evo a:hover .bar,.evo a:focus-visible .bar{height:calc(var(--h,44px) + 26px);filter:saturate(1.12)}
.evo a:hover .n,.evo a:focus-visible .n,.evo a.on .n{color:var(--tx-90)}
.evo a.on .bar{height:calc(var(--h,44px) + 14px)}
/* what the week was, named only while you are on it, so the strip stays a
   strip and does not become a legend */
.evo .lbl{
  position:absolute;bottom:calc(100% + .5rem);left:0;white-space:nowrap;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--tx-72);
  opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s;pointer-events:none;
}
.evo a:hover .lbl,.evo a:focus-visible .lbl{opacity:1;transform:none}
.evo a:nth-last-child(-n+3) .lbl{left:auto;right:0}
@media (max-width:640px){
  .evo .n{font-size:10px}
  .evo .lbl{display:none}
}

/* taking a stop is a time machine, so the page goes with it: the ground, the
   ink and the accents all move to that week and settle, rather than the
   canvas changing under a paper that stayed put. */
body.archive{transition:background-color .45s ease}
body.archive .band{transition:filter .25s}