/* Shervoid interface layer.
   A broadside printed on old rag paper, read by candlelight on the far side of the glass.
   Fell for the printed voice, Blackletter for proclamations, Pencil for margin notes,
   Terminal for anything the market says. */

@font-face{font-family:Blackletter;src:url('./fonts/UnifrakturMaguntia-Book.woff2') format('woff2'),url('./fonts/UnifrakturMaguntia-Book.ttf') format('truetype');font-display:swap}
@font-face{font-family:Pencil;src:url('./fonts/ReenieBeanie.woff2') format('woff2'),url('./fonts/ReenieBeanie.ttf') format('truetype');font-display:swap}

:root{
  --sv-ink:#221a12;
  --sv-ink-soft:#4a3d2c;
  --sv-pencil:#56452f;
  --sv-paper:#e0cfa8;
  --sv-berry:#9e2a2b;
  --sv-verdigris:#3e6a57;
  --sv-candle:#e2ad5c;
  --sv-night:#120e0a;
  --sv-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  --sv-rag:var(--sv-grain),
    radial-gradient(130% 95% at 50% 42%,#0000 58%,#5a3510a6 100%),
    radial-gradient(38% 26% at 16% 18%,#7a4f1c24,#0000 70%),
    radial-gradient(30% 24% at 86% 80%,#6b44181f,#0000 70%),
    linear-gradient(174deg,#e9dab6,#dcc79c 58%,#d0b688);
  /* the dark sheet reads text over its grain: larger, sparser grains (C-026: fine grain crowded the text) */
  --sv-grain-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .34 -.13'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Shared: every window is a sheet in the room, not a web page ---------- */
#project-dialog,dialog.resident-card,#field-notes,#map-dialog,#settings-dialog,#menu-dialog{color:var(--sv-ink);border:0;border-radius:16px;background:var(--sv-rag);background-color:#dcc79c;box-shadow:0 34px 90px #000000b3,0 0 0 1px #3c280f59,inset 0 0 70px #5a37108c}
#residents-dialog{color:#ead8b2;border:0;border-radius:16px;background:var(--sv-grain-soft),radial-gradient(75% 45% at 50% 0,#e2ad5c33,#0000 70%),linear-gradient(#1d1610,#110d09);box-shadow:0 34px 90px #000000cc,0 0 0 1px #6b4a2266}
#project-dialog::backdrop,dialog.resident-card::backdrop,#field-notes::backdrop,#map-dialog::backdrop,#residents-dialog::backdrop,#settings-dialog::backdrop,#menu-dialog::backdrop{background:radial-gradient(70% 60% at 50% 38%,#3a220c66,#070504e6);backdrop-filter:blur(3px) sepia(.35)}
#project-dialog[open],dialog.resident-card[open],#field-notes[open],#map-dialog[open],#residents-dialog[open],#settings-dialog[open],#menu-dialog[open]{animation:sv-unfold .5s cubic-bezier(.16,1,.3,1)}
@keyframes sv-unfold{from{opacity:0;transform:translateY(16px) rotate(-.5deg) scale(.985);clip-path:inset(0 0 14% 0)}}
@media(prefers-reduced-motion:reduce){#project-dialog[open],dialog.resident-card[open],#field-notes[open],#map-dialog[open],#residents-dialog[open],#settings-dialog[open],#menu-dialog[open]{animation:sv-fade .2s linear}}
@keyframes sv-fade{from{opacity:0}}

#project-dialog h2,dialog.resident-card h2,#field-notes h2,#map-dialog h2,#residents-dialog h2,#settings-dialog h2{font:400 clamp(36px,4.6vw,54px)/1.02 Blackletter,Fell,Georgia,serif;letter-spacing:0;text-wrap:balance;margin:10px 0 16px}
#project-dialog p,#field-notes p,#map-dialog .atlas-intro,#residents-dialog>p,#settings-dialog p{font:19px/1.52 Fell,Georgia,serif;max-width:64ch;text-wrap:pretty}
#project-dialog a,#field-notes a,#residents-dialog a,#settings-dialog a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}
:is(#project-dialog,#field-notes,#map-dialog,#residents-dialog,#settings-dialog,#menu-dialog) .close-dialog{position:sticky;top:0;z-index:2;float:right;padding:7px 14px;border:0;border-radius:9px;background:var(--sv-ink);color:#ecdcb8;font:17px Fell,Georgia,serif;box-shadow:0 2px 0 #000000a6}
#residents-dialog .close-dialog{background:#e0cfa8;color:var(--sv-ink)}
:is(#project-dialog,dialog.resident-card,#field-notes,#map-dialog,#residents-dialog,#settings-dialog,#menu-dialog) :focus-visible{outline:2px solid var(--sv-berry);outline-offset:3px}

/* ---------- Story: a broadside with printer's flowers between its parts ---------- */
#project-dialog{max-width:700px;padding:44px clamp(22px,5vw,58px) 40px}
#project-dialog .project-kicker{display:flex;align-items:center;gap:14px;margin:30px 0 8px;font:italic 400 18px/1.3 Fell,Georgia,serif;letter-spacing:0;text-transform:none;color:var(--sv-berry)}
#project-dialog .project-kicker::before,#project-dialog .project-kicker::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#0000,#4a3d2c80,#0000)}
#project-dialog .project-kicker:first-of-type{margin-top:4px;color:var(--sv-ink-soft)}
#project-dialog h2{font-size:clamp(38px,5vw,56px);margin-top:4px}
#project-dialog h2::after{content:'❦';display:block;margin-top:10px;font:26px Fell,Georgia,serif;color:var(--sv-berry);text-align:center}
#project-dialog .token-state{margin:30px 0 22px;padding:18px 20px;border:3px double #4a3d2cb3;border-top:3px double #4a3d2cb3;background:#f0e2bf73;font:18px/1.5 Fell,Georgia,serif;color:var(--sv-ink)}
#project-dialog .project-kicker:last-of-type{display:block;font-size:16px;color:var(--sv-ink-soft)}
#project-dialog .project-kicker:last-of-type::before,#project-dialog .project-kicker:last-of-type::after{display:none}
/* Token, Lore, FAQ and About are pages of the same sheet (in the world a <section> each, on the reading pages the <main>):
   questions as small italic heads, places and rules as a quiet list, the plates of the Story framed on the paper */
#project-dialog>h3,#project-dialog>section>h3{margin:28px 0 6px;font:italic 400 22px/1.3 Fell,Georgia,serif;color:var(--sv-ink);text-wrap:balance}
#project-dialog .lore-list{max-width:64ch;margin:10px 0 0;padding-left:1.1em;font:17.5px/1.52 Fell,Georgia,serif}
#project-dialog .lore-list li{margin:0 0 8px;padding-left:.2em;text-wrap:pretty}
#project-dialog .lore-list li::marker{color:var(--sv-berry)}
#project-dialog .entry-token{margin:22px auto 8px}
#project-dialog .story-plate{margin:20px 0 26px}
#project-dialog .story-plate img{display:block;width:100%;height:auto;border:1px solid #3c280f73;box-shadow:0 0 0 5px #efe2c0,0 0 0 6px #3c280f40,0 12px 24px #2a1a0873;transform:rotate(-.4deg)}
#project-dialog .story-plate:nth-of-type(even) img{transform:rotate(.45deg)}
#project-dialog .story-plate figcaption{margin-top:12px;text-align:center;font:15px/1.3 Terminal,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--sv-ink-soft)}
#project-dialog .story-note{margin-top:28px;font:italic 16px/1.5 Fell,Georgia,serif;color:var(--sv-ink-soft)}
/* the way on to the next page, in the hand of the margins */
#project-dialog .read-next{margin:26px 0 0;text-align:right;font:27px/1.1 Pencil,cursive}
#project-dialog .read-next a{color:var(--sv-berry);text-decoration:none}
#project-dialog .read-next a:hover{text-decoration:underline;text-decoration-thickness:1px}

/* ---------- Full record: a proclamation nailed to the wall ---------- */
dialog.resident-card{--pad:clamp(20px,4vw,40px);border:0;border-top:0;padding:0 var(--pad) 34px}
dialog.resident-card .resident-card-tools{margin:0 calc(var(--pad)*-1);padding:12px var(--pad) 10px;background:#dccaa0;border-bottom:1px solid #4a3d2c40;box-shadow:0 8px 12px -10px #3a24098c}
dialog.resident-card .resident-card-tools span{font:italic 17px Fell,Georgia,serif;letter-spacing:0;text-transform:none;color:var(--sv-ink-soft)}
dialog.resident-card .resident-card-tools button{font:17px Fell,Georgia,serif;color:var(--sv-ink)}
dialog.resident-card .resident-card-heading{gap:clamp(18px,3vw,30px);margin:26px 0 22px}
dialog.resident-card .resident-card-heading img{width:150px;height:184px;border-radius:50%/46%;border:3px double #4a3d2c;padding:6px;background:#d2bd90;filter:sepia(.3) contrast(1.06) saturate(.85);box-shadow:0 8px 18px #2a1a0873}
dialog.resident-card .resident-card-heading>div::before{content:'Be it known';display:block;font:italic 18px Fell,Georgia,serif;color:var(--sv-berry)}
dialog.resident-card h2{font-family:Fell,Georgia,serif;font-size:clamp(36px,4.4vw,50px);letter-spacing:.02em;margin:2px 0 6px;overflow-wrap:normal}
dialog.resident-card .resident-card-ticker{display:inline-block;margin:0 0 4px;padding:1px 9px 0;border:2px solid currentColor;border-radius:3px;color:#8e2729;font:23px/1.1 Terminal,Consolas,monospace;letter-spacing:.06em;transform:rotate(-2deg);box-shadow:inset 0 0 0 2px #e0cfa8,inset 0 0 0 3px currentColor}
dialog.resident-card .resident-card-occupation{font:italic 19px/1.4 Fell,Georgia,serif;color:var(--sv-ink-soft)}
dialog.resident-card .resident-card-story{border-left:0;padding:0}
dialog.resident-card h3{margin:22px 0 4px;font:25px/1 Pencil,cursive;letter-spacing:0;text-transform:none;color:var(--sv-pencil);transform:rotate(-1.5deg);transform-origin:left}
dialog.resident-card h3 span{font:inherit;color:var(--sv-berry);margin-left:6px}
dialog.resident-card p{font:19px/1.52 Fell,Georgia,serif;color:var(--sv-ink)}
dialog.resident-card .resident-card-project{border-top:0;padding-top:4px}
dialog.resident-card .resident-card-project::before,dialog.resident-card .resident-card-market-link::before{content:'❦';display:block;text-align:center;font:22px Fell,Georgia,serif;color:#9e2a2bb3;margin:6px 0}
dialog.resident-card .resident-card-links a{font:17px Fell,Georgia,serif;color:var(--sv-ink)}
dialog.resident-card .resident-card-market-link{border-top:0;padding-top:0}
dialog.resident-card .resident-card-market-link a{padding:10px 22px;border:0;border-radius:40% 44% 42% 46%/60% 52% 58% 50%;background:radial-gradient(circle at 34% 28%,#c8514b,#8e2226 58%,#681519);color:#f7e6c6;font:19px Fell,Georgia,serif;box-shadow:inset 0 -3px 7px #0000005c,inset 0 2px 3px #ffffff29,0 4px 8px #3a14086b}
dialog.resident-card .resident-card-market-link a:hover{background:radial-gradient(circle at 34% 28%,#d25a53,#9a262a 58%,#6f171b)}
dialog.resident-card .resident-card-contract label{margin:22px 0 6px;font:25px/1 Pencil,cursive;letter-spacing:0;text-transform:none;color:var(--sv-pencil);transform:rotate(-1.5deg);transform-origin:left}
dialog.resident-card .resident-card-contract textarea{field-sizing:content;min-height:0;padding:10px 12px;margin-top:6px;border:1px dashed #4a3d2c99;border-radius:9px;background:#f1e4c26b;color:var(--sv-ink);font:21px/1.25 Terminal,Consolas,monospace}
dialog.resident-card .resident-card-copy{min-height:38px;margin-top:10px;padding:5px 14px;background:#e0cfa8;color:var(--sv-ink);font:17px Fell,Georgia,serif;text-decoration:none;box-shadow:0 2px 0 #3a2408a6;transform:rotate(-.6deg)}
dialog.resident-card .resident-card-small{font:italic 16px Fell,Georgia,serif;color:var(--sv-ink-soft)}

/* The market, seen through a small green screen set into the paper. */
dialog.resident-card .resident-card-chart .token-chart{position:relative;margin:22px 8px 6px;padding:16px 18px 12px;border:0;border-radius:10px/14px;background:radial-gradient(120% 90% at 50% 40%,#16221a,#0a0f0b);color:#a8d8a0;box-shadow:inset 0 0 38px #000000e6,0 0 0 7px #2b2117,0 0 0 8px #0000008c,0 12px 22px #2a18087a}
dialog.resident-card .resident-card-chart .token-chart::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(#0000 0 2px,#00000024 3px 3px);mix-blend-mode:multiply}
dialog.resident-card .token-chart h3{margin:0 0 2px;font:22px/1.1 Terminal,Consolas,monospace;color:#b9e6ad;transform:none;letter-spacing:.06em;text-transform:uppercase}
dialog.resident-card .token-chart .token-chart-note{margin:0 0 8px;font:17px/1.3 Terminal,Consolas,monospace;color:#8fbf88}
dialog.resident-card .token-chart .token-chart-reason{font:17px/1.3 Terminal,Consolas,monospace;color:#e6b37a}
dialog.resident-card .token-chart .token-chart-grid{stroke:#a8d8a0;stroke-opacity:.14}
dialog.resident-card .token-chart .token-chart-axis{fill:#8fbf88;font:15px Terminal,Consolas,monospace}
dialog.resident-card .token-chart .token-chart-up{stroke:#8fe39a;fill:#8fe39a;filter:drop-shadow(0 0 2px #8fe39a88)}
dialog.resident-card .token-chart .token-chart-down{stroke:#ef8a62;fill:#ef8a62;filter:drop-shadow(0 0 2px #ef8a6288)}
dialog.resident-card .token-chart .token-chart-load{border:1px solid #8fbf88;background:#0000;color:#b9e6ad;font:19px Terminal,Consolas,monospace}
dialog.resident-card .token-chart .token-chart-link{color:#b9e6ad;font:18px Terminal,Consolas,monospace}

/* ---------- Traces along the way: scraps pinned into a field journal ---------- */
#field-notes{max-width:700px;padding:40px clamp(20px,5vw,54px) 34px}
/* Settings: the same paper as the other windows, its choices as ruled lines with berry ticks */
#settings-dialog{max-width:560px;padding:34px clamp(20px,5vw,44px) 28px;color-scheme:light}
#settings-dialog>a{display:inline-block;margin-top:2px;font:18px/1.4 Fell,Georgia,serif}
#settings-dialog label{display:flex;gap:12px;align-items:center;margin:0;padding:11px 2px;border-bottom:1px solid #4a3d2c33;font:19px/1.35 Fell,Georgia,serif;cursor:pointer}
#settings-dialog input[type=checkbox]{flex:none;width:20px;height:20px;margin:0;accent-color:var(--sv-berry)}
#settings-dialog h2+label{border-top:1px solid #4a3d2c33;margin-top:6px}
#field-notes h2{margin-bottom:4px}
#field-notes h2+.note-pages::before{content:'things found on the way, kept here';display:block;margin:0 0 20px;font:25px/1.1 Pencil,cursive;color:var(--sv-pencil);transform:rotate(-1.5deg)}
#field-notes article{position:relative;margin:30px 6px;padding:20px 24px 16px;border:0;background:#f4e8c9b3;box-shadow:0 7px 16px #3a22084d,0 1px 0 #0000001a;transform:rotate(var(--tilt,-.7deg))}
#field-notes article:nth-child(even){--tilt:.9deg}
#field-notes article:nth-child(3n){--tilt:-1.4deg}
#field-notes article::before{content:'';position:absolute;top:-9px;left:calc(50% - 8px);width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e06a60,#861f22 70%);box-shadow:0 2px 3px #00000073}
#field-notes article h3{margin:0 0 6px;font:700 23px/1.2 Fell,Georgia,serif;color:var(--sv-ink)}
#field-notes article p{margin:0;font:18px/1.5 Fell,Georgia,serif}
#field-notes article.unfound{background:#0000;box-shadow:none;border:1.5px dashed #4a3d2c73;transform:rotate(var(--tilt,-.7deg)) scale(.98)}
#field-notes article.unfound::before{display:none}
#field-notes article.unfound h3{font:24px/1.1 Pencil,cursive;color:#6b5a41}
#field-notes article.unfound p{font:23px/1.2 Pencil,cursive;color:var(--sv-pencil)}
#field-notes .note-foot{font:italic 16px Fell,Georgia,serif;color:var(--sv-ink-soft)}
/* An easter egg: a line written for the mirror. Hover or focus holds it up to the glass. */
#field-notes .mirror-line{display:block;width:fit-content;margin:28px auto 6px;padding:6px 10px;font:24px/1.2 Pencil,cursive;color:#6b5a41;transform:scaleX(-1);transition:transform .6s cubic-bezier(.16,1,.3,1);cursor:help}
#field-notes .mirror-line:hover,#field-notes .mirror-line:focus-visible{transform:none;color:var(--sv-berry)}
@media(prefers-reduced-motion:reduce){#field-notes .mirror-line{transition:none}}

/* ---------- The atlas: inked by hand, with a pencilled guess ---------- */
#map-dialog{background:var(--sv-rag);background-color:#dcc79c}
#map-dialog .atlas-intro{font:italic 19px/1.5 Fell,Georgia,serif;color:var(--sv-ink-soft)}
#map-dialog .atlas-land{container-type:inline-size;background:var(--sv-grain),radial-gradient(90% 80% at 50% 45%,#e7d6ad,#c9ae7c);border:2px solid #4a3d2cb3;box-shadow:inset 0 0 50px #5a3710a6,0 10px 24px #3a22085c}
#map-dialog .atlas-coast{fill:#ead9b0;stroke:#4a3d2c;stroke-width:2.2}
#map-dialog .atlas-water{stroke:#5d8a7a;stroke-opacity:.5}
#map-dialog .atlas-riverbank{stroke:#3e6a57}
#map-dialog .atlas-river-name{font:italic 16px Fell,Georgia,serif;letter-spacing:.05em;fill:#2f5a4a}
#map-dialog .atlas-road{stroke:#2a1f14;stroke-width:2.4}
#map-dialog .atlas-road.future{stroke:#6b5a41;stroke-opacity:.6}
#map-dialog .atlas-region{font:italic clamp(12px,1.87cqw,16px) Fell,Georgia,serif;color:#5a4a33;letter-spacing:.02em}
#map-dialog .atlas-marks use{fill:#e2cf9f;stroke:#4a3d2c}
#map-dialog .atlas-compass{width:clamp(36px,6.1cqw,52px);color:var(--sv-ink-soft)}
#map-dialog .atlas-compass b{font:clamp(14px,2.34cqw,20px)/1 Blackletter,Fell,serif}
#map-dialog .atlas-land .atlas-compass svg{width:100%;height:auto;aspect-ratio:1;fill:#efe1bd}
#map-dialog .atlas-sea{font:italic clamp(11px,1.76cqw,15px) Fell,Georgia,serif;letter-spacing:.2em;color:#5a4a33b3}
#map-dialog .atlas-scale{font:clamp(14px,2.23cqw,19px)/1 Pencil,cursive;color:var(--sv-pencil)}
#map-dialog .atlas-location{--dot:clamp(22px,3.52cqw,30px);font:clamp(11px,1.64cqw,14px)/1.1 Fell,Georgia,serif;color:var(--sv-ink)}
#map-dialog .atlas-location:focus-visible{outline:0}
#map-dialog .atlas-location:focus-visible i{outline:2px solid var(--sv-berry);outline-offset:3px}
#map-dialog .atlas-location i{width:var(--dot);height:var(--dot);background:#efe1bd;border:1.5px solid var(--sv-ink);font:600 calc(var(--dot)*.43) Fell,Georgia,serif;color:var(--sv-ink);box-shadow:0 2px 4px #3a220866}
#map-dialog .atlas-location span{top:calc(var(--dot)/2 + 4px);max-width:clamp(84px,17.6cqw,150px);padding:3px 7px;background:#f1e4c4e6;box-shadow:0 3px 7px #3a22084d;transform:translateX(-50%) rotate(-1deg)}
#map-dialog .atlas-location.label-above span{top:auto;bottom:calc(var(--dot)/2 + 4px)}
#map-dialog .atlas-location:is(.label-left,.label-right) span{top:0;transform:translateY(-50%) rotate(-1deg)}
#map-dialog .atlas-location.label-left span{right:calc(var(--dot)/2 + 6px)}
#map-dialog .atlas-location.label-right span{left:calc(var(--dot)/2 + 6px)}
#map-dialog .atlas-location.aside i{font:calc(var(--dot)*.5)/1 Fell,Georgia,serif;box-shadow:0 0 0 3px #efe1bd,0 0 0 4.5px var(--sv-ink),0 2px 6px #3a220866}
#map-dialog .atlas-location.planned i{border:1.5px dashed #6b5a41;background:#e2d3ab99;color:#6b5a41}
#map-dialog .atlas-location.planned span{background:#0000;box-shadow:none;font:clamp(14px,2.23cqw,19px)/1 Pencil,cursive;color:#5a4a33}
#map-dialog .atlas-location.selected i{background:var(--sv-ink);color:#f1dfb4;box-shadow:0 0 0 5px #e2ad5c59,0 0 18px #e2ad5c80}
#map-dialog .atlas-location.selected span{background:#f7ecd0;color:var(--sv-ink)}
#map-dialog .atlas-detail small{font:23px/1 Pencil,cursive;letter-spacing:0;text-transform:none;color:var(--sv-pencil)}
#map-dialog .atlas-detail h3{font:34px/1.05 Blackletter,Fell,serif;letter-spacing:0}
#map-dialog .atlas-detail h4{font:700 18px/1.4 Fell,Georgia,serif}
#map-dialog .atlas-detail p{font:17px/1.55 Fell,Georgia,serif;color:var(--sv-ink)}
#map-dialog .atlas-connection{border-top:0;padding-top:4px}
#map-dialog .atlas-connection::before{content:'❦ ';color:var(--sv-berry)}
#map-dialog .atlas-visit{border:0;border-radius:40% 44% 42% 46%/60% 52% 58% 50%;background:radial-gradient(circle at 34% 28%,#c8514b,#8e2226 58%,#681519);color:#f7e6c6;font:18px Fell,Georgia,serif;padding:11px 22px;box-shadow:inset 0 -3px 7px #0000005c,0 4px 8px #3a14086b}
#map-dialog .atlas-legend{font:italic 16px Fell,Georgia,serif;color:var(--sv-ink-soft)}
#map-dialog .atlas-legend i{width:24px;height:24px;background:#efe1bd;border:1.5px solid var(--sv-ink);color:var(--sv-ink);font:600 11px/1 Fell,Georgia,serif}
#map-dialog .atlas-legend .aside{font-size:13px;box-shadow:0 0 0 2px #efe1bd,0 0 0 3.5px var(--sv-ink)}
#map-dialog .atlas-legend .unbuilt{border:1.5px dashed #6b5a41;background:#e2d3ab99;color:#6b5a41}
/* Phones: the land stretches taller than 10:7, so the drawn marks shrink toward their feet and the edge ones stay off */
@media(max-width:500px){#map-dialog .atlas-location{--dot:24px;font-size:12px}#map-dialog .atlas-location span{max-width:86px;padding:2px 5px}#map-dialog .atlas-location.planned span{font-size:16px}#map-dialog .atlas-marks defs>g{transform:scale(.72)}#map-dialog .atlas-location.aside:not(.selected) span{display:none}#map-dialog .atlas-marks .desk,#map-dialog :is(.atlas-sea,.atlas-scale){display:none}#map-dialog .atlas-compass{width:32px}#map-dialog .atlas-pond{rx:12px;ry:5px}#map-dialog .atlas-pond-ripple{rx:7px;ry:3px}}

/* ---------- Those who stayed: portraits on a dark wall, brass plates underneath ---------- */
#residents-dialog{max-width:1060px;padding:40px clamp(18px,4vw,48px) 44px}
#residents-dialog h2{color:#e8c47e;text-shadow:0 0 18px #e2ad5c4d,0 2px 0 #000}
#residents-dialog>p{color:#d8c49a;font-style:italic}
#residents-dialog>p a{display:inline-flex;align-items:center;min-height:40px;padding:4px 14px;background:linear-gradient(#caa564,#94723a);color:#24190b;font:17px Fell,Georgia,serif;text-decoration:none;box-shadow:0 2px 5px #000000b3,inset 0 1px 0 #fff3}
#residents-dialog .resident-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px 30px;margin-top:30px}
#residents-dialog .resident-list article{display:flex;flex-direction:column;align-items:center;gap:0;margin:0;text-align:center}
#residents-dialog .resident-list img{width:100%;max-width:260px;aspect-ratio:4/5;object-fit:cover;image-rendering:auto;border:12px solid #3a2a18;background:#2a2016;box-shadow:inset 0 0 0 2px #b48a4a,0 0 0 1px #0009,0 14px 28px #000000b3;filter:sepia(.22) contrast(1.05)}
#residents-dialog .resident-list article>div{display:flex;flex:1;flex-direction:column;align-items:center}
#residents-dialog .resident-list h3{position:relative;z-index:1;min-width:150px;margin:-16px 0 10px;padding:4px 16px 3px;text-align:center;text-transform:uppercase;background:linear-gradient(#d2ad68,#96743a);color:#23180a;font:23px/1.1 Fell,Georgia,serif;letter-spacing:.05em;box-shadow:0 3px 6px #000000b3,inset 0 1px 0 #ffffff40}
#residents-dialog .resident-list p{flex:1 0 auto;margin:0 0 12px;font:17px/1.5 Fell,Georgia,serif;color:#e6d4ae;max-width:34ch}
#residents-dialog .resident-list button,#residents-dialog .resident-list .resident-card-link{display:inline-flex;align-items:center;justify-content:center;width:min(100%,220px);min-height:38px;margin:4px 3px 0;padding:5px 12px;border:0;border-radius:9px;background:#e0cfa8;color:var(--sv-ink);font:16px Fell,Georgia,serif;box-shadow:0 2px 0 #000000b3;transform:rotate(-.6deg)}
#residents-dialog .resident-list button:hover,#residents-dialog .resident-list .resident-card-link:hover{background:#f0e1bd}
#residents-dialog .resident-list article>div>:is(button,.resident-card-link){flex:none}
/* Scrolled portraits pass under a band behind Close instead of under the button itself (Chrome: scroll-driven) */
@supports (animation-timeline:scroll()){#residents-dialog .close-dialog{clip-path:inset(-100vmax -100vmax -2px);animation:sv-close-band linear both;animation-timeline:scroll(nearest);animation-range:0 90px}}
@keyframes sv-close-band{from{box-shadow:0 2px 0 #000000a6,0 0 0 100vmax #1a140e00,0 1px 0 100vmax #6b4a2200}to{box-shadow:0 2px 0 #000000a6,0 0 0 100vmax #1a140e,0 1px 0 100vmax #6b4a2266}}
/* The long paper sheets on a wide screen do the same with a band of paper: the lines pass under it, not under Close (26.09).
   Phones have the band from the start (the phone block below). */
@supports (animation-timeline:scroll()){@media(min-width:651px){:is(#project-dialog,#field-notes) .close-dialog{clip-path:inset(-100vmax -100vmax -2px);animation:sv-close-paper linear both;animation-timeline:scroll(nearest);animation-range:0 60px}}}
@keyframes sv-close-paper{from{box-shadow:0 2px 0 #000000a6,0 0 0 100vmax #dcc79c00,0 1px 0 100vmax #4a3d2c00}to{box-shadow:0 2px 0 #000000a6,0 0 0 100vmax #dcc79c,0 1px 0 100vmax #4a3d2c40}}

@media(max-width:650px){
  #project-dialog,dialog.resident-card,#field-notes,#map-dialog,#residents-dialog{box-shadow:0 20px 50px #000000b3,inset 0 0 40px #5a37108c}
  #project-dialog p,#field-notes p{font-size:17.5px}
  dialog.resident-card .resident-card-heading img{width:108px;height:134px}
  #field-notes article{margin:26px 0;padding:18px 18px 14px}
    /* A conversation on a phone takes the footer's place, so the footer lines never run under the sheet */
  body:has(#resident-encounter:not([hidden])) .travel-footer{visibility:hidden}
  body #resident-encounter:not(.at-top){bottom:14px}
  #project-dialog,#field-notes,#residents-dialog{padding-top:14px}
  /* the sticky Close becomes a band across the sheet, so scrolled text passes under it, not beside it */
  :is(#project-dialog,#field-notes,#map-dialog,#residents-dialog,#settings-dialog) .close-dialog+*{clear:both}
  #project-dialog>section{clear:both}
  #project-dialog .read-next{font-size:24px}
  :is(#project-dialog,#field-notes,#map-dialog,#settings-dialog) .close-dialog{box-shadow:0 0 0 100vmax #dcc79c,0 1px 0 100vmax #4a3d2c40;clip-path:inset(-100vmax -100vmax -1px)}
  #residents-dialog .close-dialog{box-shadow:0 0 0 100vmax #1a140e,0 1px 0 100vmax #6b4a2266;clip-path:inset(-100vmax -100vmax -1px)}
}

/* ---------- The wanderer's name: a decoy under the blur, never the real name ---------- */
.secret-name{display:inline-block;margin:0 .15em;padding:.05em .35em;border:0;background:none;color:#131b14;font:inherit;font-family:Fell,Georgia,serif;font-size:1.35em;font-weight:700;letter-spacing:.06em;cursor:help;vertical-align:baseline}
.secret-name span{display:inline-block;filter:blur(3.6px);user-select:none;animation:secret-breath 5.5s ease-in-out infinite}
.secret-name:hover span,.secret-name:focus-visible span{filter:blur(3px)}
.secret-name:focus-visible{outline:2px solid #56683b;outline-offset:3px}
@keyframes secret-breath{50%{filter:blur(5px)}}
@media(prefers-reduced-motion:reduce){.secret-name span{animation:none}}

/* The note that answers a click on the name: a torn slip pinned to the glass. */
.name-note{margin:auto;max-width:min(360px,calc(100vw - 40px));padding:26px 26px 22px;border:0;color:#2a2217;background:
  radial-gradient(120% 90% at 0 0,#fbf3dc,#efe2bd 70%,#e3d2a6);box-shadow:0 18px 40px #0b120dcc,0 2px 0 #b9a676;transform:rotate(-1.2deg);clip-path:polygon(0 3%,6% 0,17% 2%,31% 0,46% 2%,60% 0,74% 2%,88% 0,100% 2%,100% 97%,92% 100%,79% 98%,64% 100%,50% 98%,35% 100%,21% 98%,8% 100%,0 98%)}
.name-note::backdrop{background:#0b120d80}
.name-note h3{margin:0 0 10px;font:21px/1.1 Terminal,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:#6b3a2a}
.name-note p{margin:0;font:19px/1.45 Fell,Georgia,serif}
.name-note .name-note-sign{display:block;margin-top:14px;text-align:right;font:26px/1 Pencil,cursive;color:#6d5f44}

/* ---------- The entrance: the story can be read without stepping in (the world is heavy on slow devices) ---------- */
.entry-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:14px;padding-top:12px;border-top:1px dashed #e9dcb84d;font:16px Fell,Georgia,serif}
.entry-pages::before{content:'Or read first:';font-style:italic;opacity:.78}
.entry-pages a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}

/* ---------- The named ticket: at the last place the blank ticket finally gets a name ---------- */
#ticket-dialog{max-width:760px;max-height:calc(100dvh - 24px);overflow:hidden;padding:0;color:var(--sv-ink);border:0;border-radius:16px;background:var(--sv-rag);background-color:#dcc79c;box-shadow:0 34px 90px #000000b3,0 0 0 1px #3c280f59,inset 0 0 70px #5a37108c}
#ticket-dialog::backdrop{background:radial-gradient(70% 60% at 50% 38%,#3a220c66,#070504e6);backdrop-filter:blur(3px) sepia(.35)}
#ticket-dialog[open]{display:flex;flex-direction:column;animation:sv-unfold .5s cubic-bezier(.16,1,.3,1)}
/* The title and Close stay put while the ticket scrolls under them (Sergey 24.09: Close lay over Print). */
.ticket-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px clamp(18px,4vw,44px) 12px;border-bottom:1px solid #4a3d2c33}
.ticket-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px clamp(18px,4vw,44px) 28px}
@media(prefers-reduced-motion:reduce){#ticket-dialog[open]{animation:sv-fade .2s linear}}
#ticket-dialog h2{font:400 clamp(30px,4.2vw,46px)/1.05 Blackletter,Fell,Georgia,serif;letter-spacing:0;margin:0}
#ticket-dialog p{font:18px/1.5 Fell,Georgia,serif;max-width:60ch}
#ticket-dialog .close-dialog{flex:none;padding:7px 14px;border:0;border-radius:9px;background:var(--sv-ink);color:#ecdcb8;font:17px Fell,Georgia,serif;box-shadow:0 2px 0 #000000a6}
#ticket-dialog :focus-visible{outline:2px solid var(--sv-berry);outline-offset:3px}
.ticket-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 16px}
.ticket-form label{flex-basis:100%;font:23px/1 Pencil,cursive;color:var(--sv-pencil)}
.ticket-form input{flex:1 1 220px;min-width:0;padding:10px 12px;border:0;border-bottom:2px solid var(--sv-ink-soft);border-radius:0;background:#f3e6c480;color:var(--sv-ink);font:22px Fell,Georgia,serif}
.ticket-form button,.ticket-actions button{padding:10px 18px;border:0;border-radius:9px;background:var(--sv-ink);color:#ecdcb8;font:18px Fell,Georgia,serif;box-shadow:0 2px 0 #000000a6;cursor:pointer}
.ticket-canvas{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 14px #2a1a0880)} /* follows the cut-out corners */
.ticket-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ticket-actions [data-ticket="post"]{border-radius:40% 44% 42% 46%/60% 52% 58% 50%;background:radial-gradient(circle at 34% 28%,#c8514b,#8e2226 58%,#681519);color:#f7e6c6;box-shadow:inset 0 -3px 7px #0000005c,0 3px 6px #3a14086b}
#ticket-dialog .ticket-share{font-style:italic;color:var(--sv-ink-soft)}
#ticket-dialog .ticket-note{font-size:15px;color:var(--sv-ink-soft)}
.ticket-ready{position:fixed;right:28px;bottom:132px;z-index:3;padding:10px 16px;border:0;border-radius:9px;background:#e0cfa8;color:var(--sv-ink);font:18px Fell,Georgia,serif;box-shadow:0 3px 0 #000000b3,0 0 24px #e2ad5c66;transform:rotate(-1.5deg);cursor:pointer;animation:ticket-glow 2.6s ease-in-out infinite}
.ticket-ready[hidden]{display:none}
@keyframes ticket-glow{50%{box-shadow:0 3px 0 #000000b3,0 0 36px #e2ad5c99}}
@media(prefers-reduced-motion:reduce){.ticket-ready{animation:none}}
@media(max-width:650px){.ticket-ready{right:16px;bottom:150px;font-size:17px}.ticket-head{padding-top:14px}}
/* A side room (world.js, branches): the page is only as long as the room; Return replaces the next-place link */
html.in-branch body{min-height:700vh}
html.in-branch .travel-footer #next-place{display:none}
.travel-footer #branch-return{margin-left:auto;padding:7px 0;color:#e4d4a8}
.travel-footer #branch-return:before{content:'← '}
.travel-footer #branch-return[data-forward]:before{content:none}.travel-footer #branch-return[data-forward]:after{content:' →'}
/* Keyboard way into a side room (world.js #branch-enter): out of sight unless focused from the keyboard */
.travel-footer #branch-enter:not(:focus-visible){position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.travel-footer #branch-enter:focus-visible{margin-left:auto;padding:7px 0;color:#e4d4a8}

/* ---------- One house style everywhere (Sergey, 24.09): the HUD and the entrance speak like the windows.
   Fell prints, Blackletter proclaims, Terminal counts and labels, Pencil writes in the margins. ---------- */
.travel-header #home{font:italic 17px/1.05 Fell,Georgia,serif;letter-spacing:.02em;text-transform:none;color:#e8d8ae}
.travel-header #home span{display:block;font:400 38px/.95 Blackletter,Fell,Georgia,serif;letter-spacing:0;color:#f0dca6;text-shadow:0 2px 10px #000a}
.travel-header nav{font:19px/1 Fell,Georgia,serif}
/* Token is the first tab, the one people come for (Sergey, 26.09): a gold ticket stamp among the printed words */
.travel-header nav .token-tab{align-self:center;min-height:0;padding:6px 11px 4px;border:1.5px solid #e2ad5c;border-radius:4px;background:#e2ad5c1a;color:#f3d493;font:21px/1 Terminal,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 0 8px #e2ad5c66;box-shadow:0 0 16px #e2ad5c33,inset 0 0 0 2px #140d0799,inset 0 0 0 3px #e2ad5c55}
.travel-header nav .token-tab:after{display:none}
/* Below 960 px the tabs do not fit one line: Token stays, the rest wait behind Menu (world.js fills #menu-dialog) */
#menu-button{display:none}
@media(max-width:959px){
 .travel-header nav>:not(.token-tab,#menu-button){display:none}
 #menu-button{display:inline-flex;align-items:center;gap:8px}
 #menu-button:before{content:'';width:18px;height:12px;background:linear-gradient(currentColor 0 0) top/100% 2px no-repeat,linear-gradient(currentColor 0 0) center/100% 2px no-repeat,linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat}
}
/* The Menu: the tabs of the header as a list on the same paper, Token first and gilded like the button at the entrance */
#menu-dialog{width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:12px 12px auto auto;padding:14px 16px 18px}
#menu-dialog .menu-list{display:grid;gap:8px;clear:both;padding-top:10px}
#menu-dialog .menu-list button{display:flex;align-items:center;min-height:46px;padding:8px 16px;border:0;border-radius:9px;background:#f3e6c48c;color:var(--sv-ink);font:21px/1.1 Fell,Georgia,serif;text-align:left;box-shadow:0 2px 0 #3a24084d}
#menu-dialog .menu-list .token-tab{background:linear-gradient(#d2ad68,#96743a);color:#23180a;font:24px/1 Terminal,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 3px 8px #0000004d,inset 0 1px 0 #ffffff40}
@media(max-height:620px){#menu-dialog .menu-list{gap:5px}#menu-dialog .menu-list button{min-height:40px;font-size:19px}}
@media(orientation:landscape) and (max-height:500px){#menu-dialog{width:min(560px,calc(100vw - 16px));margin:8px 8px auto auto;padding:10px 14px 14px}#menu-dialog .menu-list{grid-template-columns:1fr 1fr;gap:6px}#menu-dialog .menu-list button{min-height:40px;font-size:19px}#menu-dialog .menu-list .token-tab{grid-column:1/-1}}
#place-number{font:19px Terminal,Consolas,monospace;letter-spacing:.14em;color:var(--sv-candle);opacity:1;text-shadow:0 1px 2px #000d,0 0 10px #000a}
#place-title{font:400 32px/1.04 Blackletter,Fell,Georgia,serif;letter-spacing:0;color:#f3e6c2}
#speaker{font:19px Terminal,Consolas,monospace;letter-spacing:.14em;color:var(--sv-candle);text-shadow:0 1px 2px #000d,0 0 10px #000a}
#caption p{font:27px/1.22 Fell,Georgia,serif}
.travel-footer,.travel-footer #settings-button{font:18px Fell,Georgia,serif}

/* The entrance is a sheet on the counter: rag paper, a strip of tape, a rubber stamp, a gold plate to step in. */
#entrance{padding:84px 20px 24px;background:radial-gradient(80% 70% at 50% 45%,#0a080526,#050403a6)}
/* on a wide screen the name of the world sits beside the paper, not above it: the paper may start near the top */
@media(min-width:1100px){#entrance{padding-top:24px}}
.entrance-paper{position:relative;max-width:620px;padding:48px clamp(22px,5vw,56px) 34px;color:var(--sv-ink);background:var(--sv-rag);background-color:#dcc79c;border:0;text-shadow:none;box-shadow:0 34px 90px #000000cc,0 0 0 1px #3c280f59,inset 0 0 70px #5a37108c;transform:rotate(-.35deg)}
.entrance-paper::before{content:'';position:absolute;top:-12px;left:calc(50% - 58px);width:116px;height:27px;background:linear-gradient(#efe4c0e0,#dccb9ae0);transform:rotate(-2.5deg);clip-path:polygon(0 12%,5% 0,95% 9%,100% 0,97% 50%,100% 100%,4% 92%,0 100%,3% 50%);box-shadow:0 1px 3px #0003}
.entry-stamp{display:inline-block;margin:0;padding:6px 12px 3px;border:2px solid currentColor;border-radius:3px;box-shadow:inset 0 0 0 2px #e3d2a6,inset 0 0 0 3.5px currentColor;color:#8b3527d9;font:18px/1 Terminal,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-2deg);mix-blend-mode:multiply}
.entrance-paper h2{margin:24px 0 16px;font:400 clamp(46px,6.4vw,76px)/1 Blackletter,Fell,Georgia,serif;letter-spacing:0;color:var(--sv-ink);text-wrap:balance}
.entrance-paper p{max-width:34ch;margin:0 auto 20px;font:21px/1.5 Fell,Georgia,serif;color:var(--sv-ink);text-wrap:balance}
#load-line{margin-top:4px;font:28px/1.1 Pencil,cursive;letter-spacing:0;color:var(--sv-pencil);text-wrap:balance}
#load-progress{appearance:none;-webkit-appearance:none;display:block;width:min(300px,80%);height:3px;margin:8px auto 0;border:0;background:#3c280f33}
#load-progress::-webkit-progress-bar{background:#3c280f33}
#load-progress::-webkit-progress-value{background:var(--sv-ink-soft)}
#load-progress::-moz-progress-bar{background:var(--sv-ink-soft)}
.entry-motion{justify-content:center;margin-top:18px;font:18px/1.4 Fell,Georgia,serif;letter-spacing:0;color:var(--sv-ink)}
.entry-motion{cursor:pointer}.entry-motion input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;border:1.5px solid var(--sv-ink);border-radius:9px;background:#f3e6c4 center/14px no-repeat;box-shadow:inset 0 1px 2px #3c280f40;cursor:pointer}.entry-motion input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3.3L12 2.8' fill='none' stroke='%232b1d0e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.entry-motion input:focus-visible{outline:2px solid var(--sv-berry);outline-offset:3px}
.entrance-paper #enter-button,.entrance-paper #retry-button{display:block;max-width:none;margin:22px auto 0;padding:11px 40px 9px;border:0;border-radius:9px;background:linear-gradient(#d2ad68,#96743a);color:#23180a;font:25px/1.1 Fell,Georgia,serif;letter-spacing:.03em;text-shadow:none;box-shadow:0 3px 8px #0000008c,inset 0 1px 0 #ffffff40}
.entrance-paper #enter-button:not(:disabled):hover,.entrance-paper #retry-button:hover{background:linear-gradient(#e0bc76,#a07c40)}
.entrance-paper small{display:block;margin-top:14px;font:italic 17px/1.4 Fell,Georgia,serif;letter-spacing:0;color:var(--sv-ink-soft);text-wrap:balance}
.entrance-paper .entry-pages{margin-top:16px;padding-top:14px;border-top:1px dashed #3c280f66;color:var(--sv-ink);font:18px Fell,Georgia,serif}
.entrance-paper .entry-pages .token-tab{color:var(--sv-berry);font:20px/1 Terminal,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
@media(min-width:651px) and (max-height:820px){.entrance-paper{padding-top:38px;padding-bottom:28px}.entrance-paper h2{font-size:62px;margin:18px 0 12px}.entrance-paper p{font-size:19px;margin-bottom:14px}}
@media(max-width:650px){
 .travel-header #home{font-size:14px}.travel-header #home span{font-size:29px}.travel-header nav{font-size:17px}
 #place-title{font-size:25px}#place-number,#speaker{font-size:17px}#caption p{font-size:21px}
 .entrance-paper{padding:40px 20px 26px;transform:none}.entrance-paper h2{font-size:46px}.entrance-paper p{font-size:19px}#load-line{font-size:25px}
 .entrance-paper #enter-button{width:100%;padding:12px 16px 10px}
 #entrance{padding:70px 0 20px}.entry-motion{font-size:16px;text-align:left}.entrance-paper .entry-pages::before{flex-basis:100%;text-align:center}
}
/* The token plate (Sergey, 26.09: a place for the token on the first screen, ready before launch). A punched stub on the
   paper; until launch day its name and contract are blurred decoys and Copy is off. On launch day the real ticker and
   contract go into the two decoys and .entry-token gets .launched (index.html has the Copy script). */
.entry-token{position:relative;margin:14px auto 0;max-width:420px;padding:8px 12px 8px 22px;text-align:left;background:#f3e6c4b3;box-shadow:0 2px 6px #3a24082e,inset 0 0 0 1px #4a3d2c26;transform:rotate(-.5deg);-webkit-mask:radial-gradient(circle at 0 50%,#0000 4px,#000 4.5px) 0 0/100% 12px repeat-y;mask:radial-gradient(circle at 0 50%,#0000 4px,#000 4.5px) 0 0/100% 12px repeat-y}
:is(.entrance-paper,#project-dialog) .entry-token p{display:flex;align-items:center;gap:10px;max-width:none;margin:0;font:15px/1.3 Fell,Georgia,serif;text-wrap:nowrap}
:is(.entrance-paper,#project-dialog) p.entry-token-name{flex-wrap:wrap;justify-content:space-between;row-gap:0}
.entry-token-title{font:14px/1.2 Terminal,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--sv-ink-soft)}
.entry-token-secret{padding:0 2px;border:0;background:none;color:var(--sv-berry);font:27px/1.05 Terminal,Consolas,monospace;letter-spacing:.06em;cursor:help}
.entry-token-secret:focus-visible{outline:2px solid var(--sv-berry);outline-offset:2px}
:is(.entrance-paper,#project-dialog) p.entry-token-ca{margin-top:3px}
.entry-token-ca>span:first-child{font-style:italic;color:var(--sv-ink-soft)}
.entry-token-ca code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:14px/1.4 Consolas,'Courier New',monospace;color:#1d2219}
.entry-token-copy{flex:none;min-height:32px;padding:3px 12px;border:0;border-radius:8px;background:#e0cfa8;color:var(--sv-ink);font:15px Fell,Georgia,serif;box-shadow:0 2px 0 #3a2408a6}
.entry-token-copy:disabled{opacity:.55;box-shadow:none;cursor:default}
.entry-token:not(.launched) :is(.entry-token-secret span,code){display:inline-block;filter:blur(3.5px);user-select:none;animation:secret-breath 5.5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.entry-token :is(.entry-token-secret span,code){animation:none}}
/* The header links answer only after Enter (world.js keeps the header inert until then), so they wait out of sight
   instead of lying under the paper on a phone; the paper has its own links to read first. */
body:not(.entered) .travel-header nav{visibility:hidden}
/* Room for the plate on shorter screens, so the paper and Enter stay on the first screen: the travel hint goes (the footer
   gives it after Enter), and on a short phone the stamp goes too (the header names the world, the plate names the chain). */
@media(min-width:651px) and (max-height:820px){.entrance-paper small{display:none}.entry-stamp{font-size:15px}.entrance-paper{padding-top:30px;padding-bottom:22px}.entrance-paper h2{margin:14px 0 10px;font-size:58px}.entrance-paper .entry-token{margin-top:10px}}
/* a short phone: the project link waits in the Full record, so the market slip ends on the screen */
@media(max-width:650px) and (max-height:700px){#resident-encounter.show-market .encounter-source{display:none}}
/* the smallest phones: the camera choice waits in Settings, so Enter stays on the first screen */
@media(max-width:650px) and (max-height:600px){.entry-motion{display:none}.entrance-paper h2{font-size:40px}}
@media(max-width:650px) and (max-height:760px){
 .entry-stamp,.entrance-paper small{display:none}
 .entrance-paper{padding-top:26px}
 .entrance-paper h2{margin-top:6px}
 .entrance-paper p{font-size:17px;margin-bottom:14px}
 #load-line{font-size:22px}
}

/* Sergey 24.09: nothing is a bare rectangle, and everything that can be pressed answers the press.
   translate/scale compose with the rotations some buttons already carry in transform. Ease-out, no bounce. */
/* plain selectors: art-direction-v03.css gives button,a a colour transition that a :where() rule could not replace */
button,.resident-card-link,a.atlas-visit,.ticket-ready,.site-nav a,.resident-card-market-link a{transition:color 160ms ease-out,opacity 160ms ease-out,translate .2s cubic-bezier(.22,1,.36,1),scale .2s cubic-bezier(.22,1,.36,1),filter .2s ease-out,box-shadow .2s ease-out}
:where(button,.resident-card-link,a.atlas-visit,.ticket-ready,.site-nav a,.resident-card-market-link a):where(:hover,:focus-visible):not(:disabled){translate:0 -2px;filter:brightness(1.08)}
:where(button,.resident-card-link,a.atlas-visit,.ticket-ready,.site-nav a,.resident-card-market-link a):active:not(:disabled){translate:0 1px;scale:.96;filter:brightness(.94);transition-duration:.06s}
#resident-encounter{border-radius:16px}
@media(prefers-reduced-motion:reduce){:where(button,.resident-card-link,a.atlas-visit,.ticket-ready,.site-nav a,.resident-card-market-link a){transition:none}:where(button,.resident-card-link,a.atlas-visit,.ticket-ready,.site-nav a,.resident-card-market-link a):where(:hover,:focus-visible,:active){translate:none;scale:none}}
/* Cards that open something lift a little under the pointer (Residents, Notes). */
:where(#residents-dialog .resident-list article,#field-notes article){transition:translate .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease-out}
:where(#residents-dialog .resident-list article,#field-notes article):hover{translate:0 -3px;box-shadow:0 10px 22px #0000004d}
@media(prefers-reduced-motion:reduce){:where(#residents-dialog .resident-list article,#field-notes article){transition:none}:where(#residents-dialog .resident-list article,#field-notes article):hover{translate:none}}

/* Residents: the wanderer's hidden name and a label read aloud instead of it */
.hidden-name{display:inline-block;filter:blur(6px);user-select:none}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#residents-dialog .resident-role{margin:-4px 0 6px;font:italic 17px/1.3 Fell,Georgia,serif;color:var(--sv-pencil)}

/* ---------- Opening: no splash (Sergey, 25.09 night: "if the site loads in 0.1 s they should not even see it, only for weak
   PCs; add animations while loading so the picture is not static"). The entrance paper rises in at once over a dark
   forest; the world fades in behind it when ready (html.world-ready, world.js); dust drifts up all the while; on a load
   longer than 2 s (html.slow-load, index.html) Robin's last arrow crosses the screen behind the paper; Enter breathes
   once it opens. Everything is visible by default: the animations only move what is already there. */
html:not(.world-ready) #world{background:radial-gradient(40% 32% at 50% 50%,#e2ad5c1f,#0000 72%),radial-gradient(120% 95% at 50% 46%,#1f2e26,#111b15 58%,#080c0a)}
html:not(.world-ready) #world canvas{opacity:0}
#world canvas{transition:opacity 1s cubic-bezier(.4,0,.2,1)}
.entrance-paper{animation:paper-in .9s .05s cubic-bezier(.16,1,.3,1) both}
@keyframes paper-in{from{opacity:0;translate:0 26px;rotate:-1.2deg}to{opacity:1;translate:0 0;rotate:0deg}}
#entrance::before{content:'';position:fixed;inset:-10% 0 0;pointer-events:none;opacity:.55;
 background:radial-gradient(1.6px 1.6px at 12% 78%,#f3d58f,#0000),radial-gradient(1.2px 1.2px at 27% 64%,#e8d3a0,#0000),radial-gradient(2px 2px at 41% 88%,#f3d58f,#0000),radial-gradient(1.3px 1.3px at 58% 72%,#e8d3a0,#0000),radial-gradient(1.8px 1.8px at 73% 83%,#f3d58f,#0000),radial-gradient(1.2px 1.2px at 86% 69%,#e8d3a0,#0000),radial-gradient(1.5px 1.5px at 94% 91%,#f3d58f,#0000),radial-gradient(1.4px 1.4px at 6% 95%,#e8d3a0,#0000);
 background-size:100% 55%;background-repeat:repeat-y;animation:motes-rise 26s linear infinite}
@keyframes motes-rise{from{background-position:0 0}to{background-position:0 -110%}}
.entry-arrow{position:fixed;left:0;top:64%;width:min(420px,62vw);overflow:visible;pointer-events:none;transform:translateX(-100%);visibility:hidden}
.slow-load:not(.world-ready) .entry-arrow{visibility:visible;animation:arrow-cross 3.6s linear infinite}
.entry-arrow .trail{opacity:.9}
@media(max-width:650px){.entry-arrow{top:104px}}
@keyframes arrow-cross{0%{transform:translateX(-100%) translateY(14px) rotate(-4.2deg)}21%{transform:translateX(calc(25vw - 50%)) translateY(-9px) rotate(-2.1deg)}42%{transform:translateX(calc(50vw - 50%)) translateY(-18px) rotate(-.1deg)}63%{transform:translateX(calc(75vw - 50%)) translateY(-11px) rotate(2deg)}84%,100%{transform:translateX(100vw) translateY(10px) rotate(3.9deg)}}
.entrance-paper #enter-button:not(:disabled){animation:enter-breathe 2.8s .6s ease-in-out infinite}
@keyframes enter-breathe{0%,100%{box-shadow:0 3px 8px #0000008c,inset 0 1px 0 #ffffff40}50%{box-shadow:0 3px 8px #0000008c,0 0 22px #e2b55c80,inset 0 1px 0 #ffffff40}}
@media(prefers-reduced-motion:reduce){.entrance-paper,.entrance-paper #enter-button:not(:disabled),#entrance::before,.slow-load:not(.world-ready) .entry-arrow{animation:none}.entry-arrow{display:none}#world canvas{transition:none}}

/* The smallest phones (320 px): the footer wraps to two or three lines, so the caption stands above it */
@media(max-width:360px){.travel-footer,.travel-footer #settings-button{font-size:15px}#caption{bottom:104px}}

/* A cut in the world (a door, a jump, the glass) fades in from dark, or from the mirror's light, instead of swapping the
   picture in one frame (camera audit, 25.09; world.js cut()). Above the world, under the grain and the text. */
#veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:#0b120e;opacity:0}
/* The world takes the focus after Enter (world.js); it is the whole screen, so no ring is drawn round it */
#world:focus{outline:none}
#veil.light{background:#ffd9a0}
#veil.hold{opacity:1}
#veil.cut{animation:veil-in .45s cubic-bezier(.33,1,.68,1)}
@keyframes veil-in{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){#veil{display:none}}

/* ---------- Lights on what answers a touch (Sergey, 26.09: "everything you can click should light up, or many will miss
   whole places"). world-interaction.js places them while the camera rests: a ring over a resident, a spark on a trace, a
   ring and "Step in" on a way aside. Candle gold breathing outward; a resident already met keeps a quiet ring. ---------- */
#beacons{position:fixed;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.beacon{position:absolute;left:0;top:0;display:flex;align-items:center;gap:9px;margin:-17px 0 0 -17px;padding:0;border:0;background:none;color:#f3e6c2;pointer-events:auto;cursor:pointer;visibility:hidden;opacity:0;transition:opacity .45s ease-out,visibility 0s linear .45s}
.beacon.on{visibility:visible;opacity:1;transition:opacity .45s ease-out}
/* the thin dark line round the ring keeps it on a bright sky (the house above the sky); on the dark rooms it is not seen */
.beacon i{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,#fff6dc 0 2.5px,#f6d98acc 3.5px,#e2ad5c55 7px,#e2ad5c00 15px);box-shadow:inset 0 0 0 1.5px #f3d493d9,0 0 0 1px #1c120866,0 0 14px #e2ad5c80}
.beacon i::after{content:'';position:absolute;inset:0;border:1.5px solid #f3d493;border-radius:50%;animation:beacon-breath 2.8s cubic-bezier(.16,1,.3,1) infinite}
@keyframes beacon-breath{from{transform:scale(.8);opacity:.85}70%,to{transform:scale(1.75);opacity:0}}
.beacon:focus-visible{outline:none}
.beacon:is(:hover,:focus-visible) i{box-shadow:inset 0 0 0 2px #fff0c4,0 0 0 1px #1c120866,0 0 22px #e2ad5cb3}
/* A light stands where transform puts it, so the lift and the press the other buttons make would throw it off the pointer
   (a scale around the corner of the screen moved it 20 to 36 px on press, and the click fell through): it answers with its glow */
.beacon:is(:hover,:focus-visible,:active){translate:none;scale:none}
/* a trace: a spark rather than a ring */
.beacon-discovery i{background:none;box-shadow:none}
.beacon-discovery i::before{content:'';position:absolute;inset:6px;background:#fff1c9;clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%);filter:drop-shadow(0 0 3px #e2ad5c) drop-shadow(0 0 7px #e2ad5c99);animation:beacon-twinkle 2.2s ease-in-out infinite}
@keyframes beacon-twinkle{50%{transform:scale(.72) rotate(45deg);opacity:.7}}
.beacon-discovery i::after{inset:4px}
/* a way aside: the ring and the words, on the same paper as the buttons */
.beacon-branch .beacon-label{padding:6px 12px 5px;border-radius:9px;background:#e0cfa8;color:var(--sv-ink);font:18px/1 Fell,Georgia,serif;white-space:nowrap;box-shadow:0 2px 0 #000000a6,0 0 16px #e2ad5c59;transform:rotate(-1.5deg)}
@media(max-width:650px){.beacon-branch .beacon-label{padding:5px 10px 4px;font-size:16px}}
/* out of the frame, the way aside waits at the edge with an arrow toward it */
.beacon:is(.edge-right,.flip){flex-direction:row-reverse}
.beacon.bare .beacon-label{display:none}
.beacon.edge-left .beacon-label::before{content:'← '}
.beacon.edge-right .beacon-label::after{content:' →'}
.beacon.edge-up .beacon-label::before{content:'↑ '}
@media(prefers-reduced-motion:reduce){.beacon i::after,.beacon-discovery i::before{animation:none}.beacon i::after{opacity:.6;transform:scale(1.25)}.beacon,.beacon.on{transition:none}}

/* ---------- Phone windows (Sergey, 25.09 night: "every panel that opens on the phone has to be scrolled, it is not
   convenient") ---------- */
@media(max-width:650px){
 /* A conversation: the questions come first. The token address moves to the Market tab, the kicker goes, the tabs sit
    right under the name, and the sheet may take up to 64% of the screen, so a whole exchange fits without scrolling. */
 #resident-encounter,#resident-encounter.on-left{max-height:min(64dvh,580px)}
 #resident-encounter .encounter-kicker{display:none}
 #resident-encounter .encounter-sheet{display:flex;flex-direction:column}
 #resident-encounter .encounter-heading{order:1;min-height:82px;margin-bottom:6px}
 #resident-encounter h2{margin-top:0}
 #resident-encounter .encounter-tabs{order:2}
 #resident-encounter .encounter-token{order:3}
 #resident-encounter .encounter-talk{order:4}
 #resident-encounter .encounter-actions{order:5}
 #resident-encounter:not(.show-market) .encounter-token{display:none}
 /* The Market tab is a moment of reading numbers: the sheet takes the height of the screen (the header steps aside
    meanwhile), the name keeps to one line and Copy and Fomo share one row, so the chart comes with the ticket */
 body #resident-encounter.show-market,body #resident-encounter.show-market.at-top{top:12px;bottom:auto;max-height:calc(100dvh - 24px)}
 body:has(#resident-encounter.show-market:not([hidden])) .travel-header{visibility:hidden}
 #resident-encounter.show-market .encounter-occupation{display:none}
 #resident-encounter.show-market .encounter-heading{min-height:64px}
 #resident-encounter .encounter-copy{padding:6px 10px;font-size:15px}
 #resident-encounter .encounter-fomo{padding:6px 12px;font-size:16px}
 /* Those who stayed: an index, not a gallery. A small framed portrait beside the name and the ways to meet them; the
    story line of each resident is one tap away in its record (Explore). The wanderer and the keeper keep their words. */
 #residents-dialog .resident-list{grid-template-columns:1fr;gap:10px;margin-top:18px}
 #residents-dialog .resident-list article{display:grid;grid-template-columns:84px 1fr;gap:0 14px;align-items:start;padding:10px;border-radius:12px;background:#ffffff0a;text-align:left}
 #residents-dialog .resident-list img{width:84px;max-width:none;aspect-ratio:4/5;border-width:5px}
 #residents-dialog .resident-list article>div{align-items:flex-start;min-width:0}
 #residents-dialog .resident-list h3{min-width:0;margin:2px 0 4px;padding:3px 10px 2px;font-size:18px}
 #residents-dialog .resident-list article:not(.resident-extra) p{display:none}
 #residents-dialog .resident-list .resident-extra p:not(.resident-role){font-size:15px;margin-bottom:6px}
 #residents-dialog .resident-list p.resident-role{margin:0 0 2px;font-size:15px}
 #residents-dialog .resident-list :is(button,.resident-card-link){width:auto;min-height:40px;margin:6px 6px 0 0;padding:4px 12px;font-size:15px}
 /* A resident's record: the same page, tighter, so it fits one screen or nearly */
 dialog.resident-card{padding-bottom:10px}
 dialog.resident-card .resident-card-heading{margin:10px 0 6px}
 dialog.resident-card .resident-card-heading img{width:88px;height:108px;padding:4px}
 dialog.resident-card .resident-card-heading>div::before{font-size:16px}
 dialog.resident-card h2{font-size:31px}
 dialog.resident-card .resident-card-ticker{font-size:19px}
 dialog.resident-card .resident-card-occupation{font-size:17px}
 dialog.resident-card h3{margin:10px 0 2px;font-size:22px}
 dialog.resident-card p{font-size:17px;margin-bottom:8px}
 dialog.resident-card .resident-card-links{margin-top:-4px}
 dialog.resident-card :is(.resident-card-project,.resident-card-market-link)::before{margin:0;font-size:18px;line-height:1}
 dialog.resident-card .resident-card-chart .token-chart{margin:12px 0 2px;padding:12px 14px 10px}
 dialog.resident-card .resident-card-contract label{margin:12px 0 2px;font-size:22px}
 dialog.resident-card .resident-card-contract textarea{padding:8px 10px;font-size:17px;white-space:nowrap;overflow-x:auto}
 dialog.resident-card .resident-card-copy{margin-top:8px}
 dialog.resident-card .resident-card-market-link{margin-top:6px}
}

/* ---------- A phone held sideways (26.09): the screen is 320 to 430 px tall, so nothing may stack the way it does on a
   tall screen. The header keeps to one line, and the entrance paper lays its words beside its door, so Enter is on the
   first screen. ---------- */
@media(orientation:landscape) and (max-height:500px){
 .travel-header{top:8px;left:16px;right:16px;align-items:center}
 .travel-header #home{font-size:12px}
 .travel-header #home span{font-size:26px}
 .travel-header nav{flex-wrap:nowrap;max-width:none;gap:0 18px;font-size:16px}
 /* the words keep to the corners and the bottom edge, so the middle of the picture stays the world's */
 #place{top:52px;left:16px;max-width:min(300px,38vw)}
 #place-number{font-size:14px}
 #place-title{margin-top:2px;font-size:22px}
 #caption{bottom:38px;width:min(600px,calc(100% - 32px))}
 #speaker{font-size:14px}
 #caption p{margin-top:2px;font-size:19px;line-height:1.2}
 .travel-footer{left:16px;right:16px;bottom:6px;gap:18px}
 .travel-footer,.travel-footer #settings-button{font-size:15px}
 .travel-footer #scroll-hint{max-width:none}
 .ticket-ready{top:56px;right:16px;bottom:auto}
 #entrance{padding:56px 16px 8px}
 .entrance-paper{display:flex;align-items:center;gap:clamp(18px,4vw,40px);width:100%;max-width:820px;margin:auto;padding:22px clamp(18px,3.4vw,34px) 18px;transform:none}
 .entry-say,.entry-go{flex:1 1 0;min-width:0}
 .entry-stamp{padding:4px 9px 2px;font-size:13px}
 .entrance-paper h2{margin:12px 0 8px;font-size:clamp(32px,10.5vh,46px)}
 .entrance-paper p{margin:0 auto;font-size:17px;line-height:1.4}
 #load-line{margin-top:0;font-size:22px}
 .entry-motion{margin-top:10px;font-size:15px}
 .entrance-paper #enter-button{width:100%;margin-top:10px;padding:9px 16px 7px;font-size:22px}
 .entrance-paper small{margin-top:8px;font-size:14px}
 .entrance-paper .entry-pages{gap:4px 12px;margin-top:8px;padding-top:8px;font-size:16px}
 .entrance-paper .entry-pages::before{flex-basis:100%;text-align:center}
 /* A resident's record opens as a spread: who they are on the left page, their token on the right */
 dialog.resident-card{width:min(880px,calc(100% - 16px));max-width:none;max-height:calc(100dvh - 16px);margin:auto;padding:0 clamp(16px,3vw,28px) 12px}
 dialog.resident-card .resident-card-tools{padding-top:6px;padding-bottom:4px}
 dialog.resident-card .resident-card-body{display:flex;align-items:flex-start;gap:clamp(16px,3vw,32px)}
 dialog.resident-card :is(.resident-card-about,.resident-card-token){flex:1 1 0;min-width:0}
 dialog.resident-card .resident-card-heading{gap:14px;margin:6px 0 2px}
 dialog.resident-card .resident-card-heading img{width:76px;height:94px;padding:3px}
 dialog.resident-card .resident-card-heading>div::before{display:none}
 dialog.resident-card h2{margin:0 0 2px;font-size:28px}
 dialog.resident-card .resident-card-ticker{font-size:17px}
 dialog.resident-card .resident-card-occupation{font-size:15px}
 dialog.resident-card h3{margin:8px 0 2px;font-size:21px}
 dialog.resident-card p{margin-bottom:6px;font-size:15.5px;line-height:1.45}
 dialog.resident-card .resident-card-project{margin-top:4px;padding-top:0}
 dialog.resident-card :is(.resident-card-project,.resident-card-market-link)::before{display:none}
 dialog.resident-card .resident-card-links{margin-top:-4px}
 dialog.resident-card .resident-card-chart .token-chart{margin:12px 0 4px;padding:10px 12px 8px}
 dialog.resident-card .resident-card-contract label{margin:8px 0 2px;font-size:20px}
 dialog.resident-card .resident-card-contract textarea{padding:6px 8px;font-size:15px;white-space:nowrap;overflow-x:auto}
 dialog.resident-card .resident-card-copy{margin-top:6px}
 dialog.resident-card .resident-card-market-link{margin-top:8px;padding-top:0}
 /* Windows take the whole height and smaller titles, so the first screen holds the content rather than the heading */
 :is(dialog#project-dialog,dialog#field-notes,dialog#map-dialog,dialog#residents-dialog,#settings-dialog){max-height:calc(100dvh - 16px);padding-top:12px;padding-bottom:16px}
 :is(dialog#project-dialog,dialog#field-notes,dialog#map-dialog,dialog#residents-dialog,#settings-dialog) h2{margin:2px 0 8px;font-size:32px}
 dialog#project-dialog h2::after{margin-top:4px;font-size:20px}
 dialog#field-notes h2+.note-pages::before{margin-bottom:10px;font-size:22px}
 dialog#field-notes article{margin:18px 4px;padding:14px 18px 12px}
 #settings-dialog label{padding:7px 2px;font-size:17px}
 #settings-dialog p{margin:10px 0 0;font-size:16px;line-height:1.45}
 /* Those who stayed: the index of the upright phone, in as many columns as fit */
 dialog#residents-dialog>p{margin:0 0 4px;font-size:16px}
 dialog#residents-dialog .resident-list{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:12px}
 dialog#residents-dialog .resident-list article{display:grid;grid-template-columns:72px 1fr;gap:0 12px;align-items:start;padding:8px;border-radius:12px;background:#ffffff0a;text-align:left}
 dialog#residents-dialog .resident-list img{width:72px;max-width:none;aspect-ratio:4/5;border-width:4px}
 dialog#residents-dialog .resident-list article>div{align-items:flex-start;min-width:0}
 dialog#residents-dialog .resident-list h3{min-width:0;margin:2px 0 4px;padding:3px 10px 2px;font-size:17px}
 dialog#residents-dialog .resident-list article:not(.resident-extra) p{display:none}
 dialog#residents-dialog .resident-list .resident-extra p:not(.resident-role){margin-bottom:6px;font-size:15px}
 dialog#residents-dialog .resident-list p.resident-role{margin:0 0 2px;font-size:15px}
 dialog#residents-dialog .resident-list :is(button,.resident-card-link){width:auto;min-height:36px;margin:4px 6px 0 0;padding:4px 12px;font-size:15px}
 /* The atlas: the land as tall as the window on the left; the chosen place beside it, its Travel button always in reach,
    and the legend under it. The window itself does not scroll. */
 dialog#map-dialog{width:calc(100vw - 16px);padding-left:16px;padding-right:16px;overflow:hidden}
 dialog#map-dialog .atlas-intro{display:none}
 dialog#map-dialog #world-atlas{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:0 16px;height:calc(100dvh - 90px)}
 dialog#map-dialog .atlas-layout{display:contents}
 dialog#map-dialog .atlas-land{grid-area:1/1/3/2;align-self:center;width:auto;height:min(100%,calc((100vw - 314px) * .7));min-height:0}
 dialog#map-dialog .atlas-detail{display:flex;flex-direction:column;align-items:flex-start;grid-area:1/2;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0;scrollbar-width:thin;scrollbar-color:#4a3d2c59 #0000}
 dialog#map-dialog .atlas-detail h3{margin:4px 0 6px;font-size:25px}
 dialog#map-dialog .atlas-detail h4{margin:10px 0 2px}
 dialog#map-dialog .atlas-detail p{margin:5px 0;font-size:15px;line-height:1.42}
 /* the way to go there comes straight under the name, the story of the place after it */
 dialog#map-dialog .atlas-detail>*{flex:none;order:2}
 dialog#map-dialog .atlas-detail>:is(small,h3){order:0}
 dialog#map-dialog .atlas-detail>:is(.atlas-visit,.atlas-unbuilt){order:1;margin:0 0 4px}
 dialog#map-dialog .atlas-visit{padding:7px 18px}
 dialog#map-dialog .atlas-region{font-size:10.5px}
 dialog#map-dialog .atlas-legend{grid-area:2/2;gap:4px 14px;margin-top:6px;font-size:14px}
 dialog#map-dialog .atlas-legend .atlas-hint{display:none}
 /* a small land: the marks shrink, side rooms show their names when chosen, the sea and the scale step off */
 dialog#map-dialog .atlas-location{--dot:22px;font-size:11px}
 dialog#map-dialog .atlas-location span{max-width:84px;padding:1px 4px}
 dialog#map-dialog .atlas-location.aside:not(.selected) span{display:none}
 dialog#map-dialog .atlas-marks .desk,dialog#map-dialog :is(.atlas-sea,.atlas-scale){display:none}
 dialog#map-dialog .atlas-compass{width:30px}
}
/* 320 px tall: the stamp and the travel hint go (the header names the world, the footer gives the hint after Enter) */
@media(orientation:landscape) and (max-height:340px){
 .entry-stamp,.entrance-paper small{display:none}
 .entrance-paper{padding:16px 18px 12px}
 .entrance-paper h2{margin-top:0}
 .entrance-paper p{font-size:15.5px}
 .entry-motion{margin-top:6px}
 .entrance-paper #enter-button{margin-top:8px}
 .entrance-paper .entry-pages{margin-top:6px;padding-top:6px}
 .entrance-paper .entry-token{margin-top:8px}
}
/* A conversation held sideways stands at the side, as tall as the screen allows, one tab at a time (as upright); the
   Market tab lays the slip beside the ticket instead of under it. Wide screens keep their own layout (resident-cards.css). */
@media(orientation:landscape) and (max-height:500px) and (max-width:979px){
 #resident-encounter{--talk-width:min(430px,56vw)}
 #resident-encounter,#resident-encounter.on-left,body #resident-encounter:not(.at-top),#resident-encounter.at-top,#resident-encounter.on-left.at-top{top:8px;bottom:auto;right:8px;left:auto;width:var(--talk-width);max-height:calc(100dvh - 16px);padding:6px 6px 8px 4px}
 #resident-encounter.on-left,body #resident-encounter.on-left:not(.at-top),#resident-encounter.on-left.at-top{right:auto;left:8px}
 #resident-encounter .encounter-sheet{display:flex;flex-direction:column;padding:16px 16px 4px 18px}
 #resident-encounter .encounter-kicker{display:none}
 #resident-encounter .encounter-heading{order:1;min-height:64px;margin-bottom:4px}
 #resident-encounter h2{margin-top:0;font-size:26px}
 #resident-encounter .encounter-heading :is(h2,.encounter-kicker){padding-right:76px}
 #resident-encounter .encounter-occupation{padding-right:96px;font-size:15px}
 #resident-encounter .encounter-portrait{right:32px;width:50px;padding:3px 3px 8px}
 #resident-encounter .encounter-portrait img{width:44px;height:50px}
 #resident-encounter .encounter-stamp{top:38px;right:10px;font-size:16px}
 /* the sheet rises to the top edge, so the header links step aside while it is open (the footer already does) */
 body:has(#resident-encounter:not([hidden])) .travel-header nav{visibility:hidden}
 #resident-encounter .encounter-tabs:not([hidden]){display:flex;order:2;margin:0 0 8px;border-bottom:1px solid #b3a17780}
 #resident-encounter .encounter-tabs button{flex:1;min-height:34px;padding:2px 0 0;margin-bottom:-1px;border:0;border-bottom:3px solid #0000;background:none;color:var(--ink-soft);font:17px/1 Terminal,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
 #resident-encounter .encounter-tabs [aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink-green)}
 #resident-encounter .encounter-token{order:3;margin:0 -4px 8px 0;padding:10px 12px 8px 18px}
 #resident-encounter .encounter-talk{order:4}
 #resident-encounter .encounter-actions{order:5;padding-top:0}
 #resident-encounter .encounter-actions button{min-height:34px}
 #resident-encounter:not(.show-market) :is(.encounter-token,.encounter-market),#resident-encounter.show-market .encounter-talk{display:none}
 #resident-encounter .encounter-answer{margin-bottom:8px;font-size:15.5px;line-height:1.45}
 #resident-encounter .encounter-question{margin-bottom:6px;font-size:15px}
 #resident-encounter .encounter-choices button{min-height:36px;padding:6px 8px 6px 30px;font-size:15px;line-height:1.35}
 #resident-encounter .encounter-contract{font-size:11.5px}
 #resident-encounter .encounter-token h3{font-size:17px}
 #resident-encounter .encounter-copy{padding:6px 10px;font-size:15px}
 #resident-encounter .encounter-fomo{padding:6px 12px;font-size:16px}
 body #resident-encounter.show-market{display:flex;align-items:flex-start;gap:8px;width:min(780px,calc(100vw - 16px))}
 #resident-encounter.show-market>*{flex:1 1 0;min-width:0}
 #resident-encounter.show-market>.encounter-sheet{flex-grow:1.2}
 #resident-encounter.show-market .encounter-market{margin:20px 4px 0 0;padding:12px 14px 6px}
 /* the ticket half is narrow: the name keeps to one line and the occupation waits on the Questions tab */
 #resident-encounter.show-market h2{font-size:22px}
 #resident-encounter.show-market .encounter-occupation{display:none}
 #resident-encounter.show-market .encounter-heading{min-height:54px}
}
@media(orientation:landscape) and (max-height:380px){
 .entry-stamp,.entrance-paper small{display:none}
 .entrance-paper h2{margin-top:0}
 dialog.resident-card .resident-card-heading img{width:62px;height:78px}
 dialog.resident-card h2{font-size:25px}
 dialog.resident-card p{font-size:15px;line-height:1.4}
 dialog.resident-card h3{margin-top:6px;font-size:19px}
 dialog.resident-card .resident-card-chart .token-chart{margin-top:8px}
 :is(dialog#project-dialog,dialog#field-notes,dialog#map-dialog,dialog#residents-dialog,#settings-dialog) h2{font-size:28px}
 #settings-dialog{padding-top:8px;padding-bottom:10px}
 #settings-dialog label{padding:5px 2px}
 #settings-dialog p{font-size:15px;line-height:1.4}
}
@media(orientation:landscape) and (max-height:340px) and (max-width:979px){
 #resident-encounter{--talk-width:min(430px,62vw)}
 #resident-encounter h2{font-size:22px}
 #resident-encounter .encounter-occupation{display:none}
 #resident-encounter .encounter-heading{min-height:54px}
 #resident-encounter .encounter-answer{font-size:15px;line-height:1.4}
 #resident-encounter .encounter-choices button{min-height:32px;padding-top:4px;padding-bottom:4px}
}

/* ---------- A laptop screen (26.09): a wide window no taller than 820 px. A conversation shows one tab at a time, as on
   a phone, so the whole exchange fits under the header; the ticket and the market slip open together on the Market tab
   (beside each other, as before). The atlas land keeps to the window height, so the legend shows without scrolling. */
@media(min-width:980px) and (max-height:820px){
 #resident-encounter .encounter-kicker{display:none}
 #resident-encounter .encounter-sheet{display:flex;flex-direction:column}
 #resident-encounter .encounter-heading{order:1;min-height:96px}
 #resident-encounter .encounter-tabs:not([hidden]){display:flex;order:2;margin:0 0 10px;border-bottom:1px solid #b3a17780}
 #resident-encounter .encounter-tabs button{flex:1;min-height:38px;padding:4px 0 0;margin-bottom:-1px;border:0;border-bottom:3px solid #0000;background:none;color:var(--ink-soft);font:18px/1 Terminal,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
 #resident-encounter .encounter-tabs [aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink-green)}
 #resident-encounter .encounter-token{order:3}
 #resident-encounter .encounter-talk{order:4}
 #resident-encounter .encounter-actions{order:5}
 #resident-encounter:not(.show-market) :is(.encounter-token,.encounter-market),#resident-encounter.show-market .encounter-talk{display:none}
}
@media(min-width:1021px) and (max-height:900px){#map-dialog .atlas-layout{grid-template-columns:auto 260px;justify-content:center}#map-dialog .atlas-land{width:calc((100dvh - 335px) * 10 / 7);max-width:100%;min-height:0}#map-dialog .atlas-intro{margin-bottom:14px}#map-dialog .atlas-detail{display:flex;flex-direction:column;align-items:flex-start;max-height:calc(100dvh - 335px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#4a3d2c59 #0000}#map-dialog .atlas-detail>*{flex:none;order:2}#map-dialog .atlas-detail>:is(small,h3){order:0}#map-dialog .atlas-detail>:is(.atlas-visit,.atlas-unbuilt){order:1;margin:0 0 6px}}