/* =========================================================================
   Trauma To Power. Design system + components.
   ========================================================================= */

:root {
  /* Color */
  --bg: #FFFFFF;
  --navy: #14213D;
  --navy-deep: #0F1A2E;
  --text: #2E2E2E;
  --text-muted: #5A5F6A;
  --light-gray: #F4F5F7;
  --border: #E2E5EB;
  --cta: #E0A526;
  --cta-hover: #C48E1F;
  --white: #FFFFFF;

  /* Typography */
  --font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Layout. One shared container width drives every section site-wide. */
  --container: 1140px;

  /* Surfaces */
  --radius: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(20,33,61,.06);
  --shadow-md: 0 8px 24px rgba(20,33,61,.08);
  --shadow-lg: 0 20px 48px rgba(20,33,61,.12);

  /* Spacing */
  --s-1: .5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
}

/* ----- Reset / base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--navy);
  margin: 0 0 var(--s-2);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 var(--s-2); }
ul, ol { margin: 0 0 var(--s-2); padding-left: 1.25rem; }
li + li { margin-top: .25rem; }

a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--cta); }

:focus-visible {
  outline: 3px solid var(--cta);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ----- Skip link -------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff;
  padding: .75rem 1rem;
  font-weight: 600; text-decoration: none;
  z-index: 1000;
}
.skip-link:focus { left: 1rem; top: 1rem; outline: 3px solid var(--cta); }

/* ----- Layout primitives ------------------------------------------------ */
/* One shared container drives the whole site. Hero AND every section on
   every page use this exact width, so all content aligns to the same
   left/right edges from page to page. Don't introduce per-section width
   overrides; if a block of body text needs to feel narrower for reading,
   set a max-width on the inner element (e.g. .lead caps at 70ch). */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-3);
}

section { padding: var(--s-6) 0; }
section.section--tight { padding: var(--s-5) 0; }
section.section--gray  { background: var(--light-gray); }
section.section--navy  { background: var(--navy); color: #fff; }
section.section--navy h1,
section.section--navy h2,
section.section--navy h3 { color: #fff; }

/* ----- Site header / nav ------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
          backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: 1.25rem var(--s-3);
  max-width: var(--container);
  margin: 0 auto;
}
@media (min-width: 860px) {
  .site-header__inner { padding: 1.5rem var(--s-3); }
}
.site-header__brand {
  display: inline-flex; align-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: -.01em;
  line-height: 1;
}
.site-header__brand span { color: var(--cta); }
.site-header__logo {
  height: 80px; width: auto; max-width: 100%;
  display: block;
}
@media (min-width: 860px) {
  .site-header__logo { height: 88px; }
}

.nav-toggle {
  background: transparent; border: 0;
  display: inline-flex; flex-direction: column; gap: 5px;
  padding: .5rem; cursor: pointer;
  position: relative;
  z-index: 101;
}
.nav-toggle span {
  width: 26px; height: 2px; background: var(--navy); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav: closed by default. Opens to a full-viewport overlay so
   the menu always covers the entire screen on phones. */
.primary-nav {
  display: none;
}
.primary-nav.is-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #fff;
  padding: 5rem 1.5rem 2rem;
  overflow-y: auto;
  z-index: 100;
  animation: nav-fade .15s ease-out;
}
@keyframes nav-fade { from { opacity: 0; } to { opacity: 1; } }

.primary-nav.is-open ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1rem;
  width: 100%; max-width: 360px; text-align: center;
}
.primary-nav.is-open li + li { margin-top: 0; }
.primary-nav.is-open a:not(.btn) {
  display: block;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 1.5rem; color: var(--navy); text-decoration: none;
  padding: .85rem 0;
}
.primary-nav.is-open a:not(.btn)[aria-current="page"] { color: var(--cta); }
.primary-nav.is-open .btn {
  margin-top: 1rem;
  font-size: 1.05rem;
}

/* Prevent the page from scrolling underneath the open overlay. */
body.nav-open { overflow: hidden; }
.primary-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-1);
}
/* Base anchor styling for the nav (applies on desktop; mobile uses the
   .is-open rules above). :not(.btn) is critical so this doesn't override
   .btn padding via higher specificity. */
.primary-nav a:not(.btn) {
  display: block;
  font-family: var(--font-heading); font-weight: 600; font-size: .98rem;
  color: var(--navy); text-decoration: none;
}
.primary-nav a:not(.btn)[aria-current="page"] { color: var(--cta); }

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .primary-nav {
    display: flex; position: static;
    background: transparent; border: 0; padding: 0; box-shadow: none;
    align-items: center; gap: var(--s-3);
  }
  .primary-nav ul {
    flex-direction: row; align-items: center; gap: var(--s-3);
  }
  .primary-nav li + li { margin-top: 0; }
  .primary-nav a:not(.btn) { padding: .5rem 0; }
  .primary-nav a:not(.btn):hover { color: var(--cta); }
  .primary-nav .btn { margin-top: 0; margin-left: var(--s-2); }
}

/* ----- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-block;
  /* Proportional padding. Tight enough not to feel oversized on
     desktop, generous enough that the text never feels edge-to-edge.
     If a higher-specificity selector (e.g. ".primary-nav a") tries to
     override this, scope that selector with :not(.btn) and don't bump
     padding here with !important. */
  padding: 12px 24px;
  font-family: var(--font-heading); font-weight: 600; font-size: .98rem;
  border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, transform .15s, box-shadow .15s;
  line-height: 1.3;
  text-align: center;
  /* Never wider than the container. Long labels wrap to a second line
     on narrow screens instead of overflowing off the right edge. */
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}
.btn--primary {
  background: var(--cta); color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--cta-hover); color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn--outline {
  background: transparent; color: var(--navy); border-color: var(--navy);
}
.btn--outline:hover, .btn--outline:focus-visible { background: var(--navy); color: #fff; }
.btn--outline-light {
  background: transparent; color: #fff; border-color: #fff;
}
.btn--outline-light:hover { background: #fff; color: var(--navy); }
.btn--lg { padding: 14px 28px; font-size: 1.05rem; }

/* ----- Hero ------------------------------------------------------------- */
.hero {
  background: linear-gradient(180deg, #fff 0%, var(--light-gray) 100%);
  padding: var(--s-7) 0 var(--s-6);
}
.hero h1 { margin-bottom: var(--s-3); }
.hero__sub {
  font-size: 1.2rem;
  color: var(--text);
  max-width: 56ch;
  margin: 0 0 var(--s-4);
}
.hero__ctas { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ----- Page header (interior pages) ------------------------------------- */
.page-header {
  background: var(--light-gray);
  padding: var(--s-6) 0 var(--s-5);
}
.page-header h1 { margin-bottom: var(--s-2); }
.page-header__sub { font-size: 1.15rem; max-width: 70ch; color: var(--text); }

/* ----- Card grid -------------------------------------------------------- */
.grid { display: grid; gap: var(--s-3); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-3);
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card h3 { margin-top: 0; }
.card__step {
  display: inline-block;
  font-family: var(--font-heading); font-weight: 700;
  color: var(--cta); font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: var(--s-1);
}
.card--feature { border-top: 4px solid var(--cta); }

/* ----- Service tiers ---------------------------------------------------- */
.service {
  padding: var(--s-4);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.service + .service { margin-top: var(--s-4); }
.service__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.service__head h2 { margin: 0; }
.service__price {
  font-family: var(--font-heading); font-weight: 700;
  color: var(--cta); font-size: 1.1rem;
  white-space: nowrap;
}
.service__lede { font-weight: 600; color: var(--navy); }
.service ul { padding-left: 1.25rem; }
.service .btn { margin-top: var(--s-2); }
.service--premium {
  background: var(--navy); color: #fff;
  border-color: var(--navy-deep);
  position: relative;
  overflow: hidden;
}
.service--premium::before {
  content: 'Premium';
  position: absolute; top: 1rem; right: 1rem;
  background: var(--cta); color: #fff;
  padding: .25rem .65rem; border-radius: 999px;
  font-family: var(--font-heading); font-weight: 700;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
}
.service--premium h2, .service--premium h3 { color: #fff; }
.service--premium .service__lede { color: #fff; }

/* ----- CTA band --------------------------------------------------------- */
.cta-band {
  background: var(--navy);
  color: #fff;
  padding: var(--s-6) 0;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 60ch; margin: 0 auto var(--s-3); color: #D9DDE6; }

/* ----- Form ------------------------------------------------------------- */
.form {
  display: grid; gap: var(--s-2);
  max-width: 640px;
}
.form__field { display: grid; gap: .35rem; }
.form__field label {
  font-family: var(--font-heading); font-weight: 600;
  font-size: .92rem; color: var(--navy);
}
.form__field input,
.form__field select,
.form__field textarea {
  font: inherit; font-size: 1rem;
  padding: .75rem .9rem;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: 0;
  border-color: var(--cta);
  box-shadow: 0 0 0 3px rgba(224,165,38,.2);
}
.form__field textarea { min-height: 110px; resize: vertical; }
.form__field--req label::after { content: ' *'; color: var(--cta); }
.form__honeypot {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.form__alert {
  padding: var(--s-2);
  border-radius: var(--radius);
  margin-bottom: var(--s-3);
}
.form__alert--ok  { background: #E8F4EC; border: 1px solid #BDDDC8; color: #1F6B3A; }
.form__alert--err { background: #FCEDED; border: 1px solid #F4C4C4; color: #8A1F1F; }

/* ----- FAQ -------------------------------------------------------------- */
.faq details {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  background: #fff;
}
.faq details + details { margin-top: var(--s-1); }
.faq summary {
  cursor: pointer;
  font-family: var(--font-heading); font-weight: 600;
  color: var(--navy); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
  padding: .25rem 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; color: var(--cta); line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details[open] summary { margin-bottom: var(--s-2); }

/* ----- Footer ----------------------------------------------------------- */
.site-footer {
  background: var(--navy);
  color: #D9DDE6;
  padding: var(--s-5) 0 var(--s-3);
  font-size: .94rem;
}
.site-footer a { color: #fff; }
.site-footer__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}
.site-footer h4 {
  color: #fff; font-size: 1rem;
  margin-bottom: var(--s-1);
  font-family: var(--font-heading);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: .35rem; }
.site-footer__disclaimer {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8rem;
  color: #9DA4B2;
  line-height: 1.65;
}
.site-footer__copy {
  margin-top: var(--s-2);
  font-size: .8rem;
  color: #9DA4B2;
}

/* ----- Gallery ---------------------------------------------------------- */
.gallery {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
  margin-top: var(--s-3);
}
@media (min-width: 600px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); } }

.gallery__item { margin: 0; }
.gallery__link {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--light-gray);
  cursor: zoom-in;
  outline-offset: 4px;
  text-decoration: none;
}
.gallery__link img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.gallery__link:hover img,
.gallery__link:focus-visible img { transform: scale(1.04); }
.gallery__caption {
  margin-top: .65rem;
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ----- Lightbox --------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(8, 12, 20, .94);
  display: none;
  align-items: center; justify-content: center;
  z-index: 200;
  padding: 1rem;
}
.lightbox.is-open { display: flex; animation: nav-fade .15s ease-out; }
body.lightbox-open { overflow: hidden; }

.lightbox__figure {
  margin: 0;
  max-width: 1200px;
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  background: #000;
}
.lightbox__caption {
  margin-top: .9rem;
  color: #E2E5EB;
  text-align: center;
  font-size: .95rem;
  max-width: 70ch;
  padding: 0 1rem;
}
.lightbox__btn {
  position: absolute;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 0;
  width: 48px; height: 48px;
  border-radius: 999px;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s;
}
.lightbox__btn:hover, .lightbox__btn:focus-visible { background: rgba(255, 255, 255, .25); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .lightbox__btn { width: 40px; height: 40px; font-size: 1.5rem; }
}

/* ----- Video grid + responsive YouTube embeds --------------------------- */
/* Vertical Shorts (9:16). Flex-center with per-card max-width so three
   portrait videos sit in a centered row on desktop and stack on mobile. */
.video-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.video-card {
  margin: 0;
  width: 100%;
  max-width: 320px;
}
.video {
  aspect-ratio: 9 / 16;
  width: 100%;
  background: var(--light-gray);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.video iframe {
  width: 100%; height: 100%;
  border: 0; display: block;
}

/* Click-to-play facade. The real YouTube thumbnail (or custom poster)
   fills the tile; a flat navy tint sits on top for brand consistency,
   and the gold play button sits above that. JS replaces this whole
   button with the real iframe on click, so nothing from YouTube
   except the static thumbnail image loads before user interaction. */
.video__facade {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: var(--navy); /* fallback if the thumbnail 404s */
  border: 0; padding: 0; margin: 0;
  cursor: pointer;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.video__facade__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.video__facade::after {
  /* Flat navy tint (40%) so the video thumbnail shows through clearly
     while staying on-brand. Tunable from 35% to 45% per design call. */
  content: '';
  position: absolute; inset: 0;
  background: rgba(20, 33, 61, 0.40);
  z-index: 1;
  transition: background-color .2s ease;
}
.video__facade:hover::after,
.video__facade:focus-visible::after {
  background: rgba(20, 33, 61, 0.25); /* lift the tint a touch on hover */
}
.video__facade__play {
  position: relative;
  z-index: 2;
  width: 72px; height: 72px;
  background: var(--cta);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transition: transform .2s ease, background-color .2s ease;
}
.video__facade__play svg {
  width: 28px; height: 28px;
  fill: #fff;
  margin-left: 4px; /* visually center the triangle inside the circle */
}
.video__facade:hover .video__facade__play,
.video__facade:focus-visible .video__facade__play {
  transform: scale(1.08);
  background: var(--cta-hover);
}
.video__facade:focus-visible {
  outline: 3px solid var(--cta);
  outline-offset: 2px;
}
.video__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 1rem;
  color: var(--text-muted);
  gap: .35rem;
}
.video__placeholder strong {
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.05rem;
}
.video__placeholder code {
  background: rgba(20, 33, 61, .06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .85rem;
}
.video-card__caption {
  margin-top: .65rem;
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ----- Public: Events list --------------------------------------------- */
.event-list { display: grid; gap: var(--s-4); margin-top: var(--s-3); }
.event {
  display: grid; gap: var(--s-3);
  grid-template-columns: 1fr;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--s-3);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 720px) { .event { grid-template-columns: 280px 1fr; } }
.event__image img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.event__date { color: var(--cta); font-family: var(--font-heading); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; margin: 0 0 .4rem; }
.event__title { margin: 0 0 .4rem; }
.event__venue { color: var(--text-muted); margin: 0 0 var(--s-2); }
.event__desc { white-space: pre-wrap; }

.event-past { list-style: none; padding: 0; margin: 0; }
.event-past li { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.event-past li:last-child { border-bottom: 0; }

/* ----- Public: Blog index + single post -------------------------------- */
.blog-grid { margin-top: var(--s-3); }
.blog-card {
  margin: 0; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.blog-card__image { display: block; aspect-ratio: 16/9; overflow: hidden; }
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { padding: var(--s-3); display: flex; flex-direction: column; gap: .35rem; }
.blog-card__date { color: var(--text-muted); font-size: .85rem; margin: 0; }
.blog-card__title { margin: .15rem 0 .35rem; font-size: 1.25rem; }
.blog-card__title a { text-decoration: none; color: var(--navy); }
.blog-card__title a:hover { color: var(--cta); }
.blog-card__excerpt { margin: 0; color: var(--text); }
.blog-card__more { font-family: var(--font-heading); font-weight: 600; color: var(--cta); text-decoration: none; }

.post__meta { margin: 0 0 .75rem; color: var(--text-muted); font-size: .9rem; }
.post__meta a { color: var(--text-muted); text-decoration: none; }
.post__meta a:hover { color: var(--cta); }
.post__hero {
  width: 100%; height: auto; border-radius: var(--radius-lg);
  margin: 0 0 var(--s-3); display: block;
}
.post__body { max-width: 70ch; padding-top: var(--s-2); padding-bottom: var(--s-5); }
.post__body p { margin-bottom: var(--s-2); }
.post__body h2 { margin-top: var(--s-4); }
.post__body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: var(--s-2) 0; }

/* ----- Admin shell + components ---------------------------------------- */
body.admin { background: #F0F2F6; }
body.admin .site-header, body.admin .site-footer { display: none; } /* belt-and-braces; admin pages don't include them */

.admin-bar {
  background: var(--navy); color: #fff;
  border-bottom: 3px solid var(--cta);
  position: sticky; top: 0; z-index: 50;
}
.admin-bar__inner {
  max-width: var(--container); margin: 0 auto;
  padding: .8rem var(--s-3);
  display: flex; align-items: center; gap: var(--s-3); justify-content: space-between;
  flex-wrap: wrap;
}
.admin-bar__brand {
  color: #fff; text-decoration: none;
  font-family: var(--font-heading); font-weight: 700;
}
.admin-bar__nav { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.admin-bar__nav a {
  color: #D9DDE6; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600; font-size: .95rem;
  padding: .4rem .7rem; border-radius: 6px;
}
.admin-bar__nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.admin-bar__nav a[aria-current="page"] { color: var(--cta); }
.admin-bar__view { background: rgba(255,255,255,.08); }
.admin-bar__logout { margin: 0; display: inline-flex; }

.admin-main { padding: var(--s-4) var(--s-3) var(--s-7); }
.admin-shell { max-width: var(--container); margin: 0 auto; }
.admin-shell h1 { margin-top: var(--s-2); }

.admin-section { margin-top: var(--s-5); }
.admin-section h2 { margin-bottom: var(--s-2); }

.admin-card { display: block; text-decoration: none; color: inherit; }
.admin-card__stat { font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem; margin: .25rem 0; color: var(--navy); }
.admin-card__stat span { font-size: .85rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }

.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.admin-table th, .admin-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.admin-table th { background: #FAFBFC; font-family: var(--font-heading); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.admin-table tr:last-child td { border-bottom: 0; }

.admin-gallery { display: grid; gap: var(--s-3); grid-template-columns: 1fr; margin-top: var(--s-3); }
@media (min-width: 600px) { .admin-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .admin-gallery { grid-template-columns: repeat(3, 1fr); } }
.admin-gallery__item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.admin-gallery__item img { width: 100%; height: 200px; object-fit: cover; display: block; background: var(--light-gray); }
.admin-gallery__form { padding: 1rem; display: grid; gap: .5rem; }
.admin-gallery__form textarea { font: inherit; padding: .5rem; border: 1px solid var(--border); border-radius: 6px; }
.admin-gallery__actions { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .25rem; }

.upload-zone {
  display: flex; flex-direction: column; gap: .5rem;
  border: 2px dashed var(--border); border-radius: var(--radius-lg);
  padding: var(--s-4); cursor: pointer; text-align: center;
  background: #FAFBFC; transition: border-color .15s, background .15s;
}
.upload-zone:hover, .upload-zone.is-drag { border-color: var(--cta); background: #FFF8E8; }
.upload-zone input[type="file"] {
  /* hide; the surrounding label is the visible click target */
  position: absolute; left: -9999px; opacity: 0; width: 1px; height: 1px;
}
.upload-zone__label strong { display: block; color: var(--navy); font-family: var(--font-heading); margin-bottom: .25rem; }
.upload-zone__label .muted { display: block; font-size: .9rem; }
.upload-zone__files { font-size: .9rem; }

.btn--small { padding: 8px 14px; font-size: .85rem; }
.btn--danger { background: #8A1F1F; color: #fff; }
.btn--danger:hover { background: #6f1818; color: #fff; }

.pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-family: var(--font-heading); font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
}
.pill--ok    { background: #E8F4EC; color: #1F6B3A; }
.pill--muted { background: #ECEEF2; color: #5A5F6A; }

.form__row { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } }

/* Admin login splash */
.admin--login { background: linear-gradient(180deg, var(--navy) 0%, #0B1326 100%); min-height: 100vh; display: flex; }
.admin-login__wrap { max-width: 460px; width: 100%; margin: auto; padding: 2rem 1.5rem; }
.admin-login__card { background: #fff; padding: 2.5rem 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.admin-login__card h1 { margin: .25rem 0 .5rem; }
.admin-login__back { margin-top: var(--s-3); }

/* Footer admin link */
.site-footer__admin { display: inline-block; margin-left: 1rem; opacity: .8; }
.site-footer__admin a { color: #9DA4B2; text-decoration: none; font-size: .8rem; }
.site-footer__admin a:hover { color: #fff; }

/* ----- Utilities -------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading); font-weight: 600;
  color: var(--cta); letter-spacing: .14em; text-transform: uppercase;
  font-size: .85rem; margin-bottom: var(--s-1);
}
.lead {
  font-size: 1.15rem;
  /* Cap reading width on long paragraphs so the wide shared container
     doesn't force uncomfortable line lengths. */
  max-width: 70ch;
}
.muted { color: var(--text-muted); }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.stack > * + * { margin-top: var(--s-3); }
.placeholder {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  text-align: center;
  color: var(--text-muted);
  background: #FAFBFC;
}