/* ============================================================================================
   ITG EPISODE PAGE - the template stylesheet for every per-episode page.

   Loaded AFTER blocks.css and ONLY by episode pages. It exists as its own file, rather than as a
   section of blocks.css, for two reasons: none of these rules is used by any other page, and this
   file IS the episode canon, so having one place to restyle 178 generated pages is the whole point.

   Extracted from episode-178.html on 2026-08-17 once Nico locked that page as the canon. Before the
   extraction the page carried 56 private rules in a <style> block; generating 178 pages from it
   would have cloned all 56 into every file. A generated page now carries only the page reset.

   Load order for an episode page:
     grid.css -> nav.css -> tokens.css -> primitives.css -> blocks.css -> episode.css -> footer.css

   THE PAGE HAS TWO COLOUR ZONES: a dark hero, then a white band that runs from under the hero to
   the CTA. The hero hardcodes its colours because it is always dark. Everything on the band reads
   CONTEXT TOKENS instead, which is what makes the band flip work: .itg-light redefines --fg,
   --fg-muted, --accent-text, --line and --glow for its subtree, so the same declarations render
   correctly on white and would still render correctly on ink if a section ever moved back.
   Two consequences worth knowing before editing:
     - lime becomes --accent-text on the band, which is ITG Blue. #96ff00 measures 1.75:1 on white
       and fails even the 3:1 large-text floor, so accented TYPE can never stay lime there.
     - --glow is `none` in the light context, so glows switch themselves off rather than needing an
       override per element.
   ============================================================================================ */

/* ---- page shell -------------------------------------------------------------------------------
   Namespaced .ep-page, not a bare .page: this is a template-level wrapper and a generic name in a
   shared stylesheet is how collisions start. Centres the 1280px measure and pays the 40px gutter. */
.ep-page{position:relative;z-index:1;max-width:var(--measure-grid);margin:0 auto;padding:0 var(--sec-pad-x);}


/* ============================================================================================
   HERO (dark). Nico's instruction on 2026-08-17 was to leave this exactly as it looked, so the
   literals below are preserved deliberately rather than tokenised: changing --t-* would have moved
   them. The one thing that did change is the platform pill, further down, which he restyled.
   ============================================================================================ */
.ep-hero{display:grid;grid-template-columns:340px 1fr;gap:64px;padding:52px 0 60px;align-items:start;}

/* MOBILE (2026-08-25). episode.css had NO media query, so this 340px + 1fr hero never collapsed
   and on a phone the whole metadata column sat OFF SCREEN, starting at x=444 on a 375px viewport.
   It affected all 182 episode pages, which is most of the site. It went unnoticed because the
   column is a normal 280px wide and only its POSITION is wrong, so scanning for over-wide
   elements never flagged it; scanning for right edges past the viewport did.
   Photo above, metadata below, and the portrait scales down so it does not eat the fold. */
@media (max-width:820px){
  .ep-hero{grid-template-columns:minmax(0,1fr);gap:34px;padding:34px 0 40px;}
  .ep-photo-col{align-items:flex-start;padding-top:0;}
  .ep-photo-ring{width:min(300px,52vw);height:min(300px,52vw);}
}

/* Only ONE episode has a cropped guest face asset (ep-178-face.png); the rest of the catalogue has
   composed cover artwork, and auto-cropping a face out of that is not reliable. So a page without a
   face drops the photo column rather than leaving a 340px hole or forcing a bad circular crop.
   The generator adds this class; delete it from a page the day a real face asset exists for it. */
.ep-hero--nophoto{grid-template-columns:1fr;}
/* the title can breathe without the 340px column, but not run the full 1200px as a 48px heading */
.ep-hero--nophoto .ep-meta-col{max-width:60ch;}

/* the italic cyan "Episode NNN" line. Same voice as .eyebrow but the hero sets it locally. */
.ep-ep-num{font-size:var(--t-eyebrow);font-weight:var(--w-strong);font-style:italic;color:var(--itg-cyan);}

/* ---- photo column ---- */
.ep-photo-col{display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:8px;}
.ep-photo-ring{width:300px;height:300px;border-radius:50%;overflow:hidden;flex-shrink:0;}
.ep-photo-ring img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---- meta column ---- */
.ep-meta-col{display:flex;flex-direction:column;gap:22px;padding-top:4px;}
.ep-title{font-size:48px;font-weight:var(--w-strong);line-height:1.1;color:var(--fg);}
.ep-guest-block{display:flex;flex-direction:column;gap:5px;}
.ep-guest-name{font-size:24px;font-weight:var(--w-strong);color:var(--itg-lime-dark);}
.ep-guest-sub{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-size:var(--t-body);font-weight:300;color:var(--fg);}
/* the three spans inside .ep-guest-sub used to carry `color:#ffffff` each, which merely restated
   the inherited value. One rule reading --fg replaces all three and is context-correct. */
.ep-guest-role,.ep-guest-sep,.ep-guest-company{color:var(--fg);}
/* ---- exits back to the guide ------------------------------------------------------------------
   An episode page is a LEAF: until now the only way out was the global nav (Nico, 2026-08-25:
   "faltaria un boton o seccion en cada episodio que vaya de vuelta a la pagina episodios").
   TWO exits, deliberately unequal in weight because they answer different moments:
     .ep-back - hero breadcrumb, for orientation ON ARRIVAL. Most readers land on a leaf from
                search or a shared link rather than from the guide, so they need to learn the
                guide exists at all.
     .ep-more - a real button WHERE READING ENDS, for "finished this one, show me another".
   Neither is a new band. A third full band before the newsletter CTA would have put two competing
   calls to action back to back, so the button lives inside the article instead.
   .ep-back is --fg-muted and NOT cyan on purpose: the cyan italic "Episode N" immediately below
   is this column's eyebrow, and a second cyan line above it read as two stacked eyebrows. Muted
   reads as chrome, which is what a breadcrumb is.
   No margins on either - .ep-meta-col is a 22px-gap flex column and .ep-article a 52px one, so
   both inherit the existing column rhythm. align-self:start is load-bearing: the flex parent
   defaults to align-items:stretch, which would spread the link (and its hover target) across the
   whole column. */
.ep-back{align-self:start;display:inline-flex;align-items:center;gap:9px;
         font-size:var(--t-meta);font-weight:600;letter-spacing:.04em;
         color:var(--fg-muted);transition:color var(--dur);}
.ep-back:hover{color:var(--accent-text);}
/* the ARROW slides, the label does not: animating the gap or the padding would shift the words
   out from under the cursor mid-hover. Horizontal only, per the site's axis-aligned motion rule. */
.ep-back-a{display:inline-block;transition:transform var(--dur) var(--ease);}
.ep-back:hover .ep-back-a{transform:translateX(-4px);}

.ep-more{display:flex;justify-content:center;}

.ep-details{display:flex;flex-direction:column;gap:9px;}
.ep-detail{font-size:var(--t-ui);color:var(--fg-muted);}
.ep-detail strong{color:var(--fg);font-weight:var(--w-strong);}

/* ---- platform pills -----------------------------------------------------------------------------
   Rounded pill, grey ring, grey label, full-colour logo. Hover turns the label white and the ring
   lime, and nothing else: no background tint, no glow.
   Colours are tokens so the row survives a move onto the white band. --accent, not --accent-text,
   for the ring, because a BORDER is a graphic and not type.
   The resting ring is --fg at 45%, NOT --line. Two separate findings behind that number: --line is
   .14, a hairline-separator value that read as a smudge at pill scale; and at 26% the ring looked
   THINNER than the lime hover even though both are 1px, because lime at full saturation on
   near-black irradiates while a faint white goes patchy along an antialiased 999px curve. The fix
   was contrast, not width. Never "fix" that by thickening the hover ring: the pill would jump on
   mouseover. */
.ep-platforms{display:flex;flex-wrap:wrap;gap:10px;padding-top:4px;}
.pltbtn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
        border:1px solid rgba(255,255,255,.45);
        border:1px solid color-mix(in srgb, var(--fg) 45%, transparent);
        border-radius:var(--r-pill);
        font-size:var(--t-meta);font-weight:600;color:var(--fg-muted);letter-spacing:.04em;
        transition:border-color var(--dur),color var(--dur);}
/* Canon (2026-08-25, Nico): a link pill/card hovers BLUE on white, GREEN on black. --accent
   is a GRAPHIC colour and stays lime in both contexts (see tokens.css); --accent-text is the
   one that actually resolves per-context (lime-dark on ink, ITG blue on white), so it - not
   --accent - is correct for a hover BORDER on a page that has both a dark hero (Connect,
   platform pills) and a white article body (Connect pills again) in the same .pltbtn class. */
.pltbtn:hover{border-color:var(--accent-text);color:var(--fg);}
/* the marks are real brand SVGs in full colour, never masked or tinted */
.pltbtn img{flex-shrink:0;}

/* CONNECT pills (the "Connect with <guest>" row) - text only, no icon, and a different voice from
   the platform-subscribe pills above. Scoped to .ep-platforms--connect so the YouTube/Spotify/etc
   row keeps its icon + outline treatment - both share the same .pltbtn base.

   COLOUR (Nico 2026-09-08): OUTLINE at rest, FILLED on hover, and the green is --accent - the SAME
   token .btn-ghost--primary ("Browse all episodes", a few lines below on the same white band) reads.
   The previous version was a solid chip in the literal --itg-lime-dark (#96ff00), which is the
   dark-ground lime; on the white band --accent resolves to --itg-lime-light (#8ed800), so the two
   greens sat 40px apart on the same page and visibly disagreed. Reading --accent (not a literal)
   is what keeps them in lockstep in BOTH contexts if the row ever moves back onto ink.
   Rest type is --fg, not the accent: lime type on white is ~1.9:1 and unreadable, and on the white
   band --fg is near-black, which is also what the Browse button's label resolves to on hover.
   Hover fills with --accent and flips type to --itg-ink - ink on lime is high-contrast in both
   contexts, same as a.pill:hover in primitives.css, so one hover rule needs no per-context override.
   The base .pltbtn transition covers border and colour only; background is added here so the fill
   animates instead of snapping.

   Size steps up one token, --t-meta (13px) -> --t-label (14px), because this row is a CTA and
   not metadata. --t-label is the right token rather than a literal: its existing consumers are
   .gm-acc-pill and .tp-pill, which are already lime-chip-with-ink-text at 14px. Padding scales
   with the type (8/16 at 13px -> 9/18 at 14px) so the chip grows instead of tightening.

   WEIGHT AND TRACKING diverge from the hero row on Nico's call, settled over three live rounds
   (2026-08-25): first 700 (my dark-on-light compensation guess), then back to the inherited 600
   for strict parity with the hero, then 700 again once he saw it at 14px - a bigger chip carried
   the heavier face, where at 13px it just looked mismatched. Tracking tightens with it, .04em ->
   .01em: the base .04em is tuned for a 13px/600 label and reads spread and dated on 14px/700.
   A LITERAL, not var(--track-tight): this row lives inside .itg-light, where that token resolves
   to -.033em - correct for the 84px display type it was tuned on, far too tight for a 14px chip. */
.ep-platforms--connect .pltbtn{
  background:transparent;border-color:var(--accent);
  color:var(--fg);
  font-size:var(--t-label);padding:9px 18px;
  font-weight:var(--w-strong);letter-spacing:.01em;
  transition:border-color var(--dur),color var(--dur),background var(--dur);
}
.ep-platforms--connect .pltbtn:hover{
  background:var(--accent);border-color:var(--accent);color:var(--itg-ink);
}


/* ============================================================================================
   THE WHITE BAND
   ============================================================================================ */

/* Asymmetric padding on purpose. The TOP does not need a full --zone-pad because the dark side of
   the boundary already pays its own 60px (.ep-hero has padding:52px 0 60px, unlike books.html where
   the hero is a .sec and contributes nothing below); 112 + 60 read as a hole. The BOTTOM keeps
   --zone-pad because it butts straight into the CTA gradient with nothing on the other side. */
.ep-body{padding:var(--sec-pad) 0 var(--zone-pad);}

/* Full width, no max-width cap: Nico chose the whole 1280px axis so the copy flows across it. A
   780px measure was tried first and explicitly rejected. That is also why the body weight below is
   --w-body-ctx (600 on light) rather than 400 - a long line needs the extra stroke. */
.ep-article{display:flex;flex-direction:column;gap:52px;}

/* ---- TYPE SCALE ---------------------------------------------------------------------------------
   Every size on the band is a token, so the whole page moves together, and the floor is --t-small
   (17px), which is what books.html body copy runs at:
     --t-h3    32  every heading, via .sec-title--h3
     --t-body  20  lede, pull quote, takeaway card titles
     --t-small 17  every body paragraph, step item, attribution   <- the floor
   What this replaced: 18 / 16 / 15 / 14 / 13 / 12px literals, five of them under the floor. */

/* HEADINGS: the page uses the system module `.sec-title sec-title--h3` for all of them - 900,
   uppercase, --t-h3 - rather than its own heading rules. The exception is the takeaway card titles,
   which stay <strong> at --t-body in title case, because uppercasing a label inside a badge row
   turns it into a second set of eyebrows.
   The guest name is a heading too. Uppercasing a person's name is not a liberty: .sec-title--h3 is
   the same module about.html uses for the host names. */

/* The guest name carries ONLY colour. Both the scoping and the !important are load-bearing: this is
   an <h2>, blocks.css sets `.itg-light h2{color:#1b242a !important}`, and when two declarations are
   both !important specificity decides - `.itg-light h2` at (0,1,1) beats a bare `.ep-guest-title`
   at (0,1,0). `.itg-light .ep-guest-title` is (0,2,0) and wins outright, which is safer than
   relying on source order the way `h2.ep-guest-title` would. */
.itg-light .ep-guest-title{color:var(--accent-text) !important;}

/* .ep-section is a flex column with gap:18px, so .sec-title's own 20px bottom margin would stack on
   the gap and open a 38px hole under every section heading. */
.ep-section .sec-title{margin-bottom:0;}

.ep-summary{font-size:var(--t-body);font-weight:var(--w-body-ctx);line-height:1.6;color:var(--fg);}
.ep-summary strong{font-weight:var(--w-strong);color:var(--fg);}

/* ---- video -------------------------------------------------------------------------------------
   The frame composes with the system's `.vid-frame` (grid placement) and `.vid-row`/`.vid-copy`
   from blocks.css, so the copy-left / player-right layout is the HOME's, not a second copy of it.
   Border from --line and glow from --glow, so on white the teal bloom switches itself off.
   The expanding-wave hover is ALSO shared: it lives in primitives.css as
   `[data-yt-embed] button:hover [data-vplay]::before` + @keyframes itgPlayRipple, and the markup
   opts in with those two data attributes. Do not restate the ripple here. */
/* frame matches the HOME's video exactly (Nico, 2026-08-24): cyan hairline + soft drop
   shadow. `var(--line)` resolved near-black on the white band and read as a black border. */
.ep-video{position:relative;border-radius:var(--r-card);overflow:hidden;border:1px solid rgba(54,236,255,0.35);aspect-ratio:16/9;box-shadow:0 4px 16px rgba(0,0,0,0.5);background:#000;}
.ep-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.ep-vbtn{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;padding:0;background-size:cover;background-position:center center;display:flex;align-items:center;justify-content:center;}
.ep-vover{position:absolute;inset:0;background:rgba(0,0,0,0.7);opacity:0;transition:opacity .25s;pointer-events:none;}
.ep-vplay{position:absolute;width:92px;height:92px;border-radius:50%;background:var(--itg-lime-dark);opacity:0;transform:scale(0.85);transition:opacity .25s,transform .25s;box-shadow:0 0 36px rgba(150,255,0,0.5);pointer-events:none;}
.ep-vplay-tri{position:absolute;width:0;height:0;border-style:solid;border-width:15px 0 15px 26px;border-color:transparent transparent transparent var(--itg-ink);pointer-events:none;opacity:0;transform:translateX(5px);transition:opacity .25s;}
.ep-vbtn:hover .ep-vover{opacity:1;}
.ep-vbtn:hover .ep-vplay{opacity:1;transform:scale(1);}
.ep-vbtn:hover .ep-vplay-tri{opacity:1;}

/* ---- audio inside the canon frame -------------------------------------------------------------
   Nico's correction: every episode uses the canon 16/9 player, not a native audio widget. Only 150
   of 182 old posts embedded a video, so the other 32 back the SAME frame with the show's MP3. The
   control is revealed by episode-video.js on click and sits at the foot of the frame, over the
   poster, so the green play button and the expanding wave behave identically on every page.
   Nothing here changes the frame's geometry: that is the whole point of the correction. */
.ep-video--playing .ep-audio-el{position:absolute;left:0;right:0;bottom:0;z-index:3;
                                width:100%;height:54px;display:block;
                                background:rgba(4,6,10,.82);}
/* legacy: the standalone audio block this replaced. Kept only so an un-regenerated page does not
   break; the generator no longer emits it. */
.ep-audio{position:relative;display:flex;flex-direction:column;aspect-ratio:auto;
          border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--itg-surface);}
.ep-audio-art{display:block;width:100%;height:auto;aspect-ratio:553/400;object-fit:cover;}
.ep-audio-el{display:block;width:100%;height:54px;background:var(--itg-surface);}

/* sponsor slot under the video note: label above the mark, left-aligned to the copy. Column layout,
   NOT the band-width `.sp-current`, which carries padding:var(--zone-pad) 0 0 and would blow this
   384px column apart. The mark itself reuses `.sp-logo sp-logo--terra` from primitives.css. */
.ep-vid-sponsor{margin-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
/* 53 of the 182 notes name a sponsor. Terra gets its real mark; any other sponsor is set as type,
   because we hold no logo asset for it and a missing image is worse than a wordmark. */
.ep-sponsor-name{font-family:var(--font);font-weight:var(--w-strong);font-size:var(--t-term);
                 letter-spacing:var(--track-tight);color:var(--fg);}

/* The "Connect" list reuses .step-item, so its badge holds "in" or an arrow rather than a number.
   Those are not digits, so the ring needs a slightly smaller glyph to stay optically centred. */
.ep-section .step-num{font-size:var(--t-ui);}

/* ---- article sections ---- */
.ep-section{display:flex;flex-direction:column;gap:18px;}
/* the big numeral is TYPE, so --accent-text (ITG Blue on the band), never --accent */
.ep-sec-num{font-size:44px;font-weight:var(--w-display);letter-spacing:.05em;color:var(--accent-text);line-height:1;}
.ep-section p{font-size:var(--t-small);font-weight:var(--w-body-ctx);line-height:1.7;color:var(--fg);}

/* ---- pull quote ----
   Tint derived from the accent so it follows the band instead of being a fixed lime wash that would
   be invisible on white. Flat fallback first for anything without color-mix. */
blockquote.ep-quote{margin:4px 0;padding:18px 22px 18px 26px;border-left:3px solid var(--accent-text);background:rgba(6,97,170,.045);background:color-mix(in srgb, var(--accent-text) 5%, transparent);border-radius:0 8px 8px 0;}
/* !important required, not decorative: blocks.css sets `.itg-light p{color:#1b242a !important}` and
   only another !important beats it. This rule used to say #fff !important, which on the white band
   would have been white type on white. */
blockquote.ep-quote p{font-size:var(--t-body) !important;font-weight:600;line-height:1.5;color:var(--fg) !important;font-style:italic;}
/* an attribution at body size is fine: its hierarchy comes from weight and ITG Blue, not smallness */
blockquote.ep-quote cite{display:block;margin-top:12px;font-size:var(--t-small);font-weight:var(--w-strong);letter-spacing:.04em;color:var(--accent-text);font-style:normal;}

/* ---- numbered step list ----
   The ring is sized off its numeral so the two scale together instead of a digit rattling inside an
   oversized circle: 34 is 2x the 17px numeral, and 2px reads at that diameter where 1px looked
   incidental. */
.step-list{padding:12px 0 4px 0;display:flex;flex-direction:column;gap:10px;}
.step-item{display:flex;gap:16px;align-items:center;font-size:var(--t-small);font-weight:var(--w-body-ctx);color:var(--fg);line-height:1.55;}
.step-num{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:2px solid var(--accent-text);display:flex;align-items:center;justify-content:center;font-size:var(--t-small);font-weight:var(--w-strong);color:var(--accent-text);}

/* ---- key takeaways ----
   Outlined cards, not filled: --surface IS white in the light context, so a fill would be invisible
   and the border has to carry the edge. */
.takeaways-grid{display:flex;flex-direction:column;gap:14px;}
.takeaway{display:flex;gap:20px;padding:24px;border:1px solid var(--line);border-radius:10px;background:transparent;}
.ta-num{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:rgba(6,97,170,.08);background:color-mix(in srgb, var(--accent-text) 9%, transparent);border:2px solid var(--accent-text);display:flex;align-items:center;justify-content:center;font-size:var(--t-body);font-weight:var(--w-strong);color:var(--accent-text);margin-top:1px;}
.ta-body strong{display:block;font-size:var(--t-body);font-weight:var(--w-strong);color:var(--fg);line-height:1.25;margin-bottom:8px;}
.ta-body p{font-size:var(--t-small);font-weight:var(--w-body-ctx);line-height:1.6;color:var(--fg-muted);}

/* Deleted during the extraction because nothing used them, and dead rules must not ride along into
   178 generated pages: .ep-photo-epnum (no markup anywhere), .divider (its only consumer was the
   rule between hero and body, which the colour boundary replaced), .ep-sec-title and
   .ep-takeaways-title (replaced by .sec-title--h3), .ep-vid-title (existed for one round), and the
   sidebar set .sc / .sc-title / .guest-name / .guest-role / .guest-tag / .sponsor-body /
   .sponsor-link / .platform-list / .platform-row / .platform-dot / .ep-detail-list / .ep-detail-row,
   which went with the redundant guest card. */