/* 回眸 RETOUR — the frame's grammar. One dark room, one flame, paper for the deal. */
:root {
  color-scheme: dark;
  --room: #0b0806;          /* the stage background: the same value */
  --ink: #efe4d2;           /* warm white, firelit */
  --dim: #a8988a;
  --faint: #8f8173;
  --paper: #ece5d8;         /* blotter paper */
  --paper-ink: #1c1612;
  --paper-dim: #5e5248;
  --accent: #ff7a2e;        /* flame: warmth, where it touches you, act here */
  --sea: #8fa3ab; --wax: #e0ae62; --ember: #c2582c;
  --zh: "Cactus Classical Serif", "Noto Serif TC", "PMingLiU", serif;
  --la: "Bodoni Moda", "Didot", serif;
  --text: "Chocolate Classical Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --gutter: max(16px, 6vw);
}
html { background: var(--room); }
body { background: var(--room); color: var(--ink); font: 400 17px/1.8 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--accent); color: #140c07; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; }
a { color: inherit; }
i[lang], .la { font-family: var(--la); font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: 0; }

.skip { position: fixed; left: var(--gutter); top: -60px; z-index: 80; background: var(--paper); color: var(--paper-ink); padding: .4em .9em; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- loader: a blotter strip that wicks as the page loads; its tip becomes shot one's flame ---------- */
#loader { display: none; }
.js #loader { display: block; position: fixed; inset: 0; z-index: 70; background: var(--room); pointer-events: none; }
.ld-strip { position: absolute; left: calc(var(--fx, 50%) - 9px); top: calc(var(--fy, 56%) + 10px); width: 18px; height: 38vh; background: #d9d0c1; clip-path: polygon(0 3%, 50% 0, 100% 3%, 100% 100%, 0 100%); opacity: .9; }
.ld-soak { position: absolute; inset: 0; background: linear-gradient(#ffb06a, #b4691f 30%, #7a3f12); transform-origin: 50% 0; transform: scaleY(var(--load, 0)); }
.ld-flame { position: absolute; left: var(--fx, 50%); top: var(--fy, 56%); width: 22px; height: 36px; margin: -30px 0 0 -11px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 72%, #fff6e0 0 18%, #ffc46b 34%, var(--accent) 58%, rgba(255,122,46,0) 72%); filter: blur(.4px); opacity: 0; transform: scale(.2); }
.ld-flame::after { content: ""; position: absolute; inset: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255,140,60,.28), rgba(255,140,60,0) 60%); }
.ld-say { position: absolute; left: 0; right: 0; bottom: calc(5vh + var(--safe-bottom)); text-align: center; font: 500 11px/1 var(--la); letter-spacing: .4em; color: var(--faint); }

/* ---------- chrome: four instruments ---------- */
.chrome { position: fixed; z-index: 75; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: max(14px, 2.6vmin) var(--gutter) 0; pointer-events: none; }
.chrome > * { pointer-events: auto; }
.mark { text-decoration: none; display: flex; align-items: baseline; gap: .7em; line-height: 1; }
.mark b { font: 500 14px/1 var(--la); letter-spacing: .34em; }
.mark span { font-size: 12px; color: var(--dim); letter-spacing: .18em; }
/* the ambient toggle: flame, vapour, drift and grain hold still while pressed (also the way to start them in the reduced cut) */
.ambient { margin: 0 1.4em 0 auto; display: inline-flex; align-items: center; gap: .6em; min-height: 44px; padding: 0 .4em; border: 0; background: none; color: var(--dim); cursor: pointer;
  font: 400 13px/1 var(--text); letter-spacing: .14em; }
.ambient i { position: relative; width: 9px; height: 10px; flex: none; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.ambient[aria-pressed="true"] i { border: 0; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ambient:hover, .ambient:focus-visible { color: var(--ink); }
.paper-top .ambient { color: var(--paper-dim); }
.paper-top .ambient:hover, .paper-top .ambient:focus-visible { color: var(--paper-ink); }

/* the CTA is a blotter strip with a soaked tip */
.cta-strip { --w: 0.22; position: relative; display: inline-flex; align-items: center; height: 38px; padding: 0 2.6em 0 1.1em; background: var(--paper); color: var(--paper-ink);
  font: 500 14px/1 var(--text); letter-spacing: .14em; text-decoration: none; border: 0; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.cta-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,122,46,0) calc((1 - var(--w)) * 100% - 18px), rgba(255,122,46,.9) calc((1 - var(--w)) * 100% + 10px), var(--accent));
  mix-blend-mode: multiply; pointer-events: none; }   /* --w is tweened by main.js on hover / focus / input: no CSS transition */
.cta-strip > span { position: relative; z-index: 1; }
.cta-strip:hover, .cta-strip:focus-visible { --w: 0.66; }
.cta-strip:active { transform: translateY(1px); }
@property --w { syntax: "<number>"; inherits: true; initial-value: 0.22; }

.gauge { position: fixed; z-index: 30; right: calc(var(--gutter) * .45); top: 50%; transform: translateY(-50%); display: flex; gap: 4px; align-items: stretch; height: max(44vh, 260px); pointer-events: none; }
.g-strip { position: relative; width: 6px; background: rgba(236,229,216,.16); clip-path: polygon(0 0, 100% 0, 100% 97%, 50% 100%, 0 97%); }
.g-soak { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: var(--note, var(--sea)); transform-origin: 50% 100%; transform: scaleY(var(--soak, 0)); }
/* the notes along the strip are the scene index: real links, 12 px, 44 px targets, the current one in the flame */
.gauge nav { display: flex; }
.g-index { list-style: none; margin: -12px 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; }
.g-index a { pointer-events: auto; display: flex; align-items: center; justify-content: center; width: 44px; min-height: 52px; writing-mode: vertical-rl;
  font: 400 12px/1 var(--text); letter-spacing: .24em; color: var(--dim); text-decoration: none; }
.g-index a:hover { color: var(--ink); }
.g-index a:focus-visible { color: var(--ink); outline-offset: -2px; }
.g-index a[aria-current] { color: var(--accent); }
.on-paper .g-index a { color: var(--paper-dim); }
.on-paper .g-index a:hover, .on-paper .g-index a:focus-visible { color: var(--paper-ink); }
.on-paper .g-index a[aria-current] { color: #a8410f; }
.on-paper .g-index a:focus-visible { outline-color: #a8410f; }

/* phones: the index lives in the thumb zone, a pill above the browser bar that opens the scene list */
.pill { display: none; }
@media (max-width: 760px) and (max-aspect-ratio: 5/4) {
  .pill { display: block; position: fixed; z-index: 76; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--safe-bottom)); }
  .pill-bar { display: flex; align-items: stretch; height: 46px; background: rgba(11,8,6,.86); border: 1px solid rgba(236,229,216,.18); border-radius: 23px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .pill-cta { display: flex; align-items: center; padding: 0 1.1em 0 1.3em; color: var(--ink); font: 500 14px/1 var(--text); letter-spacing: .14em; text-decoration: none; white-space: nowrap; border-radius: 23px 0 0 23px; }
  .pill-cta::before { content: ""; width: 6px; height: 6px; margin-right: .7em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px 2px rgba(255,122,46,.45); }
  .pill-index { display: flex; align-items: center; gap: .5em; min-width: 76px; padding: 0 1.1em 0 1em; border: 0; border-left: 1px solid rgba(236,229,216,.18); background: none; color: var(--dim); cursor: pointer;
    font: 400 14px/1 var(--text); letter-spacing: .12em; white-space: nowrap; border-radius: 0 23px 23px 0; }
  .pill-index i { width: 14px; height: 9px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; position: relative; box-sizing: border-box; }
  .pill-index i::after { content: ""; position: absolute; left: 0; right: 0; top: 2.25px; border-top: 1.5px solid currentColor; }
  .pill-index[aria-expanded="true"] { color: var(--ink); }
  .pill a:focus-visible, .pill button:focus-visible { outline-offset: -4px; }
  .sheet { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: min(78vw, 300px); padding: 8px 0; background: rgba(11,8,6,.94); border: 1px solid rgba(236,229,216,.16); }
  .sheet[hidden] { display: none; }
  .sheet ol { list-style: none; margin: 0; padding: 0; }
  .sheet a { display: flex; align-items: baseline; gap: 1em; min-height: 48px; box-sizing: border-box; padding: .95em 1.3em; color: var(--ink); text-decoration: none; font: 400 17px/1.2 var(--zh); letter-spacing: .08em; }
  .sheet a i { font: 400 14px/1.2 var(--text); font-style: normal; color: var(--dim); letter-spacing: .06em; }
  .sheet a[aria-current] span { color: var(--accent); }
  .sheet a:focus-visible { outline-offset: -4px; }
  /* never cover the field being typed in (focus not obscured): the pill steps aside while the reservation has focus */
  body:has(.reserve :focus) .pill { display: none; }
  /* the pill carries the CTA on phones; the chrome keeps the wordmark and the ambient toggle */
  .chrome .cta-strip { display: none; }
  .ambient { margin-right: -.4em; padding: 0 .7em; min-width: 44px; justify-content: center; }
  .ambient span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.clock { position: fixed; z-index: 30; left: var(--gutter); bottom: calc(max(14px, 3vmin) + var(--safe-bottom)); display: flex; align-items: baseline; gap: .8em; font-size: 12px; letter-spacing: .2em; color: var(--dim); pointer-events: none; }
.clock b { font: 400 22px/1 var(--la); letter-spacing: .02em; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }

/* ---------- the stage ---------- */
#stage { background: var(--room); }
.no-webgl #stage { display: none; }
.no-webgl body { background: radial-gradient(60vmin 50vmin at 50% 56%, rgba(255,140,60,.22), rgba(255,140,60,0) 70%), var(--room); }

/* ---------- scenes ---------- */
.frame { box-sizing: border-box; }
[data-scene][tabindex="-1"]:focus { outline: none; }   /* the index moves focus to the scene it jumps to; the scene itself is not a control */
.copy { isolation: isolate; position: absolute; left: var(--gutter); bottom: calc(15svh + var(--safe-bottom)); max-width: 30em; }
.kick { margin: 0 0 1.1em; font-size: 14px; letter-spacing: .18em; color: var(--dim); }
h1, h2 { margin: 0; font-family: var(--zh); font-weight: 400; color: var(--ink); line-height: 1.2; letter-spacing: .04em; }
h2 { font-size: clamp(28px, 3.1vw + .6svh, 54px); }
.mat { margin: .9em 0 0; font-size: 18px; color: var(--dim); }
.mat .la { color: var(--ink); }

.s-light .copy { left: 50%; transform: translateX(-50%); bottom: calc(11svh + var(--safe-bottom)); text-align: center; max-width: none; width: max-content; }
.title { display: flex; align-items: baseline; justify-content: center; gap: .5em; font-size: clamp(30px, 3.4vw, 60px); }
.t-zh { font-family: var(--zh); letter-spacing: .12em; }
.t-la { font-family: var(--la); font-style: italic; font-size: .82em; letter-spacing: 0; color: var(--dim); }
.lede { margin: 1.1em 0 0; font-size: 15px; letter-spacing: .14em; color: var(--dim); }

.s-close .copy { left: auto; right: calc(var(--gutter) * 1.4); bottom: calc(14svh + var(--safe-bottom)); text-align: right; max-width: 18em; }
.s-close .warm { margin: 1em 0 0; font-family: var(--zh); font-size: clamp(18px, 1.5vw, 24px); line-height: 1.6; color: var(--ink); }

.s-try .copy { bottom: auto; top: 22svh; }
.s-try .copy p { margin: .8em 0 0; color: var(--dim); font-size: 16px; }
.try-wrap { position: absolute; left: calc(var(--gutter) + 31em); top: 16svh; display: flex; align-items: flex-end; gap: 22px; }
.strip { position: relative; width: 46px; height: min(56svh, 520px); padding: 0; border: 0; background: var(--paper); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%); }
.strip:active { cursor: grabbing; }
.strip .soak { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(to top, var(--soak-c, var(--sea)) 0 70%, color-mix(in srgb, var(--soak-c, var(--sea)) 40%, transparent)); transform-origin: 50% 100%; transform: scaleY(var(--h, 0)); mix-blend-mode: multiply; }
.strip .lbl { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); writing-mode: vertical-rl; font: 500 13px/1 var(--text); letter-spacing: .3em; color: var(--paper-ink); }
.strip .tip { position: absolute; left: 50%; bottom: 2px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px 4px rgba(255,122,46,.5); opacity: var(--hot, 0); }
.try-read { width: 13em; font-size: 14px; color: var(--dim); }
.try-read p { margin: 0; }
.try-h { display: flex; align-items: baseline; font: 400 34px/1.1 var(--la); color: var(--accent); font-variant-numeric: lining-nums tabular-nums; margin-bottom: .3em; }
.try-h .sep { padding: 0 .04em; }
/* the odometer dims a leading zero; on a clock that zero is part of the hour (4:05), so it stays at full ink */
.try-h .tfx-stage > span > span { opacity: 1 !important; }
/* each digit window is one 1.1em line box, taller than the digits' ink: mid-roll, the neighbouring digits showed in that
   slack and reached into the note name below. Clip each window to the ink band so only the rolling digit shows. */
.try-h .tfx-stage > span > span { clip-path: inset(.1em -.05em .13em -.05em); }
.try-read .now { font: 400 20px/1.3 var(--zh); letter-spacing: .04em; color: var(--ink); min-height: 1.3em; }
/* slit-scan centres its line; this one hangs from the left edge with the hour */
.try-read .now .tfx-stage > span { justify-self: start !important; }
.try-read .now .tfx-stage > span > span { align-items: flex-start !important; }
/* slit-scan's outer slits are open-ended (top band from -40 %, bottom band to 140 % of the line), so mid-switch the
   outgoing copy rose above the line into the hour and the incoming one hung below it: keep the roll inside its line */
.try-read .now .tfx-stage { clip-path: inset(0 -.3em); }
.notes { display: flex; gap: 8px; margin-top: 1.5em; }
.notes button { position: relative; flex: none; white-space: nowrap; height: 34px; padding: 0 1.2em 0 .9em; border: 0; background: rgba(236,229,216,.1); color: var(--dim); cursor: pointer;
  font: 400 13px/1 var(--text); letter-spacing: .18em; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.notes button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); opacity: .55; }
.notes button:nth-child(1) { --c: var(--sea); } .notes button:nth-child(2) { --c: var(--wax); } .notes button:nth-child(3) { --c: var(--ember); }
.notes button:hover, .notes button:focus-visible { color: var(--ink); background: rgba(236,229,216,.16); }
.notes button.on { color: var(--ink); background: rgba(236,229,216,.18); }
.notes button.on::before { width: 5px; opacity: 1; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the deal, on blotter paper ---------- */
.s-offer > .frame { background: var(--paper); color: var(--paper-ink); padding: 16svh var(--gutter) 14svh; position: relative; }
.s-offer > .frame::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .4  0 0 0 0 .34  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
.offer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30em); column-gap: 6vw; max-width: 1180px; margin: 0 auto; align-items: start; }
.offer > div { display: contents; }
.offer .kick, .offer h2, .offer .lead { grid-column: 1; }
.offer .facts { grid-column: 2; grid-row: 1 / span 3; margin-top: .4em; }
.s-offer h2 { color: var(--paper-ink); font-size: clamp(34px, 3.6vw, 58px); }
.s-offer .kick { color: var(--paper-dim); }
.offer .lead { margin: 1.2em 0 0; font-size: 18px; line-height: 1.85; max-width: 26em; }
.facts { margin: 2.4em 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(28,22,18,.22); max-width: 30em; }
.facts li { display: flex; gap: 1.2em; padding: .85em 0; border-bottom: 1px solid rgba(28,22,18,.22); font-size: 16px; }
.facts li > span:first-child { flex: 0 0 5.4em; color: var(--paper-dim); font-size: 13px; letter-spacing: .14em; padding-top: .2em; }
.facts .num { font-variant-numeric: lining-nums tabular-nums; letter-spacing: .02em; }

/* the reservation is a blotter strip laid across the paper: the email is a pencil line on it, and the strip's
   soaked tip, in the colour of the hour the visitor held, is the button. --w (tweened by main.js on hover, focus
   and a whole address) wicks the wet edge further along the strip. */
.reserve { grid-column: 1 / -1; margin-top: 9svh; --paper-focus: #a8410f; }
.blotter { --held: var(--accent); --w: 0.22; --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .55' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36  0 0 0 0 .3  0 0 0 0 .24  0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='320' height='160' filter='url(%23f)'/%3E%3C/svg%3E"); --wick: calc((var(--w) - .22) * 150px);
  position: relative; isolation: isolate; display: flex; width: min(100%, 940px); aspect-ratio: 9 / 2; transform: rotate(-1.5deg); transform-origin: 30% 50%; }
.blotter::before, .blotter::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 200' preserveAspectRatio='none'%3E%3Cpath d='M4 0H895L898 9 896 21 899 34 895 47 898 61 896 74 899 88 895 101 898 115 896 128 899 141 895 155 898 168 896 181 899 192 896 200H5L2 190 5 177 1 163 4 150 2 136 6 122 2 109 5 95 1 82 4 68 2 55 5 41 1 28 4 14 2 6Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 200' preserveAspectRatio='none'%3E%3Cpath d='M4 0H895L898 9 896 21 899 34 895 47 898 61 896 74 899 88 895 101 898 115 896 128 899 141 895 155 898 168 896 181 899 192 896 200H5L2 190 5 177 1 163 4 150 2 136 6 122 2 109 5 95 1 82 4 68 2 55 5 41 1 28 4 14 2 6Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.blotter::before { background: rgba(28,22,18,.3); transform: translateY(1px); }      /* the 1 px where the strip touches the paper */
.blotter::after { background: var(--fibre),
  linear-gradient(90deg, #f3ede1 calc(82% - var(--wick) - 22px), color-mix(in srgb, var(--held) 64%, #f3ede1) calc(82% - var(--wick)), color-mix(in srgb, var(--held) 50%, #f3ede1) calc(82% - var(--wick) + 16px), color-mix(in srgb, var(--held) 74%, #f3ede1) 97%); }
.b-body { flex: 1; min-width: 0; padding: 22px 30px 12px 36px; display: flex; flex-direction: column; }
.reserve h3 { margin: 0; font: 400 16px/1.4 var(--zh); letter-spacing: .16em; color: var(--paper-dim); }
/* the held hour, pencilled along the strip */
.yours { margin: .3em 0 0; font: 400 17px/1.5 var(--zh); color: var(--paper-ink); min-height: 1.5em; letter-spacing: .04em; }
.yours .la { font-size: 1.32em; color: var(--paper-ink); }
.reserve label { display: block; margin: auto 0 4px; padding-top: .5em; font-size: 13px; letter-spacing: .16em; color: var(--paper-dim); }
.reserve input { box-sizing: border-box; width: 100%; height: 40px; padding: 0 .1em; border: 0; border-bottom: 1px solid rgba(28,22,18,.4); border-radius: 0; background: transparent; color: var(--paper-ink); font: 400 18px var(--text); }
.reserve input::placeholder { color: rgba(94,82,72,.75); }
.reserve input:focus { outline: 2px solid var(--paper-focus); outline-offset: 1px; border-bottom: 2px solid var(--paper-ink); }
.reserve input[aria-invalid="true"] { border-bottom: 2px solid #a3301a; }
.reserve .err { margin: .4em 0 0; font-size: 14px; line-height: 1.4; color: #a3301a; min-height: 1.4em; }
.reserve .cta-strip { flex: 0 0 18%; height: auto; margin: 0; padding: 0 0 0 .3em; justify-content: center; background: none; clip-path: none; color: var(--paper-ink);
  font: 500 16px/1.3 var(--text); letter-spacing: .14em; }
.reserve .cta-strip::after { content: none; }
.reserve .cta-strip:focus-visible { outline: 2px solid var(--paper-focus); outline-offset: -8px; }
.reserve .cta-strip:active { transform: none; }
.reserve .cta-strip:active > span { transform: translateY(1px); }
.reserve .cta-strip:disabled { cursor: default; }
.reserve .micro { margin: 1.3em 0 0; font-size: 13px; color: var(--paper-dim); }
.reserve .done { margin: .8em 0 0; font-size: 15px; line-height: 1.75; max-width: 40em; }

/* ---------- final image ---------- */
.s-final .copy { left: 50%; transform: translateX(-50%); text-align: center; bottom: calc(12svh + var(--safe-bottom)); max-width: none; width: max-content; display: grid; justify-items: center; gap: 1.4em; }
.s-final h2 { font-size: clamp(30px, 3.4vw, 60px); letter-spacing: .12em; }
.s-final .cta-strip { height: 46px; font-size: 15px; }
.s-final .ship { margin: 0; font-size: 15px; letter-spacing: .14em; color: var(--dim); }

/* the notes left behind: a slow vertical drift beside the afterimage, set dressing only */
.drift { position: absolute; left: var(--gutter); top: 15svh; width: 9vw; height: 62svh; opacity: .55; pointer-events: none;
  font-family: var(--zh); font-weight: 400;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 70%, transparent); }
@media (max-width: 760px) and (max-aspect-ratio: 5/4) { .drift { left: 10px; top: 12svh; width: 64px; height: 44svh; } }

/* ---------- credits ---------- */
.s-credits > .frame { padding: 14svh var(--gutter) calc(10svh + var(--safe-bottom)); background: var(--room); }
.dried { position: relative; max-width: 760px; margin: 0 auto 6svh; height: 44px; background: #d8cdbb; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); display: flex; align-items: center; padding: 0 1.4em; gap: 1.4em; color: #3b2f26;
  font: italic 400 15px/1 var(--la); }
.dried::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 34%; background: linear-gradient(90deg, rgba(150,90,40,0), rgba(150,90,40,.28)); }
.dried span { position: relative; z-index: 1; white-space: nowrap; }
.credits { max-width: 760px; margin: 0 auto; font-size: 14px; line-height: 1.9; color: var(--faint); }
.credits p { margin: 0 0 .9em; }
.credits strong { color: var(--dim); font-weight: 400; }

/* ---------- phone: its own cut ---------- */
@media (max-width: 760px) and (max-aspect-ratio: 5/4) {
  body { font-size: 16px; }
  .chrome { padding-top: 12px; }
  .mark span { display: none; }
  .cta-strip { height: 34px; font-size: 13px; padding: 0 2.2em 0 .9em; }
  .gauge { right: 8px; height: 30vh; top: 40%; }
  .gauge ol { display: none; }
  .copy { left: 22px; right: 30px; bottom: calc(9svh + 34px + var(--safe-bottom)); max-width: none; }
  h2 { font-size: 30px; }
  .mat { font-size: 17px; }
  .s-light .copy { bottom: calc(10svh + 34px + var(--safe-bottom)); width: auto; left: 22px; right: 22px; transform: none; }
  .title { font-size: 34px; }
  .lede { font-size: 14px; letter-spacing: .08em; }
  .s-close .copy { right: 30px; left: 22px; text-align: left; bottom: calc(9svh + 34px + var(--safe-bottom)); max-width: none; }
  .s-try .copy { top: 12svh; }
  .try-wrap { left: 22px; right: 30px; top: auto; bottom: calc(9svh + 34px + var(--safe-bottom)); gap: 18px; }
  .strip { width: 40px; height: 40svh; }
  .try-read { width: auto; flex: 1; }
  .try-h { font-size: 28px; }
  .try-read .now { font-size: 18px; }
  .notes { gap: 6px; margin-top: 1.2em; }
  .notes button { height: 36px; padding: 0 1em 0 .75em; letter-spacing: .12em; }
  .clock { bottom: auto; top: 54px; left: 22px; }
  .clock b { font-size: 17px; }
  .s-offer > .frame { padding: 12svh 22px 10svh; }
  .offer { grid-template-columns: 1fr; }
  .offer .facts { grid-column: 1; grid-row: auto; margin-top: 2.4em; }
  .reserve { margin-top: 7svh; }
  .blotter { aspect-ratio: auto; min-height: 200px; --wick: calc((var(--w) - .22) * 70px); transform-origin: 50% 50%; }
  /* the tip is a quarter of the strip here, so the wet edge starts at 75 % */
  .blotter::after { background: var(--fibre), linear-gradient(90deg, #f3ede1 calc(75% - var(--wick) - 16px), color-mix(in srgb, var(--held) 64%, #f3ede1) calc(75% - var(--wick)), color-mix(in srgb, var(--held) 50%, #f3ede1) calc(75% - var(--wick) + 12px), color-mix(in srgb, var(--held) 74%, #f3ede1) 97%); }
  .b-body { padding: 18px 14px 8px 20px; }
  .yours { font-size: 15px; }
  .reserve .cta-strip { flex-basis: 25%; padding: 0; writing-mode: vertical-rl; letter-spacing: .3em; }
  .s-final .copy { width: auto; left: 22px; right: 22px; transform: none; bottom: calc(9svh + 34px + var(--safe-bottom)); }
  .s-final h2 { font-size: 34px; }
  .dried { font-size: 12px; gap: .9em; }
  .dried span:nth-child(n+3) { display: none; }
}
@media (max-height: 700px) and (min-width: 761px) {
  .copy { bottom: calc(10svh + var(--safe-bottom)); }
  .s-try .copy { top: 18svh; }
  .strip { height: 50svh; }
}

/* the accessible cut: scenes are stills, chrome scrolls away so nothing sits over reading copy */
.reduced-motion .chrome { position: absolute; }
.reduced-motion .g-strip, .reduced-motion .clock { display: none; }

/* ---------- scroll lengths (vh). hold = length − 100 − own cut − next cut ---------- */
.s-light   { --length: 260; }
.s-back    { --length: 420; --cut: 100; }
.s-profile { --length: 400; --cut: 90; }
.s-turn    { --length: 500; --cut: 90; }
.s-close   { --length: 400; --cut: 100; }
.s-try     { --length: 290; --cut: 90; }
.s-final   { --length: 220; }
@media (max-width: 760px) and (max-aspect-ratio: 5/4) {
  .s-light   { --length: 190; }
  .s-back    { --length: 290; --cut: 70; }
  .s-profile { --length: 275; --cut: 60; }
  .s-turn    { --length: 340; --cut: 60; }
  .s-close   { --length: 280; --cut: 70; }
  .s-try     { --length: 240; --cut: 60; }
  .s-final   { --length: 170; }
}

/* instruments step aside while the deal is read */
.on-paper .clock, .on-paper .g-strip { visibility: hidden; }
/* a local scrim where copy sits over the flame's reflection on the table */
.s-light .copy::before, .s-note .copy::before, .s-final .copy::before { content: ""; position: absolute; z-index: -1; inset: -40% -30%; background: radial-gradient(closest-side, rgba(11,8,6,.72), rgba(11,8,6,0)); pointer-events: none; }
@media (max-width: 1100px) and (min-aspect-ratio: 5/4) {
  .s-try .copy { max-width: 15em; }
  .try-wrap { left: calc(var(--gutter) + 16em); }
}
.s-close .copy { right: calc(var(--gutter) * 1.4 + 44px); }
@media (max-width: 760px) and (max-aspect-ratio: 5/4) { .s-close .copy { right: 30px; } }

/* the wordmark switches ink when the paper is under it */
.paper-top .mark { color: var(--paper-ink); }
.paper-top .chrome { background: linear-gradient(var(--paper) 72%, rgba(236,229,216,0)); padding-bottom: 18px; }
.paper-top .mark span { color: var(--paper-dim); }