/* ETL shared styles */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --black:   #0E0E0E;
      --offblack: #141414;
      --coal:    #1E1E1E;
      --ash:     #2C2C2C;
      --muted:   #6B6B6B;
      --silver:  #A8A8A8;
      --offwhite:#F0EDE6;
      --white:   #FAFAF8;
      --fire:    #E85D24;
      --fire-dim:#9E3E16;
      --eat:     #BA7517;
      --train:   #185FA5;
      --lead:    #533FB7;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--black);
      color: var(--offwhite);
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      line-height: 1.7;
      overflow-x: hidden;
    }

    /* ── NAV ────────────────────────────────── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.25rem 2.5rem;
      background: linear-gradient(to bottom, rgba(14,14,14,0.98) 0%, transparent 100%);
      transition: background 0.3s;
    }
    nav.scrolled { background: rgba(14,14,14,0.97); border-bottom: 1px solid var(--ash); }

    .nav-logo {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.5rem;
      letter-spacing: 0.12em;
      color: var(--white);
      text-decoration: none;
    }
    .nav-logo span { color: var(--fire); }

    .nav-links { display: flex; gap: 2.5rem; list-style: none; }
    .nav-links a {
      font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--silver);
      text-decoration: none; transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--fire); }

    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 4px;
    }
    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--silver);
      transition: transform 0.25s, opacity 0.25s, background 0.2s;
    }
    .nav-hamburger:hover span { background: var(--offwhite); }

    .nav-cta {
      font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--white);
      background: var(--fire); padding: 0.6rem 1.4rem;
      text-decoration: none; transition: background 0.2s;
    }
    .nav-cta:hover { background: var(--fire-dim); }

    /* ── HERO ───────────────────────────────── */
    .hero {
      min-height: 100vh;
      display: grid; grid-template-columns: 1fr 1fr;
      position: relative; overflow: hidden;
      padding: 7rem 0 0;
    }

    .hero-bg {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 80% at 70% 50%, rgba(232,93,36,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 20% 80%, rgba(83,63,183,0.05) 0%, transparent 50%);
    }

    .hero-grid-lines {
      position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 80px 80px;
    }

    .hero-quote {
      grid-column: 1 / -1;
      font-family: 'DM Serif Display', serif;
      font-size: clamp(1.5rem, 2.8vw, 2.4rem);
      font-style: italic; font-weight: 700;
      color: var(--white);
      text-align: center; line-height: 1.35;
      padding: 0.25rem 10vw 2rem;
      position: relative; z-index: 2;
    }

    .hero-left {
      display: flex; flex-direction: column; justify-content: flex-start;
      padding: 0.75rem 3rem 5rem 5vw;
      position: relative; z-index: 2;
    }

    .hero-eyebrow {
      font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--fire);
      margin-bottom: 1.5rem;
      opacity: 0; animation: fadeUp 0.8s 0.2s forwards;
    }

    .hero-headline {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(5rem, 9vw, 9rem);
      line-height: 0.92;
      letter-spacing: 0.02em;
      color: var(--white);
      margin-bottom: 2rem;
      opacity: 0; animation: fadeUp 0.9s 0.4s forwards;
    }
    .hero-headline .accent { color: var(--fire); display: block; }

    .hero-sub {
      font-family: 'DM Serif Display', serif;
      font-style: italic;
      font-size: clamp(1.1rem, 1.8vw, 1.4rem);
      color: var(--silver);
      max-width: 38ch;
      margin-bottom: 3rem;
      opacity: 0; animation: fadeUp 0.9s 0.6s forwards;
    }

    .hero-actions {
      display: flex; gap: 1rem; align-items: center;
      opacity: 0; animation: fadeUp 0.9s 0.8s forwards;
    }

    .btn-primary {
      font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--white);
      background: var(--fire); padding: 1rem 2.2rem;
      text-decoration: none; transition: background 0.2s, transform 0.2s;
      display: inline-block;
    }
    .btn-primary:hover { background: var(--fire-dim); transform: translateY(-2px); }

    .btn-ghost {
      font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--silver);
      border-bottom: 1px solid var(--muted);
      padding-bottom: 2px; text-decoration: none;
      transition: color 0.2s, border-color 0.2s;
    }
    .btn-ghost:hover { color: var(--white); border-color: var(--white); }

    .hero-right {
      display: flex; flex-direction: column; justify-content: flex-start;
      position: relative; z-index: 2;
      padding: 0.75rem 5vw 2rem 3.5rem;
      border-left: 1px solid rgba(255,255,255,0.06);
    }

    .hero-pillars {
      display: flex; flex-direction: column; gap: 1.5rem;
      opacity: 0; animation: fadeLeft 1s 1s forwards;
    }

    .pillar-card {
      border-left: 3px solid;
      padding: 1.4rem 1.8rem;
      background: rgba(255,255,255,0.03);
      backdrop-filter: blur(4px);
      transition: background 0.3s, transform 0.3s;
      cursor: default;
    }
    .pillar-card:hover { background: rgba(255,255,255,0.06); transform: translateX(6px); }
    .pillar-card.eat  { border-color: var(--eat); }
    .pillar-card.train{ border-color: var(--train); }
    .pillar-card.lead { border-color: var(--lead); }

    .pillar-label {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.8rem; letter-spacing: 0.1em;
      margin-bottom: 0.3rem;
    }
    .pillar-card.eat  .pillar-label { color: var(--eat); }
    .pillar-card.train .pillar-label { color: var(--train); }
    .pillar-card.lead .pillar-label { color: var(--lead); }

    .pillar-desc {
      font-size: 0.85rem; color: var(--silver); line-height: 1.6; max-width: 32ch;
    }

    .hero-scroll {
      position: absolute; bottom: 2.5rem; left: 50%;
      transform: translateX(-50%);
      font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
      opacity: 0; animation: fadeUp 1s 1.4s forwards;
    }
    .scroll-line {
      width: 1px; height: 48px; background: linear-gradient(to bottom, var(--fire), transparent);
      animation: scrollPulse 2s ease-in-out infinite;
    }

    /* ── MANIFESTO STRIP ────────────────────── */
    .manifesto-strip {
      background: var(--fire);
      padding: 1.2rem 0; overflow: hidden;
      white-space: nowrap;
    }
    .marquee-inner {
      display: inline-block;
      animation: marquee 25s linear infinite;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.1rem; letter-spacing: 0.15em;
      color: var(--white);
    }
    .marquee-inner span { margin: 0 2rem; opacity: 0.6; }

    /* ── SECTIONS SHARED ────────────────────── */
    section { padding: 7rem 5vw; scroll-margin-top: 4.5rem; }

    .section-tag {
      font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em;
      text-transform: uppercase; color: var(--fire);
      margin-bottom: 1rem; display: block;
    }

    .section-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(3rem, 5vw, 5.5rem);
      line-height: 0.95; letter-spacing: 0.02em;
      color: var(--white); margin-bottom: 1.5rem;
    }

    .section-body {
      font-family: 'DM Serif Display', serif;
      font-style: italic;
      font-size: clamp(1rem, 1.4vw, 1.2rem);
      color: var(--silver); max-width: 52ch; line-height: 1.8;
    }

    /* ── ABOUT ──────────────────────────────── */
    .about {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 6rem; align-items: center;
    }

    .about-quote {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(1.6rem, 2.5vw, 2.4rem);
      line-height: 1.35; color: var(--white);
      border-left: 4px solid var(--fire);
      padding-left: 2rem;
      font-style: italic;
    }

    .about-right p {
      font-size: 0.95rem; color: var(--silver);
      margin-bottom: 1.2rem; line-height: 1.8;
    }

    .about-stats {
      display: block;
      margin-top: 2rem;
    }

    .stat-block { border-top: 1px solid var(--ash); padding-top: 1rem; }
    .stat-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 3rem; color: var(--fire); line-height: 1;
    }
    .stat-label {
      font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--muted); margin-top: 0.3rem;
    }

    .about-intro {
      font-size: 0.88rem; color: var(--silver); line-height: 1.75;
      margin-top: 0; margin-bottom: 0.6rem;
    }
    .about-pillars { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 2rem; }
    .about-pillar  { display: flex; align-items: baseline; gap: 0.9rem; }
    .about-pillar-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.1rem; letter-spacing: 0.1em;
      flex-shrink: 0; min-width: 4rem;
    }
    .about-pillar-name.eat   { color: var(--eat); }
    .about-pillar-name.train { color: var(--train); }
    .about-pillar-name.lead  { color: var(--lead); }
    .about-pillar p { font-size: 0.82rem; color: var(--muted); line-height: 1.6; margin: 0; }

    /* ── PILLARS DEEP DIVE ──────────────────── */
    .pillars-section { background: var(--offblack); padding: 3rem 5vw; }
    .pillars-header {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 3rem; align-items: center; margin-bottom: 0;
      padding-top: 1.5rem;
    }
    .pillars-header-right {
      margin: 0; align-self: center;
    }

    .pillars-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 0; margin-top: 2rem;
    }

    .pillar-deep {
      padding: 1.5rem 2rem;
      border-top: 1px solid var(--ash);
      position: relative; overflow: hidden;
      transition: background 0.4s;
      display: flex; flex-direction: column;
    }
    .pillar-deep:not(:last-child) { border-right: 1px solid var(--ash); }
    .pillar-deep::before {
      content: ''; position: absolute;
      top: 0; left: 0; right: 0; height: 3px;
    }
    .pillar-deep.eat::before  { background: var(--eat); }
    .pillar-deep.train::before{ background: var(--train); }
    .pillar-deep.lead::before { background: var(--lead); }
    .pillar-deep:hover { background: rgba(255,255,255,0.025); }

    .pillar-number {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 5rem; line-height: 1;
      position: absolute; right: 1rem; top: 0.75rem;
      opacity: 0.05; color: var(--white);
    }

    .pillar-icon {
      font-size: 1.5rem; margin-bottom: 0.6rem;
    }

    .pillar-deep-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2.2rem; letter-spacing: 0.05em;
      margin-bottom: 0.5rem;
    }
    .pillar-deep.eat  .pillar-deep-title { color: var(--eat); }
    .pillar-deep.train .pillar-deep-title { color: var(--train); }
    .pillar-deep.lead .pillar-deep-title { color: var(--lead); }

    .pillar-deep-body {
      font-size: 0.85rem; color: var(--silver);
      line-height: 1.6; margin-bottom: 1rem;
      flex: 1;
    }

    .pillar-tags {
      display: flex; flex-wrap: wrap; gap: 0.35rem;
    }
    .tag {
      font-size: 0.65rem; font-weight: 500; letter-spacing: 0.1em;
      text-transform: uppercase; padding: 0.2rem 0.5rem;
      border: 1px solid var(--ash); color: var(--muted);
    }

    /* ── CREED ──────────────────────────────── */
    .creed-section {
      background: var(--coal);
      text-align: center; padding: 8rem 5vw;
      position: relative; overflow: hidden;
    }
    .creed-bg {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(232,93,36,0.06) 0%, transparent 70%);
    }
    .creed-text {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(3rem, 6vw, 7rem);
      line-height: 1; letter-spacing: 0.04em;
      color: var(--white); position: relative; z-index: 1;
    }
    .creed-text .fire { color: var(--fire); }
    .creed-sub {
      font-family: 'DM Serif Display', serif;
      font-style: italic;
      font-size: clamp(1rem, 1.5vw, 1.3rem);
      color: var(--muted); margin-top: 1.5rem;
      position: relative; z-index: 1;
      letter-spacing: 0.08em;
    }

    /* ── MEDIUM / ARTICLES ──────────────────── */
    .articles-section { background: var(--black); padding-top: 3rem; }

    .filter-group { margin-top: 3rem; }

    .filter-row {
      display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem;
    }
    .filter-row-label {
      font-size: 0.6rem; font-weight: 500; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--muted);
      display: flex; align-items: center; width: 100%;
      margin-bottom: 0.15rem; margin-top: 0.3rem;
    }
    .filter-row-label::after {
      content: ''; flex: 1; height: 1px;
      background: var(--ash); margin-left: 0.75rem;
    }

    .filter-btn {
      font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em;
      text-transform: uppercase; padding: 0.45rem 1rem;
      border: 1px solid var(--ash); background: transparent;
      color: var(--muted); cursor: pointer; transition: all 0.2s;
      white-space: nowrap;
    }
    .filter-btn:hover { color: var(--silver); border-color: var(--silver); }

    /* Pillar active states */
    .filter-btn.active-all   { background: var(--fire);  border-color: var(--fire);  color: var(--white); }
    .filter-btn.active-eat   { background: var(--eat);   border-color: var(--eat);   color: var(--white); }
    .filter-btn.active-train { background: var(--train); border-color: var(--train); color: var(--white); }
    .filter-btn.active-lead  { background: var(--lead);  border-color: var(--lead);  color: var(--white); }

    /* Sub-category active states — outlined style */
    .filter-btn.active-sub {
      border-color: var(--fire); color: var(--fire); background: transparent;
    }

    .articles-search-wrap { margin-left: auto; display: flex; align-items: center; }
    .articles-search {
      background: var(--coal); border: 1px solid var(--ash);
      color: var(--offwhite); font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem; padding: 0.4rem 0.75rem;
      outline: none; width: 170px;
      transition: border-color 0.2s, width 0.25s;
    }
    .articles-search:focus { border-color: var(--fire); width: 230px; }
    .articles-search::placeholder { color: var(--muted); }
    .articles-search::-webkit-search-cancel-button {
      -webkit-appearance: none; appearance: none;
      width: 12px; height: 12px; cursor: pointer;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    .filter-divider {
      width: 100%; height: 1px; background: var(--ash);
      margin: 0.6rem 0;
    }

    .articles-pager {
      display: flex; justify-content: space-between; align-items: center;
      margin: 1rem 0 1.5rem;
    }
    .articles-count {
      font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted);
    }
    .articles-count span { color: var(--fire); }
    .page-indicator {
      font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--muted);
    }
    .carousel-wrapper { display: flex; align-items: stretch; }
    .carousel-btn {
      background: var(--coal); border: none; color: var(--silver);
      font-size: 1.4rem; padding: 0 1.1rem; cursor: pointer;
      transition: background 0.2s, color 0.2s; flex-shrink: 0;
    }
    .carousel-btn:hover:not(:disabled) { background: var(--ash); color: var(--white); }
    .carousel-btn:disabled { opacity: 0.2; cursor: default; }

    .articles-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 1px; background: var(--ash);
    }

    .article-card {
      background: var(--offblack); padding: 0.85rem 1rem;
      transition: background 0.25s; cursor: pointer;
      text-decoration: none;
      display: grid;
      grid-template-columns: 100px 1fr;
      grid-template-rows: auto 1fr auto;
      gap: 0 0.9rem;
      align-items: start;
    }
    .article-card:hover { background: var(--coal); }
    .article-card.hidden-card { display: none; }

    .article-tags {
      display: flex; gap: 0.4rem; margin-bottom: 0.45rem; flex-wrap: wrap;
      grid-column: 2; grid-row: 1;
    }
    .article-pillar-tag {
      font-size: 0.58rem; font-weight: 500; letter-spacing: 0.14em;
      text-transform: uppercase; display: inline-block;
    }
    .article-pillar-tag.eat   { color: var(--eat); }
    .article-pillar-tag.train { color: var(--train); }
    .article-pillar-tag.lead  { color: var(--lead); }

    .article-sub-tag {
      font-size: 0.58rem; font-weight: 500; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--muted);
      border: 1px solid var(--muted); padding: 0 0.4rem;
      line-height: 1.6;
    }

    .article-title {
      font-family: 'DM Serif Display', serif;
      font-size: 0.92rem; line-height: 1.35;
      color: var(--white);
      grid-column: 2; grid-row: 2;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
      line-clamp: 3; overflow: hidden;
    }

    .article-meta {
      font-size: 0.62rem; font-weight: 500; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--muted);
      border-top: 1px solid var(--ash); padding-top: 0.5rem;
      margin-top: 0.6rem; transition: color 0.2s;
      grid-column: 2; grid-row: 3;
    }
    .article-card:hover .article-meta { color: var(--fire); }

    .article-card-img {
      display: block;
      grid-column: 1; grid-row: 1 / 4;
      width: 100px; height: 100px;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 3px;
      margin: 0;
      align-self: center;
      transition: filter 0.3s ease;
    }
    .article-card:hover .article-card-img { filter: brightness(1.12); }

    .articles-cta { margin-top: 2.5rem; text-align: center; }

    /* ── NEWSLETTER ─────────────────────────── */
    .newsletter-section {
      background: var(--offblack);
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 6rem; align-items: center;
      padding-top: 3rem;
    }

    .newsletter-form {
      display: flex; flex-direction: column; gap: 1rem;
    }

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

    .form-input {
      flex: 1; background: var(--coal); border: 1px solid var(--ash);
      border-right: none; padding: 1rem 1.5rem;
      color: var(--white); font-family: 'DM Sans', sans-serif;
      font-size: 0.9rem; outline: none;
      transition: border-color 0.2s;
    }
    .form-input::placeholder { color: var(--muted); }
    .form-input:focus { border-color: var(--fire); }

    .form-submit {
      background: var(--fire); border: none;
      padding: 1rem 2rem; color: var(--white);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.78rem; font-weight: 500;
      letter-spacing: 0.12em; text-transform: uppercase;
      cursor: pointer; transition: background 0.2s;
    }
    .form-submit:hover { background: var(--fire-dim); }
    .form-submit:disabled { background: var(--muted); cursor: not-allowed; opacity: 0.55; }
    .form-input:disabled { opacity: 0.55; cursor: not-allowed; }

    .form-note {
      font-size: 0.75rem; color: var(--muted);
    }

    /* ── FOOTER ─────────────────────────────── */
    footer {
      background: var(--offblack);
      border-top: 1px solid var(--ash);
      padding: 4rem 5vw 3rem;
    }

    .footer-top {
      display: flex; justify-content: space-between; align-items: flex-start;
      margin-bottom: 3rem;
    }

    .footer-brand .nav-logo { font-size: 2rem; }
    .footer-tagline {
      font-family: 'DM Serif Display', serif; font-style: italic;
      font-size: 0.9rem; color: var(--muted); margin-top: 0.5rem;
    }

    .footer-links { display: flex; gap: 5rem; }
    .footer-col h4 {
      font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--silver);
      margin-bottom: 1.2rem;
    }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
    .footer-col ul a {
      font-size: 0.85rem; color: var(--muted);
      text-decoration: none; transition: color 0.2s;
    }
    .footer-col ul a:hover { color: var(--fire); }

    .footer-bottom {
      border-top: 1px solid var(--ash); padding-top: 2rem;
      display: flex; justify-content: space-between; align-items: center;
    }
    .footer-copy { font-size: 0.75rem; color: var(--muted); }
    .footer-medium {
      font-size: 0.75rem; color: var(--muted);
      text-decoration: none; transition: color 0.2s;
    }
    .footer-medium:hover { color: var(--fire); }

    /* ── ANIMATIONS ─────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeLeft {
      from { opacity: 0; transform: translateX(30px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    @keyframes scrollPulse {
      0%, 100% { opacity: 0.4; transform: scaleY(1); }
      50%       { opacity: 1;   transform: scaleY(1.2); }
    }

    .reveal {
      opacity: 0; transform: translateY(24px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal.visible { opacity: 1; transform: none; }

    /* ── FEATURED ARTICLE ──────────────────── */
    .featured-section {
      padding: 7rem 5vw 1.5rem;
      background: var(--offblack);
    }
    .featured-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
    }
    .featured-img-wrap {
      display: block;
      border-radius: 4px;
      overflow: hidden;
      aspect-ratio: 16/9;
    }
    .featured-img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .featured-img-wrap:hover .featured-img { transform: scale(1.03); }
    .featured-label {
      font-size: 0.65rem; font-weight: 500; letter-spacing: 0.22em;
      text-transform: uppercase; color: var(--fire);
      margin-bottom: 1.1rem; display: block;
    }
    .featured-badges {
      display: flex; align-items: center; gap: 0.75rem;
      margin-bottom: 1.25rem;
    }
    .featured-badge-new {
      background: var(--fire); color: #fff;
      font-size: 0.62rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      padding: 0.28rem 0.6rem; border-radius: 3px;
    }
    .featured-badge-pillar {
      font-size: 0.7rem; font-weight: 500;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--lead);
    }
    .featured-title {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(1.35rem, 2.4vw, 2.1rem);
      line-height: 1.28; color: var(--white);
      margin-bottom: 1rem;
    }
    .featured-sub {
      font-size: 0.95rem; color: var(--silver);
      line-height: 1.7; margin-bottom: 1.5rem;
    }
    .featured-meta {
      font-size: 0.68rem; font-weight: 500;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 1.75rem;
    }
    .featured-cta {
      display: inline-flex; align-items: center; gap: 0.4rem;
      color: var(--fire); text-decoration: none;
      font-size: 0.78rem; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase;
      border-bottom: 1px solid var(--fire-dim);
      padding-bottom: 0.2rem;
      transition: color 0.2s, border-color 0.2s;
    }
    .featured-cta:hover { color: var(--offwhite); border-color: var(--offwhite); }

    /* ── RECENT ARTICLES ────────────────────── */
    .recent-section {
      padding: 0 5vw 2rem;
      background: var(--offblack);
    }
    .recent-header {
      border-top: 1px solid var(--ash);
      padding-top: 1.5rem;
      margin-bottom: 1.2rem;
    }
    .recent-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
    }
    .recent-card {
      display: grid;
      grid-template-columns: 110px 1fr;
      grid-template-rows: auto auto 1fr auto;
      gap: 0 1rem;
      align-items: start;
    }
    .recent-card-img-wrap {
      grid-column: 1; grid-row: 1 / 5;
      display: block; border-radius: 4px; overflow: hidden;
      aspect-ratio: 1; margin-bottom: 0;
      align-self: start;
    }
    .recent-card-img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.4s ease;
    }
    .recent-card-img-wrap:hover .recent-card-img { transform: scale(1.03); }
    .recent-card-meta {
      grid-column: 2; grid-row: 1;
      font-size: 0.68rem; font-weight: 500;
      letter-spacing: 0.13em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 0.45rem;
    }
    .recent-card-title {
      grid-column: 2; grid-row: 2;
      font-family: 'DM Serif Display', serif;
      font-size: clamp(0.9rem, 1.2vw, 1.05rem);
      line-height: 1.3; color: var(--white);
      margin-bottom: 0.45rem;
    }
    .recent-card-sub {
      grid-column: 2; grid-row: 3;
      font-size: 0.82rem; color: var(--silver);
      line-height: 1.6; margin-bottom: 0.6rem;
    }
    .recent-card-cta {
      grid-column: 2; grid-row: 4;
      display: inline-flex; align-items: center; gap: 0.4rem;
      color: var(--fire); text-decoration: none;
      font-size: 0.75rem; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase;
      border-bottom: 1px solid var(--fire-dim);
      padding-bottom: 0.2rem; width: fit-content;
      transition: color 0.2s, border-color 0.2s;
    }
    .recent-card-cta:hover { color: var(--offwhite); border-color: var(--offwhite); }

    .recent-see-all {
      text-align: right;
      padding-top: 1.2rem;
    }
    .recent-see-all-link {
      display: inline-flex; align-items: center; gap: 0.4rem;
      color: var(--fire); text-decoration: none;
      font-size: 0.75rem; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase;
      border-bottom: 1px solid var(--fire-dim);
      padding-bottom: 0.2rem;
      transition: color 0.2s, border-color 0.2s;
    }
    .recent-see-all-link:hover { color: var(--offwhite); border-color: var(--offwhite); }

    .featured-scroll {
      display: flex; flex-direction: column; align-items: center;
      padding: 2rem 0;
      background: var(--black);
      opacity: 0.5;
    }

    /* ── RESPONSIVE ─────────────────────────── */
    @media (max-width: 1024px) {
      /* Hero */
      .hero               { grid-template-columns: 1fr; padding: 6rem 0 0; }
      .hero-quote         { font-size: clamp(1.2rem, 3.5vw, 1.8rem); padding: 0.25rem 6vw 1.5rem; }
      .hero-left          { padding: 1rem 5vw 2rem; }
      .hero-right         { padding: 2rem 5vw 3rem; border-left: none; border-top: 1px solid rgba(255,255,255,0.08); }
      .hero-pillars       { flex-direction: row; flex-wrap: wrap; }

      /* Pillars section */
      .pillars-header     { grid-template-columns: 1fr; gap: 0.75rem; }
      .pillars-grid       { grid-template-columns: 1fr; }
      .pillar-deep:not(:last-child) { border-right: none; border-bottom: 1px solid var(--ash); }

      /* Featured & Recent */
      .featured-inner     { grid-template-columns: 1fr; gap: 2rem; }
      .recent-grid        { grid-template-columns: 1fr; }

      /* Articles */
      .articles-grid      { grid-template-columns: 1fr 1fr; }
      .carousel-btn       { padding: 0 0.6rem; font-size: 1.1rem; }

      /* Newsletter & Footer */
      .newsletter-section { grid-template-columns: 1fr; gap: 2rem; }
      .footer-top         { flex-direction: column; gap: 3rem; }
      .footer-links       { gap: 3rem; }

      /* Nav */
      nav                 { padding: 0.85rem 1.25rem; }
      .nav-logo           { font-size: 1.1rem; letter-spacing: 0.08em; }
      .nav-logo-img       { height: 1.5rem; }
      .nav-theme-toggle   { flex-shrink: 0; margin-left: auto; margin-right: 0.5rem; }
      .nav-hamburger      { display: flex; flex-shrink: 0; }
      .nav-links          { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: rgba(14,14,14,0.98); border-top: 1px solid var(--ash); padding: 0.5rem 0; gap: 0; max-height: calc(100vh - 3.5rem); overflow-y: auto; }
      .nav-links li + li  { border-top: 1px solid rgba(255,255,255,0.05); }
      .nav-links a        { padding: 0.85rem 1.5rem; display: block; font-size: 0.82rem; }
      nav.nav-open .nav-links                     { display: flex; }
      nav.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
      nav.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
      nav.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    }

    @media (max-width: 600px) {
      /* Global */
      section             { padding: 3rem 1.25rem; }

      /* Hero */
      .hero               { padding: 5.5rem 0 0; }
      .hero-quote         { font-size: clamp(1.1rem, 5.5vw, 1.4rem); padding: 0.25rem 5vw 1rem; }
      .hero-left          { padding: 0.75rem 1.25rem 2rem; }
      .hero-right         { padding: 1.5rem 1.25rem 2.5rem; border-top: 1px solid rgba(255,255,255,0.08); }
      .hero-pillars       { flex-direction: column; }
      .about-pillar       { align-items: flex-start; }
      .about-pillar-name  { min-width: auto; }

      /* Pillars */
      .pillars-section    { padding: 2rem 1.25rem; }
      .pillars-header     { grid-template-columns: 1fr; gap: 0.5rem; }
      .pillars-header-right { margin-top: 0.5rem; }

      /* Articles */
      .articles-section   { padding-top: 2rem; }
      .articles-grid      { grid-template-columns: 1fr; }
      .article-card       { grid-template-columns: 80px 1fr; }
      .article-card-img   { width: 80px; height: 80px; }

      /* Recent */
      .recent-card        { grid-template-columns: 80px 1fr; }
      .recent-card-img-wrap { aspect-ratio: 1; }

      /* Newsletter */
      .newsletter-section { padding: 2rem 1.25rem; }

      /* Footer */
      .footer-links       { flex-direction: column; gap: 2rem; }
    }

    /* ── Train Principles ── */
    /* ── Calculators index TOC ── */
    .calc-index { display: flex; flex-direction: column; gap: 0; margin-top: 2.5rem; border: 1px solid var(--ash); border-bottom: none; max-width: 680px; }
    .calc-index-item { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--ash); text-decoration: none; transition: background 0.2s; }
    .calc-index-item:hover { background: var(--offblack); }
    .calc-index-num { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 600; color: var(--fire); opacity: 0.7; flex-shrink: 0; padding-top: 0.15rem; }
    .calc-index-title { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--offwhite); margin-bottom: 0.2rem; }
    .calc-index-sub { font-size: 0.78rem; color: var(--muted); }
    @media (max-width: 600px) {
      .calc-index { max-width: 100%; }
      .calc-index-item { padding: 0.9rem 1rem; }
    }
    html[data-theme="light"] .calc-index-item:hover { background: rgba(0,0,0,0.04); }

    .principles-section { padding: 4rem 5vw 3rem; }
    .principles-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--ash);
      border: 1px solid var(--ash);
      margin-top: 3rem;
    }
    .principle-card {
      background: var(--black);
      padding: 2rem 2.25rem;
      transition: background 0.2s;
    }
    .principle-card:hover { background: var(--offblack); }
    .principle-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      font-weight: 600;
      color: var(--train);
      letter-spacing: 0.12em;
      margin-bottom: 0.85rem;
    }
    .principle-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.45rem;
      letter-spacing: 0.04em;
      color: var(--white);
      line-height: 1.15;
      margin-bottom: 0.85rem;
    }
    .principle-body {
      font-size: 0.88rem;
      color: var(--silver);
      line-height: 1.75;
    }
    @media (max-width: 768px) {
      .principles-grid { grid-template-columns: 1fr; }
      .principle-card { padding: 1.5rem; }
    }

    /* ── Weekly Training Planner ── */
    .wtp-section { background: var(--offblack); padding: 4rem 5vw; }
    .wtp-layout { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: start; margin-top: 2rem; }
    .wtp-panel { background: var(--black); border: 1px solid var(--ash); }
    .wtp-field { padding: 0.9rem 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .wtp-field:last-child { border-bottom: none; }
    .wtp-field-label { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--silver); margin-bottom: 0.65rem; display: flex; align-items: center; gap: 0.6rem; }
    .wtp-num { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--train); font-weight: 600; letter-spacing: 0.1em; }
    .wtp-days { display: flex; }
    .wtp-days label { flex: 1; }
    .wtp-days input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
    .wtp-days span { display: block; text-align: center; padding: 0.4rem 0; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--muted); border: 1px solid var(--ash); cursor: pointer; transition: all 0.15s; }
    .wtp-days label + label span { border-left: none; }
    .wtp-days input:checked + span { background: var(--train); color: #fff; border-color: var(--train); }
    .wtp-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--ash); border: 1px solid var(--ash); }
    .wtp-slot { background: var(--black); padding: 1.1rem 0.4rem; text-align: center; }
    .wtp-slot-day { font-family: 'JetBrains Mono', monospace; font-size: 0.52rem; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.5rem; text-transform: uppercase; }
    .wtp-slot-name { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: 0.04em; line-height: 1.1; margin-bottom: 0.4rem; }
    .wtp-slot-sub { font-family: 'JetBrains Mono', monospace; font-size: 0.48rem; color: var(--muted); line-height: 1.5; }
    .wtp-slot--fire  .wtp-slot-name { color: var(--fire); }
    .wtp-slot--train .wtp-slot-name { color: var(--train); }
    .wtp-slot--lead  .wtp-slot-name { color: var(--lead); }
    .wtp-slot--eat   .wtp-slot-name { color: var(--eat); }
    .wtp-slot--muted .wtp-slot-name { color: var(--silver); }
    .wtp-slot--rest  .wtp-slot-name { color: var(--ash); }
    .wtp-note { margin-top: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--ash); border-top: 3px solid var(--train); background: var(--black); }
    .wtp-note p { font-size: 0.85rem; color: var(--silver); line-height: 1.75; margin: 0; }
    @media (max-width: 1024px) { .wtp-layout { grid-template-columns: 1fr; } }
    @media (max-width: 768px) {
      .wtp-week { grid-template-columns: 1fr; gap: 0; }
      .wtp-slot { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.04); }
      .wtp-slot:last-child { border-bottom: none; }
      .wtp-slot-day { width: 2.5rem; flex-shrink: 0; margin-bottom: 0; font-size: 0.6rem; }
      .wtp-slot-name { flex: 1; font-size: 1.1rem; margin-bottom: 0; }
      .wtp-slot-sub { font-size: 0.55rem; }
    }
    html[data-theme="light"] .wtp-field { border-bottom-color: rgba(0,0,0,0.07); }
    html[data-theme="light"] .wtp-note { border-color: var(--ash); border-top-color: var(--train); }

    /* ── Recovery Calculator ── */
    .rc-section { background: var(--offblack); padding: 4rem 5vw; }
    .rc-layout { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: start; margin-top: 2rem; }
    .rc-panel { background: var(--black); border: 1px solid var(--ash); }
    .rc-field { padding: 0.9rem 0.85rem; border-bottom: 1px solid var(--ash); }
    .rc-field-label { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--silver); margin-bottom: 0.65rem; display: flex; align-items: center; gap: 0.6rem; }
    .rc-num { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--train); font-weight: 600; letter-spacing: 0.1em; }
    .rc-result { background: var(--black); border: 1px solid var(--ash); min-height: 280px; display: flex; align-items: stretch; }
    .rc-prompt { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--muted); padding: 2.5rem; line-height: 1.7; align-self: center; }
    .rc-verdict { display: flex; flex-direction: column; justify-content: center; padding: 2.5rem; width: 100%; border-left: 4px solid; }
    .rc-verdict--fire { border-color: var(--fire); }
    .rc-verdict--train { border-color: var(--train); }
    .rc-verdict--rest { border-color: var(--muted); }
    .rc-verdict-label { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; letter-spacing: 0.06em; line-height: 1; margin-bottom: 0.5rem; }
    .rc-verdict--fire .rc-verdict-label { color: var(--fire); }
    .rc-verdict--train .rc-verdict-label { color: var(--train); }
    .rc-verdict--rest .rc-verdict-label { color: var(--muted); }
    .rc-verdict-headline { font-family: 'DM Serif Display', serif; font-style: italic; font-size: 1.25rem; color: var(--white); margin-bottom: 1rem; }
    .rc-verdict-detail { font-size: 0.88rem; color: var(--silver); line-height: 1.75; margin-bottom: 1.25rem; }
    .rc-verdict-protocol { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
    .rc-verdict--fire .rc-verdict-protocol { color: var(--fire); }
    .rc-verdict--train .rc-verdict-protocol { color: var(--train); }
    .rc-verdict--rest .rc-verdict-protocol { color: var(--muted); }
    @media (max-width: 1024px) { .rc-layout { grid-template-columns: 1fr; } }

    /* ── Workout Generator ── */
    .workouts-section { background: var(--offblack); padding: 4rem 5vw; }
    .wg-layout { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: start; margin-top: 2rem; }
    .wg-panel { background: var(--black); border: 1px solid var(--ash); }
    .wg-panel-actions { display: flex; gap: 0.5rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--ash); }
    .wg-panel-action { background: none; border: 1px solid var(--ash); color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; padding: 0.25rem 0.6rem; cursor: pointer; letter-spacing: 0.03em; transition: color 0.15s, border-color 0.15s; }
    .wg-panel-action:hover { color: var(--offwhite); border-color: var(--silver); }
    .wg-setting { border-bottom: 1px solid rgba(255,255,255,0.05); }
    .wg-setting summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.85rem; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--silver); list-style: none; user-select: none; }
    .wg-setting summary::-webkit-details-marker { display: none; }
    .wg-setting summary .wg-num { color: var(--fire); font-size: 0.58rem; min-width: 1rem; opacity: 0.8; }
    .wg-setting[open] > summary { color: var(--offwhite); }
    .wg-setting fieldset { border: none; padding: 0.25rem 0.85rem 0.85rem; margin: 0; }
    .wg-setting legend { display: none; }
    .wg-segmented { display: flex; }
    .wg-segmented label { flex: 1; }
    .wg-segmented input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
    .wg-segmented span { display: block; text-align: center; padding: 0.4rem 0; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--muted); border: 1px solid var(--ash); cursor: pointer; transition: all 0.15s; }
    .wg-segmented label + label span { border-left: none; }
    .wg-segmented input:checked + span { background: var(--fire); color: #fff; border-color: var(--fire); }
    .wg-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
    .wg-choice-grid label { cursor: pointer; }
    .wg-choice-grid input[type="radio"],
    .wg-choice-grid input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
    .wg-choice { display: block; padding: 0.4rem 0.55rem; border: 1px solid var(--ash); transition: all 0.15s; }
    .wg-choice strong { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--silver); font-weight: 600; }
    .wg-choice small { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: var(--muted); margin-top: 0.1rem; line-height: 1.3; }
    .wg-choice-grid input:checked + .wg-choice { border-color: var(--fire); background: rgba(232,93,36,0.08); }
    .wg-choice-grid input:checked + .wg-choice strong { color: var(--fire); }
    .wg-choice-grid input:disabled + .wg-choice { opacity: 0.3; cursor: not-allowed; }
    .wg-focus-tabs { display: flex; margin-bottom: 0.6rem; }
    .wg-focus-tab { flex: 1; padding: 0.38rem 0; background: none; border: 1px solid var(--ash); font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: all 0.15s; }
    .wg-focus-tab + .wg-focus-tab { border-left: none; }
    .wg-focus-tab.active { background: var(--fire); color: #fff; border-color: var(--fire); }
    .wg-focus-tab:not(.active):hover { color: var(--offwhite); border-color: var(--silver); }
    .wg-combo-hint { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--muted); margin: 0 0 0.5rem; }
    .wg-combo-hint #wgComboCount { color: var(--fire); font-weight: 700; }
    .wg-combo-prompt { list-style: none; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--muted); padding: 1.25rem 0.5rem; text-align: center; }
    .wg-pair-tag { display: inline-block; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--ash); color: var(--muted); border-radius: 2px; padding: 1px 5px; margin-left: 0.45rem; vertical-align: middle; }
    .wg-track { display: flex; }
    .wg-track label { flex: 1; }
    .wg-track input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
    .wg-track span { display: block; text-align: center; padding: 0.4rem 0; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--muted); border: 1px solid var(--ash); cursor: pointer; transition: all 0.15s; }
    .wg-track label + label span { border-left: none; }
    .wg-track input:checked + span { background: rgba(232,93,36,0.1); color: var(--fire); border: 1px solid var(--fire); }
    .wg-memory { padding: 0.65rem 0.85rem; border-top: 1px solid rgba(255,255,255,0.04); }
    .wg-remember-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--muted); }
    .wg-remember-label input { accent-color: var(--fire); }
    .wg-card { background: var(--black); border: 1px solid var(--ash); }
    .wg-card-topline { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--ash); }
    .wg-card-meta { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.35rem; }
    .wg-card-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; color: var(--offwhite); letter-spacing: 0.04em; line-height: 1; }
    .wg-card-actions { display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; }
    .wg-refresh-btn { background: none; border: 1px solid var(--ash); color: var(--muted); width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
    .wg-refresh-btn:hover { color: var(--fire); border-color: var(--fire); }
    .wg-refresh-btn svg { width: 0.85rem; height: 0.85rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .wg-duration-badge { background: var(--fire); color: #fff; padding: 0.15rem 0.55rem 0.3rem; text-align: center; line-height: 1; }
    .wg-duration-badge strong { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; }
    .wg-duration-badge span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.52rem; letter-spacing: 0.1em; }
    .wg-format-strip { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--ash); }
    .wg-format-strip > div { padding: 0.7rem 1.5rem; }
    .wg-format-strip > div + div { border-left: 1px solid var(--ash); }
    .wg-format-label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.2rem; }
    .wg-format-val { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--silver); font-weight: 400; }
    .wg-exercises { list-style: none; padding: 0; margin: 0; }
    .wg-exercises li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.7rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.04); align-items: start; }
    .wg-ex-num { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; color: var(--fire); opacity: 0.55; padding-top: 0.1rem; }
    .wg-ex-name { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.73rem; color: var(--offwhite); font-weight: 600; margin-bottom: 0.15rem; }
    .wg-ex-rx { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--fire); margin-bottom: 0.25rem; }
    .wg-ex-cue { font-family: 'JetBrains Mono', monospace; font-size: 0.61rem; color: var(--muted); line-height: 1.55; margin: 0; }
    .wg-coach-note { display: flex; gap: 0.65rem; padding: 0.85rem 1.5rem; background: rgba(232,93,36,0.05); border-top: 1px solid rgba(232,93,36,0.12); }
    .wg-coach-note svg { width: 0.8rem; height: 0.8rem; flex-shrink: 0; stroke: var(--fire); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 0.15rem; }
    .wg-coach-note p { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--silver); line-height: 1.6; margin: 0; }
    .wg-disclaimer { padding: 0.85rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.04); }
    .wg-disclaimer h2 { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.4rem; }
    .wg-disclaimer p { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: var(--muted); line-height: 1.6; margin: 0; }
    @media (max-width: 1024px) { .wg-layout { grid-template-columns: 1fr; } }
    @media (max-width: 600px) {
      .workouts-section { padding: 2rem 1.25rem; }
      .wg-format-strip { grid-template-columns: 1fr; }
      .wg-format-strip > div + div { border-left: none; border-top: 1px solid var(--ash); }
      .wg-card-topline { flex-wrap: wrap; }
    }

    /* ── Cookie Consent Banner ── */
    #cookieBanner {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
      background: var(--coal); border-top: 1px solid var(--ash);
      padding: 1.25rem 2rem;
      display: flex; align-items: center; justify-content: space-between;
      gap: 1.5rem; flex-wrap: wrap;
    }
    #cookieBanner p { color: var(--silver); font-size: 0.875rem; line-height: 1.6; flex: 1; min-width: 200px; }
    #cookieBanner a { color: var(--fire); text-decoration: underline; }
    .cookie-actions { display: flex; gap: 0.75rem; flex-shrink: 0; }
    .cookie-accept {
      background: var(--fire); color: #fff; border: none;
      padding: 0.6rem 1.25rem; border-radius: 4px;
      font-size: 0.875rem; font-weight: 600; cursor: pointer;
    }
    .cookie-decline {
      background: transparent; color: var(--silver);
      border: 1px solid var(--ash); padding: 0.6rem 1.25rem;
      border-radius: 4px; font-size: 0.875rem; cursor: pointer;
    }
    .cookie-accept:hover { background: var(--fire-dim); }
    .cookie-decline:hover { color: var(--white); border-color: var(--silver); }
    @media (max-width: 600px) {
      #cookieBanner { flex-direction: column; align-items: flex-start; padding: 1.25rem 1.5rem; }
      .cookie-actions { width: 100%; }
      .cookie-accept, .cookie-decline { flex: 1; text-align: center; }
    }

    /* ── Nav submenu ── */
    .nav-has-sub { position: relative; }
    .nav-sub { display: none; position: absolute; top: 100%; left: -0.75rem; background: rgba(14,14,14,0.98); border: 1px solid var(--ash); min-width: 180px; z-index: 101; list-style: none; padding: 6px 0 0.25rem; margin-top: 0; }
    .nav-has-sub:hover .nav-sub,
    .nav-has-sub:focus-within .nav-sub { display: block; }
    .nav-sub a { display: block; padding: 0.65rem 1rem; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color 0.2s, background 0.2s; }
    .nav-sub a:hover { color: var(--fire); background: rgba(255,255,255,0.03); }
    /* Nested flyout (desktop only) */
    @media (min-width: 1025px) {
      .nav-sub .nav-has-sub { position: relative; }
      .nav-sub .nav-has-sub > a { display: flex; justify-content: space-between; align-items: center; }
      .nav-sub .nav-has-sub > a::after { content: '›'; color: var(--muted); font-size: 1rem; font-weight: 300; margin-left: 0.75rem; pointer-events: none; }
      .nav-sub .nav-has-sub .nav-sub { display: none; position: absolute; left: 100%; top: -6px; border: 1px solid var(--ash); min-width: 195px; z-index: 102; padding: 6px 0 0.25rem; }
      .nav-sub .nav-has-sub:hover .nav-sub,
      .nav-sub .nav-has-sub:focus-within .nav-sub { display: block; }
    }

    /* Active page nav indicator */
    .nav-links a[aria-current="page"] { color: var(--fire); }

    /* Page-level top padding (fixed nav clearance on inner pages) */
    .page-inner { padding-top: 5.5rem; }

    @media (max-width: 1024px) {
      .nav-has-sub:hover .nav-sub,
      .nav-has-sub:focus-within .nav-sub { display: none; }
      .nav-has-sub .nav-sub { display: none; position: static; background: transparent; border: none; border-left: 2px solid var(--ash); margin: 0 0 0.25rem 1.5rem; padding: 0; }
      .nav-has-sub.open .nav-sub { display: block; }
      .nav-has-sub > a { display: flex; justify-content: space-between; align-items: center; }
      .nav-has-sub > a::after { content: '+'; color: var(--muted); font-size: 0.9rem; font-weight: 300; flex-shrink: 0; margin-left: 0.5rem; pointer-events: none; }
      .nav-has-sub.open > a::after { content: '−'; color: var(--fire); }
      .nav-has-sub .nav-sub a { padding: 0.45rem 0.85rem; font-size: 0.68rem; color: var(--muted); }
      .nav-has-sub .nav-sub a:hover { color: var(--fire); background: transparent; }
      /* Nested sub on mobile — indent one more level */
      .nav-sub .nav-has-sub .nav-sub { margin-left: 2.5rem; }
    }

    /* ── Training FAQ ── */
    .faq-section { padding: 4rem 5vw; }
    .faq-list { margin-top: 3rem; border: 1px solid var(--ash); border-bottom: none; max-width: 860px; }
    .faq-item { border-bottom: 1px solid var(--ash); }
    .faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 600; color: var(--offwhite); transition: color 0.2s; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: '+'; font-size: 1.2rem; color: var(--fire); flex-shrink: 0; line-height: 1; }
    .faq-item[open] > summary { color: var(--fire); }
    .faq-item[open] > summary::after { content: '−'; }
    .faq-answer { padding: 0 1.5rem 1.5rem 1.5rem; }
    .faq-answer p { font-size: 0.9rem; color: var(--silver); line-height: 1.8; }
    .faq-answer p + p { margin-top: 0.75rem; }

    /* ── 1RM Calculator ── */
    .orm-section { padding: 4rem 5vw; }
    .orm-layout { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: start; margin-top: 2rem; }
    .orm-panel { background: var(--black); border: 1px solid var(--ash); }
    .orm-field { padding: 0.9rem 0.85rem; border-bottom: 1px solid var(--ash); }
    .orm-field:last-child { border-bottom: none; }
    .orm-field-label { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--silver); margin-bottom: 0.65rem; display: flex; align-items: center; gap: 0.6rem; }
    .orm-num { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--train); font-weight: 600; letter-spacing: 0.1em; }
    .orm-weight-row { display: flex; align-items: stretch; gap: 0; }
    .orm-weight-input { flex: 1; background: var(--coal); border: 1px solid var(--ash); border-right: none; color: var(--offwhite); font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; padding: 0.5rem 0.75rem; min-width: 0; outline: none; -moz-appearance: textfield; }
    .orm-weight-input::-webkit-outer-spin-button, .orm-weight-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .orm-weight-input:focus { border-color: var(--train); }
    .orm-unit-toggle { display: flex; }
    .orm-unit { background: var(--coal); border: 1px solid var(--ash); color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; padding: 0 0.75rem; cursor: pointer; transition: all 0.15s; }
    .orm-unit + .orm-unit { border-left: none; }
    .orm-unit.active { background: var(--train); border-color: var(--train); color: #fff; }
    .orm-unit:hover:not(.active) { color: var(--train); }
    .orm-result { background: var(--black); border: 1px solid var(--ash); }
    .orm-headline { padding: 1.5rem; border-bottom: 1px solid var(--ash); }
    .orm-headline-label { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.4rem; }
    .orm-headline-num { font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; color: var(--train); line-height: 1; }
    .orm-headline-num span { font-size: 1.5rem; }
    .orm-headline-note { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: var(--muted); margin-top: 0.4rem; }
    .orm-table-wrap { overflow-x: auto; }
    .orm-table { width: 100%; border-collapse: collapse; }
    .orm-table th { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.6rem 1rem; text-align: left; border-bottom: 1px solid var(--ash); }
    .orm-table td { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--silver); padding: 0.55rem 1rem; border-bottom: 1px solid var(--ash); }
    .orm-table tbody tr:last-child td { border-bottom: none; }
    .orm-table tbody tr:hover { background: var(--coal); }
    .orm-td-pct { color: var(--train); font-weight: 600; }
    .orm-td-weight { color: var(--offwhite); font-weight: 600; }
    .orm-row-max td { background: rgba(232,93,36,0.06); }
    .orm-row-max .orm-td-pct, .orm-row-max .orm-td-weight, .orm-row-max .orm-td-reps { color: var(--fire); }
    @media (max-width: 1024px) { .orm-layout { grid-template-columns: 1fr; } }

    /* ── Heart Rate Zones ── */
    .hrz-section { background: var(--offblack); padding: 4rem 5vw; }
    .hrz-layout { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: start; margin-top: 2rem; }
    .hrz-panel { background: var(--black); border: 1px solid var(--ash); }
    .hrz-field { padding: 0.9rem 0.85rem; border-bottom: 1px solid var(--ash); }
    .hrz-field-label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--silver); margin-bottom: 0.65rem; }
    .hrz-field-label small { display: block; color: var(--muted); font-size: 0.6rem; margin-top: 0.2rem; line-height: 1.5; font-style: normal; }
    .hrz-num { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--train); font-weight: 600; letter-spacing: 0.1em; margin-right: 0.4rem; }
    .hrz-input { width: 100%; background: var(--coal); border: 1px solid var(--ash); color: var(--offwhite); font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; padding: 0.5rem 0.75rem; outline: none; box-sizing: border-box; -moz-appearance: textfield; }
    .hrz-input::-webkit-outer-spin-button, .hrz-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .hrz-input:focus { border-color: var(--train); }
    .hrz-note { padding: 0.9rem 0.85rem; }
    .hrz-note p { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--muted); line-height: 1.7; }
    .hrz-result { background: var(--black); border: 1px solid var(--ash); }
    .hrz-header { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1rem; border-bottom: 1px solid var(--ash); }
    .hrz-header span { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--muted); }
    .hrz-header strong { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--offwhite); }
    .hrz-zone { display: flex; align-items: stretch; border-bottom: 1px solid var(--ash); }
    .hrz-zone:last-child { border-bottom: none; }
    .hrz-zone-bar { width: 4px; flex-shrink: 0; }
    .hrz-zone-body { padding: 0.8rem 1rem; flex: 1; }
    .hrz-zone-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
    .hrz-zone-num { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 600; color: var(--muted); }
    .hrz-zone-name { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 600; color: var(--offwhite); }
    .hrz-zone-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: var(--coal); color: var(--fire); border: 1px solid var(--fire); padding: 0.1rem 0.35rem; }
    .hrz-zone-bpm { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 600; color: var(--offwhite); }
    .hrz-zone-desc { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--muted); line-height: 1.65; }
    .hrz-prompt { padding: 2rem 1.5rem; }
    .hrz-prompt p { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--muted); line-height: 1.7; }
    @media (max-width: 1024px) { .hrz-layout { grid-template-columns: 1fr; } }

    /* ── Body Composition ── */
    .bf-section { padding: 4rem 5vw; }
    .bf-layout { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: start; margin-top: 2rem; }
    .bf-panel { background: var(--black); border: 1px solid var(--ash); }
    .bf-field { padding: 0.9rem 0.85rem; border-bottom: 1px solid var(--ash); }
    .bf-field-label { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--silver); margin-bottom: 0.65rem; }
    .bf-inputs { padding: 0.9rem 0.85rem; display: flex; flex-direction: column; gap: 0.75rem; }
    .bf-input-row { display: flex; flex-direction: column; gap: 0.3rem; }
    .bf-input-label { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--silver); display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
    .bf-input-label small { color: var(--muted); font-size: 0.58rem; }
    .bf-unit-label { color: var(--train); }
    .bf-input { width: 100%; background: var(--coal); border: 1px solid var(--ash); color: var(--offwhite); font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; padding: 0.4rem 0.6rem; outline: none; box-sizing: border-box; -moz-appearance: textfield; }
    .bf-input::-webkit-outer-spin-button, .bf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .bf-input:focus { border-color: var(--train); }
    .bf-result { background: var(--black); border: 1px solid var(--ash); min-height: 280px; display: flex; }
    .bf-prompt { padding: 2rem 1.5rem; align-self: center; }
    .bf-prompt p { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--muted); line-height: 1.7; }
    .bf-cards { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .bf-card { padding: 2rem 1.5rem; border-right: 1px solid var(--ash); }
    .bf-card:last-child { border-right: none; }
    .bf-card-label { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
    .bf-card-num { font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; color: var(--train); line-height: 1; margin-bottom: 0.2rem; }
    .bf-card-cat { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--offwhite); margin-bottom: 1.25rem; }
    .bf-mass-row { display: flex; gap: 1.25rem; }
    .bf-mass { display: flex; flex-direction: column; gap: 0.15rem; }
    .bf-mass span { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; font-weight: 600; color: var(--offwhite); }
    .bf-mass small { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: var(--muted); }
    .bf-bmi-caveat { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--muted); line-height: 1.7; margin-top: 0.5rem; }
    @media (max-width: 1024px) { .bf-layout { grid-template-columns: 1fr; } .bf-cards { grid-template-columns: 1fr; } .bf-card { border-right: none; border-bottom: 1px solid var(--ash); } .bf-card:last-child { border-bottom: none; } }

    /* ── Exercise Demo Modal ── */
    .ex-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; padding: 1rem; box-sizing: border-box; }
    .ex-modal-overlay.open { opacity: 1; pointer-events: all; }
    .ex-modal { background: var(--black); border: 1px solid var(--ash); max-width: 540px; width: 100%; position: relative; padding: 2rem 1.5rem 1.5rem; }
    .ex-modal-close { position: absolute; top: 0.65rem; right: 0.75rem; background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0.2rem 0.4rem; transition: color 0.15s; }
    .ex-modal-close:hover { color: var(--offwhite); }
    .ex-modal-img { width: 100%; max-height: 65vh; object-fit: contain; display: block; margin-bottom: 0.75rem; }
    .ex-modal-caption { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 600; color: var(--offwhite); }
    .ex-modal-missing { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--muted); margin-bottom: 0.75rem; font-style: italic; }

    /* ── Show me how button ── */
    .ex-show-btn { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: none; color: var(--train); font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; padding: 0; margin-top: 0.6rem; transition: color 0.15s; }
    .ex-show-btn:hover { color: var(--offwhite); }

    /* ── Nav logo image ── */
    .nav-logo { display: flex; align-items: center; gap: 0.6rem; }
    .nav-logo-img { height: 2rem; width: auto; display: block; flex-shrink: 0; }
    .nav-logo-img-dark  { display: block; }
    .nav-logo-img-light { display: none; }
    html[data-theme="light"] .nav-logo-img-dark  { display: none; }
    html[data-theme="light"] .nav-logo-img-light { display: block; }

    /* ── Theme toggle button ── */
    .nav-theme-toggle {
      background: none;
      border: 1px solid var(--ash);
      color: var(--silver);
      cursor: pointer;
      width: 1.75rem;
      height: 1.75rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-right: 0.75rem;
      padding: 0;
      transition: color 0.2s, border-color 0.2s;
    }
    .nav-theme-toggle:hover { color: var(--fire); border-color: var(--fire); }
    .nav-theme-toggle svg { width: 0.85rem; height: 0.85rem; }
    .icon-sun  { display: block; }
    .icon-moon { display: none; }
    html[data-theme="light"] .icon-sun  { display: none; }
    html[data-theme="light"] .icon-moon { display: block; }

    /* ── Light theme ── */
    html[data-theme="light"] {
      --black:    #F5F2EC;
      --offblack: #EEEAE1;
      --coal:     #E4DFD4;
      --ash:      #CEC7B8;
      --muted:    #8A8178;
      --silver:   #5A534B;
      --offwhite: #1A1714;
      --white:    #0E0B08;
      --fire:     #E85D24;
      --fire-dim: #C44D1C;
      --eat:      #BA7517;
      --train:    #185FA5;
      --lead:     #533FB7;
    }
    html[data-theme="light"] nav {
      background: linear-gradient(to bottom, rgba(245,242,236,0.98) 0%, transparent 100%);
    }
    html[data-theme="light"] nav.scrolled {
      background: rgba(245,242,236,0.97);
    }
    html[data-theme="light"] .hero-grid-lines {
      background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    }
    html[data-theme="light"] .about-pillar {
      border-left-color: rgba(0,0,0,0.1);
    }
    html[data-theme="light"] .pillar-card { background: rgba(0,0,0,0.02); }
    html[data-theme="light"] .pillar-card:hover { background: rgba(0,0,0,0.05); }
    html[data-theme="light"] .pillar-deep:hover { background: rgba(0,0,0,0.03); }
    html[data-theme="light"] .nav-sub { background: rgba(245,242,236,0.99); }
    html[data-theme="light"] .nav-sub a:hover { background: rgba(0,0,0,0.04); }
    html[data-theme="light"] .wg-setting { border-bottom-color: rgba(0,0,0,0.08); }
    html[data-theme="light"] .wg-memory { border-top-color: rgba(0,0,0,0.07); }
    html[data-theme="light"] .wg-exercises li { border-bottom-color: rgba(0,0,0,0.07); }
    html[data-theme="light"] .wg-disclaimer { border-top-color: rgba(0,0,0,0.07); }
    @media (max-width: 1024px) {
      html[data-theme="light"] .hero-right { border-top-color: rgba(0,0,0,0.1); }
      html[data-theme="light"] .nav-links { background: rgba(245,242,236,0.98); }
      html[data-theme="light"] .nav-links li + li { border-top-color: rgba(0,0,0,0.07); }
    }
    @media (max-width: 600px) {
      html[data-theme="light"] .hero-right { border-top-color: rgba(0,0,0,0.1); }
    }

    /* ── Pillar-specific principle accents ── */
    .eat-principles .principle-num  { color: var(--eat); }
    .lead-principles .principle-num { color: var(--lead); }

    /* ── Leadership Prompt of the Day ── */
    .lp-section { background: var(--offblack); padding: 4rem 5vw; }

    .lp-card {
      margin-top: 2rem;
      border-left: 4px solid var(--lead);
      padding: 2.5rem 2.5rem 2rem;
      background: var(--black);
      max-width: 820px;
    }

    .lp-card-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--lead);
      margin-bottom: 1.5rem;
    }

    .lp-prompt {
      font-family: 'DM Serif Display', serif;
      font-style: italic;
      font-size: 1.55rem;
      color: var(--white);
      line-height: 1.5;
      margin: 0 0 2rem;
    }

    .lp-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid var(--ash);
      padding-top: 1.25rem;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .lp-counter {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      color: var(--muted);
    }

    .lp-nav { display: flex; gap: 0.5rem; }

    .lp-btn {
      padding: 0.45rem 1rem;
      border: 1px solid var(--ash);
      background: transparent;
      color: var(--silver);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
    }
    .lp-btn:hover { border-color: var(--lead); color: var(--lead); }
    .lp-btn--primary { background: var(--lead); border-color: var(--lead); color: #fff; }
    .lp-btn--primary:hover { background: var(--lead); opacity: 0.88; color: #fff; }

    /* ── Weekly Review Generator ── */
    .wr-section { padding: 4rem 5vw; }

    .wr-form {
      margin-top: 2rem;
      max-width: 760px;
    }

    .wr-group { margin-bottom: 2.5rem; }

    .wr-group-label {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.1rem;
      letter-spacing: 0.1em;
      color: var(--lead);
      border-bottom: 1px solid var(--ash);
      padding-bottom: 0.5rem;
      margin-bottom: 1.25rem;
    }

    .wr-question { margin-bottom: 1.25rem; }

    .wr-q-label {
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.74rem;
      font-weight: 600;
      color: var(--offwhite);
      line-height: 1.55;
      margin-bottom: 0.5rem;
    }

    .wr-input {
      width: 100%;
      padding: 0.75rem 1rem;
      background: var(--coal);
      border: 1px solid var(--ash);
      border-left: 3px solid var(--ash);
      color: var(--white);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.88rem;
      line-height: 1.7;
      resize: vertical;
      outline: none;
      transition: border-color 0.15s;
    }
    .wr-input:focus { border-color: var(--lead); border-left-color: var(--lead); }
    .wr-input::placeholder { color: var(--muted); font-style: italic; }

    .wr-actions {
      display: flex;
      gap: 0.75rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--ash);
      margin-top: 0.5rem;
    }

    .wr-copy {
      padding: 0.65rem 1.75rem;
      background: var(--lead);
      border: 1px solid var(--lead);
      color: #fff;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      cursor: pointer;
      transition: opacity 0.15s;
    }
    .wr-copy:hover { opacity: 0.88; }

    .wr-reset {
      padding: 0.65rem 1.25rem;
      background: transparent;
      border: 1px solid var(--ash);
      color: var(--muted);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.74rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
    }
    .wr-reset:hover { border-color: var(--fire); color: var(--fire); }

    /* ── Macro Calculator ── */
    .mc-section { background: var(--offblack); padding: 4rem 5vw; }

    .mc-layout {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 2rem;
      align-items: start;
      margin-top: 2rem;
    }

    .mc-field { margin-bottom: 1.75rem; }
    .mc-field:last-child { margin-bottom: 0; }

    .mc-field-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.6rem;
    }

    .mc-weight-row { display: flex; align-items: stretch; gap: 0; }

    .mc-weight-input {
      width: 110px;
      padding: 0.65rem 0.75rem;
      background: var(--black);
      border: 1px solid var(--ash);
      border-right: none;
      color: var(--white);
      font-family: 'JetBrains Mono', monospace;
      font-size: 1.1rem;
      font-weight: 600;
      outline: none;
      -moz-appearance: textfield;
    }
    .mc-weight-input::-webkit-outer-spin-button,
    .mc-weight-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .mc-weight-input:focus { border-color: var(--eat); }

    .mc-unit-toggle { display: flex; }

    .mc-unit {
      padding: 0 0.85rem;
      border: 1px solid var(--ash);
      border-left: none;
      background: transparent;
      color: var(--muted);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .mc-unit.active { background: var(--eat); border-color: var(--eat); color: #fff; }
    .mc-unit:hover:not(.active) { color: var(--eat); }

    .mc-options { display: flex; flex-direction: column; gap: 2px; }

    .mc-option {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.6rem 0.85rem;
      border: 1px solid var(--ash);
      border-left: 3px solid transparent;
      background: var(--black);
      cursor: pointer;
      transition: background 0.15s;
    }
    .mc-option:hover { background: var(--coal); }
    .mc-option:has(input:checked) { background: var(--coal); border-left-color: var(--eat); }
    .mc-option input[type="radio"] { display: none; }

    .mc-option-text { display: flex; flex-direction: column; gap: 0.1rem; }

    .mc-option-name {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.74rem;
      font-weight: 600;
      color: var(--offwhite);
      transition: color 0.15s;
    }
    .mc-option:has(input:checked) .mc-option-name { color: var(--eat); }

    .mc-option-sub { font-size: 0.78rem; color: var(--muted); }

    .mc-result { min-height: 240px; }

    .mc-verdict {
      border-left: 4px solid var(--eat);
      padding: 2rem 2.25rem;
      background: var(--black);
    }

    .mc-verdict-goal {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      color: var(--eat);
      margin-bottom: 1.5rem;
    }

    .mc-macros {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--ash);
      border: 1px solid var(--ash);
      margin-bottom: 1.5rem;
    }

    .mc-macro { background: var(--coal); padding: 1.25rem 1rem; text-align: center; }

    .mc-macro-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2.6rem;
      color: var(--white);
      line-height: 1;
    }
    .mc-macro-num--protein { color: var(--eat); }
    .mc-macro-num--fat { color: var(--silver); }

    .mc-macro-unit { font-size: 1.1rem; }

    .mc-macro-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.57rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 0.4rem;
    }

    .mc-verdict-note {
      font-size: 0.88rem;
      color: var(--silver);
      line-height: 1.75;
      margin-bottom: 0.85rem;
    }

    .mc-no-carbs {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      color: var(--muted);
      border-top: 1px solid var(--ash);
      padding-top: 0.75rem;
    }

    .mc-remember-field {
      margin-top: 1.5rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--ash);
    }

    .mc-remember-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      cursor: pointer;
    }

    .mc-remember-toggle input[type="checkbox"] {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
      accent-color: var(--eat);
      cursor: pointer;
    }

    .mc-remember-text {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      color: var(--silver);
      line-height: 1.4;
    }

    .mc-disclaimer {
      margin-top: 1.5rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6rem;
      color: var(--muted);
      line-height: 1.8;
      border-top: 1px solid var(--ash);
      padding-top: 1rem;
      max-width: 700px;
    }

    @media (max-width: 900px) {
      .mc-layout { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .mc-macros { grid-template-columns: 1fr; }
    }

    /* ── Ingredient Stack ── */
    .is-section { padding: 4rem 5vw; }

    .is-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-top: 2rem;
      margin-bottom: 1.5rem;
    }

    .is-chip {
      padding: 0.3rem 0.8rem;
      border: 1px solid var(--ash);
      background: transparent;
      color: var(--silver);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      cursor: pointer;
      transition: all 0.15s;
    }
    .is-chip:hover { border-color: var(--eat); color: var(--eat); }
    .is-chip.active { background: var(--eat); border-color: var(--eat); color: #fff; }

    .is-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
      gap: 1px;
      background: var(--ash);
      border: 1px solid var(--ash);
    }

    .is-card {
      background: var(--black);
      padding: 1.4rem 1.5rem;
      transition: background 0.15s;
      display: flex;
      flex-direction: column;
    }
    .is-card:hover { background: var(--offblack); }
    .is-card[hidden] { display: none; }
    .is-supplement-notice { grid-column: 1 / -1; background: transparent; padding: 0.75rem 1.5rem; }
    .is-supplement-notice:hover { background: transparent; }

    .is-tag {
      display: inline-block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.55rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 0.18rem 0.5rem;
      border: 1px solid;
      margin-bottom: 0.7rem;
    }

    .is-card[data-cat="protein"] .is-tag { color: var(--eat);   border-color: var(--eat); }
    .is-card[data-cat="fat"]     .is-tag { color: var(--fire);  border-color: var(--fire); }
    .is-card[data-cat="veg"]     .is-tag { color: #4A8C5C;      border-color: #4A8C5C; }
    .is-card[data-cat="supplement"] .is-tag { color: var(--train); border-color: var(--train); }
    .is-card[data-cat="pantry"]  .is-tag { color: var(--muted); border-color: var(--muted); }

    .is-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.1rem;
      color: var(--white);
      line-height: 1.2;
      margin-bottom: 0.45rem;
    }

    .is-why {
      font-size: 0.82rem;
      color: var(--silver);
      line-height: 1.65;
    }

    .is-try {
      display: inline-block;
      align-self: flex-start;
      margin-top: auto;
      padding-top: 0.6rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.58rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--train);
      border-bottom: 1px solid var(--train);
      text-decoration: none;
      transition: color 0.15s, border-color 0.15s;
    }
    .is-try:hover { color: var(--white); border-color: var(--white); }

    .is-affiliate-note {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6rem;
      color: var(--muted);
      line-height: 1.7;
      padding: 0.9rem 1.1rem;
      border-left: 2px solid var(--ash);
      margin-top: 2rem;
    }

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

    /* ── Movement Library ── */
    .ml-section { padding: 4rem 5vw; }

    .ml-controls { margin-top: 2rem; }

    .ml-search {
      flex: 1;
      min-width: 0;
      max-width: 480px;
      padding: 0.3rem 0.75rem;
      background: var(--coal);
      border: 1px solid var(--ash);
      color: var(--white);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      outline: none;
    }
    .ml-search:focus { border-color: var(--fire); }
    .ml-search::placeholder { color: var(--muted); }

    .ml-filter-row {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 0.75rem;
    }

    .ml-filter-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      padding-top: 0.45rem;
      white-space: nowrap;
      min-width: 72px;
    }

    .ml-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

    .ml-chip {
      padding: 0.3rem 0.75rem;
      border: 1px solid var(--ash);
      background: transparent;
      color: var(--silver);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
    }
    .ml-chip:hover { border-color: var(--fire); color: var(--fire); }
    .ml-chip.active { background: var(--fire); border-color: var(--fire); color: #fff; }

    .ml-count {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      color: var(--muted);
      margin: 1.25rem 0 1rem;
    }

    .ml-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1px;
      background: var(--ash);
      border: 1px solid var(--ash);
    }

    .ml-card {
      background: var(--black);
      padding: 1.4rem 1.5rem;
      transition: background 0.15s;
      display: flex;
      flex-direction: column;
    }
    .ml-card .ex-show-btn { margin-top: auto; padding-top: 0.6rem; }
    .ml-card:hover { background: var(--offblack); }

    .ml-card-tags {
      display: flex;
      gap: 0.4rem;
      margin-bottom: 0.75rem;
      flex-wrap: wrap;
    }

    .ml-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.55rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.18rem 0.5rem;
    }
    .ml-tag--equip { background: var(--coal); color: var(--muted); border: 1px solid var(--ash); }
    .ml-tag--focus { background: var(--coal); color: var(--train); border: 1px solid var(--train); }

    .ml-card-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.15rem;
      color: var(--white);
      line-height: 1.2;
      margin-bottom: 0.4rem;
    }

    .ml-card-rx {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      color: var(--fire);
      font-weight: 600;
      margin-bottom: 0.65rem;
    }

    .ml-card-cue {
      font-size: 0.82rem;
      color: var(--silver);
      line-height: 1.65;
    }

    .ml-empty {
      grid-column: 1 / -1;
      padding: 3rem;
      text-align: center;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.78rem;
      color: var(--muted);
      background: var(--black);
    }

    @media (max-width: 860px) {
      .ml-filter-row { flex-direction: column; gap: 0.4rem; }
      .ml-filter-label { padding-top: 0; }
    }
    @media (max-width: 600px) {
      .ml-grid { grid-template-columns: 1fr; }
    }

    html[data-theme="light"] .ml-search { background: var(--coal); border-color: var(--ash); }
    html[data-theme="light"] .ml-chip { border-color: var(--ash); color: var(--silver); }
    html[data-theme="light"] .ml-chip:hover { border-color: var(--fire); color: var(--fire); }
    html[data-theme="light"] .ml-tag--equip { background: var(--coal); border-color: var(--ash); }
    html[data-theme="light"] .ml-tag--focus { background: var(--coal); border-color: var(--train); }
    html[data-theme="light"] .ml-card { background: var(--black); }
    html[data-theme="light"] .ml-card:hover { background: var(--offblack); }
    html[data-theme="light"] .ml-grid { background: var(--ash); border-color: var(--ash); }

    /* ── Keto page disclaimer banner ── */
    .keto-disclaimer {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      margin: 0 5vw;
      padding: 1rem 1.25rem;
      border: 1px solid rgba(186,117,23,0.3);
      border-left: 3px solid var(--eat);
      border-radius: 4px;
      background: rgba(186,117,23,0.05);
    }

    .keto-disclaimer-label {
      font-family: var(--mono);
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--eat);
      white-space: nowrap;
      padding-top: 0.1rem;
    }

    .keto-disclaimer p {
      font-family: var(--mono);
      font-size: 0.65rem;
      color: var(--muted);
      line-height: 1.8;
      margin: 0;
    }

    html[data-theme="light"] .keto-disclaimer {
      background: rgba(186,117,23,0.04);
      border-color: rgba(186,117,23,0.25);
      border-left-color: var(--eat);
    }

    /* ── Shared library section header ── */
    .section-label {
      font-family: var(--bebas);
      font-size: 2rem;
      letter-spacing: 0.06em;
      color: var(--white);
      margin: 0 0 0.5rem;
    }
    .section-intro {
      font-family: var(--sans);
      font-size: 0.92rem;
      color: var(--silver);
      line-height: 1.6;
      max-width: 640px;
      margin: 0 0 1.5rem;
    }

    /* ═══════════════════════════════════════════
       KETO PAGE — Recipe Cards & Library
    ═══════════════════════════════════════════ */

    .kr-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1.25rem;
      margin-top: 1.5rem;
    }

    .kr-card {
      background: var(--offblack);
      border: 1px solid var(--coal);
      border-radius: 6px;
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      transition: border-color 0.2s, transform 0.2s;
    }
    .kr-card:hover {
      border-color: var(--eat);
      transform: translateY(-2px);
    }

    .kr-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }

    .kr-tag {
      font-family: var(--mono);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.2rem 0.5rem;
      border-radius: 3px;
      border: 1px solid transparent;
    }
    .kr-tag--meal  { background: rgba(186,117,23,0.15); border-color: var(--eat); color: var(--eat); }
    .kr-tag--time  { background: rgba(255,255,255,0.04); border-color: var(--coal); color: var(--silver); }
    .kr-tag--method{ background: rgba(255,255,255,0.04); border-color: var(--coal); color: var(--muted); }

    .kr-card-name {
      font-family: var(--bebas);
      font-size: 1.3rem;
      letter-spacing: 0.04em;
      color: var(--white);
      line-height: 1.1;
    }

    .kr-card-desc {
      font-family: var(--sans);
      font-size: 0.82rem;
      color: var(--silver);
      line-height: 1.55;
      flex: 1;
    }

    .kr-macros {
      display: flex;
      gap: 0.6rem;
      flex-wrap: wrap;
    }

    .kr-macro {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--coal);
      border-radius: 4px;
      padding: 0.35rem 0.6rem;
      min-width: 52px;
    }
    .kr-macro--fat     { border-color: var(--eat); }
    .kr-macro--protein { border-color: var(--train); }

    .kr-macro-val {
      font-family: var(--mono);
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--white);
    }
    .kr-macro--fat     .kr-macro-val { color: var(--eat); }
    .kr-macro--protein .kr-macro-val { color: var(--train); }

    .kr-macro-label {
      font-family: var(--mono);
      font-size: 0.55rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 0.1rem;
    }

    .kr-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: auto;
      padding-top: 0.5rem;
      border-top: 1px solid var(--coal);
    }

    .kr-serves {
      font-family: var(--mono);
      font-size: 0.7rem;
      color: var(--muted);
    }

    .kr-show-btn {
      font-family: var(--mono);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--eat);
      background: none;
      border: 1px solid var(--eat);
      border-radius: 3px;
      padding: 0.3rem 0.7rem;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .kr-show-btn:hover {
      background: var(--eat);
      color: var(--white);
    }

    .kr-sort {
      font-family: var(--mono);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      background: transparent;
      border: 1px solid var(--ash);
      border-radius: 0;
      color: var(--silver);
      padding: 0.3rem 2rem 0.3rem 0.75rem;
      cursor: pointer;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.65rem center;
      transition: border-color 0.15s, color 0.15s;
    }
    .kr-sort:hover { border-color: var(--fire); color: var(--white); }
    .kr-sort:focus { border-color: var(--eat); color: var(--white); }

    /* ── Recipe Modal ── */

    .kr-modal {
      background: var(--offblack);
      border: 1px solid var(--coal);
      border-radius: 8px;
      width: min(680px, 94vw);
      max-height: 88vh;
      overflow-y: auto;
      position: relative;
      padding: 2rem 2rem 2.5rem;
    }

    .kr-modal-body { display: flex; flex-direction: column; gap: 1.25rem; }

    .kr-modal-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }

    .kr-modal-title {
      font-family: var(--bebas);
      font-size: 2rem;
      letter-spacing: 0.05em;
      color: var(--white);
      line-height: 1.05;
    }

    .kr-modal-desc {
      font-family: var(--serif);
      font-style: italic;
      font-size: 1rem;
      color: var(--silver);
      line-height: 1.6;
    }

    .kr-modal-macros {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .kr-modal-macro {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--coal);
      border-radius: 5px;
      padding: 0.6rem 1rem;
      min-width: 64px;
    }
    .kr-modal-macro--fat     { border-color: var(--eat); }
    .kr-modal-macro--protein { border-color: var(--train); }

    .kr-modal-macro-val {
      font-family: var(--mono);
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--white);
    }
    .kr-modal-macro--fat     .kr-modal-macro-val { color: var(--eat); }
    .kr-modal-macro--protein .kr-modal-macro-val { color: var(--train); }

    .kr-modal-macro-label {
      font-family: var(--mono);
      font-size: 0.6rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 0.15rem;
    }

    .kr-modal-serves {
      font-family: var(--mono);
      font-size: 0.72rem;
      color: var(--muted);
    }

    .kr-modal-section { display: flex; flex-direction: column; gap: 0.5rem; }

    .kr-modal-section h4 {
      font-family: var(--mono);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--eat);
      margin: 0;
    }

    .kr-modal-section ul,
    .kr-modal-section ol {
      margin: 0;
      padding-left: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }

    .kr-modal-section li {
      font-family: var(--sans);
      font-size: 0.85rem;
      color: var(--silver);
      line-height: 1.5;
    }

    .kr-modal-notes {
      font-family: var(--mono);
      font-size: 0.75rem;
      color: var(--muted);
      background: rgba(186,117,23,0.07);
      border-left: 3px solid var(--eat);
      padding: 0.6rem 0.9rem;
      border-radius: 0 4px 4px 0;
      line-height: 1.55;
    }

    /* ═══════════════════════════════════════════
       KETO PAGE — Recipe Generator
    ═══════════════════════════════════════════ */

    .kgen-section {
      padding: 4rem 5vw;
    }

    .kgen-layout {
      display: grid;
      grid-template-columns: 340px minmax(0, 580px);
      gap: 2rem;
      margin-top: 2.5rem;
      align-items: start;
    }

    .kgen-panel {
      background: var(--offblack);
      border: 1px solid var(--coal);
      border-radius: 8px;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .kgen-result-wrap {
      background: var(--offblack);
      border: 1px solid var(--coal);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
    }

    .kgen-result-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.75rem 1.25rem;
      border-bottom: 1px solid var(--coal);
    }

    .kgen-result-meta {
      font-family: var(--mono);
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .kgen-result {
      min-height: 260px;
      padding: 1.75rem;
      display: flex;
      flex-direction: column;
    }

    .kgen-no-match {
      font-family: var(--mono);
      font-size: 0.82rem;
      color: var(--muted);
      text-align: center;
    }

    /* Single recipe result */
    .kgen-recipe {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .kgen-recipe-header { display: flex; flex-direction: column; gap: 0.5rem; }

    .kgen-recipe-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }

    .kgen-recipe-name {
      font-family: var(--bebas);
      font-size: 1.8rem;
      letter-spacing: 0.05em;
      color: var(--white);
      line-height: 1.05;
    }

    .kgen-recipe-desc {
      font-family: var(--serif);
      font-style: italic;
      font-size: 0.95rem;
      color: var(--silver);
      line-height: 1.6;
    }

    .kgen-recipe-full-btn {
      align-self: flex-start;
      font-family: var(--mono);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--eat);
      background: none;
      border: 1px solid var(--eat);
      border-radius: 3px;
      padding: 0.35rem 0.8rem;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .kgen-recipe-full-btn:hover {
      background: var(--eat);
      color: var(--white);
    }

    /* Full-day plan result */
    .kgen-plan {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .kgen-plan-totals {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--coal);
    }

    .kgen-plan-total-label {
      font-family: var(--mono);
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .kgen-plan-total-macros {
      display: flex;
      gap: 0.6rem;
      flex-wrap: wrap;
    }

    .kgen-plan-meal {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      padding: 1rem;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--coal);
      border-radius: 5px;
    }

    .kgen-plan-meal-label {
      font-family: var(--mono);
      font-size: 0.6rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--eat);
    }

    .kgen-plan-meal-name {
      font-family: var(--bebas);
      font-size: 1.25rem;
      letter-spacing: 0.04em;
      color: var(--white);
    }

    .kgen-plan-meal-meta {
      display: flex;
      gap: 0.4rem;
      flex-wrap: wrap;
    }

    .kgen-plan-meal-desc {
      font-family: var(--sans);
      font-size: 0.8rem;
      color: var(--silver);
      line-height: 1.5;
    }

    .kgen-plan-meal-macros {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-top: 0.25rem;
    }

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

    @media (max-width: 600px) {
      .kr-grid { grid-template-columns: 1fr; }
      .kr-modal { padding: 1.25rem 1rem 2rem; }
      .kr-modal-title { font-size: 1.5rem; }
    }

    /* Light theme overrides */
    html[data-theme="light"] .kr-card          { background: var(--black); border-color: var(--ash); }
    html[data-theme="light"] .kr-card:hover    { border-color: var(--eat); }
    html[data-theme="light"] .kr-macro         { background: rgba(0,0,0,0.04); border-color: var(--ash); }
    html[data-theme="light"] .kr-sort { background: transparent; border-color: var(--ash); color: var(--coal); }
    html[data-theme="light"] .kr-modal         { background: var(--black); border-color: var(--ash); }
    html[data-theme="light"] .kr-modal-macro   { background: rgba(0,0,0,0.04); border-color: var(--ash); }
    html[data-theme="light"] .kr-modal-notes   { background: rgba(186,117,23,0.06); }
    html[data-theme="light"] .kgen-panel       { background: var(--black); border-color: var(--ash); }
    html[data-theme="light"] .kgen-result      { background: var(--black); border-color: var(--ash); }
    html[data-theme="light"] .kgen-plan-meal   { background: rgba(0,0,0,0.04); border-color: var(--ash); }
    html[data-theme="light"] .kr-tag--time,
    html[data-theme="light"] .kr-tag--method   { background: var(--coal); border-color: var(--ash); }

    /* ═══════════════════════════════════════════
       KETO PAGE — A Typical Keto Day timeline
    ═══════════════════════════════════════════ */

    .kday-section { padding: 4rem 5vw; }

    .kday-timeline {
      margin-top: 2.5rem;
      position: relative;
      padding-left: 2.5rem;
    }

    .kday-timeline::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.4rem;
      bottom: 2rem;
      width: 2px;
      background: linear-gradient(to bottom, var(--eat), rgba(186,117,23,0.15));
    }

    .kday-item {
      position: relative;
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 1.5rem;
      padding-bottom: 2.5rem;
    }

    .kday-item--anchor { padding-bottom: 0; }

    .kday-item::before {
      content: '';
      position: absolute;
      left: -2.875rem;
      top: 0.35rem;
      width: 9px;
      height: 9px;
      background: var(--eat);
      border-radius: 50%;
      box-shadow: 0 0 0 3px rgba(186,117,23,0.2);
    }

    .kday-item--anchor::before {
      background: var(--white);
      width: 11px;
      height: 11px;
      left: -2.9375rem;
      box-shadow: 0 0 0 3px var(--eat);
    }

    .kday-time {
      font-family: var(--mono);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--eat);
      padding-top: 0.15rem;
      line-height: 1.4;
    }

    .kday-title {
      font-family: var(--bebas);
      font-size: 1.3rem;
      letter-spacing: 0.04em;
      color: var(--white);
      margin-bottom: 0.5rem;
      line-height: 1.1;
    }

    .kday-body {
      font-family: var(--sans);
      font-size: 0.875rem;
      color: var(--silver);
      line-height: 1.7;
      max-width: 640px;
    }

    @media (max-width: 600px) {
      .kday-item {
        grid-template-columns: 1fr;
        gap: 0.3rem;
      }
      .kday-timeline { padding-left: 1.75rem; }
      .kday-item::before { left: -2.125rem; }
      .kday-item--anchor::before { left: -2.1875rem; }
    }

    html[data-theme="light"] .kday-item--anchor::before { background: var(--coal); }

/* ── Recipe Card: Favorites Flame ────────────────────────────────── */

.kr-card { position: relative; }

.kr-fav-btn {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  transition: color 0.15s ease, transform 0.15s ease;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kr-fav-btn svg {
  width: 16px;
  height: 16px;
  display: block;
  transition: fill 0.15s ease;
}

.kr-fav-btn:hover {
  color: var(--eat);
  transform: scale(1.2);
}

.kr-fav-btn--active {
  color: var(--eat);
}

.kr-fav-btn--active svg {
  fill: var(--eat);
}

/* Favorites chip in filter row */
.kr-chip--fav {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.kr-chip--fav svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: fill 0.15s ease;
}

.kr-chip--fav.active {
  background: var(--eat);
  color: var(--white);
  border-color: var(--eat);
}

.kr-chip--fav.active svg {
  fill: currentColor;
}

/* Card footer: Serves + Show me how */
.kr-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--coal);
}

/* Light theme overrides */
html[data-theme="light"] .kr-fav-btn { color: var(--muted); }
html[data-theme="light"] .kr-fav-btn:hover { color: var(--eat); }
html[data-theme="light"] .kr-fav-btn--active { color: var(--eat); }
html[data-theme="light"] .kr-card-footer { border-top-color: var(--ash); }

/* ── Targeted Macro Setting (Recipe Generator) ─────────────────── */

.kgen-target-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  margin-bottom: 0.75rem;
}

.kgen-target-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--eat);
  cursor: pointer;
}

.kgen-target-toggle-text {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--silver);
  line-height: 1.4;
}

.kgen-target-display {
  margin-top: 0.25rem;
}

.kgen-target-nums {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--white);
  margin-bottom: 0.75rem;
}

.kgen-target-nums strong { color: var(--eat); }

.kgen-target-unit {
  font-size: 0.6rem;
  color: var(--muted);
  margin-left: 0.15rem;
}

.kgen-target-none {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.kgen-target-none a { color: var(--eat); text-decoration: none; }
.kgen-target-none a:hover { text-decoration: underline; }

.kgen-calc-btn {
  background: none;
  border: 1px solid var(--ash);
  color: var(--silver);
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.kgen-calc-btn:hover { border-color: var(--eat); color: var(--eat); }

/* Targeted macro mode — hide irrelevant sections via form class */
#kgenForm.kgen-targeted .kgen-time-setting,
#kgenForm.kgen-targeted .kgen-servings-setting { display: none; }
#kgenForm.kgen-targeted .wg-num            { display: none; }
#kgenForm.kgen-targeted label:has(input[name="kgenMeal"][value="breakfast"]),
#kgenForm.kgen-targeted label:has(input[name="kgenMeal"][value="lunch"]),
#kgenForm.kgen-targeted label:has(input[name="kgenMeal"][value="dinner"]),
#kgenForm.kgen-targeted label:has(input[name="kgenMeal"][value="snack"]),
#kgenForm.kgen-targeted label:has(input[name="kgenMeal"][value="dessert"]) { display: none; }

/* Target vs Actual summary in targeted result */
.kgen-target-summary {
  background: var(--black);
  border: 1px solid var(--coal);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kgen-target-summary-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
}

.kgen-target-summary-label {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-width: 46px;
  flex-shrink: 0;
}

.kgen-target-summary-vals {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--silver);
}

.kgen-target-bar-wrap {
  height: 3px;
  background: var(--coal);
  margin-top: 0.5rem;
  border-radius: 2px;
  overflow: hidden;
}

.kgen-target-bar {
  height: 100%;
  background: var(--eat);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.kgen-target-pct {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}

.kgen-match { color: #4caf6e; }
.kgen-close { color: var(--eat); }
.kgen-low   { color: var(--muted); }

.kgen-target-summary-vals.kgen-match { color: #4caf6e; }
.kgen-target-summary-vals.kgen-close { color: var(--eat); }
.kgen-target-summary-vals.kgen-low   { color: var(--muted); }

/* ── Macro Calculator Popup ─────────────────────────────────────── */

.mc-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.mc-popup-overlay.open { display: flex; }

.mc-popup {
  background: var(--offblack);
  border: 1px solid var(--coal);
  border-radius: 8px;
  width: min(560px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mc-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--coal);
  position: sticky;
  top: 0;
  background: var(--offblack);
  z-index: 1;
}

.mc-popup-title {
  font-family: var(--bebas);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  color: var(--white);
  margin: 0;
}

.mc-popup-body {
  padding: 1.5rem;
  flex: 1;
}

.mc-popup-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--coal);
  position: sticky;
  bottom: 0;
  background: var(--offblack);
  display: flex;
  justify-content: flex-end;
}

html[data-theme="light"] .mc-popup { background: var(--white); border-color: var(--ash); }
html[data-theme="light"] .mc-popup-header { background: var(--white); border-color: var(--ash); }
html[data-theme="light"] .mc-popup-footer { background: var(--white); border-color: var(--ash); }
html[data-theme="light"] .kgen-target-summary { background: var(--ash); border-color: var(--silver); }