/* ============================================================
   weather.codyhurst.com — Accessible Weather Center identity layer
   Loads AFTER style.css and layers a Weather Channel broadcast look
   on top of the shared codyhurst.com house style.

   The look borrows three signatures from TWC hardware:
     - WeatherStar 4000 v2: orange-to-purple gradient, skewed header
       bars, and a floating content pane with a cyan glow edge.
     - IntelliStar 2 HD: translucent "glass" panels over a gradient.
     - Weatherscan / IntelliStar: the LDL crawl strip along the bottom.

   Every one of those is reproduced with contrast as the constraint
   rather than an afterthought:

     - Broadcast orange (#F58220) gives 2.4:1 against white, which
       fails at any size. The bars here run #C74A12 -> #A63410, where
       white lands at 5.4:1 and better. It reads as the same object.
     - Cyan (#38D6F0) is never text on a light surface. It is an edge,
       a rule, a glow — and on dark navy it is a 10:1 text colour.
     - Nothing anywhere is distinguished by colour alone; the gradient
       and the glow are decoration over content that stands without them.
   ============================================================ */

/* ------------------------------------------------------------------
   0. Typefaces
   ------------------------------------------------------------------
   Two families, both self-hosted, both licensed for it:

   - Star4000 / Star4000 Large — the authentic WeatherStar 4000 bitmap
     faces, from netbymatt/ws4kp (MIT). Used ONLY at display sizes.
     They are pixel fonts: gorgeous at 2rem and up, rough and tiring
     below that, so body copy never touches them.
   - Overpass — Red Hat's OFL face, drawn from the same FHWA Highway
     Gothic lineage as Interstate, which is what IntelliStar and the
     later Weatherscan generations actually used. It is the closest
     legitimate stand-in, and self-hosting is expressly permitted.

   Deliberately NOT here: Frutiger, Interstate, Akzidenz-Grotesk and
   Helvetica Neue. Those are commercial retail typefaces; serving them
   from a public web server is redistribution and none of their licences
   allow it. See fonts/README.txt.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Star4000';
  src: url('/fonts/Star4000.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Star4000 Large';
  src: url('/fonts/Star4000-Large.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Star4000 Extended';
  src: url('/fonts/Star4000-Extended.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Overpass';
  src: url('/fonts/Overpass-variable.woff2') format('woff2-variations'),
       url('/fonts/Overpass-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-sans:    'Overpass', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Overpass', 'Inter', system-ui, sans-serif;
  --font-star:    'Star4000 Large', 'Star4000', 'Overpass', monospace;
  --font-star-sm: 'Star4000', 'Overpass', monospace;
}

:root {
  /* Broadcast palette, contrast-corrected. */
  --twc-orange:        #c74a12;   /* white on this: 5.4:1  */
  --twc-orange-deep:   #a63410;   /* white on this: 7.4:1  */
  --twc-orange-bright: #f5811f;   /* decoration only, never behind text */
  --twc-purple:        #5b1f63;
  --twc-purple-deep:   #2b1b54;
  --twc-navy:          #0f2744;   /* shared with codyhurst.com */
  --twc-cyan:          #38d6f0;
  --twc-cyan-soft:     #7fe9ff;
  --twc-gold:          #ffd200;   /* WS4000 readout yellow — decoration */

  /* The signature WS4000 v2 backdrop. */
  --twc-gradient: linear-gradient(135deg,
                    var(--twc-orange) 0%,
                    #8f2a3c 38%,
                    var(--twc-purple) 68%,
                    var(--twc-purple-deep) 100%);

  /* A calmer version for interior sections. */
  --twc-gradient-quiet: linear-gradient(135deg,
                    var(--twc-navy) 0%,
                    var(--twc-purple-deep) 100%);

  --glow-cyan: 0 0 0 1px rgba(56,214,240,0.55),
               0 0 24px rgba(56,214,240,0.28),
               0 18px 40px rgba(0,0,0,0.35);
}

/* On the marketing pages the accent reads better as broadcast orange
   than the trading site's gold, in both themes. */
:root {
  --link:       #9c3a0e;          /* 5.6:1 on the light background */
  --link-hover: var(--twc-orange);
  --brand-accent: var(--twc-orange);
}
[data-theme="dark"] {
  --link:       var(--twc-cyan-soft);   /* 11:1 on #0b1220 */
  --link-hover: #b8f2ff;
  --brand-accent: var(--twc-cyan);
}

/* ------------------------------------------------------------------
   1. Header — a broadcast chrome bar rather than a plain white strip
   ------------------------------------------------------------------ */
.site-header {
  background: var(--twc-gradient-quiet);
  border-bottom: 3px solid var(--twc-orange);
  position: relative;
}
.site-header::after {
  /* The thin cyan underline that sits below the chrome on IS2. */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg,
      var(--twc-orange) 0%, var(--twc-orange-bright) 45%,
      var(--twc-cyan) 75%, var(--twc-cyan-soft) 100%);
}
.site-header .brand__name {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: var(--step-0);
}
.site-header .primary-nav a {
  color: #e9eef8;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: var(--step--1);
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  border-bottom: 3px solid transparent;
}
.site-header .primary-nav a:hover,
.site-header .primary-nav a:focus-visible {
  color: #fff;
  background: rgba(255,255,255,0.10);
}
/* Current page is marked by an underline bar AND by aria-current, so the
   cue is never colour alone. */
.site-header .primary-nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--twc-cyan);
  background: rgba(255,255,255,0.08);
}
.site-header .theme-toggle,
.site-header .nav-toggle {
  color: #fff;
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
}
.site-header .nav-toggle__icon,
.site-header .nav-toggle__icon::before,
.site-header .nav-toggle__icon::after { background: #fff; }

/* Focus has to stay obvious against the dark chrome. */
.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 3px solid var(--twc-gold);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   2. Hero — the WS4000 v2 floating pane over the gradient
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  background: var(--twc-gradient);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  isolation: isolate;
}

/* A faint concentric radar ring field, drawn in CSS so there is no image
   to load and nothing to go stale. Purely decorative. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% -10% auto auto;
  width: min(70vw, 46rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center,
      rgba(255,255,255,0.10) 0 2px,
      transparent 2px 46px);
  opacity: 0.7;
  pointer-events: none;
}

/* The rotating sweep arm. Frozen for anyone who asks for less motion. */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% -10% auto auto;
  width: min(70vw, 46rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      rgba(56,214,240,0.00) 0deg,
      rgba(56,214,240,0.00) 300deg,
      rgba(56,214,240,0.22) 352deg,
      rgba(127,233,255,0.42) 360deg);
  animation: awc-sweep 8s linear infinite;
  pointer-events: none;
}
@keyframes awc-sweep { to { transform: rotate(360deg); } }

.hero__inner--split { align-items: center; }

/* The floating cyan-edged pane the WS4000 v2 puts its content on. */
.hero__content {
  position: relative;
  background: rgba(11, 18, 32, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--twc-cyan);
  box-shadow: var(--glow-cyan);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.hero__kicker {
  color: var(--twc-gold);            /* 12:1 on the pane behind it */
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: var(--step--1);
  margin-bottom: 0.4rem;
}

/* The hero title is the one place the authentic bitmap face runs, and it
   only ever renders at --step-4 (36px+), well above the size where a
   pixel font stops being comfortable. */
.hero__title {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
  font-family: var(--font-star);
  font-weight: 400;                  /* the face has one weight; faux-bold smears it */
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.hero__title-line { display: block; }
.hero__title-line--accent { color: var(--twc-cyan-soft); }
.hero__tagline { color: #e6ecf6; font-size: var(--step-1); }
.hero__note {
  color: #cfd8e8;
  font-size: var(--step--1);
  margin-top: 1rem;
  margin-bottom: 0;
}
.hero .btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.06);
}
.hero .btn--ghost:hover,
.hero .btn--ghost:focus-visible { background: rgba(255,255,255,0.16); }
.hero .btn--primary {
  background: var(--twc-orange-bright);
  border-color: var(--twc-orange-bright);
  color: #2a1000;                      /* 8.9:1 — dark on bright orange */
  font-weight: 700;
}
.hero .btn--primary:hover,
.hero .btn--primary:focus-visible {
  background: #ffa04a;
  border-color: #ffa04a;
  color: #2a1000;
}
.hero a:focus-visible, .hero button:focus-visible {
  outline: 3px solid var(--twc-gold);
  outline-offset: 3px;
}

/* Screenshots get a CRT-ish bezel so they read as a broadcast feed. */
.hero__portrait {
  margin: 0;
  border-radius: 14px;
  padding: 10px;
  background: linear-gradient(160deg, #2b3a52, #0a1120);
  box-shadow: var(--glow-cyan);
}
.hero__portrait img {
  border-radius: 6px;
  display: block;
  width: 100%;
}

/* ------------------------------------------------------------------
   3. The LDL crawl — the strip along the bottom of a TWC display
   ------------------------------------------------------------------
   Moving content that runs longer than five seconds needs a way to stop
   it (WCAG 2.2.2), so this ships with a real Pause button, and it never
   starts at all under prefers-reduced-motion. The text is decorative and
   duplicated by the page itself, so it is aria-hidden — but the control
   is not, because a keyboard user has to be able to reach it.
   ------------------------------------------------------------------ */
.ldl {
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, #16233c, #0b1220);
  border-top: 2px solid var(--twc-cyan);
  border-bottom: 2px solid var(--twc-orange);
  overflow: hidden;
}
.ldl__label {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  background: linear-gradient(180deg, var(--twc-orange), var(--twc-orange-deep));
  color: #fff;
  font-family: var(--font-star-sm);
  font-weight: 400;
  font-size: var(--step-0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ldl__viewport { flex: 1 1 auto; overflow: hidden; position: relative; }
.ldl__track {
  display: inline-flex;
  gap: 3rem;
  padding: 0.55rem 0;
  white-space: nowrap;
  color: #dbe4f4;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  will-change: transform;
  animation: awc-crawl 48s linear infinite;
}
.ldl__track > span::before {
  content: "\25C6";                 /* the diamond separator TWC used */
  color: var(--twc-gold);
  margin-right: 0.75rem;
}
.ldl.is-paused .ldl__track { animation-play-state: paused; }
@keyframes awc-crawl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ldl__pause {
  flex: none;
  border: 0;
  border-left: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0 0.9rem;
  cursor: pointer;
}
.ldl__pause:hover { background: rgba(255,255,255,0.18); }
.ldl__pause:focus-visible { outline: 3px solid var(--twc-gold); outline-offset: -3px; }

/* ------------------------------------------------------------------
   3a. Buttons
   ------------------------------------------------------------------
   The shared .btn--primary fills with --brand-primary, which is the house
   navy. On a dark-theme page that is navy on near-navy and the button all
   but disappears. Broadcast orange reads on both themes: white on
   #c74a12 is 5.4:1, and it is the same object either way.
   ------------------------------------------------------------------ */
.btn--primary {
  background: var(--twc-orange);
  border-color: var(--twc-orange);
  color: #fff;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--twc-orange-deep);
  border-color: var(--twc-orange-deep);
  color: #fff;
}
.btn--ghost {
  color: var(--text);
  border-color: var(--text-muted);
  background: transparent;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--twc-orange);
  border-color: var(--twc-orange);
  color: #fff;
}
.btn:focus-visible { outline: 3px solid var(--twc-cyan); outline-offset: 2px; }

/* ------------------------------------------------------------------
   3b. "On this page" jump nav
   ------------------------------------------------------------------
   The shared stylesheet this site builds on has no .page-toc rules — it
   came from the trade site, which has no such nav — so it is styled here
   rather than left rendering as a bare bulleted list.
   ------------------------------------------------------------------ */
.page-toc {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.page-toc ul {
  list-style: none;
  margin: 0 auto;
  padding: 0.75rem var(--gap);
  max-width: var(--container);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  align-items: center;
}
.page-toc li { margin: 0; }
.page-toc a {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.page-toc a:hover,
.page-toc a:focus-visible {
  border-color: var(--twc-orange);
  background: var(--surface);
  color: var(--link-hover);
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) { .page-toc a { transition: none; } }

/* ------------------------------------------------------------------
   4. Section chrome — the skewed WS4000 header bar
   ------------------------------------------------------------------
   The box is skewed and the text is counter-skewed, so the letterforms
   stay upright and crisp instead of being sheared.
   ------------------------------------------------------------------ */
.section__title {
  position: relative;
  display: block;
  margin-bottom: 1.25rem;
  padding-bottom: 0.65rem;
}
.section__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 5.5rem; height: 5px;
  background: linear-gradient(90deg, var(--twc-orange-bright), var(--twc-cyan));
  border-radius: 2px;
}

/* Page-head banners on the interior pages get the full treatment. */
.section--page-head {
  background: var(--twc-gradient-quiet);
  color: #fff;
  border-bottom: 3px solid var(--twc-orange);
  padding-block: clamp(2rem, 4vw, 3.25rem);
}
.section--page-head h1 { color: #fff; }
.section--page-head .kicker {
  display: inline-block;
  background: linear-gradient(180deg, var(--twc-orange), var(--twc-orange-deep));
  color: #fff;
  font-family: var(--font-star-sm);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--step-0);
  padding: 0.35rem 1.4rem 0.35rem 0.9rem;
  transform: skewX(-12deg);
  margin-bottom: 0.9rem;
}
.section--page-head .kicker > span { display: inline-block; transform: skewX(12deg); }
.section--page-head .lead,
.section--page-head p { color: #dfe7f5; }
.section--page-head a { color: var(--twc-cyan-soft); }

/* Alternating sections keep a faint gradient so the page has depth
   without ever putting body text on a busy background. */
.section--alt {
  background:
    linear-gradient(180deg, rgba(199,74,18,0.05), rgba(43,27,84,0.05)),
    var(--surface-alt);
}
[data-theme="dark"] .section--alt {
  background:
    linear-gradient(180deg, rgba(245,129,31,0.07), rgba(56,214,240,0.05)),
    var(--surface-alt);
}

/* The closing call-to-action is the one interior block that goes full
   broadcast, to bookend the hero. */
.section--cta {
  background: var(--twc-gradient);
  color: #fff;
  border-top: 3px solid var(--twc-cyan);
}
.section--cta h2 { color: #fff; }
.section--cta p { color: #f0f4fb; }
.section--cta a:not(.btn) { color: var(--twc-gold); }
.section--cta .btn--primary {
  background: #fff; border-color: #fff; color: #2b1b54; font-weight: 700;
}
.section--cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.7); }
.section--cta a:focus-visible {
  outline: 3px solid var(--twc-gold); outline-offset: 3px;
}

/* ------------------------------------------------------------------
   5. Cards as IntelliStar 2 glass panels
   ------------------------------------------------------------------ */
.feature-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--twc-orange);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.feature-card:hover,
.feature-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-top-color: var(--twc-cyan);
}
.feature-card h3 {
  font-size: var(--step-1);
  letter-spacing: 0.01em;
}
.feature-card h3::before {
  /* Small broadcast tick before each card heading. */
  content: "";
  display: inline-block;
  width: 0.55rem; height: 0.55rem;
  margin-right: 0.5rem;
  background: var(--twc-orange-bright);
  transform: skewX(-12deg);
}
[data-theme="dark"] .feature-card { background: var(--surface); }

@media (prefers-reduced-motion: reduce) {
  .feature-card { transition: none; }
  .feature-card:hover, .feature-card:focus-within { transform: none; }
}

/* ------------------------------------------------------------------
   6. Comparison table
   ------------------------------------------------------------------ */
.table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
.compare-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.compare-table th, .compare-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.compare-table thead th {
  background: linear-gradient(180deg, var(--twc-orange), var(--twc-orange-deep));
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--step--1);
}
.compare-table tbody th[scope="row"] {
  font-weight: 700;
  color: var(--text);
  width: 22%;
}
.compare-table .muted { color: var(--text-muted); font-weight: 400; font-size: var(--step--1); }
.compare-table tbody tr:nth-child(even) { background: var(--surface-alt); }
/* Our own row is marked by a heavy left rule and a label, not by colour. */
.compare-table__self { background: var(--surface-alt); }
.compare-table__self th[scope="row"] { border-left: 5px solid var(--twc-cyan); }
.compare-table__self th[scope="row"]::after {
  content: " (this app)";
  color: var(--text-muted);
  font-weight: 400;
  font-size: var(--step--1);
}

/* ------------------------------------------------------------------
   7. Definition lists (radar lenses, settings, donations)
   ------------------------------------------------------------------ */
.def-list { margin: 0 0 1.5rem; }
.def-list dt {
  font-weight: 700;
  color: var(--text);
  margin-top: 1rem;
  padding-left: 0.85rem;
  border-left: 4px solid var(--twc-orange-bright);
}
.def-list dd { margin: 0.25rem 0 0 1.1rem; color: var(--text-muted); }

/* Donation addresses need to be selectable and wrap safely. */
.donations dt {
  font-weight: 700;
  margin-top: 1.1rem;
  padding-left: 0.85rem;
  border-left: 4px solid var(--twc-cyan);
}
.donations dd { margin: 0.35rem 0 0 0; }
.donations code {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  word-break: break-all;
  user-select: all;
}

/* ------------------------------------------------------------------
   8. Screenshot gallery — each shot in its own bezel
   ------------------------------------------------------------------ */
.app-card__gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}
.app-card__gallery a {
  display: block;
  border-radius: 12px;
  padding: 8px;
  background: linear-gradient(160deg, #2b3a52, #0a1120);
  box-shadow: var(--shadow-md);
  transition: transform var(--t), box-shadow var(--t);
}
.app-card__gallery a:hover,
.app-card__gallery a:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--glow-cyan);
}
.app-card__gallery img { border-radius: 5px; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .app-card__gallery a { transition: none; }
  .app-card__gallery a:hover, .app-card__gallery a:focus-visible { transform: none; }
}

/* Caption under the hero screenshot. */
.hero__caption {
  margin: 0.7rem 0 0;
  color: #cfd8e8;
  font-size: var(--step--1);
  text-align: center;
  font-style: italic;
}

/* ------------------------------------------------------------------
   8b. Captioned screenshot grid
   ------------------------------------------------------------------ */
.shot-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
}
.shot-grid > li { margin: 0; }
.shot-grid a {
  display: block;
  border-radius: 12px;
  padding: 8px;
  background: linear-gradient(160deg, #2b3a52, #0a1120);
  box-shadow: var(--shadow-md);
  transition: transform var(--t), box-shadow var(--t);
}
.shot-grid a:hover,
.shot-grid a:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--glow-cyan);
}
.shot-grid img { border-radius: 5px; width: 100%; }
.shot-grid__caption {
  margin: 0.65rem 0 0;
  font-size: var(--step--1);
  color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .shot-grid a { transition: none; }
  .shot-grid a:hover, .shot-grid a:focus-visible { transform: none; }
}

/* ------------------------------------------------------------------
   9. Downloads
   ------------------------------------------------------------------ */
.dl-group { margin-bottom: 2rem; }
.dl-group__title {
  display: inline-block;
  background: linear-gradient(180deg, var(--twc-orange), var(--twc-orange-deep));
  color: #fff;
  font-size: var(--step-0);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 1.3rem 0.3rem 0.85rem;
  transform: skewX(-12deg);
  margin-bottom: 0.9rem;
}
.dl-group__title > span { display: inline-block; transform: skewX(12deg); }
.dl-table { width: 100%; border-collapse: collapse; }
.dl-table th, .dl-table td {
  padding: 0.7rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.dl-table thead th {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--twc-orange);
}
.dl-table code { font-family: var(--font-mono); font-size: 0.8em; word-break: break-all; }

/* The "nothing published yet" state, which is the current one. */
.notice {
  border: 1px solid var(--border);
  border-left: 5px solid var(--twc-orange);
  background: var(--surface-alt);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.notice > :last-child { margin-bottom: 0; }
.notice--info { border-left-color: var(--twc-cyan); }

/* ------------------------------------------------------------------
   10. Theme gallery (the ten hardware eras)
   ------------------------------------------------------------------ */
.era-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.era-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* Each era gets a swatch strip in its own period palette. Decorative —
   the era's colours are also written out in the card text. */
.era-card__swatch { height: 8px; }
.era-card__body { padding: 1.1rem 1.25rem; }
.era-card h3 { font-size: var(--step-1); margin-bottom: 0.15rem; }
.era-card__years {
  color: var(--text-muted);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}
.era-card dl { margin: 0.75rem 0 0; font-size: var(--step--1); }
.era-card dt { font-weight: 700; color: var(--text-muted); }
.era-card dd { margin: 0 0 0.5rem; }

/* ------------------------------------------------------------------
   11. Docs
   ------------------------------------------------------------------ */
.doc-article h2 {
  border-bottom: 2px solid var(--border);
  padding-bottom: 0.35rem;
  margin-top: 2.25rem;
}
.doc-article h2::before {
  content: "";
  display: inline-block;
  width: 0.5rem; height: 1em;
  margin-right: 0.55rem;
  vertical-align: -0.1em;
  background: linear-gradient(180deg, var(--twc-orange-bright), var(--twc-orange));
  transform: skewX(-12deg);
}
.doc-toc { border-left: 3px solid var(--twc-orange); }
.doc-article table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.doc-article th, .doc-article td {
  border: 1px solid var(--border); padding: 0.5rem 0.7rem; text-align: left;
}
.doc-article thead th { background: var(--surface-alt); }
.doc-article code {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05em 0.35em;
  font-size: 0.9em;
}
.doc-article pre { overflow-x: auto; background: var(--surface-alt); padding: 1rem; border-radius: var(--radius); }
.doc-article pre code { border: 0; background: none; padding: 0; }

/* Keyboard reference */
.keys-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.keys-table th, .keys-table td {
  padding: 0.6rem 0.85rem; text-align: left; border-bottom: 1px solid var(--border);
}
.keys-table thead th {
  background: linear-gradient(180deg, var(--twc-orange), var(--twc-orange-deep));
  color: #fff; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step--1);
}
.keys-table td:first-child { white-space: nowrap; width: 1%; }
.keys-table tbody tr:nth-child(even) { background: var(--surface-alt); }

/* ------------------------------------------------------------------
   12. Motion policy
   ------------------------------------------------------------------
   One block, at the end, so it wins. Everything decorative stops.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero::after { animation: none; opacity: 0.25; }
  .ldl__track { animation: none; transform: none; }
}

/* Older engines without backdrop-filter get a solid pane rather than a
   washed-out translucent one, so contrast holds either way. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .hero__content { background: rgba(11, 18, 32, 0.92); }
}

/* Windows High Contrast / forced colours: drop the decoration entirely
   and let the OS palette through. */
@media (forced-colors: active) {
  .hero, .section--cta, .section--page-head, .site-header { background: Canvas; color: CanvasText; }
  .hero__content { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
  .hero::before, .hero::after, .ldl { display: none; }
  .section__title::after, .feature-card h3::before, .doc-article h2::before { forced-color-adjust: none; background: Highlight; }
}