/* Boston Nexus — editorial navy and gold refinement, September 2026. */
:root {
  --navy: #28676b;
  --navy2: #4c8589;
  --gold: #d4b375;
  --cream: #f6f4ef;
  --ink: #193c40;
  --university-red: #b79256;
  --university-red-dark: #90703e;
  --paper: #faf9f6;
  --stone: #edf0ef;
  --rule: #d5d4cd;
  --slate: #193c40;
}
html { overflow-x: clip; }
body { background: var(--paper); color: var(--ink); }
main { overflow: clip; }

/* A quiet masthead gives the supplied mark its own space. */
.site-header {
  background: #28676b;
  border-top: 4px solid #c9a967;
  border-bottom: 1px solid #d4b3757a;
  box-shadow: 0 9px 28px #09223920;
}
.header-meta { color: #d6e4eb; border-color: #ffffff2e; }
.site-header .nav { background: #337479; border-top: 1px solid #ffffff24; }
.site-header .nav a { font-size: clamp(.82rem, .9vw, .96rem); letter-spacing: .015em; }
.site-header .nav a:hover, .site-header .nav a.active {
  background: #629b9e;
  border-bottom-color: #e3c68d;
}
.site-header .brand img { filter: drop-shadow(0 1px 2px #041d3359); }

/* The General Assembly feature occupies the desktop width with a balanced text panel. */
body.first-page-view .home-unga {
  grid-template-columns: minmax(0, 62%) minmax(0, 38%);
  margin: 0 auto;
  border: 0;
  border-bottom: 4px solid #c8a76c;
  background: #28676b;
}
body.first-page-view .home-unga-photo { min-height: clamp(480px, 39vw, 690px); }
.home-unga-photo img { object-position: center 42%; }
.home-unga-copy {
  padding: clamp(36px, 4.5vw, 86px);
  border-left: 1px solid #d5b77d80;
  background: linear-gradient(145deg, #337479, #28676b 75%);
}
.home-unga-copy h2 { font-size: clamp(2.45rem, 3.45vw, 4.25rem); line-height: 1.1; }
.home-unga-copy p { color: #e4edf1; }

/* A full width editorial lead keeps the video visible and useful. */
.hero.home {
  padding: clamp(52px, 5vw, 90px) 5.5% clamp(68px, 6vw, 105px);
  background: linear-gradient(126deg, #f8f7f3 0%, #eef3f3 100%);
}
.hero.home .hero-inner { max-width: 1660px; }
.hero.home .hero-top { border-top: 2px solid #ba955b; color: #735b38; }
.hero.home .hero-top span:first-child { color: #735b38; }
.home-hero-layout { gap: clamp(44px, 6vw, 110px); grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); }
.hero.home .home-hero-layout h1 {
  color: #173b58;
  font-size: clamp(3.3rem, 5.2vw, 6rem);
  max-width: 14ch;
  line-height: 1.08;
}
.home-featured-video {
  background: #28676b;
  border-top: 4px solid #d7b877;
  box-shadow: 0 22px 48px #13344a30;
  padding: clamp(20px, 2.3vw, 32px);
}
.hero.home .hero-bottom { border-top-color: #c6d0d1; }
.hero.home .scroll-link { color: #264a64; border-color: #a68855; }
.hero.home .scroll-link:hover { background: #234c69; color: white; }

/* Long reading pages remain spacious without leaving empty desktop gutters. */
.hero:not(.home), .video-hero {
  background: linear-gradient(120deg, #28676b, #4c8589 74%, #629b9e);
}
.hero:not(.home) .hero-inner { max-width: 1640px; }
.hero-top { border-top-color: #d6b77d; }
.chapter { background: #eaf2f0; }
.contents {
  color: #f4f7f7;
  background: linear-gradient(125deg, #4c8589 0%, #337479 55%, #28676b 100%);
  border-top: 2px solid #d8b97a;
  border-bottom: 2px solid #d8b97a;
  box-shadow: inset 0 1px 0 #ffffff2b;
}
.contents>div h2 { color: #f8e5b9; }
.contents .eyebrow, .contents a span { color: #f0ce8d; }
.contents p { color: #e1ebee; }
.contents ol { border-top-color: #e0ca965e; }
.contents li { border-bottom-color: #e0ca9661; }
.contents a, .contents a:visited { color: #f5f8f8; }
.contents a:hover, .contents a:focus-visible {
  color: #fff;
  background: #ffffff18;
  outline-color: #f1d294;
}
.content { padding-inline: clamp(24px, 5.5vw, 105px); }
.story { max-width: 1580px; grid-template-columns: minmax(175px, 22%) minmax(0, 1fr); gap: 5%; }
.story h2 { color: #183b57; }
.story p { color: #354959; }
.story-photo { border-bottom-color: #c7a568; }
.research-note, .research-readings, .academic-media, .home-videos-more { max-width: none; }
.questions { background: linear-gradient(145deg, #337479, #28676b); }
.question-grid article, .question-grid article+article { background: #ffffff0d; border-color: #d8e2e53d; }
.site-map, .related-pages { background: #eaf2f0; }
.closing { background: #eaf2f0; }
.closing a { color: #224661; border-bottom-color: #b69256; }
.directory-group a:hover, .directory-group h3, .eyebrow, .section-index { color: #82633b; }

/* Diagonal ruled bands inspired by the supplied reference. */
body > footer::before,
.closing::before {
  content: "";
  display: block;
  height: clamp(28px, 3.5vw, 52px);
  background: repeating-linear-gradient(135deg,
    transparent 0 7px,
    rgba(224, 194, 141, .68) 7px 8.5px,
    transparent 8.5px 15px);
  pointer-events: none;
}
body > footer::before {
  width: min(100%, 1280px);
  margin: 0 auto clamp(38px, 5vw, 64px);
}
.closing { position: relative; }
.closing::before {
  position: absolute;
  inset: 0 0 auto;
  height: 24px;
  background: repeating-linear-gradient(135deg,
    transparent 0 7px,
    rgba(151, 116, 57, .42) 7px 8px,
    transparent 8px 15px);
}

/* Gold type on the final page, with enough contrast on navy. */
body > footer.final-page-footer {
  background: radial-gradient(ellipse at 50% 0%, #4c8589 0%, #337479 42%, #28676b 100%);
  border-top-color: #d6b77a;
}
.final-page-footer .final-footer-group h2,
.final-page-footer .final-footer-social h2 { color: #f6dca7; }
.final-page-footer .final-footer-group a { color: #e9c98e; }
.final-page-footer .final-footer-copyright { color: #e0c28d; }

@media (max-width: 900px) {
  .home-hero-layout { grid-template-columns: 1fr; }
  .hero.home .home-hero-layout h1 { max-width: 17ch; }
  .story { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 800px) {
  body.first-page-view .home-unga { grid-template-columns: 1fr; margin: 0; }
  body.first-page-view .home-unga-photo { min-height: clamp(280px, 62vw, 470px); }
  .home-unga-copy { border-left: 0; border-top: 2px solid #c9a86b; padding: 34px 6% 42px; }
  .site-header .nav { background: #337479; }
}
@media (max-width: 600px) {
  .hero.home { padding: 38px 6% 55px; }
  .hero.home .home-hero-layout h1 { font-size: clamp(2.5rem, 10vw, 3.7rem); }
  .home-featured-video { padding: 18px; }
  .home-unga-copy h2 { font-size: clamp(2rem, 8vw, 3rem); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Balanced blue palette: quiet paper, soft blue features, navy framing. */
:root { --navy: #28676b; --navy2: #4c8589; --paper: #faf9f6; --cream: #f6f4ef; --ink: #20364a; --gold: #d4b375; }
.site-header { background: #28676b; }
.site-header .nav { background: #337479; }
.site-header .nav a:hover, .site-header .nav a.active { background: #629b9e; }
.hero.home { background: linear-gradient(125deg, #f8fbfa, #e5f0ee); }
.hero.home .home-hero-layout h1 { color: #28676b; }
.hero.home .hero-bottom p { color: #3c6264; }
.home-unga-copy { background: linear-gradient(145deg, #4c8589, #28676b); }
.home-unga-copy h2, .home-unga-copy p, .home-unga-copy .eyebrow { color: #f8fcfa; }
.home-unga-copy a { color: #f8fcfa; }
body.first-page-view .home-unga { background: #337479; }
.hero:not(.home), .video-hero { background: linear-gradient(120deg, #28676b, #4c8589); }
.home-featured-video { background: #28676b; }
.contents { background: linear-gradient(120deg, #337479, #629b9e); }
.questions { background: #28676b; }
.chapter, .site-map, .related-pages { background: #eaf2f0; }
.closing { background: linear-gradient(120deg, #e5f0ee, #cce1df); }
.closing h2, .closing a { color: #28676b; }
body > footer, body > footer.final-page-footer { background: linear-gradient(135deg, #337479, #28676b); }

/* Plum-teal reference palette with quiet white reading surfaces. */
:root { --ink: #193c40; --slate: #193c40; }
.hero.home { background: linear-gradient(120deg, #f8fbfa, #e5f0ee); }
.home-unga-copy h2, .home-unga-copy p, .home-unga-copy .eyebrow,
.home-unga-copy a { color: #f8fcfa; }
.story h2, .research-note-body h2, .research-readings-head h2,
.research-highlight h3 { color: #28676b; }
.home-unga-copy a:hover { color: #f6dca7; }

/* Fine curved linework gives the teal panels a designed texture. */
:root {
  --teal-wave: repeating-radial-gradient(ellipse at 105% -35%, transparent 0 26px, rgba(214,241,235,.085) 27px 28px, transparent 29px 48px);
  --teal-glow: radial-gradient(ellipse at 90% 20%, rgba(138,205,197,.22), transparent 62%);
}
.home-unga-copy,
.hero:not(.home), .video-hero,
.contents, .questions,
body > footer, body > footer.final-page-footer {
  background-color: #28676b;
  background-image: var(--teal-wave), var(--teal-glow), linear-gradient(125deg, #245b60, #3d7c80);
}
.home-featured-video {
  background-color: #28676b;
  background-image: var(--teal-wave), linear-gradient(135deg, #28676b, #3d7c80);
}
.hero.home {
  background-image: repeating-radial-gradient(ellipse at 110% 0%, transparent 0 34px, rgba(41,112,115,.045) 35px 36px, transparent 37px 62px), linear-gradient(120deg, #f8fbfa, #e5f0ee);
}
.closing {
  background-image: repeating-radial-gradient(ellipse at 105% -65%, transparent 0 27px, rgba(41,112,115,.07) 28px 29px, transparent 30px 48px), linear-gradient(120deg, #e5f0ee, #cce1df);
}
.site-header {
  background-image: radial-gradient(ellipse at 90% 0%, rgba(138,205,197,.2), transparent 62%), linear-gradient(120deg, #245b60, #337479);
}
@media (max-width: 600px) {
  :root { --teal-wave: repeating-radial-gradient(ellipse at 125% -15%, transparent 0 22px, rgba(214,241,235,.07) 23px 24px, transparent 25px 43px); }
}

/* A muted turquoise feature matches the latest reference. */
.home-unga-copy {
  background-color: #609a9c;
  background-image: var(--teal-wave), radial-gradient(ellipse at 90% 20%, rgba(199,230,223,.18), transparent 62%), linear-gradient(125deg, #649fa1, #538b8f);
}
.home-unga-copy h2, .home-unga-copy p,
.home-unga-copy .eyebrow, .home-unga-copy a { color: #102f33; }
.home-unga-copy a:hover { color: #092326; }

/* Slightly brighter teal masthead, as requested in the header screenshot. */
.site-header {
  background-color: #3b7b7e;
  background-image: radial-gradient(ellipse at 90% 0%, rgba(170,219,208,.16), transparent 65%), linear-gradient(120deg, #347276, #47888b);
}
.site-header .nav { background: #3b7b7e; }
.site-header .nav a:hover, .site-header .nav a.active { background: #4b8b8e; }

/* Teal research feature aligned with the site's current masthead. */
#research-note-index {
  background: #347276;
  background-image: var(--teal-wave), radial-gradient(ellipse at 90% 10%, rgba(170,219,208,.2), transparent 65%), linear-gradient(120deg, #347276, #47888b);
  border-block: 1px solid #d4b375;
  box-shadow: 0 12px 30px rgba(25,60,64,.10);
}
#research-note-index .research-note-body { background: transparent; }
#research-note-index .research-note-body h2 { color: #fff9ed; text-wrap: balance; }
#research-note-index .research-note-body p { color: #f0f8f5; line-height: 1.75; }
#research-note-index .research-note-body .eyebrow { color: #ffe0a0; }
#research-note-index .research-note-label { color: #e3efea; border-color: rgba(255,224,160,.55); }
#research-note-index .nexus-poster { border-radius: 3px; overflow: hidden; }

/* Match the poster ground to teal while retaining its silver relief. */
#research-note-index .nexus-poster {
  background: #47888b;
  isolation: isolate;
}
#research-note-index .nexus-poster img {
  mix-blend-mode: normal;
  filter: url(#poster-site-teal);
}

/* Both halves share one exact teal; linework spans the whole feature. */
#research-note-index { position: relative; background: #47888b; }
#research-note-index::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--teal-wave); opacity: .45; }
#research-note-index .nexus-poster, #research-note-index .research-note-body { background: #47888b; }

/* Gold diagonal ribbon echoes the footer in the upper masthead. */
.site-header {
  position: relative;
  background-image: var(--teal-wave), radial-gradient(ellipse at 90% 0%, rgba(170,219,208,.16), transparent 65%), linear-gradient(120deg, #347276, #47888b);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 5.5%;
  right: 5.5%;
  bottom: 47px;
  height: 14px;
  background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(224,194,141,.68) 7px 8.5px, transparent 8.5px 15px);
  pointer-events: none;
}
@media (max-width: 850px) {
  .site-header::after { bottom: 0; height: 9px; }
}

/* Shared teal-and-gold presentation for every public video card. */
.home-featured-video, .video-card, .media-video {
  min-width: 0;
  padding: clamp(16px, 2.3vw, 32px);
  color: #f8fcfa;
  background-color: #28676b;
  background-image: var(--teal-wave), var(--teal-glow), linear-gradient(135deg, #28676b, #3d7c80);
  border: 1px solid rgba(212,179,117,.65);
  border-top: 4px solid #d7b877;
  box-shadow: 0 14px 32px rgba(19,52,74,.16);
}
.home-featured-player, .video-card .video-frame, .media-video iframe {
  outline: 2px solid #d4b375;
  outline-offset: 0;
}
.video-card .video-card-info { padding: 20px 0 0; background: transparent; }
.video-card .video-card-info h3,
.video-card .video-card-info h3 a,
.media-video figcaption, .media-video figcaption strong { color: #f8fcfa; }
.video-card .video-card-info p { color: #edf5f2; line-height: 1.65; }
.video-card .eyebrow, .video-card .home-video-source,
.video-card .video-original-link, .video-card .home-video-original,
.media-video figcaption small, .media-video figcaption a { color: #f6dca7; }
.media-video figcaption { padding: 20px 0 0; }
.video-card .video-original-link, .video-card .home-video-original { display: inline-block; margin-top: 12px; }
.video-card .share-bar { color: #f8fcfa; background: transparent; border: 0; padding: 12px 0 0; }
.video-card .share-caption { color: #f6dca7; }
.video-card .share-toggle { color: #f8fcfa; border-color: #d4b375; background: transparent; }
.video-card .share-panel { color: #193c40; }
.video-card .video-card-info h3 a:hover, .video-card .video-original-link:hover,
.video-card .home-video-original:hover, .media-video figcaption a:hover { color: #ffe8b8; }
.video-card a:focus-visible, .media-video a:focus-visible { outline: 2px solid #ffe0a0; outline-offset: 4px; }
@media (max-width: 600px) {
  .home-featured-video, .video-card, .media-video { padding: 16px; }
}

/* Compact video surrounds keep the player prominent and the frame light. */
.home-featured-video, .video-card, .media-video {
  padding: clamp(12px, 1.3vw, 18px);
  border-top-width: 2px;
  box-shadow: 0 8px 20px rgba(19,52,74,.12);
}
.home-featured-video { width: 100%; max-width: 540px; justify-self: center; align-self: start; }
.home-featured-video h2 { font-size: 1.35rem; margin: 10px 0 12px; }
.home-featured-info { padding-top: 10px; }
.home-featured-details h3, .video-card .video-card-info h3 {
  font-size: clamp(1.1rem, 1.45vw, 1.4rem);
  line-height: 1.3;
  margin: 8px 0;
}
.video-card .video-card-info, .media-video figcaption { padding-top: 12px; }
.video-card .video-card-info p { font-size: .92rem; line-height: 1.55; }
.video-card .video-original-link, .video-card .home-video-original { margin-top: 8px; font-size: .82rem; }
.home-video-source, .video-card .eyebrow { font-size: .7rem; }
.home-video-topline { font-size: .68rem; gap: 10px; }
.video-card .share-bar { padding-top: 8px; }
.home-featured-player, .video-card .video-frame, .media-video iframe { outline-width: 1px; }
@media (max-width: 600px) {
  .home-featured-video, .video-card, .media-video { padding: 12px; }
}

/* Warm khaki reading surfaces paired with the established teal. */
:root { --paper: #e8dfcc; --cream: #e8dfcc; --stone: #ddd1b9; --rule: #c8b897; --khaki-card: #eee5d3; --khaki-soft: #e2d6bf; }
body, .scroll-page, .content, .video-gallery-section, .article-collection,
.research-note, .research-readings, .academic-media:not(.academic-media--dark),
.home-videos-more, .article-view { background-color: var(--paper); }
.hero.home {
  background-color: var(--paper);
  background-image: repeating-radial-gradient(ellipse at 110% 0%, transparent 0 34px, rgba(41,112,115,.045) 35px 36px, transparent 37px 62px), linear-gradient(120deg, #eee5d3, #ddd1b9);
}
.chapter, .site-map, .related-pages, .pathways,
.share-bar:not(.compact) { background: var(--khaki-soft); }
.content > .story, .content > .story:nth-child(even),
.pathways a, .pathways a:hover, .pathways a:focus-visible,
.article-card, .research-highlight, .media-figure,
.share-panel, .share-bar.compact .share-panel { background: var(--khaki-card); }
.research-note-body { background: var(--paper); }
.content > .story .story-photo, .content > .story .story-photo figcaption,
.media-figure figcaption { background: var(--khaki-soft); }
.closing {
  background-color: var(--khaki-soft);
  background-image: repeating-radial-gradient(ellipse at 105% -65%, transparent 0 27px, rgba(41,112,115,.07) 28px 29px, transparent 30px 48px), linear-gradient(120deg, #e8dfcc, #d5c6a9);
}

/* First-banner reference: flowing fine lines over the existing teal masthead. */
.site-header {
  isolation: isolate;
  background-image: radial-gradient(ellipse at 90% 0%, rgba(170,219,208,.16), transparent 65%), linear-gradient(120deg, #347276, #47888b);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("header-wave.svg?v=122") center top / 100% 100% no-repeat;
}
.site-header::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: auto;
  z-index: -2;
  background: linear-gradient(158deg, transparent 0 48%, rgba(15,65,69,.12) 48% 68%, transparent 68%);
}
@media (max-width: 850px) {
  .site-header::before { background-size: 155% 100%; background-position: 70% top; opacity: .75; }
  .site-header::after { height: auto; bottom: 0; }
}

/* Donation navigation and contact */
.site-header .nav a.donation-link{color:#fff0bd;font-weight:700;box-shadow:inset 0 -2px 0 #d9bc73}.donation-section{scroll-margin-top:2rem}.donation-contact{display:inline-block;padding:.8rem 1.1rem;border:1px solid #d9bc73;background:#337479;color:white;font-weight:600}.donation-contact:hover{background:#3b7b7e}