/* ============================================================================
   SMALL RUNS — a one-person software workshop
   Printed in two inks on warm stock.

     0. stock   1. registration   2. type   3. furniture   4. docket
     5. title plate   6. proof sheet   7. tickets   8. services   9. colophon

   Colour rule, enforced throughout:
     fluorescent pink never carries text. It is a graphic ink — fields, rules,
     marks, halftones — and where it must carry meaning it is overprinted with
     blue, which produces the navy. That is both how a riso works and how the
     page stays legible.
   ==========================================================================*/

/* --- 0. STOCK -------------------------------------------------------------*/

:root{
  /* The stock is mixed one step warmer and lighter than it should read,
     because the tooth and mottle layers multiply on top of it and take it
     back down to the intended #f2ecde. */
  --paper:      #f9f4e8;
  --paper-2:    #ece4d2;
  --ink-a:      #ff48b0;   /* fluorescent pink — plate A, graphic only     */
  --ink-b:      #0078bf;   /* blue             — plate B, graphic          */
  --ink-b-txt:  #00619b;   /* blue, ink-heavy pass, safe for small text    */
  --overprint:  #002284;   /* A × B. Produced, never chosen.               */
  /* There is no black ink on this press. The text colour IS the overprint:
     fluorescent pink at full density with blue on top of it. Which means the
     claim in the colophon is literally true rather than a figure of speech. */
  --ink-text:   #002284;

  --ax: 0.7px;  --ay: 0.5px;
  --bx: -0.5px; --by: -0.3px;

  --gutter: clamp(18px, 4.2vw, 78px);
  --rail:   clamp(0px, 12vw, 176px);

  --press: cubic-bezier(.16,.9,.2,1);
  --snap:  cubic-bezier(.7,0,.15,1);
}

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

html{ background:var(--paper); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-text);
  font-family:"Archivo",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:clamp(15px,.5vw + 13.2px,17px);
  line-height:1.56;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

/* Two independent fixed layers, tiled. They must sit in the ROOT stacking
   context — wrap them in a positioned parent with a z-index and the blend is
   isolated, which makes the paper texture silently disappear. */
.tooth,.blotch{
  position:fixed; inset:0;
  pointer-events:none;
  mix-blend-mode:multiply;
  background-repeat:repeat;
}
.tooth{
  z-index:92; opacity:.62;
  background-image:url("paper-tooth.svg");
  background-size:260px 260px;
}
.blotch{
  z-index:91; opacity:.55;
  background-image:url("paper-mottle.svg");
  background-size:1100px 1100px;
}

.sheet-marks{
  position:fixed; inset:0; z-index:93;
  pointer-events:none; color:var(--ink-b); opacity:.45;
}
.sheet-marks svg{ position:absolute; width:24px; height:24px; }
.sheet-marks .tl{ top:14px; left:14px; }
.sheet-marks .tr{ top:14px; right:14px; }
.sheet-marks .bl{ bottom:14px; left:14px; }
.sheet-marks .br{ bottom:14px; right:14px; }
@media (max-width:900px){ .sheet-marks{ display:none; } }

.defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* --- 1. REGISTRATION ------------------------------------------------------*/

.ink-a{ transform:translate(var(--ax),var(--ay)); }
.ink-b{ transform:translate(var(--bx),var(--by)); }

.op{
  position:relative; display:block;
  color:transparent; -webkit-text-fill-color:transparent;
}
.op::before,.op::after{
  content:attr(data-ink);
  position:absolute; inset:0;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.op::before{ color:var(--ink-a); -webkit-text-fill-color:var(--ink-a);
             transform:translate(var(--ax),var(--ay)); }
.op::after { color:var(--ink-b); -webkit-text-fill-color:var(--ink-b);
             transform:translate(var(--bx),var(--by)); }

/* Big plates show more error than small ones — a wide sheet is harder to
   register than a narrow one, so the display type is amplified. */
.bigtype .op::before{ transform:translate(calc(var(--ax) * 1.8),calc(var(--ay) * 1.8)); }
.bigtype .op::after { transform:translate(calc(var(--bx) * 1.8),calc(var(--by) * 1.8)); }

/* --- 2. TYPE --------------------------------------------------------------*/

.display{
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 1,"wght" 800;
  font-weight:800; line-height:.83; letter-spacing:-.03em; margin:0;
}

.mono{
  font-family:"Iosevka Term SS06","Iosevka",ui-monospace,"SFMono-Regular",
              "JetBrains Mono",Menlo,monospace;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; line-height:1.55;
}
.mono--b{ color:var(--ink-b-txt); }

.label{ font-variation-settings:"wdth" 68,"wght" 640;
        font-size:11px; letter-spacing:.2em; text-transform:uppercase; }

.lede{
  font-size:clamp(18px,.85vw + 13px,23px); line-height:1.44;
  font-variation-settings:"wdth" 100,"wght" 390;
  letter-spacing:-.011em; max-width:36ch; margin:0;
}

a{ color:inherit; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200;
       background:var(--overprint); color:var(--paper); padding:.7em 1.2em; }
.skip:focus{ left:0; }

:focus-visible{ outline:2.5px solid var(--overprint); outline-offset:3px; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
          overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Contrast note: overprint navy on fluorescent pink measures 4.35:1 — just
   under AA for small text. So pink never sits behind words anywhere on this
   site. Labels are navy fields with paper text (11.4:1), and the pink shows
   up as a printed square alongside, where it carries no information. */
.chip{
  display:inline-block; background:var(--overprint); color:var(--paper);
  padding:.34em .7em .3em; font-variation-settings:"wdth" 70,"wght" 700;
}
.chip::before{
  content:""; display:inline-block; width:.62em; height:.62em;
  background:var(--ink-a); margin-right:.62em; vertical-align:baseline;
}

/* --- 3. FURNITURE ---------------------------------------------------------*/

.sheet{ max-width:1580px; margin:0 auto; padding:0 var(--gutter); }

.spread{
  display:grid;
  grid-template-columns:[note] var(--rail) [body] minmax(0,1fr);
  column-gap:clamp(16px,2.8vw,50px); align-items:start;
}
@media (max-width:920px){ .spread{ grid-template-columns:1fr; row-gap:12px; } }

.note{ color:var(--ink-b-txt); padding-top:.5em; position:sticky; top:76px; }
.note p{ margin:0 0 .85em; }
.note b{ font-weight:400; color:var(--overprint); }
@media (max-width:920px){ .note{ position:static; padding-top:0; } }

.rule{ height:0; border:0; border-top:1px solid var(--ink-b); opacity:.34; margin:0; }
.rule--heavy{ border-top-width:3px; opacity:1; }

section{ position:relative; background:var(--paper); scroll-margin-top:58px; }

.band{ padding:clamp(44px,7.2vh,96px) 0; }
.band--tight{ padding:clamp(30px,4.6vh,58px) 0; }

.bandhead{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.4em; margin:0 0 clamp(20px,3.2vh,40px);
  border-bottom:2.5px solid var(--ink-b); padding-bottom:.5em;
}
.bandhead h2{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 60,"SOFT" 0,"WONK" 1,"wght" 780;
  font-size:clamp(1.4rem,2.5vw,2.3rem); letter-spacing:-.024em; margin:0; line-height:1;
}
.bandhead .mono{ color:var(--ink-b-txt); text-align:right; }
.bandhead a{ color:var(--overprint); text-decoration:none; }
.bandhead a:hover{ background:var(--overprint); color:var(--paper); }
@media (max-width:600px){
  .bandhead{ flex-direction:column; align-items:flex-start; gap:.35em; }
  .bandhead .mono{ text-align:left; }
}

/* --- 4. DOCKET ------------------------------------------------------------*/

.docket{
  position:sticky; top:0; z-index:80;
  background:var(--paper);
  border-bottom:1px solid rgba(0,120,191,.45);
}
.docket__in{
  max-width:1580px; margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:stretch; min-height:46px;
}
.docket__cell{
  display:flex; align-items:center; gap:.6em;
  padding:0 clamp(8px,1.05vw,17px);
  border-left:1px solid rgba(0,120,191,.24);
  color:var(--ink-b-txt); white-space:nowrap;
}
.docket__cell:first-child{ border-left:0; padding-left:0; }
.docket__cell--grow{ flex:1 1 auto; border-left:0; }

.marque{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 24,"SOFT" 0,"WONK" 1,"wght" 900;
  font-size:16px; letter-spacing:-.015em; text-transform:uppercase;
  color:var(--ink-text); text-decoration:none;
}
.marque em{ font-style:normal; color:var(--ink-a); }

.swatches{ display:flex; gap:3px; }
.swatch{ width:12px; height:12px; display:block; }
.swatch--a{ background:var(--ink-a); }
.swatch--b{ background:var(--ink-b); }
.swatch--o{ background:var(--overprint); }

.plates{ display:flex; }
.plates a{
  text-decoration:none; color:var(--ink-b-txt);
  padding:.42em .78em; display:block;
  transition:background .18s var(--press), color .18s var(--press);
}
.plates a:hover{ background:var(--overprint); color:var(--paper); }
.plates a[aria-current="page"]{ background:var(--overprint); color:var(--paper); }

/* 4b. the registration control — press hardware */
.reg{ display:flex; align-items:center; gap:.6em; }
.reg__cap{ color:var(--ink-b-txt); }
.reg__slider{
  -webkit-appearance:none; appearance:none;
  width:clamp(78px,9vw,136px); height:24px;
  background:transparent; margin:0; cursor:ew-resize;
}
.reg__slider::-webkit-slider-runnable-track{ height:24px; background:var(--trk); }
.reg__slider::-moz-range-track{ height:24px; background:var(--trk); }
.reg__slider{
  --trk:
    repeating-linear-gradient(90deg, rgba(0,120,191,.6) 0 1px, transparent 1px 8px)
      center/100% 6px no-repeat,
    linear-gradient(var(--ink-b),var(--ink-b)) center/100% 1.5px no-repeat;
}
.reg__slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:24px; border:0; border-radius:0;
  background:
    repeating-linear-gradient(90deg, rgba(242,236,222,.85) 0 1px, transparent 1px 3px)
      center/100% 16px no-repeat,
    var(--overprint);
}
.reg__slider::-moz-range-thumb{
  width:14px; height:24px; border:0; border-radius:0;
  background:
    repeating-linear-gradient(90deg, rgba(242,236,222,.85) 0 1px, transparent 1px 3px)
      center/100% 16px no-repeat,
    var(--overprint);
}
.reg__out{ color:var(--ink-b-txt); width:18em; font-variant-numeric:tabular-nums; }
body.is-split .reg__out{ color:var(--paper); background:var(--overprint); padding:.25em .45em; }

@media (max-width:1180px){ .docket__cell--hide-lg{ display:none; } }
@media (max-width:800px){
  .docket__cell--hide-md{ display:none; }
  .docket__in{ min-height:42px; }
  .reg__slider{ width:58px; }
  .reg__cap{ display:none; }
  .reg__out{ font-size:9.5px; }
}
/* Narrow sheets: the docket folds onto two rows rather than losing the
   plate switcher off the right edge. The registration control stays —
   it is the point of the thing. */
@media (max-width:690px){
  .docket__in{ flex-wrap:wrap; }
  .docket__cell--grow{ display:none; }
  .docket__cell{ padding:0 7px; min-height:40px; }
  .reg__out{ font-size:9px; letter-spacing:.08em; }
  .plates{
    order:3; flex:1 0 100%; padding:0; border-left:0;
    border-top:1px solid rgba(0,120,191,.24);
  }
  .plates a{ flex:1 1 0; text-align:center; padding:.55em .4em; }
}

/* --- 5. TITLE PLATE -------------------------------------------------------*/

.titleplate{ padding:clamp(34px,5.6vh,76px) 0 0; }

.titlegrid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,27%);
  gap:clamp(20px,3vw,60px); align-items:end;
}
@media (max-width:1000px){ .titlegrid{ grid-template-columns:1fr; align-items:start; } }

.bigtype{ font-size:clamp(3rem,10vw,10rem); margin:0; }
.bigtype .op + .op{ margin-top:-.05em; }
.bigtype .indent{ padding-left:clamp(0px,7.5vw,3.4em); }

.titleaside{ padding-bottom:clamp(6px,1.4vw,22px); }
.titleaside .note{ position:static; margin:0 0 1.1em; }

@media (prefers-reduced-motion:no-preference){
  .booting .bigtype .op::before{ animation:regA 1.8s var(--snap) both; }
  .booting .bigtype .op::after { animation:regB 1.8s var(--snap) both; }
  .booting .titleaside,.booting .specstrip{ animation:dropin .8s 1s var(--press) both; }
}
@keyframes regA{
  0%      { transform:translate(-5.4%,3.4%) rotate(-1.6deg); opacity:0; }
  2%,20%  { transform:translate(-5.4%,3.4%) rotate(-1.6deg); opacity:1; }
  23%,48% { transform:translate(2.6%,-1.7%) rotate(.75deg); }
  51%,74% { transform:translate(-1%,.8%) rotate(-.24deg); }
  78%,100%{ transform:translate(calc(var(--ax) * 1.8),calc(var(--ay) * 1.8)) rotate(0); }
}
@keyframes regB{
  0%      { transform:translate(4.6%,-2.8%) rotate(1.3deg); opacity:0; }
  4%,20%  { transform:translate(4.6%,-2.8%) rotate(1.3deg); opacity:1; }
  23%,48% { transform:translate(-2%,1.3%) rotate(-.55deg); }
  51%,74% { transform:translate(.7%,-.6%) rotate(.2deg); }
  78%,100%{ transform:translate(calc(var(--bx) * 1.8),calc(var(--by) * 1.8)) rotate(0); }
}
@keyframes dropin{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* the docket footer of the title plate: four printed fields, full measure */
.specstrip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:3px solid var(--ink-b);
  margin:clamp(26px,4.4vh,54px) 0 0;
}
.specstrip > div{
  padding:.85em clamp(10px,1.4vw,22px) 1.1em;
  border-left:1px solid rgba(0,120,191,.28);
}
.specstrip > div:first-child{ border-left:0; padding-left:0; }

/* two up */
@media (max-width:820px){
  .specstrip{ grid-template-columns:repeat(2,1fr); }
  .specstrip > div:nth-child(3){ border-left:0; padding-left:0; }
  .specstrip > div{ border-top:1px solid rgba(0,120,191,.28); }
  .specstrip > div:nth-child(-n+2){ border-top:0; }
}
/* one up — must come last, or the two-up rules above win on equal specificity */
@media (max-width:460px){
  .specstrip{ grid-template-columns:1fr; }
  .specstrip > div{ border-left:0; padding-left:0;
                    border-top:1px solid rgba(0,120,191,.28); }
  .specstrip > div:first-child{ border-top:0; }
}
.specstrip dt{ color:var(--ink-b-txt); margin:0 0 .4em; }
.specstrip dd{
  margin:0; font-variation-settings:"wdth" 92,"wght" 500;
  font-size:clamp(14px,.42vw + 12.4px,16.5px); line-height:1.32;
  letter-spacing:-.005em;
}

/* --- 5b. STATEMENT --------------------------------------------------------*/

.statement{
  font-size:clamp(21px,2vw + 11px,38px); line-height:1.28; letter-spacing:-.022em;
  font-variation-settings:"wdth" 100,"wght" 420; max-width:24ch; margin:0;
  font-family:"Fraunces",Georgia,serif;
}
.statement{ font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 1,"wght" 400; }
.statement em{
  font-style:normal; color:var(--overprint);
  font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 1,"wght" 800;
}
.colspan2{ columns:2; column-gap:clamp(24px,3.6vw,60px); max-width:74ch; }
.colspan2 p{ margin:0 0 1.05em; break-inside:avoid; }
.colspan2 strong{ font-variation-settings:"wdth" 100,"wght" 720; color:var(--overprint); }
@media (max-width:780px){ .colspan2{ columns:1; } }

/* --- 6. PROOF SHEET -------------------------------------------------------
   Three proofs pinned at three different heights, at three different widths.
   Deliberately not a three-up card grid. */

.proofsheet{
  display:grid;
  grid-template-columns:1.14fr .92fr 1.04fr;
  gap:0 clamp(20px,3.4vw,58px);
  align-items:start;
}
@media (max-width:940px){ .proofsheet{ grid-template-columns:1fr; gap:44px 0; } }

.specimen{
  display:block; text-decoration:none; color:inherit;
  border-top:3px solid var(--ink-b);
  padding:.85em 0 0; position:relative;
  transition:border-color .25s var(--press);
}
.specimen:nth-child(2){ margin-top:clamp(18px,3.8vw,68px); }
.specimen:nth-child(3){ margin-top:clamp(6px,1.6vw,26px); }
@media (max-width:940px){ .specimen{ margin-top:0 !important; } }
.specimen:hover{ border-top-color:var(--ink-a); }

.specimen__no{ display:inline-block; margin-bottom:1.1em; }
.specimen__art{ display:block; width:100%; height:auto; margin-bottom:1.15em; }
.specimen h3{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 48,"SOFT" 0,"WONK" 1,"wght" 780;
  font-size:clamp(1.3rem,1.85vw,1.78rem); line-height:1; letter-spacing:-.025em;
  margin:0 0 .5em;
}
.specimen:hover h3{ color:var(--overprint); }
.specimen > p{ margin:0 0 1.15em; font-size:.95em; max-width:34ch; }
.specimen ul{ list-style:none; margin:0; padding:0; color:var(--ink-b-txt);
              border-bottom:1px dotted rgba(0,97,155,.45); }
.specimen li{ padding:.3em 0; border-top:1px dotted rgba(0,97,155,.45); }
.specimen__go{
  display:block; margin-top:1.1em; color:var(--overprint);
  font-variation-settings:"wdth" 72,"wght" 700;
}
.specimen:hover .specimen__go{ background:var(--overprint); color:var(--paper); }

/* --- 7. TICKETS -----------------------------------------------------------*/

.ticket{ border:2.5px solid var(--ink-b); position:relative; background:var(--paper); }
.ticket__head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:.8em; padding:.62em clamp(14px,1.8vw,24px);
  background:var(--overprint); color:var(--paper);
}
/* a perforated tear-line under the head */
.ticket__perf{
  height:0; border-bottom:1px dashed rgba(0,120,191,.55);
  margin:0 clamp(14px,1.8vw,24px);
  position:relative;
}
.ticket__perf::before,.ticket__perf::after{
  content:""; position:absolute; top:-6px; width:12px; height:12px;
  border-radius:50%; background:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(0,120,191,.5);
}
.ticket__perf::before{ left:calc(-1 * clamp(14px,1.8vw,24px) - 6px); }
.ticket__perf::after { right:calc(-1 * clamp(14px,1.8vw,24px) - 6px); }

.ticket__body{ padding:clamp(20px,2.8vw,42px); }

.blankticket{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(22px,3.4vw,58px); align-items:start;
}
@media (max-width:860px){ .blankticket{ grid-template-columns:1fr; } }
.blankticket h3{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 100,"SOFT" 0,"WONK" 1,"wght" 820;
  font-size:clamp(1.85rem,4vw,3.3rem); line-height:.92; letter-spacing:-.03em;
  margin:0 0 .55em;
}
.blankticket p{ margin:0 0 1em; max-width:44ch; }

/* the unfilled fields — printed labels over empty rules */
.blankfields{ margin:0; }
.blankfields > div{ margin-bottom:1.5em; }
.blankfields > div:last-child{ margin-bottom:0; }
.blankfields dt{ color:var(--ink-b-txt); margin-bottom:.5em; }
.blankfields dd{
  margin:0 0 1.5em; height:0; border-bottom:1.5px solid rgba(0,120,191,.55);
}
.blankfields dd:last-child{ margin-bottom:0; }

.ticket__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1em clamp(16px,2.4vw,36px);
  padding:.9em clamp(20px,2.8vw,42px) 1.4em;
  border-top:1px dashed rgba(0,120,191,.5);
  color:var(--ink-b-txt);
}
.stamp{
  display:inline-block; transform:rotate(-5.5deg);
  border:2.5px solid var(--ink-a); color:var(--ink-a);
  padding:.45em .85em; margin:0;
  font-family:"Iosevka Term SS06",ui-monospace,monospace;
  font-size:clamp(11px,1vw,14px); letter-spacing:.24em; text-transform:uppercase;
  opacity:.92;
}

.btn{
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 78,"wght" 700;
  letter-spacing:.15em; text-transform:uppercase; font-size:12px;
  background:var(--overprint); color:var(--paper);
  border:0; border-radius:0; padding:1em 1.7em; cursor:pointer;
  text-decoration:none; display:inline-block;
  transition:background .18s var(--press), color .18s var(--press),
             transform .18s var(--snap);
}
.btn:hover{ background:var(--paper); color:var(--overprint);
             box-shadow:inset 0 0 0 2px var(--overprint); transform:translate(-1px,-2px); }
.btn--ghost{ background:transparent; color:var(--overprint);
             box-shadow:inset 0 0 0 2px var(--overprint); }
.btn--ghost:hover{ background:var(--overprint); color:var(--paper); }

/* --- 7b. SCHEMATIC --------------------------------------------------------*/

.schematic{ width:100%; height:auto; display:block; }
.stations{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2.2vw,38px); margin-top:clamp(12px,1.8vh,22px);
}
@media (max-width:780px){ .stations{ grid-template-columns:repeat(2,1fr); row-gap:26px; } }
@media (max-width:460px){ .stations{ grid-template-columns:1fr; } }
.station hr{ margin-bottom:.7em; }
.station h3{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 30,"SOFT" 0,"WONK" 1,"wght" 800;
  font-size:1.08rem; letter-spacing:-.012em; margin:.35em 0 .35em; text-transform:uppercase;
}
.station p{ margin:0; font-size:.9em; }
.station .mono{ color:var(--ink-b-txt); }

/* --- 8. SERVICES: INDEX + PROOF ------------------------------------------*/

.jobroom{
  display:grid; grid-template-columns:minmax(230px,27%) minmax(0,1fr);
  border-top:3px solid var(--ink-b); border-bottom:3px solid var(--ink-b);
}
@media (max-width:940px){ .jobroom{ grid-template-columns:1fr; } }

.index{ border-right:1px solid rgba(0,120,191,.34); }
@media (max-width:940px){
  .index{ border-right:0; border-bottom:1px solid rgba(0,120,191,.34); }
}
.index__item{
  display:flex; align-items:baseline; gap:.65em; width:100%; text-align:left;
  background:none; border:0; border-bottom:1px solid rgba(0,120,191,.24);
  padding:clamp(11px,1.35vw,18px) clamp(12px,1.5vw,20px);
  font:inherit; color:var(--ink-text); cursor:pointer;
  transition:background .18s var(--press), padding-left .26s var(--press);
}
.index__item:last-child{ border-bottom:0; }
.index__item:hover{ background:rgba(255,72,176,.16); }
.index__no{ color:var(--ink-b-txt); flex:0 0 auto;
            font-family:"Iosevka Term SS06",ui-monospace,monospace;
            font-size:10.5px; letter-spacing:.12em; }
.index__nm{ font-variation-settings:"wdth" 100,"wght" 560;
            font-size:clamp(15px,1vw,17.5px); letter-spacing:-.012em; }
.index__leader{ flex:1 1 auto; min-width:10px; height:1px; margin-bottom:.3em;
                border-bottom:1px dotted rgba(0,97,155,.6); }
.index__item[aria-selected="true"]{ background:var(--overprint); color:var(--paper); }
.index__item[aria-selected="true"] .index__no{ color:var(--paper); }
.index__item[aria-selected="true"] .index__leader{ border-bottom-color:var(--ink-a); }
.index__item[aria-selected="true"] .index__nm{ font-variation-settings:"wdth" 100,"wght" 700; }

.index__foot{
  padding:clamp(14px,1.7vw,22px);
  color:var(--ink-b-txt);
  border-top:1px dashed rgba(0,120,191,.45);
}
.index__foot p{ margin:0 0 .7em; }
.index__foot p:last-child{ margin:0; }
.index__foot a{ color:var(--overprint); text-decoration:none;
                border-bottom:1px solid rgba(0,34,132,.4); }
.index__foot a:hover{ background:var(--overprint); color:var(--paper); }

.proof{
  padding:clamp(20px,2.8vw,44px);
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr);
  gap:clamp(20px,3vw,48px); align-items:start;
}
.proof .chip{ margin-bottom:.4em; }
/* .proof sets display:grid, which outranks the UA rule for [hidden] */
.proof[hidden]{ display:none; }
@media (max-width:1120px){ .proof{ grid-template-columns:1fr; } }
/* without JS every plate is simply printed one after another */
.jobroom:not(.drawer-ready) .proof{ border-top:1px solid rgba(0,120,191,.3); }

.proof h3{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 100,"SOFT" 0,"WONK" 1,"wght" 820;
  font-size:clamp(1.9rem,4vw,3.4rem); line-height:.9; letter-spacing:-.032em;
  margin:.35em 0 .45em;
}
.proof__lede{ font-size:clamp(17px,.7vw + 13px,21px); line-height:1.42;
              max-width:44ch; margin:0 0 1.5em; }
.proof__art{ width:100%; height:auto; display:block; margin-bottom:1.2em; }

.speclist{ margin:0; }
.speclist dt{ color:var(--ink-b-txt); margin-top:1.3em;
              padding-bottom:.32em; border-bottom:1px solid rgba(0,120,191,.34); }
.speclist dt:first-child{ margin-top:0; }
.speclist dd{ margin:.6em 0 0; font-size:.95em; }
.speclist ul{ margin:0; padding:0; list-style:none; }
.speclist ul li{ padding-left:1.2em; position:relative; margin-bottom:.34em; }
.speclist ul li::before{ content:""; position:absolute; left:0; top:.58em;
                         width:7px; height:7px; background:var(--ink-a); }
.speclist ul.no li::before{ background:none; border-top:2px solid var(--ink-b);
                            width:9px; top:.72em; height:0; }

@media (prefers-reduced-motion:no-preference){
  .is-printing .proof__body{ animation:reprint .55s var(--press) both; }
  .is-printing .proof__art{  animation:reprintart .66s var(--press) both; }
}
@keyframes reprint{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes reprintart{ from{opacity:.15;clip-path:inset(0 0 100% 0)}
                       to{opacity:1;clip-path:inset(0 0 0 0)} }

/* --- 8b. THE ENQUIRY DOCKET ----------------------------------------------*/

.docketform{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.9vw,26px) clamp(18px,2.8vw,44px);
}
@media (max-width:720px){ .docketform{ grid-template-columns:1fr; } }
.field{ display:block; }
.field--wide{ grid-column:1 / -1; }
.field > span{ display:block; color:var(--ink-b-txt); margin-bottom:.4em; }
.field input,.field textarea,.field select{
  width:100%; font:inherit; color:var(--ink-text); background:transparent;
  border:0; border-bottom:1.5px solid rgba(0,120,191,.55);
  padding:.45em 0; border-radius:0;
}
.field textarea{ resize:vertical; min-height:5.4em; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0; border-bottom-color:var(--ink-a); border-bottom-width:2.5px;
}
.form__foot{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:1em; padding-top:.5em;
  border-top:1px dashed rgba(0,120,191,.5);
}

/* --- 9. COLOPHON ----------------------------------------------------------*/

main > section:last-child{ padding-bottom:clamp(18px,2.4vh,34px); }

.colophon{
  border-top:3px solid var(--ink-b);
  padding:clamp(28px,4.4vh,54px) 0 clamp(22px,3.4vh,40px);
  margin-top:clamp(34px,5.6vh,76px);
}
.colophon__grid{
  display:grid; grid-template-columns:1.7fr 1fr 1.25fr;
  gap:clamp(20px,3vw,52px); align-items:start;
}
@media (max-width:860px){ .colophon__grid{ grid-template-columns:1fr; row-gap:26px; } }
.colophon h4{ margin:0 0 .9em; color:var(--ink-b-txt); }
.colophon p{ margin:0 0 .7em; max-width:42ch; }
.colophon a{ color:var(--overprint); text-decoration:none;
             border-bottom:1px solid rgba(0,34,132,.4); }
.colophon a:hover{ background:var(--overprint); color:var(--paper); border-bottom-color:var(--overprint); }
.colophon ul{ list-style:none; margin:0; padding:0; }
.colophon li{ margin-bottom:.42em; }
.colophon__note{ text-transform:none; letter-spacing:.03em; line-height:1.8;
                 color:var(--ink-b-txt); }

.densitystrip{ display:flex; margin:clamp(20px,2.6vh,34px) 0 0; height:14px; }
.densitystrip i{ flex:1 1 0; }

/* --- 10. PRINT-IN ---------------------------------------------------------*/

/* The .js class is set by a one-line script in <head>. Without it these rules
   never apply, so a visitor with JavaScript off gets the content rather than a
   page of invisible sections waiting for an observer that will never run. */
@media (prefers-reduced-motion:no-preference){
  .js .pull{ opacity:0; transform:translateY(14px); }
  .js .pull.printed{
    opacity:1; transform:none;
    transition:opacity .6s var(--press), transform .66s var(--press);
    transition-delay:var(--d,0ms);
  }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important;
                        transition-duration:.001ms !important; }
}