/* ============================================================
   Diona — "PLATE" visual system
   A bound specification book: every page is a plate in a cut-sheet
   volume. Didone display + grotesque text + mono for codes, folio
   numbers, registration marks, and an architect's title block.
   ============================================================ */

/* Chrome decides the cross-document opt-in before it has parsed a long
   sheet. This rule has to be first: buried at the end of the file, the
   turn is skipped ("Transition was skipped") even though the rule exists.
   The <meta name="view-transition"> in each head is WebKit's path.
   Reduced motion declines the turn; the page is simply the next sheet. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- tokens ---------- */
:root {
  --paper: #f5f2eb;
  --bone: #e9e3d6;
  --ink: #16130e;
  --ink-2: #241f16;
  --smoke: #6a6156;
  --bronze: #9c7c53;
  --bronze-text: #7d5f35;
  --oxide: #a8402c;
  --moss: #33463a;

  --line: rgba(22, 19, 14, 0.16);
  --line-2: rgba(22, 19, 14, 0.32);
  --line-inv: rgba(245, 242, 235, 0.2);
  --line-inv-2: rgba(245, 242, 235, 0.6);

  --font-display: "Bodoni Moda", "Didot", "Bodoni MT", serif;
  --font-text: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "Fragment Mono", "SFMono-Regular", Menlo, monospace;

  --t-micro: 10px;
  --t-label: 11px;
  --t-ui: 13px;
  --t-body: 16px;
  --t-lede: 19px;
  --t-h3: 26px;
  --t-h2: clamp(30px, 4vw, 44px);
  --t-h1: clamp(42px, 6.4vw, 84px);
  --t-folio: clamp(52px, 9vw, 124px);

  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: 96px;
  --s-7: 144px;

  --margin: clamp(20px, 5vw, 76px);
  --gutter: 24px;
  --page: min(1440px, calc(100vw - 2 * var(--margin)));
  --head-h: 68px;
  --tray-h: 58px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 350;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--oxide); color: var(--paper); }
:focus-visible { outline: 2px solid var(--oxide); outline-offset: 3px; }

/* ---------- type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 0.94;
  letter-spacing: -0.015em;
}
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); line-height: 1.02; }
.h3 { font-size: var(--t-h3); line-height: 1.12; }
.folio { font-size: var(--t-folio); line-height: 0.86; letter-spacing: -0.02em; }
.lede { font-size: var(--t-lede); line-height: 1.5; font-weight: 350; }
.body-sm { font-size: 14px; line-height: 1.6; color: var(--smoke); }
.em { font-style: italic; }
.mark { color: var(--oxide); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.kicker {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
}
.kicker--accent { color: var(--oxide); }
.code {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* line-mask reveal for display type */
.lines .ln { display: block; overflow: hidden; }
.lines .ln > span {
  display: block;
  transform: translateY(105%);
  transition: transform 0.72s var(--ease);
}
.lines.in .ln > span { transform: none; }
.lines .ln:nth-child(2) > span { transition-delay: 0.07s; }
.lines .ln:nth-child(3) > span { transition-delay: 0.14s; }
.lines .ln:nth-child(4) > span { transition-delay: 0.21s; }

/* ---------- sheet chrome ---------- */
.sheet { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { width: var(--page); margin-inline: auto; }

.runhead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.runhead__in {
  width: var(--page);
  margin-inline: auto;
  height: var(--head-h);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.wordmark {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-logo {
  height: 44px;
  width: auto;
  display: block;
}
.wordmark small {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--smoke);
  display: block;
  line-height: 1;
  margin-top: 2px;
}
.nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.nav a {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 9px;
  position: relative;
  color: var(--ink-2);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 9px; right: 9px; bottom: 2px;
  height: 1px;
  background: var(--oxide);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--oxide); }

/* disclosure (Collections / Categories) */
.disc { position: relative; }
.disc > button {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 9px;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.disc > button::after {
  content: "";
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.28s var(--ease);
}
.disc[data-open="true"] > button::after { transform: rotate(225deg) translateY(-1px); }
.disc__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  padding: var(--s-3);
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  box-shadow: 0 24px 60px -30px rgba(22, 19, 14, 0.4);
  z-index: 70;
}
.disc[data-open="true"] .disc__panel { display: grid; animation: panel-in 0.28s var(--ease); }
@keyframes panel-in {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
.disc__panel h4,
.disc__panel .disc__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: var(--s-1);
  font-weight: 400;
}
.disc__panel a {
  display: block;
  text-decoration: none;
  font-size: 14px;
  padding: 3px 0;
  border-bottom: 1px solid transparent;
}
.disc__panel a:hover { color: var(--oxide); border-bottom-color: var(--oxide); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  position: relative;
  transition: background 0.28s var(--ease), color 0.28s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--oxide);
}
.btn:hover { background: var(--oxide); border-color: var(--oxide); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--paper:hover { background: var(--oxide); border-color: var(--oxide); color: var(--paper); }
.btn--sm { padding: 8px 12px; }

/* plate number strip under the runhead */
.platebar {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.platebar__in {
  width: var(--page);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding: 8px 0;
  color: var(--smoke);
}
/* One line. The mono tracking wraps "PASS 1" under the title and "COVER"
   under the plate number, which is the only unfinished edge in the mobile frame. */
@media (max-width: 720px) {
  .platebar__in {
    font-size: 10px;
    letter-spacing: 0.06em;
    gap: 12px;
  }
  .platebar__in > span {
    white-space: nowrap;
  }
  .platebar__in > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* vertical running label — confined to the left margin, so a rotation
   cannot swing it into the column or off the screen edge */
.rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc((100vw - var(--page)) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--smoke);
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
@media (max-width: 1280px) { .rail { display: none; } }

/* architect's title block, fixed bottom-right */
.titleblock {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 55;
  max-width: calc(100vw - 32px);
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  display: grid;
  grid-template-columns: repeat(4, auto);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smoke);
}
.titleblock div { padding: 6px 10px; border-left: 1px solid var(--line); }
.titleblock div:first-child { border-left: 0; }
.titleblock b { display: block; color: var(--ink); font-weight: 400; margin-top: 2px; }
.titleblock.hidden { display: none; }
@media (max-width: 860px) { .titleblock { display: none; } }

/* ---------- sections ---------- */
.sec { padding: var(--s-6) 0; position: relative; }
.sec--bone { background: var(--bone); }
.sec--ink { background: var(--ink); color: var(--paper); }
.sec--ink .kicker { color: var(--line-inv-2); }
.sec--ink .body-sm { color: var(--line-inv-2); }
/* oxide is 3.0:1 on ink, below the AA body threshold — the section number is small text */
.sec--ink .sec__no { color: var(--paper); }
.sec__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  border-top: 1px solid var(--line);
  padding-top: var(--s-2);
  margin-bottom: var(--s-4);
}
.sec--ink .sec__head { border-top-color: var(--line-inv); }
.sec__no {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  color: var(--oxide);
}
.sec__head .h2 { margin-right: auto; }

/* asymmetric editorial spread */
.spread { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.spread > .c7 { grid-column: span 7; }
.spread > .c5 { grid-column: span 5; }
.spread > .c6 { grid-column: span 6; }
.spread > .c8 { grid-column: span 8; }
.spread > .c4 { grid-column: span 4; }
.spread > .c12 { grid-column: span 12; }

/* Opening plates on Work, Method and Atelier. The frame stops above the
   fixed title block so the photograph and its caption stay whole. */
.plate--open {
  width: 100%;
  aspect-ratio: 4 / 3.15;
  max-height: min(560px, calc(100svh - 420px));
}
.plate--open img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* ---------- plate (image frame) ---------- */
.plate {
  position: relative;
  background: var(--bone);
  overflow: hidden;
}
.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s var(--ease);
}
.plate.in img { clip-path: inset(0 0 0 0); }
/* registration crosshairs */
.plate::before, .plate::after {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s linear 0.5s;
  z-index: 2;
}
.plate::before {
  left: 8px; top: 8px;
  background:
    linear-gradient(var(--bronze), var(--bronze)) center / 13px 1px no-repeat,
    linear-gradient(var(--bronze), var(--bronze)) center / 1px 13px no-repeat;
}
.plate::after {
  right: 8px; bottom: 8px;
  background:
    linear-gradient(var(--bronze), var(--bronze)) center / 13px 1px no-repeat,
    linear-gradient(var(--bronze), var(--bronze)) center / 1px 13px no-repeat;
}
.plate.in::before, .plate.in::after { opacity: 0.9; }
.plate figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(180deg, transparent, rgba(22, 19, 14, 0.62));
}
.plate--tall { aspect-ratio: 4 / 5; }
.plate--wide { aspect-ratio: 16 / 9; }
.plate--sq { aspect-ratio: 1 / 1; }
.plate--full { aspect-ratio: 21 / 9; }

/* hover: bronze hairline draws around the plate */
a.plate--link { display: block; }
.plate a::after, .plate--link::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--bronze);
  opacity: 0;
  transition: opacity 0.3s linear;
  pointer-events: none;
}
.plate:hover a::after, .plate--link:hover::after { opacity: 1; }
.entry:hover .plate { box-shadow: inset 0 0 0 1px var(--bronze); }

/* ---------- collection / category entry ---------- */
.entry {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: end;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.entry:hover .entry__title { color: var(--oxide); }
.entry__media { grid-column: span 7; }
.entry__meta { grid-column: span 5; padding-bottom: 6px; }
.entry__no {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  color: var(--smoke);
  display: block;
  margin-bottom: var(--s-2);
}
.entry__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1;
  transition: color 0.3s var(--ease);
}
.entry__sub { margin-top: var(--s-2); }
.entry__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.tag {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  padding: 4px 8px;
  color: var(--smoke);
}
.entry--flip .entry__media { grid-column: 6 / span 7; order: 2; }
.entry--flip .entry__meta { grid-column: 1 / span 4; order: 1; }

/* paper plate for series with no still */
.paperplate {
  aspect-ratio: 4 / 5;
  background: var(--bone);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-3);
  position: relative;
  overflow: hidden;
}
.paperplate::after {
  content: "";
  position: absolute;
  right: -30%;
  bottom: -40%;
  width: 80%;
  aspect-ratio: 1;
  border: 1px solid var(--line-2);
  border-radius: 50%;
}
.paperplate .display { font-size: clamp(26px, 2.6vw, 38px); }
/* Text-note variant: sizes to its content instead of holding a picture ratio,
   so short notes don't read as empty image frames. */
.paperplate--note { aspect-ratio: auto; justify-content: flex-start; gap: var(--s-3); }
.paperplate--note::after { display: none; }

/* ---------- index rail (typographic contents) ---------- */
.indexrail { border-top: 1px solid var(--line); }
.indexrail li { border-bottom: 1px solid var(--line); }
.indexrail a {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--s-3);
  align-items: baseline;
  padding: 14px 0;
  text-decoration: none;
}
.indexrail a:hover .indexrail__t { color: var(--oxide); transform: translateX(6px); }
.indexrail__n { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.2em; color: var(--smoke); }
.indexrail__t {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 32px);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.indexrail__m { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.14em; color: var(--smoke); text-transform: uppercase; }

/* ---------- swatches ---------- */
.swatchwall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--s-3) var(--s-2);
}
.swatch { text-align: left; display: block; width: 100%; }
.swatch__chip {
  display: block;
  aspect-ratio: 2 / 1;
  width: 100%;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.18s;
  position: relative;
}
.swatch:hover .swatch__chip { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 24px -14px rgba(22, 19, 14, 0.5); }
.swatch:active .swatch__chip { transform: translateY(0); box-shadow: inset 0 0 0 2px var(--ink); }
.swatch__chip--empty { background: var(--paper); }
.swatch .code { display: block; margin-top: 8px; }
.swatch .fam { font-size: 11px; color: var(--smoke); letter-spacing: 0.04em; }
.swatch[aria-pressed="true"] .swatch__chip { box-shadow: inset 0 0 0 2px var(--oxide); }

/* ---------- §02 seven spaces (orbit) ---------- */
.spaces__title { font-size: clamp(38px, 5.2vw, 68px); line-height: 1; }
.spaces__sub { font-size: clamp(20px, 2.6vw, 30px); line-height: 1.25; color: var(--smoke); margin-top: 6px; }
.spaces__sub em { font-style: italic; }
.orbit { position: relative; margin-top: var(--s-4); }
.orbit__stage {
  --hex: 88px;
  position: relative;
  width: min(920px, 100%);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}
/* Concentric guide rings, centred at (50%, 45%) so node captions clear the base. */
.orbit__ring { position: absolute; border: 1px solid var(--line-2); border-radius: 50%; pointer-events: none; }
.orbit__ring--outer { width: 70%; aspect-ratio: 1 / 1; left: 15%; top: 10%; }
.orbit__ring--inner { width: 50%; aspect-ratio: 1 / 1; left: 25%; top: 20%; }
/* Bronze progress arc from the crown to the active node; length set from data-angle. */
.orbit__arc { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1 / 1; pointer-events: none; }
.orbit__arc circle {
  fill: none;
  stroke: var(--bronze);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 14.29 100;
  transition: stroke-dasharray 0.5s var(--ease);
}
/* Centre: the active space rendered as a round plate photograph. */
.orbit__center {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: 42%;
  margin: 0;
  text-align: center;
  z-index: 2;
}
.orbit__frame { display: block; width: 80%; margin-inline: auto; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(22, 19, 14, 0.45); }
.orbit__frame img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s var(--ease); }
.orbit__frame img.is-fading { opacity: 0; }
.orbit__cap { display: grid; gap: 2px; justify-items: center; margin-top: 12px; }
.orbit__name { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.28em; text-transform: uppercase; text-indent: 0.28em; }
.orbit__fam { font-size: 13px; color: var(--smoke); letter-spacing: 0.02em; }
.orbit__cta {
  margin-top: 8px;
  display: inline-block;
  background: var(--ink-2);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 9px 16px;
  transition: background 0.25s var(--ease);
}
.orbit__cta:hover { background: var(--oxide); }
/* Nodes sit on the outer ring: the hex centre lands on (--x, --y), captions fall below. */
.orbit .node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, calc(var(--hex) / -2));
  display: block;
  width: max-content;
  max-width: 190px;
  text-align: center;
  text-decoration: none;
  z-index: 3;
}
.node__hex { display: block; width: var(--hex); margin-inline: auto; }
.node__hex svg { display: block; width: 100%; height: auto; }
.node__hex polygon { fill: var(--bone); stroke: var(--line-2); stroke-width: 1; transition: fill 0.25s var(--ease), stroke 0.25s var(--ease); }
.node__hex g { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.25s var(--ease); }
.orbit .node:hover polygon, .orbit .node:focus-visible polygon, .orbit .node.is-active polygon { fill: var(--ink-2); stroke: var(--ink-2); }
.orbit .node:hover g, .orbit .node:focus-visible g, .orbit .node.is-active g { stroke: var(--paper); }
.orbit .node__label {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.orbit .node__fam { display: block; margin-top: 3px; font-size: 12px; color: var(--smoke); letter-spacing: 0.02em; }
.spaces__colophon {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.28em;
  color: var(--smoke);
  white-space: nowrap;
}
.spaces__colophon::before, .spaces__colophon::after { content: ""; flex: 1; border-top: 1px solid var(--line-2); transform: translateY(-4px); }
/* Compact hexes before the stacked layout takes over. */
@media (max-width: 900px) and (min-width: 761px) {
  .orbit__stage { --hex: 72px; }
  .orbit .node__fam { font-size: 11px; }
}
/* Stacked: round plate first, spaces as an indexed list. */
@media (max-width: 760px) {
  .orbit__stage { display: grid; gap: var(--s-3); aspect-ratio: auto; }
  .orbit__ring, .orbit__arc { display: none; }
  .orbit__center { position: static; transform: none; width: 100%; }
  .orbit__frame { width: min(300px, 72vw); }
  .orbit .node {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    display: grid;
    grid-template-columns: var(--hex) 1fr;
    grid-template-areas: "hex label" "hex fam";
    column-gap: var(--s-2);
    align-items: center;
    text-align: left;
    border-top: 1px solid var(--line);
    padding: 12px 4px;
  }
  .orbit__stage { --hex: 60px; }
  .node__hex { grid-area: hex; margin: 0; }
  .orbit .node__label { grid-area: label; margin-top: 0; }
  .orbit .node__fam { grid-area: fam; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit__arc circle, .orbit__frame img { transition: none; }
}

/* ---------- process steps ---------- */
.steps { counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.sec--ink .steps li { border-top-color: var(--line-inv); }
.steps li::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--bronze);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.sec--ink .steps li:last-child { border-bottom-color: var(--line-inv); }
.steps h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 400; margin-bottom: 6px; }
.steps a { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--oxide); text-decoration: none; }
.steps a:hover { text-decoration: underline; }

/* ---------- spec drawer / board tray ---------- */
.tray {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(100%);
  transition: transform 0.34s var(--ease);
}
.tray[data-open="true"] { transform: none; }
.tray__in {
  width: var(--page);
  margin-inline: auto;
  min-height: var(--tray-h);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 0;
  flex-wrap: wrap;
}
.tray__count { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; }
.tray__items { display: flex; gap: 8px; overflow-x: auto; flex: 1; min-width: 200px; }
.tray__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-inv);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tray__chip button { color: var(--line-inv-2); }
.tray__chip button:hover { color: var(--oxide); }
.tray .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.tray .btn:hover { background: var(--oxide); color: var(--paper); border-color: var(--oxide); }

/* ---------- forms ---------- */
.field { display: block; margin-bottom: var(--s-3); }
.field > span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  padding: 10px 2px;
  font-family: var(--font-text);
  font-size: 15px;
  color: inherit;
  border-radius: 0;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-bottom-color: var(--oxide);
}
.field select { appearance: none; }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-3); }
@media (max-width: 760px) { .formgrid { grid-template-columns: 1fr; } }
.err { color: var(--oxide); font-size: 12px; margin-top: 4px; font-family: var(--font-mono); letter-spacing: 0.08em; }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-bottom: 2px solid var(--oxide); }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--paper); padding: var(--s-6) 0 var(--s-4); }
.foot a { color: var(--paper); text-decoration: none; }
.foot a:hover { color: var(--bronze); }
/* the footer ground is ink, so body copy inside it must not inherit the paper-ground smoke */
.foot .body-sm { color: var(--paper); }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-4); }
.foot h4,
.foot .foot__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--line-inv-2);
  margin-bottom: var(--s-2);
  font-weight: 400;
}
.foot li { margin-bottom: 6px; font-size: 14px; }
.foot__reach { margin-top: var(--s-3); }
/* Contact column: a label like its siblings, and small mono prefixes
   (Tel / Mail / IG / Web) so each line reads as labelled contact data. */
.foot__reach::before {
  content: "Contact";
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--line-inv-2);
  margin-bottom: var(--s-2);
  font-weight: 400;
}
.foot__reach li { margin-bottom: 2px; }
.foot__reach a { display: inline-block; padding: 3px 0; }
.foot__reach a::before {
  content: "";
  display: inline-block;
  width: 4em;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--line-inv-2);
}
.foot__reach a[data-studio="phone"]::before { content: "Tel"; }
.foot__reach a[data-studio="email"]::before { content: "Mail"; }
.foot__reach a[data-studio="instagram"]::before { content: "IG"; }
.foot__reach a[data-studio="site"]::before { content: "Web"; }
.studio-lines { font-size: 14px; line-height: 1.7; }
.studio-lines a { color: var(--oxide); text-decoration: none; }
.studio-lines a:hover { text-decoration: underline; }
.foot__base {
  margin-top: var(--s-5);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line-inv);
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  color: var(--line-inv-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- mobile menu ---------- */
.menubtn { display: none; margin-left: auto; }
.mobilesheet {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 90;
  padding: var(--s-4) var(--margin);
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 0.42s var(--ease);
}
.mobilesheet[data-open="true"] { transform: none; }
.mobilesheet a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 8vw, 54px);
  line-height: 1.16;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
}
.mobilesheet a:hover { color: var(--oxide); }
.mobilesheet a.reach {
  font-family: var(--font-text);
  font-size: 16px;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.35;
  border-bottom: 0;
  padding: 8px 0;
}
.mobilesheet .sub { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--smoke); border: 0; padding-top: var(--s-3); }
@media (max-width: 1080px) {
  .nav, .runhead .btn { display: none; }
  /* .runhead .btn is (0,2,0); .menubtn alone loses, and the menu vanishes. */
  .runhead .menubtn { display: inline-flex; }
}

/* ---------- misc ---------- */
.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }
.hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-4) 0; }
.note {
  border-left: 2px solid var(--oxide);
  padding: 4px 0 4px var(--s-2);
  font-size: 13px;
  color: var(--smoke);
}
.stack > * + * { margin-top: var(--s-2); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }

/* generic scroll reveal */
.rise { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.rise.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .spread > .c7, .spread > .c5, .spread > .c6, .spread > .c8, .spread > .c4 { grid-column: span 12; }
  .entry, .entry--flip { grid-template-columns: 1fr; }
  .entry__media, .entry__meta, .entry--flip .entry__media, .entry--flip .entry__meta { grid-column: span 1; order: 0; }
  .sec { padding: var(--s-5) 0; }
  .plate--full { aspect-ratio: 4 / 3; }
}

/* ============================================================
   FLAIR LAYER — the sheet gets physical
   Signature (the only loud gesture): the volume opens, then turns.
     Cover: the hero plate lays down onto the desk in the first second.
     Navigation: that sheet turns on its binding, and the hero plate
     is carried to where it sits on the next page.
   Supporting, quieter, and local — three, not eight:
     1. Ink bloom. Bodoni opsz on display lines, Archivo wdth on
        single-line links. A hover deepens ink; it never moves layout.
     2. Specimen lift. Plates and swatch chips share one gesture:
        pick the card up. Touch gets a press, not a dead hover.
     3. Folio tick. The title-block sheet number rolls as the section
        changes. It is a counter, not a spectacle.
   Material, not motion: body::after is paper fibre. It does not move.
     One sentence for the ban list: the page is specification stock,
     so the tooth is the paper the plates are printed on.
     Tilt's sentence: a loose specimen lifts when it is picked up;
     the angle stays small enough that the photograph stays sharp.
   Removed, on purpose: the orbit spin (a plan does not orbit; the
   stroke-draw already announces the figure) and scroll drift (a
   bound plate stays registered — parallax was generic and it lagged).
   Tunables are the custom properties below. Transform and opacity
   only, except the type-axis hover: ink contrast has no transform
   equivalent, and it runs once per hover, not per frame.
   Revert this whole block to remove the layer.
   ============================================================ */

:root {
  --flair-grain: 0.095;
  --flair-lay-rx: 12deg;
  --flair-lay-y: 34px;
  --flair-lay-dur: 1.15s;
  --flair-lay-delay: 0.06s;
  --flair-cast: 0 20px 28px -8px rgba(22, 19, 14, 0.34);
  --flair-tilt-dur: 0.08s;
  --flair-chip-lift: -7px;
  --flair-press: 2px;
  --flair-turn: 0.46s;
  --flair-turn-in: 0.55s;
  --flair-turn-delay: 0.32s;
  --flair-hero: 0.9s;
  --flair-lift-out: -3.2%;
  --flair-lift-in: 3.4%;
  --flair-opsz-rest: 34;
  --flair-opsz-bloom: 96;
  --flair-opsz-touch: 72;
  --flair-wdth-link: 116%;
  --flair-wdth-quiet: 108%;
  --flair-folio: 0.46s;
  --flair-swatch-shadow: 0 18px 30px -14px rgba(22, 19, 14, 0.48);
}

@media (max-width: 900px) {
  :root {
    --flair-lay-rx: 7deg;
    --flair-lay-y: 18px;
    --flair-cast: 0 16px 22px -8px rgba(22, 19, 14, 0.32);
  }
}

/* ---------- material · paper fibre (static) ---------- */
/* z-index 95: above the tray (80) and the mobile sheet (90), below
   the skip link (100), so the stock covers the page and not the
   keyboard escape hatch. Fixed, so it does not reflow. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.48' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: var(--flair-grain);
  mix-blend-mode: multiply;
}
@media print {
  body::after { display: none; }
  .sec--cover .plate { transform: none; box-shadow: none; }
}

/* ---------- supporting 1 · ink ---------- */
/* Touch and reduced-motion keep a fully-inked face. The bloom — a
   tighter optical size opening to display contrast — is a fine-pointer
   hover, because a finger has no hover to deepen. */
.entry__title,
.indexrail__t {
  font-optical-sizing: none;
  font-variation-settings: "opsz" var(--flair-opsz-touch);
}

@media (hover: hover) and (pointer: fine) {
  .entry__title {
    font-variation-settings: "opsz" var(--flair-opsz-rest);
    transition: color 0.3s var(--ease), font-variation-settings 0.55s var(--ease);
  }
  .entry:hover .entry__title,
  .entry:focus-visible .entry__title { font-variation-settings: "opsz" var(--flair-opsz-bloom); }

  .indexrail__t {
    font-variation-settings: "opsz" var(--flair-opsz-rest);
    /* transform stays in the transition: the rail already slides 6px. */
    transition: color 0.3s var(--ease), transform 0.3s var(--ease), font-variation-settings 0.55s var(--ease);
  }
  .indexrail a:hover .indexrail__t,
  .indexrail a:focus-visible .indexrail__t { font-variation-settings: "opsz" var(--flair-opsz-bloom); }

  /* Archivo is the only face with a wdth axis. Single-line links only,
     so the stretch cannot wrap a paragraph. */
  .disc__panel a {
    font-stretch: 100%;
    transition: color 0.28s var(--ease), border-bottom-color 0.28s var(--ease), font-stretch 0.34s var(--ease);
  }
  .disc__panel a:hover,
  .disc__panel a:focus-visible { font-stretch: var(--flair-wdth-link); }

  .crumb a, .foot a {
    font-stretch: 100%;
    transition: color 0.28s var(--ease), font-stretch 0.34s var(--ease);
  }
  .crumb a:hover, .foot a:hover,
  .crumb a:focus-visible, .foot a:focus-visible { font-stretch: var(--flair-wdth-quiet); }
}

/* ---------- supporting 2 · specimen lift ---------- */
/* Shadow changes once, on enter and leave. The pointer loop writes
   only --rx/--ry (transform), never box-shadow, so the card tracks
   without repainting every frame and without the shadow chasing. */
@media (hover: hover) and (pointer: fine) {
  .swatch { perspective: 700px; }
  .swatch:hover .swatch__chip {
    transform: translateY(var(--flair-chip-lift)) rotateX(var(--sw-rx, 0deg)) rotateY(var(--sw-ry, 0deg));
    box-shadow: inset 0 0 0 1px var(--line-2), var(--flair-swatch-shadow);
    transition: transform var(--flair-tilt-dur) linear, box-shadow 0.22s var(--ease);
  }
  .swatch:active .swatch__chip {
    transform: translateY(0) rotateX(0deg) rotateY(0deg);
    box-shadow: inset 0 0 0 2px var(--ink);
  }
  /* Chosen state is (0,3,0), same as hover. Restate it higher so a
     selected chip still reads as selected while it is in the hand. */
  .swatch[aria-pressed="true"]:hover .swatch__chip {
    box-shadow: inset 0 0 0 2px var(--oxide), var(--flair-swatch-shadow);
  }
  .swatch[aria-pressed="true"]:active .swatch__chip {
    box-shadow: inset 0 0 0 2px var(--oxide), inset 0 0 0 4px var(--ink);
  }

  .entry__media .plate,
  .plategrid .plate,
  .provenance__card .plate,
  .substance .plate {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform var(--flair-tilt-dur) linear, box-shadow 0.28s var(--ease);
  }
  .plategrid .plate:hover,
  .provenance__card:hover .plate,
  .substance:hover .plate,
  .entry__media .plate:hover {
    box-shadow: var(--flair-cast);
  }
  /* Bronze hairline from the base stylesheet, plus the cast. */
  .entry:hover .plate,
  .entry:focus-visible .plate {
    box-shadow: inset 0 0 0 1px var(--bronze), var(--flair-cast);
  }
}

/* Touch equivalent of the lift: the card presses into the page.
   A finger cannot tilt a specimen, and it should not get nothing. */
@media (hover: none), (pointer: coarse) {
  .entry:active .plate,
  .plategrid .plate:active,
  .provenance__card:active .plate,
  .substance:active .plate {
    transform: translateY(var(--flair-press)) scale(0.985);
    transition: transform 0.12s var(--ease);
  }
  .swatch:active .swatch__chip {
    transform: translateY(var(--flair-press)) scale(0.985);
    box-shadow: inset 0 0 0 2px var(--ink);
  }
  .swatch[aria-pressed="true"]:active .swatch__chip {
    box-shadow: inset 0 0 0 2px var(--oxide), inset 0 0 0 4px var(--ink);
  }
}

/* Press is :active, so it already exists for a finger and a mouse.
   It is an affordance, not a fourth motion system. */
.btn {
  transition: background 0.28s var(--ease), color 0.28s var(--ease),
              transform 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
.btn:not(.btn--ghost):not(.btn--paper) {
  box-shadow: 0 1px 0 rgba(22, 19, 14, 0.22);
}
.btn:active { transform: translateY(var(--flair-press)); }
.btn:not(.btn--ghost):not(.btn--paper):active { box-shadow: none; }

/* ---------- supporting 3 · folio tick ---------- */
.titleblock [data-tb-sheet] {
  display: grid;
  grid-template-areas: "cell";
  overflow: hidden;
}
.titleblock [data-tb-sheet] > span { grid-area: cell; }
.tb-roll-out { animation: tb-out var(--flair-folio) var(--ease-io) both; }
.tb-roll-in  { animation: tb-in var(--flair-folio) var(--ease-io) both; }
@keyframes tb-out { to { transform: translateY(-100%); opacity: 0; } }
@keyframes tb-in  { from { transform: translateY(100%); opacity: 0; } }

/* ---------- signature · the cover lays the sheet down ---------- */
/* scripting: so JS-off stays the flat printed page (no .in ever
   arrives to settle a tilt). no-preference: reduced motion stays flat.
   The photograph is already printed — the wipe belongs to interior
   plates. On the cover the only motion is the sheet itself. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .sec--cover .plate {
    z-index: 1;
    transform-origin: 50% 100%;
    transform: perspective(1280px) rotateX(var(--flair-lay-rx)) translateY(var(--flair-lay-y));
    box-shadow: var(--flair-cast);
    transition: transform var(--flair-lay-dur) var(--ease) var(--flair-lay-delay);
  }
  .sec--cover .plate > img { clip-path: none; }
  .sec--cover .plate.in {
    transform: perspective(1280px) rotateX(0deg) translateY(0);
  }
  /* Arriving by a turn: the leaf animation is the motion. Do not
     also play the lay-down, or the signature happens twice. */
  html:active-view-transition .sec--cover .plate {
    transform: perspective(1280px) rotateX(0deg) translateY(0);
    transition: none;
  }
}

/* ---------- signature · the sheet turns ---------- */
/* Opt-in lives at the top of this file (Chrome will not walk a long
   sheet to find it). The meta in each head remains for WebKit.
   The root lifts off and the next sheet rises. They barely overlap,
   so the nav does not ghost. mix-blend-mode: normal replaces the UA
   plus-lighter wash on the page itself.
   The hero plate stays on the UA crossfade and is carried as its own
   layer (plate-hero), so the photograph is what the eye follows while
   the type changes. A rotate of the whole viewport was tried and
   rejected: it swung the page out from under that plate and doubled
   the header. */
[data-vt-hero] { view-transition-name: plate-hero; }

::view-transition-group(root) {
  animation-duration: var(--flair-turn-in);
  animation-timing-function: var(--ease);
}
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) {
  animation: vt-leaf-out var(--flair-turn) var(--ease-io) both;
}
::view-transition-new(root) {
  animation: vt-leaf-in var(--flair-turn-in) var(--ease) var(--flair-turn-delay) both;
}
/* The outgoing sheet is gone before the incoming one is visible.
   Overlap ghosts the nav and the headline on top of each other.
   The hero plate is on its own timeline and stays in frame the whole time. */
@keyframes vt-leaf-out {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  50%  { opacity: 1; transform: translateY(-1.4%) scale(0.992); }
  100% { opacity: 0; transform: translateY(var(--flair-lift-out)) scale(0.986); }
}
@keyframes vt-leaf-in {
  0%   { opacity: 0; transform: translateY(var(--flair-lift-in)) scale(1.012); }
  36%  { opacity: 0; transform: translateY(2%) scale(1.008); }
  70%  { opacity: 1; transform: translateY(0.4%) scale(1.002); }
  100% { opacity: 1; transform: none; }
}
::view-transition-group(plate-hero) {
  animation-duration: var(--flair-hero);
  animation-timing-function: var(--ease);
}

/* The new document is snapshotted on its first frame. A plate still
   inside its clip-path wipe would travel as a blank card. The pseudo
   matches during that capture, so only the in-flight turn reveals the
   hero early. A cold load keeps the wipe on every plate but the cover. */
/* The incoming sheet is photographed at its first frame. Anything still
   in its pre-entrance state (clipped plate, type parked below the mask,
   a faded rise) is what travels. Hold those at their settled values for
   the whole turn; the lift is the entrance, and it must not land on a blank. */
html:active-view-transition .plate img { clip-path: none; }
html:active-view-transition .plate::before,
html:active-view-transition .plate::after {
  opacity: 0.9;
  transition-delay: 0s;
}
html:active-view-transition .lines .ln > span { transform: none; }
html:active-view-transition .rise { opacity: 1; transform: none; }
html:active-view-transition .orbit .draw { stroke-dashoffset: 0; }

/* ---------- designed calm ---------- */
/* Not "duration: 0". The page is a printed sheet: flat plates, ink
   already at display contrast, no turn, no lift, fibre still present
   because it is the paper, not an animation. */
@media (prefers-reduced-motion: reduce) {
  .entry__title,
  .indexrail__t {
    font-variation-settings: "opsz" var(--flair-opsz-touch);
    transition: none;
  }
  .entry:hover .entry__title,
  .entry:focus-visible .entry__title,
  .indexrail a:hover .indexrail__t,
  .indexrail a:focus-visible .indexrail__t {
    font-variation-settings: "opsz" var(--flair-opsz-touch);
  }
  .disc__panel a, .crumb a, .foot a { font-stretch: 100%; transition: none; }
  .sec--cover .plate { transform: none; box-shadow: none; }
  .entry__media .plate,
  .plategrid .plate,
  .provenance__card .plate,
  .substance .plate,
  .swatch:hover .swatch__chip,
  .swatch:active .swatch__chip { transform: none; }
  .btn, .btn:active { transform: none; box-shadow: none; }
  .plate[data-vt-hero] > img { clip-path: none; }
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(plate-hero),
  ::view-transition-old(plate-hero),
  ::view-transition-new(plate-hero) { animation: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .plate img { clip-path: none !important; }
  .lines .ln > span { transform: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
  .orbit .draw { stroke-dashoffset: 0 !important; }
}