/* ============================================================
   VELLUM — The Slow Issue · issue 09
   bone / ink / blood-red · Gloock / Spectral / Zilla Slab
   ============================================================ */

:root{
  --bone:#f5f1e8;
  --bone-deep:#ece6d8;
  --ink:#191713;
  --ink-soft:#453f34;
  --red:#a31621;
  --red-dim:#8c121c;
  --hairline:rgba(25,23,19,.28);
  --hairline-soft:rgba(25,23,19,.14);
  --proc-c:#0e9dc6;
  --proc-m:#d22a7a;
  --proc-y:#e0a90c;
  --display:'Gloock',serif;
  --text:'Spectral',serif;
  --slab:'Zilla Slab',serif;
  --folio-h:3rem;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--folio-h) + 1.5rem);
  overflow-x:hidden;
  color-scheme:light;
  scrollbar-color:var(--red) var(--bone-deep);
  scrollbar-width:thin;
}

body{
  background:
    radial-gradient(ellipse at 14% 9%, rgba(163,22,33,.045), transparent 34rem),
    linear-gradient(90deg, rgba(25,23,19,.025) 0 1px, transparent 1px) 50% 0 / 8rem 100%,
    var(--bone);
  color:var(--ink);
  font-family:var(--text);
  font-size:1.0625rem;
  line-height:1.72;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures;
  font-feature-settings:"kern" 1,"liga" 1,"onum" 1;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  padding-top:var(--folio-h);
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(163,22,33,.16);
}

[id]{scroll-margin-top:calc(var(--folio-h) + 1.5rem)}

/* paper grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:2000;
  pointer-events:none;
  opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}

::selection{background:var(--red);color:var(--bone);text-shadow:none}

::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--bone-deep)}
::-webkit-scrollbar-thumb{
  background:
    linear-gradient(90deg, transparent 0 3px, var(--red) 3px 8px, transparent 8px 100%),
    var(--bone-deep);
  border:1px solid rgba(25,23,19,.28);
}

a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{text-decoration-color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:1px}

.skip-link{
  position:fixed;top:-4rem;left:1rem;z-index:3000;
  background:var(--ink);color:var(--bone);
  font-family:var(--slab);font-size:.85rem;letter-spacing:.08em;
  padding:.7rem 1.1rem;text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{top:calc(var(--folio-h) + .5rem)}

/* ============================================================
   FOLIO LINE — fixed running head
   ============================================================ */
.folio{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--folio-h);
  display:flex;align-items:stretch;justify-content:space-between;
  gap:1rem;
  padding:0 clamp(1rem,3vw,2.5rem);
  background:color-mix(in srgb, var(--bone) 92%, transparent);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--ink);
  box-shadow:0 1px 0 rgba(25,23,19,.08), 0 8px 24px -18px rgba(25,23,19,.5);
  font-family:var(--slab);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums lining-nums;
}
.folio-brand{
  display:flex;align-items:center;gap:.45em;
  text-decoration:none;font-weight:600;font-size:.8rem;
  letter-spacing:.22em;
}
.folio-no{color:var(--red);font-weight:600}
.folio-page{
  display:flex;align-items:center;gap:.6em;
  color:var(--ink-soft);
  font-weight:400;letter-spacing:.14em;
  white-space:nowrap;
  overflow:hidden;
}
.folio-page #folio-num{color:var(--ink);font-weight:600}
.folio-sep{color:var(--red)}
.folio-nav{display:flex;align-items:stretch}
.folio-nav a{
  display:flex;align-items:center;
  padding:0 .7em;
  min-width:44px;justify-content:center;
  text-decoration:none;font-weight:600;
  border-left:1px solid var(--hairline-soft);
  transition:color .15s ease, background .15s ease;
}
.folio-nav a:first-child{border-left:none}
.folio-nav a:hover,
.folio-nav a[aria-current="location"]{color:var(--red);background:rgba(163,22,33,.06)}

/* ============================================================
   THE SPREAD — asymmetric 12-column editorial grid
   named lines: full · hang · text · gutter · margin
   ============================================================ */
.spread{
  display:grid;
  grid-template-columns:
    [full-start]       minmax(2rem,1fr)
    [col-1-start]      minmax(1.25rem,3.5rem)
    [hang-start col-2-start] minmax(2.25rem,5rem)
    [col-3-start]      minmax(2.25rem,5rem)
    [text-start col-4-start] minmax(0,10.33ch)
    [col-5-start]      minmax(0,10.33ch)
    [col-6-start]      minmax(0,10.33ch)
    [col-7-start]      minmax(0,10.33ch)
    [col-8-start]      minmax(0,10.33ch)
    [col-9-start]      minmax(0,10.33ch)
    [text-end col-10-start] minmax(2.25rem,4.5rem)
    [margin-start col-11-start] minmax(4rem,8.5rem)
    [col-12-start]     minmax(4rem,8.5rem)
    [margin-end]       minmax(2rem,1fr)
    [full-end];
  grid-auto-flow:row;
  align-items:start;
  row-gap:0;
}
.spread > *{grid-column:text}

/* ============================================================
   COVER
   ============================================================ */
.cover{
  position:relative;
  padding:clamp(3rem,8vh,6rem) 0 clamp(3.5rem,7vh,5.5rem);
  min-height:calc(96vh - var(--folio-h));
  align-content:start;
  border-bottom:3px double var(--ink);
  overflow:clip;
}
.cover::before{
  content:"";
  position:absolute;
  inset:clamp(1.1rem,2.4vw,2.4rem);
  pointer-events:none;
  opacity:.42;
  background:
    linear-gradient(var(--ink),var(--ink)) left top / 4.2rem 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) left top / 1px 4.2rem no-repeat,
    linear-gradient(var(--ink),var(--ink)) right top / 4.2rem 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right top / 1px 4.2rem no-repeat,
    linear-gradient(var(--ink),var(--ink)) left bottom / 4.2rem 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) left bottom / 1px 4.2rem no-repeat,
    linear-gradient(var(--ink),var(--ink)) right bottom / 4.2rem 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right bottom / 1px 4.2rem no-repeat;
}
.cover::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:multiply;
  background:linear-gradient(180deg, transparent 0 48%, rgba(163,22,33,.36) 49%, rgba(163,22,33,.36) 50%, transparent 52% 100%);
  transform:translateY(-105%);
}
.js .is-loaded .cover::after{animation:press-pass 1.85s cubic-bezier(.19,.8,.22,1) .18s both}
.cover > *:not(.cover-spine){position:relative;z-index:1}
.cover-spine{
  position:absolute;
  grid-column:full-start/full-end;
  left:clamp(.55rem,1.4vw,1.45rem);
  top:clamp(5rem,13vh,8.2rem);
  z-index:2;
  writing-mode:vertical-rl;
  font-family:var(--slab);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--red);
}
.cover-over{
  grid-column:hang-start/margin-end;
  font-family:var(--slab);
  font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-soft);
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--hairline);
  padding:.55rem 0;
  margin-bottom:clamp(1.5rem,4vh,3rem);
}
.masthead{
  grid-column:hang-start/margin-end;
  position:relative;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(4.2rem,15.5vw,13.5rem);
  line-height:.92;
  letter-spacing:.015em;
  color:var(--ink);
}
.mast{display:block;white-space:nowrap}
.mast-plates{position:absolute;inset:0;pointer-events:none}
.mast-plates .mast{position:absolute;inset:0}
.mast.plate-c{color:var(--proc-c)}
.mast.plate-m{color:var(--proc-m)}
.mast.plate-y{color:var(--proc-y)}
.mast-plates .mast{
  mix-blend-mode:multiply;
  opacity:0;
  transition:transform 1.4s cubic-bezier(.19,.8,.22,1), opacity .9s ease;
}
.mast.plate-c{transform:translate(-1.6vw,1vw)}
.mast.plate-m{transform:translate(1.4vw,-.8vw)}
.mast.plate-y{transform:translate(-.7vw,-1.2vw)}
.is-loaded .mast.plate-c{transform:translate(-.018em,.014em);opacity:.42}
.is-loaded .mast.plate-m{transform:translate(.016em,-.011em);opacity:.34}
.is-loaded .mast.plate-y{transform:translate(-.009em,.019em);opacity:.38}
.mast-k{position:relative}

.cover-rule{
  grid-column:hang-start/margin-end;
  height:0;
  border-top:3px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding-top:3px;
  margin:clamp(1.2rem,3vh,2.2rem) 0 .9rem;
}
.cover-issue{
  grid-column:hang-start/margin-end;
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.4em 1.6em;
  margin-bottom:clamp(2rem,6vh,4rem);
}
.ci-no{
  font-family:var(--slab);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;font-size:.85rem;
}
.ci-title{
  font-family:var(--text);font-style:italic;
  font-size:clamp(1.6rem,3vw,2.3rem);
  color:var(--red);
  line-height:1.1;
}
.ci-meta{
  font-family:var(--slab);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
  margin-left:auto;
  font-variant-numeric:tabular-nums lining-nums;
}

.cover-below{
  grid-column:hang-start/margin-end;
  display:grid;
  grid-template-columns:minmax(8rem,12rem) minmax(20rem,1fr) minmax(9rem,13rem);
  align-items:flex-start;
  gap:clamp(2rem,5vw,4.5rem);
}
.cover-illo{
  width:100%;
  margin:0;
  transform:rotate(-1deg);
}
.cover-illo-cap{
  font-family:var(--slab);font-size:.72rem;letter-spacing:.1em;
  color:var(--ink-soft);margin-top:.6rem;
  border-top:1px solid var(--hairline);padding-top:.4rem;
}

.cover-lines{
  max-width:37rem;
  border-left:3px solid var(--red);
  padding-left:clamp(1.2rem,2.5vw,2rem);
}
.cl-head{
  font-family:var(--slab);font-size:.78rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--red);
  margin-bottom:.7rem;
}
.cl-list{list-style:none;counter-reset:cl}
.cl-list li{counter-increment:cl}
.cl-list a{
  display:flex;align-items:baseline;gap:.75em;
  font-family:var(--display);
  font-size:clamp(1.35rem,2.6vw,2rem);
  line-height:1.18;
  text-decoration:none;
  padding:.42rem 0;
  border-bottom:1px solid var(--hairline-soft);
  transition:color .15s ease;
}
.cl-list a::before{
  content:counter(cl,upper-roman) ".";
  font-family:var(--slab);font-size:.62em;font-weight:600;
  color:var(--red);letter-spacing:.05em;
  min-width:1.9em;
}
.cl-list a:hover{color:var(--red)}
.cl-p{
  margin-left:auto;
  font-family:var(--slab);font-size:.55em;font-weight:500;
  color:var(--ink-soft);letter-spacing:.1em;
}
.cl-note{
  margin-top:1rem;
  font-style:italic;color:var(--ink-soft);font-size:.95rem;
}

.cover-ledger{
  font-family:var(--slab);
  font-size:.74rem;
  line-height:1.35;
  border-top:3px solid var(--ink);
  border-bottom:1px solid var(--hairline);
  padding:.7rem 0 .25rem;
}
.ledger-k{
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:.55rem;
}
.cover-ledger div{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.8rem;
  padding:.5rem 0;
  border-top:1px solid var(--hairline-soft);
}
.cover-ledger dt{
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.cover-ledger dd{
  color:var(--ink);
  font-weight:600;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

@keyframes press-pass{
  0%{opacity:0;transform:translateY(-105%)}
  18%{opacity:1}
  70%{opacity:.75}
  100%{opacity:0;transform:translateY(105%)}
}

/* ============================================================
   LOAD REVEAL — the one beautiful moment
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(1.1rem)}
.js .is-loaded .reveal{
  opacity:1;transform:none;
  transition:opacity .9s ease, transform 1s cubic-bezier(.19,.8,.22,1);
}
.js .is-loaded .r1{transition-delay:.15s}
.js .is-loaded .r2{transition-delay:.3s}
.js .is-loaded .r3{transition-delay:1.15s}
.js .is-loaded .r4{transition-delay:1.4s}
.js .masthead.reveal{transform:none}

/* scroll reveals */
.js [data-reveal]{opacity:0;transform:translateY(1.4rem);transition:opacity .8s ease,transform .9s cubic-bezier(.19,.8,.22,1)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ============================================================
   SHARED EDITORIAL FURNITURE
   ============================================================ */
.kicker{
  grid-column:hang-start/margin-end;
  font-family:var(--slab);
  font-size:.8rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--red);
  display:flex;align-items:center;gap:1em;
  margin-bottom:1.1rem;
}
.kicker::after{content:"";flex:1;border-top:1px solid var(--hairline)}

.headline{
  grid-column:hang-start/margin-end;
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.7rem,7vw,5.6rem);
  line-height:1.02;
  letter-spacing:0;
  margin-bottom:1.4rem;
  text-wrap:balance;
}
.headline-sm{font-size:clamp(2.2rem,5vw,3.8rem)}

.standfirst{
  grid-column:text-start/margin-end;
  max-width:56ch;
  font-size:clamp(1.15rem,1.8vw,1.38rem);
  line-height:1.55;
  font-weight:300;
  color:var(--ink-soft);
  margin-bottom:1.6rem;
  hyphens:none;-webkit-hyphens:none;
}
.standfirst::first-line{font-weight:400}

.byline-rule{
  grid-column:text-start/margin-end;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3em 2em;
  font-family:var(--slab);font-size:.74rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  border-top:3px double var(--ink);
  border-bottom:1px solid var(--hairline);
  padding:.6rem 0;
  margin-bottom:2.6rem;
}
.feature .standfirst,
.feature .byline-rule{grid-column:text-start/text-end}

.opener-facts{
  grid-column:margin;
  grid-row:3 / span 2;
  align-self:start;
  font-family:var(--slab);
  font-size:.74rem;
  line-height:1.35;
  border-top:3px solid var(--red);
  border-bottom:1px solid var(--hairline);
  padding:.65rem 0 .25rem;
  margin-top:.2rem;
}
.of-k{
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:.45rem;
}
.opener-facts div{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.7rem;
  padding:.42rem 0;
  border-top:1px solid var(--hairline-soft);
}
.opener-facts dt{
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.opener-facts dd{
  font-weight:600;
  color:var(--ink);
  text-align:right;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

/* body copy */
.feature p, .spread p{hyphens:auto;-webkit-hyphens:auto}
.feature > p{margin-bottom:1.35rem}
.feature > p:not(.kicker):not(.standfirst):not(.article-end){
  line-height:1.64;
  hanging-punctuation:first last;
  text-wrap:pretty;
}
.folio p, .byline-rule, p.kicker, p.cover-over, p.standfirst, p.cl-note{hyphens:none;-webkit-hyphens:none}

/* 4-line drop cap */
.dropcap::first-letter{
  font-family:var(--display);
  float:left;
  font-size:5.5em;
  line-height:.76;
  padding:.075em .14em 0 0;
  color:var(--red);
}

/* superscript note markers */
.sn-ref{
  font-family:var(--slab);font-weight:600;font-style:normal;
  color:var(--red);
  font-size:.68em;
  letter-spacing:0;
  padding-left:.08em;
}

/* sidenotes — outer margin, auto-aligned to their paragraph row */
.sidenote{
  grid-column:margin;
  align-self:start;
  font-family:var(--slab);
  font-size:.8rem;line-height:1.6;font-weight:400;
  color:var(--ink-soft);
  border-top:2px solid var(--red);
  padding-top:.5rem;
  margin-bottom:1.35rem;
}
.sidenote .sn-n{
  font-weight:700;color:var(--red);font-size:.8em;
  padding-right:.35em;
}
.sidenote em{font-style:italic}

/* pull quotes — hung into the left margin */
.pullquote{
  grid-column:hang-start/text-end;
  margin:1.4rem 0 2.4rem;
  padding:1.3rem 0 1.1rem;
  border-top:3px solid var(--ink);
  border-bottom:1px solid var(--ink);
  position:relative;
}
.pullquote p{
  font-family:var(--display);
  font-size:clamp(1.5rem,2.6vw,2.15rem);
  line-height:1.22;
  hyphens:none;-webkit-hyphens:none;
  text-wrap:balance;
}
.pullquote cite{
  display:block;
  margin-top:.85rem;
  font-family:var(--slab);
  font-style:normal;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--red);
}
.pullquote::before{
  content:"“";
  position:absolute;
  top:-.18em;
  left:-.52em;
  font-family:var(--display);
  font-size:5.2rem;
  line-height:1;
  color:var(--red);
  opacity:.9;
}

/* article end mark */
.article-end{
  text-align:center;
  color:var(--red);
  font-size:1.3rem;
  margin-top:1.2rem;
}

/* ghost numerals */
.feature{position:relative;overflow:clip;padding:clamp(3.5rem,8vh,6.5rem) 0 clamp(3rem,6vh,5rem)}
.ghost-no{
  position:absolute;
  top:clamp(.6rem,3vh,2.2rem);
  right:clamp(.25rem,3vw,2.5rem);
  font-family:var(--display);
  font-size:clamp(9rem,20vw,19rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.4px rgba(163,22,33,.26);
  z-index:0;
  pointer-events:none;
  user-select:none;
}
@supports not (-webkit-text-stroke:1px red){
  .ghost-no{color:rgba(163,22,33,.08)}
}
.feature > *:not(.ghost-no){position:relative;z-index:1}

/* section marks */
.section-mark{
  display:flex;align-items:center;gap:1.4rem;
  max-width:min(46rem,86vw);
  margin:0 auto;
  padding:2.6rem 0;
}
.section-mark span{flex:1;border-top:1px solid var(--hairline)}
.section-mark svg{width:60px;height:16px;flex:none}

/* ============================================================
   GENERATED PHOTO PLATES — local stills, printed as proofs
   ============================================================ */
.photo-spread{
  position:relative;
  padding:clamp(3.4rem,8vh,6rem) 0 clamp(3rem,7vh,5rem);
  border-top:1px solid var(--hairline);
  border-bottom:3px double var(--ink);
  overflow:clip;
}
.photo-spread::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.5;
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(163,22,33,.16) 49.8% 50%, transparent 50%),
    radial-gradient(ellipse at 78% 24%, rgba(163,22,33,.08), transparent 28rem);
}
.photo-spread > *{position:relative;z-index:1}
.photo-spread .standfirst{grid-column:text-start/text-end}

.photo-plate{
  --photo-position:center;
  grid-column:hang-start/margin-end;
  margin:1rem 0 2.8rem;
  font-variant-numeric:tabular-nums lining-nums;
}
.photo-plate-bleed{
  grid-column:full-start/full-end;
  margin-top:1.7rem;
}
.photo-hands{margin-top:.15rem}

.photo-frame{
  position:relative;
  aspect-ratio:16 / 8;
  overflow:hidden;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background:var(--ink);
  isolation:isolate;
  box-shadow:0 1.2rem 2.4rem -2rem rgba(25,23,19,.85);
}
.photo-hands .photo-frame{
  aspect-ratio:4 / 2.55;
  border:1px solid var(--hairline);
  box-shadow:8px 8px 0 -1px var(--bone-deep),8px 8px 0 0 var(--hairline);
}
.photo-underprint,
.photo-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--photo-position);
}
.photo-underprint{
  z-index:1;
  background-image:url("/assets/gen/vellum/valley.jpg");
  background-size:cover;
  background-position:var(--photo-position);
  filter:sepia(1) saturate(2.5) hue-rotate(310deg) contrast(1.15);
  mix-blend-mode:multiply;
  opacity:.24;
  transform:translate(.35rem,-.2rem);
}
.photo-img{
  z-index:2;
  display:block;
  filter:grayscale(1) sepia(.18) contrast(1.18) brightness(.9);
  transition:filter .45s ease, transform .65s cubic-bezier(.19,.8,.22,1);
}
.photo-frame::before{
  content:"";
  position:absolute;
  inset:clamp(.75rem,1.6vw,1.4rem);
  z-index:4;
  pointer-events:none;
  opacity:.78;
  background:
    linear-gradient(var(--bone),var(--bone)) left top / 3.2rem 1px no-repeat,
    linear-gradient(var(--bone),var(--bone)) left top / 1px 3.2rem no-repeat,
    linear-gradient(var(--bone),var(--bone)) right top / 3.2rem 1px no-repeat,
    linear-gradient(var(--bone),var(--bone)) right top / 1px 3.2rem no-repeat,
    linear-gradient(var(--bone),var(--bone)) left bottom / 3.2rem 1px no-repeat,
    linear-gradient(var(--bone),var(--bone)) left bottom / 1px 3.2rem no-repeat,
    linear-gradient(var(--bone),var(--bone)) right bottom / 3.2rem 1px no-repeat,
    linear-gradient(var(--bone),var(--bone)) right bottom / 1px 3.2rem no-repeat;
}
.photo-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(25,23,19,.52), transparent 18%, transparent 72%, rgba(25,23,19,.32)),
    linear-gradient(180deg, rgba(245,241,232,.18), transparent 42%, rgba(25,23,19,.28)),
    repeating-linear-gradient(0deg, rgba(245,241,232,.08) 0 1px, transparent 1px 5px);
  mix-blend-mode:multiply;
}
.photo-valley{--photo-position:center 55%}
.photo-hands{--photo-position:center 47%}
.photo-hands .photo-underprint{background-image:url("/assets/gen/vellum/hands.jpg")}

.photo-plate figcaption{
  max-width:62ch;
  margin:.75rem clamp(1.25rem,8vw,14rem) 0 auto;
  padding:.55rem 0 .5rem;
  border-top:2px solid var(--red);
  border-bottom:1px solid var(--hairline);
  font-family:var(--slab);
  font-size:.78rem;
  line-height:1.55;
  color:var(--ink-soft);
}
.photo-hands figcaption{margin-left:0;margin-right:auto}
.photo-plate figcaption span{
  display:inline-block;
  margin-right:.7em;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--red);
}

.js .photo-plate[data-reveal]{
  opacity:1;
  transform:none;
}
.js .photo-plate .photo-img{
  clip-path:inset(0);
  transform:scale(1.018);
}
.js .photo-plate .photo-underprint{
  opacity:.58;
  transform:translate(-1.1rem,.65rem) scale(1.018);
}
.js .photo-plate.is-in .photo-img{
  clip-path:inset(0);
  transform:scale(1);
  transition:
    transform 1.7s cubic-bezier(.19,.8,.22,1) .08s,
    filter .45s ease;
}
.js .photo-plate.is-in .photo-underprint{
  opacity:.22;
  transform:translate(.35rem,-.2rem) scale(1);
  transition:
    transform 1.55s cubic-bezier(.19,.8,.22,1),
    opacity 1.1s ease .25s;
}

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .js .photo-plate.is-in:is(:hover,:focus-visible) .photo-img,
  .photo-plate:is(:hover,:focus-visible) .photo-img{
    filter:grayscale(1) sepia(.12) contrast(1.28) brightness(.96);
    transform:scale(1.018);
  }
  .js .photo-plate.is-in:is(:hover,:focus-visible) .photo-underprint,
  .photo-plate:is(:hover,:focus-visible) .photo-underprint{
    opacity:.42;
    transform:translate(-.75rem,.42rem) scale(1.018);
  }
}

/* ============================================================
   ILLUSTRATIONS — CMYK plates sliding into register
   ============================================================ */
.illo{margin:0 0 2.4rem}
.illo-right{grid-column:text-start/margin-end}
.illo-left{grid-column:hang-start/text-end}
.illo-svg{
  display:block;width:100%;height:auto;
  background:
    linear-gradient(rgba(25,23,19,.028),rgba(25,23,19,.028)),
    var(--bone);
  border:1px solid var(--hairline);
  box-shadow:6px 6px 0 -1px var(--bone-deep), 6px 6px 0 0 var(--hairline);
}
.illo figcaption{
  font-family:var(--slab);font-size:.78rem;line-height:1.55;
  color:var(--ink-soft);
  border-bottom:1px solid var(--hairline);
  padding:.55rem 0 .5rem;
  max-width:52ch;
}

.illo-svg .ln{fill:none;stroke:var(--plate,var(--ink));stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.illo-svg .ln.thin{stroke-width:1.5}
.illo-svg .ln.bone{stroke:var(--bone)}
.illo-svg .spot{fill:var(--spotc,var(--red));stroke:none}
.illo-svg .plate-c{--plate:var(--proc-c);--spotc:var(--proc-c);opacity:0}
.illo-svg .plate-m{--plate:var(--proc-m);--spotc:var(--proc-m);opacity:0}
.illo-svg .plate-y{--plate:var(--proc-y);--spotc:var(--proc-y);opacity:0}
.illo-svg .plate-k{--plate:var(--ink);--spotc:var(--red)}
.illo-svg .plate-c .bone,.illo-svg .plate-m .bone,.illo-svg .plate-y .bone{stroke:var(--bone)}

.js .illo-svg .plate{transition:transform 1.3s cubic-bezier(.19,.8,.22,1), opacity .7s ease 1.1s}
.illo-svg .plate-c,.illo-svg .plate-m,.illo-svg .plate-y{mix-blend-mode:multiply}
.js .plates .plate-c{transform:translate(-16px,9px);opacity:1}
.js .plates .plate-m{transform:translate(14px,-7px);opacity:1}
.js .plates .plate-y{transform:translate(-7px,-13px);opacity:1}
.js .plates .plate-k{opacity:0;transform:translate(5px,12px);transition:transform 1.3s cubic-bezier(.19,.8,.22,1) .12s, opacity .8s ease .12s}
.js .plates.in-register .plate-c,.js .plates.in-register .plate-m,.js .plates.in-register .plate-y{transform:none;opacity:0}
.js .plates.in-register .plate-k{opacity:1;transform:none}

.regmarks circle,.regmarks path{fill:none;stroke:var(--ink);stroke-width:1;opacity:.4}

/* the cover hourglass keeps a whisper of misregistration */
.js .cover-illo.in-register .plate-c{opacity:.35;transform:translate(-2px,1.5px)}
.js .cover-illo.in-register .plate-m{opacity:.3;transform:translate(2px,-1.5px)}
.js .cover-illo.in-register .plate-y{opacity:.35;transform:translate(-1px,2px)}

/* once registered, a hover teases the plates back apart */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .js .illo.plates.in-register .plate{transition:transform .45s ease, opacity .45s ease}
  .js .illo.plates.in-register:hover .plate-c{opacity:.5;transform:translate(-3px,2px)}
  .js .illo.plates.in-register:hover .plate-m{opacity:.42;transform:translate(3px,-2px)}
  .js .illo.plates.in-register:hover .plate-y{opacity:.45;transform:translate(-1.5px,3px)}
}

/* ============================================================
   CONTENTS
   ============================================================ */
.contents{padding:clamp(3.5rem,8vh,6rem) 0 clamp(3rem,6vh,4.5rem)}
.toc{grid-column:text-start/margin-end;max-width:56rem}
.toc-group{
  font-family:var(--slab);font-size:.78rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--red);
  margin:1.9rem 0 .5rem;
}
.toc-group:first-child{margin-top:.4rem}
.toc-list{list-style:none}
.toc-row{
  display:flex;align-items:baseline;gap:.8em;
  padding:.68rem 0;
  border-bottom:1px solid var(--hairline-soft);
  text-decoration:none;
  transition:color .15s ease;
}
a.toc-row:hover .toc-t{color:var(--red)}
.toc-t{
  font-family:var(--display);
  font-size:clamp(1.15rem,2.2vw,1.55rem);
  line-height:1.25;
  transition:color .15s ease;
}
.toc-t em{
  font-family:var(--text);font-style:italic;font-weight:300;
  font-size:.72em;color:var(--ink-soft);
}
.leader{
  flex:1;min-width:2.5rem;
  border-bottom:2px dotted rgba(25,23,19,.4);
  transform:translateY(-.32em);
}
.toc-p{
  font-family:var(--slab);font-weight:600;font-size:.92rem;
  color:var(--red);letter-spacing:.06em;
}
.toc-dead .toc-t,.toc-dead .toc-p{color:var(--ink-soft)}
.toc-dead .toc-p{color:inherit}

.contents-note{
  grid-column:margin;
  grid-row:3;
  align-self:start;
  font-size:.92rem;line-height:1.65;font-style:italic;color:var(--ink-soft);
}
.cn-rule{
  font-family:var(--slab);font-style:normal;font-weight:600;
  font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);
  border-top:2px solid var(--red);
  padding-top:.5rem;margin-bottom:.6rem;
}
.cn-sig{margin-top:.7rem;font-family:var(--slab);font-style:normal;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}

/* ============================================================
   THE SLOW INDEX
   ============================================================ */
.slow-index{padding:clamp(3rem,7vh,5.5rem) 0}
.index-list{grid-column:text-start/margin-end;max-width:56rem;margin-top:.6rem}
.index-row{
  display:flex;align-items:baseline;gap:.8em;
  padding:.62rem 0;
  border-bottom:1px solid var(--hairline-soft);
}
.index-row dt{
  font-size:1.02rem;
  hyphens:none;-webkit-hyphens:none;
}
.index-row dd{
  font-family:var(--display);
  font-size:1.7rem;line-height:1;
  color:var(--red);
  min-width:2.2em;text-align:right;
  font-variant-numeric:tabular-nums;
}
.index-foot{
  grid-column:text-start/margin-end;
  margin-top:1.1rem;
  font-family:var(--slab);font-size:.76rem;letter-spacing:.06em;
  color:var(--ink-soft);
}

/* ============================================================
   COLOPHON
   ============================================================ */
.colophon{
  padding:clamp(3.5rem,8vh,6rem) 0 clamp(3rem,7vh,5rem);
  border-top:3px double var(--ink);
}
.colo-grid{
  grid-column:hang-start/margin-end;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:2.2rem 2.6rem;
  margin-top:.8rem;
}
.colo-cell h3{
  font-family:var(--slab);font-size:.76rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--red);
  border-top:2px solid var(--ink);
  padding-top:.55rem;margin-bottom:.65rem;
}
.colo-cell p{font-size:.94rem;line-height:1.7;hyphens:auto;-webkit-hyphens:auto}
.colo-cell strong{font-weight:600}
.colo-end{
  grid-column:hang-start/margin-end;
  text-align:center;
  margin-top:3rem;
  font-family:var(--slab);font-size:.8rem;letter-spacing:.3em;
  text-transform:uppercase;line-height:2.1;
}
.colo-end em{
  font-family:var(--text);font-style:italic;text-transform:none;
  letter-spacing:.02em;color:var(--ink-soft);font-size:1rem;
}
.colo-fleuron{color:var(--red);font-size:1.5rem;letter-spacing:0}

/* ============================================================
   FOOTER — the back cover
   ============================================================ */
.paper-foot{
  background:var(--ink);
  color:var(--bone);
  text-align:center;
  padding:3.2rem 1.5rem 2.6rem;
  position:relative;
}
.paper-foot::before{
  content:"";
  display:block;
  position:absolute;top:6px;left:0;right:0;
  border-top:1px solid rgba(245,241,232,.35);
}
.pf-brand{
  font-family:var(--display);
  font-size:3rem;line-height:1;
  color:var(--red);
  -webkit-text-stroke:1px rgba(245,241,232,.4);
  margin-bottom:.8rem;
}
.pf-line{
  font-family:var(--slab);font-size:.85rem;letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:1.1rem;
}
.pf-line strong{font-weight:600}
.pf-links{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.2em .9em;
  font-family:var(--slab);font-size:.82rem;letter-spacing:.1em;
}
.pf-links a{
  color:var(--bone);
  text-decoration:none;
  border-bottom:1px solid rgba(245,241,232,.4);
  padding:.55em .1em;
  transition:color .15s ease,border-color .15s ease;
}
.pf-links a:hover{color:#e8b7bc;border-color:#e8b7bc}
.pf-pair{display:inline-flex;align-items:center;gap:.9em;white-space:nowrap}
.pf-dot{color:var(--red);font-size:.6em}
.pf-small{
  margin-top:1.4rem;
  font-family:var(--slab);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(245,241,232,.55);
}

/* ============================================================
   GUIDE — production note sheet
   ============================================================ */
.guide-main{padding-bottom:4rem}
.guide-head{padding:clamp(3rem,7vh,5rem) 0 0}
.guide-head .headline{font-size:clamp(2.8rem,7.2vw,6.9rem)}
.guide-head .standfirst{grid-column:text-start/text-end}
.guide-body h3{
  grid-column:text;
  font-family:var(--display);font-weight:400;
  font-size:1.55rem;line-height:1.2;
  margin:2.2rem 0 .8rem;
}
.guide-body h3::before{
  content:"§ ";
  color:var(--red);
}
.guide-body p{margin-bottom:1.15rem;text-wrap:pretty}
.guide-body code{
  font-family:var(--slab);font-weight:500;font-size:.9em;
  background:rgba(163,22,33,.07);
  border:1px solid rgba(163,22,33,.18);
  border-radius:2px;
  padding:.05em .3em;
  hyphens:none;-webkit-hyphens:none;
}
.guide-diagram{
  grid-column:hang-start/margin-end;
  margin:1.4rem 0 2.8rem;
}
.grid-sheet{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  min-height:10rem;
  border:1px solid var(--ink);
  box-shadow:6px 6px 0 -1px var(--bone-deep),6px 6px 0 0 var(--hairline);
  background:
    linear-gradient(rgba(25,23,19,.025),rgba(25,23,19,.025)),
    var(--bone);
  padding:1rem;
  gap:.28rem;
}
.grid-sheet span{
  border-top:3px solid var(--ink);
  border-bottom:1px solid var(--hairline);
  background:rgba(25,23,19,.035);
}
.grid-sheet span:nth-child(2),
.grid-sheet span:nth-child(3){background:rgba(163,22,33,.08)}
.grid-sheet span:nth-child(n+4):nth-child(-n+9){background:rgba(25,23,19,.07)}
.grid-sheet span:nth-child(n+11){background:rgba(163,22,33,.12)}
.grid-label{
  position:absolute;
  bottom:1rem;
  font-family:var(--slab);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--red);
}
.grid-label.hang{left:13%}
.grid-label.text{left:34%}
.grid-label.margin{right:4%}
.guide-diagram figcaption{
  font-family:var(--slab);
  font-size:.78rem;
  line-height:1.5;
  color:var(--ink-soft);
  margin-top:.7rem;
  border-bottom:1px solid var(--hairline);
  padding-bottom:.45rem;
}
.token-table{
  grid-column:text;
  width:100%;
  border-collapse:collapse;
  font-family:var(--slab);font-size:.85rem;
  margin:0 0 1.4rem;
}
.token-table th{
  text-align:left;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:.7rem;color:var(--red);
  border-bottom:2px solid var(--ink);
  padding:.4rem .6rem .4rem 0;
}
.token-table td{
  border-bottom:1px solid var(--hairline-soft);
  padding:.45rem .6rem .45rem 0;
  vertical-align:top;
}
.swatch{
  display:inline-block;width:.85em;height:.85em;
  border:1px solid var(--hairline);
  margin-right:.45em;vertical-align:-.08em;
}
.repro{
  grid-column:text-start/margin-end;
  border:1px solid var(--ink);
  box-shadow:5px 5px 0 -1px var(--bone-deep),5px 5px 0 0 var(--hairline);
  padding:1.4rem 1.5rem 1.2rem;
  margin:1rem 0 1.5rem;
}
.repro p{font-style:italic;color:var(--ink-soft)}
.repro .cn-rule{margin-bottom:.8rem}

/* ============================================================
   RESPONSIVE — tablet: fold the outer margin in
   ============================================================ */
@media (max-width:1099px){
  .spread{
    grid-template-columns:
      [full-start]   minmax(1.5rem,1fr)
      [hang-start]   clamp(0rem,4vw,3rem)
      [text-start]   minmax(0,62ch)
      [text-end]     0
      [margin-start] 0
      [margin-end]   minmax(1.5rem,1fr)
      [full-end];
  }
  .feature .standfirst,
  .feature .byline-rule{grid-column:text}
  .opener-facts{
    grid-column:text;
    grid-row:auto;
    border-top:none;
    border-left:2px solid var(--red);
    border-bottom:none;
    padding:.1rem 0 .1rem 1rem;
    margin:-.35rem 0 1.5rem;
  }
  .opener-facts dl{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.8rem;
  }
  .opener-facts div{
    display:block;
    border-top:1px solid var(--hairline-soft);
    padding:.45rem 0 0;
  }
  .opener-facts dd{text-align:left;margin-top:.08rem}
  .sidenote{
    grid-column:text;
    max-width:32rem;
    border-top:none;
    border-left:2px solid var(--red);
    padding:.15rem 0 .15rem 1rem;
    margin:0 0 1.35rem;
  }
  .standfirst{grid-column:text-start/margin-end}
  .illo-right,.illo-left{grid-column:hang-start/margin-end}
  .contents-note{
    grid-column:text;grid-row:auto;
    max-width:34rem;
    margin-top:2rem;
  }
  .cover{min-height:0}
  .cover-below{
    grid-template-columns:8.5rem minmax(0,1fr);
    gap:2rem;
  }
  .cover-ledger{grid-column:1 / -1}
  .guide-head .standfirst{grid-column:text}
  .guide-diagram{grid-column:hang-start/margin-end}
  .repro{grid-column:text}
  .photo-spread .standfirst{grid-column:text}
  .photo-plate figcaption{margin-right:1.5rem}
  .photo-hands figcaption{margin-left:0}
  .ghost-no{-webkit-text-stroke-width:1.2px;opacity:.85}
}

/* phone */
@media (max-width:759px){
  :root{--folio-h:2.85rem}
  body{font-size:1rem}
  .spread{
    grid-template-columns:
      [full-start]   1.25rem
      [hang-start]   0
      [text-start]   minmax(0,1fr)
      [text-end]     0
      [margin-start] 0
      [margin-end]   0
      [full-end]     1.25rem;
  }
  .folio{gap:.4rem;padding:0 .35rem 0 1rem}
  .folio-page{display:none}
  .folio-brand{font-size:.72rem;letter-spacing:.16em}
  .folio-nav a{padding:0 .5em;min-width:44px}
  .folio-nav a[href="#contents"]{display:none}
  .cover{min-height:0;padding-top:2.2rem}
  .cover::before{inset:.85rem;opacity:.25}
  .cover-spine{display:none}
  .masthead{font-size:clamp(3.4rem,20.5vw,5.6rem)}
  .cover-below{grid-template-columns:1fr;gap:1.8rem}
  .cover-illo{width:7.5rem}
  .cover-lines{border-left-width:2px;padding-left:1rem;width:100%}
  .cover-ledger{grid-column:auto}
  .cover-ledger div{grid-template-columns:1fr auto}
  .ci-meta{margin-left:0;flex-basis:100%}
  .photo-spread{padding:2.8rem 0 3.2rem}
  .photo-plate,
  .photo-plate-bleed{grid-column:full-start/full-end}
  .photo-plate{margin:1rem 0 2.2rem}
  .photo-plate-bleed .photo-frame{aspect-ratio:4 / 5}
  .photo-hands .photo-frame{aspect-ratio:4 / 3}
  .photo-frame::before{inset:.8rem;opacity:.62}
  .photo-frame::after{
    background:
      linear-gradient(180deg, rgba(245,241,232,.12), transparent 38%, rgba(25,23,19,.32)),
      repeating-linear-gradient(0deg, rgba(245,241,232,.08) 0 1px, transparent 1px 5px);
  }
  .photo-valley{--photo-position:43% 50%}
  .photo-hands{--photo-position:52% 50%}
  .photo-plate figcaption{
    margin:.65rem 1.25rem 0;
    font-size:.72rem;
    line-height:1.5;
  }
  .opener-facts dl{grid-template-columns:1fr}
  .pullquote{grid-column:text}
  .pullquote::before{left:-.08em;top:-.5em;font-size:4rem}
  .pullquote{padding-top:2rem}
  .dropcap::first-letter{font-size:4.6em}
  .ghost-no{font-size:8.5rem;top:.6rem;right:.4rem;-webkit-text-stroke-width:1px;opacity:.6}
  .index-row{flex-wrap:wrap;gap:.2em .8em}
  .index-row dt{flex:1 1 100%}
  .index-row .leader{display:none}
  .index-row dd{min-width:0;text-align:left;font-size:1.5rem}
  .toc-t em{display:block;font-size:.68em}
  .guide-head .headline{font-size:clamp(2.65rem,13vw,4.4rem)}
  .guide-diagram{grid-column:text}
  .grid-sheet{
    min-height:8rem;
    gap:.18rem;
    padding:.75rem;
  }
  .grid-label{font-size:.58rem;letter-spacing:.1em;bottom:.7rem}
  .grid-label.hang{left:9%}
  .grid-label.text{left:29%}
  .grid-label.margin{right:2%}
  .token-table{font-size:.78rem}
  .token-table th,.token-table td{padding:.4rem .35rem .4rem 0}
  .section-mark{padding:2rem 0}
  .colo-grid{gap:1.6rem}
  .headline{overflow-wrap:break-word}
  .pf-line{font-size:.78rem;letter-spacing:.14em}
  .pf-links{font-size:.78rem}
}

@media (max-width:409px){
  .masthead{letter-spacing:0}
  .folio-brand .folio-no{display:none}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js [data-reveal]{opacity:1;transform:none;transition:none}
  .mast-plates .mast{transition:none}
  .is-loaded .mast.plate-c,.mast.plate-c{transform:translate(-.018em,.014em);opacity:.42}
  .is-loaded .mast.plate-m,.mast.plate-m{transform:translate(.016em,-.011em);opacity:.34}
  .is-loaded .mast.plate-y,.mast.plate-y{transform:translate(-.009em,.019em);opacity:.38}
  .js .illo-svg .plate,.js .plates .plate-k{transition:none}
  .js .plates .plate-c,.js .plates .plate-m,.js .plates .plate-y{transform:none;opacity:0}
  .js .plates .plate-k{opacity:1;transform:none}
  .js .photo-plate .photo-img,
  .js .photo-plate.is-in .photo-img{
    clip-path:inset(0);
    transform:none;
    transition:none;
  }
  .js .photo-plate .photo-underprint,
  .js .photo-plate.is-in .photo-underprint{
    opacity:.18;
    transform:translate(.35rem,-.2rem);
    transition:none;
  }
  .js .cover-illo .plate-c{opacity:.35;transform:translate(-2px,1.5px)}
  .js .cover-illo .plate-m{opacity:.3;transform:translate(2px,-1.5px)}
  .js .cover-illo .plate-y{opacity:.35;transform:translate(-1px,2px)}
  .js .is-loaded .cover::after{animation:none}
}