/*
Theme Name: Nygontech
Theme URI: https://nygontech.com/
Author: SEOGidi
Author URI: https://seogidi.com/
Description: Bespoke theme for Nygon Technologies Ltd, a UK data science and data protection consultancy. Hand-built, image-free, mobile-first, with a full blog and structured data. No page builder, no framework, no external JavaScript.
Version: 1.2.1
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nygontech
Tags: blog, one-column, two-columns, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready

Nygontech is distributed under the GPL v2 or later.

TYPE LOCK (brand asset, do not substitute)
  Display  Fraunces         opsz 144  wght 700  SOFT 0  WONK 1
  Heading  Fraunces         opsz  72  wght 660  SOFT 0  WONK 1
  Sub      Fraunces         opsz  24  wght 600  SOFT 0  WONK 1
  Text     Instrument Sans  wdth  92  wght 400
  Data     Martian Mono     wdth  82  wght 500
*/

/* ==========================================================================
   NYGONTECH
   Built mobile-first. Every media query is min-width, so the small screen is
   the base case and larger screens opt in to extra structure. Nothing is
   squeezed down from a desktop layout.

   TYPE LOCK (this is the identity, treat the axis values as brand assets)
     Display  Fraunces          opsz 144  wght 700  SOFT 0  WONK 1
     Text     Instrument Sans   wdth 92   wght 400
     Data     Martian Mono      wdth 82   wght 500
   WONK 1 throws the serifs off-axis. It is the reason headings here cannot
   be reproduced by reaching for a default.
   ========================================================================== */
@layer reset, tokens, base, layout, components, utilities;

@property --sweep { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
@property --tick  { syntax: "<length>"; inherits: false; initial-value: 1.1rem; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-block-size: 100svb; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; text-wrap: balance; overflow-wrap: break-word; }
  p, li, dd { text-wrap: pretty; overflow-wrap: break-word; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  a { color: inherit; }
  button, input, textarea, select { font: inherit; color: inherit; }
  svg { display: block; }
  :target { scroll-margin-block-start: 5.5rem; }
}

@layer tokens {
  :root {
    color-scheme: light dark;

    --brand-blue:  #0099FF;
    --brand-amber: #FF6600;

    --paper:    light-dark(#F2F5F7, #0A1622);
    --card:     light-dark(#FFFFFF, #102130);
    --ink:      light-dark(#0B1F33, #E6EDF3);
    --ink-soft: light-dark(#476174, #9FB3C4);
    --ink-mute: light-dark(#5A7284, #8FA6B8);
    --rule:     light-dark(#0B1F33, #E6EDF3);
    --rule-a:   color-mix(in oklab, var(--rule) 13%, transparent);
    --rule-b:   color-mix(in oklab, var(--rule) 26%, transparent);

    --signal:    light-dark(#00539C, #6EC2FF);
    --signal-hi: light-dark(#0099FF, #48B5FF);
    --risk:      light-dark(#B24000, #FF9147);
    --risk-hi:   light-dark(#FF6600, #FF8A3D);

    /* Families. Fallbacks are chosen to hold the metrics, not just to exist. */
    --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --f-text:    "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --f-mono:    "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Axis locks. Change these in one place and the whole identity shifts. */
    --vf-hero: "opsz" 144, "wght" 700, "SOFT" 0, "WONK" 1;
    --vf-head: "opsz" 72,  "wght" 660, "SOFT" 0, "WONK" 1;
    --vf-sub:  "opsz" 24,  "wght" 600, "SOFT" 0, "WONK" 1;
    --vf-text: "wdth" 92,  "wght" 400;
    --vf-mono: "wdth" 82,  "wght" 500;

    /* Fluid scale. Minimums are set for a 360px screen, not a 768px one. */
    --t--1: clamp(0.72rem, 0.70rem + 0.09vi, 0.78rem);
    --t-0:  clamp(1.00rem, 0.97rem + 0.16vi, 1.09rem);
    --t-1:  clamp(1.13rem, 1.06rem + 0.31vi, 1.30rem);
    --t-2:  clamp(1.27rem, 1.15rem + 0.55vi, 1.58rem);
    --t-3:  clamp(1.48rem, 1.26rem + 0.98vi, 2.02rem);
    --t-4:  clamp(1.74rem, 1.36rem + 1.68vi, 2.68rem);
    --t-5:  clamp(2.02rem, 1.44rem + 2.55vi, 3.60rem);

    --s-1: 0.5rem;  --s-2: 0.75rem; --s-3: 1rem;   --s-4: 1.5rem;
    --s-5: 2rem;    --s-6: 3rem;    --s-7: 4rem;
    --bay: clamp(2.75rem, 1.5rem + 5.5vi, 6rem);

    --measure: 62ch;
    --shell: 78rem;
    --gutter: 1.15rem;
    --ease: cubic-bezier(.2, .7, .3, 1);
  }
  @media (width >= 30rem) { :root { --gutter: 1.75rem; } }
  @media (width >= 48rem) { :root { --gutter: 2.5rem; } }
  @media (width >= 75rem) { :root { --gutter: 3.5rem; } }
}

@layer base {
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-text);
    font-variation-settings: var(--vf-text);
    font-size: var(--t-0);
    line-height: 1.6;
  }
  ::selection { background: var(--signal-hi); color: #fff; }

  :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--signal-hi);
    outline-offset: 3px;
    border-radius: 2px;
  }

  main :where(p, li, dd) a {
    color: var(--signal);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
    text-decoration-color: color-mix(in oklab, var(--signal) 40%, transparent);
    transition: text-decoration-color .2s var(--ease);
  }
  main :where(p, li, dd) a:hover { text-decoration-color: currentColor; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
  @media (forced-colors: active) {
    .btn { border: 1px solid ButtonText; }
    .stages label::before { forced-color-adjust: none; }
  }
}

@layer layout {
  .shell {
    inline-size: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
  }

  /* Base: one column. The annotation rail is a large-screen affordance and
     simply does not exist below 60rem, rather than being hidden. */
  .bay {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
    padding-block: var(--bay);
    border-block-start: 1px solid var(--rule-a);
  }
  @media (width >= 60rem) {
    .bay {
      grid-template-columns: 10.5rem minmax(0, 1fr);
      column-gap: clamp(1.5rem, -2rem + 6vi, 3.25rem);
      row-gap: 0;
    }
    .bay > .note { grid-column: 1; }
    .bay > :not(.note) { grid-column: 2; }
  }

  .stack > * + * { margin-block-start: var(--flow, var(--s-4)); }
  .prose { max-inline-size: var(--measure); }
}

@layer components {

  /* ---- annotation rail ------------------------------------------------- */
  .note {
    font-family: var(--f-mono);
    font-variation-settings: var(--vf-mono);
    font-size: var(--t--1);
    line-height: 1.55;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .note b { color: var(--ink); font-variation-settings: "wdth" 82, "wght" 600; }
  .note span { display: block; text-transform: none; margin-block-start: var(--s-1); }
  @media (width < 60rem) {
    /* On small screens it becomes a single inline caption, not a sidebar. */
    .note { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: baseline; }
    .note span { display: inline; margin: 0; }
  }
  @media (width >= 60rem) {
    .note { position: sticky; inset-block-start: 6rem; align-self: start; }
    .note b { display: block; }
  }

  /* ---- type roles ------------------------------------------------------ */
  .display {
    font-family: var(--f-display);
    font-variation-settings: var(--vf-hero);
    letter-spacing: -0.022em;
    line-height: 1.02;
  }
  .h2 {
    font-family: var(--f-display);
    font-variation-settings: var(--vf-head);
    font-size: var(--t-3);
    letter-spacing: -0.018em;
    line-height: 1.1;
  }
  .h3 {
    font-family: var(--f-display);
    font-variation-settings: var(--vf-sub);
    font-size: var(--t-1);
    letter-spacing: -0.008em;
    line-height: 1.24;
  }

  .eyebrow {
    font-family: var(--f-mono);
    font-variation-settings: var(--vf-mono);
    font-size: var(--t--1);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--signal);
    display: flex;
    align-items: center;
    gap: .6rem;
  }
  /* A node, not a rule. The previous version drew a 28px bar here, which read
     as an em dash. This echoes the lifecycle mark instead. */
  .eyebrow::before {
    content: "";
    inline-size: .45rem; block-size: .45rem;
    border-radius: 50%;
    background: var(--signal-hi);
    flex: none;
  }

  .mono {
    font-family: var(--f-mono);
    font-variation-settings: var(--vf-mono);
    font-size: var(--t--1);
  }

  .tbc {
    font-family: var(--f-mono);
    font-variation-settings: "wdth" 82, "wght" 400;
    font-size: .85em; color: var(--risk);
    border-block-end: 1px dotted currentColor;
  }

  /* ---- skip link -------------------------------------------------------- */
  .skip {
    position: fixed; inset-block-start: 0; inset-inline-start: 50%;
    translate: -50% -120%; z-index: 100;
    background: var(--ink); color: var(--paper);
    padding: var(--s-2) var(--s-4);
    border-end-start-radius: 6px; border-end-end-radius: 6px;
    font-family: var(--f-mono); font-size: var(--t--1); text-decoration: none;
    transition: translate .18s var(--ease);
  }
  .skip:focus-visible { translate: -50% 0; }

  /* ---- masthead --------------------------------------------------------- */
  .masthead {
    position: sticky; inset-block-start: 0; z-index: 40;
    background: color-mix(in oklab, var(--paper) 88%, transparent);
    border-block-end: 1px solid var(--rule-a);
  }
  @supports (backdrop-filter: blur(1px)) {
    .masthead { backdrop-filter: blur(14px) saturate(1.35); }
  }
  .masthead__in {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3); block-size: 3.6rem;
  }

  .brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; min-inline-size: 0; }
  .brand__mark { inline-size: 1.45rem; block-size: 1.45rem; flex: none; }
  .brand__name {
    font-family: var(--f-display);
    font-variation-settings: "opsz" 24, "wght" 700, "SOFT" 0, "WONK" 1;
    font-size: 1.08rem; letter-spacing: -.018em; white-space: nowrap;
  }
  .brand__name i { font-style: normal; color: var(--ink-mute); font-variation-settings: "opsz" 24, "wght" 400, "SOFT" 0, "WONK" 1; }

  .nav--main { display: none; }
  .masthead .btn--cta { display: none; }

  .menu-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: none; border: 1px solid var(--rule-b); border-radius: 3px;
    padding: .5rem .75rem; cursor: pointer;
    font-family: var(--f-mono); font-variation-settings: var(--vf-mono);
    font-size: var(--t--1); letter-spacing: .02em;
  }

  .drawer { border: none; padding: 0; background: none; }
  .drawer:popover-open {
    display: grid; gap: var(--s-1);
    position: fixed; inset: auto 0 0 0; margin: 0; inline-size: 100%;
    max-block-size: 85svb; overflow-y: auto;
    background: var(--card); color: var(--ink);
    padding: var(--s-5) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom));
    border-block-start: 2px solid var(--signal-hi);
    border-start-start-radius: 10px; border-start-end-radius: 10px;
  }
  .drawer::backdrop { background: color-mix(in oklab, #0B1F33 55%, transparent); }
  .drawer a {
    font-family: var(--f-display);
    font-variation-settings: var(--vf-sub);
    font-size: var(--t-2); text-decoration: none;
    padding-block: .7rem; border-block-end: 1px solid var(--rule-a);
  }
  .drawer .btn { margin-block-start: var(--s-3); justify-content: center; }

  @media (width >= 52rem) {
    .masthead__in { block-size: 4.25rem; }
    .nav--main { display: flex; align-items: center; gap: clamp(.9rem, 2vi, 1.9rem); }
    .masthead .btn--cta { display: inline-flex; }
    .menu-btn, .drawer { display: none; }
  }

  .nav a {
    font-family: var(--f-mono); font-variation-settings: var(--vf-mono);
    font-size: var(--t--1); letter-spacing: .02em;
    text-decoration: none; color: var(--ink-soft);
    padding-block: .3rem; position: relative; white-space: nowrap;
  }
  .nav a::after {
    content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0;
    block-size: 2px; background: var(--signal-hi);
    inline-size: var(--sweep); transition: --sweep .28s var(--ease);
  }
  .nav a:hover { color: var(--ink); }
  .nav a:hover::after { --sweep: 100%; }

  /* ---- WordPress menu lists ---------------------------------------------
     wp_nav_menu() wraps items in <ul class="nav-list"><li>. The static build
     had bare anchors, so the list wrapper needs laying out explicitly or the
     items stack vertically.                                                 */
  .nav-list { list-style: none; margin: 0; padding: 0; }
  .nav--main .nav-list {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: clamp(.9rem, 2vi, 1.9rem);
  }
  .nav-list li { margin: 0; padding: 0; }
  .nav-list .current-menu-item > a,
  .nav-list .current_page_item > a { color: var(--ink); }
  .nav-list .current-menu-item > a::after { --sweep: 100%; }

  /* In the drawer the list dissolves so each link becomes a grid row of the
     drawer itself, exactly as the bare anchors did. */
  .drawer .nav-list { display: contents; }

  /* Footer menus: WordPress emits ul class="menu" when no class is given. */
  .colophon nav :is(ul, ol) { list-style: none; margin: 0; padding: 0; }

  /* ---- buttons ---------------------------------------------------------- */
  .btn {
    --btn-bg: var(--ink); --btn-fg: var(--paper);
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--btn-bg); color: var(--btn-fg);
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 600;
    font-size: var(--t--1); letter-spacing: .02em; text-decoration: none;
    padding: .7rem 1rem; border: 1px solid transparent; border-radius: 3px;
    cursor: pointer; text-align: center;
    min-block-size: 44px;                       /* touch target floor */
    transition: background .2s var(--ease), translate .2s var(--ease);
  }
  .btn:hover { --btn-bg: color-mix(in oklab, var(--ink) 84%, var(--signal-hi)); translate: 0 -1px; }
  .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--rule-b); }
  .btn--ghost:hover { --btn-bg: transparent; border-color: var(--ink); }
  .btn--lg { font-size: var(--t-0); padding: .85rem 1.4rem; }
  .btn svg { inline-size: 1em; block-size: 1em; flex: none; }
  /* On the narrowest screens the two hero buttons go full width and stack. */
  @media (width < 26rem) { .hero__cta .btn { inline-size: 100%; justify-content: center; } }

  /* ---- hero -------------------------------------------------------------- */
  .hero { padding-block: clamp(2.25rem, 1rem + 5vi, 5rem) var(--bay); border-block-start: 0; }
  .hero h1 { font-size: var(--t-5); max-inline-size: 19ch; hyphens: auto; }
  @media (width >= 40rem) { .hero h1 { hyphens: manual; } }
  .hero h1 em { font-style: normal; color: var(--signal); }
  .hero__lede { font-size: var(--t-1); max-inline-size: 52ch; color: var(--ink-soft); line-height: 1.5; }
  .hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
  .hero__cta small { font-family: var(--f-mono); font-variation-settings: var(--vf-mono); font-size: var(--t--1); color: var(--ink-mute); }

  /* ---- figure plates -----------------------------------------------------
     Photography is treated as numbered plates in the register, the way a
     technical document treats its figures: registration marks on opposing
     corners, an offset mount line, and a mono caption strip carrying the
     figure number and the node motif from the wordmark. The corner marks are
     drawn from a registered <length> property so they can extend on hover,
     which a plain --tick variable could not animate.                       */
  .plate { margin: var(--s-6) 0 0; }

  .plate__frame {
    position: relative; display: block;
    /* room for the marks and the mount line to breathe */
    margin: .75rem;
  }
  .plate__frame img {
    inline-size: 100%; block-size: auto;
    aspect-ratio: 16 / 9; object-fit: cover;
    display: block; border-radius: 2px;
  }
  /* offset mount line, sitting proud of the image like a plate window */
  .plate__frame {
    outline: 1px solid var(--rule-b);
    outline-offset: .55rem;
  }
  /* registration marks: top-start and bottom-end corners only. The
     asymmetry is deliberate; four corners reads as a picture frame,
     two reads as a crop mark. */
  .plate__frame::before, .plate__frame::after {
    content: ""; position: absolute; z-index: 1;
    inline-size: var(--tick); block-size: var(--tick);
    border: 2px solid var(--signal-hi);
    transition: --tick .3s var(--ease);
    pointer-events: none;
  }
  .plate__frame::before {
    inset-block-start: -0.95rem; inset-inline-start: -0.95rem;
    border-inline-end: 0; border-block-end: 0;
  }
  .plate__frame::after {
    inset-block-end: -0.95rem; inset-inline-end: -0.95rem;
    border-inline-start: 0; border-block-start: 0;
  }
  .plate:hover .plate__frame::before,
  .plate:hover .plate__frame::after { --tick: 1.7rem; }
  /* the second plate carries the amber mark: exposure, not value */
  .section__media .plate__frame::before,
  .section__media .plate__frame::after { border-color: var(--risk-hi); }

  /* caption strip: figure number, title, node motif */
  .plate__cap {
    display: flex; align-items: center; gap: var(--s-3);
    margin: 1.15rem .75rem 0;
    padding-block-start: var(--s-2);
    border-block-start: 1px solid var(--rule-a);
    font-family: var(--f-mono); font-variation-settings: var(--vf-mono);
    font-size: var(--t--1); color: var(--ink-mute);
    letter-spacing: .02em;
  }
  .plate__cap b {
    color: var(--signal); font-variation-settings: "wdth" 82, "wght" 600;
    text-transform: uppercase; letter-spacing: .08em; flex: none;
  }
  .section__media .plate__cap b { color: var(--risk); }
  .plate__cap span { flex: 1 1 auto; min-inline-size: 0; }
  .plate__cap svg { inline-size: 2.75rem; block-size: .65rem; flex: none; color: var(--ink-mute); }
  @media (width < 30rem) { .plate__cap svg { display: none; } }

  /* where scroll-driven animation is available, plates rise like sections */
  .plate { overflow: visible; }

  /* ---- the instrument ----------------------------------------------------
     Small screens: a vertical list. Tap a stage, its readout opens beneath it.
     A lifecycle is a sequence, so reading it top to bottom on a phone is the
     correct shape, not a compromise.
     52rem and up: the stages become an axis and the readout sits below.
     Selection is driven by adjacent-sibling selectors on a radio group, so
     there is no JavaScript and no :has() dependency.                        */
  .instrument {
    margin-block-start: var(--s-6);
    background: var(--card);
    border: 1px solid var(--rule-a);
    border-radius: 4px;
    overflow: clip;
  }
  .instrument__head {
    display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
    justify-content: space-between; align-items: baseline;
    padding: var(--s-4) var(--s-4) var(--s-3);
    border-block-end: 1px solid var(--rule-a);
  }
  .instrument__head h2 {
    font-family: var(--f-mono); font-variation-settings: var(--vf-mono);
    font-size: var(--t--1); letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-mute);
  }
  .instrument__key { display: flex; flex-wrap: wrap; gap: var(--s-3); font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 400; font-size: var(--t--1); color: var(--ink-mute); }
  .instrument__key span { display: inline-flex; align-items: center; gap: .4rem; }
  .instrument__key span::before { content: ""; inline-size: .55rem; block-size: .55rem; border-radius: 50%; flex: none; }
  .instrument__key .k-gain::before { background: var(--signal-hi); }
  .instrument__key .k-duty::before { background: var(--risk-hi); }

  .stages { display: grid; padding: 0 var(--s-4) var(--s-4); }
  .stages input { position: absolute; opacity: 0; pointer-events: none; }

  .stages label {
    display: flex; align-items: center; gap: .7rem;
    padding-block: .9rem;
    min-block-size: 44px;
    cursor: pointer;
    border-block-end: 1px solid var(--rule-a);
    font-family: var(--f-mono); font-variation-settings: var(--vf-mono);
    font-size: var(--t--1); letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink-mute);
    transition: color .2s var(--ease);
  }
  .stages label::before {
    content: ""; flex: none;
    inline-size: .6rem; block-size: .6rem; border-radius: 50%;
    background: var(--card); border: 1.5px solid var(--rule-b);
    transition: background .2s var(--ease), border-color .2s var(--ease);
  }
  .stages label:hover { color: var(--ink); }
  .stages label:hover::before { border-color: var(--signal-hi); }
  .stages input:checked + label { color: var(--ink); }
  .stages input:checked + label::before { background: var(--signal-hi); border-color: var(--signal-hi); }
  .stages input:focus-visible + label { outline: 2px solid var(--signal-hi); outline-offset: 2px; border-radius: 2px; }

  .panel { display: none; }
  .stages input:checked + label + .panel {
    display: grid; gap: var(--s-4);
    padding-block: var(--s-4);
    border-block-end: 1px solid var(--rule-a);
  }

  .panel dl { margin: 0; }
  .panel dt {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 600;
    font-size: var(--t--1); letter-spacing: .07em; text-transform: uppercase;
    padding-block-end: .4rem; margin-block-end: .6rem;
    border-block-end: 2px solid currentColor;
  }
  .panel .gain dt { color: var(--signal); }
  .panel .duty dt { color: var(--risk); }
  .panel dd { margin: 0; color: var(--ink-soft); }

  @media (width >= 52rem) {
    .stages { grid-template-columns: repeat(5, 1fr); column-gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-5); }
    .stages label {
      grid-row: 1;
      flex-direction: column; align-items: flex-start; gap: 0;
      padding-block: .95rem 0;
      border-block-end: 0;
      border-block-start: 1px solid var(--rule-b);
      position: relative;
      transition: color .2s var(--ease), border-color .2s var(--ease);
    }
    .stages label::before {
      position: absolute; inset-block-start: -.31rem; inset-inline-start: 0;
      background: var(--card);
    }
    .stages input:checked + label { border-block-start-color: var(--signal-hi); }

    .panel {
      grid-row: 2; grid-column: 1 / -1;
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5);
      padding-block-start: var(--s-5); border-block-end: 0;
      visibility: hidden; opacity: 0;
      transition: opacity .28s var(--ease), visibility .28s;
    }
    .stages input:checked + label + .panel { visibility: visible; opacity: 1; padding-block: var(--s-5) 0; border-block-end: 0; }
  }

  /* ---- pillars ----------------------------------------------------------- */
  .split { display: grid; gap: var(--s-5); }
  @media (width >= 46rem) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
  .pillar { border-block-start: 2px solid var(--pillar-c, var(--rule-b)); padding-block-start: var(--s-3); }
  .pillar--gain { --pillar-c: var(--signal-hi); }
  .pillar--duty { --pillar-c: var(--risk-hi); }
  .pillar h3 { margin-block-end: var(--s-2); }

  /* ---- service records ---------------------------------------------------- */
  .records { display: grid; gap: 1px; background: var(--rule-a); border: 1px solid var(--rule-a); border-radius: 4px; overflow: clip; }
  @media (width >= 52rem) { .records { grid-template-columns: 1fr 1fr; } }
  .record {
    background: var(--card);
    padding: clamp(1.25rem, .9rem + 1.6vi, 2.4rem);
    display: grid; align-content: start; gap: var(--s-2);
    position: relative;
  }
  .record::before {
    content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
    block-size: 2px; background: var(--signal-hi);
    scale: 0 1; transform-origin: left; transition: scale .35s var(--ease);
  }
  .record:hover::before, .record:focus-within::before { scale: 1 1; }
  .record__tag {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 600;
    font-size: var(--t--1); letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-mute);
  }
  .record p { color: var(--ink-soft); margin-block-start: .2rem; }
  .record dl {
    margin: 0; display: grid; gap: .3rem;
    margin-block-start: var(--s-2); padding-block-start: var(--s-3);
    border-block-start: 1px solid var(--rule-a);
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 400;
    font-size: var(--t--1);
  }
  @media (width >= 34rem) { .record dl { grid-template-columns: 6.5rem 1fr; gap: .4rem var(--s-3); } }
  .record dt { color: var(--ink-mute); text-transform: uppercase; letter-spacing: .04em; }
  .record dd { margin: 0; color: var(--ink); }

  /* ---- method (a genuine sequence, so it is numbered) --------------------- */
  .method { counter-reset: step; display: grid; }
  .method li {
    counter-increment: step;
    display: grid; gap: var(--s-1);
    padding-block: var(--s-4);
    border-block-end: 1px solid var(--rule-a);
  }
  .method li:first-child { border-block-start: 1px solid var(--rule-a); }
  .method li::before {
    content: counter(step, decimal-leading-zero);
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 600;
    font-size: var(--t--1); color: var(--signal); letter-spacing: .05em;
  }
  .method p { color: var(--ink-soft); max-inline-size: var(--measure); }
  .method .when { font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 400; font-size: var(--t--1); color: var(--ink-mute); }
  @media (width >= 40rem) {
    .method li { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-1) var(--s-4); }
    .method li::before { grid-row: 1 / span 3; padding-block-start: .25rem; }
    .method h3, .method p, .method .when { grid-column: 2; }
  }

  /* ---- statutory figures --------------------------------------------------- */
  .facts { display: grid; gap: 1px; background: var(--rule-a); border-block: 1px solid var(--rule-a); }
  @media (width >= 44rem) { .facts { grid-template-columns: repeat(3, 1fr); } }
  .fact { background: var(--paper); padding: var(--s-4) var(--s-3); display: grid; gap: .3rem; align-content: start; }
  .fact b {
    font-family: var(--f-display); font-variation-settings: "opsz" 144, "wght" 700, "SOFT" 0, "WONK" 1;
    font-size: var(--t-4); line-height: .95; letter-spacing: -.025em; color: var(--ink);
  }
  .fact span {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 500;
    font-size: var(--t--1); letter-spacing: .05em; text-transform: uppercase; color: var(--signal);
  }
  .fact small { font-size: var(--t--1); color: var(--ink-soft); font-family: var(--f-text); line-height: 1.5; }

  /* ---- exclusions ---------------------------------------------------------- */
  .caveat { border-inline-start: 3px solid var(--risk-hi); padding-inline-start: var(--s-3); max-inline-size: var(--measure); }
  .caveat li { padding-block: .3rem; color: var(--ink-soft); }
  .caveat li::marker { color: var(--risk); }

  /* ---- FAQ ------------------------------------------------------------------ */
  .faq { border-block-start: 1px solid var(--rule-a); }
  .faq details { border-block-end: 1px solid var(--rule-a); }
  .faq summary {
    display: flex; align-items: baseline; gap: var(--s-3);
    padding-block: var(--s-4); cursor: pointer; list-style: none;
    font-family: var(--f-display); font-variation-settings: var(--vf-sub);
    font-size: var(--t-1); letter-spacing: -.006em; line-height: 1.3;
  }
  .faq summary::-webkit-details-marker { display: none; }
  /* A plus that rotates into a cross. The previous version swapped in a minus
     sign, which is another dash on the page. */
  .faq summary::before {
    content: "+"; display: inline-block;
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 400;
    font-size: var(--t-1); line-height: 1; color: var(--signal);
    flex: none; inline-size: 1.1rem;
    transition: rotate .28s var(--ease);
  }
  .faq details[open] summary::before { rotate: 45deg; }
  .faq details p { padding-block-end: var(--s-4); color: var(--ink-soft); max-inline-size: var(--measure); }
  .faq summary:hover { color: var(--signal); }

  /* ---- form ------------------------------------------------------------------ */
  .form { display: grid; gap: var(--s-4); max-inline-size: 34rem; }
  .field { display: grid; gap: .4rem; }
  .field label {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 500;
    font-size: var(--t--1); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
  }
  .field label .opt { text-transform: none; letter-spacing: 0; color: var(--ink-mute); }
  .field :is(input, textarea, select) {
    inline-size: 100%;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--rule-b); border-radius: 3px;
    padding: .8rem .85rem;
    font-family: var(--f-text); font-variation-settings: var(--vf-text);
    font-size: max(1rem, var(--t-0));           /* 16px floor stops iOS zoom */
    min-block-size: 44px;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .field :is(input, textarea):hover { border-color: color-mix(in oklab, var(--ink) 45%, transparent); }
  .field :is(input, textarea, select):focus-visible {
    border-color: var(--signal-hi); outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--signal-hi) 25%, transparent);
  }
  .field textarea { min-block-size: 6.5rem; resize: vertical; }
  @supports (field-sizing: content) {
    .field textarea { field-sizing: content; min-block-size: 5rem; max-block-size: 18rem; }
  }
  .field input:not(:placeholder-shown):invalid { border-color: var(--risk-hi); }
  .trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

  .privacy-note {
    font-size: var(--t--1); color: var(--ink-mute); max-inline-size: 46ch;
    border-inline-start: 2px solid var(--rule-b); padding-inline-start: var(--s-3);
  }

  .contact-aside dt {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 500;
    font-size: var(--t--1); letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink-mute); margin-block-start: var(--s-4);
  }
  .contact-aside dd { margin: 0; margin-block-start: .2rem; }
  .contact-aside dd a { color: var(--signal); text-underline-offset: .16em; }
  .office { font-style: normal; line-height: 1.7; display: block; }
  .contact-aside .office { color: var(--ink); }
  .colophon .office { display: inline-block; margin-block: .45rem; }

  /* ---- footer ------------------------------------------------------------------ */
  .colophon { border-block-start: 1px solid var(--rule-b); padding-block: var(--s-6) var(--s-5); }
  .colophon__grid { display: grid; gap: var(--s-5); }
  @media (width >= 34rem) { .colophon__grid { grid-template-columns: 1fr 1fr; } }
  @media (width >= 62rem) { .colophon__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-6); } }
  .colophon h2 {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 600;
    font-size: var(--t--1); letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-mute); margin-block-end: var(--s-2);
  }
  .colophon li { padding-block: .3rem; }
  .colophon a { text-decoration: none; color: var(--ink-soft); }
  .colophon a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .16em; }
  .colophon address { font-style: normal; color: var(--ink-soft); font-size: var(--t--1); line-height: 1.7; }
  .colophon__base {
    margin-block-start: var(--s-5); padding-block-start: var(--s-4);
    border-block-start: 1px solid var(--rule-a);
    display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); justify-content: space-between;
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 400;
    font-size: var(--t--1); color: var(--ink-mute);
  }
}

@layer utilities {
  .vh { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .flow-sm { --flow: var(--s-2); }
  .flow-lg { --flow: var(--s-5); }
  .lazy-paint { content-visibility: auto; contain-intrinsic-size: auto 640px; }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .reveal {
        animation: rise linear both;
        animation-timeline: view();
        animation-range: entry 5% cover 24%;
      }
      @keyframes rise {
        from { opacity: 0; translate: 0 1.25rem; }
        to   { opacity: 1; translate: 0 0; }
      }
    }
  }
}

@layer components {
  /* ---- long-form document pages (legal, policy) --------------------------
     A separate reading layout: narrower measure, a sticky contents list on
     wide screens, numbered sections so clauses can be cited in writing.     */
  .doc-head { padding-block: var(--bay) var(--s-5); border-block-end: 1px solid var(--rule-b); }
  .doc-head h1 { font-family: var(--f-display); font-variation-settings: var(--vf-hero); font-size: var(--t-4); letter-spacing: -.022em; line-height: 1.04; max-inline-size: 20ch; }
  .doc-head .stamp {
    display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
    margin-block-start: var(--s-3);
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 400;
    font-size: var(--t--1); color: var(--ink-mute);
  }

  .doc-body { display: grid; gap: var(--s-6); padding-block: var(--s-6) var(--s-7); }
  @media (width >= 62rem) {
    .doc-body { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--s-7); }
    .toc { position: sticky; inset-block-start: 6rem; align-self: start; }
  }

  .toc h2 {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 600;
    font-size: var(--t--1); letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-mute); margin-block-end: var(--s-2);
    padding-block-end: var(--s-2); border-block-end: 1px solid var(--rule-a);
  }
  .toc ol { counter-reset: toc; display: grid; gap: .1rem; }
  .toc li { counter-increment: toc; }
  .toc a {
    display: grid; grid-template-columns: 1.6rem 1fr; gap: .4rem;
    padding-block: .35rem; text-decoration: none; color: var(--ink-soft);
    font-size: var(--t--1); line-height: 1.4;
  }
  .toc a::before {
    content: counter(toc, decimal-leading-zero);
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 400;
    color: var(--ink-mute);
  }
  .toc a:hover { color: var(--signal); }

  .doc { counter-reset: sec; max-inline-size: 68ch; }
  .doc > section { counter-increment: sec; padding-block-end: var(--s-5); scroll-margin-block-start: 5.5rem; }
  .doc > section + section { border-block-start: 1px solid var(--rule-a); padding-block-start: var(--s-5); }
  .doc h2 {
    display: grid; grid-template-columns: 2.2rem 1fr; gap: .5rem;
    font-family: var(--f-display); font-variation-settings: var(--vf-head);
    font-size: var(--t-2); letter-spacing: -.014em; line-height: 1.16;
    margin-block-end: var(--s-3);
  }
  .doc h2::before {
    content: counter(sec, decimal-leading-zero);
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 600;
    font-size: var(--t--1); color: var(--signal); padding-block-start: .45em;
  }
  .doc h3 {
    font-family: var(--f-display); font-variation-settings: var(--vf-sub);
    font-size: var(--t-1); margin-block: var(--s-4) var(--s-2);
  }
  .doc p, .doc li { color: var(--ink-soft); }
  .doc > section > * + * { margin-block-start: var(--s-3); }
  .doc ul, .doc ol { padding-inline-start: 1.2rem; display: grid; gap: .4rem; }
  .doc ul li::marker, .doc ol li::marker { color: var(--signal); }

  /* definition pairs used for lawful-basis and retention tables */
  .pairs { display: grid; gap: 0; margin-block-start: var(--s-3); border-block-start: 1px solid var(--rule-a); }
  .pairs > div { display: grid; gap: .25rem; padding-block: var(--s-3); border-block-end: 1px solid var(--rule-a); }
  @media (width >= 40rem) { .pairs > div { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s-4); } }
  .pairs dt {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 500;
    font-size: var(--t--1); letter-spacing: .03em; text-transform: uppercase; color: var(--ink);
  }
  .pairs dd { margin: 0; color: var(--ink-soft); font-size: var(--t-0); }

  .callout {
    border-inline-start: 3px solid var(--signal-hi);
    padding: var(--s-1) 0 var(--s-1) var(--s-4);
    margin-block-start: var(--s-4);
  }
  .callout p { color: var(--ink); }

  /* ---- 404 ---------------------------------------------------------------- */
  .lost { padding-block: clamp(3rem, 2rem + 8vi, 7rem); display: grid; gap: var(--s-4); max-inline-size: 46rem; }
  .lost h1 { font-family: var(--f-display); font-variation-settings: var(--vf-hero); font-size: var(--t-4); letter-spacing: -.022em; line-height: 1.05; }
  .lost__links { display: grid; gap: 0; margin-block-start: var(--s-3); border-block-start: 1px solid var(--rule-a); }
  .lost__links a {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
    padding-block: var(--s-3); border-block-end: 1px solid var(--rule-a);
    text-decoration: none; color: var(--ink);
    font-family: var(--f-display); font-variation-settings: var(--vf-sub); font-size: var(--t-1);
  }
  .lost__links a span {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 400;
    font-size: var(--t--1); color: var(--ink-mute); text-align: right;
  }
  .lost__links a:hover { color: var(--signal); }
}

/* ==========================================================================
   BLOG AND EDITOR LAYER
   Everything below serves WordPress: the loop, single posts, comments,
   pagination, and the classes core emits that a theme must style.
   Same tokens, same mobile-first rules as the marketing pages.
   ========================================================================== */
@layer components {

  /* ---- archive header ---------------------------------------------------- */
  .arch-head { padding-block: var(--bay) var(--s-5); border-block-end: 1px solid var(--rule-b); }
  .arch-head h1 {
    font-family: var(--f-display); font-variation-settings: var(--vf-hero);
    font-size: var(--t-4); letter-spacing: -.022em; line-height: 1.04; max-inline-size: 20ch;
  }
  .arch-head .intro { margin-block-start: var(--s-3); color: var(--ink-soft); max-inline-size: var(--measure); font-size: var(--t-1); line-height: 1.5; }

  /* ---- post list ---------------------------------------------------------
     A list of records, consistent with the services grid. No excerpt cards
     with fake thumbnails: title, standfirst, and the metadata that helps
     someone decide whether to read it.                                       */
  .posts { display: grid; padding-block: var(--s-5) var(--s-6); }
  .post-row {
    display: grid; gap: var(--s-2);
    padding-block: var(--s-5);
    border-block-end: 1px solid var(--rule-a);
    position: relative;
  }
  .post-row:first-child { border-block-start: 1px solid var(--rule-a); }
  @media (width >= 48rem) {
    .post-row { grid-template-columns: 9rem minmax(0, 1fr); column-gap: var(--s-5); }
    .post-row > .post-meta { grid-column: 1; grid-row: 1 / span 3; }
    .post-row > :not(.post-meta) { grid-column: 2; }
  }
  .post-meta {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 400;
    font-size: var(--t--1); color: var(--ink-mute); line-height: 1.6;
    display: flex; flex-wrap: wrap; gap: .35rem .75rem;
  }
  @media (width >= 48rem) { .post-meta { display: grid; gap: .2rem; align-content: start; } }
  .post-meta .cat { color: var(--signal); }
  .post-row h2 {
    font-family: var(--f-display); font-variation-settings: var(--vf-head);
    font-size: var(--t-2); letter-spacing: -.016em; line-height: 1.14;
  }
  .post-row h2 a { text-decoration: none; }
  .post-row h2 a:hover { color: var(--signal); }
  .post-row p { color: var(--ink-soft); max-inline-size: var(--measure); }
  .post-row .more {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 500;
    font-size: var(--t--1); color: var(--signal); text-decoration: none;
    display: inline-flex; align-items: center; gap: .4rem;
  }
  .post-row .more:hover { text-decoration: underline; text-underline-offset: .2em; }
  .post-row.sticky::before {
    content: "Pinned";
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 600;
    font-size: var(--t--1); letter-spacing: .06em; text-transform: uppercase;
    color: var(--risk);
  }
  @media (width >= 48rem) { .post-row.sticky::before { grid-column: 2; } }

  /* ---- single post -------------------------------------------------------- */
  .entry-head { padding-block: var(--bay) var(--s-5); border-block-end: 1px solid var(--rule-b); }
  .entry-head h1 {
    font-family: var(--f-display); font-variation-settings: var(--vf-hero);
    font-size: var(--t-4); letter-spacing: -.024em; line-height: 1.03; max-inline-size: 22ch;
  }
  .entry-head .standfirst { margin-block-start: var(--s-3); font-size: var(--t-1); color: var(--ink-soft); max-inline-size: var(--measure); line-height: 1.5; }
  .entry-head .post-meta { margin-block-start: var(--s-4); display: flex; flex-wrap: wrap; gap: .35rem var(--s-4); }

  .entry-layout { display: grid; gap: var(--s-6); padding-block: var(--s-6) var(--s-7); }
  @media (width >= 62rem) {
    .entry-layout { grid-template-columns: minmax(0, 1fr) 14rem; gap: var(--s-7); }
    .entry-layout .rail { position: sticky; inset-block-start: 6rem; align-self: start; }
  }

  /* Long-form reading column. Deliberately narrower than the marketing pages. */
  .entry-content { max-inline-size: 68ch; font-size: var(--t-0); line-height: 1.68; }
  .entry-content > * + * { margin-block-start: var(--s-4); }
  .entry-content h2 {
    font-family: var(--f-display); font-variation-settings: var(--vf-head);
    font-size: var(--t-2); letter-spacing: -.014em; line-height: 1.18;
    margin-block-start: var(--s-6); scroll-margin-block-start: 5.5rem;
  }
  .entry-content h3 {
    font-family: var(--f-display); font-variation-settings: var(--vf-sub);
    font-size: var(--t-1); margin-block-start: var(--s-5); scroll-margin-block-start: 5.5rem;
  }
  .entry-content h4 {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 600;
    font-size: var(--t--1); letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-mute); margin-block-start: var(--s-5);
  }
  .entry-content p, .entry-content li { color: var(--ink-soft); }
  .entry-content :is(ul, ol) { padding-inline-start: 1.3rem; display: grid; gap: .45rem; }
  .entry-content li::marker { color: var(--signal); }
  .entry-content li > :is(ul, ol) { margin-block-start: .45rem; }

  .entry-content blockquote {
    border-inline-start: 3px solid var(--signal-hi);
    padding-inline-start: var(--s-4); margin-inline: 0;
  }
  .entry-content blockquote p { color: var(--ink); font-size: var(--t-1); line-height: 1.5; }
  .entry-content blockquote cite {
    display: block; margin-block-start: var(--s-2); font-style: normal;
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 400;
    font-size: var(--t--1); color: var(--ink-mute);
  }

  .entry-content :is(code, kbd, samp) {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 400;
    font-size: .88em;
    background: color-mix(in oklab, var(--ink) 7%, transparent);
    padding: .12em .35em; border-radius: 3px;
  }
  .entry-content pre {
    background: var(--card); border: 1px solid var(--rule-a); border-radius: 4px;
    padding: var(--s-4); overflow-x: auto; font-size: var(--t--1); line-height: 1.6;
    -webkit-overflow-scrolling: touch;
  }
  .entry-content pre code { background: none; padding: 0; font-size: inherit; }

  .entry-content table {
    inline-size: 100%; border-collapse: collapse; font-size: var(--t--1);
    display: block; overflow-x: auto; white-space: nowrap;
  }
  @media (width >= 48rem) { .entry-content table { display: table; white-space: normal; } }
  .entry-content :is(th, td) { padding: .6rem .7rem; border-block-end: 1px solid var(--rule-a); text-align: left; vertical-align: top; }
  .entry-content th {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
    border-block-end-color: var(--rule-b);
  }
  .entry-content hr { border: 0; border-block-start: 1px solid var(--rule-b); margin-block: var(--s-6); }
  .entry-content :is(dt) { font-weight: 600; color: var(--ink); }
  .entry-content dd { margin-inline-start: 0; padding-inline-start: var(--s-3); border-inline-start: 2px solid var(--rule-a); }

  /* Media: the theme ships imageless, but the editor must still behave. */
  .entry-content :is(img, video, iframe, embed, object) { max-inline-size: 100%; block-size: auto; }
  .entry-content figure { margin-inline: 0; }
  .entry-content figcaption, .wp-caption-text, .gallery-caption {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 400;
    font-size: var(--t--1); color: var(--ink-mute); margin-block-start: .5rem;
  }

  /* ---- in-post contents rail ---------------------------------------------- */
  .rail__box { border-block-start: 1px solid var(--rule-b); padding-block-start: var(--s-3); }
  .rail h2 {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 600;
    font-size: var(--t--1); letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-mute); margin-block-end: var(--s-2);
  }
  .rail ul { display: grid; gap: .1rem; }
  .rail a { display: block; padding-block: .3rem; font-size: var(--t--1); color: var(--ink-soft); text-decoration: none; line-height: 1.4; }
  .rail a:hover { color: var(--signal); }
  .rail .lvl-3 { padding-inline-start: var(--s-3); }

  /* ---- tags, post navigation, related -------------------------------------- */
  .tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: var(--s-5); padding-block-start: var(--s-4); border-block-start: 1px solid var(--rule-a); }
  .tags a {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 400;
    font-size: var(--t--1); color: var(--ink-soft); text-decoration: none;
    border: 1px solid var(--rule-b); border-radius: 3px; padding: .3rem .6rem;
  }
  .tags a:hover { border-color: var(--signal-hi); color: var(--signal); }

  .post-nav { display: grid; gap: 1px; background: var(--rule-a); border-block: 1px solid var(--rule-a); margin-block-start: var(--s-6); }
  @media (width >= 40rem) { .post-nav { grid-template-columns: 1fr 1fr; } }
  .post-nav a { background: var(--paper); padding: var(--s-4); text-decoration: none; display: grid; gap: .4rem; }
  .post-nav span {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 500;
    font-size: var(--t--1); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute);
  }
  .post-nav strong {
    font-family: var(--f-display); font-variation-settings: var(--vf-sub);
    font-size: var(--t-1); color: var(--ink); font-weight: inherit; line-height: 1.25;
  }
  .post-nav a:hover strong { color: var(--signal); }
  .post-nav .next { text-align: left; }
  @media (width >= 40rem) { .post-nav .next { text-align: right; } }

  /* ---- pagination ------------------------------------------------------------ */
  .pagination { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding-block: var(--s-5); border-block-start: 1px solid var(--rule-a); }
  .pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-inline-size: 44px; min-block-size: 44px; padding: 0 .7rem;
    border: 1px solid var(--rule-b); border-radius: 3px; text-decoration: none;
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 500;
    font-size: var(--t--1); color: var(--ink-soft);
  }
  .pagination .page-numbers:hover { border-color: var(--ink); color: var(--ink); }
  .pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .pagination .dots { border-color: transparent; }

  /* ---- comments ---------------------------------------------------------------- */
  .comments { margin-block-start: var(--s-7); padding-block-start: var(--s-5); border-block-start: 1px solid var(--rule-b); max-inline-size: 68ch; }
  .comments h2 {
    font-family: var(--f-display); font-variation-settings: var(--vf-head);
    font-size: var(--t-2); letter-spacing: -.014em; margin-block-end: var(--s-4);
  }
  .comment-list { display: grid; gap: 0; }
  .comment-list li { padding-block: var(--s-4); border-block-end: 1px solid var(--rule-a); }
  .comment-list .children { padding-inline-start: var(--s-4); border-inline-start: 2px solid var(--rule-a); margin-block-start: var(--s-3); }
  .comment-list .children li:last-child { border-block-end: 0; padding-block-end: 0; }
  .comment-meta {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 400;
    font-size: var(--t--1); color: var(--ink-mute);
    display: flex; flex-wrap: wrap; gap: .3rem .75rem; margin-block-end: var(--s-2);
  }
  .comment-meta .fn { font-style: normal; color: var(--ink); font-variation-settings: "wdth" 82, "wght" 600; }
  .comment-list .bypostauthor > article .fn::after {
    content: "Author"; margin-inline-start: .5rem; color: var(--signal);
    font-variation-settings: "wdth" 82, "wght" 400; letter-spacing: .05em; text-transform: uppercase;
  }
  .comment-body p { color: var(--ink-soft); }
  .comment-body > * + * { margin-block-start: var(--s-2); }
  .comment-reply-link, .comment-edit-link {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 500;
    font-size: var(--t--1); color: var(--signal); text-decoration: none;
  }
  .comment-reply-link:hover { text-decoration: underline; text-underline-offset: .2em; }
  .comment-respond { margin-block-start: var(--s-5); }
  .comment-respond .comment-reply-title {
    font-family: var(--f-display); font-variation-settings: var(--vf-sub);
    font-size: var(--t-1); margin-block-end: var(--s-3);
  }
  .comment-form { display: grid; gap: var(--s-3); max-inline-size: 34rem; }
  .comment-form label {
    display: block; margin-block-end: .35rem;
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 500;
    font-size: var(--t--1); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
  }
  .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
    inline-size: 100%; background: var(--card); color: var(--ink);
    border: 1px solid var(--rule-b); border-radius: 3px; padding: .75rem .85rem;
    font-family: var(--f-text); font-variation-settings: var(--vf-text);
    font-size: max(1rem, var(--t-0)); min-block-size: 44px;
  }
  .comment-form :is(input, textarea):focus-visible {
    border-color: var(--signal-hi); outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--signal-hi) 25%, transparent);
  }
  .comment-form textarea { min-block-size: 7rem; resize: vertical; }
  .comment-form .comment-notes, .comment-form .form-submit { margin: 0; }
  .comment-form .comment-form-cookies-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t--1); color: var(--ink-mute); }
  .comment-form .comment-form-cookies-consent input { inline-size: 1.05rem; block-size: 1.05rem; margin-block-start: .15rem; flex: none; }
  .comment-form .comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; margin: 0; font-family: var(--f-text); font-size: var(--t--1); }
  .comment-form input[type="submit"] {
    justify-self: start; background: var(--ink); color: var(--paper);
    border: 1px solid transparent; border-radius: 3px; cursor: pointer;
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 600;
    font-size: var(--t--1); letter-spacing: .02em; padding: .8rem 1.3rem; min-block-size: 44px;
  }
  .comment-form input[type="submit"]:hover { background: color-mix(in oklab, var(--ink) 84%, var(--signal-hi)); }
  .no-comments, .comments .logged-in-as { font-size: var(--t--1); color: var(--ink-mute); }

  /* ---- search --------------------------------------------------------------------- */
  .search-form { display: flex; gap: .5rem; flex-wrap: wrap; max-inline-size: 30rem; }
  .search-form label { flex: 1 1 12rem; }
  .search-form .search-field {
    inline-size: 100%; background: var(--card); color: var(--ink);
    border: 1px solid var(--rule-b); border-radius: 3px; padding: .7rem .85rem;
    font-family: var(--f-text); font-size: max(1rem, var(--t-0)); min-block-size: 44px;
  }
  .search-form .search-field:focus-visible {
    border-color: var(--signal-hi); outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--signal-hi) 25%, transparent);
  }
  .search-form .search-submit {
    background: var(--ink); color: var(--paper); border: 1px solid transparent; border-radius: 3px;
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 600;
    font-size: var(--t--1); padding: 0 1.1rem; min-block-size: 44px; cursor: pointer;
  }

  /* ---- notices ---------------------------------------------------------------------- */
  .notice {
    border-inline-start: 3px solid var(--signal-hi);
    padding: var(--s-3) 0 var(--s-3) var(--s-4);
    margin-block-end: var(--s-5); max-inline-size: var(--measure);
  }
  .notice--bad { border-inline-start-color: var(--risk-hi); }
  .notice p { color: var(--ink); }

  /* ---- widgets ------------------------------------------------------------------------ */
  .widget + .widget { margin-block-start: var(--s-5); }
  .widget-title {
    font-family: var(--f-mono); font-variation-settings: "wdth" 82, "wght" 600;
    font-size: var(--t--1); letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-mute); margin-block-end: var(--s-2);
  }
  .widget ul { display: grid; gap: .3rem; }
  .widget li a { color: var(--ink-soft); text-decoration: none; font-size: var(--t--1); }
  .widget li a:hover { color: var(--signal); }
}

@layer utilities {
  /* WordPress core requires these exact class names. */
  .screen-reader-text {
    position: absolute !important; inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; word-wrap: normal;
  }
  .screen-reader-text:focus {
    position: fixed !important; inset-block-start: .5rem; inset-inline-start: .5rem;
    inline-size: auto; block-size: auto; clip-path: none; z-index: 100;
    background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: 4px;
  }
  .alignleft  { float: left;  margin-inline-end: var(--s-4); margin-block-end: var(--s-3); }
  .alignright { float: right; margin-inline-start: var(--s-4); margin-block-end: var(--s-3); }
  .aligncenter { display: block; margin-inline: auto; }
  @media (width < 34rem) {
    /* Floats are hostile on a phone. Stack them. */
    .alignleft, .alignright { float: none; margin-inline: 0; display: block; }
  }
  .alignwide  { max-inline-size: min(100%, 68rem); }
  .alignfull  { max-inline-size: none; }
  .wp-caption { max-inline-size: 100%; }
  .clearfix::after { content: ""; display: table; clear: both; }
}