/* =====================================================================
   WILS brand v2.0 · design tokens · Direction 1 "Colour Field"
      Mirror: tokens.json (same names, DTCG format). Contrast: CONTRAST.md
   ---------------------------------------------------------------------
   Rules carried by these tokens (see BRAND-GUIDE.md):
   - One font only: WILS Sans 400 / 500 / 700. No italic exists: never
     synthesise a slant (font-synthesis: none). Binomials stay upright.
   - Flat colour. No gradients, no shadows, no rounded corners
     (only the 10 px group dot is round). Paper is pure white, never cream.
   - Two values per hue: 100 % and a 10 % tint. Group colours are never
     text; tints carry Ink only. Documented exceptions, and the only ones:
     (1) drawings and the planting-plan device build tints from opacity,
         never from a new hex (--wils-ill-*, --wils-device-*-opacity);
     (2) --wils-print-black #000000, one-colour print reproduction only.
   - Light only.
   - Arabic: same sizes, open leading, never tracked, never capitalised.
     Digits are Western 0-9 in both locales.
   ===================================================================== */

/* ---------------------------------------------------------------------
   @font-face · WILS Sans v0.2
   PATH NOTE: url() in CSS resolves relative to THIS file
   (02 Brand/tokens/ -> ../type/WILS-Sans-v0.2/fonts/). CSS custom
   properties cannot be used inside url() in @font-face, so when you copy
   this file into the app (e.g. app/src/styles/), rewrite the three
   "../type/WILS-Sans-v0.2/fonts/" prefixes to the served font path
   (e.g. "/fonts/"). --wils-font-path below documents the default.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "WILS Sans";
  src: url("../assets/fonts/WILSSans-Regular.woff2") format("woff2"),
       url("../downloads/fonts/WILSSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "WILS Sans";
  src: url("../assets/fonts/WILSSans-Medium.woff2") format("woff2"),
       url("../downloads/fonts/WILSSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "WILS Sans";
  src: url("../assets/fonts/WILSSans-Bold.woff2") format("woff2"),
       url("../downloads/fonts/WILSSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --wils-font-path: "../assets/fonts/"; /* documentation only */

  /* ================= PALETTE (constants, constants) ===== */
  /* core */
  --wils-ink: #121417;          /* all body text and data */
  --wils-paper: #FFFFFF;        /* white ground, never cream */
  --wils-muted: #575B63;        /* captions and labels only (on light) */
  --wils-muted-on-ink: #A9ACB3; /* captions on Ink (footer) */
  --wils-lead: #00666F;         /* Delta Teal: lead, home hero, actions, links */
  --wils-lead-tint: #E6F0F1;    /* Delta Teal 10 % */
  --wils-print-black: #000000;  /* one-colour print only (logo/wils-mono-black.svg); never on screen */

  /* plant groups: 100 % field, 10 % tint, text colour on the field */
  --wils-trees: #16803C;
  --wils-trees-tint: #E8F2EC;
  --wils-trees-on: #FFFFFF;
  --wils-palms: #F2A20C;
  --wils-palms-tint: #FEF6E7;
  --wils-palms-on: #121417;     /* light field: Ink, never Paper */
  --wils-shrubs: #C93A17;
  --wils-shrubs-tint: #FAEBE8;
  --wils-shrubs-on: #FFFFFF;
  --wils-groundcovers: #86C8F0;
  --wils-groundcovers-tint: #F3FAFE;
  --wils-groundcovers-on: #FFFFFF; /* white on the blue: owner choice 2026-11-08 (1.82:1, below WCAG AA) */
  --wils-climbers: #B2176E;
  --wils-climbers-tint: #F7E8F0;
  --wils-climbers-on: #FFFFFF;

  /* hardscape groups (Mineral): 100 % field, 10 % tint, text colour on the field */
  --wils-surfaces: #D6B07A;        /* Sandstone: paving, play surfaces */
  --wils-surfaces-tint: #FBF7F2;
  --wils-surfaces-on: #121417;     /* light field: Ink, never Paper */
  --wils-edges: #5B6470;           /* Granite: edges and kerbs, walls and steps */
  --wils-edges-tint: #EFF0F1;
  --wils-edges-on: #FFFFFF;
  --wils-water: #1D4E9E;           /* Cobalt: drainage, tree pits and grates */
  --wils-water-tint: #E8EDF5;
  --wils-water-on: #FFFFFF;
  --wils-furniture: #8C4A1F;       /* Corten: street furniture, lighting */
  --wils-furniture-tint: #F4EDE9;
  --wils-furniture-on: #FFFFFF;

  /* ================= SEMANTIC (light only) ============================ */
  --wils-color-bg: var(--wils-paper);
  --wils-color-surface: var(--wils-paper);        /* tiles, frames: hairline-framed, same ground */
  --wils-color-text: var(--wils-ink);
  --wils-color-text-muted: var(--wils-muted);
  --wils-color-link: var(--wils-lead);
  --wils-color-action-bg: var(--wils-lead);
  --wils-color-action-text: var(--wils-paper);
  --wils-color-lead-tint: var(--wils-lead-tint);
  --wils-color-inverse-bg: var(--wils-ink);       /* source-number chips, footer */
  --wils-color-inverse-text: var(--wils-paper);
  --wils-color-inverse-muted: var(--wils-muted-on-ink);
  --wils-color-rule: rgba(18, 20, 23, .16);       /* 1 px hairline */
  --wils-color-rule-strong: var(--wils-ink);      /* 2 px heading/table rule */
  --wils-color-focus: var(--wils-lead);
  /* group tints as grounds (the 10 % tints) */
  --wils-color-trees-tint: var(--wils-trees-tint);
  --wils-color-palms-tint: var(--wils-palms-tint);
  --wils-color-shrubs-tint: var(--wils-shrubs-tint);
  --wils-color-groundcovers-tint: var(--wils-groundcovers-tint);
  --wils-color-climbers-tint: var(--wils-climbers-tint);
  --wils-color-surfaces-tint: var(--wils-surfaces-tint);
  --wils-color-edges-tint: var(--wils-edges-tint);
  --wils-color-water-tint: var(--wils-water-tint);
  --wils-color-furniture-tint: var(--wils-furniture-tint);
  /* per-page group: set --wils-group / --wils-group-on / --wils-group-tint
     on a page or section, e.g. <main data-group="trees">. Default = Trees. */
  --wils-group: var(--wils-trees);
  --wils-group-on: var(--wils-trees-on);
  --wils-group-tint: var(--wils-color-trees-tint);

  /* ================= TYPE ============================================= */
  --wils-font-sans: "WILS Sans", system-ui, sans-serif;
  --wils-font-mono: ui-monospace, Menlo, monospace; /* hex codes and IDs on brand boards only */
  --wils-weight-regular: 400;
  --wils-weight-medium: 500;
  --wils-weight-bold: 700;

  /* Latin scale: size / line-height / weight / tracking */
  --wils-text-display-size: 96px;  --wils-text-display-lh: .92;  --wils-text-display-weight: 700; --wils-text-display-tracking: -.035em;
  --wils-text-h1-size: 64px;       --wils-text-h1-lh: .95;       --wils-text-h1-weight: 700;      --wils-text-h1-tracking: -.03em;
  --wils-text-h2-size: 40px;       --wils-text-h2-lh: 1;         --wils-text-h2-weight: 700;      --wils-text-h2-tracking: -.02em;
  --wils-text-h3-size: 24px;       --wils-text-h3-lh: 1.15;      --wils-text-h3-weight: 700;      --wils-text-h3-tracking: -.01em;
  --wils-text-lede-size: 19px;     --wils-text-lede-lh: 1.5;     --wils-text-lede-weight: 400;    --wils-text-lede-tracking: 0;
  --wils-text-body-size: 17px;     --wils-text-body-lh: 1.5;     --wils-text-body-weight: 400;    --wils-text-body-tracking: 0;
  --wils-text-small-size: 14px;    --wils-text-small-lh: 1.45;   --wils-text-small-weight: 400;   --wils-text-small-tracking: 0;
  --wils-text-label-size: 11px;    --wils-text-label-lh: 1.3;    --wils-text-label-weight: 700;   --wils-text-label-tracking: .14em; /* uppercase */

  /* Arabic: same sizes, open leading, tracking 0, no capitals */
  --wils-text-display-lh-ar: 1.25;
  --wils-text-h1-lh-ar: 1.3;
  --wils-text-h2-lh-ar: 1.4;
  --wils-text-h3-lh-ar: 1.5;
  --wils-text-lede-lh-ar: 1.8;
  --wils-text-body-lh-ar: 1.8;
  --wils-text-small-lh-ar: 1.7;
  --wils-text-label-size-ar: 13px;
  --wils-text-label-lh-ar: 1.6;
  --wils-text-label-weight-ar: 500;
  --wils-tracking-ar: 0;

  /* wordmark (values relative to the wordmark's own font-size) */
  --wils-wordmark-weight: 700;
  --wils-wordmark-tracking: -.04em;
  --wils-wordmark-lh: .8;
  --wils-wordmark-cap-height: .713em;      /* H = 1460 / 2048 units; clear space = 1 H all sides */
  --wils-wordmark-desc-size: .24em;        /* descriptor, Medium, two lines */
  --wils-wordmark-desc-lh: 1.12;
  --wils-wordmark-desc-tracking: -.01em;
  --wils-wordmark-desc-gap: .22em;
  --wils-wordmark-ar-desc-size: .2em;      /* Arabic lock-up (proposed, owner review) */
  --wils-wordmark-ar-desc-lh: 1.5;
  --wils-wordmark-ar-desc-gap: .25em;
  --wils-wordmark-min-lockup: 40px;        /* 12 mm; below this use compact WILS */
  --wils-wordmark-min-compact: 20px;       /* 6 mm */

  /* ================= SPACE (4 px base, 8 px rhythm; step n = 4 px x n) == */
  --wils-space-0: 0;
  --wils-space-1: 4px;
  --wils-space-2: 8px;
  --wils-space-3: 12px;
  --wils-space-4: 16px;
  --wils-space-5: 20px;
  --wils-space-6: 24px;
  --wils-space-8: 32px;
  --wils-space-10: 40px;
  --wils-space-12: 48px;
  --wils-space-14: 56px;
  --wils-space-16: 64px;
  --wils-space-18: 72px;
  --wils-space-24: 96px;
  --wils-space-28: 112px;

  /* ================= GRID / LAYOUT ==================================== */
  --wils-grid-columns: 12;
  --wils-grid-gutter: 24px;
  --wils-page-max: 1280px;            /* site frame */
  --wils-page-margin: 32px;           /* site side gutter, desktop */
  --wils-page-margin-mobile: 16px;    /* site side gutter, <= 1100 px */
  --wils-section-pad-y: 112px;        /* long-form / brand pages */
  --wils-section-pad-x: 96px;
  --wils-section-pad-y-mobile: 64px;
  --wils-section-pad-x-mobile: 20px;
  --wils-sidebar: 500px;              /* plant page data column (1fr + 500px, gap 48) */
  --wils-nav-height: 64px;
  --wils-nav-height-mobile: 56px;
  --wils-measure: 720px;              /* max line length for lede / prose */

  /* planting-plan device */
  --wils-device-unit: 8px;            /* cell = 8 px x n */
  --wils-device-columns: 17;          /* beds 7 / 2 / 4 / 4 (W I L S) */
  --wils-device-rows-mobile: 2;
  --wils-device-rows-page: 3;
  --wils-device-rows-cover: 6;

  /* ================= COMPONENTS (board-fixed measures) ================ */
  /* Sizes the board sets per component, outside the type scale. Compact
     (<= 1100 px) values are in the @media block below. */
  /* cover and long-form section heads */
  --wils-text-cover-size: 200px;      --wils-text-cover-lh: .84;    --wils-text-cover-tracking: -.045em;
  --wils-text-cover-idea-size: 26px;  --wils-text-cover-idea-lh: 1.25;
  --wils-text-section-size: 72px;     --wils-text-section-lh: .95;  --wils-text-section-tracking: -.03em;
  --wils-section-head-label-col: 240px;
  /* home hero */
  --wils-text-home-hero-size: 112px;  --wils-text-home-hero-lh: .88; --wils-text-home-hero-tracking: -.045em;
  --wils-text-home-lede-size: 22px;   --wils-text-home-lede-lh: 1.35; --wils-text-home-lede-weight: 500;
  --wils-home-hero-max: 1000px;
  --wils-home-lede-max: 620px;
  /* navigation */
  --wils-nav-wordmark-size: 26px;
  --wils-nav-link-size: 15px;
  --wils-nav-link-gap: 24px;
  --wils-nav-search-width: 280px;
  --wils-nav-search-height: 40px;
  /* plant hero */
  --wils-hero-binomial-size: 96px;    --wils-hero-binomial-lh: .9;
  --wils-hero-common-size: 28px;
  --wils-hero-meta-col: 380px;
  --wils-hero-meta-label-size: 10px;  /* dt labels: Label style at 10 px */
  --wils-hero-plan-max: 820px;
  --wils-hero-ar-name-size: 56px;     /* RTL: Arabic name leads */
  --wils-hero-ar-binomial-size: 22px; /* RTL: Latin binomial follows */
  /* CAD download buttons */
  --wils-btn-download-height: 84px;
  --wils-btn-download-format-size: 22px;
  --wils-btn-download-label-size: 10px;
  /* group bar (home) */
  --wils-groupbar-size: 20px;
  --wils-groupbar-min-h: 96px;
  /* data tables, chips, cards */
  --wils-table-cell-pad: 9px;
  --wils-table-label-size: 10px;      /* ref squares, chips in tables */
  --wils-ref-chip-size: 16px;
  --wils-chip-size: 12px;
  --wils-card-binomial-size: 20px;
  --wils-card-common-size: 15px;
  /* share card 1200 x 630 */
  --wils-share-width: 1200px;
  --wils-share-height: 630px;
  --wils-share-field: 680px;
  --wils-share-panel: 520px;
  --wils-share-wordmark-size: 40px;
  --wils-share-title-size: 88px;      /* two-line species name */
  --wils-share-title-size-long: 80px; /* three-line or longer slogan */
  --wils-share-desc-size: 26px;

  /* ================= RULES / HAIRLINES ================================ */
  --wils-rule-hairline: 1px;          /* frames, table rows, list dividers (colour: rule) */
  --wils-rule-strong: 2px;            /* section heads, table heads, TOC (colour: rule-strong) */
  --wils-rule-accent: 6px;            /* top accent on callout panels (colour: lead) */
  --wils-device-hairline: 1px;        /* open-ground cells */
  --wils-device-edge: 2px;            /* bed edges, plan frame */
  --wils-device-path: 3px;            /* Paper paths between beds */

  /* ================= DRAWING OPACITIES (documented exception) ========= */
  /* Drawings and the device build tints from opacity over the group
     colour or Ink, never from a new hex. Fixed values from the board. */
  --wils-device-hairline-opacity: .28; /* device open-ground cell lines */
  --wils-device-canopy-opacity: .22;   /* device tree canopy fill */
  --wils-ill-mass-back: .16;           /* render: back crown masses */
  --wils-ill-mass-front: .22;          /* render: front crown masses */
  --wils-ill-crown-edge: .75;          /* render: crown edge (1 for Palms, Groundcovers) */
  --wils-ill-veins: .375;              /* render: crown form lines (0.38 in files) */
  --wils-ill-ground: .6;               /* render: ground line */
  --wils-ill-plan-outline: .7;         /* plan symbol: canopy outline */

  /* ================= RADII / MARKERS ================================== */
  --wils-radius: 0;                   /* everything is square */
  --wils-radius-dot: 50%;             /* the group dot only */
  --wils-dot-group: 10px;
  --wils-shadow: none;

  /* ================= BREAKPOINTS (reference; not usable in @media) ===== */
  --wils-bp-compact: 1100px;          /* <= 1100: single column, type steps down, mobile gutters */
  --wils-ref-mobile: 390px;           /* design reference width, mobile */
  --wils-ref-desktop: 1280px;         /* design reference width, desktop */
}

/* Compact type steps (board @media max-width:1100px) */
@media (max-width: 1100px) {
  :root {
    --wils-text-display-size: 60px;
    --wils-text-h1-size: 40px;
    --wils-text-h2-size: 30px;
    --wils-text-lede-size: 17px;
    --wils-text-cover-size: 92px;
    --wils-text-cover-idea-size: 20px;
    --wils-text-section-size: 44px;
    --wils-text-home-hero-size: 60px;  /* not on the board: follows the display step */
    --wils-text-home-lede-size: 19px;  /* not on the board: follows the lede step */
    --wils-nav-wordmark-size: 22px;
    --wils-hero-binomial-size: 46px;
    --wils-hero-binomial-lh: .95;
    --wils-hero-common-size: 20px;
    --wils-btn-download-height: 64px;
    --wils-btn-download-format-size: 18px;
    --wils-groupbar-min-h: 56px;
    --wils-page-margin: var(--wils-page-margin-mobile);
    --wils-nav-height: var(--wils-nav-height-mobile);
    --wils-section-pad-y: var(--wils-section-pad-y-mobile);
    --wils-section-pad-x: var(--wils-section-pad-x-mobile);
  }
}

/* Group switch: <section data-group="palms"> sets the page group */
[data-group="trees"]        { --wils-group: var(--wils-trees);        --wils-group-on: var(--wils-trees-on);        --wils-group-tint: var(--wils-color-trees-tint); }
[data-group="palms"]        { --wils-group: var(--wils-palms);        --wils-group-on: var(--wils-palms-on);        --wils-group-tint: var(--wils-color-palms-tint); }
[data-group="shrubs"]       { --wils-group: var(--wils-shrubs);       --wils-group-on: var(--wils-shrubs-on);       --wils-group-tint: var(--wils-color-shrubs-tint); }
[data-group="groundcovers"] { --wils-group: var(--wils-groundcovers); --wils-group-on: var(--wils-groundcovers-on); --wils-group-tint: var(--wils-color-groundcovers-tint); }
[data-group="climbers"]     { --wils-group: var(--wils-climbers);     --wils-group-on: var(--wils-climbers-on);     --wils-group-tint: var(--wils-color-climbers-tint); }
[data-group="surfaces"]     { --wils-group: var(--wils-surfaces);     --wils-group-on: var(--wils-surfaces-on);     --wils-group-tint: var(--wils-color-surfaces-tint); }
[data-group="edges"]        { --wils-group: var(--wils-edges);        --wils-group-on: var(--wils-edges-on);        --wils-group-tint: var(--wils-color-edges-tint); }
[data-group="water"]        { --wils-group: var(--wils-water);        --wils-group-on: var(--wils-water-on);        --wils-group-tint: var(--wils-color-water-tint); }
[data-group="furniture"]    { --wils-group: var(--wils-furniture);    --wils-group-on: var(--wils-furniture-on);    --wils-group-tint: var(--wils-color-furniture-tint); }

/* Drawing plate: Paper (BRAND-GUIDE.md §8, RENDER-STANDARD.md §3.6).
   Pins Ink lines and Muted labels so an inlined drawing stays Ink on Paper. */
.wils-plate {
  background: var(--wils-paper);
  border: var(--wils-rule-hairline) solid var(--wils-color-rule);
  color: var(--wils-ink);
  --wils-color-text: var(--wils-ink);
  --wils-color-text-muted: var(--wils-muted);
}

/* Minimal base that the tokens assume (safe to drop if the app has its own) */
html { font-synthesis: none; } /* never fake italic or bold */
body {
  background: var(--wils-color-bg);
  color: var(--wils-color-text);
  font-family: var(--wils-font-sans);
  font-size: var(--wils-text-body-size);
  line-height: var(--wils-text-body-lh);
}
:lang(ar) { letter-spacing: var(--wils-tracking-ar) !important; text-transform: none !important; }

/* =====================================================================
   WILS brand guide site · shared layout and components
   Everything below uses the tokens above. No gradients, no shadows,
   square corners (only .dot is round). One font: WILS Sans.
   Sections: 1 base · 2 rail · 3 mobile bar and drawer · 4 chapter cover
   5 section / meta / stage · 6 components · 7 helpers · 8 print
   ===================================================================== */

/* ---------- 1 base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: var(--wils-color-link); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--wils-color-focus); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
i, em, cite, address { font-style: normal; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--wils-font-mono); font-size: .92em; letter-spacing: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--wils-ink); color: var(--wils-paper); padding: 10px 14px; font-weight: 500; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }

/* field colours: --f background, --f-on text. Use on .cover, .plate, any block */
.f-lead { --f: var(--wils-lead); --f-on: #FFFFFF; }
.f-ink { --f: var(--wils-ink); --f-on: #FFFFFF; }
.f-paper { --f: #FFFFFF; --f-on: var(--wils-ink); }
.f-trees { --f: var(--wils-trees); --f-on: var(--wils-trees-on); }
.f-palms { --f: var(--wils-palms); --f-on: var(--wils-palms-on); }
.f-shrubs { --f: var(--wils-shrubs); --f-on: var(--wils-shrubs-on); }
.f-groundcovers { --f: var(--wils-groundcovers); --f-on: var(--wils-groundcovers-on); }
.f-climbers { --f: var(--wils-climbers); --f-on: var(--wils-climbers-on); }
.f-surfaces { --f: var(--wils-surfaces); --f-on: var(--wils-surfaces-on); }
.f-edges { --f: var(--wils-edges); --f-on: var(--wils-edges-on); }
.f-water { --f: var(--wils-water); --f-on: var(--wils-water-on); }
.f-furniture { --f: var(--wils-furniture); --f-on: var(--wils-furniture-on); }
.field { background: var(--f); color: var(--f-on); }

/* ---------- 2 layout shell and rail ---------- */
.rail {
  position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 40;
  display: flex; flex-direction: column; gap: 22px;
  padding: 26px 18px 18px 22px; overflow-y: auto;
  background: var(--wils-color-bg); border-right: 1px solid var(--wils-color-rule);
}
main#content { margin-left: 280px; min-width: 0; }

/* lock-up built from live type: WILS Bold + two-line Medium descriptor */
.lock { display: inline-flex; align-items: flex-end; gap: .22em; font-size: 48px; line-height: 1; color: inherit; text-decoration: none; }
@supports (align-items: last baseline) { .lock { align-items: last baseline; } }
.lock__wm { font-weight: 700; letter-spacing: -.04em; line-height: .8; }
.lock__desc { font-weight: 500; font-size: .24em; line-height: 1.12; letter-spacing: -.01em; white-space: nowrap; }
.rail__brand { display: block; color: var(--wils-color-text); text-decoration: none; padding: 2px 0 4px; }
.rail__brand .lock { font-size: 46px; }

.rail nav { flex: 1 1 auto; }
.rail ol { list-style: none; }
.rail .ch > a, .rail .sub a {
  display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; min-height: 32px;
  color: var(--wils-color-text); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.3;
  border-left: 3px solid transparent;
}
.rail .ch > a:hover, .rail .sub a:hover { background: var(--wils-color-lead-tint); }
.rail .n { flex: 0 0 34px; font-size: 12px; font-weight: 700; color: var(--wils-color-text-muted); font-variant-numeric: tabular-nums; }
.rail .ch > a[aria-current="page"] { font-weight: 700; border-left-color: var(--wils-color-link); }
.rail .ch > a[aria-current="page"] .n { color: var(--wils-color-link); }
.rail .sub { margin: 2px 0 8px 0; padding-left: 0; display: none; }
.rail .ch.is-open .sub { display: block; }
.rail .sub a { font-size: 13px; font-weight: 400; color: var(--wils-color-text-muted); padding: 4px 8px 4px 8px; min-height: 28px; }
.rail .sub .n { font-weight: 500; }
.rail .sub a[aria-current="location"] { color: var(--wils-color-text); font-weight: 700; background: var(--wils-color-lead-tint); }
.rail .sub a[aria-current="location"] .n { color: var(--wils-color-link); }
.rail__foot { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--wils-color-rule); }
.rail__ver { font-size: 12px; color: var(--wils-color-text-muted); margin: 0; }
.rail__close { display: none; }
.rail noscript ol a { display: block; padding: 6px 8px; font-size: 14px; color: var(--wils-color-text); }

/* no JS: the rail holds only the <noscript> chapter list, so show it in the page flow */
:root:not(.js) .rail { position: static; width: auto; transform: none; visibility: visible; border: 0; border-bottom: 1px solid var(--wils-color-rule); padding: 16px 20px; flex-direction: column; gap: 12px; overflow: visible; }
:root:not(.js) main#content { margin-left: 0; padding-top: 0; }
:root:not(.js) .rail noscript ol { display: flex; flex-wrap: wrap; gap: 2px 16px; list-style: none; margin-top: 8px; }

/* ---------- 3 mobile bar and drawer ---------- */
.mbar { display: none; }
.scrim { display: none; }
@media (max-width: 899px) {
  .mbar {
    position: fixed; inset: 0 0 auto 0; z-index: 30; height: 56px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; background: var(--wils-color-bg); border-bottom: 1px solid var(--wils-color-rule);
  }
  .mbar .lock { font-size: 30px; color: var(--wils-color-text); }
  .mbar__btn { min-height: 40px; padding: 0 14px; background: var(--wils-color-text); color: var(--wils-color-bg); border: 0; border-radius: 0; font-weight: 500; font-size: 14px; cursor: pointer; }
  main#content { margin-left: 0; padding-top: 56px; }
  html { scroll-padding-top: 72px; }
  .rail { width: min(100%, 380px); transform: translateX(-100%); visibility: hidden; padding-top: 18px; }
  @media (prefers-reduced-motion: no-preference) { .rail { transition: transform .2s ease, visibility 0s linear .2s; } .rail.is-open { transition: transform .2s ease; } }
  .rail.is-open { transform: none; visibility: visible; }
  .rail__close { display: inline-flex; align-self: flex-end; min-height: 36px; padding: 0 14px; align-items: center; background: transparent; border: 1px solid var(--wils-color-text); border-radius: 0; font-size: 14px; font-weight: 500; cursor: pointer; }
  .scrim.is-open { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(18, 20, 23, .5); }
  body.drawer-open { overflow: hidden; }
}

/* ---------- 4 chapter cover ---------- */
.cover {
  background: var(--f, var(--wils-lead)); color: var(--f-on, #FFFFFF);
  min-height: min(80vh, 780px); display: flex; flex-direction: column; justify-content: space-between; gap: 56px;
  padding: 48px 64px 40px;
}
.cover > * { flex: none; } /* a long title and a three-row index must never overlap */
.cover.f-paper, .cover.f-ink { border-bottom: 1px solid var(--wils-color-rule); }
.cover__chap { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.cover__title { font-size: clamp(40px, 10vw, 152px); line-height: .9; letter-spacing: -.04em; font-weight: 700; margin: 0 0 24px; overflow-wrap: normal; hyphens: manual; }
.cover__intro { font-size: clamp(19px, 2vw, 26px); line-height: 1.3; font-weight: 500; max-width: 34ch; margin: 0; }
.cover__index { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 32px; border-top: 2px solid currentColor; }
.cover__index li { border-bottom: 1px solid currentColor; }
.cover__index a { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; min-height: 40px; color: inherit; text-decoration: none; font-weight: 500; font-size: 16px; }
.cover__index a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.cover__index .n { flex: 0 0 34px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.cover :focus-visible { outline-color: currentColor; }
@media (max-width: 899px) { .cover { padding: 32px 20px 28px; min-height: 0; gap: 40px; } }

/* ---------- 5 section: meta (left) + stage (right) ---------- */
.sec {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px;
  padding: 96px 64px; border-top: 1px solid var(--wils-color-rule); max-width: 1480px;
}
.cover + .sec { border-top: 0; }
.sec--wide { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.sec--wide .meta { max-width: 720px; position: static; }
.meta { align-self: start; position: sticky; top: 32px; min-width: 0; }
.sec--wide .meta, .sec--flow .meta { position: static; }
.meta .num { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wils-color-text-muted); margin: 0 0 14px; }
.meta h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 20px; }
.meta h3 { font-size: 20px; letter-spacing: -.01em; margin: 28px 0 8px; }
.meta p { max-width: 56ch; }
.meta p.lede { font-size: 19px; line-height: 1.45; }
.stage { min-width: 0; }
.plate {
  background: var(--f, #FFFFFF); color: var(--f-on, var(--wils-ink));
  border: 1px solid var(--wils-color-rule); padding: 32px; overflow: hidden;
  /* plates are Paper with Ink text: drawings and logos need it */
  --wils-color-text: var(--wils-ink); --wils-color-text-muted: var(--wils-muted); --wils-color-link: var(--wils-lead);
  --wils-color-rule: rgba(18, 20, 23, .16);
}
.plate.field { border-color: transparent; }
.plate--center { display: grid; place-items: center; }
.plate--flush { padding: 0; }
.plate--tall { min-height: 420px; }
.plate--mid { min-height: 300px; }
.plate--tint { background: var(--wils-lead-tint); }
.plate > svg, .plate > img { margin-inline: auto; }
.plate--tint { --wils-color-rule: rgba(18, 20, 23, .16); }
.cap { font-size: 13px; line-height: 1.45; color: var(--wils-color-text-muted); margin: 12px 0 0; max-width: 70ch; }
.stage > .plate + .plate, .stage > .g2 + .plate, .stage > .plate + .g2, .stage > .cap + .plate, .stage > .cap + .g2 { margin-top: 28px; }
@media (max-width: 1099px) { .sec { padding: 72px 40px; gap: 40px; } .cover { padding-inline: 40px; } }
@media (max-width: 899px) {
  .sec { grid-template-columns: minmax(0, 1fr); padding: 48px 20px; gap: 28px; }
  .meta { position: static; }
  .plate { padding: 20px; }
}

/* ---------- 6 components ---------- */
/* note / Rule box */
.note { background: var(--wils-color-lead-tint); border-top: var(--wils-rule-accent) solid var(--wils-color-link); padding: 14px 18px 4px; margin: 24px 0; max-width: 56ch; }
.note__tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.note p { font-size: 15px; margin-bottom: 10px; }

/* spec table */
.spec { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.spec caption { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wils-color-text-muted); padding-bottom: 8px; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--wils-color-rule); font-weight: 400; }
.spec thead th { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-bottom: 2px solid var(--wils-color-rule-strong); }
.spec tbody th { font-weight: 700; white-space: nowrap; }
.spec td:last-child, .spec th:last-child { padding-right: 0; }

/* key / value list */
.kv { display: grid; grid-template-columns: minmax(96px, 150px) 1fr; margin: 24px 0; border-top: 2px solid var(--wils-color-rule-strong); font-size: 14px; }
.kv dt, .kv dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--wils-color-rule); }
.kv dt { font-weight: 700; }

/* swatch */
.swatch { margin: 0; border: 1px solid rgba(18, 20, 23, .16); background: #FFFFFF; color: var(--wils-ink); }
.swatch__chip { background: var(--sw); color: var(--sw-on, #FFFFFF); min-height: 120px; padding: 12px 14px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: flex-end; }
.swatch figcaption { padding: 10px 14px 12px; font-size: 13px; line-height: 1.4; display: flex; flex-direction: column; gap: 1px; }
.swatch figcaption b { font-size: 15px; }
.swatch figcaption span { color: var(--wils-muted); }
.swatch figcaption .mono { color: var(--wils-ink); }

/* do / don't tiles */
.tile { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tile__vis { border: 1px solid rgba(18, 20, 23, .16); background: #FFFFFF; color: var(--wils-ink); min-height: 150px; padding: 20px; display: grid; place-items: center; overflow: hidden; }
.tile__tag { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px; background: var(--wils-ink); color: #FFFFFF; }
.tile--do .tile__tag { background: var(--wils-lead); }
.tile--dont .tile__vis { border-style: dashed; border-color: var(--wils-ink); }
.tile p { font-size: 13px; line-height: 1.45; color: var(--wils-color-text-muted); margin: 0; }

/* the one round thing */
.dot { display: inline-block; width: var(--wils-dot-group); height: var(--wils-dot-group); border-radius: var(--wils-radius-dot); background: var(--dot, var(--wils-trees)); vertical-align: baseline; flex: none; }
.d-trees { --dot: var(--wils-trees); } .d-palms { --dot: var(--wils-palms); } .d-shrubs { --dot: var(--wils-shrubs); }
.d-groundcovers { --dot: var(--wils-groundcovers); } .d-climbers { --dot: var(--wils-climbers); }
.d-surfaces { --dot: var(--wils-surfaces); } .d-edges { --dot: var(--wils-edges); }
.d-water { --dot: var(--wils-water); } .d-furniture { --dot: var(--wils-furniture); }

/* screenshot frame (images of the live site) */
.shot { margin: 0; }
.shot img { width: 100%; border: 1px solid rgba(18, 20, 23, .16); background: #FFFFFF; }
.shot figcaption { font-size: 13px; color: var(--wils-color-text-muted); margin-top: 10px; }
.shot--phone { max-width: 260px; }

/* chapter cards (links) */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.card { display: flex; flex-direction: column; gap: 6px; min-height: 190px; height: 100%; padding: 18px; border: 1px solid var(--wils-color-rule); border-top: var(--wils-rule-accent) solid var(--f, var(--wils-lead)); color: var(--wils-color-text); text-decoration: none; background: var(--wils-color-bg); }
.card:hover { background: var(--wils-color-lead-tint); }
.card__n { font-size: 13px; font-weight: 700; color: var(--wils-color-text-muted); font-variant-numeric: tabular-nums; }
.card__t { font-size: 26px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.card__d { font-size: 14px; line-height: 1.45; color: var(--wils-color-text-muted); margin-top: auto; }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards { grid-template-columns: minmax(0, 1fr); } }

/* previous / next */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 64px 64px; max-width: 1480px; }
.pager a { display: flex; flex-direction: column; gap: 6px; padding: 16px 0 18px; border-top: 2px solid var(--wils-color-rule-strong); color: var(--wils-color-text); text-decoration: none; min-height: 96px; }
.pager a:hover { background: var(--wils-color-lead-tint); }
.pager__l { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wils-color-text-muted); }
.pager__t { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.pager .next { grid-column: 2; text-align: right; }
.pager .prev { grid-column: 1; }
.foot { padding: 20px 64px 40px; font-size: 13px; color: var(--wils-color-text-muted); border-top: 1px solid var(--wils-color-rule); }
@media (max-width: 899px) { .pager { padding: 0 20px 40px; gap: 12px; } .foot { padding-inline: 20px; } }

/* ---------- 7 helpers ---------- */
.g2, .g3, .g4 { display: grid; gap: 16px; align-items: start; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { display: grid; gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1099px) { .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .g2, .g3, .g4, .g5 { grid-template-columns: minmax(0, 1fr); } }
.stack > * + * { margin-top: 16px; }
.mt0 { margin-top: 0 !important; }

/* specimen helpers used by 1.0 (reusable) */
.acro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--wils-ink); }
.acro > div { padding: 14px 12px 16px 0; border-bottom: 1px solid rgba(18, 20, 23, .16); }
.acro b { display: block; font-size: clamp(54px, 8vw, 96px); line-height: .9; letter-spacing: -.04em; }
.acro span { display: block; margin-top: 10px; font-size: 14px; font-weight: 500; line-height: 1.25; }
.prin { counter-reset: p; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.prin li { border: 1px solid rgba(18, 20, 23, .16); background: #FFFFFF; color: var(--wils-ink); display: flex; flex-direction: column; }
.prin__vis { height: 132px; padding: 16px; display: grid; place-items: center; border-bottom: 1px solid rgba(18, 20, 23, .16); overflow: hidden; }
.prin__txt { padding: 12px 14px 16px; }
.prin__txt b { display: block; font-size: 17px; line-height: 1.2; margin-bottom: 4px; }
.prin__txt b::before { counter-increment: p; content: counter(p) "  "; color: var(--wils-muted); font-weight: 700; font-size: 13px; }
.prin__txt span { font-size: 13px; line-height: 1.4; color: var(--wils-muted); }
@media (max-width: 1099px) { .prin { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .prin { grid-template-columns: minmax(0, 1fr); } }


/* ---------- 9 additions, brand 2.0 revision 2 ---------- */
/* wide tables scroll inside their plate instead of the page */
.tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl > .spec { min-width: 520px; }
/* screenshot cropped to a fixed frame, top aligned, so two pages sit level */
.shot--crop img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
/* replay control for the motion specimens: one Ink button, square */
.replay { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; margin-top: 12px; font: inherit; font-size: 13px; font-weight: 700; color: var(--wils-ink); background: var(--wils-paper); border: 1px solid var(--wils-ink); border-radius: 0; cursor: pointer; }
.replay:hover { background: var(--wils-lead-tint); }
.replay svg { width: 14px; height: 14px; }
/* cover entrance: the title and intro rise once, 600 ms, the brand ease */
@media (prefers-reduced-motion: no-preference) {
  .js .cover__title, .js .cover__intro, .js .cover__index { animation: g-rise .7s cubic-bezier(.16, 1, .3, 1) both; }
  .js .cover__intro { animation-delay: 60ms; }
  .js .cover__index { animation-delay: 120ms; }
}
@keyframes g-rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 8 print ---------- */
@media print {
  .rail, .mbar, .scrim, .skip { display: none !important; }
  main#content { margin: 0; padding: 0; }
  body { font-size: 11pt; background: #FFFFFF; color: #121417; }
  .cover { min-height: 0; padding: 24pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; break-after: page; }
  .sec { padding: 24pt 0; grid-template-columns: 5fr 7fr; gap: 24pt; break-inside: avoid; }
  .meta { position: static; }
  .plate, .swatch__chip, .field, .card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pager { display: none; }
  a { color: inherit; }
}