/* ============================================================
   SPRoUT — Market Stall theme
   Source of truth: Direction C from Claude Design (May 2026)
   ============================================================ */

/* ----------------------------------------------------------
   RESET & BASE
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

/* ----------------------------------------------------------
   DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
  --paper:    #efe9d8;
  --paper-2:  #e3dac0;
  --ink:      #1a1a14;
  --ink-soft: #4a4738;
  --leaf:     #2e4a1f;
  --leaf-d:   #1f3214;
  --ochre:    #ffba00;
  --aubergine:#4a1f3a;
  --tomato:   #c4422a;
  --cream:    #fcf8ec;
  --logo-red: #1f3214;

  --slab: "DM Serif Display", Georgia, serif;
  --grot: "Inter", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ----------------------------------------------------------
   BODY
   ---------------------------------------------------------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--grot);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--slab);
  font-weight: 400;
  color: var(--leaf-d);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

/* ----------------------------------------------------------
   LAYOUT SHELL
   ---------------------------------------------------------- */
.layout { display: flex; flex-direction: column; min-height: 100vh; }
.layout__main { flex: 1 1 auto; }

/* ----------------------------------------------------------
   SITE HEADER
   ---------------------------------------------------------- */
.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  background: var(--leaf-d);
  color: var(--cream);
  border-bottom: 4px solid var(--ochre);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--grot);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.005em;
  text-decoration: none;
  padding: 18px 24px;
  background: var(--logo-red);
  color: var(--cream);
  line-height: 1;
}

.site-logo:has(img) {
  background: none;
  padding: 12px 24px;
}

.site-logo__img {
  max-height: 38px;
  width: auto;
  display: block;
}

.logo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tomato);
  display: inline-block;
  margin-left: 2px;
  transform: translateY(-3px);
}

/* ----------------------------------------------------------
   NAVIGATION
   ---------------------------------------------------------- */
.site-nav {
  display: flex;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--grot);
}

.site-nav a {
  text-decoration: none;
  color: var(--cream);
  padding: 8px 14px;
  border-radius: 4px;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.site-nav a:hover { opacity: 1; }
.site-nav a.is-active {
  background: rgba(252, 248, 236, 0.12);
  opacity: 1;
}

/* Publii menu partial outputs a <ul> — style it to match */
.site-nav ul { list-style: none; display: flex; gap: 4px; }
.site-nav ul li a {
  text-decoration: none;
  color: var(--cream);
  padding: 8px 14px;
  border-radius: 4px;
  opacity: 0.85;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: block;
  transition: opacity 0.15s;
}
.site-nav ul li a:hover { opacity: 1; }
.site-nav ul li.active a {
  background: rgba(252, 248, 236, 0.12);
  opacity: 1;
}

/* ----------------------------------------------------------
   HERO — two-column: dark green left panel + image right
   ---------------------------------------------------------- */
.c-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  border-bottom: 4px solid var(--ochre);
  overflow: hidden;
}

/* Left panel — dark green background, holds the text block */
.c-hero-overlay {
  background: var(--leaf-d);
  display: flex;
  align-items: center;
  padding: 56px 48px;
}

/* Right panel — image fills the column */
.c-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.c-hero-block {
  background: transparent;
  padding: 0;
  max-width: 540px;
  position: relative;
  border-left: 6px solid var(--ochre);
  padding-left: 28px;
}

.c-hero-block .c-tape {
  color: var(--leaf-d);
}

.c-hero-block h1 {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  margin-bottom: 14px;
  color: var(--cream);
}

.c-hero-block p {
  color: rgba(252, 248, 236, 0.8);
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.6;
}

.c-hero-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Ghost button needs light border on dark background */
.c-hero-block .c-btn.c-btn-ghost {
  color: var(--cream);
  border-color: var(--cream);
}
.c-hero-block .c-btn.c-btn-ghost:hover {
  background: var(--cream);
  color: var(--leaf-d);
}

/* Tape label */
.c-tape {
  display: inline-block;
  background: color-mix(in oklab, var(--ochre) 70%, var(--cream));
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  transform: rotate(-1.5deg);
  font-weight: 600;
  border-left: 1px dashed rgba(26, 26, 20, 0.3);
  border-right: 1px dashed rgba(26, 26, 20, 0.3);
  margin-bottom: 16px;
}

.c-tape.is-leaf { background: color-mix(in oklab, var(--leaf) 70%, var(--cream)); color: var(--cream); }
.c-tape.is-tomato { background: color-mix(in oklab, var(--tomato) 70%, var(--cream)); color: var(--cream); }

/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--tomato);
  color: var(--cream);
  border: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  font-family: var(--grot);
  transition: background 0.15s, transform 0.15s;
}
.c-btn:hover { background: var(--aubergine); transform: translateY(-1px); }
.c-btn.c-btn-leaf { background: var(--leaf-d); }
.c-btn.c-btn-ghost {
  background: transparent;
  color: var(--leaf-d);
  border: 2px solid var(--leaf-d);
}
.c-btn.c-btn-ghost:hover { background: var(--leaf-d); color: var(--cream); }

/* ----------------------------------------------------------
   SHELL (max-width container)
   ---------------------------------------------------------- */
.c-shell {
  padding: 48px 40px 64px;
  max-width: 1240px;
  margin: 0 auto;
}
/* On pages where the materials band is the first element, remove the top
   padding and hide the blank <p> Publii injects before HTML blocks */
.c-shell:has(.sp-materials) {
  padding-top: 0;
}
.c-shell:has(.sp-materials) > p {
  display: none;
}

/* ----------------------------------------------------------
   SECTIONS
   ---------------------------------------------------------- */
.c-section {
  padding: 48px 0;
  border-top: 2px solid rgba(26, 26, 20, 0.18);
}
.c-section:first-child { border-top: none; padding-top: 24px; }

.c-section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.c-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tomato);
  font-weight: 600;
}

.c-section-head h2 {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
}

.c-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ----------------------------------------------------------
   CARDS (pillars)
   ---------------------------------------------------------- */
.c-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 0 0 24px;
}

.c-card {
  background: var(--cream);
  padding: 24px;
  border: 1px solid rgba(26, 26, 20, 0.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.c-num {
  font-family: var(--slab);
  font-weight: 800;
  font-size: 56px;
  color: var(--ochre);
  line-height: 0.9;
}

.c-card h3 {
  font-size: 26px;
  line-height: 1.15;
}

.c-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
}

/* ----------------------------------------------------------
   TIMELINE
   ---------------------------------------------------------- */
.c-timeline { display: flex; flex-direction: column; }

.c-timeline-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-top: 2px dashed rgba(26, 26, 20, 0.18);
}
.c-timeline-row:last-child {
  border-bottom: 2px dashed rgba(26, 26, 20, 0.18);
}

.c-when {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 4px;
}
.c-timeline-row.is-now .c-when { color: var(--tomato); font-weight: 700; }

.c-timeline-row h3 { font-size: 26px; margin: 0 0 4px; }
.c-timeline-row p { margin: 0; color: var(--ink-soft); font-size: 16px; }

.c-status {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 10px;
  margin-bottom: 6px;
  background: var(--paper-2);
  color: var(--ink-soft);
}
.c-timeline-row.is-done .c-status { background: var(--leaf); color: var(--cream); }
.c-timeline-row.is-now .c-status { background: var(--tomato); color: var(--cream); }

/* ----------------------------------------------------------
   NEWSLETTER
   ---------------------------------------------------------- */
.c-news {
  background: var(--leaf-d);
  color: var(--cream);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin: 48px 0 0;
  border-top: 4px solid var(--ochre);
}

.c-news h2 {
  color: var(--cream);
  font-size: clamp(36px, 4vw, 52px);
}

.c-news p {
  color: rgba(252, 248, 236, 0.75);
  margin: 8px 0 0;
}

.c-news-form { display: flex; flex-direction: column; gap: 10px; }

.c-news-form .c-row { display: flex; gap: 0; }

.c-news-form input {
  flex: 1;
  background: var(--cream);
  border: none;
  color: var(--ink);
  padding: 16px 18px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.c-news-form button {
  background: var(--ochre);
  color: #000;
  border: none;
  padding: 16px 26px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--grot);
  cursor: pointer;
}

.c-news small {
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.7;
  letter-spacing: 0.06em;
  color: var(--cream);
}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */
.c-ftr {
  background: var(--ink);
  color: var(--cream);
  padding: 56px 40px 32px;
}

.c-ftr-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}

.c-ftr h4 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ochre);
}

.c-ftr a {
  display: block;
  text-decoration: none;
  font-size: 14px;
  padding: 4px 0;
  color: var(--cream);
  opacity: 0.85;
  transition: opacity 0.15s;
}
.c-ftr a:hover { opacity: 1; }

.c-ftr-wordmark {
  display: inline-block;
  background: var(--logo-red);
  color: var(--cream);
  padding: 8px 14px;
  font-family: var(--grot);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

.c-ftr-logo-wrap:has(img) {
  display: inline-block;
  margin-bottom: 8px;
}

.c-ftr-logo {
  max-height: 32px;
  width: auto;
  display: block;
  filter: brightness(0) invert(0.95); /* Turns the dark logo into a clean cream-white color to match the footer text */
}

.c-ftr-tag {
  font-family: var(--slab);
  font-size: 18px;
  font-weight: 600;
  margin-top: 12px;
  max-width: 28ch;
  color: var(--ochre);
}

.c-ftr-bottom {
  max-width: 1240px;
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(252, 248, 236, 0.15);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.6;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------
   INNER PAGE — tape label above first heading
   ---------------------------------------------------------- */
.c-shell--page {
  padding-top: 36px;
}

.c-tape--page {
  transform: rotate(-1deg);
  margin-bottom: 20px;
  display: inline-block;
}

/* ----------------------------------------------------------
   INNER PAGES
   ---------------------------------------------------------- */
.page-header {
  background: var(--leaf-d);
  border-bottom: 4px solid var(--ochre);
  padding: 56px 40px 40px;
}

.page-header h1 {
  max-width: 1240px;
  margin: 0 auto;
  font-size: 56px;
  line-height: 1.0;
  color: var(--cream);
}

.page-content {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 40px 64px;
}

/* Prose content on inner pages */
.c-prose {
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
.c-prose p { margin: 0 0 1.2em; }
.c-prose h2 { font-size: 30px; margin: 1.4em 0 0.5em; }
.c-prose h3 { font-size: 22px; margin: 1.2em 0 0.4em; }
.c-prose ul { padding-left: 18px; margin: 0 0 1.2em; }
.c-prose li { margin: 0.3em 0; }
.c-prose a { color: var(--tomato); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* ----------------------------------------------------------
   POST / RECIPE
   ---------------------------------------------------------- */
.post-header {
  background: var(--leaf-d);
  border-bottom: 4px solid var(--ochre);
  padding: 56px 40px 40px;
}
.post-header h1 {
  max-width: 800px;
  margin: 0 auto;
  font-size: 44px;
  line-height: 1.1;
  color: var(--cream);
}
.post-meta {
  max-width: 800px;
  margin: 12px auto 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(252, 248, 236, 0.65);
}

.post-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 40px 64px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
.post-content p { margin: 0 0 1.2em; }
.post-content h2 { font-size: 28px; margin: 1.4em 0 0.5em; }
.post-content h3 { font-size: 22px; margin: 1.2em 0 0.4em; }
.post-content ul, .post-content ol { padding-left: 22px; margin: 0 0 1.2em; }
.post-content li { margin: 0.3em 0; }
.post-content a { color: var(--tomato); text-decoration: underline; font-weight: 600; }

/* ----------------------------------------------------------
   UTILITY
   ---------------------------------------------------------- */
.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;
}

/* ----------------------------------------------------------
   INNER PAGE — RICH LAYOUT
   ---------------------------------------------------------- */

/* Page header with tape label */
.page-header {
  background: var(--leaf-d);
  border-bottom: 4px solid var(--ochre);
  padding: 56px 40px 48px;
}

.page-header .c-shell-hdr {
  max-width: 1240px;
  margin: 0 auto;
}

.page-header .c-tape {
  margin-bottom: 20px;
  display: inline-block;
}

.page-header h1 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.0;
  color: var(--cream);
  max-width: 14ch;
}

.page-header .c-lede {
  color: rgba(252,248,236,0.75);
  margin-top: 18px;
  max-width: 60ch;
}

/* Page body */
.page-body {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Two-column split: prose + callout */
.c-split-2 {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}

/* Pull quote */
.c-pullquote {
  font-family: var(--slab);
  font-size: 32px;
  line-height: 1.15;
  color: var(--leaf-d);
  font-weight: 600;
  padding: 24px 28px;
  border-top: 3px solid var(--tomato);
  border-bottom: 3px solid var(--tomato);
}

.c-pullquote cite {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 14px;
  color: var(--ink-soft);
  font-weight: 400;
}

/* Stat cards (project page) */
.c-stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 40px 0 0;
}

/* Inline link style */
.c-link {
  color: var(--tomato);
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: auto;
}
.c-link:hover { text-decoration: underline; }

/* Page prose — wider than post prose */
.page-prose {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
.page-prose p { margin: 0 0 1.2em; }
.page-prose h2 { font-size: 30px; margin: 1.4em 0 0.5em; }
.page-prose h3 { font-size: 22px; margin: 1.2em 0 0.4em; }
.page-prose ul { padding-left: 22px; margin: 0 0 1.2em; }
.page-prose li { margin: 0.3em 0; }
.page-prose strong { font-weight: 600; }
.page-prose a { color: var(--tomato); text-decoration: underline; font-weight: 600; }

/* Grid helpers */
.c-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.c-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }


/* ----------------------------------------------------------
   PUBLII EDITOR OUTPUT — override any injected classes
   ---------------------------------------------------------- */

/* Publii injects Tailwind-ish classes from its editor — neutralise them */
.page-prose p,
.page-prose [class*="font-claude"],
.page-prose [class*="leading-"],
.page-prose [class*="break-words"],
.page-prose [class*="whitespace-"] {
  font-family: var(--grot);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 1.1em;
  white-space: normal;
}

.page-prose strong {
  font-weight: 700;
  color: var(--leaf-d);
  display: block;
  font-family: var(--slab);
  font-size: 20px;
  margin: 1.4em 0 0.3em;
}

/* First strong in page — acts as intro heading, don't add top margin */
.page-prose p:first-of-type + p strong,
.page-prose p:first-child strong {
  margin-top: 0;
}


/* Page header tape — no rotation inside dark header */
.page-header .c-tape {
  transform: none;
  background: color-mix(in oklab, var(--ochre) 70%, var(--cream));
  color: var(--leaf-d);
  margin-bottom: 20px;
}

/* Page header — remove the duplicate h1 rule (keep this one canonical) */
.page-header h1 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.0;
  color: var(--cream);
}


/* ----------------------------------------------------------
   TILE GRID — tag listing pages (Recipes, News & Events)
   ---------------------------------------------------------- */
.c-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.c-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.c-tile-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  background: var(--paper-2);
}

.c-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-tile-img .c-tape {
  position: absolute;
  top: 12px;
  left: 12px;
  transform: none;
  margin-bottom: 0;
}

.c-tile-img--empty {
  background: var(--paper-2);
  min-height: 180px;
}

.c-tile-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tomato);
}

.c-tile h3 {
  font-size: 20px;
  line-height: 1.2;
  color: var(--leaf-d);
}

.c-tile p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.c-tile:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* Pagination */
.c-pagination {
  display: flex;
  gap: 12px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid rgba(26,26,20,0.12);
}

/* ----------------------------------------------------------
   HOMEPAGE CUSTOM SECTIONS — added 2026-05-17
   ---------------------------------------------------------- */

/* Timeline band: yellow section */
.sp-timeline-band {
  background: #ffba00;
  margin: 0 -40px;
  padding: 56px 40px;
  border-top: 4px solid var(--leaf-d);
  border-bottom: 4px solid var(--leaf-d);
}
.sp-timeline-band .c-section-head h2 { color: #000; }
.sp-timeline-band .c-timeline-row { border-top-color: rgba(0,0,0,0.2); }
.sp-timeline-band .c-timeline-row:last-child { border-bottom-color: rgba(0,0,0,0.2); }
.sp-timeline-band .c-when { color: rgba(0,0,0,0.6); }
.sp-timeline-band .c-timeline-row.is-now .c-when { color: #000; font-weight: 700; }
.sp-timeline-band .c-timeline-row h3 { color: #000; }
.sp-timeline-band .c-timeline-row p { color: var(--ink); }
.sp-timeline-band .c-status { background: rgba(26,26,20,0.12); color: var(--ink-soft); }
.sp-timeline-band .c-timeline-row.is-done .c-status { background: var(--leaf); color: var(--cream); }
.sp-timeline-band .c-timeline-row.is-now .c-status { background: var(--tomato); color: var(--cream); }

/* Founder note: cream card with ochre left border */
.sp-founder-note {
  background: var(--cream);
  border-left: 6px solid var(--ochre);
  padding: 36px 36px 36px 32px;
}
.sp-founder-note h2 { font-size: clamp(26px, 3vw, 38px); }

/* Subtle tint section */
.sp-tint {
  background: var(--paper-2);
  margin: 0 -40px;
  padding: 48px 40px;
}

/* Yellow band (card / pillars sections) */
.sp-yellow-band {
  background: var(--ochre);
  margin: 0 -40px;
  padding: 56px 40px;
  border-top: 4px solid var(--leaf-d);
  border-bottom: 4px solid var(--leaf-d);
}
.sp-yellow-band .c-section-head h2 { color: #000; }

/* Dark green band */
.sp-dark-band {
  background: var(--leaf-d);
  margin: 0 -40px;
  padding: 56px 40px;
  border-top: 4px solid var(--ochre);
  border-bottom: 4px solid var(--ochre);
}
.sp-dark-band .c-section-head h2 { color: var(--cream); }
.sp-dark-band .page-prose { color: rgba(252,248,236,0.85); }
.sp-dark-band .page-prose p { color: rgba(252,248,236,0.85); }
.sp-dark-band .page-prose a { color: var(--ochre); }


/* ==========================================================================
   SPRoUT — Market Stall theme · v5 ADDITIONS
   --------------------------------------------------------------------------
   Appended 17 May 2026.

   v5 introduces:
     - .sp-display          one BIG type moment per page
     - .sp-num-head         numbered editorial head (replaces inline c-tape inside cards)
     - .sp-trio             3-col editorial layout (replaces .c-pillars when no card chrome wanted)
     - .sp-materials        full-bleed 3-up image strip (with mono captions / photo placeholders)
     - .sp-image            single photo / placeholder tile with caption
     - .sp-manifesto        full-bleed forest-green manifesto block (mid-page)
     - .sp-stamp            single-line yellow stamp moment
     - .sp-timeline-refined modifier on .c-timeline (solid hairlines, big date, NOW halo)
     - .sp-founders         photo + quote founders block
     - .sp-letter           framed letter ("A note from Rajiv") refresh

   The existing .sp-yellow-band / .sp-dark-band / .sp-tint utilities stay in
   the codebase but are no longer used in v5 — safe to leave them for now,
   delete once v5 is live.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DISPLAY MOMENT
   One per page. Used for the hero replacement headline and for one big
   passage per inner page (charter intro / manifesto pullquote).
   -------------------------------------------------------------------------- */
.sp-display {
  font-family: var(--slab);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-size: clamp(44px, 7vw, 96px);
  color: var(--leaf-d);
  max-width: 18ch;
  text-wrap: balance;
}
.sp-display em {
  font-style: italic;
  color: var(--tomato);
}
.sp-display--on-dark { color: var(--cream); }
.sp-display--on-dark em { color: var(--ochre); }


/* --------------------------------------------------------------------------
   2. NUMBERED EDITORIAL HEAD
   Replaces inline .c-tape inside cards. Used as the heading for each item in
   a trio or list. Two parts: a mono eyebrow ("01 / STRUCTURE") and the H3
   sits directly below it.
   -------------------------------------------------------------------------- */
.sp-num-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  border-top: 2px solid var(--leaf-d);
  padding-top: 12px;
}
.sp-num-head .sp-n {
  font-family: var(--slab);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--tomato);
}
.sp-num-head .sp-lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}


/* --------------------------------------------------------------------------
   3. EDITORIAL TRIO (no card chrome)
   Replaces .c-pillars for sections where the card chrome was getting in the
   way. Same 3-column rhythm, but the columns sit directly on .c-section
   background — no border, no padding, no fill.
   -------------------------------------------------------------------------- */
.sp-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.sp-trio > * {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-trio h3 {
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.1;
  margin: 0;
}
.sp-trio p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.sp-trio .c-link {
  margin-top: 8px;
  align-self: flex-start;
}
@media (max-width: 820px) {
  .sp-trio { grid-template-columns: 1fr; gap: 32px; }
}


/* --------------------------------------------------------------------------
   4. MATERIALS BAND — full-bleed 3-up images with captions
   The headline change: one full-width photographic moment per page. Until
   real images arrive, .sp-image-tile renders a labelled placeholder.
   Replace each placeholder with <img src="..."> when photography lands.
   -------------------------------------------------------------------------- */
.sp-materials {
  margin: 0 -40px 64px;
  padding: 56px 40px 64px;
  background: var(--paper);
}
.sp-materials__head {
  max-width: 1240px;
  margin: 0 auto 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-materials__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tomato);
}
.sp-materials__title {
  font-family: var(--slab);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--leaf-d);
}
.sp-materials__grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.sp-materials__captions {
  max-width: 1240px;
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.sp-materials__cap {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 0 6px;
}
.sp-materials__cap strong {
  display: block;
  color: var(--leaf-d);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 700;
}
@media (max-width: 820px) {
  .sp-materials__grid,
  .sp-materials__captions { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   5. IMAGE TILE (placeholder or real photo)
   -------------------------------------------------------------------------- */
.sp-image-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--leaf-d);
  color: var(--cream);
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
/* Publii wraps uploaded images in <figure class="post__image"> so we
   target both direct img and the figure wrapper */
.sp-image-tile figure {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
}
.sp-image-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}
.sp-image-tile:has(img) > .sp-image-tile__lbl { display: none; }

.sp-image-tile--earth   { background: linear-gradient(135deg, #5e421f 0%, #2a1b08 100%); }
.sp-image-tile--leaf    { background: linear-gradient(135deg, #4d5e35 0%, #1f3214 100%); }
.sp-image-tile--tomato  { background: linear-gradient(135deg, #8c3520 0%, #3a1408 100%); }
.sp-image-tile--beet    { background: linear-gradient(135deg, #6e2a44 0%, #2a0e1a 100%); }
.sp-image-tile--ochre   { background: linear-gradient(135deg, #b0822a 0%, #5e421f 100%); }

.sp-image-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05) 0 6px,
    transparent 6px 12px
  );
  pointer-events: none;
}
.sp-image-tile:has(img)::after { display: none; }

.sp-image-tile__lbl {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(252, 248, 236, 0.8);
}
.sp-image-tile__lbl strong {
  display: block;
  font-size: 11px;
  color: var(--cream);
  margin-bottom: 4px;
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   6. MANIFESTO — full-bleed forest green, mid-page
   -------------------------------------------------------------------------- */
.sp-manifesto {
  margin: 64px -40px;
  padding: 80px 40px;
  background: var(--leaf-d);
  color: var(--cream);
  border-top: 4px solid var(--ochre);
  border-bottom: 4px solid var(--ochre);
}
.sp-manifesto__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: start;
}
.sp-manifesto__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: 18px;
}
.sp-manifesto__title {
  font-family: var(--slab);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.018em;
  color: var(--cream);
  margin: 0;
  text-wrap: balance;
}
.sp-manifesto__title em {
  font-style: italic;
  color: var(--ochre);
}
.sp-manifesto__body {
  font-family: var(--grot);
  font-size: 17px;
  line-height: 1.65;
  color: rgba(252, 248, 236, 0.82);
}
.sp-manifesto__body p { margin: 0 0 1em; }
.sp-manifesto__body p:last-child { margin-bottom: 0; }
.sp-manifesto__body strong { color: var(--cream); font-weight: 600; }
.sp-manifesto__body a { color: var(--ochre); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 820px) {
  .sp-manifesto__inner { grid-template-columns: 1fr; gap: 32px; }
  .sp-manifesto { padding: 56px 24px; margin: 40px -40px; }
}


/* --------------------------------------------------------------------------
   7. STAMP — single-line yellow moment
   -------------------------------------------------------------------------- */
.sp-stamp {
  margin: 48px -40px;
  padding: 56px 40px;
  background: var(--ochre);
  color: var(--leaf-d);
}
.sp-stamp__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: 32px;
  flex-wrap: wrap;
}
.sp-stamp__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--leaf-d);
  flex: 0 0 auto;
  padding-top: 14px;
}
.sp-stamp__line {
  font-family: var(--slab);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--leaf-d);
  flex: 1 1 auto;
  text-wrap: balance;
}
.sp-stamp__line em {
  font-style: italic;
  color: var(--tomato);
}


/* --------------------------------------------------------------------------
   8. REFINED TIMELINE
   -------------------------------------------------------------------------- */
/* The refined timeline provides its own hairline — suppress the c-section
   and original c-timeline-row borders so only one line shows */
.c-section:has(.sp-timeline-refined) { border-top: none; }
.c-section--no-top { border-top: none !important; }
.c-timeline.sp-timeline-refined .c-timeline-row { border-top: none !important; }
.c-timeline.sp-timeline-refined {
  border-top: 1px solid rgba(26,26,20,0.4);
}
.c-timeline.sp-timeline-refined .c-timeline-row {
  grid-template-columns: 18px 132px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-top: none;
  border-bottom: 1px solid rgba(26,26,20,0.18);
  position: relative;
  align-items: start;
}
.c-timeline.sp-timeline-refined .c-timeline-row:last-child { border-bottom: 1px solid rgba(26,26,20,0.4); }

.c-timeline.sp-timeline-refined .c-timeline-row::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(26,26,20,0.25);
  margin-top: 14px;
}
.c-timeline.sp-timeline-refined .c-timeline-row.is-done::before {
  background: var(--leaf);
}
.c-timeline.sp-timeline-refined .c-timeline-row.is-now::before {
  background: var(--tomato);
  box-shadow: 0 0 0 5px rgba(196, 66, 42, 0.22);
}

.c-timeline.sp-timeline-refined .c-when {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--leaf-d);
  line-height: 1.05;
  padding-top: 4px;
}
.c-timeline.sp-timeline-refined .c-timeline-row.is-now .c-when {
  color: var(--tomato);
}
.c-timeline.sp-timeline-refined .c-when small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
  margin-top: 6px;
}

.c-timeline.sp-timeline-refined .c-status { margin-bottom: 8px; }

.c-timeline.sp-timeline-refined .c-timeline-row h3 {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  margin: 0 0 6px;
}
.c-timeline.sp-timeline-refined .c-timeline-row p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

@media (max-width: 720px) {
  .c-timeline.sp-timeline-refined .c-timeline-row {
    grid-template-columns: 18px 1fr;
    gap: 14px;
  }
  .c-timeline.sp-timeline-refined .c-when {
    grid-column: 2;
    font-size: 16px;
    padding-top: 0;
  }
  .c-timeline.sp-timeline-refined .c-timeline-row > div:not(.c-when) {
    grid-column: 2;
  }
}


/* --------------------------------------------------------------------------
   9. FAQ list (variant of refined timeline for the project page Q&A)
   -------------------------------------------------------------------------- */
.c-timeline.sp-faq .c-timeline-row {
  grid-template-columns: 18px 220px 1fr;
}
.c-timeline.sp-faq .c-timeline-row::before {
  background: var(--leaf-d);
  box-shadow: none;
}
.c-timeline.sp-faq .c-when {
  font-family: var(--slab);
  font-size: 22px;
  line-height: 1.15;
  color: var(--leaf-d);
  text-transform: none;
  letter-spacing: -0.005em;
  padding-top: 0;
}
.c-timeline.sp-faq .c-when small { display: none; }
@media (max-width: 720px) {
  .c-timeline.sp-faq .c-timeline-row { grid-template-columns: 18px 1fr; }
  .c-timeline.sp-faq .c-when { grid-column: 2; font-size: 20px; }
  .c-timeline.sp-faq .c-timeline-row > div:not(.c-when) { grid-column: 2; }
}


/* --------------------------------------------------------------------------
   10. FOUNDERS
   -------------------------------------------------------------------------- */
.sp-founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.sp-founder { display: flex; flex-direction: column; gap: 0; }

.sp-founder__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--leaf-d);
  margin-bottom: 22px;
}
.sp-founder__photo > figure {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.sp-founder__photo > img,
.sp-founder__photo figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}
.sp-founder__photo--earth { background: linear-gradient(135deg, #5e421f 0%, #2a1b08 100%); }
.sp-founder__photo--ochre { background: linear-gradient(135deg, #8c6420 0%, #3e2c0a 100%); }
.sp-founder__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05) 0 6px,
    transparent 6px 12px
  );
}
.sp-founder__photo:has(img)::after { display: none; }

.sp-founder__photo-lbl {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(252, 248, 236, 0.8);
  z-index: 1;
}

.sp-founder__name {
  font-family: var(--slab);
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--leaf-d);
  margin: 0 0 4px;
}
.sp-founder__role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.sp-founder__quote {
  font-family: var(--slab);
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--leaf-d);
  margin: 0 0 14px;
  max-width: 26ch;
}
.sp-founder__bio {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 14px;
  max-width: 42ch;
}
.sp-founder__mail {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tomato);
  letter-spacing: 0.04em;
}

@media (max-width: 820px) {
  .sp-founders { grid-template-columns: 1fr; gap: 56px; }
}


/* --------------------------------------------------------------------------
   11. LETTER and DISPATCH
   -------------------------------------------------------------------------- */
.sp-letter {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  padding: 24px 0 0;
  border-top: 1px solid rgba(26,26,20,0.4);
}
.sp-letter__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tomato);
  padding-top: 8px;
}
.sp-letter__meta strong {
  display: block;
  font-family: var(--slab);
  font-style: normal;
  font-size: 22px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--leaf-d);
  margin-bottom: 6px;
  font-weight: 400;
}
.sp-letter__body {
  font-family: var(--grot);
  font-size: 17px;
  line-height: 1.7;
  max-width: 56ch;
  color: var(--ink);
}
.sp-letter__body p { margin: 0 0 1em; }
.sp-letter__sig {
  font-family: var(--slab);
  font-style: italic;
  font-size: 24px;
  color: var(--leaf-d);
  margin-top: 28px;
}
@media (max-width: 820px) {
  .sp-letter { grid-template-columns: 1fr; gap: 16px; }
}

.sp-dispatch {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: start;
  padding: 32px 0 0;
  border-top: 1px solid rgba(26,26,20,0.4);
}
.sp-dispatch__figure { margin: 0; }
.sp-dispatch__figure img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.sp-dispatch__figure figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 14px;
}
.sp-dispatch__figure figcaption strong {
  color: var(--tomato);
  font-weight: 700;
  margin-right: 8px;
}
.sp-dispatch__body {
  font-family: var(--grot);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 52ch;
}
.sp-dispatch__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tomato);
  margin-bottom: 22px;
}
.sp-dispatch__meta strong {
  display: block;
  font-family: var(--slab);
  font-style: normal;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--leaf-d);
  margin-bottom: 6px;
}
.sp-dispatch__body p { margin: 0 0 1em; }
.sp-dispatch__sig {
  font-family: var(--slab);
  font-style: italic;
  font-size: 24px;
  color: var(--leaf-d);
  margin-top: 24px;
}
@media (max-width: 820px) {
  .sp-dispatch { grid-template-columns: 1fr; gap: 24px; }
}


/* --------------------------------------------------------------------------
   12. HERO REFINEMENTS
   -------------------------------------------------------------------------- */
.c-hero.sp-hero-full {
  display: block;
  position: relative;
  min-height: 640px;
  overflow: hidden;
}
.c-hero.sp-hero-full > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
}
.c-hero.sp-hero-full .c-hero-overlay {
  position: relative;
  z-index: 1;
  min-height: 640px;
  padding: 88px 0 72px;
  background:
    linear-gradient(
      180deg,
      rgba(20, 30, 12, 0.00) 30%,
      rgba(20, 30, 12, 0.35) 100%
    ),
    linear-gradient(
      90deg,
      rgba(20, 30, 12, 0.92) 0%,
      rgba(20, 30, 12, 0.80) 35%,
      rgba(20, 30, 12, 0.30) 65%,
      rgba(20, 30, 12, 0.00) 100%
    );
  display: flex;
  align-items: flex-end;
}
.c-hero-inner {
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
}
.c-hero.sp-hero-full .c-hero-block {
  max-width: 640px;
}

.c-hero.sp-hero-full .sp-hero-pin {
  position: absolute;
  bottom: 16px;
  right: 20px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(252, 248, 236, 0.78);
  background: rgba(20, 30, 12, 0.55);
  padding: 6px 10px;
}

@media (max-width: 820px) {
  .c-hero.sp-hero-full,
  .c-hero.sp-hero-full .c-hero-overlay { min-height: 560px; }
  .c-hero.sp-hero-full .c-hero-overlay {
    padding: 72px 0 48px;
    background: linear-gradient(
      180deg,
      rgba(20, 30, 12, 0.45) 0%,
      rgba(20, 30, 12, 0.86) 60%,
      rgba(20, 30, 12, 0.92) 100%
    );
    align-items: flex-end;
  }
  .c-hero-inner {
    padding: 0 24px;
  }
}

.sp-welcome-box {
  border-left: 4px solid var(--tomato);
  padding: 4px 0 4px 24px;
  margin: 12px 0 40px 0;
  max-width: 76ch;
}
.sp-welcome-box p {
  font-family: var(--slab);
  font-size: clamp(18px, 2.3vw, 24px);
  line-height: 1.45;
  color: var(--leaf-d);
  margin: 0;
}

.c-hero-block.sp-hero-v5 {
  border-left: 0;
  padding-left: 0;
}
.c-hero-block.sp-hero-v5 .sp-hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: 22px;
}
.c-hero-block.sp-hero-v5 h1 {
  font-family: var(--slab);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 14ch;
  margin: 0 0 22px;
}
.c-hero-block.sp-hero-v5 h1 em {
  font-style: italic;
  color: var(--ochre);
}
.c-hero-block.sp-hero-v5 p {
  font-family: var(--slab);
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  color: rgba(252, 248, 236, 0.78);
  max-width: 32ch;
  margin: 0 0 32px;
}
.c-hero-block.sp-hero-v5 .c-btn {
  background: var(--tomato);
  color: var(--cream);
  padding: 16px 22px;
  font-size: 13px;
}
.c-hero-block.sp-hero-v5 .c-btn .arr {
  font-family: var(--mono);
  font-weight: 400;
}


/* --------------------------------------------------------------------------
   13. RATION THE INLINE TAPE
   -------------------------------------------------------------------------- */
.c-card .c-tape { margin-bottom: 14px; }
.sp-trio .c-tape { margin-bottom: 14px; }


/* --------------------------------------------------------------------------
   14. SECTION-HEAD TYPE BUMP
   -------------------------------------------------------------------------- */
.c-section-head h2 {
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.c-section-head h2 em {
  font-style: italic;
  color: var(--tomato);
}
.c-lede {
  font-size: 19px;
  line-height: 1.55;
  font-family: var(--slab);
  font-style: italic;
  color: var(--ink-soft);
  max-width: 56ch;
}


/* --------------------------------------------------------------------------
   15. UTILITIES
   -------------------------------------------------------------------------- */
.sp-mono-cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sp-rule {
  height: 2px;
  width: 32px;
  background: var(--leaf-d);
  margin: 12px 0 16px;
  border: 0;
}


/* ==========================================================================
   END v5 ADDITIONS
   ========================================================================== */


/* ==========================================================================
   INTERACTIVE PRODUCT SEARCH & RECIPES v6 ADDITIONS (Claude Design)
   ========================================================================== */

/* --- A. WHAT WE SELL PORTAL --- */
.what-we-sell-search-banner {
  background: var(--ochre);
  color: var(--ink);
  padding: 32px 36px;
  border-radius: 4px;
  border: 1px solid rgba(26,26,20,0.15);
  margin: 32px 0 48px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.search-banner-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--tomato);
  margin-bottom: 6px;
}
.search-banner-desc {
  font-family: var(--slab);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  margin-bottom: 20px;
}
.search-banner-input-wrapper {
  position: relative;
  max-width: 580px;
}
.search-banner-input-wrapper input {
  width: 100%;
  padding: 14px 48px 14px 18px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid rgba(26,26,20,0.25);
  border-radius: 4px;
  font-family: var(--grot);
  font-size: 16px;
  outline: none;
}
.search-banner-input-wrapper input:focus {
  border-color: var(--leaf-d);
  box-shadow: 0 0 0 3px rgba(31,50,20,0.12);
}
.search-banner-submit-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: var(--leaf-d);
  color: var(--cream);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.search-banner-submit-btn:hover {
  background: var(--leaf);
}

.what-we-sell-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.what-we-sell-card {
  background: var(--cream);
  border: 1px solid rgba(26,26,20,0.12);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s ease;
}
.what-we-sell-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}
.card-img-container {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
}
.card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.card-img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
  z-index: 1;
}
.card-img-placeholder span {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255,255,255,0.95);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.tint-leaf { background: repeating-linear-gradient(135deg, #375925 0 14px, #263f1a 14px 28px); }
.tint-ochre { background: repeating-linear-gradient(135deg, #ffc51a 0 14px, #e6a700 14px 28px); }
.tint-tomato { background: repeating-linear-gradient(135deg, #d34b33 0 14px, #b23a23 14px 28px); }
.tint-aubergine { background: repeating-linear-gradient(135deg, #572545 0 14px, #3d1a30 14px 28px); }
.tint-earth { background: repeating-linear-gradient(135deg, #594c25 0 14px, #3f361a 14px 28px); }
.tint-leaf-d { background: repeating-linear-gradient(135deg, #263e19 0 14px, #17260f 14px 28px); }

.what-we-sell-card .card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.what-we-sell-card h3 {
  font-size: 22px;
  color: var(--leaf-d);
  margin-bottom: 8px;
}
.what-we-sell-card p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 20px;
  flex-grow: 1;
}
.card-action-btn {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tomato);
  text-decoration: none;
  letter-spacing: 0.06em;
}
.what-we-sell-card:hover .card-action-btn {
  text-decoration: underline;
}

/* --- B. PRICES SEARCH TABLE --- */
.prices-table-container {
  background: var(--cream);
  border: 1px solid rgba(26,26,20,0.15);
  border-radius: 4px;
  padding: 28px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.prices-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.entries-select-wrapper {
  font-size: 13px;
  color: var(--ink-soft);
}
.entries-select-wrapper select {
  background: var(--paper);
  border: 1px solid rgba(26,26,20,0.15);
  padding: 4px 8px;
  border-radius: 3px;
  outline: none;
  font-family: var(--mono);
  font-weight: 700;
  margin-right: 6px;
}
.search-input-wrapper input {
  background: var(--paper);
  border: 1px solid rgba(26,26,20,0.15);
  padding: 6px 12px;
  border-radius: 3px;
  outline: none;
  font-family: var(--grot);
  font-size: 14px;
  width: 220px;
}
.search-input-wrapper input:focus {
  border-color: var(--leaf-d);
  background: var(--cream);
}
.prices-responsive-table {
  width: 100%;
  overflow-x: auto;
  border-bottom: 4px solid var(--ochre);
}
.prices-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.prices-data-table th {
  background: var(--leaf-d);
  color: var(--cream);
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  user-select: none;
  cursor: pointer;
  border-bottom: 3px solid var(--ochre);
}
.prices-data-table th:hover {
  background: var(--leaf);
}
.sort-indicator {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  color: var(--ochre);
}
.prices-data-table td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(26,26,20,0.08);
  font-size: 15px;
  color: var(--ink);
}
.prices-data-table tr {
  transition: background 0.15s;
}
.prices-data-table tr:hover {
  background: var(--paper-2);
}
.prices-data-table tr:nth-child(even) {
  background: rgba(239,233,216,0.25);
}
.prices-data-table tr:nth-child(even):hover {
  background: var(--paper-2);
}
.prices-data-table td.price-col {
  font-weight: 700;
  color: var(--leaf-d);
  background: color-mix(in oklab, var(--ochre) 15%, var(--cream));
  border-left: 1px dashed rgba(26,26,20,0.08);
}
.prices-highlight {
  background-color: var(--ochre);
  color: var(--ink);
  font-weight: bold;
  padding: 0 2px;
  border-radius: 2px;
}
.prices-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.prices-counter {
  font-size: 12px;
  color: var(--ink-soft);
}
.prices-pagination {
  display: flex;
  gap: 6px;
}
.pagination-btn {
  padding: 6px 12px;
  border: 1px solid rgba(26,26,20,0.15);
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.pagination-btn:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.pagination-btn.active {
  background: var(--leaf-d);
  color: var(--cream);
  border-color: var(--leaf-d);
}
.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- C. RECIPE WORKSPACE --- */
.recipe-card {
  background: var(--cream);
  border: 1px solid rgba(26,26,20,0.12);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s ease;
}
.recipe-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
.recipe-card .card-image-wrapper {
  aspect-ratio: 4/3;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.recipe-card .card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.recipe-card:hover .card-img {
  transform: scale(1.02);
}
.recipe-card .card-tags-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
}
.recipe-card .tag-pill {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--tomato);
  color: var(--cream);
  padding: 3px 8px;
  border-radius: 2px;
}
.recipe-card .card-time-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(252,248,236,0.92);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(26,26,20,0.1);
}
.recipe-card .card-info {
  padding: 16px;
}
.recipe-card .card-title {
  font-size: 18px;
  line-height: 1.25;
}
.recipe-card:hover .card-title a {
  color: var(--tomato);
}

/* Ingredients checkboxes */
.ing-checkbox-circle {
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink-soft);
  border-radius: 3px;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  margin-top: 3px;
  transition: all 0.15s ease;
}
.ingredient-row:hover .ing-checkbox-circle {
  border-color: var(--tomato);
}
.ing-checkbox-circle.checked {
  background-color: var(--tomato);
  border-color: var(--tomato);
}
.ing-checkbox-circle.checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--cream);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Interactive switcher handle */
.switcher-toggle-btn {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background-color: var(--paper-2);
  border: 1px solid rgba(26,26,20,0.15);
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
}
.switcher-toggle-handle {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--cream);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.switcher-toggle-btn.active {
  background-color: var(--tomato);
  border-color: var(--tomato);
}
.switcher-toggle-btn.active .switcher-toggle-handle {
  transform: translateX(18px);
}

/* Method row checklist */
.method-step-row {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid rgba(26,26,20,0.1);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s;
}
.method-step-row:hover .step-text {
  color: var(--leaf-d);
}
.step-number {
  font-size: 38px;
  font-weight: 700;
  color: var(--tomato);
  line-height: 1;
  font-family: var(--mono);
  transition: color 0.22s ease;
}
.step-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  padding-top: 2px;
  transition: color 0.22s ease;
}
.completed-step .step-number {
  color: var(--paper-2);
}
.completed-step .step-text {
  color: var(--ink-soft);
  text-decoration: line-through;
  opacity: 0.65;
}

/* --- D. KITCHEN MODE WAKE LOCK ACTIVATED --- */
body.kitchen-mode {
  background-color: #faf7ef !important; /* Brighter paper display */
}
body.kitchen-mode .site-header {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
body.kitchen-mode .breadcrumb-container,
body.kitchen-mode .recipe-intro-meta-section,
body.kitchen-mode .recipe-navigation-section,
body.kitchen-mode .related-recipes-section,
body.kitchen-mode .site-footer {
  opacity: 0.25;
  filter: grayscale(0.5);
}
body.kitchen-mode .method-step-row .step-text {
  font-size: 20px;
  line-height: 1.65;
  color: #000;
}
body.kitchen-mode .method-step-row .step-number {
  font-size: 44px;
}

/* --- E. RESPONSIVE QUERIES --- */
@media (max-width: 980px) {
  .what-we-sell-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .recipe-workspace-section {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
@media (max-width: 640px) {
  .what-we-sell-grid {
    grid-template-columns: 1fr;
  }
  .c-split-2 {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .prices-controls-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .search-input-wrapper {
    width: 100%;
  }
  .search-input-wrapper input {
    width: 100%;
  }
  .recipe-intro-meta-section {
    grid-template-columns: 1fr;
  }
}

/* --- F. PRINT MEDIA OVERRIDES --- */
@media print {
  body, html {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt !important;
    line-height: 1.35 !important;
  }
  .site-header, 
  .site-footer,
  .breadcrumb-container,
  .recipe-intro-meta-section,
  .servings-scaler-control,
  .ingredients-tip,
  .kitchen-mode-switcher-card,
  .recipe-closing-photo-wrapper,
  .recipe-closing-photo-caption,
  .rajiv-closing-note-card,
  .recipe-navigation-section,
  .c-ftr,
  .c-news,
  .site-nav,
  .site-logo {
    display: none !important;
  }
  .recipe-header {
    border-bottom: 2px solid #000000 !important;
    padding-bottom: 8px !important;
    margin-bottom: 20px !important;
  }
  .recipe-title {
    font-size: 22pt !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
  }
  .recipe-workspace-section {
    display: block !important;
    padding-top: 10px !important;
  }
  .ingredients-box {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
    width: 100% !important;
  }
  .ingredients-box-title {
    font-size: 14pt !important;
    border-bottom: 1px solid #999999 !important;
    padding-bottom: 3px !important;
    margin-bottom: 10px !important;
  }
  .ingredients-checkbox-list li {
    padding: 4px 0 !important;
    border-bottom: 1px dashed #dddddd !important;
  }
  .ing-checkbox-circle {
    display: none !important;
  }
  .ing-qty {
    font-size: 10pt !important;
    font-weight: bold !important;
    width: 70px !important;
    display: inline-block !important;
    text-align: left !important;
  }
  .ing-name {
    font-size: 10pt !important;
    display: inline-block !important;
  }
  .recipe-method-column {
    width: 100% !important;
  }
  .method-column-title {
    font-size: 14pt !important;
    border-bottom: 1px solid #999999 !important;
    padding-bottom: 3px !important;
    margin-bottom: 10px !important;
  }
  .method-step-row {
    grid-template-columns: 32px 1fr !important;
    padding: 10px 0 !important;
    border-top: 1px solid #eeeeee !important;
    page-break-inside: avoid !important;
  }
  .step-number {
    font-size: 14pt !important;
    color: #000000 !important;
    font-weight: bold !important;
  }
  .step-text {
    font-size: 10pt !important;
    padding-top: 0 !important;
  }
}

/* Ticker Styling (Premium Retro-Editorial Divider Stripe) */
.ticker {
  background: var(--cream);
  border-top: 2px solid rgba(26, 26, 20, 0.12);
  border-bottom: 2px solid rgba(26, 26, 20, 0.12);
  padding: 22px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.ticker__item {
  font-family: var(--slab);
  font-size: clamp(18px, 2.5vw, 26px);
  color: var(--tomato);
  letter-spacing: 0.01em;
  line-height: 1.25;
  font-weight: 400;
  text-transform: none;
}

.ticker__sep {
  color: var(--leaf);
  font-family: var(--grot);
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 22px);
  user-select: none;
  opacity: 0.85;
}

@media (max-width: 640px) {
  .ticker {
    padding: 16px 16px;
    gap: 6px 12px;
  }
}

@media (max-width: 768px) {
  /* Newsletter stacking & horizontal spacing */
  .c-news {
    grid-template-columns: 1fr;
    padding: 40px 24px;
    gap: 28px;
    margin: 32px 0 0;
  }
  .c-news h2 {
    font-size: clamp(28px, 4vw, 36px);
  }
  .c-news-form .c-row {
    flex-direction: column;
    gap: 8px;
  }
  .c-news-form input {
    width: 100%;
  }
  .c-news-form button {
    width: 100%;
  }

  /* Footer columns stacking */
  .c-ftr-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .c-ftr {
    padding: 48px 24px 32px;
  }
  .c-ftr-bottom {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  /* Navbar stacking */
  .site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
  }
  .site-logo {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 22px;
  }
  .site-nav {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar Firefox */
    padding: 0 4px;
  }
  .site-nav::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
  }
  .site-nav ul {
    gap: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .site-nav ul li a {
    padding: 6px 8px;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
}

/* Custom overrides to ensure list bold items and paragraph bold text display inline rather than as block headings */
.page-prose li strong,
.page-prose p strong {
  display: inline !important;
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   16. FUNDING PAGE & FINANCIAL TABLE ADDITIONS
   ========================================================================== */

/* Progress Bars */
.funding-progress-container {
  width: 100%;
  height: 8px;
  background-color: var(--paper-2);
  border-radius: 4px;
  overflow: hidden;
  margin: 12px 0 8px;
  position: relative;
  border: 1px solid rgba(26, 26, 20, 0.08);
}

.funding-progress-bar {
  height: 100%;
  background-color: var(--leaf);
  border-radius: 4px;
  transition: width 0.6s ease;
}

.funding-progress-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

.funding-progress-meta strong {
  color: var(--leaf-d);
  font-weight: 700;
}

/* Open-ended donation pledge display */
.funding-pledge-stat {
  margin: 12px 0 16px;
  padding: 9px 0 10px;
  border-top: 2px dashed rgba(196, 66, 42, 0.3);
  border-bottom: 2px dashed rgba(196, 66, 42, 0.3);
}

.funding-pledge-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tomato);
  font-weight: 600;
}

/* Setup Costs List */
.cost-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--cream);
  padding: 24px;
  border: 1px solid rgba(26, 26, 20, 0.12);
  border-radius: 4px;
}

.cost-item {
  border-bottom: 1px dashed rgba(26, 26, 20, 0.15);
  padding-bottom: 12px;
}

.cost-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cost-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.cost-item-header strong {
  font-family: var(--grot);
  font-size: 16px;
  color: var(--leaf-d);
  font-weight: 700;
}

.cost-amount {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--tomato);
}

.cost-desc {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
}

/* Premium Financial Table Styling */
.sp-financial-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(26, 26, 20, 0.15);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  background: var(--cream);
  margin-top: 12px;
  border-bottom: 4px solid var(--ochre);
}

.sp-financial-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: var(--grot);
  font-size: 14px;
}

.sp-financial-table th {
  background: var(--leaf-d);
  color: var(--cream);
  padding: 14px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 3px solid var(--ochre);
  user-select: none;
}

.sp-financial-table th:not(:first-child),
.sp-financial-table td:not(:first-child) {
  text-align: right;
}

.sp-financial-table td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(26, 26, 20, 0.08);
  color: var(--ink);
  font-size: 14.5px;
}

.sp-financial-table tr {
  transition: background 0.15s;
}

.sp-financial-table tr:hover {
  background: var(--paper-2);
}

.sp-financial-table tr:nth-child(even) {
  background: rgba(239, 233, 216, 0.25);
}

.sp-financial-table tr:nth-child(even):hover {
  background: var(--paper-2);
}

.sp-financial-table tr.highlight-row {
  background: rgba(255, 186, 0, 0.12) !important;
  font-weight: 700;
}

.sp-financial-table tr.highlight-row td {
  border-top: 2px solid var(--ochre);
  border-bottom: 2px solid var(--ochre);
  color: var(--leaf-d);
}

.sp-financial-table td.neg {
  color: var(--tomato);
  font-weight: 700;
}

.sp-financial-table td.pos {
  color: var(--leaf);
  font-weight: 700;
}

/* ==========================================================================
   FUNDING PAGE — MOBILE FIXES
   ========================================================================== */

/* 1. Forecast table: tighten padding and font on small screens so all 4
      columns fit comfortably without the wrapper needing horizontal scroll  */
@media (max-width: 640px) {
  .sp-financial-table th,
  .sp-financial-table td {
    padding: 10px 10px;
    font-size: 12px;
  }

  .sp-financial-table th {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
}

/* 2. Manifesto / Get Involved block: the inline style uses -40px negative
      margin to bleed to the shell edge, but on mobile the shell only has
      ~24px padding, so correct the bleed to match.                         */
@media (max-width: 640px) {
  .sp-manifesto {
    margin-left: -24px  !important;
    margin-right: -24px !important;
    padding-left: 24px  !important;
    padding-right: 24px !important;
  }

  /* Ensure the hero buttons stack cleanly and don't overflow */
  .sp-manifesto .c-hero-btns {
    flex-direction: column;
    align-items: flex-start;
  }

  .sp-manifesto .c-btn {
    width: 100%;
    justify-content: center;
  }
}

#prelaunch-announcement {
  background-color: #90BC4B;
  color: #153e21;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 12px 20px;
  z-index: 9999;
  position: relative;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(21, 62, 33, 0.1);
}
#prelaunch-announcement a {
  color: #153e21;
  text-decoration: underline;
  font-weight: 800;
  margin-left: 5px;
}