/* ============================================================================
   The Frontline, final system (base: proto A, Editorial; grafts from C and B).
   Loads after styles.css, sections.css, deck.css, mobile.css and article.css.
   Every class is prefixed fl- and none reuses a name the site already owns
   (fl-acc, fl-grid, fl-item, fl-left, fl-right, fl-media, fl-shot are taken).
   The hero chip reuses the site's own .gcard.gcard--thin glass, unchanged.
   Satoshi only. Brand book colours only; the one red is the functional red and
   it means "not covered". No eyebrows, no uppercase micro-labels.
   ============================================================================ */

:root {
  --fl-top: calc(var(--tbo, 32px) + 64px);           /* bottom edge of bar + nav */
  --fl-edge: max(24px, calc((100vw - 1200px) / 2));   /* the nav's left content edge */
  --fl-col: 680px;
  --fl-pop: 880px;
  --fl-wide: 1160px;
  --fl-navy: #0B1440;
  --fl-ink2: #494E6C;                                 /* the paper's navy 74: secondary text, never grey */
  --fl-deep: #1E3ABA;
  --fl-bright: #2F6BEB;
  --fl-blue: #2F6BEB;
  --fl-light: #66B6E6;
  --fl-mint: #98F9D6;
  --fl-beige: #F2EADC;
  --fl-line: #E7E2D7;
  --fl-rule: rgba(11, 20, 64, .12);
  --fl-red: #B94751;
  --fl-ground: linear-gradient(158deg, #16265F 0%, #0B1440 100%);
  --fl-stage: radial-gradient(56% 64% at 104% 16%, rgba(47,107,235,.15), transparent 62%),
              radial-gradient(50% 60% at -6% 108%, rgba(51,84,158,.12), transparent 64%),
              linear-gradient(158deg, #F5EEE1 0%, #EFE7D8 100%);
  --fl-ease: cubic-bezier(.22, 1, .36, 1);
  --fl-sheet: inset 0 1.5px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(28,32,48,.05), 0 1px 2px rgba(28,32,48,.06), 4px 10px 26px rgba(28,32,48,.11);
}

.fl-page { background: var(--paper); color: var(--fl-navy); font-family: var(--font-body); }
.fl-page p, .fl-page li, .fl-page td, .fl-page th { text-wrap: pretty; }
.fl-page a { color: var(--fl-deep); }

/* ---------- shared: titles and the meta line ---------- */
.fl-title { margin: 0; color: var(--fl-navy); font-family: var(--font-display); font-weight: 400; letter-spacing: -.036em; text-wrap: balance; }
.fl-title b { font-weight: 900; }
.fl-title--blog { font-size: clamp(50px, 6.1vw, 96px); line-height: .98; }
.fl-title--article { font-size: clamp(40px, 4.7vw, 74px); line-height: 1.01; letter-spacing: -.033em; }
/* final.js sets hero titles and body h2 line by line: each line one block, never re-wrapped by the browser */
.fl-ln { display: block; white-space: nowrap; }
.fl-title.fl-mono, .fl-lead__t.fl-mono, .fl-mono b { font-weight: 900; }
/* card, index, row and display titles: the two weights never share a line, each part wraps balanced */
.fl-tb { display: block; text-wrap: balance; }

.fl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; font: 500 15px/1.4 var(--font-body); color: var(--fl-ink2); }
.fl-meta a.fl-meta__type { color: var(--fl-deep); font-weight: 700; text-decoration: none; }
.fl-meta a.fl-meta__type:hover { text-decoration: underline; text-underline-offset: 3px; }
.fl-meta__type { font-weight: 700; color: var(--fl-navy); }
.fl-meta__i { display: inline-flex; align-items: center; white-space: nowrap; }
.fl-meta__i + .fl-meta__i::before { content: ""; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background: var(--fl-bright); opacity: .75; flex: none; }

/* ---------- motion: a rising curtain while the picture settles ---------- */
@keyframes fl-curtain { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fl-settle { from { transform: scale(1.07); } to { transform: none; } }
html.js [data-settle] { animation: fl-curtain 1.15s var(--fl-ease) both; }
html.js [data-settle] img { animation: fl-settle 2s var(--fl-ease) both; }
/* the observed element is never clipped itself (a clipped target never intersects); its children are */
html.js [data-rise] > * { clip-path: inset(100% 0 0 0); transition: clip-path 1.15s var(--fl-ease); }
html.js [data-rise] img { transform: scale(1.08) translateY(2%); transition: transform 1.8s var(--fl-ease); }
html.js [data-rise].in > * { clip-path: inset(0 0 0 0); }
html.js [data-rise].in img { transform: none; }
html.js .fl-fig[data-rise] > figcaption { clip-path: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-settle], html.js [data-settle] img { animation: none; }
  html.js [data-rise] > *, html.js [data-rise] img { clip-path: none; transform: none; transition: none; }
}

/* ---------- pictures ---------- */
.fl-page picture { display: block; }
.fl-page picture img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =====================================================================
   BLOG: the spread (title page facing a photograph), then the essay
   ===================================================================== */
.fl-open-spread {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  height: 100svh; min-height: 560px; padding-top: var(--fl-top); background: var(--paper); box-sizing: border-box;
}
.fl-bhero { display: contents; }
.fl-bhero__pic { grid-column: 2; grid-row: 1 / 3; margin: 0; position: relative; overflow: hidden; background: var(--paper-2); }
.fl-bhero__pic picture { position: absolute; inset: 0; }
.fl-bhero__text { grid-column: 1; grid-row: 1; padding: var(--fl-lift, calc(var(--hero-top) - var(--fl-top))) clamp(32px, 4.4vw, 76px) 0 var(--fl-edge); }
.fl-bhero__text .fl-meta { margin-top: var(--fl-metagap, clamp(20px, 3vh, 30px)); }
/* the standfirst: the draft's short answer, set as the title page's deck. final.js picks --sf so the title page
   holds together (no empty band between the meta line and the deck) */
.fl-standfirst { grid-column: 1; grid-row: 2; align-self: end; padding: 0 clamp(32px, 4.4vw, 76px) var(--fl-foot, clamp(34px, 6vh, 64px)) var(--fl-edge); }
.fl-standfirst > * { max-width: var(--sfw, 560px); }
.fl-standfirst > :first-child { padding-top: 22px; border-top: 1px solid var(--fl-rule); }
.fl-standfirst p { margin: 0; font: 400 var(--sf, 19px)/1.5 var(--font-body); letter-spacing: -.006em; color: var(--fl-navy); }
.fl-standfirst strong { color: var(--fl-navy); font-weight: 700; }

.fl-progress { position: fixed; left: 0; right: 0; top: var(--fl-top); height: 3px; z-index: 49; pointer-events: none; opacity: 0; transition: opacity .4s var(--fl-ease); }
.fl-progress.on { opacity: 1; }
.fl-progress span { display: block; height: 100%; background: var(--fl-bright); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

.fl-essay { padding: clamp(72px, 11vh, 128px) 0 clamp(40px, 6vh, 72px); }
.fl-essay .fl-sec, .fl-essay .fl-intro { display: contents; }
.fl-essay > *, .fl-essay .fl-sec > *, .fl-essay .fl-intro > * { width: min(var(--fl-col), 100% - 40px); margin-left: auto; margin-right: auto; box-sizing: border-box; }
.fl-essay p { font: 400 19.5px/1.7 var(--font-body); color: var(--fl-navy); margin-top: 0; margin-bottom: 1.1em; }
.fl-essay p strong { color: var(--fl-navy); font-weight: 700; }
.fl-essay a, .fl-guide__col a, .fl-appendix a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(30,58,186,.35); }
.fl-essay a:hover, .fl-guide__col a:hover, .fl-appendix a:hover { text-decoration-color: var(--fl-deep); }
.fl-essay h2 { font: 900 clamp(30px, 2.8vw, 42px)/1.06 var(--font-display); letter-spacing: -.032em; color: var(--fl-navy); margin-top: 2.1em; margin-bottom: .62em; text-wrap: balance; scroll-margin-top: calc(var(--fl-top) + 32px); }

/* the opening couplet: the house h1 grammar across two short lines of the draft */
.fl-essay .fl-open p { font: 500 clamp(25px, 2.3vw, 33px)/1.22 var(--font-display); letter-spacing: -.022em; color: var(--fl-navy); margin: 0; text-wrap: balance; }
.fl-essay .fl-open--b p { font-weight: 900; }
.fl-essay .fl-open--b { margin-bottom: 1.5em; }
.fl-essay .fl-open--a:not(:has(+ .fl-open--b)) { margin-bottom: 1.2em; }   /* a single lede line */

/* statements: the strongest short lines, set in place (display lines: balanced, never a forced staircase) */
.fl-essay .fl-statement { width: min(var(--fl-pop), 100% - 40px); margin: 1.5em auto 1.55em; }
.fl-statement p { font: 500 clamp(31px, 3.4vw, 50px)/1.08 var(--font-display) !important; letter-spacing: -.034em; color: var(--fl-navy) !important; margin: 0 !important; text-wrap: balance; max-width: 18em; }
.fl-statement::before { content: ""; display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--fl-bright); margin-bottom: 24px; }
/* a display line of two sentences that wraps: one balanced block per sentence (final.js splitSentences, p03 fix round) */
.fl-sents > .fl-sent { display: block; text-wrap: balance; }

/* numbered argument paragraphs ("1. A CV is a claim, not a record.") */
.fl-num { border-top: 1px solid var(--fl-rule); padding-top: 20px; }
.fl-num p strong:first-child { display: block; font: 700 clamp(20px, 1.7vw, 23px)/1.28 var(--font-display); letter-spacing: -.016em; margin-bottom: 8px; }

/* margin figure: a number already in the paragraph, restated beside it (data-ui) */
.fl-mwrap { position: relative; }
.fl-margin { position: absolute; right: calc(100% + 48px); top: 4px; width: 196px; text-align: right; }
.fl-margin b { display: block; font: 900 40px/1 var(--font-display); letter-spacing: -.035em; color: var(--fl-deep); }
.fl-margin span { display: block; margin-top: 8px; font: 500 15px/1.35 var(--font-body); color: var(--fl-ink2); }
@media (max-width: 1239px) { .fl-margin { display: none; } }

/* lists */
.fl-list ul, .fl-leads ul { list-style: none; margin: 0 0 1.3em; padding: 0; }
.fl-list li { position: relative; padding-left: 28px; margin-bottom: 12px; font: 400 19px/1.62 var(--font-body); color: var(--fl-navy); }
.fl-list li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--fl-bright); }
.fl-leads li { padding: 16px 0 16px 34px; border-top: 1px solid var(--fl-rule); position: relative; font: 400 18.5px/1.6 var(--font-body); color: var(--fl-navy); }
.fl-leads li:last-child { border-bottom: 1px solid var(--fl-rule); }
/* a list that closes its section leaves the closing rule to the next section's divider (p13 fix round: two rules
   47px apart, at 630 and 700px) */
.fl-sec:has(~ .fl-sec) > .fl-leads:last-child li:last-child { border-bottom: 0; }
/* the marker is a plain filled navy dot, centred on the first line (p13 fix round: a ring with a centre dot read as
   a radio button just above the page's real tickable checklist) */
.fl-leads li::before { content: ""; position: absolute; left: 4px; top: calc(16px + .8em - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--fl-navy); }
.fl-leads li strong { color: var(--fl-navy); }

/* steps: an ordered list on a spine; the last node is the payoff, filled navy (B) */
.fl-steps ol { list-style: none; counter-reset: fl-s; margin: 26px 0 1.4em; padding: 0; }
.fl-steps li { counter-increment: fl-s; position: relative; padding: 0 0 26px 62px; font: 400 18px/1.62 var(--font-body); color: var(--fl-navy); }
.fl-steps li::before { content: counter(fl-s); position: absolute; left: 0; top: -5px; width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid rgba(30,58,186,.55); background: #fff; display: grid; place-items: center; font: 700 16px/1 var(--font-display); color: var(--fl-deep); z-index: 1; font-variant-numeric: tabular-nums; }
.fl-steps li:not(:last-child)::after { content: ""; position: absolute; left: 19.25px; top: 38px; bottom: 2px; width: 1.5px; background: linear-gradient(180deg, rgba(30,58,186,.5), rgba(30,58,186,.14)); }
.fl-steps li:last-child { padding-bottom: 4px; }
.fl-steps li:last-child::before { background: var(--fl-navy); border-color: var(--fl-navy); color: #fff; box-shadow: 0 10px 22px -10px rgba(11,20,64,.6); }
.fl-steps li strong { color: var(--fl-navy); }

/* pair: two short statements that work together, as two cards */
.fl-pair ul { list-style: none; margin: 22px 0 1.4em; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fl-pair li { background: #fff; border-radius: 18px; padding: 22px 24px; box-shadow: var(--shadow-soft); font: 400 17px/1.58 var(--font-body); color: var(--fl-navy); }
.fl-pair li strong { color: var(--fl-navy); }

/* notes */
.fl-aside p { font: italic 400 16.5px/1.6 var(--font-body) !important; color: var(--fl-ink2) !important; padding-left: 16px; border-left: 2px solid var(--fl-rule); }
.fl-q p { font: 700 clamp(23px, 2vw, 28px)/1.24 var(--font-display) !important; letter-spacing: -.02em; color: var(--fl-navy) !important; text-wrap: balance; }
.fl-view { margin: 1.8em auto; padding: 4px 0 4px 26px; border-left: 3px solid var(--fl-bright); }
.fl-view p { font: 500 20px/1.52 var(--font-body) !important; color: var(--fl-navy) !important; margin: 0 !important; }
.fl-view strong { color: var(--fl-deep) !important; }
.fl-disclaimer { margin: 1.6em auto; padding: 16px 20px; border-radius: 14px; background: var(--paper-2); }
.fl-disclaimer p { font: 500 16px/1.5 var(--font-body) !important; color: var(--fl-navy) !important; margin: 0 !important; }
.fl-hr { border: 0; height: 1px; background: var(--fl-rule); margin: 2.4em auto; }

/* checklist: calm, tickable, remembered per reader (B), one sheet on the beige stage */
.fl-check { margin: 22px auto 1.6em; padding: clamp(10px, 1.6vw, 18px); background: var(--fl-stage); border-radius: 24px; }
.fl-check .rp-check { list-style: none; margin: 0; padding: 6px 22px; background: rgba(255,255,255,.78); border-radius: 16px; box-shadow: var(--fl-sheet); }
.fl-check .rp-check li { position: relative; padding: 16px 0 16px 42px; border-top: 1px solid var(--fl-rule); font: 400 17px/1.55 var(--font-body); color: var(--fl-navy); cursor: pointer; -webkit-user-select: none; user-select: none; }
.fl-check .rp-check li:first-child { border-top: 0; }
.fl-check .rp-check li:focus-visible { outline: 2px solid var(--fl-bright); outline-offset: 2px; border-radius: 6px; }
.fl-check .rp-box { position: absolute; left: 0; top: 17px; width: 24px; height: 24px; border-radius: 7px; box-sizing: border-box; border: 1.5px solid var(--fl-navy); background: #fff; transition: background .3s var(--fl-ease), border-color .3s var(--fl-ease); }
.fl-check .rp-box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.6); opacity: 0; transition: opacity .25s, transform .3s var(--fl-ease); }
.fl-check .rp-check li.on .rp-box { background: var(--fl-navy); border-color: var(--fl-navy); }
.fl-check .rp-check li.on .rp-box::after { opacity: 1; transform: rotate(45deg) scale(1); }

/* figure: the piece's own diagram on a white plate */
.fl-fig { margin: 2.4em auto 2.6em; }
.fl-essay .fl-fig { width: min(var(--fl-pop), 100% - 40px); }
.fl-fig__frame { position: relative; }
.fl-fig__plate { background: #fff; border-radius: 22px; padding: clamp(10px, 1.6vw, 22px); box-shadow: 0 1px 2px rgba(20,33,63,.05), 0 24px 48px -30px rgba(20,33,63,.3); }
.fl-fig__plate img { display: block; width: 100%; height: auto; border-radius: 10px; }
.fl-fig__cue { display: none; }
.fl-fig figcaption { margin: 14px 4px 0; max-width: 62ch; font: 500 15px/1.5 var(--font-body); color: var(--fl-ink2); }
.fl-fig--tall .fl-fig__plate { max-width: 764px; }   /* the figures are drawn at 720px: never below their own size */

/* the CV, read at volume (C): the lines fade to what a fast reader keeps. Only where a paragraph names what survives */
.fl-cv { margin: 30px auto 46px; }
.fl-essay .fl-cv { width: min(var(--fl-pop), 100% - 40px); }
.fl-cv__stage { border-radius: 26px; padding: clamp(34px, 5vw, 56px) 24px; display: flex; justify-content: center;
  background: radial-gradient(56% 64% at 104% 16%, rgba(47, 107, 235, .15), transparent 62%),
              radial-gradient(50% 60% at -6% 108%, rgba(51, 84, 158, .12), transparent 64%),
              radial-gradient(44% 50% at 42% 112%, rgba(255, 196, 150, .20), transparent 70%),
              linear-gradient(158deg, #F5EEE1 0%, #EFE7D8 100%); }
.fl-cv__stack { position: relative; width: min(600px, 100%); }
.fl-cv__stack > i { position: absolute; inset: 0; border-radius: 16px; background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(28, 32, 48, .05), 4px 10px 26px rgba(28, 32, 48, .08); }
.fl-cv__stack > i:nth-child(1) { transform: translate(22px, -18px) rotate(2.4deg); }
.fl-cv__stack > i:nth-child(2) { transform: translate(11px, -9px) rotate(1.2deg); }
.fl-cv__sheet { position: relative; background: #fff; border-radius: 16px; padding: 26px 30px 12px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .92), 0 1px 2px rgba(28, 32, 48, .06), 4px 12px 30px rgba(28, 32, 48, .12); }
.fl-cv__hd { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--fl-line); }
.fl-cv__av { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #E6E3DD; }
.fl-cv__bars { flex: 1; display: grid; gap: 9px; }
.fl-cv__bars i { display: block; height: 8px; width: var(--w); border-radius: 6px; background: rgba(11, 20, 64, .17); transition: background .9s var(--fl-ease); }
.fl-cv__row { padding: 16px 0; border-bottom: 1px solid var(--fl-line); }
.fl-cv__row:last-child { border-bottom: 0; }
.fl-cv__line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.fl-cv__f { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 9px; background: rgba(11, 20, 64, .1);
  transition: background .6s var(--fl-ease) .2s, box-shadow .6s var(--fl-ease) .2s; }
.fl-cv__f b { font: 700 14.5px/1 var(--font-display); color: var(--fl-deep); opacity: 0; transition: opacity .5s var(--fl-ease) .3s; white-space: nowrap; }
.fl-cv__g { display: inline-block; flex: 0 0 var(--w); height: 14px; border-radius: 6px; background: rgba(11, 20, 64, .15); transition: background .9s var(--fl-ease); }
.fl-cv__to { display: inline-flex; align-items: center; gap: 8px; margin-left: 2px; opacity: 0; transform: translateX(-8px);
  transition: opacity .5s var(--fl-ease) .55s, transform .7s var(--fl-ease) .55s; }
.fl-cv__to .icon { width: 18px; height: 18px; fill: none; stroke: var(--fl-navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fl-cv__to b { font: 700 14.5px/1 var(--font-display); color: #fff; background: var(--fl-navy); border-radius: 999px; padding: 9px 14px; white-space: nowrap; }
.fl-cv__gap { display: flex; align-items: center; justify-content: center; height: 48px; margin: 6px 0; border-radius: 10px;
  border: 1.5px dashed transparent; transition: border-color .6s var(--fl-ease) .25s; }
.fl-cv__f--gap { background: none; }
.fl-cv.is-read .fl-cv__bars i, .fl-cv.is-read .fl-cv__g { background: rgba(11, 20, 64, .055); }
.fl-cv.is-read .fl-cv__f { background: rgba(11, 20, 64, .05); }
.fl-cv.is-read .fl-cv__f--on { background: rgba(47, 107, 235, .07); box-shadow: inset 0 0 0 1.5px var(--fl-blue); }
.fl-cv.is-read .fl-cv__f--gap { background: none; box-shadow: none; }
.fl-cv.is-read .fl-cv__f b { opacity: 1; }
.fl-cv.is-read .fl-cv__gap { border-color: rgba(47, 107, 235, .7); }
.fl-cv.is-read .fl-cv__to { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fl-cv * { transition: none !important; } }

/* photo plates at section breaks */
.fl-plate { margin: clamp(56px, 9vh, 104px) auto clamp(8px, 2vh, 20px); border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 2; position: relative; background: var(--paper-2); }
.fl-plate picture { position: absolute; inset: 0; }
.fl-essay .fl-plate--wide { width: min(var(--fl-wide), 100% - 40px); }
.fl-essay .fl-plate--pop { width: min(var(--fl-pop), 100% - 40px); }
/* a portrait plate (p20 fix round, 2026-09-28; opt-in by size "portrait" in the art file): a picture whose point is
   its height keeps 4:5 at every width, centred, never taller than the screen under the nav. p20's 093: a 3:2 cut kept
   only the man at floor level and cut away the racking that makes it "putting away at twelve metres" */
.fl-essay .fl-plate--portrait { width: min(540px, 100% - 40px, (100svh - 170px) * .8); aspect-ratio: 4 / 5; }

/* next step: the paper, on the deep blue house ground */
.fl-next {
  position: relative; display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px);
  margin: clamp(88px, 12vh, 136px) auto 0; padding: clamp(36px, 5vw, 60px) clamp(28px, 5vw, 64px); border-radius: 28px;
  background: radial-gradient(70% 90% at 100% 0%, rgba(47,107,235,.32), transparent 62%), var(--fl-ground); color: #fff; box-sizing: border-box;
}
.fl-next--plain { grid-template-columns: minmax(0, 1fr); }
.fl-essay .fl-next { width: min(1040px, 100% - 40px); }
.fl-next__paper { margin: -110px 0 -20px; perspective: 1200px; }
.fl-next__paper img { width: 100%; height: auto; display: block; border-radius: 6px; transform: rotateY(14deg) rotateZ(-3deg); transform-origin: 70% 50%;
  box-shadow: 1px 1px 0 rgba(255,255,255,.12), 30px 40px 70px -24px rgba(0,0,0,.55), 0 12px 24px -12px rgba(0,0,0,.4); }
.fl-next__paper--sheet img { background: #fff; }
.fl-next__text p { margin: 0 0 22px !important; font: 500 clamp(19px, 1.7vw, 24px)/1.42 var(--font-display) !important; letter-spacing: -.012em; color: rgba(255,255,255,.86) !important; }
.fl-next--long .fl-next__text p { font-size: clamp(17px, 1.35vw, 19.5px) !important; line-height: 1.5 !important; }
.fl-next__text p:last-of-type { margin-bottom: 26px !important; }
.fl-next__text p strong { color: #fff !important; font-weight: 700; }
.fl-next__text a:not(.fl-btn) { color: #fff !important; text-decoration-color: rgba(255,255,255,.45) !important; }
.fl-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 24px; border-radius: 13px; background: #fff; color: var(--fl-navy) !important; font: 600 16px/1 var(--font-display); text-decoration: none !important;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.35); transition: transform .35s var(--fl-ease), background .28s var(--fl-ease); }
.fl-btn:hover { background: var(--grad-emerald); transform: translateY(-2px); }
.fl-btn .icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the appendix: FAQ and sources, quieter, on the second paper */
.fl-appendix { background: linear-gradient(180deg, var(--paper) 0, var(--paper-2) 160px); padding: clamp(96px, 14vh, 160px) 0 clamp(72px, 10vh, 120px); }
.fl-appendix__in { width: min(1040px, 100% - 40px); margin: 0 auto; }
.fl-appendix .fl-sec { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 16px clamp(32px, 5vw, 72px); align-items: start; }
.fl-appendix .fl-sec--faq { display: block; }
.fl-appendix .fl-sec + .fl-sec { margin-top: clamp(56px, 8vh, 88px); padding-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--fl-rule); }
.fl-appendix h2 { grid-column: 1; grid-row: 1; margin: 0; font: 900 clamp(28px, 2.6vw, 38px)/1.05 var(--font-display); letter-spacing: -.03em; color: var(--fl-navy); position: sticky; top: calc(var(--fl-top) + 32px); scroll-margin-top: calc(var(--fl-top) + 32px); }
.fl-appendix .fl-sec--faq h2 { position: static; margin-bottom: 26px; }
.fl-appendix .fl-sec > :not(h2) { grid-column: 2; grid-row: 1; }

/* FAQ, open, never an accordion (C): question left, answer right on a desk, stacked on a phone */
.fl-faq { border-top: 1.5px solid var(--fl-navy); }
.fl-qa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 4vw, 56px); padding: 24px 0 8px; border-bottom: 1px solid var(--fl-rule); }
/* the FAQ that closes its section leaves the closing rule to the next section's divider (p13 fix round) */
.fl-sec:has(~ .fl-sec) > .fl-faq:last-child > .fl-qa:last-child { border-bottom: 0; }
/* words that never split across lines (p13 fix round), wrapped by build.py, markup only: a full date ("2 December
   2027"), a law's name ("EU AI Act") in the body text, and a hyphenated compound in a FAQ question ("high-risk") */
.fl-hold { white-space: nowrap; }
.fl-qa__q h3, .fl-qa__q .fl-q p, .fl-qa__q p { margin: 0 0 14px !important; font: 700 20px/1.3 var(--font-display) !important; letter-spacing: -.014em; color: var(--fl-navy) !important; text-wrap: balance; }
.fl-qa__a p { margin: 0 0 16px !important; font: 400 17px/1.62 var(--font-body) !important; color: var(--fl-navy) !important; }

/* sources, with the paper's label glyphs (C): research, official statistics, law, the paper itself. The glyph is a
   CSS background chosen per item by build.py, so the list html stays untouched */
.fl-refs ol { list-style: none; counter-reset: fl-rf; margin: 0; padding: 0; border-top: 1.5px solid var(--fl-navy); }
.fl-refs li { counter-increment: fl-rf; position: relative; padding: 15px 0 15px 74px; border-bottom: 1px solid var(--fl-rule); font: 400 16px/1.6 var(--font-body) !important; color: var(--fl-navy); overflow-wrap: anywhere; }
.fl-refs li::before { content: counter(fl-rf); position: absolute; left: 0; top: 15px; font: 700 16px/1.6 var(--font-display); color: var(--fl-navy); font-variant-numeric: tabular-nums; }
.fl-refs li::after { content: ""; position: absolute; left: 30px; top: 18px; width: 20px; height: 20px; background: no-repeat center / contain; }
.fl-refs a { word-break: break-word; }

/* =====================================================================
   ARTICLE: the plate hero, a sticky contents rail, a guide column
   ===================================================================== */
.fl-ahero { height: 100svh; min-height: 560px; box-sizing: border-box; display: flex; flex-direction: column; padding: var(--hero-top) 0 clamp(18px, 3vh, 30px); }
.fl-ahero__head { width: min(1240px, 100% - 48px); margin: 0 auto; }
.fl-ahero__head .fl-title { max-width: 1160px; }
.fl-ahero__head .fl-meta { margin-top: clamp(16px, 2.4vh, 26px); }
.fl-ahero__pic { flex: 1 1 auto; min-height: 180px; width: min(1240px, 100% - 48px); margin: clamp(22px, 3.6vh, 40px) auto 0; border-radius: 24px; overflow: hidden; position: relative; background: var(--paper-2); }
.fl-ahero__pic picture { position: absolute; inset: 0; }
/* the one UI element on the photograph (C): the site's .gcard--thin glass, right third, beside the person,
   stating the evidence level the words give what the photo shows. Never over the middle third */
.fl-chip { --w: min(268px, 28%); --r: 18px; right: 4.5%; top: 34%; max-width: none; }
.fl-chip .c { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 16px; }
.fl-chip .fl-lvg { width: 38px; height: auto; flex: none; }
.fl-chip span { display: flex; flex-direction: column; gap: 4px; font: 500 15px/1.25 var(--font-display); color: rgba(255, 255, 255, .94); }
.fl-chip b { font-weight: 700; font-size: 17px; color: #fff; letter-spacing: -.01em; }
html.js .fl-chip { opacity: 0; transform: translateY(12px); animation: fl-chip-in .8s var(--fl-ease) 1.1s both; }
@keyframes fl-chip-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js .fl-chip { animation: none; opacity: 1; transform: none; } }

.fl-guide { width: min(1240px, 100% - 48px); margin: 0 auto; display: grid; grid-template-columns: 216px minmax(0, 700px) minmax(0, 1fr); column-gap: clamp(32px, 4.4vw, 72px); padding: clamp(64px, 10vh, 112px) 0 clamp(72px, 10vh, 120px); }
.fl-guide__col { grid-column: 2 / 4; grid-row: 1; min-width: 0; }
.fl-guide__col > *, .fl-guide__col .fl-sec > *, .fl-guide__col .fl-intro > * { max-width: 700px; }
.fl-guide__col > .fl-sec, .fl-guide__col > .fl-intro { max-width: none; }
.fl-guide__col .fl-sec > .fl-tablewrap, .fl-guide__col > .fl-next, .fl-guide__col .fl-sec > .fl-faq, .fl-guide__col .fl-sec--series > ul { max-width: none; }
.fl-guide__col .fl-sec > .fl-fig, .fl-guide__col .fl-intro > .fl-fig { max-width: 820px; }
.fl-guide__col p { font: 400 18px/1.7 var(--font-body); color: var(--fl-navy); margin: 0 0 1.05em; }
.fl-guide__col p strong { color: var(--fl-navy); font-weight: 700; }
.fl-guide__col li { font-size: 18px; }
.fl-guide__col h2 { font: 700 clamp(27px, 2.4vw, 35px)/1.1 var(--font-display); letter-spacing: -.028em; color: var(--fl-navy); margin: 0 0 20px; text-wrap: balance; scroll-margin-top: calc(var(--fl-top) + 32px); }
.fl-guide__col h3 { font: 700 20px/1.3 var(--font-display); letter-spacing: -.014em; color: var(--fl-navy); margin: 28px 0 8px; text-wrap: balance; }
.fl-guide__col .fl-sec { position: relative; margin-top: clamp(40px, 5.2vh, 56px); padding-top: clamp(36px, 4.8vh, 50px); }
.fl-guide__col .fl-sec::before { content: ""; position: absolute; left: 0; top: 0; width: min(700px, 100%); height: 1px; background: var(--fl-rule); }
.fl-guide__col .fl-list li { font-size: 18px; }
.fl-guide__col .fl-leads li { font-size: 17.5px; }
.fl-guide__col .fl-steps li { font-size: 17.5px; }
.fl-guide__col .fl-sec--faq > h2, .fl-guide__col .fl-sec--sources > h2 { font-weight: 900; }

/* the short answer: the definition, first thing under the hero */
.fl-guide .fl-answer { background: #fff; border-radius: 22px; padding: clamp(24px, 2.6vw, 34px) clamp(24px, 2.8vw, 38px); box-shadow: var(--fl-sheet); position: relative; margin-bottom: 44px; }
.fl-guide .fl-answer::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; border-radius: 0 3px 3px 0; background: var(--fl-bright); }
.fl-guide .fl-answer p { margin: 0; font: 450 clamp(18px, 1.45vw, 20.5px)/1.6 var(--font-body); color: var(--fl-navy); }
.fl-guide .fl-answer strong { color: var(--fl-deep); }
.fl-guide .fl-q { margin-top: 8px; }

/* key takeaways: the one dark object in the body */
.fl-guide__col .fl-sec--keys { background: radial-gradient(60% 80% at 100% 0%, rgba(47,107,235,.28), transparent 60%), var(--fl-ground); border-radius: 24px; padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 42px) clamp(18px, 2vw, 26px); max-width: 700px; color: #fff; }
.fl-guide__col .fl-sec--keys::before { display: none; }
.fl-sec--keys h2 { color: #fff !important; font-size: clamp(24px, 2vw, 28px) !important; margin-bottom: 10px !important; }
.fl-sec--keys ul { list-style: none; margin: 0; padding: 0; }
.fl-sec--keys li { position: relative; padding: 14px 0 14px 34px; border-top: 1px solid rgba(255,255,255,.12); font: 400 17.5px/1.55 var(--font-body) !important; color: rgba(255,255,255,.9) !important; }
.fl-sec--keys li:first-child { border-top: 0; }
.fl-sec--keys li::before { content: "" !important; position: absolute; left: 3px !important; top: 19px !important; width: 11px !important; height: 6px !important; border: solid var(--fl-mint); border-width: 0 0 2px 2px; transform: rotate(-45deg); background: none !important; border-radius: 0 !important; }
.fl-sec--keys a { color: #fff !important; }

/* the draft's own contents paragraph, laid out as a two-column index. Plain rows, no chevrons (they read as accordions) */
.fl-contents { margin: 40px 0 0; padding: 22px 26px 16px; background: var(--paper-2); border-radius: 20px; }
.fl-contents p { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; margin: 0 !important; font: 500 16px/1.4 var(--font-body) !important; }
.fl-contents p strong { grid-column: 1 / -1; font: 700 15px/1 var(--font-display); color: var(--fl-navy); padding: 2px 0 12px; }
.fl-contents .fl-sep { display: none; }
.fl-contents a, .fl-contents .fl-contents__x { display: block; padding: 11px 0; border-top: 1px solid rgba(11,20,64,.09); color: var(--fl-navy) !important; text-decoration: none !important; transition: color .25s; }
.fl-contents a:hover { color: var(--fl-deep) !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: rgba(30,58,186,.4) !important; }

/* the rail: appears once the draft's own contents paragraph has been read past. It never grows past the viewport:
   entries hold two lines at most and the list scrolls inside itself, keeping the active entry in view */
.fl-toc { grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: calc(var(--fl-top) + 36px); transition: opacity .6s var(--fl-ease), transform .6s var(--fl-ease); }
.fl-toc--later:not(.show) { opacity: 0; transform: translateY(10px); pointer-events: none; }
.fl-toc__bar { display: none; }
.fl-toc__label { margin: 0 0 14px; font: 700 14px/1 var(--font-display); color: var(--fl-navy); }
.fl-toc__panel { position: relative; }
.fl-toc__scroll { position: relative; max-height: calc(100svh - var(--fl-top) - 36px - 28px - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--mt, 0px), #000 calc(100% - var(--mb, 0px)), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 var(--mt, 0px), #000 calc(100% - var(--mb, 0px)), transparent 100%); }
.fl-toc__scroll::-webkit-scrollbar { display: none; }
.fl-toc__scroll.fade-t { --mt: 28px; }
.fl-toc__scroll.fade-b { --mb: 36px; }
.fl-toc__list { list-style: none; margin: 0; padding: 0; position: relative; }
.fl-toc__list::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(11,20,64,.10); }
.fl-toc__list::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: var(--fill, 0px); background: var(--fl-bright); transition: height .5s var(--fl-ease); z-index: 1; }
.fl-toc__list li { margin: 0; }
.fl-toc__list a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding: 6px 0 6px 18px; margin: 1px 0; font: 500 14.5px/1.36 var(--font-body); color: var(--fl-ink2); text-decoration: none; transition: color .25s; }
.fl-toc__list a:hover { color: var(--fl-navy); }
.fl-toc__list a.on { color: var(--fl-navy); font-weight: 700; }

/* tables: calm reference sheets */
.fl-tablewrap { margin: 28px 0 34px; border-radius: 22px; background: #fff; box-shadow: var(--fl-sheet); overflow: hidden; }
.fl-table { width: 100%; border-collapse: collapse; }
.fl-table thead th { text-align: left; vertical-align: bottom; padding: 18px 18px 14px; font: 700 14px/1.3 var(--font-display); color: var(--fl-navy); border-bottom: 1px solid rgba(11,20,64,.12); background: rgba(242,234,220,.45); }
.fl-table tbody th, .fl-table td { text-align: left; vertical-align: top; padding: 18px; border-top: 1px solid rgba(11,20,64,.07); font: 400 16px/1.5 var(--font-body); color: var(--fl-navy); }
.fl-table tbody tr:first-child th, .fl-table tbody tr:first-child td { border-top: 0; }
.fl-table tbody th { font-weight: 700; color: var(--fl-navy); }
.fl-table--ladder tbody th { width: 150px; }
.fl-table--ladder td:nth-child(3) { font-style: italic; }

/* evidence levels: one ladder everywhere, the paper's (Verified solid navy, Demonstrated navy tint, Structured pale
   with an edge, Claimed outline, Not covered dashed in the functional red). Levels describe a process, never a person */
.fl-lvl { display: inline-flex; align-items: center; white-space: nowrap; padding: 6px 11px; border-radius: 8px; font: 700 14px/1 var(--font-display); letter-spacing: -.005em; font-style: normal; box-sizing: border-box; }
.fl-lvl--verified { background: var(--fl-navy); color: #fff; }
.fl-lvl--demonstrated { background: #6E7390; color: #fff; }
.fl-lvl--structured { background: #D6D8E2; color: var(--fl-navy); box-shadow: inset 0 0 0 1.2px var(--fl-navy); }
.fl-lvl--claimed { background: #fff; color: var(--fl-navy); box-shadow: inset 0 0 0 1.2px var(--fl-navy); }
.fl-lvl--missing { background: #fff; color: var(--fl-red); border: 1.3px dashed var(--fl-red); padding: 5px 10px; }

/* record: the worked example as a glass sheet on the beige house stage */
.fl-tablewrap--record { background: var(--fl-stage); box-shadow: none; padding: clamp(14px, 2.2vw, 30px); border-radius: 28px; overflow: visible; }
.fl-tablewrap--record .fl-tablescroll { border-radius: 18px; box-shadow: var(--fl-sheet); overflow: hidden; }
.fl-table--record { border-collapse: separate; border-spacing: 0; background: rgba(255,255,255,.74); -webkit-backdrop-filter: blur(12px) saturate(125%); backdrop-filter: blur(12px) saturate(125%); }
.fl-table--record thead th { background: transparent; }
.fl-table--record tbody th { width: 30%; }
.fl-table--record td:nth-child(2) { width: 1%; white-space: nowrap; }
.fl-table--record td:last-child { color: var(--fl-navy); font-weight: 500; }
.fl-table--record td:last-child .fl-lvl { vertical-align: -2px; }
.fl-arr { width: 15px; height: 15px; margin: 0 8px 0 0; vertical-align: -2px; fill: none; stroke: var(--fl-bright); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* the tally (B), counted from the rows above by build.py, on the same ladder */
.fl-tally { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; padding: 20px 8px 4px; }
.fl-tally__cells { display: flex; gap: 6px; }
.fl-tally__c { width: 30px; height: 14px; border-radius: 4px; box-sizing: border-box; }
.fl-tally__c--verified { background: var(--fl-navy); }
.fl-tally__c--demonstrated { background: #6E7390; }
.fl-tally__c--structured { background: #D6D8E2; box-shadow: inset 0 0 0 1.2px var(--fl-navy); }
.fl-tally__c--claimed { background: #fff; box-shadow: inset 0 0 0 1.2px var(--fl-navy); }
.fl-tally__c--missing { background: #fff; border: 1.3px dashed var(--fl-red); }
.fl-tally__keys { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.fl-tally__k { display: inline-flex; align-items: center; gap: 10px; }
.fl-tally__k b { font: 900 28px/1 var(--font-display); letter-spacing: -.03em; color: var(--fl-navy); font-variant-numeric: tabular-nums; }

/* series links: the linked piece's own cover (a CSS background, so the list html stays untouched), then the
   label and the title inline, in sentence case: never a small line above a title */
.fl-sec--series ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fl-sec--series li { position: relative; padding: 0 0 4px; font: 500 16px/1.45 var(--font-body) !important; color: var(--fl-ink2); }
.fl-sec--series li::before { content: ""; display: block; aspect-ratio: 3 / 2; border-radius: 16px; margin-bottom: 14px; background: var(--paper-2) center / cover no-repeat; transition: transform .6s var(--fl-ease); }
.fl-sec--series li:hover::before { transform: translateY(-3px); }
.fl-sec--series li a { font: 700 16.5px/1.4 var(--font-display); letter-spacing: -.01em; color: var(--fl-navy) !important; text-decoration: none !important; }
.fl-sec--series li a::after { content: ""; position: absolute; inset: 0; }
.fl-sec--series li:hover a { color: var(--fl-deep) !important; }
.fl-sec--series .fl-list li { padding-left: 0; margin: 0; }
.fl-sec--series .fl-list li::before { position: static; width: auto; height: auto; border-radius: 16px; background-color: var(--paper-2); }

/* statement inside a guide: a result, counted off the record above it */
.fl-guide__col .fl-statement p { font-size: clamp(24px, 2.2vw, 31px) !important; line-height: 1.18 !important; letter-spacing: -.024em; font-weight: 700 !important; max-width: 24em; }
.fl-guide__col .fl-statement { margin: 8px 0 30px; }
.fl-guide__col .fl-statement::before { width: 40px; margin-bottom: 18px; }
.fl-guide__col .fl-next { margin-top: clamp(64px, 9vh, 104px); margin-bottom: 8px; }
.fl-guide__col .fl-next__paper { margin-top: -90px; }

/* ---------- rules that other pieces in the series need ---------- */
.fl-stepno { color: var(--fl-bright); }
.fl-q--sm p { font-size: clamp(20px, 1.7vw, 23px) !important; margin-top: 1.4em !important; margin-bottom: .45em !important; }
.fl-fix p { position: relative; padding-left: 28px; color: var(--fl-navy) !important; font-weight: 500; }
.fl-fix p::before { content: ""; position: absolute; left: 2px; top: .62em; width: 14px; height: 2px; background: var(--fl-bright); }
.fl-fix p::after { content: ""; position: absolute; left: 9px; top: calc(.62em - 4px); width: 7px; height: 7px; border: solid var(--fl-bright); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.fl-label p { margin: 1.6em 0 .6em !important; font: 700 16px/1.3 var(--font-display) !important; color: var(--fl-navy) !important; }
.fl-label + .fl-check { margin-top: 0; }
.fl-answer ul, .fl-answer ol { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: fl-a; }
.fl-answer li { position: relative; padding: 7px 0 7px 30px; font: 450 17px/1.5 var(--font-body); color: var(--fl-navy); border-top: 1px solid rgba(11,20,64,.07); counter-increment: fl-a; }
.fl-answer ul li::before { content: ""; position: absolute; left: 6px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--fl-bright); }
.fl-answer ol li::before { content: counter(fl-a); position: absolute; left: 0; top: 8px; width: 21px; height: 21px; border-radius: 50%; border: 1.2px solid var(--fl-navy); display: grid; place-items: center; font: 700 11.5px/1 var(--font-display); box-sizing: border-box; }
.fl-answer ul + p, .fl-answer ol + p { margin-top: 12px !important; }
.fl-standfirst--list ul { margin: 12px 0 0; padding: 0; list-style: none; }
.fl-standfirst--list li { position: relative; padding: 5px 0 5px 22px; font: 400 calc(var(--sf, 19px) * .92)/1.48 var(--font-body); color: var(--fl-navy); }
.fl-standfirst--list li::before { content: ""; position: absolute; left: 2px; top: calc(5px + .62em); width: 7px; height: 7px; border-radius: 50%; background: var(--fl-bright); }
.fl-standfirst--list > p:first-child { font-weight: 700; }
.fl-table td.fl-n { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* a number sits where its column's words start. A column is right-aligned only when every cell in it is a number,
   which build.py marks on that column's header (th.fl-n). p09 fix round: in a column that also holds words, 0.42 sat
   at the far right, about 250px from its header and next to the other column (p15's "about €48" column likewise) */
.fl-table:has(thead th.fl-n:nth-child(2)) td:nth-child(2), .fl-table:has(thead th.fl-n:nth-child(3)) td:nth-child(3),
.fl-table:has(thead th.fl-n:nth-child(4)) td:nth-child(4), .fl-table:has(thead th.fl-n:nth-child(5)) td:nth-child(5) { text-align: right; }
.fl-table--blank td { height: 52px; border-left: 1px dashed rgba(11,20,64,.12); }
.fl-table--blank td:first-child { border-left: 0; }

/* =====================================================================
   HUB: a front page, the one switch, then two different shelves
   ===================================================================== */
/* the front page, one viewport: a title page (the masthead stacked large, the subline and the switch, then the lead
   story's words) facing the lead's photograph on a rounded plate. final.js sizes the masthead to fill the column */
.fl-front { width: min(1240px, 100% - 48px); margin: 0 auto; height: 100svh; min-height: 600px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); column-gap: clamp(32px, 4.4vw, 72px); padding: calc(var(--fl-top) + clamp(18px, 3.6vh, 36px)) 0 clamp(20px, 3.4vh, 32px); }
.fl-front__page { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 0; min-width: 0; }
.fl-mast { margin: 0; font: 900 var(--mast, clamp(64px, 11vw, 160px))/.84 var(--font-display); letter-spacing: -.05em; color: var(--fl-navy); }
.fl-front__side { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding: 18px 0 0; border-top: 1px solid var(--fl-rule); }
.fl-mast__sub { margin: 0; max-width: 24ch; font: 500 clamp(17px, 1.45vw, 21px)/1.32 var(--font-display); letter-spacing: -.01em; color: var(--fl-navy); }
/* the one functional filter (B): two anchors. Once the front page has passed it becomes a slim bar under the nav */
.fl-switch { height: 44px; }
.fl-switch__in { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(11,20,64,.06); }
.fl-switch a { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 999px; font: 700 15px/1 var(--font-display); color: var(--fl-navy); text-decoration: none; transition: background .25s, color .25s; }
.fl-switch a:hover { background: rgba(11,20,64,.07); }
.fl-switch a.on { background: var(--fl-navy); color: #fff; }
.fl-switch.is-stuck .fl-switch__in { position: fixed; z-index: 40; left: 0; right: 0; top: var(--fl-top); display: flex; justify-content: flex-end; border-radius: 0; height: 52px; box-sizing: border-box; align-items: center;
  padding: 0 max(24px, calc((100vw - 1240px) / 2)); background: rgba(248,243,233,.9); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--fl-rule);
  animation: fl-bar-in .5s var(--fl-ease) both; }
@keyframes fl-bar-in { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }

.fl-lead { display: block; color: inherit; text-decoration: none; padding-top: 22px; border-top: 1.5px solid var(--fl-navy); }
.fl-lead__pic { grid-column: 2; grid-row: 1; position: relative; display: block; border-radius: 24px; overflow: hidden; min-height: 0; background: var(--paper-2); }
.fl-lead__pic picture { position: absolute; inset: 0; }
.fl-lead__pic img { transition: transform 1.4s var(--fl-ease); }
.fl-lead__pic:hover img { transform: scale(1.025); }
.fl-lead__t { margin: 0; font: 400 clamp(32px, 3.6vw, 54px)/1.02 var(--font-display); letter-spacing: -.034em; color: var(--fl-navy); text-wrap: balance; }
.fl-lead__t b { font-weight: 900; }
.fl-lead__d { margin: clamp(14px, 2vh, 20px) 0 clamp(12px, 1.8vh, 18px); max-width: 34em; font: 400 clamp(16px, 1.3vw, 19px)/1.55 var(--font-body); color: var(--fl-navy); }
.fl-lead:hover .fl-lead__t { color: var(--fl-deep); }

.fl-shelf { padding: clamp(88px, 13vh, 144px) 0 0; }
.fl-shelf__in { width: min(1240px, 100% - 48px); margin: 0 auto; }
.fl-shelf__h { margin: 0 0 clamp(28px, 4.4vh, 44px); padding-bottom: clamp(16px, 2.4vh, 22px); border-bottom: 1px solid var(--fl-rule); font: 900 clamp(40px, 4.6vw, 72px)/.92 var(--font-display); letter-spacing: -.042em; color: var(--fl-navy); }
.fl-shelf { scroll-margin-top: calc(var(--fl-top) + 40px); }

/* Articles: reference cards on white paper; meta pinned to the foot so rows align top and bottom */
.fl-agrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.fl-acard { display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(20,33,63,.05), 0 10px 30px -18px rgba(20,33,63,.22); color: inherit; text-decoration: none; transition: transform .5s var(--fl-ease), box-shadow .5s var(--fl-ease); }
.fl-acard:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(20,33,63,.05), 0 26px 48px -26px rgba(20,33,63,.34); }
.fl-acard__pic { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.fl-acard__pic picture { position: absolute; inset: 0; }
.fl-acard__body { flex: 1; display: flex; flex-direction: column; padding: 22px 24px 22px; }
.fl-acard__t { margin: 0 0 10px; font: 700 21px/1.24 var(--font-display); letter-spacing: -.018em; color: var(--fl-navy); text-wrap: balance; }
.fl-acard__d { order: 2; margin: 0 0 20px; font: 400 16px/1.52 var(--font-body); color: var(--fl-navy); }
.fl-acard .fl-meta--card { order: 3; margin-top: auto; }
.fl-meta--card { font-size: 14px; }
.fl-acard:hover .fl-acard__t { color: var(--fl-deep); }

/* Blog: editorial rows (B) inside the rounded deep-blue house panel (A), photography on the right */
.fl-shelf--blog .fl-shelf__in { width: min(1320px, 100% - 32px); padding: clamp(56px, 8vh, 88px) clamp(24px, 4vw, 48px) clamp(40px, 6vh, 64px); box-sizing: border-box; border-radius: 32px;
  background: radial-gradient(60% 40% at 100% 0%, rgba(47,107,235,.26), transparent 62%), var(--fl-ground); }
.fl-shelf--blog { padding-bottom: clamp(88px, 13vh, 144px); }
.fl-shelf--blog .fl-shelf__h { color: #fff; border-bottom-color: rgba(255,255,255,.18); margin-bottom: 0; }
.fl-brow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3.6fr) minmax(0, 3.1fr); gap: clamp(24px, 3vw, 48px); align-items: start; padding: clamp(28px, 4vh, 40px) 0; border-bottom: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.fl-brow:last-child { border-bottom: 0; padding-bottom: 8px; }
.fl-brow__t { margin: 0 0 16px; font: 400 clamp(25px, 2.35vw, 35px)/1.08 var(--font-display); letter-spacing: -.028em; color: #fff; }
.fl-brow__t b { font-weight: 900; }
.fl-brow .fl-meta { color: rgba(255,255,255,.78); }
.fl-brow .fl-meta__type { color: #fff; }
.fl-brow .fl-meta__i + .fl-meta__i::before { background: var(--fl-mint); }
.fl-brow__d { margin: 4px 0 0; font: 400 16.5px/1.56 var(--font-body); color: rgba(255,255,255,.84); }
.fl-brow__pic { position: relative; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: #16265F; }
.fl-brow__pic picture { position: absolute; inset: 0; }
.fl-brow__pic img { transition: transform 1.4s var(--fl-ease); }
.fl-brow:hover .fl-brow__pic img { transform: scale(1.03); }
.fl-brow:hover .fl-brow__t { color: var(--fl-light); }

/* ---------- the preview's toast: where a site link would go (created on click, never in the page) ---------- */
.fl-toast { position: fixed; left: 50%; bottom: 24px; z-index: 400; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 12px 18px 12px 14px; border-radius: 14px; background: var(--fl-ground); color: #fff; font: 500 14.5px/1.35 var(--font-body); box-shadow: 0 18px 40px -16px rgba(11,20,64,.55);
  transform: translate(-50%, 18px); opacity: 0; pointer-events: none; transition: opacity .35s var(--fl-ease), transform .45s var(--fl-ease); }
.fl-toast.on { opacity: 1; transform: translate(-50%, 0); }
.fl-toast svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--fl-mint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fl-toast span { overflow-wrap: anywhere; }

/* ---------- a figure, full screen (phone) ---------- */
.fl-lightbox { position: fixed; inset: 0; z-index: 500; background: var(--fl-navy); display: flex; flex-direction: column; opacity: 0; transition: opacity .3s var(--fl-ease); }
.fl-lightbox.on { opacity: 1; }
.fl-lightbox__scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; align-items: center; padding: 72px 16px 32px; }
.fl-lightbox__scroll img { display: block; width: max(100%, 860px); max-width: none; height: auto; margin: auto; border-radius: 10px; background: #fff; }
.fl-lightbox__close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); display: grid; place-items: center; cursor: pointer; }
.fl-lightbox__close svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1100px) {
  .fl-guide { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .fl-guide__col { grid-column: 1; grid-row: 2; padding-top: clamp(48px, 8vh, 80px); }
  .fl-guide__col > *, .fl-guide__col .fl-sec > *, .fl-guide__col .fl-intro > * { max-width: 700px; margin-left: auto; margin-right: auto; }
  .fl-guide__col .fl-sec > .fl-tablewrap, .fl-guide__col .fl-sec > .fl-fig, .fl-guide__col > .fl-next, .fl-guide__col .fl-sec > .fl-faq, .fl-guide__col .fl-sec--series > ul { max-width: 860px; }
  .fl-guide__col .fl-sec::before { left: 50%; transform: translateX(-50%); }
  /* the rail becomes a thin sticky bar under the nav */
  .fl-toc { grid-column: 1; grid-row: 1; position: sticky; top: var(--fl-top); height: 0; z-index: 30; margin: 0 calc(-1 * max(24px, (100vw - 1240px) / 2)); }
  .fl-toc__bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding: 0 max(24px, calc((100vw - 700px) / 2)); background: rgba(248,243,233,.94); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid rgba(11,20,64,.1); font: 600 15.5px/1.25 var(--font-display); color: var(--fl-navy); text-align: left; cursor: pointer; }
  .fl-toc__now { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fl-toc__bar .icon { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--fl-bright); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--fl-ease); }
  .fl-toc.open .fl-toc__bar .icon { transform: rotate(180deg); }
  .fl-toc__panel { position: absolute; left: 0; right: 0; top: 50px; padding: 18px max(24px, calc((100vw - 700px) / 2)) 20px; background: rgba(248,243,233,.98); border-bottom: 1px solid rgba(11,20,64,.1); box-shadow: 0 24px 40px -28px rgba(11,20,64,.35); display: none; }
  .fl-toc.open .fl-toc__panel { display: block; }
  .fl-toc__scroll { max-height: 60vh; }
  .fl-toc__list a { padding: 10px 0 10px 16px; font-size: 16px; -webkit-line-clamp: 3; }
  .fl-toc__bar::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--fl-bright); }
  .fl-progress { display: none; }
  .fl-agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-brow { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .fl-brow__d { grid-column: 1; grid-row: 2; }
  .fl-brow__pic { grid-column: 2; grid-row: 1 / 3; }
  .fl-sec--series ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 999px) {
  .fl-open-spread { display: block; height: auto; min-height: 0; padding-top: 0; }
  .fl-bhero { display: flex; flex-direction: column; height: 100svh; min-height: 540px; box-sizing: border-box; padding-top: var(--fl-top); }
  .fl-bhero__pic { flex: 1 1 auto; min-height: 30svh; }
  .fl-bhero__text { padding: 22px 24px 28px; }
  .fl-standfirst { padding: clamp(44px, 7vh, 64px) 20px 0; width: min(var(--fl-col), 100%); margin: 0 auto; box-sizing: border-box; }
  .fl-standfirst p { font-size: 18.5px; line-height: 1.56; }
  .fl-standfirst--list li { font-size: 17.5px; }
  .fl-essay { padding-top: clamp(40px, 6vh, 64px); }
}

@media (max-width: 760px) {
  .fl-meta__by { display: none; }   /* the byline drops on a phone so the meta line stays one line */
  .fl-essay p, .fl-list li { font-size: 17.5px; line-height: 1.68; }
  .fl-guide__col p { font-size: 17px; }
  .fl-leads li, .fl-guide__col .fl-leads li { font-size: 17px; padding-left: 30px; }
  .fl-steps li, .fl-guide__col .fl-steps li { font-size: 17px; padding-left: 54px; }
  .fl-essay h2 { margin-top: 1.8em; }
  .fl-statement::before { margin-bottom: 18px; }
  .fl-pair ul { grid-template-columns: 1fr; }
  .fl-plate { aspect-ratio: 4 / 5; border-radius: 18px; }
  .fl-fig__plate { border-radius: 16px; }
  /* a figure keeps its labels legible: drawn at 720px, it never reads whole at 350px, so it scrolls inside its own
     plate at 640px, with an edge fade and a swipe cue, and opens full screen on a tap */
  .fl-fig .fl-fig__plate { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: zoom-in; overscroll-behavior-x: contain; }
  .fl-fig .fl-fig__plate::-webkit-scrollbar { display: none; }
  .fl-fig .fl-fig__plate img { width: 640px; max-width: none; }
  .fl-fig .fl-fig__frame::after { content: ""; position: absolute; top: 1px; right: 0; bottom: 1px; width: 64px; border-radius: 0 16px 16px 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff 88%); transition: opacity .35s var(--fl-ease); }
  .fl-fig .fl-fig__frame.at-end::after { opacity: 0; }
  .fl-fig .fl-fig__cue { display: grid; place-items: center; position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--fl-ground); box-shadow: 0 8px 18px -8px rgba(11,20,64,.6); pointer-events: none; transition: opacity .35s var(--fl-ease), transform .35s var(--fl-ease); z-index: 2; }
  .fl-fig__cue svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: fl-nudge 2.4s var(--fl-ease) 1.2s 2; }
  .fl-fig__frame.moved .fl-fig__cue { opacity: 0; transform: scale(.8); }
  @keyframes fl-nudge { 0%, 100% { transform: none; } 40% { transform: translateX(-4px); } 70% { transform: translateX(3px); } }
  .fl-cv__stage { padding: 30px 14px 26px; border-radius: 20px; }
  .fl-cv__sheet { padding: 18px 16px 8px; }
  .fl-cv__stack > i:nth-child(1) { transform: translate(8px, -12px) rotate(2deg); }
  .fl-cv__stack > i:nth-child(2) { transform: translate(4px, -6px) rotate(1deg); }
  .fl-cv__f { height: 30px; padding: 0 10px; }
  .fl-cv__f b, .fl-cv__to b { font-size: 13.5px; }
  .fl-cv__to b { padding: 7px 11px; }
  .fl-next { grid-template-columns: 1fr; padding: 32px 24px 30px; text-align: left; }
  .fl-next__paper { width: 150px; margin: -76px 0 0 6px; }
  .fl-guide__col .fl-next__paper { margin-top: -76px; }
  .fl-appendix { padding-top: 64px; }
  .fl-appendix .fl-sec { grid-template-columns: 1fr; }
  .fl-appendix h2 { position: static; grid-row: auto; margin-bottom: 8px; }
  .fl-appendix .fl-sec > :not(h2) { grid-column: 1; grid-row: auto; }
  .fl-qa { grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
  .fl-qa__q h3, .fl-qa__q .fl-q p, .fl-qa__q p { margin-bottom: 10px !important; font-size: 19px !important; }
  .fl-refs li { padding-left: 62px; }
  .fl-refs li::after { left: 26px; }
  .fl-sec--series ul { grid-template-columns: 1fr; gap: 26px; }
  .fl-contents p { grid-template-columns: 1fr; }
  .fl-contents { padding: 18px 20px 10px; }
  .fl-guide .fl-answer { padding: 22px 22px 22px 24px; }
  .fl-guide .fl-answer p { font-size: 17.5px; }
  .fl-ahero { padding-top: calc(var(--fl-top) + 26px); }
  .fl-ahero__head, .fl-ahero__pic { width: calc(100% - 40px); }
  .fl-ahero__pic { border-radius: 18px; margin-top: 20px; }
  .fl-ahero__pic img { object-position: var(--pos-tall, 50% 45%) !important; }
  .fl-guide { width: calc(100% - 40px); }
  .fl-toc { margin: 0 -20px; }
  .fl-toc__bar, .fl-toc__panel { padding-left: 20px; padding-right: 20px; }

  /* tables become stacked record cards; the header row stays in the page for readers and machines */
  .fl-tablewrap { border-radius: 18px; }
  .fl-table, .fl-table tbody, .fl-table tr, .fl-table th, .fl-table td { display: block; width: auto !important; }
  .fl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fl-table tbody tr { padding: 16px 18px 14px; border-top: 1px solid rgba(11,20,64,.08); }
  .fl-table tbody tr:first-child { border-top: 0; }
  .fl-table tbody th, .fl-table td { padding: 0; border: 0 !important; white-space: normal !important; text-align: left !important; }
  .fl-table tbody th { font-size: 17px; margin-bottom: 8px; }
  .fl-table td { font-size: 16px; margin-top: 10px; }
  .fl-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font: 700 14px/1.25 var(--font-display); color: var(--fl-ink2); }
  .fl-table--record td:nth-child(2)::before { display: none; }
  .fl-table--ladder tbody th { width: auto; }
  .fl-tablewrap--record { padding: 10px; border-radius: 22px; }
  .fl-tally { padding: 16px 6px 6px; }
  .fl-tally__c { width: 24px; }

  /* hub: masthead, subline and switch, the lead photo, the lead's title and meta */
  .fl-front { display: flex; flex-direction: column; min-height: 0; padding-top: calc(var(--fl-top) + 18px); padding-bottom: 18px; width: calc(100% - 40px); }
  .fl-front__page { display: contents; }
  .fl-mast { order: 1; font-size: clamp(48px, 14.5vw, 62px) !important; line-height: .9; }
  .fl-mast .fl-ln { display: inline; }
  .fl-front__side { order: 2; margin-top: 12px; padding-top: 12px; gap: 10px 16px; }
  .fl-mast__sub { font-size: 16.5px; max-width: 21ch; }
  .fl-switch { height: 40px; }
  .fl-switch a { height: 32px; padding: 0 15px; font-size: 14.5px; }
  .fl-switch.is-stuck .fl-switch__in { height: 48px; padding: 0 20px; justify-content: flex-start; }
  .fl-lead__pic { order: 3; flex: 1 1 auto; min-height: 150px; margin-top: 16px; border-radius: 18px; }
  .fl-lead { order: 4; margin-top: 16px; padding-top: 0; border-top: 0; }
  .fl-lead__t { font-size: 32px; }
  .fl-lead__d { display: none; }
  .fl-lead .fl-meta { margin-top: 12px; }
  /* the reference shelf becomes an index on a phone (A), and every row still says what it is about (C) */
  .fl-agrid { grid-template-columns: 1fr; gap: 0; background: #fff; border-radius: 20px; box-shadow: 0 1px 2px rgba(20,33,63,.05), 0 10px 30px -18px rgba(20,33,63,.22); overflow: hidden; }
  .fl-acard { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; padding: 18px 16px; border-radius: 0; box-shadow: none; border-top: 1px solid rgba(11,20,64,.08); }
  .fl-acard:first-child { border-top: 0; }
  .fl-acard:hover { transform: none; box-shadow: none; }
  .fl-acard__pic { width: 76px; aspect-ratio: 1 / 1; border-radius: 12px; grid-column: 1; grid-row: 1; align-self: start; }
  .fl-acard__pic img { object-position: var(--pos-thumb, 50% 40%) !important; }
  .fl-acard__body { display: contents; }
  .fl-acard__t { grid-column: 2; grid-row: 1; align-self: center; font-size: 18px; margin: 0; }
  .fl-acard .fl-meta--card { grid-column: 1 / -1; order: 0; margin: 0; }
  .fl-acard__d { grid-column: 1 / -1; order: 0; margin: 0; font-size: 16px; }
  .fl-agrid:not(.fl-agrid--all) .fl-meta__type { display: none; }                     /* the shelf already says Articles */
  .fl-agrid:not(.fl-agrid--all) .fl-meta__type + .fl-meta__i::before { display: none; }
  .fl-shelf__in { width: calc(100% - 40px); }
  .fl-shelf--blog .fl-shelf__in { width: calc(100% - 20px); padding: 44px 18px 30px; border-radius: 24px; }
  .fl-brow { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 28px 0; }
  .fl-brow__pic { grid-column: 1; grid-row: 1; aspect-ratio: 3 / 2; }
  .fl-brow__main { grid-row: 2; }
  .fl-brow__d { grid-column: 1; grid-row: 3; margin: 0; font-size: 16px; }
  .fl-brow__t { font-size: 27px; margin-bottom: 12px; }
}

@media (max-width: 640px) {
  .fl-chip { display: none; }   /* a tall phone crop leaves no room beside the person: the chip would cover the middle */
}

/* =====================================================================
   Review round 2 (28 Sept 2026): fixes from the three reviewers
   ===================================================================== */
/* the hub sits in the live hub's chrome: blog.html's solid cream nav, not the article glass */
body.fl-hub.article-page .nav { background: #F8F3E9; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* a paragraph's last words bound together so the last line is never a stub (final.js decides which). The bound
   paragraph wraps greedily, so its lines keep the column's edge and only the bound words move down */
.fl-keep { white-space: nowrap; }
.fl-page .fl-kept { text-wrap: wrap; }
.fl-nw { white-space: nowrap; }
/* a short item (four lines or fewer) that no binding can fix without leaving the line before the last short: even
   lines instead (p13 fix round; final.js decides) */
.fl-page .fl-evened { text-wrap: balance; }

/* the title fallback (Mark's decision pending, final.js TITLE_FALLBACK): the bold sentence and the rest each a
   block of its own, balanced, never sharing a line */
.fl-bal .fl-tpart { display: block; text-wrap: balance; }
.fl-bal.fl-title, .fl-bal.fl-lead__t { text-wrap: balance; }

/* series cards are card titles: balanced (FINAL 1), so no one-word stub under a long title */
.fl-sec--series li { text-wrap: balance; }

/* the footer's rounded top corners sit on the appendix band's colour, not a lighter notch of page cream */
body:has(.fl-appendix) { background: var(--paper-2); }

/* tables: a numeric column's header sits over its numbers; a date column never breaks a date */
.fl-table thead th.fl-n { text-align: right; }
.fl-table--dates tbody th:first-child { white-space: nowrap; min-width: 9.5em; }

/* the disclaimer sits on the reading column, not centred in the wider section box */
.fl-disclaimer { margin: 1.6em 0; max-width: 700px; box-sizing: border-box; }
.fl-essay .fl-disclaimer { margin-left: auto; margin-right: auto; }

/* contents rail: the clamp sits on an inner span, so the padding never shows the tops of a third line */
.fl-toc__list a { display: block; -webkit-line-clamp: none; overflow: visible; }
.fl-toc__list a > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.fl-toc__sub a { padding-left: 32px; font-size: 13.5px; }
.fl-toc__sub a.on { font-weight: 700; }

/* p11: the ten questions, one numbered block each, a divider between them; the red flag set off in the functional red */
.fl-qblock { border-top: 1px solid var(--fl-rule); padding: 26px 0 4px; }
.fl-qblock:first-of-type { margin-top: 18px; }
.fl-qblock h3 { margin: 0 0 12px; font-size: 21px; line-height: 1.28; }
.fl-qno { color: var(--fl-bright); font-weight: 900; }
.fl-qblock p { margin-bottom: .75em; }
.fl-flag p { border-left: 3px solid var(--fl-red); padding: 2px 0 2px 16px; }
.fl-flag p strong { color: var(--fl-red); }
.fl-steps a { color: var(--fl-navy) !important; }

@media (min-width: 1101px) {
  /* every block shares the text column's left edge; wide blocks overhang to the right, as tables already do */
  .fl-guide__col :is(.fl-sec, .fl-intro) > :is(.fl-disclaimer, .fl-check, .fl-view, .fl-fig) { margin-left: 0; margin-right: 0; }
  /* the reading measure (review round 2): 18px on 700px ran to 76 to 88 characters a line, and 18px on 644px still
     to 75 to 79 (measured). 19px on 630px lands at about 71, the reviewer's target of 70 to 72 */
  .fl-guide__col :is(.fl-sec, .fl-intro) > :is(p, h2, h3, .fl-list, .fl-leads, .fl-steps, .fl-fix, .fl-q, .fl-label, .fl-aside, .fl-num, .fl-mwrap, .fl-flag, .fl-qblock),
  .fl-qblock > * { max-width: 630px; }
}
@media (max-width: 1100px) {
  .fl-guide__col > *, .fl-guide__col .fl-sec > *, .fl-guide__col .fl-intro > * { max-width: 630px; }
}
@media (min-width: 761px) {
  .fl-guide__col p { font-size: 19px; }
  .fl-guide__col li, .fl-guide__col .fl-list li { font-size: 18.5px; }
}

@media (max-width: 760px) {
  /* hero titles on a phone: a real title size, with room between the heavy lines */
  .fl-title--blog, .fl-title--article { font-size: 40px; line-height: 1.08; }
  /* the hub lead on a phone: the question whole in 900, the rest balanced under it */
  .fl-lead__t > b, .fl-lead__t > .fl-lr { display: block; text-wrap: balance; }
  /* a figure with a phone drawing reads whole: no scroller, no fade, no cue */
  .fl-fig--fits .fl-fig__plate { overflow: visible; cursor: auto; }
  .fl-fig--fits .fl-fig__plate img { width: 100%; max-width: 100%; }
  .fl-fig--fits .fl-fig__frame::after, .fl-fig--fits .fl-fig__cue { display: none; }
  .fl-qblock h3 { font-size: 19.5px; }
  .fl-toc__list a > span { -webkit-line-clamp: 3; }
}

/* the blog title page, wider (review round 2): at 571px no staircase could hold a two-weight title at 52px or more,
   so titles fell to 40 to 47px. The photograph keeps close to its 4:5 portrait */
@media (min-width: 1000px) {
  .fl-open-spread { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .fl-bhero__text { padding-right: clamp(28px, 3.4vw, 56px); }
  .fl-standfirst { padding-right: clamp(28px, 3.4vw, 56px); }
}

/* the series row fills the 700px column, as the section's rule and the Sources list under it do (p08 fix round,
   2026-09-28: held to the 630px reading measure it stopped 70px short of both, and its middle title ran to five
   lines). Desk only: under 1101px every block already shares the one 630px measure */
@media (min-width: 1101px) {
  .fl-guide__col .fl-sec--series > .fl-list { max-width: 700px; }
}

/* Dutch headings run longer: the rail gives them one more line, so no entry loses its verb ("…niet zien?" was cut
   after two lines on p09, cold review 28 Sept 2026). English pages are untouched. */
html[lang="nl"] .fl-toc__list a > span { -webkit-line-clamp: 3; }
@media (max-width: 760px) { html[lang="nl"] .fl-toc__list a > span { -webkit-line-clamp: 4; } }

/* ---- the hub, 1 Oct 2026 (Mark: "too much going on", "just a switcher"): a plain hero and one filtered list ---- */
.fl-front--plain { display: block; height: auto; min-height: 0; padding: calc(var(--fl-top) + clamp(40px, 8vh, 96px)) 0 clamp(24px, 4vh, 44px); }
.fl-front--plain .fl-mast { font-size: clamp(64px, 11vw, 168px); }
.fl-front--plain .fl-mast__sub { max-width: none; margin: clamp(20px, 3.2vh, 32px) 0 0; padding-top: 18px; border-top: 1px solid var(--fl-rule); }
.fl-shelf--all { padding: 0 0 clamp(88px, 13vh, 144px); }
.fl-filter { position: sticky; top: var(--fl-top); z-index: 30; margin: 0 0 clamp(20px, 3vh, 32px); padding: 10px 0; background: rgba(248, 243, 233, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fl-filter__in { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(11, 20, 64, .06); }
.fl-filter button { height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font: 700 15px/1 var(--font-display); color: var(--fl-navy); cursor: pointer; transition: background .25s, color .25s; }
.fl-filter button:hover { background: rgba(11, 20, 64, .07); }
.fl-filter button[aria-pressed="true"] { background: var(--fl-navy); color: #fff; }
.fl-filter button:focus-visible { outline: 2px solid var(--fl-bright); outline-offset: 2px; }
.fl-agrid--all .fl-acard[hidden] { display: none !important; }
@media (min-width: 1001px) {
  .fl-agrid--all .fl-acard--lead { grid-column: span 2; }
  .fl-agrid--all .fl-acard--lead .fl-acard__t { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.12; }
}
@media (max-width: 760px) {
  .fl-front--plain { width: calc(100% - 40px); padding: calc(var(--fl-top) + 28px) 0 18px; }
  .fl-front--plain .fl-mast { font-size: clamp(48px, 14.5vw, 62px) !important; line-height: .9; }
  .fl-front--plain .fl-mast .fl-ln { display: inline; }
  .fl-front--plain .fl-mast__sub { font-size: 16.5px; margin-top: 12px; padding-top: 12px; }
  .fl-filter { padding: 8px 0; margin-bottom: 14px; }
  .fl-filter button { height: 32px; padding: 0 15px; font-size: 14.5px; }
}

/* ---- the hub, second pass, 1 Oct 2026 evening (Mark: "I don't actually like the hero page", "he liked the way the
   articles are presented [on HiringBranch]: they have the same background", "play around with the design and make it
   more pretty"). Measured before: the name was 158px type and 266px tall, so the first cards began at 636px on a
   900px screen; the cards were white boxes with three to four lines of description; the first card spanned two
   columns and stretched its neighbour to 758px, half of it empty.
   Now: the name on one line with its sentence beside it, then the filter, and the first full row of cards above the
   fold. Every card is the same card and sits straight on the page ground, no box: the picture, one tag and the date,
   the title. The list is title-led; the description stays on the piece itself. ---- */
.fl-front--plain { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 48px;
  padding: calc(var(--fl-top) + clamp(26px, 4.6vh, 52px)) 0 clamp(16px, 2.4vh, 24px); border-bottom: 1px solid var(--fl-rule); }
.fl-front--plain .fl-mast { font-size: clamp(48px, 6.6vw, 100px); line-height: .9; letter-spacing: -.046em; white-space: nowrap; }
.fl-front--plain .fl-mast .fl-ln { display: inline; }
.fl-front--plain .fl-mast__sub { max-width: 26ch; margin: 0 0 .32em; padding: 0; border: 0; text-align: right; }
.fl-shelf--all .fl-filter { margin: 0 0 clamp(18px, 2.6vh, 28px); padding: 14px 0 10px; }

.fl-agrid--all { gap: clamp(44px, 6.4vh, 68px) 28px; align-items: start; }
.fl-agrid--all .fl-acard, .fl-agrid--all .fl-acard:hover { background: none; box-shadow: none; border-radius: 0; overflow: visible; transform: none; }
.fl-agrid--all .fl-acard__pic { border-radius: 16px; }
.fl-agrid--all .fl-acard__pic img { transition: transform 1.1s var(--fl-ease); }
.fl-agrid--all .fl-acard:hover .fl-acard__pic img { transform: scale(1.035); }
.fl-agrid--all .fl-acard__body { padding: 16px 2px 0; }
.fl-agrid--all .fl-acard .fl-meta--card { order: 0; margin: 0 0 11px; font-size: 13.5px; gap: 6px 0; }
.fl-agrid--all .fl-meta__type { padding: 6px 11px 6px; border-radius: 999px; background: rgba(11, 20, 64, .07); font: 700 12px/1 var(--font-display); letter-spacing: .01em; color: var(--fl-navy); }
.fl-agrid--all .fl-meta__type + .fl-meta__i { margin-left: 12px; }
.fl-agrid--all .fl-meta__type + .fl-meta__i::before { display: none; }
.fl-agrid--all .fl-acard__t { order: 1; margin: 0; font: 700 22px/1.22 var(--font-display); letter-spacing: -.02em; }
.fl-agrid--all .fl-acard__d { display: none; }
@media (min-width: 1001px) {
  .fl-agrid--all .fl-acard--lead { grid-column: auto; }                       /* the pillar leads by coming first, not by size */
  .fl-agrid--all .fl-acard--lead .fl-acard__t { font-size: 22px; line-height: 1.22; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .fl-front--plain .fl-mast__sub { text-align: left; max-width: none; flex-basis: 100%; margin: 0; }
}
@media (max-width: 760px) {
  /* a phone: the name, its sentence under it, then rows. One row is the picture (the square crop already tuned per
     piece), the title beside it and the tag and date under the title: 19 pieces stay a short scroll */
  .fl-front--plain { display: block; padding: calc(var(--fl-top) + 22px) 0 14px; }
  .fl-front--plain .fl-mast { font-size: clamp(40px, 12.4vw, 54px) !important; white-space: normal; }
  .fl-front--plain .fl-mast__sub { text-align: left; max-width: none; margin: 10px 0 0; font-size: 16.5px; }
  .fl-shelf--all .fl-filter { margin-bottom: 4px; padding: 10px 0 8px; }
  .fl-agrid--all { gap: 0; background: none; border-radius: 0; box-shadow: none; overflow: visible; }
  .fl-agrid--all .fl-acard { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: start; padding: 16px 0; border-top: 1px solid var(--fl-rule); }
  .fl-agrid--all .fl-acard:first-child { border-top: 0; }
  .fl-agrid--all .fl-acard__pic { width: 92px; aspect-ratio: 1 / 1; border-radius: 12px; grid-column: 1; grid-row: 1 / span 2; }
  .fl-agrid--all .fl-acard__body { display: contents; }
  .fl-agrid--all .fl-acard__t { grid-column: 2; grid-row: 1; align-self: end; font-size: 17.5px; line-height: 1.24; }
  .fl-agrid--all .fl-acard .fl-meta--card { grid-column: 2; grid-row: 2; align-self: start; margin: 0; font-size: 13px; }
  .fl-agrid--all .fl-meta__type { padding: 5px 9px; font-size: 11.5px; }
  .fl-agrid--all .fl-meta__type + .fl-meta__i { margin-left: 9px; }
}

/* =====================================================================
   "On this page", sooner and on blogs too (Mark, 1 Oct 2026, night)
   The rail no longer waits for the draft's own index to pass (three screens down): final.js shows it as soon as
   the text is on screen. A blog carries the same list (.fl-toc--essay, the first child of the essay). From 1360px
   it stands in the left margin of the essay, 36px clear of the blocks that are wider than the text; the margin
   figure moves to the right margin, and final.js fades the rail while a block that reaches into the margin passes
   (the "read next" band, the appendix). Under 1360px it is the bar under the nav, as on articles, with the reading
   progress on its rule. Backups: *.bak-20261001-before-blog-rail
   ===================================================================== */
.fl-essay > .fl-toc--essay { position: sticky; top: calc(var(--fl-top) + 36px); height: 0; z-index: 3; transition: opacity .3s var(--fl-ease), transform .5s var(--fl-ease); }
.fl-toc--essay .fl-toc__panel { position: absolute; top: 0; right: calc(100% + 136px); width: min(216px, calc((100vw - var(--fl-col)) / 2 - 172px)); }
.fl-toc--essay .fl-toc__label { margin: 0 0 14px; font: 700 14px/1 var(--font-display); }   /* not the essay's paragraph style */
.fl-toc--essay .fl-toc__list a > span { -webkit-line-clamp: 3; }
html[lang="nl"] .fl-toc--essay .fl-toc__list a > span { -webkit-line-clamp: 4; }
@media (min-width: 1360px) {
  .fl-page--blog .fl-margin { right: auto; left: calc(100% + 48px); text-align: left; }
}
@media (max-width: 1359px) {
  .fl-page--blog .fl-essay { padding-top: 0; }
  .fl-essay > .fl-toc--essay { top: var(--fl-top); height: 50px; width: 100%; margin: 0 0 clamp(36px, 6vh, 60px); z-index: 30; }
  .fl-toc--essay .fl-toc__bar { position: absolute; left: 0; right: 0; top: 0; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding: 0 max(20px, calc((100vw - var(--fl-col)) / 2)); background: rgba(248,243,233,.94); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid rgba(11,20,64,.1); font: 600 15.5px/1.25 var(--font-display); color: var(--fl-navy); text-align: left; cursor: pointer; }
  .fl-toc--essay .fl-toc__now { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fl-toc--essay .fl-toc__bar .icon { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--fl-bright); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--fl-ease); }
  .fl-toc--essay.open .fl-toc__bar .icon { transform: rotate(180deg); }
  .fl-toc--essay .fl-toc__panel { left: 0; right: 0; top: 50px; width: auto; padding: 18px max(20px, calc((100vw - var(--fl-col)) / 2)) 20px; background: rgba(248,243,233,.98); border-bottom: 1px solid rgba(11,20,64,.1); box-shadow: 0 24px 40px -28px rgba(11,20,64,.35); display: none; }
  .fl-toc--essay.open .fl-toc__panel { display: block; }
  .fl-toc--essay .fl-toc__scroll { max-height: 60vh; }
  .fl-toc--essay .fl-toc__list a { padding: 10px 0 10px 16px; font-size: 16px; }
  .fl-toc--essay .fl-toc__bar::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--fl-bright); }
  .fl-page--blog .fl-progress { display: none; }
}
/* articles under 1101px: the bar is on the page from the first scroll now, so the text starts clear of it */
@media (max-width: 1100px) {
  .fl-guide__col { padding-top: calc(50px + clamp(28px, 4.5vh, 44px)); }
}

/* =====================================================================
   The title page never paints raw (1 Oct 2026, night; Mark: "loading smoothly, without gaps")
   final.js sets the title (staircase, size) after the first paint: on 29 of the 40 pages at desk width and 36 on a
   phone, the title showed at its raw size for a moment (88px over four lines on a blog) and then jumped into place,
   taking the meta line and the standfirst with it. The block now stays unseen until the first pass is done
   (html.fl-set, added at the end of runAll) and fades in. If the script never runs, it shows after 2.5 seconds.
   ===================================================================== */
html.js:not(.fl-set) .fl-bhero__text, html.js:not(.fl-set) .fl-standfirst, html.js:not(.fl-set) .fl-ahero__head { opacity: 0; animation: fl-unhide .01s linear 2.5s forwards; }
html.js.fl-set .fl-bhero__text, html.js.fl-set .fl-standfirst, html.js.fl-set .fl-ahero__head { animation: fl-seton .35s var(--fl-ease) both; }
@keyframes fl-unhide { to { opacity: 1; } }
@keyframes fl-seton { from { opacity: 0; } to { opacity: 1; } }