/* Hallmark · route: custom (bespoke) · structure: object stage · nav: hour rail (custom) · footer: colophon inside the close
 * pre-emit critique: P5 H4 E4 S5 R5 V5 · contrast: measured per element on the composited frame (build/verify.mjs audit)
 */
/* Lansford · page layer. The engine stylesheet is untouched. */

html, body { overflow-x: clip; background: var(--color-ground); }
body { font-family: var(--font-body); color: var(--color-ink); font-weight: 400; }

.skip {
  position: fixed; left: var(--space-md); top: var(--space-md); z-index: 90;
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius);
  background: var(--color-ink); color: var(--color-ground); font-size: var(--text-sm); text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------------ bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-lg) var(--gutter);
  pointer-events: none;
}
.bar a { pointer-events: auto; color: var(--color-ink); text-decoration: none; }
.bar__mark {
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-sm);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  transition: opacity var(--dur-mid) var(--ease-out);
}
/* in the hall the name is the title itself; the bar keeps it until you leave */
[data-hero="1"] .bar__mark { opacity: 0; }
.bar__credit { font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-ink-soft); }
.bar a:hover { color: var(--color-accent-hover); }

/* ---------------------------------------------------------------- stage -- */
.rooms { --p: 0; }
.stage { background: var(--color-ground); overflow: clip; isolation: isolate; }

.plates, .plate, .plate img, .door, .still, .watch { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate { opacity: 0; will-change: opacity, transform; }
.plate[data-room="0"] { opacity: 1; }
.plate img { object-fit: cover; object-position: 50% 50%; display: block; }
.door { background: var(--color-door); opacity: 0; pointer-events: none; z-index: 1; }
/* where the watch comes to rest: a soft shadow on the plinth, placed by main.js */
.rest-shadow {
  position: absolute; left: 50%; top: 61%; z-index: 1; width: min(30vh, 44vw); height: min(5vh, 7vw);
  translate: -50% -40%; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, var(--color-shadow), transparent);
}

.watch { z-index: 2; display: none; pointer-events: none; }
.gl-on .watch { display: block; opacity: 0; transition: opacity 420ms var(--ease-out); }
.gl-on.is-ready .watch { opacity: 1; }

.still { z-index: 2; pointer-events: none; }
.gl-on .still { display: none; }
.still__watch {
  position: absolute; left: 50%; top: 47%; width: min(64vh, 82vw); height: auto;
  translate: -50% -50%; opacity: 0; transition: opacity 320ms var(--ease-out);
}
.still__watch[data-room="0"] { opacity: 1; }

/* scrims: shaped to where the copy sits, faded with it by main.js */
.scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.scrim--title {
  /* the hall's ceiling is dark already except the skylight, which sits right behind the name */
  background: linear-gradient(to bottom, var(--color-scrim-deep) 0%, var(--color-scrim-deep) 24%, var(--color-scrim-soft) 33%, transparent 44%);
}
.scrim--copy {
  background: radial-gradient(68rem 40rem at 0% 100%, var(--color-scrim-deep) 0%, var(--color-scrim-deep) 38%, var(--color-scrim-soft) 64%, transparent 86%);
}

/* the last room's left wall is lit, so its copy gets a deeper scrim */
[data-close="1"] .scrim--copy {
  background: linear-gradient(90deg, var(--color-scrim) 0%, var(--color-scrim) 28%, var(--color-scrim-soft) 46%, transparent 62%);
}

/* ----------------------------------------------------------------- rooms -- */
.room {
  position: absolute; z-index: 4; left: var(--gutter); bottom: clamp(2.5rem, 9vh, 6rem);
  width: min(var(--measure), calc(100vw - var(--gutter) * 2 - 4rem));
}
.head, .title {
  margin: 0; font-family: var(--font-display); font-weight: 400; font-style: normal;
  text-transform: uppercase; color: var(--color-ink);
  overflow-wrap: anywhere; min-width: 0;
}
.head { font-size: var(--text-title); letter-spacing: var(--track-caps); line-height: 1.05; }
.body { margin: var(--space-md) 0 0; font-size: var(--text-base); line-height: 1.55; color: var(--color-ink-soft); font-weight: 400; text-wrap: pretty; }

/* the hall: the name across the dim top of the room, the line under the watch */
.room--hall { inset: 0; width: auto; bottom: auto; height: 100%; pointer-events: none; }
.title {
  position: absolute; left: 0; right: 0; top: clamp(4.5rem, 11vh, 8rem);
  font-size: var(--text-display); letter-spacing: var(--track-display); line-height: 1;
  text-align: center; font-weight: 400;
}
.title span { margin-right: calc(var(--track-display) * -1); }
/* the model, small and tracked under the maker's name */
.title .title__model {
  display: block; margin: 0.85em 0 0 0.42em; margin-right: 0;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400;
  letter-spacing: 0.42em; color: var(--color-ink-soft);
}
.room--hall .lede, .room--hall .body { position: absolute; left: var(--gutter); width: min(var(--measure), calc(100vw - var(--gutter) * 2)); }
.room--hall .lede {
  bottom: calc(clamp(2.5rem, 9vh, 6rem) + 4.2em); margin: 0;
  font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0.04em; color: var(--color-ink);
}
.room--hall .body { bottom: clamp(2.5rem, 9vh, 6rem); }

.readout { margin: var(--space-lg) 0 0; display: flex; gap: var(--space-sm); align-items: baseline; font-size: var(--text-sm); color: var(--color-ink-soft); }
.readout__label { letter-spacing: 0.06em; }
.readout__time { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.04em; }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.cta, .again {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-lg);
  border-radius: var(--radius); font: 500 var(--text-sm) / 1 var(--font-body); letter-spacing: 0.06em;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cta { background: var(--color-accent); color: var(--color-accent-ink); border: 1px solid var(--color-accent); }
.cta:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.again { background: transparent; color: var(--color-ink); border: 1px solid var(--color-rule-strong); }
.again:hover { border-color: var(--color-ink); }
.cta:active, .again:active { transform: translateY(1px); }
.colophon { margin: var(--space-xl) 0 0; font-size: var(--text-xs); line-height: 1.6; color: var(--color-ink-dim); max-width: 26rem; }

/* ------------------------------------------------------------ hour rail -- */
.hours { position: fixed; right: var(--gutter); top: 50%; translate: 0 -50%; z-index: 40; }
.hours::before {
  /* the labels sit on lit walls; a soft shade keeps them legible */
  content: ""; position: absolute; z-index: -1; inset: -4rem calc(var(--gutter) * -1) -4rem -9rem;
  background: radial-gradient(closest-side, var(--color-scrim-soft), transparent); pointer-events: none;
}
.hours ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.hours button {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm);
  min-height: 2.75rem; padding: 0 0 0 var(--space-md);
  color: var(--color-ink-soft); font-size: var(--text-xs); letter-spacing: 0.08em; white-space: nowrap;
}
.hours__name { opacity: 0; translate: 0.4rem 0; transition: opacity var(--dur-mid) var(--ease-out), translate var(--dur-mid) var(--ease-out); text-shadow: 0 0 0.6rem var(--color-shadow); }
.hours__tick {
  width: 1.1rem; height: 1px; background: var(--color-rule-strong); flex: none;
  transition: width var(--dur-mid) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.hours button[aria-current="true"] { color: var(--color-ink); }
.hours button[aria-current="true"] .hours__tick { width: 2.4rem; background: var(--color-accent); }
.hours button[aria-current="true"] .hours__name,
.hours button:hover .hours__name,
.hours button:focus-visible .hours__name { opacity: 1; translate: 0 0; }
.hours button:hover .hours__tick { background: var(--color-ink); }
.hours button:focus-visible { outline-offset: 2px; }
/* the rail stays out of the close so the actions own the frame */
[data-close="1"] .hours { opacity: 0.35; }

/* ------------------------------------------------------------------ phone -- */
@media (max-width: 760px) {
  .bar { padding: var(--space-md) var(--gutter); }
  /* on a phone the bar always sits on the skylight: give it its own shade */
  .bar::before {
    content: ""; position: absolute; inset: 0 0 -5.5rem 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, var(--color-scrim-deep) 0%, var(--color-scrim) 45%, transparent 100%);
  }
  .hours::before { display: none; }
  .room--close .body { display: none; }
  [data-close="1"] .scrim--copy {
    background: linear-gradient(to top, var(--color-scrim-deep) 0%, var(--color-scrim-deep) 40%, var(--color-scrim-soft) 50%, transparent 58%);
  }
  .room { left: var(--gutter); right: var(--gutter); width: auto; bottom: max(1.75rem, env(safe-area-inset-bottom)); }
  .room--hall .lede, .room--hall .body { width: auto; right: var(--gutter); }
  .room--hall .lede { bottom: calc(max(1.75rem, env(safe-area-inset-bottom)) + 5.2em); }
  .room--hall .body { bottom: max(1.75rem, env(safe-area-inset-bottom)); }
  .title { top: 6.5rem; font-size: clamp(2.4rem, 12.5vw, 4rem); letter-spacing: 0.12em; }
  .title span { margin-right: -0.12em; }
  .scrim--copy { background: linear-gradient(to top, var(--color-scrim) 0%, var(--color-scrim) 30%, var(--color-scrim-soft) 48%, transparent 66%); }
  .scrim--title { background: linear-gradient(to bottom, var(--color-scrim) 0%, var(--color-scrim-soft) 18%, transparent 32%); }
  .hours { right: auto; left: 50%; top: auto; bottom: auto; translate: -50% 0; top: 3.6rem; }
  .hours ol { grid-auto-flow: column; gap: 0; }
  .hours button { padding: 0 var(--space-2xs); min-width: 2.75rem; justify-content: center; }
  .hours__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hours__tick { width: 1.4rem; }
  .hours button[aria-current="true"] .hours__tick { width: 1.9rem; }
  .colophon { margin-top: var(--space-md); }
  .actions { margin-top: var(--space-lg); }
  .still__watch { top: 44%; }
}

/* build/stills.mjs renders each room's pose into a bare square */
.still-mode .watch { position: fixed; inset: auto; left: 0; top: 0; width: 600px; height: 600px; opacity: 1 !important; }
.still-mode .plates, .still-mode .door, .still-mode .room, .still-mode .scrim, .still-mode .bar, .still-mode .hours, .still-mode .grain { display: none; }

@media (prefers-reduced-motion: reduce) {
  .plate, .still__watch, .hours__name, .hours__tick { transition: opacity 150ms linear; }
}