/* chapters (loaded after styles.css and hero.css)
   1. the live readout: the floating pill shows what the reader is looking at
   2. text wrapping: no needless two-line wraps, no short last lines
   The acts, their slates and the act marker are gone: the parts are layered by
   design and joined by scroll-driven Magic Moves (transitions.css, transitions.js). */

/* =========================================================
   1. the live readout
   ========================================================= */
.nav-pill { --ease: cubic-bezier(.2, 0, 0, 1); width: fit-content; max-width: calc(100% - 24px); gap: 12px; color: var(--ink); background: oklch(0.975 0.014 88 / .84); box-shadow: 0 0 0 1px oklch(0.185 0.01 70 / .08), 0 10px 28px -12px oklch(0.185 0.01 70 / .28); transition: background-color .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease); }
.at-hero .nav-pill, .on-dark .nav-pill { color: var(--on-dark); }
.at-hero .nav-pill { background: oklch(0.165 0.008 70 / .5); }
.on-dark .nav-pill { background: oklch(0.2 0.009 70 / .72); }
.brand { flex: none; }

/* the swap: one line cross-fades while the host morphs its width */
.isl-swap { display: inline-grid; justify-items: start; align-items: center; overflow: hidden; vertical-align: top; transition: width .38s var(--ease); }
.isl-swap > .sw { grid-area: 1 / 1; white-space: nowrap; opacity: 0; filter: blur(4px); scale: .96; transition: opacity .25s var(--ease), filter .25s var(--ease), scale .25s var(--ease); }
.isl-swap > .sw.is-in { opacity: 1; filter: blur(0); scale: 1; }
.rd-k > .sw { transform-origin: left center; }

/* the readout: a timecode of the page. Key (what part) over value (its live state), a page progress line under both */
.isl-read { position: relative; overflow: hidden; display: grid; justify-items: start; align-content: center; row-gap: 5px; min-width: 0; height: 40px; margin: 0 4px 0 2px; padding: 0 2px 0 16px; box-shadow: inset 1px 0 0 oklch(0.185 0.01 70 / .12); }
.at-hero .isl-read, .on-dark .isl-read { box-shadow: inset 1px 0 0 oklch(1 0 0 / .16); }
.rd-k { max-width: 100%; font: 500 10.5px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--signal-ink); }
.at-hero .rd-k, .on-dark .rd-k { color: var(--signal); }
.rd-v { max-width: 100%; font: 500 13.5px/1.05 var(--mono); letter-spacing: 0; font-variant-numeric: tabular-nums; color: inherit; }
.rd-v > .sw, .rd-k > .sw { max-width: var(--rd-max, 320px); overflow: hidden; text-overflow: ellipsis; }
.rd-line { position: absolute; left: 16px; right: 2px; bottom: 0; height: 2px; border-radius: 2px; background: oklch(0.185 0.01 70 / .1); overflow: hidden; }
.at-hero .rd-line, .on-dark .rd-line { background: oklch(1 0 0 / .14); }
.rd-line i { position: absolute; inset: 0; border-radius: inherit; background: var(--signal-strong); transform-origin: left; transform: scaleX(var(--page-p, 0)); transition: transform .2s linear; }
.at-hero .rd-line i, .on-dark .rd-line i { background: var(--signal); }
.nav-legacy, .nav-progress { display: none !important; }

/* the contextual action, and Hire Joe */
.nav-pill .isl-action { flex: none; display: inline-flex; margin-left: auto; padding: 9px 15px; border-radius: var(--r-s); transition: background-color .2s, scale .15s; }
.nav-pill .isl-action:focus-visible, .nav-hire:focus-visible, .brand:focus-visible { outline: 2px solid var(--signal-strong); outline-offset: 2px; }
.nav-hire { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: var(--r-s); font-size: 14px; font-weight: 650; color: inherit; text-decoration: none; box-shadow: inset 0 0 0 1px oklch(0.185 0.01 70 / .16); white-space: nowrap; transition: box-shadow .2s, background-color .2s, opacity .3s var(--ease), max-width .38s var(--ease), padding .38s var(--ease); max-width: 140px; overflow: hidden; }
.nav-hire svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-hire:hover { background: oklch(0.185 0.01 70 / .05); }
.at-hero .nav-hire, .on-dark .nav-hire { box-shadow: inset 0 0 0 1px oklch(1 0 0 / .24); }
.at-hero .nav-hire:hover, .on-dark .nav-hire:hover { background: oklch(1 0 0 / .08); }
/* in the ending the action itself is Hire Joe: the quiet link folds away */
.nav-pill.is-hire .nav-hire { max-width: 0; padding-inline: 0; opacity: 0; box-shadow: none; visibility: hidden; transition: max-width .38s var(--ease), padding .38s var(--ease), opacity .2s, visibility 0s .38s; }
.isl-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 1180px) {
  .brand-text { display: none; }
}
@media (max-width: 620px) {
  .nav-pill { gap: 8px; padding: 0 8px 0 10px; height: 54px; }
  .nav-pill .btn-small.isl-action { display: inline-flex; padding: 8px 12px; font-size: 13.5px; }
  .nav-hire { padding: 8px 9px; font-size: 13.5px; }
  .nav-hire svg { display: none; }
  .isl-read { padding-left: 12px; margin: 0; --rd-max: 136px; }
  .rd-line { left: 12px; }
  .rd-k { font-size: 9.5px; letter-spacing: .1em; }
  .rd-v { font-size: 12.5px; }
}
@media (max-width: 480px) {
  /* the mark gives its room to the readout */
  .brand { display: none; }
  .isl-read { padding-left: 4px; box-shadow: none !important; }
  .rd-line { left: 4px; }
}
@media (max-width: 400px) { .isl-read { --rd-max: 124px; } }
@media (max-width: 370px) { .isl-read { --rd-max: 104px; } }
@media (prefers-reduced-motion: reduce) {
  .nav-pill, .isl-swap, .isl-swap > .sw, .rd-line i, .nav-hire { transition: none !important; }
  .isl-swap > .sw { filter: none; scale: 1; }
}

/* =========================================================
   2. text wrapping
   ========================================================= */
/* defaults: headings balance, running text avoids short last lines */
main :is(h1, h2, h3, h4) { text-wrap: balance; }
main :is(p, li, dd, figcaption, blockquote, small) { text-wrap: pretty; }

/* films band: the Stripe card note had a 38ch cap inside a card with room to spare */
.fc-note { max-width: none; text-wrap: balance; }

/* how it works: the sticky note and the chat bubble were a few px short of one line */
.pv-note { width: max-content; max-width: none; white-space: nowrap; }
.pvw-you { margin-inline: 8px !important; padding-inline: 8px !important; }
.pnode > small, .pipe-loop span { text-wrap: balance; }
@media (min-width: 621px) and (max-width: 980px) { .bg3 .duel-mix { padding-inline: 20px; } }

/* section intros keep their 65ch measure, set as two even lines */
.bg3-head > p:last-child, .og-head > p:last-child, .mm-head > p:last-child, .rp-title > p:last-child, .og-const-d, .og-note, .tc-note, .lx-lede, .tx p, .pv-by.ch-joe span, .pv-head .ch-sub { text-wrap: balance; }
@media (max-width: 1100px) { .pv-head .ch-sub { max-width: none; } }

/* truths: the review film labels */
.rv-in li { gap: 8px; }

/* setup: the subline sits under the headline instead of in a 440px column beside it */
.st-head { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; }
.st-sub { max-width: none; text-wrap: balance; }

/* hero caption on phones: a little more room for one line */
@media (max-width: 480px) { .hr-cap { max-width: calc(100vw - 16px); gap: 6px; padding: 6px 8px 6px 7px; } }

/* lessons: rule title on its own line, the explanation under it, the source on the right */
#lessons .rules li { grid-template-columns: 56px minmax(0, 1fr) 150px; gap: 6px 20px; }
#lessons .rules li::before { grid-row: 1 / span 2; }
#lessons .rules b { grid-column: 2; grid-row: 1; }
#lessons .rules em { grid-column: 3; grid-row: 1; }
#lessons .rules span { grid-column: 2 / -1; grid-row: 2; text-wrap: balance; }
@media (max-width: 1100px) {
  #lessons .rules li { grid-template-columns: 48px minmax(0, 1fr); }
  #lessons .rules li::before { grid-row: 1; }
  #lessons .rules b { grid-column: 2; }
  #lessons .rules span, #lessons .rules em { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 700px) {
  #lessons .rules li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  #lessons .rules li::before { margin-bottom: 4px; font-size: 24px; }
  #lessons .rules b, #lessons .rules span, #lessons .rules em { grid-column: 1; grid-row: auto; }
}
/* lessons: what each video left behind, one line per row */
#lessons .revw { padding-inline: 10px; }
#lessons .revw div { grid-template-columns: 96px 14px minmax(0, 1fr); gap: 6px; }
#lessons .tip p { text-wrap: balance; }
@media (max-width: 1100px) {
  #lessons .tip { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); column-gap: 18px; padding-inline: 24px; }
  #lessons .revw div { grid-template-columns: 84px 12px minmax(0, 1fr); }
}
@media (max-width: 700px) {
  #lessons .revw { padding-inline: 8px; }
  #lessons .revw div { grid-template-columns: 82px 10px minmax(0, 1fr); gap: 5px; }
}

/* kit: the folder gets the wider half, the skill ledger sizes its columns to its content */
.box { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 980px) { .box { grid-template-columns: minmax(0, 1fr); } }
#kit .tree li { column-gap: 8px; }
@media (max-width: 620px) { #kit .tree li { column-gap: 6px; } }
@media (min-width: 1101px) { #kit .skills2 .skill2 { grid-template-columns: 44px 190px 272px minmax(0, 1fr) 110px; } }
#kit .skills2 p { text-wrap: pretty; }
.dl-hero em { text-wrap: balance; }
#kit .kit-foot { max-width: none; text-wrap: balance; }
/* principle diagrams: label on one line, its note on its own line below */
.tx-lab { white-space: nowrap; }
.tx-lab em { display: block; margin: 4px 0 0; white-space: nowrap; }

/* films shelf: a playing film is never cropped. The video shows whole (contain); the card's own still,
   blurred and dimmed, fills the space around it. The Stripe film sits at the top so its title reads below. */
.fcard video { z-index: 2; object-fit: contain; object-position: 50% 50%; opacity: 0; transition: opacity .5s ease; }
.fcard.is-playing video { opacity: 1; }
.fcard.is-playing .fc-still { opacity: 1; filter: blur(24px) brightness(.42) saturate(1.2); scale: 1.18; }
.fc-stripe video { object-position: 50% 0%; }
/* the smallest phones: a little more room for the readout */
@media (max-width: 380px) {
  .nav-pill { gap: 6px; padding: 0 6px 0 8px; }
  .nav-pill .btn-small.isl-action { padding: 8px 10px; font-size: 13px; }
  .nav-hire { padding: 8px 8px; font-size: 13px; }
  .rd-v { font-size: 12px; }
}
/* at the site footer the pill steps away (its menu and actions take over) */
.nav { transition: transform .45s cubic-bezier(.2, 0, 0, 1), opacity .3s; }
.nav.is-away { transform: translateY(calc(-100% - 20px)); opacity: 0; }
.nav.is-away .nav-pill { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .nav { transition: opacity .2s; } }
/* the readout's lines: .sw is also a duel class (20px tall, flex), which spaced the two lines apart and blocked the ellipsis */
.nav-pill .isl-swap > .sw { display: block; height: auto; border-radius: 0; justify-content: normal; line-height: inherit; }
@media (max-width: 620px) {
  .nav-pill { height: 48px; }
  .isl-read { height: 34px; row-gap: 4px; }
}