/* ==========================================================================
   Cutveo — global stylesheet
   Editorial system: mono micro-labels, numbered indices, staggered placement,
   display type used as a graphic layer, warm cream against near-black.
   Mobile-first. Single source of truth for tokens, layout and components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   TODO(brand): --brand is an ESTIMATE (#4B46EB). Sample the exact hex from the
   source logo file (Instagram profile picture) and replace it here. Every other
   blue in the site derives from this one value, so this is the only line to change.
   -------------------------------------------------------------------------- */
:root {
  /* Palette — brand blue + warm neutrals. No gradients, no second accent. */
  --brand: #4b46eb;
  --brand-hover: #3a35d4;

  --ink: #0e1014;       /* near-black — slabs, headings */
  --ink-soft: #2c2e33;  /* body text on cream */
  --gray: #6b6459;      /* the one gray — mono labels, captions, muted copy */
  --paper: #edeae4;     /* warm cream — the page */
  --paper-alt: #e4e0d8; /* deeper cream — alternating bands */
  --card: #f5f3ef;      /* lightest cream — raised panels */
  --line: rgba(14, 16, 20, 0.16);
  --line-soft: rgba(14, 16, 20, 0.08);
  --on-dark: #f1efeb;
  --on-dark-soft: #8d8a83;

  /* Type */
  --font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale */
  --fs-hero: clamp(2.75rem, 1.2rem + 6.6vw, 6.5rem);
  --fs-ghost: clamp(3rem, 1rem + 10vw, 9rem);
  --fs-h2: clamp(2rem, 1.3rem + 3vw, 3.75rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-mono: 0.6875rem;

  /* Spacing */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --section-y: clamp(4.5rem, 3rem + 8vw, 9rem);

  /* Structure */
  --container: 82rem;
  --container-narrow: 44rem;
  --radius: 4px;
  --radius-lg: 14px;
  --header-h: 64px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 2rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}

p { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }

img, video, iframe { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; }

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

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

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100px;
  z-index: 300;
  background: var(--ink);
  color: var(--on-dark);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--space-sm); color: var(--on-dark); }

/* --------------------------------------------------------------------------
   3. The mono label layer
   The defining device of this system: every piece of structural metadata —
   section index, platform, count, corner note — is set in uppercase mono at a
   fixed small size. It never competes with the display type; it frames it.
   -------------------------------------------------------------------------- */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--gray);
}
.mono--ink { color: var(--ink); }
.mono--brand { color: var(--brand); }
.mono--dark { color: var(--on-dark-soft); }

/* Rule that runs from a label to the edge of its column. */
.mono-rule {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.mono-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--paper-alt); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

/* Section intro: mono index + rule, then the display heading. */
.section-head { max-width: 46rem; margin-bottom: var(--space-xl); }
.section-head__label { margin-bottom: var(--space-lg); }
.section-head h2 { margin-bottom: var(--space-md); }

.lead {
  font-size: var(--fs-lead);
  color: var(--gray);
  line-height: 1.55;
  text-wrap: pretty;
  max-width: 34rem;
}

/* Oversized ghosted heading used as a graphic layer (ref: "Find your tour"). */
.ghost-head {
  font-size: var(--fs-ghost);
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: transparent;
  /* Outlined rather than filled so it reads as a graphic layer. Kept dark
     enough to still function as the section's real heading, not a watermark. */
  -webkit-text-stroke: 1px rgba(14, 16, 20, 0.42);
  text-align: center;
  margin: 0 0 var(--space-xl);
  user-select: none;
}
@supports not (-webkit-text-stroke: 1px red) {
  .ghost-head { color: rgba(14, 16, 20, 0.42); }
}

.divider { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Halftone dot field, masked to fade out (ref: editorial template card). */
.halftone {
  position: absolute;
  inset: 0;
  color: var(--ink);
  background-image: radial-gradient(currentColor 1.1px, transparent 1.2px);
  background-size: 7px 7px;
  opacity: 0.32;
  -webkit-mask-image: linear-gradient(118deg, #000 0%, rgba(0,0,0,0.35) 38%, transparent 66%);
  mask-image: linear-gradient(118deg, #000 0%, rgba(0,0,0,0.35) 38%, transparent 66%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* White on brand blue = 6.2:1. Brand on cream = 5.2:1. Both clear WCAG AA. */
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }

.btn--on-dark { background: var(--on-dark); color: var(--ink); }
.btn--on-dark:hover { background: #fff; color: var(--ink); }

.btn--sm { padding: 0.625rem 1.125rem; }
.btn--lg { padding: 1.125rem 2.5rem; font-size: 0.8125rem; letter-spacing: 0.14em; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-lg);
}

/* Mono text link with a trailing arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.5rem;
}
.link-arrow::after { content: "\2192"; transition: transform 0.18s ease; }
.link-arrow:hover { color: var(--brand); border-color: var(--brand); }
.link-arrow:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Logo mark
   TODO(brand): swap .logo-mark for the exported logo image once supplied.
   -------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.03em;
}
.logo:hover { color: var(--ink); }

.logo-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: -0.04em;
  line-height: 1;
}
.logo-mark--lg {
  width: clamp(120px, 26vw, 190px);
  height: clamp(120px, 26vw, 190px);
  flex-basis: auto;
  font-size: clamp(1.875rem, 6vw, 3rem);
}
.logo--on-dark { color: var(--on-dark); }
.logo--on-dark:hover { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   7. Header — three-zone meta bar (ref: gallery masthead)
   -------------------------------------------------------------------------- */
/* The bar sits on the brand field, not on the paper. On Home it runs straight
   into the masthead panel below it so the two read as one block of colour.
   Cream on brand blue measures 5.2:1 — every value in here stays at full
   opacity, because dimming cream against this blue drops it below 4.5:1. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--brand);
  border-bottom: 1px solid rgba(237, 234, 228, 0.18);
}

.site-header .logo { color: var(--paper); }
.site-header .logo:hover { color: #fff; }
/* The mark inverts — a blue circle would vanish against the blue field. */
.site-header .logo-mark { background: var(--paper); color: var(--brand); }

/* Primary button inverts inside the bar for the same reason. */
.site-header .btn--primary { background: var(--paper); color: var(--brand); }
.site-header .btn--primary:hover { background: #fff; color: var(--brand); }

.site-header .nav-toggle { color: var(--paper); border-color: rgba(237, 234, 228, 0.4); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-h);
}

/* Centre zone: the standing descriptor. Hidden on small screens. */
.site-header__meta { display: none; color: var(--paper); }
@media (min-width: 1024px) {
  .site-header__meta { display: block; }
}

.site-nav { display: flex; align-items: center; gap: var(--space-lg); }

/* Nav items spread across the bar rather than clustering at one end. */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  list-style: none;
}

.site-nav__link {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  padding-block: 0.375rem;
  border-bottom: 1px solid transparent;
}
.site-nav__link:hover { color: #fff; border-color: rgba(237, 234, 228, 0.5); }
/* Active state is marked by rule + slash, never by dimming the others. */
.site-nav__link[aria-current="page"] { color: #fff; border-color: currentColor; }
.site-nav__link[aria-current="page"]::before { content: "/ "; }

/* Hamburger — mobile only; opens the full-screen overlay. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle__bars { display: block; width: 15px; height: 1px; background: currentColor; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 15px;
  height: 1px;
  background: currentColor;
}
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  .site-header .site-nav { display: none; }
}

/* ── Full-screen overlay menu (ref: dark menu with oversized type) ────────── */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  background: var(--ink);
  color: var(--on-dark);
  padding: var(--space-md) 0 var(--space-xl);
  overflow-y: auto;
}
.nav-overlay[data-open="true"] { display: flex; }

.nav-overlay__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.nav-overlay__close {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid rgba(241, 239, 235, 0.22);
  border-radius: 50%;
  color: var(--on-dark);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}
.nav-overlay__close:hover { background: rgba(241, 239, 235, 0.08); }

/* The nav takes the slack so the type block centres and the foot stays pinned. */
.nav-overlay > nav {
  flex: 1;
  display: grid;
  align-content: center;
}

.nav-overlay__list {
  list-style: none;
  display: grid;
  gap: 0.25rem;
  padding-block: var(--space-xl);
  text-align: center;
}
.nav-overlay__link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 11vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--on-dark);
  text-decoration: none;
  padding: 0.125rem 0.75rem;
}
.nav-overlay__link[aria-current="page"] {
  background: var(--on-dark);
  color: var(--ink);
  border-radius: var(--radius);
}
.nav-overlay__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border-top: 1px solid rgba(241, 239, 235, 0.14);
  padding-top: var(--space-md);
}
/* Brand blue only clears 3:1 against the near-black slab — not enough for
   11px text. Links on dark grounds use the light neutral instead. */
.nav-overlay__foot a { color: var(--on-dark); }
.nav-overlay__foot a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   8. Masthead — the brand field
   The blue runs edge to edge and continues straight up into the sticky bar, so
   the nav, the headline and the meta row all sit on one uninterrupted plane.
   Everything on it is cream at full opacity (5.2:1).
   -------------------------------------------------------------------------- */
.masthead {
  background: var(--brand);
  color: var(--paper);
  padding-block: clamp(2.5rem, 2rem + 5vw, 5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.masthead__label { color: var(--paper); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.masthead__label.mono-rule::after { background: rgba(237, 234, 228, 0.35); }

/* Set as large as the panel allows: tight tracking, near-solid leading. */
.masthead__title {
  color: var(--paper);
  font-size: clamp(2.75rem, 0.5rem + 9.5vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}

/* Circular affordance trailing the headline (ref: badge after the last line). */
.masthead__badge {
  display: inline-grid;
  place-items: center;
  width: clamp(2.5rem, 5vw, 3.75rem);
  height: clamp(2.5rem, 5vw, 3.75rem);
  margin-left: 0.5rem;
  vertical-align: baseline;
  transform: translateY(0.12em);
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1;
  transition: transform 0.18s ease;
}
.masthead__badge:hover { color: var(--paper); transform: translateY(0.12em) scale(1.06); }

.masthead__body {
  display: grid;
  gap: var(--space-md);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 900px) {
  /* Copy sits to the right, echoing the reference's asymmetry. */
  .masthead__body { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
  .masthead__body > * { grid-column: 2; }
}

.masthead__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--paper);
  max-width: 34rem;
  margin: 0;
}

.masthead .btn-row { margin-top: var(--space-md); }
.masthead .btn--primary { background: var(--paper); color: var(--brand); }
.masthead .btn--primary:hover { background: #fff; color: var(--brand); }
.masthead .btn--ghost { color: var(--paper); border-color: rgba(237, 234, 228, 0.45); }
.masthead .btn--ghost:hover { background: var(--paper); color: var(--brand); border-color: var(--paper); }

/* ── Meta columns along the bottom edge of the field ──────────────────────── */
.masthead__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(237, 234, 228, 0.35);
}
@media (min-width: 760px) { .masthead__meta { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) {
  .masthead__meta { grid-template-columns: repeat(5, 1fr); }
  /* Last column hangs off the right edge, as in the reference. */
  .masthead__meta > :last-child { text-align: right; }
}

.masthead__meta dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Full opacity, not dimmed: cream at 85% over this blue falls to 4.2:1,
     under the floor for 11px text. Hierarchy comes from the font, not fading. */
  color: var(--paper);
  margin-bottom: 0.5rem;
}
.masthead__meta dd {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.45;
  color: var(--paper);
}

/* ── Showreel ──────────────────────────────────────────────────────────────
   Dark hero block directly beneath the masthead field: heading, lead, CTA and
   a click-to-load YouTube embed. Copy stacks above the frame and stays
   centred below ~900px; from 900px up they sit side by side — a narrow fixed
   copy column against a frame that takes the rest of the width, copy
   right-aligned toward the seam — matching a reference the founder supplied.
   Type, colour and the embed mechanism are Cutveo's own.
   -------------------------------------------------------------------------- */
.showreel { background: var(--ink); }

/* Wider than the site's standard .container — the frame is meant to dominate
   the section, which needs more room than the usual 82rem measure gives it.
   Scoped to this section only; every other section keeps the standard width. */
.showreel .container { max-width: 96rem; }

.showreel__grid { display: grid; gap: var(--space-xl); }

.showreel__copy { text-align: center; }

.showreel__label { justify-content: center; }
.showreel__label.mono-rule::after { display: none; }

.showreel__title {
  color: var(--on-dark);
  font-size: var(--fs-h2);
  max-width: 20ch;
  margin-inline: auto;
}

.showreel__lead {
  color: var(--on-dark-soft);
  margin-inline: auto;
}

.showreel__frame {
  background: var(--ink);
  border: 1px solid rgba(241, 239, 235, 0.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Nested inside .showreel__copy now, not a separate full-width row — it
   inherits that column's alignment (centred on mobile, right-aligned on
   desktop) so it always sits under the lead rather than spanning the grid. */
.showreel__cta { margin-top: var(--space-lg); }

@media (min-width: 900px) {
  .showreel__grid {
    /* Fixed, narrow copy column; the frame absorbs whatever width is left,
       which is what makes it read as dominant rather than an even 50/50. */
    grid-template-columns: minmax(16rem, 26rem) 1fr;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
  }

  /* Copy hugs the seam between the two columns — box pushed right via
     margin-left: auto, text right-aligned so a wrapped second line follows
     the same edge rather than centring under the first. */
  .showreel__copy { text-align: right; }
  .showreel__label { justify-content: flex-end; }
  .showreel__title,
  .showreel__lead { margin-inline: 0; margin-left: auto; }
}

.reel { position: relative; aspect-ratio: 16 / 9; }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reel__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.875rem;
  justify-items: center;
  text-align: center;
  padding: var(--space-md);
}
.reel__note { margin: 0; max-width: 22rem; }

/* --------------------------------------------------------------------------
   10. Case Study — the founder's own account, standing in for client proof
   (structure follows a reference the founder supplied: subject + figures,
   then Before / What we did / Impact, with a reel row under each column)
   -------------------------------------------------------------------------- */
.case-study { position: relative; overflow: hidden; }

/* Header: subject on the left, headline figures on the right. */
.case-study__masthead {
  display: grid;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
@media (min-width: 900px) {
  .case-study__masthead {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: clamp(3rem, 6vw, 6rem);
  }
}

.case-study__subject { margin-bottom: var(--space-2xs); }
.case-study__role { color: var(--brand); }

/* Figures read as the headline claim, so they carry display weight — the
   mono label under each one is what keeps them from floating free of their
   meaning. Rendered by renderStats() in js/experience.js. */
.case-study__figures {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-md);
}
.case-study__figure-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--space-2xs);
}
.case-study__figure-label { margin: 0; }

/* Before | What we did + Impact. Columns are flex so each one's reel row can
   be pushed to the bottom (margin-top: auto) and the two rows line up even
   when the copy above them runs to different lengths. */
.case-study__grid {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}
@media (min-width: 900px) {
  .case-study__grid {
    --case-gap: clamp(3rem, 6vw, 6rem);
    grid-template-columns: 1fr 1fr;
    gap: var(--case-gap);
  }
  /* Rule between the two columns. The negative margin pulls the border to the
     middle of the gap; the matching padding puts the content back where the
     grid put it, so only the rule moves. */
  .case-study__col + .case-study__col {
    padding-left: calc(var(--case-gap) / 2);
    margin-left: calc(var(--case-gap) / -2);
    border-left: 1px solid var(--line);
  }
}

.case-study__col { display: flex; flex-direction: column; }
.case-study__col-head { color: var(--ink); margin-bottom: var(--space-sm); }
.case-study__col-head:not(:first-child) { margin-top: var(--space-lg); }

.case-study__did { list-style: none; display: grid; gap: var(--space-sm); }
.case-study__did li { padding-left: 1.5rem; position: relative; }
.case-study__did li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--brand);
}

.case-study__reels { margin-top: auto; padding-top: var(--space-lg); }
.case-study__reels-label { margin-bottom: var(--space-sm); }

.case-study__reel-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

/* Cover + its view count underneath. Both rows carry the caption line, which
   is what keeps the two rows of images level with each other. */
.case-study__reel-slot img {
  aspect-ratio: 9 / 16;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--ink);
}
.case-study__reel-views { margin: var(--space-xs) 0 0; }

/* Empty-state shown while a data array is intentionally empty. */
.placeholder-box {
  padding: var(--space-md);
  border: 1px dashed var(--line);
  color: var(--gray);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  line-height: 1.8;
  text-transform: uppercase;
}
.placeholder-box strong { color: var(--ink); font-weight: 500; }
.placeholder-box code { text-transform: none; letter-spacing: 0; }

/* Tools — numbered mono list, not chips. */
.tool-row { list-style: none; display: grid; counter-reset: tool; }
.tool-chip {
  counter-increment: tool;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tool-chip::before {
  content: "(" counter(tool, decimal-leading-zero) ")";
  color: var(--brand);
}

/* Standard / AI sub-groups within one Tools column. Each .tool-group holds its
   own label + its own <ul class="tool-row">, so numbering restarts at (01)
   per group rather than running Standard straight into AI. */
.tool-group + .tool-group { margin-top: var(--space-md); }
.tool-group__label { margin-bottom: 0.5rem; }
.tool-group__note { margin-top: 0.5rem; }

/* ── Tools & AI band (Home, below Case Study) ─────────────────────────────────
   Full-bleed brand-blue strip listing every tool as plain text, travelling
   right to left. Same seamless-loop mechanism as the reel strip above
   (double the list, animate to translateX(-50%), reuse @keyframes
   reel-scroll) — just text spans instead of media tiles. */
.tools-band { position: relative; background: var(--brand); overflow: hidden; }

.tools-band__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  /* Trailing gap — see the reel-track comment above for why this is what
     makes the -50% wrap invisible. Top/bottom padding is deliberately tight
     (roughly half the site's usual --space-lg band padding) — this strip
     reads as a thin ticker, not a full section. */
  padding: var(--space-xs) clamp(1.5rem, 3vw, 2.5rem) var(--space-xs) 0;
  margin: 0;
  list-style: none;
  animation: reel-scroll var(--tools-band-duration, 40s) linear infinite;
  will-change: transform;
}
.tools-band[data-paused="true"] .tools-band__track { animation-play-state: paused; }

.tools-band__item {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: clamp(0.8125rem, 0.7rem + 0.4vw, 1rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}
/* Group markers ("Standard" / "AI") read as dividers, not tools — brand-blue
   field rule applies (nothing dimmed), so the distinction is a filled pill,
   not a lighter grey. */
.tools-band__item--group {
  padding: 0.25rem 0.75rem;
  background: var(--on-dark);
  color: var(--brand);
  border-radius: 999px;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   11. Project cards (shared: Home preview + Projects page)
   No card chrome — image, mono labels and text sit directly on the paper.

   Pinterest-style masonry, pure CSS (multi-column, no JS library). A 9:16
   card and a 16:9 card can sit in the same row of columns without either one
   stretching to match the other or leaving a dead gap beneath the shorter
   one — which is what the old scatter grid did. The one tradeoff of this
   technique: cards read column-major (top-to-bottom, then next column across)
   rather than strict left-to-right — that's inherent to CSS multicol, not a
   bug, and it's how every pure-CSS Pinterest layout works.
   -------------------------------------------------------------------------- */
.project-grid {
  display: block;
  column-gap: var(--space-md);
  column-count: 1;
  list-style: none;
}
@media (min-width: 560px)  { .project-grid { column-count: 2; } }
@media (min-width: 900px)  { .project-grid { column-count: 3; } }
@media (min-width: 1300px) { .project-grid { column-count: 4; } }

.project-card {
  display: flex;
  flex-direction: column;
  /* Keeps one card from splitting across two columns. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: var(--space-md);
}

.project-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: 0.625rem;
  margin-bottom: 0.875rem;
  border-bottom: 1px solid var(--line);
}

.project-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.project-card__media--vertical { aspect-ratio: 9 / 16; }
.project-card__media :is(img, video, iframe) {
  width: 100%; height: 100%; object-fit: cover; border: 0; display: block;
}
.project-card__media a { display: block; width: 100%; height: 100%; }

/* Shown only when a project has no media file yet. */
.project-card__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: var(--space-sm);
  text-align: center;
  color: var(--on-dark-soft);
}

.project-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.875rem;
}
.project-card__title { margin: 0; }
.project-card__desc { margin: 0; font-size: var(--fs-small); color: var(--gray); line-height: 1.5; }
.project-card__metric {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}
.project-card__foot { margin-top: 0.375rem; }

/* ── Reel wall (home "Selected Work") ─────────────────────────────────────────
   Columns of vertical tiles drifting at different speeds and directions.
   -------------------------------------------------------------------------- */
.reel-wall__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.reel-toggle {
  flex: 0 0 auto;
  padding: 0.5rem 1.125rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.reel-toggle:hover { border-color: var(--gray); background: var(--card); }

/* Full-bleed strip. No edge mask — tiles run in hard from the right edge and
   leave hard at the left, exactly as they meet the viewport. */
.reel-wall {
  overflow: hidden;
}

.reel-track {
  display: flex;
  width: max-content;
  gap: var(--space-md);
  /* Trailing gap. The track holds two identical sets, so with this the halfway
     point is exactly one set + one gap — which is why -50% wraps invisibly. */
  padding-right: var(--space-md);
  margin: 0;
  list-style: none;
  /* Duration is set per-strip from the measured width — see js/reels.js. */
  animation: reel-scroll var(--reel-duration, 60s) linear infinite;
  will-change: transform;
}

/* Leftward travel, so tiles enter from the right. */
@keyframes reel-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.reel-wall[data-paused="true"] .reel-track { animation-play-state: paused; }

.reel-tile {
  position: relative;
  flex: 0 0 auto;
  width: clamp(9.25rem, 19vw, 15rem);
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
}
.reel-tile :is(video, img) { width: 100%; height: 100%; object-fit: cover; }

.reel-tile__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: var(--space-sm);
  text-align: center;
}

/* Filter tabs — mono, underline-marked rather than pill-filled. */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.filter-tab {
  padding: 0.25rem 0;
  border: 0;
  background: transparent;
  color: var(--gray);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.filter-tab:hover { color: var(--ink); }
.filter-tab[aria-selected="true"] { color: var(--ink); border-color: var(--brand); }
.filter-tab[aria-selected="true"]::before { content: "/ "; color: var(--brand); }

.grid-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: clamp(3rem, 6vw, 5rem);
}

/* --------------------------------------------------------------------------
   12. About — tall panel row (ref: editorial template cards)
   -------------------------------------------------------------------------- */
.panel-row {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .panel-row { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
}

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xl);
  min-height: clamp(20rem, 42vw, 30rem);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.panel--light { background: var(--card); }
.panel--dark { background: var(--ink); color: var(--on-dark-soft); }
.panel--mark { background: var(--paper-alt); align-items: center; justify-content: center; }

.panel__content { position: relative; z-index: 1; }
/* Panel headings sit well below the page's display scale — they label the
   panel, they don't compete with the masthead. */
.panel__content :is(h2, h3, h4) {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin-bottom: 0.625rem;
}
.panel--dark .panel__content :is(h2, h3, h4) { color: var(--on-dark); }
.panel__content p { font-size: var(--fs-small); line-height: 1.55; margin: 0; }
.panel--light .panel__content p { color: var(--gray); }

.panel__index { position: relative; z-index: 1; }

.about-grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); }
}

.prose p { max-width: 36rem; }
.prose > h3 { margin-top: var(--space-lg); }
.prose > h3:first-child { margin-top: 0; }

.skill-columns { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 600px) { .skill-columns { grid-template-columns: repeat(2, 1fr); } }

.skill-group h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: var(--space-2xs);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--line);
}
.skill-list { list-style: none; }
.skill-list li {
  padding: 0.5rem 0;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}

/* --------------------------------------------------------------------------
   13. CTA / booking
   -------------------------------------------------------------------------- */
.cta { background: var(--ink); color: var(--on-dark-soft); }
.cta h2 { color: var(--on-dark); }
.cta .lead { color: var(--on-dark-soft); margin-inline: auto; }
.cta .mono-rule::after { background: rgba(241, 239, 235, 0.18); }
.cta .section-head--center { margin-inline: auto; text-align: center; }
.cta .section-head--center .lead { text-align: center; }

/* Booking block — a framed link, not an embed. Sizes to its own content, so
   there is no iframe height to fight. */
.booking {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  padding: clamp(2rem, 5vw, 3.5rem) var(--space-md);
  border: 1px solid rgba(241, 239, 235, 0.18);
  border-radius: var(--radius-lg);
}

.booking__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) clamp(2rem, 6vw, 4rem);
  margin: 0;
}
.booking__meta > div { text-align: center; }
.booking__meta dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin-bottom: 0.375rem;
}
.booking__meta dd {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--on-dark);
}

.cta__alt {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.cta__alt a { color: var(--on-dark); }
.cta__alt a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding-block: var(--space-xl) var(--space-lg);
}

.site-footer__top {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .site-footer__top { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-xl); }
}

.site-footer__tagline { margin-top: var(--space-md); max-width: 20rem; }

.footer-heading {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--line);
}

.footer-list { list-style: none; display: grid; }
.footer-list a {
  display: block;
  padding: 0.4375rem 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}
.footer-list a:hover { color: var(--brand); }

.social-row { display: flex; gap: var(--space-2xs); list-style: none; margin-top: var(--space-sm); }
.social-link {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
}
.social-link:hover { color: var(--brand); border-color: var(--brand); }
.social-link svg { width: 16px; height: 16px; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   15. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* The blanket rule above would run the reel loop to completion in 0.01ms and
     leave every track parked at -50%. Stop it at the start instead — the wall
     reads as a still grid, and the Play button opts back in. */
  .reel-track {
    animation: none !important;
    transform: none !important;
  }
}