/* ============================================================================
   801 S Chester — core: reset, base elements, layout, components.
   Layer 2 of 3.  Load AFTER tokens.css, BEFORE the theme files.

   RULE: not one raw colour value below this line. Every colour is a semantic
   token from tokens.css, so a theme file can repaint the whole system without
   touching this file. If a component needs a colour that has no semantic
   token, the token is missing — add it, do not inline a hex.

   Mobile-first. Every media query is min-width. There is no max-width query.
   Breakpoints: 480 / 768 / 1024.
   ============================================================================ */

/* --- reset -------------------------------------------------------------- */

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

body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, legend {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

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

/* Controls do not inherit type by default in any browser. */
input, select, textarea, button { font: inherit; color: inherit; }

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

/* --- base --------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* Any element carrying a theme paints its own background. Without this a
   themed block inherits the page's background and the focus ring inside it
   is measured against the wrong colour — the contrast numbers in the README
   assume every [data-theme] block is opaque. */
[data-theme] {
  background-color: var(--surface);
  color: var(--text);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-normal);
  letter-spacing: var(--display-tracking);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

h1 { font-size: var(--fs-6); line-height: var(--lh-tight); text-transform: var(--display-transform); }
h2 { font-size: var(--fs-4); line-height: var(--lh-tight); text-transform: var(--display-transform); }
h3 { font-size: var(--fs-2); }
h4 { font-size: var(--fs-1); }

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

a { color: inherit; text-underline-offset: 0.2em; }

strong, b { font-weight: var(--fw-bold); }

address { font-style: normal; }

hr {
  border: 0;
  border-top: var(--bw-hair) solid var(--border);
  margin-block: var(--sp-6);
}

/* One focus treatment for everything. --focus-ring is measured against each
   theme's --surface at ≥3:1 (SC 1.4.11); the 2px offset means the ring is
   always compared to the surface behind the control, never to the control. */
:focus-visible {
  outline: var(--bw-focus) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-1);
}

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


/* --- utilities ---------------------------------------------------------- */
/* These exist because `style-src 'self'` blocks the style="…" ATTRIBUTE, not
   only inline <style> blocks. Under this CSP a one-off inline style is
   silently dropped in production and the page looks right only in the
   prototype. There is no style="…" anywhere in components.html or index.html
   for that reason; every one-off is a class here. */

.u-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mb-0 { margin-bottom: 0; }

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.u-measure    { max-width: var(--measure); }
.u-muted      { color: var(--text-muted); }
.u-caption    { font-size: var(--fs--1); color: var(--text-muted); }
.u-mono       { font-family: var(--font-mono); letter-spacing: var(--tracking-wide); }

.u-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}

/* Vertical rhythm helper. --stack-gap is set per instance. */
.u-stack > * + * { margin-top: var(--stack-gap, var(--sp-4)); }
.u-stack--lg { --stack-gap: var(--sp-5); }


/* --- layout ------------------------------------------------------------- */

.l-wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-section { padding-block: var(--sp-section); }

.l-band {
  background-color: var(--surface-sunken);
  color: var(--text);
}

/* Auto-fitting grid. Cards reflow at their own content width — no breakpoint
   needed for the common two/three-up case. */
.l-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min, 16rem)), 1fr));
}
.l-grid--sm { --col-min: 7rem; }
.l-grid--md { --col-min: 13rem; }
.l-grid--lg { --col-min: 18rem; }
.l-grid--xl { --col-min: 20rem; }

@media (min-width: 768px) {
  :root { --gutter: var(--sp-5); }
  .l-grid { gap: var(--sp-5); }
}


/* --- skip link ---------------------------------------------------------- */

.c-skip {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  color: var(--text);
  border: var(--bw-thick) solid var(--focus-ring);
  border-radius: var(--radius-control);
  transform: translateY(-200%);
}
.c-skip:focus { transform: none; }


/* --- brand mark --------------------------------------------------------- */

.c-mark {
  display: block;
  width: auto;
  height: 2rem;
  color: var(--accent);
  flex: none;
}
.c-mark--lg { height: var(--fs-display); }
.c-mark--inverse { color: var(--accent-on-inverse); }


/* --- header / nav ------------------------------------------------------- */
/* Deliberately NOT sticky. A sticky header is the usual way a build fails
   WCAG 2.2 SC 2.4.11 (Focus Not Obscured) — tabbing scrolls the focused
   control under it. Static costs nothing here and removes the failure mode. */

.c-header {
  border-bottom: var(--bw-hair) solid var(--border-control);
  background: var(--surface);
}

.c-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  min-height: 64px;
  padding-block: var(--sp-3);
}

.c-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-right: auto;
  min-height: var(--target-min);
  text-decoration: none;
}

.c-header__name {
  font-family: var(--font-display);
  font-size: var(--fs-1);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--display-transform);
  line-height: 1.1;
}

.c-header__sub {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs--1);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.c-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-5);
}

/* No hamburger. A menu that opens needs JavaScript; the nav is four links, so
   it wraps to a second row on a 360px screen instead. */
.c-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-size: var(--fs--1);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
}
.c-nav__link:hover { color: var(--text); text-decoration: underline; }
.c-nav__link[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}


/* --- footer ------------------------------------------------------------- */

.c-footer {
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
  padding-block: var(--sp-7);
  /* Footer is an inverted island inside a light page: repoint the tokens
     its children read so .c-link, .u-muted and :focus-visible stay correct. */
  --text: var(--text-on-inverse);
  --text-muted: var(--text-muted-on-inverse);
  --accent: var(--accent-on-inverse);
  --surface: var(--surface-inverse);
  --focus-ring: var(--text-on-inverse);   /* ≥14.2:1 on every theme's inverse */
  --border: var(--border-on-inverse);
  --border-control: var(--border-control-on-inverse);
}

.c-footer a { color: var(--text-on-inverse); }
.c-footer h3 { font-size: var(--fs-0); letter-spacing: var(--tracking-wide); }

.c-footer__grid {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .c-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.c-footer__legal {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: var(--bw-hair) solid var(--border);
  font-size: var(--fs--1);
  color: var(--text-muted-on-inverse);
}

/* G4 / J5: "Powered by StratosDigital.ai" on the tracked link. */
.c-attribution {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-size: var(--fs--1);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted-on-inverse);
}
.c-attribution a {
  color: var(--text-on-inverse);
  font-weight: var(--fw-bold);
  text-decoration: underline;
}


/* --- buttons ------------------------------------------------------------ */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding: var(--sp-3) var(--sp-5);
  border: var(--bw-thick) solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--fs-0);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--display-transform);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.c-btn--primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.c-btn--primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }

.c-btn--secondary {
  background-color: transparent;
  border-color: var(--border-control);
  color: var(--text);
}
.c-btn--secondary:hover { border-color: var(--accent); }

.c-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text);
  text-decoration: underline;
  padding-inline: var(--sp-2);
}

.c-btn--lg { font-size: var(--fs-1); padding: var(--sp-4) var(--sp-6); min-height: 56px; }
.c-btn--block { width: 100%; }

.c-btn[aria-disabled="true"],
.c-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.c-btn__arrow { font-size: 1.1em; line-height: 1; }

/* Standalone text link, used where a button would over-weight the page. */
.c-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--text);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.c-link:hover { text-decoration-color: var(--accent); }

/* Phone numbers are the highest-intent control on the apex. They get button
   sizing without button weight. */
.c-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--target-min);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--tracking-wide);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}


/* --- card --------------------------------------------------------------- */

.c-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background-color: var(--surface-raised);
  border: var(--bw-hair) solid var(--border-control);
  border-radius: var(--radius-card);
}

.c-card__title { font-size: var(--fs-2); }
.c-card__body  { color: var(--text-muted); }
.c-card > .c-btn { margin-top: auto; }

/* An interactive card. The border is --border-control (≥3:1 on every surface
   in both themes) because SC 1.4.11 covers the visual boundary of a control. */
.c-card--action:hover { border-color: var(--accent); }


/* --- price block -------------------------------------------------------- */

.c-price {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.c-price__amount {
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  font-family: var(--font-display);
  font-size: var(--fs-6);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--accent);
}
.c-price__currency { font-size: 0.45em; }
/* "/month" is the billing frequency, which the automatic-renewal statutes
   require to be conspicuous. Fixed at --fs-0, not a fraction of the numeral. */
.c-price__cadence  { font-family: var(--font-body); font-size: var(--fs-0);
                     font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide);
                     color: var(--text); }

/* The renewal sentence. --fs-0, never --fs--1: several state automatic-renewal
   statutes require the disclosure be no less prominent than what surrounds it,
   and this component is the one that sits next to the card field. */
.c-price__terms {
  font-size: var(--fs-0);
  line-height: var(--lh-loose);
  color: var(--text);
  max-width: var(--measure);
}


/* --- form: field + label + hint + error --------------------------------- */

.c-field { display: block; margin-bottom: var(--sp-5); }

.c-field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.c-field__req {
  margin-left: var(--sp-2);
  font-weight: var(--fw-normal);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.c-field__hint {
  margin-bottom: var(--sp-2);
  font-size: var(--fs--1);
  color: var(--text-muted);
}

.c-field__input,
.c-field__select,
.c-field__textarea {
  display: block;
  width: 100%;
  min-height: var(--target-min);
  padding: var(--sp-3);
  background-color: var(--surface);
  color: var(--text);
  /* 16px minimum. iOS Safari zooms the viewport on focus below 16px, which
     reads as a layout bug and cannot be undone without a JS scroll fix. */
  font-size: var(--fs-0);
  border: var(--bw-hair) solid var(--border-control);
  border-radius: var(--radius-control);
}

.c-field__textarea { min-height: 8rem; resize: vertical; }

.c-field__input::placeholder,
.c-field__textarea::placeholder { color: var(--text-muted); opacity: 1; }

/* Native select arrow is left alone: replacing it needs a background image
   (img-src 'self' — a data: URI would work, but it is not worth the bytes)
   and the native control is already keyboard- and screen-reader-correct. */
.c-field__select { padding-right: var(--sp-6); }

/* Error state. Colour is never the only signal (SC 1.4.1): the border
   thickens 1px → 2px, the message is present in the DOM, and it is prefixed
   with a literal word, not an icon font. */
.c-field--invalid .c-field__input,
.c-field--invalid .c-field__select,
.c-field--invalid .c-field__textarea {
  border-width: var(--bw-thick);
  border-color: var(--danger);
}

.c-field__error {
  margin-top: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: var(--bw-focus) solid var(--danger);
  font-size: var(--fs-0);
  font-weight: var(--fw-medium);
  color: var(--danger);
}

.c-fieldset { border: 0; margin-bottom: var(--sp-6); }

.c-fieldset__legend {
  display: block;
  width: 100%;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: var(--bw-hair) solid var(--border);
  font-family: var(--font-display);
  font-size: var(--fs-2);
}

/* Two fields side by side from 480px. */
.c-field-row { display: grid; gap: 0 var(--sp-4); }
@media (min-width: 480px) { .c-field-row { grid-template-columns: 1fr 1fr; } }


/* --- date entry --------------------------------------------------------- */

/* Booking date: native input[type=date]. Submits without JavaScript, gets
   min/max validation for free, and the OS picker is already accessible. The
   popup itself cannot be styled — that is the trade and it is worth it. */
.c-datefield { max-width: 18rem; }

/* Date of birth: three selects, not input[type=date]. A date picker opens on
   the current month, so a 1979 birthday is ~45 interactions away. Selects are
   3. Same no-JS submit, same native a11y. Server rebuilds and validates the
   date — three separate fields cannot be trusted as a date. */
.c-dob { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.c-dob__part { flex: 1 1 6rem; }
.c-dob__part--year { flex: 1 1 7rem; }
.c-dob__part label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs--1);
  color: var(--text-muted);
}


/* --- checkbox group ----------------------------------------------------- */

.c-checkgroup { display: flex; flex-direction: column; gap: var(--sp-2); }

.c-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  /* The whole row is the target, not just the box. 44px floor. */
  min-height: var(--target-min);
  padding: var(--sp-3);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.c-check:hover { border-color: var(--border-control); }

.c-check__box {
  width: 24px;
  height: 24px;
  margin: 0;
  /* Aligns the box to the cap height of the first line of label text. */
  margin-top: 0.15em;
  accent-color: var(--accent);
  border: var(--bw-hair) solid var(--border-control);
  flex: none;
}

.c-check__text { font-size: var(--fs-0); line-height: var(--lh-loose); }
.c-check__text small { display: block; font-size: var(--fs--1); color: var(--text-muted); }


/* --- required acceptance ------------------------------------------------ */
/* The auto-renewal pattern. Structurally separate from .c-checkgroup — it is
   never a sibling in the same stack as the marketing consents, because a
   consent that sits in a list of optional consents reads as optional, which
   is the defect the state statutes exist to catch.
   Order on the page: renewal terms → THIS → card field → marketing consents. */

.c-acknowledge {
  margin-block: var(--sp-5);
  padding: var(--sp-5);
  background-color: var(--surface-sunken);
  border: var(--bw-thick) solid var(--accent);
  border-left-width: 6px;
  border-radius: var(--radius-card);
}

.c-acknowledge__terms {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-0);
  line-height: var(--lh-loose);
}

.c-acknowledge .c-check {
  background-color: var(--surface);
  border-color: var(--border-control);
  border-width: var(--bw-thick);
}
.c-acknowledge .c-check__text { font-weight: var(--fw-bold); }


/* --- notice / alert ----------------------------------------------------- */

.c-notice {
  padding: var(--sp-4) var(--sp-5);
  border: var(--bw-hair) solid var(--border-control);
  border-left: 6px solid var(--accent);
  border-radius: var(--radius-card);
  background-color: var(--surface-raised);
}

.c-notice__title {
  margin-bottom: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.c-notice p { font-size: var(--fs-0); }
.c-notice--ok     { border-left-color: var(--ok); }
.c-notice--warn   { border-left-color: var(--warn); }
.c-notice--danger { border-left-color: var(--danger); }
.c-notice--ok     .c-notice__title { color: var(--ok); }
.c-notice--warn   .c-notice__title { color: var(--warn); }
.c-notice--danger .c-notice__title { color: var(--danger); }


/* --- fact list ---------------------------------------------------------- */

.c-facts { display: grid; gap: var(--sp-3); }
.c-facts > div {
  display: grid;
  gap: var(--sp-1);
  padding-block: var(--sp-3);
  border-top: var(--bw-hair) solid var(--border);
}
.c-facts dt {
  font-size: var(--fs--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.c-facts dd { margin: 0; font-size: var(--fs-1); }

@media (min-width: 480px) {
  .c-facts > div { grid-template-columns: 14rem 1fr; gap: var(--sp-4); align-items: baseline; }
}


/* --- door (apex only) --------------------------------------------------- */
/* A full-width themed panel. Each door carries its own [data-theme], so the
   two businesses appear in their own colours in one viewport — which is the
   fastest possible answer to "which one do I want". */

/* Apex hero. The address is the headline, because the address is the question
   the page exists to answer. */
.c-hero { padding-block: var(--sp-7) var(--sp-8); }
.c-hero__inner { display: grid; gap: var(--sp-5); }
.c-hero h1 { font-size: var(--fs-7); }
.c-hero__lede { font-size: var(--fs-2); color: var(--text-muted); max-width: 28ch; }
.c-hero__watermark { opacity: 0.18; }
@media (min-width: 768px) {
  .c-hero__inner { grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-8); }
}

.c-door { padding-block: var(--sp-8); }

.c-door__inner {
  display: grid;
  gap: var(--sp-5);
}

.c-door__main  { display: grid; gap: var(--sp-4); align-content: start; }
.c-door__aside { display: grid; gap: var(--sp-5); align-content: start; }

.c-door__eyebrow {
  font-size: var(--fs--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.c-door__name {
  font-size: var(--fs-6);
  line-height: var(--lh-tight);
  text-transform: var(--display-transform);
}

.c-door__what { font-size: var(--fs-1); color: var(--text-muted); max-width: 34ch; }

.c-door__actions { display: grid; gap: var(--sp-3); }

.c-door__points { display: grid; gap: var(--sp-2); }
.c-door__points li {
  padding-left: var(--sp-5);
  position: relative;
  color: var(--text-muted);
}
.c-door__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: var(--sp-3);
  height: 2px;
  background: var(--accent);
}

@media (min-width: 768px) {
  .c-door__inner { grid-template-columns: 1.15fr 1fr; gap: var(--sp-8); align-items: start; }
  .c-door__actions { grid-template-columns: auto auto; justify-content: start; align-items: center; gap: var(--sp-5); }
  .c-door__aside { padding-top: var(--sp-2); }
}


/* --- specimen sheet only ------------------------------------------------ */

.x-spec { padding-block: var(--sp-6); border-top: var(--bw-hair) solid var(--border); }
.x-spec__label {
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.x-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.x-pair { display: grid; gap: var(--sp-4); }
.x-pair > [data-theme] { padding: var(--sp-5); border: var(--bw-hair) solid var(--border-control); }
@media (min-width: 768px) { .x-pair { grid-template-columns: 1fr 1fr; align-items: start; } }
.x-pair__head {
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: var(--bw-hair) solid var(--border);
}
.x-swatch { display: grid; gap: var(--sp-1); font-size: var(--fs--1); }
.x-swatch__chip {
  width: 100%;
  height: 3rem;
  border: var(--bw-hair) solid var(--border-control);
  border-radius: var(--r-1);
}
.x-swatch__chip--surface { background: var(--surface); }
.x-swatch__chip--raised  { background: var(--surface-raised); }
.x-swatch__chip--sunken  { background: var(--surface-sunken); }
.x-swatch__chip--inverse { background: var(--surface-inverse); }
.x-swatch__chip--accent  { background: var(--accent); }
.x-swatch__chip--text    { background: var(--text); }
.x-swatch__chip--muted   { background: var(--text-muted); }
.x-swatch__chip--border  { background: var(--border-control); }
.x-scale > * { margin-block: var(--sp-2); }
.x-panel { padding: var(--sp-5); border: var(--bw-hair) solid var(--border-control); }
.x-half  { flex: 1 1 20rem; }
.x-display {
  font-family: var(--font-display);
  font-size: var(--fs-7);
  font-weight: var(--fw-normal);
  line-height: var(--lh-tight);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-tracking);
}