/* ameliebeerens.com: the Brazen room (/brazen), rebuilt from Amélie's
   /brazen brief of 9 Oct 2026. Loaded after pages.css when a page uses a
   bz- class, which is this page only. The page itself is the operator page,
   colour for colour (assets/scheme.css): red is still the structural
   colour, the hairlines and the ink type are the site's, the buttons are
   filled with the room's pink (Amelie, 9 Oct 2026, over the dark button). The room's magenta is --brazen-pink below and it
   is used in the places her brief names and nowhere else:

     the section eyebrows, the italic word of each H2, the 3px top rule and
     the price of a format card, the active and hover states (links, the
     ticked radio, the chips), the dot in the header pill, the buttons and
     the hue band at the foot of the hero.

   build_site.py refuses the build if the token appears in any other
   stylesheet, or if this stylesheet is loaded on a page that is not the
   Brazen room.

   Pink on white is 3.3:1, so the magenta itself is type at 24px and up
   only (the H2's italic word at 56px, the price at 40px) and a fill
   everywhere else. The small capitals take --brazen-pink-ink, the same hue
   darkened to 4.5:1 on white and on paper, lightened in the dark scheme;
   on the dark band they take --brazen-pink-on-ink, which is that lighter
   value in both schemes since the band is dark in both. */

[data-theme="brazen"] {
  --brazen-pink: #f74897;          /* her magenta: 24px+ type, rules and fills */
  --brazen-pink-ink: #d70966;      /* the same hue at 4.5:1 on white and on paper: the small capitals */
  --brazen-pink-on-ink: #f863a6;   /* on the dark band: 5.5:1 on the ground */
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="brazen"]:not([data-scheme="light"]) { --brazen-pink-ink: #f863a6; }
}
:root[data-theme="brazen"][data-scheme="dark"] { --brazen-pink-ink: #f863a6; }

/* ------------------------------------------------------------- the room -- */
/* The eyebrow of a section head, and the labels of the three columns of
   "My edge", which are that section's only labels. A card's eyebrow (who
   the format is for) stays the page's muted grey: the brief gives the pink
   to the section eyebrows. */
[data-theme="brazen"] .nu-head .nu-eyebrow,
[data-theme="brazen"] .refs__eyebrow,
[data-theme="brazen"] .bz-edge .nu-eyebrow,
[data-theme="brazen"] .bz-pod__say > .nu-eyebrow { color: var(--brazen-pink-ink); }
[data-theme="brazen"] .nu-inside__head .nu-eyebrow { color: var(--brazen-pink-on-ink); }

/* The one italic word of every H2 (the site's rule: a title that is a
   sentence carries exactly one). The H1 keeps its own colour. */
[data-theme="brazen"] h2 em { color: var(--brazen-pink); }
[data-theme="brazen"] .nu-section--ink h2 em { color: var(--brazen-pink); }

/* The dot in the header pill, whose label this room sets to "Contact"
   (build_site.py). The footer's pill keeps the site's green: the brief
   names the header's. */
[data-theme="brazen"] .nu-header__avail i,
[data-theme="brazen"] .nu-header__avail i::after { background: var(--brazen-pink); }

/* The buttons: the dark button of this room, the page's own ink filled in
   with the page's own ground as type, so it inverts with the scheme. Inside
   <main> only: the cookie banner's Accept belongs to the site, not to the
   room. The arrow flips with it (--arrow-invert, scheme.css). */
[data-theme="brazen"] main .ab-btn { background: var(--brazen-pink); color: var(--ink); --arrow-on-accent: var(--arrow); }
[data-theme="brazen"] main .ab-btn:hover { background: var(--surface-alt); color: var(--text); --arrow-on-accent: var(--arrow); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="brazen"]:not([data-scheme="light"]) main .ab-btn { --arrow-on-accent: var(--arrow-invert); }
  :root[data-theme="brazen"]:not([data-scheme="light"]) main .ab-btn:hover { --arrow-on-accent: var(--arrow); }
}
:root[data-theme="brazen"][data-scheme="dark"] main .ab-btn { --arrow-on-accent: var(--arrow-invert); }
:root[data-theme="brazen"][data-scheme="dark"] main .ab-btn:hover { --arrow-on-accent: var(--arrow); }

/* ----------------------------------------------------------- 1. the hero -- */
/* The kept picture (pink top, head and shoulders), filling its cell like
   every other hero's. The flat pink block behind it is gone and the site's
   hue band is at the foot of the hero instead (Amelie, 9 Oct 2026), the
   same band as the other heroes (.nu-glow in assets/nuance.css, 140px high
   here through .nu-hero--consulting), with the room's pink as its one hue:
   four tints of it over the page's ground, in place of the blush, pink and
   red of the operator heroes. */
.nu-hero--brazen .nu-hero__media img { object-position: 50% 30%; }
.nu-hero--brazen > .nu-glow {
  --g1: color-mix(in srgb, var(--brazen-pink) 22%, var(--surface));
  --g2: color-mix(in srgb, var(--brazen-pink) 38%, var(--surface));
  --g3: color-mix(in srgb, var(--brazen-pink) 14%, var(--surface));
  --g4: color-mix(in srgb, var(--brazen-pink) 52%, var(--surface)); }

/* -------------------------------------------------------- 2. why now ----- */
/* The site's numbered rows on the dark band (the pattern of "What stops
   being your problem"), the numeral in the label column in the serif, red:
   red is the structural colour. Two lines a row, no third. */
.bz-why .nu-rows__label { padding-top: 6px; font: 400 22px/28px var(--font-serif); letter-spacing: 0; text-transform: none; color: var(--red); font-variant-numeric: tabular-nums lining-nums; }

/* ------------------------------------------------------- 3. the journey -- */
/* Amélie's own design (9 Oct 2026, over the five boxes): one dashed line
   climbing from left to right, a dot at each of the nine steps and the
   step's title and quoted voice beside it, the shape of her two drawings.
   Two tracks, the coachee's and the company's, over the same figure; the
   toggle swaps them.

   Nothing here places a dot or a label. journey() in scripts/build_site.py
   computes the path from src/data/brazen.json and hands each label the one
   percentage it sits at along the figure (--sx) and the one it sits at up
   or down it (--sy), which the four place classes below read into the
   right two sides. So the figure is already right with the script off, and
   a step is moved in the data, never here. Below 1200px the line goes and
   the steps are read as a list; the toggle stays. */

/* The toggle: the room's chips, the open one ringed in the room's pink.
   Never pink type under 24px and never white on pink: the label stays ink
   (CLAUDE.md). */
.bz-switch { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.bz-switch__tab { padding: 10px 20px; border: 1px solid var(--nu-rule); border-radius: 999px; background: none; font: 500 15px/22px var(--font-sans); color: var(--text-muted); cursor: pointer; transition: border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.bz-switch__tab:hover { border-color: var(--brazen-pink); color: var(--text); }
.bz-switch__tab[aria-selected="true"] { border-color: var(--brazen-pink); box-shadow: inset 0 0 0 1px var(--brazen-pink); color: var(--text); }
.bz-switch__tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* The figure. Its ratio is the data's figure (1272 by 820), so the svg and
   the labels scale together and the places hold at every width.

   It is pulled up into the head (Amelie, 9 Oct 2026: take the white space
   out, the line can go up to the level of the title). The line starts at
   the foot on the left and climbs, so the top left quarter of the figure
   is empty by construction: the title, the line under it and the toggle
   sit in it. The pull is a share of the width, so it scales with the
   figure, which scales with it; nothing of the two tracks reaches into
   that corner at any width. */
.bz-track__figure { position: relative; aspect-ratio: 1272 / 820; margin-top: -25%; pointer-events: none; }
.bz-track__line { position: absolute; inset: 0; width: 100%; height: 100%; }
.bz-track__path { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-dasharray: 10 9; }
.bz-track__tip { fill: var(--text); stroke: none; }
.bz-track__dots { fill: var(--text); }
.bz-track__steps { margin: 0; padding: 0; list-style: none; }
.bz-step { position: absolute; width: 14.78%; pointer-events: auto; }   /* 188 of the 1272 */
.bz-step--right { left: var(--sx); }
.bz-step--left { right: var(--sx); text-align: right; }
.bz-step--below { top: var(--sy); }
.bz-step--above { bottom: var(--sy); }
.bz-step h3 { font: 500 14px/20px var(--font-sans); letter-spacing: 0; color: var(--text); text-wrap: balance; }
.bz-step__said { margin-top: 6px; font: italic 400 15px/22px var(--font-serif); color: var(--text-muted); }
.bz-track__foot { margin-top: var(--space-6); }

/* The scroll she asked for: the line draws itself once the figure is on
   screen and the steps step in behind it, left to right (assets/brazen.js
   sets is-drawn). Script off, or motion refused: all of it is simply
   there. */
.js .bz-track__line { clip-path: inset(-6% 100% -6% -6%); }
.js .bz-track.is-drawn .bz-track__line { clip-path: inset(-6% -6% -6% -6%); transition: clip-path 1.7s cubic-bezier(.33, .72, .36, 1); }
.js .bz-step { opacity: 0; transform: translateY(10px); }
.js .bz-track.is-drawn .bz-step { opacity: 1; transform: none; transition: opacity .5s ease-out calc(var(--i) * 110ms), transform .5s ease-out calc(var(--i) * 110ms); }
@media (prefers-reduced-motion: reduce) {
  .bz-pod__ep, .bz-pod__link, .bz-pod__go { transition: none; }
  .bz-pod__ep:hover .bz-pod__go { transform: none; }
  .js .bz-track__line, .js .bz-track.is-drawn .bz-track__line { clip-path: none; transition: none; }
  .js .bz-step, .js .bz-track.is-drawn .bz-step { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------- 4. the formats -- */
/* The template's cells, four across. Six rows shared by the four columns
   (the eyebrow, the title, the line, the spec, the price, the link), so the
   price and the link start on one line across the row. The pink top rule is
   an element of its own: the cell's two pseudo-elements already carry the
   hover frame (nuance.css). */
/* The hue behind the format cards (Amelie, 9 Oct 2026): the room's pink
   as one soft wash over the whole section, the cards opaque on it (the
   component already fills them with the page's ground), so the pink shows
   around the block and never under a word. Still: no second band, no
   movement. */
.bz-hue { position: relative; isolation: isolate; overflow: hidden; }
.bz-hue::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 42% at 16% 16%, color-mix(in srgb, var(--brazen-pink) 20%, var(--surface)) 0%, transparent 70%),
    radial-gradient(ellipse 54% 46% at 84% 88%, color-mix(in srgb, var(--brazen-pink) 16%, var(--surface)) 0%, transparent 70%); }

.nu-cells.bz-formats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bz-formats li { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-content: start; min-height: 0; padding: var(--space-5) var(--space-4) var(--space-5); }
.bz-formats__rule { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brazen-pink); }
.bz-formats .nu-eyebrow { margin: 0; }
.bz-formats h3 { margin-top: var(--space-3); font-size: 24px; line-height: 30px; }
.bz-formats > li > p { margin-top: var(--space-3); }
.bz-spec { margin: var(--space-4) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--nu-rule); }
.bz-formats .bz-spec li { display: block; grid-row: auto; min-height: 0; padding: 8px 0; border: 0; border-bottom: 1px solid var(--nu-rule); background: none; overflow: visible; isolation: auto;
  font: 400 15px/22px var(--font-sans); color: var(--text-muted); }
.bz-formats .bz-spec li::before, .bz-formats .bz-spec li::after { content: none; }
.bz-formats .bz-formats__price { margin-top: var(--space-4); font: 500 34px/40px var(--font-serif); letter-spacing: -0.01em; color: var(--brazen-pink); text-wrap: balance; }
.bz-formats .bz-formats__price span { display: block; margin-top: 4px; font: 400 14px/22px var(--font-sans); letter-spacing: 0; color: var(--text-muted); }
.bz-formats .bz-formats__cta { margin-top: var(--space-4); }
/* The text link of a card: underlined in the page's ink, pink on hover and
   while it has the focus. The whole cell is not the link: the card's four
   lines of spec are read, the link is clicked. */
.bz-ask { display: inline-flex; align-items: center; gap: 4px; padding-bottom: 4px; font: 500 16px/24px var(--font-sans); color: var(--text); text-decoration: none;
  background: linear-gradient(var(--rule-strong), var(--rule-strong)) left bottom / 100% 1px no-repeat; }
.bz-ask:hover, .bz-ask:focus-visible { background-image: linear-gradient(var(--brazen-pink), var(--brazen-pink)); background-size: 100% 2px; }
.bz-ask::after { content: ""; flex: none; width: 20px; height: 20px; background: var(--arrow) 0 0 / 20px 20px no-repeat; }
.bz-ask:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

/* ---------------------------------------------------------- 5. the edge -- */
/* Two columns since Amélie's note of 9 Oct 2026 (three felt weird): left,
   the facts and the way of working stacked with a hairline between them;
   right, the topics. Hairline between the columns, as the rest of the
   page. */
.bz-edge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--nu-rule); }
.bz-edge__col > div + div { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--nu-rule); }
.bz-edge > div { padding: var(--space-5) var(--space-5) 0 0; }
.bz-edge > div + div { padding-left: var(--space-5); border-left: 1px solid var(--nu-rule); }
.bz-edge__list, .bz-edge__topics { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.bz-edge__list li { font: 400 18px/30px var(--font-sans); color: var(--text); }
.bz-edge__list li + li { margin-top: var(--space-2); }
.bz-edge__text { margin-top: var(--space-4); font: 400 18px/30px var(--font-sans); color: var(--text); }
.bz-edge__topics li { padding: 10px 0; border-bottom: 1px solid var(--nu-rule); font: 400 16px/24px var(--font-sans); color: var(--text); }
.bz-edge__topics li:first-child { border-top: 1px solid var(--nu-rule); }
.bz-edge__note { margin-top: var(--space-3); font: 400 15px/24px var(--font-sans); color: var(--text-muted); }

/* ------------------------------------------------------- 7. the form ----- */
/* The format radios, a row of hairline chips in the card. The ticked one
   takes the pink: a pink hairline, the pink dot, the page's ink as type
   (never type on a pink fill). The contact card's input styles are undone
   on the radio itself. */
.ct__card .bz-format { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ct__card .bz-format legend { padding: 0; font: 500 16px/24px var(--font-sans); }
.ct__card .bz-format__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ct__card .bz-format__list label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--ct-rule); border-radius: var(--ct-radius); font: 400 16px/24px var(--font-sans); cursor: pointer; transition: border-color .2s ease-out; }
.ct__card .bz-format__list label:hover { border-color: var(--brazen-pink); }
.ct__card .bz-format__list label:has(:checked) { border-color: var(--brazen-pink); box-shadow: inset 0 0 0 1px var(--brazen-pink); color: var(--text); }
.ct__card .bz-format__list input { width: 16px; height: 16px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--brazen-pink); }
.ct__card .bz-format__list label:has(:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* The right column of the contact block in this room: the Brazen Leaders
   pages, in a card like the LinkedIn widget's. */
.bz-pages { margin: 0; padding: 24px; list-style: none; display: grid; gap: var(--space-3); border: 1px solid var(--ct-rule); border-radius: var(--ct-radius); }
/* Each page is its own mark, its name and the site's drawn arrow (never a
   glyph): the two marks are the footer's (build_site.py), in a hairline
   circle like the podcast's platforms. */
.bz-pages a { display: inline-flex; align-items: center; font: 500 18px/30px var(--font-sans); color: var(--text); text-decoration: none; }
.bz-pages__name::after { content: ""; display: inline-block; width: 20px; height: 20px; margin-left: 4px; vertical-align: -5px; background: var(--arrow) 0 0 / 20px 20px no-repeat; }   /* after the last word, so a wrapped name keeps its arrow */
.bz-pages__mark { margin-right: var(--space-3); }
.bz-pages__mark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; align-self: start; border: 1px solid var(--ct-rule); border-radius: 50%; color: var(--text); transition: border-color .2s ease-out, color .2s ease-out; }
.bz-pages__mark svg { width: 20px; height: 20px; }
.bz-pages a:hover .bz-pages__mark { border-color: var(--brazen-pink); color: var(--brazen-pink-ink); }
.bz-pages a:hover .bz-pages__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--brazen-pink); }
.bz-pages a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

/* --------------------------------------------------- 8. the podcast ------ */
/* A section of the room, not a line hanging under the form (Amelie, 9 Oct
   2026). One hairline panel on the page's ground with the room's hue
   drifting inside it, square cornered and hairlined like the contact panel
   above it: left, her sentence as the statement, the whole of it still the
   link, with the show's four platforms under it; right, the newest episode
   as a tile that leads to it. Both the platforms and the episode come from
   the feed (podcast() in scripts/build_site.py), so the section never has
   to be retyped. */
.bz-pod__panel { position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-7); align-items: center; padding: var(--space-6); border: 1px solid var(--nu-rule); }
.bz-pod__panel::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 70% at 6% 8%, color-mix(in srgb, var(--brazen-pink) 22%, var(--surface)) 0%, transparent 72%),
    radial-gradient(ellipse 50% 62% at 98% 94%, color-mix(in srgb, var(--brazen-pink) 14%, var(--surface)) 0%, transparent 72%); }

/* The statement. 44px, under the page's 56px heads: this is the closing
   note of the page, not one of its sections. */
.bz-pod__say h2 { margin-top: var(--space-3); max-width: 13em; font: 500 48px/56px var(--font-serif); letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }   /* ink: a whole title is never the accent, only its italic word */
.bz-pod__say h2 a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; text-decoration-color: var(--rule-strong); }
.bz-pod__say h2 a:hover { text-decoration-color: var(--brazen-pink); text-decoration-thickness: 2px; }
.bz-pod__say h2 a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 6px; }
.bz-pod__follow { margin-top: var(--space-5); }
.bz-pod__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.bz-pod__link { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--nu-rule); border-radius: 50%; background: var(--surface); color: var(--text); transition: border-color .2s ease-out, color .2s ease-out; }
.bz-pod__link svg { width: 20px; height: 20px; fill: currentColor; }
.bz-pod__link:hover { border-color: var(--brazen-pink); color: var(--brazen-pink-ink); }
.bz-pod__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* The newest episode: the page's own tile, the whole of it the link, the
   arrow resting in its top corner. Its kicker stays the muted grey of a
   card label: the pink eyebrow belongs to the section, left. */
.bz-pod__ep { --bz-pod-pad: var(--space-5); position: relative; display: grid; gap: var(--space-3); padding: var(--bz-pod-pad); background: var(--surface); border: 1px solid var(--nu-rule); color: var(--text); text-decoration: none; transition: box-shadow .2s ease-out; }
.bz-pod__ep:hover { box-shadow: inset 0 0 0 1px var(--brazen-pink); }
.bz-pod__ep:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.bz-pod__kicker { margin: 0; padding-right: 40px; }
.bz-pod__title { margin: 0; font: 400 26px/32px var(--font-serif); letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; }
.bz-pod__teaser { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--text-muted); }
.bz-pod__meta { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--nu-rule); font: 500 12px/18px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-variant-numeric: tabular-nums lining-nums; }
.bz-pod__go { position: absolute; top: var(--bz-pod-pad); right: var(--bz-pod-pad); width: 20px; height: 20px; color: var(--brazen-pink-ink); transition: transform .2s ease-out; }
.bz-pod__go svg { display: block; width: 100%; height: 100%; }
.bz-pod__ep:hover .bz-pod__go { transform: translate(2px, -2px); }

/* ------------------------------------------------------------ 1240 down -- */
@media (max-width: 1240px) {
  .bz-edge > div { padding-right: var(--space-4); }
  .bz-edge > div + div { padding-left: var(--space-4); }
}

/* --------------------------------------------- the journey, folded ------ */
/* Under 1200px the line cannot hold nine labels without a word landing on
   it, so the figure goes and the steps are read down the page, on a dashed
   line of their own. The toggle stays (Amélie, 9 Oct 2026). */
@media (max-width: 1199px) {
  .bz-track__line { display: none; }
  .bz-track__figure { aspect-ratio: auto; margin-top: 0; pointer-events: auto; }   /* folded: nothing to pull up into the head */
  .bz-step { position: relative; inset: auto; width: auto; padding: var(--space-4) 0 var(--space-4) 34px; text-align: left; }
  .bz-step + .bz-step { border-top: 1px solid var(--nu-rule); }
  .bz-step::before { content: ""; position: absolute; left: 1px; top: 28px; width: 11px; height: 11px; border-radius: 50%; background: var(--text); }
  .bz-step::after { content: ""; position: absolute; left: 5px; top: 44px; bottom: 0; border-left: 2px dashed var(--text); }
  .bz-step:last-child::after { display: none; }
  .bz-step h3 { font-size: 16px; line-height: 24px; }
  .bz-step__said { font-size: 17px; line-height: 26px; }
}

/* ------------------------------------------------- tablet: the formats --- */
/* Two by two, so the hairlines run between the pairs and across the middle.
   The shared rows of the four columns are given up: each card sizes itself. */
@media (max-width: 1023px) {
  .bz-pod__panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; padding: var(--space-5); }
  .bz-pod__say h2 { font-size: 36px; line-height: 44px; max-width: none; }
  .nu-cells.bz-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bz-formats li { grid-row: auto; grid-template-rows: none; }
  .bz-formats li + li { border-left: 0; }
  .bz-formats li:nth-child(2n) { border-left: 1px solid var(--nu-rule); }
  .bz-formats li:nth-child(n+3) { border-top: 1px solid var(--nu-rule); }
}

/* ---------------------------------------------------------------- phone -- */
@media (max-width: 767px) {
  .nu-cells.bz-formats { grid-template-columns: minmax(0, 1fr); }
  .bz-formats li:nth-child(2n) { border-left: 0; }
  .bz-formats li + li { border-top: 1px solid var(--nu-rule); }
  .bz-edge { grid-template-columns: minmax(0, 1fr); }
  .bz-edge > div { padding: var(--space-5) 0 0; }
  .bz-edge > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--nu-rule); }
  .bz-pod__panel { padding: var(--space-4) var(--space-3); }
  .bz-pod__say h2 { font-size: 30px; line-height: 38px; }
  .bz-pod__ep { --bz-pod-pad: var(--space-4); }
  .bz-pod__title { font-size: 22px; line-height: 28px; }
}