/* ══════════════════════════════════════════════════════════════
   css/our-story.css — /our-story  (prefix fw-os)

   The house rules, all kept: bright grounds only (depth from blurred
   brand discs and tinted whites), no card boxes, no max-width on any
   section or text, colour only from :root tokens, the 28px / 14px
   gutters. The masthead is the shared .fw-mast band from css/custom.css;
   only its photograph is set here.

   Motion is quiet and optional: our-story.js adds .fw-os--anim to
   <main> before anything is hidden, so the page reads complete without
   it, and prefers-reduced-motion switches every movement off.

   A desktop reads as a magazine spread. At ≤768px the same markup
   becomes an app: a pinned pill bar, an upright chapter tracker, swipe
   rows and thumb-height buttons.
   ══════════════════════════════════════════════════════════════ */

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

.fw-os-page{
	--pad:28px;
	--article-top:116px;
	--article-progress:0;

	--ink:var(--dk-d);
	--line:color-mix(in srgb, var(--dk) 9%, transparent);
	--line-soft:color-mix(in srgb, var(--dk) 5.5%, transparent);

	--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
	--sec:clamp(52px, 9vh, 112px);

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

	background:var(--wh);
	-webkit-text-size-adjust:100%
}
.fw-os{display:block;position:relative}

/* Canvas sets a serif on every bare <em>; ours are type, not icons. */
.fw-os-page em{font-family:var(--ff);font-style:normal}

.fw-os-jump__inner,
.fw-os-sec__inner,
.fw-os-moment__inner,
.fw-os-close__inner{
	position:relative;z-index:1;
	width:100%;
	padding-inline:var(--pad)
}

.fw-os-sec{position:relative;padding:var(--sec) 0}

.fw-os-eyebrow{
	display:flex;align-items:center;gap:9px;margin:0;
	font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
	color:var(--g5)
}
.fw-os-eyebrow::before{
	content:'';width:14px;height:1.5px;border-radius:2px;background:var(--pk);flex-shrink:0
}

.fw-os-h2{
	margin:var(--s3) 0 0;
	font-family:var(--ff);
	font-size:clamp(27px, 4.6vh, 46px);font-weight:600;
	line-height:1.08;letter-spacing:-.035em;
	color:var(--ink);text-wrap:balance
}
.fw-os-lead{
	margin:0;
	font-size:clamp(15px, 2.1vh, 18px);font-weight:300;
	line-height:1.65;letter-spacing:-.006em;
	color:var(--g6);text-wrap:pretty
}

/* Heading left, the lead right, bottom aligned: the care-area grammar. */
.fw-os-head{
	display:grid;
	grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
	column-gap:clamp(28px, 4vw, 88px);
	align-items:end;
	margin-bottom:clamp(28px, 5.4vh, 60px)
}

.fw-os-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:clamp(14px, 2.4vh, 22px)}

.fw-os-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:9px;
	min-height:50px;padding:0 26px;
	border-radius:100px;
	font-size:14.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
	color:var(--wh);background:var(--pk-d);
	box-shadow:var(--pk-glow);
	transition:background .25s, box-shadow .3s, transform .25s var(--ease);
	-webkit-tap-highlight-color:transparent
}
.fw-os-btn i{font-size:13px;transition:transform .3s var(--ease)}
.fw-os-btn:hover{color:var(--wh);background:var(--pk-dd);box-shadow:var(--pk-glow-lg)}
.fw-os-btn:hover i{transform:translateX(3px)}
.fw-os-btn:active{transform:scale(.975)}
.fw-os-btn--ghost{
	color:var(--ink);background:var(--wh);
	box-shadow:inset 0 0 0 1px var(--line), 0 8px 20px -14px var(--ink-a40)
}
.fw-os-btn--ghost:hover{color:var(--pk-ink);background:var(--pk-wash);box-shadow:inset 0 0 0 1px var(--pk-ring)}

.fw-os-txtlink{
	display:inline-flex;align-items:center;gap:7px;
	font-size:14px;font-weight:600;color:var(--bl-d);
	transition:color .25s
}
.fw-os-txtlink i{font-size:12px;transition:transform .3s var(--ease)}
.fw-os-txtlink:hover{color:var(--pk-ink)}
.fw-os-txtlink:hover i{transform:translateX(3px)}

/* Ambient light: solid brand discs under a heavy blur, in a clipped
   layer that is a SIBLING of the content, so nothing can widen the page. */
.fw-os-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fw-os-fx i{
	position:absolute;display:block;border-radius:50%;aspect-ratio:1;
	width:clamp(260px, 30vw, 540px);filter:blur(100px);opacity:.11
}
.fw-os-fx i:first-child{top:-14%;left:-8%;background:var(--pk)}
.fw-os-fx i:last-child{bottom:-18%;right:-4%;background:var(--bl)}
.fw-os-fx--tl i:first-child{top:auto;bottom:-22%;left:26%;background:var(--mt)}
.fw-os-fx--tl i:last-child{bottom:auto;top:-18%;right:8%;background:var(--pk)}
.fw-os-fx--where i:first-child{background:var(--pu)}
@media(prefers-reduced-motion:no-preference){
	.fw-os-fx i:first-child{animation:fwOsDrift 28s ease-in-out infinite}
	.fw-os-fx i:last-child{animation:fwOsDrift 34s ease-in-out infinite reverse}}
@keyframes fwOsDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(34px,-26px,0) scale(1.1)}}

/* House glyphs are stroked outlines; css/custom.css gives the base. */
.fw-os-page .fw-ico{stroke-width:1.6}

/* `img.` out-specifies the theme's img.lazy{max-width:100%}, and
   vanilla-lazyload KEEPS .lazy when it adds .lazy-loaded. */
.fw-os img.lazy{opacity:0;transition:opacity .7s var(--ease-soft)}
.fw-os img.lazy-loaded,
.fw-os img.lazy-error{opacity:1}

/* Reveal on scroll. Hidden ONLY once our-story.js has run. */
.fw-os--anim [data-os-reveal]{
	opacity:0;transform:translate3d(0, 22px, 0);
	transition:opacity .8s var(--ease-soft), transform .9s var(--ease)
}
.fw-os--anim [data-os-reveal].is-in{opacity:1;transform:none}

/* ══════════════════════════════════════════════════════════════
   01 · §1 MASTHEAD — the shared band, this page's photograph
   ══════════════════════════════════════════════════════════════ */

.fw-os-cover{aspect-ratio:4/3.3;max-height:min(64vh, 620px)}
.fw-os-cover__img{
	position:absolute;inset:0;
	width:100%;height:100%;
	object-fit:cover;object-position:52% 36%
}
.fw-os-page .fw-mast__cover-ico{color:var(--pk)}
.fw-os-page .fw-mast__cover-ico .fw-ico{width:46%;height:46%}
.fw-os-page .fw-mast__stat-ico .fw-ico{width:52%;height:52%}

/* ══════════════════════════════════════════════════════════════
   02 · §2 ON THIS PAGE — pinned rail
   ══════════════════════════════════════════════════════════════ */

.fw-os-jump{
	position:sticky;top:var(--article-top);z-index:60;
	background:color-mix(in srgb, var(--wh) 90%, transparent);
	backdrop-filter:blur(14px) saturate(180%);
	-webkit-backdrop-filter:blur(14px) saturate(180%);
	border-block:1px solid var(--line-soft)
}
.fw-os-jump ul{
	display:flex;align-items:stretch;gap:0;
	margin:0;padding:0;list-style:none;
	overflow-x:auto;overflow-y:hidden;
	scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);
	overscroll-behavior-x:contain;
	scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.fw-os-jump ul::-webkit-scrollbar{display:none}
.fw-os-jump li{position:relative;flex:0 0 auto;display:flex;scroll-snap-align:start}
.fw-os-jump li + li::before{
	content:'';position:absolute;left:0;top:24%;bottom:24%;width:1px;
	background:linear-gradient(180deg, transparent, var(--line) 26%, var(--line) 74%, transparent)
}
.fw-os-jump__link{
	display:flex;align-items:center;gap:9px;white-space:nowrap;
	padding:14px clamp(12px, 1.4vw, 22px);
	border-bottom:2px solid transparent;
	font-size:13px;font-weight:500;letter-spacing:-.005em;color:var(--g6);
	transition:color .25s, border-color .25s, background .25s;
	-webkit-tap-highlight-color:transparent
}
.fw-os-jump__link .fw-ico{font-size:16px;color:var(--g5);transition:color .25s}
.fw-os-jump__link:hover{color:var(--bl-d);border-bottom-color:var(--bl);background:var(--bl-bg)}
.fw-os-jump__link.is-on{color:var(--pk-d);font-weight:600;border-bottom-color:var(--pk)}
.fw-os-jump__link.is-on .fw-ico,
.fw-os-jump__link:hover .fw-ico{color:currentColor}

.fw-os-jump__inner::before,
.fw-os-jump__inner::after{
	content:'';position:absolute;top:0;bottom:0;z-index:2;
	width:clamp(40px, 5vw, 74px);pointer-events:none;opacity:0;transition:opacity .3s
}
.fw-os-jump__inner::before{left:var(--pad);background:linear-gradient(90deg, var(--wh) 22%, transparent)}
.fw-os-jump__inner::after{right:var(--pad);background:linear-gradient(270deg, var(--wh) 22%, transparent)}
.fw-os-jump.has-rail:not(.at-start) .fw-os-jump__inner::before{opacity:1}
.fw-os-jump.has-rail:not(.at-end) .fw-os-jump__inner::after{opacity:1}

.fw-os-jump__nav,
.fw-os-tl__nav{
	position:absolute;top:50%;transform:translateY(-50%);z-index:3;
	display:none;align-items:center;justify-content:center;
	width:34px;height:34px;padding:0;border:0;border-radius:50%;
	background:var(--wh);color:var(--g6);cursor:pointer;
	box-shadow:0 4px 14px -5px var(--ink-a40), inset 0 0 0 1px var(--line);
	transition:color .22s, opacity .25s, transform .25s var(--ease)
}
.fw-os-jump.has-rail .fw-os-jump__nav{display:flex}
.fw-os-jump__nav i,
.fw-os-tl__nav i{font-size:12px;line-height:1}
.fw-os-jump__nav:hover,
.fw-os-tl__nav:hover{color:var(--bl-d)}
.fw-os-jump__nav[disabled],
.fw-os-tl__nav[disabled]{opacity:0;pointer-events:none}
.fw-os-jump__nav--prev{left:calc(var(--pad) - 5px)}
.fw-os-jump__nav--next{right:calc(var(--pad) - 5px)}

/* ══════════════════════════════════════════════════════════════
   03 · §3 WHERE IT BEGAN
   ══════════════════════════════════════════════════════════════ */

.fw-os-begin{background:linear-gradient(180deg, var(--wh), var(--paper-p2));overflow:hidden}
.fw-os-begin__grid{
	display:grid;
	grid-template-columns:minmax(0, 6fr) minmax(0, 6fr);
	column-gap:clamp(32px, 5.5vw, 110px);
	align-items:center
}
.fw-os-begin__text{display:grid;gap:clamp(12px, 2vh, 18px);margin-top:clamp(16px, 2.6vh, 26px)}
.fw-os-begin__text p{
	margin:0;
	font-size:clamp(14.5px, 1.95vh, 16.5px);line-height:1.75;color:var(--g6);text-wrap:pretty
}
.fw-os-begin__text p.fw-os-begin__lead{
	font-size:clamp(17px, 2.5vh, 21px);font-weight:400;line-height:1.55;letter-spacing:-.014em;color:var(--g8)
}
/* The drop letter: one large pink capital, the magazine opening. */
.fw-os-begin__lead::first-letter{
	float:left;
	margin:.06em .12em 0 0;
	font-size:3.3em;font-weight:600;line-height:.82;
	color:var(--pk)
}
.fw-os-begin__fig{
	position:relative;margin:0;
	aspect-ratio:4/3.2;max-height:min(70vh, 700px);
	border-radius:var(--rx);overflow:hidden;background:var(--pk-wash);
	box-shadow:0 40px 80px -44px var(--ink-a40)
}
.fw-os-begin__fig img{
	position:absolute;inset:0;
	width:100%!important;height:100%!important;max-width:none!important;
	object-fit:cover;object-position:46% 40%
}
.fw-os-begin__cap{
	position:absolute;left:clamp(12px, 1.6vw, 20px);right:clamp(12px, 1.6vw, 20px);bottom:clamp(12px, 1.6vw, 20px);
	display:flex;align-items:center;gap:12px;
	padding:clamp(11px, 1.5vh, 14px) clamp(14px, 1.4vw, 18px);
	border-radius:var(--rl);
	background:color-mix(in srgb, var(--wh) 82%, transparent);
	backdrop-filter:blur(12px) saturate(160%);
	-webkit-backdrop-filter:blur(12px) saturate(160%);
	box-shadow:0 14px 30px -18px var(--ink-a40);
	font-size:clamp(13.5px, 1.8vh, 15px);font-weight:500;line-height:1.4;letter-spacing:-.01em;color:var(--ink)
}
.fw-os-begin__cap .fw-ico{flex-shrink:0;width:22px;height:22px;color:var(--pk)}

/* The pull line: display type across the band's foot, on a hairline. */
.fw-os-quote{
	position:relative;
	margin:clamp(40px, 7vh, 80px) 0 0;padding:clamp(26px, 4.4vh, 44px) 0 0;
	border-top:1px solid var(--line)
}
.fw-os-quote::before{
	content:'';position:absolute;top:-1px;left:0;width:clamp(60px, 8vw, 120px);height:2px;
	background:linear-gradient(90deg, var(--pk), var(--bl))
}
.fw-os-quote p{
	margin:0;
	font-family:var(--ff);
	font-size:clamp(26px, 5vh, 54px);font-weight:300;
	line-height:1.12;letter-spacing:-.035em;
	color:var(--ink);text-wrap:balance
}

/* ══════════════════════════════════════════════════════════════
   04 · §4 HOW WE GOT HERE — the chapter line
   Horizontal on a desktop. One line runs under every node; its fill
   (--os-p from our-story.js) grows as you travel along the track.
   core.js [data-rail] brings the arrows only when it overflows.
   ══════════════════════════════════════════════════════════════ */

.fw-os-tl{
	--node:clamp(56px, 7.6vh, 70px);
	--stop:clamp(250px, calc((100vw - 56px) / 4.3), 360px);
	overflow:hidden;
	background:linear-gradient(180deg, var(--paper-p2), var(--paper-b2) 55%, var(--wh))
}
.fw-os-tl__rail{position:relative;z-index:1;--os-p:0}
.fw-os-tl__line{
	position:absolute;z-index:0;left:var(--pad);right:var(--pad);
	top:calc(18px + var(--node) / 2 - 1px);height:2px;border-radius:2px;
	background:var(--line)
}
.fw-os-tl__fill{
	position:absolute;inset:0;border-radius:inherit;
	background:linear-gradient(90deg, var(--pk), var(--bl) 50%, var(--mt));
	transform:scaleX(var(--os-p));transform-origin:left;
	transition:transform .9s var(--ease)
}
.fw-os-tl__track{
	position:relative;z-index:1;
	display:flex;
	margin:0;padding:18px var(--pad) var(--s3);
	list-style:none;
	overflow-x:auto;overscroll-behavior-x:contain;
	scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
	scrollbar-width:none
}
.fw-os-tl__track::-webkit-scrollbar{display:none}
.fw-os-tl__rail.has-rail:not(.at-end) .fw-os-tl__track{
	-webkit-mask-image:linear-gradient(90deg, var(--ink) 86%, transparent);
	        mask-image:linear-gradient(90deg, var(--ink) 86%, transparent)
}
.fw-os-tl__rail.has-rail.at-end:not(.at-start) .fw-os-tl__track{
	-webkit-mask-image:linear-gradient(90deg, transparent, var(--ink) 14%);
	        mask-image:linear-gradient(90deg, transparent, var(--ink) 14%)
}
.fw-os-tl__stop{
	--ac:var(--pk);--ac-ink:var(--pk-ink);--ac-l:var(--pk-l);--ac-ring:var(--pk-ring);
	position:relative;flex:0 0 var(--stop);
	display:flex;flex-direction:column;align-items:flex-start;
	padding-right:clamp(22px, 2.4vw, 40px);
	scroll-snap-align:start
}
.fw-os-tl__stop:nth-child(4n+2){--ac:var(--bl);--ac-ink:var(--bl-ink);--ac-l:var(--bl-l);--ac-ring:var(--bl-ring)}
.fw-os-tl__stop:nth-child(4n+3){--ac:var(--mt);--ac-ink:var(--mt-ink);--ac-l:var(--mt-l);--ac-ring:var(--mt-ring)}
.fw-os-tl__stop:nth-child(4n+4){--ac:var(--pu);--ac-ink:var(--pu-ink);--ac-l:var(--pu-l);--ac-ring:var(--pu-ring)}
.fw-os-tl__node{
	position:relative;z-index:1;flex-shrink:0;
	display:grid;place-items:center;
	width:var(--node);height:var(--node);border-radius:50%;
	background:var(--wh);color:var(--ac-ink);font-size:calc(var(--node) * .42);
	box-shadow:0 0 0 1px var(--ac-ring), 0 0 0 7px var(--wh), 0 14px 30px -16px var(--ink-a40);
	transition:background .3s, color .3s, transform .45s var(--ease)
}
.fw-os-tl__stop:hover .fw-os-tl__node{background:var(--ac);color:var(--wh);transform:translateY(-4px) rotate(-4deg)}
/* Today: filled in the action colour, with a slow ring breathing out. */
.fw-os-tl__stop.is-today .fw-os-tl__node{background:var(--pk-d);color:var(--wh);box-shadow:0 0 0 7px var(--wh), var(--pk-glow)}
.fw-os-tl__stop.is-today .fw-os-tl__node::after{
	content:'';position:absolute;inset:-7px;border-radius:50%;
	box-shadow:0 0 0 2px var(--pk-ring);opacity:0
}
@media(prefers-reduced-motion:no-preference){
	.fw-os-tl__stop.is-today .fw-os-tl__node::after{animation:fwOsPulse 2.8s var(--ease) infinite}}
@keyframes fwOsPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
.fw-os-tl__num{
	margin-top:clamp(16px, 2.2vh, 22px);
	font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ac-ink)
}
.fw-os-tl__stop.is-today .fw-os-tl__num{color:var(--pk-ink)}
.fw-os-tl__name{
	margin:6px 0 0;
	font-family:var(--ff);
	font-size:clamp(17px, 2.5vh, 21px);font-weight:600;line-height:1.22;letter-spacing:-.022em;color:var(--ink)
}
.fw-os-tl__txt{
	margin:8px 0 0;
	font-size:clamp(13.5px, 1.85vh, 15px);line-height:1.65;color:var(--g6);text-wrap:pretty
}
/* Each chapter arrives a beat after the one before it. */
.fw-os--anim .fw-os-tl__stop[data-os-reveal]{transition-delay:calc(var(--d, 0) * 90ms)}
.fw-os-tl__stop:nth-child(2){--d:1}.fw-os-tl__stop:nth-child(3){--d:2}.fw-os-tl__stop:nth-child(4){--d:3}
.fw-os-tl__stop:nth-child(5){--d:4}.fw-os-tl__stop:nth-child(6){--d:5}.fw-os-tl__stop:nth-child(7){--d:6}
.fw-os-tl__stop:nth-child(8){--d:7}
.fw-os--anim .fw-os-tl__stop[data-os-reveal] .fw-os-tl__node{transform:scale(.6);transition:transform .7s var(--ease) calc(var(--d, 0) * 90ms + 120ms), background .3s, color .3s}
.fw-os--anim .fw-os-tl__stop[data-os-reveal].is-in .fw-os-tl__node{transform:none}
.fw-os--anim .fw-os-tl__stop[data-os-reveal].is-in:hover .fw-os-tl__node{transform:translateY(-4px) rotate(-4deg)}

.fw-os-tl__nav{top:calc(18px + var(--node) / 2)}
.fw-os-tl__rail.has-rail .fw-os-tl__nav{display:flex}
.fw-os-tl__nav--prev{left:calc(var(--pad) - 6px)}
.fw-os-tl__nav--next{right:calc(var(--pad) - 6px)}

/* ══════════════════════════════════════════════════════════════
   05 · §5 OUR PROMISES — photograph and accordion
   ══════════════════════════════════════════════════════════════ */

.fw-os-pr__grid{
	display:grid;
	grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
	column-gap:clamp(32px, 5.5vw, 110px);
	align-items:start
}
.fw-os-pr__fig{
	position:relative;margin:0;
	aspect-ratio:4/3.3;max-height:min(70vh, 680px);
	border-radius:var(--rx);overflow:hidden;background:var(--bl-wash);
	box-shadow:0 40px 80px -44px var(--ink-a40)
}
.fw-os-pr__fig img{
	position:absolute;inset:0;
	width:100%!important;height:100%!important;max-width:none!important;
	object-fit:cover;object-position:56% 40%
}
.fw-os-pr__badge{
	position:absolute;left:clamp(12px, 1.6vw, 20px);bottom:clamp(12px, 1.6vw, 20px);right:clamp(12px, 1.6vw, 20px);
	display:flex;align-items:center;gap:12px;
	padding:clamp(11px, 1.5vh, 14px) clamp(14px, 1.4vw, 18px);
	border-radius:var(--rl);
	background:color-mix(in srgb, var(--wh) 84%, transparent);
	backdrop-filter:blur(12px) saturate(160%);
	-webkit-backdrop-filter:blur(12px) saturate(160%);
	box-shadow:0 14px 30px -18px var(--ink-a40)
}
.fw-os-pr__badge-ico{
	display:grid;place-items:center;flex-shrink:0;
	width:40px;height:40px;border-radius:50%;
	background:var(--mt-l);color:var(--mt-ink);font-size:19px
}
.fw-os-pr__badge span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.fw-os-pr__badge b{font-size:14.5px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.fw-os-pr__badge small{font-size:12.5px;line-height:1.4;color:var(--g5)}

.fw-os-pr__lead{margin-top:clamp(12px, 2vh, 18px)}

.fw-os-acc{
	margin-top:clamp(22px, 3.6vh, 36px);
	border-top:1px solid var(--line);
	interpolate-size:allow-keywords
}
.fw-os-acc__item{
	--ac:var(--pk);--ac-ink:var(--pk-ink);--ac-l:var(--pk-l);
	position:relative;border-bottom:1px solid var(--line);
	transition:background .35s
}
.fw-os-acc__item:nth-child(4n+2){--ac:var(--bl);--ac-ink:var(--bl-ink);--ac-l:var(--bl-l)}
.fw-os-acc__item:nth-child(4n+3){--ac:var(--mt);--ac-ink:var(--mt-ink);--ac-l:var(--mt-l)}
.fw-os-acc__item:nth-child(4n+4){--ac:var(--pu);--ac-ink:var(--pu-ink);--ac-l:var(--pu-l)}
.fw-os-acc__item::before{
	content:'';position:absolute;left:0;top:-1px;bottom:-1px;width:2px;
	background:var(--ac);border-radius:2px;
	transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)
}
.fw-os-acc__item[open]{background:linear-gradient(90deg, color-mix(in srgb, var(--ac-l) 70%, transparent), transparent 70%)}
.fw-os-acc__item[open]::before{transform:scaleY(1)}
.fw-os-acc__q{
	display:grid;grid-template-columns:auto minmax(0, 1fr) 34px;
	align-items:center;column-gap:var(--s4);
	padding:clamp(15px, 2.2vh, 20px) var(--s3) clamp(15px, 2.2vh, 20px) var(--s4);
	cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent
}
.fw-os-acc__q::-webkit-details-marker{display:none}
.fw-os-acc__q::marker{content:''}
.fw-os-acc__ico{
	display:grid;place-items:center;
	width:clamp(42px, 5.6vh, 48px);height:clamp(42px, 5.6vh, 48px);border-radius:50%;
	background:var(--ac-l);color:var(--ac-ink);font-size:clamp(19px, 2.6vh, 22px);
	transition:transform .45s var(--ease), background .3s, color .3s
}
.fw-os-acc__item[open] .fw-os-acc__ico{background:var(--ac);color:var(--wh);transform:rotate(-6deg)}
.fw-os-acc__q:hover .fw-os-acc__ico{transform:scale(1.06)}
.fw-os-acc__t{
	display:flex;flex-direction:column;gap:3px;min-width:0;
	font-size:clamp(16px, 2.3vh, 19px);font-weight:600;line-height:1.3;letter-spacing:-.018em;color:var(--ink);
	transition:color .25s
}
.fw-os-acc__t small{font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--ac-ink)}
.fw-os-acc__q:hover .fw-os-acc__t{color:var(--pk-ink)}
.fw-os-acc__pm{position:relative;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s, box-shadow .3s}
.fw-os-acc__pm::before,
.fw-os-acc__pm::after{
	content:'';position:absolute;left:50%;top:50%;
	background:var(--g5);border-radius:2px;
	transition:transform .45s var(--ease), background .3s
}
.fw-os-acc__pm::before{width:12px;height:1.5px;transform:translate(-50%,-50%)}
.fw-os-acc__pm::after{width:1.5px;height:12px;transform:translate(-50%,-50%)}
.fw-os-acc__q:hover .fw-os-acc__pm{box-shadow:inset 0 0 0 1px var(--pk-ring)}
.fw-os-acc__item[open] .fw-os-acc__pm{background:var(--pk-d);box-shadow:none}
.fw-os-acc__item[open] .fw-os-acc__pm::after{transform:translate(-50%,-50%) scaleY(0)}
.fw-os-acc__item[open] .fw-os-acc__pm::before{background:var(--wh)}
.fw-os-acc__a{padding:0 calc(34px + var(--s3)) clamp(18px, 2.6vh, 24px) calc(var(--s4) + clamp(42px, 5.6vh, 48px) + var(--s4))}
.fw-os-acc__a p{margin:0;font-size:clamp(14.5px, 1.95vh, 16px);line-height:1.75;color:var(--g6);text-wrap:pretty}
/* Smooth open and close where the browser can animate to auto. */
.fw-os-acc__item::details-content{
	block-size:0;overflow:hidden;
	transition:block-size .5s var(--ease), content-visibility .5s allow-discrete
}
.fw-os-acc__item[open]::details-content{block-size:auto}
@media(prefers-reduced-motion:no-preference){
	.fw-os-acc__item[open] .fw-os-acc__a{animation:fwOsRise .5s var(--ease) both}}
@keyframes fwOsRise{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.fw-os--anim .fw-os-acc__item[data-os-reveal]:nth-child(2){transition-delay:70ms}
.fw-os--anim .fw-os-acc__item[data-os-reveal]:nth-child(3){transition-delay:140ms}
.fw-os--anim .fw-os-acc__item[data-os-reveal]:nth-child(4){transition-delay:210ms}
.fw-os--anim .fw-os-acc__item[data-os-reveal]:nth-child(5){transition-delay:280ms}
.fw-os--anim .fw-os-acc__item[data-os-reveal]:nth-child(6){transition-delay:350ms}

/* ══════════════════════════════════════════════════════════════
   06 · §6 THE MOMENT — one wide photograph, bright
   The picture drifts very slowly; a white wash from its left side
   makes paper for the words. Never a dark scrim.
   ══════════════════════════════════════════════════════════════ */

.fw-os-moment{
	position:relative;overflow:hidden;
	display:flex;align-items:center;
	min-height:min(62vh, 660px);
	background:var(--paper-p)
}
.fw-os-moment__fig{position:absolute;inset:0;margin:0;overflow:hidden}
.fw-os-moment__fig img{
	position:absolute;inset:0;
	width:100%!important;height:100%!important;max-width:none!important;
	object-fit:cover;object-position:72% 42%
}
@media(prefers-reduced-motion:no-preference){
	.fw-os-moment__fig img.lazy-loaded{animation:fwOsKen 26s ease-in-out infinite alternate}}
@keyframes fwOsKen{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.09) translate3d(-1.4%,-1%,0)}}
.fw-os-moment__fig::after{
	content:'';position:absolute;inset:0;
	background:linear-gradient(90deg, var(--wh) 6%, color-mix(in srgb, var(--wh) 84%, transparent) 34%, transparent 62%)
}
.fw-os-moment__inner{padding-block:clamp(44px, 9vh, 96px)}
.fw-os-moment__say{width:44%}
.fw-os-moment__title{
	margin:var(--s3) 0 0;
	font-family:var(--ff);
	font-size:clamp(30px, 5.6vh, 58px);font-weight:600;
	line-height:1.04;letter-spacing:-.04em;
	color:var(--ink);text-wrap:balance
}
.fw-os-moment__sub{
	margin:clamp(14px, 2.2vh, 20px) 0 0;
	font-size:clamp(15px, 2.1vh, 18px);line-height:1.65;color:var(--g7);text-wrap:pretty
}

/* ══════════════════════════════════════════════════════════════
   07 · §7 WHERE WE ARE — flags on hairlines
   ══════════════════════════════════════════════════════════════ */

.fw-os-where{overflow:hidden;background:linear-gradient(180deg, var(--wh), var(--paper-b2))}
.fw-os-where__grid{
	display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));
	margin:0;padding:0;list-style:none;
	border-top:1px solid var(--line)
}
.fw-os-where__grid li{
	position:relative;
	display:flex;align-items:center;gap:14px;min-width:0;
	padding:clamp(16px, 2.4vh, 22px) clamp(12px, 1.4vw, 22px);
	border-bottom:1px solid var(--line);
	transition:background .3s
}
.fw-os-where__grid li:not(:nth-child(4n+1))::before{
	content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)
}
.fw-os-where__grid li:nth-child(4n+1){padding-left:0}
.fw-os-where__grid li:hover{background:var(--pk-bg)}
.fw-os-where__flag{
	width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;
	box-shadow:0 0 0 1px var(--ink-a06), 0 0 0 4px var(--wh), 0 10px 20px -12px var(--ink-a40);
	transition:transform .45s var(--ease)
}
.fw-os-where__grid li:hover .fw-os-where__flag{transform:scale(1.08) rotate(-5deg)}
.fw-os-where__flag--none{display:grid;place-items:center;background:var(--bl-l);color:var(--bl-ink);font-size:20px}
.fw-os-where__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.fw-os-where__t b{font-size:15.5px;font-weight:600;letter-spacing:-.012em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-os-where__t small{font-size:12.5px;font-weight:500;color:var(--g5)}
.fw-os--anim .fw-os-where__grid li[data-os-reveal]:nth-child(4n+2){transition-delay:60ms}
.fw-os--anim .fw-os-where__grid li[data-os-reveal]:nth-child(4n+3){transition-delay:120ms}
.fw-os--anim .fw-os-where__grid li[data-os-reveal]:nth-child(4n+4){transition-delay:180ms}

/* ══════════════════════════════════════════════════════════════
   08 · §8 A NOTE TO YOU — a letter
   ══════════════════════════════════════════════════════════════ */

.fw-os-note{background:linear-gradient(180deg, var(--paper-b2), var(--wh))}
.fw-os-note__grid{
	display:grid;
	grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
	column-gap:clamp(32px, 5.5vw, 110px);
	align-items:start
}
.fw-os-note__letter{
	position:relative;
	padding:clamp(52px, 8vh, 84px) 0 0 clamp(22px, 3vw, 48px);
	border-left:1px solid var(--line)
}
.fw-os-note__mark{
	position:absolute;left:clamp(18px, 2.6vw, 42px);top:-.1em;
	font-family:var(--ff);font-size:clamp(90px, 14vh, 150px);font-weight:600;line-height:1;
	background:linear-gradient(135deg, var(--pk), var(--bl));
	-webkit-background-clip:text;background-clip:text;color:transparent;
	opacity:.22;pointer-events:none
}
.fw-os-note__letter p{
	position:relative;margin:0 0 clamp(14px, 2.2vh, 20px);
	font-size:clamp(16px, 2.3vh, 19.5px);font-weight:300;line-height:1.72;letter-spacing:-.01em;color:var(--g8);text-wrap:pretty
}
.fw-os-note__letter p.fw-os-note__sign{
	display:flex;flex-direction:column;gap:4px;
	margin:clamp(22px, 3.6vh, 34px) 0 0;padding-top:clamp(16px, 2.4vh, 22px);
	border-top:1px solid var(--line)
}
.fw-os-note__sign span{font-size:14px;font-weight:400;color:var(--g5)}
.fw-os-note__sign b{font-size:clamp(17px, 2.4vh, 20px);font-weight:600;letter-spacing:-.018em;color:var(--pk-ink)}

/* ══════════════════════════════════════════════════════════════
   09 · §9 CLOSING — bright, on the photograph's soft side
   ══════════════════════════════════════════════════════════════ */

.fw-os-close{
	position:relative;overflow:hidden;
	display:flex;align-items:center;
	min-height:min(58vh, 640px);
	background:var(--paper-p)
}
.fw-os-close__fig{position:absolute;top:0;right:0;bottom:0;width:56%;margin:0}
.fw-os-close__fig img{
	position:absolute;inset:0;
	width:100%!important;height:100%!important;max-width:none!important;
	object-fit:cover;object-position:50% 38%
}
.fw-os-close__fig::after{
	content:'';position:absolute;inset:0;
	background:linear-gradient(90deg, var(--paper-p) 0%, color-mix(in srgb, var(--paper-p) 55%, transparent) 16%, transparent 38%)
}
.fw-os-close__inner{padding-block:clamp(44px, 8vh, 92px)}
.fw-os-close__say{width:42%}
.fw-os-close__title{
	margin:var(--s3) 0 0;
	font-family:var(--ff);
	font-size:clamp(28px, 5.2vh, 54px);font-weight:600;
	line-height:1.06;letter-spacing:-.038em;
	color:var(--ink);text-wrap:balance
}
.fw-os-close__sub{
	margin:clamp(12px, 2vh, 18px) 0 0;
	font-size:clamp(15px, 2.1vh, 18px);line-height:1.6;color:var(--g7);text-wrap:pretty
}
.fw-os-close__btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:clamp(20px, 3.4vh, 32px)}

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

@media(max-width:1180px){
	.fw-os-where__grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
	.fw-os-where__grid li:not(:nth-child(4n+1))::before{display:block}
	.fw-os-where__grid li:nth-child(4n+1){padding-left:clamp(12px, 1.4vw, 22px)}
	.fw-os-where__grid li:nth-child(3n+1){padding-left:0}
	.fw-os-where__grid li:nth-child(3n+1)::before{display:none}
	.fw-os-moment__say{width:56%}
	.fw-os-close__say{width:44%}}

@media(max-width:1024px){
	.fw-os-page{--pad:14px;--sec:clamp(44px, 10vw, 72px)}

	/* One column: heads stack, type returns to the width axis. */
	.fw-os-head,
	.fw-os-begin__grid,
	.fw-os-pr__grid,
	.fw-os-note__grid{grid-template-columns:minmax(0, 1fr);row-gap:clamp(18px, 4vw, 28px)}
	.fw-os-h2{font-size:clamp(25px, 5.6vw, 38px)}
	.fw-os-lead{font-size:clamp(15px, 3.4vw, 17px)}
	.fw-os-begin__text p{font-size:clamp(15px, 3.5vw, 16.5px)}
	.fw-os-begin__text p.fw-os-begin__lead{font-size:clamp(17px, 4.2vw, 20px)}
	.fw-os-quote p{font-size:clamp(24px, 6vw, 38px)}
	.fw-os-note__letter p{font-size:clamp(16px, 3.8vw, 18px)}

	/* The masthead photograph leads on a phone, as an app's hero does. */
	.fw-os-mast .fw-mast__side--cover{order:-1}
	.fw-os-cover{aspect-ratio:4/3;max-height:none;border-radius:20px}

	.fw-os-begin__fig{order:-1;aspect-ratio:4/3;max-height:none;border-radius:20px}
	.fw-os-pr__fig{aspect-ratio:16/11;max-height:none;border-radius:20px}

	/* The wide photographs sit above their words once there is no side
	   for them to share. */
	.fw-os-moment,
	.fw-os-close{display:block;min-height:0;background:var(--wh)}
	.fw-os-moment__fig,
	.fw-os-close__fig{position:relative;inset:auto;width:auto;aspect-ratio:16/10}
	.fw-os-moment__fig::after,
	.fw-os-close__fig::after{background:linear-gradient(180deg, transparent 55%, var(--wh))}
	.fw-os-moment__say,
	.fw-os-close__say{width:100%}
	.fw-os-moment__inner,
	.fw-os-close__inner{padding-block:0 clamp(40px, 10vw, 64px);margin-top:-6vw}
	.fw-os-moment__title,
	.fw-os-close__title{font-size:clamp(28px, 7vw, 42px)}
	.fw-os-moment__sub,
	.fw-os-close__sub{font-size:clamp(15px, 3.6vw, 17px)}

	.fw-os-where__grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
	.fw-os-where__grid li:nth-child(3n+1){padding-left:clamp(12px, 1.4vw, 22px)}
	.fw-os-where__grid li:nth-child(3n+1)::before{display:block}
	.fw-os-where__grid li:nth-child(2n+1){padding-left:0}
	.fw-os-where__grid li:nth-child(2n+1)::before{display:none}

	.fw-os-fx i{filter:blur(56px)}
	.fw-os-fx i:last-child{display:none}}

/* ── THE APP LAYER ──────────────────────────────────────────── */
@media(max-width:768px){
	/* Segmented bar: pill chips on a frosted strip, the current one filled. */
	.fw-os-jump.has-rail .fw-os-jump__nav{display:none}
	.fw-os-jump ul{gap:8px;padding:10px 0}
	.fw-os-jump li + li::before{display:none}
	.fw-os-jump__link{
		padding:9px 14px;border:0;border-radius:100px;
		font-size:13px;background:var(--g1)
	}
	.fw-os-jump__link:hover{background:var(--bl-l);border:0}
	.fw-os-jump__link.is-on{color:var(--wh);background:var(--pk-d);box-shadow:var(--pk-glow-sm)}
	.fw-os-jump__link.is-on .fw-ico{color:var(--wh)}

	/* Chapters: upright, like a tracker. The line runs down the node
	   column, drawn per stop; the rail's horizontal line steps aside. */
	.fw-os-tl{--node:50px}
	.fw-os-tl__line,
	.fw-os-tl__rail.has-rail .fw-os-tl__nav{display:none}
	.fw-os-tl__track{
		flex-direction:column;overflow:visible;scroll-snap-type:none;
		padding:4px var(--pad) 0;
		-webkit-mask-image:none!important;mask-image:none!important
	}
	.fw-os-tl__stop{
		flex:0 0 auto;
		display:grid;grid-template-columns:var(--node) minmax(0, 1fr);column-gap:16px;
		padding:0 0 28px
	}
	.fw-os-tl__node{grid-row:1 / span 3}
	.fw-os-tl__num{margin-top:4px}
	.fw-os-tl__stop::before{
		content:'';position:absolute;z-index:0;
		top:calc(var(--node) + 8px);bottom:6px;left:calc(var(--node) / 2 - 1px);
		width:2px;border-radius:2px;
		background:linear-gradient(180deg, color-mix(in srgb, var(--ac) 60%, transparent), var(--line))
	}
	.fw-os-tl__stop:last-child::before{display:none}
	.fw-os--anim .fw-os-tl__stop[data-os-reveal]{transition-delay:0ms}

	.fw-os-acc__q{column-gap:12px;padding-left:var(--s3);padding-right:0}
	.fw-os-acc__a{padding:0 0 18px calc(var(--s3) + 42px + 12px)}

	/* Countries: one swipe row of flags rather than a tall grid. */
	.fw-os-where__grid{
		display:flex;gap:0;border-top:0;
		overflow-x:auto;scrollbar-width:none;
		margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 6px;
		scroll-snap-type:x proximity;scroll-padding-inline:var(--pad)
	}
	.fw-os-where__grid::-webkit-scrollbar{display:none}
	.fw-os-where__grid li,
	.fw-os-where__grid li:nth-child(2n+1),
	.fw-os-where__grid li:nth-child(3n+1),
	.fw-os-where__grid li:nth-child(4n+1){
		flex:0 0 auto;flex-direction:column;align-items:center;text-align:center;
		gap:8px;padding:14px 16px;border:0;scroll-snap-align:start
	}
	.fw-os-where__grid li::before{display:none!important}
	.fw-os-where__t{align-items:center}
	.fw-os-where__flag{width:52px;height:52px}

	.fw-os-note__letter{padding-left:18px}
	.fw-os-note__mark{left:10px}

	/* Full-width actions, thumb height. */
	.fw-os-close__btns .fw-os-btn{flex:1 1 100%;min-height:52px}}

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

@media(hover:none){
	.fw-os-btn:hover i,
	.fw-os-txtlink:hover i,
	.fw-os-tl__stop:hover .fw-os-tl__node,
	.fw-os-acc__q:hover .fw-os-acc__ico,
	.fw-os-where__grid li:hover .fw-os-where__flag{transform:none}}

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

/* core.js scrolls in-page links with scrollIntoView, which honours
   scroll-margin-top: the pinned chrome plus the section bar. */
.fw-os [id]{scroll-margin-top:calc(var(--article-top) + 70px)}

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