/* THE VIOLET HOUR — harrietbronson.com
   Palette (brand kit): night #12101C · deep violet #4B3B72 · twilight #7A5FB0
   · old-foil gold #C9A227 · cream #F2EAD8
   Type: Marcellus (display) · Crimson Pro (body) · IBM Plex Mono (utility) */

:root {
  --night: #12101C;
  --violet: #4B3B72;
  --twilight: #7A5FB0;
  --gold: #C9A227;
  --gold-warm: #E8B84B;
  --cream: #F2EAD8;
  --cream-dim: rgba(242, 234, 216, 0.72);
  --cream-faint: rgba(242, 234, 216, 0.45);
  --ember: #C97B4A;
  --dusk: 0; /* 0 = golden dusk → 1 = full night; driven by scroll */
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--night);
  color: var(--cream);
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 300;
  overflow-x: hidden;
}

::selection { background: var(--violet); color: var(--cream); }

/* ---------------------------------------------------------------- fireflies */
#fireflies {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* ------------------------------------------------------------- dusk journey */
.dusk-journey {
  position: relative;
  height: 240vh;
}

.scene {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.sky {
  position: absolute;
  inset: 0;
}

.sky-dusk {
  background: linear-gradient(
    to bottom,
    #241B3E 0%,
    #4B3B72 34%,
    #8A5A78 58%,
    #C97B4A 76%,
    #E8B84B 92%
  );
}

.sky-night {
  background: linear-gradient(
    to bottom,
    #0A0814 0%,
    #12101C 45%,
    #241B3E 78%,
    #3A2C55 100%
  );
  opacity: var(--dusk);
}

.stars {
  position: absolute;
  inset: 0 0 20% 0;
  opacity: calc(var(--dusk) * 0.9);
}
.stars svg { width: 100%; height: 100%; }

.layer {
  position: absolute;
  inset: 0;
}
.layer svg {
  width: 100%;
  height: 100%;
  display: block;
}

.layer-moon { opacity: calc(0.25 + var(--dusk) * 0.75); }

.layer-clouds {
  opacity: calc(1 - var(--dusk) * 0.55);
  background-image:
    radial-gradient(48% 3.2% at 21% 18%, rgba(58, 44, 85, 0.6) 0%, rgba(58, 44, 85, 0) 100%),
    radial-gradient(38% 2.8% at 42% 13%, rgba(42, 33, 64, 0.55) 0%, rgba(42, 33, 64, 0) 100%),
    radial-gradient(36% 2.4% at 63% 37%, rgba(138, 90, 120, 0.4) 0%, rgba(138, 90, 120, 0) 100%),
    radial-gradient(30% 2% at 15% 46%, rgba(201, 123, 74, 0.26) 0%, rgba(201, 123, 74, 0) 100%),
    radial-gradient(38% 2.2% at 87% 52%, rgba(201, 123, 74, 0.24) 0%, rgba(201, 123, 74, 0) 100%),
    radial-gradient(28% 1.8% at 78% 41%, rgba(58, 44, 85, 0.45) 0%, rgba(58, 44, 85, 0) 100%);
}

/* low mist that hangs over the yard and the pond */
.layer-mist {
  background-image:
    radial-gradient(52% 4.5% at 30% 72%, rgba(138, 122, 176, 0.13) 0%, rgba(138, 122, 176, 0) 100%),
    radial-gradient(46% 4% at 68% 76%, rgba(122, 95, 176, 0.11) 0%, rgba(122, 95, 176, 0) 100%),
    radial-gradient(38% 3.4% at 50% 69%, rgba(160, 140, 190, 0.09) 0%, rgba(160, 140, 190, 0) 100%),
    radial-gradient(30% 3% at 86% 71%, rgba(138, 122, 176, 0.1) 0%, rgba(138, 122, 176, 0) 100%);
  animation: mist-drift 46s ease-in-out infinite alternate;
}
@keyframes mist-drift {
  from { transform: translateX(-1.4%); }
  to { transform: translateX(1.4%); }
}

/* analog grain over everything — the mid-90s layer */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

.vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 78%, rgba(6, 5, 16, 0.5) 100%),
    radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(6, 5, 16, 0.55) 100%);
  pointer-events: none;
}

/* porch light — breathes very slowly; brighter during the live violet hour */
.porch-bulb { animation: breathe 7s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 0.95; }
}
.porch-glow { animation: glow-breathe 7s ease-in-out infinite; }
@keyframes glow-breathe {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 0.62; }
}
.dusk-live .porch-glow { animation-name: glow-breathe-live; }
@keyframes glow-breathe-live {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.95; }
}
.dusk-live .lit-window { opacity: 0.5; }

/* the visitor on the tall post — arrives and leaves like a physical bird,
   until you disturb it. then it uses the moon. */
.figure { transition: opacity 2.4s ease; }
.figure.here { opacity: 0.9; }

/* the wing it sometimes raises — slow, deliberate, wave-like. wrong.
   it ends by folding back down, not by dissolving mid-air. */
.crow-wing { opacity: 0; transform-box: fill-box; transform-origin: 8% 88%; }
.figure.crow-waving .crow-wing { animation: wrong-wave 8s ease-in-out both; }
@keyframes wrong-wave {
  0%   { opacity: 0; transform: rotate(-26deg); }
  10%  { opacity: 1; }
  30%  { transform: rotate(24deg); }
  52%  { transform: rotate(-10deg); }
  74%  { transform: rotate(22deg); }
  90%  { opacity: 1; transform: rotate(-20deg); }
  97%  { opacity: 1; transform: rotate(-28deg); }
  100% { opacity: 0; transform: rotate(-30deg); }
}

/* startled: it doesn't just fly away. it flies THROUGH. */
/* one straight accelerating line, post → measured moon center. no detours.
   The outer group ONLY translates (pure translation is origin-proof); the
   flying silhouette shrinks around its own center. Center-to-center, always. */
.figure.crow-moonflight .crow { animation: crow-to-moon 2.2s cubic-bezier(0.5, 0, 0.85, 0.6) both; }
.figure.crow-moonflight .crow-fly { animation: crow-shrink-fly 2.2s cubic-bezier(0.5, 0, 0.85, 0.6) both; }
.figure.crow-moonflight .crow-perch { animation: crow-body-out-fast 0.3s linear both; }
@keyframes crow-to-moon {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(var(--moon-dx, 240px), var(--moon-dy, -176px)); }
}
@keyframes crow-shrink-fly {
  0%, 5%  { opacity: 0; transform: scale(1); }
  11%     { opacity: 1; }
  97%     { opacity: 1; }
  100%    { opacity: 0; transform: scale(0.05); }
}
@keyframes crow-body-out-fast { 0% { opacity: 1; } 100% { opacity: 0; } }

/* the moon takes it: a liquid surface — ripples spread, the disc wobbles */
.layer-moon .moon-flare circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.layer-moon .moon-disc { transform-box: fill-box; transform-origin: center; }
.layer-moon.flash .flare-core { animation: flare-core 1.6s ease-out both; }
.layer-moon.flash .ripple { animation: moon-ripple 1.5s cubic-bezier(0.2, 0.6, 0.4, 1) both; }
.layer-moon.flash .ripple-2 { animation-delay: 0.22s; }
.layer-moon.flash .ripple-3 { animation-delay: 0.44s; }
.layer-moon.flash .moon-disc { animation: moon-wobble 1.7s ease-in-out both; }
@keyframes flare-core {
  0%   { opacity: 0; transform: scale(0.6); }
  20%  { opacity: 0.65; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes moon-ripple {
  0%   { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}
@keyframes moon-wobble {
  0%   { transform: scale(1, 1); }
  14%  { transform: scale(1.17, 1.12); }
  34%  { transform: scale(0.95, 1.06); }
  56%  { transform: scale(1.06, 0.97); }
  78%  { transform: scale(0.98, 1.02); }
  100% { transform: scale(1, 1); }
}

.crow { transform-box: fill-box; }
.crow-fly { opacity: 0; transform-box: fill-box; transform-origin: center; }

/* arrivals: high swoop, low skim along the fence, or a drop from above —
   or it's simply already there when you look (crow-sit) */
.figure.crow-arrive, .figure.crow-arrive-skim, .figure.crow-arrive-drop,
.figure.crow-sit { transition: none; opacity: 1; }
.figure.crow-arrive .crow { animation: crow-swoop 2.4s cubic-bezier(0.25, 0.6, 0.35, 1) both; }
.figure.crow-arrive-skim .crow { animation: crow-skim 2.4s cubic-bezier(0.3, 0.5, 0.3, 1) both; }
.figure.crow-arrive-drop .crow { animation: crow-drop 2.2s cubic-bezier(0.4, 0.4, 0.3, 1) both; }
.figure.crow-arrive .crow-fly, .figure.crow-arrive-skim .crow-fly,
.figure.crow-arrive-drop .crow-fly { animation: crow-wings-in 2.4s linear both; }
.figure.crow-arrive .crow-perch, .figure.crow-arrive-skim .crow-perch,
.figure.crow-arrive-drop .crow-perch { animation: crow-body-in 2.4s linear both; }
@keyframes crow-swoop {
  0%   { transform: translate(-300px, -210px) rotate(-10deg); }
  55%  { transform: translate(-90px, -58px) rotate(-4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes crow-skim {
  0%   { transform: translate(-380px, -26px) rotate(-6deg); }
  55%  { transform: translate(-130px, -50px) rotate(-3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes crow-drop {
  0%   { transform: translate(-34px, -330px) rotate(-4deg); }
  68%  { transform: translate(-8px, -64px) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes crow-wings-in { 0%, 78% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes crow-body-in { 0%, 78% { opacity: 0; } 90%, 100% { opacity: 1; } }

/* departures: up past the moon, or away over the yard to the left */
.figure.crow-leave .crow { animation: crow-swoop-out 1.9s cubic-bezier(0.5, 0, 0.8, 0.4) both; }
.figure.crow-leave-left .crow { animation: crow-swoop-out-left 1.9s cubic-bezier(0.5, 0, 0.8, 0.4) both; }
.figure.crow-leave .crow-fly, .figure.crow-leave-left .crow-fly { animation: crow-wings-out 1.9s linear both; }
.figure.crow-leave .crow-perch, .figure.crow-leave-left .crow-perch { animation: crow-body-out 1.9s linear both; }
.figure.crow-leave-left .crow-fly { transform: scaleX(-1); }
@keyframes crow-swoop-out {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(340px, -270px) rotate(9deg); }
}
@keyframes crow-swoop-out-left {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-380px, -240px) rotate(-9deg); }
}
@keyframes crow-wings-out { 0%, 8% { opacity: 0; } 16%, 100% { opacity: 1; } }
@keyframes crow-body-out { 0%, 8% { opacity: 1; } 16%, 100% { opacity: 0; } }

/* instant vanish at the end of a departure — no ghost re-fade on the post */
.figure.snap { transition: none !important; opacity: 0 !important; }

/* clickable visitor — no pointer cursor: you find out by trying */
#figure { pointer-events: auto; }

/* startled: same departure, but panicked */
.figure.crow-startle .crow,
.figure.crow-startle .crow-fly,
.figure.crow-startle .crow-perch { animation-duration: 1.3s !important; }

/* the ♪ toggle for the sound of the night */
.night-sound {
  position: fixed;
  right: 18px;
  bottom: 16px;
  z-index: 6;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(18, 16, 28, 0.55);
  border: 1px solid rgba(122, 95, 176, 0.35);
  color: rgba(242, 234, 216, 0.55);
  font-family: "IBM Plex Mono", monospace;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.night-sound:hover { color: var(--gold); border-color: var(--gold); }
.night-sound.muted { color: rgba(242, 234, 216, 0.2); }
.night-sound.muted::after { content: ""; position: absolute; inset: 46% 20% auto; height: 1.5px; background: rgba(242, 234, 216, 0.4); transform: rotate(-40deg); }
.still .night-sound { display: none; }

/* alive on the post: the body breathes; the feet stay planted */
.crow-perch .breath {
  transform-box: fill-box;
  transform-origin: 50% 96%;
  animation: crow-breath 4.2s ease-in-out infinite;
}
@keyframes crow-breath {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.014, 1.035); }
}

/* and every so often the head swings around and the bill foreshortens:
   it is looking directly at you. then it goes back to the pond. */
.crow-head {
  transform-box: fill-box;
  transform-origin: 16% 82%;
  animation: crow-regard 17s ease-in-out infinite;
}
@keyframes crow-regard {
  0%, 55%   { transform: rotate(0deg) scaleX(1); }
  60%, 72%  { transform: rotate(-13deg) scaleX(0.52); }
  78%, 88%  { transform: rotate(3deg) scaleX(1); }
  91%, 94%  { transform: rotate(-4deg) scaleX(0.94); }
  100%      { transform: rotate(0deg) scaleX(1); }
}

.cover-shot .hero-copy, .cover-shot .night-sound { display: none !important; }

.still .crow, .still .crow-fly, .still .crow-perch,
.still .breath, .still .crow-head { animation: none !important; }
.still .crow-fly { opacity: 0 !important; }
.still .crow-perch { opacity: 1 !important; }
.figure-arm {
  transform-box: fill-box;
  transform-origin: left center;
}
.figure.here .figure-arm {
  animation: slow-count 3.4s ease-in-out infinite;
}
@keyframes slow-count {
  0%, 100% { transform: rotate(-16deg); }
  50% { transform: rotate(34deg); }
}

/* ------------------------------------------------------------------- hero copy */
.hero-copy {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  padding: 0 24px 9vh;
  pointer-events: none;
}
.hero-copy a { pointer-events: auto; }

.byline-lead {
  margin-top: 2.8rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--cream-faint);
  text-shadow: 0 1px 18px rgba(10, 8, 20, 0.9);
  animation: rise 1.6s 1.45s ease both;
}

.title {
  font-family: "Marcellus", serif;
  font-weight: 400;
  line-height: 0.98;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-shadow: 0 2px 40px rgba(10, 8, 20, 0.6);
}

.title-line { display: block; }

.title-the,
.title-hour {
  font-size: clamp(1.6rem, 4.5vw, 3.2rem);
  letter-spacing: 0.42em;
  margin-left: 0.42em; /* optically recenter tracked text */
  color: var(--cream);
}
.title-the { animation: rise 1.6s 0.45s ease both; }
.title-hour { animation: rise 1.6s 0.85s ease both; }

.title-violet {
  font-size: clamp(3.4rem, 11.5vw, 8.2rem);
  letter-spacing: 0.12em;
  margin-left: 0.12em;
  margin-block: 0.04em;
  background: linear-gradient(to bottom, #CBB8F0 4%, var(--twilight) 46%, var(--violet) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 3px 28px rgba(122, 95, 176, 0.35));
  animation: rise 1.9s 0.62s ease both;
}

.tagline {
  margin-top: 2.4rem;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-style: italic;
  color: var(--cream-dim);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 20px rgba(10, 8, 20, 0.85);
  animation: rise 1.6s 1.25s ease both;
}

.byline {
  margin-top: 0.8rem;
  font-family: "Marcellus", serif;
  font-size: clamp(0.88rem, 1.5vw, 1.02rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 24px rgba(10, 8, 20, 0.95), 0 0 8px rgba(10, 8, 20, 0.6);
  animation: rise 1.6s 1.5s ease both;
}

.coming {
  margin-top: 0.9rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--cream-faint);
  text-shadow: 0 1px 18px rgba(10, 8, 20, 0.9);
  animation: rise 1.6s 1.7s ease both;
}

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

.scroll-cue {
  margin-top: 3.4rem;
  width: 26px;
  height: 42px;
  border: 1px solid var(--cream-faint);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
  animation: rise 1.6s 2.1s ease both;
}
.scroll-cue span {
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--gold);
  animation: cue-drift 2.6s ease-in-out infinite;
}
@keyframes cue-drift {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(12px); opacity: 0.2; }
}

/* --------------------------------------------------------------------- panels */
main { position: relative; z-index: 2; }

.panel {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  padding: 9rem 28px;
}

.section-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--twilight);
  margin-bottom: 2.6rem;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
.reveal.seen {
  opacity: 1;
  transform: none;
}

/* the book */
.panel-book { padding-top: 11rem; }

.teaser {
  font-size: clamp(1.22rem, 2.4vw, 1.5rem);
  line-height: 1.75;
  color: var(--cream-dim);
}
.teaser::first-letter {
  font-family: "Marcellus", serif;
  font-size: 3.1em;
  float: left;
  line-height: 0.8;
  padding: 0.08em 0.12em 0 0;
  color: var(--gold);
}

/* the letter (mailing list) */
.panel-letter { max-width: 620px; }

.letter {
  background: var(--cream);
  color: #241B3E;
  padding: 3.4rem 3rem 3rem;
  position: relative;
  box-shadow:
    0 1px 0 rgba(242, 234, 216, 0.12),
    0 30px 80px rgba(0, 0, 0, 0.55);
}
/* deckle top edge */
.letter::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  right: 0;
  height: 8px;
  background: var(--cream);
  clip-path: polygon(0 100%, 2% 20%, 5% 90%, 9% 10%, 13% 80%, 17% 30%, 21% 95%, 25% 15%, 29% 75%, 33% 25%, 37% 90%, 41% 10%, 45% 70%, 50% 20%, 55% 85%, 59% 30%, 63% 95%, 67% 15%, 71% 80%, 75% 25%, 79% 90%, 83% 20%, 87% 75%, 91% 10%, 95% 85%, 98% 30%, 100% 100%);
}

.letter-violet {
  width: 48px;
  height: 48px;
  margin-bottom: 1.6rem;
}
.letter-violet svg { width: 100%; height: 100%; }

.letter-heading {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  letter-spacing: 0.03em;
  margin-bottom: 0.9rem;
  color: #241B3E;
}

.letter-copy {
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(36, 27, 62, 0.78);
  margin-bottom: 2.2rem;
  max-width: 42ch;
}

.hp { position: absolute; left: -9999px; }

.field { margin-bottom: 1.4rem; }

.field label {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(36, 27, 62, 0.6);
  margin-bottom: 0.5rem;
}
.field .opt { text-transform: none; letter-spacing: 0.1em; }

.field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(36, 27, 62, 0.3);
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1.15rem;
  color: #241B3E;
  padding: 0.45rem 2px;
  border-radius: 0;
  transition: border-color 0.3s ease;
}
.field input::placeholder { color: rgba(36, 27, 62, 0.35); }
.field input:focus {
  outline: none;
  border-bottom-color: var(--violet);
}
.field input:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
}

.letter button {
  margin-top: 1rem;
  font-family: "Marcellus", serif;
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--violet);
  border: none;
  padding: 1rem 2.6rem;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.letter button:hover { background: #5A4787; transform: translateY(-1px); }
.letter button:focus-visible {
  outline: 2px solid #241B3E;
  outline-offset: 3px;
}

.fine-print {
  margin-top: 1.3rem;
  font-size: 0.85rem;
  color: rgba(36, 27, 62, 0.55);
}

/* the author */
.panel-author { padding-bottom: 10rem; }

.author-blurb {
  font-size: clamp(1.15rem, 2.2vw, 1.38rem);
  line-height: 1.8;
  color: var(--cream-dim);
  max-width: 46ch;
}
.author-blurb em {
  font-style: italic;
  color: var(--cream);
}

/* --------------------------------------------------------------------- footer */
footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 4rem 24px 3.4rem;
  border-top: 1px solid rgba(122, 95, 176, 0.18);
}

.foot-violet {
  color: var(--violet);
  font-size: 1.1rem;
  margin-bottom: 1.4rem;
}

.foot-contact {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 0.8em;
  row-gap: 0.55em;
}
.foot-contact a {
  color: var(--cream-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(122, 95, 176, 0.4);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.foot-contact a:hover { color: var(--gold); border-color: var(--gold); }
.foot-contact a:focus-visible {
  outline: 2px solid var(--twilight);
  outline-offset: 3px;
}
.foot-contact .dot { color: var(--cream-faint); }

/* Stack the contact links on narrow screens — the inline dot reads as
   misalignment once the row wraps, so it goes away entirely. */
@media (max-width: 560px) {
  .foot-contact { flex-direction: column; }
  .foot-contact .dot { display: none; }
}

.foot-legal {
  margin-top: 1.2rem;
  font-size: 0.86rem;
  color: var(--cream-faint);
}

.foot-hour {
  margin-top: 1.6rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --------------------------------------------------------------- small screens */
@media (max-width: 560px) {
  .dusk-journey { height: 200vh; }
  .panel { padding: 6.5rem 22px; }
  .panel-book { padding-top: 8rem; }
  .letter { padding: 2.6rem 1.6rem 2.2rem; }
  .tagline { margin-top: 1.8rem; }
  .byline { margin-top: 2rem; }
}

/* --------------------------------------------- ?still=1 (deterministic QA) */
.still { scroll-behavior: auto !important; }
.still *, .still *::before, .still *::after {
  animation: none !important;
  transition: none !important;
}
.still .reveal { opacity: 1; transform: none; }
.still .figure { opacity: 0.9; }

/* ------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .byline-lead, .title-the, .title-hour, .title-violet, .tagline, .byline,
  .coming, .scroll-cue {
    animation: none;
  }
  .scroll-cue span, .porch-bulb, .porch-glow, .layer-mist { animation: none; }
  .figure.here .figure-arm { animation: none; transform: rotate(10deg); }
  .reveal { opacity: 1; transform: none; transition: none; }
  #fireflies { display: none; }
}