/* practice-updates.css — components for the Practice update pages.
   Ported from ../ai-training/site/practice-updates/loop-engineering.html, which was built on
   the shared editorial system (ai-training/design.md). Loads AFTER styles.css.

   No colour is restated here. Every rule below refers to the same token NAMES the training
   site uses (--paper, --oxblood, --warm, --text*), and arcticrex.com binds those names to the
   cool Nordic-ink values in styles.css. That is the whole re-style: same geometry, same
   vocabulary, different palette. If you hard-code a hex in this file you break that. */

.hero-eyebrow {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1rem; color: var(--warm);
  margin-bottom: 28px;
  display: inline-flex; align-items: center; gap: 12px;
}
.hero-eyebrow::before {
  content: ''; width: 36px; height: 1px; background: var(--warm);
}
/* ── Cream insert (full pricing block) ────────── */
.cream-insert {
  background: var(--paper);
  color: var(--paper-text);
  position: relative;
  padding: 110px 0;
  overflow: hidden;
  border-top: none;
}
.cream-insert::before,
.cream-insert::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--paper-rule), transparent);
  pointer-events: none;
}
.cream-insert::before { top: 0; }
.cream-insert::after { bottom: 0; }
.cream-insert .section-head h2 { color: var(--paper-text); }
.cream-insert .section-head h2 em {
  color: var(--oxblood);
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  background: none; -webkit-text-fill-color: currentColor;
}
.cream-insert .eyebrow { color: var(--oxblood); }
.cream-insert .eyebrow::before { background: var(--oxblood); }
.cream-insert .eyebrow .num { color: var(--paper-muted); }
.cream-insert .section-intro { color: var(--paper-body); }
.cream-insert .section-intro em { color: var(--paper-text); }
/* ── Worth knowing (pillars) ──────────────────── */
.beyond {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
}
.beyond.beyond-two { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
.pillar-roman {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.05rem; color: var(--text-muted);
  margin-bottom: 12px;
}
.pillar-title {
  font-family: var(--font-slab); font-weight: 300;
  font-size: 1.25rem; color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
@media (max-width: 1000px) {
  .beyond { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .beyond { grid-template-columns: 1fr; }
}
.cream-insert .manifesto-body { max-width: var(--measure); }
/* DIVERGENCE from the sibling's literal .manifesto-pull values — deliberate, see below.
   In template.html / index.html the pull quote lives in a `.manifesto` section that has NO
   h2: its top rank is `.manifesto-lead` (clamp 1.6rem–2.3rem, slab 300 = 36.8px @1280), and
   the pull quote closes the block at clamp 1.4rem–1.8rem (28.8px @1280) followed by a
   signature. Measured 2026-08-17 in-browser: lead 36.8px/300 → pull 28.8px/400.
   Our cream insert is the OTHER canon shape — eyebrow + section-head h2 (46.08px @1280) —
   and no page in ../ai-training/site ever combines the two. Transplanting the literal pull
   size under an h2 put a 28.8px slab-400 block, rule-boxed at the full 720px measure, in
   the middle of the body: it reads as a second headline, not as a quotation (founder review,
   2026-08-17: "the title is SUPER SMALL … some kind of mid text part which is same size as
   title"). The content here is also a literal machine verdict, not editorial prose.
   Fix stays inside design.md: use the system's own QUOTE vocabulary instead of the pull
   vocabulary — `.quote` / `.quote-body` (design.md §5 "Proof split … dark quote column";
   template.html:517-529): left hairline + slab 300 at 1.35rem, no top/bottom rules. Family
   stays Roboto Slab (§4 type: no monospace exists in the system), weight 300 satisfies §4
   type rule 1 (slab is always light), and the left rule is a 1–2px hairline in --oxblood,
   the designated cream-surface accent (§4 palette) used as a rule, never as a fill.
   SITE-LEVEL NOTE CANDIDATE (same pattern as the content-width fix): ../ai-training/design.md
   §5 describes the cream insert as "Eyebrow + slab lead + Garamond body + optional pull quote
   + italic signature" — a slab LEAD, not an h2. Either the cream insert should take the lead
   rather than an h2 when it carries a pull quote, or the pull quote needs a documented
   smaller variant for cream-with-h2. Raise on the site, don't fix here.
   2026-08-17: MOOT ON THIS PAGE. The founder replaced section II's proof beat (the CANNOT
   VERIFY verdict and its fork diagram) with a what-we-cover summary, so the page carries no
   pull quote at all any more. The override below is gone; the site-level question stands. */

/* Callout blocks — the grammar the founder pointed at (2026-08-17, with a screenshot of the
   course read's technique-anatomy figure, site/acme/loop-engineering/index.html:1082-1101):
   small uppercase label, hairline left rule, plain text block, stacked. His reading, applied
   here: the three things the section covers ARE the three callouts, so the graphic and the
   text are one element. That is why this section no longer carries a separate coverage
   figure — the earlier version had a ruled list and a figure restating it (one row repeated
   "scored 1 to 5, and 4 or above passes" word for word), which two grading rounds scored as
   repetition, and a third roman i/ii/iii sequence that falsely appeared to correspond to the
   four artifacts in the next section. Uppercase labels carry the rank instead, so the page
   now has exactly one roman sequence.
   The 2px rule is the accent used as a rule, never as a fill (design.md §4). Recomputed for
   the arcticrex.com palette, 2026-09-03: --oxblood #1f4263 on --paper #e6e8eb = 8.5:1;
   --warm #7cc3f4 on --bg #0e1218 = 9.9:1. Both clear 4.5:1. */
.callouts { display: grid; gap: 32px; margin-top: 38px; max-width: var(--measure); }
.callout { padding-left: 22px; border-left: 1px solid var(--warm); }
/* §4: hairline rules are 1px */
.callout-label {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--warm); margin-bottom: 10px;
}
.callout-body { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.55; color: var(--text-body); }
.cream-insert .callout { border-left-color: var(--oxblood); }
.cream-insert .callout-label { color: var(--oxblood); }
.cream-insert .callout-body { color: var(--paper-body); }
.cream-insert .callouts + .manifesto-after { margin-top: 40px; }
/* §4 type rule 3: roman numerals are --warm on dark. The shared .pillar-roman paints
   --text-muted (4.73:1), which made the i.-iv. numerals read as smudges and the four items
   scan as four unordered blocks (grade round 4). --warm is 5.64:1 on --bg.
   SITE-LEVEL NOTE CANDIDATE: same fix belongs in ../ai-training/site's shared chrome. */
.pillar-roman { color: var(--warm); }
/* The plain name leads; the slash form is the secondary line under it, for the reader who
   will type it. Founder ruling 2026-08-17: slash-named titles are practitioner vocabulary and
   this page has to land for a non-engineering reader too (design.md §2, §8 last bullet). */
.pillar-cmd {
  font-family: var(--font-sans); font-size: 0.86rem;
  color: var(--text-muted); letter-spacing: 0.01em;
  margin-top: -2px; margin-bottom: 10px;
}
/* Same top margin the loop diagram takes off the block above it (.beyond + .fig), so both
   figures sit in their sections with one rhythm. */
.cream-insert .modules-list + .fig { margin-top: 56px; }
.beyond + .fig { margin-top: 56px; }
/* The loop diagram now sits ABOVE the four columns on the update page (it explains the loop
   the columns then break down), so the gap has to be declared in that direction too. The
   original .beyond + .fig rule is kept: the cream insert still uses that order. */
.fig + .beyond { margin-top: 56px; }
/* Eyebrow on cream: canon sizes the cream-surface label at 1rem with a 28px rule
   (`.manifesto-eyebrow`, template.html:296-303), not the 0.95rem/22px of the dark-surface
   `.eyebrow`. Scoped to the insert — this page has exactly one cream block (design.md §5:
   at most one cream insert per page), so no other section is touched. */
.cream-insert .eyebrow { font-size: 1.18rem; margin-bottom: 28px; padding-left: 44px; }
.cream-insert .eyebrow::before { width: 34px; }
/* 720px prose measure, per design.md §4 */

/* Nav between the mobile breakpoint and the desktop measure. design.md §7 hides the nav
   links at <=760px, so 761-900px still renders the full desktop bar — and at those widths
   the bar objectively broke: "Who it's for" wrapped to three lines into an 80px box inside
   a 73px bar, and the "Start a conversation" pill was clipped at the viewport edge
   (measured 768px, grade round 1). This band tightens the desktop bar's own gaps and type
   so it fits; it does not move design.md's 760px breakpoint or change the bar's language.
   SITE-LEVEL NOTE CANDIDATE: the break reproduces on ../ai-training/site/index.html, so the
   real fix belongs in the shared chrome and this page should re-sync when it lands. */
/* EYEBROW PRESENCE (founder, 2026-08-17: "Practice update · Loop engineering" is so high
   contrast to the hero line "that it might be missed, like the other titles tbh"). The
   eyebrow carries the PRODUCT NAME and was 16px Garamond next to a 70px h1. design.md §4
   fixes the eyebrow's family (Garamond italic) and colour (--warm on dark, --oxblood on
   cream) but sets no size, so raising size, weight and rule length is inside the system.
   Measured contrast, unchanged by the size work and all above the 4.5:1 floor:
     --warm  #7cc3f4 on --bg    #0e1218 = 9.9:1   (arcticrex.com palette, 2026-09-03)
     --oxblood #1f4263 on --paper #e6e8eb = 8.5:1
   The roman numeral moves from --text-muted (4.73:1, and the dimmest thing in the label) to
   --warm, which is what §4 type rule 3 actually specifies: "Roman numerals ... Garamond
   italic, in --warm on dark or --oxblood on cream". So this closes a §4 violation and the
   visibility complaint in the same edit.
   SITE-LEVEL NOTE CANDIDATE: ../ai-training/site's shared .eyebrow .num is --text-muted on
   every page, against its own §4 rule. Fix there and re-sync. */
.hero-eyebrow { font-size: 1.25rem; font-weight: 500; margin-bottom: 30px; }
.hero-eyebrow::before { width: 44px; }
/* Roman numerals on cream take --oxblood. design.md §4 type rule 3 is explicit: "Roman
   numerals (i., ii., iii.) replace bullets ... Garamond italic, in --warm on dark or
   --oxblood on cream." The cream numeral was rendering --paper-muted, which is both the
   wrong token and 4.15:1 on --paper (grade round 2 charged this as a §4 violation against
   this page — the rule is page-local, the shared chrome's cream eyebrow carries no numeral). */
.cream-insert .eyebrow .num { color: var(--oxblood); }
/* ── Figures: inline SVG diagrams ──────────────────
   Same class set, stroke weights and type ranks as the course read's diagrams
   (site/acme/loop-engineering/index.html:326-356) — remapped onto this page's tokens.
   No new colour is introduced: dark surface uses --text / --text-body / --text-muted /
   --hairline / --warm, the cream insert uses the paper tokens. Accents are strokes and
   fills on type only, never fills behind content (design.md §4, §8). */
/* ONE AXIS. The figure block, its caption rule and the prose above it all start on the
   section's left edge and sit inside the 720px prose measure (design.md §4 structure).
   Previously the svg and the caption were each centred on the 1100px container while the
   prose was left-aligned at the measure: three horizontal axes in one section, and the
   caption's hairline ran past the right edge of every paragraph above it (grade round 1).
   The caption is now exactly as wide as its figure, so the rule registers with the drawing. */
/* Both figures are drawn on a 340 viewBox and rendered at 340px, so the type ranks inside
   them render 1:1 at desktop and at 0.97 on a 375 column. The loop diagram used to be a 400
   viewBox: at 375 it rendered at 331px, which put its 12px labels ("a fact", "PASS or FAIL",
   "MET or NOT MET", "repair") at 9.9px effective, against a 14.1px type floor everywhere else
   on the page. Its geometry was rescaled on the x axis rather than its type shrunk. */
.fig { margin: 44px 0 0; max-width: var(--measure); }
.fig svg { display: block; width: 100%; max-width: 340px; height: auto; margin: 0; }
.fig figcaption {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.02rem; line-height: 1.5; color: var(--text-muted);
  max-width: 340px; margin: 0.9rem 0 0;
  padding-top: 0.7rem; border-top: 1px solid var(--hairline);
}
.fig text { font-family: var(--font-sans); }
.fig .f-ink { fill: var(--text); }
.fig .f-body { fill: var(--text-body); }
.fig .f-muted { fill: var(--text-muted); }
.fig .f-accent { fill: var(--warm); }
.fig .f-arrow { fill: var(--text-muted); }
.fig .f-box { fill: none; stroke: var(--hairline); stroke-width: 1; }
.fig .f-box-stop { fill: none; stroke: var(--warm); stroke-width: 1.5; }
.fig .f-line { fill: none; stroke: var(--hairline); stroke-width: 1; }
.fig .f-flow { fill: none; stroke: var(--text-muted); stroke-width: 1.25; }
/* Roman numerals inside a figure follow design.md §4 type rule 3 exactly as they do in
   prose: Garamond italic, --warm on dark and --oxblood on cream. */
.fig .f-num { font-family: var(--font-serif); font-style: italic; font-size: 15px; fill: var(--warm); }
.cream-insert .fig .f-num { fill: var(--oxblood); }
.fig .f-t { font-size: 15px; }
.fig .f-ts { font-size: 12px; }
/* Inter, not slab. design.md §4 gives Roboto Slab to "display, headlines, large numerals"
   and Inter to "buttons, nav links, small captions"; a 10.5px tracked branch label is a
   small caption, not display (grade round 2 charged the family stretch). Weight carries the
   label rank instead of the family. */
.fig .f-lbl { font-weight: 600; font-size: 10.5px; letter-spacing: 0.1em; }
/* Cream-surface small text takes --paper-body, not --paper-muted. Measured: --paper-muted
   The training site's #786c56 on its cream was 4.15:1, under the 4.5:1 floor, and it carried
   the figure's de-emphasised branch at 15px and its label at 10.5px — the box read as
   disabled rather than as the road not taken (grade round 1). --paper-body is
   7.98:1 and is a §4 canon token, so nothing forks: the de-emphasis is carried by the
   hairline weight and the italic/small type rank instead of by the text colour.
   SITE-LEVEL NOTE CANDIDATE: design.md §4 assigns --paper-muted to "secondary" text on
   cream, and at 4.15:1 that assignment fails legibility for any text rank. Raise on the
   site — do not fork the token here. */
.cream-insert .fig figcaption { color: var(--paper-body); border-top-color: var(--paper-rule); }
.cream-insert .fig .f-ink { fill: var(--paper-text); }
.cream-insert .fig .f-body { fill: var(--paper-body); }
.cream-insert .fig .f-muted { fill: var(--paper-body); }
.cream-insert .fig .f-accent { fill: var(--oxblood); }
.cream-insert .fig .f-arrow { fill: var(--paper-muted); }
.cream-insert .fig .f-box { stroke: var(--paper-rule); }
.cream-insert .fig .f-box-stop { stroke: var(--oxblood); }
.cream-insert .fig .f-line { stroke: var(--paper-rule); }
.cream-insert .fig .f-flow { stroke: var(--paper-muted); }


/* .pillar — ported from the training page. arcticrex.com's styles.css carries .pillar-block
   (the home page's offer strip) but not .pillar, so the ruled column grammar has to come
   with these pages. */
.pillar { padding: 44px 28px 40px 0; border-right: 1px solid var(--hairline); position: relative; }
.pillar:last-child { border-right: none; padding-right: 0; }
.pillar:not(:first-child) { padding-left: 28px; }

/* Three-up variant. .beyond defaults to four columns for the four artifacts on the update
   page; the offering page runs three, and without this they crowd into three quarters. */
.beyond.beyond-three { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1000px) {
  .pillar:nth-child(2) { border-right: none; padding-right: 0; }
  .pillar:nth-child(3) { border-right: 1px solid var(--hairline); padding-left: 0; padding-right: 28px; }
  .pillar:nth-child(3), .pillar:nth-child(4) { border-top: 1px solid var(--hairline); padding-top: 36px; }
  .beyond.beyond-three { grid-template-columns: repeat(2, 1fr); }
  .beyond.beyond-three .pillar:nth-child(3) { border-right: none; padding-right: 0; }
}
@media (max-width: 640px) {
  .pillar { border-right: none; border-bottom: 1px solid var(--hairline); padding: 32px 0; }
  .pillar:not(:first-child) { padding-left: 0; }
  .pillar:last-child { border-bottom: none; }
  .pillar:nth-child(3) { border-right: none; padding-right: 0; }
  .pillar:nth-child(3), .pillar:nth-child(4) { border-top: none; padding-top: 32px; }
  .beyond.beyond-three { grid-template-columns: 1fr; }
}