/*
Theme Name: Reformer Hour
Theme URI: https://reformer-hour.labs.fabrica.studio
Description: Block theme for reformer-hour.labs.fabrica.studio — a wall schedule with light. Poster archetype: condensed display type, visible rules of five weights, and the weekly table as a sheet pinned on a red wall. EN at /, ES at /es/. Built to be exported to plain static HTML.
Author: fabrica
Author URI: https://fabrica.studio
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: reformer-hour
Tags: block-theme, one-column, full-site-editing, translation-ready
*/

/* =========================================================================
   1. Tokens — concepts/pilates-studio/design.md
   Palette in OKLCH with roles; rule weights carry the hierarchy (radius is 0
   everywhere on purpose); two shadows only, each derived from its own ground.
   ========================================================================= */
:root {
	/* Ground */
	--bone: oklch(96.5% 0.009 85);
	--bone-light: oklch(98.5% 0.006 85);
	--bone-2: oklch(92.5% 0.012 85);
	/* Ground, pattern (the schedule grid extended to the page) */
	--grid: oklch(88.5% 0.018 85);
	--grid-2: oklch(85.5% 0.024 85);
	/* Ink */
	--ink: oklch(0% 0 0);
	--grey: oklch(42% 0.004 85);
	/* Signal: the red wall the sheet hangs on, and the one cell that is yours */
	--red: oklch(52% 0.205 30);
	--red-light: oklch(63% 0.215 38);
	--red-deep: oklch(44% 0.185 27);
	--red-grid: oklch(38% 0.16 27 / .55);
	/* Shadow colours, each derived from the ground it falls on */
	--oxblood: oklch(29% 0.12 24);
	--tan: oklch(84% 0.035 75);

	/* Type: display / text / data + the condensed interface face */
	--f-display: "Archivo Narrow", "Arial Narrow", "Archivo", sans-serif;
	--f-cond: "Archivo Narrow", "Arial Narrow", sans-serif;
	--f-mark: "Archivo Black", "Archivo", Impact, sans-serif;
	--f-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--f-data: "Chivo Mono", ui-monospace, SFMono-Regular, monospace;

	/* Rhythm */
	--pad: clamp(16px, 3.4vw, 48px);
	--s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px;
	--rule-1: 1px; --rule-2: 2px; --rule-3: 3px; --rule-4: 4px; --band: 14px;

	/* The background grid: one cell is one hour on one day */
	--cell-w: calc((100% - 2 * var(--pad)) / 12);
	--cell-h: 64px;

	--shadow-sheet: 14px 14px 0 var(--oxblood), 26px 40px 70px -14px oklch(29% 0.12 24 / .6);
	--shadow-print: 12px 12px 0 var(--tan), 20px 32px 56px -16px oklch(84% 0.035 75 / .95);
}

/* =========================================================================
   2. Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
	background-color: var(--bone);
	color: var(--ink);
	font-family: var(--f-text);
	-webkit-text-size-adjust: 100%;
	/* The schedule grid runs on behind everything, aligned to the H1 margin;
	   the light comes from the top left, the same window as the photographs. */
	background-image:
		linear-gradient(90deg, var(--grid-2) 1px, transparent 1px),
		linear-gradient(0deg, var(--grid-2) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px),
		linear-gradient(0deg, var(--grid) 1px, transparent 1px),
		radial-gradient(120% 70% at 0% 0%, var(--bone-light) 0%, var(--bone) 60%);
	background-size:
		calc(var(--cell-w) * 12) calc(var(--cell-h) * 4), calc(var(--cell-w) * 12) calc(var(--cell-h) * 4),
		var(--cell-w) var(--cell-h), var(--cell-w) var(--cell-h), 100% 100%;
	background-position: var(--pad) 0, var(--pad) 0, var(--pad) 0, var(--pad) 0, 0 0;
	background-attachment: fixed, fixed, fixed, fixed, scroll;
}
body { margin: 0; line-height: 1.45; font-size: 1.0625rem; background: transparent; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 3px;
}
img { max-width: 100%; height: auto; display: block; }
.vh {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.ic {
	width: 24px; height: 24px; flex: none;
	fill: none; stroke: currentColor; stroke-width: 2;
	stroke-linecap: butt; stroke-linejoin: miter;
	vertical-align: -.2em;
}

/* Skip link: it looks like a cell of the grid once it is focused. */
.skip {
	position: absolute; left: -9999px; top: 0; z-index: 20;
	background: var(--ink); color: var(--bone);
	font-family: var(--f-cond); font-weight: 700; font-size: 1rem;
	padding: 12px 20px; text-decoration: none;
}
.skip:focus { left: 0; }

/* =========================================================================
   3. Navigation — a thick bar between two rules (design.md › nav treatment)
   ========================================================================= */
.top { border-top: var(--rule-4) solid var(--ink); border-bottom: var(--rule-2) solid var(--ink); padding: var(--s1) 0; }
.bar {
	background: var(--ink); color: var(--bone);
	display: grid; grid-template-columns: auto 1fr auto; align-items: center;
	column-gap: var(--s4); min-height: 72px; padding: 0 var(--pad);
	box-shadow: inset 0 1px 0 oklch(32% 0.004 85);
}
.bar a { text-decoration: none; }
.bar a:focus-visible { outline-color: var(--bone); }
.mark { font-family: var(--f-mark); font-weight: 400; font-size: 1.375rem; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.links { list-style: none; margin: 0; padding: 0; display: flex; justify-self: center; }
.links li + li { border-left: 1px solid var(--bone); }
.links a { display: block; font-family: var(--f-cond); font-weight: 600; font-size: 1.0625rem; line-height: 1; padding: 12px 20px; }
.links a:hover { background: var(--bone); color: var(--ink); }
.bar .cta {
	font-family: var(--f-cond); font-weight: 700; font-size: 1.0625rem; line-height: 1;
	border: 2px solid var(--bone); padding: 12px 20px; white-space: nowrap;
}
.bar .cta:hover { background: var(--bone); color: var(--ink); }

/* =========================================================================
   4. Hero — the H1, then the red wall with the sheet pinned on it
   ========================================================================= */
.hero h1 {
	font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(3rem, 16vw, 12rem); line-height: .86; letter-spacing: -.045em;
	margin: 0; padding: var(--s2) var(--pad) var(--s1);
	/* The red wall bounces light back up onto the bone, right above the band. */
	background:
		radial-gradient(56% 54% at 4% 100%, oklch(86% 0.085 42 / .6) 0%, transparent 100%),
		linear-gradient(0deg, oklch(89% 0.065 45 / .55) 0%, oklch(89% 0.065 45 / 0) 46%);
}
.hero h1 .inv {
	display: inline-block; background: var(--ink); color: var(--bone);
	line-height: .86; padding: 0 .07em 0 .06em; margin-right: -.03em; vertical-align: baseline;
}

.wall {
	--inset: var(--pad);
	border-top: var(--band) solid var(--ink);
	padding: var(--s5) var(--inset) calc(var(--s5) + 14px);
	box-shadow: inset 0 1px 0 oklch(72% 0.2 40 / .55);
	background-color: var(--red);
	background-image:
		linear-gradient(90deg, var(--red-grid) 1px, transparent 1px),
		linear-gradient(0deg, var(--red-grid) 1px, transparent 1px),
		radial-gradient(110% 85% at 4% -8%, var(--red-light) 0%, var(--red) 44%, var(--red-deep) 100%);
	background-size: var(--cell-w) var(--cell-h), var(--cell-w) var(--cell-h), 100% 100%;
	background-position: var(--pad) 0, var(--pad) 0, 0 0;
}
.sheet {
	--pad: clamp(14px, 2vw, 28px);
	background: var(--bone);
	border-top: var(--rule-4) solid var(--ink);
	box-shadow: inset 0 1px 0 oklch(100% 0 0 / .9), var(--shadow-sheet);
	min-width: 0;
}

.lede { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; border-bottom: var(--rule-2) solid var(--ink); }
.lede > * { margin: 0; padding: var(--s3) var(--pad); }
.lede > * + * { border-left: var(--rule-1) solid var(--ink); }
.sub { font-size: clamp(1.125rem, 1.7vw, 1.5rem); line-height: 1.3; max-width: 32ch; }
.micro {
	font-family: var(--f-cond); font-weight: 500; font-size: 1.125rem; line-height: 1.3;
	color: var(--grey); display: flex; gap: 10px; align-items: flex-start;
}
.micro .ic { width: 22px; height: 22px; margin-top: -1px; }
.go { display: flex; align-items: center; }

/* The one button with relief: light on its top edge, a shadow of its own colour. */
.cta-red {
	background: var(--red); color: var(--bone); text-decoration: none;
	font-family: var(--f-cond); font-weight: 700; font-size: 1.5rem; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 22px 44px; border: 0; cursor: pointer;
	box-shadow: inset 0 1px 0 oklch(70% 0.2 38), 0 16px 32px -12px oklch(52% 0.205 30 / .7);
	transition: background-color 150ms, box-shadow 150ms;
}
.cta-red:hover { background: var(--ink); box-shadow: inset 0 1px 0 oklch(32% 0.004 85), 0 16px 32px -12px oklch(29% 0.12 24 / .5); }

/* =========================================================================
   5. Signature — the weekly sheet
   ========================================================================= */
.cap { display: flex; align-items: baseline; gap: var(--s2) var(--s3); flex-wrap: wrap; padding: var(--s2) var(--pad); }
.cap h2 {
	font-family: var(--f-cond); font-weight: 700; font-size: clamp(1.375rem, 2vw, 1.75rem);
	line-height: 1; margin: 0; display: flex; align-items: center; gap: 10px;
	text-transform: none; letter-spacing: 0;
}
.cap p { margin: 0 0 0 auto; font-size: .9375rem; color: var(--grey); }
.tag {
	font-family: var(--f-data); font-weight: 700; font-size: .8125rem; line-height: 1;
	color: var(--red); border: 2px solid var(--red); padding: 4px 8px; white-space: nowrap; align-self: center;
}
.sheet > .hint { display: none; margin: 0; padding: 0 var(--pad) var(--s2); font-family: var(--f-cond); font-size: .9375rem; color: var(--grey); }

.scroll { position: relative; overflow-x: auto; border-bottom: var(--rule-2) solid var(--ink); }
.week { border-collapse: separate; border-spacing: 0; width: 100%; font-family: var(--f-cond); font-variant-numeric: tabular-nums lining; }
.week th, .week td {
	border-right: var(--rule-1) solid var(--ink); border-bottom: var(--rule-1) solid var(--ink);
	padding: 12px 14px; text-align: left; vertical-align: top; min-width: 128px;
}
.week tr > :last-child { border-right: 0; }
.week thead th { background: var(--ink); color: var(--bone); font-weight: 700; font-size: 1.375rem; line-height: 1; padding: 16px 14px; border-color: var(--ink); }
.week thead th:first-child { position: sticky; left: 0; z-index: 2; min-width: 0; width: calc(var(--pad) + 76px); }
.week thead th:first-child, .week th[scope="row"], .week th[scope="rowgroup"] { padding-left: var(--pad); }
.week th[scope="row"] {
	font-family: var(--f-data); font-variant-numeric: tabular-nums lining;
	font-size: 1.3125rem; letter-spacing: -.02em; font-weight: 700; line-height: 1;
	width: calc(var(--pad) + 76px); min-width: 0; position: sticky; left: 0; background: var(--bone); z-index: 2;
}
.week th[scope="rowgroup"] {
	background: var(--bone-2); font-weight: 600; font-size: .875rem; line-height: 1; color: var(--grey);
	padding-top: 7px; padding-bottom: 7px; position: sticky; left: 0; z-index: 1;
}
.week tbody:not(:last-of-type) tr:last-child > * { border-bottom-width: var(--rule-3); }
.cls { display: block; font-weight: 600; font-size: 1.0625rem; line-height: 1.1; }
.who { display: block; font-family: var(--f-text); font-size: .8125rem; line-height: 1.2; color: var(--grey); margin-top: 3px; }
.beds { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 12px; font-weight: 600; font-size: .875rem; line-height: 1; font-variant-numeric: tabular-nums lining; }
.beds .lbl { font-family: var(--f-data); font-weight: 400; font-size: .8125rem; letter-spacing: -.01em; }
.full .lbl, .mine .lbl { font-weight: 700; }
.lbl { white-space: nowrap; }
.sq { display: inline-flex; gap: 3px; }
.sq i { display: block; width: 10px; height: 10px; border: 1.5px solid currentColor; }
.sq i.t { background: currentColor; }
.full .cls, .full .who, .full .lbl { color: var(--grey); }
.none { background: var(--bone-2); }
.mine {
	background: var(--red); color: var(--bone); position: relative; z-index: 1;
	box-shadow: 0 0 0 2px var(--red), 0 14px 30px -6px oklch(52% 0.205 30 / .55);
}
.mine .cls { font-weight: 700; }
.mine .who { color: var(--bone); }

.legend {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
	list-style: none; margin: 0; padding: var(--s2) var(--pad);
	font-family: var(--f-data); font-weight: 400; font-size: .875rem; letter-spacing: -.01em; line-height: 1.2;
	font-variant-numeric: tabular-nums lining;
}
.legend li { display: flex; align-items: center; gap: 8px; }
.legend .sq i { width: 12px; height: 12px; }
.legend .k-mine i { background: var(--red); border-color: var(--red); }
.legend .note { margin-left: auto; font-family: var(--f-text); font-weight: 400; color: var(--grey); gap: 10px; }

/* =========================================================================
   6. Sections — every one opens on a rule; the weight says what it opens
   ========================================================================= */
.sec { padding: var(--s4) var(--pad) var(--s5); border-top: var(--rule-4) solid var(--ink); }
.sec > h2 {
	font-family: var(--f-display); text-transform: uppercase; font-weight: 700;
	font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: .9; letter-spacing: -.02em; margin: 0 0 var(--s4);
}
.sec > .note { margin: calc(-1 * var(--s3)) 0 var(--s4); font-family: var(--f-cond); font-size: 1.0625rem; color: var(--grey); }

/* 6.1 Three rules + the 4:5 photograph */
.rules { border-bottom: var(--band) solid var(--ink); padding-bottom: var(--s6); }
.rules-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 30%); gap: var(--s5); align-items: start; }
.rl { margin: 0; }
.rl > div { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: var(--s3); border-top: var(--rule-1) solid var(--ink); padding: var(--s4) 0; }
.rl > div:first-child { border-top-width: var(--rule-2); }
.rl > div:last-child { border-bottom: var(--rule-2) solid var(--ink); }
.rl dt {
	font-family: var(--f-display); font-weight: 700; font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	line-height: 1; letter-spacing: -.01em; display: grid; grid-template-columns: 1em minmax(0, 1fr); gap: .3em; align-items: start;
}
.rl dt .ic { width: 1em; height: 1em; margin-top: .02em; }
.rl dd { margin: 0; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.4; max-width: 46ch; }

/* The photograph is printed, not floated: 2px of ink and one hard shadow in tan. */
.ph { margin: 0; border: var(--rule-2) solid var(--ink); background: var(--bone-2); box-shadow: var(--shadow-print); }
.ph img { width: 100%; }
.ph figcaption {
	font-family: var(--f-cond); font-weight: 500; font-size: .875rem; line-height: 1.3; color: var(--grey);
	border-top: var(--rule-1) solid var(--ink); padding: 10px var(--s2); background: var(--bone);
}

/* 6.2 Usually / here */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; }
.cmp caption { text-align: left; font-family: var(--f-cond); font-size: .9375rem; color: var(--grey); padding-bottom: var(--s2); }
.cmp th[scope="col"] {
	background: var(--ink); color: var(--bone); font-family: var(--f-cond); font-weight: 700;
	font-size: 1.375rem; line-height: 1; text-transform: uppercase; letter-spacing: .01em; padding: 14px var(--s2);
	width: 50%;
}
.cmp th[scope="col"] + th { border-left: var(--rule-1) solid var(--bone); }
.cmp td { border-bottom: var(--rule-1) solid var(--ink); padding: var(--s3) var(--s2); vertical-align: top; font-size: 1.0625rem; line-height: 1.35; }
.cmp td:first-child { color: var(--grey); border-right: var(--rule-1) solid var(--ink); }
.cmp td:last-child { font-weight: 500; }
.cmp tr:last-child td { border-bottom-width: var(--rule-2); }

/* 6.3 Hours: a price board, one row per line, figures in the data face */
.price { list-style: none; margin: 0; padding: 0; }
.price li {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s1) var(--s3);
	border-top: var(--rule-1) solid var(--ink); padding: var(--s3) 0;
}
.price li:first-child { border-top-width: var(--rule-2); }
.price li:last-child { border-bottom: var(--rule-2) solid var(--ink); }
.price h3 {
	grid-column: 1; margin: 0; font-family: var(--f-display); font-weight: 700;
	font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase;
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.price .fig {
	grid-column: 2; grid-row: 1; margin: 0; font-family: var(--f-data); font-weight: 700;
	font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1; letter-spacing: -.03em;
	font-variant-numeric: tabular-nums lining; white-space: nowrap;
}
.price .line { grid-column: 1; margin: 0; font-size: 1.0625rem; line-height: 1.35; max-width: 42ch; }
.price .unit {
	grid-column: 2; margin: 0; font-family: var(--f-data); font-size: .8125rem; color: var(--grey);
	font-variant-numeric: tabular-nums lining; white-space: nowrap; text-align: right;
}
.price .most { font-family: var(--f-data); font-weight: 700; font-size: .75rem; color: var(--red); border: 2px solid var(--red); padding: 3px 7px; text-transform: none; letter-spacing: 0; }
.price-foot { margin: var(--s3) 0 0; font-family: var(--f-cond); font-size: 1.0625rem; color: var(--grey); display: flex; gap: 10px; align-items: flex-start; }

/* 6.4 Instructors: name, slot, what she does. Rows, not cards. */
.inst { list-style: none; margin: 0; padding: 0; }
.inst li { display: grid; grid-template-columns: minmax(0, 20%) minmax(0, 26%) minmax(0, 1fr); gap: var(--s3); border-top: var(--rule-1) solid var(--ink); padding: var(--s4) 0; }
.inst li:first-child { border-top-width: var(--rule-2); }
.inst li:last-child { border-bottom: var(--rule-2) solid var(--ink); }
.inst h3 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1; letter-spacing: -.02em; display: flex; align-items: start; gap: .25em; }
.inst h3 .ic { width: 1em; height: 1em; }
.inst .slot { margin: 0; font-family: var(--f-data); font-size: .875rem; line-height: 1.4; color: var(--grey); font-variant-numeric: tabular-nums lining; }
.inst p:last-child { margin: 0; font-size: 1.0625rem; line-height: 1.4; }

/* 6.5 Where and when — the room, 21:9, printed like the other photograph */
.where-grid { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.where-grid p { margin: 0; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.4; }
.where-grid h2 { margin-bottom: var(--s3); }

/* 6.6 Questions */
.faq { margin: 0; }
.faq > div { border-top: var(--rule-1) solid var(--ink); padding: var(--s3) 0; display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: var(--s3); }
.faq > div:first-child { border-top-width: var(--rule-2); }
.faq > div:last-child { border-bottom: var(--rule-2) solid var(--ink); }
.faq dt { font-family: var(--f-cond); font-weight: 700; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.2; }
.faq dd { margin: 0; font-size: 1.0625rem; line-height: 1.4; max-width: 52ch; }

/* 6.7 Request access — the form sits inside the section, not in a dark band */
.access { border-bottom: var(--band) solid var(--ink); }
.access-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.access-grid > p { margin: 0 0 var(--s3); font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.4; max-width: 46ch; }
.form { border-top: var(--rule-4) solid var(--ink); background: var(--bone); padding: var(--s3) var(--s3) var(--s4); box-shadow: var(--shadow-print); }
.form .f { display: block; margin-top: var(--s3); }
.form .f:first-of-type { margin-top: 0; }
.form label, .form legend { display: block; font-family: var(--f-cond); font-weight: 700; font-size: 1rem; line-height: 1.2; padding: 0; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea {
	width: 100%; margin-top: 6px; padding: 12px 14px;
	border: var(--rule-2) solid var(--ink); border-radius: 0; background: var(--bone-2);
	font-family: var(--f-text); font-size: 1.0625rem; line-height: 1.3; color: var(--ink);
}
.form textarea { min-height: 5.5rem; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--grey); opacity: 1; }
.form fieldset { margin: var(--s3) 0 0; padding: 0; border: 0; }
.form .bands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--s2); margin-top: 8px; }
.form .bands label { display: flex; align-items: center; gap: 8px; font-weight: 500; font-family: var(--f-text); font-size: .9375rem; }
.form input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--red); flex: none; }
.form .hint, .form .consent { margin: 6px 0 0; font-size: .8125rem; line-height: 1.35; color: var(--grey); }
.form .consent { margin-top: var(--s3); }
.form .honey { position: absolute; left: -9999px; }
.form .cta-red { margin-top: var(--s3); width: 100%; font-size: 1.25rem; padding: 18px var(--s3); }
.form .ok { margin: var(--s3) 0 0; padding-top: var(--s3); border-top: var(--rule-1) solid var(--ink); }
.form .ok > span { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; line-height: 1.4; }
.form .ok > span[hidden] { display: none; }

/* =========================================================================
   7. Schedule page — the whole week, with a CSS-only band filter
   ========================================================================= */
.sched .lede { border-top: var(--rule-2) solid var(--ink); }
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin: 0; padding: var(--s2) var(--pad); border: 0; border-bottom: var(--rule-1) solid var(--ink); }
.filter legend { float: left; width: 100%; font-family: var(--f-cond); font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.filter label {
	font-family: var(--f-cond); font-weight: 600; font-size: 1rem; line-height: 1;
	border: var(--rule-2) solid var(--ink); padding: 9px 14px; cursor: pointer;
}
.filter input { position: absolute; opacity: 0; pointer-events: none; }
.filter input:checked + label { background: var(--ink); color: var(--bone); }
.filter input:focus-visible + label { outline: 3px solid var(--red); outline-offset: 3px; }
/* Only the rows of the chosen band stay. :has() drives it; no JS on the page. */
.sched:has(#band-early:checked) .week tr[data-band]:not([data-band="early"]),
.sched:has(#band-midday:checked) .week tr[data-band]:not([data-band="midday"]),
.sched:has(#band-late:checked) .week tr[data-band]:not([data-band="late"]) { display: none; }
.sched:has(#band-early:checked) .week tbody:not(:has(tr[data-band="early"])),
.sched:has(#band-midday:checked) .week tbody:not(:has(tr[data-band="midday"])),
.sched:has(#band-late:checked) .week tbody:not(:has(tr[data-band="late"])) { display: none; }
/* Empty state: the motif, 3×3 cells with one outlined, and the microcopy. */
.empty { display: none; padding: var(--s4) var(--pad); border-bottom: var(--rule-2) solid var(--ink); gap: var(--s3); align-items: start; }
.sched:has(#band-early:checked):not(:has(tr[data-band="early"])) .empty,
.sched:has(#band-midday:checked):not(:has(tr[data-band="midday"])) .empty,
.sched:has(#band-late:checked):not(:has(tr[data-band="late"])) .empty { display: flex; }
.empty .cells { display: grid; grid-template-columns: repeat(3, 28px); grid-auto-rows: 28px; gap: 3px; flex: none; }
.empty .cells i { display: block; background: var(--bone-2); }
.empty .cells i.o { background: transparent; box-shadow: inset 0 0 0 var(--rule-2) var(--ink); }
.empty p { margin: 0; font-size: 1.0625rem; line-height: 1.4; max-width: 48ch; }
.empty a, .empty label { font-family: var(--f-cond); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sched-count { margin: 0; padding: 0 var(--pad) var(--s2); font-family: var(--f-data); font-size: .8125rem; color: var(--grey); font-variant-numeric: tabular-nums lining; }
.state { font-family: var(--f-data); font-size: .75rem; letter-spacing: -.01em; text-transform: uppercase; display: block; margin-top: 6px; color: var(--grey); }
.mine .state { color: var(--bone); }

/* The head of /schedule: the same poster type, one step down from the home H1. */
.sched-head { padding: var(--s4) var(--pad) var(--s3); }
.sched-head .tag { display: inline-block; margin-bottom: var(--s2); }
.sched-head h1 {
	font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(2.5rem, 9vw, 7rem); line-height: .88; letter-spacing: -.04em; margin: 0 0 var(--s3);
}
.sched-head p { margin: 0; font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1.3; max-width: 52ch; }

/* One count line per filter state; only the checked one is shown. */
.sched-count { display: none; }
.sched:has(#band-all:checked) .sched-count[data-for="all"],
.sched:has(#band-early:checked) .sched-count[data-for="early"],
.sched:has(#band-midday:checked) .sched-count[data-for="midday"],
.sched:has(#band-late:checked) .sched-count[data-for="late"] { display: block; }

/* The rules repeated under the week: three short lines, no photograph. */
.rules-short { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.rules-short li { border-top: var(--rule-2) solid var(--ink); padding-top: var(--s2); font-size: 1.0625rem; line-height: 1.4; }
.rules-short b { display: block; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1; letter-spacing: -.02em; margin-bottom: var(--s1); }
.sched-cta { border-bottom: var(--band) solid var(--ink); }
.sched-cta h2 { max-width: 20ch; }
@media (max-width: 900px) { .rules-short { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } }

/* =========================================================================
   8. 404 — one "No class" cell, full width, opened by the band-change rule
   ========================================================================= */
.nf { background: var(--bone-2); border-top: var(--rule-3) solid var(--ink); border-bottom: var(--band) solid var(--ink); padding: var(--s6) var(--pad); }
.nf h1 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(3rem, 12vw, 9rem); line-height: .86; letter-spacing: -.045em; margin: 0 0 var(--s3); }
.nf p { margin: 0 0 var(--s4); font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1.35; max-width: 40ch; }

/* =========================================================================
   9. Footer
   ========================================================================= */
.foot { border-top: var(--rule-4) solid var(--ink); padding: var(--s4) var(--pad) var(--s5); }
.foot-line { margin: 0 0 var(--s4); font-family: var(--f-cond); font-weight: 500; font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1.3; max-width: 44ch; }
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s4); border-top: var(--rule-2) solid var(--ink); padding-top: var(--s3); }
.foot-grid h2 { margin: 0 0 var(--s2); font-family: var(--f-cond); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li + li { margin-top: 6px; }
.foot-grid a { font-family: var(--f-cond); font-weight: 600; font-size: 1.0625rem; }
.foot-end { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline; margin: var(--s4) 0 0; padding-top: var(--s3); border-top: var(--rule-1) solid var(--ink); font-family: var(--f-data); font-size: .8125rem; color: var(--grey); }
.foot-end .credit { margin-left: auto; }
.foot-end a { color: var(--ink); }

/* =========================================================================
   10. Prose (legal pages) — a readable column on the same grid
   ========================================================================= */
.prose { padding: var(--s5) var(--pad) var(--s6); border-top: var(--rule-4) solid var(--ink); }
.prose > * { max-width: 68ch; margin-inline: 0; }
.prose h1 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: .92; letter-spacing: -.03em; margin: 0 0 var(--s4); max-width: 20ch; }
.prose h2 { font-family: var(--f-cond); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.1; letter-spacing: -.01em; text-transform: none; margin: var(--s4) 0 var(--s2); padding-top: var(--s2); border-top: var(--rule-1) solid var(--ink); }
.prose h3 { font-family: var(--f-cond); font-weight: 700; font-size: 1.125rem; text-transform: none; margin: var(--s3) 0 var(--s1); }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.55; }
.prose p { margin: 0 0 var(--s2); }
.prose ul, .prose ol { margin: 0 0 var(--s2); padding-left: 1.25em; }
.prose li { margin-bottom: 6px; }
.prose a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--red); }

/* =========================================================================
   11. Responsive — the sheet hangs one grid cell inside the margin from 1200
   ========================================================================= */
@media (min-width: 1200px) { .wall { --inset: calc(var(--pad) + var(--cell-w)); } }
@media (max-width: 940px) { .sheet > .hint { display: block; } }

@media (max-width: 1080px) {
	.inst li { grid-template-columns: minmax(0, 30%) minmax(0, 1fr); }
	.inst .slot { grid-column: 2; }
	.inst p:last-child { grid-column: 2; }
	.inst h3 { grid-row: span 2; }
}
@media (max-width: 900px) {
	:root {
		--cell-w: calc((100% - 2 * var(--pad)) / 6); --cell-h: 56px;
		--shadow-sheet: 10px 10px 0 var(--oxblood), 18px 28px 48px -12px oklch(29% 0.12 24 / .6);
		--shadow-print: 10px 10px 0 var(--tan), 16px 24px 40px -12px oklch(84% 0.035 75 / .95);
	}
	.wall { padding: var(--s4) var(--pad) calc(var(--s4) + 10px); }
	.rules-grid, .where-grid, .access-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
	.ph { max-width: 460px; }
	.legend .note { margin-left: 0; flex-basis: 100%; }
	.foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.bar { grid-template-columns: 1fr auto; grid-template-areas: "mark cta" "links links"; column-gap: var(--s2); padding: 0; min-height: 0; }
	.mark { grid-area: mark; padding: 18px var(--pad); font-size: 1.25rem; }
	.bar .cta { grid-area: cta; margin-right: var(--pad); padding: 10px 14px; font-size: 1rem; }
	.links { grid-area: links; justify-self: stretch; border-top: 1px solid var(--bone); }
	.links li { flex: 1; text-align: center; }
	.links a { padding: 12px 6px; font-size: .9375rem; }
}
@media (max-width: 720px) {
	.week th, .week td { min-width: 136px; padding: 10px 12px; }
	.week th[scope="row"] { width: calc(var(--pad) + 56px); font-size: 1.125rem; padding-right: 8px; }
	.week thead th:first-child { width: calc(var(--pad) + 56px); }
	.week thead th { font-size: 1.25rem; padding: 14px 12px; }
	.lede { grid-template-columns: minmax(0, 1fr); }
	.lede > * + * { border-left: 0; border-top: var(--rule-1) solid var(--ink); }
	.lede .cta-red { width: 100%; padding: 20px var(--pad); }
	.rl > div, .faq > div, .inst li { grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s3) 0; }
	.inst h3 { grid-row: auto; }
	.inst .slot, .inst p:last-child { grid-column: 1; }
	.cmp, .cmp tbody, .cmp tr, .cmp td, .cmp th, .cmp thead { display: block; width: auto; }
	.cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.cmp tr { border-top: var(--rule-2) solid var(--ink); padding: var(--s3) 0; }
	.cmp tr:first-child { border-top: 0; }
	.cmp td { border: 0; padding: 0; }
	.cmp td:first-child { border-right: 0; padding-bottom: 8px; }
	.cmp td:first-child::before, .cmp td:last-child::before {
		display: block; font-family: var(--f-data); font-size: .6875rem; text-transform: uppercase;
		letter-spacing: .06em; color: var(--grey); margin-bottom: 4px; content: attr(data-col);
	}
	.cmp tr:last-child td { border-bottom: 0; }
	.cmp tbody { border-bottom: var(--rule-2) solid var(--ink); }
	.price li { grid-template-columns: minmax(0, 1fr) auto; }
	.foot-grid { grid-template-columns: minmax(0, 1fr); }
	.foot-end .credit { margin-left: 0; }
}
@media (max-width: 520px) {
	.form .bands { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
	.bar { column-gap: var(--s1); }
	.mark { font-size: 1rem; }
	.bar .cta { padding: 10px 12px; font-size: .9375rem; }
	.links { flex-wrap: wrap; }
	.links li { flex: 1 1 50%; min-width: 0; }
	.links li:nth-child(3) { border-left: 0; }
	.links li:nth-child(n+3) { border-top: 1px solid var(--bone); }
	.links a { padding: 12px 4px; font-size: .9375rem; }
}

/* =========================================================================
   12. Cinematic layer — the poster is read the way it is read on the wall
   Progress is scroll position, never time: no entrance animations, no JS.
   Everything lives inside @supports (animation-timeline: view()) and inside
   prefers-reduced-motion: no-preference, so a browser without scroll-driven
   animations — or a visitor who asks for less motion — gets §1–§11 untouched.
   Only transform / opacity / clip-path move; nothing changes size in flow, so
   there is no layout shift. Timelines are referenced through --tl-* custom
   properties (a longhand animation-timeline survives any CSS minifier that
   folds longhands into the animation shorthand).

   Three moves, all born from the signature (the week as a poster on a wall):
   (a) Hero → surface: the sheet, held off the wall, settles onto it while the
       window light travels down the red wall and the headline recedes as the
       far layer — and the ink block of the headline hands over from the first
       marked word to the second ("hour." → "bed.", "hora." → "cama.").
   (b) One pinned scene (200vh): the table holds still on screen and the light
       converges on your cell — your hour (the row), your day (the column),
       your bed (the cell blooms). Below 64rem there is no pin: the same
       sequence plays as the sheet crosses the screen.
   (c) One detail in Hours: the rule above each row draws itself, left to
       right, the way the rules of this poster are drawn.
   ========================================================================= */
:root {
	/* Timelines, always as a longhand value through a custom property. */
	--tl-root: scroll(root);
	--tl-pin: --pin;
	--tl-draw: --draw;

	/* Scroll distances (a) */
	--sd-hero: 34rem;          /* the sheet settles and the headline recedes over this much scroll */
	--sd-word: 18rem;          /* the ink block hands over inside the first screen, while both lines are up */
	--sd-glare-range: 96rem;   /* the light travels 30 of every 96 rem: it lags behind the page */
	--sd-glare-drift: 30rem;
	--sd-cast-far: 32px;       /* gap between sheet and its hard shadow: held off the wall … */
	--sd-cast-rest: 14px;      /* … and settled (the value §4 uses at rest) */

	/* The pinned scene (b) */
	--sd-pin: 250vh;
	--sd-pin-top: 0px;          /* the day heads stay on screen: they are the axis of the scene (a taller table is cropped at the foot, on purpose) */
	--sd-lit: oklch(89% 0.065 45 / .55);              /* additive light only: the warm bounce of §4, never a dimmed text */

	/* Steps of the sequence, as ranges. Base values: no pin, the sheet crosses
	   the screen. Redefined below for the pinned scene. */
	--sd-a1: cover 24% cover 27%;  /* the hour label lights up … */
	--sd-a2: cover 26% cover 29%;  /* … then the row, cell by cell, left to right */
	--sd-a3: cover 28% cover 31%;
	--sd-a4: cover 30% cover 33%;
	--sd-a5: cover 32% cover 35%;
	--sd-a6: cover 34% cover 37%;
	--sd-c:  cover 38% cover 43%;  /* the day head takes a line of light */
	--sd-b1: cover 39% cover 44%;  /* the column, band by band, top to bottom */
	--sd-b2: cover 41% cover 46%;
	--sd-b3: cover 43% cover 48%;
	--sd-d:  cover 47% cover 52%;  /* your cell blooms where the two cross */
}

/* Layers that only the cinematic layer uses: inert markup by default. */
.hero h1 .ko, .glare, .cast { display: none; }
.hero h1 .inv, .hero h1 .sw { position: relative; }
.hero h1 .sw { display: inline-block; line-height: .86; padding: 0 .07em 0 .06em; margin-right: -.03em; vertical-align: baseline; }

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

	/* ---------- (a) hero → surface ---------- */

	/* The wall clips (clip, never hidden: hidden would make it a scroll
	   container and hijack view()). */
	.hero .wall { position: relative; overflow: clip; }

	.hero .glare {
		display: block;
		position: absolute;
		z-index: 0;
		inset: -34% -12% auto;
		height: 96%;
		pointer-events: none;
		background: radial-gradient(44% 40% at 16% 26%, oklch(74% 0.215 45 / .5) 0%, oklch(63% 0.215 38 / .16) 48%, transparent 74%);
		will-change: transform;
		animation: rh-glare linear both;
		animation-timeline: var(--tl-root);
		animation-range: 0 var(--sd-glare-range);
	}
	@keyframes rh-glare { to { transform: translate3d(7%, var(--sd-glare-drift), 0); } }

	/* The sheet's hard shadow becomes a layer of its own, so the gap between
	   paper and wall can close: at the top of the page the poster is held off
	   the wall, and the first screen of scroll lays it down. The rest value is
	   exactly the --shadow-sheet of §1. */
	.hero .hang { position: relative; }
	.hero .cast {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
		background: var(--oxblood);
		box-shadow: 12px 26px 70px -14px oklch(29% 0.12 24 / .6);
		will-change: transform;
		animation: rh-settle linear both;
		animation-timeline: var(--tl-root);
		animation-range: 0 var(--sd-hero);
	}
	@keyframes rh-settle {
		from { transform: translate3d(var(--sd-cast-far), var(--sd-cast-far), 0); }
		to   { transform: translate3d(var(--sd-cast-rest), var(--sd-cast-rest), 0); }
	}
	.hero .sheet {
		position: relative;
		z-index: 1;
		box-shadow: inset 0 1px 0 oklch(100% 0 0 / .9);
		animation: rh-lay linear both;
		animation-timeline: var(--tl-root);
		animation-range: 0 var(--sd-hero);
	}
	@keyframes rh-lay {
		from { transform: translate3d(0, -12px, 0); }
		to   { transform: none; }
	}

	/* The headline is the far layer: anchored at its bottom left (where the
	   wall is) it shrinks back as the surface comes forward. No fading: the
	   contrast of the H1 is the same at every scroll position. */
	.hero h1 .poster {
		display: block;
		transform-origin: 0 100%;
		will-change: transform;
		animation: rh-recede linear both;
		animation-timeline: var(--tl-root);
		animation-range: 0 var(--sd-hero);
	}
	@keyframes rh-recede { to { transform: translate3d(0, 0.5rem, 0) scale(.965); } }

	/* The ink block hands over between the two promises. Each word carries a
	   knockout twin (.ko) clipped to nothing or to everything; the word
	   underneath is plain ink on bone, so at any point in the wipe both halves
	   are readable. Without support the twin stays display:none and §4's .inv
	   is the knockout, exactly as before. */
	.hero h1 .inv { background: none; color: inherit; }
	.hero h1 .ko {
		display: block;
		position: absolute;
		inset: 0;
		padding: inherit;
		background: var(--ink);
		color: var(--bone);
		white-space: nowrap;
		animation: linear both;
		animation-timeline: var(--tl-root);
		animation-range: 0 var(--sd-word);
	}
	.hero h1 .inv .ko { animation-name: rh-ko-out; }
	.hero h1 .sw .ko  { animation-name: rh-ko-in; }
	@keyframes rh-ko-out { 0%, 24% { clip-path: inset(0 0 0 0); }    54%, 100% { clip-path: inset(0 0 0 100%); } }
	@keyframes rh-ko-in  { 0%, 30% { clip-path: inset(0 100% 0 0); } 62%, 100% { clip-path: inset(0 0 0 0); } }

	/* ---------- (b) the pinned scene: the light converges on your cell ----------
	   The subject is .pin, the container around the table; the timeline is
	   named so that .scroll (a scroll container of its own, sideways) does not
	   capture an anonymous view(). Cells light with additive warm light — the
	   same bounce the red wall throws on the bone — so no text ever loses
	   contrast; your cell, which is red under bone text, is never tinted: it
	   gets a ring of light instead. */
	.hero .pin { view-timeline-name: --pin; }
	.hero .week td:not(.mine) { position: relative; z-index: 0; }
	.hero .week thead th:nth-child(3) { position: relative; }

	.hero .week tr:has(td.mine) > :not(.mine)::after,
	.hero .week tbody td:nth-child(3):not(.mine)::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background: var(--sd-lit);
		opacity: 0;
		animation: rh-lit linear both;
		animation-timeline: var(--tl-pin);
	}
	@keyframes rh-lit { to { opacity: 1; } }

	/* Your hour: the row, from the hour label rightwards (Tue is skipped — the
	   light passes through your cell and lands on it at the end). */
	.hero .week tr:has(td.mine) > :nth-child(1)::after { animation-range: var(--sd-a1); }
	.hero .week tr:has(td.mine) > :nth-child(2)::after { animation-range: var(--sd-a2); }
	.hero .week tr:has(td.mine) > :nth-child(4)::after { animation-range: var(--sd-a3); }
	.hero .week tr:has(td.mine) > :nth-child(5)::after { animation-range: var(--sd-a4); }
	.hero .week tr:has(td.mine) > :nth-child(6)::after { animation-range: var(--sd-a5); }
	.hero .week tr:has(td.mine) > :nth-child(7)::after { animation-range: var(--sd-a6); }

	/* Your day: a line of light under the day head, then the column band by band. */
	.hero .week thead th:nth-child(3)::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: var(--rule-3);
		background: var(--red-light);
		transform: scaleX(0);
		transform-origin: 0 50%;
		animation: rh-mark linear both;
		animation-timeline: var(--tl-pin);
		animation-range: var(--sd-c);
	}
	@keyframes rh-mark { to { transform: scaleX(1); } }
	.hero .week tbody:nth-of-type(1) td:nth-child(3):not(.mine)::after { animation-range: var(--sd-b1); }
	.hero .week tbody:nth-of-type(2) td:nth-child(3):not(.mine)::after { animation-range: var(--sd-b2); }
	.hero .week tbody:nth-of-type(3) td:nth-child(3):not(.mine)::after { animation-range: var(--sd-b3); }

	/* Your bed: where the two cross, the cell takes a ring of light. */
	.hero .week td.mine::after {
		content: "";
		position: absolute;
		inset: -3px;
		z-index: -1;
		pointer-events: none;
		box-shadow: 0 0 0 2px var(--red-light), 0 0 30px 8px oklch(63% 0.215 38 / .45);
		opacity: 0;
		transform: scale(1.05);
		animation: rh-bloom linear both;
		animation-timeline: var(--tl-pin);
		animation-range: var(--sd-d);
	}
	@keyframes rh-bloom { to { opacity: 1; transform: none; } }

	/* The pin itself, only where there is room for it: the table stays on
	   screen for one screenful of scroll while the sequence runs. Below this,
	   the same steps play as the sheet crosses the viewport (the base ranges
	   above), with no pin and no scroll-jacking. */
	@media (min-width: 64rem) and (min-height: 46rem) {
		.hero .pin { height: var(--sd-pin); }
		.hero .scroll { position: sticky; top: var(--sd-pin-top); }
		:root {
			--sd-a1: contain 4% contain 11%;
			--sd-a2: contain 8% contain 15%;
			--sd-a3: contain 14% contain 21%;
			--sd-a4: contain 19% contain 26%;
			--sd-a5: contain 24% contain 31%;
			--sd-a6: contain 29% contain 36%;
			--sd-c:  contain 38% contain 50%;
			--sd-b1: contain 40% contain 52%;
			--sd-b2: contain 47% contain 59%;
			--sd-b3: contain 54% contain 66%;
			--sd-d:  contain 70% contain 86%;
		}
	}

	/* Mobile keeps the shorter shadow of §11: the poster is smaller, so is its gap. */
	@media (max-width: 900px) {
		:root { --sd-cast-far: 22px; --sd-cast-rest: 10px; }
		.hero .cast { box-shadow: 8px 18px 48px -12px oklch(29% 0.12 24 / .6); }
	}

	/* ---------- (c) the detail in Hours: the rule draws itself ---------- */
	.price li { position: relative; border-top-color: transparent; view-timeline-name: --draw; }
	.price li::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: calc(-1 * var(--rule-1));
		height: var(--rule-1);
		background: var(--ink);
		transform: scaleX(0);
		transform-origin: 0 50%;
		animation: rh-draw linear both;
		animation-timeline: var(--tl-draw);
		animation-range: cover 12% cover 38%;
	}
	.price li:first-child::before { top: calc(-1 * var(--rule-2)); height: var(--rule-2); }
	@keyframes rh-draw { to { transform: scaleX(1); } }
}
}