/* ============================================================================
   Linley V3 — "The Story Still Being Written"
   Cinematic emotional digital keepsake — design system.
   All classes are namespaced under .v3 so admin styles remain isolated.
   ========================================================================== */

:root {
  /* Palette — pulled directly from the official 2026 flyer */
  --v3-navy:         #1b2540;  /* dress / brushstroke / banner */
  --v3-navy-deep:    #131a30;
  --v3-night:        #0a0e1c;  /* dark site background tuned to navy family */
  --v3-ink:          #11162a;
  --v3-ink-2:        #171d33;
  --v3-deep:         #1d1d2c;
  --v3-cream-paper:  #f4ecdd;  /* flyer top-half background */
  --v3-cream:        #fff7ec;
  --v3-soft-cream:   #f7ead8;
  --v3-champagne:    #c9a75c;  /* gold script / leaf / accent */
  --v3-champagne-bright: #d8b977;
  --v3-antique-gold: #a98a44;
  --v3-blush:        #e8c4bd;
  --v3-rose:         #c98f8b;
  --v3-white:        #ffffff;
  --v3-muted:        rgba(255, 247, 236, 0.72);
  --v3-muted-soft:   rgba(255, 247, 236, 0.55);
  --v3-glass:        rgba(255, 247, 236, 0.06);
  --v3-glass-strong: rgba(255, 247, 236, 0.10);
  --v3-line:         rgba(201, 167, 92, 0.26);
  --v3-line-soft:    rgba(255, 247, 236, 0.12);
  --v3-shadow:       0 30px 80px -30px rgba(0, 0, 0, 0.65);
  --v3-shadow-soft:  0 10px 40px -20px rgba(0, 0, 0, 0.5);

  /* Type — matches flyer: Cormorant for serifs, Allura for script, Inter for body */
  --v3-font-display: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --v3-font-script:  "Allura", "Pinyon Script", "Brush Script MT", cursive;
  --v3-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --v3-font-mono:    "JetBrains Mono", ui-monospace, "Courier New", monospace;

  /* Rhythm */
  --v3-r-1: 4px;
  --v3-r-2: 8px;
  --v3-r-3: 12px;
  --v3-r-4: 20px;
  --v3-r-5: 32px;
  --v3-r-6: 56px;
  --v3-r-7: 88px;
  --v3-r-8: 140px;

  /* Radius */
  --v3-radius-sm: 6px;
  --v3-radius:    14px;
  --v3-radius-lg: 22px;
  --v3-radius-xl: 32px;

  /* Motion */
  --v3-ease:      cubic-bezier(.2, .6, .2, 1);
  --v3-ease-out:  cubic-bezier(.16, 1, .3, 1);
  --v3-dur-fast:  280ms;
  --v3-dur:       520ms;
  --v3-dur-slow:  900ms;
}

/* ------------------------------------------------------------------ Reset */
.v3-body,
.v3-body * {
  box-sizing: border-box;
}

.v3-body {
  margin: 0;
  background: var(--v3-night);
  color: var(--v3-cream);
  font-family: var(--v3-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}

.v3-body img,
.v3-body video {
  max-width: 100%;
  display: block;
}

.v3-body a {
  color: var(--v3-champagne);
  text-decoration: none;
  transition: color var(--v3-dur-fast) var(--v3-ease);
}
.v3-body a:hover { color: var(--v3-cream); }
.v3-body a:focus-visible {
  outline: 2px solid var(--v3-champagne);
  outline-offset: 3px;
  border-radius: var(--v3-radius-sm);
}

/* ---------------------------------------------------------- Countdown banner */
.v3-countdown{
  position:relative;
  z-index:11;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.55rem 1rem;
  background:linear-gradient(90deg, rgba(201,169,97,.08) 0%, rgba(201,169,97,.18) 50%, rgba(201,169,97,.08) 100%);
  border-bottom:1px solid rgba(201,169,97,.25);
  color:var(--v3-cream);
  font-family:var(--v3-font-body);
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  text-align:center;
}
.v3-countdown__icon{color:var(--v3-gold,#c9a961);font-size:.85rem;line-height:1}
.v3-countdown__label{color:#fff;opacity:1;font-weight:500}
.v3-countdown__time{
  color:var(--v3-gold,#c9a961);
  font-weight:600;
  letter-spacing:.18em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.v3-countdown.is-today{
  background:linear-gradient(90deg, rgba(201,169,97,.18) 0%, rgba(201,169,97,.38) 50%, rgba(201,169,97,.18) 100%);
}
.v3-countdown.is-today .v3-countdown__time{
  color:#fff;
  text-shadow:0 0 14px rgba(201,169,97,.7);
}
@media (max-width:600px){
  .v3-countdown{font-size:.62rem;padding:.45rem .8rem;letter-spacing:.18em;gap:.45rem}
}

.v3-body h1, .v3-body h2, .v3-body h3, .v3-body h4 {
  font-family: var(--v3-font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
  color: var(--v3-cream);
}

.v3-body p { margin: 0; }

.v3-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--v3-champagne);
  color: var(--v3-ink);
  padding: 12px 18px;
  border-radius: var(--v3-radius-sm);
  font-weight: 600;
  z-index: 200;
}
.v3-skip:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------- Eyebrow */
.v3-eyebrow {
  display: inline-block;
  font-family: var(--v3-font-body);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--v3-champagne);
  font-weight: 500;
}

.v3-eyebrow--line::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--v3-champagne);
  vertical-align: middle;
  margin-right: 14px;
  transform: translateY(-2px);
}

/* Used on chapter pages where the eyebrow stands alone (no "Chapter X · " prefix).
   Gives the lone label slightly more typographic weight so it doesn't read thin
   above the large headline. */
.v3-eyebrow--solo {
  font-size: 14px;
  letter-spacing: 0.4em;
  font-weight: 600;
}
.v3-eyebrow--solo.v3-eyebrow--line::before {
  width: 40px;
  margin-right: 18px;
}

/* ------------------------------------------------------------------- Nav */
.v3-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 56px);
  background: linear-gradient(to bottom, rgba(7, 9, 20, 0.85), rgba(7, 9, 20, 0));
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: background var(--v3-dur) var(--v3-ease), backdrop-filter var(--v3-dur) var(--v3-ease), padding var(--v3-dur) var(--v3-ease);
}

.v3-nav.is-scrolled {
  background: rgba(7, 9, 20, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--v3-line-soft);
}

.v3-mono {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--v3-font-display);
  font-size: 22px;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--v3-cream);
}
.v3-mono .v3-mono__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v3-champagne);
  display: inline-block;
  transform: translateY(-3px);
}

.v3-nav__links {
  display: flex;
  gap: clamp(16px, 2.4vw, 32px);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.v3-nav__link {
  position: relative;
  color: rgba(255, 247, 236, 0.85);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 2px;
  transition: color var(--v3-dur-fast) var(--v3-ease);
}
.v3-nav__link:hover,
.v3-nav__link.is-active {
  color: var(--v3-cream);
}
.v3-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--v3-champagne);
}

.v3-nav__cta {
  padding: 10px 18px;
  border: 1px solid var(--v3-champagne);
  color: var(--v3-cream);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background var(--v3-dur-fast) var(--v3-ease), color var(--v3-dur-fast) var(--v3-ease);
}
.v3-nav__cta:hover {
  background: var(--v3-champagne);
  color: var(--v3-ink);
}

/* Mobile nav */
.v3-nav__toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--v3-cream);
  width: 40px;
  height: 40px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.v3-nav__toggle span {
  position: relative;
  display: block;
  width: 22px;
  height: 1px;
  background: var(--v3-cream);
  transition: transform var(--v3-dur-fast) var(--v3-ease), opacity var(--v3-dur-fast) var(--v3-ease);
}
.v3-nav__toggle span::before,
.v3-nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 1px;
  background: var(--v3-cream);
  transition: transform var(--v3-dur-fast) var(--v3-ease);
}
.v3-nav__toggle span::before { top: -7px; }
.v3-nav__toggle span::after  { top: 7px; }
.v3-nav__toggle.is-open span { background: transparent; }
.v3-nav__toggle.is-open span::before { transform: translateY(7px) rotate(45deg); }
.v3-nav__toggle.is-open span::after  { transform: translateY(-7px) rotate(-45deg); }

.v3-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: linear-gradient(160deg, var(--v3-night) 0%, var(--v3-ink) 60%, #0d0d18 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--v3-dur) var(--v3-ease);
}
.v3-mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}
.v3-mobile-menu a {
  font-family: var(--v3-font-display);
  font-size: clamp(28px, 8vw, 44px);
  color: var(--v3-cream);
  letter-spacing: 0.01em;
}
.v3-mobile-menu a:hover { color: var(--v3-champagne); }
.v3-mobile-menu .v3-mobile-menu__motto {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--v3-font-display);
  font-style: italic;
  font-size: 14px;
  color: rgba(255, 247, 236, 0.55);
  padding: 0 24px;
}

@media (max-width: 880px) {
  .v3-nav__links,
  .v3-nav__cta { display: none; }
  .v3-nav__toggle { display: inline-flex; }
}

/* --------------------------------------------------------------- Layout */
.v3-shell {
  position: relative;
  min-height: 100vh;
}
.v3-main {
  padding-top: 0; /* hero pages have their own top padding */
}
.v3-page {
  padding: 140px clamp(20px, 5vw, 56px) var(--v3-r-7);
  max-width: 1240px;
  margin: 0 auto;
}
.v3-page__head {
  max-width: 760px;
  margin-bottom: var(--v3-r-6);
}
.v3-page__title {
  font-family: var(--v3-font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-style: italic;
  letter-spacing: -0.01em;
  margin-top: 14px;
  margin-bottom: 22px;
}
.v3-page__lede {
  color: rgba(255, 247, 236, 0.85);
  font-size: 17px;
  max-width: 56ch;
  line-height: 1.7;
}

/* --------------------------------------------------------------- Atmosphere */
.v3-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.v3-atmosphere__glow {
  position: absolute;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  background: radial-gradient(circle at center,
              rgba(215, 180, 106, 0.18) 0%,
              rgba(215, 180, 106, 0.06) 30%,
              transparent 60%);
  top: -20vmax;
  left: -10vmax;
  filter: blur(20px);
  animation: v3-glow 22s ease-in-out infinite alternate;
}
.v3-atmosphere__glow--rose {
  top: auto;
  bottom: -25vmax;
  left: auto;
  right: -15vmax;
  width: 60vmax;
  height: 60vmax;
  background: radial-gradient(circle at center,
              rgba(232, 196, 189, 0.10) 0%,
              rgba(232, 196, 189, 0.04) 35%,
              transparent 65%);
  animation-duration: 28s;
  animation-direction: alternate-reverse;
}
@keyframes v3-glow {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(4vw, 3vh, 0) scale(1.12); }
}

.v3-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.v3-particles span {
  position: absolute;
  display: block;
  width: 2px;
  height: 2px;
  background: var(--v3-cream);
  border-radius: 50%;
  opacity: 0;
  animation: v3-particle 18s linear infinite;
  box-shadow: 0 0 6px rgba(255, 247, 236, 0.6);
}
@keyframes v3-particle {
  0%   { transform: translate3d(0, 20vh, 0) scale(0.6); opacity: 0; }
  15%  { opacity: 0.5; }
  85%  { opacity: 0.5; }
  100% { transform: translate3d(0, -110vh, 0) scale(1.1); opacity: 0; }
}

/* Content above atmosphere */
.v3-content {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------- Hero (Home) */
.v3-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding: 120px clamp(20px, 5vw, 56px) var(--v3-r-6);
  max-width: 1320px;
  margin: 0 auto;
}

.v3-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.v3-hero__copy { position: relative; z-index: 2; }

.v3-hero__name {
  font-size: clamp(56px, 10vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 18px 0 8px;
  background: linear-gradient(180deg, var(--v3-cream) 0%, rgba(255, 247, 236, 0.7) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.v3-hero__name em {
  font-style: italic;
  color: var(--v3-champagne);
  -webkit-text-fill-color: var(--v3-champagne);
}

/* --------------------------------------------------------------- Signature
   Directly references the flyer: navy paint-stroke banner with gold script
   "Linley" overlapping a clean serif "ROWLAND" in cream. Used in the hero
   and reusable as a recurring brand moment. */
.v3-signature {
  position: relative;
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 8px 0 0;
  padding: 18px 0 28px;
  isolation: isolate;
}
.v3-signature__brush {
  position: absolute;
  inset: 12% -4% 8% -6%;
  z-index: 0;
  background: var(--v3-navy);
  /* Painty, asymmetric edges using a clip-path polygon — feels brushed, not boxy */
  clip-path: polygon(
    1% 38%, 5% 18%, 14% 22%, 28% 8%, 42% 18%, 58% 6%, 72% 22%, 86% 12%, 96% 26%, 99% 60%,
    96% 82%, 86% 92%, 70% 86%, 54% 96%, 38% 88%, 22% 94%, 8% 82%, 2% 70%
  );
  box-shadow:
    inset 0 8px 24px rgba(0, 0, 0, 0.35),
    0 24px 60px -20px rgba(0, 0, 0, 0.55);
  /* Subtle paint texture */
  background-image:
    radial-gradient(80% 40% at 20% 30%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(60% 50% at 80% 70%, rgba(0,0,0,0.18), transparent 70%);
}
.v3-signature__script {
  position: relative;
  z-index: 2;
  font-family: var(--v3-font-script);
  font-size: clamp(72px, 14vw, 168px);
  line-height: 0.85;
  color: var(--v3-champagne);
  letter-spacing: -0.01em;
  display: block;
  transform: translateX(-2%) translateY(8%);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.v3-signature__serif {
  position: relative;
  z-index: 2;
  display: block;
  font-family: var(--v3-font-display);
  font-weight: 500;
  font-size: clamp(28px, 4.5vw, 56px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--v3-cream);
  text-align: center;
  margin-top: -10px;
  padding-right: 4px; /* compensate for letter-spacing on last letter */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.v3-signature__cap {
  position: absolute;
  right: 4%;
  top: 36%;
  z-index: 3;
  width: clamp(28px, 4.5vw, 56px);
  color: var(--v3-champagne);
  transform: rotate(-6deg);
}
.v3-signature__sub {
  position: relative;
  z-index: 2;
  display: block;
  text-align: center;
  margin-top: 14px;
  font-family: var(--v3-font-body);
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--v3-champagne);
}

/* Hero meta block — mirrors the flyer's top-left stack
   "CLASS OF / 2026 / ♦ / Conroe High School / CONROE, TEXAS" */
.v3-hero__year {
  font-family: var(--v3-font-display);
  font-weight: 500;
  font-size: clamp(72px, 12vw, 148px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--v3-cream);
  margin: 6px 0 2px;
}
.v3-hero__school {
  font-family: var(--v3-font-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--v3-cream);
  letter-spacing: 0.02em;
}
.v3-hero__city {
  font-family: var(--v3-font-body);
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255, 247, 236, 0.85);
  margin-top: 6px;
}
.v3-diamond--stack { margin: 6px 0; }
.v3-diamond--chapter { margin-bottom: 14px; }

/* Spacing tweaks for hero motto + CTA — center the script motto under the
   signature block so it visually lines up with "Graduation Announcement"
   instead of pulling left-aligned in the column. */
.v3-body .v3-script-motto--hero {
  margin: 32px auto 0;
  max-width: 22ch;
  text-align: center;
}
/* Center the gold accent line under the centered motto so the whole block
   reads as one balanced unit instead of a centered motto with a left-pinned
   underline below it. */
.v3-body .v3-script-motto--hero::after {
  margin-left: auto;
  margin-right: auto;
}
.v3-hero__cta--spaced  { margin-top: 36px; }

/* Future page — centered hero head + soft photo wash */
.v3-page__head--center { margin: 0 auto var(--v3-r-6); text-align: center; }
.v3-page__head--center .v3-page__title,
.v3-page__head--center .v3-page__lede { margin-left: auto; margin-right: auto; }
.v3-cluster--wash { opacity: 0.7; }

/* Brand monogram in nav (the "LR · CLASS OF 2026" header lockup) */
.v3-mono__tag {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: rgba(255, 247, 236, 0.85);
  text-transform: uppercase;
}

/* Script motto — matches the cursive "the best stories…" block in the flyer */
.v3-script-motto {
  font-family: var(--v3-font-script);
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  color: var(--v3-cream);
  letter-spacing: 0.01em;
  margin: 0;
}
.v3-script-motto em {
  font-style: normal;
  color: var(--v3-champagne);
}
.v3-script-motto::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--v3-champagne);
  margin-top: 16px;
}

/* ---------------------------------------------------- Celebration / Event */
/* Formal invitation block on the home page presenting the actual graduation
   ceremony details. Sits between the divider quote and the gateway grid so
   visitors who came specifically for the announcement see when/where without
   diving into the chapters. */
.v3-celebration {
  position: relative;
  padding: clamp(80px, 14vw, 160px) clamp(20px, 6vw, 80px);
  background:
    linear-gradient(180deg, rgba(7, 9, 20, 0) 0%, rgba(17, 22, 42, 0.55) 50%, rgba(7, 9, 20, 0) 100%);
  text-align: center;
}
.v3-celebration::before,
.v3-celebration::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(160px, 30vw, 280px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--v3-champagne), transparent);
  opacity: 0.35;
}
.v3-celebration::before { top: 0; }
.v3-celebration::after  { bottom: 0; }

.v3-celebration__inner {
  max-width: 720px;
  margin: 0 auto;
}

.v3-celebration__title {
  font-family: var(--v3-font-display);
  font-size: clamp(40px, 7vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--v3-cream);
  margin: 22px 0 18px;
}
.v3-celebration__title em {
  font-style: italic;
  color: var(--v3-champagne);
}

.v3-body .v3-celebration__lede {
  font-family: var(--v3-font-display);
  font-style: italic;
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.55;
  color: rgba(255, 247, 236, 0.78);
  margin: 0 auto clamp(40px, 6vw, 64px);
  text-align: center;
  text-wrap: balance;
  /* Break out of the 720px .v3-celebration__inner cap so the full sentence
     can fit on a single line on desktop. Falls back to a balanced 2-line
     wrap on narrower viewports. */
  max-width: min(96vw, 1080px);
  width: max-content;
}

.v3-celebration__details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  border-top: 1px solid rgba(201, 167, 92, 0.22);
  border-bottom: 1px solid rgba(201, 167, 92, 0.22);
  padding: clamp(32px, 5vw, 48px) clamp(8px, 2vw, 24px);
  margin-bottom: clamp(36px, 5vw, 56px);
  text-align: center;
}
@media (min-width: 720px) {
  .v3-celebration__details {
    grid-template-columns: 1fr 1fr;
    gap: 36px 56px;
  }
  .v3-celebration__row--wide {
    grid-column: 1 / -1;
  }
}

.v3-celebration__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.v3-celebration__label {
  font-family: var(--v3-font-body);
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--v3-champagne);
  font-weight: 500;
}

.v3-celebration__value {
  font-family: var(--v3-font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  color: var(--v3-cream);
  letter-spacing: 0.01em;
}
.v3-celebration__value--small {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.5;
  font-style: italic;
  color: rgba(255, 247, 236, 0.86);
}

/* --------------------------------------------------------------- Ornaments */
.v3-diamond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--v3-champagne);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-family: var(--v3-font-body);
}
.v3-diamond::before,
.v3-diamond::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--v3-champagne);
}
.v3-diamond__mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--v3-champagne);
  transform: rotate(45deg);
}

.v3-leaf {
  display: inline-block;
  color: var(--v3-champagne);
  opacity: 0.75;
  width: clamp(40px, 6vw, 64px);
  height: auto;
}
.v3-leaf--xl {
  width: clamp(90px, 13vw, 160px);
}
.v3-leaf--corner {
  position: absolute;
  left: -3vw;
  bottom: -3vh;
  z-index: 0;
  opacity: 0.22;
  transform: rotate(-12deg);
  pointer-events: none;
}

.v3-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 22px;
  color: rgba(255, 247, 236, 0.85);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.v3-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.v3-hero__meta span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v3-champagne);
  display: inline-block;
}

.v3-hero__motto {
  margin-top: var(--v3-r-5);
  max-width: 24ch;
  font-family: var(--v3-font-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.35;
  color: var(--v3-cream);
}
.v3-hero__motto::before {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--v3-champagne);
  margin-bottom: 18px;
}

.v3-hero__cta {
  margin-top: var(--v3-r-5);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Bumped specificity (a.v3-btn / button.v3-btn) so the global .v3-body a color
   rule cannot win and make the button label invisible. */
.v3-body a.v3-btn,
.v3-body button.v3-btn,
a.v3-btn,
button.v3-btn,
.v3-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--v3-champagne);
  color: var(--v3-ink);
  background: var(--v3-champagne);
  font-weight: 600;
  transition: 
    transform var(--v3-dur-fast) var(--v3-ease),
    background var(--v3-dur-fast) var(--v3-ease),
    color var(--v3-dur-fast) var(--v3-ease),
    border-color var(--v3-dur-fast) var(--v3-ease);
}
.v3-body a.v3-btn:hover,
.v3-body button.v3-btn:hover,
a.v3-btn:hover,
button.v3-btn:hover,
.v3-btn:hover {
  transform: translateY(-2px);
  background: var(--v3-cream);
  border-color: var(--v3-cream);
  color: var(--v3-ink);
}
.v3-btn .v3-btn__arrow { transition: transform var(--v3-dur-fast) var(--v3-ease); }
.v3-btn:hover .v3-btn__arrow { transform: translateX(4px); }

.v3-body a.v3-btn--ghost,
.v3-body button.v3-btn--ghost,
a.v3-btn--ghost,
button.v3-btn--ghost,
.v3-btn--ghost {
  background: transparent;
  color: var(--v3-cream);
}
.v3-body a.v3-btn--ghost:hover,
.v3-body button.v3-btn--ghost:hover,
a.v3-btn--ghost:hover,
button.v3-btn--ghost:hover,
.v3-btn--ghost:hover {
  background: rgba(255, 247, 236, 0.08);
  color: var(--v3-cream);
  border-color: var(--v3-cream);
}

/* Hero photo collage */
.v3-hero__collage {
  position: relative;
  aspect-ratio: 5 / 6;
  width: 100%;
}
.v3-hero__photo {
  position: absolute;
  border-radius: var(--v3-radius-lg);
  overflow: hidden;
  box-shadow: var(--v3-shadow);
  background: var(--v3-ink-2);
  border: 1px solid var(--v3-line);
}
.v3-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v3-hero__photo--1 { top: 0;    left: 18%; width: 64%; aspect-ratio: 4 / 5; transform: rotate(-2deg); animation: v3-float 12s ease-in-out infinite alternate; }
.v3-hero__photo--2 { top: 22%;  left: -6%; width: 46%; aspect-ratio: 4 / 5; transform: rotate(-6deg); animation: v3-float 14s ease-in-out -2s infinite alternate-reverse; }
.v3-hero__photo--3 { top: 52%;  right: -2%; width: 44%; aspect-ratio: 1 / 1; transform: rotate(4deg);  animation: v3-float 16s ease-in-out -4s infinite alternate; }
.v3-hero__photo--4 { bottom: 0; left: 24%; width: 50%; aspect-ratio: 5 / 4; transform: rotate(-3deg); animation: v3-float 18s ease-in-out -1s infinite alternate-reverse; }
.v3-hero__photo--5 { top: 8%;   right: 0;  width: 32%; aspect-ratio: 3 / 4; transform: rotate(5deg);  animation: v3-float 13s ease-in-out -3s infinite alternate; }

@keyframes v3-float {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
  100% { transform: translate3d(0, -10px, 0) rotate(calc(var(--rot, 0deg) + 1deg)); }
}

.v3-hero__scrollcue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 247, 236, 0.55);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0;
  animation: v3-fade-up 1s var(--v3-ease-out) 2.4s forwards;
}
.v3-hero__scrollcue::after {
  content: "";
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--v3-champagne));
  animation: v3-scrollline 2s ease-in-out infinite;
}
@keyframes v3-scrollline {
  0%, 100% { transform: scaleY(0.6); transform-origin: top; opacity: 0.3; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* --------------------------------------------------------------- Chapter gateway */
.v3-gateway {
  position: relative;
  padding: var(--v3-r-7) clamp(20px, 5vw, 56px);
  max-width: 1320px;
  margin: 0 auto;
}
.v3-gateway__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: var(--v3-r-5);
}
.v3-gateway__title {
  font-size: clamp(32px, 4vw, 48px);
  font-style: italic;
  max-width: 22ch;
  text-wrap: balance;
}
.v3-gateway__sub {
  color: rgba(255, 247, 236, 0.85);
  max-width: 56ch;
  font-size: 14px;
  line-height: 1.7;
}

.v3-gateway__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--v3-r-4);
}

.v3-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  padding: 24px;
  border-radius: var(--v3-radius-lg);
  background: var(--v3-ink-2);
  border: 1px solid var(--v3-line-soft);
  overflow: hidden;
  text-decoration: none;
  color: var(--v3-cream);
  transition: transform var(--v3-dur) var(--v3-ease), border-color var(--v3-dur) var(--v3-ease);
  isolation: isolate;
}
.v3-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 9, 20, 0) 0%, rgba(7, 9, 20, 0.55) 55%, rgba(7, 9, 20, 0.92) 100%);
  z-index: 1;
  transition: opacity var(--v3-dur) var(--v3-ease);
}
.v3-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1.2s var(--v3-ease-out);
  z-index: 0;
}
.v3-card:hover { transform: translateY(-4px); border-color: var(--v3-line); }
.v3-card:hover .v3-card__bg { transform: scale(1.04); }

.v3-card__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v3-card__eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--v3-champagne);
}
.v3-card__title {
  font-family: var(--v3-font-display);
  font-size: 30px;
  line-height: 1.05;
  font-style: italic;
}
.v3-card__sub {
  margin-top: 10px;
  color: rgba(255, 247, 236, 0.85);
  font-size: 13px;
  line-height: 1.6;
}
.v3-card__arrow {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--v3-cream);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: gap var(--v3-dur-fast) var(--v3-ease);
}
.v3-card:hover .v3-card__arrow { gap: 14px; }

/* --------------------------------------------------------------- Section divider quote */
.v3-divider {
  text-align: center;
  padding: var(--v3-r-7) 24px;
  max-width: 800px;
  margin: 0 auto;
}
.v3-divider__quote {
  font-family: var(--v3-font-display);
  font-style: italic;
  font-size: clamp(24px, 3.2vw, 36px);
  color: var(--v3-cream);
  line-height: 1.4;
}
.v3-divider__quote::before,
.v3-divider__quote::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--v3-champagne);
  margin: 18px auto;
}

/* --------------------------------------------------------------- Story */
.v3-story-prologue {
  max-width: 760px;
  margin: 0 auto var(--v3-r-7);
  text-align: center;
}
.v3-story-prologue p {
  margin-top: 22px;
  color: rgba(255, 247, 236, 0.85);
  font-size: 17px;
  line-height: 1.8;
}

.v3-chapter {
  position: relative;
  padding: var(--v3-r-7) 0;
  border-top: 1px solid var(--v3-line-soft);
}
.v3-chapter:first-of-type { border-top: 0; }

.v3-chapter__head {
  max-width: 720px;
  margin-bottom: var(--v3-r-5);
}
.v3-chapter__title {
  font-size: clamp(36px, 5vw, 64px);
  font-style: italic;
  margin-top: 12px;
}
.v3-chapter__quote {
  margin-top: 18px;
  color: rgba(255, 247, 236, 0.85);
  font-size: 17px;
  line-height: 1.7;
  max-width: 52ch;
}

.v3-cluster {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.v3-cluster__cell {
  position: relative;
  border-radius: var(--v3-radius);
  overflow: hidden;
  /* Skip rendering offscreen photo cells. Massively reduces paint work on the
     long photo walls so the compositor doesn't stall while images decode. */
  content-visibility: auto;
  contain-intrinsic-size: 400px;
  background: var(--v3-ink-2);
  border: 1px solid var(--v3-line-soft);
  cursor: zoom-in;
  transition: transform var(--v3-dur) var(--v3-ease), border-color var(--v3-dur) var(--v3-ease);
  aspect-ratio: 4 / 5;
}
.v3-cluster__cell:hover {
  transform: translateY(-3px);
  border-color: var(--v3-line);
}
.v3-cluster__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--v3-ease-out);
}
.v3-cluster__cell:hover img { transform: scale(1.03); }

/* Cluster size variants — generates the "scrapbook" feel without chaos */
.v3-cluster__cell:nth-child(7n+1) { grid-column: span 6; aspect-ratio: 4 / 5; }
.v3-cluster__cell:nth-child(7n+2) { grid-column: span 6; aspect-ratio: 4 / 5; }
.v3-cluster__cell:nth-child(7n+3) { grid-column: span 4; aspect-ratio: 1 / 1; }
.v3-cluster__cell:nth-child(7n+4) { grid-column: span 4; aspect-ratio: 1 / 1; }
.v3-cluster__cell:nth-child(7n+5) { grid-column: span 4; aspect-ratio: 1 / 1; }
.v3-cluster__cell:nth-child(7n+6) { grid-column: span 7; aspect-ratio: 5 / 4; }
.v3-cluster__cell:nth-child(7n+7) { grid-column: span 5; aspect-ratio: 4 / 5; }

@media (max-width: 720px) {
  .v3-cluster { grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .v3-cluster__cell:nth-child(7n+1),
  .v3-cluster__cell:nth-child(7n+2),
  .v3-cluster__cell:nth-child(7n+6) { grid-column: span 6; }
  .v3-cluster__cell:nth-child(7n+3),
  .v3-cluster__cell:nth-child(7n+4),
  .v3-cluster__cell:nth-child(7n+5),
  .v3-cluster__cell:nth-child(7n+7) { grid-column: span 3; aspect-ratio: 1 / 1; }
}

/* --------------------------------------------------------------- Chapter transition CTA */
.v3-next {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--v3-r-7) 24px;
  text-align: center;
  gap: 16px;
}
.v3-next__label {
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 247, 236, 0.85);
}
.v3-next__title {
  font-family: var(--v3-font-display);
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 44px);
}

/* --------------------------------------------------------------- Mini music bar */
.v3-mini {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px 12px 18px;
  border-radius: 999px;
  background: rgba(7, 9, 20, 0.78);
  border: 1px solid var(--v3-line);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  color: var(--v3-cream);
  box-shadow: var(--v3-shadow-soft);
  transform: translateY(120%);
  opacity: 0;
  transition: transform var(--v3-dur) var(--v3-ease-out), opacity var(--v3-dur) var(--v3-ease-out);
}
.v3-mini.is-visible { transform: translateY(0); opacity: 1; }
.v3-mini__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 247, 236, 0.85);
}
.v3-mini__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v3-champagne);
  box-shadow: 0 0 0 0 rgba(215, 180, 106, 0.6);
  animation: v3-pulse 2.4s ease-in-out infinite;
}
@keyframes v3-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(215, 180, 106, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(215, 180, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(215, 180, 106, 0); }
}
.v3-mini__link {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--v3-champagne);
  color: var(--v3-ink);
  font-weight: 600;
  transition: background var(--v3-dur-fast) var(--v3-ease), color var(--v3-dur-fast) var(--v3-ease);
}
.v3-body .v3-mini__link,
.v3-body .v3-mini__link:hover,
.v3-body .v3-mini__link:focus { color: var(--v3-ink); }
.v3-body .v3-mini__link:hover { background: var(--v3-cream); }

@media (min-width: 720px) {
  .v3-mini { left: auto; right: 24px; bottom: 24px; }
}

/* --------------------------------------------------------------- Footer */
.v3-footer {
  position: relative;
  z-index: 1;
  padding: var(--v3-r-7) clamp(20px, 5vw, 56px) calc(var(--v3-r-6) + 60px);
  border-top: 1px solid var(--v3-line-soft);
  background: linear-gradient(180deg, var(--v3-night) 0%, #050610 100%);
  text-align: center;
}
.v3-footer__motto {
  font-family: var(--v3-font-display);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 24px);
  color: rgba(255, 247, 236, 0.85);
}
.v3-footer__meta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 28px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 247, 236, 0.55);
}
.v3-footer__meta a { color: rgba(255, 247, 236, 0.85); }
.v3-footer__meta a:hover { color: var(--v3-cream); }

/* --------------------------------------------------------------- Reveal-on-scroll */
/* Note: deliberately NO global will-change here. Applying will-change to dozens
   of reveal elements at once forces a GPU layer per element, which stalls the
   compositor on photo-heavy pages (the "page froze + white flash + photos
   shifted" bug). The transition alone handles its own optimization. */
.v3-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--v3-dur-slow) var(--v3-ease-out), transform var(--v3-dur-slow) var(--v3-ease-out);
}
.v3-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.v3-reveal[data-delay="1"] { transition-delay: 80ms; }
.v3-reveal[data-delay="2"] { transition-delay: 160ms; }
.v3-reveal[data-delay="3"] { transition-delay: 240ms; }
.v3-reveal[data-delay="4"] { transition-delay: 320ms; }
.v3-reveal[data-delay="5"] { transition-delay: 400ms; }
.v3-reveal[data-delay="6"] { transition-delay: 480ms; }

/* --------------------------------------------------------------- Lightbox */
.v3-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(7, 9, 20, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity var(--v3-dur) var(--v3-ease);
}
.v3-lightbox.is-open {
  display: flex;
  opacity: 1;
}
.v3-lightbox__img {
  max-width: min(96vw, 1200px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--v3-radius);
  box-shadow: var(--v3-shadow);
}
.v3-lightbox__close,
.v3-lightbox__prev,
.v3-lightbox__next {
  position: absolute;
  background: rgba(255, 247, 236, 0.06);
  border: 1px solid var(--v3-line-soft);
  color: var(--v3-cream);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background var(--v3-dur-fast) var(--v3-ease);
}
.v3-lightbox__close { top: 20px; right: 20px; }
.v3-lightbox__prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.v3-lightbox__next  { right: 20px; top: 50%; transform: translateY(-50%); }
.v3-lightbox__close:hover,
.v3-lightbox__prev:hover,
.v3-lightbox__next:hover { background: var(--v3-champagne); color: var(--v3-ink); }

/* --------------------------------------------------------------- Responsive */
@media (max-width: 880px) {
  .v3-hero__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .v3-hero__collage {
    order: -1;
    max-width: 420px;
    margin: 0 auto;
  }
  .v3-gateway__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .v3-hero__photo { animation: none !important; }
  .v3-atmosphere__glow { animation: none !important; }
  .v3-particles { display: none; }
  .v3-reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------- Simple chapter placeholder pages
   Used by Phase-2 routes until full bodies land. Keeps shell consistent. */
.v3-placeholder {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--v3-r-7) 24px;
}
.v3-placeholder p {
  color: rgba(255, 247, 236, 0.85);
  font-size: 17px;
  line-height: 1.7;
  margin-top: 20px;
}

/* ============================================================================
   PHASE 2 — Chapter pages
   ========================================================================== */

/* --------------------------------------------------------------- Conroe */
.v3-conroe-hero {
  position: relative;
  padding: 140px clamp(20px, 5vw, 56px) var(--v3-r-6);
  max-width: 1280px;
  margin: 0 auto;
}
.v3-conroe-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.v3-conroe-hero__copy { position: relative; z-index: 2; }
.v3-conroe-hero__title {
  font-family: var(--v3-font-display);
  font-size: clamp(56px, 9vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--v3-cream);
  margin: 14px 0 18px;
}
.v3-conroe-hero__title em {
  font-style: italic;
  color: var(--v3-champagne);
}
.v3-conroe-hero__lockup {
  font-family: var(--v3-font-body);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 247, 236, 0.85);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 18px;
}
.v3-conroe-hero__lockup span { display: inline-flex; align-items: center; gap: 12px; }
.v3-conroe-hero__lockup span + span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--v3-champagne);
  transform: rotate(45deg);
  margin-right: 8px;
}
.v3-conroe-hero__motto {
  margin-top: var(--v3-r-5);
  font-family: var(--v3-font-script);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  color: var(--v3-champagne);
  max-width: 18ch;
}
.v3-conroe-hero__motto::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--v3-champagne);
  margin-top: 14px;
}

.v3-conroe-hero__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--v3-radius-lg);
  overflow: hidden;
  background: var(--v3-ink-2);
  border: 1px solid var(--v3-line);
  box-shadow: var(--v3-shadow);
  isolation: isolate;
}
.v3-conroe-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.8s var(--v3-ease-out);
}
.v3-conroe-hero__portrait:hover img { transform: scale(1.03); }
.v3-conroe-hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10, 14, 28, 0.5) 100%);
  pointer-events: none;
}

.v3-conroe-journey {
  padding: var(--v3-r-7) clamp(20px, 5vw, 56px);
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.v3-conroe-journey__title {
  font-family: var(--v3-font-display);
  font-style: italic;
  font-size: clamp(32px, 4.5vw, 52px);
  margin-bottom: var(--v3-r-5);
}
.v3-conroe-journey__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.v3-conroe-journey__cell {
  padding: 28px 22px;
  border: 1px solid var(--v3-line-soft);
  border-radius: var(--v3-radius);
  background: rgba(23, 29, 51, 0.45);
  text-align: left;
}
.v3-conroe-journey__year {
  font-family: var(--v3-font-display);
  font-size: 32px;
  color: var(--v3-champagne);
  display: block;
  margin-bottom: 8px;
}
.v3-conroe-journey__label {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 247, 236, 0.85);
  display: block;
  margin-bottom: 10px;
}
.v3-conroe-journey__copy {
  color: var(--v3-cream);
  font-family: var(--v3-font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
}

.v3-conroe-wall {
  padding: var(--v3-r-7) clamp(20px, 5vw, 56px);
  max-width: 1280px;
  margin: 0 auto;
}
.v3-conroe-wall__head {
  text-align: center;
  margin-bottom: var(--v3-r-5);
}

@media (max-width: 880px) {
  .v3-conroe-hero__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .v3-conroe-hero__portrait { order: -1; max-width: 440px; margin: 0 auto; }
}

/* --------------------------------------------------------------- Music */
.v3-music {
  position: relative;
  padding: 120px clamp(20px, 5vw, 56px) var(--v3-r-7);
  max-width: 1100px;
  margin: 0 auto;
}
.v3-music__head {
  text-align: center;
  margin-bottom: var(--v3-r-5);
}
.v3-music__title {
  font-family: var(--v3-font-display);
  font-style: italic;
  font-size: clamp(48px, 7vw, 88px);
  margin: 14px 0 18px;
}
.v3-music__lede {
  max-width: 56ch;
  margin: 0 auto;
  color: rgba(255, 247, 236, 0.85);
  font-size: 17px;
  line-height: 1.8;
}

/* Sound-wave divider — thin gold lines that pulse */
.v3-soundwave {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 6px;
  height: 60px;
  margin: var(--v3-r-5) auto;
}
.v3-soundwave span {
  display: block;
  width: 3px;
  background: var(--v3-champagne);
  border-radius: 2px;
  opacity: 0.6;
  animation: v3-soundwave 2.4s ease-in-out infinite;
}
.v3-soundwave span:nth-child(1)  { animation-delay: -2.4s; }
.v3-soundwave span:nth-child(2)  { animation-delay: -2.2s; }
.v3-soundwave span:nth-child(3)  { animation-delay: -2.0s; }
.v3-soundwave span:nth-child(4)  { animation-delay: -1.8s; }
.v3-soundwave span:nth-child(5)  { animation-delay: -1.6s; }
.v3-soundwave span:nth-child(6)  { animation-delay: -1.4s; }
.v3-soundwave span:nth-child(7)  { animation-delay: -1.2s; }
.v3-soundwave span:nth-child(8)  { animation-delay: -1.0s; }
.v3-soundwave span:nth-child(9)  { animation-delay: -0.8s; }
.v3-soundwave span:nth-child(10) { animation-delay: -0.6s; }
.v3-soundwave span:nth-child(11) { animation-delay: -0.4s; }
.v3-soundwave span:nth-child(12) { animation-delay: -0.2s; }
@keyframes v3-soundwave {
  0%, 100% { height: 8px;  opacity: 0.35; }
  50%      { height: 48px; opacity: 0.9; }
}

/* Isolated Spotify embed frame — fixed height, never moves the page */
.v3-music-frame {
  position: relative;
  margin: var(--v3-r-6) auto;
  max-width: 760px;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius-lg);
  overflow: hidden;
  background: var(--v3-navy-deep);
  box-shadow: var(--v3-shadow);
  isolation: isolate;
  /* fixed height so the iframe never causes scroll jumps */
  height: 380px;
}
.v3-music-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Personality strip — 3 photos */
.v3-music-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: var(--v3-r-6);
}
.v3-music-strip__cell {
  aspect-ratio: 4 / 5;
  border-radius: var(--v3-radius);
  overflow: hidden;
  border: 1px solid var(--v3-line-soft);
  cursor: zoom-in;
  transition: transform var(--v3-dur) var(--v3-ease);
}
.v3-music-strip__cell img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--v3-ease-out);
}
.v3-music-strip__cell:hover { transform: translateY(-3px); }
.v3-music-strip__cell:hover img { transform: scale(1.04); }

/* --------------------------------------------------------------- Blinn */
.v3-blinn {
  position: relative;
  padding: 140px clamp(20px, 5vw, 56px) 0;
  overflow: hidden;
}
/* Lighter, forward-looking palette wash */
.v3-blinn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(80vmax 60vmax at 80% 0%, rgba(201, 167, 92, 0.22), transparent 60%),
    radial-gradient(60vmax 40vmax at 10% 30%, rgba(255, 247, 236, 0.06), transparent 65%);
  pointer-events: none;
}
.v3-blinn__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.v3-blinn__title {
  font-family: var(--v3-font-display);
  font-size: clamp(56px, 9vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--v3-cream);
  margin: 14px 0 18px;
}
.v3-blinn__title em { font-style: italic; color: var(--v3-champagne); }
.v3-blinn__lede {
  max-width: 48ch;
  color: rgba(255, 247, 236, 0.85);
  font-size: 18px;
  line-height: 1.8;
}
.v3-blinn__motto {
  margin-top: var(--v3-r-5);
  font-family: var(--v3-font-script);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  color: var(--v3-cream);
  max-width: 22ch;
}
.v3-blinn__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--v3-radius-lg);
  overflow: hidden;
  border: 1px solid var(--v3-line);
  box-shadow: var(--v3-shadow);
}
.v3-blinn__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Road animation — drawn SVG path that strokes-in on scroll */
.v3-road {
  position: relative;
  padding: var(--v3-r-7) clamp(20px, 5vw, 56px);
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.v3-road__svg {
  display: block;
  width: 100%;
  height: clamp(120px, 18vw, 220px);
  margin: 0 auto;
  color: var(--v3-champagne);
}
.v3-road__svg .v3-road__path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 3s var(--v3-ease-out);
}
.v3-road.is-in .v3-road__svg .v3-road__path { stroke-dashoffset: 0; }
.v3-road__dot {
  fill: currentColor;
  opacity: 0;
  transition: opacity 1s var(--v3-ease-out) 2.6s;
}
.v3-road.is-in .v3-road__svg .v3-road__dot { opacity: 1; }

/* Three forward cards */
.v3-blinn-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  padding: 0 clamp(20px, 5vw, 56px) var(--v3-r-7);
  max-width: 1280px;
  margin: 0 auto;
}
.v3-blinn-card {
  padding: 32px 26px;
  border: 1px solid var(--v3-line-soft);
  border-radius: var(--v3-radius-lg);
  background: rgba(23, 29, 51, 0.5);
  text-align: left;
}
.v3-blinn-card__num {
  font-family: var(--v3-font-display);
  font-size: 44px;
  color: var(--v3-champagne);
  display: block;
  margin-bottom: 10px;
  line-height: 1;
}
.v3-blinn-card__title {
  font-family: var(--v3-font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--v3-cream);
  margin-bottom: 10px;
}
.v3-blinn-card__copy {
  color: rgba(255, 247, 236, 0.85);
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 880px) {
  .v3-blinn__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .v3-blinn__photo { order: -1; max-width: 440px; margin: 0 auto; }
}

/* --------------------------------------------------------------- Future */
.v3-future {
  position: relative;
  min-height: 100vh;
  padding: 160px clamp(20px, 5vw, 56px) var(--v3-r-8);
  overflow: hidden;
}
/* Memory wash — photos as soft drifting background */
.v3-future__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.v3-future__wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 28, 0.78) 0%, rgba(10, 14, 28, 0.9) 60%, var(--v3-night) 100%);
}
.v3-future__wash-grid {
  position: absolute;
  inset: -2% -2% -2% -2%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 14vh;
  gap: 8px;
  opacity: 0.22;
  filter: blur(0.5px);
  animation: v3-wash-drift 60s ease-in-out infinite alternate;
}
.v3-future__wash-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes v3-wash-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-4%, -8%, 0) scale(1.06); }
}

.v3-future__inner {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.v3-future__eyebrow { display: inline-block; }
.v3-future__title {
  font-family: var(--v3-font-display);
  font-style: italic;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.05;
  color: var(--v3-cream);
  margin: 22px 0 22px;
}
.v3-future__title em { color: var(--v3-champagne); font-style: italic; }
.v3-future__motto {
  font-family: var(--v3-font-script);
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.15;
  color: var(--v3-champagne);
  margin: var(--v3-r-5) auto;
  max-width: min(96vw, 1100px);
  text-align: center;
  text-wrap: balance;
}
.v3-future__motto::before,
.v3-future__motto::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  background: var(--v3-champagne);
  margin: 20px auto;
}
.v3-body .v3-future__copy {
  color: rgba(255, 247, 236, 0.85);
  font-size: 17px;
  line-height: 1.8;
  max-width: 56ch;
  margin: 0 auto;
  text-wrap: pretty;
}
.v3-future__cta {
  margin-top: var(--v3-r-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ============================================================================
   PHASE 3 — Guestbook (Sign the Keepsake)
   ========================================================================== */

.v3-guestbook {
  position: relative;
  padding: 140px clamp(20px, 5vw, 56px) 0;
  max-width: 1180px;
  margin: 0 auto;
}
.v3-guestbook__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--v3-r-6);
}
.v3-guestbook__title {
  font-family: var(--v3-font-display);
  font-style: italic;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1.02;
  margin: 14px 0 18px;
}
.v3-guestbook__lede {
  color: rgba(255, 247, 236, 0.85);
  font-size: 17px;
  line-height: 1.8;
}

/* The "card" containing the form — feels like a piece of stationery */
.v3-keepsake-form {
  position: relative;
  max-width: 760px;
  margin: 0 auto var(--v3-r-7);
  padding: clamp(28px, 4vw, 44px);
  background: linear-gradient(180deg, rgba(247, 234, 216, 0.06), rgba(255, 247, 236, 0.02));
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius-lg);
  box-shadow: var(--v3-shadow);
  isolation: isolate;
}
.v3-keepsake-form::before {
  /* gold corner flourish */
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 64px; height: 64px;
  border-top: 1px solid var(--v3-champagne);
  border-left: 1px solid var(--v3-champagne);
  border-top-left-radius: var(--v3-radius-lg);
  pointer-events: none;
}
.v3-keepsake-form::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 64px; height: 64px;
  border-bottom: 1px solid var(--v3-champagne);
  border-right: 1px solid var(--v3-champagne);
  border-bottom-right-radius: var(--v3-radius-lg);
  pointer-events: none;
}
.v3-keepsake-form__invite {
  font-family: var(--v3-font-script);
  font-size: clamp(24px, 3.4vw, 34px);
  color: var(--v3-champagne);
  text-align: center;
  margin-bottom: 22px;
}
.v3-keepsake-form__invite::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--v3-champagne);
  margin: 10px auto 0;
}

/* Form fields */
.v3-field {
  display: block;
  margin-bottom: 18px;
}
.v3-field__label {
  display: block;
  font-family: var(--v3-font-body);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 247, 236, 0.85);
  margin-bottom: 8px;
}
.v3-input,
.v3-textarea {
  width: 100%;
  background: rgba(7, 9, 20, 0.6);
  border: 1px solid var(--v3-line-soft);
  border-radius: var(--v3-radius);
  color: var(--v3-cream);
  font-family: var(--v3-font-body);
  font-size: 16px;
  line-height: 1.6;
  padding: 14px 16px;
  transition: 
    border-color var(--v3-dur-fast) var(--v3-ease),
    background var(--v3-dur-fast) var(--v3-ease);
}
.v3-textarea { resize: vertical; min-height: 140px; font-family: var(--v3-font-display); font-style: italic; }
.v3-input:focus,
.v3-textarea:focus {
  outline: none;
  border-color: var(--v3-champagne);
  background: rgba(7, 9, 20, 0.8);
}
.v3-input::placeholder,
.v3-textarea::placeholder { color: rgba(255, 247, 236, 0.55); font-style: italic; }

/* Honeypot — hidden from real users, visible to bots */
.v3-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* File input — custom-styled label, native input visually hidden */
.v3-file {
  display: block;
  margin-bottom: 18px;
}
.v3-file input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.v3-file-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 1px dashed var(--v3-line);
  border-radius: var(--v3-radius);
  background: rgba(7, 9, 20, 0.45);
  cursor: pointer;
  color: var(--v3-cream);
  font-size: 13px;
  transition: border-color var(--v3-dur-fast) var(--v3-ease), background var(--v3-dur-fast) var(--v3-ease);
}
.v3-file-label:hover,
.v3-file input[type="file"]:focus + .v3-file-label {
  border-color: var(--v3-champagne);
  background: rgba(7, 9, 20, 0.7);
}
.v3-file-label__icon {
  width: 18px; height: 18px;
  color: var(--v3-champagne);
  flex-shrink: 0;
}
.v3-file-label__text {
  font-family: var(--v3-font-body);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 247, 236, 0.85);
}

/* Turnstile container */
.v3-turnstile-wrap {
  margin: 22px 0 18px;
  display: flex;
  justify-content: center;
}
.v3-turnstile-note {
  margin: 18px 0;
  padding: 14px 18px;
  border: 1px dashed var(--v3-line-soft);
  border-radius: var(--v3-radius);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 247, 236, 0.55);
}
.v3-turnstile-fallback {
  padding: 14px 18px;
  border: 1px solid rgba(232, 109, 109, 0.4);
  background: rgba(232, 109, 109, 0.08);
  color: #f4b8b8;
  border-radius: var(--v3-radius);
  font-size: 13px;
  text-align: center;
  margin: 18px 0;
}

/* Submit row */
.v3-submit-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
}

/* Form status */
.v3-form-status {
  display: none;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--v3-radius);
  font-size: 14px;
  text-align: center;
  border: 1px solid transparent;
}
.v3-form-status--success {
  background: rgba(201, 167, 92, 0.12);
  border-color: var(--v3-champagne);
  color: var(--v3-cream);
}
.v3-form-status--error {
  background: rgba(232, 109, 109, 0.1);
  border-color: rgba(232, 109, 109, 0.5);
  color: #f4b8b8;
}

/* Loading state on submit */
.v3-btn.is-busy { opacity: 0.75; cursor: progress; }

/* Notes wall */
.v3-notes-wall {
  padding: var(--v3-r-7) clamp(20px, 5vw, 56px);
  max-width: 1180px;
  margin: 0 auto;
}
.v3-notes-wall__head {
  text-align: center;
  margin-bottom: var(--v3-r-5);
}
.v3-notes-wall__title {
  font-family: var(--v3-font-display);
  font-style: italic;
  font-size: clamp(32px, 4.5vw, 52px);
  margin-top: 14px;
}
.v3-notes-grid {
  column-count: 3;
  column-gap: 18px;
}
.v3-empty {
  text-align: center;
  color: rgba(255, 247, 236, 0.55);
  padding: 48px 24px;
  font-family: var(--v3-font-display);
  font-style: italic;
  font-size: 18px;
}

/* Individual note card — paper/glass */
.v3-note {
  break-inside: avoid;
  margin: 0 0 18px;
  padding: 22px 22px 18px;
  background: linear-gradient(160deg, rgba(247, 234, 216, 0.08) 0%, rgba(255, 247, 236, 0.02) 100%);
  border: 1px solid var(--v3-line-soft);
  border-radius: var(--v3-radius);
  box-shadow: var(--v3-shadow-soft);
}
.v3-note__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  gap: 12px;
}
.v3-note__name {
  font-family: var(--v3-font-display);
  font-size: 20px;
  color: var(--v3-champagne);
  font-style: italic;
}
.v3-note__date {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 247, 236, 0.55);
}
.v3-note__body {
  font-family: var(--v3-font-display);
  font-style: italic;
  color: var(--v3-cream);
  font-size: 17px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.v3-note__photo {
  margin-top: 14px;
  width: 100%;
  border-radius: var(--v3-radius-sm);
  display: block;
}

@media (max-width: 880px) { .v3-notes-grid { column-count: 2; } }
@media (max-width: 600px) { .v3-notes-grid { column-count: 1; } }

/* Video letter section */
.v3-video-section {
  padding: var(--v3-r-7) clamp(20px, 5vw, 56px);
  max-width: 1180px;
  margin: 0 auto;
}
.v3-video-section__head { text-align: center; margin-bottom: var(--v3-r-5); }
.v3-videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.v3-vid {
  border: 1px solid var(--v3-line-soft);
  border-radius: var(--v3-radius);
  overflow: hidden;
  background: var(--v3-ink-2);
}
.v3-vid video { width: 100%; display: block; background: #000; }
.v3-vid__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 18px;
}
.v3-vid__name {
  font-family: var(--v3-font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--v3-champagne);
}
.v3-vid__date {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 247, 236, 0.55);
}

/* --------------------------------------------------------------- Mobile hero polish
   On narrow viewports the brushstroke clip-path can look truncated. Make it
   simpler and slightly taller so the script "Linley" reads cleanly. */
@media (max-width: 640px) {
  .v3-signature {
    padding: 26px 0 36px;
  }
  .v3-signature__brush {
    inset: 8% -8% 4% -8%;
    /* Simpler, more forgiving organic shape */
    clip-path: polygon(
      2% 32%, 8% 14%, 24% 18%, 42% 8%, 60% 14%, 78% 8%, 92% 22%, 98% 50%,
      94% 78%, 80% 90%, 60% 86%, 40% 94%, 20% 88%, 6% 78%
    );
  }
  .v3-signature__script {
    font-size: clamp(80px, 22vw, 120px);
    transform: translateX(0) translateY(6%);
  }
  .v3-signature__serif {
    font-size: clamp(22px, 6vw, 34px);
    letter-spacing: 0.28em;
  }
  .v3-signature__cap {
    right: 6%;
    top: 30%;
    width: clamp(24px, 8vw, 36px);
  }
  .v3-script-motto {
    font-size: clamp(28px, 9vw, 44px);
  }
  /* Tighten hero meta on phones */
  .v3-hero__year { font-size: clamp(64px, 18vw, 110px); }
  /* Hide the leaf flourish on very small screens — gives copy room to breathe */
  .v3-leaf--corner { display: none; }
}

.v3-prose-block{max-width:60ch;margin:0 auto 48px;text-align:center;}

.v3-road__path--dashed{stroke-dasharray:6 14;stroke-width:1;opacity:0.6;}
.v3-script-motto--road{text-align:center;margin:24px auto 0;max-width:24ch;}
.v3-music__lede--centered{text-align:center;margin-top:24px;}

.v3-guestbook__lede--centered{max-width:560px;margin:14px auto 0;}
.v3-videos-grid--spaced{margin-top:var(--v3-r-6);}