/* poster.css — the wall and the sheets on it, the chrome that stays on the screen, the map's labels, the compass, the disc, the scrollbar.
   opening.css carries the paper, the ink, the typewriter stack and the chrome's row; this adds the poster. 1 unit = 1 CSS px at zoom 1.
   Rewritten in milestone 2r as one sheet of rules (the first pass had stacked three sets of overrides). The type scale is set for the
   560-unit sheets: a phone shows them at about 0.66, a laptop at 1.0, so body type at 23 units reads at about 15 px on the phone. */
:root { --t-body: 23px; --t-small: 21px; --t-tiny: 19px; --t-head: 26px; --sheet-pad-x: 34px;   /* finish round: small 21 and tiny 19 units (13.9 and 12.6 px on the phone proxy), review 2r finding 2 */
  --vmask: linear-gradient(to bottom, transparent 0, transparent 26px, #000 60px, #000 calc(100% - 128px), transparent calc(100% - 96px)); --hmask: linear-gradient(#000, #000); }
@media (max-width: 600px) { :root { --vmask: linear-gradient(to bottom, transparent 0, transparent 24px, #000 50px, #000 calc(100% - 146px), transparent calc(100% - 116px)); } }
/* ---- the wall */
.world { position: fixed; inset: 0; overflow: hidden; touch-action: pinch-zoom; z-index: 2;
  /* the sheets slide under the chrome's bands and fade into the paper there, so the row, the mark and the label never sit on type (--vmask);
     at a place, the fog fades what lies beside the framed panels to a trace, so a neighbour's half-words never frame a sheet (--hmask, site.js) */
  -webkit-mask-image: var(--vmask), var(--hmask); mask-image: var(--vmask), var(--hmask); -webkit-mask-composite: source-in; mask-composite: intersect; }
html { overscroll-behavior-x: none; }   /* a sideways trackpad swipe moves between panels, never the browser's history */
html[data-place="map"] .world, html[data-place="home"] .world, html[data-place="years"] .world { -webkit-mask-image: none; mask-image: none; }
.poster { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
html[data-flying="on"] .poster { pointer-events: none; }
html.js[data-phase="boot"] .world, html.js[data-phase="write"] .world, html.js[data-phase="idle"] .world, html.js[data-phase="gate"] .world, html.js[data-phase="morph"] .world, html.js[data-phase="fill"] .world, html.js[data-phase="drop"] .world { opacity: 0; pointer-events: none; }
html.js[data-phase="live"] .world { opacity: 1; transition: opacity 0.6s; }
html[data-mode="pen"] .poster, .poster.drawing { user-select: none; -webkit-user-select: none; }
@media (hover: hover) and (pointer: fine) { .poster { user-select: none; -webkit-user-select: none; } }
/* the years place: the deck (years.js) lives between the paper and the poster and owns the pointer until its draw switch is on */
html[data-place="years"][data-years-draw="off"] .world, html[data-place="years"]:not([data-years-draw]) .world { pointer-events: none; }
/* the proxy scroller Lenis drives: never seen, never touched */
.scroller { position: fixed; inset: 0; overflow: hidden; visibility: hidden; pointer-events: none; z-index: -1; }
.scroller-content { width: 1px; }
/* ---- the sheets: printed pages pinned on the wall; the type in the ink with the tooth */
.place { position: absolute; box-sizing: border-box; padding: 44px var(--sheet-pad-x) 72px; color: var(--ink); font-family: var(--type); font-size: var(--t-body); line-height: 1.42; overflow-wrap: break-word; }
.place.measuring { height: auto !important; }
.place .ink-layer { z-index: 5; }
.t-body { font-size: var(--t-body); line-height: 1.42; } .t-small { font-size: var(--t-small); line-height: 1.38; } .t-tiny { font-size: var(--t-tiny); line-height: 1.35; } .t-head { font-size: var(--t-head); line-height: 1.2; }
.sheet-head { margin: 0 0 22px; }
.place h2 { font: 400 var(--t-head)/1.2 var(--type); margin: 0 0 8px; letter-spacing: 0.01em; text-transform: lowercase; }
.place h3 { font: 400 var(--t-body)/1.3 var(--type); margin: 26px 0 8px; text-transform: lowercase; }
.place p { margin: 0 0 14px; }
.sheet-head .kicker, .place .kicker { font-size: var(--t-tiny); line-height: 1.4; opacity: 0.8; margin: 0 0 10px; }
/* ---- sheets in panels (layout 2): fixed 560-unit columns side by side, 80 apart, the long material continuing in the next one */
.place.panelled { padding-left: 0; padding-right: 0; }
.place.panelled > .panels { display: flex; gap: 80px; align-items: flex-start; }
.place.panelled .panel { flex: 0 0 560px; width: 560px; box-sizing: border-box; padding: 0 var(--sheet-pad-x); min-width: 0; }
.place .panel-kicker { font-size: var(--t-tiny); line-height: 1.4; opacity: 0.8; margin: 4px 0 22px; }
.panel-next { margin: 46px 0 0; padding-top: 18px; border-top: 1px dashed rgba(21, 20, 26, 0.18); }
.panel-next a { display: inline-flex; align-items: center; gap: 8px; min-height: 70px; border: 0 !important; opacity: 0.78; }
.panel-next a:hover, .panel-next a:focus-visible { opacity: 1; }
.panel-next a canvas { display: block; }
.place .hand-title { display: block; margin: 0 0 10px -2px; }
.place .hand-line { display: inline-block; }
.place .hand-line { max-width: 100%; }
.place .hand-line canvas { display: block; max-width: 100%; height: auto !important; }   /* a written line wider than its column shrinks to it, never past the sheet's edge */
.place .hand-note { display: block; margin: 28px 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.place a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(21, 20, 26, 0.3); }
.place a:hover, .place a:focus-visible { border-color: currentColor; outline: none; }
.place a.hand-link { border: 0; }
.place :focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: 3px; }
/* the typed blocks (typewriter.js puts its arrows right after the block) */
.typed-block { white-space: pre-wrap; min-height: 1.4em; }
.typed-block .carriage { opacity: 0.6; }
.tw-controls { opacity: 0; transition: opacity 0.25s; }
.typed-block:hover + .tw-controls, .tw-controls:hover, .tw-controls:focus-within, .typed-block.typing + .tw-controls { opacity: 0.6; }
.tw-controls:hover { opacity: 1; }
.tw-controls .tw-skip:not([hidden]) { opacity: 1; }
@media (hover: none) { .tw-controls { opacity: 0.55; } }
/* ---- home: the title block under the screen-fixed question (the sheet is framed with cover, so its centre is the screen's centre) */
#place-home { padding: 0; }
#place-home .home-col { position: absolute; left: 50%; top: 50%; width: 400px; margin-left: -200px; transform: translateY(var(--home-y, 70px)); font-size: 14px; line-height: 1.6; }
#place-home .dates { margin: 0 0 14px; text-align: center; font-size: 13px; letter-spacing: 0.03em; opacity: 0.85; }
#place-home .home-desc { font-size: 13.5px; line-height: 1.65; margin: 0 0 4px; }
#place-home .tw-controls { position: absolute; right: -40px; top: 22px; display: inline-flex; flex-direction: column; }
#place-home .editions-label { margin: 14px 0 2px; font-size: 12px; opacity: 0.55; }
#place-home .editions { margin: 0; padding: 0; list-style: none; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 600px) { #place-home .home-col { width: 340px; margin-left: -170px; --home-y: -18px; } #place-home .editions { gap: 4px 12px; } #place-home .tw-controls { right: -30px; } }
/* ---- with JavaScript off the sheets stack in reading order, the start sheet first (build.py writes which) */
html:not(.js) body { overflow: auto; }
html:not(.js) .world { position: static; overflow: visible; }
html:not(.js) .poster { position: static; width: auto !important; height: auto !important; transform: none !important; display: flex; flex-direction: column; }
html:not(.js) .place { position: static; width: auto !important; height: auto !important; max-width: 640px; margin: 0 auto 40px; padding: 28px 20px; }
html:not(.js) .stage, html:not(.js) .morph, html:not(.js) .prompt, html:not(.js) .direct, html:not(.js) .hint, html:not(.js) .compass, html:not(.js) .scrollbar, html:not(.js) .logo, html:not(.js) .menu, html:not(.js) .tin, html:not(.js) .scroller { display: none; }
html:not(.js) #place-home .home-col { position: static; width: auto; margin: 0; transform: none; }
html:not(.js) .paper, html:not(.js) .vignette, html:not(.js) .grain { position: fixed; z-index: -1; }
html:not(.js) .chrome { position: static; padding: 16px 20px; flex-wrap: wrap; }
html:not(.js) .chrome .label { position: static; }
html:not(.js) .chrome .row a#clear, html:not(.js) .chrome .row a#undo, html:not(.js) .chrome .row a#pens, html:not(.js) .chrome .row a#share, html:not(.js) .chrome .row a#save { display: none; }
/* ---- the chrome additions */
.chrome .row { display: inline-flex; align-items: flex-end; }
.chrome .row a { margin-left: 6px; display: inline-flex; align-items: flex-end; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px 1px; box-sizing: border-box; border-bottom: 0; }
.chrome .row a > span, .chrome .row a { text-underline-offset: 3px; }
.chrome .row a { background-image: linear-gradient(rgba(21, 20, 26, 0.35), rgba(21, 20, 26, 0.35)); background-size: calc(100% - 12px) 1px; background-position: 6px 100%; background-repeat: no-repeat; }
.chrome .row a:hover { background-image: linear-gradient(currentColor, currentColor); }
.chrome #undo.off { opacity: 0.35; pointer-events: none; }
.chrome { padding-bottom: 12px !important; }
.compass { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.compass a { position: absolute; display: flex; align-items: center; gap: 6px; pointer-events: auto; opacity: 0.55; transition: opacity 0.25s; border: 0; text-decoration: none; padding: 6px 8px; min-height: 44px; box-sizing: border-box; background: rgba(241, 236, 226, 0.88); border-radius: 8px; }
.compass a:hover, .compass a:focus-visible { opacity: 1; outline: none; }
.compass a[hidden], .mapview[hidden], .disc[hidden], .replay-opening[hidden] { display: none; }
.compass a.left { left: 14px; top: 50%; transform: translateY(-50%); flex-direction: row; }
.compass a.right { right: 14px; top: 50%; transform: translateY(-50%); flex-direction: row-reverse; }
.compass a.up { right: 96px; top: 12px; flex-direction: row-reverse; }
.compass a.down { right: 18px; bottom: 58px; flex-direction: row-reverse; }
@media (max-width: 600px) { .compass a { padding: 4px 6px; } .compass a.left, .compass a.right { top: auto; bottom: 150px; transform: none; } .compass a.left { left: 6px; } .compass a.right { right: 6px; } .compass a.up { top: 46px; right: 64px; } .compass a.down { bottom: 196px; right: 6px; } .compass a .hand canvas { max-width: 76px; height: auto !important; } }
html[data-place="map"] .compass { display: none; }
@media (max-width: 600px) { .compass { display: none; } }   /* on a phone the sheets end with their neighbours instead (.sheet-next), so nothing sits over the type */
.sheet-next { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 46px 0 0; padding-top: 18px; border-top: 1px dashed rgba(21, 20, 26, 0.18); }
.sheet-next a { display: inline-flex; align-items: center; gap: 8px; min-height: 70px; border: 0 !important; opacity: 0.75; }
.sheet-next a:hover, .sheet-next a:focus-visible { opacity: 1; }
.sheet-next a canvas { display: block; }
/* ---- the map's labels: a screen-fixed layer, never under 14 px, each a target never under 44 px */
.mapview { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
.mapview a { position: absolute; transform: translate(-50%, -50%); min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; pointer-events: auto; border: 0; text-decoration: none; padding: 4px 8px; opacity: 0.92; background: rgba(241, 236, 226, 0.82); border-radius: 10px; }
.mapview a:hover, .mapview a:focus-visible, .mapview a.focused { opacity: 1; outline: none; }
.mapview a .underline { position: absolute; left: 10%; right: 10%; bottom: 4px; height: 6px; opacity: 0; }
.mapview a:hover .underline, .mapview a:focus-visible .underline, .mapview a.focused .underline { opacity: 1; }
.mapview .frame { position: absolute; border: 1.5px dashed rgba(40, 34, 28, 0.5); pointer-events: none; display: none; }
.mapview a.focused ~ .frame { display: block; }
html[data-place="map"] .chrome .row #maplink { opacity: 0.35; }
/* the map's heading and legend: what this view is and how to move in it */
.map-head { position: absolute; left: 0; right: 0; top: 18px; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.map-head canvas { display: block; mix-blend-mode: multiply; filter: url(#soak); }
.map-legend { margin: 0; font: 13px/1.4 var(--type); color: var(--ink); opacity: 0.8; text-align: center; padding: 0 12px; }
@media (max-width: 600px) { .map-head { top: 34px; } .map-head canvas { max-width: 180px; height: auto !important; } .map-legend { font-size: 12px; } }
/* a plain return to home: the last place, offered by hand under the question */
.resume { position: fixed; left: 50%; top: calc(40% + 74px); transform: translateX(-50%); z-index: 13; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; border: 0; text-decoration: none; opacity: 0; transition: opacity 0.5s; mix-blend-mode: multiply; filter: url(#soak); }
.resume.on { opacity: 0.82; } .resume.on:hover, .resume.on:focus-visible { opacity: 1; outline: none; }
.resume[hidden], .replay-ink[hidden] { display: none; }
html:not([data-place="home"]) .resume { display: none; }
@media (max-width: 600px) { .resume { top: calc(34% + 68px); } }
/* a shared sheet's skip arrow while it replays and its replay arrow after (brief 10) */
.replay-ink { position: fixed; left: 16px; top: 84px; z-index: 30; opacity: 0.5; transition: opacity 0.3s; }
.replay-ink:hover, .replay-ink:focus-within { opacity: 1; }
/* the grips: the menu's (it moves the mark and its menu as one body) and the tin's */
.menu-grip { display: flex; justify-content: center; padding: 10px 14px; margin-bottom: 2px; min-height: 24px; cursor: grab; opacity: 0; pointer-events: none; transition: opacity 0.3s; touch-action: none; mix-blend-mode: multiply; }
.menu.open .menu-grip { opacity: 0.55; pointer-events: auto; } .menu.open .menu-grip:hover { opacity: 1; }
.tin .tin-grip { grid-column: 1 / -1; justify-self: center; padding: 6px 18px 8px; cursor: grab; opacity: 0.55; touch-action: none; mix-blend-mode: multiply; }
.tin .tin-grip:hover { opacity: 1; }
/* ---- the sketched disc of continuity, next to the row */
.disc { position: fixed; left: 22px; bottom: 44px; z-index: 8; opacity: 0; transition: opacity 0.5s; }
.disc.on { opacity: 0.6; } .disc.on:hover, .disc.on:focus-within { opacity: 1; }
.disc.kept.on { opacity: 0.85; }
.disc button { background: none; border: 0; padding: 7px; cursor: pointer; display: block; }
.disc button:focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: 2px; }
/* ---- the replay arrow of the opening, top left, once it has played; the skip arrow while it plays */
.replay-opening { position: fixed; left: 16px; top: 36px; z-index: 30; opacity: 0.45; transition: opacity 0.3s; }
.replay-opening:hover, .replay-opening:focus-within { opacity: 1; }
.replay-opening button, .arrowbtn { background: none; border: 0; padding: 7px; cursor: pointer; display: block; }
.replay-opening button:focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: 2px; }
html:not([data-place="home"]) .replay-opening { display: none; }
/* ---- the hand-drawn scrollbar at the sheet's right edge: grey until hovered */
.scrollbar { position: fixed; z-index: 18; width: 24px; opacity: 0.45; transition: opacity 0.25s; cursor: pointer; touch-action: none; }
.scrollbar:hover, .scrollbar.dragging { opacity: 1; }
/* ---- the tin's draw switch on touch screens, and the slot a lane may use */
.tin .switch { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; font: 13px var(--type); color: var(--ink); }
.tin .switch button { font: inherit; background: none; border: 1px solid rgba(21, 20, 26, 0.35); border-radius: 12px; padding: 0 12px; min-height: 44px; color: inherit; cursor: pointer; }
.tin .switch button[aria-pressed="true"] { background: rgba(21, 20, 26, 0.85); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .tin .switch { display: none; } }
.tin .tin-slot { grid-column: 1 / -1; }
.tin .tin-fresh { grid-column: 1 / -1; justify-self: start; background: none; border: 0; padding: 10px 0 4px; min-height: 44px; cursor: pointer; opacity: 0.7; mix-blend-mode: multiply; filter: url(#soak); }
.tin .tin-fresh:hover, .tin .tin-fresh:focus-visible { opacity: 1; outline: none; }
.tin .tin-slot:empty { display: none; }
/* ---- the session glyphs */
.session .glyph canvas, .session .glyph img { display: block; }
/* ---- the tip and the note of v16 */
.tip { position: fixed; pointer-events: none; opacity: 0; mix-blend-mode: multiply; filter: url(#soak); z-index: 40; }
.tip.on { opacity: 1; }
.tip canvas { display: block; }
@media (prefers-reduced-motion: reduce) { html.js[data-phase="live"] .world { transition: none; } }
/* ---- round 01 v16's own chrome, carried over as it was: the line, the morph, the mark, the menu, the hint, the tin, the share choice, the note, the question, the squiggle, night shift */
.ink { width: min(40vw, 620px); filter: url(#soak); transition: opacity 0.18s; }
@media (max-width: 600px) { .ink { width: 84vw; top: 44%; } }
.morph { position: fixed; left: 0; top: 0; mix-blend-mode: multiply; filter: url(#soak); transform-origin: 0 0; opacity: 0; pointer-events: none; z-index: 12; }
.morph canvas { display: block; width: 100%; height: auto; }
.stage { z-index: 11; }
html[data-phase="live"] .stage { pointer-events: none; }
.logo { position: fixed; left: 50%; bottom: 18px; width: 200px; height: 90px; margin-left: -100px; opacity: 0; mix-blend-mode: multiply; filter: url(#soak); cursor: pointer; transition: opacity 0.3s, filter 0.25s; will-change: transform; z-index: 22; }
.logo.lifted { filter: url(#soak) drop-shadow(0 7px 9px rgba(21, 20, 26, 0.28)); }
.logo canvas { display: block; width: 100%; height: 100%; }
.logo.on { opacity: 1; }
.logo:focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: 4px; border-radius: 10px; }
.menu { position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); will-change: transform; display: flex; flex-direction: column; align-items: center; gap: 0; pointer-events: none; z-index: 23; }
.menu a { display: block; border: 0; opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; text-decoration: none; padding: 3px 10px; background: rgba(241, 236, 226, 0.7); border-radius: 8px; }
.menu a canvas { display: block; mix-blend-mode: multiply; filter: url(#soak); cursor: pointer; }
.menu.open a { opacity: 1; transform: none; pointer-events: auto; }
.menu.open a:hover, .menu.open a:focus-visible { opacity: 0.72; outline: none; }
.menu:not(.open) a { visibility: hidden; }
.hint { position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); font-size: 12.5px; letter-spacing: .03em; color: var(--ink); opacity: 0; transition: opacity 0.6s; pointer-events: none; z-index: 12; }
html[data-phase="idle"] .hint.show, html[data-phase="gate"] .hint.show { opacity: 1; }
html[data-phase="idle"] .stage, html[data-phase="gate"] .stage { cursor: pointer; }
html[data-phase="gate"] .hint { bottom: auto; top: 50%; font-size: 12px; }
.tin { position: fixed; left: 22px; bottom: 44px; display: grid; grid-template-columns: repeat(4, auto); gap: 4px 10px; padding: 8px 10px; background: var(--paper); box-shadow: 0 0 0 1px rgba(21, 20, 26, 0.08), 0 6px 18px rgba(60, 45, 30, 0.12); border-radius: 10px; z-index: 24; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.tin.on { opacity: 1; pointer-events: auto; }
.tin canvas { display: block; width: 58px; height: 24px; opacity: 0.55; mix-blend-mode: multiply; filter: url(#soak); }
.tin canvas:hover, .tin canvas.on { opacity: 1; }
.tin[hidden] { display: none; }
.choice { position: fixed; left: 24px; bottom: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; mix-blend-mode: multiply; filter: url(#soak); z-index: 9; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.choice.on { opacity: 1; pointer-events: auto; }
.choice canvas { display: block; opacity: 0.6; padding: 6px 0; }
.choice canvas:hover, .choice canvas:focus-visible { opacity: 1; outline: none; }
.note { position: fixed; left: 24px; bottom: 44px; mix-blend-mode: multiply; filter: url(#soak); opacity: 0; pointer-events: none; z-index: 8; }
.note.on { opacity: 1; }
.tin.on ~ .note, .tin.on ~ .disc { bottom: 156px; }
.note canvas { display: block; }
.chrome { z-index: 21; }
.chrome a .short { display: none; }
.chrome a.off { opacity: 0.35; pointer-events: none; }
@media (max-width: 600px) {
  .logo { bottom: 40px; } .menu { bottom: 134px; } .hint { bottom: 140px; }
  .tin { left: 8px; bottom: 136px; grid-template-columns: repeat(3, auto); gap: 0 6px; padding: 6px; } .tin canvas { width: 46px; height: 20px; padding: 12px 0; box-sizing: content-box; }
  .note { left: 14px; bottom: 40px; } .tin.on ~ .note, .tin.on ~ .disc { bottom: 330px; }
  .disc { left: 8px; bottom: 34px; }
  .chrome a .long { display: none; } .chrome a .short { display: inline; } .chrome .row a { margin-left: 2px; padding: 0 4px 1px; background-size: calc(100% - 8px) 1px; background-position: 4px 100%; }
}
html[data-phase="live"] .about { display: none; }
.prompt { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); display: flex; align-items: center; opacity: 0; transition: opacity 0.4s; pointer-events: none; max-width: 92vw; height: 44px; z-index: 13; }
.prompt.on { opacity: 1; pointer-events: auto; cursor: text; }
.prompt canvas.line { display: block; mix-blend-mode: multiply; filter: url(#soak); flex: none; }
.prompt .typed { font-family: Kalam, cursive; font-weight: 700; font-size: 25px; line-height: 1; color: var(--ink); mix-blend-mode: multiply; filter: url(#soak); white-space: pre; margin-left: 7px; min-width: 0; }
.prompt .caret { position: absolute; left: 0; top: 2px; width: 10px; height: 40px; mix-blend-mode: multiply; filter: url(#soak); animation: blink 1.06s steps(1) infinite; pointer-events: none; }
.prompt.writing .caret, html[data-caret="steady"] .caret { animation: none; }
@keyframes blink { 0%, 52% { opacity: 1; } 53%, 100% { opacity: 0; } }
.prompt input { position: absolute; opacity: 0; width: 1px; height: 1px; left: 0; top: 0; border: 0; padding: 0; font-size: 16px; }
.direct { position: fixed; left: 50%; top: calc(40% + 40px); transform: translateX(-50%); font-size: 12.5px; letter-spacing: .03em; color: var(--ink); opacity: 0; transition: opacity 0.6s; white-space: nowrap; pointer-events: none; z-index: 13; }
.direct.on { opacity: 1; pointer-events: auto; }
.direct .tap { display: none; }
@media (hover: none) { .direct .click { display: none; } .direct .tap { display: inline; } }
.direct a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(21, 20, 26, 0.35); padding: 10px 0 1px; margin: 0 4px; }
.direct a:hover { border-color: currentColor; }
@media (max-width: 600px) { .prompt { top: 34%; } .direct { top: calc(34% + 36px); font-size: 12px; white-space: normal; max-width: 84vw; text-align: center; line-height: 2; } .prompt .typed { font-size: 22px; } }
html:not([data-place="home"]) .prompt, html:not([data-place="home"]) .direct { display: none; }
.sound { position: fixed; top: 10px; right: 14px; width: 64px; height: 32px; padding: 8px 6px; box-sizing: content-box; background: none; border: 0; margin: 0; cursor: pointer; mix-blend-mode: multiply; filter: url(#soak); opacity: 0; transition: opacity 0.3s; -webkit-tap-highlight-color: transparent; z-index: 24; }
.sound canvas { display: block; width: 64px; height: 32px; }
.sound.on { opacity: 0.45; }
.sound.on:hover, .sound.on:focus-visible { opacity: 1; }
.sound:focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 600px) { .sound { top: 6px; right: 8px; } }
html[data-inkgrain="on"] .inked { -webkit-mask-image: var(--inkgrain); mask-image: var(--inkgrain); -webkit-mask-size: 512px 512px; mask-size: 512px 512px; }
.night { position: fixed; inset: 0; pointer-events: none; background: #ffb36b; mix-blend-mode: multiply; opacity: 0; transition: opacity 0.8s; z-index: 50; }
html[data-night="on"] .night { opacity: 0.26; }
/* the vignette and the grain lie over the poster as they lay over v16's page */
.vignette, .grain { z-index: 3; }
@media (max-width: 600px) { .chrome { font-size: 12.5px; } }
/* the masthead of the home sheet: shown when the opening is not on screen (the map, the flights, a neighbour's view, the print) */
#place-home .masthead { position: absolute; left: 0; right: 0; top: 70px; display: flex; flex-direction: column; align-items: center; gap: 22px; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
html:not([data-place="home"]) #place-home .masthead, html[data-print="on"] #place-home .masthead { opacity: 1; }
#place-home .masthead canvas { display: block; mix-blend-mode: multiply; }
/* finish round, review 2r finding 2: every target a finger uses measures at least 44 CSS px on the phone (the words do not move) */
.menu a { min-height: 44px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.choice canvas { padding: 10px 0; box-sizing: content-box; min-height: 24px; }
.direct a { display: inline-block; padding: 13px 4px 6px; margin: -13px 0 -6px; }
.replay-ink .arrowbtn, .replay-opening .arrowbtn { min-width: 44px; min-height: 44px; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { #place-home .masthead, .resume, .menu-grip { transition: none; } }
.tw-controls button { position: relative; } .tw-controls button::after { content: ''; position: absolute; inset: -14px; }   /* the canonical typewriter's own arrows: a larger hit area (68 units, 45 px on the phone), its look and timing untouched */
#place-home .editions a { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; }
/* the tin is paper, not ink: the ink grain goes on its pens, not on its box (the bot lane saw the home text through it on the phone) */
html[data-inkgrain="on"] .tin.inked { -webkit-mask-image: none; mask-image: none; }
html[data-inkgrain="on"] .tin canvas { -webkit-mask-image: var(--inkgrain); mask-image: var(--inkgrain); -webkit-mask-size: 512px 512px; mask-size: 512px 512px; }
/* at the years the deck's written title sits top left and its incoming cards come in from the right: the shared replay arrow steps down under
   the title, the compass's side arrows move to the bottom corners (the years lane's measure, moved here from years.css) */
html[data-place="years"] .replay-ink { top: 252px; }
@media (max-width: 649px) { html[data-place="years"] .replay-ink { top: 232px; left: 8px; } }
html[data-place="years"] .compass a.right, html[data-place="years"] .compass a.left { top: auto; bottom: 128px; transform: none; }