@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/serif-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/serif-italic.woff2') format('woff2');
}
:root {
  color-scheme: dark;
  --night: #090910;
  --ivory: #f4ebdf;
  --muted: #c5bfbe;
  --accent: #ecc8a9;
  --line: #3e3740;
  --inset: clamp(1.25rem, 6.3vw, 7.5rem);
  --display: 'Instrument Serif', Georgia, serif;
  --mono: 'Consolas', 'Liberation Mono', monospace;
  background: var(--night);
  color: var(--ivory);
  font-family: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box }
body { margin: 0; }
a { color: inherit; text-decoration: none }
button { color: inherit; font: inherit; cursor: pointer }
button[hidden], [hidden] { display: none !important }
:focus-visible { outline: 2px solid #ffd3a7; outline-offset: 5px }
::selection { color: #17101a; background: #f7c9ad }
.inset { padding-inline: var(--inset) }
.skip { position: fixed; z-index: 10; top: .6rem; left: .6rem; padding: .75rem 1rem; color: #101018; background: var(--ivory); transform: translateY(-160%) }
.skip:focus { transform: none }
.masthead {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1.25rem;
  min-height: 4.65rem; padding: .7rem var(--inset); border-bottom: 1px solid #28252d;
}
.brand { display: flex; align-items: center; gap: .72rem; min-height: 44px; font-family: var(--display); font-size: 1.96rem; letter-spacing: -.035em; line-height: .98 }
.brand-secondary { margin-left: .82rem; display: inline-block; color: var(--muted); font: .61rem/1 var(--mono); text-transform: uppercase; letter-spacing: .17em; vertical-align: .27em }
.brand-mark { position: relative; width: 2rem; height: 2rem; display: block; color: var(--accent) }
.brand-mark::before { content: ''; position: absolute; inset: .22rem .32rem; border: 1px solid; border-radius: 50%; transform: rotate(-34deg) }
.brand-mark::after { content: ''; position: absolute; inset: .65rem -.04rem; border: 1px solid; border-radius: 50%; transform: rotate(-34deg) }
.brand-mark i { position: absolute; width: 3px; height: 3px; background: currentColor; border-radius: 50%; top: .29rem; right: .15rem }
.masthead nav a, .return { display: inline-flex; gap: .75rem; align-items: center; min-height: 44px; font-size: .84rem; }
.masthead nav { margin-inline-start: auto }
.masthead nav a span, .return span { color: var(--accent); font-size: 1rem }
.masthead nav a:hover, .return:hover { text-decoration: underline; text-underline-offset: .35em }
.plate { position: relative; isolation: isolate; margin: 0 }
.stage {
  width: 100%; height: clamp(20rem, 53svh, 42rem); position: relative; overflow: hidden;
  container-type: size;
  --art-width: max(100cqw, 200cqh);
  --art-height: clamp(100cqh, 50cqw, 160cqh);
  background: radial-gradient(ellipse 60% 60% at 55% 65%, #c58570, #593648 32%, #1d1a2d 61%, var(--night) 100%);
}
.stage picture, .stage img, .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
/* Project each still precisely like the live scene. The vertical crop has a
   ceiling so extra horizontal space cannot cut the planet out of the frame. */
.stage img {
  inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: var(--art-width); height: var(--art-height); object-fit: fill;
}
.stage[data-entrance]::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: #090910 url('../assets/dawn-wide.webp') center / var(--art-width) var(--art-height) no-repeat }
.stage[data-entrance="releasing"]::after { animation: dawn-to-still .9s ease-in-out both }
@keyframes dawn-to-still { from { opacity: 1 } to { opacity: 0 } }
@media (max-width: 750px) {
  .stage { --art-width: max(100cqw, 118.3432cqh); --art-height: clamp(100cqh, 84.5cqw, 125cqh) }
  .stage[data-entrance]::after { background-image: url('../assets/dawn-narrow.webp') }
}
@media (prefers-reduced-motion: reduce) {
  .stage[data-entrance]::after { display: none }
}
.stage canvas { opacity: 0 }
.stage[data-ready="true"] canvas { opacity: 1 }
.stage[data-ready="true"] picture { visibility: hidden }
.plate-tools { position: absolute; z-index: 2; top: 1.25rem; right: var(--inset) }
.motion-control {
  min-height: 44px; display: flex; align-items: center; gap: .66rem;
  padding: .35rem .8rem; border: 1px solid #807079; border-radius: 99px; color: #eee4dc;
  background: #0d0c14e6; font: .68rem/1.1 var(--mono);
}
.motion-control:hover { border-color: var(--accent) }
.control-icon { width: 8px; height: 10px; display: inline-block; border-inline: 2px solid var(--accent) }
.motion-control[aria-pressed="true"] .control-icon { border: 0; background: var(--accent); clip-path: polygon(10% 0,100% 50%,10% 100%) }
.plate-caption, .notes-rule { color: var(--accent); text-transform: uppercase; font: .66rem/1.35 var(--mono); letter-spacing: .17em }
.plate-caption { display: flex; align-items: center; gap: .8rem; position: absolute; left: var(--inset); bottom: .2rem; pointer-events: none }
.caption-line { width: 2.2rem; height: 1px; background: currentColor }
.frame-marks { position: absolute; inset: 15% 1.1rem 29%; pointer-events: none; opacity: .42 }
.frame-marks::before, .frame-marks::after { content: ''; position: absolute; top: 0; bottom: 0; width: 5px; background: repeating-linear-gradient(to bottom, #c4b8b4 0 1px, transparent 1px 20px); mask-image: linear-gradient(transparent, black 32%, black 75%, transparent) }
.frame-marks::after { right: 0 }
.introduction { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(17rem,.75fr); align-items: center; gap: 3rem; padding-block: 1rem clamp(2.8rem,7vh,6.7rem); max-width: 123rem; margin: auto }
h1, h2, p { margin: 0 }
h1, h2 { font-family: var(--display); font-weight: 400 }
h1 { font-size: clamp(5.8rem, 11.4vw, 12.6rem); letter-spacing: -.055em; line-height: .96; padding-bottom: .10em }
h1 em, h2 em { font-weight: 400; color: #f2d3b9 }
.intro-copy { align-self: center; padding-top: .4rem; max-width: 25.5rem; }
.intro-copy p { color: #ddd4d0; font-size: clamp(1rem,1.32vw,1.5rem); line-height: 1.54; letter-spacing: -.019em; text-wrap: pretty }
/* Reserve the hint row from first paint so canvas readiness can't move the copy or the notes. */
.gesture { display: flex; visibility: hidden; gap: .55rem; align-items: center; margin-top: 1.12rem; color: #bdb2b6; font: .71rem/1.5 var(--mono) }
.observation:has(.stage[data-ready="true"]) .gesture { visibility: visible }
.observation:has(.stage[data-state="paused"]) .gesture { visibility: hidden }
.hint-mark { color: var(--accent); font: 1.16rem/1 Georgia, serif }
.notes { background: #101016; padding-block: 1.45rem clamp(5rem,9vw,9rem); border-top: 1px solid #343039 }
.notes-rule { color: #c9bdba; display: flex; gap: 1rem; align-items: center }
.rule-line { height: 1px; flex: 1; background: var(--line) }
.notes-rule span:last-child { font-size: .9rem; color: var(--accent) }
.notes-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(17rem,.75fr); gap: 3rem; align-items: start; padding-top: clamp(3rem,7vw,7rem); max-width: 111rem; margin: auto }
h2 { font-size: clamp(3.5rem,6vw,7.25rem); letter-spacing: -.045em; line-height: 1.02; }
.notes-copy { max-width: 32rem; color: var(--muted); font-size: clamp(1rem,1.2vw,1.25rem); line-height: 1.65 }
.notes-copy p + p { margin-top: 1.05em }
.return { margin-top: 1.25rem; color: var(--ivory); border-bottom: 1px solid #8e786f }
@media (min-width: 1000px) {
  .observation { --foreground-overlap: clamp(2.5rem, 8svh, 7rem) }
  .stage { height: clamp(16rem, 70svh, 65rem) }
  .plate-caption {
    left: max(var(--inset), calc((100% - 123rem) / 2 + var(--inset)));
    bottom: calc(var(--foreground-overlap) + .2rem);
  }
  .introduction { position: relative; margin-block-start: calc(-1 * var(--foreground-overlap)) }
  h1 { font-size: clamp(4.75rem, min(11.4vw, 20svh), 12.6rem) }
}
@media (max-width: 750px) {
  .masthead { min-height: 4rem }
  .brand { font-size: 1.66rem; gap: .45rem }
  .brand-secondary { font-size: .56rem; margin-left: .6rem; letter-spacing: .10em }
  .introduction, .notes-grid { grid-template-columns: 1fr; gap: 1.05rem; }
  .introduction { padding-top: 1.2rem; padding-bottom: 2.6rem }
  h1 { font-size: clamp(5rem,16vw,7.5rem) }
  .intro-copy { padding: 0 }
  .intro-copy p { font-size: 1.03rem; max-width: 31em }
  .gesture { margin-top: .7rem }
  .stage { height: clamp(18.5rem,40svh,29rem) }
  .notes-grid { padding-top: 2.8rem; gap: 1.45rem }
  .notes { padding-bottom: 4.5rem }
  .plate-tools { top: .7rem }
  .frame-marks { inset-inline: .48rem }
}
@media (max-width: 385px) {
  .brand-secondary { display: block; margin: .27rem 0 0 .06rem; font-size: .49rem }
  .masthead nav a { gap: .4rem }
  .frame-marks { opacity: .27 }
}
@media (min-width: 751px) and (max-height: 620px) {
  .introduction { padding-block: 1rem 2rem }
  h1 { font-size: clamp(4.2rem, min(9vw, 17svh), 8rem) }
}
@media (min-width: 751px) and (max-width: 999px) and (max-height: 620px) {
  .stage { height: 47svh; min-height: 15rem }
}
@media (min-width: 1000px) and (min-aspect-ratio: 5/2) {
  /* Keep the caption below the near end of the curved limb on shallow windows. */
  .observation { --foreground-overlap: clamp(.75rem, 4.25svh, 3rem) }
  h1 { font-size: clamp(4.2rem, min(11.4vw, 17svh), 12.6rem) }
}
@media (orientation: landscape) and (max-width: 999px) and (max-height: 465px) {
  .masthead { min-height: 3.5rem; padding-block: .375rem }
  .stage { height: 45svh; min-height: 9rem }
  .introduction { padding-block: .65rem 1.75rem }
  h1 { font-size: clamp(4.2rem,8vw,6rem) }
  .intro-copy p { font-size: .96rem; line-height: 1.4 }
  .gesture { margin-top: .45rem }
}
@media (min-width: 1000px) and (max-height: 500px) {
  .masthead { min-height: 3.5rem; padding-block: .375rem }
  .stage { height: 64svh }
  .introduction { padding-block: .65rem 1.5rem }
  .intro-copy p { font-size: 1rem; line-height: 1.4 }
  .gesture { margin-top: .45rem }
}