/* ============================================================
   parchment.css — standalone marketing pages
   Ported from src/landing_site/index.html (v23d–v24i page-view system)

   The design: a torn-parchment cutout (parchment_03_cut.png with
   transparent edges) floating in 3D-perspective space on a dark
   canvas, with a page-specific watermark video playing INSIDE the
   parchment via soft-light blend mode + radial-gradient mask so
   the video fades naturally into the paper fibres (not a rectangle).

   Text is multi-section, fades in on a timer, with ink-write-in
   clip-path animation per line. Section navigation via dot row.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Cormorant+Garamond:wght@300;400;500&family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@500;700;900&display=swap');

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

html { background: #0a0604; }

body {
  min-height: 100vh;
  background: #0a0604;
  color: #f5ead4;
  font-family: 'Cormorant Garamond', serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- ambient candlelit room ---------- */
.room {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 18% 86%, rgba(255, 178, 90, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 70% 80% at 82% 14%, rgba(150, 180, 200, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(40, 28, 18, 0.5) 0%, #0a0604 80%);
}

/* ---------- parchment wax seal ---------- */
/*
   Generated 2026-05-14 via Gemini 2.5 Flash Image (Nano Banana) with
   prompt asking for an oxblood-red wax disk with a luminous tree-of-life
   embossed in gold, period-imperfect edges, transparent background.
   Saved at /lp-assets/wax-seal-tree.png (320×320, RGBA, ~140 KB).
   Placed at the top-right of every parchment page so the page reads
   as "officially sealed" — replaces the earlier fixed-position tree
   backdrop, which was hard to see and competed with the watermark
   video. The seal sits INSIDE the parchment (not behind it), slightly
   overlapping the torn top edge for the "pressed onto the page just
   before it shipped" look.
*/
.parchment-seal {
  position: absolute;
  top: clamp(40px, 5vh, 72px);
  right: clamp(40px, 6vw, 92px);
  width: clamp(70px, 8vw, 110px);
  height: auto;
  aspect-ratio: 1 / 1;
  z-index: 3;
  pointer-events: none;
  transform: rotate(-8deg);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
  opacity: 0;
  transition: opacity 900ms ease-out 240ms, transform 1200ms ease-out 240ms;
}
body.loaded .parchment-seal { opacity: 1; }
/* Subtle hover: nudge the rotation so it feels physical. */
.page-view:hover .parchment-seal { transform: rotate(-6deg) translateY(-1px); }

@media (max-width: 720px) {
  .parchment-seal {
    top: clamp(32px, 4vh, 54px);
    right: clamp(24px, 5vw, 56px);
    width: clamp(56px, 16vw, 80px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .parchment-seal { transition: none; }
  .page-view:hover .parchment-seal { transform: rotate(-8deg); }
}

/* ---------- top nav ---------- */
.lj-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  pointer-events: none;
}
.lj-header > * { pointer-events: auto; }

.lj-brand {
  font-family: 'Cinzel Decorative', serif;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: rgba(245, 234, 212, 0.88);
  font-weight: 700;
}
.lj-brand i {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  margin-left: 4px;
  color: rgba(245, 234, 212, 0.72);
  letter-spacing: 0.04em;
  text-transform: none;
}
.lj-brand .brand-tag {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(245, 234, 212, 0.48);
  margin-top: 2px;
}

.lj-nav-links {
  display: flex;
  gap: 24px;
  font-family: 'Cinzel Decorative', serif;
  font-size: 11px;
  letter-spacing: 0.32em;
}
.lj-nav-links a {
  /* a11y: raised from 0.58 → 0.78 to clear WCAG AA 4.5:1 contrast against #0a0604 */
  color: rgba(245, 234, 212, 0.78);
  text-decoration: none;
  transition: color 200ms;
}
.lj-nav-links a:hover { color: rgba(245, 234, 212, 0.96); }
.lj-nav-links a.active { color: #dcc080; text-shadow: 0 0 8px rgba(176, 132, 70, 0.4); }
.lj-nav-links a:focus-visible {
  outline: 2px solid #dcc080;
  outline-offset: 4px;
  border-radius: 2px;
}

.lj-cta {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(244, 236, 216, 0.92);
  background: rgba(244, 236, 216, 0.06);
  border: 1px solid rgba(244, 236, 216, 0.18);
  border-radius: 999px;
  padding: 10px 22px;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: background 200ms, color 200ms, transform 180ms;
}
.lj-cta:hover {
  background: rgba(244, 236, 216, 0.12);
  color: #fff;
  transform: translateY(-1px);
}

/* ============================================================
   v22 / v23d / v24 PAGE-VIEW — adapted for standalone pages.
   In the original landing this was a fixed overlay; here it
   is the centerpiece of the page itself.
   ============================================================ */
.page-view {
  position: relative;
  margin: 110px auto 80px;
  width: clamp(320px, 80vw, 1150px);
  /* Content-driven height with a minimum that keeps the parchment looking
     like a tome page even on the shortest content pages. The torn-edge
     PNG stretches gracefully (~10–30%) when taller content demands it. */
  min-height: clamp(680px, 82vh, 940px);
  z-index: 1;
  transform:
    perspective(1600px)
    rotateX(3.2deg)
    rotateY(-1.1deg);
  transform-origin: center center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  /* Bottom padding reserves clearance for the .page-dots row (positioned
     absolutely ~24px from the bottom) plus a margin of paper. */
  padding: clamp(92px, 12vh, 140px) clamp(54px, 8vw, 120px) clamp(82px, 10vh, 124px);
}

/* Torn-parchment background — parchment_03_cut.png has transparent
   alpha at the torn edges. Drop-shadow stack respects the alpha mask
   so the shadow follows the ragged edge (box-shadow would paint a
   rectangle). */
.page-view::before {
  content: '';
  position: absolute;
  inset: 0;
  /* PNG fallback for old browsers without image-set support. */
  background: url('/lp-assets/parchment_03_cut.png') center center / 100% 100% no-repeat;
  /* WebP-first via image-set: 1.4 MB PNG → 135 KB WebP, alpha preserved. */
  background:
    image-set(
      url('/lp-assets/parchment_03_cut.webp') type('image/webp'),
      url('/lp-assets/parchment_03_cut.png')  type('image/png')
    ) center center / 100% 100% no-repeat;
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45))
    drop-shadow(0 16px 28px rgba(0, 0, 0, 0.55))
    drop-shadow(0 46px 90px rgba(0, 0, 0, 0.70))
    drop-shadow(0 0 36px rgba(255, 190, 110, 0.08));
  pointer-events: none;
  z-index: -1;
}

/* ---------- sections (timer-paginated) ---------- */
.page-section {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease;
  position: absolute;
  top: 0; left: 0; right: 0;
  /* Top padding is just internal breathing room below the h2 (which lives
     in .page-inner above the section). The h2's own bottom margin adds
     additional spacing, so we keep this modest. Bottom padding is small
     because .page-view itself reserves the dot-row clearance. */
  padding: clamp(22px, 3.5vh, 48px) clamp(18px, 3vw, 34px) 20px;
}
.page-section.active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

/* ---------- inner text container ---------- */
.page-view > .page-inner {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 4px clamp(12px, 2vw, 28px);
  color: #3a2410;
  font-family: 'Cormorant Garamond', 'Fraunces', serif;
  mix-blend-mode: multiply;
  filter: blur(0.22px);
}

/* ---------- typography ---------- */
.page-view h2 {
  font-family: 'Cinzel Decorative', 'Cinzel', 'Fraunces', serif;
  font-weight: 900;
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: 0.16em;
  text-align: center;
  color: #5a3216;
  margin: 0.2em auto 0.9em;
  padding: 0 0.6em 0.55em;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6), 0 0 14px rgba(140, 90, 40, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  max-width: 92%;
  background-image: linear-gradient(to right,
    transparent 0%, rgba(140, 90, 40, 0) 12%,
    rgba(140, 90, 40, 0.55) 38%, rgba(140, 90, 40, 0.55) 62%,
    rgba(140, 90, 40, 0) 88%, transparent 100%);
  background-repeat: no-repeat;
  background-position: center 100%;
  background-size: 100% 1px;
}
.page-view h2::before,
.page-view h2::after {
  content: '❦';
  font-family: 'Cinzel', 'Fraunces', serif;
  font-weight: 400;
  font-size: 0.78em;
  color: #8a5a22;
  opacity: 0.82;
  text-shadow: 0 0 6px rgba(140, 90, 40, 0.35);
  letter-spacing: 0;
}

.page-view h3 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: #5a3216;
  font-size: clamp(1.4rem, 2.0vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin: 0 0 0.45em;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.55);
}

.page-view p {
  font-size: clamp(1.1rem, 1.35vw, 1.28rem);
  line-height: 1.62;
  margin-bottom: 0.75em;
  color: #3a2410;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45);
}

.page-view ul {
  padding-left: 1.2em;
  margin-bottom: 0.75em;
}
.page-view ul li {
  font-size: clamp(1.08rem, 1.3vw, 1.22rem);
  line-height: 1.58;
  margin-bottom: 0.3em;
  color: #3a2410;
  list-style: none;
  position: relative;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45);
}
.page-view ul li::before {
  content: '✦';
  color: #8a5a22;
  position: absolute;
  left: -1.1em;
  font-size: 0.85em;
  top: 0.1em;
  text-shadow: 0 0 4px rgba(140, 90, 40, 0.35);
}
.page-view strong { color: #4a2a10; font-weight: 600; }
.page-view em { font-style: italic; color: #6a4020; }

/* ---------- close (X) — top-right of parchment ---------- */
.page-view .page-close {
  position: absolute;
  top: clamp(10px, 1.6vh, 18px);
  right: clamp(16px, 2.2vw, 28px);
  z-index: 3;
  background: none; border: none;
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  color: #5a3216;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5);
  transition: color 0.2s ease, transform 0.2s ease;
}
.page-view .page-close:hover {
  color: #8a4a1a;
  transform: scale(1.08);
}

/* ---------- dots (section nav) ---------- */
.page-dots {
  position: absolute;
  bottom: clamp(14px, 2.4vh, 26px);
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 2;
}
.page-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(80, 45, 18, 0.35);
  border: 1px solid rgba(80, 45, 18, 0.55);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.25s ease;
  padding: 0;
}
.page-dot:hover { transform: scale(1.2); }
.page-dot.active {
  background: #8a5a22;
  box-shadow: 0 0 10px rgba(140, 90, 40, 0.6);
}

/* ---------- watermark video INSIDE parchment ---------- */
.page-watermark {
  position: absolute;
  /* Bottom inset is generous to keep the watermark mask from sitting on
     the dot row OR overlapping the form's submit button on contact /
     signup. The radial mask already fades to zero at the edges, so this
     mostly tightens the upper bound of the visible ellipse. */
  inset: clamp(60px, 10vh, 110px) clamp(40px, 6vw, 90px) clamp(96px, 12vh, 140px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: soft-light;
  opacity: var(--wm-opacity, 0.85);
  /* Tight elliptical mask — content sits in middle 55x45% of parchment,
     fading to invisible at torn-paper edges so it never reads as a
     rectangular video. */
  -webkit-mask-image: radial-gradient(ellipse 55% 45% at center,
    rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 55% 45% at center,
    rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0) 100%);
}
.page-watermark-video,
.page-watermark-still {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.page-watermark-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .page-watermark-video { display: none; }
  .page-watermark-still { display: block; }
}

/* ---------- ink write-in (clip-path per line) ---------- */
.page-section .ink-line {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  position: relative;
  filter: drop-shadow(-1px 0 0 rgba(30, 14, 2, 0.6));
  transition: none;
}
.page-section.writing .ink-line {
  animation: ink-write 820ms cubic-bezier(0.33, 0.05, 0.45, 1) forwards;
  animation-delay: calc(var(--line-index) * 140ms + var(--section-delay, 0ms));
}
@keyframes ink-write {
  0%   { clip-path: inset(0 100% 0 0);
         filter: drop-shadow(-1px 0 0 rgba(30, 14, 2, 0.75)); }
  85%  { filter: drop-shadow(-1px 0 0 rgba(30, 14, 2, 0.45)); }
  100% { clip-path: inset(0 -2% 0 0);
         filter: drop-shadow(-1px 0 0 rgba(30, 14, 2, 0)); }
}
.page-section h3 { --section-delay: 0ms; }
.page-section p  { --section-delay: 280ms; }
.page-section ul { --section-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .page-section .ink-line {
    clip-path: none;
    animation: none;
    filter: none;
  }
}

/* ---------- pricing tier typography ---------- */
/* Used on pricing.html — keeps the parchment ink-on-paper voice
   but lets prices read with the weight they deserve.            */
.page-view .tier-price {
  font-family: 'Cinzel Decorative', 'Cinzel', 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.55vw, 1.45rem);
  letter-spacing: 0.06em;
  color: #6a3d12;
  text-align: center;
  margin: 0.3em 0 1em;
  text-shadow:
    0 1px 0  rgba(255, 240, 200, 0.6),
    0 0 10px rgba(140, 90, 40, 0.18);
}
.page-view .tier-price .sep {
  opacity: 0.4;
  margin: 0 0.15em;
  font-weight: 400;
}
.page-view .tier-price .dot {
  opacity: 0.45;
  margin: 0 0.6em;
  font-family: 'Fraunces', serif;
  font-weight: 400;
}

/* Tiny italic "most chosen" / "for heirs" badge sitting next to an h3 */
.page-view h3 .badge {
  font-family: 'Fraunces', 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.6em;
  color: #8a5a22;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-left: 0.65em;
  opacity: 0.78;
  vertical-align: middle;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5);
}

/* Caveat line — quieter italic note ("What Scribe doesn't include…") */
.page-view .tier-caveat {
  font-family: 'Fraunces', 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  color: rgba(58, 36, 16, 0.72);
  margin-top: 0.6em;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.42);
}

/* ---------- forms inside parchment (contact / signup) ---------- */
.page-form {
  display: grid;
  gap: 9px;
  max-width: 520px;
  margin: 6px auto 0;
}
.page-form label {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: #6a4020;
  text-transform: uppercase;
  display: grid;
  gap: 4px;
}
.page-form input,
.page-form textarea {
  width: 100%;
  padding: 7px 12px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 15px;
  color: #3a2410;
  background: rgba(255, 248, 224, 0.55);
  border: 1px solid rgba(90, 50, 22, 0.32);
  border-radius: 4px;
  outline: none;
  transition: border-color 200ms;
}
.page-form textarea {
  min-height: 64px;
  line-height: 1.4;
  resize: vertical;
}
.page-form input:focus,
.page-form textarea:focus { border-color: #8a5a22; }
.page-form button {
  margin-top: 4px;
  padding: 9px 22px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 15px;
  color: #f4ecd8;
  background: #8a5a22;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.04em;
  justify-self: center;
}
.page-form .form-status {
  font-family: 'Fraunces', serif;
  font-style: italic;
  text-align: center;
  min-height: 20px;
  color: #5a3216;
  margin-top: 2px;
}

/* ============================================================
   LEGAL / LONG-FORM MODE
   Activated by <body class="is-legal">. Long-form pages (privacy,
   terms) need to break out of the auto-rotating single-section
   ritual: the parchment grows to fit ALL sections stacked
   vertically, dots disappear, the page-watermark video is more
   transparent so it doesn't compete with dense text, and the .ink
   write-in animation is skipped (would make reading frustrating).
   ============================================================ */
body.is-legal .page-view {
  min-height: 0;
  margin: 110px auto 100px;
  padding: clamp(80px, 9vh, 116px) clamp(54px, 8vw, 120px) clamp(72px, 8vh, 110px);
}
body.is-legal .page-section {
  position: relative;
  opacity: 1;
  visibility: visible;
  padding: 8px clamp(18px, 3vw, 34px) 4px;
}
body.is-legal .page-section + .page-section { margin-top: 18px; }
body.is-legal .page-dots { display: none; }
body.is-legal .page-watermark { opacity: var(--wm-opacity, 0.55); }
body.is-legal .page-section .ink-line { clip-path: none !important; animation: none !important; filter: none !important; }
body.is-legal .page-view h3 {
  font-size: clamp(1.18rem, 1.5vw, 1.34rem);
  margin-top: 0.4em;
}
body.is-legal .page-view p,
body.is-legal .page-view ul li {
  font-size: clamp(1.0rem, 1.05vw, 1.08rem);
  line-height: 1.58;
}
body.is-legal .page-view ul { margin-top: 4px; margin-bottom: 8px; }
body.is-legal .page-view h2 { margin-bottom: 0.6em; }
body.is-legal .legal-meta {
  text-align: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(80, 45, 18, 0.65);
  margin-top: 28px;
}

/* ---------- shared footer: site-wide legal + nav linkback ---------- */
.lj-footer {
  position: relative;
  z-index: 2;
  max-width: 1150px;
  margin: 4px auto 32px;
  padding: 0 clamp(24px, 4vw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 12px;
  /* a11y: raised from 0.42 → 0.65 to clear WCAG AA against #0a0604 */
  color: rgba(245, 234, 212, 0.65);
  letter-spacing: 0.02em;
}
.lj-footer a {
  /* a11y: raised from 0.58 → 0.78 for WCAG AA */
  color: rgba(245, 234, 212, 0.78);
  text-decoration: none;
  margin-right: 18px;
  transition: color 200ms;
}
.lj-footer a:last-child { margin-right: 0; }
.lj-footer a:hover { color: rgba(245, 234, 212, 0.96); }
.lj-footer a:focus-visible {
  outline: 2px solid #dcc080;
  outline-offset: 4px;
  border-radius: 2px;
}
.lj-footer .lj-footer-mark {
  font-family: 'Cinzel Decorative', serif;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 10px;
  color: rgba(176, 132, 70, 0.70);
}
@media (max-width: 720px) {
  .lj-footer { flex-direction: column; align-items: flex-start; padding: 0 18px; }
  .lj-footer a { margin-right: 14px; }
}

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  .lj-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
  .lj-nav-links { font-size: 9px; gap: 14px; order: 3; flex-basis: 100%; justify-content: center; }
  .lj-brand .brand-tag { display: none; }
  .page-view {
    margin: 100px auto 56px;
    width: 92vw;
    min-height: clamp(560px, 84vh, 760px);
    transform: none;
    padding: clamp(74px, 11vh, 108px) clamp(28px, 6vw, 60px) clamp(72px, 10vh, 108px);
  }
  .page-section { padding: clamp(20px, 3vh, 36px) clamp(8px, 3vw, 22px) 16px; }
  .page-form { gap: 8px; }
  .page-form input, .page-form textarea { padding: 6px 10px; font-size: 14px; }
  .page-form button { padding: 8px 20px; font-size: 14px; }
}

/* ============================================================
   v25: AMBIENT ELEGANCE
   --------------------------------------------------------------
   Five subtle touches focused on backgrounds, layering, and
   lighting. Layered above the parchment image and below the
   ink (page-inner uses mix-blend: multiply so it composites
   correctly on top). Nothing here touches the parchment image
   itself, the watermark videos, the wax seal, the header/footer,
   or any visible options on the pages.

     1. Candlelight inner vignette + slow gold-dust motes
     2. Ember-pulse on the active section dot
     3. Ember halo on .page-close hover/focus
     4. Page-turn lateral drift on .page-section entry
     5. Lede emphasis on the first paragraph of each section

   Disabled on body.is-legal (privacy / terms) so long-form
   reading stays uncluttered. Respects prefers-reduced-motion.
   ============================================================ */

/* ============================================================ */
/* a11y: SKIP-LINK + FOCUS INDICATORS                           */
/* Keyboard users can jump past the header to the page content. */
/* All interactive elements get a visible focus ring; the ring  */
/* is gold-on-dark (matches the gilded ink palette) so it reads */
/* as intentional brand, not a browser default.                 */
/* ============================================================ */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 10px 18px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #0a0604;
  background: #dcc080;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  transform: translateY(-110%);
  transition: transform 180ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #f5ead4;
  outline-offset: 2px;
}

.lj-brand:focus-visible,
.lj-cta:focus-visible,
.page-view .page-close:focus-visible,
.page-view .page-dot:focus-visible,
.page-form input:focus-visible,
.page-form textarea:focus-visible,
.page-form button:focus-visible {
  outline: 2px solid #dcc080;
  outline-offset: 3px;
  border-radius: 3px;
}

/* The form-status live region — visible style is unchanged; */
/* the role + aria-live attributes go on the HTML element.   */
.page-form .form-status[aria-live] { /* no visual change, just a hook */ }

/* (1) Atmosphere layer — adds one CSS pseudo-element on
   .page-view::after; no HTML markup is added. The blend mode
   is overlay so warm light reads clearly against parchment
   midtones (soft-light was too gentle to perceive). A radial
   mask hugs the deckled ellipse so the layer never reveals a
   rectangular boundary against the torn paper.

   Layers, bottom→top:
     A — warm candlelight bloom rising from below-center
     B — faint cool shadow at upper corners (page lifts away)
     C — thin gilt page-edge ring (illuminated-manuscript trim)
     D-H — five tiny gold dust motes drifting upward */
.page-view::after {
  content: '';
  position: absolute;
  /* Stay well inside the torn fibres of the parchment image */
  inset: clamp(64px, 9.5vh, 110px) clamp(50px, 6.8vw, 100px);
  pointer-events: none;
  /* z-index: -1 keeps this layer ABOVE the parchment ::before
     (also -1, but ::after sits above ::before in source order)
     and BELOW the .page-inner ink — so the warm bloom and dust
     wash the paper without washing out the text. */
  z-index: -1;
  -webkit-mask-image: radial-gradient(ellipse 96% 92% at center,
                       rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 96% 92% at center,
                       rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
  background-image:
    radial-gradient(ellipse 72% 56% at 50% 112%,
                    rgba(255, 168, 80, 0.42),
                    rgba(255, 168, 80, 0) 68%),
    radial-gradient(ellipse 78% 48% at 50% -12%,
                    rgba(20, 8, 0, 0.26),
                    rgba(20, 8, 0, 0) 70%),
    radial-gradient(ellipse 96% 92% at center,
                    rgba(0, 0, 0, 0) 86%,
                    rgba(255, 215, 150, 0.30) 93%,
                    rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle 2.0px at 18% 78%,
                    rgba(255, 222, 160, 1.00),
                    rgba(255, 222, 160, 0) 70%),
    radial-gradient(circle 1.6px at 72% 64%,
                    rgba(255, 215, 145, 0.92),
                    rgba(255, 215, 145, 0) 70%),
    radial-gradient(circle 2.4px at 42% 88%,
                    rgba(255, 232, 178, 1.00),
                    rgba(255, 232, 178, 0) 70%),
    radial-gradient(circle 1.4px at 86% 30%,
                    rgba(255, 200, 130, 0.85),
                    rgba(255, 200, 130, 0) 70%),
    radial-gradient(circle 1.8px at 32% 22%,
                    rgba(255, 220, 160, 0.78),
                    rgba(255, 220, 160, 0) 70%);
  background-repeat: no-repeat;
  mix-blend-mode: overlay;
  opacity: 0;
  animation: ambianceFadeIn 1.4s ease 0.4s forwards,
             dustDrift 22s ease-in-out infinite 1.8s;
}

/* (1b) PER-PAGE PALETTES — each linked page picks up the mood
   of its watermark video. Uses :has() to scope by the visible
   .page-view's id; no HTML edits needed. Falls back to the
   default warm-candle palette above if :has() is unsupported. */

/* About — clasped hands. Default warm candle palette is already
   tuned for this page, so we only nudge the room slightly cooler
   in the cool corner to throw the warmth forward. */
body:has(#page-about) .room {
  background:
    radial-gradient(ellipse 60% 50% at 18% 86%, rgba(255, 178, 90, 0.16) 0%, transparent 65%),
    radial-gradient(ellipse 70% 80% at 82% 14%, rgba(150, 180, 200, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(40, 28, 18, 0.5) 0%, #0a0604 80%);
}

/* Pricing — tree of life. Verdant low glow + honey-gold crown
   light (afternoon sun through leaves). Bloom shifts warmer. */
body:has(#page-pricing) .room {
  background:
    radial-gradient(ellipse 70% 55% at 22% 88%, rgba(110, 150, 90, 0.13) 0%, transparent 65%),
    radial-gradient(ellipse 65% 70% at 78% 18%, rgba(220, 180, 110, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(36, 30, 20, 0.5) 0%, #0a0604 80%);
}
.page-view#page-pricing ~ * .page-view::after,
body:has(#page-pricing) .page-view::after {
  background-image:
    radial-gradient(ellipse 72% 56% at 50% 112%,
                    rgba(220, 195, 120, 0.50),
                    rgba(220, 195, 120, 0) 68%),
    radial-gradient(ellipse 78% 48% at 50% -12%,
                    rgba(40, 60, 30, 0.26),
                    rgba(40, 60, 30, 0) 70%),
    radial-gradient(ellipse 96% 92% at center,
                    rgba(0, 0, 0, 0) 86%,
                    rgba(255, 215, 130, 0.32) 93%,
                    rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle 2.0px at 18% 78%, rgba(255, 232, 160, 1.00), rgba(255, 232, 160, 0) 70%),
    radial-gradient(circle 1.6px at 72% 64%, rgba(220, 220, 130, 0.92), rgba(220, 220, 130, 0) 70%),
    radial-gradient(circle 2.4px at 42% 88%, rgba(255, 240, 170, 1.00), rgba(255, 240, 170, 0) 70%),
    radial-gradient(circle 1.4px at 86% 30%, rgba(200, 215, 130, 0.85), rgba(200, 215, 130, 0) 70%),
    radial-gradient(circle 1.8px at 32% 22%, rgba(245, 222, 145, 0.78), rgba(245, 222, 145, 0) 70%);
}

/* Tutorial — lock + key intro. Brass-gold bloom from below-right
   (where the key would glint), deep teal shadow top-left. */
body:has(#page-tutorial) .room {
  background:
    radial-gradient(ellipse 60% 50% at 78% 88%, rgba(255, 188, 95, 0.13) 0%, transparent 65%),
    radial-gradient(ellipse 70% 80% at 22% 14%, rgba(130, 170, 200, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(38, 28, 18, 0.5) 0%, #0a0604 80%);
}
body:has(#page-tutorial) .page-view::after {
  background-image:
    radial-gradient(ellipse 70% 58% at 65% 112%,
                    rgba(255, 188, 95, 0.50),
                    rgba(255, 188, 95, 0) 68%),
    radial-gradient(ellipse 78% 48% at 50% -12%,
                    rgba(20, 35, 45, 0.30),
                    rgba(20, 35, 45, 0) 70%),
    radial-gradient(ellipse 96% 92% at center,
                    rgba(0, 0, 0, 0) 86%,
                    rgba(255, 210, 145, 0.34) 93%,
                    rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle 2.0px at 18% 78%, rgba(255, 220, 155, 1.00), rgba(255, 220, 155, 0) 70%),
    radial-gradient(circle 1.6px at 72% 64%, rgba(255, 210, 140, 0.92), rgba(255, 210, 140, 0) 70%),
    radial-gradient(circle 2.4px at 42% 88%, rgba(255, 230, 170, 1.00), rgba(255, 230, 170, 0) 70%),
    radial-gradient(circle 1.4px at 86% 30%, rgba(255, 200, 130, 0.85), rgba(255, 200, 130, 0) 70%),
    radial-gradient(circle 1.8px at 32% 22%, rgba(255, 220, 160, 0.78), rgba(255, 220, 160, 0) 70%);
}

/* FAQ — keyhole + flame. Strong amber bloom that gently flickers
   like a candle (slow 4.6s asymmetric breathe), deeper black
   shadow above (the curious enclosed space behind the door). */
body:has(#page-faq) .room {
  background:
    radial-gradient(ellipse 55% 45% at 50% 92%, rgba(255, 150, 70, 0.16) 0%, transparent 65%),
    radial-gradient(ellipse 80% 90% at 50% 8%, rgba(20, 12, 6, 0.30) 0%, transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(28, 18, 10, 0.55) 0%, #060402 80%);
}
body:has(#page-faq) .page-view::after {
  background-image:
    radial-gradient(ellipse 64% 54% at 50% 112%,
                    rgba(255, 145, 60, 0.56),
                    rgba(255, 145, 60, 0) 68%),
    radial-gradient(ellipse 78% 50% at 50% -10%,
                    rgba(10, 5, 0, 0.36),
                    rgba(10, 5, 0, 0) 70%),
    radial-gradient(ellipse 96% 92% at center,
                    rgba(0, 0, 0, 0) 86%,
                    rgba(255, 190, 110, 0.34) 93%,
                    rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle 2.0px at 18% 78%, rgba(255, 210, 140, 1.00), rgba(255, 210, 140, 0) 70%),
    radial-gradient(circle 1.6px at 72% 64%, rgba(255, 200, 130, 0.92), rgba(255, 200, 130, 0) 70%),
    radial-gradient(circle 2.4px at 42% 88%, rgba(255, 222, 160, 1.00), rgba(255, 222, 160, 0) 70%),
    radial-gradient(circle 1.4px at 86% 30%, rgba(255, 190, 115, 0.85), rgba(255, 190, 115, 0) 70%),
    radial-gradient(circle 1.8px at 32% 22%, rgba(255, 215, 145, 0.78), rgba(255, 215, 145, 0) 70%);
  animation: ambianceFadeIn 1.4s ease 0.4s forwards,
             flameFlicker 4.6s ease-in-out infinite 1.8s,
             dustDrift 22s ease-in-out infinite 1.8s;
}
@keyframes flameFlicker {
  0%, 100% { filter: brightness(1) saturate(1); }
  18%      { filter: brightness(1.12) saturate(1.08); }
  37%      { filter: brightness(0.95) saturate(1); }
  62%      { filter: brightness(1.08) saturate(1.05); }
  81%      { filter: brightness(0.98) saturate(0.98); }
}

/* Contact — hand from water reaching upward. Cool silver-blue
   shimmer from below (the water), faint warm pinpoint above
   (the unseen light source the hand reaches toward). */
body:has(#page-contact) .room {
  background:
    radial-gradient(ellipse 65% 50% at 50% 90%, rgba(140, 175, 210, 0.13) 0%, transparent 65%),
    radial-gradient(ellipse 35% 50% at 50% 10%, rgba(255, 210, 150, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(28, 28, 32, 0.55) 0%, #07080a 80%);
}
body:has(#page-contact) .page-view::after {
  background-image:
    radial-gradient(ellipse 72% 56% at 50% 112%,
                    rgba(155, 185, 215, 0.42),
                    rgba(155, 185, 215, 0) 68%),
    radial-gradient(ellipse 40% 30% at 50% -8%,
                    rgba(255, 210, 150, 0.34),
                    rgba(255, 210, 150, 0) 70%),
    radial-gradient(ellipse 96% 92% at center,
                    rgba(0, 0, 0, 0) 86%,
                    rgba(220, 215, 200, 0.30) 93%,
                    rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle 2.0px at 18% 78%, rgba(220, 232, 248, 1.00), rgba(220, 232, 248, 0) 70%),
    radial-gradient(circle 1.6px at 72% 64%, rgba(200, 215, 235, 0.92), rgba(200, 215, 235, 0) 70%),
    radial-gradient(circle 2.4px at 42% 88%, rgba(230, 240, 250, 1.00), rgba(230, 240, 250, 0) 70%),
    radial-gradient(circle 1.4px at 86% 30%, rgba(255, 220, 175, 0.85), rgba(255, 220, 175, 0) 70%),
    radial-gradient(circle 1.8px at 32% 22%, rgba(220, 220, 230, 0.78), rgba(220, 220, 230, 0) 70%);
}
@keyframes ambianceFadeIn {
  to { opacity: 1; }
}
@keyframes dustDrift {
  0%, 100% {
    background-position:
      0 0, 0 0,
      0   0%,  0   0%,  0   0%,  0   0%,  0   0%;
  }
  50% {
    background-position:
      0 0, 0 0,
      0 -14%, 0 -10%, 0 -18%, 0  -8%, 0 -12%;
  }
}

/* (2) Ember pulse on the active section dot. Replaces the
   existing static glow with a slow breathing rhythm. Same
   color tones already in the file (#8a5a22 / amber). */
.page-dot.active {
  animation: dotEmber 3.4s ease-in-out infinite;
}
@keyframes dotEmber {
  0%, 100% {
    background: #8a5a22;
    box-shadow:
      0 0  6px rgba(140, 90, 40, 0.55),
      0 0 14px rgba(255, 175, 80, 0.16);
  }
  50% {
    background: #a06b2a;
    box-shadow:
      0 0 10px rgba(180, 120, 55, 0.85),
      0 0 26px rgba(255, 175, 80, 0.32);
  }
}

/* (3) Ember halo on the close button. The base button keeps
   its existing color/scale lift; the ::after adds a soft warm
   ring that fades in on hover/focus so it never competes with
   the close glyph itself. */
.page-view .page-close { isolation: isolate; }
.page-view .page-close::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 42px; height: 42px;
  transform: translate(-50%, -50%) scale(0.55);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
                rgba(255, 175, 80, 0.45),
                rgba(255, 175, 80, 0) 70%);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: -1;
}
.page-view .page-close:hover::after,
.page-view .page-close:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* (4) Page-turn drift on section entry. The existing rule
   fades opacity over 0.7s; we add a 6px horizontal nudge so
   each new section feels like the next sheet of paper sliding
   under. The transform must NOT apply to the inactive
   absolutely-positioned siblings — they layer on top of the
   active one and a transform on them would peek through. */
.page-section.active {
  animation: pageTurnDrift 0.7s cubic-bezier(0.33, 0.05, 0.45, 1) both;
}
@keyframes pageTurnDrift {
  0%   { transform: translateX(8px); }
  100% { transform: translateX(0); }
}

/* (5) Lede emphasis on the opening paragraph of each section.
   ~12% font-size bump, looser tracking, slightly heavier ink
   reads as the chapter's "leading line" without competing with
   the ornate H2 or italic Fraunces H3. The warm ink-shadow
   grounds it to the parchment fibres. */
.page-section.active > p:first-child,
.page-section.active > h3 + p {
  font-size: clamp(1.25rem, 1.6vw, 1.48rem);
  line-height: 1.55;
  letter-spacing: 0.018em;
  color: #2e1a08;
  text-shadow:
    0 1px 0 rgba(255, 240, 200, 0.6),
    0 0 18px rgba(140, 90, 40, 0.14);
}

/* Long-form pages (privacy / terms) — keep stillness. */
body.is-legal .page-view::after { display: none; }
body.is-legal .page-dot.active   { animation: none; }
body.is-legal .page-section.active { animation: none; }
body.is-legal .page-section.active > p:first-child,
body.is-legal .page-section.active > h3 + p {
  font-size: clamp(1.0rem, 1.05vw, 1.08rem);
  letter-spacing: normal;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45);
}

/* Reduced-motion blanket: kill the dust drift, the dot pulse,
   and the section-turn drift. The atmosphere itself stays
   visible — only its motion stops, so users who asked for
   stillness still get the depth and warmth. */
@media (prefers-reduced-motion: reduce) {
  .page-view::after { animation: ambianceFadeIn 0.5s ease 0s forwards; }
  .page-dot.active,
  .page-section.active { animation: none; }
}

/* ============================================================
   v26 — PHOTOGRAPHIC BACKDROP (library)
   Replaces the flat dark canvas with bg-library.jpeg as a
   fixed full-bleed backdrop. The .room overlay tints the
   photo and adds the warm/cool key-fill lighting; the parchment
   scroll still reads as the brightest object on the page
   because its own drop-shadow stack lights it forward.

   Currently a single uniform backdrop across all pages so the
   user can evaluate the direction before committing.
   ============================================================ */
body {
  /* JPEG fallback */
  background:
    url('/lp-assets/backgrounds/bg-library.jpeg') center center / cover no-repeat fixed,
    #07050a;
  /* WebP-first via image-set (7.6 MB JPEG → 104 KB WebP) */
  background:
    image-set(
      url('/lp-assets/backgrounds/bg-library.webp') type('image/webp'),
      url('/lp-assets/backgrounds/bg-library.jpeg') type('image/jpeg')
    ) center center / cover no-repeat fixed,
    #07050a;
}

/* Tint the photo via .room so the parchment is still the
   brightest object on the page. Match the per-page selector
   list so the original per-page overrides don't beat us. */
.room,
body:has(#page-about) .room,
body:has(#page-pricing) .room,
body:has(#page-tutorial) .room,
body:has(#page-faq) .room,
body:has(#page-contact) .room {
  background:
    /* warm key from below-left echoes the candle in the photo */
    radial-gradient(ellipse 70% 60% at 12% 88%,
                    rgba(255, 178, 90, 0.16) 0%,
                    rgba(255, 178, 90, 0) 65%),
    /* cool fill from upper-right echoes the receding arch */
    radial-gradient(ellipse 70% 80% at 88% 12%,
                    rgba(80, 100, 130, 0.14) 0%,
                    rgba(80, 100, 130, 0) 70%),
    /* uniform dim tint so the parchment is the brightest object */
    radial-gradient(ellipse 120% 120% at 50% 50%,
                    rgba(0, 0, 0, 0.38) 0%,
                    rgba(0, 0, 0, 0.62) 100%);
}

/* Per-page photographic backdrops. Each linked page gets its
   own scene that echoes the watermark's emotional theme:
     About    — writing desk with candle (intimate, "where you write")
     Pricing  — library bookshelves (vast, "preserved for 100 years")
     Tutorial — sunlit window seat at morning (daylight, "the day you start")
     FAQ      — door ajar with warm light (threshold, "answers within")
     Contact  — letter + sealing wax + tree-seal (ceremonial, "sealing a message")
   Pricing inherits the base body { bg-library } above. */
body:has(#page-about) {
  background: url('/lp-assets/backgrounds/bg-desk.jpeg') center center / cover no-repeat fixed, #07050a;
  background:
    image-set(
      url('/lp-assets/backgrounds/bg-desk.webp') type('image/webp'),
      url('/lp-assets/backgrounds/bg-desk.jpeg') type('image/jpeg')
    ) center center / cover no-repeat fixed,
    #07050a;
}
body:has(#page-tutorial) {
  background: url('/lp-assets/backgrounds/bg-window.jpeg') center center / cover no-repeat fixed, #1a1410;
  background:
    image-set(
      url('/lp-assets/backgrounds/bg-window.webp') type('image/webp'),
      url('/lp-assets/backgrounds/bg-window.jpeg') type('image/jpeg')
    ) center center / cover no-repeat fixed,
    #1a1410;
}
body:has(#page-faq) {
  /* Rolodex graduated to /faq — backdrop swaps from bg-door → bg-rolodex */
  background: url('/lp-assets/backgrounds/bg-rolodex.jpeg') center center / cover no-repeat fixed, #07050a;
  background:
    image-set(
      url('/lp-assets/backgrounds/bg-rolodex.webp') type('image/webp'),
      url('/lp-assets/backgrounds/bg-rolodex.jpeg') type('image/jpeg')
    ) center center / cover no-repeat fixed,
    #07050a;
}
body:has(#page-contact) {
  background: url('/lp-assets/backgrounds/bg-letter.jpeg') center center / cover no-repeat fixed, #07050a;
  background:
    image-set(
      url('/lp-assets/backgrounds/bg-letter.webp') type('image/webp'),
      url('/lp-assets/backgrounds/bg-letter.jpeg') type('image/jpeg')
    ) center center / cover no-repeat fixed,
    #07050a;
}

/* Tutorial uses daylight imagery, so loosen the dim tint on
   .room there so the morning brightness comes through. */
body:has(#page-tutorial) .room {
  background:
    radial-gradient(ellipse 70% 60% at 88% 30%,
                    rgba(255, 220, 160, 0.10) 0%,
                    rgba(255, 220, 160, 0) 65%),
    radial-gradient(ellipse 120% 120% at 50% 50%,
                    rgba(0, 0, 0, 0.18) 0%,
                    rgba(0, 0, 0, 0.36) 100%);
}