:root {
  --cr-ink: #0b142e;
  --cr-dark: #0b1024;
  --cr-dark-2: #111a40;
  --cr-clay: #345cff;
  --cr-peach: #a9b9ff;
  --cr-cream: #e9edf7;
  --cr-paper: #f7f9ff;
  --cr-sage: #dce5ff;
  --cr-muted: #4e5872;
  --cr-max: 1240px;
}

.creatine-story { background: var(--cr-paper); color: var(--cr-ink); overflow-x: clip; }
.creatine-story .site-header { background: rgba(247, 249, 255, .92); }
.creatine-notice { background: var(--cr-dark); border-color: rgba(255,255,255,.12); color: #e9edf7; }
.cr-wrap { width: min(calc(100% - 2.5rem), var(--cr-max)); margin-inline: auto; }
.cr-narrow { width: min(calc(100% - 2.5rem), 940px); }
.cr-dark { color: #fff; background: radial-gradient(circle at 78% 25%, #203c9d 0, var(--cr-dark) 40%, #070b1a 100%); }
.cr-kicker { margin: 0 0 1rem; color: var(--cr-clay); font-size: .76rem; font-weight: 850; letter-spacing: .19em; text-transform: uppercase; }
.cr-lede { color: inherit; font-size: clamp(1.08rem, 2vw, 1.42rem); line-height: 1.55; max-width: 62ch; opacity: .82; }
.cr-copy { position: relative; z-index: 2; }

.cr-hero { position: relative; min-height: min(900px, calc(100svh - 104px)); display: grid; align-items: center; overflow: hidden; padding: clamp(4rem, 9vw, 8rem) 0 5rem; }
.cr-hero::before { content: ""; position: absolute; width: 52vw; aspect-ratio: 1; right: -16vw; top: -18vw; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 11vw rgba(255,255,255,.018), 0 0 0 22vw rgba(255,255,255,.012); }
.cr-hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.cr-hero h1 { max-width: 760px; color: #fff; font-family: Inter, "Avenir Next", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif; font-size: clamp(3.6rem, 8vw, 7.3rem); font-weight: 900; letter-spacing: -.065em; line-height: .86; }
.cr-hero h1 span { color: var(--cr-peach); }
.cr-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.8rem 0; }
.cr-chips span { border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #fff; padding: .45rem .75rem; font-size: .8rem; font-weight: 750; }
.cr-preview-button { display: inline-flex; border: 1px solid var(--cr-peach); border-radius: 999px; color: #fff; padding: .8rem 1.05rem; text-decoration: none; }
.cr-preview-button:hover { background: var(--cr-peach); color: var(--cr-dark); }
.cr-scroll { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.72); font-size: .78rem; letter-spacing: .08em; text-decoration: none; }

.cr-visual { position: relative; margin: 0; min-width: 0; }
.cr-visual img { display: block; width: 100%; height: auto; background: transparent; }
.cr-visual figcaption { margin-top: .65rem; color: inherit; font-size: .72rem; letter-spacing: .025em; opacity: .62; text-align: center; }
.cr-hero-visual { max-width: 720px; justify-self: end; }

.cr-number { background: #070b1a; color: white; }
.cr-number-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.cr-number-grid > div { min-height: 160px; display: grid; align-content: center; padding: 2rem; border-left: 1px solid rgba(255,255,255,.12); }
.cr-number-grid > div:last-child { border-right: 1px solid rgba(255,255,255,.12); }
.cr-number strong { color: var(--cr-peach); font-family: Inter, "Avenir Next", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif; font-size: clamp(2rem, 5vw, 4.2rem); font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.cr-number span { margin-top: .5rem; color: rgba(255,255,255,.67); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }

.cr-chapter { min-height: 760px; display: grid; align-items: center; padding: clamp(5rem, 11vw, 10rem) 0; overflow: hidden; }
.cr-story-grid { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.cr-reverse .cr-copy { order: 2; }
.cr-reverse .cr-visual { order: 1; }
.cr-chapter h2, .cr-check h2, .cr-ingredients h2, .cr-safety h2, .cr-faq h2, .cr-sources h2 { font-family: Inter, "Avenir Next", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif; font-weight: 900; font-size: clamp(2.7rem, 6vw, 5.7rem); letter-spacing: -.06em; line-height: .92; }
.cr-chapter .cr-copy > p:last-child { max-width: 60ch; }
.cr-pour { background: var(--cr-cream); }
.cr-training { background: #101a3f; color: white; }
.cr-training .cr-kicker { color: #a9b9ff; }
.cr-routine { background: #e2e8fb; }

.cr-ingredients { background: var(--cr-paper); padding: clamp(6rem, 12vw, 11rem) 0; }
.cr-ingredient-row { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(2rem, 8vw, 7rem); padding: 3rem 0; border-top: 1px solid #c6cfe5; }
.cr-ingredient-row:last-child { border-bottom: 1px solid #c6cfe5; }
.cr-index { display: block; color: var(--cr-clay); font-size: .78rem; font-weight: 850; letter-spacing: .15em; }
.cr-ingredient-row h3 { margin-top: .65rem; font-family: Inter, "Avenir Next", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif; font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 850; letter-spacing: -.04em; }
.cr-ingredient-row p { margin-bottom: .85rem; color: #3f4964; }

.cr-check { background: #17255d; color: white; padding: clamp(6rem, 12vw, 11rem) 0; overflow: hidden; }
.cr-check .cr-kicker { color: var(--cr-peach); }
.cr-hold { display: grid; gap: .3rem; margin-top: 2rem; padding-left: 1rem; border-left: 3px solid var(--cr-peach); }
.cr-hold span { color: rgba(255,255,255,.72); }

.cr-safety { background: #e3e8f5; padding: clamp(6rem, 12vw, 11rem) 0; }
.cr-safety-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 3rem; background: rgba(23,37,93,.2); }
.cr-safety-grid article { min-height: 230px; padding: clamp(1.5rem, 4vw, 2.7rem); background: #e3e8f5; }
.cr-safety-grid h3 { font-family: Inter, "Avenir Next", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif; font-size: 1.8rem; font-weight: 850; letter-spacing: -.03em; }

.cr-faq { padding: clamp(6rem, 12vw, 10rem) 0; background: var(--cr-paper); }
.cr-faq details { border-top: 1px solid #c6cfe5; padding: 1.25rem 0; }
.cr-faq details:last-child { border-bottom: 1px solid #c6cfe5; }
.cr-faq summary { cursor: pointer; font-size: 1.12rem; font-weight: 800; }
.cr-faq details p { max-width: 70ch; margin: .85rem 0 0; color: var(--cr-muted); }

.cr-sources { padding: clamp(5rem, 10vw, 8rem) 0; background: #101a3f; color: white; }
.cr-sources .cr-kicker { color: #a9b9ff; }
.cr-sources ul { list-style: none; padding: 0; margin: 2rem 0; }
.cr-sources li { border-top: 1px solid rgba(255,255,255,.18); padding: 1rem 0; }
.cr-sources li:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.cr-sources a { color: white; }
.cr-source-note { color: rgba(255,255,255,.68); max-width: 72ch; }

.cr-footer { background: #070b1a; color: rgba(255,255,255,.7); padding: 2.5rem 0; }
.cr-footer .cr-wrap { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 1.5rem; align-items: center; }
.cr-footer strong { color: white; }
.cr-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.cr-footer a { color: white; }

.reveal { opacity: 1; transform: none; }
.story-enhanced .reveal { opacity: 0; transform: translateY(34px); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.8,.2,1); }
.story-enhanced .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .creatine-story .menu-button { display: inline-flex; }
  .creatine-story .nav-links { display: none; }
  .creatine-story .nav-links[data-open="true"] { display: flex; }
  .cr-hero { min-height: auto; }
  .cr-hero-grid, .cr-story-grid { grid-template-columns: 1fr; }
  .cr-hero-visual { max-width: 620px; justify-self: center; order: -1; }
  .cr-hero .cr-copy { text-align: center; }
  .cr-hero .cr-lede { margin-inline: auto; }
  .cr-chips { justify-content: center; }
  .cr-reverse .cr-copy, .cr-reverse .cr-visual { order: initial; }
  .cr-chapter { min-height: auto; }
  .cr-chapter .cr-visual, .cr-check .cr-visual { max-width: 680px; margin-inline: auto; }
  .cr-ingredient-row { grid-template-columns: 1fr; gap: 1rem; }
  .cr-footer .cr-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .cr-wrap, .cr-narrow { width: min(calc(100% - 1.25rem), var(--cr-max)); }
  .cr-hero { padding-top: 2.5rem; }
  .cr-hero h1 { font-size: clamp(3.25rem, 16vw, 4.8rem); }
  .cr-scroll { display: none; }
  .cr-number-grid { grid-template-columns: 1fr; }
  .cr-number-grid > div { min-height: 112px; border-left: 0; border-right: 0 !important; border-top: 1px solid rgba(255,255,255,.12); padding-inline: .65rem; }
  .cr-number-grid > div:first-child { border-top: 0; }
  .cr-chapter { padding-block: 5rem; }
  .cr-chapter h2, .cr-check h2, .cr-ingredients h2, .cr-safety h2, .cr-faq h2, .cr-sources h2 { font-size: clamp(2.55rem, 13vw, 4rem); }
  .cr-safety-grid { grid-template-columns: 1fr; }
  .cr-visual figcaption { font-size: .68rem; }
}

@media (max-height: 440px) and (orientation: landscape) {
  .creatine-notice { display: none; }
  .creatine-story .nav { min-height: 52px; }
  .cr-hero { min-height: auto; padding: 1.2rem 0 1.5rem; }
  .cr-hero-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .cr-hero-visual { order: initial; max-height: 300px; }
  .cr-hero-visual img { max-height: 270px; }
  .cr-hero h1 { font-size: clamp(2.35rem, 6vw, 3.1rem); line-height: .88; }
  .cr-hero .cr-lede { font-size: .8rem; line-height: 1.35; }
  .cr-hero .cr-chips, .cr-hero .cr-preview-button { display: none; }
  .cr-scroll { display: none; }
  .cr-number-grid { grid-template-columns: repeat(3, 1fr); }
  .cr-number-grid > div { min-height: 105px; border-left: 1px solid rgba(255,255,255,.12); border-top: 0; }
  .cr-chapter { padding-block: 3rem; }
  .cr-story-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .cr-chapter h2, .cr-check h2 { font-size: clamp(2.2rem, 6vw, 3.3rem); }
  .cr-chapter .cr-lede, .cr-check .cr-lede { font-size: .95rem; }
  .cr-chapter .cr-visual img, .cr-check .cr-visual img { max-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-enhanced .reveal { opacity: 1; transform: none; transition: none; }
}