/* ============================================================
   Biennale di Venezia 2026 — magazine
   Editorial dark theme, in lijn met kunstcollectie.marcovanthiel.nl
   ------------------------------------------------------------
   - Dark "ink"-achtergrond met cream-tekst
   - Display: Instrument Serif italic (zelfde h-display-italic uit
     de kunstcollectie-app)
   - Body: Instrument Serif regular voor leesvriendelijke runs
   - Mono: IBM Plex Mono voor labels en kickers
   - Lime-accent (#d4ff3a) als primair, coral-rood (#ff7066) als
     secundair (vervangt de oude "Biennale red")
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;700;900&display=swap');

:root {
  /* — palet — overgenomen uit kunstcollectie's @theme tokens — */
  --ink-900: #08070a;
  --ink-800: #0d0b08;
  --ink-700: #13110d;
  --ink-600: #1a1814;
  --ink-500: #23211c;

  --cream-50:  #faf8f3;
  --cream-100: #f5f2eb;
  --cream-200: #ebe6d9;
  --cream-300: #d8d1bd;
  --cream-400: #bbb094;

  --lime-400:  #d4ff3a;
  --coral-500: #ff7066;
  --coral-600: #ff4d3d;
  --cyan-500:  #3df8ff;
  --gold:      #b08a3e;

  /* Aliassen die de bestaande selectors gebruiken */
  --ink: var(--cream-100);          /* Body-tekst is licht op donker */
  --paper: var(--ink-900);
  --paper-2: var(--ink-800);
  --rule: rgba(245, 242, 235, 0.12);
  --accent: var(--lime-400);
  --accent-2: var(--coral-500);
  --muted: var(--cream-400);

  --display: 'Instrument Serif', 'Bodoni Moda', Georgia, serif;
  --serif:   'Instrument Serif', Georgia, 'Times New Roman', 'Noto Serif SC', serif;
  --sans:    'Inter', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--ink-900); }

body {
  background: var(--ink-900);
  color: var(--cream-100);
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.6;
  /* Subtiele textuur — geen "paper-dots" meer; in plaats daarvan een
     zacht radiaal accentlicht rechtsboven en een tweede linksonder */
  background-image:
    radial-gradient(circle at 88% -10%, rgba(212, 255, 58, 0.06), transparent 40%),
    radial-gradient(circle at -10% 110%, rgba(255, 112, 102, 0.05), transparent 45%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[lang="zh"] body { font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif; }

a {
  color: var(--lime-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 255, 58, 0.32);
  transition: color .2s, border-color .2s;
}
a:hover {
  color: var(--coral-500);
  border-bottom-color: var(--coral-500);
}

/* ---------- Top strap ---------- */
.strap {
  border-bottom: 1px solid var(--rule);
  background: rgba(13, 11, 8, 0.85);
  backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-200);
  position: sticky;
  top: 0;
  z-index: 30;
}
html[lang="zh"] .strap { text-transform: none; letter-spacing: .04em; }
.strap-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.strap > .strap-inner > div { color: var(--cream-300); }
.strap a { color: var(--cream-100); border-bottom: none; }
.strap a:hover { color: var(--lime-400); }

/* Terug-link naar marcovanthiel.nl in de strap */
.back-home {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--cream-100);
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  border-bottom: none;
  transition: color .2s, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.back-home > [aria-hidden="true"] {
  color: var(--lime-400);
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
  display: inline-block;
}
.back-home:hover { color: var(--lime-400); }
.back-home:hover > [aria-hidden="true"] {
  transform: translateX(-3px);
}

.lang-switch button {
  background: transparent;
  border: 1px solid transparent;
  padding: 3px 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  cursor: pointer;
  color: var(--cream-300);
  text-transform: uppercase;
  border-radius: 3px;
  transition: all .18s;
}
.lang-switch button[aria-pressed="true"] {
  background: var(--lime-400);
  color: var(--ink-900);
  font-weight: 600;
}
.lang-switch button:hover {
  border-color: var(--lime-400);
  color: var(--lime-400);
}
.lang-switch button[aria-pressed="true"]:hover {
  color: var(--ink-900);
  border-color: var(--lime-400);
}

/* ---------- Masthead ---------- */
header.masthead {
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 28px 18px;
  text-align: center;
  position: relative;
  border-bottom: 1px solid var(--rule);
}
header.masthead::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  background: var(--lime-400);
  margin: 14px auto -1px;
}
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--lime-400);
  margin-bottom: 12px;
}
html[lang="zh"] .kicker { letter-spacing: .12em; }

h1.title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 8vw, 110px);
  line-height: .95;
  margin: 0;
  letter-spacing: -.02em;
  color: var(--cream-50);
}
h1.title em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  color: var(--lime-400);
}
html[lang="zh"] h1.title { font-style: normal; }

.subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.9vw, 22px);
  line-height: 1.45;
  margin: 14px auto 8px;
  max-width: 820px;
  color: var(--cream-200);
}
html[lang="zh"] .subtitle { font-style: normal; }

.meta-row {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-400);
  padding: 10px 0 2px;
}
html[lang="zh"] .meta-row { letter-spacing: .04em; text-transform: none; }
.meta-row span { white-space: nowrap; }

/* ---------- Layout ---------- */
main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 28px 80px;
  /* CSS-counter zodat elke section een 001/002/...-nummer krijgt
     zonder dat we dat in de HTML hoeven harden. */
  counter-reset: section-counter;
}
section {
  padding: 44px 0 36px;
  border-top: 1px solid var(--rule);
  counter-increment: section-counter;
}
section:first-of-type { border-top: none; }

/* Sectie-label krijgt het nummer + hairline-pattern uit de
   kunstcollectie-DashboardSection: "001 ──────────  LABEL" */
.section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cream-300);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
html[lang="zh"] .section-label { letter-spacing: .08em; text-transform: none; }
.section-label::before {
  content: counter(section-counter, decimal-leading-zero);
  flex: 0 0 auto;
  color: var(--lime-400);
  font-weight: 600;
  letter-spacing: .14em;
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
/* Per-sectie accent-kleur op het cijfer — herhaalt de "accent" property
   van DashboardSection (lime/coral/cyan/etc.) */
section#editorial .section-label::before  { color: var(--lime-400); }
section#cover-story .section-label::before { color: var(--coral-500); }
section#gossip .section-label::before      { color: #ffd23a; }
section#pavilions .section-label::before   { color: var(--cyan-500); }
section#reviews .section-label::before     { color: #b333ff; }
section#updates .section-label::before     { color: var(--lime-400); }

h2.head {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 66px);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0 0 16px;
  color: var(--cream-50);
}
h2.head::after {
  content: ".";
  color: var(--lime-400);
  font-style: italic;
}
html[lang="zh"] h2.head { font-style: normal; }
section#cover-story h2.head::after { color: var(--coral-500); }
section#gossip h2.head::after      { color: #ffd23a; }
section#pavilions h2.head::after   { color: var(--cyan-500); }
section#reviews h2.head::after     { color: #b333ff; }

h3.subhead {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.18;
  margin: 0 0 10px;
  color: var(--cream-50);
}
html[lang="zh"] h3.subhead { font-style: normal; }

.lede {
  font-family: var(--serif);
  font-size: clamp(18px, 1.55vw, 22px);
  font-style: italic;
  color: var(--cream-200);
  margin: 0 0 22px;
  max-width: 760px;
  line-height: 1.5;
}
html[lang="zh"] .lede { font-style: normal; }

.columns-2 {
  column-count: 2;
  column-gap: 40px;
  color: var(--cream-100);
}
.columns-3 {
  column-count: 3;
  column-gap: 32px;
  color: var(--cream-100);
}
@media (max-width: 880px) {
  .columns-2, .columns-3 { column-count: 1; }
}
.columns-2 p, .columns-3 p { margin-top: 0; }
.columns-2 strong, .columns-3 strong {
  color: var(--cream-50);
  font-weight: 600;
}
.columns-2 em, .columns-3 em {
  font-style: italic;
  color: var(--lime-400);
}

.dropcap::first-letter {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 5.6em;
  float: left;
  line-height: .8;
  padding: 8px 12px 0 0;
  color: var(--lime-400);
}
html[lang="zh"] .dropcap::first-letter {
  font-size: 3.4em;
  padding: 8px 8px 0 0;
  font-style: normal;
}

/* ---------- Cover story ---------- */
.cover {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 980px) { .cover { grid-template-columns: 1fr; } }
.cover-art {
  border: 1px solid var(--rule);
  background: var(--ink-700);
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
.cover-art img { display: block; width: 100%; height: auto; }
.cover-art figcaption {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(245, 242, 235, .6);
  text-transform: uppercase;
}
html[lang="zh"] .cover-art figcaption { letter-spacing: .06em; text-transform: none; }

/* ---------- Cards ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 26px;
}
.card {
  grid-column: span 4;
  background: rgba(245, 242, 235, .025);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 18px 20px 22px;
  transition: border-color .25s, transform .25s, background .25s;
}
.card:hover {
  border-color: rgba(212, 255, 58, .3);
  transform: translateY(-2px);
  background: rgba(245, 242, 235, .04);
}
.card.span-6 { grid-column: span 6; }
.card.span-12 { grid-column: span 12; }
@media (max-width: 980px) {
  .card, .card.span-6 { grid-column: span 12; }
}
.card-art {
  margin: -18px -20px 14px;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  background: var(--ink-700);
  position: relative;
  border-radius: 6px 6px 0 0;
}
.card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92);
}
.card .flag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lime-400);
  margin-bottom: 8px;
}
html[lang="zh"] .card .flag { letter-spacing: .06em; text-transform: none; }
.card h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--cream-50);
}
html[lang="zh"] .card h3 { font-style: normal; }
.card p {
  margin: 0 0 12px;
  font-size: 15.5px;
  color: var(--cream-200);
  line-height: 1.55;
}
.card .byline {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-400);
}
html[lang="zh"] .card .byline { letter-spacing: .03em; text-transform: none; }

.card-source {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--cream-400);
}
.card-source a {
  color: var(--lime-400);
  border-bottom: 1px solid rgba(212, 255, 58, .3);
  margin-left: 4px;
}
.card-source a:hover {
  color: var(--coral-500);
  border-bottom-color: var(--coral-500);
}
html[lang="zh"] .card-source { letter-spacing: 0; }

/* ---------- Pull quote ---------- */
.pullquote {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 32px 0;
  margin: 32px 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(26px, 3.3vw, 40px);
  line-height: 1.18;
  text-align: center;
  color: var(--cream-50);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
html[lang="zh"] .pullquote { font-style: normal; }
.pullquote::before {
  content: "“";
  display: block;
  font-size: 1.8em;
  line-height: .55;
  color: var(--lime-400);
  margin-bottom: 8px;
}
.pullquote .source {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream-400);
}
html[lang="zh"] .pullquote .source { letter-spacing: .06em; text-transform: none; }

/* ---------- Reviews ---------- */
.review {
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 28px;
  align-items: baseline;
}
@media (max-width: 880px) {
  .review { grid-template-columns: 1fr; gap: 8px; }
}
.review:last-child { border-bottom: none; }
.review .outlet {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--cream-50);
}
html[lang="zh"] .review .outlet { font-style: normal; }
.review .outlet a {
  color: inherit;
  border-bottom: 1px solid rgba(212, 255, 58, .35);
}
.review .outlet a:hover {
  color: var(--lime-400);
  border-bottom-color: var(--lime-400);
}
.review .outlet a::after {
  content: " ↗";
  font-style: normal;
  font-size: .65em;
  letter-spacing: 0;
  color: var(--lime-400);
  vertical-align: super;
}
.review .quote {
  font-family: var(--serif);
  font-size: 16.5px;
  color: var(--cream-200);
  line-height: 1.55;
}
.review .stars {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--lime-400);
  text-transform: uppercase;
  white-space: nowrap;
}
html[lang="zh"] .review .stars { letter-spacing: .04em; text-transform: none; }

/* ---------- Gossip ---------- */
.gossip {
  background: var(--ink-800);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 36px 32px 32px;
  position: relative;
  margin-top: 8px;
}
.gossip::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(245, 242, 235, .08);
  border-radius: 4px;
  pointer-events: none;
}
.gossip ol {
  padding-left: 26px;
  margin: 0;
  position: relative;
}
.gossip li {
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: 16.5px;
  color: var(--cream-100);
  line-height: 1.55;
  padding-left: 6px;
}
.gossip li::marker { color: var(--lime-400); font-weight: 600; }
.gossip li strong {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  color: var(--cream-50);
}
html[lang="zh"] .gossip li strong { font-style: normal; }
.gossip .stamp {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--lime-400);
  color: var(--ink-900);
  padding: 5px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px;
  transform: rotate(-1.5deg);
}

/* ---------- Daily updates ---------- */
.updates {
  border: 1px solid var(--rule);
  background: var(--ink-800);
  border-radius: 6px;
  padding: 26px 28px;
}
.updates header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.updates header h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  font-size: 28px;
  color: var(--cream-50);
}
html[lang="zh"] .updates header h3 { font-style: normal; }
.updates header .stamp {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lime-400);
}
html[lang="zh"] .updates header .stamp { letter-spacing: .06em; text-transform: none; }
.update-entry {
  border-bottom: 1px dotted rgba(245, 242, 235, .15);
  padding: 16px 0;
}
.update-entry:last-child { border-bottom: none; }
.update-entry time {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--coral-500);
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}
.update-entry h4 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 21px;
  margin: 0 0 6px;
  color: var(--cream-50);
}
html[lang="zh"] .update-entry h4 { font-style: normal; }
.update-entry p {
  margin: 0;
  font-size: 15.5px;
  color: var(--cream-200);
  line-height: 1.55;
}

.next-update {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-400);
}
html[lang="zh"] .next-update { letter-spacing: .04em; text-transform: none; }

/* ---------- Footer ---------- */
footer.colofon {
  border-top: 1px solid var(--rule);
  margin-top: 60px;
  padding: 32px 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--cream-400);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
html[lang="zh"] footer.colofon { letter-spacing: .04em; text-transform: none; }

/* ---------- i18n: hide variants ---------- */
[data-i18n] [lang]:not([data-active]) { display: none; }

/* ---------- Small utilities ---------- */
.hr-fancy {
  text-align: center;
  color: var(--lime-400);
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  letter-spacing: .5em;
  margin: 28px 0 8px;
}
.badge {
  display: inline-block;
  border: 1px solid rgba(245, 242, 235, .2);
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
  color: var(--cream-200);
  border-radius: 2px;
}
html[lang="zh"] .badge { letter-spacing: .06em; text-transform: none; }
.badge.red {
  background: rgba(255, 112, 102, .15);
  color: var(--coral-500);
  border-color: rgba(255, 112, 102, .35);
}
.badge.gold {
  background: rgba(255, 210, 58, .15);
  color: #ffd23a;
  border-color: rgba(255, 210, 58, .35);
}

/* ============================================================
   EDITORIAL MEDIA — optionele video/afbeelding(en) onder het artikel
   ============================================================ */
.editorial-media {
  margin: 28px 0 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--ink-700);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .45);
}
.editorial-media video,
.editorial-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  background: #000;
}
.editorial-media figcaption {
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-300);
  border-top: 1px solid var(--rule);
  background: var(--ink-800);
}
html[lang="zh"] .editorial-media figcaption {
  letter-spacing: .04em;
  text-transform: none;
}

/* Grid voor meerdere foto's binnen één editorial. Default 3 koloms;
   bij grote schermen 4. Op tablet 2, op mobiel 1. */
.editorial-media-grid {
  display: grid;
  gap: 12px;
  margin-top: 28px;
  grid-template-columns: repeat(3, 1fr);
}
.editorial-media-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1100px) {
  .editorial-media-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .editorial-media-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .editorial-media-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .editorial-media-grid,
  .editorial-media-grid--3,
  .editorial-media-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .editorial-media-grid,
  .editorial-media-grid--2,
  .editorial-media-grid--3,
  .editorial-media-grid--4 {
    grid-template-columns: 1fr;
  }
}
.editorial-media--in-grid {
  margin: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.editorial-media--in-grid img {
  width: 100%;
  height: 220px;
  max-height: none;
  object-fit: cover;
}
@media (min-width: 1100px) {
  .editorial-media--in-grid img { height: 240px; }
}
.editorial-media--in-grid figcaption {
  font-size: 10px;
  letter-spacing: .1em;
  padding: 8px 12px;
}
.editorial-media--in-grid video {
  width: 100%;
  height: 220px;
  max-height: none;
  object-fit: cover;
  background: #000;
  pointer-events: none; /* klik gaat naar parent voor lightbox */
}
@media (min-width: 1100px) {
  .editorial-media--in-grid video { height: 240px; }
}
.editorial-media--in-grid {
  position: relative;
}
.editorial-media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.9);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(8, 7, 10, .7);
  border: 2px solid var(--lime-400);
  color: var(--lime-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  padding-left: 4px; /* optisch centreren van de driehoek */
  pointer-events: none;
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .25s, transform .25s cubic-bezier(.2, .8, .2, 1), background .25s;
}
/* Tijdens autoplay verbergen; pas tonen bij hover om de attentiestrijd
   met de bewegende thumb niet te verliezen. */
.editorial-media--clickable:hover .editorial-media-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  background: rgba(212, 255, 58, .25);
}

/* Klikbare media — cursor + subtiele zoom-hint */
.editorial-media--clickable {
  cursor: zoom-in;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1),
              box-shadow .25s;
}
.editorial-media--clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .55);
}
.editorial-media--clickable:focus {
  outline: 2px solid var(--lime-400);
  outline-offset: 3px;
}
.editorial-media--clickable img,
.editorial-media--clickable video {
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.editorial-media--clickable:hover img {
  transform: scale(1.03);
}

/* ============================================================
   LIGHTBOX — full-screen modal met prev/next-navigatie
   ============================================================ */
body.mvt-lightbox-open { overflow: hidden; }

.mvt-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
}
.mvt-lightbox.is-open {
  display: flex;
}
.mvt-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 10, .94);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.mvt-lightbox-stage {
  position: relative;
  z-index: 1;
  max-width: min(94vw, 1600px);
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mvt-lightbox-stage img,
.mvt-lightbox-stage video {
  display: block;
  max-width: 94vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8);
  background: #000;
}
.mvt-lightbox-caption {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  max-width: 80vw;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-200);
  text-align: center;
  padding: 8px 14px;
  background: rgba(8, 7, 10, .65);
  border: 1px solid var(--rule);
  border-radius: 4px;
  backdrop-filter: blur(4px);
}
html[lang="zh"] .mvt-lightbox-caption {
  letter-spacing: .04em;
  text-transform: none;
}
.mvt-lightbox-counter {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--cream-300);
  background: rgba(8, 7, 10, .55);
  padding: 5px 12px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}
.mvt-lightbox-close,
.mvt-lightbox-prev,
.mvt-lightbox-next {
  position: absolute;
  z-index: 2;
  background: rgba(8, 7, 10, .65);
  border: 1px solid var(--rule);
  color: var(--cream-100);
  font-family: var(--display);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, border-color .2s, transform .25s cubic-bezier(.2, .8, .2, 1);
  backdrop-filter: blur(4px);
}
.mvt-lightbox-close:hover,
.mvt-lightbox-prev:hover,
.mvt-lightbox-next:hover {
  background: var(--lime-400);
  color: var(--ink-900);
  border-color: var(--lime-400);
}
.mvt-lightbox-close {
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
}
.mvt-lightbox-prev,
.mvt-lightbox-next {
  top: 50%;
  width: 56px;
  height: 56px;
  font-size: 36px;
  line-height: 1;
  transform: translateY(-50%);
}
.mvt-lightbox-prev { left: 22px; }
.mvt-lightbox-next { right: 22px; }
.mvt-lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
.mvt-lightbox-next:hover { transform: translateY(-50%) translateX(3px); }
@media (max-width: 640px) {
  .mvt-lightbox-prev, .mvt-lightbox-next {
    width: 44px; height: 44px; font-size: 28px;
  }
  .mvt-lightbox-prev { left: 10px; }
  .mvt-lightbox-next { right: 10px; }
  .mvt-lightbox-close { top: 12px; right: 12px; }
  .mvt-lightbox-counter { top: 12px; }
}

/* ============================================================
   EDITORIAL ARCHIEF — eerdere edities onderaan de section
   ============================================================ */
.editorial-archive {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.editorial-archive[hidden] { display: none; }
.editorial-archive-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cream-300);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
html[lang="zh"] .editorial-archive-label {
  letter-spacing: .08em;
  text-transform: none;
}
.editorial-archive-label::before {
  content: "↺";
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  color: var(--lime-400);
  letter-spacing: 0;
  text-transform: none;
}
.editorial-archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.editorial-archive-btn {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(245, 242, 235, .025);
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background .25s, border-color .25s, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.editorial-archive-btn:hover {
  background: rgba(245, 242, 235, .05);
  border-color: rgba(212, 255, 58, .35);
  transform: translateY(-1px);
}
.editorial-archive-item.is-active .editorial-archive-btn {
  border-color: var(--lime-400);
  background: rgba(212, 255, 58, .07);
}
.editorial-archive-btn time {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--coral-500);
}
html[lang="zh"] .editorial-archive-btn time {
  letter-spacing: .04em;
  text-transform: none;
}
.editorial-archive-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  color: var(--cream-50);
}
html[lang="zh"] .editorial-archive-title { font-style: normal; }

/* ============================================================
   FLITS — moderne, subtiele bewegingseffecten
   ============================================================ */

/* ----- Scroll progress bar bovenaan ----- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--lime-400), var(--coral-500));
  z-index: 60;
  transition: width .12s ease-out;
  box-shadow: 0 0 12px rgba(212, 255, 58, .55);
  pointer-events: none;
}

/* ----- Particle canvas in masthead ----- */
header.masthead {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.masthead-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  mask-image: radial-gradient(ellipse at center, #000 50%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 50%, transparent 90%);
}
header.masthead > *:not(.masthead-particles) { position: relative; z-index: 1; }

/* ----- Hero-tekst entry-animatie ----- */
.kicker, h1.title, .subtitle, .meta-row {
  animation: hero-rise .9s cubic-bezier(.2, .8, .2, 1) both;
}
.kicker      { animation-delay: .05s; }
h1.title     { animation-delay: .15s; }
.subtitle    { animation-delay: .35s; }
.meta-row    { animation-delay: .5s; }
@keyframes hero-rise {
  /* filter:blur bewust weggelaten — laat hero-tekst op Samsung Internet
     stuck op opacity:0 staan (animeren van filter samen met opacity+transform
     start daar niet betrouwbaar) */
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- Title — italic em krijgt een onderlijn-sweep ----- */
h1.title em {
  position: relative;
  display: inline-block;
}
h1.title em::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: .04em;
  width: 100%;
  height: 4px;
  background: var(--lime-400);
  transform: scaleX(0);
  transform-origin: left center;
  animation: sweep-in 1.2s cubic-bezier(.2, .8, .2, 1) 1.1s forwards;
  border-radius: 2px;
  opacity: .85;
}
@keyframes sweep-in { to { transform: scaleX(1); } }

/* ----- Stat-strip direct onder de masthead — gecentreerd ----- */
.stat-strip {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: rgba(8, 7, 10, .85);
  padding: 14px 20px;
  margin-bottom: -1px; /* opvang voor section-border-top */
}
.stat-strip-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream-300);
  text-align: center;
  line-height: 1.35;
}
.stat-strip-inner > span:not(.dot) {
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.stat-strip-inner b {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--lime-400);
  letter-spacing: 0;
  text-transform: none;
}
.stat-strip-inner .dot {
  color: var(--coral-500);
  font-size: 5px;
  line-height: 1;
  vertical-align: middle;
}
@media (max-width: 1024px) {
  .stat-strip-inner { gap: 6px 12px; font-size: 10px; }
  .stat-strip-inner b { font-size: 16px; }
}
@media (max-width: 760px) {
  .stat-strip-inner { gap: 6px 10px; }
  .stat-strip-inner .dot { display: none; }
}

/* ----- Scroll-reveal voor secties + cards + reviews ----- */
/* (meta-row staat in de hero en gebruikt al hero-rise — niet
    meenemen in scroll-reveal, anders dubbel-animeren) */
section,
.card,
.review,
.update-entry,
.pullquote,
.gossip,
.cover-art {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2, .8, .2, 1),
              transform .9s cubic-bezier(.2, .8, .2, 1);
  will-change: opacity, transform;
}
section.in-view,
.card.in-view,
.review.in-view,
.update-entry.in-view,
.pullquote.in-view,
.gossip.in-view,
.cover-art.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  section, .card, .review, .update-entry,
  .pullquote, .gossip, .cover-art {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* JS-loos fallback: sectie-fallback al na 1s tonen, voor het geval JS faalt */
.no-js section, .no-js .card, .no-js .review,
.no-js .update-entry, .no-js .pullquote, .no-js .gossip,
.no-js .cover-art {
  opacity: 1;
  transform: none;
}

/* ----- Card-tilt op hover (zonder JS, pure CSS) ----- */
.card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: opacity .9s cubic-bezier(.2, .8, .2, 1),
              transform .55s cubic-bezier(.2, .8, .2, 1),
              border-color .25s,
              background .25s,
              box-shadow .35s;
  position: relative;
}
.card.in-view:hover {
  transform: translateY(-6px) rotateX(2deg);
  border-color: rgba(212, 255, 58, .45);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(212, 255, 58, .12);
}
/* Glow-glans die over de card-art zweept bij hover */
.card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(212, 255, 58, .28) 50%,
    transparent 70%
  );
  transform: translateX(-110%);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.card:hover .card-art::after {
  transform: translateX(110%);
}

/* ----- Animated link-underline in body-content ----- */
main a:not([class]),
.update-entry a,
.gossip a,
.review .quote a {
  position: relative;
  border-bottom: none;
  padding-bottom: 1px;
  background-image: linear-gradient(var(--lime-400), var(--lime-400)),
                    linear-gradient(rgba(212, 255, 58, .35), rgba(212, 255, 58, .35));
  background-size: 0% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s cubic-bezier(.2, .8, .2, 1), color .25s;
}
main a:not([class]):hover,
.update-entry a:hover,
.gossip a:hover,
.review .quote a:hover {
  background-size: 100% 1px, 100% 1px;
  color: var(--coral-500);
}

/* ----- Review hover — outlet schuift opzij ----- */
.review {
  transition: opacity .9s cubic-bezier(.2, .8, .2, 1),
              transform .9s cubic-bezier(.2, .8, .2, 1),
              background .35s;
}
.review:hover {
  background: rgba(245, 242, 235, .025);
}
.review .outlet a {
  display: inline-block;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.review:hover .outlet a {
  transform: translateX(6px);
}

/* ----- Subtiele kop-glow op hover van h2.head ----- */
h2.head {
  transition: text-shadow .45s;
}
section:hover h2.head {
  text-shadow: 0 0 30px rgba(212, 255, 58, .15);
}

/* ----- Pullquote — klassieke chiastische stip ----- */
.pullquote {
  position: relative;
}
.pullquote::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime-400), transparent);
  margin: 24px auto 0;
}

/* ----- Strap krijgt schaduw bij scroll ----- */
.strap.is-scrolled {
  box-shadow: 0 1px 0 rgba(212, 255, 58, .15),
              0 8px 24px rgba(0, 0, 0, .35);
}

/* ----- Meta-row krijgt items als pills met hover ----- */
.meta-row span {
  position: relative;
  padding: 4px 0;
}
.meta-row > span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -11px;
  top: 50%;
  width: 1px;
  height: 12px;
  background: rgba(245, 242, 235, .2);
  transform: translateY(-50%);
}

/* ----- Footer krijgt animated rule ----- */
footer.colofon {
  position: relative;
}
footer.colofon::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--lime-400);
  transition: width 1s cubic-bezier(.2, .8, .2, 1);
}
footer.colofon.in-view::before {
  width: 80px;
}

/* ============================================================
   Print fallback — flits-elementen verbergen
   ============================================================ */
.scroll-progress,
.masthead-particles,
.stat-strip {
  /* zichtbaar op scherm; verborgen via @media print hieronder */
}

/* ---------- Print fallback (laat magazine-leesbaar achter) ---------- */
@media print {
  html, body { background: #fff; color: #161412; }
  body { background-image: none; }
  .strap, .lang-switch,
  .scroll-progress,
  .masthead-particles,
  .stat-strip { display: none; }
  /* Animaties uit voor print */
  * { animation: none !important; transition: none !important; }
  section, .card, .review, .update-entry,
  .pullquote, .gossip, .cover-art {
    opacity: 1 !important;
    transform: none !important;
  }
  a { color: #1c3a5e; border-bottom-color: rgba(28, 58, 94, .35); }
  .section-label,
  .section-label::before,
  .section-label::after,
  .kicker,
  .meta-row,
  .card .flag,
  .card .byline,
  .review .stars,
  .gossip .stamp,
  .updates header .stamp,
  .update-entry time,
  .next-update,
  footer.colofon {
    color: #6b6258;
  }
  h1.title, h1.title em,
  h2.head, h2.head::after,
  h3.subhead,
  .card h3,
  .review .outlet,
  .updates header h3,
  .update-entry h4,
  .pullquote,
  .columns-2 strong, .columns-3 strong { color: #161412; }
  .columns-2, .columns-3, .lede, .card p, .review .quote, .gossip li,
  .update-entry p, .subtitle { color: #2c2620; }
  .gossip, .updates, .card { background: #f4ede1; border-color: #1a1a1a; }
}