/* danielatz.com — design system extracted from the live WordPress site
   (GeneratePress customizer + GenerateBlocks style-global/style-1199).
   Fonts:  Playfair Display (display serif) · Rubik (headings/nav) · Source Sans Pro (body)
   Colors: teal #04373e / #05373e · coral #cf675a / #cc605f · grey #666666
           heading #1d1d1d · cream #faf0e2 / #f9f0e1 · sand #e1ded6 · footer #172021 */

:root {
  --teal: #04373e;          /* site-header / dark sections (customizer) */
  --teal-btn: #05373e;      /* solid teal buttons on dark sections */
  --footer-bg: #172021;     /* footer band */
  --coral: #cf675a;         /* solid buttons + accents (GenerateBlocks) */
  --coral-2: #cc605f;       /* --contrast: CTA outline, links */
  /* Coral for small text on light backgrounds. #cf675a is 3.66:1 on white,
     which fails WCAG AA for anything under 18.66px bold — and every use of it
     (eyebrow, kicker, read-more) is 15-16px bold. Same hue, dark enough to
     pass on white (6.2:1), cream (5.5:1) and sand (4.6:1). On teal the lighter
     coral stays, where it has plenty of contrast already. */
  --coral-ink: #a83e2f;
  /* Solid coral that can carry 16px white button text. White on #cf675a is
     3.66:1 and fails AA; this is 5.2:1 and stays closer to the brand coral
     than --coral-ink would. */
  --coral-btn: #b8483a;
  --coral-btn-hover: #93362a;
  /* Coral for small text on the dark bands. --coral is 3.54:1 on teal, which
     fails AA at the 16px the eyebrows are set in; this is 5.0:1 and still
     reads as the same coral against that much dark green. */
  --coral-on-dark: #e08b7c;
  --grey: #666666;          /* --contrast-3: muted text, meta */
  --heading: #1d1d1d;       /* section headings on white */
  --body-ink: #505050;      /* card/body grey used on white sections */
  --cream: #faf0e2;         /* --base */
  --cream-2: #f9f0e1;       /* --contrast-4 */
  --sand: #e1ded6;          /* --accent: light band / borders */
  --card-line: #e0e0e0;
  --white: #ffffff;
  --container: 1200px;
  --serif: 'Playfair Display', Georgia, serif;
  --sans-heading: Rubik, sans-serif;
  --sans-body: 'Source Sans Pro', -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--heading);
  background: var(--white);
}
img, iframe, video { max-width: 100%; height: auto; }
img { border-radius: 5px; }
/* Body links were --coral-2 (#cc605f), 3.88:1 on white — every link on the
   site failed AA, including on the sand sections where it fell to 2.9:1.
   --coral-ink clears 4.5:1 on white, cream and sand alike. */
a { color: var(--coral-ink); transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out; }
a:hover { color: var(--teal); }
p { margin: 0 0 1.5em; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans-heading);
  font-weight: 700;
  line-height: 1.2em;
  margin: 0 0 20px;
  color: var(--heading);
}
h1 { font-size: 42px; }
h2 { font-size: 35px; }
h3 { font-size: 29px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 18px; }
@media (max-width: 768px) {
  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  h3 { font-size: 24px; }
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 40px; }
@media (max-width: 1024px) { .container { padding: 0 30px; } }
@media (max-width: 767px) { .container { padding: 0 20px; } }

/* ---------------------------------------------------------------- header */
.site-header {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 70px;
}
.site-header .brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  color: var(--teal);
  text-decoration: none;
  margin-right: auto;
  line-height: 1.1;
}
.site-header .brand img { display: block; width: 184px; height: 37px; border-radius: 0; }
.site-header nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.site-header nav a {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  font-family: var(--sans-heading);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--teal);
}
.site-header nav a:hover { color: var(--coral-2); }
.cta-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans-heading);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--teal);
  border: 2px solid var(--coral-2);
  border-radius: 9999px;
  padding: 10px 30px;
  white-space: nowrap;
}
.cta-pill:hover, .cta-pill:focus { background: var(--coral-2); color: var(--white); }
@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; padding: 12px 20px; min-height: 0; justify-content: center; }
  .site-header .brand { margin-right: 0; flex-basis: 100%; text-align: center; }
  .site-header .brand img { margin: 0 auto; }
  .site-header nav a { line-height: 44px; padding: 0 12px; }
  .cta-pill { padding: 8px 22px; }
}

/* ------------------------------------------------------------------ hero */
/* Live-parity hero: 70vh flex-centered band (min 500 / max 700, like the
   WP "Enhanced Hero"), with the CSS-only multilingual greeting cycle. */
.hero {
  background:
    linear-gradient(to left, rgba(0, 0, 0, 0.37) 0%, rgba(0, 0, 0, 0.37) 100%),
    url('/wp-content/uploads/2025/06/daniel-atz-hero-cover-scaled.png')
      center 38% / cover no-repeat;
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--white);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* This is a photograph of a room, not a band of colour behind a name. It has
     to be tall enough to show the room — crop it down and the moment goes with
     it. Generous by design; the section beneath it is what gets smaller. */
  height: 78vh;
  min-height: 620px;
  max-height: 860px;
  padding: 3rem 40px;
}
/* greeting cycle — live values: word clamp(2.5rem,6vw,4.5rem), 4s per
   language, 0.8s ease in/out, 4 languages = 16s loop. Zero JS. */
.hero-hello {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* live spacing: greeting block 1.5rem, cycling words 1.8rem below */
  margin: 0 0 1.8rem;
  color: var(--white);
  position: relative;
  width: 100%;
  height: 1.15em;
}
.hero-hello .greet {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  white-space: nowrap;
  animation: hero-greet 16s infinite;
}
.hero-hello .greet-2 { animation-delay: 4s; }
.hero-hello .greet-3 { animation-delay: 8s; }
.hero-hello .greet-4 { animation-delay: 12s; }
@keyframes hero-greet {
  0% { opacity: 0; transform: translateY(20px); }
  5% { opacity: 1; transform: translateY(0); }
  25% { opacity: 1; transform: translateY(0); }
  30% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 0; transform: translateY(-20px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-hello .greet { animation: none; }
  .hero-hello .greet-1 { opacity: 1; }
}
.hero h1, .hero-name {
  font-family: var(--serif);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.9;
  margin: 0 0 2rem;
  color: var(--white);
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.hero-tagline {
  font-family: var(--serif);
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.8);
  margin: 1.5rem 0 0;
}
@media (max-width: 1024px) { .hero { padding: 2.5rem 30px; height: 70vh; min-height: 540px; } }
@media (max-width: 767px) {
  .hero { padding: 2rem 20px; height: 68vh; min-height: 480px; }
  .hero-hello { margin-bottom: 1.2rem; }
  .hero h1 { margin-bottom: 1.2rem; }
  .hero-tagline { letter-spacing: 0.1em; margin-top: 1rem; }
}

/* ------------------------------------------------------- section "bands" */
.band { padding: 7rem 40px; background: var(--white); }
.band > .band-inner { max-width: var(--container); margin: 0 auto; }
.band--teal { background: var(--teal); color: var(--white); }
.band--teal h1, .band--teal h2, .band--teal h3, .band--teal h4 { color: var(--white); }
.band--teal p { color: rgba(255, 255, 255, 0.92); }
.band--teal a { color: var(--white); }
.band--teal a:hover { color: var(--sand); }
.band--sand { background: var(--sand); }
@media (max-width: 1024px) { .band { padding: 6rem 30px; } }
@media (max-width: 767px) { .band { padding: 4rem 20px; } }

.eyebrow {
  font-family: var(--sans-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--coral-ink);
  margin: 0 0 0.75rem;
}
/* Dark sections keep the brighter coral — it reads at 3.5:1 on teal and the
   darker ink would disappear into it. */
.band--teal .eyebrow,
.gsec--teal .eyebrow,
.gsec--dark .eyebrow,
.page-hero .eyebrow,
.about-page--dark .eyebrow { color: var(--coral-on-dark); }
.band .lede, .lede { font-size: 1.125rem; }
.band h2 { margin-bottom: 1.5rem; }
.section-sub { color: var(--grey); }
.band--teal .section-sub { color: rgba(255, 255, 255, 0.8); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  background: var(--coral-btn);
  border: 1px solid var(--coral-btn);
  color: var(--white);
  font-family: var(--sans-body);
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
}
.btn:hover, .btn:focus { background: var(--coral-btn-hover); border-color: var(--coral-btn-hover); color: var(--white); }
.band--teal .btn { background: var(--coral-btn); border-color: var(--coral-btn); }
.btn--teal { background: var(--teal-btn); border: 1px solid var(--white); }
.btn--teal:hover, .btn--teal:focus { background: var(--teal); }

/* ----------------------------------------------------------------- cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .card-grid, .card-grid--2 { grid-template-columns: 1fr; } }

.card, .card-grid > li {
  background: var(--white);
  border: 1px solid var(--card-line);
  border-radius: 8px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  margin: 0;
}
.card-grid > li::marker { content: ''; }
.band--teal .card, .band--teal .card-grid > li { border-color: transparent; }
.card h2, .card h3 {
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}
.card h2 a, .card h3 a { color: var(--heading); text-decoration: none; }
.card h2 a:hover, .card h3 a:hover { color: var(--coral-2); }
.card p { font-size: 1rem; color: var(--body-ink); margin: 0.5rem 0 0; }
.card .meta, .card-meta {
  font-size: 0.875rem;
  color: var(--grey);
  margin: 0 0 0.5rem;
}
.card-meta .outlet { font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.card-img {
  display: block;
  width: calc(100% + 3rem);
  margin: -1.5rem -1.5rem 1rem;
  border-radius: 8px 8px 0 0;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
/* placeholder block for press cards whose article has no thumbnail image */
.img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.18)),
    var(--teal);
}
.img-ph span {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  padding: 0 1rem;
  letter-spacing: 0.01em;
}
.press-card .img-ph { background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.25)), var(--footer-bg); }
.card .read-more {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--coral-ink);
  text-decoration: none;
}
.card .read-more:hover { color: var(--teal); }

/* ventures list styled as cards (li content untouched) */
ul.ventures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.ventures > li {
  background: var(--white);
  border: 1px solid var(--card-line);
  border-radius: 8px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  color: var(--body-ink);
  font-size: 1rem;
}
ul.ventures > li > a:first-child {
  display: block;
  font-family: var(--sans-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--heading);
  text-decoration: none;
  margin-bottom: 0.5rem;
}
ul.ventures > li > a:first-child:hover { color: var(--coral-2); }
@media (max-width: 1024px) { ul.ventures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { ul.ventures { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- page banners */
.page-banner {
  background: var(--teal);
  color: var(--white);
  padding: 4.5rem 40px;
}
.page-banner .band-inner { max-width: var(--container); margin: 0 auto; }
.page-banner h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
}
.page-banner .lede,
.page-banner p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 66%;
  margin: 1.25rem 0 0;
}
.page-banner .kicker { color: var(--coral); }
@media (max-width: 1024px) { .page-banner { padding: 3.5rem 30px; } .page-banner .lede, .page-banner p { max-width: 100%; } }
@media (max-width: 767px) { .page-banner { padding: 2.75rem 20px; } .page-banner h1 { font-size: 38px; } }

/* -------------------------------------------------------- reading column */
.prose {
  max-width: 46rem;
  margin: 0 auto;
  padding: 4rem 20px 5rem;
}
.prose h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--teal);
}
.prose h2 { font-size: 28px; margin-top: 2.2rem; }
.prose h3 { font-size: 22px; }
.prose img { border-radius: 8px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05); }
/* Imported post images and their captions, tied together. The WP export left
   the caption as a loose italic paragraph, which reads as body copy and sits
   the same distance from the image above it as from the paragraph below. */
.post-figure { margin: 2rem 0; }
/* max-width, not width: the imported posts mix 2000px charts with 428x130
   strips, and forcing the strips to the column width upscales them into soft
   blocks. Large images still fill; small ones stay their own size. */
.post-figure img { display: block; max-width: 100%; height: auto; margin: 0 0 0.75rem; }
.post-figure img:last-of-type { margin-bottom: 0; }
.post-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--grey);
}
.post-figure figcaption em { font-style: normal; }
.post-figure figcaption a { color: inherit; }
.prose .lede { font-size: 1.2rem; line-height: 1.55; }
@media (max-width: 767px) { .prose { padding-top: 2.5rem; } .prose h1 { font-size: 33px; } }

.kicker {
  font-family: var(--sans-body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--coral-ink);
  margin: 0 0 0.75rem;
}
.gsec--teal .kicker, .gsec--dark .kicker, .about-page--dark .kicker { color: var(--coral-on-dark); }
.meta { color: var(--grey); font-size: 0.92rem; margin: 0.25rem 0 1.5rem; max-width: 78ch; }
.meta time { font-variant-numeric: tabular-nums; }

hr { border: none; border-top: 1px solid var(--sand); margin: 2.5rem 0; }
blockquote {
  border-left: 5px solid var(--coral);
  background: var(--cream-2);
  padding: 20px;
  font-size: 1.2em;
  font-style: italic;
  margin: 0 0 1.5em;
}
blockquote p:last-child { margin: 0; }
code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.9em; }

/* English-translation separation + editorial notes */
section.translation {
  margin-top: 3rem;
  border-top: 4px solid var(--teal);
  padding-top: 2rem;
}
section.translation > h2 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--teal);
  font-size: 30px;
}
/* These sit in the 1200px prose column and were running 92-133 characters to
   the line. Comfortable measure is 45-75; the box keeps its width, the
   sentence does not. */
.note {
  background: var(--cream-2);
  border: 1px solid var(--sand);
  border-radius: 5px;
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
  max-width: 78ch;
}
.editorial-note {
  background: var(--cream-2);
  border-left: 4px solid var(--coral);
  border-radius: 0 5px 5px 0;
  color: var(--body-ink);
  font-size: 0.92rem;
  padding: 0.75rem 1rem;
  max-width: 78ch;
}

/* -------------------------------------------------------------- listings */
article.listing { padding: 1.1rem 0; border-bottom: 1px solid var(--sand); }
article.listing h2, article.listing h3 { margin: 0 0 0.3rem; font-size: 1.25rem; line-height: 1.35; }
article.listing h2 a, article.listing h3 a { color: var(--heading); text-decoration: none; }
article.listing h2 a:hover, article.listing h3 a:hover { color: var(--coral-2); }
article.listing p { margin: 0.3rem 0 0; }
.year-group { margin-top: 3rem; }
.year-group > h2 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grey);
  border-bottom: 1px solid var(--sand);
  padding-bottom: 0.5rem;
}
.hub-content { padding: 4rem 40px 6rem; }
.hub-content > .band-inner { max-width: var(--container); margin: 0 auto; }
@media (max-width: 1024px) { .hub-content { padding: 3rem 30px 4.5rem; } }
@media (max-width: 767px) { .hub-content { padding: 2.5rem 20px 3.5rem; } }

table.facts { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
table.facts th, table.facts td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--sand); vertical-align: top; }
table.facts th { white-space: nowrap; color: var(--grey); font-weight: 600; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  background: var(--teal-btn);
  color: var(--white);
  font-size: 0.875rem;
  padding: 5rem 40px 3rem;
  margin-top: 0;
  text-align: center;
}
.footer-touch { max-width: var(--container); margin: 0 auto 3.5rem; }
.footer-touch h2 {
  color: var(--white);
  font-size: 42px;
  margin: 0 0 2rem;
}
.footer-portrait {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 2rem;
}
.footer-touch hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  margin: 0 0 1.25rem;
}
.footer-touch p { font-size: 1.1rem; color: rgba(255, 255, 255, 0.92); margin: 0 0 1.5rem; }
.footer-touch .btn { background: var(--coral-btn); border-color: var(--coral-btn); color: var(--white); }
.footer-touch .btn:hover { background: var(--coral-btn-hover); border-color: var(--coral-btn-hover); }
.footer-brand img { display: inline-block; filter: brightness(0) invert(1); }
.footer-desc { color: rgba(255, 255, 255, 0.85); }
.site-footer > p { max-width: var(--container); margin: 0 auto 1.25rem; }
.site-footer > p:last-child { margin-bottom: 0; color: rgba(255, 255, 255, 0.7); }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { color: var(--coral); }
.site-footer .elsewhere { color: rgba(255, 255, 255, 0.7); }
@media (max-width: 1024px) { .site-footer { padding: 4rem 30px 2.5rem; } }
@media (max-width: 767px) { .site-footer { padding: 3rem 20px 2rem; } .footer-touch h2 { font-size: 32px; } }

/* ==================================================================
   Live GeneratePress/GenerateBlocks page compositions (home + about)
   Values lifted from danielatz.com generateblocks CSS:
   section padding 112px 40px · container 1200px · split 2×1fr gap 80px
   ================================================================== */
.gsec { padding: 112px 40px; background: var(--white); }
.gsec-inner { max-width: var(--container); margin: 0 auto; }
.gsec .center { text-align: center; }
.gsec .btn-row { margin-top: 2.5rem; }
/* live section headings measure 35px Rubik 700 — matched exactly */
.gsec h2 { font-size: 35px; margin-bottom: 1.25rem; }
.gsec h3 { font-size: 20px; }
.sec-sub { font-size: 1.05rem; color: var(--grey); max-width: 68ch; margin: 0 0 2.5rem; }
.sec-sub.center { margin-left: auto; margin-right: auto; }
.gsec--teal .sec-sub, .gsec--dark .sec-sub { color: rgba(255, 255, 255, 0.8); }
.eyebrow.center { text-align: center; }
.gsec h2.coral { color: var(--coral); }
.gsec--teal { background: var(--teal); color: var(--white); }
.gsec--teal h1, .gsec--teal h2, .gsec--teal h3 { color: var(--white); }
.gsec--teal p { color: rgba(255, 255, 255, 0.92); }
.gsec--dark { background: var(--footer-bg); color: var(--white); }
.gsec--dark h2 { color: var(--white); }
.gsec--sand { background: var(--sand); color: var(--heading); }
.gsec--white { background: var(--white); color: var(--heading); }
@media (max-width: 1024px) { .gsec { padding: 80px 30px; } .gsec h2 { font-size: 31px; } }
@media (max-width: 767px) { .gsec { padding: 56px 20px; } .gsec h2 { font-size: 28px; } }

/* two-column split (560px/560px, 80px gap on live) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.split img { border-radius: 10px; }
.split-lede { font-size: 1.3rem; line-height: 1.55; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } }

/* video thumbnails linking to YouTube (live embeds the video) */
.video-link { position: relative; display: block; line-height: 0; }
.video-link img { display: block; width: 100%; object-fit: cover; border-radius: 10px; }
.video-link::after {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--teal);
  font-size: 26px;
  line-height: 72px;
  text-align: center;
  text-indent: 4px;
}
.video-link:hover::after { background: var(--coral); color: var(--white); }

/* home: coral mission statement on teal (live section 1) */
.mission-statement {
  font-family: var(--sans-heading);
  font-weight: 700;
  font-size: 35px;
  line-height: 1.35;
  color: var(--coral);
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 1024px) { .mission-statement { font-size: 31px; } }
@media (max-width: 767px) { .mission-statement { font-size: 26px; } }
.gsec--teal .mission-statement { color: var(--coral); }
.mission-statement em { font-style: italic; }
.mission-lede {
  max-width: 58rem;
  margin: 3rem auto 0;
  text-align: center;
  font-size: 1.15rem;
}
.gsec--teal a { color: var(--white); }
.gsec--teal a:hover { color: var(--sand); }
.gsec--teal .btn, .gsec--teal .btn:hover { color: var(--white); }

/* press hub: CSS-only country / original-language filters (zero JS) */
.pf-input { position: absolute; opacity: 0; pointer-events: none; }
.press-filters {
  border: 1px solid var(--card-line);
  border-radius: 12px;
  padding: 1.5rem 1.75rem 1.75rem;
  margin: 0 0 3rem;
  background: #fbfbfa;
}
.pf-intro {
  font-size: 1rem;
  color: var(--grey);
  margin: 0 0 1.25rem;
  max-width: 62ch;
}
.pf-row { display: flex; align-items: baseline; gap: 1rem; }
.pf-row + .pf-row { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--card-line); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pf-group-label {
  font-family: var(--sans-heading);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grey);
  flex: 0 0 9.5rem;
}
@media (max-width: 767px) {
  .press-filters { padding: 1.25rem; }
  .pf-row { display: block; }
  .pf-group-label { display: block; margin-bottom: 0.6rem; }
}
.press-filters .chip {
  cursor: pointer;
  border: 1px solid var(--card-line);
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 0.95rem;
  color: var(--body-ink);
  background: var(--white);
  transition: color 0.1s ease-in-out, border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
}
.press-filters .chip:hover { border-color: var(--coral-2); color: var(--coral-2); }
/* selected chip */
#pfc-all:checked ~ .press-filters label[for='pfc-all'],
#pfc-lu:checked ~ .press-filters label[for='pfc-lu'],
#pfc-br:checked ~ .press-filters label[for='pfc-br'],
#pfc-us:checked ~ .press-filters label[for='pfc-us'],
#pfc-de:checked ~ .press-filters label[for='pfc-de'],
#pfc-it:checked ~ .press-filters label[for='pfc-it'],
#pfl-all:checked ~ .press-filters label[for='pfl-all'],
#pfl-fr:checked ~ .press-filters label[for='pfl-fr'],
#pfl-de:checked ~ .press-filters label[for='pfl-de'],
#pfl-pt:checked ~ .press-filters label[for='pfl-pt'],
#pfl-lu:checked ~ .press-filters label[for='pfl-lu'],
#pfl-en:checked ~ .press-filters label[for='pfl-en'],
#pfl-it:checked ~ .press-filters label[for='pfl-it'] {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}
/* card filtering */
#pfc-lu:checked ~ .year-group .card:not([data-country='LU']),
#pfc-br:checked ~ .year-group .card:not([data-country='BR']),
#pfc-us:checked ~ .year-group .card:not([data-country='US']),
#pfc-de:checked ~ .year-group .card:not([data-country='DE']),
#pfc-it:checked ~ .year-group .card:not([data-country='IT']),
#pfl-fr:checked ~ .year-group .card:not([data-lang~='FR']),
#pfl-de:checked ~ .year-group .card:not([data-lang~='DE']),
#pfl-pt:checked ~ .year-group .card:not([data-lang~='PT']),
#pfl-lu:checked ~ .year-group .card:not([data-lang~='LU']),
#pfl-en:checked ~ .year-group .card:not([data-lang~='EN']),
#pfl-it:checked ~ .year-group .card:not([data-lang~='IT']) {
  display: none;
}
/* hide a year heading when the country filter leaves it empty */
#pfc-lu:checked ~ .year-group:not(:has(.card[data-country='LU'])),
#pfc-br:checked ~ .year-group:not(:has(.card[data-country='BR'])),
#pfc-us:checked ~ .year-group:not(:has(.card[data-country='US'])),
#pfc-de:checked ~ .year-group:not(:has(.card[data-country='DE'])),
#pfc-it:checked ~ .year-group:not(:has(.card[data-country='IT'])),
#pfl-fr:checked ~ .year-group:not(:has(.card[data-lang~='FR'])),
#pfl-de:checked ~ .year-group:not(:has(.card[data-lang~='DE'])),
#pfl-pt:checked ~ .year-group:not(:has(.card[data-lang~='PT'])),
#pfl-lu:checked ~ .year-group:not(:has(.card[data-lang~='LU'])),
#pfl-en:checked ~ .year-group:not(:has(.card[data-lang~='EN'])),
#pfl-it:checked ~ .year-group:not(:has(.card[data-lang~='IT'])) {
  display: none;
}

/* contact page: centered column, full-height form (no inner scrolling) */
/* Doubled up: .hub-content > .band-inner sets 1200px at higher specificity,
   so the single-class rule never applied and the notes ran 133 characters to
   the line. */
.hub-content > .band-inner.contact-wrap, .contact-wrap { max-width: 760px; margin: 0 auto; }
.contact-note { text-align: center; color: var(--body-ink); margin: 0 0 2.5rem; }
.contact-frame {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
}
.contact-alt { text-align: center; margin: 2.5rem 0 0; }
@media (max-width: 767px) { .contact-frame { height: 720px; } }

/* responsive 16:9 video embed (about: film trailer) */
.video-embed {
  max-width: 860px;
  margin: 2.5rem auto 0;
  aspect-ratio: 16 / 9;
}
.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
}
/* video sitting in a split column: fill the column, no extra margin */
.video-embed--flush { max-width: none; margin: 0; align-self: center; }

/* embedded podcast player (press pages where the source is audio/video) */
.audio-figure { margin: 2rem 0; }
.audio-frame { display: block; width: 100%; height: 175px; border: 0; overflow: hidden; background: transparent; }
.audio-figure figcaption { font-size: 0.95rem; color: var(--grey); margin-top: 0.75rem; }

/* captioned video */
.video-figure { margin: 0; }
.video-figure--wide { max-width: 900px; margin: 0 auto; }
.video-figure figcaption { display: block; margin-top: 0.9rem; }
.video-figure .video-title {
  display: block;
  font-family: var(--sans-heading);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
}
.video-figure .video-meta {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 0.35rem;
}
.video-figure .video-caption { display: block; font-size: 1rem; margin-top: 0.6rem; }
.gsec--teal .video-figure .video-meta, .gsec--dark .video-figure .video-meta,
.about-page .video-figure .video-meta { color: rgba(255, 255, 255, 0.7); }
.about-page .gsec--white .video-figure .video-meta { color: var(--grey); }

/* two or three videos side by side */
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; }
.video-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .video-grid, .video-grid--3 { grid-template-columns: 1fr; max-width: 34rem; margin: 0 auto; }
}

/* home: photo collage (live section 2 left column) */
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.collage img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.collage .collage-wide { grid-column: 1 / -1; }

/* home: venture cards (live "What I'm Working On") */
.venture-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 48px 36px;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.venture-cards li { margin: 0; display: flex; flex-direction: column; }
.venture-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.venture-logo img { max-height: 100%; object-fit: contain; }
.venture-cards h3 { font-size: 20px; line-height: 1.25; margin: 0 0 0.6rem; }
/* reserve equal title space on the 5-across layout so descriptions start on the same line */
@media (min-width: 1101px) { .venture-cards h3 { min-height: 3.6em; } }
.venture-cards h3 a { color: var(--coral-ink); text-decoration: none; }
.venture-cards h3 a:hover { color: var(--teal); }
.venture-cards p { font-size: 1rem; color: var(--body-ink); margin: 0 0 1rem; }
.venture-cards .venture-btn { margin: auto 0 0; padding-top: 1.25rem; }
@media (max-width: 1100px) { .venture-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .venture-cards { grid-template-columns: 1fr; } }

/* teal + white solid buttons (live gbp-button styles) */
.btn--teal {
  background: var(--teal-btn);
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: var(--white);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}
.btn--teal:hover, .btn--teal:focus { background: var(--teal); color: var(--white); }
.gsec:not(.gsec--teal):not(.gsec--dark) .btn--teal { border-color: var(--teal-btn); }

/* home: pillar columns on near-black band (live "Global Migration Advisory") */
.pillars-sec .pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 36px;
  margin-top: 2rem;
}
.pillars-sec h3 { font-size: 24px; margin: 0 0 0.75rem; }
.pillars-sec h3 a { color: var(--coral); text-decoration: none; }
.pillars-sec h3 a:hover { color: var(--white); }
.pillars-sec p { color: rgba(255, 255, 255, 0.85); font-size: 1rem; margin: 0; }
.pillars-sec p a { color: var(--coral); }
@media (max-width: 1024px) { .pillars-sec .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pillars-sec .pillar-grid { grid-template-columns: 1fr; } }

/* home: global migration advisory columns (live "Connecting Global Trends") */
.advisory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 40px;
  margin-top: 1rem;
  align-items: start;
}
.advisory-grid article { display: flex; flex-direction: column; height: 100%; }
.advisory-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1.5rem;
}
/* These h3s were inheriting the light-section heading ink (#1d1d1d) onto the
   #172021 band — 1.02:1, three headings that were there in the DOM and not on
   the screen. */
.advisory-sec h3 {
  color: var(--white);
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 0.75rem;
  min-height: 2.6em;
}
.advisory-sec p { color: rgba(255, 255, 255, 0.85); font-size: 1rem; margin: 0; }
.advisory-sec .advisory-link { margin: auto 0 0; padding-top: 1.25rem; }
.advisory-sec .advisory-link a { color: var(--coral-on-dark); }
.advisory-sec .advisory-link a:hover { color: var(--white); }
@media (max-width: 1024px) {
  .advisory-grid { grid-template-columns: 1fr; max-width: 34rem; margin: 1rem auto 0; }
  .advisory-sec h3 { min-height: 0; }
}

/* home: press cards on teal (live "Press & Media") */
.press-sec h2 { margin-bottom: 1rem; }
.press-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 40px;
}
.press-card { display: flex; flex-direction: column; }
.press-img-link { display: block; line-height: 0; }
.press-excerpt { font-size: 1rem; color: rgba(255, 255, 255, 0.85); margin: 0.9rem 0 0; }
.press-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  background: var(--white);
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
.press-meta { font-size: 0.875rem; color: rgba(255, 255, 255, 0.75); margin: 0 0 0.75rem; }
.press-meta .outlet { font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.press-card h3 { font-size: 20px; line-height: 1.35; margin: 0; }
.press-card h3 a { color: var(--white); text-decoration: none; }
.press-card h3 a:hover { color: var(--coral); }
@media (max-width: 1024px) { .press-grid { grid-template-columns: 1fr; max-width: 34rem; margin: 0 auto; } }

/* home: testimonials on sand (live "Clients") */
.testi-kicker {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 0.95rem;
  color: var(--grey);
  margin: 0 0 0.75rem;
}
.testi-sec h2 { color: #3a3a3a; margin-bottom: 0.75rem; }
.testi-sub { text-align: center; color: var(--coral); margin: 0 0 0.5rem; }
.testi-sub::after {
  content: '';
  display: block;
  width: 88px;
  height: 3px;
  background: var(--coral);
  margin: 1.5rem auto 0;
}
.testi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  max-width: 56rem;
  margin: 5.5rem auto 0;
}
.testi-card {
  background: var(--white);
  padding: 0 2rem 2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.testi-avatar {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--grey);
  margin-top: -44px;
  margin-bottom: 1.5rem;
}
.testi-name { font-style: italic; color: var(--coral); font-size: 1.05rem; margin: 0 0 0.4rem; }
.testi-role {
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--heading);
  margin: 0 0 1rem;
}
.testi-card p:last-child { color: var(--body-ink); margin: 0; }
@media (max-width: 767px) { .testi-grid { grid-template-columns: 1fr; gap: 64px; } }

/* about page: teal canvas, live section treatments */
.about-page { background: var(--teal); color: var(--white); }
.about-page .gsec { background: transparent; }
.about-page .gsec--white { background: var(--white); color: var(--heading); }
.about-page h1 { font-size: 42px; color: var(--white); margin-bottom: 1.25rem; }
.about-page .gsec h2 { color: var(--white); }
.about-page .gsec h2.coral { color: var(--coral); }
.about-page .gsec--white h2 { color: var(--heading); }
.about-page p { color: rgba(255, 255, 255, 0.92); }
.about-page .gsec--white p, .about-page .gsec--white td, .about-page .gsec--white th { color: inherit; }
.about-page a { color: var(--white); }
.about-page a:hover { color: var(--sand); }
.about-page .gsec--white a { color: var(--coral-ink); }
.about-page .gsec--white a:hover { color: var(--teal); }
.about-page .about-hero { padding-top: 96px; }
.about-page .eyebrow { color: var(--coral-on-dark); }
.about-portrait { width: 100%; }
@media (max-width: 767px) { .about-page h1 { font-size: 32px; } }

/* rounded photo cards with color overlays (about mission / let's connect) */
.overlay-card {
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  padding: 88px 64px;
  text-align: center;
  background-position: center;
  background-size: cover;
}
.overlay-card--coral {
  background-image:
    linear-gradient(rgba(207, 103, 90, 0.82), rgba(207, 103, 90, 0.82)),
    url('/wp-content/uploads/2025/06/19-1-scaled-1.jpg');
}
.overlay-card--dark {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url('/wp-content/uploads/2025/06/2-1-scaled-1.jpg');
}
.overlay-card blockquote {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font-style: italic;
}
.overlay-card blockquote p {
  font-family: var(--sans-heading);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.55;
  color: var(--white);
  margin: 0;
}
.mission-quote-sec h2 { margin-bottom: 2.5rem; }
/* about: My Mission — the statement, quietly set. No display type on long copy. */
.mission-quote {
  border: 0;
  border-top: 3px solid var(--coral);
  border-bottom: 3px solid var(--coral);
  background: none;
  max-width: 60rem;
  margin: 0 auto;
  padding: 2.5rem 0;
  text-align: center;
}
.mission-quote p {
  font-family: var(--sans-body);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 767px) { .mission-quote p { font-size: 1.15rem; } }
/* about: My Story — two readable columns instead of one long measure */
.story-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.story-cols p { margin: 0 0 1.5em; }
@media (max-width: 900px) { .story-cols { grid-template-columns: 1fr; } }
.connect-sec .overlay-card h2 { margin-bottom: 1rem; }
.connect-sec .overlay-card p { font-weight: 600; font-size: 1.15rem; }
.connect-sec .overlay-card .btn-row { margin-top: 2rem; }
@media (max-width: 767px) { .overlay-card { padding: 56px 24px; } }

/* about: areas of expertise columns */
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 36px;
  margin-top: 2.5rem;
}
/* These four are photographs, not icons: groups of people holding flags, Daniel
   on stage, a delegation in front of flags. `height:96px; object-fit:contain`
   rendered them as ~128x96 postage stamps at four different widths, so the row
   read as ragged clip-art and nobody in them was identifiable. Give each the
   full column at one shared aspect and let cover do the framing; the
   object-position values below are set per image, from looking at where the
   people actually are in each frame. */
.expertise-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 10px;
  margin-bottom: 1.5rem;
}
.expertise-grid h3 { font-size: 20px; color: var(--white); margin: 0 0 0.75rem; }
.expertise-grid p { font-size: 1rem; margin: 0; }
@media (max-width: 1024px) { .expertise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .expertise-grid { grid-template-columns: 1fr; } }

/* about: achievements list */
.achievements-list { padding-left: 1.2rem; margin: 0; }
.achievements-list li { margin-bottom: 0.85rem; color: rgba(255, 255, 255, 0.92); }

/* about: book mockup fills its column (live bleeds to edge on white) */
.book-img { display: block; width: 100%; border-radius: 10px; }


/* ---------------------------------------------------------------- essay ---
   The HackTown keynote. Structured on the five characters the way the deck was,
   but the glyphs are margin marks — English headings carry the sections. */
.essay-hero {
  background: var(--teal);
  color: var(--white);
  padding: 108px 40px 92px;
}
.essay-hero-inner { max-width: 46rem; margin: 0 auto; }
.essay-hero .eyebrow { color: var(--coral-on-dark); }
.essay-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0 0 1.25rem;
}
.essay-sub {
  font-family: var(--sans-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 1.75rem;
}
.essay-meta {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 78ch;
}
/* Standfirst on the nationality-law essay: unstyled, so it inherited the full
   1200px column and ran 133 characters to the line. */
.essay-standfirst {
  max-width: 62ch;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--body-ink);
}
.essay-body {
  max-width: 40rem;
  margin: 0 auto;
  padding: 72px 40px 96px;
  font-size: 1.15rem;
  line-height: 1.72;
  color: #2c2c2c;
}
.essay-body p { margin: 0 0 1.5em; }
.essay-lede { font-size: 1.4rem; line-height: 1.5; color: var(--heading); }
.essay-part { margin: 3.5rem 0 2rem; }
.essay-part h2 {
  font-family: var(--sans-heading);
  font-size: 28px;
  line-height: 1.2;
  margin: 0;
  color: var(--heading);
}
.essay-mark {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 0.6rem !important;
  border-top: 3px solid var(--coral);
  padding-top: 1.1rem;
}
.essay-mark span[lang='zh'] { font-size: 1.9rem; line-height: 1; color: var(--coral); }
.essay-mark .pin {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}
/* the deck's device: a question alone on the slide */
.essay-question {
  background: var(--teal);
  color: var(--white);
  border-radius: 12px;
  padding: 2.5rem 2.25rem;
  margin: 3rem 0;
  text-align: center;
}
.essay-question p {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.4;
  color: var(--white);
  margin: 0 0 0.6em !important;
}
.essay-question p:last-child { margin-bottom: 0 !important; }
.essay-question--quiet { background: var(--sand); color: var(--heading); }
.essay-question--quiet p { color: var(--heading); }
.essay-question--quiet p[lang='zh'] { font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: 0.08em; }
.essay-gloss {
  font-family: var(--sans-body) !important;
  font-style: italic;
  font-size: 1.05rem !important;
  color: var(--body-ink) !important;
}
.essay-pull {
  font-family: var(--sans-heading);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.35;
  color: var(--coral);
  border-left: 4px solid var(--coral);
  padding-left: 1.5rem;
  margin: 2.5rem 0 !important;
}
.essay-close {
  border-top: 1px solid var(--card-line);
  margin-top: 3.5rem;
  padding-top: 2.5rem;
}
.essay-close p { font-size: 1.2rem; line-height: 1.65; }
.essay-close-last {
  font-family: var(--serif);
  font-size: 1.6rem !important;
  color: var(--teal);
  margin-bottom: 0 !important;
}
.essay-foot {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--card-line);
}
.essay-foot p { font-size: 0.98rem; color: var(--grey); margin: 0 !important; }
@media (max-width: 767px) {
  .essay-hero { padding: 72px 20px 60px; }
  .essay-body { padding: 48px 20px 72px; font-size: 1.08rem; }
  .essay-question { padding: 2rem 1.25rem; }
}

/* publications: the essay promo band */
.essay-promo img { width: 100%; border-radius: 10px; object-fit: cover; aspect-ratio: 4 / 3; }
.essay-promo .eyebrow { color: var(--coral); }

/* Tag chips (pure CSS) — hub cards + article headers */
.tag-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0 0.9rem; }
.tag-chip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-btn, #0d5c63);
  background: rgba(13, 92, 99, 0.08);
  border: 1px solid rgba(13, 92, 99, 0.25);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  line-height: 1.4;
}

/* ---------------------------------------------- shared full-bleed page hero */
/* Used by Speaking, Research, Press, Film and Contact. About keeps its teal
   canvas and the home page keeps the live-parity multilingual hero. */
/* Section hero: headline over a photograph.
   The old scrim ran 0.92 → 0.66 → 0.40, which still left faces legible directly
   under the headline — on /publications/ the h1 sat across an archival portrait's
   face, which is the thing he rejected on the overlay cards and which was never
   applied to the heroes.
   Note the images here are all taller in aspect than the hero box, so `cover`
   crops them vertically only: horizontal `background-position` is a no-op at
   desktop width and cannot be used to move a subject out from under the type.
   The scrim is therefore the lever. It is now effectively solid across the text
   column (h1 is max-width 20ch ≈ 560px ≈ 39% of a 1440 viewport) and opens up
   past 55%, so the photograph reads on the right where nothing is set over it. */
.page-hero {
  background:
    linear-gradient(
      to right,
      rgba(4, 55, 62, 0.985) 0%,
      rgba(4, 55, 62, 0.965) 40%,
      rgba(4, 55, 62, 0.72) 58%,
      rgba(4, 55, 62, 0.34) 100%
    ),
    var(--hero-image) var(--hero-position, center) / cover no-repeat;
  color: var(--white);
  display: flex;
  align-items: center;
  min-height: 60vh;
  padding: 5rem 40px;
}
/* Narrow viewports have no room for a clear column, so fall back to an even
   wash rather than leaving type half on and half off the photograph. */
@media (max-width: 900px) {
  .page-hero {
    background:
      linear-gradient(rgba(4, 55, 62, 0.93), rgba(4, 55, 62, 0.93)),
      var(--hero-image) var(--hero-position, center) / cover no-repeat;
  }
}

/* --hero-art--
   The film key art already carries the title as part of the artwork, so the
   rendered h1 printed "Lëtzebuerger an Argentinien" a second time directly over
   the version set into the image. Keep the h1 in the document for SEO and
   screen readers, stop drawing it twice, and lift the scrim so the artwork —
   which is the point of this hero — is actually visible. */
/* The artwork's own title runs across the middle of the frame and nearly its
   full width, so any text column laid over it collides with the letterforms —
   no scrim, crop or vertical shift avoids that, and `cover` gives no horizontal
   travel because the art is taller in aspect than the hero box.
   Set the poster beside the text instead of behind it: artwork on the right at
   its own aspect, title and credits on clean teal at the left. The title
   appearing once in the artwork and once as an h1 alongside it reads as a
   poster with a caption, which is the normal convention for a film page. */
.page-hero--art {
  background: var(--hero-image) right center / 56% auto no-repeat, var(--teal);
  align-items: center;
  min-height: 56vh;
}
/* Keep the inner block on the same left gutter as the header and every other
   section; constrain the text itself so it stops short of the artwork. */
.page-hero--art h1 { max-width: 13ch; }
.page-hero--art .hero-meta { max-width: 40ch; }
@media (max-width: 900px) {
  /* Stack: poster above, text below, neither cropped. */
  .page-hero--art {
    background: var(--teal);
    display: block;
    padding-top: 0;
  }
  .page-hero--art .page-hero-inner { max-width: var(--container); margin: 0 auto; }
  .page-hero--art::before {
    content: '';
    display: block;
    width: calc(100% + 40px);
    margin: 0 -20px 2rem;
    aspect-ratio: 1921 / 1022;
    background: var(--hero-image) center / cover no-repeat;
  }
}
/* --hero-photo--
   For heroes whose image is a photograph of a person rather than a texture.
   The full-bleed treatment puts the text column over the left 40-47% of the
   frame under a 0.96-0.985 scrim, which is fine for a wall or a crowd and
   wrong for a portrait: the subject is either washed to nothing or has type
   set across his face, and `cover` gives no horizontal travel to move him out
   of the way (the photo is always taller in aspect than the hero box).
   Set the photograph beside the text instead — right 46%, cropped by `cover`
   to fill the band, headline on clean teal at the left. Same solution as
   --art, different reason: there the artwork carried its own title, here the
   photograph carries a face. */
.page-hero--photo {
  position: relative;
  background: var(--teal);
  overflow: hidden;
}
.page-hero--photo::before {
  content: '';
  position: absolute;
  inset: 0 0 0 54%;
  background: var(--hero-image) var(--hero-position, center) / cover no-repeat;
  /* Soften the inner edge so the photograph joins the teal rather than
     butting against it as a slab. Degrades to a hard edge where unsupported. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 90px);
  mask-image: linear-gradient(to right, transparent 0, #000 90px);
}
.page-hero--photo .page-hero-inner { position: relative; z-index: 1; }
/* Stop the text short of the photograph at every width above the stack point.
   Doubled class so these beat the base .page-hero h1 / .lede widths, which are
   declared further down the file and would otherwise win the specificity tie. */
.page-hero.page-hero--photo h1 { max-width: min(16ch, 44%); }
.page-hero.page-hero--photo .lede { max-width: min(46ch, 44%); }
.page-hero.page-hero--photo .hero-meta { max-width: min(46ch, 44%); }
.page-hero.page-hero--photo .btn-row { max-width: 44%; }
@media (max-width: 900px) {
  /* Stack: photograph above, text below, neither cropped hard nor written on.
     Doubled class: the 767px block further down also targets .page-hero and
     would otherwise put the top padding back above the photograph. */
  .page-hero.page-hero--photo {
    display: block;
    padding-top: 0;
    background: var(--teal);
  }
  .page-hero--photo::before {
    position: static;
    display: block;
    width: calc(100% + 40px);
    margin: 0 -20px 2rem;
    aspect-ratio: 3 / 2;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .page-hero--photo .page-hero-inner { max-width: var(--container); margin: 0 auto; }
  .page-hero.page-hero--photo h1,
  .page-hero.page-hero--photo .lede,
  .page-hero.page-hero--photo .hero-meta,
  .page-hero.page-hero--photo .btn-row { max-width: none; }
}
.page-hero--sm { min-height: 42vh; padding: 4rem 40px; }
.page-hero-inner { max-width: var(--container); width: 100%; margin: 0 auto; }
.page-hero h1 {
  color: var(--white);
  max-width: 20ch;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.page-hero .lede { max-width: 58ch; color: rgba(255, 255, 255, 0.92); font-size: 1.2rem; }
.page-hero .hero-meta {
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  margin: 0 0 1.25rem;
}
.page-hero .btn-row { margin: 2.25rem 0 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.page-hero .btn { background: var(--coral-btn); border-color: var(--coral-btn); }
.page-hero .btn:hover, .page-hero .btn:focus { background: var(--coral-btn-hover); border-color: var(--coral-btn-hover); }
.page-hero .btn--teal { background: var(--teal-btn); border-color: rgba(255, 255, 255, 0.9); }
.page-hero .btn--teal:hover, .page-hero .btn--teal:focus { background: var(--teal); }
@media (max-width: 1024px) { .page-hero, .page-hero--sm { padding: 4rem 30px; } }
@media (max-width: 767px) {
  .page-hero, .page-hero--sm { padding: 3rem 20px; min-height: 0; }
}

.talk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin-top: 2.5rem;
}
.talk-card { border-top: 3px solid var(--coral); padding-top: 1.5rem; }
.talk-card h3 { font-size: 24px; margin: 0 0 0.75rem; }
.talk-card p { font-size: 1rem; color: var(--body-ink); margin: 0; }
.gsec--teal .talk-card p { color: rgba(255, 255, 255, 0.9); }
.gsec--teal .talk-card { border-top-color: var(--coral); }
@media (max-width: 900px) { .talk-grid { grid-template-columns: 1fr; gap: 28px; } }

.stage-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 4rem;
}
.stage-strip img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
}
@media (max-width: 767px) { .stage-strip { grid-template-columns: 1fr; } }

.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 36px;
}
.facts-grid h3 { font-size: 20px; margin: 0 0 0.5rem; }
.facts-grid p { font-size: 1rem; color: var(--body-ink); margin: 0; }
@media (max-width: 767px) { .facts-grid { grid-template-columns: 1fr; gap: 28px; } }

/* speaking: past engagements — one row each, media 1/3 left, detail 2/3 right */
.eng-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.eng-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 36px;
  align-items: start;
  padding: 2.25rem 0;
  border-top: 1px solid var(--card-line);
}
.eng-row:first-child { border-top: 0; padding-top: 0.5rem; }
.eng-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}
.eng-media .video-embed { aspect-ratio: 16 / 9; }
/* Language, subtitles and running time under an engagement's recording, so the
   answer is where the video is and not only in the index above. */
.eng-recmeta {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0.5rem 0 0;
}
.eng-body h3 { font-size: 24px; margin: 0 0 0.75rem; line-height: 1.25; }
/* 800px of 16.8px text runs ~92 characters to the line; comfortable prose is
   45-75. The column stays 2/3 wide, the sentence does not. */
.eng-body p { font-size: 1.05rem; color: var(--body-ink); margin: 0; max-width: 72ch; }
.eng-body .card-meta { margin: 0 0 0.4rem; }
.eng-link { margin-top: 1rem !important; }
@media (max-width: 767px) {
  .eng-row { grid-template-columns: 1fr; gap: 20px; padding: 1.75rem 0; }
  .eng-media img { aspect-ratio: 16 / 9; }
}

.eng-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 48px;
  margin-top: 2.5rem;
}
.eng-item { border-top: 1px solid var(--card-line); padding-top: 1.25rem; }
.eng-item h3 { font-size: 20px; margin: 0 0 0.5rem; }
.eng-item p { font-size: 1rem; color: var(--body-ink); margin: 0; }
.eng-item .card-meta { margin: 0 0 0.4rem; }
.eng-press { margin: 3.5rem 0 0; color: var(--body-ink); }
@media (max-width: 767px) { .eng-grid { grid-template-columns: 1fr; gap: 28px; } }

.overlay-card--stage {
  border-color: transparent;
  background-image:
    linear-gradient(rgba(23, 32, 33, 0.72), rgba(23, 32, 33, 0.72)),
    url('/wp-content/uploads/2026/05/Booth-AAL.jpeg');
}
.overlay-card--stage h2 { color: var(--white); }
.overlay-card--stage p { color: rgba(255, 255, 255, 0.92); font-size: 1.15rem; }
.booking-sec { padding-top: 0; }

/* press cards: country + original-language bubbles (mirror the filter chips) */
.card-grid .card { display: flex; flex-direction: column; }
.bubbles { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: auto 0 0; padding-top: 1.1rem; }
.bub {
  display: inline-block;
  font-family: var(--sans-heading);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  line-height: 1.5;
  white-space: nowrap;
}
.bub--country { background: var(--teal); color: var(--white); }
.bub--lang { background: rgba(207, 103, 90, 0.1); color: var(--coral-ink); border: 1px solid rgba(207, 103, 90, 0.35); }

/* press article: featured image under the headline */
.prose .lead-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  margin: 0 0 2rem;
  background: var(--sand);
}

/* ------------------------------------------------------------ research page */
.prog-sec .eyebrow { margin-bottom: 3rem; }
.prog-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: center;
  padding: 3.5rem 0;
  border-top: 1px solid var(--card-line);
}
.prog-row:first-of-type { border-top: 0; padding-top: 0; }
.prog-row:nth-child(odd) .prog-media { order: 2; }
.prog-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  background: var(--cream);
  border: 1px solid var(--card-line);
  border-radius: 12px;
  padding: 1.25rem;
}
.prog-n {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--sand);
  margin: 0 0 0.4rem;
}
.prog-kicker {
  font-family: var(--sans-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 0.6rem;
}
.prog-body h2 { font-size: 30px; margin: 0 0 1rem; max-width: 22ch; }
.prog-body p { color: var(--body-ink); }
.prog-links { font-family: var(--sans-heading); font-size: 0.95rem; margin: 0; }
.prog-links .sep { color: var(--card-line); }
@media (max-width: 900px) {
  .prog-row { grid-template-columns: 1fr; gap: 28px; padding: 2.5rem 0; }
  .prog-row:nth-child(odd) .prog-media { order: 0; }
  .prog-body h2 { font-size: 26px; max-width: none; }
}

/* featured study */
.feat-study {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
  margin-bottom: 5rem;
}
.feat-study:hover { box-shadow: 0 6px 26px rgba(0, 0, 0, 0.14); }
.feat-media { display: block; background: var(--cream); }
.feat-media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.feat-body { display: block; padding: 2.75rem 2.75rem 2.5rem; }
.feat-body .card-meta { display: block; }
.feat-title {
  display: block;
  font-family: var(--sans-heading);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  color: var(--heading);
  margin: 0.35rem 0 0.9rem;
}
.feat-study:hover .feat-title { color: var(--coral-2); }
.feat-ex { display: block; color: var(--body-ink); font-size: 1.02rem; margin-bottom: 1.1rem; }
.feat-more {
  display: inline-block;
  font-family: var(--sans-heading);
  font-weight: 500;
  color: var(--coral-ink);
  margin-top: 1.25rem;
}
@media (max-width: 900px) {
  .feat-study { grid-template-columns: 1fr; }
  .feat-media img { aspect-ratio: 16 / 9; }
  .feat-body { padding: 2rem; }
  .feat-title { font-size: 24px; }
}

.studies-h { font-size: 28px; margin-bottom: 0.75rem; }
.studies-note { max-width: 70ch; margin: 0 0 2rem; color: var(--ink-muted, #4a4a4a); }
.card-src { color: #5a5a5a; }
.study-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 36px; }
.study-card { display: flex; flex-direction: column; }
.study-media { display: block; margin-bottom: 1.1rem; }
.study-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
  background: var(--white);
}
.study-card h3 { font-size: 21px; line-height: 1.25; margin: 0.15rem 0 0.6rem; }
.study-card h3 a { color: var(--heading); text-decoration: none; }
.study-card h3 a:hover { color: var(--coral-2); }
.study-ex { font-size: 0.98rem; color: var(--body-ink); margin: 0 0 1rem; }
.study-card .tag-chips { margin-top: auto; }
@media (max-width: 1024px) { .study-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .study-grid { grid-template-columns: 1fr; } }

.method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 36px; }
.method-grid p { margin: 0; }
.paper-list { list-style: none; margin: 0; padding: 0; }
.paper-list li { margin-bottom: 0.9rem; }
.paper-list strong { display: block; font-weight: 600; }
.paper-date { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; }
@media (max-width: 767px) { .method-grid { grid-template-columns: 1fr; gap: 32px; } }

/* home press cards sit on teal — bubbles need light treatment there */
.press-card { display: flex; flex-direction: column; }
.press-card .bubbles { padding-top: 1rem; }
.press-card .bub--country { background: var(--coral); color: var(--white); }
.press-card .bub--lang { background: rgba(255, 255, 255, 0.12); color: var(--white); border-color: rgba(255, 255, 255, 0.45); }

/* about: quiet closing panel (replaced the full-bleed photo overlay card) */
.connect-panel {
  max-width: 44rem;
  border-top: 3px solid var(--coral);
  padding-top: 2.25rem;
}
.connect-panel h2 { font-size: 30px; margin-bottom: 1rem; }
.connect-panel p { font-size: 1.05rem; }
.connect-panel .btn-row { margin-top: 1.75rem; }
.connect-sec { padding-top: 0; }

/* ---------------------------------------------------------------- books */
.book-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
.book-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: center;
}
.book-cover { display: block; }
.book-cover img { display: block; width: 100%; border-radius: 8px; }
.book-card h2 { font-size: 32px; margin: 0.35rem 0 0.5rem; }
.book-card h2 a { color: var(--heading); text-decoration: none; }
.book-card h2 a:hover { color: var(--coral-2); }
.book-sub { font-family: var(--serif); font-size: 1.2rem; color: var(--coral); margin: 0 0 1rem; }
.book-card p { color: var(--body-ink); }
.book-more { font-family: var(--sans-heading); margin: 0; }
@media (max-width: 900px) { .book-card { grid-template-columns: 1fr; gap: 24px; } }

.forthcoming { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--card-line); }
.forthcoming ul { list-style: none; margin: 0; padding: 0; }
.forthcoming li { margin-bottom: 0.6rem; color: var(--body-ink); }

.book-detail { display: grid; grid-template-columns: 7fr 4fr; gap: 72px; align-items: start; }
.book-detail-main h2 { font-size: 26px; margin-top: 2.5rem; }
.book-contents { padding-left: 1.1rem; margin: 0; }
.book-contents li { margin-bottom: 0.8rem; color: var(--body-ink); }
.book-held { padding-left: 1.1rem; margin: 0; }
.book-held li { margin-bottom: 0.5rem; }
.book-detail-side {
  border: 1px solid var(--card-line);
  border-radius: 12px;
  padding: 2rem;
  background: #fbfbfa;
  position: sticky;
  top: 110px;
}
.book-cover-img { display: block; width: 100%; border-radius: 8px; margin-bottom: 1.75rem; }
.book-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0 0 1.75rem; font-size: 0.95rem; }
.book-facts dt { font-family: var(--sans-heading); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em; color: var(--grey); align-self: center; }
.book-facts dd { margin: 0; color: var(--body-ink); }
.book-side-cta { margin: 0; }
.book-side-cta .btn { width: 100%; text-align: center; }
.book-alt-reads { font-size: 0.95rem; margin: 1rem 0 0; text-align: center; }
.book-alt-reads .sep { color: var(--card-line); }
@media (max-width: 900px) {
  .book-detail { grid-template-columns: 1fr; gap: 40px; }
  .book-detail-side { position: static; }
}

.rel-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rel-list a { font-family: var(--sans-heading); font-weight: 500; }
@media (max-width: 767px) { .rel-list { grid-template-columns: 1fr; gap: 12px; } }

/* ----------------------------------------------------------------- film */
.film-trailer-sec .video-embed { margin-top: 0; }
.film-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 36px;
  max-width: 860px;
  margin: 3rem auto 0;
}
.film-facts dt {
  font-family: var(--sans-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 0.3rem;
}
.film-facts dd { margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 0.98rem; }
@media (max-width: 767px) { .film-facts { grid-template-columns: 1fr 1fr; } }

.film-split { display: grid; grid-template-columns: 7fr 4fr; gap: 72px; align-items: start; }
.film-side {
  border-left: 3px solid var(--coral);
  padding-left: 2rem;
}
.film-side p { color: var(--body-ink); }
.film-links { font-family: var(--sans-heading); font-size: 0.98rem; line-height: 2; }
.film-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.film-cols h2 { font-size: 28px; }
.screening-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.screening-list li { margin-bottom: 1rem; color: var(--body-ink); }
.film-press { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
  .film-split, .film-cols, .film-press { grid-template-columns: 1fr; gap: 36px; }
  .film-side { border-left: 0; border-top: 3px solid var(--coral); padding: 1.5rem 0 0; }
}

/* --------------------------------------------------- closing Get In Touch --
   The ending the live site uses: portrait left, one line and the form right.
   Shared by the home and About pages. */
.git-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.git-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}
.git-body h2 { margin: 0 0 0.75rem; }
.git-lede {
  font-size: 1.05rem;
  color: var(--body-ink);
  margin: 0 0 1.5rem;
  max-width: 46ch;
}
.git-form {
  display: block;
  width: 100%;
  min-height: 620px;
  border: 0;
  background: transparent;
}
@media (max-width: 800px) {
  .git-split { grid-template-columns: 1fr; }
  .git-img { max-width: 420px; margin: 0 auto; }
}

/* Imported WordPress bodies wrote iframes at a fixed 1200x675. Belt and
   braces alongside the build-time wrapper in content.mjs. */
.prose iframe,
.post-body iframe,
.wp-body iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  max-width: 860px;
  border: 0;
  border-radius: 10px;
}

/* ------------------------------------------------------- research tables --
   Used by the nationality-law article. Scrolls rather than squashes on
   narrow screens. */
.table-wrap { overflow-x: auto; margin: 1.75rem 0; }
.data-table { border-collapse: collapse; width: 100%; font-size: 0.98rem; }
.data-table th, .data-table td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  vertical-align: top;
}
.data-table thead th {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
  border-bottom-width: 2px;
}
.data-table tbody th { white-space: nowrap; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.table-note { font-size: 0.95rem; color: var(--grey); margin-bottom: 0.25rem; }
.footnotes { font-size: 0.95rem; color: var(--grey); line-height: 1.6; }
.footnotes li { margin-bottom: 0.6rem; }
.essay-also { font-size: 1rem; margin-top: 1.25rem; opacity: 0.92; }
.prose .pull {
  font-size: 1.15rem;
  line-height: 1.5;
  border-left: 3px solid var(--coral, #e2725b);
  padding-left: 1.1rem;
  margin: 1.9rem 0;
}

/* Photo washes behind headline text put type over faces, and in the speaking
   CTA put "Book Daniel" over four people who are not Daniel. Flat panels. */
.overlay-card--coral { background-image: none; background: var(--coral); }
.overlay-card--dark  { background-image: none; background: var(--footer-bg); }
/* Both of these panels are photographs under a colour wash on the live site —
   a coral duotone behind the mission quote, a teal wash behind Let's Connect.
   Rebuilt as flat colour they read as empty swatches on a page that is already
   one continuous teal field. Pass a photograph in as --panel-image; without
   one the panel falls back to flat colour, which is what the swatch rules
   below still are. The wash is heavy enough that white type stays legible
   over any part of the frame and light enough that faces read. */
.overlay-panel {
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 64px);
  text-align: center;
  background-image: none;
  background-position: var(--panel-position, center);
  background-size: cover;
  background-repeat: no-repeat;
}
/* The wash is painted whether or not there is a photograph under it: with no
   --panel-image the layer list ends in `none` and the gradient sits on the
   matching flat colour, so the panel looks exactly as it did before. */
.overlay-panel--coral {
  background-color: var(--coral);
  background-image: linear-gradient(rgba(207, 103, 90, 0.80), rgba(207, 103, 90, 0.80)),
    var(--panel-image, none);
}
.overlay-panel--dark {
  background-color: var(--footer-bg);
  background-image: linear-gradient(rgba(9, 30, 33, 0.64), rgba(9, 30, 33, 0.64)),
    var(--panel-image, none);
}
.overlay-panel blockquote { border: 0; background: none; padding: 0; margin: 0; font-style: italic; }
.overlay-panel blockquote p {
  font-family: var(--sans-heading); font-weight: 700;
  font-size: clamp(20px, 2vw, 27px); line-height: 1.55; color: var(--white); margin: 0;
}
.overlay-panel h2 { color: var(--white); margin-bottom: 1rem; }
/* Bold, as on the live panels — it is set over a photograph, not flat colour. */
.overlay-panel p { color: var(--white); font-size: 1.1rem; font-weight: 600; }

/* Index of every recording on the speaking page, sitting under the three
   featured embeds so nothing is discoverable only by scrolling into a row. */
.rec-index { margin-top: 3rem; border-top: 1px solid rgba(0, 0, 0, 0.12); padding-top: 1.75rem; }
.rec-index h3 { font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 1rem; }
.rec-index ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 3rem; }
.rec-index li { break-inside: avoid; margin: 0 0 0.6rem; font-size: 1rem; }
.rec-index a { font-weight: 600; }
.rec-index .rec-meta { color: var(--grey); display: block; font-size: 0.9rem; }
@media (max-width: 700px) { .rec-index ul { columns: 1; } }

/* about, rebuilt on one continuous dark band to match the live page */

/* 96px top + 96px bottom reads as a seam between two bands on a page that has
   a background colour change at every section. On this page the whole thing is
   one continuous teal field, so the doubled padding just stacks into ~190px of
   empty colour between every block. 64px keeps the sections distinct without
   the voids. */
.about-page--dark .gsec { padding-top: 64px; padding-bottom: 64px; }
.about-lede { font-size: 1.15rem; max-width: 56ch; margin: 0 0 3rem; }

/* Hero: text and portrait side by side.
   Previously the heading stack sat alone in a 620px column with ~700px of empty
   teal to its right, and the photo was dropped underneath at 900px wide, leaving
   another 420px empty beside it. Two columns fill both. */
.about-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.about-hero-split .about-lede { margin-bottom: 0; }
.about-page--dark .about-portrait {
  display: block;
  width: 100%;
  height: auto;
  /* Native aspect of daniel-atz-hero.png (2048x1107), which is what the live
     page shows. Session 7 forced this into a 5:4 box to protect the face from
     a crop; the crop it was protecting against does not exist, because at the
     photo's own aspect nothing is cut. The 5:4 version was a third taller than
     live and threw ~120px of dead teal under the lede beside it. */
  aspect-ratio: 2048 / 1107;
  object-fit: cover;
  border-radius: 10px;
  margin: 0;
}
@media (max-width: 900px) {
  .about-hero-split { grid-template-columns: 1fr; }
  .about-hero-split .about-lede { margin-bottom: 2rem; }
}
.story-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,4vw,3.5rem); align-items: start; }
.ach-split { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(2rem,4vw,3.5rem); align-items: center; }
.ach-img { width: 100%; height: auto; border-radius: 10px; display: block; }
@media (max-width: 900px) { .story-split, .ach-split { grid-template-columns: 1fr; } }

/* --------------------------------------------------- thumbnail framing fix --
   Study and research cards mostly lead with charts, tables and screenshots.
   Cropping those to fill a fixed box slices the middle out of a graphic and
   leaves an unreadable fragment. Fit the whole graphic instead, on a soft
   ground so the card still reads as a block. Photographs keep cover, but
   biased upward so faces and titles stay in frame rather than being cut. */
.feat-media img,
.study-media img {
  object-fit: contain;
  object-position: center;
  background: var(--cream-2);
  padding: 14px;
}
.press-img,
.eng-media img,
.about-portrait,
.git-img,
.essay-promo img {
  object-fit: cover;
  object-position: center 28%;
}