/*!
 * tg-halloween.css — SEASONAL OVERRIDE (Halloween 2026). TEMPORARY.
 *
 * Night-time palette + decoration layer, modelled on the "We make the internet
 * less scary" banner: near-black ground, glowing brand green, a pale moon,
 * green fog, bats, cobwebs and jack-o'-lanterns.
 *
 * 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
 *   <!-- HALLOWEEN THEME (temporary) --> ... <!-- /HALLOWEEN THEME -->
 * The home page also carries one marked pill linking the contest.
 *
 * TO REMOVE: strip every marked block (see _proposals/halloween-theme/README.md
 * for the one-line script), then move this file and assets/halloween/ 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 …
 * "Cream/paper" bands become green-black "fog" bands, so the light-band text
 * tokens flip to light. The tech blue becomes pumpkin orange.
 */

:root{
	/* home page vocabulary */
	--charcoal:#0A0E0C; --charcoal-2:#0F1512; --charcoal-3:#18211C;
	--cream:#0E1A14; --cream-2:#11211A; --cream-3:#22392D;
	--on-light:#ECF4EE; --on-light-mute:#A9C0B3;
	--blue:#FF8A1F; --blue-dk:#FFA552; --blue-lt:#FFB877;
	--amber:#FFB13B; --amber-dk:#FFB13B;

	/* tg-look vocabulary */
	--tg-charcoal:#0A0E0C; --tg-charcoal-2:#0F1512; --tg-charcoal-3:#18211C;
	--tg-cream:#0E1A14; --tg-cream-2:#11211A; --tg-cream-3:#22392D;
	--tg-on-light:#ECF4EE; --tg-on-light-mute:#A9C0B3;
	--tg-blue:#FF8A1F; --tg-blue-dk:#FFA552; --tg-blue-lt:#FFB877;
	--tg-amber-dk:#FFB13B;

	/* tg-theme / Tailwind vocabulary */
	--color-ink:#060908; --color-ink-900:#0A0E0C; --color-ink-800:#0F1512;
	--color-surface:#0F1914; --color-surface-2:#15231C;
	--color-paper:#0E1A14; --color-paper-2:#11211A; --color-paper-3:#22392D;
	--color-on-light:#ECF4EE; --color-on-light-mute:#A9C0B3;
	--color-blue:#FF8A1F; --color-blue-dark:#FFA552; --color-blue-light:#FFB877;
	--color-amber-dark:#FFB13B;

	/* seasonal accents */
	--boo-moon:#E8F6EC;
	--boo-glow:rgba(74,182,131,.55);
	--boo-fog:rgba(74,182,131,.18);
	--boo-pumpkin:#FF8A1F;
	--boo-surface:#132219;
	--boo-line:#24402F;
}

body{ background-color:#0A0E0C; }

/* --------------------------------------------------------------------------
   Former light ("paper"/"cream") bands. Inside them, every "-dk" accent was a
   dark TEXT colour chosen for a light ground — scope the tokens back to the
   light values so headings, eyebrows and links stay readable on the night band.
   -------------------------------------------------------------------------- */
main:not([data-tg-plain]) > section:nth-of-type(2n):not(:first-of-type):not(:last-of-type):not([data-tg-dark]),
main:not([data-tg-plain]) > section[data-tg-paper],
.skin-cream, .skin-cream-2{
	--tg-green-dk:#7FDCAE; --green-dk:#7FDCAE;
	--tg-amber-dk:#FFB13B; --amber-dk:#FFB13B;
}
main:not([data-tg-plain]) > section .prose-tg{ color:var(--tg-on-light-mute) !important; }
main:not([data-tg-plain]) > section .prose-tg a:hover{ color:#fff !important; }
main:not([data-tg-plain]) > section .text-cream\/80{ color:rgba(236,244,238,.8) !important; }

/* Surfaces that were hardcoded white — now dark "tombstone" cards. */
.card, .pr-band, .pr-addon, .tg-step, .gb-orgs a, .tg-boost-price, .tg-part-i, #tg-aiq-card,
.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(--boo-surface) !important; border-color:var(--boo-line) !important;
}

/* Text that sat on a solid blue now sits on pumpkin orange: needs dark ink. */
.split-tag--ai, .correction, .vs-col--ai .vs-tag, .step:nth-child(2) .step-n{ color:#1A0C02 !important; }
.correction svg{ color:#1A0C02; }

/* Components that used --cream as a LIGHT ink colour. */
.btn-ink, main ~ section .rounded-\[2rem\] .btn-primary{ color:#F4F1E9 !important; }
.step:nth-child(4) .step-n{ background:#F4F1E9 !important; color:#0A0E0C !important; }
.skin-cream .step:nth-child(4) .step-n{ background:#F4F1E9 !important; color:#0A0E0C !important; }
.hover\:text-white:hover{ color:#fff !important; }
.btn-outline-light{ border-color:rgba(236,244,238,.28); }

/* --green-dk was a TEXT colour on the light bands; on a dark band it needs the light green. */
.skin-cream .hl-green, .skin-cream-2 .hl-green,
.skin-cream .hf .hf-id, .skin-cream-2 .hf .hf-id,
.incl-num, .vs-col--gb .vs-list svg,
.skin-cream .svc-list svg, .skin-cream-2 .svc-list svg{ color:var(--green-lt, #7FDCAE) !important; }

/* The final green band keeps dark ink (it is still a light green ground). */
.skin-green .btn-outline-light{ color:#0B2419 !important; border-color:rgba(11,36,25,.35) !important; }
.skin-green .btn-outline-light:hover{ border-color:#0B2419 !important; }

/* tg-cta.css: the dark-ink ghost button was made for light bands. */
.tgbtn--ghost-dk{ color:#ECF4EE !important; border-color:rgba(236,244,238,.32) !important; }
.tgbtn--ghost-dk:hover{ color:#7FDCAE !important; border-color:#4AB683 !important; }

/* Page-level text colours chosen for a light ground. */
.tg-honest-h{ color:#FFB13B !important; }
.tg-math-col--old .tg-math-result{ color:#F29A8E !important; }
[data-tg-paper] .tg-note b, [data-tg-paper] .tg-note strong, .tg-boost-note b{ color:#FFB13B !important; }
.stand-in p{ color:#A9C0B3 !important; }
[data-tg-paper] .gb-link:hover{ color:#7FDCAE !important; }
.tg-plan-badge{ color:#7FDCAE !important; }

/* Header glass goes a touch darker so the moonlit page reads as night. */
.site-head{ background:rgba(6,9,8,.88); }

/* --------------------------------------------------------------------------
   Fog on every band. Dark bands: a green glow rising from the bottom.
   Former cream bands: a slightly greener mist so the rhythm survives.
   -------------------------------------------------------------------------- */
.skin-dark, .skin-dark-2{
	background-image:
		radial-gradient(60rem 18rem at 50% 108%, var(--boo-fog), transparent 70%),
		radial-gradient(40rem 22rem at 100% 0%, rgba(74,182,131,.07), transparent 70%);
}
.skin-cream, .skin-cream-2{
	background-image:
		radial-gradient(70rem 26rem at 15% -10%, rgba(74,182,131,.12), transparent 70%),
		radial-gradient(50rem 20rem at 95% 110%, rgba(255,138,31,.06), transparent 72%);
}
main:not([data-tg-plain]) > section:nth-of-type(2n):not(:first-of-type):not(:last-of-type):not([data-tg-dark]){
	background-image:radial-gradient(70rem 26rem at 15% -10%, rgba(74,182,131,.12), transparent 70%);
	border-top-color:rgba(74,182,131,.12);
}

/* --------------------------------------------------------------------------
   HOME HERO — the banner, rebuilt in CSS: moon top-right, fog below,
   webs in both top corners, a flock of bats, two jack-o'-lanterns.
   No markup: layered backgrounds plus the hero's existing ::before/::after.
   -------------------------------------------------------------------------- */
.hero{
	background-color:#070A09;
	background-image:
		url(/assets/halloween/web.svg),
		url(/assets/halloween/web-r.svg),
		url(/assets/halloween/pumpkin.svg),
		url(/assets/halloween/pumpkin.svg),
		radial-gradient(circle at calc(100% - 15rem) 6.6rem, rgba(255,255,255,.75), transparent 3.6rem),
		radial-gradient(circle at calc(100% - 11.4rem) 11rem, rgba(150,200,172,.55) 0 1.1rem, transparent 1.25rem),
		radial-gradient(circle at calc(100% - 15.5rem) 11.6rem, rgba(150,200,172,.45) 0 .7rem, transparent .82rem),
		radial-gradient(circle at calc(100% - 13rem) 9rem, #E8F6EC 0 6.6rem, rgba(124,230,170,.55) 6.8rem, rgba(74,182,131,.22) 9.5rem, rgba(74,182,131,.06) 15rem, transparent 22rem),
		radial-gradient(70rem 22rem at 50% 104%, rgba(74,182,131,.30), transparent 70%);
	background-repeat:no-repeat;
	background-position:
		left -6px top -6px,
		right -6px top -6px,
		left 1.5% bottom -4px,
		right 2% bottom -6px,
		0 0, 0 0, 0 0, 0 0, 0 0;
	background-size:
		clamp(7rem,15vw,13rem) auto,
		clamp(7rem,15vw,13rem) auto,
		clamp(4.5rem,7vw,7rem) auto,
		clamp(3.5rem,5.5vw,5.5rem) auto,
		auto, auto, auto, auto, auto;
}
/* Below ~1180px the moon would reach the headline: it slides into the corner. */
@media (max-width:1180px){
	.hero{
		background-image:
			url(/assets/halloween/web.svg),
			url(/assets/halloween/web-r.svg),
			url(/assets/halloween/pumpkin.svg),
			url(/assets/halloween/pumpkin.svg),
			radial-gradient(circle at calc(100% + .5rem) 2.6rem, #E8F6EC 0 3.6rem, rgba(124,230,170,.5) 3.75rem, rgba(74,182,131,.18) 6rem, transparent 11rem),
			radial-gradient(50rem 18rem at 50% 104%, rgba(74,182,131,.28), transparent 70%);
		background-position: left -6px top -6px, right -6px top -6px, left 1.5% bottom -4px, right 2% bottom -6px, 0 0, 0 0;
		background-size: clamp(6rem,15vw,13rem) auto, clamp(6rem,15vw,13rem) auto, clamp(4rem,7vw,7rem) auto, clamp(3.2rem,5.5vw,5.5rem) auto, auto, auto;
	}
}
.hero::before{ /* was the blue wash: now low green fog drifting across the floor */
	inset:auto -20% -12% -20% !important;
	height:58% !important;
	background:radial-gradient(ellipse at 50% 100%, rgba(74,182,131,.34), rgba(74,182,131,.08) 45%, transparent 70%) !important;
	filter:blur(18px) !important;
	animation:boo-drift 26s ease-in-out infinite alternate;
}
.hero::after{ /* was the green wash: now a flock of bats crossing the moon */
	inset:auto !important;
	top:2.6rem !important;
	right:clamp(.5rem,7vw,7rem) !important;
	width:clamp(9rem,26vw,22rem) !important;
	aspect-ratio:360/130; height:auto !important;
	background:url(/assets/halloween/bats.svg) no-repeat center/contain !important;
	filter:drop-shadow(0 0 1px rgba(124,230,170,.55)) !important;
	animation:boo-flap 9s ease-in-out infinite alternate;
}
@keyframes boo-drift{ from{ transform:translate3d(-3%,0,0); } to{ transform:translate3d(3%,-6px,0); } }
@keyframes boo-flap{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-1.5rem,.6rem,0); } }
@media (prefers-reduced-motion: reduce){ .hero::before, .hero::after{ animation:none; } }
@media (max-width:767px){ .hero::after{ top:.4rem !important; right:.2rem !important; width:8.5rem !important; opacity:.85; } }

/* The hero image glows like the banner's goober. */
.hero .split-vis{ box-shadow:0 0 0 1px rgba(74,182,131,.35), 0 0 60px -10px rgba(74,182,131,.55); }

/* Seasonal pill above the H1 (the one markup addition, home page only). */
.tg-boo-pill{
	display:inline-block; line-height:1.45; margin-bottom:1.25rem;
	padding:.5rem 1rem; border-radius:999px; text-decoration:none;
	font-family:var(--display, "Bricolage Grotesque", sans-serif); font-weight:700; font-size:.95rem;
	color:#ECF4EE; background:rgba(74,182,131,.10); border:1px solid rgba(74,182,131,.45);
	box-shadow:0 0 28px -8px rgba(74,182,131,.7);
	transition:background .2s ease, border-color .2s ease;
	position:relative; z-index:2;
}
.tg-boo-pill b{ color:#7FDCAE; white-space:nowrap; }
@media (max-width:767px){ .tg-boo-pill{ border-radius:1rem; font-size:.88rem; } .tg-boo-pill b{ white-space:normal; } }
.tg-boo-pill:hover{ background:rgba(74,182,131,.2); border-color:#4AB683; }

/* --------------------------------------------------------------------------
   INTERIOR PAGES — first section of <main> gets the moon glow, webs and bats.
   Background layers only, so no page's own ::before/::after is disturbed.
   The contest page (main[data-tg-plain] #sw) has its own Halloween art.
   -------------------------------------------------------------------------- */
main:not([data-tg-plain]) > section:first-of-type:not(.hero){
	background-image:
		url(/assets/halloween/web.svg),
		url(/assets/halloween/bats.svg),
		radial-gradient(circle at 88% 14%, rgba(232,246,236,.95) 0 3.2rem, rgba(74,182,131,.35) 3.4rem, rgba(74,182,131,.10) 9rem, transparent 16rem),
		radial-gradient(70rem 18rem at 50% 110%, rgba(74,182,131,.18), transparent 70%);
	background-repeat:no-repeat;
	background-position: left -6px top -6px, right 14% top 9rem, center, center;
	background-size: clamp(6rem,12vw,11rem) auto, clamp(10rem,20vw,17rem) auto, auto, auto;
}
@media (max-width:767px){
	main:not([data-tg-plain]) > section:first-of-type:not(.hero){
		background-position: left -6px top -6px, right 4% top 1rem, center, center;
		background-image:
			url(/assets/halloween/web.svg),
			url(/assets/halloween/bats.svg),
			radial-gradient(circle at 92% 6%, rgba(232,246,236,.9) 0 2rem, rgba(74,182,131,.30) 2.2rem, transparent 7rem),
			radial-gradient(40rem 14rem at 50% 110%, rgba(74,182,131,.16), transparent 70%);
	}
}

/* --------------------------------------------------------------------------
   HEADER — the logo goober gets a witch hat; the utility bar a bat.
   -------------------------------------------------------------------------- */
header a[aria-label="Techno Goober home"]{ position:relative; }
header a[aria-label="Techno Goober home"]::before{
	content:""; position:absolute; pointer-events:none;
	left:-.6rem; top:-1.3rem; width:2.9rem; height:2.2rem;
	background:url(/assets/halloween/hat.svg) no-repeat center/contain;
	transform:rotate(-14deg); transform-origin:60% 90%;
	filter:drop-shadow(0 0 1px #7FDCAE) drop-shadow(0 0 8px rgba(74,182,131,.7));
}
footer{ position:relative; }
footer::after{
	content:""; position:absolute; pointer-events:none; z-index:0;
	right:clamp(.5rem,3vw,2.5rem); top:calc(-1 * clamp(2.6rem,4.6vw,4.3rem));
	width:clamp(3.5rem,6vw,5.5rem); aspect-ratio:200/170;
	background:url(/assets/halloween/pumpkin.svg) no-repeat center/contain;
	opacity:.9;
}
footer::before{
	content:""; position:absolute; pointer-events:none; z-index:0;
	left:0; top:0; width:clamp(4rem,7vw,6.5rem); aspect-ratio:1;
	background:url(/assets/halloween/web.svg) no-repeat left top/contain;
	opacity:.4;
}

/* Green glow on primary buttons, like the banner's neon. */
.btn-primary, .btn-build{ box-shadow:0 .55rem 0 -.05rem #2C7654, 0 0 26px -6px rgba(74,182,131,.75) !important; }
header .btn-primary, .site-head .btn{ box-shadow:0 .35rem 0 -.05rem #2C7654, 0 0 18px -6px rgba(74,182,131,.7) !important; }