@font-face{font-family:FieldSerif;src:url("assets/Serif-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:FieldMono;src:url("assets/SansMono.ttf") format("truetype");font-display:swap}
@font-face{font-family:FieldSans;src:url("assets/Sans.ttf") format("truetype");font-display:swap}

:root{
  --paper:#f4eddd;--plate:#eee3cc;--ink:#2b261f;--muted:#655c4f;--red:#a73528;--rule:#b4a58e;
  --fine:rgba(80,57,35,.23);--mono:FieldMono,monospace;--serif:FieldSerif,Georgia,serif;--sans:FieldSans,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-width:280px;color:var(--ink);background:var(--paper) url("assets/grain.svg");font-family:var(--sans)}
button,input{-webkit-tap-highlight-color:transparent}
button{color:inherit;font:inherit;cursor:pointer}
button:disabled{cursor:default}
button:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sheet{width:min(1200px,calc(100% - 88px));margin:auto}
.masthead{height:69px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);font:11px/1.12 var(--mono);letter-spacing:.11em}
.brand{display:flex;align-items:center;gap:10px}
.series b{color:var(--red);margin:0 .25em;font-weight:400}
.intro{margin:29px 0 25px}
.eyebrow{display:flex;align-items:center;gap:8px;color:var(--red);font:11px/1.4 var(--mono);letter-spacing:.15em}
.eyebrow span{width:16px;height:1px;background:currentColor}
h1{margin:8px 0 7px;font:700 clamp(40px,5.15vw,76px)/1.04 var(--serif);letter-spacing:-.065em}
.portrait-break{display:none}
.intro p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.plate{display:grid;grid-template-columns:minmax(0,1fr) clamp(215px,23%,267px);border:1px solid var(--rule);background:#eee3cd;box-shadow:0 8px 24px rgba(71,50,22,.06)}
.viewport{position:relative;height:clamp(340px,43vw,522px);isolation:isolate;perspective:1000px;overflow:hidden;touch-action:pan-y;background:radial-gradient(ellipse at 47% 44%,#f7edda 15%,#e9dcc2 100%)}
.viewport::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:url("assets/grain.svg");opacity:.78}
#scene,.still,.turn,#turn-image,.turn-shade{position:absolute;inset:0;width:100%;height:100%}
#scene,.still,#turn-image{display:block}
.still{object-fit:contain}
.turn{z-index:2;transform-origin:left center;backface-visibility:hidden;overflow:hidden;background:radial-gradient(ellipse at 47% 44%,#f7edda 15%,#e9dcc2 100%);box-shadow:15px 1px 34px #3620144d;pointer-events:none}
.turn-shade{background:linear-gradient(90deg,transparent 30%,#6c503136 76%,#fff6e496 97%,#5b382971);opacity:var(--fold-shade,0)}
.registration{position:absolute;width:10px;height:10px;border:solid #8a7760;z-index:3;pointer-events:none}
.top-left{top:13px;left:13px;border-width:1px 0 0 1px}
.top-right{top:13px;right:13px;border-width:1px 1px 0 0}
.bottom-left{bottom:13px;left:13px;border-width:0 0 1px 1px}
.bottom-right{bottom:13px;right:13px;border-width:0 1px 1px 0}
.plate-index,.scale{position:absolute;z-index:4;color:#6b5e4d;font:10px/1 var(--mono);letter-spacing:.1em;pointer-events:none}
.plate-index{top:20px;left:25px}
.scale{right:24px;bottom:19px;display:flex;align-items:center;gap:7px}
.scale span{width:21px;height:5px;border:solid currentColor;border-width:0 1px 1px}
.viewport noscript{position:absolute;top:48%;width:100%;text-align:center;padding:10px}
.annotation{border-left:1px solid var(--rule);display:flex;flex-direction:column;padding:21px 19px 17px;background:rgba(250,244,230,.45)}
.annotation-top{display:flex;align-items:center;justify-content:space-between;gap:5px}
.phase,.stage-count,.legend{font:10px/1.4 var(--mono);letter-spacing:.09em}
.phase{border:1px solid var(--red);padding:3px 6px;color:var(--red)}
.stage-count{color:var(--muted);white-space:nowrap}
.annotation-body{margin:auto 0}
.annotation h2{font:700 clamp(26px,3vw,43px)/1.03 var(--serif);letter-spacing:-.055em;margin:15px 0 11px}
.annotation p{font-size:13px;line-height:1.55;margin:0;color:var(--muted);max-width:31ch}
.legend{padding-top:13px;border-top:1px solid var(--fine);display:flex;align-items:center;gap:8px;color:var(--muted)}
.legend i{display:block;width:10px;height:8px;border-radius:1px;background:var(--red)}
.controls{margin-top:18px;border-top:1px solid var(--rule);padding-top:9px}
.control-top{display:flex;align-items:center;justify-content:space-between;min-height:38px}
.control-copy{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:13px;row-gap:4px}
.control-copy label{font:11px/1.2 var(--mono);letter-spacing:.11em}
.control-copy>span{color:var(--muted);font-size:11px}
.step-buttons{display:flex;gap:5px}
.step-buttons button{background:transparent;border:1px solid var(--rule);width:40px;height:34px;display:grid;place-items:center;padding:0}
.step-buttons button:not(:disabled):hover{color:var(--red);border-color:var(--red)}
.step-buttons button:disabled{opacity:.39}
.step-buttons svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:square}
.scrubber{position:relative;height:33px;display:grid;align-items:center;--percent:0%}
.track{position:absolute;left:9px;right:9px;height:2px;background:var(--rule);pointer-events:none}
.track-fill{height:100%;width:var(--percent);background:var(--red)}
#progress{appearance:none;-webkit-appearance:none;position:relative;width:100%;height:32px;margin:0;background:transparent;cursor:ew-resize;touch-action:pan-y}
#progress::-webkit-slider-runnable-track{height:2px;background:transparent}
#progress::-moz-range-track{height:2px;background:transparent}
#progress::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:2px solid var(--paper);border-radius:50%;background:var(--red);box-shadow:0 0 0 1px var(--red);margin-top:-8px}
#progress::-moz-range-thumb{box-sizing:border-box;width:18px;height:18px;border:2px solid var(--paper);border-radius:50%;background:var(--red);box-shadow:0 0 0 1px var(--red)}
.chapters{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));list-style:none;padding:0;margin:0;gap:3px}
.chapters button{display:block;text-align:left;min-height:42px;width:100%;border:0;border-top:1px solid var(--fine);background:transparent;padding:5px 0;color:var(--muted);font:10px/1.35 var(--mono)}
.chapters button span{display:block;font-size:9px;letter-spacing:.08em;margin-bottom:2px}
.chapters button:hover,.chapters button[aria-current]{color:var(--red)}
.chapters button[aria-current]{border-top-color:var(--red)}
.footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--rule);margin:18px 0 18px;padding-top:9px;color:var(--muted);font:9px/1.4 var(--mono);letter-spacing:.09em}
@media(max-width:760px){
  .sheet{width:calc(100% - 32px)}
  .masthead{height:56px}
  .intro{margin:23px 0 18px}
  h1{font-size:clamp(38px,9.6vw,64px)}
  .plate{grid-template-columns:1fr}
  .viewport{height:clamp(240px,67vw,404px)}
  .annotation{min-height:143px;border-left:0;border-top:1px solid var(--rule);padding:12px 13px 10px}
  .annotation h2{margin:6px 0 4px;font-size:clamp(25px,5.9vw,36px)}
  .annotation p{max-width:none;font-size:12px}
  .legend{margin-top:8px;padding-top:6px}
  .controls{margin-top:12px}
  .step-buttons button{height:40px}
  .chapters button{font-size:clamp(7px,2.1vw,10px);min-height:44px}
  .footer{margin:12px 0}
}
@media(max-width:560px){
  .portrait-break{display:initial}
}
@media(max-width:400px){
  .control-copy>span{display:none}
  .footer{font-size:7px}
}
.preview .sheet{width:calc(100% - 48px)}
.preview .intro{margin-top:27px;margin-bottom:22px}
.preview h1{font-size:clamp(42px,11.6vw,66px)}
.preview .viewport{height:clamp(285px,64vw,370px)}
.preview .annotation{min-height:152px}
.preview .footer{margin-top:18px}
@media(prefers-reduced-motion:reduce){.turn{display:none!important}}
@media(min-width:761px){
  .viewport{height:clamp(325px,min(43vw,calc(100svh - 430px)),522px)}
}