/* =====================================================================
   THE VOLUMES. Each page is one of the books on the library shelf, opened.
   A page sets its book's shelf colour on <body class="vol" style="--cover:#...">
   and everything here takes its tone from that.
   Loaded after site.css, so it only adds to the site's own design system.
   Nothing here is sticky on a phone: iOS draws held sticky things a pixel or two
   off while you scroll (measured 5 Oct), so the contents rail pins on desktop only.
   ===================================================================== */
body.vol{
  --cover:#3E2A18;
  --cover-d:color-mix(in oklab,var(--cover) 58%,#0b0908);
  --cover-dd:color-mix(in oklab,var(--cover) 34%,#070605);
  --cover-l:color-mix(in oklab,var(--cover) 22%,var(--paper));
  --cover-ink:color-mix(in oklab,var(--cover) 70%,var(--ink));
  --vmax:1180px;
  background:var(--paper)}
body.vol main{display:block}

/* reading progress, on the bar */
body.vol .nav-prog{transform:scaleX(0)}

/* ---------------- the title page ---------------- */
.vh{position:relative;overflow:clip;color:var(--paper);isolation:isolate;
  background:
    radial-gradient(90% 70% at 78% 38%,color-mix(in oklab,var(--cover) 92%,#fff 6%) 0%,transparent 70%),
    linear-gradient(180deg,var(--cover-d) 0%,var(--cover-dd) 100%)}
.vh::after{content:"";position:absolute;inset:auto 0 0;height:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(7,6,5,.5))}
.vh-in{max-width:var(--vmax);margin-inline:auto;position:relative;
  padding:clamp(92px,11vw,140px) var(--pad) clamp(44px,6vw,84px);
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(20px,5vw,72px);align-items:center;
  min-height:min(100svh,940px)}
.vh-text{position:relative;z-index:2}
.vh-back{display:inline-flex;align-items:center;gap:10px;font-family:var(--label);font-weight:400;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--dust);margin-bottom:clamp(26px,4vw,48px);transition:color .25s;
  position:relative}
/* the link is a line of small caps (18px tall); the finger gets a 44px target without the text moving */
.vh-back::after{content:"";position:absolute;inset:-13px -8px}
@media (hover:hover) and (pointer:fine){ .vh-back:hover{color:var(--paper)} }
.vh-back::before{content:"";width:22px;height:1px;background:currentColor}
.vh-vol{display:flex;align-items:baseline;gap:14px;font-family:var(--label);font-weight:500;font-size:11px;
  letter-spacing:.32em;text-transform:uppercase;color:var(--gold-l)}
.vh-vol b{font-family:var(--display);font-weight:900;font-size:clamp(30px,3.6vw,46px);letter-spacing:.04em;color:var(--paper);
  line-height:1}
.vh-vol::after{content:"";flex:1;max-width:120px;height:1px;background:var(--line-p2);align-self:center}
.vh h1{font-size:clamp(50px,9.4vw,138px);line-height:.86;margin:.16em 0 .26em;max-width:9.5ch}
.vh h1 .west{color:var(--paper);padding-bottom:.2em}
.vh-stand{font-family:var(--body);font-style:italic;font-size:clamp(17px,1.9vw,22.5px);line-height:1.5;color:var(--paper-2);
  max-width:34ch}
.vh-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,3.4vw,40px);list-style:none}
.vh-meta li{font-family:var(--label);font-weight:400;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:7px 12px 6px;border:1px solid var(--line-p2);color:var(--paper-2);background:rgba(7,6,5,.18)}
.vh-meta li b{font-weight:600;color:var(--paper)}
.vh-art{position:relative;margin:0;justify-self:center;width:min(100%,520px);aspect-ratio:4/5}
.vh-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 60px rgba(0,0,0,.35))}
.vh-art figcaption{position:absolute;left:0;right:0;bottom:-6px;text-align:center;font-family:var(--label);font-weight:300;
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--dust)}
.vh-cue{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-family:var(--label);font-size:9.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--dust);display:flex;flex-direction:column;align-items:center;gap:8px}
.vh-cue::after{content:"";width:1px;height:28px;background:linear-gradient(var(--dust),transparent)}

/* The book opens: its cover, the same face as on the shelf, swings away on arrival.
   Pure CSS; without script it is never drawn, and reduced motion skips it. */
.vh-cover{display:none}
html.vjs .vh-cover{display:grid;place-items:center;position:absolute;inset:0;z-index:20;pointer-events:none;
  transform-origin:0 50%;backface-visibility:hidden;
  background:linear-gradient(155deg,var(--cover) 0%,color-mix(in oklab,var(--cover) 55%,#000) 125%);
  box-shadow:inset 18px 0 40px -18px rgba(0,0,0,.6);
  animation:vcover 1.15s cubic-bezier(.72,0,.24,1) .35s both}
html.vjs .vh-cover::before{content:"";position:absolute;inset:clamp(14px,2.2vw,26px);border:1px solid rgba(237,230,213,.3);
  outline:1px solid rgba(237,230,213,.12);outline-offset:-7px}
.vh-cover .c{text-align:center;color:var(--paper);padding:0 24px}
.vh-cover .c i{display:block;font-style:normal;font-family:var(--label);font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(237,230,213,.7);margin-bottom:22px}
.vh-cover .c b{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:1;
  font-size:clamp(34px,6vw,80px);letter-spacing:.01em}
.vh-cover .c svg{width:56px;margin:28px auto 0;color:rgba(237,230,213,.55);display:block}
@keyframes vcover{
  0%{transform:perspective(1800px) rotateY(0deg);opacity:1}
  70%{opacity:1}
  100%{transform:perspective(1800px) rotateY(-118deg);opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){ html.vjs .vh-cover{display:none} }

/* ---------------- contents and the short version ---------------- */
.vc{background:var(--paper);border-bottom:1px solid var(--line)}
.vc-in{max-width:var(--vmax);margin-inline:auto;padding:clamp(56px,8vw,112px) var(--pad);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,6vw,96px);align-items:start}
.v-label{display:flex;align-items:center;gap:12px;font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--cover-ink);margin-bottom:clamp(14px,2vw,22px)}
.v-label::after{content:"";flex:1;max-width:140px;height:1px;background:var(--line)}
.toc{list-style:none;border-top:1px solid var(--line-2)}
.toc a{display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;align-items:baseline;gap:14px;padding:15px 2px 14px;
  border-bottom:1px dotted var(--line-2);color:var(--ink);transition:background .25s,padding .3s}
/* mouse only: a tap leaves :hover stuck on a phone, which left the chapter you jumped to
   shifted 10px and shaded when you came back to the contents */
@media (hover:hover) and (pointer:fine){ .toc a:hover{background:rgba(20,18,16,.035);padding-left:10px} }
.toc .n{font-family:var(--west);font-size:clamp(18px,1.8vw,22px);color:var(--cover)}
.toc .t{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.1vw,25px);line-height:1.2}
.toc .d{font-family:var(--label);font-weight:400;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  text-align:right}

/* the short version: a field card, taped in */
.vshort{position:relative;background:
    repeating-linear-gradient(180deg,transparent 0 31px,rgba(42,51,72,.13) 31px 32px),
    linear-gradient(180deg,#F4EEDD,#ECE3CC);
  padding:clamp(30px,3.4vw,40px) clamp(22px,3vw,36px) clamp(22px,2.6vw,30px);transform:rotate(-1.1deg);
  box-shadow:0 1px 0 rgba(0,0,0,.05),0 18px 40px -18px rgba(20,18,16,.45);margin-top:8px}
.vshort::before{content:"";position:absolute;top:-13px;left:50%;width:110px;height:28px;transform:translateX(-50%) rotate(2deg);
  background:rgba(214,169,74,.32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.vshort h2{font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ember);
  margin-bottom:14px}
.vshort ol{list-style:none;counter-reset:s}
.vshort li{counter-increment:s;position:relative;padding:0 0 0 34px;margin:0 0 14px;font-size:clamp(15.5px,1.4vw,17px);
  line-height:1.6;color:var(--ink-2)}
.vshort li::before{content:counter(s);position:absolute;left:0;top:.05em;font-family:var(--west);font-size:19px;color:var(--cover)}
.vshort li:last-child{margin-bottom:0}
.vshort strong{color:var(--ink)}

/* ---------------- chapters ---------------- */
.vch{border-bottom:1px solid var(--line);position:relative}
.vch.alt{background:var(--paper-2)}
.vch.ink{background:var(--cover-dd);color:var(--paper-2);border-bottom-color:var(--line-p)}
.vch-in{max-width:var(--vmax);margin-inline:auto;padding:clamp(64px,9vw,124px) var(--pad)}
.vch-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2.6vw,32px);align-items:end;
  margin-bottom:clamp(26px,4vw,52px)}
.vch-num{font-family:var(--west);font-size:clamp(64px,10vw,140px);line-height:.78;color:var(--cover);
  text-shadow:0 1px 0 rgba(255,255,255,.25)}
.vch.ink .vch-num{color:var(--gold-l);text-shadow:none}
.vch-kick{display:block;font-family:var(--label);font-weight:500;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.vch.ink .vch-kick{color:var(--dust)}
.vch-head h2{font-size:clamp(32px,5.4vw,76px);line-height:.95}
.vch-head h2 .west{color:var(--ink);padding-bottom:.18em}
.vch.ink .vch-head h2 .west{color:var(--paper)}
.v-prose{max-width:66ch}
.v-prose p{font-size:clamp(16.5px,1.32vw,18px);line-height:1.78;color:var(--ink-2)}
.v-prose p + p{margin-top:1.05em}
.vch.ink .v-prose p{color:var(--paper-2)}
.v-prose em{color:var(--rust)}
.vch.ink .v-prose em{color:var(--gold-l)}
.v-prose strong{color:var(--ink);font-weight:600}
.vch.ink .v-prose strong{color:var(--paper)}
/* a book's opening letter */
.v-prose.drop > p:first-child::first-letter{font-family:var(--west);float:left;font-size:4.1em;line-height:.8;
  padding:.07em .12em 0 0;color:var(--cover)}
.vch.ink .v-prose.drop > p:first-child::first-letter{color:var(--gold-l)}
.v-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.v-split.wide-l{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.v-split.wide-r{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.v-block + .v-block,.v-split + .v-block,.v-block + .v-split,.v-split + .v-split,.v-prose + .v-block,.v-prose + .v-split{margin-top:clamp(40px,6vw,76px)}
.v-sub{font-family:var(--label);font-weight:500;font-size:clamp(12px,1.2vw,13.5px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--cover-ink);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.v-sub::after{content:"";flex:1;max-width:120px;height:1px;background:var(--line)}
.vch.ink .v-sub{color:var(--gold-l)}
.vch.ink .v-sub::after{background:var(--line-p)}

/* definitions, the site's dl, given more air */
.v-defs{border-top:1px solid var(--line-2)}
.v-defs > div{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:clamp(14px,3vw,40px);
  padding:clamp(16px,2vw,22px) 0;border-bottom:1px solid var(--line)}
.v-defs dt{font-family:var(--label);font-weight:500;font-size:clamp(12.5px,1.3vw,14px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);padding-top:.25em}
.v-defs dd{font-size:clamp(15.5px,1.25vw,16.8px);line-height:1.7;color:var(--muted)}
.v-defs dd em{color:var(--rust);font-style:italic}
.vch.ink .v-defs{border-top-color:var(--line-p2)}
.vch.ink .v-defs > div{border-bottom-color:var(--line-p)}
.vch.ink .v-defs dt{color:var(--paper)}
.vch.ink .v-defs dd{color:var(--dust)}
.vch.ink .v-defs dd em{color:var(--gold-l)}

/* cards */
.v-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(12px,1.6vw,20px)}
.v-card{position:relative;background:rgba(255,255,255,.34);border:1px solid var(--line);padding:clamp(20px,2.4vw,28px);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.vch.alt .v-card{background:rgba(255,255,255,.4)}
.vch.ink .v-card{background:rgba(237,230,213,.05);border-color:var(--line-p)}
.v-card .k{display:block;font-family:var(--west);font-size:28px;line-height:1;color:var(--cover);margin-bottom:12px}
.vch.ink .v-card .k{color:var(--gold-l)}
.v-card h3{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.8vw,22px);line-height:1.2;margin-bottom:8px;color:var(--ink)}
.vch.ink .v-card h3{color:var(--paper)}
.v-card p{font-size:15.2px;line-height:1.66;color:var(--muted)}
.vch.ink .v-card p{color:var(--dust)}
@media (hover:hover) and (pointer:fine){
  .v-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px -20px rgba(20,18,16,.45)}
}

/* big numbers */
.v-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2)}
.v-stats > div{padding:clamp(18px,2.4vw,28px) clamp(10px,1.6vw,20px);border-right:1px solid var(--line)}
.v-stats > div:last-child{border-right:0}
.v-stats b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(34px,4.4vw,58px);line-height:1;color:var(--ink);
  font-variant-numeric:lining-nums}
.v-stats b small{font-family:var(--label);font-weight:500;font-size:.32em;letter-spacing:.12em;margin-left:4px;color:var(--cover-ink)}
.v-stats > div > span{display:block;margin-top:10px;font-family:var(--label);font-weight:400;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
.vch.ink .v-stats{border-color:var(--line-p2)}
.vch.ink .v-stats > div{border-right-color:var(--line-p)}
.vch.ink .v-stats b{color:var(--paper)}
.vch.ink .v-stats b small{color:var(--gold-l)}
.vch.ink .v-stats > div > span{color:var(--dust)}

/* figures: diagrams drawn for the page */
.v-fig{margin:0}
.v-fig .fig-box{position:relative;background:#F3EDDE;border:1px solid var(--line);padding:clamp(14px,2.4vw,30px)}
.vch.alt .v-fig .fig-box{background:#F6F1E4}
.vch.ink .v-fig .fig-box{background:rgba(237,230,213,.04);border-color:var(--line-p)}
.v-fig svg{display:block;width:100%;height:auto;overflow:visible}
.v-fig figcaption{margin-top:12px;font-family:var(--label);font-weight:300;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);line-height:1.6}
.v-fig figcaption b{font-weight:600;color:var(--cover-ink);margin-right:8px}
.vch.ink .v-fig figcaption{color:var(--dust)}
.vch.ink .v-fig figcaption b{color:var(--gold-l)}
/* shared diagram strokes */
.fig .ln{fill:none;stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.fig .lt{fill:none;stroke:var(--muted-l);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.fig .tx{font-family:var(--label);font-size:13px;letter-spacing:.12em;text-transform:uppercase;fill:var(--ink)}
.fig .tx-s{font-family:var(--body);font-size:13px;fill:var(--muted)}
.fig .dot{fill:var(--ember)}
.fig .sil{fill:var(--ink-2)}
.vch.ink .fig .ln{stroke:var(--paper-2)}
.vch.ink .fig .tx{fill:var(--paper)}
.vch.ink .fig .tx-s{fill:var(--dust)}
.vch.ink .fig .sil{fill:rgba(237,230,213,.14)}

/* plates: real photographs, framed like a book's plates */
.v-plate{margin:0}
.v-plate .frame{position:relative;padding:clamp(8px,1.2vw,12px);background:#F7F2E5;border:1px solid var(--line-2);
  box-shadow:0 22px 44px -26px rgba(20,18,16,.55)}
.vch.ink .v-plate .frame{background:rgba(237,230,213,.08);border-color:var(--line-p2)}
.v-plate .frame::after{content:"";position:absolute;inset:clamp(8px,1.2vw,12px);border:1px solid rgba(20,18,16,.18);pointer-events:none}
/* The photo sits on its own layer, so its tone filter is applied by the compositor. Drawn into
   the page instead, that filter made each plate about ten times the work to paint (24ms against
   2ms at phone resolution, measured in WebKit), every time it scrolled in or settled. */
.v-plate img{width:100%;height:auto;display:block;filter:sepia(.08) saturate(.92);will-change:transform}
.v-plate figcaption{display:block;margin-top:12px;font-family:var(--body);font-style:italic;
  font-size:14px;line-height:1.5;color:var(--muted)}
.v-plate figcaption b{display:inline-block;margin-right:10px;font-style:normal;font-family:var(--label);font-weight:500;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cover-ink);white-space:nowrap}
.vch.ink .v-plate figcaption{color:var(--dust)}
.vch.ink .v-plate figcaption b{color:var(--gold-l)}
.v-plate.tilt-l{transform:rotate(-1.4deg)}
.v-plate.tilt-r{transform:rotate(1.2deg)}

/* callouts */
.v-note,.v-warn,.v-tip{position:relative;padding:clamp(20px,2.6vw,30px) clamp(20px,2.6vw,32px);border-left:3px solid var(--gold);
  background:rgba(185,139,46,.09)}
.v-note h3,.v-warn h3,.v-tip h3{font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cover-ink);margin-bottom:10px}
.v-note p,.v-warn p,.v-tip p{font-size:clamp(15.5px,1.3vw,17px);line-height:1.7;color:var(--ink-2)}
.v-note p + p,.v-warn p + p{margin-top:.8em}
.v-warn{border-left-color:var(--ember);background:rgba(169,61,20,.08)}
.v-warn h3{color:var(--ember)}
.v-tip{border-left:0;border-top:3px solid var(--cover);background:var(--cover-l);text-align:left}
.vch.ink .v-note,.vch.ink .v-warn{background:rgba(237,230,213,.06)}
.vch.ink .v-note p,.vch.ink .v-warn p{color:var(--paper-2)}
.vch.ink .v-note h3{color:var(--gold-l)}

/* pull quote */
.v-pull{font-family:var(--display);font-style:italic;font-weight:700;font-size:clamp(24px,3.2vw,40px);line-height:1.25;
  color:var(--ink);max-width:24ch;padding-left:clamp(18px,2.4vw,30px);border-left:2px solid var(--cover)}
.vch.ink .v-pull{color:var(--paper)}

/* numbered steps, with the line that ties them */
.v-steps{list-style:none;position:relative;counter-reset:st}
.v-steps > li{position:relative;counter-increment:st;display:grid;grid-template-columns:clamp(48px,6vw,72px) minmax(0,1fr);
  gap:clamp(14px,2.4vw,28px);padding-bottom:clamp(26px,3.4vw,40px)}
.v-steps > li::before{content:counter(st,decimal-leading-zero);font-family:var(--west);font-size:clamp(24px,2.6vw,32px);
  line-height:1;color:var(--cover);text-align:center;padding-top:.1em;background:var(--paper);position:relative;z-index:1;
  height:max-content;padding-bottom:6px}
.vch.alt .v-steps > li::before{background:var(--paper-2)}
.vch.ink .v-steps > li::before{background:var(--cover-dd);color:var(--gold-l)}
.v-steps > li::after{content:"";position:absolute;left:calc(clamp(48px,6vw,72px) / 2);top:.4em;bottom:0;width:1px;
  background:var(--line-2)}
.vch.ink .v-steps > li::after{background:var(--line-p2)}
.v-steps > li:last-child::after{display:none}
.v-steps h3{font-family:var(--display);font-weight:700;font-size:clamp(20px,2vw,25px);line-height:1.2;margin-bottom:8px}
.v-steps .when{display:inline-block;margin-bottom:10px;font-family:var(--label);font-weight:500;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ember);border:1px solid rgba(169,61,20,.35);padding:4px 9px 3px}
.v-steps p{font-size:clamp(15.5px,1.3vw,17px);line-height:1.72;color:var(--ink-2);max-width:62ch}
.v-steps p + p{margin-top:.8em}
.vch.ink .v-steps h3{color:var(--paper)}
.vch.ink .v-steps p{color:var(--paper-2)}

/* ledger table */
.v-table{width:100%;border-collapse:collapse;font-size:15px}
.v-table th{font-family:var(--label);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:0 14px 12px 0;border-bottom:2px solid var(--ink)}
.v-table td{padding:16px 14px 16px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6;color:var(--ink-2)}
.v-table td:first-child{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink)}

/* little status chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--label);font-weight:600;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;padding:5px 9px 4px;border:1px solid currentColor;line-height:1}
.chip.yes{color:#3E6B3A}
.chip.no{color:var(--ember)}
.chip.info{color:var(--cover-ink)}
.vch.ink .chip.yes{color:#9CC08F}
.vch.ink .chip.info{color:var(--gold-l)}

/* ---------------- the end of the book ---------------- */
.vend{background:var(--ink);color:var(--paper)}
.vend-in{max-width:var(--vmax);margin-inline:auto;padding:clamp(56px,8vw,110px) var(--pad) clamp(40px,6vw,70px)}
.vnext{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(18px,3vw,40px);
  padding:clamp(26px,4vw,48px);color:var(--paper);position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--next) 0%,color-mix(in oklab,var(--next) 55%,#000) 100%);
  box-shadow:inset 0 0 0 1px rgba(237,230,213,.14);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.vnext::before{content:"";position:absolute;inset:10px;border:1px solid rgba(237,230,213,.18);pointer-events:none}
.vnext i{display:block;font-style:normal;font-family:var(--label);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(237,230,213,.7);margin-bottom:10px}
.vnext b{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(30px,5vw,64px);
  line-height:.95}
.vnext span{display:block;margin-top:12px;font-style:italic;font-size:clamp(15px,1.4vw,18px);color:rgba(237,230,213,.8);max-width:46ch}
.vnext .arrow{font-family:var(--display);font-size:clamp(38px,5vw,64px);line-height:1;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){
  .vnext:hover{transform:translateY(-3px)}
  .vnext:hover .arrow{transform:translateX(8px)}
}
.vprev{display:inline-flex;gap:10px;align-items:baseline;margin-top:18px;font-family:var(--label);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dust);transition:color .25s;position:relative}
.vprev::after{content:"";position:absolute;inset:-13px -6px}
@media (hover:hover) and (pointer:fine){ .vprev:hover{color:var(--paper)} }
.vprev b{font-weight:500;color:var(--paper-2)}

/* the shelf, every spine */
.vshelf-wrap{margin-top:clamp(44px,6vw,72px)}
.vshelf{display:flex;align-items:flex-end;gap:5px;padding:24px 4px 0;overflow-x:auto;scrollbar-width:none;
  border-bottom:6px solid #2a211a;box-shadow:0 10px 18px -12px rgba(0,0,0,.8)}
.vshelf::-webkit-scrollbar{display:none}
.vshelf a{flex:0 0 auto;width:clamp(28px,3.3vw,40px);height:var(--h,170px);display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;font-family:var(--label);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(237,230,213,.86);border-radius:2px 2px 0 0;white-space:nowrap;overflow:hidden;
  background:linear-gradient(90deg,rgba(0,0,0,.32),rgba(0,0,0,0) 28%,rgba(255,255,255,.1) 48%,rgba(0,0,0,0) 70%,rgba(0,0,0,.36)),var(--c);
  box-shadow:inset 0 6px 0 -3px rgba(214,169,74,.35),inset 0 -6px 0 -3px rgba(214,169,74,.35);
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.vshelf a[aria-current="page"]{transform:translateY(-16px);color:var(--paper);outline:1px solid var(--gold-l);outline-offset:2px}
@media (hover:hover) and (pointer:fine){ .vshelf a:hover{transform:translateY(-10px)} }
.vshelf a:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}

/* credits for any outside image, at the very bottom */
.vcredits{max-width:var(--vmax);margin-inline:auto;padding:0 var(--pad) 28px;font-family:var(--label);font-weight:300;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-l)}
.vcredits a{text-decoration:underline;text-underline-offset:2px}

/* ---------------- reveal ---------------- */
html.vjs .rv{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
html.vjs .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ html.vjs .rv{opacity:1;transform:none;transition:none} }

/* ---------------- interactive pieces ---------------- */
.v-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.v-tabs button{appearance:none;cursor:pointer;font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;padding:9px 14px 8px;border:1px solid var(--line-2);background:transparent;color:var(--ink);
  transition:background .25s,color .25s,border-color .25s;position:relative}
/* 35px tall as drawn; the touch target reaches 44px into the gaps between tabs */
.v-tabs button::after{content:"";position:absolute;inset:-5px -3px}
.v-tabs button[aria-pressed="true"],.v-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.vch.ink .v-tabs button{border-color:var(--line-p2);color:var(--paper-2)}
.vch.ink .v-tabs button[aria-pressed="true"],.vch.ink .v-tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.v-tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.v-panel{min-height:5.5em}
.v-panel[hidden],[data-p][hidden]{display:none!important}
svg [hidden]{display:none}
.v-panel h3{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.2vw,28px);margin-bottom:8px}
.v-panel .meta{font-family:var(--label);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);margin-bottom:10px}
.v-panel p{font-size:clamp(15.5px,1.3vw,17px);line-height:1.72;color:var(--ink-2)}
.v-panel p + p{margin-top:.75em}
.vch.ink .v-panel p{color:var(--paper-2)}
.v-hot{cursor:pointer;transition:opacity .25s,fill .25s,stroke .25s}
.v-hot:focus{outline:none}
.v-hot:focus-visible{stroke:var(--gold);stroke-width:3}

/* ---------------- layout on narrower screens ---------------- */
@media (max-width:980px){
  .vh-in{grid-template-columns:1fr;min-height:0;padding-top:clamp(84px,14vw,120px);gap:6px}
  .vh-art{order:-1;width:min(78%,420px);margin-top:4px}
  .vh-text{text-align:left}
  .vc-in{grid-template-columns:1fr}
  .vshort{transform:rotate(-.6deg)}
  .v-split,.v-split.wide-l,.v-split.wide-r{grid-template-columns:1fr}
}
@media (max-width:640px){
  .vh h1{font-size:clamp(46px,14vw,74px)}
  .vh-cue{display:none}
  .toc a{grid-template-columns:2.2em minmax(0,1fr);gap:10px}
  .toc .d{display:none}
  .v-defs > div{grid-template-columns:1fr;gap:6px}
  .v-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v-stats > div:nth-child(2n){border-right:0}
  .v-stats > div:nth-child(n+3){border-top:1px solid var(--line)}
  .vch.ink .v-stats > div:nth-child(n+3){border-top-color:var(--line-p)}
  .vnext{grid-template-columns:1fr}
  .vnext .arrow{display:none}
  .v-table{font-size:14.5px}
  .v-table thead{display:none}
  .v-table tr{display:block;border-bottom:1px solid var(--line);padding:14px 0}
  .v-table td{display:block;border:0;padding:3px 0}
  .v-table td:first-child{font-size:19px;padding-bottom:6px}
  /* folded into cards on a phone, a cell can carry its column name: <td data-l="Penalty"> */
  .v-table td[data-l]::before{content:attr(data-l);display:block;margin-bottom:2px;font-family:var(--label);font-weight:500;font-size:10px;
    letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
}
@media print{
  .vh-cover,.vend,.vshelf-wrap,nav,.grain{display:none!important}
  .vh{background:#fff!important;color:#000!important}
}

/* behind the password the book waits closed, and opens when the gate does */
html.gated .vh-cover{animation-play-state:paused!important}

/* ---------------- figures with numbered pins and a key ----------------
   The drawing scales; the pins are placed by percentage over it but drawn at a
   fixed size, so they stay readable on a phone. Pin and key light each other. */
.v-pinfig{position:relative}
.v-pinfig .pins{position:absolute;inset:0;pointer-events:none}
.v-pinfig .pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:0;padding:0;
  font-family:var(--label);font-weight:600;font-size:13px;line-height:1;color:var(--paper);background:var(--ember);
  box-shadow:0 0 0 3px rgba(243,237,222,.9),0 4px 10px rgba(0,0,0,.3);transition:transform .25s,background .25s}
.v-pinfig .pin.alt{background:var(--ink-2)}
.v-pinfig .pin.on{transform:translate(-50%,-50%) scale(1.18);background:var(--gold)}
/* a tap leaves :hover on the last pin touched, so on a phone two pins stayed lit; only .on lights one there */
@media (hover:hover) and (pointer:fine){ .v-pinfig .pin:hover{transform:translate(-50%,-50%) scale(1.18);background:var(--gold)} }
/* drawn at 30px so they stay small on the figure, touched at 44px */
.v-pinfig .pin::after{content:"";position:absolute;inset:-7px;border-radius:50%}
.v-pinfig .pin:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.v-key{list-style:none;counter-reset:k;border-top:1px solid var(--line-2)}
.v-key li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:13px 6px 13px 0;border-bottom:1px solid var(--line);
  transition:background .25s}
.v-key li .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--ember);color:var(--paper);
  font-family:var(--label);font-weight:600;font-size:12px;margin-top:2px}
.v-key li .n.alt{background:var(--ink-2)}
.v-key li b{display:block;font-family:var(--label);font-weight:500;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);margin-bottom:3px}
.v-key li span{font-size:15px;line-height:1.6;color:var(--muted)}
.v-key li.on{background:rgba(185,139,46,.12)}
.vch.ink .v-key{border-top-color:var(--line-p2)}
.vch.ink .v-key li{border-bottom-color:var(--line-p)}
.vch.ink .v-key li b{color:var(--paper)}
.vch.ink .v-key li span{color:var(--dust)}
.vch.ink .v-key li.on{background:rgba(214,169,74,.1)}

/* =====================================================================
   THE FIELD TEST, THE LOGBOOK AND THE RANK
   Every volume ends with a short test. Pass it and the book is signed into your
   logbook (kept on this device), and your rank climbs through the old names for
   a fallow buck's age.
   ===================================================================== */
.vtest{background:var(--cover-dd);color:var(--paper-2);border-top:1px solid var(--line-p);position:relative;overflow:hidden}
.vtest::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(237,230,213,.9) 31px 32px)}
.vtest-in{position:relative;max-width:820px;margin-inline:auto;padding:clamp(64px,9vw,120px) var(--pad)}
.vtest .v-label{color:var(--gold-l)}
.vtest .v-label::after{background:var(--line-p)}
.vtest h2{font-size:clamp(34px,5.6vw,72px);line-height:.95;margin-bottom:12px}
.vtest h2 .west{color:var(--paper)}
.vtest .intro{color:var(--dust);font-size:clamp(15.5px,1.4vw,18px);max-width:52ch;margin-bottom:clamp(26px,4vw,40px)}
.vt-bar{display:flex;gap:6px;margin-bottom:22px}
.vt-bar i{flex:1;height:4px;background:rgba(237,230,213,.14);transition:background .35s}
.vt-bar i.ok{background:#8FB77F}
.vt-bar i.no{background:var(--ember)}
.vt-bar i.now{background:var(--gold-l)}
.vt-q{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.4vw,30px);line-height:1.3;color:var(--paper);
  margin-bottom:20px}
.vt-q small{display:block;font-family:var(--label);font-weight:500;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-l);margin-bottom:10px}
.vt-opts{display:grid;gap:10px}
.vt-opts button{appearance:none;cursor:pointer;text-align:left;font-family:var(--body);font-size:clamp(15.5px,1.4vw,17.5px);
  line-height:1.5;color:var(--paper-2);background:rgba(237,230,213,.05);border:1px solid var(--line-p2);
  padding:15px 18px 15px 52px;position:relative;transition:background .25s,border-color .25s,transform .2s}
.vt-opts button::before{content:attr(data-l);position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-p2);
  font-family:var(--label);font-weight:600;font-size:11px;color:var(--dust)}
@media (hover:hover) and (pointer:fine){ .vt-opts button:not([disabled]):hover{background:rgba(237,230,213,.1);border-color:var(--paper-2)} }
.vt-opts button:not([disabled]):active{transform:scale(.99)}
.vt-opts button:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
.vt-opts button[disabled]{cursor:default}
.vt-opts button.right{background:rgba(143,183,127,.16);border-color:#8FB77F;color:var(--paper)}
.vt-opts button.right::before{content:"\2713";background:#8FB77F;border-color:#8FB77F;color:#141210}
.vt-opts button.wrong{background:rgba(169,61,20,.16);border-color:var(--ember);color:var(--paper)}
.vt-opts button.wrong::before{content:"\2715";background:var(--ember);border-color:var(--ember);color:var(--paper)}
.vt-why{margin-top:18px;padding:16px 18px;border-left:3px solid var(--gold-l);background:rgba(237,230,213,.06);
  font-size:clamp(15px,1.3vw,16.5px);line-height:1.65;color:var(--paper-2)}
.vt-why b{color:var(--paper)}
.vt-next{margin-top:22px;appearance:none;cursor:pointer;font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:#141210;background:var(--gold-l);border:0;padding:14px 22px 13px;transition:background .25s}
@media (hover:hover) and (pointer:fine){ .vt-next:hover{background:var(--paper)} }
.vt-next:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.vt-done{text-align:center;padding-top:10px}
.vt-score{font-family:var(--display);font-weight:900;font-size:clamp(64px,10vw,120px);line-height:1;color:var(--paper)}
.vt-score small{font-size:.38em;color:var(--dust)}
.vt-verdict{font-family:var(--display);font-style:italic;font-size:clamp(20px,2.4vw,28px);color:var(--paper-2);margin:10px 0 24px}
/* the stamp that signs the book */
.vt-stamp{display:inline-grid;place-items:center;width:150px;height:150px;border-radius:50%;margin:6px auto 22px;
  border:3px double var(--gold-l);color:var(--gold-l);transform:rotate(-12deg) scale(.6);opacity:0;
  font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;line-height:1.4;
  box-shadow:inset 0 0 0 6px rgba(214,169,74,.12)}
.vt-stamp b{display:block;font-family:var(--west);font-weight:400;font-size:26px;letter-spacing:.02em;margin:2px 0}
.vt-stamp.go{animation:stamp .55s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes stamp{0%{transform:rotate(-12deg) scale(2.4);opacity:0}60%{opacity:1}100%{transform:rotate(-12deg) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){ .vt-stamp.go{animation:none;transform:rotate(-12deg);opacity:1} }
.vt-rank{max-width:560px;margin:0 auto;padding:20px 22px;border:1px solid var(--line-p2);background:rgba(237,230,213,.05)}
.vt-rank .now{font-family:var(--label);font-weight:500;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--dust)}
.vt-rank .name{display:block;font-family:var(--west);font-size:clamp(28px,3.6vw,40px);color:var(--paper);margin:6px 0 4px}
.vt-rank .what{font-style:italic;color:var(--dust);font-size:15px}
.vt-ladder{display:flex;gap:4px;margin-top:16px}
.vt-ladder i{flex:1;height:6px;background:rgba(237,230,213,.14)}
.vt-ladder i.on{background:var(--gold-l)}
.vt-again{margin-top:16px;appearance:none;cursor:pointer;background:none;border:0;border-bottom:1px solid currentColor;
  color:var(--dust);font-family:var(--label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:2px 0;position:relative}
.vt-again::after{content:"";position:absolute;inset:-14px -6px}
@media (hover:hover) and (pointer:fine){ .vt-again:hover{color:var(--paper)} }
/* signed, on the title page */
.vh-signed{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--label);font-weight:600;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:#141210;background:var(--gold-l);padding:7px 12px 6px}
.vh-signed[hidden]{display:none}
/* the shelf at the end shows which books are signed */
.vshelf a.signed{box-shadow:inset 0 6px 0 -3px var(--gold-l),inset 0 -6px 0 -3px var(--gold-l),inset 0 0 0 1px rgba(214,169,74,.45)}
.vshelf a.signed::after{content:"\2713";writing-mode:horizontal-tb;position:absolute;margin-top:-118px;font-size:10px;color:var(--gold-l)}
.vshelf a{position:relative}
.vlog{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:18px;font-family:var(--label);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dust)}
.vlog b{color:var(--gold-l);font-weight:600}

/* =====================================================================
   THE FIELD GAME (game.js)
   ===================================================================== */
/* the invitation at the end of a book */
.vgame{background:var(--ink);color:var(--paper-2);border-top:1px solid var(--line-p);overflow:hidden}
.vgame-in{max-width:var(--vmax);margin-inline:auto;padding:clamp(56px,8vw,104px) var(--pad);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(26px,5vw,72px);align-items:center}
.vgame-art{position:relative;width:clamp(150px,18vw,210px);aspect-ratio:3/4}
.vgame-art::before,.vgame-art::after,.vgame-art span{content:"";position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(160deg,#F3ECDB,#E2D6BC);box-shadow:0 18px 40px -16px rgba(0,0,0,.7);border:1px solid rgba(20,18,16,.2)}
.vgame-art::before{transform:rotate(-11deg) translate(-14px,6px);background:linear-gradient(160deg,#D9CBA9,#C9B88F)}
.vgame-art::after{transform:rotate(7deg) translate(12px,2px);background:linear-gradient(160deg,#E6DBC1,#D3C4A0)}
.vgame-art span{z-index:2;display:grid;place-items:center;font-family:var(--west);font-size:clamp(46px,5vw,64px);color:var(--cover);
  animation:vgfloat 4.5s ease-in-out infinite}
@keyframes vgfloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){ .vgame-art span{animation:none} }
.vgame .v-label{color:var(--gold-l)}
.vgame .v-label::after{background:var(--line-p)}
.vgame h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(34px,5vw,64px);line-height:.95;
  color:var(--paper);margin-bottom:12px}
.vgame p{color:var(--dust);font-size:clamp(15.5px,1.4vw,18px);max-width:50ch}
.vgame-best{margin-top:14px;font-family:var(--label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dust)}
.vgame-best b{color:var(--gold-l);font-size:14px}
.vgame-best i{font-style:normal;color:#9CC08F}
.vgame-play{margin-top:22px;appearance:none;cursor:pointer;font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.24em;
  text-transform:uppercase;color:#141210;background:var(--gold-l);border:0;padding:16px 26px 15px;display:inline-flex;gap:12px;align-items:center;
  box-shadow:0 10px 26px -10px rgba(214,169,74,.7);transition:transform .2s,background .2s}
@media (hover:hover) and (pointer:fine){ .vgame-play:hover{background:var(--paper);transform:translateY(-2px)} }
.vgame-play:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
@media (max-width:640px){ .vgame-in{grid-template-columns:1fr} .vgame-art{width:130px;margin:0 auto 6px} }

/* the game itself, full screen */
html.vg-open{overflow:hidden}
.vg{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;color:var(--paper-2);
  background:radial-gradient(120% 80% at 50% 0%,color-mix(in oklab,var(--cover) 70%,#000) 0%,#0c0a08 70%);
  padding:max(10px,env(safe-area-inset-top)) clamp(14px,4vw,40px) max(16px,env(safe-area-inset-bottom));
  -webkit-user-select:none;user-select:none;touch-action:manipulation}
.vg-top{display:flex;align-items:center;gap:10px;min-height:52px}
.vg-title{flex:1;min-width:0}
.vg-title span{display:block;font-family:var(--label);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-l)}
.vg-title b{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(16px,2vw,20px);color:var(--paper);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-snd,.vg-x{appearance:none;cursor:pointer;border:1px solid var(--line-p2);background:rgba(237,230,213,.06);color:var(--paper-2);
  font-family:var(--label);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:9px 11px 8px}
.vg-x{font-size:22px;line-height:1;padding:4px 12px 6px;letter-spacing:0}
.vg-snd:focus-visible,.vg-x:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
.vg-hud{margin:10px auto 0;width:min(100%,560px)}
.vg-hud[hidden]{display:none}
.vg-time{height:6px;background:rgba(237,230,213,.12);overflow:hidden;border-radius:3px}
.vg-time i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-l));transform-origin:left;border-radius:3px}
.vg.late .vg-time i{background:var(--ember);animation:vglate .5s ease-in-out infinite alternate}
@keyframes vglate{to{opacity:.55}}
.vg-nums{display:flex;justify-content:space-between;align-items:flex-end;margin-top:12px}
.vg-score b,.vg-streak b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(28px,4vw,40px);line-height:1;color:var(--paper);
  font-variant-numeric:tabular-nums}
.vg-score span,.vg-streak span{display:block;font-family:var(--label);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dust);margin-top:4px}
.vg-streak{text-align:right;position:relative}
.vg-mult{position:absolute;right:calc(100% + 10px);top:2px;font-style:normal;font-family:var(--label);font-weight:600;font-size:13px;
  letter-spacing:.06em;color:#141210;background:var(--gold-l);padding:4px 7px 3px;border-radius:3px}
.vg-mult:empty{display:none}
.vg.hot .vg-streak b{color:#FFB25C;text-shadow:0 0 18px rgba(255,140,40,.65)}
.vg.hot .vg-mult{background:#FF9A3D;box-shadow:0 0 16px rgba(255,140,40,.6);animation:vghot .6s ease-in-out infinite alternate}
@keyframes vghot{to{transform:scale(1.12)}}
.vg-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:0;padding:12px 0}
.vg-pop{position:fixed;left:50%;top:26%;transform:translate(-50%,0);font-family:var(--display);font-weight:900;font-size:clamp(28px,5vw,44px);
  color:var(--gold-l);opacity:0;pointer-events:none;text-shadow:0 4px 18px rgba(0,0,0,.5)}
.vg-pop.show{animation:vgpop .65s ease-out}
.vg-pop.lvl{color:#FFB25C}
@keyframes vgpop{0%{opacity:0;transform:translate(-50%,16px) scale(.8)}25%{opacity:1;transform:translate(-50%,0) scale(1.08)}100%{opacity:0;transform:translate(-50%,-34px) scale(1)}}
@media (prefers-reduced-motion:reduce){ .vg-pop.show{animation:none;opacity:0} }

/* the card */
.vg-card{--lean:0;position:relative;width:min(100%,420px);min-height:min(52vh,360px);display:flex;flex-direction:column;justify-content:center;
  gap:14px;padding:clamp(22px,4vw,34px);border-radius:14px;color:var(--ink);touch-action:pan-y;cursor:grab;
  background:repeating-linear-gradient(180deg,transparent 0 29px,rgba(42,51,72,.08) 29px 30px),linear-gradient(165deg,#F6F0E1,#E6DAC0);
  box-shadow:0 28px 60px -22px rgba(0,0,0,.8),0 0 0 1px rgba(20,18,16,.15);transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .32s}
.vg-card.drag{transition:none;cursor:grabbing}
.vg-card.in{animation:vgin .32s cubic-bezier(.2,.9,.3,1.2)}
@keyframes vgin{from{transform:translateY(26px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.vg-card.out{opacity:0}
.vg-card.miss{animation:vgshake .4s}
@keyframes vgshake{20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.vg-img{margin:-6px -6px 4px;border-radius:8px;overflow:hidden;background:#E9DFC9;display:grid;place-items:center;max-height:34vh}
.vg-img img{width:100%;height:100%;max-height:34vh;object-fit:contain;pointer-events:none}
.vg-t{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.8vw,29px);line-height:1.28;text-align:center;color:var(--ink);margin:auto 0}
.vg-hint{display:flex;justify-content:space-between;font-family:var(--label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.vg-stamp-l,.vg-stamp-r{position:absolute;top:22px;font-family:var(--label);font-weight:700;font-size:16px;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 10px;border:3px solid currentColor;border-radius:4px;opacity:0;pointer-events:none}
.vg-stamp-l{right:20px;color:var(--ember);transform:rotate(12deg);opacity:calc(var(--lean) * -1.4)}
.vg-stamp-r{left:20px;color:#3E7A38;transform:rotate(-12deg);opacity:calc(var(--lean) * 1.4)}
.vg-btns,.vg-opts{width:min(100%,420px);display:grid;gap:10px}
.vg-btns{grid-template-columns:1fr 1fr}
.vg-btns button,.vg-opts button{appearance:none;cursor:pointer;font-family:var(--label);font-weight:600;font-size:clamp(12px,1.4vw,14px);
  letter-spacing:.14em;text-transform:uppercase;padding:17px 12px 16px;border-radius:10px;border:1px solid var(--line-p2);
  background:rgba(237,230,213,.07);color:var(--paper);transition:transform .12s,background .2s}
.vg-btns button:active,.vg-opts button:active{transform:scale(.97)}
.vg-btns .vg-l{border-color:rgba(169,61,20,.6)}
.vg-btns .vg-r{border-color:rgba(110,160,100,.6)}
.vg-opts button{text-transform:none;letter-spacing:.02em;font-family:var(--body);font-weight:500;font-size:clamp(15px,1.6vw,17px);text-align:left}
.vg-opts button.right{background:rgba(110,160,100,.3);border-color:#8FB77F}
.vg-opts button.wrong{background:rgba(169,61,20,.3);border-color:var(--ember)}
.vg-btns button:focus-visible,.vg-opts button:focus-visible,.vg-go:focus-visible,.vg-ok:focus-visible,.vg-done:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
@media (hover:hover){ .vg-btns button:hover,.vg-opts button:hover{background:rgba(237,230,213,.14)} }
/* a miss turns the card over */
.vg-why{position:absolute;inset:0;border-radius:14px;padding:clamp(22px,4vw,32px);display:flex;flex-direction:column;justify-content:center;gap:12px;
  background:linear-gradient(165deg,#2B201A,#1A1410);color:var(--paper-2);animation:vgflip .45s cubic-bezier(.3,.8,.3,1)}
@keyframes vgflip{from{transform:perspective(900px) rotateY(-90deg);opacity:.2}to{transform:none;opacity:1}}
.vg-ans{font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#141210;background:var(--gold-l);
  align-self:flex-start;padding:6px 10px 5px;border-radius:3px}
.vg-why p{font-size:clamp(15.5px,1.6vw,17.5px);line-height:1.6}
.vg-ok,.vg-go,.vg-done{appearance:none;cursor:pointer;align-self:flex-start;font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.22em;
  text-transform:uppercase;border:0;padding:15px 22px 14px;border-radius:8px;color:#141210;background:var(--gold-l)}
.vg-done{background:transparent;color:var(--paper-2);border:1px solid var(--line-p2)}
/* the ready and end screens */
.vg-ready,.vg-end{width:min(100%,520px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;overflow-y:auto;max-height:100%}
.vg-kick{font-family:var(--label);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-l)}
.vg-ready h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(38px,8vw,64px);line-height:.95;color:var(--paper)}
.vg-ready p{color:var(--dust);font-size:clamp(15.5px,1.6vw,18px);max-width:40ch}
.vg-rules{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:4px 0}
.vg-rules li{font-family:var(--label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust);padding:7px 10px;
  border:1px solid var(--line-p2);border-radius:20px}
.vg-rules b{color:var(--paper);font-weight:600}
.vg-best{font-family:var(--label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dust)}
.vg-best b{color:var(--gold-l)}
.vg-ready .vg-go,.vg-end .vg-go{align-self:center;font-size:14px;padding:18px 40px 17px;margin-top:8px;box-shadow:0 12px 30px -10px rgba(214,169,74,.7)}
.vg-final{font-family:var(--display);font-weight:900;font-size:clamp(70px,16vw,128px);line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.vg-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-family:var(--label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust)}
.vg-stats b{color:var(--paper);font-weight:600}
.vg-togo{font-family:var(--label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dust);border:1px dashed var(--line-p2);padding:8px 12px}
.vg-mastered{font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#9CC08F}
.vg-end .vt-stamp{margin:6px auto 4px}
.vg-rank{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:1px solid var(--line-p2);width:100%}
.vg-rank span{font-family:var(--label);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--dust)}
.vg-rank b{font-family:var(--west);font-weight:400;font-size:26px;color:var(--paper)}
.vg-rank em{font-size:14px;color:var(--dust)}
.vg-learn{width:100%;text-align:left;margin-top:4px}
.vg-learn h3{font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-l);margin-bottom:6px}
.vg-learn ul{list-style:none}
.vg-learn li{padding:10px 0;border-top:1px solid var(--line-p)}
.vg-learn li b{display:block;font-family:var(--display);font-size:16px;color:var(--paper);margin-bottom:3px}
.vg-learn li span{font-size:14.5px;line-height:1.55;color:var(--dust)}
.vg-endbtns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.vg-endbtns .vg-go{margin-top:0}

/* coat morph cards (The Animal) */
.coats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.coat{background:rgba(255,255,255,.42);border:1px solid var(--line);padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:10px}
.coat-fig{display:block;width:100%;height:auto;max-height:220px;margin:0 auto 6px;filter:drop-shadow(0 10px 14px rgba(20,18,16,.18))}
.coat h3{font-family:var(--display);font-weight:700;font-size:clamp(20px,1.9vw,24px);color:var(--ink)}
.coat p{font-size:14.8px;line-height:1.6;color:var(--muted)}
@media (max-width:980px){ .coats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .coat-fig{max-height:150px} .coat p{font-size:14px} }

/* =====================================================================
   SHARED INTERACTIVE PIECES (vol.js). Any volume can use these by markup alone.
   ===================================================================== */
/* sliders, drawn the same everywhere */
.v-scrub input[type=range],.v-slider,.vg-dial input[type=range],.v-compare-ctl input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;margin:0;cursor:pointer}
.v-scrub input[type=range]::-webkit-slider-runnable-track,.v-slider::-webkit-slider-runnable-track,
.vg-dial input[type=range]::-webkit-slider-runnable-track,.v-compare-ctl input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:3px;background:linear-gradient(90deg,var(--cover) calc(var(--p,0) * 100%),var(--line-2) 0)}
/* The thumb is drawn as before, a 28px disc in a 3px paper ring, but its box is 44px tall, because
   on an iPhone a drag only starts when the finger lands inside the thumb's box. Transparent borders
   top and bottom make the room, the rounded corners (14/22) bring the padding box back to a circle,
   and the ring is the padding showing round the content box. drop-shadow 5px draws the same shadow
   box-shadow 10px did (WebKit halves a box-shadow's blur), only round the disc, not the taller box. */
.v-scrub input[type=range]::-webkit-slider-thumb,.v-slider::-webkit-slider-thumb,
.vg-dial input[type=range]::-webkit-slider-thumb,.v-compare-ctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:28px;height:44px;margin-top:-19px;padding:3px;border:solid transparent;border-width:8px 0;
  border-radius:14px/22px;background:linear-gradient(var(--cover),var(--cover)) content-box,var(--paper) padding-box;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))}
.v-scrub input[type=range]::-moz-range-track,.v-slider::-moz-range-track,.vg-dial input[type=range]::-moz-range-track,
.v-compare-ctl input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--line-2)}
.v-scrub input[type=range]::-moz-range-progress,.v-slider::-moz-range-progress{height:6px;border-radius:3px;background:var(--cover)}
.v-scrub input[type=range]::-moz-range-thumb,.v-slider::-moz-range-thumb,.vg-dial input[type=range]::-moz-range-thumb,
.v-compare-ctl input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--cover);border:3px solid var(--paper)}
.v-scrub input[type=range]:focus-visible,.v-slider:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.vch.ink .v-scrub input[type=range]::-webkit-slider-runnable-track,.vch.ink .v-slider::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--gold-l) calc(var(--p,0) * 100%),var(--line-p2) 0)}
.vch.ink .v-scrub input[type=range]::-webkit-slider-thumb,.vch.ink .v-slider::-webkit-slider-thumb{
  background:linear-gradient(var(--gold-l),var(--gold-l)) content-box,var(--cover-dd) padding-box}

/* scrubbers */
.v-scrub{position:relative}
.v-scrub [data-on]{transition:opacity .45s ease,transform .45s ease}
.v-scrub [data-on]:not(.on){opacity:0;pointer-events:none}
.v-scrub [data-on].dim:not(.on){opacity:.14}
.v-scrub-ctl{display:flex;align-items:center;gap:10px;margin-top:16px}
.v-scrub-ctl button{appearance:none;cursor:pointer;flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);
  background:transparent;color:var(--ink);font-family:var(--display);font-size:20px;line-height:1;display:grid;place-items:center;transition:background .2s}
@media (hover:hover) and (pointer:fine){ .v-scrub-ctl button:hover{background:rgba(20,18,16,.06)} }
.v-scrub-ctl button{position:relative}
.v-scrub-ctl button::after{content:"";position:absolute;inset:-2px;border-radius:50%}
.v-scrub-ctl output{flex:0 0 auto;min-width:4.5em;text-align:right;font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cover-ink)}
.v-scrub-ticks{display:flex;justify-content:space-between;gap:2px;margin-top:4px}
.v-scrub-ticks button{appearance:none;flex:1 1 0;min-width:0;background:none;border:0;cursor:pointer;padding:7px 0;font-family:var(--label);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .2s;position:relative}
/* the labels are 29px tall; the touch reaches 44px, down into the gap above the text, never up onto the slider */
.v-scrub-ticks button::after{content:"";position:absolute;inset:-3px 0 -12px}
/* while a finger drags the slider, each state lands at once instead of fading: the figure is
   redrawn once a step rather than every frame of a half-second fade it never finishes */
.v-scrub.scrubbing [data-on],.v-scrub.scrubbing [data-on] *,.v-scrub.scrubbing svg,.v-scrub.scrubbing svg *{transition:none!important}
.v-scrub-ticks button.on{color:var(--ink);font-weight:600}
.v-scrub-out{min-height:7em;margin-top:18px}
.v-scrub-out h3{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.2vw,27px);line-height:1.2;margin-bottom:8px;color:var(--ink)}
.v-scrub-out .meta{font-family:var(--label);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);margin-bottom:8px}
.v-scrub-out p{font-size:clamp(15.5px,1.3vw,17px);line-height:1.7;color:var(--ink-2);max-width:62ch}
.v-scrub-out p + p{margin-top:.7em}
.vch.ink .v-scrub-ctl button{border-color:var(--line-p2);color:var(--paper)}
.vch.ink .v-scrub-ticks button{color:var(--dust)}
.vch.ink .v-scrub-ticks button.on{color:var(--paper)}
.vch.ink .v-scrub-out h3{color:var(--paper)}
.vch.ink .v-scrub-out p{color:var(--paper-2)}
.vch.ink .v-scrub-ctl output{color:var(--gold-l)}
.v-scrub.playing .v-scrub-ctl input{pointer-events:auto}

/* flip cards */
.v-flips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(12px,1.6vw,18px)}
.v-flip{appearance:none;border:0;padding:0;margin:0;background:none;cursor:pointer;text-align:left;display:grid;perspective:1400px;
  color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}
/* each face hides itself halfway through the turn as well, so the flip reads right
   even where the browser draws a face's back */
.v-flip > span{grid-area:1/1;display:flex;flex-direction:column;gap:10px;min-height:190px;padding:clamp(20px,2.4vw,26px);border-radius:4px;
  transform:rotateY(0deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .7s cubic-bezier(.3,.7,.2,1),opacity 0s linear .25s}
.v-flip .b{opacity:0}
.v-flip.on .f{opacity:0}
.v-flip.on .b{opacity:1}
.v-flip .f{background:linear-gradient(165deg,#F7F1E2,#EADFC6);border:1px solid var(--line);box-shadow:0 14px 30px -18px rgba(20,18,16,.5)}
.v-flip .b{transform:rotateY(180deg);background:linear-gradient(165deg,var(--cover-d),var(--cover-dd));color:var(--paper-2);
  border:1px solid rgba(237,230,213,.14)}
.v-flip.on .f{transform:rotateY(-180deg)}
.v-flip.on .b{transform:rotateY(0)}
.v-flip i{font-style:normal;font-family:var(--label);font-weight:600;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ember)}
.v-flip .b i{color:var(--gold-l)}
.v-flip strong{display:block;font-family:var(--display);font-weight:700;font-size:clamp(19px,1.9vw,23px);line-height:1.25;color:var(--ink)}
.v-flip .b strong{color:var(--paper)}
.v-flip em{font-style:normal;font-size:15px;line-height:1.62;color:var(--muted)}
.v-flip .b em{color:var(--paper-2)}
.v-flip .f::after{content:"Tap to turn over";margin-top:auto;font-family:var(--label);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-l)}
.v-flip:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .v-flip > span{transition:none} }

/* checklists */
.v-check-bar{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-family:var(--label);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.v-check-bar b{color:var(--ink);font-weight:600}
.v-check-bar i{flex:1;height:4px;background:var(--line);overflow:hidden;border-radius:2px}
.v-check-bar s{display:block;height:100%;background:var(--cover);transform-origin:left;transform:scaleX(0);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.v-check-bar.done s{background:#3E7A38}
.v-check-bar button{appearance:none;background:none;border:0;border-bottom:1px solid currentColor;padding:1px 0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--muted);position:relative}
/* taller to the touch, but never reaching down onto the first item of the list (a stray tap there would clear it) */
.v-check-bar button::after{content:"";position:absolute;inset:-12px -8px -8px}
.v-check{list-style:none;border-top:1px solid var(--line-2)}
.v-check > li{position:relative;padding:13px 6px 13px 46px;border-bottom:1px solid var(--line);cursor:pointer;font-size:clamp(15.5px,1.3vw,16.8px);
  line-height:1.55;color:var(--ink-2);transition:background .2s,color .2s;-webkit-tap-highlight-color:transparent}
@media (hover:hover) and (pointer:fine){ .v-check > li:hover{background:rgba(20,18,16,.03)} }
.v-check > li::before{content:"";position:absolute;left:8px;top:13px;width:22px;height:22px;border:1.5px solid var(--ink-3);border-radius:5px;
  transition:background .2s,border-color .2s}
.v-check > li.on::before{background:var(--cover);border-color:var(--cover)}
.v-check > li.on::after{content:"";position:absolute;left:16px;top:16px;width:6px;height:12px;border:solid var(--paper);border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg)}
.v-check > li.on{color:var(--muted)}
.v-check > li small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.v-check > li:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.vch.ink .v-check{border-top-color:var(--line-p2)}
.vch.ink .v-check > li{border-bottom-color:var(--line-p);color:var(--paper-2)}
.vch.ink .v-check > li::before{border-color:var(--dust)}
.vch.ink .v-check > li.on::before{background:var(--gold-l);border-color:var(--gold-l)}
.vch.ink .v-check > li.on::after{border-color:var(--ink)}
.vch.ink .v-check-bar,.vch.ink .v-check-bar button{color:var(--dust)}
.vch.ink .v-check-bar b{color:var(--paper)}

/* comparison bars: <div class="v-bars rv"><div style="--v:.8"><b>Smell</b><i></i><span>300 m</span></div></div> */
.v-bars{display:grid;gap:12px}
.v-bars > div{display:grid;grid-template-columns:minmax(84px,150px) minmax(0,1fr) minmax(52px,auto);align-items:center;gap:12px}
.v-bars b{font-family:var(--label);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.v-bars i{display:block;height:14px;background:var(--line);position:relative;overflow:hidden;border-radius:2px}
.v-bars i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cover-ink),var(--cover));transform-origin:left;
  transform:scaleX(var(--v,0));transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.v-bars > div:nth-child(2) i::after{transition-delay:.08s}
.v-bars > div:nth-child(3) i::after{transition-delay:.16s}
.v-bars > div:nth-child(4) i::after{transition-delay:.24s}
.v-bars > div:nth-child(5) i::after{transition-delay:.32s}
html.vjs .v-bars.rv:not(.in) i::after,html.vjs .rv:not(.in) .v-bars i::after{transform:scaleX(0)}
.v-bars span{font-family:var(--label);font-size:12px;letter-spacing:.06em;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.vch.ink .v-bars b{color:var(--paper)}
.vch.ink .v-bars i{background:var(--line-p)}
.vch.ink .v-bars i::after{background:linear-gradient(90deg,var(--gold),var(--gold-l))}
.vch.ink .v-bars span{color:var(--dust)}

/* before and after */
.v-compare{position:relative;--x:50%;overflow:hidden;-webkit-user-select:none;user-select:none}
.v-compare > img,.v-compare > svg,.v-compare > .layer{display:block;width:100%;height:auto}
.v-compare > :nth-child(2){position:absolute;inset:0;height:100%;clip-path:inset(0 0 0 var(--x))}
.v-compare::after{content:"";position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--paper);
  box-shadow:0 0 0 1px rgba(20,18,16,.3);pointer-events:none}
.v-compare .lab{position:absolute;top:12px;z-index:2;font-family:var(--label);font-weight:600;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--paper);background:rgba(20,18,16,.6);padding:5px 9px 4px}
.v-compare .lab.l{left:12px}
.v-compare .lab.r{right:12px}
.v-compare-ctl{margin-top:10px}

/* accordions: <div class="v-acc"><details><summary>Question</summary><div>Answer</div></details></div> */
.v-acc{border-top:1px solid var(--line-2)}
.v-acc details{border-bottom:1px solid var(--line)}
.v-acc summary{list-style:none;cursor:pointer;position:relative;padding:17px 40px 17px 0;font-family:var(--display);font-weight:700;
  font-size:clamp(18px,1.8vw,21px);line-height:1.3;color:var(--ink)}
.v-acc summary::-webkit-details-marker{display:none}
.v-acc summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--label);font-weight:300;
  font-size:26px;line-height:1;color:var(--cover);transition:transform .3s}
.v-acc details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.v-acc summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.v-acc details > div{padding:0 0 20px;max-width:66ch}
.v-acc details > div p{font-size:clamp(15.5px,1.3vw,17px);line-height:1.72;color:var(--ink-2)}
.v-acc details > div p + p{margin-top:.7em}
.vch.ink .v-acc{border-top-color:var(--line-p2)}
.vch.ink .v-acc details{border-bottom-color:var(--line-p)}
.vch.ink .v-acc summary{color:var(--paper)}
.vch.ink .v-acc summary::after{color:var(--gold-l)}
.vch.ink .v-acc details > div p{color:var(--paper-2)}

/* lore: the fun fact, set like a museum label */
.v-lore{position:relative;padding:clamp(22px,2.8vw,32px) clamp(22px,2.8vw,32px) clamp(20px,2.4vw,26px);background:var(--ink);color:var(--paper-2);
  box-shadow:0 18px 40px -22px rgba(20,18,16,.7)}
.v-lore::before{content:"";position:absolute;inset:7px;border:1px solid rgba(214,169,74,.28);pointer-events:none}
.v-lore h3{display:flex;align-items:center;gap:12px;font-family:var(--west);font-weight:400;font-size:clamp(20px,2vw,24px);color:var(--gold-l);margin-bottom:10px}
.v-lore h3::after{content:"";flex:1;height:1px;background:rgba(214,169,74,.3)}
.v-lore p{font-size:clamp(15.5px,1.3vw,17px);line-height:1.7}
.v-lore p + p{margin-top:.7em}
.v-lore strong{color:var(--paper)}
.vch.ink .v-lore{background:rgba(237,230,213,.07)}

/* words with a meaning on tap */
.v-term{border-bottom:1px dotted currentColor;cursor:help;-webkit-tap-highlight-color:transparent}
.v-term:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.v-tipbox{position:fixed;z-index:9000;background:var(--ink);color:var(--paper-2);padding:12px 14px 13px;border-radius:6px;font-family:var(--body);
  font-size:14.5px;line-height:1.55;box-shadow:0 16px 34px -12px rgba(0,0,0,.6);border:1px solid rgba(214,169,74,.25)}
.v-tipbox b{display:block;font-family:var(--label);font-weight:600;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-l);margin-bottom:4px}
.v-tipbox[hidden]{display:none}

/* ---------------- on a touch screen ----------------
   Every control answers a tap at once: manipulation turns off double-tap zoom on it, so two quick
   taps on a scrubber's arrow are two steps, not a zoom. Controls that already show a pressed or
   chosen state lose iOS's grey tap flash, which only fought with it. A term is cursor:pointer to
   a touch screen, so iOS always treats a tap on it as a click. */
body.vol :is(button,a,summary,label,input,select,[role=button],.v-hot,.v-check > li){touch-action:manipulation}
body.vol :is(.v-tabs button,.v-scrub-ticks button,.v-scrub-ctl button,.v-pinfig .pin,.v-key li,.v-hot,.toc a,.vshelf a){-webkit-tap-highlight-color:transparent}
@media (hover:none){
  .v-term{cursor:pointer}
  .v-scrub-ctl button:active{background:rgba(20,18,16,.08)}
  .vch.ink .v-scrub-ctl button:active{background:rgba(237,230,213,.12)}
  .v-tabs button:active,.v-scrub-ticks button:active{opacity:.7}
  .toc a:active{background:rgba(20,18,16,.05)}
}

/* a figure that fills the width, for wide diagrams on a phone */
.v-wide{max-width:none}
.v-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}

/* =====================================================================
   THE FIELD GAME: the other kinds of card
   ===================================================================== */
.vg-stage{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain}
.vg-stage > :first-child{margin-top:auto}
.vg-stage > :last-child{margin-bottom:auto}
.vg-card.vg-wide{width:min(100%,560px)}
.vg-card[data-kind=tap],.vg-card[data-kind=order],.vg-card[data-kind=dial]{min-height:0;cursor:default;touch-action:manipulation;gap:12px}
.vg-t.vg-t-s{font-size:clamp(18px,2.3vw,23px);margin:0}
.vg-img svg{display:block;width:100%;height:auto;max-height:34vh}
.vg-img-s,.vg-img-s img,.vg-img-s svg{max-height:22vh}
.vg-fig{position:relative;width:100%;border-radius:8px;overflow:hidden;background:#EFE6D2;cursor:crosshair;touch-action:none;
  box-shadow:inset 0 0 0 1px rgba(20,18,16,.12)}
.vg-fig > svg:not(.vg-zones),.vg-fig > img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.vg-zones{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.vg-zones .z{fill:rgba(110,160,100,.24);stroke:#3E7A38;stroke-width:2.5;vector-effect:non-scaling-stroke}
.vg-zones .z.show{fill:rgba(214,169,74,.28);stroke:#B98B2E;stroke-dasharray:6 4;animation:vgz .8s ease-in-out infinite alternate}
.vg-zones .z.best{fill:none;stroke-dasharray:2 3}
@keyframes vgz{to{fill:rgba(214,169,74,.5)}}
.vg-hole{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle,#140f0c 0 32%,rgba(20,15,12,.55) 33% 52%,transparent 54%);box-shadow:0 0 0 2px rgba(247,241,226,.9),0 0 0 3px rgba(20,18,16,.4);
  animation:vghole .28s ease-out}
@keyframes vghole{from{transform:scale(2.4);opacity:0}to{transform:none;opacity:1}}
.vg-hint1{font-family:var(--label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center}
.vg-seq{list-style:none;display:grid;gap:6px;margin:0;padding:0}
.vg-seq li{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:10px;min-height:40px;padding:6px 10px;border-radius:8px;
  border:1px dashed rgba(20,18,16,.25);font-size:15px;line-height:1.35;color:var(--ink-2)}
.vg-seq li i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(20,18,16,.08);
  font-family:var(--label);font-weight:600;font-size:12px;color:var(--muted)}
.vg-seq li.done{border-style:solid;border-color:rgba(62,122,56,.5);background:rgba(110,160,100,.15);animation:vgslot .3s}
.vg-seq li.done i{background:#3E7A38;color:#fff}
.vg-seq li.shown{border-style:solid;border-color:rgba(185,139,46,.7);background:rgba(214,169,74,.16)}
@keyframes vgslot{from{transform:scale(.95)}to{transform:none}}
.vg-opts button i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-p2);
  font-family:var(--label);font-size:11px;margin-right:10px;color:var(--dust);vertical-align:1px}
.vg-ord button{padding-top:13px;padding-bottom:12px}
.vg-ord button.used{opacity:.28;pointer-events:none}
.vg-ord button.wrong{background:rgba(169,61,20,.3);border-color:var(--ember)}
.vg-dial{display:grid;gap:8px;padding-top:4px}
.vg-dial output{font-family:var(--display);font-weight:900;font-size:clamp(36px,7vw,52px);text-align:center;color:var(--ink);line-height:1}
.vg-dial output b{font-variant-numeric:tabular-nums}
.vg-dial input[type=range]{--p:.5;height:44px}
.vg-dial input[type=range]::-webkit-slider-runnable-track{height:8px;background:linear-gradient(90deg,#CDBE9C,#B9A47C)}
.vg-dial input[type=range]::-webkit-slider-thumb{width:34px;height:44px;margin-top:-18px;border-width:5px 0;border-radius:17px/22px}
.vg-scale{position:relative;display:flex;justify-content:space-between;font-family:var(--label);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.vg-scale .ans{position:absolute;top:-36px;width:4px;height:26px;margin-left:-2px;background:var(--gold);border-radius:2px;box-shadow:0 0 0 2px rgba(247,241,226,.9)}
.vg-scale .ans[hidden]{display:none}
.vg-btns.one{grid-template-columns:1fr}
.vg-lock{background:var(--gold-l)!important;color:#141210!important;border-color:var(--gold-l)!important}
.vg-card.good{box-shadow:0 0 0 3px #6FA866,0 28px 60px -22px rgba(0,0,0,.8)}
.vg-sheet{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;gap:10px;
  padding:22px clamp(18px,4vw,40px) max(22px,env(safe-area-inset-bottom));border-radius:16px 16px 0 0;
  background:linear-gradient(165deg,#2B201A,#1A1410);border-top:1px solid var(--line-p2);box-shadow:0 -24px 44px -10px rgba(0,0,0,.65);
  animation:vgsheet .38s cubic-bezier(.2,.8,.2,1)}
.vg-sheet-in{width:min(100%,560px);margin-inline:auto;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.vg-sheet p{font-size:clamp(15.5px,1.6vw,17px);line-height:1.6;color:var(--paper-2)}
@keyframes vgsheet{from{transform:translateY(100%)}to{transform:none}}
.vg-spark{position:fixed;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--gold-l);pointer-events:none;z-index:7;
  animation:vgspark .78s cubic-bezier(.15,.7,.3,1) forwards}
.vg-spark.hot{background:#FF9A3D;box-shadow:0 0 8px rgba(255,140,40,.8)}
@keyframes vgspark{from{transform:translate(0,0) scale(var(--s,1));opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.vg.hot .vg-card{box-shadow:0 0 0 2px rgba(255,154,61,.85),0 0 46px rgba(255,140,40,.32),0 28px 60px -22px rgba(0,0,0,.8)}
.vgame-kinds{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.vgame-kinds li{font-family:var(--label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust);
  border:1px solid var(--line-p2);padding:5px 10px 4px;border-radius:20px}
@media (max-width:640px){
  .vg-card{padding:18px}
  .vg-seq li{min-height:36px;font-size:14px}
  .vg-ord button{font-size:14.5px;padding:11px 12px 10px}
  .v-bars > div{grid-template-columns:minmax(76px,104px) minmax(0,1fr) minmax(44px,auto);gap:10px}
}