/* ============================================
   Design tokens
   ============================================ */
:root {
  --bg: #FAF8F4;
  --surface: #F1ECE2;
  --text-primary: #20282D;
  --text-secondary: #4B5A61;
  --accent: #8A5A34;
  --accent-hover: #6E4728;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --section-pad-desktop: 120px;
  --section-pad-tablet: 80px;
  --section-pad-mobile: 60px;
  --content-max: 1200px;
  --card-gap: 32px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   Reset
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 450;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, p, a { overflow-wrap: anywhere; }

@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;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   Reveal-on-load / reveal-on-scroll
   ============================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Scroll progress
   ============================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
}
.scroll-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress__bar {
    transition: none;
  }
}

/* ============================================
   Site header
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px clamp(24px, 5vw, 64px);
  background: rgba(250, 248, 244, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(32, 40, 45, 0.07);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.site-header.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.site-nav::-webkit-scrollbar {
  display: none;
}
.site-nav a {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color 0.25s var(--ease);
}
.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--accent-hover);
}
.wordmark {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}
.wordmark-dot {
  color: var(--accent);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 700px) {
  .nav-toggle {
    display: flex;
  }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    background: var(--bg);
    border-bottom: 1px solid rgba(32, 40, 45, 0.07);
    box-shadow: 0 12px 24px -12px rgba(32, 40, 45, 0.15);
    transition: max-height 0.3s var(--ease);
  }
  .site-nav.is-open {
    max-height: 320px;
  }
  .site-nav a {
    width: 100%;
    padding: 14px clamp(24px, 5vw, 64px);
  }
}

@media (max-width: 480px) {
  .site-header { padding: 22px 20px; gap: 14px; }
}

/* ============================================
   Section headings (shared across all sections)
   ============================================ */
.section-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: 0.01em;
  color: var(--text-primary);
  margin-bottom: 40px;
}

/* ============================================
   Section container (shared across all sections)
   ============================================ */
.section {
  padding: var(--section-pad-desktop) clamp(24px, 6vw, 80px);
}
.section__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .section { padding-top: var(--section-pad-tablet); padding-bottom: var(--section-pad-tablet); }
}
@media (max-width: 700px) {
  .section { padding-top: var(--section-pad-mobile); padding-bottom: var(--section-pad-mobile); }
}

/* ============================================
   Intro (merged hero + about)
   ============================================ */
.intro {
  background: var(--bg);
  /* Full viewport on desktop, minus a deliberate sliver so the next
     section's background just barely shows at the bottom edge — a
     quiet cue that there's more below without breaking the landing
     effect. */
  min-height: calc(100vh - 32px);
  display: flex;
  align-items: center;
}

.intro__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  padding: 12px 24px;
  border: 1px solid rgba(32, 40, 45, 0.18);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  transition: gap 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.intro__cta:hover,
.intro__cta:focus-visible {
  gap: 12px;
  border-color: var(--accent);
  color: var(--accent-hover);
}

.intro__grid {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.intro__portrait {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 82% 100%, 0 100%);
  filter: drop-shadow(0 20px 34px rgba(32, 40, 45, 0.28));
}
.intro__portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.05);
}
.intro__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
  mix-blend-mode: color;
}

.intro__eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.intro__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.intro__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.3;
  color: var(--text-primary);
  max-width: 34ch;
  margin-top: 28px;
}

.intro__blurb {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.45;
  color: var(--text-primary);
  max-width: 48ch;
  margin-top: 18px;
}

.intro__links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
}
.intro__links a {
  color: var(--text-secondary);
  transition: color 0.25s var(--ease);
}
.intro__links a:hover,
.intro__links a:focus-visible {
  color: var(--accent-hover);
}
.intro__links-divider {
  color: var(--text-secondary);
  opacity: 0.5;
}

@media (max-width: 780px) {
  /* Don't force full viewport height here — with the portrait stacked
     above the copy, that would push the CTA below the fold. Let the
     section size to its own content instead. */
  .intro {
    min-height: 0;
    /* Real mobile Safari's address bar + bottom toolbar eat far more
       vertical space on first load than a bare viewport-height number
       suggests, so this section's own padding is trimmed too — not
       just the headline — to leave real margin against that chrome. */
    padding-top: 32px;
    padding-bottom: 28px;
  }
  .intro__grid {
    grid-template-columns: 1fr;
  }
  /* Landscape crop (see <picture> in index.html) filling the full
     width instead of a small portrait rectangle — reads as more
     impactful in the space the compressed hero spacing freed up. */
  .intro__portrait {
    max-width: 100%;
  }
  .intro__portrait img {
    aspect-ratio: 20 / 17;
  }
  .intro__eyebrow {
    margin-bottom: 8px;
  }
  /* Headline is the single largest contributor to hero height on
     mobile — trimmed here (rather than compressing spacing/portrait)
     so "Explore the work" lands within one screen. */
  .intro__headline {
    font-size: 1.1rem;
    margin-top: 20px;
  }
  /* Keep clear size hierarchy below the headline on mobile — the
     clamp()'s floor value put this too close to headline size. */
  .intro__blurb {
    font-size: 0.9rem;
    margin-top: 13px;
  }
  .intro__links {
    margin-top: 22px;
  }
  .intro__cta {
    margin-top: 26px;
  }
}

/* ============================================
   About
   ============================================ */
.about {
  background: var(--surface);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 300px);
  gap: clamp(40px, 6vw, 80px);
  align-items: stretch;
}

.about__body {
  max-width: 62ch;
}
.about__body p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.about__body p + p {
  margin-top: 20px;
}

.about__pull-quote {
  all: unset;
  display: block;
  margin: 32px 0;
  padding-left: 24px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.4;
  color: var(--text-primary);
  max-width: 36ch;
}

/* Same duotone/grayscale treatment as the hero portrait, so the two
   photos on the page read as one consistent photographic style. */
.about__photo {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 82% 100%, 0 100%);
  filter: drop-shadow(0 20px 34px rgba(32, 40, 45, 0.28));
}
.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
  filter: grayscale(100%) contrast(1.05);
}
.about__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
  mix-blend-mode: color;
}

@media (max-width: 780px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about__photo {
    order: -1;
    width: 260px;
    max-width: 100%;
    margin: 0 auto;
  }
  .about__photo img {
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

/* ============================================
   Areas of Work
   ============================================ */
.areas {
  background: var(--bg);
}

/* One card at a time, swiped/dragged/arrowed between rather than shown
   as a dense 2x2 grid. Scroll-snap does the actual paging; the JS in
   main.js only drives the arrow buttons and the counter. */
.areas__carousel {
  position: relative;
}
.areas__track {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Height is synced in JS to whichever card is active, so a short
     card doesn't sit in a box sized for the tallest one — animated
     here so that resize reads as part of the swipe, not a jump. */
  transition: height 300ms ease;
}
.areas__track::-webkit-scrollbar {
  display: none;
}
.areas__track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}
.areas__item {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

.areas__carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: clamp(32px, 5vw, 56px);
}
.areas__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(32, 40, 45, 0.18);
  border-radius: 50%;
  background: transparent;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.areas__nav:hover,
.areas__nav:focus-visible {
  border-color: var(--accent);
  color: var(--accent-hover);
}
.areas__nav:disabled {
  opacity: 0.3;
  cursor: default;
}
.areas__carousel-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  min-width: 56px;
  text-align: center;
}

.areas__item-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--text-primary);
  margin-bottom: 14px;
}

/* Duplicate of the active card's real title, living outside
   .areas__track (the carousel's horizontal scroll container) — it
   has to live out here because position: sticky (added on mobile,
   below) can't reference the page's scroll from inside the track:
   overflow-x: auto there forces overflow-y into a scroll container
   too, per spec, which would confine "stuck" to that box instead.
   Hidden until JS (which also keeps its text in sync) detects the
   real title has scrolled out of view, so the two never show at
   once — see .areas__sticky-title.is-visible below. */
.areas__sticky-title {
  display: none;
}

.areas__item-body {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Logos sit quietly below the description, always visible — no
   hover-to-reveal. With 4-6 real logos per card now, hiding them by
   default undersold the section and left a reserved-but-empty gap at
   rest; this also matches what mobile (no hover) already showed. */
.areas__logos {
  margin-top: 24px;
}

.areas__logos-caption {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.areas__logos-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.areas__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 150px;
}

/* Every logo sits in an identical fixed-size box regardless of the
   institution, so visual weight across the grid stays consistent no
   matter how each source file is cropped. object-fit: contain (on the
   img, not here) does the fitting; this box's size is the only thing
   that determines how big a logo reads. The dashed outline is a
   dev-only boundary marker — remove it (and only it) once real logo
   assets replace the text. */
.areas__logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 64px;
}
/* Dev-only boundary marker for slots still waiting on a real logo.
   Disappears automatically the moment a slot gets an <img>. */
.areas__logo-mark:not(:has(img)) {
  border: 1px dashed rgba(32, 40, 45, 0.2);
}

/* Real logos sit in plain grayscale by default (fitted, not stretched,
   to the uniform placeholder footprint), and reveal their true brand
   colour when that specific logo is hovered or focused. Sized off
   height first (not raw bounding-box width) so wordmarks and icon
   marks share one optical scale — width only yields for the rare
   logo wide enough to overflow the box, via object-fit: contain. */
.areas__logo-mark img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 250ms ease;
}
.areas__logo:hover .areas__logo-mark img,
.areas__logo:focus-within .areas__logo-mark img {
  filter: grayscale(0%);
}
.areas__logo:focus-within .areas__logo-mark {
  outline: 1px solid var(--accent);
  outline-offset: 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;
}
.areas__logo-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-secondary);
  opacity: 0.85;
}
.areas__logo-label--unconfirmed {
  font-style: italic;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .areas__logo-mark img {
    transition-duration: 0ms;
  }
  .areas__track {
    scroll-behavior: auto;
  }
}

@media (max-width: 780px) {
  .areas__logos-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .areas__logo {
    width: auto;
  }
  /* Mobile keeps the original "all cards match the tallest" height
     (align-items: stretch is the flex default) rather than the
     per-card dynamic sync used on desktop — height: auto here
     overrides the inline height JS sets for that sync. */
  .areas__track {
    align-items: stretch;
    height: auto !important;
  }
  .areas__sticky-title {
    display: block;
    position: sticky;
    top: 77px;
    z-index: 2;
    background: var(--bg);
    padding: 10px 0 14px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--text-primary);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease;
  }
  .areas__sticky-title.is-visible {
    opacity: 1;
    visibility: visible;
  }
}
@media (max-width: 380px) {
  .areas__logos-list {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Writing & Speaking (combined, filterable feed)
   ============================================ */
.feed {
  background: var(--surface);
}


/* Archive page only: header is visible from load (no hero to scroll past
   first), so the section needs extra clearance to avoid sitting under it,
   plus a way back to the homepage. */
.archive {
  padding-top: calc(var(--section-pad-desktop) + 40px);
}
@media (max-width: 1024px) {
  .archive { padding-top: calc(var(--section-pad-tablet) + 40px); }
}
@media (max-width: 700px) {
  .archive { padding-top: calc(var(--section-pad-mobile) + 48px); }
}
.archive__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}
.archive__back:hover,
.archive__back:focus-visible {
  gap: 10px;
  color: var(--accent-hover);
}

.feed__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}
.feed__filter {
  all: unset;
  cursor: pointer;
  padding: 6px 16px;
  border: 1px solid rgba(32, 40, 45, 0.18);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.feed__filter:hover,
.feed__filter:focus-visible {
  color: var(--text-primary);
  border-color: rgba(32, 40, 45, 0.35);
}
.feed__filter.is-active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.feed__row {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: clamp(24px, 4vw, 56px);
  padding: 22px 0;
  border-top: 1px solid rgba(32, 40, 45, 0.12);
  min-width: 0;
}
.feed__row:last-child {
  border-bottom: 1px solid rgba(32, 40, 45, 0.12);
}

.feed__row-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  min-width: 0;
}

.feed__row-body {
  min-width: 0;
}
.feed__row-date {
  font-size: 13px;
  color: var(--text-secondary);
}
.feed__row-type {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.feed__row-source {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
/* Quiet, uniform addition beside the existing outlet/venue text — never
   replaces it, and simply doesn't render when an outlet has no logo. */
.feed__row-outlet-logo {
  height: 16px;
  width: auto;
  max-width: 68px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
}

.feed__row-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--text-primary);
  margin-bottom: 8px;
}

.feed__row-description {
  font-family: var(--font-body);
  font-size: 0.855rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 60ch;
}

.feed__link {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--accent);
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}
.feed__link:hover,
.feed__link:focus-visible {
  gap: 10px;
  color: var(--accent-hover);
}

.feed__archive-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  padding: 12px 24px;
  border: 1px solid rgba(32, 40, 45, 0.18);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  transition: gap 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.feed__archive-link:hover,
.feed__archive-link:focus-visible {
  gap: 12px;
  border-color: var(--accent);
  color: var(--accent-hover);
}

.content-error {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
}

/* ============================================
   Embeds, click-to-play, photos & carousels
   (shared by the feed above; unchanged in place)
   ============================================ */

.speaking__embed {
  margin-top: 20px;
  max-width: 420px;
}
.speaking__embed iframe {
  width: 100%;
  border: 0;
  border-radius: 12px;
}
.speaking__embed--spotify iframe {
  height: 352px;
}
.speaking__embed--soundcloud iframe {
  height: 166px;
}
.speaking__embed--video {
  aspect-ratio: 16 / 9;
}
.speaking__embed--video iframe {
  height: 100%;
}
.speaking__embed--apple iframe {
  height: 175px;
}

/* Multi-photo carousel. Horizontal scroll-snap does the swipe/drag for
   free; JS only keeps the dots in sync and drives the arrow clicks. */
.speaking__carousel {
  position: relative;
  margin-top: 20px;
  max-width: 420px;
}
.speaking__carousel-track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: 12px;
  scrollbar-width: none;
}
.speaking__carousel-track::-webkit-scrollbar {
  display: none;
}
.speaking__carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 16 / 9;
}
.speaking__carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.speaking__carousel-arrow {
  all: unset;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(250, 248, 244, 0.88);
  box-shadow: 0 6px 16px rgba(32, 40, 45, 0.25);
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.speaking__carousel-arrow:hover,
.speaking__carousel-arrow:focus-visible {
  background: var(--bg);
  transform: translateY(-50%) scale(1.06);
}
.speaking__carousel-arrow--prev {
  left: 10px;
}
.speaking__carousel-arrow--next {
  right: 10px;
}
.speaking__carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.speaking__carousel-dot {
  all: unset;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(32, 40, 45, 0.25);
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.speaking__carousel-dot.is-active {
  background: var(--accent);
  transform: scale(1.35);
}

@media (max-width: 640px) {
  .feed__row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .feed__row-meta {
    flex-direction: row;
    gap: 12px;
  }
}

/* ============================================
   Field Building detail page
   (speaking engagements & podcasts with media —
   see hasDetailPage() in content-loader.js)
   ============================================ */
.detail-page {
  background: var(--bg);
}
.section__inner--narrow {
  max-width: 720px;
}
.detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 40px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}
.detail__back:hover,
.detail__back:focus-visible {
  gap: 10px;
  color: var(--accent-hover);
}
.detail__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.detail__meta .feed__row-outlet-logo {
  height: 20px;
  max-width: 90px;
  opacity: 0.9;
}
.detail__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 24px;
  text-wrap: balance;
}
.detail__context {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 66ch;
  margin-bottom: 8px;
}
.detail__media {
  margin-top: 32px;
}
.detail__media .speaking__embed,
.detail__media .speaking__carousel {
  max-width: none;
}
.detail__media .speaking__embed--spotify iframe,
.detail__media .speaking__embed--soundcloud iframe {
  max-width: 480px;
}
.detail__photo {
  margin-top: 20px;
  border-radius: 12px;
  overflow: hidden;
}
.detail__photo img {
  width: 100%;
  height: auto;
  display: block;
}
.detail__photo-credit {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  opacity: 0.7;
}

/* Podcast layout: artwork and platform players side by side, matched
   in height, rather than stacked blocks of mismatched widths. */
.detail__media-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.detail__media-visual {
  display: flex;
}
.detail__media-visual .detail__photo {
  margin-top: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.detail__media-visual .detail__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail__media-visual .speaking__carousel {
  margin-top: 0;
  width: 100%;
}
.detail__media-players {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.detail__media-players .speaking__embed {
  margin-top: 0;
  max-width: none;
}
.detail__media-players .speaking__embed--spotify iframe {
  height: 152px;
  max-width: none;
}
.detail__media-players .speaking__embed--apple iframe {
  max-width: none;
}

@media (max-width: 640px) {
  .detail__media-grid {
    grid-template-columns: 1fr;
  }
  .detail__media-visual .detail__photo {
    aspect-ratio: 16 / 9;
  }
}

/* ============================================
   Reports & Case Studies
   ============================================ */
.reports {
  background: var(--bg);
}


.reports__layout {
  display: flex;
  flex-direction: column;
}

/* Gallery of open tiles, three to a row by default — a visual break
   from the text-heavy Field Building list above it. No boxed card at
   rest: just type and whitespace, editorial-style. The "card" (surface,
   radius, elevation) only appears on hover/focus, alongside the lift
   off the "deck" (translate + shadow + a higher stacking order) — so
   the boxed treatment reads as an interaction, not base decoration.
   Text is never clipped — tiles grow to their own content height
   (align-items: start keeps the grid from stretch-squashing a shorter
   tile to match a taller neighbour). */
.reports__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 32px;
  align-items: stretch;
}
.reports__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: transparent;
  border-top: 1px solid rgba(32, 40, 45, 0.14);
  border-radius: 6px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.reports__card:hover,
.reports__card:focus-within {
  background: var(--surface);
  border-top-color: transparent;
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 24px 48px rgba(32, 40, 45, 0.2);
  position: relative;
  z-index: 2;
}
/* One consistent rhythm between every block (meta, role, title,
   description, CTA) rather than five different hand-tuned margins. */
.reports__card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 22px 24px 26px;
}
.reports__card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--text-primary);
}
.reports__card-description {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (max-width: 980px) {
  .reports__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .reports__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .reports__card-body {
    padding: 20px 20px 22px;
  }
  /* Full text is the desktop luxury; on a phone, scroll length matters
     more than reading every last word of every entry up front — the
     "Read" link is right there for whoever wants the rest. */
  .reports__card-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Touch devices have no hover to reveal the card surface, so give them
   the resting-state contrast permanently instead of only on tap. */
@media (hover: none) {
  .reports__card {
    background: var(--surface);
    border-top-color: transparent;
  }
}

.reports__card-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.reports__card-date {
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}
.reports__card-publisher {
  min-width: 0;
  color: var(--text-primary);
  font-weight: 500;
}
.reports__card-dot {
  flex-shrink: 0;
  opacity: 0.5;
}

.reports__card-role {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.72;
}
.reports__card-role--unconfirmed {
  color: var(--text-secondary);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  opacity: 0.65;
}

.reports__link {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--accent);
  cursor: pointer;
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}
.reports__link:hover,
.reports__link:focus-visible {
  gap: 10px;
  color: var(--accent-hover);
}

/* ============================================
   PDF reader (magazine-style, built on PDF.js)
   ============================================ */
body.pdf-viewer-open {
  overflow: hidden;
}

.pdf-viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
}
.pdf-viewer.is-open {
  display: flex;
}
.pdf-viewer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 25, 28, 0.82);
}

.pdf-viewer__frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 92vh;
  max-width: 94vw;
}

.pdf-viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 720px;
  padding: 0 4px 14px;
}
.pdf-viewer__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--bg);
}
.pdf-viewer__close {
  all: unset;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: var(--bg);
  opacity: 0.8;
  padding: 4px;
}
.pdf-viewer__close:hover {
  opacity: 1;
}

.pdf-viewer__page {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 3px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
  overflow: auto;
  max-height: 76vh;
}
.pdf-viewer__page canvas {
  display: block;
}
.pdf-viewer__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg);
}

.pdf-viewer__nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
}
.pdf-viewer__prev,
.pdf-viewer__next {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(250, 248, 244, 0.12);
  color: var(--bg);
  font-size: 18px;
  transition: background 0.2s var(--ease);
}
.pdf-viewer__prev:hover,
.pdf-viewer__next:hover {
  background: rgba(250, 248, 244, 0.22);
}
.pdf-viewer__prev:disabled,
.pdf-viewer__next:disabled {
  opacity: 0.3;
  cursor: default;
  background: transparent;
}
.pdf-viewer__page-label {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--bg);
  min-width: 64px;
  text-align: center;
}

/* ============================================
   Contact
   ============================================ */
.contact {
  padding: 0;
  border-top: 1px solid rgba(32, 40, 45, 0.12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 620px;
  background: var(--surface);
}

.contact__photo {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
.contact__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.05);
}
.contact__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
  mix-blend-mode: color;
}
.contact__photo-credit {
  position: absolute;
  right: 16px;
  bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
}

.contact__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(48px, 6vw, 96px);
}


.contact__intro {
  max-width: 42ch;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 36px;
}

.contact__email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 2.7vw, 1.68rem);
  color: var(--text-primary);
  transition: color 0.25s var(--ease);
  word-break: break-word;
}
.contact__email-icon {
  flex-shrink: 0;
}
.contact__email:hover,
.contact__email:focus-visible {
  color: var(--accent);
}

.contact__form {
  width: 100%;
  max-width: 420px;
  margin-bottom: 36px;
}
.contact__form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Step-through layout: one question visible at a time. */
.contact__form-steps {
  position: relative;
  min-height: 88px;
}
.contact__form-step {
  display: none;
  flex-direction: column;
  gap: 8px;
}
.contact__form-step.is-active {
  display: flex;
  animation: contact-step-in 0.45s var(--ease);
}
@keyframes contact-step-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.contact__form-step label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--text-primary);
}

.contact__form-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}
.contact__form-back {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(32, 40, 45, 0.18);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.contact__form-back:hover,
.contact__form-back:focus-visible {
  border-color: var(--accent);
  color: var(--accent-hover);
}
.contact__form-back:disabled {
  opacity: 0.3;
  cursor: default;
}

.contact__form-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}
.contact__form-dot {
  all: unset;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(32, 40, 45, 0.2);
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.contact__form-dot:disabled {
  cursor: default;
}
.contact__form-dot.is-complete {
  background: var(--accent);
}
.contact__form-dot.is-active {
  background: var(--accent);
  transform: scale(1.6);
}

.contact__form-next[hidden] {
  display: none;
}
.contact__form-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(32, 40, 45, 0.18);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  cursor: pointer;
  transition: gap 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.contact__form-next:hover,
.contact__form-next:focus-visible {
  gap: 12px;
  border-color: var(--accent);
  color: var(--accent-hover);
}

.contact__form-step input,
.contact__form-step textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(32, 40, 45, 0.22);
  padding: 8px 2px;
  transition: border-color 0.25s var(--ease);
  resize: vertical;
}
.contact__form-step input:focus,
.contact__form-step textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.contact__form-submit[hidden] {
  display: none;
}
.contact__form-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid rgba(32, 40, 45, 0.18);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  cursor: pointer;
  transition: gap 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.contact__form-submit:hover,
.contact__form-submit:focus-visible {
  gap: 12px;
  border-color: var(--accent);
  color: var(--accent-hover);
}
.contact__form-submit:disabled {
  opacity: 0.5;
  cursor: default;
}
.contact__form-status {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  min-height: 1em;
}
.contact__form-status.is-error {
  color: #a4453a;
}

/* Success state: swaps in for the form body once Netlify confirms the
   submission, with a drawn-in checkmark as the small "reward" moment. */
.contact__form-success[hidden] {
  display: none;
}
.contact__form-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 420px;
  animation: contact-success-in 0.5s var(--ease);
}
@keyframes contact-success-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.contact__form-success-check {
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
}
.contact__form-success-circle {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: contact-success-circle 0.7s var(--ease) forwards;
}
.contact__form-success-tick {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: contact-success-tick 0.35s var(--ease) 0.55s forwards;
}
@keyframes contact-success-circle {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes contact-success-tick {
  to {
    stroke-dashoffset: 0;
  }
}
.contact__form-success-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.contact__form-success-text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-secondary);
}

.contact__links {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}
.contact__links a {
  display: inline-flex;
  color: var(--text-secondary);
  transition: color 0.25s var(--ease);
}
.contact__links a:hover,
.contact__links a:focus-visible {
  color: var(--accent-hover);
}

.contact__photo-credit {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.contact__location {
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 780px) {
  .contact {
    grid-template-columns: 1fr;
  }
  .contact__photo {
    min-height: 280px;
  }
  .contact__photo-credit {
    font-size: 8.8px;
  }
  .contact__panel {
    padding: 48px clamp(24px, 6vw, 64px);
  }
}

/* ============================================
   Site footer
   ============================================ */
.site-footer {
  padding: 28px clamp(24px, 6vw, 80px);
  text-align: center;
}
.site-footer p {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  opacity: 0.7;
}