/* Landing cards use real layout sizes: text stays readable as the viewport changes.
   Keep this separate from the exported stylesheet and from the other-page polish. */
@media screen {
  /* Hide the document scrollbar without changing native scrolling. */
  html:has(body[data-page="home"]),
  body[data-page="home"] {
    scrollbar-width: none;
  }

  html:has(body[data-page="home"])::-webkit-scrollbar,
  body[data-page="home"]::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* One camera surface on every screen: the runtime supplies all dimensions
     and translations, including the fixed phone crop. */
  body[data-page="home"] #main .scene-art {
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--landing-art-width, 100%) !important;
    height: var(--landing-art-height, auto) !important;
    transform: var(--landing-art-transform, none) !important;
  }

  body[data-page="home"] .immersive-landing {
    /* Widen desktop cards gradually, with a smaller increase in inner spacing.
       The extra space fades out before the centered tablet layout begins. */
    --landing-card-expansion: clamp(0px, calc(5vw - 64px), 32px);
    --landing-card-width: calc(clamp(22rem, calc(20vw + 16rem), 46rem) + 2 * var(--landing-card-expansion));
    --landing-card-padding: clamp(24px, 2.2vw, 44px);
    --landing-body-size: clamp(16px, calc(14px + .3vw), 22px);
  }

  body[data-page="home"] #main .chapter-copy {
    width: var(--landing-card-width) !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100svh - var(--scene-top, 74px) - clamp(48px, 10svh, 128px));
    padding: calc(var(--landing-card-padding) + var(--landing-card-expansion) / 2) !important;
    margin-bottom: 0 !important;
    transform: none !important;
    border-radius: 36px 10px 34px 10px;
    overflow-y: auto;
    /* Let a tall card hand scrolling back to the document at either edge. */
    overscroll-behavior-y: auto;
    touch-action: auto;
    scrollbar-width: thin;
    scrollbar-color: #8b927b transparent;
  }

  body[data-page="home"] #main .chapter-copy h1 {
    font-size: clamp(38px, calc(22px + 2.5vw), 80px) !important;
    line-height: 1.04;
    margin-bottom: clamp(18px, 1.6vw, 26px);
    text-wrap: balance;
  }

  body[data-page="home"] #main .chapter-copy h2 {
    font-size: clamp(32px, calc(22px + 2vw), 62px) !important;
    line-height: 1.08;
    margin-bottom: clamp(16px, 1.4vw, 22px);
    text-wrap: balance;
  }

  body[data-page="home"] #main .chapter-copy :is(p, li) {
    font-size: var(--landing-body-size);
    line-height: 1.55;
    text-wrap: pretty;
  }

  body[data-page="home"] #main .chapter-copy :is(.work-highlight, .impetus-examples) {
    margin-top: clamp(16px, 1.5vw, 24px);
    padding-top: clamp(14px, 1.2vw, 20px);
  }

  body[data-page="home"] #main .chapter-copy :is(.work-highlight, .impetus-examples) h3 {
    font-size: clamp(13px, calc(11px + .2vw), 16px);
    margin-bottom: 8px;
  }

  body[data-page="home"] #main .chapter-copy .actions {
    margin-top: clamp(18px, 1.6vw, 26px);
  }

  body[data-page="home"] #main .chapter-copy .button {
    font-size: clamp(14px, calc(12px + .2vw), 17px);
    min-height: 44px;
    padding: 12px 20px;
  }
}

/* Widen the reading column gently; it switches to centered at 1024px.
   Phone cards fill the available width with equal, comfortable side margins. */
@media screen and (max-width: 1280px) {
  body[data-page="home"] .immersive-landing {
    --landing-card-width: clamp(22rem, calc(42rem - 12.5vw), 34rem);
    --landing-card-gutter: clamp(24px, 6vw, 48px);
  }

  body[data-page="home"] #main .chapter-copy {
    max-width: calc(100vw - 2 * var(--landing-card-gutter)) !important;
  }
}

@media screen and (max-width: 700px) {
  body[data-page="home"] .immersive-landing {
    /* Keep the card centered with a separate lane for the right-hand dots. */
    --landing-card-gutter: calc(44px + max(env(safe-area-inset-left), env(safe-area-inset-right)));
  }

  body[data-page="home"] #main .chapter-copy {
    left: 50% !important;
    /* The static source cards follow the same compact reading position. */
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(var(--landing-card-width), calc(100% - 2 * var(--landing-card-gutter))) !important;
    max-width: none !important;
    max-height: calc(var(--mobile-stage-height) - clamp(48px, 10svh, 128px) - env(safe-area-inset-bottom));
    margin-left: 0 !important;
    border-radius: 28px 8px 26px 8px;
  }
}

@media screen {
  /* Native document scrolling supplies the journey's distance. The source
     cards are only used for measurement; the sticky reader displays them. */
  body[data-page="home"] #main .has-native-landing-scroll .journey-chapters {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-page="home"] #main .has-native-landing-scroll .journey-chapter {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body[data-page="home"] #main .has-native-landing-scroll .journey-chapter::after {
    display: none !important;
  }

  body[data-page="home"] #main .has-native-landing-scroll .journey-chapters .chapter-copy {
    position: absolute !important;
    margin: 0 !important;
  }

  body[data-page="home"] #main .landing-journey-scroll {
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }

  body[data-page="home"] #main .has-landing-reader .journey-chapters {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body[data-page="home"] #main .has-landing-reader .journey-chapters .chapter-copy {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body[data-page="home"] #main .landing-reader {
    position: absolute !important;
    z-index: 4;
    top: var(--landing-reader-top, 24px) !important;
    left: var(--landing-reader-left, var(--landing-card-gutter, 24px)) !important;
    bottom: auto !important;
    margin: 0 !important;
    box-sizing: border-box;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  body[data-page="home"] #main .landing-reader-content {
    display: contents;
  }

  body[data-page="home"] #main .landing-reader[data-resizing="true"] {
    overflow: clip;
  }

  body[data-page="home"] #main .landing-reader-content > p:not(.eyebrow) {
    margin: 0;
  }

  body[data-page="home"] #main .landing-reader > .actions[hidden] {
    display: none !important;
  }

  body[data-page="home"] #main .landing-reader * {
    pointer-events: none;
  }

  body[data-page="home"] #main .landing-reader :is(a, button, input, select, textarea, summary) {
    pointer-events: auto;
  }
}

@media print {
  body[data-page="home"] #main .landing-journey-scroll,
  body[data-page="home"] #main .landing-reader {
    display: none !important;
  }
}

/* Visible chapter navigation reuses the existing scroll destinations. */
@media screen and (min-width: 701px) {
  body[data-page="home"] #main .has-landing-reader .journey-chapter:last-child {
    box-sizing: border-box;
    height: var(--landing-ending-height, auto);
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  body[data-page="home"] #main .has-landing-reader .journey-chapter:last-child::after {
    display: none;
  }
}

@media screen {
  body[data-page="home"] #main .has-landing-reader .chapter-jumps {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    right: clamp(12px, 1.5vw, 24px);
    bottom: auto;
    left: auto;
    z-index: 5;
    flex-flow: column nowrap;
    gap: 0;
    width: 32px;
    height: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    clip-path: none;
    overflow: visible;
    transform: translateY(-50%);
    pointer-events: auto;
  }

  body[data-page="home"] #main .chapter-jumps.offstage {
    visibility: hidden;
    pointer-events: none;
  }

  /* A narrow backing keeps the compact dots legible over the artwork. */
  body[data-page="home"] #main .has-landing-reader .chapter-jumps::before {
    content: '';
    position: absolute;
    inset: 0 5px;
    border-radius: 999px;
    background: rgb(248 248 241 / .9);
    pointer-events: none;
  }

  body[data-page="home"] #main .chapter-jumps button {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    width: 32px;
    height: 24px;
    min-width: 32px;
    min-height: 24px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #38513f;
    cursor: pointer;
  }

  body[data-page="home"] #main .chapter-jumps button::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 50%;
    background: #748269;
    box-shadow: none;
    opacity: 1;
    transition: background-color .18s;
  }

  body[data-page="home"] #main .chapter-jumps button[aria-current="step"]::before {
    width: 12px;
    height: 12px;
    background: currentColor;
  }

  body[data-page="home"] #main .chapter-jumps button:hover::before {
    background: currentColor;
  }

  body[data-page="home"] #main .chapter-jumps button:focus-visible {
    outline: 2px solid #38513f;
    outline-offset: -4px;
  }

  body[data-page="home"] #main .chapter-dot-label {
    /* Keep the button name available to assistive technology without a tooltip. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
  }
}

@media screen and (max-width: 700px) {
  body[data-page="home"] #main .has-landing-reader .chapter-jumps {
    right: calc(4px + env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] #main .chapter-jumps button::before {
    transition: none;
  }
}

/* The landing journey ends with a compact, ordinary footer. Its existing
   artwork, support link and signup remain shared with the other pages. */
@media screen {
  body[data-page="home"] #footer {
    /* Keep the protruding wood edge above the scene in both flow modes. */
    z-index: 2;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px 32px;
    padding: 24px max(32px, calc((100vw - 1440px) / 2));
  }

  body[data-page="home"] #footer .footer-mission {
    max-width: 48ch;
    font-size: 16px;
    line-height: 1.5;
  }

  body[data-page="home"] #footer .footer-actions {
    grid-column: auto;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
  }

  body[data-page="home"] #footer .footer-signup {
    width: 340px;
  }

  body[data-page="home"] #footer .button,
  body[data-page="home"] #footer .footer-signup input {
    min-height: 44px;
  }

  body[data-page="home"] #footer .footer-signup input {
    height: 44px;
    font-size: 16px;
  }
}

@media screen and (max-width: 899px) {
  body[data-page="home"] #footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right));
  }

  body[data-page="home"] #footer .footer-mission {
    max-width: 65ch;
  }

  body[data-page="home"] #footer .footer-actions {
    justify-content: space-between;
  }
}

@media screen and (max-width: 600px) {
  body[data-page="home"] #footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  body[data-page="home"] #footer .footer-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  body[data-page="home"] #footer .footer-signup {
    width: 100%;
  }
}

@media print {
  body[data-page="home"] #main .chapter-jumps {
    display: none !important;
  }
}

/* Native input may travel farther than its one-room visual destination. Keep
   the scene/footer in that visual flow without enlarging the scroll document. */
@media screen {
  body[data-page="home"] .has-owned-landing-flow .scene-sticky {
    position: fixed !important;
    top: var(--landing-stage-flow-top) !important;
    left: var(--landing-stage-flow-left) !important;
    width: var(--landing-stage-flow-width) !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 1;
  }
  /* Keep the stable scene's backdrop opaque if mobile browser chrome opens
     extra viewport space beneath it. Neither fixed surface affects layout. */
  body[data-page="home"] .has-owned-landing-flow::before {
    content: "";
    position: fixed;
    top: var(--landing-stage-flow-top);
    bottom: 0;
    left: var(--landing-stage-flow-left);
    width: var(--landing-stage-flow-width);
    background: #2F251B;
    pointer-events: none;
    z-index: 0;
  }
  body[data-page="home"] .has-owned-landing-flow .spatial-journey::after {
    visibility: hidden;
  }
  body[data-page="home"] #footer.landing-owned-footer {
    position: fixed;
    top: var(--landing-footer-flow-top);
    left: var(--landing-footer-flow-left);
    width: var(--landing-footer-flow-width);
    right: auto;
    bottom: auto;
    margin: 0;
    box-sizing: border-box;
  }
  .landing-stage-flow-space, .landing-footer-flow-space { pointer-events: none; }
}
@media print {
  .landing-stage-flow-space, .landing-footer-flow-space { display: none !important; }
}

/* Progress bar instead of dots. */
@media screen {
  body[data-page="home"] #main .has-landing-reader .chapter-jumps {
    width: 18px;
    --landing-bar: 4px;
    --landing-bar-inset: calc((18px - var(--landing-bar)) / 2);
  }
  body[data-page="home"] #main .has-landing-reader .chapter-jumps::before {
    inset: 0 var(--landing-bar-inset);
    background: rgb(248 248 241 / .42);
    box-shadow: 0 0 0 .5px rgb(47 37 27 / .12);
    transition: background-color .2s;
  }
  body[data-page="home"] #main .has-landing-reader .chapter-jumps::after {
    content: '';
    position: absolute;
    top: 0;
    left: var(--landing-bar-inset);
    width: var(--landing-bar);
    height: calc(var(--landing-progress, .1667) * 100%);
    border-radius: 999px;
    background: #52703D;
    pointer-events: none;
  }
  body[data-page="home"] #main .has-landing-reader .chapter-jumps:hover::before {
    background: rgb(248 248 241 / .7);
  }
  body[data-page="home"] #main .chapter-jumps button {
    flex: 0 0 28px;
    width: 18px;
    min-width: 18px;
    height: 28px;
    min-height: 28px;
    border-radius: 999px;
  }
  body[data-page="home"] #main .chapter-jumps button::before {
    display: none;
  }
  body[data-page="home"] #main .chapter-jumps button:focus-visible {
    outline: 2px solid #52703D;
    outline-offset: 0;
  }
}

/* Cards about 12% narrower on screens tall enough that long cards still fit without scrolling inside. */
@media screen and (min-width: 701px) and (min-height: 821px) {
  body[data-page="home"] #main .chapter-copy {
    width: calc(var(--landing-card-width) * .88) !important;
  }
}

/* Last resort for very small screens: text shrinks a little (set by the reader) instead of scrolling inside the card. */
@media screen {
  body[data-page="home"] #main .landing-reader h1 { font-size: calc(clamp(38px, calc(22px + 2.5vw), 80px) * var(--landing-fit, 1)) !important; }
  body[data-page="home"] #main .landing-reader h2 { font-size: calc(clamp(32px, calc(22px + 2vw), 62px) * var(--landing-fit, 1)) !important; }
  body[data-page="home"] #main .landing-reader :is(p, li) { font-size: calc(var(--landing-body-size) * var(--landing-fit, 1)); }
}