/* ============================================================================
   Wayfind — shared design tokens and primitives
   ----------------------------------------------------------------------------
   Every page in this repo used to carry its own <style> block with its own
   :root. That produced six different "forest greens", five serif families and
   twelve corner radii across twenty pages — the drift you could feel as
   "generic". This file is the single source of truth. Link it BEFORE a page's
   own <style> block so page-level rules can still override where they must.

       <link rel="stylesheet" href="/wayfind.css">

   Direction A — "Modern Wayfinding": mineral white, near-black ink, one
   grotesque at wide weight contrast, mono for labels and data, jade used as a
   signal rather than decoration. No serif. No italic.

   COLOUR RULE — read before using --jade anywhere:
     --jade         #65B891  2.3:1 on paper. FILLS AND GRAPHICS ONLY. Never text.
     --jade-display #2E9B74  3.4:1 on paper. Large display type only (24px+).
     --jade-deep    #1F6F52  6.1:1 on paper. Safe for body and small text.
     On dark surfaces --jade reaches 7.5:1 and needs no substitute.
   ========================================================================== */

:root{
  /* ── surface ── */
  --paper:#FBFBF9;
  --paper-2:#F4F4F1;
  --ink:#141414;
  --ink-80:#3A3A38;
  --ink-60:#5A5A57;
  /* --ink-40 carries almost every small mono label on the site. At the old
     #8A8A86 it measured 3.34:1 on --paper — below the 4.5:1 that 9-13px text
     needs. #6E6E6A is 4.94:1. Do not lighten it back without re-measuring. */
  --ink-40:#6E6E6A;
  --ink-30:#9B9B97;      /* non-text only: rules, dividers, inactive marks */
  --rule:#E3E3DF;
  --rule-strong:#CFCFC9;

  /* ── brand ── */
  --jade:#65B891;
  --jade-display:#2E9B74;
  --jade-deep:#1F6F52;
  --jade-wash:#EDF7F2;
  --blaze:#C2521F;            /* trail marker — "you are here", used sparingly */

  /* Terracotta — the people. Approved 9 Aug 2026, first live use below in the
     coaching section: anything with a human on the other end (coaching,
     testimonials, team) is terracotta's job, distinct from jade (the tool,
     the path someone walks alone). Ratios measured on --paper. */
  --terra:#BE725A;        /* 3.5:1 — fills and display type only */
  --terra-deep:#A05539;   /* 5.3:1 — safe for text at any size */
  --terra-wash:#F7EFEB;   /* warm surface */
  --terra-line:#E8D5CC;   /* non-text: hairline on terracotta */

  /* ── dark surfaces (result screens, photographic sections) ── */
  --dark:#141414;
  --on-dark:#F2F2EF;
  --on-dark-60:#A8A8A3;
  --on-dark-30:#8A8A86;  /* 5.3:1 on --dark; the old #6E6E6A was only 3.6:1 */
  --hair-light:rgba(242,242,239,.14);
  /* One large field of neutral black plus the dark hero read as two heavy,
     unrelated moments on one scroll — at odds with a calming/uplifting brand.
     --dusk is a deep, warm forest tone at nearly the same luminance as
     --dark, so on-dark/jade text keeps its contrast, but the section reads
     as grounded night-forest rather than a corporate-dark slab. */
  --dusk:#16241D;

  /* ── type ── */
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-hero:clamp(46px,6.6vw,98px);
  --t-h2:clamp(30px,3.5vw,46px);
  --t-h3:clamp(19px,1.9vw,23px);
  --t-lede:clamp(17px,1.7vw,20px);
  --t-body:16px;
  --t-small:14.5px;
  /* 12px, was 10.5px. The brand's own legibility floor is "nothing a reader
     is meant to read goes below 11px, on any screen", and this token sat
     below it on every desktop label on the site: the section eyebrows, the
     data labels, the timestamps. Mobile was raised to 11.5px a while ago and
     the note there says desktop was left alone deliberately, which is how a
     documented floor stayed broken in the one place most people read it.
     12px also clears the rule that anything under 12px must take --ink-60,
     so accent-coloured labels become legal rather than borderline.
     Tracking eases with it, below: tighter letterfit reads easier small. */
  --t-label:12px;

  /* ── shape: rectangles, not pills ── */
  --r-sm:2px;
  --r-md:3px;
  --r-lg:4px;

  /* ── space ── */
  --gutter:48px;
  --max:1440px;
  --section-y:96px;

  --grid-line:rgba(20,20,20,.055);
}

/* ── primitives ─────────────────────────────────────────────────────────── */

.wf-label{
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink-60);
}

.wf-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);
  font-size:14px;font-weight:500;
  padding:13px 22px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.wf-btn svg{width:16px;height:16px}
.wf-btn--ink{background:var(--ink);color:var(--paper)}
.wf-btn--ink:hover{background:var(--jade-deep)}
.wf-btn--line{border-color:var(--ink);color:var(--ink);background:transparent}
.wf-btn--line:hover{background:var(--ink);color:var(--paper)}
/* on photography */
.wf-btn--light{background:#fff;color:var(--ink)}
.wf-btn--light:hover{background:var(--jade);color:var(--ink)}
.wf-btn--wire{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.wf-btn--wire:hover{background:#fff;color:var(--ink)}

.wf-rule{border:0;border-top:1px solid var(--rule);margin:0}

/* focus: visible, never removed */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--jade-deep);
  outline-offset:3px;
}

/* ── the Y, as a wayfinding mark ──────────────────────────────────────────
   The branch point is the brand idea: one path becoming a choice. Used at
   small size as a step marker, at large size as a section divider.          */
.wf-y{display:inline-block;color:var(--ink-30)}
.wf-y--on{color:var(--jade-deep)}

/* ── result-screen components ─────────────────────────────────────────────
   These class names are NOT new. They are the ones perfect_day_v14.html
   already builds at runtime (r-card, r-card-lbl, r-grid, r-gc ...). Styling
   them here means the homepage example and the real result screen are the
   same component and cannot drift apart — and it means restyling the real
   result screen later is a CSS-only change that never touches the 75
   JavaScript-bound element IDs in that file.                                */
.r-card{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:20px;
}
.r-card-lbl{
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink);
}
.r-vds-sub{
  font-family:var(--sans);
  font-size:13px;
  color:var(--ink-60);
  margin-top:2px;
}
.r-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  margin-top:16px;
}
.r-gc{
  background:var(--paper);
  padding:14px 14px 16px;
  min-width:0;
}
.r-gc-icon{font-size:13px;line-height:1}
.r-gc-lbl{
  display:block;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-40);
  font-weight:500;
  margin:8px 0 5px;
}
.r-gc-val{
  display:block;
  font-family:var(--sans);
  font-size:14.5px;
  line-height:1.42;
  color:var(--ink);
}

@media (max-width:820px){
  :root{--gutter:22px;--section-y:72px}
  .r-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* LEGIBILITY FLOORS — read before shrinking any label back down.
     This breakpoint used to adjust gutter and section spacing only, which
     meant a 10.5px eyebrow and a 9.5px result-card label rendered at their
     full desktop size on a phone. Three rules now apply below 820px:

       1. nothing a reader is meant to read sits below 11px
       2. under 12px, type takes --ink-60 (7.0:1), never --ink-40 (4.94:1).
          4.94 passes WCAG, but the ratio is size-blind and a tracked-out
          uppercase label still reads thin at 9px.
       3. uppercase tracking eases as size drops. Tighter letterfit is
          easier to read small, not harder — the wide .16em that makes a
          label look considered on a desktop is what breaks it on a phone.

     Desktop is deliberately untouched. */
  :root{--t-label:11.5px}
  .wf-label{letter-spacing:.13em}
  .r-card-lbl{letter-spacing:.12em}
  .r-gc-lbl{font-size:11px;letter-spacing:.1em;color:var(--ink-60)}
}
@media (max-width:460px){
  .r-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}