/*
 * RotoLegends — skin.
 *
 * Loaded AFTER style.css (see inc/site.php), so anything here overrides the
 * SIGNAL defaults in src/sass/_tokens.scss. Plain CSS, not compiled: edit it
 * by hand per show. Only put in here what differs from the defaults.
 *
 * Colours are the client's (#1f78d4); fonts, leading, hero sizing and logo
 * handling came from the first pass on the old RL palette — see
 * skin-navy-orange.archived.css for that version, kept because Joe liked it.
 */

/* ── Brand colour ─────────────────────────────────────────────────────────
 * Client's pick, 2026-09-20: #1f78d4 for headings and CTAs. The navy/orange
 * take on the old RL palette is parked in skin-navy-orange.archived.css
 * (not loaded — inc/site.php only reads skin.css). Surfaces are the theme
 * defaults again.
 *
 * --accent      the brand colour, exact — used identically in both themes
 * --accent-ink  the brand colour as TEXT on that theme's background; must
 *               hold ~5:1 contrast (darker on light, lighter on dark)
 * --accent-deep a darkened fill for small white text on a solid block
 * --accent-2    a tint for soft backgrounds (chips, hover washes)
 */
[data-theme="light"] {
	--accent:      #1f78d4;
	--accent-ink:  #1961ad;
	--accent-deep: #1961ad;
	--accent-2:    #d6e8f9;
}
[data-theme="dark"],
.inset {
	--accent:      #1f78d4;
	--accent-ink:  #4f9be6;
	--accent-deep: #1961ad;
	--accent-2:    #0c2a49;
}

/* Headings carry the brand colour too ("headings and CTAs main color").
 * --accent-ink, not --accent, so they keep contrast in both themes; the
 * hero's hollow word strokes in the same colour. */
.display,
.hero__title,
.foot__pitch,
.subscribe__title {
	color: var(--accent-ink);
}
.hero__word--hollow > span {
	-webkit-text-stroke-color: var(--accent-ink);
}

/* ── Fonts ────────────────────────────────────────────────────────────────
 * Oswald + Roboto are what the original RL site ran on; the logo lettering
 * is the same condensed heavy sans. Oswald tops out at 700, so the 900
 * weights in the theme resolve to that — no faux bold.
 */
:root {
	--font-display: "Oswald", "Archivo", system-ui, sans-serif;
	--font-body:    "Roboto", "Instrument Sans", system-ui, -apple-system, sans-serif;
}

/* ── Display leading ──────────────────────────────────────────────────────
 * The theme's display line-heights are tuned per component for a face whose
 * caps sit low in the em box (.82 hero → 1.05 card titles). Oswald's caps
 * fill it, so a single multiplier (--display-leading) made the loose ones
 * looser still — the footer pitch went to 1.08 while the hero sat at .93.
 * Joe, 2026-09-20: "make sure all of these H's line-heights are about the
 * same but relative to their size." So the multiplier stays at 1 and every
 * display heading gets one of two values: .9 for the big uppercase display
 * pieces, 1 for the small multi-line titles that need a hair more air.
 */
.hero__title,
.display,
.feature__title,
.guest-hero__name,
.ep-single__title {
	line-height: .9;
}
/* Mid-size uppercase blocks read tighter than the hero at the same ratio
 * (Joe, 2026-09-20: "a little too tight") — a touch more air. */
.foot__pitch,
.subscribe__title {
	line-height: .96;
}
.card__title,
.ep__title,
.short__title,
.article__title,
.prose h2, .prose h3, .prose h4 {
	line-height: 1;
}

/* ── Hero title ───────────────────────────────────────────────────────────
 * Two lines of two words each ("Dominate Your" / "Fantasy League", hollow),
 * neither allowed to wrap. Two sizes, Joe's calls 2026-09-20: desktop stays
 * at 9.5vw (14.5 was "WAY too big"), phones go to 14.5vw because 9.5 read
 * "mad small" next to TJCS's 12.5vw three-worder. Oswald is condensed and
 * the longer line is ~5.1em at -.045em tracking, so 14.5vw is ~75% of a
 * phone's width and still one line.
 */
.hero__title { font-size: min(9.5vw, 22svh, 190px); }
@media (max-width: 780px) { /* = the theme's $bp-md */
	.hero__title { font-size: min(14.5vw, 22svh, 190px); }
}
.hero__word { white-space: nowrap; }
/* The blurb's 46ch measure fits ~66 characters a line in Instrument Sans on
 * TJCS but only ~52 in Roboto (wider `0`, narrower text). 58ch lands the
 * same line length Joe liked there. */
.hero__blurb { max-width: 58ch; }

/* ── Logo ─────────────────────────────────────────────────────────────────
 * img/logo.svg is the original RotoLegends wordmark (white-only, masked to
 * currentColor by the nav); its viewBox is 1000×98.6, wider-set than TJCS's.
 */
.nav__logo { --logo-ratio: 1000 / 98.6; }

/* ── Hero photo ───────────────────────────────────────────────────────────
 * --photo-w is the cut-out's rendered WIDTH, and it is really the photo's
 * aspect ratio in disguise: the figure is placed by width and the height
 * follows, so a photo with a different ratio needs this re-derived from the
 * image (height you want ÷ image ratio), not eyeballed. img/hero-photo.png
 * here is 1811×2040, and 80.4svh wide puts the head above the fold on a
 * phone with the shirt uncropped.
 */
.hero {
	--photo-w: min(clamp(372px, 48.8vw, 804px), 80.4svh);
}