/* ==========================================================================
   CPD Studio — editorial base stylesheet
   Palette + type carried over from the existing production build:
   warm ivory / concrete / charcoal, Playfair Display + Inter.
   ========================================================================== */

:root {
  --near-black: #111111;
  --charcoal: #1a1a1a;
  --dark-gray: #252525;
  --warm-white: #f3f0ea;
  --concrete: #b8b5ae;
  --concrete-dim: #8f8c84;
  --amber: #f2d9a6;

  --line: rgba(243, 240, 234, 0.14);
  --line-strong: rgba(243, 240, 234, 0.32);

  --font-display: "Unbounded", "Playfair Display", Georgia, serif;
  --font-body: "IBM Plex Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1380px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(4rem, 9vw, 8rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;

  /* Generous, fixed clearance under the fixed header — used by the hero
     text column and (at 900px+, where the diagram sits under the header
     too) the diagram pane, so nothing ever renders behind the nav. */
  --header-clear: 5.5rem;
}

/* -------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--near-black);
  color: var(--warm-white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
}
p {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
img,
svg {
  display: block;
  max-width: 100%;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
::selection {
  background: var(--warm-white);
  color: var(--near-black);
}

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

/* -------------------------------------------------------------------------
   Utility
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--concrete);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--warm-white);
  color: var(--near-black);
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  z-index: 1000;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 1rem;
}
:focus-visible {
  outline: 1.5px solid var(--warm-white);
  outline-offset: 3px;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   Header / nav
   ------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem var(--gutter);
  font-weight: 600;
  background: linear-gradient(to bottom, rgba(17, 17, 17, 0.85), transparent);
  transition: background-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(17, 17, 17, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand-mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.brand-name {
  font-weight: 600;
}

.primary-nav {
  display: none;
}
.primary-nav ul {
  display: flex;
  gap: clamp(1rem, 2vw, 2.2rem);
}
.primary-nav a {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--concrete);
  position: relative;
  padding-bottom: 0.35rem;
  transition: color 0.25s var(--ease);
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0%;
  background: var(--warm-white);
  transition: width 0.3s var(--ease);
}
.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a[aria-current="true"] {
  color: var(--warm-white);
}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav a[aria-current="true"]::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.lang-toggle {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  overflow: hidden;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.lang-toggle button {
  padding: 0.4rem 0.75rem;
  font-weight: 700;
  color: var(--concrete);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.lang-toggle button[aria-pressed="true"] {
  background: var(--warm-white);
  color: var(--near-black);
}
.lang-toggle button:hover:not([aria-pressed="true"]) {
  color: var(--warm-white);
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
}
.menu-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--warm-white);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--near-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  transform: translateY(-100%);
  transition: transform 0.45s var(--ease);
}
.mobile-nav.is-open {
  transform: translateY(0);
}
.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--warm-white);
}
.mobile-nav .eyebrow {
  margin-bottom: 2rem;
}

@media (min-width: 900px) {
  .primary-nav {
    display: block;
  }
  .menu-toggle {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   Hero — sticky scroll stage
   ------------------------------------------------------------------------- */
.hero-scroll-stage {
  position: relative;
  height: 340vh;
  padding-block: 0;
  border-top: none;
}
.hero-sticky {
  position: sticky;
  top: 0;
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: radial-gradient(120% 90% at 72% 18%, #1c1c1c 0%, var(--near-black) 55%, #0a0a0a 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-stage {
    height: 100vh;
    height: 100svh;
  }
}

/* Two dedicated panes: text never sits on top of the drawing at any width.
   Mobile: stacked (text, then diagram, sized to both fit in 100svh).
   Desktop/tablet (>=900px): side-by-side, text in a fixed-width column. */
.hero-content {
  position: relative;
  z-index: 5;
  order: 1;
  flex: 0 0 auto;
  padding: var(--header-clear) var(--gutter) 1.25rem;
  display: grid;
  gap: clamp(1rem, 2.5vh, 1.5rem);
  align-content: start;
}
/* These wrappers collapse on mobile. On desktop they form one clipped text
   track, so the intro and every story caption travel upward together. */
.hero-copy-window,
.hero-copy-track {
  display: contents;
}
.hero-intro {
  display: grid;
  gap: clamp(1rem, 2.5vh, 1.5rem);
}
.hero-diagram-pane {
  order: 2;
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(240px, 40svh, 460px);
}
.hero-diagram {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.hero-diagram svg {
  width: 100%;
  height: 100%;
}
.hero-diagram text {
  font-weight: 600;
}

/* A dark text halo keeps SVG labels legible over both sky and light massing. */
.diagram-label {
  paint-order: stroke;
  stroke: #0b0b0b;
  stroke-width: 2.6;
  stroke-opacity: 0.82;
  stroke-linejoin: round;
  font-weight: 600;
}
.leader-casing {
  fill: none;
  stroke: #0b0b0b;
  stroke-width: 3.2;
  stroke-opacity: 0.5;
}

/* Explode-view groups: moved directly by scroll progress in main.js.
   No CSS transition — the transform must track the scrollbar 1:1. */
.explode-layer {
  transform: translateY(0);
}
.floor-annotation,
.concept-annotation {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .explode-layer {
    transform: none !important;
  }
  .floor-annotation,
  .concept-annotation {
    opacity: 1 !important;
  }
  .hero-story-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--concrete);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--line-strong);
}
.hero-title {
  font-size: clamp(2.3rem, 8.4vw, 6.1rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
/* Unbounded ships no italic, so an <em> here would be a synthetic slant.
   The emphasis is carried by weight and colour instead. */
.hero-title em {
  font-style: normal;
  font-weight: 400;
  color: var(--concrete);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
.hero-location {
  font-size: 1rem;
  font-weight: 600;
  color: var(--warm-white);
}
.hero-tags {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.hero-tags li {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--concrete);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 0.4rem 0.9rem;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-white);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.4rem;
  transition: gap 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hero-cta:hover,
.hero-cta:focus-visible {
  gap: 1rem;
  border-color: var(--warm-white);
}
.hero-cta svg {
  width: 16px;
  height: 16px;
}

/* Story chapters — only shown in the side-by-side (900px+) layout, where
   the left column has room below the CTA. Scroll-synchronized in main.js;
   the defaults below (opacity: 1, no highlight) are what a reduced-motion
   or no-JS visitor sees: a plain, fully readable static list. */
.hero-story {
  display: none;
}
.hero-story-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  row-gap: 0.45rem;
  padding-block: 0.1rem;
}
.hero-story-item .hero-story-index {
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--concrete);
  padding-top: 0.1rem;
}
.hero-story-item h3 {
  font-size: clamp(0.94rem, 1.15vw, 1.06rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: var(--warm-white);
}
.hero-story-item p {
  grid-column: 2;
  font-size: clamp(0.98rem, 1.12vw, 1.08rem);
  font-weight: 700;
  line-height: 1.5;
  color: #dedbd4;
  max-width: 32ch;
}
/* At 900px+ these are enlarged again (see below) — sized so only one or
   two captions ever fit inside the copy window at once, which is what
   makes the window's clip genuinely drive a one-at-a-time reveal instead
   of just always showing the whole list. */
@media (min-width: 900px) {
  .hero-sticky {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    flex-direction: row;
    align-items: stretch;
  }
  .hero-content {
    order: 1;
    flex: 0 0 clamp(320px, 36vw, 440px);
    justify-content: start;
    min-height: 0;
    padding: 0;
    display: block;
    overflow: hidden;
  }
  .hero-copy-window {
    position: absolute;
    /* A little extra breathing room below the diagram's own top edge, so
       the column doesn't start flush against it. */
    top: calc(var(--header-clear) + 1.5rem);
    left: clamp(1.75rem, 3vw, 3rem);
    right: clamp(1.75rem, 3vw, 3rem);
    bottom: 0;
    display: block;
    overflow: hidden;
  }
  .hero-copy-track {
    display: grid;
    align-content: start;
    gap: clamp(0.5rem, 1vh, 0.75rem);
    padding-bottom: 1rem;
    will-change: transform;
  }
  .hero-diagram-pane {
    order: 2;
    flex: 1 1 auto;
  }
  /* The diagram sits beside the text, directly under the fixed header too,
     so it needs its own top clearance — this is the space reserved for the
     sun's high point and the moon, not just for the title. */
  .hero-diagram {
    top: var(--header-clear);
    height: calc(100% - var(--header-clear));
  }
  .hero-title {
    font-size: clamp(1.5rem, 3.2vw, 2.4rem);
    max-width: 14ch;
  }
  .hero-intro { gap: clamp(0.45rem, 1.1vh, 0.8rem); }
  .hero-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
  }
  .hero-tags { gap: 0.4rem; }
  .hero-tags li { padding: 0.28rem 0.62rem; font-size: 0.64rem; }
  .hero-cta { font-size: 0.76rem; }
  .hero-story {
    display: grid;
    gap: 1rem;
    margin-top: 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
  }
  .hero-story-item {
    column-gap: 0.9rem;
    row-gap: 0.35rem;
    padding-block: 0.2rem;
  }
  .hero-story-item .hero-story-index { font-size: 1.05rem; }
  .hero-story-item h3 { font-size: clamp(1.35rem, 2.1vw, 1.7rem); line-height: 1.15; }
  .hero-story-item p {
    font-size: clamp(1rem, 1.9vh, 1.12rem);
    line-height: 1.45;
    max-width: none;
  }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .hero-copy-window { overflow-y: auto; }
  .hero-copy-track { will-change: auto; }
}
@media (min-width: 900px) {
  html:not(.js) .hero-content { overflow: visible; }
  html:not(.js) .hero-copy-window { position: static; overflow: visible; }
}

.hero-scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  z-index: 5;
  display: none;
  align-items: center;
  gap: 0.6rem;
  color: var(--concrete);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-scroll-cue .line {
  width: 1px;
  height: 40px;
  background: var(--line-strong);
  position: relative;
  overflow: hidden;
}
.hero-scroll-cue .line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--warm-white);
  animation: scroll-cue 2.4s var(--ease) infinite;
}
@keyframes scroll-cue {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue .line::after {
    animation: none;
    height: 100%;
  }
}
@media (min-width: 700px) {
  .hero-scroll-cue {
    display: flex;
    writing-mode: vertical-rl;
  }
}

/* -------------------------------------------------------------------------
   Section shell
   ------------------------------------------------------------------------- */
section {
  position: relative;
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
}
/* Section registers: fine drafted datum with a slightly heavier starting mark. */
main section[id]:not(.hero-scroll-stage) { border-top: none; }
main section[id]:not(.hero-scroll-stage)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(to right, rgba(243, 240, 234, 0.34) 0, rgba(243, 240, 234, 0.34) 4.5rem, var(--line) 4.5rem, var(--line) 100%);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 1.1s var(--ease);
}
html.js main section[id]:not(.hero-scroll-stage)::before { transform: scaleX(0); }
html.js main section[id]:not(.hero-scroll-stage).is-drawn::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  main section[id]:not(.hero-scroll-stage)::before { transform: none; transition: none; }
}
/* Specificity beats the shared section shell so the sticky hero starts flush. */
section.hero-scroll-stage {
  padding-block: 0;
  border-top: none;
}
.section-head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.section-head h2 {
  font-size: clamp(1.45rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.01em;
  max-width: 26ch;
}
.projects-header h2 {
  font-size: clamp(1.45rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.01em;
  max-width: 26ch;
}

/* -------------------------------------------------------------------------
   Studio section
   ------------------------------------------------------------------------- */
.studio-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}
/* Scroll-linked (not IntersectionObserver reveal-once): main.js drives
   opacity + translateY directly from scroll position as the section enters,
   so the heading, the running text and the scene all build together. The
   defaults below are the reduced-motion / no-JS resting state — fully
   visible, no motion. */
.studio-heading-col,
.studio-text,
.studio-visual {
  opacity: 0;
  transform: translateY(40px);
}
@media (prefers-reduced-motion: reduce) {
  .studio-heading-col,
  .studio-text,
  .studio-visual {
    opacity: 1;
    transform: none;
  }
}
.studio-heading-col {
  display: grid;
  gap: 1.1rem;
}
.studio-heading-col h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 600;
  line-height: 1.22;
  max-width: 22ch;
}
.studio-text {
  display: grid;
  gap: 1.2rem;
}
.studio-text p {
  color: var(--concrete);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.6;
}
.studio-visual {
  position: relative;
  display: grid;
  gap: 0.85rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
}
.studio-visual .eyebrow {
  color: var(--warm-white);
  font-weight: 700;
}
.studio-scene {
  width: 100%;
  height: auto;
}
.studio-scene-note {
  color: var(--concrete-dim);
  font-style: italic;
  font-size: 0.82rem;
  max-width: 48ch;
}

/* Envelope section figure: inline vector drawing, matching the hero's drafted language. */
.figure {
  margin: clamp(2.75rem, 6vw, 4.5rem) 0 0;
  border-top: 1px solid var(--line);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.figure-head { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.25rem); }
.figure-code { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--concrete); border: 1px solid var(--line-strong); padding: 0.2rem 0.45rem; white-space: nowrap; }
.figure-rule { flex: 1 1 auto; height: 1px; background: var(--line); }
.figure-caption { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--concrete); text-align: right; }
.figure-assembly-label {
  margin-top: 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--concrete-dim);
  text-align: right;
}
.figure-art {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  padding: clamp(1rem, 2.5vw, 1.75rem);
}
.figure-art svg { display: block; width: 100%; height: auto; }
.figure-explain {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  color: var(--concrete);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.6;
  max-width: 68ch;
}
.figure-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.65rem 2rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.figure-key { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; color: var(--concrete); }
.swatch { display: inline-block; flex: 0 0 auto; width: 11px; height: 11px; }
.swatch--concrete { background: var(--concrete); }
.swatch--cavity { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.swatch--insulation { background: #d8cdb8; }
.swatch--charcoal { background: #262626; box-shadow: inset 0 0 0 1px var(--line-strong); }
.swatch--frame { background: #141210; box-shadow: inset 0 0 0 1px var(--line-strong); }
.swatch--glass { background: rgba(207, 224, 218, 0.55); box-shadow: inset 0 0 0 1px rgba(207, 224, 218, 0.35); }
.swatch--timber { background: #8a6a4a; }
.swatch--waterproofing { background: #1a1a1a; box-shadow: inset 0 0 0 1px var(--line-strong); }

@media (min-width: 900px) {
  /* The heading sits beside the scene; the running text drops below and
     spans the full width, so it starts flush left under the heading and
     also reaches under the image instead of being boxed into one column. */
  .studio-grid {
    grid-template-columns: 0.8fr 1.3fr;
    grid-template-areas:
      "heading visual"
      "text    text";
    align-items: start;
    column-gap: clamp(2rem, 4vw, 3rem);
    row-gap: clamp(1.5rem, 3vw, 2rem);
  }
  .studio-heading-col { grid-area: heading; }
  .studio-visual {
    grid-area: visual;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
  }
  .studio-text {
    grid-area: text;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem clamp(2rem, 4vw, 3rem);
  }
}

/* -------------------------------------------------------------------------
   Projects section
   ------------------------------------------------------------------------- */
.projects-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.projects-note {
  max-width: 52ch;
  color: var(--concrete);
  font-size: 0.98rem;
  font-weight: 600;
  border-left: 2px solid var(--line-strong);
  padding-left: 1rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.projects-scroller-wrap {
  position: relative;
}
.projects-scroller {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: none;
}
.projects-scroller::-webkit-scrollbar {
  display: none;
}
.project-card {
  scroll-snap-align: start;
  flex: 0 0 min(82vw, 400px);
  border: 1px solid var(--line);
  padding: 1rem;
  color: var(--concrete);
}
.project-card-body {
  padding-top: 1rem;
}
.project-card .index {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--line-strong);
}
.project-card-tag {
  margin-top: 0.5rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--concrete-dim);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.project-card-tag-sep {
  opacity: 0.5;
}
.project-card h3 {
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--warm-white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.project-card p:not(.project-card-tag) {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
}

/* Concept model: a flat axonometric SVG drawing tilted with CSS 3D
   (perspective + rotateX/rotateY) — not WebGL, no new dependencies.
   pointer events (mouse + touch, unified) drive drag/orbit; arrow keys
   are the keyboard fallback. See initProjectModels in main.js. */
.project-model {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  background: radial-gradient(120% 100% at 30% 20%, #1c1c1c 0%, var(--near-black) 70%);
  perspective: 900px;
  cursor: grab;
  touch-action: none;
}
.project-model:active {
  cursor: grabbing;
}
.project-model-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(243, 240, 234, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 240, 234, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.project-model-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateX(8deg) rotateY(-18deg);
  transition: transform 0.35s var(--ease);
  will-change: transform;
}
.project-model.is-dragging .project-model-stage {
  transition: none;
}
.project-model-svg {
  width: 76%;
  height: 76%;
}
.project-model-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.particle {
  position: absolute;
  left: var(--px);
  top: var(--py);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--warm-white);
  opacity: 0.5;
  animation: particle-drift 7s ease-in-out infinite;
  animation-delay: calc(var(--pd) * 1s);
}
.project-model.is-offscreen .particle {
  animation-play-state: paused;
}
@keyframes particle-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
  50% { transform: translate(3px, -4px); opacity: 0.8; }
}
.project-model-hint {
  position: absolute;
  left: 0.7rem;
  bottom: 0.55rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--concrete-dim);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
  pointer-events: none;
}
.project-model:hover .project-model-hint,
.project-model:focus-visible .project-model-hint {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .project-model-stage {
    transition: none;
  }
  .particle {
    animation: none;
  }
}
.projects-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}
.projects-controls button {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.projects-controls button:hover,
.projects-controls button:focus-visible {
  border-color: var(--warm-white);
  background: rgba(243, 240, 234, 0.06);
}
.projects-controls svg {
  width: 16px;
  height: 16px;
}
/* Pause/play: the site's existing warm accent (--amber), so it reads as
   the primary control in the row rather than a third navigation arrow. */
.projects-pause {
  border-color: var(--amber);
  color: var(--amber);
}
.projects-pause:hover,
.projects-pause:focus-visible {
  background: rgba(242, 217, 166, 0.12);
  border-color: var(--amber);
  outline-color: var(--amber);
}
.projects-pause .icon-play {
  margin-left: 1px;
}

/* -------------------------------------------------------------------------
   Approach section
   ------------------------------------------------------------------------- */
.approach-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.approach-item {
  background: var(--near-black);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  gap: 0.9rem;
  align-content: start;
}
.approach-item .index {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--concrete-dim);
}
.approach-item h3 {
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  font-weight: 700;
  line-height: 1.3;
}
.approach-item p {
  color: var(--concrete);
  font-size: 0.92rem;
  font-weight: 600;
}
.approach-mark { display: block; color: var(--concrete); opacity: 0.75; }
.approach-mark svg { width: clamp(48px, 6vw, 60px); height: clamp(48px, 6vw, 60px); }
@media (min-width: 640px) {
  .approach-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .approach-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* -------------------------------------------------------------------------
   Services section
   ------------------------------------------------------------------------- */
.services-list {
  position: relative;
  --rail: clamp(1rem, 2vw, 1.75rem);
  padding-left: var(--rail);
  border-top: 1px solid var(--line);
}
.services-list::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
.service-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.service-row::after { content: ""; position: absolute; left: calc(var(--rail) * -1); top: -1px; width: 10px; height: 1px; background: var(--concrete-dim); opacity: 0.85; }
.service-row .number {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--concrete-dim);
}
.service-row h3 {
  font-size: clamp(1rem, 1.8vw, 1.38rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.service-row p {
  color: var(--concrete);
  max-width: 52ch;
  font-size: 0.95rem;
}
@media (min-width: 700px) {
  .service-row {
    grid-template-columns: 100px 1fr 1.2fr;
  }
}

/* -------------------------------------------------------------------------
   Process section
   ------------------------------------------------------------------------- */
.process-steps {
  display: grid;
  gap: clamp(2rem, 4vw, 1.5rem);
}
.process-step {
  position: relative;
  display: grid;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-strong);
}
.process-step::before { content: ""; position: absolute; top: -1px; left: 0; width: 1px; height: 10px; background: var(--concrete-dim); opacity: 0.85; }
.process-step::after { content: ""; position: absolute; top: -2px; right: 0; width: 3px; height: 3px; background: var(--concrete-dim); opacity: 0.85; }
.process-step .number {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--concrete);
}
.process-step h3 {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.3;
}
.process-step p {
  color: var(--concrete);
  font-size: 0.9rem;
}
@media (min-width: 900px) {
  .process-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* -------------------------------------------------------------------------
   Contact section
   ------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.contact-info {
  display: grid;
  gap: 1.75rem;
  align-content: start;
}
.contact-info h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  max-width: 20ch;
}
.contact-detail {
  display: grid;
  gap: 0.3rem;
}
.contact-detail dt {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--concrete-dim);
}
.contact-detail dd {
  margin: 0;
  font-size: 1.05rem;
  color: var(--warm-white);
}
.contact-detail dd.is-placeholder {
  color: var(--concrete-dim);
  font-style: italic;
  font-size: 0.92rem;
}

.contact-form {
  display: grid;
  gap: 1.5rem;
}
.field {
  display: grid;
  gap: 0.5rem;
}
.field label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--concrete);
}
.field input,
.field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  color: var(--warm-white);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.6rem 0.1rem;
  transition: border-color 0.2s var(--ease);
}
.field textarea {
  resize: vertical;
  min-height: 96px;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--warm-white);
  outline: none;
}
.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: start;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  padding: 0.85rem 1.6rem;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.form-submit:hover,
.form-submit:focus-visible {
  background: var(--warm-white);
  color: var(--near-black);
  border-color: var(--warm-white);
}
.form-note {
  font-size: 0.78rem;
  color: var(--concrete-dim);
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 0.8fr 1fr;
  }
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1.5rem;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.footer-nav a {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--concrete);
  transition: color 0.2s var(--ease);
}
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--warm-white);
}
.back-to-top {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--concrete);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.back-to-top:hover,
.back-to-top:focus-visible {
  color: var(--warm-white);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--concrete-dim);
}

/* -------------------------------------------------------------------------
   Grain overlay (matches previous build's subtle texture)
   ------------------------------------------------------------------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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");
}

/* -------------------------------------------------------------------------
   Edge trace — one glowing white mark that travels a box outline
   -------------------------------------------------------------------------
   Pure CSS, no JS and no images: a conic gradient spun by an @property angle,
   then masked down to a 1px ring so only the border edge shows. Two stacked
   rings — a blurred copy for the glow, a crisp copy for the line itself.

   Applied to the CONTAINER on a group of boxes (.approach-grid), so a single
   mark travels the whole perimeter rather than four marks circling four cells;
   applied per card, staggered, on the projects row.

   Deliberately NOT on the hero pills (.hero-tags li): a mark chasing a 999px
   radius reads as a loading spinner, not a drafted line.

   Where @property is unsupported the gradient is simply dropped and the
   existing static borders remain — no layout or colour change. */
@property --trace-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.edge-trace {
  position: relative;
}
.edge-trace::before,
.edge-trace::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--trace-angle),
    rgba(243, 240, 234, 0) 0turn,
    rgba(243, 240, 234, 0) 0.6turn,
    rgba(243, 240, 234, 0.5) 0.71turn,
    #ffffff 0.75turn,
    rgba(243, 240, 234, 0.5) 0.79turn,
    rgba(243, 240, 234, 0) 0.9turn,
    rgba(243, 240, 234, 0) 1turn
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: trace-travel var(--trace-duration, 7s) linear infinite;
  animation-delay: var(--trace-delay, 0s);
}
.edge-trace::before {
  filter: blur(6px);
  opacity: 0.7;
}
@keyframes trace-travel {
  to {
    --trace-angle: 360deg;
  }
}
/* The approach group reads as one large frame, so it gets a slower lap. */
.approach-grid.edge-trace {
  --trace-duration: 11s;
}
.project-card.edge-trace {
  --trace-duration: 6.5s;
}
.projects-scroller .project-card:nth-child(2) {
  --trace-delay: -2.2s;
}
.projects-scroller .project-card:nth-child(3) {
  --trace-delay: -4.4s;
}
/* The projects pause control stops every automatic movement in the section,
   the travelling trace included, so a visitor can read a card in stillness. */
.projects-paused .project-card.edge-trace::before,
.projects-paused .project-card.edge-trace::after {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .edge-trace::before,
  .edge-trace::after {
    display: none;
  }
}
.figure-art.edge-trace {
  --trace-duration: 10s;
  --trace-delay: -3s;
}

/* -------------------------------------------------------------------------
   Project model — WebGL canvas layer
   -------------------------------------------------------------------------
   The canvas is stacked over the original inline SVG stage, which stays in the
   markup as the fallback. Only when that card's GLB has parsed and uploaded
   does .is-webgl land on the wrapper, hiding the SVG and revealing the canvas
   — so no-JS, a failed fetch, a refused WebGL context and a lost context all
   leave the drawing the card already had. */
.project-model-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  /* Vertical page scrolling stays with the page; horizontal drag is ours. */
  touch-action: pan-y;
  cursor: grab;
}
.project-model.is-webgl .project-model-canvas {
  opacity: 1;
}
.project-model.is-webgl .project-model-stage,
.project-model.is-webgl .project-model-grid {
  display: none;
}
.project-model.is-dragging .project-model-canvas {
  cursor: grabbing;
}
/* Particles ride above the canvas, as they did above the SVG. */
.project-model-particles {
  z-index: 2;
}
.project-model-hint,
.project-model-explode {
  z-index: 3;
}
/* Explode toggle — the amber accent again, matching the pause control, and
   only offered once WebGL is actually driving the card. */
.project-model-explode {
  position: absolute;
  right: 0.6rem;
  bottom: 0.55rem;
  width: 30px;
  height: 30px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--amber);
  border-radius: 0;
  color: var(--amber);
  background: rgba(18, 18, 18, 0.55);
  opacity: 0;
  transition: opacity 0.2s var(--ease), background-color 0.2s var(--ease);
}
.project-model.is-webgl .project-model-explode {
  display: flex;
}
.project-model:hover .project-model-explode,
.project-model:focus-within .project-model-explode,
.project-model-explode:focus-visible,
.project-model-explode[aria-pressed="true"] {
  opacity: 1;
}
.project-model-explode:hover,
.project-model-explode:focus-visible {
  background: rgba(242, 217, 166, 0.16);
}
.project-model-explode svg {
  width: 15px;
  height: 15px;
}
.project-model-explode[aria-pressed="true"] svg {
  transform: scaleY(1.35);
}
/* Touch devices have no hover to reveal the controls, so they stay visible. */
@media (hover: none) {
  .project-model.is-webgl .project-model-explode {
    opacity: 1;
  }
}

/* -------------------------------------------------------------------------
   Media collage
   -------------------------------------------------------------------------
   Column masonry rather than a uniform grid: social exports arrive in mixed
   portrait/landscape crops, and a fixed grid would letterbox or centre-crop
   most of them. Columns let every frame keep its own aspect ratio. */
.media-note {
  max-width: 62ch;
  color: var(--concrete);
  font-size: 0.98rem;
  font-weight: 600;
  border-left: 2px solid var(--line-strong);
  padding-left: 1rem;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
.media-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
.media-filters button {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--concrete);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 0.42rem 0.85rem;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.media-filters button:hover,
.media-filters button:focus-visible {
  color: var(--warm-white);
  border-color: var(--warm-white);
}
.media-filters button[aria-pressed="true"] {
  background: var(--warm-white);
  border-color: var(--warm-white);
  color: var(--near-black);
}
.media-collage {
  column-count: 2;
  column-gap: clamp(0.5rem, 1.2vw, 0.9rem);
  padding: clamp(0.5rem, 1.2vw, 0.9rem);
  border: 1px solid var(--line);
}
@media (min-width: 700px) {
  .media-collage { column-count: 3; }
}
@media (min-width: 1100px) {
  .media-collage { column-count: 4; }
}
.media-tile {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 clamp(0.5rem, 1.2vw, 0.9rem);
  padding: 0;
  border: 1px solid var(--line);
  background: #141414;
  overflow: hidden;
  cursor: zoom-in;
  /* break-inside keeps a tile from being split across two columns */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  transition: border-color 0.25s var(--ease), transform 0.35s var(--ease);
}
.media-tile img,
.media-tile video {
  display: block;
  width: 100%;
  height: auto;
  /* Falls back to a 4:3 box only while a file's real ratio is unknown. */
  aspect-ratio: var(--ratio, 4 / 3);
  object-fit: cover;
}
.media-tile:hover,
.media-tile:focus-visible {
  border-color: var(--warm-white);
}
@media (prefers-reduced-motion: no-preference) {
  .media-tile:hover { transform: translateY(-2px); }
}
.media-badge {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--amber);
  color: var(--amber);
  background: rgba(18, 18, 18, 0.6);
  pointer-events: none;
}
.media-badge::before {
  content: "";
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-left: 2px;
}
.media-collage.edge-trace {
  --trace-duration: 13s;
  --trace-delay: -5s;
}

/* Lightbox */
.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(6px);
}
.media-lightbox[hidden] { display: none; }
.media-lightbox-stage {
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-lightbox-stage img,
.media-lightbox-stage video {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  display: block;
  border: 1px solid var(--line-strong);
}
.media-lightbox-nav,
.media-lightbox-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  color: var(--warm-white);
  background: rgba(20, 20, 20, 0.7);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.media-lightbox-nav:hover,
.media-lightbox-nav:focus-visible,
.media-lightbox-close:hover,
.media-lightbox-close:focus-visible {
  border-color: var(--warm-white);
  background: rgba(243, 240, 234, 0.1);
}
.media-lightbox-nav svg,
.media-lightbox-close svg { width: 16px; height: 16px; }
.media-lightbox-close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
}
@media (max-width: 560px) {
  .media-lightbox { padding: 0.75rem; gap: 0.35rem; }
  .media-lightbox-nav { width: 36px; height: 36px; }
}