/* ================================================================
   Hannes Bal portfolio
   Kleuren en maten staan bovenaan als variabelen: pas ze hier aan
   en ze veranderen overal op de site.
   ================================================================ */

:root {
  --paper: #FCFCF5;      /* achtergrond */
  --ink: #1A1A17;        /* tekst en lijnen */
  --green: #1E7A3E;      /* links */
  --element: #2FAC66;    /* groene elementen: woord "Portfolio", actief nummer, groen vlak (kleur uit InDesign) */
  --muted: #55544B;      /* kleine grijze tekst */
  --gutter: 64px;        /* marge links en rechts */
  --ticker-w: 200px;     /* breedte van de tekstkolom */
  --line: 1px;           /* dikte van alle lijnen; js/site.js zet dit op precies 1 schermpixel */

  /* het wiel */
  --radius: 820px;       /* hoe groot de cirkel is */
  --offset: 200px;       /* waar het actieve nummer staat, vanaf links */
  --step: 16;            /* graden tussen twee nummers */
  --num-size: clamp(44px, 5.4vw, 76px);
  --snap-duration: 280ms;                       /* hoe snel het wiel naar het volgende nummer springt */
  --snap-ease: cubic-bezier(.34, 1.24, .64, 1); /* het veertje: 1.24 = licht voorbij en terug, 1 = geen veer */

  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--green); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
img { max-width: 100%; height: auto; display: block; } /* hoogte volgt de breedte: nooit vervormd */

.rule { height: var(--line); background: var(--ink); width: 100%; }

/* ---------------------------------------------------------------
   HOME
   --------------------------------------------------------------- */
.home {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 var(--gutter) 48px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nav {
  height: 96px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: calc(var(--ticker-w) + 32px);
  position: relative;
  z-index: 3;
}
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 40px; }

.wordmark-wrap { position: relative; margin-top: 64px; }
.wordmark-wrap .rule { position: absolute; top: 48px; left: 0; }
.wordmark {
  display: block;
  fill: var(--element);
  stroke: var(--element);   /* zoals in het svg-bestand: een dunne rand rond de letters */
  stroke-miterlimit: 10;
  position: relative;
  z-index: 2;              /* letters liggen voor de tekstkolom */
  width: min(1180px, calc(100% - 60px));
  height: auto;
}

.signature { width: min(460px, 60%); margin: 28px 0 0 36px; }

.home-bottom { margin-top: auto; padding-top: 48px; }
.look {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 52px 0;
  color: var(--green);
  font-size: 17px;
}

/* de tekstkolom die traag omhoog loopt */
.ticker {
  position: absolute;
  top: 0;
  bottom: 48px;
  right: var(--gutter);
  width: var(--ticker-w);
  overflow: hidden;
  z-index: 1;              /* boven de lijnen, onder de letters */
}
.ticker-track { animation: drift 120s linear infinite; }
.ticker p, .ps-col p {
  margin: 0;
  font-size: 13px;
  line-height: 1.42;
  text-align: justify;
  text-align-last: justify;
  hyphens: auto;
}
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* ---------------------------------------------------------------
   INDEX (het wiel)
   De sectie is precies één scherm hoog. De pagina heeft twee
   "verdiepingen" met de index in het midden: boven (home + index) en
   onder (index + about + contact). Zo is de index altijd het einde of
   het begin van de pagina, en stopt het scrollen daar vanzelf. Scrollen
   draait dan het wiel (zie main.js).
   --------------------------------------------------------------- */
.index { position: relative; }

html { overflow-anchor: none; }   /* main.js houdt de index zelf op zijn plek bij het wisselen */
.floor-top .about,
.floor-top .footer,
.floor-bottom .home { display: none; }

.index-frame {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  padding: 0 var(--gutter);
}

.index-head, .index-foot {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 3;
  background: var(--paper);   /* dekt de nummers af die boven en onder uit het wiel draaien */
}
.index-head { top: 0; height: 72px; border-bottom: var(--line) solid var(--ink); }
.index-foot { bottom: 0; height: 72px; border-top: var(--line) solid var(--ink); font-size: 13px; color: var(--muted); }
.index-head ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 40px; }
.index-nav { display: flex; align-items: center; gap: 4px; margin-left: -15px; }
.index-nav span { margin-left: 12px; }
.index-nav button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.index-nav button:hover { color: var(--green); }
.index-nav button:disabled { opacity: .25; cursor: default; color: var(--ink); }

.wheel { list-style: none; margin: 0; padding: 0; }
.wheel li {
  position: absolute;
  left: calc(var(--gutter) + var(--offset) - var(--radius));
  top: 50%;
  height: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.wheel.is-ready li {
  transition: transform var(--snap-duration) var(--snap-ease),
              opacity .15s;
}
.wheel button {
  position: absolute;
  left: var(--radius);
  top: calc(var(--num-size) * -0.55);
  height: calc(var(--num-size) * 1.1);
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--num-size);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wheel li.is-active button { color: var(--element); }

.detail {
  position: absolute;
  right: var(--gutter);
  top: 72px;
  bottom: 72px;
  width: min(640px, 46%);
  display: flex;
  flex-direction: column;
  padding: 32px 0 28px;
  z-index: 2;
}
.detail-img {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 24px;
}
.detail-img img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  transition: opacity .35s ease;
}
.detail-img img.is-changing { opacity: 0; }
.detail-text { display: flex; flex-direction: column; gap: 12px; border-top: var(--line) solid var(--ink); padding-top: 14px; }
.detail-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.detail h2 { margin: 0; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; }
.detail-year { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* naam en beschrijving altijd op één regel, zodat alles op dezelfde hoogte blijft; te lang wordt … */
.detail h2, .detail p { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail p { margin: 0; color: var(--muted); }
.detail-link { color: var(--green); font-size: 17px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; align-self: flex-start; }

/* ---------------------------------------------------------------
   ABOUT
   --------------------------------------------------------------- */
.about { padding: 120px var(--gutter) 96px; }
.section-label { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
.section-label h2 { margin: 0; font-size: 15px; font-weight: 400; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.about-grid p { margin: 0 0 1em; font-size: 19px; line-height: 1.55; max-width: 34em; }
.cv { list-style: none; margin: 0; padding: 0; }
.cv li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-bottom: var(--line) solid var(--ink); font-variant-numeric: tabular-nums; }
.cv li:first-child { border-top: var(--line) solid var(--ink); }
.cv span { color: var(--muted); }

/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */
.footer { padding: 0 var(--gutter) 48px; }
.footer-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 20px; }
.footer small { color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------
   PROJECTPAGINA (projecten/*.html)
   De opening heeft de onderdelen van de openingspagina in het
   print-portfolio (nummer, drie lijnen, groen vlak, illustratie,
   titel, ondertitel, tekstkolom, vierkantjes), maar is opgebouwd
   zoals de home: volle breedte en hoogte, zelfde marges en kop,
   de tekstkolom rechts even breed als op de home.
   Hoogtes staan in % van de opening, zoals in de pdf. Het groene
   vlak, de illustratie en de titel schalen met --u: 1% van een
   pdf-pagina die in het scherm past.
   Het lichtgroene vlak mag hier: het hoort bij de illustratie, zoals
   in het portfolio. Verder op de pagina blijft groen voor links.
   --------------------------------------------------------------- */
.p-head {
  margin: 0 var(--gutter);
  height: 72px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.p-head ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 40px; }

.p-sheet {
  --col-left: calc(100cqw - var(--gutter) - var(--ticker-w));
  position: relative;
  height: calc(100vh - 72px);
  height: calc(100svh - 72px);
  min-height: 520px;
  container-type: size;
  overflow: hidden;                                   /* het snoer van de lamp loopt boven uit beeld */
}
.p-sheet > * { position: absolute; margin: 0; }
/* --u = 1% van een pdf-pagina (A4 liggend) die in de opening past */
.p-sheet > * { --u: min(1cqw, 1.414cqh); --top: calc((100cqh - 70.7 * var(--u)) / 2); }

.ps-num { left: var(--gutter); top: 2.4%; font-size: calc(7.6 * var(--u)); line-height: 1; letter-spacing: -0.02em; }

.ps-rule { left: var(--gutter); right: var(--gutter); height: var(--line); background: var(--ink); }
.ps-r1 { top: 19.06%; }
.ps-r2 { top: 70.15%; }
.ps-r3 { top: 94.02%; }

/* de tekstkolom: net als op de home loopt ze traag omhoog, ligt ze over
   de lijnen maar onder de illustratie, en stopt ze op de onderste lijn */
.ps-col { right: var(--gutter); width: var(--ticker-w); top: 0; bottom: calc(100% - 94.02%); overflow: hidden; z-index: 1; }

/* groen vlak en illustratie: vlak links van de tekstkolom, zoals in de pdf */
.ps-field {
  left: calc(var(--col-left) - 47 * var(--u));
  width: calc(45 * var(--u));
  top: calc(var(--top) + 7.7 * var(--u));
  height: calc(55.4 * var(--u));
  fill: var(--element);
  z-index: 2;
}
.ps-lamp {
  left: calc(var(--col-left) - 71 * var(--u));
  top: calc(var(--top) - 14.4 * var(--u));
  width: calc(74.7 * var(--u));
  max-width: none;
  height: auto;
  z-index: 3;
  pointer-events: none;
}

.ps-title {
  left: calc(var(--gutter) - 0.04em);
  top: calc(70.15% - 18.1 * var(--u));
  z-index: 4;
  font-size: calc(13.9 * var(--u));
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  color: rgba(26, 26, 23, 0.8);                       /* halfdoorschijnend, zoals in de pdf: de lamp schemert erdoor */
}
.ps-sub {
  left: var(--gutter);
  top: calc(70.15% + 12px);
  width: max(260px, calc(28 * var(--u)));
  z-index: 4;
  font-size: 17px;
  line-height: 1.5;
}



.p-section { padding: 96px var(--gutter) 0; }
.p-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.p-text p { margin: 0 0 1em; font-size: 19px; line-height: 1.55; max-width: 32em; }
.p-figs { display: grid; gap: 32px; }
.p-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }

.project-page figure { margin: 0; }
.project-page figure img { width: 100%; height: auto; }
.project-page figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }

.p-quote {
  margin: 56px 0 0;
  max-width: 26em;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.p-foot { padding: 144px var(--gutter) 48px; }
.p-foot-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-top: 20px;
}
.p-prev, .p-next { display: flex; align-items: baseline; gap: 16px; min-height: 44px; }
.p-next { justify-content: flex-end; text-align: right; }
.p-foot-num { font-size: 40px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.p-prev:hover, .p-next:hover { color: var(--green); }
.project-page .footer { padding-top: 0; }

/* ---------------------------------------------------------------
   SYSTEEMSTIJL (proef, geïnspireerd op dunneandraby.co.uk)
   Het gevoel van een oud computerprogramma: kleine "systeem"-tekst
   in letters met vaste breedte, een menu als een terminal, archief-
   nummers, een systeemknop en een overzicht van kleine vakjes.
   Titels, lopende tekst en de handgemaakte elementen blijven zoals ze zijn.
   --------------------------------------------------------------- */
:root { --mono: "IBM Plex Mono", Monaco, "Lucida Console", monospace; --box: #C9C8BE; }

/* 1. letters: twee lettertypes, zes vaste combinaties
   mono = "het programma" (alles wat geen lopende tekst of titel is)
   Jost = "de inhoud" (lopende tekst, titels, en de grote titel op de opening) */
:root {
  --jost: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --sys: 12px;      /* systeem: menu, kopjes, fiche, bijschriften, knoppen, links, cv, tekstkolom */
  --text: 19px;     /* lopende tekst */
  --title: 40px;    /* titels: projectnaam, citaat, namen vorige/volgende */
}
body { font-family: var(--mono); font-size: var(--sys); letter-spacing: 0.02em; }

/* systeem: mono 12px (deze hadden elk hun eigen grootte) */
.index-foot, .footer small, .section-label h2, .look, .detail-link, .all-label,
.ps-sub, .ticker p, .ps-col p, .cv li, .project-page figcaption {
  font-family: var(--mono);
  font-size: var(--sys);
  letter-spacing: 0.02em;
}
.ticker p, .ps-col p { line-height: 1.5; text-align: left; text-align-last: left; } /* links uitgelijnd: uitvullen geeft gaten met deze letters */
.ps-sub { line-height: 1.5; }

/* systeem in HOOFDLETTERS: alleen menu, kopjes en fiche */
.nav ul, .index-head ul, .p-head ul, .index-head > span, .section-label h2, .detail-no, .p-fiche {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* nummers: mono, drie vaste groottes (wiel, opening, vorige/volgende) */
.wheel button, .ps-num, .p-foot-num { font-family: var(--mono); letter-spacing: -0.04em; }
.p-foot-num { font-size: var(--title); }

/* tekst: Jost 19px */
.about-grid p, .p-text p, .detail p { font-family: var(--jost); font-size: var(--text); letter-spacing: 0; }

/* titels: Jost 40px */
.detail h2, .p-quote, .p-foot-title { font-family: var(--jost); font-size: var(--title); line-height: 1.15; letter-spacing: -0.01em; }

/* de grote titel op de opening blijft Jost, als handgemaakt element */
.ps-title { font-family: var(--jost); letter-spacing: -0.015em; }

/* 2. menu als een terminal: PROJECTS --- ABOUT --- CONTACT */
.nav ul, .index-head ul, .p-head ul { gap: 0; }
.nav li + li::before, .index-head li + li::before, .p-head li + li::before { content: "---"; margin: 0 0.9em; }
.nav a[aria-current], .index-head a[aria-current], .p-head a[aria-current] { color: var(--element); }

/* 3. archiefnummer: PROJECT #01 boven de naam, en een fiche op de projectpagina */
.detail-no { text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: -6px; }
.p-fiche { margin: 48px var(--gutter) 0; text-transform: uppercase; letter-spacing: 0.06em; }

/* 4. "open project >>" als systeemknop */
.detail-link {
  font-family: var(--mono);
  font-size: 12px;
  min-height: 0;
  padding: 3px 8px;
  margin-top: 4px;
  background: var(--green);
  color: var(--paper);
}
.detail-link:hover { background: var(--element); color: var(--paper); }

/* 5. "show all projects": raster van kleine vakjes */
.index-foot .sep { margin-left: 0.9em; }
.index-nav .show-all { width: auto; height: auto; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; font: inherit; color: var(--green); background: none; border: 0; padding: 0 0 0 0.9em; cursor: pointer; }
.index-nav .show-all:hover { color: var(--element); }
.index-head, .index-foot { z-index: 4; }
.all {
  position: absolute;
  top: 72px;
  bottom: 72px;
  left: var(--gutter);
  right: var(--gutter);
  z-index: 3;
  background: var(--paper);
  padding-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 128px);
  grid-auto-rows: min-content;
  gap: 24px 16px;
  overflow-y: auto;
}
.all[hidden] { display: none; }
.all a { display: flex; flex-direction: column; gap: 6px; }
.all-box { display: block; width: 100%; aspect-ratio: 1; padding: 10px; border: var(--line) solid var(--box); overflow: hidden; }
.all-box img { width: 100%; height: 100%; object-fit: contain; }
.all a:hover .all-box, .all a.is-active .all-box { border-color: var(--element); }
.all-label { font-size: var(--sys); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.show-all-open .wheel, .show-all-open .detail { visibility: hidden; }

/* ---------------------------------------------------------------
   TABLET (bv. iPad staand)
   --------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1100px) {
  :root {
    --ticker-w: 140px;   /* smallere tekstkolom, zodat de letters niet half verdwijnen */
    --offset: 100px;     /* nummers meer naar links, weg van het knipsel */
  }
}

/* ---------------------------------------------------------------
   KLEINE SCHERMEN
   --------------------------------------------------------------- */
@media (max-width: 760px) {
  :root {
    --gutter: 16px;
    --ticker-w: 96px;
    --radius: 420px;
    --offset: 24px;
    --step: 14;
    --num-size: 40px;
  }
  .nav { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; height: 96px; }
  .nav ul, .index-head ul { gap: 20px; }
  .ticker p, .ps-col p { font-size: 10px; }
  .wordmark { width: calc(100% - 24px); }
  .wordmark-wrap { margin-top: 40px; }
  .wordmark-wrap .rule { top: 20px; }
  .signature { margin-left: 8px; }
  /* het wiel krijgt de bovenste helft; wat eronder draait, wordt afgeknipt */
  .wheel { position: absolute; left: 0; right: 0; top: 72px; height: calc(60% - 72px); overflow: hidden; }
  .wheel li { top: 50%; }
  .detail { left: var(--gutter); right: var(--gutter); width: auto; top: 60%; padding-top: 0; }
  /* het knipsel staat rechts naast het groene nummer, op dezelfde hoogte (bovenste helft) */
  .detail-img {
    position: absolute;
    left: 38%;
    right: 0;
    bottom: calc(100% + 12px);
    height: calc(60vh - 96px);
    height: calc(60svh - 96px);
    padding: 0;
  }
  .detail p { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-grid p { font-size: 17px; }
  .cv li { grid-template-columns: 1fr; gap: 2px; }

  /* systeemstijl op gsm: kortere scheiding, voettekst zonder uitleg */
  :root { --text: 17px; --title: 28px; }
  .nav li + li::before, .index-head li + li::before, .p-head li + li::before { content: "--"; margin: 0 0.5em; }
  body .nav ul, body .index-head ul, body .p-head ul { gap: 0; flex-wrap: nowrap; white-space: nowrap; letter-spacing: 0.02em; }
  .index-nav > span:not(.sep) { display: none; }
  .index-foot .sep { display: none; }
  .all { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; padding-top: 24px; }
  .p-fiche { margin-top: 32px; }

  /* projectpagina: de opening wordt staand, met dezelfde onderdelen */
  .p-head ul { gap: 20px; }
  .p-sheet { height: auto; min-height: 0; aspect-ratio: 0.62; container-type: inline-size; }
  .p-sheet > * { --u: 1cqw; }
  .ps-num { top: 2%; font-size: 14cqw; }
  .ps-r1 { top: 11%; }
  .ps-r2 { top: 77%; }
  .ps-r3 { top: 97.5%; }
  .ps-col { bottom: calc(100% - 97.5%); }
  .ps-field { left: 8%; top: 16%; width: calc(100% - 8% - var(--gutter) - var(--ticker-w) - 8px); height: 52%; }
  .ps-lamp { left: 3.4%; top: 2.9%; width: 87.4%; }
  .ps-title { top: 59%; font-size: 24cqw; }
  .ps-sub { top: 78%; width: calc(100% - 2 * var(--gutter) - var(--ticker-w) - 12px); }
  .p-section { padding-top: 64px; }
  .p-split, .p-pair { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .p-text p { font-size: 17px; }
  .p-quote { margin-top: 40px; }
  .p-foot { padding-top: 96px; }
  .p-foot-row { grid-template-columns: 1fr 1fr; }
  .p-foot-row .to-index { grid-column: 1 / -1; grid-row: 2; }
  .p-prev, .p-next { flex-direction: column; gap: 4px; align-items: flex-start; }
  .p-next { align-items: flex-end; }
  .p-next .p-foot-num { order: -1; }
}

/* ---------------------------------------------------------------
   LAAG SCHERM (bv. gsm liggend): kleinere kop en voet, knipsel en
   tekst naast elkaar, zodat het knipsel zichtbaar blijft
   --------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --num-size: 40px; --title: 28px; --step: 8; }   /* nummers dichter bij elkaar */
  .index-head, .index-foot { height: 48px; }
  .detail-title-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .detail h2 { white-space: normal; }                   /* naam mag hier over twee regels */
  .wheel { position: absolute; left: 0; right: 55%; top: 48px; bottom: 48px; height: auto; overflow: hidden; }
  .wheel li { top: 50%; }
  .detail {
    top: 48px;
    bottom: 48px;
    left: auto;
    right: var(--gutter);
    width: min(640px, 55%);
    padding: 12px 0;
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
  }
  .detail-img { position: static; flex: 1; height: auto; padding: 0; }
  .detail-text { flex: 1; min-width: 0; justify-content: center; border-top: 0; border-left: var(--line) solid var(--ink); padding: 0 0 0 16px; }
  .detail p { display: none; }
  .all { top: 48px; bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  .detail-img img { transition: none; }
  .wheel.is-ready li { transition: none; }
}