/*
 * Corner — main stylesheet.
 *
 * THIS FILE NEVER NAMES A COLOUR, A FONT OR A SIZE outside the :root block
 * below. Every rule reads a --cnr-* custom property. The two colours are the
 * only thing a real gym owner needs to change (see inc/customizer.php); the
 * type scale, spacing and radius are fixed brand decisions for this theme.
 *
 * Layout archetype: "fight card". Section frames, the program grid and the
 * coach roster all borrow the visual grammar of a boxing/MMA event card —
 * a numbered bout list, a cut top-right corner like a ticket stub, and a
 * heavy condensed poster face on every headline. This is a different
 * archetype from every prior catalogue theme (lighting-plot, programme-grid,
 * palette-rail, waterline, promenade, bento…), chosen because it is the one
 * piece of print culture this entire industry cluster already shares.
 */

/* ------------------------------------------------------------------ *
 * 0. Tokens
 * ------------------------------------------------------------------ */
:root {
	/* Colour. Warm charcoal-brown, not cool black — a worn-leather/canvas
	   feel rather than a generic "dark SaaS" near-black. --cnr-brand and
	   --cnr-accent are overridable in the Customizer; everything else is
	   fixed. */
	--cnr-bg:        #161210;
	--cnr-bg-alt:    #1d1712;
	--cnr-surface:   #241d17;
	--cnr-ink:       #f4eee3;
	--cnr-ink-soft:  #cabfae;
	--cnr-ink-faint: #8d8171;
	--cnr-line:      rgb( 244 238 227 / 12% );
	--cnr-brand:     #c4322b;
	--cnr-accent:    #c9a15a;
	--cnr-on-brand:  #fff6f1;
	--cnr-on-accent: #1c1410;
	--cnr-canvas:    #ece2ce; /* the one light surface: ring-canvas cream, used sparingly for contrast panels */
	--cnr-ink-on-canvas: #211a13;

	--cnr-brand-rgb:  196 50 43;
	--cnr-accent-rgb: 201 161 90;
	--cnr-bg-rgb:     22 18 16;

	/* Type. Anton (display) has one weight by nature — it IS a heavy poster
	   face, so it never needs a bold/regular choice. Base 17px, ratio 1.3. */
	--cnr-ff-display: "Anton", "Arial Narrow", sans-serif;
	--cnr-ff-body:    "IBM Plex Sans", system-ui, sans-serif;
	--cnr-ff-mono:    "Space Mono", ui-monospace, monospace;

	--cnr-t-xs:  0.7188rem;
	--cnr-t-s:   0.8125rem;
	--cnr-t-m:   1.0625rem;
	--cnr-t-l:   1.3813rem;
	--cnr-t-xl:  1.7938rem;
	--cnr-t-2xl: 2.3313rem;
	--cnr-t-3xl: 3.0313rem;
	--cnr-t-display: clamp( 2.9rem, 4.6vw + 1rem, 5.6rem );

	/* Space. 8px base unit. */
	--cnr-sp-1: 0.5rem;
	--cnr-sp-2: 1rem;
	--cnr-sp-3: 1.5rem;
	--cnr-sp-4: 2rem;
	--cnr-sp-5: 3rem;
	--cnr-sp-6: 4rem;
	--cnr-sp-7: 6rem;
	--cnr-sp-8: 8rem;
	--cnr-section-y: clamp( 4rem, 7vw, 9rem );

	--cnr-radius: 3px;
	--cnr-measure: 66ch;
	--cnr-cut: 22px; /* the ticket-stub corner cut, referenced by clip-path */
}

/* ------------------------------------------------------------------ *
 * 1. Reset & base
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media ( prefers-reduced-motion: reduce ) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	overflow-x: hidden;
	background: var( --cnr-bg );
	color: var( --cnr-ink );
	font-family: var( --cnr-ff-body );
	font-size: var( --cnr-t-m );
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img, svg, video, canvas { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.skip-link {
	position: absolute; left: 1rem; top: -60px;
	background: var( --cnr-brand ); color: var( --cnr-on-brand );
	padding: 0.75rem 1.25rem; border-radius: var( --cnr-radius ); z-index: 1000;
	transition: top 160ms ease;
}
.skip-link:focus { top: 1rem; }

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

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

.container { max-width: 1240px; margin-inline: auto; padding-inline: var( --cnr-sp-3 ); }

/* ------------------------------------------------------------------ *
 * 2. Typography
 * ------------------------------------------------------------------ */
h1, h2, h3, h4 { font-family: var( --cnr-ff-display ); font-weight: 400; line-height: 1.02; margin: 0; text-transform: uppercase; letter-spacing: 0.004em; }
h1 { font-size: var( --cnr-t-display ); }
h2 { font-size: var( --cnr-t-2xl ); }
h3 { font-size: var( --cnr-t-l ); }
h4 { font-size: var( --cnr-t-m ); }
p { margin: 0 0 1em; }
.prose { max-width: var( --cnr-measure ); }
.prose p { color: var( --cnr-ink-soft ); }
.prose a { color: var( --cnr-accent ); text-decoration: underline; text-underline-offset: 3px; }
.prose code { font-family: var( --cnr-ff-mono ); font-size: 0.9em; background: var( --cnr-bg-alt ); padding: 0.15em 0.4em; border-radius: 3px; }

.eyebrow {
	display: inline-flex; align-items: center; gap: var( --cnr-sp-1 );
	font-family: var( --cnr-ff-mono ); font-size: var( --cnr-t-xs ); font-weight: 700;
	letter-spacing: 0.16em; text-transform: uppercase; color: var( --cnr-accent );
	margin-bottom: var( --cnr-sp-2 );
}
.eyebrow::before { content: ''; inline-size: 1.4em; block-size: 2px; background: currentColor; }
.eyebrow::after { content: ''; inline-size: 1.4em; block-size: 2px; background: currentColor; }

.muted { color: var( --cnr-ink-faint ); }
.lede { font-size: var( --cnr-t-l ); color: var( --cnr-ink-soft ); font-weight: 400; max-width: 42ch; }

/* Round/bout tag: the small numbered-round chip used on schedule lines,
   testimonials and the round-timer widget. */
.tag-round {
	display: inline-flex; align-items: center; gap: 0.4em;
	font-family: var( --cnr-ff-mono ); font-size: var( --cnr-t-xs ); font-weight: 700;
	letter-spacing: 0.06em; color: var( --cnr-ink-faint );
	border: 1px solid var( --cnr-line ); border-radius: 999px;
	padding: 0.3em 0.8em;
}

/* ------------------------------------------------------------------ *
 * 3. Buttons
 * ------------------------------------------------------------------ */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	font-family: var( --cnr-ff-display ); font-size: var( --cnr-t-s ); letter-spacing: 0.05em;
	text-transform: uppercase; text-decoration: none; white-space: nowrap;
	padding: 0.95em 1.7em; border-radius: var( --cnr-radius ); border: 1px solid transparent;
	cursor: pointer; transition: transform 160ms cubic-bezier( .2,.8,.3,1 ), filter 160ms, background 160ms, border-color 160ms;
}
.btn:hover { transform: translateY( -2px ); }
.btn:active { transform: translateY( 0 ); }
.btn--brand { background: var( --cnr-brand ); color: var( --cnr-on-brand ); }
.btn--brand:hover { filter: brightness( 1.08 ); }
.btn--ghost { background: transparent; border-color: var( --cnr-line ); color: var( --cnr-ink ); }
.btn--ghost:hover { border-color: var( --cnr-accent ); color: var( --cnr-accent ); }
.btn--accent { background: var( --cnr-accent ); color: var( --cnr-on-accent ); }
.btn[disabled] { opacity: 0.55; cursor: default; transform: none; }

/* ------------------------------------------------------------------ *
 * 4. Header / nav
 * ------------------------------------------------------------------ */
.site-header {
	position: sticky; top: 0; z-index: 60;
	display: flex; align-items: center; justify-content: space-between;
	padding-block: var( --cnr-sp-2 ); padding-inline: var( --cnr-sp-3 );
	background: rgb( var( --cnr-bg-rgb ) / 0.86 );
	-webkit-backdrop-filter: blur( 12px ); backdrop-filter: blur( 12px );
	border-bottom: 1px solid var( --cnr-line );
}
.brand { display: flex; align-items: center; gap: 0.6em; text-decoration: none; }
.brand-mark { inline-size: 34px; block-size: 34px; flex: none; }
.brand { min-inline-size: 0; }
.brand-name {
	font-family: var( --cnr-ff-display ); font-size: 1.25rem; letter-spacing: 0.01em; text-transform: uppercase;
	/* A long site title (this theme's own demo title is 30 characters) must
	   never wrap to a second line next to the hamburger button — it has
	   overlapped it before. One line, truncated, is always safe regardless
	   of how long an owner's real site title turns out to be. */
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media ( max-width: 480px ) {
	.brand-name { font-size: 1rem; max-inline-size: 46vw; }
}

.nav { display: flex; align-items: center; gap: var( --cnr-sp-4 ); }
.nav ul, .nav .nav-list { display: flex; align-items: center; gap: var( --cnr-sp-3 ); list-style: none; margin: 0; padding: 0; }
.nav a { text-decoration: none; font-size: var( --cnr-t-s ); text-transform: uppercase; letter-spacing: 0.06em; color: var( --cnr-ink-soft ); }
.nav a:hover, .nav a[aria-current="page"] { color: var( --cnr-accent ); }

.menu-toggle { display: none; background: none; border: 1px solid var( --cnr-line ); border-radius: var( --cnr-radius ); padding: 0.5em 0.7em; }
.menu-toggle span, .menu-toggle::before, .menu-toggle::after { content: ''; display: block; inline-size: 20px; block-size: 2px; background: currentColor; margin: 4px 0; }

@media ( max-width: 860px ) {
	.menu-toggle { display: block; }
	/* `bottom: 0` here would normally mean "flush with the viewport bottom" —
	   except .site-header has backdrop-filter, and per spec (and Chromium's
	   implementation of it) backdrop-filter creates a containing block for
	   fixed-position descendants exactly the way `filter` does. That silently
	   changes what `.nav`'s `fixed` positioning is measured against: instead
	   of the viewport, `top`/`bottom` resolve against .site-header's own
	   ~70-95px box, collapsing the "full-screen" mobile menu into a sliver
	   pinned near the top with the hero visible right through it. `height`
	   in vh units sidesteps the trap entirely, because viewport units are
	   defined against the actual viewport regardless of containing block. */
	.nav { position: fixed; inset-inline: 0; top: 64px; height: calc( 100vh - 64px ); height: calc( 100dvh - 64px );
		background: var( --cnr-bg ); flex-direction: column; align-items: flex-start;
		padding: var( --cnr-sp-4 ); transform: translateX( -100% ); transition: transform 260ms ease; overflow-y: auto; }
	.nav.is-open { transform: translateX( 0 ); }
	.nav ul, .nav .nav-list { flex-direction: column; align-items: flex-start; gap: var( --cnr-sp-3 ); width: 100%; }
	.nav a { font-size: var( --cnr-t-l ); }
	/* A fixed-position menu with a horizontal transform can still blow out
	   documentElement.scrollWidth if any child forces intrinsic width — seen
	   before across this catalogue. Belt and braces. */
	html, body { overflow-x: hidden; }
}

/* ------------------------------------------------------------------ *
 * 5. Sections
 * ------------------------------------------------------------------ */
.section { padding-block: var( --cnr-section-y ); }
.section--alt { background: var( --cnr-bg-alt ); }
.section--tight { padding-block: var( --cnr-sp-6 ); }
.section-head { max-width: 60ch; margin-bottom: var( --cnr-sp-5 ); }
.section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var( --cnr-sp-4 ); flex-wrap: wrap; }

/* ------------------------------------------------------------------ *
 * 6. Hero
 * ------------------------------------------------------------------ */
.hero { position: relative; overflow: hidden; padding-block: var( --cnr-sp-7 ) var( --cnr-sp-6 ); }
.hero-canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 0; }
.hero-fallback {
	position: absolute; inset: 0; z-index: 0;
	background:
		radial-gradient( 900px 500px at 18% 8%, rgb( var( --cnr-brand-rgb ) / 0.16 ), transparent 60% ),
		radial-gradient( 700px 500px at 82% 92%, rgb( var( --cnr-accent-rgb ) / 0.10 ), transparent 60% );
}
.hero-inner { position: relative; z-index: 1; }
.hero h1 { max-width: 16ch; }
.hero .lede { margin-block: var( --cnr-sp-3 ) var( --cnr-sp-4 ); }
.hero-cta { display: flex; gap: var( --cnr-sp-2 ); flex-wrap: wrap; }
.hero-trust { display: flex; align-items: center; gap: var( --cnr-sp-3 ); margin-top: var( --cnr-sp-5 ); padding-top: var( --cnr-sp-3 ); border-top: 1px solid var( --cnr-line ); flex-wrap: wrap; }

/* Two-column hero: copy + CTA on one side, the bag-stage on the other,
   stacked on mobile — the .bag-stage margin rules above already assume
   this side-by-side layout at 960px. */
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var( --cnr-sp-6 ); align-items: center; }
@media ( min-width: 960px ) { .hero-grid { grid-template-columns: 1.1fr 1fr; } }

/* The heavy bag's own frame — a fixed-ratio stage so CLS never happens
   whether or not the canvas ends up mounting. */
.bag-stage { position: relative; aspect-ratio: 4 / 5; max-inline-size: 420px; margin-inline: auto; }
@media ( min-width: 960px ) { .bag-stage { margin-inline: 0; } }
.bag-hint { position: absolute; inset-inline: 0; bottom: var( --cnr-sp-2 ); text-align: center; font-family: var( --cnr-ff-mono ); font-size: var( --cnr-t-xs ); letter-spacing: 0.08em; text-transform: uppercase; color: var( --cnr-ink-faint ); opacity: 0; transition: opacity 400ms; pointer-events: none; }
.bag-stage.is-ready .bag-hint { opacity: 1; }
.bag-stage.is-touched .bag-hint { opacity: 0; }

/* ------------------------------------------------------------------ *
 * 7. Fight-card frames — the shared "ticket stub" corner cut
 * ------------------------------------------------------------------ */
.card, .bout-card {
	position: relative;
	background: var( --cnr-surface );
	border: 1px solid var( --cnr-line );
	clip-path: polygon( 0 0, calc( 100% - var( --cnr-cut ) ) 0, 100% var( --cnr-cut ), 100% 100%, 0 100% );
}
.card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var( --cnr-bg-alt ); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: var( --cnr-sp-3 ); }

/* ------------------------------------------------------------------ *
 * 8. Program grid (the "bout list")
 * ------------------------------------------------------------------ */
.program-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) ); gap: var( --cnr-sp-3 ); }
.program-card .card-body { display: flex; flex-direction: column; gap: var( --cnr-sp-1 ); }
.program-card .bout-no { font-family: var( --cnr-ff-mono ); font-size: var( --cnr-t-xs ); color: var( --cnr-accent ); letter-spacing: 0.08em; }
.program-card h3 { margin-block: 0.2em 0.1em; }
.program-card .program-meta { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 0.4em; }

/* 8b. Journal/post grid — the same ticket-stub card, for the blog index,
   search results and the 404 quick-links context. */
.post-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) ); gap: var( --cnr-sp-3 ); }
.post-card .card-body { display: flex; flex-direction: column; gap: var( --cnr-sp-1 ); }
.post-card h3 { margin-block: 0.2em 0.1em; }
.post-meta { display: flex; gap: 0.8em; flex-wrap: wrap; align-items: center; }

/* About-page photo strip: two real gym photos, no card chrome. */
.about-photos { display: grid; grid-template-columns: 1.4fr 1fr; gap: var( --cnr-sp-3 ); margin-block: var( --cnr-sp-5 ); }
.about-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var( --cnr-bg-alt ); clip-path: polygon( 0 0, calc( 100% - var( --cnr-cut ) ) 0, 100% var( --cnr-cut ), 100% 100%, 0 100% ); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
@media ( max-width: 640px ) { .about-photos { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ *
 * 9. Coach roster
 * ------------------------------------------------------------------ */
.coach-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) ); gap: var( --cnr-sp-3 ); }
.coach-card .card-media { aspect-ratio: 3 / 4; }
.coach-card .card-body h3 { font-size: var( --cnr-t-l ); }
.coach-card .role { color: var( --cnr-accent ); font-size: var( --cnr-t-s ); }
.coach-card .years { color: var( --cnr-ink-faint ); font-size: var( --cnr-t-xs ); }

/* ------------------------------------------------------------------ *
 * 10. Stats
 * ------------------------------------------------------------------ */
.stat-row { display: grid; grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) ); gap: var( --cnr-sp-4 ); }
.stat .n { font-family: var( --cnr-ff-display ); font-size: clamp( 2.4rem, 3vw + 1rem, 3.6rem ); color: var( --cnr-accent ); line-height: 1; }
.stat .label { color: var( --cnr-ink-soft ); font-size: var( --cnr-t-s ); margin-top: 0.3em; }

/* ------------------------------------------------------------------ *
 * 11. Testimonials
 * ------------------------------------------------------------------ */
.testimonial-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) ); gap: var( --cnr-sp-3 ); }
.testimonial { padding: var( --cnr-sp-3 ); background: var( --cnr-bg-alt ); border-left: 3px solid var( --cnr-brand ); }
.testimonial p { font-size: var( --cnr-t-m ); color: var( --cnr-ink ); }
.testimonial .who { color: var( --cnr-ink-faint ); font-size: var( --cnr-t-s ); }

/* ------------------------------------------------------------------ *
 * 12. Belt-progression scroll motif (styles; draw handled by fx.js)
 * ------------------------------------------------------------------ */
.belt-track { position: relative; padding-left: var( --cnr-sp-5 ); }
.belt-svg { position: absolute; left: 0; top: 0; bottom: 0; inline-size: 40px; block-size: 100%; overflow: visible; }
.belt-svg path { fill: none; }
/* An optional static full-length line under the animated one — if a
   template includes it, it reads as the "track" the belt draws along; if
   not, the animated line alone still works fine on its own. */
.belt-svg .belt-track-line { stroke: var( --cnr-line ); stroke-width: 3; }
.belt-svg .belt-path { stroke: var( --cnr-accent ); stroke-width: 3; stroke-linecap: round; }

.belt-rank { position: relative; padding-block: var( --cnr-sp-4 ); opacity: 0.4; transition: opacity 500ms ease; }
.belt-rank.is-lit { opacity: 1; }
.belt-rank .swatch {
	display: inline-block; inline-size: 0.9em; block-size: 0.9em; border-radius: 2px;
	margin-right: 0.5em; vertical-align: -0.1em; transition: box-shadow 500ms ease;
}
.belt-rank.is-lit .swatch { box-shadow: 0 0 0 3px rgb( var( --cnr-accent-rgb ) / 0.22 ); }
@media ( prefers-reduced-motion: reduce ) {
	.belt-rank, .belt-rank .swatch { transition: none; }
}

/* ------------------------------------------------------------------ *
 * 13. Round-timer widget
 * ------------------------------------------------------------------ */
.round-timer {
	display: inline-flex; align-items: center; gap: var( --cnr-sp-3 );
	background: var( --cnr-bg-alt ); border: 1px solid var( --cnr-line ); border-radius: var( --cnr-radius );
	padding: var( --cnr-sp-2 ) var( --cnr-sp-3 );
}
.round-timer .face { font-family: var( --cnr-ff-mono ); font-size: var( --cnr-t-2xl ); font-variant-numeric: tabular-nums; min-inline-size: 2.6ch; }
.round-timer .face.is-rest { color: var( --cnr-accent ); }
.round-timer .status { font-family: var( --cnr-ff-mono ); font-size: var( --cnr-t-xs ); text-transform: uppercase; letter-spacing: 0.1em; color: var( --cnr-ink-faint ); }

/* ------------------------------------------------------------------ *
 * 14. CTA band
 * ------------------------------------------------------------------ */
.cta-band { position: relative; padding-block: var( --cnr-sp-6 ); text-align: center; overflow: hidden; }
.cta-band::before {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient( 800px 400px at 50% 0%, rgb( var( --cnr-brand-rgb ) / 0.14 ), transparent 70% );
}
.cta-band-inner { position: relative; z-index: 1; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band-actions { display: flex; align-items: center; justify-content: center; gap: var( --cnr-sp-4 ); flex-wrap: wrap; margin-top: var( --cnr-sp-4 ); }

/* ------------------------------------------------------------------ *
 * 15. Forms
 * ------------------------------------------------------------------ */
/* A generic responsive two-column split — the contact page's info/form
   layout, reusable anywhere else a template needs the same shape. */
.two-col { display: grid; grid-template-columns: 1.05fr 1fr; gap: var( --cnr-sp-6 ); align-items: start; }
@media ( max-width: 860px ) { .two-col { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.4em; margin-bottom: var( --cnr-sp-3 ); }
.field label { font-size: var( --cnr-t-s ); color: var( --cnr-ink-soft ); }
.field input, .field select, .field textarea {
	font: inherit; background: var( --cnr-bg-alt ); color: var( --cnr-ink );
	border: 1px solid var( --cnr-line ); border-radius: var( --cnr-radius ); padding: 0.75em 0.9em;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var( --cnr-brand ); outline: none; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var( --cnr-sp-3 ); }
@media ( max-width: 640px ) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: var( --cnr-t-s ); margin-top: var( --cnr-sp-2 ); }
.form-note.is-ok { color: var( --cnr-accent ); }
.form-note.is-error { color: #e8867e; }

/* ------------------------------------------------------------------ *
 * 16. Footer
 * ------------------------------------------------------------------ */
.site-foot { border-top: 1px solid var( --cnr-line ); padding-block: var( --cnr-sp-6 ) var( --cnr-sp-4 ); background: var( --cnr-bg-alt ); }
.foot-grid { display: grid; grid-template-columns: 2fr repeat( 3, 1fr ); gap: var( --cnr-sp-4 ); }
@media ( max-width: 780px ) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-col h4 { font-size: var( --cnr-t-s ); text-transform: uppercase; letter-spacing: 0.08em; color: var( --cnr-ink-faint ); margin-bottom: var( --cnr-sp-2 ); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5em; }
.foot-col a { text-decoration: none; color: var( --cnr-ink-soft ); }
.foot-col a:hover { color: var( --cnr-accent ); }
.foot-bottom { margin-top: var( --cnr-sp-5 ); padding-top: var( --cnr-sp-3 ); border-top: 1px solid var( --cnr-line ); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var( --cnr-sp-2 ); color: var( --cnr-ink-faint ); font-size: var( --cnr-t-xs ); }

/* ------------------------------------------------------------------ *
 * 17. Breadcrumbs, pagination
 * ------------------------------------------------------------------ */
.crumbs { font-size: var( --cnr-t-s ); color: var( --cnr-ink-faint ); margin-bottom: var( --cnr-sp-3 ); }
.crumbs ol { list-style: none; display: flex; gap: 0.5em; margin: 0; padding: 0; flex-wrap: wrap; }
.crumbs li + li::before { content: '/'; margin-right: 0.5em; }
.crumbs a { color: var( --cnr-ink-soft ); text-decoration: none; }
.crumbs a:hover { color: var( --cnr-accent ); }

.pagination { display: flex; gap: 0.5em; margin-top: var( --cnr-sp-4 ); }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 2.4em; min-block-size: 2.4em; border: 1px solid var( --cnr-line ); border-radius: var( --cnr-radius ); text-decoration: none; font-family: var( --cnr-ff-mono ); font-size: var( --cnr-t-s ); }
.pagination .page-numbers.current { background: var( --cnr-brand ); color: var( --cnr-on-brand ); border-color: var( --cnr-brand ); }
.pagination a.page-numbers:hover { border-color: var( --cnr-accent ); color: var( --cnr-accent ); }

/* ------------------------------------------------------------------ *
 * 18. Comments
 * ------------------------------------------------------------------ */
.comments { margin-top: var( --cnr-sp-6 ); }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-body { padding-block: var( --cnr-sp-3 ); border-bottom: 1px solid var( --cnr-line ); }
.comment-meta { font-size: var( --cnr-t-s ); color: var( --cnr-ink-faint ); }
.comment-respond { margin-top: var( --cnr-sp-4 ); }
.reply a { font-size: var( --cnr-t-s ); color: var( --cnr-accent ); text-decoration: none; font-weight: 600; }

/* ------------------------------------------------------------------ *
 * 19. Reveal-on-scroll (fx.js)
 * ------------------------------------------------------------------ */
[data-reveal] { opacity: 0; transition: opacity 620ms ease, transform 620ms cubic-bezier( .2,.8,.2,1 ); }
[data-reveal="up"] { transform: translate3d( 0, 1.6rem, 0 ); }
[data-reveal="left"] { transform: translate3d( -1.5rem, 0, 0 ); }
[data-reveal="right"] { transform: translate3d( 1.5rem, 0, 0 ); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media ( prefers-reduced-motion: reduce ) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}
/* If JS never runs, cnr_no_js() in functions.php never removes .no-js from
   <html>, so [data-reveal] would otherwise stay at opacity:0 forever with
   nothing left to trigger it. This is the fallback that guarantees content
   is never permanently invisible. */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------------ *
 * 20. 404 / search
 * ------------------------------------------------------------------ */
.error-404 { text-align: center; padding-block: var( --cnr-sp-8 ); }
.error-404 h1 { font-size: var( --cnr-t-display ); }
.search-form { display: flex; gap: 0.5em; max-inline-size: 480px; }
.search-form input[type="search"] { flex: 1; }

@media ( max-width: 640px ) {
	:root { --cnr-t-display: clamp( 2.4rem, 8vw + 1rem, 3.4rem ); }
	.section { padding-block: var( --cnr-sp-5 ); }
	.hero { padding-block: var( --cnr-sp-5 ) var( --cnr-sp-4 ); }
}