:root {
  /* The Cartographer's Path v1.0 - isolated placeholder theme layer */
  --cb-paper-50: #f7f1e7;
  --cb-paper-100: #eae1d3;
  --cb-paper-200: #dacbb4;
  --cb-paper-300: #cab69b;
  --cb-ink-900: #151514;
  --cb-ink-700: #4a4238;
  --cb-ink-500: #665f55;
  --cb-gold-700: #76531e;
  --cb-gold-600: #8b6830;
  --cb-gold-400: #c6a673;
  --cb-night-950: #151514;
  --cb-night-900: #201e1a;
  --cb-focus: #285f6b;

  --cb-font-display: "Cormorant Garamond", "Cormorant Infant", Georgia, serif;
  --cb-font-narrative: "Cormorant Infant", Georgia, serif;
  --cb-font-ui: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;

  --night: var(--cb-night-950);
  --night-soft: var(--cb-night-900);
  --panel: var(--cb-night-900);
  --parchment: var(--cb-paper-50);
  --parchment-muted: var(--cb-paper-200);
  --gold: var(--cb-gold-600);
  --gold-bright: var(--cb-gold-400);
  --gold-soft: rgb(198 166 115 / .62);
  --gold-faint: rgb(198 166 115 / .18);
  --ember: #87502f;
  --display: var(--cb-font-display);
  --interface: var(--cb-font-ui);
}

html,
body {
  background: var(--cb-night-950);
}

body {
  font-family: var(--cb-font-narrative);
}

.story-flow {
  background: linear-gradient(180deg, var(--cb-night-950), var(--cb-night-900) 48%, #181714);
}

.scene {
  background: var(--cb-night-950);
}

.mountain-layer {
  background:
    linear-gradient(rgb(247 241 231 / .015), rgb(21 21 20 / .08)),
    url("assets/chronicleborn-hero-eastern-approach-4k.webp") center / cover no-repeat;
  filter:
    sepia(.08)
    saturate(.78)
    contrast(1.015)
    brightness(calc(1 - var(--room-reveal) * .36))
    blur(calc(var(--room-reveal) * 1.5px));
}

.scene::after {
  background:
    radial-gradient(transparent 40%, rgb(74 66 56 / .07) 76%, rgb(21 21 20 / .30) 100%),
    linear-gradient(180deg, rgb(247 241 231 / .015), rgb(21 21 20 / .10));
}

.threshold-warmth {
  background:
    radial-gradient(circle at 18% 82%, rgb(135 80 47 / .36), rgb(118 83 30 / .10) 29%, transparent 58%),
    radial-gradient(circle at 50% 52%, rgb(198 166 115 / .09), transparent 47%),
    linear-gradient(rgb(21 21 20 / .05), rgb(21 21 20 / .34));
  mix-blend-mode: screen;
}

.route-line {
  fill: var(--cb-gold-600);
  opacity: calc(var(--route-reveal) * .42);
}

.route-line path {
  stroke: var(--cb-gold-600);
  stroke-width: 1;
  stroke-dasharray: .006 .016;
}

.edmund-presence {
  border-color: rgb(198 166 115 / calc(var(--image-layout) * .20));
  box-shadow: 0 30px 78px rgb(0 0 0 / calc(var(--image-layout) * .38));
}

.edmund-presence::after {
  background:
    linear-gradient(90deg, transparent 58%, rgb(32 30 26 / .80) 100%),
    linear-gradient(0deg, rgb(21 21 20 / .74), transparent 38%);
}

.edmund-presence img {
  filter:
    saturate(.78)
    sepia(.06)
    contrast(1.02)
    blur(calc((1 - var(--room-reveal)) * 7px));
}

.edmund-presence .name {
  font-family: var(--cb-font-display);
  font-weight: 600;
}

.edmund-presence .role {
  color: var(--cb-gold-400);
  font-family: var(--cb-font-ui);
  font-weight: 600;
}

.frame {
  border-color: rgb(198 166 115 / .30);
  box-shadow: none;
}

.frame::before {
  display: none;
}

.hero-content {
  isolation: isolate;
  width: min(80vw, 860px);
  filter:
    drop-shadow(0 1px 0 rgb(247 241 231 / .72))
    blur(calc(var(--hero-fade) * 2px));
  transform:
    translateY(calc(-20vh - var(--hero-fade) * 28px))
    scale(calc(1 - var(--hero-fade) * .035));
}

.hero-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12% -12% -18%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgb(247 241 231 / .84) 0 36%,
    rgb(247 241 231 / .62) 54%,
    rgb(247 241 231 / .22) 69%,
    transparent 82%
  );
  filter: blur(9px);
}

.logo {
  width: min(58vw, 760px);
  max-height: 38vh;
  object-fit: contain;
}

.divider {
  display: none;
}

.tagline {
  margin-top: clamp(6px, 1.3vh, 16px);
  color: var(--cb-ink-900);
  font-family: var(--cb-font-display);
  font-weight: 600;
  text-shadow: 0 1px 0 rgb(247 241 231 / .78), 0 2px 12px rgb(247 241 231 / .54);
}

.coming-soon,
.scroll-invitation,
.eyebrow,
.audio-note,
.audio-time,
.updates-trigger,
.updates-form,
.dialog-close {
  font-family: var(--cb-font-ui);
}

.coming-soon {
  color: var(--cb-gold-700);
  margin-top: clamp(17px, 2.4vh, 27px);
  letter-spacing: .18em;
  text-shadow: 0 1px 0 rgb(247 241 231 / .72);
}

.scroll-invitation {
  width: 64px;
  height: 78px;
  justify-content: center;
  gap: 0;
  bottom: clamp(22px, 3.5vh, 46px);
  color: var(--cb-ink-900);
  background: radial-gradient(
    ellipse at center,
    rgb(247 241 231 / .92) 0 18%,
    rgb(247 241 231 / .70) 40%,
    rgb(247 241 231 / .24) 60%,
    transparent 76%
  );
  border-radius: 50%;
  text-shadow: none;
}

.scroll-invitation svg {
  width: 32px;
  height: 56px;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgb(247 241 231 / .88));
}

.scroll-invitation:hover,
.scroll-invitation:focus-visible {
  color: var(--cb-gold-700);
}

.edmund-section::before {
  background-image: repeating-linear-gradient(
    0deg,
    rgb(247 241 231 / .012) 0,
    rgb(247 241 231 / .012) 1px,
    transparent 1px,
    transparent 5px
  );
  background-size: auto;
}

.library-glow {
  background: radial-gradient(circle, rgb(135 80 47 / .20), rgb(118 83 30 / .045) 46%, transparent 70%);
}

.introduction {
  background: linear-gradient(135deg, rgb(32 30 26 / .96), rgb(21 21 20 / .98));
  border-color: rgb(198 166 115 / .20);
  box-shadow: 0 28px 76px rgb(0 0 0 / .28);
  backdrop-filter: blur(8px);
}

.introduction::before {
  display: none;
}

.eyebrow {
  color: var(--cb-gold-400);
  font-weight: 600;
  letter-spacing: .16em;
}

.introduction h2 {
  font-family: var(--cb-font-display);
  font-weight: 600;
  letter-spacing: -.015em;
}

.introduction h2 span {
  color: var(--cb-paper-200);
  font-family: var(--cb-font-narrative);
  font-weight: 400;
}

.audio-player {
  margin: 32px 0 38px;
  padding: 18px 0;
  border: 0;
  border-top: 1px solid rgb(198 166 115 / .26);
  border-bottom: 1px solid rgb(198 166 115 / .26);
  background: transparent;
}

.play-button {
  color: var(--cb-ink-900);
  background: var(--cb-gold-400);
  border: 1px solid var(--cb-gold-400);
}

.play-button:hover {
  background: var(--cb-paper-100);
}

.play-button:focus-visible,
.updates-trigger:focus-visible,
.updates-form button:focus-visible,
.updates-form input:focus-visible,
.audio-progress:focus-visible,
.dialog-close:focus-visible {
  outline: 3px solid var(--cb-focus);
  outline-offset: 3px;
}

.audio-title {
  color: var(--cb-paper-50);
  font-family: var(--cb-font-ui);
  font-size: 1rem;
  font-weight: 600;
}

.audio-note {
  color: var(--cb-paper-300);
}

.audio-progress {
  accent-color: var(--cb-gold-400);
}

.audio-time {
  color: var(--cb-paper-200);
}

.transcript {
  color: var(--cb-paper-100);
  max-width: 70ch;
  font-family: var(--cb-font-narrative);
  font-size: clamp(1.125rem, 1.22vw, 1.25rem);
  line-height: 1.58;
}

.transcript .dry-line,
.transcript .closing {
  color: var(--cb-paper-50);
}

.updates-cta {
  border-color: rgb(198 166 115 / .23);
}

.updates-cta p {
  color: var(--cb-paper-200);
}

.updates-trigger {
  min-height: 44px;
  color: var(--cb-paper-50);
  border-color: var(--cb-gold-400);
  font-weight: 700;
  letter-spacing: .08em;
}

.updates-trigger:hover {
  color: var(--cb-ink-900);
  background: var(--cb-gold-400);
}

.updates-dialog {
  color: var(--cb-ink-900);
}

.dialog-shell {
  color: var(--cb-ink-900);
  background:
    repeating-linear-gradient(0deg, rgb(74 66 56 / .018) 0, rgb(74 66 56 / .018) 1px, transparent 1px, transparent 5px),
    radial-gradient(circle at 86% 8%, rgb(139 104 48 / .10), transparent 28%),
    linear-gradient(rgb(247 241 231 / .98), rgb(234 225 211 / .99));
  border-color: rgb(118 83 30 / .55);
  box-shadow: 0 34px 100px rgb(0 0 0 / .62);
}

.dialog-shell::before {
  border-color: rgb(118 83 30 / .18);
}

.dialog-compass {
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  object-fit: contain;
}

.updates-dialog .eyebrow {
  color: var(--cb-gold-700);
}

.updates-dialog h2 {
  font-family: var(--cb-font-display);
  font-weight: 600;
}

.updates-dialog h2 + p {
  color: var(--cb-ink-700);
  font-family: var(--cb-font-narrative);
  font-size: 1.08rem;
}

.updates-form label {
  color: var(--cb-ink-700);
  font-weight: 700;
}

.updates-form input {
  min-height: 44px;
  color: var(--cb-ink-900);
  background: rgb(247 241 231 / .78);
  border-color: rgb(118 83 30 / .42);
}

.updates-form button {
  min-height: 44px;
  color: var(--cb-paper-50);
  background: var(--cb-ink-900);
  border-color: var(--cb-gold-700);
  font-weight: 700;
}

.updates-form button:hover {
  background: var(--cb-ink-700);
}

.consent,
.form-message {
  color: var(--cb-ink-500);
}

.form-message {
  color: var(--cb-gold-700);
}

@media (max-width: 760px) {
  .mountain-layer {
    background-position: 42%;
  }

  .hero-content {
    transform:
      translateY(calc(-23vh - var(--hero-fade) * 28px))
      scale(calc(1 - var(--hero-fade) * .035));
  }

  .logo {
    width: min(82vw, 620px);
    max-height: 38vh;
  }

  .tagline {
    margin-top: 4px;
  }

  .audio-player {
    padding-block: 16px;
  }

  .transcript {
    font-size: 1.125rem;
    line-height: 1.58;
  }
}

@media (max-height: 560px) {
  .logo {
    width: min(62vw, 760px);
    max-height: 38vh;
  }
}

/* Edmund's letter: a separate, scroll-driven three-panel parchment layer. */
.story-flow {
  --letter-progress: 0;
  --letter-enter: 0;
  --letter-top-open: 0;
  --letter-bottom-open: 0;
  --letter-settle: 0;
  --letter-middle-ink: 0;
  --letter-top-ink: 0;
  --letter-bottom-ink: 0;
  --letter-top-crease: 0;
  --letter-bottom-crease: 0;
  --letter-top-face: 0;
  --letter-bottom-face: 0;
}

.edmund-section {
  min-height: 310svh;
  padding: 0 clamp(18px, 4vw, 70px);
  overflow: visible;
}

.edmund-section .library-glow {
  bottom: 0;
}

.edmund-frame {
  position: sticky;
  top: 0;
  height: 100svh;
  width: min(1500px, 100%);
  grid-template-columns: minmax(340px, .78fr) minmax(610px, 1.22fr);
  align-items: center;
}

.portrait-reserve {
  height: 100%;
}

.introduction.letter-stage {
  position: relative;
  height: 96svh;
  min-height: 690px;
  padding: 2svh 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  perspective: 1800px;
  pointer-events: auto;
  opacity: var(--letter-enter);
  transform: translateY(calc((1 - var(--letter-enter)) * 42px)) scale(calc(.965 + var(--letter-enter) * .035));
  will-change: opacity, transform;
}

.introduction.letter-stage::before {
  display: none;
}

.letter-sheet {
  position: relative;
  width: min(800px, 100%);
  height: 92svh;
  min-height: 660px;
  max-height: 980px;
  margin: 0 auto;
  color: #352d23;
  transform-style: preserve-3d;
  filter: drop-shadow(0 26px 34px rgb(0 0 0 / calc(.26 + var(--letter-settle) * .18)));
}

.fold-panel {
  position: relative;
  z-index: 2;
  height: 30.666666%;
  color: #352d23;
  background-color: #eee2c9;
  background-image:
    linear-gradient(90deg, rgb(74 55 31 / .055), transparent 8% 91%, rgb(74 55 31 / .07)),
    repeating-linear-gradient(7deg, rgb(84 64 39 / .018) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 17% 19%, rgb(255 255 255 / .28), transparent 31%),
    linear-gradient(108deg, #e7d7b8, #f2e7d1 47%, #e6d5b5);
  border-inline: 1px solid rgb(103 74 28 / .38);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, filter;
}

.fold-panel::before,
.fold-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fold-panel::before {
  z-index: 2;
  opacity: calc(1 - var(--letter-settle));
  background: linear-gradient(180deg, rgb(255 255 255 / .10), transparent 24% 76%, rgb(64 43 20 / .13));
}

.fold-panel::after {
  z-index: 3;
  opacity: .38;
  background: radial-gradient(ellipse at 48% 10%, transparent 46%, rgb(82 59 31 / .08));
  mix-blend-mode: multiply;
}

.fold-panel-top {
  z-index: 3;
  border-top: 1px solid rgb(103 74 28 / .45);
  transform-origin: 50% 100%;
  transform: rotateX(calc(-178deg + var(--letter-top-open) * 178deg));
  filter: brightness(calc(.76 + var(--letter-top-open) * .24));
}

.fold-panel-middle {
  z-index: 2;
  border-top: 1px solid rgb(103 74 28 / .28);
  border-bottom: 1px solid rgb(103 74 28 / .28);
  box-shadow:
    inset 0 13px 17px rgb(70 46 19 / calc(.18 - var(--letter-settle) * .12)),
    inset 0 -13px 17px rgb(70 46 19 / calc(.18 - var(--letter-settle) * .12));
}

.fold-panel-bottom {
  z-index: 1;
  height: 38.666668%;
  border-bottom: 1px solid rgb(103 74 28 / .45);
  transform-origin: 50% 0;
  transform: rotateX(calc(178deg - var(--letter-bottom-open) * 178deg));
  filter: brightness(calc(.72 + var(--letter-bottom-open) * .28));
}

.fold-surface {
  position: relative;
  z-index: 4;
  height: 100%;
  padding: clamp(18px, 2.2vh, 26px) clamp(30px, 3.3vw, 52px);
  overflow: hidden;
}

.fold-panel-top .fold-surface { opacity: var(--letter-top-ink); }
.fold-panel-middle .fold-surface { opacity: var(--letter-middle-ink); }
.fold-panel-bottom .fold-surface { opacity: var(--letter-bottom-ink); }

.letter-stage .eyebrow {
  margin-bottom: 6px;
  color: #7b5827;
  font-size: .62rem;
  letter-spacing: .17em;
}

.letter-stage h2 {
  margin: 0;
  color: #30281f;
  font-family: "Segoe Print", "Bradley Hand", "Snell Roundhand", cursive;
  font-size: clamp(1.65rem, 2.2vw, 2.55rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.025em;
}

.letter-stage h2 span {
  display: inline;
  margin: 0 0 0 .14em;
  color: #4e4336;
  font-family: inherit;
  font-size: .72em;
  font-weight: 400;
}

.letter-stage .audio-player {
  grid-template-columns: auto minmax(150px, auto) 1fr auto;
  gap: 8px 13px;
  margin: 12px 0 13px;
  padding: 8px 0;
  border-color: rgb(118 83 30 / .24);
}

.letter-stage .play-button {
  width: 37px;
  height: 37px;
  color: #f7f1e7;
  background: #76531e;
  border-color: #76531e;
}

.letter-stage .play-button:hover { background: #4a4238; }
.letter-stage .play-button svg { width: 17px; height: 17px; }
.letter-stage .audio-title { color: #352d23; font-size: .78rem; }
.letter-stage .audio-note,
.letter-stage .audio-time { color: #6d604f; font-size: .63rem; }
.letter-stage .audio-progress { min-width: 90px; accent-color: #76531e; }

.letter-stage .transcript {
  max-width: none;
  color: #3d3429;
  font-family: "Segoe Print", "Bradley Hand", "Snell Roundhand", cursive;
  font-size: clamp(.79rem, .88vw, .95rem);
  line-height: 1.48;
  letter-spacing: .005em;
}

.letter-stage .transcript p { margin: 0 0 .7em; }
.letter-stage .transcript .dry-line,
.letter-stage .transcript .closing { color: #2f271e; }

.letter-signature {
  height: clamp(38px, 5.2vh, 58px);
  margin: -2px 4px 2px auto;
  text-align: right;
}

.letter-signature img {
  width: min(230px, 40%);
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

.letter-stage .updates-cta {
  gap: 16px;
  margin-top: 4px;
  padding-top: 11px;
  border-color: rgb(118 83 30 / .24);
}

.letter-stage .updates-cta p {
  color: #5a4d3c;
  font-family: "Segoe Print", "Bradley Hand", "Snell Roundhand", cursive;
  font-size: .76rem;
}

.letter-stage .updates-trigger {
  min-height: 36px;
  padding: 9px 15px;
  color: #342b21;
  border-color: #76531e;
  font-size: .63rem;
}

.letter-stage .updates-trigger:hover {
  color: #f7f1e7;
  background: #76531e;
}

.letter-cover {
  position: absolute;
  z-index: 9;
  top: 30.666666%;
  left: 0;
  width: 100%;
  height: 30.666666%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  color: #4a3c2c;
  pointer-events: none;
  opacity: calc(1 - var(--letter-middle-ink));
  transform: translateZ(5px);
}

.letter-cover span {
  color: #7b684d;
  font: 600 .58rem/1 var(--cb-font-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.letter-cover strong {
  font-family: var(--cb-font-display);
  font-size: clamp(1.65rem, 2.5vw, 2.6rem);
  font-weight: 600;
}

.letter-cover i {
  width: 42px;
  height: 42px;
  margin-top: 5px;
  display: grid;
  place-items: center;
  color: #eadfc9;
  background: radial-gradient(circle at 38% 32%, #9e7130, #6f481c 70%);
  border: 1px solid #593818;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgb(65 38 13 / .30), inset 0 0 0 4px rgb(255 255 255 / .08);
  font-family: var(--cb-font-display);
  font-size: .75rem;
  font-style: normal;
}

.unfold-hint {
  position: absolute;
  right: 20px;
  bottom: 8px;
  margin: 0;
  color: var(--cb-paper-300);
  font: 600 .58rem/1 var(--cb-font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: calc((1 - var(--letter-settle)) * var(--letter-enter));
}

@media (min-width: 761px) and (max-height: 820px) {
  .letter-sheet {
    min-height: 610px;
    height: 96svh;
  }
  .fold-surface { padding-block: 14px; }
  .letter-stage .audio-player { margin-block: 7px; padding-block: 6px; }
  .letter-stage .transcript { font-size: clamp(.72rem, .83vw, .86rem); line-height: 1.38; }
  .letter-stage .transcript p { margin-bottom: .48em; }
  .letter-signature { height: 35px; }
}

@media (max-width: 760px) {
  .edmund-section {
    min-height: auto;
    padding: 30px 12px 24px;
    overflow: clip;
  }

  .edmund-frame {
    position: relative;
    height: auto;
    display: block;
  }

  .portrait-reserve { height: 18svh; }

  .introduction.letter-stage {
    height: auto;
    min-height: 0;
    padding: 0;
    perspective: none;
    opacity: 1;
    transform: none;
  }

  .letter-sheet {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    filter: drop-shadow(0 20px 34px rgb(0 0 0 / .38));
  }

  .fold-panel,
  .fold-panel-top,
  .fold-panel-middle,
  .fold-panel-bottom {
    height: auto;
    min-height: 0;
    transform: none;
    filter: none;
    backface-visibility: visible;
  }

  .fold-panel .fold-surface {
    padding: 25px 22px;
    overflow: visible;
    opacity: 1;
  }

  .fold-panel-top { border-top: 1px solid rgb(103 74 28 / .45); }
  .fold-panel-bottom { border-bottom: 1px solid rgb(103 74 28 / .45); }
  .letter-cover,
  .unfold-hint { display: none; }

  .letter-stage h2 { font-size: clamp(1.8rem, 8vw, 2.45rem); }
  .letter-stage h2 span { display: block; margin: 4px 0 0; }
  .letter-stage .audio-player { grid-template-columns: auto 1fr auto; }
  .letter-stage .audio-progress { grid-column: 1 / -1; grid-row: 2; }
  .letter-stage .audio-time { grid-column: 3; grid-row: 1; }
  .letter-stage .transcript { font-size: 1rem; line-height: 1.52; }
  .letter-signature { height: 62px; }
  .letter-signature img { width: min(240px, 62%); }
  .letter-stage .updates-cta { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .edmund-section { min-height: auto; padding-block: 30px; }
  .edmund-frame { position: relative; height: auto; align-items: start; }
  .introduction.letter-stage { height: auto; min-height: 0; padding: 0; opacity: 1; transform: none; perspective: none; }
  .letter-sheet { height: auto; min-height: 0; max-height: none; }
  .fold-panel,
  .fold-panel-top,
  .fold-panel-middle,
  .fold-panel-bottom { height: auto; transform: none; filter: none; }
  .fold-panel .fold-surface { opacity: 1; overflow: visible; }
  .letter-cover,
  .unfold-hint { display: none; }
}

/* Letter treatment v5: formal stationery, equal folds and controls off-paper. */
.introduction.letter-stage {
  height: 98svh;
  min-height: 760px;
  padding: 1svh 0 72px;
}

.letter-sheet {
  width: min(800px, 100%);
  height: calc(100% - 72px);
  min-height: 660px;
  max-height: 930px;
  filter: drop-shadow(0 30px 38px rgb(0 0 0 / calc(.30 + var(--letter-settle) * .18)));
}

.fold-panel,
.fold-panel-top,
.fold-panel-middle,
.fold-panel-bottom {
  height: 33.333333%;
  background-color: #ede0c5;
  background-image:
    linear-gradient(90deg, rgb(75 52 27 / .075), transparent 5% 95%, rgb(75 52 27 / .085)),
    repeating-linear-gradient(2deg, transparent 0 4px, rgb(78 57 35 / .018) 4px 5px),
    repeating-linear-gradient(92deg, rgb(255 255 255 / .018) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 22% 12%, rgb(255 255 255 / .30), transparent 35%),
    radial-gradient(ellipse at 76% 88%, rgb(106 76 41 / .055), transparent 40%),
    linear-gradient(106deg, #e4d3b2, #f2e7d1 48%, #e3d0ad);
}

.fold-panel-middle {
  box-shadow:
    inset 0 15px 18px rgb(70 46 19 / calc(.22 - var(--letter-settle) * .13)),
    inset 0 -15px 18px rgb(70 46 19 / calc(.22 - var(--letter-settle) * .13));
}

.fold-panel-top {
  box-shadow: inset 0 -11px 15px rgb(70 46 19 / calc(.14 - var(--letter-settle) * .08));
}

.fold-panel-bottom {
  box-shadow: inset 0 11px 15px rgb(70 46 19 / calc(.14 - var(--letter-settle) * .08));
}

.fold-panel::after {
  opacity: .58;
  background:
    linear-gradient(90deg, transparent 49.6%, rgb(85 58 29 / .024) 50%, transparent 50.4%),
    radial-gradient(ellipse at 48% 10%, transparent 42%, rgb(82 59 31 / .07)),
    repeating-radial-gradient(circle at 30% 40%, rgb(69 49 28 / .020) 0 .45px, transparent .65px 4px);
  mix-blend-mode: multiply;
}

.fold-surface {
  padding: clamp(15px, 1.85vh, 22px) clamp(34px, 3.5vw, 56px);
}

.letterhead {
  height: clamp(35px, 4.5vh, 48px);
  margin: -3px 0 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: rgb(70 51 31 / .30);
  user-select: none;
}

.letterhead-mark {
  width: clamp(30px, 3.8vh, 42px);
  height: clamp(30px, 3.8vh, 42px);
  object-fit: contain;
  opacity: .18;
  filter:
    grayscale(1)
    sepia(.35)
    contrast(.72)
    drop-shadow(-1px -1px 0 rgb(255 250 236 / .92))
    drop-shadow(1px 1px 0 rgb(91 61 29 / .55));
  mix-blend-mode: multiply;
}

.letterhead span {
  margin-top: -6px;
  font: 650 .48rem/1 var(--cb-font-display);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: -1px -1px 0 rgb(255 250 236 / .58), 1px 1px 0 rgb(91 61 29 / .20);
}

.letter-stage h2,
.letter-stage .transcript,
.letter-stage .correspondence-invitation {
  font-family: "Ink Free", "Segoe Print", "Bradley Hand", "Snell Roundhand", cursive;
  font-weight: 400;
  font-synthesis: none;
}

.letter-stage h2 {
  margin: 1px 0 8px;
  font-size: clamp(1.48rem, 1.9vw, 2.15rem);
  line-height: 1.04;
  transform: rotate(-.16deg) translateX(2px);
}

.letter-stage h2 span {
  font-size: .72em;
}

.letter-stage .transcript {
  font-size: clamp(.77rem, .85vw, .91rem);
  line-height: 1.43;
  letter-spacing: .002em;
  text-shadow: .18px .15px 0 rgb(42 33 24 / .28);
}

.letter-stage .transcript p {
  margin: 0 0 .62em;
  transform-origin: left center;
}

.letter-stage .transcript p:nth-child(3n + 1) { transform: rotate(-.075deg) translateX(.5px); }
.letter-stage .transcript p:nth-child(3n + 2) { transform: rotate(.055deg) translateX(-.35px); }
.letter-stage .transcript p:nth-child(3n) { transform: rotate(-.025deg) translateX(.2px); }

.ink-word {
  display: inline-block;
  opacity: var(--ink-strength, .94);
  letter-spacing: var(--ink-space, 0);
  transform: translateY(var(--ink-lift, 0)) rotate(var(--ink-turn, 0));
  transform-origin: 50% 72%;
}

.correspondence-invitation {
  margin-top: .75em !important;
  color: #403529;
  font-size: .93em;
}

.letter-signature {
  height: clamp(36px, 4.6vh, 52px);
  margin: -1px 4px 0 auto;
}

.letter-actions {
  width: min(800px, 100%);
  min-height: 56px;
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  opacity: var(--letter-settle);
  transform: translateY(calc((1 - var(--letter-settle)) * 14px));
  pointer-events: auto;
}

.letter-actions .audio-player {
  grid-template-columns: auto minmax(150px, auto) 1fr auto;
  gap: 8px 13px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 7px 0;
  border: 0;
  border-top: 1px solid rgb(198 166 115 / .24);
  border-bottom: 1px solid rgb(198 166 115 / .12);
  background: transparent;
}

.letter-actions .play-button {
  width: 38px;
  height: 38px;
  color: var(--cb-night-950);
  background: var(--cb-gold-400);
}

.letter-actions .play-button svg { width: 17px; height: 17px; }
.letter-actions .audio-title { color: var(--cb-paper-100); font-size: .82rem; }
.letter-actions .audio-note,
.letter-actions .audio-time { color: var(--cb-paper-300); font-size: .64rem; }
.letter-actions .audio-progress { min-width: 90px; accent-color: var(--cb-gold-400); }

.letter-actions > .updates-trigger {
  min-height: 42px;
  padding: 11px 17px;
  color: var(--cb-paper-100);
  border-color: var(--cb-gold-600);
  font-size: .65rem;
}

.letter-actions > .updates-trigger:hover {
  color: var(--cb-night-950);
  background: var(--cb-gold-400);
}

@media (min-width: 761px) and (max-height: 820px) {
  .introduction.letter-stage { min-height: 700px; padding-bottom: 64px; }
  .letter-sheet { min-height: 620px; height: calc(100% - 64px); }
  .fold-surface { padding-block: 12px; }
  .letterhead { height: 31px; margin-bottom: 2px; }
  .letterhead-mark { width: 29px; height: 29px; }
  .letter-stage h2 { margin-bottom: 5px; font-size: clamp(1.35rem, 1.75vw, 1.85rem); }
  .letter-stage .transcript { font-size: clamp(.69rem, .78vw, .81rem); line-height: 1.34; }
  .letter-stage .transcript p { margin-bottom: .42em; }
  .letter-signature { height: 33px; }
  .letter-actions { margin-top: 9px; }
}

@media (max-width: 760px) {
  .introduction.letter-stage { height: auto; min-height: 0; padding: 0; }
  .letter-sheet { height: auto; min-height: 0; max-height: none; }
  .fold-panel,
  .fold-panel-top,
  .fold-panel-middle,
  .fold-panel-bottom { height: auto; }
  .fold-panel .fold-surface { padding: 26px 22px; }
  .letterhead { height: 52px; margin: 0 0 12px; }
  .letterhead-mark { width: 48px; height: 48px; }
  .letter-stage h2 { margin-bottom: 18px; font-size: clamp(1.7rem, 7.8vw, 2.35rem); }
  .letter-stage .transcript { font-size: 1rem; line-height: 1.5; }
  .letter-signature { height: 58px; }
  .letter-actions {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    opacity: 1;
    transform: none;
  }
  .letter-actions .audio-player { grid-template-columns: auto 1fr auto; padding: 10px 0; }
  .letter-actions .audio-progress { grid-column: 1 / -1; grid-row: 2; }
  .letter-actions .audio-time { grid-column: 3; grid-row: 1; }
  .letter-actions > .updates-trigger { width: 100%; min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .letter-actions { opacity: 1; transform: none; }
}

/* Stationery v6: La Belle Aurore on one coherent sheet of private paper. */
@font-face {
  font-family: "La Belle Aurore Local";
  src: url("assets/fonts/LaBelleAurore.ttf") format("truetype");
  font-display: swap;
}

.letter-sheet {
  border-radius: 1px 2px 1px 0;
  clip-path: polygon(.08% .04%, 99.9% 0, 100% 99.86%, .03% 100%);
}

.letter-sheet::before {
  content: "";
  z-index: 8;
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .44;
  background:
    linear-gradient(90deg, rgb(67 45 23 / .10), transparent 2.7% 97.1%, rgb(67 45 23 / .12)),
    radial-gradient(circle at 8% 6%, rgb(255 255 255 / .28), transparent 20%),
    radial-gradient(circle at 88% 94%, rgb(102 71 35 / .07), transparent 26%);
  mix-blend-mode: multiply;
}

.fold-panel,
.fold-panel-top,
.fold-panel-middle,
.fold-panel-bottom {
  background-color: #e8ddc5;
  background-image:
    linear-gradient(rgb(232 221 197 / .74), rgb(232 221 197 / .74)),
    url("assets/edmund-stationery-paper.jpg");
  background-size: 100% 100%, 100% 300%;
  background-repeat: no-repeat;
  background-blend-mode: multiply, normal;
}

.fold-panel-top { background-position: center, center top; }
.fold-panel-middle { background-position: center, center center; }
.fold-panel-bottom { background-position: center, center bottom; }

.fold-panel::before {
  opacity: calc(.56 - var(--letter-settle) * .22);
  background:
    linear-gradient(90deg, rgb(75 49 24 / .05), transparent 4% 96%, rgb(75 49 24 / .07)),
    linear-gradient(180deg, rgb(255 255 255 / .12), transparent 22% 78%, rgb(64 43 20 / .13));
}

.fold-panel::after {
  opacity: .46;
  background:
    repeating-radial-gradient(circle at 31% 41%, rgb(55 42 27 / .018) 0 .42px, transparent .62px 4px),
    linear-gradient(90deg, transparent 49.7%, rgb(82 57 31 / .025) 50%, transparent 50.3%);
  mix-blend-mode: multiply;
}

.fold-panel-middle {
  border-top-color: rgb(96 65 33 / .35);
  border-bottom-color: rgb(96 65 33 / .35);
  box-shadow:
    inset 0 1px 0 rgb(255 249 232 / .72),
    inset 0 14px 18px rgb(70 46 19 / calc(.22 - var(--letter-settle) * .12)),
    inset 0 -1px 0 rgb(255 249 232 / .64),
    inset 0 -14px 18px rgb(70 46 19 / calc(.21 - var(--letter-settle) * .11));
}

.fold-panel-top {
  box-shadow:
    inset 0 -1px 0 rgb(255 249 232 / .60),
    inset 0 -12px 17px rgb(70 46 19 / calc(.17 - var(--letter-settle) * .08));
}

.fold-panel-bottom {
  box-shadow:
    inset 0 1px 0 rgb(255 249 232 / .66),
    inset 0 12px 17px rgb(70 46 19 / calc(.17 - var(--letter-settle) * .08));
}

.letterhead {
  height: clamp(30px, 3.8vh, 42px);
  margin: -2px 0 8px;
  justify-content: center;
  color: rgb(68 51 32 / .48);
}

.letterhead span {
  margin: 0;
  font: 600 clamp(.53rem, .58vw, .64rem)/1 var(--cb-font-display);
  letter-spacing: .19em;
  text-transform: uppercase;
  text-shadow: -1px -1px 0 rgb(255 250 236 / .70), 1px 1px 0 rgb(91 61 29 / .18);
}

.letterhead::after {
  content: "";
  width: 124px;
  height: 1px;
  margin-top: 10px;
  background: linear-gradient(90deg, transparent, rgb(91 65 36 / .21), transparent);
}

.letter-opening,
.letter-stage .transcript,
.letter-stage .correspondence-invitation {
  color: #24303a;
  font-family: "La Belle Aurore Local", cursive;
  font-weight: 400;
  font-synthesis: none;
  font-feature-settings: "liga" 1, "calt" 1, "dlig" 1;
  text-rendering: optimizeLegibility;
  text-shadow: .18px .14px 0 rgb(18 30 41 / .24);
}

.letter-opening {
  margin: 0 0 .52em;
  font-size: clamp(1.22rem, 1.46vw, 1.58rem);
  line-height: 1.2;
  transform: rotate(-.05deg);
}

.letter-stage .transcript {
  font-size: clamp(1.03rem, 1.16vw, 1.22rem);
  line-height: 1.32;
  letter-spacing: .006em;
}

.letter-stage .transcript p,
.letter-stage .transcript p:nth-child(3n + 1),
.letter-stage .transcript p:nth-child(3n + 2),
.letter-stage .transcript p:nth-child(3n) {
  margin: 0 0 .52em;
  transform: none;
}

.letter-stage .transcript .dry-line,
.letter-stage .transcript .closing,
.letter-stage .correspondence-invitation {
  color: #202c36;
  font-style: normal;
}

.letter-stage .correspondence-invitation {
  margin-top: .62em !important;
  font-size: .92em;
}

.letter-signature {
  position: relative;
  height: clamp(38px, 5vh, 55px);
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.letter-signature > img:first-child {
  z-index: 2;
  width: min(226px, 42%);
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

.letter-signature .letter-footer-compass {
  position: absolute;
  z-index: 1;
  left: 3px;
  bottom: -3px;
  width: clamp(42px, 5.4vh, 58px);
  height: clamp(42px, 5.4vh, 58px);
  object-fit: contain;
  opacity: .14;
  filter:
    grayscale(1)
    sepia(.4)
    contrast(.74)
    drop-shadow(-1px -1px 0 rgb(255 250 236 / .95))
    drop-shadow(1px 1px 0 rgb(91 61 29 / .60));
  mix-blend-mode: multiply;
}

@media (min-width: 761px) and (max-height: 820px) {
  .letterhead { height: 25px; margin-bottom: 4px; }
  .letterhead span { font-size: .48rem; }
  .letterhead::after { margin-top: 6px; }
  .letter-opening { margin-bottom: .34em; font-size: 1.08rem; }
  .letter-stage .transcript { font-size: clamp(.82rem, .88vw, .91rem); line-height: 1.25; }
  .letter-stage .transcript p { margin-bottom: .34em; }
  .letter-signature { height: 31px; }
}

@media (max-width: 760px) {
  .letterhead { height: 46px; margin: 0 0 15px; }
  .letterhead span { font-size: .61rem; }
  .letter-opening { margin-bottom: .7em; font-size: clamp(1.45rem, 7vw, 1.9rem); }
  .letter-stage .transcript { font-size: clamp(1.12rem, 5.1vw, 1.4rem); line-height: 1.34; }
  .letter-stage .transcript p { margin-bottom: .66em; }
  .letter-signature { height: 64px; }
  .letter-signature > img:first-child { width: min(230px, 64%); }
  .letter-signature .letter-footer-compass { width: 54px; height: 54px; }
}

/* Stationery v7: a physically proportioned A5 letter, not a fluid web card. */
.ink-filter-defs {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.introduction.letter-stage {
  min-height: min(98svh, 940px);
  height: 98svh;
  padding: 1svh 0 68px;
}

.letter-sheet {
  container-type: inline-size;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  width: min(620px, calc(100% - 12px));
  height: auto;
  min-height: 0;
  max-height: calc(98svh - 76px);
  aspect-ratio: 148 / 210;
  overflow: visible;
  border-radius: .5px 1px .5px 0;
  clip-path: polygon(.04% .06%, 99.94% .02%, 100% 99.92%, .02% 99.98%);
  background: transparent;
}

.letter-sheet::before {
  display: none;
}

.fold-panel,
.fold-panel-top,
.fold-panel-middle,
.fold-panel-bottom {
  width: 100%;
  height: auto;
  min-height: 0;
  background-color: transparent;
  background-image: url("assets/edmund-stationery-paper-v2.png");
  background-size: 100% 300%;
  background-repeat: no-repeat;
  border-inline: 1px solid rgb(76 55 31 / .23);
}

.fold-panel-top { background-position: center top; }
.fold-panel-middle { background-position: center center; }
.fold-panel-bottom { background-position: center bottom; }

.fold-panel::before {
  z-index: 2;
  opacity: calc(.27 - var(--letter-settle) * .10);
  background: linear-gradient(90deg, rgb(84 60 32 / .035), transparent 2.4% 97.5%, rgb(84 60 32 / .045));
}

.fold-panel::after {
  z-index: 3;
  opacity: .20;
  background: radial-gradient(ellipse at 48% 54%, transparent 65%, rgb(75 52 28 / .06));
  mix-blend-mode: multiply;
}

.fold-panel-top {
  border-top: 1px solid rgb(76 55 31 / .25);
  box-shadow:
    inset 0 -1px 0 rgb(71 46 21 / .25),
    inset 0 -2px 0 rgb(255 253 244 / .44),
    inset 0 -10px 13px rgb(70 46 19 / calc(.12 - var(--letter-settle) * .055));
}

.fold-panel-middle {
  border-top: 0;
  border-bottom: 0;
  box-shadow:
    inset 0 1px 0 rgb(255 253 244 / .54),
    inset 0 2px 0 rgb(71 46 21 / .17),
    inset 0 10px 13px rgb(70 46 19 / calc(.14 - var(--letter-settle) * .065)),
    inset 0 -1px 0 rgb(71 46 21 / .22),
    inset 0 -2px 0 rgb(255 253 244 / .48),
    inset 0 -10px 13px rgb(70 46 19 / calc(.13 - var(--letter-settle) * .06));
}

.fold-panel-bottom {
  border-bottom: 1px solid rgb(76 55 31 / .25);
  box-shadow:
    inset 0 1px 0 rgb(255 253 244 / .55),
    inset 0 2px 0 rgb(71 46 21 / .16),
    inset 0 10px 13px rgb(70 46 19 / calc(.12 - var(--letter-settle) * .055));
}

.fold-surface {
  padding: clamp(14px, 1.65svh, 20px) clamp(36px, 5.9cqw, 47px);
}

.letterhead {
  width: 100%;
  height: clamp(48px, 6.4svh, 64px);
  margin: -3px 0 5px;
  display: grid;
  grid-template-columns: 42px auto;
  grid-template-rows: 1fr 1fr;
  column-gap: 11px;
  align-items: end;
  justify-content: center;
  color: rgb(58 47 35 / .63);
}

.letterhead img {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: .15;
  filter:
    grayscale(1)
    sepia(.35)
    contrast(.72)
    drop-shadow(-.7px -.7px .2px rgb(255 253 244 / .92))
    drop-shadow(.8px .8px .2px rgb(81 57 30 / .58));
  mix-blend-mode: multiply;
}

.letterhead span,
.letterhead strong {
  grid-column: 2;
  margin: 0;
  text-transform: none;
  text-shadow: none;
}

.letterhead span {
  grid-row: 1;
  align-self: end;
  color: rgb(68 57 44 / .58);
  font: italic 400 clamp(.50rem, 1.38cqw, .59rem)/1.1 var(--cb-font-body);
  letter-spacing: .08em;
}

.letterhead strong {
  grid-row: 2;
  align-self: start;
  color: rgb(48 40 32 / .68);
  font: 500 clamp(.72rem, 2.05cqw, .88rem)/1.08 var(--cb-font-display);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.letterhead::after {
  content: "";
  grid-column: 1 / 3;
  width: 184px;
  height: 1px;
  margin: 7px auto 0;
  background: linear-gradient(90deg, transparent, rgb(78 60 40 / .27) 16% 84%, transparent);
}

.letter-opening,
.letter-stage .transcript,
.letter-stage .correspondence-invitation {
  color: rgb(29 42 52 / .94);
  filter:
    url("#handwritten-ink")
    drop-shadow(.38px .48px .18px rgb(255 252 238 / .40))
    drop-shadow(-.22px -.20px .12px rgb(72 51 31 / .24));
  text-shadow:
    .16px .12px .10px rgb(19 31 41 / .31),
    -.10px .08px 0 rgb(19 31 41 / .14);
}

.letter-opening {
  margin: 0 0 .43em;
  font-size: clamp(1.12rem, 3.55cqw, 1.43rem);
  line-height: 1.18;
  transform: none;
}

.letter-stage .transcript {
  font-size: clamp(.84rem, 2.53cqw, 1.02rem);
  line-height: 1.31;
  letter-spacing: .002em;
}

.letter-stage .transcript p,
.letter-stage .transcript p:nth-child(3n + 1),
.letter-stage .transcript p:nth-child(3n + 2),
.letter-stage .transcript p:nth-child(3n) {
  margin-bottom: .47em;
  transform: none;
}

.letter-stage .correspondence-invitation {
  margin-top: .48em !important;
  font-size: .86em;
}

.letter-signature {
  height: clamp(34px, 4.7svh, 48px);
  margin-top: -.15em;
}

.letter-signature > img:first-child {
  width: min(210px, 45%);
}

.letter-signature .letter-footer-compass {
  display: none;
}

@media (max-width: 760px) {
  .portrait-reserve { height: 14svh; }
  .introduction.letter-stage {
    height: auto;
    min-height: 0;
    padding: 0;
  }
  .letter-sheet {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    width: min(100%, 560px);
    height: auto;
    min-height: 0;
    aspect-ratio: 148 / 210;
  }
  .fold-panel,
  .fold-panel-top,
  .fold-panel-middle,
  .fold-panel-bottom {
    height: auto;
    min-height: 0;
  }
  .fold-panel .fold-surface {
    padding: 2.4cqw 5.4cqw;
    overflow: hidden;
  }
  .letterhead {
    height: 9.5cqw;
    margin-bottom: .5cqw;
    grid-template-columns: 7.2cqw auto;
    column-gap: 1.8cqw;
  }
  .letterhead img { width: 7cqw; height: 7cqw; }
  .letterhead span { font-size: 1.5cqw; }
  .letterhead strong { font-size: 2.15cqw; }
  .letterhead::after { width: 31cqw; margin-top: .8cqw; }
  .letter-opening { margin-bottom: .35em; font-size: 3.15cqw; }
  .letter-stage .transcript { font-size: 2.32cqw; line-height: 1.27; }
  .letter-stage .transcript p { margin-bottom: .37em; }
  .letter-signature { height: 7.2cqw; }
}

/* Stationery v8: supplied A5 sheet with a separate ruled handwriting layer. */
.letter-sheet {
  grid-template-rows: 36.016% 28.370% 35.614%;
}

.fold-panel,
.fold-panel-top,
.fold-panel-middle,
.fold-panel-bottom {
  background-color: #eee3cc;
  background-image: url("assets/edmund-stationery-reference-v3.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.fold-panel-top { background-position: center top; }
.fold-panel-middle { background-position: center 50.28%; }
.fold-panel-bottom { background-position: center bottom; }

.fold-surface {
  position: relative;
  padding: 0;
}

.letterhead-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.handwritten-lines {
  position: absolute;
  inset: 0;
  z-index: 4;
  color: rgb(28 38 47 / .95);
  font-family: "La Belle Aurore Local", cursive;
  font-size: clamp(.82rem, 2.45cqw, .98rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: .001em;
  pointer-events: none;
}

.hand-line {
  position: absolute;
  left: 5.25%;
  right: 4.9%;
  display: block;
  white-space: nowrap;
  filter:
    url("#handwritten-ink")
    drop-shadow(.42px .54px .16px rgb(255 252 237 / .44))
    drop-shadow(-.24px -.26px .12px rgb(74 49 26 / .28));
  text-shadow:
    .14px .12px .12px rgb(16 28 38 / .38),
    -.12px .05px 0 rgb(16 28 38 / .16);
  transform-origin: left 72%;
}

.hand-line::before,
.handwritten-postscript::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  text-shadow:
    .55px .72px .22px rgb(255 253 240 / .58),
    -.34px -.42px .20px rgb(88 59 29 / .30);
  opacity: .78;
}

.hand-line:nth-child(1) { opacity: .96; transform: translateX(.25px) rotate(-.025deg); }
.hand-line:nth-child(2) { opacity: .92; transform: translateX(1.05px) rotate(.035deg); }
.hand-line:nth-child(3) { opacity: .97; transform: translateX(-.55px) rotate(-.045deg); }
.hand-line:nth-child(4) { opacity: .94; transform: translateX(.60px) rotate(.020deg); }
.hand-line:nth-child(5) { opacity: .98; transform: translateX(-.35px) rotate(.045deg); }
.hand-line:nth-child(6) { opacity: .93; transform: translateX(.75px) rotate(-.030deg); }

.hand-opening {
  font-size: 1.12em;
}

.handwritten-lines-top .hand-line:nth-child(1) { top: 50.6%; }
.handwritten-lines-top .hand-line:nth-child(2) { top: 61.7%; }
.handwritten-lines-top .hand-line:nth-child(3) { top: 72.9%; }
.handwritten-lines-top .hand-line:nth-child(4) { top: 84.1%; }

.handwritten-lines-middle .hand-line:nth-child(1) { top: 8.6%; }
.handwritten-lines-middle .hand-line:nth-child(2) { top: 22.8%; }
.handwritten-lines-middle .hand-line:nth-child(3) { top: 36.9%; }
.handwritten-lines-middle .hand-line:nth-child(4) { top: 51.1%; }
.handwritten-lines-middle .hand-line:nth-child(5) { top: 65.3%; }
.handwritten-lines-middle .hand-line:nth-child(6) { top: 79.5%; }

.handwritten-lines-bottom .hand-line:nth-child(1) { top: 6.5%; }
.handwritten-lines-bottom .hand-line:nth-child(2) { top: 17.6%; }
.handwritten-lines-bottom .hand-line:nth-child(3) { top: 28.8%; }
.handwritten-lines-bottom .hand-line:nth-child(4) { top: 39.8%; }
.handwritten-lines-bottom .hand-line:nth-child(5) { top: 51.1%; }
.handwritten-lines-bottom .hand-line:nth-child(6) { top: 62.1%; }

.handwritten-postscript {
  position: absolute;
  z-index: 4;
  top: 72.2%;
  left: 5.25%;
  right: 4.9%;
  margin: 0;
  color: rgb(28 38 47 / .91);
  font-family: "La Belle Aurore Local", cursive;
  font-size: clamp(.72rem, 2.05cqw, .84rem);
  line-height: 1;
  white-space: nowrap;
  filter:
    url("#handwritten-ink")
    drop-shadow(.38px .48px .14px rgb(255 252 237 / .42))
    drop-shadow(-.22px -.24px .10px rgb(74 49 26 / .26));
  transform: translateX(.45px) rotate(-.035deg);
}

.letter-signature {
  position: absolute;
  z-index: 5;
  right: 5.2%;
  bottom: 3.5%;
  width: 38%;
  height: 12.5%;
  margin: 0;
}

.letter-signature > img:first-child {
  width: 100%;
}

.letter-cover {
  top: 36.016%;
  height: 28.370%;
}

@media (max-width: 760px) {
  .letter-sheet {
    grid-template-rows: 36.016% 28.370% 35.614%;
  }
  .fold-panel .fold-surface { padding: 0; }
  .handwritten-lines { font-size: 2.45cqw; }
  .handwritten-postscript { font-size: 2.05cqw; }
  .letter-signature {
    right: 5.2%;
    bottom: 3.5%;
    width: 38%;
    height: 12.5%;
  }
}

/* Stationery v9: untouched supplied A4 reference with left-handed ink behaviour. */
.letter-sheet {
  width: min(620px, calc(100% - 12px));
  max-height: calc(100svh - 74px);
  aspect-ratio: 853 / 1280;
  grid-template-rows: 34.84375% 27.03125% 38.125%;
  border-radius: 0;
  clip-path: none;
}

.fold-panel,
.fold-panel-top,
.fold-panel-middle,
.fold-panel-bottom {
  border: 0;
  background-color: transparent;
  background-image: url("assets/edmund-stationery-2x3-embossed-v2.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  box-shadow: none;
}

.fold-panel-top { background-position: center top; }
.fold-panel-middle { background-position: center 47.75%; }
.fold-panel-bottom { background-position: center bottom; }

.fold-panel::before {
  display: block;
  opacity: calc((1 - var(--letter-settle)) * .18);
  background: linear-gradient(180deg, rgb(255 255 255 / .08), transparent 18% 80%, rgb(53 34 18 / .12));
}

.fold-panel::after {
  display: none;
}

.handwritten-lines {
  font-size: clamp(.80rem, 2.34cqw, .95rem);
  color: rgb(24 36 47 / .95);
}

.hand-line {
  left: 6.15%;
  right: 6.1%;
  filter:
    url("#handwritten-ink")
    drop-shadow(.48px .62px .16px rgb(255 252 237 / .48))
    drop-shadow(-.30px -.22px .13px rgb(71 47 25 / .31));
  text-shadow:
    .16px .13px .12px rgb(15 27 38 / .40),
    -.10px .06px 0 rgb(15 27 38 / .16);
}

.hand-line::before {
  text-shadow:
    .62px .76px .20px rgb(255 253 240 / .60),
    -.43px -.31px .19px rgb(86 57 29 / .32);
  opacity: .76;
}

.hand-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: rgb(24 36 47 / .46);
  opacity: 0;
  filter: blur(.38px);
  transform: translate(.72px, .18px) skewX(-.18deg);
  transform-origin: left 70%;
  pointer-events: none;
}

/* Occasional rightward drag from the hand crossing recently laid ink. */
.hand-line:nth-child(3n + 2)::after { opacity: .075; }
.hand-line:nth-child(5n)::after { opacity: .045; transform: translate(.48px, .12px) skewX(-.12deg); }

.handwritten-lines-top .hand-line:nth-child(1) { top: 48.7%; }
.handwritten-lines-top .hand-line:nth-child(2) { top: 57.4%; }
.handwritten-lines-top .hand-line:nth-child(3) { top: 66.0%; }
.handwritten-lines-top .hand-line:nth-child(4) { top: 74.5%; }
.handwritten-lines-top .hand-line:nth-child(5) { top: 83.2%; }
.handwritten-lines-top .hand-line:nth-child(6) { top: 91.5%; }

.handwritten-lines-middle .hand-line:nth-child(1) { top: .5%; }
.handwritten-lines-middle .hand-line:nth-child(2) { top: 10.8%; }
.handwritten-lines-middle .hand-line:nth-child(3) { top: 21.2%; }
.handwritten-lines-middle .hand-line:nth-child(4) { top: 32.4%; }
.handwritten-lines-middle .hand-line:nth-child(5) { top: 42.8%; }
.handwritten-lines-middle .hand-line:nth-child(6) { top: 53.2%; }
.handwritten-lines-middle .hand-line:nth-child(7) { top: 63.9%; }
.handwritten-lines-middle .hand-line:nth-child(8) { top: 74.9%; }
.handwritten-lines-middle .hand-line:nth-child(9) { top: 85.3%; }

.handwritten-lines-bottom .hand-line:nth-child(1) { top: 4.5%; }
.handwritten-lines-bottom .hand-line:nth-child(2) { top: 12.4%; }
.handwritten-lines-bottom .hand-line:nth-child(3) { top: 19.3%; }
.handwritten-lines-bottom .hand-line:nth-child(4) { top: 26.7%; }
.handwritten-lines-bottom .hand-line:nth-child(5) { top: 41.4%; }
.handwritten-lines-bottom .hand-line:nth-child(6) { top: 48.4%; }

.letter-signature {
  right: 6.0%;
  bottom: 3.7%;
  width: 36%;
  height: 14%;
}

.letter-cover {
  top: 34.84375%;
  height: 27.03125%;
}

@media (max-width: 760px) {
  .letter-sheet {
    width: min(100%, 560px);
    aspect-ratio: 853 / 1280;
    grid-template-rows: 34.84375% 27.03125% 38.125%;
  }
  .handwritten-lines { font-size: 2.34cqw; }
  .letter-signature {
    right: 6.0%;
    bottom: 3.7%;
    width: 36%;
    height: 14%;
  }
}

/* Stationery v10: A4 paragraph rhythm and a more assured signature. */
.handwritten-lines {
  font-size: clamp(.78rem, 3.02cqw, 1.32rem);
}

.hand-line.paragraph-start {
  left: 10.15%;
}

.hand-line.postscript-line {
  font-size: .94em;
}

.handwritten-lines-top .hand-line[data-rule="1"] { top: 48.7%; }
.handwritten-lines-top .hand-line[data-rule="2"] { top: 57.4%; }
.handwritten-lines-top .hand-line[data-rule="3"] { top: 66.0%; }
.handwritten-lines-top .hand-line[data-rule="4"] { top: 74.5%; }
.handwritten-lines-top .hand-line[data-rule="5"] { top: 83.2%; }
.handwritten-lines-top .hand-line[data-rule="6"] { top: 91.5%; }

.handwritten-lines-middle .hand-line[data-rule="1"] { top: .5%; }
.handwritten-lines-middle .hand-line[data-rule="2"] { top: 10.9%; }
.handwritten-lines-middle .hand-line[data-rule="3"] { top: 21.2%; }
.handwritten-lines-middle .hand-line[data-rule="4"] { top: 32.4%; }
.handwritten-lines-middle .hand-line[data-rule="5"] { top: 42.8%; }
.handwritten-lines-middle .hand-line[data-rule="6"] { top: 53.2%; }
.handwritten-lines-middle .hand-line[data-rule="7"] { top: 63.9%; }
.handwritten-lines-middle .hand-line[data-rule="8"] { top: 74.9%; }
.handwritten-lines-middle .hand-line[data-rule="9"] { top: 85.3%; }

.handwritten-lines-bottom .hand-line[data-rule="1"] { top: 4.5%; }
.handwritten-lines-bottom .hand-line[data-rule="2"] { top: 12.4%; }
.handwritten-lines-bottom .hand-line[data-rule="3"] { top: 19.3%; }
.handwritten-lines-bottom .hand-line[data-rule="4"] { top: 26.7%; }
.handwritten-lines-bottom .hand-line[data-rule="5"] { top: 34.0%; }
.handwritten-lines-bottom .hand-line[data-rule="6"] { top: 41.4%; }
.handwritten-lines-bottom .hand-line[data-rule="7"] { top: 48.4%; }
.handwritten-lines-bottom .hand-line[data-rule="8"] { top: 55.7%; }
.handwritten-lines-bottom .hand-line[data-rule="9"] { top: 63.0%; }
.handwritten-lines-bottom .hand-line[data-rule="10"] { top: 70.4%; }

.hand-line.long-line { font-size: .95em; }

.letter-signature {
  right: 4.2%;
  bottom: 4.0%;
  width: 46%;
  height: 18%;
  transform: rotate(-3.2deg);
  transform-origin: 76% 70%;
}

@media (max-width: 760px) {
  .handwritten-lines { font-size: 3.28cqw; }
  .hand-line,
  .hand-line.paragraph-start {
    left: 5.5%;
    right: 3.8%;
  }
  .letter-signature {
    right: 4.2%;
    bottom: 4.0%;
    width: 46%;
    height: 18%;
  }
}

/* Stationery v11: neutral absorbed ink and near-imperceptible paper indentation. */
.handwritten-lines {
  color: rgb(34 33 30 / .86);
}

.hand-line,
.hand-line.paragraph-start {
  left: 4.8%;
  right: 3%;
  color: rgb(34 33 30 / .86);
  filter:
    url("#handwritten-ink")
    blur(.06px)
    drop-shadow(.10px .08px .06px rgb(20 19 17 / .18));
  text-shadow: 0 0 .22px rgb(18 17 15 / .42);
}

.hand-line::before {
  text-shadow:
    .20px .23px .10px rgb(255 253 242 / .34),
    -.14px -.12px .09px rgb(82 59 35 / .20);
  opacity: .32;
}

.hand-line::after {
  color: rgb(30 29 27 / .34);
  filter: blur(.24px);
  transform: translate(.28px, .06px) skewX(-.08deg);
}

.hand-line:nth-child(3n + 2)::after { opacity: .035; }
.hand-line:nth-child(5n)::after {
  opacity: .022;
  transform: translate(.20px, .04px) skewX(-.05deg);
}

.hand-line:nth-child(1) { opacity: .88; }
.hand-line:nth-child(2) { opacity: .84; }
.hand-line:nth-child(3) { opacity: .90; }
.hand-line:nth-child(4) { opacity: .86; }
.hand-line:nth-child(5) { opacity: .91; }
.hand-line:nth-child(6) { opacity: .85; }

/* Stationery v12: a centred, confidently scaled signature using the same ink treatment. */
.letter-signature {
  left: 50%;
  right: auto;
  bottom: 3.5%;
  width: 70%;
  height: 18%;
  display: grid;
  place-items: center;
  align-content: center;
  justify-content: center;
  transform: translateX(-50%) rotate(-2deg);
  transform-origin: 50% 50%;
}

.letter-signature > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: .88;
  filter:
    url("#signature-ink")
    grayscale(1)
    sepia(.08)
    saturate(.72)
    blur(.06px)
    drop-shadow(.10px .08px .06px rgb(20 19 17 / .18))
    drop-shadow(.18px .20px .08px rgb(255 253 242 / .25))
    drop-shadow(-.12px -.10px .06px rgb(82 59 35 / .15));
}

@media (max-width: 760px) {
  .letter-signature {
    left: 50%;
    right: auto;
    bottom: 3.5%;
    width: 70%;
    height: 18%;
  }
}

/* Letter actions v33: one audio toggle with the updates CTA centred. */
.letter-actions {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
}

.letter-actions .audio-player {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
}

.letter-actions .play-button {
  width: auto;
  min-width: 116px;
  height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
}

.letter-actions .play-button-label {
  font-family: var(--cb-font-sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.letter-actions > .updates-trigger {
  width: auto;
  min-width: 154px;
  justify-self: auto;
}

@media (max-width: 760px) {
  .letter-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .letter-actions .audio-player {
    position: static;
    transform: none;
  }
  .letter-actions > .updates-trigger {
    width: auto;
    min-width: 180px;
  }
}

/* Stationery v30: one page-coordinate manuscript, cropped by each physical fold. */
.fold-manuscript-ready .fold-surface > .handwritten-lines,
.fold-manuscript-ready .fold-surface > .letter-signature,
.fold-manuscript-ready .fold-surface > .handwritten-postscript {
  visibility: hidden;
}

.fold-manuscript-crop {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.fold-manuscript-page.handwritten-lines {
  inset: auto 0 auto 0;
  width: 100%;
  font-size: 3.3613cqw;
  line-height: 1.5;
  overflow: visible;
  visibility: visible;
}

.fold-manuscript-page .fold-manuscript-line {
  visibility: visible;
}

.fold-manuscript-page .fold-manuscript-signature {
  visibility: visible;
  top: 82.385%;
  bottom: auto;
  left: auto;
  right: 5%;
  width: 52.7%;
  height: 10.37%;
}

.fold-manuscript-page .fold-manuscript-postscript {
  visibility: visible;
  top: 92.21%;
  left: 7.35%;
  right: 5.2%;
  font-size: 3.3613cqw;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .fold-manuscript-page .fold-manuscript-postscript {
    left: 7.2%;
  }
}

/* Letter editor: enabled only by ?edit=letter. */
.letter-edit-mode .handwritten-lines,
.letter-edit-mode .handwritten-postscript {
  font-size: var(--edit-font-size, 3.3613cqw);
}

.letter-edit-mode .handwritten-lines {
  pointer-events: auto;
}

.letter-edit-mode .letter-sheet {
  overflow: visible;
}

.letter-edit-canvas {
  position: absolute;
  z-index: 100;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.letter-edit-mode .hand-line,
.letter-edit-mode .handwritten-postscript {
  min-height: 1.5em;
  pointer-events: auto;
  cursor: text;
  caret-color: #5f2a1e;
  outline: 1px solid transparent;
  outline-offset: 3px;
  border-radius: 2px;
}

.letter-edit-mode .hand-line:hover,
.letter-edit-mode .handwritten-postscript:hover {
  outline-color: rgb(132 91 40 / .34);
  background: rgb(255 249 228 / .16);
}

.letter-edit-mode .hand-line:focus,
.letter-edit-mode .handwritten-postscript:focus {
  outline: 1px solid rgb(127 74 28 / .72);
  background: rgb(255 249 228 / .30);
}

.letter-edit-mode .hand-line.is-edit-overflowing,
.letter-edit-mode .handwritten-postscript.is-edit-overflowing {
  outline: 1px solid rgb(145 45 31 / .90);
  background: rgb(153 43 29 / .08);
}

.letter-edit-mode .fold-panel {
  outline: 1px dashed rgb(121 76 33 / .26);
  outline-offset: -1px;
}

.letter-edit-mode .letter-actions,
.letter-edit-mode .unfold-hint {
  display: none;
}

.letter-edit-handle {
  position: absolute;
  z-index: 40;
  left: .7%;
  min-width: 27px;
  height: 19px;
  padding: 0 4px;
  border: 1px solid rgb(95 57 24 / .58);
  border-radius: 10px;
  color: #f5ead2;
  background: rgb(71 45 25 / .88);
  box-shadow: 0 2px 5px rgb(26 16 8 / .24);
  font: 700 9px/17px var(--cb-font-ui);
  letter-spacing: .04em;
  text-align: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.letter-edit-handle:hover,
.letter-edit-handle:focus-visible {
  background: #6f4522;
  outline: 2px solid rgb(255 244 215 / .78);
  outline-offset: 1px;
}

.letter-edit-handle.is-dragging {
  cursor: grabbing;
  background: #8a5325;
}

.letter-editor-panel {
  position: fixed;
  z-index: 10000;
  top: 14px;
  left: 14px;
  width: min(310px, calc(100vw - 28px));
  padding: 15px;
  border: 1px solid rgb(186 151 96 / .40);
  border-radius: 10px;
  color: #eee3cc;
  background: rgb(29 26 22 / .94);
  box-shadow: 0 12px 32px rgb(0 0 0 / .36);
  backdrop-filter: blur(12px);
  font: 500 .78rem/1.42 var(--cb-font-ui);
}

.letter-editor-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.letter-editor-heading strong,
.letter-editor-heading span {
  display: block;
}

.letter-editor-heading strong {
  color: #fff7e5;
  font-size: .96rem;
}

.letter-editor-heading span {
  margin-top: 1px;
  color: #bfae91;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.letter-editor-heading button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .15);
  border-radius: 50%;
  color: #eee3cc;
  background: transparent;
  font: 400 1.25rem/24px sans-serif;
  cursor: pointer;
}

.letter-editor-panel > p {
  margin: 0 0 12px;
  color: #cdbfa8;
}

.letter-editor-panel label {
  display: grid;
  gap: 5px;
  margin: 10px 0;
}

.letter-editor-panel label > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.letter-editor-panel output {
  color: #f2cf8d;
  font-variant-numeric: tabular-nums;
}

.letter-editor-panel input[type="range"] {
  width: 100%;
  accent-color: #b37a32;
}

.letter-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 13px;
}

.letter-editor-actions button {
  min-height: 34px;
  padding: 6px 7px;
  border: 1px solid rgb(214 177 111 / .34);
  border-radius: 6px;
  color: #f4e8d2;
  background: rgb(125 81 34 / .30);
  font: 600 .69rem/1.2 var(--cb-font-ui);
  cursor: pointer;
}

.letter-editor-actions button:hover,
.letter-editor-actions button:focus-visible {
  background: rgb(151 97 38 / .56);
  outline: 1px solid #e7c783;
}

.letter-editor-panel .letter-editor-status {
  min-height: 2.5em;
  margin: 10px 0 0;
  color: #bda989;
  font-size: .68rem;
}

@media (max-width: 760px) {
  .letter-editor-panel {
    top: auto;
    bottom: 8px;
    left: 8px;
    width: calc(100vw - 16px);
    max-height: 42svh;
    overflow: auto;
  }
}

/* Stationery v13: the compass belongs to the printed letterhead, not the signature. */
.letter-signature .letter-footer-compass {
  display: none;
}

.fold-panel-top .letterhead-watermark {
  display: none;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 10.5%;
  width: clamp(88px, 18.2cqw, 116px);
  height: clamp(88px, 18.2cqw, 116px);
  object-fit: contain;
  opacity: .105;
  mix-blend-mode: multiply;
  filter: grayscale(1) sepia(.22) saturate(.62) contrast(1.08);
  transform: translateX(-50%);
  transform-origin: center;
  pointer-events: none;
}

.letter-signature > img:first-child {
  position: relative;
  z-index: 2;
}

/* Stationery v14: a softer, crease-led unfurl rather than rigid panel flips. */
.letter-sheet {
  perspective: 1500px;
  transform-style: preserve-3d;
}

.fold-panel-top {
  transform: rotateX(calc(-178.5deg + var(--letter-top-open) * 178.5deg))
    translateZ(calc(var(--letter-top-crease) * 5px))
    scaleY(calc(.77568 + var(--letter-top-open) * .22432));
  filter:
    brightness(calc(.78 + var(--letter-top-open) * .22))
    saturate(calc(.94 + var(--letter-top-open) * .06));
}

.fold-panel-bottom {
  transform: rotateX(calc(178.5deg - var(--letter-bottom-open) * 178.5deg))
    translateZ(calc(var(--letter-bottom-crease) * 5px))
    scaleY(calc(.70934 + var(--letter-bottom-open) * .29066));
  filter:
    brightness(calc(.76 + var(--letter-bottom-open) * .24))
    saturate(calc(.94 + var(--letter-bottom-open) * .06));
}

.fold-panel-top::after,
.fold-panel-bottom::after,
.fold-panel-middle::after {
  display: block;
  pointer-events: none;
}

.fold-panel-top::after {
  inset: auto 0 0;
  height: clamp(10px, 2.6cqw, 17px);
  opacity: calc(.08 + var(--letter-top-crease) * .56);
  background: linear-gradient(to top,
    rgb(50 32 17 / .31),
    rgb(255 250 235 / .16) 18%,
    transparent 100%);
  mix-blend-mode: multiply;
}

/* A slight layered edge keeps the closed correspondence from reading as a card. */
.fold-reverse-top::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgb(255 252 241 / .72),
    inset 0 -2px 0 rgb(87 58 28 / .18),
    inset 0 -7px 10px rgb(55 35 18 / .07);
}

/* Stationery v15: opaque reverse paper conceals the ruled centre while folded. */
.letter-cover {
  overflow: hidden;
  opacity: calc(1 - var(--letter-cover-open));
  background-color: #eee0c3;
  background-image:
    linear-gradient(104deg,
      rgb(222 202 167 / .72),
      rgb(244 234 211 / .96) 44%,
      rgb(227 208 175 / .78)),
    url("assets/edmund-stationery-paper.jpg");
  background-size: cover, 460px auto;
  background-position: center;
  background-blend-mode: multiply, soft-light;
  border: 1px solid rgb(92 63 32 / .28);
  box-shadow:
    inset 0 1px 0 rgb(255 251 237 / .68),
    inset 0 -1px 0 rgb(76 50 24 / .20),
    0 6px 13px rgb(30 18 9 / .16);
}

.letter-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .20;
  background:
    linear-gradient(90deg,
      rgb(88 58 29 / .12),
      transparent 3.4% 96.4%,
      rgb(88 58 29 / .11)),
    radial-gradient(ellipse at 50% 46%, transparent 62%, rgb(74 48 23 / .09));
  mix-blend-mode: multiply;
}

/* Stationery v16: true two-sided panels replace the simulated centre cover. */
.fold-panel,
.fold-panel-top,
.fold-panel-middle,
.fold-panel-bottom {
  background: transparent;
  transform-style: preserve-3d;
  backface-visibility: visible;
}

.fold-panel-top { z-index: 4; }
.fold-panel-bottom { z-index: 3; }
.fold-panel-middle { z-index: 2; }

.fold-surface {
  background-color: transparent;
  background-image: url("assets/edmund-stationery-2x3-embossed-v2.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  transform: translateZ(.2px);
}

.fold-panel-top .fold-surface {
  opacity: var(--letter-top-face);
  background-position: center top;
}

.fold-panel-middle .fold-surface {
  opacity: 1;
  background-position: center 47.75%;
}

.fold-panel-bottom .fold-surface {
  opacity: var(--letter-bottom-face);
  background-position: center bottom;
}

/* The ink is physically part of each front face. The face itself controls
   visibility as the panel turns; a second ink-opacity animation made the
   writing appear to fade on after the paper had already unfolded. */
.handwritten-lines-top,
.handwritten-lines-middle,
.handwritten-lines-bottom,
.letter-signature { opacity: 1; }

.fold-reverse {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  color: #4a3c2c;
  background-color: #eee0c3;
  background-image: url("assets/edmund-stationery-2x3-paper-clean-v1.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  border: 1px solid rgb(92 63 32 / .28);
  box-shadow:
    inset 0 1px 0 rgb(255 251 237 / .68),
    inset 0 -1px 0 rgb(76 50 24 / .20);
  backface-visibility: visible;
  transform: translateZ(-.4px);
  pointer-events: none;
}

.fold-reverse::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .20;
  background:
    linear-gradient(90deg,
      rgb(88 58 29 / .12),
      transparent 3.4% 96.4%,
      rgb(88 58 29 / .11)),
    radial-gradient(ellipse at 50% 46%, transparent 62%, rgb(74 48 23 / .09));
  mix-blend-mode: multiply;
}

.fold-reverse-top {
  display: block;
  opacity: calc(1 - var(--letter-top-face));
  background-position: center top;
}

.fold-reverse-content {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  backface-visibility: visible;
  transform: rotateX(180deg) scaleY(1.28919);
}

.fold-reverse-bottom {
  opacity: calc(1 - var(--letter-bottom-face));
  background-position: center bottom;
}

.fold-reverse-top span {
  color: #7b684d;
  font: 600 .58rem/1 var(--cb-font-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.fold-reverse-top strong {
  font-family: var(--cb-font-display);
  font-size: clamp(1.65rem, 2.5vw, 2.6rem);
  font-weight: 600;
}

.fold-reverse-top .wax-seal {
  position: relative;
  isolation: isolate;
  width: 52px;
  height: 52px;
  margin-top: 5px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 34% 28%, rgb(182 132 58 / .48), transparent 24%),
    radial-gradient(circle at 52% 55%, #9b692d, #70461b 72%);
  border: 1px solid #593818;
  border-radius: 49% 53% 48% 52% / 51% 47% 54% 49%;
  box-shadow:
    0 4px 7px rgb(65 38 13 / .34),
    inset 1px 2px 2px rgb(255 236 187 / .18),
    inset -2px -3px 4px rgb(57 31 10 / .32);
  font-style: normal;
  transform: rotate(-3deg);
}

.fold-reverse-top .wax-seal::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px;
  border: 1px solid rgb(72 42 15 / .42);
  border-radius: inherit;
  box-shadow:
    inset 0 1px 1px rgb(255 232 172 / .15),
    0 1px 1px rgb(255 222 149 / .10);
}

.fold-reverse-top .wax-seal img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  opacity: .62;
  border-radius: 50%;
  clip-path: circle(48%);
  mix-blend-mode: multiply;
  filter: grayscale(1) invert(1) contrast(2.2);
}

@media (prefers-reduced-motion: reduce) {
  .fold-reverse { display: none; }
}

@media (max-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .edmund-section {
    min-height: 275svh;
    padding: 0 10px;
    overflow: visible;
  }

  .edmund-frame {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100svh;
    display: block;
    overflow: clip;
  }

  .portrait-reserve {
    height: clamp(96px, 16svh, 142px);
    min-height: 0;
  }

  .introduction.letter-stage {
    height: calc(100svh - clamp(96px, 16svh, 142px));
    min-height: 0;
    padding: 4px 0 62px;
    perspective: 1100px;
    opacity: var(--letter-enter);
    transform: translateY(calc((1 - var(--letter-enter)) * 24px))
      scale(calc(.98 + var(--letter-enter) * .02));
  }

  .letter-sheet {
    width: min(100%, 480px);
    max-width: calc((100svh - clamp(96px, 16svh, 142px) - 70px) * .66640625);
    max-height: calc(100svh - clamp(96px, 16svh, 142px) - 70px);
    margin-inline: auto;
    perspective: 1100px;
  }

  .fold-panel,
  .fold-panel-top,
  .fold-panel-middle,
  .fold-panel-bottom {
    backface-visibility: hidden;
  }

  .letter-cover {
    display: grid;
  }

  .unfold-hint {
    display: block;
  }

  .letter-actions {
    width: min(100%, 480px);
    margin-top: 8px;
  }
}

@media (min-width: 1001px) {
  .letter-sheet {
    width: min(740px, calc(100% - 12px), calc((100svh - 90px) * .66640625));
    height: auto;
    max-height: none;
  }
}

/* Stationery v19: crop the photographed black edge and let the prose breathe by paragraph. */
.fold-panel,
.fold-panel-top,
.fold-panel-middle,
.fold-panel-bottom {
  background-size: calc(100% + 18px) auto;
}

.fold-panel-bottom::after {
  inset: 0 0 auto;
  height: clamp(10px, 2.6cqw, 17px);
  opacity: calc(.08 + var(--letter-bottom-crease) * .56);
  background: linear-gradient(to bottom,
    rgb(50 32 17 / .29),
    rgb(255 250 235 / .15) 18%,
    transparent 100%);
  mix-blend-mode: multiply;
}

.fold-panel-middle::after {
  inset: 0;
  opacity: 1;
  background:
    linear-gradient(to bottom,
      rgb(48 30 15 / calc(.045 + var(--letter-top-crease) * .17)),
      transparent 5.5%),
    linear-gradient(to top,
      rgb(48 30 15 / calc(.045 + var(--letter-bottom-crease) * .17)),
      transparent 5.5%);
  mix-blend-mode: multiply;
}

/* Stationery v18: final cascade authority for fixed-size, two-sided folds. */
.fold-panel-top {
  clip-path: inset(
    calc((1 - var(--letter-top-open)) * 22.432%)
    calc((1 - var(--letter-top-open)) * 3.5%)
    0
    calc((1 - var(--letter-top-open)) * 3.5%)
  );
  transform: rotateX(calc(-178.5deg + var(--letter-top-open) * 178.5deg))
    translateZ(calc(var(--letter-top-crease) * 5px));
}


.fold-panel-bottom {
  clip-path: inset(
    0
    calc((1 - var(--letter-bottom-open)) * 3.5%)
    calc((1 - var(--letter-bottom-open)) * 29.066%)
    calc((1 - var(--letter-bottom-open)) * 3.5%)
  );
  transform: rotateX(calc(178.5deg - var(--letter-bottom-open) * 178.5deg))
    translateZ(calc(var(--letter-bottom-crease) * 5px));
}

.fold-reverse-content {
  transform: rotateX(180deg) translateY(-11.216%);
}

@media (max-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .fold-panel,
  .fold-panel-top,
  .fold-panel-middle,
  .fold-panel-bottom {
    backface-visibility: visible;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .letter-actions {
    opacity: var(--letter-settle);
    transform: translateY(calc((1 - var(--letter-settle)) * 12px));
  }
}

/* Stationery v20: one physical crop on every fold face, with manuscript reflow. */
.fold-panel,
.fold-panel-top,
.fold-panel-middle,
.fold-panel-bottom,
.fold-surface,
.fold-reverse {
  background-size: calc(100% + 18px) auto;
}

.fold-reverse {
  border: 0;
}

.handwritten-lines {
  font-size: clamp(.80rem, 3.10cqw, 1.34rem);
}

.hand-line,
.hand-line.paragraph-start {
  left: 5%;
  right: 5%;
}

.hand-line.paragraph-start {
  left: 7.4%;
}

.hand-line.long-line {
  font-size: .915em;
}

.letter-signature {
  bottom: 4%;
  width: 72%;
  height: 23%;
  overflow: hidden;
}

.letter-signature > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

@media (max-width: 760px) {
  .handwritten-lines { font-size: 3.28cqw; }
  .hand-line,
  .hand-line.paragraph-start {
    left: 5%;
    right: 4.6%;
  }
  .hand-line.paragraph-start { left: 7.2%; }
  .letter-signature {
    bottom: 4%;
    width: 72%;
    height: 23%;
  }
}

/* Stationery v23: final authority for the 20pt paragraph-led manuscript. */
.handwritten-lines,
.handwritten-postscript {
  font-family: "La Belle Aurore Local", "La Belle Aurore", cursive;
  font-weight: 400;
  font-synthesis: none;
  color: rgb(29 28 26 / .92);
}

.handwritten-lines {
  /* 20pt / 595pt A4 width = 3.3613% of the physical page width. */
  font-size: 3.3613cqw;
  line-height: 1.5;
}

.hand-line,
.hand-line.paragraph-start {
  left: 5.2%;
  right: 5.2%;
}

.hand-line.paragraph-start {
  left: 7.35%;
}

.hand-line.long-line {
  font-size: 1em;
}

.hand-line {
  filter:
    url("#handwritten-ink")
    drop-shadow(.13px .10px .07px rgb(20 19 17 / .24))
    drop-shadow(-.16px -.13px .08px rgb(85 58 32 / .18));
  text-shadow:
    .12px .08px .10px rgb(17 16 15 / .46),
    -.10px .04px .08px rgb(17 16 15 / .20);
}

.hand-line::before {
  opacity: .38;
  text-shadow:
    .22px .28px .10px rgb(255 253 242 / .34),
    -.18px -.15px .09px rgb(76 49 27 / .25);
}

.hand-line::after {
  opacity: .055;
  color: rgb(22 21 19 / .48);
  filter: blur(.18px);
  transform: translate(.34px, .08px) skewX(-.10deg);
}

.hand-line:nth-child(6n + 1) {
  opacity: .95;
  letter-spacing: .002em;
  transform: translate(.2px, -.35px) rotate(-.10deg);
}
.hand-line:nth-child(6n + 2) {
  opacity: .91;
  letter-spacing: .006em;
  transform: translate(1px, .45px) rotate(.13deg);
}
.hand-line:nth-child(6n + 3) {
  opacity: .96;
  letter-spacing: -.001em;
  transform: translate(-.45px, -.15px) rotate(-.16deg);
}
.hand-line:nth-child(6n + 4) {
  opacity: .93;
  letter-spacing: .004em;
  transform: translate(.55px, .55px) rotate(.08deg);
}
.hand-line:nth-child(6n + 5) {
  opacity: .97;
  letter-spacing: .001em;
  transform: translate(-.3px, -.45px) rotate(.15deg);
}
.hand-line:nth-child(6n) {
  opacity: .92;
  letter-spacing: .005em;
  transform: translate(.7px, .2px) rotate(-.11deg);
}

.handwritten-lines-top .hand-line[data-rule="1"] { top: 46%; }
.handwritten-lines-top .hand-line[data-rule="3"] { top: 58%; }
.handwritten-lines-top .hand-line[data-rule="5"] { top: 71%; }
.handwritten-lines-top .hand-line[data-rule="6"] { top: 80.5%; }
.handwritten-lines-top .hand-line[data-rule="7"] { top: 90%; }

.handwritten-lines-middle .hand-line[data-rule="1"] { top: 3%; }
.handwritten-lines-middle .hand-line[data-rule="2"] { top: 15%; }
.handwritten-lines-middle .hand-line[data-rule="3"] { top: 27%; }
.handwritten-lines-middle .hand-line[data-rule="5"] { top: 49%; }
.handwritten-lines-middle .hand-line[data-rule="6"] { top: 61%; }
.handwritten-lines-middle .hand-line[data-rule="7"] { top: 73%; }

.handwritten-lines-bottom .hand-line[data-rule="1"] { top: 4%; }
.handwritten-lines-bottom .hand-line[data-rule="2"] { top: 12.8%; }
.handwritten-lines-bottom .hand-line[data-rule="3"] { top: 21.6%; }
.handwritten-lines-bottom .hand-line[data-rule="5"] { top: 37.5%; }
.handwritten-lines-bottom .hand-line[data-rule="6"] { top: 46.3%; }
.handwritten-lines-bottom .hand-line[data-rule="8"] { top: 60.5%; }
.handwritten-lines-bottom .hand-line[data-rule="9"] { top: 68.8%; }

.letter-signature {
  top: 74%;
  bottom: auto;
  width: 72%;
  height: 17%;
}

.handwritten-postscript {
  top: 91.7%;
  left: 7.35%;
  right: 5.2%;
  font-size: 3.3613cqw;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .hand-line,
  .hand-line.paragraph-start {
    left: 5.1%;
    right: 4.8%;
  }
  .hand-line.paragraph-start,
  .handwritten-postscript { left: 7.2%; }
  .letter-signature {
    top: 79.5%;
    bottom: auto;
    width: 72%;
    height: 11%;
  }
}

/* Stationery v24: final row map after fitting the 20pt copy. */
.handwritten-lines-middle .hand-line[data-rule="1"] { top: 1%; }
.handwritten-lines-middle .hand-line[data-rule="2"] { top: 13.5%; }
.handwritten-lines-middle .hand-line[data-rule="3"] { top: 26%; }
.handwritten-lines-middle .hand-line[data-rule="4"] { top: 38.5%; }
.handwritten-lines-middle .hand-line[data-rule="6"] { top: 56%; }
.handwritten-lines-middle .hand-line[data-rule="7"] { top: 68.5%; }
.handwritten-lines-middle .hand-line[data-rule="8"] { top: 81%; }

.handwritten-lines-bottom .hand-line[data-rule="1"] { top: .6%; }
.handwritten-lines-bottom .hand-line[data-rule="2"] { top: 9.4%; }
.handwritten-lines-bottom .hand-line[data-rule="3"] { top: 18.2%; }
.handwritten-lines-bottom .hand-line[data-rule="5"] { top: 31.2%; }
.handwritten-lines-bottom .hand-line[data-rule="6"] { top: 40%; }
.handwritten-lines-bottom .hand-line[data-rule="7"] { top: 48.8%; }
.handwritten-lines-bottom .hand-line[data-rule="9"] { top: 60.8%; }
.handwritten-lines-bottom .hand-line[data-rule="10"] { top: 69.6%; }

.letter-signature {
  top: 79.5%;
  bottom: auto;
  width: 72%;
  height: 11%;
}

.handwritten-postscript {
  top: 90.8%;
}

/* Stationery v25: share the short closing band with the right-set signature. */
.handwritten-lines-bottom .hand-line:not(.paragraph-start) {
  right: 4%;
}

.letter-signature {
  top: 70%;
  left: auto;
  right: 5%;
  width: 42%;
  height: 11%;
  transform: rotate(-1.2deg);
  transform-origin: 50% 50%;
}

.handwritten-postscript {
  top: 82.5%;
  left: 7.35%;
  right: 5.2%;
  font-size: 3.3613cqw;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .letter-signature {
    top: 70%;
    left: auto;
    right: 5%;
    width: 42%;
    height: 11%;
  }
  .handwritten-postscript {
    top: 82.5%;
    left: 7.2%;
  }
}

/* Stationery v26: strengthen Edmund's signature without disturbing the approved copy. */
.letter-signature {
  top: 53.8%;
  right: 5%;
  width: 52.7%;
  height: 27.2%;
}

.handwritten-postscript {
  top: 79.6%;
}

@media (max-width: 760px) {
  .letter-signature {
    top: 53.8%;
    right: 5%;
    width: 52.7%;
    height: 27.2%;
  }
  .handwritten-postscript {
    top: 79.6%;
  }
}

/* Letter actions v34: audio is visible on arrival; the CTA remains centred. */
.letter-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}

.letter-audio-control {
  position: absolute;
  z-index: 20;
  top: clamp(14px, 2.4svh, 24px);
  right: 8px;
  display: block;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.letter-audio-control .play-button {
  width: auto;
  min-width: 130px;
  height: 42px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--cb-night-950);
  background: var(--cb-gold-400);
  border-color: var(--cb-gold-400);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgb(0 0 0 / .24);
}

.letter-audio-control .play-button:hover {
  background: var(--cb-paper-100);
}

.letter-audio-control .play-button svg {
  width: 17px;
  height: 17px;
}

.letter-audio-control .play-button-label {
  font-family: var(--cb-font-sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.letter-actions > .updates-trigger {
  width: auto;
  min-width: 154px;
}

@media (max-width: 1000px) {
  .introduction.letter-stage {
    padding-top: 58px;
  }
  .letter-audio-control {
    top: 8px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}