/* AUTOMATICALLY GENERATED PRODUCTION CSS BUNDLE - DO NOT EDIT DIRECTLY */

/* === _tokens.css === */
/* ==========================================================================
   nanaShankarshet.org — local scaffold stylesheet
   Design tokens reconciled against design-mockup/README.md (the authoritative
   visual spec — a refinement pass on claude-design-brief.md). Change values
   here, not per-page, if the palette, type scale, or spacing ever shifts.
   ========================================================================== */

:root {
  --ink: #1c1a17;
  --paper: #f7f3ec;
  /* Retired legacy UI aliases pointing to canonical tokens */
  --bronze: var(--re-oxblood);
  --teal: var(--re-ink);
  --muted: #5c564e;
  --border: #e3dccf;

  --re-paper: #f4ebdd;
  --re-paper-soft: #fbf8f1;
  --re-ink: #211f1b;
  --re-charcoal: #686057;
  --re-muted: #625a50;
  --re-tan: #decbb5;
  --re-gold: #b18a52;
  --re-gold-text: #865f2c;
  --re-oxblood: #8c3028;
  --re-dark: #191715;
  --re-dark-soft: #29231f;
  --re-border: rgba(109, 96, 79, 0.22);
  --re-shadow: 0 10px 30px rgba(48, 36, 26, 0.08);

  /* Historical Map Tokens (DESIGN.md specification) */
  --map-sea: #d7e5e2;
  --map-green: #2e6930;
  --map-amber: #b08000;
  --map-land: #f3eee4;
  --map-park: #dde5cf;

  --font-headline: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Typography quality floor */
  /* Inter ships old-style numerals (onum), kerning (kern), and contextual
     alternates (calt). onum makes historical dates/numbers feel period-correct
     rather than sterile modern lining figures. kern ensures pairs like "Wa"
     are correctly spaced. calt enables Inter's stylistic contextual pairs. */
  --body-features: "kern" 1, "calt" 1;
  --numeral-features: "kern" 1, "onum" 1, "tnum" 0;
  --label-features: "kern" 1, "cpsp" 1; /* cpsp = capital spacing — improves tracked UC labels */

  /* Body letter-spacing: Inter's designer recommends -0.011em at reading sizes.
     This tightens the default feel slightly, moving it away from "SaaS app"
     and toward editorial precision. */
  --body-ls: -0.011em;

  --container-width: 1100px;
  --container-width-narrow: 760px;

  /* Card/image radius: 6–8px per spec. --radius is the general UI value
     (buttons, nav toggle, small photo blocks); --radius-lg is for cards and
     larger photo/media blocks. Pill radius (badges, chips, buttons, language
     toggle) is 999px, used directly where needed. */
  --radius: 6px;
  --radius-lg: 8px;

  /* Fluid type scale — interpolated between a 375px (mobile) and 1200px
     (desktop) reference width, matching design-mockup's named breakpoints
     (H1 30/38/46, hero 32/44/56, body 15–18) without hard jumps at the
     breakpoints themselves. */
  --h1-size: clamp(30px, 22.7px + 1.94vw, 46px);
  --hero-size: clamp(32px, 21.1px + 2.91vw, 56px);
  --body-size: clamp(15px, 13.6px + 0.36vw, 18px);

  /* Shared Typography Tiers */
  --type-timeline-desc: 13px;
  --type-control: 0.81rem;         /* 13px */
  --type-control-mobile: 12px;
  --type-caption-title: 0.8rem;    /* 12.8px */
  --type-caption-desc: 0.75rem;    /* 12px */
  --type-supporting: 0.9rem;       /* 14.4px */

  /* Spacing Tokens */
  --space-section-gap: 80px;
  --space-section-gap-mobile: 40px;

  /* Page padding: 24px mobile, 32px tablet (768–1199), 56–72px desktop
     (1200+) per spec — applied via media queries in _responsive.css. */
  --page-padding: 24px;

  /* Core Color Scheme & Theme Backwards Compatibility / Refactor Aliases */
  --bg-cream: var(--re-paper);
  --bg-dark: var(--re-dark);
  --bg-dark-soft: var(--re-dark-soft);
  --bg-cream-soft: var(--re-paper-soft);
  --color-oxblood: var(--re-oxblood);
  --color-gold: var(--re-gold);
  --color-teal: var(--re-ink);
  --color-bronze: var(--re-oxblood);
  --color-ink: var(--re-ink);
  --color-muted: var(--re-muted);
  
  /* Line Heights */
  --lh-heading: 1.15;
  --lh-body: 1.65; /* tuned for Inter at 15-18px on warm parchment — slightly open for editorial readability */

  /* Z-Index Scale */
  --z-base: 1;
  --z-overlay-grain: 2;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 400;
  --z-modal: 600;
  --z-toast: 800;
  --z-skip-link: 1000;

  /* ==========================================================================
     Typography Case Discipline:
     - UPPERCASE: Eyebrows, nav labels, small metadata labels, CTA button text.
     - Title Case: Section headings (H2, H3).
     - Sentence Case: Body prose, narrative flow, captions.
     ========================================================================== */

  /* Button Styles & Design System Tokens */
  --btn-primary-bg: var(--re-oxblood);
  --btn-primary-bg-hover: #742720;
  --btn-primary-color: var(--re-paper-soft);
  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--re-ink);
  --btn-secondary-color: var(--re-ink);
  --btn-secondary-bg-hover: var(--re-ink);
  --btn-secondary-color-hover: var(--re-paper-soft);
  --btn-padding: 12px 22px;
  --btn-font-weight: 600;
  --btn-font-size: 0.95rem;
  --btn-min-height: 44px;

  /* Semantic Typography Tokens */
  --type-display: clamp(82px, 7.8vw, 112px);
  --type-page-h1: clamp(2.2rem, 5vw, 3.4rem);
  --type-editorial-h2: clamp(1.3rem, 2.5vw, 1.75rem);
  --type-article-h3: 1.4rem;
  --type-card-summary: 1.05rem;
  --type-section-eyebrow: 12px;
  --type-navigation: 12px;
  --type-caption: var(--type-caption-desc);
  --type-button: var(--btn-font-size);

  /* Semantic Theme Roles (Light Theme Default) */
  --theme-bg: var(--re-paper);
  --theme-bg-soft: var(--re-paper-soft);
  --theme-text: var(--re-ink);
  --theme-text-muted: var(--re-muted);
  --theme-accent: var(--re-oxblood);
  --theme-highlight: var(--re-gold);
  --theme-border: var(--re-border);
}

/* Dark Theme Selector Scope */
.theme-dark,
.dark,
.re-walk-dark-panel,
#row-03,
#row-08 {
  --theme-bg: var(--re-dark);
  --theme-bg-soft: var(--re-dark-soft);
  --theme-text: var(--re-paper);
  --theme-text-muted: var(--re-charcoal);
  --theme-accent: var(--re-tan);
  --theme-highlight: var(--re-gold);
  --theme-border: rgba(255, 255, 255, 0.1);
}



/* === _reset.css === */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--lh-body);
  letter-spacing: var(--body-ls);
  font-feature-settings: var(--body-features);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed; /* body: speed > legibility for large blocks */
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-headline);
  font-weight: 700;
  line-height: 1.15;
  margin-top: 0;
  text-wrap: balance;
  font-optical-sizing: auto;   /* Garamond optical shapes improve at display sizes */
  text-rendering: optimizeLegibility;
  letter-spacing: normal;      /* Reset body letter-spacing for headline role */
  font-feature-settings: normal; /* Headlines use Garamond features, not Inter features */
}

h1,
h2,
h3,
h4,
.built-section-headline,
.re-hero-headline,
.re-quote-text,
.re-archive-sub,
.re-footer-tagline,
.fought-section-headline {
  text-wrap: balance;
}

h1 {
  font-size: var(--h1-size);
}
h2 {
  font-size: 1.9rem;
  margin-top: 2.5rem;
}
h3 {
  font-size: 1.3rem;
}

p,
.built-narrative,
.article-prose p,
.re-hero-description,
.re-archive-body {
  text-wrap: pretty;
}

p {
  margin: 0 0 1.2em;
}

a {
  color: var(--bronze);
  text-decoration: none;
  transition: color 150ms ease, opacity 150ms ease;
}
a:hover {
  text-decoration: underline;
}
a:active {
  opacity: 0.75;
}

button, input, textarea, select {
  transition: transform 100ms ease, opacity 150ms ease;
}

button:active {
  transform: scale(0.98);
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ---------- Focus Visible (WCAG 2.4.7) ---------- */

:focus-visible {
  outline: 2px solid var(--theme-highlight, #b18a52);
  outline-offset: -2px; /* Inset outline prevents overflow clipping */
  border-radius: var(--radius-sm, 4px);
}

/* Invert outline for dark-background theme sections */
.theme-dark :focus-visible,
.dark :focus-visible,
.re-walk-dark-panel :focus-visible,
#row-03 :focus-visible,
#row-08 :focus-visible,
#row-09 :focus-visible,
.page-hero :focus-visible,
.built-section.dark :focus-visible,
.built-section.theme-dark :focus-visible {
  outline-color: var(--re-tan, #decbb5);
}

/* Suppress default outline on mouse-click; keep it for keyboard only */
:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Skip to Content (WCAG 2.4.1) ---------- */

.skip-link {
  position: fixed;
  top: -100%;
  left: 16px;
  z-index: var(--z-skip-link);
  padding: 12px 24px;
  background: var(--re-oxblood, #8c3028);
  color: var(--re-paper-soft, #fbf8f1);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top 150ms ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--re-gold, #b18a52);
  outline-offset: 2px;
}

/* Accessibility helper for screen-reader-only text */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Global Archival Paper Grain / Noise Surface ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay-grain, 2);
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ---------- Global Prefers-Reduced-Motion Guard (WCAG 2.3.3) ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body::after {
    display: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}




/* === _typography.css === */
/* ---------- Pull-quote ---------- */

blockquote.pull-quote {
  border-top: 1px solid var(--re-oxblood);
  border-bottom: 1px solid var(--re-oxblood);
  margin: 40px auto;
  padding: 20px 0;
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 600;
  font-style: italic;
  color: var(--re-oxblood);
  max-width: 65ch;
}

blockquote.pull-quote.centered {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--re-ink);
  padding: 28px 10px;
  text-align: center;
  font-size: 20px;
}

/* Pull-quotes are a two-step scale (20px / 26px) — deliberately not fluid,
   and never allowed to collapse into body text at any size. */
@media (min-width: 768px) {
  blockquote.pull-quote,
  blockquote.pull-quote.centered {
    font-size: 26px;
  }
}

/* His Story Page Typography & Reading Measure Overrides (Decoupled Scope) */
.story-reading-flow p {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.6;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: 1.6em;
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

.story-reading-flow h2 {
  font-family: var(--font-headline);
  font-size: var(--type-editorial-h2);
  font-weight: 700; /* Canonical Bold weight */
  line-height: 1.2;
  color: var(--re-oxblood);
  max-width: 65ch;
  margin: 2.5rem auto 1.2rem auto;
}

.story-reading-flow h3 {
  font-family: var(--font-headline);
  font-size: var(--type-article-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--re-oxblood);
  max-width: 65ch;
  margin: 1.8rem auto 1rem auto;
}

.story-reading-flow .built-list-styled {
  list-style: none !important;
  padding-left: 0 !important;
  margin-top: 0;
  margin-bottom: 1.6em;
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

.story-reading-flow .built-list-styled li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.6;
  color: var(--ink);
}

.story-reading-flow .built-list-styled li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: var(--re-oxblood);
  font-weight: bold;
}

.story-reading-flow .story-closing-statement {
  font-family: var(--font-headline);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 700;
  color: var(--re-oxblood);
  text-align: center;
  margin-top: 48px;
  margin-bottom: 24px;
}

/* ---------- Old-style numeral activation ---------- */
/* Applied to elements whose primary content is historical dates, years,
   or counts. Inter's "onum" feature sets descending numerals (e.g. 1847
   where '8' and '4' descend below baseline) that match the editorial
   aesthetic of period documents. "tnum" is explicitly OFF so proportional
   spacing flows naturally in prose contexts. */

.built-card-date,
.built-section-date,
.built-year,
.timeline-year,
.re-archive-date,
.re-archive-year,
.honor-meta-date,
.stop-year,
.source-table td,      /* table year/date cells */
.badge {
  font-feature-settings: var(--numeral-features);
}

/* ---------- Label tracking calibration ---------- */
/* Uppercase labels above ~0.10em tracking start to read as a shout on a
   heritage site. The header's 0.18em outlier is reduced to the eyebrow
   standard; all other labels may keep their existing values. */

.re-nav-subnav-label,
.built-section-eyebrow,
.re-archive-kicker,
.re-section-eyebrow {
  font-feature-settings: var(--label-features);
  letter-spacing: 0.10em; /* Calibrated: readable UC tracking, not a shout */
}


/* === _layout.css === */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

.container-reading {
  width: 100%;
  max-width: var(--container-width-narrow);
}



.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 28px 0;
}


/* --------------------------------------------------------------------------
   ROW 03 — DESCENDANT QUOTE
   -------------------------------------------------------------------------- */

.redesign-homepage #row-03 {
  position: relative;
  z-index: 5;
  background: var(--re-dark) !important;
  color: var(--re-paper) !important;
  overflow: hidden;
  display: flex !important;
  align-items: center !important;
  padding: 0 64px !important;
  gap: 48px !important;
  height: 280px !important;
}

.redesign-homepage .re-quote-portrait-wrap {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 235px !important;
  height: 210px !important;
  flex: 0 0 235px !important;
  z-index: 2;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.redesign-homepage .re-quote-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.redesign-homepage .re-quote-container {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: 580px !important;
  flex: 1 !important;
  color: var(--re-paper);
  z-index: 3;
}

.redesign-homepage .re-quote-mark {
  position: absolute !important;
  left: -34px !important;
  top: -22px !important;
  font-family: var(--font-headline);
  font-size: 72px;
  line-height: 1;
  color: var(--re-gold);
  opacity: 0.9;
}

.redesign-homepage .re-quote-text {
  margin: 0 0 18px;
  font-family: var(--font-headline);
  font-size: 30px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;
  color: var(--re-paper);
}

.redesign-homepage .re-quote-text br {
  display: none;
}

.redesign-homepage .re-quote-author {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--re-gold-text);
}

.redesign-homepage .re-quote-author-link {
  color: var(--re-gold-text);
  text-decoration: underline;
  margin-left: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.redesign-homepage .re-quote-author-link:hover {
  opacity: 0.8;
}


.redesign-homepage .re-quote-seal-bg {
  position: absolute !important;
  left: auto !important;
  right: 70px !important;
  top: 38px !important;
  width: 120px !important;
  height: 120px !important;
  color: var(--re-gold);
  opacity: 0.45;
  z-index: 1;
  pointer-events: none;
}

.redesign-homepage .re-quote-ship {
  position: absolute !important;
  left: auto !important;
  right: 35px !important;
  top: 35px !important;
  width: 330px !important;
  height: 210px !important;
  opacity: 0.42;
  z-index: 1;
  pointer-events: none;
  filter: sepia(0.65) contrast(1.15) brightness(0.82);
}

/* --------------------------------------------------------------------------
   ROW 04 — LIFE TIMELINE
   -------------------------------------------------------------------------- */

.redesign-homepage #row-04 {
  position: relative;
  z-index: 5;
  background: var(--re-paper-soft);
  border-top: 1px solid var(--re-border) !important;
  overflow: hidden;
  padding: 0 64px;
  height: auto !important; /* Overrides inline height 106px to prevent clipping */
  padding-bottom: 40px;     /* Bottom spacing for milestone descriptions */
}

.redesign-homepage .re-timeline-title {
  position: absolute;
  top: 25px;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto;
  text-align: center !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 2.2px !important;
  color: var(--re-oxblood);
}

.redesign-homepage .re-timeline-axis {
  position: absolute;
  left: 64px;
  right: 64px;
  top: 120px;               /* Position axis line through the center of dots */
  width: auto;
  height: 1px;
  background: var(--re-charcoal);
  opacity: 0.28;
}

.redesign-homepage #row-04 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 18px;
  align-items: start;
  padding-top: 78px;
}

.redesign-homepage .re-timeline-title + .re-timeline-axis {
  z-index: 1;
}

.redesign-homepage .re-timeline-milestone {
  position: relative;
  top: auto;
  left: auto !important;
  width: auto;
  transform: none;
  text-align: left;
  z-index: 2;
  padding-left: 24px;       /* Shift text to prevent overlap with dots */
}

.redesign-homepage .re-milestone-year {
  margin: 0 0 24px;
  font-family: var(--font-headline);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--re-oxblood);
}

.redesign-homepage .re-milestone-dot {
  position: absolute;
  top: 42px;                /* Center dot vertically in year margin-bottom */
  left: 12px;               /* Center dot horizontally in padding-left area */
  transform: translate(-50%, -50%); /* Center marker mathematically */
  width: 10px;
  height: 10px;
  border: 2px solid var(--re-paper-soft);
  border-radius: 50%;
  background: var(--re-oxblood);
  box-shadow: 0 0 0 1px var(--re-oxblood);
}

.redesign-homepage .re-milestone-desc {
  margin: 0;
  padding-top: 26px;
  font-family: var(--font-body);
  font-size: var(--type-timeline-desc);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--re-ink);
  text-transform: uppercase;
  white-space: normal;
}

/* Make sure inner containers inside full-width sections align correctly */
.built-header {
  padding: 48px 50px 0;
  margin-bottom: 30px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* Section styling (warm paper by default) */
.built-section {
  width: 100%;
  padding: var(--space-section-gap) 64px;
  margin: 0;
  border-top: none;
  border-bottom: 1px solid var(--re-border);
  box-sizing: border-box;
  scroll-margin-top: 70px;
  background-color: var(--re-paper);
  color: var(--re-ink);
}

/* Explicit dark sections (opt-in only via .dark or .theme-dark) */
.built-section.dark,
.built-section.theme-dark {
  background-color: var(--re-dark);
  color: var(--re-paper-soft);
}

/* Text overrides for explicit dark sections */
.built-section.dark .built-section-headline,
.built-section.theme-dark .built-section-headline {
  color: var(--re-paper-soft);
}

.built-section.dark .built-section-subhead,
.built-section.theme-dark .built-section-subhead {
  color: var(--re-tan);
}

.built-section.dark .built-verified-title,
.built-section.theme-dark .built-verified-title {
  color: var(--re-tan);
}

.built-section.dark .built-narrative,
.built-section.theme-dark .built-narrative {
  color: var(--re-paper-soft);
}

.built-section.dark .built-scale-capsule,
.built-section.theme-dark .built-scale-capsule {
  background-color: var(--re-dark-soft);
  border-color: var(--re-border);
}

.built-section.dark .built-scale-text,
.built-section.theme-dark .built-scale-text {
  color: var(--re-paper-soft);
}

.built-section.dark .btn-bronze-outline,
.built-section.theme-dark .btn-bronze-outline {
  border-color: var(--re-gold);
  color: var(--re-gold);
}

.built-section.dark .btn-bronze-outline:hover,
.built-section.theme-dark .btn-bronze-outline:hover {
  background-color: var(--re-gold);
  color: var(--re-dark);
}

/* Backwards-compatibility helper for any existing templates */
.built-list--no-alt > .built-section {
  background-color: var(--re-paper);
  color: var(--re-ink);
}

/* --------------------------------------------------------------------------
   Scroll-Reveal Entrance Motion & Stagger
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > *:nth-child(1) { transition-delay: 60ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 120ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger > *:nth-child(5) { transition-delay: 300ms; }
.reveal-stagger > *:nth-child(6) { transition-delay: 360ms; }
.reveal-stagger > *:nth-child(7) { transition-delay: 420ms; }




/* === _header.css === */
/* --------------------------------------------------------------------------
   PAGE / GRID
   -------------------------------------------------------------------------- */

.redesign-homepage .re-canvas {
  position: relative;
  width: min(100%, 1440px);
  height: auto !important;
  margin: 0 auto;
  overflow: visible;
  background: var(--re-paper);
  box-shadow: none;
}

.redesign-homepage .re-row {
  position: relative;
  width: 100% !important;
  box-sizing: border-box;
}

.redesign-homepage #row-01 {
  min-height: 88px !important;
}


.redesign-homepage #row-03 {
  min-height: 280px !important;
}

.redesign-homepage #row-04 {
  min-height: 220px !important;
}

.redesign-homepage #row-05 {
  min-height: 430px !important;
}

.redesign-homepage #row-06 {
  min-height: 420px !important;
}

.redesign-homepage #row-07 {
  min-height: 650px !important;
}

#row-09 {
  min-height: 72px !important;
}

.redesign-homepage .re-grid-overlay,
.redesign-homepage .re-canvas::after {
  display: none !important;
}

/* --------------------------------------------------------------------------
   DEVELOPMENT CONTROLS — hidden on production homepage
   -------------------------------------------------------------------------- */

.redesign-homepage .re-control-panel {
  display: none !important;
}

/* --------------------------------------------------------------------------
   ROW 01 — HEADER
   -------------------------------------------------------------------------- */

.re-header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  padding: 0 clamp(24px, 4vw, 64px);
  background: rgba(244, 235, 221, 0.96);
  border-bottom: 1px solid var(--re-border);
  height: 95px;
  z-index: var(--z-dropdown);
}

.re-header-brand {
  position: static;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.re-header-brand:hover {
  text-decoration: none;
}

.re-header-seal-wrap {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--re-gold);
  background: var(--re-paper-soft);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.re-header-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) sepia(0.8) brightness(0.9) contrast(1.15);
}

.re-brand-text {
  display: flex;
  flex-direction: column;
}

.re-brand-title {
  font-family: var(--font-headline);
  font-size: 16px;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0.045em;
  color: var(--re-ink);
  text-transform: uppercase;
}

.re-brand-subtitle {
  margin-top: 5px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.10em;
  color: var(--re-muted);
  font-feature-settings: var(--label-features);
}

.re-header-nav {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 30px);
  min-width: 0;
}

.re-header-nav a {
  padding: 6px 0;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--type-navigation);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--re-charcoal);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 180ms ease;
}

.re-header-nav a:hover,
.re-header-nav a.active {
  color: var(--re-oxblood);
}

/* Nav groups transparently unpack into desktop horizontal nav */
.re-nav-group {
  display: contents;
}

.re-nav-group-label {
  display: none;
}

.re-nav-utility-only {
  display: none;
}

.re-header-lang {
  position: static;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: var(--type-navigation);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--re-muted);
}

.re-header-lang a {
  color: var(--re-muted);
}

.re-header-lang a.active {
  color: var(--re-ink);
}

.re-header-lang a:hover {
  color: var(--re-oxblood);
}

.re-header-lang .re-lang-inactive {
  color: var(--re-tan);
  opacity: 0.65;
  cursor: not-allowed;
}

.re-header-lang span.divider {
  color: var(--re-tan);
}

.re-header-cta {
  position: static;
  width: auto;
  height: auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--re-oxblood);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--re-oxblood);
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background 180ms ease,
    color 180ms ease;
}

.re-header-cta:hover {
  background: var(--re-oxblood);
  color: var(--re-paper);
}

/* Mobile Nav Toggle Button */
.re-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--re-border);
  border-radius: var(--radius);
  color: var(--re-oxblood);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.re-nav-toggle svg {
  display: block;
  flex-shrink: 0;
  transition: transform 160ms ease;
}

.re-nav-toggle .nav-icon-menu {
  display: block;
}

.re-nav-toggle .nav-icon-close {
  display: none;
}

.re-nav-toggle:hover {
  border-color: var(--re-oxblood);
  background-color: rgba(140, 48, 40, 0.06);
}

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

.re-nav-toggle.active {
  background-color: var(--re-oxblood);
  color: var(--re-paper-soft);
  border-color: var(--re-oxblood);
}

.re-nav-toggle.active .nav-icon-menu {
  display: none;
}

.re-nav-toggle.active .nav-icon-close {
  display: block;
}



/* === _hero.css === */
/* --------------------------------------------------------------------------
   ROW 02 — HERO
   -------------------------------------------------------------------------- */

.redesign-homepage #row-02 {
  position: relative;
  z-index: 10;
  min-height: 650px;
  margin-top: 0;
  overflow: hidden;
  background: var(--re-paper);
}

.redesign-homepage .re-hero-paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035),
      transparent 48%,
      rgba(120, 90, 60, 0.035)
    ),
    var(--re-paper);
}

.redesign-homepage .re-hero-cracks {
  position: absolute;
  left: 32%;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
  background: url("../assets/images-webp/A14_Hero_Map_Background_Overlay.webp") center /
    cover no-repeat;
  opacity: 0.28;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 15%,
    black 35%,
    black 78%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 15%,
    black 35%,
    black 78%,
    transparent 100%
  );
  pointer-events: none;
}

.redesign-homepage .re-hero-csmt-container {
  position: absolute;
  right: 0;
  left: auto;
  top: 24px;
  width: 58%;
  height: calc(100% - 24px);
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 16%,
    rgba(0, 0, 0, 0.75) 45%,
    black 78%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 16%,
    rgba(0, 0, 0, 0.75) 45%,
    black 78%
  );
}

.redesign-homepage .re-hero-csmt-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 8% top;
  mix-blend-mode: multiply;
  filter: contrast(1.04) brightness(0.98);
  opacity: 0.90;
  transition: opacity 0.4s ease;
}

.redesign-homepage .re-hero-medallion-container {
  position: absolute;
  left: 43%;
  top: 8%;
  width: min(43vw, 500px);
  height: min(43vw, 500px);
  max-width: 500px;
  max-height: 500px;
  z-index: 3;
}

.redesign-homepage .re-hero-medallion-container::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  box-shadow: 12px 18px 28px rgba(75, 55, 40, 0.18);
  filter: blur(8px);
  z-index: -1;
}

.redesign-homepage .re-hero-medallion-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(0.82) sepia(0.05) contrast(0.94) brightness(1.025);
}

.redesign-homepage .re-hero-archival-texture {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: url("../assets/images-webp/hero-archival-texture-overlay.webp") center / cover
    no-repeat;
  opacity: 0.2;
  mix-blend-mode: screen;
}

.redesign-homepage .re-hero-content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 560px;
  padding: 88px 0 60px 64px;
  display: grid;
  grid-template-areas:
    "eyebrow"
    "title"
    "subtitle"
    "cta";
  grid-template-rows: auto auto auto auto;
  pointer-events: auto;
  box-sizing: border-box;
}

.redesign-homepage .re-hero-content a {
  pointer-events: auto;
}

.redesign-homepage .re-hero-eyebrow {
  grid-area: eyebrow;
  position: static;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.2px;
  line-height: 1;
  color: var(--re-oxblood);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.redesign-homepage .re-hero-headline {
  grid-area: title;
  position: static;
  margin: 0 0 32px 0;
  font-family: var(--font-headline);
  font-size: var(--type-display);
  font-weight: 600;
  line-height: 0.84;
  letter-spacing: -0.035em;
  color: var(--re-ink);
  text-transform: uppercase;
  z-index: 5;
}

.redesign-homepage .re-hero-headline span.oxblood {
  color: var(--re-oxblood);
}

.redesign-homepage .re-hero-description {
  grid-area: subtitle;
  position: static;
  max-width: 480px;
  margin: 0 0 28px 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.65;
  color: var(--re-charcoal);
  z-index: 5;
}

.redesign-homepage .re-hero-description br {
  display: inline;
}

.redesign-homepage .re-hero-cta {
  grid-area: cta;
  position: static;
  width: fit-content;
  height: auto;
  padding: 0 0 7px;
  border: 0;
  border-bottom: 1px solid var(--re-oxblood);
  background: transparent;
  color: var(--re-oxblood);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  transition:
    transform 180ms ease,
    color 180ms ease;
}

.redesign-homepage .re-hero-cta:hover {
  opacity: 1;
  color: var(--re-oxblood);
  transform: translateX(4px);
}

/* ==========================================================================
   GLOBAL REDESIGN PASS - SUBPAGE REFACTOR
   ========================================================================== */

.page-hero {
  position: relative;
  background-color: var(--re-dark) !important;
  color: var(--re-paper-soft);
  text-align: center;
  padding: 85px 24px 50px;
  border-bottom: 1px solid var(--re-border);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 320px;
  box-sizing: border-box;
}

.page-hero .hero-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.2px !important;
  color: var(--re-gold-text) !important;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.page-hero .hero-title {
  font-family: var(--font-headline);
  font-size: var(--type-page-h1);
  font-weight: 700;
  line-height: 1.15;
  color: var(--re-paper-soft);
  margin-top: 0;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.page-hero .hero-title.hero-title--long {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}

.page-hero .hero-subtitle {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.5;
  color: var(--re-tan);
  max-width: 720px;
  margin: 0 auto;
  font-weight: 400;
}





/* === _walk.css === */
/* ---------- Walk Mumbai Editorial Map Dashboard ---------- */

/* Walk Mumbai Hero spacing matches standard page-hero heights */

/* Expand container specifically for walk page map layout on desktop */
@media (min-width: 1200px) {
  .walk-mumbai-main {
    max-width: 1368px !important;
  }
  .heritage-map-dashboard {
    grid-template-columns: 260px 1fr 280px !important;
    gap: 32px !important;
  }
  .main-viewport {
    max-width: 100% !important;
  }
}

.heritage-map-dashboard {
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  gap: 24px;
  margin: 20px auto 40px auto;
  max-width: 1200px;
  align-items: start;
}

.map-sidebar-left,
.map-sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.map-center-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.map-main-title {
  font-family: var(--font-headline);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.1em;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 4px;
}

.map-main-subtitle {
  font-family: var(--font-headline);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--bronze);
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.map-main-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 480px;
  margin-bottom: 24px;
}

.map-viewport {
  width: 100%;
  position: relative;
  box-shadow: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #D7E5E2;
}

.main-viewport {
  max-width: 500px;
}

.inset-viewport {
  max-width: 100%;
}

.map-editorial-box {
  background: #fdfbf7;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink);
}

.map-editorial-box h3,
.map-editorial-box h2 {
  font-family: var(--font-headline);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--teal);
  margin-top: 0;
  margin-bottom: 12px;
  text-transform: none;
  font-style: italic;
  letter-spacing: 0.02em;
  border-bottom: 1.5px solid var(--border);
  padding-bottom: 6px;
}

.map-editorial-box p {
  margin: 0 0 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
}
.map-editorial-box p:last-child {
  margin-bottom: 0;
}

/* Specs Table */
.specs-table {
  width: 100%;
  border-collapse: collapse;
}
.specs-table td {
  padding: 6px 0;
  font-size: 0.8rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
}
.specs-table td:first-child {
  font-weight: 600;
  color: var(--muted);
  width: 40%;
}
.specs-table td:last-child {
  color: var(--ink);
}

/* Legend */
.legend-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legend-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
}
.legend-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}
.marker-swatch {
  background: var(--bronze);
  color: #fff;
  border: 1px solid #fff;
}
.anchor-swatch {
  width: 6px;
  height: 6px;
  background: #262421;
  border: 1px solid #fff;
  margin-left: 6px;
  margin-right: 6px;
}
.leader-swatch {
  width: 18px;
  height: 0;
  border-top: 1px dashed #262421;
  border-radius: 0;
}
.legend-line {
  display: inline-block;
  width: 18px;
  height: 2px;
  flex-shrink: 0;
}
.road-major {
  background: #beb4a5;
  height: 2px;
}
.road-secondary {
  background: #e2dacf;
  height: 1px;
}
.rail-line {
  border-top: 2px dashed #a2988e;
  height: 0;
}
.park-swatch {
  background: var(--map-park, #DDE5CF);
  border-radius: var(--radius);
}
.water-swatch {
  background: var(--map-sea, #D7E5E2);
  border-radius: var(--radius);
}

/* Insets specific scale bar (surveyor alternating pattern) */
.inset-scale {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 10px;
  font-family: monospace;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.inset-scale::before {
  content: "";
  display: inline-block;
  width: 60px;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--muted), var(--muted) 10px, transparent 10px, transparent 20px);
  border: 1px solid var(--muted);
  margin-right: 6px;
}

/* SVG Vector base map styling */
.heritage-map {
  display: block;
  width: 100%;
  height: auto;
}
.heritage-map .map-landmass {
  transition: fill 0.3s ease;
}
.heritage-map .map-park {
  transition: fill 0.3s ease;
}
.heritage-map .map-road {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.heritage-map .map-rail {
  stroke-linecap: round;
}
.heritage-map .map-label {
  pointer-events: none;
  font-size: 8px;
  opacity: 0.75;
}
.heritage-map .map-leader-line {
  pointer-events: none;
}
.heritage-map .map-anchor {
  pointer-events: none;
}

/* Vector Heritage Illustrations Overlay */
.heritage-map .map-illustration path,
.heritage-map .map-illustration rect,
.heritage-map .map-illustration circle,
.heritage-map .map-illustration line {
  stroke: var(--bronze);
  stroke-width: 0.8px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.heritage-map .map-marker-group {
  cursor: pointer;
}
.heritage-map .map-marker-bg {
  transition: r 0.25s cubic-bezier(0.22, 1, 0.36, 1), fill 0.2s ease;
}
.heritage-map .map-marker-group:hover .map-marker-bg {
  r: 16px;
  fill: var(--teal);
}
.heritage-map .map-marker-label {
  pointer-events: none;
  font-size: 14px;
  font-weight: 700;
  font-family: Georgia, serif;
  fill: #47382B;
  stroke: #F7F2E8; /* blend background text-halo perfectly with landmass */
  stroke-width: 3px;
  paint-order: stroke;
  transition: opacity 0.2s ease;
  user-select: none;
}

/* Geographic Control Table */
.map-bottom-table {
  grid-column: 1 / -1;
  background: transparent;
  border: none;
  padding: 30px 0 0 0;
  margin-top: 20px;
  border-top: 1.5px solid var(--border);
}
.map-bottom-table h3 {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--bronze);
  margin-top: 0;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: none;
  padding-bottom: 0;
}
.table-container {
  overflow-x: auto;
}
.control-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-align: left;
}
.control-table th {
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  padding: 10px 12px;
  border: none;
  border-bottom: 1.5px solid var(--border);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
.control-table td {
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid rgba(227, 220, 207, 0.4);
  color: var(--ink);
}
.control-table tr:nth-child(even) {
  background: rgba(243, 238, 228, 0.15);
}
.control-table tr:hover {
  background: rgba(243, 238, 228, 0.4);
}
.conf-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  border: 1.2px solid currentColor;
}
.conf-high {
  background: transparent;
  color: var(--map-green, #2e6930);
}
.conf-medium {
  background: transparent;
  color: #8f6800; /* Deepened amber for WCAG AA 4.55:1 contrast */
}

.map-illustration-raster {
  opacity: 0.45 !important;
}

/* Responsive Maps Stacking */
@media (max-width: 1199px) {
  .heritage-map-dashboard {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
  .map-sidebar-left {
    order: 2;
  }
  .map-center-area {
    order: 1;
  }
  .map-sidebar-right {
    order: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .map-bottom-table {
    order: 4;
  }
}

@media (max-width: 767px) {
  .heritage-map-dashboard {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 16px !important;
  }
  .map-sidebar-left {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .map-center-area {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
  }
  .main-viewport {
    max-width: 100% !important;
  }
  .map-sidebar-right {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .map-bottom-table {
    order: 4 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 0 0 0 !important;
  }
  .control-table th, 
  .control-table td {
    padding: 8px 6px !important;
    font-size: 0.7rem !important;
  }
}

.walk-layout {
  display: block;
}

.stop-list {
  margin: 40px 0;
}

.stop {
  max-width: 480px;
  margin: 0 auto;
  scroll-margin-top: 98px; /* Offset to prevent sticky site header from covering stop headings */
}

.stop-meta {
  text-align: center;
  margin-bottom: 8px;
}

.stop-number-display {
  font-family: var(--font-headline);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--bronze);
  letter-spacing: 0.05em;
  display: block;
}

.stop-title {
  font-family: var(--font-headline);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 24px;
  line-height: 1.25;
}

.stop p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--re-charcoal); /* B-01 fix: --charcoal does not exist; correct token is --re-charcoal */
  margin-top: 0;
  margin-bottom: 16px;
  text-align: left;
}

.stop .built-media-framed {
  margin: 0 auto 24px;
}

.stop .built-photo-caption {
  padding-top: 8px;
  margin: 0;
  text-align: center;
}

.stop .built-photo-credit {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  line-height: 1.4;
  color: var(--re-muted);
  display: block;
}

/* Callout formatting matching .honor-significance aesthetics */
.stop .callout {
  background: var(--paper-dark);
  border-top: 2px solid var(--re-oxblood);
  padding: 16px 20px;
  margin: 24px 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

.stop .callout-kicker {
  font-family: var(--font-headline);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bronze);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 6px;
}

.stop .callout p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--re-charcoal); /* B-01 fix: --charcoal does not exist; correct token is --re-charcoal */
}

.stop .callout-source {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted);
  margin-top: 8px;
}

/* Understated Google Maps Link */
.stop-location-wrap {
  text-align: center;
  margin-top: 24px;
}

.stop-location-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--teal);
  text-decoration: none;
  transition: color 0.2s ease;
}

.stop-location-link svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.stop-location-link:hover {
  color: var(--bronze);
  text-decoration: underline;
}

/* Sequential Stop Navigation Footer */
.stop-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  margin-top: 36px;
  padding-top: 24px;
}

.stop-nav-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  max-width: 45%;
}

.stop-nav-link.prev {
  text-align: left;
  align-items: flex-start;
}

.stop-nav-link.next {
  text-align: right;
  align-items: flex-end;
  margin-left: auto; /* Push single NEXT link to the right edge if there is no PREVIOUS link */
}

.stop-nav-kicker {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.stop-nav-title {
  font-family: var(--font-headline);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--teal);
  margin-top: 4px;
  text-transform: uppercase;
  line-height: 1.25;
  transition: color 0.2s ease;
}

.stop-nav-link:hover .stop-nav-title {
  color: var(--bronze);
}

@media (max-width: 991px) {
  .built-section-body {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .built-media-framed {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }

}

.honor-location {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.honor-photo-frame {
  margin-bottom: 18px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-dark);
}

.honor-photo-frame.aspect-16-9 {
  aspect-ratio: 16/9;
}

.honor-photo-frame.aspect-3-4 {
  aspect-ratio: 3/4;
}

.honor-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.honor-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-dark);
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
  text-align: center;
  padding: 16px;
  border: 1px dashed var(--border);
}

.honor-narrative {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 16px;
}

.honor-significance {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
  background: var(--paper-dark);
  padding: 12px 16px;
  border-top: 2px solid var(--re-oxblood);
  border-radius: 0 0 var(--radius) var(--radius);
  margin-bottom: 16px;
  font-style: italic;
}

.honor-meta {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--muted);
}

.honor-spelling-label {
  font-size: 0.75rem;
  color: var(--muted);
}

.honor-spelling-pill {
  background: var(--paper-dark);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 500;
  border: 1px solid var(--border);
}

/* ==========================================================================
   NANA SHANKARSHET — HOMEPAGE DESIGN SYSTEM v2
   Editorial heritage / modern Bombay

   Scope: body.redesign-homepage only.
   The legacy stylesheet above remains available to the site's sub-pages.
   ========================================================================== */

.redesign-homepage {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  display: block;
  background: var(--re-paper);
  color: var(--re-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.redesign-homepage *,
.redesign-homepage *::before,
.redesign-homepage *::after {
  box-sizing: border-box;
}

.redesign-homepage a {
  color: inherit;
  text-decoration: none;
}

.redesign-homepage a:hover {
  text-decoration: none;
}

.redesign-homepage img {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   ROW 06 — WALK MUMBAI
   -------------------------------------------------------------------------- */

.redesign-homepage #row-06 {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 42% 58%;
  background: var(--re-dark) !important;
  border-top: 0 !important;
  overflow: hidden;
}

.redesign-homepage .re-walk-title {
  position: absolute;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  top: 30px;
  width: auto;
  text-align: center !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 2.2px !important;
  color: var(--re-gold) !important;
  z-index: 10;
}

.redesign-homepage .re-walk-map-container {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.redesign-homepage #re-walk-map {
  width: 100%;
  height: 100%;
  background: var(--re-paper);
}

.redesign-homepage .re-walk-map-container::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 130px;
  height: 100%;
  background: linear-gradient(to right, transparent, var(--re-dark));
  z-index: var(--z-overlay);
  pointer-events: none;
}

.redesign-homepage .re-map-marker-leaflet {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: var(--re-paper) !important;
  border: 1px solid var(--re-oxblood) !important;
  color: var(--re-oxblood) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.redesign-homepage .re-map-marker-leaflet:hover,
.redesign-homepage .re-map-marker-leaflet.active {
  background: var(--re-oxblood) !important;
  color: var(--re-paper) !important;
}

.redesign-homepage .re-walk-dark-panel {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: 100%;
  background: var(--re-dark);
  color: var(--re-paper) !important;
  z-index: 1;
}

.redesign-homepage .re-map-marker {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--re-paper);
  border: 1px solid var(--re-oxblood);
  color: var(--re-oxblood);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 5;
  transition: all 0.2s ease;
  padding: 0;
}

.redesign-homepage .re-map-marker:hover,
.redesign-homepage .re-map-marker.active {
  background: var(--re-oxblood);
  color: var(--re-paper);
}

.redesign-homepage .re-compass {
  position: absolute;
  right: 24px;
  bottom: 24px;
  color: var(--re-gold);
  opacity: 0.7;
  z-index: 4;
  pointer-events: none;
}

.redesign-homepage .re-walk-stops-list {
  position: absolute;
  left: 52px;
  top: 86px;
  width: 245px;
  height: 285px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* Custom scrollbar for stops list */
.redesign-homepage .re-walk-stops-list::-webkit-scrollbar {
  width: 3px;
}
.redesign-homepage .re-walk-stops-list::-webkit-scrollbar-track {
  background: transparent;
}
.redesign-homepage .re-walk-stops-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}
.redesign-homepage .re-walk-stops-list::-webkit-scrollbar-thumb:hover {
  background: var(--re-gold);
}

/* Vertical connector timeline line */
.redesign-homepage .re-walk-stops-list::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 1;
}

.redesign-homepage .re-walk-stop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 6px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  width: 100%;
  position: relative;
  z-index: 2;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 4px;
  font-family: var(--font-body);
}

.redesign-homepage .re-stop-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #171513;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #a59b8e;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.25s ease;
  z-index: 3;
}

.redesign-homepage .re-stop-name {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: #a59b8e;
  transition: all 0.25s ease;
}

.redesign-homepage .re-walk-stop-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.redesign-homepage .re-walk-stop-item:hover .re-stop-name {
  color: var(--re-paper);
}

.redesign-homepage .re-walk-stop-item.active {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.08);
}

.redesign-homepage .re-walk-stop-item.active .re-stop-num {
  background: var(--re-gold);
  border-color: var(--re-gold);
  color: var(--re-dark);
  box-shadow: 0 0 8px rgba(197, 160, 89, 0.3);
}

.redesign-homepage .re-walk-stop-item.active .re-stop-name {
  color: var(--re-paper);
  font-weight: 700;
}

.redesign-homepage .re-walk-photo-wrap {
  left: 315px;
  top: 110px;
  width: 220px;
  height: 190px;
  background: var(--re-paper-soft);
  padding: 7px 7px 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transform: rotate(-1.5deg);
}

.redesign-homepage .re-walk-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--re-paper);
}

.redesign-homepage .re-walk-ribbon::before {
  background: var(--re-oxblood);
}

.redesign-homepage .re-walk-details {
  left: 555px;
  top: 105px;
  width: calc(100% - 610px);
  height: 235px;
  overflow: hidden;
}

/* JS toggles .active — without this CSS, ALL 12 panels stack simultaneously */
.redesign-homepage .re-walk-detail-item {
  display: none;
}
.redesign-homepage .re-walk-detail-item.active {
  display: block;
}

.redesign-homepage .re-detail-title {
  margin-bottom: 12px;
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--re-paper);
}

.redesign-homepage .re-detail-text {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: #dcd6cd;
}

.redesign-homepage .re-detail-link {
  padding: 7px 0 5px;
  border: 0;
  border-bottom: 1px solid rgba(244, 235, 221, 0.55);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.13em;
  color: var(--re-paper);
}

.redesign-homepage .re-detail-link:hover {
  border-color: var(--re-gold);
  background: transparent;
  color: var(--re-gold);
}

/* --------------------------------------------------------------------------
   ROW 07 — BOMBAY THEN / MUMBAI NOW
   -------------------------------------------------------------------------- */

.redesign-homepage #row-07 {
  position: relative;
  z-index: 5;
  background: var(--re-paper);
  border-top: 1px solid var(--re-border) !important;
  overflow: hidden;
  padding: 82px 64px 56px;
}

.redesign-homepage .re-thennow-title {
  position: absolute;
  top: 28px;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto;
  text-align: center !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 2.2px !important;
  color: var(--re-oxblood) !important;
  text-transform: uppercase;
}

.redesign-homepage .re-slider-container {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: 500px;
  overflow: hidden;
  border: 1px solid var(--re-border);
  box-shadow: var(--re-shadow);
  container-type: inline-size;
  user-select: none;
  cursor: ew-resize;
}

/* Smooth autonomous demonstration peek and tap-glide */
.redesign-homepage .re-slider-container.re-slider-animating .re-slider-clip,
.redesign-homepage .re-slider-container.re-slider-animating .re-slider-divider {
  transition: width 0.55s cubic-bezier(0.25, 1, 0.5, 1), left 0.55s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.redesign-homepage .re-slider-img {
  width: 100cqw;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
  pointer-events: none;
}

.redesign-homepage .re-slider-clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  transition: none;
}

.redesign-homepage .re-slider-clip .re-slider-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100cqw;
  height: 100%;
}

.redesign-homepage .re-slider-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--re-oxblood);
  z-index: 3;
  cursor: ew-resize;
  transform: translateX(-50%);
  transition: none;
}

/* Expanded invisible touch hit zone for mobile thumb ergonomics */
.redesign-homepage .re-slider-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 72px;
  transform: translateX(-50%);
  cursor: ew-resize;
}

.redesign-homepage .re-slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  background: var(--re-oxblood);
  border: 2px solid var(--re-paper);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  cursor: ew-resize;
  transition: transform 180ms ease, box-shadow 180ms ease;
  animation: handle-breathing-pulse 3.2s infinite ease-out;
}

/* Component B: Subtle breathing pulse */
@keyframes handle-breathing-pulse {
  0% {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(140, 48, 40, 0.6);
  }
  50% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 0 16px rgba(140, 48, 40, 0);
  }
  100% {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(140, 48, 40, 0);
  }
}

.redesign-homepage .re-slider-handle:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Auto-extinguish pulse once interacted */
.redesign-homepage .re-slider-container.re-slider-interacted .re-slider-handle {
  animation: none !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

/* Floating affordance pill cue above handle */
.redesign-homepage .re-slider-handle-pill {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(25, 23, 21, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #f7ede2;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(242, 229, 211, 0.25);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  transition: opacity 250ms ease, transform 250ms ease;
  z-index: 5;
}

/* Auto-extinguish floating pill once interacted */
.redesign-homepage .re-slider-container.re-slider-interacted .re-slider-handle-pill {
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  pointer-events: none;
}

.redesign-homepage .re-slider-arrows {
  color: var(--re-paper);
  display: block;
}

.redesign-homepage .re-slider-label {
  position: absolute;
  top: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  background: rgba(33, 31, 27, 0.78);
  padding: 5px 9px;
  z-index: 4;
  color: var(--re-paper);
  text-transform: uppercase;
  pointer-events: none;
}

.redesign-homepage .re-slider-label.left {
  left: 16px;
}

.redesign-homepage .re-slider-label.right {
  right: 16px;
}

.redesign-homepage .re-slider-instruction {
  position: absolute;
  bottom: 20px;
  left: 64px;
  width: auto;
  text-align: left;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--re-charcoal);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   Leaflet Map UI Font Overrides (Design System Compliance)
   ========================================================================== */
.leaflet-container {
  font-family: var(--font-body) !important;
}
.leaflet-container a,
.leaflet-container button {
  font-family: inherit !important;
}
.re-map-marker-leaflet:focus-visible,
.re-map-marker:focus-visible {
  border-radius: 50% !important;
  outline-offset: 2px !important;
}

.redesign-homepage .re-map-tiles {
  filter: grayscale(100%) sepia(10%) brightness(95%) contrast(95%);
  -webkit-filter: grayscale(100%) sepia(10%) brightness(95%) contrast(95%);
}

/* ==========================================================================
   Walk Mumbai - Quick-Jump Shortcut Bar (Sprint 2)
   ========================================================================== */
.walk-quick-jump-bar {
  display: flex;
  justify-content: center;
  margin: 16px auto 28px auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.walk-quick-jump-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #faf8f4;
  border: 1px solid var(--re-border);
  border-radius: 999px;
  padding: 10px 22px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--re-oxblood);
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(48, 36, 26, 0.04);
  transition: all 0.2s ease;
}

.walk-quick-jump-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.walk-quick-jump-btn:hover {
  background-color: var(--re-oxblood);
  color: var(--re-paper-soft, #fbf8f1);
  border-color: var(--re-oxblood);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(140, 48, 40, 0.2);
}

.walk-quick-jump-btn:focus-visible {
  outline: 2px solid var(--re-oxblood);
  outline-offset: 2px;
}

.walk-quick-jump-arrow {
  font-weight: 700;
  display: inline-block;
  transition: transform 0.2s ease;
}

.walk-quick-jump-btn:hover .walk-quick-jump-arrow {
  transform: translateY(2px);
}



/* === _cards.css === */
/* ==========================================================================
   Premium Mockup Dashboard Styles (What He Built)
   Faithful to the approved mockup: large sepia-frame photo, bronze kicker
   with ornamental rules, dark verified badge, compact FOR SCALE pill,
   serif narrative, and oval READ button.
   ========================================================================== */

/* ---- Page header (portrait + title) ---- */
.built-header {
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 32px;
}

.built-header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  max-width: 960px;
  margin: 0 auto 24px;
}

.built-header-side-text {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--type-supporting);
  font-style: italic;
  color: var(--re-charcoal);
  line-height: 1.5;
  max-width: 280px;
}

.built-header-side-text.left {
  text-align: right;
}

.built-header-side-text.right {
  text-align: left;
}

.built-avatar-container {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--bronze);
  background: #ede6d8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 5px #f0e8d8;
}

.built-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Pillar section list ---- */
.built-list {
  margin: 0;
}

.built-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
  padding: 56px 0;
  border-top: 1px solid var(--border);
}

/* Canonical Archival Filigree Divider Component */
.filigree-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: clamp(36px, 5vw, 54px) auto;
  pointer-events: none;
  user-select: none;
}

/* Compact variant for hero headers, avatar medallions, and tight contexts */
.filigree-divider--compact,
.built-header .filigree-divider {
  margin: 16px auto 24px;
}

.filigree-divider svg {
  display: block;
  width: 200px;
  max-width: 100%;
  height: 24px;
  overflow: visible;
  transition: opacity 0.2s ease;
}

@media (max-width: 639px) {
  .filigree-divider {
    margin: clamp(28px, 6vw, 40px) auto;
  }
  .filigree-divider svg {
    width: 170px;
    height: 20px;
  }
}

/* Editorial Orientation Lead Block */
.built-orientation-lead {
  max-width: var(--container-width-narrow);
  margin: 0 auto 40px;
  padding: 0 16px;
  text-align: center;
}

.built-orientation-text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.7;
  color: var(--re-charcoal);
  margin: 0;
}



/* Styled Archival Image Placeholders */
.built-photo-placeholder {
  width: 100%;
  height: 250px;
  background: linear-gradient(135deg, #eadfc9 0%, #d4c4a8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--font-headline);
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 0.05em;
  border: 1px solid var(--border);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
  text-align: center;
  padding: 16px;
}

.built-section:first-child {
  border-top: none;
  padding-top: 40px;
}

/* ---- Kicker line (— Health —) with ornamental side rules ---- */
.built-section-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--bronze);
  margin-bottom: 8px;
}

.built-section-kicker::before,
.built-section-kicker::after {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  background: #c4b295;
}

.built-section-header {
  text-align: center;
  margin-bottom: 32px;
}

.built-section-headline {
  font-family: var(--font-headline);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
  margin: 0 0 6px;
  line-height: 1.2;
  text-transform: uppercase;
}

.built-section-subhead {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

/* ---- Two-column body: photo left, content right ---- */
.built-section-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* ---- Framed photo / placeholder (left column) ---- */
.built-media-framed {
  background: #faf6ee;
  border: 1px solid #c4b295;
  border-radius: 2px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

button.photo-gallery-item {
  display: block;
  width: 100%;
  text-align: inherit;
  font-family: inherit;
  color: inherit;
  background: #faf6ee;
  border: 1px solid #c4b295;
  cursor: pointer;
  padding: 12px;
}

.built-photo-container {
  border: 1px solid #1c1a17;
  overflow: hidden;
  aspect-ratio: 16 / 9; /* Standard Widescreen */
  background-color: var(--paper); /* Matting background */
  display: flex;
  align-items: center;
  justify-content: center;
}

.built-photo {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Fit without cropping */
  display: block;
}

.built-photo-caption {
  padding: 12px 0 0;
  font-family: var(--font-body);
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

.built-photo-caption strong {
  font-size: var(--type-caption-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}

.built-photo-caption span {
  font-size: var(--type-caption);
  color: var(--muted);
  display: block;
}

/* ---- Right column content ---- */
.built-section-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Verified badge row layout */
.built-verified-band {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  gap: 8px;
}

/* Narrative text */
.built-narrative {
  font-family: var(--font-body);
  font-size: var(--type-card-summary);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 16px;
}

.built-narrative strong {
  font-weight: 700;
}

/* FOR SCALE pill horizontal layout */
.built-scale-capsule {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--re-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background-color: var(--re-paper-soft);
  margin: 24px 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  gap: 10px;
}

.built-scale-tag {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #faf6ee;
  background-color: var(--re-gold-text);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

/* Tag-type color overrides via data-tag attribute */
.built-scale-tag[data-tag="still-standing"]     { background-color: #2d6a4f; }
.built-scale-tag[data-tag="against-the-odds"]   { background-color: #7f1d1d; }
.built-scale-tag[data-tag="for-scale"]          { background-color: var(--re-gold-text); }
.built-scale-tag[data-tag="first-in-history"]   { background-color: #78350f; }
.built-scale-tag[data-tag="what-he-knew"]        { background-color: #78350f; }

.built-scale-text {
  font-family: var(--font-body);
  font-size: var(--type-caption-desc);
  font-weight: 500;
  text-transform: none;
  color: var(--ink);
  margin-left: 0;
  letter-spacing: 0.01em;
  line-height: 1.6;
}

/* READ THE FULL RESEARCH button */
.btn-mockup,
.btn-bronze-outline {
  display: inline-block;
  border: 1px solid var(--bronze);
  color: var(--bronze);
  font-family: var(--font-body);
  font-size: var(--type-control);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 9px 24px;
  border-radius: 100px;
  text-decoration: none;
  background-color: transparent;
  transition: all 0.18s ease;
  margin-top: 0;
}

.btn-mockup:hover,
.btn-bronze-outline:hover {
  background-color: var(--bronze);
  color: var(--re-paper-soft);
  text-decoration: none;
}

.btn-mockup:active,
.btn-bronze-outline:active {
  transform: scale(0.97);
}

.btn-mockup:disabled,
.btn-bronze-outline:disabled,
.btn-mockup.disabled,
.btn-bronze-outline.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
  .built-header-row {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .built-header-side-text.left,
  .built-header-side-text.right {
    text-align: center;
  }
  .built-section-body {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
/* --------------------------------------------------------------------------
   ROW 05 — WHAT HE BUILT (Sprint 2 - Option B: 5 Things He Built You Use Daily)
   -------------------------------------------------------------------------- */

.redesign-homepage #row-05 {
  position: relative;
  z-index: 5;
  background: var(--re-paper);
  border-top: 1px solid var(--re-border) !important;
  overflow: visible;
  padding: 56px 64px 60px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.redesign-homepage .re-built-header-block {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 26px;
}

.redesign-homepage .re-built-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: var(--re-oxblood);
  margin-bottom: 8px;
}

.redesign-homepage .re-built-heading {
  margin: 0 auto 10px;
  font-family: var(--font-headline);
  font-size: clamp(26px, 2.4vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--re-ink);
}

.redesign-homepage .re-built-subhead {
  margin: 0 auto;
  max-width: 680px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--re-charcoal);
}

.redesign-homepage .re-built-card {
  position: relative;
  top: auto;
  left: auto !important;
  width: auto;
  height: auto;
  min-height: 450px;
  min-width: 0;
  background: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  box-shadow: var(--re-shadow);
  display: flex;
  flex-direction: column;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.redesign-homepage .re-built-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(48, 36, 26, 0.12);
  border-color: rgba(140, 48, 40, 0.35);
}

.redesign-homepage .re-card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.redesign-homepage .re-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(25, 23, 21, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #f7ede2;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius, 4px);
  border: 1px solid rgba(242, 229, 211, 0.24);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.redesign-homepage .re-card-badge svg {
  width: 12px;
  height: 12px;
  color: var(--re-gold);
  flex-shrink: 0;
}

.redesign-homepage .re-card-seal {
  position: absolute;
  top: 163px;
  left: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fbf8f2, var(--re-paper-soft));
  border: 1px solid var(--re-gold);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.redesign-homepage .re-built-card:hover .re-card-seal {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(182, 134, 86, 0.28);
}

.redesign-homepage .re-seal-roman {
  font-family: var(--font-headline);
  font-size: 15px;
  font-weight: 700;
  color: var(--re-oxblood);
  letter-spacing: 0.04em;
  line-height: 1;
  user-select: none;
}

.redesign-homepage .re-card-content {
  padding: 24px 15px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--re-paper-soft);
  border-top: 1px solid var(--re-border);
}

.redesign-homepage .re-card-title {
  margin: 0 0 8px;
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--re-ink);
  text-transform: none;
}

.redesign-homepage .re-card-toggle-group {
  display: inline-flex;
  align-items: center;
  background: rgba(140, 48, 40, 0.07);
  padding: 2px;
  border-radius: 999px;
  border: 1px solid rgba(140, 48, 40, 0.16);
  margin-bottom: 10px;
  width: fit-content;
}

.redesign-homepage .re-card-toggle-btn {
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--re-oxblood);
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.redesign-homepage .re-card-toggle-btn.active {
  background: var(--re-oxblood);
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(140, 48, 40, 0.28);
}

.redesign-homepage .re-card-toggle-btn:focus-visible {
  outline: 2px solid var(--re-oxblood);
  outline-offset: 1px;
}

.redesign-homepage .re-card-spotlight {
  position: relative;
  min-height: 60px;
  margin-bottom: 8px;
}

.redesign-homepage .re-spotlight-pane {
  display: none;
  opacity: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  color: var(--re-ink);
  transition: opacity 180ms ease;
}

.redesign-homepage .re-spotlight-pane.active {
  display: block;
  opacity: 1;
}

.redesign-homepage .re-spotlight-today {
  font-weight: 500;
}

.redesign-homepage .re-spotlight-origin {
  color: var(--re-dark-soft);
}

.redesign-homepage .re-card-desc {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--re-charcoal);
  border-top: 1px dashed rgba(109, 96, 79, 0.25);
  padding-top: 8px;
}

.redesign-homepage .re-card-link {
  margin-top: auto;
  width: fit-content;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--re-oxblood);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--re-oxblood);
}

.redesign-homepage .re-card-link:hover {
  opacity: 1;
}

/* Static and template button standardizations */
.btn {
  display: inline-block;
  padding: var(--btn-padding);
  border-radius: var(--radius);
  font-weight: var(--btn-font-weight);
  font-size: var(--type-button);
  border: 2px solid transparent;
  cursor: pointer;
  min-height: var(--btn-min-height);
  line-height: 1.2;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 100ms ease;
  text-decoration: none;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn:focus-visible,
.btn-mockup:focus-visible,
.btn-bronze-outline:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid var(--re-gold);
  outline-offset: 4px;
}

.redesign-homepage .btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border: none;
}

.redesign-homepage .btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-color);
  text-decoration: none;
}

.redesign-homepage .btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border: 2px solid var(--btn-secondary-border);
}

.redesign-homepage .btn-secondary:hover {
  background: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-color-hover);
  text-decoration: none;
}

/* Card and Frame layout standardisation */
.card {
  background: var(--re-paper-soft);
  color: var(--re-ink);
  border: 1px solid var(--re-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--re-shadow);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(48, 36, 26, 0.1);
}

.built-media-framed {
  background: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--re-shadow);
}

.built-photo-container {
  border: 1px solid var(--re-border) !important;
  border-radius: var(--radius) !important;
}

/* Scoped Media Page Resource/Bibliography card styles */
.redesign-homepage .media-resource-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: var(--container-width-narrow);
  margin: 0 auto;
}
.redesign-homepage .media-resource-card {
  padding: 24px;
}
.redesign-homepage .media-resource-type-kicker {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--re-gold-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.redesign-homepage .media-resource-title {
  font-family: var(--font-headline);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--re-ink);
  margin-bottom: 6px;
}
.redesign-homepage .media-resource-title a {
  color: var(--bronze);
  text-decoration: none;
}
.redesign-homepage .media-resource-title a:hover {
  text-decoration: underline;
}
.redesign-homepage .media-resource-author {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--re-ink);
  margin-bottom: 4px;
}
.redesign-homepage .media-resource-meta {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--re-muted);
  font-weight: 500;
  margin-bottom: 4px;
}
.redesign-homepage .media-resource-publisher {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--re-muted);
  font-weight: 500;
  margin-bottom: 16px;
}
.redesign-homepage .media-resource-section-kicker {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--re-oxblood);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  border-top: 1px solid var(--re-border);
  padding-top: 12px;
  margin-top: 12px;
}
.redesign-homepage .media-resource-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--re-charcoal);
  margin: 0 0 16px 0;
}
.redesign-homepage .media-resource-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
}
.redesign-homepage .media-resource-actions a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 61, 58, 0.3);
  padding-bottom: 1px;
}
.redesign-homepage .media-resource-actions a:hover {
  color: var(--re-oxblood);
  border-bottom-color: var(--re-oxblood);
}

/* Category-specific visual accents */
.redesign-homepage .media-resource-card.category-biography {
  border-top: 3px solid var(--bronze);
}
.redesign-homepage .media-resource-card.category-biography .media-resource-type-kicker {
  color: var(--bronze);
}
.redesign-homepage .media-resource-card.category-reference {
  border-top: 3px solid var(--teal);
}
.redesign-homepage .media-resource-card.category-reference .media-resource-type-kicker {
  color: var(--teal);
}
.redesign-homepage .media-resource-card.category-research {
  border-top: 3px solid var(--re-oxblood);
}
.redesign-homepage .media-resource-card.category-research .media-resource-type-kicker {
  color: var(--re-oxblood);
}

/* Card with cover layout (surgically scoped) */
.redesign-homepage .media-resource-card.has-cover .media-resource-header-layout {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}
.redesign-homepage .media-resource-card.has-cover .media-resource-header-info {
  flex: 1;
}
.redesign-homepage .media-resource-card.has-cover .media-resource-cover-wrapper {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
}
.redesign-homepage .media-resource-card.has-cover .media-resource-cover {
  width: 180px;
  height: auto;
  aspect-ratio: auto;
  border-radius: var(--radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--re-border);
}

/* Mobile responsive styling for cover cards */
@media (max-width: 600px) {
  .redesign-homepage .media-resource-card.has-cover .media-resource-header-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .redesign-homepage .media-resource-card.has-cover .media-resource-cover-wrapper {
    justify-content: center;
    margin-bottom: 8px;
  }
  .redesign-homepage .media-resource-card.has-cover .media-resource-cover {
    width: 150px;
    margin: 0 auto;
  }
}

/* Scoped override to correct the pseudo-label for heritage table rows on mobile viewport */
@media (max-width: 767px) {
  .redesign-homepage .heritage-table td:nth-child(2)::before {
    content: "Category: " !important;
  }
}

/* Subsection header layout */
.redesign-homepage .built-subsection-header {
  max-width: var(--container-width-narrow);
  margin: 48px auto 24px;
  padding: 0 16px;
}
.redesign-homepage .built-subsection-headline {
  font-family: var(--font-headline);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--re-oxblood);
  border-bottom: 1.5px solid var(--re-border);
  padding-bottom: 8px;
  margin-top: 0;
  margin-bottom: 6px;
}
.redesign-homepage .built-subsection-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--re-muted);
  margin: 0;
}

/* Subsection 1: Archive comparison table styling on desktop */
.redesign-homepage .archive-table {
  width: 100%;
  max-width: var(--container-width-narrow);
  border-collapse: collapse;
  margin: 24px auto;
  background-color: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--re-shadow);
  overflow: hidden;
}
.redesign-homepage .archive-table th {
  background-color: rgba(196, 178, 149, 0.15);
  font-family: var(--font-headline);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--re-ink);
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--re-border);
  border-right: 1px solid var(--re-border);
}
.redesign-homepage .archive-table th:last-child {
  border-right: none;
}
.redesign-homepage .archive-table td {
  padding: 16px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--re-charcoal);
  border-bottom: 1px solid var(--re-border);
  border-right: 1px solid var(--re-border);
  vertical-align: top;
}
.redesign-homepage .archive-table td:last-child {
  border-right: none;
}
.redesign-homepage .archive-table tr:last-child td {
  border-bottom: none;
}
.redesign-homepage .archive-table tr:hover td {
  background-color: rgba(196, 178, 149, 0.04);
}
.redesign-homepage .archive-table td a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 600;
}
.redesign-homepage .archive-table td a:hover {
  color: var(--re-oxblood);
}
.redesign-homepage .archive-table td a:hover {
  border-bottom-color: var(--re-oxblood);
}
.redesign-homepage .archive-table .archive-nature {
  font-size: 0.82rem;
  color: var(--re-muted);
  font-style: italic;
  margin-top: 6px;
  line-height: 1.35;
}

/* Subsection 2: Debate editorial tiles grid layout */
.redesign-homepage .debate-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: var(--container-width-narrow);
  margin: 24px auto;
  padding: 0 16px;
}
.redesign-homepage .debate-tile {
  padding: 24px;
  border-top: 3px solid var(--re-oxblood);
  display: flex;
  flex-direction: column;
}
.redesign-homepage .debate-tile-period {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--re-gold-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.redesign-homepage .debate-tile-headline {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--re-ink);
  margin-top: 0;
  margin-bottom: 8px;
}
.redesign-homepage .debate-tile-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--re-charcoal);
  margin: 0 0 16px 0;
  flex-grow: 1;
}
.redesign-homepage .debate-tile-context {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--re-muted);
  font-weight: 500;
  border-top: 1px solid var(--re-border);
  padding-top: 12px;
  margin-top: auto;
}
.redesign-homepage .debate-tile-action {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 12px;
}
.redesign-homepage .debate-tile-action a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 61, 58, 0.3);
  padding-bottom: 1px;
}
.redesign-homepage .debate-tile-action a:hover {
  color: var(--re-oxblood);
  border-bottom-color: var(--re-oxblood);
}

/* Subsection 3: Access card grid layout */
.redesign-homepage .access-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: var(--container-width-narrow);
  margin: 24px auto;
  padding: 0 16px;
}
.redesign-homepage .access-card {
  padding: 24px;
  border-top: 3px solid var(--teal);
  display: flex;
  flex-direction: column;
}
.redesign-homepage .access-card-title {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--re-ink);
  margin-top: 0;
  margin-bottom: 8px;
}
.redesign-homepage .access-card-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--re-charcoal);
  margin: 0 0 16px 0;
  flex-grow: 1;
}
.redesign-homepage .access-card-terms {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--re-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  margin-top: auto;
}
.redesign-homepage .access-card-terms code {
  background-color: rgba(31, 61, 58, 0.05);
  color: var(--teal);
  padding: 2px 6px;
  border-radius: var(--radius);
  font-family: monospace;
  text-transform: none;
  font-weight: 400;
}
.redesign-homepage .access-card a.btn {
  align-self: flex-start;
  margin-top: 8px;
}

/* Media Card Grid & Cards Redesign */
.redesign-homepage .media-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 24px auto;
}

.redesign-homepage .media-card {
  display: flex;
  flex-direction: column;
  background-color: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(48, 36, 26, 0.03);
  transition: transform 0.2s, box-shadow 0.2s;
  height: 100%;
}

.redesign-homepage .media-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(48, 36, 26, 0.08);
}

.redesign-homepage .media-card-thumb-link {
  display: block;
  text-decoration: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background-color: #000;
}

.redesign-homepage .media-card-thumb {
  width: 100%;
  height: 100%;
  position: relative;
}

.redesign-homepage .media-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.redesign-homepage .media-card-thumb-link:hover .media-card-img {
  transform: scale(1.03);
}

.redesign-homepage .media-card-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 26, 23, 0.2);
  transition: background 0.2s;
}

.redesign-homepage .media-card-thumb-link:hover .media-card-play-overlay {
  background: rgba(28, 26, 23, 0.4);
}

.redesign-homepage .media-card-play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  color: var(--re-oxblood);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding-left: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s, background-color 0.2s;
}

.redesign-homepage .media-card-thumb-link:hover .media-card-play-btn {
  transform: scale(1.1);
  background-color: var(--re-oxblood);
  color: var(--re-paper-soft);
}

.redesign-homepage .media-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.redesign-homepage .media-card-type {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--teal);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.redesign-homepage .media-card-title {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--re-ink);
  margin: 0 0 8px 0;
}

.redesign-homepage .media-card-meta {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--re-charcoal);
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.redesign-homepage .media-card-sep {
  color: var(--re-border);
}

.redesign-homepage .media-card-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--re-charcoal);
  margin: 0 0 16px 0;
  flex-grow: 1;
}

.redesign-homepage .media-card-action {
  margin-top: auto;
  align-self: flex-start;
}

.redesign-homepage .media-card-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}

.redesign-homepage .media-card-actions-row .media-card-action {
  margin-top: 0;
}

/* Card-specific accent top-borders for text-only cards */
.redesign-homepage .media-card.type-audio {
  border-top: 3px solid var(--teal);
}
.redesign-homepage .media-card.type-theatre {
  border-top: 3px solid #B68656;
}
.redesign-homepage .media-card.type-lecture {
  border-top: 3px solid var(--teal);
}

/* Social & Digital Discovery Grid & Cards */
.redesign-homepage .social-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 24px auto;
}

.redesign-homepage .social-card {
  display: flex;
  flex-direction: column;
  background-color: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(48, 36, 26, 0.03);
  transition: transform 0.2s, box-shadow 0.2s;
  height: 100%;
}

.redesign-homepage .social-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(48, 36, 26, 0.08);
}

.redesign-homepage .social-card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.redesign-homepage .social-card-type {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--teal);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.redesign-homepage .social-card-title {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--re-ink);
  margin: 0 0 8px 0;
}

.redesign-homepage .social-card-meta {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--re-charcoal);
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.redesign-homepage .social-card-sep {
  color: var(--re-border);
}

.redesign-homepage .social-card-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--re-charcoal);
  margin: 0 0 20px 0;
  border-bottom: 1px dashed var(--re-border);
  padding-bottom: 16px;
}

.redesign-homepage .social-sub-section {
  margin-bottom: 20px;
}

.redesign-homepage .social-sub-section:last-of-type {
  margin-bottom: 0;
}

.redesign-homepage .social-sub-title {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--re-oxblood);
  margin: 0 0 10px 0;
  text-transform: none;
}

.redesign-homepage .social-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.redesign-homepage .social-list li {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--re-charcoal);
  margin-bottom: 8px;
  padding-left: 12px;
  position: relative;
}

.redesign-homepage .social-list li:last-child {
  margin-bottom: 0;
}

.redesign-homepage .social-list li::before {
  content: "•";
  color: var(--re-border);
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

.redesign-homepage .social-handle {
  color: var(--teal);
  font-weight: 600;
  font-size: 0.85rem;
}

.redesign-homepage .social-plat-tag {
  color: var(--re-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Tag Cloud & Tags */
.redesign-homepage .search-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.redesign-homepage .search-group h5 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--re-muted);
  margin: 0 0 6px 0;
}

.redesign-homepage .tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.redesign-homepage .search-tag {
  background-color: rgba(31, 61, 58, 0.05);
  color: var(--teal);
  padding: 4px 10px;
  border-radius: var(--radius);
  font-family: monospace;
  font-size: 0.8rem;
  font-weight: 500;
  display: inline-block;
  white-space: nowrap;
}

.redesign-homepage .search-tag.variant {
  background-color: rgba(48, 36, 26, 0.04);
  color: var(--re-charcoal);
  font-family: var(--font-body);
  font-size: 0.82rem;
  border-radius: 4px;
}

/* Stories list styling */
.redesign-homepage .stories-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.redesign-homepage .story-item h5,
.redesign-homepage .story-item h6 {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--re-ink);
  margin: 0 0 4px 0;
}

.redesign-homepage .story-item p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--re-charcoal);
  margin: 0;
}

/* Section accent borders */
.redesign-homepage .social-card.type-audio {
  border-top: 3px solid var(--teal);
}
.redesign-homepage .social-card.type-theatre {
  border-top: 3px solid #B68656;
}

/* Featured Podcast Block */
.redesign-homepage .podcast-featured-block {
  display: flex;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto 48px;
  align-items: flex-start;
  background-color: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 4px 12px rgba(48, 36, 26, 0.03);
}

.redesign-homepage .podcast-featured-image-wrap {
  flex: 0 0 280px;
  width: 280px;
  height: 280px;
  border-radius: var(--radius);
  border: 1px solid var(--re-border);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(48, 36, 26, 0.05);
  background-color: #fff;
}

.redesign-homepage .podcast-featured-image {
  width: 100%;
  height: 100%;
  display: block;
}

.redesign-homepage .podcast-featured-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.redesign-homepage .podcast-featured-provenance {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--teal);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.redesign-homepage .podcast-featured-lead {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--re-ink);
  margin: 0 0 10px 0;
}

.redesign-homepage .podcast-featured-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--re-charcoal);
  margin: 0 0 20px 0;
}

.redesign-homepage .podcast-links-section {
  margin-top: 14px;
}

.redesign-homepage .podcast-links-title {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--re-muted);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.redesign-homepage .podcast-buttons-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.redesign-homepage .podcast-social-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.redesign-homepage .podcast-social-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--re-oxblood);
  text-decoration: none;
  transition: color 0.2s;
}

.redesign-homepage .podcast-social-link:hover {
  color: var(--teal);
}

.redesign-homepage .podcast-social-link svg {
  color: currentColor;
  transition: transform 0.2s;
}

.redesign-homepage .podcast-social-link:hover svg {
  transform: translateY(-1px);
}

/* Mobile responsive styles */
@media (max-width: 767px) {
  .redesign-homepage .built-subsection-header {
    margin: 36px auto 16px;
  }
  .redesign-homepage .debate-tile-grid,
  .redesign-homepage .access-card-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 12px;
  }
  
  /* Stacked card treatment for archive table on mobile */
  .redesign-homepage .archive-table {
    display: block;
    width: auto;
    margin: 16px 12px;
    border: none;
    box-shadow: none;
    background: none;
  }
  .redesign-homepage .archive-table thead {
    display: none; /* Hide header rows */
  }
  .redesign-homepage .archive-table tbody {
    display: block;
    width: 100%;
  }
  .redesign-homepage .archive-table tr {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: var(--re-paper-soft);
    border: 1px solid var(--re-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--re-shadow);
    margin-bottom: 20px;
  }
  .redesign-homepage .archive-table td {
    display: block;
    width: auto;
    padding: 0;
    border: none;
    margin-bottom: 12px;
  }
  .redesign-homepage .archive-table td:last-child {
    margin-bottom: 0;
  }
  
  /* Column widths for columns 2-5 are replaced by flex column, first column acts as bold title */
  .redesign-homepage .archive-table td:first-child {
    font-size: 1.15rem;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--re-border);
    padding-bottom: 8px;
  }
  
  /* Mobile pseudo-labels */
  .redesign-homepage .archive-table td:nth-child(2)::before {
    content: "Period: " !important;
    color: var(--re-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    display: inline;
  }
  .redesign-homepage .archive-table td:nth-child(3)::before {
    content: "Language: " !important;
    color: var(--re-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    display: inline;
  }
  .redesign-homepage .archive-table td:nth-child(4)::before {
    content: "Key Coverage: " !important;
    color: var(--re-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 2px;
  }
  .redesign-homepage .archive-table td:nth-child(5)::before {
    content: "Archive & Access: " !important;
    color: var(--re-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 2px;
  }

  /* Mobile media card overrides */
  .redesign-homepage .media-card-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .redesign-homepage .media-card {
    /* Remove hover scale translate transformations on mobile */
    transform: none !important;
    box-shadow: 0 4px 12px rgba(48, 36, 26, 0.03) !important;
  }

  /* Mobile social card overrides */
  .redesign-homepage .social-card-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .redesign-homepage .social-card {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(48, 36, 26, 0.03) !important;
  }
  .redesign-homepage .social-card-content {
    padding: 20px;
  }
  .redesign-homepage .search-tag {
    /* Make sure long search tags can wrap safely inside the container */
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* Mobile podcast overrides */
  .redesign-homepage .podcast-featured-block {
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    margin-bottom: 36px;
    align-items: center;
  }
  .redesign-homepage .podcast-featured-image-wrap {
    flex: 0 0 240px;
    width: 240px;
    height: 240px;
  }
  .redesign-homepage .podcast-featured-lead {
    font-size: 1.2rem;
  }
  .redesign-homepage .podcast-featured-desc {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   What He Fought For - Category Filter Ribbon (Sprint 2)
   ========================================================================== */
.fought-filter-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 32px auto 44px;
  max-width: 980px;
  gap: 16px;
  text-align: center;
  padding: 0 16px;
  box-sizing: border-box;
}

.fought-filter-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--re-muted);
}

.fought-filter-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.fought-filter-chip {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--re-ink);
  background-color: #faf8f4;
  border: 1px solid var(--re-border);
  border-radius: 100px;
  padding: 8px 18px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(48, 36, 26, 0.03);
}

.fought-filter-chip:hover {
  background-color: #f5efe4;
  border-color: var(--re-bronze);
  color: var(--re-oxblood);
}

.fought-filter-chip:focus-visible {
  outline: 2px solid var(--re-oxblood);
  outline-offset: 2px;
}

.fought-filter-chip.active {
  background-color: var(--re-oxblood);
  border-color: var(--re-oxblood);
  color: var(--re-paper-soft);
  box-shadow: 0 4px 12px rgba(140, 48, 40, 0.2);
}

.fought-filter-count {
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  opacity: 0.85;
}

.fought-filter-status {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--re-muted);
  min-height: 1.2em;
}

/* Card filter animations & hiding */
.built-section.fought-card-hidden {
  display: none !important;
}

.filigree-divider.fought-divider-hidden {
  display: none !important;
}

.built-section.fought-card-entering {
  animation: foughtFadeIn 0.25s ease-out forwards;
}

@keyframes foughtFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   The Legacy (What He Built) - Executive Metrics Ribbon (Sprint 2)
   ========================================================================== */
.built-metrics-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 980px;
  margin: 28px auto 44px;
  padding: 0 16px;
  box-sizing: border-box;
}

.built-metric-card {
  background-color: #faf8f4;
  border: 1px solid var(--re-border);
  border-radius: var(--radius-lg, 8px);
  padding: 20px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(48, 36, 26, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.built-metric-card:hover {
  transform: translateY(-2px);
  border-color: var(--re-oxblood);
  box-shadow: 0 6px 16px rgba(48, 36, 26, 0.06);
}

.built-metric-val {
  font-family: var(--font-headline);
  font-size: clamp(1.85rem, 2.8vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--re-oxblood);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.built-metric-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--re-ink);
  margin-bottom: 4px;
}

.built-metric-sub {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--re-charcoal);
  line-height: 1.35;
}

@media (max-width: 840px) {
  .built-metrics-ribbon {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 24px auto 36px;
  }
  .built-metric-card {
    padding: 16px 12px;
  }
}

@media (max-width: 480px) {
  .built-metrics-ribbon {
    gap: 10px;
    padding: 0 12px;
  }
  .built-metric-card {
    padding: 14px 10px;
  }
  .built-metric-val {
    font-size: 1.65rem;
  }
  .built-metric-sub {
    font-size: 0.74rem;
  }
}



/* === _article.css === */
/* ==========================================================================
   Sub-page Editorial Reader Styles
   ========================================================================== */

.article-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-top: 24px;
}

.article-sidebar {
  flex: 0 0 240px;
  width: 240px;
  position: sticky;
  top: 98px; /* Header height (68px) + padding */
}

.toc-container {
  background: #fdfcf9;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.toc-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 12px;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toc-list li {
  margin: 0;
  padding: 0;
}

.toc-list li a {
  display: block;
  padding: 8px 12px;
  font-size: 0.92rem;
  line-height: 1.4;
  border-radius: 4px;
  font-weight: 500;
  color: var(--ink);
  transition: all 0.2s ease;
  text-decoration: none;
}

.toc-list li a:hover {
  background-color: rgba(156, 91, 46, 0.06);
  color: var(--bronze);
  text-decoration: none;
}

.article-body {
  flex: 1;
  min-width: 0;
  max-width: 65ch;
  margin-bottom: 40px;
}

.article-prose {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.6;
  color: var(--ink);
}

.article-prose p {
  margin-top: 0;
  margin-bottom: 1.6em;
}

.article-prose h2 {
  font-family: var(--font-headline);
  font-size: var(--type-editorial-h2);
  font-weight: 700;
  line-height: 1.2;
  color: var(--re-oxblood);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  scroll-margin-top: 98px; /* Stop anchor jumps from hiding behind the sticky header */
}

.article-prose h3 {
  font-family: var(--font-headline);
  font-size: var(--type-article-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--re-oxblood);
  margin-top: 1.8rem;
  margin-bottom: 0.8rem;
  border-bottom: none;
  padding-bottom: 0;
  scroll-margin-top: 98px;
}

/* Custom image layout in prose */
.article-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: 16px 0;
  display: block;
}

/* Mobile dropdown TOC styles */
.mobile-toc-selector {
  display: none;
  position: relative;
  margin-bottom: 24px;
}

.mobile-toc-trigger {
  width: 100%;
  text-align: left;
  background: #fdfcf9;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-toc-trigger:active {
  background: #f5efe4;
}

.mobile-toc-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fdfcf9;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 90;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  max-height: 250px;
  overflow-y: auto;
  padding: 8px 0;
}

.mobile-toc-dropdown.show {
  display: block;
}

.mobile-toc-dropdown a {
  display: block;
  padding: 10px 16px;
  color: var(--ink);
  font-size: 0.92rem;
  text-decoration: none;
}

.mobile-toc-dropdown a:hover {
  background: #f5efe4;
  color: var(--bronze);
}

@media (max-width: 767px) {
  .article-layout {
    flex-direction: column;
    gap: 0;
  }
  .article-sidebar {
    display: none;
  }
  .mobile-toc-selector {
    display: block;
  }
  .article-body {
    max-width: 100%;
  }
  .article-prose {
    font-size: 1.05rem;
  }
}

/* Breadcrumbs & Back Navigation */
.breadcrumbs {
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: var(--muted);
}

.breadcrumbs a {
  color: var(--muted);
}

/* Dual-image comparison layout */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 32px 0 24px 0;
  align-items: start;
}

.aspect-4-3 {
  aspect-ratio: 4 / 3 !important;
}

.article-prose img.built-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

@media (max-width: 767px) {
  .comparison-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Callouts in articles (compiled from markdown blockquotes) */
.article-prose .callout {
  background: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  border-top: 2px solid var(--re-oxblood);
  padding: 18px 22px;
  margin: 24px 0;
  border-radius: var(--radius);
}

.article-prose .callout.callout-info {
  border-top-color: var(--re-ink);
}

.article-prose .callout.callout-note {
  border-top-color: var(--re-gold);
}

.article-prose .callout.callout-important {
  border-top-color: var(--re-oxblood);
}

.article-prose .callout p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}


/* === _lightbox.css === */
/* ==========================================================================
   Walk Tabs & Honors Grid Utility Classes
   ========================================================================== */

.walk-tab-btn.active {
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  color: var(--bronze);
}

.walk-tab-btn.active .tab-num {
  color: var(--bronze);
}

.walk-tab-btn:hover:not(.active) {
  color: var(--text);
  background: rgba(182, 134, 86, 0.05);
}

.walk-tab-content {
  display: none;
}

.walk-tab-content.active {
  display: block;
  animation: walkFadeIn 0.4s ease forwards;
}

@keyframes walkFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Naming Honors Grid Styling */
.honors-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin: 40px 0;
}

@media (min-width: 768px) {
  .honors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .honors-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.honor-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.honor-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.honor-card-top {
  margin-bottom: 16px;
}

.honor-category {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bronze);
  font-weight: 600;
  margin-bottom: 8px;
  display: inline-block;
}

.honor-title {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  margin-top: 0;
}

/* ==========================================================================
   Archival Studio Dialog (Museum-Grade Deep Viewer)
   Design System: The Editorial Sanctuary
   Native HTML5 <dialog> with pristine layering, smooth zoom, and curation plaque
   ========================================================================== */

.archival-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(21, 19, 17, 0.96);
  color: var(--re-paper, #f4ebdd);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;
  z-index: var(--z-modal);
}

.archival-dialog[open] {
  opacity: 1;
  visibility: visible;
}

.archival-dialog::backdrop {
  background: rgba(14, 12, 10, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* 1. Header Toolbar */
.archival-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: linear-gradient(to bottom, rgba(21, 19, 17, 0.95) 0%, rgba(21, 19, 17, 0.6) 70%, transparent 100%);
  pointer-events: auto;
}

.archival-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.archival-counter {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--re-gold, #b18a52);
  background: rgba(41, 35, 31, 0.85);
  border: 1px solid rgba(177, 138, 82, 0.35);
  padding: 4px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.archival-hd-badge {
  display: none;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--re-oxblood, #8c3028);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.archival-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(41, 35, 31, 0.9);
  border: 1px solid rgba(177, 138, 82, 0.35);
  border-radius: 999px;
  padding: 4px 8px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.archival-btn {
  background: transparent;
  border: none;
  color: var(--re-paper, #f4ebdd);
  padding: 6px 10px;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
  user-select: none;
}

.archival-btn:hover {
  background: rgba(177, 138, 82, 0.2);
  color: var(--re-gold, #b18a52);
}

.archival-btn:active {
  transform: scale(0.95);
}

.archival-btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
}

.archival-btn-close {
  color: #e28d84;
  margin-left: 4px;
}

.archival-btn-close:hover {
  background: rgba(140, 48, 40, 0.35);
  color: #fff;
}

/* 2. Main Stage Viewport */
.archival-viewport {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.archival-viewport.dragging {
  cursor: grabbing;
}

.archival-img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 76vh;
  transform-origin: center center;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.archival-img {
  max-width: 92vw;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
  pointer-events: auto;
}

/* Loading Spinner */
.archival-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border: 3px solid rgba(177, 138, 82, 0.25);
  border-top-color: var(--re-gold, #b18a52);
  border-radius: 50%;
  animation: archivalSpin 0.8s linear infinite;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.archival-loader.active {
  opacity: 1;
}

@keyframes archivalSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Navigation Chevrons */
.archival-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(41, 35, 31, 0.85);
  border: 1px solid rgba(177, 138, 82, 0.35);
  color: var(--re-gold, #b18a52);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}

.archival-nav:hover {
  background: var(--re-gold, #b18a52);
  color: var(--re-dark, #191715);
  transform: translateY(-50%) scale(1.08);
}

.archival-nav:active {
  transform: translateY(-50%) scale(0.95);
}

.archival-prev { left: 24px; }
.archival-next { right: 24px; }

/* 3. Museum Curation Plaque */
.archival-plaque {
  position: relative;
  z-index: 10;
  padding: 16px 24px 20px;
  background: linear-gradient(to top, rgba(21, 19, 17, 0.98) 0%, rgba(21, 19, 17, 0.8) 70%, transparent 100%);
  display: flex;
  justify-content: center;
  pointer-events: auto;
}

.archival-plaque-inner {
  max-width: 820px;
  width: 100%;
  background: rgba(33, 31, 27, 0.9);
  border: 1px solid rgba(177, 138, 82, 0.3);
  border-top: 2px solid var(--re-gold, #b18a52);
  border-radius: 6px;
  padding: 12px 20px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.archival-plaque-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--re-gold, #b18a52);
  margin: 0 0 4px 0;
}

.archival-plaque-desc {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(244, 235, 221, 0.85);
  margin: 0;
}

/* Discovery hint */
.archival-hint {
  font-size: 0.72rem;
  color: rgba(177, 138, 82, 0.65);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 6px;
}

@media (max-width: 768px) {
  .archival-header {
    padding: 12px 16px;
  }
  .archival-controls {
    gap: 2px;
    padding: 2px 6px;
  }
  .archival-btn {
    padding: 4px 6px;
    font-size: 0.75rem;
  }
  .archival-nav {
    width: 38px;
    height: 38px;
  }
  .archival-prev { left: 12px; }
  .archival-next { right: 12px; }
  .archival-plaque {
    padding: 10px 14px 14px;
  }
  .archival-plaque-inner {
    padding: 10px 14px;
  }
  .archival-plaque-title {
    font-size: 1rem;
  }
  .archival-plaque-desc {
    font-size: 0.78rem;
  }
}


/* === _archive.css === */
/* ---------- Sources ---------- */

/* Data tables styles */
.source-table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-family: var(--font-body);
  background-color: var(--re-paper-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--re-shadow);
  border: 1px solid var(--re-border);
}

.source-table th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--re-charcoal);
  border-bottom: 2px solid var(--re-border);
  padding: 14px 18px;
  background-color: var(--re-paper);
  text-align: left;
}

.source-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--re-border);
  font-size: 0.95rem;
  color: var(--re-ink);
  vertical-align: middle;
}

.source-table tr:last-child td {
  border-bottom: none;
}

.source-table tr:hover td {
  background-color: rgba(177, 138, 82, 0.04);
}

/* Pill badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1;
}

.badge-verified {
  background-color: rgba(31, 61, 58, 0.08);
  color: var(--teal);
  border: 1px solid rgba(31, 61, 58, 0.25);
}

.badge-unverified {
  background-color: rgba(140, 48, 40, 0.08);
  color: var(--re-oxblood);
  border: 1px solid rgba(140, 40, 40, 0.25);
}

/* --- Ask the Archive Modal & Backdrop Styling --- */

/* Backdrop: covers entire viewport, fixed positioning, centered layout, hidden by default */
.archive-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background-color: rgba(30, 24, 18, 0.7); /* dark warm overlay */
  backdrop-filter: blur(4px); /* modern subtle blur */
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Open state for backdrop */
.archive-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Modal box - desktop (default): centered dialog, parchment styling */
.archive-modal {
  background-color: var(--re-paper-soft);
  background-image: radial-gradient(rgba(182, 134, 86, 0.05) 1px, transparent 0);
  background-size: 24px 24px; /* subtle paper texture grid */
  border: 1px solid var(--re-tan);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 580px;
  max-height: 85vh;
  padding: 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--re-ink);
}

.archive-modal-backdrop.open .archive-modal {
  transform: translateY(0);
}

/* Close button style */
.archive-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--re-muted);
  cursor: pointer;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 24px;
  right: 24px;
  transition: color 0.15s ease;
}

.archive-modal-close:hover {
  color: var(--re-oxblood);
}

/* Header styling */
.archive-modal-header {
  margin-bottom: 12px;
  padding-right: 40px; /* space for close button */
}

#archive-modal-title {
  font-family: var(--font-headline);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--re-oxblood);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.archive-modal-intro {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--re-muted);
  margin: 0 0 24px 0;
  border-bottom: 1px dashed var(--re-border);
  padding-bottom: 16px;
}

/* Chip row for question selection */
.archive-chip-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.archive-chip {
  background-color: var(--re-paper);
  border: 1px solid var(--re-border);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--re-ink);
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.4;
}

.archive-chip:hover {
  border-color: var(--re-oxblood);
  background-color: rgba(140, 48, 40, 0.03);
}

.archive-chip.active {
  background-color: var(--re-oxblood);
  border-color: var(--re-oxblood);
  color: var(--re-paper-soft);
  box-shadow: 0 4px 10px rgba(140, 48, 40, 0.15);
}

/* Answer text style */
.archive-answer {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--re-ink);
  margin: 0 0 20px 0;
  padding: 18px 20px;
  background-color: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  border-top: 2px solid var(--re-oxblood);
  border-radius: var(--radius);
}

/* Source quote style */
.archive-source {
  margin: 0 0 24px 0;
  padding: 0;
}

.archive-source blockquote {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--re-charcoal);
  margin: 0 0 8px 0;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--re-tan);
}

.archive-source cite {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--re-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
}

/* Disclaimer text style */
.archive-disclaimer {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--re-muted);
  margin: 0;
  border-top: 1px solid var(--re-border);
  padding-top: 16px;
}

/* --- Mobile sliding drawer (bottom sheet) overrides --- */
@media (max-width: 767px) {
  .archive-modal-backdrop {
    align-items: flex-end; /* align to bottom of viewport */
  }

  .archive-modal {
    width: 100%;
    max-width: 100%;
    height: 80vh;
    max-height: 80vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* rounded top corners only */
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 24px 20px;
    transform: translateY(100%); /* slide up from bottom animation */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .archive-modal-backdrop.open .archive-modal {
    transform: translateY(0);
  }

  .archive-modal-close {
    top: 20px;
    right: 20px;
  }
}

/* Ask the Archive Page Typography Override (Decoupled Scope) */
.archive-reading-flow h2 {
  font-family: var(--font-headline);
  font-size: var(--type-editorial-h2);
  font-weight: 700;
  line-height: 1.2;
  color: var(--re-oxblood);
}




/* === _petition.css === */
/* ==========================================================================
   ROW 08 — SUPPORT THE PETITION (Option A - Reconstruction)
   ========================================================================== */

/* Banner Row Container */
.redesign-homepage #row-08 {
  position: relative;
  overflow: hidden;
  background-color: #12100e; /* Near-black charcoal with warm brown undertone */
  color: var(--re-paper-soft) !important;
  z-index: 5;
  height: auto;
  min-height: auto;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Historical Artwork Layer (Right)
   -------------------------------------------------------------------------- */
.redesign-homepage .re-petition-artwork-wrap {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  z-index: 1;
}

.redesign-homepage .re-petition-artwork {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: sepia(0.12) saturate(0.85) contrast(1.05) brightness(0.65);
  display: block;
}

/* Fade Overlay for blending artwork with dark background */
.redesign-homepage .re-petition-artwork-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, #12100e 100%);
  z-index: 2;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Content Container & Flow
   -------------------------------------------------------------------------- */
.redesign-homepage .re-petition-container {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  padding: 48px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Left Column Content Wrapper using Normal Flow spacing */
.redesign-homepage .re-petition-left-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  box-sizing: border-box;
}

/* Headline Block (Eyebrow + Title) */
.redesign-homepage .re-petition-headline-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.redesign-homepage .re-petition-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--re-tan);
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}

.redesign-homepage .re-petition-headline {
  font-family: var(--font-headline);
  font-size: 28px;
  line-height: 1.15;
  color: var(--re-paper-soft, #fbf8f1);
  margin: 0;
  font-weight: 600;
  text-transform: none;
  max-width: 100%;
}

/* Request Block (Full Column Width) */
.redesign-homepage .re-petition-request-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.redesign-homepage .re-petition-request-label-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
}

.redesign-homepage .re-petition-request-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--re-tan); /* muted warm gold — same value as --re-tan (#decbb5) */
  text-transform: uppercase;
}

.redesign-homepage .re-petition-request-line {
  display: none;
}

.redesign-homepage .re-petition-request-text {
  font-family: var(--font-headline);
  font-size: 17px;
  line-height: 1.4;
  color: var(--re-paper-soft, #fbf8f1);
  margin: 0;
  font-weight: 400;
  width: 100%;
}

/* Petition Seal Wrapper (Centered Stack on Mobile) */
.redesign-homepage .re-petition-seal-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto;
  z-index: 10;
}

.redesign-homepage .re-petition-seal {
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: rotate(-5deg);
}

/* Supporting Columns Reasons Row */
.redesign-homepage .re-petition-reasons-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.redesign-homepage .re-petition-reason-column {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0 16px 0;
  box-sizing: border-box;
}

.redesign-homepage .re-petition-reason-column:not(:last-child) {
  border-bottom: 1px solid rgba(222, 203, 181, 0.1); /* --re-tan at 10% opacity */
}

.redesign-homepage .re-petition-reason-icon {
  color: var(--re-tan);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}

.redesign-homepage .re-petition-reason-number {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--re-tan);
  margin-bottom: 2px;
  letter-spacing: 0.05em;
}

.redesign-homepage .re-petition-reason-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
  color: var(--re-paper-soft, #fbf8f1);
  text-transform: uppercase;
}

/* Primary CTA Button */
.redesign-homepage .re-petition-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  height: 56px;
  background-color: var(--re-oxblood, #8c3028);
  color: var(--re-paper-soft, #fbf8f1);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s ease, transform 0.2s ease;
  box-sizing: border-box;
}

.redesign-homepage .re-petition-cta-btn:hover {
  background-color: #a03c34;
  transform: translateY(-1px);
}

/* ==========================================================================
   Tablet Adaptations (768px - 1199px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
  .redesign-homepage #row-08 {
    min-height: 560px;
    height: auto;
    box-sizing: border-box;
  }

  .redesign-homepage .re-petition-artwork-wrap {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
  }

  .redesign-homepage .re-petition-artwork {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% center;
    filter: sepia(0.12) saturate(0.85) contrast(1.05) brightness(0.70);
  }

  .redesign-homepage .re-petition-artwork-fade {
    background: linear-gradient(
      90deg,
      #12100e 0%,
      rgba(18, 16, 14, 0.6) 20%,
      transparent 80%
    );
  }

  .redesign-homepage .re-petition-container {
    max-width: 100%;
    margin: 0;
    height: 100%;
    padding: 44px 48px; /* 48px left margin matches standard tablet margin */
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
  }

  .redesign-homepage .re-petition-left-content {
    width: 62%;
    max-width: 580px;
    align-items: flex-start;
    text-align: left;
    gap: 18px;
    position: relative;
    z-index: 3;
  }

  .redesign-homepage .re-petition-headline-block {
    align-items: flex-start;
    gap: 10px;
  }

  .redesign-homepage .re-petition-eyebrow {
    font-size: 12px;
    letter-spacing: 0.18em;
  }

  .redesign-homepage .re-petition-headline {
    font-size: 36px;
    line-height: 1.12;
    max-width: 540px;
    text-align: left;
  }

  .redesign-homepage .re-petition-request-block {
    align-items: flex-start;
    width: 100%;
  }

  .redesign-homepage .re-petition-request-label-wrapper {
    justify-content: flex-start;
    gap: 12px;
  }

  .redesign-homepage .re-petition-request-line {
    display: block;
    flex-grow: 1;
    height: 1px;
    background-color: rgba(222, 203, 181, 0.15);
  }

  .redesign-homepage .re-petition-request-text {
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
  }

  /* Seal positioned directly above Column 03, bridging request and reasons */
  .redesign-homepage .re-petition-seal-wrapper {
    position: absolute;
    left: 480px;
    top: 140px;
    right: auto;
    transform: translateX(-50%);
    width: 105px;
    height: 105px;
    margin: 0;
    z-index: 4;
  }

  .redesign-homepage .re-petition-reasons-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    max-width: 540px;
  }

  .redesign-homepage .re-petition-reason-column {
    flex: 1;
    padding: 0 14px;
    border-bottom: none !important;
  }

  .redesign-homepage .re-petition-reason-column:not(:last-child) {
    border-right: 1px solid rgba(222, 203, 181, 0.12);
  }

  .redesign-homepage .re-petition-cta-btn {
    width: 100%;
    max-width: 540px;
    height: 52px;
  }
}

/* ==========================================================================
   Desktop Strict Layout Constraints (min-width: 1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  .redesign-homepage #row-08 {
    height: 600px;
    min-height: 600px;
  }

  .redesign-homepage .re-petition-artwork-wrap {
    position: absolute;
    right: 0;
    top: 0;
    width: 54%; /* Expanded leftward to show more of Mumbai Central station */
    height: 100%;
    z-index: 1;
  }

  .redesign-homepage .re-petition-artwork {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center; /* Shifts Nana leftward and reveals Mumbai Central station */
    filter: sepia(0.12) saturate(0.85) contrast(1.05) brightness(0.70);
    display: block;
  }

  .redesign-homepage .re-petition-artwork-fade {
    background: linear-gradient(90deg, #12100e 0%, rgba(18, 16, 14, 0.65) 25%, transparent 75%);
  }

  .redesign-homepage .re-petition-container {
    max-width: 1440px; /* Overrides global .container max-width 1100px so it spans full canvas */
    height: 600px;
    padding: 60px 64px 48px 96px; /* padding-left is exactly 96px for stable visual left margin */
    display: flex;
    align-items: flex-start; /* Aligns left column content to the top */
    justify-content: flex-start; /* Positions the campaign column to the left */
    box-sizing: border-box;
  }

  .redesign-homepage .re-petition-left-content {
    width: 50%; /* Left campaign content occupies 50% of the container */
    max-width: 560px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Left-align campaign content */
    text-align: left; /* Left-align typography */
    justify-content: space-between; /* Spreads components vertically to fill height */
    gap: 0; /* Let space-between manage layout rhythm */
    box-sizing: border-box;
    position: relative;
    z-index: 3;
  }

  .redesign-homepage .re-petition-headline-block {
    gap: 12px;
  }

  .redesign-homepage .re-petition-eyebrow {
    font-size: 12px;
  }

  .redesign-homepage .re-petition-headline {
    font-size: 52px; /* Large ivory headline */
    line-height: 1.05;
    max-width: 580px; /* Widened to allow comfortable three-line wrapping */
    text-transform: none;
    margin: 0;
  }

  .redesign-homepage .re-petition-request-block {
    width: 100%;
    max-width: 560px;
  }

  .redesign-homepage .re-petition-request-label-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
  }

  .redesign-homepage .re-petition-request-line {
    display: block;
    flex-grow: 1;
    height: 1px;
    background-color: rgba(222, 203, 181, 0.15);
  }

  .redesign-homepage .re-petition-request-text {
    font-size: 20px; /* Restrained requested serif typography size */
    line-height: 1.35;
    text-align: left;
    margin: 0;
    width: 100%;
  }

  /* Decoupled absolute positioned seal shifted leftward */
  .redesign-homepage .re-petition-seal-wrapper {
    position: absolute;
    left: 48%; /* Shifted left towards the left content to clear Mumbai Central station */
    top: 230px;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    margin: 0;
    z-index: 4;
  }

  .redesign-homepage .re-petition-reasons-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    max-width: 540px; /* Matches CTA limit */
    margin-top: 4px;
  }

  .redesign-homepage .re-petition-reason-column {
    flex: 1;
    padding: 0 16px;
    border-bottom: none !important;
    border-right: 1px solid rgba(222, 203, 181, 0.12);
  }

  .redesign-homepage .re-petition-reason-column:last-child {
    border-right: none;
  }

  .redesign-homepage .re-petition-reason-icon {
    height: 28px;
  }

  .redesign-homepage .re-petition-reason-label {
    font-size: 12px;
  }

  .redesign-homepage .re-petition-cta-btn {
    max-width: 540px; /* Matches visual reference ~550px */
    height: 62px;
    font-size: 12px;
    margin-top: 4px;
  }
}


/* === _petition_page.css === */
/* ==========================================================================
   nanaShankarshet.org — Dedicated Renaming Petition Page Styles
   Visual refinements and interior subpage hero alignment (Task 1A.3).
   ========================================================================== */

/* Main layout wrapper */
.petition-main-wrap {
  background-color: var(--re-paper);
  color: var(--re-ink);
  min-height: 100dvh;
  box-sizing: border-box;
}

/* Generic Section Styles with clear editorial rhythms */
.petition-section {
  padding: var(--space-section-gap) 24px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

@media (max-width: 767px) {
  .petition-section {
    padding: var(--space-section-gap-mobile) 16px;
  }
}

.petition-container {
  width: 100%;
  max-width: var(--container-width, 1100px);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.petition-container-narrow {
  width: 100%;
  max-width: var(--container-width-narrow, 760px);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.petition-section-header {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

@media (max-width: 767px) {
  .petition-section-header {
    margin-bottom: 36px;
  }
}

/* --------------------------------------------------------------------------
   EDITORIAL TYPOGRAPHY HIERARCHY
   -------------------------------------------------------------------------- */
.petition-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}

.petition-section-title {
  font-family: var(--font-headline);
  font-size: var(--h1-size);
  line-height: var(--lh-heading);
  color: var(--re-ink);
  margin: 0;
  font-weight: 700;
}

/* Common Oxblood CTA Button Style */
.petition-btn-oxblood {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--re-oxblood);
  color: var(--re-paper-soft) !important;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--radius);
  padding: 16px 36px;
  min-height: 52px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(140, 48, 40, 0.25);
  box-sizing: border-box;
}

.petition-btn-oxblood:hover {
  background-color: #a03c34;
  transform: translateY(-1px);
}

.petition-btn-oxblood:active {
  transform: translateY(1px);
}

.petition-btn-oxblood:focus-visible {
  outline: 2px solid var(--re-gold);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   01. OPENING ACTION / QUALIFICATION SECTION (Cream theme - var(--re-paper-soft))
   -------------------------------------------------------------------------- */
.petition-opening-action {
  background-color: var(--re-paper-soft);
  text-align: center;
  border-bottom: 1px solid var(--border);
  padding: 56px 24px;
}

@media (max-width: 767px) {
  .petition-opening-action {
    padding: 36px 16px;
  }
}

.petition-opening-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.petition-opening-qualification {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--re-charcoal);
  margin: 0;
  max-width: 620px;
  font-style: italic;
}

.petition-opening-cta-wrap {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   02. WHY NANA SECTION (Parchment theme - var(--re-paper))
   -------------------------------------------------------------------------- */
.petition-why-nana {
  background-color: var(--re-paper);
}

.petition-why-nana .petition-eyebrow {
  color: var(--re-gold-text);
}

.petition-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 767px) {
  .petition-pillars-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.petition-pillar-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  border-top: 3px solid var(--re-gold);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  box-shadow: var(--re-shadow);
  box-sizing: border-box;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.petition-pillar-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(43, 41, 39, 0.08);
}

.petition-pillar-seal {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FBF9F5 0%, #F2E5D3 100%);
  border: 1.5px solid var(--re-gold);
  box-shadow: 0 2px 8px rgba(139, 38, 53, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--re-oxblood);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.petition-pillar-num {
  font-family: var(--font-headline);
  font-size: 2.2rem;
  font-weight: 700;
  font-style: italic;
  color: var(--re-oxblood);
  line-height: 1;
}

.petition-pillar-title {
  font-family: var(--font-headline);
  font-size: 20px;
  line-height: 1.25;
  color: var(--re-ink);
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.petition-pillar-text {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--re-charcoal);
  margin: 0;
}

/* --------------------------------------------------------------------------
   03. WHY THIS STATION SECTION (Cream theme - var(--re-paper-soft))
   -------------------------------------------------------------------------- */
.petition-why-station {
  background-color: var(--re-paper-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.petition-why-station .petition-eyebrow {
  color: var(--re-muted);
}

.petition-flow-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
}

@media (max-width: 767px) {
  .petition-flow-row {
    flex-direction: column;
    gap: 20px;
  }
}

.petition-flow-step {
  flex: 1;
  background-color: var(--re-paper);
  border: 1px solid var(--re-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  box-sizing: border-box;
}

.petition-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--re-gold);
  font-size: 20px;
  font-weight: bold;
  align-self: center;
}

@media (max-width: 767px) {
  .petition-flow-arrow {
    transform: rotate(90deg);
    margin: -4px 0;
  }
}

.petition-flow-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--re-muted);
  text-transform: uppercase;
}

.petition-flow-value {
  font-family: var(--font-headline);
  font-size: 22px;
  line-height: 1.2;
  color: var(--re-ink);
  margin: 0;
  font-weight: 700;
}

.petition-flow-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--re-charcoal);
  margin: 0;
}

.petition-flow-step.highlight {
  border-color: var(--re-oxblood);
  box-shadow: 0 0 0 1px var(--re-oxblood), var(--re-shadow);
  background-color: var(--re-paper-soft);
}

.petition-flow-step.highlight .petition-flow-value {
  color: var(--re-oxblood);
}

/* --------------------------------------------------------------------------
   04. THE DEMAND HAS A HISTORY SECTION (Parchment theme - var(--re-paper))
   -------------------------------------------------------------------------- */
.petition-timeline-section {
  background-color: var(--re-paper);
  overflow: hidden;
}

.petition-timeline-section .petition-eyebrow {
  color: var(--re-gold-text);
}

/* Vertical Timeline Track (Mobile Default) */
.petition-timeline-wrap {
  position: relative;
  margin: 48px auto 0 auto;
  max-width: 650px;
  padding-left: 40px;
  box-sizing: border-box;
}

.petition-timeline-wrap::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--re-border);
}

.petition-timeline-node {
  position: relative;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.petition-timeline-node::before {
  content: "";
  position: absolute;
  left: -33px; /* Centered on the 2px vertical line */
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--re-paper);
  border: 2px solid var(--re-gold);
  z-index: 2;
  transition: all 0.2s ease;
}

.petition-timeline-node.active::before {
  background-color: var(--re-oxblood);
  border-color: var(--re-oxblood);
  box-shadow: 0 0 0 5px rgba(140, 48, 40, 0.20);
  width: 12px;
  height: 12px;
  left: -34px;
  top: 5px;
}

.petition-timeline-year {
  font-family: var(--font-headline);
  font-size: 22px;
  font-weight: 700;
  color: var(--re-ink);
  margin: 0;
  line-height: 1.1;
}

.petition-timeline-node.active .petition-timeline-year {
  color: var(--re-oxblood);
  font-size: 24px;
}

.petition-timeline-detail {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--re-charcoal);
  margin: 0;
}

.petition-timeline-node.active .petition-timeline-detail {
  font-weight: 700;
  color: var(--re-ink);
}

/* Adaptations for horizontal flow on tablet/desktop */
@media (min-width: 768px) {
  .petition-timeline-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding-left: 0;
    max-width: 100%;
    margin-top: 64px;
    gap: 20px;
  }

  .petition-timeline-wrap::before {
    left: 0;
    right: 0;
    top: 10px;
    bottom: auto;
    width: 100%;
    height: 2px;
  }

  .petition-timeline-node {
    flex: 1;
    padding-bottom: 0;
    padding-top: 28px;
    align-items: center;
    text-align: center;
  }

  .petition-timeline-node::before {
    left: 50%;
    top: -5px;
    transform: translateX(-50%);
  }

  .petition-timeline-node.active::before {
    left: 50%;
    top: -6px;
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   05. THE CALL HAS ALREADY REACHED PARLIAMENT SECTION (Cream theme)
   -------------------------------------------------------------------------- */
.petition-video-section {
  background-color: var(--re-paper-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.petition-video-section .petition-eyebrow {
  color: var(--re-muted);
}

.petition-video-container {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 40px auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--re-border);
  box-shadow: var(--re-shadow);
  box-sizing: border-box;
}

.petition-video-poster {
  width: 100%;
  height: 100%;
  background-color: var(--re-dark);
  background-image: linear-gradient(135deg, rgba(25, 23, 21, 0.95), rgba(41, 35, 31, 0.98)), url("../assets/images-webp/nana-station-illustration.webp");
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  padding: 24px;
}

.petition-video-play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--re-oxblood);
  color: var(--re-paper-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.2s ease;
  margin-bottom: 16px;
}

.petition-video-play-icon {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid currentColor;
  margin-left: 4px;
}

.petition-video-poster:hover .petition-video-play-btn {
  background-color: #a03c34;
  transform: scale(1.08);
}

.petition-video-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--re-tan);
  text-transform: uppercase;
}

.petition-video-meta {
  font-family: var(--font-headline);
  font-size: 20px;
  color: var(--re-paper-soft);
  margin-top: 6px;
  font-style: italic;
}

.petition-video-caption {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--re-charcoal);
  max-width: 650px;
  margin: 0 auto 32px auto;
  text-align: center;
}



.petition-counter-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin: 36px auto 0 auto;
  padding: 24px 28px;
  background-color: var(--re-paper);
  border: 1px solid var(--re-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(43, 41, 39, 0.04);
  text-align: center;
  box-sizing: border-box;
}

.petition-milestone-kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--re-gold);
  margin-bottom: 2px;
}

.petition-milestone-stats {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.petition-counter-lead {
  font-family: var(--font-headline);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  color: var(--re-oxblood);
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.petition-milestone-target {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--re-charcoal);
  line-height: 1.4;
}

.petition-milestone-bar-wrap {
  width: 100%;
  max-width: 480px;
  height: 8px;
  background-color: rgba(104, 96, 87, 0.12);
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 6px 0;
  position: relative;
}

.petition-milestone-bar-fill {
  height: 100%;
  width: 2%;
  background: linear-gradient(90deg, #C4B295, #8B2635);
  border-radius: 999px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.petition-milestone-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--re-charcoal);
  margin: 0;
  max-width: 460px;
}

.petition-milestone-subnote {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.4;
  color: var(--re-charcoal);
  opacity: 0.7;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   07. SIGNATURE FORM + EMOTIONAL BRIDGE SECTION (Cream theme)
   -------------------------------------------------------------------------- */
.petition-form-section {
  background-color: var(--re-paper-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Transition emotional bridge above the form card */
.petition-emotional-bridge {
  font-family: var(--font-headline);
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.4;
  font-weight: 700;
  color: var(--re-oxblood);
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px auto;
  font-style: italic;
  border-bottom: 1px solid var(--re-border);
  padding-bottom: 24px;
}

.petition-form-card {
  background-color: var(--re-paper);
  border: 1px solid var(--re-border);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--re-shadow);
  max-width: 720px; /* Wider focused presentation */
  margin: 0 auto;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .petition-form-card {
    padding: 32px 16px;
  }
}

.petition-form-card .petition-eyebrow {
  color: var(--re-gold-text);
}

.petition-form-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.petition-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.petition-field-hint {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--re-charcoal);
  opacity: 0.72;
  margin-top: 2px;
}

.petition-form-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--re-muted);
}

.petition-form-label .optional-label {
  font-weight: 400;
  text-transform: none;
  font-style: italic;
  letter-spacing: 0;
  color: var(--re-charcoal);
  margin-left: 4px;
}

.petition-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.petition-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.petition-checkbox-row input[type="checkbox"] {
  margin-top: 4px;
  cursor: pointer;
}

.petition-checkbox-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--re-charcoal);
}

.petition-form-trust {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--re-charcoal);
  background-color: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-top: 8px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.petition-form-legal {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--re-charcoal);
  margin-top: 12px;
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

/* --------------------------------------------------------------------------
   08. WHAT HAPPENS NEXT SECTION (Parchment theme - var(--re-paper))
   -------------------------------------------------------------------------- */
.petition-next-steps {
  background-color: var(--re-paper);
  border-top: 1px solid var(--border);
}

.petition-next-steps .petition-eyebrow {
  color: var(--re-gold-text);
}

.petition-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

@media (max-width: 767px) {
  .petition-steps-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.petition-step-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-sizing: border-box;
}

.petition-step-num {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--re-gold-text);
  letter-spacing: 0.1em;
}

.petition-step-title {
  font-family: var(--font-headline);
  font-size: 20px;
  line-height: 1.2;
  color: var(--re-ink);
  margin: 0;
  font-weight: 700;
}

.petition-step-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--re-charcoal);
  margin: 0;
}

/* --------------------------------------------------------------------------
   09. WHY PEOPLE ARE SIGNING SECTION (Cream theme - var(--re-paper-soft))
   -------------------------------------------------------------------------- */
.petition-stories-section {
  background-color: var(--re-paper-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.petition-stories-section .petition-eyebrow {
  color: var(--re-muted);
}

.petition-stories-placeholder {
  background-color: var(--re-paper);
  border: 1px dashed var(--re-border);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  color: var(--re-muted);
  font-family: var(--font-headline);
  font-size: 16px;
  font-style: italic;
  max-width: 600px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   10. FINAL CTA SECTION (Dark theme - var(--re-dark))
   -------------------------------------------------------------------------- */
.petition-final-cta {
  background-color: var(--re-dark);
  color: var(--re-paper-soft);
  text-align: center;
  padding: 100px 24px;
}

.petition-final-cta .petition-eyebrow {
  color: var(--re-oxblood);
}

.petition-final-cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 680px;
  margin: 0 auto;
}

.petition-final-cta-title {
  font-family: var(--font-headline);
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.15;
  color: var(--re-paper-soft);
  margin: 0;
  font-weight: 700;
}

.petition-final-cta-subtitle {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--lh-body);
  color: var(--re-tan);
  margin: 0 0 8px 0;
}


/* === _footer.css === */
/* ---------- Footer ---------- */

@media (min-width: 481px) and (max-width: 1199px) {
  :root {
    --page-padding: 32px;
  }
}
@media (min-width: 1200px) {
  :root {
    --page-padding: clamp(56px, 4vw, 72px);
  }
}

/* --------------------------------------------------------------------------
   ROW 09 — FOOTER (Single-Row Robust Flexbox Layout)
   -------------------------------------------------------------------------- */

.redesign-homepage #row-09,
#row-09 {
  background: var(--re-oxblood) !important;
  color: var(--re-paper) !important;
  overflow: hidden;
  padding: 16px 64px !important;
  height: auto !important;
  min-height: 72px !important;
  position: relative !important;
  z-index: 5;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px;
}

.re-footer-brand {
  position: static !important;
  transform: none !important;
  height: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.re-footer-brand-text {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--re-paper);
  white-space: nowrap;
}

.re-footer-tagline {
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  max-width: 650px !important;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}

.re-footer-provenance-desktop,
.re-footer-provenance-mobile {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--re-paper);
  opacity: 0.9;
  line-height: 1.25;
}

.re-footer-author-desktop,
.re-footer-author-mobile {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--re-paper);
  opacity: 0.75;
  line-height: 1.25;
}

.re-footer-author-desktop a,
.re-footer-author-mobile a {
  color: inherit;
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}

.re-footer-provenance-desktop,
.re-footer-author-desktop {
  display: block;
}

.re-footer-provenance-mobile,
.re-footer-author-mobile {
  display: none;
}

.re-footer-poetry {
  font-family: var(--font-headline);
  font-size: 15px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: var(--re-paper);
  margin-top: 2px;
}

.re-footer-socials {
  position: static !important;
  transform: none !important;
  height: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.re-footer-socials a {
  color: var(--re-paper);
  opacity: 0.78;
  /* Expand tap/click target to ~44px without changing visual size or layout */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  margin: -16px;
}

.re-footer-socials a:hover {
  opacity: 1;
}

/* Seal SVG font normalisation — applies to all pages.
   Inline font-family attributes have been removed from static pages;
   this rule covers any remaining inline overrides and future-generated pages. */
.re-footer-seal text,
.re-quote-seal-bg text {
  font-family: var(--font-headline) !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .redesign-homepage .re-header {
    padding: 0 36px;
    grid-template-columns: auto 1fr auto auto;
    gap: 14px;
  }

  .redesign-homepage .re-header-brand {
    min-width: 210px;
  }

  .redesign-homepage .re-header-nav {
    gap: 14px;
  }

  .redesign-homepage .re-header-nav a {
    font-size: var(--type-navigation);
  }

  .redesign-homepage .re-hero-eyebrow,
  .redesign-homepage .re-hero-headline,
  .redesign-homepage .re-hero-description,
  .redesign-homepage .re-hero-cta {
    left: 48px;
  }
  .redesign-homepage .re-hero-headline {
    font-size: 90px;
  }
  .redesign-homepage .re-hero-description {
    top: 430px;
    font-size: 16px;
  }

  .redesign-homepage #row-03,
  .redesign-homepage #row-04,
  .redesign-homepage #row-05,
  .redesign-homepage #row-07 {
    padding-left: 48px;
    padding-right: 48px;
  }
  .redesign-homepage .re-timeline-title {
    left: 48px;
  }
  .redesign-homepage .re-timeline-axis {
    left: 48px;
    right: 48px;
  }
  .redesign-homepage .re-built-title,
  .redesign-homepage .re-thennow-title {
    left: 48px;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .redesign-homepage #row-09,
  #row-09 {
    padding: 16px 36px !important;
    gap: 16px !important;
  }
}


/* === _tribute.css === */
/* ==========================================================================
   nanaShankarshet.org — Pay Your Respects Memorial Styles
   Visual styling for the static digital memorial experience (Phase B).
   ========================================================================== */

/* Main layout wrapper */
.tribute-main-wrapper {
  position: relative;
  background: var(--re-paper);
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 72vh;
  box-sizing: border-box;
  overflow: hidden;
}

/* Atmospheric historical Bombay background overlay */
.tribute-backdrop-overlay {
  position: absolute;
  inset: 0;
  background-image: url("../assets/images-webp/A14_Hero_Map_Background_Overlay.webp");
  background-position: center;
  background-size: cover;
  opacity: 0.05; /* Extremely subtle and subordinate to Nana */
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* Symmetrical memorial container centered on the vertical axis */
.tribute-memorial-composition {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* ==========================================================================
   Global Tribute Tally Banner (Option 1: Museum Civic Ribbon)
   ========================================================================== */
.tribute-global-banner {
  width: 100%;
  max-width: 520px;
  margin: 0 auto 32px auto;
  padding: 16px 20px;
  background: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  border-top: 3px solid var(--re-gold);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  text-align: center;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tribute-global-banner:hover {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07);
}

.tribute-global-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.tribute-global-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fbf8f2, var(--re-paper-soft));
  border: 1px solid var(--re-gold);
  color: var(--re-gold);
  flex-shrink: 0;
  box-shadow: inset 0 1px 3px rgba(182, 134, 86, 0.2);
}

.tribute-global-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.tribute-global-kicker {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--re-gold-text);
  margin-bottom: 2px;
}

.tribute-global-headline {
  font-family: var(--font-headline);
  font-size: 19px;
  font-weight: 600;
  color: var(--re-ink);
  line-height: 1.25;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.tribute-global-count {
  font-family: var(--font-headline);
  font-size: 25px;
  font-weight: 700;
  color: var(--re-oxblood);
  letter-spacing: 0.02em;
  transition: color 0.4s ease;
}

.tribute-global-label {
  font-family: var(--font-headline);
  font-size: 17px;
  color: var(--re-ink);
}

.tribute-global-subnote {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--re-border);
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--re-charcoal);
  opacity: 0.78;
}

@media (max-width: 640px) {
  .tribute-global-banner {
    padding: 13px 15px;
    margin-bottom: 24px;
    max-width: 100%;
  }
  .tribute-global-banner-inner {
    gap: 12px;
  }
  .tribute-global-seal {
    width: 32px;
    height: 32px;
  }
  .tribute-global-headline {
    font-size: 16px;
  }
  .tribute-global-count {
    font-size: 21px;
  }
  .tribute-global-label {
    font-size: 15px;
  }
}

/* Unified Memorial Structure (Frame + Plinth) */
.tribute-structure-container {
  position: relative;
  width: 100%;
  max-width: 480px; /* Increased frame size as the layout hero */
  margin: 0 auto;
  z-index: 3;
  transition: filter 0.8s ease;
}

.tribute-structure-container.plinth-bloom {
  animation: plinth-bloom-glow 1.4s ease-out forwards;
}

@keyframes plinth-bloom-glow {
  0% {
    filter: drop-shadow(0 0 0 rgba(182, 134, 86, 0));
  }
  35% {
    filter: drop-shadow(0 0 20px rgba(182, 134, 86, 0.4));
  }
  100% {
    filter: drop-shadow(0 0 0 rgba(182, 134, 86, 0));
  }
}

.tribute-structure-img {
  display: block;
  width: 100%;
  height: auto;
}

.tribute-img-base {
  position: relative;
  opacity: 1;
  z-index: 1;
}

.tribute-img-after {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: opacity 850ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Interactive CTA Controls */
.tribute-interaction-zone {
  margin-top: 48px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 520px; /* Sensible max-width for desktop, matching plinth */
  box-sizing: border-box;
}

.tribute-cta-container {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  width: 100%;
}

.tribute-cta-container.fade-out {
  opacity: 0;
  visibility: hidden;
}

.tribute-cta-btn {
  display: inline-block;
  background: transparent;
  color: var(--re-charcoal);
  border: 1px solid var(--re-charcoal);
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 36px;
  border-radius: var(--radius);
  cursor: pointer;
  outline: none;
  transition: all 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  min-height: var(--btn-min-height);
  box-sizing: border-box;
}

.tribute-cta-btn:hover:not(:disabled) {
  background-color: rgba(104, 96, 87, 0.05); /* Subtle tone shift */
  border-color: var(--re-ink);
  color: var(--re-ink);
  transform: translateY(-1px);
}

.tribute-cta-btn:focus-visible {
  outline: 2px solid var(--re-gold);
  outline-offset: 4px;
}

.tribute-cta-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.tribute-cta-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Acknowledgement & Counter styling (fixed layout issues) */
.tribute-acknowledgement {
  width: calc(100% - 40px); /* Responsive on mobile */
  max-width: 480px; /* Sensible width target 420-520px on desktop */
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px); /* Gentle relative translateY fade-in */
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-align: center;
  box-sizing: border-box;
}

.tribute-acknowledgement.fade-in {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tribute-ack-message {
  font-family: var(--font-headline);
  font-size: 16px;
  font-style: italic;
  line-height: 1.4;
  color: var(--re-muted);
  margin: 0 0 10px 0;
}

.tribute-counter {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--re-gold-text);
  margin: 0 0 20px 0;
}

/* Progressive Flow Container & Divider */
.tribute-flow-container {
  position: relative;
  margin-top: 24px;
  width: 100%;
  padding-top: 24px;
  text-align: left;
}

/* Divider is a pseudo-element so hiding it costs no layout recalc */
.tribute-flow-container::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--re-border);
  /* dashed visual via repeating-gradient — matches the original dashed look */
  background-image: repeating-linear-gradient(
    to right,
    var(--re-border) 0 6px,
    transparent 6px 10px
  );
  opacity: 1;
  transform-origin: top center;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.tribute-flow-container.final-active::before {
  opacity: 0;
  transform: scaleY(0);
}

/* Transitions between progressive stages */
.tribute-flow-step {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tribute-flow-step.active {
  opacity: 1;
  transform: translateY(0);
}

.tribute-flow-step.fade-out {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (prefers-reduced-motion: reduce) {
  .tribute-flow-step,
  .tribute-flow-step.active,
  .tribute-flow-step.fade-out {
    transition: none !important;
    transform: none !important;
  }
}

.tribute-step-heading {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--re-muted);
  margin: 0 0 16px 0;
}

.tribute-step-subheading {
  font-family: var(--font-headline);
  font-size: 15px;
  font-style: italic;
  color: var(--re-charcoal);
  margin: -10px 0 16px 0;
  line-height: 1.4;
}

/* Choices Grid */
.tribute-choices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0;
  width: 100%;
}

@media (max-width: 480px) {
  .tribute-choices-grid {
    grid-template-columns: 1fr;
  }
}

.tribute-choice-btn {
  background-color: var(--re-paper-soft); /* Distinct card background against parchment page */
  color: var(--re-charcoal);
  border: 1px solid rgba(109, 96, 79, 0.35); /* Clear uniform rectangular boundary */
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: 500;
  padding: 14px 20px; /* Generous vertical height for touch targets */
  border-radius: var(--radius); /* Reconcile with 6px border-radius design token */
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.tribute-choice-btn[data-choice="Something else"] {
  grid-column: span 2;
}

.tribute-choice-btn:hover:not(.selected) {
  background-color: rgba(104, 96, 87, 0.05); /* Subtle hover overlay */
  border-color: var(--re-charcoal);
}

.tribute-choice-btn.selected {
  background-color: rgba(156, 91, 46, 0.06); /* Light bronze tint */
  border-color: var(--bronze);
  color: var(--re-ink);
  font-weight: 600; /* Bolder font weight for readability */
  box-shadow: 0 0 0 1px var(--bronze); /* Prominent 2px border outline look without layout shift */
}

.tribute-choice-btn:focus-visible {
  outline: 2px solid var(--re-gold);
  outline-offset: 2px;
}

/* Inputs & Focus states */
.tribute-form-input {
  background-color: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--re-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
}

.tribute-form-textarea {
  background-color: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--re-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
}

.tribute-form-input::placeholder,
.tribute-form-textarea::placeholder {
  color: var(--re-charcoal);
  opacity: 0.72;
  font-size: 13px;
}

.tribute-form-input:focus,
.tribute-form-textarea:focus {
  border-color: var(--re-gold);
  box-shadow: 0 0 0 3px rgba(177, 138, 82, 0.15);
  outline: none;
}

/* Navigation & Action Rows */
.tribute-action-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  width: 100%;
}

.tribute-btn-skip {
  background: transparent;
  color: var(--re-muted);
  border: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 12px;
  transition: color 0.2s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tribute-btn-skip:hover {
  color: var(--re-ink);
  text-decoration: underline;
}

.tribute-btn-skip:focus-visible {
  outline: 2px solid var(--re-gold);
  outline-offset: 2px;
}

.tribute-btn-primary {
  background: transparent;
  color: var(--re-charcoal);
  border: 1px solid var(--re-charcoal);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 24px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tribute-btn-primary:hover {
  background-color: rgba(104, 96, 87, 0.05);
  border-color: var(--re-ink);
  color: var(--re-ink);
}

.tribute-btn-primary:focus-visible {
  outline: 2px solid var(--re-gold);
  outline-offset: 2px;
}

/* Final Stillness Legacy block */
.tribute-legacy-sentiment {
  font-family: var(--font-headline);
  font-size: 17px; /* reduced size to fit secondary thought status */
  font-style: italic;
  color: var(--re-muted); /* changed from oxblood to muted charcoal to reduce prominence */
  text-align: center;
  margin: 24px auto 12px auto;
  line-height: 1.5;
  width: 100%;
  max-width: 360px; /* Constrain width for a quiet paragraph block layout */
}

/* Prevent continuous long strings from overflowing note containers */
.tribute-wall-note-text,
.tribute-ack-message {
  overflow-wrap: break-word;
  word-break: break-word;
}

.tribute-note-confirmation {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 15px;
  color: var(--re-muted);
  text-align: center;
  margin: 12px 0 0 0;
}

/* Remembrance Wall */
.tribute-wall {
  padding: 48px 24px 72px 24px;
  text-align: center;
  background: var(--re-paper);
}

.tribute-wall-inner {
  max-width: 580px;
  margin: 0 auto;
}

.tribute-wall-kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--re-gold-text);
  margin-bottom: 6px;
}

.tribute-wall-heading {
  font-family: var(--font-headline);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--re-ink);
  margin: 0 0 28px 0;
}

/* Elevated Museum Tribute Card */
.tribute-wall-card {
  position: relative;
  background: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  border-top: 3px solid var(--re-gold);
  border-radius: var(--radius);
  padding: 36px 36px 26px 36px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  text-align: left;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.tribute-wall-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
  border-color: rgba(182, 134, 86, 0.4);
}

.tribute-wall-quote-icon {
  position: absolute;
  top: 14px;
  right: 24px;
  font-family: var(--font-headline);
  font-size: 56px;
  line-height: 1;
  color: var(--re-gold);
  opacity: 0.32;
  pointer-events: none;
  user-select: none;
}

.tribute-wall-note {
  margin: 0;
  padding: 0;
  border: none;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 350ms ease, transform 350ms ease;
  min-height: 90px;
}

.tribute-wall-note.fading {
  opacity: 0;
  transform: translateY(4px);
}

.tribute-wall-note-text {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 19px;
  line-height: 1.65;
  color: var(--re-charcoal);
  margin: 0 0 16px 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.tribute-wall-attribution {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--re-muted);
  text-align: right;
  border-top: 1px dashed var(--re-border);
  padding-top: 14px;
}

/* Pagination Dots */
.tribute-wall-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.tribute-wall-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--re-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.tribute-wall-dot:hover {
  background-color: var(--re-gold);
}

.tribute-wall-dot.active {
  background-color: var(--re-oxblood);
  transform: scale(1.35);
}

.tribute-wall-dot:focus-visible {
  outline: 2px solid var(--re-gold);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .tribute-wall {
    padding: 36px 16px 56px 16px;
  }
  .tribute-wall-heading {
    font-size: 22px;
    margin-bottom: 20px;
  }
  .tribute-wall-card {
    padding: 26px 20px 20px 20px;
  }
  .tribute-wall-note-text {
    font-size: 17px;
  }
  .tribute-wall-quote-icon {
    font-size: 44px;
    top: 10px;
    right: 16px;
  }
}

/* ==========================================================================
   Gratitude Inscription — Monument Style
   Sits below the CTA separated by a thin rule.
   Words stack vertically in descending size like names on a memorial stone.
   ========================================================================== */

.tribute-inscription {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
  /* Fade-up entrance */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tribute-inscription.visible {
  opacity: 1;
  transform: translateY(0);
}

.tribute-inscription-rule {
  width: 48px;
  height: 1px;
  background: var(--re-border);
  margin: 48px 0 28px 0;
}

.tribute-inscription-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--re-muted);
  margin: 0 0 20px 0;
  opacity: 0.7;
}

.tribute-inscription-words {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Three tiers of typographic weight */
.tribute-inscription-word {
  font-family: var(--font-headline);
  font-style: normal;
  font-weight: 600;
  line-height: 1.15;
  color: var(--re-charcoal);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.tribute-inscription-word.tier-1 {
  font-size: 32px;
  color: rgba(177, 138, 82, 0.9); /* dominant gold */
  letter-spacing: -0.02em;
}

.tribute-inscription-word.tier-2 {
  font-size: 22px;
  color: var(--re-charcoal);
}

.tribute-inscription-word.tier-3 {
  font-size: 15px;
  color: var(--re-muted);
  font-weight: 400;
  letter-spacing: 0;
}

@media (max-width: 480px) {
  .tribute-inscription-word.tier-1 { font-size: 26px; }
  .tribute-inscription-word.tier-2 { font-size: 18px; }
  .tribute-inscription-word.tier-3 { font-size: 14px; }
}

.tribute-share-section {
  margin-top: 20px;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tribute-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ==========================================================================
   Responsive Scaling
   ========================================================================== */

@media (max-width: 768px) {
  .tribute-main-wrapper {
    padding: 60px 16px;
  }
  
  .tribute-flower {
    --flower-size: 46px;
  }
}

@media (max-width: 480px) {
  
  .tribute-flower {
    --flower-size: 38px; /* Target range: 38–52px */
  }
  
  .tribute-cta-btn {
    font-size: var(--type-control-mobile);
    padding: 10px 24px;
  }
}

/* Tribute error styling */
.tribute-error-message {
  display: none;
  background-color: #fdf3f2;
  border: 1px solid #eccbc8;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--re-oxblood);
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}



/* === _his-story-heritage.css === */
/* ==========================================================================
   nanaShankarshet.org — His Story Heritage Additions
   Styles scoped strictly to the Honours & Commemoration sections of the
   biography reading container.
   ========================================================================== */

/* Archival Pair Block styles */
.story-reading-flow .archival-pair-container {
  margin: 32px 0;
}

.story-reading-flow .archival-pair-visuals {
  display: flex;
  gap: 24px;
  margin: 0 0 24px 0;
}

.story-reading-flow .archival-pair-figure {
  background: #faf6ee;
  border: 1px solid #c4b295;
  border-radius: 2px;
  padding: 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.story-reading-flow .archival-pair-figure.left {
  flex: 0 0 240px;
}

.story-reading-flow .archival-pair-figure.right {
  flex: 1;
}

.story-reading-flow .archival-pair-figure .built-photo-container {
  border: 1px solid #1c1a17;
  overflow: hidden;
  background-color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-reading-flow .archival-pair-figure.left .built-photo-container {
  aspect-ratio: 3 / 4;
}

.story-reading-flow .archival-pair-figure.right .built-photo-container {
  aspect-ratio: 16 / 9;
}

.story-reading-flow .archival-pair-figure img.built-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.story-reading-flow .archival-pair-text {
  margin-top: 24px;
}

/* Philatelic Metadata List styles */
.story-reading-flow .archival-metadata-list {
  display: grid;
  grid-template-columns: 240px 1fr;
  row-gap: 12px;
  column-gap: 24px;
  max-width: 65ch;
  margin: 32px auto;
  padding: 0;
}

.story-reading-flow .archival-metadata-list dt {
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.story-reading-flow .archival-metadata-list dd {
  font-family: var(--font-body);
  font-size: var(--body-size);
  color: var(--ink);
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

/* Editorial Section Alignment */
.story-reading-flow .built-section {
  background-color: var(--re-paper);
  color: var(--ink);
  border-top: 1px solid var(--border);
  border-bottom: none;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 56px;
  padding-bottom: 56px;
}


/* Reset story-reading-flow h2 overrides for the card component headline.
   The generic .story-reading-flow h2 rule (specificity 11) in _typography.css
   incorrectly matches .built-section-headline. This rule (specificity 20)
   restores the _cards.css values that the Legacy page uses natively. */
.story-reading-flow .built-section-headline {
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);  /* Match _cards.css — not the larger story h2 */
  color: var(--ink);                           /* Match _cards.css — dark charcoal, not oxblood */
  margin-top: 0;                               /* Remove the 2.5rem top margin from story h2 */
  margin-bottom: 6px;                          /* Match _cards.css tight kicker-to-headline gap */
  letter-spacing: 0.01em;                      /* Match _cards.css */
}

/* Reset story-reading-flow p overrides for the card component subhead.
   The generic .story-reading-flow p rule (specificity 11) in _typography.css
   incorrectly matches .built-section-subhead. This rule (specificity 20)
   restores the _cards.css values that the Legacy page uses natively. */
.story-reading-flow .built-section-subhead {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0;
}

.story-reading-flow .built-section-body {
  display: block;
}

.story-reading-flow .built-section-body > h2:first-of-type {
  margin-top: 0.5rem;
}

.story-reading-flow .story-subsection {
  font-family: var(--font-headline);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--re-oxblood);
  margin-top: 1.8rem;
  margin-bottom: 0.6rem;
}

/* Responsive Styles for Mobile breakpoint */
@media (max-width: 767px) {
  .story-reading-flow .archival-pair-visuals {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .story-reading-flow .archival-pair-figure.left,
  .story-reading-flow .archival-pair-figure.right {
    flex: none;
    width: 100%;
  }

  .story-reading-flow .archival-pair-figure.left .built-photo-container {
    aspect-ratio: 3 / 4;
  }

  .story-reading-flow .archival-pair-figure.right .built-photo-container {
    aspect-ratio: 16 / 9;
  }

  .story-reading-flow .archival-metadata-list {
    grid-template-columns: 1fr;
    row-gap: 4px;
    margin: 24px auto;
  }

  .story-reading-flow .archival-metadata-list dt {
    padding-bottom: 0;
    border-bottom: none;
  }

  .story-reading-flow .archival-metadata-list dd {
    padding-top: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }

  .story-reading-flow .built-section {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .story-reading-flow .built-section-body > h2:first-of-type {
    margin-top: 0.4rem;
  }

  .story-reading-flow .story-subsection {
    font-size: 1.1rem;
    margin-top: 1.4rem;
    margin-bottom: 0.4rem;
  }
}

/* Editorial formatting rules for Shreerang's Words page */
.story-reading-flow .re-letter-dropcap {
  float: left;
  font-family: var(--font-headline);
  font-size: 3.5rem;
  line-height: 0.8;
  font-weight: 700;
  color: var(--re-oxblood);
  margin-right: 12px;
  margin-top: 4px;
}

.story-reading-flow .re-editorial-quote {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--re-oxblood);
  text-align: center;
  max-width: 580px;
  margin: 32px auto;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.story-reading-flow .re-letter-signature-block {
  margin-top: 48px;
  margin-bottom: 48px;
}

.story-reading-flow .re-signature-name {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--re-oxblood) !important;
  margin-bottom: 4px !important;
}

.story-reading-flow .re-signature-title {
  font-size: 0.9rem !important;
  color: var(--re-charcoal);
  opacity: 0.8;
  font-style: italic;
  margin-top: 0 !important;
}

.story-reading-flow .story-descendant-note-subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--re-charcoal);
  opacity: 0.8;
  margin-top: 0;
  margin-bottom: 32px;
  font-style: italic;
}

/* ==========================================================================
   Executive Era Summary Placards (Sprint 2 - Option A)
   ========================================================================== */
.story-reading-flow .built-section-summary-card {
  width: 100%;
  margin-bottom: 32px;
  clear: both;
}

.story-reading-flow .built-verified-band {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--re-border);
  padding-bottom: 10px;
  gap: 12px;
}

.story-reading-flow .built-verified-title {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--re-charcoal);
}

.story-reading-flow .built-scale-capsule {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid #d1c5b0;
  border-radius: 8px;
  padding: 12px 18px;
  background-color: #faf8f4;
  margin: 16px 0 24px;
  width: 100%;
  box-sizing: border-box;
  gap: 12px;
}

@media (max-width: 640px) {
  .story-reading-flow .built-verified-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .story-reading-flow .built-scale-capsule {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
  }
}


/* === _ask.css === */
/* ==========================================================================
   Ask the Archive Section Styling
   ========================================================================== */

.ask-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ask-box-wrap {
  position: relative;
  background-color: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  border-radius: 4px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.ask-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ask-label {
  font-family: var(--font-headline);
  font-size: 22px;
  font-weight: 600;
  color: var(--re-oxblood);
  margin-bottom: 4px;
}

.ask-input-group {
  display: flex;
  position: relative;
  border: 2px solid var(--re-border);
  border-radius: 4px;
  background-color: white;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.ask-input-group:focus-within {
  border-color: var(--re-gold);
  box-shadow: 0 0 8px rgba(195, 155, 86, 0.2);
}

.ask-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--re-charcoal);
  outline: none;
}

.ask-submit-btn {
  background-color: var(--re-oxblood);
  color: white;
  border: none;
  border-radius: 0 2px 2px 0;
  padding: 0 28px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ask-submit-btn:hover {
  background-color: #740a1b;
}

.ask-submit-btn:disabled {
  background-color: #8c8c8c;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Starter Questions */
.starter-questions-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.starter-title {
  font-family: var(--font-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666;
  font-weight: 600;
}

.starter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.starter-chip {
  background-color: rgba(195, 155, 86, 0.08);
  border: 1px solid rgba(195, 155, 86, 0.3);
  border-radius: 20px;
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--re-charcoal);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.starter-chip:hover {
  background-color: var(--re-gold);
  color: white;
  border-color: var(--re-gold);
  transform: translateY(-1px);
}

/* Loading State */
.ask-loading-wrap {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  gap: 16px;
  text-align: center;
}

.spinner-pulse {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(195, 155, 86, 0.2);
  border-top-color: var(--re-oxblood);
  border-radius: 50%;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-family: var(--font-headline);
  font-size: var(--body-size);
  font-style: italic;
  color: var(--re-muted);
}

/* Answer Outputs */
.answer-card-wrap {
  display: none;
  background-color: var(--re-paper-soft);
  border: 1px solid var(--re-border);
  border-radius: 4px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.answer-header {
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--re-gold-text);
  margin-bottom: 20px;
  font-weight: 600;
  border-bottom: 1px solid var(--re-border);
  padding-bottom: 8px;
}

.answer-body {
  font-family: var(--font-headline);
  font-size: 21px;
  line-height: 1.6;
  color: var(--re-charcoal);
  margin-bottom: 32px;
}

.answer-body p {
  margin-top: 0;
  margin-bottom: 20px;
}

.answer-body p:last-child {
  margin-bottom: 0;
}

/* Sources & Citations */
.sources-section {
  border-top: 1px solid var(--re-border);
  padding-top: 24px;
  margin-bottom: 28px;
}

.sources-title {
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666;
  font-weight: 600;
  margin-bottom: 12px;
}

.sources-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.source-item {
  font-family: var(--font-body);
  font-size: 13px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}

.source-item::before {
  content: "•";
  color: var(--re-gold-text);
  font-weight: bold;
}

/* Feedback Section */
.feedback-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--re-border);
  padding-top: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.feedback-question {
  font-family: var(--font-body);
  font-size: 13px;
  color: #666;
}

.feedback-buttons {
  display: flex;
  gap: 12px;
}

.feedback-btn {
  background-color: white;
  border: 1px solid var(--re-border);
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--re-charcoal);
}

.feedback-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.feedback-btn:hover {
  border-color: var(--re-gold);
  background-color: rgba(195, 155, 86, 0.05);
}

.feedback-btn.active {
  background-color: var(--re-oxblood);
  color: white;
  border-color: var(--re-oxblood);
}

.feedback-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.feedback-thanks {
  display: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: #2b7a4b;
  font-weight: 500;
  animation: fadeIn 0.3s ease;
}

/* Error banner */
.ask-error-card {
  display: none;
  background-color: #fdf3f2;
  border: 1px solid #eccbc8;
  border-radius: var(--radius);
  padding: 16px 24px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--re-oxblood);
  margin-top: 24px;
  animation: fadeIn 0.3s ease;
}

/* Responsive Overrides */
@media (max-width: 767px) {
  .ask-box-wrap {
    padding: 20px 16px;
  }
  
  .answer-card-wrap {
    padding: 24px 16px;
  }

  .ask-input {
    padding: 12px;
    font-size: 14px;
  }

  .ask-submit-btn {
    padding: 0 16px;
    font-size: 13px;
  }
}



/* === _responsive.css === */




/* Active state for Table of Contents sidebar list links */
.toc-list li.active a {
  color: var(--teal);
  font-weight: 700;
  background-color: rgba(
    31,
    61,
    58,
    0.08
  ); /* subtle active teal tint backdrop */
}

/* Collapsible card narrative blocks */
.built-narrative-extra {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease-out;
  opacity: 0;
}
.built-narrative-extra.open {
  opacity: 1;
}

/* Elegant Read More inline toggle button */
.btn-read-more {
  background: none;
  border: none;
  color: var(--bronze);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 6px 0;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.18s ease;
}
.btn-read-more:hover {
  color: var(--teal);
}

.btn-read-more:active {
  transform: translateY(1px);
}

.btn-read-more:disabled,
.btn-read-more.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}






.built-verified-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(31, 61, 58, 0.08);
  border: 1px solid rgba(31, 61, 58, 0.25);
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 4px;
}

/* Walk Mumbai layout stop photo placeholders */
.photo-placeholder {
  border: 1px dashed var(--border);
  background: #faf8f5;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 0.9rem;
  border-radius: var(--radius);
  margin-bottom: 16px;
  width: 100%;
}

/* Audio button disabled style alignment */
.audio-btn {
  background: var(--teal);
  color: var(--paper);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: not-allowed;
  opacity: 0.75;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
  height: auto;
  width: auto;
}

.stop-body h3 {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
}

/* Standardized Aspect Ratios */
.aspect-16-9 {
  aspect-ratio: 16 / 9;
}
.aspect-3-4 {
  aspect-ratio: 3 / 4;
}
.aspect-1-1 {
  aspect-ratio: 1 / 1;
}
.aspect-3-2 {
  aspect-ratio: 3 / 2;
}


/* ==========================================================================
   Photo Lightbox Overlay Modal Style Guide Specs
/* Walk Tabs Styling */
.walk-tabs-container {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 32px 0 40px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 16px;
}

.walk-tab-btn {
  background: none;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-headline);
  border-radius: var(--radius);
  transition: all 0.3s ease;
  color: var(--muted);
}

.walk-tab-btn:active {
  transform: translateY(1px);
}

.walk-tab-btn:disabled,
.walk-tab-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.walk-tab-btn .tab-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.1;
}

.walk-tab-btn .tab-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
/* --------------------------------------------------------------------------
   RESPONSIVE — MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .redesign-homepage #row-01 {
    height: 76px !important;
    min-height: 76px !important;
  }

  /* Hero Mobile Layout: Eyebrow + Headline top, Nana Medallion center with CSMT Dome rising on right, Description on clean parchment below */
  .redesign-homepage #row-02 {
    min-height: 0 !important;
    height: auto !important;
    position: relative !important;
    padding: 32px 20px 36px !important;
    overflow: hidden !important;
    background: var(--re-paper) !important;
  }

  /* CSMT: strictly confined to the upper 380px, with horizontal mask to ensure left text sits on pure parchment, and vertical mask fading out before description text */
  .redesign-homepage .re-hero-csmt-container {
    position: absolute !important;
    left: 0 !important;
    top: 24px !important;
    width: 100% !important;
    height: 380px !important;
    z-index: 1 !important;
    overflow: hidden !important;
    mask-image: linear-gradient(
      180deg,
      black 0%,
      black 52%,
      rgba(0, 0, 0, 0.3) 74%,
      transparent 94%
    ) !important;
    -webkit-mask-image: linear-gradient(
      180deg,
      black 0%,
      black 52%,
      rgba(0, 0, 0, 0.3) 74%,
      transparent 94%
    ) !important;
  }

  .redesign-homepage .re-hero-csmt-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 18% top !important;
    opacity: 0.70 !important;
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      transparent 36%,
      rgba(0, 0, 0, 0.4) 56%,
      black 76%
    ) !important;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      transparent 36%,
      rgba(0, 0, 0, 0.4) 56%,
      black 76%
    ) !important;
  }

  .redesign-homepage .re-hero-medallion-container {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 180px !important;
    width: min(58vw, 215px) !important;
    height: min(58vw, 215px) !important;
    z-index: 4 !important;
  }

  .redesign-homepage .re-hero-content {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    pointer-events: auto !important;
    z-index: 5 !important;
  }

  .redesign-homepage .re-hero-eyebrow {
    font-size: 12px !important;
    letter-spacing: 2.2px !important;
    margin-bottom: 12px !important;
    line-height: 1 !important;
    color: var(--re-oxblood) !important;
  }

  .redesign-homepage .re-hero-headline {
    font-size: clamp(38px, 10.5vw, 46px) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.035em !important;
    margin: 0 !important;
    color: var(--re-ink) !important;
  }

  /* Description: starts at margin-top: 245px (below the 215px medallion), sitting on 100% clean parchment */
  .redesign-homepage .re-hero-description {
    margin-top: 245px !important;
    margin-bottom: 22px !important;
    max-width: 100% !important;
    font-size: 15.5px !important;
    line-height: 1.6 !important;
    color: var(--re-ink) !important;
    font-weight: 500 !important;
    padding: 0 !important;
  }

  .redesign-homepage .re-hero-description br {
    display: inline !important;
  }

  .redesign-homepage .re-hero-cta {
    margin-top: 0 !important;
    display: inline-block !important;
    align-self: flex-start !important;
    font-size: 12px !important;
    letter-spacing: 1.8px !important;
    color: var(--re-oxblood) !important;
    border-bottom: 1px solid var(--re-oxblood) !important;
  }

  /* Hide decorative overlays on mobile — no visual impact, clean parchment */
  .redesign-homepage .re-hero-cracks,
  .redesign-homepage .re-hero-archival-texture {
    display: none !important;
  }

  .redesign-homepage #row-03 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 40px 20px !important;
    gap: 24px !important;
  }

  .redesign-homepage .re-quote-portrait-wrap {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 145px !important;
    height: 140px !important;
    flex-basis: auto !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
  }
  .redesign-homepage .re-quote-container {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 12px !important;
  }
  .redesign-homepage .re-quote-mark {
    position: absolute !important;
    left: 8px !important;
    top: -24px !important;
    font-size: 54px !important;
    line-height: 1 !important;
  }
  .redesign-homepage .re-quote-text {
    font-size: 21px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }
  .redesign-homepage .re-quote-seal-bg {
    display: none !important;
  }
  .redesign-homepage .re-quote-ship {
    display: none !important;
  }

  .redesign-homepage #row-04 {
    display: block;
    padding: 68px 24px 28px;
    height: auto !important; /* Overrides inline height 106px on mobile viewports */
  }
  .redesign-homepage .re-timeline-title {
    left: 50% !important;
    top: 25px !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    text-align: center !important;
  }
  .redesign-homepage .re-timeline-axis {
    left: 38px;
    right: auto;
    top: 81.5px;             /* Start axis line at center of first dot */
    bottom: 42px;            /* End axis line near center of last dot */
    width: 1px;
    height: auto;            /* Reset desktop horizontal height */
  }

  .redesign-homepage .re-timeline-milestone {
    min-height: 62px;
    padding-left: 58px;
    margin-bottom: 10px;
  }

  .redesign-homepage .re-milestone-year {
    margin-bottom: 8px;
    font-size: 27px;
  }

  .redesign-homepage .re-milestone-dot {
    top: 13.5px;             /* Center dot vertically on center of year text */
    left: 14px;              /* Align dot horizontally on axis line */
    transform: translate(-50%, -50%); /* Centered mathematically */
  }

  .redesign-homepage .re-milestone-desc {
    padding-top: 0;
    font-size: var(--type-timeline-desc);
  }

  .redesign-homepage #row-05 {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 48px 24px 36px;
  }
  .redesign-homepage .re-built-header-block {
    text-align: center;
    margin-bottom: 12px;
  }
  .redesign-homepage .re-built-heading {
    font-size: 26px;
    line-height: 1.2;
  }
  .redesign-homepage .re-built-subhead {
    font-size: 14px;
  }
  .redesign-homepage .re-built-card {
    width: 100%;
    height: auto;
    min-height: 400px;
  }
  .redesign-homepage .re-card-image {
    height: 200px;
  }
  .redesign-homepage .re-card-seal {
    top: 183px;
  }

  .redesign-homepage #row-06 {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .redesign-homepage .re-walk-title {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 32px 0 20px !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 10 !important;
  }
  .redesign-homepage .re-walk-map-container {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: calc(100% - 32px) !important;
    height: 300px !important;
    margin: 0 16px 24px !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
  }
  .redesign-homepage .re-walk-map-container::after {
    display: none !important;
  }
  .redesign-homepage .re-walk-dark-panel {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 32px 16px !important;
    gap: 24px !important;
  }
  .redesign-homepage .re-walk-stops-list {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 12px !important;
    padding: 0 !important;
    overflow-y: visible !important;
  }
  .redesign-homepage .re-walk-stops-list::before {
    display: none !important;
  }
  .redesign-homepage .re-walk-stop-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    width: 100% !important;
  }
  .redesign-homepage .re-stop-num {
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
  }
  .redesign-homepage .re-stop-name {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  .redesign-homepage .re-walk-photo-wrap {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 260px !important;
    height: 190px !important;
    margin: 0 auto !important;
    padding: 6px 6px 16px !important;
    transform: rotate(-1deg) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
    flex-shrink: 0 !important;
  }
  .redesign-homepage .re-walk-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .redesign-homepage .re-walk-details {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .redesign-homepage .re-detail-title {
    font-size: 20px !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
  }
  .redesign-homepage .re-detail-text {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    color: #dcd6cd !important;
  }
  .redesign-homepage .re-detail-link {
    display: inline-block !important;
    font-size: 12px !important;
    padding: 6px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: var(--radius) !important;
    transition: all 0.2s ease !important;
  }

  .redesign-homepage #row-07 {
    padding: 78px 24px 30px;
  }
  .redesign-homepage .re-thennow-title {
    left: 50% !important;
    top: 26px !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 24px !important;
  }

  .redesign-homepage .re-slider-container {
    height: 320px;
  }

  .redesign-homepage .re-slider-instruction {
    left: 24px;
    bottom: 12px;
    font-size: 11px;
  }

  .redesign-homepage .re-slider-handle-pill {
    font-size: 9px;
    padding: 3px 8px;
    bottom: calc(100% + 8px);
  }



  .redesign-homepage #row-09 {
    padding: 30px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    height: auto !important;
  }
  .redesign-homepage #row-09 .re-footer-brand {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    height: auto !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .redesign-homepage #row-09 .re-footer-tagline {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    height: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  .redesign-homepage #row-09 .re-footer-socials {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    height: auto !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
  }
  .redesign-homepage #row-09 .re-footer-provenance-desktop,
  .redesign-homepage #row-09 .re-footer-author-desktop {
    display: none !important;
  }
  .redesign-homepage #row-09 .re-footer-provenance-mobile,
  .redesign-homepage #row-09 .re-footer-author-mobile {
    display: block !important;
  }
}

/* ==========================================================================
   FINAL DESKTOP FIXES — WALK + ARCHIVE
   These overrides repair the two sections whose original fixed-width
   positioning conflicts with the responsive redesign.
   ========================================================================== */

@media (min-width: 768px) {
  /* ROW 06 — WALK MUMBAI WITH NANA */
  .redesign-homepage #row-06 {
    height: 420px !important;
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .redesign-homepage #row-06 .re-walk-map-container {
    grid-column: 1;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 420px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .redesign-homepage #row-06 #re-walk-map {
    width: 100%;
    height: 100%;
  }
  .redesign-homepage #row-06 .re-walk-dark-panel {
    grid-column: 2;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 420px;
    background: var(--re-dark);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 32px;
    gap: 20px;
  }
  .redesign-homepage #row-06 .re-walk-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    top: 30px;
    width: auto;
    text-align: center;
    font-size: 12px;
    letter-spacing: 2.2px;
    color: var(--re-gold);
    margin: 0;
  }

  .redesign-homepage #row-06 .re-walk-stops-list {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 190px !important;
    height: 285px !important;
    overflow-y: auto !important;
    flex: 0 0 190px !important;
    align-self: center !important;
  }

  .redesign-homepage #row-06 .re-walk-photo-wrap {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 170px !important;
    height: 155px !important;
    padding: 7px 7px 18px !important;
    flex: 0 0 170px !important;
    transform: rotate(-1.5deg) !important;
  }

  .redesign-homepage #row-06 .re-walk-details {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    flex: 1 !important;
    height: 235px !important;
  }
  .redesign-homepage #row-06 .re-detail-title {
    font-size: 24px;
    line-height: 1.05;
    margin-bottom: 12px;
  }
  .redesign-homepage #row-06 .re-detail-text {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 20px;
  }
  .redesign-homepage #row-06 .re-detail-link {
    font-size: 12px;
    padding: 7px 0 5px;
  }



  /* Honors table desktop-only styling for status description prefix */
  .honors-table .status-desc::before {
    content: " \2014  ";
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --page-padding: 32px;
  }

  /* Main content container tablet padding */
  .redesign-homepage main.container,
  .redesign-homepage .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Header tablet padding */
  .redesign-homepage #row-01,
  .re-header {
    padding-left: 32px;
    padding-right: 32px;
  }

  /* Built sub-navigation tablet padding */
  .built-subnav {
    padding: 12px 32px;
  }

  /* Built sections on tablet */
  .built-section {
    padding-left: 32px;
    padding-right: 32px;
  }

  /* Footer tablet padding */
  .redesign-homepage #row-09,
  #row-09 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Hero Tablet Architecture: Fully visible Nana Medallion & CSMT Dome (Zero Cutoff) */
  .redesign-homepage #row-02 {
    min-height: 640px;
    position: relative;
    overflow: hidden;
  }
  .redesign-homepage .re-hero-content {
    max-width: 100%;
    padding: 44px 32px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 5;
  }
  .redesign-homepage .re-hero-eyebrow {
    font-size: 12px;
    letter-spacing: 2.2px;
    margin-bottom: 14px;
    color: var(--re-oxblood);
  }
  .redesign-homepage .re-hero-headline {
    font-size: clamp(48px, 6.5vw, 56px);
    line-height: 0.88;
    margin-bottom: 0;
    color: var(--re-ink);
  }
  .redesign-homepage .re-hero-medallion-container {
    position: absolute;
    left: 32px;
    top: 210px;
    width: min(35vw, 270px);
    height: min(35vw, 270px);
    z-index: 4;
  }
  .redesign-homepage .re-hero-csmt-container {
    position: absolute;
    right: 0;
    top: 24px;
    width: 68%;
    height: calc(100% - 24px);
    z-index: 2;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 28%, black 62%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 28%, black 62%);
  }
  .redesign-homepage .re-hero-csmt-img {
    object-position: 28% top;
    opacity: 0.88;
  }
  .redesign-homepage .re-hero-description {
    margin-top: 295px;
    margin-bottom: 22px;
    max-width: 460px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--re-charcoal);
  }
  .redesign-homepage .re-hero-cta {
    margin-top: 0;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  /* Tablet Landscape (1024px - 1199px) refinement:
     Text on left (0..40%), Nana Medallion in center (39%..70%), CSMT Grand Central Dome on right (71%..100%).
     Clearance between Medallion and Dome center is +204px. Zero overlap! */
  .redesign-homepage #row-02 {
    min-height: 580px;
  }
  .redesign-homepage .re-hero-content {
    max-width: 40%;
    padding: 64px 0 48px 40px;
    display: grid;
    grid-template-areas: "eyebrow" "title" "subtitle" "cta";
  }
  .redesign-homepage .re-hero-eyebrow {
    grid-area: eyebrow;
    margin-bottom: 20px;
  }
  .redesign-homepage .re-hero-headline {
    grid-area: title;
    font-size: clamp(50px, 5.5vw, 64px);
    margin-bottom: 24px;
  }
  .redesign-homepage .re-hero-description {
    grid-area: subtitle;
    margin-top: 0;
    margin-bottom: 24px;
    max-width: 100%;
  }
  .redesign-homepage .re-hero-cta {
    grid-area: cta;
  }
  .redesign-homepage .re-hero-medallion-container {
    left: 39%;
    top: 50%;
    transform: translateY(-50%);
    width: min(32vw, 310px);
    height: min(32vw, 310px);
  }
  .redesign-homepage .re-hero-csmt-container {
    width: 64%;
    top: 24px;
    height: calc(100% - 24px);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.15) 15%, black 35%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.15) 15%, black 35%);
  }
  .redesign-homepage .re-hero-csmt-img {
    object-position: 6% top;
    opacity: 0.92;
  }
}

/* Main content container padding for visual parity (avoid touching browser viewport edge) */
.redesign-homepage main.container {
  padding: 0 64px !important;
}

/* Sticky, compact sub-navigation jump-link bar */
.built-subnav {
  position: sticky;
  top: 0;
  z-index: 90;
  background-color: var(--re-paper-soft);
  border-bottom: 1px solid var(--re-border);
  padding: 12px 64px;
  box-shadow: 0 4px 12px rgba(48, 36, 26, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.built-subnav-logo {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--re-ink);
  text-decoration: none;
  letter-spacing: 0.05em;
}

.built-subnav-logo:hover {
  color: var(--re-oxblood);
  text-decoration: none;
}

.built-subnav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  margin-left: auto;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  flex-wrap: nowrap;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.built-subnav-menu::-webkit-scrollbar {
  display: none;
}

.built-subnav-item {
  flex-shrink: 0;
}

.built-subnav-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--type-control);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--re-muted);
  text-decoration: none;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  border-radius: var(--radius);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.built-subnav-item a svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.built-subnav-item a:hover {
  color: var(--re-oxblood);
  background-color: rgba(140, 48, 40, 0.04);
}

.built-subnav-item.active a {
  background-color: var(--re-oxblood);
  color: var(--re-paper-soft);
}

/* Responsive Overrides */
@media (max-width: 767px) {

  /* Grid and columns stacking */
  .built-section {
    padding: var(--space-section-gap-mobile) 24px;
  }
  .built-section-body {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .built-header {
    padding: 40px 24px 0;
  }
  /* General mobile padding */
  .container {
    padding: 0 20px;
  }
  .redesign-homepage main.container {
    padding: 0 24px !important;
  }
  /* Scale headline sizes */
  .page-hero {
    min-height: 290px;
    padding: 70px 24px 35px;
    justify-content: flex-start;
  }
  .page-hero .hero-title {
    font-size: 26px;
  }
  /* Tables on mobile: scrollable wrap */
  .source-table {
    display: block;
    overflow-x: auto;
    width: 100%;
  }

  /* Honors table stacked layout on mobile */
  .honors-table {
    display: block;
    width: 100%;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    margin: 20px 0;
  }

  .honors-table tbody {
    display: block;
    width: 100%;
  }

  .honors-table tr {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background-color: var(--re-paper-soft);
    border: 1px solid var(--re-border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    gap: 8px;
    box-shadow: var(--re-shadow);
  }

  .honors-table tr:last-child {
    margin-bottom: 0;
  }

  .honors-table tr:first-child {
    display: none;
  }

  .honors-table td {
    display: block;
    padding: 0 !important;
    border-bottom: none !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .honors-table td:first-child {
    font-family: var(--font-headline);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--re-ink);
  }

  .honors-table td:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .honors-table .status-desc {
    display: block;
    color: var(--re-muted);
    font-size: 0.85rem;
    line-height: 1.4;
  }
  /* Sticky subnav layout for mobile screen size */
  .built-subnav {
    padding: 10px 16px;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .built-subnav-logo {
    text-align: center;
    font-size: 1rem;
  }
  .built-subnav-menu {
    justify-content: flex-start;
    margin-left: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    white-space: nowrap;
    padding-bottom: 4px;
    padding-right: 32px;
    -webkit-overflow-scrolling: touch;
    /* Subtle right-edge fade — signals that more items exist off-screen */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  }
  .built-subnav-item a {
    /* 12px top + 12px bottom + ~20px line-height ≈ 44px touch target */
    padding: 12px 10px;
    font-size: var(--type-control);
  }
  .redesign-homepage .built-media-framed {
    float: none !important;
    margin: 24px auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .redesign-homepage .re-header {
    padding: 0 clamp(16px, 2.2vw, 36px) !important;
    gap: clamp(10px, 1.4vw, 18px) !important;
    height: 88px !important;
  }

  .redesign-homepage .re-header-brand {
    min-width: 0 !important;
    gap: 10px !important;
  }

  .redesign-homepage .re-header-seal-wrap {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  .redesign-homepage .re-brand-title {
    font-size: 14px !important;
    letter-spacing: 0.035em !important;
  }

  .redesign-homepage .re-brand-subtitle {
    font-size: 11px !important;
    margin-top: 3px !important;
  }

  .redesign-homepage .re-header-nav {
    gap: clamp(8px, 1.2vw, 18px) !important;
  }

  .redesign-homepage .re-header-nav a {
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
  }

  .redesign-homepage .re-header-lang {
    font-size: 13px !important;
    gap: 5px !important;
  }

  .redesign-homepage .re-header-cta {
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.10em !important;
    white-space: nowrap !important;
  }

  .redesign-homepage main.container {
    padding: 0 clamp(20px, 3vw, 36px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .redesign-homepage main.container {
    padding: 0 20px !important;
  }
}

@media (max-width: 1023px) {
  .redesign-homepage .re-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 16px !important;
    gap: 8px !important;
    height: 76px !important;
  }

  .redesign-homepage .re-header-brand {
    min-width: 0 !important;
  }

  .redesign-homepage .re-header-nav,
  .redesign-homepage .re-header-lang {
    display: none !important;
  }

  .redesign-homepage .re-header-nav.open {
    display: flex !important;
    top: 76px !important;
  }

  .redesign-homepage .re-header-cta {
    display: inline-flex !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: var(--type-control-mobile) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
  }

  .redesign-homepage .re-nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .redesign-homepage .re-header-seal-wrap {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }
  .redesign-homepage .re-brand-title {
    font-size: 12px !important;
  }
  .redesign-homepage .re-brand-subtitle {
    font-size: 12px !important;
  }

  .re-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Sticky nav collapsing & Two-Tier Editorial Hierarchy */
  .re-header-nav {
    display: none;
    position: absolute !important;
    top: 76px !important;
    left: 0 !important;
    width: 100% !important;
    background-color: var(--re-paper-soft) !important;
    border-bottom: 2px solid var(--re-border) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 20px 24px 28px !important;
    gap: 0 !important;
    box-shadow: 0 16px 32px rgba(48, 36, 26, 0.14) !important;
    z-index: var(--z-dropdown, 100) !important;
  }

  .re-header-nav.open {
    display: flex !important;
  }

  .re-nav-group {
    display: flex !important;
    flex-direction: column !important;
  }

  .re-nav-group-label {
    display: block !important;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--re-muted);
    text-transform: uppercase;
    margin: 12px 0 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--re-border);
  }

  .re-nav-primary .re-nav-group-label {
    margin-top: 0;
  }

  .re-nav-primary a {
    display: block;
    padding: 13px 0;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--re-ink);
    border-bottom: 1px solid rgba(109, 96, 79, 0.12);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 180ms ease, padding-left 180ms ease;
  }

  .re-nav-primary a:hover,
  .re-nav-primary a.active {
    color: var(--re-oxblood);
    padding-left: 4px;
  }

  .re-nav-utility {
    margin-top: 14px;
  }

  .re-nav-utility a {
    display: block;
    padding: 10px 0;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--re-charcoal);
    border-bottom: 1px solid rgba(109, 96, 79, 0.08);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 180ms ease, padding-left 180ms ease;
  }

  .re-nav-utility a:hover,
  .re-nav-utility a.active {
    color: var(--re-oxblood);
    padding-left: 4px;
  }

  .re-nav-utility a.re-nav-utility-only {
    display: block !important;
  }

  /* Support the Petition - Distinct Oxblood Pill */
  .re-nav-utility a.re-nav-petition-pill {
    display: inline-block !important;
    margin-top: 14px;
    padding: 12px 24px !important;
    background-color: var(--re-oxblood);
    color: var(--re-paper-soft) !important;
    border-radius: 999px;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center !important;
    border-bottom: none !important;
    width: fit-content;
    transition: background-color 180ms ease, transform 180ms ease;
  }

  .re-nav-utility a.re-nav-petition-pill:hover {
    background-color: #742720;
    color: var(--re-paper-soft) !important;
    transform: translateY(-1px);
    padding-left: 24px !important;
  }

  .re-header-lang {
    display: none !important; /* Collapsed on mobile header bar */
  }
  
  .re-header-cta {
    margin-left: auto !important;
    margin-right: 15px !important;
  }

  /* Generic mobile responsive stacked layout for all source tables */
  .source-table {
    display: block;
    width: 100%;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    margin: 24px 0;
  }

  .source-table tbody {
    display: block;
    width: 100%;
  }

  .source-table tr {
    display: flex;
    flex-direction: column;
    padding: 18px;
    background-color: var(--re-paper-soft);
    border: 1px solid var(--re-border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    gap: 8px;
    box-shadow: var(--re-shadow);
  }

  .source-table tr:last-child {
    margin-bottom: 0;
  }

  /* Hide the table header row on mobile */
  .source-table tr:first-child {
    display: none;
  }

  .source-table td {
    display: block;
    padding: 0 !important;
    border-bottom: none !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Style the first cell as the title/header of the record card */
  .source-table td:first-child {
    font-family: var(--font-headline);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--re-ink);
  }

  /* Style the middle column (author) in a 3-column table (Title, Author, Status) */
  .source-table td:nth-child(2):not(:last-child) {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--re-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .source-table td:nth-child(2):not(:last-child)::before {
    content: "By ";
    color: var(--re-charcoal);
    text-transform: none;
    font-weight: 400;
  }

  /* Style the last cell (status/notes) */
  .source-table td:last-child {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--re-charcoal);
    line-height: var(--lh-body);
  }
}