/* ══════════════════════════════════════════════════════════════════════════
   css/blog.css — BLOG POST

   Namespace .fw-blg-*   ·   loaded only by /blogdetails.php
   Tokens come from css/common.css. Everything page-local is scoped under
   .fw-blg-page so it cannot leak.

   WHAT THIS FILE IS NOT
     It is not the reading rules. Those live in css/prose.css and are shared
     with the service page, so a table or a list renders identically in a
     post and in a treatment page. This file owns only the FRAME: the
     masthead, the cover, the grid, the rail, the FAQ, the closing band.

   HOW IT DIFFERS FROM css/service.css, ON PURPOSE
     A service page opens on a dark full-bleed photograph with the title
     inside it. A post opens on a LIGHT masthead — kicker, headline, dek,
     byline — and the cover follows underneath with a caption. One leads
     with the image because it is selling a treatment; the other leads with
     the writing because it is an article.

   FULL BLEED
     No max-width container anywhere. 28px desktop / 14px mobile gutters
     are the only inset, and the article column is a grid ratio rather than
     a capped measure — the rule OWF's service detail states outright.

   SECTIONS
     00  Tokens & primitives
     01  Reading progress
     02  §1 Masthead
     03  §1 Cover
     04  §2 Body grid
     05      Contents index
     06      The article column
     07      Tags · share · FAQ · author
     08      Companion rail
     09  §3 Keep reading
     10  §4 Closing band
     11  Responsive mode switches
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   00 · TOKENS & PRIMITIVES
   ══════════════════════════════════════════════════════════════ */

.fw-blg-page{
	/* The house gutter. 28px on large screens, 14px on mobile — the same
	   rail the header and nav sit on, so the page lines up with the chrome
	   above it at any width. */
	--pad:28px;

	/* Height of the sticky chrome. custom/js/article.js measures the real
	   thing and overwrites this; the literal is only the pre-JS fallback. */
	--article-top:116px;
	--article-progress:0;

	--ink:var(--dk-d);
	--paper:var(--wh);
	--paper-2:var(--paper);
	--line:color-mix(in srgb, var(--dk) 9%, transparent);
	--line-soft:color-mix(in srgb, var(--dk) 5.5%, transparent);
	--ring:0 0 0 1px var(--ink-a06);

	--s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
	--s6:32px; --s7:48px; --s8:64px;
	--sec:clamp(40px, 4.6vw, 86px);

	--r1:8px; --r2:12px; --r3:16px;

	--ease:cubic-bezier(.22,1,.36,1);
	--ease-soft:cubic-bezier(.16,1,.3,1);

	background:var(--paper);
	-webkit-text-size-adjust:100%
}

.fw-blg{display:block;position:relative}

/* The one shared layout primitive. width:100% + gutter. No max-width and
   no margin-inline:auto — the two properties this file is built without. */
.fw-blg-mast__inner,
.fw-blg-body__inner,
.fw-blg-next__inner,
.fw-blg-close__inner{
	position:relative;z-index:1;
	width:100%;
	padding-inline:var(--pad)
}

/* Shared eyebrow */
.fw-blg-eyebrow{
	display:flex;align-items:center;gap:8px;
	font-size:9.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
	color:var(--g5)
}
.fw-blg-eyebrow::before{
	content:'';width:14px;height:1.5px;border-radius:2px;background:var(--pk);flex-shrink:0
}
.fw-blg-eyebrow--onDark{color:var(--pk-l3)}
.fw-blg-eyebrow--onDark::before{background:var(--pk-l3)}

/* Shared inline link */
.fw-blg-link{
	display:inline-flex;align-items:center;gap:5px;
	font-size:11.5px;font-weight:600;letter-spacing:-.005em;
	color:var(--bl);
	transition:color .25s
}
.fw-blg-link i{font-size:11px;transition:transform .3s var(--ease)}
.fw-blg-link:hover{color:var(--bl-d)}
.fw-blg-link:hover i{transform:translateX(3px)}

/* Shared button */
.fw-blg-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	min-height:46px;padding:0 22px;
	border-radius:100px;
	font-size:14px;font-weight:600;letter-spacing:-.005em;
	white-space:nowrap;
	color:var(--wh);background:var(--pk);
	box-shadow:0 1px 2px color-mix(in srgb, var(--pk) 20%, transparent), 0 10px 24px -8px color-mix(in srgb, var(--pk) 50%, transparent);
	transition:background .25s, box-shadow .3s, transform .25s var(--ease);
	-webkit-tap-highlight-color:transparent
}
.fw-blg-btn:hover{background:var(--pk-d);box-shadow:0 1px 2px color-mix(in srgb, var(--pk) 24%, transparent), 0 16px 32px -10px color-mix(in srgb, var(--pk) 55%, transparent)}
.fw-blg-btn:active{transform:scale(.975)}
.fw-blg-btn--wh{color:var(--ink);background:var(--wh);box-shadow:0 12px 28px -10px color-mix(in srgb, var(--bk) 50%, transparent)}
.fw-blg-btn--wh:hover{background:var(--wh);color:var(--ink);transform:translateY(-1px)}
.fw-blg-btn--onDark{
	color:color-mix(in srgb, var(--wh) 94%, transparent);background:color-mix(in srgb, var(--wh) 7%, transparent);
	box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--wh) 18%, transparent)
}
.fw-blg-btn--onDark:hover{background:color-mix(in srgb, var(--wh) 13%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--wh) 32%, transparent)}

/* ══════════════════════════════════════════════════════════════
   01 · READING PROGRESS
   ══════════════════════════════════════════════════════════════ */

.fw-blg-progress{
	position:fixed;left:0;right:0;top:var(--article-top);
	height:2px;z-index:995;pointer-events:none
}
.fw-blg-progress > span{
	display:block;height:100%;
	width:calc(var(--article-progress) * 1%);
	background:var(--pk);
	box-shadow:0 0 12px color-mix(in srgb, var(--pk) 50%, transparent);
	transition:width .1s linear
}

/* ══════════════════════════════════════════════════════════════
   02 · §1 MASTHEAD
   ══════════════════════════════════════════════════════════════ */

.fw-blg-mast{
	position:relative;
	padding:clamp(20px, 2.4vw, 34px) 0 clamp(24px, 2.8vw, 44px);
	background:var(--paper)
}

/* Copy left, cover right — a magazine opener. The copy column carries
   slightly less than half: a headline set beside a photograph wants a
   short measure, and the picture is doing half the work of the row. */
.fw-blg-mast__grid{
	display:grid;
	grid-template-columns:minmax(0, .92fr) minmax(0, 1fr);
	gap:clamp(24px, 3vw, 54px);
	align-items:center;
	margin-top:clamp(18px, 2.2vw, 30px)
}
.fw-blg-mast__copy{min-width:0}
/* Brand aura behind the headline. Radial gradients rather than blurred
   discs — a filter:blur() over a box this size costs a compositing layer
   for something a gradient renders for free. */
.fw-blg-mast__aura{
	position:absolute;inset:0;pointer-events:none;
	background:
		radial-gradient(720px 460px at 82% -8%,  color-mix(in srgb, var(--pk) 10%, transparent), transparent 62%),
		radial-gradient(620px 440px at 4% 22%,   color-mix(in srgb, var(--bl) 8.5%, transparent), transparent 60%),
		radial-gradient(520px 380px at 52% 96%,  color-mix(in srgb, var(--mt) 5%, transparent), transparent 64%)
}

/* Breadcrumb — badges, solid brand blue. Same device as the service page
   so the two page types feel like one site. */

/* Kicker — category chip, then the read time */
.fw-blg-mast__kicker{
	display:flex;align-items:center;gap:10px;flex-wrap:wrap;
	margin-top:0
}
.fw-blg-chip{
	display:inline-flex;align-items:center;
	padding:5px 13px;border-radius:100px;
	font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
	color:var(--pk-d);background:var(--pk-l);
	transition:background .25s, color .25s
}
.fw-blg-chip:hover{background:var(--pk);color:var(--wh)}
.fw-blg-mast__dot{width:3px;height:3px;border-radius:50%;background:var(--g3)}
.fw-blg-mast__read{
	display:inline-flex;align-items:center;gap:6px;
	font-size:11.5px;font-weight:500;color:var(--g5)
}
.fw-blg-mast__read i{font-size:13px;color:var(--pk)}

.fw-blg-mast__title{
	margin:clamp(12px, 1.4vw, 18px) 0 0;
	/* Beside a photograph rather than above one, so it comes down a step
	   from the full-width version and drops its own measure — the column
	   is the measure now. */
	font-family:var(--ff);
	font-size:clamp(27px, 1.5vw + 13px, 42px);
	font-weight:600;line-height:1.06;letter-spacing:-.038em;
	/* Brand blue, matching the h2s inside the article. On a service page
	   the h1 is a product name and stays ink; here it is the top of a
	   heading hierarchy that is already blue all the way down. */
	color:var(--bl-d);
	text-wrap:balance
}
.fw-blg-mast__dek{
	margin:clamp(12px, 1.3vw, 18px) 0 0;
	font-size:clamp(14px, .32vw + 13px, 16px);
	font-weight:400;line-height:1.6;letter-spacing:-.008em;
	color:var(--g6);
	text-wrap:pretty
}

/* ── Byline ──
   The author is credited here, at the top, where a reader decides whether
   to trust the piece, with the doctors who medically reviewed it beside them
   (.fw-rvw, css/custom.css); each is credited in full at the article's end. */
.fw-blg-byline{
	display:flex;align-items:center;gap:12px;flex-wrap:wrap;
	margin-top:clamp(18px, 2.2vw, 28px);
	padding-top:clamp(14px, 1.6vw, 20px);
	border-top:1px solid var(--line)
}
.fw-blg-byline__av{
	width:44px;height:44px;border-radius:14px;overflow:hidden;flex-shrink:0;
	background:var(--g2);box-shadow:0 0 0 1px color-mix(in srgb, var(--dk) 7%, transparent)
}
.fw-blg-byline__av img{width:100%;height:100%;object-fit:cover;display:block}
.fw-blg-byline__txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.fw-blg-byline__txt b{font-size:14.5px;font-weight:600;letter-spacing:-.016em;color:var(--ink)}
.fw-blg-byline__txt small{font-size:11.5px;color:var(--g5)}
.fw-blg-byline__sep{width:1px;height:34px;margin:0 6px;background:var(--line)}
.fw-blg-byline__meta{
	display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;
	width:100%;padding-top:12px;
	border-top:1px solid var(--line-soft);
	font-size:11.5px;color:var(--g5)
}
.fw-blg-byline__meta span{display:inline-flex;align-items:center;gap:6px}
.fw-blg-byline__meta i{font-size:12px;color:var(--g4)}

/* ══════════════════════════════════════════════════════════════
   03 · §1 COVER
   Authored at 1920×1080. The frame owns the ratio and the image is pinned
   to all four edges, so the same upload works at every width with no art
   direction in the markup.
   ══════════════════════════════════════════════════════════════ */

.fw-blg-cover{position:relative;margin:0;min-width:0}
.fw-blg-cover__frame{
	position:relative;width:100%;
	/* No height cap needed any more: in half a row a 16/9 frame is about
	   440px tall at 1600px wide, which is the size it should be. */
	aspect-ratio:16/9;
	overflow:hidden;
	border-radius:var(--r3);
	background:linear-gradient(160deg, var(--g1), var(--g2));
	box-shadow:var(--ring)
}
/* The `img.` prefix is load bearing: the base rule has to out-specify the
   theme's `img.lazy{max-width:100%}`, and vanilla-lazyload KEEPS the .lazy
   class when it adds .lazy-loaded — so a reveal written with lower
   specificity loses, and the cover downloads perfectly and then sits at
   opacity:0 forever with no error anywhere. */
.fw-blg-cover__img{
	position:absolute;inset:0;display:block;
	width:100%!important;height:100%!important;
	max-width:none!important;max-height:none!important;
	object-fit:cover!important;object-position:center;
	opacity:0;
	transition:opacity .55s var(--ease-soft)
}
img.fw-blg-cover__img.lazy-loaded,
img.fw-blg-cover__img.lazy-error{opacity:1}

/* Caption, hung off a short brand rule — the editorial tell that says this
   picture is part of the article rather than decoration above it. */
.fw-blg-cover__cap{
	display:flex;align-items:flex-start;gap:10px;
	margin-top:12px;
	font-size:11.5px;line-height:1.5;color:var(--g5);
}
.fw-blg-cover__rule{
	width:18px;height:1.5px;border-radius:2px;background:var(--pk);
	flex-shrink:0;margin-top:7px
}

/* ══════════════════════════════════════════════════════════════
   04 · §2 BODY GRID
   Article left, rail right. The ratio constrains the line length, not a
   cap on the text — see css/service.css §04 and OWF's service detail for
   the same reasoning.
   ══════════════════════════════════════════════════════════════ */

.fw-blg-body{position:relative;padding:var(--sec) 0 0;background:var(--paper)}
.fw-blg-body__grid{
	display:grid;
	grid-template-columns:
		minmax(0, 7fr)              /* article */
		minmax(280px, 3fr);         /* rail    */
	column-gap:clamp(26px, 3.4vw, 58px);
	align-items:start
}
.fw-blg-main{grid-column:1;min-width:0}
.fw-blg-rail{grid-column:2;min-width:0}
/* The plugin only needs the wrapper not to collapse before it runs. Same
   line the GG blog sidebar carries. */
.sticky-sidebar-wrap.fw-blg-rail{min-height:1px}

/* ══════════════════════════════════════════════════════════════
   05 · CONTENTS INDEX
   SINGLE MARKUP — one <nav>. A quiet numbered rail here; below 1024 the
   same nav becomes a full-bleed segmented chip bar pinned under the header,
   with the active chip scrolled into view by custom/js/article.js.
   ══════════════════════════════════════════════════════════════ */

/* ── Contents, as a disclosure ──
   Sixteen entries is a lot of rail to spend on navigation, so it collapses
   — and the count in the summary keeps telling you where you are while it
   is shut. The service page's index is an always-open nav; this is the
   clearest structural difference between the two rails. */
.fw-blg-toc{position:relative;z-index:1;padding-bottom:clamp(18px, 1.9vw, 26px)}
.fw-blg-toc__sum{
	display:flex;align-items:center;gap:10px;
	cursor:pointer;list-style:none;
	padding:2px 0;
	-webkit-tap-highlight-color:transparent
}
.fw-blg-toc__sum::-webkit-details-marker{display:none}
.fw-blg-toc__sum::marker{content:''}
.fw-blg-toc__sum .fw-blg-blk__lbl{margin-bottom:0;flex:0 0 auto}
/* The label's own trailing rule would fight the count and the chevron for
   the same space, so inside the summary it is turned off. */
.fw-blg-toc__sum .fw-blg-blk__lbl::after{display:none}
.fw-blg-toc__count{
	margin-left:auto;
	font-size:10.5px;font-weight:500;color:var(--g4);
	font-variant-numeric:tabular-nums
}
.fw-blg-toc__count b{color:var(--pk);font-weight:600}
.fw-blg-toc__count i{font-style:normal;margin:0 1px;opacity:.5}
.fw-blg-toc__chev{
	font-size:10px;color:var(--g4);
	transition:transform .3s var(--ease)
}
.fw-blg-toc[open] .fw-blg-toc__chev{transform:rotate(180deg)}
.fw-blg-toc__list{margin-top:var(--s3)!important}
/* ── Contents as a STEPPER ──
   The service rail sets its index as a numbered list against a continuous
   guide line. This one is a stepper: a dot per section, joined by short
   connectors, filling in as you pass each heading. Same information, a
   visibly different object — which is the point, since the two rails sit
   on the same site and should not be mistaken for each other. */
.fw-blg-toc__list{position:relative;display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.fw-blg-toc__list li{position:relative}
/* Connector between one dot and the next. On the last item there is
   nothing below to join, so it is omitted rather than trimmed. */
.fw-blg-toc__list li:not(:last-child)::after{
	content:'';position:absolute;left:13px;top:24px;bottom:0;width:1px;
	background:var(--line)
}
.fw-blg-toc__link{
	position:relative;
	display:flex;align-items:flex-start;gap:11px;
	padding:7px 8px 7px 8px;
	border-radius:var(--r1);
	font-size:13px;font-weight:450;letter-spacing:-.006em;
	color:var(--g5);
	transition:color .25s var(--ease), background .25s var(--ease);
	-webkit-tap-highlight-color:transparent
}
/* The number becomes the dot. font-size:0 hides the digits without taking
   them out of the markup — they are still there for a reader with CSS
   disabled, and for the mobile chip bar, which shows neither. */
.fw-blg-toc__num{
	position:relative;flex-shrink:0;
	width:11px;height:11px;margin-top:4px;
	font-size:0
}
.fw-blg-toc__num::before{
	content:'';position:absolute;inset:2.5px;border-radius:50%;
	background:var(--g3);
	transition:inset .3s var(--ease), background .3s, box-shadow .3s
}
.fw-blg-toc__link:hover .fw-blg-toc__num::before{background:var(--g4)}
.fw-blg-toc__link.is-on .fw-blg-toc__num::before{
	inset:0;background:var(--pk);
	box-shadow:0 0 0 3px var(--pk-ring)
}
.fw-blg-toc__txt{min-width:0;line-height:1.42;padding-top:1px}
.fw-blg-toc__link:hover{color:var(--g8)}
.fw-blg-toc__link.is-on{color:var(--ink);font-weight:550}
.fw-blg-toc__link.is-on .fw-blg-toc__num{color:var(--pk)}
/* No separate active marker: the stepper dot above is the marker. */

/* ══════════════════════════════════════════════════════════════
   06 · THE ARTICLE COLUMN
   The reading rules are css/prose.css. What belongs here is only the two
   knobs .fw-prose exposes.
   ══════════════════════════════════════════════════════════════ */

.fw-blg-main > .fw-prose{
	/* Media pulls back out of this inset to run flush with the column edge
	   while the text stays indented. A variable, because prose.css derives
	   negative margins from it. */
	--prose-inset:clamp(0px, 1.2vw, 18px);
	/* Where an #anchor jump parks a heading: clear of the sticky chrome AND
	   of the chip bar that sits under it on mobile. */
	--prose-anchor:calc(var(--article-top) + 96px);

	/* A shade larger and noticeably looser than the service page. Reference
	   copy is scanned — you arrive knowing what you want and leave once you
	   have it. An article is read straight through, and at that length the
	   leading is what stops it feeling like work. This is exactly the kind
	   of override the prose/page split exists for: css/prose.css owns HOW
	   the tags render, each page owns how densely. */
	font-size:clamp(16px, .3vw + 15px, 17.5px);
	line-height:1.8
}

/* ── Drop cap ──
   A magazine device, and out of place on a treatment page — which is why
   it lives here and not in the shared stylesheet. :first-of-type, so it
   only ever lands on the opening paragraph. */
.fw-blg-main > .fw-prose > p:first-of-type::first-letter{
	float:left;
	margin:6px 11px 0 0;
	font-size:3.3em;font-weight:600;line-height:.82;
	letter-spacing:-.045em;
	color:var(--bl-d)
}

/* ── Section heads ──
   The shared stylesheet numbers every h2 with a counter, which suits a
   reference page you navigate. An article is read in order and does not
   need its sections counted, so the number is replaced with a short brand
   rule. Higher specificity than the prose rule, so no !important. */
.fw-blg-main > .fw-prose h2::before{
	content:'';
	display:block;width:34px;height:2px;
	margin-bottom:.75em;
	border-radius:2px;
	background:var(--pk)
}

/* Caption prose.js writes under a table that genuinely overflows. Whether
   it does depends on the article column, not the window, so it cannot be a
   media query. */
.fw-prose__hint{
	display:none;align-items:center;gap:8px;
	margin:-6px 0 clamp(20px, 2.2vw, 32px);
	margin-left:calc(var(--prose-inset) * -1);
	font-size:12px;color:var(--g4)
}
.fw-prose__tw.is-scrollable + .fw-prose__hint{display:flex}
.fw-prose__hint::before{content:'';flex-shrink:0;width:14px;height:1px;background:currentColor}

/* ══════════════════════════════════════════════════════════════
   07 · TAGS · SHARE · FAQ · AUTHOR
   ══════════════════════════════════════════════════════════════ */

/* ── Tags + share close the article, before the FAQ ── */
.fw-blg-end{
	display:flex;align-items:center;justify-content:space-between;
	flex-wrap:wrap;gap:var(--s5);
	margin-top:clamp(32px, 3.4vw, 52px);
	padding-top:clamp(18px, 2.1vw, 28px);
	border-top:1px solid var(--line)
}
.fw-blg-tags{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
/* Outlined, not filled. Filled pills would compete with the category chip
   in the masthead, which is the one that means something. */
.fw-blg-tags a{
	display:inline-flex;align-items:center;
	padding:5px 12px;border-radius:100px;
	font-size:11.5px;font-weight:500;color:var(--g6);
	box-shadow:inset 0 0 0 1px var(--line);
	transition:color .25s, box-shadow .25s, background .25s
}
.fw-blg-tags a:hover{color:var(--pk-d);background:var(--pk-l);box-shadow:inset 0 0 0 1px transparent}

.fw-blg-share{display:flex;align-items:center;gap:var(--s2)}
.fw-blg-share__lbl{
	margin-right:var(--s1);
	font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g4)
}
.fw-blg-share__btn{
	display:inline-flex;align-items:center;justify-content:center;
	width:38px;height:38px;border-radius:50%;
	font-size:15px;color:var(--g6);
	box-shadow:var(--ring);
	transition:color .25s, background .25s, box-shadow .3s, transform .3s var(--ease);
	-webkit-tap-highlight-color:transparent
}
.fw-blg-share__btn:hover{
	color:var(--ink);background:var(--paper-2);
	transform:translateY(-2px);box-shadow:var(--ring), 0 8px 18px -10px var(--ink-a40)
}
.fw-blg-share__btn.is-done{color:var(--mt-d);background:var(--mt-l);box-shadow:none}

/* ── FAQ ──
   Native <details>: opens with JS disabled and is keyboard operable for
   free. custom/js/article.js only closes siblings. */
.fw-blg-faq{margin-top:clamp(38px, 4.2vw, 72px)}
.fw-blg-faq__head{margin-bottom:clamp(16px, 2vw, 26px)}
.fw-blg-faq__title{
	margin-top:var(--s3);
	font-family:var(--ff);
	font-size:clamp(23px, 2vw, 34px);font-weight:600;
	line-height:1.1;letter-spacing:-.034em;
	color:var(--ink);text-wrap:balance
}
.fw-blg-faq__list{border-top:1px solid var(--line)}
.fw-blg-faq__item{border-bottom:1px solid var(--line)}
.fw-blg-faq__q{
	display:flex;align-items:center;gap:var(--s5);
	padding:clamp(15px, 1.6vw, 21px) 0;
	cursor:pointer;list-style:none;
	font-size:clamp(15px, 1.2vw, 17.5px);font-weight:550;letter-spacing:-.015em;
	color:var(--ink);
	transition:color .25s;
	-webkit-tap-highlight-color:transparent
}
.fw-blg-faq__q::-webkit-details-marker{display:none}
.fw-blg-faq__q::marker{content:''}
.fw-blg-faq__q:hover{color:var(--pk)}
.fw-blg-faq__q-txt{flex:1;min-width:0;text-wrap:pretty}
/* +/− drawn from two bars rather than an icon glyph, so the transition is
   one bar collapsing instead of a whole element spinning. */
.fw-blg-faq__q-ico{position:relative;flex-shrink:0;width:20px;height:20px}
.fw-blg-faq__q-ico::before,
.fw-blg-faq__q-ico::after{
	content:'';position:absolute;left:50%;top:50%;
	background:var(--g4);border-radius:2px;
	transition:transform .4s var(--ease), background .3s
}
.fw-blg-faq__q-ico::before{width:14px;height:1.5px;transform:translate(-50%,-50%)}
.fw-blg-faq__q-ico::after {width:1.5px;height:14px;transform:translate(-50%,-50%)}
.fw-blg-faq__item[open] .fw-blg-faq__q-ico::after{transform:translate(-50%,-50%) scaleY(0)}
.fw-blg-faq__item[open] .fw-blg-faq__q-ico::before,
.fw-blg-faq__item[open] .fw-blg-faq__q-ico::after{background:var(--pk)}
.fw-blg-faq__a{padding:0 0 clamp(18px, 2vw, 28px)}
.fw-blg-faq__a p{
	font-size:clamp(14.5px, 1vw, 16px);line-height:1.72;color:var(--g6);
	text-wrap:pretty
}

/* ── Author credit ──
   A portrait, a name and a count. The role line and the biography were
   repeating at the foot of the article what the byline already said at the
   top of it, and a reader who wants more clicks through. */
.fw-blg-author{
	display:inline-flex;flex-direction:column;align-items:flex-start;
	margin-top:clamp(34px, 3.8vw, 60px);
	padding-left:clamp(14px, 1.6vw, 20px);
	border-left:2px solid var(--pk)
}
/* Portrait on the left; name and count stacked beside it, both inside the
   same row — so the credit reads as a signature rather than a stacked
   card, and the count sits under the name rather than under the photo. */
.fw-blg-author__row{display:flex;align-items:center;gap:12px}
.fw-blg-author__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.fw-blg-author__av{
	width:44px;height:44px;flex-shrink:0;
	border-radius:14px;overflow:hidden;
	background:var(--g2);
	box-shadow:0 0 0 1px color-mix(in srgb, var(--dk) 7%, transparent);
	transition:box-shadow .3s
}
.fw-blg-author__av img{width:100%;height:100%;object-fit:cover;display:block}
.fw-blg-author__name{
	font-size:clamp(15px, 1.1vw, 17px);font-weight:600;letter-spacing:-.018em;
	color:var(--ink);
	transition:color .25s
}
.fw-blg-author__count{
	font-size:11.5px;font-weight:500;color:var(--g5);
	font-variant-numeric:tabular-nums
}
.fw-blg-author:hover .fw-blg-author__name{color:var(--pk-d)}
.fw-blg-author:hover .fw-blg-author__av{box-shadow:0 0 0 1px color-mix(in srgb, var(--pk) 30%, transparent)}

/* ══════════════════════════════════════════════════════════════
   08 · COMPANION RAIL
   NO CARDS. Hairline rules between sections and rich rows inside them —
   an icon and a blurb on every link, a note under the clinician credit.
   A stack of containers down a column reads as a widget tray whatever
   they are made of, and the article beside it has no container either.
   ══════════════════════════════════════════════════════════════ */

.fw-blg-rail__inner{position:relative;display:flex;flex-direction:column}
/* Brand aura behind the rail, travelling with the sticky column. */
.fw-blg-rail__inner::before{
	content:'';position:absolute;z-index:0;
	inset:-60px -40px -40px -40px;pointer-events:none;
	background:
		radial-gradient(420px 320px at 80% 2%,  color-mix(in srgb, var(--pk) 9%, transparent), transparent 66%),
		radial-gradient(380px 340px at 10% 38%, var(--bl-t), transparent 64%),
		radial-gradient(340px 300px at 86% 82%, color-mix(in srgb, var(--mt) 6.5%, transparent), transparent 66%)
}

/* Dashed, where the service rail's sections are divided by a solid
   hairline. A small thing, but it is the divider you see six times down
   the column. */
.fw-blg-blk{
	position:relative;z-index:1;
	padding-block:clamp(18px, 1.9vw, 26px);
	border-top:1px dashed color-mix(in srgb, var(--dk) 16%, transparent)
}
.fw-blg-blk:last-child{padding-bottom:0}

.fw-blg-blk__head{
	display:flex;align-items:baseline;justify-content:space-between;
	gap:12px;margin-bottom:var(--s3)
}
.fw-blg-blk__head .fw-blg-blk__lbl{margin-bottom:0}
.fw-blg-blk__head .fw-blg-link{flex-shrink:0}

/* The label carries its rule AFTER the text, running out to the column
   edge — where the service rail puts a short tick in front of it. Same
   family, different hand, and enough to tell the two rails apart at a
   glance without inventing a second visual language. */
.fw-blg-blk__lbl{
	display:flex;align-items:center;gap:10px;
	margin-bottom:var(--s3);
	font-size:9.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
	color:var(--g5)
}
.fw-blg-blk__lbl::after{
	content:'';flex:1;height:1px;
	background:linear-gradient(90deg, var(--pk), var(--pk-t2) 60%, transparent)
}
.fw-blg-blk__lbl--pk{color:var(--pk)}

/* ── Reviewing clinician ── */
.fw-blg-doc{display:flex;align-items:center;gap:13px}
/* Squircle, not a circle: a round crop on a head-and-shoulders portrait
   cuts the shoulders off and makes every clinician look like an avatar
   chip. */
.fw-blg-doc__av{
	width:54px;height:54px;border-radius:16px;overflow:hidden;flex-shrink:0;
	background:var(--g2);box-shadow:0 0 0 1px color-mix(in srgb, var(--dk) 7%, transparent)
}
.fw-blg-doc__av img{width:100%;height:100%;object-fit:cover;display:block}
.fw-blg-doc__txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.fw-blg-doc__txt b{
	display:flex;align-items:center;gap:5px;
	font-size:15px;font-weight:600;letter-spacing:-.018em;color:var(--ink)
}
.fw-blg-doc__txt b i{font-size:12.5px;color:var(--mt-d)}
.fw-blg-doc__txt small{font-size:11px;line-height:1.5;color:var(--g5)}
.fw-blg-doc__txt small:first-of-type{color:var(--g6);font-weight:550}
/* The disclaimer earns its place: a named reviewer is a trust signal and
   readers reasonably over-read it. */
.fw-blg-doc__note{
	margin-top:var(--s4);padding-top:var(--s3);
	border-top:1px solid var(--line-soft);
	font-size:11px;line-height:1.6;color:var(--g5)
}
.fw-blg-doc__note b{color:var(--g7);font-weight:600}

/* ── Helpful links ── */
.fw-blg-help{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.fw-blg-help li + li{border-top:1px solid var(--line-soft)}
.fw-blg-help a{
	display:grid;
	grid-template-columns:auto minmax(0,1fr) auto;
	align-items:center;
	column-gap:11px;
	padding:10px 8px;margin-inline:-8px;
	border-radius:10px;
	transition:background .25s;
	-webkit-tap-highlight-color:transparent
}
.fw-blg-help a:hover{background:color-mix(in srgb, var(--bl) 4.5%, transparent)}
/* Icon in an outlined circle rather than bare — the service rail sets its
   helpful-links icons naked and numbers the rows instead. */
.fw-blg-help a > i:first-child{
	display:flex;align-items:center;justify-content:center;
	width:30px;height:30px;border-radius:50%;
	font-size:13px;color:var(--bl);
	box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bl) 22%, transparent);
	transition:color .25s, background .25s, box-shadow .25s
}
.fw-blg-help a:hover > i:first-child{
	color:var(--wh);background:var(--bl);box-shadow:inset 0 0 0 1px transparent
}
.fw-blg-help__txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.fw-blg-help__txt b{
	font-size:12.5px;font-weight:600;letter-spacing:-.008em;color:var(--ink);
	transition:color .25s
}
.fw-blg-help__txt small{
	font-size:10.5px;line-height:1.4;color:var(--g5);
	display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden
}
.fw-blg-help__arr{
	font-size:11px;color:var(--g3);
	transition:color .25s, transform .3s var(--ease)
}
.fw-blg-help a:hover .fw-blg-help__txt b{color:var(--bl-d)}
.fw-blg-help a:hover .fw-blg-help__arr{color:var(--bl);transform:translateX(3px)}

/* ── Consult ──
   The one section that has to be noticed, and the RULE and the filled
   button do it — not a container. A 2px brand rule where every other
   section has a 1px hairline is enough of a signal. */
.fw-blg-blk--cta{
	border-top:2px solid var(--pk);
	padding-top:clamp(16px, 1.7vw, 22px)
}
.fw-blg-blk__say{
	margin-bottom:var(--s4);
	font-size:clamp(14.5px, 1vw, 16.5px);font-weight:500;
	line-height:1.42;letter-spacing:-.018em;color:var(--ink);
	text-wrap:pretty
}
.fw-blg-blk--cta .fw-blg-btn{width:100%}
.fw-blg-blk__alt{
	display:inline-flex;align-items:center;gap:7px;
	margin-top:var(--s3);
	font-size:12px;color:var(--g6);
	transition:color .25s
}
.fw-blg-blk__alt i{font-size:14px;color:var(--wa)}
.fw-blg-blk__alt:hover{color:var(--ink)}

/* ══════════════════════════════════════════════════════════════
   09 · §3 KEEP READING
   Three across, full bleed. Editorial rows — image, kicker, headline,
   meta — not cards: no panel, no radius on the row, no shadow. The
   photograph is the only shape.
   ══════════════════════════════════════════════════════════════ */

.fw-blg-next{
	position:relative;
	margin-top:var(--sec);
	padding:clamp(34px, 4vw, 68px) 0;
	background:var(--paper-2);
	border-block:1px solid var(--line-soft)
}
.fw-blg-next__head{
	display:flex;align-items:baseline;justify-content:space-between;
	gap:16px;margin-bottom:clamp(20px, 2.4vw, 34px)
}
.fw-blg-next__grid{
	display:grid;grid-template-columns:repeat(4, minmax(0,1fr));
	gap:clamp(18px, 2.2vw, 36px);
	margin:0;padding:0;list-style:none
}
.fw-blg-next__grid a{
	display:flex;flex-direction:column;
	-webkit-tap-highlight-color:transparent
}
.fw-blg-next__img{
	display:block;width:100%;aspect-ratio:16/9;
	border-radius:var(--r2);overflow:hidden;
	background:var(--g1);
	box-shadow:var(--ring)
}
.fw-blg-next__img img{
	width:100%;height:100%;object-fit:cover;display:block;
	transition:transform 1s var(--ease-soft)
}
.fw-blg-next__grid a:hover .fw-blg-next__img img{transform:scale(1.04)}
.fw-blg-next__cat{
	margin-top:var(--s4);
	font-size:9.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
	color:var(--pk)
}
.fw-blg-next__t{
	margin-top:6px;
	font-size:clamp(15px, 1.1vw, 18px);font-weight:600;
	line-height:1.28;letter-spacing:-.02em;color:var(--ink);
	text-wrap:balance;
	transition:color .25s
}
.fw-blg-next__grid a:hover .fw-blg-next__t{color:var(--bl-d)}
.fw-blg-next__meta{
	display:inline-flex;align-items:center;gap:6px;
	margin-top:8px;
	font-size:11.5px;color:var(--g5)
}
.fw-blg-next__meta i{font-size:12px;color:var(--g4)}

/* ══════════════════════════════════════════════════════════════
   10 · §4 CLOSING BAND
   ══════════════════════════════════════════════════════════════ */

.fw-blg-close{
	position:relative;overflow:hidden;
	padding:clamp(42px, 4.8vw, 92px) 0;
	background:var(--ink)
}
.fw-blg-close__aura{
	position:absolute;inset:0;pointer-events:none;
	background:
		radial-gradient(900px 620px at 12% -10%, var(--arc-3), transparent 62%),
		radial-gradient(820px 640px at 90% 108%, var(--bl-edge), transparent 60%),
		radial-gradient(620px 460px at 60% 36%,  color-mix(in srgb, var(--mt) 9%, transparent), transparent 64%)
}
/* Single brand hairline on the top edge — the same device .fw-tm uses. */
.fw-blg-close::before{
	content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:1;
	background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--pk) 70%, transparent) 22%, color-mix(in srgb, var(--bl) 70%, transparent) 62%, transparent);
	opacity:.8
}
/* Two columns: the statement holds the left, the actions the right. A
   single left-aligned block leaves most of a full-bleed band empty, and
   centring it only makes the emptiness symmetrical. */
.fw-blg-close__inner{
	display:grid;
	grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
	column-gap:clamp(32px, 5vw, 110px);
	align-items:end
}
.fw-blg-close__title{
	margin-top:var(--s5);
	font-family:var(--ff);
	font-size:clamp(26px, 3.1vw, 48px);font-weight:600;
	line-height:1.08;letter-spacing:-.038em;
	color:var(--wh);text-wrap:balance
}
.fw-blg-close__sub{
	font-size:clamp(14.5px, 1.15vw, 17px);font-weight:300;
	line-height:1.62;letter-spacing:-.008em;
	color:color-mix(in srgb, var(--wh) 68%, transparent);
	text-wrap:pretty
}
.fw-blg-close__btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:clamp(20px, 2.4vw, 30px)}

/* ══════════════════════════════════════════════════════════════
   11 · RESPONSIVE — mode switches only

   Nothing here nudges a font size; the clamp() scale already tracks the
   viewport. Each query changes how a component BEHAVES.
   ══════════════════════════════════════════════════════════════ */

@media(max-width:1024px){

	/* The house gutter on mobile — the same 14px the header drops to at
	   this width, so the page keeps lining up with the chrome. */
	.fw-blg-page{--pad:14px}

	/* SINGLE MARKUP — `display:contents` three deep erases the <aside>, its
	   inner wrapper and the wrapper the sticky plugin injects, promoting
	   every block to a direct child of this flex column. `order` then puts
	   the contents index first. No mobile copy of any block. */
	.fw-blg-body{padding-top:clamp(26px, 5vw, 44px)}
	.fw-blg-body__grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
	.fw-blg-rail,
	.fw-blg-rail__inner,
	.fw-blg-rail .scwStickySidebar{display:contents}
	.fw-blg-main{order:0}
	.fw-blg-blk{order:1}
	.fw-blg-blk--cta{order:1;margin-top:clamp(20px, 4vw, 30px)}
	/* The aura must be switched off by hand. A display:contents element
	   still draws its ::before, so the aura's -40px right inset rendered and
	   ran 40px past a phone screen, widening the whole page (13 Oct 2026).
	   On one column it would only sit behind the article anyway. */
	.fw-blg-rail__inner::before{display:none}

	/* Contents index becomes a full-bleed segmented chip bar pinned under
	   the site header. */
	.fw-blg-toc{
		order:-1;
		position:sticky;top:var(--article-top);z-index:60;
		margin:0 calc(-1 * var(--pad)) clamp(18px, 4vw, 26px);
		padding:10px 0;
		background:color-mix(in srgb, var(--wh) 90%, transparent);
		backdrop-filter:blur(24px) saturate(180%);
		-webkit-backdrop-filter:blur(24px) saturate(180%);
		box-shadow:0 1px 0 var(--line), 0 10px 24px -18px color-mix(in srgb, var(--dk) 50%, transparent)
	}
	/* The summary is the disclosure control and has no job as a chip bar,
	   so it goes. A CLOSED <details> would then hide the chips entirely —
	   if the reader collapsed it on desktop and rotated to portrait — so
	   the list is forced back into flow regardless of the open state. */
	.fw-blg-toc__sum{display:none}
	.fw-blg-toc:not([open]) .fw-blg-toc__list{display:flex}
	.fw-blg-toc__list{margin-top:0!important}
	.fw-blg-toc__num{display:none}
	.fw-blg-toc__list li:not(:last-child)::after{display:none}
	.fw-blg-toc__list{
		flex-direction:row;gap:7px;
		overflow-x:auto;
		scroll-snap-type:x proximity;
		scroll-padding-inline:var(--pad);
		padding-inline:var(--pad);
		overscroll-behavior-x:contain;
		scrollbar-width:none;-ms-overflow-style:none
	}
	.fw-blg-toc__list::-webkit-scrollbar{display:none}
	.fw-blg-toc__list::before{display:none}
	.fw-blg-toc__link{
		min-height:38px;padding:0 16px;align-items:center;
		border-radius:100px;
		background:var(--paper-2);
		box-shadow:0 0 0 1px var(--ink-a06);
		font-size:13px;white-space:nowrap;
		scroll-snap-align:center
	}
	.fw-blg-toc__link::before{display:none}
	.fw-blg-toc__txt{overflow:visible;text-overflow:clip}
	.fw-blg-toc__link.is-on{
		color:var(--wh);background:var(--ink);
		box-shadow:0 6px 16px -8px color-mix(in srgb, var(--dk-d) 90%, transparent)
	}

	/* The badges wrap to a second row at this width, and the last one just
	   says "This article" — which the headline three lines below makes
	   obvious. Drop the badge rather than spend a row on it. NOT
	   `:last-of-type`: the current crumb is a <span> too, so it is the last
	   span and the separator would never match. :has() selects the one
	   immediately before it; where :has() is unsupported the rule is
	   dropped and a trailing dot shows, which is cosmetic. */

	/* Masthead stacks: copy, then cover. Copy first on purpose — the
	   headline and the first sentence are what a phone reader needs above
	   the fold, and leading with the picture pushes both off it. */
	.fw-blg-mast__grid{grid-template-columns:minmax(0,1fr);gap:clamp(18px, 4vw, 26px)}

	/* Keep reading goes two across; four columns at this width leave each
	   headline about 160px, which breaks every one of them. */
	.fw-blg-next__grid{grid-template-columns:repeat(2, minmax(0,1fr))}

	.fw-blg-close__inner{grid-template-columns:minmax(0,1fr);row-gap:var(--s6)}
}

@media(max-width:768px){
	.fw-blg-cover__frame{aspect-ratio:3/2}
	.fw-blg-end{flex-direction:column;align-items:flex-start;gap:var(--s4)}
	.fw-blg-author{flex-direction:column;gap:var(--s4)}
	.fw-blg-next__grid{grid-template-columns:minmax(0,1fr);gap:clamp(24px, 6vw, 34px)}
	.fw-blg-next__grid a{
		display:grid;grid-template-columns:132px minmax(0,1fr);
		column-gap:14px;align-items:start
	}
	.fw-blg-next__img{grid-row:1 / span 3}
	.fw-blg-next__cat{margin-top:0}
	.fw-blg-close__btns .fw-blg-btn{flex:1 1 100%}
	.fw-prose th,.fw-prose td{padding:12px 13px}
	.fw-prose__tw{scrollbar-width:thin}
}

@media(max-width:480px){
	.fw-blg-cover__frame{aspect-ratio:4/3}
	.fw-blg-byline__meta{gap:6px 14px}
	.fw-blg-byline__sep{display:none}
	.fw-blg-byline .fw-rvw{width:100%}
	.fw-blg-next__grid a{grid-template-columns:104px minmax(0,1fr)}
}

/* ══════════════════════════════════════════════════════════════
   TOUCH · MOTION · FOCUS
   ══════════════════════════════════════════════════════════════ */

/* On a touch screen a :hover transform latches after the tap and stays
   until you touch something else. Strip the movement; the colour changes
   still read as feedback. */
@media(hover:none){
	.fw-blg-share__btn:hover,
	.fw-blg-btn--wh:hover{transform:none}
	.fw-blg-next__grid a:hover .fw-blg-next__img img{transform:none}
	.fw-prose tbody tr:hover th,
	.fw-prose tbody tr:hover td{background:transparent!important}
}

@media(prefers-reduced-motion:reduce){
	.fw-blg-page *,
	.fw-blg-page *::before,
	.fw-blg-page *::after{
		animation-duration:.01ms!important;
		animation-iteration-count:1!important;
		transition-duration:.01ms!important;
		scroll-behavior:auto!important
	}
	.fw-blg-cover__img{opacity:1}
}

/* ══════════════════════════════════════════════════════════════
   ANCHOR OFFSET
   Every id inside the article region, not just the headings prose.css
   already covers. custom/js/core.js scrolls in-page links with
   scrollIntoView, which honours scroll-margin-top — so this is the single
   place that records how far the sticky chrome reaches, and a section
   added tomorrow clears it without anyone remembering to say so.
   ══════════════════════════════════════════════════════════════ */
.fw-blg [id]{scroll-margin-top:calc(var(--article-top) + 96px)}

.fw-blg-page a:focus-visible,
.fw-blg-page button:focus-visible,
.fw-blg-page summary:focus-visible{
	outline:2px solid var(--bl);
	outline-offset:3px;
	border-radius:8px
}