/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   Tablet keeps the composition and loses the depth.
   Mobile is a different reading of the same story: the book is a
   vertical object, the spreads become single columns, and the
   index becomes a two-step list instead of a three-column desk.
   ============================================================ */

/* ---------- TABLET ---------- */
@media (max-width: 1100px) {
  :root { --rail-w: 0px; }
  .escape__inner { padding: clamp(58px, 8vh, 92px) var(--gutter) clamp(52px, 7vh, 82px); }

  .rail { display: none; }

  /* the same composition, told in less room */
  .firm__statement { font-size: var(--t-display-2); }
  .firm__col p, .firm__mark dd, .firm__lede { font-size: var(--t-small); }
  .firm__lede { line-height: 1.55; }
  .firm__col p { line-height: 1.6; }
  .firm__mark { padding: 9px 0; }

  .firm { grid-template-columns: minmax(0, 1fr); row-gap: clamp(18px, 3vh, 34px); }
  .firm__statement, .firm__side { grid-column: 1; }
  .firm__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 34px); }

  /* the index page: the tabs move above it, the note below the entries */
  .index { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .index__cats { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; padding-top: 0; }
  .index__cat { width: auto; }
  .index__cat .rn { transform: none; border-radius: 4px; }
  .index__page { grid-row: 3; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  /* Phase 5.7: the note as one compact strip under the entries — the
     count, then the title and two lines of its note — so the entries keep
     the page (it took a quarter of the screen and left two rows visible) */
  .index__folio {
    border-left: 0; border-top: 1px solid var(--ink-rule); padding: 10px 0 0;
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 2px;
    align-items: center; max-height: none;
  }
  .index__folio .ref, .index__folio .rg, .index__folio .hint { display: none; }
  .index__folio .index__count { grid-row: 1 / span 2; border: 0; padding: 0; }
  .index__folio .index__count .meta { display: none; }
  .index__folio .ti { font-size: 1.1rem; }
  .index__folio .de {
    font-size: 0.92rem; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  .presence { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .presence__lead { grid-column: 1 / -1; max-width: 52ch; }
  .presence__globe { grid-column: 1; }
  .presence__places { grid-column: 2; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 720px) {
  .escape__inner {
    /* The foot clears the folio mark, which is fixed at the bottom-left
       of the window: a chapter that ran to the bottom of its box was
       putting its last line under it. The chapter scrolls itself here,
       so the extra foot costs nothing. */
    padding: clamp(66px, 9vh, 96px) var(--gutter) clamp(112px, 15vh, 152px);
    /* `safe` matters. A chapter whose content is taller than the phone
       screen overflows a plain `center` in BOTH directions, which puts
       the chapter mark on top of the masthead. `safe center` falls back
       to start in exactly that case. */
    align-content: safe center;
  }

  /* A chapter can be taller than a phone screen — Chapter I carries a
     headline, a lede and three statements, and no amount of tightening
     fits all of that in 844px. The chapter is a fixed layer, so anything
     past the bottom edge is simply unreachable.

     So on a phone the live chapter reads by scrolling ITSELF first, and
     releases the page once it reaches its end. Scroll chaining is left
     on deliberately: the story continues where the chapter stops. It
     needs no new ticker and no new state — the page scroll is still the
     one source of truth for where you are in the volume. */
  .escape.is-live .escape__inner {
    overflow-y: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .escape.is-live .escape__inner::-webkit-scrollbar { display: none; }
  /* and it fades out at the foot rather than being cut off by the window
     edge, so it reads as a column that continues */
  .escape.is-live .escape__inner {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 46px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 46px), transparent 100%);
  }

  /* The folio mark is fixed to the bottom-left of the WINDOW while the
     chapter scrolls underneath it, so no amount of padding stops a long
     chapter putting a line of type under it. On a phone it is also
     saying what the masthead already says. It stands down while a
     chapter has the screen; the volume's ledge carries the relationship
     to the book instead.

     Driven by a class the app sets at chapter boundaries, not by
     `:has()`. A layout rule should not depend on selector support. */
  .chapter-live .folio-mark {
    opacity: 0;
    transition: opacity var(--dur-ui) var(--ease-editorial);
  }

  /* The colophon is the one chapter that sits at the bottom: the volume
     has come back to the front and the imprint settles under it. The
     rule above would centre it straight onto the cover. */
  .escape__inner.coda { align-content: end; }

  /* A division can hold more entries than a phone screen has room for.
     Clipping the last row mid-word is worse than letting the list
     scroll, and a printed index continues over the page anyway. */
  .index__scroll { overscroll-behavior: contain; scrollbar-width: none; }
  .index__scroll::-webkit-scrollbar { display: none; }

  .masthead { padding: 14px var(--gutter); }
  .masthead__now .t { display: none; }
  .thread { right: 10px; top: 26vh; bottom: 26vh; }
  .folio-mark { font-size: var(--t-micro); }

  /* Chapter I */
  .firm { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .firm__statement { font-size: var(--t-display-2); max-width: 100%; }
  /* All three columns stay. A phone screen that shows Our Mission and
     half of Our Values, with Our Promise unreachable below the fold, is
     losing content — the chapter is a fixed layer, so whatever runs past
     the bottom cannot be scrolled to. The ornamental numerals go instead;
     the italic heading already names each one. */
  .firm__cols { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 12px; }
  .firm__col { padding-top: 10px; }
  .firm__col h3 { margin-bottom: 0.4em; }
  .firm__col p { line-height: 1.56; }
  .firm__col .no { display: none; }
  .firm__mark { grid-template-columns: 9ch 1fr; }
  .firm__marks { margin-top: 2px; }
  .firm__mark { padding: 7px 0; }

  /* Chapter II — portrait above, text below */
  /* `safe`: a portrait and its text are taller than a phone screen, and a
     plain `center` pushed the portrait up under the masthead (Phase 5.9) */
  .person, .person--flip { grid-template-columns: minmax(0, 1fr); row-gap: 20px; align-content: safe center; }
  /* An explicit height, not an aspect ratio: inside a grid row an
     aspect-ratio with an indefinite height sizes the row from nothing
     and the portrait then overflows onto the text beneath it. */
  .person--flip .person__stage,
  .person__stage { grid-column: 1; grid-row: 1; }
  .person__frame {
    aspect-ratio: auto;
    height: clamp(190px, 31vh, 300px);
    max-height: none;
  }
  /* the niche is landscape here: the sitter larger, cropped at the chest */
  .person__img { top: 9%; height: 150%; object-position: 50% 0; }
  .person__refl { display: none; }
  .person__surround { --pf: 12px; }
  .person--flip .person__text,
  .person__text { grid-column: 1; grid-row: 2; }
  .person__name { font-size: var(--t-display-3); }
  .person__pull { font-size: 1.02rem; }
  .person__focus li:nth-child(n + 5) { display: none; }
  .person__focus { gap: 8px 14px; }
  .person__body { line-height: 1.6; }

  /* Chapter III — categories scroll across, entries beneath */
  .index { row-gap: 12px; }
  .index__cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .index__cats::-webkit-scrollbar { display: none; }
  .index__cat { flex: 0 0 auto; }
  .index__cat .rn { width: 32px; }
  .index__cat .nm { white-space: nowrap; font-size: 0.9rem; }
  .index__page { padding: 16px 16px 14px; row-gap: 10px; }
  .index__phead .r { display: none; }
  .index__list { columns: 1; }
  .index__dh .rn { font-size: 1.5rem; }
  .index__dh .nm { font-size: 1.25rem; }
  .index__folio .ti { font-size: 1rem; }
  .index__count b { font-size: 2rem; }

  /* Chapter IV */
  .presence { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 14px; }
  .presence__lead, .presence__globe, .presence__places { grid-column: 1; }
  /* `min-height` from the base rule is 46vh and beats a smaller `height`,
     so the globe stayed 388px on a 390px-wide phone and pushed the
     address block off the bottom of the screen. */
  .presence__globe { height: 30vh; min-height: 0; }
  .presence__place { padding: 9px 0; }
  .presence__place .nm { font-size: 1.05rem; }

  /* Chapter V */
  /* The monument word is set character by character so it can be lit
     one letter at a time, which means `white-space: normal` lets it
     break BETWEEN characters — at 390px DILIGENCE came out as DILIGENC
     and a stranded E. It stays on one line and is sized to the longest
     word in the set (nine characters) at the narrowest phone instead. */
  .commit__word {
    font-size: clamp(2.1rem, 13.2vw, 4.4rem);
    white-space: nowrap;
  }
  .commit__desc { font-size: 0.95rem; }

  /* Chapter VI */
  .closing { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .closing__lead, .closing__side { grid-column: 1; }
  .closing__say { font-size: var(--t-display-2); }
  .closing__act { grid-template-columns: 6ch minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px 14px 24px; }
  .closing__seal { width: 128px; }
  .closing__places { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .closing__places__line { display: none; }

  .ghostnum { font-size: 30rem; opacity: 0.02; }
}

/* ---------- SHORT VIEWPORTS ---------- */
@media (max-height: 640px) and (min-width: 721px) {
  .firm__cols { display: none; }
  .person__focus { display: none; }
  .escape__inner { padding-top: 64px; padding-bottom: 52px; }
}

/* ---------- PRINT ----------
   The composition cannot be printed; the written version can, and
   document.css restores it. Everything else is taken off the page. */
@media print {
  .stage, .chrome, .cursor, .veil, .boot, .blackout, .track { display: none !important; }
  body { background: #fff; color: #000; overflow: visible; }
}


/* ---------- Phase 5.6: the contact desk ---------- */
@media (max-width: 1100px) {
  .closing__desk { gap: 28px; padding: 26px 26px 22px; }
  .closing__desk__t { font-size: 1.9rem; }
}
@media (max-width: 900px) {
  .closing__desk { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .closing__desk__direct { flex-direction: row; flex-wrap: wrap; gap: 6px 22px; }
}
@media (max-width: 720px) {
  /* the chapter scrolls itself on a phone; the desk is its last block */
  .closing__desk {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    grid-column: 1;
    max-height: none;
    overflow: visible;
    padding: 24px 18px 22px;
    will-change: auto;
  }
  .closing__desk::before { transform: scaleX(1); opacity: 1; }
  .cf__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cf__send { width: 100%; justify-content: center; }
}