/* ---------- fonts ----------

   Self-hosted, vendored from _lib/fonts. The Google CDN link this replaces was
   the page's only third-party request, and Archivo Black was the only face in
   the stack that _lib did not carry, so it was vendored into
   _lib/fonts/ArchivoBlack/ (OFL, registered in font-licenses.json) at the same
   time. Same subsetted woff2 files Google serves, so rendering is unchanged.

   font-display: block, not swap, on the display face. The hero wordmark is set
   in it at 11.3cqw and the loader holds the page for ~3.5s anyway, so there is
   no first-paint to protect; swap would only buy a flash of a fallback
   grotesque at 160px, reflowing a nowrap line that is clipped by its own box.
   Space Mono keeps swap because body text should not wait on a font. */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fonts/archivo-black-v23-latin-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fonts/archivo-black-v23-latin-ext-regular.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fonts/anton-v27-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/space-mono-v17-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/space-mono-v17-latin-700.woff2') format('woff2');
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }

/* The reset above zeroes margins but not font-weight, so every h1/h2/h3 kept the
   UA default `bold`. Archivo Black and Anton ship ONE weight each, so the
   browser was synthesising that bold by smearing the outline: fake weight on a
   display face, at 11cqw, which is where it is most visible. Two defences,
   because they fail differently. font-synthesis-weight refuses the smear
   outright and is the guard against a heading added later. The explicit 400 on
   the display faces puts the intent in the CSS instead of relying on a switch.
   Space Mono is exempt: it ships real 400 and 700, so nothing is faked there. */
h1, h2, h3, h4 { font-weight: 400; }
html { font-synthesis-weight: none; font-synthesis-style: none; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

/* ---------- tokens ---------- */
:root {
  --paper: #f2f1ec;
  --ink: #131312;
  --acid: #6aea0e;
  --lime: #b4e90a;
  --dark: #0a0b0a;
  --hairline: rgba(19, 19, 18, .18);
}

/* ---------- base ---------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Space Mono', monospace;
  position: relative;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

::selection { background: var(--acid); color: var(--ink); }

:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }

/* ---------- paper grain overlay ---------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==================================================== */
/* composition container                                 */
/* ==================================================== */
.comp {
  position: relative;
  width: 100%;
  container-type: inline-size;
  background: var(--paper);
}

@media (min-width: 1000px) {
  .comp--hero {
    aspect-ratio: 2688 / 1316.3;
    overflow: hidden;
  }
  .comp--joinbar {
    aspect-ratio: 2688 / 203.7;
    overflow: hidden;
  }
  .comp .g {
    position: absolute;
    left: var(--l);
    top: var(--t);
    width: var(--w);
    height: var(--h);
  }
  .comp .gp {
    position: absolute;
    left: var(--l);
    top: var(--t);
  }
}

@media (max-width: 999px) {
  .comp { display: flex; flex-direction: column; }
}

/* grunge/distressed text fill: solid ink/acid + noise blended, clipped to text */
.grunge-ink,
.grunge-acid {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(var(--ink), var(--ink));
  background-blend-mode: overlay;
  background-size: 240px 240px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.grunge-acid {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(var(--acid), var(--acid));
}

/* fit-to-box: JS scales the inner span so the line fills its mapped box exactly */
.fit { display: inline-block; transform-origin: 0 0; }

/* ==================================================== */
/* nav                                                   */
/* ==================================================== */
.c-nav {
  --l: 0%; --t: 0%; --w: 100%; --h: 4.966%;
  background: var(--paper);
  border-bottom: 1.5px solid var(--hairline);
  z-index: 20;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 14px 16px;
}

.c-nav__menu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-transform: uppercase;
}

.c-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 0 0 0 auto;
}

.c-nav__links a {
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
}

.c-nav__right {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.c-nav__search {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-transform: uppercase;
}

/* a <button> since it operates the oplage device rather than navigating, so it
   carries the UA reset the other two nav buttons already carry */
.c-nav__cart {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Full is a state you can see without reading the number. The mark is an acid
   UNDERLINE and not acid text: --acid is #6aea0e, which against --paper is
   nowhere near a text floor, so it is used as a rule under ink and never as
   ink. Same reason the manifest highlight is a swipe behind the ink. */
.c-nav__cart.is-vol {
  text-decoration: underline;
  text-decoration-color: var(--acid);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* An empty basket is a readout, not a dead control, so it is disabled but NOT
   greyed: the UA's default disabled colour would drop it to a contrast nobody
   can read, and the number is the whole point of it. */
.c-nav__cart[disabled] {
  color: var(--ink);
  opacity: 1;
  cursor: default;
}

.c-nav__cart[disabled]:hover { text-decoration: none; }

.c-nav__cart:focus-visible,
.c-nav__menu:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

.c-nav__menu:hover, .c-nav__links a:hover, .c-nav__search:hover, .c-nav__cart:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

@media (min-width: 1000px) {
  .c-nav { padding: 0; }
  .c-nav__menu, .c-nav__links a, .c-nav__search, .c-nav__cart {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1cqw;
    white-space: nowrap;
  }
  .c-nav__links { display: contents; }
  .c-nav__right { display: contents; }
  .c-nav__menu { left: 1.4%; }
  .c-nav__menu-plus { position: absolute; left: 6.8%; top: 50%; transform: translateY(-50%); font-size: 1cqw; font-weight: 700; }
  .c-nav__links li:nth-child(1) a { left: 31.4%; }
  .c-nav__links li:nth-child(2) a { left: 38.6%; }
  .c-nav__links li:nth-child(3) a { left: 46.6%; }
  .c-nav__links li:nth-child(4) a { left: 57.7%; }
  .c-nav__search { left: 77.8%; }
  .c-nav__search-svg { position: absolute; left: 86.3%; top: 50%; transform: translateY(-50%); width: 1.2cqw; height: auto; }
  .c-nav__cart { left: 90.3%; }
}

@media (max-width: 999px) {
  .c-nav__links { display: none; }
  .c-nav__search-label { display: none; }
}

/* ==================================================== */
/* the menu sheet                                        */
/* Ink over the page, acid type, one column. Not a       */
/* drawer: a xerox sheet dropped on top, which is the    */
/* only overlay this page's world has a word for.        */
/* ==================================================== */

.c-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--dark);
  display: flex;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.c-menu[hidden] { display: none; }

.c-menu__sheet {
  width: 100%;
  padding: clamp(4.5rem, 9vw, 7rem) clamp(1.4rem, 6vw, 5rem) clamp(2.5rem, 6vw, 4rem);
}

.c-menu__eyebrow {
  margin: 0 0 clamp(1.6rem, 4vw, 2.6rem);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: max(0.72rem, 11px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* paper on --dark, not acid: acid on near-black is a 12:1 shout that makes
     the links below it the second thing you read */
  color: rgba(242, 241, 236, .66);
}

.c-menu__links {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1.5px solid rgba(242, 241, 236, .22);
}

.c-menu__links li { border-bottom: 1.5px solid rgba(242, 241, 236, .22); }

.c-menu__links a {
  display: block;
  padding: clamp(0.5rem, 1.6vw, 0.9rem) 0;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 11vw, 5.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  transition: color 160ms ease, padding-left 220ms cubic-bezier(.22,1,.36,1);
}

.c-menu__links a:hover,
.c-menu__links a:focus-visible {
  color: var(--acid);
  padding-left: 0.14em;
}

.c-menu__links a:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

.c-menu__adres {
  margin: clamp(1.8rem, 4vw, 2.8rem) 0 0;
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: max(0.8rem, 13px);
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(242, 241, 236, .78);
}

.c-menu__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
}

.c-menu__eyebrow { margin-bottom: 0; }

.c-menu__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: none;
  border: 1.5px solid rgba(242, 241, 236, .35);
  /* 44px tap target, which is the point of the padding rather than the look */
  padding: 0.7em 1em;
  min-height: 44px;
  cursor: pointer;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: max(0.78rem, 12px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.c-menu__close:hover,
.c-menu__close:focus-visible {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--dark);
}

.c-menu__close:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

/* the plus on the MENU button rotates to an x while the sheet is up, so the two
   controls read as one pair rather than two unrelated buttons */
.c-nav__menu-plus { transition: transform 260ms cubic-bezier(.22,1,.36,1); }
.c-menu-open .c-nav__menu-plus { transform: translateY(-50%) rotate(45deg); }

/* the page underneath does not scroll while the sheet is up. Belt and braces:
   Locomotive is also stopped in main.js, because a smooth-scroll instance keeps
   consuming wheel events regardless of what the body's overflow says. */
body.c-menu-open { overflow: hidden; }

/* ==================================================== */
/* hero row                                              */
/* ==================================================== */
.c-panelA {
  --l: 0.5%; --t: 5.081%; --w: 65.9%; --h: 41.686%;
  background: var(--paper);
  border: 1.5px solid var(--hairline);
  z-index: 2;
}

.c-buiten {
  --l: 2.2%; --t: 6.582%; --w: 55.9%; --h: 18.476%;
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.8;
  font-size: 11.3cqw;
  white-space: nowrap;
  z-index: 3;
  overflow: hidden;
}
.c-buiten .in { display: inline-block; }
.c-buiten__tm {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 0.14em;
  vertical-align: top;
  letter-spacing: 0.06em;
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
  background: none;
}

.c-spoor {
  --l: 2.2%; --t: 25.982%; --w: 54.5%; --h: 19.053%;
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.8;
  font-size: 11.66cqw;
  white-space: nowrap;
  z-index: 3;
  overflow: hidden;
}
.c-spoor .in { display: inline-block; }

.c-ss24 {
  --l: 58.3%; --t: 15.242%; --w: 7.5%; --h: 6.236%;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  font-size: 1.55cqw;
  color: var(--ink);
  white-space: nowrap;
  z-index: 3;
}
.c-ss24 span { display: block; }

.c-nuonline {
  --l: 58.3%; --t: 21.594%; --w: 6%; --h: 2.309%;
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: max(0.85cqw, 8px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  z-index: 3;
}

.c-cornerglyph {
  --l: 58.3%; --t: 25.173%; --w: 1.5%; --h: 3.002%;
  color: var(--ink);
  z-index: 3;
}
.c-cornerglyph svg { width: 100%; height: 100%; display: block; }

.c-spiral-wrap {
  --l: 59.0%; --t: 29.446%; --w: 4.6%; --h: 9.353%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* An SVG, so it is square by its own viewBox and fills the wrap without the
   letterboxing a 148x137 raster needed. mix-blend-mode is gone with the white
   tile it was knocking out; the colour is the page's ink, stated rather than
   arrived at by multiplication. */
.c-spiral {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--ink);
  opacity: 0.9;
  animation: spin 16s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .c-spiral { animation: none; } }

.c-tagline {
  --l: 0.5%; --t: 46.767%; --w: 35.6%; --h: 2.309%;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: max(0.6cqw, 8px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  padding: 0 0.8em;
  white-space: nowrap;
  z-index: 4;
}

.c-grill {
  --l: 66.6%; --t: 5.081%; --w: 21.6%; --h: 43.765%;
  overflow: hidden;
  z-index: 2;
}

.c-acidrail {
  --l: 88.3%; --t: 5.081%; --w: 11.3%; --h: 43.765%;
  background: var(--acid);
  z-index: 1;
  overflow: hidden;
  position: relative;
}
.c-acidrail__grid {
  /* relative to .c-acidrail (positioned ancestor at desktop); grid runs
     nearly the full rail height per hero.png (map's 20% sub-box undershoots
     the reference — pixel-sampled the source image to confirm) */
  --l: 44.25%; --t: 3.96%; --w: 53.10%; --h: 95.25%;
  background-image:
    linear-gradient(rgba(242,241,236,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,241,236,.4) 1px, transparent 1px);
  background-size: 2.42cqw 2.42cqw;
}

.c-badge {
  z-index: 5;
  border-radius: 50%;
  background: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: max(0.55cqw, 7px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.4;
  padding: 0.4cqw;
}

/* ==================================================== */
/* mid row                                               */
/* ==================================================== */
.c-portrait {
  --l: 0.5%; --t: 49.884%; --w: 23.4%; --h: 48.845%;
  overflow: hidden;
  z-index: 2;
}

.c-shopnu {
  --l: 24.6%; --t: 50.808%; --w: 19.9%; --h: 5.427%;
  background: var(--lime);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.9em;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: max(0.82cqw, 9px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  z-index: 3;
}
.c-shopnu__arrow { width: 42%; height: 0.9em; color: var(--ink); flex: none; }
.c-shopnu__arrow svg { width: 100%; height: 100%; display: block; }

.c-marker {
  --l: 24.6%; --t: 58.083%; --w: 16.6%; --h: 24.827%;
  overflow: hidden;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.c-marker img { width: 100%; height: 100%; object-fit: contain; }

.c-sticker {
  --l: 24.6%; --t: 84.988%; --w: 15.9%; --h: 13.510%;
  overflow: hidden;
  z-index: 2;
}
.c-sticker img { width: 100%; height: 100%; object-fit: contain; }

.c-lookbook {
  --l: 45.4%; --t: 49.423%; --w: 32.2%; --h: 49.423%;
  background: var(--dark);
  z-index: 1;
  overflow: hidden;
  position: relative;
}
.c-lookbook::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(106,234,14,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106,234,14,.14) 1px, transparent 1px);
  background-size: 10.5% 8.3%;
  pointer-events: none;
}

.c-lb-title {
  /* relative to .c-lookbook (positioned ancestor at desktop) */
  --l: 4.35%; --t: 8.41%; --w: 32.92%; --h: 7.48%;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.85;
  font-size: 2.55cqw;
  color: var(--acid);
  z-index: 3;
  white-space: nowrap;
}

.c-lb-num {
  --l: 86.34%; --t: 8.41%;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 1.35cqw;
  letter-spacing: 0.05em;
  color: var(--acid);
  z-index: 3;
}

.c-lb-photo {
  --l: 2.48%; --t: 18.93%; --w: 95.03%; --h: 69.63%;
  overflow: hidden;
  z-index: 2;
}

.c-lb-crosshair {
  --l: 3.42%; --t: 64.25%; --w: 9.01%; --h: 12.62%;
  color: var(--acid);
  z-index: 3;
}
.c-lb-crosshair svg { width: 100%; height: 100%; display: block; }

.c-lb-cta {
  --l: 64.91%; --t: 89.72%;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: max(1.05cqw, 9px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
  z-index: 3;
  white-space: nowrap;
}
.c-lb-cta:hover, .c-lb-cta:focus-visible { color: var(--acid); }

.c-komlangs {
  --l: 77.9%; --t: 49.423%; --w: 21.6%; --h: 33.026%;
  background: var(--dark);
  z-index: 1;
  overflow: hidden;
}

/* The three lines inside the panel used to keep their own traced --l/--t
   absolutes, which left the group high and left rather than centred: measured
   at 1440, a top gap of 15.5px against a bottom gap of 84.9px and a left gap of
   34.5px against a right gap of 106.8px, i.e. 34.7px too high and 36.1px too
   far left. That is not a value to nudge, it is a layout that was never asked
   to centre anything. The trace positioned each line independently inside a box
   whose own proportions then changed with the viewport.

   So the panel centres them itself and the three children stop being absolute.
   The `position: static` is load-bearing: `.comp .g` sets position:absolute and
   these elements still carry the `g` class for the grid they sit in. */
@media (min-width: 1000px) {
  .c-komlangs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9cqw;
    /* Flexbox centres BOXES; the eye centres INK. Anton at line-height .85 sits
       high inside its line box and the two mono lines at 1.3 carry half-leading
       below theirs, so box-centring left the ink 6.3px high at 1440 and 4.2px at
       1024. --ink-trim pushes the group down by half of itself to compensate.
       It is in cqw and not px because the type it is compensating for is in cqw,
       which is why one value is correct at both widths: measured after, the
       offset went to 0.0 and 0.1px respectively. */
    --ink-trim: 0.88cqw;
    /* The panel is NOT the box the text has to live in. .c-halftone is a
       separate .g at --t 70.674% --h 11.775%, ending at 82.449%, which is
       exactly where .c-komlangs ends (49.423% + 33.026%). So the photo strip
       is laid over the panel's own bottom third and the usable area stops
       where the photo starts. Centring in the full box put the opening hours
       underneath the photo: the probe caught it as two `occluded` findings on
       .c-kl-hours, and elementsFromPoint confirmed IMG above P at both lines.

       The reserve is that strip, converted into the same unit as everything
       else here. .comp--hero is aspect-ratio 2688/1316.3, so comp height is
       0.48969 of comp width, and 11.775% of that is 5.766cqw. Percentage
       padding would not work: it resolves against WIDTH, not height. */
    --photo-reserve: 5.766cqw;
    padding: calc(1.2cqw + var(--ink-trim)) 1.2cqw calc(1.2cqw + var(--photo-reserve));
    text-align: center;
  }
  .c-komlangs > .c-kl-title,
  .c-komlangs > .c-kl-address,
  .c-komlangs > .c-kl-hours {
    position: static;
    left: auto; top: auto; width: auto; height: auto;
  }
}

.c-kl-title {
  /* relative to .c-komlangs (positioned ancestor at desktop) */
  --l: 11.11%; --t: 12.24%; --w: 58.33%; --h: 11.89%;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.85;
  font-size: 2.65cqw;
  color: var(--acid);
  z-index: 3;
  white-space: nowrap;
}

.c-kl-address, .c-kl-hours {
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: max(0.72cqw, 8px);
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--paper);
  z-index: 3;
}
.c-kl-address { --l: 11.11%; --t: 31.47%; --w: 83.33%; --h: 17.48%; }
.c-kl-hours { --l: 11.11%; --t: 51.75%; --w: 83.33%; --h: 17.48%; }

.c-halftone {
  --l: 77.9%; --t: 70.674%; --w: 21.6%; --h: 11.775%;
  overflow: hidden;
  z-index: 2;
}

.c-volgons {
  --l: 77.9%; --t: 83.025%; --w: 21.6%; --h: 15.820%;
  background: var(--lime);
  z-index: 1;
  overflow: hidden;
}

.c-vo-title {
  /* relative to .c-volgons (positioned ancestor at desktop) */
  --l: 11.11%; --t: 18.25%; --w: 46.3%; --h: 24.82%;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.85;
  font-size: 2.6cqw;
  color: var(--ink);
  z-index: 3;
  white-space: nowrap;
}

.c-vo-social {
  --l: 11.11%; --t: 49.64%; --w: 83.33%; --h: 87.59%;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: max(0.72cqw, 8px);
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
  z-index: 3;
}
.c-vo-social a { color: inherit; text-decoration: none; display: block; }
.c-vo-social a:hover, .c-vo-social a:focus-visible { text-decoration: underline; }

/* ==================================================== */
/* footer row                                            */
/* ==================================================== */
.c-footer-lime {
  --l: 0%; --t: 0%; --w: 24.3%; --h: 100%;
  background: var(--lime);
  color: var(--ink);
  z-index: 1;
  overflow: hidden;
}

.c-fl-globe {
  /* relative to .c-footer-lime (positioned ancestor at desktop) */
  --l: 6.17%; --t: 20.90%; --w: 13.99%; --h: 44.78%;
  color: var(--ink);
  z-index: 2;
}
.c-fl-globe svg { width: 100%; height: 100%; display: block; }

.c-fl-title {
  --l: 27.57%; --t: 26.87%; --w: 55.97%; --h: 19.40%;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 1.0cqw;
  letter-spacing: 0.03em;
  line-height: 0.85;
  text-transform: uppercase;
  color: var(--ink);
  z-index: 2;
  white-space: nowrap;
}

.c-fl-meta {
  --l: 27.57%; --t: 52.24%; --w: 61.73%; --h: 14.93%;
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: max(0.7cqw, 7px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  z-index: 2;
  white-space: nowrap;
}

.c-footer-dark {
  --l: 24.4%; --t: 0%; --w: 53.2%; --h: 100%;
  background: var(--dark);
  color: var(--paper);
  z-index: 1;
  overflow: hidden;
}

.c-fd-title {
  /* relative to .c-footer-dark (positioned ancestor at desktop) */
  --l: 3.95%; --t: 20.90%; --w: 27.44%; --h: 27.61%;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.85;
  font-size: 2.9cqw;
  color: var(--paper);
  z-index: 2;
  white-space: nowrap;
}

.c-fd-meta {
  --l: 4.14%; --t: 55.22%; --w: 30.08%; --h: 14.93%;
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: max(0.56cqw, 7px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--paper);
  z-index: 2;
  white-space: nowrap;
}

.c-fd-form {
  --l: 36.28%; --t: 38.06%; --w: 61.09%; --h: 35.07%;
  display: flex;
  gap: 0.6%;
  z-index: 2;
}

.c-fd-input {
  font-family: 'Space Mono', monospace;
  font-size: max(0.7cqw, 8px);
  letter-spacing: 0.03em;
  background: transparent;
  color: var(--paper);
  border: 1.5px solid rgba(242,241,236,.4);
  padding: 0 1em;
  flex: 1 1 auto;
  min-width: 0;
}
.c-fd-input::placeholder { color: rgba(242,241,236,.55); text-transform: uppercase; letter-spacing: 0.06em; }

.c-fd-submit {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: max(0.7cqw, 8px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--lime);
  color: var(--ink);
  border: 1.5px solid var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  cursor: pointer;
  flex: 0 0 39%;
  white-space: nowrap;
}
.c-fd-submit:hover { background: var(--dark); color: var(--lime); border-color: var(--lime); }
.c-fd-submit svg { width: 1.1em; height: 1.1em; }

.c-footer-ripple {
  --l: 78.0%; --t: 0%; --w: 22.0%; --h: 100%;
  overflow: hidden;
  z-index: 1;
}

.media { display: block; }
.media img, .media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.12);
}

/* ==================================================== */
/* mobile (<1000px)                                      */
/* ==================================================== */
@media (max-width: 999px) {
  .c-nav {
    position: sticky; top: 0; z-index: 30;
    height: auto;
  }

  .c-panelA { display: none; }

  .c-hero-block {
    display: flex; flex-direction: column;
    border: 1.5px solid var(--hairline);
    background: var(--paper);
    padding: 22px 18px 0;
    order: 1;
  }
  .c-buiten, .c-spoor {
    font-size: clamp(2.6rem, 16vw, 6rem);
    line-height: 0.86;
    overflow: hidden;
    white-space: nowrap;
  }
  .c-hero-meta-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 18px 0 20px; flex-wrap: wrap;
  }
  .c-ss24 { font-size: 1rem; line-height: 1.2; }
  .c-nuonline { font-size: 0.72rem; margin-top: 6px; }
  .c-cornerglyph { width: 18px; height: 18px; margin-top: 8px; }
  .c-spiral-wrap { width: 56px; }

  .c-tagline {
    order: 2;
    font-size: 12px;
    padding: 10px 14px;
  }

  .c-hero-right { order: 3; position: relative; display: flex; min-height: 60vh; }
  .c-grill { flex: 1 1 78%; aspect-ratio: 436/548; }
  .c-acidrail { flex: 0 1 22%; position: relative; }
  .c-acidrail__grid { position: absolute; left: 34%; top: 8%; width: 55%; height: 88%; background-size: 22px 22px; }
  .c-badge {
    /* right inset >= the bbox growth of the ±12deg scroll rotation, else it
       pokes past the viewport edge on mobile */
    position: absolute; right: 14px; bottom: -8px;
    width: 118px; height: 118px;
    font-size: 10px;
    transform: rotate(-10deg);
  }

  .c-portrait { order: 4; aspect-ratio: 588/608; }

  .c-shopnu { order: 5; padding: 16px 18px; font-size: 0.85rem; }
  .c-shopnu__arrow { width: 90px; height: 0.9em; }

  .c-marker { order: 6; padding: 18px; aspect-ratio: 430/357; }
  .c-marker img { object-fit: contain; }

  .c-sticker { order: 7; padding: 0 18px 18px; aspect-ratio: 430/198; }

  .c-lookbook { order: 8; position: relative; padding: 22px 18px; }
  .c-lb-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
  .c-lb-title { font-size: clamp(2rem, 8vw, 3.5rem); }
  .c-lb-num { font-size: 0.9rem; }
  .c-lb-photo { margin-top: 18px; aspect-ratio: 780/410; }
  .c-lb-crosshair { width: 34px; height: 34px; margin-top: 16px; }
  .c-lb-cta { display: block; margin-top: 14px; font-size: 0.85rem; }

  .c-komlangs { order: 9; padding: 22px 18px; }
  .c-kl-title { font-size: clamp(1.6rem, 7vw, 2.6rem); }
  .c-kl-address, .c-kl-hours { font-size: 0.78rem; margin-top: 14px; }

  .c-halftone { order: 10; margin-top: 0; aspect-ratio: 556/152; }

  .c-volgons { order: 11; padding: 22px 18px; }
  .c-vo-title { font-size: clamp(1.4rem, 6vw, 2.2rem); }
  .c-vo-social { font-size: 0.85rem; margin-top: 14px; }

  .c-footer-lime { order: 12; display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; padding: 1.4rem 1.5rem; }
  .c-fl-globe { width: 28px; height: 28px; }
  .c-fl-title { font-size: clamp(1.1rem, 3.6vw, 1.6rem); }
  .c-fl-meta { font-size: 11px; }

  .c-footer-dark { order: 13; padding: 2.2rem 1.5rem; display: flex; flex-direction: column; gap: 1.2rem; }
  .c-fd-title { font-size: clamp(1.7rem, 8vw, 2.6rem); }
  .c-fd-meta { font-size: 12px; margin-top: 0.6rem; }
  .c-fd-form { flex-direction: column; }
  .c-fd-input, .c-fd-submit { font-size: 14px; padding: 0.9rem 1rem; }
  .c-fd-submit { height: 46px; }

  .c-footer-ripple { order: 14; aspect-ratio: 600/195; min-height: 140px; }
}

/* ext sections */
.x-marquee,
.x-marquee *,
.x-drop,
.x-drop *,
.x-straat,
.x-straat *,
.x-manifest,
.x-manifest * {
  box-sizing: border-box;
}

/* ---------------------------------------------------- */
/* x-marquee (shared by ink + acid variants)             */
/* ---------------------------------------------------- */
.x-marquee {
  background: var(--ink);
  color: var(--acid);
  border-top: 1.5px solid var(--hairline);
  border-bottom: 1.5px solid var(--hairline);
  padding-block: clamp(10px, 1.6vw, 18px);
  overflow: hidden;
}

.x-marquee--acid {
  background: var(--acid);
  color: var(--ink);
}

.x-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: x-marquee-scroll 26s linear infinite;
}

@keyframes x-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.x-marquee__seq {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 3vw, 2.8rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-right: 1.2em;
}

@media (prefers-reduced-motion: reduce) {
  .x-marquee__track {
    animation: none;
  }
}

/* ---------------------------------------------------- */
/* x-drop — DROP 02 product grid                        */
/* ---------------------------------------------------- */
.x-drop {
  background: var(--paper);
  padding-block: clamp(3rem, 7vw, 6rem);
  padding-inline: clamp(1.1rem, 4vw, 3rem);
}

.x-drop__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-bottom: clamp(1rem, 2.4vw, 1.6rem);
  border-bottom: 1.5px solid var(--hairline);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.x-drop__title {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 0.92;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  color: var(--ink);
}

.x-drop__meta {
  margin: 0 0 0.3em;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: clamp(0.68rem, 1vw, 0.85rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.x-drop__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
}

.x-drop__card {
  display: flex;
  flex-direction: column;
}

.x-drop__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1.5px solid var(--hairline);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.x-drop__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12);
  transition: transform 350ms ease;
}

.x-drop__index {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.25em 0.55em;
  z-index: 2;
}

.x-drop__card:hover .x-drop__frame,
.x-drop__card:focus-within .x-drop__frame {
  border-color: var(--acid);
  transform: rotate(-1.2deg);
  box-shadow: 5px 5px 0 var(--acid);
}

.x-drop__card:hover .x-drop__frame img,
.x-drop__card:focus-within .x-drop__frame img {
  transform: scale(1.05);
}

.x-drop__info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.9rem;
}

.x-drop__name {
  margin: 0;
  min-width: 0;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

.x-drop__price {
  flex: none;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
  letter-spacing: 0.05em;
  color: var(--ink);
}

.x-drop__cart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.7rem;
  padding: 0.7em 0.85em;
  border: 1.5px solid var(--ink);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.x-drop__cart:hover,
.x-drop__cart:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.x-drop__cart:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

/* ==================================================== */
/* DEVICE: de oplage                                     */
/* A drop is a print run, so the card counts copies the  */
/* way a print run does: a tally, struck one at a time.  */
/* The strip is built from data-oplage in main.js, so    */
/* nothing here assumes a count.                         */
/* ==================================================== */

.x-drop__tally {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  margin-top: 0.85rem;
}

.x-drop__tick {
  flex: 1 1 0;
  min-width: 2px;
  max-width: 7px;
  height: 100%;
  position: relative;
  background: var(--ink);
  /* struck ticks scale from their own baseline, which is where a tally is
     actually drawn from. transform-origin is set here rather than in JS so a
     tick has its geometry before the first click, not after it. */
  transform-origin: 50% 100%;
}

.x-drop__tick.is-claimed {
  background: var(--hairline);
}

/* the strike itself: one acid stroke through a spent tick */
.x-drop__tick.is-claimed::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  top: 50%;
  height: 2px;
  background: var(--acid);
  transform: translateY(-50%) rotate(-38deg);
}

.x-drop__left {
  margin: 0.5rem 0 0;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  /* 11px floor: this is the readout the device is judged by, so it does not get
     to be the smallest thing on the card */
  font-size: max(0.72rem, 11px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

/* sold out: ink kept as the ink, acid used as a swipe behind it. The same
   move as .x-manifest__acid, for the same reason: acid is a background colour
   on this page, never a text colour. */
.x-drop__card.is-uitverkocht .x-drop__left {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0 .3em;
  color: var(--ink);
}

.x-drop__card.is-uitverkocht .x-drop__left::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0; right: 0; top: .08em; bottom: .04em;
  background: var(--acid);
  transform: skewX(-4deg);
}

.x-drop__cart[disabled] {
  /* ink stays ink; only the frame and the fill go quiet, so the label keeps
     paper-level contrast instead of being greyed into an unreadable state */
  background: none;
  border-color: var(--hairline);
  color: var(--ink);
  opacity: 0.75;
  cursor: not-allowed;
}

.x-drop__cart[disabled]:hover {
  background: none;
  color: var(--ink);
}

/* the stamp. Parked at scale 0 in CSS as well as JS: with JS unavailable the
   card never sells out, so the stamp must never be painted. */
.x-drop__stamp {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-11deg) scale(0);
  padding: 0.35em 0.7em;
  border: 3px solid var(--acid);
  background: var(--ink);
  color: var(--acid);
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(0.9rem, 1.9vw, 1.35rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* a sold-out card stops reacting to the pointer: the hover tilt on a card you
   cannot buy reads as an invitation */
.x-drop__card.is-uitverkocht:hover .x-drop__frame,
.x-drop__card.is-uitverkocht:focus-within .x-drop__frame {
  border-color: var(--hairline);
  transform: none;
  box-shadow: none;
}

.x-drop__card.is-uitverkocht:hover .x-drop__frame img,
.x-drop__card.is-uitverkocht:focus-within .x-drop__frame img {
  transform: none;
}

.x-drop__card.is-uitverkocht .x-drop__frame img {
  opacity: 0.45;
}

.x-drop__run {
  white-space: nowrap;
}

@media (max-width: 700px) {
  .x-drop__grid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}

/* x-nieuw-polaroid — density pass: photo-detail.webp behind the header row */
.x-drop__header {
  position: relative;
}
.x-drop__title,
.x-drop__meta {
  position: relative;
  z-index: 1;
}
.x-drop__meta {
  /* the polaroid sits behind + partly under this line (z-index below) —
     a paper-colored chip keeps the text legible over the busy photo */
  background: var(--paper);
  padding: 0.2em 0.5em;
  margin-right: -0.5em;
}
.x-nieuw-polaroid {
  position: absolute;
  z-index: 0;
  top: -1.1rem;
  right: clamp(0.5rem, 3vw, 2.6rem);
  width: clamp(100px, 10vw, 150px);
  transform: rotate(2deg);
  pointer-events: none;
}
.x-nieuw-polaroid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1792 / 2400;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12);
  border: 6px solid var(--paper);
  outline: 1.5px solid var(--hairline);
  box-shadow: 6px 6px 0 rgba(19, 19, 18, .15);
}
@media (max-width: 700px) {
  .x-nieuw-polaroid { display: none; }
}

/* ---------------------------------------------------- */
/* x-straat — GEZIEN OP STRAAT editorial video moment    */
/* ---------------------------------------------------- */
.x-straat {
  position: relative;
  /* z-index establishes a local stacking context so the negative
     z-index .x-straat__post below paints above THIS section's own
     background instead of escaping to the root stacking context and
     sinking behind it (which made it fully invisible) */
  z-index: 0;
  background: var(--dark);
  padding-block: clamp(3rem, 7vw, 6rem);
  padding-inline: clamp(1.1rem, 4vw, 3rem);
  overflow: hidden;
}

.x-straat__label {
  display: block;
  margin: 0 0 0.9rem;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: clamp(0.68rem, 1vw, 0.85rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
}

.x-straat__title {
  margin: 0 0 clamp(1.8rem, 4vw, 3rem);
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 0.92;
  font-size: clamp(3rem, 6.5vw, 6.5rem);
  color: var(--acid);
}

.x-straat__title span {
  display: block;
}

.x-straat__title .x-straat__line2 {
  margin-left: clamp(1.5rem, 14vw, 8rem);
}

.x-straat__media-wrap {
  position: relative;
}

.x-straat__figure {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1.5px solid rgba(242, 241, 236, 0.2);
}

.x-straat__figure img,
.x-straat__figure video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* editorial still/video is already B/W except its acid-green spray tag —
     no grayscale here so that tag stays the section's one color moment */
  filter: contrast(1.06);
}

.x-straat__media-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image:
    linear-gradient(rgba(106, 234, 14, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106, 234, 14, .16) 1px, transparent 1px);
  background-size: 34px 34px;
}

.x-straat__crosshair {
  position: absolute;
  z-index: 3;
  left: clamp(0.8rem, 2.4vw, 1.6rem);
  bottom: clamp(0.8rem, 2.4vw, 1.6rem);
  width: clamp(32px, 4vw, 46px);
  height: clamp(32px, 4vw, 46px);
  color: var(--acid);
}

.x-straat__crosshair svg {
  display: block;
  width: 100%;
  height: 100%;
}

.x-straat__cta {
  display: inline-flex;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: clamp(0.78rem, 1.1vw, 0.92rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 150ms ease;
}

.x-straat__cta:hover,
.x-straat__cta:focus-visible {
  color: var(--acid);
}

.x-straat__cta:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .x-straat__title .x-straat__line2 {
    margin-left: 3rem;
  }
}

/* density pass: crowd panel + post sticker for x-straat */
.x-straat__post {
  /* multiply over the near-black section bg renders as solid black —
     use reduced opacity instead so the photo stays a visible, moody
     darkened moment behind the title rather than disappearing entirely */
  position: absolute;
  z-index: -1;
  top: -1%;
  right: 4%;
  width: 14%;
  height: auto;
  aspect-ratio: 1792 / 2400;
  object-fit: cover;
  opacity: 0.4;
  filter: grayscale(1) contrast(1.12) brightness(1.3);
  pointer-events: none;
}

.x-straat__crowd {
  position: absolute;
  z-index: 4;
  right: 3%;
  bottom: -6%;
  width: 26%;
  margin: 0;
  transform: rotate(-2deg);
}

.x-straat__crowd-frame {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1.5px solid rgba(242, 241, 236, .5);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .35);
}

.x-straat__crowd-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12);
}

.x-straat__crowd-cap {
  display: block;
  margin-top: 0.5rem;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: clamp(0.58rem, 0.85vw, 0.7rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  text-align: right;
}

@media (max-width: 700px) {
  .x-straat__post { width: 20%; top: 0; right: 2%; }
  .x-straat__crowd { width: 34%; bottom: -4%; right: 2%; }
}

/* ---------------------------------------------------- */
/* x-manifest — statement                                */
/* ---------------------------------------------------- */
.x-manifest {
  position: relative;
  background: var(--paper);
  padding-top: clamp(4rem, 9vw, 8rem);
  padding-bottom: clamp(2.7rem, 6vw, 5.3rem);
  padding-inline: clamp(1.1rem, 4vw, 3rem);
  overflow: hidden;
}

.x-manifest__spiral {
  position: absolute;
  z-index: 0;
  /* density pass: shrunk + tucked closer to the corner to leave clear
     vertical room below it for the new photo-booth strip (round-2 fix —
     supersedes the round-1 size/position) */
  top: clamp(0.5rem, 1.2vw, 1rem);
  right: clamp(0.5rem, 1.2vw, 1.4rem);
  width: clamp(52px, 5.5vw, 90px);
  height: auto;
  aspect-ratio: 1;
  color: var(--ink);
  opacity: 0.9;
  animation: x-manifest-spin 18s linear infinite;
  pointer-events: none;
}

@keyframes x-manifest-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .x-manifest__spiral {
    animation: none;
  }
}

/* fix (round 2): at 390px the spiral's box lightly overlapped line 1 —
   the section's padding-top is a fixed 4rem (64px) below 700px, so the
   spiral must fit inside that band; shrink + pin it higher */
@media (max-width: 700px) {
  .x-manifest__spiral {
    top: 0.4rem;
    right: 0.6rem;
    width: 48px;
  }
}

.x-manifest__body {
  position: relative;
  z-index: 1;
  /* fix (round 2): a fixed 46rem cap made the longest line wrap again once
     the 3.1vw font-size grew past ~1344px (at 1920px the line's natural
     width exceeds 736px). The cap was never load-bearing for wrapping at
     1000-1344px (the text already fit under it there) — removing it lets
     the block size to the section's own content width at every breakpoint,
     which stays comfortably ahead of the text's natural width up to 1920px. */
  max-width: none;
}

.x-manifest__line {
  overflow: hidden;
  display: block;
}

.x-manifest__line-in {
  display: block;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.04;
  /* all three lines share one size so the hierarchy reads as a choice,
     not a bug — 3.3vw let the longest sentence wrap at 1344px, so the
     vw factor is tuned down to keep it on one line at 1000-1344px */
  font-size: clamp(1.5rem, 3.1vw, 4.2rem);
  color: var(--ink);
}

/* Acid ON the word, not IN it. As acid-coloured type on paper this measured
   1.39:1 at 44.6px against a 3.0 floor, and no amount of nudging the green
   fixes that: to reach 3:1 on this paper the green has to go dark enough that
   it stops being acid. Inverting is not a compromise, it is the more correct
   zine move anyway, a highlighter swipe over the word rather than a coloured
   word. Ink on acid measures 11.85:1.

   The swipe is deliberately not a neat rectangle: it is skewed, it overhangs
   the glyphs unevenly, and it sits behind them via a pseudo-element so the
   text keeps its own line box and the marquee measurement above it does not
   move. */
.x-manifest__acid {
  position: relative;
  z-index: 0;
  color: var(--ink);
  padding: 0 .12em;
}

.x-manifest__acid::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -.06em;
  right: -.1em;
  top: .06em;
  bottom: .04em;
  background: var(--acid);
  transform: skewX(-3deg) rotate(-.6deg);
}

.x-manifest__sticker {
  position: relative;
  z-index: 1;
  width: clamp(120px, 14vw, 180px);
  /* sits right-of-center below the text block; the body no longer caps at
     46rem (fix A) so this margin is measured against the section's own
     width via max(), keeping the sticker balanced at wide widths */
  margin: clamp(1.8rem, 4vw, 3rem) 0 0 max(14rem, 52%);
  transform: rotate(3deg);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.x-manifest__sticker img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.12);
}

/* density pass: photo-booth.webp vertical strip, right side, roughly
   centered against the three statement lines and clear of both the
   spiral above and the sticker below at 1000-1920px */
.x-manifest__booth {
  display: block;
  position: absolute;
  z-index: 1;
  top: clamp(5.5rem, 10vw, 9.5rem);
  right: clamp(0.6rem, 2vw, 1.8rem);
  width: clamp(52px, 6vw, 100px);
  transform: rotate(1.5deg);
  pointer-events: none;
}
.x-manifest__booth img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1536 / 2752;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12);
  border: 3px solid var(--paper);
  outline: 1.5px solid var(--hairline);
  box-shadow: 5px 5px 0 rgba(19, 19, 18, .18);
}

/* density pass: photo-detail.webp, bottom-left near the footnote — the
   footnote gets a matching padding-left reserve so its text never runs
   under the photo regardless of exact vertical alignment */
.x-manifest__detail {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: clamp(60px, 9vw, 150px);
  transform: rotate(-3deg);
  pointer-events: none;
}
.x-manifest__detail img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1792 / 2400;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12);
  border: 3px solid var(--paper);
  outline: 1.5px solid var(--hairline);
  box-shadow: 5px 5px 0 rgba(19, 19, 18, .18);
}

.x-manifest__footnote {
  position: relative;
  z-index: 1;
  margin: clamp(2.2rem, 5vw, 3.2rem) 0 0;
  padding-left: calc(clamp(60px, 9vw, 150px) + 1.2rem);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

@media (max-width: 700px) {
  .x-manifest__sticker {
    margin-left: 2rem;
  }
  /* below 1000px the booth strip can't reliably clear both the text and
     the sticker via absolute positioning at every width down to 390px —
     drop it into normal flow instead, right-aligned under the lines, so
     it can never overlap anything */
  .x-manifest__booth {
    position: static;
    width: 36%;
    margin: 1.2rem 0 1.4rem auto;
  }
}

@media (min-width: 701px) and (max-width: 999px) {
  .x-manifest__booth {
    position: static;
    width: 22%;
    margin: 1.4rem 0 1.6rem auto;
  }
}

/* ---------------------------------------------------- */
/* x-archief — thin band between manifest + acid marquee */
/* ---------------------------------------------------- */
.x-archief,
.x-archief * {
  box-sizing: border-box;
}

.x-archief {
  background: var(--paper);
  border-top: 1.5px solid var(--hairline);
  border-bottom: 1.5px solid var(--hairline);
  padding-block: clamp(1.4rem, 3vw, 2.4rem);
  padding-inline: clamp(1.1rem, 4vw, 3rem);
}

.x-archief__row {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.2rem);
}

.x-archief__label {
  flex: none;
  margin: 0;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: clamp(0.75rem, 1.2vw, 0.95rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.x-archief__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 2vw, 1.6rem);
  flex: 1 1 auto;
  min-width: 0;
}

.x-archief__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.x-archief__frame {
  aspect-ratio: 4 / 3;
  max-height: 22vh;
  overflow: hidden;
  border: 1.5px solid var(--hairline);
}

.x-archief__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12);
}

.x-archief__cap {
  display: block;
  margin-top: 0.45rem;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  .x-archief__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .x-archief__list {
    display: flex;
    grid-template-columns: unset;
    width: 100%;
    gap: 0.9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.3rem;
  }
  .x-archief__item {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }
}

/* ---------------------------------------------------- */
/* x-footer — real site footer                          */
/* ---------------------------------------------------- */
.x-footer,
.x-footer * {
  box-sizing: border-box;
}

.x-footer {
  position: relative;
  container-type: inline-size;
  background: var(--ink);
  color: var(--paper);
  padding-top: clamp(3.2rem, 7vw, 6rem);
  padding-bottom: 0;
  padding-inline: clamp(1.1rem, 4vw, 3rem);
  overflow: hidden;
}

.x-footer__spiral {
  position: absolute;
  z-index: 0;
  top: clamp(0.7rem, 1.6vw, 1.3rem);
  right: clamp(0.7rem, 2vw, 1.8rem);
  width: clamp(38px, 3.6vw, 62px);
  height: auto;
  aspect-ratio: 1;
  /* the footer is ink ground, so the spiral is paper. filter:invert(1) is gone
     with the white raster tile it was flipping. */
  color: var(--paper);
  opacity: 0.22;
  animation: x-manifest-spin 20s linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .x-footer__spiral { animation: none; }
}

.x-footer__wordmark {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  overflow: hidden;
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.82;
  font-size: 11.8cqw;
  white-space: nowrap;
  color: var(--paper);
}

.x-footer__tm {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 0.16em;
  vertical-align: top;
  letter-spacing: 0.06em;
  color: var(--lime);
}

.x-footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  margin-top: clamp(2.4rem, 5vw, 4rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1.5px solid rgba(242, 241, 236, .18);
}

.x-footer__heading {
  margin: 0 0 0.9em;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: max(0.78cqw, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
}

.x-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.65em;
}

.x-footer__col a,
.x-footer__address {
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: max(0.75cqw, 11px);
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--paper);
}

.x-footer__col a {
  display: inline-block;
  padding: 0.15em 0;
  text-decoration: none;
  transition: color 150ms ease;
}
.x-footer__col a:hover,
.x-footer__col a:focus-visible {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.x-footer__col a:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.x-footer__address {
  margin: 0;
  color: rgba(242, 241, 236, .72);
}

.x-footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem 1.4rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(1rem, 2vw, 1.4rem);
  border-top: 1.5px solid rgba(242, 241, 236, .18);
  font-family: 'Space Mono', monospace;
  font-size: max(0.68cqw, 10px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(242, 241, 236, .8);
}

.x-footer__copy { margin: 0; }
.x-footer__highlight { color: var(--lime); }

.x-footer__legal {
  display: flex;
  align-items: center;
  gap: 1.4em;
  flex-wrap: wrap;
}
.x-footer__legal a {
  color: inherit;
  text-decoration: none;
  transition: color 150ms ease;
}
.x-footer__legal a:hover,
.x-footer__legal a:focus-visible {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* echo of the hero's photo-baked "MADE IN ROTTERDAM ©" vertical micro-label —
   here it's a real DOM element, rotated onto the footer's left edge */
.x-footer__edge-label {
  position: absolute;
  z-index: 1;
  left: clamp(0.3rem, 1.2vw, 0.9rem);
  bottom: clamp(3.4rem, 7vw, 5.2rem);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  /* was 9px at alpha .35, which measured 2.98:1 against a 4.5 floor. Two
     things were wrong at once and only fixing the alpha would have left a 9px
     rotated line nobody can read anyway, so the floor goes to 11px and the
     alpha to .62, which measures 6.8:1. It is still the quietest text on the
     page, which is the job; it just is not invisible. */
  font-size: max(0.58cqw, 11px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 241, 236, .62);
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 999px) {
  .x-footer__wordmark {
    line-height: 0.86;
  }
  .x-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.2rem 1.4rem;
  }
  .x-footer__col a {
    padding: 0.55em 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .x-footer__edge-label { display: none; }
}

@media (max-width: 460px) {
  .x-footer__grid {
    grid-template-columns: 1fr;
  }
}
/* ==================================================== */
/* LOADER — "de fotokopie-pass"                          */
/* a warm-paper sheet runs through the copier: an acid   */
/* scan bar descends, ink prints in behind it, then the  */
/* screenprint pass floods the sheet green and it ejects */
/* ==================================================== */
html.ldr-lock { overflow: hidden; }

.ldr {
  --y: 0%;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  /* deliberately transparent: .ldr__sheet supplies the paper and covers
     the viewport from the first frame. Giving this element a background
     too means the sheet ejects onto a second opaque paper layer, and the
     page only appears when the whole loader is removed — reads as a blank
     beat between the animation and the site. */
  background: transparent;
}

.ldr__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ldr__sheet {
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: translateY(0);
  will-change: transform;
}

/* the sheet lifts out of the copier */
.ldr.is-out .ldr__sheet {
  transform: translateY(-102%);
  transition: transform .78s cubic-bezier(.76, 0, .24, 1);
}

/* physical bottom edge of the sheet, only while it travels */
.ldr__sheet::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--ink);
  opacity: 0;
  transition: opacity .2s linear;
}
.ldr.is-print .ldr__sheet::after { opacity: 1; }

/* ---- the three registered plates ---- */
.ldr__plate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(16px, 3.2vw, 46px);
  color: rgba(19, 19, 18, .075);   /* ghost: plate is there, not yet inked */
  pointer-events: none;
}

/* printed by the descending scan bar */
.ldr__plate--ink {
  color: var(--ink);
  clip-path: inset(0 0 calc(100% - var(--y)) 0);
}

/* the neon screenprint pass, registered on top, floods bottom-up */
.ldr__plate--acid {
  color: var(--ink);
  background: var(--acid);
  clip-path: inset(100% 0 0 0);
  transition: clip-path .52s cubic-bezier(.65, 0, .25, 1);
}
.ldr.is-print .ldr__plate--acid { clip-path: inset(0 0 0 0); }

/* ---- plate composition ---- */
.ldr__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
}
.ldr__row--bot { gap: clamp(10px, 2vw, 28px); }

.ldr__tag {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: clamp(9px, 1.05vw, 13px);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ldr__tag--pct b { font-weight: 700; }

.ldr__bars {
  display: block;
  width: clamp(56px, 8vw, 104px);
  height: clamp(16px, 2.2vw, 26px);
  flex: 0 0 auto;
  background-image: repeating-linear-gradient(90deg,
    currentColor 0 2px, transparent 2px 5px,
    currentColor 5px 6px, transparent 6px 11px,
    currentColor 11px 14px, transparent 14px 16px);
}

.ldr__type {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 0;
}
.ldr__line {
  display: block;
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-size: min(15.4vw, 20.5vh);
  line-height: .84;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ldr__line sup {
  font-size: .2em;
  vertical-align: super;
  letter-spacing: 0;
}

.ldr__reg {
  position: absolute;
  width: clamp(16px, 2.1vw, 26px);
  height: clamp(16px, 2.1vw, 26px);
  opacity: .8;
}
.ldr__reg--tl { left: clamp(6px, 1.1vw, 16px); top: clamp(6px, 1.1vw, 16px); }
.ldr__reg--tr { right: clamp(6px, 1.1vw, 16px); top: clamp(6px, 1.1vw, 16px); }
.ldr__reg--bl { left: clamp(6px, 1.1vw, 16px); bottom: clamp(6px, 1.1vw, 16px); }
.ldr__reg--br { right: clamp(6px, 1.1vw, 16px); bottom: clamp(6px, 1.1vw, 16px); }

.ldr__spiral {
  position: absolute;
  right: clamp(16px, 3.2vw, 46px);
  top: 50%;
  width: clamp(38px, 5.4vw, 76px);
  height: clamp(38px, 5.4vw, 76px);
  transform: translateY(-50%);
  animation: ldr-spin 9s linear infinite;
}
@keyframes ldr-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* ---- copier hardware: scan bar + lamp glow ---- */
.ldr__lamp {
  position: absolute;
  left: 0; right: 0;
  top: var(--y);
  height: clamp(56px, 9vh, 128px);
  background: linear-gradient(to bottom, rgba(106, 234, 14, .34), rgba(106, 234, 14, 0));
  pointer-events: none;
}
.ldr__scan {
  position: absolute;
  left: 0; right: 0;
  top: var(--y);
  height: 2px;
  background: var(--acid);
  box-shadow: 0 0 26px 5px rgba(106, 234, 14, .55), 0 -1px 0 0 var(--ink);
  pointer-events: none;
}
.ldr.is-print .ldr__lamp,
.ldr.is-print .ldr__scan { opacity: 0; transition: opacity .18s linear; }

/* ---- xerox scanlines over the whole bed ---- */
.ldr__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image: repeating-linear-gradient(0deg,
    rgba(19, 19, 18, 1) 0 1px, transparent 1px 3px);
}

@media (max-width: 640px) {
  /* min() picks the vw term on a tall phone, which leaves the wordmark
     stranded at ~60% of the sheet — push it back out to the margins */
  .ldr__line { font-size: 20vw; }
  .ldr__spiral { top: 68%; }
  .ldr__row--bot .ldr__tag--r { display: none; }
}

/* motion is the whole point here — with it suppressed the loader has no
   reason to exist, so it never shows and the page renders straight away */
@media (prefers-reduced-motion: reduce) {
  .ldr { display: none !important; }
}