/* ==========================================================================
   WPRC — precision optics direction

   Palette is blued gun steel rather than black, with cartridge brass as the
   single decorative accent. Open and closed are separate semantic colours
   because the range status bar genuinely needs two states, not because a
   third colour looked nice.
   ========================================================================== */

:root {
	/* Surface */
	--ink:        #10151a;
	--ink-2:      #161d24;
	--ink-3:      #1d262f;
	--haze:       #2c3843;
	--haze-soft:  #223039;

	/* Type */
	--bone:       #e9e5dd;
	--mute:       #8b98a4;
	--mute-dim:   #6a7783;

	/* Accent */
	--brass:      #c08a2e;
	--brass-lift: #dda444;
	--brass-dim:  #7d5a1e;

	/* Club */
	--leaf:       #d02b22;

	/* State */
	--open:       #4e8c5a;
	--open-dim:   #21372a;
	--closed:     #b23a2e;
	--closed-dim: #3a1d1a;

	/* Text versions of the state colours. The solid tones above are fine for
	   a dot, a border or a fill, but as small uppercase text on a dark ground
	   the red measured 2.6:1 — well under the 4.5:1 small text needs. These
	   clear it comfortably on every background the theme puts them on. */
	--closed-text: #e87468;
	--open-text:   #9ed3a9;

	/* Type stacks */
	--display: "Saira Condensed", "Arial Narrow", sans-serif;
	--body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
	--mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

	/* Rhythm */
	--wrap:    1180px;
	--gutter:  clamp(1.15rem, 4vw, 2.5rem);
	--band:    clamp(3.5rem, 7vw, 6rem);
	--radius:  2px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--ink);
	color: var(--bone);
	font-family: var(--body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--brass-lift); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bone); }

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

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: 0.005em;
	margin: 0;
	text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }

dl, dd, dt { margin: 0; }

.wrap {
	width: min(100% - (var(--gutter) * 2), var(--wrap));
	margin-inline: auto;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: .75rem 1.25rem;
	background: var(--brass);
	color: var(--ink);
	font-weight: 600;
}
.skip-link:focus { left: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Shared type utilities
   -------------------------------------------------------------------------- */

.section__heading {
	font-size: clamp(1.75rem, 4vw, 2.65rem);
	text-transform: uppercase;
	letter-spacing: 0.012em;
	margin-bottom: .65rem;
}

.section__heading--sm { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }

.section__intro {
	max-width: 58ch;
	color: var(--mute);
	margin-bottom: 2.25rem;
}

/* Eyebrow / data labels share one treatment throughout. */
.rule__label,
.status__label,
.card__date,
.match__when,
.results__type,
.scale__firearms,
.spec dt,
.footer__title,
.steps__num {
	font-family: var(--mono);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Duplex reticle rule — the recurring divider.
   Heavy at the ends, hairline through the middle, crosshair at centre.
   -------------------------------------------------------------------------- */

.rule {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0 0 2rem;
}

.rule__heavy {
	height: 2px;
	width: 12%;
	background: var(--haze);
	flex: 0 0 auto;
}

.rule__fine {
	height: 1px;
	background: var(--haze-soft);
	flex: 1 1 auto;
}

.rule__cross {
	position: relative;
	width: 11px;
	height: 11px;
	flex: 0 0 auto;
	margin-inline: .5rem;
}
.rule__cross::before,
.rule__cross::after {
	content: "";
	position: absolute;
	background: var(--brass);
}
.rule__cross::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.rule__cross::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }

.rule__label {
	flex: 0 0 auto;
	color: var(--brass);
	padding-inline: .9rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .8rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.btn--brass {
	background: var(--brass);
	border-color: var(--brass);
	color: var(--ink);
}
.btn--brass:hover,
.btn--brass:focus-visible {
	background: var(--brass-lift);
	border-color: var(--brass-lift);
	color: var(--ink);
}

.btn--ghost {
	background: transparent;
	border-color: var(--haze);
	color: var(--bone);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
	border-color: var(--brass);
	color: var(--brass-lift);
}

.btn--sm { padding: .5rem 1rem; font-size: .85rem; }

/* --------------------------------------------------------------------------
   Range status bar
   -------------------------------------------------------------------------- */

.status {
	border-bottom: 1px solid var(--haze-soft);
	background: var(--ink-2);
	font-size: .875rem;
}

.status--open   { background: linear-gradient(90deg, var(--open-dim), var(--ink-2) 62%); }
.status--closed { background: linear-gradient(90deg, var(--closed-dim), var(--ink-2) 62%); }

.status__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding: .6rem 0;
}

.status__state {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	flex: 0 0 auto;
}

.status__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: 0 0 auto;
	position: relative;
}
.status--open   .status__dot { background: var(--open); }
.status--closed .status__dot { background: var(--closed); }

/* A slow pulse on the closed state only — it is the one that needs looking at. */
.status--closed .status__dot::after {
	content: "";
	position: absolute;
	inset: -5px;
	border: 1px solid var(--closed);
	border-radius: 50%;
	animation: wprc-pulse 2.6s ease-out infinite;
}

@keyframes wprc-pulse {
	0%   { opacity: .85; transform: scale(.6); }
	100% { opacity: 0;   transform: scale(1.35); }
}

.status--open   .status__label { color: var(--open-text); }
.status--closed .status__label { color: var(--closed-text); }

.status__detail {
	margin: 0;
	color: var(--mute);
	flex: 1 1 16rem;
	min-width: 0;
}

.status__more {
	margin-left: auto;
	flex: 0 0 auto;
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mute);
	text-decoration: none;
	border-bottom: 1px solid var(--haze);
	padding-bottom: 1px;
}
.status__more:hover { color: var(--brass-lift); border-color: var(--brass); }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(16, 21, 26, .93);
	backdrop-filter: blur(9px);
	border-bottom: 1px solid var(--haze-soft);
}

.masthead__inner {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: .8rem 0;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	text-decoration: none;
	color: var(--bone);
	flex: 0 0 auto;
}

.brand__mark {
	width: auto;
	height: 46px;
	flex: 0 0 auto;
	color: var(--leaf);
	/* Guard against WooCommerce's .woocommerce-page img { height: auto },
	   which otherwise collapses the masthead mark on shop pages. */
	max-width: 80px;
	object-fit: contain;
}

.brand:hover .brand__mark { color: var(--brass-lift); }

.brand__text { display: flex; flex-direction: column; line-height: 1.1; }

.brand__abbr {
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .06em;
}

.brand__full {
	font-family: var(--mono);
	font-size: .58rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--mute);
}

.nav { margin-left: auto; }

.nav__list {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	list-style: none;
}

.nav__list a {
	font-family: var(--display);
	font-size: 1.02rem;
	font-weight: 500;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--bone);
	text-decoration: none;
	padding: .35rem 0;
	border-bottom: 1px solid transparent;
	display: block;
}
.nav__list a:hover,
.nav__list .current-menu-item > a {
	color: var(--brass-lift);
	border-bottom-color: var(--brass);
}

/* Sub-menus stay simple: one level, revealed on hover and focus. */
.nav__list li { position: relative; }

.nav__list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ink-2);
	border: 1px solid var(--haze-soft);
	border-top: 2px solid var(--brass);
	padding: .4rem 0;
	min-width: 13rem;
	list-style: none;
	z-index: 50;
}

/* The masthead has a bottom border and the panel sits under it; the gap
   would otherwise break the hover as the pointer crosses it. */
.nav__list .sub-menu::before {
	content: "";
	position: absolute;
	top: -0.6rem;
	left: 0;
	right: 0;
	height: 0.6rem;
}

.nav__list li:hover > .sub-menu,
.nav__list li:focus-within > .sub-menu { display: block; }

.nav__list .sub-menu li { border: 0; }

.nav__list .sub-menu a {
	padding: .5rem 1.1rem;
	border: 0;
	font-size: .95rem;
	white-space: nowrap;
	text-align: left;
}
.nav__list .sub-menu a:hover,
.nav__list .sub-menu a:focus-visible {
	background: var(--ink-3);
	color: var(--brass-lift);
}

/* A parent item gets a small marker so it is obvious there is more under it. */
.nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .34em;
	height: .34em;
	margin-left: .5em;
	vertical-align: .18em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	opacity: .7;
}

.masthead__join { flex: 0 0 auto; }

.nav-toggle {
	display: none;
	align-items: center;
	gap: .55rem;
	margin-left: auto;
	background: transparent;
	border: 1px solid var(--haze);
	border-radius: var(--radius);
	color: var(--bone);
	padding: .5rem .85rem;
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
}

.nav-toggle__bars {
	position: relative;
	width: 16px;
	height: 2px;
	background: currentColor;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 16px;
	height: 2px;
	background: currentColor;
}
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after  { top: 5px; }

/* --------------------------------------------------------------------------
   Site notice
   -------------------------------------------------------------------------- */

.notice { border-bottom: 1px solid var(--haze-soft); }
.notice--warn { background: var(--closed-dim); }
.notice--info { background: var(--ink-2); }

.notice__inner {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding: .9rem 0;
}

.notice__mark {
	flex: 0 0 auto;
	width: 3px;
	align-self: stretch;
	background: var(--closed);
}
.notice--info .notice__mark { background: var(--brass); }

.notice__text { margin: 0; font-size: .92rem; color: var(--bone); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(24rem, 62vh, 40rem);
	padding: clamp(3rem, 9vw, 7rem) 0 clamp(2.5rem, 6vw, 4.5rem);
	overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }

.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.72) contrast(1.06) brightness(.62);
}

/* The video sits on top of the still and fades in once it is actually
   playing, so there is never a black gap or a visible swap. */
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.72) contrast(1.06) brightness(.62);
	opacity: 0;
	transition: opacity .6s ease;
	pointer-events: none;
}

.hero__video.is-playing { opacity: 1; }

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, var(--ink) 4%, rgba(16, 21, 26, .35) 55%, rgba(16, 21, 26, .7)),
		linear-gradient(to right, rgba(16, 21, 26, .82), transparent 65%);
}

/* Mil-dot grid laid over the photograph — the optics reference, kept faint. */
.hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(233, 229, 221, .07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(233, 229, 221, .07) 1px, transparent 1px);
	background-size: 84px 84px;
	mask-image: radial-gradient(ellipse 65% 70% at 50% 45%, #000 35%, transparent 78%);
}

.hero__inner { position: relative; z-index: 2; }

.hero__kicker {
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--brass);
	margin-bottom: 1.1rem;
}

.hero__title {
	font-size: clamp(3rem, 11vw, 7.5rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	line-height: .88;
	margin-bottom: 1.4rem;
}

.hero__title-line { display: block; }
.hero__title-line--brass { color: var(--brass); }

.hero__lede {
	max-width: 46ch;
	font-size: clamp(1.02rem, 2vw, 1.2rem);
	color: var(--bone);
	margin-bottom: 1.9rem;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	margin: 0;
}

/* Hero without a photograph still needs presence. */
.hero:not(.hero--photo) {
	background:
		radial-gradient(ellipse 70% 90% at 15% 20%, var(--ink-3), transparent 70%),
		var(--ink);
	border-bottom: 1px solid var(--haze-soft);
}

/* --------------------------------------------------------------------------
   Section bands — one place, so paddings cannot cancel each other out
   -------------------------------------------------------------------------- */

.scale,
.board,
.start,
.news { padding: var(--band) 0; }

.scale  { border-top: 1px solid var(--haze-soft); }
.start  { background: var(--ink-2); }

/* --------------------------------------------------------------------------
   Distance scale — signature element
   -------------------------------------------------------------------------- */

.scale__heading {
	font-size: clamp(1.75rem, 4vw, 2.65rem);
	text-transform: uppercase;
	margin-bottom: .6rem;
}

.scale__intro { color: var(--mute); max-width: 52ch; margin-bottom: 3.5rem; }

.scale__track {
	position: relative;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/* Stations are absolutely placed by percentage and centred on their own tick,
   so the track is inset by half a station width at each end. Without the
   inset, the 300m station would hang off the right edge of the page. */
.scale__stations {
	position: relative;
	list-style: none;
	height: 12rem;
	margin-inline: 4.5rem;
}

.scale__line {
	position: absolute;
	left: 4.5rem;
	right: 4.5rem;
	top: 1rem;
	height: 1px;
	background: linear-gradient(to right, var(--brass-dim), var(--haze) 78%, transparent);
}

.scale__station {
	position: absolute;
	top: 0;
	left: var(--pos);
	transform: translateX(-50%);
	/* --w is the room this station has between its neighbours, set per
	   station in the template. The clamp stops a crowded label collapsing
	   to an unreadable sliver, or a lonely one sprawling. */
	width: clamp(4.5rem, var(--w, 8.5rem), 8.5rem);
	text-align: center;
}

.scale__link {
	display: block;
	text-decoration: none;
	color: var(--bone);
	padding-top: 1.6rem;
}

.scale__tick {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 1.1rem;
	background: var(--haze);
	transition: background-color .16s ease, height .16s ease;
}

.scale__link:hover .scale__tick,
.scale__link:focus-visible .scale__tick { background: var(--brass); height: 1.5rem; }

.scale__distance {
	display: block;
	font-family: var(--display);
	font-size: clamp(1.45rem, 3.2vw, 2.3rem);
	white-space: nowrap;
	font-weight: 700;
	line-height: 1;
	color: var(--bone);
	transition: color .16s ease;
}
.scale__distance abbr {
	font-size: .48em;
	text-decoration: none;
	color: var(--mute);
	margin-left: .1em;
}

.scale__link:hover .scale__distance,
.scale__link:focus-visible .scale__distance { color: var(--brass-lift); }

.scale__name {
	display: block;
	font-family: var(--body);
	font-size: .88rem;
	hyphens: auto;
	font-weight: 500;
	margin-top: .3rem;
	text-wrap: balance;
}

.scale__firearms {
	display: block;
	color: var(--mute-dim);
	margin-top: .3rem;
	font-size: .6rem;
}

/* Facilities with no fixed distance — skeet, the clubhouse. Same visual
   language as the scale stations, but set as a row rather than positioned
   on the line, because they have no honest position on it. */
.offscale {
	margin-top: 2.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--haze-soft);
}

.offscale__title {
	font-family: var(--mono);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mute-dim);
	margin-bottom: 1.25rem;
}

.offscale__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 2.5rem;
}

.offscale__link {
	display: flex;
	align-items: baseline;
	gap: .7rem;
	text-decoration: none;
	color: var(--bone);
	padding: .35rem 0;
}

.offscale__mark {
	position: relative;
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	align-self: center;
}
.offscale__mark::before,
.offscale__mark::after {
	content: "";
	position: absolute;
	background: var(--haze);
	transition: background-color .16s ease;
}
.offscale__mark::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.offscale__mark::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }

.offscale__link:hover .offscale__mark::before,
.offscale__link:hover .offscale__mark::after,
.offscale__link:focus-visible .offscale__mark::before,
.offscale__link:focus-visible .offscale__mark::after { background: var(--brass); }

.offscale__name {
	font-family: var(--display);
	font-size: 1.35rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .01em;
	transition: color .16s ease;
}
.offscale__link:hover .offscale__name,
.offscale__link:focus-visible .offscale__name { color: var(--brass-lift); }

.offscale__detail {
	font-family: var(--mono);
	font-size: .6rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mute-dim);
}

.scale__note {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 1rem 1.5rem;
	margin: 2.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--haze-soft);
}

.scale__disclaimer {
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mute-dim);
	margin-left: auto;
}

/* --------------------------------------------------------------------------
   Board — calendar and matches side by side
   -------------------------------------------------------------------------- */

.board__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.board__note,
.board__empty {
	color: var(--mute);
	font-size: .9rem;
	margin-top: 1.5rem;
}

.board__all {
	display: inline-block;
	margin-top: 1.25rem;
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Calendar rows, set like a range card. */
.events { list-style: none; margin-top: 1.75rem; }

.event {
	display: grid;
	grid-template-columns: 11.5rem minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: baseline;
	padding: .95rem 0;
	border-top: 1px solid var(--haze-soft);
}
.event:last-child { border-bottom: 1px solid var(--haze-soft); }

.event__date {
	font-family: var(--mono);
	font-size: .78rem;
	color: var(--mute);
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}

.event__name { font-size: .98rem; }

.event__flag {
	font-family: var(--mono);
	font-size: .6rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--closed-text);
	border: 1px solid var(--closed);
	background: var(--closed-dim);
	padding: .2rem .5rem;
	white-space: nowrap;
}

.event--closed .event__name { color: var(--bone); }

.events--compact .event { grid-template-columns: 1fr; gap: .25rem; }
.events--compact .event__flag { justify-self: start; }

/* --------------------------------------------------------------------------
   Match cards
   -------------------------------------------------------------------------- */

.matches {
	display: grid;
	gap: 1.25rem;
	margin-top: 1.75rem;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.matches--stack { grid-template-columns: 1fr; }
.matches--past { opacity: .62; }

.match {
	background: var(--ink-2);
	border: 1px solid var(--haze-soft);
	border-left: 2px solid var(--brass-dim);
	border-radius: var(--radius);
	padding: 1.35rem;
}

.match__when { color: var(--brass); margin-bottom: .5rem; }

.match__title {
	font-size: 1.3rem;
	text-transform: uppercase;
	margin-bottom: .6rem;
}
.match__title a { color: var(--bone); text-decoration: none; }
.match__title a:hover { color: var(--brass-lift); }

.match__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }

.tag {
	display: inline-block;
	font-family: var(--mono);
	font-size: .6rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mute);
	border: 1px solid var(--haze);
	padding: .18rem .45rem;
	text-decoration: none;
}
a.tag:hover { color: var(--brass-lift); border-color: var(--brass-dim); }

.match__meta { display: grid; gap: .35rem; margin-bottom: .9rem; }
.match__meta div { display: flex; gap: .6rem; align-items: baseline; }
.match__meta dt { color: var(--mute-dim); flex: 0 0 4.5rem; }
.match__meta dd { font-size: .9rem; }

.match__closes {
	font-family: var(--mono);
	font-size: .64rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--closed-text);
	margin-bottom: .9rem;
}

/* --------------------------------------------------------------------------
   Getting started steps
   -------------------------------------------------------------------------- */

.steps {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	list-style: none;
	margin-bottom: 2.5rem;
}

.steps__item { border-top: 2px solid var(--brass-dim); padding-top: 1.1rem; }

.steps__num { display: block; color: var(--brass); margin-bottom: .7rem; }

.steps__title {
	font-size: 1.35rem;
	text-transform: uppercase;
	margin-bottom: .55rem;
}

.steps__body { color: var(--mute); font-size: .95rem; }

.start__actions { margin: 0; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.cards {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
	margin-top: 1.75rem;
}

.card__media {
	display: block;
	margin-bottom: 1rem;
	border: 1px solid var(--haze-soft);
	overflow: hidden;
}
.card__media img {
	width: 100%;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	transition: transform .3s ease;
}
.card__media:hover img { transform: scale(1.03); }

.card__date { color: var(--mute-dim); margin-bottom: .4rem; }

.card__title { font-size: 1.35rem; text-transform: uppercase; margin-bottom: .55rem; }
.card__title a { color: var(--bone); text-decoration: none; }
.card__title a:hover { color: var(--brass-lift); }

.card__excerpt { color: var(--mute); font-size: .93rem; }

/* --------------------------------------------------------------------------
   Ranges archive
   -------------------------------------------------------------------------- */

.ranges {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	margin-top: 2rem;
}

.range {
	background: var(--ink-2);
	border: 1px solid var(--haze-soft);
	border-radius: var(--radius);
	padding: 1.5rem;
}

.range__head {
	display: flex;
	align-items: baseline;
	gap: .9rem;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--haze-soft);
}

.range__distance { margin: 0; display: flex; align-items: baseline; }

.range__num {
	font-family: var(--display);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	color: var(--brass);
	font-variant-numeric: tabular-nums;
}

.range__distance--none .range__num { color: var(--haze); }

.range__unit {
	font-family: var(--mono);
	font-size: .72rem;
	color: var(--mute);
	text-decoration: none;
	margin-left: .15rem;
}

.range__title { font-size: 1.3rem; text-transform: uppercase; }
.range__title a { color: var(--bone); text-decoration: none; }
.range__title a:hover { color: var(--brass-lift); }

.range__media { display: block; margin-bottom: 1rem; border: 1px solid var(--haze-soft); }
.range__media img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }

.range__body { color: var(--mute); font-size: .93rem; margin-bottom: 1rem; }
.range__body p { margin-bottom: .6rem; }

/* Specification lists — the data-card treatment. */
.spec { display: grid; gap: .4rem; }

.spec__row {
	display: flex;
	gap: .75rem;
	align-items: baseline;
	padding: .4rem 0;
	border-top: 1px solid var(--haze-soft);
}

.spec dt { color: var(--mute-dim); flex: 0 0 5.5rem; }
.spec dd { font-size: .9rem; font-family: var(--mono); }

.spec--block .spec__row { flex-direction: column; gap: .15rem; }
.spec--block dt { flex: none; }

/* --------------------------------------------------------------------------
   Page heads, detail layout, prose
   -------------------------------------------------------------------------- */

.page-head { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }

.page-head__title {
	font-size: clamp(2.1rem, 6vw, 4rem);
	text-transform: uppercase;
	margin-bottom: .5rem;
}

.page-head__term { color: var(--brass); }

.page-head__desc { color: var(--mute); max-width: 60ch; margin-top: .75rem; }

.page-head__meta { color: var(--mute); font-size: .9rem; margin: 0; }
.page-head__meta--mono {
	font-family: var(--mono);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--brass);
	margin-bottom: .75rem;
}

.page-head__stat { margin: 0 0 .5rem; display: flex; align-items: baseline; }
.page-head__num {
	font-family: var(--display);
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--brass);
}
.page-head__stat abbr {
	font-family: var(--mono);
	font-size: .9rem;
	color: var(--mute);
	text-decoration: none;
	margin-left: .2rem;
}

.page-head__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; }

.feature {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	border: 1px solid var(--haze-soft);
}
.feature img { width: 100%; }

.detail {
	display: grid;
	grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
	padding-bottom: var(--band);
}

.detail__side {
	background: var(--ink-2);
	border: 1px solid var(--haze-soft);
	border-top: 2px solid var(--brass-dim);
	padding: 1.5rem;
	position: sticky;
	top: 6rem;
}

.detail__title {
	font-size: 1.15rem;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.detail__note {
	margin-top: 1.25rem;
	color: var(--mute-dim);
	font-size: .82rem;
}

.detail__back {
	display: inline-block;
	margin-top: 1.25rem;
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.detail__side .btn { width: 100%; margin-top: 1rem; }

.callout {
	border-left: 3px solid var(--closed);
	background: var(--closed-dim);
	padding: .9rem 1.15rem;
	margin: 0 0 2rem;
	font-size: .95rem;
}

.prose { max-width: 68ch; padding-bottom: var(--band); }
.detail .prose { padding-bottom: 0; }

.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); text-transform: uppercase; margin: 2.25rem 0 .75rem; }
.prose h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); text-transform: uppercase; margin: 1.75rem 0 .6rem; }
.prose ul,
.prose ol { padding-left: 1.35rem; margin-bottom: 1.15em; }
.prose li { margin-bottom: .4em; }
.prose blockquote {
	margin: 1.75rem 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--brass-dim);
	color: var(--mute);
	font-style: italic;
}
.prose img { margin: 1.75rem 0; border: 1px solid var(--haze-soft); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .92rem; }
.prose th,
.prose td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--haze-soft); }
.prose th { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }

/* --------------------------------------------------------------------------
   Search results, pagination, post nav
   -------------------------------------------------------------------------- */

.results { list-style: none; margin-bottom: 2rem; }

.results__item { padding: 1.35rem 0; border-top: 1px solid var(--haze-soft); }
.results__item:last-child { border-bottom: 1px solid var(--haze-soft); }

.results__type { color: var(--brass); margin-bottom: .3rem; }
.results__title { font-size: 1.4rem; text-transform: uppercase; margin-bottom: .4rem; }
.results__title a { color: var(--bone); text-decoration: none; }
.results__title a:hover { color: var(--brass-lift); }
.results__excerpt { color: var(--mute); font-size: .93rem; }

.searchform { margin: 1.5rem 0; max-width: 30rem; }
.searchform__label {
	display: block;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: .5rem;
}
.searchform__row { display: flex; gap: .5rem; }
.searchform__input {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--ink-2);
	border: 1px solid var(--haze);
	border-radius: var(--radius);
	color: var(--bone);
	padding: .6rem .8rem;
	font-family: var(--body);
	font-size: .95rem;
}
.searchform__input:focus-visible { border-color: var(--brass); }

.pagination {
	display: flex;
	justify-content: center;
	padding-bottom: var(--band);
}
.pagination .nav-links { display: flex; gap: .4rem; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: .45rem .7rem;
	border: 1px solid var(--haze-soft);
	font-family: var(--mono);
	font-size: .8rem;
	text-decoration: none;
	color: var(--mute);
}
.pagination .page-numbers:hover { color: var(--brass-lift); border-color: var(--brass-dim); }
.pagination .current { background: var(--brass); border-color: var(--brass); color: var(--ink); }

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding: 2rem 0 var(--band);
	border-top: 1px solid var(--haze-soft);
	margin-top: 2.5rem;
}

.post-nav__link { text-decoration: none; max-width: 22rem; }
.post-nav__link--next { text-align: right; margin-left: auto; }

.post-nav__dir {
	display: block;
	font-family: var(--mono);
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mute-dim);
	margin-bottom: .3rem;
}

.post-nav__title {
	font-family: var(--display);
	font-size: 1.15rem;
	text-transform: uppercase;
	color: var(--bone);
}
.post-nav__link:hover .post-nav__title { color: var(--brass-lift); }

.empty { padding: 2rem 0 var(--band); }
.empty__title { font-size: 1.75rem; text-transform: uppercase; margin-bottom: .75rem; }

.page-links { margin: 1.5rem 0; font-family: var(--mono); font-size: .85rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
	background: var(--ink-2);
	border-top: 1px solid var(--haze-soft);
	padding: var(--band) 0 2.5rem;
}

.footer__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin-bottom: 3rem;
}

.footer__logo {
	width: 100%;
	max-width: 290px;
	height: auto;
	margin-bottom: 1.75rem;
}

.footer__title { color: var(--brass); margin-bottom: 1rem; }

.footer__body { color: var(--mute); font-size: .9rem; max-width: 40ch; }
.footer__body--mono { font-family: var(--mono); font-size: .8rem; }
.footer__body--small { font-size: .82rem; margin-top: 1rem; }

.footer__links { list-style: none; display: grid; gap: .5rem; }
.footer__links a { color: var(--bone); text-decoration: none; font-size: .9rem; }
.footer__links a:hover { color: var(--brass-lift); }
.footer__links li { color: var(--mute); font-size: .9rem; }

.footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--haze-soft);
	margin: 0;
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mute-dim);
}

.footer__safety { margin-left: auto; color: var(--mute); }

.widget { margin-bottom: 1.5rem; }
.widget__title {
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--brass);
	margin-bottom: 1rem;
}
.widget ul { list-style: none; display: grid; gap: .5rem; }
.widget a { color: var(--bone); text-decoration: none; font-size: .9rem; }
.widget a:hover { color: var(--brass-lift); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 62rem) {
	.board__grid,
	.detail { grid-template-columns: 1fr; }

	.detail__side { position: static; }

	/* The scale stops being a scale and becomes a vertical list of stations. */
	.scale__track { padding-top: 0; }
	.scale__line { display: none; }

	.scale__stations {
		height: auto;
		display: grid;
		gap: 0;
		margin-inline: 0;
		border-left: 1px solid var(--haze);
		padding-left: 1.5rem;
	}

	.scale__station {
		position: relative;
		transform: none;
		left: auto;
		top: auto;
		width: auto;
		text-align: left;
		border-bottom: 1px solid var(--haze-soft);
	}

	.scale__link { display: grid; grid-template-columns: 5rem 1fr; gap: 0 1rem; align-items: baseline; padding: 1rem 0; }


	.scale__tick {
		position: absolute;
		left: -1.5rem;
		top: 1.9rem;
		width: 1rem;
		height: 1px;
		transform: none;
	}

	.scale__distance { grid-row: span 2; font-size: 1.9rem; }
	.scale__name { margin-top: 0; }
	.scale__firearms { grid-column: 2; }

	/* Match the vertical station list above it. */
	.offscale__list { flex-direction: column; gap: 0; }
	.offscale__item { border-bottom: 1px solid var(--haze-soft); }
	.offscale__item:last-child { border-bottom: 0; }
	.offscale__link { padding: .9rem 0; }
	.offscale__name { font-size: 1.2rem; }
}

@media (max-width: 48rem) {
	.nav-toggle { display: inline-flex; }

	.nav {
		display: none;
		flex: 1 0 100%;
		margin-left: 0;
		order: 3;
		padding-top: .75rem;
		border-top: 1px solid var(--haze-soft);
		margin-top: .75rem;
	}
	.nav.is-open { display: block; }

	.masthead__inner { flex-wrap: wrap; }

	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__list > li { border-bottom: 1px solid var(--haze-soft); }
	.nav__list a { padding: .8rem 0; font-size: 1.1rem; }

	.nav__list .sub-menu {
		display: block;
		position: static;
		transform: none;
		border: 0;
		border-left: 1px solid var(--haze-soft);
		background: transparent;
		padding: 0 0 .6rem;
		margin-left: .9rem;
		min-width: 0;
	}
	.nav__list .sub-menu::before { display: none; }
	.nav__list .sub-menu a { padding: .55rem 0 .55rem 1rem; font-size: 1rem; }

	/* No hover on touch, so the marker would imply an interaction that is
	   not there — the children are already listed underneath. */
	.nav__list .menu-item-has-children > a::after { display: none; }

	.masthead__join { display: none; }

	.event { grid-template-columns: 1fr; gap: .25rem; }
	.event__flag { justify-self: start; margin-top: .35rem; }

	.status__inner { gap: .35rem .9rem; }
	.status__more { margin-left: 0; }

	.footer__legal { flex-direction: column; gap: .5rem; }
	.footer__safety { margin-left: 0; }

	.post-nav__link--next { text-align: left; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	/* The video is never loaded for these visitors, but hide the element
	   too in case a browser autoplays it before the script runs. */
	.hero__video { display: none; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* Respect a light-mode preference only for print. Screens stay dark: the
   palette is the identity, not a theme option. */
@media print {
	body { background: #fff; color: #000; }
	.status, .masthead, .footer, .hero__media, .nav-toggle { display: none !important; }
	.prose { max-width: none; }
}

/* --------------------------------------------------------------------------
   Member orientation
   -------------------------------------------------------------------------- */

.orientation { max-width: 52rem; padding-bottom: var(--band); }

.orientation__note {
	border-left: 3px solid var(--brass);
	background: var(--ink-2);
	padding: 1.35rem 1.5rem;
	margin-bottom: 2.5rem;
}

.orientation__note-title {
	font-size: 1.3rem;
	text-transform: uppercase;
	margin-bottom: .6rem;
	color: var(--brass-lift);
}

.orientation__note p { color: var(--bone); font-size: .95rem; }

.osec {
	border-top: 1px solid var(--haze-soft);
	padding: 2.25rem 0;
}

.osec__title {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	text-transform: uppercase;
	margin-bottom: .5rem;
}

.osec__num {
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .14em;
	color: var(--brass);
}

.osec__intro { color: var(--mute); font-size: .93rem; margin-bottom: 1.25rem; }

.osec__points { list-style: none; display: grid; gap: .7rem; margin-bottom: 1.5rem; }

.osec__points li {
	position: relative;
	padding-left: 1.5rem;
	font-size: .95rem;
	line-height: 1.6;
}
.osec__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .55rem;
	height: 1px;
	background: var(--brass-dim);
}

/* Acknowledgement is deliberately prominent — it is the thing being recorded. */
.osec__ack {
	display: flex;
	align-items: flex-start;
	gap: .8rem;
	background: var(--ink-2);
	border: 1px solid var(--haze-soft);
	border-left: 2px solid var(--brass-dim);
	padding: 1rem 1.15rem;
	cursor: pointer;
	font-size: .93rem;
	transition: border-color .16s ease;
}
.osec__ack:hover { border-left-color: var(--brass); }
.osec__ack input { margin-top: .25rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; accent-color: var(--brass); }
.osec__ack:has(input:checked) { border-left-color: var(--open); }
.osec__ack--final { margin-top: 1.5rem; }

/* Knowledge check */
.oq {
	border: 1px solid var(--haze-soft);
	border-radius: var(--radius);
	padding: 1.25rem;
	margin: 0 0 1rem;
}

.oq__q { font-size: .98rem; font-weight: 600; padding: 0; margin-bottom: .9rem; }
.oq__num { color: var(--brass); font-family: var(--mono); font-size: .8rem; margin-right: .35rem; }

.oq__opt {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: .5rem 0;
	cursor: pointer;
	font-size: .93rem;
}
.oq__opt input { margin-top: .2rem; accent-color: var(--brass); }

.oq__why {
	margin: .9rem 0 0;
	padding: .75rem .9rem;
	background: var(--ink-2);
	border-left: 2px solid var(--haze);
	font-size: .88rem;
	color: var(--mute);
}
.oq.is-right  .oq__why { border-left-color: var(--open); }
.oq.is-wrong  .oq__why { border-left-color: var(--closed); }

/* Details */
.ofield { margin-bottom: 1.1rem; }
.ofield label {
	display: block;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: .4rem;
}
.ofield input {
	width: 100%;
	background: var(--ink-2);
	border: 1px solid var(--haze);
	border-radius: var(--radius);
	color: var(--bone);
	padding: .7rem .85rem;
	font-family: var(--body);
	font-size: .95rem;
}
.ofield input:focus-visible { border-color: var(--brass); }

.orientation__actions { margin: 1.75rem 0 0; }

/* Confirmation */
.odone {
	border: 1px solid var(--haze-soft);
	border-top: 2px solid var(--open);
	background: var(--ink-2);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.odone__eyebrow {
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--open);
	margin-bottom: .6rem;
}

.odone__title { font-size: clamp(1.6rem, 4vw, 2.3rem); text-transform: uppercase; margin-bottom: 1.25rem; }

.odone__ref {
	display: flex;
	align-items: baseline;
	gap: .9rem;
	padding: .9rem 1.1rem;
	background: var(--ink);
	border: 1px solid var(--haze-soft);
	margin-bottom: 1.5rem;
}
.odone__ref span {
	font-family: var(--mono);
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mute);
}
.odone__ref strong {
	font-family: var(--mono);
	font-size: 1.4rem;
	letter-spacing: .12em;
	color: var(--brass-lift);
}

.osignoff {
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--haze-soft);
}
.osignoff__title { font-size: 1.15rem; text-transform: uppercase; margin-bottom: .4rem; }
.osignoff__note { color: var(--mute-dim); font-size: .85rem; margin-bottom: 1.25rem; }

.osignoff__grid { display: grid; gap: 1.1rem; }
.osignoff__grid > div { display: grid; gap: .3rem; }
.osignoff__grid dt {
	font-family: var(--mono);
	font-size: .64rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mute-dim);
}
.osignoff__grid dd {
	min-height: 2rem;
	border-bottom: 1px solid var(--haze);
	font-family: var(--mono);
	font-size: 1rem;
	color: var(--bone);
}

@media print {
	.orientation--done .odone { border: 0; background: #fff; color: #000; padding: 0; }
	.odone__title, .osignoff__title { color: #000; }
	.odone__ref { background: #fff; border-color: #999; }
	.odone__ref strong, .odone__eyebrow { color: #000; }
	.osignoff__grid dd { border-bottom-color: #000; min-height: 2.4rem; }
	.osignoff__grid dt { color: #333; }
	.no-print { display: none !important; }
}