/* site.css - ProteinPulse.com layout. Tokens only; no literal colors or fonts. (SG-37) */

/* ---- Launch visibility: items hidden until after launch (outline) ---- */
[data-launch="hidden"] { display: none !important; }

/* ---- Page width: the concept runs nearly edge to edge (1536 wide, ~4% gutters).
   Wider container than the shared 72rem default (Reid, 2026-10-19 review). ---- */
.container { max-width: 92rem; padding-inline: clamp(var(--gutter), 3vw, 3.5rem); }
.band { padding-block: var(--space-6); }
/* Above the concept's 1536 px the whole layout scales with the viewport, capped at 1.5x,
   so a large monitor shows the concept enlarged in proportion (Reid, 2026-10-19, option a). */
@media (min-width: 96em) { html { font-size: min(1.0417vw, 24px); } }

/* ---- Logo: the Protein Pulse wordmark is 3:1; the Great Plains badge was drawn for white,
   so it sits on a white tab. The one permitted palette reference in this file. ---- */
:root { --logo-tab-bg: var(--palette-white); }
.site-logo { display: inline-block; line-height: 0; }
.site-logo img { height: 3.5rem; width: auto; }
.site-logo--footer img { height: 2.75rem; }

/* ---- Header: logo left, nav centred, Subscribe button right, thin divider beneath ---- */
.site-header { padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.site-header .site-nav { margin-inline: auto; }
.site-header .site-nav ul { gap: var(--space-6); }
.site-header__cta { padding-block: var(--space-2); }

/* ---- Hero: about one third of the page width tall (Concept 2); headline left, microphone centre-right ---- */
.hero--home { display: flex; align-items: center; min-height: clamp(22rem, 34vw, 36rem); padding-block: var(--space-7); }
.hero__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.hero--home .hero__media img { object-position: 62% 50%; }
/* Dark on the text side; clear over the microphone (about 50% to 75% of the frame) */
.hero--home .hero__media::after {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--band-dark-bg) 96%, transparent) 0,
    color-mix(in srgb, var(--band-dark-bg) 90%, transparent) 30%,
    color-mix(in srgb, var(--band-dark-bg) 55%, transparent) 46%,
    transparent 62%);
}
.hero__content { max-width: 54rem; }
@media (min-width: 48em) { .hero--home .hero__content { max-width: 54rem; } }
/* Tablet (48 to 64em): header gaps tightened so Subscribe stays on the first row; text column at two thirds, lede narrowed so it clears the mic flag; overlay carried further right */
@media (min-width: 48em) and (max-width: 63.99em) {
  .site-header__inner { gap: var(--space-4); }
  .site-header .site-nav ul { gap: var(--space-4); }
  .hero--home .hero__content { max-width: 64%; }
  .hero--home .hero__lede { max-width: 23rem; }
  .hero--home .hero__media::after {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--band-dark-bg) 96%, transparent) 0,
      color-mix(in srgb, var(--band-dark-bg) 92%, transparent) 40%,
      color-mix(in srgb, var(--band-dark-bg) 70%, transparent) 64%,
      color-mix(in srgb, var(--band-dark-bg) 25%, transparent) 85%,
      transparent 100%);
  }
}
/* Three headline lines as in Concept 2: KNOW THE MARKET. / UNDERSTAND WHAT / MOVES IT. */
@media (min-width: 64em) { .hero--home h1 { white-space: nowrap; } }
.hero__eyebrow { font-family: var(--font-heading); font-size: 0.95rem; font-weight: var(--weight-heading-sm); margin-bottom: var(--space-3); }
.hero--home h1 { font-size: clamp(2.25rem, 4.2vw, 4rem); font-weight: 800; line-height: 1.02; text-transform: uppercase; }
.hero__line { display: block; }
.hero__line--accent { color: var(--color-accent); }
.hero__lede { margin-top: var(--space-4); max-width: 34rem; font-size: var(--text-lg); font-weight: 500; color: var(--color-text); }
.hero--home .hero__actions { margin-top: var(--space-5); }

/* ---- Section 3: Podcast and Newsletter cards. Charcoal strip under the hero; cards about one fifth of the page width tall,
   podcast about 58% of the row, newsletter about 42% (Concept 2) ---- */
.band--cards { background: var(--band-dark-surface); padding-block: var(--space-5); }
.cards-duo { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 48em) { .cards-duo { grid-template-columns: 58fr 42fr; gap: var(--space-5); } }
/* Shared card shell */
.promo { position: relative; isolation: isolate; display: flex; overflow: hidden; min-height: clamp(14rem, 20vw, 20rem); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.promo__body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--space-5) var(--space-6); }
.promo__body .button { align-self: flex-start; }
/* Podcast: photo left, black panel right (Concept 2); .band--dark remaps the surface to charcoal, so the panel is set explicitly */
.promo--podcast { background: var(--band-dark-bg); }
.promo--podcast .promo__media { flex: 0 0 46%; }
.promo--podcast .promo__media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
/* Newsletter: full-bleed photo under a dark gradient, text over it (Concept 2) */
.promo__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.promo--newsletter::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--band-dark-bg) 92%, transparent) 0,
    color-mix(in srgb, var(--band-dark-bg) 78%, transparent) 50%,
    color-mix(in srgb, var(--band-dark-bg) 35%, transparent) 100%);
}
/* Card type: sentence case, no uppercase on titles */
.promo__eyebrow { font-family: var(--font-heading); font-size: 0.8rem; font-weight: var(--weight-heading-sm); margin-bottom: var(--space-2); }
.promo__title { font-size: clamp(var(--text-xl), 1.9vw, 1.85rem); font-weight: var(--weight-heading-sm); line-height: 1.15; color: var(--color-text); }
.promo__desc { margin-block: var(--space-3) var(--space-4); max-width: 26rem; color: var(--color-text); }
/* Tablet and small laptop (48 to 80em): the podcast panel is narrow, so the photo narrows, type steps down and the set line breaks drop (a space before each <br> keeps the words apart) */
@media (min-width: 48em) and (max-width: 79.99em) {
  .promo--podcast .promo__media { flex-basis: 40%; }
  .promo__body { padding: var(--space-4) var(--space-5); }
  .promo__eyebrow { font-size: 0.72rem; }
  .promo__title { font-size: var(--text-lg); }
  .promo__title br { display: none; }
  .promo__body .button { padding-inline: var(--space-4); white-space: nowrap; }
}
/* Phone: podcast photo stacks above its panel */
@media (max-width: 47.99em) {
  .promo { min-height: 0; }
  .promo--podcast { flex-direction: column; }
  .promo--podcast .promo__media { flex: none; aspect-ratio: 16 / 9; }
  .promo--newsletter { min-height: 14rem; }
  .promo__body { padding: var(--space-5) var(--space-4); }
  .promo__title { font-size: var(--text-xl); }
}

/* ---- Section 4: Today's Pulse and Special Reports. First light band; photo, article, then Special Reports behind a thin divider.
   Proportions from Concept 2 (page 1024 wide): photo 340, article 280, sidebar 267. ---- */
.band--light { background: var(--color-bg); }
.band--pulse { padding-block: var(--space-6); }

/* Grid: one column on phone, two from 48em (reports span the row), three from 64em with the divider (Concept 2) */
.pulse { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
@media (min-width: 48em) {
  .pulse { grid-template-columns: 1fr 1fr; }
  .reports { grid-column: 1 / -1; }
  .reports__list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64em) {
  .pulse { grid-template-columns: 37fr 30fr 29fr; gap: var(--space-6); }
  .reports { grid-column: auto; padding-left: var(--space-5); border-left: 1px solid var(--color-border); }
  .reports__list { grid-template-columns: 1fr; }
}

/* Photo: about 1.31:1, no border (Concept 2) */
.pulse__media { margin: 0; }
.pulse__media img { width: 100%; aspect-ratio: 960 / 733; object-fit: cover; border-radius: 0; }

/* Article column */
.pulse__body { align-self: center; }
.pulse__eyebrow { font-family: var(--font-heading); font-size: 0.9rem; font-weight: var(--weight-heading-sm); margin-bottom: var(--space-3); }
.pulse__title { font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: var(--weight-heading); line-height: 1.12; color: var(--color-text); }
.pulse__desc { margin-block: var(--space-4) var(--space-5); max-width: 26rem; color: var(--color-text); }

/* Special Reports sidebar: stacked cards about 60 tall with a 96x56 thumbnail (Concept 2); not linked, no arrow */
.reports__heading { font-family: var(--font-heading); font-size: 0.9rem; font-weight: var(--weight-heading-sm); margin-bottom: var(--space-3); }
.reports__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.report { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.report__thumb { flex: none; width: 6rem; height: 3.5rem; object-fit: cover; border-radius: var(--radius-sm); }
.report__thumb--empty { display: block; background: var(--color-border); }
.report__title { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-text); }

/* Phone */
@media (max-width: 47.99em) {
  .band--pulse { padding-block: var(--space-5); }
  .pulse__title { font-size: var(--text-xl); }
  .pulse__title br { display: none; }
}

/* ---- Section 5: The Daily Lineup. Light band behind a thin divider; heading row, then six photo-over-dark-panel cards (Concept 2). ---- */
.band--lineup { padding-block: var(--space-6); border-top: 1px solid var(--color-border); }

/* Heading row: eyebrow and title left, view-all link right */
.lineup__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.lineup__eyebrow { font-family: var(--font-heading); font-size: 0.9rem; font-weight: var(--weight-heading-sm); margin: 0; }
.lineup__all { flex: none; font-family: var(--font-heading); font-size: 0.78rem; font-weight: var(--weight-heading-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent); white-space: nowrap; }
.lineup__all::after { content: "\2192"; margin-left: var(--space-2); }

/* Grid: 2 columns phone, 3 tablet, six in one row on desktop (Concept 2) */
.lineup { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 48em) { .lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .lineup { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); } }

/* Card: 3:2 photo above a dark panel with the two-line title (Concept 2) */
.episode { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--radius-card); background: var(--band-dark-surface); color: var(--band-dark-text); text-decoration: none; }
.episode:hover, .episode:focus-visible { text-decoration: none; }
.episode:hover .episode__title { color: var(--color-accent); }
.episode__media { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.episode__panel { display: flex; flex: 1; align-items: flex-start; padding: var(--space-3) var(--space-3) var(--space-4); }
.episode__title { font-family: var(--font-heading); font-size: 0.82rem; font-weight: var(--weight-heading-sm); line-height: 1.3; letter-spacing: 0; text-transform: none; color: inherit; }
.episode__title span { display: block; }

/* Phone */
@media (max-width: 47.99em) {
  .band--lineup { padding-block: var(--space-5); }
  .lineup__head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .episode__title { font-size: 0.78rem; }
}

/* ---- Notice pages (thanks, later 404): one short column on the light band ---- */
.band--notice { padding-block: var(--space-8); }
.notice { max-width: 40rem; }
.notice__eyebrow { font-family: var(--font-heading); font-size: 0.9rem; font-weight: var(--weight-heading-sm); margin-bottom: var(--space-3); }
.notice__title { font-size: clamp(var(--text-2xl), 3.5vw, 3rem); text-transform: uppercase; margin-bottom: var(--space-4); }
.notice__lede { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: var(--space-5); }
@media (max-width: 47.99em) { .band--notice { padding-block: var(--space-7); } }

/* ---- Contact page: intro then the form card on the light band (same pattern as Great Plains and TheSparks.Group) ---- */
.contact { display: grid; gap: var(--space-7); max-width: 56rem; }
@media (min-width: 48em) { .contact { grid-template-columns: 1fr 1.4fr; } }
.contact__intro h1 { font-size: clamp(var(--text-2xl), 4vw, 3rem); margin-bottom: var(--space-4); }
.contact__lede { font-size: var(--text-lg); color: var(--color-text-muted); }
.contact__form { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.field-row { display: grid; gap: var(--space-4); }
@media (min-width: 40em) { .field-row { grid-template-columns: 1fr 1fr; } .field-row .field + .field { margin-top: 0; } }
.field-row + .field, .field-row + .field-row { margin-top: var(--space-4); }
.contact__form label { font-weight: 600; }
.req { color: var(--color-accent); }
.contact__note { margin-block: var(--space-4); }

/* ---- Footer: logo, nav, cross-site marks; legal row beneath ---- */
.site-footer { margin-top: 0; padding-block: var(--space-5) var(--space-4); border-top: 1px solid var(--color-border); }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.site-footer .site-nav ul { gap: var(--space-5); }
.site-footer .site-nav a { font-size: 0.72rem; }
.cross-sites { display: flex; gap: var(--space-5); }
.cross-site { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; }
.cross-site:hover { text-decoration: none; color: var(--color-accent); }
.cross-site__mark { display: flex; align-items: center; justify-content: center; width: 6.5rem; height: 2.75rem; padding: var(--space-1); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); }
.cross-site__mark img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.cross-site__mark--gpp { background: var(--logo-tab-bg); }
.cross-site__label { font-family: var(--font-heading); font-size: 0.62rem; font-weight: var(--weight-heading-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.site-footer__legal { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); }
.legal-links { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.legal-links a { color: var(--color-text-muted); }
.legal-links a:hover, .legal-links a:focus-visible { color: var(--color-accent); }

/* Footer groups wrap below 64em: centre the wrapped rows */
@media (max-width: 63.99em) { .site-footer .site-footer__inner { justify-content: center; gap: var(--space-5) var(--space-6); } }

/* ---- Phone overrides ---- */
@media (max-width: 47.99em) {
  /* logo left, Subscribe right; nav on its own row beneath */
  .site-header__inner { gap: var(--space-3) var(--space-4); }
  .site-logo img { height: 2.75rem; }
  .site-header .site-nav { flex-basis: 100%; order: 3; }
  .site-header .site-nav ul { justify-content: center; gap: var(--space-5); }
  /* Phone header: the logo is the home link, so the Home item gives its row back (SG-51, Reid 2026-10-24); the footer keeps it */
  .site-header .site-nav li[data-nav="home"] { display: none; }
  .hero--home { min-height: 0; padding-block: var(--space-6); }
  .hero--home .hero__media::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--band-dark-bg) 88%, transparent) 0%,
      color-mix(in srgb, var(--band-dark-bg) 72%, transparent) 100%);
  }
  .hero--home h1 { font-size: clamp(1.75rem, 8.5vw, 2.5rem); }
  .hero__lede { font-size: var(--text-base); }
  .hero--home .hero__actions { gap: var(--space-3); }
  .hero--home .hero__actions .button { flex: 1 1 0; padding-inline: var(--space-3); white-space: nowrap; }
  .site-footer__inner { flex-direction: column; align-items: center; text-align: center; }
  .site-footer .site-nav ul { justify-content: center; }
  .cross-sites { flex-wrap: wrap; justify-content: center; }
  .site-footer__legal { justify-content: center; text-align: center; }
}