/* ============================================================
   SAFE & SOUND - HOME PAGE STYLES ONLY. Shared furniture is in site.css.
   This sheet is loaded by index.html and by nothing else.
   Comment conventions (WINDOW / RULING / STATE) and the site's reasoning:
   see the canonical block in the head of index.html.

   Most of this file is RULING: dated, attributed decisions about type,
   rhythm and spacing. Rulings are APPEND ONLY - never edit or delete one.
   A superseded ruling is still a true record of what was decided that day,
   and several here explain WHY a number is what it is. That reasoning is
   the part you cannot re-derive from the code.

   STATE 23 Jul 2026 - DEAD SELECTORS, KEPT DELIBERATELY
     11 selectors in this sheet have no referent in index.html, which is
     the only page that loads it. They are RETAINED, not removed, because
     the rulings beside them say "restore if an image returns", "if a form
     ever returns", and similar - the styles are being held for a planned
     return, and their reasoning travels with them.
       .card  .footer-built  .footer-cert  .lede-principle  .primary-tag
       .support  .visit-figure  .way  .way-head  .ways  .welcome-photo
     Declared here so their deadness is KNOWN rather than discovered. If
     you are reading a rule and cannot find the element, check this list
     first - it is probably here, and probably on purpose.
     If any is ruled out for good, delete the rule and keep the ruling.
     CHECK: any class in this sheet that does not appear in index.html
     belongs on the list above. If the list and the sheet disagree, the
     sheet is right and this comment is stale - fix the comment.
   ============================================================ */

.visit-figure {margin:1.25rem 0 0}

.visit-figure svg {display:block}

.lede-principle { background: var(--teal-deep); color: #fff; border-radius: var(--gap-tight); padding: var(--gap-minor); }

.lede-principle p { margin: 0; }

.lede-principle p { color: #ffffff; }

.lede-principle p + p { margin-top: 1.2em; color: #cfe3df; font-size: var(--type-body); }

.ways { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr;
        gap: calc(1.2em + 0.70em);            /* box->box: +2 half-leadings (the box lacks BOTH the leadings text-text has) */
        margin: calc(1.2em + 0.35em) 0 1.2em; /* para->box: +1 half-leading (box lacks ONE leading the text above has) */
      }
/* THE OPTICAL LAW, DERIVED (14 Jul — Keiron measured with a tape measure and was right; Fable
   had it eyeballed and wrong 3x). half-leading = (line-height - 1)/2 = (1.7-1)/2 = 0.35em.
   Text carries a half-leading of invisible air at each edge; a hard box carries none. So to
   make every VISIBLE gap equal the paragraph reference (1.2em + 2 half-leadings of ink space):
   para->para 1.2em (2 leadings) · para->box +0.35em (1 leading missing) · box->box +0.70em
   (2 leadings missing). Exact, derivable from line-height — never re-tuned per page.
   grid-auto-rows: 1fr = equal-height cards (point 3, conformity). */  /* single-width card stack (13 Jul). SPACING RULED 14 Jul (Keiron's Word model): EVERY gap matches the paragraph-to-paragraph gap = his reference "marker" (measured 28.3px visible, glyph-to-glyph). Boxes carry no leading, text does, so to hit 28.3 VISIBLE: para->box margin-top 1.38em, box->box gap 1.66em (both bigger than the plain 1.2em, to make up the leading the hard box lacks). Internal para gaps already = 28.3 (they're para->para). Earlier "reduce by half-leading" was the WRONG DIRECTION — corrected. */

.lede-principle, .card { margin-top: 1.2em; margin-bottom: 1.2em; }  /* handed boxes join the paragraph rhythm (13 Jul) */

.way { background:#fff; border:1px solid var(--line); border-radius:8px; padding: var(--gap-minor); }

.way h3 { margin-top:0; color: var(--teal-deep); }

.way .primary-tag { font-size: var(--type-small); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--teal); }

.support { border-top:1px solid var(--line); margin-top: var(--gap-minor); padding-top: var(--gap-tight); color: var(--ink-soft); font-size: var(--type-body); }

.visit-figure svg{font-family:inherit;width:100%;height:auto;max-width:600px;margin:0 auto}


/* ============================================================
   FOLDED FROM index-DRAFT inline <style>, 15 Jul 2026 (P06-F1)
   CSP style-src 'self' forbids inline style; rules moved intact,
   reasoning comments preserved. Order: appended last, so these
   page-specific rules keep the cascade position they had inline
   (inline <style> loaded after index.css).
   ============================================================ */
/* DRAFT-ONLY (10 Jul): hero links were invisible against the hero background — set white,
   underlined, with a visible focus ring. Fold into index.css properly at the build pass. */
.hero-inner a { color: #ffffff; text-decoration: underline; }
.hero-inner a:hover { text-decoration-thickness: 2px; }
.hero-inner a:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
/* ============================================================
   TEMPLATE FOLD-IN — 2026-07-13 (Keiron: the formatting standard IS
   the template; the code tells you what to do). Today's type, rhythm
   and width rulings were FOLDED INTO THE SHEETS:
     site.css  — type scale (17 body / 24 all headers / 14 furniture;
                 all buttons 17, regular weight), line rhythm (1.7
                 body, 1.35 headings), paragraph gaps 1.2em (scale
                 with the visitor's text size), section gap 60px,
                 reading column 640px, page box 780px, h2 first-child
                 rule (one owner per gap).
     index.css — handed boxes join the paragraph rhythm; ways-in is a
                 single-width vertical card stack.
   Ruling history: Research/build-log-typography-and-spacing-2026-07-13.md,
   _TODO items 38-42, today's trace. Below this line only the
   still-EXPERIMENTAL layers remain: hero-link colours, gate palette,
   the one-green-box, the ladder's white card (surface rule), and the
   palette-tied conformance fixes.
   ============================================================ */
/* DRAFT-ONLY (13 Jul, Keiron): text left-justified. Body was already all-left; the two centred
   rules came from shared site.css. RULED SAME DAY: the FOOTER stays CENTRE (the unspoken
   convention; BDA left-align guidance targets reading text, and WCAG 1.4.8 targets justified
   text — a short footer is neither). Back-to-top stays left per the original instruction.
   (The .passes-sentence alignment option dissolved same day — Keiron removed the line itself.)
   If any of this is ruled site-wide, fold into site.css at build. */
.to-top-wrap { text-align: left; }
/* DRAFT-ONLY (13 Jul): CONFORMANCE FIX, found by Keiron — the back-to-top button was
   green-on-green under the one-green-box experiment (teal-deep text/sage border on the
   deep-leaf box = invisible until hover). Third catch in the does-it-conform family
   (joins Saturday's button-border + focus-ring pair). White on box-green = 8.6:1 (already
   verified for this scheme); hover keeps the sage fill + white text (5.9:1). Fold into
   the scheme's own block if the green box is ruled in. */
.to-top { color: #ffffff; border-color: #ffffff; }
/* DRAFT-ONLY (13 Jul): CONFORMANCE FIX #4 (Keiron's footer-links question) — the site-default
   hover copper (#9c5d28) measures 4.4:1 on the gate-wood page behind the footer: fails the
   4.5:1 floor by a hair. Hover deepened to #8a4f1f (5.5:1) — still reads as the gate's copper,
   now conformant. Resting links (7.2:1) and footer text (6.7:1) pass unchanged. Applies to
   light-page links generally if the gate palette is ruled in — re-measure at that fold-in. */
footer.page-footer a:hover { color: #8a4f1f; }
/* DRAFT-ONLY (14 Jul): footer self-declaration + ByTheSea build credit.
   SIZE CORRECTED 14 Jul (Keiron): was 14px (--type-small) by force of habit — footer is
   READING TEXT, not furniture, so it takes the 17px body standard like everything else.
   The 14px furniture size is for chrome/labels only, never a line a visitor reads. */
.footer-cert, .footer-built, .footer-nav { font-size: var(--type-body); color: var(--ink-soft); margin-top: var(--gap-tight); }
/* DRAFT-ONLY (13 Jul, Keiron's SURFACE RULE, named today: GREEN SPEAKS, WHITE HANDS OVER.
   The green field is our voice (narrative); a white card is a thing handed to the reader
   (example reports, the ways-in doors, the cookie pair as the summary-report example — all
   already white, correctly). The LADDER joins them: the question is voice (stays green),
   the five-rung list is an INSTRUMENT the reader uses on themselves — boxed white. Still
   the ruled plain static list; a surface is not interactivity. One rule, whole page,
   written down so the tool page inherits it. */
/* LADDER + WAYS HEADERS 14 Jul (Keiron points 4+5): ladder is now header+para rungs, no
   numbers (indent removed); card/rung headers are 14px (--type-small), teal-deep, bold —
   one consistent box-header size across the page. Header->para tight (.3em, one unit);
   unit->unit = the paragraph rhythm. */
/* WHITE BOX REMOVED 2026-07-18 (Keiron's ruling, TR pass): the ladder was the page's LAST
   white box (form gone 17 Jul, ways-in cards dissolved 17 Jul) - a single surviving surface
   change reads as inconsistency, not signal. The page is now single-surface: green voice
   throughout. The SURFACE RULE (green speaks, white hands over) is not retired - it remains
   method knowledge and lives on for the report/tool pages, where handed instruments return.
   Colour handover, NO NEW PAIRS: rung-head -> #fff (the established h3-on-green, 8.58:1
   measured 17 Jul); rung body -> inherits main.page p (#e7eedd, the established body-on-green)
   by REMOVING the --ink override (one owner: site.css's on-green rule now owns it). The
   box's optical-law padding compensation goes with the hard edge that required it. */
main.page .ladder { margin: 1.2em 0 0; }
/* ^ BOTTOM ZEROED 2026-07-22 (Keiron): the shared boundary law .prose > :last-child { margin-bottom:0 }
   (specificity 0,2,0) is out-ranked by this selector (0,2,1), so the ladder's 1.2em bottom was NOT being
   zeroed like every other section's last element - it added ~20px above "What we look for" (measured 68px
   there vs the 48px section gap everywhere else). Set to 0 here so the section gap owns the boundary, as
   intended. NOTE: the same clash would hit any main.page .<box> with a bottom margin used as a last-child
   (.card / .way / .lede-principle carry margin-bottom:1.2em) - none are in the page now; if they return,
   prefer hardening the boundary law over per-element fixes. */
main.page .rung + .rung { margin-top: 1.2em; }
main.page .way-head, main.page .rung-head { font-size: var(--type-body); line-height: var(--line-tight);
                    color: var(--teal-deep); font-weight: 700; margin: 0 0 .3em; }
main.page .rung-head { color: #fff; }
/* ^ EXPERIMENT CLOSED 2026-07-18 (Keiron's eye, rendered): normal-weight heads tried and
   reverted same sitting - "back to bold." The weight+colour law holds; 700 inherited from
   the shared rule above. */
/* ^ FAIL FIX 14 Jul (Keiron): these were 14px — SMALLER than the 17px body they head, which
   is wrong by the most basic rule (a heading is never smaller than its text). Now 17px bold
   teal-deep: distinguished by weight + colour, never by being smaller. New STYLE-GUIDE law.
   18 Jul: rung-head re-coloured white for the green field (box removed); .way-head line kept
   for the dead .way selector's history - the cards dissolved 17 Jul. */
main.page .rung p { margin: 0; }
/* CONTACT-FORM STYLES REMOVED 2026-07-17 with the form itself (Keiron's ruling; dead
   bindings otherwise - the exam's own fault class). The white-box surface rule, the
   stacked single-column research, the 44px targets, and the honeypot pattern all remain
   method knowledge for client sites - and travel back in if a form ever returns. */
/* DRAFT-ONLY (12 Jul): the gate photo left of the welcome text — comp layout for viewing only.
   Stacks on narrow screens. Fold into index.css properly if the image is ruled in. */
/* Alignment pass (12 Jul, Keiron): image left edge = band text left; text right edge = options-button
   right (both fall on main.page's content edges, so the hero-inner cage is removed); text TOP-aligned
   with the image, W's cap nudged to the image's top line. */
.hero-inner { max-width: var(--opening-width); margin-inline: auto; padding: 0; }
/* ^ 13 Jul: cage RESTORED to the reading column — 'max-width:none' was the image comp's rule
   (photo to the box edges); with the image removed the welcome ran wider than every other
   section (Keiron's catch). The welcome now sits on the same 640px column as the rest.
   If an image returns, it may earn back the wide rule. */
.hero-split { display: flex; align-items: flex-start; gap: 28px; text-align: left; }
.hero-split .welcome-photo { flex: 0 0 38%; max-width: 420px; border-radius: 10px; display: block; width: 100%; height: auto; }
.hero-split .hero-text { flex: 1; }
.hero-split .hero-text h1 { margin-top: 0; }  /* was -0.22em, the optical nudge to the image's top edge — zeroed 13 Jul with the image's removal; restore if an image returns */
@media (max-width: 720px) { .hero-split { flex-direction: column; text-align: inherit; } .hero-split .welcome-photo { flex: none; max-width: 100%; } }

/* CONTACT-FORM STYLES REMOVED 2026-07-17 with the form itself (dead bindings otherwise -
   the exam's own fault class). The contact-plain link is covered by main.page a. */
/* GATE-GARDEN THEME PROMOTED TO site.css, 2026-07-17 (Keiron's ruling: the whole site wears
   the green scheme - "opening the other two pages was quite jarring", and a mid-site theme
   switch is a predictability cost for the anxious visitor, not just an aesthetic one).
   The palette, the green box, the brass band, and all measured conformance fixes now live
   ONCE, in site.css (Parnas: one home). This file keeps index LAYOUT only. */