/* Лила — «Иней». One frosted window on one November night (lila/index.html).
   Loaded after css/base.css (reset, grid, focus mechanism, the studio strip).
   Tokens → page base → layers → header → hero 16:00 → кто она 19:00 → где это 21:00 → 23:59 + player
   → ноябрь → как играть → титры → keep panels → no-JS → motion → view transitions */

/* The sound lamp's property is registered as --lamp-on: --lamp is already the amber colour token. */
@property --lamp-on { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  color-scheme: dark;

  /* grounds */
  --ink:    #06070b;
  --night:  #0b0e1a;
  --dusk:   #141a2a;
  --glass:  rgb(13 16 23 / .76);
  --line:   color-mix(in oklch, var(--text) 12%, transparent);

  /* text */
  --text:   #efe8dc;
  --muted:  #a79f92;
  --dim:    #6f695f;

  /* light sources (each has exactly one job) */
  --oval:   #fbf6ee;
  --frost:  #b9c3d6;
  --snow:   #e9eef8;
  --lamp:   #f1b45c;
  --lamp-2: #e2a04a;
  --street: #ee9fb8;
  --street-2: #e27aa0;
  --eye:    #8fd6b0;
  --led:    #6cf09a;
  --led-off:#1d2a22;

  /* the game's start-button gradient (used once: the player's «Включить») */
  --start-grad: linear-gradient(135deg, #f3bb66, #e9a58e 55%, #e38fae);
  --start-ink:  #1f150c;

  /* the laptop, in the game's own colours */
  --lid-1: #2c2f36;
  --lid-2: #1b1d22;
  --lid-3: #15171b;
  --bezel: #0d0e11;
  --cam:   #07080a;
  --cam-ring: #30343c;
  --deck-1: #a4aab3;
  --deck-2: #7b818a;
  --deck-3: #6c7179;
  --void:  #000000;
  --shade: rgb(0 0 0 / .6);

  /* fonts */
  --f-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-text: "Literata", Georgia, "PT Serif", serif;
  --f-ui:   "Manrope", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* type scale */
  --fs-display: clamp(5rem, 1rem + 15vw, 15rem);
  --fs-title:   clamp(3.5rem, 1.5rem + 6vw, 8rem);
  --fs-sub:     clamp(1.5rem, 1rem + 2.2vw, 3rem);
  --fs-h2:      clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --fs-quote:   clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
  --fs-clock-xl:clamp(5.5rem, 2rem + 16vw, 18rem);
  --fs-lede:    clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  --fs-body:    clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --fs-ui:      1rem;
  --fs-bubble:  1rem;
  --fs-place:   .72rem;
  --fs-mono:    .8125rem;

  /* layout */
  --gutter: clamp(16px, 5vw, 64px);
  --col-gap: clamp(12px, 2vw, 24px);
  --maxw: 1440px;
  --header-h: 56px;
  --section-pad: clamp(96px, 16vh, 200px);
  --kp: clamp(12px, 2.4vw, 28px);           /* keep-panel spread (text panels when the glass is off) */
  --panel: color-mix(in oklch, var(--dusk) 72%, transparent);
  --sound-w: 82px;                          /* «Звук» toggle width, so the boot clock sits on the header clock */

  /* motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
  --ease-lid: cubic-bezier(.5, .05, .25, 1);

  /* her focus ring (base.css draws it) */
  --focus-ring: 2px solid var(--lamp);
}
@media (max-width: 759px) { :root { --header-h: 52px; } }

/* ------------------------------------------------------------------ page base (reset and grid: base.css) */

html { background: var(--night); scroll-padding-top: calc(var(--header-h) + 16px); hanging-punctuation: first; }
body { background: var(--night); color: var(--text); font: 400 var(--fs-body)/1.62 var(--f-text); text-rendering: optimizeLegibility; }
::selection { background: var(--street); color: var(--ink); }
:focus-visible { border-radius: 4px; }
h1, h2 { text-wrap: balance; font-weight: 500; }
p { text-wrap: pretty; }

.skip { border-radius: 10px; background: var(--lamp); color: var(--ink); font: 600 var(--fs-ui)/1.2 var(--f-ui); }

/* in flow after the footer: a last line, never a pill over the content */
.noscript { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 28px; background: var(--ink);
  font: 400 var(--fs-mono)/1.4 var(--f-mono); color: var(--muted); letter-spacing: .02em; }

/* the studio strip sits above the night layers; in theater it goes dark with the rest */
html.theater .strip { filter: brightness(.12); transition: filter .45s var(--ease-out); }
html.theater .strip:hover, html.theater .strip:focus-within { filter: none; }

/* ------------------------------------------------------------------ fixed layers */

/* The veil. Without JS (or without WebGL) it is gone by .6 s. With JS it holds while the glass gets ready
   (at most until .9 s, gone by 1.35 s even if the script dies), and the script lifts it as soon as the first
   live frame is there (html.boot-lift), so the frost boot plays under it, never after it. */
.boot { position: fixed; inset: 0; z-index: 50; background: var(--ink); pointer-events: none;
  animation: boot-out .45s var(--ease-out) .15s both; }
html.boot-hold .boot { animation-delay: .9s; }   /* set by the inline head script when live glass is possible */
html.boot-lift .boot { animation: boot-lift .45s var(--ease-out) both; }   /* a new name, so it starts now, from opaque */
@keyframes boot-lift { to { opacity: 0; visibility: hidden; } }
.boot__in { height: var(--header-h); margin-top: var(--strip-h); max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: flex-end; }
.boot__clock { margin-right: calc(var(--sound-w) + clamp(6px, 1.4vw, 18px)); font: 400 var(--fs-mono)/1 var(--f-mono); color: var(--lamp); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
@keyframes boot-out { to { opacity: 0; visibility: hidden; } }
html.no-boot .boot, html.boot-done .boot { display: none; }

#glass { position: fixed; left: 0; top: 0; width: 100vw; height: 100lvh; z-index: 0; display: block; pointer-events: none; }
html:not(.gl-on) #glass { visibility: hidden; }

/* blurred art behind the content: only when the live glass is off (so GL visitors never download it) */
.night-art { position: fixed; inset: -6%; z-index: 0; pointer-events: none; background: var(--night); }
html.gl-off .night-art, html.no-js .night-art {
  background: var(--night) url("../media/lila/key-960.webp") 62% 50% / cover no-repeat;
  filter: blur(22px) brightness(.34) saturate(.8); }
html.gl-on .night-art { display: none; }

/* plain alpha, no blend mode: one less full-screen layer to re-blend on every frame of the glass */
.lamp { position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 90% at 0% 100%, color-mix(in oklch, var(--lamp) calc(var(--lamp-on) * 20%), transparent), transparent 60%);
  transition: --lamp-on .8s var(--ease-out); }
html.lamp-on { --lamp-on: 1; }
html.lamp-on .lamp { transition-duration: .6s; }

.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

main { position: relative; z-index: 2; display: block; }

/* ------------------------------------------------------------------ header */

/* sticky, in the flow right after the studio strip: it overlaps the hero as before (negative margin)
   and sticks to the top once the strip has scrolled away */
.bar { position: sticky; top: 0; z-index: 3; height: var(--header-h); margin-bottom: calc(-1 * var(--header-h)); view-transition-name: bar;
  transition: background-color .3s ease, backdrop-filter .3s ease, box-shadow .3s ease, height .3s var(--ease-out), filter .3s ease; }
.bar.is-glass { background: var(--glass); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: inset 0 -1px 0 var(--line); }
/* at the very top the header is transparent: a soft night scrim keeps the nav and the clock readable on bright frost */
.bar::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: calc(100% + 28px); pointer-events: none;
  background: linear-gradient(color-mix(in oklch, var(--night) 74%, transparent), color-mix(in oklch, var(--night) 40%, transparent) 62%, transparent);
  transition: opacity .3s ease; }
.bar.is-glass::before { opacity: 0; }
@media (min-width: 1100px) { .bar::before { background: linear-gradient(color-mix(in oklch, var(--night) 52%, transparent), transparent); } }
.bar__in { height: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: clamp(8px, 2vw, 32px); }
.bar__home { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; flex: none; padding-right: 4px; border-radius: 6px;
  color: var(--text); text-decoration: none; font: 500 1.375rem/1 var(--f-head); letter-spacing: .01em; }
.bar__home:hover { color: var(--oval); }
.bar__nav { display: flex; align-items: center; gap: clamp(0px, 1.2vw, 18px); }
.bar__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 7px; font: 500 .9375rem/1 var(--f-ui);
  color: var(--text); text-decoration: none; letter-spacing: .01em; border-radius: 6px; transition: color .2s; }
.bar__nav a:hover { color: var(--lamp); }
.bar__nav a[aria-current="page"] { color: var(--lamp); }
.bar__right { margin-left: auto; display: flex; align-items: center; gap: clamp(6px, 1.4vw, 18px); }
.bar__clock { display: inline-flex; align-items: center; gap: 8px; font: 400 var(--fs-mono)/1 var(--f-mono); color: var(--lamp);
  font-variant-numeric: tabular-nums; letter-spacing: .06em; white-space: nowrap; }
.bar__chip { display: none; padding: 4px 8px 3px; border-radius: 999px; font-size: .6875rem; letter-spacing: .04em;
  background: color-mix(in oklch, var(--lamp) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--lamp) 40%, transparent); }
.bar.is-locked .bar__chip { display: inline-block; animation: chip-in .3s ease both; }
@keyframes chip-in { from { opacity: .5; } to { opacity: 1; } }
.bar__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--lamp); transform-origin: 0 50%;
  transform: scaleX(0); display: none; pointer-events: none; }

.sound { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; min-width: 44px; padding: 0 10px; justify-content: center;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer; font: 500 .9375rem/1 var(--f-ui); color: var(--text); }
.sound:hover { color: var(--lamp); }
.sound[disabled] { cursor: default; color: var(--dim); }
.sound__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound__bars i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: 50% 100%; transform: scaleY(.3); transition: transform .3s var(--ease-out), background-color .3s; }
.sound__bars i:nth-child(2) { transform: scaleY(.55); } .sound__bars i:nth-child(3) { transform: scaleY(.4); }
.sound__bars i:nth-child(4) { transform: scaleY(.65); } .sound__bars i:nth-child(5) { transform: scaleY(.35); }
.sound[aria-pressed="true"] .sound__bars i { background: var(--street); animation: bar-wave 1.1s ease-in-out infinite alternate; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2) { animation-duration: .9s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3) { animation-duration: 1.4s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(4) { animation-duration: 1s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(5) { animation-duration: 1.25s; }
@keyframes bar-wave { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.bar-sentinel { position: absolute; top: calc(var(--strip-h) + 24px); left: 0; width: 1px; height: 1px; pointer-events: none; }

@media (max-width: 759px) {
  .bar__nav a { padding: 0 5px; font-size: .875rem; }
}
@media (max-width: 519px) {
  .bar__places { display: none !important; }
  .bar__home { gap: 8px; font-size: 1.25rem; }
  :root { --sound-w: 44px; }
  .bar.is-locked .bar__chip { display: none; }
  .bar.is-locked .bar__time::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px; vertical-align: 2px; border-radius: 50%; background: var(--lamp); }
  .boot__clock { margin-right: calc(var(--sound-w) + 2px); }
  .sound__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sound { padding: 0; }
  .bar__in { gap: 6px; }
  .bar__right { gap: 2px; }
}

/* ------------------------------------------------------------------ shared pieces */

.slate { font: 400 var(--fs-mono)/1.4 var(--f-mono); letter-spacing: .06em; color: var(--muted); text-transform: lowercase;
  font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 12px; }
.slate::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.kicker { font: 400 var(--fs-mono)/1.4 var(--f-mono); letter-spacing: .06em; color: var(--muted); }

.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 14px 22px; border-radius: 10px;
  background: var(--lamp); color: var(--ink); font: 600 var(--fs-ui)/1.2 var(--f-ui); letter-spacing: .01em; text-decoration: none;
  border: 0; cursor: pointer; transition: background-color .2s, transform .2s var(--ease-out), box-shadow .3s;
  box-shadow: 0 10px 34px color-mix(in oklch, var(--lamp) 22%, transparent); }
.btn:hover, .btn:active { background: var(--lamp-2); }
.btn:active { transform: translateY(1px); }
.oval-glyph { flex: none; width: 10px; height: 13px; border-radius: 50%; background: var(--oval);
  box-shadow: 0 0 10px color-mix(in oklch, var(--oval) 70%, transparent); }
.btn .oval-glyph { box-shadow: 0 0 0 1px color-mix(in oklch, var(--ink) 30%, transparent), 0 0 10px color-mix(in oklch, var(--oval) 60%, transparent); }

.link { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font: 500 var(--fs-ui)/1.2 var(--f-ui); text-decoration: underline;
  text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 6px; transition: text-decoration-color .2s, color .2s; }
.link:hover, .link:focus-visible { text-decoration-color: var(--lamp); color: var(--oval); }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; font: 400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing: .04em; }
.facts dt { color: var(--muted); text-align: right; }   /* right-aligned, so the dashes form one column */
.facts dt::after { content: " —"; color: var(--dim); }
.facts dd { color: var(--text); }

/* ------------------------------------------------------------------ hero 16:00 */

/* the wordmark box: right edge at 94vw, so the mark sits over the window and grows with the screen */
.hero { position: relative; min-height: max(600px, calc(100svh - var(--strip-h))); --wm-w: min(56vw, 980px); --wm-x: calc(94vw - var(--wm-w)); --wm-y: 9svh; }
/* the CSS key art is also the bridge: frame 001 on the studio home grows into this window (and back) */
.hero__art { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; transition: opacity .45s ease, visibility 0s linear .45s;
  view-transition-name: tx-001; }
html.deep .hero__art { view-transition-name: none; }
.hero__art img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 50%; }
.hero__blur { filter: blur(14px) brightness(.55) saturate(.85); transform: scale(1.08); }
/* the cleared strokes: the yard, sharp and a little darker than the frost around them */
.hero__sharp { -webkit-mask: url("../media/aeyv-stroke.svg") no-repeat; mask: url("../media/aeyv-stroke.svg") no-repeat;   /* the shared mark */
  -webkit-mask-size: var(--wm-w) auto; mask-size: var(--wm-w) auto;
  -webkit-mask-position: var(--wm-x) var(--wm-y); mask-position: var(--wm-x) var(--wm-y); filter: blur(1.4px) brightness(.72) saturate(1.05); }
/* frost texture, plus a milky patch of breath-frost around the word, so the strokes read as dark windows */
.hero__frost { position: absolute; inset: 0; mix-blend-mode: screen; opacity: .62;
  background:
    radial-gradient(calc(var(--wm-w) * .62) calc(var(--wm-w) * .34) at calc(var(--wm-x) + var(--wm-w) * .5) calc(var(--wm-y) + var(--wm-w) * .24),
      color-mix(in oklch, var(--frost) 92%, transparent), color-mix(in oklch, var(--frost) 55%, transparent) 50%, transparent),
    url("../media/lila/frost-frame-1600.webp") center / cover no-repeat; }
.hero__art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in oklch, var(--ink) 55%, transparent), transparent 45%),
              linear-gradient(0deg, color-mix(in oklch, var(--ink) 45%, transparent), transparent 40%); }
html.gl-on .hero__art { opacity: 0; visibility: hidden; }
html.gl-on.gl-instant .hero__art { transition: none; }
/* leaving for the studio with the hero in view: the CSS window shows for the snapshot and shrinks into frame 001 */
html.vt-out .hero__art { opacity: 1; visibility: visible; transition: none; }
/* arriving by morph: the CSS window stays up until the morph is over, even if the glass is already live,
   so frame 001 never grows into an empty box; then the glass crossfades in over it */
html.vt-in .hero__art { opacity: 1; visibility: visible; transition: none; }

.wordmark { position: absolute; z-index: 1; left: var(--wm-x); top: var(--wm-y); width: var(--wm-w); aspect-ratio: 900 / 420; margin: 0; }
.wordmark__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .hero__sharp { display: none; }
  .wordmark__text { position: static; width: auto; height: auto; clip-path: none; font: 600 clamp(4rem, 12vw, 11rem)/1 var(--f-ui); letter-spacing: -.03em; color: var(--oval); }
}

.hero__text { position: absolute; z-index: 2; left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); bottom: 8svh; max-width: min(34rem, 38vw); display: grid; gap: 22px; }
.hero__title { display: grid; font: 300 clamp(3.5rem, 1.5rem + 4.5vw, 6.5rem)/.9 var(--f-head); letter-spacing: -.015em; margin-left: -.04em; color: var(--text); }
.hero__title .title-sub { display: block; font: italic 400 var(--fs-sub)/1.1 var(--f-head); letter-spacing: .06em; color: var(--street);
  margin: .3em 0 0 .06em; }
.hero__lede { font: 400 var(--fs-lede)/1.45 var(--f-text); color: var(--text); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 6px; }
.hero__corner { position: absolute; z-index: 2; right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); bottom: 5svh; display: flex; align-items: center; gap: 14px;
  font: 400 var(--fs-mono)/1 var(--f-mono); letter-spacing: .06em; color: var(--text); }
.hero__corner::after { content: ""; width: 1px; height: 46px; background: linear-gradient(var(--muted), transparent); transform-origin: 50% 0; }

@media (min-width: 760px) and (max-width: 1099px) {
  .hero { --wm-w: 70vw; --wm-x: 25vw; --wm-y: 12svh; }
  .hero__text { max-width: 30rem; bottom: 10svh; }
}
@media (max-width: 759px) {
  /* the frost signature stays smaller than the game's own title on a phone */
  .hero { --wm-w: 62vw; --wm-x: calc(100vw - 16px - var(--wm-w)); --wm-y: calc(var(--header-h) + 3svh); }
  .hero__text { left: 16px; right: 16px; bottom: 6svh; max-width: none; gap: 18px; }
  /* the scrim behind the text fades out on both sides, so there is no seam where the hero ends */
  .hero::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: -10svh; height: 72svh; pointer-events: none;
    background: linear-gradient(to top, transparent, color-mix(in oklch, var(--night) 86%, transparent) 16%,
      color-mix(in oklch, var(--night) 86%, transparent) 50%, color-mix(in oklch, var(--night) 40%, transparent) 76%, transparent); }
  .hero__corner { display: none; }
  .hero__art img { object-position: 76% 50%; }
}

/* ------------------------------------------------------------------ кто она 19:00 */

.lila { padding-block: var(--section-pad); }
.lila__grid { row-gap: clamp(28px, 5vh, 56px); }
.lila__head { grid-column: 1 / 7; grid-row: 1; display: grid; gap: 14px; align-self: start; }
.lila__head h2 { font: 500 var(--fs-h2)/1 var(--f-head); letter-spacing: -.01em; }
.lila__copy { grid-column: 1 / 7; grid-row: 2 / span 2; display: grid; gap: 22px; align-self: start; max-width: 62ch; }
.lila__premise { font: 400 var(--fs-lede)/1.5 var(--f-text); color: var(--text); }
.lila__copy p + p { color: color-mix(in oklch, var(--text) 88%, var(--muted)); }
.face-wrap { grid-column: 8 / 13; grid-row: 1 / span 2; justify-self: center; align-self: start; display: grid; justify-items: center; gap: 22px; z-index: 2; }
.chat-col { grid-column: 7 / 13; grid-row: 3; align-self: start; margin-top: clamp(8px, 3vh, 32px); }

@media (min-width: 760px) and (max-width: 1099px) {
  .lila__head { grid-column: 1 / 13; }
  .lila__copy { grid-column: 1 / 7; grid-row: 2; }
  .face-wrap { grid-column: 8 / 13; grid-row: 2; justify-self: end; }
  .chat-col { grid-column: 1 / 13; grid-row: 3; max-width: 560px; }
}
@media (max-width: 759px) {
  .lila__head, .face-wrap, .lila__copy, .chat-col { grid-column: 1 / -1; grid-row: auto; }
  .face-wrap { justify-self: start; margin: 8px 0 0; width: 72%; }
  .chat-col { margin-top: 8px; }
}

/* the oval → face card (modelled on the game's .t-oval) */
.face { position: relative; width: 280px; height: 400px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 28px;
  transform: rotate(-4deg); transition: transform .5s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.face:hover { transform: rotate(-3deg) translateY(-4px); }
.face__slab { position: absolute; inset: 0; border-radius: 28px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in oklch, var(--dusk) 70%, var(--ink)), var(--ink));
  box-shadow: 0 0 0 1px var(--line), 0 40px 90px var(--shade), 0 0 120px color-mix(in oklch, var(--street) 12%, transparent); }
.face__slab::before { content: ""; position: absolute; left: 50%; top: 10px; width: 54px; height: 5px; margin-left: -27px; border-radius: 3px; background: color-mix(in oklch, var(--text) 10%, transparent); }
.face__oval { position: absolute; left: 50%; top: 44%; width: 46%; aspect-ratio: 3 / 4; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, var(--oval), color-mix(in oklch, var(--oval) 82%, var(--street)) 55%, color-mix(in oklch, var(--street) 45%, transparent) 80%, transparent);
  box-shadow: 0 0 40px color-mix(in oklch, var(--oval) 35%, transparent), 0 0 120px color-mix(in oklch, var(--street) 25%, transparent);
  animation: oval-breath 5s ease-in-out infinite; transition: opacity .3s ease; }
@keyframes oval-breath { 50% { transform: translate(-50%, -50%) scale(.965); filter: brightness(.86); } }
.face__canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 28px; pointer-events: none; }
.face__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; border-radius: 28px;
  background: radial-gradient(70% 60% at 50% 40%, color-mix(in oklch, var(--street) 18%, var(--dusk)), var(--ink));
  clip-path: ellipse(0% 0% at 50% 44%); transition: clip-path .55s var(--ease-io); }
.face.is-on .face__img { clip-path: ellipse(90% 90% at 50% 44%); }
.face.is-on .face__oval, .face.is-revealing .face__oval { opacity: 0; }
.face.no-tr .face__img { transition: none; }
.face__cap { font: italic 400 1.0625rem/1.4 var(--f-text); color: var(--muted); }
.face__cap-on { display: none; }
.face.is-on + .face__cap .face__cap-rest { display: none; }
.face.is-on + .face__cap .face__cap-on { display: inline; }
.face__cap u { text-decoration: none; box-shadow: inset 0 -1px 0 var(--eye); }
@media (max-width: 759px) {
  .face { width: min(240px, calc(100% - 20px)); height: auto; aspect-ratio: 240 / 340; margin-left: 10px; }
}

/* the chat card */
.chat { container-type: inline-size; position: relative; border-radius: 18px; padding: 18px 18px 16px; background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 0 0 1px var(--line), 0 30px 80px var(--shade); }
/* over the live glass the shader already blurs what is behind: a plain tint, no per-frame backdrop blur */
html.gl-on .chat { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in oklch, var(--ink) 82%, transparent); }
.chat__top { display: flex; align-items: center; gap: 10px; padding: 2px 4px 14px; margin-bottom: 14px; box-shadow: inset 0 -1px 0 var(--line);
  font: 600 1rem/1.2 var(--f-ui); }
.chat__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--street); box-shadow: 0 0 10px color-mix(in oklch, var(--street) 70%, transparent); }
.chat__name { color: var(--street); }
.chat__state { margin-left: auto; font: 500 .875rem/1 var(--f-ui); color: var(--muted); }
.chat__log { display: grid; gap: 8px; justify-items: start; }
.bubble { max-width: 85%; padding: 10px 14px 11px; border-radius: 16px 16px 16px 6px; background: var(--dusk); color: var(--text);
  font: 500 var(--fs-bubble)/1.42 var(--f-ui); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--text) 6%, transparent); overflow-wrap: anywhere; }
.chat__sys { justify-self: stretch; display: flex; align-items: center; gap: 12px; margin: 10px 0; font: 400 .75rem/1.3 var(--f-mono);
  letter-spacing: .06em; color: var(--muted); }
.chat__sys::before, .chat__sys::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.chat figcaption { margin-top: 14px; font: 400 var(--fs-mono)/1.3 var(--f-mono); letter-spacing: .06em; color: var(--muted); }
.typing { display: inline-flex; gap: 5px; align-items: center; height: 1.42em; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--street-2); animation: dot 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--eye); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { background: transparent; } }
@container (max-width: 360px) { .bubble { max-width: 94%; } .chat__state { font-size: .8125rem; } }

/* ------------------------------------------------------------------ credits */

.credits { position: relative; background: var(--dusk); box-shadow: inset 0 1px 0 var(--line); padding: clamp(80px, 14vh, 160px) var(--gutter); text-align: center; }
.credits h2 { font: italic 500 var(--fs-h2)/1 var(--f-head); margin-bottom: clamp(36px, 7vh, 72px); }
.roll { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(18px, 3vw, 40px); row-gap: 14px; max-width: 760px; margin-inline: auto; align-items: baseline; }
.roll dt { text-align: right; font: 400 var(--fs-mono)/1.4 var(--f-mono); letter-spacing: .06em; color: var(--muted); }
.roll dd { text-align: left; font: 500 1.5rem/1.25 var(--f-head); color: var(--text); }
.roll dd.is-small { font: 400 .9375rem/1.5 var(--f-text); color: var(--muted); max-width: 34ch; }
.roll .sep { margin-top: clamp(20px, 4vh, 40px); }
/* phones: each role above its line, on the centre axis */
@media (max-width: 519px) {
  .roll { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .roll dt, .roll dd { text-align: center; }
  .roll dd { margin-bottom: 16px; text-wrap: balance; }
  .roll dd.is-small { margin-inline: auto; }
  .roll dd.sep { margin-top: 0; }
}

/* ------------------------------------------------------------------ 23:59: the numerals, her line, the laptop */

.play { padding-block: clamp(48px, 9vh, 112px) clamp(64px, 10vh, 120px); scroll-margin-top: calc(var(--header-h) + 16px); }
.play__grid { align-items: start; row-gap: clamp(28px, 5vh, 48px); }
.play__clock { grid-column: 1 / 5; grid-row: 1; display: grid; gap: clamp(20px, 4vh, 36px); align-content: start; }
.play__stage { grid-column: 5 / 13; grid-row: 1 / span 2; display: grid; gap: 14px; min-width: 0; align-self: start; }
.play__who { grid-column: 1 / 5; grid-row: 2; align-self: start; }
.clock { font: 400 clamp(4.5rem, 2rem + 6vw, 9rem)/.9 var(--f-mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  color: var(--text); display: flex; align-items: baseline; gap: .04em; margin-left: -.05em; }
.clock__sec { font-size: .2em; letter-spacing: 0; color: var(--lamp); align-self: flex-start; margin-top: .45em; min-width: 3ch; }
.quote { display: grid; gap: 14px; align-self: start; }
.quote blockquote { font: italic 400 clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem)/1.15 var(--f-head); color: var(--street); }
.quote figcaption { font: 400 var(--fs-mono)/1.4 var(--f-mono); letter-spacing: .06em; color: var(--muted); }
.avatar { position: relative; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex: none;
  box-shadow: 0 0 0 3px var(--street), 0 0 24px color-mix(in oklch, var(--street) 60%, transparent);
  background: radial-gradient(circle at 50% 40%, color-mix(in oklch, var(--street) 30%, var(--dusk)), var(--ink)); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.55); transform-origin: 50% 32%; }
.play__who { display: grid; gap: 22px; justify-items: start; }
.play__who .facts dd { max-width: 24ch; }
@media (min-width: 760px) and (max-width: 1099px) {
  .play__clock { grid-column: 1 / 13; grid-row: 1; max-width: 40rem; }
  .play__stage { grid-column: 1 / 13; grid-row: 2; }
  .play__who { grid-column: 1 / 13; grid-row: 3; grid-template-columns: auto 1fr; align-items: center; column-gap: 28px; }
}
@media (min-width: 520px) and (max-width: 759px) { .play__who { grid-template-columns: auto 1fr; align-items: center; column-gap: 20px; } }
@media (max-width: 759px) { .play__who .avatar { width: 80px; height: 80px; } .clock { font-size: 5.5rem; margin-left: 0; } }

/* the device — mobile first: a plain poster card */
.device { position: relative; }
.device__lid { position: relative; border-radius: 18px; }
.device__cam, .device__led, .device__deck, .device__wake { display: none; }
.device__screen { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--dusk);
  box-shadow: 0 0 0 1px var(--line), 0 24px 70px var(--shade); }
.device__poster { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 70% 60%; }
.device__pre { position: relative; display: grid; gap: 14px; padding: 18px; justify-items: start; }
.device__save { font: 500 .875rem/1.4 var(--f-ui); color: var(--lamp); }
.device__warn { font: 400 .875rem/1.5 var(--f-text); color: var(--muted); max-width: 46ch; }
.device__warn b { font: 700 .8125rem/1 var(--f-ui); color: var(--text); margin-right: .15em; padding: 3px 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line); }
.device__msg { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center;
  background: var(--ink); color: var(--text); font: 400 clamp(.875rem, .8rem + .4vw, 1.125rem)/1.4 var(--f-mono); letter-spacing: .06em; }
.device__msg:empty { display: none; }
.device__msg:focus { outline: none; }
/* «Включаю…»: the poster stays, the button gives way to a quiet status line with a live LED */
.device[data-state="starting"] .device__pre { visibility: hidden; }
.device[data-state="starting"] .device__msg { display: flex; align-items: center; justify-content: flex-start; gap: 12px; background: transparent;
  padding-left: clamp(20px, 5%, 56px); text-align: left; }
.device[data-state="starting"] .device__msg::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--led); box-shadow: 0 0 8px var(--led); animation: led-pulse 1.1s ease-in-out infinite alternate; }
@keyframes led-pulse { from { opacity: .3; } to { opacity: 1; } }
.device__frame { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border: 0; background: var(--void); display: block; }

.start { display: inline-grid; gap: 4px; min-height: 64px; padding: 14px 26px 13px; border-radius: 16px; background: var(--start-grad); color: var(--start-ink);
  text-decoration: none; text-align: left; cursor: pointer; border: 0;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--lamp) 14%, transparent), 0 16px 40px color-mix(in oklch, var(--lamp) 20%, transparent); transition: transform .2s var(--ease-out), box-shadow .25s, filter .2s; }
.start b { font: 700 1.375rem/1.1 var(--f-ui); letter-spacing: .01em; }
.start span { font: 600 13px/1.2 var(--f-ui); opacity: .82; }
.start:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 0 0 4px color-mix(in oklch, var(--lamp) 20%, transparent), 0 20px 48px color-mix(in oklch, var(--lamp) 28%, transparent); }
.start:active { transform: translateY(0); }

.device[data-state="running"]:focus-within .device__screen { outline: 2px solid var(--lamp); outline-offset: 3px; }
.device-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding-inline: 4px; }
.device-bar button, .device-bar a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: 500 .9375rem/1.2 var(--f-ui); color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 6px; }
.device-bar button:hover, .device-bar a:hover { color: var(--lamp); text-decoration-color: var(--lamp); }
.device-bar #off { margin-left: auto; color: var(--lamp); }
.device-note { font: italic 400 .9375rem/1.5 var(--f-text); color: var(--muted); }

/* inline play: the laptop lid (desktop, large tablets, fine pointers) */
@media (min-width: 1024px), (min-width: 760px) and (pointer: fine) {
  .device-note { display: none; }
  /* the camera sits at the hinge, far back: the closing lid comes toward you a little and ends edge-on */
  .device { perspective: 3200px; perspective-origin: 50% calc(100% - 14px); padding-bottom: 14px; }
  .device__lid { padding: 22px 22px 24px; border-radius: 22px 22px 8px 8px; transform-origin: 50% 100%;
    background: linear-gradient(var(--lid-1), var(--lid-2) 60%, var(--lid-3));
    box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--text) 7%, transparent), inset 0 0 0 var(--bz, 10px) var(--bezel), 0 34px 90px var(--shade);
    transition: transform .95s var(--ease-lid), box-shadow .5s ease; }
  @media (max-width: 1099px) { .device__lid { --bz: 6px; padding: 16px 16px 18px; } }
  .device__cam { display: block; position: absolute; top: 7px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
    background: var(--cam); box-shadow: inset 0 0 0 1.5px var(--cam-ring); }
  .device__led { display: block; position: absolute; top: 9px; left: 50%; width: 4px; height: 4px; margin-left: 12px; border-radius: 50%;
    background: var(--led-off); transition: background-color .3s ease, box-shadow .3s ease; }
  .device__led.is-on { background: var(--led); box-shadow: 0 0 6px var(--led); }
  .device__screen { display: block; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--ink); box-shadow: none; }
  .device__screen::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, color-mix(in oklch, var(--ink) 94%, transparent) 0%, color-mix(in oklch, var(--ink) 84%, transparent) 38%, color-mix(in oklch, var(--ink) 30%, transparent) 62%, transparent 80%); }
  .device__poster { position: absolute; inset: 0; z-index: 1; height: 100%; aspect-ratio: auto; pointer-events: none; transition: opacity .4s ease; }
  .device__screen::before { transition: opacity .4s ease; }
  .device__pre { position: absolute; z-index: 3; left: clamp(20px, 5%, 56px); top: 50%; transform: translateY(-50%); width: min(360px, 44%); padding: 0; gap: 16px; }
  .device__warn { font-size: .8125rem; }
  .device__deck { display: block; position: relative; height: 14px; margin: 0 -3.5%; border-radius: 2px 2px 16px 16px;
    background: linear-gradient(var(--deck-1), var(--deck-2) 70%, var(--deck-3)); box-shadow: 0 18px 40px var(--shade); }
  .device__deck::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px;
    background: color-mix(in oklch, var(--deck-3) 70%, var(--ink)); }
  /* the closed lid, seen edge-on: a thin dark slab on the base, exactly the lid's width */
  .device__deck::after { content: ""; position: absolute; left: 3.27%; right: 3.27%; bottom: 100%; height: 8px; border-radius: 6px 6px 1px 1px;
    background: linear-gradient(var(--lid-1), var(--lid-3)); box-shadow: inset 0 1px 0 color-mix(in oklch, var(--text) 10%, transparent);
    opacity: 0; transition: opacity .15s ease; }
  .device.is-closed .device__deck::after { opacity: 1; transition-delay: .78s; }
  .device__wake { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 5; }
  .device__wake:hover { transform: translate(-50%, calc(-50% - 2px)); }
  .device.is-closed .device__lid { transform: rotateX(-90deg); box-shadow: none; }
  .device.is-closed .device__poster, .device.is-closed .device__pre, .device.is-closed .device__screen::before { visibility: hidden; transition: visibility 0s linear .9s; }
  .device.is-closed .device__wake { display: inline-grid; }
  .device[data-state="running"] .device__pre, .device[data-state="stopping"] .device__pre { visibility: hidden; }
  .device.is-live .device__poster, .device.is-live .device__screen::before { opacity: 0; }
}

/* theater: the device takes the stage, everything else goes dark */
.dim { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: color-mix(in oklch, var(--ink) 88%, transparent); opacity: 0; transition: opacity .45s var(--ease-out); }
html.theater .dim { opacity: 1; }
html.theater .play__grid { grid-template-columns: minmax(0, 1fr); }
html.theater .play__stage { grid-column: 1 / -1; grid-row: 1; }
html.theater .play__clock { grid-column: 1 / -1; grid-row: 2; }
html.theater .play__who { grid-column: 1 / -1; grid-row: 3; }
html.theater .device { width: min(100%, calc((100svh - 140px) * 16 / 9)); margin-inline: auto; }
html.theater .device-bar { width: min(100%, calc((100svh - 140px) * 16 / 9)); margin-inline: auto; }
html.theater .play__clock, html.theater .play__who, html.theater main > section:not(#play), html.theater .strip--foot { filter: brightness(.12); transition: filter .45s var(--ease-out); }
html.theater .bar { height: 40px; filter: brightness(.45); }
html.theater .bar:hover, html.theater .bar:focus-within { filter: none; }

/* fullscreen: the wrapper fills the screen, the game letterboxes itself */
.device:fullscreen { background: var(--void); padding: 0; perspective: none; display: grid; }
.device:fullscreen .device__lid { padding: 0; border-radius: 0; background: var(--void); box-shadow: none; transform: none; width: 100%; height: 100%; }
.device:fullscreen .device__screen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.device:fullscreen .device__deck, .device:fullscreen .device__cam, .device:fullscreen .device__led { display: none; }
.device:-webkit-full-screen { background: var(--void); padding: 0; width: 100%; height: 100%; }
.device:-webkit-full-screen .device__lid { padding: 0; border-radius: 0; background: var(--void); box-shadow: none; transform: none; width: 100%; height: 100%; }
.device:-webkit-full-screen .device__screen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.device:-webkit-full-screen .device__deck { display: none; }

/* ------------------------------------------------------------------ november */

.sect { padding-block: clamp(72px, 12vh, 150px); }
.sect h2 { font: 500 var(--fs-h2)/1 var(--f-head); letter-spacing: -.01em; }
.november__head { grid-column: 1 / 7; display: grid; gap: 14px; }
.november__cap { color: var(--muted); }
.days { grid-column: 1 / 13; justify-self: stretch; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 8px; margin: 36px 0 0; padding: 0; list-style: none; }
/* unlit cells are still information (the dates): --muted, never --dim. Lit = amber + the underline. */
.days li { display: grid; gap: 2px; justify-items: center; padding: 14px 4px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line);
  font: 400 var(--fs-mono)/1.25 var(--f-mono); letter-spacing: .02em; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
.days li b { font: 500 1.0625rem/1.2 var(--f-mono); color: inherit; }
.days li.is-lit { color: var(--lamp); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--lamp) 26%, transparent), inset 0 -2px 0 var(--lamp);
  background: color-mix(in oklch, var(--lamp) 7%, transparent); }
.days li.is-pro b { font-size: .8125rem; line-height: 1.6; letter-spacing: 0; }
@media (max-width: 1099px) { .days { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 759px) { .days { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .november__head { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------ places */

.places__head { grid-column: 1 / 7; display: grid; gap: 12px; margin-bottom: clamp(32px, 6vh, 64px); }
.places__head p { color: var(--muted); font-style: italic; }
.place { position: relative; margin: 0 0 clamp(28px, 5vh, 56px); display: grid; gap: 16px; align-content: start; container-type: inline-size; }
.place__img { overflow: hidden; border-radius: 6px; background: var(--dusk); box-shadow: 0 24px 60px var(--shade); }
.place__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease-out); }
.place:hover .place__img img, .place:focus-within .place__img img { scale: 1.04; }
.place figcaption { position: relative; padding-left: 18px; display: grid; gap: 4px; max-width: 46ch; }
.place figcaption::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 4px; width: 2px; background: linear-gradient(var(--lamp), transparent); }
.place__name { font: 500 1.5rem/1.1 var(--f-head); color: var(--text); }
.place__time { font: 700 var(--fs-place)/1.2 var(--f-ui); letter-spacing: .34em; text-transform: uppercase; color: var(--lamp); }
.place__note { font: italic 400 1rem/1.5 var(--f-text); color: var(--muted); margin-top: 4px; }
.place__reply { font: italic 400 1rem/1.5 var(--f-text); color: var(--street); }
.place__who { font: 400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing: .04em; color: var(--muted); }
.place--1 { grid-column: 1 / 9; } .place--1 .place__img { aspect-ratio: 2.39 / 1; }
.place--2 { grid-column: 9 / 13; } .place--2 .place__img { aspect-ratio: 4 / 5; } .place--2 img { object-position: 22% 50%; }
.place--3 { grid-column: 3 / 11; } .place--3 .place__img { aspect-ratio: 21 / 9; }
/* kitchen (5 cols, 4:3) and room (7 cols) side by side: the room's ratio makes both frames the same height */
.place--4 { grid-column: 1 / 6; } .place--4 .place__img { aspect-ratio: 4 / 3; }
.place--5 { grid-column: 6 / 13; } .place--5 .place__img { aspect-ratio: 1.89 / 1; }
@media (max-width: 759px) {
  .place--1, .place--2, .place--3, .place--4, .place--5 { grid-column: 1 / -1; }
  .place .place__img { aspect-ratio: 16 / 10; }
  .place--2 .place__img { aspect-ratio: 4 / 5; max-width: 80%; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .place--1 { grid-column: 1 / 13; } .place--2 { grid-column: 1 / 7; } .place--3 { grid-column: 1 / 13; }
  .place--4 { grid-column: 7 / 13; align-self: end; } .place--5 { grid-column: 1 / 13; }
}

/* ------------------------------------------------------------------ how */

.how__head { grid-column: 1 / 5; display: grid; gap: 14px; align-content: start; }
/* no column gap: dt and dd rules meet, so each row reads as one unbroken hairline */
.how__list { grid-column: 5 / 13; display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0; }
.how__list dt, .how__list dd { padding: 18px 0; box-shadow: inset 0 1px 0 var(--line); }
.how__list dt { font: 400 var(--fs-mono)/1.6 var(--f-mono); letter-spacing: .06em; color: var(--muted); padding-top: 21px; }
.how__list dd { padding-left: clamp(18px, 3vw, 40px); max-width: calc(62ch + 40px); }
.how__list kbd { font: 500 .875em/1 var(--f-mono); padding: 2px 6px 3px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line), inset 0 -2px 0 var(--line); white-space: nowrap; }
@media (max-width: 1099px) { .how__head, .how__list { grid-column: 1 / -1; } .how__head { margin-bottom: 24px; } }
@media (max-width: 559px) {
  .how__list { grid-template-columns: 1fr; }
  .how__list dd { padding-top: 0; padding-left: 0; box-shadow: none; }
  .how__list dt { padding-bottom: 6px; }
}

/* ------------------------------------------------------------------ keep panels: text over art when the live glass is off */

/* Zero specificity on purpose: a keep zone never overrides a component's own box (margin, padding, position).
   The panel is the block's background plus a spread shadow, so it grows outward by --kp without touching layout.
   With the live glass on, the shader does this job (keep-zones in frost.js) and there is no panel at all. */
:where([data-keep]) { justify-self: start; }
:where(html.gl-off, html.no-js) :where([data-keep]) { background: var(--panel); box-shadow: 0 0 0 var(--kp-local, var(--kp)) var(--panel); border-radius: 10px; }
/* captions right under a picture: a tighter panel, so it never laps over the picture's edge */
.place figcaption { --kp-local: 10px; }
/* large display type and the corner cue sit on dark enough art; a panel there only reads as a box */
:where(html.gl-off, html.no-js) .hero__corner { background: none; box-shadow: none; }
@media (max-width: 759px) {
  /* on phones the hero text sits on its own scrim (.hero::after) */
  :where(html.gl-off, html.no-js) .hero__text { background: none; box-shadow: none; }
}

/* ------------------------------------------------------------------ without JS: still complete, nothing pretends to work */

html.no-js .bar { background: var(--glass); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); box-shadow: inset 0 -1px 0 var(--line); }
html.no-js .sound, html.no-js #fs, html.no-js .bar__clock { display: none; }
html.no-js .face { cursor: default; }
html.no-js .face:hover .face__img, html.no-js .face:focus-visible .face__img { clip-path: ellipse(90% 90% at 50% 44%); }
html.no-js .face:hover .face__oval, html.no-js .face:focus-visible .face__oval { opacity: 0; }

/* ------------------------------------------------------------------ motion (scroll-driven, decorative transforms only) */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bar__progress { display: block; animation: progress linear both; animation-timeline: scroll(root); }
    @keyframes progress { to { transform: scaleX(1); } }
    .clock > span:first-child { animation: drift-y linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    @keyframes drift-y { from { transform: translateY(4vh); } to { transform: none; } }
    .chat__log > * { animation: lift linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .chat__log > :nth-child(2) { animation-range: entry 5% entry 95%; }
    .chat__log > :nth-child(3) { animation-range: entry 10% entry 100%; }
    .chat__log > :nth-child(4) { animation-range: entry 15% cover 30%; }
    .chat__log > :nth-child(5) { animation-range: entry 20% cover 34%; }
    .chat__log > :nth-child(6) { animation-range: entry 25% cover 38%; }
    @keyframes lift { from { transform: translateY(14px); } to { transform: none; } }
    .place__img img { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    @keyframes settle { from { transform: scale(1.08); } to { transform: none; } }
    .hero__corner::after { animation: cue 2.4s var(--ease-io) infinite; }
    @keyframes cue { 0% { transform: scaleY(.2); } 50% { transform: scaleY(1); } 100% { transform: scaleY(.2) translateY(30px); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot { display: none; }
  .face__oval, .typing i, .caret, .sound[aria-pressed="true"] .sound__bars i,
  .device[data-state="starting"] .device__msg::before { animation: none; }
  .clock__sec { display: none; }
  .face, .face__img, .start, .btn, .place__img img, .device__lid, .skip, .bar, .dim, .lamp, .hero__art, #glass, .strip { transition-duration: .01ms !important; }
  .device.is-closed .device__deck::after { transition-delay: 0s; }
  .face__oval { transition-duration: .15s; }
  .place:hover .place__img img, .place:focus-within .place__img img { scale: none; }
  .face:hover { transform: rotate(-4deg); }
  .start:hover, .device__wake:hover { transform: none; }
  .device__wake:hover { transform: translate(-50%, -50%); }
}

/* ------------------------------------------------------------------ view transitions (opt-in and timing: base.css) */

/* frame 001 ⇄ the window: the image keeps its own aspect while the box grows, so it never squashes */
::view-transition-old(tx-001), ::view-transition-new(tx-001) { height: 100%; object-fit: cover; overflow: clip; }

/* ------------------------------------------------------------------ Lenis (from lenis@1.3.4/dist/lenis.css, without its iframe rule) */

html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }