/* Frame TV Arts v2 — compiled from Launch × Bento prototype */

:root {
	--teal: #008b9c;
	--cyan: #00c2d6;
	--grad: linear-gradient(135deg, #008b9c, #00c2d6);
	--ease: cubic-bezier(.16, 1, .3, 1);
	--max: 1280px;
	--header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.wrap { width: min(100% - 48px, var(--max)); margin-inline: auto; }

/* ---------- Header (floating over hero, solid after scroll) ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 60; transition: background .5s var(--ease), box-shadow .5s, color .4s; color: var(--hdr-ink, #111); }
.hdr__in { height: var(--header-h); display: flex; align-items: center; gap: 28px; transition: height .5s var(--ease); }
.hdr__logo { position: relative; height: 34px; flex: none; }
.hdr__logo img { height: 34px; width: auto; transition: opacity .35s; }
.hdr__logo .l-light { position: absolute; inset: 0; opacity: 0; }
.hdr__nav { display: flex; gap: 4px; margin-left: auto; }
.hdr__nav a { padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; opacity: .82; transition: opacity .2s, background .2s; }
.hdr__nav a:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.hdr__cta { padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--hdr-cta-bg, #111); color: var(--hdr-cta-ink, #fff); transition: transform .3s var(--ease); }
.hdr__cta:hover { transform: translateY(-1px); }
.hdr__burger { display: none; margin-left: auto; width: 42px; height: 42px; border: 0; border-radius: 12px; background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; cursor: pointer; }
.hdr__nav .menu--mobile-extra { display: none; }

/* Dark hero: light logo + white text until scrolled */
body.hero-dark .hdr:not(.is-solid) { --hdr-ink: #fff; --hdr-cta-bg: #fff; --hdr-cta-ink: #111; }
body.hero-dark .hdr:not(.is-solid) .l-light { opacity: 1; }
body.hero-dark .hdr:not(.is-solid) .l-dark { opacity: 0; }
body.hero-dark .hdr:not(.is-solid) { background: linear-gradient(rgba(0,0,0,.45), transparent); }

.hdr.is-solid { background: var(--hdr-solid, rgba(255,255,255,.78)); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 var(--hdr-line, rgba(0,0,0,.07)); }
.hdr.is-solid .hdr__in { height: 62px; }
/* Pages whose whole site is dark keep the light logo when solid */
body.site-dark .hdr.is-solid { --hdr-ink: #fff; --hdr-cta-bg: #fff; --hdr-cta-ink: #111; }
body.site-dark .hdr.is-solid .l-light { opacity: 1; }
body.site-dark .hdr.is-solid .l-dark { opacity: 0; }

/* ---------- Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(40px); filter: blur(6px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }

/* Line-by-line headline rise */
.split > span { display: block; overflow: hidden; }
.split > span > span { display: block; transform: translateY(105%); animation: lineUp 1.2s var(--ease) forwards; animation-delay: calc(var(--l, 0) * 110ms + 150ms); }
@keyframes lineUp { to { transform: none; } }
.fade-in { opacity: 0; animation: fadeIn 1.2s var(--ease) forwards; animation-delay: var(--fd, .5s); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Prototype switcher (demo only) ---------- */




@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	[data-reveal] { opacity: 1; transform: none; filter: none; }
}


/* Shared styles for the Launch × Bento pages (6-*.html) */
[hidden] { display: none !important; }
:root { --wall-hi: #24201d; --wall: #1a1714; --ground-hi: #100e0c; --ground: #070605; --lamp: 255,214,170;
	--room: radial-gradient(46% 60% at 50% 0%, rgba(var(--lamp),.1), transparent 70%), linear-gradient(180deg, var(--wall-hi), var(--wall)); }
body { background: var(--wall); color: #f5f5f7; font-family: "Inter", system-ui, sans-serif; --hdr-solid: rgba(30,26,23,.74); --hdr-line: rgba(255,255,255,.08); }
body.page-light { background: #f5f5f7; color: #1d1d1f; --hdr-solid: rgba(245,245,247,.78); --hdr-line: rgba(0,0,0,.07); }
.display { font-family: "Inter Tight", sans-serif; letter-spacing: -.045em; line-height: .95; font-weight: 700; }
.mono { font-family: "Geist Mono", monospace; }
.muted { color: #86868b; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border: 0; border-radius: 999px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: transform .4s var(--ease), background .3s, opacity .3s; }
.btn:hover { transform: scale(1.04); }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--white { background: #f5f5f7; color: #000; }
.btn--dark { background: #1d1d1f; color: #fff; }
.btn--teal { background: var(--grad); color: #fff; }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.btn--link { color: var(--cyan); padding-inline: 6px; background: none; }
.btn--link::after { content: "›"; font-size: 20px; line-height: 0; }
.light .btn--link, .page-light .btn--link { color: var(--teal); }
.was { text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: .55; font-weight: 500; margin-right: .3em; }
.hdr__price { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--cyan); transition: background .2s; }
.hdr__price:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.hdr__price .was { color: var(--hdr-ink, #111); opacity: .5; margin: 0; }
body:not(.hero-dark) .hdr__price, .hdr.is-solid .hdr__price { color: var(--teal); }
body.site-dark .hdr.is-solid .hdr__price { color: var(--cyan); }

.light { background: #f5f5f7; color: #1d1d1f; }
.light .muted, .page-light .muted { color: #6e6e73; }
.sheet { position: relative; margin-top: -40px; border-radius: 40px 40px 0 0; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.sec-head h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); margin: 0; max-width: 15ch; }
.sec-head p { max-width: 36ch; font-size: 19px; margin: 0; }

/* ---------- Frame preview: everything reads the saved prefs from :root ----------
   Mat padding is a % of the parent's width, so .fp must fill a parent sized to the preview. */
:root { --fc: #f1f1f1; --mc: #dadbd5; --mp: 3.75%; --mpy: 3.75%; --mpx: 3.75%; }
.fp { position: relative; display: block; border: var(--fw, 8px) solid var(--fc); background: var(--mc); padding: var(--mp); line-height: 0;
	box-shadow: inset 0 0 10px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.06), 0 24px 40px -26px rgba(0,0,0,.5);
	transition: border-color .5s, background-color .5s, padding .6s var(--ease); }
.fp__art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.25); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.fp__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.fp__shield { position: absolute; inset: 0; z-index: 2; cursor: default; -webkit-user-drag: none; user-select: none; }
.card .fp__shield, a .fp__shield { cursor: pointer; }
/* Soft-protection context menu */
.tftv-img-menu { position: fixed; z-index: 10000; min-width: 200px; padding: 6px; margin: 0; list-style: none; background: #2a221c; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.45); font-family: inherit; }
.tftv-img-menu[hidden] { display: none !important; }
.tftv-img-menu a, .tftv-img-menu button { display: block; width: 100%; box-sizing: border-box; border: 0; background: none; color: #f4efe8; text-align: left; font: inherit; font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: 7px; cursor: pointer; text-decoration: none; }
.tftv-img-menu a:hover, .tftv-img-menu button:hover { background: rgba(255,255,255,.08); }
.tftv-img-menu__hint { display: block; padding: 6px 12px 8px; font-size: 12px; font-weight: 500; color: rgba(244,239,232,.55); }
/* ---------- Option controls (shared by bento + drawer) ---------- */
.opt-title { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; color: #6e6e73; margin: 0 0 12px; }
.opt-title span { font-weight: 500; color: #1d1d1f; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches--mat { gap: 8px; }
.sw { width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); transition: transform .3s var(--ease), box-shadow .3s; }
.swatches--mat .sw { width: 30px; height: 30px; }
.sw:hover { transform: scale(1.12); }
.sw.on { box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 0 0 2px #fff, 0 0 0 4px var(--cyan); }
.seg { display: flex; padding: 4px; border-radius: 999px; background: #ececef; }
.seg button { flex: 1; border: 0; background: none; height: 38px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: #6e6e73; transition: background .3s, color .3s; }
.seg button.on { background: #fff; color: #000; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.is-disabled { opacity: .35; pointer-events: none; filter: grayscale(1); transition: opacity .4s; }

/* ---------- Art cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { display: block; border-radius: 26px; background: #fff; padding: 18px 18px 6px; cursor: pointer; transition: transform .6s var(--ease), box-shadow .6s var(--ease); --fw: 6px; }
.card:hover { transform: translateY(-6px); box-shadow: 0 40px 60px -40px rgba(0,0,0,.3); }
.card .fp__art img { transition: transform 1.2s var(--ease); }
.card:hover .fp__art img { transform: scale(1.06); }
.card__b { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px 10px; font-size: 15px; font-weight: 500; color: #1d1d1f; }
.card__b > span { display: inline-block; max-width: calc(100% - 72px); }
.card__b .mono { font-size: 12px; color: #6e6e73; font-weight: 400; }

/* Entry titles — capitalize first letter (cards, single, archives) */
.card__b > span::first-letter,
.info h1#title::first-letter,
.room__cap h2#capTitle::first-letter,
.entry-title::first-letter,
.tftv-v2 article h2::first-letter,
.tftv-v2 .tftv-arts-grid .card__b > span::first-letter {
	text-transform: uppercase;
}
@media (max-width: 960px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

.card__dots { display: inline-flex; }
.card__dots i { width: 14px; height: 14px; border-radius: 50%; margin-left: -4px; box-shadow: 0 0 0 2px #fff; }

/* ---------- Color taxonomy ---------- */
.cchips { display: flex; flex-wrap: wrap; gap: 8px; }
.cchip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); font-size: 13px; font-family: "Geist Mono", monospace; color: #1d1d1f; transition: transform .3s var(--ease), box-shadow .3s; }
.cchip:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 10px 20px -12px rgba(0,0,0,.35); }
.cchip i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.fams { display: flex; flex-wrap: wrap; gap: 6px; }
.fam { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); font: inherit; font-size: 14px; font-weight: 500; color: #1d1d1f; cursor: pointer; transition: background .3s, color .3s, transform .3s var(--ease); }
.fam:hover { transform: translateY(-1px); }
.fam i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
a.fam { text-decoration: none; color: inherit; }
.shades { display: flex; flex-wrap: wrap; gap: 8px; }
.shade { width: 34px; height: 34px; border: 0; padding: 0; border-radius: 10px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); transition: transform .3s var(--ease), box-shadow .3s; }
.shade:hover { transform: scale(1.12); }
.shade.on { box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 2px #f5f5f7, 0 0 0 4px #1d1d1f; }

.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); flex-wrap: wrap; }
.tabs button,
.tabs a { border: 0; background: none; padding: 9px 16px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; color: #6e6e73; text-decoration: none; transition: background .3s, color .3s; }
.tabs button.on,
.tabs a.on { background: #1d1d1f; color: #fff; }
.tabs a:hover { color: #1d1d1f; }
.tabs a.on:hover { color: #fff; }

footer { padding: 30px 0 110px; border-top: 1px solid rgba(127,127,127,.18); font-size: 13px; color: #6e6e73; }

/* ---------- "Previewing in" bar above art grids ---------- */
.using { display: inline-flex; align-items: center; gap: 0; padding: 6px 6px 6px 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); font-size: 14px; color: #1d1d1f; max-width: 100%; flex-wrap: wrap; }
.using__mini { width: 40px; height: 26px; flex: none; border: 3px solid var(--fc); background: var(--mc); padding: 3px; border-radius: 2px; box-shadow: 0 2px 6px -2px rgba(0,0,0,.35); transition: border-color .5s, background .5s, padding .5s; }
[data-mat="without"] .using__mini { padding: 0; }
[data-mat="small"] .using__mini { padding: 2px; }
[data-mat="large"] .using__mini { padding: 3px 5px; }
.using__mini i { display: block; width: 100%; height: 100%; background: var(--preview-thumb, none) center / cover; }
.using__lbl { padding: 0 14px 0 12px; color: #6e6e73; font-size: 13px; }
.using__lbl em { font-style: normal; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #f0f0f2; color: #6e6e73; font-size: 11px; font-weight: 600; }
.using__item { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-left: 1px solid rgba(0,0,0,.08); font-weight: 500; white-space: nowrap; }
.using__item i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.using__item i.size { border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1.5px #1d1d1f, inset 0 0 0 var(--sz, 3px) #fff, inset 0 0 0 calc(var(--sz, 3px) + 1.5px) #1d1d1f; }
.using__btn { margin-left: 6px; padding: 8px 14px; border: 0; border-radius: 999px; background: #1d1d1f; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .3s var(--ease); }
.using__btn:hover { transform: scale(1.05); }
.using [hidden] { display: none; }
@media (max-width: 700px) { .using__lbl { display: none; } .using__item { padding: 0 10px; } }

/* ---------- Floating "Your wall" pill ---------- */
.wall-pill { position: fixed; left: 24px; bottom: 24px; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border: 0; border-radius: 999px; font: inherit; cursor: pointer;
	background: rgba(36,32,29,.84); color: #f5f5f7; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
	box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 20px 40px -16px rgba(0,0,0,.5);
	transform: translateY(140%); opacity: 0; transition: transform .7s var(--ease), opacity .5s; }
.wall-pill.show { transform: none; opacity: 1; }
.wall-pill__icon { width: 46px; height: 30px; border: 3px solid var(--fc); background: var(--mc); padding: 4px; border-radius: 2px; transition: border-color .5s, background .5s, padding .5s; }
[data-mat="without"] .wall-pill__icon { padding: 0; }
.wall-pill__icon i { display: block; width: 100%; height: 100%; background: var(--preview-thumb, none) center / cover; }
.wall-pill__txt { text-align: left; line-height: 1.25; }
.wall-pill__txt b { display: block; font-size: 13px; font-weight: 600; }
.wall-pill__txt small { font-size: 12px; color: #a1a1a6; }
.wall-pill__edit { padding: 8px 14px; border-radius: 999px; background: #f5f5f7; color: #000; font-size: 13px; font-weight: 600; }
@media (max-width: 700px) { .wall-pill { left: 12px; right: 12px; bottom: 24px; } .wall-pill__edit { margin-left: auto; } }
html.drawer-open { overflow: hidden; }

/* ---------- Slide panel ---------- */
.wall-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .5s; }
.wall-drawer { position: fixed; top: 10px; right: 10px; bottom: 10px; z-index: 81; width: min(420px, calc(100vw - 20px)); display: flex; flex-direction: column;
	background: #fbfbfd; color: #1d1d1f; border-radius: 28px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.45);
	transform: translateX(calc(100% + 20px)); transition: transform .7s var(--ease); }
.drawer-open .wall-scrim { opacity: 1; pointer-events: auto; }
.drawer-open .wall-drawer { transform: none; }
.wall-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px 8px; }
.wall-drawer__head h3 { margin: 0; font-family: "Inter Tight"; font-size: 24px; letter-spacing: -.03em; }
.wall-drawer__close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #ececef; font-size: 18px; cursor: pointer; }
.wall-drawer__body { flex: 1; overflow: auto; padding: 8px 24px 24px; display: grid; gap: 26px; align-content: start; }
.wall-drawer__wall { padding: 30px 26px; border-radius: 20px; background: linear-gradient(160deg, #ecebe7, #d9d6cf); --fw: 8px; }
.wall-drawer__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px 22px; border-top: 1px solid rgba(0,0,0,.06); }
.linkbtn { border: 0; background: none; font: inherit; font-size: 14px; color: #6e6e73; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; top: 84px; z-index: 90; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: #1d1d1f; color: #fff; font-size: 14px; font-weight: 500;
	box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); opacity: 0; transform: translateY(-12px); transition: opacity .4s, transform .5s var(--ease); pointer-events: none; }
.toast.show { opacity: 1; transform: none; }
.toast::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--grad); font-size: 12px; }


/* ---- Homepage ---- */
/* ---------- Hero: the TV turns on, gets a frame, gets a mat ---------- */
.scene { position: relative; height: 420vh;
	--z:  clamp(0, calc(var(--p, 0) / .12), 1);
	--on: clamp(0, calc((var(--p, 0) - .1) / .1), 1);
	--fr: clamp(0, calc((var(--p, 0) - .3) / .1), 1);
	--mt: clamp(0, calc((var(--p, 0) - .5) / .1), 1); }
.scene__stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* Homepage hero backdrop only — scoped so single-art .room styles do not override it */
.scene .room { position: absolute; inset: 0; z-index: 0; pointer-events: none; background:
	radial-gradient(46% 52% at 50% 30%, rgba(var(--lamp),calc(.05 + var(--on) * .14)), transparent 70%),
	linear-gradient(180deg, var(--wall-hi), var(--wall)); }
.cam { position: absolute; inset: 0; z-index: 1; transform-origin: 50% 40%;
	transform: translateY(calc((1 - var(--z)) * 32vh)) scale(calc(.6 + .4 * var(--z))); }
.wallset { position: absolute; left: 50%; top: calc(var(--header-h) + 22vh); transform: translateX(-50%); --W: min(38vw, 54vh, 820px); width: var(--W); }
.htv { position: relative; z-index: 1; width: 100%; --fw: clamp(10px, 1.1vw, 16px); }
.htv .fp { border-width: calc(3px + var(--fr) * (var(--fw) - 3px));
	border-color: color-mix(in srgb, var(--fc) calc(var(--fr) * 100%), #0b0b0c);
	padding: calc(var(--mpy) * var(--mt)) calc(var(--mpx) * var(--mt));
	box-shadow: 0 50px 80px -30px rgba(0,0,0,.7), 0 0 calc(var(--on) * 140px) rgba(255,190,140,calc(var(--on) * .12)); }
.htv.cycling .fp { transition: border-color .9s var(--ease), background-color .9s var(--ease), padding .9s var(--ease); }
.htv .fp__art { background: #070708; box-shadow: none; }
.htv .fp__art img { opacity: 0; transition: opacity 1s ease; }
.htv .fp__art img.on { opacity: var(--on); }
.htv__glass { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.09), transparent 38%, transparent 70%, rgba(255,255,255,.03)); opacity: calc(1 - var(--on) * .85); }

.intro { position: absolute; top: calc(var(--header-h) + 4vh); left: 0; right: 0; text-align: center; z-index: 3; opacity: calc(1 - var(--z) * 1.6); transform: translateY(calc(var(--z) * -80px)); }
.gallery { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.gf { position: absolute; display: block; left: calc(var(--x) * var(--W)); top: calc(var(--y) * var(--W)); width: calc(var(--w) * var(--W)); aspect-ratio: var(--r); background: #f3efe7; border: clamp(3px, .45vw, 7px) solid var(--gf);
	box-shadow: 0 18px 30px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.2); filter: brightness(calc(.5 + var(--on) * .5)); }
.gf img { position: absolute; left: 13%; top: 13%; width: 74%; height: 74%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.gf--oak { --gf: #b98c5c; } .gf--black { --gf: #141414; } .gf--white { --gf: #ece7dd; } .gf--walnut { --gf: #5e3f27; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font-size: 13px; font-weight: 500; color: #d2d2d7; backdrop-filter: blur(10px); }
.pill b { padding: 4px 10px; border-radius: 999px; background: #f5f5f7; color: #000; font-weight: 600; }
.intro h1 { font-size: clamp(3rem, 7vw, 6.6rem); margin: 20px 0 24px; }
.intro h1 .g,
.intro h1 .g .g,
.split .g { background: linear-gradient(180deg, #fff 20%, #8e8e93); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 0 20px; }

.steps { position: absolute; left: 0; right: 0; bottom: max(96px, 9vh); z-index: 4; text-align: center; opacity: var(--z); }
.steps__nav { display: inline-flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); margin-bottom: 18px; }
.steps__nav span { padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #8e8e93; transition: background .4s, color .4s; }
.steps__nav span.on { background: #f5f5f7; color: #000; }
.steps__nav span.done { color: #f5f5f7; }
.steps__cap { position: relative; height: 92px; }
.steps__item { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .6s var(--ease); }
.steps__item.on { opacity: 1; transform: none; }
.steps h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); margin: 0; }
.steps p { font-size: 17px; margin: 8px 0 0; color: #a1a1a6; }
.steps a { color: var(--cyan); }
@media (max-width: 800px) {
	.wallset { --W: 72vw; top: calc(var(--header-h) + 18vh); }
	.gf--hide-sm { display: none; }
	.steps { padding: 0 20px; bottom: max(24px, 4vh); }
	.steps__cap { height: auto; min-height: 88px; }
	.steps__item { position: relative; opacity: 0; pointer-events: none; height: 0; overflow: hidden; transform: none; }
	.steps__item.on { opacity: 1; pointer-events: auto; height: auto; overflow: visible; }
	.steps p { font-size: 14px; }
	.steps__nav span { padding: 6px 10px; font-size: 11px; }
	.intro h1 { font-size: clamp(2.2rem, 10vw, 3.4rem); }
	.intro__cta { flex-direction: column; align-items: center; }
	.scene { height: 360vh; }
}
@media (prefers-reduced-motion: reduce) { .scene { --z: 1; --on: 1; --fr: 1; --mt: 1; height: auto; } .scene__stick { position: relative; } }

/* ---------- Studio (customizer bento) ---------- */
.feat-sec { padding: 140px 0 120px; z-index: 2; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 16px; }
.tile { position: relative; border-radius: 28px; background: #fff; padding: 26px; overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.tile:hover { transform: translateY(-4px); box-shadow: 0 40px 60px -40px rgba(0,0,0,.28); }
.tile__label { font-size: 13px; font-weight: 600; color: #6e6e73; display: flex; align-items: center; gap: 8px; }
.tile__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.big { font-family: "Inter Tight"; font-size: clamp(3rem, 5vw, 4.4rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; margin-top: 18px; }
.tile p { margin: 8px 0 0; font-size: 15px; }

.studio { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .9s var(--ease), opacity .6s; }
.studio__inner { min-height: 0; overflow: hidden; padding: 10px; margin: -10px; }
.is-set .studio { grid-template-rows: 0fr; opacity: 0; }
.t-preview { grid-column: span 2; grid-row: span 2; padding: 0; background: linear-gradient(160deg, #ecebe7, #d9d6cf); display: grid; place-items: center; }
.t-preview .tile__label { position: absolute; left: 26px; top: 24px; z-index: 1; }
.t-preview .tag { position: absolute; right: 20px; top: 18px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.85); font-size: 12px; }
.t-preview .pv { width: 78%; }
.t-preview .fp { --fw: 12px; }
.t-preview .fp__art img { opacity: 0; transition: opacity 1.2s; }
.t-preview .fp__art img.on { opacity: 1; }
.t-opt .opt-title { margin-bottom: 18px; }
.t-mat { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px; }
.t-mat .opt-title { margin-bottom: 8px; font-size: 12px; }
.t-mat .seg { padding: 3px; }
.t-mat .seg button { height: 28px; font-size: 12px; }
.t-mat .swatches--mat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.t-mat .swatches--mat .sw { width: 100%; height: auto; aspect-ratio: 1; }
.t-mat .sw.on { box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 0 0 2px #fff, 0 0 0 3.5px var(--cyan); }
.t-save { grid-column: span 2; background: radial-gradient(80% 100% at 85% 100%, rgba(var(--lamp),.16), transparent 70%), linear-gradient(160deg, #2c2622, var(--wall)); color: #f5f5f7; display: flex; flex-direction: column; justify-content: space-between; }
.t-save::after { content: ""; position: absolute; right: -90px; bottom: -110px; width: 280px; height: 280px; border-radius: 50%; background: rgb(var(--lamp)); filter: blur(70px); opacity: .18; }
.t-save h3 { position: relative; z-index: 1; margin: 0; font-family: "Inter Tight"; font-size: 26px; letter-spacing: -.03em; line-height: 1.1; }
.t-save p { position: relative; z-index: 1; color: #a1a1a6; font-size: 14px; }
.t-save .acts { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.t-save .linkbtn { color: #a1a1a6; }
.t-save { padding: 30px 32px; }
.t-save h3 { font-size: clamp(28px, 2.6vw, 38px); }
.t-save p { font-size: 16px; max-width: 36ch; margin-top: 10px; }
.t-save .acts { flex-direction: row-reverse; justify-content: flex-start; gap: 20px; }

.saved-bar { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .9s var(--ease), opacity .6s .2s; }
.is-set .saved-bar { grid-template-rows: 1fr; opacity: 1; }
.saved-bar__in { min-height: 0; overflow: hidden; }
.saved-bar__card { display: flex; align-items: center; gap: 28px; padding: 12px 24px 12px 12px; border-radius: 28px; background: #fff; }
.saved-bar__wall { flex: none; display: grid; place-items: center; width: 168px; height: 104px; border-radius: 18px; background: linear-gradient(160deg, #ecebe7, #d9d6cf); }
.saved-bar__wall .mini { width: 116px; }
.saved-bar__wall .fp { --fw: 4px; box-shadow: inset 0 0 6px rgba(0,0,0,.15), 0 10px 18px -10px rgba(0,0,0,.55); }
.saved-bar__txt { flex: 1; min-width: 180px; line-height: 1.35; }
.saved-bar__txt b { display: flex; align-items: center; gap: 8px; font-family: "Inter Tight"; font-size: 20px; letter-spacing: -.02em; }
.saved-bar__txt b::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 12px; font-family: "Inter"; }
.saved-bar__txt small { display: block; margin-top: 4px; font-size: 14px; color: #6e6e73; }
.saved-bar__specs { display: flex; gap: 0; margin: 0; }
.saved-bar__specs div { padding: 4px 24px; border-left: 1px solid rgba(0,0,0,.08); }
.saved-bar__specs dt { font-size: 12px; color: #6e6e73; margin-bottom: 6px; }
.saved-bar__specs dd { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; }
.saved-bar__specs i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.saved-bar__specs i.size { border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1.5px #1d1d1f, inset 0 0 0 var(--sz, 4px) #fff, inset 0 0 0 calc(var(--sz, 4px) + 1.5px) #1d1d1f; }
.saved-bar__acts { display: flex; align-items: center; gap: 6px; padding-left: 8px; }
@media (max-width: 1100px) { .saved-bar__card { flex-wrap: wrap; } .saved-bar__specs div:first-child { border-left: 0; padding-left: 0; } }
.rest { margin-top: 16px; }
.t-spec .px { position: absolute; right: -12px; bottom: -12px; width: 130px; height: 130px; background-image: linear-gradient(var(--cyan) 1px, transparent 1px), linear-gradient(90deg, var(--cyan) 1px, transparent 1px); background-size: 10px 10px; opacity: .22; border-radius: 18px; }
.t-price { grid-column: span 2; background: radial-gradient(80% 100% at 85% 0%, rgba(var(--lamp),.16), transparent 70%), linear-gradient(200deg, #2c2622, var(--wall)); color: #f5f5f7; display: flex; flex-direction: column; justify-content: space-between; }
.t-price::after { content: ""; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: rgb(var(--lamp)); filter: blur(70px); opacity: .18; transition: opacity .6s, scale .8s var(--ease); }
.t-price:hover::after { opacity: .28; scale: 1.2; }
.t-price .tile__label { color: #a1a1a6; }
.t-price h3 { position: relative; z-index: 1; font-family: "Inter Tight"; font-size: 32px; letter-spacing: -.035em; line-height: 1.05; margin: 0; font-weight: 700; }
.t-price .row { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: end; }
.t-price .price { font-family: "Inter Tight"; font-size: 48px; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.t-price .price .was { font-size: .55em; vertical-align: .35em; }
.t-price .price small,
.t-price .price .price-note { margin-left: 10px; font-family: "Inter"; font-size: 14px; font-weight: 500; letter-spacing: 0; color: #a1a1a6; }
.t-price__sub { position: relative; z-index: 1; margin: 10px 0 0; font-size: 14px; color: #a1a1a6; max-width: 36ch; }
.t-price__trust, .end__trust, .panel__trust, .price-trust {
	position: relative; z-index: 1; margin: 14px 0 0; font-size: 13px; color: #a1a1a6; font-weight: 500;
}
.end__trust { color: #a1a1a6; }
.panel__trust { margin-top: 10px; color: #6e6e73; }
.hdr__price .price-note { font-weight: 500; opacity: .85; }
.end__price { display: inline-block; margin-top: 10px; color: #f5f5f7; font-weight: 600; }
.end__price .was { opacity: .5; }
.end .was { opacity: .5; }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
	.bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.t-preview { grid-row: auto; aspect-ratio: 4 / 3; }
	.tile, .t-price, .t-save { grid-column: auto; min-height: 200px; }
	.saved-bar__card { border-radius: 24px; flex-wrap: wrap; }
	.t-price .row { flex-direction: column; align-items: flex-start; gap: 16px; }
	.t-price .price { font-size: 36px; }
	.t-save .acts { flex-wrap: wrap; }
	.feat-sec { padding: 80px 0 70px; }
	.mood { padding: 90px 0 80px; }
	.marquee img { width: 240px; }
	.end { padding: 100px 20px 120px; }
	.search { flex-wrap: wrap; border-radius: 24px; padding: 12px; }
	.search input { width: 100%; min-width: 0; }
	.phero { padding: calc(var(--header-h) + 48px) 0 70px; }
	.phero h1 { font-size: clamp(2.4rem, 12vw, 4rem); }
	.toolbar { flex-direction: column; align-items: stretch; }
	.explore__top { flex-direction: column; align-items: flex-start; }
}

/* ---------- Mood marquee (dark) ---------- */
.mood { z-index: 3; background: var(--room); padding: 160px 0 140px; text-align: center; overflow: hidden; }
.mood h2 { font-size: clamp(2.6rem, 6.6vw, 6rem); margin: 0 0 18px; }
.mood p { font-size: 21px; max-width: 34ch; margin: 0 auto 70px; }
.marquee { display: flex; gap: 18px; width: max-content; animation: slide 60s linear infinite; }
.marquee + .marquee { margin-top: 18px; animation-direction: reverse; animation-duration: 75s; }
.marquee img { width: 360px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; flex: none; }
.mood__cta { margin-top: 56px; text-align: center; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Seasonal (homepage + season archive hero) ---------- */
.seasonal {
	--season-ink: #1d1d1f;
	--season-muted: #5c5650;
	--season-eyebrow: #8a4b2e;
	--season-cta-bg: #1d1d1f;
	--season-cta-ink: #fff;
	--season-card: #fff;
	--season-crumb: rgba(29, 29, 31, .55);
	position: relative; z-index: 4; overflow: hidden;
	padding: 100px 0 90px; color: var(--season-ink);
	background: var(--season-bg, #f3eee6);
}
.seasonal__glow {
	position: absolute; inset: -20% -10% auto; height: 70%; pointer-events: none;
	background: var(--season-glow, none); opacity: .9;
}
.seasonal .wrap { position: relative; z-index: 1; }
.seasonal__head { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 36px; align-items: flex-end; gap: 28px; }
.seasonal__titles { display: flex; flex-direction: column; gap: 12px; flex: 1 1 320px; min-width: 0; max-width: min(100%, 38rem); }
.seasonal__head h1,
.seasonal__head h2 { margin: 0; max-width: none; color: inherit; line-height: .98; font-size: clamp(2.6rem, 6vw, 5.2rem); }
.seasonal__head .muted { color: var(--season-muted); max-width: 34ch; flex: 0 1 34ch; font-size: 18px; }
.seasonal__eyebrow {
	margin: 0; font-size: 12px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; color: var(--season-eyebrow);
	white-space: nowrap;
}
.seasonal .crumbs { color: var(--season-crumb); }
.seasonal .crumbs a { color: inherit; }
@media (max-width: 700px) {
	.seasonal__head { align-items: flex-start; }
	.seasonal__eyebrow { white-space: normal; }
}

/* Season archive: same palette as homepage blocks, taller top padding for header */
.seasonal-archive-hero { padding: calc(var(--header-h) + 72px) 0 88px; margin: 0; }
.seasonal-archive-hero__head { margin-bottom: 0; }
.seasonal .cards { margin-bottom: 0; }
.seasonal .card { background: var(--season-card); }
.seasonal__more { text-align: center; margin-top: 40px; }
.seasonal__cta {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 22px; border-radius: 999px; border: 0; text-decoration: none;
	background: var(--season-cta-bg); color: var(--season-cta-ink);
	font: inherit; font-size: 15px; font-weight: 600;
	box-shadow: 0 14px 30px -18px rgba(0,0,0,.55);
	transition: transform .3s var(--ease), box-shadow .3s;
}
.seasonal__cta:hover { transform: translateY(-2px) scale(1.02); color: var(--season-cta-ink); }

/* Valentine — blush rose */
.seasonal--valentine {
	--season-bg: linear-gradient(160deg, #fff5f4 0%, #f7e4e8 45%, #efe0e6 100%);
	--season-glow: radial-gradient(closest-side, rgba(196, 84, 110, .22), transparent 70%);
	--season-eyebrow: #b3455f; --season-muted: #7a5560;
	--season-cta-bg: #9e2f4a; --season-cta-ink: #fff7f8;
}
/* Easter — cool mint */
.seasonal--easter {
	--season-bg: linear-gradient(165deg, #f3faf6 0%, #e5f2ea 50%, #d8ebe3 100%);
	--season-glow: radial-gradient(closest-side, rgba(74, 140, 112, .18), transparent 70%);
	--season-eyebrow: #3f7a5c; --season-muted: #4f6a5c;
	--season-cta-bg: #2f6b4f; --season-cta-ink: #f3faf6;
}
/* Summer — sky / sand */
.seasonal--summer {
	--season-bg: linear-gradient(165deg, #eef7fb 0%, #e4f0f6 40%, #f6efe3 100%);
	--season-glow: radial-gradient(closest-side, rgba(42, 140, 184, .2), transparent 72%);
	--season-eyebrow: #1f6f93; --season-muted: #4d6570;
	--season-cta-bg: #176086; --season-cta-ink: #f3f9fc;
}
/* Halloween — ink + ember */
.seasonal--halloween {
	--season-bg: linear-gradient(165deg, #1a1410 0%, #241a14 55%, #2c1b12 100%);
	--season-glow: radial-gradient(closest-side, rgba(232, 120, 36, .28), transparent 68%);
	--season-ink: #f4ebe1; --season-muted: #b9a494; --season-eyebrow: #e78a3c;
	--season-cta-bg: #e07828; --season-cta-ink: #1a120c; --season-card: #fff;
	--season-crumb: rgba(244, 235, 225, .55);
}
/* Thanksgiving — maple / umber */
.seasonal--thanksgiving {
	--season-bg: linear-gradient(165deg, #f6ede0 0%, #efe0c8 48%, #e6d0a8 100%);
	--season-glow: radial-gradient(closest-side, rgba(176, 92, 36, .2), transparent 70%);
	--season-eyebrow: #9a4d1c; --season-muted: #6d5340;
	--season-cta-bg: #7a3d16; --season-cta-ink: #fff6ea;
}
/* Christmas — evergreen night */
.seasonal--christmas {
	--season-bg: linear-gradient(165deg, #102018 0%, #163024 50%, #1a1c18 100%);
	--season-glow: radial-gradient(closest-side, rgba(196, 54, 54, .22), transparent 65%),
		radial-gradient(40% 50% at 90% 10%, rgba(212, 175, 55, .16), transparent 70%);
	--season-ink: #f2efe6; --season-muted: #a8b5a8; --season-eyebrow: #d4af37;
	--season-cta-bg: #c43a3a; --season-cta-ink: #fff8f5; --season-card: #fff;
	--season-crumb: rgba(242, 239, 230, .55);
}

/* ---------- Browse (light) ---------- */
.browse { z-index: 4; padding: 130px 0 140px; }
.browse .sec-head { margin-bottom: 28px; }
.browse .toolbar { margin-bottom: 28px; }
.browse__more { text-align: center; margin-top: 40px; }
.by-color { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 56px; font-size: 14px; color: #6e6e73; }
.by-color .fams { justify-content: center; }

.end { z-index: 5; text-align: center; padding: 170px 24px 200px; background: radial-gradient(60% 50% at 50% 100%, rgba(var(--lamp),.14), transparent), linear-gradient(180deg, var(--wall), var(--ground-hi)); }
.end h2 { font-size: clamp(2.6rem, 6vw, 5.4rem); margin: 0 0 18px; }
.end p { font-size: 19px; margin: 0 0 34px; }

/* ---- Arts listing ---- */
.phero { position: relative; padding: calc(var(--header-h) + 90px) 0 120px; overflow: hidden; background: linear-gradient(180deg, var(--wall-hi), var(--wall)); }
.phero::before { content: ""; position: absolute; width: 900px; height: 500px; left: 50%; top: -120px; translate: -50% 0; background: radial-gradient(closest-side, rgba(var(--lamp),.16), transparent); filter: blur(30px); }
.phero .wrap { position: relative; }
.crumbs { font-size: 13px; color: #86868b; margin-bottom: 18px; }
.phero h1 { font-size: clamp(3rem, 8vw, 7rem); margin: 0 0 18px; }
.phero p { font-size: 20px; max-width: 40ch; margin: 0; }
.search { margin-top: 36px; display: flex; align-items: center; gap: 12px; max-width: 520px; padding: 6px 6px 6px 20px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.search input { flex: 1; border: 0; background: none; color: #fff; font: inherit; font-size: 16px; outline: none; }
.search input::placeholder { color: #86868b; }
.list { z-index: 2; padding: 90px 0 140px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sort { border: 0; background: #fff; border-radius: 999px; padding: 11px 16px; font: inherit; font-size: 14px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.toolbar { margin-bottom: 36px; }
.toolbar__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.more { text-align: center; margin-top: 56px; }
.explore { margin: -8px 0 36px; padding: 20px 22px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
.explore__top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.explore__lbl { font-size: 13px; font-weight: 600; color: #6e6e73; min-width: 108px; }
.explore .fam { box-shadow: none; background: #f5f5f7; }
.explore .fam:hover { background: #ebebed; }
.empty { grid-column: 1 / -1; padding: 60px 20px; text-align: center; border-radius: 26px; background: #fff; }
.empty h3 { font-family: "Inter Tight"; font-size: 28px; letter-spacing: -.03em; margin: 0 0 8px; }
.empty .shades { justify-content: center; margin-top: 20px; }

/* ---- Single art ---- */
/* The art hangs on a dark "room" wall that the floating header merges with */
/* Pinned scene: the art faces you on load, then turns aside in 3D as you scroll (as in 4-immersive) */
/* Scoped to section.room (single) so it does not clobber .scene .room on the homepage */
section.room { position: relative; height: 220vh; background: var(--ground); --t: min(1, calc(var(--p, 0) * 1.8)); }
.room__stick { --floor: 76vh; position: sticky; top: 0; height: 100vh; overflow: hidden; }
.room__wall { position: absolute; inset: 0; background:
	radial-gradient(42% 50% at calc(50% + var(--t) * 14%) 40%, rgba(var(--lamp),.14), transparent 70%),
	linear-gradient(180deg, var(--wall-hi) 0%, var(--wall) var(--floor), var(--ground-hi) calc(var(--floor) + .2%), var(--ground) 100%); }
.room__wall::after { content: ""; position: absolute; left: 0; right: 0; top: var(--floor); height: 1px; background: rgba(255,255,255,.06); }
.room__stage { position: absolute; inset: 0; perspective: 1700px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: calc(100vh - var(--floor) - 1vh); }
.room__fp { position: relative; z-index: 1; width: min(1040px, 80vw, (76vh - 150px) * 16 / 9); --fw: clamp(8px, 1.1vw, 16px); --tx: 17vw;
	transform-style: preserve-3d; transform-origin: 50% 100%;
	transform:
		translate3d(calc(var(--t) * var(--tx)), calc(var(--t) * -1vh), 0)
		rotateY(calc(var(--t) * -30deg))
		rotateX(calc(var(--t) * 4deg))
		scale(calc(1 - var(--t) * .2));
	animation: hang 1.4s var(--ease) both .15s; }
.room__fp .fp { box-shadow: inset 0 0 14px rgba(0,0,0,.2), 0 60px 90px -40px rgba(0,0,0,.9);
	-webkit-box-reflect: below 10px linear-gradient(transparent 70%, rgba(255,255,255,.14)); }
.room__fp::after { content: ""; position: absolute; top: 0; bottom: 0; right: calc(var(--fw) * -1.2); width: calc(var(--fw) * 1.2); background: color-mix(in srgb, var(--fc) 55%, #000); transform-origin: left; transform: rotateY(90deg); transition: background .5s; }
/* Animate translate/scale — never `transform` — so scroll-driven 3D on .room__fp keeps working */
@keyframes hang {
	from { opacity: 0; translate: 0 24px; scale: .97; }
}
.room__cap { position: absolute; z-index: 2; left: max(24px, calc((100vw - var(--max)) / 2)); top: 50%; width: min(400px, 34vw); color: #f5f5f7;
	opacity: clamp(0, calc((var(--t) - .45) * 2.4), 1); transform: translateY(calc(-50% + (1 - var(--t)) * 30px)); filter: blur(calc((1 - var(--t)) * 6px)); }
.room__cap small { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.room__cap h2 { font-size: clamp(2.4rem, 4.4vw, 4.2rem); margin: 12px 0 14px; }
.room__cap p { margin: 0 0 22px; color: #a1a1a6; font-size: 17px; }
.room__cap .dots { display: flex; gap: 6px; }
.room__cap .dots i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.room__bar { position: absolute; z-index: 2; left: 0; right: 0; bottom: 6vh; display: flex; justify-content: center; gap: 10px; opacity: calc(1 - var(--t) * 2.5); }
.room__hint { position: absolute; left: 50%; bottom: 1.6vh; translate: -50% 0; font-size: 12px; color: #6e6e73; opacity: calc(1 - var(--t) * 4); }
.info.sheet { margin-top: -70vh; }
@media (max-width: 800px) {
	.room__stick { --floor: 54vh; }
	.room__fp { --tx: 0px; width: 90vw; }
	.room__cap { top: calc(var(--floor) + 6vh); bottom: auto; width: auto; right: 24px; left: 24px; transform: none; }
	.room__bar { flex-wrap: wrap; padding: 0 16px; bottom: 4vh; gap: 8px; }
	.room__hint { display: none; }
	.info.sheet { margin-top: -55vh; padding: 60px 0 70px; }
	.panel { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .room__fp { transform: none; } .room__cap { display: none; } }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: #d2d2d7; font-size: 13px; border: 0; font-family: inherit; cursor: pointer; transition: background .3s; }
.chip:hover { background: rgba(255,255,255,.16); }
.chip i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }

.info { z-index: 2; padding: 90px 0 100px; }
.info__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
.info h1 { font-size: clamp(2.8rem, 6vw, 5.2rem); margin: 0 0 18px; }
.info .lead { font-size: 19px; max-width: 44ch; margin: 0 0 30px; }
.meta-block { margin-top: 28px; }
.meta-block h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: #6e6e73; }
.palette-strip { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: 2px 0 0; }
.palette-strip i { flex: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags a { padding: 8px 14px; border-radius: 999px; background: #fff; font-size: 14px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.panel { border-radius: 28px; background: #fff; padding: 28px; display: grid; gap: 18px; position: sticky; top: calc(var(--header-h) + 16px); align-self: start; }
.panel dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; font-size: 15px; }
.panel dt { color: #6e6e73; }
.panel dd { margin: 0; text-align: right; font-weight: 500; }
.panel .btn { width: 100%; }
.panel small { text-align: center; color: #6e6e73; font-size: 13px; }
.related { position: relative; z-index: 2; padding: 0 0 140px; }
.related h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: 0 0 30px; }
@media (max-width: 900px) {
	.info__grid { grid-template-columns: 1fr; }
	.panel { position: static; }
}

/* ---- Color archive ---- */
.taxonomy-color { background: #f5f5f7; }
.chero { position: relative; padding: calc(var(--header-h) + 80px) 0 130px; background: var(--c); color: var(--ink); overflow: hidden; transition: background .6s; }
.chero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 80% at 85% 30%, rgba(255,255,255,.18), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(0,0,0,.22), transparent 70%); }
.chero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.crumbs { font-size: 13px; opacity: .7; margin-bottom: 18px; }
.crumbs a:hover { text-decoration: underline; }
.chero h1 { font-family: "Geist Mono", monospace; font-weight: 500; letter-spacing: -.06em; font-size: clamp(3.4rem, 8vw, 7.4rem); line-height: 1; margin: 0 0 16px; }
.chero .sub { font-size: 19px; opacity: .8; margin: 0 0 30px; }
.chero .near { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chero .near a { width: 38px; height: 38px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 6px 14px -8px rgba(0,0,0,.5); transition: transform .3s var(--ease), box-shadow .3s; }
.chero .near a:hover { transform: translateY(-3px) scale(1.06); }
.chero .near a.on { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 0 2px var(--c), 0 0 0 4px var(--ink); }
.chero__art { width: min(100%, 480px); margin-left: auto; --fw: 10px; animation: hang 1.2s var(--ease) both .2s; }
.chero__art .fp { width: 100%; box-shadow: inset 0 0 12px rgba(0,0,0,.2), 0 50px 80px -30px rgba(0,0,0,.6); }
.chero__art .fp__art { background: #0b0b0c; }
.chero__art .fp__art img { opacity: 1; }
@media (max-width: 900px) { .chero .wrap { grid-template-columns: 1fr; } .chero__art { margin-left: 0; width: 100%; } }

.res { z-index: 2; padding: 90px 0 60px; }
.res h2, .pal h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: 0 0 8px; }
.res .muted { margin: 0 0 30px; font-size: 17px; }
.res + .res { padding-top: 30px; margin-top: 0; border-radius: 0; }
.taxonomy-color .sheet + .light:not(.sheet),
.taxonomy-color .res + .res { margin-top: 0; }
.taxonomy-color .pal { padding: 60px 0 140px; background: #f5f5f7; }
.pal { padding: 60px 0 140px; }
.pal__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 30px; }
.pal__fam { padding: 20px; border-radius: 22px; background: #fff; }
.pal__fam h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; }
.pal__fam h3 i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.pal__fam .shades { gap: 6px; }
.pal__fam .shade { width: 30px; height: 30px; border-radius: 8px; display: block; }

/* ---- Theme extras ---- */
.skip-link, .screen-reader-text { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.skip-link:focus, .screen-reader-text:focus { left:16px; top:16px; z-index:200; width:auto; height:auto; clip:auto; background:#fff; color:#000; padding:8px 14px; border-radius:8px; }
.tftv-arts-grid__items { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:960px) { .tftv-arts-grid__items { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .tftv-arts-grid__items { grid-template-columns:1fr; } }
.tftv-arts-grid__actions { text-align:center; margin-top:40px; }
.tftv-load-more { position: relative; min-width: 10.5em; }
.tftv-load-more__spin {
	position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
	border: 2px solid rgba(255,255,255,.28); border-top-color: #fff; border-radius: 50%;
	opacity: 0; pointer-events: none;
}
.tftv-load-more.is-loading .tftv-load-more__label { opacity: 0; }
.tftv-load-more.is-loading .tftv-load-more__spin { opacity: 1; animation: tftvSpin .7s linear infinite; }
.tftv-load-more[disabled], .tftv-load-more.is-loading { opacity: .85; pointer-events: none; cursor: wait; }
@keyframes tftvSpin { to { transform: rotate(360deg); } }
.page-sheet { padding: calc(var(--header-h) + 60px) 0 100px; }
.page-sheet .entry,
.light .entry { max-width: 72ch; }
.phero + .light.sheet .entry { margin-top: 0; }
.hdr__nav .menu { display:flex; gap:8px; list-style:none; margin:0; padding:0; align-items:center; }
.hdr__nav .menu--mobile-extra { display: none; }
.hdr__nav .menu a { font-size:14px; font-weight:500; opacity:.85; }
.hdr__nav .menu a:hover { opacity:1; }
@media (max-width: 900px) {
	.hdr__nav { display: none; }
	.hdr__price--bar, .hdr__cta--bar { display: none; }
	.hdr__burger { display: grid; place-items: center; }
	.hdr.is-menu-open .hdr__nav {
		display: block;
		position: absolute;
		left: 16px; right: 16px;
		top: calc(var(--header-h) + 8px);
		background: var(--hdr-solid, rgba(30,26,23,.94));
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border-radius: 20px;
		padding: 18px;
		box-shadow: 0 20px 50px -20px rgba(0,0,0,.5);
	}
	.hdr.is-menu-open .hdr__nav .menu { flex-direction: column; gap: 6px; align-items: stretch; }
	.hdr.is-menu-open .hdr__nav .menu--mobile-extra {
		display: flex;
		flex-direction: column;
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid rgba(255,255,255,.12);
	}
	.hdr.is-menu-open .hdr__cta--in-menu {
		display: inline-flex; justify-content: center; margin-top: 4px;
		background: var(--hdr-cta-bg, #fff); color: var(--hdr-cta-ink, #111);
	}
	.hdr.is-menu-open .hdr__price--in-menu { justify-content: center; }
	body.hero-dark .hdr.is-menu-open:not(.is-solid),
	body.site-dark .hdr.is-menu-open.is-solid { --hdr-ink: #fff; }
}
.inspiration-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.inspiration-grid--masonry { columns:4; column-gap:14px; display:block; }
.inspiration-grid--masonry a { break-inside:avoid; display:block; margin-bottom:14px; }
.inspiration-grid img { width:100%; height:auto; border-radius:16px; display:block; }
@media (max-width:900px) { .inspiration-grid { grid-template-columns:repeat(2,1fr); } .inspiration-grid--masonry { columns:2; } }
@media (max-width:560px) { .inspiration-grid, .inspiration-grid--masonry { grid-template-columns:1fr; columns:1; } }
.taxonomy-color .chero .wrap { gap: 28px; }
.taxonomy-color .hdr.is-solid { --hdr-solid: rgba(30,26,23,.92); }