@fluid-theme/core 0.4.3 → 2.1.0

package/src/core/base.css

@@ -1,10 +1,11 @@
 /**
- * Fluid Framework - Base Element Styles
+ * Fluid Theme - Base Element Styles
  * @layer base
  *
- * Default styles for native HTML elements.
- * These establish the rhythm and feel without requiring classes.
- * Every element should feel intentional, refined, unhurried.
+ * Native elements, no classes needed. A quality-press page: a serif for
+ * display and headings, a grotesk for text and labels, one accent used like
+ * spice, square corners, no shadows. Nothing moves on hover except colour
+ * and underline.
  */
 
 @layer base {
@@ -13,11 +14,12 @@
      ======================================== */
 
   body {
-    font-family: var(--font-body, var(--font-system));
-    font-size: var(--font-size-base);
-    line-height: var(--leading-normal);
+    font-family: var(--font-body);
+    font-size: var(--step-0);
+    line-height: var(--leading-body);
     color: var(--color-text);
     background-color: var(--color-background);
+    text-wrap: pretty;
   }
 
   ::selection {
@@ -27,88 +29,141 @@
 
 
   /* ========================================
-     TYPOGRAPHY - Headings
-     Confident but not aggressive
+     HEADINGS
+     A big, obvious ladder: serif h1-h3 at the scale's top, a change of face
+     at h4, the label voice at h5 and h6. Every weight adds --_dark-weight
+     (30 in dark mode and on dark bands).
      ======================================== */
 
   h1, h2, h3, h4, h5, h6 {
-    font-family: var(--font-heading, var(--font-system));
     color: var(--color-text);
-    font-weight: var(--weight-semibold);
-    line-height: var(--leading-tight);
-    letter-spacing: var(--tracking-tight);
-    margin-block-start: 0;
-    margin-block-end: var(--space-4);
-  }
-
-  h1 {
-    font-size: var(--font-size-4xl);
-    font-weight: var(--weight-bold);
-    letter-spacing: -0.03em;
-  }
-
+    margin-block: 0 var(--space-4);
+  }
+
+  /* The trim is over the cap height only: trimming the alphabetic baseline
+     too let descenders (p, q, g) hang into the next block at display sizes. */
+  h1, h2, h3 {
+    font-family: var(--font-heading);
+    font-weight: calc(var(--weight-display) + var(--_dark-weight));
+    line-height: var(--leading-heading);
+    text-wrap: balance;
+    text-box: trim-start cap alphabetic;
+  }
+
+  /* --h1-size, --h2-size, --h3-size (knobs, no default) set a heading's
+     size outright; unset, the steps. legacy-1x sets them to the 1.x clamps,
+     so the steps (also the nav brand, lede, card title) keep their values. */
+  h1 { font-size: var(--h1-size, var(--step-4)); letter-spacing: var(--tracking-tight); }
+  /* --weight-heading (a knob, no default) sets h2 and h3 to one weight;
+     unset, h2 follows the display weight and h3 sits 100 above it, but
+     never above 700 unless the display is (display 700 gives h3 700, not
+     an h3 heavier than its h2). */
   h2 {
-    font-size: var(--font-size-3xl);
-    letter-spacing: -0.02em;
+    font-size: var(--h2-size, var(--step-2));
+    font-weight: calc(var(--weight-heading, var(--weight-display)) + var(--_dark-weight));
+    letter-spacing: var(--tracking-heading);
   }
-
   h3 {
-    font-size: var(--font-size-2xl);
-    letter-spacing: -0.015em;
+    font-size: var(--h3-size, var(--step-1));
+    font-weight: calc(var(--weight-heading, min(var(--weight-display) + 100, max(var(--weight-display), 700))) + var(--_dark-weight));
+    letter-spacing: var(--tracking-normal);
   }
 
   h4 {
-    font-size: var(--font-size-xl);
-    letter-spacing: var(--tracking-tight);
-  }
-
-  h5 {
+    font-family: var(--font-body);
     font-size: var(--font-size-lg);
-    font-weight: var(--weight-medium);
-    letter-spacing: var(--tracking-normal);
+    font-weight: calc(650 + var(--_dark-weight));
+    line-height: 1.3;
+  }
+
+  /* The label voice: every small uppercase label is this one rule. Longhands,
+     so nothing else is reset; lining but proportional figures (tabular ones
+     gap the comma: "GOGH , 1889"; a numeric head takes .num); :where(), so
+     each element keeps its own low specificity. */
+  :where(.eyebrow, h5, h6, thead th, .plate, cite, legend, dt, .toc__label) {
+    font-family: var(--font-body);
+    font-size: var(--step--2);
+    font-weight: calc(var(--weight-semibold) + var(--_dark-weight));
+    line-height: var(--leading-tight);
+    font-style: normal;
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-caps);
+    font-variant-numeric: lining-nums;
+    color: var(--color-text-muted);
   }
 
-  h6 {
-    font-size: var(--font-size-base);
-    font-weight: var(--weight-medium);
-    letter-spacing: var(--tracking-normal);
-  }
+  .eyebrow { color: var(--accent-ink); margin-block: 0 var(--space-s); }
+  :where(h5, .plate) { color: var(--color-text); }
+  h6 { color: var(--color-text-muted); }
+
 
-  /* Subheadings following main headings */
-  :is(h1, h2, h3) + :is(h2, h3, h4) {
-    margin-block-start: var(--space-2);
+  /* ========================================
+     DISPLAY HEADLINES
+     The font size is a fixed share of the column's width, so a hand break
+     (<br>) stays put and every line keeps filling the column as the screen
+     grows. --fit is the longest line's width in em (characters × 0.5,
+     rounded up; fit-text.js measures it once for [data-fit]). Optical size
+     is pinned so glyph width scales linearly with size. The cap is also
+     15svh, so a three-line headline leaves the lede and actions above the
+     fold on a 900px-tall laptop (160px type pushed them under it). Setting
+     --hero-headline-size on :root overrides the fit.
+     ======================================== */
+
+  .display,
+  .hero__headline {
+    font-family: var(--font-display);
+    font-weight: calc(var(--weight-display) + var(--_dark-weight));
+    font-size: var(--hero-headline-size,
+               clamp(var(--step-4), 100cqi / var(--fit, 8), min(var(--display-max), 15svh)));
+    font-variation-settings: "opsz" 72;
+    line-height: 1;
+    letter-spacing: var(--tracking-display);
+    text-wrap: balance;
+    text-box: trim-start cap alphabetic;
   }
 
 
   /* ========================================
-     TYPOGRAPHY - Body Text
-     Room to breathe
+     TEXT
      ======================================== */
 
   p {
-    margin-block-end: var(--space-5);
-    max-inline-size: var(--container-prose);
+    margin-block: 0 var(--space-5);
+    max-inline-size: var(--measure);
   }
 
-  /* Last child shouldn't add extra space */
-  p:last-child {
-    margin-block-end: 0;
-  }
+  p:last-child { margin-block-end: 0; }
 
-  strong, b {
-    font-weight: var(--weight-semibold);
+  .lede {
+    font-family: var(--font-heading);
+    font-weight: calc(var(--weight-light) + var(--_dark-weight));
+    font-size: var(--step-1);
+    line-height: 1.4;
+    letter-spacing: -0.005em;
+    max-inline-size: 30em;
   }
 
-  em, i {
-    font-style: italic;
+  :is(.meta, figcaption) {
+    font-family: var(--font-body);
+    font-size: var(--step--1);
+    font-weight: 400;
+    line-height: 1.45;
+    letter-spacing: 0.01em;
+    color: var(--color-text-muted);
+    /* Lining but proportional: tabular figures in these faces also widen
+       the comma and full stop, which gaps running caption text. */
+    font-variant-numeric: lining-nums proportional-nums;
   }
 
+  strong, b { font-weight: calc(var(--weight-semibold) + var(--_dark-weight)); }
+
+  em, i { font-style: italic; }
+
   small {
-    font-size: var(--font-size-sm);
+    font-size: var(--step--1);
     color: var(--color-text-muted);
   }
 
-  /* Subscript and superscript */
   sub, sup {
     font-size: 75%;
     line-height: 0;
@@ -116,231 +171,128 @@
     vertical-align: baseline;
   }
 
-  sup {
-    inset-block-start: -0.5em;
-  }
-
-  sub {
-    inset-block-end: -0.25em;
-  }
+  sup { inset-block-start: -0.5em; }
+  sub { inset-block-end: -0.25em; }
 
 
   /* ========================================
      LINKS
-     Subtle, inviting interaction
+     Text colour; the underline marks the link (WCAG 1.4.1). Hover turns
+     the underline to the accent and thickens it. Only colour and the
+     underline transition.
      ======================================== */
 
   a {
-    color: var(--accent);
-    text-decoration: underline;
-    text-decoration-thickness: 1px;
-    text-underline-offset: 0.15em;
+    color: inherit;
+    text-decoration-line: underline;
+    text-decoration-color: color-mix(in oklch, var(--accent-ink) 55%, transparent);
+    text-decoration-thickness: 0.06em;
+    text-underline-offset: 0.22em;
+    text-decoration-skip-ink: auto;
     transition:
-      color var(--duration-normal) var(--ease-fluid),
-      text-decoration-color var(--duration-normal) var(--ease-fluid);
+      color var(--duration-fast) var(--ease-fluid),
+      text-decoration-color var(--duration-fast) var(--ease-fluid),
+      text-decoration-thickness var(--duration-fast) var(--ease-fluid);
   }
 
   a:hover {
-    color: var(--accent-hover);
-    text-decoration-thickness: 2px;
+    text-decoration-color: var(--accent-ink);
+    text-decoration-thickness: 0.12em;
   }
 
-  /* Links that look like text but reveal on hover */
-  a[data-subtle] {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  a[data-subtle]:hover {
-    color: var(--accent);
-    text-decoration: underline;
-  }
+  /* Links that look like text and show their underline on hover */
+  a[data-subtle] { text-decoration-line: none; }
+  a[data-subtle]:hover { text-decoration-line: underline; }
 
 
   /* ========================================
      LISTS
-     Structured with breathing room
-     Theme-specific list markers
      ======================================== */
 
   ul, ol {
     padding-inline-start: var(--space-6);
-    margin-block-end: var(--space-5);
+    margin-block: 0 var(--space-5);
   }
 
-  li {
-    margin-block-end: var(--space-2);
-  }
-
-  li:last-child {
-    margin-block-end: 0;
-  }
-
-  /* Nested lists */
-  li > ul,
-  li > ol {
-    margin-block-start: var(--space-2);
-    margin-block-end: 0;
-  }
-
-  /* === Themed list markers ===
-     Each child theme gets a distinctive marker
-     Note: Uses :not([class]) to avoid overriding nav dropdowns and other styled lists */
-
-  /* Still: Clean disc (default - minimal) */
-  [data-motion="still"] ul:not([class]) {
-    list-style-type: disc;
-  }
-
-  /* Serene: Open circle - elegant, understated */
-  [data-motion="serene"] ul:not([class]) {
-    list-style-type: circle;
-  }
-
-  /* Stream: Dash - modern, horizontal emphasis */
-  [data-motion="stream"] ul:not([class]) {
-    list-style-type: none;
-    padding-inline-start: var(--space-5);
-  }
-  [data-motion="stream"] ul:not([class]) > li {
-    position: relative;
-  }
-  [data-motion="stream"] ul:not([class]) > li::before {
-    content: "—";
-    position: absolute;
-    inset-inline-start: calc(var(--space-5) * -1);
-    color: var(--accent);
-    font-weight: var(--weight-bold);
-  }
+  /* Chrome draws markers with tabular figures, which in these faces widen
+     the full stop ("1 ."). */
+  ::marker { font-variant-numeric: lining-nums proportional-nums; }
 
-  /* Cascade: Filled circle - friendly, rounded */
-  [data-motion="cascade"] ul:not([class]) {
-    list-style-type: none;
-    padding-inline-start: var(--space-6);
-  }
-  [data-motion="cascade"] ul:not([class]) > li {
-    position: relative;
-  }
-  [data-motion="cascade"] ul:not([class]) > li::before {
-    content: "";
-    position: absolute;
-    inset-inline-start: calc(var(--space-6) * -1);
-    inset-block-start: 0.55em;
-    inline-size: 0.5em;
-    block-size: 0.5em;
-    background: var(--accent);
-    border-radius: var(--radius-full);
-  }
+  li { margin-block-end: var(--space-2); }
+  li:last-child { margin-block-end: 0; }
 
-  /* Rapids: Chevron - energetic, forward motion */
-  [data-motion="rapids"] ul:not([class]) {
-    list-style-type: none;
-    padding-inline-start: var(--space-6);
-  }
-  [data-motion="rapids"] ul:not([class]) > li {
-    position: relative;
-  }
-  [data-motion="rapids"] ul:not([class]) > li::before {
-    content: "";
-    position: absolute;
-    inset-inline-start: calc(var(--space-6) * -1);
-    inset-block-start: 0.4em;
-    inline-size: 0;
-    block-size: 0;
-    border-block-start: 0.35em solid transparent;
-    border-block-end: 0.35em solid transparent;
-    border-inline-start: 0.5em solid var(--accent);
-  }
-
-  /* Tsunami: Square - bold, impactful */
-  [data-motion="tsunami"] ul:not([class]) {
-    list-style-type: none;
-    padding-inline-start: var(--space-6);
-  }
-  [data-motion="tsunami"] ul:not([class]) > li {
-    position: relative;
-  }
-  [data-motion="tsunami"] ul:not([class]) > li::before {
-    content: "";
-    position: absolute;
-    inset-inline-start: calc(var(--space-6) * -1);
-    inset-block-start: 0.5em;
-    inline-size: 0.5em;
-    block-size: 0.5em;
-    background: var(--accent);
-  }
+  li > :is(ul, ol) { margin-block: var(--space-2) 0; }
 
-  /* Definition lists */
-  dl {
-    margin-block-end: var(--space-5);
-  }
+  /* A term in the label voice (above), its value flush under it. */
+  dl { margin-block: 0 var(--space-5); }
 
-  dt {
-    font-weight: var(--weight-semibold);
-    margin-block-end: var(--space-1);
-  }
+  dt { margin-block-end: var(--space-1); }
 
   dd {
-    margin-inline-start: var(--space-6);
+    margin-inline-start: 0;
     margin-block-end: var(--space-4);
-    color: var(--color-text-muted);
   }
 
 
   /* ========================================
-     BLOCKQUOTES
-     Thoughtful, set apart
+     QUOTES
      ======================================== */
 
   blockquote {
-    position: relative;
-    padding-inline-start: var(--space-6);
-    margin-block: var(--space-6);
-    border-inline-start: 3px solid var(--color-border);
-    color: var(--color-text-muted);
+    margin-inline: 0;
+    margin-block: var(--space-l);
+    padding-inline-start: 1.25em;
+    border-inline-start: var(--border-width-thick) solid var(--accent);
+    font-family: var(--font-heading);
+    font-size: var(--step-1);
     font-style: italic;
-  }
-
-  blockquote::before {
-    content: none; /* No decorative quotes - let content speak */
+    line-height: 1.4;
   }
 
   blockquote cite {
     display: block;
-    margin-block-start: var(--space-3);
-    font-size: var(--font-size-sm);
-    font-style: normal;
-    color: var(--color-text-subtle);
+    margin-block-start: var(--space-s);
   }
 
-  blockquote cite::before {
-    content: "— ";
+  /* A pull quote repeats the text, so it is a <p class="pullquote">, not
+     an <aside> (a complementary landmark nested in the article) and not a
+     <blockquote> (it quotes no one else). */
+  .pullquote {
+    margin-inline: 0;
+    margin-block: var(--space-l);
+    padding-block: var(--space-m);
+    border-block: var(--border-width) solid var(--color-border-strong);
+    font-family: var(--font-heading);
+    font-size: var(--step-3);
+    font-weight: calc(var(--weight-light) + var(--_dark-weight));
+    line-height: var(--leading-heading);
+    letter-spacing: var(--tracking-heading);
+    text-wrap: balance;
   }
 
 
   /* ========================================
      CODE
-     Technical but approachable
      ======================================== */
 
+  :is(code, kbd, samp, pre) { font-family: var(--font-mono); }
+
   code {
-    font-family: var(--font-mono);
     font-size: 0.9em;
     background-color: var(--color-surface);
-    padding-inline: var(--space-1-5);
-    padding-block: var(--space-0-5);
-    border-radius: var(--radius-sm);
+    padding: 0.1em 0.3em;
+    border-radius: var(--radius-control);
   }
 
   pre {
-    font-family: var(--font-mono);
-    font-size: var(--font-size-sm);
+    font-size: var(--step--1);
     line-height: var(--leading-relaxed);
     background-color: var(--color-surface);
-    padding: var(--space-5);
-    border-radius: var(--radius-lg);
+    border: var(--border-width) solid var(--color-border);
+    border-radius: var(--radius-card);
+    padding: var(--space-m);
     overflow-x: auto;
-    margin-block-end: var(--space-5);
+    margin-block: 0 var(--space-5);
     tab-size: 2;
   }
 
@@ -348,22 +300,13 @@
     background: none;
     padding: 0;
     font-size: inherit;
-    border-radius: 0;
   }
 
   kbd {
-    font-family: var(--font-mono);
     font-size: 0.875em;
-    background-color: var(--color-surface-raised);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-sm);
-    padding-inline: var(--space-1-5);
-    padding-block: var(--space-0-5);
-    box-shadow: var(--shadow-xs);
-  }
-
-  samp {
-    font-family: var(--font-mono);
+    border: var(--border-width) solid var(--color-border-strong);
+    border-radius: var(--radius-control);
+    padding: 0.1em 0.35em;
   }
 
   var {
@@ -373,82 +316,151 @@
 
 
   /* ========================================
-     HORIZONTAL RULES
-     Quiet separation
+     RULES
      ======================================== */
 
   hr {
     border: none;
-    border-block-start: 1px solid var(--color-border-subtle);
-    margin-block: var(--space-10);
+    border-block-start: var(--border-width) solid var(--color-border);
+    max-inline-size: var(--measure);
+    margin-block: var(--space-xl);
+  }
+
+  hr[data-variant="ornament"] {
+    border: 0;
+    text-align: center;
+    overflow: visible;
+  }
+
+  /* Three asterisks in the heading face: the asterism glyph (⁂) is not in
+     the latin subset of the fonts file, so it fell back to another face. */
+  hr[data-variant="ornament"]::before {
+    content: "*\2003*\2003*";
+    font: var(--step-1) / 1 var(--font-heading);
+    color: var(--color-text-muted);
   }
 
 
   /* ========================================
      MEDIA
-     Graceful presentation
+     Images in true colour at their natural ratio. data-aspect crops any
+     img or video; data-focus (on it or a wrapper) sets the crop's focal point.
      ======================================== */
 
-  figure {
-    margin-block: var(--space-6);
+  :is(img, video) { object-position: var(--focus, 50% 50%); }
+
+  [data-aspect="square"] { --_aspect: 1; }
+  [data-aspect="video"] { --_aspect: 16 / 9; }
+  [data-aspect="portrait"] { --_aspect: 3 / 4; }
+  [data-aspect="wide"] { --_aspect: 21 / 9; }
+
+  :is(img, video)[data-aspect] {
+    aspect-ratio: var(--_aspect, auto);
+    object-fit: cover;
+  }
+
+  [data-focus="top"] { --focus: 50% 0; }
+  [data-focus="bottom"] { --focus: 50% 100%; }
+  [data-focus="left"] { --focus: 0 50%; }
+  [data-focus="right"] { --focus: 100% 50%; }
+  [data-focus="center"] { --focus: 50% 50%; }
+
+  figure { margin: 0; margin-block: var(--space-l); }
+
+  figure :is(img, picture, video) {
+    inline-size: 100%;
+    border-radius: var(--radius-card);
+  }
+
+  /* An uncropped image is never taller than the screen: a portrait at the
+     column's full width ran two screens tall. The box keeps the column's
+     width and the width/height attributes' ratio, so a lazy image holds
+     its space before it loads (inline-size: auto made it 0 × 0); a
+     portrait capped at 85svh is fitted inside the box at the start edge,
+     never squashed. Full-bleed figures and the hero plate are not capped:
+     they are the full width at their natural ratio. */
+  figure:not([data-bleed="full"], .alignfull, .hero__plate) > :is(img, video):not([data-aspect]),
+  figure:not([data-bleed="full"], .alignfull, .hero__plate) > picture > img:not([data-aspect]) {
+    block-size: auto;
+    max-block-size: 85svh;
+    object-fit: contain;
+    object-position: var(--focus, 0% 50%);
   }
 
   figcaption {
-    margin-block-start: var(--space-3);
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
-    text-align: center;
+    margin-block-start: var(--space-xs);
+    max-inline-size: 48ch;
+  }
+
+  /* A credit in <small>, a plate number in .plate or b, a work title in <i>. */
+  figcaption :is(.plate, b) {
+    margin-inline-end: 0.75em;
+  }
+
+  figcaption small { font-size: inherit; }
+
+  @container (inline-size > 60rem) {
+    figure[data-caption="side"] {
+      display: grid;
+      grid-template-columns: 1fr 16rem;
+      column-gap: var(--space-m);
+      align-items: end;
+    }
   }
 
 
   /* ========================================
      TABLES
-     Clean, readable data
+     Label-voice head over a 2px ink rule, hairline rows, tabular figures.
      ======================================== */
 
+  /* Lining but proportional: tabular figures also widen the comma, which
+     gapped prose cells ("Boston , MA"). Numeric cells opt in below. */
   table {
     inline-size: 100%;
-    margin-block-end: var(--space-5);
+    margin-block: 0 var(--space-5);
     border-collapse: collapse;
-    font-variant-numeric: tabular-nums;
+    font-size: var(--step--1);
+    font-variant-numeric: lining-nums proportional-nums;
   }
 
-  th, td {
-    padding: var(--space-3) var(--space-4);
+  :is(th, td) {
+    padding-block: 0.85em;
+    padding-inline: 0 var(--space-4);
     text-align: start;
-    border-block-end: 1px solid var(--color-border-subtle);
+    border-block-end: var(--border-width) solid var(--color-border);
   }
 
-  th {
-    font-weight: var(--weight-semibold);
-    color: var(--color-text);
-    background-color: var(--color-surface);
+  :is(td, th):is([data-type="number"], .num) {
+    font-variant-numeric: lining-nums tabular-nums;
+    text-align: end;
   }
 
-  /* Striped rows - subtle */
-  tbody tr:nth-child(even) {
-    background-color: oklch(from var(--shadow-color) l c h / 0.02);
-  }
+  th { font-weight: calc(var(--weight-semibold) + var(--_dark-weight)); }
 
-  /* Hover state - gentle highlight */
-  tbody tr {
-    transition: background-color var(--duration-normal) var(--ease-fluid);
+  thead th {
+    vertical-align: bottom;
+    border-block-end: var(--border-width-thick) solid var(--color-border-strong);
   }
 
-  tbody tr:hover {
-    background-color: oklch(from var(--shadow-color) l c h / 0.04);
+  caption {
+    caption-side: top;
+    text-align: start;
+    margin-block-end: var(--space-xs);
   }
 
 
   /* ========================================
-     FORMS - Inputs
-     Inviting, not intimidating
+     FORMS
+     Square fields on the page colour with an ink edge, 3rem tall, body-size
+     text (which also stops iOS zooming on focus). Focus is an outline, so an
+     invalid field keeps its error border and still shows focus.
      ======================================== */
 
   label {
     display: block;
-    font-size: var(--font-size-sm);
-    font-weight: var(--weight-medium);
+    font-size: var(--step--1);
+    font-weight: calc(var(--weight-semibold) + var(--_dark-weight));
     margin-block-end: var(--space-2);
     color: var(--color-text);
   }
@@ -457,195 +469,149 @@
   textarea,
   select {
     inline-size: 100%;
-    padding: var(--space-3) var(--space-4);
-    font-size: var(--font-size-base);
-    line-height: var(--leading-normal);
+    min-block-size: 3rem;
+    padding: 0.6em 0.8em;
+    font: inherit;
+    font-size: var(--step-0);
+    line-height: 1.4;
     color: var(--color-text);
     background-color: var(--color-background);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-input, var(--radius-md));
-    /* Subtle 3D effect - layered shadows create depth */
-    box-shadow:
-      inset 0 1px 2px oklch(from var(--shadow-color) l c h / 0.04),
-      0 1px 0 oklch(from var(--theme-light) l c h / 0.6);
-    transition:
-      border-color var(--duration-normal) var(--ease-fluid),
-      box-shadow var(--duration-normal) var(--ease-fluid),
-      background-color var(--duration-normal) var(--ease-fluid);
-  }
-
-  input:hover,
-  textarea:hover,
-  select:hover {
-    border-color: var(--color-text-subtle);
-  }
-
-  input:focus,
-  textarea:focus,
-  select:focus {
-    outline: 2px solid transparent;
-    border-color: var(--accent);
-    /* Focus: glow ring + maintain subtle 3D */
-    box-shadow:
-      var(--shadow-glow),
-      inset 0 1px 2px oklch(from var(--shadow-color) l c h / 0.03);
-    /* Soft focus background - subtle tint */
-    background-color: color-mix(in oklch, var(--accent) 8%, var(--color-background));
-  }
-
-  /* Dark mode: stronger tint needed for visibility */
-  @media (prefers-color-scheme: dark) {
-    input:focus,
-    textarea:focus,
-    select:focus {
-      background-color: color-mix(in oklch, var(--accent) 15%, var(--color-background));
-    }
+    border: var(--border-width) solid var(--color-border-strong);
+    border-radius: var(--radius-control);
+    transition: border-color var(--duration-fast) var(--ease-fluid);
   }
 
-  [data-theme="dark"] input:focus,
-  [data-theme="dark"] textarea:focus,
-  [data-theme="dark"] select:focus {
-    background-color: color-mix(in oklch, var(--accent) 15%, var(--color-background));
+  :is(input, textarea, select):focus {
+    outline: var(--focus-ring-width) solid var(--color-focus);
+    outline-offset: 1px;
   }
 
-  input::placeholder,
-  textarea::placeholder {
+  :is(input, textarea)::placeholder {
     color: var(--color-text-subtle);
     opacity: 1;
   }
 
-  /* Disabled state */
-  input:disabled,
-  textarea:disabled,
-  select:disabled {
-    opacity: 0.6;
+  :is(input, textarea, select):disabled {
+    opacity: 0.5;
     cursor: not-allowed;
-    background-color: var(--color-surface);
   }
 
-  textarea {
-    min-block-size: 8rem;
-    resize: vertical;
+  /* Bare checkboxes and radios keep a box shape: the text-field rules above
+     (full width, padding, border) would turn <label><input type="checkbox">
+     Text</label> into a full-width bar. Same weight as `input`, so the custom
+     .checkbox / .radio / .switch inputs (one class) still win. */
+  input:where([type="checkbox"], [type="radio"]) {
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    min-block-size: 0;
+    padding: 0;
+    margin: 0;
+    margin-inline-end: var(--space-2);
+    vertical-align: -0.2em;
+    border: 0;
+    accent-color: var(--accent);
+    cursor: pointer;
   }
 
+  input:where([type="checkbox"], [type="radio"]):focus { outline: 0; }
 
-  /* ========================================
-     FORMS - Buttons
-     Clear call to action, never garish
-     ======================================== */
+  input:where([type="checkbox"], [type="radio"]):focus-visible {
+    outline: var(--focus-ring-width) solid var(--color-focus);
+    outline-offset: 2px;
+  }
 
-  button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-2);
-    padding: var(--space-3) var(--space-5);
-    font-size: var(--font-size-base);
-    font-weight: var(--weight-medium);
-    line-height: var(--leading-none);
-    color: var(--white);
-    background-color: var(--accent);
-    border: none;
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    transition:
-      background-color var(--duration-normal) var(--ease-fluid),
-      transform var(--duration-fast) var(--ease-settle),
-      box-shadow var(--duration-normal) var(--ease-fluid);
+  /* Date and time boxes take their cell's width. iOS Safari sizes a native
+     date/time input to its own content and ignores inline-size, so in a grid
+     it ran into the next column (#65). Without the native appearance it
+     behaves like a text field. */
+  input:where([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
+    display: block;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    -webkit-appearance: none;
+    appearance: none;
   }
 
-  button:hover {
-    background-color: var(--accent-hover);
-    box-shadow: var(--shadow-sm);
+  input:where([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"])::-webkit-date-and-time-value {
+    text-align: start;
   }
 
-  button:active {
-    transform: scale(0.98);
-    box-shadow: none;
+  textarea {
+    min-block-size: 8rem;
+    resize: vertical;
   }
 
-  button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
+  /* Fieldset: no box, a top hairline, the legend in the label voice. */
+  fieldset {
+    margin: 0;
+    margin-block-end: var(--space-l);
+    padding: 0;
+    padding-block-start: var(--space-s);
+    border: 0;
+    border-block-start: var(--border-width) solid var(--color-border);
+    min-inline-size: 0;
   }
 
-  button:disabled:hover {
-    background-color: var(--accent);
-    box-shadow: none;
-    transform: none;
+  legend {
+    float: inline-start;
+    inline-size: 100%;
+    padding: 0;
+    margin-block-end: var(--space-m);
   }
 
+  legend + * { clear: both; }
+
 
   /* ========================================
-     INTERACTIVE ELEMENTS
-     Native HTML interactivity
+     DETAILS
      ======================================== */
 
   details {
-    margin-block-end: var(--space-4);
-    border: 1px solid var(--color-border-subtle);
-    border-radius: var(--radius-md);
-    padding: var(--space-4);
+    margin-block: 0 var(--space-4);
+    border-block: var(--border-width) solid var(--color-border);
   }
 
+  details + details { border-block-start: 0; margin-block-start: calc(-1 * var(--space-4)); }
+
   summary {
-    font-weight: var(--weight-medium);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0 var(--space-2);
+    min-block-size: 2.75rem;
+    padding-block: var(--space-2);
+    font-weight: calc(var(--weight-semibold) + var(--_dark-weight));
     cursor: pointer;
-    padding: var(--space-2);
-    margin: calc(var(--space-4) * -1);
-    margin-block-end: 0;
-    border-radius: var(--radius-md);
-    transition: background-color var(--duration-normal) var(--ease-fluid);
   }
 
-  summary:hover {
-    background-color: var(--color-surface);
-  }
+  details[open] > summary { margin-block-end: var(--space-s); }
 
-  details[open] summary {
-    margin-block-end: var(--space-4);
-    border-block-end: 1px solid var(--color-border-subtle);
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  /* Hide default marker in webkit */
-  summary::-webkit-details-marker {
-    display: none;
-  }
-
-  summary::marker {
-    content: "";
-  }
+  summary::-webkit-details-marker { display: none; }
+  summary::marker { content: ""; }
 
+  /* The chevron is decoration: empty alt text keeps it out of the
+     summary's accessible name (and so out of a landmark's name). */
   summary::before {
     content: "▸";
+    content: "▸" / "";
     display: inline-block;
-    margin-inline-end: var(--space-2);
-    transition: transform var(--duration-normal) var(--ease-settle);
+    transition: rotate var(--duration-fast) var(--ease-settle);
   }
 
-  details[open] summary::before {
-    transform: rotate(90deg);
-  }
+  /* Logical: the marker points along the inline direction and turns down. */
+  summary:dir(rtl)::before { scale: -1 1; }
+  details[open] > summary::before { rotate: 90deg; }
+  details[open] > summary:dir(rtl)::before { rotate: -90deg; }
 
 
   /* ========================================
      SEMANTIC ELEMENTS
-     Meaningful markup, meaningful styles
      ======================================== */
 
   mark {
-    background-color: oklch(90% 0.08 90);
+    background-color: light-dark(oklch(90% 0.08 90), oklch(40% 0.08 90));
+    color: var(--color-text);
     padding-inline: var(--space-1);
-    border-radius: var(--radius-sm);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    mark {
-      background-color: oklch(40% 0.08 90);
-      color: oklch(95% 0.02 90);
-    }
   }
 
   abbr[title] {
@@ -658,96 +624,49 @@
     margin-block-end: var(--space-5);
   }
 
-  time {
-    font-variant-numeric: tabular-nums;
-  }
+  time { font-variant-numeric: lining-nums; }
 
 
   /* ========================================
      METER & PROGRESS
-     Visual feedback with viewport animation
      ======================================== */
 
   meter,
   progress {
     inline-size: 100%;
     block-size: var(--space-2);
-    border-radius: var(--radius-full);
     overflow: hidden;
   }
 
   progress {
     appearance: none;
+    border: 0;
     background-color: var(--color-surface);
   }
 
-  progress::-webkit-progress-bar {
-    background-color: var(--color-surface);
-    border-radius: var(--radius-full);
-  }
-
-  progress::-webkit-progress-value {
-    background-color: var(--accent);
-    border-radius: var(--radius-full);
-    /* Animate to draw attention when visible */
-    transition: inline-size var(--duration-slow) var(--ease-fluid);
-  }
-
-  progress::-moz-progress-bar {
-    background-color: var(--accent);
-    border-radius: var(--radius-full);
-    transition: inline-size var(--duration-slow) var(--ease-fluid);
-  }
-
-  /* Animated progress - starts at 0 and fills to value when in viewport */
-  progress[data-animate] {
-    --progress-value: 73;  /* Default: NSW easter egg */
-  }
-
-  progress[data-animate]::-webkit-progress-value {
-    animation: progress-fill var(--duration-slower) var(--ease-fluid) forwards;
-    animation-play-state: paused;
-  }
-
-  progress[data-animate][data-visible]::-webkit-progress-value {
-    animation-play-state: running;
-  }
-
-  @keyframes progress-fill {
-    from { inline-size: 0; }
-    to { inline-size: 100%; }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    progress[data-animate]::-webkit-progress-value {
-      animation: none;
-    }
-  }
+  progress::-webkit-progress-bar { background-color: var(--color-surface); }
+  progress::-webkit-progress-value { background-color: var(--accent); }
+  progress::-moz-progress-bar { background-color: var(--accent); }
 
 
   /* ========================================
      DIALOG
-     Modal overlay styling
      ======================================== */
 
   dialog {
     max-inline-size: min(90vw, var(--container-sm));
     padding: var(--space-6);
-    border: 1px solid var(--color-border-subtle);
-    border-radius: var(--radius-xl);
-    box-shadow: var(--shadow-xl);
+    color: var(--color-text);
     background-color: var(--color-background);
+    border: var(--border-width) solid var(--color-border-strong);
+    border-radius: var(--radius-card);
   }
 
-  dialog::backdrop {
-    background-color: oklch(from var(--shadow-color) l c h / 0.5);
-    backdrop-filter: blur(4px);
-  }
+  dialog::backdrop { background-color: oklch(0 0 0 / 0.5); }
 
 
   /* ========================================
      SKIP LINK
-     Accessibility: Jump to main content
      Hidden until focused for keyboard users
      ======================================== */
 
@@ -758,77 +677,24 @@
     z-index: var(--z-max);
     padding: var(--space-3) var(--space-5);
     background-color: var(--accent);
-    color: var(--white);
-    font-weight: var(--weight-medium);
+    color: var(--on-accent);
+    font-weight: var(--weight-semibold);
     text-decoration: none;
-    border-radius: var(--radius-md);
-    box-shadow: var(--shadow-lg);
-    transform: translateY(-200%);
-    transition: transform var(--duration-fast) var(--ease-fluid);
+    translate: 0 -200%;
   }
 
   .skip-link:focus {
-    transform: translateY(0);
-    outline: 2px solid transparent;
-    box-shadow:
-      var(--shadow-lg),
-      0 0 0 3px var(--color-background),
-      0 0 0 5px var(--accent);
+    translate: none;
+    outline: var(--focus-ring-width) solid var(--color-focus);
+    outline-offset: 2px;
+    /* A halo in the page colour: the link lands on the nav bar, which is
+       the page's other scheme. */
+    box-shadow: 0 0 0 calc(2px + var(--focus-ring-width)) var(--color-background);
   }
 
 
   /* ========================================
-     THEME-SPECIFIC TYPOGRAPHY
-     Motion styles affect text presentation
-     ======================================== */
-
-  /* Still: Clean, precise, Swiss-style typography */
-  [data-motion="still"] h1,
-  [data-motion="still"] h2,
-  [data-motion="still"] h3 {
-    font-weight: var(--weight-medium);
-    letter-spacing: 0.02em;
-    text-transform: uppercase;
-  }
-
-  /* Serene: Elegant, classical typography */
-  [data-motion="serene"] h1,
-  [data-motion="serene"] h2 {
-    font-weight: var(--weight-normal);
-    letter-spacing: 0;
-    font-style: italic;
-  }
-
-  /* Rapids: Bold, italic, aggressive sports feel */
-  [data-motion="rapids"] h1,
-  [data-motion="rapids"] h2,
-  [data-motion="rapids"] h3 {
-    font-weight: 900;
-    font-style: italic;
-    text-transform: uppercase;
-    letter-spacing: -0.02em;
-    line-height: 0.95;
-  }
-  [data-motion="rapids"] h1 {
-    font-size: clamp(var(--font-size-3xl), 8vw, var(--font-size-5xl));
-  }
-
-  /* Tsunami: Maximum impact, dramatic typography */
-  [data-motion="tsunami"] h1,
-  [data-motion="tsunami"] h2 {
-    font-weight: 900;
-    text-transform: uppercase;
-    letter-spacing: -0.03em;
-    line-height: 0.9;
-  }
-  [data-motion="tsunami"] h1 {
-    font-size: clamp(var(--font-size-4xl), 10vw, 6rem);
-  }
-
-
-  /* ========================================
-     PRINT STYLES
-     Clean output for paper
+     PRINT
      ======================================== */
 
   @media print {
@@ -837,48 +703,28 @@
       line-height: 1.5;
     }
 
-    h1, h2, h3, h4, h5, h6 {
-      page-break-after: avoid;
-      break-after: avoid;
-    }
+    h1, h2, h3, h4, h5, h6 { break-after: avoid; }
 
-    p, blockquote, ul, ol, table {
-      page-break-inside: avoid;
-      break-inside: avoid;
-    }
+    p, blockquote, ul, ol, table { break-inside: avoid; }
 
-    a {
-      color: inherit;
-      text-decoration: underline;
-    }
+    a { color: inherit; }
 
-    /* Show URLs for external links */
     a[href^="http"]::after {
       content: " (" attr(href) ")";
       font-size: 0.8em;
       color: var(--color-text-muted);
     }
 
-    pre, code {
-      background-color: var(--color-surface-raised, #f5f5f5);
-    }
-
-    /* Hide overlays and fixed UI on print */
     .modal,
     .toast-container,
-    .settings-fab,
-    .settings-drawer,
-    .scroll-progress,
     .nav {
       display: none !important;
     }
 
-    /* Preserve badge/alert colors on print */
     .badge,
     .alert {
-      -webkit-print-color-adjust: exact;
       print-color-adjust: exact;
-      border: 1px solid currentColor;
+      border: var(--border-width) solid currentColor;
     }
   }
 }