:root {
  --night: #0d1626;
  --deep: #07101d;
  --ink: #101a29;
  --frost: #dffcff;
  --frost-bright: #f4ffff;
  --ice: #94e7ed;
  --ice-muted: #8fb9c3;
  --amber: #f4aa56;
  --amber-pale: #ffd493;
  --wood: #5f3a28;
  --wood-dark: #2c1b18;
  --body: #bfd1d7;
  --body-muted: #91aab2;
  --line: rgba(205, 246, 249, .2);
  --serif: 'Cormorant', Georgia, serif;
  --sans: 'Outfit', sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-color: #86bbc4 var(--deep);
  background: var(--deep);
  font-optical-sizing: auto;
}

html::-webkit-scrollbar { width: 11px; height: 11px; }
html::-webkit-scrollbar-track { background: var(--deep); }
html::-webkit-scrollbar-thumb { border: 3px solid var(--deep); border-radius: 999px; background: linear-gradient(#b7eef1, #527b86); }
html::-webkit-scrollbar-thumb:hover { background: linear-gradient(#e1fdff, #72aab4); }

::selection { color: #07101d; background: #9eeaf0; text-shadow: none; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--body);
  background:
    radial-gradient(circle at 84% 5%, rgba(67, 120, 144, .14), transparent 25rem),
    linear-gradient(180deg, var(--night), var(--deep) 32%, #09131f 70%, #060d16);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-kerning: normal;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  box-shadow: inset 0 0 9rem rgba(0, 0, 0, .32);
}

.grain {
  position: fixed;
  inset: -30%;
  z-index: 29;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  animation: grain-shift 1.1s steps(2) infinite;
}

@keyframes grain-shift {
  0% { transform: translate3d(-2%, 1%, 0); }
  50% { transform: translate3d(2%, -1%, 0); }
  100% { transform: translate3d(0, 2%, 0); }
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
canvas { display: block; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: .6rem;
  left: .6rem;
  z-index: 100;
  padding: .75rem 1rem;
  color: var(--deep);
  background: var(--frost-bright);
  transform: translateY(-160%);
  transition: transform .2s;
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--amber-pale);
  outline-offset: 4px;
}

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 88px;
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  border-bottom: 1px solid rgba(215, 248, 251, .12);
  color: #d8edf0;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .73rem;
}

.wordmark {
  justify-self: start;
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}

.wordmark-mark {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  margin-right: .7rem;
  border: 1px solid rgba(212, 252, 255, .45);
  border-radius: 50%;
  color: var(--frost-bright);
  font-size: .8rem;
  transition: color .35s, border-color .35s, transform .55s cubic-bezier(.18,.72,.2,1), box-shadow .35s;
}
.wordmark-mark svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; }
.wordmark:hover .wordmark-mark, .wordmark:focus-visible .wordmark-mark { color: var(--amber-pale); border-color: rgba(255,212,147,.68); transform: rotate(30deg); box-shadow: 0 0 18px rgba(148,231,237,.14); }

.site-header nav { display: flex; gap: 1.8rem; }
.site-header nav a { display: grid; place-items: center; min-height: 44px; background: linear-gradient(90deg, var(--amber), var(--ice)) 50% 78% / 0 1px no-repeat; transition: color .3s, background-size .45s cubic-bezier(.18,.72,.2,1); }
.site-header nav a:hover, .site-header nav a:focus-visible, .site-header nav a[aria-current='page'] { color: var(--frost-bright); background-size: 100% 1px; }

.room-number {
  justify-self: end;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums lining-nums;
}
.room-number span { color: #78929b; font-size: .68rem; font-family: var(--sans); }

.hero {
  position: relative;
  min-height: 900px;
  height: max(100svh, 900px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 73% 47%, rgba(107, 204, 219, .16), transparent 30%),
    radial-gradient(circle at 14% 78%, rgba(109, 63, 40, .12), transparent 20rem),
    linear-gradient(112deg, rgba(5, 12, 22, .99) 0 31%, rgba(13, 27, 45, .94) 62%, rgba(7, 16, 28, .99));
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(223, 252, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(223, 252, 255, .025) 1px, transparent 1px);
  background-size: 8vw 8vw;
  mask-image: linear-gradient(90deg, black, transparent 62%);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(220, 252, 255, .16), rgba(114, 184, 199, .035) 28%, transparent 52%),
    repeating-linear-gradient(133deg, transparent 0 52px, rgba(222, 252, 255, .035) 53px, transparent 54px 104px);
  opacity: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  animation: frost-unseal .78s cubic-bezier(.7,.01,.15,1) both;
}

@keyframes frost-unseal {
  0% { opacity: .25; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  60% { opacity: .12; }
  100% { opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 0, 68% 64%); }
}

.site-header.reveal { animation: header-arrive .72s cubic-bezier(.18,.72,.2,1) both; }
.hero-copy > .reveal { animation: field-arrive .84s cubic-bezier(.18,.72,.2,1) both; }
.window-wrap.reveal { animation: pane-arrive 1.05s cubic-bezier(.18,.72,.2,1) .16s both; }
.climate-console.reveal { animation: console-arrive .9s cubic-bezier(.18,.72,.2,1) .48s both; }
@keyframes header-arrive { from { opacity: .72; transform: translateY(-7px); } }
@keyframes field-arrive { from { opacity: .68; transform: translateY(12px); } }
@keyframes pane-arrive { from { opacity: .76; transform: translate3d(18px, 10px, 0); filter: drop-shadow(-.5rem 1rem 2rem rgba(0,0,0,.28)); } }
@keyframes console-arrive { from { opacity: .7; transform: translateY(13px); } }

.hero-copy {
  position: absolute;
  z-index: 8;
  top: clamp(145px, 17vh, 190px);
  left: clamp(1.5rem, 6vw, 7rem);
  width: min(48rem, 57vw);
  pointer-events: none;
}

.eyebrow {
  margin: 0 0 1.1rem;
  color: #9bc7ce;
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1, h2, h3, p { text-wrap: pretty; }

h1 {
  margin: 0;
  color: var(--frost-bright);
  font-family: var(--serif);
  font-size: clamp(5.5rem, 10.5vw, 10.2rem);
  font-weight: 300;
  line-height: .66;
  letter-spacing: -.065em;
  text-shadow: 0 0 30px rgba(191, 246, 252, .12);
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

h1 span, h1 em { display: block; }
h1 span { animation: title-etch 1.15s cubic-bezier(.18,.72,.2,1) .12s both; }
h1 em {
  margin-left: clamp(2rem, 9vw, 9rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(223, 252, 255, .78);
  font-weight: 300;
  animation: title-etch 1.25s cubic-bezier(.18,.72,.2,1) .25s both;
}

@keyframes title-etch {
  from { letter-spacing: -.09em; text-shadow: 0 0 28px rgba(190, 248, 252, .32); }
  to { letter-spacing: -.065em; text-shadow: 0 0 0 rgba(190, 248, 252, 0); }
}

.hero-deck {
  width: min(25rem, 75%);
  margin: 3.2rem 0 2rem;
  color: #b6cad0;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-style: italic;
  line-height: 1.3;
}

.breath-instruction {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  gap: .9rem;
  color: #d9f4f5;
  font-size: .75rem;
  letter-spacing: .04em;
  pointer-events: auto;
}
.breath-instruction span:last-child { transition: color .3s, transform .45s cubic-bezier(.18,.72,.2,1); }
.breath-instruction:hover span:last-child, .breath-instruction:focus-visible span:last-child { color: var(--frost-bright); transform: translateX(.25rem); }
.breath-instruction:hover .hold-ring::after, .breath-instruction:focus-visible .hold-ring::after { background: var(--amber-pale); box-shadow: 0 0 16px rgba(255,212,147,.8); }
.breath-instruction b { display: block; font-weight: 500; }
.hold-ring {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(207, 248, 251, .4);
  border-radius: 50%;
}
.hold-ring::before, .hold-ring::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(207, 248, 251, .32);
  border-radius: 50%;
  inset: 8px;
}
.hold-ring::after { inset: 16px; background: var(--frost); box-shadow: 0 0 10px var(--frost); }
.hold-ring::after { transition: background .3s, box-shadow .3s; }

.hero-field-note {
  display: flex;
  width: min(25rem, 75%);
  justify-content: space-between;
  margin: .8rem 0 0;
  padding-top: .65rem;
  border-top: 1px solid rgba(211, 248, 251, .12);
  color: #66858e;
  font-size: .53rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero-field-note b { color: #9bbbc1; font-weight: 400; }

.window-wrap {
  position: absolute;
  z-index: 2;
  top: 10.5%;
  right: clamp(-4rem, -2vw, -1rem);
  width: min(62vw, 900px);
  height: 70%;
  min-height: 615px;
  padding: 24px 26px 0;
  filter: drop-shadow(-2rem 3rem 4rem rgba(0, 0, 0, .42));
}

.window-casing {
  position: absolute;
  inset: 0 0 54px;
  border: 24px solid #17283a;
  border-left-color: #1d3145;
  border-bottom-color: #0b1421;
  box-shadow:
    inset 0 0 0 1px rgba(217, 248, 250, .12),
    inset 1rem 1rem 2rem rgba(0, 0, 0, .55),
    0 0 0 1px #050b13;
}

.window-glass {
  position: relative;
  height: calc(100% - 54px);
  overflow: hidden;
  cursor: crosshair;
  background: #07111f;
  box-shadow: inset 0 0 2.5rem rgba(0, 0, 0, .62);
  touch-action: none;
}
.window-glass:focus-visible { outline: 2px solid var(--amber-pale); outline-offset: 4px; }
.window-glass:focus-visible .breath-hint { opacity: .9; }

.outside-scene { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #07111e, #14243a 68%, #1c2936); }
.outside-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 56%, rgba(255, 180, 85, .22), transparent 16%),
    linear-gradient(108deg, transparent 0 35%, rgba(47, 75, 95, .25) 35% 36%, transparent 36%);
}
.cloud { position: absolute; width: 50%; height: 9%; border-radius: 50%; filter: blur(18px); background: rgba(63, 86, 104, .25); }
.cloud-a { top: 15%; left: 7%; transform: rotate(-4deg); }
.cloud-b { top: 30%; right: 1%; width: 38%; }
.streetlamp { position: absolute; right: 17%; bottom: 13%; width: 90px; height: 62%; }
.lamp-post { position: absolute; left: 43px; bottom: 0; width: 7px; height: 76%; border-radius: 5px 5px 0 0; background: linear-gradient(90deg, #111821, #43505a, #121922); }
.lamp-cap { position: absolute; top: 10%; left: 19px; z-index: 2; width: 57px; height: 22px; border-radius: 50% 50% 7px 7px; background: #151d25; border-top: 2px solid #56606a; }
.lamp-light { position: absolute; top: 12.5%; left: 24px; width: 48px; height: 57px; border-radius: 45% 45% 50% 50%; background: radial-gradient(circle, #ffe4ae 0 16%, #f3a448 38%, rgba(236, 144, 48, .05) 72%); box-shadow: 0 0 38px 18px rgba(242, 157, 62, .24), 0 0 100px 40px rgba(242, 157, 62, .08); }
.far-windows { position: absolute; left: 6%; bottom: 12%; display: grid; grid-template-columns: repeat(5, 20px); gap: 12px; transform: skewY(-4deg); }
.far-windows::before { content: ''; position: absolute; inset: -55px -40px -15px; background: #0b1521; clip-path: polygon(0 30%, 55% 0, 100% 22%, 100% 100%, 0 100%); }
.far-windows i { position: relative; width: 20px; height: 27px; background: #1b2a39; box-shadow: 0 0 0 4px #0a121c; }
.far-windows i:nth-child(2), .far-windows i:nth-child(5) { background: #8b6537; box-shadow: 0 0 16px rgba(237, 160, 72, .18), 0 0 0 4px #0a121c; }
.witness-house {
  position: absolute;
  z-index: 1;
  left: 58%;
  top: 37%;
  width: 84px;
  height: 66px;
  opacity: .16;
  filter: saturate(.6);
  transform: translate(-50%, -50%) scale(.86);
  transition: opacity .7s, filter .7s, transform 1s cubic-bezier(.18,.72,.2,1);
}
.witness-house::before { content: ''; position: absolute; inset: 20px 5px 0; background: linear-gradient(90deg, #0b141e, #182533 52%, #08111a); box-shadow: 0 12px 20px rgba(0,0,0,.4); }
.witness-house::after { content: ''; position: absolute; left: 0; top: 4px; width: 84px; height: 33px; background: #070f18; clip-path: polygon(0 100%, 49% 0, 100% 100%); }
.witness-window { position: absolute; z-index: 2; left: 34px; top: 26px; width: 19px; height: 25px; overflow: hidden; border: 2px solid #111a22; background: #936536; box-shadow: inset 0 0 11px #ffcd83, 0 0 12px rgba(244,170,86,.14); }
.witness-window::before, .witness-window::after { content: ''; position: absolute; z-index: 2; background: rgba(18,24,29,.6); }
.witness-window::before { left: 7px; top: 0; width: 1px; height: 100%; }
.witness-window::after { left: 0; top: 10px; width: 100%; height: 1px; }
.witness-window b { position: absolute; z-index: 1; left: 7px; bottom: -2px; width: 7px; height: 15px; border-radius: 50% 50% 0 0; background: #11171c; transform-origin: 50% 100%; transition: transform 1s cubic-bezier(.18,.72,.2,1); }
.witness-window b::before { content: ''; position: absolute; left: 1px; top: -5px; width: 5px; height: 6px; border-radius: 50%; background: #11171c; }
.witness-window b::after { content: ''; position: absolute; left: 4px; top: 5px; width: 9px; height: 2px; border-radius: 2px; background: #11171c; transform: rotate(-68deg); transform-origin: left; }
.window-glass.witness-found .witness-house { opacity: 1; filter: saturate(1.25); transform: translate(-50%, -50%) scale(1); }
.window-glass.witness-found .witness-window { box-shadow: inset 0 0 13px #ffe1a8, 0 0 24px 7px rgba(244,170,86,.32); }
.window-glass.witness-found .witness-window b { transform: translateX(-1px) rotate(-5deg); }
.snow-bank { position: absolute; left: -10%; right: -10%; bottom: -8%; height: 26%; border-radius: 50% 45% 0 0; background: linear-gradient(180deg, #8aa4ad 0, #4f6877 11%, #223442 45%, #172633); transform: rotate(2deg); opacity: .56; }

#frost-canvas { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; }
.glass-sheen { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(112deg, rgba(255,255,255,.08), transparent 20% 52%, rgba(155, 226, 235, .05) 53%, transparent 55%); box-shadow: inset 0 0 35px rgba(204, 247, 249, .14); }
.pane-caption { position: absolute; z-index: 6; top: 1rem; right: 1rem; display: flex; gap: .6rem; color: rgba(231, 253, 255, .72); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.pane-caption span + span::before { content: '·'; margin-right: .6rem; }

.witness-note {
  position: absolute;
  z-index: 7;
  left: 58%;
  top: 21%;
  width: 10.5rem;
  padding-top: .45rem;
  border-top: 1px solid rgba(255,212,147,.52);
  color: rgba(255,225,179,.9);
  font-family: var(--serif);
  font-size: .78rem;
  font-style: italic;
  line-height: 1.15;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity .65s, transform .9s cubic-bezier(.18,.72,.2,1);
}
.witness-note span { display: block; margin-bottom: .25rem; color: var(--amber-pale); font-family: var(--sans); font-size: .48rem; font-style: normal; letter-spacing: .18em; }
.window-glass.witness-found .witness-note { opacity: 1; transform: translate(-50%, 0); }

.breath-hint {
  position: absolute;
  z-index: 7;
  left: 50%; top: 50%;
  display: grid;
  place-items: center;
  width: 112px; height: 112px;
  border: 1px solid rgba(232, 253, 255, .35);
  border-radius: 50%;
  color: rgba(237, 253, 255, .85);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.window-glass:hover .breath-hint { opacity: .7; }
.window-glass.is-breathing .breath-hint { opacity: 0; }
.window-glass.is-reclaiming .breath-hint { opacity: 0; }

.interaction-status {
  position: absolute;
  z-index: 8;
  left: 1rem;
  bottom: .9rem;
  display: grid;
  min-width: 12.5rem;
  padding: .65rem .8rem .55rem;
  border-left: 2px solid var(--amber);
  color: #cce5e8;
  background: linear-gradient(90deg, rgba(4, 12, 21, .74), rgba(4, 12, 21, .08));
  pointer-events: none;
  text-transform: uppercase;
}
.interaction-status span { font-size: .56rem; letter-spacing: .17em; }
.interaction-status b { margin-top: .15rem; color: #83a4ac; font-size: .48rem; font-weight: 400; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.window-glass.is-breathing .interaction-status { border-left-color: var(--frost); }
.window-glass.is-breathing .interaction-status span { color: var(--amber-pale); }

.night-survey {
  position: absolute;
  z-index: 8;
  right: 1rem;
  bottom: .95rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  color: #91adb4;
  font-size: .5rem;
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
  pointer-events: none;
}
.night-survey i { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px rgba(244,170,86,.65); animation: witness-pulse 2.4s ease-in-out infinite; }
.window-glass.witness-discovered .night-survey { color: #d6eff1; }
.window-glass.witness-discovered .night-survey i { background: var(--ice); box-shadow: 0 0 10px var(--ice); }
@keyframes witness-pulse { 50% { opacity: .35; transform: scale(.65); } }

.sill {
  position: absolute;
  left: -2.5%; right: -1%; bottom: 0;
  height: 76px;
  border-top: 4px solid #886047;
  background:
    linear-gradient(88deg, transparent 8%, rgba(255,255,255,.08) 8.2%, transparent 8.8% 44%, rgba(0,0,0,.2) 44.3%, transparent 45%),
    linear-gradient(180deg, #67432e, #41291f 48%, #231719);
  box-shadow: 0 12px 30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.14);
  transform: perspective(300px) rotateX(2deg);
}
.sill-label { position: absolute; right: 4%; bottom: 13px; padding: .5rem .75rem; color: #9f8d7e; border: 1px solid rgba(241, 219, 190, .12); background: rgba(20, 13, 13, .46); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; }
.sill-label span { margin-right: .8rem; color: #d7bca2; }

.climate-console {
  position: absolute;
  z-index: 10;
  left: clamp(1.5rem, 6vw, 7rem);
  bottom: clamp(1.5rem, 4vh, 3.2rem);
  width: min(440px, 34vw);
  padding: 1.15rem 1.25rem 1rem;
  border: 1px solid rgba(185, 231, 236, .2);
  background: rgba(6, 15, 27, .75);
  box-shadow: 0 20px 50px rgba(0,0,0,.25), inset 0 0 30px rgba(103, 182, 190, .04);
  backdrop-filter: blur(14px);
}
.console-heading { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding-bottom: .7rem; border-bottom: 1px solid rgba(199, 239, 243, .13); }
.console-heading span { color: #d7eff1; font-family: var(--serif); font-size: 1.05rem; }
.console-heading strong { color: var(--frost); font-family: var(--serif); font-size: 1.5rem; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.console-heading small { grid-column: 1 / -1; color: #78969f; font-size: .55rem; text-transform: uppercase; letter-spacing: .14em; }
.climate-console label { display: flex; justify-content: space-between; margin: .8rem 0 .25rem; color: #9eb8be; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.climate-console output { color: var(--amber-pale); font-variant-numeric: tabular-nums; }
input[type='range'] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--ice); cursor: pointer; }
.climate-console input[type='range'] {
  background: linear-gradient(90deg, rgba(131, 230, 238, .55), rgba(227, 251, 251, .28) 48%, rgba(244, 170, 86, .42));
  background-size: 100% 2px;
  background-position: center;
  background-repeat: no-repeat;
}
.range-labels { display: flex; justify-content: space-between; color: #5f7c84; font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; }
.console-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .75rem; }
.console-actions button { min-height: 44px; color: #c5dde1; border: 1px solid rgba(183, 228, 232, .2); background: rgba(181, 232, 236, .035); font-size: .65rem; letter-spacing: .06em; cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s; }
.console-actions button:hover, .console-actions button:focus-visible { color: var(--frost-bright); border-color: rgba(220, 252, 255, .48); background: rgba(181, 232, 236, .1); }
.console-actions button:active { transform: translateY(1px); }
.console-actions button span { margin-right: .4rem; font-size: 1rem; }
.console-actions .night-watch { grid-column: 1 / -1; color: var(--amber-pale); border-color: rgba(244,170,86,.25); background: linear-gradient(90deg, rgba(244,170,86,.06), rgba(148,231,237,.035)); }
.console-actions .night-watch:hover, .console-actions .night-watch:focus-visible { border-color: rgba(255,212,147,.58); background: linear-gradient(90deg, rgba(244,170,86,.13), rgba(148,231,237,.08)); }
.console-actions .night-watch.is-found { color: var(--ice); border-color: rgba(148,231,237,.4); }

.hero-coordinate { position: absolute; z-index: 8; right: 1.2rem; bottom: 50%; margin: 0; color: rgba(167, 199, 205, .42); font-size: .55rem; letter-spacing: .17em; text-transform: uppercase; transform: rotate(90deg) translateX(50%); transform-origin: right bottom; }

.reveal { opacity: 1; transform: none; }
.reveal-1 { animation-delay: .08s; }
.reveal-2 { animation-delay: .2s; }
.reveal-3 { animation-delay: .38s; }
.reveal-4 { animation-delay: .58s; }
.reveal-5 { animation-delay: .78s; }

.section-shell { width: min(1240px, calc(100% - 3rem)); margin-inline: auto; }
.observation-section { position: relative; display: grid; grid-template-columns: 1.05fr .85fr; gap: 8vw; padding-top: clamp(7rem, 12vw, 12rem); padding-bottom: clamp(7rem, 10vw, 10rem); }
.section-index { position: absolute; top: 7rem; left: -3vw; color: rgba(173, 226, 231, .04); font-family: var(--serif); font-size: 20rem; line-height: 1; }
.observation-heading, .observation-copy { position: relative; z-index: 1; }
h2 { margin: 0; color: #e4f4f4; font-family: var(--serif); font-size: clamp(3.5rem, 6vw, 6rem); font-weight: 300; line-height: .92; letter-spacing: -.045em; }
h2 em { color: var(--ice); font-weight: 300; }
.observation-copy { padding-top: 4rem; }
.observation-copy p { max-width: 36rem; color: #9fb5bb; }
.observation-copy .lead { color: #d3e3e5; font-family: var(--serif); font-size: 1.6rem; line-height: 1.35; }
.observation-copy .lead::first-letter { float: left; margin: -.12em .08em -.12em 0; color: var(--amber-pale); font-size: 4.2rem; line-height: 1; }
.phase-note {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(26rem, 90%);
  margin: 2.4rem 0 0;
  color: #76939a;
  font-size: .61rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.phase-note::before { content: ''; width: 3.5rem; height: 1px; background: linear-gradient(90deg, var(--amber), transparent); }
.phase-note span { color: var(--amber-pale); }
blockquote { margin: 3rem 0 0; padding: 1.2rem 0 1.2rem 2rem; border-left: 1px solid var(--amber); color: #dbecee; font-family: var(--serif); font-size: 1.25rem; font-style: italic; }
blockquote cite { display: block; margin-top: .65rem; color: #78939b; font-family: var(--sans); font-size: .6rem; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.conditions-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); margin: 5rem 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.conditions-strip div { padding: 1.25rem 1rem; border-right: 1px solid var(--line); }
.conditions-strip div:last-child { border-right: 0; }
.conditions-strip dt { color: #6f8e96; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; }
.conditions-strip dd { margin: .25rem 0 0; color: var(--frost); font-family: var(--serif); font-size: 1.5rem; }
.conditions-strip dd, .ledger-entries time, .reclaim-ledger time, .specimen-meta p { font-variant-numeric: tabular-nums lining-nums; }

.preserved-section { padding: clamp(6rem, 9vw, 9.5rem) 0 clamp(6rem, 7vw, 8rem); overflow: hidden; background: radial-gradient(ellipse at 70% 36%, rgba(92, 174, 187, .08), transparent 32%), linear-gradient(180deg, #0b1927, #08121d); border-top: 1px solid rgba(192, 234, 238, .1); border-bottom: 1px solid rgba(192, 234, 238, .1); }
.preserved-intro { display: grid; grid-template-columns: 1fr 25rem; gap: 8vw; align-items: end; }
.preserved-intro p:last-child { margin: 0 0 .6rem; color: #91aab1; }
.specimen-rail { display: grid; grid-template-columns: 1.05fr .82fr 1.1fr .82fr; align-items: start; gap: clamp(1rem, 2.5vw, 2.5rem); width: min(1520px, calc(100% - 3rem)); margin: 7rem auto 0; }
.specimen-rail:focus-visible { outline-offset: .8rem; }
.specimen:nth-child(even) { margin-top: 5rem; }
.specimen { transition: transform .6s cubic-bezier(.18,.72,.2,1); }
.specimen:hover { transform: translateY(-10px); }
.specimen-window { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border: 1px solid rgba(201, 243, 247, .3); background: #091421; box-shadow: 0 2rem 4rem rgba(0, 0, 0, .34); }
.specimen-window::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 42%, rgba(215, 251, 253, .08) 43%, transparent 45%), radial-gradient(circle at 20% 15%, rgba(255, 188, 113, .08), transparent 14%);
  mix-blend-mode: screen;
}
.specimen-window::after {
  content: '';
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: -22%;
  height: 18%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(187, 246, 250, .18), transparent);
  transform: translateY(0);
}
.preserved-section.in-view .specimen-window::after { animation: archive-scan 2.8s cubic-bezier(.18,.72,.2,1) both; }
.preserved-section.in-view .specimen:nth-child(2) .specimen-window::after { animation-delay: .18s; }
.preserved-section.in-view .specimen:nth-child(3) .specimen-window::after { animation-delay: .36s; }
.preserved-section.in-view .specimen:nth-child(4) .specimen-window::after { animation-delay: .54s; }
@keyframes archive-scan { to { transform: translateY(690%); } }
.specimen-low .specimen-window { aspect-ratio: 4 / 5; }
.specimen-wide .specimen-window { aspect-ratio: 4 / 3.7; }
.specimen-canvas { width: 100%; height: 100%; }
.specimen-no { position: absolute; top: .8rem; right: .8rem; color: rgba(222, 250, 252, .63); font-family: var(--serif); font-size: .8rem; letter-spacing: .09em; }
.specimen-meta { position: relative; padding: 1.3rem 0 0 1.4rem; border-left: 1px solid rgba(241, 174, 99, .45); }
.specimen-meta h3 { margin: 0; color: #dfedef; font-family: var(--serif); font-size: 1.6rem; font-weight: 400; line-height: 1; }
.specimen-meta p { margin: .55rem 0 .2rem; color: #8aa3aa; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.specimen-meta span { color: #5f7e87; font-size: .55rem; letter-spacing: .13em; text-transform: uppercase; }
.drawer-instruction { display: none; }

.breath-study { position: relative; display: grid; grid-template-columns: .95fr 1.1fr .6fr; align-items: center; gap: 6vw; min-height: 780px; padding: 7rem max(1.5rem, calc((100vw - 1240px) / 2)); overflow: hidden; background: linear-gradient(104deg, rgba(13, 26, 41, .18) 0 43%, rgba(5, 13, 22, .58) 43.2%); }
.breath-study::before { content: ''; position: absolute; width: 50rem; height: 50rem; left: -12rem; top: 4rem; border-radius: 50%; background: radial-gradient(circle, rgba(237, 180, 100, .07), transparent 63%); }
.breath-study::after { content: ''; position: absolute; inset: 0 auto 0 43%; width: 1px; background: linear-gradient(transparent, rgba(244,170,86,.3), rgba(159,232,239,.18), transparent); }
.breath-orbit { position: relative; justify-self: center; width: clamp(280px, 30vw, 430px); aspect-ratio: 1; border: 1px solid rgba(195, 233, 237, .14); border-radius: 50%; box-shadow: 0 0 0 4rem rgba(188, 232, 235, .015), 0 0 0 8rem rgba(188, 232, 235, .01); }
.orbit-clear { position: absolute; inset: 15%; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(210, 243, 245, .3); border-radius: 50%; background: radial-gradient(circle at 65% 35%, #f2b369, #6c573e 12%, #142332 44%, #08121e 71%); box-shadow: inset 0 0 3rem rgba(222, 247, 249, .25), 0 0 3rem rgba(216, 246, 248, .08); }
.orbit-clear::before { content: ''; width: 4px; height: 60%; background: linear-gradient(#d18f46 0 18%, #252c31 19%); box-shadow: 0 -65px 30px 16px rgba(242, 165, 72, .2); }
.orbit-clear span { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at 20% 80%, transparent 0 16px, rgba(222, 251, 253, .1) 17px, transparent 18px); }
.breath-orbit > i { position: absolute; left: 50%; top: 50%; width: 45%; height: 1px; background: linear-gradient(90deg, rgba(225,252,254,.8), transparent); transform-origin: 0 50%; box-shadow: 20px 0 6px rgba(164, 232, 239, .35); }
.breath-orbit > i::after { content: ''; position: absolute; left: 30%; width: 38%; height: 1px; background: rgba(210, 251, 254, .6); transform: rotate(35deg); transform-origin: left; }
.breath-study.in-view .breath-orbit > i { animation: needle-breathe 3.6s ease-in-out infinite alternate; }
.breath-study.in-view .breath-orbit > i:nth-of-type(2n) { animation-delay: -.9s; }
@keyframes needle-breathe { to { width: 52%; filter: brightness(1.45); } }
.n1 { transform: rotate(13deg); } .n2 { transform: rotate(75deg); } .n3 { transform: rotate(142deg); } .n4 { transform: rotate(208deg); } .n5 { transform: rotate(267deg); } .n6 { transform: rotate(325deg); }
.breath-orbit b { position: absolute; right: 5%; bottom: 12%; color: var(--amber-pale); font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.breath-copy { position: relative; z-index: 1; }
.breath-copy p:not(.eyebrow) { max-width: 34rem; margin: 2rem 0; color: #99b0b6; }
.text-link, .closing-link { display: inline-flex; align-items: center; min-height: 44px; padding-bottom: .25rem; border-bottom: 1px solid rgba(210, 249, 252, .35); color: #dff6f7; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; transition: color .3s, border-color .3s, letter-spacing .45s cubic-bezier(.18,.72,.2,1); }
.text-link:hover, .text-link:focus-visible, .closing-link:hover, .closing-link:focus-visible { color: var(--amber-pale); border-color: var(--amber); letter-spacing: .16em; }
.text-link span { margin-left: 1rem; color: var(--amber); }
.reclaim-ledger { align-self: stretch; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 0; list-style: none; border-left: 1px solid rgba(199, 237, 240, .17); counter-reset: ledger; }
.reclaim-ledger li { position: relative; padding: 1.5rem 0 1.5rem 1.5rem; border-bottom: 1px solid rgba(199, 237, 240, .12); }
.reclaim-ledger li::before { content: ''; position: absolute; left: -3px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #88dbe3; box-shadow: 0 0 8px #88dbe3; }
.reclaim-ledger time { display: block; color: var(--amber-pale); font-family: var(--serif); font-size: 1.25rem; }
.reclaim-ledger span { color: #77929a; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }

.night-ledger { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; padding-top: 10rem; padding-bottom: 12rem; }
.ledger-entries { border-top: 1px solid var(--line); }
.ledger-entries article { display: grid; grid-template-columns: 5rem 1fr 1.3fr; align-items: baseline; gap: 1rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.ledger-entries time { color: var(--amber-pale); font-family: var(--serif); font-size: 1.25rem; }
.ledger-entries h3 { margin: 0; color: #d8e9eb; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.ledger-entries p { margin: 0; color: #7e989f; font-size: .78rem; }

.closing-section { position: relative; display: grid; justify-items: center; align-content: center; min-height: 760px; padding: 8rem 1.5rem; overflow: hidden; text-align: center; background: radial-gradient(circle at 50% 50%, rgba(59, 113, 131, .18), transparent 30%), #08121e; border-top: 1px solid rgba(205, 244, 247, .1); }
.closing-section::before { content: '07:26'; position: absolute; left: 50%; top: 49%; color: transparent; -webkit-text-stroke: 1px rgba(207,248,251,.035); font-family: var(--serif); font-size: clamp(14rem, 31vw, 32rem); font-weight: 300; line-height: .7; letter-spacing: -.09em; transform: translate(-50%, -50%); }
.closing-frost { position: absolute; inset: -25%; opacity: .25; background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 8deg, rgba(175, 236, 241, .08) 8.5deg 9deg, transparent 9.5deg 19deg); mask-image: radial-gradient(circle, transparent 0 16%, black 17% 60%, transparent 74%); animation: slow-turn 60s linear infinite; }
@keyframes slow-turn { to { transform: rotate(360deg); } }
.closing-section > *:not(.closing-frost) { position: relative; z-index: 1; }
.closing-section h2 { font-size: clamp(4rem, 8vw, 8rem); }
.closing-section h2 em, .breath-copy h2 em { color: transparent; background: linear-gradient(92deg, var(--amber-pale), var(--ice) 58%, #7fd9e2); -webkit-background-clip: text; background-clip: text; }
.closing-section > p:not(.eyebrow) { max-width: 35rem; margin: 2.3rem auto; color: #8ca5ac; }
.closing-link { gap: 1rem; margin-top: 1rem; }
.closing-link span { color: var(--amber); }

footer { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 2.4rem clamp(1.5rem, 5vw, 5rem); border-top: 1px solid rgba(204, 242, 245, .14); color: #91abb2; background: #060d16; font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; }
footer p { margin: 0; }
footer nav { display: flex; gap: 2rem; }
footer a { display: grid; place-items: center; min-height: 44px; background: linear-gradient(90deg, var(--amber), var(--ice)) 0 78% / 0 1px no-repeat; transition: color .3s, background-size .4s cubic-bezier(.18,.72,.2,1); }
footer a:hover, footer a:focus-visible { color: var(--frost); background-size: 100% 1px; }

.observed { opacity: 1; transform: none; }
.observed.in-view h2 { animation: heading-thaw .9s cubic-bezier(.2,.75,.2,1) both; }
@keyframes heading-thaw {
  from { transform: translateY(10px); text-shadow: 0 0 18px rgba(178, 240, 246, .24); }
  to { transform: none; text-shadow: 0 0 0 rgba(178, 240, 246, 0); }
}

/* Guide */
.guide-page { background: #08121e; }
.guide-header { position: relative; }
.guide-main { padding-top: 0; }
.guide-hero { position: relative; min-height: 610px; display: grid; align-content: center; padding: 6.5rem max(1.5rem, calc((100vw - 1180px) / 2)) 5rem; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 78% 42%, rgba(136, 223, 231, .16), transparent 24%), radial-gradient(circle at 60% 120%, rgba(244,170,86,.08), transparent 23rem), linear-gradient(115deg, #07101c, #12243a); }
.guide-hero::after { content: ''; position: absolute; right: -7rem; top: -14rem; width: 42rem; height: 42rem; border-radius: 50%; border: 1px solid rgba(209, 249, 252, .12); box-shadow: 0 0 0 4rem rgba(209,249,252,.02), 0 0 0 9rem rgba(209,249,252,.015); }
.guide-hero::before { content: ''; position: absolute; z-index: 1; right: 1rem; top: 7rem; width: min(42vw, 36rem); height: min(42vw, 36rem); opacity: .34; border-radius: 50%; background: repeating-conic-gradient(from -12deg at 50% 76%, transparent 0 7deg, rgba(196, 244, 248, .32) 7.4deg 7.8deg, transparent 8.2deg 15deg); mask-image: radial-gradient(circle at 50% 76%, black 0 5%, transparent 5.5% 14%, black 15% 48%, transparent 70%); }
.guide-hero > * { position: relative; z-index: 1; }
.guide-hero h1 { max-width: 900px; font-size: clamp(4.5rem, 9vw, 8.6rem); line-height: .76; }
.guide-hero > p:not(.eyebrow) { max-width: 35rem; margin: 2.5rem 0 0; color: #a7bec4; font-family: var(--serif); font-size: 1.3rem; font-style: italic; }
.guide-hero-ledger { position: absolute; z-index: 3; right: max(1.5rem, calc((100vw - 1180px) / 2)); bottom: 4.8rem; display: grid; width: min(31rem, 38vw); grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid rgba(207,246,249,.2); }
.guide-hero-ledger div { padding: .85rem .8rem 0; border-left: 1px solid rgba(207,246,249,.14); }
.guide-hero-ledger dt { color: #6f9199; font-size: .52rem; letter-spacing: .15em; text-transform: uppercase; }
.guide-hero-ledger dd { margin: .2rem 0 0; color: #c8dfe2; font-family: var(--serif); font-size: 1.05rem; }
.guide-article { display: grid; grid-template-columns: 14rem minmax(0, 800px); gap: 5vw; width: min(1180px, calc(100% - 3rem)); margin: 0 auto; padding: 7rem 0 7rem; }
.guide-aside { align-self: start; position: sticky; top: 2rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.guide-aside span { display: block; margin-bottom: 1rem; color: #64838c; font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; }
.guide-aside a { display: block; min-height: 44px; color: #a8c2c8; font-family: var(--serif); font-size: 1.2rem; transition: color .2s, transform .2s; }
.guide-aside a:hover, .guide-aside a:focus-visible { color: var(--frost); transform: translateX(.35rem); }
.guide-content section { scroll-margin-top: 2rem; margin-bottom: 5.5rem; }
.guide-content section:last-child { margin-bottom: 0; }
.guide-content h2 { margin-bottom: 1.8rem; font-size: clamp(2.8rem, 5vw, 4.5rem); }
.guide-content h3 { margin: 2.2rem 0 .7rem; color: #dceff0; font-family: var(--serif); font-size: 1.6rem; font-weight: 400; }
.guide-content p { color: #a8bcc2; }
.guide-content code { padding: .12em .35em; color: #d9fbfd; background: rgba(159, 227, 233, .08); font-family: var(--sans); font-size: .84em; }
.algorithm-plate { margin: 2.5rem 0 3.2rem; border: 1px solid rgba(199,239,243,.22); background: radial-gradient(circle at 70% 50%, rgba(117,215,224,.09), transparent 38%), #091522; box-shadow: 0 2rem 5rem rgba(0,0,0,.22); }
.algorithm-plate svg { display: block; width: 100%; height: auto; }
.algorithm-plate .algo-grid { fill: none; stroke: rgba(196,239,242,.07); stroke-width: 1; }
.algorithm-plate .walker-path { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 7; animation: walker-drift 1.8s linear infinite; }
.algorithm-plate .crystal-path { fill: none; stroke: rgba(211,251,253,.78); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(122,230,239,.4)); }
.algorithm-plate .bond-point { fill: var(--frost-bright); stroke: var(--amber); stroke-width: 3; filter: drop-shadow(0 0 8px var(--ice)); }
.algorithm-plate text { fill: #78979f; font-family: var(--sans); font-size: 11px; letter-spacing: 2px; }
.algorithm-plate figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1.15rem; border-top: 1px solid rgba(199,239,243,.14); color: #7f9ba2; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.algorithm-plate figcaption b { color: #cbe4e7; font-weight: 400; }
@keyframes walker-drift { to { stroke-dashoffset: -32; } }
.token-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 2rem 0; background: var(--line); border: 1px solid var(--line); }
.token { padding: 1.4rem; background: #0a1522; }
.token i { position: relative; display: block; width: 100%; height: 48px; margin-bottom: 1rem; border: 1px solid rgba(255,255,255,.28); box-shadow: inset 0 0 20px rgba(255,255,255,.035); }
.token:first-child i::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(202, 241, 245, .16); background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 55%); }
.token b { display: block; color: #dceef0; font-family: var(--serif); font-size: 1.15rem; font-weight: 400; }
.token span { color: #728f97; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.type-specimen { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: .5rem 2rem; margin-top: 2rem; padding: 1.6rem 1.8rem; border-top: 1px solid var(--amber); border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(244,170,86,.04), transparent 55%); }
.type-specimen span { color: #718f97; font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; }
.type-specimen strong { color: var(--frost-bright); font-family: var(--serif); font-size: 3.2rem; font-weight: 300; line-height: .9; }
.type-specimen strong i { color: var(--ice); font-size: 1.7rem; font-weight: 300; }
.type-specimen b { color: #c3dadd; font-size: .65rem; font-weight: 400; letter-spacing: .1em; }
.reproduce-box { padding: 2rem; border: 1px solid rgba(193, 235, 239, .22); background: linear-gradient(135deg, rgba(124, 212, 221, .07), transparent); box-shadow: inset 3px 0 var(--amber); }
.reproduce-box p { margin: 0; color: #c2d6d9; }

@media (max-width: 1000px) {
  .hero { min-height: 980px; height: 100svh; }
  .hero-copy { top: 140px; width: 75vw; }
  h1 { font-size: clamp(5rem, 12vw, 8rem); }
  .window-wrap { top: 29%; width: 76vw; height: 61%; min-height: 570px; }
  .climate-console { left: 4vw; bottom: 2.5rem; width: 390px; }
  .observation-section { gap: 4vw; }
  .specimen-rail { grid-template-columns: repeat(2, 1fr); }
  .specimen:nth-child(even) { margin-top: 3rem; }
  .breath-study { grid-template-columns: .8fr 1.2fr; }
  .reclaim-ledger { grid-column: 1 / -1; flex-direction: row; border-left: 0; border-top: 1px solid var(--line); }
  .reclaim-ledger li { flex: 1; }
  .reclaim-ledger li::before { left: 1.5rem; top: -3px; }
  .night-ledger { grid-template-columns: 1fr; }
  .guide-hero-ledger { position: relative; right: auto; bottom: auto; width: min(100%, 31rem); margin: 2rem 0 0; }
}

@media (max-width: 700px) {
  .site-header { grid-template-columns: 1fr auto; grid-template-rows: 72px 44px; align-items: center; height: 116px; padding: 0 1rem; }
  .wordmark-mark { width: 28px; height: 28px; }
  .site-header nav { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; border-top: 1px solid rgba(215,248,251,.1); }
  .site-header nav a { min-height: 44px; font-size: .58rem; }
  .room-number { grid-column: 2; grid-row: 1; }
  .hero { height: auto; min-height: 1060px; }
  .hero::before { background-size: 25vw 25vw; }
  .hero-copy { top: 148px; left: 1.25rem; width: calc(100% - 2.5rem); }
  .eyebrow { font-size: .61rem; }
  h1 { font-size: clamp(4.2rem, 22vw, 6rem); line-height: .72; }
  h1 em { margin-left: 1.1rem; }
  .hero-deck { width: 82%; margin: 2rem 0 1rem; font-size: 1.15rem; }
  .breath-instruction { display: none; }
  .hero-field-note { display: none; }
  .window-wrap { top: 36%; right: -2.8rem; width: calc(100% + 1.6rem); height: 45%; min-height: 475px; padding: 16px 18px 0; }
  .window-casing { inset: 0 0 45px; border-width: 16px; }
  .window-glass { height: calc(100% - 45px); }
  .pane-caption { left: .7rem; right: auto; top: .7rem; gap: .35rem; font-size: .49rem; }
  .pane-caption span + span::before { margin-right: .35rem; }
  .witness-note { left: 58%; top: 20%; width: 8.4rem; font-size: .69rem; }
  .night-survey { right: 4.1rem; bottom: 3rem; font-size: .46rem; }
  .interaction-status { left: .75rem; bottom: .65rem; min-width: 10.5rem; padding: .5rem .65rem .45rem; }
  .sill { right: -2%; height: 61px; }
  .sill-label { right: 6rem; }
  .climate-console { left: 1rem; right: 1rem; bottom: 1rem; width: auto; padding: .75rem .85rem; }
  .console-heading { display: grid; grid-template-columns: 1fr auto; padding-bottom: .45rem; }
  .console-heading span { font-size: .9rem; }
  .console-heading strong { font-size: 1.1rem; }
  .console-heading small { display: none; }
  .climate-console label { margin-top: 0; }
  .console-actions { margin-top: .5rem; }
  .hero-coordinate { display: none; }
  .section-shell { width: min(100% - 2.5rem, 1240px); }
  .observation-section { grid-template-columns: 1fr; padding-top: 6rem; padding-bottom: 6rem; }
  h2 { font-size: clamp(3.1rem, 15vw, 4.4rem); }
  .observation-copy { padding-top: .5rem; }
  .observation-copy .lead { font-size: 1.35rem; }
  blockquote { margin-top: 2rem; padding-left: 1.2rem; }
  .conditions-strip { grid-template-columns: repeat(2, 1fr); margin-top: 3rem; }
  .conditions-strip div:nth-child(2) { border-right: 0; }
  .conditions-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .preserved-section { padding: 6rem 0 5.5rem; }
  .preserved-intro { grid-template-columns: 1fr; }
  .preserved-intro p:last-child { max-width: 30rem; }
  .drawer-instruction { display: flex; align-items: center; gap: .65rem; margin: 2.5rem 1.25rem -2rem; color: #8eaab1; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; }
  .drawer-instruction span { color: var(--amber); font-size: 1rem; }
  .specimen-rail { display: flex; gap: 1rem; width: 100%; margin: 4rem 0 0; padding: 0 1.25rem 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .specimen { flex: 0 0 min(77vw, 310px); margin-top: 0 !important; scroll-snap-align: center; }
  .specimen-window, .specimen-low .specimen-window, .specimen-wide .specimen-window { aspect-ratio: 3 / 3.6; }
  .breath-study { grid-template-columns: 1fr; min-height: auto; padding: 7rem 1.25rem; }
  .breath-study::after { display: none; }
  .breath-study { background: linear-gradient(180deg, rgba(13,26,41,.18), rgba(5,13,22,.5)); }
  .breath-orbit { width: min(75vw, 330px); margin-bottom: 2rem; }
  .reclaim-ledger { display: grid; grid-template-columns: 1fr 1fr; }
  .reclaim-ledger li { padding: 1rem; }
  .reclaim-ledger li::before { left: .95rem; }
  .night-ledger { padding-top: 7rem; padding-bottom: 7rem; }
  .ledger-entries article { grid-template-columns: 4rem 1fr; }
  .ledger-entries p { grid-column: 2; }
  .closing-section { min-height: 650px; }
  footer { flex-direction: column; align-items: flex-start; padding: 2rem 1.25rem; }
  footer nav { width: 100%; flex-direction: column; gap: 0; align-items: flex-start; }
  footer a { place-items: center start; width: 100%; border-top: 1px solid rgba(203,241,244,.1); }
  .guide-main { padding-top: 0; }
  .guide-hero { min-height: 520px; align-content: center; padding-top: 4.5rem; padding-bottom: 3.5rem; }
  .guide-hero::before { right: -7rem; top: 0; width: 23rem; height: 23rem; opacity: .2; }
  .guide-hero-ledger { grid-template-columns: repeat(3, 1fr); width: 100%; margin-top: 1.8rem; }
  .guide-hero-ledger div { padding-inline: .55rem; }
  .guide-hero-ledger dd { font-size: .88rem; }
  .guide-article { grid-template-columns: 1fr; padding: 5rem 0 7rem; }
  .guide-aside { position: static; display: none; }
  .token-grid { grid-template-columns: 1fr; }
  .algorithm-plate { margin-inline: 0; }
  .algorithm-plate figcaption { display: grid; }
  .type-specimen { grid-template-columns: 1fr; gap: .65rem; }
  .type-specimen span:nth-of-type(2) { margin-top: 1rem; }
}

@media (hover: none), (pointer: coarse) {
  .window-glass:not(.is-breathing):not(.is-reclaiming) .breath-hint { opacity: .78; width: 96px; height: 96px; background: rgba(7,17,29,.46); backdrop-filter: blur(5px); }
  .specimen:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .grain { animation: none; }
  .observed { opacity: 1; transform: none; }
}