/* =========================================================================
   ASF Gully Creek — main stylesheet
   Ported from "Gully Creek Tails.dc.html". The prototype painted from literal
   hex inline; here every colour is a --asf-* token and the 1:1 mapping holds.
   A eucalyptus night lit by moon and lantern.
   ========================================================================= */

:root {
	--asf-night:    #0A0E23; /* deep night sky — primary background            */
	--asf-midnight: #141A3A; /* raised panels / section shift                  */
	--asf-bark:     #2A1D12; /* earth + tree bark, warm dark base              */
	--asf-moon:     #F2B84B; /* moon + music notes — signature warm gold       */
	--asf-glow:     #FFD97A; /* lantern/firefly highlight, hover glow          */
	--asf-cream:    #F6EFDF; /* parchment text on dark                         */
	--asf-eucalypt: #7E8C5A; /* foliage green — eyebrow labels only            */
	--asf-rose:     #C98A6B; /* warm skin/fur mid — tiny accents only          */
	--asf-radius:   20px;

	--asf-shell:    68rem;   /* content max-width */
	--asf-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--asf-font-body:    'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--asf-night);
	color: var(--asf-cream);
	font-family: var(--asf-font-body);
	font-size: clamp(1.0625rem, 1.05vw, 1.1875rem);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* Lenis smooth-scroll required styles. Lenis adds these classes to <html> but
   ships no CSS; without them the page fights the `scroll-behavior: smooth`
   above and the scroll appears to stick. When Lenis is off (reduced motion)
   these classes are never added, so native smooth scroll stays. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

h1, h2, h3, h4, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }

a {
	color: var(--asf-moon);
	text-decoration-color: rgba(242, 184, 75, .4);
	text-underline-offset: 4px;
}
a:hover { color: var(--asf-glow); text-decoration-color: var(--asf-glow); }

:focus-visible { outline: 2px solid var(--asf-glow); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--asf-moon); color: var(--asf-night); }

.asf-display { font-family: var(--asf-font-display); font-variation-settings: 'SOFT' 80, 'WONK' 1; }

/* Skip link ------------------------------------------------------------- */
.asf-skip {
	position: absolute; left: -9999px; top: 0; z-index: 99;
	padding: 12px 18px; border-radius: 0 0 12px 0;
	background: var(--asf-moon); color: var(--asf-night);
	font-weight: 800; text-decoration: none;
}
.asf-skip:focus { left: 0; color: var(--asf-night); }

/* Screen-reader-only ---------------------------------------------------- */
.asf-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =========================================================================
   Fixed ambient layers
   ========================================================================= */
.asf-page { position: relative; background: var(--asf-night); overflow-x: clip; }

.asf-warm {
	position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
	background: radial-gradient(120% 90% at 50% 78%,
		rgba(42, 29, 18, .95) 0%, rgba(30, 20, 12, .7) 42%, rgba(10, 14, 35, 0) 78%);
}

.asf-moon {
	position: fixed; top: -6vh; right: clamp(-170px, -14vw, -50px);
	z-index: 1; width: min(40vw, 340px); aspect-ratio: 1; pointer-events: none;
}
.asf-moon__halo {
	position: absolute; inset: -70%; border-radius: 50%;
	background: radial-gradient(circle,
		rgba(242, 184, 75, .20) 0%, rgba(242, 184, 75, .07) 38%, rgba(242, 184, 75, 0) 66%);
}
.asf-moon__disc {
	position: absolute; inset: 0; border-radius: 50%;
	background: radial-gradient(circle at 38% 33%,
		#FFF6DE 0%, var(--asf-glow) 30%, var(--asf-moon) 66%, #D99B30 100%);
	box-shadow: 0 0 120px 24px rgba(242, 184, 75, .28);
	animation: asfBreathe 9s ease-in-out infinite;
}
.asf-moon__craters {
	position: absolute; inset: 0; border-radius: 50%;
	background:
		radial-gradient(circle at 66% 60%, rgba(42, 29, 18, .14) 0 9%, rgba(0, 0, 0, 0) 10%),
		radial-gradient(circle at 30% 68%, rgba(42, 29, 18, .11) 0 6%, rgba(0, 0, 0, 0) 7%),
		radial-gradient(circle at 52% 24%, rgba(42, 29, 18, .10) 0 5%, rgba(0, 0, 0, 0) 6%);
}

.asf-canvas {
	position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none;
}

/* =========================================================================
   Header / nav
   ========================================================================= */
.asf-nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 20;
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(246, 239, 223, 0);
	background: rgba(10, 14, 35, 0);
}
.asf-nav__progress {
	position: absolute; left: 0; right: 0; top: 0; height: 2px;
	background: linear-gradient(90deg, var(--asf-moon), var(--asf-glow));
	transform: scaleX(0); transform-origin: left;
}
.asf-nav__inner {
	max-width: 80rem; margin: 0 auto; padding: 14px clamp(1rem, 4vw, 2.5rem);
	display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px 22px;
}
/* Desktop: the drawer is just an inline flex group holding the links + CTA. */
.asf-nav__drawer { display: flex; align-items: center; gap: 12px 22px; }
.asf-nav__toggle { display: none; }
.asf-nav__backdrop { display: none; }
.asf-brand { display: flex; align-items: baseline; gap: 9px; text-decoration: none; color: var(--asf-cream); }
.asf-brand__name {
	font-family: var(--asf-font-display); font-variation-settings: 'SOFT' 70, 'WONK' 1;
	font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em;
}
.asf-brand__bk {
	font: 700 .58rem/1 var(--asf-font-body); letter-spacing: .22em;
	text-transform: uppercase; color: var(--asf-moon);
}
.asf-nav__links {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
	font-size: .8rem; font-weight: 700; letter-spacing: .06em;
}
.asf-nav__links a { text-decoration: none; color: rgba(246, 239, 223, .78); }
.asf-nav__links a:hover { color: var(--asf-glow); }
.asf-nav__cta {
	padding: 9px 18px; border-radius: 99px; background: var(--asf-moon); color: var(--asf-night);
	font-weight: 800; font-size: .82rem; text-decoration: none;
	box-shadow: 0 10px 30px -12px rgba(242, 184, 75, .8);
}
.asf-nav__cta:hover { background: var(--asf-glow); color: var(--asf-night); }

.asf-main { position: relative; z-index: 2; }

/* Mobile: header links + CTA collapse into an off-canvas drawer that slides
   from the right. Toggle with the hamburger or swipe; close by tapping the
   backdrop, a link, Escape, or swiping the panel to the right. */
@media (max-width: 860px) {
	.asf-nav__toggle {
		display: inline-flex; align-items: center; justify-content: center;
		width: 46px; height: 46px; margin: -6px -6px -6px 0;
		border: 0; background: transparent; color: var(--asf-cream); cursor: pointer;
		border-radius: 12px; -webkit-tap-highlight-color: transparent;
	}
	.asf-nav__bars, .asf-nav__bars::before, .asf-nav__bars::after {
		display: block; width: 24px; height: 2px; border-radius: 2px;
		background: currentColor; transition: transform .32s ease, opacity .2s ease;
	}
	.asf-nav__bars { position: relative; }
	.asf-nav__bars::before, .asf-nav__bars::after { content: ""; position: absolute; left: 0; }
	.asf-nav__bars::before { top: -7px; }
	.asf-nav__bars::after { top: 7px; }

	.asf-nav__drawer {
		position: fixed; top: 0; right: 0; z-index: 16;
		height: 100vh; height: 100dvh; width: min(84vw, 320px);
		flex-direction: column; align-items: stretch; gap: 4px;
		padding: calc(72px + env(safe-area-inset-top, 0px)) 22px calc(28px + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(200deg, rgba(20, 26, 58, .99), rgba(10, 14, 35, .99));
		border-left: 1px solid rgba(242, 184, 75, .18);
		box-shadow: -30px 0 80px -40px rgba(0, 0, 0, .95);
		transform: translateX(105%); visibility: hidden;
		transition: transform .38s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .38s;
		overflow-y: auto; overscroll-behavior: contain;
	}
	.asf-nav__links { flex-direction: column; align-items: stretch; gap: 2px; font-size: 1.02rem; letter-spacing: .04em; }
	.asf-nav__links a { padding: 15px 12px; border-radius: 12px; border-bottom: 1px solid rgba(246, 239, 223, .07); color: var(--asf-cream); }
	.asf-nav__links a:hover, .asf-nav__links a:focus-visible { background: rgba(242, 184, 75, .1); color: var(--asf-glow); }
	.asf-nav__drawer .asf-nav__cta { margin-top: 18px; text-align: center; padding: 15px 18px; font-size: .95rem; }

	.asf-nav__backdrop {
		display: block; position: fixed; inset: 0; z-index: 15;
		background: rgba(6, 9, 24, .55); backdrop-filter: blur(3px);
		opacity: 0; visibility: hidden; pointer-events: none;
		transition: opacity .38s ease, visibility 0s linear .38s;
	}

	/* Open state (class set on <html> by JS) */
	html.asf-nav-open .asf-nav__drawer { transform: translateX(0); visibility: visible; transition: transform .38s cubic-bezier(.4, 0, .2, 1); }
	html.asf-nav-open .asf-nav__backdrop { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .38s ease; }
	html.asf-nav-open .asf-nav__bars { background: transparent; }
	html.asf-nav-open .asf-nav__bars::before { transform: translateY(7px) rotate(45deg); }
	html.asf-nav-open .asf-nav__bars::after { transform: translateY(-7px) rotate(-45deg); }
	/* Lock the page behind the drawer (covers the reduced-motion / no-Lenis path). */
	html.asf-nav-open, html.asf-nav-open body { overflow: hidden; touch-action: none; }
}

/* =========================================================================
   Buttons / eyebrows / chips shared
   ========================================================================= */
.asf-eyebrow {
	display: flex; align-items: center; gap: 12px;
	font: 800 .72rem/1 var(--asf-font-body); letter-spacing: .3em;
	text-transform: uppercase; color: var(--asf-eucalypt);
}
.asf-eyebrow--gold { color: var(--asf-moon); }
.asf-eyebrow__rule { width: 26px; height: 1px; background: currentColor; }

.asf-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 15px 26px; border-radius: 99px;
	background: var(--asf-moon); color: var(--asf-night);
	font-weight: 800; text-decoration: none;
	box-shadow: 0 18px 40px -18px rgba(242, 184, 75, .9);
	transition: transform .3s, background .3s;
}
.asf-btn:hover { background: var(--asf-glow); color: var(--asf-night); transform: translateY(-2px); }
.asf-btn--ghost {
	padding: 15px 24px; background: transparent; color: var(--asf-moon);
	border: 1px solid rgba(242, 184, 75, .5); font-weight: 700; box-shadow: none;
}
.asf-btn--ghost:hover { border-color: var(--asf-glow); color: var(--asf-glow); background: rgba(242, 184, 75, .08); transform: none; }
.asf-btn--text {
	color: rgba(246, 239, 223, .72); font-weight: 700; font-size: .92rem;
	text-decoration: underline; padding: 0; box-shadow: none; background: none;
}
.asf-btn--text:hover { color: var(--asf-glow); transform: none; }

.asf-chip {
	display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
	padding: 5px 11px; border: 1px dashed rgba(126, 140, 90, .65); border-radius: 8px;
	font: 800 .64rem/1.4 var(--asf-font-body); letter-spacing: .16em;
	text-transform: uppercase; color: rgba(246, 239, 223, .72);
}

/* Graceful image placeholder (ACF image not yet set) --------------------- */
.asf-imgph {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	padding: 1.25rem; text-align: center;
	background:
		repeating-linear-gradient(-45deg, rgba(126,140,90,.05) 0 12px, rgba(126,140,90,.10) 12px 24px),
		var(--asf-midnight);
	border: 1px dashed rgba(126, 140, 90, .45);
}
.asf-imgph span {
	font: 800 .68rem/1.5 var(--asf-font-body); letter-spacing: .1em; text-transform: uppercase;
	color: rgba(246, 239, 223, .6); max-width: 90%;
}
.asf-art { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   Section: HERO
   ========================================================================= */
.asf-hero {
	position: relative; min-height: 100svh; display: flex; align-items: center;
	padding: clamp(7rem, 16vh, 10rem) clamp(1.25rem, 5vw, 3rem) clamp(4rem, 10vh, 7rem);
}
.asf-hero__grid {
	width: 100%; max-width: var(--asf-shell); margin: 0 auto; display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
	gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center;
}
.asf-hero__copy { display: flex; flex-direction: column; gap: clamp(1.1rem, 2.4vh, 1.6rem); max-width: 34rem; }
.asf-hero__title {
	font-family: var(--asf-font-display); font-variation-settings: 'SOFT' 80, 'WONK' 1;
	font-weight: 600; font-size: clamp(3rem, 9.5vw, 6rem); line-height: .98;
	letter-spacing: -.025em; color: var(--asf-cream); text-wrap: balance;
}
.asf-hero__title em { color: var(--asf-moon); font-style: italic; font-weight: 500; }
.asf-hero__tag {
	font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.55;
	color: rgba(246, 239, 223, .86); max-width: 30rem; text-wrap: pretty;
}
.asf-hero__tag em { color: var(--asf-glow); font-style: normal; font-weight: 700; }
.asf-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.asf-hero__art { position: relative; }
.asf-hero__art-glow {
	position: absolute; inset: -14% -10%; pointer-events: none;
	background: radial-gradient(58% 58% at 52% 46%, rgba(242, 184, 75, .22), rgba(242, 184, 75, 0) 72%);
}
.asf-hero__frame {
	position: relative; width: 100%; aspect-ratio: 4/5; border-radius: var(--asf-radius);
	overflow: hidden;
	box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .95), 0 0 0 1px rgba(246, 239, 223, .08);
}
.asf-hero__cap { margin-top: 12px; font-size: .78rem; letter-spacing: .04em; color: rgba(246, 239, 223, .7); }
/* Hero video: fills the 4:5 frame (cover already drops the wide edges); the
   slight upper-left-weighted zoom trims the bottom-right corner so a generator
   watermark never shows. */
.asf-hero__video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 50%;
	transform: scale(1.09); transform-origin: 40% 32%;
	background: var(--asf-midnight);
}

.asf-scrollcue {
	position: absolute; left: 50%; bottom: clamp(1rem, 3vh, 2.2rem); transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	animation: asfCue 2.6s ease-in-out infinite;
}
.asf-scrollcue span:first-child {
	font: 800 .58rem/1 var(--asf-font-body); letter-spacing: .28em;
	text-transform: uppercase; color: rgba(246, 239, 223, .55);
}
.asf-scrollcue span:last-child { color: var(--asf-moon); }

/* =========================================================================
   Section: STORY (scrollytelling)
   ========================================================================= */
.asf-story { position: relative; padding: clamp(3rem, 8vh, 6rem) clamp(1.25rem, 5vw, 3rem) clamp(5rem, 12vh, 8rem); }
.asf-story__wrap { position: relative; max-width: var(--asf-shell); margin: 0 auto; }
.asf-rail {
	position: absolute; left: clamp(2px, 1.5vw, 14px); top: 6px; bottom: 16vh;
	width: 2px; background: rgba(242, 184, 75, .14); border-radius: 2px;
}
.asf-rail__thread {
	position: absolute; inset: 0; transform-origin: top;
	background: linear-gradient(180deg, var(--asf-glow), var(--asf-moon) 55%, rgba(242, 184, 75, .25));
}
.asf-rail__dot {
	position: absolute; top: -6px; left: -5px; width: 12px; height: 12px; border-radius: 50%;
	background: #FFF6DE; box-shadow: 0 0 22px 7px rgba(255, 217, 122, .6);
}
.asf-story__inner {
	padding-left: clamp(18px, 6vw, 80px);
	display: flex; flex-direction: column; gap: clamp(1rem, 3vh, 2rem);
}
.asf-story__head { display: flex; flex-direction: column; gap: 14px; max-width: 44rem; margin-bottom: clamp(1rem, 4vh, 2.5rem); }
.asf-story__title {
	font-family: var(--asf-font-display); font-variation-settings: 'SOFT' 80, 'WONK' 1;
	font-weight: 500; font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.08;
	letter-spacing: -.02em; color: var(--asf-cream);
}
.asf-story__lede { color: rgba(246, 239, 223, .72); max-width: 34rem; text-wrap: pretty; }

.asf-step {
	position: relative; display: flex; flex-wrap: wrap;
	gap: clamp(1.5rem, 3vw, 2.75rem); align-items: center; padding: clamp(1.5rem, 5vh, 3.5rem) 0;
}
.asf-step__art { flex: 1 1 0; min-width: min(100%, 290px); position: relative; }
.asf-step--alt .asf-step__art { order: 2; }
.asf-step__art-glow {
	position: absolute; inset: -10%; pointer-events: none;
	background: radial-gradient(58% 58% at 50% 50%, rgba(242, 184, 75, .14), rgba(242, 184, 75, 0) 72%);
}
.asf-step__frame {
	position: relative; width: 100%; aspect-ratio: 4/3; border-radius: var(--asf-radius); overflow: hidden;
	box-shadow: 0 44px 90px -46px rgba(0, 0, 0, .95), 0 0 0 1px rgba(246, 239, 223, .07);
}
.asf-step__text {
	flex: 1.5 1 0; min-width: min(100%, 300px);
	container-type: inline-size;
	display: flex; flex-direction: column; gap: 16px;
}
.asf-step__no {
	display: flex; align-items: center; gap: 12px;
	font: 800 .68rem/1 var(--asf-font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--asf-moon);
}
.asf-step__no i { width: 22px; height: 1px; background: rgba(242, 184, 75, .5); font-style: normal; }
.asf-verse {
	font-family: var(--asf-font-display); font-variation-settings: 'SOFT' 90, 'WONK' 1;
	font-weight: 400; font-size: clamp(0.8rem, 5cqi, 1.7rem); line-height: 1.34;
	color: var(--asf-cream); text-wrap: pretty;
}
.asf-verse .asf-verse__soft { color: rgba(246, 239, 223, .72); }

/* Heart-of-it card (Little Snake verse) */
.asf-heartverse {
	position: relative; max-width: 44rem; margin: clamp(1rem, 4vh, 3rem) auto clamp(1rem, 3vh, 2rem);
	padding: clamp(1.75rem, 5vw, 3rem); border: 1px solid rgba(242, 184, 75, .24); border-radius: var(--asf-radius);
	background: linear-gradient(165deg, rgba(20, 26, 58, .88), rgba(42, 29, 18, .5));
}
.asf-heartverse__inner { display: flex; flex-direction: column; gap: 18px; text-align: center; align-items: center; }
.asf-heartverse__eyebrow {
	font: 800 .68rem/1 var(--asf-font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--asf-rose);
}
.asf-heartverse__a {
	font-family: var(--asf-font-display); font-variation-settings: 'SOFT' 90, 'WONK' 1;
	font-weight: 400; font-size: clamp(1.35rem, 2.5vw, 1.95rem); line-height: 1.36; color: var(--asf-cream); text-wrap: pretty;
}
.asf-heartverse__rule { width: 44px; height: 1px; background: rgba(242, 184, 75, .45); }
.asf-heartverse__b {
	font-family: var(--asf-font-display); font-variation-settings: 'SOFT' 90, 'WONK' 1;
	font-weight: 500; font-style: italic; font-size: clamp(1.35rem, 2.5vw, 1.95rem); line-height: 1.36; color: var(--asf-moon); text-wrap: pretty;
}

/* =========================================================================
   Section: BUSH BUDDIES
   ========================================================================= */
.asf-buddies { position: relative; padding: clamp(4rem, 10vh, 7rem) clamp(1.25rem, 5vw, 3rem); }
.asf-buddies__wrap { max-width: var(--asf-shell); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(2rem, 5vh, 3.5rem); }
.asf-buddies__head { display: flex; flex-direction: column; gap: 14px; max-width: 40rem; }
.asf-h2 {
	font-family: var(--asf-font-display); font-variation-settings: 'SOFT' 80, 'WONK' 1;
	font-weight: 500; font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.08; letter-spacing: -.02em; color: var(--asf-cream);
}
.asf-lede { color: rgba(246, 239, 223, .72); text-wrap: pretty; }

/* Heart card (Little Snake) — the standout */
.asf-heart {
	position: relative; display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid rgba(242, 184, 75, .42); border-radius: var(--asf-radius);
	background: linear-gradient(140deg, rgba(42, 29, 18, .72), rgba(20, 26, 58, .92));
	box-shadow: 0 40px 90px -50px rgba(242, 184, 75, .5), inset 0 0 80px -40px rgba(242, 184, 75, .35);
}
.asf-heart__portrait {
	position: relative; width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden;
	background: var(--asf-midnight); transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}
.asf-heart:hover .asf-heart__portrait { transform: rotate(2.5deg) scale(1.03); }
.asf-heart__body { display: flex; flex-direction: column; gap: 12px; }
.asf-heart__badge {
	align-self: flex-start; padding: 6px 13px; border-radius: 99px; background: var(--asf-moon); color: var(--asf-night);
	font: 800 .6rem/1 var(--asf-font-body); letter-spacing: .2em; text-transform: uppercase;
}
.asf-heart__name {
	font-family: var(--asf-font-display); font-variation-settings: 'SOFT' 80, 'WONK' 1;
	font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.1; color: var(--asf-glow);
}
.asf-heart__desc { color: rgba(246, 239, 223, .84); text-wrap: pretty; }

/* Regular character grid */
.asf-cards {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}
.asf-card {
	display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 20px;
	border: 1px solid rgba(246, 239, 223, .1); border-radius: var(--asf-radius);
	background: linear-gradient(180deg, rgba(20, 26, 58, .85), rgba(10, 14, 35, .55));
	transition: transform .45s cubic-bezier(.2, .8, .3, 1), border-color .35s, box-shadow .45s;
}
.asf-card:hover {
	transform: rotate(var(--asf-wobble, -3deg)) scale(1.03);
	border-color: rgba(242, 184, 75, .45);
	box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .95);
}
.asf-card:nth-child(even) { --asf-wobble: 3deg; }
.asf-card:nth-child(odd)  { --asf-wobble: -3deg; }
.asf-card__portrait {
	position: relative; width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--asf-midnight);
}
.asf-card__body { display: flex; flex-direction: column; gap: 6px; }
.asf-card__role {
	font: 800 .58rem/1 var(--asf-font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--asf-eucalypt);
}
.asf-card__name {
	font-family: var(--asf-font-display); font-variation-settings: 'SOFT' 70, 'WONK' 1;
	font-weight: 600; font-size: 1.3rem; line-height: 1.15; color: var(--asf-cream);
}
.asf-card__desc { font-size: .94rem; line-height: 1.55; color: rgba(246, 239, 223, .7); }
.asf-card .asf-chip { margin-top: 4px; padding: 4px 9px; letter-spacing: .14em; }

/* =========================================================================
   Section: EVERYONE'S WELCOME (message)
   ========================================================================= */
.asf-welcome {
	position: relative; min-height: min(94vh, 880px); display: grid; place-items: center; overflow: hidden;
	padding: clamp(5rem, 12vh, 8rem) clamp(1.25rem, 5vw, 3rem);
}
.asf-welcome__bg { position: absolute; inset: 0; }
.asf-welcome__bg .asf-art { width: 100%; height: 100%; }
.asf-welcome__scrim {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg,
		rgba(10, 14, 35, .96) 0%, rgba(10, 14, 35, .6) 26%, rgba(42, 29, 18, .66) 62%, rgba(10, 14, 35, .97) 100%);
}
.asf-quote {
	position: relative; z-index: 2; max-width: 52rem; text-align: center;
	display: flex; flex-direction: column; gap: clamp(1rem, 3vh, 1.75rem); align-items: center;
}
.asf-quote__big {
	font-family: var(--asf-font-display); font-variation-settings: 'SOFT' 90, 'WONK' 1;
	font-weight: 500; font-size: clamp(2rem, 6vw, 4.25rem); line-height: 1.1; letter-spacing: -.02em;
	color: var(--asf-cream); text-wrap: balance;
}
.asf-quote__big span { display: block; }
.asf-quote__big .asf-quote__punch { color: var(--asf-glow); font-style: italic; }
.asf-quote__cite { font-size: .92rem; letter-spacing: .06em; color: rgba(246, 239, 223, .66); }
.asf-quote__cite cite { font-style: normal; }

/* =========================================================================
   Section: THE SONG
   ========================================================================= */
.asf-song { position: relative; padding: clamp(4.5rem, 11vh, 7.5rem) clamp(1.25rem, 5vw, 3rem); }
.asf-song__grid {
	max-width: var(--asf-shell); margin: 0 auto; display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.asf-song__copy { display: flex; flex-direction: column; gap: 18px; }
.asf-song__chorus {
	font-family: var(--asf-font-display); font-variation-settings: 'SOFT' 90, 'WONK' 1;
	font-weight: 400; font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.4; color: var(--asf-glow); text-wrap: pretty;
}
.asf-song__panel {
	display: flex; flex-direction: column; gap: 20px; padding: clamp(1.5rem, 4vw, 2.25rem);
	border: 1px solid rgba(246, 239, 223, .12); border-radius: var(--asf-radius);
	background: linear-gradient(160deg, rgba(20, 26, 58, .9), rgba(10, 14, 35, .7));
}
.asf-bars {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 3px;
	height: clamp(72px, 14vh, 104px);
}
.asf-bars span {
	flex: 1; transform-origin: bottom; border-radius: 9px;
	background: linear-gradient(180deg, var(--asf-glow), var(--asf-moon));
	animation: asfBar 1.5s ease-in-out infinite alternate;
}
.asf-player { display: flex; flex-direction: column; gap: 16px; }
.asf-player__row { display: flex; align-items: center; gap: 16px; }
.asf-player__btn {
	flex: 0 0 auto; width: 58px; height: 58px; border: 0; border-radius: 50%;
	background: var(--asf-moon); color: var(--asf-night); font-size: 1.05rem; cursor: pointer;
	display: grid; place-items: center;
	box-shadow: 0 16px 36px -16px rgba(242, 184, 75, .9); transition: background .3s, transform .3s;
}
.asf-player__btn:hover { background: var(--asf-glow); transform: scale(1.06); }
.asf-player__meta { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.asf-player__labels { display: flex; justify-content: space-between; font-size: .78rem; letter-spacing: .06em; color: rgba(246, 239, 223, .62); }
.asf-player__track { position: relative; height: 6px; border-radius: 99px; background: rgba(246, 239, 223, .14); overflow: hidden; }
.asf-player__fill { position: absolute; inset: 0; width: 0%; border-radius: 99px; background: linear-gradient(90deg, var(--asf-moon), var(--asf-glow)); }
.asf-player__hint { font-size: .9rem; color: rgba(246, 239, 223, .6); }
.asf-noaudio {
	display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 18px;
	border: 1px dashed rgba(126, 140, 90, .6); border-radius: 16px; background: rgba(126, 140, 90, .07);
}
.asf-noaudio__lead {
	font-family: var(--asf-font-display); font-variation-settings: 'SOFT' 90, 'WONK' 1;
	font-size: 1.15rem; line-height: 1.4; color: var(--asf-cream);
}
.asf-noaudio__sub { font-size: .88rem; color: rgba(246, 239, 223, .58); }
.asf-song__links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .85rem; font-weight: 700; }
.asf-song__links a { text-decoration: none; padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(242, 184, 75, .4); }
.asf-song__links a:hover { border-color: var(--asf-glow); }

/* =========================================================================
   Section: AUTHOR
   ========================================================================= */
.asf-author { position: relative; padding: clamp(4rem, 10vh, 7rem) clamp(1.25rem, 5vw, 3rem); }
.asf-author__card {
	max-width: 60rem; margin: 0 auto; display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(2rem, 5vw, 3.5rem); align-items: center; padding: clamp(1.75rem, 4vw, 3rem);
	border: 1px solid rgba(246, 239, 223, .1); border-radius: var(--asf-radius);
	background: linear-gradient(150deg, rgba(20, 26, 58, .85), rgba(10, 14, 35, .5));
}
.asf-author__portrait {
	position: relative; width: 100%; max-width: 280px; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
	box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .9), 0 0 0 1px rgba(242, 184, 75, .28);
}
.asf-author__portrait .asf-imgph { border-radius: 50%; }
.asf-author__body { display: flex; flex-direction: column; gap: 16px; }
.asf-author__body p { color: rgba(246, 239, 223, .76); text-wrap: pretty; }
.asf-author__body .asf-bio { color: rgba(246, 239, 223, .7); font-size: .95rem; }
.asf-author__body cite { font-style: italic; }

/* =========================================================================
   Section: GET THE BOOK
   ========================================================================= */
.asf-buy { position: relative; padding: clamp(4rem, 10vh, 7rem) clamp(1.25rem, 5vw, 3rem); }
.asf-buy__wrap { max-width: var(--asf-shell); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(1.75rem, 4vh, 2.75rem); }
.asf-buy__head { display: flex; flex-direction: column; gap: 14px; max-width: 38rem; }
.asf-formats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(1rem, 2.5vw, 1.5rem);
}
.asf-format {
	display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--asf-radius);
	border: 1px solid rgba(246, 239, 223, .12);
	background: linear-gradient(180deg, rgba(20, 26, 58, .85), rgba(10, 14, 35, .55));
}
.asf-format:first-child { border-color: rgba(242, 184, 75, .3); }
.asf-format__label { font: 800 .58rem/1 var(--asf-font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--asf-eucalypt); }
.asf-format__name {
	font-family: var(--asf-font-display); font-variation-settings: 'SOFT' 70, 'WONK' 1;
	font-weight: 600; font-size: 1.4rem; color: var(--asf-cream);
}
.asf-format__blurb { font-size: .94rem; color: rgba(246, 239, 223, .66); }
.asf-format__link { margin-top: 6px; align-self: flex-start; padding: 11px 20px; border-radius: 99px; font-weight: 800; font-size: .85rem; text-decoration: none; }
.asf-format__link--solid { background: var(--asf-moon); color: var(--asf-night); }
.asf-format__link--solid:hover { background: var(--asf-glow); color: var(--asf-night); }
.asf-format__link--ghost { border: 1px solid rgba(242, 184, 75, .5); color: var(--asf-moon); }
.asf-format__link--ghost:hover { border-color: var(--asf-glow); color: var(--asf-glow); }

/* Pre-order / email capture */
.asf-preorder {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.75rem, 4vw, 2.75rem);
	border: 1px dashed rgba(242, 184, 75, .42); border-radius: var(--asf-radius);
	background: linear-gradient(150deg, rgba(42, 29, 18, .6), rgba(20, 26, 58, .85));
}
.asf-preorder__copy { display: flex; flex-direction: column; gap: 14px; }
.asf-preorder__copy p { color: rgba(246, 239, 223, .72); text-wrap: pretty; }

/* Newsletter forms shared */
.asf-form { display: flex; flex-direction: column; gap: 12px; }
.asf-form__label { font: 800 .58rem/1 var(--asf-font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--asf-eucalypt); }
.asf-form__row { display: flex; flex-wrap: wrap; gap: 10px; }
.asf-form input[type="email"] {
	flex: 1 1 190px; min-width: 0; padding: 14px 16px; border: 1px solid rgba(246, 239, 223, .22);
	border-radius: 99px; background: rgba(10, 14, 35, .6); color: var(--asf-cream);
}
.asf-form button {
	padding: 14px 24px; border: 0; border-radius: 99px; background: var(--asf-moon); color: var(--asf-night);
	font-weight: 800; cursor: pointer; transition: background .3s;
}
.asf-form button:hover { background: var(--asf-glow); }
.asf-form__note { font-size: .8rem; color: rgba(246, 239, 223, .7); }
.asf-embed :where(input, button) { font: inherit; }

/* =========================================================================
   Footer
   ========================================================================= */
.asf-footer {
	position: relative; z-index: 2; border-top: 1px solid rgba(246, 239, 223, .1);
	background: linear-gradient(180deg, rgba(10, 14, 35, .4), rgba(42, 29, 18, .55));
	padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 5vw, 3rem) 2.5rem;
}
.asf-footer__wrap { max-width: var(--asf-shell); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(2rem, 5vh, 3rem); }
.asf-footer__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(2rem, 5vw, 3.5rem); }
.asf-footer__teaser { display: flex; flex-direction: column; gap: 14px; }
.asf-footer__teaser p { color: rgba(246, 239, 223, .68); max-width: 26rem; text-wrap: pretty; }
.asf-footer__bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
	padding-top: 1.75rem; border-top: 1px solid rgba(246, 239, 223, .08);
}
.asf-footer__copy { font-size: .82rem; color: rgba(246, 239, 223, .7); }
.asf-footer__copy cite { font-style: italic; }
.asf-socials { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: .82rem; font-weight: 700; }
.asf-socials a { color: rgba(246, 239, 223, .55); text-decoration: underline dashed rgba(246, 239, 223, .3); text-underline-offset: 5px; }
.asf-socials a:hover { color: var(--asf-glow); }

/* =========================================================================
   Generic document routes (index / page / 404)
   ========================================================================= */
.asf-doc {
	max-width: 48rem; margin: 0 auto;
	padding: clamp(8rem, 20vh, 12rem) clamp(1.25rem, 5vw, 3rem) clamp(4rem, 10vh, 7rem);
	display: flex; flex-direction: column; gap: 1.5rem;
}
.asf-doc--center { text-align: center; align-items: center; }
.asf-doc__head { display: flex; flex-direction: column; gap: 10px; }
.asf-doc__list { display: flex; flex-direction: column; gap: 1.75rem; }
.asf-doc__item { display: flex; flex-direction: column; gap: 10px; }
.asf-doc__content { display: flex; flex-direction: column; gap: 1rem; }
.asf-doc__content :where(p, ul, ol) { margin: 0 0 1rem; }
.asf-doc__content a { text-decoration: underline; }
.asf-doc .asf-card__name a { color: inherit; text-decoration: none; }
.asf-doc .asf-card__name a:hover { color: var(--asf-glow); }
.asf-doc .pagination, .asf-doc .nav-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1rem; }
.asf-doc .page-numbers {
	padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(246, 239, 223, .16);
	text-decoration: none; color: var(--asf-cream);
}
.asf-doc .page-numbers.current { background: var(--asf-moon); color: var(--asf-night); border-color: var(--asf-moon); }

/* =========================================================================
   Keyframes
   ========================================================================= */
@keyframes asfBar { from { transform: scaleY(.26); } to { transform: scaleY(1); } }
@keyframes asfBob { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-9px) rotate(5deg); } }
@keyframes asfCue { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(9px); opacity: 1; } }
@keyframes asfBreathe { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.035); opacity: 1; } }

/* =========================================================================
   Reduced motion — the accessibility floor
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	html { scroll-behavior: auto; }
	.asf-canvas { display: none; }
}