@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-500.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122,
    U+2212, U+2215;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-sans-400.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122,
    U+2212, U+2215;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/instrument-sans-600.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122,
    U+2212, U+2215;
}

:root {
  color-scheme: dark;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:
    "Instrument Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    sans-serif;
  --night-900: #0c1016;
  --night-800: #191d25;
  --tower-stone-900: #231d1f;
  --tower-stone-800: #342b2e;
  --tower-stone-700: #4b403f;
  --tower-stone-600: #665955;
  --tower-stone-500: #84756d;
  --tower-stone-400: #a59386;
  --parchment-300: #e2d8cb;
  --parchment-200: #f2e8da;
  --mist-500: #b8c1bd;
  --mist-400: #d6ded8;
  --line-pastel: #e6ece7;
  /* Muted stone used for the hero anchor ("design."). It keeps the focal word
     clear without turning accent color into a personality layer. */
  --accent-muted: #c8d0ca;
  /* One tier below the anchor. Ambient meta text (hero kicker, copyright,
     hover labels, scene tuner) uses this so it whispers rather than
     competing with the hero word. Warm off-white — reads as legible white
     against the blue-black scene without clashing with the warm scene. */
  --text-muted-accent: #c5c9c2;
  /* Prefix companion to the anchor. Used for "Calm by" so it reads as
     legible white against the twilight scene while still letting "design."
     be the clear focal word. One notch brighter than --text-muted-accent
     so it holds hero-level presence. */
  --calm-prefix: #ebe4d4;
  --text: #f7f1ea;
  --muted: #d0c4ba;
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-meta: #cbc0b3;
  --text-accent: var(--text-muted-accent);
  --text-meta-shadow: 0 2px 8px rgba(7, 10, 14, 0.42), 0 0 10px rgba(198, 208, 202, 0.08);
  --shadow-deep: 0 30px 84px rgba(0, 0, 0, 0.38);
  --shadow-panel: 0 18px 48px rgba(7, 10, 20, 0.24);
  --border-soft: rgba(241, 229, 212, 0.16);
  --border-strong: rgba(210, 218, 212, 0.34);
  --panel-surface: linear-gradient(180deg, rgba(85, 85, 82, 0.88) 0%, rgba(38, 40, 44, 0.82) 100%);
  --panel-sheen: linear-gradient(
    135deg,
    rgba(242, 244, 238, 0.12) 0%,
    rgba(214, 222, 216, 0.05) 42%,
    rgba(242, 244, 238, 0) 72%
  );
  --cursor-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='28' viewBox='0 0 9 28'%3E%3Cpath d='M4.5 2V26' stroke='%23e6ece7' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 4 14, auto;
  --max: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body,
a,
button {
  cursor: var(--cursor-line);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-feature-settings:
    "kern" 1,
    "liga" 1;
  color: var(--text-primary);
  background: linear-gradient(180deg, var(--night-900) 0%, var(--night-800) 34%, #1d1d21 100%);
}

body[data-panel-open="true"] {
  overflow: hidden;
}

[hidden] {
  display: none !important;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: transparent;
}

main {
  position: relative;
  z-index: 2;
}

main:focus {
  outline: 0;
}

.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 80;
  padding: 11px 15px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(14, 18, 34, 0.88);
  color: var(--text-primary);
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 180ms ease;
}

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

:focus-visible {
  outline: 3px solid rgba(214, 224, 218, 0.9);
  outline-offset: 4px;
}

.scene-shell {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 20%, rgba(186, 202, 212, 0.12) 0%, rgba(186, 202, 212, 0) 28%),
    radial-gradient(circle at 48% 26%, rgba(230, 224, 214, 0.15) 0%, rgba(230, 224, 214, 0) 26%),
    radial-gradient(circle at 24% 16%, rgba(204, 207, 198, 0.08) 0%, rgba(204, 207, 198, 0) 21%),
    linear-gradient(180deg, rgba(9, 13, 24, 0.12) 0%, rgba(12, 14, 28, 0.49) 100%);
}

.scene-canvas,
.scene-canvas canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene-canvas {
  opacity: 0;
  transition: opacity 480ms ease-out;
}

.scene-canvas.is-ready {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .scene-canvas {
    transition: none;
  }
}

.scene-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 26% 18%, rgba(226, 230, 221, 0.065) 0%, rgba(226, 230, 221, 0) 21%),
    radial-gradient(circle at 50% 31%, rgba(236, 232, 222, 0.08) 0%, rgba(236, 232, 222, 0) 26%),
    radial-gradient(ellipse 120% 58% at 50% 50%, transparent 36%, rgba(10, 12, 24, 0.49) 100%),
    linear-gradient(
      180deg,
      rgba(7, 9, 18, 0.04) 0%,
      rgba(10, 12, 22, 0.22) 42%,
      rgba(12, 13, 25, 0.69) 100%
    );
}

.site-shell {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.34;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 246, 229, 0.038) 0,
      rgba(255, 246, 229, 0.038) 1px,
      transparent 1px,
      transparent 72px
    ),
    linear-gradient(
      180deg,
      rgba(213, 224, 255, 0.04) 0,
      rgba(255, 246, 229, 0.05) 24%,
      rgba(255, 246, 229, 0) 55%
    );
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.48), transparent 72%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.48), transparent 72%);
}

.section {
  width: min(calc(100% - 32px), var(--max));
  margin-inline: auto;
  padding: clamp(96px, 12vw, 160px) 0;
}

.hero {
  /* Fallback for browsers that don't support svh/dvh */
  min-height: calc(100vh - 90px);
  min-height: calc(100svh - 90px);
  display: flex;
  align-items: flex-end;
  padding-top: 72px;
  padding-bottom: clamp(56px, 10vh, 104px);
}

.hero-minimal {
  position: relative;
  max-width: 720px;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--text-accent);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.88;
}

.hero h1,
.story-shell h2,
.panel-card h2 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--text-primary);
  line-height: 0.98;
  letter-spacing: -0.015em;
}

.hero h1 {
  font-size: clamp(48px, 8vw, 104px);
  max-width: 8ch;
  overflow-wrap: anywhere;
  /* Whisper of warm halo only — enough to feel lit-from-within without
     announcing itself. The muted palette does the work of keeping the
     type inside the scene. */
  text-shadow: 0 0 44px rgba(198, 208, 202, 0.1);
}

.hero h1 .hero-word {
  display: inline-block;
  /* The parent line-height of 0.98 is tight for display-size Cormorant.
     Combined with `background-clip: text` on the inline-block, a narrower
     box clips descenders (e.g. the `g` in "design", `y` in "by"). A small
     bottom padding expands the background box below the baseline without
     altering the visual line spacing, so the full glyph gets its
     background painted. */
  padding-bottom: 0.12em;
  color: var(--calm-prefix);
  animation: hero-rise 820ms both;
  animation-delay: 200ms;
}

.hero h1 .hero-word--accent {
  color: var(--accent-muted);
  /* Muted stone on the twilight scene can lose edge definition. A barely-
     there stroke nudges contrast up without reading as an outline. */
  -webkit-text-stroke: 0.3px rgba(30, 26, 22, 0.28);
  animation-delay: 380ms;
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

@keyframes veil-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.scene-shell {
  animation: veil-fade-in 1400ms ease-out both;
}

.site-shell {
  animation: veil-fade-in 1600ms ease-out both;
  animation-delay: 120ms;
}

.bottom-bar .bottom-btn,
.site-copyright {
  animation: hero-rise 820ms both;
  animation-delay: 560ms;
}

.bottom-bar .bottom-btn:nth-child(2) {
  animation-delay: 660ms;
}

.page-center {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.story-shell,
.panel-card {
  position: relative;
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  background:
    var(--panel-sheen),
    linear-gradient(180deg, rgba(255, 240, 214, 0.03) 0%, rgba(255, 240, 214, 0) 22%),
    var(--panel-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 230, 0.06),
    var(--shadow-panel);
}

.story-shell {
  width: min(100%, 880px);
  padding: clamp(30px, 4vw, 46px);
}

.story-shell--narrow {
  max-width: 760px;
  width: min(calc(100% - 32px), 760px);
}

.story-shell--noscript {
  margin-top: 40px;
}

.story-shell--noscript h2 {
  font-size: clamp(30px, 5vw, 52px);
  margin: 0 0 18px;
}

.story-shell h2 {
  font-size: clamp(38px, 6vw, 78px);
  max-width: 12ch;
  overflow-wrap: anywhere;
}

.story-text,
.panel-body {
  max-width: 46ch;
  margin: 20px 0 0;
  color: var(--text-secondary);
  line-height: 1.72;
}

.story-text {
  font-size: 18px;
}

.story-text a,
.panel-body a {
  color: var(--parchment-200);
  text-decoration-color: rgba(198, 208, 202, 0.48);
}

.panel-footnote a {
  color: inherit;
  text-decoration-color: rgba(198, 208, 202, 0.4);
}

.error-cta {
  margin: 24px 0 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(144, 150, 144, 0.16) 0%, rgba(38, 39, 37, 0.38) 100%);
  color: var(--text);
  text-decoration: none;
  transition:
    background 180ms ease,
    border-color 180ms ease;
}

.back-link:hover {
  border-color: rgba(198, 208, 202, 0.42);
  background: linear-gradient(180deg, rgba(144, 150, 144, 0.22) 0%, rgba(38, 39, 37, 0.5) 100%);
}

.bottom-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 0 24px max(30px, calc(22px + env(safe-area-inset-bottom)));
  pointer-events: none;
}

.bottom-btn {
  pointer-events: auto;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.bottom-btn--icon {
  position: relative;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.bottom-btn--icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--line-pastel);
  opacity: 0;
  transform: translate(-50%, 4px) scale(0.6);
  box-shadow: 0 0 18px rgba(214, 224, 218, 0.72);
  transition:
    opacity 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.bottom-btn--icon:hover,
.bottom-btn--icon:focus-visible,
.bottom-btn--icon[aria-expanded="true"] {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: none;
}

.bottom-btn--icon:hover::after,
.bottom-btn--icon:focus-visible::after,
.bottom-btn--icon[aria-expanded="true"]::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.btn-icon {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.btn-icon-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-accent);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    color 220ms ease;
  text-shadow: var(--text-meta-shadow);
}

.bottom-btn--icon:hover .btn-icon-label,
.bottom-btn--icon:focus-visible .btn-icon-label,
.bottom-btn--icon[aria-expanded="true"] .btn-icon-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

.site-copyright {
  position: fixed;
  left: 20px;
  bottom: max(30px, calc(22px + env(safe-area-inset-bottom)));
  z-index: 10;
  margin: 0;
  color: var(--text-accent);
  font-size: 11px;
  letter-spacing: 0.08em;
  pointer-events: none;
  text-shadow: var(--text-meta-shadow);
}

.panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 24px max(120px, calc(100px + env(safe-area-inset-bottom)));
  background:
    radial-gradient(circle at 50% 88%, rgba(188, 198, 190, 0.12) 0%, rgba(188, 198, 190, 0) 26%),
    rgba(10, 11, 22, 0.44);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}

.panel-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.panel-card {
  width: min(100%, 580px);
  min-height: 300px;
  padding: clamp(26px, 4vw, 42px);
  display: flex;
  flex-direction: column;
  transform: translateY(22px);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.panel-overlay.open .panel-card {
  transform: translateY(0);
}

.panel-card h2 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.04;
  margin: 0;
}

.panel-card .eyebrow {
  margin: 0 0 14px;
}

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

.panel-footnote {
  margin: auto 0 0;
  padding-top: 22px;
  color: var(--text-meta);
  font-size: 11px;
  letter-spacing: 0.08em;
}

#panel-contact .panel-card::after {
  content: "";
  display: block;
  margin-top: auto;
  padding-top: 22px;
  min-height: 22px;
}

.panel-surface {
  position: relative;
  transform: translateY(22px);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.panel-overlay.open .panel-surface {
  transform: translateY(0);
}

/* Single shared parchment frame for About + Contact panels.
   Per-panel character comes from one ornament: an "A" watermark inside
   #panel-about, a wax seal inside #panel-contact. The frame itself is
   identical across both — same paper, same drop angle, same shadow. */
.panel-parchment {
  width: min(100%, 720px);
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 30px 34px rgba(3, 4, 8, 0.42)) drop-shadow(0 8px 14px rgba(3, 4, 8, 0.28));
}

.panel-parchment__sheet {
  position: relative;
  padding: clamp(40px, 5.4vw, 64px) clamp(34px, 4.8vw, 60px) clamp(46px, 6vw, 72px);
  min-height: clamp(320px, 48vh, 460px);
  overflow: hidden;
  color: #332d25;
  font-family: var(--font-body);
  background-color: #d8cfbd;
  background-image:
    radial-gradient(circle at 18% 18%, rgba(255, 248, 229, 0.34) 0%, rgba(255, 248, 229, 0) 42%),
    radial-gradient(circle at 86% 78%, rgba(96, 74, 48, 0.13) 0%, rgba(96, 74, 48, 0) 44%),
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent calc(1.78em - 1px),
      rgba(69, 58, 43, 0.1) calc(1.78em - 1px),
      rgba(69, 58, 43, 0.1) 1.78em
    ),
    linear-gradient(180deg, #ded4c0 0%, #c8bea9 100%);
  background-position:
    0 0,
    0 0,
    0 1.2em,
    0 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 232, 0.28),
    inset 0 -18px 34px rgba(44, 34, 24, 0.12),
    inset 0 0 0 1px rgba(78, 65, 46, 0.22);
}

.panel-parchment__content {
  position: relative;
  z-index: 2;
  max-width: 38ch;
}

.panel-parchment__sheet .eyebrow {
  color: #7d6442;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  opacity: 0.82;
}

.panel-parchment__sheet h2 {
  max-width: 11ch;
  margin: 0;
  color: #29241e;
  font-family: var(--font-display);
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.015em;
}

.panel-parchment__sheet .panel-body {
  max-width: 38ch;
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  color: rgba(59, 51, 42, 0.82);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.66;
}

#panel-contact .panel-parchment__sheet .panel-body {
  font-size: clamp(17px, 1.55vw, 20px);
}

.panel-parchment__sheet .panel-body a,
.panel-parchment__sheet .panel-footnote a {
  color: #493f31;
  text-decoration-color: rgba(94, 76, 52, 0.48);
}

.panel-parchment__sheet .panel-footnote {
  margin: clamp(20px, 3vw, 30px) 0 0;
  color: rgba(56, 48, 38, 0.62);
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

/* Display "A" sitting behind the About text — reads as a tooled cover
   initial. Anchored right-of-center so the text column stays the eye's
   first stop, then the watermark registers as ambient ornament. */
.panel-parchment__watermark {
  position: absolute;
  top: 50%;
  right: clamp(-12px, 2vw, 24px);
  transform: translateY(-52%);
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(220px, 32vw, 360px);
  line-height: 0.8;
  color: rgba(60, 44, 24, 0.1);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Neutral seal in the lower-right of the Contact sheet. Pure CSS:
   radial highlight + muted gradient + inner shadow for the rim. */
.panel-parchment__seal {
  position: absolute;
  right: clamp(28px, 4vw, 56px);
  bottom: clamp(28px, 4vw, 56px);
  z-index: 1;
  width: clamp(76px, 9vw, 108px);
  height: clamp(76px, 9vw, 108px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(239, 236, 224, 0.68), rgba(239, 236, 224, 0) 38%),
    radial-gradient(circle at 70% 78%, rgba(58, 52, 44, 0.46), rgba(58, 52, 44, 0) 60%),
    linear-gradient(155deg, #b9afa2 0%, #91897f 58%, #615b55 100%);
  box-shadow:
    0 12px 22px rgba(28, 25, 22, 0.28),
    inset 0 2px 0 rgba(246, 243, 232, 0.34),
    inset 0 -8px 14px rgba(32, 29, 26, 0.3);
  pointer-events: none;
}

@media (max-width: 640px) {
  .panel-overlay {
    padding: 18px 14px max(106px, calc(86px + env(safe-area-inset-bottom)));
  }

  .panel-parchment {
    width: min(96vw, 520px);
  }

  .panel-parchment__sheet {
    padding: clamp(32px, 7vw, 44px) clamp(24px, 6vw, 36px) clamp(40px, 8vw, 56px);
    min-height: 0;
    max-height: calc(100svh - 132px);
  }

  .panel-parchment__sheet h2 {
    max-width: 100%;
    font-size: clamp(30px, 10vw, 44px);
  }

  .panel-parchment__watermark {
    font-size: clamp(180px, 56vw, 260px);
    right: clamp(-24px, -2vw, -8px);
    opacity: 0.85;
  }

  .panel-parchment__seal {
    width: clamp(64px, 16vw, 84px);
    height: clamp(64px, 16vw, 84px);
    right: clamp(20px, 6vw, 32px);
    bottom: clamp(20px, 6vw, 32px);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .panel-parchment__sheet {
    background-color: #e6dac2;
  }
}

.panel-close {
  position: absolute;
  top: clamp(18px, 4vw, 34px);
  right: clamp(18px, 4vw, 34px);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(64, 47, 30, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(238, 239, 232, 0.48), rgba(137, 132, 121, 0.3)),
    #b6afa3;
  color: #3b2c1e;
  font-size: 21px;
  line-height: 1;
  box-shadow:
    0 10px 18px rgba(36, 24, 12, 0.22),
    inset 0 1px 0 rgba(249, 247, 237, 0.5),
    inset 0 -7px 10px rgba(72, 46, 24, 0.22);
  transform: rotate(5deg);
  transition:
    transform 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.panel-close:hover,
.panel-close:focus-visible {
  background:
    linear-gradient(135deg, rgba(248, 248, 240, 0.58), rgba(148, 144, 132, 0.34)),
    #c8c1b3;
  color: #241910;
  transform: translateY(-1px) rotate(5deg);
}

.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 820px) {
  .hero {
    min-height: 100dvh;
    min-height: 100svh;
    padding-top: max(22px, env(safe-area-inset-top));
    padding-bottom: max(82px, calc(70px + env(safe-area-inset-bottom)));
  }

  .site-shell {
    opacity: 0.24;
  }
}

@media (max-width: 760px) {
  .hero {
    position: relative;
    align-items: flex-end;
    padding-bottom: max(96px, calc(82px + env(safe-area-inset-bottom)));
  }

  .hero-minimal {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    max-width: min(82vw, 420px);
    margin-bottom: max(18px, env(safe-area-inset-bottom));
    padding: 0 0 0 clamp(14px, 4vw, 24px);
    text-align: left;
  }
}

@media (max-width: 640px) {
  .section {
    width: min(calc(100% - 24px), var(--max));
  }

  .hero {
    min-height: 100dvh;
    min-height: 100svh;
    padding-top: max(28px, env(safe-area-inset-top));
    padding-bottom: max(124px, calc(104px + env(safe-area-inset-bottom)));
  }

  .hero h1 {
    /* Kept close to the desktop clamp so the hero reads at the same
       visual weight across breakpoints — the prior 13vw target
       over-scaled on phones relative to what's shown on desktop. */
    font-size: clamp(44px, 10vw, 80px);
    max-width: 6ch;
  }

  .hero-minimal {
    max-width: min(84vw, 360px);
    margin-bottom: max(20px, env(safe-area-inset-bottom));
    padding-left: clamp(18px, 5vw, 30px);
  }

  .story-text {
    font-size: 16px;
  }

  .story-shell h2 {
    font-size: clamp(30px, 10vw, 54px);
  }

  .bottom-bar {
    gap: 18px;
    padding-inline: 18px;
  }

  .bottom-btn--icon {
    width: 76px;
    height: 76px;
  }

  .btn-icon-label {
    bottom: calc(100% + 6px);
    transform: translate(-50%, 0);
    opacity: 1;
  }

  .site-copyright {
    left: 16px;
  }

  .panel-card {
    min-height: 260px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .story-shell,
  .panel-card {
    background: linear-gradient(180deg, rgba(80, 80, 77, 0.98) 0%, rgba(38, 39, 42, 0.98) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .skip-link,
  .hero-minimal,
  .bottom-btn,
  .btn-icon-label,
  .panel-overlay,
  .panel-card,
  .panel-surface,
  .panel-parchment__sheet,
  .reveal,
  .bottom-btn--icon::after {
    transition: none;
  }

  .hero h1,
  .hero h1 .hero-word,
  .hero h1 .hero-word--accent,
  .scene-shell,
  .site-shell,
  .bottom-bar .bottom-btn,
  .site-copyright,
  .panel-parchment__sheet {
    animation: none;
  }

  .bottom-btn--icon:hover,
  .bottom-btn--icon:focus-visible,
  .bottom-btn--icon[aria-expanded="true"] {
    transform: none;
  }

  .panel-card,
  .panel-surface,
  .panel-parchment__sheet,
  .reveal {
    transform: none;
  }

  .reveal {
    opacity: 1;
  }
}

@supports (text-wrap: balance) {
  .hero h1,
  .story-shell h2,
  .panel-card h2 {
    text-wrap: balance;
    overflow-wrap: normal;
  }
}

/* Phones rotated to landscape: viewport is very short, so the hero padding
   collapses and the bottom nav sits closer to the copy. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    min-height: 100svh;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(68px, calc(58px + env(safe-area-inset-bottom)));
  }

  .hero h1 {
    font-size: clamp(34px, 8vh, 56px);
    max-width: 10ch;
  }

  .hero-minimal {
    max-width: min(70vw, 480px);
    margin-bottom: max(8px, env(safe-area-inset-bottom));
    padding-left: clamp(14px, 3vw, 22px);
  }

  .bottom-bar {
    gap: 16px;
    padding-inline: 16px;
  }

  .bottom-btn--icon {
    width: 64px;
    height: 64px;
  }
}

/* Tablets in portrait (iPad-class): wider copy allowance than phones, still
   touch-oriented, so nav stays phone-sized. */
@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  .hero h1 {
    font-size: clamp(56px, 9vw, 104px);
  }

  .hero-minimal {
    max-width: min(72vw, 560px);
    padding-left: clamp(24px, 5vw, 40px);
  }

  .site-shell {
    opacity: 0.2;
  }

  .bottom-btn--icon {
    width: 84px;
    height: 84px;
  }
}

/* When developer-mode is active, hide the showcase UI so only the scene and
   the HUD are visible. The body class is toggled by src/scene/dev-mode.js on
   enter/exit. !important guards against open-panel styles whose specificity
   would otherwise win. */
body.dev-mode-active > *:not(.scene-shell):not(.dev-mode-hud) {
  display: none !important;
}

/* Developer-mode HUD. Hidden by default; toggled via the `hidden` attribute
   from src/scene/dev-mode.js when the user enters dev mode. Styled to fit
   STYLE.md (calm, restrained — not loud debug colors). */
.dev-mode-hud {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 50;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(6, 9, 20, 0.78);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  color: var(--text-meta);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.dev-mode-hud[hidden] {
  display: none;
}

.dev-mode-hud__row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
}

.dev-mode-hud__row > span:first-child {
  color: var(--text-muted-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  align-self: center;
}

/* Windows High Contrast / forced-colors: strip atmospheric layers and
   replace soft borders/shadows with system colors so buttons, links, and
   dialogs remain legible. */
@media (forced-colors: active) {
  .scene-shell,
  .scene-vignette,
  .site-shell {
    display: none;
  }

  .bottom-btn,
  .panel-close,
  .skip-link {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    forced-color-adjust: none;
  }

  .bottom-btn[aria-expanded="true"] {
    background: Highlight;
    color: HighlightText;
  }

  a {
    color: LinkText;
  }

  .panel-parchment,
  .panel-parchment__sheet,
  .panel-card {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
  }
}