/*!
 * tg-fall.css — SEASONAL OVERRIDE (Fall 2026). TEMPORARY.
 *
 * Warm autumn re-tune of the whole site: espresso charcoal, parchment cream,
 * the cold tech blue swapped for burnt orange, amber promoted, plus a light
 * decoration layer (maple and oak leaves, a leaf drift in the hero, a maple
 * leaf on the logo goober, an acorn on the footer).
 *
 * Unlike the Halloween skin this keeps the site's light/dark band rhythm:
 * cream bands stay light, dark bands stay dark. It is a token swap + art.
 *
 * Additive and self-contained. Every page loads it with ONE <link> placed
 * immediately before </body> (so it wins the cascade over tg-look.css, which
 * some pages load inside <body>), wrapped in the marker comment
 *   <!-- FALL THEME (temporary) --> ... <!-- /FALL THEME -->
 *
 * TO REMOVE: strip every marked block (see _proposals/fall-theme/README.md
 * for the one-line script), then move this file and assets/fall/ to
 * _to_delete/. Nothing else on the site was edited.
 *
 * Three token vocabularies exist and all three are swapped here:
 *   home page inline   --charcoal / --cream / --on-light / --blue …
 *   tg-look.css        --tg-charcoal / --tg-cream / --tg-on-light …
 *   tg-theme.css       --color-ink / --color-paper / --color-on-light …
 * --amber-dk is darkened to #8A5205: the stock #C97C10 does not clear 4.5:1
 * as small text on the cream bands (measured on the 2026-08-31 fall pass).
 */

:root{
	/* home page vocabulary */
	--charcoal:#1C1612; --charcoal-2:#261E18; --charcoal-3:#342A22;
	--cream:#F8EFDF; --cream-2:#F1E4CC; --cream-3:#E4D2B2;
	--on-dark:#F6F0E4; --on-dark-mute:#B8AC9B;
	--on-light:#241A12; --on-light-mute:#6B5A4A;
	--blue:#B84C16; --blue-dk:#8F3A0E; --blue-lt:#FFB36B;
	--amber:#F5A52F; --amber-dk:#8A5205;

	/* tg-look vocabulary */
	--tg-charcoal:#1C1612; --tg-charcoal-2:#261E18; --tg-charcoal-3:#342A22;
	--tg-cream:#F8EFDF; --tg-cream-2:#F1E4CC; --tg-cream-3:#E4D2B2;
	--tg-on-dark:#F6F0E4; --tg-on-dark-mute:#B8AC9B;
	--tg-on-light:#241A12; --tg-on-light-mute:#6B5A4A;
	--tg-blue:#B84C16; --tg-blue-dk:#8F3A0E; --tg-blue-lt:#FFB36B;
	--tg-amber:#F5A52F; --tg-amber-dk:#8A5205;

	/* tg-theme / Tailwind vocabulary */
	--color-ink:#161110; --color-ink-900:#1C1612; --color-ink-800:#261E18;
	--color-surface:#261E18; --color-surface-2:#342A22;
	--color-surface-tint:color-mix(in srgb, #F5A52F 6%, #1C1612);
	--color-line:#3A2E24;
	--color-paper:#F8EFDF; --color-paper-2:#F1E4CC; --color-paper-3:#E4D2B2;
	--color-on-dark:#F6F0E4; --color-on-dark-mute:#B8AC9B;
	--color-on-light:#241A12; --color-on-light-mute:#6B5A4A;
	--color-blue:#B84C16; --color-blue-dark:#8F3A0E; --color-blue-light:#FFB36B;
	--color-amber:#F5A52F; --color-amber-dark:#8A5205;

	/* seasonal accents */
	--fall-rust:#B84C16;
	--fall-gold:#D99A2B;
	--fall-maple:#8C3B12;
	--fall-glow:rgba(245,165,47,.22);
	--fall-card:#FFFBF3;
	--fall-card-line:#E6D6BC;
}

body{ background-color:#1C1612; }

/* Header glass: warm espresso instead of green-black. */
.site-head{ background:rgba(28,22,18,.88); border-bottom-color:rgba(245,165,47,.14); }

/* Surfaces that were hardcoded pure white: warm them to parchment-white. */
.card, .pr-band, .pr-addon, .tg-step, .gb-orgs a, .tg-boost-price, .tg-part-i,
.skin-cream .incl-card, .skin-cream-2 .incl-card,
.skin-cream .stat, .skin-cream-2 .stat,
.skin-cream .svc-list li, .skin-cream-2 .svc-list li{
	background-color:var(--fall-card) !important; border-color:var(--fall-card-line) !important;
}

/* --------------------------------------------------------------------------
   Warm washes on every band so the hero is not an island. Dark bands get a
   low autumn sun (amber top-right, rust bottom-left); cream bands a wheat wash.
   -------------------------------------------------------------------------- */
.skin-dark, .skin-dark-2{
	background-image:
		radial-gradient(52rem 24rem at 88% 0%, rgba(245,165,47,.12), transparent 70%),
		radial-gradient(40rem 20rem at 6% 100%, rgba(184,76,22,.12), transparent 72%);
}
.skin-cream, .skin-cream-2{
	background-image:radial-gradient(60rem 28rem at 92% -10%, rgba(184,76,22,.09), transparent 70%);
}
main:not([data-tg-plain]) > section:nth-of-type(2n):not(:first-of-type):not(:last-of-type):not([data-tg-dark]):not(.hero),
main:not([data-tg-plain]) > section[data-tg-paper]:not(.hero){
	background-image:radial-gradient(60rem 28rem at 92% -10%, rgba(184,76,22,.09), transparent 70%);
	border-top-color:rgba(184,76,22,.16);
}
.sec + .sec{ border-top-color:rgba(184,76,22,.16); }

/* Home-page accents from the 2026-08-31 fall pass. */
.kicker::before{ background:linear-gradient(90deg, var(--fall-rust), var(--fall-gold)) !important; opacity:1; }
.hl-amber{ color:var(--fall-gold); }
.stamp{ border-color:rgba(217,154,43,.5); }
.stamp small{ color:var(--fall-gold); }
.divider-glow{ background:linear-gradient(90deg, transparent, rgba(217,154,43,.35), transparent); }

/* --------------------------------------------------------------------------
   HOME HERO — a faint maple outline top-left, a drift of leaves top-right,
   leaf piles along the bottom edge, and the two washes turned amber and rust.
   No markup: layered backgrounds plus the hero's existing ::before/::after.
   -------------------------------------------------------------------------- */
.hero{
	background-color:#1C1612;
	background-image:
		url(/assets/fall/maple-corner.svg),
		url(/assets/fall/pile.svg),
		url(/assets/fall/pile.svg),
		radial-gradient(60rem 26rem at 0% 20%, rgba(184,76,22,.34), transparent 70%),
		radial-gradient(70rem 22rem at 50% 104%, rgba(245,165,47,.16), transparent 70%);
	background-repeat:no-repeat;
	background-position:
		left -1.5rem top -1rem,
		left -2rem bottom -2px,
		right -3rem bottom -4px,
		0 0, 0 0;
	background-size:
		clamp(9rem,16vw,15rem) auto,
		clamp(16rem,34vw,30rem) auto,
		clamp(14rem,30vw,26rem) auto,
		auto, auto;
}
.hero::before{ /* was the blue wash: now a drift of leaves across the top-right */
	inset:auto !important;
	top:1.8rem !important;
	right:clamp(.5rem,7vw,7rem) !important;
	width:clamp(9rem,26vw,22rem) !important;
	aspect-ratio:360/130; height:auto !important;
	background:url(/assets/fall/leaves.svg) no-repeat center/contain !important;
	filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)) !important;
	animation:fall-drift 14s ease-in-out infinite alternate;
}
.hero::after{ /* was the green wash: now low amber light on the right */
	background:radial-gradient(closest-side, rgba(245,165,47,.30), transparent 72%) !important;
}
@keyframes fall-drift{ from{ transform:translate3d(0,0,0) rotate(0deg); } to{ transform:translate3d(-1.2rem,.8rem,0) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce){ .hero::before{ animation:none; } }
@media (max-width:767px){
	.hero::before{ top:.4rem !important; right:.2rem !important; width:9rem !important; opacity:.9; }
	.hero{
		background-position: left -1rem top -.6rem, left -3rem bottom -2px, right -4rem bottom -4px, 0 0, 0 0;
		background-size: clamp(7rem,22vw,9rem) auto, 18rem auto, 16rem auto, auto, auto;
	}
}

/* The hero image gets a warm ring instead of the stock shadow. */
.hero .split-vis{ box-shadow:0 0 0 1px rgba(245,165,47,.30), 0 24px 60px -24px rgba(184,76,22,.6); }

/* --------------------------------------------------------------------------
   INTERIOR PAGES — first section of <main> gets a leaf drift top-right, a
   faint maple outline top-left and a warm glow. Background layers only, so no
   page's own ::before/::after is disturbed. Pages with main[data-tg-plain]
   (contest, case studies, Goober Solutions) are left alone.
   -------------------------------------------------------------------------- */
main:not([data-tg-plain]) > section:first-of-type:not(.hero){
	background-image:
		url(/assets/fall/leaves.svg),
		url(/assets/fall/maple-corner.svg),
		radial-gradient(60rem 22rem at 100% 0%, rgba(245,165,47,.14), transparent 70%),
		radial-gradient(50rem 18rem at 0% 110%, rgba(184,76,22,.14), transparent 70%);
	background-repeat:no-repeat;
	background-position: right 8% top 3.5rem, left -1.5rem top -1rem, center, center;
	background-size: clamp(10rem,20vw,17rem) auto, clamp(8rem,14vw,12rem) auto, auto, auto;
}
@media (max-width:767px){
	main:not([data-tg-plain]) > section:first-of-type:not(.hero){
		background-position: right 2% top .8rem, left -1rem top -.6rem, center, center;
		background-size: 8.5rem auto, 6.5rem auto, auto, auto;
	}
}

/* --------------------------------------------------------------------------
   HEADER — a maple leaf perched on the logo goober. FOOTER — an acorn on the
   top edge and a few leaves settled at the left.
   -------------------------------------------------------------------------- */
header a[aria-label="Techno Goober home"]{ position:relative; }
header a[aria-label="Techno Goober home"]::before{
	content:""; position:absolute; pointer-events:none;
	left:-.95rem; top:-1.05rem; width:1.95rem; height:2.15rem;
	background:url(/assets/fall/maple.svg) no-repeat center/contain;
	transform:rotate(-28deg); transform-origin:50% 100%;
	filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));
}
footer{ position:relative; }
footer::after{
	content:""; position:absolute; pointer-events:none; z-index:0;
	right:clamp(.75rem,3vw,2.5rem); top:calc(-1 * clamp(1.9rem,3.4vw,3.1rem));
	width:clamp(2.6rem,4.5vw,4rem); aspect-ratio:100/130;
	background:url(/assets/fall/acorn.svg) no-repeat center/contain;
	filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));
}
footer::before{
	content:""; position:absolute; pointer-events:none; z-index:0;
	left:0; top:-.4rem; width:clamp(9rem,18vw,15rem); aspect-ratio:420/90;
	background:url(/assets/fall/pile.svg) no-repeat left top/contain;
	opacity:.55;
}

/* Primary buttons keep their green; the hard shadow warms slightly. */
.btn-primary, .btn-build{ box-shadow:0 .55rem 0 -.05rem #2C7654, 0 14px 30px -14px rgba(245,165,47,.45) !important; }