/* ============================================================
   FOUNDATION · v13 light-warm register
   Serves TWO surfaces from one file:
     /foundation/                 .rhinory-foundation-landing  (prototypes/13/07-foundation.html)
     /foundation/five-species/    .rhinory-meet-the-five       (prototypes/13/08-meet-the-five.html)

   Brief: docs/briefs/2026-09-10-foundation-landing-v13-fable-reimagine.md
          docs/briefs/2026-09-11-meet-the-five-v13.md
   Prototypes: 07 + 08 @ ce2bea7f, rendered.

   ONE FILE, NOT TWO. The two prototypes share a vocabulary verbatim -- the
   section rhythm, the photo frame, the `go` link, the buttons, the reveal --
   because 08 was built from 07. The earlier Foundation surfaces each carried
   their own copy of the shared chrome, but only because each was gated on a
   different is_page(); these two are enqueued together, so the shared half is
   declared once here and each page adds only what is its own.

   THIS FILE RETIRES THE v6 OFF-WHITE REGISTER ON THESE TWO PAGES.
   foundation-home.css and foundation-five-species.css installed
   --off-white / --texas-gold / --accent-green on their wrappers. Neither file
   is enqueued for these routes any more. The dark Reserve-cool wine-side
   tokens are untouched, here as there: every declaration below is scoped to
   one of the two wrappers or to the page <main>.

   CLASS NAMES. The prototypes use bare `.wrap`, `.btn`, `.name`, `.meta`,
   `.go`, `.lede`. The theme's own style.css already defines those, so each is
   carried across with the `fd-` prefix rather than scoped and hoped for --
   scoping wins the properties this file declares and leaks the ones it does
   not. Same call experiences.css made with `.xa-btn`.
   ============================================================ */

/* ============================================================
   TOKENS
   The prototypes resolve these from styles.css :root plus the .light-warm
   block in v13-shared.css. Only the subset these two pages read is declared.

   Declared on BOTH the page <main> and the block wrapper: the front end gets
   them from the page shell, and the Site Editor canvas -- which renders the
   block on its own, with no <main> around it -- gets the identical set from
   the wrapper.
   ============================================================ */
.rhinory-page--foundation,
.rhinory-page--five-species,
.rhinory-foundation-landing,
.rhinory-meet-the-five {
	/* dark register (styles.css :root) -- the hero is the only dark surface */
	--ink: #1C1916;
	--ivory: #F3F2ED;
	--acacia: #B97727;
	--gold-soft: #E2C58F;
	/* light / paper register (v13-shared.css .light-warm) */
	--paper: #FBF7EE;
	--card: #F4EEE0;
	--card-2: #EAE1CE;
	--ink-warm: #2D2926;
	--ink-warm-2: #3A352F;
	--rhino-warm: #717271;
	--rule-warm: rgba(45, 41, 38, 0.10);
	--rule-warm-2: rgba(45, 41, 38, 0.18);
	--burgundy: #520000;
	/* shared type scale (v13-shared.css :root) */
	--type-h2: clamp(40px, 5.4vw, 76px);
	--type-h3: clamp(26px, 2.6vw, 34px);
	--type-lede: 18px;
	--type-body: 16px;
	--type-body-editorial: 18px;
	background: var(--paper);
	color: var(--ink-warm);
}

/* ============================================================
   SHARED VOCABULARY (07 + 08)
   ============================================================ */

/* The prototype's base type is the browser default 16px/1.55; theme.json puts
   the site on 17px. Pinned so every inherited-size element measures the same
   as the design. */
.rhinory-foundation-landing,
.rhinory-meet-the-five {
	position: relative;
	font-family: "Lora", Georgia, serif;
	font-size: 16px;
	line-height: 1.55;
}

/* The prototype's `*{min-width:0}`, scoped. Grid and flex children default to
   min-width:auto, which is what makes a long species name push a row wider
   than its column instead of wrapping. */
.rhinory-foundation-landing *,
.rhinory-meet-the-five * { min-width: 0; }

/* styles.css base: images are blocks, links carry no underline. Site-wide in
   the prototype, scoped here so the theme is untouched. */
.rhinory-foundation-landing img,
.rhinory-meet-the-five img { max-width: 100%; display: block; }
.rhinory-foundation-landing a,
.rhinory-meet-the-five a { color: inherit; text-decoration: none; }
.rhinory-foundation-landing a:hover,
.rhinory-meet-the-five a:hover { color: var(--burgundy); }

/* theme.json's `elements.heading` sets letter-spacing:-0.01em and
   line-height:1 site-wide; the prototype has no equivalent, so a heading there
   falls to the UA default. Ported heading rules that state their own values
   still win -- this only catches the ones that state neither. */
.rhinory-foundation-landing :is(h1, h2, h3, h4, h5, h6),
.rhinory-meet-the-five :is(h1, h2, h3, h4, h5, h6) { letter-spacing: normal; line-height: inherit; }

.rhinory-foundation-landing .fd-wrap,
.rhinory-meet-the-five .fd-wrap { max-width: 1280px; margin: 0 auto; padding: 0 56px; }

.rhinory-foundation-landing .fd-sec,
.rhinory-meet-the-five .fd-sec { padding: clamp(64px, 9vw, 120px) 0; border-top: 1px solid var(--rule-warm-2); }
.rhinory-foundation-landing .fd-sec--card,
.rhinory-meet-the-five .fd-sec--card { background: var(--card); }
.rhinory-foundation-landing .fd-sec--card2,
.rhinory-meet-the-five .fd-sec--card2 { background: var(--card-2); }

.rhinory-foundation-landing :is(h1, h2, h3),
.rhinory-meet-the-five :is(h1, h2, h3) {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ink-warm);
	margin: 0;
	text-wrap: pretty;
}
.rhinory-foundation-landing :is(h1, h2, h3) em,
.rhinory-meet-the-five :is(h1, h2, h3) em { font-style: italic; font-weight: 500; color: var(--burgundy); }
.rhinory-foundation-landing h2,
.rhinory-meet-the-five h2 { font-size: var(--type-h2); line-height: 1.02; }
.rhinory-foundation-landing h3,
.rhinory-meet-the-five h3 { font-size: var(--type-h3); line-height: 1.1; }

.rhinory-foundation-landing p,
.rhinory-meet-the-five p {
	margin: 0;
	font-family: "Lora", Georgia, serif;
	font-size: var(--type-body-editorial);
	line-height: 1.7;
	color: var(--ink-warm-2);
	text-wrap: pretty;
}
.rhinory-foundation-landing p strong,
.rhinory-meet-the-five p strong { font-weight: 600; color: var(--ink-warm); }
.rhinory-foundation-landing p em,
.rhinory-meet-the-five p em { font-style: italic; }
.rhinory-foundation-landing .fd-lede,
.rhinory-meet-the-five .fd-lede { font-size: var(--type-lede); line-height: 1.6; }

.rhinory-foundation-landing .fd-meta,
.rhinory-meet-the-five .fd-meta {
	font-family: "Josefin Sans", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rhino-warm);
	line-height: 1.6;
}
.rhinory-foundation-landing .fd-meta .fd-sep,
.rhinory-meet-the-five .fd-meta .fd-sep { color: var(--burgundy); margin: 0 8px; }

/* ---- buttons ---- */
.rhinory-foundation-landing .fd-ctas,
.rhinory-meet-the-five .fd-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.rhinory-foundation-landing .fd-btn,
.rhinory-meet-the-five .fd-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 28px;
	min-height: 48px;
	font-family: "Josefin Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform .2s, background .2s, color .2s, border-color .2s;
}
.rhinory-foundation-landing .fd-btn--primary,
.rhinory-meet-the-five .fd-btn--primary {
	background: var(--burgundy);
	color: var(--paper);
	border: 1px solid var(--burgundy);
	box-shadow: 0 12px 34px -14px rgba(82, 0, 0, 0.5);
}
.rhinory-foundation-landing .fd-btn--primary:hover,
.rhinory-meet-the-five .fd-btn--primary:hover { background: #3D0000; color: var(--paper); transform: translateY(-1px); }
.rhinory-foundation-landing .fd-btn--outline,
.rhinory-meet-the-five .fd-btn--outline { border: 1px solid var(--rule-warm-2); color: var(--burgundy); background: transparent; }
.rhinory-foundation-landing .fd-btn--outline:hover,
.rhinory-meet-the-five .fd-btn--outline:hover { border-color: var(--burgundy); background: rgba(82, 0, 0, 0.05); color: var(--burgundy); }
.rhinory-foundation-landing .fd-btn .fd-arrow,
.rhinory-meet-the-five .fd-btn .fd-arrow {
	width: 16px;
	height: 1px;
	background: currentColor;
	position: relative;
	transition: width .2s;
}
.rhinory-foundation-landing .fd-btn .fd-arrow::after,
.rhinory-meet-the-five .fd-btn .fd-arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}
.rhinory-foundation-landing .fd-btn:hover .fd-arrow,
.rhinory-meet-the-five .fd-btn:hover .fd-arrow { width: 22px; }

/* ---- photo frame ---- */
.rhinory-foundation-landing .fd-photo,
.rhinory-meet-the-five .fd-photo {
	margin: 0;
	position: relative;
	overflow: hidden;
	background: var(--card-2);
	border: 1px solid var(--rule-warm-2);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.rhinory-foundation-landing .fd-photo img,
.rhinory-meet-the-five .fd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* rhinory_core_picture() wraps each <img> in a <picture> for its WebP sibling;
   style.css already sets `picture{display:contents}` so the wrapper is
   transparent to these layouts.

   THE CATCH, measured on the hero: `display:contents` hands the picture's
   children straight to the flex container, and the `<source>` goes with them.
   It then computes to `display:block` rather than the UA's `none` and takes a
   full flex track -- a phantom 40px gap under the Foundation lockup, which is
   the one place here where a picture-wrapped image is a direct flex item
   rather than sitting inside a figure. Put it back. */
.rhinory-foundation-landing picture > source,
.rhinory-meet-the-five picture > source { display: none; }
.rhinory-foundation-landing figcaption,
.rhinory-meet-the-five figcaption {
	margin-top: 12px;
	font-family: "Josefin Sans", sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--rhino-warm);
	line-height: 1.6;
}
.rhinory-foundation-landing figcaption i,
.rhinory-meet-the-five figcaption i { font-style: normal; color: var(--burgundy); }

/* ---- the bordered "go" link and the inline external link ---- */
.rhinory-foundation-landing .fd-go,
.rhinory-meet-the-five .fd-go {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: "Josefin Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--burgundy);
	text-decoration: none;
	border: 1px solid var(--rule-warm-2);
	padding: 15px 24px;
	min-height: 44px;
	transition: border-color .25s, background .25s;
}
.rhinory-foundation-landing .fd-go:hover,
.rhinory-meet-the-five .fd-go:hover { border-color: var(--burgundy); background: rgba(82, 0, 0, 0.05); }
.rhinory-foundation-landing .fd-go .fd-arr,
.rhinory-meet-the-five .fd-go .fd-arr {
	font-family: "Cormorant Garamond", serif;
	font-size: 19px;
	line-height: 0;
	transition: transform .25s;
}
.rhinory-foundation-landing .fd-go:hover .fd-arr,
.rhinory-meet-the-five .fd-go:hover .fd-arr { transform: translateX(5px); }
.rhinory-foundation-landing .fd-ext,
.rhinory-meet-the-five .fd-ext {
	font-family: "Josefin Sans", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--burgundy);
	white-space: nowrap;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s;
	line-height: 1.6;
}
.rhinory-foundation-landing .fd-ext:hover,
.rhinory-meet-the-five .fd-ext:hover { border-bottom-color: var(--burgundy); }

/* ---- stand-ins ----
   Everything awaiting Nicole's check carries the marker the prototype uses, so
   a reviewer can see what is provisional without reading the source. */
.rhinory-foundation-landing [data-stand-in],
.rhinory-meet-the-five [data-stand-in] { position: relative; }
.rhinory-foundation-landing .fd-photo[data-stand-in]::after,
.rhinory-meet-the-five .fd-photo[data-stand-in]::after {
	content: "Photo to confirm";
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 6px 10px;
	border: 1px dashed rgba(82, 0, 0, 0.55);
	background: #FFF6D8;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5C5340;
}
.rhinory-foundation-landing span[data-stand-in],
.rhinory-meet-the-five span[data-stand-in] { border-bottom: 1px dashed rgba(82, 0, 0, 0.5); }

/* ---- reveal (editorial stagger 0/100/200/300) ----
   assets/js/foundation-v13.js adds .is-in at 12% in view. The hidden state is
   unconditional, as in the prototype, so nothing flashes in and back out
   before a deferred script runs -- and each block prints a <noscript> that
   un-hides the lot, so a reader without JS gets the page rather than a blank
   column. Meet the Five is the SEO home for this text; it cannot depend on a
   script to be readable. */
.rhinory-foundation-landing .fd-reveal,
.rhinory-meet-the-five .fd-reveal {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1);
}
.rhinory-foundation-landing .fd-reveal.is-in,
.rhinory-meet-the-five .fd-reveal.is-in { opacity: 1; transform: none; }
.rhinory-foundation-landing .fd-reveal[data-d="1"],
.rhinory-meet-the-five .fd-reveal[data-d="1"] { transition-delay: .1s; }
.rhinory-foundation-landing .fd-reveal[data-d="2"],
.rhinory-meet-the-five .fd-reveal[data-d="2"] { transition-delay: .2s; }
.rhinory-foundation-landing .fd-reveal[data-d="3"],
.rhinory-meet-the-five .fd-reveal[data-d="3"] { transition-delay: .3s; }
.rhinory-foundation-landing .fd-reveal[data-d="4"],
.rhinory-meet-the-five .fd-reveal[data-d="4"] { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
	.rhinory-foundation-landing .fd-reveal,
	.rhinory-meet-the-five .fd-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.rhinory-foundation-landing :is(.fd-go, .fd-go .fd-arr, .fd-btn),
	.rhinory-meet-the-five :is(.fd-go, .fd-go .fd-arr, .fd-btn) { transition: none; }
}

/* ============================================================
   07 · FOUNDATION LANDING
   ============================================================ */

/* ---- 01 · Hero · full-width photo, dark overlay, centred lockup ----
   The prototype paints the photograph as a CSS background on .fd-hero-img.
   Here it is a real <img> inside that element instead, for two reasons: the
   operator swaps it from the canvas (a background-image is not a media slot),
   and rhinory_core_picture() can then serve its WebP sibling. The filter and
   the two-layer gradient are unchanged; the gradient moves to a z-index above
   the image rather than a pseudo above a background. */
.rhinory-foundation-landing .fd-hero {
	position: relative;
	min-height: min(84vh, 880px);
	background: #1C1916;
	color: var(--ivory);
	overflow: hidden;
	display: grid;
	align-items: center;
	border-bottom: 1px solid var(--rule-warm-2);
}
.rhinory-foundation-landing .fd-hero-img { position: absolute; inset: 0; }
.rhinory-foundation-landing .fd-hero-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 38%;
	filter: saturate(.82) contrast(1.06) brightness(.74);
}
.rhinory-foundation-landing .fd-hero-img::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(10, 8, 7, 0.62) 0%, rgba(10, 8, 7, 0.46) 42%, rgba(28, 25, 22, 0.90) 100%),
		radial-gradient(70% 66% at 50% 46%, rgba(10, 8, 7, 0.42) 0%, rgba(10, 8, 7, 0) 72%);
}
.rhinory-foundation-landing .fd-hero-grain {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .08;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
	mix-blend-mode: overlay;
}
.rhinory-foundation-landing .fd-hero-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(26px, 3vw, 40px);
	/* No padding-block. 07 asks for clamp(64px,9vw,120px) here and never gets
	   it: `.fd .wrap`'s `padding: 0 56px` shorthand (0,2,0) outranks
	   `.fd-hero-inner` (0,1,0) and zeroes the vertical padding. The hero is a
	   centred grid taller than its content either way, so the rendered result
	   is the same framing with a 77px shorter hero. Ported as rendered. */
}
.rhinory-foundation-landing .fd-hero-logo {
	width: min(440px, 72vw);
	height: auto;
	display: block;
	filter: drop-shadow(0 8px 34px rgba(0, 0, 0, 0.5));
}
.rhinory-foundation-landing .fd-hero h1 {
	color: var(--ivory);
	font-size: clamp(50px, 6.8vw, 108px);
	line-height: .96;
	letter-spacing: -0.016em;
	text-shadow: 0 1px 26px rgba(10, 8, 7, 0.55);
}
/* The page's one use of gold: the hero is its only dark beat. */
.rhinory-foundation-landing .fd-hero h1 em { color: var(--gold-soft); }
.rhinory-foundation-landing .fd-hero .fd-ctas { justify-content: center; }
.rhinory-foundation-landing .fd-hero .fd-btn--primary { box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.7); }
.rhinory-foundation-landing .fd-hero .fd-btn--outline { border-color: rgba(243, 242, 237, 0.55); color: var(--ivory); }
.rhinory-foundation-landing .fd-hero .fd-btn--outline:hover { border-color: var(--ivory); background: rgba(243, 242, 237, 0.1); color: var(--ivory); }

/* ---- 02 · Vision + mission ---- */
.rhinory-foundation-landing .fd-vision .fd-wrap { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 64px); }
.rhinory-foundation-landing .fd-vision blockquote {
	margin: 0;
	max-width: 22ch;
	font-family: "Cormorant Garamond", serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(34px, 4.6vw, 66px);
	line-height: 1.06;
	letter-spacing: -0.012em;
	color: var(--ink-warm);
	text-wrap: pretty;
}
.rhinory-foundation-landing .fd-vision blockquote em { color: var(--burgundy); font-style: italic; }
.rhinory-foundation-landing .fd-mission {
	display: grid;
	grid-template-columns: minmax(160px, .35fr) 1fr;
	gap: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--rule-warm-2);
	align-items: start;
}
.rhinory-foundation-landing .fd-mission h2 { font-size: var(--type-h3); line-height: 1.1; padding-top: 4px; }
.rhinory-foundation-landing .fd-mission p { max-width: 62ch; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.55; color: var(--ink-warm); }

/* ---- 03 · Partners ledger (logo left, copy right) ---- */
.rhinory-foundation-landing .fd-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: end;
	margin-bottom: clamp(40px, 5vw, 64px);
}
.rhinory-foundation-landing .fd-head p { max-width: 52ch; }
.rhinory-foundation-landing .fd-ledger { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-warm-2); }
.rhinory-foundation-landing .fd-row {
	display: grid;
	grid-template-columns: 136px 1fr 1.15fr;
	gap: 0 36px;
	align-items: center;
	padding: 28px 0;
	border-bottom: 1px solid var(--rule-warm-2);
}
.rhinory-foundation-landing .fd-row .fd-logo {
	grid-column: 1;
	grid-row: 1 / 3;
	width: 136px;
	height: 104px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	border: 1px solid var(--rule-warm-2);
	background: var(--card);
}
.rhinory-foundation-landing .fd-row .fd-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.rhinory-foundation-landing .fd-row .fd-title {
	font-family: "Cormorant Garamond", serif;
	font-size: var(--type-h3);
	line-height: 1.08;
	color: var(--ink-warm);
	grid-column: 2;
	align-self: end;
}
.rhinory-foundation-landing .fd-row .fd-where {
	grid-column: 2;
	align-self: start;
	margin-top: 8px;
	font-family: "Josefin Sans", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rhino-warm);
	line-height: 1.6;
}
.rhinory-foundation-landing .fd-row .fd-what {
	grid-column: 3;
	grid-row: 1;
	align-self: end;
	font-family: "Lora", serif;
	font-size: var(--type-body);
	line-height: 1.6;
	color: var(--ink-warm-2);
	max-width: 44ch;
}
.rhinory-foundation-landing .fd-row .fd-ext { grid-column: 3; grid-row: 2; align-self: start; margin-top: 8px; justify-self: start; }
.rhinory-foundation-landing .fd-partners .fd-go { margin-top: 36px; }

/* ---- 04 · Impact: initiatives, reports, two named rhinos ---- */
.rhinory-foundation-landing .fd-impact-top {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: clamp(32px, 6vw, 96px);
	align-items: end;
	padding-bottom: clamp(28px, 3vw, 40px);
}
.rhinory-foundation-landing .fd-impact-top h2 { max-width: 20ch; }
.rhinory-foundation-landing .fd-impact-top p { max-width: 46ch; }
.rhinory-foundation-landing .fd-inits { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-warm-2); }
.rhinory-foundation-landing .fd-inits li {
	padding: 20px 0;
	border-bottom: 1px solid var(--rule-warm-2);
	font-family: "Lora", serif;
	font-size: var(--type-body-editorial);
	line-height: 1.6;
	color: var(--ink-warm-2);
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 8px 40px;
	align-items: baseline;
}
.rhinory-foundation-landing .fd-inits li strong {
	font-family: "Cormorant Garamond", serif;
	font-weight: 500;
	font-size: clamp(22px, 1.8vw, 26px);
	line-height: 1.15;
	color: var(--ink-warm);
}
.rhinory-foundation-landing .fd-reports { display: flex; gap: 14px 16px; flex-wrap: wrap; align-items: center; margin-top: 32px; }
.rhinory-foundation-landing .fd-named {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	margin-top: clamp(48px, 6vw, 80px);
	padding-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid var(--rule-warm-2);
}
.rhinory-foundation-landing .fd-name { display: flex; flex-direction: column; gap: 22px; }
.rhinory-foundation-landing .fd-name .fd-photo { aspect-ratio: 4 / 3; width: 100%; }
.rhinory-foundation-landing .fd-name h3 { margin-bottom: 8px; }
.rhinory-foundation-landing .fd-name .fd-where { display: block; margin-bottom: 14px; }
.rhinory-foundation-landing .fd-name p { font-size: var(--type-body); line-height: 1.62; max-width: 52ch; }

/* ---- 05 · Winery bridge ---- */
.rhinory-foundation-landing .fd-bridge .fd-wrap {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(40px, 5vw, 80px);
	align-items: center;
}
.rhinory-foundation-landing .fd-bridge .fd-photo { aspect-ratio: 16 / 11; }
.rhinory-foundation-landing .fd-bridge .fd-photo img { object-position: 60% 50%; filter: saturate(.92) contrast(1.04); }
.rhinory-foundation-landing .fd-bridge-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.rhinory-foundation-landing .fd-bridge-copy p { max-width: 48ch; }
/* MATCHES THE RENDERED PROTOTYPE, NOT ITS .fd-rally RULE. 07 declares this line
   as Cormorant italic 30px burgundy at `.fd-rally` (0,1,0) -- and never gets it,
   because `.fd p` (0,2,0) is more specific and wins the family, the size and the
   colour. What the client reviewed on 2026-09-10, and approved, is the line
   below: body Lora at the editorial size, in the body ink, italic (the one
   property `.fd p` does not set), over a hairline rule. Ported as rendered.
   Flagged for Claude Design in docs/design-backlog.md -- if the Cormorant
   treatment was the intent, it is a design change and needs saying so. */
.rhinory-foundation-landing .fd-rally {
	font-family: "Lora", Georgia, serif;
	font-style: italic;
	font-size: var(--type-body-editorial);
	line-height: 1.7;
	color: var(--ink-warm-2);
	padding-top: 18px;
	border-top: 1px solid var(--rule-warm-2);
	width: 100%;
}

/* ---- 06 · Five species (one row each) ---- */
.rhinory-foundation-landing .fd-species-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-warm-2); }
/* The row is the link to that species' section on Meet the Five (Brief
   docs/briefs/2026-09-11-erik-review-polish.md AC 6), so the grid lives on the
   <a> and the <li> is a plain list item. Every .fd-sp descendant selector below
   is unchanged by that move. */
.rhinory-foundation-landing .fd-sp {
	display: grid;
	grid-template-columns: 200px 1.25fr 1fr .9fr;
	gap: 0 40px;
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid var(--rule-warm-2);
	color: inherit;
	text-decoration: none;
	transition: background .25s;
}
.rhinory-foundation-landing .fd-sp:hover { background: rgba(82, 0, 0, 0.04); }
.rhinory-foundation-landing .fd-sp:hover .fd-title { color: var(--burgundy); }
.rhinory-foundation-landing .fd-sp:focus-visible { outline: 2px solid var(--burgundy); outline-offset: -2px; }
.rhinory-foundation-landing .fd-sp .fd-photo { aspect-ratio: 4 / 3; width: 100%; }
.rhinory-foundation-landing .fd-sp .fd-k { display: flex; flex-direction: column; gap: 6px; }
.rhinory-foundation-landing .fd-sp .fd-title {
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.04;
	color: var(--ink-warm);
	white-space: nowrap;
}
.rhinory-foundation-landing .fd-sp .fd-bin { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 18px; line-height: 1.3; color: var(--rhino-warm); }
.rhinory-foundation-landing .fd-sp .fd-status {
	font-family: "Josefin Sans", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--burgundy);
	line-height: 1.6;
}
.rhinory-foundation-landing .fd-sp .fd-pop {
	font-family: "Cormorant Garamond", serif;
	font-weight: 500;
	font-size: clamp(32px, 3vw, 46px);
	line-height: 1;
	color: var(--ink-warm);
	font-variant-numeric: lining-nums;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}
.rhinory-foundation-landing .fd-sp .fd-pop small {
	font-family: "Josefin Sans", sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--rhino-warm);
	line-height: 1.4;
}
/* Same specificity accident as .fd-rally: 07 asks for 16px muted grey and
   renders 18px body ink, because `.fd p` outranks `.fd-species-note`. Its own
   max-width:60ch has no competitor and does apply -- at 18px, not 16px, which
   is why the line measures 671px wide in the prototype. Ported as rendered. */
.rhinory-foundation-landing .fd-species-note { margin-top: 22px; font-size: var(--type-body-editorial); color: var(--ink-warm-2); max-width: 60ch; }
.rhinory-foundation-landing .fd-species .fd-go { margin-top: 36px; }

/* ---- 07 · Close ---- */
.rhinory-foundation-landing .fd-close-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.rhinory-foundation-landing .fd-close h2 { font-size: clamp(56px, 7.4vw, 112px); line-height: .94; letter-spacing: -0.016em; }
.rhinory-foundation-landing .fd-close-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.rhinory-foundation-landing .fd-legal {
	margin-top: clamp(48px, 6vw, 80px);
	padding-top: 26px;
	border-top: 1px solid var(--rule-warm-2);
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.rhinory-foundation-landing .fd-legal .fd-meta { color: var(--rhino-warm); }

/* ============================================================
   08 · MEET THE FIVE
   ============================================================ */

.rhinory-meet-the-five .mf-hero { padding: clamp(64px, 9vw, 136px) 0 clamp(56px, 7vw, 104px); }
.rhinory-meet-the-five .mf-hero h1 { font-size: clamp(58px, 8vw, 124px); line-height: .94; letter-spacing: -0.016em; }
.rhinory-meet-the-five .mf-hero .fd-lede {
	margin-top: clamp(20px, 2.4vw, 32px);
	max-width: 36ch;
	font-size: clamp(20px, 1.8vw, 26px);
	line-height: 1.45;
	color: var(--ink-warm);
}

/* ---- species sections ---- */
.rhinory-meet-the-five .mf-sp .fd-wrap {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}
.rhinory-meet-the-five .mf-photo { position: sticky; top: 120px; aspect-ratio: 4 / 5; max-height: calc(100vh - 160px); }
.rhinory-meet-the-five .mf-sp--flip .mf-photo { order: 2; }
.rhinory-meet-the-five .mf-body { display: flex; flex-direction: column; gap: 22px; max-width: 64ch; }
.rhinory-meet-the-five .mf-latin {
	margin-top: -12px;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: italic;
	font-size: clamp(21px, 1.9vw, 26px);
	line-height: 1.3;
	color: var(--rhino-warm);
}
.rhinory-meet-the-five .mf-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 6px 0;
	border-top: 1px solid var(--rule-warm-2);
	border-bottom: 1px solid var(--rule-warm-2);
}
.rhinory-meet-the-five .mf-facts div { padding: 16px 20px 18px 0; }
.rhinory-meet-the-five .mf-facts div + div { padding-left: 20px; border-left: 1px solid var(--rule-warm-2); }
.rhinory-meet-the-five .mf-facts dt {
	font-family: "Josefin Sans", sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--rhino-warm);
	line-height: 1.5;
}
.rhinory-meet-the-five .mf-facts dd {
	margin: 8px 0 0;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(20px, 1.7vw, 23px);
	line-height: 1.22;
	color: var(--ink-warm);
}
.rhinory-meet-the-five .mf-facts dd small {
	display: block;
	margin-top: 4px;
	font-family: "Lora", Georgia, serif;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ink-warm-2);
}

/* ---- Blake beat ---- */
.rhinory-meet-the-five .mf-blake .fd-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(28px, 6vw, 96px);
	align-items: center;
}
.rhinory-meet-the-five .mf-blake-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 58ch; }
.rhinory-meet-the-five .mf-blake-photo { aspect-ratio: 16 / 11; }
.rhinory-meet-the-five .mf-blake-photo img { object-position: 60% 50%; filter: saturate(.92) contrast(1.04); }

/* ---- close ---- */
.rhinory-meet-the-five .mf-close-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.rhinory-meet-the-five .mf-close h2 { font-size: clamp(56px, 7.4vw, 112px); line-height: .94; letter-spacing: -0.016em; }
.rhinory-meet-the-five .mf-close-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.rhinory-meet-the-five .mf-textlink {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: "Lora", Georgia, serif;
	font-size: var(--type-body);
	color: var(--burgundy);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}
.rhinory-meet-the-five .mf-source {
	margin-top: clamp(48px, 6vw, 80px);
	padding-top: 22px;
	border-top: 1px solid var(--rule-warm-2);
	font-size: 14px;
	line-height: 1.6;
	color: var(--rhino-warm);
	max-width: none;
}

/* ============================================================
   08 · MEET THE FIVE · the v12 research page, ported
   Brief: docs/briefs/2026-09-11-erik-review-polish.md AC 7.
   Guardians, the six-cell species facts with IUCN badges, Christine Bobko by
   role, the threats, and the population data story. Translated rule for rule
   from prototypes/13/08-meet-the-five.html (`.fd .wrap` becomes `.fd-wrap`,
   everything else is scoped to the block wrapper), so the computed-style
   audit against the prototype has nothing to reconcile.
   ============================================================ */
/* ---- IUCN badge (ported from v12's photo chip, v13 tokens) ----
   The status also reads in the fact row below, so the chip is aria-hidden.
   Critically Endangered takes the burgundy accent; Near Threatened and
   Vulnerable take ink with an acacia edge. Acacia is never the text colour:
   at 10px on paper it does not clear contrast. */
.rhinory-meet-the-five .mf-iucn { position:absolute;top:14px;left:14px;z-index:2;padding:7px 11px 6px;background:var(--paper);border:1px solid var(--rule-warm-2);font-family:"Josefin Sans",sans-serif;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:var(--ink-warm) }
.rhinory-meet-the-five .mf-iucn--cr { color:var(--burgundy);border-color:rgba(82,0,0,.35) }
.rhinory-meet-the-five .mf-iucn--nt,
.rhinory-meet-the-five .mf-iucn--vu { box-shadow:inset 3px 0 0 var(--acacia) }
/* ---- six-cell fact grid: status, population, range / distinctives, threats, Rhinory ---- */
.rhinory-meet-the-five .mf-facts div:nth-child(3n+1) { padding-left:0;border-left:0 }
.rhinory-meet-the-five .mf-facts div:nth-child(n+4) { border-top:1px solid var(--rule-warm-2) }
.rhinory-meet-the-five .mf-facts dd a { color:var(--burgundy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px }
/* ---- section head shared by guardians, threats, population ---- */
.rhinory-meet-the-five .mf-head { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,64px) }
.rhinory-meet-the-five .mf-head a { color:var(--burgundy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px }
/* ---- Guardians ---- */
.rhinory-meet-the-five .mf-guardians .fd-wrap { display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start }
.rhinory-meet-the-five .mf-guardians-body { display:flex;flex-direction:column;gap:20px;max-width:62ch }
/* ---- Christine Bobko: by role, no photograph ---- */
.rhinory-meet-the-five .mf-bobko .fd-wrap { display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start }
.rhinory-meet-the-five .mf-bobko-head { display:flex;flex-direction:column;gap:18px }
.rhinory-meet-the-five .mf-role { font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:clamp(21px,1.9vw,26px);line-height:1.3;color:var(--rhino-warm) }
.rhinory-meet-the-five .mf-bobko-body { display:flex;flex-direction:column;gap:20px;max-width:64ch }
.rhinory-meet-the-five .mf-stats { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(12px,2vw,24px) 0 0;border-top:1px solid var(--rule-warm-2);border-bottom:1px solid var(--rule-warm-2) }
.rhinory-meet-the-five .mf-stats div { padding:20px 18px 22px 0 }
.rhinory-meet-the-five .mf-stats div + div { padding-left:18px;border-left:1px solid var(--rule-warm-2) }
.rhinory-meet-the-five .mf-stats dt { order:2;margin-top:10px;font-family:"Josefin Sans",sans-serif;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1.5;color:var(--rhino-warm) }
.rhinory-meet-the-five .mf-stats dd { order:1;margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(38px,3.6vw,52px);line-height:1;color:var(--burgundy) }
.rhinory-meet-the-five .mf-stats div { display:flex;flex-direction:column }
/* ---- Threats ---- */
.rhinory-meet-the-five .mf-threats-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-warm-2) }
.rhinory-meet-the-five .mf-threat { padding:28px 24px 6px 0 }
.rhinory-meet-the-five .mf-threat + .mf-threat { padding-left:24px;border-left:1px solid var(--rule-warm-2) }
.rhinory-meet-the-five .mf-threat h3 { font-size:var(--type-h3);line-height:1.1 }
.rhinory-meet-the-five .mf-threat p { margin-top:14px;font-size:16px;line-height:1.65 }
/* ---- Population: the v12 data story, static ----
   No count-up (13/README rule 2): the figures print as they are. Charts are
   drawn in two layers so they stay legible at 390: the lines are an SVG in a
   0-100 box stretched to the plot (non-scaling strokes, so they stay 2px), and
   every dot, value and year is HTML placed by percentage, so text is true CSS
   pixels and circles stay round at any width. Positions come from one formula,
   x = (year-2015)/10, y = 1-(value-lo)/(hi-lo), which render.php repeats. */
.rhinory-meet-the-five .mf-bobko h2 { font-size:clamp(40px,4.4vw,64px) }
.rhinory-meet-the-five .mf-pop-label { margin:calc(-1 * clamp(16px,2vw,28px)) 0 clamp(28px,3vw,40px);font-size:14px;line-height:1.6;color:var(--rhino-warm);max-width:80ch }
.rhinory-meet-the-five .mf-count { list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule-warm-2);border-bottom:1px solid var(--rule-warm-2) }
.rhinory-meet-the-five .mf-count li { display:flex;flex-direction:column;gap:6px;padding:24px 18px 24px 0 }
.rhinory-meet-the-five .mf-count li + li { padding-left:18px;border-left:1px solid var(--rule-warm-2) }
.rhinory-meet-the-five .mf-count-latin { font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:16px;line-height:1.3;color:var(--rhino-warm) }
.rhinory-meet-the-five .mf-count-name { font-family:"Josefin Sans",sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;color:var(--ink-warm) }
.rhinory-meet-the-five .mf-count-n { margin-top:8px;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(40px,3.4vw,56px);line-height:1;color:var(--ink-warm);font-variant-numeric:lining-nums }
.rhinory-meet-the-five .mf-count-meta { display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:6px;font-family:"Lora",Georgia,serif;font-size:14px;line-height:1.4;color:var(--ink-warm-2) }
.rhinory-meet-the-five .mf-count-pre { font-size:.42em;font-style:italic;color:var(--ink-warm-2);vertical-align:.35em }
.rhinory-meet-the-five .mf-trend { display:inline-flex;align-items:center;gap:8px;font-family:"Josefin Sans",sans-serif;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;color:var(--ink-warm) }
.rhinory-meet-the-five .mf-trend::before { content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--burgundy) }
.rhinory-meet-the-five .mf-trend--up::before { background:var(--acacia) }
.rhinory-meet-the-five .mf-total { display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 28px;align-items:baseline;padding-top:32px }
.rhinory-meet-the-five .mf-total-n { font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(52px,5.6vw,92px);line-height:.95;color:var(--burgundy) }
.rhinory-meet-the-five .mf-total-t { font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(24px,2.4vw,34px);line-height:1.2;color:var(--ink-warm) }
.rhinory-meet-the-five .mf-total-foot { grid-column:1 / -1;font-size:14px;line-height:1.6;color:var(--rhino-warm);max-width:80ch }
.rhinory-meet-the-five .mf-block { margin-top:clamp(72px,9vw,128px);padding-top:clamp(48px,6vw,80px);border-top:1px solid var(--rule-warm-2) }
.rhinory-meet-the-five .mf-h3 { font-size:clamp(34px,4vw,60px);line-height:1.02 }
.rhinory-meet-the-five .mf-legend { display:flex;flex-wrap:wrap;gap:10px 30px;margin:0 0 8px;font-family:"Josefin Sans",sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--ink-warm-2) }
.rhinory-meet-the-five .mf-legend span { display:inline-flex;align-items:center;gap:12px }
.rhinory-meet-the-five .mf-key { position:relative;display:inline-block;width:30px;height:0;border-top:2px solid var(--burgundy) }
.rhinory-meet-the-five .mf-key::after { content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--burgundy);box-sizing:border-box }
.rhinory-meet-the-five .mf-key--interim { border-top-style:dashed;border-top-color:var(--acacia) }
.rhinory-meet-the-five .mf-key--interim::after { background:var(--card-2);border:2px solid var(--acacia) }
.rhinory-meet-the-five .mf-move,
.rhinory-meet-the-five .mf-poach,
.rhinory-meet-the-five .mf-arc { display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);padding:clamp(36px,4vw,56px) 0;border-top:1px solid var(--rule-warm-2) }
.rhinory-meet-the-five .mf-move:first-child { border-top:0 }
.rhinory-meet-the-five .mf-move-copy,
.rhinory-meet-the-five .mf-arc-copy { display:flex;flex-direction:column;align-items:flex-start;gap:14px }
.rhinory-meet-the-five .mf-move h4,
.rhinory-meet-the-five .mf-poach h4,
.rhinory-meet-the-five .mf-arc h4 { margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(28px,2.8vw,38px);line-height:1.08;color:var(--ink-warm) }
.rhinory-meet-the-five .mf-move-status { font-family:"Josefin Sans",sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.5;color:var(--burgundy) }
.rhinory-meet-the-five .mf-move p:not(.mf-move-status),
.rhinory-meet-the-five .mf-poach p:not(.mf-move-status),
.rhinory-meet-the-five .mf-arc p { font-size:16px;line-height:1.7 }
.rhinory-meet-the-five .mf-move .mf-note { font-size:14px;line-height:1.6;color:var(--rhino-warm) }
.rhinory-meet-the-five .mf-chart { margin:0 }
.rhinory-meet-the-five .mf-plot { position:relative;height:240px;margin:34px 10px 44px;border-bottom:1px solid var(--rule-warm-2) }
.rhinory-meet-the-five .mf-plot svg { position:absolute;inset:0;width:100%;height:100%;overflow:visible }
.rhinory-meet-the-five .mf-plot line { stroke:var(--burgundy);stroke-width:2;vector-effect:non-scaling-stroke }
.rhinory-meet-the-five .mf-plot line.is-interim { stroke:var(--acacia);stroke-dasharray:6 5 }
.rhinory-meet-the-five .mf-dot { position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--burgundy);box-sizing:border-box }
.rhinory-meet-the-five .mf-dot.is-interim { background:var(--card-2);border:2px solid var(--acacia) }
.rhinory-meet-the-five .mf-val { position:absolute;white-space:nowrap;transform:translate(var(--tx,-50%),var(--ty,calc(-100% - 12px)));font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;line-height:1;color:var(--ink-warm);font-variant-numeric:lining-nums }
.rhinory-meet-the-five .mf-val.is-below { --ty:12px }
.rhinory-meet-the-five .mf-val.is-first { --tx:-6px }
.rhinory-meet-the-five .mf-val.is-last { --tx:calc(-100% + 6px) }
.rhinory-meet-the-five .mf-val.is-interim { font-style:italic;color:var(--ink-warm-2) }
.rhinory-meet-the-five .mf-year { position:absolute;bottom:-28px;transform:translateX(-50%);font-family:"Josefin Sans",sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;line-height:1;color:var(--rhino-warm) }
.rhinory-meet-the-five .mf-year.is-first { transform:translateX(-6px) }
.rhinory-meet-the-five .mf-year.is-last { transform:translateX(calc(-100% + 6px)) }
.rhinory-meet-the-five .mf-series { display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 }
.rhinory-meet-the-five .mf-series div { display:flex;align-items:baseline;gap:7px }
.rhinory-meet-the-five .mf-series dt { font-family:"Josefin Sans",sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;line-height:1.6;color:var(--rhino-warm) }
.rhinory-meet-the-five .mf-series dd { margin:0;font-family:"Lora",Georgia,serif;font-size:14px;line-height:1.5;color:var(--ink-warm-2) }
.rhinory-meet-the-five .mf-series dd small { font-size:12px;color:var(--rhino-warm) }
.rhinory-meet-the-five .mf-series .is-interim dd { font-style:italic }
.rhinory-meet-the-five .mf-bars { list-style:none;margin:40px 0 34px;padding:0;display:flex;align-items:stretch;gap:clamp(4px,1vw,12px);height:220px;border-bottom:1px solid var(--rule-warm-2) }
.rhinory-meet-the-five .mf-bars li { position:relative;flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center }
.rhinory-meet-the-five .mf-bar { display:block;width:100%;background:rgba(82,0,0,.55) }
.rhinory-meet-the-five .mf-bars li.is-last .mf-bar { background:var(--burgundy) }
.rhinory-meet-the-five .mf-bar-v { margin-bottom:7px;font-family:"Cormorant Garamond",Georgia,serif;font-size:16px;line-height:1;color:var(--ink-warm);font-variant-numeric:lining-nums;white-space:nowrap }
.rhinory-meet-the-five .mf-bar-y { position:absolute;bottom:-24px;font-family:"Josefin Sans",sans-serif;font-size:10px;font-weight:600;letter-spacing:.1em;line-height:1;color:var(--rhino-warm) }
.rhinory-meet-the-five .mf-arcs { display:flex;flex-direction:column }
.rhinory-meet-the-five .mf-arc:first-child { border-top:0 }
.rhinory-meet-the-five .mf-arc-track { list-style:none;margin:0;padding:0;position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr) }
.rhinory-meet-the-five .mf-arc-track::before { content:"";position:absolute;left:0;right:0;top:5px;border-top:1px solid var(--rule-warm-2) }
.rhinory-meet-the-five .mf-arc-track li { position:relative;display:flex;flex-direction:column;gap:6px;padding:30px 18px 0 0 }
.rhinory-meet-the-five .mf-arc-track li::before { content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--card-2);border:2px solid var(--ink-warm-2);box-sizing:border-box }
.rhinory-meet-the-five .mf-arc-track li.is-peak::before { background:var(--acacia);border-color:var(--acacia) }
.rhinory-meet-the-five .mf-arc-track li.is-low::before { background:var(--burgundy);border-color:var(--burgundy) }
.rhinory-meet-the-five .mf-arc-yr { font-family:"Josefin Sans",sans-serif;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--rhino-warm) }
.rhinory-meet-the-five .mf-arc-val { font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(24px,2.2vw,30px);line-height:1.05;color:var(--ink-warm) }
.rhinory-meet-the-five .mf-arc-lbl { font-family:"Lora",Georgia,serif;font-size:14px;line-height:1.55;color:var(--ink-warm-2) }
.rhinory-meet-the-five .mf-arc-close { margin-top:clamp(32px,4vw,48px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--rule-warm-2);font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:clamp(24px,2.4vw,32px);line-height:1.3;color:var(--ink-warm);max-width:none }
.rhinory-meet-the-five .mf-pop-src { margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--rule-warm-2);font-size:14px;line-height:1.6;color:var(--rhino-warm);max-width:none }

@media (max-width:1024px) {
	.rhinory-meet-the-five .mf-threats-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
	.rhinory-meet-the-five .mf-threat:nth-child(odd) { padding-left:0;border-left:0 }
	.rhinory-meet-the-five .mf-threat:nth-child(n+3) { border-top:1px solid var(--rule-warm-2) }
}
@media (max-width:900px) {
	.rhinory-meet-the-five .mf-facts div:nth-child(n+2) { border-top:1px solid var(--rule-warm-2) }
}
@media (max-width:720px) {
	.rhinory-meet-the-five .mf-head,
	.rhinory-meet-the-five .mf-guardians .fd-wrap,
	.rhinory-meet-the-five .mf-bobko .fd-wrap { grid-template-columns:1fr }
	.rhinory-meet-the-five .mf-head { align-items:start }
}
@media (max-width:1024px) {
	.rhinory-meet-the-five .mf-count { grid-template-columns:repeat(3,minmax(0,1fr)) }
	.rhinory-meet-the-five .mf-count li:nth-child(3n+1) { padding-left:0;border-left:0 }
	.rhinory-meet-the-five .mf-count li:nth-child(n+4) { border-top:1px solid var(--rule-warm-2) }
}
@media (max-width:900px) {
	.rhinory-meet-the-five .mf-move,
	.rhinory-meet-the-five .mf-poach,
	.rhinory-meet-the-five .mf-arc { grid-template-columns:1fr }
}
@media (max-width:720px) {
	.rhinory-meet-the-five .mf-count { grid-template-columns:repeat(2,minmax(0,1fr)) }
	.rhinory-meet-the-five .mf-count li:nth-child(n) { padding-left:18px;border-left:1px solid var(--rule-warm-2);border-top:0 }
	.rhinory-meet-the-five .mf-count li:nth-child(odd) { padding-left:0;border-left:0 }
	.rhinory-meet-the-five .mf-count li:nth-child(n+3) { border-top:1px solid var(--rule-warm-2) }
	.rhinory-meet-the-five .mf-plot { height:200px }
	.rhinory-meet-the-five .mf-val.is-minor,
	.rhinory-meet-the-five .mf-year.is-minor,
	.rhinory-meet-the-five .mf-bar-v.is-minor { visibility:hidden }
	.rhinory-meet-the-five .mf-arc-track { grid-auto-flow:row;grid-auto-columns:auto }
	.rhinory-meet-the-five .mf-arc-track::before { left:5px;right:auto;top:6px;bottom:6px;border-top:0;border-left:1px solid var(--rule-warm-2) }
	.rhinory-meet-the-five .mf-arc-track li { padding:0 0 22px 30px }
	.rhinory-meet-the-five .mf-arc-track li::before { top:4px }
	.rhinory-meet-the-five .mf-total { grid-template-columns:1fr }
}
@media (max-width:560px) {
	.rhinory-meet-the-five .mf-yy { display:none }
}
@media (max-width:560px) {
	.rhinory-meet-the-five .mf-threats-grid { grid-template-columns:1fr }
	.rhinory-meet-the-five .mf-threat,
	.rhinory-meet-the-five .mf-threat + .mf-threat { padding:24px 0 6px;border-left:0 }
	.rhinory-meet-the-five .mf-threat + .mf-threat { border-top:1px solid var(--rule-warm-2) }
	.rhinory-meet-the-five .mf-stats { grid-template-columns:1fr }
	.rhinory-meet-the-five .mf-stats div,
	.rhinory-meet-the-five .mf-stats div + div { padding:16px 0;border-left:0 }
	.rhinory-meet-the-five .mf-stats div + div { border-top:1px solid var(--rule-warm-2) }
}

/* h4 is outside the shared :is(h1, h2, h3) rule, and theme.json gives every
   heading -0.01em tracking. The prototype's h4 inherits normal tracking, so
   restate it (measured: -0.38px at 1440 without this). */
.rhinory-meet-the-five .mf-move h4,
.rhinory-meet-the-five .mf-poach h4,
.rhinory-meet-the-five .mf-arc h4 { letter-spacing: normal; text-wrap: pretty; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
	.rhinory-foundation-landing .fd-row { grid-template-columns: 120px 1fr; align-items: start; }
	.rhinory-foundation-landing .fd-row .fd-logo { grid-row: 1 / 5; width: 120px; height: 92px; }
	.rhinory-foundation-landing .fd-row .fd-title,
	.rhinory-foundation-landing .fd-row .fd-where { align-self: auto; }
	.rhinory-foundation-landing .fd-row .fd-what { grid-column: 2; grid-row: auto; align-self: auto; margin-top: 14px; }
	.rhinory-foundation-landing .fd-row .fd-ext { grid-column: 2; grid-row: auto; align-self: auto; }
	.rhinory-foundation-landing .fd-sp { grid-template-columns: 160px 1fr 1fr; grid-template-rows: auto auto; gap: 6px 28px; }
	.rhinory-foundation-landing .fd-sp .fd-photo { grid-column: 1; grid-row: 1 / 3; }
	.rhinory-foundation-landing .fd-sp .fd-k { grid-column: 2 / 4; grid-row: 1; }
	.rhinory-foundation-landing .fd-sp .fd-status { grid-column: 2; grid-row: 2; align-self: end; }
	.rhinory-foundation-landing .fd-sp .fd-pop { grid-column: 3; grid-row: 2; align-self: end; }
}

@media (max-width: 1024px) {
	.rhinory-foundation-landing .fd-wrap,
	.rhinory-meet-the-five .fd-wrap { padding: 0 40px; }
}

@media (max-width: 900px) {
	.rhinory-foundation-landing .fd-bridge .fd-wrap,
	.rhinory-foundation-landing .fd-close-grid,
	.rhinory-foundation-landing .fd-head,
	.rhinory-foundation-landing .fd-named { grid-template-columns: 1fr; }
	.rhinory-foundation-landing .fd-impact-top { grid-template-columns: 1fr; align-items: start; }
	.rhinory-foundation-landing .fd-inits li { grid-template-columns: 1fr; gap: 4px; }
	.rhinory-foundation-landing .fd-mission { grid-template-columns: 1fr; gap: 16px; }
	.rhinory-foundation-landing .fd-bridge .fd-photo { order: -1; aspect-ratio: 16 / 10; }
	/* 08's three-cell fact row stacks here so it is not cramped in the 768
	   text column (CC pass, 2026-09-11). */
	.rhinory-meet-the-five .mf-facts { grid-template-columns: 1fr; }
	.rhinory-meet-the-five .mf-facts div { padding: 14px 0; }
	.rhinory-meet-the-five .mf-facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule-warm-2); }
}

/* The prototypes inherit two rules from the shared styles.css MOBILE FIT-UP
   block that the page-local CSS never restates, so they are easy to lose in a
   port and were: buttons shrink, and headings are allowed to break mid-word
   rather than push a column wide. Measured against 08 at 390, where the close
   CTA came out 53px tall instead of 48px without them. */
@media (max-width: 760px) {
	.rhinory-foundation-landing .fd-btn,
	.rhinory-meet-the-five .fd-btn { font-size: 11px; padding: 14px 18px; }
	.rhinory-foundation-landing h2,
	.rhinory-meet-the-five h2 { word-break: normal; overflow-wrap: anywhere; }
}

@media (max-width: 720px) {
	.rhinory-meet-the-five .mf-sp .fd-wrap,
	.rhinory-meet-the-five .mf-blake .fd-wrap,
	.rhinory-meet-the-five .mf-close-grid { grid-template-columns: 1fr; }
	.rhinory-meet-the-five .mf-photo { position: relative; top: auto; aspect-ratio: 4 / 3; max-height: none; }
	.rhinory-meet-the-five .mf-sp--flip .mf-photo { order: 0; }
	.rhinory-meet-the-five .mf-blake-photo { order: -1; }
	.rhinory-meet-the-five .mf-body { max-width: none; }
}

@media (max-width: 640px) {
	.rhinory-foundation-landing .fd-hero { min-height: min(78vh, 720px); }
	.rhinory-foundation-landing .fd-hero h1 { font-size: clamp(44px, 12.5vw, 60px); }
	.rhinory-foundation-landing .fd-hero-logo { width: min(300px, 76vw); }
	.rhinory-foundation-landing .fd-sp {
		grid-template-columns: 96px 1fr;
		grid-template-rows: auto auto auto;
		gap: 4px 18px;
		align-items: start;
		padding: 18px 0;
	}
	.rhinory-foundation-landing .fd-sp .fd-photo { grid-row: 1 / 4; aspect-ratio: 1 / 1; }
	.rhinory-foundation-landing .fd-sp .fd-k { grid-column: 2; grid-row: 1; }
	.rhinory-foundation-landing .fd-sp .fd-status { grid-column: 2; grid-row: 2; margin-top: 6px; }
	.rhinory-foundation-landing .fd-sp .fd-pop { grid-column: 2; grid-row: 3; margin-top: 6px; font-size: 30px; }
	.rhinory-foundation-landing .fd-sp .fd-title { font-size: clamp(23px, 6.6vw, 26px); }
	.rhinory-foundation-landing .fd-name .fd-photo { aspect-ratio: 16 / 10; }
	.rhinory-foundation-landing .fd-close h2 { font-size: clamp(50px, 14vw, 64px); }
	.rhinory-meet-the-five .mf-hero h1 { font-size: clamp(50px, 14vw, 68px); }
	.rhinory-meet-the-five .mf-close h2 { font-size: clamp(46px, 13vw, 64px); }
	.rhinory-foundation-landing .fd-ctas,
	.rhinory-meet-the-five .fd-ctas { width: 100%; }
	.rhinory-foundation-landing .fd-ctas .fd-btn,
	.rhinory-meet-the-five .fd-ctas .fd-btn { flex: 1 1 auto; justify-content: center; }
	.rhinory-foundation-landing .fd-hero .fd-ctas { width: auto; flex-direction: column; align-items: stretch; min-width: min(320px, 100%); }
}

@media (max-width: 560px) {
	.rhinory-foundation-landing .fd-wrap,
	.rhinory-meet-the-five .fd-wrap { padding: 0 22px; }
	.rhinory-foundation-landing .fd-row { grid-template-columns: 88px 1fr; gap: 0 18px; }
	.rhinory-foundation-landing .fd-row .fd-logo { width: 88px; height: 72px; padding: 8px 10px; }
}