:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  --font-display: 'Boska', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Switzer', 'Helvetica Neue', sans-serif;

  --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.625rem; --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --content-wide: 1200px; --content-narrow: 760px;
}

:root, [data-theme='light'] {
  --color-bg: #f4efe6;
  --color-surface: #faf6ef;
  --color-surface-2: #fffcf7;
  --color-surface-offset: #ebe4d7;
  --color-border: #d9cfbe;
  --color-divider: #e3dacb;
  --color-text: #231b14;
  --color-text-muted: #6e6152;
  --color-text-faint: #a99a86;
  --color-text-inverse: #faf6ef;
  --color-primary: #7a2e22;
  --color-primary-hover: #5f2219;
  --color-primary-active: #471811;
  --color-primary-highlight: #ecd9d2;
  --color-gilt: #9a7425;
  --color-ink: #1a1410;
  --shadow-sm: 0 1px 2px oklch(0.25 0.03 60 / 0.08);
  --shadow-md: 0 6px 18px oklch(0.25 0.03 60 / 0.10);
  --shadow-lg: 0 18px 48px oklch(0.25 0.03 60 / 0.16);
}

[data-theme='dark'] {
  --color-bg: #15110d;
  --color-surface: #1c1712;
  --color-surface-2: #221c16;
  --color-surface-offset: #29221a;
  --color-border: #3a3127;
  --color-divider: #2d261e;
  --color-text: #ebe3d5;
  --color-text-muted: #a89a86;
  --color-text-faint: #6f6352;
  --color-text-inverse: #1c1712;
  --color-primary: #d4a85a;
  --color-primary-hover: #e2bb72;
  --color-primary-active: #c09245;
  --color-primary-highlight: #3a2f1f;
  --color-gilt: #d4a85a;
  --color-ink: #0e0b08;
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 6px 18px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 18px 48px oklch(0 0 0 / 0.5);
}

[hidden] { display: none !important; }
body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); }

.wrap { width: min(100% - 2 * var(--space-6), var(--content-wide)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--space-6), var(--content-narrow)); }

.skip { position: absolute; left: -999px; top: var(--space-2); }
.skip:focus { left: var(--space-4); z-index: 100; background: var(--color-surface); padding: var(--space-2) var(--space-4); }

/* Header */
.header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--color-bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--transition-interactive); }
.header.is-scrolled { border-bottom-color: var(--color-divider); }
.header__inner { display: flex; align-items: center; gap: var(--space-8); height: 68px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); text-decoration: none; }
.brand__mark { width: 30px; height: 30px; color: var(--color-gilt); }
.brand__mark--img { width: 40px; height: 40px; object-fit: contain; }
.brand .brand__name--stencil { font-family: 'Big Shoulders Stencil', var(--font-body); font-weight: 800; font-size: 1.6rem; letter-spacing: 0.02em; text-transform: uppercase; color: #b8862a; line-height: 1; }
.brand .brand__name--stencil span { color: var(--color-text); font-size: 0.62em; letter-spacing: 0.28em; margin-left: 0.2em; }
.footer__logo { width: 140px; height: auto; }
.footer__logo--charcoal { display: none; width: 160px; border-radius: var(--radius-md, 8px); box-shadow: 0 0 0 1px rgba(212,168,90,0.18); }
[data-theme='dark'] .footer__logo { display: none; }
[data-theme='dark'] .footer__logo--charcoal { display: block; }
[data-theme='dark'] .brand .brand__name--stencil { color: #d4a85a; }
.brand__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: 0.01em; }
.nav { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
.nav a { position: relative; color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: 500; padding-block: var(--space-2); white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-gilt); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1); }
.nav a:hover { color: var(--color-text); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: var(--color-text); }
.nav__sep { width: 1px; height: 18px; background: var(--color-border); }
.nav a.nav__ext { color: var(--color-gilt); }
.nav a.nav__ext span { display: inline-block; transition: transform 200ms ease; }
.nav a.nav__ext:hover span { transform: translateX(3px); }
.nav a.nav__ext::after { display: none; }
.icon-btn.menu-btn { display: none; }
.brand { white-space: nowrap; flex-shrink: 0; }
.menu-panel { border-top: 1px solid var(--color-divider); background: var(--color-bg); box-shadow: 0 18px 30px -18px rgba(20, 15, 10, 0.35); }
.menu-panel__nav { display: flex; flex-direction: column; padding-block: var(--space-4) var(--space-6); }
.menu-panel__nav > a:not(.btn) { color: var(--color-text); text-decoration: none; font-family: var(--font-display); font-size: var(--text-lg); padding-block: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.menu-panel__nav > a.is-active { color: var(--color-gilt); }
.menu-panel__minor { display: flex; gap: var(--space-6); padding-block: var(--space-4) var(--space-5); }
.menu-panel__minor a { color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: none; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); }
.footer__links a { color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: none; }
.footer__links a:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
html { scroll-padding-top: 88px; }
.header__actions { display: flex; align-items: center; gap: var(--space-3); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-full); color: var(--color-text-muted); }
.icon-btn:hover { background: var(--color-surface-offset); color: var(--color-text); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.btn--sm { padding: var(--space-2) var(--space-4); }
.btn--block { width: 100%; padding-block: var(--space-4); }
.btn--primary { background: var(--color-primary); color: var(--color-text-inverse); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--ghost { border-color: var(--color-border); color: var(--color-text); }
.btn--ghost:hover { border-color: var(--color-text-muted); background: var(--color-surface); }
.btn--light { background: #f4efe6; color: #231b14; }
.btn--light:hover { background: #fff; }
.link-btn { color: var(--color-primary); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; margin-top: var(--space-3); }

.eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-gilt); font-weight: 600; margin-bottom: var(--space-4); }
.eyebrow--light { color: #d9b46a; }
.fine { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-3); }

/* Hero */
.hero { padding-block: clamp(var(--space-10), 6vw, var(--space-20)); }
.hero__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.hero__title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-3xl); line-height: 1.02; letter-spacing: -0.015em; }
.hero__title em { font-style: italic; color: var(--color-primary); }
.hero__lede { margin-top: var(--space-6); color: var(--color-text-muted); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero__proof { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-8); font-size: var(--text-xs); color: var(--color-text-muted); list-style: none; }
.hero__proof li::before { content: '✦'; color: var(--color-gilt); margin-right: var(--space-2); }

/* Compare slider */
.compare { margin: 0; }
.compare__stage { position: relative; aspect-ratio: 1414 / 813; overflow: hidden; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); outline: 10px solid var(--color-surface-2); outline-offset: 0; }
.compare__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__before { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fffcf7; transform: translateX(-1px); pointer-events: none; }
.compare__handle span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: #fffcf7; box-shadow: var(--shadow-md); }
.compare__handle span::before { content: '‹ ›'; position: absolute; inset: 0; display: grid; place-items: center; color: #231b14; font-weight: 600; letter-spacing: 2px; }
.compare__tag { position: absolute; bottom: var(--space-3); font-size: var(--text-xs); color: #fffcf7; background: oklch(0.15 0.02 60 / 0.55); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); pointer-events: none; }
.compare__tag--l { left: var(--space-3); }
.compare__tag--r { right: var(--space-3); }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare figcaption { margin-top: var(--space-6); font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }

/* Sections */
.section { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); }
.section--alt { background: var(--color-surface-offset); }
.section--studio { background: var(--color-surface); border-block: 1px solid var(--color-divider); }
.section__head { max-width: 640px; margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); }
.section__title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: 1.08; letter-spacing: -0.01em; }
.section__lede { margin-top: var(--space-4); color: var(--color-text-muted); }

/* Styles grid */
.styles { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-6); }
.style-card { grid-column: span 2; display: flex; flex-direction: column; background: var(--color-surface-2); border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; }
.style-card__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-offset); isolation: isolate; }
.style-card__img::before { content: ""; position: absolute; inset: -24px; background: var(--bg) center / cover no-repeat; filter: blur(22px) saturate(1.1); opacity: 0.55; z-index: -1; }
.style-card__img img { position: relative; width: 100%; height: 100%; object-fit: contain; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.style-card:hover .style-card__img img { transform: scale(1.03); }
.style-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.style-card__name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.1; }
.style-card__desc { color: var(--color-text-muted); font-size: var(--text-sm); }
.style-card__meta { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: auto; padding-top: var(--space-3); }
.style-card .link-btn { align-self: flex-start; margin-top: var(--space-2); }

/* Studio */
.studio { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(var(--space-8), 4vw, var(--space-12)); align-items: start; }
.step { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-4); padding-block: var(--space-6); border-bottom: 1px solid var(--color-divider); }
.step:first-child { padding-top: 0; }
.step:last-child { border-bottom: none; }
.step__num { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-gilt); color: var(--color-gilt); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.125rem; }
.step__title { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-3); padding-top: var(--space-1); }
.step__body { display: flex; flex-direction: column; min-width: 0; }

.drop { position: relative; display: grid; place-items: center; min-height: 180px; border: 1.5px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); cursor: pointer; overflow: hidden; transition: border-color var(--transition-interactive), background var(--transition-interactive); }
.drop:hover, .drop.is-over { border-color: var(--color-primary); background: var(--color-primary-highlight); }
.drop:focus-within { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.drop__empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; padding: var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); }
.drop__empty svg { color: var(--color-gilt); margin-bottom: var(--space-2); }
.drop__empty strong { color: var(--color-text); }
.drop__img { width: 100%; height: 220px; object-fit: cover; }

.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.chip { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-1); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); text-align: left; }
.chip__img { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface-offset); isolation: isolate; }
.chip__img::before { content: ""; position: absolute; inset: -16px; background: var(--bg) center / cover no-repeat; filter: blur(14px) saturate(1.1); opacity: 0.6; z-index: -1; }
.chip__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.chip__name { font-size: var(--text-xs); font-weight: 600; padding: 0 var(--space-1) var(--space-1); line-height: 1.2; }
.chip:hover { border-color: var(--color-text-muted); }
.chip[aria-checked='true'] { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }

.easel { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: var(--color-ink); box-shadow: var(--shadow-lg); outline: 10px solid var(--color-surface-2); overflow: hidden; display: grid; place-items: center; }
.easel > * { grid-area: 1 / 1; }
.easel__empty, .easel__loading, .easel__result, .easel__error { display: none; }
.easel[data-state='empty'] .easel__empty,
.easel[data-state='loading'] .easel__loading,
.easel[data-state='done'] .easel__result,
.easel[data-state='error'] .easel__error { display: flex; }
.easel__empty { position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: flex-end; }
.easel__empty img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.28; filter: grayscale(0.3); }
.easel__empty p { position: relative; color: #ebe3d5; font-family: var(--font-display); font-size: var(--text-xl); font-style: italic; margin-bottom: var(--space-8); }
.easel__loading { flex-direction: column; align-items: center; gap: var(--space-6); color: #ebe3d5; }
.easel__loading p { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); }
.brush { width: 220px; height: 3px; background: oklch(1 0 0 / 0.12); border-radius: 2px; overflow: hidden; }
.brush span { display: block; height: 100%; width: 40%; background: #d4a85a; animation: sweep 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.easel__result { width: 100%; height: 100%; object-fit: contain; }
.easel__error { flex-direction: column; align-items: center; gap: var(--space-4); color: #ebe3d5; text-align: center; padding: var(--space-8); }
.easel__error .btn--ghost { color: #ebe3d5; border-color: oklch(1 0 0 / 0.3); }

.buy { margin-top: var(--space-10); padding: var(--space-6); background: var(--color-surface-2); border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.buy__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; margin-bottom: var(--space-4); }
.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.format { text-align: left; padding: var(--space-4); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-1); }
.format:hover { border-color: var(--color-text-muted); }
.format[aria-checked='true'] { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.format strong { font-size: var(--text-sm); }
.format span { font-size: var(--text-xs); color: var(--color-text-muted); }
.format em { font-style: normal; font-weight: 600; font-size: var(--text-sm); margin-top: var(--space-1); }
.buy__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); }
.buy__total { display: flex; flex-direction: column; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; }
.buy__total small { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }

/* Feature */
.feature { position: relative; display: grid; grid-template-columns: 7fr 5fr; min-height: 640px; background: #1c2a22; color: #ebe3d5; }
.feature__img { width: 100%; height: 100%; object-fit: cover; }
.feature__panel { padding: clamp(var(--space-10), 6vw, var(--space-20)); display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); }
.feature__title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: 1.08; color: #f4efe6; }
.feature__panel > p:not(.eyebrow) { color: #c4bba9; }
.ticks { list-style: none; display: grid; gap: var(--space-2); margin-block: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.ticks li::before { content: '✦'; color: #d9b46a; margin-right: var(--space-3); }
.feature .btn { align-self: flex-start; }

/* How */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); list-style: none; }
.how li { border-top: 1px solid var(--color-border); padding-top: var(--space-6); }
.how__n { font-family: var(--font-display); font-style: italic; color: var(--color-gilt); font-size: var(--text-xl); }
.how h3 { font-size: var(--text-lg); font-weight: 600; margin-block: var(--space-2); }
.how p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Tiers */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.tier { background: var(--color-surface-2); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.tier--feat { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-md); }
.tier__badge { align-self: flex-start; font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); background: var(--color-primary-highlight); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); }
.tier h3 { font-size: var(--text-lg); font-weight: 600; }
.tier__price { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; }
.tier__price small { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); margin-left: var(--space-2); }
.tier ul { list-style: none; display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.tier ul li::before { content: '—'; color: var(--color-gilt); margin-right: var(--space-2); }
.tier .btn { margin-top: auto; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--color-divider); padding-block: var(--space-5); }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-body); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--color-gilt); transition: transform var(--transition-interactive); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin-top: var(--space-3); color: var(--color-text-muted); }

/* Footer */
.footer { border-top: 1px solid var(--color-divider); padding-block: var(--space-12); }
.footer__inner { display: grid; gap: var(--space-3); }
.footer__note { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Modal */
.modal { margin: auto; border: none; border-radius: var(--radius-lg); background: var(--color-surface-2); color: var(--color-text); width: min(92vw, 480px); box-shadow: var(--shadow-lg); padding: 0; }
.modal::backdrop { background: oklch(0.1 0.02 60 / 0.6); backdrop-filter: blur(3px); }
.modal__inner { padding: var(--space-8); display: grid; gap: var(--space-4); }
.modal__title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); }
.modal__summary { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-4); align-items: center; }
.modal__summary img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); }
.modal__item { font-weight: 600; }
.modal__price { font-family: var(--font-display); font-size: var(--text-xl); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1240px) { .nav { gap: var(--space-4); } .header__inner { gap: var(--space-6); } }
@media (max-width: 1120px) {
  .nav { display: none; }
  .header__actions { margin-left: auto; }
  .icon-btn.menu-btn { display: grid; }
  .hero__grid { grid-template-columns: 1fr; }
  .styles { grid-template-columns: 1fr 1fr; }
  .style-card, .style-card:nth-child(1), .style-card:nth-child(2) { grid-column: span 1; }
  .feature { grid-template-columns: 1fr; }
  .feature__img { aspect-ratio: 4 / 3; height: auto; }
  .tiers, .how { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .header__actions .btn { display: none; }
  .styles { grid-template-columns: 1fr; }
  .style-card:nth-child(1) { grid-column: span 1; }
  .chips { grid-template-columns: repeat(3, 1fr); }
  .formats { grid-template-columns: 1fr; }
  .buy__row { flex-direction: column; align-items: stretch; }
  .compare__stage, .easel { outline-width: 6px; }
}

/* Waitlist mode */
.easel { aspect-ratio: auto; display: block; }
.easel__sample { width: 100%; height: auto; display: block; transition: opacity 160ms ease; }
.easel__sample.is-swapping { opacity: 0; }
.easel__tag { position: absolute; left: var(--space-3); bottom: var(--space-3); font-size: var(--text-xs); color: #fffcf7; background: oklch(0.15 0.02 60 / 0.6); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); }
.formats-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-8); }
.formats-strip div { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface-2); }
.formats-strip strong { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1; }
.formats-strip span { font-size: var(--text-xs); color: var(--color-text-muted); }
.waitlist { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.field em { font-style: normal; font-weight: 400; color: var(--color-text-muted); }
.field input { font-weight: 400; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-text); }
.field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-highlight); }
.check { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.check--opt { margin-top: var(--space-3); align-items: flex-start; color: var(--color-text); }
.check--opt input { flex: none; margin-top: 2px; }
.check--opt strong { font-weight: 700; white-space: nowrap; }
.waitlist-done { padding: var(--space-6); border: 1px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-primary-highlight); }
.waitlist-done__title { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; }
@media (max-width: 560px) { .formats-strip { grid-template-columns: 1fr; } }

/* Holiday knit sweater */
.feature--knit { grid-template-columns: 5fr 7fr; background: #7a1f1b; }
.feature--knit .feature__panel { order: -1; }
.feature--knit .feature__img { object-fit: cover; object-position: center; background: #e9dfcf; }
.feature--knit .feature__panel > p:not(.eyebrow) { color: #f1d9cf; }
.feature__price { font-family: var(--font-display); font-size: var(--text-xl); color: #f4efe6; }
.feature__price small { font-family: var(--font-body); font-size: var(--text-sm); color: #f1d9cf; margin-left: var(--space-2); }
@media (max-width: 860px) { .feature--knit { grid-template-columns: 1fr; } .feature--knit .feature__panel { order: 0; } .feature--knit .feature__img { aspect-ratio: 4 / 5; height: auto; } }

/* ---------- Format picker ---------- */
.formats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.fmt { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-2); text-align: left; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-2); cursor: pointer; transition: border-color var(--transition-interactive); }
.fmt:hover { border-color: var(--color-text-muted); }
.fmt[aria-checked='true'] { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.fmt__name { font-weight: 600; font-size: var(--text-sm); line-height: 1.25; }
.fmt__price { font-family: var(--font-display); font-size: var(--text-base); white-space: nowrap; }
.fmt__spec { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.35; }
.fmt__note { grid-column: 1 / -1; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.fmt__note.is-live { color: var(--color-gilt); }
.finishes { margin-top: var(--space-4); }
.finishes__label { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.finishes__label span { color: var(--color-text); font-weight: 600; }
.finishes__row { display: flex; gap: var(--space-3); }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--color-surface-2); box-shadow: 0 0 0 1px var(--color-border); cursor: pointer; }
.swatch[aria-checked='true'] { box-shadow: 0 0 0 2px var(--color-primary); }
.swatch--black { background: #1b1a18; }
.swatch--white { background: #f3f0ea; }
.swatch--oak { background: linear-gradient(135deg, #d0a46b, #a87943 45%, #c99a5f 70%, #94653a); }
.swatch--gold { background: linear-gradient(135deg, #8a6420, #ecc96f 35%, #a9802f 60%, #f1d68a 80%, #7d5a1b); }
.swatch--black-gold { background: radial-gradient(circle, #1b1a18 52%, #c9a24a 54%, #c9a24a 64%, #1b1a18 66%); }

/* ---------- Preview stage ---------- */
.stage { position: relative; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-lg); outline: 10px solid var(--color-surface-2); display: grid; place-items: center; transition: background 300ms ease; }
.pframe { position: relative; }
.pframe__mat { display: block; }
.pframe__art { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 160ms ease; }
.pframe__art.is-swapping { opacity: 0; }

/* Digital: the art as-is */
.stage[data-format='digital'] { background: var(--color-ink); }
.stage[data-format='digital'] .pframe { width: 100%; }
.stage[data-format='digital'] .pframe__art { height: auto; object-fit: contain; }

/* Wall for physical formats */
.stage[data-format='classic'], .stage[data-format='gallery'], .stage[data-format='canvas'] {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, oklch(0.97 0.012 80 / 0.9), transparent 70%),
    linear-gradient(180deg, #e6dccb 0%, #d8ccb8 78%, #b9a98f 78.4%, #8f7c63 100%);
}
.stage[data-format='classic'] .pframe, .stage[data-format='gallery'] .pframe, .stage[data-format='canvas'] .pframe { margin-top: -7%; }

/* Proportions: 12x16 classic = 3:4, 16x20 gallery and canvas = 4:5 */
.stage[data-format='classic'][data-orient='port'] .pframe__mat { aspect-ratio: 3 / 4; }
.stage[data-format='classic'][data-orient='land'] .pframe__mat { aspect-ratio: 4 / 3; }
.stage[data-format='gallery'][data-orient='port'] .pframe__mat, .stage[data-format='canvas'][data-orient='port'] .pframe__mat { aspect-ratio: 4 / 5; }
.stage[data-format='gallery'][data-orient='land'] .pframe__mat, .stage[data-format='canvas'][data-orient='land'] .pframe__mat { aspect-ratio: 5 / 4; }
.stage[data-format='classic'][data-orient='port'] .pframe { width: 34%; }
.stage[data-format='classic'][data-orient='land'] .pframe { width: 50%; }
.stage[data-format='gallery'][data-orient='port'] .pframe, .stage[data-format='canvas'][data-orient='port'] .pframe { width: 38%; }
.stage[data-format='gallery'][data-orient='land'] .pframe, .stage[data-format='canvas'][data-orient='land'] .pframe { width: 58%; }

/* Mat */
.stage[data-format='classic'] .pframe__mat { padding: 11%; background: #faf8f3; box-shadow: inset 0 0 6px rgba(0,0,0,0.12); }
.stage[data-format='gallery'] .pframe__mat { padding: 14%; background: #f6f1e6; box-shadow: inset 0 0 8px rgba(0,0,0,0.14); }
.stage[data-format='classic'] .pframe__art, .stage[data-format='gallery'] .pframe__art { box-shadow: 0 0 0 1px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(0,0,0,0.1); }

/* Frames */
.stage[data-format='classic'] .pframe, .stage[data-format='gallery'] .pframe { box-shadow: 0 22px 34px -14px rgba(40,28,12,0.55), 0 6px 10px -4px rgba(40,28,12,0.35); }
.stage[data-finish='black'] .pframe { border: 12px solid #1b1a18; }
.stage[data-finish='white'] .pframe { border: 12px solid #f4f1eb; outline: 1px solid rgba(0,0,0,0.1); }
.stage[data-finish='oak'] .pframe { border: 12px solid #b8874f; border-image: linear-gradient(135deg, #d4a86e, #a87943 30%, #c99a5f 55%, #94653a 80%, #c79a60) 1; }
.stage[data-finish='gold'] .pframe { border: 22px solid #b98d36; border-image: linear-gradient(135deg, #7d5a1b, #e8c66f 18%, #a9802f 38%, #f2d98b 58%, #8a6420 78%, #d9b45c) 1; }
.stage[data-finish='gold'] .pframe__mat { box-shadow: inset 0 0 0 3px #6e4f17, inset 0 0 10px rgba(0,0,0,0.25); }
.stage[data-finish='black-gold'] .pframe { border: 20px solid #151311; }
.stage[data-finish='black-gold'] .pframe__mat { box-shadow: inset 0 0 0 4px #c9a24a, inset 0 0 10px rgba(0,0,0,0.25); }

/* Canvas: no frame, wrapped edge */
.stage[data-format='canvas'] .pframe { box-shadow: 0 26px 36px -16px rgba(40,28,12,0.6), 7px 7px 0 -1px rgba(60,44,24,0.35); }

.stage__summary { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
.stage__summary strong { display: block; color: var(--color-text); font-weight: 600; margin-bottom: 2px; }
@media (max-width: 860px) {
  .stage[data-format='classic'], .stage[data-format='gallery'], .stage[data-format='canvas'] { aspect-ratio: 1 / 1; }
  .stage[data-format='classic'][data-orient='port'] .pframe { width: 52%; }
  .stage[data-format='classic'][data-orient='land'] .pframe { width: 70%; }
  .stage[data-format='gallery'][data-orient='port'] .pframe, .stage[data-format='canvas'][data-orient='port'] .pframe { width: 60%; }
  .stage[data-format='gallery'][data-orient='land'] .pframe, .stage[data-format='canvas'][data-orient='land'] .pframe { width: 76%; }
  .stage[data-finish='gold'] .pframe { border-width: 14px; }
  .stage[data-finish='black-gold'] .pframe { border-width: 13px; }
  .stage[data-finish='black'] .pframe, .stage[data-finish='white'] .pframe, .stage[data-finish='oak'] .pframe { border-width: 8px; }
}
@media (max-width: 420px) { .formats { grid-template-columns: 1fr; } }
@media (max-width: 960px) {
  .studio { display: flex; flex-direction: column; }
  .studio__controls { display: contents; }
  .studio__controls > .step:nth-child(1) { order: 1; }
  .studio__controls > .step:nth-child(2) { order: 2; }
  .studio__canvas { order: 3; width: 100%; }
  .studio__controls > .step:nth-child(3) { order: 4; }
}
.feature--wall { grid-template-columns: 1fr 1fr; background: #141312; min-height: 0; }
.feature--wall .feature__img { aspect-ratio: 1 / 1; height: auto; }
.feature--wall .eyebrow--light { color: #c9a24a; }
.feature--wall .feature__panel > p:not(.eyebrow) { color: #bdb6aa; max-width: 52ch; }
@media (max-width: 960px) { .feature--wall { grid-template-columns: 1fr; } }
.wallbanner { position: relative; height: min(48vw, 780px); overflow: hidden; background: #e9e7e3; }
.wallbanner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.wallbanner::after { content: ''; position: absolute; inset: auto 0 0 0; height: 7%; background: linear-gradient(to bottom, transparent, var(--color-bg)); pointer-events: none; }
@media (max-width: 640px) { .wallbanner { height: auto; aspect-ratio: 4 / 3; } }
@media (min-width: 1626px) {
  .wallbanner { height: 780px; background: #dcdad6; }
  .wallbanner::before { content: ''; position: absolute; inset: -40px; background: url('./assets/gilthund-wall-wide-1000.webp') left center / auto 100% repeat-x; filter: blur(14px) brightness(1.04); opacity: 0.9; }
  .wallbanner img { position: relative; width: 1387px; margin-inline: auto; object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
}

/* ---------- Per-style card titles ---------- */
.style-card[data-style] .style-card__name { line-height: 1.05; }
.style-card[data-style='old-master'] .style-card__name { font-family: 'IM Fell English', serif; font-size: calc(var(--text-xl) * 1.08); font-weight: 400; color: #5a2e14; }
.style-card[data-style='cinematic'] .style-card__name { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: calc(var(--text-xl) * 1.2); letter-spacing: 0.22em; }
.style-card[data-style='pop'] .style-card__name { font-family: 'Bangers', cursive; font-weight: 400; font-size: calc(var(--text-xl) * 1.2); letter-spacing: 0.05em; color: #111; text-shadow: 3px 2px 0 #ff2e93, -2px -1px 0 #18c6e8; }
.style-card[data-style='cubist'] .style-card__name { font-family: 'Rubik Mono One', sans-serif; font-weight: 400; font-size: calc(var(--text-xl) * 0.8); color: #b5481c; letter-spacing: 0.02em; }
.style-card[data-style='engraved'] .style-card__name { font-family: 'Cinzel', serif; font-weight: 600; font-size: calc(var(--text-xl) * 0.95); letter-spacing: 0.14em; }
.style-card[data-style='charcoal'] .style-card__name { font-family: 'Caveat', cursive; font-weight: 600; font-size: calc(var(--text-xl) * 1.3); color: #3a3632; }
.style-card[data-style='blue-steel'] .style-card__name { font-family: 'Bodoni Moda', serif; font-style: italic; font-weight: 700; font-size: calc(var(--text-xl) * 1.05); text-transform: uppercase; letter-spacing: 0.04em; color: #2f5a86; }
.style-card[data-style='ugly-sweater'] .style-card__name { font-family: 'Pixelify Sans', sans-serif; font-weight: 600; font-size: calc(var(--text-xl) * 1.05); color: #b3261e; text-shadow: 2px 2px 0 rgba(30, 110, 60, 0.35); }
.style-card[data-style='living-legend'] .style-card__name { font-family: 'Pacifico', cursive; font-weight: 400; font-size: calc(var(--text-xl) * 1.05); line-height: 1.3; align-self: flex-start; padding: 0.05em 0.35em 0.3em 0.15em; margin: -0.05em -0.35em -0.3em -0.15em; background: linear-gradient(180deg, #e9b949 0%, #a8701c 55%, #6e4510 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme='dark'] .style-card[data-style='old-master'] .style-card__name { color: #e0b98a; }
[data-theme='dark'] .style-card[data-style='pop'] .style-card__name { color: #fff; }
[data-theme='dark'] .style-card[data-style='cubist'] .style-card__name { color: #f08a4b; }
[data-theme='dark'] .style-card[data-style='charcoal'] .style-card__name { color: #e4dfd6; }
[data-theme='dark'] .style-card[data-style='blue-steel'] .style-card__name { color: #8fb6e0; }
[data-theme='dark'] .style-card[data-style='ugly-sweater'] .style-card__name { color: #ff6b5e; text-shadow: 2px 2px 0 rgba(80, 200, 120, 0.4); }
[data-theme='dark'] .style-card[data-style='living-legend'] .style-card__name { background: linear-gradient(180deg, #ffe08a 0%, #e0a43a 60%, #b07320 100%); -webkit-background-clip: text; background-clip: text; }

/* ---------- Museum frame ---------- */
.formats > .fmt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.stage[data-format='museum'] {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, oklch(0.62 0.05 150 / 0.55), transparent 70%),
    linear-gradient(180deg, #2f4a3c 0%, #263d31 78%, #4a3624 78.4%, #2c2016 100%);
}
.stage[data-format='museum'] .pframe { margin-top: -9%; border: 42px solid #8a4f2a; border-image: url('./assets/museum-frame-copper.webp') 166 166 183 166 stretch; box-shadow: 0 26px 40px -14px rgba(0,0,0,0.7), 0 8px 12px -4px rgba(0,0,0,0.5); }
.stage[data-format='museum'] .pframe__mat { padding: 0; background: #1a140d; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.stage[data-format='museum'] .pframe__art { box-shadow: inset 0 0 18px rgba(0,0,0,0.45); }
.stage[data-format='museum'][data-orient='port'] .pframe__mat { aspect-ratio: 4 / 5; }
.stage[data-format='museum'][data-orient='land'] .pframe__mat { aspect-ratio: 5 / 4; }
.stage[data-format='museum'][data-orient='port'] .pframe { width: 38%; }
.stage[data-format='museum'][data-orient='land'] .pframe { width: 62%; }
.swatch--museum { background: url('./assets/museum-frame-copper.webp') center / 160%; }
@media (max-width: 860px) {
  .stage[data-format='museum'] { aspect-ratio: 1 / 1; }
  .stage[data-format='museum'] .pframe { border-width: 26px; }
  .stage[data-format='museum'][data-orient='port'] .pframe { width: 58%; }
  .stage[data-format='museum'][data-orient='land'] .pframe { width: 74%; }
}

/* ---------- Baroque frame (Art-Prints-On-Demand photos) ---------- */
.stage[data-format='baroque'] {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, oklch(0.5 0.12 25 / 0.55), transparent 70%),
    linear-gradient(180deg, #5a1d1b 0%, #4a1716 78%, #3a2a1c 78.4%, #22180f 100%);
}
.stage[data-format='baroque'] .pframe { margin-top: -8%; border: 46px solid #8a6a2a; box-shadow: 0 28px 44px -14px rgba(0,0,0,0.75), 0 8px 12px -4px rgba(0,0,0,0.5); }
.stage[data-format='baroque'][data-finish='veniziano'] .pframe { border-image: url('./assets/baroque-veniziano.webp') 174 stretch; }
.stage[data-format='baroque'][data-finish='botticelli'] .pframe { border-image: url('./assets/baroque-botticelli.webp') 191 stretch; }
.stage[data-format='baroque'] .pframe__mat { padding: 0; background: #1a140d; }
.stage[data-format='baroque'] .pframe__art { box-shadow: inset 0 0 18px rgba(0,0,0,0.45); }
.stage[data-format='baroque'][data-orient='port'] .pframe__mat { aspect-ratio: 4 / 5; }
.stage[data-format='baroque'][data-orient='land'] .pframe__mat { aspect-ratio: 5 / 4; }
.stage[data-format='baroque'][data-orient='port'] .pframe { width: 40%; }
.stage[data-format='baroque'][data-orient='land'] .pframe { width: 60%; }
.swatch--veniziano { background: url('./assets/baroque-veniziano.webp') left top / 300%; }
.swatch--botticelli { background: url('./assets/baroque-botticelli.webp') left top / 300%; }
@media (max-width: 860px) {
  .stage[data-format='baroque'] { aspect-ratio: 1 / 1; }
  .stage[data-format='baroque'][data-orient='port'] .pframe { width: 60%; }
  .stage[data-format='baroque'][data-orient='land'] .pframe { width: 76%; }
}

/* ---------- European Collection (by inquiry) ---------- */
.stage[data-format='european'] {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, oklch(0.5 0.12 25 / 0.55), transparent 70%),
    linear-gradient(180deg, #5a1d1b 0%, #4a1716 78%, #3a2a1c 78.4%, #22180f 100%);
}
.stage[data-format='european'] .pframe { margin-top: -8%; border: 46px solid #8a6a2a; box-shadow: 0 28px 44px -14px rgba(0,0,0,0.75), 0 8px 12px -4px rgba(0,0,0,0.5); }
.stage[data-format='european'][data-finish='baroque-gold'] .pframe { border-image: url('./assets/european-baroque-gold.webp') 162 162 184 162 stretch; }
.stage[data-format='european'][data-finish='roman-baroque'] .pframe { border-image: url('./assets/european-roman-baroque.webp') 158 152 163 152 round; }
.stage[data-format='european'] .pframe__mat { padding: 0; background: #1a140d; }
.stage[data-format='european'] .pframe__art { box-shadow: inset 0 0 18px rgba(0,0,0,0.45); }
.stage[data-format='european'][data-orient='port'] .pframe__mat { aspect-ratio: 4 / 5; }
.stage[data-format='european'][data-orient='land'] .pframe__mat { aspect-ratio: 5 / 4; }
.stage[data-format='european'][data-orient='port'] .pframe { width: 46%; }
.stage[data-format='european'][data-orient='land'] .pframe { width: 64%; }
.swatch--baroque-gold { background: url('./assets/european-baroque-gold.webp') left top / 260%; }
.swatch--roman-baroque { background: url('./assets/european-roman-baroque.webp') left top / 260%; }
@media (max-width: 860px) {
  .stage[data-format='european'] { aspect-ratio: 1 / 1; }
  .stage[data-format='european'][data-orient='port'] .pframe { width: 66%; }
  .stage[data-format='european'][data-orient='land'] .pframe { width: 80%; }
}

/* ---------- Print, framed canvas, metal ---------- */
.stage[data-format='print'], .stage[data-format='framed-canvas'], .stage[data-format='metal'] {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, oklch(0.97 0.012 80 / 0.9), transparent 70%),
    linear-gradient(180deg, #e6dccb 0%, #d8ccb8 78%, #b9a98f 78.4%, #8f7c63 100%);
}
.stage[data-format='print'] .pframe, .stage[data-format='framed-canvas'] .pframe, .stage[data-format='metal'] .pframe { margin-top: -7%; }
.stage[data-format='print'][data-orient='port'] .pframe__mat, .stage[data-format='framed-canvas'][data-orient='port'] .pframe__mat, .stage[data-format='metal'][data-orient='port'] .pframe__mat { aspect-ratio: 4 / 5; }
.stage[data-format='print'][data-orient='land'] .pframe__mat, .stage[data-format='framed-canvas'][data-orient='land'] .pframe__mat, .stage[data-format='metal'][data-orient='land'] .pframe__mat { aspect-ratio: 5 / 4; }
.stage[data-format='print'][data-orient='port'] .pframe, .stage[data-format='framed-canvas'][data-orient='port'] .pframe, .stage[data-format='metal'][data-orient='port'] .pframe { width: 38%; }
.stage[data-format='print'][data-orient='land'] .pframe, .stage[data-format='framed-canvas'][data-orient='land'] .pframe, .stage[data-format='metal'][data-orient='land'] .pframe { width: 58%; }

/* Unframed print: paper with a white border, held by two bulldog clips */
.stage[data-format='print'] .pframe__mat { padding: 5%; background: #fbfaf6; box-shadow: 0 1px 0 rgba(0,0,0,0.05); }
.stage[data-format='print'] .pframe { box-shadow: 0 14px 22px -12px rgba(40,28,12,0.45), 0 2px 4px rgba(40,28,12,0.18); transform: rotate(-0.6deg); }
.stage[data-format='print'] .pframe::before, .stage[data-format='print'] .pframe::after { content: ''; position: absolute; top: -8px; width: 34px; height: 14px; border-radius: 2px; background: linear-gradient(180deg, #4a4a4a, #222); box-shadow: 0 2px 3px rgba(0,0,0,0.3); z-index: 2; }
.stage[data-format='print'] .pframe::before { left: 14%; }
.stage[data-format='print'] .pframe::after { right: 14%; }

/* Framed canvas: canvas floating inside a thin black frame with a shadow gap */
.stage[data-format='framed-canvas'] .pframe { border: 9px solid #161514; box-shadow: 0 24px 34px -14px rgba(40,28,12,0.55), 0 6px 10px -4px rgba(40,28,12,0.35); }
.stage[data-format='framed-canvas'] .pframe__mat { padding: 3.5%; background: #0c0b0a; }
.stage[data-format='framed-canvas'] .pframe__art { box-shadow: 0 0 10px rgba(0,0,0,0.8); }

/* Metal: edge-to-edge with a glossy sheen, floating off the wall */
.stage[data-format='metal'] .pframe { box-shadow: 0 30px 40px -18px rgba(40,28,12,0.6), 0 10px 14px -6px rgba(40,28,12,0.35); border-radius: 2px; overflow: hidden; }
.stage[data-format='metal'] .pframe::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.32) 42%, rgba(255,255,255,0) 54%), linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.06)); pointer-events: none; }
.stage[data-format='metal'] .pframe__art { filter: saturate(1.15) contrast(1.05); }

@media (max-width: 860px) {
  .stage[data-format='print'], .stage[data-format='framed-canvas'], .stage[data-format='metal'] { aspect-ratio: 1 / 1; }
  .stage[data-format='print'][data-orient='port'] .pframe, .stage[data-format='framed-canvas'][data-orient='port'] .pframe, .stage[data-format='metal'][data-orient='port'] .pframe { width: 60%; }
  .stage[data-format='print'][data-orient='land'] .pframe, .stage[data-format='framed-canvas'][data-orient='land'] .pframe, .stage[data-format='metal'][data-orient='land'] .pframe { width: 76%; }
  .stage[data-format='framed-canvas'] .pframe { border-width: 6px; }
}

/* What goes into every print */
.craft { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; margin-top: clamp(var(--space-16), 8vw, var(--space-24)); padding-top: clamp(var(--space-10), 5vw, var(--space-16)); border-top: 1px solid var(--color-divider); }
.craft__title { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.15; margin-bottom: var(--space-4); }
.craft__lede { color: var(--color-text-muted); margin-bottom: var(--space-6); max-width: 52ch; }
.craft__list { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.craft__list li { position: relative; padding-left: var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.55; }
.craft__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border: 1px solid var(--color-gilt); transform: rotate(45deg); }
.craft__list strong { color: var(--color-text); font-weight: 600; }
.craft__fig { margin: 0; }
.craft__fig { justify-self: center; width: 100%; max-width: 540px; }
.craft__stage { aspect-ratio: 1; outline-width: 8px; margin-bottom: var(--space-4); background: var(--color-surface-offset); }
.craft__stage .compare__tag { background: rgba(20, 15, 10, 0.78); }
.craft__stage .craft__tag--gilt { background: #9a7425; color: #fffaf0; }
.craft__fig figcaption { text-align: center; }
@media (max-width: 860px) { .craft { grid-template-columns: minmax(0, 1fr); } }

/* Fun / limited-edition group */
.fun-head { max-width: 640px; margin: clamp(var(--space-16), 8vw, var(--space-24)) 0 clamp(var(--space-8), 4vw, var(--space-12)); }
.fun-head__sticker { display: inline-block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: #231b14; background: #f2c94c; padding: 6px 14px; border-radius: 4px; transform: rotate(-3deg); box-shadow: 3px 3px 0 var(--color-text); margin-bottom: var(--space-5); }
.fun-head__title { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.05; margin-bottom: var(--space-4); }
.styles--fun .style-card { border-style: dashed; border-color: color-mix(in oklab, var(--color-gilt) 55%, var(--color-divider)); }
.styles--fun .style-card:nth-child(odd) { transform: rotate(-0.6deg); }
.styles--fun .style-card:nth-child(even) { transform: rotate(0.6deg); }
@media (prefers-reduced-motion: no-preference) { .styles--fun .style-card { transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); } .styles--fun .style-card:hover { transform: rotate(0deg) translateY(-4px); } }
@media (max-width: 640px) { .styles--fun .style-card { transform: none !important; } }
.menu-btn.is-open .menu-btn__mid { opacity: 0; }
.menu-btn.is-open .menu-btn__top { transform: translateY(5px) rotate(45deg); transform-origin: 12px 7px; }
.menu-btn.is-open .menu-btn__bot { transform: translateY(-5px) rotate(-45deg); transform-origin: 12px 17px; }
.menu-btn svg path { transition: transform 200ms ease, opacity 150ms ease; }

/* ---------- Size picker (8×10 vs 16×20) ---------- */
.sizes { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.size { position: relative; display: inline-flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); font-size: var(--text-sm); }
.size:hover { border-color: var(--color-text-muted); }
.size[aria-checked='true'] { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.size__name { font-weight: 600; }
.size__price { font-family: var(--font-display); }
.size__tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-gilt); }
/* Small size: art at ~56% of the 16×20, frame moulding stays the same physical width */
.stage[data-size='8x10'] .pframe { transform: scale(0.5); transform-origin: 50% 46%; transition: transform 300ms ease; }
.stage[data-size='16x20'] .pframe { transition: transform 300ms ease; }
.stage[data-format='print'][data-size='8x10'] .pframe { transform: rotate(-0.6deg) scale(0.5); }
.stage[data-format='gallery'][data-size='8x10'][data-finish='gold'] .pframe { border-width: 39px; }
.stage[data-format='gallery'][data-size='8x10'][data-finish='black-gold'] .pframe { border-width: 36px; }
@media (max-width: 860px) {
  .stage[data-format='gallery'][data-size='8x10'][data-finish='gold'] .pframe { border-width: 25px; }
}

.feature__split { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #f3ede2; min-height: 640px; }
.feature__split img { width: 100%; height: 100%; min-height: 0; object-fit: cover; contain: size; display: block; }
@media (max-width: 1240px) { #gifts.feature { grid-template-columns: 1fr; } .feature__split { min-height: 0; height: auto; aspect-ratio: 3 / 2; } }

/* Keep the wall preview in view while choosing style, size and format (two-column layout) */
@media (min-width: 961px) {
  .studio__canvas { position: sticky; top: 88px; }
}

/* Upgrade prompt */
.modal--upsell { width: min(94vw, 520px); }
.modal__lede { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: calc(-1 * var(--space-2)); }
.upsell__offers { display: grid; gap: var(--space-3); }
.offer { display: grid; grid-template-columns: 22px 1fr auto; gap: var(--space-3); align-items: start; text-align: left; padding: var(--space-4); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color .15s, box-shadow .15s; }
.offer:hover { border-color: var(--color-text-muted); }
.offer[aria-pressed='true'] { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.offer__check { width: 20px; height: 20px; margin-top: 2px; border: 1.5px solid var(--color-text-muted); border-radius: 5px; display: grid; place-items: center; }
.offer[aria-pressed='true'] .offer__check { background: var(--color-primary); border-color: var(--color-primary); }
.offer[aria-pressed='true'] .offer__check::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.offer__body { display: grid; gap: 2px; }
.offer__name { font-weight: 700; }
.offer__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; }
.offer__price { font-weight: 700; white-space: nowrap; }
.upsell__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.upsell__total strong { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); }
@media (max-width: 480px) { .modal--upsell .modal__inner { padding: var(--space-6); } .modal--upsell .modal__actions { flex-direction: column-reverse; } .modal--upsell .modal__actions .btn { width: 100%; } }

/* Frames follow the artwork's own shape, so nothing is cropped */
.stage:not([data-format='digital']) .pframe__mat { aspect-ratio: auto !important; }
.stage:not([data-format='digital']) .pframe__art { height: auto; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; }

/* Photo checklist */
.guide { margin-top: clamp(var(--space-10), 5vw, var(--space-16)); }
.guide__head { max-width: 640px; margin-bottom: var(--space-6); }
.guide__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; margin-bottom: var(--space-2); }
.guide__head p { color: var(--color-text-muted); font-size: var(--text-sm); }
.guide__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); list-style: none; padding: 0; }
.guide__grid li { display: flex; flex-direction: column; gap: var(--space-1); }
.guide__grid img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: var(--space-2); border: 1px solid var(--color-border); }
.guide__grid strong { font-size: var(--text-sm); font-weight: 600; }
.guide__grid span { font-size: var(--text-xs); color: var(--color-text-muted); }
.guide__skip { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 860px) { .guide__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Square print sizes (art is square), Oct 2026 ---------- */
/* Print shapes. Samples are full squares with the pet centered, so a 4:5 crop keeps the whole pet */
.stage[data-shape='square'] .pframe__art { aspect-ratio: 1 / 1; object-fit: cover; }
.stage[data-shape='rect'][data-orient='land'] .pframe__art { aspect-ratio: 5 / 4; object-fit: cover; }
.stage[data-shape='rect'][data-orient='port'] .pframe__art { aspect-ratio: 4 / 5; object-fit: cover; }
.stage[data-format='classic'][data-orient] .pframe { width: 36%; }
.stage[data-format='gallery'][data-orient] .pframe, .stage[data-format='canvas'][data-orient] .pframe,
.stage[data-format='print'][data-orient] .pframe, .stage[data-format='framed-canvas'][data-orient] .pframe,
.stage[data-format='metal'][data-orient] .pframe { width: 42%; }
.stage[data-format='museum'][data-orient] .pframe { width: 44%; }
.stage[data-format='baroque'][data-orient] .pframe { width: 46%; }
.stage[data-format='european'][data-orient] .pframe { width: 50%; }

/* 10x10 shows at 62.5% of the 16x16 on the same wall */
.stage[data-size='10x10'] .pframe { transform: scale(0.625); transform-origin: 50% 46%; transition: transform 300ms ease; }
.stage[data-size='16x16'] .pframe { transition: transform 300ms ease; }
.stage[data-format='print'][data-size='10x10'] .pframe { transform: rotate(-0.6deg) scale(0.625); }
.stage[data-format='gallery'][data-size='10x10'][data-finish='gold'] .pframe { border-width: 35px; }
.stage[data-format='gallery'][data-size='10x10'][data-finish='black-gold'] .pframe { border-width: 32px; }

/* Museum: Plein Air espresso brushed with gold, 2.5625 in */
.stage[data-format='museum'] .pframe { border-color: #33241a; border-image: url('./assets/frame-museum-espresso.webp') 170 stretch; }
.swatch--museum { background: url('./assets/frame-museum-espresso.webp') left top / 300%; }

/* Florentine gold leaf (by inquiry), 3.25 in */
.stage[data-format='florentine'] {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, oklch(0.56 0.04 250 / 0.55), transparent 70%),
    linear-gradient(180deg, #2b3340 0%, #232a35 78%, #3a2d20 78.4%, #1f1810 100%);
}
.stage[data-format='florentine'] .pframe { margin-top: -8%; border: 44px solid #a57a34; border-image: url('./assets/frame-florentine.webp') 170 stretch; box-shadow: 0 28px 44px -14px rgba(0,0,0,0.75), 0 8px 12px -4px rgba(0,0,0,0.5); }
.stage[data-format='florentine'] .pframe__mat { padding: 0; background: #1a140d; }
.stage[data-format='florentine'] .pframe__art { box-shadow: inset 0 0 18px rgba(0,0,0,0.45); }
.stage[data-format='florentine'][data-orient] .pframe { width: 48%; }

/* New finishes */
.swatch--slim-gold { background: linear-gradient(135deg, #8a6420, #ecc96f 35%, #a9802f 60%, #f1d68a 80%, #7d5a1b); }
.swatch--slim-black-gold { background: radial-gradient(circle, #1b1a18 58%, #c9a24a 60%, #c9a24a 68%, #1b1a18 70%); }
.swatch--deep-black { background: linear-gradient(135deg, #2a2a2a, #0e0e0e); box-shadow: inset 0 0 0 3px #000; }
.swatch--walnut { background: linear-gradient(135deg, #6b4a32, #4a2f1e 40%, #5e3f29 70%, #3b2416); }
.stage[data-finish='slim-gold'] .pframe { border: 8px solid #b98d36; border-image: linear-gradient(135deg, #7d5a1b, #e8c66f 18%, #a9802f 38%, #f2d98b 58%, #8a6420 78%, #d9b45c) 1; }
.stage[data-finish='slim-black-gold'] .pframe { border: 10px solid #1a1816; }
.stage[data-finish='slim-black-gold'] .pframe__mat { box-shadow: inset 0 0 0 2px #c9a24a, inset 0 0 8px rgba(0,0,0,0.2); }
.stage[data-finish='deep-black'] .pframe { border: 11px solid #151515; box-shadow: 0 30px 40px -12px rgba(20,14,8,0.65), 10px 12px 0 -2px rgba(20,14,8,0.35); }
.stage[data-format='framed-canvas'][data-finish='oak'] .pframe { border-color: #b8874f; border-image: linear-gradient(135deg, #d4a86e, #a87943 30%, #c99a5f 55%, #94653a 80%, #c79a60) 1; }
.stage[data-format='framed-canvas'][data-finish='walnut'] .pframe { border-color: #4a2f1e; border-image: linear-gradient(135deg, #6b4a32, #4a2f1e 30%, #5e3f29 55%, #3b2416 80%, #5a3a26) 1; }

@media (max-width: 860px) {
  .stage[data-format='florentine'] { aspect-ratio: 1 / 1; }
  .stage[data-format='florentine'] .pframe { border-width: 28px; }
  .stage[data-format='classic'][data-orient] .pframe { width: 54%; }
  .stage[data-format='gallery'][data-orient] .pframe, .stage[data-format='canvas'][data-orient] .pframe,
  .stage[data-format='print'][data-orient] .pframe, .stage[data-format='framed-canvas'][data-orient] .pframe,
  .stage[data-format='metal'][data-orient] .pframe { width: 62%; }
  .stage[data-format='museum'][data-orient] .pframe, .stage[data-format='florentine'][data-orient] .pframe { width: 66%; }
  .stage[data-format='baroque'][data-orient] .pframe { width: 66%; }
  .stage[data-format='european'][data-orient] .pframe { width: 70%; }
  .stage[data-format='gallery'][data-size='10x10'][data-finish='gold'] .pframe { border-width: 22px; }
  .stage[data-format='gallery'][data-size='10x10'][data-finish='black-gold'] .pframe { border-width: 21px; }
  .stage[data-finish='slim-gold'] .pframe, .stage[data-finish='slim-black-gold'] .pframe { border-width: 6px; }
  .stage[data-finish='deep-black'] .pframe { border-width: 8px; }
}

/* Rectangle widths: landscape a little wider, portrait a little narrower than the square */
.stage[data-format='classic'][data-shape='rect'][data-orient='land'] .pframe { width: 40%; }
.stage[data-format='classic'][data-shape='rect'][data-orient='port'] .pframe { width: 32%; }
.stage[data-format='gallery'][data-shape='rect'][data-orient='land'] .pframe { width: 47%; }
.stage[data-format='gallery'][data-shape='rect'][data-orient='port'] .pframe { width: 38%; }
.stage[data-format='canvas'][data-shape='rect'][data-orient='land'] .pframe { width: 47%; }
.stage[data-format='canvas'][data-shape='rect'][data-orient='port'] .pframe { width: 38%; }
.stage[data-format='print'][data-shape='rect'][data-orient='land'] .pframe { width: 47%; }
.stage[data-format='print'][data-shape='rect'][data-orient='port'] .pframe { width: 38%; }
.stage[data-format='framed-canvas'][data-shape='rect'][data-orient='land'] .pframe { width: 47%; }
.stage[data-format='framed-canvas'][data-shape='rect'][data-orient='port'] .pframe { width: 38%; }
.stage[data-format='metal'][data-shape='rect'][data-orient='land'] .pframe { width: 47%; }
.stage[data-format='metal'][data-shape='rect'][data-orient='port'] .pframe { width: 38%; }
.stage[data-format='museum'][data-shape='rect'][data-orient='land'] .pframe { width: 49%; }
.stage[data-format='museum'][data-shape='rect'][data-orient='port'] .pframe { width: 40%; }
.stage[data-format='florentine'][data-shape='rect'][data-orient='land'] .pframe { width: 54%; }
.stage[data-format='florentine'][data-shape='rect'][data-orient='port'] .pframe { width: 43%; }
.stage[data-format='baroque'][data-shape='rect'][data-orient='land'] .pframe { width: 51%; }
.stage[data-format='baroque'][data-shape='rect'][data-orient='port'] .pframe { width: 41%; }
.stage[data-format='european'][data-shape='rect'][data-orient='land'] .pframe { width: 56%; }
.stage[data-format='european'][data-shape='rect'][data-orient='port'] .pframe { width: 45%; }
.stage[data-size='11x14'] .pframe { transform: scale(0.6875); transform-origin: 50% 46%; transition: transform 300ms ease; }
.stage[data-format='print'][data-size='11x14'] .pframe { transform: rotate(-0.6deg) scale(0.6875); }
.stage[data-format='gallery'][data-size='11x14'][data-finish='gold'] .pframe { border-width: 32px; }
.stage[data-format='gallery'][data-size='11x14'][data-finish='black-gold'] .pframe { border-width: 29px; }
.shape__note { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); max-width: 46ch; }
@media (max-width: 860px) {
  .stage[data-format='classic'][data-shape='rect'][data-orient='land'] .pframe { width: 60%; }
  .stage[data-format='classic'][data-shape='rect'][data-orient='port'] .pframe { width: 49%; }
  .stage[data-format='gallery'][data-shape='rect'][data-orient='land'] .pframe { width: 69%; }
  .stage[data-format='gallery'][data-shape='rect'][data-orient='port'] .pframe { width: 56%; }
  .stage[data-format='canvas'][data-shape='rect'][data-orient='land'] .pframe { width: 69%; }
  .stage[data-format='canvas'][data-shape='rect'][data-orient='port'] .pframe { width: 56%; }
  .stage[data-format='print'][data-shape='rect'][data-orient='land'] .pframe { width: 69%; }
  .stage[data-format='print'][data-shape='rect'][data-orient='port'] .pframe { width: 56%; }
  .stage[data-format='framed-canvas'][data-shape='rect'][data-orient='land'] .pframe { width: 69%; }
  .stage[data-format='framed-canvas'][data-shape='rect'][data-orient='port'] .pframe { width: 56%; }
  .stage[data-format='metal'][data-shape='rect'][data-orient='land'] .pframe { width: 69%; }
  .stage[data-format='metal'][data-shape='rect'][data-orient='port'] .pframe { width: 56%; }
  .stage[data-format='museum'][data-shape='rect'][data-orient='land'] .pframe { width: 72%; }
  .stage[data-format='museum'][data-shape='rect'][data-orient='port'] .pframe { width: 59%; }
  .stage[data-format='florentine'][data-shape='rect'][data-orient='land'] .pframe { width: 72%; }
  .stage[data-format='florentine'][data-shape='rect'][data-orient='port'] .pframe { width: 59%; }
  .stage[data-format='baroque'][data-shape='rect'][data-orient='land'] .pframe { width: 72%; }
  .stage[data-format='baroque'][data-shape='rect'][data-orient='port'] .pframe { width: 59%; }
  .stage[data-format='european'][data-shape='rect'][data-orient='land'] .pframe { width: 76%; }
  .stage[data-format='european'][data-shape='rect'][data-orient='port'] .pframe { width: 63%; }
  .stage[data-format='gallery'][data-size='11x14'][data-finish='gold'] .pframe { border-width: 20px; }
  .stage[data-format='gallery'][data-size='11x14'][data-finish='black-gold'] .pframe { border-width: 19px; }
  .stage[data-format='gallery'][data-size='8x10'][data-finish='black-gold'] .pframe { border-width: 23px; }
}