/* OverKill Hill P³ – 2025 Industrial Blueprint Theme
   Shared layout + motion for OverKill Hill, Ask Jamie (subsite), and sibling sites.
*/

/* ===== ROOT TOKENS ======================================================= */

:root {
  /* Core palette – OverKill Hill P³ industrial stripe family */
  --okh-teal: #1c3a34;
  --okh-olive: #676a2c;
  --okh-ochre: #a06e28;
  --okh-rust: #5b3a27;
  --okh-espresso: #2a2320;
  --okh-orange: #c46a2c; /* rust-orange text accent */
  --okh-amber: #e6a03c;
  --okh-paper: #f6f2ee;
  --okh-gray: #6b7280;

  /* Mapped design tokens (OKH default) */
  --color-bg: var(--okh-espresso);
  --color-surface: #111827;
  --color-surface-soft: #181f26;
  --color-fg: #e5e7eb;
  --color-muted: var(--okh-gray);
  --color-accent: var(--okh-orange);
  --color-border-subtle: rgba(249, 250, 251, 0.08);

  /* Typography – OverKill Hill default */
  --font-heading: "Alfa Slab One", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;

  /* Layout */
  --max-width: 1120px;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;

  /* Motion */
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.5);
}

/* Optional light theme toggle */
:root[data-theme="light"] {
  --color-bg: #f9fafb;
  --color-surface: #ffffff;
  --color-surface-soft: #f3f4f6;
  --color-fg: #0f172a;
  --color-muted: #4b5563;
  --color-border-subtle: rgba(15, 23, 42, 0.08);
  --color-accent: var(--okh-orange);
}

body[data-theme="dark"] {
  background: radial-gradient(circle at top, #1f2933, #020617);
}

body[data-theme="light"] {
  background: radial-gradient(circle at top, #f6f2ee, #fff7f1);
}


/* ===== RESET & BASE ====================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: radial-gradient(circle at top, #1c3a34, #020617);
  color: var(--color-fg);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Branded focus ring for keyboard users */
a:focus-visible,
button:focus-visible,
.nav-toggle:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  margin: 0 0 0.75rem;
}

p {
  margin: 0 0 1rem;
}

ul {
  margin: 0;
  padding-left: 1.25rem;
}

button {
  font-family: inherit;
}

/* ===== UTILS & LAYOUT ==================================================== */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Global vertical rhythm + gentle side breathing room
   for all major sections across all brands */
.content-section {
  padding-block: 4rem;      /* top / bottom */
  padding-inline: min(2.5rem, 4vw);       /* left / right */
}

/* Subtle divider between stacked sections */
.content-section + .content-section {
  border-top: 1px solid var(--color-border-subtle);
}

@media (min-width: 900px) {
  .content-section {
    padding-block: 4.5rem;  /* keep the slightly taller desktop spacing */
  }
}

.grid {
  display: grid;
  gap: 1.75rem;
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Cards */
.card {
  background: var(--color-surface-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  padding: 1.5rem 1.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.card-actions {
  display: flex;
  gap: 0.75rem;      /* space between buttons */
  flex-wrap: wrap;   /* lets them wrap on tiny screens if needed */
}

/* override any full‑width button styles inside cards */
.card-actions .btn {
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.card h3 {
  margin-bottom: 0.5rem;
}

.card p:last-child {
  margin-bottom: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    background 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    background 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  background: linear-gradient(135deg, #c46a2c, #e6a03c);
  color: #0f172a;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

.btn-quiet {
  background: transparent;
  border-color: var(--color-border-subtle);
  color: var(--color-muted);
}

.btn-quiet:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Screen-reader-only text (for buttons like the mobile nav toggle) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Hide the visual brand wordmark next to the favicon in the header */
.site-header .logo .brand { 
  /* EITHER hide completely... */
  /* display: none; */

  /* ...OR keep for screen readers only (recommended) */
  /* replace the rule above with: */
  position: absolute;
  left: -9999px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  padding: 0.5rem 1rem;
  background: #111827;
  color: #f9fafb;
  z-index: 999;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ===== HEADER & NAV ====================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: radial-gradient(circle at top, #1f2933, #020617);
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  backdrop-filter: blur(18px);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.75rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo img {
  border-radius: 0.8rem;
}

.primary-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.primary-nav a {
  color: var(--color-muted);
  text-decoration: none;
  position: relative;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2rem;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff7a00, #ffb347);
  transition: width 0.2s ease;
}

/* Current / active nav link */
.primary-nav a[aria-current="page"],
.primary-nav a.is-current {
  color: var(--color-accent);
  font-weight: 600;
}

.primary-nav a[aria-current="page"]::after,
.primary-nav a.is-current::after {
  width: 100%;
}

.primary-nav a:hover::after {
  width: 100%;
}

/* ========== Primary nav: About submenu (shared pattern) ========== */

/* Parent list item for dropdown */
.primary-nav .has-submenu {
  position: relative;
}

/* Base (mobile / stacked) submenu styles */
.primary-nav .has-submenu > .submenu {
  list-style: none;
  margin: 0.25rem 0 0;
  padding-left: 1.25rem; /* indent under About on mobile */
  display: block;        /* visible when nav is stacked */
}

/* Ensure nested UL doesn't inherit flex row layout */
.primary-nav .has-submenu > .submenu {
  display: block;
}

.primary-nav .has-submenu > .submenu li {
  margin: 0; /* rely on link padding for touch targets */
}

.primary-nav .has-submenu > .submenu a {
  display: block;
  padding: 0.25rem 0;
}

/* Desktop dropdown behaviour */
@media (min-width: 768px) {
  .primary-nav .has-submenu > .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
    padding: 0.5rem 0.75rem;
    min-width: 12rem;
    border-radius: 0 0 4px 4px;

    /* Adjust these to match each site's header bg/shadow */
    background-color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

    display: none;  /* hidden by default on larger screens */
    z-index: 20;
  }

  .primary-nav .has-submenu:hover > .submenu,
  .primary-nav .has-submenu:focus-within > .submenu {
    display: block;
  }

  /* Simple caret on the About parent */
  .primary-nav .has-submenu > a::after {
    content: "▾";
    font-size: 0.7em;
    margin-left: 0.25em;
  }

  .primary-nav .has-submenu > .submenu li + li a {
    margin-top: 0.15rem;
  }
}

/* Submenu (desktop default: hidden, appears on hover/focus) */
.primary-nav .submenu {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 11rem;
  background-color: var(--color-surface, #ffffff);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  display: none;
  z-index: 1000;
}

.primary-nav .submenu li {
  margin: 0;
}

.primary-nav .submenu a {
  display: block;
  padding: 0.35rem 1rem;
  white-space: nowrap;
}

/* Show submenu when the parent is hovered or focused (desktop / keyboard) */
.primary-nav .has-submenu:hover > .submenu,
.primary-nav .has-submenu:focus-within > .submenu {
  display: block;
}

/* --- Mobile: keep submenu expanded & inline --- */
/* Adjust breakpoint to match your existing nav breakpoint if needed */
@media (max-width: 768px) {
  .primary-nav .has-submenu {
    position: static;
  }

  .primary-nav .submenu {
    position: static;
    display: block;           /* always visible when the main nav is open */
    box-shadow: none;
    background: transparent;
    padding: 0.25rem 0 0.5rem 0;
  }

  .primary-nav .submenu a {
    padding-left: 1.5rem;     /* simple visual indent under "About" */
    font-size: 0.95em;        /* optional: slightly smaller to read as secondary */
  }
}

/* ===== HEADINGS VARIANTS ================================================= */

/* Global OKH headings: adjust weight and letter-spacing */
body:not(.glee-main):not(.askjamie-main) h1,
body:not(.glee-main):not(.askjamie-main) h2,
body:not(.glee-main):not(.askjamie-main) h3 {
  font-family: "Alfa Slab One", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-weight: 400;            /* Reduce weight from 700 to 400 */
  letter-spacing: 0.05em;      /* Increase letter-spacing for clarity */
}

/* For Home hero title (“Precision · Protocol · Promptcraft”) */
body:not(.glee-main):not(.askjamie-main) .hero h1 {
  font-size: clamp(2.4rem, 3.6vw, 3.0rem);  /* Slightly smaller for readability */
  letter-spacing: 0.08em;     /* Further breathing room between letters */
  line-height: 1.08;          /* Reduce line height slightly */
}

/* For the “What happens at the Hill?” section */
body:not(.glee-main):not(.askjamie-main) .hero-forge-card h3 {
  font-size: clamp(1.2rem, 2.1vw, 1.6rem);  /* Size tuned for this secondary heading */
  font-weight: 600;
  letter-spacing: 0.06em;      /* Consistent letter-spacing */
}

/* Projects page header */
body:not(.glee-main):not(.askjamie-main) .projects-hero h1 {
  font-size: clamp(2.2rem, 3.2vw, 2.7rem);  /* Smaller than hero but still impactful */
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Card titles (in Projects section) */
body:not(.glee-main):not(.askjamie-main) .project-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.03em;   /* Lighter weight */
}


/* ===== BRAND HEADER VARIANTS ============================================ */

/* Ask Jamie + Glee share the light, paper header instead of OKH blueprint */

.askjamie-main .site-header,
.glee-main .site-header {
  background: #f6f2ee;
  border-bottom: 1px solid #d7d7d7;
  box-shadow: none;
}

.glee-main .site-header {
  border-bottom-color: #ffdcd2;
}

.askjamie-main .site-header .primary-nav a,
.glee-main .site-header .primary-nav a {
  color: #6b6b6b;
}

.glee-main .site-header .primary-nav a {
  color: #6b5e57;
}

.askjamie-main .primary-nav a {
  color: #2e2b29;
}

.askjamie-main .site-header .primary-nav a::after {
  background: linear-gradient(90deg, #2d6f7e, #3c8ea1);
}

.askjamie-main .primary-nav a[aria-current="page"],
.askjamie-main .primary-nav a.is-current {
  color: #2d6f7e; /* AskJamie teal */
}

.glee-main .site-header .primary-nav a::after {
  background: linear-gradient(90deg, #d35b2d, #f3b932);
}

.glee-main .primary-nav a[aria-current="page"],
.glee-main .primary-nav a.is-current {
  color: #d35b2d; /* Glee rust */
}

/* Glee/AskJamie mobile toggle styling */
.askjamie-main .nav-toggle,
.glee-main .nav-toggle {
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(246, 242, 238, 0.98); /* paper tone */
}

.askjamie-main .nav-toggle .bar,
.glee-main .nav-toggle .bar {
  background: #2e2b29; /* Glee/AskJamie dark bar */
}

.askjamie-main .site-header.scrolled,
.glee-main .site-header.scrolled {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* three-bar hamburger */
.nav-toggle .bar {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: #e5e7eb;
  margin: 4px 0;
}

/* Header scrolled state */
.site-header.scrolled {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
}

/* Responsive nav */
@media (max-width: 768px) {
  .primary-nav {
    position: fixed;
    inset: 3.75rem 0 auto 0;
    background: #020617; /* default: OverKill blueprint */
    transform: translateY(-120%);
    transition: transform 0.2s ease;
  }

  /* Brand-specific mobile menu backgrounds */
  body.askjamie-main .primary-nav,
  body.glee-main .primary-nav {
    background: #f6f2ee;                 /* paper tone */
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }

  /* Make sure link color stays readable on the light background */
  body.askjamie-main .primary-nav a,
  body.glee-main .primary-nav a {
    color: #2e2b29;
  }

  .site-header.nav-open .primary-nav {
    transform: translateY(0);
  }

  .primary-nav ul {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.5rem 1.5rem;
  }

  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/* Theme toggle button (small icon in header) */
.theme-toggle {
  margin-left: 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(15, 23, 42, 0.7);
  color: #f9fafb;
  font-size: 0.9rem;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}

/* ===== HERO – BLUEPRINT FORGE =========================================== */

.hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  color: #f9fafb;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding: 4rem 0 3rem;
}

.hero-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
  }
}

.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 0.7rem;
}

.hero h1 {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  margin-bottom: 0.6rem;
}

.hero-subline {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #9ca3af;
  margin-bottom: 1.5rem;
}

.hero-tagline {
  max-width: 32rem;
  color: #e5e7eb;
  margin-bottom: 1.75rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-forge-card {
  background: radial-gradient(circle at top left, #1f2933, #020617);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(148, 163, 184, 0.3);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-soft);
  font-size: 0.95rem;
}

/* Blueprint animated background */
.hero-blueprint-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-blueprint-bg::before,
.hero-blueprint-bg::after {
  content: "";
  position: absolute;
  inset: -20%;
  background-image: repeating-linear-gradient(
      0deg,
      rgba(148, 163, 184, 0.14),
      rgba(148, 163, 184, 0.14) 1px,
      transparent 1px,
      transparent 18px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(148, 163, 184, 0.09),
      rgba(148, 163, 184, 0.09) 1px,
      transparent 1px,
      transparent 18px
    );
  opacity: 0.65;
  mix-blend-mode: screen;
  animation: blueprintShift 20s linear infinite;
}

.hero-blueprint-bg::after {
  opacity: 0.4;
  filter: blur(1px);
}

/* 20-second loop animation */
@keyframes blueprintShift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-40px, -30px, 0);
  }
  100% {
    transform: translate3d(-80px, -60px, 0);
  }
}

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hero-visual {
  max-width: 320px;
  margin-left: auto;
}

.hero-illustration {
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
}

@media (max-width: 899px) {
  .hero-visual {
    max-width: 260px;
    margin: 0 auto 1.5rem;
  }
}

/* ===================================================================== */
/* BRAND SIGNATURE STRIPES – HORIZONTAL DRIFT                            */
/* ===================================================================== */

.brand-stripes {
  position: absolute;
  inset: -12% 0;              /* bleed a bit above/below */
  z-index: -2;                /* behind glow/paper + content */
  pointer-events: none;
  opacity: 0.75;
  background-size: 200% 100%; /* wider than screen so we can pan horizontally */
  animation: stripeDrift 60s linear infinite;
}

/* OverKill Hill P³ – industrial stripe stack */
.brand-stripes--okh {
  background-image: linear-gradient(
    to bottom,
    #1c3a34 0%,
    #1c3a34 20%,
    #676a2c 20%,
    #676a2c 40%,
    #a06e28 40%,
    #a06e28 60%,
    #5b3a27 60%,
    #5b3a27 80%,
    #2a2320 80%,
    #2a2320 100%
  );
}

/* Glee-fully – retro rainbow spectrum */
.brand-stripes--glee {
  background-image: linear-gradient(
    to bottom,
    #f6f2ee 0%,
    #f6f2ee 14%,
    #f3b932 14%,
    #f3b932 28%,
    #d35b2d 28%,
    #d35b2d 42%,
    #9e3b2e 42%,
    #9e3b2e 56%,
    #2d6f7e 56%,
    #2d6f7e 70%,
    #0d2b3a 70%,
    #0d2b3a 100%
  );
}

/* (Optional) Ask Jamie – light, subtle echo of OverKill stripes */
.brand-stripes--jamie {
  background-image: linear-gradient(
    to bottom,
    #f6f2ee 0%,
    #f6f2ee 20%,
    #e1ecef 20%,
    #e1ecef 40%,
    #d9dfd1 40%,
    #d9dfd1 60%,
    #f2d7b1 60%,
    #f2d7b1 80%,
    #f6f2ee 80%,
    #f6f2ee 100%
  );
  opacity: 0.6;
}

/* Slow horizontal drift */
@keyframes stripeDrift {
  0% {
    background-position: 0% 0;
  }
  50% {
    background-position: -50% 0;
  }
  100% {
    background-position: 0% 0;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .brand-stripes {
    animation: none;
    background-position: 0 0;
  }
}

/* ===== SECTION STYLES ==================================================== */

.section-header {
  margin-bottom: 2.5rem;
}

.section-header p {
  color: var(--color-muted);
  max-width: 36rem;
}

/* Striped / alternate background */
.stripe-bg {
  background: radial-gradient(circle at top, #020617, #020617);
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

/* Two-column layout */
.two-column {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .two-column {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  margin-bottom: 0.75rem;
}

/* Manifesto */
.manifesto-blockquote {
  border-left: 4px solid var(--color-accent);
  padding-left: 1.25rem;
  margin: 0 0 1.75rem;
  font-size: 1.05rem;
}

/* Projects cards */
.project-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* About */
.about-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
}

/* CTA section */
.contact-cta {
  text-align: center;
  padding: 4rem 0 4.5rem;
}

.contact-cta p {
  max-width: 40rem;
  margin: 0 auto 1.5rem;
}

/* ===== FOOTER ============================================================ */

.site-footer {
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  background: #020617;
  margin-top: 3rem;
  padding-top: 2.5rem;
}

.footer-grid {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: 2fr 1.2fr 1.2fr;
  }
}

.footer-column h3,
.footer-column h4 {
  margin-bottom: 0.75rem;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column li {
  margin-bottom: 0.4rem;
}

.footer-column a {
  color: var(--color-muted);
}

.footer-column a:hover {
  color: var(--color-accent);
}

.footer-bottom {
  border-top: 1px solid rgba(107, 114, 128, 0.45);
  margin-top: 2rem;
  padding: 0.9rem 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* ===== SCROLL REVEAL ===================================================== */

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Chat mock layout – shared structure, brand-specific colors layered on top */
.chat-mock {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chat-bubble {
  max-width: 34rem;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  border: 1px solid var(--color-border-subtle);
  font-size: 0.95rem;
  line-height: 1.5;
}

.chat-bubble.user {
  align-self: flex-start;
}

.chat-bubble.assistant {
  align-self: flex-end;
}

/* ===================================================================== */
/* GLOBAL MERMAID – DEFAULT OVERKILL HILL P³                             */
/* ===================================================================== */

/* Base container; used everywhere unless a subsite override applies */
.mermaid {
  max-width: 100%;
  display: block;
}

/* Default OKH P³ look (body without askjamie-main / glee-main) */
body:not(.askjamie-main):not(.glee-main) .mermaid svg {
  width: 100%;
  height: auto;
}

/* Nodes */
body:not(.askjamie-main):not(.glee-main) .mermaid .node rect,
body:not(.askjamie-main):not(.glee-main) .mermaid .node circle {
  rx: 6px;
  ry: 6px;
  fill: var(--color-surface-soft);
  stroke: var(--color-accent);
  stroke-width: 1.5px;
}

/* Labels */
body:not(.askjamie-main):not(.glee-main) .mermaid .label text {
  fill: var(--color-fg);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

/* Edges */
body:not(.askjamie-main):not(.glee-main) .mermaid .edgePath path {
  stroke: rgba(148, 163, 184, 0.85);  /* slate rail */
  stroke-width: 1.5px;
}

/* Clusters / grouped sections */
body:not(.askjamie-main):not(.glee-main) .mermaid .cluster rect {
  fill: #020617;
  stroke: rgba(148, 163, 184, 0.75);
}

/* Clickable affordance – applies to all brands */
.mermaid a {
  cursor: pointer;
}

/* Default OKH tooltip styling */
body:not(.askjamie-main):not(.glee-main) .mermaidTooltip {
  background-color: #020617;
  color: #e5e7eb;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.8);
}

/* ===================================================================== */
/* ASK JAMIE SUBSITE – MID-CENTURY PAPER + TEAL                          */
/* ===================================================================== */

.askjamie-main {
  /* Palette + tokens */
  --color-bg: #f6f2ee;           /* paper base */
  --color-surface: #fdfbf7;
  --color-surface-soft: #f6f2ee;
  --color-fg: #2e2b29;
  --color-muted: #6b6b6b;
  --color-accent: #2d6f7e;
  --color-border-subtle: #d7d7d7;

  --font-heading: "Baloo 2", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-accent: "Kalam", system-ui, -apple-system, "Segoe UI", sans-serif;

  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
}

/* Neutralize dark blueprint vibe inside AskJamie */
.askjamie-main .hero {
  background: none;
  color: #2e2b29;
}

/* Brand stripes behind the hero */
.askjamie-main .brand-stripes--jamie {
  background-image: linear-gradient(
    to bottom,
    /* deep teal */ #007c84 0%,
    #007c84 20%,
    /* aqua */ #76b2ba 20%,
    #76b2ba 40%,
    /* cream */ #f5ead9 40%,
    #f5ead9 60%,
    /* warm beige */ #d5ba9a 60%,
    #d5ba9a 80%,
    /* mocha */ #69584c 80%,
    #69584c 100%
  );
  opacity: 0.8;
}

/* Stripe background sections (e.g. “Where Jamie fits”) */
.askjamie-main .stripe-bg {
  background: #f7f3ee;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Hero paper card */
.askjamie-hero {
  position: relative;
  padding: 4rem 0 3.25rem;
}

.askjamie-hero-visual {
  display: flex;
  justify-content: center;
}

@media (min-width: 900px) {
  .askjamie-hero-visual {
    justify-content: flex-end;
  }
}

.askjamie-paper {
  position: absolute;
  inset: 8% 2% 0 2%;/* ~80% width, reveals a little stripe on each side */
  background: #f6f2ee;
  background-image: radial-gradient(
      circle at 0 0,
      rgba(0, 0, 0, 0.05),
      transparent 55%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(0, 0, 0, 0.04),
      transparent 55%
    );
  transform: rotate(-2deg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 0;
}

.askjamie-hero-inner {
  position: relative;
  z-index: 1;
}

.askjamie-hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .askjamie-hero-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

/* Keep the hero content comfortably inside the paper */
.askjamie-hero-copy {
  max-width: 38rem;         /* prevents the text from running too wide */
  padding: 0 2rem 0 2.75rem; /* extra left padding to pull logo/text onto the paper */
}

/* On smaller screens, use slightly softer padding so it doesn't feel cramped */
@media (max-width: 768px) {
  .askjamie-hero-copy {
    padding: 0 1.75rem;
  }
}

/* === AskJamie system pages (404, under-construction, etc.) ============ */

/* Stacked hero variant with one big illustration */
.askjamie-hero.askjamie-hero--system .askjamie-hero-inner {
  text-align: center;
}

.askjamie-hero-visual--full {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

/* Wide illustration (404 / error) */
.askjamie-system-hero-img {
  display: block;
  max-width: min(100%, 1120px);
  height: auto;
}

/* Under-construction layout: single-column with large art */
.askjamie-hero--under-construction .askjamie-hero-grid {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
  justify-items: center;
}

.askjamie-hero--under-construction .askjamie-hero-copy {
  max-width: 40rem;
  margin: 0 auto 2rem;
}

.askjamie-hero--under-construction .askjamie-hero-visual {
  justify-content: center;
}

/* Large hero image inside the angled paper card */
.askjamie-under-image {
  display: block;
  max-width: min(100%, 960px);
  height: auto;
  border-radius: 1.25rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* Hero copy */
.askjamie-hero-copy .eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase; /* overridden by .askjamie-main .eyebrow below */
  color: #3c8ea1;
  margin-bottom: 0.5rem;
}

.askjamie-hero-copy h1 {
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-family: "Baloo 2", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

.askjamie-hero-copy .hero-subtitle {
  font-size: 1.02rem;
  color: #4b5563;
  margin-bottom: 0.75rem;
}

.askjamie-hero-copy .hero-tagline {
  color: #6b6b6b;
  margin-bottom: 1.6rem;
}

/* Avatar */
.askjamie-avatar {
  max-width: 260px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  filter: none;
}

/* Large under‑construction hero art */
.askjamie-under-img {
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
}

/* Cards and buttons tuned for Jamie palette */
.askjamie-main .card {
  background: #fdfbf7;
  border-color: #d7d7d7;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.askjamie-main .btn-primary {
  background: linear-gradient(135deg, #2d6f7e, #3c8ea1);
  color: #f9fafb;
  box-shadow: 0 10px 24px rgba(45, 111, 126, 0.45);
}

.askjamie-main .btn-primary:hover {
  box-shadow: 0 14px 30px rgba(45, 111, 126, 0.6);
}

.askjamie-main .btn-quiet {
  border-color: #d7d7d7;
  color: #4b5563;
}

.askjamie-main .btn-quiet:hover {
  border-color: #2d6f7e;
  color: #2d6f7e;
}

/* Chat bubbles */
.askjamie-main .chat-bubble.user {
  background: #ffffff;
  border-color: #d7d7d7;
}

.askjamie-main .chat-bubble.assistant {
  background: #2d6f7e;
  color: #f9fafb;
}

.askjamie-main .chat-bubble.assistant.secondary {
  background: #fdfbf7;
  color: #2e2b29;
  border-color: #3c8ea1;
}

/* Accent typography (Kalam) */
.askjamie-main .eyebrow,
.askjamie-main .hero-subtitle,
.askjamie-main .manifesto-blockquote,
.askjamie-main .note,
.askjamie-main .h-accent {
  font-family: var(--font-accent);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Eyebrow: mid‑century, non‑shouty */
.askjamie-main .eyebrow {
  text-transform: none;      /* overrides the uppercase version above */
  font-size: 0.95rem;
  color: #3c8ea1;
}
/* AskJamie: logo + text breadcrumb for inner-page heroes */
.askjamie-main .askjamie-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #3c8ea1; /* same teal accent */
  margin-bottom: 0.75rem;
}

.askjamie-main .askjamie-breadcrumb .breadcrumb-separator {
  opacity: 0.8;
}

.askjamie-main .askjamie-breadcrumb .breadcrumb-label {
  white-space: nowrap;
}

/* Smaller, inline logo for breadcrumb (doesn't affect main hero logo) */
.askjamie-main .askjamie-logo--crumb {
  margin-bottom: 0; /* override hero logo spacing */
}

.askjamie-main .askjamie-logo--crumb img {
  max-width: 7.5rem; /* ~120px – scaled-down mark */
  height: auto;
  display: block;
}

/* Smaller headings (h4–h6) */
.askjamie-main h4,
.askjamie-main h5,
.askjamie-main h6 {
  font-family: var(--font-heading);
  color: var(--color-accent);
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* Footer – soften OverKill’s dark footer just for AskJamie */
.askjamie-main .site-footer {
  background: #f7f3ee;
  color: var(--color-muted);
  border-top: 1px solid #e0d9d2;
  padding-top: 2.5rem;
}

.askjamie-main .footer-column h3,
.askjamie-main .footer-column h4 {
  color: var(--color-heading);
}

.askjamie-main .site-footer a {
  color: var(--color-accent);
}

.askjamie-main .footer-bottom {
  background: #f7f3ee;
  color: var(--color-muted);
}

/* Expand the hero paper card edge-to-edge on AskJamie. Without this override
   a 5% horizontal inset exposes the colorful stripes on either side of the
   paper, which is distracting. Setting the inset to zero on the left and
   right allows the paper to fully cover the stripes. */
.askjamie-main .askjamie-paper {
  /* Provide lateral margins so the paper fills ~80% of the width. This reveals
     a small amount of the stripe background while keeping the new colors. */
  inset: 6% 10% 0 10%;
}

/* AskJamie logo in hero: constrain width and add breathing room below the logo. */
.askjamie-main .askjamie-logo {
  display: inline-block;
  margin-bottom: 1rem;
}
.askjamie-main .askjamie-logo img {
  max-width: 12rem;
  height: auto;
}

/* ===================================================================== */
/* AskJamie – Mermaid layout + mid‑century teal skin                     */
/* ===================================================================== */

/* Universe hero: make the Mermaid diagram fill the angled paper card */
.askjamie-hero--universe .askjamie-hero-visual {
  align-items: stretch;
}

.askjamie-mermaid-shell {
  margin: 0;
  width: 100%;
  max-width: 960px;
}

/* The block Mermaid replaces with an SVG in the hero */
.askjamie-mermaid-shell .mermaid {
  width: 100%;
  min-height: 22rem;
  padding: 1.25rem 1.5rem;
  border-radius: 18px;
  background: var(--color-surface);         /* uses AskJamie surface token */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

@media (max-width: 640px) {
  .askjamie-mermaid-shell .mermaid {
    min-height: 18rem;
    padding: 1rem;
  }
}

/* Text + base styles for ANY Mermaid diagram on AskJamie pages */
.askjamie-main .mermaid {
  font-family: var(--font-body);
  color: var(--color-fg);
}

/* SVG sizing */
.askjamie-main .mermaid svg {
  width: 100%;
  height: auto;
}

/* Nodes – rounded paper cards with teal borders */
.askjamie-main .mermaid .node rect,
.askjamie-main .mermaid .node circle {
  rx: 14px;
  ry: 14px;
  fill: var(--color-surface);          /* #fdfbf7 */
  stroke: var(--color-accent);         /* #2d6f7e */
  stroke-width: 1.5px;
}

/* Labels */
.askjamie-main .mermaid .label text {
  fill: var(--color-fg);               /* #2e2b29 */
  font-family: var(--font-body);
  font-size: 0.9rem;
}

/* Edges – warm beige connectors */
.askjamie-main .mermaid .edgePath path {
  stroke: #d5ba9a;
  stroke-width: 1.5px;
}

/* Clusters / groups – pale paper panels */
.askjamie-main .mermaid .cluster rect {
  fill: #f5ead9;
  stroke: #d5ba9a;
}

/* Tooltips – teal pills */
.askjamie-main .mermaidTooltip {
  background-color: #2d6f7e;
  color: #fdfbf7;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  border: 1px solid #1c4d59;
}


/* ===================================================================== */
/* 🌈 GLEE-FULLY PERSONALIZABLE TOOLS – RETRO JOYFUL OVERLAY             */
/* ===================================================================== */

.glee-main {
  --color-bg: #f6f2ee;        /* Cream */
  --color-surface: #fffdfa;
  --color-surface-soft: #fff7f1;
  --color-fg: #2e2b29;        /* Charcoal */
  --color-muted: #6b5e57;
  --color-accent: #d94f63;    /* Coral */
  --color-accent-2: #2d6f7e;  /* Teal */

  font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont,
    sans-serif;
  color: var(--color-fg);
  background: var(--color-bg);
}

/* Glee-fully: lighten striped sections so they feel like paper, not blueprint */
.glee-main .stripe-bg {
  background: #fff7f1; /* warm paper */
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* ===== Glee-fully hero layering ===================================== */

/* Base hero */
.glee-hero {
  position: relative;
  overflow: hidden;
}

/* Full-width stripe banner behind everything */
.glee-hero-stripes {
  position: absolute;
  inset: 0;
  background: url("/assets/img/Glee-fullyTools%20Background%20Wide%201536.png") center/cover no-repeat;
  z-index: -2;
}

.glee-hero .hero-inner {
  position: relative;
  z-index: 0;          /* content & paper sit above stripes */
  padding-top: 3.5rem;
  padding-bottom: 3.25rem;
}

/* Two-column layout for hero */
.glee-hero .hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

/* Tilted paper card */
.glee-hero-card {
  position: relative;
  max-width: 36rem;
  padding: 2.4rem 2.6rem 2.2rem;
  z-index: 1;
}

/* The actual paper panel behind the text */
.glee-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff7f1;  /* warm paper */
  border-radius: 1.6rem;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.26);
  transform: rotate(-2.5deg);
  transform-origin: center center;
  z-index: -1;
}

/* Make sure text sits above the pseudo-element */
.glee-hero-card > * {
  position: relative;
}

/* Butterfly image sizing */
.glee-hero-img {
  width: clamp(260px, 36vw, 520px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Responsive tweaks */
@media (max-width: 1024px) {
  .glee-hero .hero-grid {
    grid-template-columns: 1fr;
  }

  .glee-hero-card {
    margin-bottom: 1.75rem;
  }

  .glee-hero-card::before {
    transform: rotate(-1.5deg);
  }
}

@media (max-width: 640px) {
  .glee-hero .hero-inner {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
  }

  .glee-hero-card {
    padding: 1.9rem 1.8rem 1.8rem;
  }

  .glee-hero-card::before {
    border-radius: 1.2rem;
  }

  .glee-hero-img {
    width: clamp(220px, 70vw, 420px);
    margin-inline: auto;
  }
}

/* Glee hero sits on light, not blueprint */
.glee-main .hero {
  background: none;
  color: var(--color-fg);
}

.glee-main .hero-tagline {
  color: var(--color-muted);
}

/* container padding can stay as-is, but ensure a bit of top space */
.glee-hero .hero-inner {
  padding-top: 3.5rem;
  padding-bottom: 3rem;
}

.glee-hero-card {
  position: relative;
  max-width: 36rem;
  padding: 2.4rem 2.6rem 2.2rem;
}

/* Rotated paper background behind the content, but text stays straight */
.glee-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fffaf5;
  border-radius: 1.6rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
  transform: rotate(-2.5deg);
  transform-origin: center center;
  z-index: -1;
}

.glee-hero-card p,
.glee-hero-card h1 {
  position: relative;
}

@media (max-width: 1024px) {
  .glee-hero .hero-grid {
    grid-template-columns: 1fr;
  }

  .glee-hero-card {
    margin-bottom: 1.5rem;
  }

  .glee-hero-card::before {
    transform: rotate(-1.5deg);
  }
}

/* Constrain hero image size across breakpoints */
.glee-hero-img {
  /* Never let it explode, never let it shrink to silly */
  width: clamp(260px, 36vw, 520px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Tighten hero grid proportions on wide screens */
.hero-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

/* Collapse to single column sooner to avoid the mid-range “oversize” state */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .glee-hero-img {
    /* Keep it friendly when stacked */
    width: clamp(240px, 60vw, 520px);
    margin: 1rem auto 0;
  }
}

/* Guard for the specific awkward band (common offender: ~820–980px) */
@media (min-width: 820px) and (max-width: 980px) {
  .glee-hero-img {
    width: clamp(260px, 32vw, 480px);
  }
}

/* If you had any transforms for flair, disable them at mid widths */
@media (min-width: 820px) and (max-width: 980px) {
  .glee-hero-img {
    transform: none;
  }
}

/* ===== ABOUT PAGE HERO – PAPER EFFECT ============================== */
/* Target only the About page by looking at the nav state.
   Requires modern browsers that support :has(), which all current
   evergreen browsers do. */

body.glee-main:has(.primary-nav a[aria-current="page"][href*="about"]) 
  .hero.glee-hero {
  padding-block: clamp(3.5rem, 6vw, 4.75rem) clamp(3rem, 4vw, 4rem);
}

/* Make sure the inner container can host the card */
body.glee-main:has(.primary-nav a[aria-current="page"][href*="about"]) 
  .hero.glee-hero .hero-inner {
  position: relative;
}

/* Align the hero layout */
body.glee-main:has(.primary-nav a[aria-current="page"][href*="about"]) 
  .hero.glee-hero .hero-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 900px) {
  body.glee-main:has(.primary-nav a[aria-current="page"][href*="about"]) 
    .hero.glee-hero .hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
}

/* Turn the first column (the copy) into a “paper” card */
body.glee-main:has(.primary-nav a[aria-current="page"][href*="about"]) 
  .hero.glee-hero .hero-grid > div:first-child {
  position: relative;
  max-width: 40rem;
  padding: clamp(2rem, 3vw, 2.6rem);
  border-radius: 1.6rem;
}

/* The angled paper behind the text */
body.glee-main:has(.primary-nav a[aria-current="page"][href*="about"]) 
  .hero.glee-hero .hero-grid > div:first-child::before {
  content: "";
  position: absolute;
  inset: -0.6rem -0.9rem -1.0rem -1.2rem;
  background: #fff7f1;              /* same warm paper tone */
  border-radius: 1.6rem;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.26);
  transform: rotate(-2.5deg);
  transform-origin: center center;
  z-index: -1;
}

/* Keep the text nicely readable on the card */
body.glee-main:has(.primary-nav a[aria-current="page"][href*="about"]) 
  .hero.glee-hero h1 {
  margin-bottom: 0.75rem;
}

body.glee-main:has(.primary-nav a[aria-current="page"][href*="about"]) 
  .hero.glee-hero .hero-tagline {
  color: #6b5e57; /* softer Glee body color */
}

/* ===== CONTACT PAGE HERO – PAPER EFFECT ============================== */
/* Contact hero: tilted paper + retro stripes */

body.glee-main:has(.primary-nav a[aria-current="page"][href*="contact"])
  main > .content-section:first-of-type {
  position: relative;
  padding-block: clamp(3.5rem, 6vw, 4.75rem) clamp(3rem, 4vw, 4rem);
  margin-top: 0;
  overflow: hidden;
}

/* Use only the contact-specific paper stripes, not the extra brand-stripes div */
body.glee-main:has(.primary-nav a[aria-current="page"][href*="contact"])
  main > .content-section:first-of-type .brand-stripes {
  display: none;
}

/* Retro stripe backdrop behind the paper card */
body.glee-main:has(.primary-nav a[aria-current="page"][href*="contact"])
  main > .content-section:first-of-type::before {
  content: "";
  position: absolute;
  inset: -12% 0;
  z-index: -3;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    #f6f2ee 0%,
    #f6f2ee 14%,
    #f3b932 14%,
    #f3b932 28%,
    #d35b2d 28%,
    #d35b2d 42%,
    #9e3b2e 42%,
    #9e3b2e 56%,
    #2d6f7e 56%,
    #2d6f7e 70%,
    #0d2b3a 70%,
    #0d2b3a 100%
  );
  opacity: 0.75;                 /* match other Glee stripe sections */
  background-size: 200% 100%;    /* enable gentle horizontal drift */
  animation: stripeDrift 60s linear infinite;
}

/* Angled paper layer behind the header + lane cards */
body.glee-main:has(.primary-nav a[aria-current="page"][href*="contact"])
  main > .content-section:first-of-type::after {
  content: "";
  position: absolute;
  inset: 1.5rem 1rem 2.25rem 1rem; /* mobile / tablet: nearly full width */
  z-index: -2;
  pointer-events: none;
  background: #fff7f1;
  border-radius: 1.6rem;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.26);
  transform: rotate(-2.5deg);
  transform-origin: center center;
}

/* Extra breathing room at the bottom of the hero copy */
body.glee-main:has(.primary-nav a[aria-current="page"][href*="contact"])
  main > .content-section:first-of-type .section-header {
  margin-bottom: 2.25rem;
}

/* Desktop tweaks: paper at ~80% width + content centered on top of it,
   and the two “lanes” side‑by‑side as columns. */
@media (min-width: 900px) {
  body.glee-main:has(.primary-nav a[aria-current="page"][href*="contact"])
    main > .content-section:first-of-type::after {
    inset: 1.5rem 10% 2.5rem 10%; /* ~80% width, centered */
  }

  body.glee-main:has(.primary-nav a[aria-current="page"][href*="contact"])
    main > .content-section:first-of-type .section-header,
  body.glee-main:has(.primary-nav a[aria-current="page"][href*="contact"])
    main > .content-section:first-of-type .grid {
    max-width: 80%;
    margin-inline: auto;          /* keep content sitting on the paper */
  }

  body.glee-main:has(.primary-nav a[aria-current="page"][href*="contact"])
    main > .content-section:first-of-type .grid.grid-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;         /* both cards grow to same height */
  }
}

/* Small screens: soften the tilt & keep it edge‑to‑edge */
@media (max-width: 768px) {
  body.glee-main:has(.primary-nav a[aria-current="page"][href*="contact"])
    main > .content-section:first-of-type::after {
    inset: 1.25rem 0.5rem 2rem 0.5rem;
    border-radius: 1.2rem;
    transform: rotate(-1.6deg);
  }
}

/* ===== LEGAL PAGE HERO – PAPER EFFECT ============================== */
/* Target the Legal page by its meta description so we don't need
   to touch the HTML or nav. */

html:has(
  head > meta[name="description"][content^="Legal notice and usage disclaimer"]
)
  body.glee-main
  main
  > .content-section:first-of-type {
  position: relative;
  padding-block: clamp(3.5rem, 6vw, 4.75rem) clamp(3rem, 4vw, 4rem);
  margin-top: 0;
  overflow: hidden;
}

/* Retro stripe backdrop (same spectrum as Contact) */
html:has(
  head > meta[name="description"][content^="Legal notice and usage disclaimer"]
)
  body.glee-main
  main
  > .content-section:first-of-type::before {
  content: "";
  position: absolute;
  inset: -12% 0;
  z-index: -3;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    #f6f2ee 0%,
    #f6f2ee 14%,
    #f3b932 14%,
    #f3b932 28%,
    #d35b2d 28%,
    #d35b2d 42%,
    #9e3b2e 42%,
    #9e3b2e 56%,
    #2d6f7e 56%,
    #2d6f7e 70%,
    #0d2b3a 70%,
    #0d2b3a 100%
  );
}

/* Tilted paper card behind the full legal section */
html:has(
  head > meta[name="description"][content^="Legal notice and usage disclaimer"]
)
  body.glee-main
  main
  > .content-section:first-of-type::after {
  content: "";
  position: absolute;
  inset: 1.5rem 1rem 2.25rem 1rem; /* mobile/tablet */
  z-index: -2;
  pointer-events: none;
  background: #fff7f1;
  border-radius: 1.6rem;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.26);
  transform: rotate(-2.5deg);
  transform-origin: center center;
}

/* Keep the content sitting nicely inside the paper on desktop */
@media (min-width: 900px) {
  html:has(
    head > meta[name="description"][content^="Legal notice and usage disclaimer"]
  )
    body.glee-main
    main
    > .content-section:first-of-type::after {
    inset: 1.5rem 10% 2.5rem 10%; /* ~80% width, centered */
  }

  html:has(
    head > meta[name="description"][content^="Legal notice and usage disclaimer"]
  )
    body.glee-main
    main
    > .content-section:first-of-type
    .section-header,
  html:has(
    head > meta[name="description"][content^="Legal notice and usage disclaimer"]
  )
    body.glee-main
    main
    > .content-section:first-of-type
    > section {
    max-width: 80%;
    margin-inline: auto;
  }
}

/* Softer tilt + tighter paper on small screens */
@media (max-width: 768px) {
  html:has(
    head > meta[name="description"][content^="Legal notice and usage disclaimer"]
  )
    body.glee-main
    main
    > .content-section:first-of-type::after {
    inset: 1.25rem 0.5rem 2rem 0.5rem;
    border-radius: 1.2rem;
    transform: rotate(-1.6deg);
  }
}

/* ===== Glee-fully general styles =================================== */
/* Headers */
.glee-main h1,
.glee-main h2,
.glee-main h3 {
  font-family: "Fredoka", "Poppins", sans-serif;
  color: var(--color-accent-2);
}

/* Buttons */
.glee-main .btn-primary {
  background: linear-gradient(135deg, #d94f63, #d35b2d); /* coral → orange */
  color: #2e2b29;
  box-shadow: 0 10px 22px rgba(217, 79, 99, 0.4);
}

.glee-main .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(217, 79, 99, 0.55);
}

.glee-main .btn-quiet {
  border-color: #ffd8d2;
  color: var(--color-accent);
}

/* Glee Glow animation (kept, but tuned warmer) */
.glee-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(243, 185, 50, 0.3),
    rgba(211, 91, 45, 0.25),
    rgba(60, 142, 161, 0.28)
  );
  background-size: 200% 200%;
  animation: gleeSweep 18s linear infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
}

@keyframes gleeSweep {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Cards */
.glee-main .card {
  background: #ffffff;
  border-color: #ffe7e0;
  box-shadow: 0 8px 20px rgba(255, 195, 160, 0.25);
}

/* Footer */
.glee-main .site-footer {
  background: #fff7f1;
  color: var(--color-muted);
  border-top: 1px solid #ffdcd2;
}

/* ===================================================================== */
/* Shared secondary button variant + Glee-specific accent styling        */
/* ===================================================================== */

/* Secondary button – quiet, low-contrast CTA aligned with .btn-quiet */
.btn-secondary {
  background: transparent;
  border-color: var(--color-border-subtle);
  color: var(--color-muted);
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Glee: secondary button picks up coral accent and soft border */
.glee-main .btn-secondary {
  border-color: #ffd8d2;
  color: var(--color-accent);
}

/* ===================================================================== */
/* Glee‑fully – Mermaid layout + retro‑joyful skin                      */
/* ===================================================================== */

/* Base typography for Mermaid on Glee pages */
.glee-main .mermaid {
  font-family: var(--font-body);
  color: var(--color-fg);
}

/* SVG sizing */
.glee-main .mermaid svg {
  width: 100%;
  height: auto;
}

/* Nodes – pill‑like cards on warm paper */
.glee-main .mermaid .node rect,
.glee-main .mermaid .node circle {
  rx: 18px;
  ry: 18px;
  fill: var(--color-surface);        /* #fffdfa */
  stroke: var(--color-accent);       /* coral */
  stroke-width: 1.6px;
}

/* Labels */
.glee-main .mermaid .label text {
  fill: var(--color-fg);             /* charcoal */
  font-family: var(--font-body);
  font-size: 0.9rem;
}

/* Edges – soft coral connectors */
.glee-main .mermaid .edgePath path {
  stroke: rgba(217, 79, 99, 0.85);
  stroke-width: 1.6px;
}

/* Clusters – pale peach group boxes */
.glee-main .mermaid .cluster rect {
  fill: #fff0ea;
  stroke: #ffd1c4;
}

/* Tooltips – coral pills */
.glee-main .mermaidTooltip {
  background-color: #d94f63;
  color: #fffdfa;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  border: 1px solid #b83f50;
}

/* ===== Ko‑fi support section ========================================= */

.ko-fi-section {
  background: #fffdfa;
}

.ko-fi-section .two-column {
  align-items: stretch;
  gap: 2.25rem;
}

.ko-fi-copy p:last-child {
  margin-bottom: 0;
}

.ko-fi-highlight {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.9rem;
}

.ko-fi-highlight p {
  margin-bottom: 0.25rem;
}

.ko-fi-highlight .btn-primary {
  align-self: flex-start;
}

@media (max-width: 768px) {
  .ko-fi-highlight {
    margin-top: 1.5rem;
  }
}