/* ─────────────────────────────────────────────────────────────────────
   responsive.css
   Breakpoint overrides. Three steps: desktop default → tablet → mobile.
   See design-system-v3.md §"Spacing" (mobile statement halved, mobile
   paragraphs at 0, inline run-in labels) and §"The reading experience".
   ───────────────────────────────────────────────────────────────────── */

/* ─── Tablet: 768–1024px ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .container,
  .experience-inner,
  .connect__inner { padding-inline: var(--pad-x-tablet); }

  .reading { column-gap: var(--s-4); --sidebar-w: clamp(14.5rem, 24vw, 16.5rem); }

  /* Sidebar labels stay clearly larger than the body (the v3 inversion)
     but ease down a step so the longest label still fits the narrower rail. */
  .sidebar-nav__link { font-size: 1.3125rem; }   /* 21px > 19px body */

  .sidebar { top: clamp(var(--s-4), 16vh, 22vh); }
}

/* ─── Mobile: below 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
  .container,
  .experience-inner,
  .connect__inner { padding-inline: var(--pad-x-mobile); }

  /* Statement (P1): the mobile first screen carried too much air, so the
     whitespace is roughly halved (v3.2). The shorter min-height trims the
     centering slack so the logo and statement sit higher and the first
     letter section arrives sooner; padding and gap halve to match. */
  .statement-section {
    min-height: 54svh;
    padding-block: var(--s-2) var(--s-1_5);
    gap: clamp(1rem, 3vh, 1.75rem);
  }

  .statement {
    font-size: clamp(1.85rem, 8.4vw, 2.6rem);
    line-height: 1.08;
    max-width: 16ch;
  }

  .statement__logo { width: clamp(132px, 30vw, 184px); }

  /* The reading shell collapses to a single column on mobile. The short
     end padding keeps the wall close to The Experience. */
  .reading {
    display: block;
    padding-block: var(--s-4) var(--s-2);
  }

  /* The sidebar collapses on mobile. The bracketed run-in section labels
     are the mobile headings. */
  .sidebar { display: none; }

  /* Left-aligned on mobile (Mei, 6/15): the body sets a ragged right edge
     rather than justified. This also tightens the inline section run-in
     ([Angry Ghosts] In college…): justify was stretching the single space
     after the bracketed label into an awkward gap; left-aligned, it reads as
     a normal word-space. No hyphenation (it was only there to keep the
     justified column from opening rivers). The comparator's align axis still
     toggles justify for comparison and now takes effect here too (axes.css). */
  .body-col {
    max-width: none;
    text-align: left;
  }
  /* Connect spans the full column on mobile and sits at the left inset
     (the desktop centering does not apply here; Mei: mobile is fine as is). */
  .connect__pane { max-width: none; margin-inline: 0; }

  /* Body text steps down a notch on mobile (17px), line-height eased up a
     touch so it still reads comfortably. */
  .section p { font-size: 1.0625rem; line-height: 1.6; }

  /* Paragraph spacing restored on mobile (supersedes v3.3 "0 on mobile"). */
  .section + .section { margin-top: var(--s-1); }

  /* Gap ABOVE the active block tightened toward the desktop rhythm (Mei,
     6/29). Only the active block's own top margin is trimmed to the desktop
     value (--s-0_5); the NEXT section keeps its --s-1 top margin, so the
     clearance below the active block (the 6/10 no-overlap fix) is untouched.
     Scoped to .section + .section.is-active so the first section still opens
     flush after the letter heading. Tightened a touch further (Mei, 6/29 #2)
     to 2px, just below the desktop --s-0_5, without going flush. */
  .section + .section.is-active { margin-top: 0.125rem; }

  /* Each section opens with its label inline in the flow, bold and
     bracketed: [Angry Ghosts] In college... The brackets are generated, so
     the markup (and the desktop sidebar) stays plain. */
  .section .section__label {
    display: inline;
    font-size: 1.0625rem;
    line-height: 1.6;
  }
  .section__label::before { content: "["; }
  .section__label::after  { content: "]"; }

  /* All mobile titles read bracketed: the experience title joins [Connect]
     (which carries literal brackets at every breakpoint). */
  .experience-section .inline-title::before { content: "["; }
  .experience-section .inline-title::after  { content: "]"; }

  /* On mobile the inline cat stays, just slightly smaller. */
  .cat-thumb { width: 32px; height: 32px; vertical-align: -9px; }

  /* Active-section highlight on mobile: inline backgrounds hug the text
     (left-aligned, ragged right — Mei likes this feel). The OPAQUE highlight
     token is used so the bands read as one solid colour with no double-alpha
     banding. box-decoration-break:clone gives each wrapped line its own
     padding box; padding-block is set to EXACTLY the half-leading so the
     per-line bands tile edge-to-edge — no paper gap between lines, and no
     overlap eating the descenders (g, y, p, j) of the line above.

       half-leading / font-size = (line-height-ratio − content-area-ratio) / 2
                                 = (1.6 − 21/17) / 2 ≈ 0.182em

     This is purely a function of the line-height (1.6) and the Schibsted
     Grotesk metrics, so it holds at any font-size. If either changes,
     re-measure. The HTML whitespace between the label and the paragraph is
     collapsed (see index.html: </h2><p> with a leading space inside <p>) so
     the word-gap after the bracket is part of the highlighted run. */
  .section.is-active p,
  .section.is-active .section__label {
    background-color: var(--hl-opaque);
    padding-block: 0.1em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* Image wall: smaller thumbnails on mobile (Mei, 6/19 — supersedes the
     6/18 "a bit bigger" direction). Same scattered positions, reduced
     scale. Desktop unchanged. */
  .reading__main .image-wall { margin: var(--s-4) 0 0; }
  .image-wall { height: clamp(180px, 45vw, 230px); }
  .image-wall__item--street   { left: 6%;    top: 4%;  width: 10%;   min-width: 36px; }
  .image-wall__item--flowers  { left: 68%;   top: 0;   width: 13%;   min-width: 44px; }
  .image-wall__item--feet     { left: 27%;   top: 31%; width: 13.5%; min-width: 44px; }
  .image-wall__item--corridor { left: 51%;   top: 74%; width: 12%;   min-width: 40px; }

  /* LOOM band tightens on mobile. */
  .loom-band { padding-block: clamp(2.5rem, 13vw, 72px); }
  .loom-band__img { width: clamp(160px, 52vw, 260px); }

  /* Closing colophon stacks. */
  .page-footer { padding-block: var(--s-3) var(--s-6); }

  /* The newsletter wraps. */
  .newsletter { flex-direction: column; align-items: stretch; }
  .newsletter__submit { border-left: 0; border-top: 1px solid var(--rule); }

  .connect { padding-block: var(--s-6) var(--s-4); }

  /* The right-edge progress line is dropped on mobile. */
  .scroll-progress { display: none; }

  /* Experience section: tighten for mobile (short top, the wall sits just
     above), and stack the three screens. */
  .experience-section { padding-block: var(--s-4) var(--s-6); }
  .experience-showcase {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);                /* 48px between stacked screens */
  }
  .experience-screen { max-width: min(320px, 100%); }
  .reading-screen-wrap { max-width: min(320px, 100%); }

  /* Inline section titles ease down a step at phone width. */
  .inline-title { font-size: 1.375rem; margin-bottom: var(--s-3); }
}

/* ─── Very small: below 380px ────────────────────────────────────── */
@media (max-width: 380px) {
  .statement { font-size: clamp(1.7rem, 11vw, 2.2rem); }
  .container,
  .experience-inner,
  .connect__inner { padding-inline: 12px; }

}

/* ─── Print: keep the artifact readable on paper ─────────────────── */
@media print {
  .sidebar, .scroll-progress, .scroll-prompt, .lightbox, .caret { display: none !important; }
  .reading, .connect { display: block; }
  .section, .section p, .section__label { opacity: 1 !important; transform: none !important; background: none !important; }
  body { background: white; color: black; }
}