/* FWOP-BUILD: 2026-07-11-A29 :: A29 (1) DISPLAY FONT SWAP - Della Respira -> Fraunces site-wide (client-approved; Della was the demo-only face). Fraunces is now the self-hosted VARIABLE display font (roman + a TRUE italic; opsz 9-144 + wght 100-900 axes) in assets/fonts/Fraunces-Variable.woff2 + Fraunces-Italic-Variable.woff2 (latin subset - covers the French accents/OE used on the site). Both the @font-face block and the --serif token switched from Della Respira to Fraunces; Nunito is unchanged as body/UI. Headings set weight via font-weight (mapped to the wght axis) and let optical size auto-track font-size (font-optical-size:auto default), EXCEPT two oversized display heads whose 400 hairlines thin out at size: the PLAYBILL pins font-variation-settings "opsz" 144 + "wght" 560 - via variation-settings, because Elementor's per-post heading CSS overrides plain font-weight at higher specificity (opsz applied but font-weight:560 was being reset to 400) - so the giant "Fishwives of Paris" reads STRONG not wispy; the Contact "Contact Us" head gets "wght" 480 (auto opsz, deliberately lighter than the playbill so the hero stays the strongest head). Template heads (article/archive/404/feature/cta titles, 38-51px) already render Fraunces REAL 600 - a broader rule forces 600 on them, which was synthetic-bold under single-weight Della and is now a true weight - and read strong; section + card heads stay 400 and look right. Ledes, blockquotes and the playbill italic "of" now use REAL Fraunces italic instead of synthesised obliques. Verified across home/playbill, section heads, News + episode singles, News archive, 404, Contact, and the episodes dark-slate CTA. (2) EMILY DROPCAP - added the .dropcap class to Emily's first bio Text Editor widget on Home (page 36 widget fe40e00, a single <p>) and About (page 49 widget 9627256, a 5-paragraph widget) so her opening letter gets the same rose Fraunces drop cap Caroline has. The dropcap rule was rescoped from ".dropcap p::first-letter" to ".dropcap p:first-of-type::first-letter" so a multi-paragraph .dropcap widget caps ONLY its first paragraph (no per-paragraph repeat) - this is what lets Emily's one-widget About bio work without splitting it, and it leaves every existing single-<p> dropcap unchanged. Elementor _elementor_data change; originals backed up to post meta _fwop_dropcap_backup_a29 on 36/49 and _elementor_css + _elementor_element_cache cleared. Prior A28 (1) new token --slate-dark (#486582) added to the :root token bridge; applied to .episode-cta ("Listen or Watch, Today!" pre-footer band) background so it no longer shares the same --slate as the newsletter band directly below it - the two slate sections now read as distinct (cream text/links stay readable on the deeper slate). (2) Episode breadcrumb relabel is a functions.php filter (rank_math/frontend/breadcrumb/items), NOT a CSS change - see functions.php. Prior A27 (1) breadcrumb centering: .breadcrumbs + its inner p now text-align:center (all screen sizes) so the Rank Math crumb lines up with the centred article title/meta/content on singles. (2) Footer newsletter (Option A) - the Entracte newsletter section (the slate band with the Kit form [convertkit form=9667999]) was RELOCATED via Elementor data out of Home(36) + About(49) and into the UAE footer template (elementor-hf #30) as its FIRST top-level container, so it renders once above the footer columns on EVERY page; the standalone in-page Entracte was removed from both pages (no in-body/footer duplication). This is an _elementor_data move (styling is the global .entracte/.entracte-form/.formkit-* rules already in this file - no new CSS); original page/footer data backed up to post meta _fwop_entracte_backup_a27 on 36/49/30. Prior A26 single-post furniture: (1) Rank Math breadcrumbs at the top of every single (rank_math_the_breadcrumbs() in single.php + single-captivate_podcast.php, wrapped in .breadcrumbs.wrap.narrow) - restyled to the program (small uppercase act-label type, rose separators) while keeping Rank Math's schema/markup. (2) Adjacent-post navigation .post-nav at the bottom of singles: previous_post_link/next_post_link scoped in-template so posts link within the SAME category (News->News, future Blog->Blog) and episodes link within the captivate_podcast type (episode->episode) - never crossing types. Two-column prev/next, stacks under 600px. New CSS: .breadcrumbs + .post-nav/.pn-dir/.pn-title. Prior A25 guide-note fleuron fix: the pescado fish added in A24 never rendered because the encore section is the 6th top-level container (below the fold) and Elementor's lazy-background feature emits `.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded) * { background-image:none !important }` - that universal DESCENDANT rule (its !important + higher specificity) blanked the .fleuron element's own background, and the container never gains .e-lazyloaded on this page so it stayed blank permanently. Fix: paint the fish on .program-notes .fleuron::before (absolute, inset:0) instead of on the element - the `*` selector matches elements but NOT ::before pseudo-elements, so the fish is immune to the lazy-background blanking and shows immediately, above and below the fold. .fleuron is now just the 32x71 positioned box. Prior A24 homepage: (1) billing "Ce soir a l'affiche" player - swapped acast iframe for the Captivate SHOW player (player.captivate.fm/show/50fc4c98..., proper <iframe> in the html widget, width:100% h600, .billing-player iframe CSS makes it responsive); (2) guide-note fleuron ❦ (\2766) replaced by the pescado fish (Media Library att #72, 60x133) via CSS on .program-notes .fleuron: inline-block 32px wide/71px auto-height, vertical-align:middle centred on the line, font-size:0 hides the glyph, root-relative uploads URL (survives migration). Prior A23 footer link centering - the REAL fix. Footer links are Elementor Icon List: li>a>span. The <li> is flex but its child <a> is full-width AND itself a flex container with justify-content:normal (=start), left-pinning the text; text-align/li-justify never moved it (A22 missed). Fix (mobile <=767 only): justify-content:center on #colophon .elementor-icon-list-item a. Desktop 4-col left footer unchanged. Prior A22 mobile-centering follow-ups (child alignment contexts that didn't inherit): (1) .act-label section kickers now text-align:center on Home(36)+About(49) at <=767px even where the section body stays left (Contact 22 excluded); (2) footer link items - Elementor Icon List li are display:flex so text-align was ineffective - added justify-content:center on #colophon .elementor-icon-list-item + text-align:center on the ul. All still <=767px, scoped; bio blocks/archives/header unchanged. Prior A21 mobile-only (<=767px) content centering on static PAGE types (body.page = Home/About/Contact) + global footer; archives (.blog/.post-type-archive)/singles (.single)/header untouched (proven via body-class isolation). OPT-IN per block: short/simple blocks centered (Home .hero/.billing/.acte.stage, About .about-intro/.equipe, both-pages .entracte copy); paragraph-heavy blocks stay whole-block LEFT (Home .acte.hosts+.acte.encore, About .about-hosts+.acte.stage, Contact .contact-copy/.contact-card - not listed). Form fields (.entracte-form) forced left even inside centered sections. 404 already centered. Prior A20 Contact page redesign "The Program Insert" (page 22 Elementor restructured into 2-col: LEFT .contact-copy = crest att#67 + OVERSIZED .contact-headline "Contact Us" + copy + fish att#66; RIGHT .contact-card = the SAME Fluent form [fluentform id=1] framed as a paper .mat-style insert with a scallop valance ::before; reuses .contact-form/.act-label/.mat/.curtain; same copy). New CSS: .contact-section/.contact-grid (grid 5fr/7fr, stacks <=860) + .contact-copy/.contact-headline/.contact-crest/.contact-fish/.contact-card. Prior A19 header nav stability fix: the UAE nav (elementor-29) rendered in system-ui - an OS-dependent-width font - so the 6-item desktop nav wrapped ("Contact" to line 2) in a dead zone just above the 1024px hamburger breakpoint on wider system fonts (Windows/Segoe UI). Fix (CSS only): pin nav to Nunito var(--sans) = deterministic ~674px on every machine (at ALL widths), trim tracking (.12em->.08em). nowrap (ul flex-wrap + item white-space) is scoped to @media(min-width:1025px) ONLY - forcing it below 1024 pushed UAE's vertical dropdown items past the viewport (mobile overflow). Selectors carry .elementor-kit-6 AND .elementor-29 (0,5,1) to beat the widget's per-element 0,4,1 rule (kit-6 alone only tied + lost on order). Item gap left at 26px (Elementor's gap rule is 0,6,1; deterministic font already fits, no !important). Full desktop nav fits cleanly to 1024px then switches to hamburger; no wrap, no mobile overflow, no template-29 change. Prior A18 Episodes archive content-parity sections (match live /episodes/): header/intro block (crest att#67 + "Episodes" + rose-italic tagline "New episodes drop every other Tuesday") + DYNAMIC featured-latest block (newest captivate_podcast via WP_Query, player via cfm_captivate_player, .episode-feature 2-col reusing .encore-grid idiom) ABOVE the grid; full-bleed slate platform CTA (.episode-cta: fish att#66 + "Listen or Watch, Today!" + Apple/Spotify/Deezer/YouTube links + .btn-stamp + socials) BELOW. functions.php: pre_get_posts drops the featured (newest) post from the grid so it isn't duplicated; wp_enqueue_scripts loads cfmsync-player-js + front-min.css on the CPT archive (Captivate gates them to is_singular, so the featured embed would render blank otherwise). Grid/loop-card unchanged. Prior A17 Episode templates: single-captivate_podcast.php + archive-captivate_podcast.php + CPT-aware loop-card. Episodes are the Captivate `captivate_podcast` CPT (NOT posts+category); single builds the audio player in the [media slot] from cfm_episode_id meta (player.captivate.fm/episode/{id}), show notes = the_content, archive reuses .post-grid/.post-card at /episodes/. THIS CSS: .episode-player (framed 200px iframe) + .programme-episode meta. Routing: functions.php register_post_type_args filter re-slugs CPT rewrite+has_archive to 'episodes' + Captivate's own single_slug setting = 'episodes' (its post_type_link closure at prio 999 uses it); Elementor page 19 (/episodes/) trashed to free the slug; rewrites flushed. Prior A16 Kit newsletter live: [convertkit form=9667999] swapped into .entracte-form on homepage(36)+About(49) via Shortcode widget (replaced static mockup HTML widget; had to clear _elementor_element_cache to unstick the render). Kit JS-embed injects .seva-form/.formkit-form inline (not iframe); our dormant .formkit-* overrides all WIN (transparent bg, underline .formkit-input, cream stamp .formkit-submit, hidden powered-by) - verified via computed styles. THIS CHANGE: also hide Kit's own .formkit-header/.formkit-subheader (they duplicate our left-column copy in low-contrast grey) + .formkit-background overlay. Swap-point for the real form later = the single shortcode value in each page's entracte-form Shortcode widget. Prior A15 widen main container: .wrap max-width 1100->1250 + Kit container_width 1100->1250 (boxed header/footer align). .wrap.narrow (780) + --measure (62ch) unchanged. Prior A14 theme templates: 404.php (on-brand not-found, reuses .act-label/.btn-stamp/.wrap.narrow) + page.php added (no CSS - fixes the Hello index.php fallthrough so Elementor pages render full-bleed). Prior A13 theme templates: archive.php + index.php + template-parts/loop-card.php (.post-grid post-card list, reuses .mat frame/.act-label/.ed-link; the_posts_pagination styled). Comments closed site-wide (removed from single.php; comment CSS left dormant). Prior A12 theme templates (no Elementor): single.php editorial single-post - .programme-article/.entry-content type system + comments styling, reuses .wrap.narrow/.mat frame/.ed-link idiom. Prior A11 mobile header state-fix (A10 was width-dependent, only worked in the menu-open state; now flex-shrink:0 logo + margin-left:auto toggle = consistent closed+open; logo 150px). Prior A10 (hamburger far-right: space-between + child flex-grow:0; logo 170px @<=1024). Prior A9 fix (A8 site-wide selectors missed: header/footer rows are e-con-boxed -> retargeted .e-con-inner; toggle 0,5,0; sticky beats UAE .ehf-header #masthead). Prior A8 batch: contact intro centering + submit text-color (0,4,0 beats Fluent inline); footer 4-col single row; mobile header align; sticky #masthead — opener content nested in .wrap (clears the vertical act-label like .about-intro) + button rule also targets .ff_btn_style; FF default skin (fluentform-public-default) dequeued in functions.php.
   Sync check: the matching "FWOP-BUILD-END: 2026-07-11-A29" MUST appear at the very
   bottom of the served file. If it's missing, the deployed fwop.css is stale/partial. */
/* ==========================================================
   Fishwives of Paris — "Le Programme du Soir"
   Free-stack edition: Elementor Free + UAE (header/footer)
   + Kit forms. Loaded from the Hello Elementor child theme.

   Token bridge: design variables resolve from Elementor
   globals, with hard fallbacks. Change a color in Site
   Settings and the whole design follows.
   ========================================================== */

/* Self-hosted webfonts — Fraunces (variable display face for headings), Nunito (body/UI).
   Files live in the child theme at assets/fonts/ (src is relative to this file). Fraunces is
   the real, client-approved site display font (it replaced Della Respira). It's a VARIABLE
   font: one file per style carries the full optical-size (opsz 9–144) and weight (wght 100–900)
   axes, so small heads stay readable at low opsz while the giant playbill renders at high-
   contrast display opsz. Roman + a true italic are both loaded (the italic replaces the
   synthesised obliques Della used on ledes/blockquotes/the playbill "of"). */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/Fraunces-Variable.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("fonts/Fraunces-Italic-Variable.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Nunito-Regular.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Nunito-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Nunito-Bold.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/Nunito-Italic.woff2") format("woff2"); }

:root {
  --cream:     var(--e-global-color-cream,     #F8F0DE);
  --ink:       var(--e-global-color-secondary, #1D1B18);
  --rose:      var(--e-global-color-accent,    #BF5B5B);
  --rose-deep: var(--e-global-color-primary,   #9E4343);
  --slate:     var(--e-global-color-slate,     #6C8CAD);
  --slate-dark:                                #486582;   /* deeper slate — separates stacked slate bands (e.g. episode CTA vs the newsletter band below it) */
  --paper:     var(--e-global-color-paper,     #FFFDF8);
  --line:      rgba(29, 27, 24, .16);
  --ink-soft:  rgba(29, 27, 24, .72);

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Nunito", system-ui, -apple-system, sans-serif;
  --measure: 62ch;
}

/* Base type: Nunito body via var(--sans); headings use Fraunces via var(--serif).
   Fraunces is variable: headings drive weight through font-weight (mapped to the wght axis)
   and let optical size track font-size automatically (font-optical-size:auto is the default),
   except the playbill, which pins opsz to its 144 display max. Nunito stays static (400/600/700). */
body { font-weight: 400; background: var(--cream); color: var(--ink); font-family: var(--sans); }

h1, h2, h3,
.elementor-heading-title {
  font-weight: 400;
  line-height: 1.08;
  text-wrap: balance;
}

/* Heading color/font override. Elementor's default `.elementor-widget-heading
   .elementor-heading-title { color: primary }` (0,2,0) is emitted in the PER-POST CSS, which
   loads AFTER fwop.css — so an equal-specificity rule loses the tie. We match its selector and
   add `.elementor-kit-6 ` (body class) → 0,3,0, which beats it regardless of load order. The
   section rose/cream + label-font rules below are likewise lifted to 0,3,0 and, sitting LATER
   in this file, still win the 0,3,0 tie. `.playbill-of` / `.billing-head em` keep their own
   span colour (this rule colours the h1, not them). */
.elementor-kit-6 .elementor-widget-heading .elementor-heading-title { color: var(--ink); font-family: var(--serif); }

/* Constrain prose inside Text Editor widgets */
.elementor-widget-text-editor p { max-width: var(--measure); }

/* ----------------------------------------------------------
   Signature: curtain + stage valance (HTML widgets)
   ---------------------------------------------------------- */

.curtain {
  height: 40px;
  background:
    radial-gradient(circle 26px at 50% -8px, var(--rose) 24px, transparent 25px) -26px 6px / 52px 40px repeat-x,
    radial-gradient(circle 26px at 50% -8px, var(--rose-deep) 24px, transparent 25px) 0 0 / 52px 40px repeat-x,
    linear-gradient(var(--rose-deep), var(--rose-deep)) 0 0 / 100% 10px no-repeat;
}

.stage-valance {
  height: 26px;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(circle 18px at 50% -6px, var(--rose-deep) 16px, transparent 17px) 0 0 / 36px 26px repeat-x;
}

/* ----------------------------------------------------------
   Editorial links + stamp button
   ---------------------------------------------------------- */

.ed-link {
  color: var(--ink);
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: var(--rose);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness .12s ease, color .12s ease;
}
.ed-link:hover { color: var(--rose-deep); text-decoration-thickness: 3px; }
.ed-link-light { color: var(--cream); }
.ed-link-light:hover { color: #fff; }
.or-note { font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); margin-left: .5rem; }

/* Button widget restyle: give the widget wrapper class btn-stamp-widget */
.btn-stamp-widget .elementor-button,
.btn-stamp {
  display: inline-block;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rose-deep);
  background: transparent;
  border: 1.5px solid var(--rose-deep);
  border-radius: 0;
  padding: .8rem 1.8rem;
  transition: background .15s ease, color .15s ease;
}
.btn-stamp-widget .elementor-button:hover,
.btn-stamp:hover { background: var(--rose-deep); color: var(--cream); }

/* ----------------------------------------------------------
   Act labels (Heading widgets, class act-label on the widget)
   ---------------------------------------------------------- */

.acte, .billing, .entracte { position: relative; }

.elementor-kit-6 .act-label .elementor-heading-title,
.act-label {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rose-deep);
}
@media (min-width: 1240px) {
  .elementor-widget.act-label {
    position: absolute;
    top: clamp(3rem, 8vw, 5rem);
    left: 1.4rem;
    width: auto;
    writing-mode: vertical-rl;
  }
}
.elementor-kit-6 .act-label-light .elementor-heading-title,
.act-label-light { color: var(--cream); opacity: .85; }

/* ----------------------------------------------------------
   Photo mats (Image widgets, class mat / tilt / tilt-r)
   ---------------------------------------------------------- */

.mat .elementor-image img,
.mat img {
  background: var(--paper);
  padding: 10px;
  border: 1px solid var(--ink);
  outline: 1px solid var(--line);
  outline-offset: 5px;
  border-radius: 0;
  filter: sepia(.08) saturate(1.04);
}
.mat .widget-image-caption {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--ink-soft);
  text-align: right;
  padding-top: .55rem;
}
.tilt   { transform: rotate(1.2deg); }
.tilt-r { transform: rotate(-1.2deg); }

/* ----------------------------------------------------------
   Hero — playbill
   ---------------------------------------------------------- */

/* Hero layout (classes applied on the containers; containers hold no dimensional
   settings and are content_width:full so there is no .e-con-inner wrapper.
   .hero-photo is a DIRECT grid child of .hero-grid). */
.wrap { max-width: 1250px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem); overflow-x: clip; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero-photo { max-width: 600px; justify-self: end; }

.elementor-kit-6 .program-line .elementor-heading-title {
  font-family: var(--sans);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--rose-deep);
}

/* Playbill — "Fishwives" on line 1, "of Paris" together on line 2 (Option 2 cohesion).
   Fraunces at its display extreme: opsz pinned to 144 (max) for the thin/thick belle-époque
   stroke contrast, wght 560 so the giant head reads STRONG rather than wispy at this size
   (Fraunces 400 hairlines thin out at 5–6rem); slight negative tracking closes the wider
   Fraunces fit. The small rose italic "of" is a real-italic pivot before a full-size Paris. */
.playbill .elementor-heading-title {
  font-size: clamp(3rem, 8.5vw, 5.8rem);
  line-height: .88;
  display: block;
  /* wght lives in font-variation-settings (not font-weight) because Elementor's per-post
     heading CSS overrides plain font-weight at higher specificity — variation-settings on the
     element wins the wght axis regardless of the cascade, so 560 actually renders. */
  font-variation-settings: "opsz" 144, "wght" 560;
  letter-spacing: -.008em;
}
.playbill-a { display: block; }
.playbill-of {
  font-style: italic;
  font-weight: 400;
  font-size: .4em;
  color: var(--rose-deep);
  padding-right: .28em;
  letter-spacing: .01em;
  line-height: 1;
}
.playbill-b { display: inline; }

.lede p {
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  font-style: italic;
  max-width: 44ch;
}
.hero-body p { color: var(--ink-soft); }
.hero-cta p { margin-top: 1.6rem; font-size: 1.1rem; }

/* ----------------------------------------------------------
   Billing / player
   ---------------------------------------------------------- */

.billing { border-top: 1px solid var(--line); }
.billing-head .elementor-heading-title { max-width: 9ch; }
.billing-head em { color: var(--rose-deep); font-style: italic; }
.billing-player iframe { border: 1px solid var(--ink); background: var(--paper); width: 100%; }
.listen-line p { font-size: .95rem; color: var(--ink-soft); }

/* ----------------------------------------------------------
   Acte I — hosts
   ---------------------------------------------------------- */

.hosts { border-top: 1px solid var(--line); }

.host-role {
  display: block;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: .6rem;
}

/* Desktop order swap for Emily (image right) */
@media (min-width: 781px) {
  .host-emily > .e-con-inner > .elementor-widget-image,
  .host-emily > .elementor-widget-image { order: 2; }
}

/* Drop cap on the FIRST paragraph only. Scoped to p:first-of-type so a .dropcap widget can hold
   a whole multi-paragraph bio and still cap just the opening letter — Emily's About bio is a
   single 5-paragraph widget, so this avoids a cap on every paragraph. Single-paragraph .dropcap
   widgets (the home host bios, Caroline's About intro) match p:first-of-type too, so unchanged. */
.dropcap p:first-of-type::first-letter {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 3.3em;
  float: left;
  line-height: .82;
  padding: .04em .12em 0 0;
  color: var(--rose-deep);
}

/* ----------------------------------------------------------
   Acte II — stage (set container background = FWOP Ink)
   ---------------------------------------------------------- */

.stage, .elementor-kit-6 .stage .elementor-heading-title { color: var(--cream); }
.stage-note p { color: rgba(248, 240, 222, .78); max-width: 58ch; margin-inline: auto; }

.yt-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 720px;
  margin: 2rem auto 0;
  background: #000;
  border: 1px solid rgba(248, 240, 222, .35);
  padding: 8px;
}
.yt-facade iframe { width: 100%; height: 100%; border: 0; }
.yt-play { all: unset; cursor: pointer; display: block; width: 100%; height: 100%; }
.yt-play img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.yt-btn {
  position: absolute; inset: 0; margin: auto;
  width: 72px; height: 52px;
  background: var(--rose-deep);
  display: grid; place-items: center;
  transition: transform .15s ease, background .15s ease;
}
.yt-btn::after {
  content: "";
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--cream);
  margin-left: 4px;
}
.yt-play:hover .yt-btn, .yt-play:focus-visible .yt-btn { transform: scale(1.08); background: var(--rose); }

/* ----------------------------------------------------------
   Entracte — Elementor Pro Form restyle (set container bg = FWOP Slate)
   ---------------------------------------------------------- */

.entracte, .elementor-kit-6 .entracte .elementor-heading-title { color: var(--cream); }
.elementor-kit-6 .entracte .elementor-heading-title { color: #fff; }
.entracte-copy p { color: rgba(255, 253, 248, .88); }

/* Kit (ConvertKit) form embedded inside a container with class
   entracte-form. Overrides Kit's injected styles, hence the
   heavier specificity and a few !important on Kit inline CSS. */

.entracte-form .formkit-form[data-uid],
.entracte-form .seva-form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
}
.entracte-form .formkit-form[data-uid] [data-style] { padding: 0 !important; }

.entracte-form .formkit-field { margin-bottom: 1.1rem !important; }

.entracte-form .formkit-input {
  font-family: var(--serif) !important;
  font-size: 1rem !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1.5px solid rgba(255, 253, 248, .55) !important;
  border-radius: 0 !important;
  color: #fff !important;
  padding: .45rem 2px !important;
  box-shadow: none !important;
}
.entracte-form .formkit-input::placeholder {
  font-family: var(--sans);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 253, 248, .75);
}
.entracte-form .formkit-input:focus {
  border-bottom-color: #fff !important;
  outline: none !important;
}

.entracte-form .formkit-submit,
.entracte-form .formkit-submit span {
  font-family: var(--sans) !important;
  font-size: .82rem !important; font-weight: 700 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important;
  color: var(--cream) !important;
  background: transparent !important;
  border: 1.5px solid var(--cream) !important;
  border-radius: 0 !important;
  padding: .8rem 1.8rem !important;
  transition: background .15s ease, color .15s ease;
}
.entracte-form .formkit-submit span { border: 0 !important; padding: 0 !important; }
.entracte-form .formkit-submit:hover { background: var(--cream) !important; }
.entracte-form .formkit-submit:hover span { color: var(--slate) !important; }

.entracte-form .formkit-guarantee,
.entracte-form .formkit-powered-by-convertkit-container,
.entracte-form .formkit-header,
.entracte-form .formkit-subheader,
.entracte-form .formkit-background { display: none !important; }

/* Phase-1 mockup form (static). Keyed to the mockup's own .field markup, NOT Kit's
   .formkit-* classes above (which stay dormant until the Kit embed is swapped in at
   project end). Ported from styles-v2.css. */
.entracte-form { display: grid; gap: 1.1rem; }
.entracte-form .field { display: grid; gap: .35rem; }
.entracte-form .field label {
  font-family: var(--sans);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 253, 248, .9);
}
.entracte-form .field input {
  font: inherit;
  font-family: var(--serif);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid rgba(255, 253, 248, .55);
  border-radius: 0;
  color: #fff;
  padding: .45rem 2px;
  transition: border-color .15s ease;
}
.entracte-form .field input:focus,
.entracte-form .field input:focus-visible { border-bottom-color: #fff; outline: none; }
.entracte .btn-stamp { color: var(--cream); border-color: var(--cream); justify-self: start; }
.entracte .btn-stamp:hover { background: var(--cream); color: var(--slate); }

.fineprint p { font-family: var(--sans); font-size: .78rem; color: rgba(255, 253, 248, .7); }

/* ----------------------------------------------------------
   En rappel — guide
   ---------------------------------------------------------- */

.standfirst p {
  font-style: italic;
  font-size: 1.15rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: .9rem;
}

.program-notes { margin: 0; }
.program-notes .note { margin-bottom: 1.4rem; }
.program-notes .note-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
  margin-bottom: .15rem;
}
/* Guide-note marker: the ❦ (\2766) glyph in <span class="fleuron"> is replaced by the pescado
   fish (Media Library att #72, 60×133). Root-relative URL so it survives the zen→production domain
   migration (CSS can't reference an attachment id; the uploads path is preserved on migration).
   inline-block + vertical-align:middle centres the tall fish on the note-title line; font-size:0
   hides the old glyph. The fish is painted on ::before, NOT on the .fleuron element itself,
   because the encore section sits below the fold and Elementor's lazy-background feature emits
   `.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded) * { background-image:none !important }`
   — that universal descendant rule blanks the element's own background (and its !important +
   higher specificity beat ours) but does NOT match ::before, so the pseudo-element is immune. */
.program-notes .fleuron {
  display: inline-block;
  position: relative;
  width: 32px;
  height: 71px;                 /* 32 × 133/60 — keeps the source aspect */
  margin-right: .55rem;
  vertical-align: middle;
  font-size: 0;
  line-height: 0;
}
.program-notes .fleuron::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/wp-content/uploads/2026/07/pescado.webp) center center / contain no-repeat;
}
.program-notes .note-body { margin: 0; max-width: 58ch; color: var(--ink-soft); }

.encore-photo { max-width: 420px; }
@media (min-width: 781px) {
  .encore-photo { position: sticky; top: 2rem; }
}

/* ----------------------------------------------------------
   Header / nav / footer
   ---------------------------------------------------------- */

.masthead { border-bottom: 1px solid var(--line); background: var(--cream); }

/* UAE (hfe) Navigation Menu widget — class site-nav on the widget.
   The widget's own typography was set to `system-ui` — an OS font whose width VARIES per machine
   (wider on Windows/Segoe UI). That let the 6-item desktop nav outgrow the row in a band just above
   the 1024px hamburger breakpoint, wrapping "Contact" to a 2nd line. Fix: pin the nav to our loaded
   Nunito so its width is DETERMINISTIC on every machine (~674px — fits with ~96px headroom at 1024px),
   trim the tracking (.12em→.08em), and force nowrap so the row can never break — the full desktop nav
   now fits cleanly down to 1024px, then switches to the hamburger. Selectors carry BOTH .elementor-kit-6
   AND .elementor-29 (0,5,1): the widget's per-element rule is 0,4,1, so .elementor-kit-6 alone only tied
   it and lost on source order. (The item gap stays at its designed 26px — Elementor's gap rule is 0,6,1
   and the deterministic font already fits, so no !important needed.) Header CSS only — NO change to the
   template-29 Elementor data. */
.elementor-kit-6 .elementor-29 .site-nav .hfe-nav-menu a.hfe-menu-item,
.elementor-kit-6 .elementor-29 .site-nav .menu-item > a {
  font-family: var(--sans);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.elementor-kit-6 .elementor-29 .site-nav .hfe-nav-menu a.hfe-menu-item:hover,
.elementor-kit-6 .elementor-29 .site-nav .menu-item > a:hover,
.elementor-kit-6 .elementor-29 .site-nav .current-menu-item > a {
  border-bottom-color: var(--rose);
  color: var(--ink);
}
/* nowrap ONLY on the desktop horizontal nav (>1024px). Below that the menu is UAE's vertical
   dropdown, where forcing nowrap/flex-wrap pushed items past the viewport (mobile overflow). */
@media (min-width: 1025px) {
  .elementor-kit-6 .elementor-29 .site-nav .hfe-nav-menu { flex-wrap: nowrap; }
  .elementor-kit-6 .elementor-29 .site-nav .hfe-nav-menu a.hfe-menu-item,
  .elementor-kit-6 .elementor-29 .site-nav .menu-item > a { white-space: nowrap; }
}
/* Header row never wraps: logo|nav (desktop) or logo|hamburger (mobile) — always one line. */
.elementor-kit-6 .elementor-29 .elementor-element-02a9d157 > .e-con-inner { flex-wrap: nowrap; }
/* Keep UAE's mobile hamburger inheriting brand ink */
.site-nav .hfe-nav-menu-icon { color: var(--ink); }

.colophon { border-top: 1px solid var(--ink); }
.elementor-kit-6 .colophon .elementor-heading-title {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--rose-deep);
}
.colophon a { color: var(--ink); text-decoration: none; }
.colophon a:hover { color: var(--rose-deep); text-decoration: underline; text-underline-offset: 3px; }
.fin p { text-align: center; font-style: italic; color: var(--ink-soft); }
.copyright p {
  text-align: center;
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--ink-soft);
  max-width: none;
}

/* ----------------------------------------------------------
   Mobile adjustments + reduced motion
   ---------------------------------------------------------- */

@media (max-width: 780px) {
  .tilt, .tilt-r { transform: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { justify-self: center; max-width: 440px; }
  .encore-photo { position: static; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ==========================================================
   BATCH 2 — layout for sections 02–06 + stage/entracte backgrounds
   Ported from styles-v2.css. Backgrounds are classes here because the
   container Background→global-color mechanism did not generate CSS via
   Elementor _elementor_data on this install.
   ========================================================== */

.stage    { background: var(--ink);   padding-block: 0 clamp(3rem, 7vw, 5rem); text-align: center; }
.entracte { background: var(--slate); padding-block: clamp(3rem, 7vw, 5rem); }

/* 02 Billing */
.billing { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.billing-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }

/* 03 Hosts */
.hosts { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); }
.acte-head { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.crest { width: clamp(150px, 20vw, 200px); margin: 0 auto 1.2rem; }
.host { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.host-caroline { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); margin-bottom: clamp(3rem, 7vw, 5rem); }
.host-caroline .mat { transform: rotate(-1deg); max-width: 520px; }
.host-emily { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.host-emily .mat { transform: rotate(1deg); max-width: 460px; justify-self: end; }
.host-emily .host-copy { justify-self: end; }

/* 04 Stage */
.stage-cta { margin-top: 1.75rem; }
/* CTA sits in a text-align:center .stage, but .elementor-widget-text-editor p caps the box at 62ch with no auto-margin, so it hugged left; center the box (same idiom as .stage-note). Shared: homepage Acte II + About podcast. */
.stage-cta p { margin-inline: auto; }
.wrap.narrow { max-width: 780px; }

/* 05 Entracte */
.entracte-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }

/* 06 Encore */
.encore { padding-block: clamp(3rem, 7vw, 5rem); }
.encore-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }

@media (max-width: 960px) {
  .billing-grid { grid-template-columns: 1fr; }
  .billing-head .elementor-heading-title { max-width: none; }
}
@media (max-width: 780px) {
  .host-caroline, .host-emily { grid-template-columns: 1fr; }
  .host-caroline .mat, .host-emily .mat { transform: none; justify-self: center; margin-inline: auto; }
  .host-emily .host-copy { justify-self: start; }
  .entracte-grid { grid-template-columns: 1fr; }
  .encore-grid { grid-template-columns: 1fr; }
}


/* -----------------------------------------------------------
   About page - intro section opener (.about-intro). Cream, positioned,
   padded; replaces the borrowed .encore reuse. position:relative anchors
   the >=1240px vertical .act-label to the section.
   ----------------------------------------------------------- */
.about-intro { position: relative; padding-block: clamp(3rem, 7vw, 5rem); }

/* About page - team section (.equipe). Same cream + padding + position as .about-intro;
   replaces the borrowed acte-encore combo on the About team section (S4). */
.equipe { position: relative; padding-block: clamp(3rem, 7vw, 5rem); }

/* Content-page main title: an <h1> heading widget sized to match the
   .acte-head h2 look. Scoped to Elementor heading h1s so it never touches
   theme/archive h1s; the homepage playbill h1 keeps its size via the
   higher-specificity .playbill rule. */
h1.elementor-heading-title { font-size: clamp(1.9rem, 3.8vw, 2.6rem); }

/* -----------------------------------------------------------
   Team grid - About page team credits (3 people, name + role per cell).
   Role label reuses the existing .host-role utility; name matches
   .program-notes .note-title values. Plain-class grid (ties .e-con on
   specificity, wins by load order); stacks at the standard 780px breakpoint.
   ----------------------------------------------------------- */
.team-grid > .elementor-widget-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 4vw, 3rem); }
.team-member .team-name { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; margin: 0 0 .15rem; }
@media (max-width: 780px) { .team-grid > .elementor-widget-container { grid-template-columns: 1fr; } }


/* About hosts: mirror the homepage alternation to match the live /about/ layout
   (Caroline photo-right, Emily photo-left). Order + horizontal edge only; vertical
   balance (align-items) stays the homepage default until real host photos are in.
   Homepage hosts are untouched. */
@media (min-width: 781px) {
  .about-hosts .host-caroline > .elementor-widget-image { order: 2; justify-self: end; }
  .about-hosts .host-emily   > .elementor-widget-image { order: 0; justify-self: start; }
}


/* About hosts: top-align photo + copy. Real photos are tall portraits and the
   bios are long, so align-items:center floated the text; start-aligns the name to
   the photo top. About-scoped; homepage hosts keep align-items:center. */
.about-hosts .host { align-items: start; }


/* ----------------------------------------------------------
   Contact page (page 22). .contact-intro = same cream+padded+relative
   opener as .about-intro/.equipe (vertical .act-label anchor). .contact-form
   remaps Fluent Forms output (.ff-el-*) onto the .entracte-form .field idiom
   — serif inputs, uppercase sans labels, underline borders, btn-stamp submit —
   but in the ink/light palette since it sits on cream, not the slate newsletter.
   .elementor-kit-6 prefix per the load-order specificity convention.
   ---------------------------------------------------------- */
.contact-intro { position: relative; padding-block: clamp(3rem, 7vw, 5rem); }
.contact-form { max-width: 640px; margin-inline: auto; }
.elementor-kit-6 .contact-form .ff-el-group { margin-bottom: 1.4rem; }
.elementor-kit-6 .contact-form .ff-el-input--label label {
  font-family: var(--sans);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
}
.elementor-kit-6 .contact-form .ff-el-form-control {
  font: inherit; font-family: var(--serif); font-size: 1rem;
  background: transparent; border: 0;
  border-bottom: 1.5px solid rgba(29, 27, 24, .35);
  border-radius: 0; color: var(--ink);
  padding: .5rem 2px; width: 100%;
  transition: border-color .15s ease;
}
.elementor-kit-6 .contact-form textarea.ff-el-form-control { min-height: 8rem; resize: vertical; }
.elementor-kit-6 .contact-form .ff-el-form-control:focus,
.elementor-kit-6 .contact-form .ff-el-form-control:focus-visible {
  border-bottom-color: var(--rose-deep); outline: none;
}
.elementor-kit-6 .contact-form .ff-btn.ff-btn-submit,
.elementor-kit-6 .contact-form .ff-btn.ff_btn_style {
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--rose-deep); background: transparent;
  border: 1.5px solid var(--rose-deep); border-radius: 0;
  padding: .8rem 1.8rem; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.elementor-kit-6 .contact-form .ff-btn.ff-btn-submit:hover,
.elementor-kit-6 .contact-form .ff-btn.ff_btn_style:hover { background: var(--rose-deep); color: var(--cream); }

/* --- Contact page redesign (A20) — "The Program Insert" -----------
   Two-column editorial (.contact-section > .wrap.contact-grid): LEFT .contact-copy =
   crest emblem + OVERSIZED display headline + the copy + a fish motif; RIGHT .contact-card =
   the Fluent form (reusing the .contact-form styling above) framed as a paper "program
   insert" with a scallop valance over its top. Warm cream; stacks (copy above form) <=860px. */
.contact-section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); } }

/* LEFT — personality */
.contact-copy { position: relative; }
.contact-crest img { display: block; width: clamp(120px, 15vw, 165px); height: auto; margin-bottom: 1.5rem; }
.contact-copy .act-label { margin-bottom: .7rem; }
/* keep the kicker inline above the headline — the >=1240px rule (line ~132) otherwise turns
   any .act-label into an absolutely-positioned vertical section anchor (it overlapped the crest). */
.contact-copy .elementor-widget.act-label { position: static; writing-mode: horizontal-tb; top: auto; left: auto; width: auto; }
.elementor-kit-6 .contact-headline .elementor-heading-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3rem, 7.5vw, 5.4rem);
  line-height: .92; margin: 0 0 1.4rem;
  /* Fraunces 400 hairlines thin out at this display size (up to 5.4rem); bump the wght axis to
     480 for solid presence — auto opsz keeps the contrast size-appropriate across the clamp, so
     the mobile size doesn't over-contrast. Lighter than the playbill's 560, keeping the hero the
     strongest head. Set via font-variation-settings so Elementor's per-post CSS can't override it. */
  font-variation-settings: "wght" 480;
}
.contact-lede p {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.7; color: var(--ink-soft);
  max-width: 42ch; margin: 0;
}
.contact-fish img { display: block; width: clamp(150px, 22vw, 240px); height: auto; margin-top: 2.2rem; }

/* RIGHT — the form as a framed paper "program insert" card (reuses the .mat idiom) */
.contact-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  outline: 1px solid var(--line);
  outline-offset: 6px;
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  padding-top: calc(clamp(1.8rem, 3.5vw, 2.8rem) + 30px);
}
/* scallop valance across the card's top edge — the curtain over the program insert */
.contact-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 26px;
  background: radial-gradient(circle 18px at 50% -6px, var(--rose-deep) 16px, transparent 17px) 0 0 / 36px 26px repeat-x;
}
.contact-card .contact-form { max-width: none; margin: 0; }


/* ----------------------------------------------------------
   A8 batch (2026-07-10). [1] Contact intro centering (page-scoped);
   [3] footer 4-col single row, [4] mobile header align, [5] sticky
   header -- all site-wide (header tpl elementor-29, footer tpl elementor-30).
   ---------------------------------------------------------- */

/* [1] Contact intro: center the h1 + description within .wrap (matches the
   .acte-head centered-head pattern). Form fields stay left-aligned. */
.contact-intro .wrap { text-align: center; }
.contact-intro .wrap .contact-form { text-align: left; }
.contact-intro .wrap > .elementor-widget-text-editor p { max-width: 60ch; margin-inline: auto; }

/* [3] Footer columns (elementor-30): the columns row is flex-wrap:wrap so the 4th
   column drops to a second row. On desktop force one nowrap row of 4 equal columns;
   below 1025px it reverts to the default wrap (stacks on mobile). */
@media (min-width: 1025px) {
  .elementor-kit-6 .elementor-30 .elementor-element-6fb3f099 > .e-con-inner { flex-wrap: nowrap; }
  .elementor-kit-6 .elementor-30 .elementor-element-6fb3f099 > .e-con-inner > .e-con { flex: 1 1 0; min-width: 0; }
}

/* [4] Mobile header (elementor-29): the UAE toggle carries .hfe-nav-menu__toggle{margin:0 auto}
   which centers the hamburger in its box instead of beside the logo. Keep logo +
   hamburger on one nowrap row, vertically centered; kill the logo img inline baseline
   gap. CSS on the rendered nav -- no UAE template change. */
@media (max-width: 1024px) {
  .elementor-kit-6 .elementor-29 .elementor-element-02a9d157 > .e-con-inner { flex-wrap: nowrap; align-items: center; justify-content: space-between; }
  .elementor-kit-6 .elementor-29 .elementor-element-02a9d157 > .e-con-inner > .elementor-element-cc8c436e { flex-shrink: 0; }
  .elementor-kit-6 .elementor-29 .elementor-element.elementor-element-cc8c436e img { display: block; width: 150px; height: auto; }
  .elementor-kit-6 .elementor-29 .elementor-element.elementor-element-712171ab .hfe-nav-menu__toggle { margin: 0 0 0 auto; display: flex; align-items: center; }
}

/* [5] Sticky header: pin #masthead (curtain valance is its first child, so it stays
   attached) to the top on scroll. Sticky stays in normal flow -> no content overlap.
   Applied at all widths (mobile benefits too; UAE dropdown sits inside #masthead). */
.elementor-kit-6.ehf-header #masthead { position: sticky; top: 0; z-index: 999; background: var(--cream); }


/* ==========================================================
   THEME TEMPLATES (no Elementor) - "Le Programme du Soir".
   single.php etc. render via Hello get_header()/get_footer(),
   so the UAE curtain header + footer are inherited. Reuses
   .wrap/.wrap.narrow, .act-label, the .mat frame, .ed-link idiom
   and the --serif/--sans/--ink type tokens.
   ========================================================== */

/* --- A. Single post (single.php) ------------------------- */
.programme-main { background: var(--cream); }
.programme-article { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.article-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.article-kicker { margin-bottom: .8rem; }
.article-kicker a { color: inherit; text-decoration: none; }
.article-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.08;
  margin: 0 0 1rem; text-wrap: balance;
}
.article-meta {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0;
}
.article-meta a { color: inherit; text-decoration: none; }
.article-meta .sep { color: var(--rose); }

/* featured hero + content images: reuse the .mat frame, straight (no tilt) */
.article-hero { margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.article-hero img,
.entry-content img {
  background: var(--paper); padding: 10px;
  border: 1px solid var(--ink); outline: 1px solid var(--line); outline-offset: 5px;
  border-radius: 0; filter: sepia(.08) saturate(1.04); height: auto; max-width: 100%;
}

/* --- Editorial body type (.entry-content) ---------------- */
.entry-content { font-family: var(--sans); color: var(--ink); font-size: 1.05rem; line-height: 1.7; }
.entry-content > * { max-width: var(--measure); margin-inline: auto; }
.entry-content p { margin: 0 0 1.3rem; }
.entry-content h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; margin: 2.4rem auto 1rem; }
.entry-content h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.2; margin: 2rem auto .8rem; }
.entry-content a { color: var(--ink); font-style: italic; text-decoration: underline; text-decoration-color: var(--rose); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .12s ease; }
.entry-content a:hover { color: var(--rose-deep); }
.entry-content ul, .entry-content ol { margin: 0 auto 1.3rem; padding-left: 1.4rem; }
.entry-content li { margin-bottom: .4rem; }
.entry-content blockquote { border-left: 3px solid var(--rose); margin: 2rem auto; padding: .3rem 0 .3rem 1.4rem; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--ink-soft); }
.entry-content blockquote p { margin-bottom: .5rem; }
.entry-content blockquote cite { display: block; font-family: var(--sans); font-style: normal; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rose-deep); }
.entry-content figure { max-width: 100%; margin: 2rem auto; text-align: center; }
.entry-content figcaption, .article-hero figcaption { font-family: var(--sans); font-size: .8rem; font-style: italic; color: var(--ink-soft); margin-top: .7rem; }

/* --- Tags ------------------------------------------------ */
.article-tags { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.4rem; border-top: 1px solid var(--line); font-family: var(--sans); font-size: .82rem; }
.article-tags .tags-label { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-deep); margin-right: .6rem; }
.article-tags a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.article-tags a:hover { color: var(--rose-deep); border-bottom-color: var(--rose); }

/* --- Breadcrumbs (Rank Math output, restyled to the program) ---
   rank_math_the_breadcrumbs() emits <nav class="rank-math-breadcrumb"><p> ... </p></nav> with
   <span class="separator"> between crumbs and <span class="last"> on the current page. We keep its
   schema/markup and only skin it: small uppercase act-label type, rose separators. */
.breadcrumbs { margin-bottom: clamp(1.3rem, 3vw, 2rem); text-align: center; }
.breadcrumbs .rank-math-breadcrumb p,
.breadcrumbs > p {
  margin: 0;
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;   /* centre the crumb to match the centred title/meta/content */
}
.breadcrumbs a { color: var(--rose-deep); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .12s ease; }
.breadcrumbs a:hover { border-bottom-color: var(--rose); }
.breadcrumbs .separator { margin: 0 .5em; color: var(--rose); font-weight: 400; }
.breadcrumbs .last { color: var(--ink); }

/* --- Adjacent-post navigation (.post-nav) ----------------
   previous_post_link / next_post_link, scoped in the templates (posts -> same category,
   episodes -> same post type). Two columns; prev left, next right; stacks on narrow screens. */
.post-nav {
  margin-top: clamp(2.5rem, 5vw, 3.8rem); padding-top: 1.6rem;
  border-top: 1px solid var(--ink);
  display: flex; flex-wrap: wrap; gap: 1.4rem 2rem;
}
.post-nav-prev, .post-nav-next { flex: 1 1 40%; min-width: 0; }
.post-nav-next { margin-left: auto; text-align: right; }
.post-nav a { display: inline-flex; flex-direction: column; gap: .3rem; text-decoration: none; color: var(--ink); max-width: 100%; }
.post-nav-prev a { align-items: flex-start; text-align: left; }
.post-nav-next a { align-items: flex-end; text-align: right; }
.post-nav .pn-dir { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-deep); }
.post-nav .pn-title { font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.2; color: var(--ink); transition: color .12s ease; }
.post-nav a:hover .pn-title { color: var(--rose-deep); }
@media (max-width: 600px) {
  .post-nav { flex-direction: column; gap: 1.5rem; }
  .post-nav-next { margin-left: 0; text-align: left; }
  .post-nav-next a { align-items: flex-start; text-align: left; }
}

/* --- Captivate episode single (.programme-episode) -------- */
/* The [media slot] holds the Captivate audio player. cfm_captivate_player() emits a
   .cfm-player-iframe wrapper (inline-styled by the plugin: 200px, radius 6px) that Captivate's
   player JS initialises. We give it our square-cornered frame + spacing and let it span the
   .wrap.narrow reading column. */
.episode-player { margin: 0 auto clamp(1.8rem, 3.5vw, 2.6rem); }
.episode-player .cfm-player-iframe {
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  border: 1px solid var(--ink); outline: 1px solid var(--line); outline-offset: 4px;
  background: var(--paper);
}
.episode-player .cfm-player-iframe iframe { display: block; }
.programme-episode .article-meta .ep-duration { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* --- Comments (Hello comments.php output) ---------------- */
.article-comments { margin-top: clamp(2.5rem, 5vw, 4rem); }
.comments-area { border-top: 1px solid var(--ink); padding-top: 1.8rem; }
.comments-area .title-comments, .comments-area .comment-reply-title { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; margin: 0 0 1.4rem; }
.comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.comment-list .comment-body { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.comment-author .fn { font-family: var(--sans); font-weight: 700; font-style: normal; }
.comment-metadata, .comment-awaiting-moderation { font-family: var(--sans); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-content { font-family: var(--sans); line-height: 1.6; margin-top: .4rem; }
.comment-form { display: grid; gap: 1rem; max-width: var(--measure); }
.comment-form label { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); display: block; margin-bottom: .3rem; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea { font: inherit; font-family: var(--serif); width: 100%; background: transparent; border: 0; border-bottom: 1.5px solid rgba(29, 27, 24, .35); border-radius: 0; padding: .5rem 2px; color: var(--ink); }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-bottom-color: var(--rose-deep); }
.comment-form .submit { font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-deep); background: transparent; border: 1.5px solid var(--rose-deep); border-radius: 0; padding: .8rem 1.8rem; cursor: pointer; transition: background .15s ease, color .15s ease; }
.comment-form .submit:hover { background: var(--rose-deep); color: var(--cream); }


/* --- B. Archive / blog index (archive.php, index.php, template-parts/loop-card.php) ---
   .post-grid is a genuine repeating post-card grid (NOTE: the homepage .encore-grid is a
   2-col feature layout, not a card grid), built in the same visual language: .mat-style
   framed thumbnails, .act-label category kicker, serif titles, .ed-link more-links. */
.programme-archive { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.archive-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.archive-kicker { margin-bottom: .7rem; }
.archive-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.08; margin: 0; }
.archive-description { font-family: var(--sans); color: var(--ink-soft); margin: .9rem auto 0; max-width: 58ch; line-height: 1.6; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 4vw, 3rem); }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }

.post-card { display: flex; flex-direction: column; }
.post-card-media { display: block; margin-bottom: 1rem; }
.post-card-media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper); padding: 8px; border: 1px solid var(--ink); outline: 1px solid var(--line); outline-offset: 4px; filter: sepia(.08) saturate(1.04); }
.post-card-media.is-empty { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--ink); outline: 1px solid var(--line); outline-offset: 4px; }
.post-card-fleuron { font-size: 1.6rem; color: var(--rose); }
.post-card-kicker { margin-bottom: .4rem; }
.post-card-kicker a { color: inherit; text-decoration: none; }
.post-card-title { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.16; margin: 0 0 .35rem; }
.post-card-title a { color: var(--ink); text-decoration: none; }
.post-card-title a:hover { color: var(--rose-deep); }
.post-card-meta { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .7rem; }
.post-card-meta .sep { margin-inline: .5em; color: var(--rose); }
.post-card-excerpt { font-family: var(--sans); color: var(--ink-soft); line-height: 1.6; font-size: .95rem; }
.post-card-excerpt p { margin: 0 0 .8rem; }
.post-card-more { font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .03em; font-style: normal; margin-top: auto; }

/* pagination (the_posts_pagination markup: nav.pagination > .nav-links > .page-numbers) */
.programme-archive .pagination { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.4rem; border-top: 1px solid var(--line); }
.programme-archive .pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; align-items: center; }
.programme-archive .page-numbers { font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: .4rem .7rem; border: 1px solid transparent; }
.programme-archive a.page-numbers:hover { color: var(--rose-deep); }
.programme-archive .page-numbers.current { border-color: var(--rose-deep); color: var(--rose-deep); }
.archive-empty { text-align: center; font-family: var(--serif); font-style: italic; color: var(--ink-soft); padding-block: 3rem; }

/* --- Episodes archive: header/intro + featured-latest + platform CTA ---------
   Static sections wrapping the shared .post-grid (unchanged). Reuses .crest, .act-label,
   .ed-link, .btn-stamp, .episode-player; the CTA is a full-bleed slate pre-footer band. */
.programme-episodes { padding-bottom: 0; }               /* CTA band sits flush to the footer */
.episodes-head .crest { display: block; }
.episodes-tagline {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--rose-deep); margin: .7rem 0 0;
}

/* featured latest — 2-col feature (player + copy), same idiom as .encore-grid */
.episode-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 860px) { .episode-feature { grid-template-columns: 1fr; gap: 1.6rem; } }
.feature-media .episode-player { margin: 0; }
.feature-thumb { margin: 0; }
.feature-thumb img { width: 100%; height: auto; background: var(--paper); padding: 10px; border: 1px solid var(--ink); outline: 1px solid var(--line); outline-offset: 5px; }
.feature-copy .act-label { margin-bottom: .6rem; }
.feature-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.1; margin: 0 0 .8rem; }
.feature-title a { color: var(--ink); text-decoration: none; }
.feature-title a:hover { color: var(--rose-deep); }
.feature-excerpt { font-family: var(--sans); color: var(--ink-soft); line-height: 1.7; }
.feature-excerpt p { margin: 0 0 1rem; }
.feature-note { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-deep); margin: 0 0 1rem; }
.feature-more { font-style: normal; }

/* platform CTA — full-bleed slate pre-footer band */
.episode-cta { background: var(--slate-dark); color: var(--cream); padding-block: clamp(3rem, 7vw, 5rem); margin-top: clamp(3rem, 6vw, 5rem); text-align: center; }
.episode-cta-inner { display: flex; flex-direction: column; align-items: center; }
.cta-fish { width: clamp(120px, 22vw, 200px); height: auto; margin-bottom: 1.4rem; }
.cta-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 4.4vw, 2.8rem); color: var(--cream); margin: 0 0 1rem; }
.cta-copy { font-family: var(--sans); color: rgba(248, 240, 222, .85); line-height: 1.7; max-width: 60ch; margin: 0 auto 1.8rem; }
.cta-copy a { color: var(--cream); text-decoration: underline; text-decoration-color: var(--rose); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cta-copy a:hover { color: #fff; }
.episode-cta .btn-stamp { color: var(--cream); border-color: var(--cream); }
.episode-cta .btn-stamp:hover { background: var(--cream); color: var(--slate); }
.cta-socials { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; justify-content: center; padding: 0; margin: 1.8rem 0 0; }
.cta-socials a { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(248, 240, 222, .72); text-decoration: none; }
.cta-socials a:hover { color: var(--cream); }


/* --- C. 404 (404.php) - on-brand not-found ------------------- */
.error-404 { padding-block: clamp(3.5rem, 9vw, 7rem); text-align: center; }
.error-404 .act-label { display: inline-block; margin-bottom: 1rem; }
.error-404-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; margin: 0 0 1rem; text-wrap: balance; }
.error-404-lede { font-family: var(--sans); color: var(--ink-soft); font-size: 1.1rem; line-height: 1.6; max-width: 48ch; margin: 0 auto 2rem; }
.error-404-cta { margin-bottom: 2.5rem; }
.error-404-nav { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; max-width: 30rem; margin: 0 auto; padding-top: 1.6rem; border-top: 1px solid var(--line); font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.error-404-nav a { color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.error-404-nav a:hover { color: var(--rose-deep); border-bottom-color: var(--rose); }

/* --- Mobile centering (A21) — static PAGE types + footer -----------
   <=767px only. Page-class isolation: body.page (Home/About/Contact) + the global footer;
   News (.blog), archives (.post-type-archive), singles (.single) and the header stay untouched.
   OPT-IN — only short/simple blocks are listed, so they center. Paragraph-heavy blocks (Home
   .acte.hosts + .acte.encore, About .about-hosts + .acte.stage, Contact .contact-copy/.contact-card)
   are NOT listed → each stays LEFT as a whole unit. Form fields always stay left (centered labels
   = bad UX). The 404 (.error-404) is already centered at all widths, so it needs nothing here. */
@media (max-width: 767px) {
  body.page-id-36 .hero,
  body.page-id-36 .billing,
  body.page-id-36 .acte.stage,
  body.page .entracte,
  body.page-id-49 .about-intro,
  body.page-id-49 .equipe {
    text-align: center;
  }
  /* Section act-label kickers ("Acte I · Les Hôtesses", "En rappel · Le Guide", "Les Hôtesses"…)
     center on the centered pages (Home/About) — even where the section BODY stays left. On mobile
     the >=1240px vertical-margin rule is off, so it's a normal horizontal heading; it kept a left
     alignment, so center it explicitly. (Contact 22 excluded — its whole block stays left.) */
  body.page-id-36 .act-label,
  body.page-id-49 .act-label { text-align: center; }
  /* center block-level media in the centered blocks (text-align handles text + inline items) */
  body.page-id-36 .hero .elementor-widget-image img,
  body.page-id-36 .billing iframe,
  body.page-id-36 .acte.stage iframe,
  body.page-id-36 .acte.stage .elementor-widget-image img,
  body.page-id-49 .about-intro .elementor-widget-image img,
  body.page-id-49 .equipe .elementor-widget-image img {
    margin-inline: auto;
  }
  /* CTAs/stamp buttons in centered blocks — neutralise any justify-self:start, recentre */
  body.page-id-36 .hero .btn-stamp,
  body.page-id-36 .billing .btn-stamp,
  body.page-id-36 .acte.stage .btn-stamp { justify-self: center; margin-inline: auto; }

  /* About's "About the Podcast" (.acte.stage) is a long paragraph → whole block LEFT. The
     .acte.stage base design is centered (right for Home's short stage), so force it left here only. */
  body.page-id-49 .acte.stage { text-align: left; }
  body.page-id-49 .acte.stage .stage-note p,
  body.page-id-49 .acte.stage .elementor-widget-text-editor p { margin-inline: 0; }

  /* FORM fields/labels ALWAYS left, even inside the centered .entracte (centered labels = bad UX) */
  body.page .entracte-form,
  body.page .entracte-form * { text-align: left; }

  /* Footer — centered on ALL pages (logo + link columns). The footer is <footer id="colophon">
     (an ID, not a class), wrapping the elementor-30 footer template. */
  #colophon,
  #colophon .elementor-widget-container { text-align: center; }
  #colophon .elementor-widget-image img { margin-inline: auto; }
  /* footer link items: Elementor Icon List. The <li> is flex, but its child <a> is FULL-WIDTH and is
     ITSELF a flex container with justify-content:normal (=start), which left-pins the text. So the
     element that actually controls the link's horizontal position is the <a> — center IT. (text-align
     on the ul/li can't move a flex child; that's why the block heading centered but the flex link didn't.) */
  #colophon .elementor-icon-list-items { text-align: center; }
  #colophon .elementor-icon-list-item { justify-content: center; }
  #colophon .elementor-icon-list-item a { justify-content: center; }
}

/* FWOP-BUILD-END: 2026-07-11-A29 */