/*
 * Chase — design tokens & site shell.
 *
 * THE RULE THIS FILE EXISTS TO ENFORCE: there is no hero, no full-bleed
 * section band, no scroll-drawn diagram, no slider/gauge widget, and no
 * uniform card-grid archive anywhere in this theme (see brief). The front
 * page is ONE continuous asymmetric modular grid — .chase-forme — a "locked
 * chase" of fixed-size furniture tiles packed edge to edge with a 3px
 * gutter, sitting directly under the header with no hero whitespace margin.
 * Tile size is drawn from a small fixed vocabulary (.tile--12x1 down to
 * .tile--3x1, plus one large .tile--6x4 signature tile) — never an
 * arbitrary span, mirroring real letterpress furniture (quads, spaces,
 * reglets) which only comes in fixed multiples. A small fixed set of tiles
 * carry one of exactly three standing rotation angles (.tile--tilt-a/b/c) —
 * never a per-tile random angle. Archive pages reuse the same "uneven
 * compartment" language via .type-case / .cc-lg / .cc-md / .cc-sm, mirroring
 * a real California job case, not a repeating card grid.
 *
 * Every element with class="glass" is a frosted-vellum panel (light blur +
 * a warm ink-tinted inner glow) whose intensity (--cha-glow) and colour
 * (--glow-rgb) are driven live by ink-diffusion.js from the actual
 * simulated ink-density field under that element — same "one real system
 * drives the UI" discipline used sitewide across this catalogue, just
 * inverted for a light theme and scoped to a real anisotropic-diffusion sim
 * instead of a fluid/fold sim.
 */

:root {
	--ink: #1A1613;
	--ink-2: #241E19;
	--paper: #F2EAD9;
	--paper-2: #E8DEC8;
	--surface: rgba(26, 22, 19, 0.045);
	--surface-strong: rgba(26, 22, 19, 0.09);
	--line: rgba(26, 22, 19, 0.14);
	--line-on-dark: rgba(242, 234, 217, 0.14);
	--text: #201A15;
	--text-soft: #5B564C;
	/* Deliberately darker than --brass-1 despite both starting from the same
	   palette swatch: this token is used for small (11-14px) uppercase
	   label text on light paper/glass surfaces, where #8A8377 measures only
	   ~3.5:1 against the frosted-vellum .glass composite -- below the 4.5:1
	   body-text floor. On a dark theme that failure shows as pale text
	   fading into a pale tint and gets caught immediately; on this LIGHT
	   theme everything is already light, so the same failure is easy to
	   miss on sight (see brief). Checked programmatically against the
	   glass/paper/paper-2 backgrounds this token actually renders on;
	   --brass-1 (unchanged) is reserved for non-text/decorative uses and
	   dark-background labels, both of which measure fine as the original
	   swatch. */
	--text-faint: #645F55;
	--text-on-dark: #F2EAD9;
	--text-on-dark-soft: #CFC7B4;

	/* Brass / type-metal — structural neutral scale (rules, borders, labels). */
	--brass-1: #8A8377;
	--brass-2: #736C60;
	--brass-3: #5B564C;

	/* Spot red — the one accent, used the way a printer reserves a single
	   second ink drum: sparingly, for the thing that should read first. */
	--red: #B3372C;
	--red-deep: #8F2C22;

	--glow-rgb: 179, 55, 44;

	--font-display: 'Fraunces', Georgia, serif;
	--font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
	--font-label: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;

	--fs-1: 1rem;
	--fs-2: 1.25rem;
	--fs-3: 1.5625rem;
	--fs-4: 1.9531rem;
	--fs-5: 2.4414rem;
	--fs-6: clamp(2.1rem, 1.2rem + 4.2vw, 3.6rem);
	--fs-7: clamp(2.3rem, 1.05rem + 5.6vw, 4.8rem);

	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 16px;
	--sp-4: 24px;
	--sp-5: 40px;
	--sp-6: 64px;
	--sp-7: 96px;
	--sp-8: 144px;

	--radius: 10px;
	--radius-sm: 6px;
	--wrap: 1280px;
	--forme-wrap: 1560px;
	--forme-gap: 3px;
	--forme-row: 108px;
}

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

body {
	margin: 0;
	font-family: var(--font-sans);
	background: var(--paper);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	line-height: 1.55;
	position: relative;
}

/* ---------- Procedural paper-grain overlay ----------
   One continuous sheet, not per-section background changes. A generated
   SVG feTurbulence noise field, tiled and blended over the paper colour —
   not a stock photo/scan, and cheap enough to run as a fixed pseudo-element
   rather than a canvas. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.5;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='t'/><feColorMatrix in='t' type='matrix' values='0 0 0 0 0.10  0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	background-size: 240px 240px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; margin: 0 0 var(--sp-3); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-7); }
h2 { font-size: var(--fs-5); }
h3 { font-size: var(--fs-3); }
p { margin: 0 0 var(--sp-3); color: var(--text-soft); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-4); position: relative; z-index: 1; }
.wrap--narrow { max-width: 760px; }
.wrap--forme { max-width: var(--forme-wrap); margin: 0 auto; padding: 0 var(--forme-gap); position: relative; z-index: 1; }

/* ---------- Glass (frosted vellum — the signature material, inverted for a light theme) ---------- */
.glass {
	--cha-glow: 0;
	position: relative;
	background: rgba(255, 253, 246, 0.62);
	backdrop-filter: blur(18px) saturate(135%);
	-webkit-backdrop-filter: blur(18px) saturate(135%);
	border: 1px solid rgba(26, 22, 19, 0.10);
	border-radius: var(--radius);
	box-shadow:
		inset 0 0 calc(8px + var(--cha-glow) * 22px) rgba(var(--glow-rgb), calc(0.10 + var(--cha-glow) * 0.30)),
		inset 0 1px 0 rgba(255, 255, 255, 0.65),
		0 18px 40px -26px rgba(26, 18, 14, 0.30);
	transition: box-shadow 260ms ease, transform 200ms ease, border-color 200ms ease;
	color: var(--text);
}
.glass:hover { border-color: rgba(179, 55, 44, 0.3); transform: translateY(-2px); }
.glass--dark {
	background: rgba(26, 22, 19, 0.6);
	border-color: rgba(242, 234, 217, 0.14);
	color: var(--text-on-dark);
}
.glass--dark p { color: var(--text-on-dark-soft); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; padding: var(--sp-1) 0; margin: 0; border-radius: 0; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 10px var(--sp-4); max-width: var(--forme-wrap); margin: 0 auto; }
.brand { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; display: flex; align-items: baseline; gap: 10px; }
.brand__tag { font-family: var(--font-label); font-size: 0.6875rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.nav ul { list-style: none; display: flex; gap: var(--sp-5); margin: 0; padding: 0; }
.nav a { font-size: 0.9375rem; color: var(--text-soft); transition: color 160ms ease; }
.nav a:hover { color: var(--red-deep); }

.nav-toggle {
	display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
	color: var(--text); padding: 0.5em 0.9em; font-size: 0.9rem; cursor: pointer;
}
@media (max-width: 860px) {
	.nav-toggle { display: inline-flex; }
	/* .site-header's backdrop-filter -- and a lingering .glass:hover
	   transform left active on touch after tapping the toggle (a
	   descendant, so :hover matches the header too) -- otherwise creates a
	   containing block for .nav's position:fixed panel (same effect as
	   `transform` on any ancestor), trapping it inside the header's own box
	   instead of the viewport. A recurring bug class across this catalogue;
	   fixed from day one here exactly as on Temper/Dram. */
	.site-header.nav-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); transform: none !important; }
	.nav {
		position: fixed; inset: 68px 0 0 0; background: var(--paper); padding: var(--sp-5) var(--sp-4);
		transform: translateY(-8px); opacity: 0; pointer-events: none;
		transition: opacity 220ms ease, transform 220ms ease; overflow-y: auto; z-index: 39;
	}
	.nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
	.nav ul { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
	.nav a { font-size: 1.25rem; }
	.brand__tag { display: none; }
	.site-header__inner { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
	.site-header__inner > div { gap: var(--sp-2) !important; }
	.btn.btn--solid { padding: 0.6em 0.85em; font-size: 0.75rem; }
	.nav-toggle { padding: 0.5em 0.7em; font-size: 0.78rem; }
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 8px; padding: 0.85em 1.5em; border-radius: 999px;
	font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; border: 1px solid var(--line);
	background: transparent; color: var(--text); cursor: pointer; transition: all 180ms ease;
}
.btn:hover { border-color: var(--red); color: var(--red-deep); }
.btn--solid { background: var(--red); color: #fff; border-color: var(--red); }
.btn--solid:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.btn--on-dark { background: rgba(242,234,217,0.1); color: var(--text-on-dark); border-color: var(--line-on-dark); }
.btn--on-dark:hover { background: rgba(242,234,217,0.18); border-color: rgba(255,255,255,0.4); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-label); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--red-deep); margin-bottom: var(--sp-3); }
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--red); }
.eyebrow--on-dark { color: var(--brass-1); }
.eyebrow--on-dark::before { background: var(--brass-1); }

/* ---------- Generic grid / card (used on inner pages only — related-post rails, not the forme) ---------- */
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card { display: block; padding: var(--sp-4); }
.card__media { aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--sp-4); background: var(--surface); }
.card__media--rule { background: linear-gradient(135deg, var(--paper) 0%, var(--paper-2) 55%, var(--brass-1) 100%); position: relative; }
.card__media--rule::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(26,22,19,0.08) 0 2px, transparent 2px 26px); }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__eyebrow { font-family: var(--font-label); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--red-deep); margin-bottom: var(--sp-2); }
.card__title { margin-bottom: var(--sp-2); }
.card__excerpt { color: var(--text-soft); font-size: 0.9375rem; margin-bottom: 0; }

.section-head { max-width: 640px; margin-bottom: var(--sp-6); }
.pull-quote { font-family: var(--font-display); font-style: italic; font-size: var(--fs-4); line-height: 1.3; }
.pull-quote cite { display: block; margin-top: var(--sp-4); font-family: var(--font-label); font-size: 0.875rem; font-weight: 600; font-style: normal; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 0; padding: var(--sp-7) 0 var(--sp-5); background: var(--ink); color: var(--text-on-dark); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-7); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-on-dark-soft); font-family: var(--font-label); font-weight: 600; margin-bottom: var(--sp-3); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a, .footer-grid p { color: var(--text-on-dark-soft); font-size: 0.9375rem; }
.footer-grid .brand { color: var(--text-on-dark); }
.footer-legal { display: flex; justify-content: space-between; padding-top: var(--sp-5); border-top: 1px solid var(--line-on-dark); font-size: 0.8125rem; color: var(--text-on-dark-soft); flex-wrap: wrap; gap: var(--sp-2); }

/* ---------- Forms ---------- */
.enquiry-form input, .enquiry-form textarea, .enquiry-form select {
	width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
	background: rgba(255,255,255,0.7); font-family: var(--font-sans); font-size: 0.9375rem; margin-bottom: var(--sp-3);
}
.enquiry-form input:focus, .enquiry-form textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.enquiry-form__status { font-size: 0.875rem; color: var(--text-soft); }
.enquiry-form__status.is-error { color: var(--red-deep); }

/* ---------- Focus visibility (keyboard navigation) ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-toggle:focus-visible {
	outline: 2px solid var(--red-deep);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Inner page head ---------- */
.page-head { padding: var(--sp-6) 0; background: var(--paper-2); border-bottom: 1px solid var(--line); position: relative; z-index: 1; }
.page-head h1 { font-size: var(--fs-6); }
.page-head__inner { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-6); flex-wrap: wrap; }
.page-head__intro { max-width: 640px; }
.page-head__stats { display: flex; gap: var(--sp-6); flex: 0 0 auto; }
.page-head__stats .about-stats__num { font-size: var(--fs-5); }
@media (max-width: 720px) { .page-head__inner { align-items: flex-start; } .page-head__stats { gap: var(--sp-5); } }

.entry-content { line-height: 1.75; }
.entry-content h2 { margin-top: var(--sp-6); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; color: var(--text-soft); }
.entry-content ol.howwework { list-style: none; counter-reset: hw; padding-left: 0; margin: var(--sp-5) 0; }
.entry-content ol.howwework li { counter-increment: hw; position: relative; padding-left: 3em; margin-bottom: var(--sp-4); }
.entry-content ol.howwework li::before {
	content: counter(hw, decimal-leading-zero);
	position: absolute; left: 0; top: 0; font-family: var(--font-display); font-weight: 600;
	font-size: 1.1rem; color: var(--red-deep);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--font-label); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: var(--sp-3); }
.breadcrumb a { color: var(--text-faint); }
.breadcrumb a:hover { color: var(--red-deep); }

/* ---------- Two-column detail head ---------- */
.detail-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; padding: var(--sp-7) 0; background: var(--paper-2); border-bottom: 1px solid var(--line); position: relative; z-index: 1; }
.detail-head__media { border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.detail-head__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-head--edition .detail-head__media { aspect-ratio: 4/5; }
.detail-head--stock .detail-head__media { aspect-ratio: 4/5; }
.detail-head__body { display: flex; flex-direction: column; }
.detail-head__lede { font-size: var(--fs-2); color: var(--text-soft); margin-bottom: var(--sp-4); }
.detail-head__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
@media (max-width: 860px) { .detail-head { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-6) 0; } }

/* ---------- Cross-link card ---------- */
.material-link {
	display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); text-decoration: none; color: inherit;
}
.material-link__media { width: 88px; height: 88px; flex: 0 0 auto; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.material-link__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.material-link__eyebrow { font-family: var(--font-label); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--red-deep); margin-bottom: 4px; }
.material-link__title { font-family: var(--font-display); font-size: var(--fs-3); margin: 0; }

/* ---------- Spec sheet / fact line ---------- */
.spec-sheet { display: grid; gap: 0; border-top: 1px solid var(--line); }
.spec-sheet__row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); gap: var(--sp-4); }
.spec-sheet__row dt { font-family: var(--font-label); font-size: 0.8125rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.spec-sheet__row dd { margin: 0; font-weight: 700; text-align: right; }
.fact-line { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-family: var(--font-label); font-size: 0.8125rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--sp-2); }
dl.fact-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--sp-4); }
dl.fact-line .fact-line__row dt { margin-bottom: 2px; }
dl.fact-line .fact-line__row dd { margin: 0; color: var(--text-soft); font-weight: 700; white-space: normal; }

/* ---------- Pattern-look-style callout ---------- */
.tasting-notes { margin: var(--sp-4) 0; padding: var(--sp-4); border-left: 3px solid var(--red); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.tasting-notes__label { font-family: var(--font-label); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--red-deep); margin-bottom: 6px; }
.tasting-notes__text { margin: 0; color: var(--text); }

/* ---------- Archive intro + pills ---------- */
.archive-intro { max-width: 640px; margin: var(--sp-3) 0 0; color: var(--text-soft); }
.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--sp-5) 0 var(--sp-6); }
.filter-pills a { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--font-label); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); text-decoration: none; transition: border-color 160ms ease, color 160ms ease; }
.filter-pills a:hover, .filter-pills a.is-active { border-color: var(--red); color: var(--red-deep); }

/* ---------- About page stats ---------- */
.about-stats { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin: var(--sp-6) 0; padding: var(--sp-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-stats__num { font-family: var(--font-label); font-weight: 700; font-size: var(--fs-4); color: var(--red-deep); }
.about-stats__label { font-family: var(--font-label); font-size: 0.78rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Comments (WP core classes, minimal skin) ---------- */
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .children { list-style: none; padding-left: var(--sp-5); }
.comment-body { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.comment-form input, .comment-form textarea {
	width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
	background: #fff; font-family: var(--font-sans); font-size: 0.9375rem; margin-bottom: var(--sp-3);
}

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translate(-28px, 8px); }
[data-reveal="left"].is-visible { transform: none; }
[data-reveal="right"] { transform: translate(28px, 8px); }
[data-reveal="right"].is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   Signature layout — the locked chase (front-page asymmetric forme grid)
   ===================================================================== */
.chase-forme {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	/* minmax rather than a hard pixel row: the row-SPAN a tile occupies is
	   still drawn from the fixed furniture-multiples vocabulary below (never
	   an arbitrary span), but the unit's pixel height is allowed to grow if
	   a tile's actual content needs more room at a given viewport width --
	   the same "tiles keep their relative size class, not their literal
	   pixel height" allowance the brief already grants the mobile layout,
	   applied consistently at every width instead of only below 860px. */
	grid-auto-rows: minmax(var(--forme-row), auto);
	grid-auto-flow: dense;
	gap: var(--forme-gap);
	max-width: var(--forme-wrap);
	margin: 0 auto;
	padding: var(--forme-gap);
	position: relative;
	z-index: 1;
}

.tile {
	position: relative;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: var(--sp-4);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tile.glass { background: rgba(255, 253, 246, 0.62); }

/* Fixed size vocabulary — furniture only comes in these multiples. */
.tile--12x1 { grid-column: span 12; grid-row: span 1; }
.tile--8x1  { grid-column: span 8;  grid-row: span 1; }
.tile--6x4  { grid-column: span 6;  grid-row: span 4; }
.tile--6x2  { grid-column: span 6;  grid-row: span 2; }
.tile--4x2  { grid-column: span 4;  grid-row: span 2; }
.tile--4x1  { grid-column: span 4;  grid-row: span 1; }
.tile--3x2  { grid-column: span 3;  grid-row: span 2; }
.tile--3x1  { grid-column: span 3;  grid-row: span 1; }

/* Type scale is proportional to tile size — this IS the hierarchy system,
   there is no separate stacked H1/H2/H3 rhythm layered on top of it. */
.tile__eyebrow { font-family: var(--font-label); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--red-deep); margin-bottom: 8px; }
.tile__title { font-family: var(--font-display); font-weight: 600; line-height: 1.08; margin: 0 0 8px; color: var(--text); }
.tile__text { font-size: 0.9375rem; color: var(--text-soft); margin: 0; }
.tile__meta { font-family: var(--font-label); font-size: 0.75rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }

.tile--12x1 .tile__title, .tile--8x1 .tile__title { font-size: clamp(1.5rem, 0.9rem + 2vw, 2.5rem); }
.tile--6x4 .tile__title { font-size: clamp(1.6rem, 0.9rem + 2.4vw, 2.5rem); }
.tile--6x2 .tile__title, .tile--4x2 .tile__title { font-size: var(--fs-4); }
.tile--4x1 .tile__title, .tile--3x2 .tile__title { font-size: var(--fs-3); }
.tile--3x1 .tile__title { font-size: 0.9375rem; font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.tile--3x1 .tile__text { font-size: 0.8125rem; }

.tile--12x1, .tile--8x1 { justify-content: center; }
.tile--12x1 .tile__title { max-width: 22ch; }

/* Fixed rotation set — exactly three standing angles, reused deliberately
   (never a per-tile random angle) so the composition reads as loosely
   locked-up type, not sloppy asymmetry. Only applied where hand-placed. */
.tile--tilt-a { transform: rotate(-1.2deg); }
.tile--tilt-b { transform: rotate(0.6deg); }
.tile--tilt-c { transform: rotate(-0.6deg); }
.tile--tilt-a:hover, .tile--tilt-b:hover, .tile--tilt-c:hover { transform: rotate(0deg); }

.tile--dark { background: var(--ink); border-color: var(--ink-2); color: var(--text-on-dark); }
.tile--dark .tile__title { color: var(--text-on-dark); }
.tile--dark .tile__text { color: var(--text-on-dark-soft); }
.tile--dark .tile__eyebrow { color: var(--brass-1); }

.tile--edition-teaser { padding: 0; }
.tile--edition-teaser .tile__media { flex: 1 1 auto; min-height: 0; background: var(--surface); position: relative; }
.tile--edition-teaser .tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile--edition-teaser .tile__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.tile--edition-teaser .tile__body .tile__title { margin-bottom: 4px; }

.tile__link-cover { position: absolute; inset: 0; z-index: 2; }
.tile--edition-teaser, .tile--edition-teaser * { text-decoration: none; }
a.tile { color: inherit; }
a.tile:hover { border-color: rgba(179, 55, 44, 0.35); }

/* Manifesto opening tile — the page's single largest type moment, plain
   confident editorial, not an animated diagram. Font-size and copy length
   are both deliberately tuned to fit within the tile's fixed 6x2 box at
   this weight/line-height -- the tile keeps a hard-locked pixel height (the
   furniture-multiples discipline this whole grid follows), so unlike a
   flexible card the content has to fit the box, not the other way around. */
.tile--manifesto .tile__title { font-size: clamp(1.7rem, 0.95rem + 2.5vw, 2.75rem); max-width: 24ch; margin-bottom: 4px; }
/* The tile's height is a hard-locked multiple of the row unit above the
   860px breakpoint (see the furniture-multiples discipline this grid
   follows) -- the supporting line is dropped there so the headline never
   overflows its fixed box. Below 860px tiles grow to fit content instead
   (see the .chase-forme mobile media query), so the line can stay. */
@media (min-width: 861px) {
	.tile--manifesto .tile__text { display: none; }
}

/* How-we-work tile: a plain numbered list, deliberately quiet — this exact
   content exists elsewhere in this catalogue as an animated scroll-diagram
   spectacle three times running; here it is confident, static editorial. */
.tile--howwework ol { list-style: none; counter-reset: hw2; margin: 0; padding: 0; display: grid; gap: 10px; }
.tile--howwework li { counter-increment: hw2; display: flex; gap: 10px; font-size: 0.875rem; color: var(--text-soft); align-items: baseline; }
.tile--howwework li::before {
	content: counter(hw2, decimal-leading-zero);
	font-family: var(--font-display); font-weight: 600; color: var(--red-deep); font-size: 0.9rem; flex: 0 0 auto;
}

/* Pull-quote tile */
.tile--quote .tile__title { font-family: var(--font-display); font-style: italic; font-weight: 500; line-height: 1.28; }
.tile--quote cite { display: block; margin-top: 12px; font-family: var(--font-label); font-style: normal; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }

@media (max-width: 860px) {
	.chase-forme { grid-template-columns: 1fr; grid-auto-rows: minmax(72px, auto); --forme-row: auto; }
	/* Tiles keep their relative SIZE CLASS (grid-row span, hence min-height,
	   and the size-proportional type scale above) even when collapsed to a
	   single column — a 6x4 tile is still visually larger than a 3x1 tile,
	   the hierarchy survives the reflow instead of degrading into a flat
	   generic mobile stack. */
	.tile--12x1, .tile--8x1, .tile--6x4, .tile--6x2, .tile--4x2, .tile--4x1, .tile--3x2, .tile--3x1 {
		grid-column: 1 / -1;
	}
	.tile--6x4 { min-height: 380px; }
	.tile--6x2, .tile--4x2 { min-height: 220px; }
	.tile--12x1, .tile--8x1 { min-height: 160px; }
	.tile--4x1, .tile--3x2 { min-height: 130px; }
	.tile--3x1 { min-height: 76px; }
	.tile--tilt-a, .tile--tilt-b, .tile--tilt-c { transform: none; }
}

/* =====================================================================
   Signature #1 — Ink Diffusion specimen plate (real-time WebGL2)
   ===================================================================== */
.tile--specimen { padding: 0; }
#cha-ink-host { position: absolute; inset: 0; z-index: 0; }
#cha-ink-host canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tile--specimen .tile__overlay {
	position: relative; z-index: 1; margin-top: auto; padding: var(--sp-4);
	background: linear-gradient(0deg, rgba(26,22,19,0.0) 0%, rgba(26,22,19,0.0) 100%);
}
.tile--specimen .tile__eyebrow { color: var(--ink); background: rgba(242,234,217,0.75); display: inline-block; padding: 3px 8px; border-radius: 999px; }
.tile--specimen .tile__title { color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,0.4); }

/* =====================================================================
   Signature #2 — Specimen-reveal "drawer" micro-interaction
   (hover/tap, not a tool the visitor operates — pure content browsing)
   ===================================================================== */
.tile--drawer { cursor: pointer; }
.drawer { position: relative; height: 100%; width: 100%; }
.drawer__front, .drawer__back {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
	padding: var(--sp-4); transition: transform 420ms cubic-bezier(.16,.84,.44,1), opacity 380ms ease;
	backface-visibility: hidden;
}
.drawer__front { transform: translateX(0); }
.drawer__back {
	transform: translateX(14%); opacity: 0; background: var(--ink); color: var(--text-on-dark);
	display: flex; align-items: center; justify-content: center; text-align: center;
}
.drawer__back .drawer-glyph { font-family: var(--font-display); font-size: clamp(2.6rem, 3vw, 4rem); line-height: 1; color: var(--brass-1); }
.drawer__back .drawer-caption { font-family: var(--font-label); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-on-dark-soft); margin-top: 10px; }
.tile--drawer:hover .drawer__front, .tile--drawer.is-open .drawer__front { transform: translateX(-14%); opacity: 0; }
.tile--drawer:hover .drawer__back, .tile--drawer.is-open .drawer__back { transform: translateX(0); opacity: 1; }
.tile--drawer:focus-visible .drawer__back { transform: translateX(0); opacity: 1; }
.tile--drawer:focus-visible .drawer__front { transform: translateX(-14%); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
	.drawer__front, .drawer__back { transition: opacity 200ms ease; transform: none !important; }
}

/* =====================================================================
   Type case — archive "uneven compartment" layout (not a uniform card grid)
   ===================================================================== */
.type-case {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 96px;
	grid-auto-flow: dense;
	gap: var(--forme-gap);
}
.compartment {
	display: block; position: relative; background: rgba(255,253,246,0.6); border: 1px solid var(--line);
	border-radius: var(--radius-sm); padding: var(--sp-3); overflow: hidden; color: inherit;
	transition: border-color 160ms ease, transform 200ms ease;
}
.compartment:hover { border-color: rgba(179,55,44,0.35); transform: translateY(-2px); }
.compartment__media { position: absolute; inset: 0; z-index: 0; }
.compartment__media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; }
.compartment__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(26,22,19,0.72) 0%, rgba(26,22,19,0.08) 60%); }
.compartment__body { position: relative; z-index: 1; margin-top: auto; align-self: flex-end; }
.compartment.has-media { display: flex; flex-direction: column; justify-content: flex-end; }
.compartment.has-media .compartment__title, .compartment.has-media .compartment__eyebrow { color: var(--text-on-dark); }
.compartment__eyebrow { font-family: var(--font-label); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--red-deep); margin-bottom: 4px; display: block; }
.compartment__title { font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--text); }

.cc-lg { grid-column: span 6; grid-row: span 3; }
.cc-lg .compartment__title { font-size: var(--fs-4); }
.cc-md { grid-column: span 4; grid-row: span 2; }
.cc-md .compartment__title { font-size: var(--fs-3); }
.cc-sm { grid-column: span 3; grid-row: span 1; }
.cc-sm .compartment__title { font-size: 0.9375rem; }

.cc-tilt-a { transform: rotate(-1.2deg); }
.cc-tilt-b { transform: rotate(0.6deg); }
.cc-tilt-c { transform: rotate(-0.6deg); }
.cc-tilt-a:hover, .cc-tilt-b:hover, .cc-tilt-c:hover { transform: rotate(0deg) translateY(-2px); }

@media (max-width: 860px) {
	.type-case { grid-template-columns: 1fr; grid-auto-rows: minmax(120px, auto); }
	.cc-lg, .cc-md, .cc-sm { grid-column: 1 / -1; }
	.cc-lg { min-height: 220px; }
	.cc-md { min-height: 170px; }
	.cc-sm { min-height: 120px; }
	.cc-tilt-a, .cc-tilt-b, .cc-tilt-c { transform: none; }
}