* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: #0c0a10; }
body { font-family: 'EB Garamond', Georgia, 'Times New Roman', serif; }
a { -webkit-tap-highlight-color: transparent; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.stage {
  --lantern-level: 0.82;
  position: relative; width: 100%; height: 100vh; height: 100dvh;
  min-height: 360px; overflow: hidden; isolation: isolate;
}
.layer { position: absolute; inset: 0; pointer-events: none; }
.bg { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; z-index: 1; }
.ambient-cool {
  z-index: 6;
  background: radial-gradient(115% 88% at 62% 12%, rgba(104,136,196,.08), transparent 62%);
  mix-blend-mode: soft-light;
}
/* Ropes and hardware share the transformed artwork attachment points. */
.strings-layer, .fastenings-layer { width: 100%; height: 100%; overflow: visible; }
.strings-layer { z-index: 24; }
.fastenings-layer { z-index: 26; }
.suspension {
  stroke: url(#rope-color); stroke-width: 1.15; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.fastening { fill: #382617; stroke: #c7a16b; stroke-width: .65; }
.lantern-object {
  position: absolute; z-index: 20; left: -4%; top: 30%; width: 13%; height: auto;
  pointer-events: none;
  filter: brightness(calc(1.12 + var(--lantern-level) * .16)) saturate(1.06);
  transition: filter 240ms linear;
}
/* A quiet fallback row keeps the artwork visible when scripting is disabled. */
.letters-layer {
  position: absolute; inset: 27% 4% auto; z-index: 25;
  display: flex; align-items: center; justify-content: space-between; gap: 1.4%;
  pointer-events: none;
}
.letter { display: block; width: 9.6%; height: auto; flex-shrink: 1; }
.letter[data-key='i_01'] { width: 4.8%; }
.is-ready .letters-layer { inset: 0; display: block; }
.is-ready .letter { position: absolute; top: 0; left: 0; will-change: transform; }
.letter-light-layer { z-index: 27; mix-blend-mode: screen; }
.letter-light {
  position: absolute; top: 0; left: 0; display: block; will-change: transform;
  -webkit-mask-image: var(--artwork-mask); mask-image: var(--artwork-mask);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(105deg,rgba(255,225,164,.88),rgba(255,183,75,.4) 38%,rgba(232,113,33,.1) 72%,transparent);
  opacity: calc(var(--light-exposure) * (.28 + var(--lantern-level) * .22));
  transition: opacity 240ms linear;
}
.glow { z-index: 30; transition: opacity 240ms linear; }
.glow-broad {
  background: radial-gradient(ellipse var(--light-reach-x,55vw) var(--light-reach-y,40vh) at var(--flame-x,4%) var(--flame-y,42%),rgba(255,187,97,.6),rgba(239,143,53,.2) 40%,transparent 78%);
  mix-blend-mode: soft-light; opacity: calc(.2 + var(--lantern-level) * .18);
}
.glow-local {
  background: radial-gradient(ellipse var(--bloom-x,9vw) var(--bloom-y,18vh) at var(--flame-x,3%) var(--flame-y,42%),rgba(255,224,155,.72),rgba(255,176,66,.3) 26%,rgba(233,122,39,.07) 56%,transparent 82%);
  mix-blend-mode: screen; opacity: calc(.35 + var(--lantern-level) * .25);
}
.glow-flame {
  background: radial-gradient(ellipse var(--core-x,2vw) var(--core-y,4vh) at var(--flame-x,3%) var(--flame-y,42%),rgba(255,247,214,.8),rgba(255,211,117,.28) 35%,transparent 75%);
  mix-blend-mode: screen; opacity: calc(.35 + var(--lantern-level) * .3);
}
.glow-desk {
  z-index: 12; top: var(--table-y,54%);
  background: radial-gradient(ellipse var(--desk-reach-x,45vw) var(--desk-reach-y,18vh) at var(--desk-x,16%) var(--desk-y,6vh),rgba(255,191,100,.68),rgba(237,152,65,.3) 38%,rgba(177,95,38,.08) 65%,transparent 85%);
  mix-blend-mode: soft-light; opacity: calc(.38 + var(--lantern-level) * .34);
}
.lantern-shadow {
  position: absolute; z-index: 13; pointer-events: none;
  left: var(--shadow-x,3%); top: var(--shadow-y,54%);
  width: var(--shadow-width,30vw); height: var(--shadow-height,4vh);
  transform: rotate(7deg); transform-origin: left center;
  background: radial-gradient(ellipse at 22% 50%,rgba(6,5,9,.72),rgba(6,5,9,.24) 44%,transparent 72%);
  filter: blur(5px); mix-blend-mode: multiply;
  opacity: calc(.4 + var(--lantern-level) * .15); transition: opacity 240ms linear;
}
.glow-ambient-dark {
  background: linear-gradient(90deg,transparent 30%,rgba(4,6,14,.16));
  mix-blend-mode: multiply; opacity: calc(.3 + (1 - var(--lantern-level)) * .2);
}
.info {
  position: absolute; z-index: 35; left: 50%; top: 72%; width: min(90%, 560px);
  transform: translateX(-50%); text-align: center; margin: 0; color: rgba(238,227,210,.9);
}
.status-label {
  margin: 0 0 20px; padding-left: .12em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.6rem,2.4vw,2.2rem); line-height: 1.2; letter-spacing: .12em;
  text-transform: uppercase; color: #e6cda3; font-weight: 500;
  text-shadow: 0 2px 12px rgba(0,0,0,.85);
}
.launch-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 15px;
  min-height: 52px; max-width: 100%; padding: 0;
  border: 0; border-radius: 0;
  background: none; box-shadow: none;
  color: #efd9b5; font-size: 1.125rem; line-height: 1.3; opacity: .82;
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: .22em;
  transition: opacity .2s ease, text-decoration-color .2s ease;
}
.launch-link:hover { opacity: 1; text-decoration-color: rgba(239,217,181,.45); }
.launch-link:focus-visible { outline: 2px solid #f5d6a6; outline-offset: 5px; }
.launch-arrow { display: none; }
.motion-paused .glow, .motion-paused .lantern-object,
.motion-paused .letter-light, .motion-paused .lantern-shadow { transition: none; }
@media (max-width: 719px), (max-height: 540px) and (orientation: landscape) {
  .launch-arrow-text { display: none; }
  .launch-arrow { display: inline-block; width: .8em; height: .8em; vertical-align: -.02em; }
  /* Keep the existing centered footer clear of either side's safe area. */
  .info { max-width: calc(100% - 2 * max(16px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))); }
}
@media (max-width: 719px) and (orientation: portrait) {
  .bg { object-position: 43% 49%; }
  .info { top: auto; bottom: max(16%,72px,calc(env(safe-area-inset-bottom,0px) + 16px)); width: min(90%,420px); }
  .status-label { margin-bottom: 18px; }
  .launch-link { font-size: 1rem; padding-inline: 0; }
}
/* Toolbar-height changes in portrait must not switch footer composition. */
@media (max-height: 540px) and (orientation: landscape) {
  .stage { min-height: 0; }
  .info { top: auto; bottom: max(9%,calc(env(safe-area-inset-bottom,0px) + 12px)); }
  .status-label { margin-bottom: 12px; font-size: 1.4rem; }
  /* Ease the gap only below 300px of visible height, without a breakpoint jump. */
  .status-label { margin-bottom: clamp(6px,calc(30dvh - 78px),12px); }
  .launch-link { min-height: 46px; padding: 0; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .glow, .lantern-object, .letter-light, .lantern-shadow, .launch-link { transition: none; }
}