/*
Theme Name: The Skagway News
Theme URI: https://skagwaynews.com/
Author: Hoke Designs
Author URI: https://hokedesigns.com/
Description: A modern newspaper for Skagway, Alaska. The masthead is a live picture of the town: the sky follows the sun, clouds and flags move with the wind at the airport, and the inlet rises and falls with the tide. The week's forecast arrives as a White Pass train.
Version: 1.5.2
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: skagway-news
Update URI: https://plugins.hokedesigns.com
*/

/* ------------------------------------------------------------------ fonts */

@font-face {
	font-family: "Besley";
	src: url("assets/fonts/besley-latin-wght-normal.woff2") format("woff2-variations");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Besley";
	src: url("assets/fonts/besley-latin-wght-italic.woff2") format("woff2-variations");
	font-weight: 400 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Newsreader";
	src: url("assets/fonts/newsreader-latin-wght-normal.woff2") format("woff2-variations");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Newsreader";
	src: url("assets/fonts/newsreader-latin-wght-italic.woff2") format("woff2-variations");
	font-weight: 200 800;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Big Shoulders Text";
	src: url("assets/fonts/big-shoulders-text-latin-wght-normal.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------ tokens */

:root {
	--ink: #142824;          /* spruce at night */
	--ink-soft: #4b5d58;
	--ink-faint: #7b8a86;
	--spruce: #1f4a3f;
	--glacier: #2b7479;      /* silt-green river water */
	--glacier-pale: #d5e8e6;
	--fireweed: #b3306c;
	--brass: #a77b20;
	--rail: #23402f;         /* White Pass parlor-car green */
	--rail-gold: #e3c27a;
	--fog: #eef2f1;
	--paper: #ffffff;
	--line: #d3dcd9;

	--display: "Besley", "Clarendon", "Rockwell", Georgia, serif;
	--text: "Newsreader", Georgia, "Times New Roman", serif;
	--ui: "Big Shoulders Text", "Arial Narrow", system-ui, sans-serif;

	--wrap: 76rem;
	--measure: 52rem;
	--page: calc(var(--wrap) - 2 * var(--gutter)); /* the menu's width: wide photos line up with it */
	--gutter: clamp(1rem, 3vw, 2rem);

	/* Type scale (1.25, set on the article's 1.1875rem) */
	--t-1: 0.875rem;
	--t0: 1.1875rem;
	--t1: 1.375rem;
	--t2: 1.75rem;
	--t3: 2.25rem;
	--t4: clamp(2.2rem, 4.2vw, 3.4rem);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 1rem;
}

body {
	margin: 0;
	background: var(--fog);
	color: var(--ink);
	font-family: var(--text);
	font-size: 1.0625rem;
	line-height: 1.6;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--glacier);
}

:focus-visible {
	outline: 3px solid var(--glacier);
	outline-offset: 2px;
}

.sn-hidden,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sn-skip {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 100;
	background: var(--paper);
	padding: 0.6rem 1rem;
	border-radius: 6px;
	font-family: var(--ui);
	font-weight: 700;
}

.sn-skip:focus {
	top: 1rem;
}

.sn-wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.sn-measure {
	max-width: calc(var(--measure) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.sn-i {
	flex: none;
	vertical-align: -0.15em;
}

/* ------------------------------------------------------------------ top strip */

.sn-top {
	background: var(--ink);
	color: #cfdad6;
	font-family: var(--ui);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.sn-top__in {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: 2.4rem;
}

.sn-top p {
	margin: 0;
}

.sn-top__date {
	margin-right: auto !important;
}

.sn-top__menu {
	display: flex;
	gap: 1.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sn-top a {
	color: inherit;
	text-decoration: none;
}

.sn-top a:hover {
	color: #fff;
}

.sn-top__acct {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.sn-top__acct a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.sn-top__join {
	color: var(--ink) !important;
	background: var(--rail-gold);
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
	font-weight: 700;
}

/* ------------------------------------------------------------------ the masthead */

.sn-mast {
	/* Defaults: an overcast Skagway afternoon, so the scene is right before the script runs. */
	--sky-top: #7f8f99;
	--sky-mid: #aab6bc;
	--sky-low: #c9d2d4;
	--sun: #eef1f2;
	--sun-a: 0.2;
	--water-top: #5a7378;
	--water-low: #38504f;
	--cloud: #e1e6e8;
	--cloud-a: 0.8;
	--far: #97a3a8;
	--ab: #6b7a81;
	--snowcap: #e4ebee;
	--east: #495f5b;
	--dewey: #3a4f4a;
	--trees: #2f4440;
	--fronts: #22332f;
	--win: #2a4740;
	--flats: #727670;
	--stars: 0;
	--fog-a: 0;
	--wind: 0.3;
	--side: 1;
	--drift: 200s;
	--flap: 1.2s;
	--tilt: -12deg;
	position: relative;
	height: clamp(13rem, 24vw, 22rem);
	overflow: hidden;
	background: var(--sky-mid);
	isolation: isolate;
}

.sn-short .sn-mast {
	height: clamp(8.5rem, 13vw, 11rem);
}

.sn-scene {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.sn-scene path,
.sn-scene rect,
.sn-scene stop {
	transition: fill 2s ease, stop-color 2s ease;
}

.sn-stars {
	fill: #fff;
	opacity: var(--stars);
	transition: opacity 2s;
}

.sn-sun {
	opacity: var(--sun-a);
	transition: opacity 2s;
}

.sn-sun__disc {
	fill: var(--sun);
}

.sn-far { fill: var(--far); }
.sn-ab { fill: var(--ab); }
.sn-snow { fill: var(--snowcap); opacity: 0.92; }
.sn-east { fill: var(--east); }
.sn-dewey { fill: var(--dewey); }
.sn-trees { fill: var(--trees); }
.sn-fronts { fill: var(--fronts); }
.sn-windows { fill: var(--win); }
.sn-shore { fill: var(--fronts); }
.sn-flats { fill: var(--flats); }
/* Wave crests rolling in from the near edge of the inlet to the shore, thinning and slowing as
   they get farther away. Without motion they sit spread across the water. */
.sn-wave {
	fill: none;
	stroke: color-mix(in srgb, var(--sky-low) 70%, white);
	stroke-linecap: round;
	stroke-width: 1.2;
	transform: translate(0, calc(var(--k) * -34px));
	opacity: calc(0.45 - var(--k) * 0.25);
}
.sn-fog rect { opacity: var(--fog-a); transition: opacity 2s; }

/* ?sky= previews (sky.js) say so, so nobody mistakes a preview for the real weather. */
.sn-mast[data-preview]::after {
	content: "Preview: " attr(data-preview);
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	z-index: 3;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: rgba(12, 21, 19, 0.72);
	color: #f4efe2;
	font: 600 0.75rem/1.4 var(--ui);
	pointer-events: none;
}

/* Mist along the shore: thicker in rain and fog, thinned by a strong wind (sky.js sets --mist-a). */
.sn-mist { opacity: var(--mist-a, 0.3); transition: opacity 3s; }
.sn-mist--front { opacity: calc(var(--mist-a, 0.3) * 0.7); }

.sn-clouds {
	opacity: var(--cloud-a);
	transition: opacity 2s;
}

.sn-clouds--front {
	opacity: var(--cloud-fa, var(--cloud-a));
}

.sn-tide {
	transition: transform 4s ease;
}

.sn-flag__pole {
	stroke: var(--fronts);
	stroke-width: 1.6;
	fill: none;
}

.sn-flag__cloth {
	fill: var(--fireweed);
	transform-box: fill-box;
	transform-origin: 0 50%;
	transform: scaleX(var(--side));
}

/* Motion: only when the reader hasn't asked for less. */
@media (prefers-reduced-motion: no-preference) {
	/* Clouds are tiled three widths across, so they drift downwind a full width and loop. */
	.is-live .sn-clouds--back {
		animation: sn-pan calc(var(--drift) * 3.2) linear infinite;
	}

	.is-live .sn-clouds--front {
		animation: sn-pan calc(var(--drift) * 2.2) linear -40s infinite;
	}

	.is-live .sn-flag__cloth {
		animation: sn-flap var(--flap) ease-in-out infinite alternate;
		animation-delay: calc(var(--i, 0) * -0.37s);
	}

	.is-live[data-calm="1"] .sn-flag__cloth {
		animation: none;
		transform: scaleX(calc(var(--side) * 0.45)) skewY(40deg);
	}

	.is-live .sn-wave {
		animation: sn-wave calc(19s - var(--wind) * 7s) cubic-bezier(0.25, 0.55, 0.45, 1) infinite;
		animation-delay: calc(var(--k) * (var(--wind) * 7s - 19s));
	}

	/* Each mist band drifts downwind at its own pace; two of them also thin and thicken. */
	.is-live .sn-mist__band {
		animation: sn-pan calc(var(--drift) * 2.6) linear infinite;
	}

	.is-live .sn-mist__band--mist-b2 {
		animation: sn-pan calc(var(--drift) * 1.9) linear -70s infinite, sn-breathe 23s ease-in-out infinite alternate;
	}

	.is-live .sn-mist__band--mist-f1 {
		animation-duration: calc(var(--drift) * 1.6);
		animation-delay: -30s;
	}

	.is-live .sn-mist__band--mist-f2 {
		animation: sn-pan calc(var(--drift) * 1.25) linear -110s infinite, sn-breathe 17s ease-in-out -6s infinite alternate;
	}
}

@keyframes sn-breathe {
	from { opacity: 1; }
	to { opacity: 0.4; }
}

@keyframes sn-pan {
	from { transform: translateX(0); }
	to { transform: translateX(calc(var(--side) * 1600px)); }
}

@keyframes sn-flap {
	from { transform: scaleX(var(--side)) skewY(calc(var(--wind) * 6deg - 3deg)) scaleY(1); }
	to { transform: scaleX(calc(var(--side) * (0.86 + var(--gust, 0.3) * 0.14))) skewY(calc(var(--wind) * -6deg + 4deg)) scaleY(0.92); }
}

@keyframes sn-wave {
	0% { transform: translate(0, 0); opacity: 0; stroke-width: 1.8; }
	12% { opacity: 0.55; }
	75% { opacity: 0.4; }
	100% { transform: translate(calc(var(--side) * 10px), -34px); opacity: 0; stroke-width: 0.6; }
}

/* Rain and snow fall across the whole scene. sky.js draws them on a canvas, drop by drop, with
   gusts rolling through; the striped <i> layers are the stand-in when scripts don't run. The
   stand-in is skewed rather than rotated so its top edge stays level with the top of the scene. */
.sn-precip {
	position: absolute;
	inset: -10% -30%;
	pointer-events: none;
	opacity: 0;
	transform: skewX(calc(-1 * var(--tilt))); /* same lean as the old rotate(var(--tilt)) */
	transition: opacity 2s;
}

.sn-precip i {
	position: absolute;
	inset: 0;
}

.sn-precip.is-canvas {
	inset: 0;
	transform: none;
}

.sn-precip.is-canvas i {
	display: none;
}

.sn-precip canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.sn-mast[data-kind="rain"] .sn-precip,
.sn-mast[data-kind="showers"] .sn-precip,
.sn-mast[data-kind="storm"] .sn-precip,
.sn-mast[data-kind="mix"] .sn-precip,
.sn-mast[data-kind="snow"] .sn-precip,
.sn-mast[data-kind="flurries"] .sn-precip,
.sn-mast[data-kind="blizzard"] .sn-precip {
	opacity: 1;
}

.sn-mast[data-kind="rain"] .sn-precip i,
.sn-mast[data-kind="showers"] .sn-precip i,
.sn-mast[data-kind="storm"] .sn-precip i,
.sn-mast[data-kind="mix"] .sn-precip i:first-child {
	background-image: repeating-linear-gradient(90deg, transparent 0 22px, rgba(235, 243, 246, 0.32) 22px 23px, transparent 23px 41px),
		repeating-linear-gradient(90deg, transparent 0 9px, rgba(235, 243, 246, 0.18) 9px 10px, transparent 10px 31px);
	background-size: 100% 46px, 100% 28px;
	-webkit-mask-image: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 46px);
	mask-image: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 46px);
}

.sn-mast[data-kind="rain"] .sn-precip i + i,
.sn-mast[data-kind="showers"] .sn-precip i + i,
.sn-mast[data-kind="storm"] .sn-precip i + i {
	opacity: 0.6;
	transform: translateX(13px) scale(0.85);
}

.sn-mast[data-kind="showers"] .sn-precip {
	opacity: 0.55;
}

.sn-mast[data-kind="snow"] .sn-precip i,
.sn-mast[data-kind="flurries"] .sn-precip i,
.sn-mast[data-kind="blizzard"] .sn-precip i,
.sn-mast[data-kind="mix"] .sn-precip i + i {
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.6px, transparent 2.2px),
		radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1.1px, transparent 1.6px);
	background-size: 46px 46px, 29px 31px;
	background-position: 0 0, 13px 17px;
}

.sn-mast[data-kind="snow"] .sn-precip i + i {
	background-size: 71px 67px, 53px 49px;
	opacity: 0.8;
}

@media (prefers-reduced-motion: no-preference) {
	.sn-mast[data-kind="rain"] .sn-precip i,
	.sn-mast[data-kind="showers"] .sn-precip i,
	.sn-mast[data-kind="storm"] .sn-precip i,
	.sn-mast[data-kind="mix"] .sn-precip i:first-child {
		animation: sn-rain calc(1.1s - var(--wind) * 0.35s) linear infinite;
	}

	.sn-mast[data-kind="rain"] .sn-precip i + i {
		animation-duration: calc(0.8s - var(--wind) * 0.25s);
	}

	.sn-mast[data-kind="snow"] .sn-precip i,
	.sn-mast[data-kind="flurries"] .sn-precip i,
	.sn-mast[data-kind="blizzard"] .sn-precip i,
	.sn-mast[data-kind="mix"] .sn-precip i + i {
		animation: sn-snow calc(9s - var(--wind) * 4s) linear infinite;
	}

	.sn-mast[data-kind="snow"] .sn-precip i + i {
		animation-duration: calc(14s - var(--wind) * 5s);
	}
}

@keyframes sn-rain {
	from { -webkit-mask-position: 0 0; mask-position: 0 0; background-position: 0 0, 0 0; }
	to { -webkit-mask-position: 0 92px; mask-position: 0 92px; background-position: 0 92px, 0 56px; }
}

@keyframes sn-snow {
	from { background-position: 0 0, 13px 17px; }
	to { background-position: 30px 460px, 50px 310px; }
}

.sn-mast__in {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-top: clamp(1.2rem, 3.2vw, 2.6rem);
}

.sn-short .sn-mast__in {
	padding-top: clamp(0.9rem, 2vw, 1.4rem);
}

/* The nameplate: wood-type Clarendon, like a sign over a Broadway storefront. */
.sn-nameplate {
	margin: 0;
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(2.6rem, 7vw, 5.6rem);
	line-height: 0.92;
	letter-spacing: -0.015em;
	color: #fffdf6;
	text-shadow: 0 2px 0 rgba(10, 21, 19, 0.35), 0 10px 30px rgba(10, 21, 19, 0.35);
}

.sn-short .sn-nameplate {
	font-size: clamp(2rem, 4.4vw, 3.2rem);
}

.sn-nameplate a {
	color: inherit;
	text-decoration: none;
}

.sn-nameplate__the {
	display: inline-block;
	font-style: italic;
	font-weight: 500;
	font-size: 0.42em;
	vertical-align: 0.95em;
	margin-right: 0.08em;
	letter-spacing: 0;
}

.sn-tagline {
	margin: 0.55rem 0 0;
	font-family: var(--text);
	font-style: italic;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	color: rgba(255, 253, 246, 0.92);
	text-shadow: 0 1px 8px rgba(10, 21, 19, 0.5);
}

.sn-short .sn-tagline {
	display: none;
}

/* The weather readout, painted like a sign board on the boardwalk. */
.sn-now {
	position: absolute;
	z-index: 3;
	right: var(--gutter);
	bottom: 0.9rem;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	max-width: min(24rem, calc(100% - 2 * var(--gutter)));
	padding: 0.45rem 0.9rem 0.45rem 0.6rem;
	border-radius: 10px;
	background: rgba(12, 26, 23, 0.62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #f5f2e8;
	text-decoration: none;
	font-family: var(--ui);
	line-height: 1.2;
}

.sn-now:hover {
	color: #fff;
	background: rgba(12, 26, 23, 0.78);
}

.sn-now__temp {
	font-family: var(--display);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1;
}

.sn-now__text {
	display: grid;
	font-size: 1.05rem;
	font-weight: 700;
}

.sn-now__more {
	font-weight: 500;
	font-size: 0.95rem;
	color: #cfdad6;
}

.sn-now__more:empty {
	display: none;
}

.sn-short .sn-now {
	bottom: 0.6rem;
}

.sn-short .sn-now__temp {
	font-size: 1.5rem;
}

.sn-short .sn-now [data-now="tide"] {
	display: none;
}

/* ------------------------------------------------------------------ sections */

.sn-nav {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 40;
}

.admin-bar .sn-nav {
	top: 32px;
}

.sn-nav__in {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.sn-nav__list {
	display: flex;
	gap: 0.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
	flex: 1;
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
}

.sn-nav__list::-webkit-scrollbar {
	display: none;
}

.sn-nav__list a {
	display: block;
	padding: 0.8rem 0.7rem;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1.08rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	color: var(--ink);
	border-bottom: 3px solid transparent;
}

.sn-nav__list a:hover,
.sn-nav__list .current-menu-item > a,
.sn-nav__list .current-category-ancestor > a {
	color: var(--glacier);
	border-bottom-color: var(--glacier);
}

.sn-search {
	display: flex;
	align-items: center;
	flex: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--fog);
	padding-left: 0.85rem;
}

.sn-search input {
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.95rem;
	width: 11rem;
	padding: 0.45rem 0;
	color: inherit;
}

.sn-search input:focus {
	outline: none;
}

.sn-search:focus-within {
	border-color: var(--glacier);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--glacier) 20%, transparent);
}

.sn-search button {
	border: 0;
	background: none;
	padding: 0.45rem 0.7rem;
	color: var(--ink-soft);
	cursor: pointer;
}

.sn-search--block {
	max-width: 28rem;
	margin: 1rem 0;
	background: var(--paper);
}

.sn-search--block input {
	width: 100%;
	flex: 1;
}

/* ------------------------------------------------------------------ shared pieces */

.sn-main {
	padding-bottom: 3rem;
}

.sn-h {
	font-family: var(--ui);
	font-weight: 800;
	font-size: 1.45rem;
	letter-spacing: 0.01em;
	line-height: 1.1;
	margin: 0 0 0.9rem;
	padding-bottom: 0.45rem;
	border-bottom: 3px solid var(--ink);
}

.sn-h a {
	text-decoration: none;
}

.sn-kicker {
	display: inline-block;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.02em;
	color: var(--glacier);
	text-decoration: none;
	margin-bottom: 0.25rem;
}

.sn-more {
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--glacier);
	text-decoration: none;
}

.sn-more:hover {
	text-decoration: underline;
}

.sn-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--ui);
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--ink);
	background: var(--rail-gold);
	border: 2px solid var(--rail-gold);
	padding: 0.5rem 1.4rem;
	border-radius: 999px;
}

.sn-btn:hover {
	color: var(--ink);
	background: #edd08f;
}

.sn-btn--ghost {
	background: transparent;
	border-color: var(--ink);
}

.sn-fine {
	font-size: 0.85rem;
	color: var(--ink-faint);
}

/* Cards */

.sn-card {
	position: relative;
}

.sn-card__img {
	display: block;
	overflow: hidden;
	border-radius: 4px;
	background: var(--glacier-pale);
}

.sn-card__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.sn-card:hover .sn-card__img img {
	transform: scale(1.025);
}

.sn-card__title {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.005em;
	margin: 0 0 0.35rem;
	text-wrap: balance;
}

.sn-card__title a {
	text-decoration: none;
}

.sn-card__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	color: inherit;
}

.sn-card__dek {
	margin: 0 0 0.45rem;
	color: var(--ink-soft);
	line-height: 1.5;
}

.sn-card__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.8rem;
	font-family: var(--ui);
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--ink-faint);
}

.sn-card__meta a {
	text-decoration: none;
	color: var(--ink-soft);
}

.sn-card--card .sn-card__img {
	margin-bottom: 0.7rem;
}

.sn-card--card .sn-card__title {
	font-size: var(--t1);
}

.sn-card--lead .sn-card__img {
	margin-bottom: 1rem;
}

.sn-card--lead .sn-card__img img {
	aspect-ratio: 16 / 10;
}

.sn-card--lead .sn-card__title {
	font-size: var(--t4);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.015em;
}

.sn-card--lead .sn-card__dek {
	font-size: 1.2rem;
	max-width: 40rem;
}

.sn-card--brief {
	padding: 0.8rem 0;
	border-top: 1px solid var(--line);
}

.sn-card--brief:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.sn-card--brief .sn-card__title {
	font-size: 1.15rem;
	font-weight: 600;
}

.sn-card--row {
	display: grid;
	grid-template-columns: 1fr 7.5rem;
	gap: 0 1rem;
	padding: 1rem 0;
	border-top: 1px solid var(--line);
}

.sn-card--row .sn-card__img {
	grid-column: 2;
	grid-row: 1;
}

.sn-card--row .sn-card__img img {
	aspect-ratio: 4 / 3;
}

.sn-card--row .sn-card__body {
	grid-column: 1;
	grid-row: 1;
}

.sn-card--row .sn-card__title {
	font-size: 1.2rem;
}

.sn-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 2rem 1.75rem;
}

/* ------------------------------------------------------------------ front page */

.sn-top-stories {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 2.5rem;
	padding-top: 2rem;
	padding-bottom: 2.5rem;
}

.sn-top-stories__latest {
	border-left: 1px solid var(--line);
	padding-left: 2rem;
}

.sn-trio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

.sn-trio__col--opinion .sn-card__title {
	font-style: italic;
	font-weight: 600;
}

.sn-columns {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.5rem;
	padding-top: 1rem;
	padding-bottom: 3rem;
}

/* The blotter reads like the log it is: a narrow grotesk on ruled paper. */
.sn-blotter {
	background: var(--paper);
	padding: 1.25rem 1.4rem;
	border-radius: 4px;
	box-shadow: 0 1px 0 var(--line);
}

.sn-blotter__date {
	margin: -0.3rem 0 0.6rem;
	font-family: var(--ui);
	font-weight: 600;
	color: var(--ink-soft);
}

.sn-blotter__log {
	font-family: var(--ui);
	font-weight: 500;
	font-size: 1.08rem;
	line-height: 1.75rem;
	background-image: linear-gradient(transparent calc(1.75rem - 1px), #e2e8e6 calc(1.75rem - 1px));
	background-size: 100% 1.75rem;
	margin-bottom: 0.8rem;
}

.sn-blotter__log p {
	margin: 0;
}

.sn-more-news {
	padding-top: 2.5rem;
	padding-bottom: 3rem;
}

.sn-ad {
	padding-block: 1.5rem;
	text-align: center;
}

.sn-ad__label {
	margin: 0 0 0.5rem;
	font-family: var(--ui);
	font-size: 0.85rem;
	color: var(--ink-faint);
}

.sn-ad__slots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

.sn-ad--inline {
	border-block: 1px solid var(--line);
	margin: 2rem 0;
}

/* ------------------------------------------------------------------ the forecast train */

.sn-forecast {
	padding: 2.5rem 0 2rem;
	background:
		linear-gradient(180deg, transparent calc(100% - 4.4rem), #d9dfdb calc(100% - 4.4rem)),
		var(--paper);
	overflow: hidden;
}

.sn-forecast__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1.5rem;
}

.sn-forecast__head .sn-h {
	border: 0;
	padding: 0;
	margin: 0;
}

.sn-forecast__src {
	margin: 0;
	font-family: var(--ui);
	font-weight: 500;
	color: var(--ink-faint);
}

/* The rail spans the whole window: the train starts in line with the heading and runs out to the
   right edge, and the track (the rail's own background, attached to its scrolling content) goes
   edge to edge however far the train scrolls. */
.sn-rail {
	position: relative;
	margin-top: 1.25rem;
	margin-inline: calc(50% - 50vw);
	padding-inline: max(var(--gutter), calc(50vw - var(--wrap) / 2 + var(--gutter))) 0;
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: 0.4rem;
	scroll-padding-inline: max(var(--gutter), calc(50vw - var(--wrap) / 2 + var(--gutter)));
	scroll-snap-type: x proximity;
	background:
		repeating-linear-gradient(90deg, #6e5a43 0 6px, transparent 6px 22px) left 0 bottom 0.4rem / 100% 3px no-repeat,
		linear-gradient(#8c949a, #8c949a) left 0 bottom calc(0.4rem + 3px) / 100% 3px no-repeat;
	background-attachment: local;
}

.sn-train {
	display: flex;
	align-items: flex-end;
	gap: 0.6rem;
	width: max-content;
	padding: 2.4rem 1rem 0 0;
}

.sn-loco {
	position: relative;
	flex: none;
	width: 204px;
	margin-right: -0.2rem;
}

.sn-loco svg {
	display: block;
}

.sn-loco__cab,
.sn-loco__boiler,
.sn-loco__stack,
.sn-loco__dome,
.sn-loco__frame {
	fill: #17201d;
}

.sn-loco__roof { fill: #2a3532; }
.sn-loco__window { fill: #e9d9a6; }
.sn-loco__band { stroke: #b8932f; stroke-width: 2; }
.sn-loco__lamp { fill: #f1d27e; }
.sn-loco__cow { fill: #9b2f25; }
.sn-loco__num { fill: #e3c27a; font: 700 15px var(--ui); }
.sn-loco__rod { stroke: #a8a28f; stroke-width: 3; stroke-linecap: round; }

.sn-wheel {
	fill: #2c3431;
	stroke: #9b2f25;
	stroke-width: 3;
}

.sn-wheel--small {
	stroke-width: 2;
}

/* Smoke drifts the way the wind blows in town. */
.sn-smoke {
	position: absolute;
	left: 30px;
	top: -14px;
	width: 24px;
	height: 40px;
}

.sn-smoke i {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(150, 160, 160, 0.55);
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.sn-smoke i {
		animation: sn-puff 3.6s ease-out infinite;
	}

	.sn-smoke i:nth-child(2) { animation-delay: 1.2s; }
	.sn-smoke i:nth-child(3) { animation-delay: 2.4s; }
}

@keyframes sn-puff {
	0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
	15% { opacity: 0.8; }
	100% { opacity: 0; transform: translate(calc(var(--side, 1) * 70px), -46px) scale(2.4); }
}

/* Parlor cars: green with gold lettering, a clerestory roof and two trucks of wheels. */
.sn-car {
	position: relative;
	flex: none;
	width: 8.6rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: center;
	scroll-snap-align: start;
	transition: transform 0.2s ease;
}

.sn-car::before {
	content: "";
	position: absolute;
	left: -0.7rem;
	bottom: 1.3rem;
	width: 0.8rem;
	height: 4px;
	background: #2c3431;
}

.sn-car__roof {
	display: block;
	height: 0.9rem;
	margin: 0 0.25rem;
	border-radius: 0.6rem 0.6rem 0 0;
	background: #2f3a36;
	box-shadow: inset 0 -3px 0 #1c2421;
}

.sn-car__body {
	display: grid;
	justify-items: center;
	gap: 0.15rem;
	padding: 0.55rem 0.4rem 0.6rem;
	background: linear-gradient(180deg, #2a4a37, var(--rail));
	border-radius: 3px;
	color: var(--rail-gold);
	box-shadow: inset 0 0 0 2px rgba(227, 194, 122, 0.35), inset 0 6px 0 rgba(255, 255, 255, 0.06);
}

.sn-car__day {
	font-family: var(--ui);
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	line-height: 1.1;
}

.sn-car__day small {
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 0;
	opacity: 0.85;
}

.sn-car__window {
	display: grid;
	place-items: center;
	width: 4.2rem;
	height: 3.3rem;
	margin: 0.2rem 0;
	border-radius: 1.4rem 1.4rem 4px 4px;
	background: linear-gradient(180deg, #e8f1f0, #c8dbda);
	color: #20413a;
	box-shadow: inset 0 0 0 3px #1a3324;
}

.sn-car__temps {
	font-family: var(--display);
	font-size: 1.05rem;
	color: #f6ead0;
}

.sn-car__temps b {
	font-weight: 700;
	font-size: 1.3rem;
}

.sn-car__temps span {
	opacity: 0.75;
}

.sn-car__pop {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-family: var(--ui);
	font-weight: 600;
	font-size: 0.9rem;
	color: #b9cfc6;
}

.sn-car__trucks {
	display: flex;
	justify-content: space-between;
	padding: 0 0.55rem;
	height: 1.25rem;
}

.sn-car__trucks i {
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: radial-gradient(circle, #8f948f 0 22%, #2c3431 24%);
	margin-top: -0.05rem;
}

.sn-car__trucks i:nth-child(2) { margin-right: auto; margin-left: 0.15rem; }
.sn-car__trucks i:nth-child(3) { margin-left: auto; margin-right: 0.15rem; }

.sn-car:hover {
	transform: translateY(-3px);
}

.sn-car[aria-expanded="true"] .sn-car__body {
	box-shadow: inset 0 0 0 2px var(--rail-gold), 0 0 0 3px var(--rail-gold);
}

.sn-car:focus-visible {
	outline: none;
}

.sn-car:focus-visible .sn-car__body {
	box-shadow: inset 0 0 0 2px var(--rail-gold), 0 0 0 3px var(--glacier);
}

.sn-wx--clear,
.sn-wx--partly {
	color: #b5741b;
}

/* The train pulls in the first time it scrolls into view. */
.sn-train.is-waiting {
	transform: translateX(110vw);
}

.sn-train.is-arriving {
	animation: sn-arrive 2.6s cubic-bezier(0.22, 0.9, 0.24, 1) both;
}

.sn-train.is-arriving .sn-car__trucks i,
.sn-train.is-arriving .sn-wheel {
	animation: sn-roll 0.5s linear 5;
	transform-box: fill-box;
	transform-origin: center;
}

.sn-car__trucks i {
	background-image: radial-gradient(circle, #8f948f 0 22%, transparent 24%), conic-gradient(#2c3431 0 25%, #3b4642 0 50%, #2c3431 0 75%, #3b4642 0);
}

@keyframes sn-arrive {
	from { transform: translateX(110vw); }
	to { transform: translateX(0); }
}

@keyframes sn-roll {
	to { transform: rotate(360deg); }
}

.sn-car-detail {
	margin-top: 1rem;
	max-width: 46rem;
	padding: 1rem 1.25rem;
	background: var(--paper);
	border-left: 4px solid var(--rail);
	border-radius: 0 6px 6px 0;
	box-shadow: 0 1px 0 var(--line);
}

.sn-car-detail h3 {
	margin: 0 0 0.4rem;
	font-family: var(--display);
	font-size: 1.2rem;
}

.sn-car-detail p {
	margin: 0 0 0.4rem;
}

/* ------------------------------------------------------------------ tides and daylight */

.sn-tidal {
	background: var(--ink);
	color: #dfe8e5;
	padding: 2.5rem 0 2.75rem;
}

.sn-tidal .sn-h {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
}

.sn-tidal__in {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: 3rem;
}

.sn-tides__chart svg {
	display: block;
	width: 100%;
	height: auto;
}

.sn-tc__night { fill: rgba(0, 0, 0, 0.22); }
.sn-tc__area { fill: rgba(84, 160, 163, 0.28); }
.sn-tc__line { fill: none; stroke: #7cc5c4; stroke-width: 2.5; }
.sn-tc__grid { stroke: rgba(255, 255, 255, 0.14); stroke-dasharray: 3 4; }
.sn-tc__pt { fill: #7cc5c4; }
.sn-tc__lbl { fill: #dfe8e5; font: 600 12.5px var(--ui); }
.sn-tc__day { fill: #9fb3ad; font: 700 13px var(--ui); }
.sn-tc__now { stroke: var(--rail-gold); stroke-width: 1.5; }
.sn-tc__me { fill: var(--rail-gold); stroke: var(--ink); stroke-width: 3; }

.sn-tc__status {
	margin: 0.5rem 0 0;
	font-family: var(--ui);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--rail-gold);
}

.sn-tides__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	list-style: none;
	margin: 1rem 0 0.5rem;
	padding: 0;
	font-family: var(--ui);
	font-size: 1.05rem;
}

.sn-tides__list li {
	display: grid;
}

.sn-tides__kind {
	font-weight: 800;
	color: #fff;
}

.sn-tides__ft {
	color: #9fb3ad;
}

.sn-tidal .sn-fine {
	color: #8ea39c;
}

.sn-daylight__arc svg {
	display: block;
	width: 100%;
	max-width: 22rem;
	height: auto;
}

.sn-arc__sky { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 2; stroke-dasharray: 2 6; }
.sn-arc__done { fill: none; stroke: var(--rail-gold); stroke-width: 3; stroke-linecap: round; }
.sn-arc__ground { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.5; }
.sn-arc__sun { fill: var(--rail-gold); filter: drop-shadow(0 0 6px rgba(227, 194, 122, 0.8)); }
.sn-arc__sun.is-down { fill: #6d7f7a; filter: none; }
.sn-daylight__arc text { fill: #9fb3ad; font: 600 12px var(--ui); }

.sn-daylight__facts {
	display: flex;
	gap: 1.75rem;
	margin: 0.75rem 0 0.4rem;
	font-family: var(--ui);
}

.sn-daylight__facts div {
	display: flex;
	flex-direction: column-reverse;
}

.sn-daylight__facts dt {
	color: #9fb3ad;
	font-weight: 600;
}

.sn-daylight__facts dd {
	margin: 0;
	font-size: 1.45rem;
	font-weight: 800;
	color: #fff;
}

.sn-daylight__delta {
	margin: 0;
	font-style: italic;
	color: #c4d2ce;
}

/* ------------------------------------------------------------------ subscribe */

.sn-subscribe {
	padding: 3rem 0;
	background:
		radial-gradient(120% 140% at 0% 100%, rgba(43, 116, 121, 0.35), transparent 60%),
		var(--rail);
	color: #f1ecdd;
}

.sn-subscribe__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 1.5rem 3rem;
	align-items: start;
}

.sn-subscribe h2 {
	margin: 0 0 0.6rem;
	font-family: var(--display);
	font-weight: 800;
	font-size: var(--t3);
	line-height: 1.08;
	color: var(--rail-gold);
}

.sn-subscribe__pitch p {
	margin: 0;
	font-size: 1.15rem;
}

.sn-subscribe__ways {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sn-subscribe__ways li {
	display: grid;
	gap: 0.3rem;
	align-content: start;
	padding: 1rem;
	border: 1px solid rgba(227, 194, 122, 0.35);
	border-radius: 6px;
}

.sn-subscribe__ways .sn-i {
	color: var(--rail-gold);
}

.sn-subscribe__ways strong {
	font-family: var(--ui);
	font-weight: 800;
	font-size: 1.2rem;
	color: #fff;
}

.sn-subscribe__ways span {
	font-size: 0.98rem;
	color: #cfd9cf;
}

.sn-subscribe__cta {
	grid-column: 2;
	margin: 0;
}

/* ------------------------------------------------------------------ a story */

.sn-article {
	background: var(--paper);
	padding-block: 2.5rem 1.5rem;
}

.sn-article__head {
	margin-bottom: 1.5rem;
}

/* Sign-up and account pages: the plugin screen leads; any notes around it sit centered below. */
.sn-page--app .sn-article__body > p {
	max-width: var(--measure);
	margin: 1.5rem auto;
	text-align: center;
	color: var(--ink-soft);
	font-family: var(--text);
}

.sn-page--app .sn-article__body > p a {
	color: var(--glacier);
}

.sn-article__title {
	margin: 0.2rem 0 0.6rem;
	font-family: var(--display);
	font-weight: 800;
	font-size: var(--t4);
	line-height: 1.06;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.sn-article__dek {
	margin: 0 0 1rem;
	font-size: 1.3rem;
	line-height: 1.45;
	color: var(--ink-soft);
}

.sn-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1.2rem;
	margin: 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--line);
	font-family: var(--ui);
	font-weight: 500;
	font-size: 1.05rem;
	color: var(--ink-faint);
}

.sn-article__meta a {
	color: var(--ink);
	text-decoration: none;
}

.sn-talk {
	color: var(--glacier) !important;
	font-weight: 700;
}

.sn-article__photo {
	max-width: var(--wrap);
	margin: 0 auto 2.25rem;
	padding-inline: var(--gutter);
}

/* A lead photo too small to fill the page stays with the text instead of being blown up. */
.sn-article__photo--narrow {
	max-width: calc(var(--measure) + 2 * var(--gutter));
}

.sn-article__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

.sn-article__photo figcaption,
.sn-prose figcaption,
.sn-prose .wp-caption-text {
	margin-top: 0.5rem;
	font-family: var(--ui);
	font-weight: 500;
	font-size: 0.98rem;
	line-height: 1.35;
	color: var(--ink-soft);
}

.sn-prose {
	font-size: 1.3125rem;
	line-height: 1.68;
}

.sn-prose > * {
	margin-block: 0 1.15em;
}

.sn-prose h2,
.sn-prose h3 {
	font-family: var(--display);
	line-height: 1.2;
	margin-top: 1.8em;
}

.sn-prose h2 {
	font-size: var(--t2);
}

.sn-prose h3 {
	font-size: var(--t1);
}

.sn-prose a {
	color: var(--glacier);
}

.sn-prose blockquote {
	margin-inline: 0;
	padding-left: 1.2rem;
	border-left: 3px solid var(--fireweed);
	font-style: italic;
}

.sn-prose img {
	border-radius: 3px;
}

.sn-prose .wp-caption,
.sn-prose figure {
	max-width: 100%;
	margin-inline: 0;
}

/* Big photos in a story break out of the text column to the page's full width (sn-wide is added
   in functions.php only when the original is large enough not to blur). */
.sn-prose .alignwide,
.sn-prose .alignfull,
.sn-prose img.sn-wide,
.sn-prose .wp-caption:has(img.sn-wide),
.sn-prose figure:has(img.sn-wide) {
	--bleed: min(var(--page), 100vw - 2 * var(--gutter));
	width: var(--bleed) !important;
	max-width: none;
	margin-inline: calc((100% - var(--bleed)) / 2);
	margin-block: 2.25rem;
	clear: both;
}

.sn-prose .wp-caption:has(img.sn-wide) img.sn-wide,
.sn-prose figure:has(img.sn-wide) img.sn-wide {
	width: 100% !important;
	margin: 0;
}

.sn-prose img.sn-wide {
	display: block;
	height: auto;
}

.sn-prose .alignleft {
	float: left;
	max-width: 45%;
	margin: 0.35rem 1.5rem 1rem 0;
}

.sn-prose .alignright {
	float: right;
	max-width: 45%;
	margin: 0.35rem 0 1rem 1.5rem;
}

.sn-prose .aligncenter {
	display: block;
	margin-inline: auto;
}

.sn-prose img {
	max-width: 100%;
	height: auto;
}

.sn-prose details {
	border-bottom: 1px solid var(--line);
	padding: 0.6rem 0;
}

.sn-prose summary {
	font-family: var(--ui);
	font-weight: 800;
	font-size: 1.2rem;
	cursor: pointer;
}

.sn-prose .sn-strip {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
}

.sn-prose .sn-strip img {
	height: 16rem;
	width: auto;
}

.sn-article__foot {
	margin-top: 2rem;
}

.sn-tags a {
	display: inline-block;
	margin: 0 0.4rem 0.4rem 0;
	padding: 0.15rem 0.7rem;
	border-radius: 999px;
	background: var(--fog);
	font-family: var(--ui);
	font-weight: 600;
	text-decoration: none;
}

.sn-related {
	padding-top: 2.5rem;
	padding-bottom: 1rem;
}

.sn-talkback {
	padding-bottom: 2rem;
}

/* HD Comments, dressed for the paper. */
.hdcm {
	--hdcm-ink: var(--ink);
	--hdcm-soft: var(--ink-soft);
	--hdcm-faint: var(--ink-faint);
	--hdcm-accent: var(--glacier);
	--hdcm-hot: var(--fireweed);
	--hdcm-brass: var(--brass);
	--hdcm-line: var(--line);
	--hdcm-tint: #f1f4f3;
	font-family: var(--text);
}

.hdcm-title {
	font-family: var(--ui);
	font-weight: 800;
}

.hdcm-name,
.hdcm-btn,
.hdcm-sort,
.hdcm-acts,
.hdcm-lv,
.hdcm-tag,
.hdcm-when {
	font-family: var(--ui);
	letter-spacing: 0.01em;
}

.hdcm-name {
	font-size: 1.08rem;
}

/* ------------------------------------------------------------------ archives and pages */

.sn-archive__head {
	padding-top: 2.25rem;
	padding-bottom: 0.5rem;
}

.sn-archive__title {
	margin: 0;
	font-family: var(--display);
	font-weight: 800;
	font-size: var(--t4);
	line-height: 1.05;
}

.sn-archive__desc {
	color: var(--ink-soft);
	font-size: 1.1rem;
}

.sn-archive__list {
	max-width: 52rem;
	margin-inline: 0;
}

@media (min-width: 77rem) {
	.sn-archive__list {
		margin-left: calc((100vw - var(--wrap)) / 2);
	}
}

.sn-archive__list .sn-card--lead {
	padding-block: 1rem 1.5rem;
}

.sn-pager {
	padding-top: 1.5rem;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1.15rem;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.sn-pager .page-numbers {
	padding: 0.3rem 0.75rem;
	border-radius: 6px;
	text-decoration: none;
}

.sn-pager .current {
	background: var(--ink);
	color: #fff;
}

.sn-list .sn-card--row:first-child {
	border-top: 0;
}

.sn-lost {
	padding-top: 3rem;
}

/* ------------------------------------------------------------------ footer */

.sn-foot {
	background: #0e1d1a;
	color: #b9c7c2;
	padding-top: 3rem;
	font-size: 1rem;
}

.sn-foot a {
	color: #e8efec;
}

.sn-foot__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 2rem 3rem;
	padding-bottom: 2rem;
}

.sn-foot__name {
	margin: 0 0 0.5rem;
	font-family: var(--display);
	font-weight: 800;
	font-size: 2rem;
	line-height: 1;
}

.sn-foot__name a {
	text-decoration: none;
	color: #fffdf6;
}

.sn-foot__sun {
	font-family: var(--ui);
	font-weight: 600;
	color: var(--rail-gold);
}

.sn-foot__menu,
.sn-foot__nav .sn-nav__list {
	columns: 2;
	column-gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--ui);
	font-weight: 600;
	font-size: 1.1rem;
	display: block;
	-webkit-mask-image: none;
	mask-image: none;
}

.sn-foot__menu a,
.sn-foot__nav .sn-nav__list a {
	display: block;
	padding: 0.25rem 0;
	text-decoration: none;
	border: 0;
	color: #e8efec;
}

.sn-foot__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-block: 1.25rem 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-family: var(--ui);
	font-weight: 500;
}

.sn-foot__base p {
	margin: 0;
}

.sn-foot__base p + p a + a {
	margin-left: 1.25rem;
}

.sn-foot__credit {
	padding-block: 0 1.5rem;
	margin-top: -0.75rem;
	font-family: var(--ui);
	font-size: 0.85rem;
	color: #8a9c96;
}

.sn-foot__credit p {
	margin: 0;
}

.sn-foot .sn-foot__credit a {
	color: #b9c7c2;
}

/* ------------------------------------------------------------------ narrower screens */

@media (max-width: 1000px) {
	.sn-top-stories,
	.sn-tidal__in,
	.sn-subscribe__in {
		grid-template-columns: 1fr;
	}

	.sn-top-stories__latest {
		border-left: 0;
		padding-left: 0;
	}

	.sn-trio,
	.sn-columns {
		grid-template-columns: 1fr 1fr;
	}

	.sn-columns .sn-blotter {
		grid-column: 1 / -1;
	}

	.sn-subscribe__cta {
		grid-column: 1;
	}
}

@media (max-width: 700px) {
	body {
		font-size: 1rem;
	}

	.sn-top__menu,
	.sn-top__date {
		display: none;
	}

	.sn-top__acct {
		margin-left: auto;
	}

	.sn-mast {
		height: 15rem;
	}

	.sn-short .sn-mast {
		height: 8.5rem;
	}

	.sn-now {
		left: var(--gutter);
		right: auto;
	}

	.sn-short .sn-now {
		display: none;
	}

	.sn-search input {
		width: 0;
		padding: 0;
	}

	.sn-search:focus-within input {
		width: 9rem;
		padding: 0.45rem 0;
	}

	.sn-trio,
	.sn-columns,
	.sn-subscribe__ways {
		grid-template-columns: 1fr;
	}

	.sn-card--lead .sn-card__dek {
		font-size: 1.05rem;
	}

	.sn-foot__in {
		grid-template-columns: 1fr;
	}

	.sn-prose {
		font-size: 1.125rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

@media print {
	.sn-top,
	.sn-nav,
	.sn-mast .sn-scene,
	.sn-precip,
	.sn-now,
	.sn-related,
	.sn-talkback,
	.sn-foot,
	.sn-ad {
		display: none !important;
	}

	.sn-mast {
		height: auto;
		background: none;
	}

	.sn-nameplate,
	.sn-tagline {
		color: #000;
		text-shadow: none;
	}
}

/* ================================================================== illustrations (inc/art.php) */

.sn-art {
	flex: none;
	overflow: visible;
}

.sn-art__disc { fill: var(--glacier-pale); }
.sn-art .s { fill: none; stroke: var(--spruce); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sn-art .f1 { fill: #f4f8f7; }
.sn-art .f2 { fill: var(--fireweed); }
.sn-art .f3 { fill: var(--rail-gold); }
.sn-art .f4 { fill: var(--glacier); }
.sn-art .f5 { fill: var(--paper); }

/* ================================================================== section bar and panels */

.sn-nav .sn-nav__top {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.8rem 0.75rem;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1.12rem;
	letter-spacing: 0.01em;
	line-height: 1.2;
	color: var(--ink);
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.sn-nav .sn-nav__top:hover,
.sn-nav .is-current > .sn-nav__top,
.sn-nav .sn-nav__top[aria-expanded="true"] {
	color: var(--glacier);
	border-bottom-color: var(--glacier);
}

.sn-nav__chev {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	transition: transform 0.2s ease;
}

.sn-nav__top[aria-expanded="true"] .sn-nav__chev {
	transform: rotate(180deg);
}

@media (min-width: 901px) {
	.sn-nav__list {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

.sn-panels {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
}

.sn-panel {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 30px 40px -28px rgba(20, 40, 36, 0.4);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
	max-height: calc(100vh - 8rem);
	overflow-y: auto;
}

.sn-panel.is-open {
	opacity: 1;
	transform: none;
}

.sn-panel__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 19rem;
	gap: 2.2rem;
	padding-block: 1.3rem 1.6rem;
}

.sn-panel__h {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.7rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--line);
	font-family: var(--ui);
	font-weight: 800;
	font-size: 1.4rem;
}

.sn-panel__h a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--glacier);
	text-decoration: none;
}

.sn-panel__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.2rem 0.8rem;
}

.sn-tile {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.5rem 0.6rem;
	border-radius: 12px;
	text-decoration: none;
	color: var(--ink);
	transition: background-color 0.15s ease;
}

.sn-tile:hover,
.sn-tile:focus-visible {
	background: var(--fog);
	color: var(--ink);
}

.sn-tile .sn-art {
	transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.sn-tile:hover .sn-art,
.sn-tile:focus-visible .sn-art {
	transform: rotate(-7deg) scale(1.1);
}

.sn-tile__txt {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.sn-tile__txt b {
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1.12rem;
}

.sn-tile__txt small {
	font-size: 0.92rem;
	color: var(--ink-soft);
}

.sn-tile[aria-current] b {
	color: var(--glacier);
}

.sn-panel__feature {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-decoration: none;
	color: var(--ink);
}

.sn-panel__photo {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 10px;
	background: var(--fog);
}

.sn-panel__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.sn-panel__feature:hover .sn-panel__photo img {
	transform: scale(1.04);
}

.sn-panel__kicker {
	margin-top: 0.45rem;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--fireweed);
}

.sn-panel__feature > b {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.22rem;
	line-height: 1.2;
}

.sn-panel__feature:hover > b {
	color: var(--glacier);
}

.sn-panel__feature small {
	color: var(--ink-faint);
	font-size: 0.9rem;
}

.sn-panel__feature--wx {
	align-self: start;
	padding: 1.1rem 1.3rem 1.2rem;
	border-radius: 14px;
	background: var(--rail);
	color: var(--paper);
}

.sn-panel__feature--wx:hover {
	color: var(--paper);
}

.sn-panel__feature--wx .sn-panel__kicker {
	margin: 0;
	color: var(--rail-gold);
}

.sn-panel__feature--wx > b,
.sn-panel__feature--wx:hover > b {
	color: var(--paper);
	font-family: var(--ui);
}

.sn-panel__feature--wx small {
	color: #c9d8d0;
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
}

.sn-panel__wx {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.sn-panel__wx b {
	font-family: var(--ui);
	font-weight: 800;
	font-size: 2.8rem;
	line-height: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.sn-panel.is-open .sn-panel__grid li {
		animation: sn-rise 0.32s cubic-bezier(0.2, 0.7, 0.3, 1) both;
		animation-delay: calc(var(--i, 0) * 28ms);
	}
}

@keyframes sn-rise {
	from { opacity: 0; transform: translateY(6px); }
}

@media (max-width: 900px) {
	.sn-panel__in {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	.sn-panel__grid {
		grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	}

	.sn-panel__feature:not(.sn-panel__feature--wx) {
		flex-direction: row;
		align-items: center;
		gap: 0.8rem;
	}

	.sn-panel__feature:not(.sn-panel__feature--wx) .sn-panel__photo {
		width: 6.5rem;
		flex: none;
	}

	.sn-panel__feature:not(.sn-panel__feature--wx) .sn-panel__kicker,
	.sn-panel__feature:not(.sn-panel__feature--wx) small {
		display: none;
	}
}

/* ================================================================== search over the bar */

.sn-find {
	flex: none;
	margin-left: auto;
}

.sn-find__btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.7rem;
	height: 2.7rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	isolation: isolate;
}

.sn-find__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: var(--glacier-pale);
	opacity: 0;
	transform: scale(0.4);
	transition: transform 0.28s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.2s ease;
}

.sn-find__btn:hover::before,
.sn-find__btn:focus-visible::before,
.sn-find__btn[aria-expanded="true"]::before {
	opacity: 1;
	transform: scale(1);
}

.sn-find__glass {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.sn-find__btn:hover .sn-find__glass {
	transform: rotate(-14deg) scale(1.1);
}

.sn-find__glint {
	stroke: var(--glacier);
	stroke-width: 1.6;
	stroke-dasharray: 6;
	stroke-dashoffset: 6;
	opacity: 0;
	transition: stroke-dashoffset 0.35s ease 0.08s, opacity 0.2s ease;
}

.sn-find__btn:hover .sn-find__glint {
	opacity: 1;
	stroke-dashoffset: 0;
}

.sn-find__btn.is-press::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--glacier);
	animation: sn-press 0.45s ease-out forwards;
	pointer-events: none;
}

@keyframes sn-press {
	from { transform: scale(0.6); opacity: 0.9; }
	to { transform: scale(2); opacity: 0; }
}

.sn-find__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 6;
}

.sn-find__bar {
	height: var(--nav-h, 3.3rem);
	background: var(--rail);
	clip-path: circle(0 at var(--ox, 96%) var(--oy, 50%));
	transition: clip-path 0.42s cubic-bezier(0.6, 0, 0.2, 1);
}

.sn-find__panel.is-open .sn-find__bar {
	clip-path: circle(160vmax at var(--ox, 96%) var(--oy, 50%));
}

.sn-find__form {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	height: 100%;
}

.sn-find__icon {
	flex: none;
	fill: none;
	stroke: var(--rail-gold);
	stroke-width: 2.2;
	stroke-linecap: round;
}

.sn-find__form input {
	flex: 1;
	min-width: 0;
	padding: 0.35rem 0;
	border: 0;
	border-bottom: 2px solid rgba(255, 255, 255, 0.22);
	background: transparent;
	color: var(--paper);
	font-family: var(--ui);
	font-weight: 600;
	font-size: 1.3rem;
}

.sn-find__form input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.sn-find__form input:focus {
	outline: none;
	border-bottom-color: var(--rail-gold);
}

.sn-find__form input::-webkit-search-cancel-button {
	display: none;
}

.sn-find__go {
	flex: none;
	padding: 0.35rem 1rem;
	border: 0;
	border-radius: 999px;
	background: var(--rail-gold);
	color: var(--ink);
	font-family: var(--ui);
	font-weight: 800;
	font-size: 1.05rem;
	cursor: pointer;
}

.sn-find__go:hover {
	background: var(--paper);
}

.sn-find__close {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--paper);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.25s ease;
}

.sn-find__close:hover {
	background: rgba(255, 255, 255, 0.12);
	transform: rotate(90deg);
}

.sn-find__drop {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 30px 40px -28px rgba(20, 40, 36, 0.4);
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.22s ease 0.14s, transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) 0.14s;
}

.sn-find__panel.is-open .sn-find__drop {
	opacity: 1;
	transform: none;
}

.sn-find__in {
	padding-block: 0.4rem 1.3rem;
}

.sn-find__h {
	margin: 0.9rem 0 0.5rem;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--ink-soft);
}

.sn-find__pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

@media (prefers-reduced-motion: no-preference) {
	.sn-find__panel.is-open .sn-find__pills li {
		animation: sn-rise 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) both;
		animation-delay: calc(160ms + var(--i, 0) * 24ms);
	}
}

.sn-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.36rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--fog);
	color: var(--ink);
	font-family: var(--ui);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.sn-pill:hover {
	border-color: var(--glacier);
	background: var(--glacier-pale);
	color: var(--ink);
	transform: translateY(-1px);
}

.sn-pill--jump {
	padding-left: 0.3rem;
	background: var(--paper);
}

.sn-pill--ask {
	border-color: var(--rail);
	background: var(--rail);
	color: var(--paper);
	cursor: pointer;
}

.sn-pill--ask:hover {
	background: var(--glacier);
	color: var(--paper);
}

@media (max-width: 600px) {
	.sn-find__go {
		display: none;
	}

	.sn-find__form input {
		font-size: 1.12rem;
	}
}

/* ================================================================== shared page pieces */

.sn-btn--rail {
	background: var(--rail);
	border-color: var(--rail);
	color: var(--rail-gold);
}

.sn-btn--rail:hover {
	background: var(--glacier);
	border-color: var(--glacier);
	color: var(--paper);
}

.sn-hero {
	background: linear-gradient(180deg, var(--paper), var(--fog));
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}

.sn-hero__in {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 2rem;
	align-items: center;
	padding-block: 2.6rem 2.2rem;
}

.sn-hero__h {
	margin: 0 0 0.8rem;
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--t4);
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.sn-hero__lede {
	max-width: 36rem;
	margin: 0 0 1.2rem;
	font-size: 1.22rem;
	line-height: 1.55;
	color: var(--ink-soft);
}

.sn-hero__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sn-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 1rem 0.3rem 0.35rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.sn-chip > .sn-i {
	margin-left: 0.55rem;
	color: var(--glacier);
}

.sn-chip:hover {
	border-color: var(--glacier);
	color: var(--ink);
	transform: translateY(-1px);
}

.sn-hero__art {
	display: flex;
	justify-content: center;
}

.sn-hero-art {
	width: 100%;
	max-width: 26rem;
	height: auto;
}

.sn-hero-art__sky { fill: color-mix(in srgb, var(--glacier-pale) 70%, var(--paper)); }
.sn-hero-art__water { fill: var(--glacier); opacity: 0.55; }
.sn-hero-art__sun { fill: var(--rail-gold); opacity: 0.55; }
.sn-hero-art__far { fill: color-mix(in srgb, var(--glacier) 38%, var(--fog)); }
.sn-hero-art__snow { fill: var(--paper); }
.sn-hero-art__near { fill: var(--spruce); opacity: 0.85; }
.sn-hero-art__trail { fill: none; stroke: var(--glacier); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 9; }
.sn-hero-art__env { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.sn-hero-art__flap { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.sn-hero-art__stamp { fill: var(--fireweed); }
.sn-hero-art__mark { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; }

.sn-hero-art__page { fill: var(--paper); stroke: var(--line); stroke-width: 2; }
.sn-hero-art__page2 { fill: var(--glacier-pale); }
.sn-hero-art__mast { fill: var(--ink); }
.sn-hero-art__copy path { stroke: #d6dedb; stroke-width: 4; stroke-linecap: round; }
.sn-hero-art__ad { stroke: var(--paper); stroke-width: 3; }
.sn-hero-art__ad--1 { fill: var(--fireweed); }
.sn-hero-art__ad--2 { fill: var(--glacier); }
.sn-hero-art__ad--3 { fill: var(--rail-gold); }
.sn-hero-art__star { fill: var(--rail-gold); }

@media (prefers-reduced-motion: no-preference) {
	.sn-hero-art__trail {
		animation: sn-trail 1.6s linear infinite;
	}

	.sn-hero-art__letter {
		animation: sn-float 5.5s ease-in-out infinite alternate;
		transform-box: fill-box;
		transform-origin: center;
	}

	.sn-hero-art__ad {
		animation: sn-ad-in 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) both;
		transform-box: fill-box;
		transform-origin: center;
	}

	.sn-hero-art__ad--2 { animation-delay: 0.35s; }
	.sn-hero-art__ad--3 { animation-delay: 0.7s; }

	.sn-hero-art__star {
		animation: sn-ad-in 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 1.1s both, sn-twinkle 3s ease-in-out 1.8s infinite;
		transform-box: fill-box;
		transform-origin: center;
	}
}

@keyframes sn-trail {
	to { stroke-dashoffset: -11; }
}

@keyframes sn-float {
	from { transform: translate(0, 0) rotate(0deg); }
	to { transform: translate(-12px, 8px) rotate(-4deg); }
}

@keyframes sn-ad-in {
	from { opacity: 0; transform: translateY(-26px) scale(0.85); }
}

@keyframes sn-twinkle {
	50% { transform: scale(1.18) rotate(12deg); }
}

@media (max-width: 800px) {
	.sn-hero__in {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 1.8rem 1.4rem;
	}

	.sn-hero__art {
		order: -1;
	}

	.sn-hero-art {
		max-width: 15rem;
	}
}

.sn-box {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1.3rem 1.4rem;
}

.sn-box__h {
	margin: 0 0 1.1rem;
	font-family: var(--ui);
	font-weight: 800;
	font-size: 1.7rem;
	line-height: 1.1;
}

/* ================================================================== contact page */

.sn-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 21rem;
	gap: 1.8rem;
	align-items: start;
	padding-block: 2rem 3rem;
}

.sn-box--form {
	padding: 1.8rem 2rem 2rem;
}

.sn-contact__aside {
	display: grid;
	gap: 0.8rem;
	position: sticky;
	top: 5rem;
}

.sn-way {
	display: flex;
	gap: 0.9rem;
}

.sn-way > .sn-i {
	margin-top: 0.15rem;
	color: var(--glacier);
}

.sn-way h3 {
	margin: 0 0 0.2rem;
	font-family: var(--ui);
	font-weight: 800;
	font-size: 1.2rem;
}

.sn-way p {
	margin: 0 0 0.45rem;
	font-size: 1rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.sn-way p:last-child {
	margin: 0;
}

.sn-contact__pub {
	margin: 0.1rem 0.4rem;
	font-family: var(--ui);
	font-weight: 600;
	color: var(--ink-soft);
}

.sn-box--link {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sn-box--link:hover {
	color: var(--ink);
	border-color: var(--glacier);
	transform: translateY(-2px);
	box-shadow: 0 14px 24px -18px rgba(20, 40, 36, 0.5);
}

.sn-box--link span {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.sn-box--link b {
	font-family: var(--ui);
	font-weight: 800;
	font-size: 1.15rem;
}

.sn-box--link small {
	color: var(--ink-soft);
	font-size: 0.95rem;
}

@media (max-width: 900px) {
	.sn-contact__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sn-contact__aside {
		position: static;
	}

	.sn-box--form {
		padding: 1.3rem 1.1rem 1.5rem;
	}
}

/* The map: full width, in the paper's colors. */
.sn-map {
	position: relative;
	height: clamp(24rem, 44vw, 34rem);
	background: #dfe9e6;
	border-top: 1px solid var(--line);
	overflow: hidden;
}

/* MapLibre's own CSS sets .maplibregl-map { position: relative }, so this needs the extra class. */
.sn-map__canvas,
.sn-map .sn-map__canvas.maplibregl-map {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.sn-map__canvas.is-ready {
	opacity: 1;
}

.sn-map__over {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	pointer-events: none;
}

.sn-map__card {
	display: flex;
	gap: 1rem;
	max-width: 24rem;
	padding: 1.3rem 1.4rem;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 20px 40px -18px rgba(20, 40, 36, 0.5);
	pointer-events: auto;
}

.sn-map__h {
	margin: 0 0 0.2rem;
	font-family: var(--ui);
	font-weight: 800;
	font-size: 1.6rem;
}

.sn-map__card p {
	margin: 0 0 0.4rem;
	font-size: 1rem;
	line-height: 1.45;
}

.sn-map__mail {
	color: var(--ink-soft);
	font-size: 0.95rem !important;
}

.sn-map__open {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--ui);
	font-weight: 700;
	color: var(--glacier);
	text-decoration: none;
}

.sn-pin {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sn-pin svg {
	position: relative;
	filter: drop-shadow(0 6px 6px rgba(20, 40, 36, 0.3));
}

.sn-pin__pulse {
	position: absolute;
	bottom: -6px;
	left: 50%;
	width: 24px;
	height: 9px;
	margin-left: -12px;
	border-radius: 50%;
	background: rgba(179, 48, 108, 0.35);
}

.sn-pin__label {
	position: absolute;
	left: 100%;
	top: 6px;
	margin-left: 4px;
	padding: 0.1rem 0.6rem;
	border-radius: 999px;
	background: var(--paper);
	color: var(--rail);
	font-family: var(--ui);
	font-weight: 800;
	font-size: 1rem;
	white-space: nowrap;
	box-shadow: 0 4px 10px rgba(20, 40, 36, 0.2);
}

@media (prefers-reduced-motion: no-preference) {
	.sn-pin svg {
		animation: sn-pin-drop 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 1.6s both;
	}

	.sn-pin__pulse {
		animation: sn-pulse 2.4s ease-out 2.2s infinite;
	}
}

@keyframes sn-pin-drop {
	from { opacity: 0; transform: translateY(-46px); }
}

@keyframes sn-pulse {
	from { transform: scale(0.6); opacity: 1; }
	to { transform: scale(2.6); opacity: 0; }
}

@media (max-width: 700px) {
	.sn-map {
		height: 30rem;
	}

	.sn-map__over {
		align-items: flex-end;
		padding-bottom: 1rem;
	}

	.sn-map__card {
		max-width: none;
		padding: 1rem 1.1rem;
	}
}

/* ================================================================== advertise page */

.sn-stats {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 2rem;
	margin: 0 0 1.4rem;
	padding: 0;
}

.sn-stats b {
	display: block;
	font-family: var(--ui);
	font-weight: 800;
	font-size: 2.1rem;
	line-height: 1;
	color: var(--fireweed);
}

.sn-stats span {
	font-size: 0.98rem;
	color: var(--ink-soft);
}

.sn-request {
	padding-block: 1rem 3.5rem;
	scroll-margin-top: 4rem;
}

/* A ledger-ruled order sheet, unlike the newsroom's rounded contact form. */
.sn-request__card {
	max-width: 58rem;
	margin-inline: auto;
	border: 1px solid #cbd4d1;
	border-radius: 6px;
	background:
		repeating-linear-gradient(180deg, transparent 0 31px, rgba(43, 116, 121, 0.06) 31px 32px),
		#fffdf8;
	box-shadow: 0 30px 50px -36px rgba(20, 40, 36, 0.6);
	overflow: hidden;
}

.sn-request__head {
	position: relative;
	padding: 1.6rem 2.2rem 1.5rem;
	background: var(--rail);
	color: var(--paper);
	border-bottom: 4px double var(--rail-gold);
}

.sn-request__head h2 {
	margin: 0 0 0.35rem;
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--t3);
	line-height: 1.05;
	color: var(--rail-gold);
}

.sn-request__head p {
	margin: 0;
	max-width: 40rem;
	color: #d5e1da;
}

.sn-request__body {
	padding: 1.6rem 2.2rem 2.2rem;
}

@media (max-width: 700px) {
	.sn-request__head,
	.sn-request__body {
		padding-inline: 1.1rem;
	}
}

/* ================================================================== forms (Gravity Forms, its CSS off) */

.sn-form .gform_validation_container,
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield_visibility_hidden {
	display: none !important;
}

.gform_wrapper .gform_required_legend {
	margin: 0 0 1rem;
	font-size: 0.92rem;
	color: var(--ink-faint);
}

.gform_wrapper .gform_validation_errors {
	margin: 0 0 1.2rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid #e7b6c9;
	border-radius: 10px;
	background: #fbedf3;
	color: #7c1f49;
}

.gform_wrapper .gform_validation_errors h2 {
	margin: 0;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1.08rem;
}

.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1.15rem 1rem;
	counter-reset: sn-step;
}

.gform_wrapper .gfield {
	grid-column: span 12;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.gform_wrapper .gfield--width-half {
	grid-column: span 6;
}

@media (max-width: 640px) {
	.gform_wrapper .gfield--width-half {
		grid-column: span 12;
	}
}

.gform_wrapper .gfield_label {
	display: block;
	margin: 0 0 0.35rem;
	padding: 0;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1.14rem;
	color: var(--ink);
}

.gform_wrapper .gfield_required {
	margin-left: 0.3rem;
	font-family: var(--text);
	font-weight: 400;
	font-style: italic;
	font-size: 0.85rem;
	color: var(--ink-faint);
}

.gform_wrapper .sn-hide-label > .gfield_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.gform_wrapper .gfield_description {
	margin-top: 0.35rem;
	font-size: 0.93rem;
	line-height: 1.45;
	color: var(--ink-soft);
}

.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
	margin-top: 0.35rem;
	font-family: var(--ui);
	font-weight: 600;
	color: #a3215a;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	background: var(--paper);
	color: var(--ink);
	font: inherit;
	font-size: 1.05rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gform_wrapper textarea {
	height: 10rem;
	resize: vertical;
}

.gform_wrapper textarea.small {
	height: 6.5rem;
}

/* The field's own description already says which files are welcome. */
.gform_wrapper .gform_fileupload_rules {
	display: none;
}

.gform_wrapper select {
	appearance: none;
	padding-right: 2.4rem;
	background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%231f4a3f' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 0.8rem;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	outline: none;
	border-color: var(--glacier);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--glacier) 18%, transparent);
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: #c2416f;
}

/* Section headings (the ad form numbers them). */
.gform_wrapper .gsection {
	margin-top: 0.8rem;
	padding-bottom: 0.45rem;
	border-bottom: 2px solid var(--line);
}

.gform_wrapper .gsection:first-child {
	margin-top: 0;
}

.gform_wrapper .gsection_title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-family: var(--ui);
	font-weight: 800;
	font-size: 1.5rem;
}

.sn-form--ad .gsection {
	counter-increment: sn-step;
}

.sn-form--ad .gsection_title::before {
	content: counter(sn-step);
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--rail);
	color: var(--rail-gold);
	font-size: 1.1rem;
}

.gform_wrapper .gsection_description {
	margin-top: 0.25rem;
	color: var(--ink-soft);
	font-size: 0.98rem;
}

/* Choices: the inputs stay in the page for keyboards and screen readers; the labels are the buttons. */
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.gform_wrapper .gchoice {
	position: relative;
}

.gform_wrapper .gchoice > input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.gform_wrapper .gchoice > label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	font-family: var(--ui);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.gform_wrapper .gchoice > label:hover {
	border-color: var(--glacier);
}

.gform_wrapper .gchoice > input:checked + label {
	border-color: var(--rail);
	background: var(--rail);
	color: var(--paper);
}

.gform_wrapper .gchoice > input:focus-visible + label {
	outline: 3px solid var(--glacier);
	outline-offset: 2px;
}

/* Picture choices: cards with a drawing. */
.gform_wrapper .sn-choices--art .gfield_radio,
.gform_wrapper .sn-choices--art .gfield_checkbox {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr));
	gap: 0.6rem;
}

.gform_wrapper .sn-choices--art .gchoice > label {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0.5rem;
	height: 100%;
	padding: 1rem 0.6rem 0.85rem;
	border-radius: 14px;
	text-align: center;
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.15;
}

.gform_wrapper .sn-choices--art .gchoice > label:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 20px -16px rgba(20, 40, 36, 0.6);
}

.gform_wrapper .sn-choices--art .gchoice > input:checked + label {
	border-color: var(--glacier);
	background: color-mix(in srgb, var(--glacier-pale) 55%, var(--paper));
	color: var(--ink);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--glacier) 25%, transparent);
}

/* A check badge on the picked card. */
.gform_wrapper .sn-choices--art .gchoice > label::after {
	content: "";
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	background: var(--paper);
	transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), background-color 0.15s ease;
}

.gform_wrapper .sn-choices--art .gchoice > input:checked + label::after {
	border-color: var(--glacier);
	background: var(--glacier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.3 4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 0.8rem;
	transform: scale(1.1);
}

.gform_wrapper .sn-choices--sizes .gfield_radio {
	grid-template-columns: repeat(auto-fill, minmax(7.6rem, 1fr));
}

.sn-choice__art {
	display: grid;
	place-items: center;
	min-height: 4.9rem;
}

.sn-choice__art svg {
	transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.gchoice > input:checked + label .sn-choice__art svg,
.gchoice > label:hover .sn-choice__art svg {
	transform: scale(1.07) rotate(-3deg);
}

/* Ad-size diagrams. */
.sn-ad__sheet { fill: var(--paper); stroke: #c7d1ce; stroke-width: 1.4; }
.sn-ad__mast { fill: var(--ink); }
.sn-ad__copy { stroke: #d9e0dd; stroke-width: 1.8; stroke-linecap: round; }
.sn-ad__photo { fill: #d9e0dd; }
.sn-ad__dot { fill: #d9e0dd; }
.sn-ad__fill { fill: var(--fireweed); opacity: 0.88; stroke: var(--paper); stroke-width: 1; }
.sn-ad__rule { fill: none; stroke: var(--paper); stroke-width: 1.2; }
.sn-ad__map { fill: var(--glacier-pale); }
.sn-ad__road { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; }
.sn-ad__num { fill: var(--paper); font-family: var(--ui); font-weight: 800; font-size: 6.5px; }

.gchoice > input:checked + label .sn-ad__fill {
	fill: var(--glacier);
	opacity: 1;
}

/* The order sheet's own look: ruled fields and ticket-stub choices. */
.sn-form--ad input[type="text"],
.sn-form--ad input[type="email"],
.sn-form--ad input[type="tel"],
.sn-form--ad textarea,
.sn-form--ad select {
	border: 0;
	border-bottom: 2px solid #9fb0ab;
	border-radius: 6px 6px 0 0;
	background-color: rgba(238, 242, 241, 0.75);
}

.sn-form--ad input:focus,
.sn-form--ad textarea:focus,
.sn-form--ad select:focus {
	border-bottom-color: var(--glacier);
	background-color: var(--paper);
	box-shadow: 0 2px 0 0 var(--glacier);
}

.sn-form--ad.gform_wrapper .sn-choices--art .gchoice > label,
.gform_wrapper.sn-form--ad_wrapper .sn-choices--art .gchoice > label {
	border-style: dashed;
	border-radius: 8px;
	background: var(--paper);
}

.sn-form--ad .sn-choices--art .gchoice > input:checked + label {
	border-style: solid;
}

/* Date fields: the theme's calendar (site.js) in place of Gravity Forms' datepicker. */
.sn-date {
	position: relative;
	max-width: 22rem;
}

.gform_wrapper .sn-date .sn-date__input {
	padding-right: 3.2rem;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.sn-date__btn {
	position: absolute;
	top: 0.3rem;
	right: 0.35rem;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--glacier);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sn-date__btn:hover,
.sn-date.is-open .sn-date__btn {
	background: var(--glacier-pale);
	color: var(--spruce);
}

.sn-date__btn:focus-visible {
	outline: 2px solid var(--glacier);
	outline-offset: 1px;
}

.sn-date__say {
	min-height: 1.3em;
	margin: 0.35rem 0 0;
	font-family: var(--ui);
	font-weight: 600;
	font-size: 1rem;
	color: var(--spruce);
}

.sn-date__say:empty {
	min-height: 0;
	margin: 0;
}

.sn-cal {
	position: absolute;
	top: calc(100% + 0.4rem);
	left: 0;
	z-index: 60;
	width: min(23.5rem, calc(100vw - 2 * var(--gutter)));
	padding: 0.9rem 0.9rem 0.75rem;
	border: 1px solid var(--line);
	border-top: 4px solid var(--rail);
	border-radius: 14px;
	background: var(--paper);
	box-shadow: 0 26px 50px -24px rgba(20, 40, 36, 0.55), 0 2px 6px rgba(20, 40, 36, 0.06);
	font-family: var(--ui);
	color: var(--ink);
	opacity: 0;
	transform: translateY(-6px) scale(0.97);
	transform-origin: 1.5rem 0;
	transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sn-cal.is-up {
	top: auto;
	bottom: calc(100% + 0.4rem);
	transform-origin: 1.5rem 100%;
}

.sn-cal.is-open {
	opacity: 1;
	transform: none;
}

.sn-cal__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px dashed var(--line);
}

.sn-cal__q {
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--fog);
	color: var(--ink);
	font: inherit;
	font-weight: 600;
	font-size: 0.92rem;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sn-cal__q:hover {
	border-color: var(--glacier);
	background: var(--glacier-pale);
}

.sn-cal__q.is-on {
	border-color: var(--rail);
	background: var(--rail);
	color: var(--paper);
}

.sn-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.4rem;
}

.sn-cal__month {
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.15rem;
}

.sn-cal__nav {
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--paper);
	color: var(--glacier);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sn-cal__nav:hover:not(:disabled) {
	border-color: var(--glacier);
	background: var(--glacier-pale);
}

.sn-cal__nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.sn-cal__dow,
.sn-cal__row {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.15rem;
}

.sn-cal__dow span {
	padding: 0.3rem 0;
	font-weight: 700;
	font-size: 0.85rem;
	text-align: center;
	color: var(--ink-faint);
}

.sn-cal__grid {
	display: grid;
	gap: 0.15rem;
}

.sn-cal__grid.is-from-right {
	animation: sn-cal-in-r 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sn-cal__grid.is-from-left {
	animation: sn-cal-in-l 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes sn-cal-in-r {
	from { opacity: 0; transform: translateX(14px); }
}

@keyframes sn-cal-in-l {
	from { opacity: 0; transform: translateX(-14px); }
}

.sn-cal__day {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	max-height: 2.6rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-weight: 600;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.sn-cal__day:hover:not(:disabled) {
	background: var(--glacier-pale);
}

.sn-cal__day:focus-visible {
	outline: 2px solid var(--glacier);
	outline-offset: 1px;
}

.sn-cal__day.is-today::after {
	content: "";
	position: absolute;
	bottom: 0.3rem;
	width: 0.3rem;
	height: 0.3rem;
	border-radius: 50%;
	background: var(--fireweed);
}

.sn-cal__day.is-on {
	background: var(--rail);
	color: var(--rail-gold);
}

.sn-cal__day.is-on::after {
	background: var(--rail-gold);
}

.sn-cal__day:disabled {
	color: var(--ink-faint);
	opacity: 0.4;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.sn-cal,
	.sn-cal__grid {
		transition: none;
		animation: none !important;
	}
}

/* File uploads. */
.gform_wrapper input[type="file"] {
	max-width: 100%;
	font: inherit;
	font-size: 0.98rem;
}

.gform_wrapper input[type="file"]::file-selector-button,
.gform_wrapper .gform_button_select_files {
	margin-right: 0.7rem;
	padding: 0.45rem 1rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}

.gform_wrapper .gform_drop_area {
	padding: 1.3rem;
	border: 2px dashed #b9c6c2;
	border-radius: 12px;
	background: rgba(238, 242, 241, 0.6);
	text-align: center;
}

.gform_wrapper .gform_drop_instructions {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--ink-soft);
}

.gform_wrapper .ginput_preview {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
	font-size: 0.95rem;
}

/* Submit, spinner and the thank-you. */
.gform_wrapper .gform_footer {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
}

.gform_wrapper .gform_button {
	padding: 0.75rem 1.7rem;
	border: 0;
	border-radius: 999px;
	background: var(--rail);
	color: var(--rail-gold);
	font-family: var(--ui);
	font-weight: 800;
	font-size: 1.2rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.gform_wrapper .gform_button:hover {
	background: var(--glacier);
	color: var(--paper);
	transform: translateY(-2px);
	box-shadow: 0 14px 22px -14px rgba(20, 40, 36, 0.6);
}

.sn-form--ad .gform_button {
	background: var(--rail-gold);
	color: var(--ink);
	border-radius: 6px;
}

.gform_wrapper .gform_ajax_spinner {
	width: 22px;
	height: 22px;
}

.sn-done {
	padding: 1.3rem 1.5rem;
	border-left: 5px solid var(--glacier);
	border-radius: 0 14px 14px 0;
	background: color-mix(in srgb, var(--glacier-pale) 60%, var(--paper));
	animation: sn-rise 0.4s ease both;
}

.sn-done__h {
	margin: 0 0 0.3rem;
	font-family: var(--ui);
	font-weight: 800;
	font-size: 1.5rem;
}

.sn-done p:last-child {
	margin: 0;
}

/* ================================================================== classifieds */

.sn-cls {
	padding-block: 1.8rem 0.5rem;
}

.sn-cls__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

.sn-cls__h {
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--t4);
	line-height: 1;
}

.sn-cls__sum {
	margin: 0.4rem 0 0;
	font-family: var(--ui);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--ink-soft);
}

.sn-cls__tools {
	position: sticky;
	top: 3.25rem;
	z-index: 5;
	margin: 1.1rem 0 0;
	padding: 0.9rem clamp(0.85rem, 2vw, 1.25rem) 0.7rem;
	border-radius: 16px;
	background: var(--fog);
	box-shadow: 0 12px 12px -12px rgba(20, 40, 36, 0.12);
}

.admin-bar .sn-cls__tools {
	top: calc(3.25rem + 32px);
}

.sn-cls__search {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	max-width: 36rem;
	padding: 0 1rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink-soft);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sn-cls__search:focus-within {
	border-color: var(--glacier);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--glacier) 18%, transparent);
}

.sn-cls__search input {
	flex: 1;
	min-width: 0;
	padding: 0.75rem 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: 1.08rem;
}

.sn-cls__search input:focus {
	outline: none;
}

.sn-cls__filters {
	display: flex;
	gap: 0.45rem;
	margin-top: 0.7rem;
	padding: 0.15rem 0.1rem 0.3rem;
	overflow-x: auto;
	scrollbar-width: thin;
}

.sn-cls__f {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: none;
	padding: 0.3rem 0.8rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1.02rem;
	cursor: pointer;
	transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}

.sn-cls__f:has(.sn-art) {
	padding-left: 0.3rem;
}

.sn-cls__f span {
	padding: 0 0.45rem;
	border-radius: 999px;
	background: var(--fog);
	font-size: 0.88rem;
}

.sn-cls__f:hover {
	border-color: var(--glacier);
}

.sn-cls__f[aria-pressed="true"] {
	border-color: var(--rail);
	background: var(--rail);
	color: var(--paper);
}

.sn-cls__f[aria-pressed="true"] span {
	background: rgba(255, 255, 255, 0.16);
	color: var(--rail-gold);
}

.sn-cls__f.is-none {
	opacity: 0.45;
}

.sn-cls__grid {
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: 1rem;
	align-items: start;
}

.sn-cls__card {
	position: relative;
	padding: 1.1rem 1.25rem 1rem;
	border: 1px solid var(--line);
	border-top: 4px solid var(--glacier);
	border-radius: 12px;
	background: var(--paper);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sn-cls__card[data-sec*="employment"] { border-top-color: var(--brass); }
.sn-cls__card[data-sec*="legal"],
.sn-cls__card[data-sec*="notice"] { border-top-color: var(--ink-soft); }
.sn-cls__card[data-sec*="animals"],
.sn-cls__card[data-sec*="personals"] { border-top-color: var(--fireweed); }

.sn-cls__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 26px -20px rgba(20, 40, 36, 0.55);
}

.sn-cls__card[hidden] {
	display: none;
}

/* Cards wait out of sight until site.js lets each rise in as it scrolls into view. */
.sn-cls.is-armed .sn-cls__card:not(.is-in) {
	opacity: 0;
}

.sn-cls__grid {
	position: relative;
}

/* A card on its way out while the filter changes (site.js), drawn where it was. */
.sn-cls__ghost {
	position: absolute;
	margin: 0;
	pointer-events: none;
	z-index: 1;
}

.sn-cls__sec {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.55rem;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--glacier);
}

.sn-cls__title {
	margin: 0 0 0.45rem;
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.2;
}

.sn-cls__ex {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ink-soft);
}

.sn-cls__acts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 0.6rem;
	padding: 0;
}

.sn-cls__acts .sn-pill {
	max-width: 100%;
	font-size: 0.92rem;
	overflow-wrap: anywhere;
}

.sn-cls__acts .sn-i {
	color: var(--glacier);
}

.sn-cls__more summary {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1rem;
	color: var(--glacier);
	cursor: pointer;
	list-style: none;
}

.sn-cls__more summary::-webkit-details-marker {
	display: none;
}

.sn-cls__more summary::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
}

.sn-cls__more[open] summary::after {
	transform: rotate(-135deg) translateY(-2px);
}

.sn-cls__body {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px dashed var(--line);
	font-size: 1rem;
	overflow-wrap: anywhere;
}

.sn-cls__body p {
	margin: 0 0 0.5rem;
}

.sn-cls__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 2.5rem 1rem;
	text-align: center;
}

.sn-cls__empty[hidden] {
	display: none;
}

.sn-cls__empty p {
	margin: 0;
}

.sn-cls__open {
	margin: 1.3rem 0 0;
	font-size: 0.98rem;
	color: var(--ink-soft);
}

.sn-cls__open a {
	font-weight: 600;
	color: var(--glacier);
}

.sn-cls__photos {
	display: flex;
	gap: 0.4rem;
	margin: 0 0 0.7rem;
}

.sn-cls__photos img {
	width: 5.5rem;
	height: 4.1rem;
	object-fit: cover;
	border-radius: 6px;
	background: var(--fog);
}

.sn-cls__edit {
	position: absolute;
	top: 0.8rem;
	right: 1rem;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--ink-faint);
}

.sn-cls__edit:hover {
	color: var(--glacier);
}

.sn-cls__classic {
	margin-top: 3.5rem;
	margin-bottom: 3rem;
}

.sn-cls__classic-h {
	margin: 0 0 0.4rem;
	padding-top: 1rem;
	border-top: 2px solid var(--ink);
	font-family: var(--ui);
	font-weight: 800;
	font-size: 1.6rem;
}

.sn-cls__sect {
	border-bottom: 1px solid var(--line);
}

.sn-cls__sect summary {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.75rem 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.25rem;
	cursor: pointer;
	list-style: none;
}

.sn-cls__sect summary::-webkit-details-marker {
	display: none;
}

.sn-cls__sect summary::after {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	margin: 0 0.3rem 0 auto;
	border-right: 2px solid var(--ink-soft);
	border-bottom: 2px solid var(--ink-soft);
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.2s ease;
}

.sn-cls__sect[open] summary::after {
	transform: translateY(15%) rotate(-135deg);
}

.sn-cls__n {
	padding: 0 0.5rem;
	border-radius: 999px;
	background: var(--fog);
	font-family: var(--ui);
	font-size: 0.95rem;
	color: var(--ink-soft);
}

.sn-cls__entry {
	padding: 0.2rem 0 1.2rem 2.6rem;
	font-size: 1.08rem;
}

.sn-cls__entry + .sn-cls__entry {
	padding-top: 1.2rem;
	border-top: 1px dashed var(--line);
}

.sn-cls__entry h3 {
	margin: 0 0 0.4rem;
	font-family: var(--display);
	font-size: 1.15rem;
}

.sn-cls__entry p {
	margin: 0 0 0.7em;
}

@media (max-width: 600px) {
	.sn-cls__entry {
		padding-left: 0;
	}
}

/* ------------------------------------------------------------------ photo credits (inc/photos.php) */

.sn-credit {
	display: inline-block;
	margin-left: 0.35em;
	font-weight: 600;
	font-size: 0.86em;
	letter-spacing: 0.02em;
	color: var(--ink-faint);
}

/* A picture the viewer (assets/js/zoom.js, assets/css/zoom.css) can open. */
.snz-pic {
	cursor: zoom-in;
}

.snz-pic:focus-visible {
	outline: 3px solid var(--glacier);
	outline-offset: 3px;
}

.sn-cls__f:active {
	transform: scale(0.96);
}