/* ============================================================
   TACIT SOURCE — PUBLIC SITE · SHARED DESIGN SYSTEM
   TCT-SITE-CSS-001 · R0.1 · 2026-09-11

   R0.1 (2026-09-11) — forked from ES-SITE-CSS-001 R3.5 (evensteven.team) on the owner's ruling
   (this build session): Tacit Source mirrors Even Steven's visual system exactly — same tokens,
   same type, same colour — so the two read as one family, per ES-DEC-025's own pairing ("Even
   Steven is the society, Tacit Source is the machinery") and the ruled lockup "Tacit Source, by
   Even Steven." No token renamed, no value changed at this issue. Where this file and es.css
   diverge from here forward, note it in both headers so a shared token does not drift silently.

   TACIT SOURCE HAS NO PHOTOGRAPHY OF ITS OWN YET. This build omits .hero.cine, .sec.photo, and
   .gallery/.strip figures rather than fake them — Tacit Source faces makers, kit companies and
   fleet owners, not a consumer audience, and a text-forward B2B register (tint/ink bands, tables,
   blocks, callouts) carries the content honestly without invented imagery. Add photography when
   there is any to add.

   Everything below R0.1's header is carried unchanged from ES-SITE-CSS-001 R3.5, for provenance:

   R3.5 (2026-09-11, night) — the globe (nav.site .lang-switch) and the Languages page behind it, following steadyeddie.ca.
   Address ?v=r3.5.
   R3.4 (2026-09-11, night) — .btn.accent, the green button (owner: "lets do this in the Green"). Address ?v=r3.4.
   R3.3 (2026-09-11, evening) — the polish pass: dead rules retired. The caption rules (.hero.cine .cap,
   .sec.photo .cap, figure.ph figcaption) went with ES-DEC-016; .tagline with the element; and the utilities
   no page uses and BRIEF-r3 §3 does not name (.center, .small, .muted, .mono, .nb, .two-col, .mt0–3, .fine,
   .crumb, .dl-list, .card.on-paper, .card .foot). Nothing that renders changed. The address moves to ?v=r3.3.
   R3.2 (2026-09-11) — "In plain words" joins the bar as a sixth group (BRIEF-r4): the group
   titles, the top link and the bar's gaps are sized so six groups, "Hire on" and the ask sit on
   one row at the wrap; the burger takes over below 1280px; the footer carries a fifth link column
   R3.1 (2026-09-11) — "Hire on" joins the menu bar as a top-level link
   beside the five groups and before the ask (ES-DEC-010). One rule set
   added: nav.site > a.top, a group button without the caret, and its
   plain-row treatment in the burger menu. The stylesheet's address moves
   to es.css?v=r3.1 in TEMPLATE.html with it, because a same-path
   stylesheet would paint the new markup with the cached old rules.

   R3.0 (2026-09-11) — the deepening, on the owner's instruction: "the site
   needs mass deepening, enhancement, polish.. its rough steadyeddie.ca is
   the min standard across the board" and "we also need to build the
   repository (store front)". Ported from STE-SITE-CSS-001 R2.27 into Even
   Steven's own tokens: grouped navigation with drop-down panels and the
   ask on the right, a footer with a brand column, cards and card grids,
   the compare module, the quote, the note and the aside box, on-this-page
   sub-navigation, the glossary, the strip, text links, the form, and the
   motion the standard carries (cards lift, images fade up, rows
   highlight, the header shadows once scrolled). No token moved. Colour is
   still ES-BRD-001 R1.1 and every value is still in :root below. Ruled,
   never rounded: no border-radius anywhere on the property.

   R2.0 · 2026-09-10

   R2.0 (2026-09-10) — the full-depth build, on the owner's instruction:
   "build out the website, full depth - follow the steadyeddie.ca,
   test.cdnshield.ca & wired industries for the format, depth, style".
   Ported from STE-SITE-CSS-001 R2.27 and the WI port of it, in Even
   Steven's own tokens: the cinematic photograph hero (.hero.cine), the
   full-bleed photograph band (.sec.photo) with a two-axis scrim, the
   split (text beside a figure), the gallery of figures, the numbered
   steps grid, the facts list, the tick list, the CTA band, numbered
   section kickers (a CSS counter), and line-art watermarks (.wm) at
   ten per cent, multiplied onto the paper. No token moved. Colour is
   still ES-BRD-001 R1.0 and every value is still in :root below.

   R1.2 (2026-09-09, evening) — after the four-width look and the measured
   render: the numerals on an ink band leave the bright accent (3.42:1 at
   12px, below AA for text) for white at 62% (7.5:1); a page that ends on an
   ink band meets the ink footer without a white seam (a hairline marks the
   join); phone tap heights reach 44px on the footer links, the header
   lockup and the mailto link; the footer's three-clause rule line breaks
   only between clauses and stacks on a phone. contrast.py gained the
   numeral pair.

   R1.1 (2026-09-09) — the polish pass: tables stack into cards below 760px
   (thead hidden, each td's data-th prints above the value as a mono
   kicker); keyboard focus rings on every link and button, lifting to
   --accent-l on ink and footer grounds; the burger meets a 44px tap
   height and footer links get 8px of vertical padding below 760px;
   .btns stack to full width below 620px; .cols.c4 steps to two columns
   between 760 and 960px instead of jumping straight from one to four;
   inline links in running prose (main p a, main li a) are underlined;
   a print stylesheet; p{text-wrap:pretty}; and .tbl-note is retired (the
   copy lane is pulling its three call-sites the same pass).

   Built to the standard set by STE-SITE-CSS-001 R2.27 (steadyeddie.ca),
   on the owner's instruction: "use steadyeddie.ca as the min. standard".

   ONE STYLESHEET, EVERY PAGE. Page-specific style goes in that page's
   own <style> block, built on these tokens. DO NOT FORK.

   COLOUR IS ES-BRD-001 R1.0, ISSUED 2026-09-08: sampled from the primary lockup
   supplied by the owner (ES-DEC-001 item 1, RULED). Every value lives in the
   :root block below and nowhere else in this file.

   Type is the estate kit, self-hosted (assets/fonts/): Barlow for reading,
   Barlow Condensed for display, a system mono stack for eyebrows.
   ============================================================ */

/* ---------- self-hosted type ---------- */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Barlow-400.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/Barlow-500.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/Barlow-600.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/Barlow-700.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/BarlowCondensed-600.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/BarlowCondensed-700.woff2") format("woff2")}

/* ---------- tokens ---------- */
:root{
  /* TCT-BRD-001 R0.2 — sampled from the owner-supplied lockup, 2026-09-11 (the metallic
     red-and-silver "T" wing mark, "TACIT SOURCE / HUMAN KNOWLEDGE. LICENSED FOR MACHINES.").
     This SUPERSEDES R0.1's inherited Even Green — the real mark is red, not green, so the
     brand now diverges from Even Steven's on this one token family. Sampled directly from
     the lockup's histogram (darker wing tone ~#9D0000–#B90000, bright highlight ~#F80000–
     #F8373D), then tuned to the nearest value that clears WCAG AA in both roles the design
     system asks of it: --accent at 7.75:1 on white (text/borders/kickers), --accent-l at
     5.74:1 with white text on it (button hover) and 5.74:1 as text on white (link hover).
     Neither figure was picked freehand; both are computed, the same way ES-BRD-001 was. */
  --ink:#0E1110;         /* near-black — text and headings, never a large fill */
  --graphite:#3A423E;    /* secondary structure, subheads, technical rules */
  --accent:#AA0000;      /* Tacit Red — the wordmark's darker wing tone, sampled */
  --accent-l:#C81E1E;    /* Tacit Red bright — hover, and button grounds */
  --paper:#FFFFFF;       /* the lockup's own ground */
  --card:#F7F9F8;        /* a hair off-white so a tint band reads against paper */
  --line:#E3E7E4;
  --muted:#5C6661;
  /* stable */
  --sans:"Barlow","Helvetica Neue",Helvetica,Arial,sans-serif;
  --disp:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --wrap:1240px;
  --gut:clamp(20px,4vw,56px);
  --band:clamp(56px,7vw,112px);
  --rule:2px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
main p a,main li a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
main p a[href^="mailto:"]{display:inline-block;padding:12px 0;margin:-12px 0}   /* a 44px tap height, no change to the line */
h1,h2,h3,h4{font-family:var(--disp);text-transform:uppercase;font-weight:600;
  line-height:1.05;letter-spacing:.005em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(38px,5.4vw,74px)}
h2{font-size:clamp(28px,3.6vw,50px)}
h3{font-size:clamp(19px,1.8vw,25px)}
p{margin:0 0 1em;max-width:70ch;text-wrap:pretty}
ul,ol{margin:0 0 1em;padding-left:1.2em}
li{margin-bottom:.4em;max-width:68ch}

/* ---------- focus ---------- */
:where(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sec.ink :where(a,button):focus-visible,
footer.site :where(a,button):focus-visible{outline-color:var(--accent-l)}

/* ---------- skeleton ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.sec{padding-block:var(--band)}
.sec.tint{background:var(--card);border-block:1px solid var(--line)}
.sec.ink{background:var(--ink);color:#fff}
.sec.ink h2,.sec.ink h3{color:#fff}
.sec.ink p,.sec.ink li{color:rgba(255,255,255,.82)}
.kicker{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:14px;
  padding-left:14px;border-left:3px solid var(--accent)}
.sec.ink .kicker{color:#fff;border-left-color:var(--accent-l)}
.lede{font-size:clamp(18px,1.7vw,22px);color:var(--graphite);max-width:62ch}
.sec.ink .lede{color:rgba(255,255,255,.82)}

/* ---------- header ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px}
header.site{position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--line)}
header.site .bar{max-width:var(--wrap);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;gap:20px}
.lockup{display:block;line-height:0;text-decoration:none;flex:0 0 auto}
.lockup img{height:clamp(30px,2.8vw,36px);width:auto;display:block}
nav.site{margin-left:auto;display:flex;gap:clamp(10px,1.2vw,14px);align-items:center}
nav.site a{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--graphite);padding:6px 0;
  border-bottom:2px solid transparent;white-space:nowrap}
nav.site a:hover{color:var(--ink);border-bottom-color:var(--accent)}
nav.site a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.burger{display:none;margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;background:none;border:1px solid var(--line);
  padding:9px 14px;cursor:pointer;color:var(--ink);min-height:44px}
@media (max-width:1240px){nav.site{gap:14px}nav.site a{font-size:11.5px;letter-spacing:.08em}}
@media (max-width:1280px){
  .burger{display:inline-flex;align-items:center}
  .lockup{padding-block:7px}   /* 30px lockup + 14 = a 44px tap height beside the burger */
  nav.site{display:none;order:3;width:100%;flex-direction:column;align-items:flex-start;gap:0}
  nav.site.open{display:flex}
  /* R3.1: the header is pinned, so an open menu taller than the screen must scroll inside itself,
     or its last rows (Hire on, Talk to us) are out of reach on a phone. */
  nav.site.open{max-height:calc(100vh - 92px);max-height:calc(100dvh - 92px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  nav.site a{width:100%;padding:13px 0;border-bottom:1px solid var(--line)}
  header.site .bar{flex-wrap:wrap}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(64px,9vw,140px);border-bottom:1px solid var(--line)}
.hero h1{margin-bottom:.35em}
.hero .lede{font-size:clamp(19px,2vw,26px);color:var(--graphite)}

/* ---------- grids ---------- */
.cols{display:grid;gap:clamp(20px,2.6vw,38px);grid-template-columns:1fr;
  margin-top:clamp(28px,3.4vw,48px)}
@media (min-width:760px){.cols.c2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:760px) and (max-width:959px){.cols.c4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.cols.c3{grid-template-columns:repeat(3,1fr)}
                         .cols.c4{grid-template-columns:repeat(4,1fr)}}
.blk{border-top:var(--rule) solid var(--line);padding-top:18px;position:relative}
.blk::before{content:"";position:absolute;left:0;top:calc(-1 * var(--rule));
  width:38px;height:var(--rule);background:var(--accent)}
.blk h3{margin-bottom:9px}
.blk .btn{margin-top:10px}
.blk p{font-size:15.5px;color:var(--graphite);margin-bottom:8px}
.sec.ink .blk{border-top-color:rgba(255,255,255,.22)}
.sec.ink .blk p{color:rgba(255,255,255,.78)}

/* ---------- numbered list ---------- */
.prin{list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;
  border-top:1px solid var(--line)}
.prin li{display:grid;grid-template-columns:56px 1fr;gap:clamp(14px,2vw,28px);
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line);
  align-items:start;margin:0;max-width:none}
.prin .n{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--accent);padding-top:9px}
.sec.ink .prin .n{color:rgba(255,255,255,.62)}   /* text, so AA: not the accent (brand rule 2) */
.prin b{display:block;font-family:var(--disp);text-transform:uppercase;font-weight:600;
  font-size:clamp(21px,2.2vw,32px);line-height:1.05;margin-bottom:7px}
.prin span.d{display:block;font-size:15.5px;line-height:1.55;color:var(--graphite);max-width:62ch}
.sec.ink .prin li{border-color:rgba(255,255,255,.2)}
.sec.ink .prin span.d{color:rgba(255,255,255,.78)}
@media (max-width:620px){.prin li{grid-template-columns:1fr}.prin .n{padding-top:0}}

/* ---------- callout ---------- */
.callout{border-left:3px solid var(--accent);padding-left:clamp(16px,2vw,26px);
  margin-block:clamp(24px,3vw,40px);max-width:72ch}
.callout p{font-size:clamp(17px,1.5vw,20px);color:var(--ink)}
.sec.ink .callout{border-left-color:var(--accent-l)}
.sec.ink .callout p{color:rgba(255,255,255,.9)}

/* ---------- tables: scroll in their own box, stack on a phone ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);margin-top:clamp(24px,3vw,40px)}
table.tbl{width:100%;min-width:560px;border-collapse:collapse;background:var(--card)}
.tbl th{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-align:left;padding:13px 16px;
  border-bottom:var(--rule) solid var(--ink)}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:15px;
  line-height:1.55;vertical-align:top;color:var(--graphite)}
.tbl td b{color:var(--ink)}
@media (max-width:760px){
  .tbl-wrap{border:0;overflow-x:visible}
  table.tbl{display:block;min-width:0}
  table.tbl tbody,table.tbl tr{display:block}
  table.tbl thead{display:none}
  table.tbl tr{border:1px solid var(--line);border-radius:0;   /* ruled, not rounded */
    padding:12px 16px;margin-bottom:12px;background:var(--paper)}
  table.tbl td{display:block;padding:6px 0;border:0}
  table.tbl td::before{content:attr(data-th);display:block;font-family:var(--mono);
    font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--graphite);margin-bottom:2px}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:15px 26px;
  background:var(--ink);color:#fff;border:1px solid var(--ink)}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.sec.ink .btn.ghost{color:#fff;border-color:#fff}
.sec.ink .btn.ghost:hover{background:#fff;color:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3vw,38px)}
@media (max-width:620px){.btns{flex-direction:column}.btns .btn{width:100%;text-align:center}}

/* ---------- the standing honesty note ---------- */
.stand{border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--card);padding:clamp(20px,2.4vw,30px);margin-top:clamp(28px,3.4vw,44px)}
.stand .k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:11px}
.stand p{font-size:15.5px;color:var(--graphite);margin-bottom:0}
.sec.ink .stand{border-color:rgba(255,255,255,.22);border-left-color:var(--accent-l)}
.sec.ink .stand .k{color:var(--accent)}
.sec.ink .stand p{color:var(--graphite)}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#fff;padding-block:clamp(48px,6vw,80px);
  margin-top:var(--band)}
/* a page that ends on an ink band meets the ink footer without a white seam; a hairline marks the join */
main > .sec.ink:last-child{margin-bottom:calc(-1 * var(--band));border-bottom:1px solid rgba(255,255,255,.16)}
footer.site .cols{margin-top:0}
footer.site h2{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:14px}
footer.site a{display:block;color:rgba(255,255,255,.86);text-decoration:none;
  font-size:14.5px;padding:5px 0}
footer.site a:hover{color:#fff}
@media (max-width:760px){footer.site a{padding:11px 0}}   /* 23px of text + 22 = 45px tap height */
.rule-line{max-width:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-top:clamp(36px,4vw,56px);
  padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.rule-line .cl{white-space:nowrap}   /* a clause never breaks inside itself */
@media (max-width:620px){.rule-line .cl{display:block;margin-bottom:5px}.rule-line .sep{display:none}}
.colophon{font-size:13px;color:rgba(255,255,255,.6);margin-top:14px;max-width:78ch}

/* ---------- motion, only where it is welcome ---------- */
.rv{opacity:1}
@media (prefers-reduced-motion: no-preference){
  html.rv-armed .rv{opacity:0;transform:translateY(14px);
    transition:opacity .6s ease,transform .6s ease}
  html.rv-armed .rv.in{opacity:1;transform:none}
}

/* ---------- print — the covenant page is the one an operator prints ---------- */
@media print{.rv{opacity:1!important;transform:none!important}}
@media print{
  header.site,.burger,.skip,.btns{display:none}
  footer.site .cols{display:none}
  body{font-size:12pt;color:var(--ink);background:var(--paper)}
  /* an ink band prints as black text on white, its rules dark instead of accent or translucent white */
  .sec.ink{background:var(--paper);color:var(--ink)}
  .sec.ink h2,.sec.ink h3{color:var(--ink)}
  .sec.ink p,.sec.ink li{color:var(--ink)}
  .sec.ink .kicker{color:var(--ink);border-left-color:var(--ink)}
  .sec.ink .lede{color:var(--ink)}
  .sec.ink .blk{border-top-color:var(--ink)}
  .sec.ink .blk p{color:var(--ink)}
  .sec.ink .prin .n{color:var(--ink)}
  .sec.ink .prin li{border-color:var(--ink)}
  .sec.ink .prin span.d{color:var(--ink)}
  .sec.ink .callout{border-left-color:var(--ink)}
  .sec.ink .callout p{color:var(--ink)}
  /* the footer is an ink band too; keep .rule-line and .colophon legible on the printed page */
  footer.site{background:var(--paper);color:var(--ink)}
  footer.site .rule-line,footer.site .colophon{color:var(--ink)}
  footer.site .rule-line{border-top-color:var(--line)}
  /* table borders are left as they are — they already read on paper */
}


/* ============================================================
   R2.0 · 2026-09-10 · FULL DEPTH — photographs, splits, galleries,
   steps, watermarks, numbered kickers, the CTA band
   ============================================================ */

/* ---------- numbered section kickers: "The covenant · 01" ---------- */
main{counter-reset:sec}
.kicker.num{counter-increment:sec}
.kicker.num::after{content:"\00a0\00b7\00a0" counter(sec,decimal-leading-zero)}

/* ---------- responsive pictures ---------- */
picture{display:block}
picture.media,picture.media img{display:block}

/* ---------- the cinematic hero: a photograph, a scrim, white type ---------- */
.hero.cine{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-bottom:0;
  padding:0;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(520px,78vh,860px)}
.hero.cine .media,.hero.cine .media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
.hero.cine .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(14,17,16,.62) 0%,rgba(14,17,16,.34) 42%,rgba(14,17,16,.04) 76%),
             linear-gradient(180deg,rgba(14,17,16,0) 30%,rgba(14,17,16,.28) 62%,rgba(14,17,16,.66) 100%)}
.hero.cine .plate{position:relative;z-index:2;width:100%;
  padding-top:clamp(72px,12vw,180px);padding-bottom:clamp(40px,6vw,72px)}
.hero.cine .plate-in{max-width:760px}
.hero.cine .kicker{color:#fff;border-left-color:var(--accent-l);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hero.cine h1{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.hero.cine .lede{color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.45)}
.hero.cine .btn{background:#fff;color:var(--ink);border-color:#fff}
.hero.cine .btn:hover{background:var(--accent-l);border-color:var(--accent-l);color:#fff}
.hero.cine .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.hero.cine .btn.ghost:hover{background:#fff;color:var(--ink)}
/* R3.4: the green button, for the one link the owner wants in Even Green (the farm page in the home hero). White type on the
   bright green passes AA on any ground; contrast.py carries the pair. */
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.accent:hover{background:var(--accent-l);border-color:var(--accent-l);color:#fff}
.hero.cine .btn.accent{background:var(--accent-l);border-color:var(--accent-l);color:#fff}
.hero.cine .btn.accent:hover{background:#fff;border-color:#fff;color:var(--accent)}
/* a wide frame (about three to one) shows more of itself under a shorter hero */
.hero.cine.wide{min-height:clamp(420px,56vh,640px)}
@media (max-width:760px){
  .hero.cine{min-height:min(78svh,720px)}   /* pinned: a tall capture window is not a phone */
  .hero.cine .scrim{background:linear-gradient(180deg,rgba(14,17,16,.18) 0%,rgba(14,17,16,.84) 70%)}
}

/* ---------- the full-bleed photograph band ---------- */
.sec.photo{position:relative;min-height:clamp(420px,60vh,720px);min-height:clamp(420px,60svh,720px);
  display:flex;align-items:flex-end;padding:0;overflow:hidden;background:var(--ink);color:#fff;border:0}
.sec.photo .media,.sec.photo .media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
.sec.photo .scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,17,16,.56) 0%,rgba(14,17,16,.30) 42%,rgba(14,17,16,0) 76%),
             linear-gradient(180deg,rgba(14,17,16,0) 30%,rgba(14,17,16,.26) 62%,rgba(14,17,16,.64) 100%)}
.sec.photo .wrap{position:relative;z-index:2;width:100%;
  padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(36px,5vw,64px)}
.sec.photo .kicker{color:#fff;border-left-color:var(--accent-l);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.sec.photo h2{color:#fff;max-width:24ch;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.sec.photo p{color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.sec.photo .lede{color:rgba(255,255,255,.92)}
.sec.photo .btn.ghost{color:#fff;border-color:#fff}
.sec.photo .btn.ghost:hover{background:#fff;color:var(--ink)}
@media (max-width:760px){
  .sec.photo .scrim{background:linear-gradient(180deg,rgba(14,17,16,.16) 0%,rgba(14,17,16,.82) 72%)}
}
/* a photo band that ends a page meets the ink footer flush */
main > .sec.photo:last-child{margin-bottom:calc(-1 * var(--band))}

/* ---------- figures ---------- */
figure.ph{margin:0;position:relative}
figure.ph img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--card)}
figure.ph.tall img{aspect-ratio:4/3}
figure.ph.wide img{aspect-ratio:21/9}
figure.ph.natural img{aspect-ratio:auto;object-fit:contain;background:var(--paper)}

/* ---------- split: text beside a figure ---------- */
.split{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:1fr;align-items:center;
  margin-top:clamp(28px,3.4vw,48px)}
.split>*{min-width:0}
@media (min-width:761px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split.fig-first figure.ph{order:-1}}
.split .txt h2,.split .txt h3{margin-bottom:14px}
.split .txt p+p{margin-top:12px}
.split .txt .kicker{margin-bottom:12px}

/* ---------- gallery: three figures across, one on a phone ---------- */
.gallery{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,3.4vw,48px)}
.gallery.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.gallery,.gallery.two{grid-template-columns:1fr}}

/* ---------- numbered steps grid ---------- */
.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  margin-top:clamp(28px,3.4vw,48px)}
.step{border-top:var(--rule) solid var(--line);padding-top:16px;position:relative}
.step::before{content:"";position:absolute;left:0;top:calc(-1 * var(--rule));width:38px;height:var(--rule);background:var(--accent)}
.step .num{display:block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--accent);margin-bottom:10px}
.step h3{font-size:clamp(18px,1.4vw,22px);margin-bottom:8px}
.step p{font-size:15.5px;color:var(--graphite);margin-bottom:0}
.sec.ink .step{border-top-color:rgba(255,255,255,.22)}
.sec.ink .step .num{color:rgba(255,255,255,.62)}
.sec.ink .step p{color:rgba(255,255,255,.78)}

/* ---------- facts: a definition list in columns ---------- */
.facts{display:grid;gap:14px 28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  margin:clamp(28px,3.4vw,48px) 0 0}
.facts div{border-top:var(--rule) solid var(--line);padding-top:10px}
.facts dt{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.facts dd{font-size:16px;color:var(--ink);margin:0}
.sec.ink .facts div{border-top-color:rgba(255,255,255,.22)}
.sec.ink .facts dt{color:rgba(255,255,255,.62)}
.sec.ink .facts dd{color:rgba(255,255,255,.86)}

/* ---------- tick list and refuse list ---------- */
ul.tick{list-style:none;padding:0;margin:clamp(20px,2.4vw,32px) 0 0}
ul.tick li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--ink)}
ul.tick li::before{content:"";position:absolute;left:0;top:.66em;width:12px;height:2px;background:var(--accent)}
ul.tick.refuse li::before{width:10px;height:10px;top:.5em;border:2px solid var(--accent);background:transparent;border-radius:50%}
.sec.ink ul.tick li{color:rgba(255,255,255,.86)}
.sec.ink ul.tick li::before{background:var(--accent-l)}
.sec.ink ul.tick.refuse li::before{border-color:var(--accent-l);background:transparent}

/* ---------- the CTA band ---------- */
.cta-band{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:clamp(40px,5vw,64px)}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.cta-band h2{font-size:clamp(26px,3.4vw,40px);max-width:22ch;margin-bottom:8px}
.cta-band p{color:var(--graphite);margin-bottom:0;max-width:52ch}
.cta-band .btns{margin-top:0}
main > .cta-band:last-child{margin-bottom:calc(-1 * var(--band))}

/* ---------- line-art watermarks: ink on paper, multiplied, ten per cent ---------- */
.wm{position:relative;overflow:hidden}
.wm>.wrap{position:relative;z-index:1}
.wm::before{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;
  background-size:auto 118%;background-position:right -6% center;mix-blend-mode:multiply;opacity:.10;
  -webkit-mask-image:radial-gradient(ellipse 78% 88% at 50% 50%,#000 42%,transparent 100%);
  mask-image:radial-gradient(ellipse 78% 88% at 50% 50%,#000 42%,transparent 100%)}
.wm.wm-1::before{background-image:url("../img/es-wm-1-1400.webp")}
.wm.wm-2::before{background-image:url("../img/es-wm-2-1400.webp");background-position:left -8% center;background-size:auto 124%}
.wm.wm-3::before{background-image:url("../img/es-wm-3-1400.webp");background-size:auto 126%;background-position:right -2% center}
.cta-band.wm::before{opacity:.14}
@media (max-width:760px){.wm::before{background-size:auto 72%;opacity:.08}}

/* ---------- print ---------- */
@media print{
  .hero.cine,.sec.photo{min-height:0;background:var(--paper);color:var(--ink)}
  .hero.cine .media,.sec.photo .media,.hero.cine .scrim,.sec.photo .scrim{display:none}
  .hero.cine h1,.sec.photo h2,.sec.photo p,.hero.cine .lede{color:var(--ink);text-shadow:none}
  .hero.cine .kicker,.sec.photo .kicker{color:var(--ink);border-left-color:var(--ink)}
  .wm::before,.cta-band{display:none}
}



/* ============================================================
   R3.0 · 2026-09-11 · THE DEEPENING — grouped navigation, the
   footer with a brand column, and the component set the standard
   carries. Ruled, never rounded.
   ============================================================ */

/* ---------- header: grouped navigation, one row, the ask on the right ---------- */
nav.site .grp{position:relative}
nav.site .grp-t{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--graphite);padding:6px 0;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;
  white-space:nowrap;line-height:inherit}
nav.site .grp-t::after{content:"\00a0\25BE";font-size:9px}
nav.site .grp-t:hover,nav.site .grp.open .grp-t,nav.site .grp.has-current .grp-t{color:var(--ink);border-bottom-color:var(--accent)}
nav.site .grp-m{position:absolute;top:calc(100% + 10px);left:0;min-width:280px;background:var(--paper);border:1px solid var(--line);
  border-top:3px solid var(--accent);box-shadow:0 12px 30px rgba(14,17,16,.10);padding:8px;display:none;z-index:60}
nav.site .grp-m::before{content:"";position:absolute;left:0;right:0;top:-13px;height:13px}   /* the hover bridge */
nav.site .grp.open .grp-m,nav.site .grp:hover .grp-m,nav.site .grp:focus-within .grp-m{display:block}
nav.site .grp-m a{display:block;padding:9px 10px;border-bottom:0;white-space:normal;font-size:12px;line-height:1.3}
nav.site .grp-m a small{display:block;font-family:var(--sans);font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:2px}
nav.site .grp-m a:hover{color:var(--ink);background:var(--card);border-bottom-color:transparent}
nav.site .grp-m a[aria-current="page"]{color:var(--ink);background:var(--card);box-shadow:inset 3px 0 0 var(--accent);border-bottom-color:transparent}
nav.site .grp.right .grp-m{left:auto;right:0}
/* R3.5: the globe, the way steadyeddie.ca carries it: one glyph before the ask, the Languages page behind it */
nav.site .lang-switch{font-size:16px;padding:8px 8px;line-height:1;opacity:.7;border-bottom:2px solid transparent}
nav.site .lang-switch:hover{opacity:1;border-bottom-color:transparent}
nav.site .lang-switch[aria-current="page"]{opacity:1;border-bottom-color:transparent}
nav.site .enq{border:1px solid var(--ink);padding:8px 14px;margin-left:6px;color:var(--ink)}
nav.site .enq:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* a top-level link in the bar (ES-DEC-010): a group button without the caret */
nav.site>a.top{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--graphite);padding:6px 0;border:0;border-bottom:2px solid transparent;background:none;
  white-space:nowrap;line-height:inherit}
nav.site>a.top:hover{color:var(--ink);border-bottom-color:var(--accent)}
nav.site a.top[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
@media (max-width:1280px){
  nav.site .grp{width:100%}
  nav.site .grp-t{display:block;pointer-events:none;width:100%;padding:16px 0 4px;color:var(--muted);font-size:10.5px;letter-spacing:.18em;border:0;text-align:left}
  nav.site .grp-t::after{content:""}
  nav.site .grp-m{position:static;display:block;border:0;box-shadow:none;padding:0;min-width:0}
  nav.site .grp-m::before{display:none}
  nav.site .grp-m a{padding:13px 0;border-bottom:1px solid var(--line);font-size:12px}
  nav.site .grp-m a small{display:none}
  nav.site .grp-m a:hover,nav.site .grp-m a[aria-current="page"]{background:none;box-shadow:none;border-bottom-color:var(--line)}
  /* in the burger menu the top-level link is a plain row, sitting above the ask */
  nav.site>a.top{display:block;width:100%;font-size:12px;letter-spacing:.1em;padding:13px 0;
    border-bottom:1px solid var(--line);color:var(--graphite)}
  nav.site>a.top[aria-current="page"]{color:var(--ink);border-bottom-color:var(--line)}
  nav.site .lang-switch{font-size:12px;opacity:1;padding:13px 0;border-bottom:1px solid var(--line)}
  nav.site .lang-switch::after{content:"\00a0\00a0Languages";font-family:var(--mono);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
  nav.site .enq{margin:16px 0 8px;text-align:center;padding:13px;width:100%}
}

/* ---------- footer: a brand column beside the four link columns ---------- */
footer.site .fgrid{display:grid;gap:28px 24px;grid-template-columns:1.5fr repeat(5,1fr)}
@media (max-width:1100px){footer.site .fgrid{grid-template-columns:repeat(3,1fr)}footer.site .brandcol{grid-column:1/-1}}
@media (max-width:760px){footer.site .fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){footer.site .fgrid{grid-template-columns:1fr}}
footer.site .brandcol .logo-plate{display:inline-block;background:#fff;padding:10px 14px;margin-bottom:14px;line-height:0}
footer.site .brandcol .logo-plate img{height:32px;width:auto;display:block}
footer.site .brandcol p{font-size:14.5px;color:rgba(255,255,255,.72);max-width:40ch;margin-bottom:0}

/* ---------- section head, measures, utilities ---------- */
.sec-head{margin-bottom:clamp(24px,3.4vw,44px)}
.sec-head h2{margin-bottom:12px}
.sec-head .lede{margin-bottom:0}
.wrap.narrow{max-width:900px}
hr.rule{border:0;border-top:2px solid var(--accent);width:56px;margin:18px 0 22px}
.sec.ink hr.rule{border-top-color:var(--accent-l)}

/* ---------- cards and card grids ---------- */
.grid{display:grid;gap:clamp(16px,2.2vw,26px);margin-top:clamp(28px,3.4vw,48px)}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.grid.rows-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.grid.rows-3{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);padding:clamp(20px,2.4vw,28px);position:relative;display:flex;flex-direction:column}
.sec:not(.tint) .card{background:var(--card)}
.card .k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.card h3{margin-bottom:10px}
.card p{font-size:15.5px;color:var(--graphite);margin-bottom:8px}
.card p:last-child{margin-bottom:0}
.card ul,.card ol{margin-bottom:0}
.card li{font-size:15.5px;color:var(--graphite)}
.card.rule-top{border-top:3px solid var(--accent)}
.card .n{position:absolute;top:16px;right:18px;font-family:var(--disp);font-weight:700;font-size:28px;line-height:1;color:var(--line)}
.card .btn-text{margin-top:auto;padding-top:14px}
a.card{text-decoration:none;color:inherit}
a.card:hover{border-color:var(--accent)}
.choose .card:last-child{border-top:3px solid var(--accent)}
.sec.ink .card,.sec:not(.tint).ink .card{background:transparent;border-color:rgba(255,255,255,.2)}
.sec.ink .card p,.sec.ink .card li{color:rgba(255,255,255,.8)}
.sec.ink .card .k{color:rgba(255,255,255,.62)}
.sec.ink .card .n{color:rgba(255,255,255,.18)}
.grid.g3>.card>h3,.grid.g4>.card>h3{min-height:2.3em}

/* ---------- compare: two or three columns side by side, one marked ---------- */
.compare{display:grid;gap:clamp(14px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-top:clamp(28px,3.4vw,48px)}
.compare .col{border:1px solid var(--line);padding:clamp(18px,2.2vw,26px);background:var(--paper)}
.compare .col.now{border-top:3px solid var(--accent)}
.compare .col .k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);margin-bottom:10px}
.compare .col.now .k{color:var(--accent)}
.compare .col h3{margin-bottom:10px}
.compare .col p,.compare .col li{font-size:15.5px;color:var(--graphite)}
.compare .col p:last-child{margin-bottom:0}
.sec.ink .compare .col{background:transparent;border-color:rgba(255,255,255,.2)}
.sec.ink .compare .col p,.sec.ink .compare .col li{color:rgba(255,255,255,.8)}
.sec.ink .compare .col .k{color:rgba(255,255,255,.62)}
.sec.ink .compare .col.now .k{color:var(--accent-l)}

/* ---------- quote ---------- */
.quote{font-family:var(--disp);font-weight:600;font-size:clamp(22px,2.6vw,34px);line-height:1.12;text-transform:none;letter-spacing:0;
  color:var(--ink);max-width:26ch;margin:clamp(20px,2.4vw,32px) 0 0}
.quote+.src{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:12px;max-width:none}
.sec.ink .quote{color:#fff}
.sec.ink .quote+.src{color:rgba(255,255,255,.6)}

/* ---------- note and aside box ---------- */
.note{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--graphite);padding:20px 24px;margin:22px 0;max-width:72ch}
.note .k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);margin-bottom:8px}
.note p{font-size:15.5px;color:var(--ink);margin-bottom:0}
.note p+p{margin-top:8px}
.aside-box{border:1px solid var(--line);border-top:3px solid var(--accent);padding:20px 22px;background:var(--paper);margin-top:clamp(24px,3vw,40px);max-width:72ch}
.aside-box .k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.aside-box p{font-size:15px;color:var(--graphite);margin-bottom:0}
.aside-box p+p{margin-top:8px}
.sec.ink .note,.sec.ink .aside-box{background:transparent;border-color:rgba(255,255,255,.22)}
.sec.ink .note{border-left-color:rgba(255,255,255,.5)}
.sec.ink .note .k{color:rgba(255,255,255,.62)}
.sec.ink .note p,.sec.ink .aside-box p{color:rgba(255,255,255,.86)}
.sec.ink .aside-box{border-top-color:var(--accent-l)}
.sec.ink .aside-box .k{color:var(--accent-l)}

/* ---------- on-this-page sub-navigation ---------- */
.subnav{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:clamp(24px,3vw,36px);max-width:none}
.subnav .lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.subnav a{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
h2[id],h3[id],section[id]{scroll-margin-top:84px}

/* ---------- glossary ---------- */
.gloss{display:grid;grid-template-columns:1fr;margin:clamp(28px,3.4vw,48px) 0 0}
.gloss div{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:12px 24px;padding:14px 0;border-top:1px solid var(--line)}
.gloss div:last-child{border-bottom:1px solid var(--line)}
.gloss dt{font-family:var(--disp);font-weight:600;font-size:20px;text-transform:uppercase;line-height:1.1;color:var(--ink)}
.gloss dt small{display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--accent);margin-top:4px}
.gloss dd{margin:0;font-size:15.5px;color:var(--graphite);max-width:68ch}
@media (max-width:640px){.gloss div{grid-template-columns:1fr;gap:6px}}
.sec.ink .gloss div{border-color:rgba(255,255,255,.2)}
.sec.ink .gloss dt{color:#fff}
.sec.ink .gloss dd{color:rgba(255,255,255,.8)}

/* ---------- the strip: figures in a row that scrolls sideways ---------- */
.strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-top:clamp(28px,3.4vw,48px)}
.strip figure.ph{flex:0 0 300px;scroll-snap-align:start}
.strip figure.ph img{aspect-ratio:4/3}

/* ---------- text links, small buttons ---------- */
.btn-text{display:inline-block;padding:6px 0;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.btn-text::after{content:"\00a0\2192"}
.btn-text:hover{color:var(--accent-l)}
.btn-text+.btn-text{margin-left:22px}
.sec.ink .btn-text,.sec.photo .btn-text,.hero.cine .btn-text{color:#fff}
.sec.ink .btn-text:hover,.sec.photo .btn-text:hover,.hero.cine .btn-text:hover{color:var(--accent-l)}
.btn.small{padding:10px 16px;font-size:11px}

/* ---------- tables: a key cell ---------- */
.tbl td.k{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--accent);white-space:nowrap}
@media (max-width:760px){table.tbl td.k{font-family:var(--disp);font-size:19px;letter-spacing:0;text-transform:uppercase;white-space:normal;color:var(--ink);padding-top:2px}
  table.tbl td.k::before{content:none}}

/* ---------- facts: a second line under a value ---------- */
.facts dd small{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.sec.ink .facts dd small{color:rgba(255,255,255,.6)}

/* ---------- the form ---------- */
.form{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:clamp(24px,3vw,40px);position:relative}
.form .full{grid-column:1/-1}
.form label{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);margin-bottom:6px}
.form label .req{color:var(--accent)}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid #C9D1CC;padding:12px 14px;min-height:50px}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(0,84,50,.14)}
.form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%233A423E' stroke-width='2'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.form .help{font-size:13px;color:var(--muted);margin-top:6px}
.form .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-status{font-size:15px;margin-top:6px;min-height:1.4em}
.form-status.ok{color:var(--ink);font-weight:600}
.form-status.err{color:var(--accent);font-weight:600}
@media (max-width:760px){.form .btn{width:100%}}

/* ---------- motion, only where it is welcome ---------- */
@media (prefers-reduced-motion: no-preference){
  a.card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
  a.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(14,17,16,.10)}
  .btn{transition:transform .15s ease,background .2s,color .2s,border-color .2s}
  .btn:hover{transform:translateY(-1px)}
  .btn-text::after{display:inline-block;transition:transform .2s ease}
  .btn-text:hover::after{transform:translateX(4px)}
  html.rv-armed .rv img{opacity:0;transition:opacity .9s ease .1s}
  html.rv-armed .rv.in img{opacity:1}
  table.tbl tbody tr{transition:background .15s}
  table.tbl tbody tr:hover{background:rgba(0,84,50,.04)}
  header.site{transition:box-shadow .2s}
  html.scrolled header.site{box-shadow:0 6px 24px rgba(14,17,16,.08)}
}

/* ---------- print ---------- */
@media print{
  .subnav,.form,.strip{display:none}
  .card,.compare .col,.note,.aside-box,.gloss div{border-color:#999}
  nav.site .grp-m{display:block;position:static;border:0;box-shadow:none}
}

/* ============================================================
   R0.2 (TCT) · THE REAL LOCKUP — owner-supplied, 2026-09-11
   Supersedes R0.1's set-type placeholder. .lockup now carries the actual
   image (the metallic red-and-silver "T" wing mark) plus a small "by Even
   Steven" caption underneath, per the ruled pairing — the caption is the
   one thing the placeholder got right and is kept as its own line rather
   than folded into the image.
   ============================================================ */
.lockup{display:flex;flex-direction:column;line-height:1;text-decoration:none;flex:0 0 auto;gap:4px}
.lockup img{height:clamp(30px,2.8vw,36px);width:auto;display:block}
.lockup .by{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
footer.site .brandcol .logo-plate .by{display:block;margin-top:8px;color:rgba(255,255,255,.6)}
.sec.ink .lockup .by{color:rgba(255,255,255,.6)}
