/* Fonts are inlined here rather than kept in a separate fonts.css: a second
   stylesheet must download and parse before any woff2 request even starts,
   costing a full round-trip on every cold load.

   Space Grotesk is a variable font, so one file covers the whole 400-700
   range. latin + latin-ext only; latin-ext carries the Latvian diacritics and
   must not be dropped. OFL licensed. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ----------

   Light lives on bare :root. Dark is declared twice on purpose: once for the
   system preference — guarded with :not([data-theme="light"]) so an explicit
   light choice still wins — and once for the attribute itself, so the toggle
   overrides the system in both directions.

   Colours come from the AmziXz logo (purple -> blue) and sit deliberately
   alongside Blue Eye Energy (blue/black/white) and Catch The Baltic (white). */

:root {
  color-scheme: light dark;

  --bg: #fafafc;
  --surface: #ffffff;
  --surface-2: #f4f3f8;
  --border: #e5e3ec;
  --ink: #14121a;
  --muted: #5c5670;
  --grad-a: #7c3aed;
  --grad-b: #2563eb;
  --purple: #7c3aed;
  --blue: #2563eb;
  --live: #059669;

  --gradient: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  --glow: radial-gradient(circle, rgba(124, 58, 237, 0.16) 0%, rgba(124, 58, 237, 0) 70%);
  --header-bg: rgba(250, 250, 252, 0.86);
  --plate-light: #ffffff;
  --plate-dark: #14121a;
  --grain-opacity: 0;

  --shadow-lg: 0 24px 60px rgba(20, 18, 26, 0.12);
  --shadow-sm: 0 12px 30px rgba(20, 18, 26, 0.08);
  --shadow-xs: 0 10px 22px rgba(20, 18, 26, 0.05);

  /* 8px base */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4rem;
  --sp-12: 6rem;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 2rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.9vw, 3rem);
  --step-4: clamp(2.6rem, 1.8rem + 3.6vw, 4.5rem);
  --step-5: clamp(3.2rem, 1.6rem + 7vw, 7.5rem);

  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  /* Built-in CSS easings are too weak to feel intentional. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --dur-press: 120ms;
  --dur-hover: 160ms;
  --dur-enter: 340ms;

  --radius: 16px;
  --radius-lg: 24px;

  /* One source of truth for the page gutter. Full-bleed elements cancel it
     with a negative margin, so if the two ever drift apart the page gains a
     horizontal scrollbar. */
  --gutter: var(--sp-5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0a0f;
    --surface: #131119;
    --surface-2: #1a1722;
    --border: #262233;
    --ink: #f5f3f7;
    --muted: #9a93ad;
    --grad-a: #8b5cf6;
    --grad-b: #3b82f6;
    --purple: #8b5cf6;
    --blue: #3b82f6;
    --live: #34d399;

    --glow: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0) 70%);
    --header-bg: rgba(11, 10, 15, 0.82);
    --grain-opacity: 0.035;

    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
    --shadow-sm: 0 12px 30px rgba(0, 0, 0, 0.45);
    --shadow-xs: 0 10px 22px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  --bg: #0b0a0f;
  --surface: #131119;
  --surface-2: #1a1722;
  --border: #262233;
  --ink: #f5f3f7;
  --muted: #9a93ad;
  --grad-a: #8b5cf6;
  --grad-b: #3b82f6;
  --purple: #8b5cf6;
  --blue: #3b82f6;
  --live: #34d399;

  --glow: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0) 70%);
  --header-bg: rgba(11, 10, 15, 0.82);
  --grain-opacity: 0.035;

  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 12px 30px rgba(0, 0, 0, 0.45);
  --shadow-xs: 0 10px 22px rgba(0, 0, 0, 0.35);
}

/* ---------- Base ---------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Grain. Pure decoration, so it is inert to pointers, and invisible in light
   mode where it reads as dirt rather than atmosphere. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,
h2,
h3 {
  font-family: inherit;
  color: var(--ink);
  text-wrap: balance;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

h1 {
  font-size: var(--step-4);
  margin: 0 0 var(--sp-4);
}

h2 {
  font-size: var(--step-3);
  margin: 0 0 var(--sp-4);
}

h3 {
  font-size: var(--step-1);
  margin: 0 0 var(--sp-2);
}

p {
  text-wrap: pretty;
}

main {
  position: relative;
  z-index: 1;
  padding: var(--sp-6) var(--gutter) var(--sp-12);
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--purple);
  color: #ffffff;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 12px 0;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

/* The bracket motif. Mono, wide-tracked, tiny — the size contrast against
   display type is the whole point. */
.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 var(--sp-3);
}

.index-label {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  color: var(--purple);
  margin-right: var(--sp-2);
}

.rule {
  height: 1px;
  border: 0;
  background: var(--border);
  margin: var(--sp-8) 0;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: transform var(--dur-press) var(--ease-out);
}

.brand:active {
  transform: scale(0.97);
}

.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: contain;
}

.brand-text {
  font-size: var(--step-1);
  letter-spacing: -0.01em;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: var(--sp-5);
  margin: 0 var(--sp-2) 0 0;
  padding: 0;
  flex-wrap: wrap;
}

.nav-links a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--mono);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}

.nav-links a[aria-current="page"] {
  color: var(--ink);
  border-color: var(--purple);
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover {
    color: var(--ink);
    border-color: var(--purple);
  }
}

/* ---------- Mobile menu button ---------- */

.nav-toggle {
  display: none; /* shown only at the mobile breakpoint */
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: transform var(--dur-press) var(--ease-out),
    border-color var(--dur-hover) ease;
}

.nav-toggle:active {
  transform: scale(0.94);
}

/* Three bars from one element: the span is the middle, ::before and ::after
   are the outer two. On open they rotate into an X and the middle fades. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 200ms var(--ease-out), opacity 120ms ease;
}

.nav-toggle-bars {
  top: 50%;
  transform: translate(-50%, -50%);
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  left: 0;
}

.nav-toggle-bars::before {
  transform: translateY(-5px);
}

.nav-toggle-bars::after {
  transform: translateY(5px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  opacity: 1;
  transform: translateY(0) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  opacity: 1;
  transform: translateY(0) rotate(-45deg);
}

/* ---------- Language switch ---------- */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.lang-switch a {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--muted);
  transition: color var(--dur-hover) ease, background-color var(--dur-hover) ease;
}

.lang-switch a[aria-current="true"] {
  background: var(--gradient);
  color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
  .lang-switch a:not([aria-current="true"]):hover {
    color: var(--ink);
  }
}

/* ---------- Theme toggle ---------- */

.theme-toggle {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out),
    border-color var(--dur-hover) ease;
}

.theme-toggle:active {
  transform: scale(0.94);
}

/* One glyph, two states: a ringed disc for light, filled for dark. */
.theme-toggle-icon {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 2px solid currentColor;
  background: transparent;
  transition: background-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}

.theme-toggle[aria-pressed="true"] .theme-toggle-icon {
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.28);
}

@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover {
    border-color: var(--purple);
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: var(--sp-10) 0 var(--sp-8);
  overflow: hidden;
}

/* Gradient glow, anchored off the top-right corner the way TRIONN lights its
   object. Decorative only. */
.hero::after {
  content: "";
  position: absolute;
  top: -180px;
  right: -140px;
  width: 460px;
  height: 460px;
  background: var(--glow);
  pointer-events: none;
  z-index: -1;
}

.hero-title {
  font-size: var(--step-5);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 var(--sp-5);
  max-width: 16ch;
}

.hero-grid {
  position: relative;
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
  align-items: end;
}

.lead {
  font-size: var(--step-1);
  color: var(--muted);
  margin: 0 0 var(--sp-6);
  max-width: 54ch;
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--gradient);
  color: #ffffff;
  padding: 0.8rem 1.7rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
  box-shadow: 0 14px 30px rgba(124, 58, 237, 0.25);
  transition: transform var(--dur-press) var(--ease-out),
    box-shadow var(--dur-hover) ease;
}

/* Instant feedback on press — the UI confirms it heard you. */
.btn:active {
  transform: scale(0.97);
}

.btn.secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(124, 58, 237, 0.32);
  }

  .btn:hover:active {
    transform: translateY(-2px) scale(0.97);
  }

  .btn.secondary:hover {
    border-color: var(--purple);
    box-shadow: var(--shadow-xs);
  }
}

/* ---------- Sections ----------
   Open space separated by hairlines, rather than stacked translucent plates.
   The whitespace is the layout. */

.section {
  border: 0;
  background: none;
  box-shadow: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: var(--sp-10) 0 0;
  margin-top: var(--sp-10);
}

.section > h2 {
  margin-top: 0;
}

/* ---------- Hero card / stats ---------- */

.hero-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.hero-card h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--step-1);
}

.stat-grid {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.stat {
  background: var(--surface-2);
  border-radius: 12px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
}

.stat-label {
  display: block;
  font-family: var(--mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 600;
}

.stat-value {
  font-weight: 700;
  font-size: var(--step-0);
}

/* ---------- Link list ---------- */

.link-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-5) 0 0;
}

.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 12px;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--dur-press) var(--ease-out),
    border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}

.link-list a::after {
  content: "\2192";
  font-weight: 700;
  color: var(--purple);
  transition: transform var(--dur-hover) var(--ease-out);
}

.link-list a:active {
  transform: scale(0.99);
}

@media (hover: hover) and (pointer: fine) {
  .link-list a:hover {
    border-color: var(--purple);
    box-shadow: var(--shadow-xs);
  }

  .link-list a:hover::after {
    transform: translateX(4px);
  }
}

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.card h2,
.card h3 {
  margin-top: 0;
  font-size: var(--step-1);
}

.card ul {
  margin: var(--sp-3) 0 0;
  padding-left: 1.1rem;
}

.card li {
  margin-bottom: var(--sp-1);
}

.card-link {
  display: block;
  text-decoration: none;
  transition: transform var(--dur-press) var(--ease-out),
    border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}

.card-link:active {
  transform: scale(0.99);
}

@media (hover: hover) and (pointer: fine) {
  .card-link:hover {
    transform: translateY(-2px);
    border-color: var(--purple);
    box-shadow: var(--shadow-sm);
  }

  .card-link:hover:active {
    transform: translateY(-2px) scale(0.99);
  }
}

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
  font-family: var(--mono);
  font-weight: 600;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--purple);
  text-decoration: none;
  transition: gap var(--dur-hover) var(--ease-out);
}

.card-cta::after {
  content: "\2192";
}

@media (hover: hover) and (pointer: fine) {
  .card-cta:hover {
    gap: var(--sp-3);
  }
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
}

.tag {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
}

.card-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0 0 var(--sp-3);
}

.card-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--purple);
}

.card-status.shipped::before {
  background: var(--live);
}

.card-status.wip::before {
  background: var(--blue);
}

/* ---------- Status pills ----------
   Colour is never the only signal: each pill carries its own word. */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: 0 0 auto;
}

.status-pill--live {
  color: var(--live);
}

.status-pill--building {
  color: var(--purple);
}

.status-pill--planned {
  color: var(--muted);
}

/* ---------- Brand plates ----------
   The logo assets are JPEG and PNG. A white-background JPEG dropped straight
   onto a dark page shows a white box and reads as broken, so every logo sits
   inside a deliberate frame instead. Mixed-quality assets then look like a
   decision rather than an accident. */

.brand-plate {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
}

/* For logos carrying a light background, or dark artwork on transparency. */
.brand-plate--light {
  background: var(--plate-light);
}

/* For transparent PNGs with light artwork. */
.brand-plate--dark {
  background: var(--plate-dark);
}

.brand-plate img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  display: block;
}

/* Text fallback until a logo file exists, so no page is blocked on assets
   that have not been supplied yet. */
.brand-plate-initials {
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: 0.02em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-plate--light .brand-plate-initials {
  /* The gradient needs the light plate behind it to stay legible. */
  filter: saturate(1.1);
}

/* ---------- Ventures ---------- */

.venture-list {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.venture-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  padding-left: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-press) var(--ease-out),
    border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}

/* Gradient rim-light on the leading edge. Used sparingly — it is the one
   place the brand gradient touches every card. */
.venture-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gradient);
  opacity: 0.9;
}

.venture-card--planned::before {
  opacity: 0.28;
}

.venture-body {
  flex: 1 1 auto;
  min-width: 0;
}

.venture-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.venture-name {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.venture-desc {
  display: block;
  color: var(--muted);
}

.venture-role {
  display: block;
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--muted);
  margin-top: var(--sp-2);
  letter-spacing: 0.04em;
}

@media (hover: hover) and (pointer: fine) {
  a.venture-card:hover {
    transform: translateY(-2px);
    border-color: var(--purple);
    box-shadow: var(--shadow-sm);
  }
}

/* ---------- Partners & friends ---------- */

.partner-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.partner-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 76px;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-align: center;
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  transition: border-color var(--dur-hover) ease, color var(--dur-hover) ease;
}

.partner-tile img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
  a.partner-tile:hover {
    border-color: var(--purple);
    color: var(--ink);
  }
}

.friends-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.friend-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--dur-hover) ease,
    transform var(--dur-press) var(--ease-out);
}

.friend-card .brand-plate {
  width: 44px;
  height: 44px;
  border-radius: 999px;
}

.friend-card .brand-plate-initials {
  font-size: var(--step-0);
}

.friend-name {
  font-weight: 600;
  display: block;
}

.friend-platform {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .friend-card:hover {
    border-color: var(--purple);
    transform: translateY(-2px);
  }
}

/* ---------- Layout helpers ---------- */

.two-column {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.widget-slot {
  border-radius: var(--radius);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

/* ---------- Socials ----------
   Each card carries its platform colour in --brand. Those are the platforms'
   own colours, not ours, so they do not change between themes. */

.social-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: var(--sp-6);
}

.social-card {
  --brand: var(--purple);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  padding: var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform var(--dur-press) var(--ease-out),
    border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}

.social-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--brand);
}

.social-card::after {
  content: "\2197";
  position: absolute;
  top: 50%;
  right: 1.1rem;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--brand);
  opacity: 0.55;
  transition: opacity var(--dur-hover) ease, transform var(--dur-hover) var(--ease-out);
}

.social-card:active {
  transform: scale(0.99);
}

@media (hover: hover) and (pointer: fine) {
  .social-card:hover {
    transform: translateY(-2px);
    border-color: var(--brand);
    box-shadow: var(--shadow-sm);
  }

  .social-card:hover::after {
    opacity: 1;
    transform: translateY(-50%) translate(2px, -2px);
  }

  .social-card:hover:active {
    transform: translateY(-2px) scale(0.99);
  }
}

.social-name {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}

.social-handle {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--muted);
}

.social-blurb {
  font-size: var(--step--1);
  color: var(--muted);
  margin-top: var(--sp-2);
  line-height: 1.5;
}

/* Platform accents */
.social-card.youtube {
  --brand: #ff0000;
}
.social-card.tiktok {
  --brand: #fe2c55;
}
.social-card.discord {
  --brand: #5865f2;
}
.social-card.telegram {
  --brand: #229ed9;
}
.social-card.instagram {
  --brand: #e1306c;
}
.social-card.github {
  --brand: #6e7681;
}
.social-card.email {
  --brand: #6d4aff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .social-card.github {
    --brand: #b8bec7;
  }
}

:root[data-theme="dark"] .social-card.github {
  --brand: #b8bec7;
}

/* ---------- Embeds ---------- */

.embed-card {
  border-radius: var(--radius);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
}

.embed-card > h3 {
  margin: 0 0 var(--sp-2);
}

.embed-card > p {
  margin: 0;
}

/* Both embeds get a backing plate in their own service's colour, so a slow or
   failed load never shows as a mismatched panel on the card.
   line-height/font-size 0 removes the inline line-box gap under the iframe. */
.embed-frame {
  margin-top: var(--sp-4);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #1e1f22;
  line-height: 0;
  font-size: 0;
}

.embed-frame iframe {
  display: block;
  width: 100%;
  height: 500px;
  border: 0;
  margin: 0;
  color-scheme: normal;
}

/* Official TikTok creator embed. embed.js swaps the blockquote's contents for
   an iframe once it loads — and that iframe brings its own white background,
   so this container must NOT be white. If the script is blocked (Brave
   Shields, uBlock, file:// origin) a white plate would leave a big empty white
   void. Using the card surface means the fallback reads as a designed state. */
.tiktok-embed-slot {
  margin-top: var(--sp-4);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.tiktok-embed-slot .tiktok-embed {
  margin: 0 !important;
  width: 100%;
  background: transparent;
}

/* The designed fallback. Replaced wholesale when embed.js succeeds, so it only
   ever shows when the widget genuinely cannot load. */
.tiktok-embed > section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
}

.tiktok-embed > section::before {
  content: "TikTok";
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fe2c55;
}

.tiktok-embed > section > a {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.tiktok-embed > section::after {
  content: "Open the profile for the latest videos \2192";
  font-size: var(--step--1);
  color: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
  .tiktok-embed > section > a:hover {
    text-decoration: underline;
    text-decoration-color: #fe2c55;
    text-underline-offset: 4px;
  }
}

/* No fallback element for Discord on purpose: it would sit above the iframe in
   normal flow and show permanently, not only on failure. The "Join the server"
   link above the frame already covers the blocked case. */

.coffee-button {
  margin-top: var(--sp-5);
}

/* ---------- Event page ---------- */

.event-meta {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: var(--sp-6);
}

.price-list,
.steps {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 0;
  display: grid;
  gap: var(--sp-2);
}

.price-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.price-list .amount {
  font-weight: 700;
  font-size: var(--step-1);
  white-space: nowrap;
  color: var(--purple);
}

.price-list .amount.free {
  color: var(--live);
}

.steps {
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 3.2rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--gradient);
  color: #ffffff;
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 700;
}

.note {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 10px;
  border-left: 3px solid var(--purple);
  background: var(--surface-2);
  font-size: var(--step--1);
}

.note a {
  color: var(--purple);
}

/* ---------- FAQ ---------- */

.faq {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}

.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--dur-hover) ease;
}

.faq details[open] {
  border-color: var(--purple);
}

.faq summary {
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* Replace the default disclosure triangle with our own marker. */
.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-size: 1.3rem;
  line-height: 1;
  color: var(--purple);
  transition: transform var(--dur-hover) var(--ease-out);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details > p {
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-4);
  color: var(--muted);
}

.faq details > p a {
  color: var(--purple);
}

@media (hover: hover) and (pointer: fine) {
  .faq summary:hover {
    color: var(--purple);
  }
}

/* ---------- Uses list ---------- */

.uses-group {
  margin-top: var(--sp-6);
}

.uses-group h2 {
  font-size: var(--step-2);
  margin-bottom: var(--sp-3);
}

.uses-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-2);
}

.uses-list li {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.uses-list b {
  font-weight: 600;
}

.uses-list span {
  color: var(--muted);
}

.uses-list code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--purple);
}

.uses-callout {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 12px;
  border: 1px solid var(--purple);
  background: var(--surface-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
}

.uses-callout p {
  margin: 0;
  font-size: var(--step--1);
}

.uses-callout .price {
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--purple);
  white-space: nowrap;
}

/* ---------- Footer ---------- */

.footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--sp-8) var(--sp-5) var(--sp-10);
  color: var(--muted);
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
}

.footer a {
  color: var(--muted);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-links a {
  text-decoration: none;
  transition: color var(--dur-hover) ease;
}

@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover {
    color: var(--purple);
  }
}

/* ---------- Entrance ---------- */

/* Seen on every navigation, so it stays short and subtle. */
main > section {
  animation: float-in var(--dur-enter) var(--ease-out) both;
}

main > section:nth-of-type(1) {
  animation-delay: 0ms;
}

main > section:nth-of-type(2) {
  animation-delay: 60ms;
}

main > section:nth-of-type(3) {
  animation-delay: 120ms;
}

main > section:nth-of-type(4) {
  animation-delay: 180ms;
}

/* Cap the cascade — anything further down is below the fold anyway, and a
   longer ramp would just make the page feel slow to settle. */
main > section:nth-of-type(n + 5) {
  animation-delay: 220ms;
}

@keyframes float-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    align-items: start;
  }

  .hero-title {
    max-width: 100%;
  }
}

/* Below this width the header items stop fitting on one row, so the links
   collapse behind the menu button. The language switch and theme toggle stay
   in the bar — on a bilingual site the language is a primary action, not a
   buried one. */
@media (max-width: 860px) {
  .nav-toggle {
    display: block;
  }

  .nav {
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-2);
  }

  .nav-right {
    gap: var(--sp-2);
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--sp-2) var(--sp-4) var(--sp-4);
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out),
      visibility 0s linear 200ms;
  }

  .nav-links[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out),
      visibility 0s;
  }

  /* Full-width rows with a proper tap target, not cramped inline links. */
  .nav-links a {
    display: block;
    padding: var(--sp-3) var(--sp-1);
    border-bottom: 1px solid var(--border);
    border-left: 2px solid transparent;
    font-size: var(--step-0);
    text-transform: none;
    font-family: inherit;
    letter-spacing: 0;
  }

  .nav-links li:last-child a {
    border-bottom: 0;
  }

  .nav-links a[aria-current="page"] {
    border-bottom-color: var(--border);
    border-left-color: var(--purple);
    padding-left: var(--sp-3);
  }
}

@media (max-width: 800px) {
  :root {
    --gutter: var(--sp-4);
  }

  main {
    padding: var(--sp-5) var(--gutter) var(--sp-10);
  }

  .brand-logo {
    width: 32px;
    height: 32px;
  }

  .brand-text {
    font-size: var(--step-0);
  }

  .section {
    padding-top: var(--sp-8);
    margin-top: var(--sp-8);
  }

  .hero {
    padding: var(--sp-6) 0 var(--sp-5);
  }
}

@media (max-width: 560px) {
  .venture-card {
    flex-direction: column;
  }

  .uses-callout {
    justify-content: flex-start;
  }
}

@media (max-width: 360px) {
  .brand-text {
    display: none;
  }
}

/* Reduced motion means fewer and gentler animations, not zero.
   Opacity and colour stay; movement goes. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .nav-links,
  .nav-links[data-open="true"] {
    transition: opacity 150ms ease, visibility 0s;
    transform: none;
  }

  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    transition: opacity 120ms ease;
  }

  main > section {
    animation: fade-in 200ms ease both;
  }

  .btn:hover,
  .btn:active,
  .btn:hover:active,
  .card-link:hover,
  .card-link:active,
  .card-link:hover:active,
  .link-list a:active,
  .link-list a:hover::after,
  .social-card:hover,
  .social-card:active,
  a.venture-card:hover,
  .friend-card:hover,
  .theme-toggle:active,
  .nav-toggle:active,
  .brand:active {
    transform: none;
  }

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


/* ============================================================
   ART DIRECTION — full-viewport hero, scroll reveals, media bands
   ============================================================ */

/* ---------- Scroll reveals ----------
   The hidden start state is applied only once reveal.js has confirmed it can
   run. Without that guard, a script failure would leave the whole page
   invisible — the classic way scroll animation takes a site down. */

.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  will-change: opacity, transform;
}

.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- Full-viewport hero ---------- */

.hero-full {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0 var(--gutter) var(--sp-6);
  margin: 0 calc(var(--gutter) * -1);
  overflow: hidden;
  isolation: isolate;
}

/* Two offset gradient fields rather than one centred glow: an off-axis light
   source reads as depth, a centred one reads as a vignette. */
.hero-full::before,
.hero-full::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(10px);
}

.hero-full::before {
  top: -22vh;
  right: -14vw;
  width: 62vw;
  height: 62vw;
  max-width: 900px;
  max-height: 900px;
  background: var(--glow);
}

.hero-full::after {
  bottom: -30vh;
  left: -18vw;
  width: 52vw;
  height: 52vw;
  max-width: 760px;
  max-height: 760px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.16) 0%, rgba(59, 130, 246, 0) 70%);
}

.hero-full-inner {
  align-self: center;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-top: var(--sp-10);
}

/* The display line. Deliberately larger than any sane "heading" size — at this
   scale the type stops being a label and becomes the image. */
.display {
  font-size: clamp(3.4rem, 13vw, 11rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  font-weight: 700;
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
}

/* The strap under the headline. Same mono small-caps treatment as the eyebrow
   above it, so the two bracket the display line symmetrically. Slightly
   tighter tracking than .eyebrow because this one is a full sentence rather
   than a two-word label — 0.22em would push it past a comfortable line. */
.hero-sub {
  margin: 0 0 var(--sp-6);
  letter-spacing: 0.16em;
  max-width: 54ch;
  line-height: 1.9;
}

/* Second line pushed off-axis. Symmetry is what made the old hero read as a
   template; the offset is what makes it read as designed. */
.display-offset {
  display: block;
  padding-left: 8vw;
}

@media (max-width: 700px) {
  .display-offset {
    padding-left: 0;
  }
}

.display-accent {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.hero-meta-item {
  min-width: 150px;
}

.hero-meta-label {
  display: block;
  font-family: var(--mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: var(--sp-1);
}

.hero-meta-value {
  display: block;
  font-weight: 600;
}

/* Scroll cue. Subtle, and it stops moving for reduced-motion users. */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-decoration: none;
}

.scroll-cue::after {
  content: "\2193";
  animation: nudge 2s var(--ease-in-out) infinite;
}

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ---------- Section headers, art-directed ---------- */

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  margin-bottom: var(--sp-6);
}

.section-head h2 {
  margin: 0;
  font-size: var(--step-3);
}

.section-head .eyebrow {
  margin: 0.4rem 0 0;
}

.section-lede {
  color: var(--muted);
  max-width: 60ch;
  margin: var(--sp-3) 0 0;
}

@media (max-width: 800px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }
}

/* Oversized index numerals — VALERAN's trick of letting structure be visible. */
.section-numeral {
  font-family: var(--mono);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px var(--border);
  letter-spacing: -0.02em;
  display: block;
}

/* ---------- Media bands ----------
   Photo slots. Each one renders as a designed gradient panel until a real
   image is dropped in, so the page never shows a broken or empty frame. */

.media-band {
  position: relative;
  margin: var(--sp-10) calc(var(--gutter) * -1);
  min-height: clamp(240px, 42vh, 460px);
  display: grid;
  place-items: end start;
  padding: var(--sp-6);
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(124, 58, 237, 0.22), rgba(37, 99, 235, 0.18)),
    var(--surface-2);
  background-size: cover;
  background-position: center;
  border-block: 1px solid var(--border);
}

/* When a photo is set via inline style the gradient becomes a scrim over it,
   which keeps the caption legible on any image. */
.media-band[style*="--photo"] {
  background-image:
    linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.35) 100%),
    var(--photo);
}

.media-band-caption {
  position: relative;
  max-width: 46ch;
  color: #ffffff;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
}

.media-band:not([style*="--photo"]) .media-band-caption {
  color: var(--ink);
  text-shadow: none;
}

.media-band-caption h2 {
  color: inherit;
  margin: 0 0 var(--sp-2);
}

.media-band-caption p {
  margin: 0;
  opacity: 0.85;
}

/* Inline photo slot inside a normal grid. */
.media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(37, 99, 235, 0.12)),
    var(--surface-2);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}

/* For 16:9 source material — video thumbnails and stills. Cropping one of
   those to the default 4:3 would slice the title text off both sides. */
.media--wide {
  aspect-ratio: 16 / 9;
}

/* Show the whole image rather than filling the box. Photographs want `cover`
   — a crop is invisible. A thumbnail carries text to its own edges, so any
   crop at all cuts words off; here the letterboxing is the lesser evil. */
.media--contain img {
  object-fit: contain;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-placeholder {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: var(--sp-4);
}

/* ---------- Asymmetric feature row ---------- */

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--sp-6);
  align-items: center;
  margin-top: var(--sp-6);
}

.feature-row.reverse {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.feature-row.reverse .feature-copy {
  order: 2;
}

@media (max-width: 800px) {
  .feature-row,
  .feature-row.reverse {
    grid-template-columns: 1fr;
  }

  .feature-row.reverse .feature-copy {
    order: 0;
  }
}

/* ---------- Cursor response ----------
   Pointer-fine only: on touch there is no hover, and a lift that sticks after
   a tap looks like a bug. */

@media (hover: hover) and (pointer: fine) {
  .lift {
    transition: transform var(--dur-hover) var(--ease-out),
      border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
  }

  .lift:hover {
    transform: translateY(-3px);
    border-color: var(--purple);
    box-shadow: var(--shadow-sm);
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] {
    transform: none;
    transition: opacity 260ms ease;
  }

  .scroll-cue::after {
    animation: none;
  }

  .lift:hover {
    transform: none;
  }
}

/* ---------- Wordmark marquee band ----------

   Replaces the full-bleed photo slot. A photo frame with no photo always reads
   as a gap; a marquee is content that genuinely wants the full width, so the
   band stops being empty space and becomes the point. It repeats the name, so
   it doubles as branding rather than a second list of topics.

   linear easing is deliberate and is the one place on this site that uses it.
   A marquee is a continuous conveyor, not a UI transition — an ease curve
   would make it visibly speed up and slow down on every loop. */

.marquee {
  position: relative;
  margin: var(--sp-10) calc(var(--gutter) * -1);
  padding: var(--sp-6) 0;
  overflow: hidden;
  border-block: 1px solid var(--border);
  background: var(--surface);

  /* Fade both ends so words dissolve rather than being guillotined by the
     viewport edge. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  /* Duration is tied to how wide one group is, not to a feel — a group of
     sixteen words travels roughly twice the distance eight did, so the same
     42s would scroll it at twice the speed. 66s holds it near 55px/s. */
  animation: marquee-scroll 66s linear infinite;
}

/* Hovering stops it. A wordmark band that keeps sliding under the cursor
   feels unresponsive; pausing makes it feel like an object, not a video. */
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee-track {
    animation-play-state: paused;
  }
}

/* Two identical groups sit side by side and the track shifts exactly -50%,
   so the loop point lands where the second group is pixel-aligned with where
   the first began. Any other distance would visibly jump. */
.marquee-group {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-right: var(--sp-5);
  flex: 0 0 auto;
}

.marquee-item {
  font-size: clamp(1.6rem, 4.2vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}

/* Alternating outlined words give the row rhythm, so it reads as a designed
   band rather than a wall of bold text. */
.marquee-item--ghost {
  color: transparent;
  -webkit-text-stroke: 1px var(--muted);
}

.marquee-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--gradient);
}

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

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