@charset "UTF-8";
/* === MUSEUM DESIGN SYSTEM — 2026-05-27 ===

   QUICK RULE
     sizing text?           → font-size-N
     spacing inside text?   → lh   (scales with local font + line-height)
     spacing between blocks? → space-N  (locked to root baseline, like a print grid)

   TYPE SCALE — 4 sizes. Everything else is weight, case, tracking, color.
     --font-size-0  small    labels, captions, eyebrows    12px→14px fluid
     --font-size-1  base     body copy, UI default         16px static
     --font-size-2  large    section headings, hero text   20px→28px fluid
     --font-size-3  massive  page titles only              32px→56px fluid

   LINE-HEIGHT — one companion per size tier, tightens as text gets bigger.
     --line-height-0  1.4   small
     --line-height-1  1.6   base  (html default — most elements inherit this)
     --line-height-2  1.2   large
     --line-height-3  1.0   massive

   SPACE TOKENS — baseline grid. --baseline = line-height-1 × 1rem ≈ 25.6px.
     --space-xs  ~13px   tight gaps (tags, labels)
     --space-s   ~26px   close siblings
     --space-m   ~51px   standard between-block gap
     --space-l   ~77px   generous section breathing room
     --space-xl  ~102px  major breaks (hr, page header, section h2)

   NOTE CSS can't nest block comments. Strip inner markers before wrapping a block.
*/
:root {
  --font-size-0: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --font-size-1: 1rem;
  --font-size-2: clamp(1.25rem, 1rem + 0.85vw, 1.75rem);
  --font-size-3: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);

  --line-height-0: 1.4;
  --line-height-1: 1.6;
  --line-height-2: 1.2;
  --line-height-3: 1.0;
  --line-height: var(--line-height-1);

  /* --baseline: 1rlh; */
  /* rlh doesn't resolve inside custom properties in calc() */
  --baseline: calc(var(--line-height-1) * 1rem);
  --space-xs: calc(var(--baseline) * 0.5);
  --space-s:  var(--baseline);
  --space-m:  calc(var(--baseline) * 2);
  --space-l:  calc(var(--baseline) * 3);
  --space-xl: calc(var(--baseline) * 4);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* alter colors like this
  color: rgb(from var(--color) r g 100);
  color: oklch(from currentColor l.0 .37 360); lightness chroma hue / alpha
  just alpha:
  color: rgb(from var(--color) r g b / 1);
  color: oklch(from currentColor l c h / 0.2);
 */
:root {
  color-scheme: light dark;
  --padding: clamp(10px, 3vw, 3rem);
  --rounded: 3px;
  --rounded-large: 999px; /* full-pill radius — opt-in (.button.round), never the default */
  --transition: .4s cubic-bezier(.4, 0, .2, 1);
  /* Wall-derived, not a fixed dark tone — the click-away scrim reads as a
     light room in light mode and a dark one in dark mode. See body::after. */
  --lb-scrim: color-mix(in oklab, var(--color-wall) 88%, transparent);

  /* === LEGACY COLOR PROPERTIES (kept for reference) ===
     Original tokens — do not use in new rules.
     Remain here until all usage sites are migrated to the museum palette below. */
  --color-black: #220;
  --color-black: #28231e;
  --color-white: #ffd;
  --color-white: #f0eee6;
  --color-grey: #775;
  --color-light: #efefdd;
  /* --color-text: hsl(0, 0%, 20%); */
  /* --color-text-dimmed: hsl(0, 0%, 40%); */
  /* --color-text-highlight: hsl(0, 0%, 0%); */
  --color-background: var(--color-white);
  --color-border: var(--color-light);
  --color-dropdown-background: var(--color-black);
  --color-dropdown-border: #441;
  --color-dropdown-text: var(--color-white);
  --color-button-background: var(--color-black);
  --color-button-text: var(--color-white);
  /* ? */
  --orange-red: #fc3a0a;
  --orange-red-p3: color(display-p3 1 0.2 0.03);
  --orange-red-25: rgba(252, 58, 10, 0.25);
  --orange-red-75: rgba(252, 58, 10, 0.75);
  --orange-red-dark: #d12b02;

  --color-code-light-grey: #cacbb1;
  --color-code-comment: #a9aaad;
  --color-code-white: #c5c9c6;
  --color-code-red: #d16464;
  --color-code-orange: #de935f;
  --color-code-yellow: #f0c674;
  --color-code-green: #a7bd68;
  --color-code-aqua: #8abeb7;
  --color-code-blue: #7e9abf;
  --color-code-purple: #b294bb;
  /* shop */
  /* --black-alt:  #15111b; */
  --grey: #9b8b71;
  --grey-alt: #555;
  --dim-grey: #6b6b6b;
  /* --dim-grey-alt: #50483e; */
  --dim-grey-alt:#a29789;
  --black-alt:  #2f2b21;

  --linear-gradient-angle: 225deg;

  --theme-transition: 0ms;
  --interaction-transition: 0ms;

/* === MUSEUM DESIGN SYSTEM PALETTE — use these in all new/updated rules ===
   A well-lit gallery - warm beige walls, cinematic shadows with chromatic warmth, an orange-red signal accent. Dark mode = same gallery, lights off. */

/* === MUSEUM PALETTE REFERENCE ===
* Token              Role                          Light → Dark
* ─────────────────────────────────────────────────────────────────────
* --color-wall       Page background               warm beige → dark warm brown
* --color-ink        Primary text                  near-black warm → off-white warm
* --color-frame      Borders, dividers             light warm grey → deep warm grey
* --color-copper    Muted / secondary text        mid warm grey → lighter warm grey
* --color-title      Emphasis / headings           darkest warm → brightest warm
* --color-signal     Accent (orange-red)           vivid → slightly lifted for dark bg
* --color-signal-soft  Accent at 20% opacity       oklch(from --color-signal l c h / 0.20)
* --color-signal-mid   Accent at 60% opacity       oklch(from --color-signal l c h / 0.60)
* --color-panel      Inverted surface (dropdowns)  dark wall → light wall
* --color-panel-ink  Inverted text                 off-white → near-black
* --color-shine      Inner highlight (shadow var)  warm near-white, thin inset top-left edge
* --color-shade      Drop shadow (shadow var)      warm brownish, bottom-right
* --shadow-ink       Cast-shadow color: --surface darkened + saturated (occlusion)
* --shadow-cast      Lifted-surface shadow scale (sm/·/lg): soft surface-derived layers
* --shadow-cast-sm   Small lift — a hair off the wall (compact cards, chips)
* --shadow-cast-lg   Large lift — big works seen head-on (heroes); 4 stacked layers
* --shadow-drop-lg   Large lift for ISO cutouts/PNGs: filter drop-shadow chain (follows shape)
* --shadow-flush     Wall-flush plaque shadow: tight, fixed warm ink (plaques force light)
* --shadow-raised    Back-compat alias → --shadow-cast (was glow + shine + shade)

Usage - oklch(from var(--color-signal) l c h / 0.12) for one-off opacity variants.
Do not use legacy tokens (--color-black, --color-white, --orange-red, etc.) in new rules.
*/

/* === LIGHTING + PALETTE STRATEGY ===
The site now uses a semantic museum-style lighting system instead of a traditional
theme engine. Rather than “light mode vs dark mode,” the palette is treated as
the same physical environment under different lighting conditions.

Structure
1. Source pigments/materials
  Raw colors representing walls, ink, frames, signal accents, shadows, etc.

2. Semantic lighting roles
  Variables such as
  --color-wall
  --color-ink
  --color-title
  --color-copper
  --color-frame
  --color-panel
  These are the variables components should actually use.

3. Lighting effects
  Reusable atmospheric effects such as
  --color-shine
  --color-shade
  --shadow-raised

Dark mode should feel like the gallery lights dimmed, not like the site inverted.
Shadows deepen, highlights soften, glows become more visible, and surfaces retain their warm material character.

Migration strategy
- New rules should only use semantic museum design system tokens.
- Legacy tokens remain temporarily for stability during migration.
- Replace hardcoded colors gradually as files/components are touched.
- Remove unused legacy properties over time once references are gone.
- Avoid introducing new one-off color variables unless they represent a true reusable material or lighting concept.

Goal
A cohesive, cinematic, warm, tactile site whose lighting adapts naturally without becoming an over-engineered theme system.
*/

  /* Surface */
  --color-wall:    light-dark(oklch(94% 0.015 85), oklch(20% 0.03 60)); /* #f0ebe0, #170a02, dark's 'lightness' value was 16, now it's 20% */
  --color-frame:   light-dark(oklch(88% 0.018 80), oklch(25% 0.025 65));

  /* Type */
  --color-ink:     light-dark(oklch(22% 0.025 65), oklch(90% 0.015 85));
  /* --color-caption: light-dark(oklch(50% 0.035 75), oklch(65% 0.035 75)); */
  --color-copper: light-dark(oklch(50% 0.095 55), oklch(65% 0.095 55));
  --color-copper-dim: color-mix(in oklch, var(--color-copper) 70%, transparent);
  --color-copper-20: color-mix(in oklch, var(--color-copper) 20%, transparent);
  --color-title:   light-dark(oklch(10% 0.02  60), oklch(98% 0.005 85));

  /* Accent — orange-red signal, slightly lifted in dark for legibility.
     oklch match of the P3 hot orange  --orange-red-p3: color(display-p3 1 0.2 0.03)
     (recorded higher in this file). The high chroma reaches that exact color on
     P3 displays and the browser auto-maps it to sRGB elsewhere — so no
     color()/@supports fallback is needed. Verified P3 readback: target [255,51,8]
     vs this [255,50,1]. */
  --color-signal:      light-dark(oklch(60% 0.282 32), oklch(66.5% 0.282 32));
  /* Opacity variants derived via relative color syntax — track --color-signal automatically */
  --color-signal-soft: oklch(from var(--color-signal) l c h / 0.20);
  --color-signal-mid:  oklch(from var(--color-signal) l c h / 0.60);

  /* Bloom — nice green in both light and dark */
  --color-bloom:       light-dark(oklch(90% 0.18 145), oklch(42% 0.14 145));
  --color-bloom-ink:   light-dark(oklch(22% 0.06 145), oklch(94% 0.04 145));

  /* Inverted surface — dropdowns, buttons, overlays */
  --color-panel:     light-dark(oklch(16% 0.03 60), oklch(94% 0.015 85));
  --color-panel-ink: light-dark(oklch(90% 0.015 85), oklch(22% 0.025 65));

  /* ── SHADOWS ───────────────────────────────────────────────────────────────
     IDEA: a shadow is the SURFACE it falls on, darkened + saturated (real
     shadows deepen in color, not just value). Deriving from the surface keeps
     it a true shadow in BOTH light and dark mode — never a glow — and lets it
     track the palette automatically.

     USE one on an element:
       box-shadow: var(--shadow-cast);    lifted card (3 soft layers)
       box-shadow: var(--shadow-flush);   wall-mounted plaque — small + tight, sits close
       box-shadow: var(--color-shade);    one gentle drop — grounded, not lifted
       box-shadow: var(--color-shine);    thin inset highlight on the lit edge

     TINKER (the two dials, on --shadow-ink — changes every shadow at once):
       calc(l * 0.32)  → DARKNESS. Lower = darker. Keep under 1 or it glows.
       calc(c * 4)     → SATURATION. Higher = warmer / more colorful.
     Per-layer strength lives in each `transparent N%` below (higher = fainter);
     bigger y + blur on the last layer = more float. Keep blur modest — a page
     can hold 40+ cards.

     PER-SURFACE: set `--surface: var(--color-panel)` (board / plaque / paper…)
     on any container and the shadows inside re-derive to match it. Default is
     --color-wall. SHINE is the exception: a fixed near-white edge, softened in
     dark mode so it doesn't read as a hard hairline. --angle-shadow (225deg) is
     a conceptual note; the px offsets below carry the top-left light. */
  --shadow-ink:    oklch(from var(--surface, var(--color-wall)) calc(l * 0.32) calc(c * 4) h);
  --shadow-cast:
    1px 1px  1px  color-mix(in oklab, var(--shadow-ink), transparent 84%),   /* contact */
    2px 4px  7px  color-mix(in oklab, var(--shadow-ink), transparent 88%),   /* mid     */
    5px 11px 18px color-mix(in oklab, var(--shadow-ink), transparent 92%);   /* ambient */
  /* Same surface-derived occlusion, scaled. SM sits a hair off the wall; LG is
     for a big work seen head-on (heroes) — four layers drop straight down, as
     if from the overhead gallery lights, growing softer as they fall. */
  --shadow-cast-sm:
    0 2px 4px -2px color-mix(in oklab, var(--shadow-ink), transparent 82%),
    0 7px 6px -4px color-mix(in oklab, var(--shadow-ink), transparent 88%);
  --shadow-cast-lg:
    0 10px  5px -5px  color-mix(in oklab, var(--shadow-ink), transparent 74%),   /* contact */
    0 20px 10px -10px color-mix(in oklab, var(--shadow-ink), transparent 82%),   /* near    */
    0 30px 15px color-mix(in oklab, var(--shadow-ink), transparent 87%),   /* mid     */
    0 50px 15px -10px color-mix(in oklab, var(--shadow-ink), transparent 90%);   /* ambient */
  /* Drop scale: the same lift for ISO cutouts / PNGs with transparency, where a
     box-shadow can only trace the rectangle. `cast` = box-shadow on a surface;
     `drop` = stacked filter drop-shadow that follows the silhouette. Same
     straight-down overhead-light direction and --shadow-ink colour. */
  --shadow-drop-lg:
    drop-shadow(0 10px  5px  color-mix(in oklab, var(--shadow-ink), transparent 70%))
    drop-shadow(0 20px 10px color-mix(in oklab, var(--shadow-ink), transparent 80%))
    drop-shadow(0 40px 10px color-mix(in oklab, var(--shadow-ink), transparent 80%));
  /* Flush — small + tight, for plaques mounted on the wall. Plaques force
     color-scheme: light (white label), which would pin a surface-derived ink to
     the light wall and glow in dark mode — so flush uses one FIXED dark warm ink,
     dark enough (L 0.10) to read as a real shadow on both the cream and dark wall. */
  --shadow-flush:
    0 4px 2px -3px oklch(10% 0.04 60 / 0.22),
    0 4px 4px oklch(10% 0.04 60 / 0.14);
  --color-shade:   2px 4px 14px color-mix(in oklab, var(--shadow-ink), transparent 80%);          /* subtle single drop */
  --color-shine:   inset 1px 1px 2px light-dark(oklch(98% 0.01 85 / 0.55), oklch(98% 0.01 85 / 0.28));  /* lit-edge highlight */
  --shadow-raised: var(--shadow-cast);   /* back-compat alias — migrate callers to --shadow-cast */
  --angle-shadow: 225deg;

  /* === MUSEUM DESIGN SYSTEM — LIVERY 2.0 ===
     New source pigments/materials, prefix --mds-liv-. These are raw livery
     (flat values); semantic light/dark roles map them later (see the lighting
     strategy above). P3-native pigments (lapis, persimmon) carry an oklch
     fallback here and a color(display-p3 …) override in the @supports block
     just after :root closes. Everything else is plain oklch. Tinker freely.

     Names follow the pigment/material motif: paper · stone · wood grounds,
     copper aging to verdigris patina, a persimmon spark. */

  /* Grounds — paper · stone · wood. The substrate the mark sits on (~60%) */
  --mds-liv-plaster:   oklch(94% 0.015 85);
  --mds-liv-tan:       oklch(89% 0.038 70);
  --mds-liv-sand:      oklch(86% 0.052 80);
  --mds-liv-khaki:     oklch(83% 0.055 100);
  --mds-liv-stone:     oklch(43% 0.014 75);
  --mds-liv-kraft:     oklch(63% 0.092 65);
  --mds-liv-walnut:    oklch(32% 0.058 50);
  --mds-liv-ink:       oklch(22% 0.025 65);
  --mds-liv-white-ink: oklch(98% 0.008 90); /* warm white for ink on dark grounds */

  /* Metals — copper (fresh) aging to its cool patina. Everyday accents (~30%) */
  --mds-liv-copper:    oklch(50% 0.095 55);
  --mds-liv-lapis:     oklch(80% 0.13 193);  /* P3 fallback — overridden below */
  --mds-liv-verdigris: oklch(55% 0.085 200);
  --mds-liv-prussian:  oklch(40% 0.118 252);

  /* Signal — the spark. Rare punctuation only (~10%) */
  --mds-liv-persimmon: oklch(68% 0.235 48);  /* P3 fallback — overridden below */

  /* Bloom — success, muted paint */
  --mds-liv-bloom:     oklch(52% 0.13 150);

  /* === LIVERY 2.0 — SEMANTIC ROLES ===
     Pigments above are flat materials (one color in any light). These roles
     map them per lighting mode via light-dark() — "lights on" vs "lights
     dimmed". Components reference these roles, not raw pigments — except a
     deliberate material moment (a kraft card, a walnut footer), which pairs a
     ground pigment with its fixed ink (--mds-liv-white-ink on dark grounds).
     Dark grounds are the same pigment with the lights turned down, derived via
     relative-color syntax (same hue, lower lightness, a touch more warmth). */

  /* Surfaces — wall + the mosaic of raised surfaces */
  --mds-page:         light-dark(var(--mds-liv-plaster), oklch(from var(--mds-liv-plaster) 0.16 calc(c * 2) h));
  --mds-surface:      light-dark(var(--mds-liv-tan),     oklch(from var(--mds-liv-tan)     0.22 calc(c * 1.4) h));
  --mds-surface-deep: light-dark(var(--mds-liv-sand),    oklch(from var(--mds-liv-sand)    0.28 c h));

  /* Ink — body text flips warm-near-black ↔ warm-white automatically */
  --mds-text:         light-dark(var(--mds-liv-ink),     var(--mds-liv-white-ink));
  --mds-text-muted:   light-dark(var(--mds-liv-copper),  oklch(from var(--mds-liv-copper) 0.72 c h));

  /* Accents — verdigris everyday link, persimmon rare signal; both lifted in dark for legibility */
  --mds-link:         light-dark(var(--mds-liv-verdigris), oklch(from var(--mds-liv-verdigris) 0.72 c h));
  --mds-signal:       light-dark(var(--mds-liv-persimmon), oklch(from var(--mds-liv-persimmon) calc(l * 1.08) c h));

  /* type */
  --font-size: var(--font-size-1);
  --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  --font-family-rounded: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
}

/* Livery 2.0 — P3-native overrides for the neon pigments.
   Wide-gamut displays get full-saturation P3; everyone else keeps the oklch
   fallback declared in :root above. */
@supports (color: color(display-p3 1 0 0)) {
  :root {
    --mds-liv-lapis:     color(display-p3 0.28 0.86 0.83); /* max-neon lapis (ex-Tiffany) */
    --mds-liv-persimmon: color(display-p3 1 0.38 0);       /* signal spark */
  }
}

@font-face {
  font-family: "Creamcarton";
  src: url("/assets/webfonts/CreamCarton-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FA1";
  src: url("/assets/webfonts/FA-1-Regular.otf") format("opentype");
  font-style: normal;
}
@font-face {
  font-family: "F56";
  src: url("/assets/webfonts/F5.6-Regular.woff2") format("woff2");
  font-style: normal;
}
@font-face {
  font-family: "F18";
  src: url("/assets/webfonts/F1.8-Regular.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Gorton";
  src: url("/assets/webfonts/GortonPerfected-Bold.woff2") format("woff2"), url("/assets/webfonts/GortonPerfected-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Gorton";
  src: url("/assets/webfonts/GortonPerfected-Light.woff2") format("woff2"), url("/assets/webfonts/GortonPerfected-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Cartridge";
  src: url("/assets/webfonts/Cartridge-Rough.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "FreeLunch";
  src: url("/assets/webfonts/FreeLunch-Rough.woff2") format("woff2");
  font-style: normal;
}
@font-face {
  font-family: "ShipsWhistleRough";
  src: url("/assets/webfonts/ShipsWhistle-Rough.woff2") format("woff2");
  font-style: normal;
}
/* Webfont: OpticianSans-Regular */
@font-face {
    font-family: 'Optical';
    src: url('/assets/webfonts/OpticianSans/Webfont/Web-PS/Optiker-K.woff2') format('woff2');
    font-style: normal;
    font-weight: normal;
}

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  /* keep the scrollbar out of the theme flip: a transparent track rides the
     wall's smooth crossfade instead of snapping between UA light/dark, and
     the ink-mixed thumb sits comfortably in both schemes */
  scrollbar-color: color-mix(in oklab, var(--color-ink) 45%, transparent) transparent;
  /* the wall rides the same slow second as the atmosphere backdrop —
     one clock, no seam where the atmosphere meets the page below */
  transition: background-color 1s cubic-bezier(.4, 0, .2, 1), color var(--transition);
}

/* Supporting browsers quietly crossfade same-origin page navigations. The transition is viewport-only: individual images and cards do not participate. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) {
    animation: page-fade-out .5s ease-out both;
  }
  ::view-transition-new(root) {
    animation: page-fade-in .5s ease-in both;
  }
}
@keyframes page-fade-out {
  to { opacity: 0; }
}
@keyframes page-fade-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :root {--transition: 0;}
  html {scroll-behavior: auto; transition: none;}
}

@media (prefers-color-scheme: light) {
  html:has(#dark-toggle:checked) { color-scheme: dark; }
}
@media (prefers-color-scheme: dark) {
  html:has(#dark-toggle:checked) { color-scheme: light; }
}


html {
  font-family: var(--font-family-sans);
  color: var(--color-ink);
  background: var(--color-wall);
  line-height: var(--line-height-1);
}

body,
body * {
  /* box-shadow rides along so the museum shadows crossfade with their
     surfaces on a theme flip instead of snapping a frame early */
  transition:
    background-color var(--transition),
    color var(--transition),
    border-color var(--transition),
    fill var(--transition),
    stroke var(--transition),
    box-shadow var(--transition);
}

/* ---- layout ---- */
/* body {
  display: grid;
  grid-template-columns:
    [full-start]
      minmax(0, 1fr)
    [gutter-start]
      minmax(var(--padding), 1fr)
    [content-start]
      minmax(0, 39rem)
    [content-end]
      minmax(var(--padding), 1fr)
    [gutter-end]
      minmax(0, 1fr)
    [full-end];
} */
body {
  --edge: min(1rem, 2vw);
  --content: 39rem;
  /* --content: clamp(17rem, 92vw, 39rem); */ /* updated to allow 'content' to expand first */
  --wide: 71rem;

  display: grid;
  grid-template-columns:
    [full-start]
      minmax(0, 1fr)
    [gutter-start]
      var(--edge)
    [wide-start]
      minmax(0, calc((var(--wide) - var(--content)) / 2))
    [content-start]
      min(calc(100% - var(--edge) * 2), var(--content))
    [content-end]
      minmax(0, calc((var(--wide) - var(--content)) / 2))
    [wide-end]
      var(--edge)
    [gutter-end]
      minmax(0, 1fr)
    [full-end];
}

body > header,
body > main,
body > footer {
  grid-column: full;
}
body > header {
  grid-column: content;
}
body > main {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: full;
  overflow: clip; /* clips rotating iso decks without breaking sticky descendants */
}
body > main > header {
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid;
  > * {
    grid-column: content;
  }
}

body[class] > main > section.section {
  display: grid;
  grid-column: wide;
  grid-template-columns: subgrid;
}

body[class] > main > section.section-content {
  grid-column: content;
}

body[class] > main > section.section-wide {
  grid-column: wide;
}

body[class] > main > section.section-gutter {
  grid-column: gutter;
}

body[class] > main > section.section-full {
  grid-column: full;
}

body[class] > main > section.section > * {
  grid-column: content;
}

body[class] > main > section.section > .grid {
  grid-column: wide;
  min-width: 0;
}

body[class] > main > section.section > .tags {
  grid-column: wide;
}

body[class] > main > section.section > .stats-grid {
  grid-column: wide;
}

body[class] > main > section.section > .changelog-entry {
  grid-column: wide;
}

body[class] > main > section.section > .paginate {
  grid-column: wide;
}

body[class] :is(.section-content, .grid-content) {
  grid-column: content;
}

body[class] :is(.section-wide, .grid-wide) {
  grid-column: wide;
}

body[class] :is(.section-gutter, .grid-gutter) {
  grid-column: gutter;
}

body[class] :is(.section-full, .grid-full) {
  grid-column: full;
}

body[class] :is(.section-subgrid, .grid-subgrid) {
  display: grid;
  grid-template-columns: subgrid;

  > header {
    grid-column: content;
  }
}

img {
  width: 100%;
  height: auto;
  border-radius: var(--rounded);
}

/* spot image — kirbytext: (image: file.gif class: spot) */
figure.spot img,
img.spot {
  width: auto;
  max-width: 100%;
  border-radius: 0;
}

/* spot in prose */
figure.spot {
  margin-block: 1lh;

  > figcaption {
    margin-block-start: 0.35lh;
    color: var(--color-copper);
    font-size: var(--font-size-0);
    line-height: var(--line-height-2);

    /* captions arrive wrapped in <p> */
    p {
      margin: 0;
      color: inherit;
      font-size: inherit;
      line-height: inherit;
    }
  }
}

body {
  /* padding: var(--padding); */
  /* max-width: 80rem; */
  /* margin: 0 auto; */
}


li {
  list-style: none;
}

a {
  color: currentColor;
  text-decoration: none;
  transition: color .2s ease;

  &:hover,
  &:focus-visible {
    color: var(--color-signal);
  }
}

button {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}

strong,
b {
  font-weight: 600;
}

small {
  font-size: var(--font-size-0);
  font-weight: 400;
  color: var(--color-copper-dim);
}

figure.section-full :is(.img, img),
.text > :is(.full, .breakout) :is(.img, img) {
  border-radius: 0;
}

body[class] .section-scroller {
  row-gap: 1rem;

  > .scroller-nav {
    grid-column: wide-start / content-start;
    align-self: start;
    position: sticky;
    top: 1rem;
    padding-inline-end: 1.5rem;

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 0.35rem;
    }
  }

  &:has(> .scroller-groups > :nth-child(1):target) > .scroller-nav li:nth-child(1) > a,
  &:has(> .scroller-groups > :nth-child(2):target) > .scroller-nav li:nth-child(2) > a,
  &:has(> .scroller-groups > :nth-child(3):target) > .scroller-nav li:nth-child(3) > a,
  &:has(> .scroller-groups > :nth-child(4):target) > .scroller-nav li:nth-child(4) > a,
  &:has(> .scroller-groups > :nth-child(5):target) > .scroller-nav li:nth-child(5) > a,
  &:has(> .scroller-groups > :nth-child(6):target) > .scroller-nav li:nth-child(6) > a,
  &:has(> .scroller-groups > :nth-child(7):target) > .scroller-nav li:nth-child(7) > a,
  &:has(> .scroller-groups > :nth-child(8):target) > .scroller-nav li:nth-child(8) > a,
  &:has(> .scroller-groups > :nth-child(9):target) > .scroller-nav li:nth-child(9) > a,
  &:has(> .scroller-groups > :nth-child(10):target) > .scroller-nav li:nth-child(10) > a,
  &:has(> .scroller-groups > :nth-child(11):target) > .scroller-nav li:nth-child(11) > a,
  &:has(> .scroller-groups > :nth-child(12):target) > .scroller-nav li:nth-child(12) > a {
    color: var(--color-signal);
  }

  > .scroller-groups {
    grid-column: content-start / wide-end;
    display: grid;
    gap: clamp(2.5rem, 4vw, 3.5rem);

    > .scroller-group {
      margin-block: 0;
      padding-block: 0;
    }

    > .scroller-group > :first-child {
      margin-block-start: 0;
      margin-block-end: 0.65lh;
    }
  }

  @media (max-width: 60rem) {
    > .scroller-nav {
      position: static;
      padding-inline-end: 0;

      ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem 1.25rem;
      }
    }

    > .scroller-nav,
    > .scroller-groups {
      grid-column: content;
    }
  }
}

/* page families: index = listing, detail = article, meta = utility */
body.index {
  & > main {
    /* shared listing rules */
  }
}

body.detail {
  & > main {
    > article {
      grid-column: full;
      display: grid;
      grid-template-columns: subgrid;

      > * {
        grid-column: content;
      }
    }

    > article > header.page-header {
      grid-column: full;
      display: grid;
      grid-template-columns: subgrid;

      > * {
        grid-column: content;
      }
    }
  }
}

body.meta {
  & > main {
    > header.page-header {
      grid-column: full;
      display: grid;
      grid-template-columns: subgrid;

      > * {
        grid-column: content;
      }
    }

    > section,
    > footer {
      grid-column: content;
    }
  }
}

/* changelog */
.changelog {
  --changelog-date-col: 10rem;
  container: changelog / inline-size;

  .changelog-entry {
    display: grid;
    grid-template-columns: var(--changelog-date-col) 1fr;
    gap: 2rem;
    padding-block: 2rem;
    border-block-end: 1px solid oklch(from currentColor l c h / 0.12);
  }

  .changelog-date {
    position: sticky;
    top: var(--space-m);
    align-self: start;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    font-size: var(--font-size-1);
    font-weight: 600;
    line-height: var(--line-height-3);

    time {
      white-space: nowrap;
    }

  }

  .changelog-items {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .changelog-items li {
    padding-inline-start: 1rem;
    border-inline-start: 3px solid oklch(from currentColor l c h / 0.16);
    opacity: 0.72;

    p {
      margin: 0;
    }
  }

  .changelog-items li + li {
    margin-block-start: 1.25rem;
    padding-block: 1.25rem;
    border-block-start: 1px solid oklch(from currentColor l c h / 0.12);
  }

  @container changelog (max-width: 36rem) {
    .changelog-entry {
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }

    .changelog-date {
      position: static;
      flex-direction: row;
      align-items: center;
    }
  }
}

/* hero focal plane */
.page-hero.img-focus {
  .img {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--color-shade);
  }

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  img + img {
    position: absolute;
    inset: -4%;
    width: 108%;
    height: 108%;
    max-width: none;
    filter: blur(20px);
    transform: scale(1.03);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
      90deg,
      black 0%,
      rgb(0 0 0 / .82) 12%,
      rgb(0 0 0 / .32) 32%,
      transparent 50%,
      rgb(0 0 0 / .32) 68%,
      rgb(0 0 0 / .82) 88%,
      black 100%
    );
    mask-image: linear-gradient(
      90deg,
      black 0%,
      rgb(0 0 0 / .82) 12%,
      rgb(0 0 0 / .32) 32%,
      transparent 50%,
      rgb(0 0 0 / .32) 68%,
      rgb(0 0 0 / .82) 88%,
      black 100%
    );
  }

  &.img-hot {
    img + img {
      filter: blur(24px) saturate(2.75) contrast(1.16);
      opacity: 1;
    }
  }
}

/* guide plaques */
.guide {
  margin-block: var(--space-m) var(--space-l);
}

.guide.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
  align-items: start;
}

.guide .sign {
  color-scheme: light;
  background: #fff;
  color: var(--color-ink);
  box-shadow: var(--shadow-flush);   /* tight wall-mount, like the plaques */
  border: 1px solid color-mix(in oklch, var(--color-frame) 75%, white);
}

.guide .sign:only-child {
  grid-column: 1 / -1;
  width: min(100%, var(--content));
  justify-self: center;
}

.guide .sign a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  border-block-start: 1px solid color-mix(in oklch, var(--color-frame) 65%, white);
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);

  &:first-child {
    border-block-start: 0;
  }

  &:hover,
  &:focus-visible {
    background: color-mix(in oklch, var(--color-signal-soft) 40%, white);
    color: var(--color-title);
  }

  span:not(.arrow) {
    min-width: 0;
    color: var(--color-title);
    font-weight: 650;
  }

  small {
    color: var(--color-copper);
    font-size: var(--font-size-0);
    line-height: var(--line-height-0);
    font-variant-numeric: tabular-nums;
  }

  .arrow {
    font-size: var(--font-size-2);
    line-height: 1;
  }
}

.guide .sign.next a {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

@media (max-width: 42rem) {
  .guide.split {
    grid-template-columns: 1fr;
  }

  .guide .sign:only-child {
    grid-column: auto;
    width: 100%;
  }
}

/* filter bar */
.filter-bar-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75em;
  margin-block: var(--space-m);
}

.filter-bar-label {
  color: var(--color-copper);
  font-size: var(--font-size-0);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .1rem;
}

/* clear chip */
.filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.3em 0.7em;
  border: 1px solid var(--color-ink);
  border-radius: var(--rounded);
  color: var(--color-ink);
  font-size: var(--font-size-0);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);

  svg {
    width: 0.9em;
    height: 0.9em;
  }

  &:hover,
  &:focus-visible {
    border-color: var(--color-signal);
    color: var(--color-signal);
  }
}

.filter-bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5em;
  font-size: var(--font-size-0);

  input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.45em 0.85em;
    border: 1px solid var(--color-ink);
    border-radius: var(--rounded);
    color: var(--color-ink);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .08rem;
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition);

    svg {
      width: 1em;
      height: 1em;
      flex: none;
    }
  }

  .filter-tag:hover,
  .filter-tag:focus-visible,
  input:focus-visible + .filter-tag {
    border-color: var(--color-signal);
    color: var(--color-signal);
  }

  /* current filter */
  input:checked + .filter-tag,
  .filter-tag[aria-current="page"] {
    background: var(--color-signal);
    border-color: var(--color-signal);
    color: var(--color-wall);
    pointer-events: none;
  }

  /* inert marker */
  .filter-tag.disabled {
    opacity: 0.44;
    cursor: default;
    pointer-events: none;
  }
}

/* meta plaque */
dl.meta {
  --meta-label-col: 7rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-block: var(--space-l);
  padding-block: var(--space-m);
  line-height: var(--line-height-0);
  background-image: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in oklch, var(--color-frame) 70%, transparent) 10%,
    color-mix(in oklch, var(--color-frame) 70%, transparent) 90%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top;

  > div {
    display: grid;
    grid-template-columns: var(--meta-label-col) 1fr;
    column-gap: var(--space-m);
    align-items: start;
  }

  dt {
    position: sticky;
    top: var(--space-m);
    align-self: start;
    text-align: right;
    font-size: var(--font-size-0);
    font-weight: 600;
    font-family: var(--font-family-rounded, inherit);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-copper);
    margin: 0;
    padding-top: 0.15em;
  }

  dd {
    margin: 0;
    color: var(--color-ink);

    & > :first-child { margin-top: 0; }
    & > :last-child  { margin-bottom: 0; }

    & > a:not(.plaque) {
      color: var(--color-signal);
      text-decoration: none;
      border-bottom: 1px solid var(--color-signal-soft);
      overflow-wrap: anywhere;

      &:hover,
      &:focus-visible { border-bottom-color: var(--color-signal); }
    }
  }

  &.compact {
    margin: 0 0 var(--space-s);
    padding-block: 0;
    background-image: none;

    > div {
      display: flex;
      align-items: baseline;
      column-gap: var(--space-s);
    }

    dt {
      position: static;
      text-align: left;
      padding-top: 0;
    }
  }

  @media (max-width: 34rem) {
    > div { grid-template-columns: 1fr; row-gap: var(--space-xs); }

    dt {
      position: static;
      text-align: left;
      padding-top: 0;
    }
  }
}

/* plaque */
.plaque {
  display: inline-grid;
  grid-template-columns: auto;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-s);
  color-scheme: light;
  background: #fff;
  box-shadow: var(--shadow-flush);
  color: var(--color-ink);
  text-decoration: none;

  &:not(.wide):has(figure) { grid-template-columns: auto 1fr; }

  figure {
    grid-row: 1 / -1;
    margin: 0;
    width: 3rem;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-wall);

    img {
      width: 100%;
      height: 100%;
      border-radius: 0;
      object-fit: cover;
      display: block;
      filter: sepia(1) saturate(.65) hue-rotate(345deg) contrast(1.05);
    }
  }

  span {
    display: grid;
    /* gap: 0.1em; */
  }

  small {
    font-size: var(--font-size-0);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-copper);
  }

  strong {
    font-weight: 600;
    color: var(--color-title);
    line-height: var(--line-height-0);
    transition: color var(--transition);
  }

  cite {
    font-style: normal;
    font-size: var(--font-size-0);
    color: var(--color-copper);
  }

  @media (hover: hover) {
    &:hover {
      strong { color: var(--color-signal); }
      figure img { filter: none; }
    }
  }
  &:focus-visible {
    strong { color: var(--color-signal); }
    figure img { filter: none; }
  }

  /* wide variant */
  &.wide {
    display: grid;
    grid-template-columns: auto 1fr auto;
    /* gap: var(--space-m); */
    width: 100%;
    /* padding-inline: var(--space-m); */

    figure { width: 3.5rem; }

    &::after {
      content: "\2192";
      justify-self: end;
      font-size: var(--font-size-3);
      line-height: 1;
      color: var(--color-signal);
    }
  }
}

/* when header imgs go full */
body:is(.t-gallery, .t-series, .t-artworks, .t-fonts, .t-products, .t-serie) > main > header.page-header > figure {
  grid-column: full;
}

.section-header {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block-end: var(--space-s);

  > :is(h2, h3) {
    margin: 0;
    font-weight: 700;
    line-height: var(--line-height-2);
  }

  > .section-link {
    margin: 0;
  }
}

.section-link a {
  font-size: 0.9rem;
  opacity: 0.7;
  text-decoration: none;

  &:hover,
  &:focus-visible {
    opacity: 1;
  }
}

.section-link .label-short { display: none; }

@media (max-width: 34rem) {
  .section-header:has(.section-link) > :is(h2, h3) { font-size: 1.5rem; }
  .section-link .label-full { display: none; }
  .section-link .label-short { display: inline; }
}

/* wayfinding arrows */
.wayfinding-arrow {
  display: inline-block;
  margin-inline-start: .3em;
  color: var(--color-copper);
  font-weight: 500;
  transition: color var(--transition);
}

@media (hover: hover) {
  a:hover .wayfinding-arrow { color: var(--color-signal); }
}
a:focus-visible .wayfinding-arrow { color: var(--color-signal); }
/* might not use these */
body.t-collections > main > header {
  grid-column: content;
}
body.t-collections > main > section {
  grid-column: wide;
}

body.t-collection > main > header {
  grid-column: content;
}

body.t-collection > main > section {
  grid-column: wide;
}
body.t-collection > main > aside {
  grid-column: wide;
}

/* type defaults */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-title);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
h1 {
  font-size: var(--font-size-3);
}
h2 {
  font-size: var(--font-size-2);
}
h3 {
  font-size: var(--font-size-2);
}

.header-grid {
  position: relative;
  margin-block: 8vw;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(var(--space-s), 5vw, var(--space-l));

  .header-actions {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-left: auto;
    min-width: 0;
  }

  a.site-home {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--color-title);
    opacity: 1;
    text-transform: uppercase;
    transition: color .15s ease;

    /* matches nav.menu type */
    .site-name {
      font-family: var(--font-family-rounded);
      font-size: var(--font-size-0);
      font-weight: 500;
      letter-spacing: .1vw;
      line-height: var(--line-height-3);
    }

    /* observer keeps its copper */
    .site-mark {
      color: var(--color-copper);
      transition: color .15s ease;
    }

    &:hover,
    &:focus-visible {
      color: var(--color-signal);
      .site-mark {
        color: var(--color-signal);
      }
    }
    .site-logo {
      width: 2.25rem;
      aspect-ratio: 1;
      display: block;
      svg {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }

  .theme-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;

    .icon-sun  { display: none; }
    .icon-moon { display: block; }
    @media (prefers-color-scheme: dark) {
      .icon-sun  { display: block; }
      .icon-moon { display: none; }
    }
  }
}

.header-search {
  align-self: center;
  flex: 0 0 auto;
  pointer-events: none;

  &::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    background: color-mix(in oklch, var(--color-wall) 72%, transparent);
    backdrop-filter: blur(.5rem);
  }

  &[open]::before {
    visibility: visible;
    opacity: 1;
  }

  > summary {
    display: grid;
    place-items: center;
    color: var(--color-title);
    font-size: var(--font-size-0);
    line-height: var(--line-height-3);
    cursor: pointer;
    pointer-events: auto;
    list-style: none;
  }

  > summary::-webkit-details-marker {
    display: none;
  }

  > summary:hover,
  > summary:focus-visible {
    color: var(--color-signal);
  }

  &.is-current > summary {
    outline-color: currentColor;
    font-weight: 800;
  }

  &[open] > summary::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 10;
  }

  &[open] .header-search-dismiss {
    position: fixed;
    top: var(--edge);
    right: var(--edge);
    /* z-index: 1; */
    z-index: 12; /* above the click catcher, or it can't be pressed */
    display: block;
    padding: .5rem;
    color: var(--color-panel-ink);
    background: var(--color-panel);
    outline: 1px solid var(--color-frame);
    font-family: var(--font-family-rounded);
    font-size: var(--font-size-0);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
}

.header-search-icon {
  display: block;

  svg {
    display: block;
    width: 1em;
    height: 1em;
  }
}

.header-search-tray {
  position: fixed;
  z-index: 11;
  top: clamp(6rem, 20vh, 12rem);
  right: 0;
  left: 0;
  width: min(var(--content), calc(100vw - (var(--edge) * 2)));
  margin-inline: auto;
  min-width: 0;
  padding: 0;
  pointer-events: auto;

  .search-wrap {
    width: 100%;
    margin: 0;
  }
}

.header-search-dismiss {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .header-search {
    &::before {
      transition:
        opacity 1s ease-in .2s,
        visibility 1s .2s;
    }

    &[open]::before {
      transition:
        opacity 1s ease-out,
        visibility 1s;
    }

    &::details-content {
      position: relative;
      z-index: 11;
      content-visibility: visible;
      visibility: hidden;
      opacity: 0;
      transition:
        opacity 1s ease-in,
        visibility 1s;
    }

    &[open]::details-content {
      visibility: visible;
      opacity: 1;
      transition:
        opacity 1s ease-out,
        visibility 1s;
    }
  }
}

@media (max-width: 34rem) {
  .header-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-xs);
  }

  .header-grid a.site-home {
    grid-column: 1;
    grid-row: 1;
  }

  .header-grid .header-actions {
    grid-column: 1;
    grid-row: 2;
    margin-left: 0;
    justify-content: flex-start;
  }
}

nav.menu {
  color: var(--color-title);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  min-width: 0;
  align-items: center;
  line-height: var(--line-height-3);
  font-family: var(--font-family-rounded);
  font-size: var(--font-size-0);
  font-weight: 500;
  letter-spacing: .1vw;
  text-transform: uppercase;
  a,
  button {
    display: block;
  }

  svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  a:hover,
  a:focus-visible {
    transform: none;
  }
}

:is(nav.menu a, nav.menu button, .header-search > summary) {
  padding: .5rem;
  outline: 1px solid color-mix(in oklch, currentColor 35%, transparent);
  transition: color .15s ease, background-color .15s ease, outline-color .15s ease;
}

:is(nav.menu a, nav.menu button, .header-search > summary):is(:hover, :focus-visible),
nav.menu a:is([aria-current], [data-open]) {
  outline-color: currentColor;
}

@media (prefers-color-scheme: light) {
  html:has(#dark-toggle:checked) .theme-toggle .icon-sun  { display: block; }
  html:has(#dark-toggle:checked) .theme-toggle .icon-moon { display: none; }
}
@media (prefers-color-scheme: dark) {
  html:has(#dark-toggle:checked) .theme-toggle .icon-sun  { display: none; }
  html:has(#dark-toggle:checked) .theme-toggle .icon-moon { display: block; }
}

.logo summary {
  color: var(--color-title);
  list-style: none;
}

.logo summary span {
  padding: 1rem;
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}

.logo summary svg {
  margin-right: .75rem;
}

.logo summary svg {
  width: 1.25rem;
  height: 1.25rem;
}

.logo summary::-webkit-details-marker {
  display: none;
}

.logo summary:focus {
  outline: 0;
}

.killer-button {
  padding: .75rem 1rem;
  display: inline-block;
  background: var(--color-frame);
  border-radius: var(--rounded);
  border: 1px solid var(--color-frame);
}

.killer-button svg {
  width: 1.25rem;
  height: 1.25rem;
}

.killer-button svg * {
  fill: currentColor;
}

header.header .site-home {
  display: flex;
  place-items: center;
}

header.header .site-home img.site-logo {
  width: 1.25rem;
  aspect-ratio: 1;
  margin-right: .25rem;
  vertical-align: baseline;
  display: inline-block;
}

body > .lights {
  position: fixed;
  inset: 0 0 auto auto;
  z-index: 999;
  opacity: .5;
  transition: opacity .3s ease;
  &:hover {
    opacity: 1;
  }
}
body:has(.lightbox-open:target) > .lights {
  opacity: 0;
  pointer-events: none;
}

/* lightbox scrim — ::after only; ::before belongs to atmosphere.css */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  background-color: var(--lb-scrim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

body:has(.lightbox-open:target)::after {
  opacity: 1;
  visibility: visible;
}
#dark-toggle { display: none; }

.theme-toggle {
  cursor: pointer;
  display: flex;
  aspect-ratio: 1;
  place-content: center;
  height: max(2rem, 6vw);
  place-items: center;
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  display: grid;
  place-items: center;
  color: var(--color-copper);
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: grid; }

@media (prefers-color-scheme: dark) {
  .theme-toggle .icon-sun  { display: grid; }
  .theme-toggle .icon-moon { display: none; }
}
@media (prefers-color-scheme: light) {
  html:has(#dark-toggle:checked) .theme-toggle .icon-sun  { display: grid; }
  html:has(#dark-toggle:checked) .theme-toggle .icon-moon { display: none; }
}
@media (prefers-color-scheme: dark) {
  html:has(#dark-toggle:checked) .theme-toggle .icon-sun  { display: none; }
  html:has(#dark-toggle:checked) .theme-toggle .icon-moon { display: grid; }
}

/* deck toggle: rig, hanger, deck, faces, cast shadow */
.theme-toggle .deck-rig { display: none; }

@media (hover: hover) and (pointer: fine) {
  body > .lights {
    opacity: .6;
    transition: opacity 1s ease 3s;

    --deck-park: -5rem;
    --deck-lean: 0deg;
    --deck-drop: 3px;
    --deck-blur: 2px;
    --deck-enter-slide: linear(0, .06 15%, .34 34%, .78 56%, 1.03 75%, 1.005 88%, 1);
    --deck-enter-lean: cubic-bezier(.6, 0, .25, 1.35);
    --deck-exit-slide: cubic-bezier(.55, 0, .25, 1);
    --deck-exit-lean: cubic-bezier(.5, 0, .6, 1);
    --deck-shadow-change: 1s ease-in-out;

    .theme-toggle { position: relative; }

    /* wall label for the switch */
    :is(.icon-sun, .icon-moon) {
      position: absolute;
      top: 2.5rem;
      left: 50%;
      translate: -50%;
      width: 1.375rem;

      svg { display: block; width: 100%; height: auto; }
    }

    /* deck-rig: fixed wrapper and cast shadow */
    .deck-rig {
      position: absolute;
      inset: 0;
      display: block;
    }

    .deck-rig::before {
      content: "";
      position: absolute;
      top: .375rem;
      left: 50%;
      width: 1.375rem;
      height: 5.5rem;
      border-radius: 999px;
      background-color: oklch(14% 0.035 60 / .5);
      translate: -50% calc(var(--deck-park) + var(--deck-drop));
      rotate: var(--deck-lean);
      filter: blur(var(--deck-blur));
      opacity: .75;
      transition:
        rotate .35s var(--deck-exit-lean) .45s,
        translate .5s var(--deck-exit-slide) .65s,
        opacity var(--deck-shadow-change) .25s,
        filter var(--deck-shadow-change) .25s;
    }

    /* deck-hanger: slide and lean */
    .deck-hanger {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: start center;
      padding-top: .375rem;
      perspective: 40rem;
      transform-origin: 50% 3.125rem;
      rotate: var(--deck-lean);
      translate: 0 var(--deck-park);
      transition:
        rotate .35s var(--deck-exit-lean) .45s,
        translate .5s var(--deck-exit-slide) .65s;
    }

    &:is(:hover, :focus-within) {
      opacity: 1;
      transition: opacity .2s ease-in;
      --deck-park: 0rem;
      --deck-lean: 30deg;
      --deck-drop: 26px;
      --deck-blur: 9px;

      .deck-rig::before {
        opacity: .3;
        transition:
          rotate .5s var(--deck-enter-lean) .1s,
          translate .55s var(--deck-enter-slide),
          opacity var(--deck-shadow-change) .2s,
          filter var(--deck-shadow-change);
      }

      .deck-hanger {
        transition:
          translate .55s var(--deck-enter-slide),
          rotate .5s var(--deck-enter-lean) .15s;
      }
    }

    /* deck: 3D flipping board */
    .deck {
      position: relative;
      width: 1.375rem;
      aspect-ratio: 1 / 4;
      transform-style: preserve-3d;
      transition: transform .7s
        linear(0, .22 18%, .66 38%, 1.04 56%, 1.11 66%, .97 80%, 1.005 91%, 1);
    }

    .deck-face {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      border-radius: 999px;
      backface-visibility: hidden;

      svg {
        display: block;
        height: auto;
      }
    }

    .deck-art {
      background: var(--mds-liv-plaster);
      color: var(--mds-liv-persimmon);
      svg { width: 78%; }
    }

    .deck-grip {
      background: var(--mds-liv-ink);
      color: oklch(82% 0.155 92);
      transform: rotateY(.5turn);
      svg { width: 66%; }
    }
  }

  html:has(#dark-toggle:checked) body > .lights .deck { transition: none; }

  /* system theme: unchecked pose and checked trick */
  @media (prefers-color-scheme: light) {
    body > .lights .deck { transform: rotateY(.5turn); }
    html:has(#dark-toggle:checked) body > .lights .deck {
      transform: rotateY(1turn);
      animation: deck-kickflip .6s;
    }
  }

  @media (prefers-color-scheme: dark) {
    body > .lights .deck { transform: rotateY(0turn); }
    html:has(#dark-toggle:checked) body > .lights .deck {
      transform: rotateY(.5turn);
      animation: deck-treflip .8s;
    }
  }

  /* kickflip */
  @keyframes deck-kickflip {
    0%   { transform: rotateY(.5turn); animation-timing-function: cubic-bezier(.5, 0, .15, 1); }
    55%  { transform: rotateY(1.07turn); animation-timing-function: cubic-bezier(.45, 0, .4, 1); }
    75%  { transform: rotateY(.96turn); animation-timing-function: cubic-bezier(.4, 0, .45, 1); }
    100% { transform: rotateY(1turn); }
  }

  /* treflip */
  @keyframes deck-treflip {
    0%   { transform: rotateY(0turn)   rotate(0turn); animation-timing-function: cubic-bezier(.5, 0, .15, 1); }
    55%  { transform: rotateY(.57turn) rotate(1.05turn); animation-timing-function: cubic-bezier(.45, 0, .4, 1); }
    75%  { transform: rotateY(.46turn) rotate(.99turn); animation-timing-function: cubic-bezier(.4, 0, .45, 1); }
    100% { transform: rotateY(.5turn)  rotate(1turn); }
  }

  /* narrow screens */
  @media (max-width: 50rem) {
    body > .lights { --deck-park: -6.25rem; }
    body > .lights :is(.icon-sun, .icon-moon) { top: .5rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    body > .lights .deck-hanger,
    body > .lights .deck,
    body > .lights .deck-rig::before { transition: none; }
    body > .lights .deck { animation: none !important; }
  }
}

/* tags */
.tags {
  margin-block: 0 1.5rem;
}

.tags ul,
ul.tags,
ul.taglist {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9em;
  margin-block: 0 1.5rem;
  padding: 0;
  list-style: none;
}

.tags li,
ul.tags li,
ul.taglist li {
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  color: var(--color-copper);
  font-family: var(--font-family-rounded);
  font-size: var(--font-size-0);
  line-height: var(--line-height-0);
}

.tags a {
  display: inline-block;
  color: var(--color-copper);
  text-decoration: none;
  text-transform: uppercase;
  text-underline-offset: 0.18em;
}

.tags a[aria-current] {
  color: var(--color-signal);
  font-weight: 700;
}

/* the closing index link — leads to the full tag drawer on /search */
.tags li.tags-index a {
  color: var(--color-title);
  font-weight: 650;
}

.tags a:hover,
.tags a:focus-visible {
  color: var(--color-signal);
  text-decoration: underline;
}

/* linklist molecule */
.navlist:is(.is-pill, .is-outline, .is-plain) {
  & .navlist-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & .navlist-item {
    margin: 0;
  }

  & a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5em 0.9em;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--rounded);
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease,
      border-color 0.15s ease, opacity 0.15s ease;
  }

  & .navlist-icon {
    line-height: 0;
  }

  & .navlist-count {
    font-variant-numeric: tabular-nums;
    font-size: 0.85em;
    opacity: 0.7;
  }

  &.is-small a {
    padding: 0.3em 0.65em;
    font-size: 0.8rem;
  }

  &.is-large a {
    padding: 0.7em 1.15em;
    font-size: 1.05rem;
  }
}

/* linklist looks */
.navlist.is-pill a {
  border-radius: 999px;
  background: var(--color-panel);
  color: var(--color-panel-ink);
  opacity: 0.75;
}

.navlist.is-pill a:hover,
.navlist.is-pill a:focus-visible {
  opacity: 1;
}

.navlist.is-pill a[aria-current] {
  opacity: 1;
  background: var(--color-signal);
  color: var(--color-wall);
  font-weight: 700;
}

.navlist.is-outline a {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.navlist.is-outline a:hover,
.navlist.is-outline a:focus-visible {
  border-color: var(--color-signal);
  color: var(--color-signal);
}

.navlist.is-outline a[aria-current] {
  background: var(--color-signal);
  border-color: var(--color-signal);
  color: var(--color-wall);
  font-weight: 700;
}

.navlist.is-plain a {
  padding-inline: 0.2em;
  color: var(--color-ink);
}

.navlist.is-plain a:hover,
.navlist.is-plain a:focus-visible {
  color: var(--color-signal);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.navlist.is-plain a[aria-current] {
  color: var(--color-signal);
  font-weight: 700;
}

section {
  margin: var(--space-m) 0;
  padding: var(--space-m) 0;
}

section > h2 {
  grid-column: content;
  margin-block: var(--space-xl) var(--space-s);
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
}

/* sections and grids */
main > section > header,
article > section > header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2vw 0;
}

main > section > header h3,
article > section > header h3 {
  font-weight: 600;
}

.grid {
  --columns: 12;
  --gutter: clamp(1rem, 4vw, 3rem);
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;

  &.grid-2 {
    grid-template-columns:
      repeat(
        auto-fill,
        minmax(
          min(100%, max(22rem, calc((100% - var(--gutter)) / 2))),
          1fr
        )
      );
  }

  &.grid-3 {
    grid-template-columns:
      repeat(
        auto-fill,
        minmax(
          min(100%, max(18rem, calc((100% - 2 * var(--gutter)) / 3))),
          1fr
        )
      );
  }

  &.grid-6 {
    grid-template-columns:
      repeat(
        auto-fill,
        minmax(
          min(100%, max(9rem, calc((100% - 5 * var(--gutter)) / 6))),
          1fr
        )
      );
  }

  &:is(.grid-2, .grid-3, .grid-6) > * {
    min-width: 0;
  }
}

.grid > .column {
  margin-bottom: var(--gutter);
}

.autogrid {
  --gutter: clamp(1rem, 4vw, 3rem);
  --min: 10rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
  margin-block-end: 5rem;
}

/* shop grid */
.shop-grid {
  --gutter: clamp(1rem, 4vw, 3rem);
  container: shop-grid / inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  grid-auto-flow: dense;
  gap: var(--gutter);
  margin-block-end: 5rem;

  @container shop-grid (min-width: 48rem) {
    > li:first-child {
      grid-column: span 2;
      grid-row: span 2;
    }
  }
}

/* promo grid */
.promo-grid {
  --gutter: 3vw;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        min(100%, max(14rem, calc((100% - 2 * var(--gutter)) / 3))),
        1fr
      )
    );
  gap: var(--gutter);
  margin-block: 5vw;

  a {
    display: block;
  }

  figcaption {
    display: flex;
    justify-content: space-between;
    padding-top: .75rem;
    line-height: 1.5em;

    span {
      opacity: .8;
      font-size: var(--font-size--1);
    }
  }
}

/* wayfinding plaques */
body > .promos {
  grid-column: wide;
  /* full break below the threshold */
  margin-block: var(--space-xl) var(--space-l);
}

/* promo gutters match the threshold (space-m) */
body > .promos ul {
  gap: var(--space-m);
}

.wayfinding-plaques ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wayfinding-plaques a {
  color-scheme: light;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--space-s);
  padding: var(--space-s);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-flush);
  color: var(--color-ink);
  text-decoration: none;
}

@media (hover: hover) {
  .wayfinding-plaques a:hover strong { color: var(--color-signal); }
  .wayfinding-plaques a:hover figure img { filter: none; }
}
.wayfinding-plaques a:focus-visible strong { color: var(--color-signal); }
.wayfinding-plaques a:focus-visible figure img { filter: none; }

.wayfinding-plaques .arrow {
  font-size: var(--font-size-2);
  line-height: 1;
}

.wayfinding-plaques figure {
  block-size: clamp(3rem, 5vw, 4rem);
  margin: calc(var(--space-s) * -1) calc(var(--space-s) * -1) 0;
  overflow: hidden;
}

.wayfinding-plaques figure img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  filter: sepia(1) saturate(.65) hue-rotate(345deg) contrast(1.05);
  object-fit: cover;
}

.wayfinding-plaques .plaque-copy {
  display: grid;
  gap: .35rem;
}

.wayfinding-plaques .plaque-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
}

.wayfinding-plaques strong {
  color: var(--color-title);
  font-size: var(--font-size-1);
  font-weight: 650;
  line-height: var(--line-height-1);
  transition: color var(--transition);
}

.wayfinding-plaques small {
  color: var(--color-copper);
  font-size: var(--font-size-0);
  line-height: var(--line-height-0);
}

.products-mini {
  /* named container for the mobile row-cap query below */
  container: decks / inline-size;
  grid-column: wide;
  display: flex;
  /* width: 90vw; */
  padding: 5vw 0;
  justify-content: center;
  flex-wrap: wrap;
  /* grid-auto-columns: minmax(110px, 1fr); */
  gap: 2vw;

  .products-mini-link {
    position: relative;
    display: flex;
    width: 120px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/3;
    transition: transform 0.5s ease;

    .product-mini-thumb {
      position: relative;
      z-index: 5;
      width: auto;
      height: 100%;
      max-height: 100%;
      max-width: none;
    }

    .sh-shadow {
      position: absolute;
      left: auto;
      top: auto;
      right: auto;
      bottom: auto;
      z-index: 1;
      width: 70%;
      height: 90%;
      max-width: 100%;
      border-radius: 100px;
      --warm-shade-70: oklch(30% 0.05 55 / 0.7);
      background-color: var(--warm-shade-70);
      filter: blur(3px);
      pointer-events: none;
      transform: translate(10px, 30px);
      transition: transform 0.5s ease, opacity 0.5s ease;
    }

    @media (hover: hover) {
      /* acquired decks: no hover */
      &:not(.sold):hover .sh-shadow {
        transform: translate(10px, 100px);
        opacity: 0.5;
        filter: blur(7px);
      }
    }

    .sh-highlight {
      position: absolute;
      left: auto;
      top: auto;
      right: auto;
      bottom: auto;
      z-index: 5;
      width: 70%;
      height: 90%;
      max-width: 100%;
      border-radius: 100px;
      --warm-shine-13: rgba(255, 185, 135, 0.13);
      background-color: var(--warm-shine-13);
      filter: blur(16px);
      pointer-events: none;
      transform: translate(-10px, -10px);
      transition: opacity 0.5s ease;
    }

    @media (hover: hover) {
      &:not(.sold):hover .sh-highlight {
        opacity: 0.1;
      }
    }

    .soldot {
      position: absolute;
      top: 4%;
      right: 8%;
      bottom: auto;
      left: auto;
      z-index: 5;
      color: rgb(255, 0, 43);
      font-weight: 700;
      line-height: 1;
    }
  }
}

/* mobile deck row-cap */
@media (max-width: 40rem) {
  /* 2 columns fit → two rows = 4 items */
  .products-mini-link:nth-child(n+5) {
    display: none;
  }

  @container decks (min-width: 24rem) {
    /* 3 columns fit → two rows = 6 items */
    .products-mini-link:nth-child(n+5) {
      display: flex;
    }
    .products-mini-link:nth-child(n+7) {
      display: none;
    }
  }

  @container decks (min-width: 32rem) {
    /* 4 columns fit → two rows = 8 items */
    .products-mini-link:nth-child(n+7) {
      display: flex;
    }
    .products-mini-link:nth-child(n+9) {
      display: none;
    }
  }
}

@media (hover: hover) {
  /* only unsold decks hover */
  .products-mini .products-mini-link:not(.sold):hover:nth-child(3n+1) {
    transform: scale(1.1) rotate(-3deg);
  }
  .products-mini .products-mini-link:not(.sold):hover:nth-child(3n+2) {
    transform: scale(1.1) rotate(1deg);
  }
  .products-mini .products-mini-link:not(.sold):hover:nth-child(3n+3) {
    transform: scale(1.1) rotate(3deg);
  }
}

.feed-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-left: 0.6em;
  vertical-align: middle;
  color: var(--color-signal);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
}

.feed-link svg {
  width: 0.95em;
  height: 0.95em;
}

.feed-link:hover,
.feed-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* a closer look — shared by artwork + product */
.closer-look {
  grid-column: wide;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);

  figure { margin: 0; }

  img {
    display: block;
    width: 100%;
    height: auto;
  }

  .closer-caption {
    margin-top: var(--space-xs);
    font-size: var(--font-size-0);
    color: var(--color-copper-dim);

    p { margin: 0; }
  }
}

/* css only lightbox, baby */
figure:has(> a.lightbox-link) { position: relative; }

figure > a.lightbox-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  border: none;
  cursor: zoom-in;
}

figure:has(> a.lightbox-link) > figcaption {
  position: relative;
  z-index: 2;
}

.lightbox-open {
  display: flex;
  place-items: center;
  position: fixed;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  content-visibility: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  transition: opacity 0.4s ease,
    visibility 0.4s ease allow-discrete,
    content-visibility 0.4s ease allow-discrete;
  font-weight: 900;
  line-height: var(--line-height-3);
  z-index: 100;
}

.lightbox-open:target {
  opacity: 1;
  visibility: visible;
  content-visibility: visible;
}

.lightbox-open .closer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  color: transparent;
  cursor: zoom-out;
}

.lightbox-open figure {
  z-index: 107;
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  max-height: 92vh;
}

.lightbox-open figure :is(figcaption, a) {
  pointer-events: auto;
}

/* figure-scoped to beat ".text img" */
.lightbox-open figure img {
  width: 97vw;
  height: 100%;
  max-width: 97vw;
  min-height: 0;
  object-fit: contain;
  position: relative;
  flex: 1 1 auto;
}

/* prev/next plaques */
.lightbox-open a.lb-link {
  position: absolute;
  bottom: 1.5rem;
  top: auto;
  z-index: 108;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.5rem, 6vmin, 3.5rem);
  aspect-ratio: 3 / 4;
  padding: 0;
  border: none;
  color-scheme: light;
  background: #fff;
  color: var(--color-ink);
  box-shadow: var(--color-shade);
  font-size: var(--font-size-2);
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  opacity: 0.92;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.lightbox-open a.lb-link.prev { left: 1.5rem; }
.lightbox-open a.lb-link.next { right: 1.5rem; }

.lightbox-open a.lb-link:hover,
.lightbox-open a.lb-link:focus-visible { opacity: 1; }

/* close */
.lightbox-open a.x {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 109;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-signal);
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.lightbox-open a.x svg {
  width: 1.1rem;
  height: 1.1rem;
}

.lightbox-open a.x:hover,
.lightbox-open a.x:focus-visible {
  opacity: 1;
  transform: scale(1.06);
}

.lightbox-open a:focus-visible {
  outline: 3px solid var(--color-signal);
  outline-offset: 3px;
}

/* plaque caption */
.lightbox-open figure figcaption {
  margin-top: 0;
  padding: 0.5rem 1rem;
  font-weight: initial;
  flex: 0 0 auto;
  background: var(--color-wall);
  color: var(--color-ink);
}

.lightbox-open figcaption .lb-credit {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85em;
  color: var(--color-copper);
}


/* prose text */
.intro {
  margin-bottom: var(--space-m);
  line-height: var(--line-height-2);
}

.text {
  --dim-grey-alt: #50483e;
  --orange-red: #fc3a0a;
  --grey: #9b8b71;

  &:first-child {
    margin-top: 0;
  }
  &:last-child {
    margin-bottom: 0;
  }
  & p,
  & ul,
  & ol {
    margin-bottom: 1lh;
  }

  & > :last-child {
    margin-bottom: 0;
  }
  & p,
  & li,
  & dt,
  & dd {
    max-width: 65ch;
    line-height: var(--line-height-1);
    text-wrap: pretty;
  }

  & a {
    padding-inline: .4vw;
    overflow-wrap: anywhere;
    /* text-decoration-line: underline; */
    /* text-decoration-color: var(--color-signal); */
    /* text-decoration-thickness: 1px; */
    text-underline-offset: 0.2em;
    text-decoration: underline 1px var(--color-signal);
    outline: 1px solid transparent;
    line-break: loose;
    &:visited {
      color: var(--color-ink);
      text-decoration-color: var(--color-signal-mid);
    }

    @media (hover: hover) {
      &:hover {
        color: var(--color-signal);
        text-decoration-color: var(--color-signal);
        outline-color: var(--color-signal);
      }
    }
  }
  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    text-wrap: pretty ;
  }
   & h1 {
    margin-bottom: var(--space-m);
    line-height: var(--line-height-3);

  }

      & h2 {
    font-size: var(--font-size-2);
    font-weight: 600;
    margin-bottom: 0.75lh;
    line-height: var(--line-height-3);
  }

  & h3 {
    font-weight: 600;
    margin-bottom: 0.5lh;
    line-height: var(--line-height-2);
  }

  & hr {
    margin: var(--space-xl) 0;
  }

  & code {
    font-family: var(--font-family-mono);
    background: var(--color-frame);
    padding: 0 .5rem;
    display: inline-block;
    color: var(--color-title);
  }

  & pre {
    margin: var(--space-m) 0;
    background: var(--color-panel);
    color: var(--color-panel-ink);
    padding: 1.5rem;
    overflow-x: scroll;
    overflow-y: hidden;
    line-height: 1.5rem;

    & code {
      padding: 0;
      background: none;
      color: inherit;
    }
  }

  & dl:not(.meta) {
    border-block: 1px solid var(--color-frame);
    padding-block: 1vw;
    display: flex;
    gap: 1vw;
    flex-wrap: wrap;

    & span {
      display: inline-block;
    }

    & dt {
      text-transform: uppercase;
      color: var(--color-copper);
      font-weight: 600;
      margin: 1vw 0 0.5vw;
      font-family: var(--font-family-rounded);
      letter-spacing: .1em;
    }

    & dd {
      color: var(--color-copper);
      border: 1px solid var(--color-frame);
      display: inline-block;
      padding: 0.2vw 0.8vw;
      margin: 0 0.5vw 0.8vw 0;

      &:has(a) {
        border: none;
        padding: 0;
      }
    }
  }

  & ul {
    line-height: 1.2;
    padding-inline-start: 1.25em;
    & li {
      list-style: disc;
      &::marker { color: var(--color-copper); }
      &+li {
        margin-block-start: .5rem;
      }
    }
  }

  & ol {
    line-height: 2;
    padding-inline-start: 1.5em;
    & li {
      list-style: decimal;
      &::marker { color: var(--color-copper); }
    }
  }
  & blockquote {
    max-width: 65ch;
    display: flex;
    flex-direction: column;
    gap: 1lh;
    /* border-left: 2px solid currentColor; */
    /* padding-left: 1rem; */
    margin: var(--space-m) 0;
    color: var(--color-title);
    & p,
    & em {
      font-style: italic;
    }
    & *:nth-of-type(2n) {
      text-indent: 1rem;
    }
    & footer {
      text-align: right;
    }
  }

  & figure {
    margin: var(--space-m) 0;
  }

  & figcaption {
    padding-top: .75rem;
    color: var(--color-copper);
  }
}

hr {
  border: 0;
  background: var(--color-title);
  height: 2px;
  width: 1.5rem;
  margin: 3rem auto;
}

.intro {
  max-width: 40rem;
}

.intro *:not(:last-child) {
  margin-bottom: 1em;
}

.cta {
  background: var(--color-panel);
  color: var(--color-panel-ink);
  display: inline-flex;
  justify-content: center;
  padding: .5rem 1.5rem;
  border-radius: var(--rounded);
}

/* registrar's mark */
.folio {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-0);
  letter-spacing: 0.1em;
  color: var(--color-copper);
  opacity: .5;
}

.folio-stamp {
  margin-block-start: var(--space-s);
  font-size: var(--font-size-0);
  line-height: var(--line-height-0);
  color: oklch(from var(--color-ink) l c h / 0.35);

  span {
    font-family: var(--font-family-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  b {
    font-family: var(--font-family-mono);
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    letter-spacing: 0.08em;
  }
}

.box {
  background: var(--color-frame);
  border-radius: var(--rounded);
  padding: 1.5rem;
}

.img {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
  aspect-ratio: var(--w) / var(--h);
  border-radius: var(--rounded);
}

.img img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: var(--rounded);
}

.img[data-contain] img {
  object-fit: contain;
}

.img-caption,
.video-caption {
  color: var(--color-copper);
  font-size: var(--font-size-0);
  padding-top: .75rem;
  /* line-height: 1.5em; */
  line-height: var(--line-height-1);
}

/* video embeds */
figure.video {
  width: 100%;
  margin-block: 2rem;
  --w: 16;
  --h: 9;
}
figure.video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--w) / var(--h);
  border: 0;
  border-radius: 0;
}

/* navsiblings */

.navsiblings {
  grid-column: full;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-block: 2.5rem 3rem;
  background-color: var(--color-shade);

  /* eyebrow directory plaque */
  > a {
    padding: 0.35rem 1.1rem;
    background: #fff;
    box-shadow: var(--shadow-flush);
    text-decoration: none;
    font-size: var(--font-size-0);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #666;
    transition: color var(--transition);

    /* desktop hover — no motion */
    @media (hover: hover) {
      &:hover { color: var(--color-signal); }
    }
    &:focus-visible { color: var(--color-signal); }
  }

  /* plaque row */
  > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;

    > span {
      width: clamp(180px, 26vw, 320px);
      flex-shrink: 0;
    }

    /* exhibit plaques */
    > a {
      width: clamp(7rem, 26vw, 320px);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      padding: .75rem clamp(.75rem, 2vw, 1.5rem) 1.1rem;
      background: #fff;
      box-shadow: var(--shadow-flush);
      overflow: hidden;
      text-decoration: none;
      color: #111;

      /* desktop hover — no motion */
      @media (hover: hover) {
        &:hover {
          > span { color: var(--color-signal); }
          > div > span:first-child { color: var(--color-signal); }
          > figure img { filter: none; }
        }
      }
      &:focus-visible {
        > span { color: var(--color-signal); }
        > div > span:first-child { color: var(--color-signal); }
        > figure img { filter: none; }
      }

      > span {
        font-size: var(--font-size-3);
        line-height: 1;
        transition: color var(--transition);
      }

      > figure {
        margin: 0;

        img {
          display: block;
          /* width: 80px; */
          width: max(9vw, 80px);
          /* height: 80px; */
          border-radius: 0;
          filter: sepia(1) saturate(.65) hue-rotate(345deg) contrast(1.05);
        }
      }

      > div {
        display: flex;
        flex-direction: column;
        gap: .2rem;

        > span:first-child {
          font-size: var(--font-size-1);
          font-weight: 600;
          line-height: 1.2;
          transition: color var(--transition);
        }

        > span:last-child {
          font-size: var(--font-size-0);
          color: #666;
        }
      }

      &:last-child {
        align-items: flex-end;
        text-align: right;
      }
    }
  }
}

/* the site foot */

/* studio doorway */
body > .studio-threshold {
  grid-column: wide;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(16rem, .85fr);
  gap: var(--space-m);
  margin-block: 6rem 2rem;
  padding: 0;

  .plaque-link {
    color-scheme: light;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-flush);
    color: var(--color-ink);
    text-decoration: none;
  }

  .plaque-link:hover strong,
  .plaque-link:focus-visible strong {
    color: var(--color-signal);
  }

  .plaque-link:hover figure img,
  .plaque-link:focus-visible figure img {
    filter: none;
  }

  .plaque-link:focus-visible {
    outline: 2px solid var(--color-signal);
    outline-offset: 3px;
  }

  figure {
    margin: 0;
    overflow: hidden;
  }

  figure img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    filter: sepia(1) saturate(.65) hue-rotate(345deg) contrast(1.05);
    object-fit: cover;
  }

  .plaque-copy {
    display: grid;
    gap: .35rem;
    padding: var(--space-s);
  }

  .plaque-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs);
  }

  strong {
    color: var(--color-title);
    font-weight: 650;
    line-height: var(--line-height-1);
    transition: color var(--transition);
  }

  small {
    color: var(--color-copper);
    font-size: var(--font-size-0);
    line-height: var(--line-height-0);
  }

  .arrow {
    font-size: var(--font-size-2);
    line-height: 1;
  }

  .threshold {
    min-block-size: 100%;

    figure {
      block-size: clamp(8rem, 14vw, 13rem);
    }

    .plaque-copy {
      gap: .5rem;
      padding: clamp(1.25rem, 3vw, 2rem);
    }

    strong {
      font-size: var(--font-size-2);
    }
  }

  .notices {
    display: grid;
    align-content: start;
    gap: var(--space-xs);

    h3 {
      margin: 0;
      color: var(--color-copper);
      font-family: var(--font-family-rounded);
      font-size: var(--font-size--1);
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    ul {
      display: grid;
      /* matches the threshold's column gap — even gutters all around */
      gap: var(--space-m);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    figure {
      block-size: clamp(3.5rem, 6vw, 5rem);
    }

    strong {
      font-size: var(--font-size-1);
    }
  }

  @media (max-width: 42rem) {
    grid-template-columns: 1fr;
  }
}

body > .footer-doorway {
  grid-column: content;
  margin-block: 6rem 2rem;
}

/* guest book */
.register {
  --register-left-width: clamp(0rem, calc((100vw - 28rem) * .8), 25rem);

  grid-column: wide;
  color-scheme: light;
  position: relative;
  margin-block: 2rem;
  display: flex;
  min-block-size: 20rem;

  background: color-mix(in oklch, var(--color-wall) 88%, white);
  color: var(--color-ink);
  border: solid 1rem var(--color-copper);
  box-shadow: 0 -1px 1px #e5e2d5,
    1px 3px 3px color-mix(in oklch, var(--color-wall) 28%, black );

  .register-left,
  .register-right {
    box-shadow: 1px 3px 3px color-mix(in oklch, var(--color-copper) 28%, black ) ;
  }
  .register-left {
    flex: 0 1 var(--register-left-width);
    inline-size: var(--register-left-width);
    min-inline-size: 0;

    background: linear-gradient(90deg, #f9f8ea 20%, #fffa 60%, #e5e2d5 70%,var(--color-copper-20) 73%, #e5e2d5 100%);
  }
  .register-right {
    padding: clamp(1.5rem, 4vw, 3rem);
    flex: 1 1 0;
    min-width: 0;
    width: auto;

    /* background: linear-gradient(90deg, #e5e2d5 0%, #fffa 33%, #f9f8ea 86%); */

    /* --register-rule: color-mix(in oklch, var(--color-copper) 16%, transparent);
    --register-rule-step: 1.6rem;

    background:
      repeating-linear-gradient(
        to bottom,
        transparent 0 calc(var(--register-rule-step) - 1px),
        var(--register-rule) calc(var(--register-rule-step) - 1px) var(--register-rule-step)
      ),
      linear-gradient(90deg, #e5e2d5 0%, #fffa 33%, #f9f8ea 86%); */

  }
  .register-ribbon {
    --ribbon-half: .7rem;
    border: solid 1rem transparent ;
    border-width: 0 var(--ribbon-half) calc(var(--ribbon-half) * 3) var(--ribbon-half);
    border-inline-color: red;
    margin-bottom: -3rem;
    margin-top: -.1rem;
    box-shadow: 0 -1px 1px #e5e2d5;
    flex: 0 0 calc(var(--ribbon-half) * 1.9);

  }
  .page-number {
    position: absolute;
    bottom: 2rem;
    right: 3rem;
    display: block;
    color: color-mix(in oklch, var(--color-copper) 40%, white);
    z-index: 1;
    font-size: var(--font-size-0);
    transition: opacity .15s ease;
  }
  &:has(.letters-field input:valid) .page-number {
    opacity: 0;
  }
  :is(h2, h3) {
    font-weight: 600;
    margin-block: 0 .25rem;
    font-size: var(--font-size-2);
    text-wrap: pretty;
  }

  header p {
    margin-block: 0rem .75rem;
    color: var(--color-copper);
    max-width: 65ch;
    text-wrap: balance;
  }
  #letters {
    --register-rule: color-mix(in oklch, var(--color-copper) 16%, transparent);
    max-width: none;
    padding: 2vw 0;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0 calc(1.6rem - 1px),
      var(--register-rule) calc(1.6rem - 1px) 1.6rem
    );

  }

  .letters-wrap {
    max-inline-size: none;
  }

  .letters-lean {
    width: min(100%, 34rem);
  }
}

@media (max-width: 40rem) {
  .register {
    border-width: .75rem;

    .register-right {
      padding: clamp(1.25rem, 6vw, 2rem);
    }

    .register-ribbon {
      --ribbon-half: clamp(.42rem, 2vw, .7rem);
    }

    .page-number {
      right: clamp(1.25rem, 6vw, 2rem);
    }
  }
}

@media (max-width: 28rem) {
  .register .letters-lean {
    --action-inline-inset: .75rem;

    flex-wrap: wrap;

    .action-field {
      flex-basis: 100%;
    }

    button {
      inline-size: 100%;
      justify-content: center;
      border-top: 1px solid var(--action-border-color);
      border-left: 0;
      padding-block: .7rem;
    }
  }
}

/* footer directory */
/* signage rows — fixed label column, shared left grid line */
body > nav.footer-directory {
  grid-column: content;
  display: grid;
  gap: 1.25rem;
  margin-block: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-frame);

  .footer-group {
    display: grid;
    /* label column + list */
    grid-template-columns: 10rem 1fr;
    column-gap: 1.5rem;
    align-items: baseline;
  }

  /* labels stack above their lists once the room gets tight */
  @media (max-width: 42rem) {
    .footer-group {
      grid-template-columns: 1fr;
      row-gap: .2rem;
    }
  }

  h4 {
    margin: 0;
    color: var(--color-copper);
    font-family: var(--font-family-rounded);
    font-size: var(--font-size--1);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;

    /* linked heading */
    a {
      color: inherit;
      text-decoration: none;
    }
    a:hover,
    a:focus-visible {
      outline: none;
      color: var(--color-signal);
    }
  }

  /* topic links, reading left to right */
  ul {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: var(--line-height-2);
    font-weight: 500;

    a {
      display: block;
      padding: .3rem 0;
      color: var(--color-ink);
    }

    a:hover,
    a:focus-visible {
      outline: none;
      color: var(--color-signal);
    }

    /* current page */
    a[aria-current],
    a[data-open] {
      outline: none;
      color: var(--color-title);
      font-weight: 700;
    }
  }

}

/* the real footer — text lines only */
body > footer.footer {
  grid-column: content;
  display: grid;
  gap: 0rem;
  margin-block-start: 2rem;
  padding-block: 2rem 3rem;
  font-size: var(--font-size-0);
  p {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin: 0;
    color: var(--color-copper);
    & a span:last-of-type {
      margin-right: 0;
    }
  }

  /* fediverse line */
  p.footer-fedi {
    justify-content: flex-start;
    gap: .35rem;
  }

  /* socials, design side only */
  p.social {
    display: flex;
    gap: .5rem;
    margin: 0;
    padding: 0;
    .rss {
      margin-left: auto;
      display: inline-flex;
      gap: .6rem;
      a {
        display: inline-flex;
        align-items: center;
        gap: 0.3em;
      }

      svg {
        width: 0.9em;
        height: 0.9em;
      }
    }

    /* text-height validator plaques */
    .valid-badge {
      display: inline-flex;
      align-items: center;
      gap: .3em;
      padding-inline: .4em;
      border: 1px solid currentColor;
      /* the check keeps its bloom whatever glyph renders it — svg today, creamcarton someday */
      span {
        display: inline-flex;
        color: light-dark(var(--mds-liv-bloom), oklch(from var(--mds-liv-bloom) 0.72 c h));
      }
      svg {
        width: .7em;
        height: .7em;
      }
      &:hover,
      &:focus-visible {
        color: var(--color-signal);
      }
    }
  }

  /* closing signature — bottom center */
  .footer-wordmark {
    display: block;
    justify-self: center;
    block-size: calc(var(--font-size-2) * .8);
    margin-block-start: var(--space-m);
    color: var(--color-copper);
    svg {
      display: block;
      inline-size: auto;
      block-size: 100%;
    }
  }

  .footer-title {
    /* display: flex; */
    /* align-items: baseline; */
    /* gap: 1rem; */
    line-height: 2;
    font-size: var(--font-size-2);
    font-weight: 700;
    margin: 0;
    & span {
      /* font-size: var(--font-size-1); */
    }
    a {
      /* line-height: 2; */
      /* display: inline; */
    }
    /* current studio lights up */
    & a[aria-current] {
      color: var(--color-signal);
    }
  }
}

.top-plaque {
  position: fixed;
  z-index: 90;
  inset-block-end: max(var(--space-s), env(safe-area-inset-bottom));
  inset-inline-end: max(var(--space-s), env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.55rem;
  color-scheme: light;
  background: #fff;
  color: var(--color-ink);
  border: 1px solid color-mix(in oklch, var(--color-frame) 75%, white);
  box-shadow: var(--shadow-flush);
  font-size: var(--font-size-0);
  font-weight: 650;
  line-height: 1;
  text-decoration: none;

  span:first-child {
    color: var(--color-signal);
    font-size: var(--font-size-1);
    line-height: 0.8;
  }

  &:hover,
  &:focus-visible {
    opacity: 1;
    color: var(--color-title);
    outline-color: var(--color-signal);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .top-plaque {
    opacity: 0.38;
    transform: translateY(0.35rem);
    transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);

    &:hover,
    &:focus-visible {
      transform: translateY(0);
      box-shadow: var(--color-shade);
    }
  }

  @supports (animation-timeline: scroll()) {
    .top-plaque {
      opacity: 0;
      animation: top-plaque-reveal linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 15vh;
    }

    .top-plaque:hover,
    .top-plaque:focus-visible {
      opacity: 1;
    }
  }
}

@keyframes top-plaque-reveal {
  from { opacity: 0; }
  to { opacity: 0.38; }
}

/* action forms — shared by letters signup + search */
.action-form {
  --action-form-width: 24rem;
  --action-font-size: var(--font-size-1);
  --action-line-height: var(--line-height-0);
  --action-block-size: clamp(2.5rem, 2.5lh, 2.75rem);
  --action-inline-inset: 1rem;
  --action-border-color: color-mix(in oklch, var(--color-frame) 55%, var(--color-copper));

  display: flex;
  align-items: stretch;
  width: min(100%, var(--action-form-width));
  min-block-size: var(--action-block-size);
  border: 1px solid var(--action-border-color);
  border-radius: var(--rounded);
  background: var(--color-wall);
  font-size: var(--action-font-size);
  line-height: var(--action-line-height);
  overflow: hidden;
  transition: min-block-size .2s ease, border-color .15s ease, box-shadow .15s ease;
}

.action-form:focus-within {
  --action-border-color: var(--color-signal);

  box-shadow: 0 0 0 1px var(--color-signal);
}

.action-field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}

.action-field input {
  width: 100%;
  min-width: 0;
  min-block-size: var(--action-block-size);
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  padding: .45lh var(--action-inline-inset);
  white-space: nowrap;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  transition: min-block-size .2s ease, padding-block .2s ease;
}

.action-field input:focus {
  outline: none;
  text-overflow: clip;
}

.action-field input:focus,
.action-field input:not(:placeholder-shown) {
  padding-block: .75lh .2lh;
}

.action-label-visual {
  position: absolute;
  left: var(--action-inline-inset);
  right: var(--action-inline-inset);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-copper);
  font-size: inherit;
  line-height: inherit;

  font-weight: 400;
  pointer-events: none;
  transition: transform .4s ease-out .2s , font-size .35s ease-out , color .15s ease, top .2s ease-out .2s;
}

.action-field input:focus ~ .action-label-visual,
.action-field input:not(:placeholder-shown) ~ .action-label-visual {
  /* top: .2em; */
  top: .5rem;
  transform: translateY(0);
  font-family: var(--font-family-rounded, inherit);
  font-size: var(--font-size-0);
  /* font-weight: 600; */
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-signal);
}

.action-label-accessible {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.action-label-active {
  display: none;
}

.action-field input:focus ~ .action-label-switch .action-label-resting,
.action-field input:not(:placeholder-shown) ~ .action-label-switch .action-label-resting {
  display: none;
}

.action-field input:focus ~ .action-label-switch .action-label-active,
.action-field input:not(:placeholder-shown) ~ .action-label-switch .action-label-active {
  display: inline;
  white-space: nowrap;
}

.action-form button {
  flex: none;
  display: flex;
  align-items: center;
  gap: .4em;
  border: 0;
  border-left: 1px solid var(--action-border-color);
  background: transparent;
  color: var(--color-signal);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 600;
  padding-inline: clamp(.9em, 3vw, 1.4em);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.action-form button:hover,
.action-form button:focus-visible {
  background: var(--color-signal);
  color: #fff;
  outline: none;
}

@media (hover: none), (pointer: coarse), (max-width: 40rem) {
  .action-form button {
    background: var(--color-signal);
    color: #fff;
  }
}

.action-form:focus-within button {
  border-color: var(--color-signal);
}

.action-arrow {
  transition: transform .15s ease;
}
.action-form button:hover .action-arrow,
.action-form button:focus-visible .action-arrow {
  transform: translateX(3px);
}

.action-form-compact {
  --action-form-width: 24rem;

  .action-label-visual {
    font-size: var(--font-size-0);
  }
}

.action-form-compact:focus-within,
.action-form-compact:has(input:not(:placeholder-shown)) {
  --action-block-size: clamp(3rem, 3lh, 3.25rem);
}

.action-form-prominent {
  --action-form-width: 50rem;
  --action-font-size: var(--font-size-2);
  --action-line-height: var(--line-height-2);
  --action-block-size: clamp(4rem, 2.4lh, 4.5rem);
  --action-inline-inset: 1.25rem;

  button {
    font-size: var(--font-size-1);
  }
}

/* hint line */
.letters-wrap {
  inline-size: 100%;
  max-inline-size: 65ch;
}
.letters-lean {
  width: 90%;
}
/* hint + thanks share one clipped box */
.letters-note {
  position: relative;
  z-index: 2;
  display: grid;
  /* clip top only — the drawer's drop shadow must show */
  clip-path: inset(0 -30px -30px -30px);
}
.letters-hint,
.letters-thanks {
  grid-area: 1 / 1;
}

.letters-hint {
  margin: .4rem 0 0 .2rem;
  font-size: var(--font-size-0);
  color: var(--color-copper);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .2s ease, transform .2s ease;
}
.letters-wrap:has(.letters-lean:focus-within) .letters-hint {
  opacity: .85;
  transform: translateY(0);
}

/* thanks drawer — triggered by :valid, not focus! */
.letters-thanks {
  margin: 0;
  inline-size: 100%;
  max-inline-size: none;
  box-sizing: border-box;
  padding: .5rem .9rem;
  font-size: var(--font-size-0);
  line-height: var(--line-height-2);
  color: var(--color-bloom-ink);
  background: var(--color-bloom);
  border: 1px solid var(--color-bloom-ink);
  border-top: 0;
  border-radius: 0 0 var(--rounded) var(--rounded);
  transform: translateY(-100%);
  transition: transform .28s ease, box-shadow .28s ease;
}

/* drawer stays flush to the action form */
.register .letters-note > .letters-thanks {
  margin: 0;
  color: var(--color-bloom-ink);
  background: var(--color-bloom);
  border-color: var(--color-bloom-ink);
}
.letters-thanks-sig {
  font-style: italic;
  opacity: .85;
}
.letters-wrap:has(.letters-field input:valid) .letters-thanks {
  transform: translateY(0);
  /* slide down to cover the hint */
  /* inset above, drop below — gated to :valid */
  box-shadow:
    inset 0 3px 5px -3px oklch(40% 0.05 60 / 0.30),
    var(--color-shade);
}
.letters-wrap:has(.letters-field input:valid) .letters-lean {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .action-form,
  .action-label-visual,
  .action-form button,
  .action-arrow,
  .letters-hint,
  .letters-thanks {
    transition: none;
  }
}
/* /thanks styles live in thanks.css */

/* doorway */
.doorway {
  color-scheme: light;
  display: flex;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-flush);
  color: var(--color-ink);
  text-decoration: none;

  figure {
    flex: 0 0 clamp(5.5rem, 18vw, 9rem);
    margin: 0;
    overflow: hidden;
  }

  figure img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    filter: sepia(1) saturate(.65) hue-rotate(345deg) contrast(1.05);
    object-fit: cover;
  }

  .plaque-copy {
    display: grid;
    align-content: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: .35rem;
    padding: var(--space-s);
  }

  .plaque-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs);
  }

  strong {
    color: var(--color-title);
    font-size: var(--font-size-1);
    font-weight: 650;
    line-height: var(--line-height-1);
    transition: color var(--transition);
  }

  small {
    color: var(--color-copper);
    font-size: var(--font-size-0);
    line-height: var(--line-height-0);
  }

  .arrow {
    font-size: var(--font-size-2);
    line-height: 1;
  }

  &:hover strong,
  &:focus-visible strong {
    color: var(--color-signal);
  }

  &:hover figure img,
  &:focus-visible figure img {
    filter: none;
  }

  &:focus-visible {
    outline: 2px solid var(--color-signal);
    outline-offset: 3px;
  }

  @media (max-width: 32rem) {
    flex-direction: column;

    figure {
      flex-basis: auto;
      block-size: 4.5rem;
    }
  }
}

.map {
  --w: 2;
  --h: 1;
  aspect-ratio: var(--w) / var(--h);
  position: relative;
  overflow: hidden;
  background: var(--color-title);
  border-radius: var(--rounded);
}

.map iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--rounded);
}

@media screen and (min-width: 60rem) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .grid > .column {
    grid-column: span var(--columns);
  }
}

/* page headers */
.page-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0 auto 1rem;
  margin-inline: 0;
  font-weight: 600;
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
  letter-spacing: -0.035em;
}

.page-title[data-folio] {
  position: relative;
}

.page-title[data-folio]::before {
  content: attr(data-folio);
  position: absolute;
  top: 50%;
  right: calc(100% + 2rem);
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: "Creamcarton", "Gorton", var(--font-family-sans);
  font-size: .18em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: oklch(from var(--color-ink) l c h / 0.2);
}

@media (max-width: 48rem) {
  .page-title[data-folio]::before {
    content: none;
  }
}

h1.page-title {
  max-inline-size: 11ch;
}

h2.summary {
  margin: 0 auto 1rem;
  margin-inline: 0;
  /* max-inline-size: 16ch; */
  color: var(--color-copper);
  font-size: var(--font-size-2);
  font-weight: 500;
  line-height: var(--line-height-2);
  text-wrap: pretty;
}

/* linked collaborator identity — product + artwork headers */
:is(.page-header, .product-header) > .collaborator-credit {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3em;
  margin-block: 0 0.65em;
  color: var(--color-copper);
  font-size: var(--font-size-0);
}

.collaborator-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.collaborator-favicon {
  flex: none;
  inline-size: 1em;
  block-size: 1em;
  object-fit: contain;
  border-radius: 0.15em;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  margin: 0 0 var(--space-xs);
  color: oklch(from var(--color-ink) l c h / 0.7);

  a {
    color: inherit;
    text-decoration: none;

    &:hover,
    &:focus-visible {
      color: var(--color-signal);
    }
  }

  .feed-link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.28em;
    margin-left: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    vertical-align: baseline;

    svg {
      flex: none;
      display: block;
      width: 0.82em;
      height: 0.82em;
      transform: translateY(0.08em);
    }

    &:hover,
    &:focus-visible {
      text-decoration: none;
    }
  }
}

div.description {
  margin: 0 auto 1rem;
  margin-inline: 0;
  max-inline-size: 44rem;
  color: var(--color-ink);
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);

  > :first-child {
    margin-block-start: 0;
  }

  > :last-child {
    margin-block-end: 0;
  }
}

.page-header {
  margin-bottom: 2rem;
  /* display: grid;
  grid-template-columns: subgrid;
  grid-column: content; */
  .page-title {
    margin-block: auto;

    /* max-width: 39rem; */
    .t-post & {
      font-weight: 600;
      /* font-size: max(2rem, 6vw); */
      font-size: var(--font-size-3);
      /* line-height: 1.2; */
      line-height: var(--line-height-3);
      letter-spacing: -0.035em;
      margin-block: auto;
    }
  }

  .page-subtitle {
    /* font-size: var(--font-size-1); */
    opacity: .71;
    margin: 0 auto 1rem;
  }

  .page-summary,
  .page-intro {
    margin: 0 auto 1rem;
    /* font-size: var(--font-size-1); */
    opacity: .71;
    /* max-width: 39rem; */
  }

  .page-description {
    margin: 0 auto 1rem;
    /* opacity: .71; */
    /* max-width: 39rem; */
  }

  p {
    margin-block: 1rem;
  }

  figure {
    margin-block: 1rem;
  }

  > :not(figure) {
    /* margin-inline: auto; */
    /* max-width: 39rem; */
    display: grid;
    grid-template-columns: subgrid;
    grid-column: content;
  }
}

.page-header > .detail-meta {
  display: flex;
  grid-template-columns: none;
}

:is(.page-header, .product-header) {
  > .page-title {
    margin-block: 0 0.16em;
  }

  > :is(.page-subtitle, .summary, .p-summary, .page-summary) {
    margin-block: 0 0.65em;
  }

  > .detail-meta {
    margin-block: 0 var(--space-xs);
  }
}

/* caps label — todo: fold .leader variants into this (docs/codebase-suggestions.md) */
.caps {
  font-family: var(--font-family-rounded, inherit);
  font-size: var(--font-size-0);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-copper);
}

.leader {
  /* nav */
  /* snippets/breadcrumbs.php */
  font-family: var(--font-family-rounded);
  font-size: var(--font-size-0);
  letter-spacing: .1em;
  text-transform: uppercase;
  /* margin-bottom: .5rem; */
  margin-bottom: 0.75lh;

  a {
    text-decoration: none;
  }

  .leader-sep {
    margin: 0;
  }
}

.section-intro {
  max-width: 65ch;
  /* font-size: var(--font-size-0); */
  /* line-height: 1.6; */
  opacity: .85;
}

/* related block — cards come from the shared items snippet */
.related__heading {
  /* font-size: var(--font-size-0);
  font-weight: 600;
  font-family: var(--font-family-rounded, inherit);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-copper); */
  margin: 0 0 var(--space-s);
}

.related .card.compact > a > figure {
  box-shadow: var(--shadow-flush);
}

/* cards */
.card {
  container-type: inline-size;
}

.card > a {
  display: block;
  opacity: 1;
}

.card > a figure {
  transition: opacity var(--transition);
}

.card > a:hover figure,
.card > a:focus-visible figure {
  opacity: 0.9;
}

.card > a:hover .card-title,
.card > a:focus-visible .card-title {
  color: var(--color-signal);
}

.card > a:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 0.35rem;
}

.card-title {
  margin: 0;
  color: var(--color-title);
  font-size: var(--font-size-2);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  transition: color var(--transition);
}

.card-subline {
  margin: 0.35rem 0 0;
  color: var(--color-copper);
  font-size: var(--font-size-0);
  line-height: var(--line-height-0);
}

.card-subline.meta {
  display: flex;
  gap: 1rem;
}

/* dense cards — title keys off card width, not viewport */
@container (max-width: 14rem) {
  .card-title {
    font-size: var(--font-size-1);
    line-height: 1.18;
    letter-spacing: -0.01em;
  }
}

/* card anatomy — plain child names, no BEM */
.card > a > header {
  margin-bottom: 1.5rem;
}

.card > a > figure {
  margin-bottom: .5rem;
  /* aspect-ratio: 16/9; */
  /* aspect-ratio: 1; */
  overflow: hidden;
}

.card > a > figure > img {
  object-fit: cover;
  object-position: 50%;
  height: 100%;
  width: 100%;
  aspect-ratio: 1;
}

.card.iso > a > figure {
  position: relative;
  overflow: unset; /* iso deck pops out on hover */
}

.card.iso > a > figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--iso-bg-img);
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  z-index: 0;
  border-radius: var(--rounded);
  pointer-events: none;
  transition: opacity .5s ease-in-out;
}

.card.iso > a > figure > img {
  object-fit: contain;
  transform: rotate(40deg) scale(1.4);
  /* unrotates iso deck */
  transition: transform 1.5s ease-in-out .5s;
  pointer-events: none; /* prevents odd hover effects */
}

/* hover-only deck straighten — touch keeps the static iso */
@media (hover: hover) {
  .card.iso > a:hover > figure > img {
    /* rotates iso deck */
    transform: rotate(0deg) scale(1.3);
    transition: transform .5s ease-in-out;
  }

  .card.iso > a:hover > figure::before {
    opacity: .4;
    transition: opacity .5s ease-in-out;
  }
}

.card.iso > * {
  position: relative;
  z-index: 1;
}

.card.t-serie > a > figure > img {
  aspect-ratio: 16/9;
}

.card.compact {
  > a > figure {
    margin-bottom: var(--space-xs);
    border-radius: var(--rounded);
    aspect-ratio: 1;
  }
  > a > figure > img { aspect-ratio: 1; }

  .card-title {
    font-size: var(--font-size-1);
    line-height: 1.18;
    letter-spacing: -0.01em;
  }
  .card-year {
    margin-left: 0.3em;
    color: var(--color-copper);
    font-weight: 400;
    font-variant-numeric: oldstyle-nums;
  }
}

.soldot {
  display: inline-block;
  color: rgb(255, 0, 43);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

/* provenance — donated pieces only */
.provenance {
  margin-top: var(--space-xs);
  color: var(--color-text-dimmed);
  font-size: var(--font-size--1);
  text-wrap: pretty;
}

/* card grid — shared by related + search results */
.card-grid {
  display: grid;
  gap: var(--space-m) var(--space-s);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;

  > * { min-width: 0; }
}

.shop.shop-products {
  /* the shop page */
  margin-block: 0 4rem;

  li a figure span {
    --w: 3;
    --l: 1;
  }
}

ul.shop-products {
  /* for listing regular shop items */
  margin-block: 10rem;
  --gutter: 6vw;
}

.shop-products li {
  position: relative;
  z-index: 0;
}

.shop-products figcaption {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding-top: .5rem;
}

.shop-products figcaption span {
  color: var(--color-copper);
  /* font-size: var(--font-size--1); */
}

/* blog excerpts */
a.blog-article-excerpt-link {
  display: block;
}

.blog-article-excerpt {
  /* line-height: 1.5em; */
  header {
    /* margin-bottom: 1.5rem; */
    margin-bottom: 1lh;
  }
  figure {
    margin-bottom: .5rem;
  }
}

.blog-article-excerpt-title {
  font-weight: 600;
}

.blog-article-excerpt-date {
  color: var(--color-copper);
}

.paginate {
  /* full rail — spans wide, flush with the card grid */
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-top: var(--space-l);
  gap: 2px;
  flex-wrap: nowrap;
  border: 2px solid var(--color-copper);
  border-radius: var(--rounded);
  background: var(--color-copper);
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: .2rem;
  font-size: var(--font-size-0);

  a {
    color: var(--color-panel);
    background-color: var(--color-panel-ink);
    font-weight: bold;
  }

  :is(a, span) {
    padding: clamp(.35rem, .6vw, .55rem) clamp(.7rem, 1vw, .9rem);
  }

  > span:not([aria-label]) {
    color: var(--color-ink);
    background-color: var(--color-wall);
  }

  /* count fills what the numbers + arrows leave */
  > span[aria-live] {
    flex: 1;
  }

  > [aria-label="Pages"] {
    display: none;
    padding: 0;
    gap: 2px;
  }

  @media (min-width: 52rem) {
    > [aria-label="Pages"] {
      display: inline-flex;
    }
  }

  [aria-current="page"] {
    color: var(--color-panel-ink);
    background-color: var(--color-copper);
  }

  & a:hover,
  & a:focus-visible {
    color: var(--color-wall);
    background: var(--color-signal);
  }
}

/* accessibility helpers */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  padding: 0.5em 1em;
  background: var(--color-signal);
  color: var(--color-wall);
  /* font-size: 0.875rem; */
  font-weight: 600;
  z-index: 1000;
  transition: transform 0.15s ease;

  &:focus {
    transform: translateY(0);
  }
}

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

/* buttons — role class + adjacent modifiers; .pill below is the static badge */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 0.9em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--rounded);
  background: var(--color-panel);
  color: var(--color-panel-ink);
  opacity: 0.75;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, opacity 0.15s ease;

  svg {
    width: 1em;
    height: 1em;
    flex: none;
  }

  &:hover,
  &:focus-visible {
    opacity: 1;
    color: var(--color-panel-ink);
  }

  &[aria-current] {
    opacity: 1;
    background: var(--color-signal);
    color: var(--color-wall);
    font-weight: 700;
  }

  /* fill: outline */
  &.outline {
    background: transparent;
    border-color: var(--color-ink);
    color: var(--color-ink);
    opacity: 1;

    &:hover,
    &:focus-visible {
      border-color: var(--color-signal);
      color: var(--color-signal);
    }

    &[aria-current] {
      background: var(--color-signal);
      border-color: var(--color-signal);
      color: var(--color-wall);
      font-weight: 700;
    }
  }

  /* fill: plain (text) */
  &.plain {
    background: transparent;
    padding-inline: 0.2em;
    color: var(--color-ink);
    opacity: 1;

    &:hover,
    &:focus-visible {
      color: var(--color-signal);
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }

    &[aria-current] {
      color: var(--color-signal);
      font-weight: 700;
    }
  }

  /* fill: signal (primary action — not just from [aria-current]) */
  &.signal {
    background: var(--color-signal);
    color: var(--color-wall);
    opacity: 1;
    font-weight: 700;

    &:hover,
    &:focus-visible {
      background: oklch(from var(--color-signal) calc(l * 0.88) c h);
      color: var(--color-wall);
    }
  }

  /* sizes */
  &.small {
    padding: 0.3em 0.65em;
    font-size: 0.8rem;
  }

  &.large {
    padding: 0.7em 1.15em;
    font-size: 1.05rem;
  }

  /* shape: full pill, opt-in */
  &.round {
    border-radius: var(--rounded-large);
  }

  /* optional arrow span — same nudge as .action-arrow */
  & .button-arrow {
    transition: transform 0.15s ease;
  }

  &:hover .button-arrow,
  &:focus-visible .button-arrow {
    transform: translateX(3px);
  }

  /* optional leading icon — based off the button's font-size */
  & .button-icon {
    width: 1em;
    height: 1em;
    flex: none;
  }

  &.disabled {
    background: transparent;
    border-color: oklch(from var(--color-ink) l c h / 0.4);
    color: var(--color-ink);
    opacity: 1;
    pointer-events: none;
  }

  /* state: dimmed but live */
  &.dim {
    opacity: 0.6;

    &:hover,
    &:focus-visible { opacity: 1; }
  }
}

/* pills — static status/version chips */
.pill {
  display: inline-flex;
  align-items: baseline;
  margin-inline-end: 0.5rem;
  padding-inline: 0.45em;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--color-copper);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  vertical-align: middle;

  &:is(a) {
    border-color: var(--color-ink);
    color: var(--color-ink);
  }

  &:is(a):hover,
  &:is(a):focus-visible {
    border-color: var(--color-signal);
    color: var(--color-signal);
  }

  &.version {
    border-color: var(--color-signal-soft);
    color: var(--color-signal);
    opacity: 1;

    &:hover {
      border-color: var(--color-signal);
      color: var(--color-ink);
    }
  }

  &.signal {
    border-color: var(--color-signal-soft);
    background: var(--color-signal-soft);
    color: var(--color-signal);
  }

  &.minor {
    border-color: oklch(from var(--color-panel) l c h / 0.34);
    background: oklch(from var(--color-panel) l c h / 0.08);
    color: var(--color-title);
  }

  &.major {
    border-color: var(--color-signal-soft);
    background: var(--color-signal-mid);
    color: var(--color-panel);
  }

  &.panel {
    border-color: var(--color-frame);
    background: var(--color-panel-ink);
    color: var(--color-ink);
  }

  &.muted {
    opacity: 0.66;
  }

  &.disabled {
    opacity: 0.44;
    pointer-events: none;
  }

  &.new {
    padding-inline: 0.6em;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
}

/* prevnext (simple) */
.prevnext.simple {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  grid-column: content;

  a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
  }

  .next {
    margin-left: auto;
    text-align: right;
  }
}