/* Futsal Club Cardiff
   Palette and type sampled directly from the club crest and its
   official matchday documents: crest green, black raven, dragon red,
   on a warm ivory page — set in a serif system to match. */

:root{
  --green: #137222;
  --green-deep: #0b4a17;
  --green-soft: #eaf2ea;
  --raven-black: #14140f;
  --navy: #16213d;
  --navy-deep: #0c1526;
  --bone: #f8f2e4;
  --bone-dim: #efe6d2;
  --steel: #6b6a60;
  --line: #ded4bb;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Lora", Georgia, serif;

  --max-w: 1160px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 10px 30px -18px rgba(20,20,15,0.35);
}

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bone);
  color: var(--raven-black);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 0.5em;
}

h2{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
h3{ font-size: 1.25rem; font-weight: 700; }

p{ margin: 0 0 1em; }

a{ color: inherit; }

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

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

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--bone);
  color: var(--raven-black);
  padding: 12px 18px;
  z-index: 200;
}
.skip-link:focus{ left: 12px; top: 12px; }

:focus-visible{
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

/* ---------- Header ---------- */

.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--green);
  border-bottom: 3px solid var(--green-deep);
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--bone);
}

.brand-crest{
  height: 44px;
  width: 44px;
  object-fit: contain;
}

.brand-text{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.05;
}

.primary-nav{
  display: flex;
  align-items: center;
  gap: 20px;
}

.primary-nav a{
  text-decoration: none;
  color: var(--bone);
  opacity: 0.88;
  font-weight: 500;
  font-size: 0.95rem;
  transition: opacity .15s ease;
}
.primary-nav a:hover{ opacity: 1; }

.nav-cta{
  background: var(--navy);
  color: var(--bone) !important;
  opacity: 1 !important;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600 !important;
}
.nav-cta:hover{ background: var(--navy-deep); }

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span{
  display: block;
  height: 2px;
  background: var(--bone);
  width: 100%;
}

/* ---------- Hero ---------- */

.hero{
  position: relative;
  background:
    linear-gradient(180deg, rgba(11,74,23,0.55) 0%, rgba(11,74,23,0.55) 40%, rgba(13,13,16,0.82) 100%),
    linear-gradient(120deg, rgba(19,114,34,0.5), rgba(11,74,23,0.5)),
    url("assets/hero-photo.jpg");
  background-size: cover;
  background-position: center 30%;
  color: var(--bone);
  overflow: hidden;
  padding: 88px 0 84px;
  text-align: center;
}

.court-motif{
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: rgba(248,242,228,0.09);
}
.court-motif svg{ width: 100%; height: 100%; }
.court-motif svg line,
.court-motif svg path,
.court-motif svg circle{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.court-motif svg.court-motif--vertical{ display: none; }

@media (max-width: 680px){
  .court-motif svg.court-motif--horizontal{ display: none; }
  .court-motif svg.court-motif--vertical{ display: block; }
}

.hero-inner{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero .court-motif{ display: none; }

.hero-crest{
  width: 168px;
  height: 168px;
  object-fit: contain;
  margin-bottom: 20px;
  filter: drop-shadow(0 12px 24px rgba(11,74,23,0.35));
}

.eyebrow{
  color: var(--bone);
  opacity: 0.85;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
  font-size: 0.95rem;
}

.hero h1{
  font-size: clamp(2.6rem, 6.5vw, 4.4rem);
  max-width: 16ch;
  color: var(--bone);
  margin-bottom: 0.2em;
}

.hero-subhead{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--bone);
  opacity: 0.85;
  margin: 0;
}

.hero-lede{
  max-width: 52ch;
  font-size: 1.12rem;
  color: var(--bone);
  opacity: 0.92;
  margin-top: 20px;
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
}

.hero-tagline{
  display: inline-block;
  margin-top: 28px;
  color: var(--bone);
  opacity: 0.75;
  font-style: italic;
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(248,242,228,0.35);
  padding-bottom: 2px;
}
.hero-tagline:hover{ opacity: 1; }

.btn{
  display: inline-block;
  padding: 14px 28px;
  text-decoration: none;
  font-weight: 600;
  font-family: var(--font-body);
  border-radius: var(--radius-pill);
  font-size: 1rem;
  transition: transform .12s ease, background .15s ease, color .15s ease;
  border: 2px solid transparent;
}
.btn:hover{ transform: translateY(-1px); }

.btn-primary{
  background: var(--navy);
  color: var(--bone);
}
.btn-primary:hover{ background: var(--navy-deep); }

.btn-ghost{
  background: transparent;
  border-color: rgba(248,242,228,0.5);
  color: var(--bone);
}
.btn-ghost:hover{ border-color: var(--bone); }

/* ---------- Stat strip (continuous marquee) ---------- */

.stat-strip{
  background: var(--bone);
  border-top: 4px solid var(--navy);
  border-bottom: 4px solid var(--navy);
  padding: 40px 0 36px;
}

.stat-heading{
  font-size: clamp(1.6rem, 3vw, 2rem);
  margin: 0 0 4px;
}

.stat-subheading{
  color: var(--steel);
  margin: 0 0 22px;
  font-size: 1rem;
}

.marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}

.marquee-track{
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
}

@media (hover: hover) and (pointer: fine){
  .marquee:hover .marquee-track{
    animation-play-state: paused;
  }
}

.marquee:focus-within .marquee-track{
  animation-play-state: paused;
}

@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.stat{
  flex: 0 0 232px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  box-shadow: var(--shadow-card);
}

.stat-num{
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  color: var(--green);
  font-weight: 700;
  line-height: 1;
}

.stat-label{
  color: var(--steel);
  font-size: 0.86rem;
}

@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
  .marquee{ overflow-x: auto; }
  .stat[aria-hidden="true"]{ display: none; }
}

/* ---------- Sections ---------- */

.section{ padding: 88px 0; }

/* ---- Three paths ---- */

.paths{ background: var(--bone); padding-top: 68px; padding-bottom: 68px; }

/* ---- What is futsal ---- */

.futsal-explained{
  background: var(--green-soft);
  padding: 64px 0;
}

.futsal-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.futsal-explained h2{ margin-bottom: 12px; }
.futsal-explained > .wrap > div > p{ color: var(--steel); max-width: 46ch; margin: 0; }

.futsal-facts{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.futsal-facts li{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 0.94rem;
  color: var(--raven-black);
}

.paths h2{ margin-bottom: 24px; }

.paths-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.path-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-decoration: none;
  color: var(--raven-black);
  box-shadow: var(--shadow-card);
  transition: transform .15s ease, border-color .15s ease;
}
.path-card:hover{
  transform: translateY(-3px);
  border-color: var(--green);
}

.path-kicker{
  font-size: 0.8rem;
  color: var(--navy);
  font-weight: 600;
}

.path-card h3{ margin: 0; }
.path-card p{ color: var(--steel); margin: 0; font-size: 0.96rem; }

.path-link{
  margin-top: 8px;
  color: var(--green);
  font-weight: 600;
  font-size: 0.94rem;
}

.about{ background: var(--bone); }

.about-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  align-items: start;
}

.about-copy p{ max-width: 58ch; }

.journey{
  margin: 20px 0 0;
  padding-left: 1.2em;
  max-width: 58ch;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.journey li{
  padding-left: 6px;
}
.journey li::marker{
  color: var(--green);
  font-weight: 700;
}

.about-tag{
  color: var(--green);
  font-weight: 600;
  margin-top: 24px;
}

/* ---- Women's spotlight ---- */

.womens{ background: var(--green-deep); }

.womens-grid{
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: center;
}

.womens-panel{
  background: rgba(248,242,228,0.06);
  border: 1px solid rgba(248,242,228,0.2);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.womens-kicker{
  display: inline-block;
  color: var(--bone);
  background: var(--navy);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 14px;
}

.womens-panel h3{ color: var(--bone); margin: 0; }

.womens-copy h2{ color: var(--bone); }
.womens-copy p{ color: var(--bone-dim); max-width: 54ch; }

/* ---- Philosophy ---- */

.philosophy{ background: var(--bone); padding: 76px 0; }

.philosophy-inner{
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.philosophy-mark{
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: var(--green);
  margin: 0;
}

.philosophy-line{
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--navy);
  margin: 4px 0 20px;
}

.philosophy-body{
  color: var(--steel);
  font-size: 1.05rem;
  margin: 0;
}

.about-panel{
  background: var(--green);
  color: var(--bone);
  padding: 32px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.about-panel h3{ color: var(--bone); }

.panel-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.panel-list li{
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(248,242,228,0.22);
  padding-top: 14px;
}
.panel-list li:first-child{ border-top: none; padding-top: 0; }
.panel-list span{
  color: var(--bone-dim);
  font-size: 0.82rem;
}
.panel-list strong{
  font-weight: 600;
  font-size: 1.02rem;
}

.join{ background: var(--green-deep); color: var(--bone); }
.join h2{ color: var(--bone); }
.join p{ color: var(--bone-dim); max-width: 54ch; }

.join-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 52px;
  align-items: start;
}

.join-cards{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.join-card{
  background: rgba(248,242,228,0.06);
  border: 1px solid rgba(248,242,228,0.2);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.join-card h3{ color: var(--bone); margin-bottom: 8px; }
.join-card p{ color: var(--bone-dim); margin: 0; }

.sponsors{ background: var(--bone); }
.sponsors-lede{ max-width: 56ch; color: var(--steel); }

.why-partner{
  list-style: none;
  margin: 24px 0 8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.why-partner li{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 0.9rem;
  color: var(--navy);
  font-weight: 600;
}

.sponsor-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.sponsor-card{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

a.sponsor-card{
  text-decoration: none;
  color: inherit;
}

a.sponsor-card:hover{
  transform: translateY(-3px);
}

.sponsor-kicker{
  font-size: 0.8rem;
  color: var(--navy);
  font-weight: 600;
}

.sponsor-name{
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 4px;
}

.sponsor-card p{ color: var(--steel); margin: 0; font-size: 0.96rem; }

.sponsor-quote{
  margin-top: 6px !important;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-style: italic;
  font-size: 0.85rem !important;
  color: var(--steel);
  opacity: 0.7;
}

.sponsor-reach{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
  margin-top: 28px;
  padding: 28px;
  background: var(--raven-black);
  border-radius: var(--radius-lg);
}

.reach-stat{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.reach-num{
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-weight: 700;
  color: var(--bone);
}

.reach-label{
  color: var(--bone-dim);
  font-size: 0.86rem;
  max-width: 26ch;
}

.tiers{ margin-top: 48px; }
.tiers h3{ margin-bottom: 4px; }
.tiers-lede{ color: var(--steel); margin-bottom: 20px; font-size: 0.96rem; }

.tiers-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.tier-card{
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tier-name{
  font-weight: 700;
  font-size: 0.98rem;
}

.tier-price{
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green);
}
.tier-price small{
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--steel);
}

.tier-card p{ color: var(--steel); margin: 4px 0 0; font-size: 0.86rem; }

.tier-card--custom{
  background: var(--navy);
  border-color: var(--navy);
}
.tier-card--custom .tier-name,
.tier-card--custom .tier-price{ color: var(--bone); }
.tier-card--custom p{ color: rgba(248,242,228,0.75); }

.sponsor-cta{
  margin-top: 24px;
  background: var(--raven-black);
  border-radius: var(--radius-lg);
  padding: 34px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-card);
}

.sponsor-cta-text{ max-width: 620px; }
.sponsor-cta-text .sponsor-kicker{ display: block; color: rgba(248,242,228,0.7); margin-bottom: 6px; }
.sponsor-cta-text .sponsor-name{ display: block; color: var(--bone); margin-bottom: 10px; }
.sponsor-cta-text p{ color: var(--bone-dim); margin: 0; font-size: 0.96rem; }

.sponsor-cta .btn-primary{
  background: var(--green);
  flex-shrink: 0;
}
.sponsor-cta .btn-primary:hover{ background: var(--green-deep); }

/* ---------- CTA band ---------- */

.cta-band{
  position: relative;
  background: var(--navy);
  color: var(--bone);
  padding: 84px 0;
  overflow: hidden;
}
.cta-band .court-motif{ color: rgba(248,242,228,0.07); }
.cta-inner{ position: relative; z-index: 1; max-width: 640px; }
.cta-band h2{ color: var(--bone); }
.cta-band p{ color: rgba(248,242,228,0.92); font-size: 1.05rem; }
.cta-band .btn-ghost{ border-color: rgba(248,242,228,0.5); }
.cta-band .btn-primary{ background: var(--green); }
.cta-band .btn-primary:hover{ background: var(--green-deep); }

/* ---------- Footer ---------- */

.site-footer{
  background: var(--raven-black);
  color: var(--bone-dim);
  padding-top: 44px;
}

.footer-inner{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(248,242,228,0.14);
}

.footer-brand{
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-crest{ width: 40px; height: 40px; object-fit: contain; }
.footer-brand .brand-text{ color: var(--bone); font-size: 1.15rem; }
.footer-brand p{ color: var(--bone-dim); margin-top: 4px; font-size: 0.88rem; }

.footer-links{
  display: flex;
  gap: 24px;
  align-items: center;
}
.footer-links a{ text-decoration: none; color: var(--bone-dim); font-size: 0.92rem; }
.footer-links a:hover{ color: var(--bone); }

.footer-bottom{
  padding: 18px 24px 26px;
  font-size: 0.85rem;
  color: var(--steel);
}
.footer-bottom p{ margin: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 980px){
  .sponsor-grid{ grid-template-columns: repeat(2, 1fr); }
  .paths-grid{ grid-template-columns: 1fr; }
  .tiers-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 880px){
  .about-grid, .join-grid, .womens-grid, .futsal-grid{ grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 640px){
  .tiers-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px){
  .sponsor-grid{ grid-template-columns: 1fr; }
  .tiers-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 900px){
  .primary-nav{
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--green);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 28px;
    gap: 18px;
    display: none;
    border-bottom: 3px solid var(--green-deep);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
  .primary-nav.open{ display: flex; }
  .nav-toggle{ display: flex; }
  .nav-cta{ width: 100%; text-align: center; }
  .section{ padding: 60px 0; }
  .hero{ padding: 64px 0 52px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn{ transition: none; }
}

/* ---------- Stories / news hub ---------- */

.news-hub{ padding-top: 64px; }
.news-hub h1{ margin-bottom: 8px; }
.news-hub-lede{ color: var(--steel); max-width: 56ch; margin-bottom: 36px; }

.story-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.story-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  text-decoration: none;
  color: var(--raven-black);
  box-shadow: var(--shadow-card);
  transition: transform .15s ease, border-color .15s ease;
}
.story-card:hover{
  transform: translateY(-3px);
  border-color: var(--green);
}

.story-tag{
  font-size: 0.78rem;
  color: var(--navy);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.story-card h3{ margin: 0; font-size: 1.15rem; }
.story-card p{ color: var(--steel); margin: 0; font-size: 0.94rem; }

/* ---------- Article pages ---------- */

.article-page{ padding-top: 56px; }

.article-wrap{ max-width: 720px; }

.article-back{
  display: inline-block;
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 20px;
  font-size: 0.92rem;
}
.article-back:hover{ text-decoration: underline; }

.article-tag{
  display: inline-block;
  background: var(--green-soft);
  color: var(--green-deep);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 14px;
}

.article-page h1{
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin-bottom: 28px;
}

.article-body p,
.article-body li{
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--raven-black);
}
.article-body ul{ padding-left: 1.2em; margin: 0 0 1.2em; }
.article-body li{ margin-bottom: 6px; }

.article-image{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: 28px 0;
  box-shadow: var(--shadow-card);
}

.draft-notice{
  background: var(--bone-dim);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  color: var(--steel);
  font-size: 0.94rem;
  margin: 24px 0;
}
.draft-notice strong{ color: var(--navy); }

/* ---- Homepage stories teaser ---- */

.stories-teaser{ background: var(--bone); }
.stories-teaser-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.stories-teaser-header h2{ margin: 0; }
.stories-teaser-header a{
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.96rem;
}
.stories-teaser-header a:hover{ text-decoration: underline; }

@media (max-width: 880px){
  .story-grid{ grid-template-columns: 1fr; }
}

/* ---------- Academy page ---------- */

.academy-hero{
  background: var(--green);
  color: var(--bone);
  text-align: center;
  padding: 76px 0;
}
.academy-hero-inner{ max-width: 640px; margin: 0 auto; }
.academy-hero .article-tag{
  background: rgba(248,242,228,0.15);
  color: var(--bone);
}
.academy-hero h1{ color: var(--bone); margin: 16px 0; font-size: clamp(2.2rem, 5vw, 3rem); }
.academy-lede{ color: var(--bone); opacity: 0.92; margin-bottom: 28px; font-size: 1.08rem; }

.academy-details{ background: var(--bone); }
.academy-details-lede{ color: var(--steel); max-width: 56ch; margin-bottom: 28px; }

.academy-terms{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.academy-term{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.academy-term-label{ font-size: 0.8rem; color: var(--navy); font-weight: 600; }
.academy-term strong{ font-size: 0.98rem; font-weight: 600; }

@media (max-width: 720px){
  .academy-terms{ grid-template-columns: 1fr; }
}

/* ---------- Membership (Stripe) ---------- */

.membership-block{
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(248,242,228,0.15);
}
.membership-block h3{ color: var(--bone); margin-bottom: 6px; }
.membership-block p{ color: var(--bone-dim); margin-bottom: 18px; }
.membership-block .draft-notice{
  background: rgba(248,242,228,0.06);
  border-color: rgba(248,242,228,0.25);
  color: var(--bone-dim);
  margin-top: 18px;
}
.membership-block .draft-notice strong{ color: var(--bone); }

/* ---------- Merch page ---------- */
.merch-section{ background: var(--bone); }
.merch-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:12px; }
.merch-grid-2{ grid-template-columns:repeat(2,1fr); max-width:calc(66.66% - 8px); }
.merch-h2{ margin-top:48px; }
.merch-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column; }
.merch-media{ aspect-ratio:4/3; background:linear-gradient(135deg,var(--navy),var(--navy-deep)); color:var(--bone-dim); display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.merch-soon .merch-media{ background:linear-gradient(135deg,var(--green),var(--green-deep)); }
.merch-body{ padding:22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.merch-body h3{ margin:0; font-size:1.15rem; }
.merch-body p{ margin:0; color:var(--steel); font-size:.94rem; }
.merch-meta{ font-size:.85rem !important; }
.merch-buy{ margin-top:auto; padding-top:10px; }
.merch-pill{ display:inline-block; padding:8px 16px; border-radius:var(--radius-pill); background:var(--bone); color:var(--navy); font-weight:600; font-size:.85rem; }
@media (max-width:880px){ .merch-grid,.merch-grid-2{ grid-template-columns:1fr; max-width:none; } }

/* ---------- Membership tiers ---------- */
.member-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:24px; }
.member-card{ position:relative; overflow:hidden; background:#fff; color:var(--raven-black); border-radius:var(--radius-lg); padding:32px 28px 28px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-card); }
.member-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--green); }
.member-card:nth-child(2)::before{ background:var(--navy); }
.member-card:nth-child(3)::before{ background:var(--green-deep); }
.member-label{ font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--green); }
.member-card h4{ margin:0; font-size:1.25rem; color:var(--raven-black); }
.member-price{ margin:4px 0 6px; color:var(--raven-black); display:flex; align-items:baseline; gap:8px; }
.member-price strong{ font-family:'Playfair Display',serif; font-size:2.6rem; line-height:1; }
.member-price span{ font-size:.95rem; color:#4a4a42; }
.member-list{ list-style:none; padding:16px 0 0; margin:0 0 16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; font-size:1rem; line-height:1.4; color:#33332c; flex:1; }
.member-list li{ padding-left:26px; position:relative; }
.member-list li::before{ content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700; }
.btn-light{ background:var(--green); color:#fff; text-align:center; }
.btn-light:hover{ background:var(--green-deep); }
.member-note{ margin-top:20px !important; font-size:.92rem; }
.member-note a{ color:var(--bone); }
@media (max-width:880px){ .member-grid{ grid-template-columns:1fr; } }

/* Partner tiers: cleaner accent + readable text */
.tiers-grid .tier-card{ position:relative; overflow:hidden; border-top:1px solid var(--line); padding-top:24px; }
.tiers-grid .tier-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--green); }
.tiers-grid .tier-card:nth-child(2)::before{ background:var(--navy); }
.tiers-grid .tier-card:nth-child(3)::before{ background:var(--steel); }
.tiers-grid .tier-card p{ color:#4a4a42; font-size:.92rem; }
.tiers-grid .tier-card--custom{ background:var(--navy); border-color:var(--navy); }
.tiers-grid .tier-card--custom::before{ background:var(--green); }
.tiers-grid .tier-card--custom .tier-name,
.tiers-grid .tier-card--custom .tier-price{ color:var(--bone); }
.tiers-grid .tier-card--custom p{ color:rgba(248,242,228,0.85); }
.membership-block .member-price{ color:var(--raven-black); }
.membership-block .member-price span{ color:#4a4a42; }
.member-card{ padding-top:30px; }
.member-card::before{ left:0; right:0; bottom:auto; width:auto; height:5px; }