/* fonts */
@font-face {
	font-family:"Exo 2";
	font-weight:400 700;
	font-style:normal;
	src:url("../fonts/exo2-var.woff2") format("woff2");
	font-display:swap;
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family:"Exo 2 Fallback";
	src:local("Arial");
	size-adjust:100.48%;
	ascent-override:99.50%;
	descent-override:19.90%;
}
@font-face {
	font-family:"Titillium Web";
	font-weight:400;
	font-style:normal;
	src:url("../fonts/titillium-400.woff2") format("woff2");
	font-display:swap;
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family:"Titillium Web Fallback";
	src:local("Arial");
	size-adjust:93.06%;
	ascent-override:121.40%;
	descent-override:41.90%;
}
@font-face {
	font-family:"Titillium Web";
	font-weight:600;
	font-style:normal;
	src:url("../fonts/titillium-600.woff2") format("woff2");
	font-display:swap;
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* tokens */
:root {
	--c-bg: #F2F4F6;
	--c-cell: #E6EAED;
	--c-grid: #1A1F24;
	--c-line-soft: #D2D8DD;
	--c-text: #14181C;
	--c-muted: #677179;
	--c-accent: #1E6890;
	--c-signal: #B33A22;
	--c-on-signal: #FFFFFF;

	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-gutter: clamp(16px, 4vw, 48px);
	--s-head: 72px;
	--s-band-1: clamp(2.5rem, 5vw, 3.5rem);
	--s-band-2: clamp(3rem, 6vw, 4.5rem);
	--s-band-3: clamp(3.5rem, 7vw, 5.5rem);
	--s-band-4: clamp(4rem, 8vw, 6.5rem);
	--s-band-5: clamp(4.5rem, 9vw, 8rem);

	--f-head: "Exo 2", "Exo 2 Fallback", Arial, sans-serif;
	--f-body: "Titillium Web", "Titillium Web Fallback", Arial, sans-serif;
	--f-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

	--c-shadow: 0 18px 40px -22px rgba(20, 24, 28, 0.35), 0 4px 14px -8px rgba(20, 24, 28, 0.18);
}
@supports (color: oklch(0 0 0)) {
	:root {
		--c-accent: oklch(0.47 0.11 230);
	}
}

/* reset */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	scroll-padding-top: calc(var(--s-head) + 16px);
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;

	font-family: var(--f-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--c-text);

	background: var(--c-bg);
}
img {
	display: block;
	max-width: 100%;
	height: auto;
}
h1,
h2,
h3 {
	margin: 0;

	font-family: var(--f-head);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: normal;
}
h2 {
	font-size: clamp(1.45rem, 2.6vw, 2rem);
	text-transform: uppercase;
}
h3 {
	font-size: 1.2rem;
}
p {
	margin: 0 0 var(--s-4);
}
a {
	color: var(--c-accent);
	text-underline-offset: 3px;
}
a:hover {
	color: var(--c-text);
}
:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
}
.wrap {
	max-width: 1240px;

	margin-inline: auto;
	padding-inline: var(--s-gutter);
}
.mono {
	font-family: var(--f-mono);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
}

/* skip link */
.skip-link {
	position: absolute;
	top: 8px;
	left: 16px;
	z-index: 90;
	transform: translateY(-160%);

	display: inline-flex;
	align-items: center;
	min-height: 44px;

	padding: 0 var(--s-4);

	color: var(--c-on-signal);

	background: var(--c-grid);
}
.skip-link:focus {
	transform: none;
}

/* header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;

	height: var(--s-head);

	background: var(--c-bg);
	border-bottom: 2px solid var(--c-grid);
}
.head-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}
.brand-link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	min-height: 44px;

	font-family: var(--f-head);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--c-text);
	text-decoration: none;
	text-transform: uppercase;
}
.brand-link:hover {
	color: var(--c-accent);
}
.brand-mark {
	width: 30px;
	height: 30px;
}
.menu-toggle {
	display: none;
	align-items: center;
	gap: var(--s-2);
	min-height: 44px;
	min-width: 44px;

	padding: 0 var(--s-4);

	font-family: var(--f-mono);
	font-size: 0.875rem;
	color: var(--c-text);

	background: var(--c-bg);
	border: 2px solid var(--c-grid);
	border-radius: 999px;

	cursor: pointer;
}
.menu-toggle:hover {
	color: var(--c-bg);

	background: var(--c-grid);
}
.menu-bars {
	position: relative;

	display: block;
	width: 18px;
	height: 2px;

	background: currentColor;
}
.menu-bars::before,
.menu-bars::after {
	position: absolute;
	left: 0;

	width: 18px;
	height: 2px;

	background: currentColor;

	content: "";
}
.menu-bars::before {
	top: -6px;
}
.menu-bars::after {
	top: 6px;
}

/* nav */
.site-nav {
	position: fixed;
	top: 0;
	right: max(var(--s-gutter), calc((100vw - 1240px) / 2 + var(--s-gutter)));
	z-index: 60;

	display: flex;
	align-items: center;
	height: var(--s-head);
}
.nav-list {
	display: flex;
	gap: var(--s-1);

	margin: 0;
	padding: 0;

	list-style: none;
}
.nav-list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;

	padding: 0 var(--s-4);

	font-family: var(--f-head);
	font-weight: 500;
	color: var(--c-text);
	text-decoration: none;

	border: 2px solid transparent;
	border-radius: 999px;
}
.nav-list a:hover,
.nav-list a[aria-current="page"] {
	border-color: var(--c-grid);
}
.nav-list a:hover {
	color: var(--c-bg);

	background: var(--c-grid);
}

/* hero */
.hero {
	position: relative;
	overflow: hidden;
	overflow: clip;
	isolation: isolate;

	padding-block: var(--s-band-1);

	border-bottom: 2px solid var(--c-grid);
}
.hero-mark {
	position: absolute;
	bottom: -0.06em;
	left: -0.04em;
	z-index: -1;

	margin: 0;

	font-family: var(--f-head);
	font-size: clamp(5.5rem, 15vw, 15rem);
	font-weight: 700;
	line-height: 0.8;
	color: var(--c-line-soft);
	white-space: nowrap;

	pointer-events: none;
	user-select: none;
}
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4rem);
}
.hero-copy {
	padding-left: clamp(0px, 5vw, 80px);
}
.hero-tag {
	display: inline-block;

	margin-bottom: var(--s-4);
	padding: var(--s-1) var(--s-3);

	color: var(--c-text);

	background: var(--c-bg);
	border: 1px solid var(--c-grid);
	border-radius: 3px;
}
.hero h1 {
	max-width: 21ch;

	margin-bottom: var(--s-4);

	font-size: clamp(2rem, 3.6vw, 3rem);
}
.hero-lead {
	max-width: 46ch;

	font-size: 1.125rem;
}
.hero-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);

	margin: var(--s-5) 0 0;
	padding: 0;

	list-style: none;
}
.hero-facts li {
	display: inline-flex;
	align-items: center;
	min-height: 44px;

	padding: 0 var(--s-3);

	background: var(--c-bg);
	border: 1px solid var(--c-line-soft);
	border-left: 3px solid var(--c-accent);
	border-radius: 2px;
}
.hero-facts a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;

	color: var(--c-text);
}
.hero-figure {
	margin: 0;

	background: var(--c-bg);
	border: 2px solid var(--c-grid);
	box-shadow: var(--c-shadow);
}
.hero-figure img {
	width: 100%;
	max-height: clamp(260px, 56vh, 560px);

	object-fit: cover;
}
.hero-figure figcaption {
	padding: var(--s-2) var(--s-3);

	color: var(--c-text);

	border-top: 2px solid var(--c-grid);
}

/* buttons */
.btn-signal,
.btn-line {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;

	padding: 0 var(--s-6);

	font-family: var(--f-head);
	font-size: 1.05rem;
	font-weight: 500;
	text-decoration: none;

	border: 2px solid var(--c-grid);
	border-radius: 999px;

	cursor: pointer;
}
.btn-signal {
	color: var(--c-on-signal);

	background: var(--c-signal);
	border-color: var(--c-signal);
}
.btn-signal:hover {
	color: var(--c-on-signal);

	background: var(--c-grid);
	border-color: var(--c-grid);
}
.btn-line {
	color: var(--c-text);

	background: var(--c-bg);
}
.btn-line:hover {
	color: var(--c-bg);

	background: var(--c-grid);
}

/* bands */
.band {
	padding-top: var(--s-band-1);
	padding-bottom: var(--s-band-1);
}
.band-tint {
	background: var(--c-cell);
	border-top: 2px solid var(--c-grid);
	border-bottom: 2px solid var(--c-grid);
}
.band-2 {
	padding-top: var(--s-band-2);
	padding-bottom: var(--s-band-2);
}
.band-3 {
	padding-top: var(--s-band-3);
	padding-bottom: var(--s-band-3);
}
.band-4 {
	padding-top: var(--s-band-4);
	padding-bottom: var(--s-band-4);
}
.band-5 {
	padding-top: var(--s-band-5);
	padding-bottom: var(--s-band-5);
}
.sec-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	align-items: end;
	gap: var(--s-5);

	margin-bottom: var(--s-6);
	padding-top: var(--s-4);

	border-top: 2px solid var(--c-grid);
}
.sec-head p {
	margin: 0;
}
.sec-num {
	display: block;

	margin-bottom: var(--s-2);

	color: var(--c-accent);
}

/* ledger */
.ledger {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));

	margin: 0;
	padding: 0;

	list-style: none;

	border-top: 2px solid var(--c-grid);
	border-left: 2px solid var(--c-grid);
}
.ledger-cell {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);

	padding: var(--s-5);

	background: var(--c-bg);
	border-right: 2px solid var(--c-grid);
	border-bottom: 2px solid var(--c-grid);
}
.ledger-cell:hover {
	color: var(--c-bg);

	background: var(--c-grid);
}
.ledger-cell:hover .ledger-label {
	color: var(--c-bg);
}
.ledger-figure {
	font-family: var(--f-head);
	font-size: clamp(2.8rem, 5vw, 4.2rem);
	font-weight: 500;
	line-height: 1;
}
.ledger-label {
	color: var(--c-accent);
}
.ledger-cell p {
	margin: 0;
}

/* layers path */
.layers {
	position: relative;
}
.layers-svg {
	display: block;
	width: 100%;
	height: 120px;

	margin-bottom: calc(var(--s-6) * -1);
}
.layers-svg path {
	fill: none;
	stroke: var(--c-accent);
	stroke-width: 3;
	stroke-dasharray: 10 8;
}
.layers-svg circle {
	fill: var(--c-bg);
	stroke: var(--c-grid);
	stroke-width: 3;
}
.dyn .layers-svg .path-line {
	stroke-dasharray: 1400;
	stroke-dashoffset: 1400;

	transition: stroke-dashoffset 1.6s ease-out;
}
.dyn .layers.revealed .path-line {
	stroke-dashoffset: 0;
}
.layer-stops {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-5);

	margin: 0;
	padding: 0;

	list-style: none;
}
.layer-stop {
	position: relative;

	padding: var(--s-7) var(--s-5) var(--s-5);

	background: var(--c-bg);
	border: 2px solid var(--c-grid);
	border-radius: 3px;
	box-shadow: var(--c-shadow);
}
.layer-step {
	display: block;

	margin-bottom: var(--s-2);

	color: var(--c-accent);
}
.layer-stop h3 {
	margin-bottom: var(--s-3);
}
.layer-links {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);

	margin: var(--s-4) 0 0;
	padding: var(--s-3) 0 0;

	list-style: none;

	border-top: 1px solid var(--c-line-soft);
}
.layer-links a {
	display: flex;
	align-items: center;
	min-height: 44px;

	font-weight: 600;
}
.layers-note {
	max-width: 62ch;

	margin: var(--s-6) 0 0;
	padding: var(--s-4) var(--s-5);

	background: var(--c-cell);
	border-left: 4px solid var(--c-accent);
	border-radius: 2px;
}

/* playbill */
.playbill {
	margin: 0;
	padding: 0;

	list-style: none;

	border-top: 2px solid var(--c-grid);
}
.playbill-row {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s-4);

	padding: var(--s-4) var(--s-3);

	background: var(--c-bg);
	border-bottom: 2px solid var(--c-grid);
}
.playbill-row:hover {
	color: var(--c-bg);

	background: var(--c-grid);
}
.playbill-row:hover a,
.playbill-row:hover .play-meta {
	color: var(--c-bg);
}
.play-num {
	font-family: var(--f-head);
	font-size: 2rem;
	line-height: 1;
	color: var(--c-accent);
}
.play-name {
	margin: 0 0 var(--s-1);

	font-size: 1.15rem;
}
.play-use {
	margin: 0;
}
.play-meta {
	display: block;

	color: var(--c-muted);
}
.play-price {
	font-family: var(--f-head);
	font-size: 1.2rem;
	font-weight: 500;
}
.play-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;

	padding: 0 var(--s-4);

	font-weight: 600;
	text-decoration: none;

	border: 2px solid currentColor;
	border-radius: 999px;
}
.playbill-foot {
	margin: var(--s-4) 0 0;

	color: var(--c-muted);
}

/* service cells */
.service-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	margin-top: var(--s-6);

	border-top: 2px solid var(--c-grid);
	border-left: 2px solid var(--c-grid);
}
.service-cell {
	padding: var(--s-5);

	background: var(--c-cell);
	border-right: 2px solid var(--c-grid);
	border-bottom: 2px solid var(--c-grid);
}
.service-cell h3 {
	margin-bottom: var(--s-2);
}
.service-cell p {
	margin: 0;
}
.service-price {
	display: block;

	margin-bottom: var(--s-2);

	color: var(--c-accent);
}

/* faq */
.faq-list {
	display: grid;
	gap: var(--s-3);
}
.faq-item {
	background: var(--c-bg);
	border: 2px solid var(--c-grid);
	border-radius: 3px;
	box-shadow: var(--c-shadow);
}
.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	min-height: 56px;

	padding: var(--s-3) var(--s-5);

	font-family: var(--f-head);
	font-size: 1.1rem;
	font-weight: 500;

	cursor: pointer;
	list-style: none;
}
.faq-item summary::-webkit-details-marker {
	display: none;
}
.faq-item summary::after {
	flex: none;

	font-family: var(--f-mono);
	font-size: 1.3rem;
	color: var(--c-accent);

	content: "+";
}
.faq-item[open] summary::after {
	content: "\2212";
}
.faq-item summary:hover {
	color: var(--c-bg);

	background: var(--c-grid);
}
.faq-body {
	padding: 0 var(--s-5) var(--s-4);
}
.faq-body p {
	margin: 0;
}

/* people */
.people-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}
.people-figure {
	margin: 0;

	background: var(--c-bg);
	border: 2px solid var(--c-grid);
	box-shadow: var(--c-shadow);
}
.people-figure img {
	width: 100%;
}
.people-figure figcaption {
	padding: var(--s-2) var(--s-3);

	border-top: 2px solid var(--c-grid);
}
.voices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-5);

	margin-top: var(--s-7);
}
.voice {
	margin: 0;
	padding: var(--s-5);

	background: var(--c-bg);
	border-top: 4px solid var(--c-accent);
	border-radius: 3px;
	box-shadow: var(--c-shadow);
}
.voice p {
	margin-bottom: var(--s-3);
}
.voice footer {
	color: var(--c-muted);
}

/* closing band */
.closing {
	color: var(--c-bg);

	background: var(--c-grid);
}
.closing-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--s-6);
}
.closing h2 {
	margin-bottom: var(--s-4);
}
.closing p {
	max-width: 52ch;
}
.closing-box {
	padding: var(--s-5);

	border: 2px solid var(--c-line-soft);
	border-radius: 3px;
}
.closing-box a:not(.btn-signal) {
	color: var(--c-bg);
}
.closing-lines {
	margin: 0 0 var(--s-5);
	padding: 0;

	list-style: none;
}
.closing-lines li {
	padding: var(--s-2) 0;

	border-bottom: 1px solid var(--c-muted);
}

/* page head */
.page-head {
	padding-top: var(--s-band-1);
	padding-bottom: var(--s-6);

	border-bottom: 2px solid var(--c-grid);
}
.page-head h1 {
	max-width: 24ch;

	margin-bottom: var(--s-3);

	font-size: clamp(1.9rem, 3.4vw, 2.75rem);
}
.page-head p {
	max-width: 62ch;

	margin: 0;
}
.crumb {
	display: inline-block;

	margin-bottom: var(--s-3);

	color: var(--c-accent);
}

/* catalog */
.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);

	margin-bottom: var(--s-5);
}
.filter-btn {
	min-height: 44px;

	padding: 0 var(--s-4);

	font-family: var(--f-mono);
	font-size: 0.9rem;
	color: var(--c-text);

	background: var(--c-bg);
	border: 2px solid var(--c-grid);
	border-radius: 999px;

	cursor: pointer;
}
.filter-btn:hover,
.filter-btn[aria-pressed="true"] {
	color: var(--c-bg);

	background: var(--c-grid);
}
html:not(.dyn) .filter-bar {
	display: none;
}
.catalog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-5);

	margin: 0;
	padding: 0;

	list-style: none;
}
.catalog-grid > [hidden] {
	display: none;
}
.prenda-card {
	display: flex;
	flex-direction: column;

	background: var(--c-bg);
	border: 2px solid var(--c-grid);
	box-shadow: var(--c-shadow);
}
.prenda-card img {
	width: 100%;

	border-bottom: 2px solid var(--c-grid);
}
.card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--s-2);

	padding: var(--s-4) var(--s-5) var(--s-5);
}
.card-body h3 {
	font-size: 1.2rem;
}
.card-body p {
	margin: 0;
}
.card-cat {
	color: var(--c-accent);
}
.card-price {
	font-family: var(--f-head);
	font-size: 1.3rem;
	font-weight: 500;
}
.card-body .btn-line {
	align-self: flex-start;

	margin-top: auto;
}
.how-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));

	margin: 0;
	padding: 0;

	list-style: none;

	border-top: 2px solid var(--c-grid);
	border-left: 2px solid var(--c-grid);
}
.how-step {
	padding: var(--s-5);

	background: var(--c-bg);
	border-right: 2px solid var(--c-grid);
	border-bottom: 2px solid var(--c-grid);
}
.how-step h3 {
	margin-bottom: var(--s-2);
}
.how-step p {
	margin: 0;
}
.how-num {
	display: block;

	margin-bottom: var(--s-2);

	font-family: var(--f-head);
	font-size: 2.4rem;
	line-height: 1;
	color: var(--c-accent);
}

/* prenda page */
.prenda-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4);

	margin-top: var(--s-4);
}
.prenda-price {
	font-family: var(--f-head);
	font-size: 1.6rem;
	font-weight: 500;
}
.prenda-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}
.prenda-figure {
	margin: 0;

	background: var(--c-bg);
	border: 2px solid var(--c-grid);
	box-shadow: var(--c-shadow);
}
.prenda-figure img {
	width: 100%;
	max-height: clamp(240px, 60vh, 640px);

	object-fit: cover;
}
.prenda-figure figcaption {
	padding: var(--s-2) var(--s-3);

	border-top: 2px solid var(--c-grid);
}
.spec-table {
	width: 100%;

	margin-bottom: var(--s-5);

	border-collapse: collapse;
	border: 2px solid var(--c-grid);
}
.spec-table caption {
	padding-bottom: var(--s-2);

	text-align: left;
}
.spec-table th,
.spec-table td {
	padding: var(--s-3);

	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;

	border-bottom: 1px solid var(--c-line-soft);
}
.spec-table th {
	width: 36%;

	font-weight: 600;

	background: var(--c-cell);
	border-right: 2px solid var(--c-grid);
}
.size-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1);

	margin: 0;
	padding: 0;

	list-style: none;
}
.size-chips li {
	padding: 0 var(--s-2);

	font-family: var(--f-mono);
	font-size: 0.875rem;

	border: 1px solid var(--c-grid);
	border-radius: 3px;
}
.care-box {
	margin-bottom: var(--s-5);
	padding: var(--s-5);

	background: var(--c-cell);
	border-left: 4px solid var(--c-accent);
	border-radius: 2px;
}
.care-box h2,
.prenda-story h2,
.pair-box h2 {
	margin-bottom: var(--s-3);

	font-size: 1.2rem;
}
.care-box ul {
	margin: 0;
	padding-left: 1.2rem;
}
.prenda-story {
	margin-bottom: var(--s-5);
}
.pair-box {
	padding: var(--s-5);

	border: 2px solid var(--c-grid);
	border-radius: 3px;
	box-shadow: var(--c-shadow);
}
.pair-box ul {
	margin: 0;
	padding: 0;

	list-style: none;
}
.pair-box a {
	display: flex;
	align-items: center;
	min-height: 44px;

	font-weight: 600;
}

/* contact */
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	grid-template-areas:
		"intro form"
		"facts form"
		"note note";
	align-items: start;
	gap: var(--s-5) clamp(1.5rem, 4vw, 3.5rem);
}
.contact-intro {
	grid-area: intro;
}
.contact-intro h1 {
	margin-bottom: var(--s-3);

	font-size: clamp(1.9rem, 3.4vw, 2.75rem);
}
.contact-intro p {
	margin: 0;
}
.form-card {
	grid-area: form;
}
.contact-dl {
	grid-area: facts;
}
.contact-dl address {
	font-style: normal;
}
.contact-note {
	grid-area: note;

	padding: var(--s-5);

	background: var(--c-cell);
	border-left: 4px solid var(--c-accent);
	border-radius: 2px;
}
.contact-note p:last-child {
	margin: 0;
}
.form-card {
	padding: var(--s-5);

	background: var(--c-bg);
	border: 2px solid var(--c-grid);
	border-radius: 3px;
	box-shadow: var(--c-shadow);
}
.field {
	margin-bottom: var(--s-4);
}
.field label {
	display: block;

	margin-bottom: var(--s-1);

	font-weight: 600;
}
.field input,
.field textarea {
	width: 100%;
	min-height: 48px;

	padding: var(--s-2) var(--s-3);

	font: inherit;
	color: var(--c-text);

	background: var(--c-bg);
	border: 2px solid var(--c-grid);
	border-radius: 3px;
}
.field textarea {
	min-height: 120px;

	resize: vertical;
}
.field-error {
	display: block;

	font-size: 0.95rem;
	color: var(--c-signal);
}
.field-error:empty {
	display: none;
}
.form-card .btn-signal {
	margin-top: var(--s-3);
}
.consent-row {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);

	margin-bottom: var(--s-2);
}
.consent-row input {
	width: 22px;
	height: 22px;
	flex: none;

	margin: 3px 0 0;

	accent-color: var(--c-accent);
}
.form-status {
	min-height: 1.4em;

	margin: var(--s-3) 0 0;

	font-weight: 600;
}
.legal-dl {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);

	margin: 0;

	border-top: 2px solid var(--c-grid);
	border-left: 2px solid var(--c-grid);
}
.legal-dl dt,
.legal-dl dd {
	margin: 0;
	padding: var(--s-2) var(--s-3);

	overflow-wrap: anywhere;

	border-right: 2px solid var(--c-grid);
	border-bottom: 2px solid var(--c-grid);
}
.legal-dl dt {
	font-weight: 600;

	background: var(--c-cell);
}
.legal-dl dd {
	background: var(--c-bg);
}
.after-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-5);
}
.after-card {
	padding: var(--s-5);

	background: var(--c-bg);
	border: 2px solid var(--c-grid);
	border-radius: 3px;
	box-shadow: var(--c-shadow);
}
.after-card h2 {
	margin-bottom: var(--s-2);

	font-size: 1.15rem;
}
.after-card p {
	margin: 0;
}

/* legal pages */
.legal-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	align-items: start;
	gap: clamp(1.5rem, 4vw, 3rem);
}
.toc {
	position: sticky;
	top: calc(var(--s-head) + 16px);

	padding: var(--s-4);

	background: var(--c-cell);
	border: 2px solid var(--c-grid);
	border-radius: 3px;
}
.toc ol {
	margin: 0;
	padding: 0;

	list-style: none;
}
.toc a {
	display: flex;
	align-items: center;
	min-height: 44px;

	color: var(--c-text);
}
.legal-body > section {
	margin-bottom: var(--s-7);
}
.legal-body h2 {
	margin-bottom: var(--s-4);
	padding-top: var(--s-3);

	font-size: clamp(1.25rem, 2.2vw, 1.6rem);

	border-top: 2px solid var(--c-grid);
}
.legal-body h3 {
	margin-bottom: var(--s-2);
}
.legal-table {
	width: 100%;

	border-collapse: collapse;
	border: 2px solid var(--c-grid);
}
.legal-table caption {
	padding-bottom: var(--s-2);

	text-align: left;
}
.legal-table th,
.legal-table td {
	padding: var(--s-3);

	text-align: left;
	vertical-align: top;

	border: 1px solid var(--c-line-soft);
}
.legal-table thead th {
	color: var(--c-bg);

	background: var(--c-grid);
}
.legal-table tbody th {
	background: var(--c-cell);
}
.legal-table.two-col td,
.legal-table.two-col th {
	overflow-wrap: anywhere;
}
.card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-4);
}
.term-card {
	padding: var(--s-5);

	background: var(--c-bg);
	border: 2px solid var(--c-grid);
	border-top: 6px solid var(--c-accent);
	border-radius: 3px;
	box-shadow: var(--c-shadow);
}
.term-card h3 {
	margin-bottom: var(--s-2);
}
.term-card p:last-child {
	margin: 0;
}
.term-tag {
	display: block;

	margin-bottom: var(--s-2);

	color: var(--c-accent);
}
.reset-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);

	padding: var(--s-5);

	background: var(--c-cell);
	border: 2px solid var(--c-grid);
	border-radius: 3px;
}
.reset-box p {
	max-width: 52ch;

	margin: 0;
}
.edit-date {
	margin-top: var(--s-2);

	color: var(--c-muted);
}
html:not(.dyn) .reset-btn {
	display: none;
}

/* service pages */
.next-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));

	border-top: 2px solid var(--c-grid);
	border-left: 2px solid var(--c-grid);
}
.next-cell {
	padding: var(--s-5);

	background: var(--c-bg);
	border-right: 2px solid var(--c-grid);
	border-bottom: 2px solid var(--c-grid);
}
.next-cell h2 {
	margin-bottom: var(--s-2);

	font-size: 1.15rem;
}
.next-cell p {
	margin: 0 0 var(--s-3);
}
.next-cell ul {
	margin: 0;
	padding: 0;

	list-style: none;
}
.next-cell li a {
	display: flex;
	align-items: center;
	min-height: 44px;

	font-weight: 600;
}

/* footer */
.site-footer {
	padding: var(--s-5) 0 var(--s-6);

	font-size: 0.95rem;
	color: var(--c-bg);

	background: var(--c-grid);
	border-top: 2px solid var(--c-grid);
}
.legal-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3) var(--s-5);
}
.legal-strip p {
	margin: 0;
}
.legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--s-4);

	margin: 0;
	padding: 0;

	list-style: none;
}
.legal-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;

	color: var(--c-bg);
}
.legal-links a:hover {
	color: var(--c-line-soft);
}

/* consent bar */
.aviso-privacidad {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 45;

	padding: var(--s-3) var(--s-gutter);

	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--c-text);

	background: var(--c-bg);
	border-top: 2px solid var(--c-grid);
	box-shadow: 0 -12px 30px -18px rgba(20, 24, 28, 0.45);
}
.aviso-privacidad[hidden] {
	display: none;
}
.aviso-row {
	display: flex;
	align-items: center;
	gap: var(--s-5);

	max-width: 1240px;

	margin-inline: auto;
}
.aviso-row p {
	flex: 1;

	margin: 0;
}
.aviso-actions {
	display: flex;
	flex: none;
	gap: var(--s-2);
}
.aviso-actions button {
	min-height: 44px;

	padding: 0 var(--s-5);

	font-family: var(--f-head);
	font-size: 0.98rem;
	font-weight: 500;
	color: var(--c-text);

	background: var(--c-bg);
	border: 2px solid var(--c-grid);
	border-radius: 999px;

	cursor: pointer;
}
.aviso-actions button:hover {
	color: var(--c-bg);

	background: var(--c-grid);
}

/* reveal */
.dyn .reveal {
	opacity: 0;
	transform: translateY(14px);

	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.dyn .reveal.revealed {
	opacity: 1;
	transform: none;
}

/* responsive */
@media (max-width: 1080px) {
	.ledger {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.playbill-row {
		grid-template-columns: 3rem minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	}
	.playbill-row .play-price,
	.playbill-row .play-link {
		grid-column: auto;
	}
	.voices,
	.catalog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 860px) {
	:root {
		--s-head: 64px;
	}
	.menu-toggle {
		display: inline-flex;
	}
	html:not(.dyn) .menu-toggle {
		display: none;
	}
	.dyn .site-nav {
		top: var(--s-head);
		right: 0;
		bottom: 0;
		left: 0;
		visibility: hidden;

		display: block;
		height: auto;

		padding: var(--s-5) var(--s-gutter);

		background: var(--c-bg);
		border-top: 2px solid var(--c-grid);
	}
	.dyn .site-nav.opened {
		visibility: visible;
	}
	html:not(.dyn) .site-nav {
		position: static;

		height: auto;

		padding: var(--s-2) var(--s-gutter);

		border-bottom: 2px solid var(--c-grid);
	}
	.dyn .nav-list {
		flex-direction: column;
		gap: var(--s-2);
	}
	.dyn .nav-list a {
		width: 100%;
		min-height: 56px;

		font-size: 1.3rem;

		border-color: var(--c-grid);
	}
	html:not(.dyn) .nav-list {
		flex-wrap: wrap;
	}
	.hero-grid,
	.sec-head,
	.people-grid,
	.closing-grid,
	.prenda-grid,
	.contact-grid,
	.legal-layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.contact-grid {
		grid-template-areas:
			"intro"
			"form"
			"note"
			"facts";
	}
	.hero-copy {
		padding-left: 0;
	}
	.layers-svg {
		display: none;
	}
	.layer-stops,
	.how-grid,
	.after-grid,
	.next-grid,
	.service-pair {
		grid-template-columns: minmax(0, 1fr);
	}
	.layer-stop {
		padding-top: var(--s-5);
	}
	.toc {
		position: static;
	}
	.aviso-row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--s-3);
	}
	.aviso-actions button {
		flex: 1;
	}
}
@media (max-width: 640px) {
	.ledger,
	.voices,
	.catalog-grid,
	.card-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.playbill-row {
		grid-template-columns: 2.6rem minmax(0, 1fr);
		gap: var(--s-2) var(--s-3);
	}
	.playbill-row > :nth-child(n+3) {
		grid-column: 2;
	}
	.legal-dl {
		grid-template-columns: minmax(0, 1fr);
	}
	.legal-dl dt {
		border-bottom-width: 1px;
	}
	.legal-table thead {
		display: none;
	}
	.legal-table tr,
	.legal-table th,
	.legal-table td {
		display: block;
		width: 100%;
	}
	.legal-table td::before {
		display: block;

		font-family: var(--f-mono);
		font-size: 0.8rem;
		color: var(--c-accent);

		content: attr(data-col);
	}
}
@media (prefers-reduced-motion: reduce) {
	.dyn .reveal,
	.dyn .layers-svg .path-line {
		transition: none;
	}
}