/* ============================================================
   George E. Kennedy, Jr. — Design tokens
   Palette: near-black ink on warm-white paper, one signature
   accent borrowed from a broadcast camera's tally light — the
   red indicator that means "this is live."
   ============================================================ */

:root {
  --ink: #131313;
  --ink-soft: #4a4a48;
  --paper: #fbfbf9;
  --paper-raised: #ffffff;
  --line: #e2e0da;
  --tally: #e0332b;
  --tally-dim: #f4d6d4;

  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --maxw: 1100px;
  --gutter: 24px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Tally mark: the signature element ----------
   A small live-camera tally dot used sparingly as a section
   marker and hover indicator — never as decoration alone. */
.tally {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tally);
  box-shadow: 0 0 0 3px var(--tally-dim);
  flex: none;
}

.tally-pulse {
  animation: tally-pulse 2.8s ease-in-out infinite;
}

@keyframes tally-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px var(--tally-dim);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(224, 51, 43, 0.18);
    opacity: 0.75;
  }
}

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

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 251, 249, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  /* Promotes the sticky header to its own GPU compositor layer instead of
     letting the browser recalculate it on the main thread every scroll
     frame — without this, position:sticky elements are a common cause of
     a "catching"/stuttering feeling during scroll, especially on iOS. */
  transform: translateZ(0);
  will-change: transform;
}

@media (max-width: 640px) {
  /* backdrop-filter blur is expensive to recompute every scroll frame,
     and is a well-known cause of scroll jank on mobile GPUs. The header
     background is already 92% opaque, so dropping the blur specifically
     on mobile costs very little visually while meaningfully smoothing
     scroll performance. Bumped opacity slightly to compensate for the
     softening the blur was providing. */
  .site-header {
    backdrop-filter: none;
    background: rgba(251, 251, 249, 0.97);
  }
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 112px;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
  max-width: 1400px;
}

.header-tagline {
  display: none;
}

@media (min-width: 761px) {
  .site-header .wrap {
    padding-left: 32px;
    padding-right: 32px;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.header-logo-img {
  height: 78px;
  width: auto;
  border-radius: 3px;
  transition: transform 0.3s ease;
}

.brand:hover .header-logo-img {
  transform: scale(1.06) rotate(-2deg);
}

@media (max-width: 480px) {
  .header-logo-img { height: 74px; }
}

.brand small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.68rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}

nav.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
}

nav.primary-nav a {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 2px 3px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.5s ease, border-color 0.5s ease;
}

nav.primary-nav a:hover {
  color: var(--tally);
}

nav.primary-nav a[aria-current="page"] {
  color: var(--tally);
  border-bottom-color: var(--tally);
}

nav.primary-nav li.has-sub {
  position: relative;
}

nav.primary-nav li.has-sub > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

nav.primary-nav li.has-sub > a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 2px;
}

nav.primary-nav .submenu {
  display: block;
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 0;
  min-width: 160px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s;
  z-index: 50;
}

nav.primary-nav li.has-sub:hover .submenu,
nav.primary-nav li.has-sub.open .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

nav.primary-nav .submenu li {
  display: block;
}
nav.primary-nav .submenu li + li {
  margin-top: 4px;
}
nav.primary-nav .submenu a {
  display: block;
  padding: 10px 12px;
  border-bottom: none;
  border-radius: 0;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
nav.primary-nav .submenu a:hover {
  background: none;
  color: var(--tally);
  border-bottom: none;
  transform: translateX(2px);
}

.header-social {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 2px;
}

.header-social a {
  color: var(--ink-soft);
  display: inline-flex;
  transition: color 0.5s ease;
}
.header-social a:hover { color: var(--tally); }

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

@media (max-width: 1024px) {
  nav.primary-nav .submenu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    padding-left: 14px;
    opacity: 1;
    visibility: visible;
    display: none;
  }
  nav.primary-nav li.has-sub.open .submenu { display: block; }
  nav.primary-nav li.has-sub.open .submenu {
    transform: none;
  }
  nav.primary-nav li.has-sub > a::after { margin-left: auto; }
  nav.primary-nav li.has-sub > a { width: 100%; justify-content: space-between; }

  .header-right {
    display: flex;
    position: absolute;
    top: 112px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper-raised);
    border-bottom: 1px solid var(--line);
    padding: 0 var(--gutter);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.35s ease, transform 0.35s ease, max-height 0.35s ease, padding 0.35s ease;
    pointer-events: none;
  }
  .header-right.open {
    max-height: 600px;
    padding: var(--gutter);
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  nav.primary-nav ul {
    flex-direction: column;
    gap: 0;
  }
  nav.primary-nav li { border-bottom: 1px solid var(--line); }
  nav.primary-nav li:last-child { border-bottom: none; }
  nav.primary-nav a { display: block; padding: 14px 2px; border-bottom: none; }

  .header-social {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
}

/* ---------- Hamburger icon ---------- */
.nav-toggle .icon-close { display: none; }
.nav-toggle.open .icon-burger { display: none; }
.nav-toggle.open .icon-close { display: block; }

/* ---------- Full-bleed photo hero / slider (homepage) ---------- */
.photo-hero,
.video-hero {
  position: relative;
  width: 100%;
  height: calc(100vh - 113px);
  height: calc(100svh - 113px);
  min-height: 480px;
  overflow: hidden;
  background: var(--ink);
  scroll-margin-top: 120px;
}

@media (max-width: 640px) {
  .photo-hero,
  .video-hero {
    height: 62vh;
    height: 62svh;
    min-height: 360px;
  }
}

/* ---------- Homepage photo collage (test layout) ---------- */
.hero-collage {
  position: relative;
  width: 100%;
  height: calc(100vh - 113px);
  height: calc(100svh - 113px);
  min-height: 480px;
  overflow: hidden;
  background: var(--ink);
}

.hero-single-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.hero-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Inactive slides are fully removed from paint via visibility, not just
     hidden via opacity — with 8 large images stacked in the same spot,
     leaving all of them paintable (even at opacity 0) adds real
     compositing overhead the browser has to carry through every scroll
     frame. content-visibility gives the same skip for layout/paint cost. */
  visibility: hidden;
  content-visibility: auto;
  /* opacity fades smoothly, but visibility is a discrete property that
     snaps instantly even with a transition listed — without delaying it,
     an outgoing slide goes invisible before its fade-out finishes, and an
     incoming slide's visibility can lag behind its fade-in starting, both
     of which show up as a visible pop/glitch right at the crossfade. The
     delay on the hidden state only (not on becoming visible) makes the
     visibility change land exactly when the opacity fade actually
     finishes, so the crossfade reads as one smooth motion. */
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}

.hero-slider .slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: opacity 0.9s ease, visibility 0s linear;
}


.hero-collage .tile {
  position: relative;
  overflow: hidden;
}

.hero-collage .tile-a { grid-row: 1 / 3; grid-column: 1; }
.hero-collage .tile-b { grid-row: 1; grid-column: 2; }
.hero-collage .tile-c { grid-row: 2; grid-column: 2; }

.hero-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: collage-breathe 34s ease-in-out infinite alternate;
}

.hero-collage .tile-b img { animation-delay: -11s; }
.hero-collage .tile-c img { animation-delay: -22s; }

@keyframes collage-breathe {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-collage img { animation: none; }
  .hero-slider .slide { transition: none; }
}

/* Rotating mini-sliders for tile-b and tile-c */
.hero-collage .mini-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.8s ease;
  animation: none;
}
.hero-collage .mini-slider img.active {
  opacity: 1;
  z-index: 1;
}

@keyframes collage-kenburns {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.1) translate(-1%, -1%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-collage img { animation: none; }
}

.pitch-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(10,10,10,0.88);
  color: #fff;
  text-decoration: none;
  padding: 16px var(--gutter);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  transition: background 0.2s ease;
}
.pitch-banner:hover { background: #000; }
.pitch-banner svg { flex: none; transition: transform 0.2s ease; }
.pitch-banner:hover svg { transform: translateX(3px); }
#pitch-banner-text { transition: opacity 0.4s ease; }

@media (max-width: 640px) {
  .pitch-banner {
    font-size: 0.75rem;
    padding: 18px var(--gutter);
    line-height: 1.4;
  }
}

.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  animation: scroll-bob 3.5s ease-in-out infinite;
}

.scroll-indicator span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.scroll-indicator svg {
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.5));
}

@keyframes scroll-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

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

@media (max-width: 640px) {
  .hero-collage {
    height: 78vh;
    height: 78svh;
    min-height: 480px;
  }
}

.photo-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.video-hero video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--ink);
  display: block;
}

.video-hero .video-hero-caption {
  position: absolute;
  left: var(--gutter);
  bottom: 112px;
  z-index: 2;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  pointer-events: none;
}

@media (max-width: 640px) {
  .video-hero .video-hero-caption {
    bottom: 130px;
  }
}

.hero-slider-overlay {
  position: absolute;
  right: 60px;
  bottom: 50%;
  margin-bottom: -95px;
  z-index: 10;
  max-width: 460px;
  background: #000000;
  border: none;
  border-radius: 0;
  padding: 30px 32px;
  transform: rotate(-1.5deg);
  transition: opacity 0.6s ease, transform 0.6s ease;
  box-shadow: 0 20px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}

.hero-slider-overlay p {
  margin: 0;
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
  line-height: 1.5;
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
}

.hero-caption-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hero-caption-close:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.6);
}

.hero-slider-overlay.dismissed {
  opacity: 0;
  transform: rotate(-1.5deg) translateY(16px);
  pointer-events: none;
}

@media (min-width: 761px) {
  .hero-slider-overlay { right: max(68px, calc((100vw - 1400px) / 2 + 68px)); }
}

@media (max-width: 640px) {
  .hero-slider-overlay {
    left: 12px;
    right: 12px;
    bottom: 16px;
    margin-bottom: 0;
    max-width: none;
    padding: 26px 26px;
  }
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  font-family: var(--font-mono);
  cursor: pointer;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle:focus,
.nav-toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.nav-toggle svg {
  stroke: var(--ink);
  display: block;
}

@media (max-width: 1024px) {
  nav.primary-nav { display: block; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------- Hero ---------- */
/* ---------- About page split hero (photo edge-to-edge, text beside) ---------- */
.split-hero {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  min-height: 480px;
  border-bottom: 1px solid var(--line);
}

.split-hero .split-photo {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}

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

.split-hero .split-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 40px var(--gutter);
}

.split-text .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.split-text h1 {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  max-width: 16ch;
}

.split-text h1.nowrap-title {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(1.5rem, 4.5vw, 3.4rem);
}

.split-text .role {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-top: 18px;
}

.pull-quote {
  margin: 28px 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--tally);
  max-width: 48ch;
}
.pull-quote p {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.pull-quote p em {
  font-style: italic;
}
.pull-quote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .split-text h1.about-title {
    white-space: normal;
    max-width: 16ch;
    font-size: clamp(2rem, 8vw, 2.6rem);
  }
}

@media (max-width: 900px) {
  .split-hero {
    grid-template-columns: 1fr;
  }
  .split-hero .split-photo {
    height: 340px;
  }
  .split-hero .split-text {
    padding: 32px var(--gutter);
  }
}

.hero {
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--line);
}

.hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  max-width: 16ch;
}

/* Keeps a specific heading on one line regardless of viewport width */
.hero h1.nowrap-title {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(1.5rem, 6.2vw, 4rem);
}

@media (max-width: 640px) {
  .hero h1.about-title {
    white-space: normal;
    max-width: 16ch;
    font-size: clamp(2rem, 8vw, 2.6rem);
  }
}

.about-bio-photo {
  margin-top: 0;
}

@media (max-width: 640px) {
  .about-bio-photo {
    margin-top: 16px;
  }
}

.hero .role {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-top: 18px;
}

.hero-floating-photo {
  position: absolute;
  top: -30px;
  right: 0;
  width: 280px;
  transform: rotate(5deg);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  z-index: 2;
}

@media (max-width: 760px) {
  .hero-floating-photo {
    top: auto;
    bottom: -16px;
    right: 4px;
    width: 150px;
  }
}

.hero .cta-row {
  display: flex;
  gap: 16px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 13px 22px;
  border-radius: 4px;
  border: 1px solid var(--ink);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn.primary {
  background: var(--ink);
  color: var(--paper);
}
.btn.primary:hover { background: var(--tally); border-color: var(--tally); }

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

/* ---------- Sections ---------- */
.section {
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.section-head h2 {
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-head .see-all {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--ink);
}
.section-head .see-all:hover { color: var(--tally); border-color: var(--tally); }

/* ---------- Cert / skills strip ---------- */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.strip div {
  background: var(--paper);
  padding: 20px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
}

.strip div span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.cert-link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none;
  border-bottom: 1px solid var(--line);
  background: none;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
}
.cert-link:hover { color: var(--tally); border-color: var(--tally); }

/* ---------- Post cards / list ---------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 28px;
}

.post-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-raised);
  transition: border-color 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.post-card:hover {
  border-color: var(--tally);
  transform: translateY(-2px);
}

.post-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
}
.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.post-card:hover .post-thumb img { transform: scale(1.04); }

.post-card-body {
  padding: 22px 26px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.post-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.post-card p {
  color: var(--ink-soft);
  font-size: 0.94rem;
  flex-grow: 1;
}

.post-card .read {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Article ---------- */
.article-head {
  padding: 72px 0 40px;
  border-bottom: 1px solid var(--line);
}

.article-head h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  max-width: 22ch;
}

.article-head .subtitle {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-top: 14px;
}

.article-body {
  max-width: 68ch;
  margin: 0 auto;
  padding: 56px var(--gutter);
  font-size: 1.05rem;
}

.article-body h2 { margin-top: 1.6em; font-size: 1.4rem; }
.article-body p { margin-bottom: 1.3em; }
.article-body ul { margin-top: 0; margin-bottom: 1.3em; padding-left: 1.3em; }
.article-body li { margin-bottom: 0.5em; }
.article-body .lede {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin-bottom: 1.6em;
}
.article-body figure {
  margin: 0 0 2em;
}
.article-body figure img,
.article-body figure video {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}
.article-body figcaption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 10px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}
.back-link:hover { color: var(--tally); }

/* ---------- Photos / gallery ---------- */
.filter-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.filter-tab {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper-raised);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.filter-tab:hover {
  border-color: var(--tally);
  color: var(--tally);
}

.filter-tab.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.gallery-item.filtered-out {
  display: none;
}

@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

.gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  padding: 0;
  cursor: pointer;
  display: block;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.gallery-item:hover img { transform: scale(1.05); }

.gallery-item .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
}

/* ---------- Lightbox ---------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.94);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}
.lightbox-overlay.open { display: flex; }

.lightbox-figure {
  margin: 0;
  max-width: 100%;
  min-width: 0;
  text-align: center;
}
.lightbox-figure img {
  max-width: 100%;
  max-height: 76vh;
  max-height: 76svh;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
}

@media (max-width: 640px) {
  /* On small phone screens, 76vh leaves the certificate dominating
     almost the entire visible viewport (nav bar barely visible above
     it, page content barely visible below) — reads as oversized/
     "stretched" even though the image itself isn't distorted. A
     smaller cap gives real breathing room on mobile specifically.
     svh (not just vh) matters here too — the same mobile
     address-bar-collapse issue that caused the hero to jump/swell
     earlier can make a plain vh-based max-height overflow the
     actually-visible screen when the browser chrome is showing. */
  .lightbox-overlay {
    padding: 40px 16px;
  }
  .lightbox-figure img {
    max-height: 58vh;
    max-height: 58svh;
  }
}
.lightbox-figure figcaption {
  color: #f4f2ec;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  margin-top: 16px;
}

.lightbox-close,
.lightbox-arrow {
  position: absolute;
  background: none;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}
.lightbox-close:hover,
.lightbox-arrow:hover { border-color: #fff; }

.lightbox-close { top: 20px; right: 20px; width: 40px; height: 40px; }
.lightbox-arrow { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.lightbox-arrow.prev { left: 16px; }
.lightbox-arrow.next { right: 16px; }

@media (max-width: 600px) {
  .lightbox-overlay { padding: 60px 12px; }
  .lightbox-arrow { width: 38px; height: 38px; }
  .lightbox-close { width: 34px; height: 34px; }
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-info dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-top: 22px;
}
.contact-info dd {
  margin: 4px 0 0;
  font-size: 1.05rem;
}
.contact-info dd a:hover { color: var(--tally); }

.field {
  margin-bottom: 20px;
}
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  color: var(--ink-soft);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--paper-raised);
  color: var(--ink);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--tally);
  outline-offset: 1px;
  border-color: var(--tally);
}
.field textarea { min-height: 130px; resize: vertical; }

.form-note {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 16px;
}

/* ---------- Footer ---------- */
footer.site-footer {
  padding: 60px 0 48px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.footer-break { display: none; }
@media (max-width: 640px) {
  .footer-break { display: inline; }
}

footer.site-footer a { transition: color 0.15s ease; }
footer.site-footer a:hover { color: var(--tally); }

.footer-grid {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  min-height: 60px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
footer.site-footer p { margin: 0; }

.footer-links {
  display: flex;
  gap: 24px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer-logo-center {
  height: 84px;
  width: auto;
  display: block;
  margin-right: 10px;
}
.footer-logo-link {
  display: inline-flex;
  order: -1;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 640px) {
  .footer-grid {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .footer-left-stack {
    align-items: center;
  }
  .footer-logo-center {
    margin-right: 0;
    margin-bottom: 8px;
  }
  .footer-logo-link {
    justify-content: center;
    width: 100%;
  }
}

/* ---------- Minimal homepage ---------- */
.minimal-home {
  min-height: calc(100vh - 113px);
  min-height: calc(100svh - 113px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px var(--gutter) 80px;
}

.minimal-home .stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  max-width: 420px;
}

.minimal-home .logo-mark {
  width: 220px;
  border-radius: 4px;
}

.minimal-home .portrait {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

.minimal-home .name-line {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
}

.minimal-home .name-line span {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.minimal-home nav.link-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.minimal-home nav.link-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.minimal-home nav.link-list a:hover {
  border-color: var(--tally);
  color: var(--tally);
}

.minimal-home .socials {
  display: flex;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.minimal-home .socials a:hover { color: var(--ink); }

/* ---------- Missing-content notice (build-time only) ---------- */
.build-note {
  background: var(--tally-dim);
  border: 1px solid var(--tally);
  border-radius: 6px;
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  margin-bottom: 32px;
}

/* ---------- Video hero: stack instead of overlay on mobile/tablet ----------
   Overlaying the pitch banner and caption on top of the video works well on
   desktop where the box is tall, but on shorter mobile/tablet viewports the
   two absolutely-positioned bars can collide. Below 1024px, drop the fixed
   height and let the banner/caption flow as normal stacked bars instead. */
@media (max-width: 1024px) {
  .video-hero {
    height: auto;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .video-hero video {
    width: 100%;
    height: auto;
    display: block;
  }
  .pitch-banner {
    position: static;
    order: -1;
    background: var(--ink);
  }
  .video-hero .video-hero-caption {
    position: static;
    display: block;
    background: var(--ink);
    padding: 20px var(--gutter);
    margin-top: 12px;
    text-shadow: none;
    border-bottom: none !important;
  }
}

@media (max-width: 1024px) {
  .hero-collage {
    padding-bottom: 40px;
  }
}

/* ---------- Second scroll cue: overlays the video, appears once reached ---------- */
.scroll-indicator-2 {
  position: absolute;
  right: var(--gutter);
  bottom: 112px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  opacity: 0;
  visibility: hidden;
  animation: scroll-bob-2 3.5s ease-in-out infinite;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.scroll-indicator-2 svg {
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.5));
}

@keyframes scroll-bob-2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.scroll-indicator-2.visible {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1024px) {
  .scroll-indicator-2 { display: none; }
}

#what-i-do {
  scroll-margin-top: 112px;
}

@media (max-width: 640px) {
  .post-grid {
    grid-template-columns: 1fr;
  }
}

#posts {
  scroll-margin-top: 112px;
}

.scroll-indicator-below {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  animation: scroll-bob 3.5s ease-in-out infinite;
}
.scroll-indicator-below span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-indicator-below { animation: none; }
}

@media (max-width: 640px) {
  body {
    font-size: 17px;
  }
}

.vertical-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  gap: 40px;
}

@media (max-width: 900px) {
  .vertical-video-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

/* ---------- Styled YouTube link-out card (used where embedding is blocked) ---------- */
.video-link-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--ink);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.video-link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.video-link-card-media {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: var(--ink);
}
.video-link-card-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.video-link-card:hover .video-link-card-media img {
  transform: scale(1.03);
}

.video-link-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--tally);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, background 0.2s ease;
}
.video-link-card:hover .video-link-card-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #000;
}
.video-link-card-play svg { margin-left: 3px; }

.video-link-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px;
}
.video-link-card-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tally);
}
.video-link-card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
}
.video-link-card-cta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
  margin-top: 6px;
}

/* ---------- Breathing pulse for cert buttons (draws the eye without being loud) ---------- */
@keyframes cert-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.62; transform: scale(1.04); }
}
.cert-link-pulse {
  animation: cert-breathe 3.2s ease-in-out infinite;
}
.cert-link-pulse:hover {
  animation-play-state: paused;
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .cert-link-pulse {
    animation: none;
  }
}

/* ---------- Nudge arrow pointing at the hero caption's close button ---------- */
.hero-caption-nudge {
  position: absolute;
  top: 10px;
  right: 42px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.65);
  pointer-events: none;
  animation: nudge-breathe 2.4s ease-in-out infinite;
}

@keyframes nudge-breathe {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50% { transform: translateX(5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-caption-nudge { animation: none; opacity: 0.7; }
}


/* ---------- Editorial list — "What I Do" without the boxed spec-sheet look ---------- */
.editorial-list {
  display: flex;
  flex-direction: column;
}

.editorial-item {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.editorial-item:last-child {
  padding-bottom: 0;
}

.editorial-item h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}

.editorial-item p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0;
}

@media (max-width: 640px) {
  .editorial-item { padding: 22px 0; }
  .editorial-item h3 { font-size: 1.15rem; }
}

/* ---------- Asymmetric list — "What I Do" option 3: name left, description right ---------- */
.asym-list {
  display: flex;
  flex-direction: column;
}

.asym-item {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}

.asym-item:last-child {
  padding-bottom: 0;
}

.asym-item h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}

.asym-item p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0;
}

@media (max-width: 760px) {
  .asym-item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 24px 0;
  }
}

/* ---------- Numbered list — "What I Do" option 2: large sequential numbers ---------- */
.numbered-list {
  display: flex;
  flex-direction: column;
}

.numbered-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}

.numbered-item:last-child {
  padding-bottom: 0;
}

.numbered-item .num {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tally);
  line-height: 1;
}

.numbered-item h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
}

.numbered-item p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0;
}

@media (max-width: 640px) {
  .numbered-item { grid-template-columns: 44px 1fr; gap: 16px; padding: 22px 0; }
  .numbered-item .num { font-size: 1.15rem; }
  .numbered-item h3 { font-size: 1.1rem; }
}

/* ---------- The Record — asymmetric stats block, homepage ---------- */
.record-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
  padding: 12px 0;
}

.record-hero {
  flex: 0 0 auto;
}

.record-hero-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 4.2rem;
  line-height: 1;
  color: var(--ink);
}

.record-hero-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-top: 8px;
}

.record-plus {
  color: var(--tally);
}

.record-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  flex: 1 1 auto;
  border-left: 1px solid var(--line);
  padding-left: 56px;
}

.record-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--ink);
}

.record-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-top: 8px;
}

@media (max-width: 900px) {
  .record-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .record-stats {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 24px;
    gap: 32px;
  }
  .record-hero-num { font-size: 3.4rem; }
  .record-num { font-size: 1.7rem; }
}

/* ---------- Clients & Collaborators — multi-column list ---------- */
.clients-grid {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
}
.clients-grid li {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink-soft);
  white-space: nowrap;
  padding: 11px 20px 11px 0;   /* right-only gap between names in the row */
  position: relative;
}
/* A middot between names instead of a full-width divider row, since
   names now sit side by side rather than stacked one per line. Omitted
   on the last item in each flex line by :not(:last-child) — good enough
   in practice since a trailing dot on a wrapped line is harmless. */
.clients-grid li:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--line);
}

/* A linked name hands its padding to the anchor so the whole row is the target */
.clients-grid li:has(a) { padding: 0 20px 0 0; }
.clients-grid a {
  display: inline-block;
  padding: 12px 0;
  color: var(--tally);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.clients-grid a.plain {
  color: var(--ink-soft);
}

.clients-pinned {
  margin-top: 30px;
}

.clients-collapse {
  margin-top: 10px;
}

.clients-collapse-label {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.clients-collapse-label::-webkit-details-marker {
  display: none;
}

.clients-collapse-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  /* A pure CSS triangle instead of a Unicode glyph (▾) — the glyph
     depended on the loaded font actually including that character,
     which rendered inconsistently across mobile browsers and was
     sometimes invisible entirely. A border-triangle has no font
     dependency at all, so it's guaranteed to render the same way
     everywhere. */
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--ink-soft);
  transition: transform 0.25s ease;
  animation: clients-arrow-bounce 1.8s ease-in-out infinite;
}

@keyframes clients-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.clients-collapse[open] .clients-collapse-arrow {
  animation: none;
  transform: rotate(180deg);
}

.clients-collapse .clients-grid {
  margin-top: 6px;
}

/* ---------- Map pin popup on Contact page ---------- */
.map-pin-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.map-popup {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 280px;
  height: 200px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 20;
}

@media (hover: hover) {
  .map-pin-wrap:hover .map-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
}

.map-pin-wrap.open .map-popup {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

@media (max-width: 480px) {
  .map-popup { width: 240px; height: 170px; left: 0; transform: translateY(6px); }
  .map-pin-wrap.open .map-popup { transform: translateY(0); }
}

/* ---------- Contact page hero photo — desktop-only rightward shift ---------- */
@media (min-width: 761px) {
  #contact-hero-img {
    object-position: 15% center;
  }
}

/* ============================================
/* ============================================
   Add-ons for "Is Encore3 Ready for Prime Time?"
   Append to your main stylesheet. Uses your
   existing --ink / --ink-soft / --paper / --tally
   tokens and font stack — no new variables needed.
   Skip any rule you already have defined.
   ============================================ */

.article-pull-quote{
  border-left:4px solid var(--tally);
  margin:44px 0;
  padding:6px 0 6px 26px;
}
.article-pull-quote p{
  font-family:var(--font-display, 'Space Grotesk', sans-serif);
  font-size:26px;
  line-height:1.35;
  font-weight:500;
  color:var(--ink);
  margin:0;
}

.feature-list{
  margin:0 0 24px;
  padding-left:22px;
}
.feature-list li{
  font-size:18px;
  line-height:1.7;
  margin-bottom:10px;
  color:var(--ink);
}
.feature-list strong{
  font-family:var(--font-mono, 'IBM Plex Mono', monospace);
  font-weight:700;
}

.cert-note{
  font-family:var(--font-mono, 'IBM Plex Mono', monospace);
  font-size:14px;
  color:var(--ink-soft);
  background:#efeee9;
  border-radius:4px;
  padding:16px 20px;
  margin:0 0 32px;
  line-height:1.6;
}

.photo-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:0 0 12px;
}
/* 3-photo variant — kept separate from the base 2-column rule above so
   this doesn't change the Encore3 post's existing 2-photo gallery,
   which uses the bare .photo-gallery class. */
.photo-gallery.cols-3{
  grid-template-columns:1fr 1fr 1fr;
}
@media (max-width:600px){
  .photo-gallery.cols-3{ grid-template-columns:1fr; }
}
.photo-gallery img{
  width:100%;
  height:auto;
  border-radius:4px;
  display:block;
}
@media (max-width:600px){
  .photo-gallery{ grid-template-columns:1fr; }
}

.photo-caption{
  font-family:var(--font-mono, 'IBM Plex Mono', monospace);
  font-size:13px;
  color:var(--ink-soft);
  margin:0 0 32px;
}

.closing-line{
  font-family:var(--font-display, 'Space Grotesk', sans-serif);
  font-size:22px;
  font-weight:500;
  font-style:italic;
  color:var(--ink);
  border-top:1px solid #e3e2dd;
  margin-top:48px;
  padding-top:32px;
}
.closing-line a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- Byline block (used at the top of some post bodies, e.g.
   the Aquilon post) — was missing entirely, defaulted to unstyled
   browser div text. Matches .post-meta's typographic treatment. ---------- */
.byline {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

/* ---------- Article-body photos — clickable to view larger, with a
   persistent visual cue (not hover-only, since hover doesn't exist on
   mobile and most visitors will be on a phone). ---------- */
.article-body figure {
  position: relative;
  cursor: pointer;
}

.article-body figure::after,
.photo-gallery-item::after {
  content: "⤢";
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,10,0.72);
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

.photo-gallery-item {
  position: relative;
  cursor: pointer;
}

.article-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.94);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}
.article-lightbox-overlay.open { display: flex; }

.article-lightbox-figure {
  margin: 0;
  max-width: 100%;
  min-width: 0;
  text-align: center;
}
.article-lightbox-figure img {
  max-width: 100%;
  max-height: 80vh;
  max-height: 80svh;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .article-lightbox-overlay {
    padding: 40px 16px;
  }
  .article-lightbox-figure img {
    max-height: 58vh;
    max-height: 58svh;
  }
}
.article-lightbox-caption {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #cfcfcf;
  margin-top: 14px;
}
.article-lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

/* ---------- Event announcement callout — a distinct, timely-feeling box
   for things like conference/booth appearances, separate from the
   article's normal paragraph flow so it reads as a standalone notice. ---------- */
.event-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #131313;
  color: #fff;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 0 0 32px;
}
.event-callout .tally {
  margin-top: 6px;
  flex-shrink: 0;
}
.event-callout p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.6;
  color: #fff;
}
.event-callout a {
  color: var(--tally);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* ---------- Transport diagram — small looping SRT->cloud graphic for
   the Cloud Production item in "What I Do". Pure CSS + inline SVG, no
   image file. Sourced from a companion diagram built for
   magekfilmworks.productions' equivalent panel, remapped to gekjr.pro's
   own --ink-soft/--tally tokens. ---------- */
.transport-diagram {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 22px;
  margin-bottom: 28px;
}

.transport-diagram svg {
  width: 150px;
  height: auto;
  flex-shrink: 0;
}

.transport-diagram span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 40ch;
}

.td-ink { color: var(--ink); }
.td-accent { color: var(--tally); }

.td-flow {
  stroke-dasharray: 5 7;
  animation: transport-flow 1.1s linear infinite;
}

@keyframes transport-flow {
  to { stroke-dashoffset: -24; }
}

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

/* ---------- Footer link group — Magek Filmworks + LinkedIn sit together
   as a group on the right, rather than competing as separate flex items
   against .footer-grid's space-between. ---------- */
/* Copyright + LinkedIn stack together on the left; Magek Filmworks
   stands alone on the right, a direct child of .footer-grid's own
   space-between layout. */
.footer-left-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-right-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-left: auto;
}
@media (max-width: 640px) {
  .footer-right-stack {
    align-items: center;
    margin-left: 0;
  }
}
.footer-business-link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* ---------- Multi-camera shading diagram — three camera sources with
   drifting, mismatched color feed into Nobe OmniScope, which locks
   them to a single, steady, matched output. Same visual language as
   .transport-diagram (thin line art, ink/tally tokens, animated flow
   line), built for the Broadcast Switchers "Multi-Camera Shader" /
   Nobe OmniScope item. ---------- */
.shader-diagram {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
}

.shader-diagram svg {
  width: 240px;
  height: auto;
  flex-shrink: 0;
}

.shader-diagram span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 40ch;
}

@keyframes shader-color-drift {
  0%, 100% { fill: #e0332b; }
  33% { fill: #d9a441; }
  66% { fill: #4a90b8; }
}
.shader-dot1 { animation: shader-color-drift 3.6s ease-in-out infinite; }
.shader-dot2 { animation: shader-color-drift 3.6s ease-in-out infinite -1.2s; }
.shader-dot3 { animation: shader-color-drift 3.6s ease-in-out infinite -2.4s; }
.shader-dot4 { animation: shader-color-drift 3.6s ease-in-out infinite -3.0s; }

.shader-output {
  fill: var(--tally);
}

@media (prefers-reduced-motion: reduce) {
  .shader-dot1, .shader-dot2, .shader-dot3, .shader-dot4 { animation: none; }
  .shader-dot1, .shader-dot2, .shader-dot3, .shader-dot4 { fill: var(--ink-soft); }
}

/* ---------- Waveform traces inside the shader-diagram monitor —
   three jagged paths cross-fading in a staggered loop, standing in
   for a live-updating broadcast waveform monitor fed by Nobe
   OmniScope running on the Mac Mini. ---------- */
@keyframes wf-trace-fade {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.95; }
}
.wf-trace1, .wf-trace2, .wf-trace3 {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: wf-trace-fade 2.4s ease-in-out infinite;
}
.wf-trace2 { animation-delay: -0.8s; }
.wf-trace3 { animation-delay: -1.6s; }

@media (prefers-reduced-motion: reduce) {
  .wf-trace1, .wf-trace2, .wf-trace3 { animation: none; opacity: 0.6; }
}

/* ---------- Slower flow animation specifically for the Mac Mini to
   monitor run in the shader-diagram — that segment is HDMI, distinct
   from the faster SDI/Thunderbolt hops earlier in the same chain, so
   it reads at its own, slower pace rather than sharing td-flow's
   timing. ---------- */
.td-flow-hdmi {
  stroke-dasharray: 5 7;
  animation: transport-flow 2.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .td-flow-hdmi { animation: none; }
}