/* ==========================================================================
   LUCE — site stylesheet
   Brand tokens measured from the client guide (PDF): gold #B88A42 text,
   #CFA340 filled CTA, #76582D rules, canvas #050505 / #070707.
   Single family site-wide: Wanted Sans (display, body, UI, wordmark, prices). No serif, no italic.
   ========================================================================== */

:root {
  --bg: #050505;
  --bg-2: #0a0908;
  --surface: #100e0b;
  --surface-2: #171410;
  --fg: #f4efe6;
  --fg-2: #cfc6b4;
  --muted: #8d8574;
  --gold: #b88a42;
  --gold-bright: #cfa340;
  --gold-dim: #76582d;
  --gold-text: #a07a3c; /* 4.5:1 on #050505 — small dim-gold text */
  --line: rgba(184, 138, 66, .30);
  --line-soft: rgba(184, 138, 66, .14);
  --success: #7fb47a;
  --danger: #d0655a;
  --font-body: 'Wanted Sans Variable', 'Wanted Sans', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-num: var(--font-body);
  --panel-top: clamp(112px, 17vh, 168px);
  --stats-h: 111px; /* height of the 4-cell stat bar; figure panels reserve the same band */
  /* type roles — one family, sizes & tracking only */
  --t-micro: 10px; --t-label: 11px; --t-ui: 12px; --t-small: 13px; --t-body: 15px; --t-sub: 22px; --t-price: 22px; --t-price-lg: 26px;
  --track-micro: .22em; --track-label: .18em; --track-ui: .14em; --track-cap: .06em;
  --nav-w: 248px;
  --gutter: clamp(28px, 5vw, 72px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --fast: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100svh; }
.main { min-width: 0; position: relative; }

/* ---------- side navigation ---------- */
.nav { position: sticky; top: 0; height: 100svh; padding: 14px 0 14px 14px; background: var(--bg-2); z-index: 20; }
.nav__frame { height: 100%; border: 1px solid var(--gold-dim); display: flex; flex-direction: column; padding: 48px 22px 26px; }
.brand { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1; letter-spacing: .46em; text-indent: .46em; color: var(--gold); text-align: center; }
.brand:hover { color: var(--gold-bright); }
.nav__label { margin: 46px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--gold-dim); font-size: 10px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold-text); }
.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__item a {
  position: relative; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px;
  padding: 19px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-2);
  transition: color var(--fast);
}
.nav__num { font-size: 11px; letter-spacing: .08em; color: var(--gold-text); }
.nav__chev { color: var(--gold); font-size: 14px; line-height: 1; transition: transform var(--fast) var(--ease); }
.nav__item a:hover { color: var(--fg); }
.nav__item a:hover .nav__chev { transform: translateX(3px); }
.nav__item.is-active a { color: var(--gold); }
.nav__item.is-active a::before { content: ""; position: absolute; left: -23px; top: 16px; bottom: 16px; width: 2px; background: var(--gold-bright); }
.nav__foot { margin-top: auto; padding-top: 24px; font-size: 10px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--muted); }
.nav__toggle { display: none; }

/* cart pill (top-right, all pages) */
.cart-link {
  position: fixed; top: 22px; right: 28px; z-index: 30;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px;
  font-size: 11px; letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--gold);
  background: rgba(5, 5, 5, .72); border: 1px solid transparent; transition: border-color var(--fast);
}
.cart-link:hover { border-color: var(--gold-dim); }
.cart-link svg { width: 16px; height: 16px; }

/* ---------- panels (chapter screens) ---------- */
.panel { position: relative; min-height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: clip; background: var(--bg); isolation: isolate; } /* clip, not hidden: hidden would make the panel a scroll container and freeze view() timelines */
.panel__media { position: absolute; inset: 0; z-index: 0; }
.panel__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 72% 50%); }
.panel__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, var(--bg) 20%, rgba(5, 5, 5, .82) 42%, rgba(5, 5, 5, .18) 66%, rgba(5, 5, 5, 0) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, .38) 0%, rgba(5, 5, 5, 0) 28%, rgba(5, 5, 5, 0) 72%, rgba(5, 5, 5, .62) 100%);
}
.panel--soft .panel__media::after {
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(5, 5, 5, .86) 26%, rgba(5, 5, 5, .40) 50%, rgba(5, 5, 5, .10) 72%, rgba(5, 5, 5, 0) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, .30) 0%, rgba(5, 5, 5, 0) 30%, rgba(5, 5, 5, 0) 72%, rgba(5, 5, 5, .62) 100%);
}
.panel--wide .panel__media::after {
  background:
    linear-gradient(90deg, rgba(5, 5, 5, .72) 0%, rgba(5, 5, 5, .30) 32%, rgba(5, 5, 5, 0) 55%),
    linear-gradient(180deg, rgba(5, 5, 5, .55) 0%, rgba(5, 5, 5, 0) 34%, rgba(5, 5, 5, 0) 70%, rgba(5, 5, 5, .70) 100%);
}
.panel__body {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start;
  padding: var(--panel-top) var(--gutter) clamp(56px, 9vh, 96px); max-width: calc(640px + 2 * var(--gutter));
}
.panel__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: stretch; padding: var(--panel-top) var(--gutter) var(--stats-h); }
.panel__grid > .col { min-width: 0; }
/* figure column fills the panel like a photo panel's media: top on the header anchor, bottom on the stat-bar line */
.panel__grid > .col--fig { align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
.col--fig .frame { flex: 1 1 auto; min-height: 0; display: flex; }
.col--fig .frame img { width: 100%; height: 100%; object-fit: cover; }
.col--fig .frame--plain, .col--fig .frame--contain { background: rgba(5, 5, 5, .35); }
.col--fig .frame--plain img, .col--fig .frame--contain img { object-fit: contain; }
.col--fig .trio { flex: 1 1 auto; min-height: 0; }
.col--fig .caption { flex: none; }

.eyebrow { margin: 0 0 12px; font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }
.rule { position: relative; width: min(100%, 320px); height: 1px; background: var(--gold-dim); margin: 0 0 32px; }
.rule::after { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; border: 1px solid var(--gold); background: var(--bg); transform: translateX(-50%) rotate(45deg); }
.display {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 3.2vw, 46px); line-height: 1.08;
  letter-spacing: var(--track-cap); text-transform: uppercase; color: var(--fg); margin: 0 0 26px; text-wrap: balance;
}
.display .l2 { display: block; color: var(--gold); font-weight: 400; }
.display--md { font-size: clamp(30px, 3vw, 42px); }
.display--xl { font-size: clamp(40px, 4.3vw, 62px); line-height: 1.02; }
.display--sm { font-size: clamp(26px, 2.6vw, 36px); }
.lede { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.65; color: var(--fg-2); max-width: 46ch; margin: 0 0 40px; text-wrap: pretty; }
.panel__body > .lede, .panel__grid .lede { min-height: 3.3em; }
.lede b, .lede strong { color: var(--fg); font-weight: 600; }
.lede:last-child { margin-bottom: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 18px 30px;
  border: 1px solid var(--gold); color: var(--gold); font-size: 12px; letter-spacing: var(--track-micro); text-transform: uppercase; line-height: 1;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: #141008; }
.btn svg { width: 18px; height: 12px; flex: none; }
.btn--solid { background: var(--gold-bright); border-color: var(--gold-bright); color: #141008; font-weight: 600; }
.btn--solid:hover { background: #dab04a; border-color: #dab04a; }
.btn--block { width: 100%; }
.btn--sm { padding: 13px 20px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.link { font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); border-bottom: 1px solid transparent; transition: border-color var(--fast); }
.link:hover { border-color: var(--gold); }

.stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: rgba(5, 5, 5, .86); }
.stats div { padding: 28px 16px; text-align: center; border-left: 1px solid var(--line-soft); }
.stats div:first-child { border-left: 0; }
.stats b { display: block; font-size: 19px; font-weight: 700; letter-spacing: .06em; color: var(--fg); }
.stats span { display: block; margin-top: 8px; font-size: 10px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }

.hint { position: absolute; left: var(--gutter); bottom: 34px; z-index: 1; display: inline-flex; align-items: center; gap: 48px; font-size: 10px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }
.hint svg { width: 12px; height: 18px; }

.frame { border: 1px solid var(--gold-dim); padding: 6px; background: rgba(5, 5, 5, .55); }
.frame img { width: 100%; height: auto; }
.frame--fill img { height: 100%; object-fit: cover; }
.caption { margin-top: 16px; text-align: center; font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }

/* numbered feature list (WHAT SETS LUCE APART) */
.numlist { list-style: none; margin: 0; padding: 0; }
.numlist li { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.numlist li:last-child { border-bottom: 0; }
.numlist .n { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: .04em; color: var(--gold); border-right: 1px solid var(--gold-dim); padding-right: 14px; text-align: right; }
.numlist h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); }
.numlist p { margin: 4px 0 0; font-size: 14px; color: var(--fg-2); }

/* callouts (FORM MEETS FUNCTION) */
.callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin-top: 8px; }
.callout { position: relative; padding-right: 20px; }
.callout h3 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 16px; }
.callout h3::after { content: ""; flex: 1; height: 1px; background: var(--gold-dim); position: relative; }
.callout h3 i { width: 7px; height: 7px; border: 1px solid var(--gold); border-radius: 50%; flex: none; order: 3; }
.callout p { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--fg-2); }

/* portrait trio (MADE BY KOREA) */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.trio .frame { aspect-ratio: auto; }
.trio .frame img { height: 100%; object-fit: cover; }

/* quote block */
.quote { position: absolute; top: var(--panel-top); right: var(--gutter); z-index: 2; width: min(380px, 42%); padding: 30px 28px; border: 1px solid var(--gold-dim); background: rgba(5, 5, 5, .62); text-align: center; }
.quote p { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: var(--track-cap); text-transform: uppercase; color: var(--fg); }
.quote cite { display: block; margin-top: 16px; font-style: normal; font-size: 10px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }

/* next-chapter bar */
.next { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 36px var(--gutter); border-top: 1px solid var(--line); background: var(--bg-2); }
.next__k { font-size: 10px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }
.next__t { margin-top: 6px; font-family: var(--font-display); font-size: var(--t-sub); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-cap); color: var(--fg); }
.next:hover .btn { background: var(--gold-bright); border-color: var(--gold-bright); color: #141008; }

/* home chapter index */
.chapters { border-top: 1px solid var(--line); }
.chapters a { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: baseline; gap: 24px; padding: 34px var(--gutter); border-bottom: 1px solid var(--line-soft); transition: background var(--fast); }
.chapters a:hover { background: var(--bg-2); }
.chapters .n { font-size: 12px; letter-spacing: .2em; color: var(--gold-text); }
.chapters .t { font-family: var(--font-display); font-size: var(--t-sub); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-cap); color: var(--fg); }
.chapters .s { display: block; margin-top: 4px; font-size: var(--t-body); color: var(--muted); font-family: var(--font-body); text-transform: none; letter-spacing: 0; }
.chapters .c { font-size: 14px; color: var(--gold); transition: transform var(--fast) var(--ease); }
.chapters a:hover .c { transform: translateX(4px); }

/* footer */
.footer { padding: 56px var(--gutter) 40px; border-top: 1px solid var(--line); background: var(--bg-2); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.footer .brand { text-align: left; text-indent: 0; }
.footer p { margin: 14px 0 0; font-size: 12px; letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--muted); }
.footer nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.footer nav a { font-size: var(--t-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-2); padding: 8px 0; display: inline-block; }
.footer nav a:hover { color: var(--gold); }
.footer small { grid-column: 1 / -1; font-size: 11px; letter-spacing: .08em; color: var(--muted); }

/* ---------- age gate ---------- */
.gate { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--bg); overflow: auto; -webkit-overflow-scrolling: touch; }
.gate__media { position: relative; overflow: hidden; }
.gate__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.gate__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--bg) 0%, rgba(5, 5, 5, .55) 18%, rgba(5, 5, 5, 0) 45%); }
.gate__panel { display: flex; align-items: center; justify-content: center; padding: 40px; }
.gate__box { width: min(420px, 100%); padding: 40px 36px 36px; border: 1px solid var(--gold-dim); text-align: center; background: rgba(5, 5, 5, .5); }
.gate__box h1 { margin: 26px 0 30px; font-family: var(--font-display); font-weight: 600; font-size: var(--t-sub); letter-spacing: var(--track-cap); text-transform: uppercase; color: var(--gold); line-height: 1.3; }
.gate__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gate__note { margin: 22px 0 0; font-size: 13px; color: var(--fg-2); }
.gate__note a { color: var(--gold); }
body.is-gated { overflow: hidden; }

/* ---------- shop / commerce ---------- */
.page { padding: clamp(40px, 6vh, 64px) var(--gutter) clamp(64px, 9vh, 110px); }
.page__head { margin-bottom: clamp(28px, 4vh, 44px); max-width: 1100px; }
.page__head > .rule:last-child { margin-bottom: 0; }
.page__head .order-no { margin: 0 0 12px; }
.crumb__status { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); }
.crumb__status svg { width: 16px; height: 16px; }
.page__head .display { margin-bottom: 10px; }
.page__head .lede { margin: 0; font-size: var(--t-body); }
.crumb { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }
.crumb a:hover { color: var(--gold-bright); }
.crumb span { color: var(--gold-text); }
.crumb a, .crumb span { padding: 6px 0; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1240px; }
.card { display: flex; flex-direction: column; border: 1px solid var(--gold-dim); padding: 18px; background: rgba(8, 7, 6, .7); transition: border-color var(--fast); }
.card:hover { border-color: var(--gold); }
.card__img { aspect-ratio: 1 / 1.02; overflow: hidden; background: #000; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.card:hover .card__img img { transform: scale(1.025); }
.card__name { margin: 22px 0 0; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); min-height: 2.6em; display: flex; flex-direction: column; justify-content: flex-end; }
.card__name small { display: block; font-size: 11px; color: var(--gold); letter-spacing: .2em; margin-top: 2px; }
.card__rule { height: 1px; background: var(--gold-dim); margin: 14px 24px 16px; }
.card__price { font-family: var(--font-display); font-size: var(--t-price-lg); font-weight: 500; line-height: 1; letter-spacing: .02em; text-align: center; color: var(--fg); font-variant-numeric: tabular-nums; }
.card__tag { margin: 10px 0 20px; text-align: center; font-size: 10px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }
.card .btn { margin: auto auto 6px; }

.eyebrow--sm { margin-bottom: 8px; }

/* product page */
.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); max-width: 1280px; align-items: start; }
.gallery__main { aspect-ratio: 1 / 0.94; overflow: hidden; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.gallery__thumbs button { border: 1px solid var(--gold-dim); padding: 5px; aspect-ratio: 1 / .9; overflow: hidden; transition: border-color var(--fast); }
.gallery__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs button:hover, .gallery__thumbs button.is-active { border-color: var(--gold); }
.pd__title { font-family: var(--font-display); font-size: clamp(30px, 3vw, 42px); font-weight: 700; line-height: 1.05; letter-spacing: var(--track-cap); text-transform: uppercase; margin: 0 0 8px; }
.pd__title small { display: block; font-size: .55em; font-weight: 500; letter-spacing: .12em; color: var(--gold); margin-top: 6px; }
.pd__coll { font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.pd__price { font-family: var(--font-display); font-size: var(--t-price-lg); font-weight: 500; line-height: 1; margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.pd__tag { margin: 0 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--gold-dim); font-size: 15px; color: var(--fg-2); }
.lbl { display: block; font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.qty { display: inline-grid; grid-template-columns: 40px 44px 40px; align-items: center; border: 1px solid var(--gold-dim); height: 44px; }
.qty button { height: 100%; font-size: 18px; color: var(--gold); transition: background var(--fast); }
.qty button:hover { background: var(--surface-2); }
.qty output { text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; }
.acc { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--gold-dim); }
.acc li { border-bottom: 1px solid var(--line-soft); }
.acc label { display: grid; grid-template-columns: 22px 44px 1fr auto; align-items: center; gap: 16px; padding: 10px 0; cursor: pointer; font-size: 12px; letter-spacing: var(--track-ui); text-transform: uppercase; }
.acc input { appearance: none; width: 20px; height: 20px; margin: 0; border: 1px solid var(--gold-dim); background: transparent; position: relative; cursor: pointer; transition: background var(--fast), border-color var(--fast); }
.acc input:checked { background: var(--gold-bright); border-color: var(--gold-bright); }
.acc input:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #141008; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.acc img { width: 44px; height: 36px; object-fit: cover; border: 1px solid var(--line-soft); }
.acc .p { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.totals { border-top: 1px solid var(--gold-dim); padding-top: 12px; margin-bottom: 18px; }
.totals div { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 12px; letter-spacing: var(--track-ui); text-transform: uppercase; }
.totals .grand { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-soft); color: var(--gold); }
.totals .grand output { font-family: var(--font-display); font-size: var(--t-price); font-weight: 500; color: var(--gold-bright); letter-spacing: 0; }
.totals output { font-variant-numeric: tabular-nums; }
.totals .fine { font-size: var(--t-micro); letter-spacing: var(--track-micro); color: var(--muted); padding: 2px 0 0; text-transform: uppercase; }
.pd__add { margin: 6px 0 12px; padding: 20px 24px; }
.pd__add.is-added { background: var(--gold-bright); border-color: var(--gold-bright); color: #141008; }
.acc-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border: 1px solid var(--gold-dim); font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }
.acc-toggle svg { width: 14px; height: 14px; transition: transform var(--fast); }
.acc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.specs { margin: 0; padding: 18px 18px 8px; border: 1px solid var(--gold-dim); border-top: 0; }
.specs div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.specs div:last-child { border-bottom: 0; }
.specs dt { margin: 0; font-size: 10px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); padding-top: 3px; }
.specs dd { margin: 0; color: var(--fg-2); }

/* cart */
.cart { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr); gap: clamp(28px, 4vw, 56px); max-width: 1280px; align-items: start; }
.line { display: grid; grid-template-columns: 200px minmax(0, 1fr); border: 1px solid var(--gold-dim); margin-bottom: 16px; background: rgba(8, 7, 6, .6); }
.line--acc { grid-template-columns: 120px minmax(0, 1fr); }
.line__img { background: #000; border-right: 1px solid var(--gold-dim); }
.line__img img { width: 100%; height: 100%; object-fit: cover; min-height: 120px; }
.line--acc .line__img img { min-height: 100px; }
.line__body { padding: 22px 26px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: start; }
.line__name { margin: 0; font-size: var(--t-body); font-weight: 600; letter-spacing: var(--track-ui); text-transform: uppercase; }
.line__coll { font-size: 10px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.line__price { font-family: var(--font-display); font-size: var(--t-price); font-weight: 500; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.line__ctl { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; margin-top: 6px; }
.line__ctl .link { color: var(--gold); display: inline-flex; align-items: center; min-height: 44px; }
.line__ctl .sep { width: 1px; height: 16px; background: var(--gold-dim); }
.line__qty { font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }
.line__qty b { color: var(--fg); margin-left: 8px; }
.summary { border: 1px solid var(--gold-dim); padding: 28px 28px 24px; position: sticky; top: 24px; background: rgba(8, 7, 6, .7); }
.summary h2 { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); padding-bottom: 12px; border-bottom: 1px solid var(--gold-dim); }
.summary .row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase; }
.summary .row output { font-variant-numeric: tabular-nums; font-size: 14px; }
.summary .row--sub { color: var(--gold); border-bottom: 1px solid var(--gold-dim); }
.summary .row--sub output { font-family: var(--font-display); font-size: var(--t-price); font-weight: 500; color: var(--gold-bright); }
.summary .note { padding: 16px 0 20px; font-size: 10px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--fg-2); line-height: 1.9; }
.summary .note span { display: block; color: var(--muted); }
.summary .btn + .btn { margin-top: 12px; }
.secure { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; font-size: 10px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }
.secure svg { width: 13px; height: 15px; }
.empty { border: 1px solid var(--gold-dim); padding: 64px 32px; text-align: center; }
.empty p { margin: 0 0 24px; font-family: var(--font-display); font-size: var(--t-sub); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-cap); }

/* mini summary (checkout / review / confirmation) */
.mini { list-style: none; margin: 0; padding: 0; }
.mini li { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; letter-spacing: var(--track-ui); text-transform: uppercase; }
.mini img { width: 72px; height: 60px; object-fit: cover; border: 1px solid var(--line-soft); }
.mini .q { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; letter-spacing: .18em; }
.mini .p { font-variant-numeric: tabular-nums; }

/* checkout */
.checkout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, .95fr); gap: clamp(28px, 4vw, 56px); max-width: 1280px; align-items: start; }
.co-section { margin-bottom: 40px; scroll-margin-top: 24px; }
.co-section h2 { margin: 0 0 14px; font-size: 13px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }
.co-section .sub { margin: -6px 0 16px; font-size: 13px; color: var(--muted); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field--3 { grid-column: span 1; }
.form--3 { grid-template-columns: 1.3fr 1fr .8fr; }
.field label { font-size: 10px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--fg-2); }
.field input, .field select { height: 46px; padding: 0 14px; background: #060605; border: 1px solid var(--gold-dim); color: var(--fg); font-size: var(--t-body); letter-spacing: .02em; transition: border-color var(--fast); width: 100%; }
.field input::placeholder { color: var(--muted); }
.field input:focus, .field select:focus { border-color: var(--gold); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--danger); }
.field .err { display: none; font-size: 11px; color: var(--danger); letter-spacing: .04em; }
.field.has-error .err { display: block; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b88a42' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.field select option { background: #0a0908; color: var(--fg); }
.opt { display: grid; grid-template-columns: 22px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--gold-dim); cursor: pointer; }
.opt + .opt { margin-top: 10px; }
.opt input[type="radio"] { appearance: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--gold); border-radius: 50%; position: relative; }
.opt input[type="radio"]:checked::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--gold-bright); }
.opt b { display: block; font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase; }
.opt small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); letter-spacing: 0; }
.opt .p { font-size: 11px; letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--gold); text-align: right; }
.pay { border: 1px solid var(--gold-dim); padding: 18px; }
.pay .form { margin-top: 14px; }
.check { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 12px; letter-spacing: .06em; cursor: pointer; }
.check input { appearance: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--gold); position: relative; flex: none; }
.check input:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--gold-bright); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check--tos { font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase; padding: 22px 0; border-top: 1px solid var(--gold-dim); margin-top: 8px; }
.form-error { display: none; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--danger); color: var(--danger); font-size: 13px; }
.form-error.is-visible { display: block; }

/* checkout steps rail (replaces navigation) */
.steps { list-style: none; margin: 40px 0 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-2); }
.steps .n { font-size: 11px; color: var(--gold-text); }
.steps .dot { width: 12px; height: 12px; border: 1px solid var(--gold); border-radius: 50%; position: relative; }
.steps li.is-active { color: var(--gold); }
.steps li.is-active .dot::after, .steps li.is-done .dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold-bright); }
.steps li.is-done { color: var(--fg-2); }
.rail-status { text-align: center; margin-top: 18px; }
.rail-status svg { width: 26px; height: 30px; margin: 0 auto 10px; display: block; }
.rail-status .k { font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }
.rail-status .k + .k { color: var(--fg); margin-top: 6px; }
.rail-status .rule { margin: 20px auto 0; width: 100%; }
.rail-status .big { width: 64px; height: 64px; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; }
.rail-status .big svg { margin: 0; width: 28px; height: 28px; }
.rail-back { margin-top: 30px; display: inline-flex; gap: 10px; align-items: center; }
.rail-help { margin-top: auto; text-align: center; padding-top: 24px; }
.rail-help svg { width: 24px; height: 24px; margin: 0 auto 10px; display: block; }
.rail-help .k { font-size: 10px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }
.rail-help a { display: block; margin-top: 6px; font-size: 10px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--fg-2); }
.rail-help a:hover { color: var(--gold); }

/* review */
.rv { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 24px; border: 1px solid var(--gold-dim); margin-bottom: 14px; }
.rv .ic { width: 52px; height: 52px; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; }
.rv .ic svg { width: 22px; height: 22px; }
.rv h3 { margin: 0; font-size: 13px; letter-spacing: var(--track-micro); text-transform: uppercase; }
.rv p { margin: 6px 0 0; font-size: 13px; color: var(--fg-2); }
.rv .link { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }

/* confirmation */
.status { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.status svg { width: 18px; height: 18px; }
.order-no { font-size: 12px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); margin: 24px 0 8px; }
.next-steps { margin: 30px 0 0; padding: 0; list-style: none; }
.next-steps li { display: grid; grid-template-columns: 52px 32px 1fr; gap: 14px; align-items: center; padding: 14px 0; }
.next-steps .ic { width: 50px; height: 50px; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; }
.next-steps .ic svg { width: 22px; height: 22px; }
.next-steps .n { font-size: 13px; letter-spacing: .1em; color: var(--gold); }
.next-steps b { display: block; font-size: 13px; letter-spacing: var(--track-label); text-transform: uppercase; }
.next-steps p { margin: 4px 0 0; font-size: 13px; color: var(--fg-2); }
.h-line { display: flex; align-items: center; gap: 16px; margin: 32px 0 8px; font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }
.h-line::after { content: ""; flex: 1; height: 1px; background: var(--gold-dim); }
.info2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.info2 > div { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 18px; border: 1px solid var(--gold-dim); }
.info2 .ic { width: 38px; height: 38px; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; }
.info2 .ic svg { width: 18px; height: 18px; }
.info2 b { display: block; font-size: 12px; letter-spacing: var(--track-micro); text-transform: uppercase; }
.info2 p { margin: 4px 0 0; font-size: 12px; color: var(--fg-2); }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--gold-dim); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  :root { --nav-w: 216px; }
  .nav__frame { padding: 40px 18px 22px; }
  .product, .cart, .checkout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .nav, .main { min-width: 0; }
  .line__ctl { flex-wrap: wrap; gap: 14px 18px; }
  .line, .line__body, .line > * { min-width: 0; }
  .nav { height: auto; padding: 0; position: sticky; top: 0; border-bottom: 1px solid var(--gold-dim); }
  .nav__frame { border: 0; padding: 0 20px; height: 60px; flex-direction: row; align-items: center; justify-content: space-between; }
  .brand { font-size: 20px; text-indent: 0; }
  .nav__label, .nav__foot { display: none; }
  .nav__toggle { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); min-width: 44px; min-height: 44px; padding: 8px; margin-right: -8px; }
  .nav__list { display: none; position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: var(--bg-2); padding: 12px 24px; overflow: auto; z-index: 25; }
  .nav.is-open .nav__list { display: block; }
  .nav__item.is-active a::before { left: -24px; }
  .cart-link { top: 8px; right: 96px; padding: 12px 10px; background: transparent; }
  .cart-link span.t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .steps { margin: 0; display: flex; gap: 0; overflow: auto; }
  .steps li { padding: 10px 14px 10px 0; border: 0; white-space: nowrap; }
  .rail-status, .rail-back, .rail-help { display: none; }

  .panel { min-height: 0; grid-template-rows: auto auto auto; }
  .panel__media { position: relative; height: 58vw; min-height: 260px; max-height: 460px; }
  .panel__media img { object-position: var(--pos-m, 60% 50%); }
  .panel__media::after, .panel--soft .panel__media::after, .panel--wide .panel__media::after { background: linear-gradient(180deg, rgba(5, 5, 5, .15) 0%, rgba(5, 5, 5, 0) 40%, rgba(5, 5, 5, .55) 80%, var(--bg) 100%); }
  .panel__body { max-width: none; padding: 8px var(--gutter) 44px; }
  .panel__grid { grid-template-columns: 1fr; padding: 36px var(--gutter) 44px; gap: 32px; }
  .panel__grid .col--fig { order: -1; }
  .display { font-size: clamp(30px, 8vw, 44px); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats div { padding: 20px 12px; border-top: 1px solid var(--line-soft); }
  .stats div:nth-child(-n+2) { border-top: 0; }
  .stats div:nth-child(odd) { border-left: 0; }
  .hint { display: none; }
  .callouts { min-height: 0; gap: 18px; }
  .quote { position: static; width: auto; margin: 0 var(--gutter) 28px; }
  .footer { grid-template-columns: 1fr; }
  .gate { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .gate__media { order: -1; min-height: 40vh; }
  .gate__media::before { background: linear-gradient(180deg, rgba(5, 5, 5, .2) 0%, rgba(5, 5, 5, 0) 40%, var(--bg) 100%); }
  .gate__panel { padding: 0 24px 40px; }
  .line { grid-template-columns: 120px 1fr; }
  .line__body { padding: 16px 18px; }
  .btn-row { grid-template-columns: 1fr; }
  .field input, .field select { font-size: 16px; }
}

@media (max-width: 600px) {
  .grid-3 { grid-template-columns: 1fr; }
  .form, .form--3 { grid-template-columns: 1fr; }
  .info2 { grid-template-columns: 1fr; }
  .trio { gap: 8px; }
  .gallery__thumbs { gap: 8px; }
  .line { grid-template-columns: 96px 1fr; }
  .line__body { grid-template-columns: 1fr; }
  .line__price { text-align: left; }
  .specs div { grid-template-columns: 1fr; gap: 4px; }
  .gate__actions { grid-template-columns: 1fr; }
  .chapters a { grid-template-columns: 44px 1fr auto; padding: 26px var(--gutter); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; }
}

@media print {
  .nav, .cart-link, .gate, .hint { display: none !important; }
  .shell { display: block; }
  html.is-gated .shell { visibility: visible; }
  .panel { min-height: 0; page-break-inside: avoid; }
}

/* ---------- additions ---------- */
@media screen { html.is-gated .shell { visibility: hidden; } } /* screen only: print keeps the page even before the gate is answered */
.lede--caps { font-size: var(--t-body); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg); line-height: 2; max-width: none; }
.inset { position: absolute; top: var(--panel-top); right: var(--gutter); z-index: 2; width: min(360px, 34%); }
.form--pay { grid-template-columns: 2.4fr 1fr 1fr; }
.summary .row .soft { font-size: 11px; letter-spacing: .06em; text-transform: none; color: var(--muted); }
.receipt { margin-top: 24px; border: 1px solid var(--gold-dim); padding: 22px 24px; }
.receipt h3 { margin: 0 0 12px; font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }
.receipt p { margin: 0 0 8px; font-size: 13px; color: var(--fg-2); }
.receipt .mini li { grid-template-columns: 56px 1fr auto; }
.receipt .mini img { width: 56px; height: 46px; }
@media (max-width: 900px) {
  .inset { position: static; width: auto; margin: 0 var(--gutter) 24px; }
  .form--pay { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .nav--rail .nav__frame { flex-wrap: wrap; height: auto; padding: 12px 20px 0; }
  .nav--rail .steps { display: flex; flex-wrap: wrap; width: 100%; order: 3; overflow: visible; margin: 4px 0 0; }
  .nav--rail .steps li { padding: 8px 18px 10px 0; white-space: nowrap; }
}
@media (max-width: 600px) {
  .opt { grid-template-columns: 22px 1fr; }
  .opt .p { grid-column: 2; text-align: left; margin-top: 4px; }
}
.main { display: flex; flex-direction: column; }
.main > .footer { margin-top: auto; }

/* ---------- a11y additions ---------- */
body[data-page="checkout"] .cart-link, body[data-page="review"] .cart-link, body[data-page="confirmation"] .cart-link { display: none; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 12px 18px; background: var(--gold-bright); color: #141008; font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase; }
.skip:focus { top: 16px; }
.nav__toggle[aria-expanded="true"] .t-open, .nav__toggle[aria-expanded="false"] .t-close { display: none; }
@media (max-width: 600px) { .line__img img { object-fit: contain; background: #000; } .line__ctl .sep { display: none; } }
.nav__frame > nav { display: contents; }

/* ---------- i18n: Korean typography + KRW reference ---------- */
html[lang="ko"] { --track-micro: .12em; --track-label: .1em; --track-ui: .08em; --track-cap: .02em; }
html[lang="ko"] .display { font-size: clamp(30px, 2.9vw, 42px); line-height: 1.183; letter-spacing: -0.01em; text-transform: none; word-break: keep-all; }
html[lang="ko"] .display--xl { font-size: clamp(36px, 3.9vw, 56px); line-height: 1.13; }
html[lang="ko"] .display .l2 { font-weight: 500; }
html[lang="ko"] .display--md, html[lang="ko"] .pd__title { font-size: clamp(26px, 2.7vw, 38px); }
html[lang="ko"] .display--sm { font-size: clamp(24px, 2.4vw, 32px); }
html[lang="ko"] .quote p { text-transform: none; letter-spacing: 0; font-size: 16px; word-break: keep-all; }
html[lang="ko"] .next__t, html[lang="ko"] .chapters .t, html[lang="ko"] .empty p, html[lang="ko"] .gate__box h1, html[lang="ko"] .private__title, html[lang="ko"] .artist__quote { text-transform: none; letter-spacing: 0; word-break: keep-all; }
html[lang="ko"] .private__msg, html[lang="ko"] .private__note, html[lang="ko"] .private__input::placeholder, html[lang="ko"] .artist__step .k { font-size: 13px; letter-spacing: 0; }
html[lang="ko"] .private__msg span { font-size: var(--t-body); }

html[lang="ko"] .lede--caps { font-size: 15px; line-height: 1.9; }
html[lang="ko"] .card__name { font-size: 12px; }
html[lang="ko"] .pd__title { text-transform: none; letter-spacing: 0; }
html[lang="ko"] .pd__title small { letter-spacing: .06em; }
.krw { display: inline-block; margin-left: 8px; font-family: var(--font-body); font-size: .42em; font-weight: 500; letter-spacing: .02em; color: var(--muted); vertical-align: middle; white-space: nowrap; }
.line__price .krw, .mini .p .krw { display: block; margin: 4px 0 0; font-size: 11px; }
.summary .row output .krw { font-size: 11px; }
.pd__price .krw { font-size: 13px; }
.card__price .krw { display: block; margin: 8px 0 0; font-size: 12px; }
.krw-note { margin: 22px 0 0; font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.nav__lang { margin-top: 18px; }
.nav__lang a { color: var(--gold); }
.nav__lang .nav__num { font-family: var(--font-body); font-size: 10px; letter-spacing: .12em; color: var(--gold-text); }
.totals output .krw { font-size: 10px; }
html[lang="ko"] .pd__title small { text-transform: none; }


/* ---------- former inline styles ---------- */
.lbl--gap { margin-top: 24px; }
.opt--bare { border: 0; padding: 0; min-height: 44px; }
.secure--lg { margin-top: 28px; }
.rail-help .k--sub { display: block; margin-top: 6px; color: var(--fg-2); }
/* review cards stack on narrow screens; next bar only stacks on phones; product gallery capped when single-column */
@media (max-width: 600px) { .rv { grid-template-columns: 52px minmax(0, 1fr); } .rv .link { grid-column: 2; min-height: 32px; } }
@media (max-width: 1100px) { .gallery__main { aspect-ratio: auto; max-height: 520px; } }
/* mobile: same header offset after the image for photo and figure panels; cover keeps its larger size in both locales */
@media (max-width: 900px) {
  .panel__grid { padding: 8px var(--gutter) 44px; gap: 0; }
  .panel__grid .col--fig { margin: 0 calc(-1 * var(--gutter)) 0; }
  .panel__grid .col--fig .frame { border: 0; padding: 0; }
  .panel__grid .col--fig .caption { margin: 10px var(--gutter) 0; }
  .frame--plain img { max-height: 46vh; }
  .callouts { grid-template-columns: 1fr; }
  .inset { margin: 0 var(--gutter) 28px; }
  .display--xl { font-size: clamp(34px, 9.4vw, 50px); }
  html[lang="ko"] .display { font-size: clamp(28px, 7.4vw, 40px); }
  html[lang="ko"] .display--xl { font-size: clamp(32px, 8.6vw, 46px); }
  .nav--rail .nav__frame { padding: 0 20px 6px; }
  .nav--rail .brand { display: flex; align-items: center; height: 60px; }
  .next { flex-direction: row; align-items: center; }
}
@media (max-width: 600px) { .next { flex-direction: column; align-items: flex-start; } }

/* mobile rhythm: figure = same 260px box as a photo panel's media; commerce rail = same 60px header as every page */
@media (max-width: 900px) {
  .panel__grid .col--fig { height: 260px; overflow: hidden; }
  .panel__grid .col--fig .frame, .panel__grid .col--fig .trio { height: 100%; }
  .panel__grid .col--fig .frame img { width: 100%; height: 100%; object-fit: cover; }
  .panel__grid .col--fig .frame--plain img, .panel__grid .col--fig .frame--contain img { object-fit: contain; max-height: none; }
  .panel__grid .col--fig .trio .frame { aspect-ratio: auto; }
  .panel__grid .col--fig .caption { display: none; }
  .panel__body > .lede, .panel__grid .lede { min-height: 4.95em; }
  .nav--rail .steps { display: none; }
  .nav--rail .nav__frame { padding: 0 20px; height: 60px; }
}

/* legal notice (전자상거래법 표시사항) — rendered only when _build/business.json is filled */
.footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 18px 0 4px; border-top: 1px solid var(--line-soft); font-size: var(--t-label); letter-spacing: .02em; color: var(--muted); }
.footer__legal b { font-weight: 500; color: var(--fg-2); margin-right: 6px; }

/* ---------- FAQ (shop) ---------- */
.faq { max-width: 760px; margin-top: clamp(56px, 8vh, 96px); }
.faq .display { margin-bottom: 8px; }
.faq__item { border-bottom: 1px solid var(--line-soft); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font-size: var(--t-body); font-weight: 600; color: var(--fg); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; width: 24px; text-align: center; color: var(--gold); font-weight: 400; font-size: 18px; transition: transform var(--fast) var(--ease); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { margin: 0 0 20px; font-size: var(--t-body); line-height: 1.7; color: var(--fg-2); max-width: 64ch; }

/* ---------- motion 1 · scroll-driven (CSS only, progressive) ----------
   Scroll-driven Animations API: each block's own view() timeline drives it, so the reveal is tied to scroll
   position, not time. Browsers without it, reduced-motion users and print get the static layout.
   Rules: no opacity:0 waits, no infinite loops, one flourish per panel (the photo), the rest is a quiet stagger. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* reveals — every width */
    .panel__media { animation: luce-unmask linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .panel__media img { animation: luce-parallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; will-change: transform; }
    .panel .eyebrow { animation: luce-rise linear both; animation-timeline: view(); animation-range: entry 10% entry 38%; }
    .panel .rule { animation: luce-draw linear both; animation-timeline: view(); animation-range: entry 14% entry 48%; }
    .panel .display { animation: luce-rise linear both; animation-timeline: view(); animation-range: entry 16% entry 46%; }
    .panel .lede, .panel .btn, .panel .callouts { animation: luce-rise linear both; animation-timeline: view(); animation-range: entry 22% entry 52%; }
    .panel .col--fig, .panel .saki__main, .panel .saki__works, .panel .artist__steps { animation: luce-rise linear both; animation-timeline: view(); animation-range: entry 12% entry 44%; }
    .panel .stats > div { animation: luce-rise linear both; animation-timeline: view(); }
    .panel .stats > div:nth-child(1) { animation-range: entry 0% entry 45%; }
    .panel .stats > div:nth-child(2) { animation-range: entry 6% entry 51%; }
    .panel .stats > div:nth-child(3) { animation-range: entry 12% entry 57%; }
    .panel .stats > div:nth-child(4) { animation-range: entry 18% entry 63%; }
    .quote, .inset { animation: luce-rise linear both; animation-timeline: view(); animation-range: entry 10% entry 40%; }
    .nav__frame { position: relative; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
    /* home cover stays pinned while the chapter index slides over it and the cover recedes */
    .panel--cover { position: sticky; top: 0; z-index: 0; animation: luce-recede linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
    .panel--cover ~ .chapters, .panel--cover ~ .private, .panel--cover ~ .footer { position: relative; z-index: 1; }
    .panel--cover ~ .chapters, .panel--cover ~ .footer { background: var(--bg-2); }
    /* reading progress: gold line along the sidebar frame */
    .nav__progress { position: absolute; left: -1px; top: -1px; width: 2px; height: calc(100% + 2px); background: var(--gold-bright); transform-origin: top; transform: scaleY(0); animation: luce-progress-y linear both; animation-timeline: scroll(root); }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
    .panel__media { overflow: clip; }
    /* reading progress: gold line under the mobile header */
    .nav__progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--gold-bright); transform-origin: left; transform: scaleX(0); animation: luce-progress-x linear both; animation-timeline: scroll(root); }
  }
}
/* ---------- motion 1b · slide-deck scrolling on chapter pages ----------
   Desktop: one wheel gesture / arrow key = one panel (luce.js deckScroll, smooth scrollTo) with a proximity snap
   underneath for scrollbar drags. Mobile: proximity snap only — some panels are taller than a phone viewport
   and must stay freely scrollable. Reduced motion: plain scrolling. */
@media (prefers-reduced-motion: no-preference) {
  html:has(body[data-page="object"]), html:has(body[data-page="experience"]), html:has(body[data-page="craft"]), html:has(body[data-page="story"]) { scroll-snap-type: y proximity; }
  .panel { scroll-snap-align: start; }
  .next, .footer { scroll-snap-align: end; }
}
@keyframes luce-parallax { from { transform: translate3d(0, -5%, 0) scale(1.12); } to { transform: translate3d(0, 5%, 0) scale(1.12); } }
@keyframes luce-unmask { from { clip-path: inset(7% 5% 7% 5%); } to { clip-path: inset(0 0 0 0); } }
@keyframes luce-rise { from { opacity: .45; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes luce-draw { from { clip-path: inset(-5px 100% -5px 0); } to { clip-path: inset(-5px 0 -5px 0); } }
@keyframes luce-recede { to { transform: scale(.96); opacity: .35; } }
@keyframes luce-progress-y { to { transform: scaleY(1); } }
@keyframes luce-progress-x { to { transform: scaleX(1); } }

/* ---------- motion 2 · shared-element morph: shop card image → product page image (View Transitions) ---------- */
.card#moon-jar-pure .card__img img, body[data-product="moon-jar-pure"] #pd-main { view-transition-name: product-moon-jar-pure; }
.card#octagon-pure .card__img img, body[data-product="octagon-pure"] #pd-main { view-transition-name: product-octagon-pure; }
.card#octagon-saki .card__img img, body[data-product="octagon-saki"] #pd-main { view-transition-name: product-octagon-saki; }

/* ---------- motion 3 · state transitions with @starting-style (entry/exit of display:none elements) ---------- */
:root { --ease-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55.2%, 1.017 63.9%, 1.001); }
@media (prefers-reduced-motion: no-preference) {
  .gate { transition: opacity 360ms var(--ease); }
  .gate__box { transition: transform 480ms var(--ease-spring), opacity 360ms var(--ease); }
  @starting-style { .gate { opacity: 0; } .gate__box { opacity: 0; transform: translateY(18px); } }
  .gate.is-leaving { opacity: 0; }
  .gate.is-leaving .gate__box { opacity: 0; transform: translateY(-10px); }
  .btn svg { transition: transform 420ms var(--ease-spring); }
  .btn:hover svg { transform: translateX(4px); }
  .card:hover .card__img img { transition-timing-function: var(--ease-spring); }
  /* FAQ answers open with a height transition (interpolate-size + ::details-content) */
  .faq { interpolate-size: allow-keywords; }
  .faq__item::details-content { height: 0; overflow: clip; transition: height 320ms var(--ease), content-visibility 320ms allow-discrete; }
  .faq__item[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .nav__list { transition: opacity 240ms var(--ease), transform 240ms var(--ease), display 240ms allow-discrete; }
  .nav:not(.is-open) .nav__list { opacity: 0; transform: translateY(-8px); }
  .nav.is-open .nav__list { opacity: 1; transform: none; }
  @starting-style { .nav.is-open .nav__list { opacity: 0; transform: translateY(-8px); } }
}

/* ---------- cross-page transition (View Transitions API): the frame stays, the page fades ---------- */
@view-transition { navigation: auto; }
.nav { view-transition-name: luce-nav; }
.cart-link { view-transition-name: luce-cart; }
::view-transition-old(root) { animation: 160ms ease-out both luce-fade-out; }
::view-transition-new(root) { animation: 220ms ease-out both luce-fade-in; }
::view-transition-old(luce-nav), ::view-transition-new(luce-nav), ::view-transition-old(luce-cart), ::view-transition-new(luce-cart) { animation: none; }
@keyframes luce-fade-out { to { opacity: .0; } }
@keyframes luce-fade-in { from { opacity: .0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
/* Touch pointers get 44px targets and non-zooming fields at every viewport width.
   Negative margins keep the original spacing while the hit area grows. */
@media (hover: none) and (pointer: coarse) {
  .field input, .field select { font-size: 16px; }
  .cart-link { min-height: 44px; }
  a.brand { padding: 12px 0; }
  .crumb { gap: 0; margin-left: -6px; }
  .crumb a, .crumb span { padding: 14px 6px; }
  .footer nav { gap: 0 2px; margin-left: -12px; }
  .footer nav a { padding: 13px 12px; }
  .line__ctl .link { min-width: 44px; justify-content: center; }
  .qty { grid-template-columns: 44px 44px 44px; height: 46px; }
}

@media print { *, *::before, *::after { animation: none !important; } }

/* ---------- home cover · film slot (HERO_VIDEO in _build/build.py; the photo stays as poster and fallback) ---------- */
.panel__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 72% 50%); }
@media (prefers-reduced-motion: reduce) { .panel__media video { display: none; } }
.private-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; }
.private-link svg { width: 14px; height: 9px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Private Access (home, replaces the chapter index; also the dialog behind the hero link) ---------- */
.private { position: relative; z-index: 1; min-height: 72svh; display: grid; align-content: center; padding: clamp(72px, 12vh, 140px) var(--gutter); border-top: 1px solid var(--line); background: var(--bg); }
.private__stage { max-width: 760px; }
.private__title { letter-spacing: .12em; margin-bottom: 18px; }
.private .lede { margin-bottom: 36px; }
.private__form { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
.private__input { height: 54px; padding: 0 20px; background: #060605; border: 1px solid var(--gold-dim); color: var(--fg); font: inherit; font-size: var(--t-body); letter-spacing: .04em; min-width: 0; transition: border-color var(--fast); }
.private__input::placeholder { color: var(--muted); font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; }
.private__input:focus { border-color: var(--gold); outline: none; }
.private__input[aria-invalid="true"] { border-color: var(--danger); }
.private__btn { height: 54px; padding: 0 30px; }
.private__btn[aria-busy="true"] { opacity: .6; }
.private__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.private__msg { margin: 14px 0 0; font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--danger); line-height: 1.5; }
.private__msg span { display: block; margin-top: 4px; font-size: var(--t-body); letter-spacing: 0; text-transform: none; color: var(--danger); }
.private__msg.is-warm { color: var(--gold); }
.private__msg.is-warm span { color: var(--fg-2); }
.private__note { margin: 24px 0 0; font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); }
.private__consent { margin: 12px 0 0; font-size: var(--t-ui); color: var(--muted); }
.private__check { display: flex; align-items: center; gap: 18px; margin: 0 0 34px; font-size: clamp(16px, 1.15vw, 18px); color: var(--fg-2); }
.private__check svg { width: 50px; height: 50px; flex: none; color: var(--gold); stroke-width: 1; }
.private-dialog { width: min(760px, calc(100% - 32px)); max-height: calc(100svh - 32px); padding: clamp(40px, 6vw, 72px); border: 1px solid var(--gold-dim); background: var(--bg-2); color: var(--fg); overflow: auto; }
.private-dialog::backdrop { background: rgba(5, 5, 5, .8); }
.private-dialog__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--gold); font: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
.private-dialog__close:hover { color: var(--gold-bright); }
.private-dialog .private__stage { max-width: none; }
@media (prefers-reduced-motion: no-preference) {
  .private-dialog { transition: opacity 240ms var(--ease), transform 420ms var(--ease-spring), display 240ms allow-discrete, overlay 240ms allow-discrete; }
  .private-dialog:not([open]) { opacity: 0; transform: translateY(14px); }
  .private-dialog[open] { opacity: 1; transform: none; }
  @starting-style { .private-dialog[open] { opacity: 0; transform: translateY(14px); } }
}

/* ---------- Craft · SAKI — copy / SAKI at work (cut out on black) / three finished pieces ---------- */
.saki { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.05fr) minmax(0, .58fr); gap: 0 clamp(18px, 2.2vw, 36px); align-items: stretch; min-height: 0; }
.saki__text { padding: var(--panel-top) 0 clamp(48px, 7vh, 80px) var(--gutter); min-width: 0; }
.saki__text .lede { min-height: 3.3em; }
.saki__main { position: relative; margin: 0; min-height: 0; background: var(--bg); }
.saki__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.saki__works { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 80px var(--gutter) 12px 0; min-height: 0; } /* 80px clears the fixed cart link */
.saki__work { display: flex; min-height: 0; }
.saki__work img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* ---------- Craft · The Artist's Hand — header, three framed steps, quote + CTAs in the bottom band ---------- */
.artist { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(20px, 3vh, 36px); padding: var(--panel-top) var(--gutter) clamp(28px, 4vh, 44px); min-height: 0; }
.artist__head { max-width: 640px; }
.artist__head .lede { margin-bottom: 0; }
.artist__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); align-items: start; min-height: 0; } /* start, not stretch: a stretched height would drive the width through aspect-ratio and overflow the gutter */
.artist__step { position: relative; margin: 0; display: flex; width: 100%; box-sizing: border-box; aspect-ratio: 4 / 3; max-height: 38vh; min-height: 0; overflow: hidden; }
.artist__step img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.artist__step figcaption { position: absolute; left: 6px; right: 6px; top: 6px; padding: 18px 20px 30px; background: linear-gradient(180deg, rgba(5, 5, 5, .88) 0%, rgba(5, 5, 5, .55) 60%, rgba(5, 5, 5, 0) 100%); }
.artist__step .k { display: block; font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold); }
.artist__step .k::after { content: ""; display: block; width: 120px; height: 1px; margin-top: 8px; background: var(--gold-dim); }
.artist__step .t { display: block; margin-top: 10px; font-size: var(--t-body); color: var(--fg); }
.artist__bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; padding: 24px var(--gutter); border-top: 1px solid var(--line); background: rgba(5, 5, 5, .86); }
.artist__quote { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--t-sub); letter-spacing: var(--track-cap); text-transform: uppercase; color: var(--fg); }
.artist__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.btn .ico { display: inline-flex; }
.btn .ico svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .private { min-height: 0; padding: 64px var(--gutter) 72px; }
  .private__form { grid-template-columns: 1fr; }
  .private__input { font-size: 16px; }
  .saki { grid-template-columns: 1fr; gap: 0; }
  .saki__main { order: -2; height: 72vw; min-height: 260px; max-height: 520px; }
  .saki__main img { object-position: 50% 10%; }
  .saki__works { order: -1; grid-template-rows: none; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px var(--gutter) 12px; }
  .saki__work { aspect-ratio: 4 / 5; }
  .saki__text { padding: 8px var(--gutter) 44px; }
  .saki__text .lede { min-height: 4.95em; }
  .artist { padding: 8px var(--gutter) 36px; gap: 24px; }
  .artist__steps { grid-template-columns: 1fr; gap: 12px; }
  .artist__step { aspect-ratio: 16 / 10; max-height: none; }
  .artist__bar { flex-direction: column; align-items: flex-start; }
  .artist__ctas { width: 100%; }
  .artist__ctas .btn { flex: 1 1 100%; }
}
@media (hover: none) and (pointer: coarse) { .private-link { padding: 12px 0; margin-top: 12px; } }
@media print { .private-dialog { display: none; } }
@media (max-width: 600px) { .btn { text-align: center; line-height: 1.3; } }
@media (max-width: 400px) { .btn { padding: 18px 20px; gap: 12px; } .private-dialog { padding: 40px 28px 32px; } .private-dialog__close { top: 4px; right: 4px; } } /* 320–400px phones: keep long labels to two lines */
/* mobile follow-ups (2026-09-09 phone sweep) */
@media (max-width: 900px) { html { scroll-padding-top: 61px; } }                     /* anchors land under the 60px sticky header otherwise */
@media (max-width: 360px) { .panel--cover .panel__media img { object-position: 74% 50%; } }   /* 320px phones: keep the model's face in frame */
@media (max-width: 900px) and (max-height: 560px) { .gate__media { display: none; } .gate__panel { padding: 24px; } .gate__box { padding: 28px 24px 24px; } }   /* phone landscape */

/* V4: Craft reference, three shop categories and live commerce. */
.panel--craft-v4 .display{font-family:Georgia,'Times New Roman',serif;text-transform:none;font-weight:400;letter-spacing:-.025em;line-height:1.06;font-size:clamp(36px,4.1vw,68px)}
.panel--craft-v4 .btn{border:0;border-bottom:1px solid currentColor;padding:10px 0;border-radius:0;background:none;min-height:44px}
.panel--craft-v4 .panel__body{max-width:800px}.panel--craft-v4 .lede{max-width:570px}
.nav__categories{display:grid;padding:4px 0 12px 43px;gap:4px}.nav__categories a{color:#ada89b;font-size:12px;letter-spacing:.02em;text-decoration:none;padding:4px 0}.nav__categories a:hover,.nav__categories a:focus-visible{color:#dac392}
.shop-categories{display:flex;gap:30px;align-items:center;margin:0 0 40px;padding-bottom:15px;border-bottom:1px solid #383326}.shop-categories a{font-size:14px;letter-spacing:.08em;color:#a6a091;text-decoration:none;padding:7px 0}.shop-categories a[aria-current=page]{color:#e3cf9f;text-decoration:underline;text-underline-offset:10px}.shop-categories a:focus-visible{outline:2px solid #c8a869;outline-offset:5px}
body[data-page=product]:not(.catalog-loaded):not(.catalog-error) .product{visibility:hidden}body:not(.catalog-loaded):not(.catalog-error) #catalog-grid{visibility:hidden}.catalog-empty{grid-column:1/-1;padding:50px 0 80px;max-width:680px}.catalog-empty h2{font:400 30px/1.4 Georgia,serif;margin:0 0 15px}.catalog-empty p{color:#b2ab9c;line-height:1.7;margin-bottom:28px}.card__price small{font:11px/1.5 Arial,sans-serif;color:#afa594;letter-spacing:1px}
.commerce-error{color:#f0b6a7;line-height:1.7;margin:22px 0;white-space:pre-line}.commerce-error:empty{display:none}.commerce-note{color:#b9b1a0;font-size:14px;line-height:1.8;margin:25px 0}.check--tos a{color:#d5bd89;text-underline-offset:3px}#live-checkout{max-width:920px}#live-checkout .btn-row{margin-top:30px}#commerce .page__head{margin-bottom:35px}#commerce .rv{grid-template-columns:1fr}.btn:disabled{opacity:.5;cursor:not-allowed}.catalog-error .product{visibility:visible}
@media(max-width:900px){.nav__categories{padding-left:42px;gap:0}.nav__categories a{font-size:12px}.panel--craft-v4 .display{font-size:clamp(36px,7vw,58px)}}
@media(max-width:600px){.shop-categories{gap:24px;margin-bottom:26px}.shop-categories a{font-size:12px}.panel--craft-v4 .display{font-size:36px}.panel--craft-v4 .lede{font-size:15px}.catalog-empty{padding:25px 0 55px}.catalog-empty h2{font-size:25px}#commerce .display{font-size:32px;line-height:1.25}#commerce .btn-row{display:grid;gap:12px}#commerce .btn-row .btn{width:100%}#live-checkout .form{grid-template-columns:1fr}}

/* V4 / Craft: full-width photograph, quiet header and the supplied two-line title. */
body[data-page="craft"] .shell{display:block}
.nav--craft{position:absolute;inset:0 0 auto;height:88px;padding:0;background:transparent}
.nav--craft .nav__frame{height:88px;border:0;padding:0 4%;display:flex;flex-direction:row;align-items:center;justify-content:space-between}
.nav--craft .brand{font:22px/1 Georgia,'Times New Roman',serif;letter-spacing:7px;text-indent:0;color:#e6ddc8}
.nav--craft .nav__label,.nav--craft .nav__foot,.nav--craft .nav__progress{display:none}
.nav--craft .nav__toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px;font-size:10px;letter-spacing:2px;color:#d0b072;margin:0 115px 0 0}
.nav--craft .nav__list{display:none;position:fixed;inset:88px 0 0 auto;width:min(420px,100%);padding:12px 30px 40px;overflow-y:auto;background:#0b0a08;z-index:25}
.nav--craft.is-open{position:fixed;background:#0b0a08}
.nav--craft.is-open .nav__list{display:block}
body:has(.nav.is-open){overflow:hidden}
body[data-page="craft"] .cart-link{top:22px;right:calc(4% - 10px);background:transparent}
.panel--craft-v4{min-height:100svh;grid-template-rows:minmax(0,1fr)}
.panel--craft-v4 .panel__media{position:absolute;inset:0 auto 0 14%;width:100%;height:100%;min-height:0;max-height:none}
.panel--craft-v4 .panel__media img{animation:none;transform:none;object-position:50% 50%}
.panel--craft-v4 .panel__media::after{background:linear-gradient(90deg,#050505,rgba(5,4,2,.75) 10%,rgba(5,4,2,.38) 31%,transparent 62%),linear-gradient(180deg,rgba(5,4,2,.18),transparent 30%,rgba(5,4,2,.06))}
.panel--craft-v4 .panel__body{max-width:none;justify-content:center;min-height:100svh;padding:88px 4% 18vh}
.panel--craft-v4 .eyebrow{margin:0 0 18px;letter-spacing:4px;color:#c9a15a}
.panel--craft-v4 .rule{display:none}
.panel--craft-v4 .display,.panel--craft-v4 .display .l2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.03em;line-height:1.12}
.panel--craft-v4 .display{font-size:clamp(42px,4.1vw,72px);max-width:1050px;margin:0 0 27px}
.panel--craft-v4 .display .l2{display:block;color:#c99b4e}
.panel--craft-v4 .btn{font-size:11px;letter-spacing:3px;gap:16px;color:#c9a15a;padding:12px 0;animation:none}
.nav__item.is-active a::before{display:none}
.nav__categories a[aria-current="page"]{color:#e3c78f;font-weight:600}
body[data-page^="shop"] .page__head .display{text-transform:none;letter-spacing:-.025em}
.catalog-count{font-size:.55em;color:var(--muted);letter-spacing:0;font-weight:400;vertical-align:middle}
.shop-categories{flex-wrap:wrap}
.shop-categories a{white-space:nowrap}
.catalog-empty h2{word-break:keep-all;overflow-wrap:normal}
#path a.frame{cursor:zoom-in}
@media(max-width:900px){
  .nav--craft,.nav--craft .nav__frame{height:68px;border:0}
  .nav--craft .nav__frame{padding:0 24px}
  .nav--craft .brand{font-size:20px}
  .nav--craft .nav__toggle{margin:0 -8px 0 0}
  .nav--craft .nav__list{top:68px;width:100%}
  body[data-page="craft"] .cart-link{top:12px;right:88px}
  .panel--craft-v4{min-height:max(640px,100svh)}
  .panel--craft-v4 .panel__body{min-height:max(640px,100svh);justify-content:flex-end;padding:120px 5% 80px}
  .panel--craft-v4 .panel__media{left:0}
  .panel--craft-v4 .panel__media::after{background:linear-gradient(180deg,rgba(5,4,2,.2),transparent 28%,rgba(5,4,2,.38) 47%,rgba(5,4,2,.87) 76%,#080604)}
  .panel--craft-v4 .display{font-size:clamp(36px,5.7vw,54px)}
}
@media(max-width:600px){
  .panel--craft-v4 .panel__media img{object-position:50% 50%}
  .panel--craft-v4 .panel__media::after{background:linear-gradient(180deg,rgba(5,4,2,.2),transparent 28%,rgba(5,4,2,.38) 47%,rgba(5,4,2,.87) 76%,#080604),linear-gradient(90deg,rgba(5,4,2,.22),transparent 60%)}
  .panel--craft-v4 .panel__body{justify-content:flex-end;padding:100px 24px 66px}
  .panel--craft-v4 .display{font-size:clamp(30px,8.1vw,43px);line-height:1.16;letter-spacing:-.035em;margin-bottom:25px}
  .panel--craft-v4 .eyebrow{font-size:10px;letter-spacing:3px}
  .panel--craft-v4 .btn{font-size:10px;letter-spacing:2px}
  .shop-categories{gap:15px 22px}
  .nav__categories a{padding:8px 0;min-height:36px}
}