/* Responsive Overrides */

@media (max-width: 860px) {
  .hero,
  .story-grid,
  .sample-highlight,
  .landing-segment,
  .checkout-layout,
  .admin-grid,
  .split-heading,
  .site-header,
  .site-footer,
  .order-card {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-segment--heading-right .landing-segment-heading,
  .landing-segment--heading-right .landing-segment-panel {
    order: initial;
  }

  .landing-main {
    --landing-path-width: 0.85rem;
    --landing-path-anchor-edge-inset: 16%;
    --landing-path-min-angle: 126deg;
  }

  .landing-travel-path-line {
    stroke-width: var(--landing-path-width);
  }

  .landing-segment-title {
    max-width: 100%;
  }

  .landing-segment {
    padding-block: clamp(1.65rem, 7.5vw, 3rem);
  }

  .story-section .story-character-item {
    display: flow-root;
    padding-block: clamp(1.1rem, 4vw, 1.35rem);
  }

  .story-section .story-character-icon {
    float: left;
    width: 3lh;
    height: 3lh;
    margin: 0.16rem 0.85rem 0.35rem 0;
  }

  .story-section .story-character-item:nth-child(even) .story-character-icon {
    float: right;
    margin: 0.16rem 0 0.35rem 0.85rem;
  }

  .story-section .story-blurb {
    font-size: 1rem;
    line-height: 1.62;
  }

  .hero {
    display: flex;
    align-items: center;
  }

  .hero-copy {
    display: contents;
  }

  .hero-copy .eyebrow {
    order: 1;
    width: 100%;
    margin: 0;
  }

  body.reading-sample-page .site-header,
  body.reading-sample-page.reading-sample-header-compact .site-header {
    /*
      Mobile reading-sample requirement:
      Keep one stable viewport-pinned header. We originally tried `position:
      sticky`, but mobile browsers can fail sticky positioning for a body child
      when the document also has overflow clipping and fixed visual layers.
      Page state should only change which header items are visible, not swap
      the header between normal and compact positioning.
      Page model note: the intro/title screen is page 0; compact mode belongs
      to generated content pages starting with user-facing page 1.
    */
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 20;
    width: min(1180px, calc(100% - 2rem));
    transform: translateX(-50%);
  }

  body.reading-sample-page .sample-shell-overlay-header {
    /*
      The fixed mobile header is intentionally kept as one stable element; this
      spacer preserves the intro page's old flow-space so the full logo/topbar
      remains visible when returning to user-facing page 0.
    */
    padding-top: clamp(7.25rem, 25vw, 9.5rem);
  }

  body.reading-sample-header-compact .site-header {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }

  body.reading-sample-header-compact .site-header .top-nav {
    gap: 0.85rem;
    padding: 0.38rem 0.68rem 0.44rem;
  }

  /* Reading-sample mobile requirement: keep top-nav readable over the active visual mode. */
  body.reading-sample-page .site-header .top-nav,
  body.reading-sample-page .site-header .top-nav a {
    color: #2f2114;
    text-shadow: none;
  }

  body.reading-sample-page.reading-sample-dark-visuals .site-header .top-nav,
  body.reading-sample-page.reading-sample-dark-visuals .site-header .top-nav a {
    color: rgba(246, 236, 221, 0.94);
    text-shadow: none;
  }

  body.reading-sample-page .site-header .logo-mark {
    filter: brightness(0) saturate(0);
  }

  .hero-copy .hero-slogan {
    order: 2;
  }

  .hero-copy .subtitle {
    order: 3;
    margin: 0 0 0.9rem;
    text-align: center;
  }

  .hero-copy .cta-row {
    order: 4;
    width: 100%;
    justify-content: center;
  }

  .hero-art {
    order: 5;
    align-self: center;
  }

  .hero .key-facts {
    order: 6;
    width: 100%;
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .hero .key-facts li {
    margin: 0;
    min-height: 4.1rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid rgba(235, 201, 119, 0.2);
    border-radius: 0.8rem;
    background: linear-gradient(180deg, rgba(244, 238, 228, 0.045), rgba(244, 238, 228, 0.02));
    color: var(--text);
    line-height: 1.38;
  }

  .hero .key-facts li strong {
    display: block;
    margin-bottom: 0.2rem;
    color: rgba(247, 237, 224, 0.92);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .price-card {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: -2%;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0;
    width: max-content;
    max-width: calc(100vw - 1.2rem);
    text-align: center;
    white-space: normal;
    transform-origin: center center;
    transform: translateX(-50%);
  }

  .price-card small {
    flex-basis: 100%;
    white-space: normal;
  }

  .price-card:hover,
  .price-card:focus-visible,
  .price-card:focus-within {
    transform: translateX(-50%) scale(1.08);
  }

  .checkout-layout-shop,
  .checkout-assurance {
    grid-template-columns: 1fr;
  }

  .summary-card-shop {
    position: static;
  }

  .checkout-card-head,
  .summary-header,
  .summary-product,
  .summary-support,
  .checkout-method-card {
    align-items: flex-start;
  }

  .checkout-topbar,
  .checkout-topbar-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .checkout-topbar-meta {
    display: none;
  }

  .hero-copy .hero-slogan {
    width: min(520px, 88vw);
    margin: 0.2rem auto 0.6rem;
    text-align: center;
    font-size: clamp(2.3rem, 11vw, 3.7rem);
  }

  .hero-copy .eyebrow {
    text-align: center;
  }

  .sample-layout {
    padding-top: 1rem;
    --sample-reading-width: min(72vw, 23rem);
    --sample-reading-box-height: max(min(34rem, 76vh), calc(var(--sample-reading-width) / 0.8));
    --sample-side-space: max(calc((100vw - var(--sample-reading-width)) / 2), 0px);
    --sample-mobile-side-space: max(calc(100vw - var(--sample-reading-width) - 2rem), 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.4;
  }

  .sample-heading {
    max-width: 100%;
    min-height: min(68svh, 36rem);
  }

  .sample-title {
    font-size: clamp(2.6rem, 12vw, 4.2rem);
  }

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

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

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

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

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

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

  .sample-page {
    min-height: 92svh;
    padding: 5rem 1rem 4.5rem;
    justify-content: flex-start;
  }

  .sample-page-copy {
    width: var(--sample-reading-width);
    min-height: min(34rem, 76vh);
    padding: 1.25rem 1rem 1.35rem;
    border-radius: 1.25rem;
    aspect-ratio: 0.8 / 1;
    margin-left: auto;
    margin-right: auto;
    --sample-safe-zone-x: clamp(1rem, 6vw, 2rem);
    --sample-safe-zone-y: clamp(1.8rem, 5vh, 3rem);
  }

  .sample-page .reading-sample-text {
    font-size: clamp(0.96rem, 3.35vw, 1.14rem);
    line-height: 1.66;
    overflow-wrap: break-word;
  }

  .sample-layout[data-mobile-side="right"] .sample-pages-mobile .sample-page-copy {
    margin-left: 0;
    margin-right: auto;
  }

  .sample-layout[data-mobile-side="left"] .sample-pages-mobile .sample-page-copy {
    margin-left: auto;
    margin-right: 0;
  }

  .sample-visual-layer {
    --layer-effective-scale-factor: var(--layer-mobile-scale-factor, var(--layer-scale-factor, 1));
  }

  .sample-visual-group[data-visual-state="entering"] .sample-visual-layer,
  .sample-visual-group[data-visual-state="active"] .sample-visual-layer {
    /*
      Mobile reading-sample performance requirement:
      large filtered image layers are expensive during scroll transitions, so
      mobile entries keep movement/opacity while removing blur and drop-shadow.
    */
    --layer-entry-blur: 0px;
    filter: none;
  }

  .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"] {
    --layer-entry-animation: sample-visual-enter-mobile-fade-translate 360ms cubic-bezier(0.22, 1, 0.36, 1) 1 both;
  }

  @keyframes sample-visual-enter-mobile-fade-translate {
    0% {
      --layer-entry-drop-y: 1.2rem;
      --layer-entry-opacity: 0;
    }

    100% {
      --layer-entry-drop-y: 0px;
      --layer-entry-opacity: 1;
    }
  }

  .sample-visual-layer[data-scale-mode="use_horizontal_space"] {
    width: calc(var(--layer-horizontal-space, var(--sample-side-space)) * var(--sample-mobile-space-scale-factor) * var(--layer-effective-scale-factor, var(--layer-scale-factor, 1)));
  }

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

  .sample-layout[data-mobile-side="right"] .sample-visual-layer[data-layer-side="left"],
  .sample-layout[data-mobile-side="left"] .sample-visual-layer[data-layer-side="right"],
  .sample-layout[data-mobile-side="right"] .sample-visual-layer[data-layer-side="right"],
  .sample-layout[data-mobile-side="left"] .sample-visual-layer[data-layer-side="left"] {
    --layer-horizontal-space: var(--sample-mobile-side-space);
  }

  .sample-layout[data-mobile-side="right"] .sample-visual-layer[data-layer-side="left"],
  .sample-layout[data-mobile-side="left"] .sample-visual-layer[data-layer-side="right"] {
    /*
      Mobile reading-sample split requirement:
      left/right layers inside one environment are paged as visual substeps, so
      inactive side layers must slide/fade out instead of being hidden instantly.
    */
    opacity: 0;
    pointer-events: none;
  }

  .sample-layout[data-mobile-side="right"] .sample-visual-layer[data-layer-side="left"] {
    --mobile-side-shift-x: -1;
  }

  .sample-layout[data-mobile-side="left"] .sample-visual-layer[data-layer-side="right"] {
    --mobile-side-shift-x: 1;
  }

  .sample-layout[data-mobile-side-transition="true"] .sample-visual-group[data-visual-state="entering"] .sample-visual-layer[data-entry-mode="zoom-in"],
  .sample-layout[data-mobile-side-transition="true"] .sample-visual-group[data-visual-state="active"] .sample-visual-layer[data-entry-mode="zoom-in"],
  .sample-layout[data-mobile-side-transition="true"] .sample-visual-group[data-visual-state="entering"] .sample-visual-layer[data-entry-mode="zoom-out"],
  .sample-layout[data-mobile-side-transition="true"] .sample-visual-group[data-visual-state="active"] .sample-visual-layer[data-entry-mode="zoom-out"] {
    --layer-transition-duration: 520ms;
    --layer-transition-timing: cubic-bezier(0.22, 1, 0.36, 1);
  }

  .sample-closing {
    margin-top: 4rem;
  }
}

@media (hover: none), (pointer: coarse) {
  .cover-tilt {
    transform: none;
  }

  .cover-gloss {
    opacity: 0.38;
  }

  .cover-imperfections {
    opacity: 0.36;
  }
}