/* ==========================================================================
   DA EUN YOON — "The illuminated leaf"
   One storybook vocabulary for every page: aged parchment laid on an
   enchanted ground, iron-gall ink, rubricated headings and gilt rules.
   Paper texture, foxing and torn edges live on a filtered <span class="tale-paper">
   so the SVG displacement never touches the type sitting above it.
   ========================================================================== */

:root {
  --leaf: #e8d5ad;          /* parchment body        */
  --leaf-lit: #f5e7c6;      /* where the light falls */
  --sepia: #3b2a20;         /* iron-gall ink         */
  --sepia-soft: #6d5641;    /* faded ink             */
  --sepia-read: #402d20;    /* ink at reading size   */
  --rubric: #98402f;        /* rubricated red        */
  --gilt: #b1873c;
  --gilt-lit: #e6c37c;
  --gilt-deep: #7f5c22;
  --dusk: #240b2d;          /* the ground beneath    */
  --story-gold: #e7bd62;
  --story-cream: #fff0c2;
  --cream: #fffaf1;
  --fell: "IM Fell English", Georgia, serif;
  --caps: "Cinzel", Georgia, serif;
  --hand: "Cormorant Garamond", Georgia, serif;
  /* The site chrome — header strip, nav panel, the fixed backdrop behind the
     page — shows this under gradients of .82 to .95 opacity, so it gets a
     heavily compressed copy: 264KB rather than 680KB, on every page. */
  --curtain: url("assets/images/opening/curtain-veil.jpg");
  --fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--dusk); color: var(--sepia); font: 500 17.5px/1.62 var(--hand); }
body::before { content: ""; position: fixed; inset: 0; z-index: 99; pointer-events: none; opacity: .028; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* height:auto is what makes the width/height attributes safe. Without it the
   attribute lands as a presentational hint, both axes become definite, and any
   aspect-ratio the layout depends on is ignored. Rules that genuinely want a
   fixed height (.tale-arch img, .tale-plate img) are more specific and win. */
img, video { display: block; max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
h1, h2, h3, p { overflow-wrap: anywhere; }
.skip-link { position: fixed; left: -999px; top: 1rem; z-index: 200; background: white; padding: .75rem 1rem; }
.skip-link:focus { left: 1rem; }
:focus-visible { outline: 2px solid var(--story-gold); outline-offset: 3px; }

/* Reveals fire 240px before the viewport (see script.js) and resolve fast,
   so by the time a sheet scrolls into view it is simply there — no pop-in
   mid-read. The stagger delays are gone for the same reason: she asked for
   everything in a view to arrive together. */
.motion-ready .reveal { opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }
.motion-ready .delay-1, .motion-ready .delay-2 { transition-delay: 0s; }

/* Home already downloads the full-quality curtain for the opening dissolve,
   where it is the showpiece and only 20% shaded. Pointing its chrome at the
   same file means one image on that page instead of two. */
.page-home { --curtain: url("assets/images/opening/enchanted-watercolor-curtain.jpg"); }

/* --- Header --------------------------------------------------------------- */
.site-header { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; min-height: 82px; padding: .8rem max(4vw, 1.25rem); background: linear-gradient(90deg, rgba(18,2,24,.95), rgba(53,16,62,.88), rgba(18,2,24,.95)), var(--curtain) center 42% / cover; border-bottom: 1px solid rgba(231,189,98,.7); color: var(--story-cream); box-shadow: 0 6px 26px rgba(14,1,20,.5), inset 0 0 28px rgba(236,193,103,.08); }
.brand { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.brand span { color: var(--story-cream); font: 400 1.55rem/1 var(--fell); letter-spacing: -.025em; }
.brand small { margin-top: .35rem; color: var(--story-gold); font: 600 .64rem/1.25 var(--caps); letter-spacing: .08em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: clamp(.35rem, 1vw, .85rem); }
.site-nav a, .site-nav summary { position: relative; padding: .52rem .7rem; border: 1px solid transparent; border-radius: 3px; color: #f9ebc8; text-decoration: none; font: 400 .95rem/1 var(--fell); transition: color .2s, border-color .2s, background .2s, transform .2s; }
.site-nav summary { display: flex; align-items: center; gap: .45rem; list-style: none; cursor: pointer; }
.site-nav summary::-webkit-details-marker { display: none; }
.site-nav summary span { color: var(--story-gold); font-size: .72rem; transition: transform .2s; }
.nav-group { position: relative; }
.nav-group[open] summary span { transform: rotate(180deg); }
.site-nav a:hover, .site-nav a.active, .site-nav summary:hover, .nav-group.active > summary, .nav-group[open] > summary { border-color: rgba(231,189,98,.58); background: rgba(255,238,185,.1); color: #ffe09a; transform: translateY(-1px); }
.nav-dropdown { position: absolute; z-index: 50; top: calc(100% + .75rem); left: 50%; display: none; width: max-content; min-width: 210px; padding: .5rem; border: 1px solid rgba(231,189,98,.62); background: linear-gradient(rgba(45,9,53,.97), rgba(28,4,35,.99)), var(--curtain) center / cover; box-shadow: 0 14px 30px rgba(13,1,17,.3); transform: translateX(-50%); }
.nav-group[open] .nav-dropdown { display: grid; }
.nav-dropdown a { display: block; padding: .72rem .85rem; border: 0; border-bottom: 1px solid rgba(231,189,98,.18); border-radius: 0; white-space: nowrap; }
.nav-dropdown a:last-child { border-bottom: 0; }
.nav-dropdown a:hover, .nav-dropdown a.active { border-color: rgba(231,189,98,.18); background: rgba(255,238,185,.1); transform: none; }
.site-nav .nav-contact { padding: .58rem .85rem; border: 1px solid #d8ad54; border-radius: 3px; background: linear-gradient(145deg, #f3e3b9, #d5af6c 60%, #efd79e); color: #3a1c27; box-shadow: inset 0 0 0 2px rgba(255,246,218,.35), 0 4px 12px rgba(15,2,19,.22); }
.site-nav .nav-contact:hover, .site-nav .nav-contact.active { border-color: #f0d184; background: linear-gradient(145deg, #fff0c6, #e1bc73 60%, #f4dfa9); color: #32123d; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 12px; }
.menu-toggle span { display: block; height: 2px; margin: 6px 0; background: var(--story-gold); transition: transform .2s; }

/* --- Opening curtain ------------------------------------------------------ */
.stage-opening { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: transparent; color: var(--cream); }
.stage-opening.is-gone { display: none; pointer-events: none; }

/* The veil, dissolved by spreading ink rather than pulled aside ------------- */
.ink-veil { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; }
.ink-shade { fill: rgba(16, 2, 22, .2); }
.ink-blot { transform: translate(var(--x), var(--y)) rotate(var(--r0)) scale(.004); }
[data-ink-front] .ink-blot { mix-blend-mode: darken; }
.stage-opening.is-open .ink-blot {
  animation: inkSpread 1900ms cubic-bezier(.26, .66, .36, 1) var(--d) both;
}
.stage-opening.is-open .ink-blot-drop { animation-duration: 1200ms; }
@keyframes inkSpread {
  from { transform: translate(var(--x), var(--y)) rotate(var(--r0)) scale(.004); }
  to   { transform: translate(var(--x), var(--y)) rotate(var(--r1)) scale(calc(var(--s) / 100)); }
}
/* pigment pooling where the paper is still wet */
.ink-rim rect { fill: #1c0526; }
.ink-rim { opacity: .3; }
.stage-opening.is-open .ink-veil { animation: inkVeilSoak 900ms ease-in 2650ms both; }
@keyframes inkVeilSoak { to { opacity: 0; } }

/* gold motes catching the light along the wet edge */
.ink-sparkles { position: absolute; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; }
.ink-mote {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fffdf0, #ffd982 52%, rgba(224, 158, 54, 0) 78%);
  box-shadow: 0 0 10px rgba(255, 214, 130, .85);
  animation: inkMote 1150ms ease-out forwards;
}
.ink-mote.is-star {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #ffe09b;
  font: 400 .78rem/1 Georgia, serif;
  text-shadow: 0 0 12px rgba(255, 213, 126, .95);
}
@keyframes inkMote {
  from { opacity: 0; transform: translate(0, 0) scale(.2); }
  22%  { opacity: 1; transform: translate(0, 0) scale(var(--scale)); }
  to   { opacity: 0; transform: translate(var(--drift), var(--rise)) scale(calc(var(--scale) * .35)); }
}
.opening-copy { position: relative; top: -3vh; z-index: 3; width: min(82%, 760px); padding: clamp(1.35rem, 2.8vw, 2.2rem) clamp(1.2rem, 4vw, 3.4rem) clamp(1.25rem, 2.6vw, 1.9rem); border: 1px solid rgba(229,181,77,.48); outline: 1px solid rgba(244,211,137,.25); outline-offset: 6px; background: radial-gradient(ellipse at 50% 15%, rgba(255,235,178,.08), transparent 58%), rgba(35,7,42,.12); color: #fff0c7; box-shadow: inset 0 0 35px rgba(246,211,130,.035), 0 12px 40px rgba(14,0,18,.12); text-align: center; text-shadow: 0 2px 16px rgba(12,0,18,.45); transition: opacity .24s ease, transform .24s ease; }
.opening-copy::before, .opening-copy::after { position: absolute; left: 50%; padding: 0 .65rem; background: #4e1c59; color: #e7b94e; font: 400 1.35rem/1 var(--fell); transform: translateX(-50%); }
.opening-copy::before { content: "⁂"; top: -.72rem; }
.opening-copy::after { content: "✦\FE0E"; bottom: -.62rem; font-size: .8rem; }
.stage-opening.is-open .opening-copy { opacity: 0; transform: scale(.965) translateY(-6px); pointer-events: none; transition: opacity .5s ease, transform .7s cubic-bezier(.3,.7,.3,1); }
.stage-opening.is-open .opening-stars { opacity: 0; transition: opacity .8s ease; }
.opening-eyebrow { margin: 0 0 .85rem; color: #f7dc98; font: 600 clamp(0.72rem, 1.08vw, 0.912rem)/1.4 var(--caps); letter-spacing: .2em; text-transform: uppercase; }
/* Not a heading: the curtain is a splash, and the page's real h1 is her
   name inside <main>. Two h1s saying "Da Eun Yoon" helped nobody. */
.opening-title { margin: 0; }
.opening-name { display: block; color: #fff1be; font: 400 clamp(3.4rem, 6.7vw, 6.35rem)/.9 var(--fell); letter-spacing: -.035em; text-shadow: 0 3px 18px rgba(22,2,26,.55), 0 0 24px rgba(255,219,120,.12); }
.opening-welcome { display: block; margin-top: .18em; color: #f6d477; font: italic 400 clamp(2rem, 4vw, 3.55rem)/.96 var(--fell); letter-spacing: -.02em; }
.opening-intro { max-width: 560px; margin: 1.2rem auto 1.45rem; color: #ffe9ad; font: italic 500 clamp(1.218rem, 1.682vw, 1.485rem)/1.5 var(--hand); }
.opening-button { position: relative; display: inline-flex; align-items: center; gap: .9rem; min-width: 260px; padding: .72rem 1.2rem; overflow: hidden; border: 1px solid #7d5528; border-radius: 3px; outline: 1px solid rgba(241,211,147,.58); outline-offset: 4px; background: radial-gradient(circle at 18% 22%, rgba(255,255,255,.46), transparent 25%), radial-gradient(circle at 82% 78%, rgba(126,77,29,.19), transparent 33%), linear-gradient(145deg,#f3e3b9,#d5af6c 58%,#efd79e); color: #3a1c27; box-shadow: 0 10px 24px rgba(0,0,0,.31), inset 0 0 20px rgba(116,67,22,.15), inset 0 0 0 2px rgba(255,246,218,.4); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.opening-button::before, .opening-button::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #4a1d58; transform: translateY(-50%); }
.opening-button::before { left: -8px; }.opening-button::after { right: -8px; }
.opening-button:hover { transform: translateY(-3px); box-shadow: 0 13px 28px rgba(0,0,0,.36), inset 0 0 0 2px rgba(255,248,220,.58); }
.opening-button > span:last-child { display: grid; text-align: left; font: 400 1.1rem/1.05 var(--fell); letter-spacing: .01em; }
.opening-button small { margin-bottom: .25rem; font: 600 .48rem/1 var(--caps); letter-spacing: .16em; text-transform: uppercase; }
.play-glyph { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #32123d; background: radial-gradient(circle at 35% 30%, #7b4785, #42174f 70%); color: #f2d591; box-shadow: inset 0 0 0 2px rgba(240,207,127,.16); padding: 0 0 1px 2px; transform: rotate(45deg); }
.opening-button .play-glyph { font-size: 0; }
.opening-button .play-glyph::after { content: "▶"; font-size: .8rem; transform: rotate(-45deg); }
.opening-skip { display: block; margin: 1.25rem auto 0; padding: .25rem 0; border: 0; border-bottom: 1px solid rgba(255,232,170,.72); background: transparent; color: #fff3cf; font: 500 .66rem var(--caps); letter-spacing: .08em; cursor: pointer; }
.opening-skip:hover { color: white; border-color: white; }
.opening-audio-stop { position: fixed; z-index: 110; top: max(5.8rem, 9vh); right: max(1rem,3vw); display: inline-flex; align-items: center; gap: .65rem; padding: .72rem 1rem; border: 1px solid #ddb956; border-radius: 99px; background: #32103d; color: #fff0bc; box-shadow: 0 7px 20px rgba(25,4,30,.28), inset 0 0 0 2px rgba(255,223,135,.08); font: 600 .62rem var(--caps); letter-spacing: .06em; cursor: pointer; animation: stopControlIn .28s ease both; }
.opening-audio-stop[hidden] { display: none; }
.opening-audio-stop span { color: #f4cf72; font-size: .58rem; }
.opening-stars { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity .58s ease; }
.opening-stars i { position: absolute; font-style: normal; color: #f6d680; text-shadow: 0 0 18px rgba(255,220,123,.46); animation: twinkle 2.2s ease-in-out infinite alternate; }
.opening-stars i:nth-child(1) { left: 12%; top: 17%; font-size: 2rem; }.opening-stars i:nth-child(2) { right: 16%; top: 24%; font-size: 3rem; animation-delay: .7s; }.opening-stars i:nth-child(3) { left: 18%; bottom: 13%; font-size: 4rem; animation-delay: 1.2s; }.opening-stars i:nth-child(4) { right: 12%; bottom: 16%; font-size: 1.6rem; }
.opening-stars .opening-moon { right: 8%; top: 8%; color: #ffe5a1; font-size: clamp(3.2rem, 5vw, 5rem); line-height: 1; text-shadow: 0 0 22px rgba(255,221,126,.58); animation-delay: .35s; }
@keyframes twinkle { to { transform: scale(.55) rotate(20deg); opacity: .3; } }
@keyframes stopControlIn { from { opacity: 0; transform: translateY(10px); } }

/* --- Shared audio player skeleton ---------------------------------------- */
.audio-player { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.audio-toggle { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; }
.audio-toggle span { padding-left: 2px; }
.audio-player.is-playing .audio-toggle span { font-size: 0; padding: 0; }
.audio-player.is-playing .audio-toggle span::after { content: "Ⅱ"; font-size: .85rem; }
.audio-info { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem .8rem; }
.audio-info strong { grid-column: 1/-1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-track { position: relative; height: 5px; overflow: hidden; background: rgba(23,35,31,.18); cursor: pointer; }
.audio-track i { position: absolute; inset: 0; width: auto; transform: scaleX(0); transform-origin: left center; pointer-events: none; }

/* --- The ground ----------------------------------------------------------- */
.tale-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The ground moves onto the fixed layer below, so the starfield can sit
   between it and the page. main painting its own gradient buried them. */
main { position: relative; }
main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(168deg, rgba(34, 10, 44, .86), rgba(84, 42, 100, .68) 44%, rgba(26, 10, 38, .89)),
    var(--curtain) center / cover;
}

/* --- Chapter marks written straight onto the ground ---------------------- */
.tale-chapter-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.7rem, 1.3vw, 1.25rem);
  margin: 0 0 clamp(1.15rem, 2vw, 2rem);
  color: #ecd29a;
  font: 600 clamp(0.72rem, 1.02vw, 0.888rem)/1 var(--caps);
  letter-spacing: .34em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 16px rgba(10, 0, 16, .7);
}
.tale-chapter-mark i { color: #d9b262; font-size: .85em; font-style: normal; text-shadow: 0 0 10px rgba(255, 220, 140, .55); }
.tale-chapter-mark::before,
.tale-chapter-mark::after {
  content: "";
  flex: 0 1 auto;
  width: clamp(26px, 9vw, 158px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230, 195, 124, .75));
}
.tale-chapter-mark::after { transform: scaleX(-1); }

.tale-flourish {
  height: 30px;
  margin: clamp(1.5rem, 2.6vw, 2.6rem) auto 0;
  font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 36'%3E%3Cg fill='none' stroke='%23d9b768' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M16 18 H126'/%3E%3Cpath d='M234 18 H344'/%3E%3Cpath d='M126 18 C138 8 150 8 156 14'/%3E%3Cpath d='M126 18 C138 28 150 28 156 22'/%3E%3Cpath d='M234 18 C222 8 210 8 204 14'/%3E%3Cpath d='M234 18 C222 28 210 28 204 22'/%3E%3C/g%3E%3Cg fill='%23d9b768'%3E%3Cpath d='M180 7 L191 18 L180 29 L169 18 Z' stroke='%23f0d69a' stroke-width='1'/%3E%3Ccircle cx='160' cy='18' r='2.2'/%3E%3Ccircle cx='200' cy='18' r='2.2'/%3E%3Cpath d='M6 18 L12 14.6 L18 18 L12 21.4 Z'/%3E%3Cpath d='M342 18 L348 14.6 L354 18 L348 21.4 Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 8px rgba(10, 0, 16, .5));
}

/* --- A sheet of old paper ------------------------------------------------ */
.tale-leaf, .tale-sheet { position: relative; isolation: isolate; }

.tale-paper {
  position: absolute;
  z-index: 0;
  inset: -9px;
  background-color: var(--leaf);
  background-image:
    /* where the light falls across the sheet */
    radial-gradient(ellipse 58% 42% at 22% 12%, rgba(255, 250, 230, .62), transparent 66%),
    /* foxing — the rust-brown blooms of a century in a drawer */
    radial-gradient(circle 74px at 50% 50%, rgba(146, 79, 30, .30), transparent 62%),
    radial-gradient(circle 52px at 50% 50%, rgba(133, 70, 27, .28), transparent 60%),
    radial-gradient(circle 38px at 50% 50%, rgba(120, 63, 26, .26), transparent 58%),
    radial-gradient(circle 30px at 50% 50%, rgba(147, 88, 36, .18), transparent 60%),
    radial-gradient(circle 62px at 50% 50%, rgba(126, 66, 25, .28), transparent 60%),
    radial-gradient(circle 26px at 50% 50%, rgba(139, 82, 33, .16), transparent 58%),
    radial-gradient(circle 34px at 50% 50%, rgba(132, 74, 29, .15), transparent 60%),
    radial-gradient(circle 22px at 50% 50%, rgba(142, 84, 34, .17), transparent 56%),
    /* laid lines and chain lines of hand-made paper */
    repeating-linear-gradient(90deg, rgba(112, 78, 42, .07) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(112, 78, 42, .05) 0 1px, transparent 1px 27px),
    /* burnt, handled edges */
    radial-gradient(ellipse 90% 88% at 50% 48%, transparent 34%, rgba(97, 55, 20, .5) 99%),
    linear-gradient(150deg, #eeddb4, #e2cda1 40%, #d5bd8c 74%, #e4d2ab);
  background-blend-mode: soft-light, multiply, multiply, multiply, multiply, multiply, multiply, multiply, multiply, multiply, multiply, multiply, normal;
  background-repeat: no-repeat;
  background-size: auto, 100px 100px, 100px 100px, 100px 100px, 100px 100px, 100px 100px, 100px 100px, 100px 100px, 100px 100px, auto, auto, auto, auto;
  background-position:
    0 0,
    calc(7% - 43px) calc(76% + 26px),
    calc(89% + 39px) calc(19% - 31px),
    calc(62% + 12px) calc(92% + 42px),
    calc(33% - 17px) calc(41% - 9px),
    calc(96% + 46px) calc(64% + 14px),
    calc(48% - 2px) calc(21% - 29px),
    calc(18% - 32px) calc(33% - 17px),
    calc(78% + 28px) calc(47% - 3px),
    0 0, 0 0, 0 0, 0 0;
  filter: url(#deckle) drop-shadow(0 18px 30px rgba(14, 2, 20, .55));
}

.tale-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--fiber);
  background-size: 190px 190px;
  mix-blend-mode: multiply;
  opacity: .26;
}
.tale-sheet > .tale-paper { filter: url(#deckle-wide) drop-shadow(0 20px 34px rgba(14, 2, 20, .55)); }
.tale-leaf-recto > .tale-paper { transform: scaleX(-1); }
.tale-slip > .tale-paper { transform: scaleY(-1); }
.tale-sheet > .tale-paper { transform: scale(-1, -1); }

/* --- Gilt frame ruled inside every sheet --------------------------------- */
.tale-leaf-inner, .tale-sheet-inner { position: relative; }
.tale-leaf-inner::before, .tale-sheet-inner::before,
.tale-leaf-inner::after, .tale-sheet-inner::after {
  content: "";
  position: absolute;
  inset: clamp(.7rem, 1.1vw, 1.15rem);
  pointer-events: none;
}
.tale-leaf-inner::before, .tale-sheet-inner::before {
  border: 1px solid rgba(150, 112, 48, .42);
  outline: 1px solid rgba(150, 112, 48, .17);
  outline-offset: 6px;
}
.tale-leaf-inner::after, .tale-sheet-inner::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(0 0)'%3E%3Cg fill='none' stroke='%23a37c33' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M5 35 C5 15 15 5 35 5'/%3E%3Cpath d='M35 5 C27 7 22 11 21 17 C21 21 24 23 27 22 C30 21 30 17 27.5 16.5'/%3E%3Cpath d='M5 35 C7 27 11 22 17 21 C21 21 23 24 22 27 C21 30 17 30 16.5 27.5'/%3E%3C/g%3E%3Cpath d='M12 8 L15 12 L12 16 L9 12 Z' fill='%23a37c33' transform='rotate(45 12 12)'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(40 0) scale(-1 1)'%3E%3Cg fill='none' stroke='%23a37c33' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M5 35 C5 15 15 5 35 5'/%3E%3Cpath d='M35 5 C27 7 22 11 21 17 C21 21 24 23 27 22 C30 21 30 17 27.5 16.5'/%3E%3Cpath d='M5 35 C7 27 11 22 17 21 C21 21 23 24 22 27 C21 30 17 30 16.5 27.5'/%3E%3C/g%3E%3Cpath d='M12 8 L15 12 L12 16 L9 12 Z' fill='%23a37c33' transform='rotate(45 12 12)'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(0 40) scale(1 -1)'%3E%3Cg fill='none' stroke='%23a37c33' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M5 35 C5 15 15 5 35 5'/%3E%3Cpath d='M35 5 C27 7 22 11 21 17 C21 21 24 23 27 22 C30 21 30 17 27.5 16.5'/%3E%3Cpath d='M5 35 C7 27 11 22 17 21 C21 21 23 24 22 27 C21 30 17 30 16.5 27.5'/%3E%3C/g%3E%3Cpath d='M12 8 L15 12 L12 16 L9 12 Z' fill='%23a37c33' transform='rotate(45 12 12)'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='rotate(180 20 20)'%3E%3Cg fill='none' stroke='%23a37c33' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M5 35 C5 15 15 5 35 5'/%3E%3Cpath d='M35 5 C27 7 22 11 21 17 C21 21 24 23 27 22 C30 21 30 17 27.5 16.5'/%3E%3Cpath d='M5 35 C7 27 11 22 17 21 C21 21 23 24 22 27 C21 30 17 30 16.5 27.5'/%3E%3C/g%3E%3Cpath d='M12 8 L15 12 L12 16 L9 12 Z' fill='%23a37c33' transform='rotate(45 12 12)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: left top, right top, left bottom, right bottom;
  /* the scrolls straddle the ruled frame rather than floating inside it */
  margin: -5px;
  padding: 5px;
}

/* --- The spread ---------------------------------------------------------- */
.tale-spread { padding: clamp(2rem, 3.4vw, 3.4rem) max(4vw, 1.25rem) clamp(1.5rem, 2.4vw, 2.4rem); }
.tale-book {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: stretch;
  gap: clamp(1.1rem, 2.2vw, 2.6rem);
  width: min(1500px, 100%);
  margin: 0 auto;
}
.tale-book-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tale-leaf-verso { --tilt: -.5deg; }
.tale-leaf-recto { --tilt: .42deg; }
.tale-slip { --tilt: .3deg; width: min(1500px, 100%); margin: clamp(1.3rem, 2.4vw, 2.4rem) auto 0; }
.tale-leaf { transform: rotate(var(--tilt, 0deg)); }
.motion-ready .tale-leaf.reveal { opacity: 0; transform: translateY(24px) rotate(var(--tilt, 0deg)); }
.motion-ready .tale-leaf.reveal.is-visible { opacity: 1; transform: rotate(var(--tilt, 0deg)); }

.tale-leaf-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.9rem, 3vw, 3.1rem) clamp(1.6rem, 2.7vw, 2.9rem) clamp(1.9rem, 2.8vw, 2.8rem);
}

/* --- Verso: the portrait plate ------------------------------------------- */
.tale-portrait {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 1.7vw, 1.6rem);
  margin: 0;
}
.tale-arch {
  position: relative;
  width: min(430px, 100%);
  aspect-ratio: .88;
  padding: 9px;
  border-radius: 50% 50% 5px 5px / 40% 40% 4px 4px;
  background: linear-gradient(158deg, #f0d69a, #b1873c 34%, #7d5a20 52%, #dcb96f 74%, #a67c33);
  box-shadow:
    0 20px 34px rgba(30, 12, 6, .38),
    inset 0 0 0 1px rgba(255, 243, 208, .55);
}
.tale-arch::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50% 50% 4px 4px / 40% 40% 3px 3px;
  border: 1px solid rgba(74, 47, 12, .45);
  pointer-events: none;
  z-index: 2;
}
.tale-arch img {
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 3px 3px / 39% 39% 2px 2px;
  object-fit: cover;
  object-position: 56% 34%;
  /* Sepia at .46 was flattening her skin to beige and her lips to brown.
     Pulled back to a warm cast rather than a wash, with the saturation and
     contrast raised to put the life back in. */
  filter: sepia(.2) saturate(1.36) contrast(1.07) brightness(1.05);
}
.tale-arch::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50% 50% 3px 3px / 39% 39% 2px 2px;
  background:
    radial-gradient(ellipse at 50% 26%, rgba(255, 240, 205, .18), transparent 56%),
    linear-gradient(184deg, rgba(255, 246, 216, .1) 12%, transparent 46%, rgba(58, 33, 16, .38));
  box-shadow: inset 0 0 44px rgba(62, 36, 16, .4);
  pointer-events: none;
}
.tale-portrait figcaption {
  color: var(--sepia-soft);
  font: italic 500 clamp(1.16rem, 1.45vw, 1.334rem)/1.45 var(--hand);
  text-align: center;
}
.tale-portrait figcaption span {
  display: block;
  margin-top: .4rem;
  color: var(--gilt-deep);
  font: 400 clamp(.86rem, 1vw, .95rem)/1 var(--fell);
  letter-spacing: .12em;
}

/* --- A rectangular plate: photographs and moving pictures ---------------- */
.tale-plate {
  position: relative;
  padding: 8px;
  background: linear-gradient(158deg, #f0d69a, #b1873c 34%, #7d5a20 52%, #dcb96f 74%, #a67c33);
  box-shadow: 0 16px 28px rgba(30, 12, 6, .34), inset 0 0 0 1px rgba(255, 243, 208, .55);
}
.tale-plate::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(74, 47, 12, .45);
  pointer-events: none;
  z-index: 2;
}
.tale-plate img, .tale-plate video {
  width: 100%;
  background: #1d0a24;
  filter: sepia(.4) saturate(1.14) contrast(1.03);
}
.tale-plate img { height: 100%; object-fit: cover; }
/* Posters and footage rarely agree on shape; the frame decides. */
.tale-plate video { aspect-ratio: 16 / 9; object-fit: cover; }
.tale-plate-portrait img { aspect-ratio: .82; }
.tale-figure { display: flex; flex-direction: column; gap: clamp(.75rem, 1.3vw, 1.15rem); margin: 0; }
.tale-figure-fill { flex: 1; justify-content: center; }
.tale-figure figcaption {
  color: var(--sepia-soft);
  font: italic 500 clamp(1.137rem, 1.392vw, 1.299rem)/1.45 var(--hand);
  text-align: center;
}
.tale-figure figcaption span {
  display: block;
  margin-top: .4rem;
  color: var(--gilt-deep);
  font: 400 clamp(.86rem, 1vw, .95rem)/1.3 var(--fell);
  font-style: normal;
  letter-spacing: .12em;
}

/* --- An illuminated emblem, where a page has no photograph --------------- */

/* --- Recto: the opening line --------------------------------------------- */
.tale-opening {
  display: flow-root;
  margin: 0;
  color: var(--sepia);
  font: 400 clamp(2.1rem, 3.15vw, 3.35rem)/1.16 var(--fell);
  letter-spacing: 0;
}
.tale-opening em { color: var(--rubric); font-style: italic; }

/* The descriptors used to run on inside the title and pushed it to three
   lines. Demoted to a second line under it, they wrap beside the versal
   instead of below it, and the step down in family, size and colour keeps the
   two apart without either going quiet. */
.tale-title-sub {
  display: block;
  max-width: 46ch;
  margin-top: clamp(.45rem, .8vw, .7rem);
  color: var(--sepia-read);
  font: italic 500 clamp(1.18rem, 1.5vw, 1.42rem)/1.45 var(--hand);
  letter-spacing: .004em;
}
.tale-versal {
  float: left;
  display: grid;
  place-items: center;
  width: clamp(72px, 7.1vw, 104px);
  height: clamp(72px, 7.1vw, 104px);
  margin: .3rem clamp(.7rem, 1.1vw, 1.05rem) .15rem 0;
  border: 1px solid var(--gilt-deep);
  outline: 1px solid rgba(177, 135, 60, .42);
  outline-offset: 3px;
  background:
    radial-gradient(circle at 26% 20%, rgba(255, 226, 160, .32), transparent 58%),
    linear-gradient(150deg, #52215f, #2b0d36 58%, #46184f);
  box-shadow: inset 0 0 0 2px rgba(232, 197, 128, .3), 0 8px 18px rgba(46, 22, 10, .32);
  color: #f2d28c;
  font: 400 clamp(3.2rem, 4.5vw, 4.5rem)/1 var(--fell);
  text-shadow: 0 2px 12px rgba(18, 2, 24, .7);
}

.tale-byline { margin: clamp(1.2rem, 1.9vw, 1.9rem) 0 clamp(1.4rem, 2.2vw, 2.1rem); text-align: center; }
.tale-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.7rem, 1.3vw, 1.25rem);
  color: var(--sepia);
  font: 400 clamp(1.5rem, 2.1vw, 2.15rem)/1 var(--fell);
}
.tale-name::before, .tale-name::after {
  content: "";
  width: clamp(26px, 6vw, 78px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gilt));
}
.tale-name::after { transform: scaleX(-1); }
/* The epithet is the half people remember, so it carries the ink weight and
   the italic; the trade below it stays in the quiet Cinzel caps that every
   other detail line uses. Two devices apart, so neither shouts over the name. */
.tale-epithet {
  display: block;
  margin-top: .5rem;
  color: var(--rubric);
  font: italic 600 clamp(1.08rem, 1.36vw, 1.28rem)/1.3 var(--hand);
  letter-spacing: .015em;
}

.tale-role {
  display: block;
  margin-top: .55rem;
  color: var(--gilt-deep);
  font: 600 clamp(0.648rem, 0.912vw, 0.792rem)/1.5 var(--caps);
  letter-spacing: .26em;
  text-transform: uppercase;
}

/* --- Rubricated section headings ----------------------------------------- */
.tale-rubric {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 clamp(.7rem, 1.1vw, 1rem);
  color: var(--rubric);
  font: 600 clamp(0.696rem, 0.96vw, 0.828rem)/1.4 var(--caps);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.tale-rubric span::before { content: "✦\FE0E"; margin-right: .55rem; color: var(--gilt); font-size: .82em; }
.tale-rubric::after {
  content: "";
  flex: 1;
  min-width: 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(177, 135, 60, .6), transparent);
}
.tale-rubric-mid { justify-content: center; }
.tale-rubric-mid::after { content: none; }
.tale-rubric-mid::before {
  content: "";
  flex: 1;
  min-width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(177, 135, 60, .6));
}
.tale-rubric-mid span { flex: 0 0 auto; }
.tale-rubric-mid span::after { content: "\FE0E"; }

/* --- Headings and prose inside a sheet ----------------------------------- */
.tale-head {
  max-width: 26ch;
  color: var(--sepia);
  text-wrap: balance;
  font: 400 clamp(1.95rem, 3.3vw, 3.5rem)/1.08 var(--fell);
}
.tale-head em { color: var(--rubric); font-style: italic; }
.tale-head-mid { max-width: 30ch; margin-inline: auto; text-align: center; }
.tale-subhead {
  color: var(--sepia);
  text-wrap: balance;
  font: 400 clamp(1.35rem, 2vw, 1.95rem)/1.15 var(--fell);
}
.tale-subhead em { color: var(--rubric); font-style: italic; }

.tale-lede {
  max-width: 62ch;
  margin: clamp(1rem, 1.7vw, 1.5rem) 0 0;
  color: var(--sepia-read);
  font: italic 500 clamp(1.276rem, 1.682vw, 1.566rem)/1.5 var(--hand);
}
.tale-prose { max-width: 66ch; }
.tale-prose p {
  margin: clamp(.85rem, 1.3vw, 1.1rem) 0 0;
  color: var(--sepia-read);
  font: 500 clamp(1.218rem, 1.415vw, 1.346rem)/1.62 var(--hand);
}
.tale-prose p:first-child { margin-top: 0; }
.tale-prose em { font-style: italic; }
.tale-prose strong { color: var(--sepia); font-weight: 700; }
.tale-prose-mid { margin-inline: auto; text-align: center; }

/* Pricing was fine print at the foot of the page; a buyer looking for it had
   to read past everything else. Given its own panel it can be found. */
.tale-pricing {
  max-width: 78ch;
  margin: clamp(1.9rem, 3vw, 2.8rem) 0 0;
  padding: clamp(1.3rem, 2vw, 1.8rem) clamp(1.4rem, 2.2vw, 2rem);
  border: 1px solid rgba(150, 112, 48, .46);
  outline: 1px solid rgba(177, 135, 60, .22);
  outline-offset: 4px;
  background: rgba(255, 245, 216, .4);
}

.tale-pricing .tale-prose { margin-top: .7rem; }
.tale-pricing .tale-tags { margin-top: clamp(.9rem, 1.4vw, 1.15rem); }
.tale-pricing .tale-seal { margin-top: clamp(1.1rem, 1.7vw, 1.45rem); }
.tale-pricing-note {
  margin: clamp(.9rem, 1.4vw, 1.15rem) 0 0;
  color: var(--sepia-soft);
  font: italic 500 clamp(1.02rem, 1.18vw, 1.12rem)/1.5 var(--hand);
}

.tale-note {
  max-width: 78ch;
  margin: clamp(1.3rem, 2.1vw, 2rem) 0 0;
  padding-top: clamp(.8rem, 1.2vw, 1.05rem);
  border-top: 1px solid rgba(150, 112, 48, .34);
  color: var(--sepia-soft);
  font: italic 500 clamp(1.102rem, 1.276vw, 1.206rem)/1.5 var(--hand);
}
.tale-note-mid { margin-inline: auto; text-align: center; }

.tale-quote {
  position: relative;
  margin: clamp(1.4rem, 2.2vw, 2.1rem) 0 0;
  padding: clamp(1rem, 1.7vw, 1.5rem) 0 clamp(1rem, 1.7vw, 1.5rem) clamp(2.2rem, 3.4vw, 3.2rem);
  border-top: 1px solid rgba(150, 112, 48, .34);
  border-bottom: 1px solid rgba(150, 112, 48, .34);
  color: var(--sepia);
  font: italic 400 clamp(1.25rem, 1.9vw, 1.75rem)/1.32 var(--fell);
}
.tale-quote::before {
  content: "“";
  position: absolute;
  left: 0;
  top: clamp(.5rem, 1.1vw, .95rem);
  color: var(--gilt);
  font: 400 clamp(3rem, 4.6vw, 4.4rem)/1 var(--fell);
}
.tale-quote strong { display: block; margin-top: .4rem; color: var(--rubric); font-style: normal; font-weight: 400; }
.tale-quote cite {
  display: block;
  margin-top: .8rem;
  color: var(--gilt-deep);
  font: 600 .58rem/1 var(--caps);
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* --- Notes written in the margin ----------------------------------------- */
.tale-dl {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  gap: clamp(.9rem, 1.7vw, 2rem);
  margin: 0;
}
.tale-dl dt {
  color: var(--sepia);
  font: 600 clamp(0.66rem, 0.864vw, 0.744rem)/1.35 var(--caps);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tale-dl dt::before { content: "✦\FE0E"; margin-right: .45rem; color: var(--gilt); font-size: .72em; }
.tale-dl dd {
  margin: .42rem 0 0;
  color: var(--sepia-soft);
  font: 500 clamp(1.09rem, 1.276vw, 1.218rem)/1.42 var(--hand);
}
.tale-dl dd em { font-style: italic; }
.tale-slip .tale-leaf-inner { padding: clamp(1.5rem, 2.3vw, 2.3rem) clamp(1.6rem, 2.7vw, 2.9rem) clamp(1.7rem, 2.5vw, 2.5rem); }

/* --- Cards ruled onto the sheet ------------------------------------------ */
.tale-cards {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: clamp(.9rem, 1.6vw, 1.5rem);
  margin: clamp(1.3rem, 2.1vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
}
.tale-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1.1rem, 1.7vw, 1.5rem);
  border: 1px solid rgba(150, 112, 48, .45);
  background: linear-gradient(160deg, rgba(255, 250, 231, .58), rgba(246, 233, 202, .3));
  box-shadow: inset 0 0 22px rgba(120, 78, 34, .07), 4px 5px 0 rgba(96, 60, 24, .12);
  text-decoration: none;
}
.tale-card > span {
  color: var(--rubric);
  font: 600 clamp(0.624rem, 0.84vw, 0.72rem)/1.4 var(--caps);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.tale-card h3 {
  color: var(--sepia);
  text-wrap: balance;
  font: 400 clamp(1.3rem, 1.8vw, 1.68rem)/1.1 var(--fell);
}
.tale-card p {
  margin: 0;
  color: var(--sepia-read);
  font: 500 clamp(1.137rem, 1.299vw, 1.253rem)/1.5 var(--hand);
}
.tale-card ul { margin: .2rem 0 0; padding: 0; list-style: none; }
.tale-card li {
  padding: .42rem 0;
  border-bottom: 1px dotted rgba(140, 104, 58, .5);
  color: var(--sepia-read);
  font: 500 clamp(1.102rem, 1.253vw, 1.206rem)/1.4 var(--hand);
}
.tale-card li::before { content: "✦\FE0E"; margin-right: .5rem; color: var(--gilt); font-size: .68em; }
.tale-card li:last-child { border-bottom: 0; }
.tale-card > b {
  margin-top: auto;
  padding-top: .7rem;
  color: var(--rubric);
  font: 600 .57rem/1 var(--caps);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.tale-card > b i { font-style: normal; transition: margin .2s; }
.tale-card-lit { background: linear-gradient(160deg, rgba(255, 246, 214, .78), rgba(240, 220, 176, .48)); box-shadow: inset 0 0 26px rgba(120, 78, 34, .11), 5px 6px 0 rgba(96, 60, 24, .18); }
a.tale-card { transition: transform .22s, box-shadow .22s, background .22s; }
a.tale-card:hover { transform: translateY(-4px); background: linear-gradient(160deg, rgba(255, 250, 231, .9), rgba(243, 227, 190, .62)); box-shadow: inset 0 0 26px rgba(120, 78, 34, .09), 7px 8px 0 rgba(96, 60, 24, .2); }
a.tale-card:hover > b i { margin-left: .35rem; }
.tale-card .tale-card-folio {
  color: var(--gilt-deep);
  font: 400 clamp(1.6rem, 2.4vw, 2.3rem)/1 var(--fell);
  letter-spacing: .06em;
  text-transform: none;
}
.tale-card .audio-player { margin-top: auto; padding-top: .85rem; border-top: 1px dotted rgba(140, 104, 58, .5); }
.tale-card .tale-dl { margin-top: .3rem; }

/* --- A numbered path through the book ------------------------------------ */
.tale-steps { margin: clamp(1.3rem, 2.1vw, 2rem) 0 0; padding: 0; list-style: none; }
.tale-steps li {
  display: grid;
  grid-template-columns: clamp(46px, 4.4vw, 66px) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(.8rem, 1.6vw, 1.7rem);
  padding: clamp(.85rem, 1.4vw, 1.2rem) clamp(.2rem, .7vw, .7rem);
  border-top: 1px dotted rgba(140, 104, 58, .55);
}
.tale-steps li:last-child { border-bottom: 1px dotted rgba(140, 104, 58, .55); }
.tale-steps > li > span {
  color: var(--gilt-deep);
  font: 400 clamp(1.3rem, 1.9vw, 1.85rem)/1 var(--fell);
  letter-spacing: .06em;
}
.tale-steps h3 {
  color: var(--sepia);
  font: 400 clamp(1.3rem, 1.9vw, 1.8rem)/1.12 var(--fell);
}
.tale-steps p {
  margin: .35rem 0 0;
  max-width: 62ch;
  color: var(--sepia-read);
  font: 500 clamp(1.16rem, 1.322vw, 1.276rem)/1.5 var(--hand);
}

/* --- A shelf of linked titles -------------------------------------------- */
.tale-shelf { margin: clamp(1.6rem, 2.6vw, 2.4rem) 0 0; padding: 0; list-style: none; }
.tale-shelf li { border-top: 1px dotted rgba(140, 104, 58, .55); }
.tale-shelf li:last-child { border-bottom: 1px dotted rgba(140, 104, 58, .55); }
.tale-shelf a {
  display: grid;
  grid-template-columns: clamp(38px, 3.6vw, 58px) minmax(0, max-content) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.7rem, 2.4vw, 3rem);
  padding: clamp(.85rem, 1.5vw, 1.3rem) clamp(.35rem, .9vw, .95rem);
  text-decoration: none;
  /* translate, not padding — padding relaid the row on every frame of the hover */
  transition: background .25s ease, transform .25s ease;
}
.tale-shelf a:hover { transform: translateX(clamp(.45rem, .9vw, .9rem)); background: linear-gradient(90deg, rgba(255, 246, 219, .8), rgba(255, 246, 219, .1)); }
.tale-folio { color: var(--gilt-deep); font: 400 clamp(1.15rem, 1.6vw, 1.65rem)/1 var(--fell); letter-spacing: .06em; }
.tale-shelf strong { color: var(--sepia); font: 400 clamp(1.4rem, 2.2vw, 2.15rem)/1.05 var(--fell); }
.tale-shelf em {
  display: flex;
  align-items: baseline;
  gap: clamp(.7rem, 1.4vw, 1.4rem);
  color: var(--sepia-soft);
  font: italic 500 clamp(1.137rem, 1.392vw, 1.322rem)/1.25 var(--hand);
}
.tale-shelf em::before {
  content: "";
  flex: 1;
  min-width: 18px;
  border-bottom: 2px dotted rgba(140, 104, 58, .55);
  transform: translateY(-.3em);
}
.tale-shelf b { color: var(--rubric); font: 600 .57rem/1 var(--caps); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.tale-shelf b i { font-style: normal; }

/* --- Words pinned to the page like specimen labels ----------------------- */
.tale-tags { display: flex; flex-wrap: wrap; gap: .55rem; margin: clamp(1.1rem, 1.8vw, 1.6rem) 0 0; padding: 0; list-style: none; }
.tale-tags li {
  padding: .45rem .9rem;
  border: 1px solid rgba(150, 112, 48, .48);
  background: rgba(255, 247, 224, .3);
  color: var(--sepia);
  font: 400 clamp(1rem, 1.2vw, 1.15rem)/1 var(--fell);
}
.tale-tags li:nth-child(3n) { transform: rotate(-1deg); }
.tale-tags li:nth-child(4n) { transform: rotate(.9deg); }

/* --- Buttons: a gilt plate and a small-caps pill ------------------------- */
.tale-actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.7rem, 1.4vw, 1.2rem); margin: clamp(1.2rem, 2vw, 1.8rem) 0 0; }
.tale-actions-mid { justify-content: center; }
.tale-seal {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .68rem 1.25rem;
  border: 1px solid #7d5528;
  outline: 1px solid rgba(150, 112, 48, .45);
  outline-offset: 3px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .5), transparent 26%),
    linear-gradient(145deg, #f3e3b9, #d5af6c 58%, #efd79e);
  box-shadow: 0 8px 18px rgba(46, 22, 10, .3), inset 0 0 0 2px rgba(255, 246, 218, .42);
  color: #3a1c27;
  font: 400 clamp(1rem, 1.18vw, 1.14rem)/1 var(--fell);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.tale-seal span { color: var(--gilt-deep); font-size: .85em; }
.tale-seal:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(46, 22, 10, .36), inset 0 0 0 2px rgba(255, 248, 220, .6); }
.tale-pill {
  padding: .48rem .9rem;
  border: 1px solid rgba(150, 112, 48, .48);
  background: rgba(255, 247, 224, .22);
  color: var(--sepia);
  font: 600 .56rem/1.3 var(--caps);
  letter-spacing: .15em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, color .2s, border-color .2s;
}
.tale-pill:hover { border-color: #3d1449; background: #3d1449; color: #f0cf87; }
.tale-onward {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid rgba(152, 64, 47, .45);
  color: var(--rubric);
  font: 400 clamp(1rem, 1.2vw, 1.15rem)/1.3 var(--fell);
  text-decoration: none;
  transition: gap .2s, color .2s;
}
.tale-onward:hover { gap: .85rem; color: #7e2f21; }
.tale-quill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid rgba(150, 112, 48, .55);
  color: var(--sepia-soft);
  font: 600 .58rem/1.3 var(--caps);
  letter-spacing: .17em;
  text-decoration: none;
  text-transform: uppercase;
  transition: gap .2s, color .2s, border-color .2s;
}
.tale-quill:hover { gap: .9rem; border-color: var(--rubric); color: var(--rubric); }

/* --- The three voices ----------------------------------------------------- */
.tale-voices { margin-top: auto; }
.tale-track {
  gap: clamp(.85rem, 1.4vw, 1.15rem);
  min-width: 0;
  padding: clamp(.5rem, .85vw, .72rem) 0;
  border-bottom: 1px dotted rgba(140, 104, 58, .55);
}
.tale-track:last-of-type { border-bottom: 0; }
.tale-track .audio-toggle {
  width: clamp(40px, 3.4vw, 48px);
  height: clamp(40px, 3.4vw, 48px);
  border: 1px solid var(--gilt-deep);
  background: radial-gradient(circle at 30% 26%, #f6e3af, #b1873c 62%, #8a6526);
  color: #3b1b46;
  box-shadow: inset 0 0 0 2px rgba(255, 244, 214, .38), 0 5px 12px rgba(60, 34, 14, .3);
  /* no filter here: this is the control people actually click, and a filter
     transition repaints the button every frame instead of compositing it */
  transition: transform .2s, box-shadow .2s;
}
.tale-track .audio-toggle:hover { transform: scale(1.07); background: radial-gradient(circle at 30% 26%, #fff5bd, #bf9241 62%, #956d29); }

.tale-track .audio-toggle span { font-size: .78rem; }
.tale-track .audio-info { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .5rem .9rem; }
.tale-track .audio-info strong { grid-area: 1 / 1; }
.tale-track .audio-info small { grid-area: 1 / 2; }
.tale-track .audio-track { grid-area: 2 / 1 / 3 / -1; }
.tale-track .audio-info strong {
  color: var(--sepia);
  font: 400 clamp(1.05rem, 1.35vw, 1.32rem)/1.1 var(--fell);
}
.tale-track .audio-info small {
  color: var(--sepia-soft);
  font: 500 .58rem/1 var(--caps);
  letter-spacing: .1em;
}
.tale-track .audio-track { height: 3px; background: rgba(120, 86, 48, .3); }
.tale-track .audio-track i { background: linear-gradient(90deg, #98402f, #bd6242); }

/* --- A demo given a whole entry of its own ------------------------------- */
.tale-recital { margin: clamp(1.3rem, 2.1vw, 2rem) 0 0; padding: 0; list-style: none; }
.tale-recital > li {
  display: grid;
  grid-template-columns: clamp(46px, 4.4vw, 66px) minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(.8rem, 1.9vw, 2.2rem);
  padding: clamp(1rem, 1.7vw, 1.5rem) clamp(.2rem, .7vw, .7rem);
  border-top: 1px dotted rgba(140, 104, 58, .55);
}
.tale-recital > li:last-child { border-bottom: 1px dotted rgba(140, 104, 58, .55); }
.tale-recital-copy > span {
  color: var(--rubric);
  font: 600 clamp(0.624rem, 0.84vw, 0.72rem)/1.4 var(--caps);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.tale-recital-copy h3 {
  margin: .3rem 0 0;
  color: var(--sepia);
  font: 400 clamp(1.4rem, 2.1vw, 2rem)/1.08 var(--fell);
}
.tale-recital-copy p {
  margin: .3rem 0 0;
  color: var(--sepia-soft);
  font: italic 500 clamp(1.137rem, 1.322vw, 1.253rem)/1.4 var(--hand);
}

/* --- Scraps taped into the book ------------------------------------------ */
.tale-scraps {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: clamp(.9rem, 1.8vw, 1.7rem);
  margin: clamp(1.3rem, 2.1vw, 2rem) 0 0;
}
.tale-scrap { position: relative; margin: 0; padding: .55rem .55rem 2.1rem; background: linear-gradient(160deg, #fdf4dd, #ecdcb6); box-shadow: 0 10px 20px rgba(30, 12, 6, .28); }
.tale-scraps-plain .tale-scrap { padding-bottom: .55rem; }
.tale-scrap:nth-child(3n) { transform: rotate(-1.6deg); }
.tale-scrap:nth-child(3n+2) { transform: rotate(1.3deg); }
.tale-scrap img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: sepia(.42) saturate(1.12) contrast(1.02); }
.tale-scrap figcaption {
  position: absolute;
  left: .6rem;
  right: .6rem;
  bottom: .55rem;
  color: var(--sepia-soft);
  font: italic 500 clamp(0.986rem, 1.16vw, 1.137rem)/1.25 var(--hand);
  text-align: center;
}
.tale-scrap::before, .tale-scrap::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 46px;
  height: 17px;
  background: rgba(255, 243, 200, .62);
  box-shadow: 0 1px 3px rgba(30, 12, 6, .22);
}
.tale-scrap::before { left: -12px; transform: rotate(-26deg); }
.tale-scrap::after { right: -12px; transform: rotate(26deg); }

/* --- A note pinned crooked to the page ----------------------------------- */
.tale-marginalia {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  /* it is a scrap of paper, never a column: never let a grid stretch it */
  align-self: start;
  justify-self: start;
  width: fit-content;
  gap: .6rem;
  margin: clamp(1.4rem, 2.2vw, 2rem) 0 0;
  padding: .5rem .95rem;
  border: 1px solid rgba(150, 112, 48, .42);
  background: rgba(255, 247, 221, .5);
  transform: rotate(-1.1deg);
}
.tale-marginalia span { color: var(--rubric); font: 600 .54rem/1 var(--caps); letter-spacing: .18em; text-transform: uppercase; }
.tale-marginalia em { color: var(--sepia); font: italic 400 clamp(1.15rem, 1.5vw, 1.48rem)/1 var(--fell); }
.tale-marginalia i { color: var(--gilt); font-style: normal; }

/* --- Where else to wander ------------------------------------------------ */
.tale-more {
  margin-top: clamp(1rem, 1.7vw, 1.5rem);
  padding-top: clamp(.8rem, 1.3vw, 1.15rem);
  border-top: 1px solid rgba(150, 112, 48, .34);
}

/* The onward link sat on its own line under the pills, which read as a third
   option rather than the way forward. It sits beside them now, pushed right,
   and wraps back underneath when the row runs out of room. */
.tale-more > span {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.tale-more:has(> .tale-onward) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem clamp(1rem, 2vw, 2rem);
}

.tale-more:has(> .tale-onward) > p { flex: 1 0 100%; margin: 0; }
.tale-more:has(> .tale-onward) > .tale-onward { margin-left: auto; }
.tale-more > p {
  margin: 0 0 .65rem;
  color: var(--sepia-soft);
  font: italic 500 clamp(1.102rem, 1.334vw, 1.253rem)/1.3 var(--hand);
}
.tale-more span { display: flex; flex-wrap: wrap; gap: .5rem; }
.tale-more .tale-onward { margin-top: clamp(.75rem, 1.2vw, 1rem); }

/* --- Chapter sheets ------------------------------------------------------- */
.tale-chapter { padding: clamp(1.6rem, 2.6vw, 2.6rem) max(4vw, 1.25rem) clamp(2rem, 3vw, 3rem); }
.tale-chapter-last { padding-bottom: clamp(4rem, 6vw, 6rem); }
.tale-sheet { width: min(1500px, 100%); margin: 0 auto; }
.tale-sheet-narrow { width: min(1120px, 100%); }
.tale-sheet-inner { padding: clamp(2.4rem, 3.8vw, 4rem) clamp(1.7rem, 3.2vw, 3.4rem) clamp(2.2rem, 3.2vw, 3.2rem); }

.tale-ribbon {
  position: absolute;
  z-index: 2;
  top: clamp(1.5rem, 2.6vw, 2.6rem);
  left: -3%;
  width: 106%;
  overflow: hidden;
  padding: .5rem 0;
  border-top: 1px solid rgba(238, 205, 143, .55);
  border-bottom: 1px solid rgba(238, 205, 143, .55);
  background: linear-gradient(178deg, #57235f, #2f1039 52%, #4a1b52);
  box-shadow: 0 8px 18px rgba(26, 6, 32, .32), inset 0 0 22px rgba(240, 205, 130, .1);
  transform: rotate(-1.15deg);
  clip-path: polygon(0 0, 100% 0, calc(100% - 17px) 50%, 100% 100%, 0 100%, 17px 50%);
}
.tale-ribbon-track { display: flex; align-items: center; gap: 2.2rem; width: max-content; animation: taleRibbon 34s linear infinite; animation-play-state: paused; }
.tale-ribbon.is-on-screen .tale-ribbon-track { animation-play-state: running; }
.tale-ribbon-track span {
  color: #f4dda6;
  font: 600 clamp(0.672rem, 0.912vw, 0.792rem)/1 var(--caps);
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tale-ribbon-track i { color: #d9b262; font-size: .7rem; font-style: normal; }
@keyframes taleRibbon { to { transform: translateX(calc(-50% - 1.1rem)); } }

.tale-chapter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem 2rem;
}
/* A ribbon sits across the top of the sheet; the heading starts below it. */
.tale-ribbon + .tale-sheet-inner .tale-chapter-head { margin-top: clamp(1.6rem, 2.6vw, 2.4rem); }
.tale-chapter-head h2 {
  max-width: 30ch;
  color: var(--sepia);
  text-wrap: balance;
  font: 400 clamp(2.1rem, 3.6vw, 3.9rem)/1.06 var(--fell);
}
.tale-chapter-head h2 em { color: var(--rubric); font-style: italic; }

/* --- A spread split into two columns of reading -------------------------- */
.tale-columns {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3.4rem);
  margin: clamp(1.4rem, 2.2vw, 2.1rem) 0 0;
}
.tale-columns-side { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.tale-columns-aside { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.tale-columns > * { min-width: 0; }

/* --- Publishers this voice has recorded for ------------------------------ */
.tale-press {
  margin-top: clamp(2rem, 3.2vw, 3.2rem);
  padding-top: clamp(1.4rem, 2.1vw, 2rem);
  border-top: 1px solid rgba(150, 112, 48, .32);
  text-align: center;
}
.tale-press h3 {
  margin: 0 0 clamp(1rem, 1.7vw, 1.6rem);
  color: var(--sepia-soft);
  font: 600 .57rem/1.4 var(--caps);
  letter-spacing: .24em;
  text-transform: uppercase;
}
.tale-press div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.3rem, 3.4vw, 3.4rem); }
.tale-press img {
  max-width: clamp(80px, 9vw, 126px);
  max-height: 40px;
  object-fit: contain;
  filter: grayscale(1) sepia(.62) contrast(.92) brightness(1.04);
  opacity: .72;
  mix-blend-mode: multiply;
  transition: opacity .25s, filter .25s;
}
.tale-press img:hover { opacity: .92; filter: grayscale(.6) sepia(.35) contrast(.98); }
.tale-press .is-reversed { filter: invert(1) grayscale(1) sepia(.62) contrast(.92) brightness(1.02); }
.tale-press .is-reversed:hover { filter: invert(1) grayscale(.6) sepia(.35) contrast(.98); }

/* --- The colophon: how a page says goodbye ------------------------------- */
.tale-colophon { padding: clamp(1.6rem, 2.6vw, 2.6rem) max(4vw, 1.25rem) clamp(4rem, 6vw, 6rem); }
.tale-colophon .tale-sheet { width: min(1120px, 100%); }
.tale-colophon .tale-sheet-inner { padding: clamp(2.4rem, 3.6vw, 3.6rem) clamp(1.7rem, 3vw, 3.2rem); text-align: center; }
.tale-colophon .tale-head { margin-inline: auto; text-align: center; }
.tale-colophon .tale-prose { margin-inline: auto; text-align: center; }
.tale-colophon .tale-actions { justify-content: center; }
.tale-colophon-mark {
  height: 26px;
  width: min(300px, 70%);
  margin: 0 auto clamp(.9rem, 1.5vw, 1.3rem);
  font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 36'%3E%3Cg fill='none' stroke='%23a37c33' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M16 18 H126'/%3E%3Cpath d='M234 18 H344'/%3E%3Cpath d='M126 18 C138 8 150 8 156 14'/%3E%3Cpath d='M126 18 C138 28 150 28 156 22'/%3E%3Cpath d='M234 18 C222 8 210 8 204 14'/%3E%3Cpath d='M234 18 C222 28 210 28 204 22'/%3E%3C/g%3E%3Cg fill='%23a37c33'%3E%3Ccircle cx='160' cy='18' r='2.4'/%3E%3Ccircle cx='200' cy='18' r='2.4'/%3E%3Cpath d='M6 18 L12 14.6 L18 18 L12 21.4 Z'/%3E%3Cpath d='M342 18 L348 14.6 L354 18 L348 21.4 Z'/%3E%3C/g%3E%3Cpath d='M180 7 L191 18 L180 29 L169 18 Z' fill='%2398402f' stroke='%23c9a24a' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Contact ------------------------------------------------------------- */
.tale-address {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: clamp(1.2rem, 2vw, 1.8rem) 0 0;
  padding-bottom: .35rem;
  border-bottom: 1px solid rgba(150, 112, 48, .55);
  color: var(--sepia);
  font: 400 clamp(1.2rem, 2vw, 1.85rem)/1.2 var(--fell);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: gap .2s, color .2s, border-color .2s;
}
.tale-address span { color: var(--gilt-deep); font-size: .7em; }
.tale-address:hover { gap: 1.05rem; border-color: var(--rubric); color: var(--rubric); }

/* --- The guide fairy ------------------------------------------------------ */
.fairy-guide {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(62vw, 36vh, 0);
}
.has-opening .fairy-guide, .has-opening .fairy-spark { display: none; }
@media (hover: none), (pointer: coarse) {
  .fairy-guide, .fairy-spark { display: none; }
}
.fairy { display: block; overflow: visible; filter: drop-shadow(0 1px 2.5px rgba(58, 30, 10, .34)); }
.fairy-aura { animation: fairyAura 3.1s ease-in-out infinite; transform-origin: 32px 31px; }

.fairy-wings > path:not(.fairy-vein) {
  fill: url(#fairy-wing);
  stroke: rgba(255, 250, 232, .55);
  stroke-width: .45;
}
.fairy-vein { fill: none; stroke: rgba(255, 250, 232, .3); stroke-width: .32; stroke-linecap: round; }
.fairy-wings { transform-origin: 32px 27px; }
.fairy-wings-upper { animation: fairyWingUpper .15s ease-in-out infinite alternate; }
.fairy-wings-lower { animation: fairyWingLower .15s ease-in-out infinite alternate; animation-delay: .045s; }

.fairy-gown, .fairy-head, .fairy-neck { fill: url(#fairy-body); }
.fairy-gown-shade { fill: #c39a52; opacity: .26; }
.fairy-hand, .fairy-foot { fill: #f9e2b2; }
.fairy-hair, .fairy-bun { fill: #c08c33; }
.fairy-arm, .fairy-leg { fill: none; stroke: #f6dba4; stroke-width: 1.05; stroke-linecap: round; }
.fairy-leg { stroke-width: 1.15; }
.fairy-figure { animation: fairyBob 2.3s ease-in-out infinite alternate; transform-origin: 32px 30px; }

@keyframes fairyAura { 50% { opacity: .55; transform: scale(.86); } }
@keyframes fairyWingUpper { from { transform: rotate(-21deg) scaleX(.84); } to { transform: rotate(10deg) scaleX(1); } }
@keyframes fairyWingLower { from { transform: rotate(11deg) scaleX(.9); } to { transform: rotate(-7deg) scaleX(1); } }
@keyframes fairyBob { to { transform: translateY(-1.6px); } }

/* what she is pointing at catches a little of her light */
.is-fairy-lit { position: relative; }
.is-fairy-lit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 0 6px rgba(255, 208, 122, .22), 0 0 22px rgba(255, 198, 108, .5);
  opacity: 0;
  animation: fairyLit 1.5s ease-in-out infinite;
}
@keyframes fairyLit { 0%, 100% { opacity: 0; transform: scale(.94); } 50% { opacity: 1; transform: none; } }

/* her trail */
.fairy-spark {
  position: fixed;
  z-index: 59;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fffef7, #ffe093 55%, rgba(224, 158, 54, 0) 80%);
  box-shadow: 0 0 8px rgba(255, 220, 145, .85);
  pointer-events: none;
  animation: fairyTrail 1.5s ease-out forwards;
}
.fairy-spark.is-star {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #ffe3a4;
  font: 400 .62rem/1 Georgia, serif;
  text-shadow: 0 0 10px rgba(255, 213, 126, .95);
}
@keyframes fairyTrail {
  from { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0deg); }
  18% { opacity: 1; transform: translate(0, 0) scale(var(--size)) rotate(0deg); }
  to { opacity: 0; transform: translate(var(--sway), var(--fall)) scale(calc(var(--size) * .3)) rotate(var(--spin)); }
}

/* --- Smaller stages ------------------------------------------------------ */
@media (max-width: 1180px) {
  .tale-book, .tale-book-even { grid-template-columns: 1fr; width: min(760px, 100%); }
  .tale-slip { width: min(760px, 100%); }
  .tale-dl { --cols: 2; }
  .tale-sheet, .tale-sheet-narrow { width: min(900px, 100%); }
  .tale-arch { width: min(400px, 82%); }
  .tale-voices { margin-top: clamp(1.2rem, 2vw, 1.8rem); }
  .tale-cards { --cols: 2; }
  .tale-scraps { --cols: 3; }
  .tale-columns, .tale-columns-side, .tale-columns-aside { grid-template-columns: 1fr; }
  .tale-recital > li { grid-template-columns: clamp(40px, 4vw, 56px) minmax(0, 1fr); }
  .tale-recital .audio-player { grid-column: 2; }
}

@media (max-width: 980px) {
  .site-nav { gap: .2rem; }
  .site-nav a, .site-nav summary { padding-inline: .45rem; font-size: .86rem; }
}

@media (min-width: 761px) and (max-width: 980px) {
  .site-header { min-height: 72px; }.brand span { font-size: 1.2rem; }.brand small { max-width: 210px; font-size: .54rem; letter-spacing: .06em; }
  .menu-toggle { display: block; position: relative; z-index: 42; cursor: pointer; }
  .site-nav { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .35rem; overflow-y: auto; padding: 6rem 2rem 3rem; background: linear-gradient(rgba(34,6,42,.88), rgba(28,4,35,.96)), var(--curtain) center / cover; transform: translateX(102%); transition: transform .35s ease; }.site-nav.is-open { transform: none; }.site-nav > a, .site-nav summary { width: 100%; padding: .7rem .85rem; font: 400 1.85rem/1 var(--fell); }.site-nav summary { justify-content: space-between; }.nav-dropdown { position: static; width: 100%; min-width: 0; margin: .25rem 0 .55rem; padding: .25rem .65rem; border-color: rgba(231,189,98,.34); background: rgba(17,2,23,.3); box-shadow: none; transform: none; }.nav-dropdown a { padding: .65rem .75rem; font-size: 1.15rem; }.site-nav .nav-contact { margin-top: .8rem; padding: .8rem 1rem; text-align: center; }.menu-toggle.is-open span:first-child { transform: translateY(4px) rotate(45deg); }.menu-toggle.is-open span:last-child { transform: translateY(-4px) rotate(-45deg); }
}

@media (max-width: 760px) {
  .site-header { min-height: 72px; }.brand span { font-size: 1.2rem; }.brand small { max-width: 210px; font-size: .54rem; letter-spacing: .06em; }
  .menu-toggle { display: block; position: relative; z-index: 42; cursor: pointer; }
  .site-nav { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .35rem; overflow-y: auto; padding: 6rem 2rem 3rem; background: linear-gradient(rgba(34,6,42,.88), rgba(28,4,35,.96)), var(--curtain) center / cover; transform: translateX(102%); transition: transform .35s ease; }.site-nav.is-open { transform: none; }.site-nav > a, .site-nav summary { width: 100%; padding: .7rem .85rem; font: 400 1.85rem/1 var(--fell); }.site-nav summary { justify-content: space-between; }.nav-dropdown { position: static; width: 100%; min-width: 0; margin: .25rem 0 .55rem; padding: .25rem .65rem; border-color: rgba(231,189,98,.34); background: rgba(17,2,23,.3); box-shadow: none; transform: none; }.nav-dropdown a { padding: .65rem .75rem; font-size: 1.15rem; }.site-nav .nav-contact { margin-top: .8rem; padding: .8rem 1rem; text-align: center; }.menu-toggle.is-open span:first-child { transform: translateY(4px) rotate(45deg); }.menu-toggle.is-open span:last-child { transform: translateY(-4px) rotate(-45deg); }

  .tale-spread { padding-top: clamp(1.5rem, 4vw, 2.2rem); }
  .tale-leaf { --tilt: 0deg; }
  .tale-arch { width: min(330px, 90%); }
  .tale-opening { font-size: clamp(1.6rem, 6.4vw, 2.15rem); text-wrap: pretty; }
  .tale-versal { width: 56px; height: 56px; margin-right: .6rem; font-size: 2.5rem; }
  .tale-byline { margin-top: 1.1rem; }
  .tale-dl { --cols: 1; gap: 1.05rem; }
  .tale-cards { --cols: 1; }
  .tale-scraps { --cols: 2; }
  .tale-shelf a { grid-template-columns: 32px minmax(0, 1fr) auto; gap: .5rem .9rem; }
  .tale-shelf em { grid-column: 2; }
  .tale-shelf b { grid-row: 1 / 3; grid-column: 3; }
  .tale-chapter-head h2 { max-width: none; }
  .tale-head, .tale-lede, .tale-prose { max-width: none; }
  .tale-ribbon { top: clamp(1rem, 3vw, 1.6rem); }
  .tale-steps li { grid-template-columns: 38px minmax(0, 1fr); gap: .7rem; }
  .tale-recital > li { grid-template-columns: 38px minmax(0, 1fr); gap: .7rem 1rem; }
  .site-footer { grid-template-columns: 1fr; gap: 2rem; }
  .legal, .ai-protection { grid-column: auto; }
  .ai-protection { margin-top: .5rem; padding: 1.35rem; }
  .ai-protection p { font-size: .98rem; }
}

@media (max-width: 480px) {
  .opening-copy { width: min(90%, 390px); }.opening-name { font-size: 3.2rem; }.opening-welcome { font-size: 1.9rem; }.opening-button { min-width: min(280px, 82vw); }.opening-stars { display: none; }
  .tale-chapter-mark { letter-spacing: .22em; }
  .tale-chapter-mark::before, .tale-chapter-mark::after { width: 22px; }
  .tale-press div { gap: 1.2rem 1.8rem; }
  .tale-press img { max-width: 88px; max-height: 32px; }
  .tale-scraps { --cols: 1; }
  .tale-scrap { transform: none !important; }
  .tale-recital > li { grid-template-columns: 1fr; }
  .tale-recital .audio-player { grid-column: auto; }
  .site-footer::after { content: "✦  ⁂  ☾  ⁂  ✦"; right: 1.2rem; font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .fairy-guide, .fairy-spark { display: none !important; }
  .tale-ribbon-track { animation: none; }
  .wisp-glow, .wisp-wing { animation: none; }
}

/* ==========================================================================
   THE CLOSING LEAF — site footer
   Its base rules were lost in an earlier rewrite; the markup survived on all
   ten pages. It sits on the viewport-fixed curtain from main::before, so it
   needs no background image of its own.
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 3vw, 3rem) clamp(1.5rem, 3.5vw, 3.5rem);
  padding: clamp(3rem, 5vw, 4.5rem) max(5vw, 1.5rem) clamp(2rem, 3vw, 2.8rem);
  background: linear-gradient(180deg, rgba(18, 4, 24, .55), rgba(14, 3, 20, .82));
  color: var(--story-cream);
}
/* gilt rule closing the page, with a printer's ornament seated on it */
.site-footer::before {
  content: "";
  position: absolute;
  inset: clamp(.9rem, 1.6vw, 1.5rem) clamp(1rem, 2.5vw, 2.5rem) auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231, 189, 98, .7) 18%, rgba(231, 189, 98, .7) 82%, transparent);
}
.site-footer::after {
  content: "✦   ⁂   ☾   ⁂   ✦";
  position: absolute;
  top: calc(clamp(.9rem, 1.6vw, 1.5rem) - .78em);
  left: 50%;
  padding: 0 .9rem;
  background: #1a0522;
  color: rgba(241, 211, 145, .8);
  font: 400 1rem/1.5 Georgia, serif;
  letter-spacing: .4em;
  text-indent: .4em;
  transform: translateX(-50%);
}

.footer-brand span { font-size: clamp(1.35rem, 1.9vw, 1.75rem); }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem clamp(1rem, 2vw, 2rem);
  align-content: start;
}
.footer-nav a {
  color: #f4e6c2;
  font: 400 clamp(.98rem, 1.15vw, 1.1rem)/1.3 var(--fell);
  text-decoration: none;
  transition: color .2s, transform .2s;
}
.footer-nav a::before { content: "✦"; margin-right: .5rem; color: rgba(231, 189, 98, .55); font-size: .58em; vertical-align: .18em; }
.footer-nav a:hover { color: #ffe6a6; transform: translateX(3px); }

.footer-contact { align-content: start; display: grid; gap: .55rem; }
.footer-contact a {
  color: #ffe9b6;
  font: 400 clamp(1rem, 1.25vw, 1.18rem)/1.3 var(--fell);
  text-decoration: none;
  border-bottom: 1px solid rgba(231, 189, 98, .45);
  justify-self: start;
  transition: color .2s, border-color .2s;
}
.footer-contact a:hover { color: #fff6d8; border-color: #ffe6a6; }
.footer-contact p {
  margin: 0;
  color: rgba(244, 224, 178, .72);
  font: 500 .95rem/1.4 var(--hand);
  font-style: italic;
}

.legal {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(238, 214, 165, .5);
  font: 600 .56rem/1.4 var(--caps);
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* the notice, pasted in like a slip of the same parchment */
.ai-protection {
  position: relative;
  grid-column: 1 / -1;
  padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.3rem, 2.8vw, 2.4rem);
  border: 1px solid rgba(228, 184, 87, .6);
  outline: 1px solid rgba(244, 211, 137, .22);
  outline-offset: 6px;
  background: linear-gradient(150deg, rgba(245, 231, 198, .95), rgba(232, 213, 173, .92));
  color: var(--sepia);
  box-shadow: 0 14px 34px rgba(10, 2, 16, .45);
}
.ai-protection::before {
  content: "⁂";
  position: absolute;
  left: 50%;
  top: -.72rem;
  padding: 0 .65rem;
  background: #2c0a37;
  color: var(--story-gold);
  font: 400 1.15rem/1 var(--fell);
  transform: translateX(-50%);
}
.ai-protection > span {
  display: block;
  margin-bottom: .7rem;
  color: var(--rubric);
  font: 600 .58rem/1.2 var(--caps);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ai-protection p {
  max-width: 1400px;
  margin: 0;
  font: 400 clamp(1rem, 1.4vw, 1.2rem)/1.55 var(--fell);
}

/* --- Scroll-scrubbed entrance ---------------------------------------------
   Driven entirely by the scroll timeline: no listener, no rAF, and it animates
   only opacity and transform. Everything is visible by default, so browsers
   without scroll-driven animations simply get the finished state. */
@keyframes footerRise {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-footer > div,
    .site-footer > .legal,
    .site-footer > .ai-protection {
      animation: footerRise linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 60%;
    }
    .site-footer > .footer-nav { animation-range: entry 12% entry 68%; }
    .site-footer > .footer-contact { animation-range: entry 18% entry 74%; }
    .site-footer > .legal { animation-range: entry 24% entry 80%; }
    .site-footer > .ai-protection { animation-range: entry 28% entry 86%; }
  }
}

@media (max-width: 900px) {
  .site-footer { grid-template-columns: 1fr; gap: 2rem; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .footer-nav { grid-template-columns: 1fr; }
  .site-footer::after { letter-spacing: .25em; font-size: .85rem; }
}

/* --- "And more…" closing the publisher row ------------------------------- */
.tale-press-more {
  color: var(--sepia-soft);
  font: italic 500 clamp(1.183rem, 1.45vw, 1.369rem)/1 var(--hand);
  white-space: nowrap;
}

/* --- Chapter Three: the open letter -------------------------------------- */
.tale-letter .tale-sheet-inner { padding-bottom: clamp(2.4rem, 3.6vw, 3.6rem); }

.tale-salutation {
  margin: clamp(1.4rem, 2.2vw, 2rem) 0 0;
  color: var(--sepia);
  font: 400 clamp(1.3rem, 1.9vw, 1.75rem)/1.35 var(--fell);
}
.tale-letter-body { max-width: 68ch; margin-top: clamp(.9rem, 1.4vw, 1.2rem); }
.tale-letter-body p + p { margin-top: .85em; }

.tale-letter .tale-signoff::before {
  content: "";
  display: block;
  width: 210px;
  height: 20px;
  margin-bottom: .9rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 36'%3E%3Cg fill='none' stroke='%23a37c33' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M16 18 H126'/%3E%3Cpath d='M234 18 H344'/%3E%3Cpath d='M126 18 C138 8 150 8 156 14'/%3E%3Cpath d='M126 18 C138 28 150 28 156 22'/%3E%3Cpath d='M234 18 C222 8 210 8 204 14'/%3E%3Cpath d='M234 18 C222 28 210 28 204 22'/%3E%3C/g%3E%3Cg fill='%23a37c33'%3E%3Ccircle cx='160' cy='18' r='2.4'/%3E%3Ccircle cx='200' cy='18' r='2.4'/%3E%3Cpath d='M6 18 L12 14.6 L18 18 L12 21.4 Z'/%3E%3Cpath d='M342 18 L348 14.6 L354 18 L348 21.4 Z'/%3E%3C/g%3E%3Cpath d='M180 7 L191 18 L180 29 L169 18 Z' fill='%2398402f' stroke='%23c9a24a' stroke-width='1'/%3E%3C/svg%3E") left center / contain no-repeat;
}

.tale-signoff {
  margin: clamp(1.4rem, 2.2vw, 2rem) 0 0;
  color: var(--sepia-soft);
  font: italic 500 clamp(1.253rem, 1.508vw, 1.415rem)/1.5 var(--hand);
}
.tale-signoff span {
  display: block;
  margin-top: .2rem;
  color: var(--sepia);
  font: 400 clamp(1.7rem, 2.5vw, 2.3rem)/1.1 var(--fell);
  font-style: normal;
}

/* letter left, ways to begin alongside it — the sheet is far wider than a
   comfortable measure, so the column keeps the reading line honest */
/* The letter used to sit in a 1.25fr column with the four ways beside it in
   a .75fr column, aligned to the top. The ways ran out long before the letter
   did, so the taller the letter grew the larger the hole beside it. It reads
   as what it is now: a letter on a narrower sheet, with the four doors set
   two-by-two beneath the signature. */
.tale-letter { width: min(1040px, 100%); }
.tale-letter .tale-sheet-inner { display: block; }
.tale-letter .tale-rubric { grid-column: 1 / -1; }
.tale-letter-text { min-width: 0; }
.tale-letter-body { max-width: none; }

.tale-letter-ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, 1.2vw, 1.1rem);
  margin-top: clamp(1.4rem, 2.2vw, 2rem);
  padding-top: clamp(1.4rem, 2.2vw, 2rem);
  border-top: 1px solid rgba(150, 112, 48, .34);
}
@media (max-width: 900px) {
  .tale-letter .tale-sheet-inner { grid-template-columns: 1fr; }
  .tale-letter-ways { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
}
.tale-seal-link {
  display: grid;
  gap: .3rem;
  padding: clamp(.9rem, 1.3vw, 1.15rem) clamp(1rem, 1.4vw, 1.25rem);
  border: 1px solid rgba(150, 112, 48, .45);
  background: rgba(255, 247, 224, .28);
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.tale-seal-link:hover {
  border-color: rgba(150, 112, 48, .8);
  background: rgba(255, 249, 231, .6);
  transform: translateY(-2px);
}
.tale-seal-link b {
  color: var(--sepia);
  font: 400 clamp(1.14rem, 1.4vw, 1.32rem)/1.2 var(--fell);
  font-weight: 400;
}
.tale-seal-link em {
  color: var(--sepia-soft);
  font: italic 500 clamp(1.137rem, 1.299vw, 1.253rem)/1.35 var(--hand);
}
.tale-seal-link:first-child b { color: var(--rubric); }

/* ==========================================================================
   TYPE HIERARCHY
   An earlier pass raised everything at once, which made everything loud and
   therefore nothing loud. Five levels, each separated by a DIFFERENT device
   so the page stays lively rather than uniformly bold:

     A  chapter title    IM Fell, very large, ink          — size
     B  section lead     Cinzel, rubric red, letterspaced   — colour + tracking
     C  item title       IM Fell, 1.3-1.5rem, ink           — size + serif
     D  body prose       Cormorant, 1.2-1.35rem, read ink   — measure
     E  detail / meta    small, soft, never bold            — recession

   Level E is the one that must stay quiet. When it was promoted to match D,
   captions started competing with the things they describe.
   ========================================================================== */

/* --- B: the one thing to act on in a block -------------------------------- */
.tale-rubric-lead {
  color: var(--rubric);
  font: 600 clamp(.8rem, 1.02vw, .92rem)/1.25 var(--caps);
  letter-spacing: .19em;
}
.tale-rubric-lead span::before { color: var(--rubric); font-size: .78em; opacity: .8; }
.tale-rubric-lead::after { background: linear-gradient(90deg, rgba(152, 64, 47, .45), transparent); }

/* --- C: the demo entries -------------------------------------------------- */
.tale-track .audio-info strong {
  color: var(--sepia-soft);
  font: 500 .78rem/1.2 var(--caps);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.tale-track .audio-info small {
  color: var(--sepia-soft);
  font-size: .72rem;
  letter-spacing: .07em;
}
.tale-track .audio-track { height: 4px; background: rgba(104, 72, 38, .3); }
.tale-track .audio-toggle {
  width: clamp(46px, 3.9vw, 54px);
  height: clamp(46px, 3.9vw, 54px);
  box-shadow: inset 0 0 0 2px rgba(255, 246, 220, .45), 0 5px 14px rgba(60, 34, 14, .38);
}
.tale-track .audio-toggle span { font-size: .92rem; }

/* on the homepage the track title IS the demo name, so it stays level C */
.tale-voices .tale-track .audio-info strong {
  color: var(--sepia);
  font: 400 clamp(1.26rem, 1.55vw, 1.5rem)/1.1 var(--fell);
  letter-spacing: 0;
  text-transform: none;
}

/* --- D: the lead-in line, not a heading ----------------------------------- */
.tale-more > p {
  color: var(--sepia-read);
  font: 500 clamp(1.06rem, 1.24vw, 1.18rem)/1.4 var(--hand);
  font-style: italic;
}
.tale-more .tale-pill {
  padding: .58rem 1rem;
  border-color: rgba(122, 88, 36, .6);
  background: rgba(255, 249, 232, .5);
  color: var(--sepia-read);
  font: 600 .68rem/1 var(--caps);
  letter-spacing: .13em;
}
.tale-more .tale-pill:hover { border-color: #3d1449; background: #3d1449; color: #f5d99a; }

/* the primary onward link keeps its voice — it is the loudest thing here */
.tale-onward {
  color: var(--rubric);
  font-size: clamp(1.22rem, 1.45vw, 1.4rem);
  border-bottom-width: 2px;
  border-bottom-color: rgba(152, 64, 47, .55);
}
.tale-onward:hover { color: #7e2f21; border-bottom-color: #7e2f21; }

/* --- E: captions and credits recede --------------------------------------- */
.tale-portrait figcaption, .tale-figure figcaption {
  color: var(--sepia-read);
  font-size: clamp(1.08rem, 1.28vw, 1.2rem);
}
/* the gear line is a credit, not a caption: quiet, tracked, ruled off */
.tale-portrait figcaption span, .tale-figure figcaption span {
  display: inline-block;
  margin-top: .55rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(150, 112, 48, .3);
  color: var(--sepia-soft);
  font: 500 clamp(.78rem, .9vw, .86rem)/1.3 var(--caps);
  letter-spacing: .16em;
}

/* --- The notes slip: label in gold, content in ink ------------------------ */
.tale-slip dt {
  color: var(--gilt-deep);
  font-size: clamp(.66rem, .84vw, .74rem);
  font-weight: 600;
  letter-spacing: .15em;
}
.tale-slip dt::before { color: var(--gilt); }
.tale-slip dd {
  color: var(--sepia);
  font-size: clamp(1.1rem, 1.3vw, 1.24rem);
}

/* --- Reading copy --------------------------------------------------------- */
.tale-prose p, .tale-lede { color: var(--sepia-read); }
.tale-shelf em { color: var(--sepia-soft); }
.tale-press h3 { color: var(--sepia-soft); }
.tale-press-more { color: var(--sepia-soft); }
/* a secondary link beside a large heading should not shout over it */
.tale-quill { color: var(--gilt-deep); font-weight: 600; font-size: .66rem; letter-spacing: .15em; }
.tale-quill:hover { color: var(--rubric); }

/* --- Da Eun's little gallery ---------------------------------------------- */
.tale-gallery-lede { margin-bottom: clamp(1.4rem, 2.2vw, 2rem); }
.tale-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: clamp(.9rem, 1.6vw, 1.5rem);
  margin: 0 0 clamp(2.2rem, 3.4vw, 3.2rem);
}
.tale-gallery .tale-scrap { margin: 0; }
.tale-gallery .tale-scrap img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(122, 88, 36, .55);
  outline: 1px solid rgba(150, 112, 48, .2);
  outline-offset: 4px;
  background: rgba(255, 250, 232, .5);
  box-shadow: 0 8px 18px rgba(70, 44, 22, .22);
  transition: transform .28s ease, box-shadow .28s ease;
}
.tale-gallery .tale-scrap:hover img {
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 14px 26px rgba(70, 44, 22, .3);
}
.tale-gallery .tale-scrap-wide { grid-column: span 2; }
.tale-gallery .tale-scrap-wide img { aspect-ratio: 2.44; }
@media (max-width: 560px) {
  .tale-gallery .tale-scrap-wide { grid-column: auto; }
  .tale-gallery .tale-scrap-wide img { aspect-ratio: 1.6; }
}

/* --- What fills the hours between takes ----------------------------------- */
.tale-pursuits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(.8rem, 1.3vw, 1.2rem) clamp(1.4rem, 2.6vw, 2.6rem);
  margin: 0 0 clamp(1rem, 1.6vw, 1.4rem);
  padding: 0;
  list-style: none;
}
.tale-pursuits li {
  padding-left: 1.35rem;
  border-left: 2px solid rgba(150, 112, 48, .45);
}
.tale-pursuits strong {
  display: block;
  color: var(--sepia);
  font: 400 clamp(1.18rem, 1.4vw, 1.34rem)/1.25 var(--fell);
}
.tale-pursuits span {
  display: block;
  margin-top: .18rem;
  color: var(--sepia-read);
  font: 500 clamp(1rem, 1.16vw, 1.1rem)/1.4 var(--hand);
}

/* the second plate in the opening leaf */
.tale-figure-second { margin-top: clamp(1.2rem, 2vw, 1.8rem); }

/* --- Voice-over pages: copy on the left, demos immediately on the right ---
   The decorative emblem plate and the separate "palette" sheet were spending
   a whole screen each to say nothing, so both are gone and the tone/usage
   lists live in the copy as text. --------------------------------------- */
.tale-book-demo {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: stretch;
}

.tale-facets {
  display: grid;
  gap: clamp(1.1rem, 1.7vw, 1.5rem);
  margin: clamp(1.4rem, 2.2vw, 2rem) 0 0;
  padding-top: clamp(1.2rem, 1.9vw, 1.7rem);
  border-top: 1px solid rgba(150, 112, 48, .3);
}
.tale-facet-label {
  margin: 0;
  color: var(--rubric);
  font: 600 clamp(.7rem, .88vw, .78rem)/1.3 var(--caps);
  letter-spacing: .17em;
  text-transform: uppercase;
}
.tale-facet .tale-tags { margin-top: .7rem; }
.tale-facet .tale-tags li {
  padding: .4rem .8rem;
  font-size: clamp(.98rem, 1.14vw, 1.1rem);
  color: var(--sepia-read);
}

/* the demo leaf */
.tale-recital-tight { margin: 0; padding: 0; list-style: none; }
/* the three-column recital grid does not apply here — there is no folio and
   the leaf is half the width, so each entry stacks */
.tale-recital-tight > li {
  display: block;
  padding: clamp(.9rem, 1.4vw, 1.2rem) 0;
  border-top: 0;
  border-bottom: 1px dotted rgba(140, 104, 58, .5);
}
.tale-recital-tight > li:first-of-type { padding-top: .3rem; }
.tale-recital-tight > li:last-child { border-bottom: 0; }
.tale-recital-tight .tale-recital-copy { margin-bottom: .6rem; }
.tale-recital-tight .tale-recital-copy span {
  display: block;
  color: var(--gilt-deep);
  font: 700 .62rem/1 var(--caps);
  letter-spacing: .17em;
  text-transform: uppercase;
}
.tale-recital-tight .tale-recital-copy h3 {
  margin: .3rem 0 .15rem;
  color: var(--sepia);
  font: 400 clamp(1.3rem, 1.6vw, 1.55rem)/1.15 var(--fell);
}
.tale-recital-tight .tale-recital-copy p {
  margin: 0;
  color: var(--sepia-read);
  font: italic 500 clamp(1rem, 1.16vw, 1.1rem)/1.4 var(--hand);
}

.tale-seal-demo { margin-top: clamp(1.2rem, 1.9vw, 1.7rem); }

/* The facets open the second leaf now, so they carry no divider above them and
   the two lists need more air between one another than they did in a footer. */
.tale-facets-lead { gap: clamp(1.7rem, 2.8vw, 2.5rem); }

/* One leaf, no spread: the pages that lost their decorative half centre the
   remaining leaf rather than leaving the other column empty. */
/* Full width, matching the sheets further down the same page — held in any
   narrower it reads as pinched beside them. The prose keeps its own measure. */
.tale-book-solo { grid-template-columns: minmax(0, 1fr); }
/* Centring the byline only read well in a narrow column; across a full leaf it
   drifts away from the text it belongs to. */
.tale-book-solo .tale-byline { text-align: left; }
.tale-book-solo .tale-name { justify-content: flex-start; }
.tale-book-solo .tale-name::before { display: none; }

@media (max-width: 1180px) {
  .tale-book-demo { grid-template-columns: 1fr; }
}

/* --- About: the childhood video carries the opening leaf ------------------ */
/* the childhood film is the point of this leaf, so it takes the full width */
.tale-figure-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}
.tale-figure-hero .tale-plate {
  width: 100%;
  padding: clamp(11px, 1.2vw, 17px);
}
.tale-figure-hero video { width: 100%; height: auto; }
.tale-figure-hero figcaption { margin-top: clamp(1.1rem, 1.7vw, 1.5rem); }

/* the opening copy sat in a pool of empty parchment; close it up */
.tale-leaf-recto .tale-prose { margin-bottom: 0; }
.tale-leaf-recto .tale-prose p:last-child { margin-bottom: 0; }
.page-about .tale-leaf-recto .tale-leaf-inner { justify-content: flex-start; }

/* the gallery needs air above it, and a rule so it reads as a new movement */
.tale-gallery-open {
  margin-top: clamp(1.7rem, 2.7vw, 2.5rem);
  padding-top: clamp(1.1rem, 1.7vw, 1.6rem);
  border-top: 1px solid rgba(150, 112, 48, .32);
}

/* --- Audiobook: stacked, because seven demos beside a short intro left a
       column of empty parchment ------------------------------------------ */
.tale-intro-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: start;
  column-gap: clamp(2rem, 4vw, 4rem);
}
/* With the introductory prose gone, the title has nothing to sit beside, so it
   runs the full width and the facets spread underneath it. */
.tale-intro-open {
  display: grid;
  row-gap: clamp(1.5rem, 2.4vw, 2.1rem);
}
.tale-intro-copy { min-width: 0; }
.tale-byline-left { text-align: left; }
.tale-byline-left .tale-name { justify-content: flex-start; }
.tale-byline-left .tale-name::before { display: none; }
.tale-facets-side { margin-top: 0; padding-top: 0; border-top: 0; }

/* Ages holds four chips against a dozen, so the columns are weighted rather
   than equal — otherwise the short list opens a hole in the middle. */
.tale-facets-row {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .5fr) minmax(0, 1.2fr);
  column-gap: clamp(1.8rem, 3.4vw, 3.2rem);
}

.tale-room-open {
  margin-top: clamp(2.4rem, 3.6vw, 3.4rem);
  padding-top: clamp(1.5rem, 2.2vw, 2rem);
  border-top: 1px solid rgba(150, 112, 48, .32);
}
.tale-recital-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  column-gap: clamp(2rem, 4vw, 4rem);
}
.tale-recital-grid > li:first-of-type { padding-top: clamp(.9rem, 1.4vw, 1.2rem); }

.tale-more-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1rem, 2vw, 2rem);
}
.tale-more-inline > p { margin: 0; }
.tale-more-inline .tale-seal-demo { margin-top: 0; margin-left: auto; }

@media (max-width: 900px) {
  .tale-intro-split { grid-template-columns: 1fr; row-gap: clamp(1.4rem, 2.4vw, 2rem); }
  .tale-facets-row { grid-template-columns: 1fr; }
  .tale-more-inline .tale-seal-demo { margin-left: 0; }
}

/* About opens on the childhood film, so that leaf gets the wider column —
   the text reads perfectly well in the narrower one. */
/* Both leaves carry real content now — the film and the journey on one side,
   the story on the other — so they can sit level again. */
.page-about .tale-spread .tale-book {
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  align-items: stretch;
}
.page-about .tale-figure-hero { flex: 0 0 auto; height: auto; }
.page-about .tale-spread .tale-leaf:has(video) .tale-leaf-inner { justify-content: flex-start; }
.tale-path-open {
  margin-top: clamp(1.6rem, 2.4vw, 2.2rem);
  padding-top: clamp(1.2rem, 1.8vw, 1.6rem);
  border-top: 1px solid rgba(150, 112, 48, .32);
}
@media (max-width: 1180px) {
  .page-about .tale-spread .tale-book { grid-template-columns: 1fr; }
}

/* The journey list was drawn for a full-width slip. Inside a leaf it has half
   the room, so it runs as a single column — which also fills the film leaf to
   match the story leaf beside it. */
.page-about .tale-spread .tale-leaf:has(video) .tale-dl {
  grid-template-columns: 1fr;
  gap: clamp(.7rem, 1.1vw, .95rem);
}
.page-about .tale-spread .tale-leaf:has(video) .tale-dl > div {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  align-items: baseline;
  gap: .2rem 1rem;
}
.page-about .tale-spread .tale-leaf:has(video) .tale-dl dd { margin: 0; }
@media (max-width: 700px) {
  .page-about .tale-spread .tale-leaf:has(video) .tale-dl > div { grid-template-columns: 1fr; }
}

/* --- A line to close the slip and send the reader on ---------------------- */
.tale-sendoff {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  margin: clamp(1.3rem, 2vw, 1.8rem) 0 0;
  color: var(--rubric);
  font: italic 500 clamp(1.2rem, 1.5vw, 1.42rem)/1.2 var(--hand);
}
.tale-sendoff::before {
  content: "";
  width: clamp(40px, 8vw, 110px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(152, 64, 47, .5));
}
.tale-sendoff i { color: var(--gilt); font-size: .72em; font-style: normal; }

/* "And more…" closes a list without pretending to be another item in it */
.tale-tags .is-more {
  border-style: dashed;
  border-color: rgba(150, 112, 48, .4);
  background: none;
  color: var(--sepia-soft);
  font-style: italic;
}

/* The closing claim on the contact page — set as a line worth reading, not as
   a status badge. */
.tale-claim {
  position: relative;
  max-width: 46ch;
  margin: clamp(1.3rem, 2vw, 1.8rem) 0 0;
  padding-left: clamp(1rem, 1.6vw, 1.4rem);
  border-left: 2px solid rgba(150, 112, 48, .5);
  color: var(--sepia-read);
  font: italic 500 clamp(1.16rem, 1.44vw, 1.36rem)/1.45 var(--hand);
}

.tale-epithet + .tale-role { margin-top: .3rem; }

/* --- The portrait as an illuminated page --------------------------------- */
/* The first attempt grew a filigree crown out of the top of the arch, which
   read as antennae. Nothing sticks out of the frame now: a manuscript rule
   drawn around the whole plate, and motes of light resting on the parchment
   around it, the way gold leaf catches on an illuminated page. */
.tale-arch-deco { position: absolute; inset: -30px -26px -14px; pointer-events: none; z-index: 2; }

.tale-arch-rule {
  position: absolute;
  inset: 4px 0 0;
  border: 1px solid rgba(150, 112, 48, .7);
  box-shadow:
    inset 0 0 0 3px rgba(232, 213, 173, .45),
    inset 0 0 0 4px rgba(150, 112, 48, .38);
}

/* corner marks, drawn as two L-shaped rules rather than a continuous frame */
.tale-arch-rule::before,
.tale-arch-rule::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--gilt);
}

.tale-arch-rule::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.tale-arch-rule::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

.tale-arch-deco i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, #fffaf0, rgba(246, 220, 158, .85) 34%, rgba(214, 168, 78, .35) 58%, transparent 74%);
}

/* a few read as four-pointed rather than round, so it is light and not bokeh */
.tale-arch-deco i.is-star {
  border-radius: 0;
  background: #fff3cf;
  filter: drop-shadow(0 0 3px rgba(246, 214, 140, .9));
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

@media (prefers-reduced-motion: no-preference) {
  /* opacity only — the compositor carries it, no frame costs layout */
  .tale-arch-deco i { animation: archMote 6s ease-in-out var(--d, 0s) infinite; }
}

@keyframes archMote {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

/* --- The homepage opens on her name -------------------------------------- */
/* The poetic line led and the name sat under it as a caption. Reversed: the
   name is the h1 now — it is what a visitor and a search engine both want
   first — and the sentence supports it underneath at a size that no longer
   pushes the demos below the fold. */
/* A bound cover, third and final pass: her references are tooled leather —
   a full engraved gold frame running the whole way round, grain in the hide,
   the lettering pressed in. The frame is one drawn tile, corner and chain,
   stamped four times by rotation and sliced as a border-image. */
.tale-byline-open {
  position: relative;
  margin: 0 0 clamp(1.4rem, 2.2vw, 2rem);
  text-align: center;
  padding: clamp(1.2rem, 1.9vw, 1.7rem) clamp(.8rem, 1.6vw, 1.6rem) clamp(1.3rem, 2vw, 1.8rem);
  border: 24px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg transform='rotate(0 60 60)'%3E%3Cg fill='none' stroke='%23d9b768' stroke-linecap='round'%3E%3Cpath d='M5 115 L5 5 L115 5' stroke-width='2.6'/%3E%3Cpath d='M13 115 L13 13 L115 13' stroke-width='1.1'/%3E%3Cpath d='M8 8 C16 10 22 14 26 22' stroke-width='1.6'/%3E%3Cpath d='M8 8 C10 16 14 22 22 26' stroke-width='1.6'/%3E%3Cpath d='M26 22 C28 26 28 30 25 33' stroke-width='1.3'/%3E%3Cpath d='M22 26 C26 28 30 28 33 25' stroke-width='1.3'/%3E%3C/g%3E%3Cg fill='%23d9b768'%3E%3Cpath d='M29 29 L34 24 L39 29 L34 34 Z'/%3E%3Ccircle cx='20' cy='9' r='1.7'/%3E%3Ccircle cx='9' cy='20' r='1.7'/%3E%3Cpath d='M48 9 L51.5 5.5 L55 9 L51.5 12.5 Z'/%3E%3Cpath d='M62 9 L65.5 5.5 L69 9 L65.5 12.5 Z'/%3E%3Cpath d='M76 9 L79.5 5.5 L83 9 L79.5 12.5 Z'/%3E%3Ccircle cx='44' cy='9' r='1.2'/%3E%3Ccircle cx='58.5' cy='9' r='1.2'/%3E%3Ccircle cx='72.5' cy='9' r='1.2'/%3E%3Ccircle cx='87' cy='9' r='1.2'/%3E%3C/g%3E%3C/g%3E%3Cg transform='rotate(90 60 60)'%3E%3Cg fill='none' stroke='%23d9b768' stroke-linecap='round'%3E%3Cpath d='M5 115 L5 5 L115 5' stroke-width='2.6'/%3E%3Cpath d='M13 115 L13 13 L115 13' stroke-width='1.1'/%3E%3Cpath d='M8 8 C16 10 22 14 26 22' stroke-width='1.6'/%3E%3Cpath d='M8 8 C10 16 14 22 22 26' stroke-width='1.6'/%3E%3Cpath d='M26 22 C28 26 28 30 25 33' stroke-width='1.3'/%3E%3Cpath d='M22 26 C26 28 30 28 33 25' stroke-width='1.3'/%3E%3C/g%3E%3Cg fill='%23d9b768'%3E%3Cpath d='M29 29 L34 24 L39 29 L34 34 Z'/%3E%3Ccircle cx='20' cy='9' r='1.7'/%3E%3Ccircle cx='9' cy='20' r='1.7'/%3E%3Cpath d='M48 9 L51.5 5.5 L55 9 L51.5 12.5 Z'/%3E%3Cpath d='M62 9 L65.5 5.5 L69 9 L65.5 12.5 Z'/%3E%3Cpath d='M76 9 L79.5 5.5 L83 9 L79.5 12.5 Z'/%3E%3Ccircle cx='44' cy='9' r='1.2'/%3E%3Ccircle cx='58.5' cy='9' r='1.2'/%3E%3Ccircle cx='72.5' cy='9' r='1.2'/%3E%3Ccircle cx='87' cy='9' r='1.2'/%3E%3C/g%3E%3C/g%3E%3Cg transform='rotate(180 60 60)'%3E%3Cg fill='none' stroke='%23d9b768' stroke-linecap='round'%3E%3Cpath d='M5 115 L5 5 L115 5' stroke-width='2.6'/%3E%3Cpath d='M13 115 L13 13 L115 13' stroke-width='1.1'/%3E%3Cpath d='M8 8 C16 10 22 14 26 22' stroke-width='1.6'/%3E%3Cpath d='M8 8 C10 16 14 22 22 26' stroke-width='1.6'/%3E%3Cpath d='M26 22 C28 26 28 30 25 33' stroke-width='1.3'/%3E%3Cpath d='M22 26 C26 28 30 28 33 25' stroke-width='1.3'/%3E%3C/g%3E%3Cg fill='%23d9b768'%3E%3Cpath d='M29 29 L34 24 L39 29 L34 34 Z'/%3E%3Ccircle cx='20' cy='9' r='1.7'/%3E%3Ccircle cx='9' cy='20' r='1.7'/%3E%3Cpath d='M48 9 L51.5 5.5 L55 9 L51.5 12.5 Z'/%3E%3Cpath d='M62 9 L65.5 5.5 L69 9 L65.5 12.5 Z'/%3E%3Cpath d='M76 9 L79.5 5.5 L83 9 L79.5 12.5 Z'/%3E%3Ccircle cx='44' cy='9' r='1.2'/%3E%3Ccircle cx='58.5' cy='9' r='1.2'/%3E%3Ccircle cx='72.5' cy='9' r='1.2'/%3E%3Ccircle cx='87' cy='9' r='1.2'/%3E%3C/g%3E%3C/g%3E%3Cg transform='rotate(270 60 60)'%3E%3Cg fill='none' stroke='%23d9b768' stroke-linecap='round'%3E%3Cpath d='M5 115 L5 5 L115 5' stroke-width='2.6'/%3E%3Cpath d='M13 115 L13 13 L115 13' stroke-width='1.1'/%3E%3Cpath d='M8 8 C16 10 22 14 26 22' stroke-width='1.6'/%3E%3Cpath d='M8 8 C10 16 14 22 22 26' stroke-width='1.6'/%3E%3Cpath d='M26 22 C28 26 28 30 25 33' stroke-width='1.3'/%3E%3Cpath d='M22 26 C26 28 30 28 33 25' stroke-width='1.3'/%3E%3C/g%3E%3Cg fill='%23d9b768'%3E%3Cpath d='M29 29 L34 24 L39 29 L34 34 Z'/%3E%3Ccircle cx='20' cy='9' r='1.7'/%3E%3Ccircle cx='9' cy='20' r='1.7'/%3E%3Cpath d='M48 9 L51.5 5.5 L55 9 L51.5 12.5 Z'/%3E%3Cpath d='M62 9 L65.5 5.5 L69 9 L65.5 12.5 Z'/%3E%3Cpath d='M76 9 L79.5 5.5 L83 9 L79.5 12.5 Z'/%3E%3Ccircle cx='44' cy='9' r='1.2'/%3E%3Ccircle cx='58.5' cy='9' r='1.2'/%3E%3Ccircle cx='72.5' cy='9' r='1.2'/%3E%3Ccircle cx='87' cy='9' r='1.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 38 round;
  background-color: #251030;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23d9b768' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M22 2 L42 22 L22 42 L2 22 Z'/%3E%3Cpath d='M22 15 L29 22 L22 29 L15 22 Z'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='1.1' fill='%23d9b768' fill-opacity='.14'/%3E%3Ccircle cx='0' cy='0' r='1.1' fill='%23d9b768' fill-opacity='.12'/%3E%3Ccircle cx='44' cy='0' r='1.1' fill='%23d9b768' fill-opacity='.12'/%3E%3Ccircle cx='0' cy='44' r='1.1' fill='%23d9b768' fill-opacity='.12'/%3E%3Ccircle cx='44' cy='44' r='1.1' fill='%23d9b768' fill-opacity='.12'/%3E%3C/svg%3E"), var(--fiber), var(--fiber);
  background-size: 44px 44px, 190px 190px, 89px 89px;
  background-blend-mode: normal, soft-light, overlay;
  background-clip: border-box;
  box-shadow:
    inset 0 0 26px rgba(10, 0, 16, .55),
    0 10px 22px rgba(20, 4, 28, .42);
}

.tale-byline-open .tale-name {
  font-size: clamp(2.4rem, 3.4vw, 3.5rem);
  /* engraved foil: the metal itself grades from lit crest to deep base,
     and the drop-shadow is the cut it sits in */
  background: linear-gradient(180deg, #fbeab8 8%, #ecc87e 42%, #b3853c 72%, #e9cd8a 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1.5px 1px rgba(8, 0, 14, .85)) drop-shadow(0 0 10px rgba(240, 205, 130, .28));
  text-shadow: none;
}

.tale-byline-open .tale-epithet {
  font-size: clamp(1.28rem, 1.66vw, 1.58rem);
  color: #f6d477;
}

.tale-byline-open .tale-role {
  font-size: clamp(.72rem, .95vw, .84rem);
  color: rgba(236, 210, 154, .72);
}


/* --- Nightfall: the world the book sits in ------------------------------- */
/* The plum ground was almost opaque, which flattened the watercolour behind
   it and left the page feeling shut in. It is lighter now, and carries a
   drift of stars so the surround is somewhere rather than just dark. */
.night-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.night-sky i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #fff6dc, rgba(246, 214, 128, .7) 38%, transparent 72%);
  opacity: .5;
}

.night-sky i.is-star {
  border-radius: 0;
  background: #fff3cf;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 4px rgba(255, 226, 150, .85));
}

@media (prefers-reduced-motion: no-preference) {
  /* opacity only, so the compositor carries all of them for free */
  .night-sky i { animation: nightTwinkle var(--t) ease-in-out var(--d) infinite; }
}

@keyframes nightTwinkle {
  0%, 100% { opacity: .16; }
  50% { opacity: .92; }
}

/* --- Flare on the chapter marks ------------------------------------------ */
/* These sat still while the page around them moved. They catch now, slightly
   out of step with each other, which is what stops a gilt rule reading flat. */
@media (prefers-reduced-motion: no-preference) {
  .tale-chapter-mark i { animation: markGlint 3.4s ease-in-out infinite; }
  .tale-chapter-mark i:last-of-type { animation-delay: -1.7s; }
  .tale-flourish { animation: markGlint 6s ease-in-out infinite; }
}

/* opacity only — animating text-shadow repainted every frame on every page */
@keyframes markGlint {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* --- The question the page exists to ask --------------------------------- */
/* .tale-voices carries margin-top:auto to balance the two leaves, which left
   a hole under her name. This fills it with the one thing worth saying there. */
/* The ask was Cormorant italic in rubric — exactly the epithet's costume two
   lines above it — while COME AND LISTEN wore the role's Cinzel caps. Two
   pairs of levels dressed alike, which is what collapsed the hierarchy. The
   ask moves to IM Fell in ink: the name's family, nobody else's on this leaf. */
.tale-ask {
  margin: clamp(.9rem, 1.5vw, 1.4rem) 0 0;
  padding-top: clamp(.9rem, 1.4vw, 1.25rem);
  border-top: 1px solid rgba(150, 112, 48, .3);
  color: #2f2015;
  /* dipped pen, not typeset: the Fell italic's swash, a size up, with the
     faint soak of ink into paper */
  font: italic 400 clamp(1.75rem, 2.4vw, 2.5rem)/1.3 var(--fell);
  letter-spacing: .01em;
  text-align: center;
  text-shadow: 0 0 1px rgba(47, 32, 21, .5), 0 1px 2px rgba(47, 32, 21, .16);
}

/* .tale-voices carried margin-top:auto to balance the leaves; with the ask in
   place it only opened a hole between the two. The leaves stretch anyway. */
.tale-byline-open ~ .tale-voices { margin-top: clamp(1.1rem, 1.8vw, 1.7rem); }

/* --- Wax, pressed while it was still soft -------------------------------- */
/* Drawn, not rounded: a border-radius can only make an egg. This is a lobed
   blob smoothed the same way the opening ink is, with a pressed disc inside
   it and the light catching the rim — the shape wax actually lands in. */
.tale-wax {
  display: grid;
  place-items: center;
  width: clamp(74px, 6.4vw, 94px);
  height: clamp(74px, 6.4vw, 94px);
  margin: clamp(1rem, 1.7vw, 1.5rem) 0 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3CradialGradient id='w' cx='38%25' cy='30%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23b25843'/%3E%3Cstop offset='.55' stop-color='%238a3325'/%3E%3Cstop offset='1' stop-color='%23561b10'/%3E%3C/radialGradient%3E%3CradialGradient id='p' cx='40%25' cy='32%25' r='72%25'%3E%3Cstop offset='0' stop-color='%23a34635'/%3E%3Cstop offset='.7' stop-color='%237d2b20'/%3E%3Cstop offset='1' stop-color='%23652114'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M113.0 60.0C112.6 66.6 107.4 75.4 105.1 81.5C102.9 87.7 104.3 92.4 99.5 96.8C94.7 101.3 82.5 105.7 76.2 108.4C69.9 111.1 68.0 113.5 61.8 113.0C55.7 112.4 45.9 107.1 39.5 105.0C33.0 103.0 27.6 105.5 23.2 100.9C18.8 96.3 16.0 84.0 13.2 77.5C10.3 71.0 5.7 68.4 6.0 61.9C6.3 55.4 12.6 45.0 14.9 38.5C17.2 31.9 15.2 26.9 19.8 22.5C24.3 18.1 35.9 14.8 42.1 12.2C48.4 9.7 50.7 6.6 57.2 7.1C63.8 7.6 74.7 13.1 81.3 15.3C87.9 17.6 92.4 16.0 96.8 20.5C101.2 25.0 105.1 35.6 107.8 42.1C110.5 48.7 113.4 53.4 113.0 60.0Z' fill='url(%23w)'/%3E%3Cpath d='M113.0 60.0C112.6 66.6 107.4 75.4 105.1 81.5C102.9 87.7 104.3 92.4 99.5 96.8C94.7 101.3 82.5 105.7 76.2 108.4C69.9 111.1 68.0 113.5 61.8 113.0C55.7 112.4 45.9 107.1 39.5 105.0C33.0 103.0 27.6 105.5 23.2 100.9C18.8 96.3 16.0 84.0 13.2 77.5C10.3 71.0 5.7 68.4 6.0 61.9C6.3 55.4 12.6 45.0 14.9 38.5C17.2 31.9 15.2 26.9 19.8 22.5C24.3 18.1 35.9 14.8 42.1 12.2C48.4 9.7 50.7 6.6 57.2 7.1C63.8 7.6 74.7 13.1 81.3 15.3C87.9 17.6 92.4 16.0 96.8 20.5C101.2 25.0 105.1 35.6 107.8 42.1C110.5 48.7 113.4 53.4 113.0 60.0Z' fill='none' stroke='rgba(255,178,150,.22)' stroke-width='1.6' transform='translate(-.6,-.8)'/%3E%3Ccircle cx='60' cy='60' r='37' fill='url(%23p)' stroke='rgba(40,8,4,.42)' stroke-width='1.4'/%3E%3Cpath d='M31 46 A34 34 0 0 1 49 27' fill='none' stroke='rgba(255,190,160,.4)' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M89 76 A34 34 0 0 1 72 92' fill='none' stroke='rgba(38,7,3,.5)' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 4px 9px rgba(50, 16, 10, .45));
  transform: rotate(-6deg);
}

/* a sprig pressed into the wax while it was soft, as on a real seal */
.tale-wax::before {
  content: "";
  position: absolute;
  inset: 22%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='rgba(46,10,5,.65)' stroke-width='2' transform='translate(.7,1)'%3E%3Cpath d='M14 50 C24 40 38 28 50 14'/%3E%3Cpath d='M22 42 C16 42 11 38 10 31 C17 32 21 36 22 42 Z'/%3E%3Cpath d='M30 34 C24 33 20 29 20 22 C27 24 30 28 30 34 Z'/%3E%3Cpath d='M38 26 C33 24 30 20 31 13 C37 16 39 20 38 26 Z'/%3E%3Cpath d='M28 44 C34 45 39 43 42 37 C35 36 30 38 28 44 Z'/%3E%3Cpath d='M36 36 C42 37 47 34 49 28 C42 27 38 30 36 36 Z'/%3E%3C/g%3E%3Cg stroke='rgba(240,200,160,.55)' stroke-width='2'%3E%3Cpath d='M14 50 C24 40 38 28 50 14'/%3E%3Cpath d='M22 42 C16 42 11 38 10 31 C17 32 21 36 22 42 Z'/%3E%3Cpath d='M30 34 C24 33 20 29 20 22 C27 24 30 28 30 34 Z'/%3E%3Cpath d='M38 26 C33 24 30 20 31 13 C37 16 39 20 38 26 Z'/%3E%3Cpath d='M28 44 C34 45 39 43 42 37 C35 36 30 38 28 44 Z'/%3E%3Cpath d='M36 36 C42 37 47 34 49 28 C42 27 38 30 36 36 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .9;
}

.tale-wax b {
  position: relative;
  color: rgba(255, 214, 190, .82);
  font: 600 clamp(1.05rem, 1.4vw, 1.3rem)/1 var(--caps);
  letter-spacing: .12em;
  /* stamped in, not printed on */
  text-shadow: 0 1px 0 rgba(255, 200, 175, .3), 0 -1px 1px rgba(50, 12, 6, .75);
}

/* --- Ink that soaked a little before it dried ---------------------------- */
/* Only the display sizes. Body text stays crisp — a bleed at reading size is
   just blur, and this page already asks people to read a lot of it. */
.tale-opening,
.tale-chapter-head h2,
.tale-head {
  text-shadow: 0 0 1px rgba(59, 42, 32, .34), 0 1px 2px rgba(59, 42, 32, .12);
}

.tale-versal {
  text-shadow: 0 2px 12px rgba(18, 2, 24, .7), 0 0 3px rgba(242, 210, 140, .5);
}

/* A four-word opening earns display size in a way a full sentence never did.
   Set in italic with a breath of gold behind the ink, trailing stars, and a
   flourish ruled beneath — the storybook opening, not a heading that happens
   to quote one. */
.tale-opening-solo {
  font-size: clamp(2.7rem, 4.2vw, 4.4rem);
  font-style: italic;
  margin-bottom: clamp(1.2rem, 1.9vw, 1.7rem);
  text-shadow: 0 0 1px rgba(59, 42, 32, .34), 0 0 14px rgba(212, 166, 77, .28);
}

.tale-opening-solo::after {
  content: "";
  display: block;
  width: min(300px, 62%);
  height: 22px;
  margin-top: clamp(.7rem, 1.2vw, 1rem);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 36'%3E%3Cg fill='none' stroke='%23a37c33' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M16 18 H126'/%3E%3Cpath d='M234 18 H344'/%3E%3Cpath d='M126 18 C138 8 150 8 156 14'/%3E%3Cpath d='M126 18 C138 28 150 28 156 22'/%3E%3Cpath d='M234 18 C222 8 210 8 204 14'/%3E%3Cpath d='M234 18 C222 28 210 28 204 22'/%3E%3C/g%3E%3Cg fill='%23a37c33'%3E%3Ccircle cx='160' cy='18' r='2.4'/%3E%3Ccircle cx='200' cy='18' r='2.4'/%3E%3Cpath d='M6 18 L12 14.6 L18 18 L12 21.4 Z'/%3E%3Cpath d='M342 18 L348 14.6 L354 18 L348 21.4 Z'/%3E%3C/g%3E%3Cpath d='M180 7 L191 18 L180 29 L169 18 Z' fill='%2398402f' stroke='%23c9a24a' stroke-width='1'/%3E%3C/svg%3E") left center / contain no-repeat;
}

.tale-h1-stars {
  display: inline-block;
  margin-left: .25em;
  color: var(--gilt);
  font-size: .38em;
  font-style: normal;
  letter-spacing: .3em;
  vertical-align: .6em;
  text-shadow: 0 0 8px rgba(230, 195, 124, .75);
}

@media (prefers-reduced-motion: no-preference) {
  .tale-h1-stars { animation: markGlint 3.8s ease-in-out infinite; }
}

/* Commercial and animation sit beside a versal in a half-leaf, where 46ch is
   right. Audiobook runs the full sheet, so its line can finish. */
.demo-audiobook .tale-title-sub { max-width: none; }

.page-demo .tale-opening { margin-bottom: clamp(1.5rem, 2.4vw, 2.2rem); }

/* This slot is a track title everywhere else — Cinzel caps, tracked, clipped
   to one line. On the audiobook shelf it is a sentence about the story, so it
   has to undo all of that: prose face, sentence case, free to wrap. */
.demo-audiobook .tale-track .audio-info strong {
  overflow: visible;
  white-space: normal;
  font: 500 clamp(1.04rem, 1.22vw, 1.16rem)/1.4 var(--hand);
  letter-spacing: 0;
  text-transform: none;
  color: var(--sepia-read);
}

/* --- The homepage leaf, set as a title page ------------------------------ */
/* A name centred on a blank sheet is a caption. A title page announces: an
   ornament above it, rules holding it, and the whole block sitting on its own
   ground so the eye stops there before it goes anywhere else. */
.tale-cartouche {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.6rem, 1.1vw, 1rem);
  margin: 0 0 clamp(.6rem, 1vw, .9rem);
  color: var(--gilt);
  line-height: 1;
}

.tale-cartouche i { font-size: .78rem; font-style: normal; opacity: .8; }
.tale-cartouche b { color: var(--rubric); font: 400 1.5rem/1 Georgia, serif; }

/* (merged into the book-cover block above) */

/* the drawn frame carries its own rules; no extra hairlines needed */

/* --- The letter, set the way a book sets a long page --------------------- */
/* 400 words in stacked, evenly spaced blocks reads as a web page. Books indent
   the turn of each paragraph and let the leading do the separating, which is
   what makes a long column comfortable rather than a wall. */
.tale-letter-body {
  font-size: clamp(1.28rem, 1.5vw, 1.44rem);
  line-height: 1.78;
  color: var(--sepia-read);
}

.tale-letter-body p { margin: 0; }
.tale-letter-body p + p { margin-top: .45em; text-indent: 1.7em; }

/* the opening word carries the eye in, as an initial does in a printed book */
.tale-letter-body p:first-child::first-letter {
  float: left;
  margin: .06em .1em 0 0;
  color: var(--rubric);
  font: 400 3.5em/.82 var(--fell);
  text-shadow: 0 1px 2px rgba(96, 40, 28, .22);
}

.tale-letter-body p:first-child::first-line {
  font-variant-caps: small-caps;
  letter-spacing: .04em;
}

/* the line she wants read is the one that answers the fear */
.tale-letter-body strong { color: var(--rubric); font-weight: 600; }

.tale-salutation { color: var(--rubric); }

/* --- The keepsake in the letter ------------------------------------------ */
/* Her painting for her grandmother sits beside the paragraphs that tell that
   story, mounted like a photograph slipped into the letter. object-position
   crops the last sliver of desk out of the shot. */
.tale-keepsake {
  float: right;
  width: min(235px, 42%);
  margin: .3rem 0 .9rem clamp(1.1rem, 2vw, 1.8rem);
  padding: 8px 8px 11px;
  background: rgba(255, 250, 235, .92);
  border: 1px solid rgba(150, 112, 48, .38);
  box-shadow: 0 7px 16px rgba(70, 44, 22, .28);
  transform: rotate(1.4deg);
}

.tale-keepsake img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 780 / 1005;
  object-fit: cover;
  object-position: top;
}

.tale-keepsake figcaption {
  margin-top: .55rem;
  color: var(--sepia-soft);
  font: italic 500 .98rem/1.45 var(--hand);
  text-align: center;
}

/* the signoff divider already clears its own line; make it clear the float */
.tale-letter .tale-signoff { clear: both; }

@media (max-width: 620px) {
  .tale-keepsake {
    float: none;
    width: min(280px, 86%);
    margin: 1.1rem auto 1.2rem;
  }
}

/* Esme signs her section the way Da Eun seals hers — one inked paw, pressed a
   little crooked, the way a stamp actually lands. */
.tale-pawprint {
  display: block;
  width: clamp(46px, 4vw, 58px);
  height: auto;
  margin: clamp(.9rem, 1.5vw, 1.3rem) 0 0 auto;
  color: rgba(74, 53, 39, .78);
  mix-blend-mode: multiply;
  transform: rotate(-14deg);
}

/* --- The common ground --------------------------------------------------- */
/* Her mission paragraph, pulled out from under "Once upon a time" to run the
   full width beneath both leaves — the bridge between the child in the film
   and the artist telling the story. Three voices share it: Cinzel opens,
   Cormorant carries, and the Fell italic closes the way a tale does. */
.tale-vow {
  max-width: 74ch;
  margin: 0 auto;
  text-align: center;
}

.tale-vow p {
  margin: 0;
  color: var(--sepia-read);
  font: 500 clamp(1.32rem, 1.62vw, 1.56rem)/1.72 var(--hand);
}

.tale-vow-open {
  color: var(--gilt-deep);
  font: 600 .78em var(--caps);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.tale-vow em { color: var(--rubric); font-style: italic; }

.tale-vow-close {
  margin-top: clamp(.7rem, 1.2vw, 1rem) !important;
  font: italic 400 clamp(1.42rem, 1.8vw, 1.74rem)/1.55 var(--fell) !important;
  color: var(--sepia) !important;
}

.tale-vow-close strong { color: var(--rubric); font-weight: 400; }

/* --- Terms notice --------------------------------------------------------- */
.site-terms {
  grid-column: 1 / -1;
  margin-top: .9rem;
  padding: 1.05rem 1.3rem;
  border: 1px solid rgba(231, 189, 98, .22);
  background: rgba(17, 2, 23, .28);
}

.site-terms > span {
  display: block;
  margin-bottom: .4rem;
  color: rgba(236, 210, 154, .82);
  font: 600 .62rem/1 var(--caps);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.site-terms p {
  margin: 0;
  max-width: 88ch;
  color: rgba(240, 226, 198, .62);
  font: 400 .86rem/1.6 var(--hand);
}

@media (max-width: 760px) {
  .site-terms { padding: .95rem 1.05rem; }
  .site-terms p { font-size: .86rem; }
}