/* ==========================================================================
   biozar.tech — site.css — the design system (references/design-brief.md §3, §4, §8)

   Shared by every page and all three languages. Page-specific CSS stays inline and small.

   Fonts: the page head links /fonts/fonts.css (generated by tools/fetch-fonts.py,
   Latin + Cyrillic subsets) BEFORE this file and preloads the three 400 Latin faces
   (the per-weight files are identical variable fonts, so one preload per family covers
   every weight). This file deliberately does not @import fonts.css — an @import would
   serialise the request behind site.css.

   Grounds: a section sets data-ground="bark" | "linen" | "linen-2" and the role
   tokens (--fg, --fg-2, --rule, --rule-strong, --accent-text, --g, --g-2, --ghost,
   --btn-*) re-map. Copy never picks a colour; it picks a role.

   Rules and type never touch: every component that draws a hairline pays its own
   clearance with padding on both sides of the rule (≥ 8px after the line-box inset that
   tools/gates.mjs applies; chips 8px 10px, cells 14px 16px, panels 26px). Panels divide
   cells with gap:1px over a --rule ground and opaque cells, so a caller cannot collapse
   the clearance.

   Scenes (§15, §17, §18, §19): a stage is any [data-stage] (class .stage optional);
   the factory in scene.js adds .is-gl to it after the first frame, which fades the
   canvas in and hides the .scene-fb twin. Every twin is in the DOM before the script,
   so nothing depends on JavaScript for visibility.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* grounds */
  --bark:#1E1710; --bark-2:#3A2C1E; --linen:#F2EDE1; --linen-2:#E7E0D0;
  /* text on linen */
  --ink:#1B1712; --ink-2:#5C5347;
  /* text on bark */
  --linen-dim:rgba(242,237,225,.66);
  /* attention */
  --amber:#C8922A; --amber-hover:#DBA640; --amber-text:#7A5412;
  /* the scene's colours — never UI fills */
  --chloro:#6E8F3C; --chloro-deep:#2E4A22; --bleach:#ECDDB0; --sky:#D3DFE2; --moss:#55603A;
  /* rules */
  --rule-linen:rgba(27,23,18,.16); --rule-bark:rgba(242,237,225,.22);
  --rule-strong-linen:rgba(27,23,18,.32); --rule-strong-bark:rgba(242,237,225,.42);

  /* type */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Golos Text',Inter,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --fs-display:clamp(48px,7.6vw,116px);
  --fs-h2:clamp(38px,4.6vw,68px);
  --fs-h3:clamp(26px,2.3vw,34px);
  --fs-reading-xl:clamp(40px,5vw,80px);
  --fs-reading:clamp(30px,3.3vw,46px);
  --fs-ledger:clamp(26px,2.3vw,34px);
  --fs-lede:clamp(17px,1.25vw,19px);
  --fs-body:17px; --fs-small:15px; --fs-caption:13px; --fs-mono:12px;
  --lh-display:.94; --lh-h2:1.02; --lh-h3:1.12; --lh-body:1.55; --lh-lede:1.5;
  --tr-display:-.025em; --tr-h2:-.022em; --tr-h3:-.015em; --tr-reading:-.02em; --tr-mono:.08em;

  /* space, container, grid */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --sec-pad:clamp(72px,9vw,128px);
  --gutter:clamp(20px,4vw,64px);
  --container:1440px;
  --col-gap:24px;
  --nav-h:72px;
  --radius:3px;
  --hair:1px;

  /* motion */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --d-hover:.35s; --d-reveal:.8s; --d-stagger:70ms; --d-nav:.5s; --d-canvas-in:.6s;
}

/* role tokens — linen is the default ground */
:root,[data-ground="linen"]{
  --fg:var(--ink); --fg-2:var(--ink-2);
  --rule:var(--rule-linen); --rule-strong:var(--rule-strong-linen);
  --accent-text:var(--amber-text);
  --g:var(--linen); --g-2:var(--linen-2);
  --ghost:rgba(27,23,18,.3);
  --field-edge:rgba(27,23,18,.55);   /* form controls only: filled with their own ground, so the border is the control — WCAG 1.4.11 wants 3:1, and --rule-strong measures 2.00:1 there */
  --btn-bg:var(--bark); --btn-fg:var(--linen); --btn-hover:var(--bark-2);
  --bar-fill:var(--chloro-deep);
  --grid-line:var(--sky);
}
[data-ground="linen"]{background:var(--linen);color:var(--ink)}
[data-ground="linen-2"]{
  --fg:var(--ink); --fg-2:var(--ink-2);
  --rule:var(--rule-linen); --rule-strong:var(--rule-strong-linen);
  --accent-text:var(--amber-text);
  --g:var(--linen-2); --g-2:var(--linen);
  --ghost:rgba(27,23,18,.3);
  --field-edge:rgba(27,23,18,.55);
  --btn-bg:var(--bark); --btn-fg:var(--linen); --btn-hover:var(--bark-2);
  --bar-fill:var(--chloro-deep);
  background:var(--linen-2);color:var(--ink)
}
[data-ground="bark"]{
  --fg:var(--linen); --fg-2:var(--linen-dim);
  --rule:var(--rule-bark); --rule-strong:var(--rule-strong-bark);
  --accent-text:var(--bleach);
  --g:var(--bark); --g-2:var(--bark-2);
  --ghost:rgba(242,237,225,.5);
  --field-edge:rgba(242,237,225,.62);
  --btn-bg:var(--amber); --btn-fg:var(--bark); --btn-hover:var(--amber-hover);
  --bar-fill:var(--chloro);
  background:var(--bark);color:var(--linen)
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bark);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
body{min-height:100vh;background:var(--linen);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--sans);overflow-x:hidden}
main{display:block}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;border-spacing:0}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
sub,sup{font-size:.7em;line-height:0}
sub{vertical-align:-.25em}
sup{vertical-align:.45em}
::selection{background:var(--amber);color:var(--bark)}
/* the focus ring follows the ground, exactly as the form fields already do (§20): --amber #C8922A on
   --linen is 2.37:1 and fails SC 1.4.11, so on paper the ring is --amber-text (5.5:1 on linen,
   5.15:1 on linen-2) and only on bark does it stay --amber (6.4:1). Brief §8.3. */
:focus-visible{outline:2px solid var(--amber-text);outline-offset:3px}
[data-ground="bark"] :focus-visible,.nav:not(.is-solid) :focus-visible,.nav-panel :focus-visible,.lang-list :focus-visible,.footer :focus-visible{outline-color:var(--amber)}
/* over a live shader the ground is not knowable: the hero CTAs and the skip link take a two-tone
   ring — linen line, ink halo — so one of the two always clears 3:1 whatever the scene draws.
   Not --amber: the hero's primary CTA is itself amber-filled and an amber ring on it vanishes. */
.hero :focus-visible,.skip:focus-visible{outline-color:var(--linen);box-shadow:0 0 0 5px rgba(30,23,16,.92)}
/* Sections that the in-page anchor handler scrolls to are focused programmatically (tabindex -1)
   so a screen reader lands there. They get no ring: the generic 2px outline drawn around a 170vh
   hero or a whole figure is a brown line at the section's top edge — seen after the Home scroll
   cue was clicked and the reader came back up — not a focus indicator anyone can use. */
.hero:focus-visible,.sec:focus-visible,.hero:focus,.sec:focus{outline:0}
.sr,.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* text for assistive tech only; tools/gates.mjs skips both names */
.skip{position:fixed;left:var(--gutter);top:-100px;z-index:60;padding:0 18px;min-height:44px;display:inline-flex;align-items:center;background:var(--bark);color:var(--linen);border-radius:var(--radius);font-weight:500;transition:top .2s var(--ease-out)}
.skip:focus-visible{top:12px}

/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{font-weight:400;color:var(--fg)}
h1{font:400 var(--fs-display)/var(--lh-display) var(--serif);letter-spacing:var(--tr-display);text-wrap:balance;hanging-punctuation:first;margin-left:-.04em;font-variant-numeric:lining-nums tabular-nums}
h2{font:400 var(--fs-h2)/var(--lh-h2) var(--serif);letter-spacing:var(--tr-h2);text-wrap:balance;margin-left:-.03em;font-variant-numeric:lining-nums tabular-nums}
h3{font:400 var(--fs-h3)/var(--lh-h3) var(--serif);letter-spacing:var(--tr-h3);text-wrap:balance;font-variant-numeric:lining-nums tabular-nums}
h4{font:500 var(--fs-body)/1.35 var(--sans)}
/* one accent per headline: the italic last word, in --accent-text (bleach on bark) */
h1 i,h2 i,h3 i{font-style:italic;font-weight:400;color:var(--accent-text)}
/* or the leading figure */
h1 .fig-lead,h2 .fig-lead{color:var(--accent-text)}
.serif-num,.reading strong,.ledger strong,.cell strong,.day strong,.readout,.table{font-variant-numeric:lining-nums tabular-nums}
.mono{font:500 var(--fs-mono)/1.4 var(--mono);letter-spacing:var(--tr-mono);text-transform:uppercase;font-variant-numeric:tabular-nums}
.mono-2{color:var(--fg-2)}
/* the chip: 8px of padding on every side of a 12px mono line — 28px inside its hairline, 30px outside */
.chip{display:inline-flex;align-items:center;gap:6px;font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.06em;text-transform:none;padding:8px 10px;border:1px solid var(--rule);border-radius:2px;color:var(--fg-2);white-space:nowrap;vertical-align:middle;font-variant-numeric:tabular-nums}
.chip.is-amber{color:var(--accent-text);border-color:currentColor}
.lede{font:400 var(--fs-lede)/var(--lh-lede) var(--sans);max-width:46ch;color:var(--fg);text-wrap:pretty}
.lede b,.prose b,p b{font-weight:600}
.prose{max-width:46ch;color:var(--fg)}
.prose p+p,.prose ul+p,.prose p+ul{margin-top:1em}
.prose ul{list-style:none;padding-left:0}
.prose li{padding-left:18px;position:relative}
.prose li::before{content:"·";position:absolute;left:4px;color:var(--fg-2)}
.sub{font-size:var(--fs-lede);line-height:1.5;color:var(--fg-2);max-width:46ch;text-wrap:pretty}
.small{font-size:var(--fs-small);line-height:1.5}
.caption{font-size:var(--fs-caption);line-height:1.55;color:var(--fg-2);max-width:60ch;text-wrap:pretty}
/* the same rule .lede and .sub already carry, extended to the rest of the caption family: a photo
   caption ending on "stand." alone, or a table note on "printed.", is the one-word last line the
   whole page is set to avoid */
figcaption,.note,.notes p,.caption.small{text-wrap:pretty}
.muted{color:var(--fg-2)}
.accent{color:var(--accent-text)}
i.sp,.sp{font-style:italic}                       /* Latin species names */
.brandname{font-weight:500;letter-spacing:0}      /* BIOSTAT / BIOZAR in running text */
p a:not(.btn):not(.arrow-link),.prose li a,.caption a,.textlink{color:var(--accent-text);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;text-decoration-color:var(--rule);transition:text-decoration-color var(--d-hover) var(--ease-out)}
p a:not(.btn):not(.arrow-link):hover,.prose li a:hover,.caption a:hover,.textlink:hover{text-decoration-color:currentColor}
.arrow-link{display:inline-block;padding:10px 0;font-weight:500;line-height:1.45;color:var(--fg)}
.arrow-link svg{display:inline-block;width:16px;height:16px;vertical-align:-2px;margin-left:8px;transition:transform var(--d-hover) var(--ease-out)}
.arrow-link:hover svg,.arrow-link:focus-visible svg{transform:translateX(4px)}
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;color:var(--fg-2);max-width:72ch}
.kicker b{font-weight:500;color:var(--accent-text)}
.kicker i{font-style:italic;text-transform:none;letter-spacing:.02em}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sec{position:relative;padding-block:var(--sec-pad)}
.sec--tight{padding-block:calc(var(--sec-pad) * .62)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.span-12{grid-column:1/-1}
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--s-7);align-items:start}
.split>.statement{grid-column:1/6;position:sticky;top:calc(var(--nav-h) + 32px);align-self:start}
.split>.evidence{grid-column:7/13;min-width:0}
.split>.evidence--wide{grid-column:6/13}
.statement h2+.prose,.statement h2+.sub,.statement h2+p{margin-top:var(--s-6)}
.statement .btn,.statement .arrow-link{margin-top:var(--s-6)}
.stack>*+*{margin-top:var(--s-5)}
.stack-l>*+*{margin-top:var(--s-7)}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--s-5);align-items:end;margin-bottom:var(--s-8)}
.sec-head h2{grid-column:1/9}
.sec-head .sub{grid-column:9/13;padding-bottom:6px}
.sec-head--full h2{grid-column:1/-1}

/* --------------------------------------------------------------------------
   4b. Home's introduction band (brief §15.12) — a compact linen band before the
   canopy: who BIOZAR is, what BIOSTAT is, where to go. The headline on the left
   eight tracks, the paragraph on the right four on its baseline, the row of four
   on the rule (the row pays for its own rule: 24px of padding over it). The trial
   hero keeps every word under it, its headline demoted to an h2 at h1 size so the
   page keeps one h1. The bar is solid from the first pixel (baked in the markup).
   -------------------------------------------------------------------------- */
.intro{padding-top:calc(var(--nav-h) + clamp(44px,7vh,80px));padding-bottom:clamp(40px,5vh,56px)}   /* the band is as tall as its copy plus this padding, on every screen: a 64svh box with the copy pinned to its foot left a 200px hole under the bar at 1920 × 1080 */
.intro-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--s-6);align-items:end}
.intro .kicker{grid-column:1/-1;max-width:none;font-size:var(--fs-mono)}
.intro h1{grid-column:1/8;font-size:clamp(40px,4.6vw,68px);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);margin-left:-.03em}
.intro .lede{grid-column:8/13;align-self:end;padding-bottom:6px;max-width:none}
.intro .go{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;padding-top:var(--s-5);border-top:1px solid var(--rule)}
/* the scroll cue (2026-09-07): a ringed chevron centred under the row of four, on the seam where
   the band meets the canopy, pointing at the trial. The chevron bobs while the page is at rest,
   the whole cue fades once the reader has moved (html.is-scrolled, from site.js), and under
   reduced motion it simply stands. Desktop only: on a phone the band already reaches the fold,
   so a cue there would sit under it. The ring is the 44px target; the label clears the rule
   above through the row's own padding. */
.intro .scroll-cue{grid-column:1/-1;justify-self:center;display:none;flex-direction:column;align-items:center;gap:10px;margin-top:20px;margin-bottom:-4px;color:var(--fg-2);text-decoration:none;transition:opacity .4s var(--ease-out)}
.intro .scroll-cue .mono{font-size:11px;letter-spacing:.16em}
.intro .cue-ring{width:44px;height:44px;border:1px solid var(--rule-strong);border-radius:50%;display:grid;place-items:center;color:var(--fg);transition:border-color var(--d-hover) var(--ease-out),color var(--d-hover) var(--ease-out),transform var(--d-hover) var(--ease-out)}
.intro .cue-ring svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.intro .scroll-cue:hover .cue-ring,.intro .scroll-cue:focus-visible .cue-ring{border-color:var(--amber);color:var(--amber-text);transform:translateY(2px)}
html.js-on .intro .cue-ring svg{animation:cue-bob 1.8s var(--ease-in-out) infinite}
html.js-on.is-scrolled .intro .scroll-cue{opacity:0;pointer-events:none}
@keyframes cue-bob{0%,100%{transform:translateY(-2px);opacity:.5}50%{transform:translateY(3px);opacity:1}}
@media (min-width:861px){.intro .scroll-cue{display:inline-flex}}
.hero .hero-h1{grid-column:1/12;font:400 var(--fs-display)/var(--lh-display) var(--serif);letter-spacing:var(--tr-display);text-wrap:balance;hanging-punctuation:first;margin-left:-.04em;color:var(--linen);font-variant-numeric:lining-nums tabular-nums}
.hero .hero-h1 i{color:var(--bleach)}

/* --------------------------------------------------------------------------
   5. Nav — one bar for every page (brief §8.1)
   Transparent over a hero (linen type); .is-solid once scrolled past 72vh on hero
   pages, baked into the markup from the start on linen-headed pages so it never
   depends on JavaScript.
   -------------------------------------------------------------------------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--nav-h);display:flex;align-items:center;gap:28px;padding:0 var(--gutter);
  --fg:var(--linen);--fg-2:var(--linen-dim);--rule:var(--rule-bark);--accent-text:var(--amber);
  color:var(--fg);background:rgba(242,237,225,0);transition:background var(--d-nav) var(--ease-in-out),color var(--d-nav) var(--ease-in-out),box-shadow var(--d-nav) var(--ease-in-out)}
.nav.is-solid{--fg:var(--ink);--fg-2:var(--ink-2);--rule:var(--rule-linen);--accent-text:var(--amber-text);background:rgba(242,237,225,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 -1px 0 var(--rule)}
html:not(.js-on) .nav{position:absolute}
.brand{display:inline-flex;align-items:baseline;gap:10px;min-height:44px;padding-top:15px;margin-right:auto;font:600 15px/1 var(--sans);letter-spacing:.24em;color:var(--fg);white-space:nowrap}
.brand em{font:400 11px/1 var(--mono);letter-spacing:.06em;font-style:normal;text-transform:none;opacity:.7;transition:opacity var(--d-hover) var(--ease-out)}
.brand:hover em,.brand:focus-visible em{opacity:1}
.nav-links{display:flex;gap:6px}
.nav-panel{display:none}   /* the phone copy of the links: rendered only inside the open .menu at ≤860px, so exactly one of the two lists is ever in the accessibility tree */
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font:500 15px/1 var(--sans);letter-spacing:.01em;position:relative;border-radius:var(--radius);color:var(--fg);white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--accent-text)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);background:var(--amber)}
.nav.is-solid .nav-links a[aria-current="page"]::after{background:var(--amber-text)}   /* --amber on the linen bar measures 2.37:1, under the 3:1 a non-text state indicator owes; over bark it stays --amber at 6.4:1 */
.lang{position:relative}
.lang summary{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0 10px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;border-radius:var(--radius);color:var(--fg)}
.lang summary::after{content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7}
.lang[open] summary::after{transform:translateY(1px) rotate(-135deg)}
/* a 1px ink halo, not a 32px drop shadow: brief §3.1 gives the UI no shadow but the solid nav's own
   inset hairline, and this panel was the only blurred one on the site — in the one place a reader
   looks closely at chrome. The halo detaches it from linen and from the hero alike. */
.lang-list{position:absolute;right:0;top:calc(100% + 8px);min-width:180px;background:var(--bark);color:var(--linen);border:1px solid var(--rule-bark);border-radius:var(--radius);padding:8px;z-index:41;box-shadow:0 0 0 1px rgba(27,23,18,.28)}
.lang-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:0 12px;border-radius:2px;font:500 15px/1 var(--sans);color:var(--linen);white-space:nowrap}
.lang-list a:hover,.lang-list a:focus-visible{background:var(--bark-2)}
.lang-list a.is-active{color:var(--amber)}
.lang-list a.is-active::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
.nav-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;background:var(--amber);color:var(--bark);font:600 15px/1 var(--sans);letter-spacing:.01em;border-radius:var(--radius);white-space:nowrap;transition:background var(--d-nav) var(--ease-in-out),box-shadow var(--d-nav) var(--ease-in-out),transform var(--d-hover) var(--ease-out)}
.nav-cta:hover,.nav-cta:focus-visible{background:var(--amber-hover);transform:translateY(-1px)}
/* over a hero the bar carries no fill: the screen's one amber fill is the hero's own CTA (brief §3.1,
   at most two amber objects per viewport). It goes amber with the bar, once the bar is solid. */
.nav:not(.is-solid) .nav-cta{background:rgba(30,23,16,.55);color:var(--linen);box-shadow:inset 0 0 0 1px rgba(242,237,225,.5)}
.nav:not(.is-solid) .nav-cta:hover,.nav:not(.is-solid) .nav-cta:focus-visible{background:rgba(30,23,16,.78);box-shadow:inset 0 0 0 1px var(--linen)}
.menu{display:none}

/* --------------------------------------------------------------------------
   6. Buttons (brief §8.3)
   -------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--radius);text-decoration:none;font:600 15px/1.2 var(--sans);letter-spacing:.01em;color:var(--fg);border:1px solid transparent;cursor:pointer;text-align:center;transition:transform var(--d-hover) var(--ease-out),background var(--d-hover) var(--ease-out),border-color var(--d-hover) var(--ease-out),color var(--d-hover) var(--ease-out)}
.btn svg{width:16px;height:16px;flex:none;transition:transform var(--d-hover) var(--ease-out)}
.btn:hover svg,.btn:focus-visible svg{transform:translateX(4px)}
.btn .down{transform:rotate(90deg)}                                       /* the same 16px stroked arrow, turned: a button that sends the reader down this page (brief §3.4 allows one arrow glyph, not two) */
.btn:hover .down,.btn:focus-visible .down{transform:rotate(90deg) translateX(4px)}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--btn-hover);border-color:var(--btn-hover);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:var(--ghost);color:var(--fg)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--fg);transform:translateY(-2px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* --------------------------------------------------------------------------
   7. Fig-head — the provenance device on every section (brief §3.3)
   -------------------------------------------------------------------------- */
.fig-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin-bottom:var(--s-6);color:var(--fg-2)}
.fig-tick{flex:none;width:28px;height:1px;background:var(--amber)}
.fig-n{color:var(--fg);white-space:nowrap}
.fig-title{white-space:nowrap}
.fig-line{flex:1 1 24px;min-width:24px;height:1px;background:var(--rule);margin-inline:10px}
.fig-head .chip{flex:none}
.fig-head+h2,.fig-head+h1{margin-top:0}
h2+.sub,h1+.lede{margin-top:var(--s-5)}

/* --------------------------------------------------------------------------
   8. Reading — the site's atom (brief §8.4); honesty marks
   -------------------------------------------------------------------------- */
.reading{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:2px 0 2px 0;color:var(--fg)}
.reading .mono{color:var(--fg-2)}
.reading strong{display:block;font:400 var(--fs-reading)/1 var(--serif);letter-spacing:var(--tr-reading);color:var(--fg);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.reading strong small,.cell strong small,.day strong small{font:400 .44em/1 var(--sans);letter-spacing:0;color:var(--fg-2);margin-left:.34em;white-space:normal}   /* .34em, not the .14em of §8.4: .14em of the unit's own size is 2.8px at a 46px numeral — "7 millionha". Playfair's numerals need the air */
.reading--xl strong{font-size:var(--fs-reading-xl)}
.reading p{font-size:var(--fs-small);line-height:1.5;color:var(--fg-2);max-width:34ch;text-wrap:pretty}   /* .lede and .sub already carry it; a 34ch note is the shortest measure on the site and the likeliest to drop a one-word widow */
.reading .chip{margin-top:auto}
.reading.is-honest{border-left:2px solid var(--amber);background:var(--g-2);padding:18px 20px 20px 22px;border-radius:0 var(--radius) var(--radius) 0}
.is-honest strong,.honest{color:var(--accent-text)}
.readings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6) var(--col-gap);align-items:stretch}   /* stretch, not start: every use of .readings ends in a chip, and the chips land on one line under the tallest note */
.readings--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.readings--2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* the honesty list: gap:1px panel, studied and not-studied at one size */
.honesty{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.honesty li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px 24px;align-items:baseline;padding:16px 20px 18px;background:var(--g)}
.honesty li b{font:400 clamp(20px,1.6vw,24px)/1.2 var(--serif);letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums;color:var(--fg)}
.honesty li>span{display:block;min-width:0}
.honesty li .mono{display:block;color:var(--fg-2);margin-top:5px}
.honesty li small{display:block;font:400 var(--fs-caption)/1.45 var(--sans);color:var(--fg-2);margin-top:4px}
.honesty li b small{display:inline;font:400 max(13px,.56em)/1 var(--sans);letter-spacing:0;color:var(--fg-2);margin:0 0 0 .3em;max-width:none;vertical-align:baseline}   /* the unit after a numeral (brief §3.2), set exactly as BIOSTAT's .spec li .v b small.unit: the same four figures must not set two ways on two pages */
.honesty li.is-honest b small{color:var(--accent-text)}
.honesty li.is-honest{background:var(--g-2);box-shadow:inset 2px 0 0 var(--amber)}
.honesty li.is-honest b{color:var(--accent-text)}

/* --------------------------------------------------------------------------
   9. The cell grid — the eight-cell screen (brief §6 beat 3): gap:1px over --rule,
   opaque padded cells; a caller cannot collapse the clearance
   -------------------------------------------------------------------------- */
.cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.cell{display:flex;flex-direction:column;gap:12px;min-height:250px;padding:26px 26px 28px;background:var(--g);color:var(--fg);transition:background .5s var(--ease-out)}
.cell:hover{background:var(--g-2)}
.cell .mono{color:var(--fg-2)}
.cell strong{display:block;font:400 var(--fs-reading-xl)/1 var(--serif);letter-spacing:var(--tr-reading);color:var(--fg);font-variant-numeric:lining-nums tabular-nums;margin-top:2px}
.cell strong.fit{font-size:clamp(34px,3.9vw,58px);line-height:1.04}
.cell strong.fit-s{font-size:clamp(28px,3vw,46px);line-height:1.08}
.cell p{font-size:var(--fs-small);line-height:1.5;color:var(--fg-2);margin-top:0}   /* the note starts on a second alignment line under the shared value baseline… */
.cell .chip{align-self:flex-start;margin-top:auto}                                  /* …and the cell's slack goes under the note, so the chips land on one line */
.cell.is-honest{background:var(--g-2);box-shadow:inset 2px 0 0 var(--amber)}
.cell.is-honest:hover{background:var(--g-2)}
.cell.is-honest strong{color:var(--accent-text)}
.cells--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cells--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* .cells--fit: one value size for the whole grid, sized to its longest value ("RU 2762422",
   "220 ± 10 g/l"), so the eight values share a baseline row by row; per-cell .fit/.fit-s
   stay for mixed grids where the short figures may run large */
.cells--fit .cell strong,.cells--fit .cell strong.fit,.cells--fit .cell strong.fit-s{font-size:clamp(30px,3.2vw,48px);line-height:1.06}
/* Home's specification grid holds seven cells since the registration tile was retired
   (2026-09-07): on the desktop four-column grid the last cell takes two tracks, so the grid
   closes without an empty slot showing its rule-coloured ground. Not at one column, where a
   span would open a second track. */
@media (min-width:861px){.cells--fit .cell:nth-child(7):last-child{grid-column:span 2}}
/* foot notes under the cells: three mono-labelled lines */
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6) var(--s-7);margin-top:var(--s-7)}
.notes--2{grid-template-columns:repeat(2,minmax(0,1fr))}   /* four lines read as 2 × 2, not 3 + 1 — the contact form's data-handling block */
.notes h3,.notes .note-h{font:500 var(--fs-mono)/1.4 var(--mono);letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--fg-2);margin-bottom:10px}
.notes p{font-size:16px;line-height:1.55;color:var(--fg-2);max-width:40ch;margin-bottom:10px}
.notes p b{color:var(--fg);font-weight:500}

/* --------------------------------------------------------------------------
   10. Tables (brief §8.5)
   -------------------------------------------------------------------------- */
.table-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;max-width:100%}
/* a scroller that is actually clipping says so: macOS overlay scrollbars are invisible until they
   are used, so a column could slide out of a table with no cue at all. site.js sets .is-scrollable
   while scrollWidth > clientWidth and .at-start / .at-end from the scroll position; the mask fades
   the 36px the reader has not reached, on whichever side still holds content. */
.table-scroll.is-scrollable:not(.at-end){-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
.table-scroll.is-scrollable:not(.at-start){-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
.table-scroll.is-scrollable:not(.at-start):not(.at-end){-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.table{width:100%;font-size:var(--fs-small);line-height:1.45;color:var(--fg);border-top:1px solid var(--rule-strong)}
.table th{font:500 var(--fs-mono)/1.4 var(--mono);letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--fg-2);text-align:left;padding:14px 16px;border-bottom:1px solid var(--rule-strong);vertical-align:bottom;white-space:nowrap}
.table td{padding:14px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
.table tbody tr{transition:background var(--d-hover) var(--ease-out),opacity var(--d-reveal) var(--ease-out) var(--stagger,0ms),transform var(--d-reveal) var(--ease-out) var(--stagger,0ms)}
.table tbody tr:hover{background:var(--g-2)}
.table .num,.table td.num,.table th.num{font-family:var(--mono);font-size:13px;letter-spacing:.02em;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.table th.num{font-size:var(--fs-mono)}
.table .key{color:var(--fg)}
.table .sub{display:block;font-size:var(--fs-caption);color:var(--fg-2);margin-top:2px;max-width:none}
.table tr.is-honest td{background:var(--g-2)}
.table tr.is-honest td:first-child{box-shadow:inset 2px 0 0 var(--amber)}
.table tr.is-honest .num,.table tr.is-honest .honest{color:var(--accent-text);font-weight:500}
.table tr.is-key td:first-child{box-shadow:inset 2px 0 0 var(--amber)}
.table tr.is-key td{font-weight:500}
.table tr.is-total td{border-bottom:0;border-top:1px solid var(--rule-strong);padding-top:18px;padding-bottom:20px}
.table tr.is-total td,.table tr.is-total .num{font:400 var(--fs-ledger)/1.1 var(--serif);letter-spacing:var(--tr-h3);font-variant-numeric:lining-nums tabular-nums;color:var(--fg)}
.table tr.is-total td .mono{display:block;font:500 var(--fs-mono)/1.4 var(--mono);letter-spacing:var(--tr-mono);color:var(--fg-2);margin-bottom:6px}
.table tr.is-total:hover{background:transparent}
.table td .chip{vertical-align:baseline}
/* efficacy range bar: <span class="range" style="--lo:72;--hi:98"> on a 0–100 track */
.range{display:block;position:relative;height:6px;width:100%;min-width:120px;background:var(--rule) linear-gradient(90deg,transparent calc(50% - .5px),var(--rule-strong) calc(50% - .5px),var(--rule-strong) calc(50% + .5px),transparent calc(50% + .5px));border-radius:1px;margin:7px 0}
.range::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--lo,0) * 1%);width:calc((var(--hi,0) - var(--lo,0)) * 1%);background:var(--bar-fill);border-radius:1px;transform-origin:left center;transform:scaleX(var(--grow,1));transition:transform var(--d-reveal) var(--ease-out)}
.range::after{content:"";position:absolute;inset:-4px auto -4px calc(var(--lo,0) * 1%);width:calc((var(--hi,0) - var(--lo,0)) * 1%);border-left:1px solid var(--bar-fill);border-right:1px solid var(--bar-fill);transition:opacity var(--d-reveal) var(--ease-out)}
.table tr.is-honest .range::before{background:var(--amber-text)}
.table tr.is-honest .range::after{border-color:var(--amber-text)}
.range-axis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));font:500 var(--fs-mono)/1 var(--mono);letter-spacing:.06em;color:var(--fg-2);margin-top:8px;text-transform:none}
.range-axis span:nth-child(2){text-align:center}.range-axis span:nth-child(3){text-align:right}
/* the honesty row's label, on Home Fig. 1 and BIOSTAT Fig. 1 alike — an honesty mark, so never
   smaller and never greyer than the row it marks (brief §8.4) */
.kept{display:block;margin-top:8px;margin-left:auto;max-width:11ch;color:var(--accent-text);white-space:normal;text-align:right;line-height:1.35}
.table-efficacy td.num .chip{display:inline-flex;margin-top:8px}   /* the honesty row's source, on its own line under the value */
.table td.range-cell{min-width:160px;padding-top:14px}
/* composition bar: width = the upper bound, inner tick = the lower */
.bar{display:block;position:relative;height:6px;width:100%;background:var(--rule);border-radius:1px;margin:7px 0}
.bar::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--hi,0) * 1%);background:var(--bar-fill);border-radius:1px;transform-origin:left center;transform:scaleX(var(--grow,1));transition:transform var(--d-reveal) var(--ease-out)}
.bar::after{content:"";position:absolute;top:-3px;bottom:-3px;left:calc(var(--lo,0) * 1%);width:1px;background:var(--fg)}
.bar.is-amber::before{background:var(--amber)}
/* bars grow on reveal; the final width is always in markup via --lo/--hi */
html.js-on [data-reveal]:not(.is-in) .range::before,html.js-on [data-reveal]:not(.is-in) .bar::before{--grow:0}
html.js-on [data-reveal]:not(.is-in) .range::after{opacity:0}
/* rates: last column mono, right-aligned */
.table-rates td:last-child,.table-rates th:last-child{text-align:right;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
/* schedule strip: May–September calendar, the bar spans the period */
.schedule{table-layout:fixed;min-width:640px}
.schedule th.m{width:9%;text-align:center;padding-inline:4px}
.schedule th.crop{width:18%}
.schedule th.txt{width:27%}
.schedule td.track{padding:20px 0;position:relative;background-image:repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 20%);background-size:100% 100%}
.schedule .sbar{position:absolute;top:50%;height:6px;margin-top:-3px;left:calc(var(--from,0) / 5 * 100%);width:calc((var(--to,5) - var(--from,0)) / 5 * 100%);background:var(--bar-fill);border-radius:1px}
.schedule td.txt{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--fg-2);white-space:nowrap;text-align:right}
/* the ledger (definition rows): mono label · serif value + note */
.ledger{border-top:1px solid var(--rule)}
.ledger>li,.ledger-row{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:12px 24px;padding:22px 0 24px;border-bottom:1px solid var(--rule);align-items:baseline;transition:background var(--d-hover) var(--ease-out),opacity var(--d-reveal) var(--ease-out) var(--stagger,0ms),transform var(--d-reveal) var(--ease-out) var(--stagger,0ms)}
.ledger .mono{color:var(--fg-2);padding-top:9px;transition:color var(--d-hover) var(--ease-out)}
.ledger>li:hover .mono{color:var(--accent-text)}
.ledger strong{display:block;font:400 var(--fs-ledger)/1.12 var(--serif);letter-spacing:var(--tr-h3);color:var(--fg);font-variant-numeric:lining-nums tabular-nums}
.ledger strong small{display:block;font:400 var(--fs-small)/1.45 var(--sans);color:var(--fg-2);margin-top:6px;letter-spacing:0;max-width:52ch}
.ledger .is-honest strong,.ledger .is-honest .mono{color:var(--accent-text)}
.ledger .is-honest{background:var(--g-2);padding-inline:20px 16px;box-shadow:inset 2px 0 0 var(--amber)}
.ledger strong .chip{display:inline-flex;margin-top:10px}
.notes>*{display:flex;flex-direction:column;align-items:flex-start}   /* the chips land on one line under the longest note, as in .readings — a three-line note must not drop its chip 25px below the other two */
.notes .chip{display:inline-flex;margin-top:auto}
.ledger-note{margin-top:22px;font-size:var(--fs-caption);color:var(--fg-2);max-width:60ch;line-height:1.55}
/* dotted-leader list (composition) */
.leaders{font:400 13px/2 var(--mono);letter-spacing:.01em;color:var(--fg-2)}
.leaders li{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.leaders li:first-child{color:var(--fg);font-weight:500}
.leaders .dots{flex:1;border-bottom:1px dotted var(--rule-strong);transform:translateY(-6px);min-width:10px}
.leaders .n{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   11. The specimen plate (from FIGURE 1) — a square hairline frame, cross-hairs,
   corner tags; hosts a scene (canvas + .scene-fb) or a static SVG
   -------------------------------------------------------------------------- */
.plate{position:relative;aspect-ratio:1;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--g);container-type:inline-size}
.plate .scene,.plate .scene-fb{position:absolute;inset:0}
.plate .scene-fb{display:flex;align-items:center;justify-content:center;padding:18%}
.plate .scene-fb svg{width:100%;height:auto;color:var(--fg)}
.plate .tag{position:absolute;z-index:2;font:500 11px/1.45 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);pointer-events:none;max-width:44%}
.plate .tag.tl{top:16px;left:18px}
.plate .tag.tr{top:16px;right:18px;text-align:right}
.plate .tag.bl{bottom:16px;left:18px}
.plate .tag.br{bottom:16px;right:18px;text-align:right}
.plate .tag .o{color:var(--accent-text)}
.plate .tag sub{font-size:11px;line-height:0;vertical-align:baseline;position:relative;top:.22em}   /* C<sub>10</sub>H<sub>18</sub>O — never under 11px */
.plate .cross{position:absolute;z-index:2;width:11px;height:11px;pointer-events:none}
.plate .cross::before,.plate .cross::after{content:"";position:absolute;background:var(--rule-strong)}
.plate .cross::before{left:5px;top:0;width:1px;height:11px}
.plate .cross::after{top:5px;left:0;width:11px;height:1px}
.plate .cross.c1{left:50%;top:14px;margin-left:-6px}
.plate .cross.c2{left:50%;bottom:14px;margin-left:-6px}
.plate .cross.c3{top:50%;left:14px;margin-top:-6px}
.plate .cross.c4{top:50%;right:14px;margin-top:-6px}
.plate .formula{position:absolute;z-index:2;left:18px;bottom:40px;width:64px;height:auto;color:var(--fg);pointer-events:none}
.formula path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.formula text{font:500 11px var(--mono);fill:var(--accent-text)}
/* the small skeletal formula in the molecule plate's bottom-left corner (docs/img/linalool.svg inline, currentColor) */
.plate .skel{position:absolute;z-index:2;left:18px;bottom:16px;width:64px;height:auto;color:var(--fg-2);pointer-events:none}
/* the molecule flattening into its notation (site.js): the canvas and the twin cross-fade
   under inline opacities while .is-flat is on — no transition, the twin visible again */
.plate.is-flat .scene,.plate.is-flat .scene-fb{transition:none}
.plate.is-flat .scene-fb{visibility:visible}
.plate .shadow{position:absolute;left:22%;right:22%;bottom:9%;height:12%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(27,23,18,.14),rgba(27,23,18,0) 68%);pointer-events:none}
.plate--small{max-width:300px}
.plate--small .tag{max-width:72%}
.plate--small .tag.tr,.plate--small .tag.br,.plate--small .cross.c1,.plate--small .cross.c2{display:none}
.plate--small .scene-fb{padding:22% 16%}
/* any plate narrower than 340px drops to the small grammar (browsers without container queries keep the full one) */
@container (max-width:340px){.plate .tag{max-width:72%}.plate .tag.tr,.plate .tag.br,.plate .cross.c1,.plate .cross.c2{display:none}}

/* --------------------------------------------------------------------------
   12. Photographs (brief §9) — figures, never heroes; graded in CSS
   -------------------------------------------------------------------------- */
.ph{margin:0}
.ph-frame{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--linen-2)}
.ph-frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.28) contrast(1.06);transition:filter var(--d-hover) var(--ease-out)}
.ph:hover .ph-frame img{filter:grayscale(1) sepia(.28) contrast(1.06) brightness(1.04)}
.ph-bark .ph-frame{background:var(--bark-2)}
.ph-bark .ph-frame img{filter:grayscale(1) contrast(1.12) brightness(.82);mix-blend-mode:luminosity}
.ph-bark:hover .ph-frame img{filter:grayscale(1) contrast(1.12) brightness(.86)}
.ph-bark .ph-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--bark) 0%,transparent 40%);pointer-events:none}
.ph figcaption{padding-top:12px;font-size:var(--fs-caption);line-height:1.5;color:var(--fg-2);max-width:60ch}
.ph figcaption b{font-weight:500;color:var(--fg)}
.ph-16x9 .ph-frame{aspect-ratio:16/9}
.ph-4x5 .ph-frame{aspect-ratio:4/5}
.ph-1x1 .ph-frame{aspect-ratio:1}
/* the ULV mist band over the pass photograph */
.ph-band{position:absolute;top:0;bottom:0;left:0;width:62%;background:linear-gradient(to right,transparent 0,rgba(236,221,176,.18) 55%,rgba(236,221,176,.42) 100%);mix-blend-mode:screen;pointer-events:none;transform-origin:left;transition:transform var(--d-reveal) var(--ease-out)}
html.js-on [data-reveal]:not(.is-in) .ph-band{transform:scaleX(0)}

/* --------------------------------------------------------------------------
   13. Team portraits (brief §8.9)
   -------------------------------------------------------------------------- */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6) var(--col-gap)}
.person{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start}
.person img{width:96px;height:118px;object-fit:cover;border-radius:var(--radius);background:var(--linen-2);filter:grayscale(1) sepia(.25) contrast(1.08)}
.person b{display:block;font:500 16px/1.3 var(--sans);color:var(--fg);margin-top:2px}
.person span{display:block;font-size:14px;line-height:1.4;color:var(--fg-2);margin-top:4px}

/* --------------------------------------------------------------------------
   14. The contact form (brief §8.7) — the only form; fields name, email, company,
   phone, message, topic
   -------------------------------------------------------------------------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--full{grid-column:1/-1}
.field label,.field .label,.seg legend{font:500 var(--fs-small)/1.3 var(--sans);color:var(--fg)}
.field label small,.seg legend small{font-weight:400;color:var(--fg-2)}
.field input,.field textarea,.field select{width:100%;min-height:52px;padding:0 16px;background:var(--g);color:var(--fg);border:1px solid var(--field-edge);border-radius:var(--radius);font:400 17px/1.4 var(--sans);transition:border-color var(--d-hover) var(--ease-out),box-shadow var(--d-hover) var(--ease-out);-webkit-appearance:none;appearance:none}
.field textarea{min-height:0;padding:14px 16px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--amber-text);box-shadow:0 0 0 2px var(--amber-text)}   /* --amber-text, not --amber: what amber becomes on a light ground (brief §3.1) — and a luminance step from the resting border, not a hue step. The ring is a full 2px like every button's (§8.7): the 1px shadow it replaces rendered as 0.86px of a blended amber, the thinnest indicator on the site on the one surface a keyboard user most needs it. It hugs the 3px radius instead of the global outline's 3px offset, which is why outline stays off here. */
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:none}
.field .err{font-size:var(--fs-small);line-height:1.4;color:var(--accent-text)}   /* the client-side strings of copy-en G.3 — the site's amber, not an alien red the palette does not contain; the .field's own 8px gap sets it off its input */
.field .err:empty{display:none}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--amber-text)}
.field input::placeholder,.field textarea::placeholder{color:transparent}
.field .hint{font-size:var(--fs-small);color:var(--fg-2);max-width:60ch}
.seg{grid-column:1/-1;border:0;padding:0;margin:0;min-width:0}
.seg legend{padding:0;margin-bottom:8px;float:left;width:100%}
.seg-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--field-edge);border:1px solid var(--field-edge);border-radius:var(--radius);overflow:hidden;clear:both}
.seg-in label{position:relative;display:block;min-width:0}
.seg-in input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.seg-in span{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 12px;background:var(--g);color:var(--fg);font:500 15px/1.2 var(--sans);text-align:center;cursor:pointer;transition:background var(--d-hover) var(--ease-out),color var(--d-hover) var(--ease-out)}
.seg-in input:hover+span{background:var(--g-2)}
.seg-in input:checked+span{background:var(--bark);color:var(--linen)}
[data-ground="bark"] .seg-in input:checked+span{background:var(--amber);color:var(--bark)}
.seg-in input:focus-visible+span{outline:2px solid var(--amber);outline-offset:-3px}
.form-foot{grid-column:1/-1;order:1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:6px}   /* order:1 puts the button row last, so an error note reads above it instead of replacing it */
.form-foot .caption{flex:1 1 260px}
.form-note{grid-column:1/-1;display:none;padding:16px 20px;border-left:2px solid var(--amber);background:var(--g-2);color:var(--fg);font:500 var(--fs-mono)/1.5 var(--mono);letter-spacing:.04em}   /* mixed case: the strings of copy-en G.3 carry their own capitals */
.form.is-error .form-note--error{display:block}   /* on an error the copy says "try again", so the button row stays under it */
/* the sent state — the whole form gives way to one panel: a drawn tick, "Thank you.", the line
   that says who replies and where, and a way to send another. A one-line mono note above the
   button row was missed, and readers sent the same request twice. */
.form.is-ok>*{display:none}
.form-done{grid-column:1/-1;display:none;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:clamp(44px,6vw,80px) 24px;background:var(--g-2);border:1px solid var(--rule);border-radius:var(--radius)}
.form.is-ok .form-done{display:flex}
.form-done .tick{width:64px;height:64px;color:var(--amber);margin-bottom:6px}
.form-done .tick circle,.form-done .tick path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.form-done .mono{color:var(--accent-text)}
.form-done h3{font-size:clamp(34px,3.6vw,52px);line-height:1;margin-top:2px}
.form-done p{color:var(--fg-2);max-width:40ch;text-wrap:pretty}
.form-done .btn{margin-top:14px}
html.js-on .form.is-ok .form-done{animation:form-done-in .55s var(--ease-out) both}
html.js-on .form.is-ok .form-done .tick circle{stroke-dasharray:1;stroke-dashoffset:1;animation:form-done-draw .7s var(--ease-out) .15s both}
html.js-on .form.is-ok .form-done .tick path{stroke-dasharray:1;stroke-dashoffset:1;animation:form-done-draw .45s var(--ease-out) .65s both}
@keyframes form-done-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes form-done-draw{to{stroke-dashoffset:0}}
.form.is-sending .btn{opacity:.55;pointer-events:none}
/* the data-handling block (copy-en G.3): last in the form, after the button row, with its own
   clearance on both sides of its hairline — 48px above, 24px below, so a caller cannot collapse it */
.form-privacy{grid-column:1/-1;order:2;margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--rule)}
.form-privacy p{max-width:36ch}
.turnstile{grid-column:1/-1;min-height:65px}
.turnstile:empty{display:none}

/* --------------------------------------------------------------------------
   15. Stage, scene, fallback (brief §5.5) — the factory in scene.js adds .is-gl
   after the first frame; the fallback twin stays until then
   -------------------------------------------------------------------------- */
.stage{position:relative;overflow:hidden;isolation:isolate}
.scene,.scene-fb{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene{z-index:1;opacity:0;transition:opacity var(--d-canvas-in) var(--ease-out)}
.scene-fb{z-index:0}
.is-gl .scene{opacity:1}
/* hidden once the canvas has faded in (same effect as display:none, without a flash
   of ground during the 0.6s fade) */
.is-gl .scene-fb{visibility:hidden;transition:visibility 0s linear var(--d-canvas-in)}
html:not(.js-on) .scene{display:none}

/* --------------------------------------------------------------------------
   16. Reveal states — gated on html.js-on; nothing is hidden without JavaScript, and the
       <head> watchdog takes js-on off again if /site.js never arms the observer (1.2s),
       so a broken module cannot hide the page either
   -------------------------------------------------------------------------- */
[data-reveal]{transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out);transition-delay:var(--stagger,0ms)}
html.js-on [data-reveal]:not(.is-in){opacity:0;transform:translateY(18px)}
html.js-on [data-reveal].is-in{opacity:1;transform:none}
/* an anchor landing clears the sticky bar as a CSS fact, not only because site.js subtracts it:
   /oils.html#fig-2 with JavaScript off must still show the FIG. 2 head below the bar */
section[id],[id].sec,[id].page-head{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* --------------------------------------------------------------------------
   17. Hero — the canopy (home) and the header at rest (company)
   .hero (170vh track) → .hero-stage (sticky 100svh) → canvas + .scene-fb +
   .hero-scrim + .hero-in grid + .days strip
   -------------------------------------------------------------------------- */
.hero{position:relative;height:170vh;color:var(--linen);isolation:isolate;background:var(--bark)}
.hero--static{height:auto;min-height:80vh}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--bark)}
.hero--static .hero-stage{position:relative;height:auto;min-height:80vh}   /* 80vh: the crown band clears the bar and the copy sits in the shade; at 1440 × 900 the fold shows Fig. 1's rule head without slicing its h2 */
.hero .scene,.hero .scene-fb{position:absolute;inset:0;width:100%;height:100%}
/* the canopy's twin (canopy.md §4): one picture from tools/leaf-tile.py — the same crown,
   the same seven openings, the same sun — laid over the stage; the gradient under it is only
   the ground the SVG is cut against while it loads */
.hero .scene-fb{background-image:
    url("/img/leaf-tile.svg"),
    linear-gradient(158deg,#74A3D1 0%,#FFEDBE 44%,#2F3425 100%);
  background-repeat:no-repeat,no-repeat;
  background-position:50% 32%,0 0;
  background-size:cover,cover}
/* the copy ground (canopy.md §5.3). The scene now carries the crown's shade itself — the copy is
   lit differently, not veiled — so these are light: a bar band at the top, a bottom gradient that
   holds only the day strip, and a soft radial that takes the last few per cent behind the lede.
   Stacked, the copy box sits under ~0.30 bark, not the 0.74–0.85 it used to. */
.hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(to bottom,rgba(30,23,16,.62) 0%,rgba(30,23,16,.22) 90px,rgba(30,23,16,0) 190px),
  linear-gradient(to top,rgba(30,23,16,.92) 0%,rgba(30,23,16,.88) 10%,rgba(30,23,16,.62) 20%,rgba(30,23,16,.22) 32%,rgba(30,23,16,0) 46%),   /* the band the day scale stands in: measured composited, the brightest 2% behind DAY 3 and DAY 7 left their mono labels at 3.3:1 — the two unearned readings were the dimmest type on the fold */
  linear-gradient(to right,rgba(30,23,16,.10) 0%,rgba(30,23,16,.04) 38%,rgba(30,23,16,0) 62%)}
.hero-scrim::after{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 62% at 22% 52%,rgba(30,23,16,.12) 0%,rgba(30,23,16,.11) 42%,rgba(30,23,16,.06) 68%,rgba(30,23,16,0) 100%)}
/* the header at rest (company): no day strip, so the copy pays its own bottom clearance. The bar row sits on a
   ≥ .92 bark band feathered out by 250px — the amber you-are-here label needs a ground darker than #303030 for
   4.5:1 (§8.1); the lower gradient is lighter and the copy shadow narrowed to the copy box (62% width), so the
   right half of the frame is open for the canopy in shade (canopy.md §5.3) */
.hero--static .scene-fb{filter:saturate(.82) brightness(1.09) hue-rotate(16deg)}   /* the Company header runs the scene at data-haze="0.6" and heal 0.985: the shared twin is drawn at full haze with the lace still on it, so its gold burns warmer than the healed canvas it stands in for. Regraded here (and nowhere else): the census over rows 72–720 goes green 6.1 → 11.6 % and amber 1.9 → 0.7 % against the canvas's 9.6 / 0.3, so the fallback reads as the same late-afternoon light. Home's twin does not move */
.hero--static .hero-in{padding-bottom:clamp(40px,5.5vh,56px);row-gap:26px}
.hero--static .hero-scrim{background:
  linear-gradient(to bottom,rgba(30,23,16,.92) 0,rgba(30,23,16,.92) 60px,rgba(30,23,16,.55) 110px,rgba(30,23,16,.15) 180px,rgba(30,23,16,0) 250px),
  linear-gradient(to top,rgba(30,23,16,.94) 0%,rgba(30,23,16,.50) 22%,rgba(30,23,16,.14) 44%,rgba(30,23,16,0) 62%),
  linear-gradient(to right,rgba(30,23,16,.30) 0%,rgba(30,23,16,.13) 38%,rgba(30,23,16,0) 62%)}
.hero--static .hero-scrim::after{background:radial-gradient(62% 62% at 22% 52%,rgba(30,23,16,.36) 0%,rgba(30,23,16,.34) 42%,rgba(30,23,16,.20) 68%,rgba(30,23,16,0) 100%)}
.hero-in{position:relative;z-index:3;padding:calc(var(--nav-h) + 24px) var(--gutter) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:28px;align-items:end;width:100%;max-width:var(--container);margin-inline:auto}
.hero-kicker{grid-column:1/9;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;color:var(--linen-dim);font-size:var(--fs-mono)}   /* the mono size, so the first line ends inside the scene's copy clearing (canopy.md §5.2) */
.hero-kicker b{font-weight:500;color:var(--bleach)}
.hero-kicker i{font-style:italic;text-transform:none;letter-spacing:.02em}
.hero-kicker .chip{color:var(--linen-dim);border-color:var(--rule-bark)}
.hero h1{grid-column:1/12;color:var(--linen)}
.hero h1 i{color:var(--bleach)}
.hero-lede{grid-column:1/7;color:rgba(242,237,225,.92)}
.hero-lede b{color:#fff;font-weight:600}
.hero-cta{grid-column:7/13;display:flex;flex-wrap:wrap;gap:12px;justify-self:end;align-self:end}
.hero .btn-primary{background:var(--amber);color:var(--bark);border-color:var(--amber)}
.hero .btn-primary:hover,.hero .btn-primary:focus-visible{background:var(--amber-hover);border-color:var(--amber-hover)}
.hero .btn-ghost{border-color:rgba(242,237,225,.5);color:var(--linen)}
.hero .btn-ghost:hover,.hero .btn-ghost:focus-visible{border-color:var(--linen)}
/* the day scale — real data, lit from the scroll */
.days{position:relative;z-index:3;margin:44px auto 0;padding:18px var(--gutter) 26px;width:100%;max-width:var(--container);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
.days::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:1px;background:var(--rule-bark)}
.days-src{grid-column:1/5;color:var(--linen-dim);font-size:var(--fs-mono);line-height:1.5;padding-top:6px;max-width:36ch;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.days-src b{color:var(--linen);font-weight:500}
.days-src .chip{color:var(--linen-dim);border-color:var(--rule-bark)}
.days ol{grid-column:5/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}
.day{display:flex;flex-direction:column;gap:6px;padding-left:14px;border-left:1px solid var(--rule-bark);transition:border-color .6s var(--ease-out)}
.day .mono{color:rgba(242,237,225,.78);transition:color .6s var(--ease-out)}   /* not --linen-dim: over a canopy rather than solid bark, .66 measured 3.3:1 against the brightest 2% of its own ground */
.day strong{font:400 var(--fs-reading)/1 var(--serif);letter-spacing:var(--tr-reading);color:rgba(242,237,225,.62);transition:color .7s var(--ease-out);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.day small{font-size:var(--fs-mono);color:rgba(242,237,225,.62);line-height:1.4}
/* every figure lit when the scene cannot heal them: no JS, no WebGL (the twin is the healed canopy) */
html:not(.gl-on) .day,.day.is-lit{border-color:var(--amber)}
html:not(.gl-on) .day strong,.day.is-lit strong{color:var(--linen)}
html:not(.gl-on) .day .mono,.day.is-lit .mono{color:var(--amber)}
/* a linen-headed page header (BIOSTAT, Evidence, Oils) */
.page-head{padding:calc(var(--nav-h) + var(--s-8)) 0 var(--s-8)}
.page-head .kicker{margin-bottom:var(--s-6)}
.page-head h1{max-width:18ch}
.page-head .lede{margin-top:var(--s-6)}
.page-head .btn-row{margin-top:var(--s-6)}

/* --------------------------------------------------------------------------
   18. The readout panel (evidence.md §3) — ground --bark-2, one hairline per rule,
   the SVG chart in 1:1 px, the eight-row table with a dedicated strip column that
   the strips scene draws into, the foot strip. Markup: <figure class="readout"
   data-stage data-readout> … (site.js mounts it: Biozar.readout). Pinned on desktop
   inside .readout-track[data-pin-track] > .readout-stage[data-pin-stage]; not pinned
   ≤ 860px — the panel is taller than a phone viewport and its own travel drives it.
   -------------------------------------------------------------------------- */
.readout{position:relative;background:var(--bark-2);color:var(--linen);border:1px solid var(--rule-bark);border-radius:3px;overflow:hidden;min-width:0;
  --fg:var(--linen);--fg-2:var(--linen-dim);--rule:var(--rule-bark);--rule-strong:var(--rule-strong-bark);--accent-text:var(--bleach);--g:var(--bark-2);--g-2:var(--bark)}
.readout-head{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding:16px 22px;border-bottom:1px solid var(--rule-bark)}
.readout-head .mono{color:var(--linen-dim)}
.readout-chart{padding:22px 22px 6px}
.readout-chart svg{display:block;width:100%;height:200px;overflow:visible}
.curves text{font:500 12px/1 var(--mono);letter-spacing:.08em;fill:var(--sky);text-transform:uppercase;font-variant-numeric:tabular-nums}
.curves .grid{stroke:var(--sky);stroke-opacity:.22;stroke-dasharray:2 4;stroke-width:1}
.curves .axis{stroke:var(--rule-strong-bark);stroke-width:1}
.curves path{fill:none;stroke:var(--sky);stroke-opacity:.55;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;transition:stroke-opacity .35s var(--ease-out),stroke-width .35s var(--ease-out)}
.curves path.is-mk{stroke:var(--amber);stroke-opacity:1;stroke-width:2}
.curves path.is-hot{stroke-opacity:1;stroke-width:2.5}
.js-on .curves path{stroke-dasharray:1;stroke-dashoffset:1}          /* pathLength="1": the page drives the offset */
.curves .val{fill:var(--amber);font-weight:500}
.curves .vals text{fill:var(--sky)}
.js-on .curves .val{opacity:0;transition:opacity .4s var(--ease-out)}
.curves .vals{opacity:0;transition:opacity .35s var(--ease-out)}          /* the seven other rows' values: hover / focus only (they live in the table) */
.curves .val.is-on,.curves .vals.is-on{opacity:1}
html:not(.js-on) .readout-chart svg{max-width:720px}                     /* no JS: the static viewBox, authored at the shipped desktop aspect, uniformly scaled and left-aligned */
.curves .pt{fill:var(--bark-2);stroke:var(--amber);stroke-width:2}
.js-on .curves .pt{opacity:0;transition:opacity .4s var(--ease-out)}
.curves .pt.is-on{opacity:1}
.readout-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.readout-grid{position:relative;min-width:600px}
.readout-grid .scene{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.readout-grid .scene-fb{display:none}                                  /* the strips have no twin: the bark ground is the fallback */
html:not(.gl-on) .readout .strip{display:none}                         /* no JS or no WebGL: no strips can be drawn — the column folds and the figures stand alone */
.readout table{position:relative;z-index:1;width:100%;border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}
.readout th,.readout td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule-bark);font:400 15px/1.3 var(--sans);vertical-align:middle}
.readout th:first-child,.readout td:first-child{padding-left:22px}
.readout th:last-child,.readout td:last-child{padding-right:22px}
.readout thead th{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--linen-dim);border-bottom-color:var(--rule-strong-bark);white-space:nowrap}
.readout tbody tr:last-child td{border-bottom:0}
.readout td.num,.readout th.num{font-family:var(--mono);font-weight:500;font-size:14px;text-align:right;white-space:nowrap;letter-spacing:.02em}
.readout td.num{color:var(--linen-dim)}
.readout td.num.d7{color:var(--linen)}
.readout td.strip,.readout th.strip{width:34%;min-width:130px;padding-left:0;padding-right:0}
.readout td.variant b{display:block;font-weight:500;white-space:nowrap}
.readout td.variant small{display:block;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--linen-dim);margin-top:2px}
.readout tbody tr.is-mk td:first-child{box-shadow:inset 2px 0 0 var(--amber)}
.readout tbody tr.is-mk td.d7{color:var(--amber)}
.readout tbody tr{outline:none}
.readout tbody tr:hover td:not(.strip),.readout tbody tr:focus-visible td:not(.strip){background:rgba(242,237,225,.10)}
/* the focused row is ringed, not tinted: a 5% ground is ~1.1:1 against --bark-2, far under the
   3:1 a non-text indicator needs, and a 2px bar on the first cell of a 1,325px row leaves a
   keyboard reader in the Day 7 column 1,300px from the only mark — and reads as the amber bar
   the Biostat MK row already carries in that slot. */
.readout tbody tr:focus-visible td{box-shadow:inset 0 2px 0 var(--linen),inset 0 -2px 0 var(--linen)}
.readout tbody tr:focus-visible td:first-child{box-shadow:inset 0 2px 0 var(--linen),inset 0 -2px 0 var(--linen),inset 2px 0 0 var(--linen)}
.readout tbody tr:focus-visible td:last-child{box-shadow:inset 0 2px 0 var(--linen),inset 0 -2px 0 var(--linen),inset -2px 0 0 var(--linen)}
.readout-foot{display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;padding:14px 22px 16px;border-top:1px solid var(--rule-bark);color:var(--linen-dim)}
.readout-foot em{font-style:normal;color:var(--linen);text-transform:none;letter-spacing:.03em}
.readout-foot .is-honest{color:var(--amber)}                       /* an honesty mark in the foot strip: what the trial report does not state, set as loudly as what it does */
.readout-foot .is-honest em{color:var(--bleach)}
.readout-cap{padding:12px 22px 16px;font-size:var(--fs-caption);line-height:1.5;color:var(--linen-dim);max-width:none}
/* the pin: 220vh of track → the stage sticky for 120vh of scroll (desktop only) */
.readout-track{position:relative;height:220vh;min-width:0}
.readout-stage{position:sticky;top:0;min-height:100svh;padding-top:var(--nav-h);display:flex;flex-direction:column;justify-content:center;min-width:0}
/* the panel is ~830px tall at 1440: on a 900px viewport the builder keeps it under the bar by
   trimming .readout-chart svg to 168px or the row padding to 10px — never by dropping rows */

/* --------------------------------------------------------------------------
   19. Foot strip — four mono readings on a hairline
   -------------------------------------------------------------------------- */
.foot-strip{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding:18px 0 20px;border-top:1px solid var(--rule);color:var(--fg-2);margin-top:var(--s-7)}
.foot-strip span{display:inline-flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.foot-strip em{font-style:normal;color:var(--fg);text-transform:none;letter-spacing:.02em}

/* --------------------------------------------------------------------------
   19b. The pass stage (evidence.md §2, brief §5.3) — a 3:1 window on bark-2 (2:1 on
   phones); the twin is the company's drone photograph in bark grade with the ULV
   band at 62% width. Markup: <div class="stage pass-stage" data-stage> canvas +
   <div class="scene-fb"><img …></div> (an empty twin shows the band on bark-2).
   -------------------------------------------------------------------------- */
.pass-stage{position:relative;aspect-ratio:3/1;background:var(--bark-2);border:1px solid var(--rule-bark);border-radius:var(--radius);overflow:hidden;min-width:0}
.pass-stage .scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.pass-stage .scene-fb{position:absolute;inset:0;background:var(--bark-2)}
.pass-stage .scene-fb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%;filter:grayscale(1) contrast(1.12) brightness(.82);mix-blend-mode:luminosity}
.pass-stage .scene-fb::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--bark) 0%,transparent 40%)}
.pass-stage .scene-fb::after{content:"";position:absolute;top:0;bottom:0;left:0;width:62%;background:linear-gradient(90deg,rgba(236,221,176,0) 0%,rgba(236,221,176,.12) 70%,rgba(236,221,176,.30) 100%)}
.pass-cap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding:14px 0 0;color:var(--fg-2)}
.pass-cap b{color:var(--fg);font-weight:500}
.pass-cap .chip{color:var(--amber);border-color:rgba(200,146,42,.5)}

/* --------------------------------------------------------------------------
   20. Contact band (home beat 10) and the sticky statement's CTA list
   -------------------------------------------------------------------------- */
.band{padding-block:calc(var(--sec-pad) * .8)}
.band-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--s-6);align-items:end}
.band-in h2{grid-column:1/8}
.band-in .prose{grid-column:1/7}
.band-in .btn-row{grid-column:8/13;justify-self:end;flex-direction:column;align-items:stretch;width:100%;max-width:360px}
.band-in .btn-row .btn{justify-content:space-between}

/* --------------------------------------------------------------------------
   21. Footer (brief §8.2)
   -------------------------------------------------------------------------- */
.footer{background:var(--bark);color:var(--linen);position:relative;z-index:3}
.footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-7) var(--col-gap);padding-top:var(--s-8);padding-bottom:var(--s-8)}
/* 16px, not --fs-small: the Provenance expansions are running prose, and the site's prose floor
   is 16px on every page — on the 404, whose only prose is here, the footer is the whole vote */
/* Two halves of the four-column grid: the brand block (wordmark, legal line, description, the
   owner-group line) on the left two tracks, the site map as a 3 × 2 list on the right two. Provenance and the language
   column are gone — the source documents are handed over in a meeting, not read in a footer, and
   the bar's own language control is on every screen. Placement by nth-child: the footer is generated
   chrome (tools/sync-chrome.py) and its column order is identical on every page. */
@media (min-width:861px){
  .footer-col:nth-child(1){grid-column:1/3}
  .footer-col:nth-child(2){grid-column:3/5}
  .footer-col:nth-child(2) ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap)}   /* six entries as 3 × 2 across the right half: one column of six against the far edge left the middle of the footer empty */
}
.footer-col{min-width:0;font-size:16px;line-height:1.5;color:var(--linen-dim)}
.footer-col .brand{padding-top:14px;min-height:44px;margin-bottom:8px;display:inline-flex;align-items:baseline}
.footer-col p{max-width:30ch}
.footer-h{font:500 var(--fs-mono)/1.4 var(--mono);letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--linen-dim);margin-bottom:14px}
.footer-col ul li a{display:inline-flex;align-items:center;min-height:36px;color:var(--linen);position:relative}
.footer-col ul li a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.footer-col ul li a:hover::after,.footer-col ul li a:focus-visible::after{transform:scaleX(1)}
/* the footer's "you are here" is weight and a standing underline, not amber: amber is the CTA and
   the current page in the bar, and four amber objects were landing in the footer viewport at once */
.footer-col ul li a[aria-current="page"],.footer-col ul li a.is-active{font-weight:500}
.footer-col ul li a[aria-current="page"]::after,.footer-col ul li a.is-active::after{transform:scaleX(1)}
.footer-col .textlink{color:var(--linen);text-decoration-color:var(--rule-bark);white-space:nowrap}
.footer-col .textlink:hover{text-decoration-color:currentColor}
.footer-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;padding-block:22px 30px;color:var(--linen-dim);font:500 var(--fs-mono)/1.5 var(--mono);letter-spacing:var(--tr-mono);text-transform:uppercase}
.footer-foot span{text-wrap:balance}   /* a wrapped entry breaks evenly, never with one word alone on its second line */
.footer-foot-wrap{border-top:1px solid var(--rule-bark)}

/* --------------------------------------------------------------------------
   22. Utilities
   -------------------------------------------------------------------------- */
.nowrap{white-space:nowrap}
.tabular{font-variant-numeric:tabular-nums lining-nums}
/* .num-l — a large stand-alone figure in Playfair (the evidence header's figure, a
   statement's number): --fs-reading-xl, lining tabular, unit in <small> at 0.44em */
.num-l{display:block;font:400 var(--fs-reading-xl)/1 var(--serif);letter-spacing:var(--tr-reading);color:var(--fg);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.num-l small{font:400 .44em/1 var(--sans);letter-spacing:0;color:var(--fg-2);margin-left:.14em;white-space:normal}
.num-l.is-honest,.num-l .honest{color:var(--accent-text)}
/* grid items never widen the page: a table's min-width scrolls inside its cell */
.grid>*,.split>*,.band-in>*,.sec-head>*{min-width:0}
.right{text-align:right}
.center{text-align:center}
.hide-mobile{display:initial}
.show-mobile{display:none}
.mt-2{margin-top:var(--s-2)}.mt-4{margin-top:var(--s-4)}.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}.mt-7{margin-top:var(--s-7)}.mt-8{margin-top:var(--s-8)}
.mb-5{margin-bottom:var(--s-5)}.mb-6{margin-bottom:var(--s-6)}.mb-7{margin-bottom:var(--s-7)}
.strip-list{display:flex;flex-wrap:wrap;gap:10px 28px;color:var(--fg-2)}
.strip-list li{white-space:nowrap}
.strip-list li b{color:var(--fg);font-weight:500}
.rule-top{border-top:1px solid var(--rule);padding-top:var(--s-5)}
.rule-bottom{border-bottom:1px solid var(--rule);padding-bottom:var(--s-5)}

/* --------------------------------------------------------------------------
   23. Mobile ≤ 860px — a real layout, not a collapsed desktop
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cells--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .readings--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  :root{--nav-h:60px}
  h1{font-size:clamp(46px,13.6vw,60px);line-height:.96}
  h2{font-size:clamp(36px,10.2vw,48px)}
  body{font-size:17px}
  .hide-mobile{display:none}
  .show-mobile{display:initial}
  /* nav: brand · MENU · language · Contact */
  .nav{gap:8px}
  .brand{gap:0}
  .brand em{display:none}
  .nav-links{display:none}
  .menu{display:block;position:static}
  .menu summary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 12px;font:500 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor;border-radius:var(--radius);color:var(--fg)}
  .menu[open] summary{background:var(--bark);color:var(--linen);border-color:var(--bark)}
  .menu[open] .nav-panel{display:flex;flex-direction:column;position:fixed;left:0;right:0;top:var(--nav-h);z-index:39;background:var(--bark);color:var(--linen);padding:4px var(--gutter) 24px;gap:0;box-shadow:inset 0 1px 0 var(--rule-bark);max-height:calc(100vh - var(--nav-h));overflow-y:auto}
  html:not(.js-on) .menu[open] .nav-panel{position:absolute}
  .menu[open] .nav-panel a{display:flex;align-items:center;min-height:52px;padding:0;font:400 20px/1.2 var(--serif);letter-spacing:0;border-bottom:1px solid var(--rule-bark);border-radius:0;color:var(--linen)}
  .menu[open] .nav-panel a::after{display:none}
  .menu[open] .nav-panel a[aria-current="page"]{color:var(--amber)}
  .lang summary{padding:0 8px}
  .nav-cta{padding:0 14px;font-size:14px}
  /* layout */
  .split>.statement,.split>.evidence,.split>.evidence--wide{grid-column:1/-1;position:static}
  .split{row-gap:var(--s-6)}
  .sec-head h2,.sec-head .sub{grid-column:1/-1}
  .sec-head{margin-bottom:var(--s-7)}
  .sec-head .sub{padding-bottom:0}
  .fig-head{margin-bottom:var(--s-5);align-items:flex-start;row-gap:10px}   /* a wrapped title keeps its tick on line one, not centred across both lines */
  .fig-tick{margin-top:7px}                                    /* half of the 12px/1.4 mono line: the tick still reads centred on a one-line title */
  /* the rule goes. Brief §3.3 draws it as a flex:1 hairline *between* the title and the chip; once
     the head wraps there is nothing on either side of it to join, and it read as a stray dash under
     the label on every figure of every page. The head is now `tick · Fig. n · title` with the chip
     right-aligned on the last line — four parts, all of them doing something. */
  .fig-head .fig-line{display:none}
  .fig-head::after{content:"";flex-basis:100%;height:0;order:1}   /* the forced break before the chip, which keeps its own width */
  .fig-head .fig-src{order:2;margin-left:auto}                    /* the chip at the right end of its own row, not under the tick */
  .fig-head:not(:has(.fig-src)){padding-bottom:0}
  .fig-head:not(:has(.fig-src))::after{display:none}   /* no chip to close against: the head is one clean row */
  .fig-title{white-space:normal;flex:1 1 auto;min-width:0}   /* the title takes the whole of line one — 251px at 390 — and wraps inside it */
  /* buttons */
  .btn{min-height:50px}
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}
  /* readings and cells */
  .readings,.readings--4,.readings--2{grid-template-columns:1fr;gap:var(--s-5)}
  .cells,.cells--2,.cells--3{grid-template-columns:1fr}
  .cell{min-height:0;padding:20px 18px 22px;gap:10px}
  .cell strong{font-size:38px}
  .cell strong.fit{font-size:34px}
  .cell strong.fit-s{font-size:30px}
  .cells--fit .cell strong,.cells--fit .cell strong.fit,.cells--fit .cell strong.fit-s{font-size:36px}
  .notes{grid-template-columns:1fr;gap:var(--s-5)}
  .honesty li{grid-template-columns:1fr;gap:4px;padding:14px 16px 16px}
  /* tables — a wide table scrolls inside .table-scroll; a .table--stack becomes cards instead.
     Plain `.table`, never `.table:not(…)`: the :not() would outrank a page's own `.table-x{min-width:0}` */
  .table{min-width:560px}
  .table th,.table td{padding:12px 12px}
  .table-scroll{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);max-width:none}
  /* .table--stack — the phone form of a data table (brief §14): every row becomes a card, every
     figure stays on the screen and nothing scrolls sideways. Shared by Home Fig. 1 and BIOSTAT. */
  .table--stack{display:block;min-width:0}
  .table--stack thead{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .table--stack thead th{border:0}   /* the head is clipped off-screen but its cells keep full-width rects: a border here measures as a rule across the cards */
  .table--stack tbody{display:block}
  .table--stack tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:6px;align-items:start;padding:12px 0 14px;border-bottom:1px solid var(--rule)}
  .table--stack td{display:block;border:0;padding:0;min-width:0}
  .table--stack td.key{font-weight:500;color:var(--fg);font-size:17px;line-height:1.35}
  .table--stack tr.is-honest{background:var(--g-2);box-shadow:inset 2px 0 0 var(--amber);margin-inline:-12px;padding-inline:12px}
  .table--stack tr.is-honest td{background:transparent;box-shadow:none}
  /* efficacy: crop · % on the first line, the target on the second, the bar beneath */
  .table--stack.table-efficacy td:nth-child(1){grid-column:1;grid-row:1}
  .table--stack.table-efficacy td:nth-child(4){grid-column:2;grid-row:1/3;font-size:14px;padding-top:3px}
  .table--stack.table-efficacy td:nth-child(2){grid-column:1;grid-row:2;color:var(--fg-2)}
  .table--stack.table-efficacy td:nth-child(3){grid-column:1/-1;grid-row:3}
  /* the honesty row carries two more spans in its figure cell ("Kept on the page", the chip);
     that cell takes the first three rows and the bar drops to a fourth, so "sunn pest" stays
     on the line under "Wheat" like every other target and the chip never sits on the bar */
  .table--stack.table-efficacy tr.is-honest td:nth-child(4){grid-row:1/4}
  .table--stack.table-efficacy tr.is-honest td:nth-child(3){grid-row:4}
  .table--stack.table-efficacy .range{margin:6px 0 0}
  .ledger>li,.ledger-row{grid-template-columns:1fr;gap:8px;padding:18px 0 20px}
  .ledger .mono{padding-top:0}
  .ledger strong{font-size:26px}
  .leaders{font-size:12px}
  /* team, form, photos */
  .team{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-4)}
  .person{grid-template-columns:72px minmax(0,1fr);gap:12px}
  .person img{width:72px;height:88px}
  .form{grid-template-columns:1fr;gap:18px}
  .seg-in span{min-height:44px;padding:0 8px;font-size:14px}
  .form-foot{flex-direction:column;align-items:stretch}
  .form-foot .btn{width:100%}
  /* the introduction band, then the hero */
  .intro{padding-top:calc(var(--nav-h) + 28px)}
  .intro h1{grid-column:1/-1;font-size:clamp(34px,9.2vw,44px)}
  .intro .lede{grid-column:1/-1;padding-bottom:0}
  .intro .go{display:grid;grid-template-columns:1fr 1fr;gap:10px}   /* four ways on a phone: two rows of two, not a 240px stack */
  .intro .go .btn{width:100%;min-height:48px;padding:0 12px;font-size:14px}
  .hero .hero-h1{grid-column:1/-1;font-size:44px}
  /* hero */
  .hero:not(.hero--static){height:150vh}
  .hero-stage{height:auto;min-height:100svh}
  .hero--static,.hero--static .hero-stage{min-height:76vh}   /* the copy alone is ~570px; the extra sits above the kicker, where the crown band is. The wrapper takes the same figure: at 80vh it left a 34px strip of flat bark under the scene */
  .hero .scene-fb{background-position:44% 24%,0 0}
  /* on phones the veil is lighter and starts lower: the top quarter of the stage is canopy at
     full strength, and the scene's own copy shading does the rest (canopy.js COPY_SHADE_PORT) */
  .hero-scrim{background:
    linear-gradient(to bottom,rgba(30,23,16,.62) 0%,rgba(30,23,16,.22) 60px,rgba(30,23,16,0) 120px),
    linear-gradient(to top,rgba(30,23,16,.90) 0%,rgba(30,23,16,.68) 9%,rgba(30,23,16,.32) 21%,rgba(30,23,16,.10) 34%,rgba(30,23,16,0) 50%)}
  .hero-scrim::after{background:linear-gradient(to bottom,rgba(30,23,16,0) 20%,rgba(30,23,16,.34) 32%,rgba(30,23,16,.34) 76%,rgba(30,23,16,0) 94%)}
  .hero--static .hero-in{padding-bottom:36px;row-gap:22px}
  /* the header at rest on a phone (§7.4): .72 under the bar, open again over the crown (.16 at
     104px), re-gathered to .64 behind the kicker — 12px mono at 66% linen measures 5.0:1 against
     the brightest 2% of its own ground — then clear, so the whole frame reads as a canopy */
  .hero--static .hero-scrim{background:
    linear-gradient(to bottom,rgba(30,23,16,.72) 0,rgba(30,23,16,.72) 46px,rgba(30,23,16,.14) 104px,rgba(30,23,16,.14) 138px,rgba(30,23,16,.52) 180px,rgba(30,23,16,.52) 208px,rgba(30,23,16,0) 268px),
    linear-gradient(to top,rgba(30,23,16,.76) 0%,rgba(30,23,16,.20) 26%,rgba(30,23,16,.04) 58%,rgba(30,23,16,0) 84%)}
  .hero--static .hero-scrim::after{background:linear-gradient(to bottom,rgba(30,23,16,0) 34px,rgba(30,23,16,.11) 78px,rgba(30,23,16,.11) 78%,rgba(30,23,16,0) 94%)}
  .hero-in{row-gap:16px;padding-top:calc(var(--nav-h) + 20px)}
  .hero-kicker{grid-column:1/-1;font-size:12px;gap:4px 14px}
  .hero h1{grid-column:1/-1;font-size:44px}   /* one step under --fs-display's 48px floor: at 53px the Home headline set four lines and, with the lede and two stacked buttons, put both CTAs under the fold of a 390 × 690 phone viewport; at 44px it sets three and the buttons are on the first screen */
  .hero-lede{grid-column:1/-1;font-size:16px;max-width:46ch}   /* the one-column hero still owes §3.2 its measure: uncapped, the opening paragraph set 61ch at 700px */
  .hero .cut{display:none}
  .hero-cta{grid-column:1/-1;justify-self:stretch;width:100%;flex-direction:column}
  .hero-cta .btn{width:100%;min-height:50px}
  .days{margin-top:30px;padding-top:16px;padding-bottom:22px;row-gap:16px}
  .days-src{grid-column:1/-1;order:2;max-width:none;padding-top:0}
  .days ol{grid-column:1/-1;gap:12px}
  .day{padding-left:10px}
  .day strong{font-size:30px}
  .day small{font-size:11px}
  .page-head{padding-top:calc(var(--nav-h) + var(--s-7))}
  /* readout (not pinned: the panel is taller than the viewport), pass, band, footer */
  .readout-track{height:auto}
  .readout-stage{position:static;min-height:0;display:block}
  .readout-head{padding:14px 16px}
  .readout-chart{padding:16px 12px 4px}
  .readout-chart svg{height:168px}
  .readout th:first-child,.readout td:first-child{padding-left:16px}
  .readout th:last-child,.readout td:last-child{padding-right:16px}
  .readout th,.readout td{padding:11px 10px}
  .readout td.strip,.readout th.strip{width:30%;min-width:120px}
  .readout-foot{padding:12px 16px 14px;gap:6px 20px}
  .readout-cap{padding:10px 16px 14px}
  .pass-stage{aspect-ratio:2/1}
  /* an instrument panel may not have a ragged value column: the four labels share one column and
     the four values one left edge (the readout's own foot strip was fixed the same way) */
  .foot-strip{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 14px;padding:16px 0 18px}
  .foot-strip span{display:contents}
  .band-in h2,.band-in .prose,.band-in .btn-row{grid-column:1/-1;justify-self:stretch;max-width:none}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-4);padding-top:var(--s-7);padding-bottom:var(--s-7)}
  .footer-col ul li a{min-height:44px;min-width:44px}
  p a,.prose li a,.caption a,.textlink{padding-block:13px}
  .footer-foot{flex-direction:column;gap:8px;padding-block:18px 26px}
  .plate .tag{max-width:60%}
  .plate .tag.tr,.plate .cross.c1{display:none}   /* the two-line top-right tag crosses the top cross-hair at 350px (molecule.md) */
}
@media (max-width:600px){                        /* phones: each readout row is two lines — figures, then its strip; nothing scrolls sideways */
  .readout-grid{min-width:0}
  .readout tr{display:grid;grid-template-columns:minmax(0,1fr) 40px 56px 56px 64px;align-items:center;border-bottom:1px solid var(--rule-bark)}
  .readout thead th{font-size:11px;letter-spacing:.04em}
  .readout td.num{font-size:13px;letter-spacing:0}
  .readout tbody tr:last-child{border-bottom:0}
  .readout th,.readout td{border-bottom:0;padding:10px 6px}
  .readout th:first-child,.readout td:first-child{padding-left:16px}
  .readout th:last-child,.readout td:last-child{padding-right:16px}
  .readout thead th.strip{display:none}
  .readout td.strip{order:10;grid-column:1/-1;width:auto;min-width:0;height:38px;padding:0 16px 10px}
  .readout td.variant b{white-space:normal}
}
@media (max-width:420px){
  .footer-grid{grid-template-columns:1fr}
  .table{min-width:520px}
  .table--stack{min-width:0}   /* restated after .table: the stacked form never gets a min-width back */
}

/* --------------------------------------------------------------------------
   24. Motion preferences — one still frame, reveals in their final state
   -------------------------------------------------------------------------- */
/* French phrases run longer than the English ones they replace, and the display headings carry
   .nowrap spans sized for English: at 390px "56–59 % sur la punaise des céréales." measured 560px
   and "d'huile essentielle" 401px, so the page could not fit and Chrome zoomed the whole layout
   out. Headings only, and only in French: the figure keeps its unit through the &nbsp; the copy
   already sets (93–99&nbsp;%), while the phrase around it is free to break. Table cells, readings
   and the day strip keep their nowrap in every language. */
@media (max-width:860px){
  html:lang(fr) h1 .nowrap,html:lang(fr) h2 .nowrap{white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .form-done .tick circle,.form-done .tick path{stroke-dashoffset:0!important}   /* no drawing: the tick is simply there */
  html.js-on [data-reveal]:not(.is-in){opacity:1;transform:none}
  html.js-on [data-reveal]:not(.is-in) .range::before,html.js-on [data-reveal]:not(.is-in) .bar::before{--grow:1}
  html.js-on [data-reveal]:not(.is-in) .ph-band{transform:none}
  .scene{opacity:1}
  .is-gl .scene-fb{visibility:hidden}
  /* the readout: curves drawn, Biostat MK's values and points on, strips at their final heal */
  .js-on .curves path{stroke-dashoffset:0!important}
  .js-on .curves .val,.js-on .curves .pt{opacity:1;transition:none}
  .curves path,.curves .val,.curves .vals{transition:none}
  /* the day scale: all three lit, as with the twin */
  .day{border-color:var(--amber)}
  .day strong{color:var(--linen)}
  .day .mono{color:var(--amber)}
}

/* --------------------------------------------------------------------------
   25. Print — minimal
   -------------------------------------------------------------------------- */
@media print{
  html,body,[data-ground],.footer,.hero,.hero-stage{background:#fff!important;color:#000!important}
  .nav,.scene,.scene-fb,.hero-scrim,.skip,.nav-cta,.turnstile{display:none!important}
  .hero,.hero-stage{height:auto!important;position:static!important}
  .split>.statement{position:static}
  html.js-on [data-reveal]:not(.is-in){opacity:1;transform:none}
  a{color:inherit}
  .table-scroll{overflow:visible;-webkit-mask-image:none!important;mask-image:none!important}
  .sec{padding-block:24px}
  /* Un-pin everything, or the sheet prints whatever scroll position the reader happened to be in:
     the readout, the specimen plate and the .split statement each stop being sticky and the tracks
     lose the viewport heights that would otherwise print as blank pages. */
  .readout-track,.plate-col,.split--plate>.plate-col{height:auto!important;position:static!important;min-height:0!important}
  .readout-stage{position:static!important;min-height:0!important;padding-top:0!important}
  .plate,.pass-stage{aspect-ratio:auto;min-height:0}
  .plate .tag{position:static;max-width:none;display:block}
  html:not(.js-on) [data-reveal],[data-reveal]{opacity:1!important;transform:none!important}
  /* the cross-references survive on paper: BIOSTAT and Evidence print as handouts, and a reader
     holding one has to be able to type the page back in */
  main a[href^="/"]::after{content:" (biozar.tech" attr(href) ")";font:400 11px/1 monospace;color:#555}
  main a[href^="/"][href$=".svg"]::after,main a[href^="#"]::after,.chip::after{content:none}
  .footer,.footer-foot-wrap{border-top:1px solid #999}
}