/* ══════════════════════════════════════════════════════════════════════════
   css/our-journey.css — /our-journey  (prefix fw-oj)

   A magazine timeline. Each year is a spread: its number set huge in outline
   and pinned beside its milestones while you read them, a spine that fills
   as you scroll, and every milestone a line of type on that spine with its
   kind's colour, never a boxed card. The masthead is the shared .fw-mast.

   House rules, all kept: bright grounds only, depth from blurred brand
   discs; no max-width on any section or text; colour only from :root
   (each kind maps a family onto --ac-*, as the booking pages do); 28px /
   14px gutters. Phones (≤768px) get the app layer from the same markup: a
   swipe row of filter chips and years, the spine down the left like an
   order tracker, photographs under their story.

   Motion lives in § 9 and only runs once custom/js/our-journey.js has added
   .fw-oj-anim; prefers-reduced-motion turns all of it off.
   ══════════════════════════════════════════════════════════════════════════ */

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

.fw-oj-page{
	--pad:28px;
	--article-top:116px;
	--oj-bar:58px;
	--ink:var(--dk-d);
	--line:color-mix(in srgb, var(--dk) 9%, transparent);
	--line-soft:color-mix(in srgb, var(--dk) 5.5%, transparent);
	--sec:clamp(48px, 8.5vh, 100px);
	--yr:clamp(150px, 15vw, 240px);
	--node:clamp(46px, 5.6vh, 54px);
	--gap:clamp(20px, 2.6vw, 44px);
	--ease:cubic-bezier(.22,1,.36,1);
	--ease-soft:cubic-bezier(.16,1,.3,1);
	--ease-pop:cubic-bezier(.34,1.56,.64,1);
	background:var(--wh);
	-webkit-text-size-adjust:100%
}

/* A kind's colour family. The milestone types in helpers.php name one. */
.fw-oj-ac--pk{--ac:var(--pk);--ac-dd:var(--pk-dd);--ac-ink:var(--pk-ink);--ac-l:var(--pk-l);--ac-l2:var(--pk-l2);--ac-t:var(--pk-t);--ac-ring:var(--pk-ring)}
.fw-oj-ac--bl{--ac:var(--bl);--ac-dd:var(--bl-dd);--ac-ink:var(--bl-ink);--ac-l:var(--bl-l);--ac-l2:var(--bl-l2);--ac-t:var(--bl-t);--ac-ring:var(--bl-ring)}
.fw-oj-ac--mt{--ac:var(--mt);--ac-dd:var(--mt-dd);--ac-ink:var(--mt-ink);--ac-l:var(--mt-l);--ac-l2:var(--mt-l2);--ac-t:var(--mt-t);--ac-ring:var(--mt-ring)}
.fw-oj-ac--pu{--ac:var(--pu);--ac-dd:var(--pu-dd);--ac-ink:var(--pu-ink);--ac-l:var(--pu-l);--ac-l2:var(--pu-l2);--ac-t:var(--pu-t);--ac-ring:var(--pu-ring)}
.fw-oj-ac--go{--ac:var(--go);--ac-dd:var(--go-dd);--ac-ink:var(--go-ink);--ac-l:var(--go-l);--ac-l2:var(--go-l2);--ac-t:var(--go-t);--ac-ring:var(--go-ring)}
.fw-oj-ac--co{--ac:var(--co);--ac-dd:var(--co-dd);--ac-ink:var(--co-ink);--ac-l:var(--co-l);--ac-l2:var(--co-l2);--ac-t:var(--co-t);--ac-ring:var(--co-ring)}

.fw-oj{display:block;position:relative}
.fw-oj-page em{font-family:var(--ff);font-style:normal}
.fw-oj .fw-ico{stroke-width:1.6}
.fw-oj-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)}
.fw-oj-sec{position:relative;padding:var(--sec) 0}

.fw-oj-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-oj-eyebrow::before{content:'';width:14px;height:1.5px;border-radius:2px;background:var(--pk);flex-shrink:0}
.fw-oj-h2{
	margin:12px 0 0;font-family:var(--ff);
	font-size:clamp(26px, 4.4vh, 44px);font-weight:600;line-height:1.08;letter-spacing:-.034em;
	color:var(--ink);text-wrap:balance
}
.fw-oj-lead{margin:0;font-size:clamp(15px, 2.1vh, 18px);font-weight:300;line-height:1.62;color:var(--g6);text-wrap:pretty}
.fw-oj-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, 5vh, 56px)
}

.fw-oj-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:clamp(18px, 3vh, 28px)}
.fw-oj-btn{
	position:relative;overflow:hidden;isolation:isolate;
	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;white-space:nowrap;
	color:var(--wh);background:linear-gradient(100deg, var(--pk), var(--pk-d) 45%, var(--pk-dd));box-shadow:var(--pk-glow);
	transition:box-shadow .3s, transform .25s var(--ease);-webkit-tap-highlight-color:transparent
}
.fw-oj-btn i{font-size:13px;transition:transform .3s var(--ease)}
.fw-oj-btn:hover{color:var(--wh);box-shadow:var(--pk-glow-lg);transform:translateY(-1px)}
.fw-oj-btn:hover i{transform:translateX(3px)}
.fw-oj-btn--ghost{color:var(--ink);background:var(--wh);box-shadow:inset 0 0 0 1px var(--line), 0 10px 22px -16px var(--ink-a40)}
.fw-oj-btn--ghost:hover{color:var(--pk-ink);background:var(--pk-wash);box-shadow:inset 0 0 0 1px var(--pk-ring)}
.fw-oj-txtlink{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--bl-d);transition:color .25s}
.fw-oj-txtlink i{font-size:12px;transition:transform .3s var(--ease)}
.fw-oj-txtlink:hover{color:var(--pk-ink)}
.fw-oj-txtlink:hover i{transform:translateX(3px)}

/* Ambient light: blurred brand discs in a clipped sibling layer. */
.fw-oj-fx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fw-oj-fx i{position:absolute;display:block;aspect-ratio:1;border-radius:50%;width:clamp(280px, 32vw, 560px);filter:blur(110px);opacity:.1}
.fw-oj-fx i:first-child{top:4%;left:-10%;background:var(--pk)}
.fw-oj-fx i:last-child{bottom:6%;right:-8%;background:var(--bl)}

.fw-oj img.lazy{opacity:0;transition:opacity .6s var(--ease-soft)}
.fw-oj img.lazy-loaded,
.fw-oj img.lazy-error{opacity:1}

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

.fw-oj-cover{aspect-ratio:4/3.2;max-height:min(62vh, 600px)}
.fw-oj-cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.fw-oj-page .fw-mast__cover-ico{color:var(--pk)}
.fw-oj-page .fw-mast__cover-ico .fw-ico{width:46%;height:46%}
.fw-oj-page .fw-mast__stat-ico .fw-ico{width:52%;height:52%}

/* ══════════════════════════════════════════════════════════════
   02 · §2 THE BAR — filter chips and year links, pinned
   ══════════════════════════════════════════════════════════════ */

.fw-oj-bar{
	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-oj-bar__inner{display:flex;align-items:center;column-gap:clamp(14px, 1.6vw, 26px);width:100%;padding:7px var(--pad)}
.fw-oj-bar__row--kinds{flex:1 1 58%}
.fw-oj-bar__row--years{flex:1 1 42%;padding-left:clamp(14px, 1.6vw, 26px)}
/* A fade divider between the two halves, never a box. */
.fw-oj-bar__row--years > .fw-oj-bar__track{position:relative}
.fw-oj-bar__row--years{background:linear-gradient(180deg, transparent, var(--line) 25%, var(--line) 75%, transparent) no-repeat left center / 1px 100%}

/* One line on a desktop: kinds on the left, the year ruler on the right
   after a fade divider (the owner kept them on one line; no labels). Each
   half is a track that scrolls plus core.js's two arrows; arrows and edge
   fades show only while that half is wider than its room (.has-rail), each
   hides at its own end, and resting on one glides the row (our-journey.js).
   ≤1024px the halves stack into two rows. */
.fw-oj-bar__row{--lbl:0px;position:relative;display:flex;align-items:center;min-width:0}
.fw-oj-bar__track{
	display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;margin:0;padding:4px 2px;list-style:none;
	overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain
}
.fw-oj-bar__track::-webkit-scrollbar{display:none}
.fw-oj-bar__row::before,
.fw-oj-bar__row::after{
	content:'';position:absolute;top:0;bottom:0;z-index:2;width:clamp(56px, 6vw, 96px);
	pointer-events:none;opacity:0;transition:opacity .3s
}
.fw-oj-bar__row::before{left:0;background:linear-gradient(90deg, var(--wh) 38%, transparent)}
.fw-oj-bar__row::after{right:0;background:linear-gradient(270deg, var(--wh) 38%, transparent)}
.fw-oj-bar__row.has-rail:not(.at-start)::before,
.fw-oj-bar__row.has-rail:not(.at-end)::after{opacity:1}
.fw-oj-bar__nav{
	position:absolute;top:50%;z-index:3;transform:translateY(-50%);
	display:none;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;
	color:var(--g7);background:var(--wh);cursor:pointer;
	box-shadow:0 6px 16px -6px var(--ink-a40), inset 0 0 0 1px var(--line);
	transition:color .22s, opacity .25s, box-shadow .25s, transform .25s var(--ease)
}
.fw-oj-bar__nav i{font-size:12px;line-height:1}
.fw-oj-bar__row.has-rail .fw-oj-bar__nav{display:flex}
.fw-oj-bar__nav--prev{left:-4px}
.fw-oj-bar__row--years .fw-oj-bar__nav--prev{left:calc(clamp(14px, 1.6vw, 26px) - 4px)}
.fw-oj-bar__row--years::before{left:clamp(14px, 1.6vw, 26px)}
.fw-oj-bar__nav--next{right:-4px}
.fw-oj-bar__nav:hover{color:var(--wh);background:var(--pk-d);box-shadow:var(--pk-glow)}
.fw-oj-bar__nav[disabled]{opacity:0;pointer-events:none}

.fw-oj-chip{
	--ac:var(--pk);--ac-dd:var(--pk-dd);--ac-ink:var(--pk-ink);--ac-l:var(--pk-l);--ac-ring:var(--pk-ring);
	display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
	min-height:36px;padding:0 10px 0 11px;border:0;border-radius:100px;cursor:pointer;
	font-family:var(--ff);font-size:13px;font-weight:500;white-space:nowrap;color:var(--g7);
	background:var(--wh);box-shadow:inset 0 0 0 1px var(--line);
	transition:color .25s, background .25s, box-shadow .25s, transform .3s var(--ease)
}
.fw-oj-chip .fw-ico{font-size:15px;color:var(--ac-ink)}
.fw-oj-chip b{
	min-width:22px;height:22px;padding:0 6px;border-radius:100px;display:grid;place-items:center;
	font-size:11px;font-weight:700;color:var(--ac-ink);background:var(--ac-l)
}
.fw-oj-chip:hover{color:var(--ac-ink);box-shadow:inset 0 0 0 1px var(--ac-ring);transform:translateY(-1px)}
.fw-oj-chip.is-on{color:var(--wh);font-weight:600;background:var(--ac-dd);box-shadow:0 8px 18px -10px var(--ac-dd)}
.fw-oj-chip.is-on .fw-ico{color:var(--wh)}
.fw-oj-chip.is-on b{color:var(--ac-dd);background:var(--wh)}

/* THE RULER — the years spread across the width on one line that fills,
   pink into violet, up to the year you are reading. Pure CSS: a year is
   "passed" when a later one holds article.js's .is-on. */
.fw-oj-ruler{gap:0;padding-block:5px}
.fw-oj-ruler li{position:relative;flex:1 0 66px;display:flex;justify-content:center}
.fw-oj-ruler li::before{
	content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;
	background:var(--line);transition:background .4s
}
.fw-oj-ruler li:first-child::before{left:50%}
.fw-oj-ruler li:last-child::before{right:50%}
.fw-oj-ruler li:only-child::before{display:none}
.fw-oj-ruler li:has(~ li .is-on)::before{background:linear-gradient(90deg, var(--pk), var(--pu))}
.fw-oj-ruler li:has(.is-on):not(:first-child)::before{background:linear-gradient(90deg, var(--pu) 50%, var(--line) 50%)}
.fw-oj-bar__year{
	position:relative;z-index:1;display:block;padding:5px 12px;border-radius:100px;
	font-size:13px;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--g6);
	background:var(--wh);box-shadow:inset 0 0 0 1px var(--line);
	transition:color .25s, background .25s, box-shadow .25s, opacity .25s, transform .3s var(--ease)
}
.fw-oj-ruler li:has(~ li .is-on) .fw-oj-bar__year{color:var(--pk-ink);box-shadow:inset 0 0 0 1px var(--pk-ring)}
.fw-oj-bar__year:hover{color:var(--bl-d);box-shadow:inset 0 0 0 1px var(--bl-ring);transform:translateY(-1px)}
.fw-oj-bar__year.is-on{color:var(--wh);background:linear-gradient(120deg, var(--pk), var(--pk-d));box-shadow:var(--pk-glow)}
.fw-oj-bar__year.is-off{opacity:.35;pointer-events:none}

/* ══════════════════════════════════════════════════════════════
   03 · §3 THE TIMELINE
   Each year: [year numeral | spine + milestones]. The spine is one line
   for the whole timeline; --oj-progress (0-1, written by the script)
   fills it. The numeral pins beside its year while you read it.
   ══════════════════════════════════════════════════════════════ */

.fw-oj-tl{background:linear-gradient(180deg, var(--wh), var(--paper-b2) 55%, var(--wh))}
.fw-oj-tl__status{margin:0 0 18px;font-size:13.5px;font-weight:600;color:var(--pk-ink)}
.fw-oj-tl__body{position:relative;--oj-progress:1}
.fw-oj-spine{
	position:absolute;top:0;bottom:0;
	left:calc(var(--yr) + var(--gap) + var(--node) / 2 - 1px);width:2px;
	border-radius:2px;background:var(--line)
}
.fw-oj-spine i{
	position:absolute;inset:0;border-radius:inherit;display:block;
	background:linear-gradient(180deg, var(--pk), var(--pu) 45%, var(--bl));
	transform:scaleY(var(--oj-progress));transform-origin:top
}

.fw-oj-year{
	display:grid;grid-template-columns:var(--yr) minmax(0, 1fr);column-gap:var(--gap);
	padding-bottom:clamp(30px, 6vh, 64px)
}
.fw-oj-year[hidden]{display:none}
.fw-oj-year__label{
	position:sticky;top:calc(var(--article-top) + var(--oj-bar) + 18px);align-self:start;
	display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding-top:4px
}
.fw-oj-year__label span{
	font-size:clamp(50px, 5.6vw, 104px);font-weight:700;line-height:.86;letter-spacing:-.05em;
	font-variant-numeric:tabular-nums;color:transparent;
	/* A soft brand gradient poured into the numeral. (An outline stroke
	   shows the font's overlapping contours at this size.) */
	background:linear-gradient(170deg, var(--pk-l3), var(--pu-l2) 55%, var(--bl-l2));
	-webkit-background-clip:text;background-clip:text
}
.fw-oj-year__label small{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g5)}

.fw-oj-list{display:grid;gap:clamp(22px, 4vh, 40px);margin:0;padding:0;list-style:none}
.fw-oj-item{
	position:relative;
	display:grid;grid-template-columns:var(--node) minmax(0, 1fr);column-gap:clamp(16px, 1.8vw, 28px);align-items:start
}
.fw-oj-item[hidden]{display:none}
.fw-oj-item--photo{grid-template-columns:var(--node) minmax(0, 1.1fr) minmax(0, .9fr)}
.fw-oj-item__node{
	position:relative;z-index:1;display:grid;place-items:center;
	width:var(--node);height:var(--node);border-radius:50%;
	color:var(--ac-ink);font-size:calc(var(--node) * .44);
	background:linear-gradient(140deg, var(--wh), var(--ac-l));
	box-shadow:0 0 0 1px var(--ac-ring), 0 0 0 7px var(--wh), 0 12px 26px -14px var(--ink-a40);
	transition:transform .45s var(--ease-pop), background .3s, color .3s
}
.fw-oj-item:hover .fw-oj-item__node{transform:scale(1.08);background:var(--ac-dd);color:var(--wh)}
.fw-oj-item__body{min-width:0;padding-top:2px}
.fw-oj-item__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0}
.fw-oj-item__meta time{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ac-ink)}
.fw-oj-item__kind{
	padding:3px 10px;border-radius:100px;font-size:11.5px;font-weight:600;color:var(--ac-ink);background:var(--ac-l)
}
.fw-oj-item__star{
	display:inline-flex;align-items:center;gap:5px;
	font-size:11.5px;font-weight:600;color:var(--go-ink)
}
.fw-oj-item__star .fw-ico{font-size:13px;color:var(--go)}
.fw-oj-item__t{
	margin:10px 0 0;font-family:var(--ff);
	font-size:clamp(19px, 2.8vh, 26px);font-weight:600;line-height:1.2;letter-spacing:-.024em;color:var(--ink);text-wrap:balance
}
.fw-oj-item__story{margin:8px 0 0;font-size:clamp(14.5px, 1.95vh, 16.5px);line-height:1.7;color:var(--g6);text-wrap:pretty}
.fw-oj-item__more{
	display:inline-flex;align-items:center;gap:7px;margin-top:10px;
	font-size:13.5px;font-weight:600;color:var(--ac-ink);transition:color .25s
}
.fw-oj-item__more i{font-size:12px;transition:transform .3s var(--ease)}
.fw-oj-item__more:hover{color:var(--ink)}
.fw-oj-item__more:hover i{transform:translateX(3px)}
.fw-oj-item__fig{
	position:relative;margin:0;aspect-ratio:16/10;border-radius:var(--rx);overflow:hidden;
	background:var(--ac-l);box-shadow:0 26px 50px -30px var(--ink-a40)
}
.fw-oj-item__fig img{
	position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;
	transition:transform 1.2s var(--ease-soft)
}
.fw-oj-item:hover .fw-oj-item__fig img{transform:scale(1.04)}

/* Nothing entered yet. */
.fw-oj-empty{
	display:grid;justify-items:start;gap:10px;
	padding:clamp(24px, 4vh, 40px) 0;border-top:1px solid var(--line)
}
.fw-oj-empty__ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;font-size:24px;color:var(--pk-ink);background:var(--pk-l)}
.fw-oj-empty h3{margin:6px 0 0;font-family:var(--ff);font-size:clamp(22px, 3.2vh, 30px);font-weight:600;letter-spacing:-.028em;color:var(--ink)}
.fw-oj-empty p{margin:0;font-size:clamp(15px, 2vh, 17px);line-height:1.65;color:var(--g6);text-wrap:pretty}

/* ══════════════════════════════════════════════════════════════
   04 · §4 THE JOURNEY IN NUMBERS
   ══════════════════════════════════════════════════════════════ */

.fw-oj-info{--cg:clamp(40px, 5.5vw, 120px)}
.fw-oj-fx--info i:first-child{top:10%;left:auto;right:-8%;background:var(--pu)}
.fw-oj-fx--info i:last-child{top:auto;bottom:-4%;left:-10%;right:auto;background:var(--pk)}
.fw-oj-info__grid{
	display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);column-gap:var(--cg);align-items:stretch
}
.fw-oj-mix,
.fw-oj-grow{position:relative;margin:0;min-width:0}
/* A fade divider between the two figures, never a box round either. */
.fw-oj-grow::before{
	content:'';position:absolute;top:0;bottom:0;left:calc(var(--cg) / -2);width:1px;
	background:linear-gradient(180deg, transparent, var(--line) 14%, var(--line) 86%, transparent)
}
.fw-oj-cap{
	display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 clamp(18px, 3vh, 30px);
	font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g6)
}
.fw-oj-cap > .fw-ico{font-size:17px;color:var(--pk-ink)}
.fw-oj-cap__key{
	display:inline-flex;align-items:center;gap:7px;margin-left:auto;
	font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--g5)
}
.fw-oj-cap__dot{width:9px;height:9px;border-radius:50%;background:var(--wh);box-shadow:inset 0 0 0 2.5px var(--pk)}
.fw-oj-cap__star{
	width:13px;height:13px;margin-left:10px;background:var(--go);
	clip-path:polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
}

/* ── The ring of kinds ── */
.fw-oj-mix__body{display:grid;grid-template-columns:auto minmax(0, 1fr);column-gap:clamp(22px, 2.8vw, 48px);align-items:center}
.fw-oj-donut{position:relative;width:clamp(180px, 25vh, 236px);aspect-ratio:1}
.fw-oj-donut::before{
	content:'';position:absolute;inset:16%;border-radius:50%;
	background:radial-gradient(circle, var(--pk-wash) 0%, var(--wh) 72%)
}
.fw-oj-donut__svg{position:relative;display:block;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.fw-oj-donut__track{fill:none;stroke:var(--g1);stroke-width:11}
.fw-oj-donut__seg{
	fill:none;stroke:var(--ac);stroke-width:11;cursor:pointer;
	transition:opacity .3s, stroke-width .35s var(--ease)
}
.fw-oj-donut__seg.is-hot{stroke-width:15}
.fw-oj-mix.is-focus .fw-oj-donut__seg:not(.is-hot){opacity:.16}
.fw-oj-donut__mid{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:3px;text-align:center;pointer-events:none}
.fw-oj-donut__mid > b,
.fw-oj-donut__mid > b.counter{
	font-size:clamp(46px, 7.4vh, 70px);font-weight:600;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;
	background:linear-gradient(135deg, var(--pk), var(--pu) 55%, var(--bl));-webkit-background-clip:text;background-clip:text;color:transparent
}
.fw-oj-donut__mid > span{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g7)}
.fw-oj-donut__mid > small{font-size:12.5px;color:var(--g5)}

.fw-oj-legend{margin:0;padding:0;list-style:none}
.fw-oj-legend li{position:relative}
.fw-oj-legend li + li::before{
	content:'';position:absolute;top:0;left:0;right:0;height:1px;
	background:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent)
}
.fw-oj-legend__row{
	display:grid;grid-template-columns:34px minmax(0, 1fr) auto 14px;grid-template-rows:auto auto;align-items:center;column-gap:12px;
	width:100%;padding:clamp(6px, 1.1vh, 10px) 8px;border:0;border-radius:14px;cursor:pointer;
	font-family:var(--ff);text-align:left;color:var(--g7);background:transparent;
	transition:background .3s
}
.fw-oj-legend__ico{
	grid-row:1 / span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
	font-size:16px;color:var(--ac-ink);background:var(--ac-l);transition:color .3s, background .3s, transform .35s var(--ease-pop)
}
.fw-oj-legend__name{grid-column:2;font-size:14px;font-weight:500;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-oj-legend__n{grid-column:3;grid-row:1 / span 2;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.fw-oj-legend__pct{grid-column:2;grid-row:2;font-size:11.5px;font-weight:500;line-height:1.3;color:var(--g5);font-variant-numeric:tabular-nums}
.fw-oj-legend__go{grid-column:4;grid-row:1 / span 2;font-size:12px;color:var(--ac-ink);opacity:0;transform:translate(-4px, 4px);transition:opacity .25s, transform .3s var(--ease)}
.fw-oj-legend__row:hover,
.fw-oj-legend__row.is-hot{background:linear-gradient(90deg, var(--ac-l), transparent 92%)}
.fw-oj-legend__row:hover .fw-oj-legend__ico,
.fw-oj-legend__row.is-hot .fw-oj-legend__ico{color:var(--wh);background:var(--ac);transform:scale(1.06)}
.fw-oj-legend__row:hover .fw-oj-legend__go,
.fw-oj-legend__row.is-hot .fw-oj-legend__go{opacity:1;transform:none}

/* ── The curve of the story ── */
.fw-oj-grow{display:flex;flex-direction:column}
.fw-oj-grow__plot{position:relative;height:clamp(170px, 26vh, 270px)}
.fw-oj-grow__area,
.fw-oj-grow__pts{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.fw-oj-grow__grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 6;vector-effect:non-scaling-stroke}
.fw-oj-grow__grid--base{stroke-dasharray:none}
.fw-oj-grow__fill{fill:url(#fwOjGrowFill)}
.fw-oj-grow__s1{stop-color:var(--pk);stop-opacity:.2}
.fw-oj-grow__s2{stop-color:var(--bl);stop-opacity:0}
.fw-oj-grow__line{fill:none;stroke:url(#fwOjGrowLine);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.fw-oj-grow__l1{stop-color:var(--pk)}
.fw-oj-grow__l2{stop-color:var(--pu)}
.fw-oj-grow__l3{stop-color:var(--bl)}
.fw-oj-grow__dot{cursor:default}
.fw-oj-grow__halo{fill:var(--ac);opacity:.13;transform-box:fill-box;transform-origin:center;transition:opacity .3s, transform .35s var(--ease-pop)}
.fw-oj-grow__core{fill:var(--wh);stroke:var(--ac);stroke-width:3}
.fw-oj-grow__star{fill:var(--go);stroke:var(--wh);stroke-width:1.4;stroke-linejoin:round}
.fw-oj-grow__dot.is-proud .fw-oj-grow__halo{opacity:.24}
.fw-oj-grow__dot:hover .fw-oj-grow__halo{opacity:.32;transform:scale(1.25)}
.fw-oj-grow__now{font-family:var(--ff);font-size:12.5px;font-weight:600;fill:var(--pk-ink)}
.fw-oj-grow__axis{display:block;width:100%;height:24px;margin-top:8px;overflow:visible}
.fw-oj-grow__yr{font-family:var(--ff);font-size:11.5px;font-weight:600;fill:var(--g5);font-variant-numeric:tabular-nums}

.fw-oj-facts{
	position:relative;display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
	margin:clamp(16px, 2.6vh, 28px) 0 0;padding:0;list-style:none
}
.fw-oj-facts::before{
	content:'';position:absolute;top:0;left:0;right:0;height:1px;
	background:linear-gradient(90deg, transparent, var(--line) 10%, var(--line) 90%, transparent)
}
.fw-oj-facts li{
	position:relative;display:grid;grid-template-columns:auto minmax(0, 1fr);align-content:start;column-gap:12px;row-gap:2px;
	padding:clamp(16px, 2.4vh, 24px) 16px 0 0
}
.fw-oj-facts li + li{padding-left:18px}
.fw-oj-facts li + li::before{
	content:'';position:absolute;left:0;top:14px;bottom:0;width:1px;
	background:linear-gradient(180deg, transparent, var(--line) 22%, var(--line) 78%, transparent)
}
.fw-oj-facts__ico{
	grid-row:1 / span 3;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
	font-size:18px;color:var(--ac-ink);background:var(--ac-l)
}
.fw-oj-facts small{font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--g5)}
.fw-oj-facts b{font-size:clamp(22px, 3.4vh, 30px);font-weight:600;line-height:1.1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.fw-oj-facts__line{
	font-size:13px;line-height:1.45;color:var(--g6);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}

/* ══════════════════════════════════════════════════════════════
   05 · §5 QUESTIONS
   ══════════════════════════════════════════════════════════════ */

.fw-oj-faq{background:linear-gradient(180deg, var(--paper-p2), var(--wh))}
.fw-oj-faq__cols{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:clamp(28px, 4vw, 88px);align-items:start}
.fw-oj-faq__list{border-top:1px solid var(--line);min-width:0}
.fw-oj-faq__item{position:relative;border-bottom:1px solid var(--line);transition:background .3s}
.fw-oj-faq__item[open]{background:linear-gradient(90deg, var(--pk-bg), transparent 70%)}
.fw-oj-faq__item::before{
	content:'';position:absolute;left:0;top:-1px;bottom:-1px;width:2px;border-radius:2px;background:var(--pk);
	transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)
}
.fw-oj-faq__item[open]::before{transform:scaleY(1)}
.fw-oj-faq__q{
	display:grid;grid-template-columns:34px minmax(0, 1fr) 32px;align-items:center;column-gap:12px;
	padding:clamp(16px, 2.2vh, 20px) 0 clamp(16px, 2.2vh, 20px) 16px;
	cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent
}
.fw-oj-faq__q::-webkit-details-marker{display:none}
.fw-oj-faq__q::marker{content:''}
.fw-oj-faq__n{font-size:11px;font-weight:600;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--g5)}
.fw-oj-faq__q-txt{font-size:clamp(15px, 2vh, 17px);font-weight:600;line-height:1.4;letter-spacing:-.016em;color:var(--ink);text-wrap:pretty;transition:color .25s}
.fw-oj-faq__q:hover .fw-oj-faq__q-txt{color:var(--pk-ink)}
.fw-oj-faq__item[open] .fw-oj-faq__n{color:var(--pk-ink)}
.fw-oj-faq__q-ico{position:relative;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s, box-shadow .3s, transform .4s var(--ease)}
.fw-oj-faq__q-ico::before,
.fw-oj-faq__q-ico::after{content:'';position:absolute;left:50%;top:50%;background:var(--g5);border-radius:2px;transition:transform .4s var(--ease), background .3s}
.fw-oj-faq__q-ico::before{width:12px;height:1.5px;transform:translate(-50%,-50%)}
.fw-oj-faq__q-ico::after{width:1.5px;height:12px;transform:translate(-50%,-50%)}
.fw-oj-faq__item[open] .fw-oj-faq__q-ico{background:var(--pk-d);box-shadow:none;transform:rotate(180deg)}
.fw-oj-faq__item[open] .fw-oj-faq__q-ico::after{transform:translate(-50%,-50%) scaleY(0)}
.fw-oj-faq__item[open] .fw-oj-faq__q-ico::before{background:var(--wh)}
.fw-oj-faq__a{padding:0 44px clamp(18px, 2.4vh, 24px) 62px}
.fw-oj-faq__a p{margin:0;font-size:clamp(14px, 1.9vh, 15.5px);line-height:1.72;color:var(--g6);text-wrap:pretty}

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

.fw-oj-close{position:relative;overflow:hidden;display:flex;align-items:center;min-height:min(58vh, 640px);background:var(--paper-p)}
.fw-oj-close__fig{position:absolute;inset:0;margin:0}
.fw-oj-close__fig img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:75% 50%}
.fw-oj-close__fig::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, var(--wh) 10%, color-mix(in srgb, var(--wh) 76%, transparent) 42%, transparent 70%)}
.fw-oj-close__inner{padding-block:clamp(44px, 8vh, 90px)}
.fw-oj-close__say{width:48%}
.fw-oj-close__title{
	margin:12px 0 0;font-family:var(--ff);font-size:clamp(28px, 5vh, 50px);font-weight:600;line-height:1.06;letter-spacing:-.038em;
	color:var(--ink);text-wrap:balance
}
.fw-oj-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}

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

@media(max-width:1180px){
	.fw-oj-item--photo{grid-template-columns:var(--node) minmax(0, 1fr)}
	.fw-oj-item--photo .fw-oj-item__fig{grid-column:2;margin-top:14px}}

@media(max-width:1024px){
	.fw-oj-page{--oj-bar:96px}
	.fw-oj-bar__inner{flex-direction:column;align-items:stretch;row-gap:2px;padding-block:6px 4px}
	.fw-oj-bar__row--kinds,
	.fw-oj-bar__row--years{flex:0 0 auto}
	.fw-oj-bar__row--years{padding-left:0;background:none}
	.fw-oj-bar__row--years .fw-oj-bar__nav--prev{left:-4px}
	.fw-oj-bar__row--years::before{left:0}
	.fw-oj-page{--pad:14px;--sec:clamp(40px, 9vw, 64px);--yr:clamp(96px, 16vw, 140px)}
	.fw-oj-head,
	.fw-oj-info__grid{grid-template-columns:minmax(0, 1fr);row-gap:clamp(18px, 4vw, 28px)}
	.fw-oj-h2{font-size:clamp(25px, 5.4vw, 36px)}
	.fw-oj-lead{font-size:clamp(15px, 3.4vw, 17px)}
	.fw-oj-mast .fw-mast__side--cover{order:-1}
	.fw-oj-cover{aspect-ratio:4/3;max-height:none;border-radius:20px}
	.fw-oj-grow::before{display:none}
	.fw-oj-grow{padding-top:clamp(28px, 6vw, 44px)}
	.fw-oj-grow > .fw-oj-cap{position:relative}
	.fw-oj-grow > .fw-oj-cap::before{
		content:'';position:absolute;left:0;right:0;top:calc(clamp(28px, 6vw, 44px) / -2);height:1px;
		background:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent)}
	.fw-oj-faq__cols{grid-template-columns:minmax(0, 1fr)}
	.fw-oj-faq__cols > .fw-oj-faq__list + .fw-oj-faq__list{border-top:0}
	.fw-oj-close{display:block;min-height:0;background:var(--wh)}
	.fw-oj-close__fig{position:relative;inset:auto;aspect-ratio:16/10}
	.fw-oj-close__fig::after{background:linear-gradient(180deg, transparent 55%, var(--wh))}
	.fw-oj-close__say{width:100%}
	.fw-oj-close__inner{padding-block:0 clamp(40px, 10vw, 64px);margin-top:-6vw}
	.fw-oj-close__title{font-size:clamp(28px, 7vw, 42px)}
	.fw-oj-fx i{filter:blur(56px)}
	.fw-oj-fx i:last-child{display:none}}

/* ── THE APP LAYER ──────────────────────────────────────────── */
@media(max-width:768px){
	.fw-oj-page{--node:44px;--gap:0px}
	.fw-oj-page{--oj-bar:92px}
	.fw-oj-bar__inner{padding:5px 0 3px}
	.fw-oj-bar__track{padding-inline:var(--pad)}
	.fw-oj-bar__nav{width:28px;height:28px}
	.fw-oj-bar__nav--prev,
	.fw-oj-bar__row--years .fw-oj-bar__nav--prev{left:6px}
	.fw-oj-bar__nav--next{right:6px}
	.fw-oj-chip{min-height:34px}
	.fw-oj-ruler li{flex-basis:62px}

	/* The spine runs down the left; each year's numeral sits above it. */
	.fw-oj-spine{left:calc(var(--node) / 2 - 1px)}
	.fw-oj-year{grid-template-columns:minmax(0, 1fr);row-gap:14px;padding-bottom:30px}
	.fw-oj-year__label{
		position:relative;top:auto;z-index:1;flex-direction:row;align-items:baseline;gap:10px;
		padding:0 0 0 calc(var(--node) + 16px)
	}
	.fw-oj-year__label span{font-size:clamp(48px, 15vw, 72px)}
	.fw-oj-item{column-gap:16px}
	.fw-oj-item__t{font-size:clamp(18px, 5vw, 22px)}
	.fw-oj-item__story{font-size:15px}
	.fw-oj-item__fig{border-radius:16px}

	.fw-oj-mix__body{grid-template-columns:minmax(0, 1fr);row-gap:22px;justify-items:center}
	.fw-oj-donut{width:clamp(200px, 62vw, 260px)}
	.fw-oj-legend{justify-self:stretch;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:10px}
	.fw-oj-legend li + li::before{display:none}
	.fw-oj-legend li:nth-child(n+3)::before{display:block}
	.fw-oj-legend__row{grid-template-columns:30px minmax(0, 1fr) auto;column-gap:9px;padding:9px 4px}
	.fw-oj-legend__ico{width:30px;height:30px;font-size:14px}
	.fw-oj-legend__name{font-size:13px}
	.fw-oj-legend__n{font-size:16px}
	.fw-oj-legend__go{display:none}
	.fw-oj-cap__key{margin-left:0;width:100%}
	.fw-oj-grow__plot{height:clamp(170px, 52vw, 230px)}
	.fw-oj-grow__yr.is-minor{display:none}
	.fw-oj-facts{grid-template-columns:repeat(2, minmax(0, 1fr))}
	.fw-oj-facts li:nth-child(odd){padding-left:0}
	.fw-oj-facts li:nth-child(odd)::before{display:none}
	.fw-oj-faq__q{grid-template-columns:26px minmax(0, 1fr) 30px;padding-left:12px;column-gap:10px}
	.fw-oj-faq__q-ico{width:30px;height:30px}
	.fw-oj-faq__a{padding:0 0 16px 48px}
	.fw-oj-act .fw-oj-btn{flex:1 1 100%;min-height:52px}}

/* ══════════════════════════════════════════════════════════════
   09 · MOTION — only when it is welcome
   ══════════════════════════════════════════════════════════════ */

@media(prefers-reduced-motion:no-preference){
	.fw-oj-fx i:first-child{animation:fwOjDrift 30s ease-in-out infinite}
	.fw-oj-fx i:last-child{animation:fwOjDrift 36s ease-in-out infinite reverse}
	.fw-oj-spine i{transition:transform .25s linear}

	.fw-oj-anim [data-oj-reveal]{opacity:0;transform:translate3d(0,30px,0);transition:opacity .9s var(--ease-soft), transform 1s var(--ease-soft)}
	.fw-oj-anim [data-oj-reveal].is-in{opacity:1;transform:none}
	/* A milestone: its node pops onto the spine, its glyph draws itself,
	   then the words rise. */
	.fw-oj-anim .fw-oj-item[data-oj-reveal]{transform:none}
	.fw-oj-anim .fw-oj-item[data-oj-reveal] .fw-oj-item__node{transform:scale(.3);transition:transform .6s var(--ease-pop)}
	.fw-oj-anim .fw-oj-item[data-oj-reveal] .fw-oj-item__body,
	.fw-oj-anim .fw-oj-item[data-oj-reveal] .fw-oj-item__fig{transform:translate3d(0,22px,0);transition:transform .9s var(--ease-soft) .12s}
	.fw-oj-anim .fw-oj-item[data-oj-reveal].is-in .fw-oj-item__node,
	.fw-oj-anim .fw-oj-item[data-oj-reveal].is-in .fw-oj-item__body,
	.fw-oj-anim .fw-oj-item[data-oj-reveal].is-in .fw-oj-item__fig{transform:none}
	.fw-oj-anim .fw-oj-item[data-oj-reveal].is-in:hover .fw-oj-item__node{transform:scale(1.08)}
	.fw-oj-anim [data-oj-reveal] .fw-oj-draw > *{stroke-dasharray:130;stroke-dashoffset:130}
	.fw-oj-anim [data-oj-reveal].is-in .fw-oj-draw > *{animation:fwOjDraw 1.6s var(--ease-soft) .25s forwards}
	/* The ring sweeps round from twelve o'clock; the curve draws itself
	   left to right, dots and all; a proud moment breathes. */
	.fw-oj-anim .fw-oj-mix[data-oj-reveal] .fw-oj-donut__svg{
		--oj-sweep:0deg;
		-webkit-mask:conic-gradient(from 90deg, var(--dk) var(--oj-sweep), transparent 0);
		        mask:conic-gradient(from 90deg, var(--dk) var(--oj-sweep), transparent 0);
		transition:--oj-sweep 1.8s var(--ease-soft) .2s}
	.fw-oj-anim .fw-oj-mix[data-oj-reveal].is-in .fw-oj-donut__svg{--oj-sweep:360deg}
	.fw-oj-anim .fw-oj-mix[data-oj-reveal] .fw-oj-legend li{opacity:0;transform:translate3d(14px,0,0);transition:opacity .6s var(--ease-soft), transform .7s var(--ease-soft)}
	.fw-oj-anim .fw-oj-mix[data-oj-reveal].is-in .fw-oj-legend li{opacity:1;transform:none}
	.fw-oj-legend li:nth-child(2){transition-delay:.08s}
	.fw-oj-legend li:nth-child(3){transition-delay:.16s}
	.fw-oj-legend li:nth-child(4){transition-delay:.24s}
	.fw-oj-legend li:nth-child(5){transition-delay:.32s}
	.fw-oj-legend li:nth-child(6){transition-delay:.4s}
	.fw-oj-legend li:nth-child(7){transition-delay:.48s}
	.fw-oj-legend li:nth-child(n+8){transition-delay:.56s}
	.fw-oj-anim .fw-oj-grow[data-oj-reveal] .fw-oj-grow__area,
	.fw-oj-anim .fw-oj-grow[data-oj-reveal] .fw-oj-grow__pts{clip-path:inset(-40px 100% -40px -40px);transition:clip-path 1.9s var(--ease-soft) .25s}
	.fw-oj-anim .fw-oj-grow[data-oj-reveal].is-in .fw-oj-grow__area,
	.fw-oj-anim .fw-oj-grow[data-oj-reveal].is-in .fw-oj-grow__pts{clip-path:inset(-40px -40px -40px -40px)}
	.fw-oj-grow__dot.is-proud .fw-oj-grow__halo{animation:fwOjBreathe 2.8s ease-in-out infinite}}

@property --oj-sweep{syntax:'<angle>';inherits:false;initial-value:360deg}
@keyframes fwOjBreathe{0%,100%{transform:scale(1);opacity:.24}50%{transform:scale(1.35);opacity:.1}}

@keyframes fwOjDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(34px,-26px,0) scale(1.1)}}
@keyframes fwOjDraw{to{stroke-dashoffset:0}}

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

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

@media(hover:none){
	.fw-oj-btn:hover,
	.fw-oj-btn:hover i,
	.fw-oj-chip:hover,
	.fw-oj-item:hover .fw-oj-item__node,
	.fw-oj-item:hover .fw-oj-item__fig img,
	.fw-oj-item__more:hover i{transform:none}}

/* core.js scrolls in-page links with scrollIntoView: clear the header and
   the pinned bar. */
.fw-oj [id]{scroll-margin-top:calc(var(--article-top) + var(--oj-bar) + 8px)}

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