/* ==========================================================================
   10k Solutions — Global design tokens  ·  v1.1  ·  30 Oct 2026
   --------------------------------------------------------------------------
   Identity: plum-ink + warm paper, the wavy coral→iris "k", Bricolage
   Grotesque / Hanken Grotesk / Space Mono.
   Theme idea: "the organisation as a system of levers". Calm paper pages,
   decisive ink sections, one warm hand (coral, people) and one cool hand
   (iris, systems) that only meet in the gradient.

   Rules baked in
   - Coral #FF7A50 fails as text on paper (2.25:1). It is a fill, a rule and
     an on-ink accent. On paper, warm text uses --coral-700 (5.27:1).
   - Iris #6E63FF is large-text / UI only on paper (3.75:1). Links on paper
     use --iris-700 (5.54:1).
   - Labels are Space Mono in sentence case. No uppercase, no wide tracking.
   - Sections flip between paper and ink with [data-surface="ink"] (or the
     WP block style .is-style-section-ink). Components read semantic tokens
     only, so they recolour themselves.
   - The coral→iris gradient is reserved: logo, one hero moment, the odd
     headline turn on ink. No glow effects on components.
   - Mirrors theme.json 1:1 (same hex, same clamp() values).
   ========================================================================== */

@layer tokens, base, layout;

@layer tokens {
  :root {
    /* ---------------------------------------------------------------------
       1. PRIMITIVES — raw palette. Never use these in components.
       Contrast notes: ratio vs paper #F4EFE7 / vs ink #15121E.
       --------------------------------------------------------------------- */
    /* Plum-ink */
    --ink-950: #15121E; /* brand ink        16.13 on paper            */
    --ink-900: #221D2C; /* raised ink                                  */
    --ink-800: #2E2839; /* card on ink / hover of ink buttons          */
    --ink-700: #3A3346; /* hairline on ink                             */
    --ink-600: #5E5868; /* secondary text on light   5.97 / 5.36 paper-300 */
    --ink-500: #6B6475; /* decorative / large-only   4.95              */
    --ink-400: #8F8799; /* control borders on light  3.01 (1.4.11)     */
    --ink-300: #A79FB0; /* "stone": tertiary text on ink  7.24         */

    /* Warm paper */
    --paper-0:   #FFFFFF;
    --paper-50:  #FBF8F3; /* raised card on paper                      */
    --paper-100: #F4EFE7; /* brand paper                               */
    --paper-200: #EAE3D8; /* sunken / alt band                         */
    --paper-300: #D8CFC1; /* hairline on paper (decorative)            */
    --paper-400: #D9D2C7; /* secondary text on ink   12.31             */

    /* Coral — warm / people */
    --coral-300: #FF8F6B; /* hover fill                ink text 8.26   */
    --coral-500: #FF7A50; /* BRAND                     ink text 7.17   */
    --coral-600: #F0683D; /* pressed fill              ink text 5.94   */
    --coral-700: #AD3E1A; /* coral text on all light surfaces ≥4.73 AA */
    --coral-100: #FFE6DB; /* tint surface                              */
    --coral-k:   #FF6B6E; /* the pinker coral inside the "k" gradient  */

    /* Iris — cool / systems */
    --iris-300: #A49CFF;  /* links on ink              7.72            */
    --iris-500: #6E63FF;  /* BRAND  large text/UI only 3.75 on paper   */
    --iris-600: #6157F0;  /* hover fill                white 5.08      */
    --iris-700: #5246E0;  /* links / focus on paper    5.54            */
    --iris-800: #4639C9;  /* pressed                   white 7.81      */
    --iris-100: #E8E6FF;  /* tint surface                              */

    /* Orchid — where coral and iris meet. Gradient + data viz, rarely solo */
    --orchid-300: #D07BDE; /* on ink 6.66 */
    --orchid-500: #B85FC8; /* large-only on paper 3.33 */
    --orchid-700: #8E3FA0; /* text on paper 5.45 */

    /* Semantic hues (all ≥4.5:1 on paper and on their own tint) */
    --green-700: #1C7A55;  --green-100: #E3F1EA;  --green-300: #5FD3A3;
    --amber-700: #8F5200;  --amber-100: #F8EBD3;  --amber-300: #FFB547;
    --red-700:   #C0263D;  --red-100:   #F9E1E4;  --red-300:   #FF6B7D;

    /* NasIQA sub-brand — scope to [data-brand="nasiqa"] only */
    --nasiqa-ink:  #0B1F2A;
    --nasiqa-teal: #1FA7A1; /* on ink 6.24; never as text on paper (2.58) */
    --nasiqa-mist: #E6ECEF;

    /* ---------------------------------------------------------------------
       2. GRADIENTS — the "k". Forward diagonal, coral → iris.
       --------------------------------------------------------------------- */
    --gradient-k: linear-gradient(115deg, var(--coral-500) 0%, var(--coral-k) 28%, var(--orchid-500) 62%, var(--iris-500) 100%);
    /* Text-safe on paper: every stop ≥4.5:1 */
    --gradient-k-deep: linear-gradient(115deg, var(--coral-700) 0%, var(--orchid-700) 55%, var(--iris-700) 100%);
    /* Ambient glow: homepage hero ONLY. Never on cards, buttons or sections. */
    --gradient-k-glow: radial-gradient(60% 80% at 85% 10%, rgb(110 99 255 / .28), transparent 70%),
                       radial-gradient(50% 70% at 10% 100%, rgb(255 122 80 / .22), transparent 70%);
    /* Goldilocks zone band: the "sustainable range" motif */
    --gradient-zone: linear-gradient(90deg, transparent 0%, rgb(255 122 80 / .18) 30%, rgb(110 99 255 / .18) 70%, transparent 100%);

    /* ---------------------------------------------------------------------
       3. SEMANTIC COLOUR — light (paper) context is the default
       --------------------------------------------------------------------- */
    --color-bg:              var(--paper-100);
    --color-bg-raised:       var(--paper-50);
    --color-bg-sunken:       var(--paper-200);
    --color-bg-inverse:      var(--ink-950);

    --color-text:            var(--ink-950);   /* 16.13 */
    --color-text-secondary:  var(--ink-600);   /* 5.97  */
    --color-text-inverse:    var(--paper-100);
    --color-heading:         var(--ink-950);
    --color-heading-accent:  var(--coral-700); /* the "turn" in a headline */
    --color-label:           var(--coral-700);

    --color-link:            var(--iris-700);
    --color-link-hover:      var(--iris-800);
    --color-link-underline:  rgb(82 70 224 / .35);
    --color-link-underline-hover: var(--coral-500);

    --color-border:          var(--paper-300); /* decorative hairline */
    --color-border-strong:   var(--ink-950);
    --color-border-control:  var(--ink-400);   /* inputs: 3.01 */
    --color-focus:           var(--iris-700);

    /* Actions */
    --action-primary-bg:         var(--coral-500);
    --action-primary-bg-hover:   var(--coral-300);
    --action-primary-bg-active:  var(--coral-600);
    --action-primary-text:       var(--ink-950);   /* 7.17 → 8.26 → 5.94 */
    --action-secondary-bg:       var(--ink-950);
    --action-secondary-bg-hover: var(--ink-800);
    --action-secondary-bg-active:var(--ink-900);
    --action-secondary-text:     var(--paper-100);
    --action-ghost-border:       var(--ink-950);
    --action-ghost-bg-hover:     var(--paper-200);
    --action-ghost-text:         var(--ink-950);
    --action-disabled-bg:        var(--paper-200);
    --action-disabled-text:      var(--ink-500);

    /* Feedback */
    --color-success: var(--green-700); --color-success-bg: var(--green-100);
    --color-warning: var(--amber-700); --color-warning-bg: var(--amber-100);
    --color-danger:  var(--red-700);   --color-danger-bg:  var(--red-100);
    --color-info:    var(--iris-700);  --color-info-bg:    var(--iris-100);

    --color-selection-bg:   var(--coral-500);
    --color-selection-text: var(--ink-950);

    /* ---------------------------------------------------------------------
       4. TYPOGRAPHY
       Fluid between 360px and 1440px viewports. rem-based, so it respects
       user zoom. Fallbacks are generic families only (no named system fonts).
       --------------------------------------------------------------------- */
    --font-display: "Bricolage Grotesque", sans-serif;
    --font-body:    "Hanken Grotesk", sans-serif;
    --font-mono:    "Space Mono", monospace;

    /*            min → max px                                                          */
    --fs-2xs: clamp(0.75rem, 0.7396rem + 0.0463vw, 0.7813rem);   /* 12 → 12.5 fine print */
    --fs-xs:  clamp(0.8125rem, 0.7917rem + 0.0926vw, 0.875rem);  /* 13 → 14  labels, captions */
    --fs-s:   clamp(0.9375rem, 0.9167rem + 0.0926vw, 1rem);      /* 15 → 16  small body, UI */
    --fs-m:   clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);       /* 16 → 18  body */
    --fs-l:   clamp(1.125rem, 1.0625rem + 0.2778vw, 1.3125rem);  /* 18 → 21  lead, H6 */
    --fs-xl:  clamp(1.25rem, 1.125rem + 0.5556vw, 1.625rem);     /* 20 → 26  H5 */
    --fs-2xl: clamp(1.5rem, 1.2917rem + 0.9259vw, 2.125rem);     /* 24 → 34  H4 */
    --fs-3xl: clamp(1.75rem, 1.4167rem + 1.4815vw, 2.75rem);     /* 28 → 44  H3 */
    --fs-4xl: clamp(2.125rem, 1.625rem + 2.2222vw, 3.625rem);    /* 34 → 58  H2 */
    --fs-5xl: clamp(2.5rem, 1.75rem + 3.3333vw, 4.75rem);        /* 40 → 76  H1 */
    --fs-6xl: clamp(3rem, 1.8333rem + 5.1852vw, 6.5rem);         /* 48 → 104 display / hero */

    /* Weights (Bricolage is variable 200–800; Hanken 100–900) */
    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
    --fw-bold: 700; --fw-heavy: 800;

    /* Bricolage width axis: slightly condensed at display sizes = more
       presence per line without shouting. */
    --fstretch-display: 92%;
    --fstretch-heading: 96%;
    --fstretch-normal: 100%;

    /* Line height */
    --lh-display: 0.95; --lh-tight: 1.02; --lh-snug: 1.12;
    --lh-heading: 1.22; --lh-body: 1.6; --lh-lead: 1.5; --lh-label: 1.4;

    /* Letter-spacing: tightens as size grows. Labels stay at 0 (sentence
       case, no tracking). */
    --ls-display: -0.045em; --ls-h1: -0.04em; --ls-h2: -0.032em;
    --ls-h3: -0.022em; --ls-h4: -0.014em; --ls-h5: -0.008em;
    --ls-h6: -0.004em; --ls-body: 0; --ls-label: 0; --ls-numeric: -0.01em;

    /* Measure */
    --measure-narrow: 46ch; --measure: 66ch; --measure-wide: 78ch;

    /* ---------------------------------------------------------------------
       5. SHAPE — radius
       Soft but not bubbly. The signature is "the notch": three rounded
       corners and one tight corner, bottom-left, echoing the forward lean of
       the "k". Use it on feature cards, media and CTAs bands, not on
       everything.
       --------------------------------------------------------------------- */
    --radius-0: 0;
    --radius-xs: 4px;   /* tags, inline code                     */
    --radius-s: 8px;    /* inputs, small buttons                 */
    --radius-m: 14px;   /* cards                                 */
    --radius-l: 22px;   /* feature cards, media                  */
    --radius-xl: 32px;  /* section panels on wide screens        */
    --radius-pill: 999px; /* buttons, chips, slider tracks       */
    --radius-notch:    var(--radius-l) var(--radius-l) var(--radius-l) var(--radius-xs);
    --radius-notch-xl: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-s);

    --border-hairline: 1px;
    --border-strong: 1.5px;
    --border-rule: 2px; /* the "lever line" under labels / active nav */

    /* ---------------------------------------------------------------------
       6. ELEVATION — plum-tinted, never grey. Layered key + ambient.
       --------------------------------------------------------------------- */
    --shadow-color: 21 18 30;
    --shadow-0: none;
    --shadow-1: 0 1px 2px rgb(var(--shadow-color) / .06), 0 1px 1px rgb(var(--shadow-color) / .04);            /* rest: cards on paper  */
    --shadow-2: 0 2px 4px rgb(var(--shadow-color) / .06), 0 10px 24px -8px rgb(var(--shadow-color) / .14);    /* raised: card hover    */
    --shadow-3: 0 4px 8px rgb(var(--shadow-color) / .06), 0 20px 44px -12px rgb(var(--shadow-color) / .22);   /* floating: menus, popovers */
    --shadow-4: 0 8px 16px rgb(var(--shadow-color) / .08), 0 40px 80px -24px rgb(var(--shadow-color) / .34);  /* overlay: modals       */
    /* On ink, drop shadows vanish; elevation = lighter surface + top highlight */
    --shadow-ink-1: inset 0 1px 0 rgb(255 255 255 / .05);
    --shadow-ink-2: inset 0 1px 0 rgb(255 255 255 / .07), 0 16px 40px -16px rgb(0 0 0 / .6);

    /* Semantic elevation (flips on ink) */
    --elevation-rest:     var(--shadow-1);
    --elevation-raised:   var(--shadow-2);
    --elevation-floating: var(--shadow-3);
    --elevation-overlay:  var(--shadow-4);

    /* ---------------------------------------------------------------------
       7. MOTION — "levers, not fireworks". Short, weighted, decisive.
       --------------------------------------------------------------------- */
    --dur-instant: 80ms;   /* press feedback          */
    --dur-fast: 140ms;     /* colour, underline       */
    --dur-base: 220ms;     /* lift, reveal            */
    --dur-slow: 360ms;     /* panels, accordions      */
    --dur-story: 640ms;    /* scroll-in sequences     */
    --ease-out: cubic-bezier(.2, .8, .2, 1);       /* default            */
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);   /* panels             */
    --ease-lever: cubic-bezier(.34, 1.4, .64, 1);  /* slight overshoot: slider thumbs, toggles, the "click" of a lever */

    /* Micro-interaction states */
    --lift-hover: translateY(-2px);
    --lift-press: translateY(0) scale(.98);
    --underline-rest: 1px;
    --underline-hover: 2px;
    --underline-offset: .22em;
    --focus-ring-width: 2px;
    --focus-ring-offset: 3px;
    --focus-ring: 0 0 0 var(--focus-ring-offset) var(--color-bg), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--color-focus);

    /* ---------------------------------------------------------------------
       8. SPACING — 4px base, named steps. Fluid steps for rhythm.
       --------------------------------------------------------------------- */
    --space-0: 0;
    --space-1: 0.25rem;  /* 4   */
    --space-2: 0.5rem;   /* 8   */
    --space-3: 0.75rem;  /* 12  */
    --space-4: 1rem;     /* 16  */
    --space-5: 1.5rem;   /* 24  */
    --space-6: 2rem;     /* 32  */
    --space-7: 3rem;     /* 48  */
    --space-8: 4rem;     /* 64  */
    --space-9: 6rem;     /* 96  */
    --space-10: 8rem;    /* 128 */

    --space-flow:      clamp(1.25rem, 1.0833rem + 0.7407vw, 1.75rem);  /* 20 → 28 between blocks  */
    --space-section-s: clamp(3rem, 2.3333rem + 2.963vw, 5rem);        /* 48 → 80                 */
    --space-section-m: clamp(4rem, 2.6667rem + 5.9259vw, 8rem);       /* 64 → 128 default section */
    --space-section-l: clamp(6rem, 4rem + 8.8889vw, 12rem);           /* 96 → 192 hero, chapter   */

    /* ---------------------------------------------------------------------
       9. LAYOUT — 4 / 8 / 12 column grid
       Breakpoints (CSS vars can't drive @media; use these literals):
         sm 480px · md 768px · lg 1024px · xl 1280px · 2xl 1440px
       --------------------------------------------------------------------- */
    --grid-columns: 4;
    --grid-gutter: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);    /* 16 → 32 */
    --page-margin: clamp(1rem, -0.3333rem + 5.9259vw, 5rem);   /* 16 → 80 */
    --width-content: 46rem;   /* 736px  reading column (≈66ch body) */
    --width-wide: 80rem;      /* 1280px */
    --width-max: 90rem;       /* 1440px */
    --header-height: 4.5rem;

    --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100;
    --z-header: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500;
  }

  @media (min-width: 768px)  { :root { --grid-columns: 8;  } }
  @media (min-width: 1024px) { :root { --grid-columns: 12; --header-height: 5.5rem; } }

  /* ---------------------------------------------------------------------
     SURFACE: INK — flip semantic tokens for dark sections.
     Usage: <section data-surface="ink"> or WP block style "Section · Ink".
     --------------------------------------------------------------------- */
  [data-surface="ink"],
  [class*="is-style-section-ink"] {
    --color-bg:              var(--ink-950);
    --color-bg-raised:       var(--ink-900);
    --color-bg-sunken:       #0E0C14;
    --color-bg-inverse:      var(--paper-100);
    --color-text:            var(--paper-100); /* 16.13 */
    --color-text-secondary:  var(--paper-400); /* 12.31 */
    --color-text-inverse:    var(--ink-950);
    --color-heading:         var(--paper-100);
    --color-heading-accent:  var(--coral-500); /* full brand coral works here: 7.17 */
    --color-label:           var(--coral-500);
    --color-link:            var(--iris-300);
    --color-link-hover:      var(--paper-100);
    --color-link-underline:  rgb(164 156 255 / .45);
    --color-border:          var(--ink-700);
    --color-border-strong:   var(--paper-100);
    --color-border-control:  var(--ink-300);
    --color-focus:           var(--iris-300);
    --action-secondary-bg:       var(--paper-100);
    --action-secondary-bg-hover: var(--paper-0);
    --action-secondary-bg-active:var(--paper-200);
    --action-secondary-text:     var(--ink-950);
    --action-ghost-border:       var(--paper-100);
    --action-ghost-bg-hover:     var(--ink-800);
    --action-ghost-text:         var(--paper-100);
    --action-disabled-bg:        var(--ink-800);
    --action-disabled-text:      var(--ink-300);
    --color-success: var(--green-300); --color-success-bg: rgb(95 211 163 / .12);
    --color-warning: var(--amber-300); --color-warning-bg: rgb(255 181 71 / .12);
    --color-danger:  var(--red-300);   --color-danger-bg:  rgb(255 107 125 / .12);
    --color-info:    var(--iris-300);  --color-info-bg:    rgb(164 156 255 / .12);
    --elevation-rest:     var(--shadow-ink-1);
    --elevation-raised:   var(--shadow-ink-2);
    --elevation-floating: var(--shadow-ink-2);
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  /* Alternate light band */
  [data-surface="sunken"],
  [class*="is-style-section-paper-sunken"] {
    --color-bg: var(--paper-200);
    --color-bg-raised: var(--paper-50);
    background-color: var(--color-bg);
  }

  /* NasIQA sections keep 10k type but swap the accent hand */
  [data-brand="nasiqa"] {
    --color-label: var(--nasiqa-teal);
    --color-heading-accent: var(--nasiqa-teal);
    --color-focus: var(--nasiqa-teal);
  }
  [data-brand="nasiqa"]:not([data-surface="ink"]) {
    /* teal fails on paper as text; darken for light contexts */
    --color-label: #137470;          /* 4.88 on paper */
    --color-heading-accent: #137470;
  }
}

/* ==========================================================================
   BASE — element styles driven by the tokens (mirrored in theme.json)
   ========================================================================== */
@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-height) + var(--space-4));
  }
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-m);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    font-optical-sizing: auto;
    font-kerning: normal;
    font-feature-settings: "kern", "liga", "calt";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  ::selection { background: var(--color-selection-bg); color: var(--color-selection-text); }

  /* Headings ---------------------------------------------------------------- */
  h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    color: var(--color-heading);
    font-optical-sizing: auto; /* Bricolage opsz 12–96 */
    text-wrap: balance;
    margin-block: 0;
  }
  h1 { font-size: var(--fs-5xl); font-weight: var(--fw-heavy);    line-height: var(--lh-tight);   letter-spacing: var(--ls-h1); font-stretch: var(--fstretch-display); }
  h2 { font-size: var(--fs-4xl); font-weight: var(--fw-heavy);    line-height: var(--lh-snug);    letter-spacing: var(--ls-h2); font-stretch: var(--fstretch-heading); }
  h3 { font-size: var(--fs-3xl); font-weight: var(--fw-bold);     line-height: var(--lh-snug);    letter-spacing: var(--ls-h3); font-stretch: var(--fstretch-heading); }
  h4 { font-size: var(--fs-2xl); font-weight: var(--fw-bold);     line-height: var(--lh-heading); letter-spacing: var(--ls-h4); }
  h5 { font-size: var(--fs-xl);  font-weight: var(--fw-semibold); line-height: var(--lh-heading); letter-spacing: var(--ls-h5); }
  h6 { /* H6 hands over to the body face: a strong run-in, not a mini-display */
    font-family: var(--font-body);
    font-size: var(--fs-l); font-weight: var(--fw-bold);
    line-height: var(--lh-heading); letter-spacing: var(--ls-h6);
    color: var(--color-heading); margin-block: 0;
  }

  /* Hero display: one per page, max */
  .is-display, .has-display-font-size {
    font-size: var(--fs-6xl);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    font-stretch: var(--fstretch-display);
    font-weight: var(--fw-heavy);
  }

  /* The "turn": the second half of a headline lands in the warm hand */
  :is(h1, h2, h3, .is-display) :is(em, mark, .turn) {
    font-style: normal;
    background: none;
    color: var(--color-heading-accent);
  }
  /* Gradient turn: on ink uses the full "k"; on paper the text-safe deep gradient */
  :is(h1, h2, .is-display) .turn--gradient {
    background: var(--gradient-k-deep);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  :is([data-surface="ink"], [class*="is-style-section-ink"]) :is(h1, h2, .is-display) .turn--gradient { background-image: var(--gradient-k); }

  /* Body text --------------------------------------------------------------- */
  p, li, dd { max-width: var(--measure); text-wrap: pretty; }
  .is-lead, .has-lead-font-size {
    font-size: var(--fs-l); line-height: var(--lh-lead);
    color: var(--color-text-secondary); max-width: var(--measure-narrow);
  }
  small, .is-small { font-size: var(--fs-s); }
  strong, b { font-weight: var(--fw-bold); }

  /* Label (replaces "kicker"): Space Mono, sentence case, led by a short
     solid coral lever line. No uppercase, no tracking. */
  .label {
    display: inline-flex; align-items: center; gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: var(--lh-label);
    letter-spacing: var(--ls-label);
    text-transform: none;
    color: var(--color-label);
  }
  .label::before {
    content: ""; inline-size: 1.75em; block-size: var(--border-rule);
    border-radius: var(--radius-pill); background: var(--coral-500);
  }

  /* Data, stats, codes */
  code, kbd, samp, .is-mono { font-family: var(--font-mono); font-size: .92em; }
  .stat {
    font-family: var(--font-display); font-weight: var(--fw-heavy);
    font-size: var(--fs-5xl); line-height: 1; letter-spacing: var(--ls-numeric);
    font-variant-numeric: tabular-nums lining-nums;
  }

  /* Links ------------------------------------------------------------------- */
  a {
    color: var(--color-link);
    text-decoration-line: underline;
    text-decoration-thickness: var(--underline-rest);
    text-decoration-color: var(--color-link-underline);
    text-underline-offset: var(--underline-offset);
    transition: color var(--dur-fast) var(--ease-out),
                text-decoration-color var(--dur-fast) var(--ease-out),
                text-decoration-thickness var(--dur-fast) var(--ease-out);
  }
  a:hover {
    color: var(--color-link-hover);
    text-decoration-color: var(--color-link-underline-hover);
    text-decoration-thickness: var(--underline-hover);
  }
  a:active { color: var(--color-link-hover); text-decoration-thickness: var(--underline-rest); }

  /* Focus: always visible, always the cool hand */
  :focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs);
  }

  /* Buttons ----------------------------------------------------------------- */
  .wp-element-button, .wp-block-button__link, .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-block-size: 3rem; /* 48px touch target */
    padding: var(--space-3) var(--space-5);
    border: var(--border-strong) solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-body); font-size: var(--fs-s); font-weight: var(--fw-semibold);
    line-height: 1.2; letter-spacing: 0; text-decoration: none;
    background: var(--action-primary-bg); color: var(--action-primary-text);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
  }
  .wp-element-button:hover, .wp-block-button__link:hover, .btn:hover {
    background: var(--action-primary-bg-hover); color: var(--action-primary-text);
    transform: var(--lift-hover); box-shadow: var(--elevation-raised);
  }
  .wp-element-button:active, .wp-block-button__link:active, .btn:active {
    background: var(--action-primary-bg-active);
    transform: var(--lift-press); box-shadow: none;
    transition-duration: var(--dur-instant);
  }
  .wp-element-button:focus-visible, .wp-block-button__link:focus-visible, .btn:focus-visible {
    outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-pill);
  }
  /* Trailing arrow nudges forward on hover: the forward lean of the "k" */
  .btn .btn__arrow, .wp-block-button__link .btn__arrow { transition: transform var(--dur-base) var(--ease-lever); }
  .btn:hover .btn__arrow, .wp-block-button__link:hover .btn__arrow { transform: translateX(3px); }

  /* Secondary (ink on paper, paper on ink) */
  .is-style-secondary .wp-block-button__link, .btn--secondary {
    background: var(--action-secondary-bg); color: var(--action-secondary-text);
  }
  .is-style-secondary .wp-block-button__link:hover, .btn--secondary:hover {
    background: var(--action-secondary-bg-hover); color: var(--action-secondary-text); box-shadow: var(--elevation-raised);
  }
  .is-style-secondary .wp-block-button__link:active, .btn--secondary:active { background: var(--action-secondary-bg-active); }

  /* Ghost / outline */
  .is-style-outline .wp-block-button__link, .btn--ghost {
    background: transparent; color: var(--action-ghost-text); border-color: var(--action-ghost-border);
  }
  .is-style-outline .wp-block-button__link:hover, .btn--ghost:hover {
    background: var(--action-ghost-bg-hover); color: var(--action-ghost-text); box-shadow: none;
  }

  /* Disabled */
  :is(.wp-element-button, .wp-block-button__link, .btn):is(:disabled, [aria-disabled="true"]) {
    background: var(--action-disabled-bg); color: var(--action-disabled-text);
    border-color: transparent; box-shadow: none; transform: none; cursor: not-allowed;
  }

  /* Form controls ----------------------------------------------------------- */
  input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea {
    font: inherit; font-size: var(--fs-m);
    min-block-size: 3rem; padding: var(--space-3) var(--space-4);
    color: var(--color-text); background: var(--color-bg-raised);
    border: var(--border-hairline) solid var(--color-border-control);
    border-radius: var(--radius-s);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  :is(input, select, textarea):hover { border-color: var(--color-border-strong); }
  :is(input, select, textarea):focus-visible { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px rgb(82 70 224 / .22); }
  :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--color-danger); }
  input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--coral-500); }

  /* Cards: the notch -------------------------------------------------------- */
  .card {
    background: var(--color-bg-raised);
    border: var(--border-hairline) solid var(--color-border);
    border-radius: var(--radius-m);
    box-shadow: var(--elevation-rest);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .card--feature { border-radius: var(--radius-notch); }
  a.card:hover, .card.is-interactive:hover {
    transform: var(--lift-hover); box-shadow: var(--elevation-raised); border-color: var(--color-border-control);
  }

  hr, .wp-block-separator { border: 0; block-size: var(--border-hairline); background: var(--color-border); }
  .wp-block-separator.is-style-lever { block-size: var(--border-rule); inline-size: 4rem; background: var(--coral-500); border-radius: var(--radius-pill); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 1ms !important; animation-iteration-count: 1 !important;
      transition-duration: 1ms !important; scroll-behavior: auto !important;
    }
    :is(.btn, .wp-block-button__link, .card):hover { transform: none; }
  }
}

/* ==========================================================================
   LAYOUT — page frame with named lines (works with WP alignwide/alignfull)
   ========================================================================== */
@layer layout {
  /* Page frame: full | margin | wide | content | wide | margin | full */
  .l-frame {
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--page-margin), 1fr)
      [wide-start] minmax(0, calc((var(--width-wide) - var(--width-content)) / 2))
      [content-start] min(var(--width-content), 100% - var(--page-margin) * 2) [content-end]
      minmax(0, calc((var(--width-wide) - var(--width-content)) / 2)) [wide-end]
      minmax(var(--page-margin), 1fr) [full-end];
  }
  .l-frame > * { grid-column: content; }
  .l-frame > .alignwide, .l-frame > .is-wide { grid-column: wide; }
  .l-frame > .alignfull, .l-frame > .is-full { grid-column: full; }

  /* 12-column grid (4 → 8 → 12) */
  .l-container { inline-size: min(100% - var(--page-margin) * 2, var(--width-wide)); margin-inline: auto; }
  .l-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    row-gap: var(--space-flow);
  }
  /* Spans per breakpoint via custom properties. Each defaults to a full row,
     so nothing ever overflows the column count:
       --span    = of 12 (≥1024px)   --span-md = of 8 (768–1023px)   --span-sm = of 4
     <div style="--span: 7; --span-md: 5"> */
  .l-grid > * { grid-column: span var(--span-sm, 4); }
  @media (min-width: 768px)  { .l-grid > * { grid-column: span var(--span-md, 8); } }
  @media (min-width: 1024px) { .l-grid > * { grid-column: span var(--span, 12); } }
  .l-grid > .span-full { grid-column: 1 / -1; }

  /* Vertical rhythm */
  .l-flow > * + * { margin-block-start: var(--space-flow); }
  .l-section   { padding-block: var(--space-section-m); }
  .l-section-s { padding-block: var(--space-section-s); }
  .l-section-l { padding-block: var(--space-section-l); }
}

/* ==========================================================================
   UNLAYERED GUARDS — theme.json link styles (a:where(...)) are unlayered and
   would otherwise recolour and underline link-buttons. Keep buttons buttons.
   ========================================================================== */
html a.btn { color: var(--action-primary-text); text-decoration: none; }
html a.btn--secondary { color: var(--action-secondary-text); }
html a.btn--ghost { color: var(--action-ghost-text); }