/**
 * NTW Wiki — FIRST SNOW layer (winter holiday season, night).
 *
 * The front of the house on the first snowy night of the year. A strand of
 * big old-fashioned bulbs swags across the top of the page, snow is coming
 * down, and it has already piled up on every window. The tiles are the
 * house's lit windows (warm inside, frost in the corners, snow on top, a
 * sill underneath). A street lamp on the left, a decorated pine on the
 * right, the town's lit windows on the far hills. The capybara is in a
 * Santa hat on a wooden sled.
 *
 * Secular on purpose: lights, snow, pine, sled, hats, gift tags. No stars
 * on trees, no candles, nothing from any one tradition.
 *
 * No jumpscares this season. The motion is the snow, the bulbs, and one
 * arrival moment (the strand lights up bulb by bulb, once per session).
 *
 * Forked from yozakura.css: same structure, same overrides of the --ntw-*
 * tokens and the hard-coded literals, so inner pages and wp-login keep
 * working without restating anything.
 *
 * Contract with the JS (firstsnow.js):
 *  - html.fs-motion      — master gate; every *animation* is behind it, so
 *                          no-JS / reduced-motion still gets a complete page.
 *  - .fs-world           — fixed night backdrop (DOM injected by firstsnow.js).
 *  - .fs-snow            — the snowfall canvas inside the world.
 *  - .fs-lights          — the bulb strand at the top of the content column.
 *  - .fs-tag             — the gift tag beside the logo (injected).
 *  - .fs-hero-hat        — Santa hat on the hero mascot (injected).
 *  - .fs-login-hat       — the same hat on the wp-login mascot (injected).
 *  - .ntw-capy-peek-hat  — the peeker's hat (capy.js renders it when
 *                          ntwCapy.hat is set).
 *  - GSAP owns opacity/transform on reveals (motion.js); nothing here
 *    animates those on reveal targets.
 */

/* ==========================================================================
   1. TOKENS — remap the portal palette, add the winter-night set
   ========================================================================== */
:root {
	/* Night primitives. Blue, not purple: a cold, clear winter night. */
	--fs-night: #07111D;
	--fs-midnight: #0D1F34;
	--fs-sky: #163452;
	--fs-horizon: #2B5276;
	--fs-ink: #18212E;
	--fs-ink-soft: #4C5666;
	--fs-snow: #F4F8FC;
	--fs-snow-shade: #C5D5E7;
	--fs-snow-deep: #9AB2CD;
	--fs-frost: #E4EDF6;
	/* Inside the windows: lamp-lit paper white. */
	--fs-window: #FFF5E1;
	--fs-window-hi: #FFFAEF;
	--fs-window-lo: #FBE9C6;
	--fs-glow: 255, 196, 102; /* rgb of the lamplight, for rgba() */
	--fs-frame: #3D2A20;
	--fs-frame-hi: #5C4131;
	--fs-paint: #F6EAD2;
	/* The bulbs. Red and green are the classics; gold, blue and orange keep
	   it a strand of lights and not a two-colour scheme. */
	--fs-red: #E0443C;
	--fs-gold: #F6B93B;
	--fs-gold-hi: #FFD06A;
	--fs-green: #2FA862;
	--fs-blue: #3D8BE8;
	--fs-orange: #F07B2C;
	/* Red dark enough to be text on the window paper. */
	--fs-cranberry: #A8262F;
	--fs-cranberry-ink: #841C24;
	--fs-pine: #1B3A32;
	--fs-font-display: 'Grandstander', 'Fredoka', 'Arial Rounded MT Bold', sans-serif;
	--fs-font-body: 'M PLUS Rounded 1c', 'Nunito', 'Segoe UI', sans-serif;
	--fs-line: rgba(24, 33, 46, .18);
	--fs-line-mid: rgba(24, 33, 46, .36);
	/* A lit window on a dark wall: a hairline of shadow, then lamplight. */
	--fs-window-shadow: 0 2px 0 rgba(3, 8, 16, .45), 0 0 26px rgba(var(--fs-glow), .16);
	--fs-window-shadow-hi: 0 2px 0 rgba(3, 8, 16, .45), 0 0 0 2px rgba(var(--fs-glow), .55), 0 0 56px rgba(var(--fs-glow), .55);
	/* Snow piled on a ledge. Stretched to whatever it sits on. */
	--fs-snowcap: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'><path d='M0 26 C2 14 10 9 22 10 C30 2 46 2 56 8 C68 3 84 5 92 11 C104 4 124 3 134 9 C146 5 160 6 168 11 C182 3 202 4 212 10 C224 5 240 6 248 11 C262 4 284 6 292 14 C298 17 300 22 300 26 C296 30 4 30 0 26 Z' fill='%23F4F8FC'/><path d='M0 26 C40 22 70 25 110 23 C150 21 200 25 240 22 C270 21 290 23 300 26 C296 30 4 30 0 26 Z' fill='%23C5D5E7'/></svg>");
	--fs-snowcap-2: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'><path d='M0 26 C1 16 8 12 18 13 C26 4 44 2 58 7 C66 9 72 12 78 12 C92 2 116 2 128 10 C140 6 150 8 156 12 C170 1 196 1 210 9 C222 4 236 4 246 10 C258 6 272 8 280 12 C292 12 300 18 300 26 C296 30 4 30 0 26 Z' fill='%23F4F8FC'/><path d='M0 26 C30 23 80 24 120 22 C170 21 220 24 260 22 C280 22 294 23 300 26 C296 30 4 30 0 26 Z' fill='%23C5D5E7'/></svg>");
	--fs-snowcap-3: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'><path d='M0 26 C2 18 6 14 14 14 C22 8 32 6 42 10 C56 1 80 0 94 7 C104 4 114 6 120 10 C134 4 148 5 156 10 C168 4 182 3 194 8 C210 1 238 2 252 9 C264 6 278 8 286 13 C296 15 300 20 300 26 C296 30 4 30 0 26 Z' fill='%23F4F8FC'/><path d='M0 26 C40 23 90 25 140 22 C180 21 230 24 270 22 C286 22 296 24 300 26 C296 30 4 30 0 26 Z' fill='%23C5D5E7'/></svg>");
	/* A six-armed snowflake, used as a small mark in the sidebar. */
	--fs-flake: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><g fill='none' stroke='%233D8BE8' stroke-width='2' stroke-linecap='round'><path id='a' d='M0 -10 V10 M0 -6 L-3 -9 M0 -6 L3 -9 M0 6 L-3 9 M0 6 L3 9'/><use href='%23a' transform='rotate(60)'/><use href='%23a' transform='rotate(120)'/></g></svg>");
	--fs-ease: cubic-bezier(.22, 1, .36, 1);
	/* z ladder: world 0 < capy sky 1 < #page 10 < header 6 (inside #page) */
	--fs-z-hud: 300;

	/* Portal token overrides — most of the retheme happens right here. */
	--ntw-bg: var(--fs-midnight);
	--ntw-surface: var(--fs-window);
	--ntw-border: var(--fs-line);
	--ntw-text: var(--fs-ink);
	--ntw-muted: var(--fs-ink-soft);
	--ntw-brand: var(--fs-cranberry);
	--ntw-brand-dark: var(--fs-cranberry-ink);
	--ntw-accent: var(--fs-cranberry); /* text on paper and under white text (pricing tabs, map labels), so it stays dark */
	--ntw-info: #2F6FC8;
	--ntw-radius: 5px;
	--ntw-shadow: var(--fs-window-shadow);
	--ntw-glow: 0 0 0 3px rgba(246, 185, 59, .65);
	--ntw-accent-line: linear-gradient(90deg, var(--fs-red), var(--fs-gold), var(--fs-green));
	--ntw-fx-rgb: 246, 185, 59; /* motion.js pulse/highlight color */
}

/* ==========================================================================
   2. BASE — body, type, links, selection
   ========================================================================== */
body {
	background: var(--ntw-bg);
	color: var(--fs-ink);
	font-family: var(--fs-font-body);
	font-weight: 500;
}

::selection {
	background: var(--fs-gold-hi);
	color: var(--fs-ink);
}

html {
	scrollbar-color: var(--fs-horizon) var(--fs-midnight);
}

a { color: var(--fs-cranberry); }
a:visited { color: var(--fs-cranberry); }
a:hover,
a:focus,
a:active { color: var(--fs-cranberry-ink); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fs-font-display);
	font-weight: 700;
	color: var(--fs-ink);
}

pre {
	background: var(--fs-window-lo);
	border: 2px solid var(--fs-line);
}

code,
kbd,
tt { color: var(--fs-cranberry); }

mark,
ins {
	background: rgba(246, 185, 59, .45);
	color: var(--fs-ink);
}

hr { background-color: var(--fs-line-mid); }

.skip-link.screen-reader-text:focus {
	background: var(--fs-window);
	color: var(--fs-ink);
	box-shadow: 0 0 0 2px var(--fs-ink);
}

/* Content rides above the night; the column itself is see-through so the
   sky, the pine and the lamp show around the windows. */
#page.site {
	position: relative;
	z-index: 10;
	background: transparent;
}

/* ==========================================================================
   3. WORLD — the snowy night (DOM injected by firstsnow.js)
   ========================================================================== */
.fs-world {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	/* Two thin star grids: it's clouding over for snow, so not many. */
	background:
		radial-gradient(circle, rgba(255, 255, 255, .55) 0 .9px, transparent 1.5px) 0 0 / 113px 97px,
		radial-gradient(circle, rgba(220, 235, 255, .4) 0 1px, transparent 1.7px) 51px 37px / 167px 139px,
		linear-gradient(180deg, var(--fs-night) 0%, var(--fs-midnight) 38%, var(--fs-sky) 70%, var(--fs-horizon) 100%);
}

/* Moonlight on the right, lamplight on the left. */
.fs-world::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle 26vw at 82% 16%, rgba(214, 230, 255, .12), transparent 70%),
		radial-gradient(ellipse 22vw 30vh at 27% 34%, rgba(var(--fs-glow), .12), transparent 70%);
}

.fs-moon,
.fs-pine,
.fs-lamp,
.fs-hills,
.fs-ground {
	position: absolute;
}

.fs-moon svg,
.fs-pine svg,
.fs-lamp svg,
.fs-hills svg,
.fs-ground svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.fs-moon {
	right: 17vw;
	top: 21vh;
	width: 92px;
	height: 92px;
}

.fs-moon::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 260px;
	height: 260px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(226, 238, 255, .22) 0%, rgba(226, 238, 255, .06) 45%, transparent 70%);
}

/* The far hills with the town's lit windows, then the near drifts. */
.fs-hills {
	left: 0;
	right: 0;
	bottom: 11vh;
	height: 24vh;
}

.fs-ground {
	left: 0;
	right: 0;
	bottom: 0;
	height: 14vh;
}

/* The decorated pine stands on the right, the street lamp on the left. */
.fs-pine {
	right: -1vw;
	bottom: 7vh;
	width: min(24vw, 330px);
	height: 66vh;
}

.fs-lamp {
	left: calc(250px + 3.5vw);
	bottom: 8vh;
	width: 92px;
	height: 64vh;
}

.fs-lamp__glow {
	position: absolute;
	left: 50%;
	top: 6%;
	width: 300px;
	height: 300px;
	transform: translate(-50%, -30%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--fs-glow), .32) 0%, rgba(var(--fs-glow), .1) 38%, transparent 68%);
}

/* The pine's little lights twinkle in three out-of-step groups. */
html.fs-motion .fs-pine .tw-1 { animation: fs-twinkle 2.6s ease-in-out infinite alternate; }
html.fs-motion .fs-pine .tw-2 { animation: fs-twinkle 3.4s ease-in-out -1.2s infinite alternate; }
html.fs-motion .fs-pine .tw-3 { animation: fs-twinkle 2.1s ease-in-out -.6s infinite alternate; }

@keyframes fs-twinkle {
	from { opacity: 1; }
	to { opacity: .35; }
}

/* Phones stack the header and menu on top, and there's no gutter: the
   lamp goes, the pine shrinks into the corner. */
@media (max-width: 900px) {
	.fs-lamp { display: none; }

	.fs-pine {
		width: 44vw;
		height: 40vh;
		right: -12vw;
		bottom: 0;
	}

	.fs-moon {
		top: 36vh;
		right: 5vw;
		width: 54px;
		height: 54px;
	}
}

/* Snowfall: one canvas, drawn by firstsnow.js. */
.fs-snow {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   4. THE STRAND — big bulbs swagged across the top of the content column
   ========================================================================== */
.site-content-col { position: relative; }

.fs-lights {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 4;
	height: 92px;
	overflow: hidden;
	pointer-events: none;
}

.fs-lights > svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.fs-bulb {
	position: absolute;
	width: 21px;
	height: 40px;
	margin-left: -10.5px;
	transform-origin: 50% 0;
}

.fs-bulb svg {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.fs-bulb__glow {
	position: absolute;
	left: 50%;
	top: 64%;
	width: 64px;
	height: 64px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, var(--bulb) 0%, transparent 66%);
	opacity: .5;
}

/* Before the arrival lights them up (and with JS but no motion, never). */
.fs-bulb.is-off .fs-bulb__glow { opacity: 0; }
.fs-bulb.is-off .fs-bulb__glass { fill: #6E7684; }
.fs-bulb.is-off .fs-bulb__shine { opacity: .25; }

html.fs-motion .fs-bulb:not(.is-off) .fs-bulb__glow {
	animation: fs-bulb 3.2s ease-in-out infinite alternate;
	animation-delay: var(--delay, 0s);
}

@keyframes fs-bulb {
	0%, 70% { opacity: .5; }
	100% { opacity: .22; }
}

/* ==========================================================================
   5. GIFT TAG — beside the logo (DOM injected by firstsnow.js)
   ========================================================================== */
/* A kraft gift tag, tied on with red-and-white twine, the hole on the left. */
.fs-tag {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	max-width: 250px;
	margin-left: 34px;
	padding: .35rem .9rem .4rem 1.55rem;
	font-family: var(--fs-font-display);
	font-weight: 600;
	font-size: .8rem;
	line-height: 1.25;
	color: var(--fs-ink);
	background:
		radial-gradient(circle at 11px 50%, var(--fs-snow) 0 3.5px, var(--fs-frame) 3.6px 5px, transparent 5.2px),
		#D9B886;
	clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
	filter: drop-shadow(0 2px 0 rgba(24, 33, 46, .35));
	transform: rotate(2deg);
	cursor: default;
}

.fs-tag__to {
	font-weight: 800;
	color: var(--fs-cranberry);
}

/* The twine, looped back toward the logo. */
.fs-tag-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.fs-tag-wrap::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 50%;
	width: 42px;
	height: 18px;
	transform: translateY(-62%);
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 18'><path d='M42 12 C30 16 22 2 10 6 C4 8 2 12 6 14' fill='none' stroke='%23F4F8FC' stroke-width='3' stroke-linecap='round'/><path d='M42 12 C30 16 22 2 10 6 C4 8 2 12 6 14' fill='none' stroke='%23D8323A' stroke-width='3' stroke-dasharray='3 3' stroke-linecap='round'/></svg>") center / contain no-repeat;
}

@media (max-width: 900px) {
	.fs-tag-wrap { display: none; }
}

/* ==========================================================================
   6. SITE CHROME — header as the snowy eave, the toggle, sidebar, footer
   ========================================================================== */
.site-header {
	position: relative;
	z-index: 6;
	background: rgba(244, 248, 252, .96);
	border-bottom: 0;
	box-shadow: none;
	backdrop-filter: blur(5px);
}

/* Snow hanging over the edge of the eave, with icicles. */
.site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 22px;
	margin-top: -2px;
	pointer-events: none;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 22'><g fill='%23DDEAF6' stroke='%23B9CCE0' stroke-width='1'><path d='M14 4 L17 19 L20 4 Z'/><path d='M38 4 L40 12 L42 4 Z'/><path d='M61 4 L64.5 21 L68 4 Z'/><path d='M96 4 L98 11 L100 4 Z'/><path d='M118 4 L121 17 L124 4 Z'/><path d='M148 4 L150 9 L152 4 Z'/><path d='M163 4 L165.5 15 L168 4 Z'/></g><path d='M0 0 H180 V3 C170 7 160 4 150 6 C138 8 128 4 116 6 C104 8 92 4 80 6 C68 8 56 4 44 6 C32 8 20 4 10 6 C6 7 2 5 0 3 Z' fill='%23F4F8FC'/></svg>") 0 0 / 180px 22px repeat-x;
}

.site-title a,
.site-title a:visited { color: var(--fs-ink); }

.site-description {
	font-family: var(--fs-font-body);
	color: var(--fs-ink-soft);
}

/* The toggle, engaged: a lit gold bulb of a button. Every button on the
   porch is this: warm fill, ink line, a glow when you're on it. */
.ntw-view-toggle {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .5rem 1.15rem .55rem;
	border: 2px solid var(--fs-ink);
	border-radius: 999px;
	background: var(--fs-gold);
	font-family: var(--fs-font-display);
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--fs-ink);
	box-shadow: 0 2px 0 var(--fs-ink), 0 0 16px rgba(246, 185, 59, .45);
	transition: background 140ms var(--fs-ease), box-shadow 140ms var(--fs-ease);
}

.ntw-view-toggle:hover,
.ntw-view-toggle:focus-visible {
	color: var(--fs-ink);
	border-color: var(--fs-ink);
	background: var(--fs-gold-hi);
	box-shadow: 0 2px 0 var(--fs-ink), 0 0 26px rgba(246, 185, 59, .8);
	outline: none;
}

.ntw-view-toggle:focus-visible {
	box-shadow: 0 2px 0 var(--fs-ink), 0 0 0 4px rgba(61, 139, 232, .55);
}

.site-sidebar {
	background: rgba(244, 248, 252, .95);
	border-right: 0;
	box-shadow: inset -3px 0 0 var(--fs-snow-shade);
	backdrop-filter: blur(5px);
}

.site-sidebar-section + .site-sidebar-section {
	border-top: 2px solid var(--fs-frost);
}

.site-sidebar-heading {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--fs-font-display);
	font-weight: 700;
	font-size: .86rem;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--fs-ink-soft);
}

.site-sidebar-heading::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	background: var(--fs-flake) center / contain no-repeat;
}

.main-navigation ul {
	font-family: var(--fs-font-body);
	font-weight: 700;
}

.main-navigation a {
	border-radius: 8px;
	color: var(--fs-ink-soft);
	transition: color 140ms var(--fs-ease), background 140ms var(--fs-ease);
}

.main-navigation a:hover {
	color: var(--fs-cranberry);
	background: rgba(61, 139, 232, .1);
}

/* The page you're on is the lit window. */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--fs-ink);
	background: var(--fs-window);
	box-shadow: inset 0 0 0 2px var(--fs-frame), 0 0 14px rgba(var(--fs-glow), .4);
}

.quick-link-ext { color: var(--fs-ink-soft); opacity: .7; }
.quick-links-menu a:hover .quick-link-ext { color: var(--fs-cranberry); opacity: 1; }

.regional-sites-toggle {
	font-family: var(--fs-font-body);
	font-weight: 700;
	border-radius: 8px;
	color: var(--fs-ink-soft);
}

.regional-sites-toggle:hover,
.regional-sites-toggle:focus-visible {
	color: var(--fs-cranberry);
	background: rgba(61, 139, 232, .1);
	box-shadow: none;
}

.regional-flyout {
	background: var(--fs-snow);
	border-right: 2px solid var(--fs-snow-shade);
}

.regional-flyout-back { color: var(--fs-ink-soft); }

.regional-flyout-back:hover,
.regional-flyout-back:focus-visible {
	color: var(--fs-cranberry);
	background: rgba(61, 139, 232, .1);
	box-shadow: none;
}

.regional-site-host {
	font-family: var(--fs-font-body);
	color: var(--fs-ink-soft);
}

.main-navigation .menu-toggle {
	background: var(--fs-gold);
	border: 2px solid var(--fs-ink);
	border-radius: 999px;
	color: var(--fs-ink);
	font-family: var(--fs-font-display);
	font-weight: 700;
	box-shadow: 0 2px 0 var(--fs-ink);
}

@media (max-width: 900px) {
	.site-sidebar {
		box-shadow: inset 0 -3px 0 var(--fs-snow-shade);
	}
}

/* The footer is a snowbank. The peeker rises from behind its lumpy top. */
.site-footer {
	position: relative;
	margin-top: 4.5rem;
	padding-bottom: 2.5rem;
	background: linear-gradient(180deg, var(--fs-snow) 0%, #E2ECF6 60%, var(--fs-snow-shade) 100%);
	border-top: 0;
}

.site-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% - 2px);
	z-index: 2;
	height: 26px;
	pointer-events: none;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 26' preserveAspectRatio='none'><path d='M0 26 V14 C14 6 30 4 44 10 C58 2 82 0 96 8 C110 4 122 6 132 11 C148 1 172 1 188 9 C200 5 214 5 226 10 C232 12 238 12 240 14 V26 Z' fill='%23F4F8FC'/></svg>") 0 100% / 240px 26px repeat-x;
}

.site-footer .site-info {
	position: relative;
	z-index: 2;
	font-family: var(--fs-font-body);
	font-weight: 700;
	color: var(--fs-ink-soft);
}

/* ==========================================================================
   7. HERO — porch light, a wooden sled, and the painted sign
   ========================================================================== */
/* The top padding is the strand's headroom plus the hat's. */
.ntw-hero {
	position: relative;
	padding: 8rem 0 2.2rem;
}

/* The warm pool of porch light he's sitting in. */
.ntw-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 0;
	width: min(600px, 100%);
	height: 480px;
	transform: translateX(-50%);
	pointer-events: none;
	background: radial-gradient(ellipse 50% 58% at 50% 46%, rgba(var(--fs-glow), .2) 0%, rgba(var(--fs-glow), .07) 45%, transparent 72%);
}

.ntw-hero-mascot {
	position: relative;
	z-index: 2;
	width: 176px;
	margin: 0 auto 1.9rem;
	filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .45));
	animation: none; /* he sits still; the snow does the moving */
}

/* Santa hat on his crown, tipped a little (element added by firstsnow.js). */
.fs-hero-hat {
	position: absolute;
	z-index: 3;
	left: calc(50% - 58px);
	top: calc(8rem - 52px);
	width: 122px;
	height: auto;
	transform: rotate(9deg);
	transform-origin: 40% 90%;
	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .4));
	pointer-events: none;
}

/* The wooden sled under him: slats, then red runners curling up in front. */
.ntw-hero::before {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(8rem + 174px);
	z-index: 1;
	width: 300px;
	height: 58px;
	transform: translateX(-50%);
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 58'><path d='M30 18 L258 18 L264 34 L24 34 Z' fill='%238A5A36' stroke='%2318212E' stroke-width='3' stroke-linejoin='round'/><path d='M40 22 L250 22 M36 28 L254 28' stroke='%23B07A4C' stroke-width='2'/><path d='M60 34 L60 44 M240 34 L240 44 M150 34 L150 44' stroke='%2318212E' stroke-width='5' stroke-linecap='round'/><path d='M10 46 L262 46 C286 46 296 34 290 22 C286 14 276 14 274 22' fill='none' stroke='%2318212E' stroke-width='9' stroke-linecap='round'/><path d='M10 46 L262 46 C286 46 296 34 290 22 C286 14 276 14 274 22' fill='none' stroke='%23C8323A' stroke-width='5' stroke-linecap='round'/></svg>") center / 100% 100% no-repeat;
}

/* The title is a painted wooden sign with snow on it. */
.ntw-hero-title {
	position: relative;
	display: inline-block;
	margin: 0 0 1rem;
	padding: .5rem 1.7rem .45rem;
	font-family: var(--fs-font-display);
	font-weight: 800;
	font-size: 2.4rem;
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--fs-ink);
	background: var(--fs-paint);
	border: 5px solid var(--fs-frame);
	border-radius: 6px;
	box-shadow: 0 3px 0 rgba(3, 8, 16, .5), 0 0 30px rgba(var(--fs-glow), .22);
}

/* One rule for every ledge that has snow on it. */
.ntw-hero-title::before,
.ntw-tile::before,
body:not(.page-template-page-dashboard) .site-main::before,
.login form::before {
	content: "";
	position: absolute;
	left: -10px;
	right: -10px;
	top: -19px;
	height: 24px;
	background: var(--fs-snowcap) 0 0 / 100% 100% no-repeat;
	pointer-events: none;
	filter: drop-shadow(0 1px 0 rgba(24, 33, 46, .18));
}

.ntw-hero-subtitle {
	font-family: var(--fs-font-body);
	font-weight: 700;
	font-size: 1.05rem;
	color: #E4EDF7;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 0 12px rgba(7, 17, 29, .85);
}

/* On phones the subtitle lands over the moonlit hills and the pine, so it
   gets a patch of night behind it. */
@media (max-width: 900px) {
	.ntw-hero-subtitle {
		display: inline-block;
		padding: .25rem .8rem;
		background: rgba(13, 31, 52, .78);
		border-radius: 12px;
	}
}

/* ==========================================================================
   8. COMPONENTS — tiles as lit windows, cards, buttons, group titles
   ========================================================================== */
/* The row gap leaves room for each window's snow above and sill below. */
.ntw-tile-grid {
	gap: 2.6rem 1.4rem;
	padding-top: .6rem;
}

/* A window: wood frame, lamp-lit inside, frost creeping in at two corners.
   --lamp is how bright the lamp inside is turned up. */
.ntw-tile {
	--lamp: .26;
	overflow: visible;
	background:
		radial-gradient(circle at 100% 0, rgba(255, 255, 255, .95) 0, rgba(228, 237, 246, .7) 10px, rgba(228, 237, 246, 0) 34px),
		radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .9) 0, rgba(228, 237, 246, .6) 9px, rgba(228, 237, 246, 0) 30px),
		radial-gradient(ellipse 90% 70% at 40% 100%, rgba(var(--fs-glow), var(--lamp)), transparent 70%),
		linear-gradient(180deg, var(--fs-window-hi), var(--fs-window));
	border: 6px solid var(--fs-frame);
	border-radius: 4px;
	box-shadow: var(--fs-window-shadow);
	transition: box-shadow 220ms var(--fs-ease), background-color 220ms var(--fs-ease);
}

.ntw-tile:nth-child(3n+2)::before { background-image: var(--fs-snowcap-2); }
.ntw-tile:nth-child(3n)::before { background-image: var(--fs-snowcap-3); }

/* The sill, with its own strip of snow. Replaces portal.css's accent line. */
.ntw-tile::after {
	content: "";
	top: auto;
	left: -9px;
	right: -9px;
	bottom: -17px;
	height: 11px;
	background: linear-gradient(180deg, var(--fs-snow) 0 4px, var(--fs-snow-shade) 4px 5px, var(--fs-frame-hi) 5px);
	border-radius: 3px 3px 2px 2px;
	box-shadow: 0 3px 0 rgba(3, 8, 16, .4);
	transform: none;
	transition: none;
}

.ntw-tile:hover::after,
.ntw-tile:focus-visible::after {
	transform: none;
}

/* Hover turns the lamp up inside. */
.ntw-tile:hover,
.ntw-tile:focus-visible {
	--lamp: .62;
}

.ntw-tile:hover {
	transform: none;
	border-color: var(--fs-frame);
	box-shadow: var(--fs-window-shadow-hi);
}

.ntw-tile:focus-visible {
	box-shadow: var(--fs-window-shadow-hi), 0 0 0 4px rgba(61, 139, 232, .7);
}

/* Icons: the glyph on a glass bauble, each window a different colour. */
.ntw-tile-icon {
	--bauble: var(--fs-red);
	position: relative;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 6px 0 .3rem;
	font-size: 20px;
	color: #fff;
	background:
		radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .85) 0 3px, rgba(255, 255, 255, .25) 7px, transparent 13px),
		radial-gradient(circle at 60% 70%, transparent 50%, rgba(0, 0, 0, .22) 100%),
		var(--bauble);
	border: 2px solid var(--fs-ink);
	border-radius: 50%;
	box-shadow: 0 2px 0 rgba(24, 33, 46, .25);
}

/* The bauble's cap and hook. */
.ntw-tile-icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -9px;
	width: 14px;
	height: 9px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, #8C96A3, #E3E8EE 45%, #8C96A3);
	border: 2px solid var(--fs-ink);
	border-radius: 3px 3px 1px 1px;
}

.ntw-tile:nth-child(5n+2) .ntw-tile-icon { --bauble: var(--fs-green); }
.ntw-tile:nth-child(5n+3) .ntw-tile-icon { --bauble: var(--fs-gold); color: var(--fs-ink); }
.ntw-tile:nth-child(5n+4) .ntw-tile-icon { --bauble: var(--fs-blue); }
.ntw-tile:nth-child(5n) .ntw-tile-icon { --bauble: var(--fs-orange); }

.ntw-tile-title,
.ntw-card-title {
	font-family: var(--fs-font-display);
	font-weight: 700;
	color: var(--fs-ink);
}

.ntw-tile-title { font-size: 1.2rem; }

.ntw-tile-desc,
.ntw-card-summary,
.ntw-card-meta {
	color: var(--fs-ink-soft);
	font-weight: 500;
}

.ntw-card-title a { text-decoration: none; }

/* Cards are smaller windows: same frame and frost, no snow to clear. */
.ntw-card,
.ntw-dashboard-content {
	background:
		radial-gradient(circle at 100% 0, rgba(255, 255, 255, .9) 0, rgba(228, 237, 246, .6) 8px, rgba(228, 237, 246, 0) 26px),
		var(--fs-window);
	border: 4px solid var(--fs-frame);
	border-radius: 4px;
	box-shadow: var(--fs-window-shadow);
}

.ntw-card { position: relative; }

/* Section titles get a candy-stripe underline. */
.ntw-group-title {
	position: relative;
	display: inline-block;
	padding-bottom: .45rem;
	font-family: var(--fs-font-display);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--fs-ink);
}

.ntw-group-title::after,
.ntw-page-title::after,
.site-main .page-title::after,
.site-main .entry-header .entry-title::after {
	content: "";
	display: block;
	width: 68px;
	height: 6px;
	margin-top: .35rem;
	background: repeating-linear-gradient(-45deg, var(--fs-red) 0 5px, #fff 5px 10px);
	border: 1.5px solid var(--fs-ink);
	border-radius: 4px;
}

.ntw-dashboard-content {
	border-left: 4px solid var(--fs-frame);
}

/* Buttons: lit gold for the primary, a frosted pane for the ghost. */
.ntw-button,
.wp-block-button__link {
	background: var(--fs-gold);
	border: 2px solid var(--fs-ink);
	border-radius: 999px;
	color: var(--fs-ink);
	font-family: var(--fs-font-display);
	font-weight: 700;
	box-shadow: 0 2px 0 var(--fs-ink);
	transition: background 140ms var(--fs-ease), box-shadow 140ms var(--fs-ease);
}

.ntw-button:hover,
.ntw-button:focus-visible,
.wp-block-button__link:hover {
	background: var(--fs-gold-hi);
	color: var(--fs-ink);
	transform: none;
	box-shadow: 0 2px 0 var(--fs-ink), 0 0 18px rgba(246, 185, 59, .6);
}

.ntw-button:active {
	transform: none;
	box-shadow: 0 1px 0 var(--fs-ink);
}

.ntw-button--ghost {
	background: var(--fs-frost);
	color: var(--fs-ink);
}

.ntw-button--ghost:hover,
.ntw-button--ghost:focus-visible {
	background: #fff;
	color: var(--fs-ink);
}

/* Tables & pills (other templates). */
.ntw-table {
	background: var(--fs-window-hi);
	border: 2px solid var(--fs-frame);
	border-radius: 4px;
}

.ntw-table thead th {
	background: var(--fs-frost);
	color: var(--fs-ink);
	font-family: var(--fs-font-display);
	font-weight: 700;
	border-bottom: 2px solid var(--fs-line-mid);
}

.ntw-table tbody tr:hover { background: rgba(246, 185, 59, .16); }

.ntw-status {
	border-radius: 999px;
	border: 1.5px solid var(--fs-ink);
	font-family: var(--fs-font-display);
	font-weight: 700;
	box-shadow: none;
}

/* ==========================================================================
   9. CAPY — hat, peeker, quip balloon, drifters
   ========================================================================== */
.ntw-capy-sky { z-index: 1; }

/* The drifters are out in the snow tonight: a little moonlit, mostly
   just dim, so they don't read as ghosts. */
.ntw-capy-drifter {
	max-width: 120px;
	filter: saturate(.6) brightness(.95) drop-shadow(0 0 10px rgba(214, 232, 255, .35)) opacity(.38);
}

/* The peek window grows upward to leave room for the hat; the rig keeps
   the photo where portal.css had it (head and shoulders showing). */
.ntw-capy-peek {
	width: 96px;
	height: 128px;
	z-index: 1;
}

.ntw-capy-peek-rig {
	position: absolute;
	left: 0;
	right: 0;
	top: 40px;
	will-change: transform;
}

.ntw-capy-peek-img { will-change: auto; }

.ntw-capy-peek-hat {
	position: absolute;
	top: -26px;
	left: 14px;
	width: 70px;
	height: auto;
	transform: rotate(8deg);
	transform-origin: 40% 90%;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4));
	pointer-events: none;
}

.ntw-capy-quip {
	bottom: calc(100% + 116px);
	background: #fff;
	border: 2px solid var(--fs-ink);
	border-radius: 18px;
	border-bottom-right-radius: 4px;
	box-shadow: 0 3px 0 rgba(24, 33, 46, .35);
	font-family: var(--fs-font-display);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--fs-ink);
}

.ntw-capy-quip::after {
	background: #fff;
	border-right: 2px solid var(--fs-ink);
	border-bottom: 2px solid var(--fs-ink);
}

.ntw-capy-empty-home { color: var(--fs-cranberry); }

/* ==========================================================================
   10. INNER PAGES — one big lit window
   ========================================================================== */
/* Inside the content column --ntw-bg goes back to being a light tint:
   portal.css, requests.css, suggestions.css and freight.css all use it as a
   fill (selected product, fastener cells, ref-table heads, attachments,
   plan rows, the freight plane), and night blue there would bury the ink.
   The body keeps the night from :root. */
.site-main {
	--ntw-bg: var(--fs-window-lo);
}

/* The home page is the house front itself. Every other room is one big lit
   window with snow along the top, so forms, tables, entry text and each
   feature page keep ink on paper without restating their colours. */
body:not(.page-template-page-dashboard) .site-content-col {
	padding: 7rem 1.5rem 0;
}

body:not(.page-template-page-dashboard) .site-main {
	position: relative;
	padding: 2.4rem 2.25rem 3rem;
	color: var(--fs-ink);
	background:
		radial-gradient(circle at 100% 0, rgba(255, 255, 255, .95) 0, rgba(228, 237, 246, .6) 14px, rgba(228, 237, 246, 0) 48px),
		radial-gradient(circle at 0 100%, rgba(255, 255, 255, .9) 0, rgba(228, 237, 246, .5) 12px, rgba(228, 237, 246, 0) 40px),
		var(--fs-window);
	border: 7px solid var(--fs-frame);
	border-radius: 5px;
	box-shadow: 0 3px 0 rgba(3, 8, 16, .5), 0 0 60px rgba(var(--fs-glow), .18);
}

body:not(.page-template-page-dashboard) .site-main::before {
	left: -14px;
	right: -14px;
	top: -24px;
	height: 30px;
}

@media (max-width: 600px) {
	body:not(.page-template-page-dashboard) .site-content-col {
		padding: 6.5rem .75rem 0;
	}

	body:not(.page-template-page-dashboard) .site-main {
		padding: 1.8rem 1rem 2rem;
	}
}

/* Page titles: the display face with the candy-stripe underline. */
.ntw-page-title,
.site-main .page-title,
.site-main .entry-header .entry-title {
	font-family: var(--fs-font-display);
	font-weight: 800;
	font-size: 1.95rem;
	line-height: 1.2;
	color: var(--fs-ink);
}

/* The 404 capy centres its title, so the stripe follows. */
.ntw-capy-empty .page-title::after {
	margin-inline: auto;
}

.ntw-page-subtitle {
	margin-top: .6rem;
	font-family: var(--fs-font-body);
	font-weight: 700;
	color: var(--fs-ink-soft);
}

.ntw-back-link a { color: var(--fs-ink-soft); }
.ntw-back-link a:hover { color: var(--fs-cranberry); }

/* Pale-green literals in portal.css / requests.css / suggestions.css become
   frost blue. */
.regional-flyout-back:hover,
.ntw-req-tab:hover {
	background: rgba(61, 139, 232, .12);
}

.ntw-req-tab {
	border: 1.5px solid var(--fs-line-mid);
	border-radius: 999px;
	font-family: var(--fs-font-display);
	font-weight: 700;
	color: var(--fs-ink-soft);
}

.ntw-req-tab.is-active,
.ntw-req-tab[aria-selected="true"] {
	background: var(--fs-gold);
	border-color: var(--fs-ink);
	color: var(--fs-ink);
}

.ntw-req-guidance {
	background: var(--fs-frost);
	border: 1.5px solid var(--fs-snow-deep);
	border-radius: 4px;
	color: var(--fs-ink);
}

.ntw-req-count {
	background: var(--fs-red);
	color: #fff;
	border: 1px solid var(--fs-ink);
}

.ntw-req-modal-panel,
.ntw-req-modal {
	background: var(--fs-window);
	border: 4px solid var(--fs-frame);
	border-radius: 5px;
	box-shadow: 0 6px 0 rgba(3, 8, 16, .5);
}

.ntw-req-modal-backdrop { background: rgba(7, 17, 29, .72); }

/* My Account nests a request form inside each card; one shadow is enough. */
.ntw-acct-card .ntw-req-form { box-shadow: none; }

.ntw-req-message--team { border-color: rgba(61, 139, 232, .45); }
.ntw-req-status-btn:focus-visible { background: rgba(246, 185, 59, .3); }

.ntw-sug-step-num {
	color: var(--fs-ink);
	font-family: var(--fs-font-display);
}

/* The core search form (404, search results). */
.site-main .search-field {
	padding: .45rem .7rem;
	background: #fff;
	border: 2px solid var(--fs-line-mid);
	border-radius: 6px;
	color: var(--fs-ink);
}

.site-main .search-field:focus {
	border-color: var(--fs-ink);
	box-shadow: 0 0 0 3px rgba(61, 139, 232, .45);
	outline: none;
}

.site-main .search-submit {
	padding: .45rem 1.1rem;
	background: var(--fs-gold);
	border: 2px solid var(--fs-ink);
	border-radius: 999px;
	color: var(--fs-ink);
	font-family: var(--fs-font-display);
	font-weight: 700;
	cursor: pointer;
}

.site-main .search-submit:hover,
.site-main .search-submit:focus-visible { background: var(--fs-gold-hi); }

/* Calculator: the Area / Board toggle and the result panels. */
.ntw-segmented { border-color: var(--fs-line-mid); }

.ntw-segmented button[aria-pressed="true"] {
	background: var(--fs-gold);
	color: var(--fs-ink);
}

.ntw-calc-result,
.ntw-results-hero,
.ntw-ref-table .ntw-ref-cat td {
	background: rgba(246, 185, 59, .18);
}

/* sales-map.css: a frosted sheet under the map so the land reads. */
#ntw-map {
	background: var(--fs-frost);
	border: 2px solid var(--fs-snow-deep);
	border-radius: 6px;
}

.ntw-map-zoombar,
.ntw-map-legend {
	background: var(--fs-window-hi);
	border: 2px solid var(--fs-frame);
	border-radius: 4px;
	color: var(--fs-ink);
}

.ntw-map-zb { color: var(--fs-ink-soft); }
.ntw-map-zb:hover { background: rgba(246, 185, 59, .3); color: var(--fs-ink); }

/* Brand-as-text spots on the feature sheets: cranberry reads on the window
   paper, so they only need the darker hover. */
.ntw-table a,
.regional-sites-menu a:hover .regional-site-host,
.regional-sites-menu a:hover .quick-link-ext,
.ntw-map-legend-name:hover,
.ntw-freight .frt-method summary:hover,
.ntw-freight .frt-history summary:hover {
	color: var(--fs-cranberry);
}

.ntw-table a:hover { color: var(--fs-cranberry-ink); }

/* ==========================================================================
   11. LOGIN SCREEN (wp-login.php) — replaces the login.css literals
   ========================================================================== */
body.login {
	background: var(--ntw-bg);
	font-family: var(--fs-font-body);
}

/* wp-login has no #page wrapper; keep the form above the night (z 0) and
   the capy sky (z 1), like #page.site does on the front end. */
#login {
	position: relative;
	z-index: 10;
}

/* The capybara dozing in the corner is a snow-capybara tonight. */
body.login::after {
	bottom: 2vh;
	opacity: .22;
	filter: grayscale(.85) brightness(1.7) sepia(.15) hue-rotate(170deg) drop-shadow(0 0 14px rgba(214, 232, 255, .8));
}

/* Headroom for the hat, so it never runs off the top of a phone. */
.login h1.wp-login-logo {
	position: relative;
	margin-top: 40px;
}

.login h1 a {
	filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .45));
}

/* Santa hat on the login mascot (element added by firstsnow.js). Same
   placement as .fs-hero-hat, scaled: the logo draws capy1.webp at 156px
   tall (contain, bottom), so his crown is the h1's top edge. */
.fs-login-hat {
	position: absolute;
	left: calc(50% - 47px);
	top: -28px;
	width: 94px;
	height: auto;
	transform: rotate(7deg);
	transform-origin: 40% 90%;
	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .4));
	pointer-events: none;
}

/* The form is a lit window with snow on it. Core clips the form (overflow:
   hidden) to contain the floated Log In button; the snow has to poke out,
   so the float is cleared with ::after instead. */
.login form {
	position: relative;
	overflow: visible;
	background:
		radial-gradient(circle at 100% 0, rgba(255, 255, 255, .95) 0, rgba(228, 237, 246, .6) 10px, rgba(228, 237, 246, 0) 34px),
		var(--fs-window);
	border: 6px solid var(--fs-frame);
	border-radius: 5px;
	box-shadow: 0 3px 0 rgba(3, 8, 16, .5), 0 0 40px rgba(var(--fs-glow), .25);
}

.login form::after {
	content: "";
	display: table;
	clear: both;
}

.login label {
	color: var(--fs-ink);
	font-family: var(--fs-font-display);
	font-weight: 700;
}

.login form .input,
.login input[type="text"],
.login input[type="password"] {
	background: #fff;
	border: 2px solid var(--fs-line-mid);
	border-radius: 6px;
	color: var(--fs-ink);
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
	border-color: var(--fs-ink);
	box-shadow: 0 0 0 3px rgba(61, 139, 232, .45);
	outline: none;
}

.login .button.wp-hide-pw { color: var(--fs-ink-soft); }

.login .button.wp-hide-pw:focus {
	border-color: var(--fs-ink);
	box-shadow: 0 0 0 3px rgba(61, 139, 232, .45);
}

.wp-core-ui .button-primary {
	background: var(--fs-gold);
	border: 2px solid var(--fs-ink);
	border-radius: 999px;
	color: var(--fs-ink);
	font-family: var(--fs-font-display);
	font-weight: 700;
	text-shadow: none;
	box-shadow: 0 2px 0 var(--fs-ink);
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: var(--fs-gold-hi);
	border-color: var(--fs-ink);
	color: var(--fs-ink);
	box-shadow: 0 2px 0 var(--fs-ink), 0 0 18px rgba(246, 185, 59, .6);
}

.wp-core-ui .button-primary:focus {
	box-shadow: 0 2px 0 var(--fs-ink), 0 0 0 4px rgba(61, 139, 232, .55);
}

/* The links under the form sit on the night. */
.login #nav a,
.login #backtoblog a { color: #D6E3F2; }

.login #nav a:hover,
.login #backtoblog a:hover { color: var(--fs-gold-hi); }

.login .message,
.login .notice,
.login .success {
	background: var(--fs-window-hi);
	border: 2px solid var(--fs-frame);
	border-left: 6px solid var(--fs-green);
	border-radius: 4px;
	color: var(--fs-ink);
	box-shadow: var(--fs-window-shadow);
}

.login #login_error {
	background: var(--fs-window-hi);
	border: 2px solid var(--fs-frame);
	border-left: 6px solid var(--fs-red);
	border-radius: 4px;
	color: var(--fs-ink);
	box-shadow: var(--fs-window-shadow);
}

/* Login-screen toggle: the .login-scoped pill in login.css outweighs the
   global rule above, so restate the gold button here. */
body.login .ntw-view-toggle {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 20;
	padding: .5rem 1.15rem .55rem;
	background: var(--fs-gold);
	border: 2px solid var(--fs-ink);
	border-radius: 999px;
	font-family: var(--fs-font-display);
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fs-ink);
	box-shadow: 0 2px 0 var(--fs-ink), 0 0 16px rgba(246, 185, 59, .45);
}

body.login .ntw-view-toggle:hover,
body.login .ntw-view-toggle:focus-visible {
	color: var(--fs-ink);
	border-color: var(--fs-ink);
	background: var(--fs-gold-hi);
	box-shadow: 0 2px 0 var(--fs-ink), 0 0 0 4px rgba(61, 139, 232, .55);
	outline: none;
}

/* ==========================================================================
   12. REDUCED MOTION — kill every animation this sheet adds
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.fs-pine .tw-1,
	.fs-pine .tw-2,
	.fs-pine .tw-3,
	.fs-bulb__glow {
		animation: none !important;
	}

	.ntw-tile { transition: none; }
}