/*
Theme Name: Banda
Theme URI: https://scatter.bg/
Description: A white-label one-page theme built around a single signature motif: the diagonal band. Accent, dark and light colors, band angle, font pairs, feature toggles and every UI label are configurable in the Customizer, so one theme can power many differently branded sites. Ships with a reading progress bar, automatic in-page section navigation, a full-screen menu, scroll reveals and a duotone hero built from the featured image.
Version: 2.11.2
Author: WebDesignBG
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: edda
Based on: Edda by Mel Choyce (GPL v2)
*/

/*--------------------------------------------------------------
TABLE OF CONTENTS
1. Tokens
2. Normalize / base
3. Typography
4. Accessibility & utility
5. Top bar
6. Overlay menu
7. Hero (la banda cruzada)
8. Entry content
9. Media, tables, figures
10. Comments (minimal)
11. Footer
12. Progress bar, back-to-top, reveals
13. Responsive
14. Reduced motion / print
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1. Tokens
--------------------------------------------------------------*/
:root {
	--light: #faf9f6;        /* jersey white */
	--dark: #0c0c0e;         /* third-kit black */
	--dark-soft: #141417;
	--accent: #d6001c;          /* la banda */
	--accent-dark: #9e0417;
	--muted: #6f6c66;   /* muted meta */
	--muted-light: #b9b6ae;
	--line: #e6e3dc;         /* hairlines on white */
	--line-dark: #232327;  /* hairlines on black */

	/* surface = hero / overlay menu / footer background, scheme-driven */
	--surface: #f4f2eb;
	--surface-text: #17171a;
	--surface-muted: #6f6c66;
	--surface-line: #e2dfd5;

	--display: "Archivo Black", "Archivo", "Arial Black", sans-serif;
	--display-weight: 400;
	--texto: "Alegreya", Georgia, "Times New Roman", serif;
	--texto-size: 1.1875rem;
	--ui: "Archivo", "Helvetica Neue", Arial, sans-serif;

	--measure: 44rem;          /* reading measure */
	--wide: 74rem;           /* wide container */
	--bar: 3.4rem;          /* top bar height */

	--band-angle: -14deg;     /* the one angle, everywhere */

	--dur: 320ms;
	--ease: cubic-bezier(.22, .61, .36, 1);

	/* vertical rhythm — one tight scale */
	--space-hero-top: clamp(0.4rem, 1.2vh, 0.75rem);
	--space-hero-bottom: clamp(0.9rem, 2vh, 1.25rem);
	--space-content-top: clamp(1.5rem, 3vw, 2.25rem);
	--space-content-bottom: clamp(2rem, 4vw, 3rem);
	--space-section: 2.5rem;
	--space-block: 1.75rem;
}

/*--------------------------------------------------------------
2. Normalize / base
--------------------------------------------------------------*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--bar) + 1.5rem);
}

body {
	margin: 0;
	background: var(--light);
	color: var(--dark);
	font-family: var(--texto);
	font-size: var(--texto-size);
	line-height: 1.64;
	font-feature-settings: "liga", "kern";
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

article, aside, details, figcaption, figure, footer,
header, main, menu, nav, section, summary {
	display: block;
}

audio, canvas, progress, video {
	display: inline-block;
	vertical-align: baseline;
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
}

embed, iframe, object {
	max-width: 100%;
}

hr {
	border: 0;
	height: 1px;
	background: var(--line);
	margin: 3.5rem auto;
	max-width: var(--measure);
}

::selection {
	background: var(--accent);
	color: #fff;
}

/*--------------------------------------------------------------
3. Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	font-family: var(--display);
	font-weight: var(--display-weight);
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 0 0 1.25rem;
	color: var(--dark);
	text-wrap: balance;
}

p {
	margin: 0 0 1.35em;
	text-wrap: pretty;
}

a {
	color: var(--accent);
	text-decoration: none;
}

b, strong {
	font-weight: 700;
}

blockquote {
	margin: 0;
}

address {
	font-style: normal;
}

pre, code, kbd, samp {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 0.85em;
}

pre {
	background: var(--dark);
	color: var(--light);
	padding: 1.5rem;
	overflow-x: auto;
	line-height: 1.6;
}

/*--------------------------------------------------------------
4. Accessibility & utility
--------------------------------------------------------------*/
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	background: var(--light);
	color: var(--accent);
	display: block;
	font-family: var(--ui);
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 1rem;
	top: 1rem;
	padding: 0.9rem 1.4rem;
	width: auto;
	z-index: 100000;
	box-shadow: 0 0 0 2px var(--accent);
}

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

.site {
	overflow-x: clip;
}

/*--------------------------------------------------------------
5. Top bar
--------------------------------------------------------------*/
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	height: var(--bar);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 clamp(1.25rem, 4vw, 3rem);
	background: var(--surface);
	color: var(--surface-text);
	transition: background-color var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease);
}

/* transparent over the hero only */
body.has-hero .site-header:not(.is-scrolled) {
	background: transparent;
}

.site-header.is-scrolled {
	background: var(--surface);
	box-shadow: 0 1px 0 var(--surface-line), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.site-branding {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	min-width: 0;
}

.site-title {
	margin: 0;
	font-size: 1rem;
	letter-spacing: 0.14em;
	line-height: 1;
}

.site-title a {
	color: var(--surface-text);
	position: relative;
	padding-left: 1.1rem;
}

/* small band tick before the site title */
.site-title a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0.5rem;
	height: 1.05em;
	background: var(--accent);
	transform: translateY(-54%) skewX(var(--band-angle));
}

.site-description {
	margin: 0;
	font-family: var(--ui);
	font-weight: 500;
	font-size: 0.7rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--surface-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.menu-toggle[hidden] {
	display: none !important;
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0.6rem 0;
	color: var(--surface-text);
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.menu-toggle .burger {
	position: relative;
	width: 1.5rem;
	height: 0.85rem;
	display: inline-block;
}

.menu-toggle .burger::before,
.menu-toggle .burger::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
	transform: skewX(var(--band-angle));
	transition: transform var(--dur) var(--ease), top var(--dur) var(--ease),
	            bottom var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.menu-toggle .burger::before { top: 0; }
.menu-toggle .burger::after { bottom: 0; }

.menu-toggle:hover .burger::before,
.menu-toggle:hover .burger::after {
	background: var(--accent);
}

body.menu-open .menu-toggle .burger::before {
	top: calc(50% - 1px);
	transform: rotate(45deg);
}

body.menu-open .menu-toggle .burger::after {
	bottom: calc(50% - 1px);
	transform: rotate(-45deg);
}

/* WordPress admin bar offsets */
body.admin-bar .site-header,
body.admin-bar .site-menu,
body.admin-bar .progress-band {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header,
	body.admin-bar .site-menu,
	body.admin-bar .progress-band {
		top: 46px;
	}
}

/*--------------------------------------------------------------
5b. Header styles (Customizer: banda_header_style)

   inline   — logo left, horizontal nav right (default; burger on mobile)
   centered — two-deck editorial: centered brand, nav below
   minimal  — brand + burger only (overlay menu everywhere)
   accent   — inline layout on a solid accent-colored bar
--------------------------------------------------------------*/
.header-nav {
	display: none;
}

.header-menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 2rem;
	margin: 0;
	padding: 0;
}

.header-menu > li {
	position: relative;
}

.header-menu a {
	display: inline-block;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--surface-text);
	padding: 0.45rem 0;
	position: relative;
	transition: color var(--dur) var(--ease);
}

.header-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--accent);
	transform: skewX(var(--band-angle)) scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur) var(--ease);
}

.header-menu a:hover,
.header-menu a:focus-visible,
.header-menu .current-menu-item > a,
.header-menu .current_page_item > a {
	color: var(--surface-text);
}

.header-menu a:hover::after,
.header-menu a:focus-visible::after,
.header-menu .current-menu-item > a::after,
.header-menu .current_page_item > a::after {
	transform: skewX(var(--band-angle)) scaleX(1);
}

/* dropdowns */
.header-menu .sub-menu {
	list-style: none;
	position: absolute;
	top: calc(100% + 0.4rem);
	left: -1rem;
	min-width: 13rem;
	margin: 0;
	padding: 0.45rem 0;
	background: var(--surface);
	border: 1px solid var(--surface-line);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.10);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.4rem);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
	            visibility 0s linear var(--dur);
	z-index: 20;
}

.header-menu > li:hover > .sub-menu,
.header-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.header-menu .sub-menu a {
	display: block;
	padding: 0.55rem 1.1rem;
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	color: var(--surface-muted);
}

.header-menu .sub-menu a::after {
	display: none;
}

.header-menu .sub-menu a:hover,
.header-menu .sub-menu a:focus-visible {
	color: var(--accent);
}

@media (min-width: 960px) {
	body.header-inline .header-nav,
	body.header-accent .header-nav,
	body.header-centered .header-nav {
		display: block;
	}

	body.header-inline .menu-toggle,
	body.header-accent .menu-toggle,
	body.header-centered .menu-toggle {
		display: none;
	}

	/* centered: two-deck editorial header */
	body.header-centered {
		--bar: 7.5rem;
	}

	body.header-centered .site-header {
		flex-direction: column;
		justify-content: center;
		gap: 0.85rem;
		padding-top: 1.15rem;
		padding-bottom: 1.05rem;
	}

	body.header-centered .site-branding {
		flex-direction: column;
		align-items: center;
		gap: 0.35rem;
	}

	body.header-centered .site-title {
		font-size: 1.3rem;
	}

	body.header-centered .header-menu {
		justify-content: center;
		gap: 2.3rem;
	}
}

/* centered & accent headers stay solid even over the hero */
body.header-centered .site-header,
body.header-centered.has-hero .site-header:not(.is-scrolled) {
	background: var(--surface);
	box-shadow: 0 1px 0 var(--surface-line);
}

/* accent: the bar itself becomes the band */
body.header-accent .site-header,
body.header-accent.has-hero .site-header:not(.is-scrolled) {
	background: var(--accent);
}

body.header-accent .site-header.is-scrolled {
	background: var(--accent);
	box-shadow: 0 2px 0 var(--accent-dark), 0 8px 24px rgba(0, 0, 0, 0.12);
}

body.header-accent .site-title a,
body.header-accent .site-description,
body.header-accent .menu-toggle,
body.header-accent .header-menu a {
	color: #fff;
}

body.header-accent .site-title a::before,
body.header-accent .header-menu a::after {
	background: #fff;
}

body.header-accent .progress-band {
	background: var(--accent-dark);
}

/*--------------------------------------------------------------
6. Overlay menu
--------------------------------------------------------------*/
.site-menu {
	position: fixed;
	inset: 0;
	z-index: 850;
	background: var(--surface);
	display: flex;
	align-items: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}

/* faint stripe pair on the overlay's right side */
.site-menu::before {
	content: "";
	position: absolute;
	top: -8%;
	bottom: -8%;
	right: clamp(2.5rem, 12vw, 12rem);
	width: clamp(0.8rem, 1.4vw, 1.25rem);
	background: var(--accent);
	opacity: 0.22;
	transform: skewX(var(--band-angle));
	pointer-events: none;
}

.site-menu::after {
	content: "";
	position: absolute;
	top: -8%;
	bottom: -8%;
	right: clamp(4.5rem, 15.5vw, 15rem);
	width: clamp(1.9rem, 3.4vw, 3.1rem);
	background: var(--accent);
	opacity: 0.09;
	transform: skewX(var(--band-angle));
	pointer-events: none;
}

body.menu-open .site-menu {
	visibility: visible;
	opacity: 1;
	transition: opacity var(--dur) var(--ease);
}

body.menu-open {
	overflow: hidden;
}

.site-menu-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wide);
	margin: 0 auto;
	padding: calc(var(--bar) + 2rem) clamp(1.5rem, 5vw, 3rem) 3rem;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	max-height: 100%;
	overflow-y: auto;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation li {
	margin: 0 0 0.35rem;
	transform: translateY(0.8rem);
	opacity: 0;
	transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}

body.menu-open .main-navigation li {
	opacity: 1;
	transform: none;
}

body.menu-open .main-navigation li:nth-child(2) { transition-delay: 50ms; }
body.menu-open .main-navigation li:nth-child(3) { transition-delay: 100ms; }
body.menu-open .main-navigation li:nth-child(4) { transition-delay: 150ms; }
body.menu-open .main-navigation li:nth-child(5) { transition-delay: 200ms; }
body.menu-open .main-navigation li:nth-child(n+6) { transition-delay: 250ms; }

.main-navigation a {
	display: inline-block;
	font-family: var(--display);
	font-size: clamp(1.8rem, 5vw, 3.4rem);
	line-height: 1.12;
	text-transform: uppercase;
	color: var(--surface-text);
	position: relative;
	z-index: 0;
	padding: 0.05em 0.12em;
	transition: color var(--dur) var(--ease);
}

/* band slides in behind the link on hover */
.main-navigation a::before {
	content: "";
	position: absolute;
	inset: 0.12em -0.15em;
	background: var(--accent);
	transform: skewX(var(--band-angle)) scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur) var(--ease);
	z-index: -1;
}

.main-navigation a:hover,
.main-navigation a:focus-visible {
	color: #fff;
}

.main-navigation a:hover::before,
.main-navigation a:focus-visible::before {
	transform: skewX(var(--band-angle)) scaleX(1);
}

.main-navigation .sub-menu a {
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.12em;
	color: var(--surface-muted);
}

.main-navigation .sub-menu {
	margin: 0.3rem 0 0.8rem 0.3rem;
}

/* auto-built section nav ("En esta página") */
.site-menu .widget-title {
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--surface-muted);
	margin: 0 0 1.1rem;
	padding-left: 1rem;
	position: relative;
}

.site-menu .widget-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0.45rem;
	height: 1.2em;
	background: var(--accent);
	transform: translateY(-52%) skewX(var(--band-angle));
}

/* in-page sections inside the overlay */
.section-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.section-nav .section-nav-title {
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--surface-muted);
	margin: 0 0 1.1rem;
	padding-left: 1rem;
	position: relative;
}

.section-nav .section-nav-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0.45rem;
	height: 1.2em;
	background: var(--accent);
	transform: translateY(-52%) skewX(var(--band-angle));
}

.section-nav a {
	display: block;
	padding: 0.5rem 0;
	font-family: var(--ui);
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0.03em;
	color: var(--surface-muted);
	border-bottom: 1px solid var(--surface-line);
	transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

.section-nav a:hover,
.section-nav a:focus-visible {
	color: var(--surface-text);
	padding-left: 0.6rem;
}

.section-nav a.is-current {
	color: var(--accent);
}

/* no WP menu assigned: sections become the overlay's main content */
.site-menu.no-primary .site-menu-inner {
	grid-template-columns: 1fr;
	max-width: 52rem;
}

.site-menu.no-primary .section-nav a {
	font-family: var(--display);
	font-weight: var(--display-weight);
	font-size: clamp(1.3rem, 3vw, 1.9rem);
	text-transform: uppercase;
	letter-spacing: 0;
	padding: 0.75rem 0;
}

.site-menu .widget-area {
	margin-top: 2.5rem;
	color: var(--surface-muted);
	font-size: 0.95rem;
}

.site-menu .widget-area a {
	color: var(--surface-muted);
}

.site-menu .widget-area a:hover {
	color: var(--surface-text);
}

/*--------------------------------------------------------------
7. Hero (the band) — three heights: compact (default), half, full
--------------------------------------------------------------*/
.hero {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--surface);
	color: var(--surface-text);
	overflow: hidden;
	padding: calc(var(--bar) + var(--space-hero-top)) clamp(1.5rem, 5vw, 3rem) var(--space-hero-bottom);
	border-bottom: 1px solid var(--surface-line);
	/* faint pinstripe texture at the band angle */
	background-image: repeating-linear-gradient(
		calc(90deg + var(--band-angle)),
		transparent 0,
		transparent 2.6rem,
		rgba(0, 0, 0, 0.02) 2.6rem,
		rgba(0, 0, 0, 0.02) calc(2.6rem + 1px)
	);
}

body.hero-half .hero {
	min-height: clamp(24rem, 58vh, 36rem);
}

body.hero-full .hero {
	min-height: clamp(34rem, 92vh, 58rem);
}

/* optional featured image as a dark duotone backdrop */
.hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05) brightness(1.35) opacity(0.14);
}

body.scheme-dark .hero-media img {
	filter: grayscale(1) contrast(1.1) brightness(0.55);
	opacity: 0.35;
}

/* ---- Band styles (Customizer: banda_band_style) ----

   stripes — two slim ribbons rising through the right side (default)
   corner  — bold ribbon clipping the top-right corner
   seam    — thin accent seam along the hero's bottom edge
   none    — no decoration
*/

/* stripes: crisp solid ribbon + wide translucent companion behind it */
body.band-stripes .hero::before {
	content: "";
	position: absolute;
	top: -8%;
	bottom: -8%;
	right: clamp(2.25rem, 11vw, 11rem);
	width: clamp(0.8rem, 1.4vw, 1.25rem);
	background: linear-gradient(to bottom, var(--accent), var(--accent-dark));
	transform: skewX(var(--band-angle));
	z-index: 1;
}

body.band-stripes .hero::after {
	content: "";
	position: absolute;
	top: -8%;
	bottom: -8%;
	right: clamp(4.25rem, 14.5vw, 14rem);
	width: clamp(1.9rem, 3.4vw, 3.1rem);
	background: var(--accent);
	opacity: 0.13;
	transform: skewX(var(--band-angle));
	z-index: 1;
}

/* keep the title clear of the stripes on narrow and mid screens */
body.band-stripes .hero-inner {
	padding-right: clamp(3.5rem, 14vw, 10rem);
}

@media (min-width: 1280px) {
	body.band-stripes .hero-inner {
		padding-right: 0;
	}
}

/* corner: the bold ribbon (previous default) */
body.band-corner .hero::before {
	content: "";
	position: absolute;
	top: clamp(-1.5rem, -1vw, -0.5rem);
	right: -18%;
	width: 64%;
	min-width: 22rem;
	height: clamp(4.25rem, 10vh, 6.5rem);
	background: linear-gradient(100deg, var(--accent-dark), var(--accent) 55%);
	transform: rotate(var(--band-angle));
	transform-origin: center;
	z-index: 1;
}

body.band-corner.hero-full .hero::before {
	height: clamp(7rem, 20vh, 12rem);
	width: 80%;
	top: 6%;
	right: -20%;
}

/* seam: a slim sash stitched along the hero's bottom edge */
body.band-seam .hero {
	border-bottom: 0;
}

body.band-seam .hero::before {
	content: "";
	position: absolute;
	bottom: -0.3rem;
	left: -4%;
	width: 108%;
	height: 0.7rem;
	background: linear-gradient(90deg, var(--accent-dark), var(--accent) 45%);
	transform: rotate(calc(var(--band-angle) / 6));
	z-index: 1;
}

.hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wide);
	margin: 0 auto;
}

.hero-inner > * {
	max-width: 52rem;
}

body.hero-full .hero-inner {
	text-align: center;
}

body.hero-full .hero-inner > * {
	margin-left: auto;
	margin-right: auto;
}

.hero-eyebrow {
	font-family: var(--ui);
	font-weight: 700;
	font-size: clamp(0.68rem, 1.3vw, 0.8rem);
	letter-spacing: 0.38em;
	text-transform: uppercase;
	color: var(--surface-muted);
	margin: 0 0 0.8rem;
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

body.hero-full .hero-eyebrow {
	justify-content: center;
}

.hero-eyebrow::before {
	content: "";
	flex: none;
	width: 0.85rem;
	height: 0.5rem;
	background: var(--accent);
	transform: skewX(var(--band-angle));
}

body.hero-full .hero-eyebrow::after {
	content: "";
	flex: none;
	width: 0.85rem;
	height: 0.5rem;
	background: var(--accent);
	transform: skewX(var(--band-angle));
}

.hero-title {
	margin: 0;
	color: var(--surface-text);
	font-size: clamp(1.9rem, 4.4vw, 3.1rem);
	line-height: 1.04;
	letter-spacing: -0.015em;
}

body.hero-half .hero-title {
	font-size: clamp(2.4rem, 6.4vw, 4.6rem);
	line-height: 1.0;
}

body.hero-full .hero-title {
	font-size: clamp(2.6rem, 8.4vw, 6.5rem);
	line-height: 0.98;
}

/* meta row: reading time, updated date */
.hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.9rem;
	margin-top: 0.6rem;
	font-family: var(--ui);
	font-weight: 500;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--surface-muted);
}

body.hero-full .hero-meta {
	justify-content: center;
}

.hero-meta-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

.hero-meta-item svg {
	width: 1.05em;
	height: 1.05em;
	flex: none;
	opacity: 0.85;
}

.hero-meta-item + .hero-meta-item::before {
	content: "";
	position: absolute;
	left: -1.25rem;
	top: 50%;
	width: 0.45rem;
	height: 0.85em;
	background: var(--accent);
	transform: translateY(-52%) skewX(var(--band-angle));
}

/* scroll cue — only useful on tall heroes */
.hero-scroll {
	display: none;
}

body.hero-half .hero-scroll,
body.hero-full .hero-scroll {
	position: absolute;
	left: 50%;
	bottom: 1.8rem;
	transform: translateX(-50%);
	z-index: 2;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	color: var(--surface-text);
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	opacity: 0.7;
	transition: opacity var(--dur) var(--ease);
}

.hero-scroll:hover {
	opacity: 1;
	color: var(--surface-text);
}

.hero-scroll .arrow {
	width: 2px;
	height: 2.4rem;
	background: linear-gradient(var(--surface-text), transparent);
	transform: skewX(var(--band-angle));
	animation: hero-drop 2.2s var(--ease) infinite;
}

@keyframes hero-drop {
	0%   { transform: skewX(var(--band-angle)) translateY(0); opacity: 1; }
	70%  { transform: skewX(var(--band-angle)) translateY(0.6rem); opacity: 0.2; }
	100% { transform: skewX(var(--band-angle)) translateY(0.6rem); opacity: 0; }
}

/* custom logo in the top bar */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.custom-logo {
	max-height: 2.2rem;
	width: auto;
	display: block;
}

/*--------------------------------------------------------------
8. Entry content
--------------------------------------------------------------*/
.site-content {
	position: relative;
	z-index: 2;
	background: var(--light);
}

.entry-inner {
	padding: var(--space-content-top) 1.5rem var(--space-content-bottom);
}

.entry-content {
	max-width: var(--measure);
	margin: 0 auto;
}

.entry-content > * {
	margin-left: auto;
	margin-right: auto;
}

/* lead paragraph with a red drop cap */
.entry-content > p:first-child {
	font-size: 1.4rem;
	line-height: 1.55;
}

body.has-dropcap .entry-content > p:first-child::first-letter {
	font-family: var(--display);
	color: var(--accent);
	float: left;
	font-size: 4.4rem;
	line-height: 0.82;
	padding: 0.08em 0.14em 0 0;
}

/* section headings: h2 carries the band marker */
.entry-content h2 {
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	margin: var(--space-section) 0 1.15rem;
	padding-top: 1.8rem;
	position: relative;
}

.entry-content h2:first-child {
	margin-top: 0;
}

.entry-content h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3.2rem;
	height: 1.05rem;
	background: var(--accent);
	transform: skewX(var(--band-angle));
}

.entry-content h3 {
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.14em;
	margin: 3rem 0 1.2rem;
	color: var(--dark);
}

.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.18em;
	color: var(--muted);
	margin: 2.4rem 0 1rem;
}

.entry-content a {
	color: var(--dark);
	background-image: linear-gradient(var(--accent), var(--accent));
	background-repeat: no-repeat;
	background-size: 100% 2px;
	background-position: 0 100%;
	transition: color var(--dur) var(--ease), background-size var(--dur) var(--ease);
	padding-bottom: 1px;
}

.entry-content a:hover,
.entry-content a:focus-visible {
	background-size: 100% 100%;
	color: #fff;
}

.entry-content strong {
	color: var(--dark);
}

/* links that wrap images (banners) must not get the underline/fill */
.entry-content a:has(img) {
	background-image: none;
	padding-bottom: 0;
}

.entry-content center a,
.entry-content .code-block a,
.entry-content figure a {
	background-image: none;
	padding-bottom: 0;
}

/* lists with band ticks */
.entry-content ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1.6em;
}

.entry-content ul > li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.4em;
}

.entry-content ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.7rem;
	height: 0.42rem;
	background: var(--accent);
	transform: skewX(var(--band-angle));
}

.entry-content ol {
	padding-left: 1.4rem;
	margin: 0 0 1.6em;
}

.entry-content ol > li {
	padding-left: 0.4rem;
	margin-bottom: 0.55em;
}

.entry-content ol > li::marker {
	font-family: var(--ui);
	font-weight: 700;
	color: var(--accent);
}

/* pull quotes — the voice of the terrace */
.entry-content blockquote {
	margin: var(--space-block) auto;
	padding: 0.4rem 0 0.4rem 2rem;
	position: relative;
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.5;
	color: var(--dark);
}

.entry-content blockquote::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0.55rem;
	background: var(--accent);
	transform: skewX(var(--band-angle));
}

.entry-content blockquote p {
	margin-bottom: 0.6em;
}

.entry-content blockquote cite {
	display: block;
	margin-top: 0.8rem;
	font-family: var(--ui);
	font-style: normal;
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
}

/* end-of-article mark: three band ticks */
.entry-content::after {
	content: "";
	display: block;
	width: 3.4rem;
	height: 0.75rem;
	margin: calc(var(--space-block) + 1rem) auto 0;
	background: repeating-linear-gradient(
		90deg,
		var(--accent) 0,
		var(--accent) 0.7rem,
		transparent 0.7rem,
		transparent 1.35rem
	);
	transform: skewX(var(--band-angle));
}

/* wp block separators become quiet hairlines */
.entry-content hr,
.entry-content .wp-block-separator {
	border: 0;
	height: 1px;
	background: var(--line);
	margin: var(--space-block) auto;
	max-width: 10rem;
}

/*--------------------------------------------------------------
9. Media, tables, figures
--------------------------------------------------------------*/
/* Every content image is centered, regardless of what wraps it:
   <figure>, <p>, <a>, <picture>, <center>, plugin divs, inline styles.
   display:block collapses inline wrappers into an anonymous block that
   spans the text column, so the auto margins always have room to work.
   Explicit alignleft/alignright and emoji are the only exceptions. */
.entry-content img:not(.emoji):not(.wp-smiley):not(.alignleft):not(.alignright) {
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
	float: none;
}

.entry-content figure,
.entry-content .wp-block-image {
	margin: var(--space-block) auto;
	/* WP core makes <a> inside block images display:inline-block, which
	   shrink-wraps to the img and defeats auto margins — text-align
	   centers the shrink-wrapped anchor instead. */
	text-align: center;
}

/* legacy <center> tag (classic-editor banners) */
.entry-content center {
	display: block;
	text-align: center;
	margin: var(--space-block) auto;
}

/* classic alignment classes */
.entry-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.entry-content .alignleft {
	float: left;
	margin: 0.4rem 1.75rem 1rem 0;
}

.entry-content .alignright {
	float: right;
	margin: 0.4rem 0 1rem 1.75rem;
}

/* embeds inside centering wrappers */
.entry-content center iframe {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* wide media may break the measure */
.entry-content .alignwide {
	max-width: min(var(--wide), calc(100vw - 3rem));
}

.entry-content .alignfull {
	max-width: 100vw;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.entry-content figcaption,
.wp-caption-text {
	text-align: left;
	font-family: var(--ui);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--muted);
	margin-top: 0.8rem;
	padding-left: 1rem;
	position: relative;
}

.entry-content figcaption::before,
.wp-caption-text::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 0.45rem;
	height: 0.9em;
	background: var(--accent);
	transform: skewX(var(--band-angle));
}

/* stats tables */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--space-block) 0;
	font-family: var(--ui);
	font-size: 0.95rem;
	font-variant-numeric: lining-nums tabular-nums;
}

.entry-content th {
	background: var(--dark);
	color: var(--light);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: left;
	padding: 0.85rem 1rem;
}

.entry-content td {
	padding: 0.8rem 1rem;
	border-bottom: 1px solid var(--line);
}

.entry-content tbody tr:nth-child(even) td {
	background: rgba(0, 0, 0, 0.02);
}

.entry-content tbody tr:hover td {
	background: rgba(0, 0, 0, 0.045);
}

.entry-content tbody td:first-child {
	font-weight: 700;
	color: var(--dark);
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0.6rem;
	margin: 3rem 0;
}

.gallery .gallery-item {
	margin: 0;
}

/*--------------------------------------------------------------
9a-0. Full layout (default): generous centered measure, no TOC,
media and tables stretch across the container
--------------------------------------------------------------*/
body.layout-full {
	--wide: 90rem;
}

body.layout-full .page-toc {
	display: none !important;
}

body.layout-full .entry-inner {
	max-width: var(--wide);
	margin: 0 auto;
}

@media (min-width: 960px) {
	body.layout-full .entry-content {
		max-width: none;
		font-size: calc(var(--texto-size) * 1.05);
	}

	body.layout-full .entry-content > * {
		max-width: 56rem;
		margin-left: auto;
		margin-right: auto;
	}

	body.layout-full .entry-content > blockquote {
		max-width: 60rem;
	}

	body.layout-full .entry-content > center,
	/* third-party wrappers (Ad Inserter etc.) carry inline margin styles
	   that kill the auto-centering — !important is deliberate here */
	body.layout-full .entry-content > div,
	body.layout-full .entry-content > center {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.layout-full .entry-content > table,
	body.layout-full .entry-content > figure,
	body.layout-full .entry-content > .wp-block-image,
	body.layout-full .entry-content > .wp-block-table,
	body.layout-full .entry-content > details,
	body.layout-full .entry-content > .gallery,
	body.layout-full .entry-content > .wp-block-embed,
	body.layout-full .entry-content > .alignwide {
		max-width: none;
	}

	body.layout-full .hero-inner > * {
		max-width: 64rem;
	}
}

/*--------------------------------------------------------------
9a. Wide layout (full-width desktop)
--------------------------------------------------------------*/
body.layout-wide {
	--wide: 90rem;
}

@media (min-width: 1280px) {
	/* text keeps a readable measure, media stretches to the full column */
	body.layout-wide.toc-active .entry-inner {
		max-width: var(--wide);
		margin: 0 auto;
		display: grid;
		grid-template-columns: 15rem minmax(0, 1fr);
		column-gap: clamp(3rem, 5vw, 5.5rem);
		justify-content: stretch;
	}

	body.layout-wide.toc-active .entry-content {
		max-width: none;
	}

	body.layout-wide.toc-active .entry-content > * {
		max-width: var(--measure);
		margin-left: 0;
		margin-right: auto;
	}

	body.layout-wide.toc-active .entry-content > blockquote {
		max-width: 54rem;
	}

	body.layout-wide.toc-active .entry-content > center,
	body.layout-wide.toc-active .entry-content > table,
	body.layout-wide.toc-active .entry-content > figure,
	body.layout-wide.toc-active .entry-content > .wp-block-image,
	body.layout-wide.toc-active .entry-content > .wp-block-table,
	body.layout-wide.toc-active .entry-content > details,
	body.layout-wide.toc-active .entry-content > .gallery,
	body.layout-wide.toc-active .entry-content > .wp-block-embed,
	body.layout-wide.toc-active .entry-content > .alignwide {
		max-width: none;
	}

	body.layout-wide.toc-active .entry-content > hr {
		margin-left: 0;
	}

	body.layout-wide .hero-inner > * {
		max-width: 64rem;
	}
}

/*--------------------------------------------------------------
9b. Sticky table of contents (desktop rail)
--------------------------------------------------------------*/
.page-toc {
	display: none;
}

@media (min-width: 1280px) {
	body.layout-reading.toc-active .entry-inner {
		display: grid;
		grid-template-columns: 15rem minmax(0, var(--measure));
		column-gap: 4.5rem;
		justify-content: center;
	}

	body.toc-active .entry-content,
	body.toc-active .entry-footer,
	body.toc-active .comments-area {
		grid-column: 2;
	}

	body.toc-active .page-toc {
		display: block;
		grid-column: 1;
		grid-row: 1 / span 8;
		align-self: start;
		position: sticky;
		top: calc(var(--bar) + 2.5rem);
		padding-top: 0.4rem;
	}

	.page-toc-title {
		font-family: var(--ui);
		font-weight: 700;
		font-size: 0.7rem;
		letter-spacing: 0.26em;
		text-transform: uppercase;
		color: var(--muted);
		margin: 0 0 1rem;
		padding-left: 1rem;
		position: relative;
	}

	.page-toc-title::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 0.45rem;
		height: 1.2em;
		background: var(--accent);
		transform: translateY(-52%) skewX(var(--band-angle));
	}

	.page-toc ul {
		list-style: none;
		margin: 0;
		padding: 0;
		border-left: 1px solid var(--line);
	}

	.page-toc a {
		display: block;
		padding: 0.42rem 0 0.42rem 1rem;
		font-family: var(--ui);
		font-weight: 500;
		font-size: 0.86rem;
		line-height: 1.4;
		color: var(--muted);
		border-left: 2px solid transparent;
		margin-left: -1.5px;
		transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
	}

	.page-toc a:hover,
	.page-toc a:focus-visible {
		color: var(--dark);
	}

	.page-toc a.is-current {
		color: var(--accent);
		border-left-color: var(--accent);
	}
}

/*--------------------------------------------------------------
9c. Buttons, accordion, highlight
--------------------------------------------------------------*/
.entry-content .wp-block-button__link,
.entry-content .banda-button {
	display: inline-block;
	background: var(--accent);
	color: #fff;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1rem 2.2rem;
	border: 0;
	border-radius: 0;
	transform: skewX(var(--band-angle));
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
	background-image: none;
}

.entry-content .wp-block-button__link:hover,
.entry-content .banda-button:hover {
	background: var(--accent-dark);
	color: #fff;
	transform: skewX(var(--band-angle)) translateY(-2px);
	background-size: auto;
}

.entry-content .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--dark);
	box-shadow: inset 0 0 0 2px var(--dark);
}

.entry-content .is-style-outline .wp-block-button__link:hover {
	background: var(--dark);
	color: #fff;
}

/* FAQ accordion via the core details block */
.entry-content details {
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	background: #fff;
	margin: 0 0 0.8rem;
	padding: 0;
}

body.scheme-dark .entry-content details {
	background: transparent;
}

.entry-content summary {
	cursor: pointer;
	list-style: none;
	padding: 1.05rem 3rem 1.05rem 1.25rem;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1rem;
	position: relative;
	transition: color var(--dur) var(--ease);
}

.entry-content summary::-webkit-details-marker {
	display: none;
}

.entry-content summary::after {
	content: "";
	position: absolute;
	right: 1.25rem;
	top: 50%;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--dur) var(--ease);
}

.entry-content details[open] summary::after {
	transform: translateY(-30%) rotate(225deg);
}

.entry-content summary:hover {
	color: var(--accent);
}

.entry-content details > *:not(summary) {
	padding: 0 1.25rem;
}

.entry-content details > *:last-child {
	padding-bottom: 1.1rem;
}

/* text highlight */
.entry-content mark {
	background: linear-gradient(100deg, transparent 0.18em, color-mix(in srgb, var(--accent) 18%, transparent) 0.18em);
	color: inherit;
	padding: 0.05em 0.25em;
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.entry-content mark {
		background: rgba(214, 0, 28, 0.14);
	}
}

/*--------------------------------------------------------------
10. Comments (minimal)
--------------------------------------------------------------*/
.comments-area {
	max-width: var(--measure);
	margin: 4rem auto 0;
	padding-top: 3rem;
	border-top: 1px solid var(--line);
}

.comments-title,
.comment-reply-title {
	font-size: 1.3rem;
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .comment {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--line);
}

.comment-author {
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.95rem;
}

.comment-metadata {
	font-family: var(--ui);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.comment-metadata a {
	color: var(--muted);
}

.comment-form label {
	display: block;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.search-field {
	width: 100%;
	border: 1px solid var(--line);
	background: #fff;
	padding: 0.8rem 1rem;
	font-family: var(--texto);
	font-size: 1rem;
	color: var(--dark);
}

.comment-form input:focus,
.comment-form textarea:focus,
.search-field:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}

input[type="submit"],
button[type="submit"],
.search-submit {
	display: inline-block;
	background: var(--accent);
	color: #fff;
	border: 0;
	cursor: pointer;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 0.95rem 2rem;
	transform: skewX(var(--band-angle));
	transition: background-color var(--dur) var(--ease);
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.search-submit:hover {
	background: var(--accent-dark);
}

/*--------------------------------------------------------------
11. Footer
--------------------------------------------------------------*/
.site-footer {
	position: relative;
	background: var(--surface);
	color: var(--surface-muted);
	text-align: center;
	padding: clamp(2.75rem, 5vw, 3.75rem) 1.5rem 2.75rem;
	overflow: hidden;
	border-top: 1px solid var(--surface-line);
}

/* band divider at the very top edge of the footer */
.site-footer::before {
	content: "";
	position: absolute;
	top: -0.6rem;
	left: -6%;
	width: 112%;
	height: 1.3rem;
	background: var(--accent);
	transform: rotate(calc(var(--band-angle) / 4));
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 2.5rem 3.5rem;
	max-width: var(--wide);
	margin: 0 auto 3.25rem;
	text-align: left;
	font-family: var(--ui);
	font-size: 0.9rem;
	line-height: 1.7;
}

.footer-widgets .widget-title {
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--surface-text);
	margin: 0 0 1rem;
	padding-left: 1rem;
	position: relative;
}

.footer-widgets .widget-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0.45rem;
	height: 1.2em;
	background: var(--accent);
	transform: translateY(-52%) skewX(var(--band-angle));
}

.footer-widgets ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-widgets li {
	margin-bottom: 0.45em;
}

.footer-widgets a {
	color: var(--surface-muted);
	transition: color var(--dur) var(--ease);
}

.footer-widgets a:hover,
.footer-widgets a:focus-visible {
	color: var(--accent);
}

.site-footer .site-info {
	font-family: var(--ui);
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

.site-footer a {
	color: var(--surface-text);
}

.site-footer a:hover {
	color: var(--accent);
}

.footer-mark {
	display: block;
	margin: 0 auto 1.6rem;
	font-family: var(--display);
	font-size: 1.05rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--surface-text);
}

/*--------------------------------------------------------------
12. Progress bar, back-to-top, reveals
--------------------------------------------------------------*/
.progress-band {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	background: var(--accent);
	transform-origin: left center;
	transform: scaleX(0);
	z-index: 1000;
	pointer-events: none;
}

.back-to-top {
	position: fixed;
	right: 1.4rem;
	bottom: 1.4rem;
	z-index: 800;
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dark);
	color: var(--light);
	border: 0;
	cursor: pointer;
	transform: skewX(var(--band-angle)) translateY(1rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
	            visibility 0s linear var(--dur), background-color var(--dur) var(--ease);
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: skewX(var(--band-angle)) translateY(0);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
	            background-color var(--dur) var(--ease);
}

.back-to-top:hover {
	background: var(--accent);
}

.back-to-top svg {
	transform: skewX(calc(var(--band-angle) * -1));
}

/* scroll reveals */
.will-reveal {
	opacity: 0;
	transform: translateY(1.4rem);
	transition: opacity 640ms var(--ease), transform 640ms var(--ease);
}

.will-reveal.in-view {
	opacity: 1;
	transform: none;
}

/*--------------------------------------------------------------
12b. Themed scrollbar (desktop)
--------------------------------------------------------------*/
@media (min-width: 960px) {
	html {
		scrollbar-color: var(--line) var(--light);
		scrollbar-width: thin;
	}

	::-webkit-scrollbar {
		width: 12px;
	}

	::-webkit-scrollbar-track {
		background: var(--light);
	}

	::-webkit-scrollbar-thumb {
		background: var(--line);
		border: 3px solid var(--light);
		border-radius: 6px;
	}

	::-webkit-scrollbar-thumb:hover {
		background: var(--accent);
	}
}

/*--------------------------------------------------------------
13. Responsive
--------------------------------------------------------------*/
@media (max-width: 860px) {
	.site-menu-inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.site-description {
		display: none;
	}
}

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

	:root {
		--bar: 3.1rem;
	}

	.entry-content > p:first-child {
		font-size: 1.25rem;
	}

	.entry-content blockquote {
		font-size: 1.25rem;
		padding-left: 1.4rem;
	}

	.entry-content h2 {
		margin-top: calc(var(--space-section) * 0.85);
	}

	.hero {
		min-height: 88vh;
	}

	.entry-content table {
		display: block;
		overflow-x: auto;
	}
}

/*--------------------------------------------------------------
14. Reduced motion / print
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

	.will-reveal {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.site-header,
	.site-menu,
	.progress-band,
	.back-to-top,
	.hero-scroll {
		display: none;
	}

	.hero {
		min-height: auto;
		background: #fff;
		color: #000;
	}

	.hero::before,
	.hero::after {
		display: none;
	}

	.hero-title {
		color: #000;
	}
}

/*--------------------------------------------------------------
15. Archive / index fallback
--------------------------------------------------------------*/
body.plural .site-content {
	padding-top: calc(var(--bar) + 3rem);
}

body.plural .site-main {
	max-width: var(--measure);
	margin: 0 auto;
	padding: 2rem 1.5rem 4rem;
}

body.plural .hentry {
	padding: 2.5rem 0;
	border-bottom: 1px solid var(--line);
}

body.plural .entry-title {
	font-size: clamp(1.5rem, 3.5vw, 2.1rem);
	margin-bottom: 0.8rem;
}

body.plural .entry-title a {
	color: var(--dark);
	transition: color var(--dur) var(--ease);
}

body.plural .entry-title a:hover {
	color: var(--accent);
}

body.plural .entry-meta {
	font-family: var(--ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 1rem;
}

body.plural .entry-meta a {
	color: var(--muted);
}

body.plural .entry-meta a:hover {
	color: var(--accent);
}

.page-header .page-title {
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	padding-left: 1.2rem;
	position: relative;
}

.page-header .page-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.12em;
	width: 0.55rem;
	height: 0.9em;
	background: var(--accent);
	transform: skewX(var(--band-angle));
}

.pagination-links {
	max-width: var(--measure);
	margin: 0 auto 2.5rem;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}