/* Ink on warm paper. Archival in feel, not in costume: the drawings are the
   ornament, and everything else gets out of their way. */

:root{
  --paper:#F6F1E4;
  --wash:#EFE8D6;
  --deep:#E6DCC2;
  --ink:#211C13;
  --faded:#6E6455;
  --hair:#D5CAB0;
  --red:#B03A1E;
  --rust:#A33E22;
  --fern:#3C5A34;
  --pond:#2E5E6E;

  --wrap:78rem;
  --measure:38rem;
  --gap:clamp(3.5rem,7vw,7rem);

  --amber:#C08A2E;
  --body:var(--body);

  --f-display:"Zilla Slab",Georgia,serif;
  --f-body:"Spectral",Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  --grain-blend:multiply;
  --grain-opacity:.05;
  color-scheme:light;
}

/* Night. Not an inversion: a warm dark ground with the same ink relationship,
   so the drawings read the way they do on paper. The drawings inherit this
   automatically, because they are drawn in these tokens.

   Two blocks, deliberately duplicated: the first follows the operating system
   unless the reader has explicitly chosen light, the second is the reader's
   own choice winning over the system. Keep them in sync. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15120D;
    --wash:#201A12;
    --deep:#2A2318;
    --ink:#F0E8D7;
    --faded:#A2957C;
    --hair:#40382A;
    --red:#F2674C;
    --rust:#C4764E;
    --fern:#86AE78;
    --pond:#74AEC0;
    --amber:#D6A245;
    --body:#D6CDB9;
    --grain-blend:soft-light;
    --grain-opacity:.5;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --paper:#15120D;
    --wash:#201A12;
    --deep:#2A2318;
    --ink:#F0E8D7;
    --faded:#A2957C;
    --hair:#40382A;
    --red:#F2674C;
    --rust:#C4764E;
    --fern:#86AE78;
    --pond:#74AEC0;
    --amber:#D6A245;
    --body:#D6CDB9;
    --grain-blend:soft-light;
    --grain-opacity:.5;
    color-scheme:dark;
}

/* ------------------------------------------------------------ theme switch */
.theme{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faded);
  background:none;border:1px solid var(--hair);cursor:pointer;
  padding:.5em .7em;line-height:1;
  transition:color .2s,border-color .2s}
.theme:hover{color:var(--ink);border-color:var(--ink)}
.theme svg{width:13px;height:13px;flex:0 0 auto;display:block;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.theme__mode{min-width:3.1em;text-align:left}
/* Only the glyph for the active mode is drawn. */
.theme [data-for]{display:none}
:root:not([data-theme]) .theme [data-for="auto"],
:root[data-theme="light"] .theme [data-for="light"],
:root[data-theme="dark"] .theme [data-for="dark"]{display:block}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:19px;line-height:1.65;
  font-weight:400;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.05;
  letter-spacing:-.02em;margin:0}
p{margin:0 0 1.1em}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:.6rem 1rem;z-index:2000;font-family:var(--f-mono);font-size:12px}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

.grain{position:fixed;inset:0;z-index:1200;pointer-events:none;
  background-image:url("plates/grain.svg");background-size:180px 180px;
  opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend)}

/* ---------------------------------------------------------------- masthead */
.nav{position:sticky;top:0;z-index:900;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding-block:.85rem}
.nav__right{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem)}
.nav__brand{font-family:var(--f-display);font-weight:700;font-size:1.05rem;
  text-decoration:none;letter-spacing:-.01em;display:flex;align-items:baseline;gap:.75rem}
.nav__role{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faded);font-weight:400}
.nav nav ul{display:flex;gap:1.6rem}
.nav nav a{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;color:var(--faded);
  padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--ink);border-color:var(--rust)}

/* ------------------------------------------------------------ section mark */
.marker{display:flex;align-items:center;gap:1rem;margin:0 0 clamp(1.75rem,3vw,2.75rem)}
/* .over is an h2 inside .marker and a p elsewhere; font-weight:400 keeps the
   two identical, so promoting the section markers to real headings changed
   the outline and nothing else. */
.over{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;margin:0;
  font-weight:400}
.over__n{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;
  color:var(--red);font-weight:500}
.marker__rule{flex:1;height:1px;background:var(--hair)}

/* --------------------------------------------------------------------- hero */
.hero{padding:clamp(3.5rem,9vh,6.5rem) 0 clamp(2.25rem,4.5vw,3.5rem)}
.hero__h{font-size:clamp(2.7rem,7.4vw,6rem);line-height:.98;letter-spacing:-.035em;
  max-width:16ch;margin:0 0 1.5rem}
.hero__h em,.hero__reel{font-style:normal;color:var(--red);position:relative;
  white-space:nowrap}
.hero__h em::after,.hero__reel::after{content:"";position:absolute;left:0;
  right:0;bottom:.06em;height:.055em;background:var(--red);transform:scaleX(0);
  transform-origin:left;
  animation:ul 1s cubic-bezier(.2,.75,.2,1) .5s forwards}
/* The emphasised phrase is the way in to the reel. It has to keep the
   headline's type, so the button is stripped back to nothing. */
.hero__reel{font:inherit;letter-spacing:inherit;background:none;border:0;
  padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.hero__reel:hover{color:var(--rust)}
.hero__reel:hover::after{height:.075em}
.hero__reel:focus-visible{outline:2px solid var(--rust);outline-offset:4px}
@keyframes ul{to{transform:scaleX(1)}}
.hero__l{font-size:clamp(1.06rem,1.5vw,1.24rem);max-width:46ch;color:var(--body);
  margin:0 0 2rem}
.hero__cta{display:flex;gap:.75rem;flex-wrap:wrap}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2rem,6vw,5rem);align-items:start;margin-top:clamp(1.5rem,3vw,2.5rem)}
.hidx{border-top:1px solid var(--ink);padding-top:.9rem}
.hidx__k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faded);margin:0 0 .35rem}
.hidx a{display:grid;grid-template-columns:2.25rem minmax(0,1fr) minmax(0,auto);
  gap:1rem;align-items:baseline;text-decoration:none;padding:.72rem 0;
  border-top:1px solid var(--hair);transition:color .2s}
.hidx li:first-child a{border-top:0}
.hidx__n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--red)}
.hidx__name{font-family:var(--f-display);font-weight:600;font-size:1.12rem;
  letter-spacing:-.015em}
.hidx__g{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faded);text-align:right;
  transition:color .2s,transform .2s}
.hidx a:hover .hidx__name{color:var(--red)}
.hidx a:hover .hidx__g{color:var(--ink)}

.btn{display:inline-block;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:.85em 1.5em;background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);transition:background .2s,color .2s,transform .2s}
.btn:hover{background:var(--red);border-color:var(--red);transform:translateY(-1px)}
.btn--q{background:transparent;color:var(--ink)}
.btn--q:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ----------------------------------------------------------------- drawings */
.dg-frame{border:1px solid var(--ink);background:var(--paper);
  padding:clamp(1.1rem,2.4vw,2.1rem);position:relative}
.dg-frame::after{content:"";position:absolute;inset:5px;border:1px solid var(--hair);
  pointer-events:none}
.dg{width:100%;height:auto;display:block;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.15s cubic-bezier(.22,.68,.2,1)}
.reveal.in .dg,.no-js .dg{clip-path:inset(0 0 0 0)}
.dg-fig{margin:0}
.dg-cap{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;
  line-height:1.7;color:var(--faded);margin:1rem 0 0;max-width:78ch}
.fig-no{color:var(--red);letter-spacing:.12em;text-transform:uppercase;
  margin-right:.5em;font-weight:500}

.dg-call{cursor:pointer;transition:opacity .2s}
.dg-call circle{transition:r .18s ease,fill .18s}
.dg-fig.hot .dg-call{opacity:.34}
.dg-fig.hot .dg-call.on{opacity:1}
.dg-call.on circle{r:16}

.dg-notes{margin:1.5rem 0 0;display:grid;gap:.55rem;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.dg-note{display:flex;gap:.7rem;align-items:flex-start;font-size:.94rem;
  line-height:1.5;color:var(--body);padding:.6rem .75rem;border:1px solid transparent;
  cursor:default;transition:background .2s,border-color .2s}
.dg-note__n{font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--paper);
  background:var(--rust);width:1.55em;height:1.55em;flex:0 0 auto;
  border-radius:50%;display:grid;place-items:center;margin-top:.15em}
.dg-note.on{background:var(--wash);border-color:var(--hair)}

/* ------------------------------------------------------------- work listing */
.work{padding:var(--gap) 0 0}
/* Alternating grounds so four drawings in a row do not read as one grey wall. */
.band{padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--hair)}
.band--alt{background:var(--wash)}
.band:last-child{border-bottom:1px solid var(--hair)}
.pb{margin:0}
.band--alt .dg-frame{background:var(--paper)}
.band--alt .pb:hover .dg-frame{background:var(--deep)}
.pb__head{display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(1.5rem,3.5vw,3rem);align-items:start;
  margin:0 0 clamp(1.5rem,3vw,2.5rem)}
.pb__n{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.18em;
  color:var(--red);margin:0 0 .7rem}
.pb__h{font-size:clamp(2.1rem,4.2vw,3.6rem);letter-spacing:-.03em;margin:0}
.pb__h a{text-decoration:none;
  background-image:linear-gradient(var(--red),var(--red));
  background-size:0 3px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s cubic-bezier(.2,.7,.2,1)}
.pb:hover .pb__h a,.pb__h a:focus-visible{background-size:100% 3px}
.pb__t{font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.32;letter-spacing:-.015em;
  color:var(--body);margin:0;padding-top:1.85rem}
.pb__meta{padding-top:1.9rem}
.pb__facts{display:grid;gap:.42rem;margin:0 0 1.35rem;
  border-top:1px solid var(--hair);padding-top:.85rem}
.pb__facts li{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;
  display:grid;grid-template-columns:5.25rem 1fr;gap:.75rem}
.pb__facts span{color:var(--faded);letter-spacing:.13em;text-transform:uppercase}
.pb__cta{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--rust);padding-bottom:3px}
.pb__cta span{display:inline-block;margin-left:.6em;transition:transform .28s}
.pb:hover .pb__cta span{transform:translateX(5px)}
/* The mechanism and the artifact, side by side and named, so neither has to
   stand in for the other. */
.pb__pair{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(1rem,2vw,1.75rem);align-items:stretch}
.pb__panel{display:flex;flex-direction:column;min-width:0}
.pb__label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faded);margin:0 0 .6rem}
.pb__dia,.pb__ui{display:flex;flex:1;min-height:0;text-decoration:none}
.pb__dia .dg-frame{flex:1;transition:background .35s}
.pb:hover .pb__dia .dg-frame{background:var(--wash)}
/* The drawing sets the height of the row; the screen is fitted into whatever
   that leaves, so a tall phone shot cannot stretch the pair. */
.pb__ui{border:1px solid var(--ink);background:var(--wash);
  position:relative;overflow:hidden;transition:background .35s}
.pb__ui::after{content:"";position:absolute;inset:5px;border:1px solid var(--hair);
  pointer-events:none}
.pb__ui img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:clamp(.85rem,1.6vw,1.35rem)}
.pb:hover .pb__ui{background:var(--deep)}
.band--alt .pb__ui{background:var(--paper)}
.band--alt .pb:hover .pb__ui{background:var(--deep)}

/* --------------------------------------------------------------- through-line */
.thread{padding:var(--gap) 0;background:var(--wash);
  border-block:1px solid var(--hair)}
.thread__grid{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.thread__big{font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.5rem,2.7vw,2.15rem);line-height:1.22;letter-spacing:-.02em;margin:0}
.thread__side p{font-size:1rem;color:var(--body)}
.thread__side p:last-child{margin:0}
/* The unglamorous four. Naming them is the point: this is the work. */
.tparts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(1.25rem,2.5vw,2.25rem);margin-top:clamp(2.5rem,5vw,4rem)}
.tparts li{border-top:2px solid var(--ink);padding:1.1rem 0 1.5rem;
  transition:border-color .25s}
.tparts li:hover{border-color:var(--red)}
.tp__k{font-family:var(--f-display);font-weight:700;font-size:1.3rem;
  letter-spacing:-.02em;margin:0 0 .45rem}
.tp__p{font-size:.95rem;color:var(--body);margin:0 0 .7rem}
.tp__s{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faded);margin:0}
.tparts li:hover .tp__s{color:var(--red)}

/* ------------------------------------------------------------------- who/press */
.who{padding:var(--gap) 0}
.who__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem)}
.who__lede{font-size:1.16rem;max-width:34ch}
.who__marks li{border-top:1px solid var(--hair);padding:1.15rem 0}
.who__marks h3{font-size:1.08rem;margin:0 0 .3rem}
.who__marks p{font-size:.96rem;color:var(--body);margin:0}

.press-teaser{padding:0 0 var(--gap)}
.pr li{display:grid;grid-template-columns:9rem 1fr auto;gap:1.5rem;
  align-items:baseline;padding:.95rem 0;border-top:1px solid var(--hair)}
.pr__o{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase}
.pr__t{font-size:1rem;color:var(--body)}
.pr__d{font-family:var(--f-mono);font-size:11px;color:var(--faded);white-space:nowrap}
.press-teaser .btn{margin-top:1.75rem}

/* --------------------------------------------------------------- case header */
.chead{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--hair)}
.chead__idx{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.2em;
  color:var(--red);margin:0 0 1.5rem}
.chead__h{font-size:clamp(2.6rem,6.6vw,5rem);letter-spacing:-.035em;margin:0 0 .75rem}
.chead__t{font-size:clamp(1.1rem,1.7vw,1.4rem);max-width:38ch;color:var(--body);
  margin:0 0 2.25rem}
.chead__facts{display:flex;flex-wrap:wrap;gap:2.25rem;margin:0 0 1.75rem;
  padding-top:1.5rem;border-top:1px solid var(--hair)}
.chead__facts dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faded);margin-bottom:.3rem}
.chead__facts dd{margin:0;font-size:.98rem;max-width:26ch}
.chead__links{display:flex;flex-wrap:wrap;gap:.6rem}
.pill{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;border:1px solid var(--ink);
  padding:.6em 1em;transition:background .2s,color .2s}
.pill span{margin-left:.5em;color:var(--red)}
.pill:hover{background:var(--ink);color:var(--paper)}
.pill:hover span{color:var(--paper)}

/* -------------------------------------------------------------- case body */
/* Top only: the shorthand was wiping the horizontal padding .wrap sets,
   which pushed About and Press body copy out of line with their headers. */
.case{padding-top:clamp(2.5rem,5vw,4rem)}
.sec{padding:0 0 var(--gap);scroll-margin-top:5rem}
.prose{max-width:var(--measure)}
.prose p{color:var(--body)}

.marks{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:0 clamp(1.5rem,3vw,2.75rem)}
.mark{border-top:1px solid var(--hair);padding:1.1rem 0 1.4rem}
.mark h3{font-size:1.06rem;margin:0 0 .35rem}
.mark p{font-size:.95rem;color:var(--body);margin:0}
.marks--two{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Press shares this class and puts its stage clip in the second column. About
   has no second child since the portrait moved to the bio band, so the auto
   column sizes to zero there and the lead takes the full width. */
.chead--about .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:0 clamp(2rem,5vw,4.5rem);align-items:start}
.chead--about .chead__facts{grid-column:1/-1}
/* Present only when static/stage.mp4 exists (clip.py writes it). */
.stage{margin:0;width:clamp(16rem,30vw,26rem)}
.stage video{display:block;width:100%;height:auto;aspect-ratio:16/9;
  border:1px solid var(--ink);background:var(--wash)}
.stage figcaption{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faded);margin-top:.55rem}
.chead--about .chead__t{margin-bottom:0}
.portrait{margin:0;width:clamp(12rem,19vw,16.5rem);
  border:1px solid var(--ink);background:var(--wash);padding:.5rem}
.portrait img{width:100%;height:auto;display:block;filter:contrast(1.04)}
/* In the bio band the portrait owns its column, so it fills it. */
.sec--bio .portrait{width:100%}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,4rem);align-items:start}
.quote--sm p{font-size:clamp(1.15rem,1.9vw,1.45rem)}

.quote{margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding-left:clamp(1.25rem,3vw,2rem);
  border-left:3px solid var(--rust);max-width:44rem}
.quote p{font-family:var(--f-display);font-weight:500;font-style:italic;
  font-size:clamp(1.35rem,2.5vw,1.95rem);line-height:1.3;letter-spacing:-.02em;
  margin:0 0 .75rem}
.quote cite{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  color:var(--faded);font-style:normal}

/* -------------------------------------------------------------- about/press */
.route li{display:grid;grid-template-columns:9rem 1fr;gap:clamp(1rem,2.5vw,2rem);
  border-top:1px solid var(--hair);padding:1.25rem 0}
.route__y{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  color:var(--red);padding-top:.3em}
.route h3{font-size:1.1rem;margin:0 0 .3rem}
.route p{font-size:.95rem;color:var(--body);margin:0}

/* Present only when static/reel.mp4 exists (clip.py --out reel). */
.reel{margin:0;border:1px solid var(--ink);background:var(--wash);
  padding:clamp(.5rem,1.2vw,.85rem)}
.reel video{display:block;width:100%;height:auto;background:#000;
  aspect-ratio:16/9}

/* ------------------------------------------------------------------ press */
/* Selected: four pieces carrying their own substance, so a reader who never
   clicks still leaves with something. */
.pk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1px;background:var(--hair);border:1px solid var(--hair)}
.pk{background:var(--paper);padding:clamp(1.1rem,2.2vw,1.6rem);
  display:flex;flex-direction:column}
.pk__out{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin:0 0 .7rem;
  display:flex;justify-content:space-between;gap:.5rem}
.pk__yr{color:var(--faded)}
.pk__t{font-size:1.1rem;letter-spacing:-.015em;margin:0 0 .55rem}
.pk__n{font-size:.92rem;line-height:1.55;color:var(--body);margin:0 0 .9rem}
.pk__go{margin-top:auto;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--rust);padding-bottom:2px;align-self:flex-start}
.pk__go span{color:var(--red);margin-left:.4em}

/* Filter chips: "show me just the podcasts" is the one question a list of
   38 unclickable items can actually answer. */
.fbar{margin:0 0 clamp(2rem,4vw,3rem)}
.fbar__k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faded);margin:0 0 .7rem}
.fbar__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.fchip{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faded);background:none;cursor:pointer;
  border:1px solid var(--hair);padding:.5em .8em;line-height:1;
  transition:color .18s,border-color .18s,background .18s}
.fchip:hover{color:var(--ink);border-color:var(--ink)}
.fchip.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.fbar__none{font-family:var(--f-mono);font-size:11px;color:var(--faded);
  margin:.9rem 0 0}

.pgroup{margin:0 0 clamp(2.25rem,4.5vw,3.5rem)}
.pgroup[hidden]{display:none}
.pgroup__head{display:flex;align-items:baseline;gap:.75rem;
  border-bottom:1px solid var(--ink);padding-bottom:.5rem}
.pgroup__head h3{font-size:clamp(1.15rem,1.9vw,1.5rem);letter-spacing:-.02em;
  margin:0}
.pgroup__n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  color:var(--red)}
.pgroup__b{font-size:.94rem;color:var(--faded);margin:.7rem 0 1rem;max-width:62ch}

.pr-list{display:block}
.pr-row{display:grid;
  grid-template-columns:6rem minmax(0,9.5rem) minmax(0,1fr) 3.2rem 4.2rem;
  gap:1rem;align-items:baseline;padding:.62rem 0;
  border-top:1px solid var(--hair)}
.pr-row[hidden]{display:none}
.pr__fmt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faded)}
.pr__out{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr__ttl{font-size:.97rem;color:var(--body);line-height:1.4}
.pr__star{color:var(--red);font-size:.55em;vertical-align:middle;
  margin-left:.5em}
.pr__yr{font-family:var(--f-mono);font-size:10.5px;color:var(--faded)}
.pr__act{justify-self:end}
.pr__go{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--rust);padding-bottom:2px;white-space:nowrap}
.pr__go span{color:var(--red);margin-left:.3em}

/* ----------------------------------------------------------- contact ways */
/* Each route says when to use it. A bare list of channels makes people
   guess which one is welcome. */
.ways{display:grid;gap:0;margin:1.75rem 0 0;max-width:34rem}
.way{display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:.2rem 1rem;text-decoration:none;padding:.95rem 0;
  border-top:1px solid var(--hair);transition:border-color .2s}
.ways li:last-child .way{border-bottom:1px solid var(--hair)}
.way:hover{border-color:var(--ink)}
.way__k{font-family:var(--f-display);font-weight:600;font-size:1.08rem;
  letter-spacing:-.015em;transition:color .2s}
.way:hover .way__k{color:var(--red)}
.way__n{grid-column:1;font-size:.92rem;color:var(--faded);line-height:1.5}
.way__go{grid-row:1;grid-column:2;color:var(--red);font-size:1rem;
  transition:transform .25s}
.way:hover .way__go{transform:translateX(5px)}

/* ---------------------------------------------------------- contact modal */
.cmod{border:1px solid var(--ink);background:var(--paper);
  padding:clamp(1.6rem,4vw,2.6rem);max-width:min(34rem,92vw);
  width:min(34rem,92vw);position:fixed;inset:0;margin:auto}
.cmod::backdrop{background:rgba(12,10,7,.78);backdrop-filter:blur(3px)}
.cmod__h{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.03em;
  margin:.6rem 0 0;max-width:18ch}
.cmod .ways{margin-top:1.5rem;max-width:none}
.cmod__x{position:absolute;top:.9rem;right:.9rem;width:2.2rem;height:2.2rem;
  border-radius:50%;border:1px solid var(--hair);background:none;
  color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0;
  transition:background .2s,color .2s,border-color .2s}
.cmod__x:hover{background:var(--red);border-color:var(--red);color:var(--paper)}

/* ------------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--ink);margin-top:var(--gap);
  padding:clamp(3rem,6vw,5rem) 0 clamp(2rem,4vw,3rem);background:var(--wash)}
.foot__grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(2rem,5vw,4rem)}
.foot__h{font-size:clamp(1.75rem,3.6vw,2.9rem);letter-spacing:-.03em;
  margin:.75rem 0 1rem;max-width:16ch}
.foot__links{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.75rem}
.foot__links a:not(.sx--icon){font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--rust);padding-bottom:3px;transition:color .2s}
.foot__links a:hover{color:var(--red)}
/* Icon slots: square target, ink mark, red on hover. Falls back to the text
   label when no brand SVG has been dropped in. */
.sx--icon{display:grid;place-items:center;width:2.5rem;height:2.5rem;
  border:1px solid var(--hair);padding:0;
  transition:border-color .2s,background .2s}
.sx--icon img{width:1.15rem;height:1.15rem;display:block;
  filter:grayscale(1);opacity:.78;transition:opacity .2s}
.sx--icon:hover{border-color:var(--ink);background:var(--paper)}
.sx--icon:hover img{opacity:1}
:root[data-theme="dark"] .sx--icon img{filter:grayscale(1) invert(1)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sx--icon img{filter:grayscale(1) invert(1)}
}
/* A filled tile is already light-on-dark; inverting it makes a bright block. */
.sx--tile img,
:root[data-theme="dark"] .sx--tile img{filter:grayscale(1)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sx--tile img{filter:grayscale(1)}
}
.foot__meta{font-family:var(--f-mono);font-size:10.5px;line-height:2;
  letter-spacing:.08em;color:var(--faded);text-transform:uppercase}

/* ---------------------------------------------------------- outlet strip */
/* Sized by prominence, not by borrowed logo files. A real press-kit SVG at
   static/logos/<slug>.svg takes over one slot; the rest stay as type. */
.outlets{background:var(--wash);border-block:1px solid var(--hair);
  padding:clamp(1.75rem,3.5vw,2.75rem) 0}
.outlets__head{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:.5rem 1.5rem;
  border-bottom:1px solid var(--hair);padding-bottom:.8rem;
  margin-bottom:clamp(1.25rem,2.5vw,2rem)}
.outlets__head .over{margin:0;color:var(--faded)}
.outlets__meta{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faded);margin:0}
.rule-dot{color:var(--red);padding:0 .35em}

.ol-strip{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:clamp(.7rem,1.4vw,1.15rem) clamp(1.1rem,2.4vw,2.1rem)}
.ol{font-family:var(--f-display);font-weight:600;letter-spacing:-.018em;
  line-height:1.15;color:var(--ink);
  transition:opacity .2s ease,color .2s ease}
.ol--t1{font-size:clamp(1.45rem,2.7vw,2.15rem);opacity:.92}
.ol--t2{font-size:clamp(1.05rem,1.7vw,1.38rem);opacity:.74}
.ol--t3{font-size:clamp(.88rem,1.15vw,1.02rem);opacity:.56;font-weight:500}
.ol:hover{opacity:1;color:var(--red)}
.ol__n{font-family:var(--f-mono);font-size:.42em;font-weight:500;
  letter-spacing:.06em;color:var(--red);vertical-align:super;margin-left:.18em}
.ol--logo{display:inline-flex;align-items:center}
.ol--logo img{height:1em;width:auto;display:block;
  filter:grayscale(1) contrast(.9)}
:root[data-theme="dark"] .ol--logo img{filter:grayscale(1) invert(1)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ol--logo img{filter:grayscale(1) invert(1)}
}

/* ------------------------------------------------------ contributions grid */
.gh-fig{margin:0}
.gh-frame{display:block;position:relative;text-decoration:none;
  border:1px solid var(--ink);background:var(--wash);
  padding:clamp(1rem,2.2vw,1.75rem);overflow-x:auto;scrollbar-width:thin;
  transition:background .25s,border-color .25s}
.gh-frame:hover{background:var(--deep);border-color:var(--fern)}
/* Always visible: on a touch screen there is no hover to reveal it, and a
   chart that is secretly a link is just a chart. */
.gh-go{position:absolute;top:.55rem;right:.7rem;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faded);
  opacity:.7;transition:opacity .25s,color .25s}
.gh-go span{color:var(--fern);margin-left:.35em}
.gh-frame:hover .gh-go,.gh-frame:focus-visible .gh-go{opacity:1;color:var(--ink)}
.gh{display:block;width:100%;height:auto;min-width:640px}
.gh-cap{font-family:var(--f-mono);font-size:11px;line-height:1.75;
  letter-spacing:.04em;color:var(--faded);margin:.9rem 0 0}
.gh-cap strong{color:var(--fern);font-weight:500}

/* ------------------------------------------------------------------- peek */
/* A preview that trails the cursor over the index. Decorative: it duplicates
   what the link already says, so it is aria-hidden and never shown to a
   pointer that cannot hover. */
.peek{
  position:fixed;top:0;left:0;z-index:1100;margin:0;pointer-events:none;
  border:1px solid var(--ink);background:var(--wash);padding:.5rem;
  opacity:0;transform:translate3d(-50%,-50%,0) scale(.94);
  transition:opacity .2s ease,transform .28s cubic-bezier(.2,.8,.2,1);
  will-change:transform,opacity}
.peek.on{opacity:1}
.peek img{display:block;max-width:19rem;max-height:48vh;width:auto;height:auto;
  border:1px solid var(--hair);background:var(--paper)}
.peek figcaption{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faded);margin-top:.5rem;text-align:center}
/* A play badge, so a thumbnail that is really a video says so. */
.peek__media{position:relative;display:block}
.peek__play{position:absolute;inset:0;display:none;place-items:center}
.peek.has-play .peek__play{display:grid}
.peek__play span{width:3.4rem;height:3.4rem;border-radius:50%;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  border:1px solid var(--ink);display:grid;place-items:center}
.peek__play span::before{content:"";border-left:.95rem solid var(--ink);
  border-top:.58rem solid transparent;border-bottom:.58rem solid transparent;
  margin-left:.26rem}

/* ------------------------------------------------------------ video modal */
.vmod{border:1px solid var(--ink);background:var(--wash);padding:.5rem;
  max-width:min(60rem,92vw);width:min(60rem,92vw);
  position:fixed;inset:0;margin:auto}
.vmod::backdrop{background:rgba(12,10,7,.82);backdrop-filter:blur(3px)}
.vmod video{display:block;width:100%;height:auto;max-height:78vh;
  background:#000;aspect-ratio:16/9}
/* Inside the frame: sitting outside it got clipped by the dialog box. */
.vmod__x{position:absolute;top:1rem;right:1rem;z-index:2;
  width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--ink);
  background:var(--paper);color:var(--ink);font-size:1.2rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;padding:0;
  transition:background .2s,color .2s}
.vmod__x:hover{background:var(--red);border-color:var(--red);color:var(--paper)}
@media (max-width:560px){
  .vmod__x{top:.85rem;right:.85rem}
}

/* -------------------------------------------------------------------- motion */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}
html:not(.js) .dg{clip-path:none}
/* A page header is above the fold on arrival, so its reveal has nothing to
   reveal — it only holds the largest element on the page at opacity:0 until
   the deferred script runs, and an invisible element cannot be the LCP. The
   ones further down the page still animate. */
.chead .reveal{opacity:1;transform:none}

/* ---------------------------------------------------------------- responsive */
/* A technical drawing has a minimum legible size. Below it, let the reader
   pan the drawing rather than shrinking the labels into nothing. */
@media (max-width:820px){
  .dg-frame{overflow-x:auto;overscroll-behavior-x:contain;
    padding:1rem;scrollbar-width:thin}
  .dg-frame::after{display:none}
  .dg{min-width:660px}
  /* The simple drawings carry bigger type, so less of the canvas has to be
     forced to keep them legible. */
  .dg--mini{min-width:600px}
  /* On the landing the drawing sits in a bare frame with no caption, so the
     scroll needs its own affordance. */
  .pb__panel:first-child .pb__label::after{content:" \2014 drag to read";
    color:var(--faded)}
  .pb__dia{position:relative}
  .pb__dia::after{content:"";position:absolute;top:1px;right:1px;bottom:1px;
    width:42px;pointer-events:none;
    background:linear-gradient(to right,transparent,var(--paper))}
  .dg-fig::before{content:"Drag the drawing sideways to read it";
    display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--faded);margin:0 0 .5rem}
  .dg-notes{grid-template-columns:1fr;gap:.25rem}
}

@media (max-width:900px){
  body{font-size:18px}
  .pb__head{gap:1rem}
  .pb__t,.pb__meta{padding-top:0}
  .thread__grid,.who__grid,.foot__grid,.hero__grid,.split,
  .marks--two,.pb__head{grid-template-columns:minmax(0,1fr)}
  /* Stacked, a full-width portrait would tower over the paragraphs it sits under. */
  .sec--bio .portrait{width:clamp(12rem,42vw,18rem)}
  .pb__pair{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  /* Stacked, the screen is not competing with the drawing for height, so
     let it size to itself. */
  .pb__ui{padding:clamp(.85rem,3vw,1.35rem)}
  .pb__ui img{position:static;width:auto;height:auto;
    max-width:100%;max-height:58vh;margin:0 auto;padding:0}
  .chead--about .wrap{grid-template-columns:minmax(0,1fr)}
  .portrait{width:100%;max-width:14rem;margin:1.75rem 0 .5rem}
  .stage{width:100%;max-width:22rem;margin-top:1.75rem}
  .tparts{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.25rem}
  .pr li{grid-template-columns:1fr;gap:.2rem}
  .pr__d{grid-row:1}
  .route li{grid-template-columns:1fr}
  /* Two lines: a meta line, then the headline. Three lines per row across
     38 rows is a longer scroll than the one this replaced. */
  .pr-row{grid-template-columns:auto minmax(0,1fr) auto;gap:.12rem .55rem;
    padding:.62rem 0}
  .pr__fmt{grid-row:1;grid-column:1;font-size:9px}
  .pr__out{grid-row:1;grid-column:2;font-size:10px}
  .pr__yr{grid-row:1;grid-column:3;justify-self:end}
  .pr__ttl{grid-row:2;grid-column:1/-1;font-size:.95rem}
  .pr__act{grid-row:3;grid-column:1/-1;justify-self:start;margin-top:.2rem}
  .nav__role{display:none}
  }
@media (max-width:560px){
  .nav__right{width:100%;justify-content:space-between;gap:1rem}
  .theme__mode{display:none}
  /* Icon-only, so give it a real thumb target. */
  .theme{padding:0;min-width:42px;min-height:42px;justify-content:center}
  .hidx a{grid-template-columns:2rem minmax(0,1fr);row-gap:.15rem}
  .hidx__g{grid-column:2;text-align:left}
  .nav__in{flex-direction:column;align-items:flex-start;gap:.6rem}
  .nav nav ul{gap:1.1rem}
  .chead__facts{gap:1.25rem}
  .dg-notes{grid-template-columns:1fr}
  .tparts{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;
    transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .dg{clip-path:none}
  .hero__h em::after{transform:scaleX(1)}
}


/* ==========================================================================
   Work pages
   Four pages, one sheet. Everything that is the same on all four is unscoped;
   everything that diverges hangs off the page class on <main> (.w--tamper,
   .w--reeder, .w--mixtape, .w--paper), which always carries one more class of
   specificity than its shared counterpart, so the two can never argue. Each
   page's own block keeps that page's original order, contexts included,
   because a base rule that sits after a media block is meant to win there.

   No token is added: every value resolves from the palette already declared
   at :root, so both themes work by construction. Never color-mix(--body) --
   :root declares --body:var(--body), which is cyclic, and a color-mix on it
   silently invalidates the whole declaration. Dim body copy with opacity.

   The base state below IS the finished page. Every motion rule lives inside
   @media (prefers-reduced-motion:no-preference), and every scroll-driven one
   additionally inside @supports (animation-timeline:view()). With JavaScript
   off, motion off, or neither supported, nothing is missing.
   ========================================================================== */

/* The house sheet gives .dg a 660px floor and .dg-fig a drag hint below
   820px. Neither belongs here: the work pages pan their own drawing, with
   their own threshold and their own hint, further down. */
.sheet .dg{min-width:0}

/* One left edge for the whole page, so a band can only ever gain room on the
   right: rail, stub, heading and drawing all start on the same vertical at
   every viewport. --edge counts the scrollbar, which is fine as long as
   everything uses it -- never mix it with a centred max-width box, or the
   rail and the text disagree by about 7px. */
.sheet{--wrap2:86rem;--pad:clamp(1.15rem,3.6vw,2.5rem);
  --gut:clamp(1.4rem,2.5vw,2.75rem);--band:clamp(3.25rem,6.5vw,6rem);
  --lift:16px;                      /* entrance travel; velocity zeroes it */
  --edge:max(var(--pad),calc((100vw - var(--wrap2))/2 + var(--pad)));
  padding-top:clamp(2.5rem,5vw,4rem)}
html[data-fast] .sheet{--lift:0px}
.sheet .wrap2{padding-inline:var(--edge);position:relative;z-index:1}
/* The page grid. Three tracks, four widths, and nothing else decides. */
.sheet .g{display:grid;column-gap:var(--gut);align-items:start;grid-template-columns:[spine-s] var(--spine) [spine-e text-s] minmax(0,34rem) [text-e field-s] minmax(0,1fr) [field-e]}
.sheet .g--screen{grid-template-columns:[spine-s] var(--spine) [spine-e text-s] minmax(0,22rem) [text-e field-s] minmax(0,1fr) [field-e]}
.sheet .sp{grid-column:spine-s/spine-e}
.sheet .t{grid-column:text-s/text-e}
.sheet .n{grid-column:field-s/field-e}
.sheet .w{grid-column:text-s/field-e}
.sheet .all{grid-column:spine-s/field-e}
.sheet .row,
.sheet .band{position:relative;padding-block:calc(var(--band)*.62)}
.sheet .band--tint{background:var(--wash)}
.sheet .rail{position:absolute;inset:0;z-index:0;pointer-events:none}
.sheet .rail i{position:absolute;left:var(--edge);top:0;bottom:0;display:block}
.sheet .row--last .rail::after{content:"";position:absolute;bottom:0;left:calc(var(--edge) - 5px);width:12px;height:2px;background:var(--ink)}
.sheet .stub p{font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
.sheet .stub__k{color:var(--ink)}
.sheet .stub__l{font-size:10.5px;color:var(--faded);letter-spacing:.1em!important;text-transform:none!important;font-variant-numeric:tabular-nums}
.sheet .stub__v{font-size:10px}
.sheet .stub__v b{font-weight:500;margin-right:.35em}
.sheet .stub--cold .stub__v{color:var(--faded)}
/* ----------------------------------------------------------------- the hero */
.sheet .hero2{padding-block:clamp(3rem,8vh,6.5rem) calc(var(--band)*.7)}
.sheet .hero2__h{font-family:var(--f-display);font-weight:700;line-height:.9;letter-spacing:-.045em;margin:0}
.sheet .seal{height:2px;background:var(--ink);transform-origin:left;margin:1.1rem 0 0;max-width:none}
.sheet .seal-mark{display:flex;gap:.6rem;align-items:baseline;font-family:var(--f-mono)}
.sheet .hero2__l{font-family:var(--f-body);font-weight:300;font-size:clamp(1.16rem,1.85vw,1.5rem);line-height:1.45;color:var(--body);max-width:36ch;margin:1.9rem 0 0}
.sheet .credit{font-size:.98rem;color:var(--body);font-style:italic;margin:0 0 1.4rem;max-width:26ch}
.sheet .hero2__side{padding-top:.4rem}
.sheet .links{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
.sheet .links .pill{font-size:10.5px}
/* --------------------------------------------------------------- headings */
.sheet .h-big{font-family:var(--f-display);font-weight:700;font-size:clamp(1.95rem,4.3vw,3.45rem);line-height:1.03;letter-spacing:-.035em;margin:0 0 1.8rem;max-width:22ch}
.sheet .h-mid{font-family:var(--f-display);font-weight:600;font-size:clamp(1.45rem,2.5vw,2.15rem);line-height:1.1;letter-spacing:-.028em;margin:0 0 1.1rem;max-width:20ch}
.sheet .lab{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--rust);margin:0 0 .9rem}
.sheet .body p{color:var(--body);margin:0 0 1.05em;max-width:34rem}
.sheet .body p:last-child{margin-bottom:0}
.sheet .body--lead p:first-child{font-size:1.08em}
/* ------------------------------------------------------------- the drawing */
.sheet .plate{padding-block:calc(var(--band)*.5) calc(var(--band)*.62)}
.sheet .plate .dg{clip-path:none;transition:none}
.sheet .plate .dg-frame{background:var(--paper)}
.sheet .plate-fig{margin:0}
.sheet .plate-cap{font-family:var(--f-mono);font-size:11px;line-height:1.75;letter-spacing:.03em;color:var(--faded);margin:1.1rem 0 0;max-width:74ch}
.sheet .pnotes{display:grid;margin:1.9rem 0 0;padding:0;list-style:none}
.sheet .pnote{border-top:1px solid var(--hair);padding:.85rem 0 0;cursor:default;transition:border-color .25s,color .25s}
.sheet .pnote__n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--rust);display:block;margin:0 0 .35rem}
.sheet .pnote__t{font-family:var(--f-mono);font-size:11px;line-height:1.7;letter-spacing:.02em;color:var(--faded);display:block}
.sheet .pnote.on,
.sheet .pnote:hover,
.sheet .pnote:focus-visible{border-color:var(--rust);outline:none}
.sheet .pnote.on .pnote__t,
.sheet .pnote:hover .pnote__t,
.sheet .pnote:focus-visible .pnote__t{color:var(--ink)}
.sheet .plate-fig.hot .dg-call{opacity:.3}
.sheet .plate-fig.hot .dg-call.on{opacity:1}
.sheet .mount{position:relative;display:block;background:var(--wash);border:1px solid var(--hair);margin:0}
.sheet .mount::after{content:"";position:absolute;inset:0;pointer-events:none;border-top:2px solid var(--ink);transform:scaleX(1);transform-origin:left}
.sheet .hlwrap{display:inline-block;position:relative;max-width:100%;vertical-align:top}
.sheet .mount img{display:block;height:auto}
.sheet .shot{margin:0}
.sheet .shot__cap{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--faded);margin:.7rem 0 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
/* --------------------------------------------------------- the pull quote */
.sheet .quoteband{padding-block:calc(var(--band)*.85);border-block:1px solid var(--hair);background:var(--wash)}
.sheet .quoteband q{quotes:none;display:block;font-family:var(--f-display);font-weight:500;font-style:italic;font-size:clamp(2.3rem,7vw,5.4rem);line-height:1}
.sheet .pinwrap{display:grid;column-gap:var(--gut);align-items:start}
.sheet .pinwrap .stub{grid-row:2}
.sheet .beats{margin:0;padding:0;list-style:none}
.sheet .beat{display:flex;flex-direction:column;justify-content:center}
.sheet .beat__n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--rust);margin:0 0 .55rem}
.sheet .beat p{font-size:1.02rem;line-height:1.6;color:var(--body);margin:0;transition:color .35s}
.js .sheet .beats[data-live] .beat p{opacity:.38;transition:opacity .35s}
.js .sheet .beats[data-live] .beat.on p{opacity:1;color:var(--ink)}
.js .sheet .beats[data-live] .beat__n{opacity:.4;transition:opacity .35s}
.js .sheet .beats[data-live] .beat.on .beat__n{opacity:1}
.sheet .hl{position:absolute;border:1.6px solid var(--rust);pointer-events:none;transition:opacity .35s}
.sheet .hl b{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:var(--rust);color:var(--paper);font-family:var(--f-mono);font-size:11.5px;font-weight:500;line-height:22px;text-align:center;display:block}
.js .sheet .shotfig[data-beat] .hl{opacity:.12}
.js .sheet .shotfig[data-beat="1"] .hl[data-b="1"],
.js .sheet .shotfig[data-beat="2"] .hl[data-b="2"],
.js .sheet .shotfig[data-beat="3"] .hl[data-b="3"]{opacity:1}
.sheet + .foot{margin-top:0}
.sheet .close__lead{font-family:var(--f-display);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.85rem);line-height:1.26;letter-spacing:-.022em;color:var(--ink);margin:0 0 1.2rem;max-width:24ch}
@media (prefers-reduced-motion:no-preference){
  html.js .sheet .seal{animation:seal-draw .95s cubic-bezier(.2,.75,.2,1) .2s both}
  html.js .sheet .mount::after{animation:seal-draw .8s cubic-bezier(.2,.75,.2,1) both;animation-timeline:view();animation-range:entry 10% entry 70%}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .sheet .rail i{animation-timeline:view();animation-range:cover 0% cover 100%}
    .sheet .stub__v{animation:fade-up .4s ease-out both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .sheet .plate{timeline-scope:--plate}
    .sheet .plate-fig{view-timeline:--plate block}
    .sheet .p{animation:part linear both;animation-timeline:--plate}
  }
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @supports ((background-clip:text) or (-webkit-background-clip:text)){
      .sheet .quoteband q{background-image:linear-gradient(90deg,var(--ink) 50%, color-mix(in srgb,var(--ink) 22%,transparent) 50%);background-size:220% 100%;background-repeat:no-repeat;background-position:0% 0;-webkit-background-clip:text;background-clip:text;animation:read linear both;animation-timeline:view();animation-range:entry 35% cover 55%}
    }
  }
}
@media (max-width:1099px){
  .sheet .wrap2{padding-left:calc(var(--edge) + var(--spine))}
  .sheet .stub{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;align-items:baseline;border-bottom:1px solid var(--hair);padding-bottom:.65rem}
  .sheet .hero2__l{margin-top:1.4rem}
  .sheet .pnote{padding-bottom:.9rem}
  .sheet .plate .dg-frame{overflow-x:auto;overscroll-behavior-x:contain;padding:.85rem;scrollbar-width:thin}
  .sheet .plate .dg-frame::after{display:none}
  .sheet .plate-fig::before{content:"Drag the drawing sideways to read it";display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faded);margin:0 0 .5rem}
}
@media (prefers-reduced-motion:reduce){
  .sheet .quoteband q{background:none!important;-webkit-text-fill-color:currentColor}
  .sheet .seal,
  .sheet .mount::after,
  .sheet .seal-mark{animation:none!important;transform:none;opacity:1}
}
@media (prefers-reduced-motion:no-preference){
  @keyframes seal-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion:no-preference){
  @keyframes fade-up{from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes rail-ink{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  }
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes part{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none}}
  }
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes edge{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
  }
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes x-land{from{transform:translate(-50%,-50%) rotate(45deg) scaleX(0)} to{transform:translate(-50%,-50%) rotate(45deg) scaleX(1)}}
  }
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes x-land2{from{transform:translate(-50%,-50%) rotate(-45deg) scaleX(0)} to{transform:translate(-50%,-50%) rotate(-45deg) scaleX(1)}}
  }
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @supports ((background-clip:text) or (-webkit-background-clip:text)){
      @keyframes read{from{background-position:100% 0}to{background-position:0% 0}}
    }
  }
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes gate-land{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes pan{from{transform:translateY(0)} to{transform:translateY(calc(var(--panh) - 1248px - 2*var(--mp)))}}
  }
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes bar-land{from{transform:translateY(-50%) scaleX(0)} to{transform:translateY(-50%) scaleX(1)}}
  }
}

/* ---- Tamper Signal ------------------------------------------------------
   The margin is a receipt chain: solid ink where the page is sealed, dotted
   where nothing has signed for anything, broken once in red, dashed below
   the break. */
.sheet.w--tamper{--spine:12.5rem}
.w--tamper .rail i{transform-origin:top center}
.w--tamper [data-rail="sealed"] .rail i{width:2px;background:var(--ink)}
.w--tamper [data-rail="dotted"] .rail i,
.w--tamper [data-rail="unverified"] .rail i{width:1px;background-image:repeating-linear-gradient(to bottom, var(--hair) 0 3px,transparent 3px 9px)}
.w--tamper [data-rail="unverified"] .rail i{background-image:repeating-linear-gradient(to bottom, var(--faded) 0 5px,transparent 5px 12px)}
/* The one break. Ink above, a red cross, dashes below. */
.w--tamper [data-rail="break"] .rail i.a{width:2px;background:var(--ink);top:0;height:34%;bottom:auto}
.w--tamper [data-rail="break"] .rail i.b{width:1px;top:46%;bottom:0;background-image:repeating-linear-gradient(to bottom, var(--faded) 0 5px,transparent 5px 12px)}
.w--tamper [data-rail="break"] .rail i.x{top:34%;height:12%;bottom:auto;left:calc(var(--edge) - 8px);width:18px;background:none}
.w--tamper [data-rail="break"] .rail i.x::before,
.w--tamper [data-rail="break"] .rail i.x::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:2.4px;background:var(--red);transform-origin:center}
.w--tamper [data-rail="break"] .rail i.x::before{transform:translate(-50%,-50%) rotate(45deg)}
.w--tamper [data-rail="break"] .rail i.x::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* --------------------------------------------------------------- the stub
Each section's receipt, in the margin. Mono apparatus, never a sentence. */
.w--tamper .stub{padding-left:1.15rem;padding-top:.3rem}
.w--tamper .stub p{margin:0 0 .28rem}
.w--tamper .stub__k{font-size:11px}
.w--tamper .stub__v{color:var(--fern);margin-top:.5rem!important}
.w--tamper .stub--broke .stub__v{color:var(--red)}
.w--tamper .hero2__h{font-size:clamp(3.1rem,10vw,7.4rem)}
.w--tamper .seal-mark{margin:.55rem 0 0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fern)}
.w--tamper .plate .wrap2{padding-right:var(--pad)}
.w--tamper .pnotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gut)}
.w--tamper .mount{text-align:center;padding:clamp(.7rem,1.5vw,1.15rem)}
.w--tamper .mount img{width:auto;max-width:100%}
.w--tamper .mount--640 img{width:640px}
.w--tamper .mount--880 img{width:880px}
/* Posture A. The ground runs off the right page edge; the screen does not. */
.w--tamper .spill{grid-column:field-s/-1}
@media (min-width:1100px){
  .w--tamper .spill .mount{width:calc(100% + var(--edge));border-right:0;text-align:left}
}
/* Play affordance: a GIF opens on a blank frame, so a still is the default. */
.w--tamper .play{position:absolute;right:.65rem;bottom:.65rem;z-index:2;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--paper);border:1px solid var(--ink);padding:.45em .7em;line-height:1;cursor:pointer;transition:color .2s,border-color .2s}
.w--tamper .play:hover,
.w--tamper .play:focus-visible{color:var(--rust);border-color:var(--rust)}
.w--tamper .play[aria-pressed="true"]{color:var(--rust);border-color:var(--rust)}
.w--tamper .quoteband q{letter-spacing:-.04em;color:var(--ink)}
.w--tamper .quoteband figcaption{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faded);margin:1.15rem 0 0}
/* ------------------------------------------------ the console, held still */
.w--tamper .console{background:var(--deep);border-block:1px solid var(--hair)}
.w--tamper .pinwrap{grid-template-columns:[spine-s] var(--spine) [spine-e fig-s] minmax(0,41.25rem) [fig-e beat-s] minmax(0,1fr) [beat-e]}
.w--tamper .pinfig{grid-column:fig-s/fig-e;position:sticky;top:5.5rem;margin:0}
.w--tamper .beats{grid-column:beat-s/beat-e}
.w--tamper .beat{min-height:62vh;padding-block:1rem}
.w--tamper .beat:last-child{min-height:48vh}
@media (min-width:1100px){
  .w--tamper .overlap{margin-top:calc(-1 * clamp(3rem,6vw,6.5rem))}
  .w--tamper .overlap .shot{width:max-content;max-width:100%}
  .w--tamper .overlap .mount{border-color:var(--ink);background:var(--paper)}
}
@media (prefers-reduced-motion:no-preference){
  html.js .w--tamper .seal-mark{animation:fade-up .5s ease-out 1.05s both}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .w--tamper .rail i{animation:rail-ink linear both}
    .w--tamper [data-rail="break"] .rail i.x{animation:none}
    .w--tamper .p--stage{animation-range:cover 8% cover 17%}
    .w--tamper .p--flow{animation-range:cover 15% cover 23%}
    .w--tamper .p--receipt{animation-range:cover 22% cover 32%}
    .w--tamper .p--chain{animation-range:cover 30% cover 39%}
    .w--tamper .p--verdict{animation-range:cover 42% cover 52%}
    .w--tamper .p--lamp{animation-range:cover 50% cover 58%}
    .w--tamper .p--call{animation-range:cover 56% cover 64%}
    /* the solid edges draw rather than fade */
    .w--tamper .p--flow .ln,
    .w--tamper .p--verdict .ln{stroke-dasharray:100;animation:edge linear both;animation-timeline:--plate}
    .w--tamper .p--flow .ln{animation-range:cover 15% cover 24%}
    .w--tamper .p--verdict .ln{animation-range:cover 43% cover 52%}
    /* the break is an event, not a position: it lands on its own timing */
    html.js .w--tamper .p--break{animation:none;opacity:0}
    .w--tamper .plate-fig.lit .p--break{animation:part .34s cubic-bezier(.2,.9,.3,1) both}
    .w--tamper .plate-fig.lit .x-mark{stroke-dasharray:100;animation:edge .3s cubic-bezier(.3,.8,.3,1) .1s both}
    html.js .w--tamper [data-rail="break"] .rail i.x::before,
    html.js .w--tamper [data-rail="break"] .rail i.x::after{transform:translate(-50%,-50%) scale(0)}
    .w--tamper [data-rail="break"].broke .rail i.x::before{animation:x-land .34s cubic-bezier(.2,.9,.3,1) both}
    .w--tamper [data-rail="break"].broke .rail i.x::after{animation:x-land2 .34s cubic-bezier(.2,.9,.3,1) .07s both}
  }
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @supports ((background-clip:text) or (-webkit-background-clip:text)){
      .w--tamper .quoteband q{color:transparent}
    }
  }
}
@media (max-width:1099px){
  /* One column. The spine keeps its rule but hands its text to the top of
  each section, as one mono line. */
  .sheet.w--tamper{--spine:2.5rem}
  .w--tamper .g,
  .w--tamper .g--screen,
  .w--tamper .pinwrap{grid-template-columns:minmax(0,1fr);row-gap:clamp(1.35rem,4vw,2.25rem)}
  .w--tamper .g > *,
  .w--tamper .g--screen > *,
  .w--tamper .pinwrap > *{grid-column:1/-1!important;grid-row:auto!important}
  .w--tamper .stub{padding-left:0;padding-top:0}
  .w--tamper .stub p{margin:0}
  .w--tamper .stub__v{margin-top:0!important}
  .w--tamper .spill .mount{width:calc(100% + var(--edge));border-right:0;text-align:left}
  /* the figure still holds while its beats cross it */
  .w--tamper .pinbox{display:block}
  .w--tamper .pinfig{position:sticky;top:4.6rem;background:var(--deep);padding-bottom:.6rem;margin:0 0 .75rem}
  .w--tamper .beat{min-height:0;padding-block:1.35rem;border-top:1px solid var(--hair)}
  .w--tamper .beat:last-child{min-height:0}
  .w--tamper .pnotes{grid-template-columns:minmax(0,1fr);gap:0}
  .w--tamper .overlap{margin-top:0}
  .w--tamper .plate .wrap2{padding-right:var(--edge)}
  .w--tamper .plate .dg{min-width:900px}
}
@media (min-width:1100px){
  .w--tamper .pinbox{display:contents}
}
@media (max-width:640px){
  .sheet.w--tamper{--spine:1.9rem}
  .w--tamper .hero2__h{font-size:clamp(2.5rem,12.5vw,3.6rem)}
  /* Below the width where a screen is legible, pan it rather than shrink it.
  Same contract as the drawing directly above. */
  .w--tamper .mount{overflow-x:auto;overscroll-behavior-x:contain;text-align:left;scrollbar-width:thin}
  .w--tamper .mount--640 img{width:640px;max-width:none}
  .w--tamper .mount--880 img{width:880px;max-width:none}
  .w--tamper .shot__cap::before,
  .w--tamper .pinfig .shot__cap::before{content:"Drag sideways";color:var(--faded)}
  .w--tamper .stub__k{font-size:10px}
  .w--tamper .pinfig{top:4.2rem}
  .w--tamper .plate .dg{min-width:820px}
  .w--tamper .quoteband q{letter-spacing:-.035em}
}
@media (prefers-reduced-motion:reduce){
  .w--tamper .rail i{transform:none!important}
  .w--tamper .p,
  .w--tamper .p--break{opacity:1!important;transform:none!important;animation:none!important}
  .w--tamper .p--flow .ln,
  .w--tamper .p--verdict .ln,
  .w--tamper .x-mark{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .w--tamper .quoteband q{color:var(--ink)!important}
  .w--tamper [data-rail="break"] .rail i.x::before{transform:translate(-50%,-50%) rotate(45deg)!important}
  .w--tamper [data-rail="break"] .rail i.x::after{transform:translate(-50%,-50%) rotate(-45deg)!important}
}

/* ---- Daily Reeder -------------------------------------------------------
   The margin is a feed: dotted while everything is still a candidate,
   crossed once in red where a person decides, solid ink from there down,
   because everything below the gate is something I picked. */
.sheet.w--reeder{--spine:12.5rem;--screen:393px}
.w--reeder .rail i{transform-origin:top center}
.w--reeder [data-rail="chosen"] .rail i{width:2px;background:var(--ink)}
.w--reeder [data-rail="candidate"] .rail i{width:1px;background-image:repeating-linear-gradient(to bottom, var(--hair) 0 3px,transparent 3px 9px)}
/* The one gate. Candidates above, a red bar, everything picked below. */
.w--reeder [data-rail="gate"] .rail i.a{width:1px;top:0;height:34%;bottom:auto;background-image:repeating-linear-gradient(to bottom, var(--hair) 0 3px,transparent 3px 9px)}
.w--reeder [data-rail="gate"] .rail i.b{width:2px;background:var(--ink);top:42%;bottom:0}
.w--reeder [data-rail="gate"] .rail i.g{top:38%;height:2.4px;bottom:auto;left:calc(var(--edge) - 10px);width:22px;background:var(--red);transform-origin:left center}
/* --------------------------------------------------------------- the stub
Each section's state, in the margin. Mono apparatus, never a sentence. */
.w--reeder .stub{padding-left:1.15rem;padding-top:.3rem}
.w--reeder .stub p{margin:0 0 .28rem}
.w--reeder .stub__k{font-size:11px}
.w--reeder .stub__v{color:var(--fern);margin-top:.5rem!important}
/* Red is the human decision here, exactly as it is in the drawing. It is not
a failure state; this page does not have one. */
.w--reeder .stub--gate .stub__v{color:var(--red)}
.w--reeder .hero2__h{font-size:clamp(3.1rem,10vw,7.4rem)}
.w--reeder .seal-mark{margin:.55rem 0 0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fern)}
.w--reeder .plate .wrap2{padding-right:var(--pad)}
.w--reeder .pnotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gut)}
.w--reeder .mount{text-align:center;padding:clamp(.7rem,1.5vw,1.15rem)}
.w--reeder .mount img{width:var(--screen);max-width:100%}
/* Posture A. The ground runs off the right page edge; the screen does not.
Used on the highlight that left the app, which is the one screen on this
page that is not the app. */
.w--reeder .spill{grid-column:field-s/-1}
@media (min-width:1100px){
  .w--reeder .spill .mount{width:calc(100% + var(--edge));border-right:0;text-align:left}
}
.w--reeder .quoteband q{letter-spacing:-.04em;color:var(--ink)}
/* ---------------------------------------------- posture B: held, with beats
A 393px screen needs a 27rem track, not the lead's 41.25rem. */
.w--reeder .queueband{background:var(--deep);border-block:1px solid var(--hair)}
.w--reeder .pinwrap{grid-template-columns:[spine-s] var(--spine) [spine-e fig-s] minmax(0,27rem) [fig-e beat-s] minmax(0,1fr) [beat-e]}
.w--reeder .pinfig{grid-column:fig-s/fig-e;position:sticky;top:4.5rem;margin:0}
/* The one screen that is not life size. A held figure has to fit the viewport
or it does not hold, and 852px of phone plus a caption does not. 330px is
84 per cent, which is the largest this screen can be and still stay put on
a laptop. Every other screen on the page is untouched. */
.w--reeder .pinfig .mount img{width:330px}
.w--reeder .beats{grid-column:beat-s/beat-e}
.w--reeder .beat{min-height:62vh;padding-block:1rem}
.w--reeder .beat:last-child{min-height:48vh}
.w--reeder .beat p{max-width:34rem}
@media (min-width:1100px){
  .w--reeder .overlap{margin-top:calc(-1 * clamp(6rem,14vw,15rem))}
  .w--reeder .overlap .shot{width:max-content;max-width:100%;margin-left:auto}
  .w--reeder .overlap .mount{border-color:var(--ink);background:var(--paper)}
}
@media (prefers-reduced-motion:no-preference){
  html.js .w--reeder .seal-mark{animation:fade-up .5s ease-out 1.05s both}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .w--reeder .rail i{animation:rail-ink linear both}
    .w--reeder [data-rail="gate"] .rail i.g{animation:none;transform:scaleX(0)}
    .w--reeder .p--pull{animation-range:cover 6% cover 15%}
    .w--reeder .p--flow{animation-range:cover 13% cover 21%}
    .w--reeder .p--cards{animation-range:cover 19% cover 27%}
    .w--reeder .p--clean{animation-range:cover 30% cover 38%}
    .w--reeder .p--queue{animation-range:cover 36% cover 46%}
    .w--reeder .p--vault{animation-range:cover 44% cover 54%}
    .w--reeder .p--loop{animation-range:cover 52% cover 62%}
    .w--reeder .p--call{animation-range:cover 60% cover 68%}
    /* the two pure-edge phases draw rather than fade */
    .w--reeder .p--flow .ln,
    .w--reeder .p--loop .ln{stroke-dasharray:100;animation:edge linear both;animation-timeline:--plate}
    .w--reeder .p--flow .ln{animation-range:cover 13% cover 22%}
    .w--reeder .p--loop .ln{animation-range:cover 52% cover 63%}
    /* the decision is an event, not a position: it lands on its own timing */
    html.js .w--reeder .p--gate{animation:none;opacity:0}
    .w--reeder .plate-fig.lit .p--gate{animation:part .34s cubic-bezier(.2,.9,.3,1) both}
    .w--reeder [data-rail="gate"].gated .rail i.g{animation:gate-land .34s cubic-bezier(.2,.9,.3,1) both}
  }
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @supports ((background-clip:text) or (-webkit-background-clip:text)){
      .w--reeder .quoteband q{color:transparent}
    }
  }
}
@media (max-width:1099px){
  .sheet.w--reeder{--spine:2.5rem}
  .w--reeder .g,
  .w--reeder .pinwrap{grid-template-columns:minmax(0,1fr);row-gap:clamp(1.35rem,4vw,2.25rem)}
  .w--reeder .g > *,
  .w--reeder .pinwrap > *{grid-column:1/-1!important;grid-row:auto!important}
  .w--reeder .stub{padding-left:0;padding-top:0}
  .w--reeder .stub p{margin:0}
  .w--reeder .stub__v{margin-top:0!important}
  .w--reeder .spill .mount{width:calc(100% + var(--edge));border-right:0;text-align:left}
  /* the figure still holds while its beats cross it */
  .w--reeder .pinbox{display:block}
  .w--reeder .pinfig{position:sticky;top:4.6rem;background:var(--deep);padding-bottom:.6rem;margin:0 0 .75rem}
  .w--reeder .beat{min-height:0;padding-block:1.35rem;border-top:1px solid var(--hair)}
  .w--reeder .beat:last-child{min-height:0}
  .w--reeder .pnotes{grid-template-columns:minmax(0,1fr);gap:0}
  .w--reeder .overlap{margin-top:0}
  .w--reeder .plate .wrap2{padding-right:var(--edge)}
  .w--reeder .plate .dg{min-width:900px}
}
@media (min-width:1100px){
  .w--reeder .pinbox{display:contents}
}
@media (max-width:760px){
  /* A held screen taller than the viewport is not held, it is in the way. */
  .w--reeder .pinfig{position:static}
}
@media (max-width:640px){
  .sheet.w--reeder{--spine:1.9rem}
  .w--reeder .hero2__h{font-size:clamp(2.5rem,12.5vw,3.6rem)}
  /* The drawing still pans, because shrinking it makes it unreadable. A phone
  screen read on a phone does not: it goes from 3.0x down to about 2.6x,
  which is invisible. So this page fits its screens and only pans the
  drawing. */
  .w--reeder .stub__k{font-size:10px}
  .w--reeder .plate .dg{min-width:820px}
  .w--reeder .quoteband q{letter-spacing:-.035em}
}
@media (prefers-reduced-motion:reduce){
  .w--reeder .rail i{transform:none!important}
  .w--reeder .p,
  .w--reeder .p--gate{opacity:1!important;transform:none!important;animation:none!important}
  .w--reeder .p--flow .ln,
  .w--reeder .p--loop .ln{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .w--reeder .quoteband q{color:var(--ink)!important}
  .w--reeder [data-rail="gate"] .rail i.g{transform:none!important}
}

/* ---- Mixtape ------------------------------------------------------------
   No rail state and no chain: the rule is a tape filling as it plays, and
   the stub clock is the only number this page keeps. */
.sheet.w--mixtape{--spine:12.5rem;--mp:clamp(.4rem,.8vw,1.15rem);--panh:min(1246px,68vh)}
.w--mixtape .band--deep{background:var(--deep);border-block:1px solid var(--hair)}
.w--mixtape .rail::before{content:"";position:absolute;left:var(--edge);top:0;bottom:0;width:1px;background:var(--hair)}
.w--mixtape .rail i{width:2px;background:var(--ink);transform-origin:top center}
/* --------------------------------------------------------------- the stub
Each section is a track, and the margin keeps the ledger: the real seconds
you spent here, counted by the page. Mono apparatus, never a sentence. */
.w--mixtape .stub{padding-left:1.15rem;padding-top:.3rem}
.w--mixtape .stub p{margin:0 0 .28rem}
.w--mixtape .stub__k{font-size:11px}
.w--mixtape .stub__v{color:var(--faded);margin-top:.5rem!important;letter-spacing:.1em!important;text-transform:none!important;font-variant-numeric:tabular-nums;transition:color .3s}
.w--mixtape .stub__v b{font-variant-numeric:normal}
.w--mixtape .stub__v b::before{content:"·"}
.w--mixtape .stub--on .stub__v b::before{content:"\25B8"}
/* the playhead: the one track playing is the one you are reading */
.w--mixtape .stub--on .stub__v{color:var(--rust)}
.w--mixtape .stub--done .stub__v{color:var(--ink)}
.w--mixtape .hero2__h{font-size:clamp(3.1rem,10vw,7.4rem)}
.w--mixtape .seal-mark{margin:.55rem 0 0;font-size:10.5px;letter-spacing:.12em;color:var(--rust);font-variant-numeric:tabular-nums}
.w--mixtape .meta{margin:0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faded);line-height:2}
/* beside a portrait screen the column is ~310px, so the copy there is set at
beat size. A 19px paragraph in a 310px column is not a measure. */
.w--mixtape .body--aside p{font-size:1.02rem;line-height:1.62}
.w--mixtape .plate .wrap2{padding-right:var(--pad)}
.w--mixtape .pnotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gut)}
.w--mixtape .mount{text-align:center;padding:var(--mp)}
.w--mixtape .mount img{width:auto;max-width:100%}
.w--mixtape .mount--761 img{width:761px}
@media (min-width:1410px){
  .w--mixtape .tallband .wrap2{padding-right:0}
  .w--mixtape .g--tall{grid-template-columns:[spine-s] var(--spine) [spine-e text-s] minmax(0,1fr) [text-e field-s] max-content [field-e]}
  .w--mixtape .tall{grid-column:field-s/field-e}
  .w--mixtape .tall .mount{padding-right:0;border-right:0;text-align:left}
  .w--mixtape .tall .shot__cap{padding-right:var(--pad)}
  .w--mixtape .pinbox{display:contents}
}
@media (max-width:1409px) and (min-width:1100px){
  .w--mixtape .g--tall > *{grid-row:auto!important}
  .w--mixtape .g--tall > .t{grid-column:text-s/field-e}
  .w--mixtape .tall,
  .w--mixtape .beats,
  .w--mixtape .pinbox{grid-column:text-s/field-e!important}
  .w--mixtape .pinbox{display:block}
  .w--mixtape .body--aside p{font-size:inherit}
  .w--mixtape .beat{min-height:0;padding-block:1.35rem;border-top:1px solid var(--hair)}
  .w--mixtape .beat:last-child{min-height:0}
  .w--mixtape .pinfig{position:sticky;top:5.5rem;background:var(--deep);padding-bottom:.6rem;margin:0 0 .75rem}
}
/* Posture B -- held, and panning. A 1246px screen fits no viewport, so the
mount is a window and the screen moves through it while the beats cross.
With motion off the window is the whole screen and nothing moves. */
.w--mixtape .panfig{margin:0}
/* the pan moves this box, so it has to be the screen and not the mount:
block for a reliable transform, 761px so the region boxes -- which are
percentages of the screen -- keep tracking the screen. */
.w--mixtape .panfig .hlwrap{display:block;width:761px;max-width:none;margin-inline:auto}
@media (min-width:1100px){
  .w--mixtape .overlap{margin-top:calc(-1 * clamp(3rem,6vw,6.5rem))}
  .w--mixtape .overlap .shot{width:max-content;max-width:100%}
  .w--mixtape .overlap .mount{border-color:var(--ink);background:var(--paper)}
}
.w--mixtape .quoteband q{letter-spacing:-.04em;color:var(--ink)}
/* ------------------------------------------------- the day, held and played */
.w--mixtape .pinfig{position:sticky;top:5.5rem;margin:0}
.w--mixtape .beat{min-height:62vh;padding-block:1rem}
.w--mixtape .beat:last-child{min-height:52vh}
@media (prefers-reduced-motion:no-preference){
  html.js .w--mixtape .seal-mark{animation:fade-up .5s ease-out 1.05s both}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .w--mixtape .rail i{animation:rail-ink linear both}
    .w--mixtape .p--crate{animation-range:cover 8% cover 17%}
    .w--mixtape .p--tape{animation-range:cover 16% cover 25%}
    .w--mixtape .p--track{animation-range:cover 24% cover 33%}
    .w--mixtape .p--play{animation-range:cover 40% cover 48%}
    .w--mixtape .p--ledger{animation-range:cover 48% cover 58%}
    .w--mixtape .p--call{animation-range:cover 58% cover 66%}
    /* the solid edges draw rather than fade */
    .w--mixtape .p--tape .ln,
    .w--mixtape .p--track .ln,
    .w--mixtape .p--ledger .ln{stroke-dasharray:100;animation:edge linear both;animation-timeline:--plate}
    .w--mixtape .p--tape .ln{animation-range:cover 17% cover 26%}
    .w--mixtape .p--track .ln{animation-range:cover 25% cover 34%}
    .w--mixtape .p--ledger .ln{animation-range:cover 49% cover 58%}
    /* the decision lands. Starting a day is an event, not a position, so it
    gets its own easing instead of being dragged by the scrollbar. */
    html.js .w--mixtape .p--human{animation:none;opacity:0}
    .w--mixtape .plate-fig.lit .p--human{animation:part .34s cubic-bezier(.2,.9,.3,1) both}
    /* the day plays through its window */
    .w--mixtape .dayband{timeline-scope:--pan}
    .w--mixtape .beats{view-timeline:--pan block}
    .js .w--mixtape .panfig .mount{height:var(--panh);overflow-y:hidden}
    .js .w--mixtape .panfig .hlwrap{animation:pan linear both;animation-timeline:--pan;animation-range:cover 10% cover 90%}
  }
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @supports ((background-clip:text) or (-webkit-background-clip:text)){
      .w--mixtape .quoteband q{color:transparent}
    }
  }
}
@media (max-width:1099px){
  .sheet.w--mixtape{--spine:2.5rem;--panh:min(1246px,62vh)}
  .w--mixtape .g,
  .w--mixtape .g--screen,
  .w--mixtape .g--tall{grid-template-columns:minmax(0,1fr);row-gap:clamp(1.35rem,4vw,2.25rem)}
  .w--mixtape .g > *,
  .w--mixtape .g--screen > *,
  .w--mixtape .g--tall > *{grid-column:1/-1!important;grid-row:auto!important}
  .w--mixtape .stub{padding-left:0;padding-top:0}
  .w--mixtape .stub p{margin:0}
  .w--mixtape .stub__v{margin-top:0!important}
  .w--mixtape .body--aside p{font-size:1.06rem}
  /* the day still holds while its beats cross it */
  .w--mixtape .pinbox{display:block!important}
  .w--mixtape .pinfig{position:sticky;top:4.6rem;background:var(--deep);padding-bottom:.6rem;margin:0 0 .75rem}
  .w--mixtape .beat{min-height:0;padding-block:1.35rem;border-top:1px solid var(--hair)}
  .w--mixtape .beat:last-child{min-height:0}
  .w--mixtape .pnotes{grid-template-columns:minmax(0,1fr);gap:0}
  .w--mixtape .overlap{margin-top:0}
  .w--mixtape .plate .wrap2{padding-right:var(--edge)}
  .w--mixtape .plate .dg{min-width:900px}
}
@media (max-width:899px){
  .w--mixtape .mount{overflow-x:auto;overscroll-behavior-x:contain;text-align:left;scrollbar-width:thin}
  .w--mixtape .mount--761 img{width:761px;max-width:none}
  .w--mixtape .shot__cap::before{content:"Drag sideways";color:var(--faded)}
}
@media (max-width:640px){
  .sheet.w--mixtape{--spine:1.9rem;--panh:min(1246px,58vh)}
  .w--mixtape .hero2__h{font-size:clamp(2.5rem,12.5vw,3.6rem)}
  .w--mixtape .stub__k{font-size:10px}
  .w--mixtape .pinfig{top:4.2rem}
  .w--mixtape .plate .dg{min-width:820px}
  .w--mixtape .quoteband q{letter-spacing:-.035em}
}
@media (prefers-reduced-motion:reduce){
  .w--mixtape .rail i{transform:none!important}
  .w--mixtape .p,
  .w--mixtape .p--human{opacity:1!important;transform:none!important;animation:none!important}
  .w--mixtape .ln{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .w--mixtape .quoteband q{color:var(--ink)!important}
  .w--mixtape .panfig .mount{height:auto!important}
  .w--mixtape .panfig .hlwrap{transform:none!important;animation:none!important}
}

/* ---- Paper Session ------------------------------------------------------
   The margin is a machine rule that stops, then carries on as a pen: an 18px
   column of --ink masked by a repeating wobble tile, so it takes the ink
   token in both themes rather than baking a colour into an SVG. */
.sheet.w--paper{--spine:12.5rem;--sheetw:935px;--penmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 96' preserveAspectRatio='none'%3E%3Cpath d='M9 0 C6 12 12 24 9 36 C6 48 12 60 9 72 C6 84 11 90 9 96' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.w--paper [data-rail="open"] .rail i,
.w--paper [data-rail="resumed"] .rail i{width:2px;background:var(--ink)}
/* The pen. A wobble tile, masked so it takes the ink token in both themes. */
.w--paper .rail i.pen{width:18px;left:calc(var(--edge) - 8px);background:var(--ink);-webkit-mask-image:var(--penmask);mask-image:var(--penmask);-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;-webkit-mask-size:18px 96px;mask-size:18px 96px}
/* The one stop. Machine rule above, a red bar, the pen below. */
.w--paper [data-rail="halt"] .rail i.a{width:2px;background:var(--ink);top:0;height:34%;bottom:auto}
.w--paper [data-rail="halt"] .rail i.b{top:38%;bottom:0}
.w--paper [data-rail="halt"] .rail i.x{top:34%;height:4%;bottom:auto;left:calc(var(--edge) - 9px);width:22px;background:none}
.w--paper [data-rail="halt"] .rail i.x::before{content:"";position:absolute;left:0;top:50%;width:22px;height:2.4px;background:var(--red);transform:translateY(-50%);transform-origin:left}
/* --------------------------------------------------------------- the stub
Each section's loop state, in the margin. Mono apparatus, never a
sentence. The middle line names the sheet on screen, from its own footer. */
.w--paper .stub{padding-left:1.15rem;padding-top:.3rem}
.w--paper .stub p{margin:0 0 .28rem}
.w--paper .stub__k{font-size:11px}
.w--paper .stub__v{color:var(--fern);margin-top:.5rem!important}
.w--paper .stub--halt .stub__v{color:var(--red)}
.w--paper .stub--pen .stub__v{color:var(--rust)}
.w--paper .hero2__h{font-size:clamp(3.1rem,10vw,7.4rem)}
.w--paper .seal{position:relative}
.w--paper .seal-pen{position:absolute;left:0;top:-12px;width:52%;height:26px;overflow:visible;display:block}
.w--paper .seal-pen path{stroke:var(--rust);stroke-width:2.6;fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.w--paper .seal-mark{margin:.85rem 0 0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust)}
.w--paper .plate .wrap2{padding-right:var(--pad)}
.w--paper .pnotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gut)}
.w--paper .mount{text-align:center;padding:clamp(.7rem,1.5vw,1.15rem)}
.w--paper .mount img{width:var(--sheetw);max-width:100%}
@media (min-width:1340px){
  .w--paper .spill{grid-column:text-s/-1}
  .w--paper .spill .mount{width:calc(100% + var(--edge));border-right:0;text-align:left}
}
/* Posture B. The annotated sheet: a whole printed page at native size, with
its notes down the right margin at the height of what they point at. The
lead page held a 360px window still while the argument crossed it; a
1210px page cannot be held, so the notes are placed instead. */
.w--paper .sheetfall{padding-left:1.15rem}
@media (min-width:1340px){
  .w--paper .sheetfall{display:grid;column-gap:var(--gut);align-items:start;grid-template-columns:[page-s] auto [page-e note-s] minmax(0,1fr) [note-e]}
  .w--paper .sheetfall .shot{grid-column:page-s/page-e;width:max-content}
  .w--paper .snotes{grid-column:note-s/note-e;position:relative;margin:0;padding:0;list-style:none;height:1250px}
  .w--paper .snote{position:absolute;left:0;right:0;padding-top:.85rem;border-top:1px solid var(--hair)}
}
.w--paper .snotes{margin:2rem 0 0;padding:0;list-style:none}
.w--paper .snote{padding-top:.85rem;border-top:1px solid var(--hair);margin:0 0 1.4rem}
.w--paper .snote__n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--rust);margin:0 0 .5rem}
.w--paper .snote p{font-size:1.02rem;line-height:1.6;color:var(--body);margin:0;transition:color .35s,opacity .35s}
.js .w--paper .snotes[data-live] .snote p{opacity:.38}
.js .w--paper .snotes[data-live] .snote.on p{opacity:1;color:var(--ink)}
.js .w--paper .snotes[data-live] .snote__n{opacity:.4;transition:opacity .35s}
.js .w--paper .snotes[data-live] .snote.on .snote__n{opacity:1}
.js .w--paper .shotfig[data-region] .hl{opacity:.12}
.js .w--paper .shotfig[data-region="1"] .hl[data-b="1"],
.js .w--paper .shotfig[data-region="2"] .hl[data-b="2"],
.js .w--paper .shotfig[data-region="3"] .hl[data-b="3"]{opacity:1}
@media (min-width:1340px){
  .w--paper .overlap{margin-top:calc(-1 * clamp(3rem,6vw,6.5rem));margin-bottom:clamp(1.6rem,3vw,2.6rem)}
  .w--paper .overlap .shot{width:max-content;max-width:100%}
  .w--paper .overlap .mount{border-color:var(--ink);background:var(--paper)}
}
.w--paper .quoteband q{letter-spacing:-.04em;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  html.js .w--paper .seal-pen path{stroke-dasharray:100;animation:edge .7s cubic-bezier(.25,.8,.3,1) 1s both}
  html.js .w--paper .seal-mark{animation:fade-up .5s ease-out 1.5s both}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .w--paper .rail i{animation:rail-ink-paper linear both}
    .w--paper [data-rail="halt"] .rail i.x{animation:none}
    .w--paper .p--run{animation-range:cover 6% cover 15%}
    .w--paper .p--flow{animation-range:cover 13% cover 21%}
    .w--paper .p--print{animation-range:cover 24% cover 33%}
    .w--paper .p--ink{animation-range:cover 31% cover 40%}
    .w--paper .p--back{animation-range:cover 40% cover 50%}
    .w--paper .p--state{animation-range:cover 50% cover 58%}
    .w--paper .p--call{animation-range:cover 58% cover 66%}
    /* the solid edges draw rather than fade */
    .w--paper .p--flow .ln,
    .w--paper .p--print .ln,
    .w--paper .p--ink .ln,
    .w--paper .p--back .ln{stroke-dasharray:100;animation:edge linear both;animation-timeline:--plate}
    .w--paper .p--flow .ln{animation-range:cover 13% cover 22%}
    .w--paper .p--print .ln{animation-range:cover 24% cover 34%}
    .w--paper .p--ink .ln{animation-range:cover 31% cover 41%}
    .w--paper .p--back .ln{animation-range:cover 40% cover 51%}
    /* the stop is an event, not a position: it lands on its own timing */
    html.js .w--paper .p--halt{animation:none;opacity:0}
    .w--paper .plate-fig.lit .p--halt{animation:part .34s cubic-bezier(.2,.9,.3,1) both}
    .w--paper .plate-fig.lit .pen{stroke-dasharray:100;animation:edge .8s cubic-bezier(.3,.8,.3,1) .5s both}
    html.js .w--paper [data-rail="halt"] .rail i.x::before{transform:translateY(-50%) scaleX(0)}
    .w--paper [data-rail="halt"].halted .rail i.x::before{animation:bar-land .34s cubic-bezier(.2,.9,.3,1) both}
  }
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @supports ((background-clip:text) or (-webkit-background-clip:text)){
      .w--paper .quoteband q{color:transparent}
    }
  }
}
@media (max-width:1339px){
  .w--paper .mount{overflow-x:auto;overscroll-behavior-x:contain;text-align:left;scrollbar-width:thin}
  .w--paper .mount img{width:var(--sheetw);max-width:none}
  .w--paper .shot__cap::before{content:"Drag the sheet sideways";color:var(--faded)}
  .w--paper .snotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gut)}
  .w--paper .snote{margin:0}
}
@media (max-width:1099px){
  /* One column. The spine keeps its rule but hands its text to the top of
  each section, as one mono line. */
  .sheet.w--paper{--spine:2.5rem}
  .w--paper .g,
  .w--paper .g--screen{grid-template-columns:minmax(0,1fr);row-gap:clamp(1.35rem,4vw,2.25rem)}
  .w--paper .g > *,
  .w--paper .g--screen > *{grid-column:1/-1!important;grid-row:auto!important}
  .w--paper .stub{padding-left:0;padding-top:0}
  .w--paper .stub p{margin:0}
  .w--paper .stub__v{margin-top:0!important}
  .w--paper .sheetfall{padding-left:0}
  .w--paper .snotes{grid-template-columns:minmax(0,1fr);gap:0}
  .w--paper .snote{padding-bottom:.9rem}
  .w--paper .pnotes{grid-template-columns:minmax(0,1fr);gap:0}
  .w--paper .overlap{margin-top:0}
  .w--paper .plate .wrap2{padding-right:var(--edge)}
  .w--paper .plate .dg{min-width:900px}
}
@media (max-width:640px){
  .sheet.w--paper{--spine:1.9rem}
  .w--paper .hero2__h{font-size:clamp(2.5rem,12.5vw,3.6rem)}
  .w--paper .stub__k{font-size:10px}
  .w--paper .plate .dg{min-width:820px}
  .w--paper .quoteband q{letter-spacing:-.035em}
}
@media (prefers-reduced-motion:reduce){
  .w--paper .rail i{clip-path:none!important}
  .w--paper .p,
  .w--paper .p--halt{opacity:1!important;transform:none!important;animation:none!important}
  .w--paper .p--flow .ln,
  .w--paper .p--print .ln,
  .w--paper .p--ink .ln,
  .w--paper .p--back .ln,
  .w--paper .pen,
  .w--paper .seal-pen path{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .w--paper .quoteband q{color:var(--ink)!important}
  .w--paper [data-rail="halt"] .rail i.x::before{transform:translateY(-50%)!important}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes rail-ink-paper{from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)}}
  }
}