/* ==========================================================================
   HOME — page-specific layout
   ========================================================================== */

/* ---- Opening spread ----
   Title block, thesis, figure. The figure is drawn on the paper: no card, no
   border, no shadow — the whole point is that there is nothing between the
   drawing and the page. */

.hero { padding-block: var(--space-6) var(--space-11); }

.hero__title-block { margin-bottom: var(--space-9); }

.hero__text { container-type: inline-size; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-8) var(--space-10);
  align-items: start;
}

/* ---- The thesis ---- */

/* Ramps faster than the global display step so Bodoni's hairlines are not
   pushed against the page margin on a phone. */
.hero__thesis {
  font-size: clamp(2.1rem, 1.1rem + 4.2vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  max-width: 16ch;
}

/* The written line, now its own element beneath the lede rather than part of
   the heading. Same rules as before: it must never wrap, so it is sized in
   container units against the text column and re-fits itself at every width.
   Measured, not guessed: this sentence sets 14.26x its own font-size in this
   face — half again as long as the line it replaced — so 100/14.26 = 7.0cqw
   would fill the column exactly. 6.4cqw leaves ~9% for the fallback face
   during the font swap. Remeasure if the wording or the pen changes. */
.hero__pen {
  margin-top: var(--space-5);
  max-width: none;
  font-family: var(--font-script);
  font-size: min(6.4cqw, 3.4rem);
  line-height: 1.25;
  white-space: nowrap;
  color: var(--color-plum);
}

/* A hand-drawn underline pulled under the word on load. inline-block so the
   stroke has the word's box to measure against; non-scaling-stroke so the line
   keeps one pen width however far the box stretches.

   It deliberately overshoots the text at both ends. A stroke that stops exactly
   at the glyph edges is geometrically correct and looks tentative — a real pen
   runs past the word at both ends, and without that overshoot the line reads as
   too short no matter how accurate it is. */
.mark-underline {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

.mark-underline__stroke {
  position: absolute;
  left: -0.24em;
  width: calc(100% + 0.48em);
  /* base.css caps every svg at max-width:100%, which silently clamped the
     overshoot back to the word's exact width. */
  max-width: none;
  top: 100%;
  height: 0.2em;
  overflow: visible;
  fill: none;
  stroke: var(--color-plum);
  stroke-linecap: round;
}

.mark-underline__stroke path {
  stroke-width: 2.6;
  vector-effect: non-scaling-stroke;
}

/* ---- Lede ----
   Leading is set to the ruling pitch, so the paragraph's lines run at the
   same rhythm as the paper underneath it. */
.hero__lede {
  margin-top: var(--space-6);
  max-width: 46ch;
  font-size: clamp(1.06rem, 1rem + 0.28vw, 1.19rem);
  line-height: var(--rule-pitch);
  color: var(--color-ink-soft);
}

/* Credentials close the opening spread, under the call to action. Ruled off
   above so they read as a footnote to the spread rather than a third
   paragraph of it. */
.hero__creds {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-hairline);
}

/* Two columns, one name per cell. As a wrapping flex row these seven names
   ran to a ragged four-line block with no shared edge — the "all over the
   place" was the rag, not the spacing. A grid gives every name the same left
   edge and the same row rhythm. */
.hero__creds .credentials__list {
  display: grid;
  /* Two columns only where two columns actually fit. The floor is measured,
     not chosen: the longest credential sets at 271px, so 17rem (272px) is the
     narrowest column that will not wrap it — and a wrapped cell beside an
     unwrapped one is the rag this was meant to fix. Where the text column is
     squeezed the grid drops to one column, which always has room. Never a
     partial fit. Re-measure if a longer credential lands. */
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-3) var(--space-5);
  /* Every name sets on one line: a two-line cell beside a one-line cell is
     what broke the row rhythm and made this read as scattered. The binding
     constraint is "GIMI MCI Management Consulting Analyst" — 38 monospaced
     characters. Tracking is dropped rather than shrinking the type further,
     because the letter-spacing alone cost 26px of the 297px it needed and the
     type was already at 0.72rem. Re-measure if a longer credential lands. */
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--color-ink-soft);
}

@media (max-width: 560px) {
  .hero__creds .credentials__list { gap: var(--space-2); }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-7);
  margin-top: var(--space-8);
}

/* ---- Fig. 01 ---- */

.hero__figure {
  margin: 0;
  max-width: 27rem;
  justify-self: end;
  width: 100%;
}

.figure__label {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-hairline);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.figure__label span:first-child { color: var(--color-ink); }

.hero__figure .draw-figure { width: 100%; height: auto; }

.figure__equation {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-hairline);
  max-width: none;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.figure__equation span { color: var(--color-lavender); padding-inline: 0.15em; }
.figure__equation strong { color: var(--color-plum); font-weight: 400; }

/* ---- Responsive ----
   Notebook principles, not notebook proportions: one column, same paper,
   same ink. The figure keeps its own scale rather than stretching. */

@media (max-width: 1040px) {
  .hero { padding-block: var(--space-5) var(--space-9); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-9); }
  .hero__title-block { margin-bottom: var(--space-7); }
  .hero__thesis { max-width: 24ch; }
  .hero__figure { justify-self: start; max-width: 24rem; }
}

@media (max-width: 560px) {
  .hero__thesis { max-width: none; }
  .hero__figure { max-width: 100%; }
  .hero__actions { gap: var(--space-5); }
}


/* ==========================================================================
   MOVEMENTS
   The homepage is one continuous read, not a directory. Each movement
   answers one question, and no two consecutive ones share a format or a
   density: a passage with a dominant figure, a scan of open questions, a
   numbered list of commitments, five works with evidence, a staggered
   spread, a note index, a quiet close, an invitation.
   ========================================================================== */

.mv { padding-block: var(--space-10); }

/* Pacing. Not a scale — a set of specific decisions. */
.mv--curious  { padding-block: var(--space-9) var(--space-10); }
.mv--problems { padding-block: var(--space-9); }
.mv--prose    { padding-block: var(--space-11) var(--space-10); }
.mv--works    { padding-block: var(--space-9) var(--space-11); }
.mv--notes    { padding-block: var(--space-10) var(--space-11); }
.mv--talk     { padding-block: var(--space-10) var(--space-13); }

/* A hairline between movements: one continuous sheet with ruled divisions,
   not a stack of independent blocks. */
.mv + .mv { border-top: 1px solid var(--color-rule); }

.mv__head {
  font-size: var(--text-xl);
  max-width: 24ch;
  margin-bottom: var(--space-6);
}


/* ---- Affiliations strip ----
   Named institutions, stated plainly and early. Not a logo wall: set in the
   page's own metadata voice so it reads as a record rather than as badges. */

.credentials__label {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.credentials__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-7);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink);
}

/* ---- The numbers ----
   The only figures on the site, so they are allowed to carry weight: plum,
   a size up, and never buried in a sentence. */
.work__proof {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-plum-rule);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
  max-width: 44ch;
  /* One figure per line. These were a single run of text with middots, so the
     line broke wherever it ran out of room — "5 in the" / "pipeline". The three
     figures need 565px and the column is 462px, so they cannot share a line at
     any honest width; stacking them is the fix, and it lets the middots go.
     (Keeping the separators here would have put a "·" at the start of the
     wrapped lines, which is the same defect wearing a different hat.) */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* A figure never breaks across lines. */
.work__proof span { white-space: nowrap; }

.work__proof strong {
  font-weight: 400;
  font-size: 1.25em;
  color: var(--color-plum);
}

/* ---- The most recent note, given room ----
   The cover is filed to the left like a plate pasted beside the entry, the
   text set alongside it. The cover is not load-bearing: delete the plate and
   the :has() rule below drops the block back to the single text column it
   shipped with, at its original measure. */

.note-lead {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--space-6) var(--space-9);
  align-items: start;
  max-width: 60rem;
}

.note-lead:not(:has(.note-lead__plate)) {
  display: block;
  max-width: 44rem;
}

.note-lead__plate { margin: 0; }

.note-lead__cover { display: block; }

/* Square, because the card was drawn square. The hairline keeps the pale
   paper edge of the card from bleeding into the page's own paper. */
.note-lead__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid var(--color-hairline);
}

.note-lead__title {
  font-size: var(--text-lg);
  max-width: 26ch;
  margin: var(--space-3) 0 var(--space-4);
}

.note-lead__title a { text-decoration: none; }
.note-lead__title a:hover { color: var(--color-plum); }

.note-lead .prose { margin-bottom: var(--space-5); }

/* Below the two-column threshold the cover leads and the entry follows it,
   which is the order the markup is already in. */
@media (max-width: 900px) {
  .note-lead {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  .note-lead__plate { max-width: 20rem; }
}

/* ---- Theme glyph ----
   Drawn marks standing in for the emoji in the brief: same pen, same plum,
   same stroke weight as the figures. Sized in ems so a glyph always matches
   the label it sits with, and never needs its own breakpoint. */

.glyph {
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--color-plum);
  overflow: visible;
}


/* ---- Prose ----
   Set at the ruling pitch so the lines of a passage run with the lines of the
   paper. The measure is wider than it would be for a proportional face: a
   monospace sets about 28% wider. */

.prose {
  max-width: 40rem;
  line-height: var(--rule-pitch);
  color: var(--color-ink-soft);
}

.prose + .prose { margin-top: var(--rule-pitch); }

/* One line, said once. This is where the display face belongs. */
.prose--stmt {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--text-md);
  line-height: 1.35;
  color: var(--color-ink);
  max-width: 34ch;
}

.boxed .prose--stmt { margin: 0; }


/* ---- Why this matters ----
   Mirrors the opening spread. There the text leads and the figure sits right;
   here the figure leads. Half-page width is why Fig. 02 uses the tall drawing
   rather than the wide one. */

.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-8) var(--space-10);
  align-items: start;
}

.why__figure { margin: 0; max-width: 24rem; }
.why-figure__svg { width: 100%; height: auto; }

.why__text .prose { max-width: 42ch; }
.why__annot { margin-top: var(--space-7); }

@media (max-width: 900px) {
  .why__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }
  .why__figure { max-width: 22rem; }
}

/* ---- What I'm curious about ----
   Reduced to a mark and a name. The questions were the longest text on the
   page and the section title already says what these are; with them gone the
   glyphs can carry it, so they are set nearly four times larger.

   Five then four, set deliberately rather than left to auto-fit: ten columns
   with every item spanning two, and the sixth item starting at column 2 so
   the short row centres itself under the long one. */

.curious__stamp { margin-top: var(--space-8); }

.curious {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--space-9) var(--space-6);
}

.curious__item { grid-column: span 2; }
.curious__item:nth-child(6) { grid-column: 2 / span 2; }

.curious__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

.curious__item .glyph {
  width: 3.25rem;
  height: 3.25rem;
  stroke-width: 1.2;
}

.curious__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink);
  max-width: 14ch;
}

/* Below the five-across width the deliberate 5/4 break stops meaning
   anything, so the offset is released and the grid just wraps. */
@media (max-width: 900px) {
  .curious { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); }
  .curious__item:nth-child(6) { grid-column: span 2; }
}

/* Nine items divide by three and not by two, so three across holds all the way
   down: 3×3 with no orphan, rather than four rows and a stray. */
@media (max-width: 520px) {
  .curious { gap: var(--space-7) var(--space-3); }
  .curious__label { max-width: none; font-size: 0.68rem; }
}

/* ---- 02 · Problems worth solving ----
   Four cards, two by two, at tarot proportions (1:1.75). The card is not
   costume: a fixed frame means none of the four can out-argue the others by
   simply running longer, which is what the old list let them do. The numeral
   makes them a set rather than a ranking, and the mark gives the eye somewhere
   to land before the sentence.

   Everything inside is centred, because a card is read as an object rather
   than as a column of text. */

.problems {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  max-width: 52rem;
  margin-inline: auto;
}

/* Composed like a card: number at the head, a large mark holding the whole
   upper half, the words settled along the foot. The mark's row is given a
   fixed 46% of the card so the illustration reads as the card's picture
   rather than as an icon above some text. */
.problems__card {
  position: relative;
  display: grid;
  grid-template-rows: auto 30% auto auto;
  justify-items: center;
  gap: var(--space-4);
  aspect-ratio: 1 / 1.75;
  padding: var(--space-6) var(--space-5) var(--space-7);
  border: 1px solid var(--color-plum-rule);
  text-align: center;
}

/* The second rule, inset. Drawn as a box rather than a second border so the
   two lines can sit at different weights — a double border of equal weight
   reads as a mistake. Corner ticks break the inner rule the way a plate mark
   breaks a ruled frame. */
.problems__card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--color-hairline);
  pointer-events: none;
}

/* The four corner ticks, drawn once as a background and placed at each
   corner: two short plum strokes meeting, the way you'd mark a corner by
   hand. */
.problems__card::after {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--color-plum) 0 100%),
    linear-gradient(to bottom, var(--color-plum) 0 100%),
    linear-gradient(to right, var(--color-plum) 0 100%),
    linear-gradient(to bottom, var(--color-plum) 0 100%),
    linear-gradient(to right, var(--color-plum) 0 100%),
    linear-gradient(to bottom, var(--color-plum) 0 100%),
    linear-gradient(to right, var(--color-plum) 0 100%),
    linear-gradient(to bottom, var(--color-plum) 0 100%);
  background-repeat: no-repeat;
  background-size: 11px 1px, 1px 11px, 11px 1px, 1px 11px,
                   11px 1px, 1px 11px, 11px 1px, 1px 11px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

/* Set in the display face rather than the page's mono: a roman numeral in
   Bodoni is the one piece of real card grammar available without inventing
   ornament, and it is the whimsy this section is allowed. */
.problems__numeral {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  color: var(--color-plum);
}

/* The card's picture rather than an icon, but it is still a drawing on paper:
   it fills its row and no more.

   The pen is pinned with non-scaling-stroke instead of being scaled with the
   art. A 24-unit glyph blown up to 280px multiplies its stroke by 11.7, which
   is how the first pass ended up drawing these in a marker; with the stroke
   held in screen space the mark keeps the same 2.6px line as the curiosity
   glyphs at 52px, and stays right at any size. (Safe here — nothing on these
   paths is dashed, which is where non-scaling-stroke bites.) */
.problems__mark {
  align-self: center;
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  fill: none;
  stroke: var(--color-plum);
  stroke-width: 2.6;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The statement carries it. */
.problems__card h3 {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.24;
  max-width: 20ch;
}

/* The explanation is a gloss, not a paragraph: smaller, quieter, and it never
   competes with the line it explains. */
.problems__gloss {
  margin: 0;
  max-width: 34ch;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
}

/* One card per row on a phone. A 1:1.75 card at full phone width would be
   taller than the screen, so the ratio is released and the frame simply wraps
   the content — the card still reads as a card. */
@media (max-width: 720px) {
  .problems { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .problems__card {
    aspect-ratio: auto;
    /* With no ratio there is no card height for a percentage row to resolve
       against, so the mark is given an explicit size instead. */
    grid-template-rows: auto auto auto auto;
    max-width: 24rem;
    margin-inline: auto;
    padding: var(--space-6);
  }
  .problems__mark { height: 7rem; }
}

/* ---- 04 · Selected works ----
   Five entries, each carrying its own evidence. The plate alternates sides so
   the run never settles into a template. */

.works { display: flex; flex-direction: column; gap: var(--space-11); }

.work {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-5) var(--space-8);
  align-items: start;
}

/* A work carrying a photograph: plate in the first column, entry in the
   second, annotation beneath the plate. Placed explicitly rather than by
   source order, so a work without a photograph is unaffected — which is what
   keeps a photograph from being load-bearing here. */
.work:has(.work__plate) .work__text  { grid-column: 2; grid-row: 1; }
.work:has(.work__plate) .work__plate { grid-column: 1; grid-row: 1; }

.work__plate { margin: 0; }

.work__plate img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-hairline);
}


.work__name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink);
}

.work__name a { text-decoration-color: var(--color-hairline); text-underline-offset: 4px; }
.work__name a:hover { text-decoration-color: var(--color-plum); }

.work__tagline {
  font-size: var(--text-lg);
  max-width: 24ch;
  margin-bottom: var(--space-4);
}

.work__text .prose { max-width: 44ch; }

.work__themes { margin-top: var(--space-5); }

.work__annot { grid-column: 2; padding-top: var(--space-2); }
.work:nth-child(even) .work__annot { grid-column: 1; }

@media (max-width: 860px) {
  .work { grid-template-columns: minmax(0, 1fr); }
  .work:has(.work__plate) .work__text,
  .work:has(.work__plate) .work__plate { grid-column: 1; grid-row: auto; }
  .work__annot,
  .work:nth-child(even) .work__annot { grid-column: 1; }
  .works { gap: var(--space-10); }
}


.notes__soon {
  max-width: 44rem;
  line-height: var(--rule-pitch);
  color: var(--color-ink-soft);
}

/* ---- 05 · Field notes ----
   Where the work happens and what gets written there, merged: every note is a
   place, so two sections were saying the same thing twice. Staggered widths so
   the run reads as a spread rather than a row of equal tiles. */

.notes__intro { margin-bottom: var(--space-8); }

.notes__intro { margin-bottom: var(--space-10); }

.notes {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-9);
  align-items: start;
}

.note { position: relative; padding-left: var(--space-6); }
.note:nth-child(1) { grid-column: 1 / span 5; }
.note:nth-child(2) { grid-column: 7 / span 4; margin-top: var(--space-8); }
.note:nth-child(3) { grid-column: 2 / span 4; }
.note:nth-child(4) { grid-column: 7 / span 5; margin-top: var(--space-6); }

.note__no {
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-ink-faint);
}

.note .plate { margin-bottom: var(--space-4); }

.note__title {
  font-size: var(--text-md);
  margin: var(--space-2) 0 var(--space-2);
}

.note__title a { text-decoration: none; }
.note__title a:hover { color: var(--color-plum); }

.note__take {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
}

@media (max-width: 820px) {
  .notes { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); }
  .note:nth-child(1), .note:nth-child(2),
  .note:nth-child(3), .note:nth-child(4) { grid-column: 1; margin-top: 0; }
}


/* ---- 06 · Let's talk ----
   One invitation, one action, nothing competing. The page ends on an offer
   rather than on a sitemap. */

.talk { max-width: 44rem; }

.talk__head {
  font-size: var(--text-2xl);
  margin-top: var(--space-4);
}

.talk__body { margin-top: var(--space-5); max-width: 44ch; }

.talk__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-7);
  margin-top: var(--space-8);
}