/* =========================================================
   EXAMPLE LAYER — "boxed labels + violet edge gradient"
   (inspired by TBA21 Academy / Organismo 2027 posts)
   Loaded AFTER site.css + fable-layer.css. Remove the <link> to undo.
   ========================================================= */

:root {
  --violet: rgb(58,72,255);
  --accent-faint: rgba(58,72,255,.16);
  --violet-soft: rgba(58,72,255,.55);
  --violet-haze: rgba(58,72,255,.28);
  --box-line: rgba(255, 255, 255, 0.85);
  --glow: 0 0 0 1px var(--box-line), 4px 4px 14px var(--violet-soft);
}

/* ---------- 1. Violet edge gradient (frame bleeding in from the sides) ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background:
    linear-gradient(90deg, var(--violet-soft) 0, transparent 7vw),
    linear-gradient(0deg, var(--violet-haze) 0, transparent 22vh),
    linear-gradient(270deg, var(--violet-haze) 0, transparent 4vw);
  mix-blend-mode: screen;
}

/* ---------- 2. Pixel-dither blob over the reel (canvas injected by JS) ---------- */
.pixel-blob {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.75;
  z-index: 1;
}

/* ---------- 3. Boxed labels ---------- */
.ex-box,
.site-name,
.fable-pillars a,
.column-title,
.recognition-item,
.hero-archive-link,
.site-nav a {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 0.12em 0.4em 0.08em;
  box-shadow: var(--glow);
  line-height: 1.05;
}

/* name: white box, black type (like "Radical Soundness") */
.site-name {
  background: #fff;
  color: #000;
  padding: 0.15em 0.45em 0.1em;
}

/* tag strip above the hero title */
.ex-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  font-family: 'Monument Extended', -apple-system, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
}
.ex-tags .ex-box { font-size: 15px; }
.ex-tags .ex-box.inv { background: #fff; color: #000; }
.ex-tags .ex-box em { font-style: italic; }

/* big title: each line its own box, slightly stepped like a stair */
.fable-title .fht {
  display: table;
  background: #fff;
  color: #000;
  padding: 0 0.12em;
  margin-bottom: 0.08em;
  box-shadow: var(--glow);
}
.fable-title .fht:nth-child(2) { margin-left: 0.6em; }
.fable-title .fht span { color: #000; }

/* little ⊠ marker in the corner, like the posts */
.fable-title { position: relative; }
.fable-title::before { display: none;
  content: "⊠";
  position: absolute;
  left: -0.05em;
  top: -0.45em;
  font-size: 0.18em;
  color: #fff;
  background: #000;
  padding: 0 0.2em;
  box-shadow: var(--glow);
}

.fable-pillars { gap: 10px !important; }
.fable-pillars a:hover { background: #fff; color: #000; }

.fable-sub {
  display: inline-block;
  background: rgba(0, 0, 0, 0.82);
  padding: 10px 12px;
  box-shadow: var(--glow);
}

/* recognition bar → row of chips */
.hero-recognition-bar { gap: 10px; border-top: 0 !important; }
.recognition-item { padding: 6px 10px; }

/* ---------- 4. Archive columns ---------- */
.column-title { padding: 0.08em 0.35em; }
.column-desc {
  border: 1px solid var(--box-line);
  box-shadow: 4px 4px 14px var(--violet-haze);
  padding: 10px 12px;
  background: #000;
}

/* project rows get a box + violet glow on hover */
.project-item-text { transition: box-shadow .2s, background .2s; }
.project-item-text:hover {
  background: #000;
  box-shadow: var(--glow);
}
.project-item-text:hover .project-title {
  background: #fff;
  color: #000;
  padding: 0 0.25em;
}

/* expanded images framed like the portrait posts */
.project-images-wrapper img.active {
  box-shadow: 0 0 0 1px var(--box-line), 6px 6px 22px var(--violet-soft);
}
.img-dot.active {
  background: #fff;
  color: #000;
  box-shadow: 2px 2px 8px var(--violet-soft);
}

/* lightbox */
.lightbox-title,
.lightbox-category {
  display: inline-block;
  background: #fff;
  color: #000;
  padding: 0.1em 0.4em;
  box-shadow: var(--glow);
}

/* ---------- 5. WORLDS: physical | virtual pair, same height as Words/Workshops ---------- */
#worlds .project-images-wrapper > .img-pair { gap: 6px; }
#worlds .project-images-wrapper > .img-pair img {
  width: 50%;
  height: var(--ex-img-h, 300px);
  aspect-ratio: auto;
  object-fit: cover;
}
#worlds .project-images-wrapper > .img-pair img:first-child  { box-shadow: 0 0 0 1px var(--box-line); }
#worlds .project-images-wrapper > .img-pair img:last-child   { box-shadow: 0 0 0 1px var(--box-line), 6px 6px 22px var(--violet-soft); }

/* =========================================================
   6. POLISH — viewfinder, cursor light, labelled pairs
   ========================================================= */

/* pairs now hold <figure class="ex-half"> — override section 5 */
#worlds .project-images-wrapper > .img-pair { gap: 8px; }
#worlds .project-images-wrapper > .img-pair.active { animation: exPairIn .7s cubic-bezier(.22,1,.36,1); }
@keyframes exPairIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ex-half {
  position: relative;
  margin: 0;
  flex: 1 1 0;
  height: var(--ex-img-h, 300px);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--box-line);
}
.ex-half:last-child { box-shadow: 0 0 0 1px var(--box-line), 6px 6px 24px var(--violet-soft); }
#worlds .img-pair .ex-half img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  box-shadow: none !important;
  transition: transform 1.2s cubic-bezier(.22,1,.36,1), filter .6s;
}
.ex-half:hover img { transform: scale(1.04); }
/* the virtual half: a faint pink cast + scan lines, like looking through the headset */
.ex-half:last-child::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    linear-gradient(200deg, var(--violet-haze), transparent 55%);
  mix-blend-mode: screen;
}
.ex-half::before {
  content: attr(data-label);
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  font: 400 11px/1 'Monument Extended', -apple-system, sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 6px 3px;
  background: #000; color: #fff;
  box-shadow: 0 0 0 1px var(--box-line), 2px 2px 8px var(--violet-soft);
}
.ex-half:last-child::before { background: #fff; color: #000; }

/* viewfinder corners around the reel (REC-frame look) */
.hero-section::after {
  content: "";
  position: absolute; inset: 86px 30px 100px;
  pointer-events: none; z-index: 4;
  --c: rgba(255,255,255,.75); --l: 28px;
  background:
    linear-gradient(var(--c),var(--c)) left top / var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) left top / 1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right top / var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) right top / 1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom / var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom / 1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom / var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom / 1px var(--l) no-repeat;
}
.ex-rec {
  position: absolute; top: 96px; right: 44px; z-index: 5;
  font: 400 11px/1 'Monument Extended', -apple-system, sans-serif; letter-spacing: .12em;
  color: #fff; display: flex; align-items: center; gap: 6px;
}
.ex-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 10px var(--violet); animation: exBlink 1.6s steps(1) infinite; }
@keyframes exBlink { 50% { opacity: 0; } }

/* soft pink light that follows the cursor */
.ex-cursor {
  position: fixed; left: 0; top: 0; z-index: 8;
  width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--accent-faint), transparent 62%);
  mix-blend-mode: screen;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}

/* archive: sticky column titles keep the box look while scrolling */
.column-header { backdrop-filter: blur(6px); }
.project-item-expandable.expanded .project-title {
  background: #fff; color: #000; padding: 0 .25em; box-shadow: 2px 2px 10px var(--violet-soft);
}
::selection { background: var(--violet); color: #000; }

@media (max-width: 700px) {
  .hero-section::after { inset: 70px 16px 90px; }
  .ex-rec { top: 80px; right: 26px; }
  .ex-cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-rec i, #worlds .img-pair.active { animation: none; }
}
.fable-pillars { margin-left: 0 !important; }
.project-item-expandable.expanded .project-title,
.project-item-text:hover .project-title { color: #000 !important; }
/* calmer haze over the archive: keep the left edge, lighten the bottom */
body::before {
  background:
    linear-gradient(90deg, var(--violet-soft) 0, transparent 5vw),
    linear-gradient(0deg, var(--accent-faint) 0, transparent 10vh),
    linear-gradient(270deg, var(--violet-haze) 0, transparent 3vw);
}

/* pixel window: canvas is full-res now, cells drawn crisp */
.pixel-blob { image-rendering: auto; mix-blend-mode: normal; opacity: 1; }

/* hero text: bigger, box hugs the text */
.fable-sub {
  display: block;
  width: fit-content;
  max-width: min(640px, 100%);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: #fff;
  padding: 12px 16px 13px;
  margin-top: 16px;
  text-wrap: balance;
}

/* colour switcher (dummy only) */
.ex-swatches {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: flex; gap: 6px;
  font: 400 11px/1 'Monument Extended', -apple-system, sans-serif;
}
.ex-swatches button {
  font: inherit; color: #fff; cursor: pointer;
  background: #000; border: 0;
  padding: 6px 8px 6px 22px; position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
}
.ex-swatches button::before {
  content: ""; position: absolute; left: 7px; top: 50%; width: 9px; height: 9px;
  margin-top: -4.5px; background: var(--sw);
}
.ex-swatches button.on { box-shadow: 0 0 0 1px #fff, 2px 2px 10px var(--sw); }

/* ---------- 7. Project page (lightbox) header ---------- */
.lightbox .lightbox-category {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .12em;
  color: #fff;
  background: #000;
  padding: 5px 8px 4px;
  margin-bottom: 10px;
  box-shadow: 0 0 0 1px var(--box-line), 2px 2px 10px var(--violet-soft);
}
.lightbox .lightbox-header .lightbox-title {
  display: table;               /* own line, box hugs the words */
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.1;
  color: #000;
  background: #fff;
  padding: 6px 12px 5px;
  margin: 0 0 14px;
  box-shadow: var(--glow);
}

/* swatches: top centre, away from the Archive link */
.ex-swatches { bottom: auto; top: 24px; right: 50%; transform: translateX(50%); }

/* hero text box: lines run to the edge of the box */
.fable-sub { text-wrap: wrap; max-width: min(653px, 100%); }

/* header chips on the project page: hug the words */
.lightbox .lightbox-category,
.lightbox .lightbox-header .lightbox-title { width: fit-content !important; max-width: 100%; }

/* ---------- 8. ONE button style everywhere (start page + project page) ---------- */
.site-nav a,
.hero-archive-link,
.lightbox-close,
.lightbox .lightbox-header .lightbox-close,
.lightbox .lightbox-close,
[id^="lightbox-"][id$="-project"],
.lightbox-header .lightbox-link a,
.lightbox-header .lightbox-trailer a,
.lightbox-header .lightbox-audio button,
.project-link-item {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-family: 'Monument Extended', -apple-system, sans-serif;
  font-size: 12px !important;
  font-weight: 400;
  line-height: 1 !important;
  letter-spacing: 0.04em;
  text-transform: none;
  text-decoration: none;
  color: #fff !important;
  background: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 6px 10px 5px !important;
  box-shadow: var(--glow);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.site-nav a:hover,
.hero-archive-link:hover,
.lightbox-close:hover,
[id^="lightbox-"][id$="-project"]:hover,
.lightbox-header .lightbox-link a:hover,
.lightbox-header .lightbox-trailer a:hover,
.lightbox-header .lightbox-audio button:hover,
.project-link-item:hover {
  background: #fff !important;
  color: #000 !important;
}
.lightbox-header .lightbox-link { display: flex; flex-wrap: wrap; gap: 8px; }

/* no white frames around the dropdown images */
.ex-half,
.project-images-wrapper img.active,
#worlds .project-images-wrapper > .img-pair img { box-shadow: none !important; }
.ex-half:last-child { box-shadow: 6px 6px 24px var(--violet-haze) !important; }

.ex-swatches { z-index: 100000 !important; top: 70px !important; }

/* viewfinder bottom aligned with the hero text box */
.hero-section::after { bottom: 110px; }

/* pixel window shows the VR images in their TRUE colours:
   above the reel's glow/grain/shade layers, no blend, no tint overlays on the right */
.pixel-blob { z-index: 4 !important; mix-blend-mode: normal !important; opacity: 1 !important; filter: none !important; }
body::before {
  background:
    linear-gradient(90deg, var(--violet-soft) 0, transparent 5vw),
    linear-gradient(0deg, var(--accent-faint) 0, transparent 10vh) left bottom / 60% 100% no-repeat;
}
.hero-section::after { z-index: 3 !important; }  /* frame/shade layer stays under the pixel window */

/* no "Physical / Virtual" captions on the pairs */
.ex-half::before { display: none !important; }

/* scanner: small title chip riding along the line */
.ex-scan-label {
  position: absolute; left: 0; top: 124px; z-index: 5;
  font: 400 12px/1 'Monument Extended', -apple-system, sans-serif; letter-spacing: .04em;
  color: #000; background: #fff;
  padding: 5px 8px 4px;
  box-shadow: 2px 2px 10px var(--violet-soft);
  white-space: nowrap; pointer-events: none;
  transition: opacity .4s;
}
.ex-swatches button.mode { padding-left: 8px; }
.ex-swatches button.mode::before { display: none; }
.ex-swatches .sep { width: 10px; }

/* edge gradient: full on the start image, faint in the archive, gone on project pages */
body::before { transition: opacity .8s ease; }
body.ex-in-archive::before { opacity: .3; }
body:has(.lightbox.visible)::before { opacity: 0; }
body.ex-in-archive .ex-cursor { opacity: .4; }

/* project pages: keep a slight glow on the left edge only */
body:has(.lightbox.visible)::before {
  opacity: .35;
  background: linear-gradient(90deg, var(--violet-soft) 0, transparent 4vw);
}

/* project page: credits plain again, as on the live site (Paula, 02.11.) */

/* scanner titles: ride with the line, then dock on the right as a stacked list */
.ex-scan-label { top: 124px; transition: opacity .8s; }
.ex-scan-label.docked { transition: transform 1.2s cubic-bezier(.22,1,.36,1), opacity .8s; }
.ex-scan-label.gone { opacity: 0; }

/* a repeated world's docked name dissolves upward into the air */
.ex-scan-label.evaporate {
  transition: transform 1.4s ease-out, opacity 1.4s ease-out, filter 1.4s ease-out !important;
  transform: translateX(var(--dock-x, 0)) translateY(-28px) !important;
  opacity: 0;
  filter: blur(6px);
}

/* scanner runs to the very bottom: no blurred strip over the lower edge of the reel */
.hero-recognition-bar,
.fable-ticker {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-top: 0 !important;
}
body::before {
  background: linear-gradient(90deg, var(--violet-soft) 0, transparent 5vw);   /* left edge only, no haze at the bottom */
}

/* Worlds · Words · Workshops: bigger type that fills its box */
.fable-pillars a {
  font-size: clamp(18px, 2.5vw, 36px) !important;
  letter-spacing: 0.06em !important;
  padding: 0.12em 0.32em 0.04em !important;
  line-height: 1 !important;
}

/* ONE typeface everywhere: PP Monument Extended, like the Current / Past / Award bar */
.site-nav a, .hero-archive-link, .lightbox-close, [id^="lightbox-"][id$="-project"],
.lightbox-header .lightbox-link a, .lightbox-header .lightbox-trailer a, .lightbox-header .lightbox-audio button,
.project-link-item, .ex-scan-label, .lightbox .lightbox-category, .lightbox .lightbox-credits,
.fable-sub, .column-desc {
  font-family: 'Monument Extended', -apple-system, sans-serif !important;
  font-weight: 400;
}

/* =========================================================
   Boxes hug their text (Paula, 02.11.): tight padding, and the
   trailing letter-spacing gap is taken back on the right
   ========================================================= */
.column-title {
  letter-spacing: 0.08em !important;
  padding: 0.14em calc(0.3em - 0.08em) 0.04em 0.3em !important;
  line-height: 1 !important;
}
.fable-pillars a {
  letter-spacing: 0.06em !important;
  padding: 0.14em calc(0.28em - 0.06em) 0.04em 0.28em !important;
}
.site-name { padding: 0.14em 0.3em 0.04em !important; line-height: 1 !important; }

/* description boxes: height follows the text, no empty space below */
.column-header:not(.collapsed) .column-desc {
  height: auto !important;
  min-height: 0 !important;
  padding: 9px 12px 10px !important;
  width: fit-content;
}

/* Close = exactly the About button */
.lightbox-close, .lightbox .lightbox-close, .lightbox .lightbox-header .lightbox-close {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  letter-spacing: 0.02em !important;
  line-height: 12px !important;
}

/* footer: "Say hello" stays quiet grey text, like © 2026 Paula Strunden */

/* =========================================================
   ABOUT page — calm, centred, scales up on big screens
   ========================================================= */
.about-overlay {
  background: rgba(0,0,0,0.95) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}
/* the start page stops scanning behind it */
body:has(.about-overlay.visible) .pixel-blob,
body:has(.about-overlay.visible) .ex-scan-label { opacity: 0 !important; transition: opacity .4s; }

.about-right h2 {                       /* name in the white box, like the site name */
  display: inline-block;
  background: #fff;
  color: #000 !important;
  padding: 0.14em 0.3em 0.04em;
  line-height: 1;
  box-shadow: var(--glow);
}
.about-awards h4 { letter-spacing: .08em; }

/* CV · Email · Instagram · Vimeo · LinkedIn, Close, Archive, DE/EN/FR → the one button style */
.about-social a,
.about-close,
.about-archive-bottom,
.about-archive-inline {
  align-items: center;
  font-family: 'Monument Extended', -apple-system, sans-serif !important;
  font-size: 12px !important;
  line-height: 12px !important;
  letter-spacing: 0.02em !important;
  color: #fff !important;
  background: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 6px 10px 5px !important;
  width: auto !important; height: auto !important;
  box-shadow: var(--glow);
  text-decoration: none;
}
.about-social a:hover, .about-close:hover, .about-archive-bottom:hover, .about-archive-inline:hover {
  background: #fff !important; color: #000 !important;
}
.about-social { gap: 10px !important; }


/* (display stays with the site: Close/Archive only show while About is open) */
.about-social a { display: inline-flex !important; }
.about-close { top: 26px !important; right: 30px !important; }
.about-right h2 { width: fit-content !important; opacity: 1 !important; background: #fff !important; }
.about-overlay.visible ~ .about-close { height: auto !important; min-height: 0 !important; padding: 6px 10px 5px !important; line-height: 12px !important; }

/* Close (About page + project page) sits exactly where About sits — position set by blob.js */
.lightbox-close, .lightbox .lightbox-close { position: fixed !important; margin: 0 !important; transform: none !important; z-index: 400 !important; }

/* docked world names are links into the archive */
.ex-scan-label.docked { pointer-events: auto; cursor: pointer; }
.ex-scan-label.docked:hover { background: #000; color: #fff; box-shadow: var(--glow); }

/* project page bottom: [← back] [● overview] [next world →] in one row */
.lightbox-nav .lightbox-overview-toggle { display: none !important; }   /* lives in the middle button now */
.lightbox-nav-separator { display: none !important; }
.lightbox-nav-buttons { gap: 10px !important; }
.ex-overview {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Monument Extended', -apple-system, sans-serif;
  font-size: 12px; line-height: 12px; letter-spacing: .02em;
  color: #000; background: #fff;
  padding: 5px 10px 4px 7px;
  box-shadow: var(--glow);
  cursor: pointer;
}
.ex-overview svg { width: 13px; height: 13px; }
.ex-overview:hover, .ex-overview.on { background: #000; color: #fff; }
.ex-overview { padding: 5px 8px 4px !important; }
.ex-overview svg rect { fill: currentColor; }
.ex-scan-label:not(.evaporate) { pointer-events: auto; cursor: pointer; }   /* every name opens its world, riding or docked */

/* project page: [back][▦][next world] sit exactly where the Archive button sits on the start page */
.lightbox-nav-buttons { position: fixed !important; top: auto !important; left: auto !important; z-index: 400; }

/* reel full bleed: no darkening vignette at the edges of the start image */
.hero-section::before { display: none !important; }
.hero-glow { display: none !important; }
/* more numbers before / after the visible ten: the outer numbers fade out, like the row continues */
#lightbox-nav .lightbox-dot.ex-fade-1:not(.active) { opacity: .45; }
#lightbox-nav .lightbox-dot.ex-fade-2:not(.active) { opacity: .2; }

/* 2000 Ton City: zoom in on the person in the headset, so the physical side reads as physical */
#worlds .img-pair .ex-half img[src*="2000TonCity_03"] {
  object-position: 48% 44% !important;
  transform: scale(1.45);            /* less zoom: the whole body incl. the hand on the table stays in view (02.11.) */
  transform-origin: 48% 44%;
}
#worlds .img-pair .ex-half:hover img[src*="2000TonCity_03"] { transform: scale(1.5); }

/* archive slides: pairs, or a wide panorama across the full width; the rest is held back */
.project-images-wrapper > .ex-hold { display: none !important; }
#worlds .project-images-wrapper > .img-pair.ex-single .ex-half { flex: 1 1 100%; }
#worlds .project-images-wrapper > .img-pair.ex-single .ex-half:last-child { box-shadow: 6px 6px 24px var(--violet-haze) !important; }


/* ===== chosen colour scheme: WHITE GLOW (02.11.2026) ===== */
/* COMPARISON VERSION "white glow": everything glows white — no colour anywhere except the worlds' own images */
:root {
  --violet: rgb(255,255,255) !important;
  --violet-soft: rgba(255,255,255,.45) !important;
  --violet-haze: rgba(255,255,255,.22) !important;
  --accent-faint: rgba(255,255,255,.12) !important;
}

/* =========================================================
   PHONE (≤ 700px)
   ========================================================= */
@media (max-width: 700px) {
  /* title: no stepped indent, boxes stay inside the screen */
  .fable-title .fht:nth-child(2) { margin-left: 0; }
  .fable-title { font-size: clamp(30px, 10.5vw, 44px) !important; }
  .fable-title .fht { max-width: 100%; box-sizing: border-box; }
  /* Worlds · Words · Workshops chips under the name: boxes, not pills */
  .mobile-section-nav button, .site-header .fable-pillars a, .mobile-pillars a, .site-header a:not(.site-name) {
    border-radius: 0 !important;
  }
  /* scanner names: only the one riding with the line — no stacked list on a small screen */
  .ex-scan-label { font-size: 10px !important; padding: 4px 6px 3px !important; top: 96px !important; }
  .ex-scan-label.docked { opacity: 0 !important; pointer-events: none !important; transition: opacity .8s !important; }
  /* the edge gradient a little narrower */
  body::before { background: linear-gradient(90deg, var(--violet-soft) 0, transparent 7vw) !important; }
  .fable-sub { font-size: 13px !important; padding: 10px 12px !important; }
  .fable-pillars a { font-size: 15px !important; }
}
@media (max-width: 700px) {
  /* phone header chips + bottom social links: same black boxes as everywhere */
  .mobile-section-dot, .mobile-section-dot.active, .mobile-social-nav a {
    border-radius: 0 !important;
    font-family: 'Monument Extended', -apple-system, sans-serif !important;
    background: #000 !important; color: #fff !important;
    box-shadow: var(--glow) !important; border: 0 !important;
  }
  .mobile-section-dot.active { background: #fff !important; color: #000 !important; }
}
@media (max-width: 700px) {
  /* nothing wider than the screen */
  .fable-sub, .column-header:not(.collapsed) .column-desc {
    width: auto !important;
    max-width: calc(100vw - 30px) !important;
    box-sizing: border-box !important;
  }
  .fable-hero { right: 15px !important; }
  html, body { overflow-x: clip; }   /* clip, not hidden: hidden would turn <body> into its own scroll box and break every jump link */
  body::before { background: linear-gradient(90deg, rgba(255,255,255,.22) 0, transparent 5vw) !important; }
}

/* start page text: one step smaller, first sentence white, the credits line quieter (02.11.) */
.fable-sub {
  font-size: clamp(13px, 1.05vw, 15px) !important;
  line-height: 1.5 !important;
  max-width: min(560px, 100%) !important;
  color: rgba(255,255,255,.68) !important;
}
.fable-sub .hero-lead { color: #fff !important; }

/* start page: text box a tick lower, and the bottom frame corners sit 10px below it —
   the same gap the REC has to the top corners */
@media (min-width: 701px) {
  .fable-hero { bottom: 90px !important; }   /* box sits exactly on the bottom-left frame corner */
  .hero-section::after { bottom: 90px !important; }
}

/* Archive → exactly like About (same box, size, type), just kept on one line */
.hero-archive-link { white-space: nowrap !important; flex-shrink: 0; }
/* start page box: all text one colour (Paula, 02.11.) */
.fable-sub, .fable-sub .hero-lead { color: #fff !important; }

/* archive numbers under the images: plain numbers, the current one white — no box */
.img-dot, .img-dot.active {
  background: none !important;
  box-shadow: none !important;
  padding: 2px 6px !important;
}
.img-dot { color: rgba(255,255,255,.4) !important; }
.img-dot.active { color: #fff !important; }

/* PHONE · About page: Close is a box inside the screen, the header doesn't show through */
@media (max-width: 700px) {
  .about-overlay.visible ~ .about-close,
  .about-close {
    top: 14px !important;
    right: 15px !important;
    font-size: 12px !important;
    line-height: 12px !important;
    padding: 6px 10px 5px !important;
  }
  .about-close::before { content: none !important; }
  body:has(.about-overlay.visible) .site-header,
  body:has(.about-overlay.visible) .mobile-social-nav { visibility: hidden !important; }
  .about-overlay { background: #000 !important; }
  .about-social { flex-wrap: wrap !important; }
}
@media (max-width: 700px) {
  .ex-rec { display: none !important; }            /* REC not needed on the phone */
}
@media (max-width: 700px) {
  .about-overlay .about-inner { padding-top: 56px !important; }   /* Close gets its own row above the name */
  .about-right h2 { max-width: 100%; box-sizing: border-box; font-size: 20px !important; }
}
@media (max-width: 700px) {
  .ex-overview { display: none !important; }        /* overview button not needed on the phone */
  .about-overlay.visible { background: #000 !important; }
}
@media (max-width: 700px) {
  /* phone: just "back" and "next" */
  #lightbox-next-project, #lightbox-prev-project { font-size: 0 !important; }
  #lightbox-next-project::before, #lightbox-prev-project::before { content: none !important; }
  #lightbox-next-project::after { content: "next" !important; font-size: 12px !important; }
  #lightbox-prev-project::after { content: "back" !important; font-size: 12px !important; }
}
@media (max-width: 700px) {
  /* phone project page: Close = the same box as on the phone About page, top right, no × */
  .lightbox .lightbox-close, .lightbox-close {
    position: fixed !important;
    top: 14px !important; right: 15px !important; left: auto !important; bottom: auto !important;
    width: auto !important; height: auto !important; min-width: 0 !important;
    font-size: 12px !important; line-height: 12px !important;
    padding: 6px 10px 5px !important;
    border-radius: 0 !important; border: 0 !important;
    background: #000 !important; color: #fff !important;
    box-shadow: var(--glow) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .lightbox .lightbox-close::before, .lightbox-close::before, .lightbox-close::after { content: none !important; }
  /* back / next sit in the site's own phone row, not at the desktop Archive spot */
  .lightbox-nav-buttons { position: static !important; }
}
@media (max-width: 700px) {
  /* phone scanner names: no fade-at-dock, they leave the screen with the line */
  .ex-scan-label.docked { opacity: 0 !important; transition: none !important; }
  .ex-scan-label { transition: none !important; }
  /* phone project page: Exhibition · Fellowship · Trailer pills flow in ONE row */
  .lightbox-header-left { display: block !important; }
  .lightbox-header-left > .lightbox-audio,
  .lightbox-header-left > .lightbox-trailer,
  .lightbox-header-left > .lightbox-link {
    display: inline-flex !important; flex-wrap: nowrap !important; gap: 5px !important;
    margin: 8px 5px 0 0 !important; vertical-align: top;
  }
  .lightbox-header-left > div:empty { display: none !important; }
  .lightbox-header .lightbox-link a, .lightbox-header .lightbox-trailer a, .lightbox-header .lightbox-audio button { font-size: 10px !important; padding: 5px 7px 4px !important; white-space: nowrap; }
}
@media (max-width: 700px) {
  .lightbox-header .lightbox-link, .lightbox-header .lightbox-trailer, .lightbox-header .lightbox-audio { flex-direction: row !important; }
  .lightbox-header .lightbox-link a { margin: 0 !important; }
}
.ex-mobile-archive { display: none; }
@media (max-width: 768px) {
  .ex-mobile-archive {
    display: inline-flex; position: fixed; right: 15px; bottom: 15px; z-index: 300;
    font: 400 12px/12px 'Monument Extended', -apple-system, sans-serif; letter-spacing: .02em;
    color: #fff; background: #000; text-decoration: none;
    padding: 6px 10px 5px; box-shadow: var(--glow);
    transition: opacity .3s;
  }
  body.ex-in-archive .ex-mobile-archive,
  body:has(.lightbox.visible) .ex-mobile-archive,
  body:has(.about-overlay.visible) .ex-mobile-archive { opacity: 0; pointer-events: none; }
  /* About: same box, same spot */
  .mobile-social-nav { right: 15px !important; bottom: 15px !important; }
  .mobile-social-nav a {
    font: 400 12px/12px 'Monument Extended', -apple-system, sans-serif !important; letter-spacing: .02em !important;
    padding: 6px 10px 5px !important; border-radius: 0 !important;
  }
}
.ex-info { display: none; }
@media (max-width: 700px) {
  /* [back] [info] [next] */
  .ex-info {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px;
    font: 400 12px/12px 'Monument Extended', -apple-system, sans-serif; letter-spacing: .02em;
    color: #000; background: #fff; padding: 6px 10px 5px; box-shadow: var(--glow); cursor: pointer;
  }
  .lightbox-nav-buttons { display: flex !important; justify-content: space-between !important; align-items: center; }
  /* on the phone the images come first: description, quote and credits live behind "info" */
  .lightbox:not(.ex-info-open) .lightbox-left { display: none !important; }
  .lightbox.ex-info-open .lightbox-left {
    display: block !important;
    position: fixed !important; z-index: 350;
    left: 0; right: 0; top: 0; bottom: 64px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: #000;
    padding: 64px 15px 24px !important; box-sizing: border-box;
  }
}
@media (max-width: 700px) {
  .lightbox.ex-info-open .lightbox-left {
    opacity: 1 !important; animation: none !important; transform: none !important; visibility: visible !important;
  }
  .lightbox.ex-info-open .lightbox-left * { opacity: 1 !important; }
  /* back on the left, info in the middle, next on the right */
  .lightbox-nav-buttons { position: fixed !important; left: 15px !important; right: 15px !important; bottom: 15px !important; z-index: 360; }
  .lightbox-nav-buttons > * { flex: 0 0 auto; }
  #lightbox-next-project { margin-left: 0 !important; }
}
@media (max-width: 700px) {
  .lightbox-nav-buttons { width: auto !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; transform: none !important; }
  .lightbox-project-nav { position: static !important; transform: none !important; }
}

/* =========================================================
   Project page buttons: at most two rows, never over the text
   row 1: Trailer/Teaser · Exhibition · Press …   row 2: ▶ play buttons
   ========================================================= */
.lightbox-header-left { display: flex !important; flex-wrap: wrap !important; align-items: center; column-gap: 8px; row-gap: 8px; }
.lightbox-header-left > .lightbox-category,
.lightbox-header-left > .lightbox-title,
.lightbox-header-left > .lightbox-info { flex: 0 0 100%; }
.lightbox-header-left > div:empty { display: none !important; }
.lightbox-header-left > .lightbox-audio { order: 5; }
.lightbox-header .lightbox-trailer,
.lightbox-header .lightbox-link,
.lightbox-header .lightbox-audio { display: contents !important; }
.lightbox-header .lightbox-trailer a,
.lightbox-header .lightbox-link a:not(.ex-play) { order: 2; margin: 0 !important; }
.lightbox-header .lightbox-link a.ex-play,
.lightbox-header .lightbox-audio button { order: 4; margin: 0 !important; }
/* the first play button starts the second row */
.lightbox-header-left::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
.lightbox-header-left:not(:has(.ex-play, .lightbox-audio button))::after { display: none; }

@media (max-width: 700px) {
  /* images as big as the screen between header and buttons */
  .lightbox-right { height: calc(100svh - var(--ex-lb-top, 200px) - 64px) !important; }
  .lightbox-right .lightbox-slider, .lightbox-right .lightbox-slide { height: 100% !important; }
  .lightbox-right .lightbox-slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .lightbox.ex-info-open .lightbox-left { top: 0 !important; padding-top: 64px !important; }
  .ex-info { min-width: 64px; }
}
/* the header is a left-aligned row that wraps (title, info full width; buttons in ≤ 2 rows) */
.lightbox-header-left { flex-direction: row !important; align-items: flex-start !important; justify-content: flex-start !important; align-content: flex-start; max-width: 600px; }
.lightbox-header-left > .lightbox-category { flex: 0 0 auto !important; }
.lightbox-header-left > .lightbox-category::after { content: none; }
.lightbox-header-left > .lightbox-title { margin-top: 0 !important; }
/* desktop: the text column starts below the header, so buttons never sit on the text */
@media (min-width: 1025px) {
  .lightbox-left { top: calc(var(--ex-lb-top, 280px) + 22px) !important; bottom: 60px !important; overflow-y: auto; }
}
@media (max-width: 700px) {
  .lightbox-header-left { max-width: calc(100% - 90px); }   /* keep clear of Close */
  .lightbox-header-left > .lightbox-title { flex-basis: auto !important; max-width: calc(100vw - 30px); }
  .lightbox-header-left > .lightbox-title, .lightbox-header-left > .lightbox-info { width: calc(100vw - 30px); }
}
@media (max-width: 700px) {
  /* the bottom nav strip must not cover Close */
  .lightbox-project-nav { pointer-events: none !important; background: transparent !important; }
  .lightbox-project-nav .lightbox-nav-buttons, .lightbox-project-nav .lightbox-nav-buttons * { pointer-events: auto; }
  .lightbox .lightbox-close { z-index: 420 !important; }
  /* images fill everything between the header boxes and the back/info/next row */
  .lightbox-right {
    position: fixed !important; left: 0 !important; right: 0 !important;
    top: calc(var(--ex-lb-top, 230px) + 12px) !important; bottom: 58px !important;
    height: auto !important; margin: 0 !important; z-index: 5;
  }
  .lightbox-right .lightbox-photo-credit { display: none !important; }
}
@media (max-width: 700px) { .lightbox.ex-info-open .lightbox-left { bottom: 58px !important; z-index: 380 !important; } }
/* desktop project page: the text column sits at the BOTTOM (description, quote, credits last),
   so black space opens up under the title when there's room — it only scrolls if it would reach the buttons */
@media (min-width: 1025px) {
  .lightbox-left {
    top: auto !important;
    bottom: 60px !important;
    max-height: calc(100vh - var(--ex-lb-top, 280px) - 92px) !important;
    overflow-y: auto;
  }
}

/* scrollbars: a thin grey line, a little brighter only while you're over that column */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
*::-webkit-scrollbar { width: 3px !important; height: 3px !important; background: transparent !important; }
*::-webkit-scrollbar-track { background: transparent !important; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16) !important; border-radius: 0 !important; border: 0 !important; }
*:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35) !important; }

/* desktop project page: the text column fits without an inner scrollbar —
   a touch smaller type on laptop heights, and no visible scrollbar if it still has to scroll */
@media (min-width: 1025px) {
  .lightbox-left { scrollbar-width: none; }
  .lightbox-left::-webkit-scrollbar { display: none !important; }
  .lightbox-left .lightbox-description { font-size: clamp(12px, 1.55vh, 15px) !important; line-height: 1.5 !important; }
  .lightbox-left .lightbox-voice { font-size: clamp(12px, 1.6vh, 16px) !important; margin: 14px 0 !important; }
  .lightbox-left .lightbox-credits { font-size: clamp(9.5px, 1.15vh, 11px) !important; line-height: 1.45 !important; }
}
/* text column a tick wider on desktop (fewer lines, everything fits) */
@media (min-width: 1025px) { .lightbox-left { width: 440px !important; } }
.project-images-wrapper > .ex-hold img { display: none !important; }

/* PHONE · info panel: lives on <body> (not inside the blurred project page, which iPhone Safari
   won't scroll) — description, quote, credits from the top, scrolls between Close and back/info/next */
.ex-info-panel { display: none; }
@media (max-width: 700px) {
  .lightbox.ex-info-open .lightbox-left { display: none !important; }
  body.ex-info-open .ex-info-panel {
    display: block;
    position: fixed; left: 0; right: 0; top: 52px; bottom: 58px; z-index: 450;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    background: #000; color: #fff;
    padding: 18px 15px 28px; box-sizing: border-box;
  }
  .ex-info-panel .lightbox-description { font-size: 12px !important; line-height: 1.55 !important; margin: 0 0 18px !important; color: #fff; }
  .ex-info-panel .lightbox-voice { font-size: 15px !important; line-height: 1.35 !important; margin: 0 0 22px !important; }
  .ex-info-panel .lightbox-credits { font-size: 10px !important; line-height: 1.5 !important; max-height: none !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .ex-info-panel * { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* PHONE · About: Close and Archive are the same boxes, in the same spots, as everywhere else
   (Close top right with its frame; Archive → fixed bottom right, not a full-width bar) */
@media (max-width: 700px) {
  .about-overlay.visible ~ .about-close, .about-close { box-shadow: var(--glow) !important; z-index: 420 !important; }
  .about-archive-inline { display: none !important; }
  .about-overlay.visible ~ .about-archive-bottom {
    display: inline-flex !important; position: fixed !important;
    top: auto !important; left: auto !important; right: 15px !important; bottom: 15px !important; z-index: 420 !important;
    box-shadow: var(--glow) !important; white-space: nowrap !important;
  }
  .about-overlay { padding-bottom: 70px !important; }
  /* About in the archive: written like Archive → and Close, not in capitals */
  .mobile-social-nav a { text-transform: none !important; }
}

/* PHONE · start image: no frame over the reel (it read as a grey box on a small screen) */
@media (max-width: 700px) {
  .hero-section::after { display: none !important; }
}

/* PHONE · bottom right is always "About" — also on the start image (Paula, 02.11.) */
@media (max-width: 768px) {
  .ex-mobile-archive { display: none !important; }
  .mobile-social-nav { display: block !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  body:has(.lightbox.visible) .mobile-social-nav { opacity: 0 !important; pointer-events: none !important; }
}

/* project page: the ▶ row sits exactly one button-gap below Teaser · Exhibition · Press
   (the zero-height line break would otherwise add the row gap twice) */
.lightbox-header-left::after { margin-top: -8px !important; }

/* PHONE · project title may use the full width — it starts below Close, so every title fits in ≤ 2 lines */
@media (max-width: 700px) {
  .lightbox-header-left { max-width: calc(100vw - 30px) !important; }
  .lightbox-header-left > .lightbox-category { max-width: calc(100vw - 120px); }   /* only the top row must clear Close */
}

/* Rhetorical Bodies night world (poster image): show the world, not the poster lettering below it */
.ex-half img[src*="RhetoricalBodies_VR_Night"] { object-position: center top !important; }

/* project page: the title box ends with its title (no white bar running into the image overview);
   invisible full-width breaks (added by xr-layer.js) keep category and title each on their own line */
.lightbox-header-left > .ex-br { flex: 0 0 100% !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }
.lightbox-header-left > .lightbox-category,
.lightbox-header-left > .lightbox-title { flex: 0 1 auto !important; width: auto !important; }
.lightbox-header-left > .lightbox-title { max-width: min(600px, calc(100vw - 30px)) !important; }
.lightbox-header-left > .ex-br + .lightbox-title { margin-top: -8px !important; }   /* cancel the extra row gap of the break */
.lightbox-header-left > .ex-br + .lightbox-info { margin-top: 0 !important; }        /* its own 8px minus the break's row gap */
@media (max-width: 768px) { .lightbox-header-left > .ex-br + .lightbox-info { margin-top: -4px !important; } }
/* ▶ buttons (Poetry, Meditation) sit in the same row as Teaser · Exhibition · Press when there's room (02.11.) */
.lightbox-header-left::after { display: none !important; }
/* phone: every title box the full width too */
@media (max-width: 700px) { .lightbox .lightbox-header .lightbox-header-left > .lightbox-title { width: calc(100vw - 30px) !important; max-width: calc(100vw - 30px) !important; } }

/* PHONE · info panel: a short text sits low (towards back/info/next), like on desktop; a long one still starts at the top and scrolls */
@media (max-width: 700px) {
  body.ex-info-open .ex-info-panel { display: flex !important; flex-direction: column; }
  .ex-info-panel > :first-child { margin-top: auto !important; }
}
/* desktop: the title box hugs the one-line title (02.11., replaces the equal-width boxes) */
@media (min-width: 701px) { .lightbox .lightbox-header .lightbox-header-left > .lightbox-title { width: fit-content !important; max-width: none !important; } }