/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --navy: #002d5c;         /* deep institutional blue - header, footer */
  --navy-dark: #001d3d;
  --columbia-blue: #6fa8d8; /* lighter accent blue - links, tags, hover */
  --columbia-blue-pale: #e8f1fa; /* tinted section backgrounds */
  --ink: #1b1f24;
  --ink-soft: #4a5361;
  --paper: #ffffff;
  --mist: #f4f7fa;
  --line: #dde5ee;
  --gold: #c9a24b; /* small warm accent, used sparingly */

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 4px;
  --max-width: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--columbia-blue); }

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Utility bar + header
   ========================================================================== */
.utility-bar {
  background: var(--navy-dark);
  color: #cfe0f2;
  font-size: 0.78rem;
}
.utility-bar .container {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.utility-bar a { color: #cfe0f2; }
.utility-bar a:hover { color: #ffffff; }

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--navy);
}
.brand:hover { color: var(--navy); }
.brand-mark {
  height: 52px;
  width: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-mark img {
  height: 100%;
  width: auto;
  object-fit: contain;
}
.brand-text { line-height: 1.2; max-width: 360px; }
.brand-text .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  display: block;
  line-height: 1.25;
}
.brand-text .tagline {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .brand-text .name { font-size: 0.9rem; }
  .brand-text { max-width: 220px; }
}

.main-nav {
  display: flex;
  gap: 28px;
}
.main-nav a {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover,
.main-nav a.active {
  color: var(--navy);
  border-bottom-color: var(--columbia-blue);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
}

/* Dropdown (Forecasts sub-menu) */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown-toggle .caret { font-size: 0.6rem; position: relative; top: 1px; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0,45,92,0.14);
  padding: 8px 0;
  z-index: 30;
}
.dropdown-menu a {
  display: block;
  padding: 10px 18px;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  border-bottom: none;
  color: var(--ink);
}
.dropdown-menu a:hover { background: var(--columbia-blue-pale); color: var(--navy); }

.nav-dropdown:hover > .dropdown-menu,
.nav-dropdown:focus-within > .dropdown-menu {
  display: block;
}

/* Nested flyout (ENSO sub-menu) */
.dropdown-submenu { position: relative; }
.dropdown-submenu-toggle { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; }
.dropdown-submenu-toggle .caret-sub { font-size: 0.55rem; }
.dropdown-menu-nested {
  top: -8px;
  left: 100%;
}
.dropdown-submenu:hover > .dropdown-menu-nested,
.dropdown-submenu:focus-within > .dropdown-menu-nested {
  display: block;
}

/* Secondary tab strip used on Forecasts sub-pages */
.subnav {
  background: var(--columbia-blue-pale);
  border-bottom: 1px solid var(--line);
}
.subnav .container { display: flex; gap: 4px; flex-wrap: wrap; padding-top: 0; padding-bottom: 0; }
.subnav a {
  display: inline-block;
  padding: 14px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 3px solid transparent;
}
.subnav a:hover { color: var(--navy-dark); }
.subnav a.active { border-bottom-color: var(--navy); color: var(--navy-dark); }

/* ENSO / IOD / Seasonal sub-nav: indented so it reads as nested under the Forecasts tab strip */
.enso-subnav, .iod-subnav, .seasonal-subnav { background: var(--paper); }
.enso-subnav .container, .iod-subnav .container, .seasonal-subnav .container { padding-left: 48px; }
.enso-subnav a, .iod-subnav a, .seasonal-subnav a { padding: 10px 14px; font-size: 0.8rem; }

@media (max-width: 620px) {
  .enso-subnav .container, .iod-subnav .container, .seasonal-subnav .container { padding-left: 24px; }
}

@media (max-width: 800px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav > a { padding: 14px 24px; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: block; }

  .nav-dropdown { border-bottom: 1px solid var(--line); }
  .nav-dropdown-toggle { padding: 14px 24px; border-bottom: none; width: 100%; }
  .dropdown-menu {
    display: block;
    position: static;
    border: none;
    box-shadow: none;
    padding: 0 0 8px;
    background: var(--mist);
  }
  .dropdown-menu a { padding: 10px 40px; }

  .dropdown-submenu { border-top: none; }
  .dropdown-menu-nested {
    display: block;
    position: static;
    border: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }
  .dropdown-menu-nested a { padding: 10px 60px; }

  .subnav .container { flex-direction: column; padding: 4px 24px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background:
    linear-gradient(120deg, rgba(0,45,92,0.88) 0%, rgba(0,29,61,0.72) 55%, rgba(15,60,105,0.45) 100%),
    /* Dec 1997 SST anomaly; regenerate with seasonal_forecasts/render_hero_sst.py */
    url("../img/hero-elnino-1997.jpg") center / cover no-repeat;
  color: #ffffff;
  padding: 40px 0;
}
.hero .container { /* max-width: 760px; */ }
.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--columbia-blue);
  font-weight: 600;
  margin-bottom: 18px;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.15;
  margin: 0 0 20px;
}
.hero p.lede {
  font-size: 1.1rem;
  color: #dce8f5;
  /* max-width: 80ch; */
  margin: 0 0 32px;
}
.hero .actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* "Stick to Home Page" posts, in their own band below Current Forecasts */
.hero-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.hero-post {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 26px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.hero-post:hover {
  color: inherit;
  border-top-color: var(--columbia-blue);
  box-shadow: 0 8px 24px rgba(0,45,92,0.1);
  transform: translateY(-2px);
}
.hero-post .meta {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.hero-post h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 0;
  color: var(--navy-dark);
}
.hero-post:hover h3 { color: var(--navy); }
.hero-post p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; flex: 1; }
.hero-post .read-more { margin-top: 4px; font-size: 0.85rem; font-weight: 600; color: var(--navy); }

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.92rem;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--columbia-blue); color: var(--navy-dark); }
.btn-primary:hover { background: #8fbde3; color: var(--navy-dark); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-outline:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.08); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-dark); color: #fff; }

/* ==========================================================================
   Sections
section { padding: 72px 0; }
   ========================================================================== */

.section-alt { background: var(--mist); }

/* Opt-in vertical spacing for full-width bands (global section padding is off) */
.page-band { padding: 56px 0; }
.page-band + .page-band { border-top: 1px solid var(--line); }

/* About page: focus-area cards get an accent rule so they read differently
   from the people cards above them */
.focus-areas .card { border-left: 3px solid var(--navy); }
.focus-areas .card:hover { border-left-color: var(--columbia-blue); }

.section-head { margin-bottom: 40px; }
.section-head .kicker {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  margin: 0 0 12px;
  color: var(--navy-dark);
}
.section-head p { color: var(--ink-soft); margin: 0; }

/* Card grid (research areas / featured posts) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .card-grid { grid-template-columns: 1fr; } }

/* People stubs on the About page: four to a row at full width, since the
   cards carry a name, a role and a line of focus rather than prose. */
.people-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.people-grid .card-media { height: 120px; }
.people-grid .card-media .initials { font-size: 1.6rem; letter-spacing: 0.04em; }
.people-grid .card-body { padding: 18px 20px 20px; }
.people-grid .meta { font-weight: 600; color: var(--navy); }
@media (max-width: 1000px) { .people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .people-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { box-shadow: 0 8px 24px rgba(0,45,92,0.1); transform: translateY(-2px); }
.card-media {
  height: 160px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--columbia-blue) 100%);
  position: relative;
}
.card-media .initials {
  position: absolute;
  bottom: 12px;
  left: 16px;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-display);
  font-size: 1.4rem;
}
.card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--navy);
  background: var(--columbia-blue-pale);
  padding: 4px 9px;
  border-radius: 999px;
}
.card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0;
  line-height: 1.3;
}
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--navy); }
a.card { color: inherit; }
a.card h3 { color: var(--ink); }
a.card:hover h3 { color: var(--navy); }
.card .meta { font-size: 0.78rem; color: var(--ink-soft); }
.card p.excerpt { color: var(--ink-soft); font-size: 0.92rem; margin: 0; flex: 1; }
.card .read-more { font-size: 0.85rem; font-weight: 600; color: var(--navy); }

/* Current Forecasts grid (homepage) */
.forecast-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .forecast-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .forecast-grid { grid-template-columns: 1fr; } }

.forecast-tile {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.forecast-tile:hover {
  box-shadow: 0 8px 24px rgba(0,45,92,0.14);
  transform: translateY(-2px);
}
.forecast-tile-media {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
.forecast-tile-media img { width: 100%; height: 100%; object-fit: contain; object-position: top; }
.forecast-tile-placeholder {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--navy);
}
.forecast-tile-caption {
  padding: 14px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}
.forecast-tile:hover .forecast-tile-caption { color: var(--navy); }

/* Download grid (e.g. ENSO teleconnections PDFs) */
.download-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 20px;
}
/* inside prose, keep the tiles from picking up .page-content link styling */
.page-content .download-grid { margin-bottom: 28px; }
.page-content .forecast-tile { text-decoration: none; }
@media (max-width: 620px) { .download-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Blog list / detail
   ========================================================================== */
.page-head {
  background: var(--navy);
  color: #fff;
  padding: 56px 0;
}
.page-head h1 { font-family: var(--font-display); font-size: 2.2rem; margin: 0 0 8px; }
.page-head p { color: #cfe0f2; margin: 0; }
.page-head a { color: var(--white); text-decoration: underline; }
/* Forecast pages: Earth over the Pacific (NASA EPIC); regenerate with
   seasonal_forecasts/render_forecasts_header.py */
.page-head--forecasts {
  background:
    linear-gradient(90deg, rgba(0,29,61,0.85) 0%, rgba(0,29,61,0.55) 45%, rgba(0,29,61,0) 75%),
    url("../img/forecasts-header-pacific.jpg") right center / cover no-repeat,
    var(--navy-dark);
}
/* on phones the globe sits behind the text, so darken it evenly */
@media (max-width: 620px) {
  .page-head--forecasts {
    background:
      linear-gradient(rgba(0,29,61,0.72), rgba(0,29,61,0.72)),
      url("../img/forecasts-header-pacific.jpg") right center / cover no-repeat,
      var(--navy-dark);
  }
}

.blog-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 860px) { .blog-layout { grid-template-columns: 1fr; } }

.blog-list-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.blog-list-item:first-child { padding-top: 0; }
@media (max-width: 620px) { .blog-list-item { grid-template-columns: 1fr; } }
.blog-list-item .thumb {
  height: 120px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--navy) 0%, var(--columbia-blue) 100%);
}
.blog-list-item h2 { font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 8px; }
.blog-list-item h2 a { color: var(--ink); }
.blog-list-item h2 a:hover { color: var(--navy); }
.blog-list-item .meta { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 10px; }
.blog-list-item p { color: var(--ink-soft); margin: 0 0 12px; }

.sidebar-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 24px;
}
.sidebar-box h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  margin: 0 0 14px;
}
.sidebar-box ul { list-style: none; padding: 0; margin: 0; }
.sidebar-box li { margin-bottom: 8px; }
.sidebar-box a { font-size: 0.92rem; color: var(--ink); }
.sidebar-box a:hover { color: var(--navy); }
.sidebar-box a.active { color: var(--navy); font-weight: 700; }

.pagination { display: flex; gap: 10px; margin-top: 32px; }
.pagination a, .pagination span {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.pagination a:hover { border-color: var(--navy); }
.pagination .disabled { color: #b7c1cd; }

.iod-pager { flex-wrap: wrap; margin-bottom: 24px; }
.iod-pager a.active {
  background: var(--columbia-blue-pale);
  border-color: var(--columbia-blue);
  color: var(--navy-dark);
  font-weight: 600;
}

/* Post detail */
.post-hero-media {
  height: 320px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--columbia-blue) 100%);
}
.post-detail { max-width: 720px; margin: 0 auto; padding: 48px 0 80px; }
.post-detail .meta { color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 8px; }
.post-detail h1 { font-family: var(--font-display); font-size: 2.2rem; line-height: 1.2; margin: 0 0 20px; }
.post-forecast-link { margin: -8px 0 24px; font-weight: 600; }
.post-detail .body-copy, .forecast-blog-post .body-copy { font-size: 1.05rem; color: #2a2f36; }
.post-detail .body-copy p, .forecast-blog-post .body-copy p { margin: 0 0 20px; }
.post-detail .body-copy h1, .forecast-blog-post .body-copy h1,
.post-detail .body-copy h2, .forecast-blog-post .body-copy h2,
.post-detail .body-copy h3, .forecast-blog-post .body-copy h3,
.post-detail .body-copy h4, .forecast-blog-post .body-copy h4 {
  font-family: var(--font-display);
  color: var(--navy-dark);
  line-height: 1.3;
  margin: 36px 0 16px;
}
.post-detail .body-copy h1, .forecast-blog-post .body-copy h1 { font-size: 1.7rem; }
.post-detail .body-copy h2, .forecast-blog-post .body-copy h2 { font-size: 1.45rem; }
.post-detail .body-copy h3, .forecast-blog-post .body-copy h3 { font-size: 1.2rem; }
.post-detail .body-copy h4, .forecast-blog-post .body-copy h4 { font-size: 1.05rem; }
.post-detail .body-copy ul, .forecast-blog-post .body-copy ul,
.post-detail .body-copy ol, .forecast-blog-post .body-copy ol { margin: 0 0 20px; padding-left: 1.4em; }
.post-detail .body-copy li, .forecast-blog-post .body-copy li { margin-bottom: 8px; }
.post-detail .body-copy a, .forecast-blog-post .body-copy a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--columbia-blue); text-decoration-skip-ink: none;}
.post-detail .body-copy a:hover, .forecast-blog-post .body-copy a:hover { color: var(--columbia-blue); }
.post-detail .body-copy blockquote, .forecast-blog-post .body-copy blockquote {
  margin: 0 0 20px;
  padding: 4px 20px;
  border-left: 3px solid var(--columbia-blue);
  color: var(--ink-soft);
  font-style: italic;
}
.note {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: var(--columbia-blue-pale);
  border-left: 3px solid var(--columbia-blue);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.note strong { color: var(--navy-dark); }
.post-detail .body-copy code, .forecast-blog-post .body-copy code {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 0.88em;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.post-detail .body-copy pre, .forecast-blog-post .body-copy pre {
  background: var(--navy-dark);
  color: #e6edf5;
  padding: 18px 20px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 0 0 20px;
}
.post-detail .body-copy pre code, .forecast-blog-post .body-copy pre code { background: none; border: none; padding: 0; color: inherit; }
.post-detail .body-copy img, .forecast-blog-post .body-copy img { border-radius: var(--radius); margin: 8px 0 20px; }
.post-detail .body-copy hr, .forecast-blog-post .body-copy hr { border: none; border-top: 1px solid var(--line); margin: 32px 0; }
.post-detail .body-copy table, .forecast-blog-post .body-copy table { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.post-detail .body-copy th, .forecast-blog-post .body-copy th,
.post-detail .body-copy td, .forecast-blog-post .body-copy td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; font-size: 0.94rem; }
.post-detail .body-copy th, .forecast-blog-post .body-copy th { background: var(--mist); font-weight: 700; }
.post-detail .tags { margin-top: 32px; display: flex; gap: 8px; }
.back-link { display: inline-block; margin-bottom: 24px; font-size: 0.85rem; font-weight: 600; }

.related-posts { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 40px; }
.related-posts h2 { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 24px; }

/* ==========================================================================
   Forms (admin)
   ========================================================================== */
.form-page { max-width: 640px; margin: 0 auto; padding: 56px 24px; }
.form-page h1 { font-family: var(--font-display); margin-top: 0; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
.field .hint { font-size: 0.78rem; color: var(--ink-soft); margin-top: 4px; }
.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field input[type="url"],
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
}
.field textarea { resize: vertical; }
.field.checkbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.field.checkbox label { margin: 0; }
.field.checkbox .hint { flex-basis: 100%; margin-top: 0; }
.errors { color: #b3261e; font-size: 0.8rem; margin-top: 4px; list-style: none; padding: 0; }

/* ==========================================================================
   Seasonal forecast page
   ========================================================================== */
.forecast-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-top: 32px;
  margin-bottom: 40px;
}
.control-field { flex: 1 1 160px; }
.control-field label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
.control-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--paper);
}

.forecast-map { padding: 0 0 32px; }

/* dimmed while forecast_map_swap.js fetches the next map */
.is-loading { opacity: 0.45; transition: opacity 0.15s; pointer-events: none; }

/* The embedded C3S+NMME fragment's Leaflet container is fixed at 1000x500px
   by folium; stretch it to the full column width instead, preserving its
   fixed -90..90 / -180..180 (2:1) extent so fitBounds() still frames it. */
.forecast-map .folium-map {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 1;
}

.folium-map {
    outline-color: darkblue;
    outline-width: 1px;
    outline-style: solid;
    /* Leaflet's own panes/controls use z-index up to 1000, which otherwise
       compares directly against the page's sticky header (z-index: 20) and
       wins, painting the map over the nav as it scrolls past. Isolating
       traps all of Leaflet's internal stacking inside the map box. */
    isolation: isolate;
}

/* IRI archive: plain static GIFs, one per region/type/lead, so they get a
   simple centred figure rather than the Leaflet treatment above. */
.iri-archive-figure { margin: 0 0 40px; }
.iri-archive-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.iri-archive-figure figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.forecast-blog-post {
  padding: 24px 40px;
  margin: 0 0 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.forecast-blog-post h2 { font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 8px; color: var(--ink); }
.forecast-blog-post .meta { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 10px; }

.forecast-header-post {
  padding: 24px 40px;
  margin: 0 0 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.forecast-citation { padding: 0 40px 40px; font-size: 0.9rem; color: var(--ink-soft); }
.forecast-citation-heading { padding: 0 40px; }
/* a citation set within page prose, aligned with the text around it */
.forecast-citation.forecast-citation-inline,
.forecast-citation-heading.forecast-citation-inline { padding: 0; }

.page-content table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.page-content table th,
.page-content table td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; font-size: 0.9rem; }
.page-content { font-size: 1.05rem; color: #2a2f36; }
.page-content p { margin: 0 0 20px; }
.page-content h2,
.page-content h3,
.page-content h4 {
  font-family: var(--font-display);
  color: var(--navy-dark);
  line-height: 1.3;
  margin: 40px 0 16px;
}
.page-content h2 { font-size: 1.5rem; }
.page-content h3 { font-size: 1.2rem; }
.page-content h4 { font-size: 1.05rem; }
.page-content ul,
.page-content ol { margin: 0 0 20px; padding-left: 1.4em; }
.page-content li { margin-bottom: 8px; }
.page-content a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--columbia-blue); text-decoration-skip-ink: none;}
.page-content a:hover { color: var(--columbia-blue); }
.page-content figure { margin: 0 0 28px; }
.page-content figure img { border-radius: var(--radius); }
.page-content figcaption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 8px; }

/* Pull-down prose sections, one open at a time — used for the two forecast
   eras on the Seasonal About page. Exclusivity comes from `name` on the
   <details> elements, not from here. */
.disclosure-group { margin: 0 0 28px; border-top: 1px solid var(--line); }
.disclosure { border-bottom: 1px solid var(--line); }
.disclosure > summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 16px 40px 16px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
}
/* the default triangle, in the two places browsers put it */
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::marker { content: ""; }
.disclosure > summary:focus-visible {
  outline: 2px solid var(--columbia-blue);
  outline-offset: 2px;
}
.disclosure-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--navy-dark);
}
.disclosure > summary:hover .disclosure-title { color: var(--columbia-blue); }
.disclosure-era {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* chevron, pointing down when closed and up when open */
.disclosure > summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 22px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.disclosure[open] > summary::after { transform: rotate(-135deg); }
.disclosure-body { padding-bottom: 4px; }
.disclosure-body > :first-child { margin-top: 0; }
.disclosure-body > :last-child { margin-bottom: 20px; }

/* Publication list (Research page): year headings over a hanging list of
   citations, each with its DOI on its own line so the long ones wrap
   without breaking up the citation above. */
.pub-book {
  border-left: 3px solid var(--gold);
  background: var(--mist);
  padding: 20px 24px;
  border-radius: var(--radius);
  margin-bottom: 44px;
}
.pub-book-kind {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.pub-year {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--navy-dark);
  margin: 36px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.pub-year:first-of-type { margin-top: 0; }
.pub-list { list-style: none; margin: 0; padding: 0; }
.pub-list > li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  max-width: 64em;
}
.pub-list > li:last-child { border-bottom: none; }
.pub-cite { display: block; font-size: 0.98rem; color: var(--ink); }
/* title-first variant (ENSO Links page): linked title over a smaller
   authors / year / journal line */
.pub-list .pub-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy-dark);
  text-decoration: none;
}
.pub-list .pub-title:hover { color: var(--navy); text-decoration: underline; text-decoration-color: var(--columbia-blue); text-underline-offset: 0.18em; }
.pub-meta { display: block; margin-top: 4px; font-size: 0.88rem; color: var(--ink-soft); }
.pub-book .pub-cite { margin: 0 0 10px; }
.pub-doi {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: var(--navy);
  word-break: break-word;
}
.pub-doi:hover { color: var(--columbia-blue); text-decoration: underline; text-decoration-skip-ink: none;}

.flash-list { list-style: none; padding: 0; margin: 0 0 24px; }
.flash {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 10px;
  font-size: 0.9rem;
}
.flash-success { background: #e6f4ea; color: #1e6b34; }
.flash-error { background: #fbe9e7; color: #96281b; }
.flash-info { background: var(--columbia-blue-pale); color: var(--navy-dark); }

/* Staff-only banner on a forecast still waiting on its discussion; see
   templates/forecasts/_unreleased_notice.html */
.unreleased-notice {
  background: #fff4d6;
  border-bottom: 1px solid #e8c766;
  color: #5c4300;
  padding: 12px 0;
  font-size: 0.95rem;
}
.unreleased-notice strong { color: #4a3500; }

/* Mailing-list strip under the About page header */
.subscribe-band {
  background: var(--columbia-blue-pale);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.subscribe-band .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.subscribe-band p { margin: 0; color: var(--navy-dark); }

/* Admin dashboard table */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}
table.admin-table { width: 100%; border-collapse: collapse; }
table.admin-table th, table.admin-table td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
table.admin-table th { color: var(--ink-soft); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; }
.status-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
.status-published { background: #e6f4ea; color: #1e6b34; }
.status-draft { background: #f1f2f4; color: #5a6472; }
.row-actions a { font-size: 0.82rem; margin-right: 12px; font-weight: 600; }
.row-actions button {
  background: none;
  border: none;
  color: #96281b;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-soft);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy-dark); color: #b9cbe0; padding: 48px 0 28px; margin-top: 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  color: #fff;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: #b9cbe0; font-size: 0.9rem; }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: #8fa4bd;
}

/* ENSO plume figure + its control panel (see templates/forecasts/enso/plumes.html) */
.forecast-figure {
  margin: 20px 0 0 0;
}
.forecast-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
/* the display: block above would otherwise beat the hidden attribute, which
   _issuance_script.html sets on a figure that fails to load */
.forecast-figure img[hidden] { display: none; }
.forecast-figure figcaption {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.plume-models {
  font-size: 0.95rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.plume-unavailable {
  padding: 40px 16px;
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}