/* =========================================================================
   StratusWorks — components and layout
   Consumes tokens only. No literal colour, size, or spacing value below this
   line. Component names in comments are the custom elements the handover
   specifies; this site ships zero JavaScript (S1), so each is a semantic
   element carrying a data-sw-* hook with the same styling contract.

   RESERVED COMPONENTS — do not prune.
   The handover specifies a full library; the pages built so far place only
   part of it. These blocks are marked "reserved" and are waiting for their
   templates (service detail, article, insights index, about), not dead:

     [data-sw-spine]          hero diagram, four nodes
     [data-sw-layers]         the strata stack
     [data-sw-metrics]        before/after metric pairs
     [data-sw-spec-table]     engagement specification
     [data-sw-pullquote]      pull quote
     [data-sw-prose]          article body with margin notes
     [data-sw-note]           margin note
     [data-sw-card="insight"] article teaser
     [data-sw-print-foot]     running foot, for the article print sheet

   They cost roughly 5 kB gzipped. A CSS coverage run will report them unused
   until the pages that place them exist — that is expected, and deleting them
   means re-deriving the design system from the handover a second time.
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   1. Base
   ------------------------------------------------------------------------- */

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
}

h1 {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
}

h3,
h4 {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}

p {
  margin: 0;
  max-width: var(--measure);
}

ul, ol, dl, dd {
  margin: 0;
}

::selection {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* focus — one treatment, everywhere. Never removed, never a shadow, and never
   accent-coloured: the accent is already the resting state of links. */
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: var(--focus-offset);
}

/* -------------------------------------------------------------------------
   2. Links in prose — underlines stay on, no visited styling
   ------------------------------------------------------------------------- */

a {
  color: var(--accent);
  text-decoration: none;
}

[data-sw-prose] a,
[data-sw-legal] a,
[data-sw-legal] li a,
p a,
dd a {
  border-block-end: 1px solid var(--accent-tint-line);
  transition: border-color var(--duration-state) linear;
}

[data-sw-prose] a:hover,
[data-sw-legal] a:hover,
[data-sw-legal] li a:hover,
p a:hover,
dd a:hover {
  border-block-end-color: var(--accent);
}

/* The handover says "no visited styling", on the grounds that it introduces a
   colour that is in no palette. The review asks for a clear visited state.
   Both hold if the state uses no new colour: the text keeps the accent and the
   underline drops to the neutral rule tone. :visited only permits colour
   properties, and border-colour is one of them. */
[data-sw-prose] a:visited,
[data-sw-legal] a:visited,
[data-sw-legal] li a:visited,
p a:visited,
dd a:visited {
  border-block-end-color: var(--line-strong);
}

/* -------------------------------------------------------------------------
   3. Icons — 24px grid, stroke compensated so optical weight stays constant
   ------------------------------------------------------------------------- */

[data-sw-icon] {
  flex: none;
  vertical-align: -0.125em;
}

/* -------------------------------------------------------------------------
   4. Layout — container, sections, grounds, grid
   ------------------------------------------------------------------------- */

.container {
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-margin);
}

/* Sections are separated by their own padding plus a full-bleed hairline —
   never by margins, so collapsing margins cannot occur. The hairline spans
   the viewport while content stays inside the container. */
[data-sw-section] {
  padding-block: var(--section-padding);
  border-block-end: 1px solid var(--line);
  background: var(--surface);
}

/* the opening section of any page keeps the original, more generous rhythm —
   the review asked for a tighter page but a hero that still breathes */
main > [data-sw-section]:first-child {
  padding-block: var(--hero-padding);
}

[data-ground="sunken"] {
  background: var(--surface-sunken);
}

/* The graphite band remaps the neutral ramp and the accent to their
   inverse-ground partners, so every component inside renders in its dark
   form from identical markup. */
[data-ground="graphite"] {
  --surface: var(--inverse-surface);
  --surface-raised: var(--inverse-raised);
  --surface-sunken: var(--inverse-surface);
  --line: var(--inverse-line);
  --line-strong: var(--inverse-line);
  --text: var(--inverse-text);
  --text-secondary: var(--inverse-secondary);
  --text-muted: var(--inverse-muted);
  --accent: var(--inverse-accent);
  --accent-hover: var(--inverse-accent-hover);
  --accent-contrast: var(--inverse-accent-contrast);
  --focus-ring: 2px solid var(--inverse-text);

  background: var(--surface);
  color: var(--text-secondary);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

/* the 12-column grid halves rather than reflowing arbitrarily */
@media (max-width: 1023px) {
  .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------------
   5. Section head + marker
   ------------------------------------------------------------------------- */

/* mono marker, uppercase, aria-hidden in the markup: wayfinding for the eye,
   noise for a screen reader */
[data-sw-marker] {
  display: block;
  margin-block-end: var(--space-4);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

[data-sw-section-head] {
  margin-block-end: var(--head-gap);
}

[data-sw-section-head] > p {
  margin-block-start: var(--space-5);
  font-size: var(--text-lead);
  line-height: 1.55;
}

/* split head: heading at 1–7, margin note at 9–12 */
[data-sw-section-head="split"] {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: end;
}

[data-sw-section-head="split"] > :first-child {
  grid-column: 1 / span 7;
}

[data-sw-section-head="split"] > p {
  grid-column: 9 / -1;
  margin-block-start: 0;
  font-size: var(--text-small);
  line-height: 1.55;
}

@media (max-width: 1023px) {
  [data-sw-section-head="split"] {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  [data-sw-section-head="split"] > :first-child,
  [data-sw-section-head="split"] > p {
    grid-column: 1 / -1;
  }
}

/* -------------------------------------------------------------------------
   6. Skip link — first in DOM, visible on focus
   ------------------------------------------------------------------------- */

[data-sw-skip] {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 3;
  padding: var(--space-3) var(--space-4);
  background: var(--text);
  color: var(--surface);
  font-weight: 600;
  translate: 0 -200%;
}

[data-sw-skip]:focus {
  translate: 0 0;
}

/* -------------------------------------------------------------------------
   7. <sw-header> — 72px, sticky, hairline bottom
   ------------------------------------------------------------------------- */

[data-sw-header] {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}

[data-sw-header] > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  /* was --space-9, which made the sticky bar TALLER on a phone than on a
     desktop and ate the top of every small screen */
  min-block-size: calc(var(--space-8) - var(--space-2));
}

@media (min-width: 1024px) {
  [data-sw-header] > .container {
    min-block-size: calc(var(--space-8) + var(--space-2));
  }
}

/* The bar is sticky and present from the first paint — it is never revealed on
   scroll. What scroll changes is its height and its hairline.

   Gated twice: @supports because scroll-driven animation is Chrome/Edge only,
   and prefers-reduced-motion because it is motion. Where either fails the
   header simply stays at its full height, which is correct on its own.

   Documented exception to the motion budget's "transform and opacity only":
   this animates min-block-size, which costs layout on the scroll path. It is
   8px, once, and bounded — but it is the one place the page does scroll-path
   work, so it is the first thing to delete if the budget ever tightens. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-sw-header] > .container {
      animation: sw-header-settle linear both;
      animation-timeline: scroll();
      animation-range: 0 calc(var(--space-10) * 2);
    }

    [data-sw-header] {
      animation: sw-header-rule linear both;
      animation-timeline: scroll();
      animation-range: 0 var(--space-8);
    }
  }
}

@keyframes sw-header-settle {
  to {
    min-block-size: calc(var(--space-8) - var(--space-2));
  }
}

/* the handover asks for the hairline to appear only once the page has scrolled */
@keyframes sw-header-rule {
  from {
    border-block-end-color: transparent;
  }
}

/* only meaningful while the header is sticky and content is behind it */
@supports (backdrop-filter: blur(1px)) {
  [data-sw-header] {
    background: transparent;
    backdrop-filter: blur(12px) saturate(140%);
  }

  [data-sw-header]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--surface);
    opacity: 0.86;
  }

  [data-sw-header] > .container {
    position: relative;
  }
}

/* the bar CTA is the same action as the hero's, so it must not be the same
   weight — outlined in accent, one step smaller */
[data-sw-nav] a[data-sw-button="primary"] {
  min-block-size: var(--target-min);
  padding-inline: var(--space-4);
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}

[data-sw-nav] a[data-sw-button="primary"]:hover {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* logo lockup — mark + wordmark, links home */
[data-sw-brand] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--target-min);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: var(--tracking-h3);
  text-transform: uppercase;
}

/* one colour at two weights. The white/grey split read as two entities. */
[data-sw-brand] i {
  font-style: normal;
  font-weight: 600;
}

[data-sw-nav] ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-sw-nav-desktop] {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* :not([data-sw-button]) matters — these selectors outrank [data-sw-button],
   so without it the CTA in the bar would inherit body text on an accent ground */
[data-sw-nav] a:not([data-sw-button]) {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  border-block-end: 2px solid transparent;
  color: var(--text-secondary);
  font-size: var(--text-small);
  transition: color var(--duration-state) linear,
    border-color var(--duration-state) linear;
}

[data-sw-nav] a:not([data-sw-button]):hover {
  color: var(--text);
  border-block-end-color: var(--line);
}

/* the active item is marked by a 2px accent rule, not a colour change */
[data-sw-nav] a:not([data-sw-button])[aria-current="page"] {
  color: var(--text);
  border-block-end-color: var(--accent);
}

/* mobile disclosure — a native <details>: works with JavaScript disabled and
   needs no aria-expanded bookkeeping. A full list, not an overlay: no dimming,
   no transform, no scroll lock. */
[data-sw-nav-mobile] > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--target-min);
  block-size: var(--target-min);
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

[data-sw-nav-mobile] > summary::-webkit-details-marker {
  display: none;
}

[data-sw-nav-mobile] > summary [data-sw-icon-close],
[data-sw-nav-mobile][open] > summary [data-sw-icon-menu] {
  display: none;
}

[data-sw-nav-mobile][open] > summary [data-sw-icon-close] {
  display: block;
}

/* the panel's visibility is driven explicitly rather than left to the UA's
   closed-<details> hiding, which is display:none in some engines and
   content-visibility on ::details-content in others */
[data-sw-nav-mobile] > ul {
  display: none;
  position: absolute;
  inset-inline: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: var(--space-2) var(--container-margin) var(--space-5);
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}

[data-sw-nav-mobile][open] > ul {
  display: flex;
}

[data-sw-nav-mobile] > ul li + li {
  border-block-start: 1px solid var(--line);
}

[data-sw-nav-mobile] > ul a {
  inline-size: 100%;
  min-block-size: calc(var(--target-min) + var(--space-1));
  font-size: var(--text-body);
}

@media (min-width: 1024px) {
  [data-sw-nav-mobile] {
    display: none;
  }
}

@media (max-width: 1023px) {
  [data-sw-nav-desktop] {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   8. <sw-button> — three variants, square, 48px
   ------------------------------------------------------------------------- */

[data-sw-button] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--space-7);
  padding-inline: var(--space-5);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  /* nothing lifts, scales or glows */
  transition: background var(--duration-state) linear,
    border-color var(--duration-state) linear;
}

[data-sw-button="primary"] {
  background: var(--accent);
  color: var(--accent-contrast);
}

[data-sw-button="primary"]:hover {
  background: var(--accent-hover);
}

/* a hairline box, never a filled grey */
[data-sw-button="secondary"] {
  background: transparent;
  border: 1px solid var(--text);
  color: var(--text);
}

[data-sw-button="secondary"]:hover {
  border-color: var(--accent);
  color: var(--accent);
}

[data-sw-button="tertiary"] {
  min-block-size: var(--target-min);
  padding-inline: 0;
  background: transparent;
  color: var(--accent);
  border-block-end: 1px solid var(--accent-tint-line);
}

[data-sw-button="tertiary"]:hover {
  border-block-end-color: var(--accent);
}

[data-sw-button][disabled] {
  background: var(--line);
  border-color: var(--line);
  color: var(--text-muted);
  cursor: not-allowed;
}

[data-sw-actions] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (max-width: 767px) {
  [data-sw-actions] {
    flex-direction: column;
    align-items: stretch;
  }
}

/* -------------------------------------------------------------------------
   9. <sw-hero> — head 1–7, evidence panel 9–12 with a left hairline
   ------------------------------------------------------------------------- */

[data-sw-hero] {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

[data-sw-hero-head] {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

/* 15ch forced a break inside "Architecture-led". The cap now clears the
   compound; the word joiner in the markup keeps the hyphen unbreakable at
   every width, so the wrap can never land mid-word again. */
[data-sw-hero-head] h1 {
  max-inline-size: 19ch;
}

[data-sw-hero-head] > p {
  font-size: var(--text-lead);
  line-height: 1.55;
}

[data-sw-hero-head] [data-sw-marker] {
  margin-block-end: 0;
}

/* never empty and never decorative — whatever sits here is the first
   evidence a CTO sees */
/* 4 columns read as an afterthought next to a 72px headline; at 5 with a
   raised ground the decision record holds its own half of the hero */
/* Framed, not filled. The presence comes from the rule and the padding; a
   raised ground on top of that read as a dashboard panel. */
[data-sw-evidence] {
  grid-column: 8 / -1;
  padding: var(--card-padding);
  background: transparent;
  border: 1px solid var(--line-strong);
}

[data-sw-evidence] > p {
  margin-block-start: var(--space-4);
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--text-muted);
}

@media (max-width: 1023px) {
  [data-sw-hero-head],
  [data-sw-evidence] {
    grid-column: 1 / -1;
  }

  /* the panel keeps its full frame when it stacks — it is a framed artefact,
     and stripping one edge left it looking broken rather than open */
  [data-sw-evidence] {
    margin-block-start: var(--space-5);
  }
}

/* -------------------------------------------------------------------------
   10. Cards — hairline cells in a grid. No radius, no shadow, no icon tile.
   ------------------------------------------------------------------------- */

[data-sw-cards] {
  display: grid;
  gap: var(--grid-gap);
}

[data-sw-cards="situation"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-sw-cards="capability"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-sw-cards="practice"],
[data-sw-cards="insight"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  [data-sw-cards="situation"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-sw-cards="capability"] {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  [data-sw-cards] {
    grid-template-columns: 1fr;
  }
}

/* <sw-card-problem> in the handover — hairline box, mono index. The attribute
   reads "situation" instead: not every item in that section is a problem, and a
   new system needing sound foundations is not one at all. */
[data-sw-card="situation"] {
  padding: var(--card-padding);
  background: var(--surface-raised);
  border: 1px solid var(--line);
}

[data-sw-card="situation"] [data-sw-index] {
  display: block;
  margin-block-end: var(--space-3);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-variant-numeric: tabular-nums;
}

[data-sw-card="situation"] h3 {
  margin-block-end: var(--space-2);
}

[data-sw-card="situation"] p {
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--text-muted);
}

/* <sw-card-capability> — 2px top rule, then title, list, outcome line */
/* a 2px --text rule outshouted the heading under it. The divider drops to the
   normal tone and a short accent segment carries the hierarchy instead. */
[data-sw-card="capability"] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--line-strong);
}

[data-sw-card="capability"]::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: var(--space-7);
  block-size: 2px;
  background: var(--accent);
}

[data-sw-card="capability"] > p {
  font-size: var(--text-small);
  line-height: 1.55;
}

[data-sw-card="capability"] ul {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

[data-sw-card="capability"] li {
  display: grid;
  grid-template-columns: var(--space-4) 1fr;
  font-size: var(--text-small);
  line-height: 1.5;
}

[data-sw-card="capability"] li::before {
  content: "/";
  color: var(--accent);
  font-family: var(--font-mono);
}

[data-sw-outcome] {
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--line);
  color: var(--accent);
  font-size: var(--text-small);
  font-weight: 600;
}

/* <sw-card-practice> — carries another practice's mark and hue */
[data-sw-card="practice"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--card-padding);
  border: 1px solid var(--line);
}

[data-sw-card="practice"] header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

[data-sw-practice-name] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: var(--tracking-h3);
  text-transform: uppercase;
}

[data-sw-practice-name] em {
  color: var(--text-muted);
  font-style: normal;
}

[data-sw-card="practice"] p {
  font-size: var(--text-small);
  line-height: 1.55;
  max-inline-size: none;
}

[data-sw-card="practice"] p:last-of-type {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  line-height: 1.6;
}

/* <sw-tag> */
[data-sw-tag] {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

/* RESERVED — <sw-card-insight> */
/* RESERVED — <sw-card-insight>, awaiting the insights index */
[data-sw-card="insight"] {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
}

[data-sw-card="insight"] > div {
  display: grid;
  gap: var(--space-2);
  padding: var(--card-padding);
}

[data-sw-card="insight"] [data-sw-meta] {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-code);
}

[data-sw-card="insight"] [data-sw-read] {
  margin-block-start: auto;
  padding: var(--space-3) var(--card-padding);
  border-block-start: 1px solid var(--line);
  color: var(--accent);
  font-size: var(--text-small);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   11. <sw-definition-rows> — use instead of a card grid wherever the content
       is a list of positions: principles, services, FAQ
   ------------------------------------------------------------------------- */

[data-sw-definition-rows="numbered"] {
  counter-reset: position;
}

[data-sw-definition-rows="numbered"] dt::before {
  counter-increment: position;
  content: "0" counter(position);
  margin-inline-end: var(--space-4);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  font-variant-numeric: tabular-nums;
}

[data-sw-definition-rows] > div {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gutter);
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--line);
}

[data-sw-definition-rows] > div:last-child {
  border-block-end: 1px solid var(--line);
}

[data-sw-definition-rows] dt {
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}

[data-sw-definition-rows] dd {
  max-inline-size: var(--measure);
}

/* when a term is a destination (the 404 list), it is a control and owes the
   44px target — the h3 line box alone is about 26px */
[data-sw-definition-rows] dt a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
}

/* term above description below 1024 */
@media (max-width: 1023px) {
  [data-sw-definition-rows] > div {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* -------------------------------------------------------------------------
   12. <sw-callout> and <sw-pullquote>
   ------------------------------------------------------------------------- */

[data-sw-callout] {
  padding: var(--card-padding);
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-line);
}

[data-sw-callout] [data-sw-marker] {
  margin-block-end: var(--space-2);
}

/* RESERVED — <sw-pullquote>, awaiting the article template */
[data-sw-pullquote] {
  margin: 0;
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--accent);
}

[data-sw-pullquote] p {
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--tracking-h3);
}

[data-sw-pullquote] figcaption {
  margin-block-start: var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   13. <sw-prose> — body at 1–7, margin notes at 9–12
   ------------------------------------------------------------------------- */

[data-sw-prose] {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

[data-sw-prose] > * {
  grid-column: 1 / span 7;
}

[data-sw-prose] > * + * {
  margin-block-start: var(--space-5);
}

[data-sw-note] {
  grid-column: 9 / -1;
  grid-row: span 2;
  margin-block-start: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

[data-sw-note] b {
  display: block;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

/* below 1024 the notes go inline behind a 2px accent left rule */
@media (max-width: 1023px) {
  [data-sw-prose] {
    grid-template-columns: 1fr;
  }

  [data-sw-prose] > *,
  [data-sw-note] {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  [data-sw-note] {
    margin-block-start: var(--space-5);
    border-inline-start-width: 2px;
    border-inline-start-color: var(--accent);
  }
}

/* -------------------------------------------------------------------------
   14. Diagrams — hairline rules, square nodes, connectors as pseudo-elements
       so they are never announced
   ------------------------------------------------------------------------- */

/* <sw-workflow> — five numbered nodes. Each step owns its own connector
   segment; one absolutely-positioned rule across the row breaks the moment
   the grid wraps. */
[data-sw-workflow] {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gutter);
  padding: 0;
  list-style: none;
}

[data-sw-step] {
  position: relative;
  min-block-size: var(--space-7);
}

/* starts clear of the 32px glyph and stops at the next one, at the glyph's
   vertical centre: the strata are the structure, a rule through them is noise */
[data-sw-step]::after {
  content: "";
  position: absolute;
  inset-inline: calc(var(--space-7) + var(--space-2)) calc(-1 * var(--gutter));
  inset-block-start: var(--space-5);
  block-size: 1px;
  background: var(--connector);
  transform-origin: left center;
}

[data-sw-step]:last-child::after {
  content: none;
}

/* Each stage draws the logo's own strata, resolving from undifferentiated
   layers at Understand to the mark itself at Improve — the offset opens up and
   the fill completes, so the diagram, the process and the logo are one
   language rather than five identical squares. */
[data-sw-node] {
  display: flex;
  align-items: center;
  inline-size: var(--space-7);
  block-size: var(--space-7);
  margin-block-end: var(--space-3);
  color: var(--text);
}

[data-sw-node] svg {
  inline-size: var(--space-7);
  block-size: var(--space-7);
}

[data-sw-stage] {
  display: block;
  margin-block-end: var(--space-1);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  font-variant-numeric: tabular-nums;
}

/* the closing stage is the mark, so it carries the mark's weight */
[data-sw-step]:last-child [data-sw-stage] {
  color: var(--accent);
}

[data-sw-step] h3 {
  margin-block-end: var(--space-1);
}

[data-sw-step] p {
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text-muted);
}

/* the spine rotates vertical: rule down the left, nodes stacked, text right */
@media (max-width: 1023px) {
  [data-sw-workflow] {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  [data-sw-step] {
    padding-inline-start: calc(var(--space-7) + var(--space-3));
  }

  [data-sw-step] > [data-sw-node] {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    margin-block-end: 0;
  }

  [data-sw-step]::after {
    inset-inline: var(--space-5) auto;
    inset-block: calc(var(--space-7) + var(--space-2)) calc(-1 * var(--space-6));
    inline-size: 1px;
    block-size: auto;
  }
}

/* RESERVED — <sw-diagram-spine>: four square nodes on a connector rule, three
   outlined and the last filled. Awaiting the service-detail and about pages. */
[data-sw-spine] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  padding: 0;
  list-style: none;
}

[data-sw-spine] > li {
  position: relative;
  padding-block-start: var(--space-6);
}

[data-sw-spine] > li::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--space-4);
  block-size: var(--space-4);
  border: 1px solid var(--accent-fill);
  background: transparent;
}

[data-sw-spine] > li:last-child::before {
  background: var(--accent-fill);
}

[data-sw-spine] > li::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-4) calc(-1 * var(--gutter));
  inset-block-start: var(--space-2);
  block-size: 1px;
  background: var(--connector);
  transform-origin: left center;
}

[data-sw-spine] > li:last-child::after {
  content: none;
}

[data-sw-spine] h3 {
  margin-block-end: var(--space-1);
}

[data-sw-spine] p {
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text-muted);
}

/* rotates vertical: rule down the left, nodes stacked, text to the right */
@media (max-width: 1023px) {
  [data-sw-spine] {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  [data-sw-spine] > li {
    padding-block-start: 0;
    padding-inline-start: var(--space-6);
  }

  [data-sw-spine] > li::after {
    inset-inline: var(--space-2) auto;
    inset-block: var(--space-4) calc(-1 * var(--space-6));
    inline-size: 1px;
    block-size: auto;
  }
}

/* RESERVED — <sw-diagram-layers>: each row indented one stratum further than the one
   below, matching the logo's offset */
[data-sw-layers] {
  display: grid;
  padding: 0;
  list-style: none;
}

[data-sw-layers] li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--text-code);
}

[data-sw-layers] li + li {
  border-block-start: 0;
}

[data-sw-layers] li:nth-child(1) {
  margin-inline-start: calc(2 * var(--space-5));
}

[data-sw-layers] li:nth-child(2) {
  margin-inline-start: var(--space-5);
}

[data-sw-layers] li[aria-current="true"] {
  background: var(--accent-tint);
  border-color: var(--accent-tint-line);
}

/* <sw-record> — an architecture decision record, not a table of technologies.
   Need / Selected / Avoided / Reason is the shape of the artefact and the shape
   of the argument, and unlike a table it stacks without cramping: the labels
   simply move above their values below 768. */
[data-sw-record] {
  margin: 0;
}

[data-sw-record] figcaption {
  margin-block-end: var(--space-3);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

[data-sw-record] dl > div {
  display: grid;
  grid-template-columns: 13ch 1fr;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--line);
}

[data-sw-record] dt {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
  line-height: 1.7;
  white-space: nowrap;
}

[data-sw-record] dd {
  color: var(--text);
  font-size: var(--text-small);
  line-height: 1.45;
}

/* the decision is the line the eye should land on */
[data-sw-record-row="decision"] dd {
  position: relative;
  color: var(--accent);
  font-weight: 600;
}

[data-sw-record-row="decision"] dt {
  color: var(--accent);
}

/* struck through and muted: <del> carries the meaning without the colour */
[data-sw-record-row="avoided"] dd,
[data-sw-record-row="avoided"] del {
  color: var(--text-muted);
  text-decoration-thickness: 1px;
}

[data-sw-record-reason] {
  margin-block-start: var(--space-3);
}

[data-sw-record-reason] > [data-sw-marker] {
  margin-block-end: var(--space-3);
  color: var(--text-muted);
}

[data-sw-record-reason] ul {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

[data-sw-record-reason] li {
  display: grid;
  grid-template-columns: var(--space-4) 1fr;
  color: var(--text-secondary);
  font-size: var(--text-small);
  line-height: 1.45;
}

[data-sw-record-reason] li::before {
  content: "/";
  color: var(--accent);
  font-family: var(--font-mono);
}

/* below 768 the labels sit above their values — a two-column record at phone
   width either wraps badly or scrolls sideways, and neither is acceptable */
@media (max-width: 767px) {
  [data-sw-record] dl > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* <sw-decision-record> — mono table, option + verdict. Verdicts use status
   colours, never the practice accent. */
[data-sw-decision-record],
[data-sw-spec-table] {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  text-align: start;
}

/* the caption names the artefact, so it leads rather than whispers */
[data-sw-decision-record] caption,
[data-sw-spec-table] caption {
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--line-strong);
  color: var(--text);
  font-size: var(--text-code);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  text-align: start;
  text-transform: uppercase;
}

[data-sw-decision-record] th,
[data-sw-decision-record] td,
[data-sw-spec-table] th,
[data-sw-spec-table] td {
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--line);
  font-weight: 400;
  text-align: start;
  vertical-align: baseline;
}

[data-sw-decision-record] thead th,
[data-sw-spec-table] thead th {
  border-block-start-color: var(--line-strong);
  color: var(--text-muted);
  font-size: var(--text-marker);
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

[data-sw-decision-record] tbody tr:last-child th,
[data-sw-decision-record] tbody tr:last-child td,
[data-sw-spec-table] tbody tr:last-child td {
  border-block-end: 1px solid var(--line);
}

[data-sw-decision-record] td {
  inline-size: 8ch;
  text-align: end;
  white-space: nowrap;
}

/* No semantic hue: red/green/amber beside the accent read as a second brand
   system, and colour was never the carrier here — the word is. Weight and the
   neutral ramp do the ranking instead. */
[data-sw-verdict="selected"] {
  color: var(--accent);
  font-weight: 500;
}

[data-sw-verdict="rejected"],
[data-sw-verdict="deferred"] {
  color: var(--text-muted);
}

[data-sw-spec-table] td:last-child {
  white-space: nowrap;
}

/* stacks to labelled rows at 390 */
@media (max-width: 767px) {
  [data-sw-spec-table] thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  [data-sw-spec-table] tr {
    display: grid;
    padding-block: var(--space-3);
    border-block-start: 1px solid var(--line);
  }

  [data-sw-spec-table] td {
    padding-block: var(--space-1);
    border: 0;
  }

  [data-sw-spec-table] td::before {
    content: attr(data-label) " ";
    color: var(--text-muted);
    text-transform: uppercase;
  }
}

/* -------------------------------------------------------------------------
   15. Measurement
   ------------------------------------------------------------------------- */

/* RESERVED — <sw-metric-pair>: <del> and <ins> so the meaning survives without colour */
[data-sw-metrics] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
}

[data-sw-metrics] > div {
  padding: var(--card-padding);
  border-block-end: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
}

[data-sw-metrics] dt {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

[data-sw-metrics] dd {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

[data-sw-metrics] del {
  color: var(--text-muted);
  font-size: var(--text-body);
}

[data-sw-metrics] ins {
  color: var(--text);
  font-size: var(--text-metric);
  line-height: 1.1;
  text-decoration: none;
}

@media (max-width: 767px) {
  [data-sw-metrics] {
    grid-template-columns: 1fr;
  }
}

/* <sw-budget-bar> — a budget, not a score */
[data-sw-budget] {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

[data-sw-budget] > li {
  display: grid;
  gap: var(--space-2);
}

[data-sw-budget] [data-sw-bar-label] {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-variant-numeric: tabular-nums;
}

[data-sw-budget] [data-sw-bar-label] b {
  color: var(--text);
  font-weight: 400;
}

[data-sw-bar] {
  block-size: var(--space-2);
  background: var(--line);
}

[data-sw-bar] > span {
  display: block;
  block-size: 100%;
  background: var(--accent-fill);
  transform-origin: left center;
}

[data-sw-bar="over"] > span {
  background: var(--critical);
}

/* fill in 5% steps — inline style attributes are forbidden (S1/S2), and
   attr() with a type is not Baseline, so the scale is enumerated */
[data-sw-fill="0"]   { inline-size: 0 }
[data-sw-fill="5"]   { inline-size: 5% }
[data-sw-fill="10"]  { inline-size: 10% }
[data-sw-fill="15"]  { inline-size: 15% }
[data-sw-fill="20"]  { inline-size: 20% }
[data-sw-fill="25"]  { inline-size: 25% }
[data-sw-fill="30"]  { inline-size: 30% }
[data-sw-fill="35"]  { inline-size: 35% }
[data-sw-fill="40"]  { inline-size: 40% }
[data-sw-fill="45"]  { inline-size: 45% }
[data-sw-fill="50"]  { inline-size: 50% }
[data-sw-fill="55"]  { inline-size: 55% }
[data-sw-fill="60"]  { inline-size: 60% }
[data-sw-fill="65"]  { inline-size: 65% }
[data-sw-fill="70"]  { inline-size: 70% }
[data-sw-fill="75"]  { inline-size: 75% }
[data-sw-fill="80"]  { inline-size: 80% }
[data-sw-fill="85"]  { inline-size: 85% }
[data-sw-fill="90"]  { inline-size: 90% }
[data-sw-fill="95"]  { inline-size: 95% }
[data-sw-fill="100"] { inline-size: 100% }

[data-sw-budget-title] {
  margin-block-end: var(--space-4);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

[data-sw-provisional] {
  margin-block-start: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

/* -------------------------------------------------------------------------
   15b. Section compositions
   ------------------------------------------------------------------------- */

/* 04 — the graphite emphasis band: 6 / 6 */
[data-sw-band-head] {
  grid-column: 1 / span 6;
}

[data-sw-band-head] > p {
  margin-block-start: var(--space-5);
}

[data-sw-band-list] {
  grid-column: 8 / -1;
  padding: 0;
  list-style: none;
  counter-reset: principle;
}

[data-sw-band-list] li {
  display: grid;
  grid-template-columns: var(--space-6) 1fr;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--line);
  font-size: var(--text-small);
}

[data-sw-band-list] li:last-child {
  border-block-end: 1px solid var(--line);
}

[data-sw-band-list] li::before {
  counter-increment: principle;
  content: "0" counter(principle);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-variant-numeric: tabular-nums;
}

/* 06 — lifecycle footnote */
[data-sw-lifecycle-note] {
  margin-block-start: var(--head-gap);
  color: var(--text-muted);
  font-size: var(--text-small);
}

/* 07 — built as we advise: prose 1–6, budget 8–12 */
[data-sw-proof] {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

[data-sw-proof] > :first-child {
  grid-column: 1 / span 5;
}

[data-sw-proof] > :last-child {
  grid-column: 7 / -1;
}

/* the most distinctive block on the page, so it stops looking like a sidebar */
[data-sw-panel] {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--line);
}

[data-sw-panel] [data-sw-facts] {
  margin-block-start: var(--space-5);
}

[data-sw-proof] h2 {
  margin-block-end: var(--space-5);
}

[data-sw-proof-list] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
  padding: 0;
  list-style: none;
}

[data-sw-proof-list] li {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

/* 09 — footer call to action */
[data-sw-footer-cta] {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gutter);
  align-items: end;
  margin-block-end: calc(var(--section-padding) * 0.88);
  padding-block-end: var(--space-6);
  border-block-end: 1px solid var(--line);
}

[data-sw-footer-cta] h2 {
  margin-block-end: var(--space-4);
}

/* The scope line qualifies the lead rather than restating the pitch, so it has
   to read as subordinate. Colour alone will not do it: the footer lead already
   sits at --text-small, and on the graphite ground --text-muted and
   --text-secondary resolve to near-identical tones by design. Dropping a step
   to --text-code is what actually creates the hierarchy, and it matches the
   register of the meta row at the bottom of the same footer. */
[data-sw-footer-cta] [data-sw-cta-scope] {
  margin-block-start: var(--space-3);
  max-inline-size: var(--measure);
  color: var(--text-muted);
  font-size: var(--text-code);
}

[data-sw-footer-cta] [data-sw-actions] {
  justify-content: end;
}

@media (max-width: 1023px) {
  [data-sw-band-head],
  [data-sw-band-list],
  [data-sw-proof] > :first-child,
  [data-sw-proof] > :last-child {
    grid-column: 1 / -1;
  }

  [data-sw-band-list],
  [data-sw-proof] > :last-child {
    margin-block-start: var(--space-6);
  }

  [data-sw-footer-cta] {
    grid-template-columns: 1fr;
    align-items: start;
  }

  [data-sw-footer-cta] [data-sw-actions] {
    justify-content: start;
  }
}

[data-sw-facts] {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-variant-numeric: tabular-nums;
}

[data-sw-facts] > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-1);
}

[data-sw-facts] dt {
  color: var(--text-muted);
}

[data-sw-facts] dd {
  color: var(--text);
}

/* -------------------------------------------------------------------------
   16. <sw-field> — one form on the site
   ------------------------------------------------------------------------- */

[data-sw-form] {
  display: grid;
  gap: var(--space-5);
  max-inline-size: var(--measure);
}

[data-sw-field] {
  display: grid;
  gap: var(--space-2);
}

/* the label is always visible above the field — never a placeholder as label */
[data-sw-field] > [data-sw-label] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text);
  font-size: var(--text-small);
  font-weight: 600;
}

/* the word "required" in mono, right-aligned to the label — no asterisk,
   and no "optional" on the rest */
[data-sw-required] {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 400;
  letter-spacing: var(--tracking-marker);
}

[data-sw-form] input,
[data-sw-form] textarea {
  min-block-size: calc(var(--space-7) - var(--space-1) + var(--space-1));
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-small);
  transition: border-color var(--duration-state) linear;
}

/* on dark the field recedes into the sunken tone: an input is a hole,
   not a card */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-sw-form] input,
  :root:not([data-theme="light"]) [data-sw-form] textarea {
    background: var(--surface-sunken);
  }
}

:root[data-theme="dark"] [data-sw-form] input,
:root[data-theme="dark"] [data-sw-form] textarea {
  background: var(--surface-sunken);
}

[data-sw-form] textarea {
  min-block-size: calc(var(--space-10) + var(--space-2));
  resize: vertical;
}

[data-sw-form] input:hover,
[data-sw-form] textarea:hover {
  border-color: var(--text);
}

/* focus is a 2px accent border, not a glow */
[data-sw-form] input:focus,
[data-sw-form] textarea:focus {
  border: 2px solid var(--accent);
  outline: 2px solid var(--text);
  outline-offset: var(--focus-offset);
}

/* validated on blur by the browser, never while typing */
[data-sw-form] input:user-invalid,
[data-sw-form] textarea:user-invalid {
  border: 2px solid var(--critical);
}

/* the message is always present; colour is never the only carrier */
[data-sw-error] {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--critical);
  font-size: var(--text-small);
}

[data-sw-form] :user-invalid ~ [data-sw-error] {
  display: flex;
}

[data-sw-form] [disabled] {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

[data-sw-consent] {
  color: var(--text-muted);
  font-size: var(--text-small);
}

/* honeypot — off-screen via CSS so naive bots still fill it */
[data-sw-hp] {
  position: absolute;
  inset-inline-start: -100vw;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   17. <sw-footer> — graphite, four columns, then ecosystem, then measurements
   ------------------------------------------------------------------------- */

[data-sw-footer] {
  padding-block: calc(var(--section-padding) * 0.88);
  border-block-end: 0;
}

[data-sw-footer-columns] {
  display: grid;
  grid-template-columns: 4fr 3fr 3fr 2fr;
  gap: var(--gutter);
}

[data-sw-footer-columns] h2 {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

[data-sw-footer] ul {
  padding: 0;
  list-style: none;
}

/* footer line-height is 2 so link targets reach 44px */
[data-sw-footer] li,
[data-sw-footer] p {
  font-size: var(--text-small);
  line-height: 2;
}

/* :not([data-sw-button]) for the same reason as the nav bar */
[data-sw-footer] a:not([data-sw-button]) {
  display: inline-block;
  color: var(--text-secondary);
  transition: color var(--duration-state) linear;
}

[data-sw-footer] a:not([data-sw-button]):hover {
  color: var(--text);
}

/* a strip, not a section: two practices marked Coming should not take a full
   band of the page away from StratusWorks */
[data-sw-ecosystem] {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--line);
}

[data-sw-ecosystem] > [data-sw-marker] {
  margin-block-end: var(--space-2);
}

[data-sw-ecosystem] > p {
  max-inline-size: var(--measure);
  font-size: var(--text-small);
}

[data-sw-ecosystem] ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--gutter);
  margin-block-start: var(--space-4);
  padding: 0;
  list-style: none;
}

[data-sw-ecosystem] li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  line-height: 1.5;
}

[data-sw-ecosystem] li > span:last-child {
  color: var(--text-muted);
  font-size: var(--text-small);
}

@media (max-width: 767px) {
  [data-sw-ecosystem] ul {
    grid-template-columns: 1fr;
  }
}

[data-sw-footer-bottom] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--line);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-variant-numeric: tabular-nums;
}

/* Appearance control — makes both authored themes reachable without an OS
   setting. The mechanism and its per-page scope are documented in tokens.css.
   role="radiogroup" rather than <fieldset>: a fieldset's rendered <legend> is
   special-cased by every engine and cannot be a flex item, and this group has
   to sit on one line in the meta row. */
[data-sw-appearance] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

/* clipped, never display:none — a hidden radio must stay focusable and in the
   tab order. clip-path takes the global :focus-visible outline with it, so the
   ring is redrawn on the label rather than removed. */
[data-sw-appearance] input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

[data-sw-appearance-options] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* the same treatment as the primary nav: the selected item is marked by a 2px
   accent rule and a step up in text colour, never by hue alone */
[data-sw-appearance] label {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  border-block-end: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--duration-state) linear,
    border-color var(--duration-state) linear;
}

[data-sw-appearance] label:hover {
  color: var(--text);
  border-block-end-color: var(--line);
}

[data-sw-appearance] input:checked + label {
  color: var(--text);
  border-block-end-color: var(--accent);
}

[data-sw-appearance] input:focus-visible + label {
  outline: 2px solid var(--text);
  outline-offset: var(--focus-offset);
}

@media (max-width: 1023px) {
  [data-sw-footer-columns] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--gutter);
  }
}

@media (max-width: 767px) {
  [data-sw-footer-columns] {
    grid-template-columns: 1fr;
  }

  /* ecosystem row last at 390 */
  [data-sw-ecosystem] {
    margin-block-start: var(--space-6);
  }
}

/* -------------------------------------------------------------------------
   18. Utility page furniture
   ------------------------------------------------------------------------- */

[data-sw-status] {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

[data-sw-stack] {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

/* the German legal term kept beside the English heading: "Impressum" is the
   recognised heading in AT, but the site is lang="en" */
[data-sw-alt-term] {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-weight: 400;
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
  vertical-align: middle;
}

[data-sw-legal] {
  max-inline-size: var(--measure);
}

[data-sw-legal] > * + * {
  margin-block-start: var(--space-5);
}

[data-sw-legal] h2 {
  margin-block-start: var(--space-7);
  font-size: var(--text-h3);
}

[data-sw-toc] {
  padding: var(--card-padding);
  border: 1px solid var(--line);
}

[data-sw-toc] ol {
  padding-inline-start: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  line-height: 2;
}

[data-sw-updated] {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-code);
}

/* numbered "what happens next" steps on the confirmation page */
[data-sw-next] {
  display: grid;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

[data-sw-next] li {
  display: grid;
  grid-template-columns: var(--space-6) 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--line);
}

[data-sw-next] li:last-child {
  border-block-end: 1px solid var(--line);
}

[data-sw-next] li::before {
  counter-increment: step;
  content: "0" counter(step);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   19. Motion — two of the four specified movements survive zero JavaScript.
       ≤3 animated elements per view, no infinite loops, transform and
       opacity only, all neutralized under prefers-reduced-motion (S4).
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* strata settle — 300ms, first load only */
  [data-sw-strata] > rect {
    animation: sw-settle 300ms var(--easing) both;
  }

  [data-sw-strata] > rect:nth-child(2) {
    animation-delay: 40ms;
  }

  [data-sw-strata] > rect:nth-child(3) {
    animation-delay: 80ms;
  }

  /* connector draw and budget fill were specified as IntersectionObserver
     scroll reveals. Shipped as progressive enhancement only: where
     unsupported, both render in their final state, which is correct. */
  @supports (animation-timeline: view()) {
    [data-sw-step]::after {
      animation: sw-draw var(--duration-reveal) var(--easing) both;
      animation-timeline: view();
      animation-range: entry 20% cover 30%;
    }

    [data-sw-bar] > span {
      animation: sw-fill 500ms var(--easing) both;
      animation-timeline: view();
      animation-range: entry 25% cover 40%;
    }
  }
}

@keyframes sw-settle {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
}

@keyframes sw-draw {
  from {
    transform: scaleX(0);
  }
}

@keyframes sw-fill {
  from {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   20. Print — articles get printed and forwarded inside client organisations,
       so this is part of the brand, not an afterthought
   ------------------------------------------------------------------------- */

@page {
  size: A4;
  margin: 20mm;
}

@media print {
  :root {
    --surface: #fff;
    --surface-raised: #fff;
    --surface-sunken: #fff;
    --text: #000;
    --text-secondary: #000;
    --text-muted: #000;
    --line: #000;
    --line-strong: #000;
    /* accent is dropped — hairline rules only */
    --accent: #000;
    --accent-fill: #000;
    --accent-tint: #fff;
    --accent-tint-line: #000;
    --connector: #000;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  h1 {
    font-size: 18pt;
  }

  h2 {
    font-size: 13pt;
  }

  h3,
  h4 {
    font-size: 11pt;
  }

  /* nav, footer nav, CTAs, screen-only controls and related are removed —
     a colour-scheme control means nothing on paper */
  [data-sw-header],
  [data-sw-skip],
  [data-sw-footer-columns],
  [data-sw-ecosystem],
  [data-sw-actions],
  [data-sw-button],
  [data-sw-appearance],
  [data-sw-related] {
    display: none;
  }

  [data-sw-section] {
    padding-block: 8mm;
    break-inside: avoid;
  }

  /* link URLs print after the text */
  [data-sw-prose] a::after,
  [data-sw-legal] a::after,
  p a::after {
    content: " <" attr(href) ">";
    font-family: var(--font-mono);
    font-size: 8pt;
    word-break: break-all;
  }

  a[href^="#"]::after {
    content: "";
  }

  /* margin notes become footnote-styled blocks in the flow */
  [data-sw-note] {
    border-inline-start: 0;
    border-block-start: 1px solid #000;
    padding-inline-start: 0;
    padding-block-start: 2mm;
    font-size: 8.5pt;
  }

  /* table headers repeat on every page */
  thead {
    display: table-header-group;
  }

  tr,
  [data-sw-card] {
    break-inside: avoid;
  }

  /* running foot — source URL, printed on the last page of the flow.
     Page numbers need @page margin boxes, which no browser implements. */
  [data-sw-print-foot] {
    display: block;
    margin-block-start: 6mm;
    padding-block-start: 2mm;
    border-block-start: 1px solid #000;
    font-family: var(--font-mono);
    font-size: 7pt;
  }
}

/* RESERVED — the article print sheet places this element; no page does yet */
[data-sw-print-foot] {
  display: none;
}