/*
Theme Name:   Seedlark Commons (studio concept)
Theme URI:    https://tideframedigital.com/work/
Description:  Fictional community garden collective. A Tideframe Digital concept site built on GeneratePress. Risograph print direction.
Author:       Tideframe Digital
Template:     generatepress
Version:      1.0.0
Requires PHP: 8.1
Text Domain:  seedlark-commons
License:      GPL-2.0-or-later
*/

/* ==================================================================
   1. Tokens
   Fluoro pink and garden green fail contrast on paper (2.74 / 2.73), so
   they are fills and shapes only. Text and meaningful UI use ink,
   green-ink, pink-ink or deep green. See the plan for the full table.
   ================================================================== */
:root {
	--sl-paper: #f6f1e5;
	--sl-paper-2: #ede5d3;
	--sl-card: #fffdf8;
	--sl-ink: #132a1e;
	--sl-body: #33443a;
	--sl-muted: #5a665e;
	--sl-pink: #ff48b0;          /* fill only */
	--sl-green: #00a95c;         /* fill only */
	--sl-yellow: #ffe14d;
	--sl-mint: #c6ebd5;
	--sl-blush: #ffd3ea;
	--sl-green-ink: #00703c;     /* text, links, marks on light */
	--sl-pink-ink: #b5146f;      /* accent text on light */
	--sl-deep: #0b4d2c;          /* dark sections */
	--sl-over: #00303f;          /* pink x green overprint */
	--sl-print-green: #0b6b3e;   /* photo ink, green plate */
	--sl-print-pink: #e8329a;    /* photo ink, pink plate */

	--sl-r-s: 10px;
	--sl-r-m: 18px 14px 20px 12px;
	--sl-r-l: 32px 26px 36px 22px;
	--sl-blob-a: 58% 42% 51% 49% / 46% 56% 44% 54%;
	--sl-blob-b: 42% 58% 38% 62% / 55% 41% 59% 45%;
	--sl-section: clamp(64px, 9vw, 136px);
	--sl-spring: cubic-bezier(.34, 1.56, .64, 1);
	--sl-out: cubic-bezier(.16, 1, .3, 1);
	--sl-shadow: 4px 4px 0 var(--sl-ink);
	--sl-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .16 0 0 0 0 .11 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--sl-torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16'%3E%3Cpath d='M0 16V9l9-3 8 4 11-6 9 5 12-4 10 3 9-6 13 5 8-3 11 5 10-6 12 4 9-2 11 5 9-6 12 4 10-3 8 5 12-5 9 3 10-4 8 4 10-2v12z'/%3E%3C/svg%3E");
	--sl-halftone-pink: radial-gradient(circle, var(--sl-pink) 38%, transparent 41%) 0 0 / 9px 9px;
	--sl-halftone-green: radial-gradient(circle, var(--sl-green) 38%, transparent 41%) 0 0 / 9px 9px;

	/* Base contract. */
	--tf-color-bg: var(--sl-paper);
	--tf-color-surface: var(--sl-card);
	--tf-color-text: var(--sl-ink);
	--tf-color-muted: var(--sl-muted);
	--tf-color-primary: var(--sl-ink);
	--tf-color-on-primary: var(--sl-paper);
	--tf-color-accent: var(--sl-pink-ink);
	--tf-color-border: var(--sl-ink);
	--tf-color-focus: var(--sl-ink);
	--tf-color-bar-bg: var(--sl-ink);
	--tf-color-bar-text: var(--sl-paper);
	--tf-font-display: "Caprasimo", "Sl Display Fallback", Georgia, serif;
	--tf-font-body: "Atkinson Hyperlegible Next", "Sl Body Fallback", Arial, sans-serif;
	--tf-font-mono: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, monospace;
	--tf-radius-s: 10px;
	--tf-radius-m: 18px;
	--tf-radius-l: 32px;
	--tf-container: 1280px;
	--tf-bar-height: 2.25rem;
	--tf-header-height: 78px;
	--tf-ease-out: var(--sl-out);
	--tf-marquee-duration: 46s;
	--tf-marquee-gap: 2.5rem;
	--tf-reveal-distance: 1.75rem;
	--tf-stagger: 90ms;
	--tf-nav-hover-color: var(--sl-ink);
	--tf-nav-sub-hover-bg: var(--sl-mint);
	--tf-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23132a1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
}

/* Approximate metric-matched fallbacks to limit layout shift while fonts load. */
@font-face { font-family: "Sl Display Fallback"; src: local("Georgia"); size-adjust: 112%; ascent-override: 88%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Sl Body Fallback"; src: local("Arial"); size-adjust: 103%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }

/* ==================================================================
   2. Base
   ================================================================== */
html.sl-lock { overflow: hidden; }
body {
	background-color: var(--sl-paper);
	background-image: var(--sl-grain);
	color: var(--sl-body);
	font-family: var(--tf-font-body);
	font-size: 1.0625rem;
	line-height: 1.62;
	overflow-x: clip;
	font-synthesis: none;
}
h1, h2, h3, h4 {
	font-family: var(--tf-font-display);
	font-weight: 400;
	color: var(--sl-ink);
	line-height: 1.04;
	letter-spacing: -.01em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.25rem); line-height: .98; }
h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); line-height: 1.15; }
h4 { font-size: 1.25rem; }
p { text-wrap: pretty; }
a { color: var(--sl-green-ink); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { color: var(--sl-ink); text-decoration-color: var(--sl-pink); }
::selection { background: var(--sl-pink); color: var(--sl-ink); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--sl-ink); outline-offset: 3px; }
.sl-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sl-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 48px; pointer-events: none; }
.sl-eyebrow {
	font-family: var(--tf-font-mono);
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sl-pink-ink);
	margin: 0 0 .9rem;
}
.sl-lede { font-size: clamp(1.125rem, 1rem + .55vw, 1.375rem); line-height: 1.5; max-width: 42ch; color: var(--sl-body); }
.sl-note { font-size: .9rem; color: var(--sl-muted); margin-top: 1.5rem; }
.sl-empty { font-weight: 600; }
.sl-callout { padding: 1rem 1.25rem; border: 2px dashed var(--sl-ink); border-radius: var(--sl-r-s); background: var(--sl-yellow); color: var(--sl-ink); font-weight: 600; }
.sl-prose { max-width: 70ch; }
.sl-prose h2 { margin: 2.5rem 0 1rem; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); }
.sl-prose h3 { margin: 1.75rem 0 .5rem; }
.sl-prose ul, .sl-prose ol { margin: 0 0 1.4rem 1.25rem; }
.sl-prose li { margin-bottom: .45rem; }
.sl-prose--story { font-size: 1.15rem; }
.sl-prose--story > p:first-child::first-letter { font-family: var(--tf-font-display); float: left; font-size: 4.2em; line-height: .8; margin: .08em .1em 0 0; color: var(--sl-ink); text-shadow: .05em .04em 0 var(--sl-pink); }
.sl-dots { list-style: none; margin-left: 0 !important; padding: 0; }
.sl-dots li { position: relative; padding-left: 1.6rem; }
.sl-dots li::before { content: ""; position: absolute; left: .2rem; top: .55em; width: .6rem; height: .75rem; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--sl-green); box-shadow: 2px 1px 0 var(--sl-pink); }
.sl-dots--x li::before { width: .7rem; height: .14rem; top: .8em; border-radius: 2px; background: var(--sl-ink); box-shadow: none; transform: rotate(-12deg); }

/* GeneratePress sets border-box globally; repeat it for the theme's own components. */
:where([class*="sl-"], .sl-form *, .tf-demo-notice) { box-sizing: border-box; }

/* GeneratePress containers: let sections run full width. */
.site-content .content-area { width: 100%; }
.separate-containers .inside-article, .one-container .site-content { padding: 0; background: transparent; }
.entry-content > * { margin-block: 0; }
.site-main, .inside-article, .entry-content { margin: 0 !important; }
.site-content { display: block; }
.separate-containers .site-main > * { margin-bottom: 0; }
.sl-wrap { max-width: var(--tf-container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

/* ==================================================================
   3. Sections, paper, torn edges
   ================================================================== */
.sl-section { position: relative; padding-block: var(--sl-section); isolation: isolate; }
.sl-section--tight { padding-block: clamp(40px, 6vw, 80px); }
.sl-grain { background-image: var(--sl-grain); }
.sl-section--mint { background-color: var(--sl-mint); color: var(--sl-ink); }
.sl-section--blush { background-color: var(--sl-blush); color: var(--sl-ink); }
.sl-section--yellow { background-color: var(--sl-yellow); color: var(--sl-ink); }
.sl-section--paper2 { background-color: var(--sl-paper-2); color: var(--sl-ink); }
.sl-section--green { background-color: var(--sl-green); color: var(--sl-ink); }
.sl-section--deep { background-color: var(--sl-deep); color: var(--sl-paper); }
.sl-section--deep :is(h2, h3) { color: var(--sl-paper); }
.sl-section--deep .sl-eyebrow { color: var(--sl-yellow); }
.sl-section--deep a:not(.sl-btn):not(.wp-block-button__link) { color: var(--sl-yellow); }
.sl-section--deep .sl-note { color: var(--sl-mint); }
:is(.sl-section--mint, .sl-section--blush, .sl-section--yellow, .sl-section--green) :is(p, li, dd) { color: var(--sl-ink); }
:is(.sl-section--yellow, .sl-section--green) .sl-eyebrow { color: var(--sl-ink); }
/* Torn top edge: the section overlaps the one above by the depth of the tear. */
.sl-torn {
	margin-top: -14px;
	padding-top: calc(var(--sl-section) + 14px);
	-webkit-mask: var(--sl-torn) top left / 240px 16px repeat-x, linear-gradient(#000 0 0) 0 10px / 100% calc(100% - 10px) no-repeat;
	mask: var(--sl-torn) top left / 240px 16px repeat-x, linear-gradient(#000 0 0) 0 10px / 100% calc(100% - 10px) no-repeat;
	z-index: 1;
}
.sl-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sl-head h2 { margin: 0; max-width: 16ch; }
.sl-head > :last-child:not(:first-child) { margin: 0; max-width: 42ch; }
.sl-head .sl-eyebrow { margin-bottom: .6rem; }
.sl-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sl-cols--top { align-items: start; }
.sl-cols--form { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.sl-cols--rules { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
@media (max-width: 880px) { .sl-cols, .sl-cols--form, .sl-cols--rules { grid-template-columns: 1fr; } }
.sl-cta { text-align: center; display: grid; justify-items: center; gap: .5rem; }
.sl-cta h2 { max-width: 18ch; margin: 0; }
.sl-cta p { max-width: 50ch; margin: .5rem 0 1rem; }

/* ==================================================================
   4. Buttons and links. Each button carries the "other plate" as its
   shadow, so a pink button sits on a green misprint and vice versa.
   ================================================================== */
.sl-btn,
.entry-content .wp-block-button__link {
	--plate: var(--sl-ink);
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 48px;
	padding: .8em 1.4em;
	border: 2px solid var(--sl-ink);
	border-radius: 999px;
	background: var(--sl-card);
	color: var(--sl-ink);
	font: 700 1rem / 1.15 var(--tf-font-body);
	text-decoration: none;
	box-shadow: 4px 4px 0 var(--plate);
	cursor: pointer;
	transition: transform .16s var(--sl-out), box-shadow .16s var(--sl-out), background-color .2s;
}
.sl-btn:hover, .sl-btn:focus-visible,
.entry-content .wp-block-button__link:hover, .entry-content .wp-block-button__link:focus-visible { transform: translate(-2px, -2px); box-shadow: 7px 6px 0 var(--plate); color: var(--sl-ink); }
.sl-btn:active, .entry-content .wp-block-button__link:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--plate); }
.sl-btn--pink, .is-style-sl-pink .wp-block-button__link { background: var(--sl-pink); --plate: var(--sl-green); }
.sl-btn--green, .is-style-sl-green .wp-block-button__link { background: var(--sl-green); --plate: var(--sl-pink); }
.sl-btn--outline, .is-style-sl-outline .wp-block-button__link { background: var(--sl-card); --plate: var(--sl-pink); }
.sl-btn--paper { background: var(--sl-paper); --plate: var(--sl-pink); }
.sl-btn--ink { background: var(--sl-ink); color: var(--sl-paper); --plate: var(--sl-yellow); border-color: var(--sl-ink); }
.sl-btn--ink:hover, .sl-btn--ink:focus-visible { color: var(--sl-paper); }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 1rem 1.1rem; margin-top: 1.75rem; }
.sl-section--deep .wp-block-button__link, .sl-section--deep .sl-btn { --plate: var(--sl-pink); }
.sl-section--deep :focus-visible { outline-color: var(--sl-yellow); }
.sl-arrowlink { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--sl-ink); text-decoration: underline; text-decoration-color: var(--sl-pink); text-decoration-thickness: 3px; text-underline-offset: .3em; }
.sl-arrowlink svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--sl-out); }
.sl-arrowlink:hover svg { transform: translateX(4px); }
.sl-linkbtn { background: none; border: 0; padding: 0; color: var(--sl-green-ink); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ==================================================================
   5. Riso print photos: the photo printed as one ink (screen blend over a
   greyscale multiply), a shape overprinted in the other ink (multiply),
   and grain over both. Every blend layer is aria-hidden and inside an
   isolated figure, so it never blends with the header or page.
   ================================================================== */
.sl-riso {
	--ink: var(--sl-print-green);
	--over: var(--sl-pink);
	position: relative;
	isolation: isolate;
	margin: 0;
	overflow: hidden;
	background: var(--sl-paper);
	border-radius: var(--sl-r-m);
}
.sl-riso--pink { --ink: var(--sl-print-pink); --over: var(--sl-green); }
.sl-riso img, .sl-riso .sl-riso__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.18) brightness(1.04);
	mix-blend-mode: multiply;
	transition: scale .8s var(--sl-out);
}
.sl-riso::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--ink);
	mix-blend-mode: screen;
	pointer-events: none;
}
.sl-riso::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background-image: var(--sl-grain);
	mix-blend-mode: multiply;
	opacity: .9;
	pointer-events: none;
}
.sl-riso__shape {
	position: absolute;
	z-index: 2;
	mix-blend-mode: multiply;
	pointer-events: none;
	background: var(--over);
	translate: 0 0;
	transition: translate .5s var(--sl-spring);
}
.sl-riso__shape--circle { width: 58%; aspect-ratio: 1; border-radius: 50%; right: -14%; top: -12%; }
.sl-riso__shape--blob { width: 70%; aspect-ratio: 1.2; border-radius: var(--sl-blob-a); left: -18%; bottom: -24%; }
.sl-riso__shape--stripe { left: -10%; right: -10%; height: 34%; bottom: 10%; background: radial-gradient(circle, var(--over) 40%, transparent 43%) 0 0 / 10px 10px; rotate: -7deg; }
.sl-riso:hover .sl-riso__shape, a:focus-visible .sl-riso__shape { translate: -10px 7px; }
.sl-riso:hover img { scale: 1.04; }
.sl-riso figcaption {
	position: absolute;
	z-index: 4;
	left: .75rem;
	bottom: .75rem;
	padding: .3rem .7rem;
	background: var(--sl-paper);
	border: 2px solid var(--sl-ink);
	border-radius: 999px;
	color: var(--sl-ink);
	font: 700 .78rem / 1.2 var(--tf-font-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	rotate: -2deg;
}

/* ==================================================================
   6. Hand-drawn marks: scribbles, stickers, tape, crop marks, doodles
   ================================================================== */
.sl-scrib { position: relative; display: inline-block; isolation: isolate; white-space: nowrap; }
.sl-scrib__svg { position: absolute; z-index: -1; left: -3%; width: 106%; bottom: -.2em; height: .38em; overflow: visible; pointer-events: none; }
.sl-scrib__svg path { fill: none; stroke: var(--sl-pink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sl-scrib--double .sl-scrib__svg { height: .5em; bottom: -.32em; }
.sl-scrib--double .sl-scrib__svg path { stroke-width: 4; }
.sl-scrib__svg--circle { left: -7%; width: 114%; top: -18%; bottom: auto; height: 142%; }
.sl-scrib--circle .sl-scrib__svg path { stroke-width: 3.5; }
.sl-scrib--green .sl-scrib__svg path { stroke: var(--sl-green); }
.sl-sticker {
	display: inline-grid;
	place-items: center;
	width: 7.25rem;
	aspect-ratio: 1;
	padding: .75rem;
	border-radius: 50%;
	background: var(--sl-yellow);
	color: var(--sl-ink);
	font: 700 .8rem / 1.15 var(--tf-font-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	box-shadow: inset 0 0 0 4px var(--sl-yellow), inset 0 0 0 6px var(--sl-ink), 4px 5px 0 var(--sl-pink);
	rotate: -12deg;
}
.sl-sticker--pink { background: var(--sl-pink); box-shadow: inset 0 0 0 4px var(--sl-pink), inset 0 0 0 6px var(--sl-ink), 4px 5px 0 var(--sl-green); }
.sl-sticker--green { background: var(--sl-green); box-shadow: inset 0 0 0 4px var(--sl-green), inset 0 0 0 6px var(--sl-ink), 4px 5px 0 var(--sl-pink); }
.sl-tape {
	position: absolute;
	z-index: 5;
	width: 6rem;
	height: 1.7rem;
	background: color-mix(in srgb, var(--sl-yellow) 72%, transparent);
	mix-blend-mode: multiply;
	clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 82%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 18%);
	pointer-events: none;
}
.sl-crop { position: absolute; width: 22px; height: 22px; pointer-events: none; }
.sl-crop::before, .sl-crop::after { content: ""; position: absolute; background: var(--sl-ink); }
.sl-crop::before { width: 22px; height: 1.5px; }
.sl-crop::after { width: 1.5px; height: 22px; }
.sl-crop--tl { top: -30px; left: -30px; } .sl-crop--tl::before { bottom: 0; } .sl-crop--tl::after { right: 0; }
.sl-crop--tr { top: -30px; right: -30px; } .sl-crop--tr::before { bottom: 0; } .sl-crop--tr::after { left: 0; }
.sl-crop--bl { bottom: -30px; left: -30px; } .sl-crop--bl::after { right: 0; }
.sl-crop--br { bottom: -30px; right: -30px; } .sl-crop--br::after { left: 0; }
.sl-doodle { width: 3rem; height: 3rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sl-icon { flex: none; }

/* ==================================================================
   7. Header and navigation
   ================================================================== */
.site-header { background-color: var(--sl-paper); background-image: var(--sl-grain); border-bottom: 2px solid transparent; transition: border-color .3s, box-shadow .3s; z-index: 50; }
.site-header.is-scrolled { border-bottom-color: var(--sl-ink); box-shadow: 0 4px 0 var(--sl-pink); }
.inside-header { padding-block: 10px; }
.sl-logo { margin: 0; }
.sl-logo a { display: inline-flex; color: var(--sl-ink); text-decoration: none; }
.sl-logo__svg { display: block; width: clamp(150px, 15vw, 190px); height: auto; overflow: visible; transform-origin: left center; transition: transform .3s var(--sl-out); }
.site-header.is-scrolled .sl-logo__svg { transform: scale(.92); }
.sl-logo__word { fill: var(--sl-ink); }
.sl-logo__ghost { fill: var(--sl-pink); transform: translate(1.6px, 1.4px); transition: transform .35s var(--sl-spring); }
.sl-logo__ghost ellipse { fill: var(--sl-pink); }
.sl-logo__seed { fill: var(--sl-green); stroke: var(--sl-ink); stroke-width: 2; mix-blend-mode: multiply; }
.sl-logo__sprout { fill: var(--sl-green); stroke: var(--sl-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 20px 16px; }
.sl-logo a:hover .sl-logo__ghost, .sl-logo a:focus-visible .sl-logo__ghost { transform: translate(-2px, 2.5px); }
.sl-logo__svg--light .sl-logo__word { fill: var(--sl-paper); }
.sl-logo__svg--light .sl-logo__seed, .sl-logo__svg--light .sl-logo__sprout { stroke: var(--sl-paper); mix-blend-mode: normal; }
@media (prefers-reduced-motion: no-preference) {
	.sl-logo a:hover .sl-logo__sprout { animation: sl-wiggle .6s var(--sl-spring); }
}
.main-navigation, .main-navigation ul ul { background: transparent; }
.main-navigation .main-nav ul li a { font: 700 .95rem / 48px var(--tf-font-body); color: var(--sl-ink); padding-inline: 14px; }
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] > a { color: var(--sl-ink); background: transparent; }
.main-navigation .main-nav > ul > li:not(.sl-nav-cta) > a:hover { text-decoration: underline; text-decoration-color: var(--sl-pink); text-decoration-thickness: 4px; text-underline-offset: 9px; }
.main-navigation .main-nav > ul > li[class*="current-menu-"]:not(.sl-nav-cta) > a { text-decoration: underline wavy var(--sl-green-ink); text-decoration-thickness: 2px; text-underline-offset: 9px; }
@media (min-width: 769px) {
	.main-navigation .main-nav ul ul { background-color: var(--sl-card); border: 2px solid var(--sl-ink); border-radius: var(--sl-r-s); box-shadow: 6px 6px 0 var(--sl-green); }
	.main-navigation .main-nav ul ul li a { line-height: 1.3; font-weight: 600; }
}
.main-navigation .main-nav ul li.sl-nav-cta > a {
	margin-left: 10px;
	padding-inline: 18px;
	line-height: 40px;
	border: 2px solid var(--sl-ink);
	border-radius: 999px;
	background: var(--sl-pink);
	box-shadow: 4px 4px 0 var(--sl-green);
	text-decoration: none;
	transition: transform .14s, box-shadow .14s;
}
.main-navigation .main-nav ul li.sl-nav-cta--green > a { background: var(--sl-green); box-shadow: 4px 4px 0 var(--sl-pink); margin-left: 6px; }
.main-navigation .main-nav ul li.sl-nav-cta > a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sl-green); }
.main-navigation .main-nav ul li.sl-nav-cta--green > a:hover { box-shadow: 6px 6px 0 var(--sl-pink); }
.main-navigation .main-nav ul li.sl-nav-cta > a:active { transform: translate(3px, 3px); box-shadow: 0 0 0; }
.sl-nav-note { display: none; }
.menu-toggle, .menu-toggle:hover, .menu-toggle:focus { background: transparent; color: var(--sl-ink); font-weight: 700; }
@media (max-width: 1100px) and (min-width: 769px) {
	.main-navigation .main-nav ul li a { padding-inline: 9px; font-size: .9rem; }
}
@media (max-width: 768px) {
	.main-navigation.toggled { position: fixed; inset: 0; z-index: 60; background-color: var(--sl-paper); background-image: var(--sl-grain); overflow-y: auto; padding: 16px; }
	.main-navigation.toggled .menu-toggle { margin-left: auto; display: block; }
	.main-navigation.toggled .main-nav > ul { display: grid; gap: .1rem; padding-block: 1.25rem; }
	.main-navigation.toggled .main-nav ul li a {
		font: 400 clamp(2rem, 10vw, 3rem) / 1.12 var(--tf-font-display);
		color: var(--sl-ink);
		padding: .08em 0;
		text-shadow: .045em .04em 0 var(--sl-pink);
	}
	.main-navigation.toggled .main-nav ul ul li a { font-size: 1.6rem; }
	.main-navigation.toggled .main-nav ul li.sl-nav-cta > a { display: inline-block; margin: .9rem .5rem 0 0; padding: .3em 1em; font: 700 1.25rem / 1.4 var(--tf-font-body); text-shadow: none; }
	.main-navigation.toggled .sl-nav-note { display: block; margin-top: 2rem; font: 700 .85rem / 1.4 var(--tf-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sl-ink); }
}
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
	.main-navigation.toggled .main-nav > ul > li { animation: sl-pop .5s var(--sl-spring) both; }
	.main-navigation.toggled .main-nav > ul > li:nth-child(2) { animation-delay: 40ms; }
	.main-navigation.toggled .main-nav > ul > li:nth-child(3) { animation-delay: 80ms; }
	.main-navigation.toggled .main-nav > ul > li:nth-child(4) { animation-delay: 120ms; }
	.main-navigation.toggled .main-nav > ul > li:nth-child(5) { animation-delay: 160ms; }
	.main-navigation.toggled .main-nav > ul > li:nth-child(n+6) { animation-delay: 200ms; }
}

/* ==================================================================
   8. Home hero
   ================================================================== */
.sl-hero { position: relative; padding-block: clamp(40px, 6vw, 88px) clamp(56px, 8vw, 120px); isolation: isolate; overflow: clip; }
.sl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sl-hero__title { margin: 0 0 1.5rem; font-size: clamp(3.1rem, 1.3rem + 6.6vw, 7.4rem); line-height: .94; letter-spacing: -.015em; text-shadow: .04em .035em 0 var(--sl-pink); }
.sl-hero__line { display: block; }
.sl-hero__title .sl-scrib__svg path { stroke-width: 8; }
.sl-hero__lede { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); max-width: 34ch; color: var(--sl-body); line-height: 1.5; }
.sl-hero__hand { display: flex; align-items: center; gap: .25rem; margin: 1.25rem 0 0 1rem; font: 700 1rem / 1 var(--tf-font-mono); color: var(--sl-pink-ink); rotate: -4deg; }
.sl-hero__hand svg { width: 5.5rem; height: 2.8rem; fill: none; stroke: var(--sl-pink-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform: scaleY(-1); }
.sl-hero__art { position: relative; aspect-ratio: 5 / 5.6; max-width: 560px; margin-inline: auto; width: 100%; }
.sl-hero__main { position: absolute; inset: 0 6% 12% 0; border-radius: var(--sl-blob-a); }
.sl-hero__small { position: absolute; width: 40%; aspect-ratio: 1; left: -6%; bottom: 0; border-radius: 50%; border: 3px solid var(--sl-ink); rotate: -6deg; z-index: 2; }
.sl-sprout { position: absolute; right: -2%; bottom: 2%; width: 26%; z-index: 3; overflow: visible; }
.sl-sprout__soil { fill: none; stroke: var(--sl-ink); stroke-width: 5; stroke-linecap: round; }
.sl-sprout__stem { fill: none; stroke: var(--sl-ink); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; }
.sl-sprout__leaf { fill: var(--sl-green); stroke: var(--sl-ink); stroke-width: 4; stroke-linejoin: round; mix-blend-mode: multiply; }
.sl-sprout__leaf--l { transform-origin: 60px 92px; }
.sl-sprout__leaf--r { transform-origin: 60px 66px; fill: var(--sl-pink); }
.sl-hero__sticker { position: absolute; top: 2%; right: -2%; z-index: 4; }
.sl-hero__art .sl-tape--a { top: -2%; left: 30%; rotate: -8deg; }
.sl-hero__art .sl-tape--b { bottom: 14%; right: 2%; rotate: 14deg; width: 4.5rem; }
.sl-hero__art .sl-crop--tl { top: -18px; left: -18px; }
.sl-hero__art .sl-crop--tr { top: -18px; right: -18px; }
.sl-hero__art .sl-crop--bl { bottom: -18px; left: -18px; }
.sl-hero__art .sl-crop--br { bottom: -18px; right: -18px; }
@media (max-width: 880px) {
	.sl-hero__grid { grid-template-columns: 1fr; }
	.sl-hero__art { max-width: 420px; }
	.sl-hero__hand, .sl-hero__art .sl-crop { display: none; }
}

/* Page heroes */
.sl-page-hero { position: relative; padding-block: clamp(40px, 6vw, 88px) clamp(48px, 7vw, 104px); isolation: isolate; overflow: clip; }
.sl-page-hero--mint { background-color: var(--sl-mint); }
.sl-page-hero--blush { background-color: var(--sl-blush); }
.sl-page-hero--yellow { background-color: var(--sl-yellow); }
.sl-page-hero--pink { background-color: var(--sl-pink); }
.sl-page-hero--green { background-color: var(--sl-green); }
.sl-page-hero--paper { background-color: var(--sl-paper-2); }
.sl-page-hero :is(p, .sl-lede) { color: var(--sl-ink); }
:is(.sl-page-hero--pink, .sl-page-hero--green, .sl-page-hero--yellow) .sl-eyebrow { color: var(--sl-ink); }
.sl-page-hero h1, h1.sl-mis, .sl-mis { text-shadow: .045em .04em 0 var(--sl-pink); }
.sl-page-hero--pink h1 { text-shadow: .045em .04em 0 var(--sl-green); }
.sl-page-hero--pink .sl-scrib__svg path { stroke: var(--sl-ink); }
.sl-page-hero--green .sl-scrib--green .sl-scrib__svg path { stroke: var(--sl-ink); }
.sl-page-hero h1 { margin: 0 0 1.25rem; max-width: 15ch; }
.sl-page-hero__split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sl-page-hero__split--text { grid-template-columns: minmax(0, 1fr) auto; }
.sl-page-hero__art { position: relative; max-width: 480px; width: 100%; margin-inline: auto; }
.sl-page-hero__photo { aspect-ratio: 5 / 4.4; border-radius: var(--sl-blob-b); border: 3px solid var(--sl-ink); box-shadow: 8px 8px 0 var(--sl-ink); }
.sl-page-hero--pink .sl-page-hero__photo, .sl-page-hero--green .sl-page-hero__photo { box-shadow: 8px 8px 0 var(--sl-ink); }
.sl-page-hero__sticker { position: absolute; right: -4%; top: -8%; z-index: 4; }
.sl-page-hero__split--text .sl-page-hero__sticker { position: static; }
.sl-page-hero__art .sl-crop { display: none; }
@media (min-width: 881px) { .sl-page-hero__art .sl-crop { display: block; } }
.sl-page-hero__art .sl-crop--tl { top: -26px; left: -26px; }
.sl-page-hero__art .sl-crop--tr { top: -26px; right: -26px; }
.sl-page-hero__art .sl-crop--bl { bottom: -26px; left: -26px; }
.sl-page-hero__art .sl-crop--br { bottom: -26px; right: -26px; }
@media (max-width: 880px) {
	.sl-page-hero__split, .sl-page-hero__split--text { grid-template-columns: 1fr; }
	.sl-page-hero__art { max-width: 380px; }
}

/* ==================================================================
   9. Marquee band
   ================================================================== */
.sl-marquee-band { position: relative; z-index: 2; background: var(--sl-green); border-block: 3px solid var(--sl-ink); padding-block: 1rem .75rem; overflow: hidden; rotate: -1.2deg; margin: -6px -2% 0; }
.sl-marquee-band .tf-marquee__track { align-items: center; }
.sl-marquee-band .tf-marquee__track li { display: inline-flex; align-items: center; gap: var(--tf-marquee-gap); font: 400 clamp(2rem, 1.2rem + 3.4vw, 4.25rem) / 1.1 var(--tf-font-display); color: var(--sl-ink); white-space: nowrap; }
.sl-marquee-band .tf-marquee__track li::after { content: ""; width: .55em; height: .7em; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--sl-pink); border: 3px solid var(--sl-ink); rotate: 20deg; }
.sl-marquee--pink { background: var(--sl-pink); border-top: 3px solid var(--sl-ink); margin-top: .75rem; padding-top: .5rem; }
.sl-marquee--pink .tf-marquee__track li { font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem); font-family: var(--tf-font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.sl-marquee--pink .tf-marquee__track li::after { width: .45em; height: .45em; background: var(--sl-green); border-width: 2px; border-radius: 50%; }
.sl-marquee-band .tf-marquee__toggle { background: var(--sl-paper); color: var(--sl-ink); border: 2px solid var(--sl-ink); font-weight: 700; rotate: 1.2deg; }
.sl-marquee-band .tf-marquee__toggle[aria-pressed="true"] { background: var(--sl-ink); color: var(--sl-paper); }
/* One pause button for both rows: the second row is decorative and hidden from assistive tech. */
.sl-marquee--pink .tf-marquee__toggle { display: none; }
.sl-marquee-band .tf-marquee__toggle { top: .6rem; bottom: auto; right: 2.5%; }
@media (prefers-reduced-motion: no-preference) {
	.sl-marquee-band:has(.is-paused) .tf-marquee__inner, .sl-marquee-band:is(:hover, :focus-within) .tf-marquee__inner { animation-play-state: paused; }
}
@media (max-width: 700px) { .sl-marquee--pink { display: none; } }

/* ==================================================================
   10. Cards and lists used across pages
   ================================================================== */
.sl-trio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.sl-trio__card { position: relative; background: var(--sl-card); border: 2px solid var(--sl-ink); border-radius: var(--sl-r-l); padding: .9rem .9rem 1.6rem; box-shadow: 8px 8px 0 var(--card-plate, var(--sl-green)); rotate: -1.2deg; transition: rotate .4s var(--sl-spring), translate .4s var(--sl-spring), box-shadow .3s; }
.sl-trio__card:nth-child(2) { rotate: 1deg; --card-plate: var(--sl-pink); }
.sl-trio__card:nth-child(3) { rotate: -.6deg; --card-plate: var(--sl-yellow); }
.sl-trio__card:hover, .sl-trio__card:focus-within { rotate: 0deg; translate: 0 -6px; }
.sl-trio__card .sl-tape { top: -.9rem; left: 50%; margin-left: -3rem; rotate: -4deg; }
.sl-trio__photo { aspect-ratio: 4 / 3; border-radius: calc(var(--tf-radius-l) - 12px); }
.sl-trio__body { padding: 1.25rem .6rem 0; }
.sl-trio__body h3 { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); margin: .5rem 0 .4rem; }
.sl-trio__icon { display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 2px solid var(--sl-ink); background: var(--sl-yellow); color: var(--sl-ink); margin-top: -2.6rem; position: relative; z-index: 6; }
.sl-trio__card--pink .sl-trio__icon { background: var(--sl-pink); }
.sl-trio__card--green .sl-trio__icon { background: var(--sl-green); }
.sl-trio__icon .sl-doodle { width: 2rem; height: 2rem; stroke-width: 4; }
@media (max-width: 880px) { .sl-trio { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }

.sl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; counter-reset: step; }
.sl-steps li { position: relative; padding: 1.75rem; border: 2px solid var(--sl-ink); border-radius: var(--sl-r-m); background: var(--sl-card); }
.sl-steps li:not(:last-child)::after { content: ""; position: absolute; right: -2.1rem; top: 50%; width: 2.2rem; border-top: 3px dashed var(--sl-ink); }
.sl-steps__icon { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: var(--sl-blob-a); background: var(--sl-mint); color: var(--sl-ink); margin-bottom: 1rem; }
.sl-steps li:nth-child(2) .sl-steps__icon { background: var(--sl-blush); }
.sl-steps li:nth-child(3) .sl-steps__icon { background: var(--sl-yellow); }
.sl-steps h3 { margin: 0 0 .5rem; }
.sl-steps p { margin: 0; }
.sl-steps--numbered li { counter-increment: step; padding-top: 3.75rem; }
.sl-steps--numbered li::before { content: counter(step); position: absolute; top: -1.4rem; left: 1.5rem; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 2px solid var(--sl-ink); background: var(--sl-pink); color: var(--sl-ink); font: 400 1.9rem / 1 var(--tf-font-display); box-shadow: 3px 3px 0 var(--sl-green); }
.sl-steps--numbered li:nth-child(2)::before { background: var(--sl-green); box-shadow: 3px 3px 0 var(--sl-pink); }
.sl-steps--numbered li:nth-child(3)::before { background: var(--sl-yellow); }
@media (max-width: 880px) { .sl-steps { grid-template-columns: 1fr; } .sl-steps li:not(:last-child)::after { display: none; } .sl-steps--numbered { row-gap: 3rem; } }

.sl-rules { list-style: none; margin: 0; padding: 0; counter-reset: rule; display: grid; gap: .9rem; }
.sl-rules li { counter-increment: rule; display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; align-items: center; padding: .9rem 1.1rem; background: var(--sl-card); border: 2px solid var(--sl-ink); border-radius: var(--sl-r-s); }
.sl-rules li:nth-child(even) { rotate: .5deg; } .sl-rules li:nth-child(odd) { rotate: -.4deg; }
.sl-rules li::before { content: counter(rule); display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 2px solid var(--sl-ink); font: 400 1.6rem / 1 var(--tf-font-display); color: var(--sl-ink); background: var(--sl-paper); box-shadow: 3px 2px 0 var(--sl-pink); }
.sl-rules p { margin: 0; font-weight: 600; font-size: 1.08rem; }

.sl-seasons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.sl-seasons__card { padding: 1.5rem; border: 2px solid var(--sl-ink); border-radius: var(--sl-r-l); background: var(--c, var(--sl-card)); color: var(--sl-ink); min-height: 15rem; }
.sl-seasons__card--mint { --c: var(--sl-mint); } .sl-seasons__card--yellow { --c: var(--sl-yellow); } .sl-seasons__card--blush { --c: var(--sl-blush); } .sl-seasons__card--paper { --c: var(--sl-card); }
.sl-seasons__card h3 { font-size: 2rem; margin: .75rem 0 .5rem; }
.sl-seasons__card p { margin: 0; color: var(--sl-ink); }
.sl-seasons__icon { display: inline-block; color: var(--sl-ink); }
.sl-seasons__icon .sl-doodle { width: 3.25rem; height: 3.25rem; }
@media (max-width: 1000px) { .sl-seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sl-seasons { grid-template-columns: 1fr; } }

.sl-iconlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.sl-iconlist li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; align-items: start; }
.sl-iconlist .sl-doodle { width: 3.5rem; height: 3.5rem; padding: .55rem; border-radius: 50%; background: var(--sl-card); border: 2px solid var(--sl-ink); color: var(--sl-ink); }
.sl-iconlist h3 { margin: 0 0 .25rem; font-size: 1.35rem; }
.sl-iconlist p { margin: 0; }

.sl-roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1.25rem; }
.sl-roles--four { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.sl-role { position: relative; padding: 1.5rem 1.4rem 1.6rem; border: 2px solid var(--sl-ink); border-radius: var(--sl-r-m); background: var(--sl-card); transition: translate .3s var(--sl-spring), box-shadow .3s; }
.sl-role:hover { translate: 0 -4px; box-shadow: 6px 6px 0 var(--role-c, var(--sl-green)); }
.sl-role__icon { display: inline-grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: var(--sl-blob-b); background: var(--role-c, var(--sl-green)); color: var(--sl-ink); border: 2px solid var(--sl-ink); margin-bottom: .9rem; }
.sl-role__icon .sl-doodle { width: 2.2rem; height: 2.2rem; stroke-width: 4; }
.sl-role--pink { --role-c: var(--sl-pink); } .sl-role--green { --role-c: var(--sl-green); } .sl-role--yellow { --role-c: var(--sl-yellow); } .sl-role--mint { --role-c: var(--sl-mint); } .sl-role--blush { --role-c: var(--sl-blush); }
.sl-role h3 { margin: 0 0 .4rem; }
.sl-role p { margin: 0; }

.sl-timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1rem; }
.sl-timeline::before { content: ""; position: absolute; left: 2.6rem; top: .5rem; bottom: .5rem; border-left: 3px dashed var(--sl-ink); }
.sl-timeline li { position: relative; display: grid; grid-template-columns: 5.2rem 1fr; gap: 1rem; align-items: start; }
.sl-timeline__t { margin: 0; justify-self: center; position: relative; z-index: 1; padding: .3rem .6rem; border: 2px solid var(--sl-ink); border-radius: 999px; background: var(--sl-yellow); color: var(--sl-ink); font: 700 .95rem / 1.2 var(--tf-font-mono); }
.sl-timeline li:nth-child(even) .sl-timeline__t { background: var(--sl-pink); }
.sl-timeline h3 { margin: .1rem 0 .2rem; font-size: 1.3rem; }
.sl-timeline p { margin: 0; }
.sl-shift__photo { aspect-ratio: 4 / 3; margin-top: 1.5rem; border: 2px solid var(--sl-ink); }

.sl-loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem; }
.sl-loop li { position: relative; text-align: center; padding: 2.4rem 1.25rem 1.5rem; border: 2px solid var(--sl-ink); border-radius: 50% 50% var(--tf-radius-m) var(--tf-radius-m) / 30% 30% var(--tf-radius-m) var(--tf-radius-m); background: var(--sl-card); }
.sl-loop li:not(:last-child)::after { content: ""; position: absolute; right: -2.2rem; top: 40%; width: 2rem; height: 1.2rem; border-top: 3px solid var(--sl-ink); border-radius: 50% 50% 0 0; }
.sl-loop__n { display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 2px solid var(--sl-ink); background: var(--sl-green); color: var(--sl-ink); font: 400 1.7rem / 1 var(--tf-font-display); margin-bottom: .75rem; box-shadow: 3px 3px 0 var(--sl-pink); }
.sl-loop li:nth-child(even) .sl-loop__n { background: var(--sl-pink); box-shadow: 3px 3px 0 var(--sl-green); }
.sl-loop h3 { margin: 0 0 .4rem; font-size: 1.7rem; }
.sl-loop p { margin: 0; }
@media (max-width: 960px) { .sl-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sl-loop li::after { display: none; } }
@media (max-width: 520px) { .sl-loop { grid-template-columns: 1fr; } }

.sl-packets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1.75rem 1.5rem; }
.sl-packet { position: relative; padding: 2.4rem 1.4rem 1.5rem; background: var(--pk, var(--sl-mint)); border: 2px solid var(--sl-ink); border-radius: 4px 4px var(--tf-radius-m) var(--tf-radius-m); color: var(--sl-ink); rotate: var(--r, -1deg); transition: rotate .35s var(--sl-spring), translate .35s var(--sl-spring); }
.sl-packet::before { content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 1.4rem; background: var(--sl-card); border: 2px solid var(--sl-ink); border-radius: 4px 4px 0 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 95% 60%, 90% 100%, 85% 60%, 80% 100%, 75% 60%, 70% 100%, 65% 60%, 60% 100%, 55% 60%, 50% 100%, 45% 60%, 40% 100%, 35% 60%, 30% 100%, 25% 60%, 20% 100%, 15% 60%, 10% 100%, 5% 60%, 0 100%); }
.sl-packet:nth-child(3n+2) { --r: 1.2deg; } .sl-packet:nth-child(3n) { --r: -.4deg; }
.sl-packet--pink { --pk: var(--sl-blush); } .sl-packet--green { --pk: var(--sl-mint); } .sl-packet--yellow { --pk: var(--sl-yellow); }
.sl-packet:hover { rotate: 0deg; translate: 0 -6px; }
.sl-packet__label { margin: 0 0 .4rem; font: 700 .72rem / 1.2 var(--tf-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.sl-packet h3 { margin: 0 0 .5rem; font-size: 1.75rem; }
.sl-packet p:last-child { margin: 0; }

.sl-regulars { margin: 0; display: grid; gap: .8rem; }
.sl-regulars div { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline; padding: 1rem 1.25rem; background: var(--sl-card); border: 2px solid var(--sl-ink); border-radius: var(--sl-r-s); }
.sl-regulars dt { font: 400 1.4rem / 1.2 var(--tf-font-display); color: var(--sl-ink); }
.sl-regulars dd { margin: 0; text-align: right; font-weight: 600; }

/* Collage */
.sl-collage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(90px, 9vw, 130px); gap: clamp(.75rem, 1.5vw, 1.25rem); }
.sl-collage .sl-riso { border: 2px solid var(--sl-ink); }
.sl-collage__a { grid-column: 1 / 5; grid-row: 1 / 6; rotate: -2deg; }
.sl-collage__b { grid-column: 5 / 8; grid-row: 1 / 3; rotate: 1.5deg; border-radius: 50% !important; }
.sl-collage__c { grid-column: 8 / 13; grid-row: 1 / 3; rotate: 1deg; }
.sl-collage__d { grid-column: 5 / 9; grid-row: 3 / 6; rotate: -1deg; }
.sl-collage__e { grid-column: 9 / 13; grid-row: 3 / 6; rotate: 2deg; }
@media (max-width: 760px) {
	.sl-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
	.sl-collage > * { grid-column: auto !important; grid-row: auto !important; }
	.sl-collage__c { grid-column: 1 / -1 !important; }
	.sl-collage__b { border-radius: var(--sl-r-m) !important; }
}

/* Venn: the two plates overprint where they overlap. */
.sl-venn { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; max-width: 980px; margin-inline: auto; }
.sl-venn__circle { position: relative; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--sl-ink); mix-blend-mode: multiply; display: grid; align-items: center; color: var(--sl-ink); transition: translate .9s var(--sl-spring); }
.sl-venn__circle--pink { background: var(--sl-pink); justify-items: start; padding: 0 30% 0 14%; margin-right: -14%; }
.sl-venn__circle--green { background: var(--sl-green); justify-items: end; text-align: right; padding: 0 14% 0 30%; margin-left: -14%; }
.sl-venn__circle > div { mix-blend-mode: normal; position: relative; z-index: 2; }
.sl-venn h3 { font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); margin: 0 0 .4rem; }
.sl-venn p { color: var(--sl-ink); margin: 0 0 1.1rem; max-width: 24ch; }
.sl-venn .sl-eyebrow { color: var(--sl-ink); margin-bottom: .3rem; }
.sl-venn__overlap { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3; font: 400 clamp(1.4rem, 1rem + 1.5vw, 2.2rem) / 1 var(--tf-font-display); color: var(--sl-paper); rotate: -8deg; }
.sl-venn--mini { width: 10rem; margin: 1.5rem 0 0; }
.sl-venn--mini .sl-venn__circle { padding: 0; }
@media (max-width: 720px) {
	.sl-venn:not(.sl-venn--mini) { grid-template-columns: 1fr; max-width: 400px; }
	.sl-venn:not(.sl-venn--mini) .sl-venn__circle { margin: 0; padding: 18%; justify-items: center; text-align: center; }
	.sl-venn:not(.sl-venn--mini) .sl-venn__circle--pink { margin-bottom: -14%; padding-bottom: 26%; }
	.sl-venn:not(.sl-venn--mini) .sl-venn__circle--green { padding-top: 26%; }
	.sl-venn:not(.sl-venn--mini) .sl-venn__circle p { margin-inline: auto; }
}

/* About */
.sl-about__photo { aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--sl-ink); max-width: 460px; justify-self: center; width: 100%; }

/* ==================================================================
   11. Chips, pills, statuses
   ================================================================== */
.sl-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem .25rem .5rem; border: 2px solid var(--sl-ink); border-radius: 999px; background: var(--chip, var(--sl-mint)); color: var(--sl-ink); font: 700 .8rem / 1.2 var(--tf-font-body); }
.sl-chip .sl-icon { width: 1.05rem; height: 1.05rem; }
.sl-chip--pink { --chip: var(--sl-pink); } .sl-chip--green { --chip: var(--sl-green); } .sl-chip--yellow { --chip: var(--sl-yellow); } .sl-chip--mint { --chip: var(--sl-mint); } .sl-chip--blush { --chip: var(--sl-blush); }
.sl-status { display: inline-flex; align-items: center; gap: .3rem; font: 700 .82rem / 1.2 var(--tf-font-body); color: var(--sl-ink); }
.sl-status .sl-icon { width: 1.1rem; height: 1.1rem; color: var(--sl-green-ink); }
.sl-status--few_left .sl-icon { color: var(--sl-pink-ink); }
.sl-status--full .sl-icon { color: var(--sl-ink); }
.sl-pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 44px;
	padding: .45rem 1rem;
	border: 2px solid var(--sl-ink);
	border-radius: 999px;
	background: var(--sl-card);
	color: var(--sl-ink);
	font: 700 .92rem / 1.1 var(--tf-font-body);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, translate .2s var(--sl-spring), box-shadow .2s;
}
.sl-pill .sl-icon { width: 1.1rem; height: 1.1rem; padding: 2px; border-radius: 50%; background: var(--pill-c, transparent); }
.sl-pill--pink { --pill-c: var(--sl-pink); } .sl-pill--green { --pill-c: var(--sl-green); } .sl-pill--yellow { --pill-c: var(--sl-yellow); } .sl-pill--mint { --pill-c: var(--sl-mint); } .sl-pill--blush { --pill-c: var(--sl-blush); }
.sl-pill:hover { translate: 0 -2px; box-shadow: 3px 3px 0 var(--sl-pink); color: var(--sl-ink); }
.sl-pill[aria-pressed="true"], .sl-pill[aria-current="page"] { background: var(--sl-ink); color: var(--sl-paper); box-shadow: 3px 3px 0 var(--sl-pink); }
.sl-pill[aria-pressed="true"] .sl-icon { color: var(--sl-ink); }
.sl-pill__n { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .3em; border-radius: 999px; background: var(--sl-yellow); color: var(--sl-ink); font-size: .78rem; }
.sl-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.sl-filter__label { margin: 0 .5rem 0 0; font: 700 .78rem / 1 var(--tf-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sl-ink); min-width: 4.5rem; }
.sl-check { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; min-height: 44px; cursor: pointer; }
.sl-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--sl-green-ink); }

/* ==================================================================
   12. Calendar and tickets
   ================================================================== */
.sl-cal__filters { padding: 1.25rem 1.25rem .5rem; margin-bottom: 1rem; border: 2px solid var(--sl-ink); border-radius: var(--sl-r-m); background: var(--sl-card); box-shadow: 6px 6px 0 var(--sl-green); }
.sl-cal__count, .sl-plots__count { margin: .25rem 0 .75rem; font: 700 .9rem / 1.3 var(--tf-font-mono); color: var(--sl-ink); }
.sl-cal__month { margin-top: clamp(2rem, 4vw, 3rem); }
.sl-cal__month[hidden] { display: none; }
.sl-cal__mhead { display: inline-block; margin: 0 0 1.25rem; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.sl-cal__mhead span { background: linear-gradient(transparent 58%, var(--sl-yellow) 58%, var(--sl-yellow) 92%, transparent 92%); padding-inline: .1em; }
.sl-cal__empty { padding: 1.5rem; border: 2px dashed var(--sl-ink); border-radius: var(--sl-r-s); font-weight: 600; }
.sl-tickets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.sl-tickets--list { grid-template-columns: 1fr; gap: 1rem; }
.sl-cal__item[hidden] { display: none; }
.sl-ticket {
	--tk: var(--sl-mint);
	position: relative;
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	min-height: 8.5rem;
	background: var(--sl-card);
	border-radius: var(--sl-r-s);
	border: 2px solid var(--sl-ink);
	overflow: hidden;
	transition: translate .3s var(--sl-spring), rotate .3s var(--sl-spring);
}
.sl-cal__item[data-type="workshop"] .sl-ticket { --tk: var(--sl-pink); }
.sl-cal__item[data-type="working-bee"] .sl-ticket { --tk: var(--sl-green); }
.sl-cal__item[data-type="harvest"] .sl-ticket { --tk: var(--sl-yellow); }
.sl-cal__item[data-type="kids"] .sl-ticket { --tk: var(--sl-mint); }
.sl-cal__item[data-type="social"] .sl-ticket { --tk: var(--sl-blush); }
.sl-ticket:hover, .sl-ticket:focus-within { translate: 0 -4px; rotate: -.5deg; box-shadow: 6px 6px 0 var(--tk); }
.sl-ticket__date { margin: 0; display: grid; place-items: center; background: var(--tk); border-right: 2px dashed var(--sl-ink); color: var(--sl-ink); text-align: center; }
.sl-ticket__date time { display: grid; gap: .1rem; }
.sl-ticket__dow, .sl-ticket__mon { font: 700 .78rem / 1 var(--tf-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.sl-ticket__day { font: 400 2.7rem / 1 var(--tf-font-display); }
.sl-ticket__body { padding: 1rem 1.25rem 1.1rem; display: grid; gap: .35rem; align-content: center; }
.sl-ticket__chips { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.sl-ticket__title { margin: .1rem 0 0; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); }
.sl-ticket__title a { color: var(--sl-ink); text-decoration: none; background-image: linear-gradient(var(--sl-pink), var(--sl-pink)); background-size: 0 .22em; background-position: 0 92%; background-repeat: no-repeat; transition: background-size .35s var(--sl-out); }
.sl-ticket__title a:hover, .sl-ticket__title a:focus-visible { background-size: 100% .22em; }
.sl-ticket__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sl-ticket__meta { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .92rem; color: var(--sl-body); }
.sl-ticket__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.sl-ticket__meta .sl-icon { width: 1rem; height: 1rem; color: var(--sl-green-ink); }
.sl-ticket__excerpt { margin: 0; font-size: .95rem; color: var(--sl-body); }
.sl-tickets:not(.sl-tickets--list) .sl-ticket__excerpt { display: none; }
.sl-ticket__stub { display: none; }
@media (max-width: 760px) { .sl-tickets { grid-template-columns: 1fr; } .sl-ticket { grid-template-columns: 5.25rem minmax(0, 1fr); } .sl-ticket__day { font-size: 2.2rem; } }

/* Event single */
.sl-crumbs ol { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; font: 700 .82rem / 1.4 var(--tf-font-mono); letter-spacing: .04em; }
.sl-crumbs li:not(:last-child)::after { content: "/"; margin-left: .3rem; color: var(--sl-ink); }
.sl-crumbs a { color: var(--sl-ink); }
.sl-crumbs [aria-current] { color: var(--sl-ink); opacity: .85; }
.sl-event__chips { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: 0 0 1rem; }
.sl-bigdate { margin: 0; justify-self: center; display: grid; place-items: center; text-align: center; width: min(19rem, 70vw); aspect-ratio: 1; border-radius: 50%; background: var(--sl-card); border: 3px solid var(--sl-ink); box-shadow: 10px 8px 0 var(--sl-pink); rotate: 4deg; align-content: center; gap: .2rem; color: var(--sl-ink); }
.sl-bigdate__dow, .sl-bigdate__mon { font: 700 .95rem / 1 var(--tf-font-mono); letter-spacing: .14em; text-transform: uppercase; }
.sl-bigdate__day { font: 400 clamp(5rem, 3rem + 6vw, 8.5rem) / .9 var(--tf-font-display); text-shadow: .04em .035em 0 var(--sl-green); }
.sl-event__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.sl-event__photo { aspect-ratio: 16 / 10; margin-top: 2rem; border: 2px solid var(--sl-ink); }
.sl-event__side { position: sticky; top: calc(var(--tf-header-height) + 1rem); display: grid; gap: 1.5rem; }
.sl-event__facts { margin: 0; display: grid; gap: .75rem; padding: 1.25rem; border: 2px solid var(--sl-ink); border-radius: var(--sl-r-m); background: var(--sl-mint); color: var(--sl-ink); }
.sl-event__facts dt { display: flex; align-items: center; gap: .4rem; font: 700 .8rem / 1.2 var(--tf-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.sl-event__facts dd { margin: .15rem 0 0; font-weight: 600; }
@media (max-width: 880px) { .sl-event__grid { grid-template-columns: 1fr; } .sl-event__side { position: static; } }

/* ==================================================================
   13. Programs
   ================================================================== */
.sl-programs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1.75rem; align-items: start; }
.sl-program { --pc: var(--sl-green); position: relative; padding: 1.75rem 1.5rem 1.25rem; background: var(--sl-card); border: 2px solid var(--sl-ink); border-radius: var(--sl-r-l); box-shadow: 7px 7px 0 var(--pc); overflow: hidden; isolation: isolate; }
.sl-program::before { content: ""; position: absolute; z-index: -1; right: -3.5rem; top: -3.5rem; width: 10rem; height: 10rem; border-radius: 50%; background: var(--sl-halftone-green); opacity: .55; }
.sl-program--pink { --pc: var(--sl-pink); } .sl-program--pink::before { background: var(--sl-halftone-pink); }
.sl-program--yellow { --pc: var(--sl-yellow); } .sl-program--yellow::before { background: radial-gradient(circle, var(--sl-yellow) 38%, transparent 41%) 0 0 / 9px 9px; opacity: .9; }
.sl-program__icon { display: inline-grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: 50%; border: 2px solid var(--sl-ink); background: var(--pc); color: var(--sl-ink); }
.sl-program__icon .sl-icon { width: 2rem; height: 2rem; }
.sl-program__title { margin: 1rem 0 .4rem; font-size: 1.9rem; }
.sl-program__summary { margin: 0 0 1rem; }
.sl-program__facts { margin: 0 0 1rem; display: grid; gap: .5rem; }
.sl-program__facts div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .5rem; align-items: start; border-top: 1.5px dashed var(--sl-muted); padding-top: .5rem; }
.sl-program__facts dt { display: flex; align-items: center; gap: .3rem; font: 700 .78rem / 1.6 var(--tf-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sl-ink); }
.sl-program__facts dt .sl-icon { width: 1rem; height: 1rem; }
.sl-program__facts dd { margin: 0; font-weight: 600; color: var(--sl-ink); }
.sl-program__more summary, .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 48px;
	font-weight: 700;
	color: var(--sl-ink);
	list-style: none;
}
.sl-program__more summary::-webkit-details-marker, .wp-block-details summary::-webkit-details-marker { display: none; }
.sl-program__more summary::after, .wp-block-details summary::after {
	content: "";
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
	border: 2px solid var(--sl-ink);
	border-radius: 50%;
	background: linear-gradient(var(--sl-ink), var(--sl-ink)) center / 10px 2px no-repeat, linear-gradient(var(--sl-ink), var(--sl-ink)) center / 2px 10px no-repeat, var(--sl-yellow);
	transition: rotate .3s var(--sl-spring);
}
details[open] > summary::after { rotate: 135deg; }
.sl-program__body { padding-bottom: .5rem; }
.sl-program__body p { margin: 0 0 .75rem; }
.sl-program__bring-h { font: 700 .8rem / 1.2 var(--tf-font-mono) !important; letter-spacing: .1em; text-transform: uppercase; margin: 1rem 0 .4rem !important; color: var(--sl-ink); }

/* Details blocks on pages (FAQ) */
.wp-block-details { border-top: 2px solid var(--sl-ink); padding: .4rem 0; max-width: 820px; }
.wp-block-details:last-of-type { border-bottom: 2px solid var(--sl-ink); }
.wp-block-details summary { font: 400 clamp(1.15rem, 1rem + .5vw, 1.4rem) / 1.3 var(--tf-font-display); padding-block: .6rem; }
.wp-block-details p { margin: .25rem 0 1rem; max-width: 64ch; }
.sl-section > .sl-wrap > h2 { margin-bottom: 1.5rem; }
@supports (interpolate-size: allow-keywords) {
	@media (prefers-reduced-motion: no-preference) {
		:root { interpolate-size: allow-keywords; }
		details::details-content { height: 0; overflow: clip; transition: height .4s var(--sl-out), content-visibility .4s allow-discrete; }
		details[open]::details-content { height: auto; }
	}
}

/* ==================================================================
   14. Plots and map
   ================================================================== */
.sl-plots { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.sl-map { position: sticky; top: calc(var(--tf-header-height) + 1rem); margin: 0; padding: 1rem; background: var(--sl-card); border: 2px solid var(--sl-ink); border-radius: var(--sl-r-l); box-shadow: 8px 8px 0 var(--sl-pink); }
.sl-map__svg { display: block; width: 100%; height: auto; font-family: var(--tf-font-mono); }
.sl-map__ground { fill: var(--sl-mint); stroke: var(--sl-ink); stroke-width: .5; }
.sl-map__path { fill: none; stroke: var(--sl-paper-2); stroke-width: 3.2; stroke-linecap: round; }
.sl-map__trees circle { fill: var(--sl-green); stroke: var(--sl-ink); stroke-width: .45; mix-blend-mode: multiply; }
.sl-map__shed { fill: var(--sl-ink); }
.sl-map__compost rect { fill: #8a6a4a; stroke: var(--sl-ink); stroke-width: .4; }
.sl-map__gate { stroke: var(--sl-ink); stroke-width: 1; }
.sl-map__label { font-size: 2.8px; font-weight: 700; fill: var(--sl-ink); text-anchor: middle; }
.sl-map__hatch { stroke: var(--sl-ink); stroke-width: .5; }
.sl-map__plot rect { stroke: var(--sl-ink); stroke-width: .5; transition: stroke-width .2s, translate .3s var(--sl-spring); }
.sl-map__plot--available rect { fill: var(--sl-yellow); }
.sl-map__plot--waitlist rect { fill: url(#sl-hatch) var(--sl-blush); }
.sl-map__plot--tended rect { fill: var(--sl-green); fill-opacity: .55; }
.sl-map__plot text { font-size: 3.4px; font-weight: 700; fill: var(--sl-ink); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--sl-card); stroke-width: .9px; stroke-linejoin: round; }
.sl-map__plot.is-hot rect { stroke-width: 1.3; translate: -.6px -.6px; }
.sl-map__plot.is-dim { opacity: .28; }
.sl-map figcaption { margin: .6rem .25rem .25rem; font-size: .88rem; color: var(--sl-body); }
.sl-map__legend { list-style: none; margin: .5rem .25rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .85rem; font-weight: 600; color: var(--sl-ink); }
.sl-map__legend li { display: inline-flex; align-items: center; gap: .4rem; }
.sl-key { width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--sl-ink); border-radius: 3px; }
.sl-key--available { background: var(--sl-yellow); }
.sl-key--waitlist { background: repeating-linear-gradient(45deg, var(--sl-ink) 0 1px, var(--sl-blush) 1px 4px); }
.sl-key--tended { background: color-mix(in srgb, var(--sl-green) 55%, var(--sl-card)); }
.sl-plots__filters { margin-bottom: .5rem; }
.sl-plots__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.sl-plot { position: relative; padding: 1rem 1rem 1.1rem; background: var(--sl-card); border: 2px solid var(--sl-ink); border-radius: var(--sl-r-s); transition: translate .25s var(--sl-spring), box-shadow .25s; }
.sl-plot[hidden] { display: none; }
.sl-plot:hover, .sl-plot.is-hot, .sl-plot:focus { translate: 0 -3px; box-shadow: 5px 5px 0 var(--sl-green); }
.sl-plot__code { position: absolute; top: -.85rem; right: .75rem; margin: 0; padding: .1rem .55rem; border: 2px solid var(--sl-ink); border-radius: 8px; background: var(--sl-yellow); font: 400 1.25rem / 1.2 var(--tf-font-display); color: var(--sl-ink); rotate: 4deg; }
.sl-plot--tended .sl-plot__code { background: var(--sl-mint); }
.sl-plot--waitlist .sl-plot__code { background: var(--sl-blush); }
.sl-plot__title { margin: .2rem 4rem .35rem 0; font-size: 1.2rem; }
.sl-plot__status { display: flex; align-items: center; gap: .35rem; margin: 0 0 .5rem; font-weight: 700; font-size: .9rem; color: var(--sl-ink); }
.sl-plot__status .sl-icon { width: 1.05rem; height: 1.05rem; color: var(--sl-green-ink); }
.sl-plot__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .8rem; font-size: .85rem; color: var(--sl-body); }
.sl-plot__facts li { display: inline-flex; align-items: center; gap: .25rem; }
.sl-plot__facts .sl-icon { width: .95rem; height: .95rem; }
.sl-plot__note { margin: .5rem 0 0; font-size: .88rem; font-style: italic; }
@media (max-width: 960px) { .sl-plots { grid-template-columns: 1fr; } .sl-map { position: relative; top: 0; } }
@media (max-width: 520px) { .sl-plots__list { grid-template-columns: 1fr; } }

/* ==================================================================
   15. Sowing chart
   ================================================================== */
.sl-sow__months { margin-bottom: 1rem; }
.sl-sow__months .sl-pill { min-width: 3.4rem; justify-content: center; }
.sl-sow__now { margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 2px solid var(--sl-ink); border-radius: var(--sl-r-s); background: var(--sl-card); color: var(--sl-ink); font-size: 1.1rem; box-shadow: 5px 5px 0 var(--sl-pink); }
.sl-sow__now strong { font-family: var(--tf-font-display); font-weight: 400; font-size: 1.3rem; }
.sl-sow__scroll { overflow-x: auto; border: 2px solid var(--sl-ink); border-radius: var(--sl-r-m); background: var(--sl-card); }
.sl-sow__scroll:focus-visible { outline-offset: 4px; }
.sl-sow__table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .95rem; }
.sl-sow__table caption { caption-side: bottom; text-align: left; padding: .75rem 1rem; font-size: .85rem; color: var(--sl-body); }
.sl-sow__table th, .sl-sow__table td { border-bottom: 1.5px dashed color-mix(in srgb, var(--sl-ink) 35%, transparent); padding: .55rem .25rem; text-align: center; }
.sl-sow__table thead th { font: 700 .82rem / 1 var(--tf-font-mono); letter-spacing: .06em; color: var(--sl-ink); padding-block: .8rem; }
.sl-sow__table abbr { text-decoration: none; }
.sl-sow__table tbody th { text-align: left; padding-left: 1rem; width: 15rem; }
.sl-sow__crop { display: block; font: 400 1.15rem / 1.2 var(--tf-font-display); color: var(--sl-ink); }
.sl-sow__tip { display: block; font-size: .8rem; color: var(--sl-body); font-weight: 400; }
.sl-sow__table .is-now { background: color-mix(in srgb, var(--sl-yellow) 70%, transparent); }
.sl-sow__table tr.is-sow .sl-sow__crop { background: linear-gradient(transparent 60%, var(--sl-pink) 60%, var(--sl-pink) 90%, transparent 90%); display: inline; }
.sl-sow__mark { display: inline-block; width: 1.05rem; height: 1.05rem; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; background: var(--sl-green-ink); box-shadow: 3px 2px 0 var(--sl-pink); vertical-align: middle; }

/* ==================================================================
   16. Facts
   ================================================================== */
.sl-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.sl-fact { display: grid; justify-items: center; align-content: center; gap: .3rem; aspect-ratio: 1; padding: 1rem; border-radius: 50%; border: 3px solid var(--sl-paper); background: var(--fc); color: var(--sl-ink); text-align: center; }
.sl-fact:nth-child(even) { rotate: 4deg; } .sl-fact:nth-child(odd) { rotate: -3deg; }
.sl-fact--pink { --fc: var(--sl-pink); } .sl-fact--green { --fc: var(--sl-green); } .sl-fact--yellow { --fc: var(--sl-yellow); } .sl-fact--mint { --fc: var(--sl-mint); }
.sl-fact__n { font: 400 clamp(3rem, 2rem + 3vw, 5rem) / 1 var(--tf-font-display); }
.sl-fact__l { font-weight: 700; font-size: .95rem; max-width: 12ch; line-height: 1.25; }
@media (max-width: 860px) { .sl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==================================================================
   17. Stories
   ================================================================== */
.sl-stories { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.25rem); }
.sl-story article { height: 100%; display: grid; grid-template-rows: auto 1fr; background: var(--sl-card); border: 2px solid var(--sl-ink); border-radius: var(--sl-r-l); overflow: hidden; transition: translate .3s var(--sl-spring), box-shadow .3s; position: relative; }
.sl-story article:hover, .sl-story article:focus-within { translate: 0 -5px; box-shadow: 7px 7px 0 var(--sl-pink); }
.sl-story:nth-child(even) article:hover, .sl-story:nth-child(even) article:focus-within { box-shadow: 7px 7px 0 var(--sl-green); }
.sl-story__media { display: block; }
.sl-story__media .sl-riso { aspect-ratio: 4 / 3; border-radius: 0; border-bottom: 2px solid var(--sl-ink); }
.sl-story__body { padding: 1.25rem 1.4rem 1.5rem; }
.sl-story__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 0 0 .6rem; font: 700 .8rem / 1.2 var(--tf-font-mono); color: var(--sl-ink); letter-spacing: .04em; }
.sl-story__title { margin: 0 0 .5rem; font-size: clamp(1.35rem, 1.2rem + .5vw, 1.65rem); }
.sl-story__title a { color: var(--sl-ink); text-decoration: none; }
.sl-story__title a::after { content: ""; position: absolute; inset: 0; }
.sl-story__title a:focus-visible { outline: none; }
.sl-story article:has(.sl-story__title a:focus-visible) { outline: 3px solid var(--sl-ink); outline-offset: 4px; }
.sl-story__excerpt { margin: 0; color: var(--sl-body); }
@media (max-width: 960px) { .sl-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sl-stories { grid-template-columns: 1fr; } }
.sl-catnav ul { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sl-storypage__head { max-width: 900px; }
.sl-storypage__head h1 { max-width: 20ch; }
.sl-storypage__photo { aspect-ratio: 21 / 9; margin-top: 2.5rem; border: 2px solid var(--sl-ink); }
.sl-prose--story { margin-inline: auto; }
.navigation.pagination { margin-top: 2.5rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.nav-links .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .8rem; border: 2px solid var(--sl-ink); border-radius: 999px; color: var(--sl-ink); font-weight: 700; text-decoration: none; background: var(--sl-card); }
.nav-links .page-numbers.current { background: var(--sl-ink); color: var(--sl-paper); }

/* ==================================================================
   18. Forms
   ================================================================== */
.sl-form { position: relative; display: grid; gap: 1.1rem; padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--sl-card); border: 2px solid var(--sl-ink); border-radius: var(--sl-r-l); box-shadow: 9px 9px 0 var(--sl-pink); }
.sl-section--yellow .sl-form { box-shadow: 9px 9px 0 var(--sl-green); }
.sl-form--card { box-shadow: 7px 7px 0 var(--sl-green); }
.sl-form__title { margin: 0; font-size: 1.8rem; }
.sl-field { display: grid; gap: .4rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.sl-field label, .sl-field legend { font-weight: 700; color: var(--sl-ink); padding: 0; }
.sl-field legend { margin-bottom: .5rem; }
.sl-field__hint { margin: 0; font-size: .88rem; color: var(--sl-muted); }
.sl-field__tag { margin-left: .4rem; padding: .1rem .5rem; border-radius: 999px; background: var(--sl-yellow); font: 700 .72rem / 1.4 var(--tf-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sl-ink); }
.sl-form input:not([type="radio"]):not([type="checkbox"]),
.sl-form select,
.sl-form textarea {
	width: 100%;
	min-height: 48px;
	padding: .65rem .9rem;
	border: 2px solid var(--sl-muted);
	border-radius: var(--sl-r-s);
	background-color: var(--sl-card);
	color: var(--sl-ink);
	font: 500 1rem / 1.4 var(--tf-font-body);
	transition: border-color .2s, box-shadow .2s;
}
.tf-site .sl-form select:not([multiple]):not([size]) { padding-inline-end: 2.75rem; }
.sl-form textarea { min-height: 7rem; resize: vertical; }
.sl-form input:not([type="radio"]):not([type="checkbox"]):hover, .sl-form select:hover, .sl-form textarea:hover { border-color: var(--sl-ink); }
.sl-form input:not([type="radio"]):not([type="checkbox"]):focus-visible, .sl-form select:focus-visible, .sl-form textarea:focus-visible { outline: 3px solid var(--sl-ink); outline-offset: 2px; border-color: var(--sl-ink); box-shadow: 0 0 0 7px var(--sl-blush); }
.sl-form :user-invalid { border-color: var(--sl-pink-ink) !important; }
.sl-choices__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.sl-choice { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .45rem .95rem .45rem .7rem; border: 2px solid var(--sl-muted); border-radius: 999px; background: var(--sl-card); color: var(--sl-ink); font-weight: 600; cursor: pointer; transition: background-color .2s, border-color .2s, translate .2s var(--sl-spring); }
.sl-choice:hover { border-color: var(--sl-ink); translate: 0 -2px; }
.sl-choice input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--sl-green-ink); }
.sl-choice:has(input:checked) { border-color: var(--sl-ink); background: var(--sl-mint); box-shadow: 3px 3px 0 var(--sl-green); }
.sl-choice:has(input:focus-visible) { outline: 3px solid var(--sl-ink); outline-offset: 2px; }
.sl-choice--big { font: 400 1.35rem / 1 var(--tf-font-display); padding: .55rem 1.15rem .55rem .85rem; gap: .6rem; }
.sl-choices--amounts .sl-choice:has(input:checked) { background: var(--sl-pink); box-shadow: 3px 3px 0 var(--sl-green); }
.sl-field--other { margin-top: .75rem; max-width: 18rem; }
.sl-field--other[hidden] { display: none; }
.sl-seg__row { display: inline-flex; border: 2px solid var(--sl-ink); border-radius: 999px; overflow: hidden; background: var(--sl-card); }
.sl-seg label { position: relative; display: grid; cursor: pointer; }
.sl-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sl-seg span { padding: .7rem 1.4rem; font-weight: 700; color: var(--sl-ink); min-width: 7rem; text-align: center; }
.sl-seg label + label span { border-left: 2px solid var(--sl-ink); }
.sl-seg input:checked + span { background: var(--sl-ink); color: var(--sl-paper); }
.sl-seg input:focus-visible + span { outline: 3px solid var(--sl-pink-ink); outline-offset: -5px; }
.sl-summary { margin: 0; padding: .9rem 1.1rem; border: 2px dashed var(--sl-ink); border-radius: var(--sl-r-s); background: var(--sl-paper); color: var(--sl-ink); font-size: .98rem; }
.sl-form__foot { display: grid; gap: .25rem; justify-items: start; margin-top: .4rem; }
.sl-form__foot .sl-btn { font-size: 1.05rem; }
.sl-form-sticker { margin-top: 1.5rem; }
.tf-demo-notice { border-color: var(--sl-ink); border-left-color: var(--sl-pink-ink); background: var(--sl-card); color: var(--sl-ink); font-family: var(--tf-font-body); }
.tf-demo-notice__icon { background: var(--sl-ink); color: var(--sl-paper); font-family: var(--tf-font-mono); font-style: normal; }
.tf-demo-result { position: relative; padding: 2rem; border: 2px solid var(--sl-ink); border-radius: var(--sl-r-l); background: var(--sl-mint); color: var(--sl-ink); box-shadow: 9px 9px 0 var(--sl-pink); }
.tf-demo-result p { font-size: 1.1rem; color: var(--sl-ink); }
.tf-demo-result__again { min-height: 44px; padding: .55rem 1.2rem; border: 2px solid var(--sl-ink); border-radius: 999px; background: var(--sl-card); color: var(--sl-ink); font: 700 1rem / 1 var(--tf-font-body); cursor: pointer; box-shadow: 3px 3px 0 var(--sl-green); }

/* Visit */
.sl-hours { width: 100%; border-collapse: collapse; background: var(--sl-card); border: 2px solid var(--sl-ink); border-radius: var(--sl-r-s); overflow: hidden; margin-top: 1rem; }
.sl-hours caption { text-align: left; font: 700 .8rem / 1.2 var(--tf-font-mono); letter-spacing: .08em; text-transform: uppercase; padding-bottom: .5rem; color: var(--sl-ink); }
.sl-hours th, .sl-hours td { padding: .7rem .9rem; border-bottom: 1.5px dashed color-mix(in srgb, var(--sl-ink) 40%, transparent); text-align: left; }
.sl-hours thead th { background: var(--sl-ink); color: var(--sl-paper); font: 700 .8rem / 1.2 var(--tf-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.sl-hours tbody th { font: 400 1.1rem / 1.2 var(--tf-font-display); color: var(--sl-ink); }
.sl-hours td:nth-child(2) { font-family: var(--tf-font-mono); font-weight: 700; color: var(--sl-ink); white-space: nowrap; }
.sl-street { display: block; width: 100%; height: auto; border: 2px solid var(--sl-ink); border-radius: var(--sl-r-l); background: var(--sl-card); font: 700 15px var(--tf-font-mono); }
.sl-street__block { fill: var(--sl-mint); stroke: var(--sl-ink); stroke-width: 3; }
.sl-street__road { stroke: var(--sl-ink); stroke-width: 26; opacity: .1; }
.sl-street__tram { stroke: var(--sl-ink); stroke-width: 2; stroke-dasharray: 10 8; }
.sl-street__beds rect { fill: var(--sl-green); stroke: var(--sl-ink); stroke-width: 2.5; mix-blend-mode: multiply; }
.sl-street__tree { fill: var(--sl-pink); stroke: var(--sl-ink); stroke-width: 2.5; mix-blend-mode: multiply; }
.sl-street__park { fill: var(--sl-green); fill-opacity: .4; stroke: var(--sl-ink); stroke-width: 2.5; stroke-dasharray: 6 6; }
.sl-street__gate { stroke: var(--sl-pink-ink); stroke-width: 8; stroke-linecap: round; }
.sl-street text { fill: var(--sl-ink); }
.sl-street__cap { margin: .6rem 0 0; font: 700 .8rem / 1.2 var(--tf-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sl-ink); }

/* Image credits table from the base */
.tf-credits { background: var(--sl-card); }
.tf-credits th { background: var(--sl-ink); color: var(--sl-paper); }

/* ==================================================================
   19. Footer
   ================================================================== */
.site-footer { background: var(--sl-deep); }
.sl-footer { position: relative; z-index: 1; margin-top: -14px; padding: calc(var(--sl-section) * .55 + 14px) 0 0; background-color: var(--sl-deep); background-image: var(--sl-grain); color: var(--sl-paper); overflow: hidden; -webkit-mask: var(--sl-torn) top left / 240px 16px repeat-x, linear-gradient(#000 0 0) 0 10px / 100% calc(100% - 10px) no-repeat; mask: var(--sl-torn) top left / 240px 16px repeat-x, linear-gradient(#000 0 0) 0 10px / 100% calc(100% - 10px) no-repeat; }
.sl-footer__inner { max-width: var(--tf-container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr); gap: clamp(2rem, 5vw, 5rem); }
.sl-footer__brand p { max-width: 36ch; color: var(--sl-paper); }
.sl-footer__brand .sl-logo__svg { width: 210px; margin-bottom: 1rem; }
.sl-footer__ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.25rem; }
.sl-footer__ctas .sl-btn { --plate: var(--sl-yellow); }
.sl-footer__nav > ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.sl-footer__nav > ul > li > a, .sl-footer__nav > ul > li > span { display: block; margin-bottom: .75rem; font: 700 .8rem / 1.2 var(--tf-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sl-yellow); text-decoration: none; }
.sl-footer__nav ul ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.sl-footer__nav ul ul a { color: var(--sl-paper); text-decoration: none; font-weight: 600; }
.sl-footer__nav ul ul a:hover, .sl-footer__nav ul ul a:focus-visible { color: var(--sl-yellow); text-decoration: underline; text-decoration-color: var(--sl-pink); }
.sl-footer :focus-visible { outline-color: var(--sl-yellow); }
.sl-colourbar { max-width: var(--tf-container); margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding-inline: clamp(16px, 4vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sl-colourbar__chip { padding: .35rem .7rem; font: 700 .72rem / 1 var(--tf-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sl-ink); border: 2px solid var(--sl-paper); }
.sl-colourbar__chip--pink { background: var(--sl-pink); }
.sl-colourbar__chip--green { background: var(--sl-green); }
.sl-colourbar__chip--over { background: var(--sl-over); color: var(--sl-paper); }
.sl-colourbar__chip--yellow { background: var(--sl-yellow); }
.sl-colourbar__mark { margin-left: auto; font-size: 1.6rem; color: var(--sl-paper); line-height: 1; }
.sl-bigword { position: relative; margin: 1rem 0 -.18em; text-align: center; font: 400 clamp(4.5rem, 19vw, 17rem) / .9 var(--tf-font-display); letter-spacing: -.02em; user-select: none; height: .92em; isolation: isolate; }
.sl-bigword span { position: absolute; left: 0; right: 0; top: 0; mix-blend-mode: screen; }
.sl-bigword__pink { color: var(--sl-pink); translate: -.03em 0; }
.sl-bigword__green { color: var(--sl-green); translate: .03em .02em; }
.site-info { background: var(--sl-ink); color: var(--sl-paper); font-size: .9rem; }
.site-info a { color: var(--sl-paper); }
.site-info a:hover { color: var(--sl-yellow); }
.inside-site-info { padding-block: 1.75rem; display: block; }
.site-info .tf-studio-card { border-color: var(--sl-yellow); }
.site-info .tf-studio-card__pitch { font-family: var(--tf-font-display); font-weight: 400; }
.site-info .tf-studio-card__cta { background: var(--sl-pink); color: var(--sl-ink) !important; border-color: var(--sl-pink); }
.sl-copy { display: block; margin-bottom: .3rem; }
.sl-copy__links a { text-decoration: underline; }
@media (max-width: 860px) {
	.sl-footer__inner { grid-template-columns: 1fr; }
	.sl-footer__nav > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) { .sl-footer__nav > ul { grid-template-columns: 1fr; } }

/* ==================================================================
   20. 404
   ================================================================== */
.sl-404 { padding-block: clamp(56px, 9vw, 140px); background-color: var(--sl-blush); }
.sl-404__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; align-items: center; }
.sl-404 h1 { max-width: 12ch; }
.sl-404 .sl-lede, .sl-404 p { color: var(--sl-ink); }
.sl-404__links { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.sl-dandelion { width: 100%; max-width: 380px; justify-self: center; overflow: visible; }
.sl-dandelion__halo { fill: var(--sl-yellow); mix-blend-mode: multiply; }
.sl-dandelion__stem { fill: none; stroke: var(--sl-green-ink); stroke-width: 6; stroke-linecap: round; }
.sl-dandelion__head path, .sl-seed path { stroke: var(--sl-ink); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.sl-dandelion__head circle:not(.sl-dandelion__core), .sl-seed circle { fill: var(--sl-card); stroke: var(--sl-ink); stroke-width: 2; }
.sl-dandelion__core { fill: var(--sl-pink); stroke: var(--sl-ink); stroke-width: 2.5; }
.sl-seed { transform: translate(200px, 90px); opacity: 0; }
@media (max-width: 760px) { .sl-404__grid { grid-template-columns: 1fr; } }

/* ==================================================================
   21. Motion. Only with no-preference; the base kills everything else
   under reduced motion, and every end state is the resting state.
   ================================================================== */
@keyframes sl-register { from { text-shadow: .2em -.1em 0 var(--sl-pink); } 60% { text-shadow: .02em .05em 0 var(--sl-pink); } to { text-shadow: .04em .035em 0 var(--sl-pink); } }
@keyframes sl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sl-pop { from { opacity: 0; transform: translateY(18px) rotate(-3deg) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sl-stamp { 0% { opacity: 0; scale: 1.7; } 60% { opacity: 1; scale: .92; } 100% { opacity: 1; scale: 1; } }
@keyframes sl-grow { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }
@keyframes sl-sway { 0%, 100% { rotate: 0deg; } 50% { rotate: 4deg; } }
@keyframes sl-wiggle { 30% { rotate: -14deg; } 65% { rotate: 10deg; } }
@keyframes sl-morph { 0%, 100% { border-radius: var(--sl-blob-a); } 50% { border-radius: var(--sl-blob-b); } }
@keyframes sl-drift { from { transform: translate(-16px, 12px); } to { transform: translate(16px, -12px); } }
@keyframes sl-bigword-pink { from { translate: -.1em .04em; } to { translate: -.03em 0; } }
@keyframes sl-bigword-green { from { translate: .1em -.03em; } to { translate: .03em .02em; } }
@keyframes sl-fly { 0% { opacity: 0; transform: translate(200px, 90px) rotate(0deg); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(200px + var(--dx)), calc(90px + var(--dy))) rotate(160deg); } }
@keyframes sl-venn-l { from { translate: -26% 0; } to { translate: 0 0; } }
@keyframes sl-venn-r { from { translate: 26% 0; } to { translate: 0 0; } }

@media (prefers-reduced-motion: no-preference) {
	.sl-hero__title { animation: sl-register 1.3s var(--sl-out) .15s both; }
	.sl-page-hero h1 { animation: sl-register 1.1s var(--sl-out) .1s both; }
	.sl-page-hero--pink h1 { animation: none; }
	.sl-hero__line { animation: sl-pop .8s var(--sl-spring) both; }
	.sl-hero__line + .sl-hero__line { animation-delay: .12s; }
	.sl-scrib--load .sl-scrib__svg path { animation: sl-draw .9s var(--sl-out) .75s both; }
	.sl-hero__hand path { stroke-dasharray: 1; animation: sl-draw .8s var(--sl-out) 1.4s both; }
	.sl-hero__hand path + path { animation-delay: 1.9s; }
	.tf-js .sl-scrib[data-reveal] .sl-scrib__svg path { transition: stroke-dashoffset 1s var(--sl-out) .2s; }
	.tf-js .sl-scrib[data-reveal]:not(.is-in) .sl-scrib__svg path { stroke-dashoffset: 1; }
	.sl-sprout__stem { animation: sl-draw 1.1s var(--sl-out) .35s both; }
	.sl-sprout__leaf--l { animation: sl-grow .7s var(--sl-spring) 1.1s both, sl-sway 3.2s ease-in-out 2s 3; }
	.sl-sprout__leaf--r { animation: sl-grow .7s var(--sl-spring) 1.35s both, sl-sway 3.6s ease-in-out 2.2s 3 reverse; }
	.sl-hero__sticker, .sl-page-hero__sticker { animation: sl-stamp .55s var(--sl-spring) 1s both; }
	.sl-hero__main { animation: sl-morph 9s ease-in-out 1.5s 3; }
	.sl-hero__small { animation: sl-pop .9s var(--sl-spring) .5s both; }
	.sl-venn.is-in .sl-venn__circle--pink { animation: sl-venn-l 1.1s var(--sl-spring) both; }
	.sl-venn.is-in .sl-venn__circle--green { animation: sl-venn-r 1.1s var(--sl-spring) both; }
	.tf-js .sl-venn[data-reveal]:not(.is-in) { opacity: 0; }
	.sl-seed { animation: sl-fly 5s var(--sl-out) calc(.8s + var(--i) * .5s) 1 both; }
	.sl-seed:nth-child(1) { --dx: 120px; --dy: -110px; }
	.sl-seed:nth-child(2) { --dx: 160px; --dy: -40px; }
	.sl-seed:nth-child(3) { --dx: 90px; --dy: -170px; }
	.sl-seed:nth-child(4) { --dx: 200px; --dy: -120px; }
	.sl-seed:nth-child(5) { --dx: 140px; --dy: 10px; }
	.sl-seed:nth-child(6) { --dx: 60px; --dy: -200px; }
	.tf-js [data-reveal="stagger"] > .sl-trio__card, .tf-js [data-reveal="stagger"] > .sl-packet { transition: opacity .7s var(--sl-out) calc(var(--tf-i, 0) * var(--tf-stagger)), transform .7s var(--sl-out) calc(var(--tf-i, 0) * var(--tf-stagger)), rotate .4s var(--sl-spring), translate .4s var(--sl-spring); }
	::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--sl-out); }

	@supports (animation-timeline: view()) {
		.sl-riso__shape { animation: sl-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
		.sl-bigword__pink { animation: sl-bigword-pink linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
		.sl-bigword__green { animation: sl-bigword-green linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
	}
}
/* No view timelines (or reduced motion): the seeds stay hidden only while animating. */
@media (prefers-reduced-motion: reduce) { .sl-seed { opacity: 1; } }

/* ==================================================================
   22. Forced colours and print fallbacks
   ================================================================== */
@media (forced-colors: active) {
	.sl-riso::before, .sl-riso::after, .sl-riso__shape, .sl-tape, .sl-crop, .sl-scrib__svg, .sl-venn__overlap, .sl-bigword, .sl-colourbar { display: none; }
	.sl-riso img { filter: none; mix-blend-mode: normal; }
	.sl-venn__circle, .sl-fact, .sl-sticker { border: 2px solid CanvasText; }
	.sl-torn, .sl-footer { -webkit-mask: none; mask: none; }
	.sl-sow__mark { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
	.sl-pill[aria-pressed="true"] { border-width: 4px; }
}

/* The tilted marquee band and hero shapes bleed past the edges on purpose; clip them
   at the page so they never create sideways scroll. `clip` keeps sticky elements working. */
#page, .site { overflow-x: clip; }

/* GeneratePress's default button colours outrank the style variants above; restate
   them with enough specificity to win. */
body .entry-content .wp-block-button .wp-block-button__link { color: var(--sl-ink); }
body .entry-content .wp-block-button.is-style-sl-pink .wp-block-button__link { background: var(--sl-pink); }
body .entry-content .wp-block-button.is-style-sl-green .wp-block-button__link { background: var(--sl-green); }
body .entry-content .wp-block-button.is-style-sl-outline .wp-block-button__link { background: var(--sl-card); }