/* ==========================================================================
   Field Guide to Heavy Metal
   Family colours arrive as --fg-* custom properties (printed in <head>, then
   updated by guide.js whenever another band is chosen).
   ========================================================================== */

:root {
	/* Grit: each tile wraps seamlessly (the noise filter covers exactly the tile). */
	--fg-grit-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 7 -5.3'/%3E%3C/filter%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='1' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23c%29' opacity='.18'/%3E%3Crect width='100%25' height='100%25' filter='url%28%23a%29' opacity='.55'/%3E%3C/svg%3E");
	--fg-grit-blotch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.009' numOctaves='4' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23b%29' opacity='.13'/%3E%3C/svg%3E");
	--fg-accent: #e7d6a8;
	--fg-ink: #6b5826;
	--fg-paper: #ece8de;
	--fg-ground: #0f0d0b;
	--fg-family-font: 'Jost', sans-serif;
	--fg-black: #070707;
	--fg-gutter: clamp(16px, 5vw, 72px);
	--fg-wide: var(--wp--style--global--wide-size, 1296px);
	--fg-ease: cubic-bezier(.22, 1, .36, 1);
	--fg-jost: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
}

html,
body {
	background-color: var(--fg-paper);
	transition: background-color 1s ease;
}
/* No block gap between the header, main and footer: the header sits over the
   hero on the front page, and every section sets its own spacing. */
.wp-site-blocks > * { margin-block: 0 !important; }
.wp-site-blocks { padding-top: 0 !important; padding-bottom: 0 !important; }
body {
	margin: 0;
	overflow-x: hidden;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='21' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 -2.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29' opacity='.1'/%3E%3C/svg%3E");
}
::selection { background: var(--fg-ink); color: #ffffff; }
:focus-visible { outline: 2px solid #0b0b0b; outline-offset: 2px; }
.fg-dark :focus-visible,
.fg-header :focus-visible { outline-color: #ffffff; }
[hidden] { display: none !important; }

/* Shared type ------------------------------------------------------------- */
.fg-small,
.fg-kicker,
.fg-eyebrow,
.fg-stats,
.fg-header__vol,
.fg-tree__hint { font-family: var(--fg-jost); text-transform: uppercase; }
.fg-small { margin: 0; font-size: 11px; letter-spacing: .14em; color: #b4afa4; }
.fg-kicker { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .18em; color: var(--fg-ink); }
.fg-accent { color: var(--fg-accent); }
.fg-dim { color: #8f8a80; }
.fg-muted { color: #55514a; font-size: 16px; }
.fg-lead { font-size: 22px; line-height: 1.5; }
.fg-section-h { margin: 0; font-size: clamp(40px, 5vw, 72px) !important; }
.fg-family-type .fg-display {
	font-family: var(--fg-family-font) !important;
	text-transform: none !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
}

/* Layout ------------------------------------------------------------------ */
.fg-main > *,
.fg-canvas > * { margin-block: 0 !important; }
.fg-canvas { margin: 0; }

/* Pattern sections ------------------------------------------------------ */
.fg-section { box-sizing: border-box; padding: clamp(64px, 8vw, 120px) var(--fg-gutter); }
.fg-section > * { margin: 0; max-width: 52rem; }
.fg-section > * + * { margin-top: 18px; }
.fg-statement > * { margin: 0; max-width: 52rem; }
.fg-statement > * + * { margin-top: 18px; }
.fg-statement .wp-block-buttons { margin-top: 28px; }
.fg-split { gap: clamp(32px, 5vw, 80px) !important; align-items: end; }
.fg-split .wp-block-column > * { margin: 0; }
.fg-split .wp-block-column > * + * { margin-top: 18px; }
.fg-dark .fg-lead { color: #ece8df; }
.fg-page { box-sizing: border-box; width: min(var(--fg-wide), 100%); margin: 0 auto !important; padding: clamp(56px, 8vw, 120px) var(--fg-gutter); }
.fg-page > * + * { margin-top: 1.25rem; }
.fg-pad-top { padding-top: 24px; }
.fg-prose > * { max-width: 44rem; }

/* Buttons ----------------------------------------------------------------- */
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: #0b0b0b; border-color: #0b0b0b; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #0b0b0b; color: #ffffff; }
.fg-dark .wp-block-button.is-style-outline > .wp-block-button__link { color: #ffffff; border-color: #ffffff; }
.fg-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: rgba(255, 255, 255, .14); }
.fg-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: #ffffff; color: #070707; border-color: #ffffff; }
.fg-btn-shadow > .wp-block-button__link { box-shadow: 6px 6px 0 var(--fg-ink); }

/* Header ------------------------------------------------------------------ */
/* The header sticks: transparent over the hero, a black gritty bar once the page
   scrolls, tucked away while scrolling down, back on any scroll up (header.js). */
.fg-header {
	position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50;
	isolation: isolate;
	background: var(--fg-black); color: #ffffff;
	transition: transform .35s var(--fg-ease), background-color .3s ease, box-shadow .3s ease;
}
.fg-header--overlay { position: fixed; left: 0; right: 0; background: transparent; }
.fg-header.is-scrolled { background: var(--fg-black); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.fg-header.is-scrolled::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
	background-size: 256px 256px;
	background-image: var(--fg-grit-fine);
}
.fg-header.is-scrolled::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
	background: var(--fg-accent);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
}
.fg-header.is-tucked { transform: translateY(calc(-100% - 4px)); }
.fg-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 26px var(--fg-gutter); transition: padding .3s var(--fg-ease); }
.fg-header.is-scrolled .fg-header__inner { padding-block: 12px; }
.has-modal-open .fg-header { transform: none !important; }
.fg-header__inner > * { margin: 0 !important; }
.fg-header a { color: #ffffff; text-decoration: none; }
.fg-header .wp-block-navigation__container { gap: 22px; }
.fg-header .wp-block-navigation-item__content { padding: 12px 0; }
.fg-header__title { text-align: center; }
.fg-header__brand { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; }
.fg-header__brand > * { margin: 0 !important; }
.fg-header__logo,
.fg-footer__logo { flex: none; line-height: 0; }
.fg-header__inner > .fg-header__logo { justify-self: end; }
.fg-header__logo img { display: block; width: 36px; height: auto; transition: width .3s var(--fg-ease); }
.fg-header.is-scrolled .fg-header__logo img { width: 28px; }
.fg-footer__brand { display: flex; align-items: center; gap: 14px; }
.fg-footer__brand > * { margin: 0 !important; }
.fg-footer__logo img { display: block; width: 44px; height: auto; }
.fg-header__vol { text-align: right; font-size: 13px; font-weight: 600; letter-spacing: .14em; }
.fg-header .wp-block-navigation__responsive-container-open { color: #ffffff; }
@media (max-width: 600px) {
	.fg-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; padding-block: 18px; }
	.fg-header__title { font-size: 12px !important; letter-spacing: .14em !important; }
	.fg-header__brand { gap: 8px; }
	.fg-header__logo img,
	.fg-header.is-scrolled .fg-header__logo img { width: 26px; }
}

/* Mobile menu --------------------------------------------------------------
   The core Navigation block's overlay, restyled: a gritty black screen, huge
   numbered links that slide in, and a family-coloured shard along the bottom. */
.fg-header .wp-block-navigation__responsive-container-open {
	width: 44px; height: 44px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: 2px solid #ffffff; color: #ffffff; background: transparent;
	transition: background-color .2s ease, color .2s ease;
}
.fg-header .wp-block-navigation__responsive-container-open:hover { background: #ffffff; color: #070707; }
.fg-header .wp-block-navigation__responsive-container-open svg { width: 24px; height: 24px; fill: currentColor; }
.fg-header .wp-block-navigation__responsive-container.is-menu-open {
	isolation: isolate;
	overflow: hidden;
	padding: 0 !important;
	background: #070707 !important;
	color: #ffffff !important;
	animation: fg-menu-in .45s var(--fg-ease) both;
}
.fg-header .wp-block-navigation__responsive-container.is-menu-open::after {
	content: "Field guide to heavy metal";
	position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
	height: 34%;
	display: flex; align-items: flex-end; justify-content: flex-end;
	padding: 0 var(--fg-gutter) 28px;
	box-sizing: border-box;
	background: var(--fg-accent);
	clip-path: polygon(0% 62%, 100% 0%, 100% 100%, 0% 100%);
	font-family: var(--fg-jost); font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
	color: #070707;
	animation: fg-shard-in .6s .15s var(--fg-ease) both;
}
.fg-header .is-menu-open .wp-block-navigation__responsive-close { max-width: none; height: 100%; }
.fg-header .is-menu-open .wp-block-navigation__responsive-dialog { height: 100%; display: flex; flex-direction: column; }
.fg-header .is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute; top: 18px; right: var(--fg-gutter);
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 2px solid #ffffff; color: #ffffff;
}
.fg-header .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; fill: currentColor; }
.fg-header .is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	max-width: 1100px;
	box-sizing: border-box;
	padding: clamp(96px, 14vh, 160px) var(--fg-gutter) 0 !important;
	align-items: stretch !important;
}
.fg-header .is-menu-open .wp-block-navigation__container {
	counter-reset: fg-nav;
	width: 100%;
	gap: 0 !important;
	align-items: stretch !important;
}
.fg-header .is-menu-open .wp-block-navigation-item {
	counter-increment: fg-nav;
	width: 100%;
	border-bottom: 1px solid #2c2c2c;
	animation: fg-link-in .55s var(--fg-ease) both;
}
.fg-header .is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: .08s; }
.fg-header .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .14s; }
.fg-header .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .2s; }
.fg-header .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .26s; }
.fg-header .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: .32s; }
.fg-header .is-menu-open .wp-block-navigation-item__content {
	display: flex !important; align-items: baseline; gap: 16px;
	width: 100%;
	padding: 20px 0 !important;
	font-family: var(--fg-jost) !important; font-weight: 800 !important;
	font-size: clamp(32px, 9vw, 72px) !important; line-height: .95; letter-spacing: -.01em !important;
	overflow-wrap: anywhere;
	text-transform: uppercase;
	color: #ffffff !important;
	transition: color .2s ease, transform .3s var(--fg-ease);
}
.fg-header .is-menu-open .wp-block-navigation-item__content::before {
	content: "0" counter(fg-nav);
	flex: none;
	font-size: 13px; font-weight: 600; letter-spacing: .16em;
	color: var(--fg-accent);
	transform: translateY(-1.6em);
}
.fg-header .is-menu-open .wp-block-navigation-item__content:hover,
.fg-header .is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--fg-accent) !important;
	transform: translateX(8px);
}
@keyframes fg-menu-in { from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes fg-shard-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fg-link-in { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

/* Dark surfaces ----------------------------------------------------------- */
.fg-dark { color: #ece8df; }
.fg-dark h1, .fg-dark h2, .fg-dark h3, .fg-dark h4 { color: #ffffff; }
.fg-dark a { color: inherit; }

/* Stage hero -------------------------------------------------------------- */
.fg-hero {
	--fg-shard-left: 70%;
	--fg-shard-right: 34%;
	--fg-shard-bottom: 90%;
	position: relative;
	isolation: isolate;
	height: clamp(640px, var(--fg-hero-h, 100vh), 1040px);
	overflow: hidden;
	color: #ffffff;
}
.fg-hero__photo {
	position: absolute; inset: 0;
	background: var(--fg-ground);
	/* The photo stops just under the shard's top edge, hidden by the shard, so the only
	   edge against the page below is the shard's. Sharing that edge made it shimmer as the
	   WebGL stage redrew. */
	clip-path: polygon(0% 0%, 100% 0%, 100% calc(var(--fg-shard-right) + 4%), 0% var(--fg-shard-left));
	transition: background-color 1s ease;
}
.fg-hero__img,
.fg-hero__stage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-hero__stage-editor { position: absolute; inset: 0; background: radial-gradient(ellipse 42% 26% at 50% 62%, var(--fg-accent), transparent 72%), var(--fg-ground); }
.fg-hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fg-hero__gl.is-overlay { mix-blend-mode: screen; }
.fg-hero__dim { position: absolute; inset: 0; background: #000000; opacity: var(--fg-dim, .2); pointer-events: none; }
.fg-hero__shard {
	position: absolute; inset: 0;
	background: var(--fg-black);
	clip-path: polygon(0% var(--fg-shard-left), 100% var(--fg-shard-right), 100% var(--fg-shard-bottom));
}
.fg-hero__copy {
	position: absolute; z-index: 2;
	right: var(--fg-gutter);
	bottom: calc(100% - var(--fg-shard-bottom) + 9%);
	max-width: min(800px, calc(100% - 2 * var(--fg-gutter)));
	display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
	text-align: right;
}
.fg-hero__copy > *,
.fg-hero__copy .block-editor-inner-blocks > .block-editor-block-list__layout > * { margin: 0 !important; }
.fg-hero__copy .block-editor-block-list__layout { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.fg-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .2em; color: var(--fg-accent); }
.fg-hero__title { font-size: clamp(52px, 7vw, 112px) !important; line-height: .88 !important; color: #ffffff !important; }
.fg-hero__strap { font-family: var(--fg-jost); font-weight: 600; font-size: clamp(16px, 1.7vw, 25px); line-height: 1.25; letter-spacing: .05em; text-transform: uppercase; }
.fg-stats { margin: 0; font-size: 12px; letter-spacing: .16em; color: #55514a; }
.fg-dark .fg-stats { color: #bdbdbd; }
.fg-hero .wp-block-buttons { margin-top: 8px !important; }
.fg-hero .wp-block-button__link { padding: 15px 30px; font-size: 15px; letter-spacing: .18em; }
@media (max-width: 700px) {
	.fg-hero__photo { clip-path: polygon(0% 0%, 100% 0%, 100% 38%, 0% 49%); }
	.fg-hero__shard { clip-path: polygon(0% 45%, 100% 34%, 100% 94%, 0% 88%); }
	.fg-hero__copy { bottom: 15%; left: var(--fg-gutter); }
}

/* Angled slab ------------------------------------------------------------- */
.fg-slab {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	padding: calc(48px + var(--fg-slab-top, 0px)) var(--fg-gutter) calc(48px + var(--fg-slab-bottom, 0px));
	color: #ece8df;
}
/* Grit: fine speckle, dust and mottled blotches, for every black surface. */
.fg-slab.has-scratches::before,
.fg-grit::before,
.fg-bandcard__link::before,
.fg-header .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	pointer-events: none;
	background-size: 1000px 1000px, 256px 256px;
	background-image: var(--fg-grit-blotch), var(--fg-grit-fine);
}
.fg-grit::before { z-index: 0; }
.fg-slab__inner { max-width: var(--fg-wide); margin: 0 auto; }
.fg-slab__inner > * { margin-block: 0; }
.fg-slab__inner > * + * { margin-top: 1.25rem; }
.fg-footer { padding-top: calc(28px + var(--fg-slab-top, 0px)); padding-bottom: 32px; }
.fg-footer__row { gap: 12px 40px; font-family: var(--fg-jost); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #b4afa4; }
.fg-footer__row p { margin: 0; }
.fg-footer a { color: var(--fg-accent); }

/* Family tree ------------------------------------------------------------- */
.fg-tree { position: relative; box-sizing: border-box; padding: 48px var(--fg-gutter) 40px; }
.fg-tree__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.fg-tree__intro > * { margin: 0; }
.fg-tree__intro > * + * { margin-top: 10px; }
.fg-tree__eras { display: flex; gap: 6px; flex-wrap: wrap; }
.fg-chip {
	min-height: 44px; padding: 0 14px; cursor: pointer;
	border: 2px solid #8f8a7f; background: transparent; color: #0b0b0b;
	font-family: var(--fg-jost); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.fg-chip:hover { border-color: #0b0b0b; }
.fg-chip[aria-current="true"],
.fg-chip[aria-pressed="true"] { background: #0b0b0b; border-color: #0b0b0b; color: #ffffff; }
.fg-tree__frame { border: 2px solid #0b0b0b; background: rgba(255, 255, 255, .4); }
.fg-tree__empty { margin: 0; padding: 24px; }
.fg-tree__fallback { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; padding: 24px; }
.fg-tree.is-live .fg-tree__fallback { display: none; }
.fg-tree__fam h3 { margin: 0 0 10px; font-size: 16px !important; letter-spacing: .04em; }
.fg-tree__fam h3 a { color: var(--fam-ink); text-decoration: none; }
.fg-tree__fam ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.fg-tree__fam a { color: #1a1916; }
.fg-tree__fam span { color: #55514a; font-size: 13px; }
.fg-tree__grid { display: grid; grid-template-columns: minmax(118px, 190px) minmax(0, 1fr); }
.fg-tree__labels { border-right: 1px solid #b9b4a8; }
.fg-tree__axis { height: 32px; border-bottom: 1px solid #b9b4a8; }
.fg-tree__lane {
	display: flex; flex-direction: column; justify-content: center; gap: 4px;
	width: 100%; padding: 14px; box-sizing: border-box; cursor: pointer;
	border: 0; border-bottom: 1px solid #d3cec3; background: transparent; text-align: left;
}
.fg-tree__lane:hover { background: rgba(0, 0, 0, .05); }
.fg-tree__lane.is-on,
.fg-tree__row.is-on { background: rgba(0, 0, 0, .06); }
.fg-tree__lane-name { font-family: var(--fg-jost); font-weight: 600; font-size: 17px; line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; color: var(--n-ink); }
.fg-family-type .fg-tree__lane-name { font-family: var(--n-font); font-weight: 400; letter-spacing: 0; text-transform: none; }
.fg-tree__lane-count { font-family: var(--fg-jost); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #55514a; }
.fg-tree__scroll { overflow-x: auto; overflow-y: hidden; }
.fg-tree__stage { position: relative; min-width: 760px; overflow: hidden; }
.fg-tree__row { position: absolute; left: 0; right: 0; border-bottom: 1px solid #d3cec3; }
.fg-tree__row-tag { display: none; }
/* Phones: the lane-name column goes; each lane carries a small name pinned to the left edge instead. */
@media (max-width: 700px) {
	.fg-tree__grid { grid-template-columns: minmax(0, 1fr); }
	.fg-tree__labels { display: none; }
	.fg-tree__stage { min-width: 640px; }
	.fg-tree__row-tag {
		display: inline-block; position: sticky; left: 0; z-index: 1;
		margin-top: 4px; padding: 2px 8px 2px 10px;
		font-family: var(--fg-jost); font-weight: 600; font-size: 10px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase;
		color: var(--n-ink); background: var(--fg-paper, #f2f0ea); pointer-events: none;
		max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.fg-tree__axis { display: none; }
}
.fg-tree__ticks { position: absolute; inset: 0; pointer-events: none; }
.fg-tick { position: absolute; top: 0; bottom: 0; border-left: 1px dashed #cfcabe; }
.fg-tick.is-decade { border-left-color: #a9a497; }
.fg-tick span { position: absolute; top: 8px; left: 6px; font-family: var(--fg-jost); font-size: 12px; color: #55514a; }
.fg-tree__edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.fg-edge { transition: d .9s var(--fg-ease), stroke .4s ease, stroke-width .4s ease, opacity .5s ease; }
.fg-node {
	position: absolute; z-index: 1;
	height: 44px; min-width: 44px; margin-top: -22px; padding: 0 4px;
	display: flex; align-items: center; gap: 8px;
	border: 0; background: transparent; cursor: pointer;
	transition: left .9s var(--fg-ease), top .9s var(--fg-ease), transform .9s var(--fg-ease), opacity .5s ease;
}
.fg-node__dot {
	flex: none; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%;
	border: 2px solid var(--n-ink); background: #f7f5f0;
	transition: transform .2s ease, background-color .4s ease, box-shadow .4s ease;
}
.fg-node:hover .fg-node__dot { transform: scale(1.25); }
.fg-node.in-line .fg-node__dot { background: var(--n-ink); }
.fg-node.is-sel .fg-node__dot { width: 18px; height: 18px; background: #0b0b0b; box-shadow: 0 0 0 4px var(--n-accent), 0 0 0 6px #0b0b0b; }
.fg-node__label {
	white-space: nowrap;
	font-family: var(--fg-jost); font-weight: 500; font-size: 14px; letter-spacing: .05em; text-transform: uppercase;
	color: #2e2c28;
	text-shadow: 0 0 4px var(--fg-paper), 0 0 4px var(--fg-paper);
}
.fg-node.in-line .fg-node__label { color: var(--n-ink); }
.fg-node.is-sel .fg-node__label { color: #0b0b0b; font-weight: 800; }
/* Overview: every band is named; key bands full size, the rest smaller and lighter. A
   selected band's name turns bold at the same size, so selecting never shifts the layout. */
.fg-tree__stage.is-overview .fg-node:not(.is-key) .fg-node__label { font-size: 11px; font-weight: 500; letter-spacing: .06em; color: #6f6b62; }
/* A halo in the page colour lifts names off the influence lines that cross them. */
.fg-node__label { text-shadow: 0 0 2px var(--fg-paper), 0 0 2px var(--fg-paper), 0 0 4px var(--fg-paper), 0 0 6px var(--fg-paper) !important; }
.fg-tree__stage.is-overview .fg-node:not(.is-key).in-line .fg-node__label { color: var(--n-ink); }
.fg-tree__stage.is-overview .fg-node:not(.is-key).is-sel .fg-node__label { color: #0b0b0b; font-weight: 800; }
.fg-tree__hint { margin: 12px 0 0; font-size: 12px; letter-spacing: .06em; text-transform: none; color: #55514a; }

/* Field card -------------------------------------------------------------- */
.fg-card { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 64px); color: #ece8df; scroll-margin-top: 24px; }
.fg-card p { margin: 0; }
.fg-card__listen { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.fg-card__plate { display: flex; justify-content: space-between; gap: 12px; font-family: var(--fg-jost); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #b4afa4; }
.fg-card__listenbox { display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid #4a463e; background: #101010; }
.fg-card__listen-h { margin: 0 0 6px !important; font-size: clamp(24px, 2.4vw, 34px) !important; line-height: 1 !important; color: #ffffff; }
.fg-btn-solid,
.fg-btn-line {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	min-height: 56px; box-sizing: border-box; text-decoration: none;
	font-family: var(--fg-jost); text-transform: uppercase;
}
.fg-btn-solid { padding: 0 22px; background: #ffffff; color: #070707 !important; font-size: 15px; font-weight: 600; letter-spacing: .12em; }
.fg-btn-solid:hover { background: var(--fg-accent); }
.fg-btn-line { padding: 10px 22px; border: 2px solid #ffffff; color: #ffffff !important; }
.fg-btn-line:hover { background: rgba(255, 255, 255, .12); }
.fg-btn-line__stack { display: flex; flex-direction: column; gap: 2px; }
.fg-btn-line [data-fg="album"] { font-size: 15px; font-weight: 600; letter-spacing: .08em; }
.fg-card__more { margin-top: 14px !important; padding-top: 18px; border-top: 1px solid #333333; font-family: var(--fg-jost); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.fg-card__kinlinks { list-style: none; margin: 0; padding: 0; }
.fg-card__kinlinks li { border-bottom: 1px solid #222222; }
.fg-card__kinlinks a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; color: #ece8df; text-decoration: none; font-family: var(--fg-jost); font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.fg-card__kinlinks a:hover { color: var(--fg-accent); }
.fg-card__note-small { font-size: 13px; line-height: 1.5; color: #8f8a80; }
.fg-card__main { flex: 1.2 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.fg-card__order { font-family: var(--fg-jost); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.fg-card__name { margin: 0 !important; color: #ffffff !important; font-size: clamp(48px, 5.5vw, 88px) !important; line-height: .9 !important; }
.fg-card__facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 14px 24px; font-size: 15px; }
.fg-card__facts dt,
.fg-card__marks dt { font-family: var(--fg-jost); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #b4afa4; }
.fg-card__facts dd { margin: 6px 0 0; line-height: 1.4; }
.fg-card__notebox { display: flex; flex-direction: column; gap: 14px; padding: 22px 0; border-top: 1px solid #333333; border-bottom: 1px solid #333333; }
.fg-card__note { font-size: 21px; line-height: 1.55; color: #ece8df; }
.fg-card__note > * + * { margin-top: .8em !important; }
.fg-card__note a { text-decoration: underline; }
.fg-byline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fg-byline__avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #262626; border: 2px solid var(--fg-accent, #4a463e); font-family: var(--fg-jost); font-weight: 800; font-size: 14px; color: #bdbdbd; }
.fg-byline__text { display: flex; flex-direction: column; gap: 2px; }
.fg-byline__text a { font-family: var(--fg-jost); font-weight: 600; font-size: 15px; color: #ffffff; text-decoration: none; }
.fg-byline__draft { margin-left: auto; padding: 4px 10px; border: 1px solid var(--fg-accent); font-family: var(--fg-jost); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-accent); }
.fg-card__group { display: flex; flex-direction: column; gap: 8px; }
.fg-card__lineage,
.fg-card__kin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fg-chip-dark {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; box-sizing: border-box;
	border: 1px solid #4a463e; color: #ece8df; text-decoration: none;
	font-family: var(--fg-jost); font-weight: 500; font-size: 15px; letter-spacing: .05em; text-transform: uppercase;
}
.fg-chip-dark:hover { border-color: #ffffff; }
.fg-chip-dark[aria-current] { border-color: var(--fg-accent); color: #ffffff; }
.fg-arrow { color: #8a857b; }
.fg-card__marks { border: 1px solid #4a463e; padding: 20px 22px; }
.fg-card__marks-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; font-family: var(--fg-jost); text-transform: uppercase; }
.fg-card__marks-head .fg-accent { font-size: 12px; font-weight: 600; letter-spacing: .16em; }
.fg-card__marks-head .fg-dim { font-size: 11px; letter-spacing: .12em; }
.fg-card__marks dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px 28px; }
.fg-card__marks dd { margin: 4px 0 0; font-size: 16px; line-height: 1.45; }
.fg-card--empty { padding: 24px; border: 1px dashed #4a463e; }

/* Contributors ------------------------------------------------------------ */
.fg-crew { box-sizing: border-box; padding: clamp(64px, 8vw, 120px) var(--fg-gutter) 24px; }
.fg-crew__head { margin-bottom: 32px; }
.fg-crew__head > * { margin: 0; }
.fg-crew__head > * + * { margin-top: 16px; }
.fg-crew__head p:not(.fg-kicker) { max-width: 40rem; font-size: 18px; color: #2e2c28; }
.fg-crew__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.fg-crew__card { display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 2px solid #0b0b0b; background: rgba(255, 255, 255, .45); }
.fg-byline__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-crew__portrait { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden; background: #d8d3c8; font-family: var(--fg-jost); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #55514a; }
.fg-crew__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-crew__name { margin: 0; font-family: var(--fg-jost); font-weight: 800; font-size: 20px !important; line-height: 1.1; text-transform: uppercase; color: #0b0b0b; }
.fg-crew__name a { color: inherit; text-decoration: none; }
.fg-crew__bio { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: #55514a; }
.fg-crew__beat { margin: auto 0 0; padding-top: 12px; border-top: 1px solid #b9b4a8; font-family: var(--fg-jost); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-ink); }

/* Call to action ---------------------------------------------------------- */
.fg-cta { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-end; box-sizing: border-box; padding: clamp(56px, 7vw, 100px) var(--fg-gutter) clamp(72px, 9vw, 140px); }
.fg-cta > * { margin: 0 !important; }
.fg-cta__text { flex: 1 1 480px; min-width: 0; }
.fg-cta__text > * { margin: 0; }
.fg-cta__text p { margin-top: 20px; max-width: 36rem; font-size: 19px; color: #2e2c28; }
.fg-cta__h { font-size: clamp(44px, 5.5vw, 88px) !important; line-height: .92 !important; }

/* Family and contributor pages ------------------------------------------- */
.fg-family-list { margin-top: 40px !important; }
.fg-family-list__item { border-top: 2px solid #0b0b0b; padding-top: 14px; }
.fg-family-list__name { font-size: 26px !important; }
.fg-family-list__name a { color: #0b0b0b; text-decoration: none; }
.fg-person__portrait img { width: 100%; height: auto; }

/* Motion ------------------------------------------------------------------ */
/* Band index -------------------------------------------------------------- */
.fg-index { box-sizing: border-box; width: min(var(--fg-wide), 100%); margin: 0 auto; padding: 32px var(--fg-gutter) 80px; }
.fg-page .fg-index { width: auto; padding: 24px 0 0; }
.fg-index__head { max-width: 820px; }
.fg-index__head > * { margin: 0; }
.fg-index__head > * + * { margin-top: 12px; }
.fg-index__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 36px; padding-top: 18px; border-top: 2px solid #0b0b0b; }
.fg-index__modes { display: flex; flex: none; border: 2px solid #0b0b0b; }
.fg-index__mode {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
	font-family: var(--fg-jost); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: #0b0b0b; text-decoration: none; white-space: nowrap;
}
.fg-index__mode + .fg-index__mode { border-left: 2px solid #0b0b0b; }
.fg-index__mode[aria-current="true"] { background: #0b0b0b; color: #ffffff; }
.fg-index__mode:not([aria-current="true"]):hover { background: rgba(0, 0, 0, .07); }
.fg-index__filters { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fg-index__filters[hidden] { display: none; }
.fg-index .fg-chip { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; }
.fg-chip--letter { min-width: 44px; padding: 0 6px; }
.fg-chip.is-empty { opacity: .28; border-style: dashed; cursor: default; }
.fg-index__count { margin: 22px 0 14px; font-family: var(--fg-jost); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #55514a; }
.fg-index__empty { margin: 0; padding: 32px 0; font-size: 18px; }
.fg-index__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 20px; }
.fg-bandcard { margin: 0; min-width: 0; }
.fg-bandcard[hidden] { display: none; }
.fg-bandcard.is-in { animation: fg-card-in .5s var(--fg-ease) both; }
@keyframes fg-card-in { from { opacity: 0; transform: translateY(14px); } }
.fg-bandcard__link {
	position: relative; isolation: isolate;
	display: flex; flex-direction: column; height: 100%;
	background: #0b0b0b; color: #ece8df; text-decoration: none;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
	transition: transform .35s var(--fg-ease);
}
.fg-bandcard__link::before { z-index: 0; opacity: .8; }
.fg-bandcard__link:hover { transform: translateY(-4px); }
.fg-bandcard__link:focus { outline: none; }
.fg-bandcard__link:focus-visible { box-shadow: inset 0 0 0 3px var(--n-accent, #ffffff); }
.fg-bandcard__media {
	position: relative; z-index: 1; display: block; aspect-ratio: 4 / 3; overflow: hidden;
	background:
		radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--n-accent) 28%, transparent), transparent 60%),
		repeating-linear-gradient(-58deg, transparent 0 22px, rgba(255, 255, 255, .025) 22px 23px);
}
.fg-bandcard__media::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
	background: var(--n-accent);
	clip-path: polygon(0 75%, 100% 0, 100% 100%, 0 100%);
	transform-origin: left; transition: transform .45s var(--fg-ease);
}
.fg-bandcard__link:hover .fg-bandcard__media::after { transform: scaleY(1.6); }
.fg-bandcard__media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	filter: grayscale(1) contrast(1.15) brightness(.8);
	transition: filter .5s ease, transform .8s var(--fg-ease);
}
.fg-bandcard__link:hover .fg-bandcard__media img { filter: grayscale(0) contrast(1.05) brightness(.9); transform: scale(1.04); }
.fg-bandcard__year {
	position: absolute; left: 14px; bottom: 10px;
	font-family: var(--fg-jost); font-weight: 800; font-size: clamp(56px, 5vw, 76px); line-height: .9; letter-spacing: -.02em;
	color: transparent; -webkit-text-stroke: 1.5px var(--n-accent);
	transition: color .35s ease;
}
.fg-bandcard.has-image .fg-bandcard__year { color: var(--n-accent); -webkit-text-stroke: 0; text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.fg-bandcard__link:hover .fg-bandcard__year { color: var(--n-accent); }
.fg-bandcard__plate { position: absolute; top: 12px; right: 14px; font-family: var(--fg-jost); font-size: 11px; font-weight: 600; letter-spacing: .16em; color: #8f8a80; }
.fg-bandcard__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 30px; }
.fg-bandcard__family { font-family: var(--fg-jost); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--n-accent); }
.fg-bandcard__name { font-family: var(--n-font, var(--fg-jost)); font-size: clamp(24px, 2.1vw, 32px); line-height: 1.02; color: #ffffff; overflow-wrap: anywhere; }
.fg-bandcard__meta { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: #bdb8ad; }
.fg-bandcard__record { font-style: italic; color: #ece8df; }
.fg-bandcard__writer { margin-top: auto; padding-top: 10px; font-family: var(--fg-jost); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #8f8a80; }
@media (max-width: 600px) {
	.fg-index__bar { gap: 12px; }
	.fg-index__filters {
		flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px;
		scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
	}
	.fg-index__filters::-webkit-scrollbar { display: none; }
	.fg-index__filters .fg-chip { flex: none; }
	.fg-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.fg-bandcard__media { aspect-ratio: 1; }
	.fg-bandcard__year { left: 10px; font-size: 42px; }
	.fg-bandcard__body { padding: 12px 12px 24px; gap: 6px; }
	.fg-bandcard__name { font-size: 20px; }
	.fg-bandcard__meta { font-size: 12.5px; }
	.fg-bandcard__meta > span:last-child { display: none; }
	.fg-bandcard__link { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
}

/* Deep dive (band page content) ------------------------------------------- */
.fg-deep { box-sizing: border-box; padding: clamp(56px, 7vw, 96px) var(--fg-gutter) clamp(64px, 8vw, 112px); }
.fg-deep.fg-deep > * { margin-block: 0; }
.fg-deep.fg-deep > * + * { margin-block-start: 1.3rem; }
.fg-deep.fg-deep > * + :is(.fg-kicker, .fg-review, .wp-block-pullquote, .fg-tracks, .fg-timeline, .fg-listen, .fg-video-pair, .wp-block-embed),
.fg-deep.fg-deep > :is(.fg-review, .fg-tracks, .fg-timeline, .fg-listen, .fg-video-pair, .wp-block-pullquote, .wp-block-embed) + * { margin-block-start: clamp(48px, 6vw, 80px); }
.fg-deep.fg-deep > .fg-kicker + * { margin-block-start: 8px; }
.fg-deep.fg-deep > .fg-review + .fg-review { margin-block-start: 0; }
.fg-deep.fg-deep > .fg-deep__h + .fg-review { margin-block-start: 24px; }
.fg-deep .wp-block-embed,
.fg-slab .wp-block-embed { margin-left: 0; margin-right: 0; }
.fg-deep.fg-deep > .alignfull { margin-block: clamp(56px, 7vw, 96px) !important; margin-inline: calc(-1 * var(--fg-gutter)) !important; max-width: none !important; width: auto; }
.fg-deep__h { margin: 0; font-family: var(--fg-jost) !important; font-weight: 800 !important; font-size: clamp(32px, 3.6vw, 52px) !important; line-height: 1 !important; letter-spacing: .01em; text-transform: uppercase; color: #0b0b0b; }
.fg-deep .fg-lead { font-size: clamp(20px, 2vw, 24px); line-height: 1.5; color: #1a1916; }
.fg-deep figcaption,
.fg-video-pair figcaption { margin-top: 10px; font-family: var(--fg-jost); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #55514a; }
.fg-slab figcaption { color: #b4afa4; }
.fg-watch .fg-slab__inner { max-width: 1040px; }
.fg-watch .fg-lead { color: #d9d4ca; max-width: 720px; }

/* Field card: link to the deep dive */
.fg-deep-cta {
	position: relative; display: flex; align-items: center; gap: 20px;
	padding: 22px 24px 26px; background: var(--fg-accent); color: #0b0b0b; text-decoration: none;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
	transition: transform .35s var(--fg-ease), filter .3s ease;
}
.fg-deep-cta[hidden] { display: none; }
.fg-dark .fg-deep-cta,
.fg-card .fg-deep-cta { color: #0b0b0b; }
.fg-deep-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 45%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 120% 0; transition: background-position .9s var(--fg-ease); pointer-events: none; }
.fg-deep-cta:hover { transform: translateY(-3px); }
.fg-deep-cta:hover::before { background-position: -60% 0; }
.fg-deep-cta:focus { outline: none; }
.fg-deep-cta:focus-visible { box-shadow: inset 0 0 0 3px #0b0b0b; }
.fg-deep-cta__text { position: relative; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.fg-deep-cta__kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fg-jost); font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.fg-deep-cta__kicker::before { content: ""; width: 22px; height: 3px; background: #0b0b0b; }
.fg-deep-cta__title { font-family: var(--fg-jost); font-weight: 800; font-size: clamp(24px, 2.4vw, 34px); line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; color: #0b0b0b !important; }
.fg-deep-cta__meta { font-family: var(--fg-jost); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .78; }
.fg-deep-cta__meta:empty { display: none; }
.fg-deep-cta__arrow { position: relative; flex: none; width: 56px; height: 56px; background: #0b0b0b; transition: transform .35s var(--fg-ease); }
.fg-deep-cta__arrow::before { content: ""; position: absolute; left: 15px; right: 17px; top: 50%; height: 3px; margin-top: -1.5px; background: var(--fg-accent); }
.fg-deep-cta__arrow::after { content: ""; position: absolute; right: 16px; top: 50%; width: 12px; height: 12px; margin-top: -7.5px; border-top: 3px solid var(--fg-accent); border-right: 3px solid var(--fg-accent); transform: rotate(45deg); }
.fg-deep-cta:hover .fg-deep-cta__arrow { transform: translateX(6px); }
@media (max-width: 600px) {
	.fg-deep-cta { padding: 18px 18px 22px; gap: 14px; }
	.fg-deep-cta__arrow { width: 44px; height: 44px; }
	.fg-deep-cta__arrow::before { left: 11px; right: 13px; }
	.fg-deep-cta__arrow::after { right: 12px; }
}
.fg-bandcard__deep { position: absolute; top: 10px; left: 12px; padding: 4px 12px 4px 8px; background: var(--n-accent); color: #0b0b0b; font-family: var(--fg-jost); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }

/* Field note block, in the editor */
.fg-note-edit { padding: 18px 22px; background: #0b0b0b; color: #ece8df; border-left: 6px solid var(--fg-accent, #e7d6a8); }
.fg-note-edit__label,
.fg-note-edit__hint { margin: 0 !important; font-family: var(--fg-jost); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-accent, #e7d6a8); }
.fg-note-edit__hint { margin-top: 10px !important; color: #8f8a80; text-transform: none; letter-spacing: .02em; font-size: 13px; }

/* Album review */
.fg-review { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding-block: clamp(32px, 4vw, 48px); border-top: 2px solid #0b0b0b; }
.fg-review.is-flipped { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fg-review.is-flipped .fg-review__cover { order: 2; }
.fg-review__cover { position: sticky; top: 110px; aspect-ratio: 1; margin-right: 16px; background: #0b0b0b; box-shadow: 16px 16px 0 var(--fg-accent); }
.fg-review__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fg-review__cover.is-empty { display: flex; align-items: flex-end; padding: 20px; box-sizing: border-box; }
.fg-review__cover.is-empty span { font-family: var(--fg-jost); font-weight: 800; font-size: clamp(24px, 2.6vw, 36px); line-height: 1; text-transform: uppercase; color: var(--fg-accent); }
.fg-review__cover-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; border: 0; background: #0b0b0b; color: #e7e2d8; cursor: pointer; font-family: var(--fg-jost); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.fg-review__cover-btn { position: relative; }
.fg-review__cover-btn img { width: 100%; height: 100%; object-fit: cover; }
.fg-review__cover-btn > span { padding: 16px; text-align: center; line-height: 1.5; }
.fg-review__cover-btn .fg-review__cover-note { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: rgba(0, 0, 0, .75); font-size: 11px; }
.fg-review__main > * { margin: 0; }
.fg-review__kicker { font-family: var(--fg-jost); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-ink); }
.fg-review__title { margin-top: 8px !important; font-family: var(--fg-jost); font-weight: 800; font-size: clamp(36px, 4.2vw, 64px) !important; line-height: .95 !important; text-transform: uppercase; color: #0b0b0b; }
.fg-review__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px !important; font-family: var(--fg-jost); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #55514a; }
.fg-review__score { display: inline-flex; gap: 5px; }
.fg-review__score i { display: block; width: 22px; height: 12px; background: #cfcabe; transform: skewX(-24deg); }
.fg-review__score i.is-on { background: var(--fg-ink); }
.fg-review__verdict { margin-top: 22px !important; padding-left: 16px; border-left: 6px solid var(--fg-accent); font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; line-height: 1.35; color: #0b0b0b; }
.fg-review__body { margin-top: 22px !important; }
.fg-review__body > * { margin: 0; }
.fg-review__body > * + * { margin-top: 1em; }
.fg-review__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px !important; }
.fg-review__by { display: flex; align-items: center; gap: 12px; margin: 0; }
.fg-review__by .fg-small { display: block; color: #55514a; }
.fg-review__by a { font-weight: 600; color: #0b0b0b; }
.fg-review__listen { padding-bottom: 3px; border-bottom: 3px solid var(--fg-accent); font-family: var(--fg-jost); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #0b0b0b; text-decoration: none; }
.fg-review__player { display: block; margin-top: 22px !important; border: 0; border-radius: 12px; }
@media (max-width: 760px) {
	.fg-review,
	.fg-review.is-flipped { grid-template-columns: minmax(0, 1fr); }
	.fg-review.is-flipped .fg-review__cover { order: 0; }
	.fg-review .fg-review__cover { position: relative; top: 0; width: min(78%, 340px); }
}

/* YouTube, click to play */
.fg-video__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000000; }
.fg-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fg-video__play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000000; cursor: pointer; color: #ffffff; text-align: left; }
.fg-video__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.7) contrast(1.1) brightness(.62); transition: filter .5s ease, transform .9s var(--fg-ease); }
.fg-video__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .75), transparent 45%); }
.fg-video__play:hover img { filter: grayscale(0) contrast(1.05) brightness(.8); transform: scale(1.03); }
.fg-video__play:focus-visible { outline: 3px solid var(--fg-accent); outline-offset: -3px; }
.fg-video__icon { position: absolute; z-index: 1; left: 50%; top: 50%; width: clamp(64px, 9vw, 104px); aspect-ratio: 1.25; transform: translate(-50%, -50%); background: var(--fg-accent); clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); transition: transform .35s var(--fg-ease); }
.fg-video__icon::after { content: ""; position: absolute; inset: 0; background: #0b0b0b; clip-path: polygon(40% 27%, 68% 50%, 40% 73%); }
.fg-video__play:hover .fg-video__icon { transform: translate(-50%, -50%) scale(1.08); }
.fg-video__title { position: absolute; z-index: 1; left: clamp(14px, 2vw, 24px); right: clamp(14px, 2vw, 24px); bottom: clamp(12px, 2vw, 22px); font-family: var(--fg-jost); font-weight: 800; font-size: clamp(15px, 1.8vw, 24px); line-height: 1.1; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.fg-video__note { position: absolute; z-index: 1; top: 12px; right: 14px; font-family: var(--fg-jost); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.is-style-fg-screen .fg-video__frame,
.is-style-fg-screen .wp-block-embed__wrapper { box-shadow: 0 0 0 2px #2a2824, 18px 18px 0 0 var(--fg-accent); }
.is-style-fg-screen { margin-right: 18px !important; margin-bottom: 18px !important; }
.is-style-fg-screen figcaption { margin-top: 30px; }
.fg-video-pair .wp-block-columns { margin-top: 24px; gap: clamp(16px, 2.5vw, 32px); }

/* Pull quote: Shout */
.wp-block-pullquote.is-style-fg-shout { margin-inline: 0; padding: 4px 0 4px clamp(18px, 3vw, 32px); border: 0; border-left: 10px solid var(--fg-accent); text-align: left; }
.wp-block-pullquote.is-style-fg-shout blockquote { margin: 0; }
.wp-block-pullquote.is-style-fg-shout p { margin: 0; font-family: var(--fg-jost); font-weight: 800; font-size: clamp(28px, 3.8vw, 54px) !important; line-height: 1.02; text-transform: uppercase; color: #0b0b0b; }
.wp-block-pullquote.is-style-fg-shout cite { display: block; margin-top: 16px; font-family: var(--fg-jost); font-style: normal; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #55514a; }

/* Essential tracks */
.fg-tracks > * { margin: 0; }
.fg-tracks > .fg-deep__h { margin-top: 8px; }
.fg-tracks__list { list-style: none; margin: 24px 0 0 !important; padding: 0; counter-reset: fg-track; }
.fg-tracks__list li { position: relative; margin: 0; padding: 18px 0 18px 76px; border-top: 1px solid #c9c4b8; counter-increment: fg-track; line-height: 1.5; }
.fg-tracks__list li:last-child { border-bottom: 1px solid #c9c4b8; }
.fg-tracks__list li::before { content: counter(fg-track, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-family: var(--fg-jost); font-weight: 800; font-size: 40px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--fg-ink); }
.fg-tracks__list strong { font-family: var(--fg-jost); font-weight: 800; font-size: 20px; letter-spacing: .03em; text-transform: uppercase; color: #0b0b0b; }
.fg-tracks__list em { margin-left: 8px; font-style: normal; font-family: var(--fg-jost); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #55514a; }

/* Timeline */
.fg-timeline > .fg-kicker,
.fg-timeline > .fg-deep__h { margin: 0; }
.fg-timeline > .fg-deep__h { margin: 8px 0 28px; }
.fg-timeline__item { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 28px; margin: 0 !important; }
.fg-timeline__item > p { margin: 0; }
.fg-timeline__year { padding-top: 2px; text-align: right; font-family: var(--fg-jost); font-weight: 800; font-size: 26px; line-height: 1; color: var(--fg-ink); }
.fg-timeline__item > p:last-child { position: relative; padding: 0 0 30px 28px; border-left: 2px solid #0b0b0b; }
.fg-timeline__item:last-child > p:last-child { padding-bottom: 0; }
.fg-timeline__item > p:last-child::before { content: ""; position: absolute; left: -9px; top: 6px; width: 12px; height: 12px; background: var(--fg-accent); border: 2px solid #0b0b0b; transform: rotate(45deg); }
@media (max-width: 600px) {
	.fg-timeline__item { grid-template-columns: 58px minmax(0, 1fr); column-gap: 18px; }
	.fg-timeline__year { font-size: 18px; }
	.fg-timeline__item > p:last-child { padding-left: 20px; }
	.fg-tracks__list li { padding-left: 58px; }
	.fg-tracks__list li::before { font-size: 30px; }
}

/* Listen */
.fg-listen > * { margin: 0; }
.fg-listen > * + * { margin-top: 14px; }
.fg-listen > .wp-block-embed { margin-top: 24px; }

/* Form pages and the correction form ------------------------------------- */
.fg-form-points { list-style: none; margin: 26px 0 0 !important; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px 28px; max-width: 860px; }
.fg-form-points li { position: relative; margin: 0; padding: 4px 0 4px 30px; font-size: 17px; line-height: 1.45; color: #1a1916; }
.fg-form-points li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 10px; height: 10px; background: var(--fg-accent); border: 2px solid #0b0b0b; transform: rotate(45deg); }
.fg-form-page__content { max-width: 860px; }
.fg-form-page__content > * { margin-block: 0; }
.fg-form-page__content > * + * { margin-block-start: 14px; }
.fg-form-page__content > .fg-section-h { margin-block-start: 8px; }
.fg-form-page__content > .fg-lead { max-width: 720px; color: #1a1916; }
.fg-correction-wrap { box-sizing: border-box; width: min(var(--fg-wide), 100%); margin: 0 auto !important; padding: 0 var(--fg-gutter) clamp(40px, 5vw, 64px); }
.fg-correction-wrap:not(:has(.fgf)) { display: none; }
.fg-correction { border-top: 2px solid #0b0b0b; border-bottom: 2px solid #0b0b0b; }
.fg-correction > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--fg-jost); font-size: clamp(18px, 2vw, 24px); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #0b0b0b; }
.fg-correction > summary::-webkit-details-marker { display: none; }
.fg-correction > summary::after { content: ""; flex: none; width: 26px; height: 26px; background: linear-gradient(#0b0b0b, #0b0b0b) center / 100% 3px no-repeat, linear-gradient(#0b0b0b, #0b0b0b) center / 3px 100% no-repeat; transition: transform .3s var(--fg-ease); }
.fg-correction[open] > summary::after { transform: rotate(45deg); }
.fg-correction > summary:focus-visible { outline: 3px solid var(--fg-accent); outline-offset: 4px; }
.fg-correction > :not(summary) { margin: 0 0 18px; max-width: 760px; }
.fg-correction > .fgf { margin: 8px 0 36px; }

/* Under construction holding page ---------------------------------------- */
.fg-uc .fg-hero__title { font-size: clamp(44px, 5.6vw, 88px) !important; }
.fg-uc .fg-hero__copy { max-width: 820px; }
.fg-uc__logo { margin: 0 0 22px !important; line-height: 0; }
.fg-uc__logo img { width: clamp(48px, 5vw, 64px); height: auto; }
.fg-uc__form { box-sizing: border-box; width: min(860px, 100%); margin: 0 auto !important; padding: clamp(56px, 7vw, 96px) var(--fg-gutter) clamp(40px, 5vw, 64px); }
.fg-uc__form:not(:has(.fgf)) { display: none; }
.fg-uc__form > * { margin-block: 0; }
.fg-uc__form > .fg-section-h { margin-top: 8px; font-size: clamp(32px, 4vw, 56px) !important; }
.fg-uc__foot { margin: 0 !important; padding: 28px var(--fg-gutter) 36px; text-align: center; font-family: var(--fg-jost); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #55514a; }
.fg-uc__foot a { color: inherit; }

/* Contributions (contributor pages) --------------------------------------- */
.fg-works { box-sizing: border-box; margin-top: clamp(48px, 6vw, 88px) !important; }
.fg-works__empty { margin: 0; padding: 28px 0; border-top: 2px solid #0b0b0b; font-size: 18px; color: #55514a; }
.fg-works__stats { list-style: none; margin: 0; padding: 26px clamp(20px, 3vw, 36px) 30px; display: flex; flex-wrap: wrap; gap: 18px clamp(28px, 5vw, 72px); background: #0b0b0b; color: #ece8df; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.fg-works__stats li { display: flex; align-items: baseline; gap: 12px; }
.fg-works__num { font-family: var(--fg-jost); font-weight: 800; font-size: clamp(44px, 5vw, 72px); line-height: .9; color: var(--fg-accent); }
.fg-works__what { font-family: var(--fg-jost); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.fg-works__group { margin-top: clamp(40px, 5vw, 64px); }
.fg-works__h { margin: 0 0 18px !important; padding-top: 14px; border-top: 2px solid #0b0b0b; font-family: var(--fg-jost) !important; font-weight: 800 !important; font-size: clamp(24px, 2.4vw, 32px) !important; line-height: 1.05 !important; text-transform: uppercase; color: #0b0b0b; }
.fg-works__families { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fg-works__families a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 2px solid #0b0b0b; font-family: var(--fg-jost); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--n-ink); text-decoration: none; }
.fg-works__families a:hover { background: #0b0b0b; color: var(--n-accent); }
.fg-works__dot { width: 12px; height: 12px; background: var(--n-accent); border: 2px solid #0b0b0b; transform: rotate(45deg); }
.fg-works__reviews { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.fg-works__review { display: flex; align-items: center; gap: 18px; height: 100%; box-sizing: border-box; padding: 14px 18px 14px 14px; border: 2px solid #0b0b0b; background: rgba(255, 255, 255, .45); color: #0b0b0b; text-decoration: none; transition: transform .25s var(--fg-ease), box-shadow .25s ease; }
.fg-works__review:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--n-accent, var(--fg-accent)); }
.fg-works__cover { flex: none; width: 84px; height: 84px; background: #0b0b0b; box-shadow: 5px 5px 0 var(--n-accent, var(--fg-accent)); }
.fg-works__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fg-works__text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.fg-works__title { font-family: var(--fg-jost); font-weight: 800; font-size: 20px; line-height: 1.05; text-transform: uppercase; }
.fg-works__meta { font-family: var(--fg-jost); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #55514a; }
.fg-works__verdict { font-size: 15px; line-height: 1.4; color: #2e2c28; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fg-works__review .fg-review__score { flex: none; align-self: flex-start; margin-top: 4px; }
.fg-works__review .fg-review__score i { width: 14px; height: 9px; }
.fg-works__review .fg-review__score i.is-on { background: var(--n-ink, var(--fg-ink)); }
.fg-review { scroll-margin-top: 110px; }
.fg-crew__works { margin: 0; font-family: var(--fg-jost); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fg-crew__works a { color: var(--fg-ink); text-decoration: none; border-bottom: 2px solid var(--fg-accent); }
@media (max-width: 600px) {
	.fg-works__review { align-items: flex-start; gap: 14px; }
	.fg-works__cover { width: 64px; height: 64px; }
	.fg-works__review .fg-review__score { display: none; }
}

/* Other albums (discography) ---------------------------------------------- */
.fg-disco-section > * { margin: 0; }
.fg-disco-section > .fg-deep__h { margin-top: 8px; }
.fg-disco { margin-top: 24px !important; }
.fg-disco__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 28px 22px; }
.fg-disco__item { margin: 0; min-width: 0; }
.fg-disco__link { display: flex; flex-direction: column; gap: 4px; color: #0b0b0b; text-decoration: none; }
.fg-disco__cover { position: relative; display: block; aspect-ratio: 1; margin: 0 8px 12px 0; background: #0b0b0b; box-shadow: 8px 8px 0 var(--fg-accent); transition: transform .3s var(--fg-ease), box-shadow .3s var(--fg-ease); }
.fg-disco__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fg-disco__cover.is-empty { display: flex; align-items: flex-end; padding: 14px; box-sizing: border-box; }
.fg-disco__cover.is-empty span { font-family: var(--fg-jost); font-weight: 800; font-size: 18px; line-height: 1; text-transform: uppercase; color: var(--fg-accent); overflow-wrap: anywhere; }
.fg-disco__link:hover .fg-disco__cover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--fg-accent); }
.fg-disco__link:focus-visible { outline: 3px solid #0b0b0b; outline-offset: 4px; }
.fg-disco__title { font-family: var(--fg-jost); font-weight: 800; font-size: 17px; line-height: 1.1; text-transform: uppercase; overflow-wrap: anywhere; }
.fg-disco__meta { font-family: var(--fg-jost); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #55514a; }
.fg-disco__listen { margin-top: 4px; font-family: var(--fg-jost); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-ink); }
.fg-disco__link:hover .fg-disco__listen { text-decoration: underline; text-underline-offset: 3px; }
.fg-disco__credit { margin: 22px 0 0 !important; font-size: 13px; color: #55514a; }
.fg-disco__credit a { color: inherit; }
.fg-disco__note { margin: 0; padding: 14px 16px; border: 2px dashed #8f8a7f; font-size: 15px; color: #55514a; }
.fg-deep.fg-deep > .fg-disco-section { margin-block-start: clamp(48px, 6vw, 80px); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
	.fg-disco__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
	.fg-disco__title { font-size: 15px; }
}

/* Smooth scrolling --------------------------------------------------------- */
html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Lenis (smooth wheel scrolling) takes over when it's running. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Scroll animations -------------------------------------------------------- */
/* Hidden only while html.fg-motion is set (by a guard in <head>), revealed by motion.js. */
.fg-motion .fg-reveal {
	opacity: 0;
	transform: translate3d(0, 34px, 0);
	transition: opacity .8s var(--fg-ease) var(--fg-d, 0ms), transform 1s var(--fg-ease) var(--fg-d, 0ms), clip-path 1.1s var(--fg-ease) var(--fg-d, 0ms);
}
.fg-motion .fg-reveal.fg-in { opacity: 1; transform: none; }

/* Headings wipe in from the left, like a blade. */
.fg-motion :is(.fg-section-h, .fg-deep__h, .fg-works__h).fg-reveal { transform: translate3d(-14px, 0, 0); clip-path: inset(-10% 100% -10% 0); }
.fg-motion :is(.fg-section-h, .fg-deep__h, .fg-works__h).fg-reveal.fg-in { transform: none; clip-path: inset(-10% -2% -10% 0); }
.fg-motion .wp-block-pullquote.is-style-fg-shout.fg-reveal { transform: none; clip-path: inset(0 100% 0 0); }
.fg-motion .wp-block-pullquote.is-style-fg-shout.fg-reveal.fg-in { clip-path: inset(0 0 0 0); }

/* Album reviews: the cover slides in, the text follows. */
.fg-motion .fg-review.fg-reveal { opacity: 1; transform: none; }
.fg-motion .fg-review.fg-reveal .fg-review__cover { opacity: 0; transform: translate3d(-60px, 0, 0) rotate(-4deg); transition: opacity .8s var(--fg-ease), transform 1.1s var(--fg-ease); }
.fg-motion .fg-review.is-flipped.fg-reveal .fg-review__cover { transform: translate3d(60px, 0, 0) rotate(4deg); }
.fg-motion .fg-review.fg-reveal .fg-review__main { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity .8s var(--fg-ease) .15s, transform 1s var(--fg-ease) .15s; }
.fg-motion .fg-review.fg-reveal.fg-in :is(.fg-review__cover, .fg-review__main) { opacity: 1; transform: none; }
.fg-motion .fg-review.fg-reveal .fg-review__score i { transform: skewX(-24deg) scaleX(0); transform-origin: left; transition: transform .4s var(--fg-ease); }
.fg-motion .fg-review.fg-reveal.fg-in .fg-review__score i { transform: skewX(-24deg) scaleX(1); }
.fg-motion .fg-review.fg-in .fg-review__score i:nth-child(2) { transition-delay: .55s; }
.fg-motion .fg-review.fg-in .fg-review__score i:nth-child(3) { transition-delay: .62s; }
.fg-motion .fg-review.fg-in .fg-review__score i:nth-child(4) { transition-delay: .69s; }
.fg-motion .fg-review.fg-in .fg-review__score i:nth-child(5) { transition-delay: .76s; }
.fg-motion .fg-review.fg-in .fg-review__score i:nth-child(1) { transition-delay: .48s; }

/* Videos and cards rise with a slight scale. */
.fg-motion :is(.fg-video, .fg-deep .wp-block-embed, .fg-tree__frame).fg-reveal { transform: translate3d(0, 40px, 0) scale(.97); }
.fg-motion :is(.fg-video, .fg-deep .wp-block-embed, .fg-tree__frame).fg-reveal.fg-in { transform: none; }

/* Timeline: each moment's diamond pops as it arrives. */
.fg-motion .fg-timeline__item.fg-reveal { transform: translate3d(-20px, 0, 0); }
.fg-motion .fg-timeline__item.fg-reveal.fg-in { transform: none; }
.fg-motion .fg-timeline__item.fg-reveal > p:last-child::before { transform: rotate(45deg) scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--fg-d, 0ms) + .25s); }
.fg-motion .fg-timeline__item.fg-reveal.fg-in > p:last-child::before { transform: rotate(45deg) scale(1); }

/* The deep-dive panel slides in from the right. */
.fg-motion .fg-deep-cta.fg-reveal { transform: translate3d(40px, 0, 0); }
.fg-motion .fg-deep-cta.fg-reveal.fg-in { transform: none; }
.fg-motion .fg-deep-cta.fg-reveal.fg-in:hover { transform: translateY(-3px); }
.fg-motion .fg-works__review.fg-reveal.fg-in:hover { transform: translate(-3px, -3px); }

@media print { .fg-motion .fg-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; } }

/* Family tree: place bands by record or year formed ------------------------ */
.fg-tree__controls { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fg-tree__place { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; }
.fg-tree:not(.is-live) .fg-tree__place { display: none; }
.fg-tree__place-label { font-family: var(--fg-jost); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #55514a; }
.fg-tree__place-switch { display: inline-flex; border: 2px solid #0b0b0b; }
.fg-tree__place-switch button { min-height: 38px; padding: 0 14px; border: 0; background: transparent; cursor: pointer; font-family: var(--fg-jost); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #0b0b0b; }
.fg-tree__place-switch button + button { border-left: 2px solid #0b0b0b; }
.fg-tree__place-switch button[aria-pressed="true"] { background: #0b0b0b; color: #ffffff; }
.fg-tree__place-switch button:not([aria-pressed="true"]):hover { background: rgba(0, 0, 0, .07); }
.fg-tree__place-switch button:focus-visible { outline: 3px solid var(--fg-accent); outline-offset: 2px; }
/* Rows and lanes glide to their new heights along with the bands. */
.fg-tree__row, .fg-tree__lane { transition: top .9s var(--fg-ease), height .9s var(--fg-ease), background-color .3s ease; }
.fg-tree__stage { transition: height .9s var(--fg-ease); }
@media (max-width: 700px) {
	.fg-tree__controls { align-items: stretch; width: 100%; }
	.fg-tree__place { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Editor ------------------------------------------------------------------ */
.editor-styles-wrapper .fg-hero { height: min(82vh, 820px); }
.editor-styles-wrapper .fg-tree-editor { padding: 32px var(--fg-gutter); }
.fg-editor-note { margin: 16px 0; padding: 12px 16px; border: 1px dashed #8f8a7f; font-family: var(--fg-jost); font-size: 13px; color: #55514a; }
.editor-styles-wrapper .fg-tree-editor .fg-tree { padding: 0; }
.editor-styles-wrapper .fg-tree-editor .fg-tree__head { display: none; }
.fg-card__facts > [hidden] { display: none; }

/* ------------------------------------------------------------------ search */
.fg-header__tools { display: flex; align-items: center; justify-content: flex-end; gap: 14px; justify-self: end; }
.fg-header__tools > * { margin: 0 !important; }
.fg-search__open {
	display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
	border: 2px solid transparent; border-radius: 0; background: transparent; color: #ffffff; cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.fg-search__open:hover { border-color: #ffffff; }
.fg-search__open:active { background: #ffffff; color: var(--fg-black); }
.fg-search__open svg { display: block; }
.fg-header.is-scrolled .fg-search__open { width: 38px; height: 38px; }
html.fg-search-open { overflow: hidden; }

.fg-search__dialog {
	width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px);
	margin: clamp(16px, 9vh, 96px) auto auto; padding: 0; border: 0; overflow: visible;
	background: transparent; color: #ffffff;
}
.fg-search__dialog::backdrop { background: rgba(7, 7, 7, .72); backdrop-filter: blur(3px); }
.fg-search__dialog[open] { animation: fg-search-in .28s var(--fg-ease); }
@keyframes fg-search-in { from { opacity: 0; transform: translateY(-12px); } }
.fg-search__panel {
	position: relative; isolation: isolate; display: flex; flex-direction: column; max-height: inherit;
	background: var(--fg-black); box-shadow: 10px 10px 0 var(--fg-accent);
}
.fg-search__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6; background-image: var(--fg-grit-fine); background-size: 256px 256px; }
.fg-search__bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 2px solid rgba(255, 255, 255, .16); }
.fg-search__glass { flex: none; color: var(--fg-accent); }
.fg-search__input {
	flex: 1; min-width: 0; padding: 10px 0; border: 0; background: transparent; color: #ffffff;
	font-family: var(--fg-jost); font-size: clamp(20px, 3.2vw, 28px); font-weight: 700; letter-spacing: .01em;
}
.fg-search__input::placeholder { color: rgba(255, 255, 255, .42); font-weight: 500; }
.fg-search__input:focus { outline: none; }
.fg-search__input::-webkit-search-cancel-button, .fg-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.fg-search__close {
	flex: none; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 0; background: transparent; color: rgba(255, 255, 255, .75);
	font: 700 11px/1 var(--fg-jost); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.fg-search__close:hover { border-color: #ffffff; color: #ffffff; }
.fg-search__results { overflow-y: auto; overscroll-behavior: contain; padding: 8px 8px 16px; }
.fg-search__hint, .fg-search__none { margin: 0; padding: 18px 14px 8px; color: rgba(255, 255, 255, .62); font-size: 16px; }
.fg-search__none a { color: var(--fg-accent); font-weight: 700; }
.fg-search__group { padding-top: 10px; }
.fg-search__h { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 8px 14px 6px; font: 800 12px/1 var(--fg-jost); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-accent); }
.fg-search__h span { color: rgba(255, 255, 255, .45); font-weight: 600; letter-spacing: .06em; }
.fg-search__list { margin: 0; padding: 0; list-style: none; }
.fg-hit { display: flex; align-items: center; gap: 14px; padding: 9px 14px; color: #ffffff; text-decoration: none; }
.fg-search a.fg-hit, .fg-search-page a.fg-hit { color: inherit; text-decoration: none; }
.fg-hit:hover, .fg-hit:focus-visible { background: rgba(255, 255, 255, .08); outline: none; box-shadow: inset 4px 0 0 var(--fg-accent); }
.fg-hit__mark { flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.fg-hit__mark::before { content: ""; width: 14px; height: 14px; background: var(--fg-hit); transform: rotate(45deg); box-shadow: 0 0 14px color-mix(in srgb, var(--fg-hit) 60%, transparent); }
.fg-hit__img { flex: none; width: 44px; height: 44px; object-fit: cover; background: rgba(255, 255, 255, .1); }
.fg-hit__img--round { border-radius: 50%; }
.fg-hit__initials { display: grid; place-items: center; font: 800 14px/1 var(--fg-jost); letter-spacing: .04em; color: var(--fg-black); background: var(--fg-accent); }
.fg-hit__body { display: flex; flex-direction: column; min-width: 0; }
.fg-hit__name { font: 700 19px/1.2 var(--fg-jost); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-hit__name mark { background: none; color: var(--fg-accent); }
.fg-hit__meta { margin-top: 3px; font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-search__all { display: block; margin: 12px 14px 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, .16); color: var(--fg-accent) !important; font: 800 13px/1 var(--fg-jost); letter-spacing: .14em; text-transform: uppercase; text-decoration: none !important; }
.fg-search__all:hover, .fg-search__all:focus-visible { color: #ffffff !important; }
@media (max-width: 600px) {
	.fg-header__tools { gap: 6px; }
	.fg-search__open { width: 40px; height: 40px; }
	.fg-search__dialog { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; }
	.fg-search__panel { height: 100%; box-shadow: none; }
	.fg-hit__name { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .fg-search__dialog[open] { animation: none; } }

/* The search results page */
.fg-search-page { max-width: 820px; margin-top: clamp(20px, 3vw, 32px); }
.fg-search__bar--page { padding: 0; margin: 0 0 28px; border: 0; gap: 0; }
.fg-search__bar--page .fg-search__input { padding: 14px 18px; border: 2px solid var(--fg-black); border-right: 0; background: #fbfaf6; color: var(--fg-black); font-size: 22px; }
.fg-search__bar--page .fg-search__input::placeholder { color: rgba(7, 7, 7, .4); }
.fg-search__bar--page .fg-search__input:focus { box-shadow: inset 0 0 0 2px var(--fg-ink); }
.fg-search__go { align-self: stretch; padding: 0 26px; border: 2px solid var(--fg-black); border-radius: 0; background: var(--fg-black); color: #ffffff; font: 800 14px/1 var(--fg-jost); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.fg-search__count { margin: 0 0 24px; font-weight: 600; }
.fg-search__count a { color: inherit; }
.fg-search-page .fg-search__group { margin-bottom: 28px; padding: 0; }
.fg-search-page .fg-search__h { padding: 0 0 10px; border-bottom: 2px solid var(--fg-black); color: var(--fg-ink); font-size: 13px; }
.fg-search-page .fg-search__h span { color: rgba(7, 7, 7, .5); }
.fg-search-page .fg-hit { padding: 12px 6px; border-bottom: 1px solid rgba(7, 7, 7, .14); color: var(--fg-black); }
.fg-search-page .fg-hit:hover, .fg-search-page .fg-hit:focus-visible { background: rgba(7, 7, 7, .05); box-shadow: inset 4px 0 0 var(--fg-ink); }
.fg-search-page .fg-hit__meta { color: rgba(7, 7, 7, .6); }
.fg-search-page .fg-hit__img { background: rgba(7, 7, 7, .08); }
.fg-search-page .fg-hit__mark::before { box-shadow: 0 0 0 2px var(--fg-black); }
@media (max-width: 420px) {
	.fg-header__inner { gap: 10px; }
	.fg-header__tools { gap: 2px; }
	.fg-search__open { width: 36px; height: 36px; }
	.fg-header__title { letter-spacing: .08em !important; }
}

/* Contributors: two to a row on phones. */
@media (max-width: 600px) {
	.fg-crew__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.fg-crew__card { gap: 10px; padding: 12px; }
	.fg-crew__name { font-size: 16px !important; overflow-wrap: anywhere; hyphens: auto; }
	.fg-crew__bio { font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
	.fg-crew__beat { padding-top: 8px; font-size: 10px; letter-spacing: .08em; }
	.fg-crew__works { font-size: 10px; letter-spacing: .06em; }
}