/**
 * NTW Wiki — YOZAKURA layer ("Night Blossom Mode", the cherry-blossom season).
 *
 * Yozakura is cherry blossoms at night: the manor's back veranda on a
 * blossom-viewing evening. An indigo sky and a big moon, a cherry branch
 * reaching across it, paper lanterns strung over the hero, petals coming
 * down. What it keeps from Halloween: the night, the ghosts (yokai now — a
 * lantern ghost, an umbrella ghost, a fox, and the old sheet ghost with a
 * blossom on its head), the cardboard-cutout jumpscares, the room numbers,
 * and the taped-up paper look (the tape is washi tape now).
 *
 * Forked from halloween.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 (yozakura.js):
 *  - html.yz-motion      — master gate; every *animation* is behind it, so
 *                          no-JS / reduced-motion still gets a complete page.
 *  - .yz-world           — fixed garden backdrop (DOM injected by yozakura.js).
 *  - .yz-room            — the room number, a paper tag in the corner (injected).
 *  - .yz-note            — the omikuji fortune beside the logo (injected).
 *  - .yz-cutout          — a cardboard yokai popping in from a screen edge.
 *  - .yz-hero-mask       — fox mask on the hero mascot (injected).
 *  - .yz-login-mask      — the same mask on the wp-login mascot (injected).
 *  - .ntw-capy-peek-hat  — the peeker's mask (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 garden set
   ========================================================================== */
:root {
	/* Garden primitives. */
	--yz-night: #0B0F2A;
	--yz-indigo: #151B45;
	--yz-sky: #232A63;
	--yz-horizon: #4A3C7E;
	--yz-ink: #1E1B2E;
	--yz-ink-soft: #57506A;
	--yz-washi: #FAF4EA;
	--yz-washi-2: #F0E6D6;
	--yz-washi-hi: #FFFAF2;
	--yz-sakura: #F6A8C4;
	--yz-sakura-hi: #FFC6DA;
	--yz-sakura-deep: #A93A68;
	--yz-sakura-ink: #8A2952;
	--yz-blush: #E27D9C;
	--yz-petal-soft: #F3D9E4;
	--yz-vermilion: #D9432F;
	--yz-lantern: #E2462F;
	--yz-glow: #FFB36B;
	--yz-moon: #FFF3D6;
	--yz-leaf-deep: #4E8A3A;
	--yz-cardboard: #D9B98A;
	--yz-cardboard-deep: #A9834F;
	--yz-wood: #5B3B2C;
	--yz-wood-deep: #3A2418;
	--yz-plaque: #E9CF9F;
	--yz-font-display: 'Zen Maru Gothic', 'Fredoka', 'Arial Rounded MT Bold', sans-serif;
	--yz-font-body: 'Zen Maru Gothic', 'Nunito', 'Segoe UI', sans-serif;
	--yz-font-hand: 'Yusei Magic', 'Gloria Hallelujah', 'Comic Sans MS', cursive;
	--yz-line: rgba(30, 27, 46, .2);
	--yz-line-mid: rgba(30, 27, 46, .4);
	/* A sheet of paper stuck up: one flat offset, no blur. */
	--yz-paper-shadow: 3px 4px 0 rgba(8, 8, 24, .4);
	/* The crayon-outline trick: mismatched radii so no two corners match. */
	--yz-wobble: 255px 15px 225px 15px / 15px 225px 15px 255px;
	--yz-wobble-2: 15px 255px 15px 225px / 225px 15px 255px 15px;
	/* Washi tape: pink, with little white dots. */
	--yz-tape: radial-gradient(circle, rgba(255, 255, 255, .9) 0 1.5px, transparent 2.2px) 0 0 / 9px 9px, rgba(238, 140, 174, .82);
	--yz-ease: cubic-bezier(.22, 1, .36, 1);
	/* z ladder: world 0 < capy sky 1 < #page 10 < room tag 300 < cutouts 400 */
	--yz-z-hud: 300;
	--yz-z-cutout: 400;

	/* Portal token overrides — most of the retheme happens right here. */
	--ntw-bg: var(--yz-indigo);
	--ntw-surface: var(--yz-washi);
	--ntw-border: var(--yz-line);
	--ntw-text: var(--yz-ink);
	--ntw-muted: var(--yz-ink-soft);
	--ntw-brand: var(--yz-sakura);
	--ntw-brand-dark: var(--yz-sakura-deep);
	--ntw-accent: var(--yz-sakura-deep); /* text on paper and under white text (pricing tabs, map labels), so it stays dark */
	--ntw-info: #5C7FD6;
	--ntw-radius: 6px;
	--ntw-shadow: var(--yz-paper-shadow);
	--ntw-glow: 0 0 0 3px rgba(246, 168, 196, .6);
	--ntw-accent-line: linear-gradient(90deg, var(--yz-sakura), var(--yz-lantern));
	--ntw-fx-rgb: 226, 104, 146; /* motion.js pulse/highlight color */
}

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

::selection {
	background: var(--yz-sakura-hi);
	color: var(--yz-ink);
}

html {
	scrollbar-color: var(--yz-ink-soft) var(--yz-indigo);
}

a { color: var(--yz-sakura-deep); }
a:visited { color: var(--yz-sakura-deep); }
a:hover,
a:focus,
a:active { color: var(--yz-sakura-ink); }

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

pre {
	background: var(--yz-washi-2);
	border: 2px solid var(--yz-line);
}

code,
kbd,
tt { color: var(--yz-sakura-deep); }

mark,
ins {
	background: rgba(246, 168, 196, .45);
	color: var(--yz-ink);
}

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

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

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

/* ==========================================================================
   3. WORLD — the night garden (DOM injected by yozakura.js)
   ========================================================================== */
.yz-world {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	/* Three offset star grids with different periods read as scattered. */
	background:
		radial-gradient(circle, rgba(255, 255, 255, .75) 0 1px, transparent 1.6px) 0 0 / 97px 89px,
		radial-gradient(circle, rgba(255, 255, 255, .5) 0 .9px, transparent 1.5px) 41px 57px / 131px 113px,
		radial-gradient(circle, rgba(255, 228, 238, .6) 0 1.2px, transparent 2px) 73px 23px / 173px 151px,
		linear-gradient(180deg, var(--yz-night) 0%, var(--yz-indigo) 42%, var(--yz-sky) 72%, var(--yz-horizon) 100%);
}

/* Lantern warmth over the left of the hero, moonlight on the right. */
.yz-world::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 30vw 32vh at 33% 20%, rgba(255, 160, 110, .15), transparent 70%),
		radial-gradient(circle 24vw at 86% 22%, rgba(255, 243, 214, .12), transparent 70%);
}

/* Distant hills (with a pagoda and a small torii) above the veranda rail. */
.yz-hills {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(27vh + 10px);
	height: 16vh;
}

.yz-hills svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* The veranda: rail, balusters with the night between them, the deck. */
.yz-world__rail {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 27vh;
	height: 10px;
	background: linear-gradient(180deg, #6E4A36, #3A2418);
	border-top: 2px solid #84604A;
	border-bottom: 2px solid #22140C;
}

.yz-world__balusters {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 15vh;
	height: 12vh;
	background:
		repeating-linear-gradient(90deg,
			transparent 0 30px,
			#3A2418 30px 40px,
			#5B3B2C 40px 42px,
			transparent 42px 72px);
}

.yz-world__deck {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 15vh;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .45) 0, transparent 35%),
		radial-gradient(ellipse 4px 2.5px, rgba(242, 166, 191, .9) 0 70%, transparent 75%) 0 0 / 113px 37px,
		radial-gradient(ellipse 3.5px 2px, rgba(251, 217, 227, .85) 0 70%, transparent 75%) 57px 19px / 149px 53px,
		repeating-linear-gradient(180deg, var(--yz-wood) 0 22px, var(--yz-wood-deep) 22px 24px);
	border-top: 4px solid #22140C;
}

/* Sky furniture, positioned by the CSS (sizes) and the JS (lanterns). */
.yz-moon,
.yz-tree,
.yz-string,
.yz-lantern,
.yz-wisp {
	position: absolute;
}

.yz-moon {
	right: 7vw;
	top: 12vh;
	width: 150px;
}

.yz-moon::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 300px;
	height: 300px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 243, 214, .28) 0%, rgba(255, 243, 214, .08) 45%, transparent 70%);
}

.yz-moon svg,
.yz-tree svg,
.yz-lantern svg,
.yz-wisp svg {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* The branch comes in from the right, across the moon. */
.yz-tree {
	right: 0;
	top: 7vh;
	width: min(46vw, 660px);
}

/* Phones stack the header and menu on top, so the sky starts lower. */
@media (max-width: 900px) {
	.yz-moon {
		top: 27vh;
		right: 3vw;
		width: 104px;
	}

	.yz-tree {
		top: 24vh;
		width: 84vw;
	}
}

.yz-string {
	height: 64px;
}

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

.yz-string--left {
	left: 20vw;
	top: 9vh;
	width: 25vw;
}

.yz-lantern {
	transform-origin: 50% 0;
}

.yz-lantern__glow {
	position: absolute;
	left: 50%;
	top: 52%;
	width: 170px;
	height: 170px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 164, 92, .38) 0%, rgba(255, 120, 80, .12) 40%, transparent 70%);
}

.yz-lantern__glow--paper {
	background: radial-gradient(circle, rgba(255, 225, 166, .4) 0%, rgba(255, 200, 140, .12) 40%, transparent 70%);
}

html.yz-motion .yz-lantern {
	animation: yz-swing 4.2s ease-in-out infinite alternate;
}

html.yz-motion .yz-lantern__glow {
	animation: yz-glow 1.7s ease-in-out infinite alternate;
}

@keyframes yz-swing {
	from { transform: rotate(-3.5deg); }
	to { transform: rotate(3.5deg); }
}

@keyframes yz-glow {
	from { opacity: .8; }
	to { opacity: 1; }
}

/* Hitodama: little blue spirit flames that keep to the edges. */
.yz-wisp {
	width: 28px;
	opacity: .6;
	filter: drop-shadow(0 0 10px rgba(170, 210, 255, .9));
}

html.yz-motion .yz-wisp {
	animation: yz-wisp 6s ease-in-out infinite;
}

@keyframes yz-wisp {
	0%, 100% { transform: translate(0, 0) rotate(-4deg); opacity: .35; }
	50% { transform: translate(6px, -22px) rotate(4deg); opacity: .7; }
}

/* Petals: spawned + tweened by yozakura.js. */
.yz-petals {
	position: absolute;
	inset: 0;
}

.yz-petal {
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform;
}

.yz-petal svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   4. ROOM NUMBER + FORTUNE — the whole HUD (DOM injected by yozakura.js)
   ========================================================================== */
.yz-hud-top {
	display: flex;
	align-items: center;
	gap: 18px;
}

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

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

/* One strip of washi tape, shared by everything that gets taped up. */
.yz-room::before,
.yz-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: 16px;
	transform: translateX(-50%) rotate(-3deg);
	background: var(--yz-tape);
	pointer-events: none;
}

/* An omikuji slip by the logo: the red 大吉 ("excellent luck") stamp, then
   the fortune. */
.yz-note {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	max-width: 262px;
	margin-left: 22px;
	padding: .3rem .8rem .3rem .3rem;
	font-family: var(--yz-font-hand);
	font-size: .8rem;
	line-height: 1.3;
	color: var(--yz-ink);
	background: var(--yz-washi-hi);
	border: 1.5px solid var(--yz-ink);
	border-radius: 3px;
	box-shadow: var(--yz-paper-shadow);
	transform: rotate(2deg);
	cursor: default;
}

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

.yz-note__luck {
	flex: 0 0 auto;
	padding: .3rem .15rem;
	writing-mode: vertical-rl;
	font-family: var(--yz-font-hand);
	font-weight: 400;
	font-size: .85rem;
	letter-spacing: .12em;
	line-height: 1;
	color: #fff;
	background: var(--yz-vermilion);
	border-radius: 2px;
}

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

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

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

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

/* The toggle, engaged: a crayon-outlined sakura paper button. Every button
   in the garden 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(--yz-ink);
	border-radius: var(--yz-wobble);
	background: var(--yz-sakura);
	font-family: var(--yz-font-hand);
	font-size: .9rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--yz-ink);
	box-shadow: var(--yz-paper-shadow);
	transition: background 140ms var(--yz-ease);
}

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

.ntw-view-toggle:focus-visible {
	box-shadow: var(--yz-paper-shadow), 0 0 0 3px rgba(246, 168, 196, .7);
}

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

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

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

/* A tiny sakura in place of the ghost. Drawn twice — outlined, then filled
   over the top — so only the outside edge of the flower is inked. */
.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='-6 -6 112 112'><defs><path id='p' d='M50 50 C35 44 29 25 39 8 L50 15 L61 8 C71 25 65 44 50 50 Z'/></defs><g fill='%23F6A8C4' stroke='%231E1B2E' stroke-width='10' stroke-linejoin='round'><use href='%23p'/><use href='%23p' transform='rotate(72 50 50)'/><use href='%23p' transform='rotate(144 50 50)'/><use href='%23p' transform='rotate(216 50 50)'/><use href='%23p' transform='rotate(288 50 50)'/></g><g fill='%23F6A8C4'><use href='%23p'/><use href='%23p' transform='rotate(72 50 50)'/><use href='%23p' transform='rotate(144 50 50)'/><use href='%23p' transform='rotate(216 50 50)'/><use href='%23p' transform='rotate(288 50 50)'/></g><circle cx='50' cy='50' r='11' fill='%23A93A68'/></svg>") center / contain no-repeat;
}

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

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

.main-navigation a:hover {
	color: var(--yz-sakura-deep);
	background: rgba(226, 104, 146, .12);
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--yz-ink);
	background: rgba(246, 168, 196, .5);
	box-shadow: inset 0 0 0 1.5px var(--yz-ink);
}

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

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

.regional-sites-toggle:hover,
.regional-sites-toggle:focus-visible {
	color: var(--yz-sakura-deep);
	background: rgba(226, 104, 146, .12);
	box-shadow: none;
}

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

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

.regional-flyout-back:hover,
.regional-flyout-back:focus-visible {
	color: var(--yz-sakura-deep);
	background: rgba(226, 104, 146, .12);
	box-shadow: none;
}

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

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

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

/* The footer is the deck: lengthwise boards with petals blown onto them.
   The peeker rises from behind its edge. */
.site-footer {
	position: relative;
	margin-top: 4rem;
	padding-bottom: 2.5rem;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .4) 0, transparent 34%),
		radial-gradient(ellipse 4px 2.5px, rgba(242, 166, 191, .9) 0 70%, transparent 75%) 0 0 / 113px 37px,
		radial-gradient(ellipse 3.5px 2px, rgba(251, 217, 227, .85) 0 70%, transparent 75%) 57px 19px / 149px 53px,
		repeating-linear-gradient(180deg, var(--yz-wood) 0 22px, var(--yz-wood-deep) 22px 24px);
	border-top: 10px solid #6E4A36;
	box-shadow: inset 0 10px 0 #22140C;
}

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

/* ==========================================================================
   6. HERO — lantern light, a red hanami mat, and the hand-lettered sign
   ========================================================================== */
/* The extra top padding is headroom for the mask, which would otherwise
   tuck under the header. */
.ntw-hero {
	position: relative;
	padding: 2.4rem 0 2.2rem;
}

/* The warm pool of light he's sitting in. */
.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, 214, 196, .24) 0%, rgba(246, 168, 196, .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 sits still; the garden does the moving */
}

/* Fox mask pushed up on the right of his head, the way you wear one at a
   festival (element added by yozakura.js). */
.yz-hero-mask {
	position: absolute;
	z-index: 3;
	left: calc(50% + 4px);
	top: 18px;
	width: 70px;
	height: auto;
	transform: rotate(22deg);
	transform-origin: 30% 60%;
	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .45));
	pointer-events: none;
}

/* The red felt hanami mat under him. */
.ntw-hero::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 226px;
	z-index: 1;
	width: 300px;
	height: 50px;
	transform: translateX(-50%);
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 50'><path d='M34 4 L266 4 L296 46 L4 46 Z' fill='%23C8322B' stroke='%231E1B2E' stroke-width='3' stroke-linejoin='round'/><path d='M40 10 L260 10' stroke='%23E2584A' stroke-width='3' stroke-linecap='round'/><path d='M22 38 L278 38' stroke='%23A82820' stroke-width='2' stroke-dasharray='6 6'/></svg>") center / 100% 100% no-repeat;
}

/* 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(--yz-font-hand);
	font-weight: 400;
	font-size: 2.35rem;
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--yz-ink);
	background: var(--yz-washi-hi);
	border: 2px solid var(--yz-ink);
	border-radius: var(--yz-wobble-2);
	box-shadow: var(--yz-paper-shadow);
	transform: rotate(-1.5deg);
}

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

/* A pink brush underline that doesn't quite make it across. */
.ntw-hero-title::after {
	content: "";
	position: absolute;
	left: 1.6rem;
	right: 2.4rem;
	bottom: .4rem;
	height: 6px;
	background: var(--yz-blush);
	border-radius: 6px 2px 4px 2px;
	transform: rotate(-.6deg);
	opacity: .85;
}

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

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

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

/* Each tile is still a numbered room, on a little wooden plaque now, and a
   cardboard lantern ghost leans in from the right 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(--yz-font-hand);
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--yz-ink);
	background: var(--yz-plaque);
	border: 1.5px solid var(--yz-ink);
	border-radius: 3px;
	box-shadow: inset 0 -2px 0 rgba(90, 58, 34, .25);
	transform: rotate(1.5deg);
	transition: none;
}

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

.ntw-tile::before {
	content: "";
	position: absolute;
	right: 2px;
	bottom: 16px;
	width: 62px;
	height: 76px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 112 132'><path d='M36 4 L64 4 L64 14 C86 20 94 42 94 60 C94 80 84 98 64 106 L64 116 L36 116 L36 106 C16 98 6 80 6 60 C6 42 14 20 36 14 Z' fill='%23D9B98A' stroke='%23A9834F' stroke-width='16' stroke-linejoin='round'/><path d='M36 4 L64 4 L64 14 C86 20 94 42 94 60 C94 80 84 98 64 106 L64 116 L36 116 L36 106 C16 98 6 80 6 60 C6 42 14 20 36 14 Z' fill='%23EE6A43' stroke='%231E1B2E' stroke-width='5' stroke-linejoin='round'/><ellipse cx='50' cy='62' rx='27' ry='33' fill='%23FFB36B' opacity='.45'/><path d='M22 30 Q50 35 78 30 M13 42 Q50 48 87 42 M13 86 Q50 92 87 86 M22 96 Q50 101 78 96' fill='none' stroke='%231E1B2E' stroke-width='2.5' opacity='.45'/><path d='M36 4 L64 4 L64 14 L36 14 Z M36 106 L64 106 L64 116 L36 116 Z' fill='%231E1B2E'/><circle cx='50' cy='56' r='12' fill='white' stroke='%231E1B2E' stroke-width='4'/><circle cx='52' cy='58' r='5' fill='%231E1B2E'/><path d='M30 72 Q50 86 70 72 Q62 82 50 83 Q38 82 30 72 Z' fill='%231E1B2E'/><path d='M45 79 Q43 96 50 100 Q58 102 57 90 L55 79 Z' fill='%23F7A8B8' stroke='%231E1B2E' stroke-width='3'/></svg>") center / contain no-repeat;
	transform: translate(115%, 10%) rotate(18deg);
	transform-origin: 50% 100%;
	transition: transform 280ms var(--yz-ease);
	pointer-events: none;
}

.ntw-tile:hover::before,
.ntw-tile:focus-visible::before {
	transform: translate(16%, 0) rotate(-10deg);
}

.ntw-tile:hover {
	border-color: var(--yz-ink);
	background: var(--yz-washi-hi);
	box-shadow: 5px 6px 0 rgba(8, 8, 24, .4);
}

.ntw-tile:focus-visible {
	box-shadow: var(--yz-paper-shadow), 0 0 0 3px rgba(246, 168, 196, .85);
}

/* Icons: the glyph on the cream heart of a big sakura blossom. */
.ntw-tile-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: -4px 0 .2rem -5px;
	font-size: 19px;
	color: var(--yz-ink);
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 112 112'><defs><path id='p' d='M50 50 C35 44 29 25 39 8 L50 15 L61 8 C71 25 65 44 50 50 Z'/></defs><g fill='%23F6A8C4' stroke='%231E1B2E' stroke-width='6' stroke-linejoin='round'><use href='%23p'/><use href='%23p' transform='rotate(72 50 50)'/><use href='%23p' transform='rotate(144 50 50)'/><use href='%23p' transform='rotate(216 50 50)'/><use href='%23p' transform='rotate(288 50 50)'/></g><g fill='%23F6A8C4'><use href='%23p'/><use href='%23p' transform='rotate(72 50 50)'/><use href='%23p' transform='rotate(144 50 50)'/><use href='%23p' transform='rotate(216 50 50)'/><use href='%23p' transform='rotate(288 50 50)'/></g><circle cx='50' cy='50' r='23' fill='%23FFFAF2' stroke='%231E1B2E' stroke-width='4'/></svg>") center / contain no-repeat;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.ntw-tile:nth-child(even) .ntw-tile-icon { rotate: 18deg; }
.ntw-tile:nth-child(even) .ntw-tile-icon::before { display: inline-block; rotate: -18deg; }

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

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

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

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

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

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

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

.ntw-card-title { font-family: var(--yz-font-hand); font-weight: 400; 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(--yz-font-hand);
	font-weight: 400;
	font-size: 1.05rem;
	color: var(--yz-ink);
	background: var(--yz-washi-hi);
	border: 1.5px solid var(--yz-ink);
	border-radius: var(--yz-wobble-2);
	box-shadow: var(--yz-paper-shadow);
	transform: rotate(-1deg);
}

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

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

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

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

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

.ntw-button--ghost:hover,
.ntw-button--ghost:focus-visible {
	background: rgba(246, 168, 196, .3);
	color: var(--yz-ink);
}

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

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

.ntw-table tbody tr:hover { background: rgba(246, 168, 196, .2); }

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

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

/* The drifters become blossom spirits: pale, pink-lit, half there. */
.ntw-capy-drifter {
	max-width: 130px;
	filter: grayscale(.6) sepia(.3) hue-rotate(-28deg) brightness(1.45) drop-shadow(0 0 16px rgba(255, 214, 230, .8)) opacity(.36);
}

/* The peek window grows upward to leave room for the mask; 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: -22px;
	right: 2px;
	width: 44px;
	height: auto;
	transform: rotate(22deg);
	transform-origin: 30% 60%;
	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(--yz-ink);
	border-radius: var(--yz-wobble);
	border-bottom-right-radius: 4px;
	box-shadow: var(--yz-paper-shadow);
	font-family: var(--yz-font-hand);
	font-weight: 400;
	font-size: 1.2rem;
	color: var(--yz-ink);
}

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

.ntw-capy-empty-home { color: var(--yz-sakura-deep); }

/* ==========================================================================
   9. CUTOUTS — the jumpscares, yokai edition (spawned by yozakura.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. */
.yz-cutout {
	position: fixed;
	z-index: var(--yz-z-cutout);
	bottom: 6vh;
	width: 190px;
	pointer-events: none;
	will-change: transform;
	filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .5));
}

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

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

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

.yz-cutout--left .yz-cutout__say { left: 78%; border-bottom-left-radius: 3px; transform: rotate(4deg); }
.yz-cutout--right .yz-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 night indigo there would bury the
   ink. The body keeps the indigo from :root. */
.site-main {
	--ntw-bg: var(--yz-washi-2);
}

/* The home page is the garden itself. Every other room gets one big sheet
   taped up against the night, 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(--yz-ink);
	background: var(--yz-washi);
	border: 2px solid var(--yz-ink);
	border-radius: var(--yz-wobble-2);
	box-shadow: 6px 8px 0 rgba(8, 8, 24, .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(--yz-tape);
	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(--yz-font-hand);
	font-weight: 400;
	font-size: 1.8rem;
	line-height: 1.2;
	color: var(--yz-ink);
	background: var(--yz-washi-hi);
	border: 2px solid var(--yz-ink);
	border-radius: var(--yz-wobble-2);
	box-shadow: var(--yz-paper-shadow);
	transform: rotate(-1deg);
}

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

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

/* Pale-green literals in portal.css / requests.css / suggestions.css become
   blossom pink. */
.regional-flyout-back:hover,
.ntw-req-tab:hover {
	background: rgba(246, 168, 196, .25);
}

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

.ntw-req-tab.is-active,
.ntw-req-tab[aria-selected="true"] {
	background: rgba(246, 168, 196, .45);
	border-color: var(--yz-ink);
	color: var(--yz-ink);
}

.ntw-req-guidance {
	background: var(--yz-washi-hi);
	border: 1.5px solid var(--yz-ink);
	border-radius: 3px;
	color: var(--yz-ink);
}

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

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

.ntw-req-modal-backdrop { background: rgba(10, 12, 32, .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(226, 104, 146, .45); }
.ntw-req-status-btn:focus-visible { background: rgba(246, 168, 196, .3); }

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

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

.site-main .search-field:focus {
	border-color: var(--yz-ink);
	box-shadow: 0 0 0 3px rgba(246, 168, 196, .6);
	outline: none;
}

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

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

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

.ntw-segmented button[aria-pressed="true"] {
	background: rgba(246, 168, 196, .45);
	color: var(--yz-ink);
}

.ntw-calc-result,
.ntw-results-hero,
.ntw-ref-table .ntw-ref-cat td {
	background: rgba(246, 168, 196, .22);
}

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

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

.ntw-map-zb { color: var(--yz-ink-soft); }
.ntw-map-zb:hover { background: rgba(246, 168, 196, .35); color: var(--yz-ink); }

/* Sakura is too light to be text on paper, and white text on it is too
   faint, so the feature sheets' brand-as-text and white-on-brand spots get
   ink and the deep pink instead. */
.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(--yz-sakura-deep);
}

.ntw-table a:hover { color: var(--yz-sakura-ink); }

/* Pricing dashboard: the primary .btn and the active price-list option.
   (pricing.css's .btn:hover still wins, white on the deep pink.) */
.ntw-pricing .btn,
.ntw-pricing .prc-list-opt.is-active {
	color: var(--yz-ink);
}

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

/* wp-login has no #page wrapper; keep the form above the garden (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 blossom spirit tonight. */
body.login::after {
	bottom: 2vh;
	opacity: .2;
	filter: grayscale(.6) sepia(.3) hue-rotate(-28deg) brightness(1.45) drop-shadow(0 0 16px rgba(255, 214, 230, .8));
}

/* Headroom for the mask's ears, so they never run 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));
}

/* Fox mask on the login mascot (element added by yozakura.js). Same
   placement as .yz-hero-mask, scaled: the logo draws capy1.webp at 156px
   tall (contain, bottom), so his crown is the h1's top edge. */
.yz-login-mask {
	position: absolute;
	left: calc(50% + 2px);
	top: -4px;
	width: 52px;
	height: auto;
	transform: rotate(22deg);
	transform-origin: 30% 60%;
	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(--yz-washi);
	border: 2px solid var(--yz-ink);
	border-radius: var(--yz-wobble-2);
	box-shadow: 6px 8px 0 rgba(8, 8, 24, .4);
}

.login form::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -12px;
	width: 88px;
	height: 22px;
	transform: translateX(-50%) rotate(-2deg);
	background: var(--yz-tape);
	pointer-events: none;
}

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

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

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

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

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

.login .button.wp-hide-pw:focus {
	border-color: var(--yz-ink);
	box-shadow: 0 0 0 3px rgba(246, 168, 196, .6);
}

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

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

.wp-core-ui .button-primary:focus {
	box-shadow: 0 0 0 3px rgba(246, 168, 196, .7);
}

/* The links under the form sit on the wallpaper. */
.login #nav a,
.login #backtoblog a { color: var(--yz-petal-soft); }

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

.login .message,
.login .notice,
.login .success {
	background: var(--yz-washi-hi);
	border: 2px solid var(--yz-ink);
	border-left: 6px solid var(--yz-leaf-deep);
	border-radius: 3px;
	color: var(--yz-ink);
	box-shadow: var(--yz-paper-shadow);
}

.login #login_error {
	background: var(--yz-washi-hi);
	border: 2px solid var(--yz-ink);
	border-left: 6px solid var(--yz-sakura);
	border-radius: 3px;
	color: var(--yz-ink);
	box-shadow: var(--yz-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(--yz-sakura);
	border: 2px solid var(--yz-ink);
	border-radius: var(--yz-wobble);
	font-family: var(--yz-font-hand);
	font-size: .9rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--yz-ink);
	box-shadow: var(--yz-paper-shadow);
}

body.login .ntw-view-toggle:hover,
body.login .ntw-view-toggle:focus-visible {
	color: var(--yz-ink);
	border-color: var(--yz-ink);
	background: var(--yz-sakura-hi);
	box-shadow: var(--yz-paper-shadow), 0 0 0 3px rgba(246, 168, 196, .7);
	outline: none;
}

/* ==========================================================================
   12. REDUCED MOTION — kill every animation this sheet adds
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.yz-lantern,
	.yz-lantern__glow,
	.yz-wisp {
		animation: none !important;
	}

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