/* ============================================================================
   legible.ooo — the design system.

   PORTED, NOT INVENTED. The accent scale and its measured contrasts come from
   habitat_ooo/assets/system.css (lines 25 to 36) and palette.css, read
   2026-09-07. The reasoning in those comments travels with the values: --a-1 is
   an EDGE colour and is never text; --a-2 is the links/labels step; --a-3 is
   the deep step for fills.

   TUNED per Patrick's rulings 2026-09-07:
   - "terracotta the reader's path, cyan the instrument's readout." Those are
     the only two colours on the page.
   - The ground is neutral and that IS the design. habitat.ooo is warm the whole
     way through (cream #f3ead6, ink #2a2118). On a neutral ground the terracotta
     becomes the only warm thing on the page, and it arrives on the links, which
     is to say on the reader's path. Kin to habitat.ooo without imitating it.
   - Links are underlined. The link reads slightly LIGHTER than the body text,
     so the underline carries the distinction and not the colour. Deliberate,
     and the same relationship habitat.ooo already has.
   - Mono with body, 17px, leading 1.6 or a touch more. Mono at 16 reads smaller
     than serif at 16 and "large enough to be opinionated" is the brief.
   - --measure stays 40rem, which lands at 63 to 67 characters at a 0.6em mono.

   OPEN, not resolved here: a dark theme. The ruled design is a slight off-white
   page. A dark ground is a second design and has not been ruled, so this sheet
   ships the ruled one only and declares color-scheme:light so the browser does
   not invert controls underneath it.
   ========================================================================= */

:root {
  color-scheme: light;

  /* GROUND — slight off-white, neutral. */
  --ground:    #f7f6f4;
  --raised:    #fffefd;

  /* INK — neutral grey, not habitat.ooo's warm #2a2118.
     Measured on --ground (#f7f6f4), not on a generic off-white:
       --ink-strong  13.1:1
       --ink          7.95:1, which clears AAA for normal text. There is no
                      accessibility reason to darken the body.
     The strong step exists because habitat.ooo already separates heading ink
     from body ink (h1,h2,h3 take --ink; body takes --ink-2) and this sheet was
     not doing it. It carries the headings and the wordmark. Never #000: a true
     black sits outside a system whose ground is warm-neutral, and it gives the
     mark a hard edge nothing else on the page has. */
  --ink-strong:#2b2b2b;
  --ink:       #4c4c4c;
  --ink-soft:  #6e6c69;
  --ink-faint: #918e8a;

  --rule:      #dedbd6;
  --rule-soft: #eceae6;

  /* ACCENT — the reader's path. One hue, three steps, SPLIT BY ROLE.
     Ported verbatim from habitat_ooo/assets/system.css with its measurements. */
  --a-1:  #d24d06;  /* bright — edges only. NEVER text. Measured 4.20 / 4.05 on
                       cream, both under the 4.5 line. */
  --a-2:  #8f4319;  /* mid    — links and labels. 6.5:1 on --ground, and
                       >=5.19 on every habitat.ooo ground. */
  --a-3:  #803c18;  /* deep   — fills. Same value as habitat.ooo's --terra. */

  /* INSTRUMENT — the readout. Ruled value is #33c8ff, the cyan the playback
     cards carry as data-hi on the tools door and the Foundation page.
     At body size on this ground #33c8ff measures ~1.9:1 and is unreadable, so
     it takes the same treatment --a-1 takes: the bright step is an EDGE colour
     and a darker step of the SAME HUE carries text. Both sit at 196 degrees.
     --c-2 measures 5.4:1 on --ground and clears AA for normal text.
     (The 2026-09-08 build brief proposed #0e7fa8 for this slot; measured here
     at 4.32:1, under the line, so it is not used. Corrected, not ignored.) */
  --c-1:  #33c8ff;  /* the ruled cyan — edges, rules, dark grounds. NEVER text
                       on this ground. */
  --c-2:  #0b6d92;  /* the readout step — figures and measured values only. */

  /* TYPE — mono only. JetBrains Mono RULED 2026-09-08, second ruling this date,
     superseding "Plex is right" (made for body text with no wordmark in view).
     The wordmark decided it: two monospaced faces in one identity read as an
     error rather than as hierarchy, so the mark's face and the page's face are
     one. JetBrains also gives its i and l a foot and a tail so they occupy the
     fixed advance, which is why the wordmark does not gap at display size, and
     its taller x-height serves "large enough to be opinionated" from the face
     rather than from the point size.
     Correction on the record: the earlier argument that Plex placed Legible
     beside the Foundation was thinner than stated. habitatfdn is a Fraunces
     site; Plex Mono appears there only on links, buttons and small chrome. */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-2xs: .70rem;   /* eyebrows, labels          */
  --t-xs:  .74rem;   /* meta, footer              */
  --t-sm:  .82rem;   /* small print, table cells  */
  --t-md:  1rem;     /* secondary prose           */
  --t-lg:  1.12rem;  /* section heads             */
  --t-xl:  1.85rem;  /* page head                 */

  --lh-head: 1.25;
  --lh-body: 1.62;

  --s1: .35rem; --s2: .6rem;  --s3: 1rem;   --s4: 1.6rem;
  --s5: 2.4rem; --s6: 3.6rem; --s7: 5.5rem;

  /* THE DOOR'S THREE GAPS. Measured by Patrick on the rendered page and given
     as pixels, so they are held as pixels and named, not rounded onto the rem
     scale above. They are the only off-scale values in the sheet and each one
     is a ruling: 95 below the hero and tag, 65 between paragraphs (both marked
     on his 2026-09-08 annotation), 115 above the hero. The paragraph gap was
     set to 65, then 50, then 40 the same day. */
  --gap-mark: 115px;   /* the wordmark to the headline */
  --gap-hero: 95px;    /* the hero and tag to the body */
  --gap-para: 40px;    /* between each body paragraph  */

  --measure: 40rem;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 17px;
  line-height: var(--lh-body);
  /* Ink density RULED UP 2026-09-08. This is weight, not value: the ruled type
     colour #4c4c4c stays, and the copy carries more ink by moving from Regular
     to Medium. JetBrains Mono at 400 sets light on a pale ground at this size,
     which is what made the page read thin. Headings step to 700 to keep the
     gap they had over the body. */
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: var(--s6) var(--s4) var(--s7); }
@media (max-width: 640px) { .wrap { padding: var(--s5) var(--s3) var(--s6); } }

/* The reader's path. Underlined everywhere, no exceptions. */
a { color: var(--a-2); text-decoration: underline; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--a-1); }
a:focus-visible { outline: 2px solid var(--a-2); outline-offset: 3px; }

h1, h2 { color: var(--ink-strong); font-weight: 700; line-height: var(--lh-head);
         text-wrap: balance; margin: 0; }
h1 { font-size: var(--t-xl); letter-spacing: -.02em; }
h2 { font-size: var(--t-lg); letter-spacing: -.01em; }
p, ul, ol { margin: 0; }

.eyebrow {
  font-size: var(--t-2xs); font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--a-2);
}

/* THE WORDMARK. The word in --ink-strong with the terracotta rule beneath it.
   RULED 2026-09-08: the rule is part of the mark, so it is always there, the
   same device the OG card and the icon carry. That also settles what had been
   an inconsistency: the mark used to gain an underline only on the page where
   it linked home, so it was two marks. Now it is one, and where it happens to
   be a link the rule simply doubles as the link's own underline (which is why
   a.wordmark carries no text-decoration of its own).

   The rule is the one place terracotta appears on something that is not a path.
   That is deliberate and it is the only exception: a fixed identity object, not
   a control. Everywhere else the two-colour rule holds without exception.

   inline-block plus align-self keeps the rule the width of the word rather than
   the width of the column, which is the same alignment the card makes by
   measuring the letters' ink. */
.wordmark {
  display: inline-block; align-self: flex-start;
  font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em;
  color: var(--ink-strong);
  /* The rule sits where a true underline sits. Ruled 2026-09-08: any further
     off and it stops reading as an underline and becomes decoration. The tight
     line-height is what lets it get there, because the font's descent metric
     falls well below the g's actual tail and the border rides on the line box,
     not on the letters. */
  line-height: 1.05;
  border-bottom: 2px solid var(--a-2);
  padding-bottom: .04em;
}
a.wordmark { color: var(--ink-strong); text-decoration: none; }
a.wordmark:hover { border-bottom-color: var(--a-1); }

/* The instrument speaks. Figures and measured values only, never prose. */
.val { color: var(--c-2); font-variant-numeric: tabular-nums; font-weight: 500; }

section { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5) 0; }
section + section { border-top: 1px solid var(--rule-soft); }
.sechead { display: flex; flex-direction: column; gap: var(--s1); }

/* The door's copy. Ruled 2026-09-08; the type is its only styling.
   Patrick marked two places where "space must increase": after the wordmark,
   and after "Our designs enable people to read and keep their record". So the
   door is three blocks with the wide gap between them, and the tighter rhythm
   lives inside each block. The spacing is structure, not a margin bolted on. */
.door { display: flex; flex-direction: column; }
.door .wordmark  { margin-bottom: var(--gap-mark); }
/* The work page's header has no .statement wrapper, so it needs its own step
   between the head and its lede. Repairs a regression I introduced when the
   door stopped using one flex gap for three distances: that page lost the gap
   entirely and I did not catch it, because I checked the door and not this. */
.door > h1 + p   { margin-top: var(--s3); }
.door .statement { display: flex; flex-direction: column; gap: var(--s3);
                   margin-bottom: var(--gap-hero); }
.door .prose {
  display: flex; flex-direction: column; gap: var(--gap-para);
  /* Indented, ruled 2026-09-08: after the hero and the tag, an unbroken mono
     column loses its left edge and the eye blurs the margin. The body gets an
     edge of its own. Set in ch so it is a whole number of characters, which in
     a mono face is the only honest unit for an indent. */
  padding-left: 2ch;
}
.door p { font-size: 1.06rem; }

/* Stepped down to the body size, ruled 2026-09-08 as "too big". It is on the
   scale rather than between steps; the next step down is --t-sm at .82rem. */
.door p.recompute { font-size: 1rem; }

/* The run-in. Terracotta on text that is not a path, which is the second and
   last exception to the two-colour rule, ruled with the wordmark's own rule. */
.run-in { color: var(--a-2); font-weight: 600; }

.soft { color: var(--ink-soft); font-size: var(--t-md); }
.small { color: var(--ink-soft); font-size: var(--t-sm); }

/* "Where it fails" is page furniture, not a disclaimer. It gets the edge
   colour, a fixed position in the template, and it never looks like fine
   print. Rule 4 of the reader's ruled form, carried over unchanged. */
.limit {
  border-left: 3px solid var(--a-1);
  background: var(--raised);
  padding: var(--s3) var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
  font-size: var(--t-md);
}
.limit .stamp {
  font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--a-2); font-weight: 600;
}

/* The case list. One row per case, the question first, because the question is
   what a reader recognises as theirs. */
.cases { display: flex; flex-direction: column; }
.case {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s3) 0; border-top: 1px solid var(--rule-soft);
}
.case:last-child { border-bottom: 1px solid var(--rule-soft); }
.case .q { font-weight: 600; }

/* The case lists step off the margin, ruled 2026-09-08, the same device and the
   same two characters the door's body uses. The rules step with them, which is
   what makes the indent read as a column rather than as a stray margin. */
.cases { padding-left: 2ch; }

/* The disclosure under Case Limitations. It was a wall of grey at the foot of
   the page. Terracotta and a doubled column gap set it off as its own object.
   Ruled 2026-09-08; Patrick gave #91461d, which is within 2, 3 and 4 of --a-2
   and indistinguishable from it, so the sheet keeps ONE terracotta rather than
   carrying a second that no eye can tell apart. */
.limits { gap: 0; }
.limits .disclosure {
  margin-top: calc(var(--gap-para) * 2);
  color: var(--a-2);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}
.case .d { font-size: var(--t-sm); color: var(--ink-soft); }

footer {
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: var(--t-xs); color: var(--ink-faint);
  display: flex; flex-direction: column; gap: var(--s1);
}
footer a { color: var(--ink-soft); }

/* An enquiry is a person's path, so it takes the accent even down here, where
   the navigation links stay quiet. The two-colour rule holds everywhere. */
footer .enq { color: var(--ink-soft); }
footer .enq a { color: var(--a-2); }