/* ==========================================================================
   Sowmya theme — main stylesheet
   Ported from the client-approved prototype. Design tokens live in :root;
   never hardcode colors or fonts below — use the variables.
   ========================================================================== */

:root {
  --ivory: #fffdf7;
  --ivory-deep: #f7f1e3;
  --paper: #fbf8ef;
  --sage: #88a878;
  --sage-dark: #3e5e3a;
  --gold: #e8c76b;
  --ink: #2b2b2b;
  --muted: #68645d;
  --footer: #9faf6e;
  --line: rgba(62, 94, 58, 0.18);
  --shadow: 0 22px 60px rgba(62, 94, 58, 0.13);

  /* Layout (responsive-hardening pass): section CONTENT cap for 2K/4K —
     backgrounds stay full-bleed — and sticky-header height for svh math. */
  --content-max: 1560px;
  --header-h: 76px;

  /* Homepage portfolio-card media window — a ratio, not a fixed height, so
     the mostly square/portrait card photos show generously and the crop is
     identical at every breakpoint. Scoped to .portfolio-grid; the blog grid
     keeps its fixed thumb heights. */
  --card-media-ratio: 4 / 3;

  --font-script: 'Allura', cursive;
  --font-display: 'Cormorant Garamond', serif;
  --font-ui: 'Quicksand', sans-serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type scale (a11y legibility floor — rem so browser text settings
     scale the site; html font-size is never changed). Small-tier text only
     ever references these tokens; display faces keep their own clamps. */
  --text-xs: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);        /* 15→16: kickers, tiny labels — the site-wide floor */
  --text-sm: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);      /* 16→17: meta, dates, venues, captions, nav, buttons */
  --text-base: clamp(1.125rem, 1.05rem + 0.35vw, 1.1875rem);/* 18→19: body, card text, excerpts */
  --text-lg: clamp(1.1875rem, 1.1rem + 0.45vw, 1.3125rem);  /* 19→21: intros, lead paragraphs, FAQ answers */
  --text-h3: clamp(1.5rem, 1.45rem + 0.25vw, 1.625rem);     /* 24→26: fixed-size H3-tier names (FAQ, honors, themes) */

  /* Motion — breath-paced reveal system (see the Motion section + assets/js/main.js) */
  --ease-breathe: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-reveal: 800ms;
  --dur-slow: 1100ms;
  --dur-micro: 250ms;
  --rise: 16px;
  --drift: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  /* a11y base lift: 18px floor, easing to 19px on wide viewports */
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.65;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--sage-dark);
  color: var(--ivory);
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Visually hidden but exposed to assistive tech (WP-standard class name).
   Used by the social icon links to name each brand alongside its glyph. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 18px clamp(24px, 5vw, 72px);
  background: rgba(255, 253, 247, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
/* Inner wrapper caps header content on 2K/4K; band stays full-bleed */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: var(--content-max);
  margin-inline: auto;
}
.brand {
  font-family: var(--font-script);
  font-size: clamp(1.9375rem, 3.2vw, 3rem);
  line-height: 0.85;
  color: #2f4c84;
  white-space: nowrap;
}
.nav-links .menu {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: #3f4640;
}
.nav-links a { transition: color .2s ease; }
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--sage-dark); }
/* Last menu item styled as the Contact pill (prototype .nav-contact) */
.nav-links .menu > li:last-child > a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--sage-dark);
  color: var(--ivory);
}

/* ------------------------------------------------------------ Hero */

.hero-section {
  min-height: calc(100vh - 76px); /* fallback for browsers without svh */
  min-height: calc(100svh - var(--header-h, 76px)); /* stable vs. mobile browser chrome */
  display: grid;
  align-items: center;
  padding: clamp(52px, 8vw, 108px) clamp(24px, 6vw, 96px);
  background:
    radial-gradient(circle at 16% 22%, rgba(232, 199, 107, .23), transparent 26%),
    linear-gradient(125deg, #fffdf7 0%, #faf6e9 100%);
  overflow: hidden;
}
/* Inner wrapper caps hero content on 2K/4K; gradient band stays full-bleed */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(340px, 1.08fr);
  align-items: center;
  gap: clamp(32px, 6vw, 92px);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}
.hero-copy { max-width: 680px; }
.eyebrow,
.section-kicker {
  margin: 0 0 14px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  /* .14em (was .18em pre-a11y): at the --text-xs floor the long hero eyebrow
     keeps its approved single line at 1440, and the kicker tier now matches
     the rest of the .14em label family */
  letter-spacing: 0.14em;
  line-height: 1.4; /* wrapped kickers stay one composed unit */
  text-wrap: balance; /* a kicker that must wrap never orphans one word */
  text-transform: uppercase;
  color: var(--sage-dark);
}
.hero-copy h1 {
  margin: 0;
  font-family: var(--font-script);
  font-size: clamp(4.875rem, 9vw, 9.75rem);
  line-height: 0.78;
  color: var(--sage-dark);
  font-weight: 400;
}
.identity-line {
  max-width: 610px;
  margin: 34px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.4375rem, 2.7vw, 2.5rem);
  line-height: 1.23;
  color: #3a3a32;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.primary-link,
.secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px; /* proportions rebalanced for the --text-sm pill label */
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-sm);
  text-align: center;
  /* Long labels that can't hold one line at 320px break on balanced phrase
     boundaries instead of leaving a greedy orphan line */
  text-wrap: balance;
  line-height: 1.35;
}
.primary-link {
  background: var(--sage-dark);
  color: var(--ivory);
  box-shadow: 0 14px 28px rgba(62, 94, 58, .16);
}
.secondary-link {
  border: 1px solid var(--line);
  color: var(--sage-dark);
  background: rgba(255, 255, 255, .5);
}
.primary-link.small { min-height: 44px; margin-top: 10px; }
.hero-image-wrap {
  position: relative;
  border-radius: 42px 42px 8px 42px;
  padding: 14px;
  background: rgba(255, 255, 255, .58);
  box-shadow: var(--shadow);
}
.hero-image-wrap::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -42px;
  top: -42px;
  border-radius: 50%;
  background: rgba(232, 199, 107, .36);
  z-index: -1;
}
.hero-image-wrap::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  left: -34px;
  bottom: -34px;
  border-radius: 50%;
  background: rgba(136, 168, 120, .28);
  z-index: -1;
}
.hero-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2; /* matches home-hero.jpg (1600x1066, cropped 3:2) so nothing is cropped */
  object-fit: cover;
  border-radius: 32px 32px 4px 32px;
}

/* ------------------------------------------------------------ Sections */

.section-pad { padding: clamp(70px, 9vw, 130px) clamp(24px, 6vw, 96px); }
.rangoli {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  color: var(--gold);
  border: 1px solid rgba(232, 199, 107, .45);
  border-radius: 50%;
}
.intro-section {
  max-width: 1020px;
  margin: 0 auto;
  text-align: center;
}
.intro-section h2,
.section-heading h2,
.blog-copy h2,
.spotlight-section h2,
.contact-panel h2,
.philosophy-band h2,
.page-hero h1,
.entry-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.04;
  font-weight: 600;
  color: var(--sage-dark);
}
.intro-text {
  max-width: 850px;
  margin: 28px auto 0;
  font-size: var(--text-lg);
  color: var(--muted);
}

/* ------------------------------------------------------------ Portfolio grid */

.portfolio-section { background: var(--paper); }
.section-heading {
  max-width: 780px;
  margin: 0 auto 46px;
  text-align: center;
}
.section-heading p:last-child { color: var(--muted); font-size: var(--text-base); }
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--content-max); /* cap card width on 2K/4K */
  margin-inline: auto;
}
.portfolio-card {
  overflow: hidden;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 16px 38px rgba(62, 94, 58, .08);
  transition: transform .22s ease, box-shadow .22s ease;
}
/* Hover-lift only on devices that actually hover — no sticky states on touch */
@media (hover: hover) {
  .portfolio-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
}
.portfolio-grid .portfolio-card img {
  width: 100%;
  aspect-ratio: var(--card-media-ratio);
  height: auto;
  object-fit: cover;
}
.portfolio-card > div { padding: 24px; }
.portfolio-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.8125rem;
  line-height: 1.05;
  color: var(--sage-dark);
}
.portfolio-card p { margin: 0 0 16px; color: var(--muted); }
.portfolio-card a {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--sage-dark);
  border-bottom: 1px solid var(--gold);
}
.card-date {
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted);
}

/* ------------------------------------------------------------ Blog band (front page) */

.blog-section { background: var(--ivory); }
.blog-card {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 58px);
  border-radius: 36px;
  background: linear-gradient(135deg, rgba(136, 168, 120, .14), rgba(232, 199, 107, .12));
  border: 1px solid var(--line);
}
.blog-copy p:not(.section-kicker) { color: var(--muted); font-size: var(--text-base); }
.blog-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: var(--shadow);
}

/* ------------------------------------------------------------ Spotlight */

.spotlight-section {
  text-align: center;
  background: var(--paper);
}
.spotlight-intro {
  max-width: 720px;
  margin: 20px auto 0;
  color: var(--muted);
  font-size: var(--text-lg);
}
.spotlight-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: clamp(38px, 6vw, 76px);
  align-items: start;
  max-width: 1180px;
  margin: clamp(42px, 6vw, 68px) auto 0;
  text-align: left;
}
.spotlight-story-media {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.spotlight-story-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
.spotlight-story-media:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.spotlight-story-copy { margin-top: 24px; }
.spotlight-story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--muted);
}
.spotlight-story-copy h3 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.08;
}
.spotlight-story-copy h3 a {
  color: var(--sage-dark);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-breathe);
}
.spotlight-story-copy h3 a:hover,
.spotlight-story-copy h3 a:focus-visible { border-bottom-color: var(--gold); }
.spotlight-story-copy > p:last-child {
  max-width: 56ch;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: var(--text-base);
}
.spotlight-honors { padding-top: 4px; }
.spotlight-honors .section-kicker {
  margin-bottom: 18px;
  text-align: left;
}
.spotlight-honor-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.spotlight-honor-list li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.spotlight-honor-year {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.spotlight-honor-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--sage-dark);
}
.spotlight-honor-list small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}
.spotlight-section > .primary-link { margin-top: clamp(34px, 5vw, 52px); }
.logo-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.logo-row img {
  width: 210px;
  max-width: 100%;
  height: 110px;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--ivory);
  padding: 16px;
}

/* ------------------------------------------------------------ Contact */

.contact-section { background: var(--ivory); }
.contact-panel {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(40px, 7vw, 78px);
  border-radius: 38px;
  background: var(--sage-dark);
  color: var(--ivory);
  box-shadow: var(--shadow);
}
.contact-panel .section-kicker { color: var(--gold); }
.contact-panel h2 { color: var(--ivory); margin-bottom: 28px; }
.contact-panel .primary-link { background: var(--ivory); color: var(--sage-dark); }

/* ------------------------------------------------------------ Blog index (home.php) */

.page-hero {
  text-align: center;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 6vw, 96px) clamp(30px, 4vw, 48px);
  background: linear-gradient(125deg, #fffdf7 0%, #faf6e9 100%);
}
.page-hero .section-kicker { margin-bottom: 10px; }
.page-hero h1 { max-width: var(--content-max); margin-inline: auto; } /* no full-bleed title lines at 4K */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
}
.blog-grid .portfolio-card .card-thumb {
  width: 100%;
  height: 220px;
  object-fit: cover;
  /* The migrated posts are dominated by portrait phone photos whose subjects
     end up flush against the top of WP's baked 800×560 center-crop — bias the
     browser's second crop upward (the .focus-top value) so heads survive */
  object-position: 50% 12%;
}
.card-thumb-fallback {
  width: 100%;
  height: 220px;
  background:
    radial-gradient(circle at 20% 25%, rgba(232, 199, 107, .35), transparent 45%),
    linear-gradient(135deg, rgba(136, 168, 120, .35), rgba(62, 94, 58, .25));
}
.pagination {
  margin-top: 42px;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 700;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 6px 12px;
  margin: 0 3px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--sage-dark);
  background: var(--ivory);
}
.pagination .page-numbers.current {
  background: var(--sage-dark);
  color: var(--ivory);
}

/* ------------------------------------------------------------ Single post / page */

.entry-header {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(56px, 7vw, 96px) 24px 8px;
}
.entry-meta {
  margin: 14px 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted);
}
.entry-featured {
  max-width: 980px;
  margin: 34px auto 0;
  padding: 0 24px;
}
.entry-featured img {
  width: 100%;
  max-height: 540px;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.entry-content {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 56px) 24px clamp(70px, 9vw, 110px);
  font-size: var(--text-base);
}
.entry-content h2,
.entry-content h3 {
  font-family: var(--font-display);
  color: var(--sage-dark);
  line-height: 1.1;
  margin: 1.6em 0 .5em;
}
.entry-content h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.entry-content h3 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); } /* floor 23→24px: H3 tier ≥1.5rem */
.entry-content a {
  color: var(--sage-dark);
  border-bottom: 1px solid var(--gold);
}
.entry-content img { border-radius: 18px; }
.entry-content figure { margin: 1.6em 0; }
.entry-content figcaption {
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: center;
}
.entry-content blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--gold);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 1.15em;
}
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 80px;
  font-family: var(--font-ui);
  font-weight: 700;
}
.post-nav a { color: var(--sage-dark); border-bottom: 1px solid var(--gold); }

/* ------------------------------------------------------------ Footer */

.site-footer {
  padding: 28px clamp(24px, 6vw, 96px);
  background: var(--footer);
  color: var(--ivory);
  font-size: var(--text-sm);
}
/* Inner wrapper caps footer content on 2K/4K; band stays full-bleed */
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--content-max);
  margin-inline: auto;
}
/* ---------------------------------------------- Social icon row (shared) --
   One system, every placement (footer.php, Contact aside). Links come from
   sowmya_social_links(); markup from sowmya_social_icons(). Icons are
   currentColor-driven inline SVG — CSS owns colour, size, and hover.
   Brand hex values are the vendors' constants (an allowed exception to the
   token rule — see CLAUDE.md); scoped here, never reused as design colours. */
.social-links {
  --brand-instagram: #E4405F;
  --brand-linkedin:  #0A66C2;
  --brand-facebook:  #1877F2;
  --brand-youtube:   #FF0000;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;            /* ≥44px tap target via padding around a 24px glyph */
  height: 44px;
  border-radius: 50%;
  color: inherit;         /* default tone set per context below */
  transition: color var(--dur-micro) var(--ease-breathe),
              transform var(--dur-micro) var(--ease-breathe);
}
.social-icon-svg { display: block; width: 24px; height: 24px; }
.social-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* Hover/focus: animate to each mark's brand colour. */
.social-link--instagram:hover, .social-link--instagram:focus-visible { color: var(--brand-instagram); }
.social-link--linkedin:hover,  .social-link--linkedin:focus-visible  { color: var(--brand-linkedin); }
.social-link--facebook:hover,  .social-link--facebook:focus-visible  { color: var(--brand-facebook); }
.social-link--youtube:hover,   .social-link--youtube:focus-visible   { color: var(--brand-youtube); }
/* The gentle lift is a pointer nicety only — never on touch/keyboard. */
@media (hover: hover) {
  .social-link:hover { transform: translateY(-2px) scale(1.08); }
}

/* Footer context: dark sage band → ivory icons read cleanly. */
.footer-social { color: var(--ivory); }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 980px) {
  .header-inner { align-items: flex-start; flex-direction: column; gap: 14px; }
  /* Nav wraps into rows (no horizontal scroll strip); links padded to ≥44px tap targets */
  .nav-links { width: 100%; }
  .nav-links .menu { flex-wrap: wrap; }
  .nav-links a { display: inline-block; padding: 11px 10px; }
  .nav-links .menu > li:last-child > a { padding: 11px 16px; }
  .hero-section { min-height: auto; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy { order: 2; }
  .hero-image-wrap { order: 1; }
  .portfolio-grid, .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-card { grid-template-columns: 1fr; }
  .spotlight-preview { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .site-header { padding: 14px 18px; }
  .brand { font-size: 2rem; }
  .nav-links .menu { gap: 0 8px; font-size: var(--text-xs); }
  .nav-links a { padding: 12px 8px; } /* ≥44px tap targets at the --text-xs floor */
  .nav-links .menu > li:last-child > a { padding: 12px 14px; }
  .hero-section { padding: 36px 18px 62px; }
  .hero-copy h1 { font-size: clamp(3.375rem, 21vw, 4.875rem); } /* fits 320px; 78px from ~372px up */
  .identity-line { font-size: 1.5625rem; margin-top: 24px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-image-wrap { border-radius: 28px 28px 8px 28px; padding: 10px; }
  .hero-image-wrap img { border-radius: 22px 22px 4px 22px; }
  .section-pad { padding: 64px 18px; }
  .portfolio-grid, .blog-grid { grid-template-columns: 1fr; }
  .blog-grid .portfolio-card .card-thumb { height: 240px; }
  .blog-card { padding: 24px; border-radius: 28px; }
  .spotlight-honor-list li { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
  .logo-row img { width: 100%; }
  .footer-inner { flex-direction: column; text-align: center; align-items: center; }
  .footer-social { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .portfolio-card { transition: none; }
  .spotlight-story-copy h3 a { transition: none; }
  /* Social icons: colour still shifts on hover, but no lift/scale. */
  .social-link { transition: color var(--dur-micro) var(--ease-breathe); }
  .social-link:hover { transform: none; }
}

/* ---------------------------------------------- Editorial rows (shared) ---- */
/* The About "chapters" pattern, generalized: alternating text/image rows with
   rangoli dividers, reused by page-about-me.php and page-offerings.php.
   .row-flip mirrors a row (image LEFT on desktop). .hero-quote is the shared
   page-hero subtitle line. */

.hero-quote {
  max-width: 640px;
  margin: 18px auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1875rem, 2vw, 1.625rem);
  line-height: 1.4;
  color: var(--muted);
}

.editorial-rows {
  max-width: 1180px;
  margin: 0 auto;
}
.editorial-rows .rangoli { margin: clamp(52px, 7vw, 88px) auto; }
.editorial-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
/* Default: text left, image right. .row-flip swaps the image to the left. */
.editorial-row.row-flip .row-copy { order: 2; }
.editorial-row.row-flip .row-media { order: 1; }
.row-quote {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1875rem, 1.8vw, 1.5rem);
  line-height: 1.3;
  color: var(--sage-dark);
}
.row-quote::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: var(--gold);
}
.row-copy h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.4vw, 2.875rem);
  line-height: 1.08;
  font-weight: 600;
  color: var(--sage-dark);
}
.row-copy p {
  max-width: 60ch;
  margin: 0 0 1.1em;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--ink);
}
.row-copy p:last-child { margin-bottom: 0; }
.row-media img {
  width: 100%;
  height: min(520px, 60vh); /* fallback for browsers without svh */
  height: min(520px, 60svh);
  object-fit: cover;
  border-radius: 28px;
  box-shadow: var(--shadow);
}
/* Family photographs with several edge-to-edge faces and portrait artwork
   retain their complete composition instead of taking the shared cover crop. */
.row-media img.family-photo,
.row-media img.artwork-photo {
	object-fit: contain;
	background: var(--paper);
}
/* -------------------------------------------- Focal-point crop utilities ---- */
/* Every <img> inside a cover-crop container (.portfolio-card, .moment-tile,
   .row-media, .duo-strip, .band-img, …) SHOULD carry a .focus-* class chosen
   by eyeballing the rendered crop — faces and heads are never cut. No class
   means the browser default (50% 50%). */
.focus-top    { object-position: 50% 12%; } /* subject touches the top of the frame */
.focus-upper  { object-position: 50% 25%; } /* subject in the upper third */
.focus-center { object-position: 50% 50%; } /* the default, made explicit */

/* ------------------------------------------------------------ About page ---- */
/* page-about-me.php — philosophy band, numbers row, moments strip.
   Tokens and shared components only. */

/* Philosophy band (h2 scale shared via the heading group above) */
.philosophy-band {
  background: var(--paper);
  text-align: center;
}

/* Quiet numbers row — no boxes, no borders */
.about-numbers { padding: clamp(44px, 6vw, 72px) clamp(24px, 6vw, 96px); }
.numbers-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(30px, 6vw, 90px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}
.numbers-row .stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--sage-dark);
}
.numbers-row .stat-label {
  display: block;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Moments strip */
.moments-section { background: var(--paper); }
.moments-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}
/* Each photo sits in a .moment-tile mask so the hover zoom stays clipped */
.moment-tile {
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(62, 94, 58, .08); /* same subtle shadow as .portfolio-card */
}
.moments-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

@media (max-width: 980px) {
  /* Editorial rows stack: image above text, alternation resets */
  .editorial-row { grid-template-columns: 1fr; }
  .editorial-row .row-copy,
  .editorial-row.row-flip .row-copy { order: 2; }
  .editorial-row .row-media,
  .editorial-row.row-flip .row-media { order: 1; }
  .row-media img { height: min(420px, 52vh); height: min(420px, 52svh); }
  .moments-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  /* 19px floor (was 18px) so the display subtitle still dominates the raised 18px body */
  .hero-quote { font-size: 1.1875rem; }
  .row-media img { height: min(320px, 46vh); height: min(320px, 46svh); border-radius: 22px; }
  .editorial-rows .rangoli { margin: 44px auto; }
  .numbers-row { gap: 26px 34px; }
  .moments-grid { grid-template-columns: 1fr; }
  .moments-grid img { height: 240px; }
}

/* ------------------------------------------------------- Offerings page ---- */
/* page-offerings.php — welcome intro, offering rows (shared .editorial-row),
   "How it begins" steps strip, affiliations band, quiet FAQ. Tokens and
   shared components only. */

/* Short welcome paragraph between a page hero and the first content section
   (Offerings intro, portfolio intros) */
.page-intro { padding: clamp(28px, 4vw, 52px) clamp(24px, 6vw, 96px) 0; }
.page-intro .intro-text { max-width: 680px; margin-top: 0; }

/* Kicker inside an offering row: restore the kicker pattern (the generic
   .row-copy p sizing would otherwise override it) */
.row-copy .section-kicker {
  margin: 0 0 14px;
  font-size: var(--text-xs);
  color: var(--sage-dark);
}

/* Quiet inline detail line — items separated by a gold interpunct */
.row-copy .row-detail {
  margin: 18px 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}
/* Gold interpunct between inline detail items (.row-detail, .credential-line) */
.detail-sep {
  margin: 0 10px;
  color: var(--gold);
}

/* Text CTA under each row — same link vocabulary as .portfolio-card a */
.text-cta {
  display: inline-block;
  margin-top: 18px;
  padding-bottom: 2px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--sage-dark);
  border-bottom: 1px solid var(--gold);
}

/* "How it begins" — quiet steps strip, styled like the About numbers row:
   Cormorant numerals, Quicksand labels, no boxes or borders */
.steps-section {
  background: var(--paper);
  text-align: center;
}
.steps-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(28px, 4vw, 90px);
  max-width: 1180px;
  margin: 38px auto 0;
  padding: 0;
  list-style: none;
}
/* Shrinkable basis keeps the three steps on one line down to ~720px, then
   degrades 2+1 → stacked with no column-count flip-flop near 650px */
.steps-row li { flex: 1 1 200px; max-width: 280px; }
.step-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--sage-dark);
}
.step-title {
  display: block;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.step-copy {
  margin: 10px 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
}

/* Quiet FAQ — plain stacked pairs, everything visible (no accordions) */
.faq-section { background: var(--paper); }
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item + .faq-item { margin-top: clamp(30px, 4vw, 44px); }
.faq-item h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--sage-dark);
}
.faq-item p { margin: 0; font-size: var(--text-lg); color: var(--muted); }

@media (max-width: 650px) {
  .steps-row { gap: 26px 34px; }
}

/* ----------------------------------------------------- Portfolio system ---- */
/* Shared components for all portfolio pages (page-yogini.php,
   page-poetry-writing.php, and the four portfolios still to come): folio hero,
   institution panels, bibliography index, honor roll, credential line,
   cross-navigation. Tokens and shared components only. */

/* Kickers rendered as h2/h3 (for heading-outline navigation) keep the kicker
   scale even inside contexts that size their own headings (.blog-copy h2 etc.) */
h2.section-kicker,
h3.section-kicker {
  margin: 0 0 14px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-wrap: balance;
  text-transform: uppercase;
  color: var(--sage-dark);
}

/* .folio-hero rides on .page-hero (kicker "Portfolio", H1, .hero-quote essence
   line). No overrides needed yet — the class is the shared hook. */

/* Centered portfolio sections (the bibliography stays left-aligned, index-like) */
.orgs-section,
.training-section,
.honors-section,
.folio-next { text-align: center; }
.honors-section { background: var(--paper); }
/* .bibliography-section sits on clean ivory (literary redesign) — no band */

/* Institution panels — organizations Sowmya leads */
.institution-stack {
  display: grid;
  gap: 24px;
  max-width: 1180px;
  margin: 34px auto 0;
}
.institution-panel {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  overflow: hidden;
  text-align: left;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.institution-logo {
  display: grid;
  place-items: center;
  padding: clamp(28px, 4vw, 48px);
  background: rgba(255, 255, 255, 0.6);
  border-right: 1px solid var(--line);
}
.institution-logo img {
  max-height: 90px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.institution-logo--dark { background: var(--sage-dark); }
.institution-logo--profile img {
  max-height: 112px;
  border-radius: 18px;
}
/* Dignified text fallback while an org logo asset is missing */
.institution-wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 1.6875rem); /* floor 22→24px: H3 tier ≥1.5rem */
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--sage-dark);
}
.institution-body { padding: clamp(28px, 4vw, 48px); }
.institution-body h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
  font-weight: 600;
  color: var(--sage-dark);
}
.institution-copy {
  margin: 0;
  max-width: 60ch;
  color: var(--muted);
}
.institution-body .text-cta { margin-top: 16px; }

/* Bibliography — publications as a fine-press editorial index */
.bibliography { max-width: 780px; margin: 0 auto; }
.bib-group + .bib-group { margin-top: clamp(46px, 6vw, 70px); }
.bib-group .section-kicker { margin-bottom: 4px; }
.bib-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bib-entry {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 6px 22px;
  padding: clamp(24px, 3vw, 30px) 0;
}
.bib-entry + .bib-entry { border-top: 1px solid var(--line); }
.bib-year {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--sage-dark);
  font-variant-numeric: tabular-nums;
}
.bib-year.is-undated {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--gold);
}
.bib-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--ink);
}
/* When an entry has a URL the title is the link — gold underline on hover */
.bib-link {
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-breathe);
}
.bib-link:hover,
.bib-link:focus-visible { border-bottom-color: var(--gold); }
.bib-venue {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
}

/* Honor roll — awards and grants, whitespace only */
.honor-roll {
  max-width: 780px;
  margin: 30px auto 0;
  padding: 0;
  list-style: none;
}
.honor-group { max-width: 780px; margin: 30px auto 0; }
.honor-group + .honor-group { margin-top: clamp(52px, 7vw, 82px); }
.honor-group .honor-roll { margin-top: 22px; }
.honor-roll li + li { margin-top: clamp(26px, 4vw, 38px); }
.honor-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--sage-dark);
}
.honor-meta {
  display: block;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* One-line certifications row — same quiet vocabulary as .row-detail */
.credential-line {
  max-width: 820px;
  margin: 18px auto 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.75;
  color: var(--muted);
}
/* Short supporting paragraph under a credential line or section kicker */
.folio-note {
  max-width: 680px;
  margin: 22px auto 0;
  color: var(--muted);
}

/* Featured-work panel — .blog-card gradient shell, media on the LEFT */
.feature-panel { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.feature-panel h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.4vw, 2.875rem);
  line-height: 1.08;
  font-weight: 600;
  color: var(--sage-dark);
}

/* Generic centered chapter section + paper band (portfolio chapters) */
.folio-section { text-align: center; }
.paper-section { background: var(--paper); }

/* Degree timeline — the bibliography's typographic DNA turned vertical
   (Research page). Spine + gold nodes; already single-column, so it stacks
   clean at every width. */
.degree-timeline {
  position: relative;
  max-width: 720px;
  margin: 38px auto 0;
  padding: 0 0 0 34px;
  list-style: none;
  text-align: left;
}
.degree-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 8px;
  width: 2px;
  background: var(--line);
}
.degree-timeline li {
  position: relative;
  padding: 0 0 clamp(30px, 4vw, 42px);
}
.degree-timeline li:last-child { padding-bottom: 0; }
.degree-timeline li::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}
.degree-level {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.degree-name {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(1.3125rem, 2vw, 1.5rem);
  line-height: 1.25;
  font-weight: 600;
  color: var(--sage-dark);
}
.degree-thesis {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--ink);
}

/* Editorial theme index — names + one muted sentence, whitespace only */
.theme-list {
  max-width: 720px;
  margin: 30px auto 0;
  padding: 0;
  list-style: none;
}
.theme-list li + li { margin-top: clamp(26px, 4vw, 36px); }
.theme-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--sage-dark);
}
.theme-copy {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
}
/* Teaching's Academic Mentoring lead — a compact image-led editorial row,
   followed by the shared text-only .theme-list for the remaining subjects. */
.rooms-rows {
  margin-top: 34px;
  text-align: left;
}
.rooms-rows .editorial-row h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.75rem); /* floor 22→24px: H3 tier ≥1.5rem */
  line-height: 1.2;
  font-weight: 600;
  color: var(--sage-dark);
}
.rooms-rows .row-media img { border-radius: 18px; }
@media (min-width: 981px) {
  .rooms-rows .editorial-row {
    grid-template-columns: minmax(0, 1.27fr) minmax(0, 1fr); /* copy : image ≈ 56/44 */
    gap: clamp(28px, 4.5vw, 64px);
  }
  .rooms-rows .row-media img {
    height: min(400px, 52vh);
    height: min(400px, 52svh);
  }
}

/* Quiet italic aside line (e.g. "More to come") */
.folio-aside {
  max-width: 680px;
  margin: 26px auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--muted);
}

/* End-of-page cross-navigation between portfolios */
.folio-next-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 4vw, 48px);
  margin-top: 26px;
}
.folio-next-links a {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--sage-dark);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.folio-next-action { margin: 34px 0 0; }

@media (max-width: 980px) {
  /* Institution panels stack: logo zone above the text */
  .institution-panel { grid-template-columns: 1fr; }
  .institution-logo {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  /* Featured-work panel stacks like its .blog-card base (the unconditional
     two-column override above would otherwise win on source order) */
  .feature-panel { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  /* Bibliography year collapses above the title */
  .bib-entry { grid-template-columns: 1fr; gap: 2px; }
  .bib-year { font-size: 1.25rem; }
  .bib-year.is-undated { font-size: 1.0625rem; }
}

/* -------------------------------------------------------- Literary page ---- */
/* page-poetry-writing.php — immersive literary redesign. Imagery lives in
   assets/img/literary/ (SOURCES.md records provenance); every photo passes
   through .img-grade plus token-tinted scrims so disparate images read as
   plates from one book. Scrim opacities are contrast-verified: at each text
   zone the worst-case composite keeps text ≥ 4.5:1. */

/* Shared photographic grade — tune once, applies everywhere */
.img-grade { filter: saturate(0.85) sepia(0.08); }

/* Full-bleed band image (hero, interludes, book plate bed) */
.band-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Typographic treatments --- */

.drop-cap::first-letter {
  float: left;
  padding: 6px 12px 0 0;
  font-family: var(--font-display);
  font-size: 3.2em;
  font-weight: 600;
  line-height: 0.8;
  color: var(--sage-dark);
}

/* Centered excerpt. Breaks are preserved with <br>; text-wrap: balance keeps
   prose fragments from orphaning a single word on the last line. */
.verse {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.375rem, 2.6vw, 2.125rem);
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
  --reveal-dur: var(--dur-slow);
}
.verse-mark {
  position: absolute;
  top: -0.55em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3.2em;
  font-style: normal;
  line-height: 1;
  color: var(--gold);
  opacity: 0.35;
  pointer-events: none;
}
.verse-attr {
  display: block;
  margin-top: 20px;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.verse-attr a {
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}

/* Hairline separator fading at both ends — the literary counterpart of the
   rangoli (which stays an About/Offerings motif) */
.ink-rule {
  width: min(240px, 60%);
  height: 1px;
  margin: clamp(40px, 6vw, 64px) auto 0;
  background: linear-gradient(90deg, transparent, var(--line) 25%, var(--line) 75%, transparent);
}
/* Short left-aligned variant under bibliography group labels */
.bib-group .ink-rule {
  width: 72px;
  margin: 0 0 22px;
  background: linear-gradient(90deg, var(--line) 40%, transparent);
}

/* --- Literary hero --- */

.literary-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(86vh, 780px);
  min-height: min(86svh, 780px);
  overflow: hidden;
  padding: clamp(180px, 26vh, 300px) clamp(24px, 6vw, 96px) clamp(48px, 7vw, 80px);
  text-align: center;
}
/* Ivory scrim rising from the text zone; at the verse/H1 band it composites
   to ≥ .92 ivory, keeping ink text ≥ 4.5:1 over any pixel. */
.literary-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 253, 247, 0.30),
    rgba(255, 253, 247, 0.60) 32%,
    rgba(255, 253, 247, 0.93) 50%,
    var(--ivory)
  );
}
.literary-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}
/* Leave room for the verse-mark's overhang so the gold quotation mark never
   collides with the kicker. Poetry uses a title-first modifier because its H1
   is intentionally placed directly below "Portfolio". */
.literary-hero .section-kicker { margin-bottom: 64px; }
.literary-hero h1 {
  margin: 28px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 4vw, 3.25rem);
  line-height: 1.05;
  font-weight: 600;
  color: var(--sage-dark);
}
.literary-hero-title-first .section-kicker { margin-bottom: 10px; }
.literary-hero-title-first h1 { margin-top: 0; }
.literary-hero h1 + .verse { margin-top: 76px; }
/* Shorter variant for content pages (About, Offerings): same architecture,
   but the first content section peeks above the fold on a 900px-tall
   viewport (portfolio chapters keep the full min(86svh, 780px) opening). */
.literary-hero-short {
  min-height: min(64vh, 600px);
  min-height: min(64svh, 600px);
  padding-top: clamp(120px, 16vh, 220px);
}

/* --- Writer's note — whitespace is the design --- */

.writers-note {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}
.writers-note p {
  margin: 0 0 1.2em;
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--ink);
}
.writers-note p:last-child { margin-bottom: 0; }

/* --- The book as a plate --- */

.plate-band {
  position: relative;
  overflow: hidden;
}
/* Heavy ivory wash keeps the marigold bed at low presence; ink/sage text on
   the wash stays ≥ 4.5:1 over any pixel. */
.plate-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 253, 247, 0.92),
    rgba(255, 253, 247, 0.86) 50%,
    rgba(255, 253, 247, 0.92)
  );
}
.plate-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.plate-cover img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.plate-body h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.4vw, 2.875rem);
  line-height: 1.08;
  font-weight: 600;
  color: var(--sage-dark);
}
.plate-meta {
  margin: 0 0 14px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  /* sage-dark, not muted: over the washed photo bed, muted bottoms out at
     4.19:1 — sage-dark samples ≥5.0:1 across the zone */
  color: var(--sage-dark);
}
.plate-copy {
  margin: 0;
  max-width: 52ch;
  color: var(--ink);
}
.plate-body .primary-link { margin-top: 22px; }

/* --- Interludes — full-width image bands, sage duotone --- */

.interlude {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 14vw, 170px) clamp(24px, 6vw, 96px);
  text-align: center;
}
/* Sage wash reaching .88 across the text band: ivory text ≥ 4.5:1 even over
   a pure-white pixel (composite ≈ 5.3:1). */
.interlude::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(62, 94, 58, 0.60),
    rgba(62, 94, 58, 0.88) 20%,
    rgba(62, 94, 58, 0.88) 80%,
    rgba(62, 94, 58, 0.60)
  );
}
.interlude .verse {
  position: relative;
  z-index: 1;
  color: var(--ivory);
}
.interlude .verse-attr { color: var(--ivory); }
.interlude .verse-mark { opacity: 0.4; }

/* Paper pull-quote variant (Teaching) — the interlude with no photograph:
   the verse sits on a quiet paper atmosphere in its normal ink/muted colors
   instead of ivory-on-sage. No image, no scrim. */
.interlude.interlude-paper {
  background:
    radial-gradient(90% 130% at 50% 50%, var(--ivory-deep), transparent 75%),
    var(--paper);
}
.interlude.interlude-paper::after { content: none; }
.interlude.interlude-paper .verse { color: var(--ink); }
.interlude.interlude-paper .verse-attr { color: var(--muted); }
.interlude.interlude-paper .verse-mark { opacity: 0.35; }

/* Two-up strip of real photographs (Public Speaking) — same tile vocabulary */
.duo-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}
.duo-strip img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 18px;
}

/* Invitation CTA inside an interlude band (sits above the scrim; inverted
   pill so it reads on the sage wash) */
.interlude .interlude-cta {
  position: relative;
  z-index: 1;
  margin: 30px 0 0;
}
.interlude .primary-link {
  background: var(--ivory);
  color: var(--sage-dark);
}

/* --- The writer's world — triptych strip --- */

.triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}
.triptych img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 18px;
}

/* --- Latest from the blog — editorial index, not cards --- */

.continuing-section,
.bibliography-section { text-align: center; }
.bibliography-section .bibliography { text-align: left; }
.post-index {
  max-width: 780px;
  margin: 26px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.post-index li {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 4px 22px;
  align-items: baseline;
  padding: clamp(20px, 3vw, 26px) 0;
}
.post-index li + li { border-top: 1px solid var(--line); }
.post-date {
  font-family: var(--font-display);
  font-variant-caps: small-caps;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.post-title a {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--sage-dark);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-breathe);
}
.post-title a:hover,
.post-title a:focus-visible { border-bottom-color: var(--gold); }
.post-excerpt {
  grid-column: 2;
  margin: 2px 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.continuing-section .secondary-link { margin-top: 30px; }

@media (max-width: 980px) {
  .plate-inner { grid-template-columns: 1fr; }
  .plate-cover {
    max-width: 260px;
    margin-inline: auto;
  }
}

@media (max-width: 650px) {
  /* Verse scales down inside the 650 breakpoint so long lines never orphan
     a single word at 320px (spec: no new breakpoints) */
  /* 19px floor (was 18px) so the verse still dominates the raised 18px body */
  .verse { font-size: clamp(1.1875rem, 5.4vw, 1.375rem); }
  .triptych { grid-template-columns: 1fr; }
  .triptych img { height: 220px; }
  .duo-strip { grid-template-columns: 1fr; }
  .duo-strip img { height: 250px; }
  .post-index li { grid-template-columns: 1fr; gap: 2px; }
  .post-excerpt { grid-column: 1; }
}

/* ------------------------------------------------------------- Spotlight ---- */
/* page-spotlight.php — the showcase of external validation: press, video,
   recognitions, affiliations. Register: celebration held with dignity — gold
   leads this chapter, always the existing --gold token. Components:
   .lite-video (fast YouTube facade; iframe loads only on click — JS half
   lives in main.js), the press showcase (.featured-in, .press-feature,
   .press-mosaic, .press-wordmark-card, .listen-panel — Act I's image-led
   tier above the index), .press-index, .laurel-roll, .moment-strip,
   .media-kit-panel, .acclaim-band. Scrim opacities contrast-verified like
   the literary pages: every text zone composites to ≥ 4.5:1. */

/* --- Video facade --- */

/* Featured film spans wide and breathes in a beat slower (--dur-slow) */
.video-feature {
  max-width: 980px;
  margin: 38px auto 0;
  --reveal-dur: var(--dur-slow);
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1180px;
  margin: clamp(28px, 4vw, 44px) auto 0;
}
.lite-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 24px;
  background: var(--sage-dark); /* solid ground while the thumb loads — no letterbox flash */
  box-shadow: var(--shadow);
}
/* One interactive child: an <a> to YouTube without JS, swapped for a real
   <button> by main.js (same class, same children) */
.lite-video-link {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: inherit;
  color: inherit;
  cursor: pointer;
}
.lite-video-link:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
  border-radius: 24px;
}
.lite-video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Soft ivory scrim at the base; the title/meta zone composites to ≥ .92
   ivory over any thumbnail pixel, keeping text ≥ 4.5:1. */
.lite-video-scrim {
  position: absolute;
  inset: auto 0 0 0;
  padding: 56px 22px 16px;
  text-align: left;
  background: linear-gradient(
    180deg,
    rgba(255, 253, 247, 0),
    rgba(255, 253, 247, 0.62) 38%,
    rgba(255, 253, 247, 0.94) 72%
  );
}
.lite-video-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.4375rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--sage-dark);
}
.lite-video-meta {
  display: block;
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Play affordance: sage circle, ivory triangle, thin gold ring that eases
   wider on hover/focus (box-shadow micro-transition, as .moment-tile does) */
.lite-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sage-dark);
  box-shadow: 0 0 0 2px var(--gold);
  transition: box-shadow var(--dur-micro) var(--ease-breathe);
}
.lite-video-play::after {
  content: "";
  margin-left: 4px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--ivory);
}
.lite-video-link:hover .lite-video-play,
.lite-video-link:focus-visible .lite-video-play {
  box-shadow: 0 0 0 6px var(--gold);
}
/* After click the facade holds the player at the same size and radius */
.lite-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Spotlight press showcase ---- */
/* Act I's image-led tier: the world's coverage shown through its own
   headlines and photographs. Press photographs are light-unified only —
   saturate(.92), never the full .img-grade — they must stay truthful. */

.press-img { filter: saturate(0.92); }

/* One quiet line of outlet names above the feature — typography, no logos */
.featured-in {
  max-width: 820px;
  margin: 18px auto 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* The magazine lead — image beside the outlet's own headline + standfirst.
   1180px matches the page's widest grids (--content-max is the 2K/4K hero
   cap and would balloon a text feature). Reveals as one unit, a beat slow. */
.press-feature {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: clamp(30px, 4.5vw, 64px);
  align-items: center;
  max-width: 1180px;
  margin: clamp(40px, 6vw, 72px) auto 0;
  text-align: left;
  --reveal-dur: var(--dur-slow);
}
.press-feature-media img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.press-feature-title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  line-height: 1.15;
  font-weight: 600;
}
.press-feature-title a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-breathe);
}
.press-feature-title a:hover,
.press-feature-title a:focus-visible { border-bottom-color: var(--gold); }
/* The harvested dek, in the index titles' italic register */
.press-standfirst {
  margin: 14px 0 0;
  max-width: 46ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
  color: var(--muted);
}
.press-feature-year {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* The showcase grid — editorial clippings on a desk: hairline top rule per
   clipping, generous gaps, no card backgrounds or borders around text */
.press-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 48px);
  max-width: 1180px;
  margin: clamp(48px, 7vw, 84px) auto 0;
  text-align: left;
}
.press-clip {
  border-top: 1px solid var(--line);
  padding-top: clamp(18px, 2.5vw, 26px);
}
.press-clip-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 18px;
}
.press-clip .press-outlet { display: block; margin-top: 18px; }
.press-clip-title {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.375rem);
  line-height: 1.3;
  font-weight: 600;
}
.press-clip-title a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-breathe);
}
.press-clip-title a:hover,
.press-clip-title a:focus-visible { border-bottom-color: var(--gold); }
.press-clip-year {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Imageless mosaic fallback — the outlet name as a letterpress plate. Takes
   the .press-clip-media slot when a story's image is dead or unusable. */
.press-wordmark-card {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.press-wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3vw, 2.375rem);
  font-weight: 600;
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
  color: var(--sage-dark);
}

/* The podcast — Act I's one dark moment, on the .contact-panel register.
   The play affordance is the .lite-video vocabulary: sage circle, ivory
   triangle, thin gold ring easing wider. The <a> (episode page, no-JS
   fallback) becomes a <button> when main.js finds an official embed URL;
   the platform iframe is created only on activation. */
.listen-panel {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: clamp(30px, 4.5vw, 56px);
  align-items: center;
  max-width: 1080px;
  margin: clamp(48px, 7vw, 84px) auto 0;
  padding: clamp(32px, 5vw, 56px);
  background: var(--sage-dark);
  border-radius: 28px;
  box-shadow: var(--shadow);
  text-align: left;
  --reveal-dur: var(--dur-slow);
}
.listen-art img {
  width: 100%;
  height: auto;
  border-radius: 18px;
}
.listen-panel .section-kicker { color: var(--gold); margin-bottom: 14px; }
.listen-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.625rem);
  line-height: 1.1;
  font-weight: 600;
  color: var(--ivory);
}
.listen-meta {
  margin: 12px 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.listen-copy {
  margin: 14px 0 0;
  max-width: 52ch;
  line-height: 1.7;
  color: var(--ivory);
}
.listen-player { margin: 26px 0 0; }
/* One interactive child: <a> without JS, <button> with (same children) */
.listen-play {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ivory);
  text-align: left;
}
.listen-play:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 5px;
  border-radius: 6px;
}
.listen-play-icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sage-dark);
  box-shadow: 0 0 0 2px var(--gold);
  transition: box-shadow var(--dur-micro) var(--ease-breathe);
}
.listen-play-icon::after {
  content: "";
  margin-left: 3px;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--ivory);
}
.listen-play:hover .listen-play-icon,
.listen-play:focus-visible .listen-play-icon { box-shadow: 0 0 0 6px var(--gold); }
/* After activation the official player replaces the button */
.listen-player iframe {
  display: block;
  width: 100%;
  height: 192px;
  border: 0;
  border-radius: 12px;
}

/* --- Press index — the media list as editorial typography, no cards --- */

/* Breathing room between the film gallery and the press label above the index */
.press-block { margin-top: clamp(56px, 8vw, 96px); }
.press-index {
  max-width: 980px;
  margin: 34px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.press-entry {
  display: grid;
  grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) 64px;
  gap: 4px 26px;
  align-items: baseline;
  padding: clamp(20px, 3vw, 26px) 0;
}
.press-entry + .press-entry { border-top: 1px solid var(--line); }
.press-outlet {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-dark);
}
.press-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1875rem, 1.9vw, 1.375rem);
  line-height: 1.35;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-breathe);
}
/* The whole row's hover lifts only the title's underline — no translate */
@media (hover: hover) {
  .press-entry:hover .press-title { border-bottom-color: var(--gold); }
}
.press-title:focus-visible { border-bottom-color: var(--gold); }
.press-year {
  justify-self: end;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- Laurel roll — recognitions under year markers, quiet and ceremonial --- */

.laurel-roll {
  max-width: 820px;
  margin: 38px auto 0;
  text-align: left;
}
.laurel-group {
  display: grid;
  /* Wide enough that a ranged marker ("2020–21") holds one line at the 40px cap */
  grid-template-columns: 156px minmax(0, 1fr);
  gap: 26px;
}
.laurel-group + .laurel-group { margin-top: clamp(34px, 5vw, 48px); }
.laurel-year {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
/* A faint gold spine threads each year's entries; every entry carries a node */
.laurel-list {
  position: relative;
  margin: 0;
  padding: 6px 0 6px 30px;
  list-style: none;
}
.laurel-list::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 4px;
  width: 1px;
  background: rgba(232, 199, 107, 0.45);
}
.laurel-item { position: relative; }
.laurel-item + .laurel-item { margin-top: clamp(22px, 3vw, 30px); }
.laurel-item::before {
  content: "\2726";
  position: absolute;
  left: -31px;
  top: 7px;
  font-size: 0.6875rem; /* decorative ✦ node glyph, not text — exempt from the --text-xs floor */
  line-height: 1;
  color: var(--gold);
}
.laurel-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3125rem, 2.2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--sage-dark);
}
.laurel-grantor {
  display: block;
  margin-top: 5px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Pull-quote band — one line of acclaim over a washed atmosphere bed --- */
/* The .plate-band technique on paper: the golden-hour facade sits under a
   heavy paper-tinted wash (.86 minimum), so ink text stays ≥ 4.5:1 over any
   pixel. Attribution is sage-dark, not muted — over a washed photo bed muted
   bottoms out below 4.5:1 (same measurement as .plate-meta). */
.acclaim-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--paper);
}
.acclaim-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(251, 248, 239, 0.92),
    rgba(251, 248, 239, 0.86) 50%,
    rgba(251, 248, 239, 0.92)
  );
}
.acclaim-band .verse {
  position: relative;
  z-index: 1;
  max-width: 720px;
}
.acclaim-band .verse-attr { color: var(--sage-dark); }

/* --- Long-form testimonial — readable editorial measure, never a quote card --- */
.testimonial-longform {
  max-width: 780px;
  margin: 34px auto 0;
  padding-left: clamp(20px, 4vw, 42px);
  text-align: left;
  border-left: 2px solid var(--gold);
}
.testimonial-longform h3 {
  margin: 0 0 18px;
  color: var(--sage-dark);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.2;
}
.testimonial-longform blockquote { margin: 0; }
.testimonial-longform p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.75;
}
.testimonial-longform p + p { margin-top: 1.15em; }

/* --- Moment strip — scroll-snap filmstrip; user-driven, no controls --- */

.moment-strip-wrap {
  position: relative;
  max-width: 1180px;
  margin: 34px auto 0;
}
.moment-strip {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 4px 24px; /* 4px vertical: room for the focus ring inside the scroller */
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;
}
.moment-strip:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}
.moment-strip li {
  flex: none;
  scroll-snap-align: start;
}
.moment-strip img {
  height: 360px;
  width: auto;
  border-radius: 18px;
}
/* Ivory edge fades signal there is more to scroll; never block the pointer */
.moment-strip-wrap::before,
.moment-strip-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 1;
  pointer-events: none;
}
.moment-strip-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--ivory), rgba(255, 253, 247, 0));
}
.moment-strip-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--ivory), rgba(255, 253, 247, 0));
}

/* --- Media kit — for press & organizers --- */

.media-kit-panel {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 64px);
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.media-kit-bio {
  max-width: 62ch;
  margin: 0 auto;
  line-height: 1.8;
  color: var(--ink);
}
/* Three portraits on the .moment-tile vocabulary; each links to its
   full-resolution file (download) */
.media-kit-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: clamp(26px, 4vw, 38px) 0 0;
  padding: 0;
  list-style: none;
}
.media-kit-photos .moment-tile { display: block; }
.media-kit-photos img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.media-kit-note {
  max-width: 680px;
  margin: 14px auto 0;
  font-size: var(--text-sm);
  color: var(--muted);
}
.media-kit-panel .primary-link { margin-top: 26px; }

@media (max-width: 980px) {
  .moment-strip img { height: 300px; }
  /* Feature and podcast stack image-above; the artwork stops short of
     full-bleed so the panel keeps its proportions */
  .press-feature { grid-template-columns: 1fr; gap: 26px; }
  .press-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listen-panel { grid-template-columns: 1fr; }
  .listen-art { max-width: 420px; }
}

@media (max-width: 650px) {
  .video-grid { grid-template-columns: 1fr; gap: 18px; }
  .lite-video-scrim { padding: 44px 16px 12px; }
  .press-mosaic { grid-template-columns: 1fr; }
  /* Outlet stacks above the title; the year tucks under it */
  .press-entry { grid-template-columns: 1fr; gap: 2px; }
  .press-year { justify-self: start; } /* --text-sm is already fluid; no mobile shrink */
  /* Year markers stack above their entries */
  .laurel-group { grid-template-columns: 1fr; gap: 14px; }
  .moment-strip img { height: 260px; }
  .moment-strip { padding-inline: 18px; scroll-padding-inline: 18px; }
  .media-kit-photos { grid-template-columns: 1fr; }
  /* The long CTA label holds two balanced lines (not three) inside the
     narrow panel at 320px */
  .media-kit-panel .primary-link { padding-inline: 14px; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  /* Rings stay static: no ease, no growth */
  .lite-video-play,
  .listen-play-icon { transition: none; }
  .lite-video-link:hover .lite-video-play,
  .lite-video-link:focus-visible .lite-video-play,
  .listen-play:hover .listen-play-icon,
  .listen-play:focus-visible .listen-play-icon { box-shadow: 0 0 0 2px var(--gold); }
  .press-title,
  .press-feature-title a,
  .press-clip-title a { transition: none; }
}

/* ------------------------------------------------------------ Responsive hardening ---- */
/* Viewport-matrix pass (320px–3840px): overflow guards for editor-authored
   content and sticky-header anchor offset. No visual change at 1440px. */

.entry-content { overflow-wrap: break-word; } /* long URLs can't force x-scroll at 320px */
.entry-content pre { overflow-x: auto; }
.entry-content table { display: block; max-width: 100%; overflow-x: auto; }
.entry-content iframe,
.entry-content video,
.entry-content embed { max-width: 100%; }
/* Plugin form fields (Contact Form 7 renders size="40" inputs) can't exceed the prose column */
.entry-content input,
.entry-content textarea,
.entry-content select { max-width: 100%; }

/* In-page anchors (#about, #portfolios, ...) land below the sticky header */
[id] { scroll-margin-top: calc(var(--header-h, 76px) + 12px); }

/* ------------------------------------------------------------ Motion ---- */
/* Breath-paced reveal system (assets/js/main.js). Elements opt in with
   data-reveal / data-reveal-group / data-reveal-load; JS adds .is-revealed
   once, ever — nothing re-triggers on scroll. Hidden states exist ONLY under
   html.has-js, so with JS off (or for crawlers) the page is fully visible.
   Transform + opacity only — zero layout shift. Per-element shape comes from
   custom props: --reveal-x / --reveal-y / --reveal-scale / --reveal-dur. */

html.has-js [data-reveal],
html.has-js [data-reveal-load],
html.has-js [data-reveal-group] > * {
  opacity: 0;
  transform: translate(var(--reveal-x, 0px), var(--reveal-y, var(--rise))) scale(var(--reveal-scale, 1));
  transition:
    opacity var(--reveal-dur, var(--dur-reveal)) var(--ease-breathe),
    transform var(--reveal-dur, var(--dur-reveal)) var(--ease-breathe);
}
html.has-js [data-reveal].is-revealed,
html.has-js [data-reveal-load].is-revealed,
html.has-js [data-reveal-group].is-revealed > * {
  opacity: 1;
  transform: none;
}

/* Editorial rows: on desktop the text and image drift in from their own
   sides (below 981px they fall back to the vertical rise); the image settles
   from a whisper of scale layered on the drift. */
@media (min-width: 981px) {
  .editorial-row .row-copy { --reveal-x: calc(-1 * var(--drift)); --reveal-y: 0px; }
  .editorial-row .row-media { --reveal-x: var(--drift); --reveal-y: 0px; --reveal-scale: 1.025; }
  .editorial-row.row-flip .row-copy { --reveal-x: var(--drift); }
  .editorial-row.row-flip .row-media { --reveal-x: calc(-1 * var(--drift)); }
}

/* Row quote (About chapters): the gold rule draws itself once its row has
   settled — scaleX rather than width so the quote text never moves — and the
   quote breathes in 120ms behind it. */
html.has-js [data-reveal] .row-quote {
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-breathe) calc(var(--dur-reveal) / 2 + 120ms);
}
html.has-js [data-reveal] .row-quote::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-reveal) var(--ease-breathe) calc(var(--dur-reveal) / 2);
}
html.has-js [data-reveal].is-revealed .row-quote { opacity: 1; }
html.has-js [data-reveal].is-revealed .row-quote::before { transform: scaleX(1); }

/* Rangoli dividers: bloom in, then an idle incense-slow turn. The turn's
   delay waits out the bloom so the transform hand-off is seamless; the
   keyframe stays separate so reduced-motion can kill it on its own. */
.editorial-rows .rangoli { --reveal-y: 0px; --reveal-scale: 0.6; }
.rangoli.is-revealed { animation: rangoli-turn 60s linear var(--dur-reveal) infinite; }
@keyframes rangoli-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Philosophy band: kicker + line as one still reveal, a beat slower */
.philosophy-band { --reveal-dur: var(--dur-slow); }

/* Stat numerals: JS counts these up on first reveal; tabular figures plus a
   JS-frozen min-width keep the row perfectly still while digits change. */
.numbers-row .stat-numeral {
  display: inline-block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Micro-interactions (hover-capable devices only): the moments photo eases
   within its mask and the shadow deepens one step — no translate-lift, that
   is the front-page card pattern. Same micro ease on the About CTA button. */
@media (hover: hover) {
  .moment-tile { transition: box-shadow var(--dur-micro) var(--ease-breathe); }
  .moment-tile img { transition: transform var(--dur-micro) var(--ease-breathe); }
  .moment-tile:hover { box-shadow: var(--shadow); }
  .moment-tile:hover img { transform: scale(1.03); }
  /* [data-reveal] keeps this scoped to the About panel — the front-page panel
     has no reveal opt-in (slug-matched templates get no template body class) */
  .contact-panel[data-reveal] .primary-link {
    transition: box-shadow var(--dur-micro) var(--ease-breathe), filter var(--dur-micro) var(--ease-breathe);
  }
  .contact-panel[data-reveal] .primary-link:hover {
    box-shadow: var(--shadow);
    filter: brightness(1.03);
  }
}

/* Reduced motion: the page is simply, immediately complete — reveals shown,
   counters at final values (JS skips the count), rangoli turn off. */
@media (prefers-reduced-motion: reduce) {
  html.has-js [data-reveal],
  html.has-js [data-reveal-load],
  html.has-js [data-reveal-group] > * { opacity: 1; transform: none; transition: none; }
  html.has-js [data-reveal] .row-quote { opacity: 1; transition: none; }
  html.has-js [data-reveal] .row-quote::before { transform: none; transition: none; }
  .rangoli.is-revealed { animation: none; }
  .moment-tile,
  .moment-tile img,
  .contact-panel[data-reveal] .primary-link { transition: none; }
  .moment-tile:hover img { transform: none; }
}

/* ==================================================================== Contact
   The conversion endpoint — the warmest, simplest page. The Contact Form 7
   form (id 1008) is do_shortcode()'d into .contact-form-shell and restyled
   here with tokens only; no custom handler, no inline styles. The map is a
   facade (the .lite-video pattern): no Google iframe until "Load map" is
   clicked (main.js). JS off / reduced-motion → the facade IS the
   "Open in Google Maps" link. New components: .contact-form-shell,
   .map-facade. */

/* --- Two-column: form 58% / aside 42%, aside stacks below ≤980px --- */
.contact-main { background: var(--ivory); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

/* --- Form shell — ivory panel; the plugin markup restyled within --- */
.contact-form-shell {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow);
  --reveal-dur: var(--dur-slow);
}
.contact-form-shell .section-kicker { margin-bottom: 4px; }
.contact-form-shell > h2 {
  margin: 0 0 clamp(20px, 3vw, 30px);
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--sage-dark);
}
/* Graceful fallback shown only if the plugin is deactivated */
.contact-form-fallback { margin: 0; font-size: var(--text-base); color: var(--muted); }

/* Field rows (each CF7 [field] wrapped in <p class="cf-field"> by the form
   template). Real, visible labels above each control. */
.contact-form-shell .cf-field { margin: 0 0 clamp(16px, 2.4vw, 22px); }
.contact-form-shell .cf-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--sage-dark);
}
.contact-form-shell .cf-req {
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* Inputs, select, textarea — one shared shape (ivory, --line, radius 14) */
.contact-form-shell input[type="text"],
.contact-form-shell input[type="email"],
.contact-form-shell input[type="tel"],
.contact-form-shell select,
.contact-form-shell textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 14px;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form-shell textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.6;
}
.contact-form-shell ::placeholder { color: var(--muted); opacity: 0.85; }
.contact-form-shell .wpcf7-form-control-wrap { display: block; }

/* Select with a custom gold chevron (appearance stripped above). The SVG is
   a data-URI so it carries no external request and no extra color token. */
.contact-form-shell select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23e8c76b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

/* Focus — 2px gold ring, offset (the site-wide focus register) */
.contact-form-shell input:focus-visible,
.contact-form-shell select:focus-visible,
.contact-form-shell textarea:focus-visible,
.contact-form-shell .wpcf7-submit:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Submit — the .primary-link pill (class:primary-link on the CF7 tag),
   full-width on the narrowest phones */
.contact-form-shell .cf-submit-wrap { margin: clamp(22px, 3vw, 30px) 0 0; }
.contact-form-shell .wpcf7-submit { cursor: pointer; border: 0; }
.contact-form-shell .wpcf7-spinner { margin: 0 0 0 12px; }

/* Validation — errors: gold left border + bold ink message prefixed ⚠.
   CF7 appends .wpcf7-not-valid-tip inside the wrap and adds .wpcf7-not-valid
   to the control. */
.contact-form-shell .wpcf7-not-valid {
  border-color: var(--gold);
  border-left-width: 4px;
}
.contact-form-shell .wpcf7-not-valid-tip {
  display: block;
  margin-top: 7px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--ink);
}
.contact-form-shell .wpcf7-not-valid-tip::before {
  content: "\26A0\FE0E "; /* ⚠ text-style, no emoji color */
  color: var(--gold);
}

/* Response output — CF7's role="status" aria-live line. Validation summary is
   quiet ink; the success (form.sent) state is a --paper panel with a Cormorant
   line. */
.contact-form-shell .wpcf7-response-output {
  margin: 22px 0 0;
  padding: 14px 18px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  background: var(--ivory);
}
.contact-form-shell form.sent .wpcf7-response-output {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--sage-dark);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sage);
}

/* --- Aside --- */
.contact-aside { --reveal-dur: var(--dur-slow); }
.contact-aside-block + .contact-aside-block { margin-top: clamp(38px, 5vw, 56px); }
.contact-aside-block > .section-kicker { margin-bottom: 18px; }

/* "How it begins" — the Offerings steps, condensed vertical (number beside
   a stacked title + line). Reuses .step-number / .step-title / .step-copy. */
.steps-flow { margin: 0; padding: 0; list-style: none; }
.steps-flow li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 18px;
  align-items: baseline;
}
.steps-flow li + li { margin-top: 20px; }
.steps-flow .step-number { line-height: 1; }
.steps-flow .step-body { display: block; }
.steps-flow .step-title { margin-top: 0; }
.steps-flow .step-copy { margin-top: 4px; }

/* --- The map as a designed object (facade) --- */
.map-facade {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  min-height: 220px;
  display: grid;
  align-items: end;
}
/* Token-styled backdrop: a soft sage wash (no image) with a gold pin mark */
.map-facade-bed {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(136, 168, 120, 0.20), rgba(136, 168, 120, 0.06) 60%, transparent),
    var(--ivory-deep);
}
.map-pin {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--gold);
  box-shadow: 0 6px 14px rgba(62, 94, 58, 0.22);
}
.map-pin::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--paper);
}
.map-facade-body {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 3vw, 28px);
  text-align: left;
  background: linear-gradient(
    180deg,
    rgba(255, 253, 247, 0),
    rgba(255, 253, 247, 0.72) 40%,
    rgba(255, 253, 247, 0.96) 78%
  );
}
.map-place {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 600;
  color: var(--sage-dark);
}
.map-institution {
  margin: 4px 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--muted);
}
.map-facade .map-load { margin-top: 16px; }
.map-open-link { display: inline-block; margin-top: 14px; }

/* After click, main.js injects the Google iframe into the facade at 4/3 and
   applies the brand grade; the grade eases off on hover/focus so labels read.
   .map-live removes the facade min-height so the iframe drives the box. */
.map-facade.map-live {
  min-height: 0;
  aspect-ratio: 4 / 3;
  display: block;
}
.map-facade iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.85) sepia(0.12) saturate(1.05);
  transition: filter var(--dur-reveal) var(--ease-breathe);
}
.map-facade iframe:hover,
.map-facade iframe:focus { filter: none; }

/* --- Quiet alternatives --- */
.contact-alt-line {
  margin: 0 0 10px;
  font-size: var(--text-base);
  color: var(--ink);
}
.contact-email-pending { color: var(--muted); font-style: italic; }
/* Contact aside sits on an ivory section → icons read in --sage-dark.
   Slight negative inset aligns the 44px targets with the text above. */
.contact-social {
  color: var(--sage-dark);
  margin-left: -10px;
  gap: 4px;
}

/* --- Send-off — one centered verse, no CTA panel (this page is the CTA) --- */
.contact-sendoff { text-align: center; background: var(--paper); }
.contact-sendoff .verse { max-width: 760px; margin-inline: auto; }

@media (max-width: 980px) {
  /* Aside stacks below the form */
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .contact-form-shell { border-radius: 20px; }
  .contact-form-shell .wpcf7-submit { width: 100%; }
  .steps-flow li { gap: 0 14px; }
}

/* Map facade hover only on hover-capable devices; JS-off keeps the link */
@media (prefers-reduced-motion: reduce) {
  .map-facade iframe { transition: none; }
}