/* Almanac: a printed survey atlas. Warm stock, black ink, one vermilion overprint that is deliberately a hair out of register.
   Voice: IM Fell (old-style type with real ink spread) for display, its small caps for labels, Newsreader for reading. */
:root{
  --paper:#f1ebd9;--paper-hi:#f8f4e7;--ink:#1a1712;--muted:#5d5748;--soft:#d6ccb2;--red:#c3321f;--sea:#dce3da;--grat:#a7b3a9;
  --disp:'IM Fell English','Newsreader',Georgia,serif;--sc:'IM Fell English SC','IM Fell English',Georgia,serif;--body:'Newsreader',Georgia,serif;
}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.5;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--red);color:var(--paper-hi)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.app{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,44px)}

/* masthead */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;padding:22px 0 12px;border-bottom:1px solid var(--ink);box-shadow:0 4px 0 var(--paper),0 5px 0 var(--ink)}
.dateline{font:400 .95rem var(--sc);color:var(--muted);letter-spacing:.03em}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);font:400 clamp(2.6rem,5.6vw,4.2rem)/.9 var(--disp);font-style:italic;letter-spacing:-.01em}
.brand-mark{width:.5em;height:.5em;border:1.5px solid var(--ink);border-radius:50%;position:relative;flex:none}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;background:var(--ink)}.brand-mark::before{left:50%;top:-5px;bottom:-5px;width:1px}.brand-mark::after{top:50%;left:-5px;right:-5px;height:1px}
.chips{justify-self:end;flex-direction:column;gap:0;text-align:right;font:400 .95rem/1.3 var(--sc);color:var(--muted)}.chip b{color:var(--ink);font:500 1.15rem var(--body);margin-right:.35rem;font-variant-numeric:lining-nums}
.stage{padding:34px 0 90px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,4vw,64px);align-items:center;margin-bottom:46px}
.hero h1{font:400 clamp(2.8rem,6vw,5.4rem)/.96 var(--disp);letter-spacing:-.015em;margin:0 0 1.2rem;text-wrap:balance}
.hero h1 em{font-style:italic}
.lede{color:var(--muted);max-width:40ch;margin:0;font-size:1.12rem}
.visual-map{margin:0;background:var(--paper-hi);padding:12px;box-shadow:0 0 0 1px var(--ink),0 0 0 5px var(--paper-hi),0 0 0 6px var(--ink),6px 8px 0 -1px rgba(26,23,18,.1)}

/* the title-page globe */
.globe{margin:0;display:grid;gap:.6rem;justify-items:center}
.globe canvas{display:block;width:min(100%,520px);aspect-ratio:1;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.globe figcaption{width:min(100%,520px);display:grid;gap:.7rem}
.globe-info{min-height:5.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:.6rem 0}
.gi-empty{margin:0;font:italic 1.05rem var(--body);color:var(--muted)}
.gi-card{display:flex;align-items:center;gap:.9rem;min-width:0}.gi-flag{width:64px;height:auto;outline:1px solid var(--ink);outline-offset:3px;flex:none}
.gi-name{margin:0;font:400 1.7rem/1.05 var(--disp)}.gi-sub{margin:0;color:var(--muted);font-size:.92rem;line-height:1.35}
.gi-go{flex:none;font-size:.95rem;padding:.5rem .9rem}
.globe-tools{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.globe-hint{font:italic .9rem var(--body);color:var(--muted)}
/* maps */
.sphere{fill:var(--sea);stroke:var(--ink);stroke-width:1.1}
.grat{fill:none;stroke:var(--grat);stroke-width:.4}
.land{fill:var(--paper-hi);stroke:#4d4839;stroke-width:.3;stroke-linejoin:round}
.target{fill:var(--red);fill-opacity:.9;stroke:var(--red);stroke-width:.6;stroke-linejoin:round;mix-blend-mode:multiply;filter:drop-shadow(1.4px 1px 0 rgba(26,23,18,.5))}
.pin-ring{stroke:var(--red);stroke-width:1.6}.pin-dot{fill:var(--red)}
.micro-dot{r:calc(var(--u,1px)*6);fill:var(--red);stroke:var(--paper-hi);stroke-width:2;filter:drop-shadow(1.2px 1px 0 rgba(26,23,18,.55))}
.isle-outline{fill:none;stroke:var(--red);stroke-width:1.8;stroke-dasharray:6 4}
.c{stroke:#2a261d;stroke-width:.8;stroke-linejoin:round}
.c.found{fill:var(--red);fill-opacity:.88;mix-blend-mode:multiply}
.c.missed{fill:url(#hatch)}
.miss-dot{fill:var(--ink);stroke:var(--paper-hi);stroke-width:1}
.visual-map svg.map{display:block;width:100%;height:auto}
.zoom button{background:var(--paper-hi);border:1px solid var(--ink);color:var(--ink);font:400 1.15rem var(--sc);cursor:pointer;transition:background .15s,color .15s}
.zoom button:hover{background:var(--ink);color:var(--paper-hi)}.zoom-reset{font-size:.9rem!important;letter-spacing:.04em}
.zoom{top:22px;right:22px}
@media (prefers-reduced-motion:no-preference){.c.fresh{animation:inked .7s ease-out}@keyframes inked{from{fill-opacity:0;stroke-width:3}}}

/* setup: a form to fill in */
.setup{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(20px,4vw,64px);align-items:start}
.setup>fieldset{grid-column:2}.setup>.modes{grid-column:1;grid-row:1/span 6}.setup>.go-row{grid-column:1/-1}
fieldset{border:0;margin:0 0 26px;padding:0;min-width:0}
legend{font:400 1.15rem var(--sc);color:var(--red);padding:0 0 .35rem;margin-bottom:.8rem;width:100%;border-bottom:1px solid var(--ink);float:left}fieldset>*{clear:both}
.modes{display:grid;gap:0;align-content:start}.modes legend{margin-bottom:.4rem}
.mode-body,.deck-body{display:grid;grid-template-columns:22px 1fr;column-gap:14px;padding:.75rem 0 .9rem;border-bottom:1px dotted var(--ink)}
.mode-body::before,.deck-body::before,.region span::before,.toggle span::before{content:"";width:16px;height:16px;border:1.5px solid var(--ink);background:var(--paper-hi);margin-top:.3rem;grid-row:1/span 2;flex:none}
.mode-body::before{border-radius:50%}
.mode-title,.deck-title{font:400 1.7rem/1.1 var(--disp);letter-spacing:-.005em;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.mode-text,.deck-text{grid-column:2;color:var(--muted);font-size:.98rem;line-height:1.4;margin-top:.15rem}
.mode:hover .mode-title,.deck:hover .deck-title{transform:translateX(.35rem)}
.mode input:checked+.mode-body::before{background:radial-gradient(circle,var(--red) 0 4px,transparent 4.5px),var(--paper-hi)}
.deck input:checked+.deck-body::before,.region input[type=checkbox]:checked+span::before,.toggle input:checked+span::before{background:linear-gradient(45deg,transparent 43%,var(--red) 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--red) 43% 57%,transparent 57%),var(--paper-hi)}
.decks{display:grid;align-content:start}.decks legend{margin-bottom:.2rem}.deck-icon{display:none}
.deck-body{padding:.55rem 0 .65rem}.deck-title{font-size:1.4rem}
.regions,.length{display:flex;flex-wrap:wrap;gap:.1rem 1.6rem;align-content:start}.regions legend,.length legend{margin-bottom:.7rem}
.region span,.toggle span{display:inline-flex;align-items:center;gap:.55rem;font:italic 400 1.15rem var(--body);color:var(--muted);padding:.15rem 0;transition:color .2s}
.region span::before,.toggle span::before{margin-top:0;grid-row:auto;width:14px;height:14px}
.region input[type=radio]+span::before{border-radius:50%}
.region input[type=radio]:checked+span::before{background:radial-gradient(circle,var(--red) 0 3.5px,transparent 4px),var(--paper-hi)}
.region:hover span,.region input:checked+span,.toggle:hover span,.toggle input:checked+span{color:var(--ink)}
.mode input:focus-visible+.mode-body,.deck input:focus-visible+.deck-body,.region input:focus-visible+span,.toggle input:focus-visible+span{outline:2px solid var(--red);outline-offset:3px}
.go-row{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:6px;padding-top:22px;border-top:1px solid var(--ink);box-shadow:0 -4px 0 var(--paper),0 -5px 0 var(--ink)}
.hint{margin:0;font:italic .95rem var(--body);color:var(--muted)}
.go{background:var(--ink);color:var(--paper-hi);border:0;border-radius:0;padding:.8rem 2.4rem;font:400 1.15rem var(--sc);letter-spacing:.06em;white-space:nowrap;transition:background .2s,transform .15s}
.go:hover:not(:disabled){background:var(--red)}.go:active:not(:disabled){transform:translateY(1px)}
.ghost{background:transparent;border:1px solid var(--ink);border-radius:0;padding:.65rem 1.3rem;font:400 1.05rem var(--sc);letter-spacing:.04em;color:var(--ink);transition:background .2s,color .2s}.ghost:hover{background:var(--ink);color:var(--paper-hi)}
.progress{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.stat{padding:14px 22px;border-left:1px solid var(--ink)}.stat:first-child{border-left:0;padding-left:0}.stat b{display:block;font:400 3.2rem/1 var(--disp);font-variant-numeric:lining-nums tabular-nums}.stat span{font:400 1rem var(--sc);color:var(--muted)}
.bar{grid-column:1/-1;height:5px;background:var(--soft);border-top:1px solid var(--ink)}.bar i{background:var(--ink)}.bar i.y{background:var(--red)}
.progress .ghost{grid-column:1/-1;justify-self:end;margin:10px 0;border:0;padding:.2rem 0;color:var(--muted);font-size:.95rem}.progress .ghost:hover{background:transparent;color:var(--red)}

/* play */
.play{display:grid;gap:16px;max-width:1100px;margin:0 auto}
.meter{display:flex;justify-content:space-between;flex-wrap:wrap;font:400 1.05rem var(--sc);color:var(--muted)}.meter-label{color:var(--red)}.meter-count{white-space:pre;font-variant-numeric:tabular-nums}
.meter-bar{flex-basis:100%;background:var(--soft);height:1px;margin-top:.7rem}.meter-bar i{height:3px;margin-top:-1px;background:var(--ink)}
.card{display:grid;grid-template-columns:minmax(0,2fr) minmax(290px,1fr);grid-template-areas:"vis prompt" "vis reveal" "vis act" "vis fb" "vis .";grid-template-rows:auto auto auto auto 1fr;gap:0 clamp(24px,4vw,56px)}
.card>.visual{grid-area:vis}.card>.prompt{grid-area:prompt}.card>.reveal{grid-area:reveal}.card>.actions,.card>.answer-form{grid-area:act}.card>.feedback{grid-area:fb}
.prompt{margin:0;display:flex;flex-direction:column;gap:.4rem;padding-bottom:1.1rem;border-bottom:1px solid var(--ink)}.deck-tag{font:400 1.05rem var(--sc);color:var(--red)}.prompt-text{font:400 clamp(1.8rem,3vw,2.5rem)/1.05 var(--disp)}
.visual-flag,.visual-name{background:var(--paper-hi);box-shadow:0 0 0 1px var(--ink),0 0 0 5px var(--paper-hi),0 0 0 6px var(--ink);padding:clamp(24px,5vw,60px);margin:0}
.visual-flag{display:flex;justify-content:center;align-items:center}.visual-flag img{max-width:480px;outline:1px solid var(--ink);outline-offset:6px;margin:6px}
.visual-name{display:flex;flex-direction:column;justify-content:center;gap:1.6rem;min-height:320px}.country-name{font:400 clamp(2.8rem,7vw,5.6rem)/.95 var(--disp);font-style:italic}
.visual-name .mini{width:100%;max-width:420px}img.flag.mini{width:96px;outline:1px solid var(--ink);outline-offset:4px}
.reveal{padding:1.1rem 0;border-bottom:1px solid var(--ink)}.answer-label{margin:0;font:400 1rem var(--sc);color:var(--muted)}
.answer{margin:.1rem 0;font:italic 400 clamp(2.1rem,4vw,3.2rem)/1.05 var(--disp);color:var(--red)}.answer-sub{margin:0;color:var(--muted);font-size:.98rem}
.actions{padding-top:1.1rem;display:grid;gap:12px;align-content:start}
.show{width:100%;background:var(--ink);color:var(--paper-hi);border:0;padding:.95rem;font:400 1.15rem var(--sc);letter-spacing:.05em;transition:background .2s}.show:hover{background:var(--red)}
kbd{font:400 .78rem var(--sc);border:1px solid currentColor;padding:0 .35rem;margin-left:.7rem;opacity:.7}
.rate{grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ink)}
.rate button{background:transparent;border:0;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:.75rem;gap:.05rem;transition:background .2s,color .2s}
.rate button:nth-child(2n){border-right:0}.rate button:nth-child(n+3){border-bottom:0}.rate button:hover{background:var(--ink);color:var(--paper-hi)}.rate-again:hover{background:var(--red)!important}
.rate-ivl{font:400 .95rem var(--sc);opacity:.75}.rate-name{font:italic 400 1.35rem var(--disp)}.rate kbd{margin:0}
.leave{justify-self:start;border:0;background:transparent;color:var(--muted);font:400 1rem var(--sc);padding:.3rem 0;text-decoration:underline;text-underline-offset:4px}.leave:hover{color:var(--red);background:transparent}
.answer-form{padding-top:1.1rem;display:grid;gap:12px;align-content:start}
.answer-form input,.fill-form input{border:0;border-bottom:2px solid var(--ink);background:transparent;font:italic 400 1.8rem var(--disp);padding:.35rem 0;min-width:0;border-radius:0;color:var(--ink)}
.answer-form input:focus,.fill-form input:focus{outline:none;border-bottom-color:var(--red)}
.answer-form input::placeholder,.fill-form input::placeholder{color:#8d8574}
.answer-form .ghost{justify-self:start;border:0;padding:.2rem 0;color:var(--muted);font-size:.95rem}.answer-form .ghost:hover{background:transparent;color:var(--red)}
.verdict{margin:0;font:400 1.05rem var(--sc)}.card[data-state=wrong] .verdict{color:var(--red)}.card[data-state=wrong] .answer{color:var(--ink)}
.feedback{padding-top:1.1rem;display:grid;gap:.2rem;align-content:start}.feedback .next{justify-self:start;margin-top:1rem}.flagrow{display:none}

/* fill the map */
.card-fill{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"vis vis" "bar found" "missed missed";grid-template-rows:auto;gap:26px clamp(24px,4vw,56px)}
.card-fill>.visual{grid-area:vis}.card-fill>.fill-bar{grid-area:bar}.card-fill>.found-list{grid-area:found}.card-fill>.missed-block{grid-area:missed}
.fill-bar{display:grid;gap:16px;align-content:start}
.fill-form{grid-template-columns:1fr auto;align-items:end;gap:1rem}.fill-form input{font-size:2rem}
.fill-form .go{padding:.7rem 1.4rem}
.fill-msg{margin:0;font:italic 1rem var(--body);color:var(--red)}
@media (prefers-reduced-motion:no-preference){.fill-msg.shake{animation:nudge .35s}@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}.found-list li.fresh{animation:fade 1.8s ease-out}@keyframes fade{from{color:var(--red)}}}
.found-list{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;align-content:flex-start;max-height:19rem;overflow:auto;padding:0 .5rem 0 0;scrollbar-color:var(--ink) transparent}
.found-list:empty::before{content:"Nothing named yet. Start anywhere.";font:italic 1.05rem var(--body);color:var(--muted)}
.found-list li{display:flex;align-items:baseline;gap:.5rem;font:400 1.3rem/1.35 var(--disp)}.found-list li img{align-self:center}.f-sub{font:italic .95rem var(--body);color:var(--muted)}
img.flag.tiny{width:24px;height:auto;outline:1px solid var(--ink)}
.result{display:grid;gap:.3rem}.result-score{margin:0;font:400 1.6rem var(--disp);color:var(--muted)}.result-score b{font:italic 400 4.6rem/1 var(--disp);color:var(--red);margin-right:.2em}.result-sub{margin:0;color:var(--muted)}
.missed-block h3{font:400 1.15rem var(--sc);color:var(--red);border-bottom:1px solid var(--ink);padding-bottom:.3rem;margin:0 0 .8rem}.missed-names li{font:400 1.15rem var(--disp)}

/* done */
.done{max-width:780px;margin:clamp(8px,4vw,40px) auto;display:grid;gap:1rem}
.done h2{font:italic 400 clamp(3.2rem,9vw,7rem)/.92 var(--disp);margin:0}.done h2 .big{color:var(--red)}.done h2 .of{font:400 .38em var(--disp);color:var(--muted);margin-left:.4em}
.done h3{font:400 1.15rem var(--sc);color:var(--red);margin:1.2rem 0 0;padding-bottom:.4rem;border-bottom:1px solid var(--ink)}
.done-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:.8rem}
.missed li{padding:.65rem 0;border-bottom:1px dotted var(--ink)}.m-q{font:400 .95rem var(--sc);color:var(--muted);width:6rem}.m-a{font:400 1.3rem var(--disp)}.m-g{margin-left:auto;font-style:italic;color:var(--red)}

@media (max-width:880px){
  .hero{grid-template-columns:1fr}.setup{grid-template-columns:1fr}.setup>fieldset,.setup>.modes{grid-column:1;grid-row:auto}
  .progress{grid-template-columns:1fr 1fr}.stat:nth-child(3){border-left:0;padding-left:0}
  .card,.card-fill{grid-template-columns:1fr}.card{grid-template-areas:"prompt" "vis" "reveal" "act" "fb";grid-template-rows:none}.prompt{margin-bottom:1rem}.card>.visual{margin-bottom:1.2rem}
  .card-fill{grid-template-areas:"vis" "bar" "found" "missed"}
  .top{grid-template-columns:1fr;justify-items:center;gap:.4rem}.chips{justify-self:center;flex-direction:row;gap:1.2rem}
}

.zoom-hint{margin:.55rem 0 0;font:italic .88rem var(--body);color:var(--muted)}
.card>.visual{align-self:start}

.globe-info:empty{border-color:transparent}

/* phones and touch */
body{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hint-touch{display:none}
@media (hover:none){kbd{display:none}.hint-desk{display:none}.hint-touch{display:inline}}
@media (pointer:coarse){.zoom button{min-width:44px;height:44px}.zoom{top:20px;right:20px}}
@media (max-width:880px){
  .app{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .stage{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .globe canvas{width:min(94%,380px)}
  .region span,.toggle span{padding:.6rem 0;min-height:44px}
  .regions,.length{gap:0 1.4rem}
  .deck-body{padding:.75rem 0}
  .ghost,.leave{min-height:44px}
  .go,.show{min-height:52px}
  /* Begin stays in reach while you scroll the form */
  .go-row{position:sticky;bottom:0;z-index:20;background:var(--paper);padding:12px 0 calc(12px + env(safe-area-inset-bottom));margin-top:0}
  /* reveal / rate buttons stay pinned to the bottom of the screen */
  .card>.actions{position:sticky;bottom:0;z-index:20;background:var(--paper);padding:12px 0 calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--ink)}
  .rate button{min-height:68px}
  .feedback .next{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom));z-index:20;min-height:52px;width:100%}
  .answer-form input,.fill-form input{font-size:1.7rem}
  /* fill the map: the map stays in view above the keyboard */
  .card-fill>.visual{position:sticky;top:8px;z-index:15}
  .found-list{max-height:none}
  .visual-map{padding:8px}
  .meter{font-size:1rem}
  .answer-form .ghost{min-height:44px}
  .done-actions .go,.done-actions .ghost{flex:1 1 140px}
}
@media (max-width:380px){.hero h1{font-size:2.6rem}.brand{font-size:2.4rem}}
@media (max-width:880px){.miss-dot{r:calc(var(--u,1px)*3.4)}}