/* Basic narrow-screen layout. Every rule is isolated from the approved desktop. */
@media (max-width: 1000px) {
  html,
  body {
    width: 100%;
    overflow-x: clip;
  }
  body {
    background: #1c1429;
  }
  .journey {
    height: auto !important;
    min-height: 0 !important;
    max-width: none;
    overflow: hidden;
    clip-path: none;
  }
  .journey .stage {
    position: relative !important;
    top: auto !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    overflow: hidden;
    background: #1c1429;
  }
  .stage > .landscape {
    top: 0;
    left: -90%;
    width: 257%;
    height: auto;
    opacity: 0.9;
  }
  /* The scenery loops follow the landscape's narrow placement and shading. */
  .revised-ambient-layer {
    top: 0;
    left: -90%;
    width: 257%;
    filter: brightness(0.9);
  }
  .scene-top {
    position: relative;
    inset: auto;
    aspect-ratio: auto;
    min-height: 0;
    padding: 62vw 0 28px;
    background: linear-gradient(transparent 28%, #142620d9 70%, #142620);
  }
  .scene-top .glass-title {
    height: 100vw;
    scale: 1;
    transform: none !important;
    opacity: 1 !important;
  }
  .scene-top .lorbo.quill-placement {
    height: auto;
  }
  .scene-top .contact-shadow {
    display: none;
  }
  .scene-top .hero-copy {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 24px 30px 12px;
    gap: 20px;
    transform: none !important;
  }
  .scene-top .hero-copy .definition {
    font-size: clamp(26px, 5vw, 36px);
    line-height: 1.17;
  }
  .scene-top .hero-copy .definition > span,
  .scene-top #invite,
  .scene-top .hero-access-note {
    transform: none !important;
    opacity: 1 !important;
  }
  .hero-copy .hero-access-note {
    font-size: 14px;
    margin: 0;
  }
  .hero-copy .hero-facts,
  .hero-copy .hero-facts.is-scroll-hidden {
    width: min(420px, 100%);
    height: 90px;
    min-height: 90px;
    padding: 0 46px 8px;
    gap: 12px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    --ribbon-art-height: 76px;
    --ribbon-end: 72px;
  }
  .hero-copy .hero-facts > span {
    min-width: 0;
  }
  .hero-copy .invite,
  .hero-copy .invite:hover {
    height: 60px;
    min-height: 60px;
    width: 250px;
    max-width: 100%;
    font-size: 14px;
    padding-inline: 24px;
  }
  .site-frame-top .primary-nav {
    display: none;
  }
  .site-frame-top .medallion-home {
    left: 18px;
    top: 12px;
    width: 56px;
    height: 56px;
    transform: none;
  }
  .site-frame-top .frame-controls {
    height: 85px;
  }
  .site-frame-top .header-actions .motion-control {
    top: 17px;
    right: 16px;
    min-height: 38px;
    padding: 7px 12px;
    font-size: 11px;
    gap: 9px;
  }
  .site-frame-top::before {
    height: 95px;
  }
  .parchment-track,
  .reader-track {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    width: 100%;
    pointer-events: auto;
  }
  .parchment-track {
    margin: 150px auto 0;
    opacity: 1 !important;
    transform: none !important;
  }
  .parchment-track .parchment-section {
    position: relative !important;
    inset: auto !important;
    display: block;
    min-height: 0;
    width: calc(100% - 44px);
    max-width: 720px;
    margin: 0 auto;
    padding: 78px 30px 44px;
    transform: none !important;
  }
  .parchment-surface::before {
    inset: -10px;
    border-width: 56px;
    border-image-width: 56px;
  }
  .parchment-summary #what-title {
    font-size: clamp(30px, 5vw, 40px);
    line-height: 1.13;
    margin: 0 0 24px;
  }
  .parchment-section .parchment-intro {
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
  }
  .parchment-actions {
    margin: 24px 0 32px;
    text-align: center;
  }
  .parchment-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
    padding: 0;
    margin: 0;
  }
  .parchment-points h3 {
    font-size: 16px;
    line-height: 1.4;
  }
  .parchment-points p {
    font-size: 15px;
    line-height: 1.6;
  }
  .parchment-points .proof-ink {
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
  }
  .parchment-ribbon {
    top: -40px !important;
    bottom: auto !important;
    width: min(570px, calc(100% + 16px));
    max-width: none;
    height: 100px;
    min-height: 0;
    padding: 0 50px 8px;
    --ribbon-art-height: 78px;
    --ribbon-end: 80px;
  }
  .parchment-ribbon h2 {
    font-size: clamp(19px, 3.4vw, 27px);
    margin: 0;
  }
  .reader-track {
    margin: 170px auto 0;
  }
  .reader-track .reader-preview {
    position: relative !important;
    inset: auto !important;
    display: flex;
    flex-direction: column;
    gap: 26px;
    width: calc(100% - 36px);
    max-width: 760px;
    min-height: 0 !important;
    margin: 0 auto;
    padding: 72px 28px 40px;
    transform: none !important;
  }
  .reader-preview::before {
    inset: -8px;
    background-size: cover;
  }
  .reader-preview .reader-intro {
    width: 100%;
    padding: 40px 28px;
    margin: 0;
    order: 0;
  }
  .reader-preview .reader-intro::before {
    inset: 0 -8px;
    border-width: 52px;
    border-image-width: 52px;
  }
  .reader-intro h2 {
    font-size: clamp(31px, 4.7vw, 40px);
    line-height: 1.12;
    margin: 0 0 22px;
  }
  .reader-dek,
  .reader-process p {
    font-size: 16px;
    line-height: 1.6;
  }
  .reader-preview .reader-process {
    gap: 22px;
    margin: 24px 0;
  }
  .reader-preview .reader-process li {
    padding-left: 42px;
  }
  .reader-preview .reader-process li > span {
    width: 36px;
    height: 36px;
    left: -3px;
    top: -6px;
    font-size: 18px;
  }
  .reader-preview .reader-process h3 {
    font-size: 16px;
    line-height: 1.4;
  }
  .reader-preview .reader-visualize {
    width: 100%;
    height: 76px;
    min-height: 76px;
    font-size: 13px;
    padding-inline: 22px;
  }
  .reader-closed-novel {
    position: relative;
    inset: auto;
    width: min(320px, 82%);
    margin: 4px auto 20px;
    transform: rotate(3deg);
    order: 1;
  }
  .book-sample-button {
    width: 210px;
    height: 56px;
    font-size: 14px;
    max-width: 90%;
    padding-inline: 18px;
  }
  .reader-preview.reading-sample-covered .reader-intro {
    visibility: visible;
    opacity: 1;
  }
  .desk-scene-fade {
    top: 0 !important;
    bottom: 0;
    --fade-height: 1500px;
    background: linear-gradient(transparent 0, #1c1429 1800px, #1c1429);
  }
  .ink-flow {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100%;
    max-width: 680px;
    min-height: 0;
    margin: 150px auto 0;
    padding: 30px 28px 80px;
    scroll-margin-top: 24px;
  }
  .ink-flow-art {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "narration" "chatlabel" "chat" "composer" "note" "character" "results" "manuscripts" "access";
    grid-template-rows: auto auto 330px auto auto 340px auto auto auto;
    gap: 20px;
    aspect-ratio: auto;
    width: 100%;
  }
  .ink-flow-art::before,
  .flow-particles {
    display: none !important;
  }
  .flow-narration[data-narration="lines"] {
    grid-area: narration;
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    transform: none;
    margin: 0 0 18px;
    text-align: center;
  }
  .flow-narration[data-narration="lines"] .flow-narration-title {
    font:
      700 clamp(30px, 6vw, 42px) / 1.2 "Cinzel Decorative",
      Georgia,
      serif;
    margin: 0 0 20px;
    color: #f3dfb5;
  }
  .flow-narration[data-narration="lines"] .flow-narration-copy {
    font:
      400 18px / 1.6 "Plus Jakarta Sans",
      sans-serif;
    margin: 0;
    color: #eee2f3;
  }
  .flow-narration[data-narration="lines"] .flow-narration-copy span {
    position: static;
    display: block;
    padding: 0;
    opacity: 1;
    font: inherit;
    color: inherit;
  }
  .ink-flow-art > .flow-conversation-label {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    font:
      700 21px / 1.35 "Cinzel Decorative",
      Georgia,
      serif;
    text-align: center;
    color: #e5d4be;
    background: none;
    transform: none;
    margin: 0;
  }
  .ink-flow-art > .flow-conversation-label::before {
    content: none;
  }
  .ink-flow-art > .flow-conversation-label::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent,
      #b58b55 20%,
      #dfb87d 50%,
      #b58b55 80%,
      transparent
    );
  }
  .flow-chat-label {
    grid-area: chatlabel;
  }
  .flow-results-label {
    grid-area: results;
  }
  .flow-messages {
    grid-area: chat;
    position: relative;
    inset: auto;
    width: 100%;
    height: 330px;
    overflow: hidden;
    margin: 0;
  }
  .flow-messages .flow-message,
  .flow-messages .flow-message[data-side="right"] {
    max-width: 92%;
    min-width: 80px;
    padding: 14px 22px 21px;
    aspect-ratio: auto;
  }
  .flow-message .flow-message-text {
    font-size: 15px;
    line-height: 1.4;
  }
  .flow-message-composer {
    grid-area: composer;
    position: relative;
    inset: auto;
    width: 100%;
    height: 56px;
    margin: 0;
  }
  .flow-input-note {
    grid-area: note;
    position: static;
    inset: auto;
    width: 100%;
    margin: -9px 0 0;
    font-size: 12px;
  }
  .flow-lorbo {
    grid-area: character;
    position: static;
    inset: auto;
    align-self: start;
    justify-self: center;
    width: min(310px, 88%);
    height: auto;
    z-index: 3;
  }
  .ink-flow .flow-sitting-log {
    grid-area: character;
    position: static;
    inset: auto;
    align-self: end;
    justify-self: center;
    width: 100%;
    max-width: 380px;
    height: auto;
    transform: none;
    z-index: 2;
  }
  .ink-flow .flow-energy {
    grid-area: character;
    position: static;
    inset: auto;
    align-self: center;
    justify-self: center;
    width: 100%;
    height: 340px;
    z-index: 0;
  }
  .flow-manuscripts {
    grid-area: manuscripts;
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 8px 0 16px;
  }
  .flow-manuscripts figure,
  .flow-manuscripts .flow-book {
    height: auto;
    min-height: 0;
    width: 100%;
    margin: 0;
    display: block;
  }
  .flow-manuscript-sheet {
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 1122 / 1402;
  }
  .flow-manuscripts .flow-manuscript-sheet img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
  .flow-access-button {
    grid-area: access;
    position: relative;
    inset: auto;
    transform: none;
    justify-self: center;
    width: 280px;
    max-width: 100%;
    height: 70px;
    font-size: 15px;
    margin: 0;
  }
  .alpha-ending {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100%;
    margin: 70px auto 0;
    padding: 0 24px;
  }
  .alpha-access {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
    max-width: 580px;
    padding: 112px 0 35px;
    margin: 0 auto;
    align-items: start;
    scroll-margin-top: 24px;
  }
  .alpha-access > .alpha-ribbon {
    height: 86px;
    top: 0 !important;
    max-width: calc(100% + 20px);
  }
  .alpha-copy {
    max-width: none;
    padding: 0 8px;
  }
  .alpha-copy h2 {
    font-size: 42px;
    line-height: 1.1;
  }
  .alpha-lead,
  .alpha-promise-intro,
  .alpha-promises,
  .alpha-privacy {
    font-size: 16px;
    line-height: 1.65;
  }
  .alpha-copy h3 {
    font-size: 28px;
    line-height: 1.2;
  }
  .alpha-access .alpha-timing {
    gap: 18px;
    margin: 26px 0 32px;
  }
  .alpha-phase {
    gap: 8px;
  }
  .alpha-phase img {
    width: 48px;
    height: 48px;
  }
  .alpha-phase-copy strong {
    font-size: 14px;
  }
  .alpha-phase-copy span {
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
  }
  .alpha-access .alpha-form {
    width: 100%;
    padding: 48px 30px 54px;
  }
  body .alpha-access .alpha-form h3 {
    font-size: 32px;
    margin-bottom: 28px;
  }
  .alpha-access .alpha-field input,
  .sample-character-field input {
    font-size: 16px;
  }
  .alpha-access .alpha-device-options span {
    font-size: 14px;
    min-height: 54px;
    padding: 12px 24px 12px 12px;
  }
  .alpha-access .alpha-adult {
    font-size: 14px;
    line-height: 1.6;
  }
  body .alpha-submit.ink-action {
    height: 78px;
    min-height: 78px;
    font-size: 14px;
    padding-inline: 24px;
  }
  .alpha-sky-moon {
    display: none !important;
  }
  .alpha-ending::after {
    height: 360px;
    aspect-ratio: auto;
    background-size: auto 360px;
  }
  .alpha-grass-motion {
    display: none;
  }
  .lorbo-footer {
    width: 100%;
    max-width: 580px;
    min-height: 260px;
    margin: 0 auto;
    padding: 40px 0 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .footer-identity {
    align-self: center;
  }
  .footer-right,
  .footer-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    margin: 0;
    text-align: center;
  }
  .lorbo-footer nav {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 0;
  }
  .lorbo-footer small {
    font-size: 12px;
  }
  .lorbo-footer .footer-origin {
    font-size: 16px;
    white-space: normal;
    margin: 0;
  }
  body .ink-action {
    max-width: 100%;
    font-size: 14px;
  }
  /* A narrow-screen reading surface uses the same story, map, and controls in a scrollable sheet. */
  dialog.sample-book-scene[open] {
    position: fixed !important;
    inset: 12px !important;
    width: calc(100% - 24px) !important;
    max-width: 720px !important;
    height: calc(100dvh - 24px) !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: #f5e7d0;
    color: #35271d;
    border: 1px solid #a78255;
    border-radius: 8px;
    scrollbar-gutter: auto;
  }
  .sample-book-scene .sample-book-media {
    position: relative !important;
    inset: auto !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100%;
    transform: none !important;
    visibility: visible !important;
    padding: 64px 26px 108px;
    pointer-events: auto;
  }
  .sample-book-scene .sample-book-video,
  .sample-book-scene .sample-book-still {
    display: none !important;
  }
  .sample-book-intro {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    transform: none;
  }
  .sample-book-intro h2 {
    font-size: 34px;
  }
  .sample-book-intro p {
    font-size: 17px;
    line-height: 1.6;
  }
  .sample-book-intro .sample-story-genre {
    font-size: 22px;
  }
  .sample-book-intro .sample-character-intro {
    font-size: 14px;
  }
  .sample-character-field input {
    height: 52px;
  }
  .sample-gender-options {
    gap: 6px;
  }
  .sample-gender-options span {
    font-size: 12px;
    min-height: 48px;
    padding: 10px 4px;
  }
  .sample-gender-options span::after {
    left: 11px;
  }
  .sample-gender-options input:checked + span .sample-pronoun-label {
    transform: translateX(7px);
  }
  body .sample-start.ink-action {
    font-size: 13px;
    width: 100%;
    height: 76px;
    min-height: 76px;
    padding-inline: 20px;
  }
  .sample-book-pages {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    display: block;
    transform: none;
  }
  .sample-book-pages article {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    width: 100%;
  }
  .sample-book-pages article + article {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #85634155;
  }
  .sample-book-pages h3 {
    font-size: 30px;
    line-height: 1.2;
    margin: 4px 0 28px;
  }
  .sample-book-pages .sample-page-text {
    flex: none;
    min-height: 0;
    height: clamp(330px, 72svh, 580px);
    font-size: 17px;
    line-height: 1.6;
    text-align: left;
    hyphens: auto;
    overflow: hidden;
  }
  .sample-book-pages .sample-page-text p {
    margin: 0;
    orphans: 2;
    widows: 2;
  }
  .sample-book-pages .sample-page-text p + p {
    text-indent: 1.25em;
  }
  .sample-page-map {
    display: flex;
    flex: none;
    width: 100%;
    height: clamp(330px, 72svh, 580px);
    margin: 0;
  }
  .sample-page-map img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none;
  }
  .sample-ending-page .sample-page-ending {
    flex: none;
    margin: 0;
    min-height: 0;
    padding: 20px 0;
  }
  .sample-ending-content {
    width: 100%;
    margin: 0;
    padding: 22px 16px 18px;
  }
  .sample-book-pages .sample-page-ending h4 {
    font-size: 22px;
  }
  .sample-book-pages .sample-page-ending p {
    font-size: 17px;
    line-height: 1.4;
  }
  body .sample-page-ending .sample-request-access.ink-action {
    min-height: 68px;
    height: 68px;
    font-size: 15px;
    padding-inline: 12px;
  }
  .sample-book-scene .sample-book-close {
    position: fixed !important;
    left: auto !important;
    right: max(22px, calc((100vw - 720px) / 2 + 10px)) !important;
    top: 22px !important;
    width: 44px;
    height: 44px;
    padding: 11px;
    z-index: 30;
  }
  .sample-book-scene .sample-book-controls {
    position: fixed;
    inset: auto 12px 12px;
    bottom: 12px;
    width: calc(100% - 24px);
    max-width: 720px;
    margin: 0 auto;
    min-height: 78px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 10px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    background: #ead8ba;
    border-top: 1px solid #b0916b;
    z-index: 20;
    pointer-events: auto;
  }
  .sample-book-scene .sample-book-previous,
  .sample-book-scene .sample-book-next {
    position: static;
    inset: auto;
    width: 46px;
    height: 46px;
    padding: 11px;
    margin: 0;
  }
  .sample-book-previous {
    grid-column: 1;
  }
  .sample-book-next {
    grid-column: 3;
  }
  .sample-book-pips {
    grid-column: 2;
    grid-row: 1;
    position: static;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    transform: none;
  }
  .sample-book-controls .sample-book-pip {
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
  }
}
@media (max-width: 500px) {
  .parchment-points {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .parchment-track .parchment-section {
    padding-inline: 27px;
  }
  .reader-track .reader-preview {
    padding-inline: 20px;
  }
  .reader-preview .reader-intro {
    padding-inline: 26px;
  }
  .reader-preview .reader-visualize {
    font-size: 12px;
    padding-inline: 14px;
  }
  .alpha-ending {
    padding-inline: 18px;
  }
  .alpha-access .alpha-form {
    padding-inline: 28px;
  }
}

@media (max-width: 1000px) {
  .scene-top {
    padding-top: 88vw;
  }
  .scene-top .glass-title {
    top: 70px;
  }
  .scene-top .lorbo.quill-placement {
    left: 23%;
    top: 38vw;
    width: 54%;
  }
  .site-frame-top .header-actions .motion-control {
    scale: 0.85;
    transform-origin: 100% 0;
  }
}