/* ─────────────────────────────────────────────────────────────────────
   layout.css
   Page-level layout: container, statement opening (with its scroll-driven
   lede collapse), the reading shell (the sticky sidebar accompanying the
   letter and the image-wall interlude), the continuous letter with its
   active-section focus, then the full-width sections below the shell: The
   experience, the LOOM band, Connect, and the closing colophon.

   See design-system-v3.md §"The reading experience" and §"Type scale".
   ───────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  /* `overflow-x: hidden` would silently make body/html a Y scroll
     container and break `position: sticky` for the sidebar. `clip`
     contains any full-bleed overflow without creating a scroll context. */
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; height: auto; }

/* The horizontal frame. Density is the posture; the air is rationed. */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ─── 1. STATEMENT OPENING ───────────────────────────────────────────
   One viewport tall. Logo + statement centered as a single stack; the
   scroll prompt pinned at the bottom. This is the one moment of real
   whitespace on desktop (halved on mobile, see responsive.css). */
.statement-section {
  /* One viewport tall on load (clean first screen: statement only). The
     centered composition leaves a tall band of dead space below the text;
     that is the "blank stretch" the reader scrolls through before the
     letter. main.js trims it on scroll by feeding --statement-collapse (a
     shrinking spacer, in px), so the letter arrives sooner. At rest the
     value is 0px == 100svh, so the first screen is unchanged. Capped well
     above the content height, so the text never clips. (Disabled on mobile,
     where the statement is already compressed; see responsive.css.) */
  min-height: calc(100svh - var(--statement-collapse, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2.5rem, 7vh, 5rem);
  padding-block: var(--s-6) var(--s-4);
  text-align: center;
  position: relative;
}

/* Watermark, not hero: small and faded. */
.statement__logo {
  width: clamp(168px, 15vw, 232px);
  height: auto;
  opacity: 0.55;
  margin: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.statement {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.2vw, 3.9rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 18ch;
  text-align: center;
  margin: 0;
  text-wrap: balance;
}

/* Pinned absolutely so it never fights the centered stack above. */
.scroll-prompt {
  position: absolute;
  bottom: var(--s-4);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  transition: opacity var(--d-state) var(--ease);
}

.scroll-prompt__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pin);
  display: inline-block;
}

.scroll-prompt[data-faded="true"] {
  opacity: 0;
  pointer-events: none;
}

/* ─── 2. THE READING SHELL ───────────────────────────────────────────
   One grid spanning the letter and the image-wall interlude. The sidebar
   lives in column 1 and is sticky within this parent, so the rail
   accompanies the letter (and the wall) and releases when the shell ends.
   "The experience" and Connect are no longer in this grid; they are
   full-width sections below it, with no sidebar (task 7). The body is
   capped to a measure, so the surplus width on the right is intentional
   editorial air, not an accident; the image wall uses that air. */
.reading {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  column-gap: var(--grid-gap);
  align-items: start;          /* keep the sidebar cell top-aligned for sticky */
  padding-block: var(--s-10) var(--s-4);   /* tight exit: the wall sits close to The Experience */
}

/* Column 2: the letter, then the image-wall interlude, stacked beside the
   sticky rail. */
.reading__main {
  grid-column: 2;
  min-width: 0;                /* allow the column to shrink; long words wrap */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* The sticky left rail. Labels only. For sticky to work, no ancestor of
   the rail may set overflow to anything but visible (verified across this
   file). It sticks within .reading, releasing when the letter region ends. */
.sidebar {
  position: sticky;
  top: clamp(var(--s-6), 22vh, 30vh);
  align-self: start;
  height: fit-content;
  grid-column: 1;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);             /* 8px, tight dense column */
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav__item { margin: 0; }

/* Sidebar label > body: the v3 inversion. Inactive labels recede to the
   same faintness as the unread body; the active label is full ink and
   carries the "you are here" dot, mirroring the active block's pin. */
.sidebar-nav__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--type-label);   /* the v3 inversion, accentuated (batch 4): clearly larger than the 19px body */
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--ink);
  opacity: var(--recede);
  cursor: pointer;
  text-decoration: none;
  padding: 2px 0 2px 22px;     /* room for the active dot */
  white-space: nowrap;
  transition: opacity var(--d-hover) var(--ease),
              transform var(--d-state) var(--ease),
              font-weight var(--d-hover) var(--ease);
}

/* The active dot. Hidden until aria-current, then scaled in. */
.sidebar-nav__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%) scale(0);
  transition: transform 220ms var(--ease);
}

.sidebar-nav__link:hover,
.sidebar-nav__link:focus-visible {
  opacity: 1;
  outline: none;
}

.sidebar-nav__link[aria-current="true"] {
  opacity: 1;
  font-weight: 500;
}

.sidebar-nav__link[aria-current="true"]::before {
  transform: translateY(-50%) scale(1);
}

/* ─── 3. THE CONTINUOUS LETTER, separate paragraphs ──────────────────
   The letter reads as a continuous, scroll-driven column whose five
   sections are now SEPARATE PARAGRAPHS (Mei, 6/13), following the source
   letter's natural divisions: each section begins on its own with a modest
   paragraph gap between them — not the large v2 section whitespace, and no
   headings in the body (the sidebar carries them on desktop; bracketed bold
   run-ins on mobile). Two reading treatments differentiate the active
   section: a marker-style lavender wash on its text (like a highlighter on
   the founder letter), and the inactive-text fade, now locked on as the
   default (the rest of the letter recedes; the active paragraph comes to
   full ink). The comparator's axes.css can still restore the old box / pop
   treatments and the no-fade view for comparison; these defaults are the
   baked direction. */
.body-col {
  display: block;                /* NOT flex: flex would blockify the inline sections */
  max-width: var(--measure);     /* the reading measure (~62ch) */
}

/* The body-column heading is carried by the sidebar; keep it for AT only. */
.body-col > .connect__heading { margin: 0; }

/* Each section is its own paragraph (block), so they read as separate
   paragraphs. The inactive-text fade is baked on here as the default (Mei,
   6/13): every section sits faint at --recede and recedes; the active one
   comes to full ink. (Was a comparator axis, data-fade; axes.css now keeps
   only the no-fade comparison override.) */
.section {
  display: block;
  scroll-margin-top: clamp(var(--s-6), 22vh, 30vh);
  opacity: var(--recede);
  transition: opacity var(--d-state) var(--ease);
}

/* Paragraph gap BETWEEN sections only (never before the first, so the letter
   still opens flush). Modest — a clear paragraph break, not section
   whitespace. */
.section + .section { margin-top: var(--s-0_5); }

.section.is-active { opacity: 1; }

.section p {
  display: inline;               /* inline so the active highlight hugs the text (marker style) */
  margin: 0;
  color: var(--ink);
  font-size: 1.1875rem;          /* 19px */
  line-height: 1.5;
  letter-spacing: -0.005em;
  transition: background-color var(--d-state) var(--ease);
}

/* The active section: the lavender marker highlight painted on the text
   itself (and, on mobile, the inline bracket run-in label), so it hugs the
   glyphs across wrapped lines rather than filling the block rectangle. The
   small vertical padding thickens the band; on non-replaced inlines it
   paints background without moving any layout. */
.section.is-active p,
.section.is-active .section__label {
  background-color: var(--hl);
  padding-block: 0.1em;
}

/* Inline section label: hidden on desktop (sidebar is the heading); on
   mobile it returns inline in the flow as a bold bracketed run-in
   (responsive.css). */
.section__label {
  display: none;
  font-family: var(--font-label);
  font-weight: 700;
  color: var(--ink);
  transition: background-color var(--d-state) var(--ease);
}

/* ─── 3b. IMAGE WALL (interlude between the letter and The experience) ──
   Replaces the old building plate. It breaks out of the reading measure to
   use the column's full width (the editorial air to the right of the body),
   where the four photos scatter. No heading, not a tracked section. The
   scatter itself (absolute item positions, sizes, tilt) lives in
   components.css. */
.reading__main .image-wall {
  width: 100%;
  margin: var(--s-6) 0 0;   /* breath after the letter; no extra air below (the wall hands straight to The Experience) */
}

/* ─── 4. THE EXPERIENCE (full-width, no sidebar, task 7) ─────────────
   Out of the reading grid: a full-width section on plain --paper. Its inner
   container matches the site's max width and gutters. The component styles
   (inline title, the three-up showcase) live in components.css. */
.experience-inner,
.connect__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ─── 5. CONNECT (full-width, centered) ─────────────────────────────
   A full-width section on plain --paper. With the rail gone here, the pane
   is centered horizontally in the open width (Mei, 6/13) rather than
   left-biased with empty space on the right. */
.connect {
  padding-block: var(--s-8) var(--s-6);
  background: var(--paper);
}

.connect__heading {
  /* Visually hidden but available to assistive tech. */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Centered: a snug measure with equal auto margins, so the block sits
   centered in the open width while its internal content stays left-aligned.
   The max-width hugs the newsletter form width (~420px) so the visual center
   of the content aligns with the viewport center. (Mobile spans the full
   column at the left inset; see responsive.css.) */
.connect__pane {
  max-width: 28rem;
  margin-inline: auto;
}

/* ─── 6. LOOM BAND (the visual exhale before Connect, task 8) ────────
   Reverted to a standalone full-bleed --ink band sitting above Connect,
   shorter than the behind-Connect version: centered inverted logo,
   comfortable but not extravagant padding. */
.loom-band {
  background: var(--ink);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-block: clamp(var(--s-6), 8vw, 96px);
  padding-inline: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loom-band__img {
  width: clamp(180px, 22vw, 300px);
  height: auto;
  opacity: 0.92;
}

/* ─── Closing colophon (minimal page footer) ─────────────────────────
   The dramatic dark plate became the band above Connect; the page now
   closes on a quiet text colophon that keeps the attribution. */
.page-footer {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--s-4) var(--pad-x) var(--s-8);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
  color: var(--ink-muted);
}

.page-footer span:first-child { font-style: italic; }

/* ─── Scroll progress indicator (right edge; do not touch) ──────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  right: 0;
  width: 2px;
  height: 100vh;
  background: var(--rule);
  z-index: 50;
  opacity: 0.6;
  pointer-events: none;
}

.scroll-progress__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: var(--accent);
  transition: height 100ms linear;
  will-change: height;
}