/* ==========================================================================
   WifeLife Atelier — design system
   --------------------------------------------------------------------------
   1. Fonts        5. Layout          9. Header
   2. Tokens       6. Buttons/links  10. Footer
   3. Base         7. Case-file kit  11. Reveal + reduced motion
   4. Type         8. Cards
   ========================================================================== */

/* 1. Fonts — self-hosted, Latin subset, variable ----------------------------- */

/* Only the masthead face is declared here, so it is the only font that races
   the page's main image. Bodoni italic, Cormorant (both styles) and Jost are
   added by the late font loader (atelier_font_loader(), inc/setup.php) once
   that image has arrived; assets/css/fonts-late.css declares them for
   visitors without JavaScript. Until they land, text sets in the metric-
   matched stand-ins below, so the swap does not move the page. */
@font-face {
	font-family: "Bodoni Moda";
	src: url("../fonts/bodoni-moda.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

/* Stand-ins, sized to the real faces' average width and line metrics
   (Times New Roman / Arial and their metric twins; computed with fontTools). */
@font-face {
	font-family: "Cormorant Fallback";
	src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos");
	font-style: normal;
	size-adjust: 96.64%;
	ascent-override: 95.62%;
	descent-override: 29.7%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Cormorant Fallback";
	src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("Tinos Italic");
	font-style: italic;
	size-adjust: 87.9%;
	ascent-override: 105.12%;
	descent-override: 32.65%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Jost Fallback";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
	font-style: normal;
	size-adjust: 100.16%;
	ascent-override: 106.83%;
	descent-override: 37.44%;
	line-gap-override: 0%;
}

/* 2. Tokens ------------------------------------------------------------------ */

:root {
	/* Paper: three values of one hue. Tonal, not multicoloured. */
	--paper:        #F4EFE4;
	--paper-deep:   #EBE3D3;
	--paper-raised: #FBF8F1;

	--ink:       #14100D;
	--ink-soft:  #4A3F35;
	--ink-faint: #6F604F;

	--gold:      #B08A4A;
	--gold-pale: #D9C9A6;

	/* Wine has exactly three jobs: primary CTA fill, the File No. stamp, the
	   rule under an H1. If you are reaching for it anywhere else, don't. */
	--wine: #6E0F16;

	/* The footer panel — the one dark ground, where the ceremonial logo sits. */
	--panel: #1E140F;

	--font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
	--font-body:    "Cormorant Garamond", "Cormorant Fallback", "Garamond", Georgia, serif;
	--font-ui:      "Jost", "Jost Fallback", "Futura", "Helvetica Neue", Arial, sans-serif;

	--track-ui: .18em;

	--space-section: clamp(64px, 7vw, 120px);
	--gutter: clamp(16px, 4vw, 48px);
	--measure: 68ch;
	--wide: 1320px;

	--ease: cubic-bezier(.22, .61, .36, 1);
	/* Motion (2026-10-04). --ease stays for UI; --ease-couture is the long
	   soft settle for reveals; --spring is a 300/22/1 spring (7% overshoot,
	   settles ~570ms) sampled into linear(), for hovers only. */
	--dur-quick:  240ms;
	--dur-base:   700ms;
	--dur-slow:   1.2s;
	--dur-spring: 570ms;
	--ease-couture: cubic-bezier(.16, 1, .3, 1);
	--spring: linear(0, 0.047, 0.161, 0.31, 0.468, 0.619, 0.751, 0.861, 0.945, 1.005, 1.044, 1.066, 1.075, 1.074, 1.067, 1.057, 1.045, 1.033, 1.022, 1.013, 1.006, 1.001, 0.998, 0.995, 0.994, 0.994, 0.995, 0.995, 0.996, 0.997, 1);
	--shadow-exhibit: 0 1px 2px rgba(20, 16, 13, .08), 0 14px 32px -12px rgba(20, 16, 13, .28);

	/* Grain: fractal noise, multiplied at .045. The promo ran .34 — that is
	   dirt, not texture. */
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 3. Base -------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--paper);
	/* Laid lines: the horizontal chain lines of real laid paper, every 24px. */
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 23px,
		rgba(20, 16, 13, .02) 23px,
		rgba(20, 16, 13, .02) 24px
	);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 21px;
	line-height: 1.35;
	font-kerning: normal;
	font-variant-ligatures: common-ligatures;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Grain sits above everything but never intercepts a click. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	background-image: var(--grain);
	opacity: .045;
	mix-blend-mode: multiply;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
picture { display: contents; } /* Imagify wraps <img> in <picture>; don't let it add a box. */

::selection { background: var(--gold-pale); color: var(--ink); }

:focus-visible {
	outline: 1px solid var(--gold);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto;
	top: 12px; left: 12px; z-index: 10000;
	padding: 12px 18px;
	background: var(--ink); color: var(--paper);
	font: 500 12px/1 var(--font-ui);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
}

/* 4. Type -------------------------------------------------------------------- */

h1, h2, h3, h4 {
	margin: 0 0 .4em;
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--ink);
	text-wrap: balance;
}

.display,
h1 {
	font-size: clamp(64px, 8vw, 132px);
	font-weight: 600;
	line-height: .86;
	letter-spacing: -.03em;
}
/* Inner-page H1s live below the hero scale. */
.page-title { font-size: clamp(44px, 5.5vw, 88px); }

/* The one wine rule under an H1. */
.rule-wine::after {
	content: "";
	display: block;
	width: 64px;
	height: 2px;
	margin-top: .32em;
	background: var(--wine);
}

h2, .h2 {
	font-size: clamp(36px, 4vw, 58px);
	line-height: .95;
	letter-spacing: -.015em;
}
h3, .h3 { font-size: clamp(26px, 2.2vw, 32px); line-height: 1.05; }
h4 { font-size: 22px; line-height: 1.1; }

p { margin: 0 0 1em; }

.lede {
	font-size: 24px;
	line-height: 1.28;
	color: var(--ink-soft);
}

em, i { font-style: italic; }

/* The machinery: nav, labels, eyebrows, buttons, prices. */
.eyebrow,
.ui {
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--ink-faint);
}
.eyebrow { display: block; margin-bottom: 18px; }

.price {
	font-family: var(--font-ui);
	font-size: 16px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
}

.prose { max-width: var(--measure); }
.prose > * + h2 { margin-top: 1.6em; }
.prose blockquote {
	margin: 1.6em 0;
	padding-left: 24px;
	border-left: 1px solid var(--gold);
	font-style: italic;
	font-size: 1.15em;
	color: var(--ink-soft);
}

/* 5. Layout ------------------------------------------------------------------ */

.wrap {
	width: 100%;
	max-width: var(--wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	position: relative;
	padding-block: var(--space-section);
	isolation: isolate;
}
.section--deep { background-color: var(--paper-deep); }

/* Per-section vignette: one soft radial of the deeper tone, placed
   differently by section so pages never stamp out identically. */
.section[class*="vignette"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(ellipse 70% 60% at var(--vx, 50%) var(--vy, 0%), var(--paper-deep), transparent 70%);
	opacity: .9;
}
.section--vignette-tl { --vx: 0%;   --vy: 0%; }
.section--vignette-tr { --vx: 100%; --vy: 0%; }
.section--vignette-b  { --vx: 50%;  --vy: 100%; }

.hairline {
	height: 1px;
	border: 0;
	margin: 0;
	background: var(--gold-pale);
}

.grid {
	display: grid;
	gap: clamp(24px, 3vw, 40px);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* Section head: eyebrow + H2, optionally split with a "view all" link. */
.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head h2 { margin: 0; }
.section-head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 40px;
	max-width: none;
}
.section-head--split > div { max-width: 760px; }
.section-head__link { color: var(--ink); padding-bottom: 4px; }
.section-head__link::after { content: " \2192"; }

/* 6. Buttons and links ------------------------------------------------------- */

a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--gold), var(--gold));
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 300ms var(--ease);
}
a:hover, a:focus-visible { background-size: 100% 1px; }

/* Bare links — cards, logo, images — get no underline at all. */
.card a, .site-brand, .btn, .exhibit a { background-image: none; }

.prose a { background-size: 100% 1px; background-image: linear-gradient(var(--gold-pale), var(--gold-pale)); }
.prose a:hover { background-image: linear-gradient(var(--gold), var(--gold)); }

.btn {
	--btn-fg: var(--ink);
	--btn-fill: var(--wine);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 48px;
	padding: 0 28px;
	border: 1px solid var(--ink);
	overflow: hidden;
	isolation: isolate;
	color: var(--btn-fg);
	font: 500 12px/1 var(--font-ui);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	cursor: pointer;
	background: transparent;
	transition: color 400ms var(--ease), border-color 400ms var(--ease);
}
/* The fill sweeps in from the left. No lift, no shadow bloom. */
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--btn-fill);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 400ms var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--paper); border-color: var(--btn-fill); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }

/* Primary: already wine; the sweep deepens it to ink. */
.btn--primary { --btn-fg: var(--paper); --btn-fill: var(--ink); background: var(--wine); border-color: var(--wine); }

/* Quiet: for the second action beside a primary. */
.btn--quiet { --btn-fill: var(--ink); border-color: var(--gold); }

/* 7. Case-file kit ----------------------------------------------------------- */

/* The File No. stamp: inked, slightly off-square, a touch uneven. */
.stamp {
	display: inline-flex;
	align-items: baseline;
	gap: .6em;
	padding: 7px 12px 6px;
	border: 1.5px solid var(--wine);
	color: var(--wine);
	font: 600 12px/1 var(--font-ui);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	opacity: .88;
	transform: rotate(-1.5deg);
	/* Faint edge roughness: the ink didn't hit evenly. The filter is an
	   inline SVG printed once in footer.php. */
	filter: url("#atelier-ink");
}
.stamp__label { font-weight: 400; opacity: .8; }

/* Every image is evidence: white mat, soft shadow. */
.exhibit { margin: 0; }
.exhibit__frame {
	padding: 10px;
	background: #fff;
	box-shadow: var(--shadow-exhibit);
	overflow: hidden;
}
.exhibit__img {
	width: 100%;
	transition: transform 600ms var(--ease);
}
.exhibit--tilt-left  { transform: rotate(-4deg); }
.exhibit--tilt-right { transform: rotate(3deg); }
.exhibit__caption {
	margin-top: 12px;
	font: 400 11px/1.4 var(--font-ui);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--ink-faint);
}

/* Exhibit tag — a small pinned label, e.g. "Exhibit A". */
.tag {
	display: inline-block;
	padding: 5px 10px;
	background: var(--paper-raised);
	border: 1px solid var(--gold-pale);
	font: 500 11px/1 var(--font-ui);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* The crest / W mark slot. Colour comes from currentColor so a supplied
   SVG recolours with its context: gold on paper, paper on the panel. */
.atelier-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--gold);
	line-height: 1;
}
.atelier-mark svg { width: 100%; height: 100%; fill: currentColor; }
.atelier-mark img { display: block; width: auto; height: 100%; }
.atelier-mark--sm { height: 30px;  font-size: 30px; }
.atelier-mark--md { height: 56px;  font-size: 56px; }
.atelier-mark--lg { height: 120px; font-size: 120px; }
.atelier-mark--type {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1em;
	letter-spacing: -.04em;
}

/* Catalogue kit — lot, folio, plate, rules. */
:root {
	--hair: 1px solid rgba(138, 122, 104, .35);   /* --ink-faint at .35 */
	--hair-double: 3px double rgba(138, 122, 104, .45);
}

.lot {
	display: inline-flex;
	align-items: baseline;
	gap: .5em;
	padding-bottom: 6px;
	border-bottom: var(--hair);
	font: 500 11px/1 var(--font-ui);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--ink-soft);
}
.lot__label, .lot__of { color: var(--ink-faint); }

.folio {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 clamp(28px, 3vw, 44px);
	padding-top: 14px;
	border-top: var(--hair-double);
	font: 500 10.5px/1.4 var(--font-ui);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.folio__title { color: var(--ink-soft); }

.plate { margin: 0; }
.plate__frame { overflow: hidden; background: var(--paper-deep); }
.plate__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.plate__link:hover :is(.plate__img, .plate__video), .plate__link:focus-visible :is(.plate__img, .plate__video) { transform: scale(1.02); }
.plate__caption {
	display: grid;
	gap: 4px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: var(--hair);
}
.plate__line {
	font: 500 10.5px/1.4 var(--font-ui);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.plate__credit { font: italic 400 15px/1.3 var(--font-body); color: var(--ink-faint); }
.plate--bleed .plate__frame { margin-right: calc(-1 * var(--gutter)); }
.plate--empty .plate__caption { margin-top: 0; }

/* The second pose: fades in over the first, as if she moved. */
.plate--has-hover .plate__frame { position: relative; }
.plate__img--hover { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 600ms var(--ease); }
.plate--has-hover .plate__frame:hover .plate__img--hover { opacity: 1; }

/* Archetype reels (spec 2026-10-07): the clip lies over the still, which
   stays the LCP image. JS adds .is-reel (armed), .is-live (clip showing),
   .is-playing, .is-paused, .is-still-only — all kept by the RUCSS .is-(.*)
   safelist entry. */
.plate--reel .plate__frame { position: relative; }
.plate__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms var(--ease), transform 1.2s var(--ease);
}
.plate__video.is-live { opacity: 1; }
.plate__toggle {
	display: none;
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid var(--gold-pale);
	background: rgba(251, 248, 241, .86);
	color: var(--ink);
	font: inherit;
	cursor: pointer;
}
.plate__toggle:hover, .plate__toggle:focus-visible { border-color: var(--gold); }
.plate__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.plate.is-reel .plate__toggle { display: inline-flex; }

.rule-double { border: 0; border-top: var(--hair-double); margin: 0; }

/* Catalogue index — homepage §VI, the jurisdiction page, the shop. */
.home-index__list { columns: 2; column-gap: clamp(32px, 6vw, 96px); margin: 0; padding: 0; list-style: none; }
.home-index__list li { break-inside: avoid; }
.home-index__row { display: flex; align-items: baseline; gap: 10px; padding-block: 14px; border-bottom: var(--hair); background-image: none; }
.home-index__name { font: 400 clamp(22px, 2.2vw, 28px)/1.1 var(--font-display); }
.home-index__leader { flex: 1; border-bottom: 1px dotted var(--ink-faint); transform: translateY(-5px); opacity: .6; }
.home-index__count { font: 500 12px/1 var(--font-ui); letter-spacing: .14em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.home-index__row { position: relative; }
.home-index__name, .home-index__count { transition: translate var(--dur-spring) var(--spring), color var(--dur-base) var(--ease); }
.home-index__row:hover .home-index__name { color: var(--wine); translate: 8px 0; }
.home-index__row:hover .home-index__count { color: var(--gold); }
/* A gold hairline draws over the rule on hover. */
.home-index__row::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px;
	height: 1px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-base) var(--ease-couture);
}
.home-index__row:hover::after { transform: scaleX(1); }
@media (max-width: 640px) { .home-index__list { columns: 1; } }

/* Opening — every interior page's title page (Stage 4a). */
.opening { padding-top: clamp(8px, 2vw, 24px); margin-bottom: clamp(40px, 5vw, 72px); }
.opening__body { max-width: 720px; margin: clamp(32px, 5vw, 80px) auto 0; text-align: center; }
.opening__copy > .lot { margin-bottom: 28px; }
.opening .page-title { margin: 0; overflow-wrap: break-word; }
.opening .rule-wine::after { margin-inline: auto; }
.opening__lede { max-width: 40ch; margin: 24px auto 0; }
.opening__after { margin-top: 28px; }
.opening__after > * + * { margin-top: 18px; }
.opening--plate .opening__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
	max-width: none;
	text-align: left;
}
.opening--plate .rule-wine::after { margin-inline: 0; }
.opening--plate .opening__lede { margin-inline: 0; }
.opening__close { height: 0; margin: clamp(40px, 5vw, 64px) 0 0; border: 0; border-top: var(--hair-double); }
@media (max-width: 900px) { .opening--plate .opening__body { grid-template-columns: minmax(0, 1fr); } }

/* Tabs — the fine filter row (Registry, jurisdictions, shop). */
.tabs { display: grid; gap: 12px; margin-bottom: clamp(40px, 5vw, 64px); padding-bottom: 18px; border-bottom: var(--hair); }
.tabs__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; }
.tabs__item {
	padding-block: 6px;
	background-image: none;
	font: 500 11.5px/1.2 var(--font-ui);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--ink-soft);
}
.tabs__item:hover, .tabs__item:focus-visible { color: var(--ink); }
.tabs__item[aria-current] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--gold); }
.tabs__count { margin-left: 3px; font-size: .75em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tabs__aside { margin-left: auto; }
.tabs__aside::after { content: " \2192"; }

/* Closing folio — the end of a file or an essay (Stage 4b). */
.closing { margin-block: clamp(40px, 5vw, 72px); text-align: center; }
.closing::before { content: ""; display: block; max-width: 720px; margin: 0 auto 18px; border-top: var(--hair-double); }
.closing__line {
	margin: 0;
	font: 500 10.5px/1.4 var(--font-ui);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

/* Essay rows — the archive's quiet list (Stage 4b). */
.essay-list { border-top: var(--hair); }
.essay-list--columns { columns: 2; column-gap: clamp(32px, 5vw, 72px); }
.essay-row { break-inside: avoid; border-bottom: var(--hair); }
.essay-row__link { display: flex; gap: 20px; align-items: center; padding-block: 20px; background-image: none; color: var(--ink); }
.essay-row__body { display: grid; gap: 8px; flex: 1; min-width: 0; }
.essay-row__body > .lot { justify-self: start; }
.essay-row__title { font: 400 clamp(21px, 1.9vw, 26px)/1.15 var(--font-display); }
.essay-row__link:hover .essay-row__title { color: var(--wine); }
.essay-row__meta { font: 500 11px/1.3 var(--font-ui); letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--ink-faint); }
.essay-row__thumb { flex: none; width: 96px; aspect-ratio: 1; overflow: hidden; background: var(--paper-deep); }
.essay-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1080px) { .essay-list--columns { columns: 1; } }

/* page.php — plain pages read at essay measure (Stage 4b). */
.page-default__content { margin-inline: auto; }
.opening__note { max-width: 52ch; margin-inline: auto; font-style: italic; color: var(--ink-soft); }
.card--wife .card__body > .lot { margin-bottom: 10px; }

/* Provenance — sourced facts only; empty rows never reach the page. */
.provenance { display: grid; margin: 0; border-top: var(--hair); width: 100%; }
.provenance > div { display: grid; grid-template-columns: 9em 1fr; gap: 16px; padding-block: 12px; border-bottom: var(--hair); }
.provenance dt { font: 500 10.5px/1.6 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.provenance dd { margin: 0; font: 400 19px/1.3 var(--font-body); }
.provenance dd a { background-size: 100% 1px; }

/* Section numeral: the Roman number leads the eyebrow, set off by a hairline. */
.eyebrow__numeral {
	display: inline-block;
	margin-right: .7em;
	padding-right: .7em;
	border-right: var(--hair);
	font: 500 1.35em/1 var(--font-display);
	letter-spacing: .04em;
	color: var(--gold);
	vertical-align: -.08em;
}

/* An image not yet in the archive: an empty mat, never a broken <img>. */
.plate__frame--pending {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	background: var(--paper-raised);
	border: var(--hair);
}

/* A look card numbered as a lot. */
.card--look .card__body > .lot { margin-bottom: 10px; }

/* 8. Cards ------------------------------------------------------------------- */

/* Cards hold still except the look card, which lifts on a spring when a
   real pointer hovers (PK, 2026-10-04). The picture breathes inside every
   frame. */
.card {
	display: flex;
	flex-direction: column;
	background: var(--paper-raised);
	border: 1px solid var(--gold-pale);
}
.card__media { overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-deep); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.card:hover .card__media img,
.card:focus-within .card__media img { transform: scale(1.03); }
.card__body { padding: 22px 22px 26px; display: grid; gap: 8px; }
.card__meta,
.card__file {
	font: 500 11px/1.4 var(--font-ui);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--ink-faint);
}
.card__title { margin: 0; font-size: clamp(24px, 2vw, 30px); line-height: 1.05; }

/* The look card: one standard frame for every product photo (PK,
   2026-10-01) — 4:5, filled edge to edge, anchored at the top so a worn
   look keeps its face. Product shots on white (atelier_shows_whole) stay
   whole on white instead of being blown up and cut off. */
.card--look .card__media { aspect-ratio: 4 / 5; background: var(--paper-deep); }
.card--look .card__media img { object-fit: cover; object-position: center top; }
.card__media--whole { background: #fff; }
.card__media--whole img { object-fit: contain; padding: 8%; }

/* Side-by-side composites (atelier_composite_half): the image is laid out
   twice the frame's width so exactly one half shows — no seam. Hover zoom
   scales about the visible half's centre, so the other half never peeks. */
.card__media--half, .plate--half .plate__frame { background: #fff; }
.card__media--half img, .plate--half .plate__img { width: 200%; max-width: none; }
.card__media--right img, .plate--right .plate__img { margin-left: -100%; }
.card__media--right img { transform-origin: 75% 50%; }
.card__media--left img { transform-origin: 25% 50%; }
.card--look .card__title { font-size: 20px; line-height: 1.2; }
.card--look { transition: translate var(--dur-spring) var(--spring), box-shadow var(--dur-base) var(--ease); }
@media (hover: hover) {
	.card--look:hover { translate: 0 -4px; box-shadow: var(--shadow-exhibit); }
}
.card__brand {
	display: block;
	margin-bottom: 6px;
	font: 500 12px/1.3 var(--font-ui);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--ink);
}
.card--look .price { color: var(--ink-soft); margin-top: 4px; }

/* The buy row under a shoppable look card. Outside the card's own link. */
.card--look > a { flex: 1; }
.card__buy { padding: 0 22px 22px; }
.card__buy-btn { width: 100%; min-height: 44px; }
.card__unavailable {
	margin: 0;
	font-size: 16px;
	font-style: italic;
	line-height: 1.4;
	color: var(--ink-faint);
}
.card__unavailable .wl-unavailable-mark { margin-right: .4em; }

/* The archetype grid: the twelve, four across. Homepage and quiz page. */
.archetype-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
}
.card--archetype .card__body { padding: 16px 18px 20px; gap: 6px; }
.card--archetype .card__title { font-size: clamp(20px, 1.7vw, 26px); }

/* The Twelve: the lot number lifts and a gold hairline draws under the name. */
.card--lot .lot { transition: translate var(--dur-spring) var(--spring); }
.card--lot:hover .lot { translate: 0 -2px; }
.card--lot .card__title {
	justify-self: start;
	background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0% 1px no-repeat;
	transition: background-size var(--dur-base) var(--ease-couture);
}
.card--lot:hover .card__title, .card--lot:focus-within .card__title { background-size: 100% 1px; }

@media (max-width: 1000px) { .archetype-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .archetype-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.home-twelve__nudge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 32px;
	margin-top: clamp(48px, 5vw, 72px);
	text-align: center;
}
.home-twelve__nudge .lede { margin: 0; font-style: italic; }

/* Product grids are four across (PK, 2026-10-01): 3 on tablets, 2 on
   phones. Each page stylesheet sets repeat(4); these steps carry .grid for
   the specificity to win over it whichever file loads last. */
@media (max-width: 1080px) {
	.grid.shop__grid, .grid.home-evidence__grid, .grid.look-more__grid, .grid.dispatch-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.grid.shop__grid, .grid.home-evidence__grid, .grid.look-more__grid, .grid.dispatch-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* The wife card grid: Registry, jurisdictions, archetype tribes. */
.registry__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.card--wife .card__title { font-size: clamp(22px, 1.8vw, 26px); }
.card__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	border: 10px solid #fff;
	background: var(--paper-raised);
}

@media (max-width: 600px) {
	.registry__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.card--wife .card__body { padding: 14px 12px 18px; }
	.card--wife .card__title { font-size: 19px; }
}

/* Wife cards: the same second pose on hover or keyboard focus. */
.card--has-hover .card__media { position: relative; }
.card__hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 600ms var(--ease);
}
.card--has-hover a:hover .card__hover,
.card--has-hover a:focus-visible .card__hover { opacity: 1; }

/* No hover on touch: don't download a pose nobody can reveal. */
@media (hover: none) {
	.card__hover,
	.plate__img--hover { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.card__hover,
	.plate__img--hover { transition: none; }
}

/* Filter chips: Registry, jurisdictions, shop. */
.filter-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 11px 16px;
	border: 1px solid var(--gold-pale);
	background: var(--paper-raised);
	background-image: none;
	font: 500 12px/1 var(--font-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink);
}
.filter-chip:hover, .filter-chip:focus-visible { border-color: var(--gold); background-color: var(--paper); }
.filter-chip[aria-current] { border-color: var(--wine); color: var(--wine); }
.filter-chip__count { color: var(--ink-faint); font-weight: 400; font-variant-numeric: tabular-nums; }

/* Data rows: the dossier exhibit card, the Heiress's dossier panel. */
.exhibit-card__data {
	margin: 0;
	border-top: 1px solid var(--gold-pale);
}
.exhibit-card__row {
	display: grid;
	gap: 4px;
	padding-block: 14px;
	border-bottom: 1px solid var(--gold-pale);
}
.exhibit-card__row dt { font-size: 11px; }
.exhibit-card__row dd {
	margin: 0;
	font-size: 19px;
	line-height: 1.3;
	color: var(--ink);
}
.exhibit-card__row a { background-size: 100% 1px; background-image: linear-gradient(var(--gold-pale), var(--gold-pale)); }
.exhibit-card__row a:hover { background-image: linear-gradient(var(--gold), var(--gold)); }

/* The Inner Circle form (the band itself is §10's invitation card). */
.inner-circle h2 { margin: 0 0 .3em; font-size: clamp(32px, 3.4vw, 48px); }
.inner-circle__sub { margin: 0; font-size: 20px; line-height: 1.45; color: var(--ink-soft); }
.inner-circle__form { display: grid; gap: 10px; }
.inner-circle__input,
.field {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--gold);
	border-radius: 0;
	background: #fff;
	color: var(--ink);
	font: 400 16px/1.3 var(--font-ui);
}
.inner-circle__input:focus,
.field:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.inner-circle__trap,
.contact__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inner-circle__msg { min-height: 1.4em; margin: 0; font-size: 17px; font-style: italic; }
.inner-circle__msg.is-ok { color: var(--ink); }
.inner-circle__msg.is-error { color: var(--wine); }

/* Page hero + CTA band: static pages and the blog. */
.page-hero { max-width: 780px; }
.page-hero .stamp { margin-bottom: 28px; }
.page-hero .eyebrow { margin-bottom: 12px; }
.page-hero .lede { margin-top: 24px; }
.page-hero--center { margin-inline: auto; text-align: center; }
.page-hero--center .rule-wine::after { margin-inline: auto; }
.page-hero__aside { margin: 12px 0 0; font-size: 20px; color: var(--ink-soft); }
.page-hero__portrait { max-width: 380px; margin: 48px auto 0; }
.page-cta { text-align: center; }
.page-cta .lede { max-width: 44ch; margin-inline: auto; }
.page-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }
.page-cta__ornament { display: block; margin-bottom: 18px; color: var(--gold); letter-spacing: .4em; }

/* 9. Header ------------------------------------------------------------------ */

.case-strip {
	border-bottom: var(--hair);
	font: 500 10.5px/1 var(--font-ui);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.case-strip .wrap { display: flex; justify-content: space-between; gap: 24px; padding-block: 11px; }
.case-strip strong { color: var(--ink); font-weight: 600; }
.case-strip__link { color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; }
.case-strip__link:hover, .case-strip__link:focus-visible { color: var(--ink-faint); }

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(244, 239, 228, .96);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: var(--hair);
	transition: box-shadow 300ms var(--ease);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }

/* Full size: W centred on its own line, nav centred beneath it. */
.site-header__inner {
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	gap: 14px;
	padding-block: 18px 14px;
}
.site-brand { display: inline-flex; line-height: 0; }
.site-brand__mini { display: none; }

.site-nav { display: flex; align-items: center; gap: 36px; }
.site-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; margin: 0; padding: 0; list-style: none; }
.site-nav a { font: 500 11.5px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; padding-block: 6px; }
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a { background-size: 100% 1px; }
.site-nav .sub-menu { display: none; }
.site-nav__cta .btn { min-height: 36px; padding: 0 18px; font-size: 11px; }
.site-nav__folio { display: none; }
.site-header__quiz { display: none; }

/* Condensed (JS adds .is-condensed once the masthead has scrolled away): one
   slim row. On desktop the masthead scrolls with the page and the slim bar
   slides in fixed, with --header-h holding the masthead's place, so nothing
   below it moves. Sticky-and-shrink made the page jump and the header
   flicker at the threshold. Without JS the header stays sticky. */
.is-condensed .site-header { box-shadow: 0 8px 24px -18px rgba(20, 16, 13, .35); }
@media (min-width: 1081px) {
	/* top: auto — the sticky admin-bar offset would push a relative header
	   32px down over the page. */
	.js .site-header { position: relative; top: auto; }
	.is-condensed .site-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		animation: header-in 300ms var(--ease);
	}
	.is-condensed .admin-bar .site-header { top: 32px; } /* <html> carries is-condensed, <body> admin-bar */
	.is-condensed .site-main { margin-top: var(--header-h, 0px); }
}
@keyframes header-in {
	from { transform: translateY(-100%); }
	to   { transform: none; }
}
.is-condensed .site-header__inner {
	grid-template-columns: auto 1fr;
	justify-items: stretch;
	align-items: center;
	padding-block: 10px;
}
.is-condensed .site-brand__full { display: none; }
.is-condensed .site-brand__mini { display: inline-flex; }
.is-condensed .site-nav { justify-content: flex-end; }

.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
	display: block; width: 22px; height: 1px; margin-inline: auto;
	background: currentColor;
	transition: transform 300ms var(--ease), opacity 300ms var(--ease);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

/* Phones and small tablets: toggle | W | quiz. The menu is a full paper page.
   Without JS (no .js-nav on <html>) the nav stays a wrapped row — reachable. */
@media (max-width: 1080px) {
	.site-header__inner,
	.is-condensed .site-header__inner {
		grid-template-columns: 44px 1fr auto;
		justify-items: center;
		padding-block: 10px;
	}
	.site-brand__full { display: none; }
	.site-brand__mini { display: inline-flex; }
	.site-brand .atelier-mark--sm { height: 40px; }
	.site-header__quiz { display: inline-flex; min-height: 36px; padding: 0 14px; font-size: 11px; }
	.site-nav { grid-column: 1 / -1; }
	.site-nav__cta { display: none; }

	.js-nav .nav-toggle { display: block; }
	.js-nav .site-nav {
		position: fixed;
		inset: 61px 0 0;
		z-index: 99;
		display: block;
		padding: 32px var(--gutter);
		background: var(--paper);
		overflow-y: auto;
		visibility: hidden;
		opacity: 0;
		transition: opacity 300ms var(--ease), visibility 0s linear 300ms;
	}
	.admin-bar.js-nav .site-nav { top: 107px; }
	.nav-open .site-nav { visibility: visible; opacity: 1; transition-delay: 0s; }
	.js-nav .site-nav ul { flex-direction: column; flex-wrap: nowrap; gap: 0; counter-reset: navnum; }
	.js-nav .site-nav li { border-bottom: var(--hair); counter-increment: navnum; }
	.js-nav .site-nav a {
		display: flex; align-items: baseline; gap: 18px;
		padding-block: 20px;
		font: 500 clamp(28px, 7vw, 40px)/1 var(--font-display);
		letter-spacing: -.01em; text-transform: none; background-image: none;
	}
	.js-nav .site-nav a::before {
		content: counter(navnum, upper-roman);
		min-width: 2.2em;
		font: 500 11px/1 var(--font-ui); letter-spacing: .2em; color: var(--ink-faint);
	}
	.js-nav .site-nav__folio { display: block; margin-top: 40px; font: 500 10.5px/1.4 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); }
	.nav-open { overflow: hidden; }
}
/* Phones: the strip stays one line, so the sticky header keeps its height
   (header CLS fix, 2026-10-22). It measures 316px at most at 390 wide;
   below 380 the subject count goes so narrower phones fit too. */
@media (max-width: 600px) {
	.case-strip .wrap > :first-child { display: none; }
	.case-strip .wrap > :last-child { white-space: nowrap; }
}
@media (max-width: 379px) { .case-strip__count { display: none; } }

/* 10. Invitation + colophon -------------------------------------------------- */

.inner-circle { padding-block: var(--space-section) 0; }
.invitation {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
	max-width: 1080px;
	margin-inline: auto;
	padding: clamp(32px, 5vw, 64px);
	background: var(--paper-raised);
	border: 1px solid var(--gold-pale);
	outline: 1px solid var(--gold-pale);
	outline-offset: -10px;       /* the engraved inner border */
}
.invitation h2 { margin: 10px 0 12px; font-size: clamp(34px, 4vw, 52px); }
@media (max-width: 780px) { .invitation { grid-template-columns: 1fr; } }

.site-footer {
	margin-top: var(--space-section);
	padding-block: clamp(64px, 7vw, 112px) 32px;
	background: var(--panel);
	color: var(--paper-deep);
}
.site-footer a { color: var(--paper); }

.colophon__head { display: grid; justify-items: center; gap: 14px; text-align: center; padding-bottom: 48px; border-bottom: 1px solid rgba(217, 201, 166, .2); }
.colophon__name { margin: 0; font: 500 13px/1 var(--font-ui); letter-spacing: .5em; text-transform: uppercase; color: var(--paper); }
.site-footer__motto { margin: 0; font: italic 400 24px/1.3 var(--font-body); color: var(--paper-deep); }

.colophon__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 48px; border-bottom: 1px solid rgba(217, 201, 166, .2); }
.colophon__title { margin: 0 0 18px; font: 500 10.5px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-pale); }
.colophon__col ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font: 400 19px/1.3 var(--font-body); }
@media (max-width: 680px) { .colophon__cols { grid-template-columns: 1fr; gap: 28px; } }

.site-footer__disclosure { max-width: 88ch; margin-inline: auto; padding-block: 32px; font-size: 16px; line-height: 1.5; text-align: center; color: rgba(235, 227, 211, .72); }
.site-footer__disclosure a { background-size: 100% 1px; background-image: linear-gradient(var(--gold), var(--gold)); }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 1px solid rgba(217, 201, 166, .2); font: 400 10.5px/1.6 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(235, 227, 211, .55); }

/* 11. Reveal + reduced motion ------------------------------------------------ */

/* Opacity plus a 24px rise, once. atelier.js adds .reveal-armed only to
   below-the-fold elements, so content is never hidden while the script is
   slow, delayed by WP Rocket, or missing. */
.reveal-armed {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--dur-base) var(--ease-couture), transform var(--dur-base) var(--ease-couture);
	transition-delay: calc(var(--reveal-i, 0) * 80ms);
}
.reveal-armed.is-in { opacity: 1; transform: none; }

/* Folios turn like catalogue pages: in from the left, a beat early. */
.folio.reveal-armed { transform: translateX(-24px); }
.folio.reveal-armed.is-in { transform: none; }

/* Markup injected after load (quiz results) fades quickly and nothing else:
   no unveil, no line rise, so it never feels theatrical. */
.reveal-quick.reveal-armed {
	transform: none;
	transition-duration: var(--dur-quick);
	transition-delay: 0s;
}

/* Unveil: the frame wipes open top to bottom while the picture settles from
   108% inside it. The figure itself never fades — only the caption does. */
.reveal-unveil.reveal-armed { opacity: 1; transform: none; }
.reveal-unveil :is(.plate__frame, .card__media) {
	transition: clip-path var(--dur-slow) var(--ease-couture);
	transition-delay: calc(var(--reveal-i, 0) * 80ms);
}
.reveal-unveil.reveal-armed :is(.plate__img, .card__media img) { transition: transform var(--dur-slow) var(--ease-couture); }
.reveal-unveil.reveal-armed :is(.plate__caption, .card__body) {
	transition: opacity var(--dur-base) var(--ease-couture);
	transition-delay: calc(var(--reveal-i, 0) * 80ms + 300ms);
}
.reveal-unveil.reveal-armed:not(.is-in) :is(.plate__frame, .card__media) { clip-path: inset(0 0 100% 0); }
.reveal-unveil.reveal-armed:not(.is-in) :is(.plate__img, .card__media img) { transform: scale(1.08); }
.reveal-unveil.reveal-armed:not(.is-in) :is(.plate__caption, .card__body) { opacity: 0; }

/* Injected cards skip the unveil: they just fade. */
.reveal-quick.reveal-unveil.reveal-armed:not(.is-in) { opacity: 0; }
.reveal-quick.reveal-unveil.reveal-armed:not(.is-in) :is(.plate__frame, .card__media) { clip-path: none; }
.reveal-quick.reveal-unveil.reveal-armed:not(.is-in) :is(.plate__img, .card__media img) { transform: none; }
.reveal-quick.reveal-unveil.reveal-armed:not(.is-in) :is(.plate__caption, .card__body) { opacity: 1; }

/* Drift: the picture moves a few percent against the scroll inside a still
   frame. translate/scale, not transform, so it composes with hover zoom and
   the unveil settle. Browsers without scroll timelines (Firefox) stay still. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.drift :is(.plate__img, .plate__video, .card__media img) {
			scale: 1.1;
			animation: atelier-drift linear both;
			animation-timeline: view();
		}
	}
}
@keyframes atelier-drift { from { translate: 0 -4%; } to { translate: 0 4%; } }

/* Line rise: the container stays put; each word rises out of its own mask,
   one line after another. JS restores plain markup afterwards. */
.reveal-lines.reveal-armed { opacity: 1; transform: none; }
.reveal-lines .word { display: inline-block; clip-path: inset(-.4em -.2em -.2em -.2em); }
.reveal-lines .word__in {
	display: inline-block;
	transition: transform var(--dur-base) var(--ease-couture), opacity var(--dur-base) var(--ease-couture);
	transition-delay: calc(var(--reveal-i, 0) * 80ms + var(--line-i, 0) * 120ms);
}
.reveal-lines.reveal-armed:not(.is-in) .word__in { transform: translateY(100%); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 1ms !important;
		transition-delay: 0s !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
	}
	.reveal-armed,
	.folio.reveal-armed { opacity: 1; transform: none; }
	.reveal-unveil.reveal-armed :is(.plate__frame, .card__media) { clip-path: none; }
	.reveal-unveil.reveal-armed :is(.plate__img, .card__media img) { transform: none; }
	.reveal-unveil.reveal-armed :is(.plate__caption, .card__body) { opacity: 1; }
	.reveal-lines .word__in { transform: none; opacity: 1; }
	.plate__img { transition: none; }
	.plate__video { display: none !important; }
}