/* ============================================================
   BLOOD FLOW RESTRICTION THERAPY — Science of Water
   ============================================================
   ⭐ THIS IS EDDY'S APPROVED STYLESHEET, PORTED — not a reconstruction.

   I first rebuilt the visual layer from claude-assembly-notes.md, which locks
   palette / type roles / section rhythm but NOT sizes, spacing or layout
   proportions. The result scored 5/10 from Stuart, "and 4 are for the copy and
   section bones" — i.e. the design work was essentially not there. Re-deriving
   a design that already exists was the wrong call; his designer's CSS is the
   artifact.

   WHAT CHANGED IN THE PORT — nothing visual, only what integration requires:
     1. every selector scoped under .bfr-page  (his sheet used bare .section,
        .shell, .eyebrow, :root, body — all of which collide with styles.css)
     2. Google-hosted webfonts replaced with the site's LOCAL @font-face
     3. image paths already handled in the markup
   His values, proportions, breakpoints and cascade order are untouched.

   COPY remains the package's index.html, verbatim — Stuart: "the rendering is
   not the truth but rather a visual aid for design and placement. like pow the
   truth is in the html."

   ⚠️ STILL PENDING STUART:
     - source-section styling awaits his final approved reference
     - credit language for the BFR hero photograph
     - the sink analogy illustration (he is having ChatGPT rework it)
   ============================================================ */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Anton";
  src: url("../fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Cabin";
  src: url("../fonts/Cabin-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cabin";
  src: url("../fonts/Cabin-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600; font-style: italic; font-display: swap;
}


/* AQF BUILD VERSION: bfr-science-of-water styles v1 | 2026-07-28 | SOW palette + body copy Montserrat 500 */
.bfr-page { --navy: #061426; --navy-soft: #0a2037; --navy-mid: #0e2944; --aqua-light: #7FD1F0; --aqua: #00AEEF; --aqua-dark: #007fa9; --orange: #F7931F; --white: #ffffff; --paper: #f4f7f8; --paper-warm: #fbfaf7; --ink: #0c1b2c; --muted: #536272; --rule: rgba(6,20,38,.15); --shell: min(1180px, calc(100% - 48px)); --text-shell: min(1080px, calc(100% - 48px)); }
.bfr-page * { box-sizing: border-box; }
.bfr-page { scroll-behavior: smooth; }
.bfr-page { margin: 0; background: var(--paper); color: var(--ink); font-family: "Montserrat", Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.68; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
.bfr-page img { display: block; max-width: 100%; }
.bfr-page a { color: inherit; }
.bfr-page sup { font-size: .67em; line-height: 0; vertical-align: super; }
.bfr-page sup a { color: var(--aqua-dark); text-decoration: none; font-weight: 700; }
.bfr-page .bfr-article { overflow: hidden; }
.bfr-page .shell { width: var(--shell); margin-inline: auto; }
.bfr-page .shell--text { width: var(--text-shell); }
.bfr-page .section { position: relative; padding: 112px 0; }
.bfr-page .section--light { background: var(--paper); color: var(--ink); }
.bfr-page .section--dark { background: var(--navy); color: var(--white); }
.bfr-page .eyebrow { margin: 0 0 20px; color: var(--aqua-dark); font-size: .78rem; font-weight: 700; line-height: 1; letter-spacing: .18em; text-transform: uppercase; }
.bfr-page .eyebrow--dark { color: var(--aqua-light); }
.bfr-page h2,
.bfr-page h3 { margin: 0; }
.bfr-page h2,
.bfr-page h3,
.bfr-page .lightbulb__statement,
.bfr-page .bfr-hero__subtitle,
.bfr-page .comparison-panel__label { font-family: "Bebas Neue", "Arial Narrow", sans-serif; font-weight: 400; text-transform: uppercase; }
.bfr-page p { margin: 0 0 1.25em; }
/* HERO */
.bfr-page .bfr-hero { position: relative; min-height: 830px; display: grid; align-items: center; background: var(--navy); color: var(--white); isolation: isolate; }
.bfr-page .bfr-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 52%; z-index: -3; }
.bfr-page .bfr-hero__veil { position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(6,20,38,.98) 0%, rgba(6,20,38,.94) 26%, rgba(6,20,38,.55) 50%, rgba(6,20,38,.08) 73%, rgba(6,20,38,.25) 100%),
    linear-gradient(0deg, rgba(6,20,38,.62), transparent 35%); z-index: -2; }
.bfr-page .bfr-hero__content { padding: 96px 0 148px; }
.bfr-page .bfr-hero h1 { max-width: 790px; margin: 0; color: var(--white); font-family: "Anton", Impact, sans-serif; font-size: clamp(4.5rem, 8vw, 7.6rem); font-weight: 400; line-height: .9; letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; }
.bfr-page .bfr-hero__subtitle { margin: 24px 0 24px; color: var(--aqua-light); font-size: clamp(2.2rem, 4.1vw, 4rem); line-height: .95; letter-spacing: .01em; }
.bfr-page .bfr-hero__deck { max-width: 650px; margin: 0; color: rgba(255,255,255,.92); font-size: 1.08rem; font-weight: 500; line-height: 1.68; }
.bfr-page .bfr-hero__anchor { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 24px; background: rgba(6,20,38,.95); border-top: 1px solid rgba(127,209,240,.35); color: var(--aqua-light); font-family: "Bebas Neue", "Arial Narrow", sans-serif; font-size: clamp(1.25rem, 2vw, 1.85rem); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
/* CLINICAL */
.bfr-page .section-kicker { display: flex; align-items: center; gap: 24px; margin-bottom: 30px; }
.bfr-page .section-kicker .eyebrow { margin: 0; flex: 0 0 auto; }
.bfr-page .section-kicker__line { width: 100%; height: 1px; background: var(--rule); }
.bfr-page .clinical__intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr); gap: 72px; align-items: end; padding-bottom: 46px; border-bottom: 1px solid var(--rule); }
.bfr-page .clinical__intro h2 { max-width: 690px; color: var(--navy); font-size: clamp(3.4rem, 6vw, 6.2rem); line-height: .92; letter-spacing: .005em; }
.bfr-page .clinical__lead { margin: 0; color: var(--aqua-dark); font-size: 1.18rem; font-weight: 700; line-height: 1.5; }
.bfr-page .editorial-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 54px 0 66px; }
.bfr-page .editorial-columns p { color: #1f3042; font-size: 1.02rem; }
.bfr-page .clinician-feature { border-top: 7px solid var(--aqua); background: var(--white); box-shadow: 0 18px 55px rgba(6,20,38,.08); }
.bfr-page .clinician-feature__heading { padding: 34px 38px 26px; border-bottom: 1px solid var(--rule); }
.bfr-page .clinician-feature__heading .eyebrow { margin-bottom: 10px; }
.bfr-page .clinician-feature__heading h3 { color: var(--navy); font-size: clamp(2.6rem, 4vw, 4rem); line-height: 1; }
.bfr-page .clinician-feature__items { display: grid; grid-template-columns: repeat(3, 1fr); }
.bfr-page .clinician-feature__item { padding: 34px 34px 26px; border-right: 1px solid var(--rule); }
.bfr-page .clinician-feature__item:last-child { border-right: 0; }
.bfr-page .clinician-feature__item span { display: block; margin-bottom: 18px; color: var(--aqua-dark); font-family: "Bebas Neue", "Arial Narrow", sans-serif; font-size: 2.3rem; line-height: 1; }
.bfr-page .clinician-feature__item p { margin: 0; font-size: .96rem; line-height: 1.62; }
.bfr-page .clinician-feature__foot { margin: 0; padding: 22px 38px 26px; background: #edf5f7; color: #314759; font-size: .9rem; }
/* COMPARISON */
.bfr-page .comparison { background: radial-gradient(circle at 74% 18%, #0b2943 0, var(--navy) 43%); }
.bfr-page .comparison__header { max-width: 840px; margin-bottom: 50px; }
.bfr-page .comparison__header h2 { color: var(--white); font-size: clamp(3.6rem, 6.6vw, 6.8rem); line-height: .9; }
.bfr-page .comparison__header h2 span { color: var(--aqua-light); }
.bfr-page .comparison__header > p:last-child { max-width: 680px; margin: 20px 0 0; color: rgba(255,255,255,.8); font-size: 1.04rem; }
.bfr-page .comparison-visual { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--navy-soft); border: 1px solid rgba(127,209,240,.22); box-shadow: 0 32px 90px rgba(0,0,0,.28); }
.bfr-page .comparison-panel { position: relative; min-height: 520px; margin: 0; overflow: hidden; }
.bfr-page .comparison-panel:first-child { border-right: 1px solid rgba(255,255,255,.38); }
.bfr-page .comparison-panel img { width: 100%; height: 100%; object-fit: cover; }
.bfr-page .comparison-panel--bfr img { object-position: 58% center; transform: scale(1.22); }
.bfr-page .comparison-panel--water img { object-position: 61% center; filter: contrast(1.05) saturate(.92) brightness(.91); transform: scale(1.08); }
.bfr-page .comparison-panel__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,20,38,.32), transparent 38%, rgba(6,20,38,.48)); }
.bfr-page .comparison-panel figcaption { position: absolute; z-index: 3; top: 30px; left: 34px; color: var(--white); }
.bfr-page .comparison-panel__label { display: block; color: var(--aqua-light); font-size: 2rem; line-height: 1; letter-spacing: .04em; }
.bfr-page .comparison-panel figcaption strong { display: block; margin-top: 8px; font-size: .83rem; letter-spacing: .1em; text-transform: uppercase; }
.bfr-page .comparison-visual__versus { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; display: grid; place-items: center; background: var(--navy); border: 2px solid var(--aqua-light); border-radius: 50%; color: var(--white); font-family: "Bebas Neue", "Arial Narrow", sans-serif; font-size: 1.65rem; }
.bfr-page .overlay { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bfr-page .overlay marker path { fill: var(--aqua-light); }
.bfr-page .overlay--bfr #arrow-orange path { fill: var(--orange); }
.bfr-page .overlay__path,
.bfr-page .pressure-arrows path,
.bfr-page .drag-arrows path { fill: none; stroke: var(--aqua-light); stroke-width: 4; }
.bfr-page .overlay__path--orange { stroke: var(--orange); }
.bfr-page .overlay__label-group rect { fill: rgba(6,20,38,.83); stroke: rgba(127,209,240,.6); stroke-width: 1; }
.bfr-page .overlay__label-group text { fill: var(--white); font: 600 21px "Montserrat", sans-serif; }
.bfr-page .cuff-icon rect { fill: rgba(6,20,38,.84); stroke: var(--aqua-light); stroke-width: 3; }
.bfr-page .cuff-icon path { fill: none; stroke: var(--aqua-light); stroke-width: 3; }
.bfr-page .pressure-arrows path,
.bfr-page .drag-arrows path { stroke-width: 5; }
.bfr-page .water-icon path { fill: none; stroke: var(--aqua-light); stroke-width: 5; stroke-linecap: round; }
.bfr-page .photo-credit { position: absolute; z-index: 5; right: 16px; bottom: 12px; color: rgba(255,255,255,.72); font-size: .66rem; font-weight: 500; letter-spacing: .04em; }
.bfr-page .mechanism-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 34px; border-top: 1px solid rgba(127,209,240,.28); border-bottom: 1px solid rgba(127,209,240,.28); }
.bfr-page .mechanism-grid article { padding: 34px 46px; }
.bfr-page .mechanism-grid article:first-child { border-right: 1px solid rgba(127,209,240,.28); }
.bfr-page .mechanism-grid h3 { color: var(--aqua-light); font-size: 2.4rem; }
.bfr-page .mechanism-grid ul { margin: 14px 0 0; padding: 0; list-style: none; color: rgba(255,255,255,.82); }
.bfr-page .mechanism-grid li { position: relative; padding: 5px 0 5px 22px; }
.bfr-page .mechanism-grid li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 2px; background: var(--aqua); }
.bfr-page .comparison-copy { max-width: 900px; margin: 52px auto 0; color: rgba(255,255,255,.84); }
.bfr-page .comparison-copy blockquote { margin: 42px 0; padding: 30px 38px; border-left: 5px solid var(--aqua); background: rgba(255,255,255,.05); color: var(--aqua-light); font-family: "Bebas Neue", "Arial Narrow", sans-serif; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.03; letter-spacing: .02em; text-transform: uppercase; }
.bfr-page .section--dark sup a { color: var(--aqua-light); }
/* LIGHTBULB + SINK */
.bfr-page .lightbulb { background: var(--paper-warm); }
.bfr-page .lightbulb__statement { margin-bottom: 34px; color: var(--navy); font-size: clamp(3.9rem, 7.5vw, 7.8rem); line-height: .86; }
.bfr-page .lightbulb__statement span { display: block; }
.bfr-page .lightbulb__statement span:last-child { color: var(--aqua-dark); }
.bfr-page .lightbulb__callout { max-width: 760px; margin: 0 0 72px; padding-left: 24px; border-left: 5px solid var(--orange); color: #283d50; font-size: 1.22rem; font-weight: 700; }
.bfr-page .sink-feature { display: grid; grid-template-columns: .72fr 1.28fr; gap: 72px; align-items: center; }
.bfr-page .sink-feature__copy h2 { margin-bottom: 26px; color: var(--navy); font-size: clamp(3rem, 5vw, 5.2rem); line-height: .95; }
.bfr-page .sink-feature__copy p { color: #2c3d4c; }
.bfr-page .sink-feature__closing { margin-top: 28px; color: var(--aqua-dark) !important; font-weight: 700; }
.bfr-page .sink-diagram { padding: 32px 24px 18px; background: var(--white); border: 1px solid rgba(6,20,38,.12); box-shadow: 0 20px 70px rgba(6,20,38,.1); }
.bfr-page .sink-diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.bfr-page .sink-diagram marker path { fill: var(--aqua-dark); }
.bfr-page .sink-step__num { fill: var(--aqua-dark); font: 400 36px "Bebas Neue", sans-serif; }
.bfr-page .sink-step__title { fill: var(--navy); font: 400 27px "Bebas Neue", sans-serif; letter-spacing: .03em; }
.bfr-page .sink-step__caption { fill: #3d5263; font: 600 16px "Montserrat", sans-serif; }
.bfr-page .faucet { fill: none; stroke: #738290; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.bfr-page .flow { fill: none; stroke: var(--aqua); stroke-width: 9; }
.bfr-page .flow--reduced { stroke-width: 5; }
.bfr-page .basin { fill: #e5ecef; stroke: #71808c; stroke-width: 6; }
.bfr-page .water { fill: url(#sink-water); opacity: .72; }
.bfr-page .drain { fill: var(--navy); }
.bfr-page .drain--narrow { fill: var(--orange); }
.bfr-page .restriction { stroke: var(--orange); stroke-width: 9; stroke-linecap: round; }
.bfr-page .pressure-wave { fill: none; stroke: var(--white); stroke-width: 5; opacity: .8; }
.bfr-page .sink-diagram__arrow { fill: none; stroke: var(--aqua-dark); stroke-width: 6; }
/* FIELD NOTE */
.bfr-page .field-note { background: linear-gradient(135deg, var(--navy) 0%, #0b2842 100%); }
.bfr-page .field-note::after { content: ""; position: absolute; inset: 0; opacity: .11; background-image: radial-gradient(circle at 20% 20%, var(--aqua-light) 0 1px, transparent 1px); background-size: 34px 34px; pointer-events: none; }
.bfr-page .field-note__masthead,
.bfr-page .field-note__body { position: relative; z-index: 1; }
.bfr-page .field-note__masthead { display: grid; grid-template-columns: .45fr 1fr; gap: 48px; align-items: end; padding-bottom: 40px; border-bottom: 1px solid rgba(127,209,240,.3); }
.bfr-page .field-note__masthead .eyebrow { margin: 0 0 8px; }
.bfr-page .field-note__masthead h2 { color: var(--white); font-size: clamp(4.4rem, 8vw, 8rem); line-height: .86; }
.bfr-page .field-note__body { display: grid; grid-template-columns: 1fr 1fr; gap: 74px; padding-top: 54px; font-family: "Cabin", Arial, sans-serif; font-size: 1.08rem; font-weight: 500; line-height: 1.7; }
.bfr-page .field-note__body p { color: rgba(255,255,255,.82); }
.bfr-page .field-note__lead { color: var(--white) !important; font-size: 1.3rem; font-weight: 600; }
.bfr-page .field-note__body blockquote { margin: 0 0 32px; padding: 0 0 0 28px; border-left: 5px solid var(--orange); color: var(--aqua-light); font-family: "Cabin", Arial, sans-serif; font-size: 1.65rem; font-style: italic; font-weight: 600; line-height: 1.42; }
.bfr-page .field-note__final { color: var(--aqua-light) !important; font-size: 1.26rem; font-weight: 700; }
.bfr-page .field-note__signature { margin-top: 44px; padding-top: 30px; border-top: 1px solid rgba(127,209,240,.27); }
.bfr-page .field-note__stu { display: block; margin-bottom: 10px; color: var(--aqua-light); font-family: "Cabin", Arial, sans-serif; font-size: 2.2rem; font-style: italic; }
.bfr-page .field-note__signature strong,
.bfr-page .field-note__signature > span:last-child { display: block; }
.bfr-page .field-note__signature strong { color: var(--white); font-size: 1rem; }
.bfr-page .field-note__signature > span:last-child { color: rgba(255,255,255,.62); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
/* LARGER LESSON */
.bfr-page .larger-lesson { background: var(--white); }
.bfr-page .larger-lesson h2 { max-width: 980px; color: var(--navy); font-size: clamp(4rem, 7.2vw, 7.4rem); line-height: .86; }
.bfr-page .larger-lesson h2 span { display: block; }
.bfr-page .larger-lesson h2 span:last-child { color: var(--aqua-dark); }
.bfr-page .larger-lesson__copy { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 54px; padding-top: 40px; border-top: 1px solid var(--rule); }
.bfr-page .larger-lesson__copy p { color: #2d4050; }
.bfr-page .larger-lesson__anchor { margin-top: 42px; padding: 40px 46px; background: var(--navy); color: var(--white); }
.bfr-page .larger-lesson__anchor p { margin: 0; font-family: "Bebas Neue", "Arial Narrow", sans-serif; font-size: clamp(2.05rem, 4vw, 4rem); line-height: 1.02; letter-spacing: .02em; text-transform: uppercase; }
.bfr-page .larger-lesson__anchor p:last-child { margin-top: 12px; color: var(--aqua-light); }
/* SOURCES */
.bfr-page .sources { padding-bottom: 80px; }
.bfr-page .sources__header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding-bottom: 34px; border-bottom: 1px solid rgba(127,209,240,.25); }
.bfr-page .sources__header .eyebrow { margin: 0; }
.bfr-page .sources__header h2 { color: var(--white); font-size: clamp(3.6rem, 6vw, 6.2rem); line-height: .9; }
.bfr-page .sources__list { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 64px; margin: 48px 0 0; padding-left: 24px; }
.bfr-page .sources__list li { padding-left: 12px; color: rgba(255,255,255,.74); font-size: .84rem; line-height: 1.65; }
.bfr-page .sources__list li::marker { color: var(--aqua-light); font-weight: 700; }
.bfr-page .sources__list strong { color: var(--white); font-weight: 700; }
.bfr-page .sources__utility { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-top: 64px; padding-top: 42px; border-top: 1px solid rgba(127,209,240,.25); }
.bfr-page .sources__utility h3 { color: var(--aqua-light); font-size: 2.15rem; }
.bfr-page .sources__utility p { color: rgba(255,255,255,.68); font-size: .86rem; }
@media (max-width: 980px) {
  .bfr-page { --shell: min(100% - 38px, 860px); --text-shell: min(100% - 38px, 820px); }
  .bfr-page .section { padding: 88px 0; }
  .bfr-page .bfr-hero { min-height: 760px; }
  .bfr-page .bfr-hero__image { object-position: 66% center; }
  .bfr-page .clinical__intro,
.bfr-page .sink-feature { grid-template-columns: 1fr; gap: 34px; }
  .bfr-page .editorial-columns { gap: 38px; }
  .bfr-page .clinician-feature__items { grid-template-columns: 1fr; }
  .bfr-page .clinician-feature__item { border-right: 0; border-bottom: 1px solid var(--rule); }
  .bfr-page .clinician-feature__item:last-child { border-bottom: 0; }
  .bfr-page .comparison-panel { min-height: 460px; }
  .bfr-page .mechanism-grid article { padding-inline: 30px; }
  .bfr-page .sink-feature { gap: 50px; }
  .bfr-page .field-note__masthead { grid-template-columns: 1fr; gap: 8px; }
  .bfr-page .field-note__body { gap: 42px; }
}
@media (max-width: 760px) {
  .bfr-page { --shell: calc(100% - 28px); --text-shell: calc(100% - 28px); }
  .bfr-page { font-size: 15.5px; }
  .bfr-page .section { padding: 72px 0; }
  .bfr-page .bfr-hero { min-height: 710px; align-items: end; }
  .bfr-page .bfr-hero__image { object-position: 69% center; }
  .bfr-page .bfr-hero__veil { background: linear-gradient(0deg, rgba(6,20,38,.98) 0%, rgba(6,20,38,.94) 43%, rgba(6,20,38,.28) 78%, rgba(6,20,38,.18) 100%); }
  .bfr-page .bfr-hero__content { padding: 280px 0 116px; }
  .bfr-page .bfr-hero h1 { font-size: clamp(3.5rem, 16vw, 5.4rem); }
  .bfr-page .bfr-hero__subtitle { font-size: 2.45rem; }
  .bfr-page .bfr-hero__deck { font-size: .95rem; line-height: 1.58; }
  .bfr-page .bfr-hero__anchor { padding: 16px 14px; font-size: 1.05rem; }
  .bfr-page .clinical__intro { padding-bottom: 32px; }
  .bfr-page .clinical__intro h2 { font-size: 3.5rem; }
  .bfr-page .editorial-columns,
.bfr-page .field-note__body,
.bfr-page .larger-lesson__copy,
.bfr-page .sources__list,
.bfr-page .sources__utility { grid-template-columns: 1fr; }
  .bfr-page .editorial-columns { padding: 38px 0 50px; gap: 10px; }
  .bfr-page .clinician-feature__heading,
.bfr-page .clinician-feature__item,
.bfr-page .clinician-feature__foot { padding-inline: 24px; }
  .bfr-page .comparison__header h2 { font-size: 4.2rem; }
  .bfr-page .comparison-visual { grid-template-columns: 1fr; }
  .bfr-page .comparison-panel { min-height: 440px; }
  .bfr-page .comparison-panel:first-child { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.38); }
  .bfr-page .comparison-visual__versus { top: 50%; width: 58px; height: 58px; font-size: 1.25rem; }
  .bfr-page .comparison-panel--bfr img { transform: scale(1.12); object-position: 58% center; }
  .bfr-page .comparison-panel--water img { transform: scale(1.02); object-position: 63% center; }
  .bfr-page .mechanism-grid { grid-template-columns: 1fr; }
  .bfr-page .mechanism-grid article:first-child { border-right: 0; border-bottom: 1px solid rgba(127,209,240,.28); }
  .bfr-page .mechanism-grid article { padding: 28px 20px; }
  .bfr-page .comparison-copy blockquote { padding: 24px; }
  .bfr-page .lightbulb__statement { font-size: 4.2rem; }
  .bfr-page .lightbulb__callout { margin-bottom: 52px; }
  .bfr-page .sink-diagram { overflow-x: auto; padding: 18px 10px; }
  .bfr-page .sink-diagram svg { min-width: 720px; }
  .bfr-page .field-note__body { gap: 14px; padding-top: 36px; }
  .bfr-page .field-note__body blockquote { margin-top: 16px; }
  .bfr-page .larger-lesson h2 { font-size: 4rem; }
  .bfr-page .larger-lesson__copy { gap: 4px; }
  .bfr-page .larger-lesson__anchor { padding: 28px 24px; }
  .bfr-page .sources__header { display: block; }
  .bfr-page .sources__header h2 { margin-top: 12px; }
  .bfr-page .sources__list { gap: 24px; }
}
@media (max-width: 470px) {
  .bfr-page .overlay__label-group text { font-size: 18px; }
  .bfr-page .comparison-panel figcaption { left: 22px; top: 22px; }
  .bfr-page .comparison-panel__label { font-size: 1.7rem; }
  .bfr-page .photo-credit { font-size: .6rem; }
}

/* ============================================================
   SHARED-STYLESHEET LEAK GUARD
   ============================================================
   Eddy's sheet was written standalone, so it never had to defend against
   styles.css. Anywhere his rules set only colour/size/tracking, the site's
   own rule supplies the rest — and it shows through. Audited every
   styles.css rule that matches an element inside this article; these are the
   ones that actually leak.

   1. THE PILL. styles.css `.eyebrow` is a pill: background rgba(255,255,255,.14),
      1px border, 999px radius, 8px 14px padding, inline-flex. Eddy's eyebrow is
      bare type. Stuart: "kill the pill! the eyebrow doesnt get a pill. That was
      your own doing since Eddy's didnt have a pill." Affects 8 eyebrows.
   2. .photo-credit — styles.css imposes its own face/size/margins.
   3. Footnote markers on DARK grounds — see below.
   ============================================================ */
/* (the .eyebrow pill reset that used to sit here was removed 2026-08-03 —
   the pill is gone from styles.css at source, so nothing to fight.) */

/* The in-panel credit is not a full-page hero credit; Eddy sizes it small and
   sits it on the image, so the site's credit treatment must not apply. */
.bfr-page .comparison-panel .photo-credit {
  margin: 0;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ⚠️ Eddy sets every footnote marker to --aqua-dark (#007FA9), which is correct
   on his light sections but drops to roughly 2.5:1 on the navy ones — and two
   markers live in the Founder Field Note, which is dark. On dark grounds they
   take the on-dark aqua, matching the site's own blue-by-ground rule. */
.bfr-page .section--dark sup a,
.bfr-page .bfr-hero sup a { color: var(--aqua-light); }

/* ⭐ THE REAL SIGNATURE, not the word "Stu".
   Canonical asset lives at assets/images/logo/stu-signature.png — Stuart:
   "pls add my Stu signature which is on the about, and most of the sow
   articles. I suggest you place my signature in assets/images/logo."
   434x290, an exact /2 of the 867x579 master so the tapered strokes stay clean.
   MASKED rather than <img> so one asset serves any ground: this Field Note is
   NAVY, so the ink takes the on-dark aqua. On light grounds it uses its own
   navy. Same technique as the SOW card microscope. */
.bfr-page .field-note__stu {
  display: block;
  width: 200px;
  height: 134px;                 /* ink aspect measured at 1.46 */
  margin: 0 0 4px -4px;          /* the stroke starts at the very edge of the box */
  font-size: 0; line-height: 0;  /* kills any residual text node */
  background-color: var(--aqua-light);
  -webkit-mask: url("../images/logo/stu-signature.png") left center / contain no-repeat;
  mask: url("../images/logo/stu-signature.png") left center / contain no-repeat;
}