/* =============================================================================
   refertothis — site stylesheet
   Theme carried over from the Cargo build (paper white, mono body, #0033ff
   links, #ffff00 highlight, hard-offset shadows, hairline frame) and extended.
   See design-system/MASTER.md for the rules behind every token in here.
   ========================================================================== */

@import url("fonts.css");

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Ink ladder — lifted verbatim from the Cargo stylesheet's --swatch-1..5 */
  --paper:      #ffffff;
  --ink-1:      rgba(0, 0, 0, 0.85);   /* headings, buttons, hard shadow      */
  --ink-2:      rgba(0, 0, 0, 0.75);   /* body copy                           */
  --ink-3:      rgba(0, 0, 0, 0.60);   /* secondary copy                      */
  --ink-4:      rgba(0, 0, 0, 0.40);   /* labels, active nav, frame border    */
  --ink-5:      rgba(0, 0, 0, 0.25);   /* disabled                            */
  --rule:       rgba(0, 0, 0, 0.40);
  --hair:       rgba(0, 0, 0, 0.15);
  --blue:       #0033ff;               /* every link, unchanged               */
  --yellow:     #ffff00;               /* highlight / tag / drop notice       */

  /* The WebGL layer cannot use the alpha ink ladder — it needs solid colour.
     These three are the only hex values the 3D scenes ever see. */
  --gl-ink:     #000000;
  --gl-paper:   #ffffff;
  --gl-accent:  #0033ff;
  --gl-flag:    #ffff00;

  --shadow:     3px 3px 0 var(--ink-1);
  --shadow-sm:  2px 2px 0 var(--ink-1);

  --font-sans:  "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-geo:   "Jost", "Futura", "Century Gothic", var(--font-sans);

  --pad:        clamp(1rem, 3.4vw, 3rem);
  --gap:        clamp(0.75rem, 1.8vw, 1.5rem);
  --stack:      clamp(3.5rem, 8vw, 7rem);   /* vertical rhythm between blocks */

  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --t:          180ms var(--ease);

  color-scheme: light;
}

/* Inverted colourway. Every surface is token-driven, so the flip is total. */
:root[data-invert="on"] {
  --paper:  #000000;
  --ink-1:  rgba(255, 255, 255, 0.92);
  --ink-2:  rgba(255, 255, 255, 0.82);
  --ink-3:  rgba(255, 255, 255, 0.66);
  --ink-4:  rgba(255, 255, 255, 0.46);
  --ink-5:  rgba(255, 255, 255, 0.30);
  --rule:   rgba(255, 255, 255, 0.46);
  --hair:   rgba(255, 255, 255, 0.20);
  --blue:   #6f8cff;                   /* 0033ff on black is 2.4:1 — lifted   */
  --gl-ink:    #ffffff;
  --gl-paper:  #000000;
  --gl-accent: #6f8cff;
  color-scheme: dark;
}

/* --- 2. Reset ------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;               /* never `hidden` — it kills position:sticky */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: clamp(0.875rem, 0.35vw + 0.8rem, 0.9375rem);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }

/* Screen-print grain. Sits above everything, catches nothing. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-invert="on"] body::after { mix-blend-mode: screen; opacity: 0.08; }

::selection { background: var(--yellow); color: #000; }

/* --- 3. Type ------------------------------------------------------------- */

.wordmark__img {
  width: 100%;
  max-width: min(100%, 62rem);
  height: auto;
  /* Line art scanned on paper. Multiply drops the sheet and keeps the marks. */
  mix-blend-mode: multiply;
}
:root[data-invert="on"] .wordmark__img { mix-blend-mode: screen; filter: invert(1); }
.wordmark[data-painted] { line-height: 0; }

.wordmark {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(3.25rem, 15.4vw, 15rem);
  line-height: 0.82;
  letter-spacing: -0.035em;
  color: var(--ink-1);
  text-transform: lowercase;
  overflow-wrap: anywhere;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.6vw, 2.125rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink-1);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink-1);
}

.label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.prose { color: var(--ink-2); max-width: 62ch; }
.prose p + p { margin-top: 1.1em; }
.prose em { font-style: normal; background: var(--yellow); color: #000; padding: 0 0.15em; }

blockquote.pull {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  text-wrap: balance;
  max-width: 34ch;
}

a { color: var(--blue); text-decoration: underline; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
a:active { opacity: 0.7; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--paper); color: var(--ink-1);
  border: 2px solid var(--ink-1); padding: 0.6rem 1rem;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* --- 4. Layout ----------------------------------------------------------- */

.frame {
  border: 1px solid var(--rule);
  margin: var(--pad);
  min-height: calc(100dvh - var(--pad) * 2);
  display: flex;
  flex-direction: column;
}
@media (max-width: 720px) { .frame { border: 0; margin: 0; min-height: 100dvh; } }

.wrap { padding-inline: var(--pad); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-12 { grid-column: span 12; }
@media (max-width: 860px) {
  .grid > [class*="col-"] { grid-column: span 12; }
}

.block { padding-block: var(--stack); }
.block + .block { border-top: 1px solid var(--hair); }
.right { text-align: right; }
@media (max-width: 860px) { .right { text-align: left; } }

.hr { border: 0; height: 1px; background: var(--rule); margin: 0; }
.hr--thick { height: 3px; background: var(--ink-1); }

/* --- 5. Header ----------------------------------------------------------- */

.bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--gap);
  padding: 0.7rem var(--pad);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.bar__mark {
  font-family: var(--font-sans);
  font-weight: 800; font-size: 0.9375rem; letter-spacing: -0.03em;
  color: var(--ink-1); text-decoration: none; text-transform: lowercase;
  margin-right: auto; white-space: nowrap;
}
.bar__mark sup { font-family: var(--font-mono); font-size: 0.5rem; font-weight: 400; top: -0.7em; }

.nav { display: flex; gap: clamp(0.75rem, 2vw, 1.75rem); align-items: center; }
.nav a {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-1); text-decoration: none;
}
.nav a:hover { color: var(--blue); }
.nav a[aria-current="page"] { color: var(--ink-3); text-decoration: underline; text-underline-offset: 0.3em; }

.inv {
  border: 1px solid var(--ink-1); background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0.45rem; color: var(--ink-1); line-height: 1;
  transition: background var(--t), color var(--t);
}
.inv:hover { background: var(--ink-1); color: var(--paper); }

/* --- 6. Marquee ---------------------------------------------------------- */

.ticker {
  border-bottom: 1px solid var(--hair);
  overflow: hidden; white-space: nowrap;
  padding-block: 0.45rem;
  background: var(--paper);
}
.ticker__track { display: inline-flex; gap: 2.5rem; will-change: transform; animation: slide 42s linear infinite; }
.ticker span {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}
@keyframes slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* --- 7. Buttons & tags --------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--ink-1); background: var(--paper);
  border: 2px solid var(--ink-1); padding: 0.62rem 1.1rem;
  box-shadow: var(--shadow); cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
.btn:hover { transform: translate(1px, 1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink-1); opacity: 1; }
.btn--fill { background: var(--ink-1); color: var(--paper); }
.btn--blue { background: var(--blue); color: #fff; border-color: var(--ink-1); }
.btn--yellow { background: var(--yellow); color: #000; }
.btn[disabled], .btn[aria-disabled="true"] {
  color: var(--ink-3); border-color: var(--ink-4); box-shadow: none;
  cursor: not-allowed; pointer-events: none;
}

.tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.16rem 0.4rem; line-height: 1.3;
  border: 1px solid var(--ink-1); color: var(--ink-1);
}
.tag--yellow { background: var(--yellow); color: #000; border-color: #000; }
.tag--fill   { background: var(--ink-1); color: var(--paper); }
.tag--ghost  { border-color: var(--ink-3); color: var(--ink-3); }

/* Box-logo stamp — the one place Futura-esque geometry is allowed. */
.stamp--mark { display: inline-flex; align-items: center; gap: 0.45em; }
.stamp--mark img { width: 1.5em; height: auto; filter: invert(1); }
:root[data-invert="on"] .stamp--mark img { filter: none; }

.stamp {
  display: inline-block;
  font-family: var(--font-geo); font-style: italic; font-weight: 700;
  font-size: 0.9375rem; letter-spacing: 0.01em; text-transform: lowercase;
  background: var(--ink-1); color: var(--paper);
  padding: 0.18em 0.5em; text-decoration: none;
}

/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--ink-4); background: none; color: var(--ink-3);
  padding: 0.32rem 0.6rem; cursor: pointer; line-height: 1.2;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.chip:hover { border-color: var(--ink-1); color: var(--ink-1); }
.chip[aria-pressed="true"] { background: var(--ink-1); border-color: var(--ink-1); color: var(--paper); }

/* --- 8. Home ------------------------------------------------------------- */

.hero { padding-block: clamp(1.5rem, 4vw, 3rem) 0; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  justify-content: space-between; align-items: baseline;
  border-top: 3px solid var(--ink-1); margin-top: 0.4rem; padding-top: 0.55rem;
}

.reel { position: relative; background: var(--hair); aspect-ratio: 1000 / 784; overflow: hidden; }
.reel video, .reel img { width: 100%; height: 100%; object-fit: cover; }
.reel__badge { position: absolute; left: 0.6rem; bottom: 0.6rem; }

/* The hero reel is full-bleed and crops rather than letterboxes — the loop is
   a texture at the top of the page, not a video to be watched end to end. */
.reel--hero {
  aspect-ratio: auto;
  height: clamp(17rem, 58vh, 36rem);
  border-block: 1px solid var(--rule);
  display: block;
}
.reel--hero video { display: block; }
.reel--hero .reel__badge { left: var(--pad); bottom: 0.9rem; }

.installs { display: grid; gap: 0.2rem; }
.installs li {
  display: flex; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--hair); padding-block: 0.4rem;
  color: var(--ink-2);
}
/* Keep the venue/year split at every width — flex-start made wrapped rows
   look like a different list from the ones that fit on one line. */
.installs li span:first-child { min-width: 0; }
.installs li span:last-child { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.75rem 1.5rem;
  margin-bottom: calc(var(--gap) * 1.4);
}

/* --- 9. Work grid -------------------------------------------------------- */

/* Justified rows. Each plate's flex basis is proportional to its aspect ratio,
   so every item in a row lands on a shared height — the same behaviour as the
   Cargo `gallery-justify` this replaces, without the fixed row-height guess.
   The ::after absorbs the slack so the last row keeps its natural scale. */
.plates {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: clamp(1.75rem, 3.4vw, 3.25rem) var(--gap);
}
.plate { flex: var(--ar, 1) 1 calc(var(--ar, 1) * clamp(11rem, 21vw, 19rem)); min-width: 0; }
.plates::after { content: ""; flex: 999999 1 0; }
.plates--home .plate { flex-basis: calc(var(--ar, 1) * clamp(8rem, 12vw, 11rem)); }

@media (max-width: 700px) {
  .plates { display: grid; grid-template-columns: 1fr 1fr; }
  .plates::after { display: none; }
  .plate { min-width: 0; }
}
@media (max-width: 460px) {
  .plates { grid-template-columns: 1fr; }
}

.plate { display: flex; flex-direction: column; gap: 0.6rem; }
.plate__btn {
  display: block; padding: 0; border: 0; background: none; cursor: pointer;
  width: 100%; text-align: left;
}
.plate__img {
  display: block;                 /* a <span> stays inline — the lot badge then
                                     anchors to the line box, not the image, and
                                     the baseline gap leaves a stray rule below */
  position: relative; overflow: hidden; background: var(--hair);
  border: 1px solid var(--hair);
}
.plate__img picture { display: block; }
.plate__img img { width: 100%; height: auto; transition: transform 420ms var(--ease), filter var(--t); }
.plate__btn:hover .plate__img img { transform: scale(1.028); }
.plate__btn:hover .plate__cap .plate__title { color: var(--blue); }
.plate__cap { display: flex; flex-direction: column; gap: 0.2rem; }
.plate__title { font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.015em; color: var(--ink-1); transition: color var(--t); }
.plate__sub { font-size: 0.75rem; color: var(--ink-3); }
.plate__idx {
  position: absolute; top: 0; left: 0; z-index: 1;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em;
  background: var(--ink-1); color: var(--paper); padding: 0.16rem 0.36rem; line-height: 1.3;
}

/* --- 10. Lightbox -------------------------------------------------------- */

.lb {
  position: fixed; inset: 0; z-index: 200;
  background: var(--paper);
  display: grid; grid-template-rows: auto 1fr;
  opacity: 0; visibility: hidden;
  transition: opacity 200ms var(--ease), visibility 200ms;
}
.lb[data-open="true"] { opacity: 1; visibility: visible; }
.lb__bar {
  display: flex; align-items: center; gap: var(--gap);
  padding: 0.7rem var(--pad); border-bottom: 1px solid var(--rule);
}
.lb__count { margin-right: auto; }
.lb__body {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: var(--pad); overflow: auto; align-items: start;
}
.lb__stage { display: flex; align-items: center; justify-content: center; min-height: 0; }
.lb__stage img { max-height: calc(100dvh - 12rem); width: auto; max-width: 100%; object-fit: contain; border: 1px solid var(--hair); }
.lb__meta { display: flex; flex-direction: column; gap: 0.9rem; padding-bottom: 2rem; }
.lb__text { color: var(--ink-2); max-width: 46ch; }
.lb__text p + p { margin-top: 0.9em; }
@media (max-width: 900px) {
  .lb__body { grid-template-columns: minmax(0, 1fr); }
  .lb__stage img { max-height: 62dvh; }
}

.iconbtn {
  border: 1px solid var(--ink-1); background: var(--paper); cursor: pointer;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  color: var(--ink-1); transition: background var(--t), color var(--t);
}
.iconbtn:hover { background: var(--ink-1); color: var(--paper); }
.iconbtn[disabled] { border-color: var(--ink-4); color: var(--ink-4); cursor: not-allowed; }
.iconbtn svg { width: 0.85rem; height: 0.85rem; }

/* --- 10b. WebGL bands ----------------------------------------------------- */
/* Pure enhancement: hidden until site.js decides this client should get them,
   so a no-WebGL or save-data visitor never sees an empty band. */

.scene { display: none; }
[data-gl="on"] .scene {
  display: block; position: relative;
  border-block: 1px solid var(--rule);
  background: var(--paper);
  contain: paint;
  opacity: 0; transition: opacity 480ms var(--ease);
}
[data-gl="on"] .scene[data-mounted] { opacity: 1; }
.scene canvas { display: block; width: 100%; height: 100%; }
.scene--stack { height: clamp(19rem, 54vh, 32rem); }

.scene--press { height: clamp(20rem, 62vh, 38rem); }
.scene--sheet { height: clamp(15rem, 40vh, 26rem); }
.scene--crate { height: clamp(17rem, 46vh, 28rem); }

.scene__fig {
  position: absolute; left: var(--pad); bottom: 0.9rem; z-index: 1;
  display: flex; gap: 0.5rem; align-items: center; pointer-events: none;
}
.scene__fig .tag { background: var(--paper); }
/* The label sits over whatever the scene is drawing — it needs its own paper. */
.scene__fig .label { background: var(--paper); padding: 0.2rem 0.4rem; }

/* --- 11. Shop ------------------------------------------------------------ */

.notice {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center;
  background: var(--yellow); color: #000;
  border: 2px solid #000; padding: 0.7rem 0.9rem;
  box-shadow: var(--shadow);
}
.notice .label { color: #000; }
.notice p { font-size: 0.8125rem; }
.notice code, .prose code { font-family: var(--font-mono); background: var(--hair); padding: 0 0.25em; }

.goods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: clamp(1.25rem, 2.6vw, 2.25rem) var(--gap); }
.good { display: flex; flex-direction: column; gap: 0.55rem; }
.good__img {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--rule); background: var(--paper);
}
.good__img img { width: 100%; height: 100%; object-fit: cover; }
/* Halftone stand-in until a real product shot lands in the record. */
.good__ph {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 0.4rem;
  background-image: radial-gradient(var(--hair) 1px, transparent 1px);
  background-size: 7px 7px;
}
.good__ph span { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 0 1rem; }
.good__row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.good__name { font-family: var(--font-sans); font-weight: 600; font-size: 0.875rem; letter-spacing: -0.01em; color: var(--ink-1); }
.good__price { font-size: 0.8125rem; color: var(--ink-3); white-space: nowrap; }
.good__note { font-size: 0.75rem; color: var(--ink-3); }
.good__flag { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1; }
.good--out .good__img > img { filter: grayscale(1); opacity: 0.55; }

/* --- 12. Info ------------------------------------------------------------ */

.dl { display: grid; gap: 0; }
.dl > div {
  display: grid; grid-template-columns: minmax(7rem, 22%) 1fr; gap: var(--gap);
  border-bottom: 1px solid var(--hair); padding-block: 0.55rem;
}
@media (max-width: 620px) { .dl > div { grid-template-columns: 1fr; gap: 0.1rem; } }
.dl dt { color: var(--ink-3); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; }
.dl dd { color: var(--ink-2); }

/* --- 13. Footer ---------------------------------------------------------- */

.foot { margin-top: auto; border-top: 3px solid var(--ink-1); }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--gap); padding: var(--stack) var(--pad) 1.5rem; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; border-top: 1px solid var(--hair); padding: 0.8rem var(--pad); }
.foot__stack { display: grid; gap: 0.35rem; align-content: start; }
.foot__stack a { color: var(--ink-1); text-decoration: none; }
.foot__stack a:hover { color: var(--blue); text-decoration: underline; }

/* --- 14. Views ----------------------------------------------------------- */

.view { display: none; }
.view[data-active="true"] { display: block; animation: fade 260ms var(--ease) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); }
.reveal[data-in="true"] { opacity: 1; transform: none; }

body[data-lb="open"] { overflow: hidden; }

/* --- 15. Motion & print -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
}

@media print {
  .bar, .ticker, .foot__legal, .lb, .scene, body::after { display: none !important; }
  .frame { border: 0; margin: 0; }
  .view { display: block !important; }
  a { color: #000; }
}