/* One More Minute · page styles (R1). Only inside <main class="omm-page">; head, foot and tokens come from the frame.
   Design rules of the game: bone white #cfc6b4, never pure white; titles stand in the dark, never on the island of light;
   world black is tinted, never flat #000 for surfaces (the very first frame is the hand-off black). No dashes in the copy. */

:root {
  --omm-ink: var(--omm-bone);
  --omm-ink-dim: rgba(207, 198, 180, .78);
  --omm-ink-faint: rgba(207, 198, 180, .8);
  --omm-ease: var(--ease-out);
  --omm-pad: clamp(18px, 4.2vw, 72px);
}

html[data-world="omm"], html[data-world="omm"] body { background: var(--omm-handoff); }
html[data-world="omm"] body { margin: 0; }
.omm-page { position: relative; color: var(--omm-ink); font: 400 1rem/1.6 var(--font-omm-text); }
.omm-page h1, .omm-page h2, .omm-page h3, .omm-page p, .omm-page ol, .omm-page ul, .omm-page dl, .omm-page dd, .omm-page figure { margin: 0; padding: 0; }
.omm-page img { display: block; max-width: 100%; height: auto; }
.omm-page a { color: inherit; }
.omm-page .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- shared type */
.omm-label { display: block; font: 500 .72rem/1.2 var(--font-brand); letter-spacing: .32em; text-transform: uppercase; color: var(--omm-ink-faint); }
.omm-big { font: 300 clamp(2.1rem, 4.6vw, 4.6rem)/1.05 var(--font-omm-title); letter-spacing: .01em; color: var(--omm-ink); }
.omm-big--quiet { font-style: italic; font-size: clamp(1.7rem, 3.4vw, 3.2rem); }
.omm-head { font: 500 clamp(1.7rem, 3.1vw, 2.9rem)/1.1 var(--font-omm-title); color: var(--omm-ink); }
.omm-head--italic { font-style: italic; font-weight: 400; }
.omm-body { font: 400 clamp(1rem, 1.12vw, 1.12rem)/1.6 var(--font-omm-text); color: var(--omm-ink-dim); max-width: 34rem; }
.omm-sub { font: italic 400 clamp(1.25rem, 2vw, 1.85rem)/1.35 var(--font-omm-title); color: var(--omm-ink); max-width: 46rem; text-align: center; text-wrap: balance; }
.omm-small { font: 500 .72rem/1.6 var(--font-brand); letter-spacing: .22em; text-transform: uppercase; color: var(--omm-ink-faint); text-align: center; }
.omm-status { font: 500 .74rem/1.5 var(--font-brand); letter-spacing: .24em; text-transform: uppercase; color: var(--omm-ink-faint); }
.omm-wt { font: 500 .66rem/1 var(--font-brand); letter-spacing: .34em; text-transform: uppercase; color: var(--omm-ink-faint); }
.omm-chapter { display: flex; flex-direction: column; gap: .7rem; }
.omm-chapter__name { font: 300 clamp(2.4rem, 5.6vw, 5.4rem)/1 var(--font-omm-title); letter-spacing: .12em; text-transform: uppercase; color: var(--omm-ink); }
.omm-h2 { font: 400 clamp(2rem, 3.6vw, 3.4rem)/1.1 var(--font-omm-title); letter-spacing: .06em; color: var(--omm-ink); }

/* ---------------------------------------------------------------- skip link, chapter rail */
.omm-skip { position: fixed; left: 16px; top: -80px; z-index: calc(var(--z-head) + 11); padding: 10px 14px; background: var(--omm-ink); color: #111; text-decoration: none;
  font: 600 12px/1 var(--font-brand); letter-spacing: .16em; text-transform: uppercase; }
.omm-skip:focus { top: 60px; }
.omm-rail { position: fixed; z-index: 6; right: clamp(8px, 1.2vw, 20px); top: 50%; transform: translateY(-50%);
  padding: 10px 12px 10px 16px; border-radius: 3px; background: rgba(4, 4, 3, .96); box-shadow: 0 0 30px 14px rgba(4, 4, 3, .6); }
.omm-rail ol { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; }
.omm-rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 7px 0; text-decoration: none;
  font: 500 .78rem/1 var(--font-brand); letter-spacing: .2em; text-transform: uppercase; color: rgba(207, 198, 180, .96);
  text-shadow: 0 0 6px rgba(0, 0, 0, .9); }
.omm-rail a::after { content: ""; width: 14px; height: 1px; background: currentColor; transition: width .5s var(--omm-ease); }
.omm-rail a span { opacity: 0; transform: translateX(6px); transition: opacity .4s ease, transform .5s var(--omm-ease); }
.omm-rail a:hover, .omm-rail a:focus-visible, .omm-rail a[aria-current] { color: #d8cfc0; }
.omm-rail a[aria-current]::after { width: 26px; }
@media (max-width: 900px) { .omm-rail { display: none; } }

/* ================================================================ calm version (default: reduced motion, no WebGL, no JS) */
.omm-stage { display: none; }
.omm-curtain { position: fixed; inset: 0; z-index: 7; background: var(--omm-handoff); pointer-events: none; animation: omm-lift 1.1s ease .25s forwards; }
@keyframes omm-lift { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .omm-curtain { display: none; } }

.omm-scene { position: relative; background: var(--omm-world); }
.omm-shot { position: relative; }
.omm-still img { width: 100%; height: auto; }
.omm-still--hero img { width: 100%; height: 100vh; height: 100svh; object-fit: cover; object-position: 46% 40%; }
.omm-lines { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin: 0 auto; padding: clamp(28px, 4vw, 56px) var(--omm-pad) clamp(64px, 9vw, 120px); max-width: 52rem; text-align: center; }
.omm-still:not(.omm-still--hero) img { max-height: 88vh; object-fit: cover; }
.omm-shot--text .omm-lines { padding-top: clamp(80px, 12vw, 160px); }
.omm-knocks { display: flex; flex-wrap: wrap; gap: .4em .9em; justify-content: center; margin: 0 auto; padding: 0 var(--omm-pad) 1rem; max-width: 52rem; font: 400 clamp(1.1rem, 2.4vw, 2.2rem)/1 var(--font-omm-title); letter-spacing: .3em; color: var(--omm-ink-faint); }

.omm-hero { position: absolute; z-index: 2; left: auto; right: var(--omm-pad); bottom: clamp(56px, 12vh, 140px); width: min(34vw, 560px);
  display: flex; flex-direction: column; gap: .9rem; text-shadow: 0 0 22px rgba(0, 0, 0, .7); }
.omm-hero__logo { width: 100%; height: auto; }
.omm-hero__tag { font: italic 400 clamp(1.25rem, 1.9vw, 1.8rem)/1.3 var(--font-omm-title); color: var(--omm-ink); margin-top: .5rem; }
.omm-cue { display: none; }

.omm-outro .omm-lines { padding-bottom: clamp(80px, 12vw, 140px); }
.omm-back { display: inline-flex; align-items: center; gap: .9em; padding: .7em 0; text-decoration: none;
  font: 600 .78rem/1 var(--font-brand); letter-spacing: .26em; text-transform: uppercase; color: var(--omm-ink); }
.omm-back::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; transition: width .5s var(--omm-ease); }
.omm-back:hover::before, .omm-back:focus-visible::before { width: 56px; }
.omm-ways { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.omm-back--other { color: var(--omm-ink-dim); }
.omm-back--other::before { opacity: .45; }
.omm-body--italic { font-family: var(--font-omm-title); font-style: italic; font-size: clamp(1.1rem, 1.35vw, 1.3rem); color: var(--omm-ink-dim); }
/* a hidden line never hides keyboard focus */
html.omm-cine .omm-line:focus-within { opacity: 1 !important; transform: none !important; }

/* ---------------------------------------------------------------- plain sections: the game, screenshots, facts */
.omm-plain { position: relative; z-index: 3; background: var(--omm-world); padding: clamp(80px, 11vw, 160px) var(--omm-pad); }
.omm-page .omm-plain > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.omm-lead { margin-top: 1.4rem; max-width: 46rem; font: italic 400 clamp(1.25rem, 1.8vw, 1.65rem)/1.45 var(--font-omm-title); color: var(--omm-ink-dim); margin-left: auto; margin-right: auto; text-align: center; }
.omm-game .omm-h2 { text-align: center; }
.omm-features { list-style: none; margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4.5vw, 64px) clamp(36px, 6vw, 96px); counter-reset: f; }
.omm-feature { counter-increment: f; padding-top: 1.3rem; border-top: 1px solid rgba(207, 198, 180, .16); }
.omm-feature::before { content: counter(f, decimal-leading-zero); display: block; margin-bottom: .9rem; font: 500 .7rem/1 var(--font-brand); letter-spacing: .3em; color: var(--omm-ink-faint); }
.omm-feature h3 { font: 500 clamp(1.4rem, 2vw, 1.85rem)/1.2 var(--font-omm-title); color: var(--omm-ink); }
.omm-feature p { margin-top: .6rem; color: var(--omm-ink-dim); max-width: 36rem; }

.omm-gallery { padding-top: clamp(40px, 6vw, 90px); text-align: center;
  background: radial-gradient(70% 55% at 50% 45%, #15130d, var(--omm-world) 72%); }
.omm-note { margin-top: .6rem; color: var(--omm-ink-faint); }
.omm-page .omm-gallery .omm-thumbs { max-width: 1560px; list-style: none; margin-top: clamp(28px, 4vw, 52px); text-align: left;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(10px, 1.2vw, 18px); }
.omm-thumb:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.omm-thumb:nth-child(3), .omm-thumb:nth-child(8), .omm-thumb:nth-child(13) { grid-column: span 2; }
.omm-thumb:nth-child(1) .omm-thumb__link, .omm-thumb:nth-child(1) .omm-thumb__link img { height: 100%; }
.omm-thumb:nth-child(1) .omm-thumb__link { display: flex; flex-direction: column; }
.omm-thumb:nth-child(1) .omm-thumb__link img { flex: 1; min-height: 0; aspect-ratio: auto; }
.omm-thumb:nth-child(3) .omm-thumb__link img, .omm-thumb:nth-child(8) .omm-thumb__link img, .omm-thumb:nth-child(13) .omm-thumb__link img { aspect-ratio: 32 / 9; object-position: 50% 45%; }
.omm-thumb__link { position: relative; display: block; overflow: hidden; text-decoration: none; background: #000; }
.omm-thumb__link img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .86; transition: opacity .5s ease, transform 1.2s var(--omm-ease); }
.omm-thumb__link:hover img, .omm-thumb__link:focus-visible img { opacity: 1; transform: scale(1.03); }
.omm-thumb__cap { display: block; padding: .55rem 0 .2rem; background: var(--omm-world); font: 500 .64rem/1.3 var(--font-brand); letter-spacing: .2em; text-transform: uppercase; color: var(--omm-ink-faint); }
.omm-lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(2, 2, 1, .96); color: var(--omm-ink); }
.omm-lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.omm-lightbox[open] { display: grid; place-items: center; }
.omm-lightbox__fig { width: min(92vw, 160vh); }
.omm-lightbox__img { width: 100%; height: auto; }
.omm-lightbox__cap { padding: .8rem 0; font: 500 .7rem/1.4 var(--font-brand); letter-spacing: .22em; text-transform: uppercase; color: var(--omm-ink-dim); }
.omm-lightbox__btn { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; display: grid; place-items: center; background: rgba(0, 0, 0, .5); color: var(--omm-ink);
  border: 1px solid rgba(207, 198, 180, .25); border-radius: 50%; font: 300 1.5rem/1 var(--font-omm-title); cursor: pointer; }
.omm-lightbox__prev { left: 2vw; }
.omm-lightbox__next { right: 2vw; }
.omm-lightbox__close { top: 28px; right: 2vw; margin-top: 0; }
.omm-lightbox__btn:hover { background: rgba(207, 198, 180, .14); }

.omm-facts { padding-top: clamp(40px, 6vw, 90px); }
.omm-factlist { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(28px, 5vw, 80px); }
.omm-fact { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: 1rem; padding: .95rem 0; border-top: 1px solid rgba(207, 198, 180, .13); }
.omm-fact dt { font: 500 .7rem/1.6 var(--font-brand); letter-spacing: .22em; text-transform: uppercase; color: var(--omm-ink-faint); padding-top: .2rem; }
.omm-fact dd { color: var(--omm-ink-dim); }

@media (max-width: 700px) {
  .omm-features, .omm-factlist { grid-template-columns: 1fr; }
  .omm-page .omm-gallery .omm-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .omm-thumb:nth-child(1) { grid-row: span 1; }
  .omm-thumb:nth-child(1) .omm-thumb__link img { aspect-ratio: 16 / 9; flex: none; }
  .omm-thumb:nth-child(8), .omm-thumb:nth-child(13) { grid-column: span 1; }
  .omm-thumb:nth-child(3) .omm-thumb__link img, .omm-thumb:nth-child(8) .omm-thumb__link img, .omm-thumb:nth-child(13) .omm-thumb__link img { aspect-ratio: 16 / 9; }
  .omm-fact { grid-template-columns: minmax(6.5rem, 34%) 1fr; gap: .8rem; padding: .7rem 0; font-size: .95rem; line-height: 1.45; }
  .omm-fact dt { font-size: .62rem; letter-spacing: .16em; }
  .omm-hero { left: var(--omm-pad); right: var(--omm-pad); width: auto; bottom: 9svh; align-items: center; text-align: center; }
  .omm-hero__logo { width: min(78vw, 360px); }
  .omm-lightbox__btn { top: auto; bottom: 24px; margin-top: 0; }
  .omm-lightbox__close { top: 18px; bottom: auto; }
}
@media (max-aspect-ratio: 4/5) { .omm-still--hero img { object-position: 50% 40%; } }

/* ================================================================ cinematic version */
html.omm-cine .omm-stage { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
html.omm-cine .omm-curtain { animation: none; transition: opacity .6s ease; z-index: 0; }
html.omm-cine.omm-stage-on .omm-curtain { opacity: 0; }
html.omm-cine .omm-scene { background: transparent; }
html.omm-cine #arrival { height: 170vh; }
html.omm-cine #night { height: 320vh; }
html.omm-cine #house { height: 200vh; }
html.omm-cine #halcyon { height: 360vh; }
html.omm-cine #outro { height: 150vh; }
html.omm-cine .omm-pin { position: fixed; inset: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 1; pointer-events: none; }
html.omm-cine .omm-scene:not(.is-active) .omm-pin { visibility: hidden; }
html.omm-cine .omm-outro .omm-pin { position: sticky; top: 0; pointer-events: auto; }
html.omm-cine .omm-outro:not(.is-active) .omm-pin { visibility: visible; }
html.omm-cine .omm-shot { position: absolute; inset: 0; }
html.omm-cine .omm-still { display: none; }
html.omm-cine .omm-lines { position: absolute; padding: 0; max-width: none; gap: 1rem; }
html.omm-cine .omm-lines--right { right: calc(var(--omm-pad) + 2.5vw); bottom: 17vh; width: min(36rem, 40vw); }
html.omm-cine .omm-lines--left { left: var(--omm-pad); bottom: 16vh; width: min(36rem, 40vw); }
html.omm-cine .omm-lines--topright { right: calc(var(--omm-pad) + 2.5vw); top: 18vh; width: min(36rem, 40vw); }
html.omm-cine .omm-lines--right, html.omm-cine .omm-lines--left, html.omm-cine .omm-lines--topright { align-items: flex-start; text-align: left; }
html.omm-cine [data-shot="clock"] .omm-lines--right { width: min(46rem, 46vw); bottom: auto; top: 33vh; }
html.omm-cine .omm-lines--low { left: 50%; bottom: 11vh; width: min(52rem, 86vw); transform: translateX(-50%); }
html.omm-cine .omm-lines--center { left: 50%; top: 50%; width: min(52rem, 86vw); transform: translate(-50%, -50%); }
html.omm-cine .omm-lines > .omm-line { position: relative; }
html.omm-cine .omm-lines--low > .omm-line { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; }
html.omm-cine .omm-line { opacity: 0; transform: translateY(6px); transition: none; text-shadow: 0 0 24px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .6); }
html.omm-cine .omm-line.is-on { opacity: 1; transform: none; }
/* a soft dark ground behind the words while they are on (text shadow alone is not a background) */
html.omm-cine .omm-lines::before { content: ""; position: absolute; z-index: -1; inset: -22% -14%; pointer-events: none; opacity: var(--omm-ground, 0);
  background: radial-gradient(closest-side, rgba(3, 3, 2, .74), rgba(3, 3, 2, .5) 55%, rgba(3, 3, 2, 0)); }
html.omm-cine .omm-lines--low::before { inset: auto -12% -3.5rem; height: 12rem; }
html.omm-cine .omm-outro .omm-lines::before { opacity: 1; }
html.omm-cine .omm-lines .omm-status, html.omm-cine .omm-lines .omm-label { color: rgba(207, 198, 180, .94); }
html.omm-cine .omm-lines--low .omm-small { bottom: -2.4rem; }

/* KNOCK: hard on, quick decay, two soft echoes (after R3) */
html.omm-cine .omm-knocks { position: absolute; inset: 0; display: block; max-width: none; margin: 0; padding: 0; pointer-events: none; z-index: 2; }
html.omm-cine .omm-knock { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); opacity: 0;
  font: 500 clamp(3.4rem, 10vw, 9.5rem)/1 var(--font-omm-title); letter-spacing: .32em; padding-left: .32em; color: var(--omm-ink); text-shadow: 0 0 12px rgba(0, 0, 0, .8); }
/* echoes without filters (a blur on huge type at DPR 2 costs a whole frame); the word is its own layer */
html.omm-cine .omm-knock { will-change: transform, opacity; }
html.omm-cine .omm-scene.is-active .omm-knock:not(.is-hit) { opacity: .002; }   /* painted ahead, so the first knock needs no raster */
html.omm-cine .omm-knock::before, html.omm-cine .omm-knock::after { content: attr(data-t); position: absolute; inset: 0; padding-left: .32em; opacity: .16; }
html.omm-cine .omm-knock::before { transform: translate(-2%, 1%) scale(1.04); }
html.omm-cine .omm-knock::after { transform: translate(2%, -1%) scale(1.08); opacity: .09; }
html.omm-cine .omm-knock.is-hit { animation: omm-knock 1.1s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes omm-knock { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 18% { opacity: .95; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.985); } }

/* hero: appears after the bulb, fades with the first steps */
html.omm-cine .omm-hero { position: absolute; bottom: 16vh; will-change: opacity; }   /* its own layer: fading it costs no repaint */
html.omm-cine .omm-line, html.omm-cine .omm-lines::before { will-change: opacity, transform; }
/* over the live canvas the head's panel switches without a fade (the 0.4 s fade cost a frame per step at DPR 2) */
html.omm-cine .gp-head::before { transition: none; }
/* starts at a trace of opacity, not 0: the title is painted with the first frame (in the dark, under the curtain),
   so the browser counts it as the largest content right away, then it rises with the bulb */
html.omm-cine .omm-hero > * { opacity: .01; transform: translateY(10px); transition: opacity 1.4s ease, transform 1.8s var(--omm-ease); }
html.omm-cine.omm-ready .omm-hero > *, html.omm-cine.omm-copy-on .omm-hero > * { opacity: 1; transform: none; }
html.omm-cine.omm-ready .omm-hero > :nth-child(2), html.omm-cine.omm-copy-on .omm-hero > :nth-child(2) { transition-delay: .2s; }
html.omm-cine.omm-ready .omm-hero > :nth-child(3), html.omm-cine.omm-copy-on .omm-hero > :nth-child(3) { transition-delay: .4s; }
html.omm-cine.omm-ready .omm-hero > :nth-child(4), html.omm-cine.omm-copy-on .omm-hero > :nth-child(4) { transition-delay: .6s; }
html.omm-cine .omm-cue { display: flex; position: absolute; left: 50%; bottom: max(3.5vh, env(safe-area-inset-bottom)); transform: translateX(-50%); flex-direction: column; align-items: center; gap: 12px;
  font: 500 .66rem/1 var(--font-brand); letter-spacing: .32em; text-transform: uppercase; color: var(--omm-ink-faint); opacity: 0; }
html.omm-cine .omm-cue::after { content: ""; width: 1px; height: 40px; background: linear-gradient(rgba(207, 198, 180, .5), rgba(207, 198, 180, 0)); }
html.omm-cine.omm-ready .omm-cue span { animation: omm-in 1.4s ease 1.6s both; }
@keyframes omm-in { from { opacity: 0; } to { opacity: 1; } }
html.omm-cine.omm-ready .omm-cue { opacity: 1; }
html.omm-cine .omm-cue span { opacity: 0; }

@media (max-width: 700px), (max-aspect-ratio: 4/5) {
  html.omm-cine #arrival { height: 160vh; }
  html.omm-cine #night { height: 300vh; }
  html.omm-cine #house { height: 185vh; }
  html.omm-cine #halcyon { height: 330vh; }
  html.omm-cine #outro { height: 140vh; }
  html.omm-cine .omm-pin::after { content: ""; position: absolute; inset: 40% 0 0 0; z-index: -2; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .78)); }
  html.omm-cine .omm-lines--right, html.omm-cine .omm-lines--left, html.omm-cine .omm-lines--topright, html.omm-cine [data-shot="clock"] .omm-lines--right {
    left: var(--omm-pad); right: var(--omm-pad); width: auto; top: auto; bottom: 12svh; align-items: center; text-align: center; }
  html.omm-cine .omm-lines--low { bottom: 12svh; }
  html.omm-cine .omm-hero { left: var(--omm-pad); right: var(--omm-pad); width: auto; bottom: 15svh; }
  html.omm-cine .omm-body { margin: 0 auto; }
  .omm-chapter { align-items: center; }
}