/* M-Office components and layout.
 *
 * Consumes tokens only. No literal colour and no untokenised length outside the
 * allow-list in tools/checks.java: 0, 1px, 2px, 50%, 100%. `em` is always
 * exempt as a relative measure. Add a token or reconsider the component; do not
 * add a value here.
 *
 * TWO element kinds:
 *   a NATIVE element whenever the thing carries a landmark, role or
 *   interaction (header, nav, footer, article, dl, details/summary,
 *   label/input), hooked with a data-mo-* attribute; and
 *   a <mo-*> custom element for pure composition that claims nothing.
 * Exactly three <mo-*> exist and all three declare an explicit display.
 * None has a shadow root or a template.
 *
 * THE TRAP, and it has bitten two sibling projects:
 *   any `[data-mo-x] a { color: ... }` MUST be written
 *   `[data-mo-x] a:not([data-mo-button])`, or the container rule (0,1,1)
 *   outranks [data-mo-button="primary"] (0,1,0) and the call to action takes
 *   body ink on an accent ground. Only the browser contrast checks catch it.
 */

/* ── reset ───────────────────────────────────────────────────────────────── */

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-operating);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

img, svg, picture { display: block; max-width: 100%; height: auto; }

:focus-visible {
  outline: var(--focus-ring) solid var(--accent-text);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-control);
}

/* Composition elements. An explicit display on every one: a custom element
 * defaults to inline, which collapses its margins and breaks its grid. */
mo-wordmark, mo-split, mo-panel { display: block; }

/* ── skip link ───────────────────────────────────────────────────────────── */

[data-mo-skip] {
  position: absolute;
  left: var(--offscreen);
  top: var(--space-2);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  background: var(--accent-fill);
  color: var(--on-accent);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  font-size: var(--size-interface);
  font-weight: var(--weight-semi);
  text-decoration: none;
}
[data-mo-skip]:focus { left: var(--space-4); }

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

[data-mo-container] {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

[data-mo-section] {
  background: var(--page);
  color: var(--ink);
  padding-block: var(--section-y);
}

[data-mo-section][data-ground] { background: var(--page); }

[data-mo-flush] { padding-block: 0; }

mo-split {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
/* A grid item defaults to min-width:auto, so its widest unbreakable child sets
 * the track's minimum. A 302px button did exactly that and pushed its panel
 * 18px past the container on a 390px screen. min-width:0 lets the track keep
 * the width the layout gave it. */
mo-split > * { min-width: 0; }
@media (min-width: 48rem) {
  mo-split[data-cols="hero"] { grid-template-columns: 1fr var(--hero-media); }
  mo-split[data-cols="2"]    { grid-template-columns: 1fr 1fr; }
}

mo-panel {
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}

/* ── type ────────────────────────────────────────────────────────────────── */

[data-mo-eyebrow] {
  font-size: var(--size-label);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--space-3);
}
[data-mo-eyebrow="muted"] { color: var(--muted); }

h1, h2, h3 { text-wrap: balance; }

[data-mo-display] {
  font-family: var(--font-display);
  font-size: var(--size-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  margin: 0 0 var(--space-5);
}

[data-mo-heading] {
  font-family: var(--font-display);
  font-size: var(--size-heading);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 var(--space-4);
}

[data-mo-band-heading] {
  font-family: var(--font-display);
  font-size: var(--size-band-heading);
  font-weight: var(--weight-medium);
  line-height: var(--leading-band);
  margin: 0;
}
[data-mo-band-heading] + [data-mo-band-heading] { color: var(--accent-text); }

[data-mo-rule] {
  width: var(--space-8);
  height: var(--rule);
  background: var(--accent-fill);
  border: 0;
  margin: 0 0 var(--space-5);
}

[data-mo-lede] {
  font-size: var(--size-lede);
  color: var(--muted);
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
}

[data-mo-prose] { max-width: var(--measure); }
[data-mo-prose] p { margin: 0 0 var(--space-4); }
[data-mo-prose] h2 {
  font-family: var(--font-display);
  font-size: var(--size-heading);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  margin: var(--space-8) 0 var(--space-3);
}
[data-mo-prose] h3 {
  font-size: var(--size-card-heading);
  font-weight: var(--weight-semi);
  margin: var(--space-6) 0 var(--space-2);
}
[data-mo-prose] ul, [data-mo-prose] ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
[data-mo-prose] li { margin-bottom: var(--space-2); }
[data-mo-prose] li::marker { color: var(--accent-text); }
[data-mo-prose] a:not([data-mo-button]) { color: var(--accent-text); }
[data-mo-prose] dt { font-weight: var(--weight-semi); margin-top: var(--space-4); }
[data-mo-prose] dd { margin: 0 0 var(--space-3); color: var(--muted); }
[data-mo-prose] [data-mo-prose-close] { font-weight: var(--weight-semi); }

/* The four steps. A real sequence, so a real ordered list, numbered by a
 * counter in the display face. role="list" is load-bearing: WebKit drops the
 * list semantics of any list whose markers are removed with list-style:none,
 * and VoiceOver would then announce four loose headings instead of "list, 4
 * items". */
[data-mo-steps] {
  list-style: none;
  counter-reset: step;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-5);
}
[data-mo-steps] li {
  counter-increment: step;
  display: grid;
  grid-template-columns: var(--step-n) minmax(0, 1fr);
  column-gap: var(--space-3);
}
[data-mo-steps] li::before {
  content: counter(step);
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: var(--size-band-heading);
  line-height: 1;
  color: var(--accent-text);
}
[data-mo-steps] h4 {
  font-size: var(--size-card-heading);
  font-weight: var(--weight-semi);
  margin: 0 0 var(--space-1);
}
[data-mo-steps] p {
  font-size: var(--size-small);
  color: var(--muted);
  margin: 0;
}
[data-mo-steps-cta] {
  font-weight: var(--weight-semi);
  margin: 0 0 var(--space-3);
}

[data-mo-meta] {
  font-size: var(--size-small);
  color: var(--muted);
}

/* The draft marker. A gated value renders inside this until it is confirmed, so
 * an unconfirmed fee reads as unconfirmed rather than looking real. */
[data-mo-todo] {
  text-decoration: underline dashed var(--accent-fill);
  text-underline-offset: var(--focus-offset);
}

/* --accent-fill is reserved for BACKGROUNDS and for the disc glyph, which is
 * paired with the constant navy. Anything that draws a glyph on the page ground
 * takes --accent-text instead: it is ground-aware, so it resolves to 4.95:1 on
 * paper and 7.25:1 on the ink band, where the raw gold would be 2.00:1 and 7.25:1
 * respectively. tools/checks.java enforces this.
 */

/* ── buttons ─────────────────────────────────────────────────────────────── */

[data-mo-button] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-min);
  padding: 0 var(--space-5);
  border: var(--border) solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-operating);
  font-size: var(--size-interface);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  text-decoration: none;
  /* A label wraps only when it genuinely lacks room, and balances when it does.
   * nowrap here once made a 302px label widen its whole panel on a phone. */
  max-width: 100%;
  padding-block: var(--space-2);
  line-height: var(--leading-tight);
  text-wrap: balance;
  cursor: pointer;
  transition: background var(--duration) linear, color var(--duration) linear,
              border-color var(--duration) linear;
}

/* The primary button is INK on paper and reads as the brand's navy block.
 * It is deliberately not accent-fill: gold is ornament. */
[data-mo-button="primary"] {
  background: var(--ink);
  color: var(--page);
}
[data-mo-button="secondary"] {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

/* An accent-fill ground takes --on-accent and nothing else. --ink here would be
 * paper on gold, which is 2.00:1 on every ink ground and in the dark theme. */
[data-mo-button="accent"] {
  background: var(--accent-fill);
  color: var(--on-accent);
}

[data-mo-button] svg {
  width: var(--space-4);
  height: var(--space-4);
  flex: 0 0 auto;
}

@media (hover: hover) {
  [data-mo-button="primary"]:hover   { background: var(--accent-text); color: var(--page); }
  [data-mo-button="secondary"]:hover { border-color: var(--ink); }
  [data-mo-button="accent"]:hover    { background: var(--accent-text); color: var(--page); }
}

/* ── header ──────────────────────────────────────────────────────────────── */

[data-mo-header] {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--page);
  border-bottom: var(--border) solid var(--hairline);
}

[data-mo-header-inner] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
}

[data-mo-lockup] {
  display: block;
  flex: 0 0 auto;
  width: var(--wordmark-w-sm);
  text-decoration: none;
}
@media (min-width: 48rem) { [data-mo-lockup] { width: var(--wordmark-w); } }

/* Below the nav breakpoint the lockup, the language switch, the call to action
 * and the menu button do not fit on one row: at 390px they pushed the document
 * to 489px wide. The call to action is already duplicated inside the menu panel,
 * so it is the one that goes. */
[data-mo-nav] { display: none; }
[data-mo-header-cta] { display: none; white-space: nowrap; }
@media (min-width: 62rem) {
  [data-mo-nav] { display: block; }
  [data-mo-header-cta] { display: inline-flex; }
  [data-mo-menu] { display: none; }
}

[data-mo-nav] ul {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-mo-nav] a:not([data-mo-button]) {
  display: inline-block;
  padding-block: var(--space-3);
  font-size: var(--size-interface);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: var(--rule) solid transparent;
}
[data-mo-nav] a[aria-current="page"] { border-bottom-color: var(--accent-fill); }
@media (hover: hover) {
  [data-mo-nav] a:not([data-mo-button]):hover { border-bottom-color: var(--line); }
}

[data-mo-header-actions] {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ── language switch ─────────────────────────────────────────────────────── */

[data-mo-lang] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-label);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
[data-mo-lang] a { color: var(--muted); text-decoration: none; }
[data-mo-lang] [aria-current="true"] { color: var(--ink); }

/* ── mobile menu, no script ──────────────────────────────────────────────── */

[data-mo-menu] summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-min);
  min-height: var(--target-min);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-control);
  cursor: pointer;
  list-style: none;
  font-size: var(--size-label);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
}
[data-mo-menu] summary::-webkit-details-marker { display: none; }

[data-mo-menu-panel] {
  position: absolute;
  inset-inline: 0;
  background: var(--surface);
  border-bottom: var(--border) solid var(--line);
  padding: var(--space-5) var(--container-pad) var(--space-6);
}
[data-mo-menu-panel] ul { margin: 0 0 var(--space-5); padding: 0; list-style: none; }
[data-mo-menu-panel] li + li { border-top: var(--border) solid var(--hairline); }
[data-mo-menu-panel] a:not([data-mo-button]) {
  display: block;
  padding-block: var(--space-4);
  min-height: var(--target-min);
  font-size: var(--size-interface);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

/* ── hero ────────────────────────────────────────────────────────────────── */

/* ── hero ─────────────────────────────────────────────────────────────────
 * One band, not two. The photograph is the ground and the type sits on it, so
 * there is no seam between a bright rectangle and the page behind it.
 *
 * A navy scrim carries the type. It is dense where the words are and thins out
 * across the picture, which is what keeps the contrast honest without hiding the
 * photograph. The hero declares data-ground="ink", so --ink is paper and
 * --accent-text is the bright gold on every theme.
 *
 * The scrim is built from --page with color-mix rather than a literal rgba, so
 * it follows the ground like every other colour here.
 *
 * tools/render-checks.mjs samples the ACTUAL rendered pixels behind this text.
 * A computed-style contrast walk cannot see a photograph: it finds the first
 * non-transparent background and reports the scrim's own base colour, which is
 * a pass no matter what the image underneath looks like.
 */

[data-mo-hero] {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-10);
  background: var(--page);
  overflow: hidden;
}

[data-mo-hero-media] {
  position: absolute;
  inset: 0;
  z-index: -2;
}
[data-mo-hero-media] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

[data-mo-hero]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Narrow screens: the type runs the full width, so the scrim is close to
   * solid and the photograph reads as texture rather than subject. */
  background:
    linear-gradient(to bottom,
      var(--page) 0%,
      color-mix(in srgb, var(--page) 92%, transparent) 55%,
      color-mix(in srgb, var(--page) 78%, transparent) 100%);
}

[data-mo-hero-content] { max-width: var(--measure); }
[data-mo-hero] [data-mo-lede] { margin-bottom: var(--space-3); }
[data-mo-hero-support] {
  font-size: var(--size-body);
  color: var(--muted);
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
}

@media (min-width: 62rem) {
  [data-mo-hero] { padding-block: var(--hero-y); }
  /* Wide screens: dense on the left where the words are, opening out to the
   * right so the notebook and the cup stay visible. */
  [data-mo-hero]::after {
    background:
      linear-gradient(100deg,
        var(--page) 0%,
        var(--page) 44%,
        color-mix(in srgb, var(--page) 93%, transparent) 60%,
        color-mix(in srgb, var(--page) 62%, transparent) 80%,
        color-mix(in srgb, var(--page) 42%, transparent) 100%);
  }
}

/* ── services ────────────────────────────────────────────────────────────── */

[data-mo-section-head] {
  text-align: center;
  max-width: var(--measure);
  margin-inline: auto;
  margin-bottom: var(--space-9);
}
[data-mo-section-head] [data-mo-rule] { margin-inline: auto; }

/* A service is a panel, not a centred blurb. The comp drew four compact cards
 * with a line each; the owner's copy gives two of them lists of nine and ten
 * items, and a list reads neither centred nor at a quarter of the width. Two
 * columns keep the two detailed services side by side, which also keeps each
 * grid row's cards a similar height. */
/* Cards in a row stretch to the row's height, and each closing note is pushed
 * to the bottom of its card, so the two notes and their hairlines line up
 * across the row instead of stopping at whatever height each list reaches. */
[data-mo-services] {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 48rem) {
  [data-mo-services] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

[data-mo-service] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
[data-mo-service-head] {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-1);
}

/* The comp's navy disc with a gold glyph. --ink would be wrong here: it is paper
 * on an ink ground, and gold on paper is 2.00:1. --on-accent is navy in all four
 * colour blocks by construction, so this pair holds 7.25:1 on every ground. That
 * constancy is the reason it is used as a background here. */
[data-mo-disc] {
  display: grid;
  place-items: center;
  width: var(--disc);
  height: var(--disc);
  border-radius: 50%;
  background: var(--on-accent);
  color: var(--accent-fill);
  flex: 0 0 auto;
}
[data-mo-disc] svg { width: var(--space-5); height: var(--space-5); }

[data-mo-service] h3 {
  font-size: var(--size-card-heading);
  font-weight: var(--weight-semi);
  margin: 0;
}
[data-mo-service] p {
  font-size: var(--size-small);
  color: var(--muted);
  margin: 0;
}
/* (0,2,0), so it outranks the (0,1,1) paragraph rule above. A bare
 * [data-mo-service-label] would lose to it and stay muted. */
[data-mo-service] [data-mo-service-label] {
  color: var(--ink);
  font-weight: var(--weight-semi);
  margin-top: var(--space-2);
}
[data-mo-service] ul {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--size-small);
  line-height: var(--leading-body);
  color: var(--ink);
}
[data-mo-service] li + li { margin-top: var(--space-1); }
[data-mo-service] li::marker { color: var(--accent-text); }
[data-mo-service] [data-mo-service-note] {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: var(--border) solid var(--hairline);
}

/* ── the value band ──────────────────────────────────────────────────────── */

[data-mo-band] { padding-block: var(--section-y); }
[data-mo-band-inner] {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 48rem) {
  [data-mo-band-inner] { grid-template-columns: auto 1fr; }
  [data-mo-band-mark] { border-right: var(--border) solid var(--line); padding-right: var(--space-8); }
}


[data-mo-values] {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(var(--card-floor), 1fr));
  margin-top: var(--space-6);
}
[data-mo-value] { display: flex; gap: var(--space-4); align-items: flex-start; }
[data-mo-value] svg { width: var(--space-5); height: var(--space-5); color: var(--accent-text); flex: 0 0 auto; }
[data-mo-value] h3 {
  font-size: var(--size-label);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--space-1);
}
[data-mo-value] p { font-size: var(--size-small); color: var(--muted); margin: 0; }

/* ── forms ───────────────────────────────────────────────────────────────── */

[data-mo-form] { max-width: var(--measure-form); }
[data-mo-field] { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
[data-mo-field] label {
  font-size: var(--size-interface);
  font-weight: var(--weight-semi);
  color: var(--ink);
}
[data-mo-optional] { font-weight: var(--weight-regular); color: var(--muted); }

[data-mo-field] input,
[data-mo-field] select,
[data-mo-field] textarea {
  font-family: var(--font-operating);
  font-size: var(--size-body);
  line-height: var(--leading-tight);
  color: var(--ink);
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-control);
  padding: var(--space-3) var(--space-4);
  min-height: var(--target-min);
  width: 100%;
}
[data-mo-field] textarea { min-height: var(--space-10); resize: vertical; }
[data-mo-field] input:focus-visible,
[data-mo-field] select:focus-visible,
[data-mo-field] textarea:focus-visible { border-color: var(--accent-text); }

[data-mo-help] { font-size: var(--size-small); color: var(--muted); }

[data-mo-consent] {
  font-size: var(--size-small);
  color: var(--muted);
  max-width: var(--measure);
}
[data-mo-consent] a:not([data-mo-button]) { color: var(--accent-text); }

[data-mo-submit-row] { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }

/* The honeypot. A bot fills it; a person never sees it and a screen reader never
 * reaches it. The browser checks assert all four of these properties. */
[data-mo-honeypot] {
  position: absolute;
  left: var(--offscreen);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── contact strip ───────────────────────────────────────────────────────── */

[data-mo-contact-row] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-8);
}
[data-mo-contact-item] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--size-small);
}
[data-mo-contact-item] svg { width: var(--space-5); height: var(--space-5); color: var(--accent-text); flex: 0 0 auto; }
[data-mo-contact-item] a:not([data-mo-button]) {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--ink);
}

/* ── footer ──────────────────────────────────────────────────────────────── */

[data-mo-footer] {
  background: var(--page);
  color: var(--ink);
  border-top: var(--border) solid var(--hairline);
  padding-block: var(--space-8);
}
[data-mo-footer-bottom] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--border) solid var(--hairline);
  font-size: var(--size-small);
  color: var(--muted);
}
[data-mo-footer-nav] ul { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
[data-mo-footer] a:not([data-mo-button]) { color: var(--muted); }
[data-mo-footer-tagline] {
  font-family: var(--font-display);
  font-size: var(--size-lede);
  font-style: italic;
  color: var(--ink);
  max-width: var(--measure);
  margin: 0;
}

/* ── wordmark ───────────────────────────────────────────────────────────
 * Set in the two text faces rather than shipped as artwork. The M. in the round
 * mark is a Didone and is neither face; that one stays a raster asset, used only
 * as the favicon and the touch icon. DESIGN.md records the difference.
 * A vector lockup from the designer would replace this. */

mo-wordmark {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  line-height: var(--leading-tight);
}
[data-mo-wordmark-name] {
  font-family: var(--font-display);
  font-size: var(--size-heading);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-nav);
  color: var(--accent-text);
}
[data-mo-wordmark-descriptor] {
  font-size: var(--size-label);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

/* The band lockup: a large gold M. over a tracked OFFICE, as in the comp. */
[data-mo-band-mark] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
[data-mo-band-mark-letter] {
  font-family: var(--font-display);
  font-size: var(--mark-lg);
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--accent-text);
}
[data-mo-band-mark-word] {
  font-size: var(--size-label);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ── 404 ─────────────────────────────────────────────────────────────────── */

[data-mo-empty] { max-width: var(--measure); }

/* ── anchors under a sticky header ───────────────────────────────────────
 * Without this the heading an anchor targets lands underneath the header. A
 * browser check asserts the target's top edge is visible after navigation. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-5)); }

/* ── reduced motion ──────────────────────────────────────────────────────
 * A kill switch, not a softening. S4 asserts the computed durations are zero. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ── print ───────────────────────────────────────────────────────────────── */

@media print {
  [data-mo-header], [data-mo-menu], [data-mo-skip], [data-mo-lang] { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
}