@font-face {
	font-family: "Inter Tight";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Naira sign, Igbo and Yoruba diacritics (ụ ọ ị ṅ) live in Latin Extended. */
@font-face {
	font-family: "Inter Tight";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/inter-tight-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0300-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--ink: #11100f;
	--warm-black: #1a1816;
	--bone: #f6f3ee;
	--paper: #fcfbf8;
	--stone: #82786d;
	--sand: #d8cfc3;
	--earth: #6b5a4c;
	--olive: #68705d;
	--ochre: #e6c894;
	--clay: #9e3b2b;
	--line: #e4ddd3;
	--muted-on-dark: #a79c90;
	--body-text: #4a433d;
	--line-on-dark: #2e2a26;

	--font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

	--gutter: 48px;
	--max: 1440px;
	--header-h: 72px;

	--btn-h: 40px;
	--btn-h-lg: 44px;
	--btn-pad: 20px;

	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	--dur-press: 140ms;
	--dur-fast: 200ms;
	--dur-panel: 420ms;
	--dur-panel-exit: 260ms;

	interpolate-size: allow-keywords;
}

/* Landscape phones put the notch at the side; the gutter must clear it. */
@media (max-width: 1024px) {
	:root { --gutter: max(32px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
}

@media (max-width: 720px) {
	:root {
		--gutter: max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
		--header-h: 56px;
	}
}

/* Signed-in admins see WordPress's toolbar on top of the page; fixed and sticky parts sit below it. */
:root { --admin-bar: 0px; }
body.admin-bar { --admin-bar: 32px; }

@media (max-width: 782px) {
	body.admin-bar { --admin-bar: 46px; }
}

/* WordPress lets the toolbar scroll away on small phones, which would leave a gap above fixed panels. */
@media (max-width: 600px) {
	#wpadminbar { position: fixed; }
}

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

[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scroll-behavior: smooth;
}

/* Reduced motion keeps fades and colour changes; each component drops its own movement. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

button, a, label, summary, [role="button"] { touch-action: manipulation; }

button, summary, [role="button"], .btn, .chip, .tabs__tab {
	-webkit-user-select: none;
	user-select: none;
}

/* Smooth open and close for accordions; browsers without ::details-content simply snap. */
.accordion::details-content {
	block-size: 0;
	overflow: clip;
	transition: block-size 260ms var(--ease-out), content-visibility 260ms allow-discrete;
}

.accordion[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
	.accordion::details-content { transition: none; }
}

body {
	margin: 0;
	background: var(--bone);
	color: var(--ink);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "ss01", "cv11";
}

body.is-locked { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
/* :where keeps the reset at zero specificity, so a list's own class can set its padding. */
:where(ul[class], ol[class]) { list-style: none; padding: 0; }

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

.screen-reader-text, .sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	z-index: 1000;
	top: 8px;
	left: 8px;
	margin: 0;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 12px 16px;
	background: var(--ink);
	color: var(--bone);
}

.icon {
	width: 1em;
	height: 1em;
	flex: none;
	fill: currentColor;
}

/* Type scale from the design system */
.t-display { font-size: clamp(48px, 7.4vw, 96px); font-weight: 400; letter-spacing: -0.0375em; line-height: 0.94; }
.t-h1 { font-size: clamp(36px, 4.6vw, 56px); font-weight: 400; letter-spacing: -0.032em; line-height: 1; }
.t-h2 { font-size: clamp(30px, 3.2vw, 40px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; }
.t-h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.017em; line-height: 1.1; }
.t-body { font-size: 15px; line-height: 1.45; }
.t-lead { font-size: 16px; line-height: 1.55; color: var(--body-text); }
.t-label { font-size: 12px; font-weight: 500; letter-spacing: 0.117em; line-height: 1.3; text-transform: uppercase; }
.t-caption { font-size: 11px; font-weight: 500; letter-spacing: 0.145em; line-height: 1.2; text-transform: uppercase; }
.t-meta { font-size: 12px; color: var(--stone); }
.meta-list { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; }
.meta-list__colour { display: inline-flex; align-items: center; gap: 6px; }
.meta-list__colour i { width: 10px; height: 10px; background: var(--swatch); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); }
.meta-list__fabric { display: inline-flex; align-items: center; gap: 6px; }
.meta-list__fabric .print-chip { width: 13px; height: 13px; }
.meta-list__size { padding: 1px 6px; border: 1px solid var(--line); color: var(--ink); font-size: 0.92em; letter-spacing: 0.02em; }

/* Browser surfaces carry the palette too. */
::selection { background: var(--ochre); color: var(--ink); }
html { scrollbar-color: var(--sand) transparent; accent-color: var(--ink); caret-color: var(--earth); }

.eyebrow {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.145em;
	text-transform: uppercase;
	color: var(--stone);
}

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

/* Buttons: deliberately compact (ASOS-sized) rather than the 48px of the first design pass. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: var(--btn-h);
	padding: 0 var(--btn-pad);
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--bone);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}

.btn .icon { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.btn:active, .icon-btn:active { transform: scale(0.97); }

.btn--secondary { background: transparent; color: var(--ink); }
.btn--light { background: transparent; border-color: var(--bone); color: var(--bone); }

@media (hover: hover) and (pointer: fine) {
	.btn:hover { --btn-hover: color-mix(in srgb, var(--ink) 70%, var(--earth)); background: var(--btn-hover); border-color: var(--btn-hover); }
	.btn:hover .icon--arrow-right { transform: translateX(3px); }
	.btn--secondary:hover { background: var(--ink); border-color: var(--ink); color: var(--bone); }
	.btn--light:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }
}

.btn--lg { height: var(--btn-h-lg); }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn.is-disabled {
	background: var(--sand);
	border-color: var(--sand);
	color: var(--paper);
	cursor: not-allowed;
}

.btn.is-loading { pointer-events: none; opacity: 0.7; }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid currentColor;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.117em;
	text-transform: uppercase;
}

.link-arrow .icon { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
	.link-arrow:hover .icon { transform: translateX(3px); }
}

.tabs { display: flex; align-items: center; gap: 32px; }

.tabs__tab {
	padding-bottom: 6px;
	border-bottom: 1px solid transparent;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.117em;
	text-transform: uppercase;
	color: var(--stone);
	transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
	.tabs__tab:hover { color: var(--ink); }
}
.tabs__tab[aria-selected="true"], .tabs__tab[aria-current="page"] { color: var(--ink); border-color: var(--ink); }
.tabs__divider { width: 1px; height: 16px; background: var(--sand); }

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ink);
	transition: transform var(--dur-press) var(--ease-out);
}

.icon-btn .icon { width: 16px; height: 16px; }

/* Forms */
.field { display: grid; gap: 8px; }

.field__label, .form-row label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.127em;
	text-transform: uppercase;
	color: var(--stone);
}

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="number"], select, textarea {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--sand);
	border-radius: 0;
	background: var(--paper);
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	appearance: none;
	transition: border-color var(--dur-fast) ease;
}

/* iOS zooms the page into any input under 16px and never zooms back out. */
@media (pointer: coarse) {
	input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
	input[type="search"], input[type="number"], select, textarea { font-size: 16px; }
}

textarea { height: auto; min-height: 120px; padding: 12px 14px; }

select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2311100F' d='M212.24 100.24l-80 80a6 6 0 0 1-8.48 0l-80-80a6 6 0 0 1 8.48-8.48L128 167.51l75.76-75.75a6 6 0 0 1 8.48 8.48z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
}

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--ink);
}

input::placeholder, textarea::placeholder { color: var(--stone); }

/* Zero specificity so components that hide the native control (size chips) keep their own sizing. */
:where(input[type="checkbox"], input[type="radio"]) {
	flex-shrink: 0;
	display: grid;
	place-content: center;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--ink);
	background: var(--paper);
	appearance: none;
	cursor: pointer;
	transition: background-color var(--dur-fast) ease;
}

:where(input[type="radio"]) { border-radius: 50%; }

:where(input[type="checkbox"], input[type="radio"])::before {
	content: "";
	width: 12px;
	height: 12px;
	background: var(--bone);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.75 6.25 4.6 9.1 10.25 3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--dur-fast) var(--ease-out);
}

:where(input[type="radio"])::before { width: 10px; height: 10px; }
:where(input[type="checkbox"], input[type="radio"]):checked { background: var(--ink); }
:where(input[type="checkbox"], input[type="radio"]):checked::before { clip-path: inset(0); transition-delay: 40ms; }
:where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	:where(input[type="checkbox"], input[type="radio"])::before { clip-path: none; opacity: 0; transition: opacity var(--dur-fast) ease; }
	:where(input[type="checkbox"], input[type="radio"]):checked::before { clip-path: none; opacity: 1; }
}

/* Custom select (assets/js/select.js) */
.select { position: relative; display: inline-flex; min-width: 0; }
.select__native { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

.select__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--sand);
	background: var(--paper);
	font-size: 14px;
	text-align: left;
	transition: border-color var(--dur-fast) ease;
}

.select__trigger:focus-visible, .select__trigger[aria-expanded="true"] { outline: none; border-color: var(--ink); }
.select__trigger.is-placeholder .select__value { color: var(--stone); }
.select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select__caret { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.select__trigger[aria-expanded="true"] .select__caret { transform: rotate(180deg); }

.select__list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 30;
	min-width: 100%;
	max-height: 280px;
	margin: 0;
	padding: 6px 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	background: var(--paper);
	box-shadow: 0 1px 2px rgb(17 16 15 / 0.06), 0 12px 32px rgb(17 16 15 / 0.1);
	transform-origin: top;
	transition: opacity 160ms ease, transform 160ms var(--ease-out), display 160ms allow-discrete;
}

.select__list[hidden] { opacity: 0; transform: scale(0.97); transition-duration: 120ms; }

@starting-style {
	.select__list { opacity: 0; transform: scale(0.97); }
}

.opens-up .select__list { top: auto; bottom: calc(100% + 4px); transform-origin: bottom; }

.select__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 16px;
	font-size: 14px;
	white-space: nowrap;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.select__option.is-active { background: var(--bone); }
.select__option[aria-selected="true"] { font-weight: 500; }
.select__option[aria-selected="true"]::after { content: ""; width: 10px; height: 6px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(-45deg); }
.select__option[aria-disabled="true"] { color: var(--sand); cursor: not-allowed; }
.select__option--placeholder { color: var(--stone); }

/* Inline variant: reads as a text control, for sort menus in toolbars. */
.select--inline .select__trigger { height: auto; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.select--inline .select__list { left: auto; right: 0; text-transform: none; letter-spacing: 0; font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
	.select__list[hidden] { transform: none; }
	@starting-style { .select__list { transform: none; } }
}

.status { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.127em; text-transform: uppercase; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--earth { color: var(--earth); }
.status--olive { color: var(--olive); }
.status--stone { color: var(--stone); }
.status--clay { color: var(--clay); }

.code-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 32px;
	padding: 0 10px 0 12px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--ink);
	transition: border-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}

.code-chip:active { transform: scale(0.97); }
.code-chip__label { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }
.code-chip__value { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; font-variant-numeric: tabular-nums slashed-zero; user-select: text; }
.code-chip__icon { display: grid; width: 14px; height: 14px; }
.code-chip__icon .icon { grid-area: 1 / 1; width: 14px; height: 14px; transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) ease; }
.code-chip__copy { color: var(--stone); }
.code-chip__done { color: var(--olive); opacity: 0; transform: scale(0.5); filter: blur(2px); }
.code-chip.is-copied { border-color: var(--olive); }
.code-chip.is-copied .code-chip__copy { opacity: 0; transform: scale(0.5); filter: blur(2px); }
.code-chip.is-copied .code-chip__done { opacity: 1; transform: none; filter: none; }
.code-chip__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
	.code-chip:hover { border-color: var(--ink); }
	.code-chip:hover .code-chip__copy { color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
	.code-chip__icon .icon { transform: none !important; filter: none !important; }
}

.woocommerce-notices-wrapper:has(> *), .woocommerce-NoticeGroup {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: 24px var(--gutter) 0;
}

.notice,.woocommerce-error:not(.notice) {
	--notice-accent: var(--olive);
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) auto;
	align-items: start;
	gap: 12px;
	margin: 0;
	padding: 16px 12px 16px 18px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
	background: color-mix(in srgb, var(--notice-accent) 13%, var(--paper));
	animation: notice-in var(--dur-panel) var(--ease-out);
}

.notice[hidden] { display: none; }
.notice--info { --notice-accent: var(--earth); }
.notice--error, .woocommerce-error:not(.notice) { --notice-accent: var(--clay); }
/* WooCommerce focuses alerts so screen readers announce them; they aren't controls, so no focus ring. */
.notice:focus { outline: none; }

.notice__icon { width: 20px; height: 20px; color: var(--notice-accent); }
.notice__body { align-self: center; min-width: 0; }
.notice__body:has(> .button) { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.notice__body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.notice__action {
	margin-left: 4px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	transition: text-decoration-color var(--dur-fast) ease;
}
.notice__action:disabled { opacity: 0.5; cursor: progress; }
@media (hover: hover) { .notice__action:hover { text-decoration-color: currentColor; } }
.notice__body .button {
	order: 1;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration-color: currentColor;
}
.notice__title { margin-bottom: 6px; font-weight: 500; }
.notice__list { list-style: none; }
.notice__list:has(> li + li) { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; list-style: disc; color: var(--body-text); }
.notice__list:has(> li + li) li::marker { color: var(--notice-accent); }

.notice__close {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: -10px -6px -10px 0;
	color: var(--stone);
	transition: color var(--dur-fast) var(--ease-out);
}
.notice__close .icon { width: 14px; height: 14px; }

@media (hover: hover) {
	.notice__close:hover { color: var(--ink); }
	.notice__body .button:hover { color: var(--notice-accent); }
}

/* WooCommerce's checkout script writes this bare markup when the request itself fails, so it gets the icon from CSS. */
.woocommerce-error:not(.notice) { grid-template-columns: 20px minmax(0, 1fr); }
.woocommerce-error:not(.notice)::before {
	content: "";
	width: 20px;
	height: 20px;
	background: var(--notice-accent);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,26A102,102,0,1,0,230,128,102.12,102.12,0,0,0,128,26Zm0,192a90,90,0,1,1,90-90A90.1,90.1,0,0,1,128,218Zm-6-82V80a6,6,0,0,1,12,0v56a6,6,0,0,1-12,0Zm16,36a10,10,0,1,1-10-10A10,10,0,0,1,138,172Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.toasts {
	position: fixed;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	left: var(--gutter);
	z-index: 80;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(420px, calc(100% - 2 * var(--gutter)));
	pointer-events: none;
}
.notice--toast { --toast-from: 8px; pointer-events: auto; box-shadow: 0 12px 32px rgb(17 16 15 / 0.14); animation-name: toast-in; }

/* Phones keep toasts at the top, clear of the sticky Add to bag bar. */
@media (max-width: 720px) {
	.toasts { top: calc(var(--admin-bar) + 12px + env(safe-area-inset-top, 0px)); bottom: auto; flex-direction: column-reverse; }
	.notice--toast { --toast-from: -8px; }
}

@keyframes notice-in {
	from { opacity: 0; transform: translateY(-4px); }
}

@keyframes toast-in {
	from { opacity: 0; transform: translateY(var(--toast-from)); }
}

@media (prefers-reduced-motion: reduce) {
	@keyframes notice-in { from { opacity: 0; } }
	@keyframes toast-in { from { opacity: 0; } }
}

.media-fill {
	position: relative;
	overflow: hidden;
	background: var(--line);
}

.media-fill > img, .media-fill > video, .media-fill > picture img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.credit {
	font-size: 10.5px;
	letter-spacing: 0.04em;
	color: var(--stone);
}