/*
Theme Name: Dr Belal Academic
Theme URI:
Author: Dr Belal
Description: Academic portfolio theme — publications, conferences, talks, media.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — defaults (overridden by wp_head)
   ============================================================ */
:root {
  --th-bg: #f5eed8;
  --th-surface: #ede4c4;
  --th-card: #f5eed8;
  --th-header-bg: #1e5f6e;
  --th-header-text: #f5eed8;
  --th-header-text-muted: rgba(245,238,216,0.48);
  --th-text: #1c1a14;
  --th-text-muted: #6e6254;
  --th-heading: #1c1a14;
  --th-accent: #b8902a;
  --th-accent-light: #d4ab50;
  --th-lapis: #204f9a;
  --th-border: #d8ceae;
  --th-teal: #1e5f6e;
  --th-font-heading: 'Playfair Display', Georgia, serif;
  --th-font-body: 'PT Sans', system-ui, sans-serif;
  --th-font-reading: 'PT Sans', system-ui, sans-serif;
  --th-size-base: 16px;

  /* ── Design-system tokens ── */
  /* Typography scale */
  --text-label:  0.6875rem; /* 11px — badge/pill text */
  --text-meta:   0.75rem;   /* 12px — meta rows, section labels, buttons */
  --text-sm:     0.875rem;  /* 14px — subtitles, supporting info */
  --text-base:   1rem;      /* 16px — body / card titles */
  --text-card:   1.125rem;  /* 18px — standard card/book title */
  --text-title:  1.375rem;  /* 22px — spotlight / featured hero titles */
  /* Letter-spacing */
  --tracking-caps:  0.12em; /* all-caps labels, buttons, meta */
  --tracking-label: 0.18em; /* section labels, eyebrows */
  /* Rhythm */
  --entry-pad: 1.75rem;     /* uniform entry top/bottom padding */
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: var(--th-size-base);
}

body {
  margin: 0;
  background-color: var(--th-bg);
  color: var(--th-text);
  font-family: var(--th-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#drb-content {
  flex: 1 0 auto;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   SKIP TO CONTENT
   ============================================================ */
.skip-to-content {
  position: absolute;
  top: -999px;
  left: 1rem;
  z-index: 9999;
  background: var(--th-teal);
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 0 0 4px 4px;
  transition: top 200ms;
}
.skip-to-content:focus {
  top: 0;
  outline: none;
}

/* ============================================================
   FOCUS STYLES (keyboard navigation)
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--th-teal);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Suppress focus ring on mouse click for elements that handle it via :hover */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}

/* ============================================================
   HEADINGS
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--th-font-heading);
  color: var(--th-heading);
  margin: 0 0 0.75rem;
}

h1 { font-size: 2.25rem; font-weight: 400; line-height: 1.2; }
h2 { font-size: 1.875rem; font-weight: 400; }
h3 { font-size: 1.25rem; font-weight: 400; }
h4 { font-size: 1rem; font-weight: 500; }
h5 { font-size: 0.875rem; font-weight: 500; }
h6 { font-size: 0.75rem; font-weight: 500; }

/* ============================================================
   LAYOUT CONTAINERS
   ============================================================ */
.site-container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(1rem, 4vw, 2.5rem);
}

.header-container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(1rem, 4vw, 2.5rem);
}

.container-narrow {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(1rem, 4vw, 2.5rem);
}

.container-xnarrow {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--th-header-bg);
  border-bottom: 1px solid rgba(0,0,0,0.12);
  min-height: 80px;
}

.site-branding {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  flex-shrink: 0;
}

.site-branding .photo {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  flex-shrink: 0;
}

.site-branding .monogram {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--th-header-text);
}

.site-branding .name {
  font-family: var(--th-font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--th-header-text);
  letter-spacing: 0.04em;
  margin: 0;
}

.site-branding .site-title-sub {
  font-size: var(--text-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--th-header-text-muted);
  max-width: 240px;
  margin: 0.25rem 0 0;
  line-height: 1.5;
}

/* Desktop nav */
.desktop-nav {
  display: none;
  align-items: stretch;
  height: 5rem;
}

/* WP nav_menu generates a <ul> — reset list styles and lay it out as flex */
.desktop-nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  height: 5rem;
}

.desktop-nav-menu > li {
  display: flex;
}

.desktop-nav-menu > li > a {
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--th-header-text-muted);
  border-bottom: 2px solid transparent;
  transition: color 200ms, border-color 200ms;
  white-space: nowrap;
  text-decoration: none;
}

.desktop-nav-menu > li.current-menu-item > a,
.desktop-nav-menu > li.current-page-ancestor > a,
.desktop-nav-menu > li.current-menu-parent > a,
.desktop-nav-menu > li:hover > a {
  color: var(--th-accent-light);
  border-bottom-color: var(--th-accent-light);
}

/* Mobile nav toggle */
.mobile-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--th-header-text);
  padding: 0.5rem;
}

/* Mobile nav dropdown */
.mobile-nav {
  border-top: 1px solid rgba(0,0,0,0.15);
  background-color: var(--th-header-bg);
}

.mobile-nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav-menu > li > a,
.mobile-nav a {
  display: block;
  padding: 0.875rem 1.5rem;
  font-size: var(--text-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--th-header-text-muted);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  transition: color 200ms;
  text-decoration: none;
}

.mobile-nav-menu > li > a:hover,
.mobile-nav a:hover {
  color: var(--th-accent-light);
}

/* Slogan bar */
/* Fallback slogan bar — shown only when there is no banner image */
.slogan-bar {
  border-top: 1px solid var(--th-border);
  padding: 0.625rem 0;
  text-align: center;
}

.slogan-bar p {
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--th-text);
  font-weight: 500;
  margin: 0;
}

/* Slogan overlaid on the global banner image */
.banner-slogan-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1.5rem 2.5rem;
  background: rgba(0,0,0,0.48);
  pointer-events: none;
}

.banner-slogan-text {
  font-family: var(--th-font-heading);
  font-size: clamp(0.875rem, 1.8vw, 1.25rem);
  letter-spacing: 0.28em;
  font-style: italic;
  color: #fff;
  font-weight: 400;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  max-width: 70ch;
  text-align: center;
}


@media (min-width: 1024px) {
  .desktop-nav {
    display: flex;
  }
  .mobile-nav-toggle {
    display: none;
  }
}

/* ============================================================
   FOOTER — teal, mirrors header
   ============================================================ */
.site-footer {
  background-color: var(--th-header-bg);
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 0;
}

.footer-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .footer-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
}

.footer-name {
  font-family: var(--th-font-heading);
  font-size: 0.9375rem;
  font-style: italic;
  font-weight: 400;
  color: #f5f1e8;
  margin: 0 0 0.2rem;
  letter-spacing: 0.03em;
}

.footer-tagline {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.42);
  margin: 0;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

@media (min-width: 640px) {
  .footer-right {
    align-items: flex-end;
  }
}

.footer-copy {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.25);
  margin: 0;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.footer-nav a {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.55);
  transition: color 200ms;
}

.footer-nav a:hover {
  color: var(--th-accent-light);
}

.footer-nav .sep {
  color: rgba(245,241,232,0.2);
  margin: 0 0.6rem;
  font-size: 0.625rem;
  user-select: none;
}

/* ============================================================
   GLOBAL (PERSISTENT) SITE BANNER
   ============================================================ */
.site-global-banner {
  position: relative;
  width: 100%;
  height: clamp(110px, 14vw, 180px);
  overflow: hidden;
}

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

/* ============================================================
   PAGE BANNER
   ============================================================ */
.page-banner {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

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

/* ============================================================
   SECTION LABELS & DIVIDERS
   ============================================================ */
.section-label {
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--th-text-muted);
  margin-bottom: 0.875rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--th-teal);
}

/* Homepage section eyebrow — uses brand colour, no left border */
.section-eyebrow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--th-header-bg);
  margin-bottom: 2rem;
}

/* Ornamental section divider */
.section-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 1.5rem;
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--th-border));
}

.section-divider::after {
  background: linear-gradient(to left, transparent, var(--th-border));
}

.section-divider span {
  color: var(--th-accent);
  font-size: 0.4375rem;
  flex-shrink: 0;
  opacity: 0.7;
}

.divider-list > * + * {
  border-top: 1px solid var(--th-border);
}

/* ============================================================
   META TAGS & DOTS
   ============================================================ */
.meta-tag {
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--th-text-muted);
}

.meta-dot {
  color: var(--th-border);
  font-size: 0.75rem;
}

/* ============================================================
   GRID HELPERS
   ============================================================ */
.grid-2 {
  display: grid;
  gap: 2rem;
}

.grid-3 {
  display: grid;
  gap: 2.5rem;
}

.grid-4 {
  display: grid;
  gap: 1.5rem;
}

.grid-12 {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
  .grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .grid-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .grid-12 {
    grid-template-columns: repeat(12, 1fr);
  }
  .col-span-2  { grid-column: span 2; }
  .col-span-3  { grid-column: span 3; }
  .col-span-7  { grid-column: span 7; }
  .col-span-9  { grid-column: span 9; }
  .col-span-10 { grid-column: span 10; }
  .col-span-12 { grid-column: span 12; }
}

/* About / hero photo+bio: fixed small photo column + remaining space for bio */
@media (min-width: 768px) {
  .grid-3.bio-grid {
    grid-template-columns: 100px 1fr;
  }
}

/* ============================================================
   ASPECT RATIOS
   ============================================================ */
.ratio-4-5 {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  background-color: var(--th-border);
}

.ratio-3-4 {
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  background-color: var(--th-border);
}

.ratio-2-3 {
  aspect-ratio: 2 / 3;
  position: relative;
  overflow: hidden;
  background-color: var(--th-border);
}

.ratio-16-9 {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background-color: var(--th-border);
}

.ratio-4-5 img,
.ratio-3-4 img,
.ratio-2-3 img,
.ratio-16-9 img,
.ratio-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   COUNT BADGE
   ============================================================ */
.count-badge {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--th-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--th-text-muted);
}

/* ============================================================
   LINKS & BUTTONS
   ============================================================ */
.text-link {
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--th-text-muted);
  border-bottom: 1px solid var(--th-border);
  padding-bottom: 1px;
  transition: color 200ms, border-color 200ms;
}

.text-link:hover {
  color: var(--th-text);
  border-bottom-color: var(--th-text);
}

.text-link-sm {
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--th-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 200ms, opacity 200ms;
}

.text-link-sm:hover {
  opacity: 0.7;
}

.btn-text {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--th-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 200ms;
}

.btn-text:hover {
  opacity: 0.65;
}

.btn-text-secondary {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--th-text-muted);
  border-bottom: 1px solid var(--th-border);
  padding-bottom: 2px;
  transition: color 200ms, border-color 200ms;
}
.btn-text-secondary:hover {
  color: var(--th-text);
  border-color: currentColor;
}

.btn-solid {
  display: inline-block;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--th-bg);
  background: var(--th-accent);
  padding: 0.55rem 1.1rem;
  border-radius: 3px;
  transition: opacity 200ms;
  text-decoration: none;
}
.btn-solid:hover {
  opacity: 0.75;
}

.btn-outline {
  display: inline-block;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--th-accent);
  background: transparent;
  border: 1px solid var(--th-accent);
  padding: 0.55rem 1.1rem;
  border-radius: 3px;
  transition: opacity 200ms;
  text-decoration: none;
}
.btn-outline:hover {
  opacity: 0.65;
}


/* ============================================================
   PUBLICATION TYPE FILTER
   ============================================================ */
.pub-type-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}
.pub-filter-btn {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border: 1px solid var(--th-border);
  border-radius: 2rem;
  background: transparent;
  color: var(--th-text-muted);
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
}
.pub-filter-btn:hover {
  border-color: var(--th-text-muted);
  color: var(--th-text);
}
.pub-filter-btn.active {
  background: var(--th-teal);
  border-color: var(--th-teal);
  color: #fff;
}

/* ============================================================
   PUBLICATION DOWNLOAD FILTER
   ============================================================ */
.pub-filters-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  position: sticky;
  top: 5rem;
  z-index: 10;
  background: var(--th-bg);
  padding: 0.75rem 0 0.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--th-border);
}
.pub-filters-wrap .pub-type-filter {
  margin-bottom: 0;
  flex: 1 1 auto;
}
.pub-download-filter {
  flex-shrink: 0;
}
.pub-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.45rem 1.1rem;
  border: 1.5px solid var(--th-teal);
  border-radius: 2rem;
  background: var(--th-teal);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(30, 95, 110, 0.18);
  transition: background 150ms, color 150ms, border-color 150ms, box-shadow 150ms, transform 100ms;
}
.pub-download-btn::before {
  content: '\2193';
  font-size: 0.8em;
  line-height: 1;
}
.pub-download-btn:hover {
  background: #174e5b;
  border-color: #174e5b;
  box-shadow: 0 3px 12px rgba(30, 95, 110, 0.28);
  transform: translateY(-1px);
}
.pub-download-btn.active {
  background: #fff;
  border-color: var(--th-teal);
  color: var(--th-teal);
  box-shadow: inset 0 0 0 1px var(--th-teal), 0 2px 8px rgba(30, 95, 110, 0.12);
}
.pub-download-btn.active::before {
  content: '\2713';
}
.pub-download-btn.active:hover {
  background: #f0f8fa;
  transform: translateY(-1px);
}
.pub-download-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  background: var(--th-teal);
  border-radius: 2rem;
  padding: 0.25rem 0.7rem;
  box-shadow: 0 1px 4px rgba(30, 95, 110, 0.2);
}


/* ============================================================
   BADGE UTILITY — shared base for all inline entry badges
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.25rem 0.7rem;
  border-radius: 2rem;
  line-height: 1;
}

.badge--outline {
  border: 1px solid var(--th-border);
  color: var(--th-text-muted);
}

.badge--featured {
  border: 1px solid var(--th-border);
  color: var(--th-text-muted);
}

/* ============================================================
   TRANSITIONS
   ============================================================ */
.transition-colors {
  transition: color 200ms, border-color 200ms, background-color 200ms;
}

/* ============================================================
   LINE HEIGHT UTILITIES
   ============================================================ */
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }

/* ============================================================
   RICH TEXT
   ============================================================ */
.rich-text {
  font-family: var(--th-font-reading);
  color: var(--th-text);
  line-height: 1.88;
}

.rich-text p {
  margin-bottom: 1.1rem;
  font-size: 1rem;
  text-align: inherit;
}

/* Preserve explicit alignment set in the editor (Gutenberg class or inline style) */
.rich-text .has-text-align-justify,
.rich-text p.has-text-align-justify {
  text-align: justify;
  text-justify: inter-word;
}

.rich-text ul,
.rich-text ol {
  margin: 0 0 1.1rem 1.5rem;
  font-size: 1rem;
}

.rich-text li {
  margin-bottom: 0.35rem;
}

.rich-text strong {
  font-weight: 700;
}

.rich-text em {
  font-style: italic;
}

.rich-text h2 {
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.rich-text h3 {
  font-size: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.rich-text a {
  color: var(--th-accent);
  border-bottom: 1px solid var(--th-border);
  transition: border-color 200ms;
}

.rich-text a:hover {
  border-bottom-color: var(--th-accent);
}

.rich-text img {
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
}

/* WordPress image alignment — scoped + bare so alignment works even if
   wp-block-library loads late (first-paint race condition) */
.alignleft,
.rich-text .alignleft,
.rich-text img.alignleft {
  float: left;
  margin: 0.5rem 1.75rem 1rem 0;
}
.alignright,
.rich-text .alignright,
.rich-text img.alignright {
  float: right;
  margin: 0.5rem 0 1rem 1.75rem;
}
/* Classic editor: aligncenter on img or block div directly */
.rich-text .aligncenter,
.rich-text img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Gutenberg: aligncenter lives on the figure — shrink-wrap it to image width then centre */
.wp-block-image.aligncenter,
.rich-text figure.aligncenter {
  display: table;
  margin: 1.5rem auto;
  max-width: 100%;
}
.rich-text .alignnone {
  margin: 1.5rem 0;
}

/* Captions (classic editor .wp-caption-text, Gutenberg figcaption / .wp-element-caption) */
.rich-text .wp-caption-text,
.rich-text figcaption,
.rich-text .wp-element-caption {
  display: block;
  clear: both;
  font-size: 0.8125rem;
  color: var(--th-text-muted);
  text-align: center;
  margin-top: 0.4rem;
  font-style: italic;
  line-height: 1.5;
}

/* Figure */
.rich-text figure {
  margin: 1.5rem 0;
  max-width: 100%;
}
.rich-text figure img {
  margin: 0;
}

/* Classic editor caption wrapper */
.rich-text .wp-caption {
  max-width: 100%;
}

/* Clear floats after rich-text block */
.rich-text::after {
  content: '';
  display: table;
  clear: both;
}

.rich-text-sm {
  color: var(--th-text);
  line-height: 1.8;
  font-size: 0.8125rem;
}

.rich-text-sm p {
  margin-bottom: 0.4rem;
}

.rich-text-sm ul,
.rich-text-sm ol {
  margin: 0 0 1rem 1.5rem;
}

.rich-text-sm li {
  margin-bottom: 0.3rem;
}

.rich-text-sm strong { font-weight: 600; }
.rich-text-sm em { font-style: italic; }

/* ============================================================
   EXPANDABLE CONTENT
   ============================================================ */
.expandable-wrap {
  /* no position:relative needed — fade is now inside the body */
}

.expandable-body {
  position: relative; /* fade is absolutely positioned inside here */
}

.expandable-body.collapsed {
  overflow: hidden;
  /* max-height set dynamically by JS based on line-height × lines */
}

/* Gradient fade — sits inside .expandable-body so it only overlays the text,
   never the "Read more" button which lives outside the body */
.expandable-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3.5rem;
  background: linear-gradient(to bottom, transparent, var(--th-bg));
  display: none;
  pointer-events: none;
}

/* "Read more" — sits below the collapsed content, outside the fade */
.expandable-toggle {
  display: inline-block;
  margin-top: 0.625rem;
  font-family: var(--th-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--th-teal);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 1px;
  cursor: pointer;
  transition: border-color 200ms;
}
.expandable-toggle:hover {
  border-bottom-color: var(--th-teal);
}

/* "Read less" sits below the expanded content */
.expandable-less {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--th-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--th-teal);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 1px;
  cursor: pointer;
  transition: border-color 200ms;
}
.expandable-less:hover {
  border-bottom-color: var(--th-teal);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-h1 {
  font-family: var(--th-font-heading);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 400;
  font-style: italic;
  color: var(--th-heading);
  line-height: 1.15;
  margin-bottom: 0.75rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--th-accent);
  margin-left: -1.25rem;
}

.hero-subtitle {
  margin-bottom: 0.75rem;
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--th-accent);
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.hero-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--th-header-bg);
  margin-bottom: 0.6rem;
  transition: color 300ms;
}

.research-interests {
  margin-top: 0.75rem;
}

.research-interests-label {
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--th-text-muted);
  margin-bottom: 0.75rem;
}

.research-interests-text {
  font-size: 0.875rem;
  color: var(--th-text-muted);
  line-height: 1.625;
}

.hero-links {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* ============================================================
   PUBLICATION ENTRIES
   ============================================================ */
.pub-book {
  padding: var(--entry-pad) 0;
  border-bottom: 1px solid var(--th-border);
}

.pub-book:last-child {
  border-bottom: none;
}

.pub-article {
  padding: var(--entry-pad) 0;
  border-bottom: 1px solid var(--th-border);
}

.pub-article:last-child {
  border-bottom: none;
}

.pub-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  background-color: var(--th-border);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.pub-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pub-cover-placeholder {
  aspect-ratio: 2 / 3;
  background-color: var(--th-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.italic-placeholder {
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--th-text-muted);
  transform: rotate(-90deg);
  white-space: nowrap;
  font-style: italic;
}

.pub-type-label {
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--th-text-muted);
  margin-bottom: 0.5rem;
}

.pub-title-book {
  font-family: var(--th-font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--th-text);
  line-height: 1.375;
  margin-bottom: 0.5rem;
}

.pub-title-article {
  font-family: var(--th-font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--th-text);
  line-height: 1.375;
  margin-bottom: 0.5rem;
}

.pub-title-link {
  color: inherit;
  text-decoration: none;
}
.pub-title-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fp-title-link {
  color: inherit;
  text-decoration: none;
  display: block;
}
.fp-title-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pub-single-title {
  font-family: var(--th-font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--th-text);
  line-height: 1.3;
  margin-bottom: 1rem;
}

.pub-single-book-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 0;
}
.pub-single-book-cover {
  aspect-ratio: 3/4;
  background: var(--th-border);
  border-radius: 2px;
  box-shadow: 4px 8px 28px rgba(0,0,0,0.13);
  overflow: hidden;
}
.pub-single-book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 600px) {
  .pub-single-book-grid {
    grid-template-columns: 110px 1fr;
    gap: 1.25rem;
  }
  .pub-single-title { font-size: 1.25rem; }
}

.pub-permalink-icon {
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.75em;
  font-family: var(--th-font-body);
  font-weight: 500;
  color: var(--th-accent);
  opacity: 0;
  text-decoration: none;
  transition: opacity 150ms;
  vertical-align: middle;
  line-height: 1;
}

.pub-book:hover .pub-permalink-icon,
.pub-article:hover .pub-permalink-icon {
  opacity: 1;
}

.pub-authors {
  font-size: 0.9375rem;
  color: var(--th-text-muted);
  margin-bottom: 0.75rem;
}

.pub-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.25rem;
}

.pub-meta span {
  font-size: 0.75rem;
  color: var(--th-text-muted);
}

/* ============================================================
   TALK ENTRIES
   ============================================================ */
.talk-entry {
  padding: var(--entry-pad) 0;
  border-bottom: 1px solid var(--th-border);
}

.talk-entry:last-child {
  border-bottom: none;
}

.talk-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-top: 1.5rem;
  background: #000;
}

.talk-video-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.talk-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-top: 1.5rem;
  cursor: pointer;
}

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

.play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  transition: background 200ms;
}

.play-overlay:hover {
  background: rgba(0,0,0,0.5);
}

.play-btn {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   CONFERENCE ENTRIES
   ============================================================ */
.conf-entry {
  padding: var(--entry-pad) 0;
  border-bottom: 1px solid var(--th-border);
}

.conf-entry:last-child {
  border-bottom: none;
}

/* ============================================================
   TALK / CONFERENCE — cover image (no video)
   ============================================================ */
.talk-cover-img {
  margin-top: 1.25rem;
  width: 100%;
  max-width: 40rem;
}
.talk-cover-img img {
  width: 100%;
  display: block;
  border-radius: 2px;
}

/* ============================================================
   PHOTO ROW (2-3 images, static grid)
   ============================================================ */
.photo-row {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.photo-row-1 { grid-template-columns: 1fr; max-width: 40rem; }
.photo-row-2 { grid-template-columns: repeat(2, 1fr); }
.photo-row-3 { grid-template-columns: repeat(3, 1fr); }
.photo-row img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

/* ============================================================
   PHOTO CAROUSEL (4+ images)
   ============================================================ */
.photo-carousel {
  position: relative;
  margin-top: 1.25rem;
  overflow: hidden;
  border-radius: 2px;
}
.photo-carousel-track {
  display: flex;
  transition: transform 350ms ease;
  will-change: transform;
}
.photo-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
}
.photo-carousel-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.92);
  border: none;
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.22);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--th-text);
  transition: background 150ms;
  z-index: 2;
}
.carousel-btn:hover { background: rgba(255,255,255,1); }
.carousel-btn-prev { left: 0.6rem; }
.carousel-btn-next { right: 0.6rem; }
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 0 0;
}
.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--th-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 150ms;
}
.carousel-dot.active { background: var(--th-teal); }

/* ============================================================
   MEDIA FILTER PILLS
   ============================================================ */
.media-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  position: sticky;
  top: 5rem;
  z-index: 10;
  background: var(--th-bg);
  padding: 0.75rem 0 0.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--th-border);
}

.media-filter-pill {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-family: var(--th-font-body, sans-serif);
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  text-decoration: none;
  transition: background 150ms, color 150ms, border-color 150ms;
  /* default fallback — overridden by category modifiers below */
  border: 1px solid var(--th-border);
  color: var(--th-text-muted);
  background: transparent;
}

/* Per-category colour tokens */
.media-filter-pill--all       { --pill: var(--th-teal); }
.media-filter-pill--blog      { --pill: #4a6070; }
.media-filter-pill--news      { --pill: #1e5f6e; }
.media-filter-pill--media     { --pill: #5a7a8a; }
.media-filter-pill--interview { --pill: #7a6050; }
.media-filter-pill--opinion   { --pill: #6a7a5a; }
.media-filter-pill--talks     { --pill: #5a5a7a; }

/* Inactive: outline with category colour */
[class*="media-filter-pill--"] {
  border: 1px solid var(--pill);
  color: var(--pill);
  background: transparent;
}

/* Active & hover: solid fill */
[class*="media-filter-pill--"].active,
[class*="media-filter-pill--"]:hover {
  background: var(--pill);
  color: #fff;
  border-color: var(--pill);
}

/* ============================================================
   MEDIA & BLOG PAGE
   ============================================================ */

/* Page header */
.media-page-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
}

.media-page-intro {
  font-size: 0.9rem;
  color: var(--th-text-muted);
  max-width: 640px;
  line-height: 1.7;
  margin-top: 0.5rem;
}

/* Category badges */
.media-cat-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-family: var(--th-font-body, sans-serif);
  font-weight: 500;
  color: #fff;
  background: var(--th-teal);
  padding: 0.25rem 0.7rem;
  border-radius: 2rem;
  margin-bottom: 0.6rem;
}

.media-cat-blog      { background: #4a6070; }
.media-cat-news      { background: var(--th-teal); }
.media-cat-media     { background: #5a7a8a; }
.media-cat-interview { background: #7a6050; }
.media-cat-opinion   { background: #6a7a5a; }
.media-cat-talk      { background: #5a5a7a; }

/* "Latest" tag on featured post */
.media-latest-tag {
  display: inline-block;
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-family: var(--th-font-body, sans-serif);
  color: var(--th-teal);
  margin-bottom: 0.4rem;
}

/* Featured hero post */
.media-featured {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--th-border);
  background: var(--th-card);
  overflow: hidden;
  margin-bottom: 2rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 200ms;
  min-height: 300px;
}

.media-featured:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

@media (min-width: 768px) {
  .media-featured {
    grid-template-columns: 1fr 1.5fr;
  }
  /* Book cover: narrow fixed column so portrait image fills it naturally */
  .media-featured--book {
    grid-template-columns: 220px 1fr;
  }
  /* Landscape: wider column, image at natural proportions — no crop */
  .media-featured--natural {
    grid-template-columns: 42% 1fr;
  }
}

.media-featured--natural {
  min-height: unset;
}
.media-featured--natural .media-featured-image img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: unset;
}

.media-featured--stacked {
  grid-template-columns: 1fr !important;
  min-height: unset;
  max-width: 100%;
}
.media-featured--stacked .media-featured-image {
  aspect-ratio: 3 / 2;
  height: auto;
}
@media (min-width: 600px) {
  .media-featured--stacked { max-width: calc(50% - 1rem); }
}
@media (min-width: 960px) {
  .media-featured--stacked { max-width: calc(33.333% - 1.334rem); }
}

.media-featured--no-image {
  grid-template-columns: 1fr !important;
  border-left: 4px solid var(--th-teal);
}

.media-featured--no-image .media-featured-image {
  display: none;
}

.media-featured-image {
  position: relative;
  overflow: hidden;
  background: var(--th-border);
}

.media-featured-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms;
}

.media-featured:hover .media-featured-image img {
  transform: scale(1.03);
}

.media-featured-no-image {
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: var(--th-border);
}

.media-featured-body {
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.media-featured-body h2 {
  font-size: var(--text-title);
  font-weight: normal;
  line-height: 1.35;
  color: var(--th-heading);
}

.media-featured-body > p {
  font-size: 0.875rem;
  color: var(--th-text-muted);
  line-height: 1.7;
}

.media-read-more {
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-family: var(--th-font-body, sans-serif);
  color: var(--th-teal);
  font-weight: 600;
  margin-top: 0.5rem;
}

/* "More Posts" divider label */
.media-more-label {
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-family: var(--th-font-body, sans-serif);
  color: var(--th-text-muted);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.media-more-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--th-border);
}

/* Card grid */
.media-grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 3rem;
  grid-auto-flow: dense;
}

@media (min-width: 600px) {
  .media-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  .media-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* Individual card */
.media-card {
  display: flex;
  flex-direction: column;
  background: var(--th-card);
  border: 1px solid var(--th-border);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 200ms;
}

.media-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

.media-card-cover {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  position: relative;
  background: var(--th-border);
  flex-shrink: 0;
}

.media-card--no-image {
  border-left: 3px solid var(--th-teal);
}

.media-card--no-image .media-card-cover {
  display: none;
}

.media-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms;
}

/* Portrait card — stacked on mobile, side-by-side on tablet+, wider on desktop */

/* Mobile (<600px): stacked, portrait-proportioned image above text */
.media-card--portrait .media-card-cover {
  aspect-ratio: 3 / 4;
  min-height: unset;
}

/* Tablet (600px+): side-by-side full-width row */
@media (min-width: 600px) {
  .media-card--portrait {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 38% 1fr;
    grid-template-rows: 1fr auto;
  }

  .media-card--portrait .media-card-cover {
    grid-column: 1;
    grid-row: 1 / 3;
    aspect-ratio: unset;
    min-height: 280px;
    height: unset;
  }

  .media-card--portrait .media-card-body  { grid-column: 2; }
  .media-card--portrait .media-card-footer { grid-column: 2; }
}

.media-card:hover .media-card-cover img {
  transform: scale(1.05);
}

.media-card-body {
  padding: 1.25rem 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.media-card-body h3 {
  font-family: var(--th-font-heading);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--th-text);
  line-height: 1.4;
  transition: color 200ms;
}

.media-card:hover .media-card-body h3 {
  color: var(--th-text-muted);
}

.media-card-excerpt {
  font-size: var(--text-sm);
  color: var(--th-text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.7;
}

.media-card-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--th-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.media-card-meta {
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--th-text-muted);
  font-family: var(--th-font-body, sans-serif);
}

/* Pagination */
.media-pagination {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}

.media-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.5rem;
  border: 1px solid var(--th-border);
  font-size: 0.75rem;
  color: var(--th-text-muted);
  text-decoration: none;
  font-family: var(--th-font-body, sans-serif);
  transition: background 150ms, color 150ms;
}

.media-pagination .page-numbers.current,
.media-pagination .page-numbers:hover {
  background: var(--th-header-bg);
  color: #fff;
  border-color: var(--th-header-bg);
}

/* ============================================================
   YEAR LABEL — left-rail layout
   ============================================================ */
.year-group {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 2.5rem;
  margin-bottom: 2rem;
}

.year-label {
  font-family: var(--th-font-heading);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  color: var(--th-border);
  margin: 0;
  padding-top: 0.25rem;
  line-height: 1;
  text-align: right;
  align-self: start;
  position: sticky;
  top: 1rem;
}

.year-pubs {
  display: flex;
  flex-direction: column;
}

.year-pubs > * + * {
  border-top: 1px solid var(--th-border);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid {
  display: grid;
  gap: 4rem;
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-form-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  border-radius: 0;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}
.contact-form-notice.success {
  background: #4aabb8;
  color: #fff;
}
.contact-form-notice.error {
  background: #c0392b;
  color: #fff;
}
.contact-form-notice-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0.8;
}
.contact-form-notice-close:hover {
  opacity: 1;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-field label {
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--th-text-muted);
}
.form-field input,
.form-field textarea {
  font-family: var(--th-font-body);
  font-size: 0.9375rem;
  color: var(--th-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--th-border);
  padding: 0.5rem 0;
  width: 100%;
  outline: none;
  transition: border-color 200ms;
  border-radius: 0;
  -webkit-appearance: none;
}
.form-field input:focus,
.form-field textarea:focus {
  border-bottom-color: var(--th-teal);
}
.form-field textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.6;
}

/* Honeypot — visually hidden but not display:none so bots render it */
.drb-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.contact-form-submit {
  margin-top: 0.5rem;
}

.contact-label {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--th-text-muted);
  margin-bottom: 0.75rem;
}

.contact-value {
  font-size: 1rem;
  color: var(--th-text);
}

.contact-inline-link {
  color: var(--th-text);
  border-bottom: 1px solid var(--th-border);
  transition: border-color 200ms, color 200ms;
}
.contact-inline-link:hover {
  color: var(--th-teal);
  border-color: var(--th-teal);
}

.social-links-list > * {
  border-bottom: 1px solid var(--th-border);
}

.social-links-list > *:first-child {
  border-top: 1px solid var(--th-border);
}

.social-link-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 0;
  color: var(--th-text);
  transition: color 200ms;
}
.social-link-row:hover {
  color: var(--th-teal);
}
.social-link-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--th-text-muted);
}
.social-link-row:hover .social-link-icon {
  color: var(--th-teal);
}
.social-link-label {
  flex: 1;
}
.social-link-arrow {
  font-size: 0.875rem;
  color: var(--th-text-muted);
  flex-shrink: 0;
}

/* ============================================================
   PAGE CONTENT
   ============================================================ */
.page-content {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1.75rem 1.5rem 2.5rem;
}

/* ============================================================
   SINGLE POST
   ============================================================ */
.single-post-wrap {
  max-width: 58rem;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 3rem;
}

/* ============================================================
   FEATURED PUB CARD (homepage)
   ============================================================ */
.featured-pub-card {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .featured-pub-card {
    grid-template-columns: repeat(4, 1fr);
  }
}

.featured-pub-img {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--th-border);
}

.featured-pub-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   EMBED / IFRAME
   ============================================================ */
.wp-embed-responsive iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ============================================================
   404
   ============================================================ */
.not-found-wrap {
  text-align: center;
  padding: 8rem 1.5rem;
}

.not-found-wrap .error-code {
  font-family: var(--th-font-heading);
  font-size: 6rem;
  font-weight: 400;
  color: var(--th-border);
  line-height: 1;
  margin-bottom: 1rem;
}

.not-found-wrap .error-msg {
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--th-text-muted);
  margin-bottom: 2rem;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-photo-col {
  align-self: start;
}

.about-photo-col .ratio-4-5 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* About page: sidebar photo+details + bio content (new layout) */
.bio-grid {
  display: grid;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 768px) {
  .bio-grid {
    grid-template-columns: 220px 1fr;
  }
}
/* On mobile: show bio first, sidebar second */
@media (max-width: 767px) {
  .bio-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .about-sidebar-col { order: 2; }
}

/* Sidebar column: flex stack of photo + CV button + detail sections */
.about-sidebar-col {
  display: flex;
  flex-direction: column;
  align-self: start;
}

/* Override the global align-self:start on about-photo-col when inside the sidebar */
.about-sidebar-col .about-photo-col {
  align-self: auto;
  width: 100%;
}

/* CV button — sits directly below the photo */
.btn-cv {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--th-font-body);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--th-text);
  border: 1px solid var(--th-border);
  padding: 0.625rem 1rem;
  margin-top: 0.75rem;
  transition: border-color 200ms, color 200ms;
}
.btn-cv:hover {
  border-color: var(--th-text);
}

/* Sidebar detail sections (research interests, affiliations, education) */
.sidebar-section {
  margin-top: 1.25rem;
}

.sidebar-section-label {
  font-family: var(--th-font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--th-text-muted);
  margin-bottom: 0.625rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--th-border);
}

.sidebar-interests-text {
  font-family: var(--th-font-body);
  font-size: 0.875rem;
  color: var(--th-text-muted);
  line-height: 1.5;
  margin: 0;
}
.sidebar-interests-text p {
  margin: 0 0 0.15rem;
  font-size: 0.875rem;
  color: var(--th-text-muted);
}
.sidebar-interests-text p:last-child {
  margin-bottom: 0;
}

/* Sidebar item rows (each affiliation / education entry) */
.sidebar-item {
  padding: 0.375rem 0;
}
.sidebar-item:first-child { padding-top: 0; }
.sidebar-item:last-child  { padding-bottom: 0; }

.sidebar-item-primary {
  font-family: var(--th-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--th-text);
  margin: 0 0 0.125rem;
  line-height: 1.35;
}

.sidebar-item-secondary {
  font-family: var(--th-font-body);
  font-size: 0.75rem;
  color: var(--th-text-muted);
  margin: 0 0 0.125rem;
  line-height: 1.35;
}

.sidebar-item-year {
  font-family: var(--th-font-body);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--th-text-muted);
  margin: 0;
}

/* Active badge on current affiliations */
.sidebar-badge {
  display: inline-block;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--th-text-muted);
  border: 1px solid var(--th-border);
  border-radius: 2px;
  padding: 0.1em 0.45em;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Education & Affiliations — Panel A layout */
.edu-aff-section {
  margin-top: 2.5rem;
}

.c-list {
  display: flex;
  flex-direction: column;
}

.c-entry {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--th-border);
  align-items: start;
  transition: border-color 300ms;
}

.c-list .c-entry:first-child {
  border-top: 1px solid var(--th-border);
}

.c-year-col {
  padding-right: 1.25rem;
  flex-shrink: 0;
}

.c-year-big {
  font-family: var(--th-font-heading);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--th-border);
  line-height: 1;
  user-select: none;
  transition: color 300ms;
}

.c-year-range {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--th-border);
  line-height: 1.5;
  user-select: none;
  transition: color 300ms;
}

.c-body {
  border-left: 1px solid var(--th-border);
  padding-left: 1.75rem;
  transition: border-color 300ms;
}

.c-degree {
  font-family: var(--th-font-heading);
  font-size: 1.0625rem;
  font-style: italic;
  font-weight: 400;
  color: var(--th-heading);
  line-height: 1.3;
  margin-bottom: 0.2rem;
}

.c-inst {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--th-text);
  margin-bottom: 0.2rem;
}

.c-role {
  font-size: 0.8125rem;
  color: var(--th-text-muted);
}

.c-desc {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--th-border);
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--th-text);
  transition: border-color 300ms;
}

.c-badge {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--th-header-text);
  background: var(--th-teal);
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  transition: background 300ms, color 300ms;
}

@media (max-width: 500px) {
  .c-entry {
    grid-template-columns: 1fr;
  }
  .c-year-col {
    padding-right: 0;
    padding-bottom: 0.5rem;
  }
  .c-body {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--th-border);
    padding-top: 0.75rem;
  }
}

/* ============================================================
   TALKS / CONFERENCE META ROW
   ============================================================ */
.entry-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.entry-meta-row span {
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--th-text-muted);
}

.entry-title {
  font-family: var(--th-font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--th-text);
  line-height: 1.375;
  margin-bottom: 0.5rem;
}

.entry-subtitle {
  font-size: 0.875rem;
  color: var(--th-text-muted);
  margin-bottom: 0.75rem;
}

.entry-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

/* ============================================================
   BACK LINK
   ============================================================ */
.back-link {
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--th-text-muted);
  margin-bottom: 2rem;
  display: inline-block;
  transition: color 200ms;
}

.back-link:hover {
  color: var(--th-text);
}

/* ============================================================
   UTILITIES
   ============================================================ */
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

.text-muted { color: var(--th-text-muted); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-xxs { font-size: 0.625rem; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.15em; }
.font-medium { font-weight: 500; }

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

/* Homepage sections */
.home-section {
  padding: 2rem 0;
  border-bottom: 1px solid var(--th-border);
  background: var(--th-surface);
  transition: background 300ms, border-color 300ms;
}

/* Hero layout */
.hero-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 3rem;
  align-items: start;
}
.hero-photo {
  aspect-ratio: 4/5;
  border-radius: 2px;
  background: var(--th-border);
  overflow: hidden;
  transition: background 300ms;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-name {
  font-family: var(--th-font-heading);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  color: var(--th-heading);
}
@media (max-width: 600px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .hero-photo {
    width: 90px;
  }
  .hero-name { font-size: 1.875rem; }
}

/* Split row — two sections side by side */
.split-row {
  display: grid;
  gap: 0;
}

.split-row--5050 { grid-template-columns: 1fr 1fr; }
.split-row--6040 { grid-template-columns: 3fr 2fr; }
.split-row--4060 { grid-template-columns: 2fr 3fr; }

@media (max-width: 767px) {
  .split-row { grid-template-columns: 1fr; }
}

.split-col {
  padding: 0 0.75rem 0 0;
}

.split-col + .split-col {
  padding: 0 0 0 0.75rem;
  border-left: 1px solid var(--th-border);
}

@media (max-width: 767px) {
  .split-col,
  .split-col + .split-col {
    padding: 0 0 1.5rem;
    border-left: none;
    border-bottom: 1px solid var(--th-border);
  }
  .split-col:last-child { border-bottom: none; padding-bottom: 0; }
}

/* Spotlight — card layout */
.spotlight-card {
  background: var(--th-card);
  border: 1px solid var(--th-border);
  border-radius: 4px;
  overflow: hidden;
}
.spotlight-card-img {
  width: 100%;
  aspect-ratio: 16 / 7;
  background: var(--th-header-bg);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spotlight-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.spotlight-card-body {
  padding: 1.375rem 1.5rem 1.5rem;
}

/* Spotlight: aside — landscape photo left, text right */
.spotlight-aside-grid {
  display: grid;
  grid-template-columns: min(280px, 42%) 1fr;
  align-items: start;
}
.spotlight-aside-img {
  overflow: hidden;
  background: var(--th-border);
  position: relative;
  align-self: stretch;
}
.spotlight-aside-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .spotlight-aside-grid { grid-template-columns: 1fr; }
  .spotlight-aside-img  { aspect-ratio: 16 / 7; }
}

/* Spotlight: portrait — narrow portrait beside text */
.spotlight-portrait-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.375rem 1.5rem 1.5rem;
}
.spotlight-portrait-img {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--th-border);
  position: relative;
  box-shadow: 2px 4px 16px rgba(0,0,0,0.10);
}
.spotlight-portrait-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .spotlight-portrait-grid { grid-template-columns: 90px 1fr; gap: 1rem; }
}
.spotlight-card--no-img .spotlight-aside-grid,
.spotlight-card--no-img .spotlight-portrait-grid { grid-template-columns: 1fr; }

/* Publication in spotlight: portrait cover + text side by side */
.spotlight-pub-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 600px) {
  .spotlight-pub-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .spotlight-pub-cover {
    width: 110px;
  }
}
.spotlight-pub-cover {
  overflow: hidden;
  box-shadow: 2px 4px 16px rgba(0,0,0,0.12);
}
.spotlight-pub-cover img {
  width: 100%;
  height: auto;
  display: block;
}
.spotlight-badge {
  display: inline-block;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--th-header-text);
  background: var(--th-header-bg);
  padding: 0.25rem 0.6rem;
  border-radius: 0.3rem;
  margin-bottom: 0.75rem;
}
.spotlight-title {
  font-family: var(--th-font-heading);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--th-heading);
  line-height: 1.3;
  margin-bottom: 0.35rem;
}
.spotlight-meta {
  font-size: 0.8125rem;
  color: var(--th-text-muted);
  margin-bottom: 0.875rem;
}
.spotlight-body {
  margin-bottom: 1.25rem;
}

/* Featured pub — single item layout */
.fp-single {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 2.5rem;
  align-items: start;
}
.fp-single-cover {
  aspect-ratio: 3/4;
  background: var(--th-border);
  border-radius: 2px;
  box-shadow: 4px 8px 28px rgba(0,0,0,0.13);
  transform: rotate(-0.75deg);
  overflow: hidden;
  transition: background 300ms;
  flex-shrink: 0;
}
.fp-single-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fp-single-type {
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--th-text-muted);
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.fp-single-title {
  font-family: var(--th-font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--th-heading);
  margin-bottom: 0.5rem;
}
.fp-single-publisher {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--th-text-muted);
  margin-bottom: 0.5rem;
}
.fp-single-meta {
  font-size: 0.8125rem;
  color: var(--th-text-muted);
  margin-bottom: 1.25rem;
}
.fp-single-abstract {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--th-text);
  margin-bottom: 1.25rem;
}
.fp-single-footer {
  margin-top: 2.25rem;
  border-top: 1px solid var(--th-border);
  padding-top: 1.25rem;
}
@media (max-width: 600px) {
  .fp-single {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .fp-single-cover {
    width: 110px;
  }
  .fp-single-title { font-size: 1.25rem; }
}
.fp-single--no-cover { grid-template-columns: 1fr; }

/* Featured pub — list layout (2+ items) */
.fp-list {
  display: flex;
  flex-direction: column;
}

.fp-item {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--th-border);
}

.fp-item:last-child {
  border-bottom: 1px solid var(--th-border);
}

@media (min-width: 768px) {
  .fp-item {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
  }
  .fp-item-details {
    grid-column: span 3;
  }
  .fp-item--no-cover .fp-item-details {
    grid-column: 1 / -1;
  }
}

.fp-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--th-surface);
  box-shadow: 2px 4px 18px rgba(0,0,0,0.14);
  transform: rotate(-0.5deg);
}

.fp-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fp-type {
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--th-accent);
  margin-bottom: 0.4rem;
  font-weight: 500;
}

.fp-title {
  font-family: var(--th-font-heading);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--th-text);
  line-height: 1.35;
  margin-bottom: 0.4rem;
}

.fp-publisher {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--th-text-muted);
  margin-bottom: 0.75rem;
}

/* Recent talks on homepage */
.rt-list {
  display: flex;
  flex-direction: column;
}

.rt-item {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--th-border);
}

.rt-list .rt-item:first-child {
  border-top: 1px solid var(--th-border);
}

@media (min-width: 768px) {
  .rt-item {
    grid-template-columns: 5rem 1fr;
    align-items: start;
  }
  .rt-content {
    border-left: 2px solid var(--th-teal);
    padding-left: 1rem;
    transition: border-color 300ms;
  }
}

.rt-date {
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--th-text-muted);
}

.rt-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--th-text);
  margin-bottom: 0.25rem;
}

.rt-event {
  font-size: 0.75rem;
  color: var(--th-text-muted);
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 767px) {
  .grid-12 .col-span-2,
  .grid-12 .col-span-3,
  .grid-12 .col-span-7,
  .grid-12 .col-span-9,
  .grid-12 .col-span-10,
  .grid-12 .col-span-12 {
    grid-column: span 1;
  }

  /* Collapse bio grid to single column on mobile */
  .grid-3.bio-grid {
    grid-template-columns: 1fr;
  }
  .grid-3.bio-grid [style*="grid-column:span 2"],
  .grid-3.bio-grid [style*="grid-column: span 2"] {
    grid-column: span 1;
  }

  /* Year group: stack vertically on small screens */
  .year-group {
    grid-template-columns: 1fr;
    gap: 0.25rem 0;
  }
  .year-label {
    position: static;
    text-align: left;
    font-size: 1rem;
    padding-top: 0;
    padding-bottom: 0.25rem;
    color: var(--th-text-muted);
  }

  .pub-book .grid-12 {
    grid-template-columns: 1fr;
  }

  .pub-book .pub-cover-col {
    max-width: 200px;
  }

  .hero-h1 {
    font-size: 1.75rem;
  }
}

@media (max-width: 640px) {
  .hero-section {
    padding: 3rem 0;
  }

  .site-container,
  .container-narrow,
  .container-xnarrow,
  .page-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* 3-photo grid → 2 columns on small screens */
  .photo-row-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer nav: reduce gap so 6 links fit better */
  .footer-nav .sep {
    margin: 0 0.35rem;
  }

  /* Contact grid: single column */
  .contact-grid {
    gap: 2.5rem;
  }

  /* Pub type filter pills wrap neatly */
  .pub-type-filter {
    gap: 0.35rem;
  }
}

/* ============================================================
   SPLIT-COL COMPACT OVERRIDES
   ============================================================ */
.split-col .bio-grid { gap: 1rem; margin-bottom: 1.25rem; }
.split-col .bio-grid h1 { font-size: 1.5rem !important; }
.split-col .bio-grid .rich-text { font-size: 0.85rem; }
.split-col .research-interests { margin-top: 0.75rem; }
.split-col .hero-links { margin-top: 0.75rem; }
.split-col .spotlight-block { grid-template-columns: 1fr; gap: 1rem; }
.split-col .spotlight-title { font-size: 1.2rem; margin-bottom: 0.35rem; }
.split-col .spotlight-cover { display: flex; gap: 1rem; align-items: flex-end; margin-top: 0.25rem; }
.split-col .spotlight-cover img { max-height: 150px; width: auto; max-width: 110px; object-fit: contain; }
.split-col .fp-list .fp-item { grid-template-columns: 1fr; }
.split-col .fp-list .fp-cover { display: none; }
.split-col .fp-title { font-size: 0.9rem; }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  /* Hide navigation, decorative chrome and interactive elements */
  .site-header,
  .site-footer,
  .site-global-banner,
  .slogan-bar,
  .skip-to-content,
  .btn-cv,
  .mobile-nav,
  .mobile-nav-toggle,
  .hero-links,
  .fp-single-footer,
  #wpadminbar { display: none !important; }

  body {
    color: #000 !important;
    background: #fff !important;
    font-size: 11pt;
    line-height: 1.5;
  }

  .site-container,
  .page-content {
    max-width: 100%;
    padding: 0;
  }

  a { color: #000; text-decoration: none; }

  /* Show the URL after external links */
  a[href^="http"]::after,
  a[href^="https"]::after {
    content: ' (' attr(href) ')';
    font-size: 0.75em;
    color: #555;
  }

  /* Keep publication/talk entries together across page breaks */
  .pub-item,
  .fp-item,
  .fp-single,
  .rt-item,
  .year-group { page-break-inside: avoid; }

  /* Section headings start on same page as first item */
  .year-label,
  .section-eyebrow { page-break-after: avoid; }

  /* Remove card borders and shadows for cleaner print */
  .spotlight-card,
  .fp-item,
  .rt-item { border: none; box-shadow: none; }

  /* Bio grid: single column on print */
  .bio-grid { display: block; }
  .about-sidebar-col { margin-top: 1.5rem; }
}