/* ==========================================================================
   LEBOTANICA — site.css
   Single stylesheet. No preprocessor, no framework, no build step.

   Layer order is the whole specificity strategy: components can never be
   cancelled by layout, and layout can never be cancelled by base. Keep new
   rules inside the correct layer.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100svh; }
  img, picture, svg { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  ul[class], ol[class] { list-style: none; padding: 0; }
}

/* ==========================================================================
   TOKENS
   Colour contrast is measured, not assumed. Ratios noted where they constrain
   use. See docs/DESIGN-TOKENS.md.
   ========================================================================== */
@layer tokens {
  :root {
    /* --- surface ------------------------------------------------------- */
    --paper:      #FAF8F4;   /* dominant warm off-white */
    --paper-alt:  #F3F0E8;   /* alternating section ground */
    --ink:        #16241E;   /* body text AND dark section ground (brand ink) */

    /* --- text --------------------------------------------------------- */
    --ink-70:     #4A5A52;   /* secondary text — 6.89:1 on paper (AAA) */
    --on-ink:     #FFFFFF;   /* 16.09:1 on ink (AAA) */
    --on-ink-70:  #C3CCC7;   /* secondary text on ink */

    /* --- brand accents ------------------------------------------------- */
    --green:      #007A53;   /* 5.07:1 on paper (AA) — FAILS on ink at 2.99:1 */
    --green-dark: #00593C;   /* 7.94:1 on paper (AAA) — inline links, hovers */
    --burgundy:   #911838;   /* 8.28:1 on paper (AAA) — used sparingly */

    /* --- lines --------------------------------------------------------- */
    --hairline:      rgba(22, 36, 30, 0.14);
    --hairline-firm: rgba(22, 36, 30, 0.26);
    --hairline-on-ink: rgba(255, 255, 255, 0.20);

    /* --- type ---------------------------------------------------------- */
    --font-display: "Newsreader", Georgia, "Times New Roman", serif;
    --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    /* Headline sizing is restrained by measurement, not taste (DR-15).
       The old ramp peaked at 4.25rem/68px and set the line as
       "From regenerative / cultivation / to botanical / innovation." —
       four lines ending on an orphaned word, at every width.
       Every value below was swept in a real browser against the real column:
         floor 1.85rem  sits above the 28.8–29.4px section h2 so the hero
                        stays unambiguously the primary heading
         cap   3.25rem  is the ceiling for a clean three-line set; at 54px the
                        line breaks to four and orphans "innovation."
       Result: three balanced lines from 360px up, two from 540–1023px. */
    --fs-hero:    clamp(1.85rem, 1.05rem + 2.5vw, 3.25rem);
    --fs-h2:      clamp(1.8rem,  1.35rem + 2.0vw, 2.75rem);
    /* Feature sections (About, Extracts, Founder) sit in a narrower column than
       a full-width section head, so they take their own level rather than
       reusing --fs-h2. Level 3: clearly a major heading, clearly below --fs-h2. */
    --fs-h2-feature: clamp(1.7rem, 1.25rem + 1.4vw, 2.25rem);
    --fs-h3:      clamp(1.08rem, 1.02rem + 0.34vw, 1.3rem);
    --fs-lede:    clamp(1.08rem, 1.0rem + 0.44vw, 1.3rem);
    --fs-body:    clamp(1rem,    0.96rem + 0.2vw,  1.125rem);
    /* Reading copy in a constrained column (pathway stages, card origin lines,
       the catalogue note). Smaller than --fs-body, but a READING size, not the
       UI size. --fs-small was doing both jobs and lost the argument at 14.4px. */
    --fs-body-sm: clamp(0.95rem, 0.92rem + 0.14vw, 1rem);
    --fs-small:   0.9rem;
    --fs-eyebrow: 0.735rem;

    /* --- space --------------------------------------------------------- */
    --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
    --space-4: 1rem;     --space-6: 1.5rem;   --space-8: 2rem;
    --space-12: 3rem;    --space-16: 4rem;    --space-24: 6rem;

    --section-y: clamp(3.75rem, 2.6rem + 4.6vw, 7.5rem);
    --gutter:    clamp(1.25rem, 0.8rem + 2.2vw, 3rem);
    --container: 1200px;
    --measure:   68ch;

    --radius: 2px;
    --header-h: 68px;

    /* --- motion -------------------------------------------------------- */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 160ms;
    --dur: 480ms;
  }

  @media (min-width: 64rem) { :root { --header-h: 78px; } }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  /* Self-hosted, Latin subset. font-display:swap plus font-size-adjust keeps
     the fallback metrically close, so the swap does not shift layout. */
  @font-face {
    font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
    font-display: swap; src: url("../fonts/plex-sans-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500;
    font-display: swap; src: url("../fonts/plex-sans-500.woff2") format("woff2");
  }
  @font-face {
    font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600;
    font-display: swap; src: url("../fonts/plex-sans-600.woff2") format("woff2");
  }
  /* Only weight 400 is used, so the variable font is instanced to a single
     weight — same rendering, roughly a quarter of the bytes. */
  @font-face {
    font-family: "Newsreader"; font-style: normal; font-weight: 400;
    font-display: swap; src: url("../fonts/newsreader-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "Newsreader"; font-style: italic; font-weight: 400;
    font-display: swap; src: url("../fonts/newsreader-italic-400.woff2") format("woff2");
  }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-size-adjust: from-font;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3 { font-weight: 400; line-height: 1.14; text-wrap: balance; }
  h1, h2 { font-family: var(--font-display); letter-spacing: -0.015em; }
  h3 {
    font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3);
    line-height: 1.3; letter-spacing: -0.005em;
  }
  p { text-wrap: pretty; }

  a { color: var(--green-dark); text-underline-offset: 0.18em; }
  a:hover { color: var(--green); }

  /* Focus is never removed. 2px at 2px offset, in both grounds. */
  :focus-visible {
    outline: 2px solid var(--green-dark);
    outline-offset: 2px;
    border-radius: 1px;
  }
  .ground--ink :focus-visible { outline-color: var(--on-ink); }

  ::selection { background: rgba(0, 122, 83, 0.16); }

  /* Anchor landings clear the sticky header without any JavaScript. */
  :target, section[id] { scroll-margin-top: calc(var(--header-h) + var(--space-6)); }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .container {
    inline-size: min(var(--container), 100% - var(--gutter) * 2);
    margin-inline: auto;
  }
  .container--text { inline-size: min(var(--measure), 100% - var(--gutter) * 2); }

  .section { padding-block: var(--section-y); }
  .section + .section { border-block-start: 1px solid transparent; }

  .ground--paper { background: var(--paper); }
  .ground--alt   { background: var(--paper-alt); }
  .ground--ink   { background: var(--ink); color: var(--on-ink); }
  /* NOTE: colour overrides for elements INSIDE a dark ground must live in the
     components layer, not here. Layer order beats specificity: a rule in
     @layer components wins over a more specific rule in @layer layout. */

  /* NOTE: content-visibility:auto was trialled here for below-the-fold
     sections and REMOVED. This page is eleven text sections and thirteen
     images — far below the "content-heavy" threshold the technique is for —
     and in testing it left sections unrendered on first paint and made the
     scroll height inaccurate. The cost outweighed a negligible gain. */
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* --- skip link ------------------------------------------------------- */
  .skip-link {
    position: absolute; inset-inline-start: var(--space-4); inset-block-start: -100%;
    z-index: 100; padding: var(--space-3) var(--space-6);
    background: var(--green); color: #fff; text-decoration: none;
    border-radius: var(--radius); font-weight: 500;
  }
  .skip-link:focus { inset-block-start: var(--space-4); color: #fff; }

  /* --- header ---------------------------------------------------------- */
  .site-header {
    position: sticky; inset-block-start: 0; z-index: 50;
    background: var(--paper);   /* opaque fallback — must come first */
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    border-block-end: 1px solid transparent;
    transition: border-color var(--dur-fast) var(--ease),
                background-color var(--dur-fast) var(--ease);
  }
  @supports (backdrop-filter: blur(8px)) {
    .site-header { backdrop-filter: blur(8px) saturate(1.1); }
  }
  .site-header[data-scrolled="true"] {
    border-block-end-color: var(--hairline);
    background: var(--paper);
    background: color-mix(in srgb, var(--paper) 97%, transparent);
  }
  .site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-6); block-size: var(--header-h);
  }
  /* Logo width respects the master package's stated minimums:
     Horizontal — 190px recommended, 150px absolute floor. */
  .site-logo { display: block; inline-size: 190px; }
  @media (min-width: 64rem) { .site-logo { inline-size: 220px; } }
  .site-logo img { inline-size: 100%; block-size: auto; }

  /* --- navigation ------------------------------------------------------ */
  .nav__list { display: flex; align-items: center; gap: var(--space-8); }
  .nav__link {
    position: relative; display: inline-block; padding-block: var(--space-2);
    font-size: var(--fs-small); font-weight: 500; color: var(--ink);
    text-decoration: none;
  }
  .nav__link::after {
    content: ""; position: absolute; inset-inline: 0; inset-block-end: 0;
    block-size: 1px; background: var(--green);
    transform: scaleX(0); transform-origin: left;
    transition: transform 180ms var(--ease);
  }
  .nav__link:hover { color: var(--green-dark); }
  .nav__link:hover::after,
  .nav__link[aria-current="true"]::after { transform: scaleX(1); }
  .nav__link[aria-current="true"] { color: var(--green-dark); }

  .nav__toggle {
    display: none; inline-size: 44px; block-size: 44px; padding: 0;
    background: none; border: 1px solid var(--hairline-firm);
    border-radius: var(--radius); cursor: pointer;
  }
  .nav__toggle span {
    display: block; inline-size: 18px; block-size: 1px; margin: 4px auto;
    background: var(--ink); transition: transform 200ms var(--ease),
                                        opacity 140ms var(--ease);
  }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  @media (max-width: 63.999rem) {
    .nav__toggle { display: block; }
    .nav {
      position: absolute; inset-inline: 0; inset-block-start: 100%;
      background: var(--paper); border-block-end: 1px solid var(--hairline);
      display: none;
    }
    .nav[data-open="true"] { display: block; }
    .nav__list {
      flex-direction: column; align-items: stretch; gap: 0;
      padding: var(--space-2) var(--gutter) var(--space-6);
    }
    .nav__link {
      padding-block: var(--space-4); font-size: 1.05rem;
      border-block-end: 1px solid var(--hairline);
    }
    .nav__link::after { display: none; }
  }

  /* --- buttons --------------------------------------------------------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-block-size: 46px; padding: var(--space-3) var(--space-8);
    border-radius: var(--radius); font-size: var(--fs-small); font-weight: 500;
    letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
  }
  .btn--solid { background: var(--green); color: #fff; }
  .btn--solid:hover { background: var(--green-dark); color: #fff; }
  .btn--outline { border-color: var(--green); color: var(--green-dark); }
  .btn--outline:hover { background: var(--green); color: #fff; }
  .btn--on-ink { border-color: var(--on-ink); color: var(--on-ink); }
  .btn--on-ink:hover { background: var(--on-ink); color: var(--ink); }

  /* --- eyebrow + section head ------------------------------------------
     The eyebrow's short rule is the signature device: the horizon strokes
     from the approved symbol, reused as the page's structural grammar. */
  .eyebrow {
    display: block; font-size: var(--fs-eyebrow); font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-dark);
    margin-block-end: var(--space-4);
  }
  .eyebrow::after {
    content: ""; display: block; inline-size: 48px; block-size: 1px;
    background: var(--green); margin-block-start: var(--space-3);
  }
  .section-head { max-inline-size: 34rem; margin-block-end: var(--space-12); }
  .section-head--wide { max-inline-size: 46rem; }
  .section-head h2 { font-size: var(--fs-h2); }
  /* Feature headings had NO font-size rule and were rendering at the browser
     default h2 of 1.5em, computed off body copy — 26.16px against a 44px
     section head. This is the fix for launch-checklist item 04, and it covers
     About, Botanical Extracts and Founder in one rule because all three use
     the same .feature layout. */
  .feature__body h2 {
    font-size: var(--fs-h2-feature);
    /* 1.14 is tuned for the single-line full-width section head. A feature
       heading sits in a 6-column well and wraps to two lines, where 1.14 lets
       a descender touch the next line's ascender. Measured, not guessed. */
    line-height: 1.2;
  }
  .section-head__lede {
    margin-block-start: var(--space-6); font-size: var(--fs-lede);
    color: var(--ink-70); line-height: 1.6;
  }

  /* --- hero ------------------------------------------------------------
     Split rather than text-over-image: the headline sits on paper at 15:1
     contrast, needs no scrim, and is the LCP element rather than the photo. */
  .hero { padding-block: 0; border-block-end: 1px solid var(--hairline); }
  .hero__grid { display: grid; gap: 0; }
  .hero__text {
    padding-block: clamp(2.75rem, 1.5rem + 5vw, 6rem) clamp(2.5rem, 1.5rem + 4vw, 5rem);
    padding-inline: var(--gutter);
    align-self: center;
  }
  .hero__descriptor {
    font-size: var(--fs-small); font-weight: 500; color: var(--ink-70);
    letter-spacing: 0.005em; margin-block-end: var(--space-6);
  }
  /* No ch cap: the split column governs the measure, and every breakpoint was
     measured against it. A cap here only reintroduced bad breaks. */
  .hero h1 { font-size: var(--fs-hero); max-inline-size: none; }
  /* The split column is at its NARROWEST just above the 64rem breakpoint —
     425px at 1024px viewport, against 554px at 1440. The global ramp would put
     42px into a 425px column and break the line to four. This band rejoins the
     global ramp exactly at 1366px. */
  @media (min-width: 64rem) and (max-width: 85.375rem) {
    .hero h1 { font-size: clamp(2.2rem, -0.944rem + 4.91vw, 3.25rem); }
  }
  .hero__lede {
    margin-block-start: var(--space-8); font-size: var(--fs-lede);
    color: var(--ink-70); max-inline-size: 40ch; line-height: 1.6;
  }
  .hero__actions {
    display: flex; flex-wrap: wrap; gap: var(--space-4);
    margin-block-start: var(--space-12);
  }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__media { position: relative; background: var(--paper-alt); }
  .hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

  @media (min-width: 64rem) {
    /* Full-bleed grid: the text column carries the asymmetric inline padding
       that aligns it to the page container, and the media column runs to the
       viewport edge without any negative-margin trickery. */
    .hero__grid {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
      align-items: stretch; min-block-size: min(84vh, 720px);
    }
    .hero__text {
      padding-inline-start: max(var(--gutter), calc((100vw - var(--container)) / 2));
      padding-inline-end: var(--space-16);
    }
    .hero__actions .btn { flex: 0 0 auto; }
  }

  /* --- feature pair (About, Extracts, Founder) -------------------------- */
  .feature { display: grid; gap: var(--space-12); align-items: center; }
  .feature__media img { inline-size: 100%; block-size: auto; border-radius: var(--radius); }
  .feature__body > * + * { margin-block-start: var(--space-6); }
  @media (min-width: 48rem) {
    .feature { grid-template-columns: repeat(12, 1fr); gap: var(--space-16); }
    .feature__media { grid-column: 1 / span 5; }
    .feature__body  { grid-column: 7 / span 6; }
    .feature--reverse .feature__media { grid-column: 8 / span 5; grid-row: 1; }
    .feature--reverse .feature__body  { grid-column: 1 / span 6; grid-row: 1; }
  }

  /* The Lebanon + botany statement — the brand's thesis, set as a pull quote */
  .brandline {
    margin-block-start: var(--space-12); padding-block-start: var(--space-8);
    border-block-start: 1px solid var(--hairline);
    font-family: var(--font-display); font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
    line-height: 1.4; color: var(--ink); max-inline-size: 32ch;
  }

  /* --- pillar (What We Do / Applications / Our Approach) ----------------
     One pattern shared by eleven blocks. Hairline above, no card, no shadow. */
  .pillars { display: grid; gap: var(--space-8) var(--space-12); }
  .pillar { padding-block-start: var(--space-6); border-block-start: 1px solid var(--hairline-firm); }
  .pillar h3 { margin-block-end: var(--space-4); }
  .pillar p { color: var(--ink-70); }
  .ground--ink .pillar { border-block-start-color: var(--hairline-on-ink); }
  .ground--ink .pillar p { color: var(--on-ink-70); }
  @media (min-width: 40rem)  { .pillars--3 { grid-template-columns: repeat(3, 1fr); }
                               .pillars--4 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 64rem)  { .pillars--4 { grid-template-columns: repeat(4, 1fr); } }

  /* --- pathway ---------------------------------------------------------
     A sequence, so it must never reflow into a grid. Desktop runs along a
     horizontal spine; below 64rem the spine rotates and the stages stack. */
  .pathway { position: relative; display: grid; gap: var(--space-8); }
  .stage { position: relative; padding-inline-start: var(--space-12); }
  .stage__num {
    position: absolute; inset-inline-start: 0; inset-block-start: 0;
    font-family: var(--font-display); font-size: 1.35rem; line-height: 1;
    color: var(--burgundy); font-variant-numeric: lining-nums tabular-nums;
  }
  /* Burgundy measures 1.83:1 on ink and cannot be used here. Rather than
     introduce a lightened tint — which would be a new colour, and the brief
     forbids a third accent — dark grounds use white. Burgundy is carried on
     this page by the logo wordmark and by the 404 numeral on paper. */
  .ground--ink .stage__num { color: var(--on-ink); }
  .stage__label {
    display: block; font-size: var(--fs-eyebrow); font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--on-ink); margin-block-end: var(--space-3);
  }
  .stage h3 { margin-block-end: var(--space-3); color: var(--on-ink); }
  .stage p { color: var(--on-ink-70); font-size: var(--fs-body-sm); }

  /* vertical spine (mobile / tablet) */
  .pathway::before {
    content: ""; position: absolute; inset-block: 0.4rem 0;
    inset-inline-start: 0.55rem; inline-size: 1px;
    background: var(--hairline-on-ink);
  }
  .stage::before {
    content: ""; position: absolute; inset-inline-start: 0.05rem;
    inset-block-start: 0.55rem; inline-size: 10px; block-size: 1px;
    background: var(--hairline-on-ink);
  }

  @media (min-width: 64rem) {
    .pathway { grid-template-columns: repeat(5, 1fr); gap: var(--space-8); padding-block-start: var(--space-12); }
    .stage { padding-inline-start: 0; padding-block-start: var(--space-8); }
    .stage__num { inset-block-start: -0.15rem; }
    /* horizontal spine */
    .pathway::before {
      inset-block: auto; inset-inline: 0; inset-block-start: 0;
      inline-size: 100%; block-size: 1px;
    }
    .stage::before {
      inset-inline-start: 0; inset-block-start: 0;
      inline-size: 1px; block-size: 10px;
    }
  }

  /* --- botanical resources --------------------------------------------- */
  .resources { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-6); }
  @media (min-width: 64rem) { .resources { grid-template-columns: repeat(4, 1fr); gap: var(--space-12) var(--space-8); } }

  .resource { margin: 0; }
  .resource__frame {
    overflow: hidden; border-radius: var(--radius); background: var(--paper-alt);
    aspect-ratio: 4 / 5;
  }
  .resource__frame img {
    inline-size: 100%; block-size: 100%; object-fit: cover;
    transition: transform 400ms var(--ease);
  }
  .resource:hover .resource__frame img { transform: scale(1.03); }
  .resource figcaption { padding-block-start: var(--space-4); }
  .resource h3 { font-size: 1.2rem; margin-block-end: var(--space-1); }
  .resource__binomial {
    display: block; font-family: var(--font-display); font-style: italic;
    font-size: 0.95rem; color: var(--ink-70); line-height: 1.35;
  }
  /* Resource line — the extract or material this plant is present for.
     Bare noun phrase, no verb, no efficacy language. */
  .resource__material {
    display: block; margin-block-start: var(--space-2);
    font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--green-dark);
  }
  /* Origin line — subordinate to the resource line above it. Sentence case,
     regular weight and ink-70 so the grid stays editorial and does not read as
     a technical database. Present only on the four tiles that have a specific
     origin worth stating: three recovered co-products and one own-farm crop. */
  .resource__origin {
    display: block; margin-block-start: var(--space-1);
    font-size: var(--fs-body-sm); color: var(--ink-70); line-height: 1.45;
  }
  /* --- resource catalogue (below the image grid) -------------------------
     One hairline separates photography from catalogue; nothing else is ruled.
     Groups share a single five-column rhythm so a two-item group reads as a
     deliberate short row rather than a sparse one, and the whole lower area
     reads as a catalogue instead of three disconnected blocks. */
  .resources__streams {
    margin-block-start: var(--space-12);
    max-inline-size: 66ch;
    font-size: var(--fs-body-sm); color: var(--ink-70);
  }

  .resource-groups {
    margin-block-start: var(--space-12);
    padding-block-start: var(--space-12);
    border-block-start: 1px solid var(--hairline);
    display: grid; gap: var(--space-16);
  }
  .res-group__title {
    font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink);
    margin-block-end: var(--space-6);
  }
  .res-group__list {
    display: grid; gap: var(--space-8) var(--space-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 48rem) {
    .res-group__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 64rem) {
    .res-group__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-8); }
  }
  .res-item__name {
    display: block; font-weight: 600; font-size: 1.2rem; line-height: 1.3;
  }
  .res-item__binomial {
    display: block; font-family: var(--font-display); font-style: italic;
    font-size: 0.95rem; color: var(--ink-70); line-height: 1.35;
  }
  .res-item__extract {
    display: block; margin-block-start: var(--space-2);
    font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--green-dark);
  }
  .res-group__note { max-inline-size: 74ch; color: var(--ink-70); }

  /* --- transition band -------------------------------------------------- */
  .band { position: relative; overflow: hidden; background: var(--paper-alt); }
  .band img {
    inline-size: 100%; block-size: clamp(180px, 26vw, 340px); object-fit: cover;
  }

  /* --- founder ---------------------------------------------------------- */
  .founder__title {
    font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--green-dark);
    margin-block-start: var(--space-3);
  }
  .founder__body p { color: var(--ink-70); }
  .founder__body p:first-of-type { color: var(--ink); font-size: var(--fs-lede); line-height: 1.6; }
  .founder__media img { max-inline-size: 320px; }
  @media (min-width: 48rem) { .founder__media img { max-inline-size: none; } }

  /* --- contact ---------------------------------------------------------- */
  .contact__grid { display: grid; gap: var(--space-12); align-items: end; }
  @media (min-width: 64rem) {
    .contact__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-16); }
  }
  .contact h2 { font-size: var(--fs-h2); }
  .contact__lede { margin-block-start: var(--space-6); font-size: var(--fs-lede); color: var(--on-ink-70); max-inline-size: 40ch; }
  .contact__email {
    display: inline-block; font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem);
    color: var(--on-ink); text-decoration: none; letter-spacing: 0.005em;
    border-block-end: 1px solid var(--hairline-on-ink);
    padding-block: var(--space-2); min-block-size: 44px;
  }
  .contact__email:hover { color: var(--on-ink); border-block-end-color: var(--on-ink); }
  .contact__actions { margin-block-start: var(--space-8); }

  /* --- social ------------------------------------------------------------
     The only icons on the site. DR-06e keeps the design icon-free; official
     social marks are the single agreed exception, so they stay small,
     monochrome and in one row rather than becoming a block.
     Ink ground: green measures 2.99:1 there and burgundy 1.83:1, so the marks
     are --on-ink-70 (9.79:1, well past the 3:1 that WCAG 1.4.11 asks of
     non-text) and resolve to white on hover and focus. */
  .social__label {
    margin-block-start: var(--space-12);
    font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .social { display: flex; gap: var(--space-2); margin-block-start: var(--space-3); }
  .social__link {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 44px; block-size: 44px;   /* WCAG 2.5.5 target size */
    margin-inline-start: calc(var(--space-3) * -1);  /* optical alignment */
    color: var(--on-ink-70); border-radius: var(--radius);
    transition: color var(--dur-fast) var(--ease);
  }
  .social__link + .social__link { margin-inline-start: 0; }
  .social__link:hover, .social__link:focus-visible { color: var(--on-ink); }
  .social__icon { inline-size: 21px; block-size: 21px; }

  /* --- footer ----------------------------------------------------------- */
  .site-footer { background: var(--ink); color: var(--on-ink); padding-block: var(--space-16) var(--space-8); }
  .site-footer__top { display: grid; gap: var(--space-12); }
  @media (min-width: 48rem) {
    .site-footer__top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-16); }
  }
  .footer-logo { inline-size: 220px; }
  .footer-logo img { inline-size: 100%; block-size: auto; }
  .footer-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
  .footer-nav__list a { color: var(--on-ink-70); font-size: var(--fs-small); text-decoration: none; }
  .footer-nav__list a:hover { color: var(--on-ink); text-decoration: underline; }
  .site-footer__bottom {
    margin-block-start: var(--space-16); padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--hairline-on-ink);
    display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8);
    justify-content: space-between; font-size: var(--fs-small); color: var(--on-ink-70);
  }
  /* DR-18 disclosure. Full basis puts it on its own line beneath the row, so it
     reads as a footnote rather than competing with the contact address. Same
     size and tone as its siblings — no new token, no contrast risk. */
  .site-footer__note { flex-basis: 100%; margin-block-start: var(--space-2); }

  /* --- 404 -------------------------------------------------------------- */
  .notfound { display: grid; align-content: center; min-block-size: calc(100svh - var(--header-h)); padding-block: var(--section-y); }
  .notfound__code {
    font-family: var(--font-display); font-size: clamp(3rem, 2rem + 5vw, 5rem);
    color: var(--burgundy); line-height: 1;
  }
  .notfound h1 { font-size: var(--fs-h2); margin-block-start: var(--space-6); }
  .notfound p { margin-block-start: var(--space-6); color: var(--ink-70); max-inline-size: 46ch; }
  .notfound__actions { margin-block-start: var(--space-12); display: flex; flex-wrap: wrap; gap: var(--space-4); }
  .notfound__media { margin-block-start: var(--space-16); }
  .notfound__media img { inline-size: 100%; border-radius: var(--radius); }

  /* --- dark-ground overrides -------------------------------------------
     Declared last in this layer so they beat the component defaults above.
     Green measures 2.99:1 on ink and burgundy 1.83:1 — neither is usable
     there — so every meaningful element on a dark ground is white or the
     white-derived secondary. Verified with axe-core. */
  .ground--ink h2,
  .ground--ink h3,
  .ground--ink .eyebrow,
  .ground--ink .contact__email { color: var(--on-ink); }
  .ground--ink .eyebrow::after { background: var(--on-ink); }
  .ground--ink .section-head__lede,
  .ground--ink .contact__lede,
  .ground--ink p { color: var(--on-ink-70); }
  .ground--ink .stage p { color: var(--on-ink-70); }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .visually-hidden {
    position: absolute !important; inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .flow > * + * { margin-block-start: var(--space-6); }

  /* --- entrance reveal -------------------------------------------------
     Content is fully visible by default. The hidden start state applies only
     when JavaScript has confirmed itself AND motion is not reduced, so the
     page can never be blank because a script failed. */
  @media (prefers-reduced-motion: no-preference) {
    .js .reveal { opacity: 0; transform: translateY(12px); }
    .js .reveal.is-in {
      opacity: 1; transform: none;
      transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
      transition-delay: var(--reveal-delay, 0ms);
    }
  }
}