/*
  Jayden'sCards4Cancer - site stylesheet.
  Plain CSS3, no framework, no preprocessor. Extracted from the approved
  v2 homepage design concept. Dark gold sections carry the emotional beats
  (hero, quote, stories); warm cream sections carry the utility surfaces
  (forms, contact, legal) so those stay calm and legible under stress.
*/

:root {
  --ink-black: #0b0a08;
  --charcoal: #17140e;
  --charcoal-2: #1f1a11;
  --gold-deep: #8a651a;
  --gold: #d4a72c;
  --gold-bright: #f2cf5f;
  /* Light sections went from a saturated tan/khaki to a clean near-white -
     the old tones read as dated. --cream is now true white; --cream-2 is a
     barely-there off-white, just enough to separate a card from the page
     behind it without bringing the beige back. */
  --cream: #ffffff;
  --cream-2: #f7f5f0;
  --paper-line: #e6e2d6;
  --ink-warm: #241f16;
  --ink-warm-soft: #5c5340;
  --focus: #f2cf5f;
  --error: #b23a34;
  --error-bg: #fbeae7;
  --success: #3f7350;
  --success-bg: #eaf3ec;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-black);
  color: var(--cream);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  background: rgba(11, 10, 8, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212, 167, 44, 0.2);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo-img { height: 40px; width: auto; display: block; }
.brand .logo-img.admin-logo { height: 34px; }
nav.primary { display: flex; align-items: center; gap: 28px; }
nav.primary ul { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; }
nav.primary a {
  font-size: 14px; font-weight: 600; color: #d9d2c1;
  padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
nav.primary a:hover, nav.primary a.active { color: var(--gold-bright); border-color: var(--gold); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.lang-toggle {
  display: flex; border: 1px solid rgba(212, 167, 44, 0.4); border-radius: 999px; overflow: hidden;
  font-size: 12px; font-weight: 700;
}
.lang-toggle a {
  display: inline-block; color: #c9c0a9; padding: 6px 12px; cursor: pointer;
}
.lang-toggle a.active { background: var(--gold); color: var(--ink-black); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 6px; font-weight: 700; font-size: 14.5px;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn-gold { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #1a1408; box-shadow: 0 6px 18px rgba(212, 167, 44, 0.28); }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(212, 167, 44, 0.38); }
.btn-outline { border-color: rgba(242, 207, 95, 0.55); color: var(--gold-bright); background: transparent; }
.btn-outline:hover { background: rgba(242, 207, 95, 0.08); }
.btn-outline.on-light { border-color: var(--gold-deep); color: var(--gold-deep); }
.menu-btn {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: 1px solid rgba(212, 167, 44, 0.4);
  width: 38px; height: 38px; border-radius: 6px; padding: 0; cursor: pointer;
}
.menu-btn-bar {
  display: block; width: 18px; height: 2px; background: var(--gold-bright); border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease;
}
.menu-btn.menu-btn-open .menu-btn-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn.menu-btn-open .menu-btn-bar:nth-child(2) { opacity: 0; }
.menu-btn.menu-btn-open .menu-btn-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- mobile nav: full-screen "rock burst" takeover ----------
   Erupts from the hamburger button via a clip-path circle reveal (JS sets
   --nav-origin-x/-y to the button's real position) rather than sliding in
   from an edge - reads as the menu bursting out of the button itself,
   which is the "coming out" feel that was asked for. Closing runs the
   same transition in reverse ("getting out"), collapsing back into the
   button rather than just disappearing. */
.nav-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  padding: 100px 32px 48px;
  background:
    radial-gradient(circle at 82% 8%, rgba(212, 167, 44, 0.22), transparent 55%),
    radial-gradient(circle at 15% 92%, rgba(212, 167, 44, 0.12), transparent 50%),
    linear-gradient(160deg, #0d0b08 0%, #050403 55%, #0b0906 100%);
  clip-path: circle(0% at var(--nav-origin-x, 90%) var(--nav-origin-y, 34px));
  transition: clip-path .55s cubic-bezier(0.65, 0, 0.35, 1);
  overflow: hidden;
}
.nav-overlay.nav-overlay-visible { display: flex; }
.nav-overlay.nav-overlay-open { clip-path: circle(150% at var(--nav-origin-x, 90%) var(--nav-origin-y, 34px)); }
body.nav-locked { overflow: hidden; }

.nav-overlay-close {
  position: absolute; top: 16px; right: 20px; z-index: 2;
  background: none; border: 1px solid rgba(212, 167, 44, 0.4); color: var(--gold-bright);
  width: 38px; height: 38px; border-radius: 6px; font-size: 22px; line-height: 1; cursor: pointer;
}

.nav-overlay-links { display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 2; }
.nav-overlay-links a {
  font-size: 26px; font-weight: 800; letter-spacing: 0.01em; color: #e9dfc4;
  padding: 12px 8px; opacity: 0; transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease, color .15s ease;
}
.nav-overlay-links a:hover, .nav-overlay-links a:active { color: var(--gold-bright); }
.nav-overlay.nav-overlay-open .nav-overlay-links a { opacity: 1; transform: translateY(0); }
.nav-overlay.nav-overlay-open .nav-overlay-links a:nth-child(1) { transition-delay: .12s; }
.nav-overlay.nav-overlay-open .nav-overlay-links a:nth-child(2) { transition-delay: .17s; }
.nav-overlay.nav-overlay-open .nav-overlay-links a:nth-child(3) { transition-delay: .22s; }
.nav-overlay.nav-overlay-open .nav-overlay-links a:nth-child(4) { transition-delay: .27s; }
.nav-overlay.nav-overlay-open .nav-overlay-links a:nth-child(5) { transition-delay: .32s; }
.nav-overlay.nav-overlay-open .nav-overlay-links a:nth-child(6) { transition-delay: .37s; }

.nav-overlay-donate {
  z-index: 2; opacity: 0; transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease, box-shadow .15s ease, background .15s ease;
}
.nav-overlay.nav-overlay-open .nav-overlay-donate { opacity: 1; transform: translateY(0); transition-delay: .42s; }

.nav-overlay-lang {
  z-index: 2; opacity: 0; transition: opacity .35s ease;
}
.nav-overlay.nav-overlay-open .nav-overlay-lang { opacity: 1; transition-delay: .47s; }

/* Rising embers, reusing the flame/ignite visual language already used
   elsewhere on the site. Pure CSS keyframes - no rAF loop - since this
   just needs to loop quietly in the background for as long as the panel
   is open. */
.nav-overlay-embers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.nav-overlay-embers span {
  position: absolute; bottom: -20px; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #fff3c9, var(--gold-bright) 55%, transparent 75%);
  opacity: 0; animation: nav-ember-rise 4.5s ease-in infinite;
}
.nav-overlay-embers span:nth-child(1) { left: 12%; animation-delay: .2s; animation-duration: 5.2s; }
.nav-overlay-embers span:nth-child(2) { left: 28%; animation-delay: 1.4s; animation-duration: 4.6s; }
.nav-overlay-embers span:nth-child(3) { left: 46%; animation-delay: .8s; animation-duration: 5.6s; width: 3px; height: 3px; }
.nav-overlay-embers span:nth-child(4) { left: 63%; animation-delay: 2.1s; animation-duration: 4.2s; }
.nav-overlay-embers span:nth-child(5) { left: 79%; animation-delay: .5s; animation-duration: 5s; width: 4px; height: 4px; }
.nav-overlay-embers span:nth-child(6) { left: 91%; animation-delay: 1.8s; animation-duration: 4.8s; width: 3px; height: 3px; }
@keyframes nav-ember-rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: .9; }
  100% { transform: translateY(-92vh) translateX(14px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-overlay { transition: none; }
  .nav-overlay-links a, .nav-overlay-donate, .nav-overlay-lang { transition: none; opacity: 1; transform: none; }
  .nav-overlay-embers { display: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; padding: 140px 28px 110px; text-align: center; overflow: hidden;
  background:
    /* Focused dark pool just behind the text column, not a wash over the
       whole photo - Jayden stays visible everywhere else in the frame. */
    radial-gradient(ellipse 780px 520px at 50% 44%, rgba(11,10,8,0.72) 0%, rgba(11,10,8,0.32) 55%, transparent 78%),
    /* Fades to solid black only at the very bottom, for a clean handoff
       into the torn-edge/quote-band section below. */
    linear-gradient(180deg, transparent 0%, transparent 68%, var(--ink-black) 100%),
    radial-gradient(ellipse 900px 480px at 50% -10%, rgba(212, 167, 44, 0.1), transparent 60%),
    url("/images/assets/hero.webp");
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center 30%;
  background-repeat: no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.65; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: repeating-linear-gradient(118deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 9px);
}
.hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
.pass-tag {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 26px; padding: 7px 16px 7px 22px;
  border: 1px solid rgba(212, 167, 44, 0.4); border-radius: 5px;
  background: rgba(212, 167, 44, 0.06);
}
.pass-tag::before {
  content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-black);
  border: 1px solid rgba(212, 167, 44, 0.5);
}
h1.wordmark {
  position: relative;
  margin: 0 0 22px;
  /* Sized to the actual string width, not just the viewport - "Jayden'sCards4Cancer"
     has no spaces (required org-name format), so it can never wrap onto a
     second line. If the font-size clamp ever ran larger than the available
     container width, this single "word" would overflow instead of breaking. */
  font-size: clamp(22px, 7.2vw, 58px);
  line-height: 1.05; font-weight: 800; letter-spacing: -0.01em;
  max-width: 100%;
  overflow-wrap: anywhere; word-break: break-word; /* last-resort safety net, not the primary fix */

  background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold-bright) 28%, #fff3c9 42%, var(--gold-bright) 56%, var(--gold) 78%, var(--gold-deep) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 8s linear infinite;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.65)) drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5));
}
@keyframes shine { to { background-position: -220% center; } }
.hero .tagline { font-size: clamp(17px, 2.4vw, 21px); color: #efe6cd; max-width: 52ch; margin: 0 auto 40px; line-height: 1.55; font-weight: 500; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }
.hero-ctas .btn { padding: 15px 30px; font-size: 15.5px; }

.torn-edge {
  position: relative; height: 20px;
  background-image: linear-gradient(135deg, transparent 50%, var(--charcoal-2) 50%), linear-gradient(45deg, var(--charcoal-2) 50%, transparent 50%);
  background-size: 24px 20px, 24px 20px; background-position: 0 0, 12px 0; background-repeat: repeat-x;
}

/* ---------- guitar-string canvas backdrop (quote band) ---------- */
.quote-band {
  position: relative; padding: 60px 28px 64px; text-align: center; overflow: hidden;
  /* Warm rosewood-toned ground instead of flat charcoal, so the fretboard
     drawn on the canvas reads as an actual piece of wood, not a UI panel. */
  background:
    radial-gradient(ellipse 900px 300px at 50% 50%, rgba(212,167,44,0.05), transparent 70%),
    linear-gradient(180deg, #1f1810, var(--charcoal-2) 45%, #1a140d);
}
.quote-band canvas.strings-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; }
/* Cursor + hover glow are the only hints this is clickable - the easter
   egg (see initQuoteEasterEgg in main.js) is meant to be found, not
   announced with a label. */
.quote-frame {
  position: relative; max-width: 660px; margin: 0 auto; border-left: 3px solid var(--gold); padding-left: 26px; text-align: left;
  cursor: pointer; transition: filter 0.3s ease;
}
.quote-frame:hover { filter: drop-shadow(0 0 18px rgba(242, 207, 95, 0.35)); }
.quote-frame.igniting { animation: quote-pulse 0.5s ease-in-out infinite alternate; cursor: default; }
@keyframes quote-pulse {
  from { filter: drop-shadow(0 0 10px rgba(255, 140, 50, 0.3)); }
  to { filter: drop-shadow(0 0 34px rgba(255, 140, 50, 0.8)); }
}
blockquote { margin: 0 0 14px; font-size: clamp(20px, 2.8vw, 27px); font-weight: 600; line-height: 1.4; color: #f4ecd8; text-wrap: balance; }
.quote-attrib { font-size: 13.5px; color: #9d9278; letter-spacing: 0.03em; }
.quote-attrib b { color: var(--gold-bright); }

/* Full-screen fade used only for the handoff into Jayden's Jam after the
   quote-band ignition sequence finishes. */
.rock-fade-overlay {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 55%, rgba(255, 140, 50, 0.5), rgba(5, 4, 3, 0.98) 70%);
  transition: opacity 0.85s ease;
}
.rock-fade-overlay.active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .quote-frame:hover { filter: none; }
  .quote-frame.igniting { animation: none; }
  .rock-fade-overlay { transition: opacity 0.2s ease; }
}

/* ---------- light utility sections ---------- */
.section-light { background: var(--cream); color: var(--ink-warm); padding: 88px 28px; }
.section-inner { max-width: 1080px; margin: 0 auto; }
.section-inner.narrow { max-width: 720px; }
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { font-size: clamp(26px, 3.6vw, 36px); margin: 10px 0 12px; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
.section-head p { color: var(--ink-warm-soft); font-size: 16px; line-height: 1.6; margin: 0; }
.section-light .eyebrow { color: var(--gold-deep); }
/* Shared styling for admin-authored rich HTML rendered raw (page.ejs,
   legal.ejs, stories/detail.ejs all inject <%- pick(doc,'body') %> through
   this one class) - the single place to fix formatting for every page that
   shows CMS body content, rather than styling it per template. */
.prose { font-size: 17px; line-height: 1.85; color: var(--ink-warm); max-width: 68ch; margin: 0 auto; }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose p { margin: 0 0 22px; }
/* The opening line carries real weight in a founder's-story page - reads
   like plain body copy otherwise, no different from the fourth paragraph. */
.prose > p:first-of-type { font-size: 19.5px; line-height: 1.7; }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 1.3em; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--gold-deep); }
.prose strong, .prose b { font-weight: 700; color: var(--ink-warm); }
.prose em, .prose i { font-style: italic; }
/* The site-wide `a { color: inherit; text-decoration: none; }` reset makes
   any link inside admin-written content otherwise invisible - explicit
   override needed here since .prose content isn't a nav/button link. */
.prose a { color: var(--gold-deep); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(212,167,44,0.4); text-underline-offset: 3px; }
.prose a:hover { color: var(--gold); text-decoration-color: currentColor; }
.prose h3, .prose h4 { margin: 28px 0 12px; color: var(--ink-warm); font-weight: 800; }
/* An inline <q> ("His exact words were...") reads as a quote worth pausing
   on, not identical weight to the sentence carrying it - color and weight
   set it apart without breaking it out of the paragraph flow. Quote marks
   forced to plain straight characters rather than left to the browser
   default, since <q> quote glyphs are locale-aware in some engines
   (Firefox switches style based on the page's lang attribute) and could
   otherwise slip curly or guillemet-style quotes onto the /es pages. */
.prose q { quotes: '"' '"'; font-style: italic; font-weight: 600; color: var(--gold-deep); }
.prose blockquote { margin: 28px 0; padding-left: 22px; border-left: 3px solid var(--gold); color: var(--ink-warm-soft); font-style: italic; font-size: 18px; }
/* A closing paragraph that's nothing but a signature (<p><em>Dad, Jay
   Zurlinden</em></p>, the pattern every founder-story page ends on) reads
   as a real sign-off instead of just another italicized line - matched by
   shape by :has(), so no template change or admin-side markup convention
   is needed for this to keep working as new pages are written. */
.prose > p:last-of-type:has(> em:only-child),
.prose > p:last-of-type:has(> i:only-child) {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--paper-line);
  text-align: right; font-size: 16px; letter-spacing: 0.01em;
}
.prose > p:last-of-type:has(> em:only-child) em,
.prose > p:last-of-type:has(> i:only-child) i {
  color: var(--gold-deep); font-style: italic;
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--cream-2); border: 1px solid var(--paper-line); border-radius: 10px; padding: 30px 26px; position: relative; }
.step .num { font-size: 13px; font-weight: 800; color: #fff; background: var(--gold-deep); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.step h3 { margin: 0 0 8px; font-size: 18px; }
.step p { margin: 0; color: var(--ink-warm-soft); font-size: 14.5px; line-height: 1.6; }

/* ---------- dark sections ---------- */
.section-dark { background: var(--ink-black); color: var(--cream); padding: 88px 28px; }
.section-dark .section-head p { color: #b9ae94; }
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; } }
.story-card {
  position: relative; border-radius: 12px; overflow: hidden;
  background: linear-gradient(160deg, #241f14, #141109);
  border: 1px solid rgba(212, 167, 44, 0.22);
  aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px; transition: transform .2s ease, border-color .2s ease;
}
.story-card:hover { transform: translateY(-4px); border-color: rgba(212, 167, 44, 0.55); }
/* Dark scrim stacked with the existing decorative gold tint/stripe pattern -
   without it, a real uploaded photo could be bright or busy behind the
   title/excerpt with nothing guaranteeing they'd stay readable (confirmed
   directly: a real cover photo made the overlaid text nearly illegible).
   Applies uniformly whether a card has a real image or the plain dark
   gradient background, which keeps every card's text equally legible
   instead of two different treatments to maintain. z-index 1 sits above
   the cover image (0) and below the corner decoration/text (2). */
.story-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(4, 3, 1, 0.96) 0%, rgba(4, 3, 1, 0.88) 45%, rgba(4, 3, 1, 0.55) 70%, rgba(4, 3, 1, 0.1) 90%, transparent 100%),
    linear-gradient(200deg, rgba(212, 167, 44, 0.18), transparent 45%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 6px);
}
.story-card::after { content: ""; position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; border: 2px solid rgba(212, 167, 44, 0.55); border-radius: 6px; }
.story-card img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.story-card .placeholder-icon { position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -58%); font-size: 32px; opacity: 0.35; }
.story-card .tag { position: relative; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 8px; }
.story-card h3 { position: relative; z-index: 2; margin: 0 0 6px; font-size: 16.5px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.story-card p { position: relative; z-index: 2; margin: 0; font-size: 13px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.stories-foot { text-align: center; margin-top: 40px; }
.stories-foot a, .link-gold { font-weight: 700; color: var(--gold-bright); font-size: 14.5px; border-bottom: 1px solid rgba(242, 207, 95, 0.4); padding-bottom: 2px; }

.empty-state { text-align: center; color: #b9ae94; font-size: 14.5px; padding: 40px 20px; border: 1px dashed rgba(212,167,44,0.3); border-radius: 10px; }
.section-light .empty-state { color: var(--ink-warm-soft); border-color: var(--paper-line); }

.center { text-align: center; }

/* ---------- cards we need: real cards, white background, matches the rest
   of the site's light sections. Same component on the homepage teaser and
   the full page - the icon/name/numbers carry it, no dark foil chrome. ---------- */
.need-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; margin-bottom: 36px; }
/* Homepage teaser: capped at 4 columns instead of auto-fill, so it never
   reads as a full catalog - just a preview, same card, fewer per row. */
.need-grid-compact { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .need-grid-compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .need-grid-compact { grid-template-columns: 1fr; } }
.need-card { background: #fff; border: 1px solid var(--paper-line); border-radius: 14px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.need-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(35, 26, 8, 0.1); }
.need-card .need-image {
  position: relative;
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 42px; overflow: hidden;
  background: linear-gradient(155deg, var(--gold-bright), var(--gold-deep)); color: #241a06;
}
.need-card .need-image img { width: 100%; height: 100%; object-fit: cover; }
.need-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--ink-black); color: var(--gold-bright);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em;
  padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(212, 167, 44, 0.5);
}
.need-card .need-body { padding: 18px 20px; }
.need-card .need-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.need-card h3 { margin: 0; font-size: 16px; }
.need-priority { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; background: var(--cream-2); color: var(--ink-warm-soft); }
.need-priority.high { background: rgba(212, 167, 44, 0.16); color: var(--gold-deep); }
.need-card .need-brand { font-size: 12.5px; color: var(--ink-warm-soft); margin-bottom: 8px; }
.need-card p { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-warm-soft); line-height: 1.55; }

.need-stats { display: flex; border-top: 1px solid var(--paper-line); padding-top: 14px; margin-top: 4px; }
.need-stat { flex: 1; text-align: center; border-right: 1px solid var(--paper-line); }
.need-stat:last-child { border-right: none; }
.need-stat b { display: block; font-size: 17px; font-weight: 800; color: var(--gold-deep); }
.need-stat span { font-size: 10.5px; color: var(--ink-warm-soft); text-transform: uppercase; letter-spacing: 0.03em; }

/* ---------- story media carousel: full width of the article column (same
   .section-inner.narrow width as the text above/below it), not the small
   story-card teaser tile it used to reuse. Scroll-snap does the heavy
   lifting so it works by touch/trackpad with zero JS; the buttons/dots are
   a JS-driven enhancement on top. Handles both images and video. ---------- */
.story-carousel { margin: 0 0 40px; }
.carousel-viewport { position: relative; border-radius: 14px; overflow: hidden; background: var(--ink-black); }
.carousel-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
/* scroll-behavior:smooth deliberately left off the track - combined with
   scroll-snap-type it silently breaks programmatic scrollLeft assignment
   (confirmed directly: with both set, button/dot navigation never moves
   the track at all). Native touch/trackpad swiping still feels smooth on
   its own via the browser's scroll physics; button/dot clicks below
   animate manually with requestAnimationFrame instead, which isn't
   affected by this interaction. */
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { flex: 0 0 100%; scroll-snap-align: start; }
.carousel-slide img, .carousel-slide video { width: 100%; height: 460px; object-fit: cover; display: block; background: #000; }
.carousel-slide .carousel-caption { margin: 0; padding: 12px 16px; font-size: 13px; color: #d9d2c1; background: rgba(11,10,8,0.55); }
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(11,10,8,0.55); color: #fff; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.carousel-btn:hover { background: rgba(11,10,8,0.82); }
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--paper-line); cursor: pointer; padding: 0; }
.carousel-dot.active { background: var(--gold-deep); width: 22px; border-radius: 4px; transition: width .2s ease; }
@media (max-width: 640px) {
  .carousel-slide img, .carousel-slide video { height: 260px; }
  .carousel-btn { width: 36px; height: 36px; font-size: 18px; }
}

/* ---------- projects/programs: same card language as need-card, since
   both are just a photo, a title, and a short description. ---------- */
.project-card { background: #fff; border: 1px solid var(--paper-line); border-radius: 14px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.project-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(35, 26, 8, 0.1); }
.project-card .project-image {
  height: 160px; display: flex; align-items: center; justify-content: center; font-size: 42px; overflow: hidden;
  background: linear-gradient(155deg, var(--gold-bright), var(--gold-deep)); color: #241a06;
}
.project-card .project-image img { width: 100%; height: 100%; object-fit: cover; }
.project-card .project-body { padding: 18px 20px; }
.project-card h3 { margin: 0 0 8px; font-size: 16px; }
.project-card p { margin: 0; font-size: 13.5px; color: var(--ink-warm-soft); line-height: 1.55; }

/* ---------- partners: homepage teaser (kept small on purpose) ---------- */
.sponsor-row { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.sponsor-pill { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--paper-line); border-radius: 10px; padding: 14px 20px; min-width: 180px; }
.sponsor-pill .logo-dot { width: 34px; height: 34px; border-radius: 7px; flex: none; background: linear-gradient(155deg, var(--gold-bright), var(--gold-deep)); display: flex; align-items: center; justify-content: center; color: #241a06; font-weight: 800; font-size: 13px; overflow: hidden; }
.sponsor-pill .logo-dot img { width: 100%; height: 100%; object-fit: cover; }
.sponsor-pill.wanted { background: transparent; border: 1.5px dashed var(--paper-line); color: var(--ink-warm-soft); font-size: 13px; font-weight: 600; justify-content: center; }
.partner-note { max-width: 640px; margin: 0 auto; text-align: center; color: var(--ink-warm-soft); font-size: 14px; line-height: 1.6; }

/* Homepage teaser, logo-only variant - used once a partner has a real logo
   uploaded, since the logo alone is more recognizable than a logo + name
   pill and this is what was asked for: big enough to actually read. */
.sponsor-logo-only {
  display: block; background: #fff; border: 1px solid var(--paper-line); border-radius: 14px;
  width: 220px; height: 140px; padding: 8px; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sponsor-logo-only:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(35, 26, 8, 0.08); }
.sponsor-logo-only img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- partners: full page - real cards (logo, name, description, link) ---------- */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: stretch; gap: 24px; margin-bottom: 32px; }
.partner-card {
  background: #fff; border: 1px solid var(--paper-line); border-radius: 16px; padding: 28px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.partner-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(35, 26, 8, 0.1); }
.partner-card .partner-logo {
  width: 88px; height: 88px; border-radius: 18px; margin-bottom: 18px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; flex: none;
  background: linear-gradient(155deg, var(--gold-bright), var(--gold-deep)); color: #241a06; font-weight: 800; font-size: 26px;
}
.partner-card .partner-logo img { width: 100%; height: 100%; object-fit: cover; }
.partner-card .partner-category { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; }
.partner-card h3 { margin: 0 0 10px; font-size: 18px; }
/* Fixed 200px scrollable box rather than clamping/truncating - the full
   description stays reachable (just scroll), and every card comes out the
   same height regardless of description length since this box no longer
   grows with content. Left-aligned since the rest of the card is centered
   but a paragraph of body text reads better ragged-left. white-space:
   pre-line turns blank lines typed in the admin textarea into real visual
   paragraph breaks - previously a multi-paragraph description rendered as
   one dense, unbroken block. */
.partner-card p {
  width: 100%; text-align: left; font-size: 14px; color: var(--ink-warm-soft); line-height: 1.6;
  margin: 0 0 18px; min-height: 200px; max-height: 200px; overflow-y: auto; padding-right: 6px;
  white-space: pre-line;
}
/* Structured contact details - address/phone/email get their own labeled
   rows instead of being folded into the description paragraph as prose
   (confirmed directly: a real partner's address ended up crammed into the
   description, reading as a wall of text and making that one card much
   taller than the others). */
.partner-contact { width: 100%; text-align: left; margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.partner-contact-row { display: flex; gap: 6px; font-size: 13px; color: var(--ink-warm-soft); line-height: 1.5; }
.partner-contact-row .label { flex: none; font-weight: 700; color: var(--ink-warm); }
.partner-contact-row a { color: var(--gold-deep); font-weight: 600; word-break: break-word; }
.partner-card a.partner-link { font-weight: 700; font-size: 13.5px; color: var(--gold-deep); border-bottom: 1px solid var(--gold-deep); padding-bottom: 2px; }
.partner-card.wanted { border-style: dashed; color: var(--ink-warm-soft); justify-content: center; min-height: 220px; }

/* ---------- donate cta band ---------- */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(120deg, #231a08, #3a2809 45%, #231a08); padding: 80px 28px; text-align: center; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; opacity: 0.6; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
}
.cta-inner { position: relative; max-width: 560px; margin: 0 auto; }
.cta-band h2 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 14px; font-weight: 800; color: var(--gold-bright); text-wrap: balance; }
.cta-band p { color: #e9dfc4; margin: 0 0 30px; font-size: 15.5px; }
.cta-band .btn-gold { padding: 16px 34px; font-size: 16px; }

/* ---------- footer ---------- */
footer.site { background: var(--ink-black); border-top: 1px solid rgba(212, 167, 44, 0.15); padding: 56px 28px 28px; }
.footer-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 36px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a { color: #c9c0a9; font-size: 14px; }
.footer-grid a:hover { color: var(--gold-bright); }
.footer-brand p { color: #9d9278; font-size: 13.5px; line-height: 1.6; max-width: 32ch; margin: 14px 0 0; }
.footer-brand .site-credit { font-size: 12px; color: #7a715c; margin-top: 8px; }
.footer-brand .site-credit a, .footer-bottom a { color: var(--gold); }
.footer-brand .site-credit a:hover, .footer-bottom a:hover { color: var(--gold-bright); }
.footer-bottom { max-width: 1080px; margin: 0 auto; padding-top: 24px; border-top: 1px solid rgba(212, 167, 44, 0.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: #7a715c; }
.footer-bottom .legal-links { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 900px) {
  nav.primary ul { display: none; }
  .menu-btn { display: block; }
  .header-actions .btn { display: none; }
}

/* ---------- forms (Request Cards, Contact) ---------- */
.form-page { background: var(--cream); padding: 72px 28px 96px; }
.form-shell { max-width: 720px; margin: 0 auto; }
.form-shell .section-head { text-align: left; margin-left: 0; }
fieldset { border: 1px solid var(--paper-line); border-radius: 10px; padding: 24px; margin: 0 0 24px; }
legend { font-weight: 800; font-size: 15px; padding: 0 8px; color: var(--ink-warm); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; color: var(--ink-warm); }
.field .hint { font-size: 12.5px; color: var(--ink-warm-soft); margin-top: 5px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="password"],
.field select,
.field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--paper-line); border-radius: 8px;
  font-size: 15px; font-family: inherit; background: #fff; color: var(--ink-warm);
}
.field textarea { min-height: 110px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-narrow input { max-width: 160px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }
.radio-group { display: flex; gap: 18px; flex-wrap: wrap; }
.radio-option { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.checkbox-field { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.checkbox-field input { margin-top: 4px; }
.checkbox-field label { font-size: 13.5px; line-height: 1.5; color: var(--ink-warm); }

.need-checkbox-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.need-checkbox {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--paper-line); border-radius: 999px; padding: 9px 16px 9px 12px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-warm); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.need-checkbox:has(input:checked) { border-color: var(--gold-deep); background: rgba(212, 167, 44, 0.08); color: var(--gold-deep); }
.need-checkbox input { accent-color: var(--gold-deep); width: 16px; height: 16px; margin: 0; }
.legal-scroll { max-height: 160px; overflow-y: auto; border: 1px solid var(--paper-line); border-radius: 8px; padding: 14px; font-size: 13px; color: var(--ink-warm-soft); background: #fff; margin-bottom: 14px; }
.alert { border-radius: 8px; padding: 14px 18px; font-size: 14px; margin-bottom: 24px; }
.alert-error { background: var(--error-bg); color: var(--error); border: 1px solid rgba(178,58,52,0.25); }
.alert-success { background: var(--success-bg); color: var(--success); border: 1px solid rgba(63,115,80,0.25); }
.alert ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- request-cards: modular form-section layout ----------
   A wider variant of .form-shell (contact/donate-cards keep the plain
   720px single column - those forms are short enough not to need this),
   used only where a form is long enough to actually benefit from being
   broken into distinct visual modules plus a reassurance sidebar. Built
   generically so any future long-form public form can reuse it. */
.request-shell { max-width: 1100px; }
.request-shell .section-head { max-width: 640px; }
.request-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .request-grid { grid-template-columns: 1fr; } }
.request-main { display: flex; flex-direction: column; gap: 20px; }
.request-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) { .request-side { position: static; } }

.form-section { background: #fff; border: 1px solid var(--paper-line); border-radius: 12px; padding: 28px; }
.form-section-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.form-step {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #1a1408;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14.5px;
}
.form-section-head h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--ink-warm); }
.form-section-head p { margin: 0; font-size: 13.5px; color: var(--ink-warm-soft); line-height: 1.5; }
.form-section .field:last-child, .form-section .field-row:last-child { margin-bottom: 0; }

.radio-card-group { display: flex; flex-direction: column; gap: 10px; }
.radio-card {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--paper-line); border-radius: 10px;
  padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--ink-warm); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.radio-card:has(input:checked) { border-color: var(--gold-deep); background: rgba(212, 167, 44, 0.08); }
.radio-card input { accent-color: var(--gold-deep); width: 16px; height: 16px; margin: 0; }

.form-section-submit { text-align: center; }
.form-section-submit .btn { width: 100%; padding: 15px; font-size: 15.5px; }
.form-submit-note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-warm-soft); line-height: 1.5; }

.side-card { background: #fff; border: 1px solid var(--paper-line); border-radius: 12px; padding: 22px; }
.side-card h4 {
  margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gold-deep);
}
.side-card p { margin: 0; font-size: 13.5px; color: var(--ink-warm-soft); line-height: 1.6; }
.side-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.side-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; color: var(--ink-warm-soft); line-height: 1.5; }
.side-steps .side-step-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(212, 167, 44, 0.14); color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11.5px;
}
.side-card .side-contact { margin-top: 6px; font-weight: 700; color: var(--gold-deep); }

/* Honeypot field - positioned off-screen rather than display:none, since
   some spam bots specifically skip fields hidden that way. */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- human-verify flame slider ---------- */
.human-verify { margin: 0 0 24px; }
.human-verify-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--ink-warm); }
.hv-track {
  position: relative; height: 54px; border-radius: 27px; overflow: hidden; cursor: pointer; touch-action: none;
  background: linear-gradient(180deg, #241a10, #140d07);
  border: 1px solid var(--paper-line);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hv-track:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hv-track.verified { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 167, 44, 0.2); }
.hv-fill {
  position: absolute; inset: 0; width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 55%, #ff8a3d);
}
.hv-flames { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hv-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #e9dfc4; letter-spacing: 0.02em; pointer-events: none;
  transition: opacity .15s ease;
}
.hv-track.verified .hv-hint { opacity: 0; }
.hv-thumb {
  position: absolute; top: 3px; left: 3px; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d9, var(--gold-bright) 55%, var(--gold-deep));
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* ---------- 404 ---------- */
.error-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 60px 28px; }
.error-page h1 { font-size: clamp(32px, 6vw, 56px); color: var(--gold-bright); margin: 0 0 12px; }
.error-page p { color: #b9ae94; margin: 0 0 24px; }

/* ---------- admin ---------- */
body.admin { background: var(--cream-2); color: var(--ink-warm); }
.admin-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.admin-sidebar {
  background: var(--ink-black); color: var(--cream); padding: 24px 18px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-sidebar .brand { margin-bottom: 28px; }
.admin-sidebar nav a { display: block; padding: 10px 12px; border-radius: 6px; font-size: 14px; color: #d9d2c1; margin-bottom: 4px; }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { background: rgba(212,167,44,0.14); color: var(--gold-bright); }
.admin-nav-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #7a715c; margin: 18px 0 6px; padding: 0 12px;
}
.admin-nav-label:first-of-type { margin-top: 10px; }
.admin-main { padding: 32px 40px; min-width: 0; } /* min-width:0 lets the table scroll container below shrink inside the grid track instead of forcing the column wider */

@media (max-width: 820px) {
  .admin-shell { grid-template-columns: 1fr; } /* sidebar stacks above content instead of squeezing beside it */
  .admin-sidebar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0; padding: 14px 16px; position: static; height: auto; overflow-y: visible; }
  .admin-sidebar .brand { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
  .admin-sidebar .brand .logo-img { height: 28px; }
  .admin-sidebar nav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; width: 100%; }
  .admin-sidebar nav a { padding: 7px 9px; margin-bottom: 0; font-size: 12.5px; }
  .admin-nav-label { width: 100%; margin: 8px 0 2px; padding: 0; }
  .admin-nav-label:first-of-type { margin-top: 8px; }
  .admin-sidebar nav form { margin-top: 8px !important; margin-left: 0; width: 100%; }
  .admin-sidebar nav form .btn { width: 100%; padding: 7px 12px; font-size: 12.5px; }
  .admin-main { padding: 24px 18px; }
}
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.admin-topbar h1 { margin: 0; font-size: 24px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat-card { background: #fff; border: 1px solid var(--paper-line); border-radius: 10px; padding: 20px; }
.stat-card b { display: block; font-size: 28px; color: var(--gold-deep); }
.stat-card span { font-size: 13px; color: var(--ink-warm-soft); }
.admin-table-wrap { background: #fff; border: 1px solid var(--paper-line); border-radius: 10px; overflow-x: auto; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.admin-table th, table.admin-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--paper-line); }
table.admin-table th { background: var(--cream-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-warm-soft); }
table.admin-table tr:last-child td { border-bottom: none; }
table.admin-table tbody tr { transition: background .12s ease; }
table.admin-table tbody tr:hover { background: var(--cream-2); }
table.admin-table td a { font-weight: 700; color: var(--ink-warm); }
table.admin-table td a:hover { color: var(--gold-deep); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--paper-line);
  background: #fff; color: var(--ink-warm-soft); cursor: pointer; padding: 0;
}
.icon-btn:hover { background: var(--cream-2); color: var(--gold-deep); border-color: var(--gold-deep); }

/* Details modal - generic overlay + panel, used first by the Audit Log
   "eye" button but written plainly enough to reuse anywhere a record needs
   a quick read-only popup instead of a full detail page. */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(36, 31, 22, 0.55);
  align-items: center; justify-content: center; padding: 24px; z-index: 1000;
}
.modal-overlay.open { display: flex; }
.modal-panel {
  background: #fff; border-radius: 14px; max-width: 480px; width: 100%;
  max-height: 85vh; overflow-y: auto; padding: 30px 32px; position: relative;
  box-shadow: 0 24px 60px rgba(36, 31, 22, 0.32);
}
.modal-close { position: absolute; top: 20px; right: 20px; }
.modal-header { display: flex; align-items: center; gap: 12px; padding-right: 40px; margin-bottom: 6px; }
.modal-header h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--ink-warm); }
.modal-byline { margin: 0 0 16px; font-size: 12.5px; color: var(--ink-warm-soft); }
.modal-summary {
  margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--paper-line);
  font-size: 15px; color: var(--ink-warm); line-height: 1.55;
}
.modal-divider {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-warm-soft); margin: 18px 0 10px;
}
.modal-divider:first-of-type { margin-top: 0; }
.modal-detail-grid { display: grid; grid-template-columns: 100px 1fr; gap: 9px 16px; font-size: 13.5px; }
.modal-detail-grid dt { color: var(--ink-warm-soft); font-weight: 700; }
.modal-detail-grid dd { margin: 0; color: var(--ink-warm); word-break: break-word; }
.modal-detail-grid dd.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; background: var(--cream-2); padding: 3px 9px; border-radius: 6px; display: inline-block;
}
.modal-ua-box {
  margin-top: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.6; color: var(--ink-warm-soft);
  background: var(--cream-2); border-radius: 8px; padding: 12px 14px; word-break: break-word;
}

/* Base pill shape - every variant below just swaps the two colors. */
.status-pill {
  display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; padding: 4px 11px;
  border-radius: 999px; background: var(--cream-2); color: var(--ink-warm-soft);
}

/* One color language for every status/type value used anywhere in admin -
   card donations, card requests, contact messages, and the inventory
   ledger. Anything not listed here falls back to the neutral gray base
   style above (closed/inactive states read fine as neutral). */
.status-pill.new, .status-pill.unread, .status-pill.declined { background: var(--error-bg); color: var(--error); }
.status-pill.reviewing, .status-pill.accepted, .status-pill.shipping_info_sent,
.status-pill.approved, .status-pill.in_progress, .status-pill.request_fulfilled {
  background: rgba(212, 167, 44, 0.16); color: var(--gold-deep);
}
.status-pill.fulfilled, .status-pill.received, .status-pill.read,
.status-pill.donation_received, .status-pill.manual_donation {
  background: var(--success-bg); color: var(--success);
}
.status-pill.correction { background: var(--cream-2); color: var(--ink-warm-soft); }
.status-pill-lg { font-size: 12.5px; padding: 5px 14px; }

/* Audit log action verbs - same color language, different vocabulary. */
.status-pill.create, .status-pill.publish { background: var(--success-bg); color: var(--success); }
.status-pill.delete, .status-pill.unpublish { background: var(--error-bg); color: var(--error); }
.status-pill.update { background: rgba(212, 167, 44, 0.16); color: var(--gold-deep); }

/* Detail-page layout: read-only info in labeled cards on the left, the
   actionable management form pinned in a sidebar on the right. Used by
   Card Requests and Card Donations detail screens. */
.detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-main { display: flex; flex-direction: column; gap: 20px; }
.detail-side { position: sticky; top: 20px; }
.detail-card { background: #fff; border: 1px solid var(--paper-line); border-radius: 10px; padding: 24px; }
.detail-card + .detail-card { margin-top: 20px; }
.detail-card h3 {
  margin: 0 0 16px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-warm-soft); border-bottom: 1px solid var(--paper-line); padding-bottom: 12px;
}
.detail-card h3:not(:first-child) { margin-top: 24px; }
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.kv-full { grid-column: 1 / -1; }
.kv-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-warm-soft); margin-bottom: 4px; }
.kv-value { font-size: 14.5px; color: var(--ink-warm); font-weight: 600; line-height: 1.5; }
.category-chip {
  display: inline-block; background: rgba(212, 167, 44, 0.12); color: var(--gold-deep);
  border: 1px solid rgba(212, 167, 44, 0.3); padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; margin: 0 6px 6px 0;
}

/* Styled native file inputs (Projects image, Sponsors logo, Inventory
   image, Story media) - the browser default is an unstyled gray button
   with no visual language of its own. ::file-selector-button is the
   standards way to restyle just the button part, keeping native picker
   behavior and accessibility intact. */
input[type="file"] {
  display: block; font-size: 13px; color: var(--ink-warm-soft);
  border: 1px solid var(--paper-line); border-radius: 8px; padding: 8px 10px; background: #fff;
}
input[type="file"]::file-selector-button {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #1a1408;
  border: none; border-radius: 6px; padding: 8px 14px; font-weight: 700; font-size: 13px;
  margin-right: 12px; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { opacity: 0.9; }
.file-preview-new { display: block; margin-top: 10px; width: 140px; height: 100px; object-fit: cover; border-radius: 6px; border: 1px solid var(--paper-line); }
.upload-status { margin: 10px 0 0; font-size: 13px; color: var(--gold-deep); font-weight: 600; }

/* Filter tabs used on Card Donations / Card Requests list screens. */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.admin-tabs a {
  display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: 13px;
  font-weight: 600; color: var(--ink-warm-soft); background: #fff; border: 1px solid var(--paper-line);
}
.admin-tabs a:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.admin-tabs a.active { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }

/* Inventory edit screen: read-only on-hand readout, side-by-side manual
   entry forms, and the delta coloring in the Recent Activity table. */
.stock-readout { font-size: 22px; font-weight: 800; color: var(--ink-warm); padding: 10px 0; }
.admin-manual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .admin-manual-grid { grid-template-columns: 1fr; } }
.delta-up { color: var(--success); font-weight: 700; }
.delta-down { color: var(--error); font-weight: 700; }
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ink-black); padding: 20px; }
.login-card { background: var(--charcoal); border: 1px solid rgba(212,167,44,0.25); border-radius: 12px; padding: 40px; max-width: 380px; width: 100%; }
.login-card h1 { color: var(--gold-bright); font-size: 22px; margin: 0 0 6px; }
.login-card p.hint { color: #b9ae94; font-size: 13.5px; margin: 0 0 24px; }
.login-card .field label { color: #d9d2c1; }
.login-card .field input { background: var(--ink-black); border-color: rgba(212,167,44,0.3); color: var(--cream); }