/* Homebook beta site.

   HIERARCHY COMES FROM TYPE AND SPACE. Nothing else.

   ONE COLUMN. Everything on this page — every heading, every paragraph, every
   list, all three photographs, the footer rule — starts on the same left line
   and ends on the same right line. Nothing is wider. Nothing is narrower. The
   multi-column blocks divide that column into equal parts and stay inside it.

   That is the whole layout, and it is deliberately the least interesting thing
   about the page. Three previous versions tried to build rhythm out of width:
   an alternating indent (columns 1-7 against 3-9), then a two-edge system with
   a text measure and a wider edge for structural blocks. Measured, the first
   produced four structural left edges and twenty-one distinct right edges. The
   second still gave the page two competing widths, so prose sat 171px short of
   the photographs above it and every text section read as left-heavy inside a
   wider frame. Neither had a dominant column, and a grid you cannot feel is
   not a grid.

   Rhythm is vertical now. Section gaps run 2.4rem to 11rem and that spread is
   the page's entire structural vocabulary — see the rhythm block below, which
   spells out what each band means. Width does not vary at all.

   There is one exception to "nothing is narrower", stated so it stays an
   exception: the numbered steps hang their figures in a left track, so the
   figures sit on the column's left line and the step prose is indented past
   them. Every other line of text on the page starts on the spine.

   THE COLUMN AND THE TYPE ARE ONE DECISION. The column is 42rem because that
   is what sets body copy at ~73 characters — measured, not estimated. The body
   size is 1.35rem for the same reason. Earlier versions of this file claimed a
   66-character measure and were wrong: Source Serif 4 averages 0.424em per
   character in running prose, not the ~0.5em that estimate assumed, so the old
   597px column was running at 79 characters. If you change one of these two
   numbers, recompute the other. Display is capped where it is so the headline
   still sets on two lines inside the column.

   The vocabulary, in full:
     · five type sizes, one weight, one italic that nothing currently uses
     · the display optical cut at Display size only; the text cut everywhere
       below it, so nothing appears to change weight without changing size
     · four list textures, each cut for what it holds. Lists that hold the
       same KIND of thing share one rule — the roads, the trust list and the
       beta notes are all quiet enumerations and are set once, together
     · one accent, ink blue, on links and one button
     · three photographs, one plate size, untreated
     · exactly one rule, above the footer

   Type is self-hosted from this repository. No scripts, and nothing at all is
   fetched from another host — see fonts/ and BOUNDARIES.md. */

/* ---- type, self-hosted ---------------------------------------------------

   Source Serif 4 (SIL OFL 1.1, licence in fonts/). Subset to Latin plus the
   punctuation these pages actually use — em and en dash, curly quotes, the
   arrow, the middot — which is what keeps three faces to 47KB rather than 400.

   The italic is declared and currently unused: there is no <em> on either
   page. A declared-but-unmatched @font-face is never fetched, so it costs
   nothing on the wire, and it means italic is available to copy later without
   a build step. Do not "clean it up" on the assumption that it is dead weight.

   font-synthesis is off. No bold face ships, because the page has no bold; if
   a <strong> ever reappears the browser must not paper over it with a
   smeared synthetic weight — it should look wrong, and be removed. */

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-text-roman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-text-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* A genuine display optical size, not the text cut scaled up: tighter fit,
   finer hairlines, less space inside the counters. It is why the headline can
   be set this large without looking inflated. */
@font-face {
  font-family: "Source Serif 4 Display";
  src: url("fonts/source-serif-4-display.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- ground and ink -------------------------------------------------- */

  /* Manila, not cream. Magazine cream (#F4F1EA) sits at about 36° — warm, but
     orange-warm, and next to it the photographs read as decoration. This is a
     half-step greener and a half-step grayer: the colour of a file folder,
     which is also, not coincidentally, what the page is describing. */
  --paper:      #efece1;

  /* One hue, three values. The secondary tiers are the ink lifted toward the
     ground — 30% and 35% — never a second colour, because two greys at the
     same value read as a mistake and two hues read as a second voice. */
  --ink:        #22201b;   /* 13.8:1 on paper */
  --ink-soft:   #605d56;   /*  5.5:1 — lifted 30% */
  --ink-faint:  #6a6760;   /*  4.8:1 — lifted 35%, still AA for body text */

  --rule:       #dcd7c9;   /* the one rule, above the footer */

  /* One accent, and it earns its place by being the only thing on the page
     that is not the paper or the ink. Deep ink blue: it keeps the link
     affordance the page already had, and on warm paper it reads as ink rather
     than as a brand colour. Oxblood was the more distinctive choice and was
     rejected — it reads funereal on a page that already carries a death.
     Headings are ink, not accent: one accent means one job. */
  --accent:     #24476e;   /*  8.1:1 on paper */

  /* ---- the column ------------------------------------------------------ */
  --column:     42rem;     /* 672px — ~73 characters at Body. See the header. */
  --edge:       1.6rem;    /* minimum air at the viewport edge on small screens */

  /* ---- the five sizes, and no sixth ------------------------------------

     Each one resolves to its maximum at the width where the column stops
     growing, so the scale is fixed wherever the layout is fixed and fluid only
     where the column itself is being squeezed.

     EVERY HEADING SETS ON ONE LINE, and the sizes below are derived from that
     rule rather than chosen and then checked. A heading that wraps is a heading
     whose size is wrong for the measure; it is not a fact about the sentence.

     The binding constraint is the longest heading on the page — "Your household
     runs on things only you know." Measured in the TEXT cut at the tracking
     these headings actually carry, it sets 19.93em, so 672px of column allows
     33.72px and no more. Section is 33.28px, which lands it at 664px with 8px
     of slack.

     SECTION IS TIED TO THE CUT AS WELL AS TO THE COLUMN. It was 35.2px while
     the headings were set in the display cut, which is a narrower fit — 35.2px
     in the text cut overflows and wraps, which is exactly what happened the
     moment the cut changed. If you change the face, the optical size, or the
     tracking on headings, this number moves too.

     Measure it; do not eyeball it. The measurement is a five-line HTML file
     that sets the headings at 100px with white-space: nowrap and reads the ink
     extent off a screenshot — a minute's work, and the alternative is a page
     where one heading in five wraps and the set reads as five unrelated
     decisions rather than one. */
  --display:    clamp(2.4rem,  4.0vw,  3.6rem);   /* 57.6px — h1, diagnosis */
  --section:    clamp(1.6rem,  2.8vw,  2.08rem);  /* 33.28px — every h2, one line */
  --feature:    clamp(1.3rem,  1.9vw,  1.72rem);  /* 27.5px */
  --body:       clamp(1.15rem, 1.5vw,  1.35rem);  /* 21.6px */
  /* Small was 16px, and against 21.6px body that is a 1.35x drop — enough that
     the supporting tiers stopped reading as quiet and started reading as fine
     print. 17px puts the ratio at 1.27, which is still unmistakably secondary
     and no longer asks anyone to lean in. The binding constraint on raising it
     further is the questions grid: six questions must each set on ONE line in a
     half-column cell, and the longest — "Who do I call if the sprinklers stop
     working?" — is the one to measure against. Verified on screen, not
     estimated. */
  --small:      clamp(0.95rem, 1.15vw, 1.0625rem);  /* 17px */

  --serif:  "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino,
            Georgia, "Times New Roman", serif;
  --serif-display: "Source Serif 4 Display", var(--serif);
}

/* Dark is kept and re-derived rather than dropped — decision E in the plan.
   Warm paper has a warm dark counterpart, and the argument for the warm ground
   (that it is what lets the photographs go untreated) holds in both themes or
   it holds in neither. Same hue, inverted value; the ink lifts toward the
   ground by the same 30% and 35%. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #191712;
    --ink:        #e9e5da;   /* 14.2:1 on paper */
    --ink-soft:   #aba79e;   /*  7.5:1 */
    --ink-faint:  #96938a;   /*  5.8:1 */
    --rule:       #2c2921;
    --accent:     #86afd6;   /*  7.8:1 */
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--body);
  line-height: 1.65;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* No max-width anywhere on running text. The column IS the measure — that is
   the point of having one. A cap here would be a second, competing width. */
p { margin: 0 0 1.4em; }
a { color: inherit; }

/* The UA default is `margin: 1em 40px`, and those 40px are enough to knock
   every photograph off the column the whole page is aligned to. */
figure { margin: 0; }

/* ---- the one column -----------------------------------------------------

   Header, main and footer share it, so the wordmark, every heading and the
   footer sit on the same two lines whether or not they are in the same box.

   The outer tracks hold the minimum edge padding on small screens and absorb
   everything else on large ones, which is what centres the column. The column
   track is minmax(0, --column) so it shrinks below its ideal width rather than
   forcing the page sideways. */

.site-head, main, .site-foot {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--edge), 1fr)
    [col-start]  minmax(0, var(--column))
    [col-end]    minmax(var(--edge), 1fr) [full-end];
}

/* Every direct child, with no exceptions and no overrides anywhere below.
   If you find yourself wanting one, that is the decision this file exists to
   prevent. */
.site-head > *, main > *, .site-foot > * { grid-column: col-start / col-end; }

/* ---- vertical rhythm ----------------------------------------------------

   The only thing that varies down the page, and it has to carry every
   structural distinction the layout gave up when width stopped varying.

   It was not carrying them. An earlier version of this comment claimed gaps of
   5-9rem; measured, they ran 6, 6.5, 7, 7.5, 7.5, 7.5, 7.5 — a 1.5rem spread
   across every chapter break on the page. A rhythm that even is not a rhythm,
   it is a default, and it is why the page read as one continuous surface that
   you admire rather than as a sequence of movements that arrive.

   Gaps now run 2.4rem to 11rem, and the number means something in every case:

     TIGHT (2.4-3rem) — two things that are one thing. The hero and the shoes.
       The diagnosis and the empty kitchen. The keys and the section that asks
       you to begin. Read these pairs as single objects; the gap is small
       because there is no joint there to mark.

     ORDINARY (5-6.5rem) — one movement continuing. #what into #how is the
       same movement, so it gets the smallest of these.

     LARGE (7.5rem) — a genuine chapter break.

     THE SILENCE (9.5-11rem) — reserved, and spent once. See below.

   Where a gap is deliberately unlike its neighbours, the reason is in the
   comment beside the rule. If you find yourself evening these out, the page
   loses its chapters and there is nothing else left to provide them. */

.hero          { margin-bottom: 2.4rem; }
.shot-presence { margin-bottom: 6.5rem; }

/* ---- the silence, and the one moment it is spent on ---------------------

   The whole page turns on one sentence, and until now it was set large and
   then handed the same 7.5rem of air as everything around it. Size alone does
   not make a reader stop; on a page where five other things are also set large,
   size only makes them read faster.

   So the page holds its breath here. #why closes, and then there is more empty
   paper than anywhere else — you finish the five roads, and for one screen
   nothing arrives. That absence is the argument: the reader experiences a beat
   of a household with nobody in it before being told about one.

   Then the sentence lands, and the gap under it collapses to 2.5rem — tighter
   than any gap on the page except the hero's. The empty kitchen is not the next
   item after the diagnosis; it is the same thought, and the reader closes the
   distance themselves. Sentence, then the room it describes, with nothing
   between them.

   Then silence again on the far side, so the pair is held in white on both
   sides and nothing crowds in behind it.

   This is spent ONCE. Two silences is no silence. If another section ever wants
   this treatment, the answer is no — that is what makes this one work. */

#why           { margin-bottom: 11rem; }    /* the held breath before it */
.diagnosis     { margin: 0 0 2.5rem; }      /* tight — the room is the sentence */
.shot-absence  { margin-bottom: 9.5rem; }   /* and silence on the far side */

#what          { margin-bottom: 5rem; }     /* what it is and how it works are */
#how           { margin-bottom: 7.5rem; }   /* one movement — hence the 5rem */
#information   { margin-bottom: 6.5rem; }
.shot-handover { margin-bottom: 3rem; }
#begin         { margin-bottom: 7.5rem; }

/* ---- type --------------------------------------------------------------- */

h1, h2, h3, h4 { font-weight: 400; margin: 0; }

/* ---- the two Display elements, set identically --------------------------

   The headline and the diagnosis are the only two things on this page at
   Display size, and they are the only two things that use the display optical
   cut. They now share one rule, because they had drifted to different leading
   (1.0 against 1.06) and different tracking (-0.019 against -0.017) for no
   reason either could have defended. Two elements at the same size in the same
   face should be set the same way; if they are not, the difference reads as a
   wobble rather than as a decision.

   THE DISPLAY CUT IS FOR DISPLAY SIZES ONLY. It has finer hairlines and tighter
   fit by design — that is what an optical size is for — and it was also being
   used on section headings and step figures at 35px, where those finer strokes
   read as a lighter weight sitting next to text-cut prose. That is the "text
   changes weight for no reason" effect: not a second font, the wrong optical
   size for the point size. Below Display, everything is the text cut. */
.hero h1,
.diagnosis {
  font-family: var(--serif-display);
  font-size: var(--display);
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.hero h1 { margin: 0 0 1.6rem; }

/* Feature size, and the one Feature element that is running prose rather than a
   single statement — hence the looser leading. See the Feature note below. */
.lede {
  font-size: var(--feature);
  line-height: 1.38;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}

.hero-actions { margin: 0; }

.hero-begin {
  font-size: var(--body);
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.hero-begin:hover { border-bottom-width: 2px; }

/* Every section heading on the site, both pages, one rule. The privacy page
   used to carry its own copy of this with the same values hand-written a second
   time, which is a divergence waiting to happen rather than a shared decision.
   Text cut, not display — see the note above. */
section > h2,
.prose h2 {
  font-size: var(--section);
  line-height: 1.12;
  letter-spacing: -0.013em;
  margin: 0 0 1.7rem;
  text-wrap: balance;
}

/* Promoted out of subordinate-heading register. Still an h3 — it heads the
   list of five roads — but the same size as the household examples and the
   flat statement above them, because it does the same kind of work. */
/* The one heading that is a full sentence rather than a label — 56 characters,
   which needs 685px against a 672px measure. It misses by 13px, and an
   unbalanced wrap dropped the single word "picture." onto its own line. That
   is the accidental-looking break; the two-line set is not. Balanced, it
   divides evenly and reads as a deliberate pair. Dropping Feature far enough to
   pull it onto one line would have closed the gap between Feature and Body to
   18% and collapsed a five-size scale into four, which is the more expensive
   loss. */
section > h3 {
  font-size: var(--feature);
  line-height: 1.3;
  margin: 3.6rem 0 1.4rem;
  text-wrap: balance;
}

/* "One favor" is the other h3 on the page, and it is a different kind of thing:
   a two-word label introducing a paragraph, not a statement that carries an
   argument. At Feature it claimed the same weight as "The moment it's needed is
   rarely the one people picture.", which is one of the three sentences the page
   is actually built on. Demoted to the same register as the branch labels below
   it, which is what it is. */
#begin > h3 {
  font-size: var(--body);
  color: var(--ink-faint);
  margin: 3rem 0 0.9rem;
}

/* ---- the flat statement -------------------------------------------------

   This used to be the one bold sentence on the page, inside running text. It
   is now Feature size with a field of white on either side — the same emphasis
   by a method that needs no second font weight and does not stop working if a
   second emphasis lands nearby.

   The air above it is larger than the air below, and larger than the gaps
   inside the list it follows. At 3rem it sat one step away from the examples
   and read as a fourth example — same size, same colour, similar gap. It is not
   a fourth example. It is the sentence the three of them were building toward,
   and it needs to arrive after them rather than among them. */
.beat {
  font-size: var(--feature);
  line-height: 1.3;
  margin: 4.4rem 0 3.4rem;
}

/* ---- the diagnosis ------------------------------------------------------

   The turn the whole page rests on. Display size, and — see the rhythm block
   above — genuinely more space before it than anything else on the page gets,
   which is a claim this comment used to make while the number said 7.5rem, the
   same as its neighbours.

   Nothing else at all. No panel, no rule, no quote marks, no attribution — it
   is the page's own sentence, not a quotation, which is why it is a paragraph
   and not a blockquote. It takes the full column like everything else. Its
   emphasis is entirely the air on either side, and deliberately not a size of
   its own: adding a sixth type size for one element would buy less than the
   silence does and would cost the scale its meaning everywhere else.

   Its type is set with the headline, in the shared Display rule above — the
   two are the same size in the same cut and there is no reason for them to be
   set by two rules that can drift apart. */

/* ---- header and footer -------------------------------------------------- */

.site-head { padding-top: 2.6rem; padding-bottom: 3rem; }

.wordmark { text-decoration: none; display: inline-block; line-height: 1.2; }
.wordmark-name { display: block; font-size: var(--body); }

/* No letterspacing. It was a label treatment, and label treatments are what
   the page is trying not to have. */
.wordmark-by { display: block; font-size: var(--small); color: var(--ink-faint); }

/* The one rule on the page. It separates the site from its chrome, which is
   the only division big enough to earn a line — and it spans the column,
   because everything spans the column. */
.site-foot {
  padding-bottom: 4rem;
  font-size: var(--small);
  color: var(--ink-faint);
}
.site-foot::before {
  content: "";
  grid-column: col-start / col-end;
  border-top: 1px solid var(--rule);
  margin-bottom: 2.4rem;
}
.site-foot .wordmark-name { display: inline; font-size: inherit; }
.foot-brand { margin-bottom: 0.6rem; }
.foot-links a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule); }
.foot-links a:hover { color: var(--ink); }
.foot-links span { margin: 0 0.4rem; }

/* The privacy page is one column of running text and nothing else — the same
   column, so the two pages read as one site. */
.prose { padding-top: 3rem; padding-bottom: 6rem; }

/* ---- six list textures --------------------------------------------------

   There used to be one list object with three markers, and that is what made
   everything read at one weight: five roads to needing this and five
   reassurances about data privacy arriving in the same voice, at the same
   size, behind the same bullet.

   Each holds a different kind of thing, so each is cut differently. None has a
   bullet, and every one of them spans the column. */

ul, ol { list-style: none; margin: 0; padding: 0; }

/* Three household examples. Feature size, generous space, dog last: last
   position is emphasis, and it is the one where being wrong hurts something
   alive. */
.examples li {
  font-size: var(--feature);
  line-height: 1.3;
  margin-bottom: 1.1rem;
}
.examples li:last-child { margin-bottom: 0; }

/* ---- the three quiet enumerations, set once -----------------------------

   Five roads to needing this, five commitments about your data, three notes
   about the beta. Restraint is the only respectful setting for the first, and
   the same restraint happens to be right for the other two — anything louder
   on the roads would make the page about dying, and anything louder on the
   trust list would make five plain promises look like a feature matrix.

   They were three separate rules carrying identical declarations, which is not
   a shared decision, it is the same decision written down three times and free
   to drift. The header's "no shared list object" rule is about lists that hold
   different KINDS of thing; these hold the same kind, so they are one texture
   and are now one rule.

   Small, but not small enough to squint at. This is the tier that reads as
   secondary, and it was doing it partly with size, partly with colour and
   partly with 1.8 leading — three signals pushing the same way at once, which
   is what tipped it from secondary into faint. The leading comes back to
   something a reader's eye can track; size and colour still carry the
   distinction on their own. */
.roads li,
.trust li,
.notes li {
  font-size: var(--small);
  color: var(--ink-soft);
  line-height: 1.62;
  margin-bottom: 0.42rem;
}
.roads li:last-child,
.trust li:last-child,
.notes li:last-child { margin-bottom: 0; }

/* Questions: a true two column grid, and the two columns are equal. It used to
   read as neither one thing nor the other — two ragged stacks of different
   lengths. Equal halves of the column, a row gap large enough that a
   two-line question still reads as one item, and both columns top-aligned in
   their row. */
.questions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.25rem;
  row-gap: 1rem;
  margin-bottom: 2.4rem;
}

/* Small, so that all six set on one line inside a half-column cell. At Body the
   longest — "Who do I call if the sprinklers stop working?" — needed 424px
   against a 320px cell and broke, which left one ragged row in a grid whose
   whole job is to be scanned. Six equal one-line items read as a texture; five
   plus a two-line one reads as a list that ran out of room. This also puts the
   questions in the same quiet register as the roads and the trust list, which
   is where a scannable texture belongs. */
.questions li {
  font-size: var(--small);
  color: var(--ink-soft);
  line-height: 1.45;
}

/* The negative positioning line. Small, quiet, and doing more than a paragraph
   of explanation would: it says what Homebook is by saying what it is not. */
.not-this { font-size: var(--small); color: var(--ink-faint); margin: 0; }

/* ---- how it works: three steps, read down, with hanging figures ---------

   This was three columns, and it was the least finished thing on the page. The
   diagnosis of why is arithmetic rather than taste: a third of a 672px column
   is 210px. Everything else followed from that one number. The leads had to
   drop to Body or they broke across three lines. The notes had to drop to Small
   because Body at 210px sets at 22 characters. And so the section that explains
   what the product actually does — the one a reader consults at the exact
   moment they are deciding whether to agree to it — ended up set smaller and
   greyer than the five roads, which are deliberately the quietest thing here.

   A page whose entire argument is that a household deserves room should not
   have its explanation crammed into a third of a column.

   So the steps read down the page at full width, and every constraint that
   forced them quiet is gone: the lead takes Feature and the note takes Body, in
   a 672px measure where a full sentence sets on one or two comfortable lines.

   The count is a hanging figure in a left track. THIS IS THE ONE INDENT ON THE
   PAGE and it is a stated exception to the one-column rule, not a drift from
   it: the numeral itself sits on the page's left line, so the spine is still
   articulated — by the figures rather than by the prose. It is also the oldest
   and plainest way to set a numbered sequence, which is what this is. The
   alternative, a numeral stacked above each step, costs three extra lines of
   vertical space to say something the position already says.

   Still no cards, no borders, no tints, no icons. */

.steps {
  display: grid;
  row-gap: 3.2rem;
  counter-reset: step;
}

/* Explicit placement, because auto-flow puts the note under the figure. */
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.4rem 1fr;
}

/* Section size, not Display. At full width there is finally room for a large
   figure, and a large figure is exactly what would wreck this: three 57px
   numerals down the left edge would out-shout the leads they are numbering and
   turn a sequence into a countdown. Faint, so it counts without speaking. */
/* The figure and the lead sit on ONE baseline, and the browser computes it.
   A hand-tuned line-height was tried and is the wrong instrument: the two are
   different sizes in different optical cuts, so a number that aligns them at
   the desktop maximum drifts apart everywhere the clamps are still fluid.
   Measured, it left the figure riding 18px high. Grid baseline alignment holds
   at every size because it is derived from the fonts rather than guessed. */
.steps li::before {
  content: counter(step);
  grid-column: 1;
  grid-row: 1;
  align-self: baseline;
  font-family: var(--serif-display);
  font-size: var(--section);
  line-height: 1;
  color: var(--ink-faint);
  font-variant-numeric: lining-nums tabular-nums;
}

.step-lead {
  grid-column: 2;
  grid-row: 1;
  align-self: baseline;
  font-size: var(--feature);
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

/* Body, and the only place on the page where supporting prose is set at
   reading size rather than Small. It has earned it: "Answer questions." on its
   own tells a reader nothing about what they are being asked to hand over, and
   this is the sentence that answers that. */
.step-note {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--body);
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0;
}

/* What happens to your information. The ticks are gone: a column of green
   checkmarks is comparison-table furniture, and it made five plain commitments
   look like a feature matrix being won. */
.trust { margin-bottom: 2.4rem; }

/* The one caveat, on its own line with air around it, because it is the most
   honest sentence in the section and was previously the least visible. */
.caveat { margin: 0; }

/* The three beta notes. Same restraint as the roads. */

/* ---- the two ways in ----------------------------------------------------

   No cards, no borders, no tint. Two equal halves of the column — they used to
   be 1.15fr against 1fr, on the argument that the invited route deserved more
   weight, but unequal columns inside a page built on one column read as the
   page losing its nerve at the last section. The invited route still carries
   more weight; it carries it with the only button on the page. */
.branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.5rem;
  margin-top: 3.2rem;
}

.branch h4 { font-size: var(--body); color: var(--ink-faint); margin: 0 0 0.8rem; }
.branch-invited p { margin-bottom: 1.5rem; }
.branch-invited p:last-child { margin-bottom: 0; }

.branch-request { font-size: var(--small); color: var(--ink-soft); line-height: 1.62; }
.branch-request p { margin-bottom: 0.9rem; }
.branch-request p:last-child { margin-bottom: 0; }
.branch-request a { color: var(--accent); }

/* The label takes the ground's value rather than a fixed white, so it inverts
   with the theme instead of being left to chance: 8.1:1 in light and 7.8:1 in
   dark. A hard #fff on the dark accent measured 2.2:1. */
.btn {
  display: inline-block;
  font-size: var(--body);
  text-decoration: none;
  color: var(--paper);
  background: var(--accent);
  padding: 0.68em 1.25em;
  border: 1px solid var(--accent);
}
.btn:hover { background: transparent; color: var(--accent); }

.addr { color: var(--ink); }

/* ---- the photographs ----------------------------------------------------

   ONE PLATE. All three are the same size and span the column, like plates in a
   photo essay rather than three separate editorial gestures. When every frame
   is the same size the eye stops appraising frames and reads the sequence,
   which is where the meaning is: presence, absence, handover — somebody lives
   here; right now nobody is home; someone else has to keep it running.
   Emphasis between them is the space around each one.

   They are untreated. No wash, no saturation grade, no brightness lift, and
   the variables that carried them are gone. Warm paper removed the need: the
   fault the wash was correcting was that the page was cool and the photographs
   were not.

   3:2 is the common denominator rather than an imposed shape — native to
   handover (1600x1067), and the shape absence is now cut to. Only presence
   takes its crop here rather than in the file: it is letterboxed to 1.85:1 so
   it can share the headline's rightward bleed, so cover matches the height and
   trims its sides, which is what the object-position below is for.

   Absence is cut to exactly 3:2 in design/prepare-photos.py, so cover trims
   nothing and its object-position is inert. That is deliberate. It arrived as a
   1.85:1 letterbox of a portrait source, and the two crops compounded: the file
   had already lost the top of the chair before the plate took another 190px off
   each side. A crop you can see in the file is a crop you can judge. */

figure.shot { margin-top: 0; }

.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Hard right: the shoes run from x=380 to x=1960 of 2000 and the crop window
   is 1620 wide, so there is almost no slack before the baby shoes are lost. */
.shot-presence img { object-position: 96% 50%; }

/* Absence and handover carry no object-position rule. Both are 3:2 already, so
   cover has nothing to trim and any value would be a no-op — and a no-op rule
   is a rule a later edit will trust. Presence is the only frame the plate
   actually crops, so it is the only frame that says where. */

/* ---- small screens ------------------------------------------------------

   There is no layout to collapse — the column already shrinks to the viewport
   and every block already spans it. All that changes is that the blocks which
   divide the column into two or three parts stop dividing it, because a third
   of a 340px screen is not a column, and that the vertical gaps come in.

   The type scale needs no breakpoint either: every size is a clamp that has
   already reached its lower bound by the time the column is this narrow. */

@media (max-width: 46rem) {
  .site-head { padding-top: 1.9rem; padding-bottom: 2.4rem; }

  /* The proportions survive the reduction; they are not flattened. The silence
     is still the largest gap by a wide margin and the diagnosis is still tight
     against the kitchen, because on a phone the pair is the one thing that
     genuinely fills a screen on its own. */
  .hero          { margin-bottom: 2rem; }
  .shot-presence { margin-bottom: 4.5rem; }
  #why           { margin-bottom: 7.5rem; }
  .diagnosis     { margin-bottom: 1.8rem; }
  .shot-absence  { margin-bottom: 6.5rem; }
  #what          { margin-bottom: 3.6rem; }
  #how           { margin-bottom: 5rem; }
  #information   { margin-bottom: 4.5rem; }
  .shot-handover { margin-bottom: 2.4rem; }
  #begin         { margin-bottom: 5rem; }

  .beat { margin: 3.4rem 0 2.6rem; }

  .questions { grid-template-columns: 1fr; row-gap: 0.6rem; }
  .branches  { grid-template-columns: 1fr; row-gap: 2.8rem; margin-top: 2.6rem; }

  /* The steps do not collapse — they were never columns to begin with here.
     The figure track narrows because 3.4rem of a 340px screen is an indent the
     prose cannot spare. */
  .steps    { row-gap: 2.6rem; }
  .steps li { grid-template-columns: 2.4rem 1fr; }
}

/* Nothing on this page animates. Stated so a future edit does not add motion
   without noticing that its absence was a decision. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .site-head, .hero-actions { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
}