*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --black: #080808;
  --gold: #A8874A;
  --white: #FFFFFF;
}

html, body {
  min-height: 100%;
  background-color: var(--black);
  color: var(--white);
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  animation: fadeIn 1.2s ease forwards;
  opacity: 0;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* Even the act of selecting text belongs to the House. */
::selection {
  background-color: rgba(168, 135, 74, 0.85);
  color: #080808;
}

/* Keyboard Guests are Guests. The focus ring is the House gold. */
a:focus-visible {
  outline: 1px solid rgba(168, 135, 74, 0.65);
  outline-offset: 4px;
}

/* ── NAVIGATION ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 48px;
  /* Same plane as the entrance — scrim above, gold hairline below,
     warming when attention arrives. One House, one nav. */
  background: linear-gradient(to bottom, rgba(8, 8, 8, 0.92), rgba(8, 8, 8, 0));
}

nav::after {
  content: '';
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(168, 135, 74, 0.32), transparent);
  opacity: 0.4;
  transition: opacity 0.6s ease;
}

nav:hover::after {
  opacity: 0.9;
}

@keyframes navIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes navInStar {
  from { opacity: 0; }
  to   { opacity: 0.85; }
}

/* Left cluster — star (links home) + the Guest's future entrance. */
.nav-left {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-star {
  font-size: 14px;
  color: #A8874A;
  user-select: none;
  line-height: 1;
  text-decoration: none;
  display: inline-block;
  opacity: 0;
  animation: navInStar 0.8s ease forwards 0.15s,
             starGlint 11s ease-in-out infinite 6s;
  transition: filter 0.3s ease;
}

/* The star is the way back. On approach, it answers with light —
   filter, not transform, so the glint keeps its own rhythm. */
.nav-star:hover {
  filter: drop-shadow(0 0 6px rgba(168, 135, 74, 0.7));
}

.nav-heritage {
  opacity: 0;
  animation: navIn 0.8s ease forwards 0.3s;
}

.nav-links li {
  opacity: 0;
  animation: navIn 0.8s ease forwards;
}

.nav-links li:nth-child(1) { animation-delay: 0.45s; }
.nav-links li:nth-child(2) { animation-delay: 0.55s; }
.nav-links li:nth-child(3) { animation-delay: 0.65s; }
.nav-links li:nth-child(4) { animation-delay: 0.75s; }

/* Type the word and the House acknowledges you know it.
   Four seconds. Then the room is locked again. */
.nav-isnad {
  transition: color 0.6s ease, text-shadow 0.6s ease;
}

.nav-isnad .nav-label-heard { display: none; }

.nav-isnad.heard {
  color: rgba(168, 135, 74, 0.92);
  text-shadow: 0 0 10px rgba(168, 135, 74, 0.35);
}

.nav-isnad.heard .nav-label-default,
.nav-isnad.heard .nav-label-hover { display: none !important; }
.nav-isnad.heard .nav-label-heard { display: inline; }

/* Same star, same sky. Offset from the home page so the two never
   glint in sync — the House is one place, not one loop. */
@keyframes starGlint {
  0%, 92%, 100% {
    opacity: 0.85;
    text-shadow: none;
    transform: scale(1);
  }
  95% {
    opacity: 1;
    text-shadow: 0 0 8px rgba(168, 135, 74, 0.85), 0 0 18px rgba(168, 135, 74, 0.35);
    transform: scale(1.12);
  }
  98% {
    opacity: 0.85;
    text-shadow: none;
    transform: scale(1);
  }
}

/* Begin Heritage — gold-outlined, hover says "Not Yet". */
.nav-heritage {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  cursor: default;
  user-select: none;
  position: relative;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 8px 16px;
  text-indent: 0.22em;
  border: 1px solid rgba(168, 135, 74, 0.45);
  transition: border-color 0.25s ease, color 0.25s ease;
}

.nav-heritage:hover {
  color: rgba(255, 255, 255, 0.80);
  border-color: rgba(168, 135, 74, 0.78);
}

.nav-heritage .nav-label-default { display: inline; }
.nav-heritage .nav-label-hover { display: none; }
.nav-heritage:hover .nav-label-default { display: none; }
.nav-heritage:hover .nav-label-hover { display: inline; }

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}

.nav-links li {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.38);
  text-transform: uppercase;
  cursor: default;
  user-select: none;
  position: relative;
}

.nav-links li.active {
  color: rgba(255, 255, 255, 0.75);
}

.nav-links li a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.nav-links li:not(.active):hover {
  color: rgba(255, 255, 255, 0.68);
}

.nav-links li .nav-label-default { display: inline; }
.nav-links li .nav-label-hover { display: none; }
.nav-links li:not(.active):hover .nav-label-default { display: none; }
.nav-links li:not(.active):hover .nav-label-hover { display: inline; }

/* ── MAIN CONTENT ── */
main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 48px 100px;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

/* Opening line */
.about-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
  text-indent: 0.4em;
  margin-bottom: 64px;
}

/* Primary statement */
.about-primary {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: 32px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 64px;
  letter-spacing: 0.02em;
}

/* Gold rule divider */
.about-rule {
  width: 1px;
  height: 48px;
  background-color: rgba(168, 135, 74, 0.4);
  margin: 0 auto 64px;
}

.about-rule-spaced {
  margin-top: 16px;
}

/* Body paragraphs */
.about-body {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 48px;
  letter-spacing: 0.01em;
}

.about-body + .about-body {
  margin-top: 0;
}

/* Pause — empty space between thoughts */
.about-pause {
  height: 48px;
}

/* Closing statement */
.about-closing {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 20px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 16px;
  letter-spacing: 0.02em;
}

/* Sign-off */
.about-signoff {
  margin-top: 72px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.45em;
  color: rgba(168, 135, 74, 0.7);
  text-transform: uppercase;
  text-indent: 0.45em;
}

/* ── FOOTER ── */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 0 28px 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.22);
  text-transform: uppercase;
  text-indent: 0.28em;
  user-select: none;
  background: linear-gradient(to top, rgba(8,8,8,1) 60%, rgba(8,8,8,0));
  padding-top: 32px;
}

/* Footer star keeps its own time — third clock in the House. */
.footer-star {
  display: inline-block;
  animation: starGlint 11s ease-in-out infinite;
  animation-delay: 3s;
}

/* ── THE RECORD READS ITSELF OUT ──
   The page does not arrive as a block. Each line surfaces in order —
   eyebrow, statement, rule, paragraphs, closing, name. Sequence is the
   point. Nothing meaningful appears before its moment. */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: surface 1.4s ease forwards;
}

@keyframes surface {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main > .reveal:nth-child(1)  { animation-delay: 0.3s; }
main > .reveal:nth-child(2)  { animation-delay: 0.8s; }
main > .reveal:nth-child(3)  { animation-delay: 1.5s; }
main > .reveal:nth-child(4)  { animation-delay: 1.9s; }
main > .reveal:nth-child(6)  { animation-delay: 2.4s; }
main > .reveal:nth-child(8)  { animation-delay: 2.9s; }
main > .reveal:nth-child(10) { animation-delay: 3.4s; }
main > .reveal:nth-child(11) { animation-delay: 4.0s; }
main > .reveal:nth-child(12) { animation-delay: 4.6s; }
main > .reveal:nth-child(13) { animation-delay: 5.4s; }

/* The gold rules do not fade in — they are drawn, top to bottom,
   the way a line is ruled onto a page. This is a record, after all. */
.about-rule.reveal {
  animation-name: drawRule;
  transform: scaleY(0);
  transform-origin: top;
}

@keyframes drawRule {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

/* The name arrives last, letters settling closer as it lands —
   the same gesture as the wordmark at the entrance. One House. */
.about-signoff.reveal {
  animation-name: settleSignoff;
  animation-duration: 1.8s;
}

@keyframes settleSignoff {
  from { opacity: 0; transform: translateY(12px); letter-spacing: 0.65em; }
  to   { opacity: 1; transform: translateY(0); letter-spacing: 0.45em; }
}

/* Once a line has surfaced, it settles — pinned in place, and from
   then on it can respond to attention instead of ceremony. */
.reveal.settled {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Attention brings a line forward. The paragraph under the Guest's
   eye lifts from 55% to 72% — the rest of the record stays quiet. */
.about-body {
  transition: color 0.6s ease;
}

.about-body:hover {
  color: rgba(255, 255, 255, 0.72);
}

/* One word in the opening statement knows what it is. Rest on the
   statement and "record" warms to gold. Nothing is labelled. */
.word-record,
.word-found {
  transition: color 1.2s ease;
}

.about-primary:hover .word-record {
  color: var(--gold);
}

.about-closing:hover .word-found {
  color: rgba(168, 135, 74, 0.9);
}

/* The settled rules breathe — a very slow brightening and dimming,
   fourteen seconds to the cycle. Drawn lines, still alive. */
.about-rule.settled {
  animation: ruleBreath 14s ease-in-out infinite;
}

@keyframes ruleBreath {
  0%, 100% { background-color: rgba(168, 135, 74, 0.4); }
  50%      { background-color: rgba(168, 135, 74, 0.62); }
}

/* The name responds to the hand — spacing eases open, gold rises. */
.about-signoff.settled {
  transition: letter-spacing 0.8s ease, color 0.8s ease;
}

.about-signoff.settled:hover {
  letter-spacing: 0.52em;
  color: rgba(168, 135, 74, 0.95);
}

/* Stillness. Left alone long enough, the closing lines breathe
   like a candle in still air. Movement in the room stills them. */
body.idle .about-closing.settled {
  animation: candle 9s ease-in-out infinite;
}

@keyframes candle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.8; }
}

/* ── THE READING RULE ──
   A single gold hairline at the very top of the page that fills as
   the Guest moves through the record. The record keeps your place.
   It only exists when there is somewhere to scroll to. */
.reading-rule {
  position: fixed;
  top: 0;
  left: 0;
  height: 1px;
  width: 0;
  background-color: rgba(168, 135, 74, 0.55);
  z-index: 120;
  display: none;
}

/* Rooms do not jump-cut. Doors dim the light before they open. */
body.leaving {
  animation: fadeOut 0.35s ease forwards;
}

@keyframes fadeOut {
  to { opacity: 0; }
}

/* ── THE LANTERN ──
   Same light as the entrance. The Guest carries it from room to room. */
.lantern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 1.2s ease;
  background: radial-gradient(
    circle 340px at var(--lx, 50%) var(--ly, 50%),
    rgba(168, 135, 74, 0.055),
    rgba(168, 135, 74, 0.018) 45%,
    transparent 70%
  );
  mix-blend-mode: screen;
}

.lantern.lit {
  opacity: 1;
}

@media (pointer: coarse) {
  .lantern { display: none; }
}

/* ── MOBILE ── */
@media (max-width: 640px) {
  nav {
    padding: 22px 24px;
  }

  nav::after {
    left: 24px;
    right: 24px;
  }

  .nav-left {
    gap: 16px;
  }

  .nav-heritage {
    font-size: 8px;
    letter-spacing: 0.12em;
    min-width: 120px;
    padding: 6px 12px;
    text-indent: 0.12em;
  }

  .nav-links {
    display: flex;
    gap: 16px;
  }

  .nav-links li {
    font-size: 9px;
    letter-spacing: 0.18em;
  }

  main {
    padding: 100px 32px 100px;
  }

  .about-primary {
    font-size: 24px;
  }

  .about-body {
    font-size: 16px;
  }

  .about-closing {
    font-size: 17px;
  }
}

/* Reduced motion — everything present, everything still */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
    opacity: 1;
  }
  .reveal,
  .about-rule.reveal,
  .about-signoff.reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .nav-star,
  .footer-star {
    animation: none;
    opacity: 1;
  }
  .nav-heritage,
  .nav-links li {
    animation: none;
    opacity: 1;
  }
  .about-rule.settled {
    animation: none;
  }
  body.idle .about-closing.settled {
    animation: none;
  }
  .about-signoff.settled,
  .about-body,
  .word-record,
  .word-found {
    transition: none;
  }
  nav::after {
    transition: none;
  }
  .lantern {
    display: none;
  }
}