/* FIELD NOTES · an editorial object on phone; a cinematic field on desktop.
   Display, prose and italic annotations belong to one optical type family.
   The second family is reserved for labels and the film's instruments. */
@font-face { font-family: Newsreader; src: url('./fonts/Newsreader.ttf') format('truetype'); font-style: normal; font-weight: 200 800; font-display: swap; }
@font-face { font-family: Newsreader; src: url('./fonts/Newsreader-Italic.ttf') format('truetype'); font-style: italic; font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('./fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
:root {
  --paper:#f1eddf; --leaf:#faf6ec; --ink:#294c5b; --muted:#596862;
  --accent:#b4472f; --line:#bdc4b5; --soft:#e8e8dc;
  --serif:Newsreader,Baskerville,Georgia,serif;
  --mono:'Plex Mono',ui-monospace,monospace;
  --gutter:clamp(1.375rem,5.6vw,3rem);
  --safe-top:env(safe-area-inset-top,0px); --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px);
  --visible-height:100dvh; --visible-top:0px;
  --ease:cubic-bezier(.2,.75,.2,1);
  font-family:var(--serif); font-size:16px; font-optical-sizing:auto;
  font-synthesis:none; color:var(--ink); background:var(--paper); color-scheme:light;
  -webkit-text-size-adjust:100%;
}
* { box-sizing:border-box; }
body { margin:0; min-width:280px; }
html { scroll-padding-block:1rem; }
body:has(dialog[open]) { overflow:hidden; }
[hidden] { display:none!important; }
h1,h2,p,figure { margin:0; }
h1,h2 { font-weight:400; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; color:inherit; }
button { cursor:pointer; border:0; padding:0; background:none; }
button,a { touch-action:manipulation; }
button,input,a { -webkit-tap-highlight-color:transparent; }
button:disabled { opacity:.45; cursor:default; }
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
[tabindex="-1"]:focus { outline:none; }
::selection { background:#b4472f33; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:22px; height:22px; flex:0 0 22px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; top:.5rem; left:.5rem; padding:.8rem; transform:translateY(-200%); background:var(--leaf); color:var(--ink); z-index:20; }
.skip-link:focus { transform:none; }
.site-shell { isolation:isolate; position:relative; max-width:780px; margin:auto; min-height:100svh; padding:max(1.1rem,var(--safe-top)) max(var(--gutter),var(--safe-right)) max(1rem,var(--safe-bottom)) max(var(--gutter),var(--safe-left)); }
.site-shell::before { content:''; position:absolute; inset:0; z-index:-1; background:url('../assets/paper-texture.png') repeat; opacity:.22; pointer-events:none; }
.mast { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:48px; }
.signature,.hand-signature { font:italic 2.5rem/1 var(--serif); letter-spacing:-.075em; }
.signature { display:inline-flex; align-items:baseline; min-height:44px; padding:.2rem .3rem .1rem 0; }
.signature-period { color:var(--accent); }
.hello { display:inline-flex; align-items:center; min-height:44px; gap:.5rem; font: .75rem/1.4 var(--mono); }
.hello .icon { width:17px; height:17px; flex-basis:17px; }
.hello span { padding-block:.3rem; border-bottom:1px solid var(--line); }
.film-caption { position:relative; margin:2rem 0 1.5rem; }
.entry-index { display:flex; align-items:center; gap:.6rem; font:.625rem/1.4 var(--mono); letter-spacing:.055em; text-transform:uppercase; margin-bottom:1.2rem; }
.index-rule { height:1px; width:22px; background:var(--line); }
.entry-index span:last-child { color:var(--muted); }
.title-composition { position:relative; }
h1 { font-size:clamp(3rem,13.6vw,5.2rem); line-height:.94; letter-spacing:-.05em; }
h1 em { display:block; margin-left:.9em; font-size:1.18em; font-weight:400; line-height:.92; }
.ink-gesture { position:absolute; width:63px; height:77px; right:.1rem; top:2.1rem; fill:none; stroke:var(--accent); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; transform:rotate(-8deg); }
.entry-note { width:max-content; max-width:100%; margin:1.3rem 0 0 auto; padding-right:.4rem; font:italic 1.125rem/1.35 var(--serif); letter-spacing:-.008em; }
.player-home { position:relative; margin-inline:-.35rem; }
.player-home::before { content:''; position:absolute; inset:-6px -4px 5px; transform:rotate(-.7deg); background:#e3e5d9; border:1px solid #c6cbbb; box-shadow:0 3px 10px #3146420a; }
.player { position:relative; min-width:0; padding:7px 7px 0; background:var(--leaf); box-shadow:0 1px 2px #273f3a18,0 8px 18px -10px #263e3740; }
.picture { position:relative; width:100%; aspect-ratio:16/9; background:#1e3e49 url('../rebuild/reel-still.jpg') center/contain no-repeat; }
video { display:block; width:100%; height:100%; object-fit:contain; }
/* The timeline is one generous touch surface, etched like a printer's rule. */
.player-rail { display:grid; grid-template-columns:auto 44px minmax(48px,1fr) auto 44px; align-items:center; padding:0 2px 4px; color:var(--ink); }
.timeline { grid-column:1/-1; position:relative; min-width:30px; height:44px; display:grid; align-items:center; }
.track { position:relative; height:1px; background:var(--line); margin-inline:6px; }
.track::after { content:''; position:absolute; inset:-2px 0 -3px; background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--line) calc(10% - 1px) 10%); }
.track span { position:absolute; inset-block:0; }
#elapsed { background:var(--accent); left:0; z-index:1; }
#buffered { background:var(--ink); opacity:.3; }
#seek { appearance:none; -webkit-appearance:none; position:absolute; width:100%; height:44px; margin:0; background:transparent; border:0; cursor:pointer; touch-action:pan-y; z-index:2; }
#seek::-webkit-slider-runnable-track { height:1px; background:transparent; }
#seek::-moz-range-track { height:1px; background:transparent; }
#seek::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:7px; height:13px; margin-top:-6px; border-radius:1px; background:var(--accent); box-shadow:0 0 0 3px var(--leaf); }
#seek::-moz-range-thumb { width:7px; height:13px; border:0; border-radius:1px; background:var(--accent); box-shadow:0 0 0 3px var(--leaf); }
#seek-preview { position:absolute; bottom:34px; left:var(--seek-x,50%); transform:translateX(-50%); padding:.35rem .5rem; font:.6875rem/1.4 var(--mono); color:var(--leaf); background:var(--ink); white-space:nowrap; pointer-events:none; z-index:3; }
.icon-button,.rail-action,.time-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; position:relative; }
.rail-action,.time-button { font:.75rem/1.4 var(--mono); gap:.25rem; white-space:nowrap; }
.play-button { justify-content:start; padding-right:.35rem; }
.play-button [data-play-label] { min-width:5ch; }
.sound-button [data-sound-label] { min-width:9ch; }
.player-dock { position:relative; min-width:0; }
.play-button .icon { color:var(--accent); }
.sound-button { gap:.35rem; padding-inline:.2rem; }
.sound-button[aria-pressed="true"]::after { content:''; position:absolute; bottom:5px; left:50%; width:16px; height:1px; background:var(--accent); transform:translateX(-50%); }
.icon-button,.rail-action,.time-button { transition:color .16s,background .16s; }
.icon-button:active,.rail-action:active { background:var(--soft); }
.time-button { justify-content:start; padding-left:.15rem; font-variant-numeric:tabular-nums; }
.duration { display:none; }
.text-action { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-width:44px; min-height:44px; font:.6875rem/1.5 var(--mono); }
.text-action .icon { width:18px; height:18px; flex-basis:18px; }
.sound-notice { padding:.6rem; font:.75rem/1.5 var(--mono); }
.picture-status { position:absolute; bottom:1rem; left:1rem; max-width:calc(100% - 2rem); padding:.5rem .7rem; font:.75rem/1.5 var(--mono); color:var(--ink); background:var(--leaf); }
.media-error { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:safe center; gap:.25rem; padding:1rem; overflow:auto; background:#f5f0e9ed; text-align:center; font-size:1rem; line-height:1.4; }
.media-error button { min-height:44px; text-decoration:underline; text-underline-offset:.3em; }
.playback-messages { display:grid; gap:.35rem; }
.playback-messages .sound-notice { color:var(--ink); background:var(--leaf); text-shadow:none; }
.screen .playback-messages .sound-notice { color:#111a1d; background:#f7f5ec; }
body[data-layout="exhibit"] .exhibition .playback-messages, .screen .playback-messages { position:absolute; bottom:calc(100% + .5rem); right:0; width:min(28rem,88vw); max-height:60svh; overflow:auto; }
body[data-layout="exhibit"] .exhibition .playback-messages .sound-notice { position:static; max-width:none; }
body[data-large-type] .screen .playback-messages { position:static; width:auto; max-height:none; }
.playback-recovery p { margin:0 0 .25rem; }
.playback-recovery button, #quality-status button { min-height:44px; padding:.25rem .65rem; text-decoration:underline; text-underline-offset:.25em; }
/* A visible marginal definition and a small printed object, not another section. */
.film-colophon { display:grid; grid-template-columns:minmax(0,1fr) 108px; align-items:center; gap:1.35rem; padding:1.9rem 0 1.65rem; }
.definition { position:relative; max-width:23em; font-size:.9375rem; line-height:1.42; color:var(--muted); text-wrap:pretty; }
.medium { display:block; margin-bottom:.5rem; font-size:1.3125rem; line-height:1.15; color:var(--ink); letter-spacing:-.035em; }
.medium i { margin-left:.25em; font-size:.8125rem; color:var(--muted); }
.definition::before { content:''; position:absolute; top:-.55rem; left:0; width:22px; height:1px; background:var(--accent); }
.note-door { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem; min-height:132px; padding:.25rem 0; }
.note-object { position:relative; display:block; width:76px; height:90px; perspective:500px; }
.note-papers { position:relative; display:block; width:100%; height:100%; }
.slip { position:absolute; inset:0; display:block; border:1px solid #c2c9be; transform-origin:50% 86%; box-shadow:0 1px 1px #213e3c12,0 4px 7px #2f494020; transition:transform .45s var(--ease),box-shadow .45s var(--ease); }
.slip-back { background:#78969b; transform:rotate(-11deg) translate(-5px,0); }
.slip-middle { background:#e3e9df; transform:rotate(8deg) translate(4px,0); }
.slip-lines { display:block; position:absolute; inset:12px 8px; background:repeating-linear-gradient(0deg,transparent 0 7px,#3a616425 7px 8px); }
.slip-front { overflow:hidden; background:var(--leaf) url('../assets/paper-texture.png'); color:#294c5b; transform:rotate(-3deg); }
.slip-front::after { content:''; position:absolute; bottom:18px; left:7px; right:7px; border-bottom:1px solid #bcc5b7; }
.slip-number { position:absolute; left:8px; top:6px; font:.5rem/1 var(--mono); color:var(--muted); }
.slip-monogram { position:absolute; left:17px; top:6px; font:italic 4.9rem/1 var(--serif); letter-spacing:-.1em; }
.slip-star { position:absolute; right:2px; top:16px; width:25px; height:25px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; transform:rotate(-10deg); }
.slip-bottom { position:absolute; bottom:5px; inset-inline:0; text-align:center; font:italic .625rem/1 var(--serif); }
.door-copy { display:inline-flex; align-items:center; gap:.25rem; font:.6875rem/1.4 var(--mono); }
.door-copy .icon { width:15px; height:15px; flex-basis:15px; transition:transform .3s var(--ease); }
.note-door:focus-visible .slip-back { transform:rotate(-20deg) translate(-9px,0); }
.note-door:focus-visible .slip-middle { transform:rotate(15deg) translate(7px,-2px); }
.note-door:focus-visible .slip-front { transform:rotate(-4deg) translateY(-6px); }
.site-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); padding-top:1rem; font:.5625rem/1.6 var(--mono); color:var(--muted); }
.site-foot p { max-width:32em; }
.foot-star { width:20px; height:20px; fill:none; stroke:var(--accent); stroke-width:1.5; flex:0 0 20px; }
/* One authored reading sheet: navigation belongs to its edge, not the film.
   Headings and prose follow one reading path at every width. */
.reading-view { --reading-pad:1rem; margin-block:1.25rem 1.75rem; background:var(--leaf); color:var(--ink); border:1px solid #d6d9cb; box-shadow:0 1px 2px #2c453810,0 12px 28px -16px #2f4a3733; }
.reading-return { position:sticky; top:max(.5rem,var(--safe-top)); z-index:4; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 .75rem; padding:.25rem var(--reading-pad); border-bottom:1px solid var(--line); background:var(--leaf); }
.return-film { display:inline-flex; align-items:center; min-height:48px; max-width:100%; gap:.5rem; padding:.5rem 0; color:var(--ink); font:.6875rem/1.5 var(--mono); text-shadow:none; }
.return-film span { text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:.35em; }
.return-film:hover span { text-decoration-color:var(--ink); }
.return-film .icon { width:18px; height:18px; flex-basis:18px; }
.return-time { max-width:16ch; color:var(--muted); font:.5625rem/1.6 var(--mono); text-shadow:none; }
.letter { position:relative; padding:1rem var(--reading-pad) 1.25rem; }
.letter::before { content:''; position:absolute; inset:0; pointer-events:none; background:url('../assets/paper-texture.png'); opacity:.16; }
.letter-mast { position:relative; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0 .5rem; margin-bottom:.375rem; }
.letter-mast h2 { font:.5625rem/1.5 var(--mono); letter-spacing:.025em; color:var(--muted); }
#notes-toggle-all { font:.6875rem/1.5 var(--mono); color:var(--muted); }
/* Two text roles throughout the essay: 16px prose, 18px section titles.
   Emphasis changes only weight; no oversized lead or separate italic blocks. */
.letter-text { position:relative; min-width:0; font:400 1rem/1.45 var(--serif); }
.note-section { border-top:1px solid var(--line); }
.note-heading { display:block; min-height:44px; cursor:pointer; list-style:none; scroll-margin-block:5rem 1rem; }
.note-heading::-webkit-details-marker { display:none; }
.note-heading h3 { display:flex; align-items:baseline; gap:.5rem; min-height:44px; margin:0; padding:.5rem 0; color:var(--accent); font:500 1.125rem/1.25 var(--serif); letter-spacing:-.015em; }
.note-title { flex:1; min-width:0; }
.note-number { flex:none; font:.5625rem/1.4 var(--mono); }
.note-toggle { flex:none; align-self:center; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.25; }
.note-section[open] > .note-heading .note-toggle-stem { display:none; }
.note-heading:hover .note-title { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; }
.note-panel { padding:.125rem 0 .875rem; }
.note-deck { margin:0 0 .5rem; font:inherit; text-wrap:pretty; }
.note-copy { min-width:0; font:inherit; overflow-wrap:anywhere; text-wrap:pretty; }
.note-copy p + p { margin-top:.5rem; }
.note-copy strong { font-weight:500; }
.discretion-note { padding-left:.65rem; border-left:1px solid var(--accent); }
.connections-list { list-style:disc; padding:0; padding-inline-start:.875rem; margin:0; }
.connections-list > li::marker { color:var(--accent); font-size:.65em; }
.connections-list li + li { margin-top:.625rem; }
.letter-close { border-top:1px solid var(--line); padding-top:.875rem; }
.letter-signoff { position:relative; display:flex; align-items:center; gap:1rem; margin:.875rem 0 .5rem; }
.hand-signature { font-size:2.2rem; }
.signoff-gesture { width:34px; height:40px; fill:none; stroke:var(--accent); stroke-width:1.8; transform:rotate(76deg); }
.letter-contact { position:relative; border-top:1px solid var(--line); padding-top:.7rem; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:0 .75rem; }
.letter-email { display:inline-flex; align-items:center; gap:.3rem; min-height:44px; font:.6875rem/1.6 var(--mono); overflow-wrap:anywhere; }
.letter-email .icon { width:14px; height:14px; flex-basis:14px; }
.letter-contact .text-action { font-size:.6875rem; }
.letter :is(h2,h3,summary,a,button,[tabindex]) { scroll-margin-block:6rem 1rem; }
/* Correspondence remains available from the film; About also offers it directly. */
dialog { color:var(--ink); background:var(--leaf); border:1px solid var(--line); padding:0; }
dialog::backdrop { background:#294c5b33; backdrop-filter:blur(5px); }
.contact-card { position:fixed; inset-block:var(--visible-top) auto; margin-block:max(1rem,var(--safe-top)); margin-inline:auto; width:min(34rem,calc(100% - max(2rem,var(--safe-left) + var(--safe-right) + 1rem))); max-height:calc(var(--visible-height) - max(1rem,var(--safe-top)) - max(1rem,var(--safe-bottom))); padding:clamp(1.25rem,5.5vw,2.6rem); overflow:auto; overscroll-behavior:contain; box-shadow:0 20px 80px #152f3630; }
@media (min-height:650px) { .contact-card { margin-block:auto; inset-block:var(--visible-top) 0; } }
.dialog-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:-.4rem -.4rem 1.5rem 0; border-bottom:1px solid var(--line); padding-bottom:.65rem; }
.contact-index { font:.625rem/1.4 var(--mono); min-width:0; overflow-wrap:anywhere; }
.dialog-top .icon-button { flex:0 0 44px; }
.contact-card h2 { font-size:clamp(2rem,8.6vw,3rem); line-height:1.08; letter-spacing:-.04em; }
.contact-card h2 em { color:var(--accent); }
.contact-invitation { font-size:1.125rem; line-height:1.45; margin-top:1.5rem; color:var(--muted); text-wrap:pretty; }
.contact-invitation,.note-heading,.definition { overflow-wrap:anywhere; }
.address-block { margin-top:1.5rem; border-top:1px solid var(--line); padding-top:1rem; }
.address { font:.75rem/1.6 var(--mono); overflow-wrap:anywhere; user-select:text; }
.contact-actions { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.4rem; }
.copy-status { width:100%; font:.625rem/1.6 var(--mono); color:var(--muted); }
.copy-status:not(:empty) { margin:.4rem 0; }
.contact-star { display:block; margin:1.2rem auto 0; width:28px; height:28px; fill:none; stroke:var(--accent); stroke-width:1.4; }
/* Film-only viewing rules live in viewing.css. */
.native-audio { margin:1rem 0; }
.native-audio audio { max-width:100%; }
body[data-ready] .native-audio { display:none; }
.no-script-note { font-size:1rem; line-height:1.5; margin-top:1rem; }
.exhibition { display:none; }
/* Desktop composition is owned exclusively by cinema.css. */
@media (min-width:500px) {
  .film-caption { margin-top:2.3rem; margin-bottom:2rem; }
  .entry-index { margin-bottom:1.4rem; }
  h1 { max-width:10em; }
  h1 em { margin-left:1.4em; }
  .ink-gesture { width:80px; height:96px; right:2rem; top:2.5rem; }
  .entry-note { font-size:1.4rem; margin-top:1.1rem; }
  .film-colophon { grid-template-columns:minmax(0,1fr) 150px; gap:2.5rem; padding-block:2.25rem; }
  .definition { font-size:1.1rem; max-width:21em; }
  .medium { font-size:1.5rem; }
  .note-object { width:84px; height:100px; }
  .slip-monogram { font-size:5.4rem; }
  .door-copy { font-size:.6875rem; }
  .player-rail { padding-inline:.65rem; }
  .rail-action,.time-button { font-size:.75rem; }
  .duration { display:inline; }
  .reading-view { --reading-pad:2rem; }
  .letter { padding-block:1.25rem 1.75rem; }
  .letter-email,.letter-contact .text-action { font-size:.6875rem; }
}
/* The film-only landscape stage is owned exclusively by viewing.css. */
@media (max-width:349px) {
  :root { --gutter:1.1rem; }
  .film-caption { margin-top:1.6rem; }
  h1 { font-size:2.75rem; }
  .ink-gesture { width:47px; height:60px; right:-.15rem; top:1.85rem; }
  .entry-note { font-size:1.05rem; }
  .player-rail { grid-template-columns:auto 44px minmax(44px,1fr) auto 44px; padding-inline:0; }
  .rail-action,.time-button { font-size:.6875rem; gap:.1rem; }
  .sound-button { padding:0; }
  .sound-button .icon { display:none; }
  .film-colophon { grid-template-columns:minmax(0,1fr) 100px; gap:1rem; }
  .definition { font-size:.875rem; }
  .medium { font-size:1.25rem; }
  .door-copy { font-size:.625rem; }
  .reading-view { --reading-pad:.75rem; }
  .return-film { font-size:.625rem; }
  .return-time { font-size:.5rem; max-width:10ch; }
  .letter-email { font-size:.625rem; }
}
/* Enlarged text gives up fixed composition, never the information or controls. */
body[data-large-type] { --gutter:clamp(16px,4vw,32px); }
body[data-large-type] .mast { flex-wrap:wrap; gap:.25rem 1rem; }
body[data-large-type] .signature { font-size:2rem; }
body[data-large-type] .film-caption { margin-top:1.5rem; }
body[data-large-type] h1 { font-size:2.25rem; overflow-wrap:anywhere; }
body[data-large-type] h1 em { margin-left:0; font-size:1em; }
body[data-large-type] .ink-gesture { display:none; }
body[data-large-type] .entry-index { flex-wrap:wrap; }
body[data-large-type] .entry-note { font-size:1rem; width:auto; }
body[data-large-type] .entry-note br { display:none; }
body[data-large-type] .player-home { margin-inline:0; }
body[data-large-type] .player-home::before { inset:-3px; transform:rotate(-.3deg); }
body[data-large-type] .player-rail { grid-template-columns:auto 44px 1fr 44px; }
body[data-large-type] .time-button { grid-column:3; }
body[data-large-type] .sound-button { grid-row:3; grid-column:1/-1; justify-self:start; }
body[data-large-type] #expand-button { grid-column:4; grid-row:2; }
body[data-large-type] .duration { display:none; }
body[data-large-type] .film-colophon { grid-template-columns:1fr; }
body[data-large-type] .note-door { flex-direction:row; gap:1rem; justify-content:start; padding:.5rem 18px; }
body[data-large-type] .note-object { flex-shrink:0; }
body[data-large-type] .slip-monogram { font-size:76px; }
body[data-large-type] .slip-number { font-size:8px; }
body[data-large-type] .slip-bottom { font-size:10px; }
body[data-large-type] .reading-view { --reading-pad:clamp(12px,2vw,24px); }
body[data-large-type] .reading-return { position:static; }
body[data-large-type] .return-time { max-width:none; }
body[data-large-type] .letter { padding-block:1rem; }
body[data-large-type] .note-section { display:block; }
body[data-large-type] .letter-signoff { flex-wrap:wrap; gap:.4rem; }
body[data-large-type] .hand-signature { font-size:min(2.2rem,64px); }
body[data-large-type] .letter-mast { flex-wrap:wrap; }
body[data-large-type] .letter-email { font-size:.5625rem; min-width:0; }
body[data-large-type] .contact-card { padding:.75rem; }
body[data-large-type] .dialog-top { gap:.3rem; }
body[data-large-type] .contact-card h2 { font-size:1.75rem; overflow-wrap:anywhere; }
body[data-large-type] .contact-card { width:calc(100% - 32px); }
/* Very short windows, keyboard space or longer messages can outgrow a fixed
   canvas. They get a compact editorial flow, with every item still present. */
body[data-compact-flow] .site-shell { max-width:900px; padding-top:max(.5rem,var(--safe-top)); }
body[data-compact-flow] .film-caption { margin:.6rem 0 1.2rem; }
body[data-compact-flow] .entry-index { margin-bottom:.6rem; }
body[data-compact-flow] h1 { font-size:clamp(2.2rem,6vw,3.2rem); line-height:1.1; }
body[data-compact-flow] h1 em { display:inline; margin:0; font-size:1em; }
body[data-compact-flow] .ink-gesture { width:36px; height:44px; top:-.2rem; right:1rem; }
body[data-compact-flow] .entry-note { font-size:1.1rem; margin-top:.3rem; }
body[data-compact-flow] .entry-note br { display:none; }
body[data-compact-flow] .film-colophon { padding-block:1.5rem; }
@media (max-width:319px) {
  .player-rail { grid-template-columns:auto 44px minmax(44px,1fr) 44px; }
  .sound-button { grid-row:3; grid-column:1/-1; justify-self:start; }
  #expand-button { grid-column:4; grid-row:2; }
}
@media (max-height:499px) { .reading-return { position:static; } }
body[data-large-type] .door-copy { white-space:normal; min-width:0; }
body[data-large-type] .definition { min-width:0; }
body[data-large-type] .door-copy { overflow-wrap:anywhere; }
@media (max-width:319px) {
  body[data-large-type] .signature { font-size:min(2rem,80px); }
  body[data-large-type] .note-door { gap:.5rem; }
}
@media (hover:hover) and (pointer:fine) {
  .hello:hover span { border-color:var(--accent); }
  .hello:hover .icon,.door-copy .icon { transition:transform .3s var(--ease); }
  .hello:hover .icon,.note-door:hover .door-copy .icon { transform:translate(2px,-2px); }
  .icon-button:hover,.rail-action:hover { background:var(--soft); }
  .text-action:hover,.letter-email:hover { text-decoration:underline; text-underline-offset:.3em; }
  .note-door:hover .slip-back { transform:rotate(-20deg) translate(-9px,0); }
  .note-door:hover .slip-middle { transform:rotate(15deg) translate(7px,-2px); }
  .note-door:hover .slip-front { transform:rotate(-4deg) translateY(-6px); box-shadow:0 1px 2px #213e3c18,0 12px 13px #2f494027; }
}
@media (prefers-reduced-motion:no-preference) {
  .route-arrive .letter { animation:unfold .4s var(--ease); transform-origin:85% 100%; }
  .route-arrive .film-caption { animation:return-note .3s var(--ease); }
  .contact-card[open] { animation:unfold .3s var(--ease); }
  .note-door:active .slip-front { transform:rotate(0) translateY(-2px); transition-duration:.1s; }
  @keyframes unfold { from { opacity:.5; transform:translateY(8px); } to { opacity:1; transform:none; } }
  @keyframes return-note { from { opacity:.6; transform:translateY(3px); } to { opacity:1; transform:none; } }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
@media (forced-colors:active) {
  .slip,.letter,.definition,.player-rail { border:1px solid CanvasText; }
  .track { background:CanvasText; }
  .track::after { display:none; }
}