@font-face{font-family:'Special Elite';src:url(fonts/SpecialElite-Regular.woff2) format('woff2');font-display:swap}
@font-face{font-family:'STIX Two Text';src:url(fonts/STIXTwoText-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'STIX Two Text';src:url(fonts/STIXTwoText-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'STIX Two Text';src:url(fonts/STIXTwoText-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
:root{--paper:#fdf8e7;--ink:#1f1f1f;--soft:#5a5248;--red:#8a1c1c;--card:#fffaee;--rim:#e2c995;--rim2:#ecdcb6;
--tw:'Special Elite','American Typewriter','Courier New',monospace;--serif:'STIX Two Text',Georgia,serif;
--sans:'Avenir Next','Helvetica Neue',Helvetica,Arial,sans-serif;--g:16px;--shadow:0 1px 0 rgba(120,90,40,.10),0 6px 18px -6px rgba(110,80,30,.28)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.5 var(--serif)}
a{color:inherit}
.num{color:var(--red)}
.card{background:var(--card);border:1.5px solid var(--rim);border-radius:14px;box-shadow:var(--shadow)}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:8px;top:8px;z-index:50;background:#fff;padding:6px 10px;border-radius:6px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* home */
.home .hero{max-width:1160px;margin:0 auto;padding:44px var(--g) 8px;text-align:center}
.home h1{font:400 clamp(34px,9vw,58px)/1.05 var(--tw);margin:0;letter-spacing:.01em;text-wrap:balance}
.kicker{font:400 14px/1 var(--tw);letter-spacing:.32em;text-transform:uppercase;color:var(--red);margin:14px 0 0}
.lede{max-width:30em;margin:18px auto 0;color:var(--soft);font-size:17px;text-wrap:balance}
.home main{max-width:1160px;margin:0 auto;padding:28px var(--g) 24px}
.entries{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:640px){.entries{grid-template-columns:repeat(2,1fr);gap:26px}}
@media(min-width:1000px){.entries{grid-template-columns:repeat(3,1fr)}}
.entry{display:flex;flex-direction:column;gap:14px;height:100%;padding:16px 16px 18px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.entry:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(120,90,40,.10),0 12px 26px -8px rgba(110,80,30,.34)}
.et{font:400 21px/1.2 var(--tw);text-wrap:balance;display:block}
@supports(grid-template-rows:subgrid){@media(min-width:640px){
 .entries li{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
 .entry{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:16px;align-items:end}}}
.entry img{display:block;width:100%;height:auto;filter:drop-shadow(1px 2px 3px rgba(110,80,30,.28))}
.foot{text-align:center;color:var(--soft);font:400 14px/1.4 var(--sans);padding:12px var(--g) 36px}
.foot a{color:var(--red)}

/* case */
.bar{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px var(--g) 0;font:500 15px/1.2 var(--sans)}
.back{color:var(--red);text-decoration:none;padding:6px 0}.back:hover{text-decoration:underline}
.book{font-family:var(--tw);color:rgba(138,28,28,.7);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctitle{font:400 25px/1.15 var(--tw);margin:8px var(--g) 4px;text-align:center;text-wrap:balance}
.dock{position:sticky;top:0;z-index:5;background:var(--paper);display:flex;flex-direction:column;align-items:center;
  padding:4px var(--g) 10px;justify-content:flex-start;overflow:hidden}
.dock{box-shadow:0 7px 8px -7px rgba(110,80,30,.35)}
.mapbtn{border:0;background:none;padding:0;cursor:zoom-in;display:block;border-radius:8px}
.frame{position:relative;display:block;padding:18px}
.frame img{display:block;width:100%;height:auto;filter:drop-shadow(1px 2px 3px rgba(110,80,30,.3))}
.dock .frame{width:min(calc(100vw - 2 * var(--g)),calc((42svh - 66px) * var(--ratio) + 36px))}
.co{position:absolute;transform:translate(-50%,-50%);font:600 12px/1 var(--sans);color:#6b5a45;pointer-events:none}
.co.t{top:8px}.co.b{top:calc(100% - 8px)}.co.l{left:8px}.co.r{left:calc(100% - 8px)}
.hint-zoom{font:400 12px/1.3 var(--sans);color:#6b5a45;margin-top:0}
.sol{padding:10px var(--g) 0}
.intro{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;margin:0 0 12px}
.how{margin:0;color:var(--soft);font-size:15px;line-height:1.3;text-wrap:balance}
.reveal{white-space:nowrap;flex:none;border:1.5px solid var(--red);background:transparent;color:var(--red);font:500 15px/1 var(--sans);padding:10px 20px;border-radius:999px;cursor:pointer;min-height:40px}
.reveal:hover{background:var(--red);color:#fff}
.cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.step{padding:14px 12px 4px}
.sh{margin:0 4px 4px;font:400 16px/1.2 var(--tw);color:var(--red)}
.lines{list-style:none;margin:0;padding:0}
.lines li+li .line{border-top:1px dashed var(--rim2)}
.lines li.para{margin-top:8px}
.line{display:block;width:100%;text-align:left;background:none;border:0;padding:12px 6px;font:400 18px/1.5 var(--serif);cursor:pointer;border-radius:8px;min-height:44px}
.line .txt{display:block;transition:filter .25s ease,opacity .25s ease;filter:blur(5px);user-select:none;-webkit-user-select:none}
.line:not(.shown):hover{background:rgba(226,201,149,.18)}
.line.shown{cursor:text}.line.shown .txt{filter:none;opacity:1;user-select:text;-webkit-user-select:text}
.line.lead{font-weight:500}
.line.locked{cursor:default}.line.locked:hover{background:none}
.line.nudge{animation:nudge .6s ease}
@keyframes nudge{0%,100%{background:none}35%{background:rgba(226,201,149,.45)}}
.step{position:relative}
.eye{position:absolute;top:6px;right:6px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:10px;color:var(--red);cursor:pointer}
.eye:hover{background:rgba(226,201,149,.25)}
.eye.locked{color:var(--rim);cursor:default}.eye.locked:hover{background:none}
.eye.done{display:none}
.line b{font-weight:700}
.sq{font-family:var(--sans);font-size:.86em;font-weight:600;letter-spacing:.01em}
.answer{background:#fff6f0;border-color:#e2b9a6}
.answer .line{font-weight:700}
.answer li+li .line{border-top-color:#efd2c4}
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 6px}
.pn{display:flex;flex-direction:column;gap:4px;text-decoration:none;padding:10px 12px;border-radius:10px;border:1px solid var(--rim2)}
.pn:hover{background:rgba(226,201,149,.18)}
.pn.next{text-align:right}
.dir{font:500 13px/1 var(--sans);color:var(--soft)}
.pt{font:400 16px/1.2 var(--tw)}
dialog{border:1.5px solid var(--rim);border-radius:14px;background:var(--card);color:var(--ink);padding:22px 20px 18px;max-width:min(380px,calc(100vw - 32px));box-shadow:0 20px 50px -10px rgba(60,40,10,.45)}
dialog::backdrop{background:rgba(40,30,15,.45)}
#confirm p{margin:0 0 18px;font-size:19px;line-height:1.35;text-align:center}
.db{display:flex;gap:10px;justify-content:center}
.db button{font:500 16px/1 var(--sans);padding:12px 18px;border-radius:999px;cursor:pointer;min-height:44px}
.ghost{background:transparent;border:1.5px solid #b9ab8f}.go{background:var(--red);color:#fff;border:1.5px solid var(--red)}
dialog.zoom{max-width:none;width:100vw;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;padding:0;background:var(--paper)}
.zoom .zf{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:auto;padding:12px}
.zoom .frame{width:min(calc(100vw - 24px),calc((100dvh - 24px) * var(--ratio)))}
.zoom .co{font-size:13px}
.x{position:fixed;top:10px;right:10px;z-index:2;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--rim);background:var(--card);font:400 26px/1 var(--sans);cursor:pointer}
@media(min-width:900px){
 .case .layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:40px;max-width:1240px;margin:0 auto;padding:0 24px}
 .bar{grid-column:1/-1;padding:20px 0 0}
 .ctitle{grid-column:2;grid-row:2;text-align:left;margin:22px 0 4px;font-size:30px}
 .dock{grid-column:1;grid-row:2/4;top:0;height:100vh;padding:24px 0 24px;align-self:start;justify-content:flex-start}
 .dock{box-shadow:none}
 .dock .frame{width:min(100%,calc((100vh - 70px) * var(--ratio) + 36px))}
 .hint-zoom{margin-top:4px}
 .sol{grid-column:2;grid-row:3;padding:6px 0 0}
 .intro{flex-direction:row;justify-content:space-between;align-items:center;text-align:left;margin:4px 0 18px}
 .how{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.line .txt,.entry{transition:none}}