:root {
  --bg: #05070a;
  --bg-alt: #0a0d12;
  --surface: #10141b;
  --border: #232a35;
  --text: #f5f6f8;
  --text-dim: #9aa4b2;
  --accent: #2f7dfa;
  --accent-dark: #0d2f6b;
  --accent-orange: #ff7a33;
  --on-accent: #fff;
  /* The top section's own background and text (stays dark on light themes) */
  --hero-bg: #05070a;
  --hero-text: #f5f6f8;
  --hero-text-dim: #9aa4b2;
  --hero-border: #232a35;
  --radius: 14px;
  --prose: 640px;
  --font-body: "Geologica", "Segoe UI", system-ui, sans-serif;
  --font-heading: var(--font-body);
  /* Font styles (admin: Theme tab → Fonts). Spacing is added to each heading's own letter spacing. */
  --body-weight: 400;
  --bold-weight: 700;
  --text-spacing: 0em;
  --text-size: 1;
  --heading-weight: 900;
  --heading-lighter: 800;
  --heading-bold: 900;
  --heading-style: normal;
  --heading-case: uppercase;
  --heading-spacing: 0em;
  color-scheme: dark;
}
/* The admin panel's Theme tab overrides these through <style id="theme-vars"> (see js/main.js) */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Keep section tops clear of the sticky header when jumping via the menu */
section[id] { scroll-margin-top: 68px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: calc(1rem * var(--text-size));
  letter-spacing: var(--text-spacing);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .logo { font-family: var(--font-heading); }

strong { font-weight: var(--bold-weight); }
:is(h1, h2, h3, .logo, .number-value, .cta-line) strong { font-weight: var(--heading-bold); }

::selection { background: var(--accent-orange); color: var(--bg); }

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

img, svg { max-width: 100%; }

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 24px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.logo {
  font-weight: var(--heading-weight);
  font-style: var(--heading-style);
  text-transform: var(--heading-case);
  font-size: 1.15rem;
  letter-spacing: calc(-0.06em + var(--heading-spacing));
}

.logo span { color: var(--accent); }

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.main-nav {
  display: flex;
  gap: 28px;
  align-items: center;
}

.main-nav a {
  position: relative;
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  color: var(--text);
  transition: color 0.15s ease;
}

/* Hand-drawn underline that draws in on hover */
.main-nav a::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -8px;
  height: 8px;
  /* The line's shape is a mask, so it takes the theme's second accent colour */
  background: var(--accent-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5C18 2 30 7 48 4s34-2 51 1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5C18 2 30 7 48 4s34-2 51 1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / 100% 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.35s ease;
}

.main-nav a:hover::after { clip-path: inset(0 0 0 0); }
/* The page being shown (pages besides the home page, admin: Page tab) */
.main-nav a.is-current { color: var(--accent); }

/* Language dropdown (desktop): small "EN ▾" button with a list of full names */
.lang-menu { position: relative; }

/* Dark / light (when the site has both): a sun in the dark version, a moon in the light one. Three looks
   (admin: Theme tab → Colours): an icon, the icon with a word, or a sliding switch */
.mode-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.mode-toggle[hidden] { display: none; }
.mode-toggle:hover { border-color: var(--accent-orange); color: var(--text); }

.mode-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mode-toggle[data-mode="dark"] .mode-moon,
.mode-toggle[data-mode="light"] .mode-sun { display: none; }

.mode-word { display: none; }

/* Icon and word: a pill like the language button */
.mode-toggle.is-label {
  display: inline-flex;
  gap: 6px;
  width: auto;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
}

.mode-toggle.is-label .mode-word { display: inline; }

/* Switch: a track with the sun and the moon, and a knob on the version shown */
.mode-toggle.is-switch {
  position: relative;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  width: 58px;
  height: 30px;
  padding: 0 7px;
  border-radius: 999px;
}

.mode-toggle.is-switch svg { width: 14px; height: 14px; }
.mode-toggle.is-switch .mode-sun,
.mode-toggle.is-switch .mode-moon { display: block; }

.mode-toggle.is-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.25s ease;
}

/* The knob covers the moon in the dark version and the sun in the light one */
.mode-toggle.is-switch[data-mode="light"]::after { transform: translateX(28px); }
.mode-toggle.is-switch .mode-moon { order: -1; }

/* Switching: the whole page cross-fades as one picture (a view transition, started in js/main.js) */
html.mode-switching::view-transition-old(root),
html.mode-switching::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: ease;
}

/* ...so the page's own colour transitions (buttons, links, cards) don't start fades of their own under it */
html.mode-switching *,
html.mode-switching *::before,
html.mode-switching *::after { transition: none !important; }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.lang-toggle:hover,
.lang-toggle[aria-expanded="true"] { border-color: var(--accent-orange); color: var(--text); }

.lang-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.lang-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.lang-list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 160px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.lang-list[hidden] { display: none; }

.lang-list a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.92rem;
  color: var(--text-dim);
}

.lang-list a:hover,
.lang-list a:focus-visible { background: var(--bg-alt); color: var(--text); outline: none; }
.lang-list a[aria-current="true"] { color: var(--text); font-weight: 700; }

/* Languages inside the phone menu; hidden on desktop, where the dropdown is used */
.nav-langs { display: none; }

/* A site with one language has no switch */
.lang-menu[hidden],
.nav-langs[hidden] { display: none !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 22px;
  background: var(--text);
  margin-inline: auto;
}

/* Hero */
/* The intro fills the whole first screen below the header: text in the middle,
   an editing timeline along the bottom (built by js/main.js). */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  --fade: clamp(70px, 11vh, 130px);
  /* One full screen for the intro, plus a fade band underneath that leads into About */
  min-height: calc(100vh - 68px + var(--fade));
  min-height: calc(100svh - 68px + var(--fade));
  /* Top spacing shrinks on short screens so name, monitor and timeline all fit */
  padding-block: clamp(16px, 4vh, 72px) calc(clamp(16px, 4vh, 72px) + var(--fade));
  /* Its own colours, so it stays a dark stage on light themes too */
  --after-hero: var(--bg-alt);
  --bg: var(--hero-bg);
  --text: var(--hero-text);
  --text-dim: var(--hero-text-dim);
  --border: var(--hero-border);
  /* Dark placeholder with a soft glow; a photo or video set in the admin panel covers it */
  background:
    radial-gradient(ellipse 70% 60% at 75% 35%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    var(--bg);
  color: var(--text);
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media img,
.hero-media video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Darkens the photo/video on the text side so the name stays readable */
.hero-media:not(:empty)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--bg) calc(98% * var(--hero-overlay, 0.9)), transparent) 0%,
    color-mix(in srgb, var(--bg) calc(60% * var(--hero-overlay, 0.9)), transparent) 55%,
    color-mix(in srgb, var(--bg) calc(33% * var(--hero-overlay, 0.9)), transparent) 100%);
}

/* Centred style: darkened evenly, since the text sits in the middle */
.hero[data-style="centered"] .hero-media:not(:empty)::after {
  background: color-mix(in srgb, var(--bg) calc(75% * var(--hero-overlay, 0.9)), transparent);
}

/* Editing workspace: preview monitor beside the name, timeline across the bottom */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 32px 56px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-monitor { max-width: 560px; }
}


.hero-monitor {
  /* Narrower on short screens, so its height fits beside the text */
  justify-self: end;
  width: calc(min(100%, (100vh - 68px) * 0.86) * var(--monitor-scale, 1));
  padding: 10px 10px 12px;
  /* The top section's background, a little see-through; on a light top, a card a little lighter than it
     (js/main.js, colourVars) */
  background: var(--hero-monitor, color-mix(in srgb, var(--bg) 85%, transparent));
  border: 1px solid var(--hero-monitor-border, var(--border));
  border-radius: 12px;
  /* Softer on a light top section (js/main.js, colourVars) */
  box-shadow: var(--hero-shadow, 0 30px 80px rgba(0, 0, 0, 0.5));
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.monitor-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px 8px;
  font-size: 0.7rem;
  color: var(--text-dim);
}

.monitor-rec { text-transform: uppercase; letter-spacing: 0.08em; }
.monitor-rec::before { content: "\25CF  "; color: var(--accent-orange); }
.monitor-tc { color: var(--text); font-weight: 700; }

.monitor-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
}

/* Two players take turns so the next clip is ready before the cut */
.monitor-screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.monitor-screen video.is-on { opacity: 1; }

.monitor-title {
  margin: 10px 4px 0;
  min-height: 1.4em;
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Timeline: full screen width under the text and monitor */
.hero-timeline-wrap {
  position: relative;
  z-index: 1;
  margin-top: clamp(14px, 3.5vh, 48px);
  padding-inline: 16px;
}

.hero-timeline {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0 10px;
  /* Drag sideways to scrub; vertical swipes still scroll the page on phones */
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.tl-labels,
.tl-lanes {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 26px;
}

.tl-labels {
  font-size: 0.62rem;
  color: color-mix(in srgb, var(--text) 60%, transparent);
}

.tl-labels span { display: flex; align-items: center; height: 14px; }
.tl-labels span.is-main { height: 30px; }

.tl-lanes { position: relative; }

.tl-lane { position: relative; height: 14px; }
.tl-lane.is-main { height: 30px; }

/* Options from the admin panel */
.hero-timeline.tl--no-labels { grid-template-columns: minmax(0, 1fr); }
.tl--no-labels .tl-labels { display: none; }
.tl--no-timecode .tl-timecode { display: none; }
.tl--no-timecode .tl-labels,
.tl--no-timecode .tl-lanes { padding-top: 0; }
.hero-timeline.tl--no-scrub { cursor: default; }
.hero-monitor.no-timecode .monitor-tc { visibility: hidden; }

.tl-clip {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 3px;
  /* Until it plays: darkened on a dark top section, faded on a light one (js/main.js, colourVars) */
  filter: var(--tl-rest, brightness(0.55));
  transition: filter 0.2s ease;
}

.tl-video { background: var(--accent); }

/* Audio clips get a waveform-like stripe */
.tl-audio {
  background:
    repeating-linear-gradient(90deg, var(--tl-wave, rgba(5, 7, 10, 0.4)) 0 2px, transparent 2px 5px),
    var(--accent-orange);
}

/* Clip names on the V1 track (your videos) */
.tl-name {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 8px;
  font-size: 0.66rem;
  color: var(--tl-name, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tl-clip.is-live { filter: none; }
.tl-clip.is-live .tl-name { color: var(--tl-name-live, #fff); }
/* On a light top, the playing audio is a little softer */
.tl-audio.is-live { filter: var(--tl-audio-live, none); }

/* While scrubbing the playhead follows the pointer exactly */
.hero-timeline.is-scrubbing .tl-clip { transition: none; }

.tl-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--text);
}

.tl-timecode {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Fade band: the scenery dissolves into the About background */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--fade) + 80px);
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--after-hero));
}

/* The first section under the top section (set by js/main.js, since sections can be reordered) */
main > section.is-first { border-top: 0; }

.hero-inner { position: relative; z-index: 1; }

/* Hidden parts (admin settings) stay hidden even where a display is set */
.hero [hidden] { display: none !important; }

/* Sizes the name against its own column (cqi units) so it never overflows */
.hero-inner,
.hero-text { container-type: inline-size; }

.hero--no-glow { background: var(--bg); }
.hero--no-monitor .hero-inner { grid-template-columns: minmax(0, 1fr); }

/* Name on one line, across both columns */
.hero--one-line .hero-inner > h1 {
  grid-column: 1 / -1;
  margin-bottom: 0;
  white-space: nowrap;
  font-size: min(calc(min(clamp(3rem, 8vw, 6.6rem), 14vh) * var(--name-scale, 1)), 9.6cqi);
}

@media (max-width: 600px) {
  .hero--one-line .hero-inner > h1 { white-space: normal; font-size: min(calc(3rem * var(--name-scale, 1)), 19cqi); }
}

/* Light text and buttons so they read on the dark image */
.hero .btn-ghost { color: var(--text); border-color: color-mix(in srgb, var(--text) 60%, transparent); background: color-mix(in srgb, var(--bg) 25%, transparent); }

/* Portrait style: a picture beside the name instead of the monitor */
.hero-portrait {
  position: relative;
  justify-self: end;
  width: calc(min(100%, (100vh - 68px) * 0.56) * var(--portrait-scale, 1));
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--hero-shadow, 0 30px 80px rgba(0, 0, 0, 0.5));
}

.hero-portrait::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 6px;
  background: var(--accent-orange);
}

.hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

@media (max-width: 900px) {
  .hero-portrait { justify-self: start; max-width: 420px; }
}

/* Centred style: one column, everything in the middle */
.hero[data-style="centered"] .hero-inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
.hero[data-style="centered"] .hero-sub,
.hero[data-style="centered"] .hero-availability { margin-inline: auto; }
.hero[data-style="centered"] .hero-cta { justify-content: center; }


.eyebrow {
  color: var(--accent-orange);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 800;
  margin: 0 0 clamp(10px, 2vh, 20px);
}

.hero h1 {
  font-size: min(calc(min(clamp(3rem, 7vw, 6.4rem), 11.5vh) * var(--name-scale, 1)), 19cqi);
  font-weight: var(--heading-weight);
  font-style: var(--heading-style);
  text-transform: var(--heading-case);
  line-height: 0.9;
  margin: 0 0 clamp(10px, 2vh, 18px);
  letter-spacing: calc(-0.07em + var(--heading-spacing));
}


.hero-sub {
  max-width: 500px;
  margin: 0 0 clamp(8px, 1.6vh, 14px);
  font-size: calc(clamp(1rem, 2vh, 1.1rem) * var(--text-size));
  line-height: 1.55;
  color: color-mix(in srgb, var(--text) 85%, transparent);
}

.hero-availability {
  max-width: 500px;
  margin: 0 0 clamp(16px, 3.2vh, 32px);
  font-weight: 700;
}

/* Resume as a quiet text link beside the two buttons */
.hero-resume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  padding: 6px 4px;
  font-size: 0.92rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 75%, transparent);
  transition: color 0.15s ease;
}

.hero-resume:hover { color: var(--accent-orange); }

.hero-resume svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover { transform: translateY(-2px) rotate(-1deg); }
/* Hover bop turned off (Theme tab, Effects): nothing lifts or tilts. With the 3D tilt, cards lean
   toward the mouse instead (js/main.js) */
html.fx-no-bop :is(.btn, .work-card, .contact-socials a):is(:hover, :focus-visible),
html.fx-tilt .work-card:hover { transform: none; }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-primary:hover { background: var(--text); color: var(--bg); }

.btn-ghost {
  border-color: color-mix(in srgb, var(--text) 35%, transparent);
  color: var(--text);
  background: transparent;
}

.btn-ghost:hover { border-color: var(--accent-orange); color: var(--accent-orange); }



/* Section shared */
.section-title {
  font-size: calc(clamp(2.8rem, 9vw, 6.5rem) * var(--title-scale, 1));
  font-weight: var(--heading-weight);
  font-style: var(--heading-style);
  text-transform: var(--heading-case);
  line-height: 0.9;
  margin: 0 0 20px;
  letter-spacing: calc(-0.07em + var(--heading-spacing));
}

/* Accent full stop at the end of big section headings (admin: Theme tab → Fonts) */
.section-title::after {
  content: var(--title-dot, ".");
  color: var(--accent-orange);
  /* Undo the heading's tight letter spacing so the dot doesn't overlap the last letter */
  margin-left: 0.08em;
}

.subsection-title::before {
  content: "";
  display: block;
  width: 48px;
  height: 5px;
  margin-bottom: 16px;
  border-radius: 3px;
  background: var(--accent-orange);
}

.subsection-title {
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: var(--heading-weight);
  font-style: var(--heading-style);
  text-transform: var(--heading-case);
  line-height: 1;
  margin: 80px 0 28px;
  letter-spacing: calc(-0.06em + var(--heading-spacing));
  scroll-margin-top: 90px;
}

/* Letter-by-letter heading reveal (letters are wrapped by js/main.js) */
.reveal .reveal-word { display: inline-block; white-space: nowrap; }

.reveal .reveal-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: calc(var(--i) * 30ms);
}

.reveal.is-in .reveal-char { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal .reveal-char { opacity: 1; transform: none; transition: none; }
}

/* Scroll reveal (Theme tab, Effects): items wait unseen until they scroll into view, then come in one
   after another (--fx-delay, js/main.js) */
html[data-reveal] .fx-item:not(.fx-in) { opacity: 0; }
html[data-reveal="slide"] .fx-item:not(.fx-in) { translate: 0 28px; }
html[data-reveal] .fx-item.fx-showing {
  transition: opacity 0.6s ease var(--fx-delay, 0ms), translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--fx-delay, 0ms);
}

/* Click animation (Theme tab, Effects; built by js/main.js): plays where the click or tap was, then goes.
   --click-size and --click-color come from the settings */
.click-fx {
  position: fixed;
  z-index: 1001;
  width: var(--click-size, 56px);
  height: var(--click-size, 56px);
  translate: -50% -50%;
  color: var(--click-color, var(--accent));
  pointer-events: none;
}
.click-fx.is-corner { translate: none; }
/* Inverted: shows on anything, like the pointer dot */
.click-fx.is-invert { mix-blend-mode: difference; }
.click-fx span { position: absolute; left: 50%; top: 50%; background: currentColor; }

/* Burst: short lines shooting out */
.click-burst span {
  width: max(2px, calc(var(--click-size) * 0.06));
  height: calc(var(--click-size) * 0.2);
  margin: calc(var(--click-size) * -0.1) 0 0 max(-1px, calc(var(--click-size) * -0.03));
  border-radius: 2px;
  transform: rotate(calc(var(--i) * 45deg)) translateY(calc(var(--click-size) * -0.18));
  animation: click-burst 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes click-burst {
  to { transform: rotate(calc(var(--i) * 45deg)) translateY(calc(var(--click-size) * -0.5)) scaleY(0.2); opacity: 0; }
}

/* Ripple: a ring growing and fading */
.click-ripple span {
  inset: 0;
  left: 0;
  top: 0;
  border: max(2px, calc(var(--click-size) * 0.05)) solid currentColor;
  border-radius: 50%;
  background: none;
  animation: click-ripple 0.55s ease-out forwards;
}
@keyframes click-ripple {
  from { transform: scale(0.15); opacity: 1; }
  to { transform: scale(1); opacity: 0; }
}

/* Sparkle: dots popping outward, a little unevenly */
.click-sparkle span {
  width: calc(var(--click-size) * 0.11);
  height: calc(var(--click-size) * 0.11);
  margin: calc(var(--click-size) * -0.055) 0 0 calc(var(--click-size) * -0.055);
  border-radius: 50%;
  transform: rotate(calc(var(--i) * 51.43deg)) translateY(0) scale(1);
  animation: click-sparkle 0.6s cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
}
@keyframes click-sparkle {
  to { transform: rotate(calc(var(--i) * 51.43deg)) translateY(calc(var(--click-size) * -0.48 * var(--spread, 1))) scale(0.2); opacity: 0; }
}

/* Your own: an uploaded animation as a strip of frames, one shown at a time */
.click-image {
  height: calc(var(--click-size) * var(--click-ratio, 1));
  background-repeat: no-repeat;
  background-size: calc(var(--frames, 1) * 100%) 100%;
  background-position: calc(var(--frame, 0) / max(var(--frames, 1) - 1, 1) * 100%) 0;
}
.click-image.is-still { background-size: contain; background-position: center; animation: click-still 0.6s ease-out forwards; }
@keyframes click-still {
  from { opacity: 1; transform: scale(0.85); }
  to { opacity: 0; transform: scale(1.1); }
}

/* Mouse effect (mouse/trackpad only, built by js/main.js; admin: Theme tab).
   --cursor-size comes from the settings. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cursor-size, 14px);
  height: var(--cursor-size, 14px);
  margin: calc(var(--cursor-size, 14px) / -2) 0 0 calc(var(--cursor-size, 14px) / -2);
  border-radius: 50%;
  background: #fff;
  /* Inverted: always visible, whatever is underneath */
  mix-blend-mode: difference;
  pointer-events: none;
  transition: scale 0.25s ease, opacity 0.2s ease, width 0.25s ease, height 0.25s ease, margin 0.25s ease;
  will-change: translate;
}

.cursor[hidden] { display: none; }
.cursor[data-color="accent"] { background: var(--accent); mix-blend-mode: normal; }
.cursor[data-color="accent2"] { background: var(--accent-orange); mix-blend-mode: normal; }
.cursor.is-hover { scale: 2.8; }
.cursor.is-hidden { opacity: 0; }

/* Label: over a project the dot becomes a circle saying View or Play */
.cursor-label {
  opacity: 0;
  color: var(--on-accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.cursor.is-label {
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  background: var(--accent);
  mix-blend-mode: normal;
}

.cursor.is-label[data-color="accent2"] { background: var(--accent-orange); }
.cursor.is-label[data-color="accent2"] .cursor-label { color: var(--bg); }
.cursor.is-label .cursor-label { opacity: 1; }

/* Your own pointer: the uploaded picture, centred on the pointer, with its top-left corner as the tip,
   or (from a cursor file) with the pixel the file says points */
.cursor[data-style="image"] {
  border-radius: 0;
  background: center / contain no-repeat;
  mix-blend-mode: normal;
}

.cursor[data-style="image"][data-tip="top-left"] { margin: 0; transform-origin: 0 0; }
.cursor[data-style="image"].is-hover { scale: 1.3; }

/* From a cursor file: the frames side by side in one picture, shown one at a time (js/main.js) */
.cursor[data-style="image"].is-sprite {
  height: calc(var(--cursor-size) * var(--cursor-ratio, 1));
  margin-top: calc(var(--cursor-size) * var(--cursor-ratio, 1) / -2);
  background-size: calc(var(--frames, 1) * 100%) 100%;
  background-position: calc(var(--frame, 0) / max(var(--frames, 1) - 1, 1) * 100%) 0;
}

.cursor[data-style="image"][data-tip="hotspot"] {
  margin: calc(var(--cursor-size) * var(--cursor-ratio, 1) * var(--hot-y) * -1) 0 0 calc(var(--cursor-size) * var(--hot-x) * -1);
  transform-origin: calc(var(--hot-x) * 100%) calc(var(--hot-y) * 100%);
}

/* Spotlight: the normal pointer, with a soft glow following it (above the sections, below the header) */
.cursor-glow {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  background: radial-gradient(circle var(--glow-size, 320px) at var(--x, -999px) var(--y, -999px),
    color-mix(in srgb, var(--glow-color, var(--accent)) var(--glow-strength, 18%), transparent), transparent 70%);
  transition: opacity 0.3s ease;
}

.cursor-glow.is-hidden { opacity: 0; }

/* The drawn pointer replaces the normal one while it's active */
html.has-cursor,
html.has-cursor * { cursor: none !important; }

/* Gloopy buttons: ease into and out of the pull */
html.has-magnet :is(.btn, .featured-arrow, .contact-socials a, .filter-btn, .modal-arrow) {
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, translate 0.25s ease-out;
}

.subsection-first { margin-top: 0; }

.section-sub {
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 0 40px;
}

.work, .about, .contact { padding-block: 90px; }

.work { border-top: 1px solid var(--border); background: var(--bg-alt); }

/* Filter bar */
.filter-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.filter-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 9px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-btn:hover { color: var(--text); border-color: var(--accent-orange); }

.filter-bar[hidden] { display: none; }

.filter-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Work grid */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.work-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.work-card:hover {
  transform: translateY(-6px) rotate(-0.6deg);
  border-color: var(--accent-orange);
}

.work-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.work-card { cursor: pointer; }

/* Highlights slider: one featured project per slide */
/* Space between the slider and the filter buttons of the grid below */
.featured { margin-bottom: 40px; }

.featured-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius);
}

.featured-track::-webkit-scrollbar { display: none; }

.featured-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 3fr 2fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.18s ease;
}

.featured-slide:hover { border-color: var(--accent-orange); }
.featured-slide:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.featured-slide .card-thumb { aspect-ratio: 16 / 9; height: 100%; }
.featured-slide .thumb-play { width: 56px; height: 56px; }

/* Muted preview that plays over the cover while hovering */
.thumb-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.thumb-preview.is-on { opacity: 1; }

.featured-body {
  align-self: center;
  padding: 32px;
}

.featured-body h3 {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: var(--heading-weight);
  font-style: var(--heading-style);
  text-transform: var(--heading-case);
  letter-spacing: calc(-0.05em + var(--heading-spacing));
  line-height: 1;
}

.featured-body .card-meta {
  margin: 0 0 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  opacity: 0.7;
}

.featured-teaser { margin: 0; color: var(--text-dim); }

.featured-slide:hover .view-more { color: var(--accent-orange); }

.featured-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

.featured.is-single .featured-controls { display: none; }

.featured-dots { display: flex; gap: 8px; }

.featured-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}

.featured-dot[aria-current="true"] { width: 28px; background: var(--accent-orange); }

.featured-arrows { display: flex; gap: 10px; }

.featured-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.featured-arrow:hover { border-color: var(--accent-orange); background: var(--accent-orange); color: var(--bg); }

.featured-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 760px) {
  .featured-slide { display: block; }
  /* Stacked: the image keeps its own 16:9 height instead of filling the slide */
  .featured-slide .card-thumb { height: auto; }
  .featured-body { padding: 20px; }
}

.work-card.is-hidden { display: none; }

/* Draft projects only show while the admin panel is open */
.work-card.is-draft { opacity: 0.55; outline: 2px dashed var(--border); outline-offset: -2px; }
.work-card.is-draft .card-thumb { position: relative; }
.work-card.is-draft .card-thumb::after {
  content: "Draft";
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-orange);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Parts removed in the admin panel, and texts that were emptied */
.is-removed,
[data-text].is-empty { display: none !important; }

/* About without its photo: the text can use the full width */
.about-photo.is-removed ~ .about-inner .about-text { max-width: var(--prose); }
.about:has(.about-photo.is-removed) { min-height: 0; padding-top: 90px; }

/* Social/contact links with no address in content/site.js */
[data-link][hidden] { display: none !important; }

/* --tile: the category's colour (admin: Work tab, Categories), shown when there's no cover image */
.card-thumb {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tile, var(--accent-dark));
}

/* Cards with a real thumbnail image */
.card-thumb.has-image { position: relative; overflow: hidden; }

.card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.work-card:hover .card-thumb img { transform: scale(1.04); }

.thumb-play {
  position: absolute;
  /* Corner placement so it doesn't cover the thumbnail's subject */
  left: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(5, 7, 10, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.thumb-play svg { width: 18px; height: 18px; margin-left: 3px; fill: #fff; }

.work-card:hover .thumb-play { background: var(--accent-orange); border-color: var(--accent-orange); }

.thumb-icon {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  opacity: 0.85;
}

.thumb-icon.is-filled { fill: #fff; stroke: none; }

.card-body { padding: 20px; }

.card-tag {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-orange);
  font-weight: 700;
  margin-bottom: 8px;
}

.card-body h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: var(--heading-weight);
  font-style: var(--heading-style);
  text-transform: var(--heading-case);
  letter-spacing: calc(-0.05em + var(--heading-spacing));
  line-height: 1.1;
}

.card-body p {
  margin: 0;
  color: var(--text-dim);
  font-size: calc(0.92rem * var(--text-size));
}

/* Client · Year · number of videos */
.card-body .card-meta {
  margin: -2px 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  opacity: 0.7;
}

.view-more {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}

.work-card:hover .view-more,
.work-card:focus-visible .view-more {
  color: var(--accent-orange);
}

/* Toolkit */
.toolkit {
  margin: 0;
  max-width: 760px;
  border-top: 1px solid var(--border);
}

.toolkit-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: center;
  padding-block: 16px;
  border-bottom: 1px solid var(--border);
}

.toolkit dt {
  font-size: 0.85rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-orange);
}

.toolkit dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0.4em;
}

@media (max-width: 520px) {
  .toolkit-row { grid-template-columns: 1fr; gap: 10px; }
}

/* Showreel */
.reel { padding-block: 90px; border-top: 1px solid var(--border); background: var(--bg); }

.reel-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}

.reel-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.reel-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-dim);
  font-size: 0.95rem;
}

.reel-placeholder .thumb-icon { stroke: var(--accent-orange); }

/* Experience */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--border);
  max-width: 760px;
}

.timeline-item { position: relative; padding-bottom: 36px; }
.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-orange);
  border: 3px solid var(--bg-alt);
}

.timeline-date {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-orange);
  font-weight: 600;
  margin-bottom: 6px;
}

/* One step lighter than the other headings */
.timeline-item h3 { margin: 0 0 6px; font-size: 1.2rem; font-weight: var(--heading-lighter); font-style: var(--heading-style); letter-spacing: calc(-0.03em + var(--heading-spacing)); }
.timeline-org { color: var(--text-dim); font-weight: 500; }
.timeline-org::before { content: "· "; }
.timeline-item p { margin: 0; color: var(--text-dim); }

/* About */
.about {
  --about-top: 56px;
  /* The photo's width (admin: its size), and how far it sits in from the screen edge (a card or arch) */
  --photo-w: 42vw;
  --photo-inset: 0px;
  position: relative;
  overflow: hidden;
  display: flex;
  /* Text sits at the top so the photo can line up with the ABOUT heading */
  align-items: flex-start;
  /* Tall enough for the photo (4:5), and no taller */
  min-height: min(calc(var(--photo-w) * 1.25 + var(--about-top) * 2), 1040px);
  padding-top: var(--about-top);
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}

/* Photo fills the right side edge to edge */
.about-photo {
  position: absolute;
  /* Starts level with the top of the ABOUT heading */
  top: var(--about-top);
  right: 0;
  /* Portrait frame, no longer stretched to the bottom of the section */
  width: var(--photo-w);
  aspect-ratio: 4 / 5;
  max-height: calc(100% - var(--about-top) * 2);
  overflow: hidden;
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hidden until About scrolls into view, then fades and slides in (see js/main.js) */
.about-photo.is-pending {
  opacity: 0;
  transform: translateX(80px);
  /* Hide instantly; only the reveal is animated */
  transition: none;
}

/* Orange strip along the photo's inner edge */
.about-photo::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 6px;
  /* Its colour: admin, the photo's Accent colour */
  background: var(--photo-accent, var(--accent-orange));
}

/* The part of the photo in view: its focus point stays put, and zooming grows around it */
.about-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-x, 50%) var(--photo-y, 40%);
  transform: scale(var(--photo-zoom, 1));
  transform-origin: var(--photo-x, 50%) var(--photo-y, 40%);
}

/* Its size (admin: on the photo, or the About editor) */
.about[data-photo-size="medium"] { --photo-w: 36vw; }
.about[data-photo-size="small"] { --photo-w: 30vw; }

/* Card and arch: in from the screen edge, lined up with the page, with rounded corners and a soft shadow */
.about:is([data-photo-frame="card"], [data-photo-frame="arch"]) { --photo-inset: max(24px, (100vw - 1072px) / 2); --photo-gap: 24px; }
.about:is([data-photo-frame="card"], [data-photo-frame="arch"]) .about-photo {
  right: var(--photo-inset);
  border-radius: var(--radius);
  --photo-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  box-shadow: var(--photo-shadow);
}
.about[data-photo-frame="arch"] .about-photo { border-radius: 999px 999px var(--radius) var(--radius); }

/* The accent strip: along the inner edge (above), a block offset behind the photo, or none. The block is
   a solid shadow, so the frame still crops a zoomed photo. */
.about:is([data-photo-strip="offset"], [data-photo-strip="none"]) .about-photo::before { content: none; }
.about[data-photo-strip="offset"] .about-photo { box-shadow: -18px 18px 0 var(--photo-accent, var(--accent-orange)), var(--photo-shadow, 0 0 0 transparent); }
.about[data-photo-strip="offset"][data-layout="photo-left"] .about-photo { box-shadow: 18px 18px 0 var(--photo-accent, var(--accent-orange)), var(--photo-shadow, 0 0 0 transparent); }

/* Text beside it lined up with the photo's middle instead of its top */
.about[data-photo-align="center"] { align-items: center; padding-bottom: var(--about-top); }
.about[data-photo-align="center"] .about-photo { top: 50%; translate: 0 -50%; }

.about-inner { position: relative; z-index: 1; }
/* The container is as wide as the page and lies over the photo: only the text itself takes the mouse */
.about-inner { pointer-events: none; }
.about-text { pointer-events: auto; }

/* Text stays in the dark space left of the photo */
.about-text { max-width: min(var(--prose), calc(100vw - var(--photo-w) - var(--photo-inset) - max(24px, (100vw - 1072px) / 2) - 32px - var(--photo-gap, 0px))); }

@media (max-width: 760px) {
  .about {
    display: block;
    min-height: 0;
    padding-top: 0;
  }

  .about-photo::before {
    top: auto;
    right: 0;
    width: auto;
    height: 6px;
  }

  .about-photo {
    position: relative;
    top: 0;
    width: 100%;
    height: min(115vw, 600px);
    margin-bottom: 48px;
  }

  .about-text { max-width: none; }

  .about[data-photo-align="center"] .about-photo { top: 0; translate: none; }
  .about:is([data-photo-frame="card"], [data-photo-frame="arch"]) .about-photo { right: auto; left: auto; width: auto; margin-inline: 24px; }

  /* Shorter fade so the smaller phone photo isn't mostly faded out */
  .about-photo.is-pending { transform: translateY(40px); }
}

.about-text p { color: var(--text-dim); }

.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0.4em;
  margin-top: 24px;
}

/* Skills and tools read as a plain comma-separated list */
.skill-tag {
  font-size: 0.95rem;
  color: var(--text);
}

/* (only between tags: not after the last one, even with editing extras after it) */
.skill-tag:has(+ .skill-tag)::after {
  content: ",";
  color: var(--text-dim);
}

/* Experience and Toolkit, and Text sections added in the admin panel */
.experience-section,
.toolkit-section,
.custom-section { padding-block: 90px; border-top: 1px solid var(--border); background: var(--bg); }

.custom-text { max-width: var(--prose); }

/* Text with simple formatting (bold, italic, links, lists) typed in the admin panel */
.rich-text p,
.rich-text ul { margin: 0 0 16px; color: var(--text-dim); white-space: pre-line; }
.rich-text ul { padding-left: 1.2em; white-space: normal; }
.rich-text li { margin-bottom: 6px; }
.rich-text strong { color: var(--text); }
/* Letter spacing on chosen words: [[tight:…]], [[wide:…]], [[wider:…]] */
.ls-tight { letter-spacing: -0.04em; }
.ls-wide { letter-spacing: 0.08em; }
.ls-wider { letter-spacing: 0.2em; }
.rich-text > :last-child { margin-bottom: 0; }
.text-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-orange); text-underline-offset: 3px; }
.text-link:hover { color: var(--accent-orange); }
.rich-text.is-two-columns { columns: 2; column-gap: 48px; }
.rich-text.is-two-columns > * { break-inside: avoid; }
/* Two columns need the room: the text column goes wider than one reading width */
.custom-text:has(.is-two-columns) { max-width: none; }

.custom-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Centred: the title, intro and text in the middle */
.custom-section.is-centered .custom-text { margin-inline: auto; text-align: center; }
.custom-section.is-centered .custom-buttons { justify-content: center; }
.custom-section.is-centered .rich-text ul { display: inline-block; text-align: left; }
.custom-section.is-centered .section-title::before { margin-inline: auto; }

@media (max-width: 760px) {
  .rich-text.is-two-columns { columns: 1; }
}

/* Gallery: pictures in a grid (square, wide or their own shape); clicking one opens it big */
.gallery-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; }
.gallery-grid.shape-natural { display: block; columns: var(--cols, 3); column-gap: 14px; }
.gallery-grid.shape-natural .gallery-item { break-inside: avoid; margin-bottom: 14px; }
.gallery-item { margin: 0; }

.gallery-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
}

.gallery-open img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.shape-square .gallery-open { aspect-ratio: 1; }
.shape-wide .gallery-open { aspect-ratio: 16 / 10; }
.gallery-open:hover img { transform: scale(1.04); }
.gallery-item figcaption { margin-top: 8px; color: var(--text-dim); font-size: calc(0.9rem * var(--text-size)); }

@media (max-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gallery-grid.shape-natural { columns: 2; column-gap: 8px; }
}

/* Video section: same frame as the showreel */
.type-video video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.video-caption { margin: 14px 0 0; color: var(--text-dim); font-size: calc(0.92rem * var(--text-size)); }

/* Testimonials */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }

.quote-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.quote-card blockquote { margin: 0; }
.quote-card blockquote::before { content: "\201C"; display: block; height: 0.6em; color: var(--accent-orange); font-size: 3.2rem; font-weight: 900; line-height: 1; }
.quote-card .rich-text p { color: var(--text); font-size: calc(1.05rem * var(--text-size)); }
.quote-person { display: flex; align-items: center; gap: 12px; }
.quote-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.quote-names { display: grid; line-height: 1.3; }
.quote-names span { color: var(--text-dim); font-size: calc(0.88rem * var(--text-size)); }
.custom-section.is-centered .quote-card { text-align: left; }

/* Logos: a row of client logos, in colour, grey until hovered, or all white or black */
.logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 56px; }
.logo-item { display: block; }
.logo-item img { display: block; max-width: 150px; max-height: 56px; width: auto; height: auto; object-fit: contain; transition: filter 0.2s ease, opacity 0.2s ease; }
.logos-grey .logo-item img { filter: grayscale(1); opacity: 0.65; }
.logos-grey .logo-item:hover img { filter: none; opacity: 1; }
.logos-white .logo-item img { filter: brightness(0) invert(1); opacity: 0.8; }
.logos-black .logo-item img { filter: brightness(0); opacity: 0.75; }
.logos-white a.logo-item:hover img,
.logos-black a.logo-item:hover img { opacity: 1; }

/* Numbers: a few big figures with a line under each */
.number-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 28px; }
.number-item { display: grid; gap: 6px; }
.number-value { color: var(--accent-orange); font-family: var(--font-heading); font-size: clamp(2.4rem, 6vw, 4rem); font-weight: var(--heading-weight); font-style: var(--heading-style); line-height: 1; letter-spacing: calc(-0.05em + var(--heading-spacing)); }
.number-label { color: var(--text-dim); }
.custom-section.is-centered .number-item { justify-items: center; text-align: center; }

/* FAQ: questions that open to show their answer */
.faq-list { display: grid; max-width: 820px; border-top: 1px solid var(--border); }
.custom-section.is-centered .faq-list { margin-inline: auto; text-align: left; }
.faq-item { border-bottom: 1px solid var(--border); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 1.1rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker { display: none; }
/* A round + button beside each question; it turns into × when open */
.faq-item summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--accent-orange);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease, border-color 0.15s ease, background 0.15s ease;
}
.faq-item summary:hover::after { border-color: var(--accent-orange); background: var(--surface); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer { padding: 0 0 22px; }

/* Call to action: one big line and buttons */
.cta-line { margin: 0; font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.6rem); font-weight: var(--heading-weight); font-style: var(--heading-style); line-height: 1.05; letter-spacing: calc(-0.05em + var(--heading-spacing)); }
.cta-sub { margin: 18px 0 0; color: var(--text-dim); font-size: calc(1.1rem * var(--text-size)); }
.type-cta .custom-inner { display: grid; justify-items: start; }
.type-cta.is-centered .custom-inner { justify-items: center; text-align: center; }
.type-cta .custom-buttons { margin-top: 32px; }
.type-cta .custom-text:empty { display: none; }

.custom-image { margin: 40px 0 0; }

.custom-image img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
}

/* Picture beside the text instead of below it */
.custom-section.has-side-image .custom-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.custom-section.has-side-image .custom-image { margin: 0; }

@media (max-width: 760px) {
  .custom-section.has-side-image .custom-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* Section look from the admin panel (Page tab): background, title style and size */
main > section.bg-main { background: var(--bg); }
main > section.bg-alt { background: var(--bg-alt); }

/* Small title: the heading with the accent bar, instead of the big title with the dot */
.title-small .section-title {
  font-size: calc(clamp(1.6rem, 3.6vw, 2.4rem) * var(--title-scale, 1));
  line-height: 1;
  margin: 0 0 28px;
  letter-spacing: calc(-0.06em + var(--heading-spacing));
}

.title-small .section-title::after { content: none; }

.title-small .section-title::before {
  content: "";
  display: block;
  width: 48px;
  height: 5px;
  margin-bottom: 16px;
  border-radius: 3px;
  background: var(--accent-orange);
}

/* Your own background colour or picture; the text turns light or dark to read on it */
main > section.bg-custom { background-size: cover; background-position: center; }
main > section.tone-light { --text: #f5f6f8; --text-dim: #c4cbd6; --border: rgba(255, 255, 255, 0.18); --surface: rgba(255, 255, 255, 0.07); color: var(--text); }
main > section.tone-dark { --text: #0d1016; --text-dim: #3f4754; --border: rgba(0, 0, 0, 0.16); --surface: rgba(0, 0, 0, 0.05); color: var(--text); }

/* Width of the content, and space above and below */
main > section.width-narrow .container { max-width: 780px; }
main > section.width-wide .container { max-width: 1440px; }
main > section.width-full .container { max-width: none; padding-inline: clamp(16px, 4vw, 56px); }
main > section.space-compact { padding-block: 48px; }
main > section.space-roomy { padding-block: 150px; }

@media (max-width: 760px) {
  main > section.space-compact { padding-block: 36px; }
  main > section.space-roomy { padding-block: 100px; }
}

/* Shown only on phones or only on bigger screens (sections and their menu links) */
@media (max-width: 760px) {
  .only-desktop { display: none !important; }
}

@media (min-width: 761px) {
  .only-phone { display: none !important; }
}

/* Blocks: a section's parts, put in another order or adjusted in the admin panel (see applyBlocks in js/main.js) */
[data-blocks].has-blocks { display: flex; flex-direction: column; }
[data-blocks].has-blocks > [data-block] { flex: none; }
[data-block].align-left { text-align: left; margin-right: auto; justify-content: flex-start; }
[data-block].align-center { text-align: center; margin-inline: auto; justify-content: center; }
[data-block].align-right { text-align: right; margin-left: auto; margin-right: 0; justify-content: flex-end; }
.section-title.align-center::before { margin-inline: auto; }
.section-title.align-right::before { margin-left: auto; }
[data-blocks].has-blocks > .align-center { align-self: center; }
[data-blocks].has-blocks > .align-right { align-self: flex-end; }
[data-block].width-medium { max-width: 760px; }
[data-block].width-narrow { max-width: 520px; }
[data-blocks].has-blocks > .width-medium,
[data-blocks].has-blocks > .width-narrow { width: 100%; }

/* Layouts (admin panel: Look and layout) */
/* About: photo on the left, or above the text */
.about[data-layout="photo-left"] .about-photo { right: auto; left: var(--photo-inset); }
.about[data-layout="photo-left"] .about-photo::before { left: auto; right: 0; }
.about[data-layout="photo-left"] .about-photo.is-pending { transform: translateX(-80px); }
.about[data-layout="photo-left"] .about-text { margin-left: auto; }

.about[data-layout="photo-above"] { display: block; min-height: 0; padding-top: 0; }
.about[data-layout="photo-above"] .about-photo { position: relative; top: 0; width: 100%; height: min(56vw, 560px); max-height: none; aspect-ratio: auto; margin-bottom: 56px; }
.about[data-layout="photo-above"] .about-photo::before { top: auto; right: 0; width: auto; height: 6px; }
.about[data-layout="photo-above"] .about-photo.is-pending { transform: translateY(40px); }
.about[data-layout="photo-above"] .about-text { max-width: var(--prose); }
.about[data-layout="photo-above"][data-photo-align="center"] .about-photo { top: 0; translate: none; }
.about[data-layout="photo-above"]:is([data-photo-frame="card"], [data-photo-frame="arch"]) .about-photo { width: auto; margin-inline: var(--photo-inset); }

/* Showreel and Video sections: title and intro beside the video */
@media (min-width: 900px) {
  #reel[data-layout="side"] > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    column-gap: 56px;
    align-items: start;
  }

  #reel[data-layout="side"] > .container > :not(.reel-frame) { grid-column: 1; }
  #reel[data-layout="side"] > .container > .reel-frame { grid-column: 2; grid-row: 1 / span 4; }
  #reel[data-layout="side"] .section-title { font-size: calc(clamp(2.4rem, 5vw, 4rem) * var(--title-scale, 1)); }

  .type-video[data-layout="side"] .custom-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    column-gap: 56px;
    align-items: start;
  }

  .type-video[data-layout="side"] .custom-inner > .custom-text { grid-column: 1; grid-row: 1 / span 4; }
  .type-video[data-layout="side"] .custom-inner > :not(.custom-text) { grid-column: 2; }
  .type-video[data-layout="side"] .section-title { font-size: calc(clamp(2.4rem, 5vw, 4rem) * var(--title-scale, 1)); }
}

/* Contact: the form on the right, the title, intro and email on the left */
@media (min-width: 900px) {
  .contact[data-layout="side"] .contact-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-auto-flow: row dense;
    column-gap: 72px;
    align-items: start;
    max-width: 1120px;
  }

  .contact[data-layout="side"] .contact-inner > * { grid-column: 1; }
  .contact[data-layout="side"] .contact-inner > .subsection-title { grid-column: 2; grid-row: 1; }
  .contact[data-layout="side"] .contact-inner > .contact-form { grid-column: 2; grid-row: 2 / span 4; }
  .contact[data-layout="side"] .section-title { font-size: calc(clamp(2.4rem, 5vw, 4rem) * var(--title-scale, 1)); }
}

/* Work: a fixed number of cards per row */
@media (min-width: 900px) {
  [data-layout="cols-2"] .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-layout="cols-3"] .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-layout="cols-4"] .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}

/* Testimonials: one big quote per row */
.type-quotes[data-layout="large"] .quote-grid { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.type-quotes[data-layout="large"] .quote-card .rich-text p { font-size: calc(clamp(1.2rem, 2.2vw, 1.6rem) * var(--text-size)); line-height: 1.45; }
.type-quotes.is-centered[data-layout="large"] .quote-grid { margin-inline: auto; }

/* Text section: picture on the left, or above the text */
.custom-section.image-left .custom-image { order: -1; }
.custom-section.image-above .custom-inner { display: flex; flex-direction: column; }
.custom-section.image-above .custom-image { order: -1; margin: 0 0 40px; }

/* A small-titled section right under one with the same background reads as part of it */
main > section.is-joined { border-top: 0; padding-top: 0; }

/* Built-in sections taken off the page in the admin panel */
main > section.is-off-page { display: none !important; }

/* Contact */
.contact { border-top: 1px solid var(--border); background: var(--bg); }

/* A bit wider than body text so Send, LinkedIn and the icons fit on one row */
.contact-inner { max-width: 720px; }

.form-row {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-row label {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.form-row input,
.form-row textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
}

.form-row input:focus-visible,
.form-row textarea:focus-visible,
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.contact-form .btn-primary { border: none; }

.form-note {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* After sending (or while it sends): a line saying how it went */
.form-status { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius); background: var(--surface); font-size: 0.92rem; }
.form-status.is-ok { color: #6ee7a0; }
.form-status.is-error { color: var(--accent-orange); }
.form-status.is-busy { color: var(--text-dim); }
.form-status a,
.form-copy { color: var(--text); text-decoration: underline; }
.form-copy { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }

/* The spam trap: out of sight, and skipped by keyboards and screen readers */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Social icons in the button row under the form, sized to match the buttons */
.contact-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.contact-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; /* same height as the Send and LinkedIn buttons */
  height: 52px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.contact-socials svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Line icon for custom links */
.contact-socials svg.icon-line { fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Icons loaded as a shape (Simple Icons), painted in the text colour */
.icon-mask {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.contact-socials a:hover,
.contact-socials a:focus-visible {
  transform: translateY(-3px);
  background: var(--accent-orange);
  border-color: var(--accent-orange);
  color: var(--bg);
}

.contact-alt {
  margin-top: 28px;
  font-size: 0.9rem;
}

.contact-alt a.email-link { color: var(--accent); }
.contact-alt a.email-link:hover { color: var(--accent-orange); text-decoration: underline; }

.linkedin-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.linkedin-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Project detail modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 3, 5, 0.75);
  backdrop-filter: blur(4px);
  animation: overlay-fade 0.15s ease;
}

.modal-overlay[hidden] { display: none; }

@keyframes overlay-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  /* Still scrolls on short screens, but without a visible scrollbar */
  scrollbar-width: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  animation: modal-pop 0.18s ease;
}

.modal::-webkit-scrollbar { display: none; }

@keyframes modal-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(5, 7, 10, 0.6);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.modal-close:hover { border-color: var(--accent-orange); color: var(--accent-orange); }

.modal-thumb {
  background: var(--tile, var(--accent-dark));
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Wider pop-up when it holds a video */
.modal:has(.has-media) { max-width: 880px; }

.modal-thumb.has-media { position: relative; background: #000; overflow: hidden; }

/* Pictures fit inside the 16:9 viewer without being cropped */
.modal-thumb .modal-picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Previous / next over the viewer when a project has several pictures or videos */
.modal-arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(5, 7, 10, 0.55);
  color: #fff;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.modal-arrow:hover { opacity: 1; background: var(--accent-orange); border-color: var(--accent-orange); }
.modal-prev { left: 12px; }
.modal-next { right: 12px; }

.modal-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Only pictures: smaller square thumbnails, no labels */
.modal-videos.is-pictures .modal-video { flex-basis: 72px; }
.modal-videos.is-pictures .modal-video img { aspect-ratio: 1; }

.modal-thumb video,
.modal-thumb iframe {
  display: block;
  border: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.modal-thumb .thumb-icon {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  opacity: 0.85;
}

.modal-thumb .thumb-icon.is-filled { fill: #fff; stroke: none; }

/* Picker for projects with several videos */
.modal-videos {
  display: flex;
  gap: 12px;
  padding: 16px 28px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.modal-videos[hidden] { display: none; }
.modal-videos::-webkit-scrollbar { display: none; }

.modal-video {
  flex: 0 0 140px;
  display: grid;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.modal-video img,
.modal-video-blank {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--accent-dark);
  transition: border-color 0.15s ease;
}

.modal-video:hover,
.modal-video[aria-pressed="true"] { color: var(--text); }
.modal-video:hover img { border-color: var(--border); }
.modal-video[aria-pressed="true"] img,
.modal-video[aria-pressed="true"] .modal-video-blank { border-color: var(--accent-orange); }

.modal-body { padding: 28px; }

.modal-body .modal-meta {
  margin: -6px 0 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  opacity: 0.7;
}

.modal-body h3 {
  margin: 0 0 14px;
  font-size: 1.6rem;
  font-weight: var(--heading-weight);
  font-style: var(--heading-style);
  text-transform: var(--heading-case);
  letter-spacing: calc(-0.06em + var(--heading-spacing));
  line-height: 1;
}

.modal-body p {
  color: var(--text-dim);
  margin: 0 0 20px;
}

.modal-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0.4em;
  margin-bottom: 24px;
}

.modal-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.modal-links .btn { padding: 11px 22px; font-size: 0.9rem; }

/* A project as a page of its own (admin: Work section → Opening a project): the pop-up's content takes the
   place of the sections, between the menu and the footer, with a Back button */
html.is-project-page main { display: none; }

html.is-project-page .modal-overlay {
  position: static;
  display: block;
  padding: 40px 24px 80px;
  background: none;
  backdrop-filter: none;
  animation: none;
}

html.is-project-page .modal {
  max-width: 1000px;
  max-height: none;
  margin: 0 auto;
  overflow: visible;
  background: none;
  border: 0;
  animation: none;
}

html.is-project-page .modal-close {
  position: static;
  width: auto;
  height: auto;
  margin-bottom: 20px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}

html.is-project-page .modal-thumb { border-radius: var(--radius); overflow: hidden; }
html.is-project-page .modal-videos { padding-left: 0; padding-right: 0; }
html.is-project-page .modal-body { padding: 28px 0 0; }
html.is-project-page .modal-body h3 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
html.is-project-page .modal-body p { max-width: 70ch; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 28px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap; /* on a narrow phone the links go under the name instead of past the edge */
  justify-content: space-between;
  align-items: center;
  gap: 8px 20px;
  color: var(--text-dim);
  font-size: 0.88rem;
}

.footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }

.footer-inner a:hover { color: var(--accent-orange); }

/* Responsive */
@media (max-width: 980px) {
  .main-nav {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 16px;
    display: none;
  }

  .main-nav.is-open { display: flex; }

  .main-nav a { padding: 12px 0; width: 100%; }

  .nav-toggle { display: flex; }

  .lang-menu { display: none; }

  .nav-langs {
    display: flex;
    gap: 20px;
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }

  .main-nav .nav-langs a {
    width: auto;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-dim);
  }

  .main-nav .nav-langs a::after { content: none; }
  .main-nav .nav-langs a[aria-current="true"] { color: var(--text); }
}

@media (max-width: 720px) {
}

@media (max-width: 520px) {
  /* Room for logo, language switch and menu button on narrow phones */
  .header-right { gap: 6px; }
}

@media (max-width: 359px) {
  .logo { font-size: 1rem; }
}

/* Only in the browser that just saved in the admin panel, until the live site has caught up (js/main.js) */
.save-note {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 800;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: min(380px, calc(100% - 32px));
  padding: 12px 14px;
  border: 1px solid var(--accent-orange);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.45;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.save-note button {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-dim);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}