/**
 * NTW Wiki — HALLOWEEN layer ("Halloween Mode", October season).
 *
 * A not-so-scary manor in the spirit of Spooky's Jumpscare Mansion: the wiki
 * is a house with a thousand rooms, every feature is a numbered door, and the
 * only things that jump out at you are cardboard cutouts on popsicle sticks.
 * Loads after portal.css (and the feature sheets) and re-themes everything by
 * overriding the --ntw-* tokens plus the same handful of hard-coded light
 * literals fall.css and cyber.css restate.
 *
 * The look is deliberately low-budget, like the game: flat paper, crayon
 * outlines that don't quite close, notes taped to things. No bevels, no
 * drop-shadowed game buttons, no HUD bars — that was the anniversary skin.
 *
 * Contract with the JS (halloween.js):
 *  - html.hw-motion      — master gate; every *animation* is behind it, so
 *                          no-JS / reduced-motion still gets a complete page.
 *  - .hw-world           — fixed hallway backdrop (DOM injected by halloween.js).
 *  - .hw-room            — the room number, a paper tag in the corner (injected).
 *  - .hw-note            — the note taped beside the logo (injected).
 *  - .hw-cutout          — a cardboard cutout popping in from a screen edge.
 *  - .hw-hero-hat        — witch hat on the hero mascot (injected).
 *  - .hw-login-hat       — the same hat on the wp-login mascot (injected).
 *  - .ntw-capy-peek-hat  — the peeker's witch 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.
 *
 * Halloween is kept to four touches: the note by the logo, the room number,
 * the cutouts, and the witch hat. Everything else is just the house.
 */

/* ==========================================================================
   1. TOKENS — remap the portal palette, add the manor set
   ========================================================================== */
:root {
	/* Manor primitives. */
	--hw-night: #120E24;
	--hw-plum: #1F1638;
	--hw-wall: #2E2150;
	--hw-wall-hi: #3A2B63;
	--hw-ink: #2A1B3D;
	--hw-ink-soft: #5E4E7A;
	--hw-lavender: #A899D6;
	--hw-paper: #F7F2EA;
	--hw-paper-2: #ECE4D6;
	--hw-ghost: #F6F1FF;
	--hw-pumpkin: #F08A24;
	--hw-pumpkin-deep: #C96A12;
	--hw-pumpkin-burnt: #A3540A;
	--hw-candle: #FFC65C;
	--hw-candle-hi: #FFE3A3;
	--hw-slime: #A4E36A;
	--hw-slime-deep: #5E9E2E;
	--hw-cardboard: #D9B98A;
	--hw-cardboard-deep: #A9834F;
	--hw-wood: #5A3A22;
	--hw-wood-deep: #3E2816;
	--hw-font-display: 'Fredoka', 'Arial Rounded MT Bold', 'Segoe UI', sans-serif;
	--hw-font-body: 'Nunito', 'Segoe UI', sans-serif;
	--hw-font-hand: 'Gloria Hallelujah', 'Comic Sans MS', 'Segoe Print', cursive;
	--hw-line: rgba(42, 27, 61, .22);
	--hw-line-mid: rgba(42, 27, 61, .42);
	/* A sheet of paper stuck to the wall: one flat offset, no blur. */
	--hw-paper-shadow: 3px 4px 0 rgba(9, 5, 20, .35);
	/* The crayon-outline trick: mismatched radii so no two corners match. */
	--hw-wobble: 255px 15px 225px 15px / 15px 225px 15px 255px;
	--hw-wobble-2: 15px 255px 15px 225px / 225px 15px 255px 15px;
	--hw-tape: rgba(246, 241, 255, .72);
	--hw-ease: cubic-bezier(.22, 1, .36, 1);
	/* z ladder: world 0 < capy sky 1 < #page 10 < room tag 300 < cutouts 400 */
	--hw-z-hud: 300;
	--hw-z-cutout: 400;

	/* Portal token overrides — most of the retheme happens right here. */
	--ntw-bg: var(--hw-plum);
	--ntw-surface: var(--hw-paper);
	--ntw-border: var(--hw-line);
	--ntw-text: var(--hw-ink);
	--ntw-muted: var(--hw-ink-soft);
	--ntw-brand: var(--hw-pumpkin);
	--ntw-brand-dark: var(--hw-pumpkin-deep);
	--ntw-accent: var(--hw-pumpkin-burnt); /* text on paper and under white text (pricing tabs, map labels), so it stays dark */
	--ntw-info: #5C7FD6;
	--ntw-radius: 6px;
	--ntw-shadow: var(--hw-paper-shadow);
	--ntw-glow: 0 0 0 3px rgba(255, 198, 92, .55);
	--ntw-accent-line: linear-gradient(90deg, var(--hw-candle), var(--hw-pumpkin));
	--ntw-fx-rgb: 240, 138, 36; /* motion.js pulse/highlight color */
}

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

::selection {
	background: var(--hw-candle);
	color: var(--hw-ink);
}

html {
	scrollbar-color: var(--hw-ink-soft) var(--hw-plum);
}

a { color: var(--hw-pumpkin-deep); }
a:visited { color: var(--hw-pumpkin-deep); }
a:hover,
a:focus,
a:active { color: var(--hw-pumpkin-burnt); }

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

pre {
	background: var(--hw-paper-2);
	border: 2px solid var(--hw-line);
}

code,
kbd,
tt { color: var(--hw-pumpkin-deep); }

mark,
ins {
	background: rgba(255, 198, 92, .4);
	color: var(--hw-ink);
}

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

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

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

/* ==========================================================================
   3. WORLD — the hallway (DOM injected by halloween.js)
   ========================================================================== */
.hw-world {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	/* Wallpaper: a faint damask dot grid over a plum gradient, plus the soft
	   vertical stripe of old paper. */
	background:
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .07) 0 3px, transparent 4px) 0 0 / 52px 52px,
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05) 0 2px, transparent 3px) 26px 26px / 52px 52px,
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 44px, transparent 44px 88px),
		linear-gradient(180deg, var(--hw-plum) 0%, var(--hw-wall) 55%, var(--hw-wall-hi) 100%);
}

/* Warm candle wash that the sconces cast on the wall. */
.hw-world::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 34vw 40vh at 30% 30%, rgba(255, 198, 92, .14), transparent 70%),
		radial-gradient(ellipse 34vw 40vh at 71% 28%, rgba(255, 198, 92, .14), transparent 70%);
}

/* Chair rail, wainscot panels and the floor. */
.hw-world__rail {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 27vh;
	height: 10px;
	background: linear-gradient(180deg, #7A5232, #4A2E18);
	border-top: 2px solid #8E6540;
	border-bottom: 2px solid #2B1A0D;
}

.hw-world__wainscot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 15vh;
	height: 12vh;
	background:
		repeating-linear-gradient(90deg,
			transparent 0 18px,
			rgba(0, 0, 0, .28) 18px 21px,
			rgba(255, 255, 255, .06) 21px 23px,
			transparent 23px 168px,
			rgba(255, 255, 255, .06) 168px 170px,
			rgba(0, 0, 0, .28) 170px 173px,
			transparent 173px 191px),
		linear-gradient(180deg, #5A3A22 0%, #46291A 100%);
}

.hw-world__floor {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 15vh;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .45) 0, transparent 30%),
		repeating-linear-gradient(90deg, #4A2E18 0 138px, #2E1B0C 138px 142px),
		#4A2E18;
	border-top: 4px solid #2B1A0D;
}

/* Wall furniture, positioned by the JS. */
.hw-sconce,
.hw-portrait,
.hw-window,
.hw-cobweb {
	position: absolute;
}

.hw-sconce {
	width: 64px;
	height: 120px;
}

.hw-sconce svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.hw-sconce__glow {
	position: absolute;
	left: 50%;
	top: 6px;
	width: 220px;
	height: 220px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 227, 163, .32) 0%, rgba(255, 198, 92, .12) 40%, transparent 70%);
}

html.hw-motion .hw-sconce__flame {
	transform-origin: 50% 100%;
	animation: hw-flicker 1.6s ease-in-out infinite alternate;
}

html.hw-motion .hw-sconce__glow {
	animation: hw-glow 1.6s ease-in-out infinite alternate;
}

@keyframes hw-flicker {
	0% { transform: scale(1) skewX(0); }
	35% { transform: scale(1.06, .94) skewX(-4deg); }
	70% { transform: scale(.94, 1.08) skewX(3deg); }
	100% { transform: scale(1.02, 1) skewX(-2deg); }
}

@keyframes hw-glow {
	from { opacity: .85; }
	to { opacity: 1; }
}

/* Ancestral portraits: the office capybara, in oils. */
.hw-portrait {
	width: 118px;
	padding: 8px;
	background: linear-gradient(135deg, #E2B75B, #A8782B 40%, #E2B75B 60%, #8C6320);
	border: 3px solid #5A3F12;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .45), inset 0 0 0 3px #F1D48C;
}

.hw-portrait::after {
	/* the nail + wire */
	content: "";
	position: absolute;
	left: 50%;
	top: -22px;
	width: 2px;
	height: 22px;
	background: #C9B48A;
}

.hw-portrait img {
	display: block;
	width: 100%;
	height: 118px;
	object-fit: cover;
	object-position: 50% 18%;
	background: #1A1230;
	filter: sepia(.55) contrast(.95) brightness(.85);
}

.hw-portrait__plate {
	display: block;
	margin: 6px auto 0;
	width: 72%;
	padding: 1px 0;
	text-align: center;
	font-family: var(--hw-font-display);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #4A3410;
	background: var(--hw-candle);
	border: 1px solid #5A3F12;
	border-radius: 2px;
}

.hw-window {
	width: 150px;
}

.hw-window svg {
	display: block;
	width: 100%;
	height: auto;
}

.hw-cobweb {
	width: 120px;
	opacity: .45;
}

.hw-cobweb svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Bats: spawned + tweened by halloween.js. */
.hw-bat {
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 20px;
	will-change: transform;
}

.hw-bat svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

html.hw-motion .hw-bat__wing--l,
html.hw-motion .hw-bat__wing--r {
	animation: hw-flap .32s ease-in-out infinite alternate;
}

html.hw-motion .hw-bat__wing--l { transform-origin: 100% 50%; }
html.hw-motion .hw-bat__wing--r { transform-origin: 0 50%; animation-direction: alternate-reverse; }

@keyframes hw-flap {
	from { transform: scaleY(1); }
	to { transform: scaleY(.35); }
}

/* ==========================================================================
   4. ROOM NUMBER + NOTE — the whole HUD (DOM injected by halloween.js)
   ========================================================================== */
/* The game shows the room number as plain text in a corner. So do we: a
   paper tag taped up in the header, beside the toggle. */
.hw-hud-top {
	display: flex;
	align-items: center;
	gap: 18px;
}

.hw-room {
	position: relative;
	padding: .3rem .85rem .35rem;
	font-family: var(--hw-font-hand);
	font-size: .95rem;
	line-height: 1.15;
	white-space: nowrap;
	color: var(--hw-ink);
	background: #FBF6EC;
	border: 1.5px solid var(--hw-ink);
	border-radius: var(--hw-wobble);
	box-shadow: var(--hw-paper-shadow);
	transform: rotate(-2deg);
	cursor: default;
}

.hw-room small {
	display: block;
	font-size: .68rem;
	color: var(--hw-ink-soft);
}

/* One strip of tape, shared by everything that gets taped up. */
.hw-room::before,
.hw-note::before,
.ntw-hero-title::before,
.ntw-page-title::before,
.ntw-group-title::before,
.ntw-card::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -10px;
	width: 56px;
	height: 18px;
	transform: translateX(-50%) rotate(-3deg);
	background: var(--hw-tape);
	border: 1px solid rgba(42, 27, 61, .25);
	pointer-events: none;
}

/* Someone left a note by the logo. */
.hw-note {
	position: relative;
	display: inline-block;
	max-width: 232px; /* every note fits on two lines */
	margin-left: 22px;
	padding: .4rem .8rem .45rem;
	font-family: var(--hw-font-hand);
	font-size: .8rem;
	line-height: 1.3;
	color: var(--hw-ink);
	background: #FBF6EC;
	border: 1.5px solid var(--hw-ink);
	border-radius: var(--hw-wobble-2);
	box-shadow: var(--hw-paper-shadow);
	transform: rotate(2deg);
	cursor: default;
}

.hw-note::before { width: 44px; top: -9px; }

@media (max-width: 900px) {
	.hw-note { display: none; }
	.hw-room { font-size: .85rem; }
}

/* ==========================================================================
   5. SITE CHROME — header, the toggle, sidebar, footer-as-floor
   ========================================================================== */
.site-header {
	background: rgba(247, 242, 234, .94);
	border-bottom: 2px solid var(--hw-ink);
	box-shadow: none;
	backdrop-filter: blur(5px);
}

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

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

/* The toggle, engaged: a crayon-outlined paper button. Every button in the
   house is this: flat fill, wobbly ink line, nothing pushes in. */
.ntw-view-toggle {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .5rem 1.1rem .55rem;
	border: 2px solid var(--hw-ink);
	border-radius: var(--hw-wobble);
	background: var(--hw-pumpkin);
	font-family: var(--hw-font-hand);
	font-size: .9rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--hw-ink);
	box-shadow: var(--hw-paper-shadow);
	transition: background 140ms var(--hw-ease);
}

.ntw-view-toggle:hover,
.ntw-view-toggle:focus-visible {
	color: var(--hw-ink);
	border-color: var(--hw-ink);
	background: #FFA64A;
	box-shadow: var(--hw-paper-shadow);
	outline: none;
}

.ntw-view-toggle:focus-visible {
	box-shadow: var(--hw-paper-shadow), 0 0 0 3px rgba(255, 198, 92, .7);
}

.site-sidebar {
	background: rgba(247, 242, 234, .96);
	border-right: 1.5px solid var(--hw-ink);
	backdrop-filter: blur(5px);
}

.site-sidebar-section + .site-sidebar-section {
	border-top: 2px dotted var(--hw-line-mid);
}

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

/* A tiny ghost in place of the leaf: curled tip, little arms, wavy hem, so
   even at this size it reads as a sheet and not a headstone. */
.site-sidebar-heading::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 12 C30 14 20 34 20 54 L20 84 Q28 76 34 86 Q42 94 50 86 Q58 94 66 86 Q72 76 80 84 L80 54 C80 34 70 14 50 12 Z M20 58 Q6 62 8 76 Q16 72 20 66 Z M80 58 Q94 62 92 76 Q84 72 80 66 Z' fill='%23F6F1FF' stroke='%232A1B3D' stroke-width='8' stroke-linejoin='round'/><path d='M49 12 Q44 2 36 6' fill='none' stroke='%232A1B3D' stroke-width='8' stroke-linecap='round'/><ellipse cx='40' cy='50' rx='6' ry='8' fill='%232A1B3D'/><ellipse cx='60' cy='50' rx='6' ry='8' fill='%232A1B3D'/></svg>") center / contain no-repeat;
}

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

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

.main-navigation a:hover {
	color: var(--hw-pumpkin-deep);
	background: rgba(240, 138, 36, .14);
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--hw-ink);
	background: rgba(255, 198, 92, .5);
	box-shadow: inset 0 0 0 1.5px var(--hw-ink);
}

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

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

.regional-sites-toggle:hover,
.regional-sites-toggle:focus-visible {
	color: var(--hw-pumpkin-deep);
	background: rgba(240, 138, 36, .14);
	box-shadow: none;
}

.regional-flyout {
	background: var(--hw-paper);
	border-right: 2px solid var(--hw-ink);
}

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

.regional-flyout-back:hover,
.regional-flyout-back:focus-visible {
	color: var(--hw-pumpkin-deep);
	background: rgba(240, 138, 36, .14);
	box-shadow: none;
}

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

.main-navigation .menu-toggle {
	background: var(--hw-pumpkin);
	border: 2px solid var(--hw-ink);
	border-radius: var(--hw-wobble);
	color: var(--hw-ink);
	font-family: var(--hw-font-hand);
	font-weight: 400;
	box-shadow: var(--hw-paper-shadow);
}

@media (max-width: 900px) {
	.site-sidebar {
		border-right: 0;
		border-bottom: 2px solid var(--hw-ink);
	}
}

/* The footer is the floor: planks with a baseboard lip. The peeker rises
   from behind the baseboard. */
.site-footer {
	position: relative;
	margin-top: 4rem;
	padding-bottom: 2.5rem;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .4) 0, transparent 34%),
		repeating-linear-gradient(90deg, #4A2E18 0 138px, #2E1B0C 138px 142px),
		#4A2E18;
	border-top: 10px solid #6B4528;
	box-shadow: inset 0 10px 0 #2B1A0D;
}

.site-footer .site-info {
	font-family: var(--hw-font-body);
	font-weight: 700;
	color: #E6D6BF;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}

/* ==========================================================================
   6. HERO — candlelight, a rug, and the manor sign
   ========================================================================== */
/* The extra top padding is headroom for the witch hat's tip, which would
   otherwise tuck under the header. */
.ntw-hero {
	position: relative;
	padding: 2.4rem 0 2.2rem;
}

/* The candle cone behind him. */
.ntw-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -80px;
	z-index: 0;
	width: 560px;
	height: 460px;
	transform: translateX(-50%);
	pointer-events: none;
	background: radial-gradient(ellipse 50% 60% at 50% 35%, rgba(255, 227, 163, .28) 0%, rgba(255, 198, 92, .1) 45%, transparent 72%);
}

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

/* Witch hat on the hero mascot (element added by halloween.js). Sits on
   his crown: the head is centred in capy1.webp (a hair left) and touches
   the top edge, so the brim's centre (81% down the SVG) lands ~13px into
   the photo, which starts after the hero's 2.4rem top padding. Tilts
   around the brim so the brim stays put. */
.hw-hero-hat {
	position: absolute;
	z-index: 3;
	left: calc(50% - 53px);
	top: -19px;
	width: 100px;
	height: auto;
	transform: rotate(8deg);
	transform-origin: 50% 81%;
	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .45));
	pointer-events: none;
}

/* The rug under his feet: flat, a bit threadbare. */
.ntw-hero::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 230px; /* 214px + the 16px of hat headroom */
	z-index: 1;
	width: 268px;
	height: 42px;
	transform: translateX(-50%);
	border-radius: 50%;
	background:
		radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(255, 198, 92, .45) 59% 63%, transparent 64%),
		#4E2A63;
	border: 2px solid var(--hw-ink);
}

/* The title is a sheet of paper somebody lettered by hand and taped up. */
.ntw-hero-title {
	position: relative;
	display: inline-block;
	margin: 0 0 1rem;
	padding: .55rem 1.8rem .5rem;
	font-family: var(--hw-font-hand);
	font-weight: 400;
	font-size: 2.35rem;
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--hw-ink);
	background: #FBF6EC;
	border: 2px solid var(--hw-ink);
	border-radius: var(--hw-wobble-2);
	box-shadow: var(--hw-paper-shadow);
	transform: rotate(-1.5deg);
}

.ntw-hero-title::before { width: 84px; height: 22px; top: -12px; }

/* A crayon underline that doesn't quite make it across. */
.ntw-hero-title::after {
	content: "";
	position: absolute;
	left: 1.6rem;
	right: 2.4rem;
	bottom: .45rem;
	height: 5px;
	background: var(--hw-pumpkin);
	border-radius: 4px 2px 3px 2px;
	transform: rotate(-.6deg);
	opacity: .9;
}

.ntw-hero-subtitle {
	font-family: var(--hw-font-body);
	font-weight: 700;
	font-size: 1.05rem;
	color: #D9D0F2;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

/* ==========================================================================
   7. COMPONENTS — tiles as doors, cards as notes, buttons, group titles
   ========================================================================== */
.ntw-tile,
.ntw-card,
.ntw-dashboard-content {
	background: var(--hw-paper);
	border: 2px solid var(--hw-ink);
	border-radius: var(--hw-wobble);
	box-shadow: var(--hw-paper-shadow);
}

.ntw-tile:nth-child(even) { border-radius: var(--hw-wobble-2); }

/* Each tile is a door in the hallway: the little white number sign the game
   hangs on every door, top-right, and a cardboard ghost that peeks up from
   behind the bottom edge on hover (overflow:hidden on the tile does the
   "behind"). */
.ntw-tile-grid { counter-reset: room; }

.ntw-tile { counter-increment: room; }

.ntw-tile::after {
	content: "Room 0" counter(room, decimal-leading-zero);
	top: 12px;
	left: auto;
	right: 12px;
	height: auto;
	padding: 1px 9px 2px;
	font-family: var(--hw-font-hand);
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--hw-ink);
	background: #fff;
	border: 1.5px solid var(--hw-ink);
	border-radius: 2px;
	box-shadow: none;
	transform: rotate(1.5deg);
	transition: none;
}

/* portal.css sweeps its accent line in with scaleX on hover; the sign
   just stays hung. */
.ntw-tile:hover::after,
.ntw-tile:focus-visible::after {
	transform: rotate(1.5deg);
}

.ntw-tile::before {
	content: "";
	position: absolute;
	right: 4px;
	bottom: 20px;
	width: 68px;
	height: 68px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 108 108'><path d='M50 12 C30 14 20 34 20 54 L20 84 Q28 76 34 86 Q42 94 50 86 Q58 94 66 86 Q72 76 80 84 L80 54 C80 34 70 14 50 12 Z M20 58 Q6 62 8 76 Q16 72 20 66 Z M80 58 Q94 62 92 76 Q84 72 80 66 Z' fill='%23D9B98A' stroke='%23A9834F' stroke-width='16' stroke-linejoin='round'/><path d='M50 12 C30 14 20 34 20 54 L20 84 Q28 76 34 86 Q42 94 50 86 Q58 94 66 86 Q72 76 80 84 L80 54 C80 34 70 14 50 12 Z M20 58 Q6 62 8 76 Q16 72 20 66 Z M80 58 Q94 62 92 76 Q84 72 80 66 Z' fill='%23F6F1FF' stroke='%232A1B3D' stroke-width='5' stroke-linejoin='round'/><path d='M49 12 Q44 2 36 6' fill='none' stroke='%232A1B3D' stroke-width='5' stroke-linecap='round'/><ellipse cx='40' cy='50' rx='6' ry='8' fill='%232A1B3D'/><ellipse cx='60' cy='50' rx='6' ry='8' fill='%232A1B3D'/><ellipse cx='50' cy='70' rx='5' ry='6' fill='%232A1B3D'/><circle cx='31' cy='64' r='4' fill='%23F7A8B8' opacity='.8'/><circle cx='69' cy='64' r='4' fill='%23F7A8B8' opacity='.8'/></svg>") center / contain no-repeat;
	transform: translate(115%, 10%) rotate(18deg);
	transform-origin: 50% 100%;
	transition: transform 280ms var(--hw-ease);
	pointer-events: none;
}

/* He leans in from the right edge, hem and all, rather than rising out of
   the ground. */
.ntw-tile:hover::before,
.ntw-tile:focus-visible::before {
	transform: translate(14%, 0) rotate(-10deg);
}

.ntw-tile:hover {
	border-color: var(--hw-ink);
	background: #FBF6EC;
	box-shadow: 5px 6px 0 rgba(9, 5, 20, .35);
}

.ntw-tile:focus-visible {
	box-shadow: var(--hw-paper-shadow), 0 0 0 3px rgba(255, 198, 92, .8);
}

/* Icons: a crayon-scribbled pumpkin blob with the glyph inked on top. */
.ntw-tile-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: .35rem;
	font-size: 22px;
	border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
	background: var(--hw-pumpkin);
	border: 2px solid var(--hw-ink);
	box-shadow: none;
	color: var(--hw-ink);
}

.ntw-tile:nth-child(3n) .ntw-tile-icon { border-radius: 55% 45% 45% 55% / 45% 55% 45% 55%; }

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

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

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

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

/* Cards are notes left around the house: ruled paper, a strip of tape,
   hung a degree or two off true. */
.ntw-card {
	position: relative;
	background:
		repeating-linear-gradient(180deg, transparent 0 27px, rgba(42, 27, 61, .07) 27px 28px),
		#FBF6EC;
	border-width: 1.5px;
	border-radius: 3px;
	rotate: -1deg;
}

.ntw-card:nth-child(even) { rotate: .8deg; }

.ntw-card::before { width: 84px; height: 22px; top: -11px; transform: translateX(-50%) rotate(-2deg); }

.ntw-card-title { font-family: var(--hw-font-hand); font-size: 1.1rem; }

/* Section titles are little taped-up labels. */
.ntw-group-title {
	position: relative;
	display: inline-block;
	padding: .35rem 1.1rem .3rem;
	font-family: var(--hw-font-hand);
	font-weight: 400;
	font-size: 1.05rem;
	color: var(--hw-ink);
	background: #FBF6EC;
	border: 1.5px solid var(--hw-ink);
	border-radius: var(--hw-wobble-2);
	box-shadow: var(--hw-paper-shadow);
	transform: rotate(-1deg);
}

.ntw-dashboard-content {
	border-left: 2px solid var(--hw-ink);
}

/* Buttons: flat pumpkin for the primary, plain paper for the ghost, both
   with the crayon outline. */
.ntw-button,
.wp-block-button__link {
	background: var(--hw-pumpkin);
	border: 2px solid var(--hw-ink);
	border-radius: var(--hw-wobble);
	color: var(--hw-ink);
	font-family: var(--hw-font-hand);
	font-weight: 400;
	box-shadow: none;
	transition: background 140ms var(--hw-ease);
}

.ntw-button:hover,
.ntw-button:focus-visible,
.wp-block-button__link:hover {
	background: #FFA64A;
	color: var(--hw-ink);
	transform: none;
	box-shadow: none;
}

.ntw-button:active {
	transform: none;
	box-shadow: none;
}

.ntw-button--ghost {
	background: transparent;
	color: var(--hw-ink);
}

.ntw-button--ghost:hover,
.ntw-button--ghost:focus-visible {
	background: rgba(255, 198, 92, .3);
	color: var(--hw-ink);
}

/* Tables & pills (other templates). */
.ntw-table {
	background: var(--hw-paper);
	border: 1.5px solid var(--hw-ink);
	border-radius: 3px;
}

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

.ntw-table tbody tr:hover { background: rgba(255, 198, 92, .2); }

.ntw-status {
	border-radius: var(--hw-wobble);
	border: 1.5px solid var(--hw-ink);
	font-family: var(--hw-font-hand);
	font-weight: 400;
	box-shadow: none;
}

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

/* The drifters become the house ghosts: pale, glowing, half there. */
.ntw-capy-drifter {
	max-width: 130px;
	filter: grayscale(.7) brightness(1.5) drop-shadow(0 0 16px rgba(246, 241, 255, .8)) 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: 136px;
	z-index: 1;
}

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

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

.ntw-capy-peek-hat {
	position: absolute;
	top: -40px;
	right: -4px;
	width: 60px;
	height: auto;
	transform: rotate(14deg);
	transform-origin: 50% 100%;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45));
	pointer-events: none;
}

.ntw-capy-quip {
	bottom: calc(100% + 124px);
	background: #fff;
	border: 2px solid var(--hw-ink);
	border-radius: var(--hw-wobble);
	border-bottom-right-radius: 4px;
	box-shadow: var(--hw-paper-shadow);
	font-family: var(--hw-font-hand);
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--hw-ink);
}

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

.ntw-capy-empty-home { color: var(--hw-pumpkin-deep); }

/* ==========================================================================
   9. CUTOUTS — the jumpscares (spawned by halloween.js)
   ========================================================================== */
/* A cardboard cutout on a popsicle stick, parked just off a screen edge;
   GSAP slides it in, wobbles it, and slides it back out. */
.hw-cutout {
	position: fixed;
	z-index: var(--hw-z-cutout);
	bottom: 6vh;
	width: 190px;
	pointer-events: none;
	will-change: transform;
	filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .5));
}

.hw-cutout--left { left: 0; transform-origin: 50% 100%; }
.hw-cutout--right { right: 0; transform-origin: 50% 100%; }

.hw-cutout svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* The caption is a paper tag stuck to the stick. */
.hw-cutout__say {
	position: absolute;
	top: -8px;
	padding: .35rem .8rem .4rem;
	font-family: var(--hw-font-hand);
	font-size: 1.25rem;
	line-height: 1.1;
	white-space: nowrap;
	color: var(--hw-ink);
	background: #FBF6EC;
	border: 2px solid var(--hw-ink);
	border-radius: var(--hw-wobble);
	box-shadow: var(--hw-paper-shadow);
}

.hw-cutout--left .hw-cutout__say { left: 78%; border-bottom-left-radius: 3px; transform: rotate(4deg); }
.hw-cutout--right .hw-cutout__say { right: 78%; border-bottom-right-radius: 3px; transform: rotate(-4deg); }

/* ==========================================================================
   10. INNER PAGES — a sheet of paper taped to the wall
   ========================================================================== */
/* 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 plum there would bury the ink. The
   body keeps the plum from :root. */
.site-main {
	--ntw-bg: var(--hw-paper-2);
}

/* The home page is the hallway itself. Every other room gets one big sheet
   pinned to the wallpaper, 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: 2rem 1.5rem 0;
}

body:not(.page-template-page-dashboard) .site-main {
	position: relative;
	padding: 2.4rem 2.25rem 3rem;
	color: var(--hw-ink);
	background: var(--hw-paper);
	border: 2px solid var(--hw-ink);
	border-radius: var(--hw-wobble-2);
	box-shadow: 6px 8px 0 rgba(9, 5, 20, .35);
}

/* Two strips of tape holding the top corners up. */
body:not(.page-template-page-dashboard) .site-main::before,
body:not(.page-template-page-dashboard) .site-main::after {
	content: "";
	position: absolute;
	top: -6px;
	width: 92px;
	height: 24px;
	background: var(--hw-tape);
	border: 1px solid rgba(42, 27, 61, .25);
	pointer-events: none;
}

body:not(.page-template-page-dashboard) .site-main::before {
	left: -22px;
	transform: rotate(-34deg);
}

body:not(.page-template-page-dashboard) .site-main::after {
	right: -22px;
	transform: rotate(34deg);
}

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

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

/* Page titles are hand-lettered labels stuck to the sheet. */
.ntw-page-title,
.site-main .page-title,
.site-main .entry-header .entry-title {
	position: relative;
	display: inline-block;
	padding: .4rem 1.4rem .35rem;
	font-family: var(--hw-font-hand);
	font-weight: 400;
	font-size: 1.8rem;
	line-height: 1.2;
	color: var(--hw-ink);
	background: #FBF6EC;
	border: 2px solid var(--hw-ink);
	border-radius: var(--hw-wobble-2);
	box-shadow: var(--hw-paper-shadow);
	transform: rotate(-1deg);
}

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

.ntw-back-link a { color: var(--hw-ink-soft); }
.ntw-back-link a:hover { color: var(--hw-pumpkin-deep); }

/* Pale-green literals in portal.css / requests.css / suggestions.css become
   candlelight. */
.regional-flyout-back:hover,
.ntw-req-tab:hover {
	background: rgba(255, 198, 92, .25);
}

.ntw-req-tab {
	border: 1.5px solid var(--hw-line-mid);
	border-radius: var(--hw-wobble);
	font-family: var(--hw-font-hand);
	font-weight: 400;
	color: var(--hw-ink-soft);
}

.ntw-req-tab.is-active,
.ntw-req-tab[aria-selected="true"] {
	background: rgba(255, 198, 92, .45);
	border-color: var(--hw-ink);
	color: var(--hw-ink);
}

.ntw-req-guidance {
	background: #FBF6EC;
	border: 1.5px solid var(--hw-ink);
	border-radius: 3px;
	color: var(--hw-ink);
}

.ntw-req-count {
	background: var(--hw-pumpkin);
	color: var(--hw-ink);
	border: 1px solid var(--hw-ink);
}

.ntw-req-modal-panel,
.ntw-req-modal {
	background: var(--hw-paper);
	border: 2px solid var(--hw-ink);
	border-radius: var(--hw-wobble);
	box-shadow: 6px 8px 0 rgba(9, 5, 20, .5);
}

.ntw-req-modal-backdrop { background: rgba(18, 14, 36, .7); }

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

.ntw-req-message--team { border-color: rgba(240, 138, 36, .45); }
.ntw-req-status-btn:focus-visible { background: rgba(255, 198, 92, .3); }

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

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

.site-main .search-field:focus {
	border-color: var(--hw-ink);
	box-shadow: 0 0 0 3px rgba(255, 198, 92, .6);
	outline: none;
}

.site-main .search-submit {
	padding: .45rem 1rem;
	background: var(--hw-pumpkin);
	border: 2px solid var(--hw-ink);
	border-radius: var(--hw-wobble);
	color: var(--hw-ink);
	font-family: var(--hw-font-hand);
	cursor: pointer;
}

.site-main .search-submit:hover,
.site-main .search-submit:focus-visible { background: #FFA64A; }

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

.ntw-segmented button[aria-pressed="true"] {
	background: rgba(255, 198, 92, .45);
	color: var(--hw-ink);
}

.ntw-calc-result,
.ntw-results-hero,
.ntw-ref-table .ntw-ref-cat td {
	background: rgba(255, 198, 92, .22);
}

/* sales-map.css: a slightly darker sheet under the map so the land reads. */
#ntw-map {
	background: var(--hw-paper-2);
	border: 1.5px solid var(--hw-line-mid);
	border-radius: 6px;
}

.ntw-map-zoombar,
.ntw-map-legend {
	background: var(--hw-paper);
	border: 1.5px solid var(--hw-ink);
	border-radius: 3px;
	color: var(--hw-ink);
}

.ntw-map-zb { color: var(--hw-ink-soft); }
.ntw-map-zb:hover { background: rgba(255, 198, 92, .35); color: var(--hw-ink); }

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

/* wp-login has no #page wrapper; keep the form above the hallway (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 house ghost tonight. */
body.login::after {
	bottom: 2vh;
	opacity: .2;
	filter: grayscale(.7) brightness(1.5) drop-shadow(0 0 16px rgba(246, 241, 255, .8));
}

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

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

/* Witch hat on the login mascot (element added by halloween.js). */
/* Same placement as .hw-hero-hat, scaled: the logo draws capy1.webp at
   156px tall (contain, bottom), so his crown is the h1's top edge. */
.hw-login-hat {
	position: absolute;
	left: calc(50% - 38px);
	top: -42px;
	width: 72px;
	height: auto;
	transform: rotate(8deg);
	transform-origin: 50% 81%;
	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .45));
	pointer-events: none;
}

/* The form is a note taped to the wall. Core clips the form (overflow:
   hidden) to contain the floated Log In button; the tape has to poke out,
   so the float is cleared with ::after instead. */
.login form {
	position: relative;
	overflow: visible;
	background: var(--hw-paper);
	border: 2px solid var(--hw-ink);
	border-radius: var(--hw-wobble-2);
	box-shadow: 6px 8px 0 rgba(9, 5, 20, .4);
}

.login form::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -12px;
	width: 88px;
	height: 22px;
	transform: translateX(-50%) rotate(-2deg);
	background: var(--hw-tape);
	border: 1px solid rgba(42, 27, 61, .25);
	pointer-events: none;
}

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

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

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

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
	border-color: var(--hw-ink);
	box-shadow: 0 0 0 3px rgba(255, 198, 92, .6);
	outline: none;
}

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

.login .button.wp-hide-pw:focus {
	border-color: var(--hw-ink);
	box-shadow: 0 0 0 3px rgba(255, 198, 92, .6);
}

.wp-core-ui .button-primary {
	background: var(--hw-pumpkin);
	border: 2px solid var(--hw-ink);
	border-radius: var(--hw-wobble);
	color: var(--hw-ink);
	font-family: var(--hw-font-hand);
	font-weight: 400;
	text-shadow: none;
	box-shadow: none;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: #FFA64A;
	border-color: var(--hw-ink);
	color: var(--hw-ink);
	box-shadow: none;
}

.wp-core-ui .button-primary:focus {
	box-shadow: 0 0 0 3px rgba(255, 198, 92, .7);
}

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

.login #nav a:hover,
.login #backtoblog a:hover { color: var(--hw-candle); }

.login .message,
.login .notice,
.login .success {
	background: #FBF6EC;
	border: 2px solid var(--hw-ink);
	border-left: 6px solid var(--hw-slime-deep);
	border-radius: 3px;
	color: var(--hw-ink);
	box-shadow: var(--hw-paper-shadow);
}

.login #login_error {
	background: #FBF6EC;
	border: 2px solid var(--hw-ink);
	border-left: 6px solid var(--hw-pumpkin);
	border-radius: 3px;
	color: var(--hw-ink);
	box-shadow: var(--hw-paper-shadow);
}

/* Login-screen toggle: the .login-scoped pill in login.css outweighs the
   global rule above, so restate the crayon button here. */
body.login .ntw-view-toggle {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 20;
	padding: .5rem 1.1rem .55rem;
	background: var(--hw-pumpkin);
	border: 2px solid var(--hw-ink);
	border-radius: var(--hw-wobble);
	font-family: var(--hw-font-hand);
	font-size: .9rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hw-ink);
	box-shadow: var(--hw-paper-shadow);
}

body.login .ntw-view-toggle:hover,
body.login .ntw-view-toggle:focus-visible {
	color: var(--hw-ink);
	border-color: var(--hw-ink);
	background: #FFA64A;
	box-shadow: var(--hw-paper-shadow), 0 0 0 3px rgba(255, 198, 92, .7);
	outline: none;
}

/* ==========================================================================
   12. REDUCED MOTION — kill every animation this sheet adds
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.hw-sconce__flame,
	.hw-sconce__glow,
	.hw-bat__wing--l,
	.hw-bat__wing--r {
		animation: none !important;
	}

	.ntw-tile::before { transition: none; }
}