/* ================================================================
   style.css — Homepage only (index.html)
   TLC Reference Library · tlctrial.com

   Organized top-to-bottom in document order:
     1. Font & global base
     2. Nav bar (sticky top)
     3. Hero banner
     4. Page TOC (jump links)
     5. Essay content (Background section)
     6. Summary blocks (white cards)
     7. Pull quotes
     8. Image hover tooltips
     9. Bridge section (subpage cards)
    10. Reference list
    11. Copy-AMA citation button
    12. Search/filter bar
    13. Footer
    14. Back-to-top button
    15. Media queries (large → small)
   ================================================================ */


/* ----------------------------------------
   1. FONT & GLOBAL BASE
   ---------------------------------------- */

@font-face {
  font-family: 'Modern Typewriter';
  src: url('media/MODERN_TYPEWRITER.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Background image asset notes:
   media/site-background-desktop.png   2560×1600 or 2880×1800
   media/site-background-mobile.png    1440×2200 or 1536×2048
   media/website-hero-banner.webp     2560×1280 or 2880×1440
   media/homepage-hero-mobile.webp      2000×1000 or 2400×1200 */
:root {
  --site-background-image: url('media/site-background-desktop.png');
  --site-background-image-mobile: url('media/site-background-mobile.png');
  --homepage-hero-image: url('media/homepage-hero-desktop1.webp');
  --homepage-hero-image-mobile: url('media/homepage-hero-mobile.webp');
  --nav-hover-accent: #FF2042;
  --essay-block-max-width: min(56vw, 980px);
  --essay-block-padding-x: 1.5vw;
  --reference-list-max-width: 800px;
  --reference-list-padding-x: 12px;
  --flank-essay-max-width: min(47vw, 980px);
  --flank-side-max-width: 40vw;
  --pull-quote-max-width: min(55vw, 980px);
}

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

html { background-color: #000; }

body {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: #000;
  background-image: var(--site-background-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Skip-to-content: hidden until keyboard focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 8px 16px;
  background: #0f4c81;
  color: #fff;
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  text-decoration: none;
}
.skip-link:focus { left: 10px; top: 10px; }


/* ----------------------------------------
   2. NAV BAR — sticky top navigation
   ---------------------------------------- */

.nav-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 6px 0;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 100;
  background: #000;
}

.nav-cards > .nav-card,
.nav-cards > .dropdown-container { flex: 0 0 auto; }

/* Site identity link */
.nav-home {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  color: #fff;
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: color 140ms ease, text-shadow 140ms ease, transform 140ms ease;
}
.nav-home:hover {
  color: var(--nav-hover-accent);
  text-shadow: 0 0 12px rgba(255,32,66,0.28);
  transform: translateY(-1px);
}

/* Nav card buttons */
.nav-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: #010102;
  color: #fff;
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid #fff;
  border-radius: 0;
  box-shadow: 0 6px 14px rgba(15,76,129,0.18);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.nav-card:hover {
  background: #121417;
  border-color: var(--nav-hover-accent);
  box-shadow: 0 0 0 1px rgba(255,32,66,0.18), 0 10px 22px rgba(255,32,66,0.22);
  color: var(--nav-hover-accent);
  transform: translateY(-1px);
}
.nav-card:focus { outline: 2px solid #1f33ea; outline-offset: 0; }
.nav-card .nav-title { letter-spacing: 0.02em; }

/* Hamburger toggle (hidden on desktop, shown via media query) */
.hamburger {
  display: none;
  background: none;
  border: 2px solid #fff;
  color: #fff;
  font-size: 24px;
  padding: 6px 10px;
  cursor: pointer;
  line-height: 1;
  border-radius: 4px;
  margin-left: auto;
}
.hamburger:hover { background: rgba(255,255,255,0.1); }

/* Dropdown container */
.dropdown-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dropdown-container > .nav-card { flex: 0 0 auto; overflow: hidden; }

/* Dropdown panel (hidden until JS adds .open) */
.dropdown-links {
  display: none;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  margin-top: 1px;
  padding: 8px;
  background: #252121f3;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 160px;
}
.dropdown-links.open { display: flex; }

/* Links inside dropdown */
.sub-nav-card {
  padding: 8px 14px;
  border-radius: 2px;
  border: 1px solid #012366;
  background: linear-gradient(30deg, #0a0b0c, #0909099b, #20040441);
  box-shadow: 0 10px 25px rgba(15,76,129,0.12);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: 13px;
  white-space: nowrap;
}
.sub-nav-card:hover { background: #0a0b0b; color: var(--nav-hover-accent); text-decoration: underline; }


/* ----------------------------------------
   3. HERO BANNER
   ---------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
}

/* Banner image container */
.hero-banner {
  position: relative;
  display: grid;
  grid-template-areas: 'stack';
  width: min(92vw, 800px);
  margin: 10px auto 0;
}
.hero-banner::before {
  content: '';
  grid-area: stack;
  display: block;
  width: 100%;
  aspect-ratio: 5307 / 2140;
  background-image: var(--homepage-hero-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Title text below banner */
.hero-title {
  width: min(76vw, 1360px);
  margin: 0 auto;
  padding: 10px 2.35%;
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: clamp(20px, 2.08vw, 21px);
  font-weight: bold;
  color: #fff;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}


/* ----------------------------------------
   4. PAGE TOC — jump links below hero
   ---------------------------------------- */

.page-toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: min(76vw, 1360px);
  max-width: 100%;
  margin: 16px auto 10px;
  padding: 0 12px;
}
.page-toc a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  background: #010102;
  color: #fff;
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.05;
  white-space: nowrap;
  border: 1px solid #fff;
  border-radius: 0;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.page-toc a:hover {
  background: #121417;
  border-color: var(--nav-hover-accent);
  box-shadow: 0 8px 18px rgba(255,32,66,0.18);
  color: var(--nav-hover-accent);
  transform: translateY(-1px);
}

/* Scroll offset for sticky nav */
#abstract-content,
#background-content,
#what-happened-after,
#ref-list {
  scroll-margin-top: 56px;
}


/* ----------------------------------------
   4b. STATS BAR — animated trial counters
   ---------------------------------------- */

.stats-bar {
  width: min(76vw, 1360px);
  max-width: 100%;
  margin: 0 auto 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: #000;
}

.stats-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 12px;
  background: #000000;
  border: 1px solid #1a2030;
  text-align: center;
  gap: 6px;
}

.stats-bar__number {
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: clamp(20px, 3.5vw, 30px);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.02em;
  /* JS writes the counted value here */
}

.stats-bar__label {
  font-family: Courier, monospace;
  font-size: clamp(11px, 1.1vw, 13px);
  color: rgb(255, 255, 255);
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  max-width: 160px;
}

/* Number accent color per stat */
.stats-bar__item:nth-child(1) .stats-bar__number { color: #8C1919; }
.stats-bar__item:nth-child(2) .stats-bar__number { color: #8C1919; }   /* contamination — amber */
.stats-bar__item:nth-child(3) .stats-bar__number { color: #8C1919; }   /* funding — steel blue */
.stats-bar__item:nth-child(4) .stats-bar__number { color: #8C1919; }   /* 1 trial — red */

/* Tablet: 2×2 */
@media (max-width: 768px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: 1 column */
@media (max-width: 480px) {
  .stats-bar { grid-template-columns: 1fr; }
  .stats-bar__item { padding: 16px 12px; }
}


/* ----------------------------------------
   5. ESSAY CONTENT — Background section
   ---------------------------------------- */

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.essay-content { width: 100%; }

/* Section headings ("Introduction", "Background", "What Happened After", "References") */
.ref-heading {
  --header-max-width: var(--essay-block-max-width);
  --header-padding-x: var(--essay-block-padding-x);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  width: min(100%, var(--header-max-width));
  margin: 32px auto 8px;
  padding: 0 var(--header-padding-x) 4px;
  line-height: 1.05;
  letter-spacing: 0.05em;
}
.ref-heading::after {
  content: '';
  flex: 1 1 120px;
  height: 1px;
  background: rgba(255,255,255,0.42);
  transform: translateY(-3px);
}
.essay-content .ref-heading:first-child {
  margin-top: 8px;
}
.ref-heading--references {
  --header-max-width: var(--reference-list-max-width);
  --header-padding-x: var(--reference-list-padding-x);
}
.ref-heading--section-gap {
  margin-top: 10px;
}
.essay-content .ref-heading--section-gap:first-child {
  margin-top: 10px;
}

/* Background year sub-headings (1990, 1991, 2001, etc.) */
.bg-year-heading {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  width: min(100%, var(--essay-block-max-width));
  margin: 0 auto 8px;
  padding: 0 var(--essay-block-padding-x) 4px;
  line-height: 1.1;
}
.bg-year-heading::after {
  content: '';
  flex: 1 1 100px;
  height: 1px;
  background: rgba(255,255,255,0.42);
  transform: translateY(-2px);
}
.bg-year-heading:first-of-type { margin-top: 0; }


/* ----------------------------------------
   6. SUMMARY BLOCKS — white content cards
   ---------------------------------------- */

.summary-block {
  width: min(100%, var(--essay-block-max-width));
  max-width: var(--essay-block-max-width);
  padding: 20px var(--essay-block-padding-x);
  margin: 0 auto 16px;
  line-height: 1.75;
  font-size: medium;
  color: #000;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 400;
  background: hsl(60, 5%, 87%);
  border: 1px solid #000;
  box-shadow: 0 2px 8px rgb(0,0,0);
}

/* Paragraph spacing */
.summary-block p {
  margin: 0 0 12px;
  text-align: left;
  text-indent: 1.5em;
}
.summary-block p:first-child { text-indent: 0; }
.summary-block p:last-child { margin-bottom: 0; }

/* Block quotes */
.summary-block p.bq { text-indent: 0; margin-left: 0.75em; margin-right: 0.75em; }

/* Sub-section headings (bold+italic lead-in: "Environmental Exposure Uncontrolled." etc.) */
.summary-block p > strong:first-child > em,
.summary-block p > strong:first-child em {
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: underline;
  letter-spacing: 0.01em;
  color: #000;
  display: inline-block;
  margin-bottom: 6px;
}

/* Inline essay links: teal with bottom border */
.summary-block a:not(.accent-underline) {
  color:#0f4c81;
  border-bottom: 1px solid #0f4c81;
}
.summary-block a:not(.accent-underline):visited {
  color: #0f4c81;
  border-bottom-color: #0f4c81;
}
.summary-block a:not(.accent-underline):hover {
  color: #d94545;
  border-bottom-color: #d94545;
}


/* ----------------------------------------
   7. PULL QUOTES — standalone quotes on dark background
   ---------------------------------------- */

.pull-quote {
  width: min(100%, var(--pull-quote-max-width));
  margin: 32px auto;
  padding: 0 var(--essay-block-padding-x);
  border: none;
}
.pull-quote__text {
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.5;
  margin: 0 0 12px;
}
.pull-quote.pull-quote--plain .pull-quote__text {
  font-style: normal !important;
  font-size: 16px;
}
.pull-quote__attr {
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #ffffff;
  line-height: 1.4;
  margin: 0 0 36px 0;
}
.pull-quote__attr em { color: #ffffff; }

/* Inside white summary-block — black */
.summary-block .pull-quote__attr { color: #000; }
.summary-block .pull-quote__attr em { color: #000; }

/* ----------------------------------------
   7b. UTILITY CLASSES — extracted from inline styles
   ---------------------------------------- */

/* Right-aligned credit line after block quotes */
.attribution-inline {
  text-align: right;
  font-size: 12px;
  color: #888;
  margin-top: -6px;
}

/* Ordered lists inside essay content */
.essay-content ol.essay-ol {
  margin: 0 0 12px 0;
  padding-left: 24px;
  line-height: 1.5;
}
.essay-content ol.essay-ol > li {
  margin-bottom: 8px;
}
.essay-content ol.essay-ol > li:last-child {
  margin-bottom: 0;
}

/* Dark navy color for Web Archive links */
.archive-link { color: #00338b; }
.archive-link:visited { color: #00338b; }


/* ----------------------------------------
   8. IMAGE HOVER TOOLTIP — popup preview on hover/focus
   ---------------------------------------- */

.img-hover { position: relative; display: inline; }

.img-hover__popup {
  position: absolute;
  left: 50%;
  bottom: 125%;
  transform: translateX(-50%);
  padding: 6px;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 20;
}
.img-hover__popup img { display: block; max-width: 260px; height: auto; }

.img-hover:hover .img-hover__popup,
.img-hover:focus .img-hover__popup,
.img-hover:focus-visible .img-hover__popup {
  opacity: 1;
  visibility: visible;
}

/* Teal underline on hover-image trigger links */
.accent-underline {
  text-decoration: none;
  color: inherit;
  background-image: linear-gradient(#1aa6a6, #1aa6a6);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 100%;
  padding-bottom: 2px;
}
.accent-underline:visited { color: inherit; }


/* ----------------------------------------
   9. BRIDGE SECTION — subpage link cards
   ---------------------------------------- */

.bridge-section { max-width: 800px; margin: 24px auto; }
.bridge-section .ref-heading { margin-bottom: 10px; }

.section-card {
  display: block;
  padding: 4px 5px;
  margin: 0 auto 10px;
  max-width: 800px;
  background: #fff;
  border: 1px solid #000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  text-decoration: none;
  color: #111;
  transition: border-color 120ms ease;
}
.section-card:hover { border-color: #0f4c81; }
.section-card:visited { color: #111; }
.section-card h3 {
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: 15px;
  text-transform: uppercase;
  color: #010305;
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}
.section-card p {
  font-size: 13px;
  line-height: 1.5;
  color: #3a4550;
  margin: 0;
}

/* --- Bridge grid (6-card 3-column layout) --- */
.bridge-grid {
  width: min(76vw, 1360px);
  max-width: 100%;
  margin: 0 auto 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.bridge-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 20px 18px;
  background: #06090d;
  border: 1px solid #1a2030;
  text-decoration: none;
  color: #fff;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.bridge-card:hover {
  border-color: var(--nav-hover-accent);
  box-shadow: 0 0 0 1px rgba(255,32,66,0.18), 0 8px 20px rgba(255,32,66,0.15);
  transform: translateY(-2px);
}
.bridge-card:visited { color: #fff; }

.bridge-card__tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: Arial, sans-serif;
  align-self: flex-start;
}

/* Tag colors per section */
.bridge-card__tag--design       { background: rgba(15,76,129,0.20);  color: #5c9eff; }
.bridge-card__tag--conflict     { background: rgba(174,32,18,0.20);  color: #e06060; }
.bridge-card__tag--env          { background: rgba(139,105,20,0.20); color: #d4a828; }
.bridge-card__tag--iron         { background: rgba(106,76,147,0.20); color: #b48adb; }
.bridge-card__tag--policy       { background: rgba(123,45,142,0.20); color: #c07de0; }
.bridge-card__tag--court        { background: rgba(155,34,38,0.20);  color: #e06060; }

.bridge-card__title {
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.15;
  margin: 0;
}

.bridge-card__summary {
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
  margin: 0;
  flex: 1;
}

.bridge-card__arrow {
  font-size: 14px;
  color: rgba(255,255,255,0.30);
  align-self: flex-end;
  transition: color 140ms ease, transform 140ms ease;
}
.bridge-card:hover .bridge-card__arrow {
  color: var(--nav-hover-accent);
  transform: translateX(3px);
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
  .bridge-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile: 1 column */
@media (max-width: 540px) {
  .bridge-grid { grid-template-columns: 1fr; }
}


/* ----------------------------------------
   10. REFERENCE LIST — AMA-style citations
   ---------------------------------------- */

/* Reference list container */
.reference-list {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem 1rem;
}

/* Result count */
.ref-result-count {
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.35rem;
  min-height: 1.2em;
}

/* Filter pills */
.ref-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 0.5rem;
}
.ref-filter-pill {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.65);
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ref-filter-pill:hover {
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
.ref-filter-pill.active {
  background: #d94545;
  border-color: #d94545;
  color: #fff;
}

/* Year dividers */
.ref-year-heading {
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  border-bottom: none;
  padding-bottom: 2px;
  margin: 1.1rem 0 0;
}
.ref-year-heading:first-child { margin-top: 0; }

/* Single citation entry */
.ref-item {
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding: 11px 16px 15px;
  margin-bottom: 0;
  position: relative;
}
.ref-item:last-of-type { border-bottom: none; }

/* Author names */
.ref-authors {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #222;
  margin-bottom: 1px;
}

/* Article title link */
.ref-link,
.ref-title {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #104a74;
  font-style: normal;
  text-decoration: underline;
  margin-bottom: 2px;
}
.ref-link:hover,
.ref-title:hover { color: #d94545; }
.ref-link:visited,
.ref-title:visited { color: #104a74; }

/* Journal name */
.ref-journal {
  display: inline;
  font-family: Arial, sans-serif;
  font-style: italic;
  font-size: 13px;
  color: #000;
}

/* PMID / DOI identifiers */
.ref-ids {
  display: inline;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-style: normal;
  color: #000;
}

/* Extra links (archive links, manuscripts) */
.ref-extra {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #104a74;
  margin-top: 2px;
}
.ref-extra a { color: #104a74; }
.ref-extra a:hover { color: #d94545; }


/* ----------------------------------------
   12. SEARCH / FILTER BAR
   ---------------------------------------- */

.ref-search-bar {
  margin-bottom: 0.25rem;
}
.ref-search-input {
  width: 100%;
  background: #fff;
  border: 1px solid #333;
  padding: 9px 13px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #000;
  outline: none;
  border-radius: 0;
}
.ref-search-input:focus { border-color: #0f4c81; }
.ref-search-input::placeholder { color: rgba(0,0,0,0.4); }


/* ----------------------------------------
   12b. REF ENHANCEMENT — category tags + copy-citation button
        (injected by JS into existing .ref-item elements)
   ---------------------------------------- */

.ref-tag {
  display: inline-block;
  font-size: 0.60rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: Arial, sans-serif;
  margin-right: 4px;
  margin-bottom: 4px;
  vertical-align: middle;
}

.tag-trial-design    { background: rgba(15,76,129,0.12);  color: #0f4c81; }
.tag-env-exposure    { background: rgba(139,105,20,0.12); color: #8b6914; }
.tag-iron-status     { background: rgba(106,76,147,0.12); color: #6a4c93; }
.tag-contamination   { background: rgba(155,34,38,0.12);  color: #9b2226; }
.tag-safety-efficacy { background: rgba(45,106,79,0.12);  color: #2d6a4f; }
.tag-cognition       { background: rgba(56,102,65,0.12);  color: #386641; }
.tag-policy          { background: rgba(123,45,142,0.12); color: #7b2d8e; }
.tag-court           { background: rgba(174,32,18,0.12);  color: #ae2012; }
.tag-growth          { background: rgba(106,76,147,0.10); color: #6a4c93; }
.tag-other-metals    { background: rgba(139,105,20,0.10); color: #8b6914; }
.tag-behavior        { background: rgba(56,102,65,0.10);  color: #386641; }
.tag-blood-pressure  { background: rgba(15,76,129,0.10);  color: #0f4c81; }
.tag-retention       { background: rgba(106,76,147,0.10); color: #6a4c93; }
.tag-abatement       { background: rgba(139,105,20,0.12); color: #8b6914; }

.ref-tag-row { margin-bottom: 5px; }

.ref-cite-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid #ccc;
  background: transparent;
  color: #333;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
  white-space: nowrap;
  z-index: 1;
}
.ref-cite-btn:hover { border-color: #0f4c81; color: #0f4c81; }
.ref-cite-btn.copied { border-color: #2d6a4f; color: #2d6a4f; }
.ref-cite-btn svg { width: 10px; height: 10px; }

.cite-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #fff;
  border: 1px solid #2d6a4f;
  color: #2d6a4f;
  font-size: 0.80rem;
  font-family: Arial, sans-serif;
  padding: 8px 18px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.cite-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ----------------------------------------
   13. FOOTER
   ---------------------------------------- */

.site-footer {
  background: #000;
  color: #ccc;
  padding: 32px 20px;
  margin-top: 40px;
  font-size: 13px;
  line-height: 1.6;
}
.footer-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
}
.footer-col { flex: 1 1 200px; min-width: 180px; }
.footer-col h3 {
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 0 10px;
  letter-spacing: 0.04em;
}
.footer-col a { color: #8ab4f8; text-decoration: none; }
.footer-col a:visited { color: #8ab4f8; }
.footer-col a:hover { text-decoration: underline; color: #fff; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col ul li { margin-bottom: 6px; }
.footer-bottom {
  max-width: 800px;
  margin: 20px auto 0;
  padding-top: 16px;
  border-top: 1px solid #333;
  text-align: center;
  color: #888;
  font-size: 12px;
}


/* ----------------------------------------
   14. BACK-TO-TOP BUTTON
   ---------------------------------------- */

.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 42px;
  height: 42px;
  background: #bfbaba;
  color: #130e0e;
  border: solid 4px #d94545;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 200;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: #000103; color: #fff; }


/* ----------------------------------------
   15. MEDIA QUERIES — responsive overrides
   ---------------------------------------- */

/* --- Tablet landscape (769px–1200px) --- */
@media (min-width: 769px) and (max-width: 1200px) {
  .hero-banner,
  .page-toc { width: min(90vw, 1080px); }
  .hero-title {
    width: min(90vw, 1080px);
    padding: 10px 3%;
    font-size: clamp(14px, 2.08vw, 21px);
    line-height: 1.12;
  }
  .page-toc { margin-top: 14px; }
  .page-toc a { font-size: clamp(11px, 1.15vw, 15px); }
}

/* --- Mobile nav breakpoint (≤980px) --- */
@media (max-width: 980px) {
  .hero { padding-top: 52px; }
  .hamburger { display: block; }

  .nav-cards {
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: 6px 10px;
    min-height: 52px;
    background: #000;
  }
  .nav-home { position: absolute; top: 6px; left: 10px; }
  .hamburger { position: absolute; top: 6px; right: 10px; }

  /* Hide nav items until menu-open */
  .nav-cards .nav-card,
  .nav-cards .dropdown-container { display: none; }

  .nav-cards.menu-open {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 4px;
    padding-top: 52px;
    padding-bottom: 10px;
    padding-right: 10px;
  }
  .nav-cards.menu-open .nav-card,
  .nav-cards.menu-open .dropdown-container {
    display: flex;
    width: min(60vw, 280px);
    justify-content: center;
  }
  .nav-cards.menu-open .nav-card { box-sizing: border-box; }
  .nav-cards.menu-open .dropdown-container {
    flex-direction: column;
    align-items: center;
  }

  .dropdown-links { position: static; min-width: 100%; margin-top: 4px; }

  .nav-home {
    display: inline-flex !important;
    flex: 0 0 auto;
    width: auto;
    max-width: calc(100% - 72px);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(11px, 2.4vw, 14px);
    padding: 6px 0;
  }
}

/* --- Tablet portrait / phone landscape (≤768px) --- */
@media (max-width: 768px) {
  /* iOS fix: background-attachment:fixed breaks on mobile.
     Use a fixed pseudo-element instead. */
  body { background-image: none; background-attachment: scroll; }
  body::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    background-image: var(--site-background-image-mobile);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
  }

  .hero-banner,
  .page-toc { width: min(92vw, 640px); }
  .hero-banner { margin-top: 8px; }
  .hero-banner::before {
    background-image: var(--homepage-hero-image-mobile);
    aspect-ratio: 5032 / 2690;
  }
  .hero-title {
    width: min(92vw, 640px);
    font-size: clamp(15px, 2.2vw, 19px);
  }
  .page-toc { gap: 4px; margin-top: 12px; }
  .page-toc a { padding: 7px 10px; font-size: clamp(9px, 1.7vw, 11px); }

  /* Body block: tighter text, slightly bolder, wider card */
  :root { --essay-block-max-width: min(92vw, 640px); }
  .summary-block {
    font-size: clamp(13px, 3.6vw, 15px);
    font-weight: 500;
    font-stretch: semi-condensed;
  }
}

/* --- Small phone (≤520px) --- */
@media (max-width: 520px) {
  .hero-banner { width: min(94vw, 430px); }
  .hero-title {
    width: min(94vw, 430px);
    font-size: clamp(13px, 3.5vw, 17px);
    line-height: 1.12;
  }
  .page-toc {
    width: min(94vw, 430px);
    flex-wrap: nowrap;
    justify-content: center;
    gap: 2px;
    margin-top: 8px;
    padding: 0 0 2px;
  }
  .page-toc a {
    flex: 0 0 auto;
    padding: 6px 5px;
    font-size: clamp(8px, 2vw, 8.85px);
    letter-spacing: 0.02em;
  }
  .hamburger { font-size: 20px; padding: 5px 8px; }
  .nav-home { font-size: clamp(10px, 3.5vw, 12px); letter-spacing: 0.03em; }
}


/* ── FLANKING LAYOUT ── */

/* ----------------------------------------
   THREE-COLUMN SCAFFOLD
   ---------------------------------------- */

.flanked-section {
  display: grid;
  grid-template-columns:
    minmax(0, var(--flank-essay-max-width))
    minmax(0, var(--flank-side-max-width));
  gap: 0;
  justify-content: center;
  padding: 0 0 60px 20px;
  width: 100%;
  max-width: 2200px;
  margin: 0 auto;
  position: relative;
}
/* Left column: summary/narrative blocks land in column 1 by default */
.flanked-section > .summary-block,
.flanked-section > .narrative-block,
.flanked-section > h2,
.flanked-section > .pull-quote-inline {
  grid-column: 1;
}

/* Right column: quotes */
.gutter-right {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  padding-top: 40px;
  min-width: 0;
}


/* ----------------------------------------
   NARRATIVE BLOCKS (matches existing summary-block)
   ---------------------------------------- */

.mobile-evidence { display: none; }

.narrative-block {
  width: 100%;
  padding: 20px var(--essay-block-padding-x);
  line-height: 1.75;
  font-size: medium;
  color: #000;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 400;
  background: hsl(60, 5%, 87%);
  border: 1px solid #000;
  box-shadow: 0 2px 8px rgb(0,0,0);
}

.narrative-block p {
  margin: 0 0 12px;
  text-align: left;
  text-indent: 1.5em;
}
.narrative-block p:first-child { text-indent: 0; }
.narrative-block p:last-child { margin-bottom: 0; }

.narrative-block a {
  color: #1aa6a6;
  text-decoration: none;
  border-bottom: 1px solid #1aa6a6;
}
.narrative-block a:visited {
  color: #1aa6a6;
  border-bottom-color: #1aa6a6;
}
.narrative-block a:hover {
  color: #d94545;
  border-bottom-color: #d94545;
}


/* ----------------------------------------
   LEFT GUTTER: DOCUMENT CARDS — PROTOTYPE ONLY
   Only used in ideas/flanking-layout-prototype.html.
   Evidence thumbnails with captions
   ---------------------------------------- */

.doc-card {
  width: 100%;
  max-width: 260px;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.doc-card.visible {
  opacity: 1;
  transform: translateX(0);
}

.doc-card__frame {
  position: relative;
  border: 1px solid #1aa6a6;
  background: #111;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.doc-card__frame:hover {
  border-color: #fff;
  box-shadow: 0 0 0 1px #1aa6a6, 0 8px 24px rgba(26,166,166,0.3);
}

.doc-card__img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.3) brightness(0.9);
  transition: filter 0.3s ease;
}

.doc-card__frame:hover .doc-card__img {
  filter: saturate(0.6) brightness(1);
}

/* Page indicator badge */
.doc-card__page {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.8);
  color: #1aa6a6;
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: 10px;
  padding: 2px 6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.doc-card__caption {
  margin-top: 8px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: #000000;
}

.doc-card__caption strong {
  color: #000000;
  font-weight: 600;
  display: block;
  font-size: 11.5px;
  margin-bottom: 2px;
}

.doc-card__caption .doc-date {
  color: #1aa6a6;
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
}


/* ----------------------------------------
   RIGHT GUTTER: QUOTE CARDS
   Attributed quotes with red left border
   ---------------------------------------- */

.quote-card {
  width: 100%;
  max-width: var(--flank-side-max-width);
  padding-left: 14px;
  border-left: 3px solid #322e2e;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.quote-card.visible {
  opacity: 1;
  transform: translateX(0);
}

.quote-card__text {
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  color: #ddd;
  line-height: 1.55;
  margin: 0 0 8px;
}

.quote-card__text::before { content: '\201C'; }
.quote-card__text::after { content: '\201D'; }

.quote-card__attr {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #ffffff;
  line-height: 1.4;
}

.quote-card__attr .attr-name {
  color: #ffffff;
  font-weight: 600;
}

.quote-card__attr .attr-source {
  display: block;
  margin-top: 2px;
  font-style: italic;
  color: #ffffff;
}

.quote-card__attr .attr-date {
  color: #d94545;
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
}


/* ----------------------------------------
   CENTER-COLUMN PULL QUOTES (flanking layout)
   ---------------------------------------- */

.pull-quote-inline {
  max-width: 520px;
  margin: 20px auto;
  padding: 0 10px;
}

.pull-quote-inline__text {
  font-family: Courier;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  line-height: 1.75;
}

.pull-quote-inline__attr {
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #f7f4f4;
  line-height: 1.4;
  margin-top: 8px;
}

.pull-quote-inline__attr .attr-name {
  color: #fff;
  font-weight: 600;
}

.pull-quote-inline__attr .attr-source {
  display: block;
  margin-top: 2px;
  font-style: italic;
  color: #fff;
}

.pull-quote-inline__attr .attr-date {
  color: #d94545;
  font-family: 'Modern Typewriter', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* Quote-card attr on black background — white */
.quote-card__attr { color: #fff; }
.quote-card__attr .attr-name { color: #fff; }
.quote-card__attr .attr-source { color: #fff; }

/* Pull-quote attr inside white summary-block — black */
.summary-block .pull-quote-inline__attr { color: #000; }
.summary-block .pull-quote-inline__attr .attr-name { color: #000; }
.summary-block .pull-quote-inline__attr .attr-source { color: #000; }


/* ----------------------------------------
   ESSAY SECTION SHELL (for flanking pages)
   ---------------------------------------- */

.essay-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Let flanked-section break out of the 800px shell */
.essay-section .flanked-section,
.flanked-section {
  max-width: none;
}

/* Base: hidden until mobile collapse activates */
.mobile-evidence {
  display: none;
}

/* Draft note banner */
.draft-note {
  background: #fffbe6;
  border: 1px solid #e6d866;
  border-radius: 4px;
  padding: 8px 14px;
  margin: 12px 0 20px;
  font-size: 13px;
  color: #665d1e;
}

/* Block-quote style for inline quotes in summary-blocks */
.bq {
  margin: 8px 0;
}

/* ----------------------------------------
   FLANKING LAYOUT: RESPONSIVE COLLAPSE
   Collapse to single column at 1100px.
   Gutters hidden; .mobile-evidence shown inline.
   Does not conflict with existing 768px/980px breakpoints.
   ---------------------------------------- */

@media (max-width: 1100px) {
  .flanked-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 40px 16px;
  }

  .gutter-right {
    display: none;
  }

  /* Mobile: show inline evidence between paragraphs */
  .mobile-evidence {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 16px auto;
    max-width: 600px;
    width: 100%;
  }

  .mobile-evidence .doc-card,
  .mobile-evidence .quote-card {
    max-width: 100%;
    opacity: 1;
    transform: none;
  }

  .mobile-evidence .doc-card__frame {
    max-width: 300px;
    margin: 0 auto;
  }

  .mobile-evidence .quote-card {
    max-width: 100%;
  }
}

@media (min-width: 1101px) {
  .mobile-evidence { display: none; }
}