/* Site-specific overrides — survives Mobirise re-exports.
   Loaded after mbr-additional.css. Edit this file freely; do NOT
   put hand-written rules back into mbr-additional.css. */

/* ==========================================================================
   Responsive overrides — site-wide
   ========================================================================== */
.skip-to-main:focus,
.skip-to-main:focus-visible {
  position: fixed !important;
  top: 1rem;
  left: 1rem;
  z-index: 1100;
  padding: .75rem 1.25rem;
  background: #255D60;
  color: #ffffff;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  margin: 0 !important;
  white-space: nowrap;
}
.cid-uPXBEYBcvw {
  background-image: none !important;
  position: relative;
  overflow: hidden;
}
.cid-uPXBEYBcvw .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cid-uPXBEYBcvw .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.cid-uPXBEYBcvw .container {
  position: relative;
  z-index: 1;
}
.cid-uPXBEYBcvw .mbr-section-title,
.cid-uPXBEYBcvw .mbr-section-subtitle {
  text-shadow: 0 1px 8px rgba(13, 32, 33, 0.35);
}
.cid-uPXBEYBcvw .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.cid-uPXBEYBcvw .hero-ctas .btn {
  margin: 0;
}
.cid-uPXBEYBcvw .hero-scroll-cue {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 2rem;
  text-decoration: none;
  z-index: 2;
  animation: hero-scroll-bob 2s ease-in-out infinite;
}
.cid-uPXBEYBcvw .hero-scroll-cue:hover {
  color: #e0efde;
}
@keyframes hero-scroll-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}
@media (prefers-reduced-motion: reduce) {
  .cid-uPXBEYBcvw .hero-scroll-cue { animation: none; }
}
.btn-danger-outline,
.btn-danger-outline:active {
  background-color: transparent !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}
.btn-danger-outline:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}
@media (min-width: 1200px) {
  .menu .navbar {
    flex-wrap: nowrap;
  }
  .menu .navbar > .container {
    flex-wrap: nowrap;
  }
  /* Mobirise auto-emits .cid-XXX ul.navbar-nav { flex-wrap: wrap } at higher
     specificity than .menu .navbar-nav, so we match its specificity here.    */
  .menu .navbar.navbar-expand-xl ul.navbar-nav {
    flex-wrap: nowrap;
  }
  .nav-dropdown .link {
    margin: .667em .9em;
    white-space: nowrap;
  }
}
.navbar-buttons .btn {
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .header1 .display-1 {
    font-size: 1rem;
  }
  .header1 .display-2 {
    font-size: 1.6rem;
    line-height: 1.2;
  }
}
@media (max-width: 480px) {
  .features3 .mbr-section-subtitle,
  .content5 .mbr-text {
    font-size: 0.95rem;
    line-height: 1.5;
  }
}
.features-image .item-img img,
.gallery3 .item-img img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 1199.98px) {
  .navbar-collapse .icons-menu {
    justify-content: center;
    display: flex;
    gap: .5rem;
  }
}
/* ==========================================================================
   New site components — impact band, partners, footer, tints
   ========================================================================== */
.impact-band {
  background-color: #255D60;
  color: #ffffff;
  padding: 2.5rem 0;
}
.impact-band .impact-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem 1rem;
  text-align: center;
}
.impact-band .impact-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}
.impact-band .impact-num {
  font-family: 'Work Sans', sans-serif;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
}
.impact-band .impact-lbl {
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: #e0efde;
  max-width: 18ch;
}
.section-tinted {
  background-color: #f3f7ec;
}
.partners-band {
  background-color: #ffffff;
  padding: 3rem 0;
  border-top: 1px solid rgba(13, 32, 33, 0.06);
  border-bottom: 1px solid rgba(13, 32, 33, 0.06);
}
.partners-band .partners-caption {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #6b8082;
  text-align: center;
  margin: 0 0 1.5rem;
  font-weight: 500;
}
.partners-band .partner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2.5rem;
  text-align: center;
}
.partners-band .partner-list li {
  font-family: 'Work Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: #255D60;
  white-space: nowrap;
}
.partners-band .partners-cta {
  margin-top: 2rem;
  text-align: center;
  color: #232323;
}
.partners-band .partners-cta .text-link {
  color: #255D60;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.partners-band .partners-cta .text-link:hover {
  color: #0D2021;
}
.news-date {
  font-family: 'Work Sans', sans-serif;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #6b8082;
  font-weight: 500;
  margin: 0;
}
.site-footer {
  background-color: #0D2021;
  color: #cbd6d8;
  /* `env(safe-area-inset-bottom)` ensures iOS Safari home-indicator and
     other browser chrome don't visually clip the bottom strip. */
  padding: 4rem 1.25rem calc(4rem + env(safe-area-inset-bottom, 0px));
  font-family: 'Work Sans', sans-serif;
}
@media (max-width: 575.98px) {
  .site-footer {
    padding: 3rem 1rem calc(6rem + env(safe-area-inset-bottom, 0px));
  }
}
.site-footer a {
  color: #cbd6d8;
  text-decoration: none;
}
.site-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 3fr;
  gap: 2.5rem;
  align-items: start;
}
.site-footer .footer-logo img {
  filter: brightness(0) invert(1);
  width: auto;
  max-width: 160px;
  height: auto;
}
.site-footer .footer-tagline {
  margin: 1rem 0 1rem;
  font-size: .95rem;
  line-height: 1.5;
}
.site-footer .footer-social {
  display: flex;
  gap: .75rem;
}
.site-footer .footer-social a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  font-size: 1.25rem;
  color: #ffffff;
}
.site-footer .footer-social a:hover {
  background: rgba(255, 255, 255, 0.16);
  text-decoration: none;
}
.site-footer .footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.site-footer .footer-heading {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #ffffff;
  margin: 0 0 1rem;
  font-weight: 500;
}
.site-footer .footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-nav li {
  margin-bottom: .5rem;
  font-size: .95rem;
}
.site-footer .footer-address {
  font-style: normal;
  font-size: .95rem;
  line-height: 1.6;
}
.site-footer .footer-bottom {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: .85rem;
  color: #99a8aa;
}
.site-footer .footer-bottom p {
  margin: .35rem 0;
  line-height: 1.6;
}
.site-footer .footer-acknowledgement {
  font-style: italic;
  max-width: 70ch;
}
@media (max-width: 991.98px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .site-footer .footer-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media (max-width: 575.98px) {
  .site-footer .footer-nav {
    grid-template-columns: 1fr;
  }
  .impact-band .impact-num {
    font-size: 2.25rem;
  }
}
.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;
}
.mbr-text a:not(.btn),
.mbr-section-subtitle a:not(.btn) {
  color: #255D60;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mbr-text a:not(.btn):hover,
.mbr-section-subtitle a:not(.btn):hover {
  color: #0D2021;
}
.cid-sI6vCLnlRG .row {
  justify-content: center;
}

/* ==========================================================================
   Print stylesheet — Wave 4.8
   ========================================================================== */
@media print {
  .navbar,
  .site-footer,
  #scrollToTop,
  .hero-scroll-cue,
  .impact-band,
  .partners-band,
  .quote-band,
  .skip-to-main { display: none !important; }
  body { color: #000 !important; background: #fff !important; }
  a { text-decoration: underline; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  .features-image .item-img,
  .gallery3 .item-img { break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }
  .container { max-width: 100% !important; }
}

/* ==========================================================================
   Self-hosted variable Work Sans — Wave 5.1
   Two unicode ranges: Latin (default) + Latin-Ext (covers Te reo Māori
   macrons: ā ē ī ō ū). Browser fetches whichever range is needed.
   ========================================================================== */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/site/fonts/WorkSans-Variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/site/fonts/WorkSans-Variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Wave 6 — visual polish, brand voice, microinteractions
   ========================================================================== */

/* 6.1 — Card aspect ratio (4/3 site standard) + hover lift */
.features-image .item-img,
.gallery3 .item-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3f7ec;
}
.features-image .item-img picture,
.gallery3 .item-img picture {
  display: block;
  width: 100%;
  height: 100%;
}
.features-image .item-img picture > img,
.features-image .item-img > img,
.gallery3 .item-img picture > img,
.gallery3 .item-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.features-image .item-wrapper,
.gallery3 .item-wrapper {
  transition: box-shadow .2s ease, transform .2s ease;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}
.features-image .item-wrapper:hover,
.gallery3 .item-wrapper:hover {
  box-shadow: 0 6px 24px rgba(13, 32, 33, 0.12);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .features-image .item-wrapper,
  .gallery3 .item-wrapper { transition: none; }
  .features-image .item-wrapper:hover,
  .gallery3 .item-wrapper:hover { transform: none; }
}

/* 6.2 — Primary CTA colour. (See Wave 7.1 below for current values; the
   pohutukawa red previously used here was reading as a danger signal
   rather than a positive action so it has been replaced with brand teal.) */

/* 6.3 — Hero secondary CTA. (See Wave 7.2 below for current values; the
   transparent outline previously used here was hard to read against the
   busy illustration so it now uses a solid background.) */
/* Mobile: stack hero CTAs full-width so hand-tapping is easy. */
@media (max-width: 575.98px) {
  .cid-uPXBEYBcvw .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .cid-uPXBEYBcvw .hero-ctas .btn {
    width: 100%;
    text-align: center;
  }
  .cid-uPXBEYBcvw .display-1 {
    font-size: 1.75rem !important;
    line-height: 1.2;
  }
  .cid-uPXBEYBcvw .display-7 {
    font-size: 1rem !important;
  }
}

/* 6.4 — Navbar tagline removed in Wave 7. The tagline span was dropped
   from the HTML across all pages; the rule that styled it lived here. */

/* Footer Te reo line gets gentle distinction */
.site-footer .footer-mihi {
  font-style: italic;
  color: #b9c8ca;
  margin: 0 0 .35rem;
  max-width: 70ch;
}

/* 6.5 — Botanical SVG divider strip between sections */
.botanical-divider {
  display: block;
  width: 100%;
  height: 64px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none' fill='%23e0efde'%3E%3Cpath d='M0 64 V 32 Q 60 16 120 32 T 240 32 T 360 32 T 480 32 T 600 32 T 720 32 T 840 32 T 960 32 T 1080 32 T 1200 32 T 1320 32 T 1440 32 V 64 Z'/%3E%3Cg fill='%23c8d9b4' opacity='.7'%3E%3Cpath d='M120 38 q -6 -10 0 -20 q 6 10 0 20 z M260 42 q -6 -12 0 -24 q 6 12 0 24 z M420 38 q -5 -10 0 -20 q 5 10 0 20 z M580 44 q -7 -14 0 -28 q 7 14 0 28 z M740 38 q -6 -10 0 -20 q 6 10 0 20 z M900 42 q -6 -12 0 -24 q 6 12 0 24 z M1060 38 q -5 -10 0 -20 q 5 10 0 20 z M1220 42 q -6 -12 0 -24 q 6 12 0 24 z M1380 38 q -5 -10 0 -20 q 5 10 0 20 z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0;
}

/* 6.6 — Volunteer pull-quote band */
.quote-band {
  background: #f3f7ec;
  padding: 3.5rem 1rem;
}
.quote-band blockquote {
  max-width: 65ch;
  margin: 0 auto;
  text-align: center;
  font-family: 'Work Sans', sans-serif;
  font-style: italic;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5;
  color: #1a3537;
  position: relative;
  padding: 0 1rem;
}
.quote-band blockquote::before {
  content: "\201C";
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 5rem;
  line-height: 1;
  font-style: normal;
  color: #c0d4a3;
  font-family: Georgia, 'Times New Roman', serif;
}
.quote-band blockquote p {
  margin: 0 0 1rem;
}
.quote-band blockquote figcaption {
  font-style: normal;
  font-size: .95rem;
  color: #4a6062;
  font-weight: 500;
}
@media (max-width: 575.98px) {
  .quote-band blockquote { font-size: 1.1rem; padding: 0 .5rem; }
  .quote-band blockquote::before { font-size: 4rem; top: -1.5rem; }
}

/* 6.7 — Latest News supporting link */
.news-archive-link {
  display: block;
  text-align: center;
  margin: .5rem 0 0;
  color: #255D60;
  font-size: .95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.news-archive-link:hover {
  color: #0D2021;
}

/* 6.8 — Partners pill styling (until real logos arrive) */
.partners-band .partner-list li {
  border: 1px solid rgba(37, 93, 96, 0.25);
  border-radius: 999px;
  padding: .45rem 1.1rem;
  background: rgba(37, 93, 96, 0.03);
  font-weight: 500;
}

/* 6.9 — Nav link underline-slide on hover */
.nav-dropdown .link {
  position: relative;
}
.nav-dropdown .link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.15rem;
  height: 2px;
  background: #255D60;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease;
}
.nav-dropdown .link:hover::after,
.nav-dropdown .link[aria-current="page"]::after {
  transform: scaleX(1);
}
@media (max-width: 1199.98px) {
  .nav-dropdown .link::after { display: none; }
}

/* Scroll-to-top button — override the Mobirise mobile rule that stretches
   the fixed container full-width and centres it (which overlaps footer
   content). Keep it bottom-right and shrink the hit area. */
.mbr-arrow-up,
#scrollToTop.mbr-arrow-up {
  left: auto !important;
  right: 1.25rem !important;
  bottom: 1.25rem !important;
  text-align: right !important;
  width: auto !important;
}
.mbr-arrow-up a,
#scrollToTop.mbr-arrow-up a {
  width: 44px;
  height: 44px;
}
.mbr-arrow-up a i {
  line-height: 44px !important;
}
/* JS toggles .scrollToTop--hidden when the footer is near the viewport. */
#scrollToTop.scrollToTop--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
#scrollToTop {
  transition: opacity .2s ease, transform .2s ease;
}

/* Footer bottom padding is now managed at the canonical .site-footer rule
   above (with safe-area-inset support). This block intentionally empty. */

/* ==========================================================================
   Wave 7 — Home page polish (review feedback, 2026-05-02)
   ========================================================================== */

/* 7.1 — Primary CTA: brand teal instead of pohutukawa red (was reading
   as a "danger" signal). Applies to hero "Get Involved" and the navbar
   "Become a Volunteer" — the only two btn-danger primary CTAs. */
.cid-uPXBEYBcvw .btn-danger,
.cid-uPXBEYBcvw .btn-danger:active,
.cid-sI6IRV9Trw .navbar-buttons .btn-danger,
.cid-sI6IRV9Trw .navbar-buttons .btn-danger:active {
  background-color: #255D60 !important;
  border-color: #255D60 !important;
  color: #ffffff !important;
}
.cid-uPXBEYBcvw .btn-danger:hover,
.cid-uPXBEYBcvw .btn-danger:focus-visible,
.cid-sI6IRV9Trw .navbar-buttons .btn-danger:hover,
.cid-sI6IRV9Trw .navbar-buttons .btn-danger:focus-visible {
  background-color: #1a4548 !important;
  border-color: #1a4548 !important;
  color: #ffffff !important;
}

/* 7.2 — Hero secondary CTA: solid white pill with brand-teal text.
   Replaces the transparent outline (which was hard to read on the busy
   illustration). Overrides the global .btn-danger-outline rules above. */
.cid-uPXBEYBcvw .btn-danger-outline,
.cid-uPXBEYBcvw .btn-danger-outline:active {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #255D60 !important;
  text-shadow: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cid-uPXBEYBcvw .btn-danger-outline:hover,
.cid-uPXBEYBcvw .btn-danger-outline:focus-visible {
  background-color: #f3f7ec !important;
  border-color: #f3f7ec !important;
  color: #1a4548 !important;
}

/* 7.3 — Hero gradient overlay so the white headline / subhead reads
   well over the lighter sky and water areas of the illustration. Sits
   between .hero-bg img (z=0) and .container (z=1). The overlay is
   strongest in the middle (where the headline + subhead + CTAs sit)
   and lightest at the bottom so the kiwi / ferns illustration still
   reads through. */
.cid-uPXBEYBcvw .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(13, 32, 33, 0.25) 0%,
      rgba(13, 32, 33, 0.55) 40%,
      rgba(13, 32, 33, 0.50) 70%,
      rgba(13, 32, 33, 0.30) 100%);
  pointer-events: none;
}
/* Strengthen the headline shadow now that the overlay is in place. */
.cid-uPXBEYBcvw .mbr-section-title,
.cid-uPXBEYBcvw .mbr-section-subtitle {
  text-shadow: 0 1px 12px rgba(13, 32, 33, 0.6);
}

/* 7.4 — Hero height: shorten so the impact stats band fits above the
   fold on a ~900px-tall viewport. There is a ~60px Mobirise-built-in
   gap between the hero section and the impact band, plus ~177px stats
   band, so 240px total allowance gives us a definitive above-fold fit
   with a small safety margin. */
.cid-uPXBEYBcvw,
.cid-uPXBEYBcvw.mbr-fullscreen {
  min-height: calc(100vh - 240px) !important;
}
@media (max-width: 767.98px) {
  .cid-uPXBEYBcvw,
  .cid-uPXBEYBcvw.mbr-fullscreen {
    /* Mobile: stats are 1-column and the navbar collapses; a shorter
       hero keeps the page feeling content-forward without the layout
       maths getting brittle. */
    min-height: 60vh !important;
  }
}

/* 7.5 — Section heading breathing room: ≥64px above About Us, Latest
   News, and Programmes / Working Groups & Events titles. Mobirise
   doesn't apply any top padding to these sections by default. */
.cid-sI6vCLnlRG .mbr-section-title,
.cid-tJhBCvYJ9L .mbr-section-title,
.cid-t124kkMSn7 .mbr-section-title {
  padding-top: 4rem;
}

/* 7.6 — Card padding parity. Latest News cards used `.item-content
   { padding: 32px }` with an unpadded footer; Programmes used split
   padding (content top/sides + footer bottom/sides). Both now use the
   split pattern so the button-to-card-edge spacing is identical. */
.cid-tJhBCvYJ9L .item-content,
.cid-t124kkMSn7 .item-content {
  padding: 2rem 2rem 0 !important;
}
.cid-tJhBCvYJ9L .item-footer,
.cid-t124kkMSn7 .item-footer {
  padding: 0 2rem 2rem !important;
  margin-top: 1rem !important;
}

/* ==========================================================================
   Wave 8 — Newsletters page (editorial / field-journal aesthetic)
   2026-05-02. Distinct typographic treatment for /newsletters.html.
   - Display serif: self-hosted Fraunces (variable, opsz/wght/SOFT axes)
   - Body sans: existing self-hosted Work Sans
   - Layout: editorial archive with hero featured edition, dotted-leader
     archive list, and an email-subscribe CTA module
   ========================================================================== */

/* 8.0 — Self-hosted Fraunces (latin range, normal + italic, variable) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/site/fonts/Fraunces-Variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/site/fonts/Fraunces-Variable-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 8.1 — Page shell: cream paper background with a subtle vignette */
.newsletters-page {
  --ink: #0d2021;
  --ink-soft: #1a3537;
  --ink-mute: #5a6f70;
  --paper: #faf6ee;       /* warm cream — paper, not a screen */
  --paper-tint: #f0e8d5;  /* deeper cream for tints */
  --teal: #255D60;
  --teal-deep: #1a4548;
  --leaf: #c8d9b4;
  --rule: rgba(13, 32, 33, 0.18);
  --rule-soft: rgba(13, 32, 33, 0.10);
  background-color: var(--paper);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 6vw, 7rem) 0 clamp(5rem, 8vw, 9rem);
  /* fine grain texture overlaid on the cream background */
  background-image:
    radial-gradient(ellipse at top, rgba(255, 255, 255, 0.6), transparent 70%),
    radial-gradient(ellipse at bottom right, rgba(37, 93, 96, 0.04), transparent 60%);
}
.newsletters-page::before {
  content: "";
  position: absolute;
  inset: 0;
  /* subtle fibre texture using SVG noise — keeps the "paper" feel */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.13  0 0 0 0 0.13  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.newsletters-page > * { position: relative; z-index: 1; }
.newsletters-container {
  max-width: 980px;
  padding-left: clamp(1.25rem, 4vw, 2.5rem);
  padding-right: clamp(1.25rem, 4vw, 2.5rem);
}

/* Decorative fern silhouette — far right, behind content, subtle */
.newsletters-fern {
  position: absolute;
  top: 4rem;
  right: -40px;
  width: 220px;
  height: 480px;
  color: rgba(37, 93, 96, 0.18);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 991.98px) {
  .newsletters-fern { width: 140px; height: 320px; right: -60px; opacity: .8; }
}
@media (max-width: 575.98px) {
  .newsletters-fern { display: none; }
}

/* 8.2 — Page header */
.newsletters-head {
  max-width: 640px;
  margin: 0 auto 4.5rem;
  text-align: center;
}
.newsletters-eyebrow {
  font-family: 'Work Sans', sans-serif;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin: 0 0 1.5rem;
}
.newsletters-eyebrow span {
  color: var(--teal);
  letter-spacing: .35em;
}
.newsletters-title {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-weight: 350;
  font-size: clamp(3.5rem, 9vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 1.5rem;
  /* Fraunces variable axes — opsz makes display sizes warm/expressive,
     SOFT (0..100) softens the terminals. */
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 350;
}
.newsletters-lede {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 auto;
}

/* 8.3 — Featured (latest) issue */
.newsletter-featured {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--rule-soft);
  padding: clamp(2.5rem, 4vw, 4rem) clamp(1.75rem, 4vw, 3.5rem);
  margin: 0 0 5rem;
  box-shadow:
    0 1px 0 rgba(13, 32, 33, 0.04),
    0 18px 40px -28px rgba(13, 32, 33, 0.18);
  /* asymmetric corner accent — paper-tab effect */
  border-radius: 2px;
}
.newsletter-featured::after {
  content: "";
  position: absolute;
  top: 0;
  left: 2.5rem;
  width: 60px;
  height: 4px;
  background: var(--teal);
}
.featured-eyebrow {
  font-family: 'Work Sans', sans-serif;
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  margin: 0 0 1.25rem;
}
.featured-season {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-mute);
  font-weight: 400;
  margin: 0 0 .35rem;
  font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 60;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.featured-season-mark {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--leaf);
  font-size: 0;
  line-height: 0;
  /* sits with the italic season label as a small marker */
}
.featured-date {
  margin: 0 0 1.25rem;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 350;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 350;
}
.featured-date a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size .35s ease;
  padding-bottom: .15em;
}
.featured-date a:hover,
.featured-date a:focus-visible {
  background-size: 100% 1px;
  color: var(--teal);
  outline: none;
}
.featured-date-month { display: inline; }
.featured-date-year {
  display: inline;
  margin-left: .15em;
  /* slightly de-emphasised year — like a date stamp */
  color: var(--ink-mute);
  font-variation-settings: "opsz" 144, "SOFT" 0, "wght" 250;
}
.featured-note {
  font-family: 'Work Sans', sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 2rem;
}
.featured-cta {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: 'Work Sans', sans-serif;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--teal);
  padding: .95rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.featured-cta:hover,
.featured-cta:focus-visible {
  background: var(--teal-deep);
  color: #ffffff;
  transform: translateY(-1px);
  outline: none;
}
.featured-cta-arrow {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 350;
  font-variation-settings: "opsz" 14, "wght" 350, "SOFT" 100;
  transition: transform .25s ease;
}
.featured-cta:hover .featured-cta-arrow,
.featured-cta:focus-visible .featured-cta-arrow {
  transform: translateX(4px);
}

/* 8.4 — Archive list */
.newsletter-archive { margin: 0 0 3.5rem; }
.archive-heading {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin: 0 0 1.25rem;
  font-family: 'Work Sans', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.archive-heading-text {
  flex: 0 0 auto;
  color: var(--ink);
}
.archive-heading-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule-soft);
  display: block;
}
.archive-heading-count {
  flex: 0 0 auto;
  font-style: italic;
  letter-spacing: .12em;
  text-transform: none;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  font-variation-settings: "opsz" 14, "wght" 350, "SOFT" 100;
  color: var(--ink-mute);
}
.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.archive-item {
  border-top: 1px solid var(--rule-soft);
}
.archive-item:last-child {
  border-bottom: 1px solid var(--rule-soft);
}
.archive-link {
  display: grid;
  grid-template-columns: minmax(min-content, max-content) 1fr minmax(min-content, max-content) auto;
  /* Center-align everything vertically so date, leader, season, and
     arrow all share the row's true visual midline. (Baseline alignment
     pulled the leader 6px below center because the date's baseline
     sits in the row's lower third.) */
  align-items: center;
  gap: .75rem;
  padding: .55rem .25rem;
  text-decoration: none;
  color: var(--ink);
  transition: color .2s ease, padding-left .25s ease;
}
.archive-link:hover,
.archive-link:focus-visible {
  color: var(--teal);
  padding-left: 1rem;
  outline: none;
}
.archive-date {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 350;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36, "SOFT" 50, "wght" 350;
}
.archive-leader {
  /* Zero-height box; the dotted border sits at the row's vertical
     centre (because of align-items: center on the grid). */
  height: 0;
  border-top: 1px dotted rgba(13, 32, 33, 0.32);
  transition: border-color .2s ease;
}
.archive-link:hover .archive-leader,
.archive-link:focus-visible .archive-leader {
  border-color: var(--teal);
}
.archive-season {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 100;
  color: var(--ink-mute);
  white-space: nowrap;
}
.archive-link:hover .archive-season,
.archive-link:focus-visible .archive-season {
  color: var(--teal);
}
.archive-arrow {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--ink-mute);
  font-variation-settings: "opsz" 14, "wght" 350, "SOFT" 100;
  transition: transform .25s ease, color .2s ease;
  white-space: nowrap;
}
.archive-link:hover .archive-arrow,
.archive-link:focus-visible .archive-arrow {
  transform: translateX(6px);
  color: var(--teal);
}

/* 8.5 — Signup module */
.newsletter-signup {
  position: relative;
  background:
    linear-gradient(135deg, var(--paper-tint) 0%, var(--paper) 100%);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  padding: clamp(2.5rem, 4.5vw, 4rem) clamp(1.75rem, 4vw, 3.5rem);
  overflow: hidden;
}
/* Botanical SVG corner mark — koru-ish curl */
.newsletter-signup::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 220px;
  height: 220px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23255D60' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M180 20 C 180 80, 140 120, 100 120 C 70 120, 50 100, 50 80 C 50 60, 70 50, 85 55 C 100 60, 105 75, 100 85'/%3E%3Cpath d='M155 25 C 158 60, 130 95, 100 100'/%3E%3Cpath d='M130 30 C 132 55, 115 80, 100 85'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.signup-inner {
  max-width: 540px;
  position: relative;
}
.signup-eyebrow {
  font-family: 'Work Sans', sans-serif;
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  margin: 0 0 1rem;
}
.signup-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 350;
  font-size: clamp(1.85rem, 3.5vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 1rem;
  font-variation-settings: "opsz" 72, "SOFT" 50, "wght" 350;
}
.signup-heading em {
  font-style: italic;
  color: var(--teal);
  font-variation-settings: "opsz" 72, "SOFT" 100, "wght" 350;
}
.signup-note {
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 0 2rem;
}
.signup-cta {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  /* Reset button-element defaults so <button class="signup-cta"> looks
     identical to the previous anchor implementation. */
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--teal);
  background: #ffffff;
  border: 1px solid rgba(37, 93, 96, 0.25);
  padding: .9rem 1.25rem .9rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.signup-cta:focus { outline: none; }  /* fall back to focus-visible below */

/* No-JS fallback paragraph (rendered inside <noscript> so only shows
   when JavaScript is disabled and the MailerLite popup can't open) */
.signup-noscript {
  font-family: 'Work Sans', sans-serif;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 1.25rem 0 0;
  max-width: 50ch;
}
.signup-noscript a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.signup-noscript a:hover { color: var(--teal-deep); }
.signup-cta:hover,
.signup-cta:focus-visible {
  background: var(--teal);
  color: #ffffff;
  border-color: var(--teal);
  transform: translateY(-1px);
  outline: none;
}
.signup-cta-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: var(--teal);
  transition: color .2s ease;
}
.signup-cta-icon svg { width: 100%; height: 100%; }
.signup-cta:hover .signup-cta-icon,
.signup-cta:focus-visible .signup-cta-icon { color: #ffffff; }
.signup-cta-text {
  /* email is long; allow it to wrap on small screens */
  word-break: break-word;
}
.signup-cta-arrow {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 350;
  font-variation-settings: "opsz" 14, "wght" 350, "SOFT" 100;
  transition: transform .25s ease;
  margin-left: auto;
}
.signup-cta:hover .signup-cta-arrow,
.signup-cta:focus-visible .signup-cta-arrow {
  transform: translateX(4px);
}

/* 8.6 — Page-load reveal: header → featured → archive items (staggered) → signup
   Staggered fade-up via animation-delay; each archive item uses --n. */
@media (prefers-reduced-motion: no-preference) {
  .newsletters-head,
  .newsletter-featured,
  .archive-heading,
  .archive-item,
  .newsletter-signup {
    opacity: 0;
    transform: translateY(12px);
    animation: news-fade-up .7s cubic-bezier(.2, .7, .2, 1) forwards;
  }
  .newsletters-head { animation-delay: .05s; }
  .newsletter-featured { animation-delay: .2s; }
  .archive-heading { animation-delay: .35s; }
  .archive-item { animation-delay: calc(.4s + (var(--n, 0) * 0.05s)); }
  .newsletter-signup { animation-delay: .9s; }
}
@keyframes news-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* 8.7 — Responsive: simplify the archive grid on mobile */
@media (max-width: 575.98px) {
  .newsletters-page { padding: 3rem 0 4rem; }
  .newsletters-head { margin-bottom: 3rem; }
  .archive-link {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date  arrow"
      "season arrow";
    gap: .15rem 1rem;
    padding: .85rem .25rem;
  }
  .archive-date { grid-area: date; }
  .archive-leader { display: none; }
  .archive-season { grid-area: season; }
  .archive-arrow {
    grid-area: arrow;
    align-self: center;
  }
  .signup-cta {
    flex-wrap: wrap;
    width: 100%;
  }
  .signup-cta-arrow { margin-left: 0; }
}