:root {
  --ink: #1c1b19;
  --ink-soft: #3d3a35;
  --paper: #f4f1ea;
  --paper-deep: #ebe6dc;
  --accent: #2f5d4a;
  --accent-hover: #244a3b;
  --line: #c4beb3;
  --radius: 2px;
  /* Layout proportion: golden ratio. Every two-column split on the site uses
     these two grid tracks, so the page rhythm stays the same everywhere. */
  --ratio-minor: 38.2fr;
  --ratio-major: 61.8fr;
  --photo-height: 260px;
  --font-display: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;
  /* Soft rules between split columns (photo | text, diagram | copy, etc.). */
  --split-gap: 1.35rem;
  --split-gutter: calc(var(--split-gap) + 0.65rem);
  /* Cards and detail leads: photo and text sit closer than homepage field-rows. */
  --split-gutter-cards: 0.85rem;
  --split-frame-padding: 0.85rem;
  --split-rule-v: linear-gradient(
    to bottom,
    transparent 0%,
    var(--line) 14%,
    var(--line) 86%,
    transparent 100%
  );
  --split-rule-h: linear-gradient(
    to right,
    transparent 0%,
    var(--line) 8%,
    var(--line) 92%,
    transparent 100%
  );
  /* Lifted panels / photos — tuned so depth reads on WebKit and touch (not only Chrome). */
  --split-panel-shadow:
    0 1px 2px rgba(28, 27, 25, 0.12),
    0 6px 18px rgba(28, 27, 25, 0.1),
    0 0 0 1px rgba(196, 190, 179, 0.28);
  --photo-pop-shadow:
    0 1px 2px rgba(28, 27, 25, 0.12),
    0 6px 18px rgba(28, 27, 25, 0.1),
    0 0 0 1px rgba(196, 190, 179, 0.22);
  --surface-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 1px 3px rgba(28, 27, 25, 0.08),
    0 6px 16px rgba(28, 27, 25, 0.09),
    0 0 0 1px rgba(196, 190, 179, 0.26);
  --panel-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(28, 27, 25, 0.07),
    0 6px 18px rgba(28, 27, 25, 0.06),
    0 22px 58px rgba(28, 27, 25, 0.12),
    0 0 0 1px rgba(196, 190, 179, 0.34);
  /* Sticky nav: same family as the panel, less depth so it does not out-float the content block. */
  --nav-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 1px 2px rgba(28, 27, 25, 0.05),
    0 4px 14px rgba(28, 27, 25, 0.045),
    0 0 0 1px rgba(196, 190, 179, 0.26);
  --nav-shadow-mobile:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 1px 6px rgba(28, 27, 25, 0.05),
    0 8px 22px rgba(28, 27, 25, 0.06),
    0 0 0 1px rgba(196, 190, 179, 0.28);
  --gallery-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 1px 2px rgba(28, 27, 25, 0.06),
    0 8px 22px rgba(28, 27, 25, 0.09),
    0 0 0 1px rgba(196, 190, 179, 0.32);
  /* Buttons: light top edge + soft drop + a short “base” so they read lifted, not flat. */
  --btn-shadow-primary:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(28, 27, 25, 0.12),
    0 2px 0 rgba(31, 61, 49, 0.72),
    0 4px 10px rgba(28, 27, 25, 0.14);
  --btn-shadow-primary-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1px 2px rgba(28, 27, 25, 0.1),
    0 2px 0 rgba(31, 61, 49, 0.65),
    0 5px 12px rgba(28, 27, 25, 0.16);
  --btn-shadow-primary-active:
    inset 0 1px 2px rgba(20, 40, 32, 0.35),
    0 1px 2px rgba(28, 27, 25, 0.08);
  --btn-shadow-secondary:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 1px 2px rgba(28, 27, 25, 0.08),
    0 2px 0 rgba(196, 190, 179, 0.75),
    0 4px 10px rgba(28, 27, 25, 0.09);
  --btn-shadow-secondary-hover:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(28, 27, 25, 0.09),
    0 2px 0 rgba(180, 173, 161, 0.8),
    0 5px 12px rgba(28, 27, 25, 0.11);
  --btn-shadow-secondary-active:
    inset 0 1px 2px rgba(28, 27, 25, 0.06),
    0 1px 2px rgba(28, 27, 25, 0.06);
}

* { box-sizing: border-box; }

html {
  color-scheme: light;
}

a:focus:not(:focus-visible) {
  outline: none;
}

.site-nav a:focus-visible,
.site-nav__toggle:focus-visible,
.site-nav__panel a:focus-visible,
.btn:focus-visible,
.site-footer-instagram:focus-visible,
.site-footer-legal a:focus-visible,
.legal-page a:focus-visible,
.journey-content a:focus-visible:not(.project-card a):not(.btn) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

/* Calm page backdrop (no photo) — experiment; revert to mooi.jpg in git if needed. */
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  background-color: var(--paper-deep);
  background-image:
    radial-gradient(ellipse 110% 75% at 0% -5%, rgba(47, 93, 74, 0.07) 0%, transparent 58%),
    radial-gradient(ellipse 85% 65% at 100% 15%, rgba(47, 93, 74, 0.05) 0%, transparent 52%),
    radial-gradient(ellipse 95% 55% at 50% 105%, rgba(196, 190, 179, 0.4) 0%, transparent 48%),
    linear-gradient(168deg, #f7f4ee 0%, var(--paper) 42%, #e8e3d8 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.065;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
}

@media (max-width: 719px) {
  body {
    background-attachment: scroll;
  }

  body::before {
    position: absolute;
    height: 100%;
    min-height: 100vh;
  }
}

.wrap {
  position: relative;
  z-index: 1;
  width: min(640px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3rem 0 4rem;
}

.wrap--wide {
  width: min(920px, calc(100% - 2rem));
}

.site-panel {
  position: relative;
  padding: 2.5rem 2.25rem 2.75rem;
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: var(--panel-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  isolation: isolate;
}

/* Grain on the panel surface only — sits under content; solid cards/buttons stay clean. */
.site-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
}

.site-panel > .journey-content {
  z-index: 2;
}

.site-panel.journey-frame .journey-border {
  inset: 14px;
}

@media (max-width: 719px) {
  .wrap,
  .wrap--wide {
    width: min(920px, calc(100% - 1.35rem));
  }

  .site-panel {
    padding: 2rem 1.35rem 2.35rem;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fff;
    box-shadow: var(--panel-shadow);
  }

  .site-panel.journey-frame .journey-border {
    inset: 10px;
  }

  .site-nav {
    padding: 0.6rem 1.35rem 0.7rem;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--nav-shadow-mobile);
  }
}

@media (prefers-reduced-transparency: reduce) {
  body::before {
    opacity: 0.035;
  }

  .site-panel {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--panel-shadow);
  }

  .site-panel::before {
    opacity: 0.018;
  }

  .site-nav {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-nav::before {
    opacity: 0.018;
  }
}

header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}

header.compact {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
}

.brand {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 0.55rem;
}

.brand--sm {
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.compact .brand--sm + .slogan {
  margin: -0.15rem 0 0.85rem;
}

.logo-lockup {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.15rem;
}

.logo-mark {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: block;
}

.logo-mark--nav {
  width: 22px;
  height: 22px;
}

.logo-wordmark {
  min-width: 0;
}

.logo-lockup .brand {
  margin: 0 0 0.35rem;
}

.logo-lockup .slogan {
  margin: 0;
}

.logo-lockup--card .logo-mark {
  width: 10mm;
  height: 10mm;
}

.site-nav__home {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  vertical-align: middle;
  color: inherit;
}

.site-nav__bar .site-nav__home {
  margin-top: 0;
  align-self: center;
}

.site-nav__home:hover,
.site-nav__home:focus-visible {
  color: inherit;
}

.site-nav__home:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 50%;
}

.logo-hub-wrap {
  display: block;
  border-radius: 50%;
  transition: transform 0.45s cubic-bezier(0.34, 1.15, 0.64, 1);
}

.logo-hub-wrap--nav {
  width: 2.1rem;
  height: 2.1rem;
  transform: translateY(0);
  animation: logo-hub-float 5.5s ease-in-out infinite;
}

/* Nav size: heavier strokes, ink-forward colour, tight shadow (soft glow reads muddy small). */
.logo-hub-wrap--nav .logo-hub__ring {
  stroke: #1f4d3d;
  stroke-width: 2.5;
  paint-order: stroke fill;
  filter: drop-shadow(0 0 0.4px rgba(28, 27, 25, 0.55))
    drop-shadow(0 2px 3px rgba(28, 27, 25, 0.22))
    drop-shadow(0 6px 12px rgba(47, 93, 74, 0.2));
}

.logo-hub-wrap--nav .logo-hub__journey {
  filter: none;
}

.logo-hub-wrap--nav .logo-hub__journey :is(circle, polyline, path) {
  stroke: #1c1b19;
  stroke-width: 1.9;
}

.logo-hub-wrap--nav .logo-hub__journey circle:first-of-type {
  fill: #ffffff;
}

.logo-hub-wrap--nav .logo-hub__journey polyline {
  stroke-dasharray: 2.75 2;
}

.logo-hub-wrap--nav .logo-hub__journey path {
  stroke: #265c48;
  stroke-width: 2;
}

.logo-hub-wrap--nav .logo-hub__journey circle:last-of-type {
  fill: #265c48;
  stroke: #265c48;
  stroke-width: 1.75;
}

.logo-mark--hub {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 50%;
  shape-rendering: geometricPrecision;
  animation: logo-hub-turn 28s linear infinite;
}

.logo-hub__ring {
  transition: filter 0.45s ease, stroke 0.35s ease;
  filter: drop-shadow(0 1px 2px rgba(28, 27, 25, 0.12))
    drop-shadow(0 4px 12px rgba(47, 93, 74, 0.22));
}

.logo-hub__journey {
  filter: drop-shadow(0 1px 1px rgba(28, 27, 25, 0.08));
}

@keyframes logo-hub-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes logo-hub-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@media (hover: hover) and (pointer: fine) {
  .site-nav__home:hover .logo-hub-wrap--nav,
  .site-nav__home:focus-visible .logo-hub-wrap--nav {
    animation: none;
    transform: translateY(-3px) scale(1.1);
  }

  .site-nav__home:hover .logo-mark--hub,
  .site-nav__home:focus-visible .logo-mark--hub {
    animation-duration: 8s;
  }

  .site-nav__home:hover .logo-hub-wrap--nav .logo-hub__ring,
  .site-nav__home:focus-visible .logo-hub-wrap--nav .logo-hub__ring {
    stroke: #2a6b52;
    filter: drop-shadow(0 0 0.45px rgba(28, 27, 25, 0.5))
      drop-shadow(0 4px 6px rgba(28, 27, 25, 0.24))
      drop-shadow(0 12px 20px rgba(47, 93, 74, 0.34));
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-mark--hub {
    animation: none;
  }

  .logo-hub-wrap--nav {
    animation: none;
    transform: none;
  }

  .site-nav__home:hover .logo-hub-wrap--nav,
  .site-nav__home:focus-visible .logo-hub-wrap--nav {
    transform: translateY(-1px) scale(1.05);
  }
}

.slogan {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lead {
  margin: 1.35rem 0 0;
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 36em;
}

.promise {
  margin: 1.15rem 0 0;
  padding: 0.75rem 0.85rem;
  border-left: 3px solid var(--accent);
  background: var(--paper-deep);
  max-width: 28em;
}

.promise strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.promise span {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

section {
  margin-bottom: 2.25rem;
}

h2 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.85rem;
}

p { margin: 0 0 0.85rem; }
p:last-child { margin-bottom: 0; }

.muted { color: var(--ink-soft); }

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  max-width: 30em;
}

.contact-list a {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  text-decoration: none;
  color: var(--ink);
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--surface-shadow);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.contact-list a:hover {
  border-color: var(--accent);
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 2px 6px rgba(28, 27, 25, 0.06),
    0 8px 18px rgba(28, 27, 25, 0.07);
}

.contact-list .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.contact-list .value {
  font-weight: 500;
  word-break: break-word;
}

.contact-list__row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--surface-shadow);
}

.contact-list__row .btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  padding: 0;
  color: var(--accent);
  background: transparent;
  box-shadow: none;
}

.contact-list__row .btn-wa svg {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
}

.contact-list__row .btn-wa:hover {
  color: var(--accent-hover);
  background: #fff;
  box-shadow: none;
  transform: none;
}

.contact-list__row .btn-wa:active {
  transform: none;
  box-shadow: none;
}

.region {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.75rem 0.85rem;
  border-left: 3px solid var(--accent);
  background: var(--paper-deep);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.15rem;
  border-radius: var(--radius);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease,
    color 0.15s ease;
}

.btn-primary {
  background: var(--accent);
  color: #f4f1ea;
  box-shadow: var(--btn-shadow-primary);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--btn-shadow-primary-hover);
}

.btn-primary:active {
  transform: translateY(1px);
  box-shadow: var(--btn-shadow-primary-active);
}

.btn-secondary {
  border: 1px solid var(--line);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--btn-shadow-secondary);
}

.btn-secondary:hover {
  background: #fff;
  box-shadow: var(--btn-shadow-secondary-hover);
}

.btn-secondary:active {
  transform: translateY(1px);
  box-shadow: var(--btn-shadow-secondary-active);
}

button.btn {
  cursor: pointer;
  appearance: none;
  font-family: var(--font-mono);
}

button.btn-primary {
  border: 0;
}

.rules {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink-soft);
}

.rules li { margin-bottom: 0.35rem; }

footer {
  margin-top: 3.75rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(196, 190, 179, 0.72);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
}

.site-footer__top .site-footer-legal {
  margin: 0;
}

.site-footer-instagram {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-left: auto;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color 0.15s ease;
}

.site-footer-instagram:hover {
  color: var(--accent);
}

.site-footer-instagram:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.site-footer-instagram__icon {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
}

.site-footer-legal {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: none;
}

.site-footer-legal a {
  color: var(--ink-soft);
  text-decoration: none;
}

.site-footer-legal a:hover {
  color: var(--accent);
}

.site-footer-legal span {
  margin: 0 0.35rem;
  color: var(--line);
}

.site-footer-tagline {
  margin: 0;
}

.legal-page h2 {
  font-size: 1.05rem;
  margin: 1.75rem 0 0.5rem;
}

.legal-page p,
.legal-page li {
  color: var(--ink-soft);
  margin: 0 0 0.65rem;
}

.legal-page ul {
  margin: 0 0 0.85rem;
  padding-left: 1.2rem;
}

.legal-page dl {
  margin: 0 0 1rem;
}

.legal-page dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.65rem;
}

.legal-page dd {
  margin: 0.15rem 0 0;
  color: var(--ink);
}

.legal-placeholder {
  color: #8a4b2e;
  font-style: italic;
}

.legal-disclaimer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.placeholder-note {
  margin-top: 1.5rem;
  padding: 0.75rem 0.85rem;
  border: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
}

.placeholder-note[hidden] { display: none; }

.lang-nav {
  position: static;
  z-index: auto;
  margin-bottom: 1.25rem;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  margin-bottom: 1.25rem;
  padding: 0.65rem 2.25rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--nav-shadow);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  isolation: isolate;
}

.site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
}

.lang-nav a,
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.lang-nav a:hover,
.site-nav a:hover { color: var(--accent); }

.lang-nav a.is-active,
.site-nav a.is-active { color: var(--ink); font-weight: 500; }

.lang-nav span {
  margin: 0 0.4rem;
  color: var(--line);
}

.site-nav__sep {
  margin: 0 0.5rem;
  color: var(--ink-soft);
  opacity: 0.55;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}

.site-nav__bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}

.site-nav__desktop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.site-nav__start {
  font-weight: 500;
}

.site-nav__menu {
  position: relative;
  display: block;
  margin-left: auto;
}

@media (min-width: 720px) {
  .site-nav__bar {
    justify-content: center;
  }

  .site-nav__sep {
    margin: 0 0.6rem;
    opacity: 0.7;
  }

  .site-nav__desktop .site-nav__menu--hub-desktop {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    vertical-align: middle;
  }

  .site-nav__menu--hub-desktop .site-nav__toggle--hub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    line-height: 0;
  }

  .site-nav__menu--hub-desktop .logo-hub-wrap--nav {
    animation: none;
    transform: none;
  }

  .site-nav__menu--hub-desktop[open] .logo-hub-wrap--nav {
    animation-play-state: paused;
  }

  .site-nav__panel--hub {
    text-align: left;
    text-transform: none;
  }

  .site-nav__menu--hub-desktop .site-nav__panel-audio {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(196, 190, 179, 0.45);
  }
}

@media (max-width: 719px) {
  .site-nav__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
  }

  .site-nav__menu {
    margin-left: 0;
  }

  .site-nav__menu--hub {
    position: relative;
    grid-column: 1;
    justify-self: start;
    align-self: center;
    display: flex;
    align-items: center;
  }

  .site-nav__toggle--hub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    line-height: 0;
  }

  /* Float reads off-centre next to text links; keep the spin only. */
  .site-nav__menu--hub .logo-hub-wrap--nav {
    animation: none;
    transform: none;
  }

  .site-nav__menu--hub[open] .site-nav__toggle--hub {
    color: inherit;
    font-weight: inherit;
  }

  .site-nav__menu--hub[open] .logo-hub-wrap--nav {
    animation-play-state: paused;
  }

  /* Same link row as desktop: centred in the bar, middot separators. */
  .site-nav__peek {
    grid-column: 2;
    justify-self: center;
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    text-align: center;
    line-height: 1.35;
  }

  .site-nav__peek a {
    white-space: nowrap;
  }

  .site-nav__panel {
    left: 0;
    right: auto;
    min-width: 12.5rem;
    max-width: min(16rem, calc(100vw - 2.7rem));
  }
}

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  color: var(--ink-soft);
  line-height: 0;
  user-select: none;
}

.site-nav__icon {
  display: block;
  width: 1rem;
  height: 1rem;
}

.site-nav__toggle::-webkit-details-marker { display: none; }

.site-nav__toggle::marker { content: ""; }

.site-nav__menu[open] .site-nav__toggle {
  color: var(--ink);
  font-weight: 500;
}

.site-nav__panel {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 50;
  margin: 0.35rem 0 0;
  padding: 0.35rem 0;
  min-width: 11.5rem;
  list-style: none;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(196, 190, 179, 0.32);
  box-shadow: var(--surface-shadow);
}

.site-nav__panel li { margin: 0; }

.site-nav__panel a {
  display: block;
  padding: 0.45rem 0.85rem;
  white-space: nowrap;
}

.site-nav__panel a:hover { background: var(--paper-deep); }

.site-nav__panel .site-nav__home {
  display: flex;
  padding: 0.55rem 0.85rem;
}

.site-nav__panel-audio {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(196, 190, 179, 0.45);
}

.site-nav__panel-audio button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.85rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: inherit;
  color: var(--accent);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.site-nav__panel-audio button:hover {
  background: var(--paper-deep);
}

.site-nav__panel-audio button.is-active {
  color: var(--ink);
  font-weight: 500;
}

.site-nav__panel-audio button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.site-nav__panel-lang {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.news-body {
  margin: 1.25rem 0 1.75rem;
}

.news-body p {
  margin: 0 0 0.85rem;
  color: var(--ink-soft);
  max-width: 42rem;
}

.news-body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.news-body a:hover {
  color: var(--accent);
}

.news-gallery {
  margin: 0 0 2rem;
}

.news-slideshow {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--gallery-shadow);
}

.news-slideshow__viewport {
  overflow: hidden;
  background: var(--paper-deep);
}

.news-slideshow__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.38s ease;
  will-change: transform;
}

.news-slideshow__slide {
  flex: 0 0 100%;
  margin: 0;
}

.news-slideshow__slide figure {
  margin: 0;
}

.news-slideshow__slide img {
  display: block;
  width: 100%;
  max-height: min(52vh, 480px);
  margin: 0 auto;
  object-fit: contain;
  background: var(--paper-deep);
}

.news-slideshow__btn {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: var(--btn-shadow-secondary);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.news-slideshow__btn:hover {
  background: #fff;
  border-color: var(--ink-soft);
  box-shadow: var(--btn-shadow-secondary-hover);
}

.news-slideshow__btn:active {
  transform: translateY(calc(-50% + 1px));
  box-shadow: var(--btn-shadow-secondary-active);
}

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

.news-slideshow__btn--prev { left: 0.65rem; }
.news-slideshow__btn--next { right: 0.65rem; }

.news-slideshow__footer {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem 0.8rem;
  border-top: 1px solid var(--line);
}

.news-slideshow__caption {
  margin: 0;
  min-height: 1.4em;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
}

.news-slideshow__dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-slideshow__dot {
  width: 0.55rem;
  height: 0.55rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.news-slideshow__dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.15);
}

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

@media (max-width: 719px) {
  .news-slideshow__btn {
    width: 2rem;
    height: 2rem;
  }

  .news-slideshow__btn--prev { left: 0.4rem; }
  .news-slideshow__btn--next { right: 0.4rem; }

  .news-slideshow__slide img {
    max-height: min(46vh, 360px);
  }
}

/* Projects
   Card + detail-lead layout: see AGENTS.md “Project cards and detail leads”.
   Markup uses .project-card__head (title + status) and __tail (summary, meta, CTA).
   Desktop: ratio split + lifted title band in the text panel.
   Mobile: lifted head → photo → plain tail (no-photo: head → tail only). */

.project-grid {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-card {
  border: 1px solid transparent;
  background: transparent;
}

/* One outer frame so photo + copy read as a single section. */
.field-row,
.project-card a,
.project-detail__lead:not(.project-detail__lead--no-photo) {
  border: 1px solid rgba(196, 190, 179, 0.55);
  background: rgba(255, 255, 255, 0.78);
  padding: var(--split-frame-padding);
  box-shadow: var(--surface-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.project-card:hover a,
.project-card a:focus-visible {
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 2px 6px rgba(28, 27, 25, 0.06),
    0 8px 20px rgba(28, 27, 25, 0.08);
}

.project-card a {
  display: grid;
  grid-template-columns: minmax(0, var(--ratio-minor)) minmax(0, var(--ratio-major));
  gap: var(--split-gutter-cards);
  padding: 0;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  align-items: stretch;
  justify-items: stretch;
  cursor: pointer;
}

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

.project-card:hover .project-card__title,
.project-card a:focus-visible .project-card__title {
  color: var(--accent);
}

.project-card--photo-right a {
  grid-template-columns: minmax(0, var(--ratio-major)) minmax(0, var(--ratio-minor));
}

.project-card--photo-left:not(.project-card--no-photo) a > .project-hero--card {
  grid-column: 1;
  grid-row: 1;
}

.project-card--photo-left:not(.project-card--no-photo) a > .project-card__body {
  grid-column: 2;
  grid-row: 1;
}

.project-card--photo-right:not(.project-card--no-photo) a > .project-hero--card {
  grid-column: 2;
  grid-row: 1;
}

.project-card--photo-right:not(.project-card--no-photo) a > .project-card__body {
  grid-column: 1;
  grid-row: 1;
}

/* Match the text column width of photo cards — not full card width. */
.project-card--no-photo a {
  grid-template-columns: minmax(0, var(--ratio-minor)) minmax(0, var(--ratio-major));
  align-items: stretch;
}

.project-card--no-photo .project-card__body {
  grid-column: 2;
}

.project-card--no-photo.project-card--photo-right a {
  grid-template-columns: minmax(0, var(--ratio-major)) minmax(0, var(--ratio-minor));
}

.project-card--no-photo.project-card--photo-right .project-card__body {
  grid-column: 1;
}

.project-card__body {
  display: grid;
  gap: 0.65rem;
  padding: 1rem 1.1rem;
  align-content: center;
  align-self: stretch;
  position: relative;
  background: #fff;
  box-shadow: var(--split-panel-shadow);
  transition: box-shadow 0.2s ease;
}

.project-card:hover .project-card__body,
.project-card a:focus-visible .project-card__body {
  box-shadow: var(--split-panel-shadow), 0 2px 0 rgba(47, 93, 74, 0.12);
}

.project-detail__lead {
  display: grid;
  grid-template-columns: minmax(0, var(--ratio-minor)) minmax(0, var(--ratio-major));
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 1.75rem;
  min-width: 0;
}

.project-detail__lead--photo-right {
  grid-template-columns: minmax(0, var(--ratio-major)) minmax(0, var(--ratio-minor));
}

.project-detail__lead--photo-right .project-hero {
  order: 2;
}

.project-detail__lead--photo-right .project-detail__intro {
  order: 1;
}

.project-detail__lead:not(.project-detail__lead--no-photo) {
  gap: var(--split-gutter-cards);
  align-items: stretch;
}

.project-detail__lead:not(.project-detail__lead--no-photo) .project-detail__intro {
  align-self: stretch;
  display: grid;
  gap: 0.65rem;
  position: relative;
  background: #fff;
  box-shadow: var(--split-panel-shadow);
  padding: 1rem 1.1rem;
}

.project-detail__lead--no-photo {
  grid-template-columns: 1fr;
}

.project-detail__lead .project-hero {
  margin: 0;
}

.project-detail__lead:not(.project-detail__lead--no-photo) .project-hero {
  align-self: stretch;
  justify-self: stretch;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.project-detail__lead .project-detail__intro {
  margin-bottom: 0;
}

.project-hero {
  margin: 0 0 1.25rem;
  background: #fff;
  box-shadow: var(--photo-pop-shadow);
  overflow: hidden;
  align-self: start;
  line-height: 0;
}

/* The photo pane fills its ratio track and centres the image inside, so cards
   with differently shaped photos still line up with each other. The pane is
   transparent, so a photo narrower than its track sits on the card's own
   background instead of on a coloured mat. */
.project-card a > .project-hero--card {
  align-self: stretch;
  justify-self: stretch;
}

.project-hero--card {
  margin: 0;
  border: none;
  background: transparent;
  padding: 0;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  line-height: normal;
}

.project-hero:not(.project-hero--card) {
  padding: 0.25rem;
  width: fit-content;
  max-width: 380px;
}

.project-hero img,
.project-hero video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
}

.project-hero--card img,
.project-hero--card video {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
  box-shadow: var(--photo-pop-shadow);
  filter: saturate(0.9);
}

.project-detail__lead:not(.project-detail__lead--no-photo) .project-hero {
  min-height: 0;
}

.project-detail__lead:not(.project-detail__lead--no-photo) .project-hero img,
.project-detail__lead:not(.project-detail__lead--no-photo) .project-hero video {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: var(--photo-pop-shadow);
  filter: saturate(0.9);
}

.project-hero figcaption {
  line-height: 1.45;
  margin: 0;
  padding: 0.45rem 0.55rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

.project-hero__place {
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.25rem 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  line-height: 1.45;
  text-align: center;
  color: var(--ink-soft);
  border-top: none;
}

/* Detail/list heroes with a caption must not clip the line under the photo. */
.project-hero--place,
.project-hero:has(figcaption) {
  overflow: visible;
  line-height: normal;
}

.project-hero--place img,
.project-hero--card.project-hero--place img,
.project-detail__lead:not(.project-detail__lead--no-photo) .project-hero--place img {
  flex: 0 1 auto;
  max-height: 340px;
}

.project-hero--youtube {
  width: 100%;
  max-width: 480px;
}

.project-hero--youtube .media-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 270px;
  background: #000;
}

.project-hero--youtube iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.project-card__top {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.project-card__top > .status {
  flex: 0 0 auto;
}

.project-card__tail {
  display: grid;
  gap: 0.65rem;
}

.project-card__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: color 0.2s ease;
}

.project-card__cta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.project-card:hover .project-card__cta,
.project-card a:focus-visible .project-card__cta {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.project-card__summary {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.project-card__meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  box-shadow:
    0 1px 2px rgba(28, 27, 25, 0.08),
    0 2px 5px rgba(28, 27, 25, 0.05),
    0 0 0 1px rgba(47, 93, 74, 0.1);
}

.status--open,
.status--todo {
  border-color: rgba(196, 190, 179, 0.95);
  background: #fff;
  color: var(--ink-soft);
}

.status--active,
.status--current {
  border-color: var(--accent);
  color: var(--accent);
  background: #fff;
  box-shadow:
    0 1px 2px rgba(28, 27, 25, 0.1),
    0 3px 8px rgba(47, 93, 74, 0.2),
    0 0 0 1px rgba(47, 93, 74, 0.28);
}

.status--done {
  border-color: var(--accent);
  background: var(--accent);
  color: #f4f1ea;
  box-shadow:
    0 1px 2px rgba(28, 27, 25, 0.12),
    0 2px 6px rgba(47, 93, 74, 0.28),
    0 0 0 1px rgba(47, 93, 74, 0.35);
}

.project-detail__intro {
  margin-bottom: 1.75rem;
}

.project-detail__date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.project-detail__tail {
  display: grid;
  gap: 0.65rem;
}

.project-blocks {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

.project-block {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  background: #fff;
}

.project-block h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.project-block p {
  margin: 0;
}

.roadmap {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.roadmap__heading {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.roadmap-step {
  position: relative;
  padding: 0 0 1.5rem 1.35rem;
  margin-left: 0.35rem;
}

/* Journey-mark legs: solid green between green stops; planned legs use journey-border dash (4 3.5). */
.roadmap-step::before,
.roadmap-step::after {
  content: "";
  position: absolute;
  left: -0.05rem;
  width: 1px;
  border: none;
  background: repeating-linear-gradient(
    to bottom,
    #b8b2a8 0,
    #b8b2a8 4px,
    transparent 4px,
    transparent 7.5px
  );
  pointer-events: none;
}

.roadmap-step::before {
  top: 0;
  height: calc(0.2rem + 0.35rem);
}

.roadmap-step::after {
  top: calc(0.2rem + 0.7rem);
  bottom: 0;
}

.roadmap-step:first-child::before {
  display: none;
}

.roadmap-step:last-child {
  padding-bottom: 0;
}

.roadmap-step:last-child::after {
  display: none;
}

.roadmap-step--done + .roadmap-step--done::before,
.roadmap-step--done + .roadmap-step--current::before,
.roadmap-step--current + .roadmap-step--done::before,
.roadmap-step--current + .roadmap-step--current::before {
  width: 1.35px;
  background: var(--accent);
}

.roadmap-step--done:has(+ .roadmap-step--done)::after,
.roadmap-step--done:has(+ .roadmap-step--current)::after,
.roadmap-step--current:has(+ .roadmap-step--done)::after,
.roadmap-step--current:has(+ .roadmap-step--current)::after {
  width: 1.35px;
  background: var(--accent);
}

.roadmap-step__node {
  position: absolute;
  left: -0.4rem;
  top: 0.2rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
  box-shadow:
    0 1px 2px rgba(28, 27, 25, 0.1),
    0 2px 5px rgba(28, 27, 25, 0.06),
    0 0 0 1px rgba(47, 93, 74, 0.1);
}

.roadmap-step--current .roadmap-step__node {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow:
    0 1px 2px rgba(28, 27, 25, 0.14),
    0 3px 8px rgba(47, 93, 74, 0.32),
    0 0 0 1px rgba(47, 93, 74, 0.35);
}

.roadmap-step--done .roadmap-step__node {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow:
    0 1px 2px rgba(28, 27, 25, 0.12),
    0 2px 6px rgba(47, 93, 74, 0.22);
}

.roadmap-step--todo .roadmap-step__node {
  background: var(--paper);
  border-color: var(--ink-soft);
}

.roadmap-step__top {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.roadmap-step__top > .status {
  flex: 0 0 auto;
}

.roadmap-step__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.roadmap-step__current-label {
  margin: 0 0 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.roadmap-step__current {
  margin: 0 0 0.85rem;
  color: var(--ink-soft);
}

.roadmap-step__current:empty,
.roadmap-step__current.is-empty {
  display: none;
}

.roadmap-step .media-grid {
  margin-top: 0.5rem;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.media-item {
  margin: 0;
  overflow: visible;
}

.media-item figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Same lifted white mat as field-row / Mitmachen photos — inset media with a soft shadow. */
.media-item__chrome {
  padding: 0.75rem 0.85rem;
  background: #fff;
  box-shadow: var(--split-panel-shadow);
}

.media-item__chrome img,
.media-item__chrome video {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
  box-shadow: var(--photo-pop-shadow);
  filter: saturate(0.9);
  background: var(--paper-deep);
}

.media-item__chrome video {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.media-item--youtube {
  grid-column: 1 / -1;
}

.media-item__chrome .media-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--paper-deep);
  box-shadow: var(--photo-pop-shadow);
  overflow: hidden;
}

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

.media-item figcaption {
  margin-top: 0.45rem;
  padding: 0 0.15rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.media-empty {
  padding: 1.25rem 1rem;
  border: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  text-align: center;
}

/* Apply network diagram */

.apply-network-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.apply-network-layout {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.apply-network-copy {
  position: relative;
}

.apply-network-copy h2 {
  margin: 0 0 0.65rem;
}

.apply-network-copy .hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.55;
}

.apply-network {
  --hex-shadow-t: 0;
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: min(480px, 100%);
  margin: 0 auto;
  padding: 0.35rem;
  background: transparent;
}

/* Soft vignette behind the diagram — slightly oversized + blurred, kept round so it does not read as a wide band. */
.apply-network::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -6%;
  right: -6%;
  top: -4%;
  bottom: -10%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 52% at 50% 44%, rgba(255, 255, 255, 0.48) 0%, transparent 78%),
    radial-gradient(ellipse 62% 48% at 50% 62%, rgba(47, 93, 74, 0.04) 0%, transparent 80%);
  filter: blur(11px);
  -webkit-mask-image: radial-gradient(ellipse 78% 76% at 50% 50%, #000 48%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 76% at 50% 50%, #000 48%, transparent 100%);
}

.apply-network__svg {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.apply-network__grid {
  shape-rendering: geometricPrecision;
}

.apply-network__hub {
  filter: drop-shadow(0 1px 2px rgba(28, 27, 25, 0.12))
    drop-shadow(0 4px 12px rgba(47, 93, 74, 0.22));
}

.apply-network__journey {
  filter: drop-shadow(0 1px 1px rgba(28, 27, 25, 0.08));
}

.apply-network__hex--shell {
  fill: url(#apply-network-chip-fill);
  stroke: url(#apply-network-chip-edge);
  stroke-width: 2.25;
  paint-order: stroke fill;
  /* Shadow depth tracks --hex-shadow-t (0 open → 1 connected), set per frame in JS. */
  filter:
    drop-shadow(
      0 calc(1.5px + 0.5px * var(--hex-shadow-t)) calc(2px + 1px * var(--hex-shadow-t))
        rgba(28, 27, 25, calc(0.12 + 0.02 * var(--hex-shadow-t)))
    )
    drop-shadow(
      0 calc(5px + 3px * var(--hex-shadow-t)) calc(10px + 4px * var(--hex-shadow-t))
        rgba(47, 93, 74, calc(0.2 + 0.06 * var(--hex-shadow-t)))
    )
    drop-shadow(
      0 calc(10px + 4px * var(--hex-shadow-t)) calc(22px + 6px * var(--hex-shadow-t))
        rgba(28, 27, 25, calc(0.08 + 0.02 * var(--hex-shadow-t)))
    );
}

.apply-network__hex--face {
  fill: #fff;
  stroke: #2f5d4a;
  stroke-width: 1.55;
  paint-order: stroke fill;
  filter: none;
}

.apply-network__hex--shell.apply-network__hex--center {
  stroke-width: 2.35;
}

.apply-network__hex--face.apply-network__hex--center {
  stroke-width: 1.65;
}

.apply-network__cell-label {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: var(--ink-soft);
}

.apply-network a.apply-network__cell-link {
  text-decoration: none;
}

.apply-network a.apply-network__cell-link:hover .apply-network__cell-label,
.apply-network a.apply-network__cell-link:focus .apply-network__cell-label {
  fill: var(--accent);
}

@media (min-width: 720px) {
  /* Text in the narrow track, diagram in the wide one — so the star can run
     to the full 61.8% column instead of sitting in the 38.2% slice. */
  .apply-network-layout {
    grid-template-columns: minmax(0, var(--ratio-minor)) minmax(0, var(--ratio-major));
    gap: var(--split-gutter);
  }

  .apply-network-copy {
    position: relative;
    border-right: none;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .apply-network-copy::after {
    content: "";
    position: absolute;
    top: 0.75rem;
    right: calc(var(--split-gutter) / -2);
    bottom: 0.75rem;
    width: 1px;
    transform: translateX(50%);
    background: var(--split-rule-v);
  }

  .apply-network {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
  }
}

@media (max-width: 719px) {
  .apply-network {
    width: 100%;
    max-width: none;
    padding: 0.15rem 0 0.35rem;
  }

  .apply-network__svg text.apply-network__cell-label {
    font-size: 0.44rem;
    letter-spacing: 0.035em;
  }

  .apply-network-copy {
    padding-bottom: 1.35rem;
    border-bottom: none;
  }

  .apply-network-copy::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--split-rule-h);
  }
}


/* About — spoke list (not cards) */

.about-spokes-intro {
  margin: 0 0 1.35rem;
  color: var(--ink-soft);
  max-width: 36em;
}

.about-spokes {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 1.35rem;
}

.about-spokes__item {
  max-width: 36em;
  scroll-margin-top: 1.5rem;
}

.about-spokes__item h3 {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.about-spokes__item p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.apply-network__svg text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: var(--ink-soft);
}

.apply-network a {
  fill: inherit;
  text-decoration: none;
}

.apply-network a:hover text,
.apply-network a:focus text {
  fill: var(--accent);
}

.apply-partner-intro {
  margin-bottom: 1.35rem;
}

/* Apply form */

.apply-form {
  display: grid;
  gap: 1.35rem;
}

.apply-form .field {
  display: grid;
  gap: 0.35rem;
}

.apply-form .field span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.apply-form input,
.apply-form textarea,
.apply-form select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.apply-form input:focus,
.apply-form textarea:focus,
.apply-form select:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}

.apply-form textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.apply-form .hint {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.apply-form .hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.apply-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(120%);
  padding: 0.75rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  z-index: 20;
}

.apply-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Photo rows — a block of text beside a photograph, on the site-wide
   golden-ratio tracks. Used on the homepage and the about page.

   The photos are placeholder examples, not documentation of the text they sit
   beside, so they stay decorative and uncaptioned until real field photos
   replace them. Each keeps its original aspect ratio and is normalised by
   height, so a square and a 2:3 portrait carry the same weight without being
   cropped. A landscape photo hits the width of its track first and comes out
   shorter than 260px — that is expected, not a bug.

   The gutter matches the 24px the journey border sits off the content edge, so
   a centred photo is the same distance from the border as from the text. */
.field-row {
  display: grid;
  grid-template-columns: minmax(0, var(--ratio-minor)) minmax(0, var(--ratio-major));
  gap: var(--split-gutter);
  align-items: stretch;
  margin-bottom: 2.25rem;
}

.field-row__text {
  position: relative;
  padding: 1rem 1.1rem;
  background: #fff;
  box-shadow: var(--split-panel-shadow);
}

/* Photo on the right. The figure comes first in the source on every page, so
   this swaps both the tracks and the visual order. */
.field-row--flip {
  grid-template-columns: minmax(0, var(--ratio-major)) minmax(0, var(--ratio-minor));
}

.field-row--flip .field-row__photo {
  order: 2;
}

.field-row--flip .field-row__text {
  order: 1;
}

/* Photos vary in width, so centre each one in its track. That leaves equal air
   on both sides instead of stacking all the slack against the text. The pane
   matches the text column — white lift, same padding — so both sides read as a
   pair inside the outer frame (landscape photos no longer float on empty air). */
.field-row__photo {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  min-height: 0;
  margin: 0;
  padding: 1rem 1.1rem;
  background: #fff;
  box-shadow: var(--split-panel-shadow);
}

.field-row__photo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: var(--photo-pop-shadow);
  filter: saturate(0.9);
}

.field-row__text > :first-child {
  margin-top: 0;
}

.field-row__text > :last-child {
  margin-bottom: 0;
}

/* The about page's row sits inside the page header, under the title. It carries
   the gap the first lead paragraph would otherwise supply, and drops its own
   bottom margin because the header already sets the space below. */
.about-lead-row,
.apply-lead-row {
  margin-top: 1.35rem;
  margin-bottom: 0;
}

/* About lead portrait: the text column is tall — fill the lifted photo panel instead of
   floating a 260px-tall image in the middle. */
.about-lead-row .field-row__photo {
  align-items: stretch;
  padding: 0.65rem 0.75rem;
}

.about-lead-row .field-row__photo img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 12rem;
  object-fit: cover;
  object-position: center 22%;
}

@media (min-width: 720px) {
  .about-lead-row .field-row__photo img {
    height: 100%;
    max-height: none;
    min-height: 0;
  }
}

/* About: self-made network illustration between contact steps and roadmap. */
.about-puzzle-row {
  grid-template-columns: 1fr;
  justify-items: center;
  width: fit-content;
  max-width: min(28rem, 100%);
  margin-inline: auto;
}

.about-puzzle-row .field-row__photo {
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
}

/* Mitmachen lead photo: left column. Beige blooms out with blur; soft edge into the panel. */
.apply-lead-row .field-row__photo {
  --apply-photo-wash: #f0ebe3;
  position: relative;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.apply-lead-row .field-row__photo img {
  position: relative;
  z-index: 1;
  display: block;
  filter: saturate(0.88) contrast(1.03) brightness(0.98);
  box-shadow: none;
  -webkit-mask-image: radial-gradient(
    ellipse 100% 96% at 56% 48%,
    #000 52%,
    rgba(0, 0, 0, 0.85) 68%,
    transparent 88%
  );
  mask-image: radial-gradient(
    ellipse 100% 96% at 56% 48%,
    #000 52%,
    rgba(0, 0, 0, 0.85) 68%,
    transparent 88%
  );
}

.apply-lead-row .field-row__photo::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -4%;
  right: 6%;
  bottom: -4%;
  left: -28%;
  pointer-events: none;
  background: var(--apply-photo-wash);
  filter: blur(38px);
  opacity: 0.88;
  -webkit-mask-image: radial-gradient(
    ellipse 108% 98% at 66% 50%,
    #000 0%,
    #000 28%,
    rgba(0, 0, 0, 0.55) 48%,
    transparent 82%
  );
  mask-image: radial-gradient(
    ellipse 108% 98% at 66% 50%,
    #000 0%,
    #000 28%,
    rgba(0, 0, 0, 0.55) 48%,
    transparent 82%
  );
}

.apply-lead-row .field-row__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse 88% 92% at 50% 48%, transparent 48%, rgba(72, 48, 28, 0.12) 100%),
    radial-gradient(ellipse 120% 100% at 50% 50%, rgba(210, 175, 120, 0.07) 0%, transparent 55%);
  background-repeat: no-repeat;
}

@media (prefers-reduced-transparency: reduce) {
  .apply-lead-row .field-row__photo img {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .apply-lead-row .field-row__photo::before {
    filter: none;
    opacity: 0.55;
    left: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .apply-lead-row .field-row__photo::after {
    mix-blend-mode: normal;
    opacity: 0.85;
  }
}

@media (min-width: 720px) {
  /* WebKit: ratio grids must not grow row height from image intrinsic size. */
  .field-row > .field-row__photo,
  .field-row > .field-row__text,
  .project-card:not(.project-card--no-photo) a > .project-hero--card,
  .project-card:not(.project-card--no-photo) a > .project-card__body,
  .project-detail__lead:not(.project-detail__lead--no-photo) > .project-hero,
  .project-detail__lead:not(.project-detail__lead--no-photo) > .project-detail__intro {
    min-height: 0;
    min-width: 0;
  }

  .field-row__photo img,
  .project-hero--card:not(.project-hero--place) img,
  .project-hero--card:not(.project-hero--place) video,
  .project-detail__lead:not(.project-detail__lead--no-photo)
    .project-hero:not(.project-hero--place) img,
  .project-detail__lead:not(.project-detail__lead--no-photo)
    .project-hero:not(.project-hero--place) video {
    max-height: var(--photo-height);
  }

  /* Gradient rule sits in the gutter between photo and text — not on a panel edge. */
  .field-row:not(.field-row--flip) .field-row__text::before {
    content: "";
    position: absolute;
    top: 0.1rem;
    left: calc(var(--split-gutter) / -2);
    bottom: 0.1rem;
    width: 1px;
    transform: translateX(-50%);
    background: var(--split-rule-v);
  }

  .field-row--flip .field-row__text::after {
    content: "";
    position: absolute;
    top: 0.1rem;
    right: calc(var(--split-gutter) / -2);
    bottom: 0.1rem;
    width: 1px;
    transform: translateX(50%);
    background: var(--split-rule-v);
  }

  .project-card__body > .project-card__head,
  .project-detail__intro > .project-card__head {
    margin: -1rem -1.1rem 0.65rem;
    padding: 0.75rem 1.1rem;
    background: #fff;
    box-shadow: var(--split-panel-shadow);
  }
}

/* The ratio needs room. Below 720px a 38.2% photo column squeezes body text
   under ~45 characters a line, so every two-column split becomes one column.
   This is the single breakpoint for the ratio — see AGENTS.md. */
@media (max-width: 719px) {
  .field-row,
  .field-row--flip {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .field-row,
  .project-card a,
  .project-detail__lead:not(.project-detail__lead--no-photo) {
    padding: 0.75rem;
  }

  .field-row:not(.field-row--flip) .field-row__text {
    margin-top: 0.15rem;
  }

  .field-row:not(.field-row--flip) .field-row__text::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    height: 1px;
    background: var(--split-rule-h);
  }

  .field-row--flip .field-row__text {
    margin-bottom: 0.15rem;
  }

  .field-row--flip .field-row__text::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    height: 1px;
    background: var(--split-rule-h);
  }

  .field-row__photo img {
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
  }

  .project-card:not(.project-card--no-photo) .project-hero--card img,
  .project-card:not(.project-card--no-photo) .project-hero--card video,
  .project-detail__lead:not(.project-detail__lead--no-photo) .project-hero img,
  .project-detail__lead:not(.project-detail__lead--no-photo) .project-hero video {
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
  }

  /* Stacked, the text leads and the photo follows — on both variants. */
  .field-row--flip .field-row__photo {
    order: 2;
  }

  .field-row--flip .field-row__text {
    order: 1;
  }

  /* One column + named rows — title, photo, copy. Detail leads were still on
     the ratio tracks here, which put the title beside the photo. */
  .project-card:not(.project-card--no-photo) a,
  .project-detail__lead:not(.project-detail__lead--no-photo) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "photo"
      "tail";
    align-items: stretch;
    gap: 1rem;
  }

  .project-card--photo-left:not(.project-card--no-photo) a > .project-hero--card,
  .project-card--photo-left:not(.project-card--no-photo) a > .project-card__body,
  .project-card--photo-right:not(.project-card--no-photo) a > .project-hero--card,
  .project-card--photo-right:not(.project-card--no-photo) a > .project-card__body {
    grid-column: auto;
    grid-row: auto;
  }

  /* Desktop photo-side ordering must not win on narrow screens. */
  .project-card--photo-right .project-hero--card,
  .project-card--photo-right .project-card__body,
  .project-detail__lead--photo-right .project-hero,
  .project-detail__lead--photo-right .project-detail__intro {
    order: initial;
  }

  /* Lifted title on top, then photo, then plain copy below. */
  .project-card:not(.project-card--no-photo) .project-card__body,
  .project-detail__lead:not(.project-detail__lead--no-photo) .project-detail__intro {
    display: contents;
  }

  .project-card:not(.project-card--no-photo) .project-card__head,
  .project-detail__lead:not(.project-detail__lead--no-photo) .project-card__head {
    grid-area: head;
    margin: 0;
    padding: 1rem 1.1rem;
    background: #fff;
    box-shadow: var(--split-panel-shadow);
    transition: box-shadow 0.2s ease;
  }

  .project-card:not(.project-card--no-photo) .project-hero,
  .project-detail__lead:not(.project-detail__lead--no-photo) .project-hero {
    grid-area: photo;
    border-bottom: none;
  }

  .project-card:not(.project-card--no-photo) .project-card__tail,
  .project-detail__lead:not(.project-detail__lead--no-photo) .project-detail__tail {
    grid-area: tail;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .project-card:not(.project-card--no-photo) .project-card__body::before,
  .project-detail__lead:not(.project-detail__lead--no-photo) .project-detail__intro::before {
    content: none;
  }

  .project-card:hover .project-card__head,
  .project-card a:focus-visible .project-card__head {
    box-shadow: var(--split-panel-shadow), 0 2px 0 rgba(47, 93, 74, 0.12);
  }

  /* No photo: same lifted title, copy plain below. */
  .project-card--no-photo a,
  .project-detail__lead--no-photo {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "tail";
  }

  .project-card--no-photo .project-card__body,
  .project-detail__lead--no-photo .project-detail__intro {
    display: contents;
  }

  .project-card--no-photo .project-card__head,
  .project-detail__lead--no-photo .project-card__head {
    grid-area: head;
    margin: 0;
    padding: 1rem 1.1rem;
    background: #fff;
    box-shadow: var(--split-panel-shadow);
    transition: box-shadow 0.2s ease;
  }

  .project-card--no-photo .project-card__tail,
  .project-detail__lead--no-photo .project-detail__tail {
    grid-area: tail;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .project-card--no-photo .project-card__body::before {
    content: none;
  }
}

/* —— Minimal audio player (experimental) —— */
.wlp-audio-section {
  margin-top: 0.5rem;
}

.wlp-audio {
  position: relative;
  max-width: 22rem;
  margin: 0.75rem 0 0;
}

.wlp-audio__native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.wlp-audio__chrome {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--surface-shadow);
}

.wlp-audio__toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.wlp-audio__toggle:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-hover);
  box-shadow: 0 2px 8px rgba(47, 93, 74, 0.12);
}

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

.wlp-audio__toggle:disabled {
  opacity: 0.45;
  cursor: wait;
}

.wlp-audio--loading .wlp-audio__toggle:disabled {
  opacity: 0.55;
}

.wlp-audio--playing .wlp-audio__toggle {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.wlp-audio__icon {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
}

.wlp-audio__cover {
  flex-shrink: 0;
  order: 3;
  width: 2.35rem;
  height: 2.35rem;
  margin-left: 0.1rem;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--paper-deep);
}

.wlp-audio--dock .wlp-audio__body {
  order: 2;
  flex: 1;
  min-width: 0;
}

.wlp-audio--dock .wlp-audio__toggle {
  order: 1;
}

.wlp-audio__cover[hidden] {
  display: none;
}

.wlp-audio__body {
  flex: 1;
  min-width: 0;
}

.wlp-audio__title {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wlp-audio__title-link {
  color: inherit;
  text-decoration: none;
}

.wlp-audio__title-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.wlp-audio__title-sub {
  display: block;
  margin-top: 0.12rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.wlp-audio__title:has(.wlp-audio__title-sub) {
  white-space: normal;
}

.wlp-audio--live .wlp-audio__elapsed,
.wlp-audio--live .wlp-audio__sep,
.wlp-audio--live .wlp-audio__duration {
  display: none;
}

.wlp-audio__live-flag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.wlp-audio--live .wlp-audio__rail {
  cursor: default;
  pointer-events: none;
}

.wlp-audio--live.wlp-audio--playing .wlp-audio__fill {
  opacity: 0.85;
  transition: width 0.4s ease;
}

.wlp-audio--empty .wlp-audio__title {
  font-weight: 400;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.wlp-audio__rail {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--paper-deep);
  cursor: pointer;
  overflow: hidden;
}

.wlp-audio--empty .wlp-audio__rail {
  cursor: default;
  opacity: 0.55;
}

.wlp-audio__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent) 0%, #3d7a62 100%);
  pointer-events: none;
  transition: width 0.08s linear;
}

.wlp-audio__time {
  margin: 0.35rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.wlp-audio__sep {
  opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
  .wlp-audio__fill {
    transition: none;
  }

  .wlp-audio__toggle {
    transition: none;
  }
}

body.has-wlp-audio-dock {
  padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
}

.wlp-audio-dock {
  position: fixed;
  z-index: 60;
  min-height: 3.5rem;
  left: 50%;
  bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
  width: min(28rem, calc(100vw - 1.75rem));
  transform: translateX(-50%);
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s ease;
}

.wlp-audio-dock--hidden {
  visibility: hidden;
  opacity: 0;
  transform: translateX(-50%) translateY(0.75rem);
}

.wlp-audio-dock .wlp-audio {
  max-width: none;
  margin: 0;
  pointer-events: auto;
}

.wlp-audio--dock .wlp-audio__chrome {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  box-shadow: var(--surface-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wlp-audio-dock:not(.wlp-audio-dock--hidden):hover .wlp-audio__chrome,
.wlp-audio-dock:not(.wlp-audio-dock--hidden):focus-within .wlp-audio__chrome,
.wlp-audio--dock.wlp-audio--playing .wlp-audio__chrome {
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 2px 6px rgba(28, 27, 25, 0.06),
    0 8px 20px rgba(28, 27, 25, 0.08);
}

/* Label/value rows and the media grid are not ratio splits — they collapse
   later, when the screen is genuinely narrow. */
@media (max-width: 520px) {
  .contact-list a,
  .contact-list__row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .media-grid {
    grid-template-columns: 1fr;
  }
}