/* ==========================================================================
   THE NON-NUPTIAL AGREEMENT — "Parchment & Hedgerow"
   Cotswold-green, medieval-adjacent, high-end modern-minimal.
   Ink not paint · one perfect ornament · nothing startles · maximal quiet.
   Grounded in the design-direction research (moss/parchment, Fraunces + EB
   Garamond, calm ease-out motion, negative space as the material).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..500;1,9..144,300..400&family=EB+Garamond:ital,wght@0,400..600;1,400..500&family=Space+Grotesk:wght@400;500&family=IBM+Plex+Mono:wght@400&family=UnifrakturMaguntia&display=swap');

:root {
  /* ground — parchment does 80% of the work */
  --paper:   #F4F0E6;
  --surface: #FBF8F0;
  --well:    #EBE5D6;
  --line:    #D8D1BE;
  --line-2:  #C7BFA8;

  /* ink — never pure black */
  --ink:     #26302A;
  --muted:   #5B6157;
  --faint:   #8A8778;
  --ghost:   #B8B2A0;

  /* hedgerow greens — the lettering, the frame, the moss in the corners */
  --sage:    #7C8A6E;
  --moss:    #55684E;
  --bottle:  #2E3D33;
  --fern:    #A9B79A;
  --sage-wash: rgba(124, 138, 110, 0.10);
  --moss-wash: rgba(85, 104, 78, 0.08);

  /* rare accents */
  --candle:  #C8912F;   /* gilding, one CTA glow, drop-cap — decorative/large only */
  --candle-hi:#DBAB5A;
  --oxblood: #7A342B;   /* the wax seal, one flourish — never an error color */

  /* type */
  --display: "Fraunces", Georgia, serif;
  --body:    "EB Garamond", Georgia, serif;
  --chrome:  "Space Grotesk", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --illum:   "UnifrakturMaguntia", "Fraunces", serif;

  /* measure & rhythm — generous */
  --measure: 60ch;
  --gutter:  clamp(1.5rem, 6vw, 7rem);
  --stack:   clamp(5rem, 15vh, 11rem);

  /* motion — slow, ease-out, never bouncy */
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
  --ui:    420ms;
  --slow:  760ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.1875rem;
  line-height: 1.62;
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* paper tooth — barely-there feTurbulence grain */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  opacity: 0.5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the ambient wisp layer lives in .wisps (populated per page) */
.wisps { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.wisps svg { position: absolute; color: var(--sage); opacity: 0.05; mix-blend-mode: multiply; }
/* the real crest, keyed to moss linework on a white ground so multiply leaves
   the parchment untouched and the square edge never shows */
.wisps img { position: absolute; opacity: 0.045; mix-blend-mode: multiply; }

main, header, footer, .stage { position: relative; z-index: 1; }

::selection { background: rgba(124, 138, 110, 0.24); color: var(--ink); }
:focus-visible { outline: 1.5px solid var(--moss); outline-offset: 3px; border-radius: 2px; }

/* --------------------------------------------------------------- type ---- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 380; line-height: 1.06;
  letter-spacing: -0.012em; margin: 0;
  color: var(--bottle);
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 7vw, 5.5rem); font-weight: 340; }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h3 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); }

p { margin: 0 0 1.15em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--moss); text-decoration-color: var(--line-2); text-underline-offset: 0.22em; transition: color var(--ui) var(--ease); }
a:hover { color: var(--bottle); text-decoration-color: var(--sage); }
em { font-style: italic; color: var(--ink); }
strong { font-weight: 600; color: var(--bottle); }

.chrome {
  font-family: var(--chrome); font-size: 0.6875rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--faint); font-weight: 400;
}
.chrome-moss { color: var(--moss); }

.lede {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.55; color: var(--muted); max-width: 40rem;
  font-weight: 400;
}

.moss { color: var(--moss); } .sage { color: var(--sage); }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.candle { color: var(--candle); }
.serif-em { font-family: var(--display); font-style: italic; font-weight: 340; }

/* illuminated drop cap — the one ornament, used once */
.dropcap::first-letter {
  -webkit-initial-letter: 3; initial-letter: 3;
  font-family: var(--illum); color: var(--moss);
  margin-right: 0.12em; font-weight: 400;
}

/* ------------------------------------------------------------- layout ---- */
.shell { width: 100%; max-width: 74rem; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--stack); }
.room-col { max-width: 62ch; }

.horizon {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}
.eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; }
.eyebrow::after { content: ""; flex: 1; height: 1px; max-width: 9rem; background: linear-gradient(90deg, var(--line-2), transparent); }
.eyebrow-num { font-family: var(--mono); font-size: 0.6875rem; color: var(--sage); letter-spacing: 0.1em; }

.stack-sm > * + * { margin-top: 0.75rem; }
.stack   > * + * { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: 3rem; }

/* -------------------------------------------------------------- pills ---- */
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.9rem; border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--moss); white-space: nowrap;
  background: var(--surface);
}
.pill-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ------------------------------------------------------------ buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 1.7rem; border-radius: 3px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink);
  font-family: var(--chrome); font-size: 0.8125rem; letter-spacing: 0.02em; text-transform: none;
  text-decoration: none; cursor: pointer;
  transition: background var(--ui) var(--ease), border-color var(--ui) var(--ease), color var(--ui) var(--ease), transform var(--ui) var(--ease);
}
.btn:hover { background: var(--sage-wash); border-color: var(--sage); color: var(--bottle); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--moss); border-color: var(--moss); color: var(--paper); font-weight: 500; }
.btn-primary:hover { background: var(--bottle); border-color: var(--bottle); color: var(--paper); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--moss); padding-inline: 0; }
.btn-ghost:hover { background: transparent; color: var(--bottle); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.62rem 1.1rem; font-size: 0.75rem; }

/* ------------------------------------------------------------- cards ---- */
.card {
  border: 1px solid var(--line); border-radius: 4px; padding: 1.9rem;
  background: var(--surface);
  transition: border-color var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.card:hover { border-color: var(--line-2); }
.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

/* wax seal chip */
.seal {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--moss); padding: 0.35rem 0.75rem; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface);
}
.seal::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.seal-candle { color: var(--candle); border-color: rgba(200,145,47,0.4); }
.seal-candle::before { background: var(--candle); }

/* the seal mark itself (header logomark) */
.mark { display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.mark svg, .mark img { width: 38px; height: 38px; display: block; }
.mark img { border-radius: 50%; }
.mark-word { font-family: var(--display); font-size: 1.15rem; color: var(--bottle); letter-spacing: 0.01em; }

/* --------------------------------------------------------- forms ------- */
.field-label {
  display: block; font-family: var(--chrome); font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.6rem;
}
input[type="text"], input[type="email"], textarea {
  width: 100%; padding: 0.85rem 1rem; background: var(--paper);
  border: 1px solid var(--line-2); border-radius: 3px; color: var(--ink);
  font-family: var(--body); font-size: 1.05rem;
  transition: border-color var(--ui) var(--ease), background var(--ui) var(--ease);
}
input:focus, textarea:focus { outline: none; border-color: var(--moss); background: var(--surface); }
input::placeholder, textarea::placeholder { color: var(--ghost); }

.note {
  padding: 0.9rem 1.1rem; border-left: 2px solid var(--sage);
  background: var(--sage-wash); font-size: 0.95rem; color: var(--muted); border-radius: 0 3px 3px 0;
}

/* ------------------------------------------------------------ motion ---- */
.rise { opacity: 0; transform: translateY(16px); animation: rise var(--slow) var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
.d1{animation-delay:.10s}.d2{animation-delay:.22s}.d3{animation-delay:.36s}.d4{animation-delay:.52s}.d5{animation-delay:.68s}.d6{animation-delay:.84s}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rise, .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   THE HALL — the dark register. stained oak, candlelight, gold leaf.
   opt in per page with <html class="hall">. everything below only re-points
   the tokens the light theme already defined, so every component above
   inherits the new ground without being rewritten. bandwidth.html stays on
   the parchment default — its chart palette was validated against that
   surface and must not be flipped without re-running the validator.
   ========================================================================== */
html.hall {
  /* ground — stained board instead of parchment */
  --paper:   #15110D;
  --surface: #1D1811;
  --well:    #262018;
  --line:    #362D22;
  --line-2:  #4B3F30;

  /* ink — warm parchment, never pure white */
  --ink:     #EDE3D0;
  --muted:   #B6A88E;
  --faint:   #8B7C64;
  --ghost:   #5F5442;

  /* the greens have to lift off a dark ground, so the ramp inverts:
     --bottle is the heading colour and --moss the link colour, which means
     on this theme they are the LIGHTEST greens, not the darkest. */
  --sage:    #9AAA82;
  --moss:    #B4C39B;
  --bottle:  #E9E0CA;
  --fern:    #C4D0AF;
  --sage-wash: rgba(154, 170, 130, 0.10);
  --moss-wash: rgba(154, 170, 130, 0.07);

  /* gold leaf reads brighter by candlelight */
  --candle:   #E0AE4E;
  --candle-hi:#F2CB7C;
  --oxblood:  #C4665A;

  background: var(--paper);
  color-scheme: dark;
}

/* the board itself: candlelight from the upper left, a second dim source
   bottom-right, and two out-of-phase striation layers so the grain never
   resolves into a visible stripe pattern. */
html.hall body {
  background-color: var(--paper);
  background-image:
    radial-gradient(62rem 42rem at 16% -12%, rgba(224, 174, 78, 0.075), transparent 70%),
    radial-gradient(52rem 38rem at 94% 110%, rgba(154, 170, 130, 0.05), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 246, 226, 0.016) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.20) 0 1px, transparent 1px 23px);
  background-attachment: fixed;
}
html.hall body::before { opacity: 0.34; mix-blend-mode: overlay; }

/* the crest wisps are moss-on-white artwork. multiply would bury them in the
   board, so invert to light-on-black, warm the result toward gold leaf, and
   screen it back on — the black ground contributes nothing and only the
   linework survives. */
html.hall .wisps img {
  mix-blend-mode: screen;
  opacity: 0.05;
  filter: invert(1) sepia(1) saturate(2.2) hue-rotate(347deg) brightness(0.62);
}
html.hall .wisps svg { mix-blend-mode: screen; color: var(--sage); opacity: 0.06; }

/* the logomark is gold on near-black already — it belongs here, no medallion */
html.hall .mark img { box-shadow: 0 0 0 1px var(--line); }

html.hall ::selection { background: rgba(224, 174, 78, 0.26); color: var(--ink); }
html.hall :focus-visible { outline-color: var(--candle); }

/* on the board, a card is a lit surface rather than a bounded one */
html.hall .card { background: linear-gradient(180deg, var(--surface), rgba(29, 24, 17, 0.35)); }
html.hall .card:hover { border-color: var(--candle); }
html.hall .btn:hover { border-color: var(--candle); color: var(--candle-hi); }
/* the one lit CTA — gold leaf, not moss. dark text on it, never light. */
html.hall .btn-primary { background: var(--candle); border-color: var(--candle); color: #15110D; }
html.hall .btn-primary:hover { background: var(--candle-hi); border-color: var(--candle-hi); color: #15110D; }

/* ---------------------------------------------------- the release plate --- */
/* studio credit. the loudest thing above the fold that isn't the plate. */
.credit { max-width: none; margin: 0 0 2.75rem; }
.credit-kicker {
  display: block; font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 0.7rem;
}
.credit-name {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 5vw, 3.4rem); line-height: 1;
  letter-spacing: -0.015em; color: var(--candle);
  text-shadow: 0 0 34px rgba(224, 174, 78, 0.22);
}
/* gold leaf under a moving light: a hot white specular band travelling the
   full width, a second softer band trailing it, and a glow that swells as the
   highlight crosses. linear timing so the sweep never stalls at the ends. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .credit-name {
    background: linear-gradient(100deg,
      var(--candle)    0%,
      var(--candle)   24%,
      var(--candle-hi) 36%,
      #FFFFFF         45%,
      #FFFDF4         50%,
      #FFFFFF         55%,
      var(--candle-hi) 64%,
      var(--candle)    76%,
      var(--candle)    86%,
      #FFF0C8         92%,
      var(--candle)   100%);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: gild 3.6s linear infinite, gildGlow 3.6s ease-in-out infinite;
  }
}
@keyframes gild     { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@keyframes gildGlow {
  0%, 100% { filter: drop-shadow(0 0 9px rgba(224, 174, 78, 0.20)); }
  50%      { filter: drop-shadow(0 0 28px rgba(255, 226, 152, 0.55)); }
}
/* stand it down entirely, and fall back to flat gold rather than a stray slice */
@media (prefers-reduced-motion: reduce) {
  .credit-name {
    animation: none; background: none; filter: none;
    -webkit-text-fill-color: var(--candle); color: var(--candle);
  }
}

/* COMING  ~not now~  SOON */
.plate { font-family: var(--display); font-weight: 340; line-height: 0.98;
  letter-spacing: -0.02em; color: var(--bottle); margin: 0;
  font-size: clamp(3.1rem, 11vw, 8.5rem); text-wrap: nowrap; }
.plate-strike {
  display: inline-block; font-size: 0.30em; font-style: italic; font-weight: 400;
  letter-spacing: 0.01em; color: var(--ghost);
  text-decoration: line-through; text-decoration-thickness: 0.055em;
  transform: translateY(-0.62em) rotate(-3.5deg); margin-inline: 0.16em;
}
.tagline {
  font-family: var(--display); font-style: italic; font-weight: 340;
  font-size: clamp(1.15rem, 2.5vw, 1.85rem); color: var(--candle);
  line-height: 1.35; letter-spacing: 0.005em;
}

/* a hairline gold rule, used to open a section the way a rubric would */
.rubric { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.25rem; }
.rubric::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(224,174,78,0.5), transparent); }
.rubric .chrome { color: var(--candle); }

/* backlog teasers — deliberately unfinished-looking: dashed, unlit, no hover */
.hint {
  border: 1px dashed var(--line-2); border-radius: 4px; padding: 1.5rem 1.6rem;
  background: rgba(255, 246, 226, 0.014);
}
.hint p { max-width: none; }
.hint-num {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em;
  color: var(--candle); display: block; margin-bottom: 0.85rem;
}

/* ------------------------------------------------ the revenue plate ----- */
.ledger {
  border: 1px solid var(--line-2); border-radius: 4px; padding: 2rem 1.9rem;
  background:
    radial-gradient(22rem 12rem at 88% 0%, rgba(224, 174, 78, 0.08), transparent 66%),
    var(--surface);
}

/* ------------------------------------------------ the boof of lofe ------ */
/* an original character: a worn French volume, beret, cigarette, contempt.
   rigged in svg and driven by css — a few KB, sharp at any size, and it can
   actually respond to a click, which a video cannot. */
.bof { display: flex; gap: 2.75rem; align-items: center; flex-wrap: wrap; margin-top: 2.75rem; }
.bof-stage {
  width: 250px; flex: none; background: none; border: 0; padding: 0; cursor: pointer;
}
.bof-stage svg { display: block; width: 100%; height: auto; overflow: visible; }
.bof-stage:focus-visible { outline: 1.5px solid var(--candle); outline-offset: 12px; border-radius: 6px; }

.bof-title { font-family: var(--illum); font-size: 20px; fill: #E8C583; letter-spacing: .5px; }

/* he hovers, but wearily */
.bof-body { transform-box: fill-box; transform-origin: center bottom; animation: bofFloat 5.2s ease-in-out infinite; }
@keyframes bofFloat {
  0%, 100% { transform: translateY(0) rotate(-1.6deg); }
  50%      { transform: translateY(-13px) rotate(1.6deg); }
}

/* heavy lids sit at half-mast by default; a blink drops them the rest of the way */
.bof-lid { transform-box: fill-box; transform-origin: center top; animation: bofBlink 6.4s ease-in-out infinite; }
@keyframes bofBlink { 0%, 93%, 100% { transform: scaleY(1); } 95.5%, 97% { transform: scaleY(2); } }

.bof-pupil { transform-box: fill-box; animation: bofGlance 9s ease-in-out infinite; }
@keyframes bofGlance {
  0%, 42% { transform: translateX(0); }
  52%, 68% { transform: translateX(-3.5px); }
  80%, 100% { transform: translateX(0); }
}

.bof-leg { transform-box: fill-box; transform-origin: top center; animation: bofSway 4.6s ease-in-out infinite; }
.bof-leg.r { animation-delay: -2.1s; }
@keyframes bofSway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

.bof-ember { animation: bofEmber 5.4s ease-in-out infinite; }
@keyframes bofEmber { 0%, 58%, 100% { opacity: .5; } 70%, 79% { opacity: 1; } }

.bof-smoke circle { fill: #CFC7B4; opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: bofSmoke 5.4s ease-out infinite; }
.bof-smoke circle:nth-child(2) { animation-delay: 1.5s; }
.bof-smoke circle:nth-child(3) { animation-delay: 3.1s; }
@keyframes bofSmoke {
  0%   { opacity: 0;   transform: translate(0, 0) scale(.45); }
  14%  { opacity: .30; }
  100% { opacity: 0;   transform: translate(-17px, -74px) scale(2.4); }
}

/* speaking */
.bof-mouth { transform-box: fill-box; transform-origin: center; }
.bof-stage.talking .bof-mouth { animation: bofTalk .29s ease-in-out 9; }
@keyframes bofTalk { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1.75); } }
.bof-brow { transform-box: fill-box; transition: transform .35s var(--ease); }
.bof-stage.talking .bof-brow-a { transform: translateY(-6px); }
.bof-stage.talking .bof-brow-b { transform: translateY(-2px); }

.bof-says { max-width: 34ch; }
.bof-quote {
  font-family: var(--display); font-style: italic; font-weight: 340;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.45; color: var(--candle);
  min-height: 5.2em; transition: opacity .4s var(--ease);
}
.bof-quote.fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .bof-body, .bof-lid, .bof-pupil, .bof-leg, .bof-ember, .bof-smoke circle { animation: none; }
  .bof-stage.talking .bof-mouth { animation: none; }
  .bof-smoke circle { opacity: .18; }
}

/* ------------------------------------------------- the book of love ----- */
/* an original illuminated codex. opens on click, offers counsel, shuts up. */
.tome-wrap { display: flex; gap: 2.75rem; align-items: center; flex-wrap: wrap; margin-top: 2.75rem; }

/* the box is a two-page spread: the cover occupies the RIGHT leaf and swings
   onto the LEFT one, so an open book never escapes its own footprint. */
.tome {
  --bw: 172px; --bh: 232px;
  position: relative; width: calc(var(--bw) * 2); height: var(--bh); flex: none;
  perspective: 1600px; background: none; border: 0; padding: 0; cursor: pointer;
}
@media (max-width: 560px) { .tome { --bw: 128px; --bh: 174px; } }
.tome:focus-visible { outline: 1.5px solid var(--candle); outline-offset: 10px; border-radius: 4px; }

/* the page spread underneath — only visible once the cover is off it */
.tome-spread {
  position: absolute; inset: 0; border-radius: 4px; overflow: hidden;
  background: linear-gradient(90deg,
    #EFE6D0, #FBF6E9 44%, #DED2B4 50%, #FBF6E9 56%, #EFE6D0);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 0 40px rgba(92, 70, 38, 0.22);
  opacity: 0; transition: opacity 0.5s var(--ease) 0.3s;
}
.tome.open .tome-spread { opacity: 1; }
/* ruled lines, on the right-hand page */
.tome-spread i {
  position: absolute; left: 56%; right: 9%; height: 1px; background: #C7B99A; opacity: .75;
}
.tome-spread i:nth-child(1){top:30%} .tome-spread i:nth-child(2){top:41%}
.tome-spread i:nth-child(3){top:52%} .tome-spread i:nth-child(4){top:63%; right:30%}

/* the cover, hinged at the spine */
.tome-leaf {
  position: absolute; top: 0; bottom: 0; left: 50%; width: var(--bw);
  border-radius: 3px 6px 6px 3px;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform 1.15s var(--ease);
  background: linear-gradient(135deg, #402F1B, #23190F 62%);
  border: 1px solid #6D5228;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(224,174,78,.14);
  display: grid; place-items: center;
}
.tome.open .tome-leaf { transform: rotateY(-172deg); }
/* gilt rule inset on the board — front face only, or it reads mirrored */
.tome-leaf::before {
  content: ""; position: absolute; inset: 11px; border: 1px solid rgba(224, 174, 78, 0.42);
  border-radius: 2px; backface-visibility: hidden;
}
/* the inside of the board: plain endpaper, shown once the cover is turned */
.tome-leaf::after {
  content: ""; position: absolute; inset: 0; border-radius: 3px 6px 6px 3px;
  transform: rotateY(180deg); backface-visibility: hidden;
  background: linear-gradient(135deg, #2C2013, #1A1209 70%);
  box-shadow: inset 0 0 0 1px rgba(224, 174, 78, 0.16);
}
.tome-title {
  font-family: var(--illum); font-size: 1.6rem; line-height: 1.1; text-align: center;
  color: var(--candle-hi); text-shadow: 0 0 16px rgba(224,174,78,.35); letter-spacing: .02em;
  backface-visibility: hidden; position: relative; z-index: 1;
}

/* candle motes when it opens */
.tome-mote {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--candle-hi); opacity: 0; pointer-events: none;
}
.tome.open .tome-mote { animation: mote 2.4s var(--ease) infinite; }
.tome.open .tome-mote:nth-of-type(1){ left:64%; bottom:22%; animation-delay:.5s }
.tome.open .tome-mote:nth-of-type(2){ left:76%; bottom:16%; animation-delay:1.1s }
.tome.open .tome-mote:nth-of-type(3){ left:70%; bottom:28%; animation-delay:1.75s }
@keyframes mote {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  25%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-58px) scale(1.15); }
}

.tome-says { max-width: 34ch; }
.tome-quote {
  font-family: var(--display); font-style: italic; font-weight: 340;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.45; color: var(--candle);
  min-height: 4.4em; transition: opacity 420ms var(--ease);
}
.tome-quote.fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .tome-leaf { transition: none; }
  .tome.open .tome-mote { animation: none; opacity: .8; }
}

/* ------------------------------------------------------- the emeralds --- */
/* vector, so "8K" is just true at any size — it re-renders per device pixel
   rather than being resampled from a raster. */
/* the stones are shot on black velvet, so rather than framing them in a box we
   dissolve the plate's edges into the board — the two blacks meet and the
   photograph reads as part of the page instead of pasted onto it. */
.emeralds { position: relative; margin-top: 3rem; isolation: isolate; }
.emeralds img {
  display: block; width: 100%; height: auto;
  /* radii are a share of the box, so they must stay under ~100% or the falloff
     lands outside the crop and nothing fades. at 78%/82% the edge midpoints sit
     at ~64% of the gradient and the corners at ~88% — sides soften, corners go. */
  -webkit-mask-image: radial-gradient(78% 82% at 50% 50%, #000 62%, transparent 99%);
          mask-image: radial-gradient(78% 82% at 50% 50%, #000 62%, transparent 99%);
}
/* a pool of green light under the plate, so the glow spills past the crop */
.emeralds::before {
  content: ""; position: absolute; inset: -7% -5%; z-index: -1;
  background: radial-gradient(56% 60% at 50% 50%, rgba(26, 132, 92, 0.24), transparent 71%);
  filter: blur(36px);
  animation: emBreathe 9s ease-in-out infinite;
}
@keyframes emBreathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .emeralds::before { animation: none; } }

/* the one illuminated initial, used once on the page */
.illum-first::first-letter {
  -webkit-initial-letter: 3; initial-letter: 3;
  font-family: var(--illum); color: var(--candle);
  margin-right: 0.14em; font-weight: 400;
}