/* Reading Sample Page */

.reading-sample-text {
  margin: 0;
  position: relative;
  z-index: 1;
}

.reading-sample-text + .reading-sample-text {
  margin-top: 1rem;
}

.sample-layout {
  position: relative;
  padding-top: 1.5rem;
  --sample-reading-width: min(48vw, calc(100vw - 6rem));
  --sample-reading-box-height: max(min(30rem, 68vh), calc(var(--sample-reading-width) / 1.9));
  --sample-parchment-width: max(100vw, calc(100svh * 1.5459));
  --sample-side-space: max(calc((100vw - var(--sample-reading-width)) / 2), 0px);
  --sample-top-space: max(calc((100svh - var(--sample-reading-box-height)) / 2), 0px);
  --sample-bottom-space: var(--sample-top-space);
  --sample-mobile-space-scale-factor: 1;
  --sample-ink: #21160d;
  --sample-copy-ink: #17100a;
  --sample-heading-accent: #795627;
  --sample-heading-muted: rgba(33, 22, 13, 0.82);
  --sample-closing-muted: rgba(33, 22, 13, 0.8);
  --sample-parchment-brightness: 1;
  --sample-parchment-saturation: 1;
  --sample-safe-zone-brightness: 1;
  color: var(--sample-ink);
  transition: color 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sample-layout[data-visual-mode="dark"] {
  --sample-ink: #f0e6d7;
  --sample-copy-ink: #f8efe2;
  --sample-heading-accent: #f3c583;
  --sample-heading-muted: rgba(248, 239, 226, 0.88);
  --sample-closing-muted: rgba(248, 239, 226, 0.82);
  --sample-parchment-brightness: 0.12;
  --sample-parchment-saturation: 0.34;
  --sample-safe-zone-brightness: 0.12;
}

.sample-heading {
  position: relative;
  z-index: 3;
  max-width: 42rem;
  min-height: min(72svh, 44rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.sample-closing .microcopy {
  color: var(--sample-closing-muted);
  transition: color 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sample-heading .eyebrow {
  color: var(--sample-heading-accent);
  transition: color 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sample-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 600;
  line-height: 0.94;
  color: var(--sample-ink);
  transition: color 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sample-audio-start.sample-audio-hero-start {
  width: auto;
  min-width: 8.8rem;
  margin-top: 1.1rem;
  padding: 0.62rem 0.9rem;
  border-radius: 999px;
  font-size: 0.9rem;
}

.sample-audio-hero-start + .sample-scroll-indicator {
  margin-top: 1rem;
}

.sample-scroll-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.5rem;
  padding: 0;
  color: var(--sample-heading-muted);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    color 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sample-layout[data-has-scrolled="true"] .sample-scroll-indicator {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.sample-scroll-arrow {
  font-size: 1.25rem;
  line-height: 1;
}

.sample-scroll-arrow-mobile {
  display: none;
}

.sample-scroll-copy {
  font-size: 0.98rem;
  line-height: 1.2;
}

.sample-scroll-copy-mobile {
  display: none;
}

.sample-experience {
  position: relative;
  margin-top: 2rem;
}

.sample-visual-stage {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100svh;
  margin-left: calc(50% - 50vw);
  margin-bottom: -100svh;
  pointer-events: none;
  z-index: 0;
  overflow: clip;
}

.sample-visual-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/graphics/backgrounds/parchment.webp");
  background-size: var(--sample-parchment-width) auto;
  background-position: center top;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(81, 51, 22, 0.12);
  filter: brightness(var(--sample-parchment-brightness)) saturate(var(--sample-parchment-saturation));
  transition: filter 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
  body.reading-sample-page .sample-visual-stage {
    /*
      Mobile reading-sample requirement:
      - The parchment must stay viewport-static while scrolling.
      - Keep the intro page/top-bar behavior stable.
      Page model note: the intro/title screen is page 0; generated reading
      pages are content pages starting with user-facing page 1.
      Why this exists:
      - iOS Safari can drop/repaint sticky + clipped background layers during long scroll.
      - Pinning this stage to the viewport prevents the parchment from disappearing.
      Scope safety:
      - Reading-sample page only (`body.reading-sample-page`), so landing/background logic is untouched.
    */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* stylelint-disable declaration-block-no-duplicate-properties */
    height: 100svh;
    height: 100dvh;
    /* stylelint-enable declaration-block-no-duplicate-properties */
    margin-left: 0;
    margin-bottom: 0;
  }
}

.sample-text-safe-zone {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--sample-safe-zone-opacity, 0);
  transition: opacity 220ms ease;
}

.sample-text-safe-zone-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sample-layout [data-sample-safe-zone-image] {
  filter: brightness(var(--sample-safe-zone-brightness));
  transition: filter 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sample-layout[data-safe-zone-visible="true"] .sample-text-safe-zone {
  opacity: var(--sample-safe-zone-opacity, 1);
}

.sample-audio-controls {
  position: fixed;
  top: max(0.85rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 20;
  color: var(--sample-ink);
}

.sample-audio-toggle,
.sample-audio-start {
  border: 1px solid rgba(76, 51, 24, 0.22);
  background: rgba(255, 249, 236, 0.74);
  color: var(--sample-ink);
  box-shadow: 0 12px 30px rgba(46, 29, 12, 0.12);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sample-audio-toggle {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  font: 700 1.08rem/1 var(--sans);
  letter-spacing: 0;
}

.sample-audio-toggle-icon {
  display: block;
  width: 1.48rem;
  height: 1.48rem;
}

.sample-audio-start {
  width: 100%;
  min-height: 2.35rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.48rem;
  border-radius: 0.45rem;
  padding: 0.48rem 0.65rem;
  font: 700 0.86rem/1.1 var(--sans);
}

.sample-audio-start::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 0.35rem solid transparent;
  border-bottom: 0.35rem solid transparent;
  border-left: 0.56rem solid currentColor;
}

.sample-layout[data-audio-enabled="true"]:not([data-audio-needs-user-start="true"]) .sample-audio-start::before {
  width: 0.58rem;
  height: 0.72rem;
  border: 0;
  background: linear-gradient(
    to right,
    currentColor 0 32%,
    transparent 32% 68%,
    currentColor 68% 100%
  );
}

.sample-audio-toggle:hover,
.sample-audio-toggle:focus-visible,
.sample-audio-start:hover,
.sample-audio-start:focus-visible {
  background: rgba(255, 252, 244, 0.92);
  border-color: rgba(121, 86, 39, 0.46);
}

.sample-audio-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(16rem, calc(100vw - 2rem));
  padding: 0.72rem;
  border: 1px solid rgba(76, 51, 24, 0.18);
  border-radius: 0.5rem;
  background: rgba(255, 249, 236, 0.86);
  box-shadow: 0 20px 46px rgba(46, 29, 12, 0.16);
  backdrop-filter: blur(10px);
}

.sample-audio-slider {
  display: grid;
  grid-template-columns: 4.8rem minmax(6rem, 1fr);
  gap: 0.7rem;
  align-items: center;
  margin-top: 0.68rem;
  font-size: 0.84rem;
  line-height: 1.1;
  color: var(--sample-ink);
}

.sample-audio-slider input {
  width: 100%;
  accent-color: #795627;
}

.sample-layout[data-visual-mode="dark"] .sample-audio-toggle,
.sample-layout[data-visual-mode="dark"] .sample-audio-start,
.sample-layout[data-visual-mode="dark"] .sample-audio-menu {
  border-color: rgba(243, 197, 131, 0.24);
  background: rgba(15, 13, 12, 0.62);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
}

.sample-layout[data-visual-mode="dark"] .sample-audio-toggle:hover,
.sample-layout[data-visual-mode="dark"] .sample-audio-toggle:focus-visible,
.sample-layout[data-visual-mode="dark"] .sample-audio-start:hover,
.sample-layout[data-visual-mode="dark"] .sample-audio-start:focus-visible {
  background: rgba(28, 24, 22, 0.78);
  border-color: rgba(243, 197, 131, 0.46);
}

.sample-visual-group {
  position: absolute;
  inset: 0;
  visibility: hidden;
  z-index: 0;
}

.sample-visual-group[data-visual-state="entering"],
.sample-visual-group[data-visual-state="active"],
.sample-visual-group[data-visual-state="exiting"] {
  visibility: visible;
}

.sample-visual-group[data-visual-state="entering"],
.sample-visual-group[data-visual-state="active"] {
  z-index: 2;
}

.sample-visual-group[data-visual-state="exiting"] {
  z-index: 1;
}

.sample-visual-group[data-visual-state="hidden"] .sample-visual-layer {
  --layer-shift-x: var(--anchor-shift-x, 0);
  --layer-shift-y: var(--anchor-shift-y, 0);
  --layer-entry-animation: none;
  --layer-transition-duration: 520ms;
  --layer-transition-timing: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: auto;
  filter: none;
}

.sample-animation-layer-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.sample-animation-layer-config {
  display: none;
}

.sample-animation-particle {
  position: absolute;
  left: 0;
  top: 0;
  height: auto;
  width: auto;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.22));
}

.sample-visual-group[data-visual-state="entering"] .sample-visual-layer,
.sample-visual-group[data-visual-state="active"] .sample-visual-layer {
  --layer-shift-x: 0;
  --layer-shift-y: 0;
  --layer-entry-animation: none;
  --layer-transition-duration: 520ms;
  --layer-transition-timing: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity, filter;
  filter: blur(var(--layer-entry-blur, 0px)) drop-shadow(0 20px 46px rgba(0, 0, 0, 0.28));
}

.sample-visual-group[data-entry-pending="true"] .sample-visual-layer {
  opacity: 0 !important;
  animation: none !important;
}

.sample-visual-group[data-visual-state="exiting"] .sample-visual-layer {
  --layer-shift-x: var(--anchor-shift-x, 0);
  --layer-shift-y: var(--anchor-shift-y, 0);
  --layer-entry-animation: none;
  --layer-transition-duration: 520ms;
  --layer-transition-timing: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.16));
}

.sample-visual-group[data-visual-state="hidden"] .sample-visual-layer[data-entry-mode="fall_down"] {
  --layer-shift-x: 0;
  --layer-shift-y: 0;
}

.sample-visual-group[data-visual-state="hidden"] .sample-visual-layer[data-entry-mode="rise"] {
  --layer-shift-x: 0;
  --layer-shift-y: 0;
}

.sample-visual-group[data-visual-state="hidden"] .sample-visual-layer[data-entry-mode="zoom-in"] {
  --layer-shift-x: 0;
  --layer-shift-y: 0;
  --layer-slide-amount: 0;
  --layer-entry-drop-y: 0px;
  --layer-entry-opacity: 0;
}

.sample-visual-group[data-visual-state="hidden"] .sample-visual-layer[data-entry-mode="zoom-out"] {
  --layer-shift-x: 0;
  --layer-shift-y: 0;
  --layer-slide-amount: 0;
  --layer-entry-drop-y: 0px;
  --layer-entry-opacity: 0;
}

.sample-visual-group[data-visual-state="hidden"] .sample-visual-layer[data-entry-mode="angle-clockwise"] {
  --layer-shift-x: 0;
  --layer-shift-y: 0;
}

.sample-visual-group[data-visual-state="hidden"] .sample-visual-layer[data-entry-mode="angle-counterclockwise"] {
  --layer-shift-x: 0;
  --layer-shift-y: 0;
}

.sample-visual-group[data-entry-active="true"] .sample-visual-layer[data-entry-mode="fall_down"],
.sample-visual-layer[data-entry-active="true"][data-entry-mode="fall_down"],
.sample-visual-group[data-entry-active="true"] .sample-visual-layer[data-entry-mode="rise"],
.sample-visual-layer[data-entry-active="true"][data-entry-mode="rise"],
.sample-visual-group[data-entry-active="true"] .sample-visual-layer[data-entry-mode="zoom-in"],
.sample-visual-layer[data-entry-active="true"][data-entry-mode="zoom-in"],
.sample-visual-group[data-entry-active="true"] .sample-visual-layer[data-entry-mode="zoom-out"],
.sample-visual-layer[data-entry-active="true"][data-entry-mode="zoom-out"],
.sample-visual-group[data-entry-active="true"] .sample-visual-layer[data-entry-mode="angle-clockwise"],
.sample-visual-layer[data-entry-active="true"][data-entry-mode="angle-clockwise"],
.sample-visual-group[data-entry-active="true"] .sample-visual-layer[data-entry-mode="angle-counterclockwise"],
.sample-visual-layer[data-entry-active="true"][data-entry-mode="angle-counterclockwise"] {
  --layer-transition-duration: 0ms;
  --layer-transition-timing: linear;
}

.sample-visual-group[data-entry-active="true"] .sample-visual-layer[data-entry-mode="fall_down"],
.sample-visual-layer[data-entry-active="true"][data-entry-mode="fall_down"] {
  --layer-entry-animation: sample-visual-enter-fall-down 760ms cubic-bezier(0.2, 0.9, 0.26, 1.16) 1 both;
}

.sample-visual-group[data-entry-active="true"] .sample-visual-layer[data-entry-mode="rise"],
.sample-visual-layer[data-entry-active="true"][data-entry-mode="rise"] {
  --layer-entry-animation: sample-visual-enter-rise 980ms cubic-bezier(0.18, 0.78, 0.22, 1) 1 both;
}

.sample-visual-group[data-entry-active="true"] .sample-visual-layer[data-entry-mode="zoom-in"],
.sample-visual-layer[data-entry-active="true"][data-entry-mode="zoom-in"] {
  --layer-entry-animation: sample-visual-enter-zoom-in 560ms cubic-bezier(0.16, 0.84, 0.24, 1) 1 both;
}

.sample-visual-group[data-entry-active="true"] .sample-visual-layer[data-entry-mode="zoom-out"],
.sample-visual-layer[data-entry-active="true"][data-entry-mode="zoom-out"] {
  --layer-entry-animation: sample-visual-enter-zoom-out 680ms cubic-bezier(0.18, 0.9, 0.24, 1.08) 1 both;
}

.sample-visual-group[data-visual-state="entering"] .sample-visual-layer[data-entry-mode="zoom-in"],
.sample-visual-group[data-visual-state="active"] .sample-visual-layer[data-entry-mode="zoom-in"],
.sample-visual-group[data-visual-state="entering"] .sample-visual-layer[data-entry-mode="zoom-out"],
.sample-visual-group[data-visual-state="active"] .sample-visual-layer[data-entry-mode="zoom-out"] {
  --layer-shift-x: 0;
  --layer-shift-y: 0;
  --layer-slide-amount: 0;
  --layer-entry-drop-y: 0px;
  --layer-transition-duration: 0ms;
  --layer-transition-timing: linear;
}

.sample-visual-group[data-entry-active="true"] .sample-visual-layer[data-entry-mode="angle-clockwise"],
.sample-visual-layer[data-entry-active="true"][data-entry-mode="angle-clockwise"] {
  --layer-entry-animation: sample-visual-enter-angle-clockwise 760ms cubic-bezier(0.2, 0.86, 0.24, 1) 1 both;
}

.sample-visual-group[data-entry-active="true"] .sample-visual-layer[data-entry-mode="angle-counterclockwise"],
.sample-visual-layer[data-entry-active="true"][data-entry-mode="angle-counterclockwise"] {
  --layer-entry-animation: sample-visual-enter-angle-counterclockwise 760ms cubic-bezier(0.2, 0.86, 0.24, 1) 1 both;
}

.sample-visual-layer {
  position: absolute;
  z-index: var(--layer-z, 1);
  width: calc(var(--layer-horizontal-space, var(--sample-side-space)) * var(--layer-effective-scale-factor, var(--layer-scale-factor, 1)));
  max-width: none;
  height: auto;
  translate: calc(var(--layer-float-x-a, 0%) + var(--layer-float-x-b, 0%))
    calc(var(--layer-float-y-a, 0%) + var(--layer-float-y-b, 0%));
  rotate: calc(
    var(--layer-entry-rotate, 0deg) +
      var(--layer-dangle-rotate, 0deg) +
      var(--layer-float-rotate-a, 0deg) +
      var(--layer-float-rotate-b, 0deg)
  );
  scale: var(--layer-entry-scale, 1);
  transform:
    translate(var(--anchor-translate-x, 0%), var(--anchor-translate-y, 0%))
    translate3d(
      calc(
        var(--layer-overlap-shift-x, 0px) +
          (var(--layer-shift-x, 0) * var(--layer-slide-amount, 1) * 108%) +
          (var(--layer-shift-x, 0) * var(--layer-slide-amount, 1) * var(--layer-enter-distance, 54px)) +
          (var(--mobile-side-shift-x, 0) * 108%) +
          (var(--mobile-side-shift-x, 0) * var(--layer-enter-distance, 54px))
      ),
      calc(
        var(--layer-overlap-shift-y, 0px) +
          var(--layer-entry-drop-y, 0px) +
          (var(--layer-shift-y, 0) * var(--layer-slide-amount, 1) * 108%) +
          (var(--layer-shift-y, 0) * var(--layer-slide-amount, 1) * var(--layer-enter-distance, 54px)) +
          (var(--mobile-side-shift-y, 0) * 108%) +
          (var(--mobile-side-shift-y, 0) * var(--layer-enter-distance, 54px))
      ),
      0
    );
  transition:
    transform var(--layer-transition-duration, 520ms) var(--layer-transition-timing, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity var(--layer-transition-duration, 520ms) var(--layer-transition-timing, cubic-bezier(0.22, 1, 0.36, 1));
  animation: var(--layer-entry-animation, none), var(--layer-motion-animation, none);
  transform-origin: var(--layer-transform-origin, 50% 50%);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
  opacity: var(--layer-entry-opacity, 1);
  --layer-overlap-shift-x: calc(var(--layer-overlap-right, 0%) - var(--layer-overlap-left, 0%));
  --layer-overlap-shift-y: calc(var(--layer-overlap-bottom, 0%) - var(--layer-overlap-top, 0%));
  --layer-horizontal-space: var(--sample-side-space);
  --layer-effective-scale-factor: var(--layer-scale-factor, 1);
  --layer-slide-amount: 1;
  --mobile-side-shift-x: 0;
  --mobile-side-shift-y: 0;
  will-change: auto;
}

.sample-visual-layer[data-layer-ready="false"] {
  opacity: 0 !important;
}

.sample-visual-layer[data-animation-mode="dangle"] {
  --layer-transform-origin: 50% 0%;
  --layer-motion-animation: sample-visual-dangle var(--layer-animation-duration, 8s) ease-in-out
    var(--layer-animation-delay, 0s) infinite;
}

.sample-visual-layer[data-animation-mode="float"] {
  --layer-transform-origin: 50% 50%;
  --layer-motion-animation:
    sample-visual-float-x-primary calc(var(--layer-animation-duration, 9s) * 0.92) ease-in-out
      var(--layer-animation-delay, 0s) infinite alternate,
    sample-visual-float-x-secondary calc(var(--layer-animation-duration, 9s) * 1.57) ease-in-out
      calc(var(--layer-animation-delay, 0s) * -0.7) infinite alternate,
    sample-visual-float-y-primary calc(var(--layer-animation-duration, 9s) * 1.18) ease-in-out
      calc(var(--layer-animation-delay, 0s) * -0.35) infinite alternate,
    sample-visual-float-y-secondary calc(var(--layer-animation-duration, 9s) * 1.83) ease-in-out
      calc(var(--layer-animation-delay, 0s) * -1.1) infinite alternate,
    sample-visual-float-rotate-primary calc(var(--layer-animation-duration, 9s) * 1.06) ease-in-out
      calc(var(--layer-animation-delay, 0s) * -0.55) infinite alternate,
    sample-visual-float-rotate-secondary calc(var(--layer-animation-duration, 9s) * 1.71) ease-in-out
      calc(var(--layer-animation-delay, 0s) * -1.25) infinite alternate;
}


/* Reading Sample Page (continued) */

.sample-visual-layer[data-scale-mode="use_vertical_space"] {
  width: auto;
  height: calc(var(--layer-vertical-space, var(--sample-reading-box-height)) * var(--layer-effective-scale-factor, var(--layer-scale-factor, 1)));
}

.sample-visual-layer[data-scale-mode="stretch_horizontal"] {
  width: calc(100vw * var(--layer-effective-scale-factor, var(--layer-scale-factor, 1)));
  height: auto;
}

.sample-visual-layer[data-scale-mode="stretch_vertical"] {
  width: auto;
  height: calc(100svh * var(--layer-effective-scale-factor, var(--layer-scale-factor, 1)));
}

.sample-visual-layer[data-anchor="top-left"] {
  top: 0;
  left: 0;
  --anchor-translate-x: 0%;
  --anchor-translate-y: 0%;
  --anchor-shift-x: -1;
  --anchor-shift-y: -1;
  --layer-vertical-space: var(--sample-top-space);
}

.sample-visual-layer[data-anchor="top-right"] {
  top: 0;
  right: 0;
  --anchor-translate-x: 0%;
  --anchor-translate-y: 0%;
  --anchor-shift-x: 1;
  --anchor-shift-y: -1;
  --layer-vertical-space: var(--sample-top-space);
}

.sample-visual-layer[data-anchor="center-top"] {
  top: 0;
  left: 50%;
  --anchor-translate-x: -50%;
  --anchor-translate-y: 0%;
  --anchor-shift-x: 0;
  --anchor-shift-y: -1;
  --layer-vertical-space: var(--sample-top-space);
}

.sample-visual-layer[data-anchor="bottom-left"] {
  bottom: 0;
  left: 0;
  --anchor-translate-x: 0%;
  --anchor-translate-y: 0%;
  --anchor-shift-x: -1;
  --anchor-shift-y: 1;
  --layer-vertical-space: var(--sample-bottom-space);
}

.sample-visual-layer[data-anchor="bottom-center"] {
  bottom: 0;
  left: 50%;
  --anchor-translate-x: -50%;
  --anchor-translate-y: 0%;
  --anchor-shift-x: 0;
  --anchor-shift-y: 1;
  --layer-vertical-space: var(--sample-bottom-space);
}

.sample-visual-layer[data-anchor="bottom-right"] {
  bottom: 0;
  right: 0;
  --anchor-translate-x: 0%;
  --anchor-translate-y: 0%;
  --anchor-shift-x: 1;
  --anchor-shift-y: 1;
  --layer-vertical-space: var(--sample-bottom-space);
}

.sample-visual-layer[data-anchor="center-left"] {
  top: 50%;
  left: 0;
  --anchor-translate-x: 0%;
  --anchor-translate-y: -50%;
  --anchor-shift-x: -1;
  --anchor-shift-y: 0;
  --layer-vertical-space: var(--sample-reading-box-height);
}

.sample-visual-layer[data-anchor="center-right"] {
  top: 50%;
  right: 0;
  --anchor-translate-x: 0%;
  --anchor-translate-y: -50%;
  --anchor-shift-x: 1;
  --anchor-shift-y: 0;
  --layer-vertical-space: var(--sample-reading-box-height);
}

.sample-visual-layer[data-entry-mode^="angle-"][data-anchor="top-left"] {
  --layer-transform-origin: 0% 0%;
}

.sample-visual-layer[data-entry-mode^="angle-"][data-anchor="top-right"] {
  --layer-transform-origin: 100% 0%;
}

.sample-visual-layer[data-entry-mode^="angle-"][data-anchor="center-top"] {
  --layer-transform-origin: 50% 0%;
}

.sample-visual-layer[data-entry-mode^="angle-"][data-anchor="bottom-left"] {
  --layer-transform-origin: 0% 100%;
}

.sample-visual-layer[data-entry-mode^="angle-"][data-anchor="bottom-center"] {
  --layer-transform-origin: 50% 100%;
}

.sample-visual-layer[data-entry-mode^="angle-"][data-anchor="bottom-right"] {
  --layer-transform-origin: 100% 100%;
}

.sample-visual-layer[data-entry-mode^="angle-"][data-anchor="center-left"] {
  --layer-transform-origin: 0% 50%;
}

.sample-visual-layer[data-entry-mode^="angle-"][data-anchor="center-right"] {
  --layer-transform-origin: 100% 50%;
}

.sample-pages {
  position: relative;
  z-index: 2;
  overflow-anchor: none;
}

.sample-pages-mobile {
  display: none;
}

.sample-page-section {
  position: relative;
  overflow-anchor: none;
}

.sample-page {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6rem, 10vh, 8rem) 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  overflow-anchor: none;
}

.sample-page-copy {
  width: var(--sample-reading-width);
  max-width: var(--sample-reading-width);
  min-height: min(30rem, 68vh);
  padding: clamp(1.5rem, 2vw, 2.2rem);
  text-align: left;
  line-height: 1.75;
  color: var(--sample-ink);
  aspect-ratio: 1.9 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  --sample-safe-zone-x: clamp(1.3rem, 2.2vw, 2.8rem);
  --sample-safe-zone-y: clamp(1rem, 2vh, 2rem);
}

.sample-page-copy-body {
  width: 100%;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  hyphens: auto;
  transform: scale(0.98);
  transition: transform 220ms ease;
}

.sample-page.is-active .sample-page-copy-body {
  transform: scale(1);
}

.sample-page .reading-sample-text {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.38vw, 1.72rem);
  line-height: 1.52;
  max-width: 100%;
  overflow-wrap: break-word;
  color: var(--sample-copy-ink);
  opacity: 1;
  margin: 0;
  transition: color 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sample-page .reading-sample-text + .reading-sample-text {
  margin-top: 1em;
}

.sample-closing {
  position: relative;
  z-index: 3;
  margin-top: 6rem;
  scroll-snap-align: start;
  color: var(--sample-ink);
  background: rgba(255, 249, 236, 0.38);
  border-color: rgba(92, 62, 30, 0.16);
  box-shadow: 0 20px 48px rgba(87, 61, 31, 0.1);
  backdrop-filter: blur(6px);
}

.sample-closing-title {
  margin: 0 0 0.6rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.02;
}

html.has-reading-sample-scroll {
  overscroll-behavior-y: contain;
  scroll-snap-type: none;
}

html.has-reading-sample-scroll.reading-sample-viewport-transition {
  scroll-snap-type: none;
}

html.reading-sample-programmatic-scroll-lock {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

.sample-layout[data-viewport-transition="true"] .sample-experience {
  visibility: hidden;
}