/* Generated by scripts/direction-styles.mjs from components/marketplace/demo/shade-card.css, components/marketplace/demo/shade-card-v3.css — do not edit. */
/* ── shade-card.css ── */
/* ── Shade Card — ashdub. Makeup (clean-room product, October 2026) ─────────────────────────────────────────────────
   A makeup artist's face chart made into a site: porcelain paper, aubergine ink and one rouge accent; a five-shade swatch
   rule under the header and over the footer; a light optical serif (Newsreader) for display set against a quiet grotesk
   (Manrope); square-cut, tracked buttons; contact-sheet photographs on white mats with small-caps captions; prices on a
   hairline ledger. Shares no rule, colour, face or asset with any client direction. Sizes follow the demo frame (cqi,
   @container, --mk-vh) like every direction. The owner's brand colour (--brand) drives the accent, so palette edits
   still apply; the swatch rule is derived from it. Motion is decorative only and stops for reduced motion. */

[data-direction="shade-card"] {
  --lx-head: var(--font-newsreader), "Newsreader", Georgia, serif; --lx-body: var(--font-manrope), "Manrope", system-ui, sans-serif;
  --lx-head-w: 400; --lx-head-track: -0.028em; --lx-head-lh: 0.96; --lx-head-case: none;
  --lx-paper: #f4f0ea; --lx-ink: #231a21; --lx-muted: #5d5259; --lx-line: rgba(35,26,33,0.16);
  --lx-dark: #1e161c; --lx-dark-ink: #f6f1ec; --lx-dark-muted: #c9bcc3; --lx-dark-line: rgba(246,241,236,0.18);
  --lx-btn-r: 2px; --lx-btn-case: uppercase; --lx-btn-track: 0.16em; --lx-btn-size: 0.75rem; --lx-media-r: 0px;
  --lx-eyebrow-case: uppercase; --lx-eyebrow-track: 0.22em; --lx-sec: clamp(4.75rem, 10.5cqi, 9rem);
  /* the five shades: drawn from the brand colour so an owner's palette change carries into the signature */
  --sc-1: color-mix(in srgb, var(--lx-accent) 14%, #f3dccf); --sc-2: color-mix(in srgb, var(--lx-accent) 34%, #d9a58f);
  --sc-3: color-mix(in srgb, var(--lx-accent) 62%, #b86a6a); --sc-4: var(--lx-accent); --sc-5: color-mix(in srgb, var(--lx-accent) 38%, #2a1c25);
  --sc-strip: linear-gradient(90deg, var(--sc-1) 0 20%, var(--sc-2) 20% 40%, var(--sc-3) 40% 60%, var(--sc-4) 60% 80%, var(--sc-5) 80% 100%);
  --sc-mat: #fffdfa; --sc-soft: #ebe4dc;
}
/* Noir: the same direction after dark (owner's choice of mode). */
[data-direction="shade-card"][data-theme="dark"] {
  --lx-paper: #19131a; --lx-ink: #f3ece8; --lx-muted: #c3b6bd; --lx-line: rgba(243,236,232,0.16);
  --lx-dark: #0f0b10; --sc-mat: #241b23; --sc-soft: #221a21;
}

/* ── type ── */
[data-direction="shade-card"] .lx-display { font-size: calc(clamp(3rem, 9.6cqi, 8.6rem) * var(--lx-title-scale, 1)); line-height: .94; max-width: 13ch; font-optical-sizing: auto; }
[data-direction="shade-card"] .lx-h2 { font-size: calc(clamp(2.3rem, 5.2cqi, 4.6rem) * var(--lx-title-scale, 1)); line-height: 1; max-width: 16ch; }
[data-direction="shade-card"] .lx-h3 { font-weight: 450; }
[data-direction="shade-card"] .lx-eyebrow { display: flex; align-items: center; gap: .7rem; font-size: .72rem; font-weight: 700; color: var(--lx-muted); }
[data-direction="shade-card"] .lx-eyebrow::before { content: ""; flex: none; width: .62rem; height: .62rem; border-radius: 50%; background: var(--lx-accent); box-shadow: .85rem 0 0 -.06rem var(--sc-3), 1.62rem 0 0 -.12rem var(--sc-2); margin-right: 1.5rem; }
[data-direction="shade-card"] .lx-tone-dark .lx-eyebrow { color: var(--lx-dark-muted); }
[data-direction="shade-card"] .lx-lede { color: var(--lx-muted); }
@container (max-width: 479px) { [data-direction="shade-card"] .lx-hero--editorial .lx-display { font-size: calc(clamp(2.45rem, 11cqi, 3.1rem) * var(--lx-title-scale, 1)); } }

/* ── buttons: square-cut, tracked; primary is rouge, secondary an ink outline ── */
[data-direction="shade-card"] .lx-btn { font-weight: 800; }
.mk-demo-site[data-direction="shade-card"] .lx-btn--primary { background: var(--lx-accent); color: var(--lx-accent-ink); box-shadow: none; }
.mk-demo-site[data-direction="shade-card"] .lx-btn--primary:hover { background: color-mix(in srgb, var(--lx-accent) 86%, #000); box-shadow: 0 14px 28px -18px var(--lx-accent); }
[data-direction="shade-card"] .lx-btn--secondary { box-shadow: inset 0 0 0 1px currentColor; }
[data-direction="shade-card"] .lx-btn--link { font-size: .9rem; font-weight: 700; letter-spacing: .02em; text-transform: none; text-decoration-color: var(--lx-accent); text-decoration-thickness: 2px; }

/* ── header: the name in the display face, a ruled nav and the five-shade strip on its lower edge ── */
.mk-demo-site[data-direction="shade-card"] .mk-dh { background: color-mix(in srgb, var(--lx-paper) 92%, transparent); border-bottom: 0; box-shadow: none; }
.mk-demo-site[data-direction="shade-card"] .mk-dh::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--sc-strip); }
.mk-demo-site[data-direction="shade-card"] .mk-dh-bar { min-height: 5rem; }
.mk-demo-site[data-direction="shade-card"] .mk-dh-brand { font-size: clamp(1.35rem, 3.4cqi, 1.65rem); font-weight: 400; letter-spacing: -.02em; }
.mk-demo-site[data-direction="shade-card"] .mk-dh-links { gap: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mk-demo-site[data-direction="shade-card"] .mk-dh-links a, .mk-demo-site[data-direction="shade-card"] .mk-dh-links .mk-inert { min-height: 2.75rem; padding: 0 .8rem; border-radius: 0; }
.mk-demo-site[data-direction="shade-card"] .mk-dh-links a::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .45rem; height: 2px; background: var(--lx-accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.mk-demo-site[data-direction="shade-card"] .mk-dh-links a:hover { background: none; transform: none; }
.mk-demo-site[data-direction="shade-card"] .mk-dh-links a:hover::after, .mk-demo-site[data-direction="shade-card"] .mk-dh-links li[data-current] a::after { transform: scaleX(1); }
.mk-demo-site[data-direction="shade-card"] .mk-dh-links li[data-current] a { background: none; color: var(--lx-ink); box-shadow: none; }
.mk-demo-site[data-direction="shade-card"] .mk-dh-links .mk-dh-index, .mk-demo-site[data-direction="shade-card"] .mk-dh-links .mk-dh-dot { display: none; }
.mk-demo-site[data-direction="shade-card"] .mk-dh-menu > summary { border-radius: 2px; background: var(--lx-ink); color: var(--lx-paper); box-shadow: none; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }
.mk-demo-site[data-direction="shade-card"] .mk-dh-panel { border-radius: 2px; background: var(--lx-paper); border-color: var(--lx-line); box-shadow: 0 28px 70px -34px rgb(20 10 18 / .5); }
.mk-demo-site[data-direction="shade-card"] .mk-dh-panel::before { content: ""; height: 4px; margin: -1.15rem -1.15rem .35rem; background: var(--sc-strip); }
.mk-demo-site[data-direction="shade-card"] .mk-dh-panel-links > li > * { border-radius: 0; font-weight: 400; }
.mk-demo-site[data-direction="shade-card"] .mk-dh-panel-links .mk-dh-index { color: var(--lx-accent); opacity: 1; }
.mk-demo-site[data-direction="shade-card"] .mk-dh-panel-links > li[data-current] > * { color: var(--lx-ink); box-shadow: inset 3px 0 0 var(--lx-accent); }
.mk-demo-site[data-direction="shade-card"] .mk-dh-panel-links > li[data-current] .mk-dh-dot { opacity: 1; width: .5rem; height: .5rem; }

/* ── hero: editorial — type on porcelain, the photograph below on a white mat with a shade card pinned to its corner ── */
[data-direction="shade-card"] .lx-hero--editorial { padding-block: clamp(3.25rem, 8.5cqi, 7rem) clamp(3.25rem, 7cqi, 6rem); }
[data-direction="shade-card"] .lx-hero--editorial .lx-hero-words { display: grid; }
[data-direction="shade-card"] .lx-hero--editorial .lx-hero-wide { position: relative; }
[data-direction="shade-card"] .lx-hero--editorial .lx-hero-media { padding: clamp(.45rem, 1.2cqi, .9rem); background: var(--sc-mat); box-shadow: 0 30px 80px -60px rgb(30 15 25 / .6); aspect-ratio: 4 / 5; }
[data-direction="shade-card"] .lx-hero--editorial .lx-hero-media .lx-img { height: 100%; }
[data-direction="shade-card"] .lx-hero--editorial .lx-hero-wide::after { content: ""; position: absolute; z-index: 2; right: calc(var(--lx-gutter) + clamp(1rem, 4cqi, 3rem)); bottom: clamp(-1.6rem, -2.6cqi, -1rem); width: clamp(7.5rem, 22cqi, 15rem); height: clamp(2.6rem, 5.4cqi, 3.6rem); background: var(--sc-strip); box-shadow: 0 0 0 clamp(.35rem, .9cqi, .6rem) var(--sc-mat), 0 24px 40px -26px rgb(30 15 25 / .55); }
@container (min-width: 600px) { [data-direction="shade-card"] .lx-hero--editorial .lx-hero-media { aspect-ratio: 3 / 2; } }
@container (min-width: 900px) {
  [data-direction="shade-card"] .lx-hero--editorial .lx-hero-words { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); column-gap: clamp(2rem, 5cqi, 5rem); align-items: end; }
  [data-direction="shade-card"] .lx-hero--editorial .lx-hero-words > .lx-eyebrow { grid-column: 1 / -1; grid-row: 1; margin-bottom: 1.6rem; }
  [data-direction="shade-card"] .lx-hero--editorial .lx-hero-words > .lx-display { grid-column: 1; grid-row: 2 / span 3; align-self: end; }
  [data-direction="shade-card"] .lx-hero--editorial .lx-hero-words > .lx-lede { grid-column: 2; grid-row: 2; align-self: end; margin-top: 0; }
  [data-direction="shade-card"] .lx-hero--editorial .lx-hero-words > .lx-actions { grid-column: 2; grid-row: 3; }
  [data-direction="shade-card"] .lx-hero--editorial .lx-hero-words > .lx-note { grid-column: 2; grid-row: 4; }
  [data-direction="shade-card"] .lx-hero--editorial .lx-hero-media { aspect-ratio: 16 / 7; }
}
[data-direction="shade-card"] .lx-hero-orbit, [data-direction="shade-card"] .lx-hero-sweep { display: none; }
[data-direction="shade-card"] .lx-hero-scroll { display: none !important; }

/* ── hero: split — the photograph on a mat, words ruled off on the left ── */
[data-direction="shade-card"] .lx-hero--split .lx-hero-media { position: relative; }
[data-direction="shade-card"] .lx-hero--split .lx-hero-text { border-bottom: 1px solid var(--lx-line); }
@container (min-width: 900px) {
  [data-direction="shade-card"] .lx-hero--split .lx-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); min-height: min(calc(var(--mk-vh, 1svh) * 82), 52rem); }
  [data-direction="shade-card"] .lx-hero--split .lx-hero-text { border-bottom: 0; }
  [data-direction="shade-card"] .lx-hero--split .lx-hero-media { margin: clamp(1.5rem, 3cqi, 2.5rem) var(--lx-gutter) clamp(1.5rem, 3cqi, 2.5rem) 0; padding: clamp(.5rem, 1cqi, .8rem); background: var(--sc-mat); box-shadow: 0 30px 80px -60px rgb(30 15 25 / .6); }
  [data-direction="shade-card"] .lx-hero--split .lx-hero-media::after { content: ""; position: absolute; left: clamp(-1.6rem, -2.4cqi, -1rem); bottom: clamp(2rem, 6cqi, 4rem); width: 4px; height: clamp(8rem, 16cqi, 12rem); background: linear-gradient(180deg, var(--sc-1) 0 20%, var(--sc-2) 20% 40%, var(--sc-3) 40% 60%, var(--sc-4) 60% 80%, var(--sc-5) 80% 100%); }
}
[data-direction="shade-card"] .lx-hero--split.lx-tone-dark .lx-hero-media { background: #2a1f28; }

/* ── proof: four promises as a face-chart key ── */
[data-direction="shade-card"] .lx-proof { border-block: 0; background: var(--sc-soft); }
[data-direction="shade-card"] .lx-proof-list { counter-reset: sc-key; }
[data-direction="shade-card"] .lx-proof-list li { counter-increment: sc-key; position: relative; padding-left: 2.3rem; border-color: var(--lx-line); }
[data-direction="shade-card"] .lx-proof-list li::before { content: ""; position: absolute; left: 0; top: 1.7rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--sc-1); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
[data-direction="shade-card"] .lx-proof-list li:nth-child(4n + 2)::before { background: var(--sc-2); }
[data-direction="shade-card"] .lx-proof-list li:nth-child(4n + 3)::before { background: var(--sc-3); }
[data-direction="shade-card"] .lx-proof-list li:nth-child(4n + 4)::before { background: var(--sc-4); }
[data-direction="shade-card"] .lx-proof-title { font-family: var(--lx-head); font-weight: 400; font-style: italic; font-size: clamp(1.3rem, 2.4cqi, 1.6rem); letter-spacing: -.01em; }
[data-direction="shade-card"] .lx-proof-detail { color: var(--lx-muted); }
@container (min-width: 1000px) {
  [data-direction="shade-card"] .lx-proof-list li { padding-left: 3.6rem; }
  [data-direction="shade-card"] .lx-proof-list li::before { left: 1.5rem; top: 2.2rem; }
  [data-direction="shade-card"] .lx-proof-list li:first-child { padding-left: 2.1rem; }
  [data-direction="shade-card"] .lx-proof-list li:first-child::before { left: 0; }
}

/* ── services index: names set large in the display face, numbered like a shade chart ── */
[data-direction="shade-card"] .lx-svc-index { border-top-color: var(--lx-ink); }
[data-direction="shade-card"] .lx-svc-index-item { transition: background-color .25s ease; }
[data-direction="shade-card"] .lx-svc-index-n { font: 700 .66rem/1 var(--lx-body); letter-spacing: .2em; color: var(--lx-muted); }
[data-direction="shade-card"] .lx-svc-index-name { font-size: clamp(1.6rem, 6cqi, 2.6rem); font-weight: 400; letter-spacing: -.02em; }
[data-direction="shade-card"] .lx-svc-index-go { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; gap: .55rem; }
[data-direction="shade-card"] .lx-svc-index-go svg { transition: transform .25s ease; }
[data-direction="shade-card"] .lx-svc-index-item:hover { background: color-mix(in srgb, var(--lx-accent) 5%, transparent); }
[data-direction="shade-card"] .lx-svc-index-item:hover .lx-svc-index-go svg { transform: translateX(4px); }
@container (min-width: 640px) { [data-direction="shade-card"] .lx-svc-index { grid-template-columns: minmax(0, 1fr); } }
[data-direction="shade-card"] .lx-svc { border-bottom-color: var(--lx-line); }
[data-direction="shade-card"] .lx-svc-list { border-top-color: var(--lx-ink); }
[data-direction="shade-card"] .lx-svc .lx-h3 { font-size: clamp(1.4rem, 3cqi, 1.9rem); }

/* ── split: the photograph on a white mat; points ruled in rouge ── */
[data-direction="shade-card"] .lx-split-media { padding: clamp(.45rem, 1cqi, .75rem); background: var(--sc-mat); box-shadow: 0 30px 80px -60px rgb(30 15 25 / .6); }
[data-direction="shade-card"] .lx-split-media .lx-img { height: 100%; }
[data-direction="shade-card"] .lx-points li { padding: .8rem 0 .8rem 1.8rem; border-bottom: 1px solid var(--lx-line); }
[data-direction="shade-card"] .lx-points { gap: 0; border-top: 1px solid var(--lx-line); }
[data-direction="shade-card"] .lx-points li::before { top: 1.42em; width: .7rem; height: .7rem; border-radius: 50%; }

/* ── gallery: a contact sheet — white mats, small-caps captions, square filter tabs, a dark full-size viewer ── */
[data-direction="shade-card"] .lx-gallery-frame { padding: clamp(.3rem, .8cqi, .55rem); background: var(--sc-mat); box-shadow: 0 22px 50px -44px rgb(30 15 25 / .55); }
[data-direction="shade-card"] .lx-gallery-frame .lx-img { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
[data-direction="shade-card"] .lx-gallery figcaption { margin-top: .7rem; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lx-muted); }
[data-direction="shade-card"] .lx-gallery-open { display: block; width: 100%; height: 100%; border: 0; color: inherit; cursor: zoom-in; overflow: hidden; }
[data-direction="shade-card"] .lx-gallery-open:hover .lx-img { transform: scale(1.03); }
[data-direction="shade-card"] .lx-gallery-open:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 3px; }
[data-direction="shade-card"] .lx-gallery-filters { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 clamp(1.6rem, 3.4cqi, 2.6rem); border-top: 1px solid var(--lx-ink); border-bottom: 1px solid var(--lx-line); }
[data-direction="shade-card"] .lx-gallery-filters button { position: relative; display: inline-flex; align-items: center; gap: .55rem; min-height: 2.9rem; padding: 0 1rem; border: 0; background: transparent; color: var(--lx-ink); font: 700 .72rem/1 var(--lx-body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
[data-direction="shade-card"] .lx-gallery-filters button::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
[data-direction="shade-card"] .lx-gallery-filters button:hover { background: color-mix(in srgb, var(--lx-accent) 7%, transparent); }
[data-direction="shade-card"] .lx-gallery-filters button[aria-pressed="true"] { color: var(--lx-accent); }
[data-direction="shade-card"] .lx-gallery-filters button[aria-pressed="true"]::before { background: currentColor; }
[data-direction="shade-card"] .lx-gallery-filters button[aria-pressed="true"]::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: -1px; height: 2px; background: currentColor; }
[data-direction="shade-card"] .lx-gallery-filters button:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: -3px; }
[data-direction="shade-card"] .lx-gallery-more-row { display: flex; justify-content: center; margin-top: clamp(3rem, 6cqi, 4.5rem); }
[data-direction="shade-card"] .lx-gallery-more { display: inline-flex; align-items: center; gap: .9rem; min-height: 3.1rem; padding: 0 1.5rem; border: 1px solid var(--lx-ink); border-radius: 2px; background: transparent; color: var(--lx-ink); font: 800 .72rem/1 var(--lx-body); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
[data-direction="shade-card"] .lx-gallery-more:hover { background: var(--lx-ink); color: var(--lx-paper); }
[data-direction="shade-card"] .lx-gallery-more:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 3px; }
[data-direction="shade-card"] .lx-gallery-more-n { font-weight: 600; letter-spacing: .08em; opacity: .75; }
[data-direction="shade-card"] .lx-viewer { width: min(100vw - 1.5rem, 72rem); max-height: calc(100dvh - 1.5rem); padding: 0; border: 0; border-radius: 2px; background: #140f13; color: #f6f1ec; }
[data-direction="shade-card"] .lx-viewer::backdrop { background: rgb(18 12 16 / .86); }
[data-direction="shade-card"] .lx-viewer-body { display: grid; grid-template-rows: minmax(0, 1fr) auto; max-height: calc(100dvh - 1.5rem); }
[data-direction="shade-card"] .lx-viewer-body::before { content: ""; height: 4px; background: var(--sc-strip); }
[data-direction="shade-card"] .lx-viewer-img { display: block; width: 100%; height: 100%; max-height: calc(100dvh - 7.5rem); object-fit: contain; background: #140f13; }
[data-direction="shade-card"] .lx-viewer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding: .75rem 1rem; }
[data-direction="shade-card"] .lx-viewer-caption { display: flex; gap: .8rem; margin: 0; font-size: .9rem; color: rgb(246 241 236 / .9); }
[data-direction="shade-card"] .lx-viewer-caption span { color: #c9bcc3; font-variant-numeric: tabular-nums; letter-spacing: .14em; }
[data-direction="shade-card"] .lx-viewer-actions { display: flex; gap: .4rem; }
[data-direction="shade-card"] .lx-viewer-actions button { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid rgb(246 241 236 / .32); border-radius: 2px; background: transparent; color: #f6f1ec; font: 800 .72rem/1 var(--lx-body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
[data-direction="shade-card"] .lx-viewer-actions button:hover { background: rgb(246 241 236 / .1); }
[data-direction="shade-card"] .lx-viewer-actions svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
[data-direction="shade-card"] .lx-viewer-actions button:focus-visible { outline: 2px solid #f6f1ec; outline-offset: 2px; }
/* the contact sheet: equal 4:5 frames in four columns (no feature spans), every second frame set a little lower */
@container (min-width: 760px) {
  [data-direction="shade-card"] .lx-gallery--mosaic .lx-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2.25rem, 4cqi, 3.25rem) clamp(1rem, 2cqi, 1.75rem); align-items: start; }
  [data-direction="shade-card"] .lx-gallery--mosaic .lx-gallery-item:nth-child(5n + 1) { grid-column: auto; grid-row: auto; }
  [data-direction="shade-card"] .lx-gallery--mosaic .lx-gallery-item:nth-child(5n + 1) .lx-gallery-frame { aspect-ratio: 4 / 5; height: auto; min-height: 0; }
  [data-direction="shade-card"] .lx-gallery--mosaic .lx-gallery-item:nth-child(even) { transform: translateY(clamp(0rem, 2.4cqi, 2rem)); }
}

/* ── steps, prices and questions: hairline ledgers in the display face ── */
[data-direction="shade-card"] .lx-tone-soft { background: var(--sc-soft); color: var(--lx-ink); }
[data-direction="shade-card"] .lx-step-n { font-family: var(--lx-head); font-weight: 400; font-style: italic; font-size: clamp(2.2rem, 4cqi, 3rem); color: var(--lx-accent); }
[data-direction="shade-card"] .lx-steps--row .lx-step { border-top-color: var(--lx-ink); }
[data-direction="shade-card"] .lx-steps--timeline .lx-step:not(:last-child)::after { left: 1.15rem; top: 3.4rem; width: 1px; background: var(--lx-accent); opacity: .45; }
[data-direction="shade-card"] .lx-price-group-title { font-style: italic; padding-bottom: .65rem; border-bottom: 1px solid var(--lx-ink); }
[data-direction="shade-card"] .lx-price { border-bottom: 1px solid var(--lx-line); }
[data-direction="shade-card"] .lx-price-name { font-weight: 700; }
[data-direction="shade-card"] .lx-price-amount { font-family: var(--lx-head); font-size: 1.35rem; font-weight: 400; }
[data-direction="shade-card"] .lx-price-leader { border-bottom-style: solid; opacity: .6; }
[data-direction="shade-card"] .lx-prices--ledger .lx-price-list { border-top-color: var(--lx-ink); }
[data-direction="shade-card"] .lx-faq-list { border-top-color: var(--lx-ink); }
[data-direction="shade-card"] .lx-faq-item summary { font-family: var(--lx-head); font-weight: 400; font-size: clamp(1.2rem, 2.4cqi, 1.5rem); }
[data-direction="shade-card"] .lx-faq-mark::before, [data-direction="shade-card"] .lx-faq-mark::after { height: 1.5px; background: var(--lx-accent); }

/* ── dark bands, CTA, contact and footer ── */
[data-direction="shade-card"] .lx-tone-dark { background-color: var(--lx-dark); background-image: radial-gradient(ellipse 60% 80% at 92% 0%, color-mix(in srgb, var(--lx-accent) 26%, transparent), transparent 70%); }
[data-direction="shade-card"] .lx-cta .lx-h2 { max-width: 18ch; }
[data-direction="shade-card"] .lx-tone-dark .lx-btn--primary { background: var(--lx-dark-ink); color: var(--lx-dark); }
[data-direction="shade-card"] .lx-facts { border-top-color: var(--lx-ink); }
[data-direction="shade-card"] .lx-facts dt { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
[data-direction="shade-card"] .lx-footer { position: relative; }
[data-direction="shade-card"] .lx-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--sc-strip); }
[data-direction="shade-card"] .lx-footer-name { font-weight: 400; }
[data-direction="shade-card"] .lx-footer-cols a { font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  .mk-demo-site[data-direction="shade-card"] .mk-dh-links a::after, [data-direction="shade-card"] .lx-gallery-frame .lx-img, [data-direction="shade-card"] .lx-svc-index-go svg, [data-direction="shade-card"] .lx-svc-index-item { transition: none; }
}

/* ── dark mode: the accent's own on-dark tint for accent text (WCAG AA on every owner palette and dark surface; gate8) ── */
[data-direction="shade-card"][data-theme="dark"] .lx-step-n, [data-direction="shade-card"][data-theme="dark"] .lx-gallery-filters button[aria-pressed="true"] { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }

/* ── signature (correction 10): the cover, then the lookbook ─────────────────────────────────────────────────────────
   Home opens as a MAGAZINE COVER: the face full height, the headline set over the photograph in the display serif,
   the cover line beneath. The work is a LOOKBOOK: choose a finish from its shade swatch and that face comes forward —
   a native radio set, the five shades drawn from the owner's own colour. */
.mk-demo-site[data-direction="shade-card"] .lx-hero--cover { padding: 0; }
.mk-demo-site[data-direction="shade-card"] .lx-cover { position: relative; display: grid; background: var(--lx-dark); color: var(--lx-dark-ink); }
.mk-demo-site[data-direction="shade-card"] .lx-hero--cover .lx-hero-media { aspect-ratio: 4 / 5; overflow: hidden; }
.mk-demo-site[data-direction="shade-card"] .lx-hero--cover .lx-hero-media .lx-img { width: 100%; height: 100%; object-fit: cover; }
.mk-demo-site[data-direction="shade-card"] .lx-cover-words { padding: clamp(1.75rem, 5cqi, 3rem) var(--lx-gutter) clamp(2.5rem, 7cqi, 4rem); }
.mk-demo-site[data-direction="shade-card"] .lx-cover-words .lx-eyebrow { color: color-mix(in srgb, var(--lx-accent) 30%, #ffffff); }
.mk-demo-site[data-direction="shade-card"] .lx-hero--cover .lx-display { font-size: calc(clamp(2.6rem, 7.4cqi, 7rem) * var(--lx-title-scale, 1)); max-width: 11ch; line-height: .94; }
.mk-demo-site[data-direction="shade-card"] .lx-hero--cover .lx-lede { color: var(--lx-dark-muted); max-width: 40ch; }
.mk-demo-site[data-direction="shade-card"] .lx-hero--cover .lx-note { color: var(--lx-dark-muted); }
.mk-demo-site[data-direction="shade-card"] .lx-cover::after { content: ""; position: absolute; left: var(--lx-gutter); right: var(--lx-gutter); bottom: 1.2rem; height: 6px; background: var(--sc-strip); }
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="shade-card"] .lx-cover { min-height: min(calc(var(--mk-vh, 1svh) * 92), 60rem); }
  .mk-demo-site[data-direction="shade-card"] .lx-hero--cover .lx-hero-media { position: absolute; inset: 0; aspect-ratio: auto; }
  .mk-demo-site[data-direction="shade-card"] .lx-hero--cover .lx-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(20 14 18 / .78) 0, rgb(20 14 18 / .35) 46%, transparent 72%); }
  .mk-demo-site[data-direction="shade-card"] .lx-cover-words { position: relative; align-self: end; max-width: 46rem; padding: 6rem max(var(--lx-gutter), calc((100cqi - var(--lx-max)) / 2)) 5rem; }
}

/* the lookbook: shade swatches choose the face */
.mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-option { border-radius: var(--lx-btn-r); text-transform: uppercase; letter-spacing: .12em; font-size: .875rem; padding-right: 1rem; }
.mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-swatch { width: 1.9rem; height: 1.9rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-option:nth-child(1) .lx-chooser-swatch { background: var(--sc-1); }
.mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-option:nth-child(2) .lx-chooser-swatch { background: var(--sc-2); }
.mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-option:nth-child(3) .lx-chooser-swatch { background: var(--sc-3); }
.mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-option:nth-child(4) .lx-chooser-swatch { background: var(--sc-4); }
.mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-gallery-frame { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sc-soft); box-shadow: 0 0 0 10px var(--sc-mat), 0 0 0 11px var(--lx-line); }
.mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-gallery-frame .lx-img { width: 100%; height: 100%; object-fit: cover; }
.mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook figcaption { font: 400 clamp(1.2rem, 2.4cqi, 1.6rem)/1.2 var(--lx-head); font-style: italic; }
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-set { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
  .mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-options { flex-direction: column; align-items: flex-start; }
  .mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-gallery-frame { max-height: 44rem; aspect-ratio: 4 / 5; }
}
[data-direction="shade-card"][data-theme="dark"] .lx-chooser--lookbook .lx-gallery-frame { box-shadow: 0 0 0 10px var(--lx-dark), 0 0 0 11px var(--lx-line); }

/* ── gate10 correction ───────────────────────────────────────────────────────────────────────────────────────────────
   The cover's words keep a real measure at every width: the left offset that aligns them to the content column is a
   margin, never padding inside the 46rem box (gate10: at 1920 the padding ate the box and set one word per line). */
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="shade-card"] .lx-cover-words { max-width: none; width: min(46rem, calc(100cqi - 2 * var(--lx-gutter))); margin-left: max(0px, calc((100cqi - var(--lx-max)) / 2)); padding: 6rem var(--lx-gutter) 5rem; box-sizing: border-box; }
}

/* the lookbook is the portfolio: four finishes, each a large swatch card beside its face — not small pills in a void */
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-set { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5cqi, 5rem); }
  .mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-options { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; width: 100%; }
  .mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-option { display: grid; grid-template-rows: auto auto; gap: .9rem; align-content: start; padding: 1rem 1rem 1.1rem; min-height: 9rem; }
  .mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-swatch { width: 100%; height: 4.5rem; border-radius: calc(var(--lx-btn-r) * .6); }
}
.mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-option:has(input:checked) { box-shadow: inset 0 0 0 2px var(--lx-accent); }

/* promises are a PALETTE: each promise is a pan of colour with its name lettered beneath, like a shade card */
.mk-demo-site[data-direction="shade-card"] .lx-proof[data-lx-layout="palette"] .lx-proof-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: clamp(1rem, 2.4cqi, 1.75rem); border: 0; }
.mk-demo-site[data-direction="shade-card"] .lx-proof[data-lx-layout="palette"] .lx-proof-list li { display: grid; gap: .5rem; padding: 0; border: 0; }
.mk-demo-site[data-direction="shade-card"] .lx-proof[data-lx-layout="palette"] .lx-proof-list li::before { content: ""; display: block; position: static; height: 5.5rem; margin-bottom: .6rem; border-radius: calc(var(--lx-btn-r) * .6); background: var(--sc-1); }
.mk-demo-site[data-direction="shade-card"] .lx-proof[data-lx-layout="palette"] .lx-proof-list li:nth-child(4n + 2)::before { background: var(--sc-2); }
.mk-demo-site[data-direction="shade-card"] .lx-proof[data-lx-layout="palette"] .lx-proof-list li:nth-child(4n + 3)::before { background: var(--sc-3); }
.mk-demo-site[data-direction="shade-card"] .lx-proof[data-lx-layout="palette"] .lx-proof-list li:nth-child(4n + 4)::before { background: var(--sc-4); }
.mk-demo-site[data-direction="shade-card"] .lx-proof[data-lx-layout="palette"] .lx-proof-title { font: 400 1.35rem/1.2 var(--lx-head); font-style: italic; }

/* the close is a DIARY page: ruled lines on paper, the date-led invitation in the serif — light, not a dark band */
.mk-demo-site[data-direction="shade-card"] .lx-cta[data-lx-layout="diary"] { background: var(--lx-paper) repeating-linear-gradient(180deg, transparent 0 2.4rem, var(--lx-line) 2.4rem calc(2.4rem + 1px)); color: var(--lx-ink); border-top: 6px solid transparent; border-image: var(--sc-strip) 1; }
.mk-demo-site[data-direction="shade-card"] .lx-cta[data-lx-layout="diary"] .lx-h2 { font-style: italic; font-weight: 400; }
[data-direction="shade-card"][data-theme="dark"] .lx-cta[data-lx-layout="diary"] { background-color: var(--lx-dark); color: var(--lx-dark-ink); }

/* the enquiry wears the serif and the shade strip */
.mk-demo-site[data-direction="shade-card"] [data-journey-surface] { border-top: 6px solid transparent; border-image: var(--sc-strip) 1; }
.mk-demo-site[data-direction="shade-card"] [data-contact-form="journey"] > div > h2 { font-style: italic; font-weight: 400; }

/* ── gate11 correction: the lookbook's swatches sit with their face ──────────────────────────────────────────────────
   The swatch cards align to the top of the lookbook beside the photograph (no dead band above them); the installed
   enquiry keeps the serif labels in sentence case. */
@container demo (min-width: 900px) { .mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-set { align-items: start; } .mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-options { align-self: start; } }

/* ── gate12 critic correction: the shade wall fills the lookbook ──────────────────────────────────────────────────────
   On wide frames the four finishes are a 2 × 2 wall of tall shade cards the full height of the photograph (no empty
   column under four small tiles). The installed enquiry's progress is the shade strip itself. */
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-set { align-items: stretch; }
  .mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-options { align-self: stretch; height: 100%; grid-auto-rows: 1fr; }
  .mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-option { grid-template-rows: minmax(4.5rem, 1fr) auto; min-height: 0; }
  .mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-chooser-swatch { height: 100%; }
}
.mk-demo-site[data-direction="shade-card"] [data-enquiry-journey] ol[aria-label="Enquiry progress"] li > span:first-child { height: 6px; border-radius: 0; }
.mk-demo-site[data-direction="shade-card"] [data-enquiry-journey] ol[aria-label="Enquiry progress"] li:nth-child(1) > span.bg-brand:first-child { background: var(--sc-2); }
.mk-demo-site[data-direction="shade-card"] [data-enquiry-journey] ol[aria-label="Enquiry progress"] li:nth-child(2) > span.bg-brand:first-child { background: var(--sc-3); }
.mk-demo-site[data-direction="shade-card"] [data-enquiry-journey] ol[aria-label="Enquiry progress"] li:nth-child(3) > span.bg-brand:first-child { background: var(--sc-4); }

/* ── g15d: the drawings are composed whole, never cropped ─────────────────────────────────────────────────────────────
   v10 replaced the photographs with seven 16:10 code-native drawings, but every frame kept the photographs' portrait
   crop (4:5 cover, 4:5 lookbook and contact sheet, portrait split and hero mats) and object-fit: cover cut away up to
   half of each drawing. Each frame now takes the drawings' own 16:10 proportion and the drawing sits whole on its mat
   (object-fit: contain): the cover on phones is the drawing edge to edge; on wide screens the cover's height never
   exceeds the drawing's, so it still fills the width, and on very wide screens the drawing settles to the right of the
   cover words on the cover's own dark ground. Mats, shadows, the shade strip and every layout around them are unchanged. */
.mk-demo-site[data-direction="shade-card"] .lx-img { object-fit: contain; }
.mk-demo-site[data-direction="shade-card"] .lx-hero--cover .lx-hero-media { aspect-ratio: 16 / 10; }
.mk-demo-site[data-direction="shade-card"] .lx-hero--cover .lx-hero-media .lx-img { object-fit: contain; object-position: 100% 100%; }
.mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-gallery-frame,
.mk-demo-site[data-direction="shade-card"] .lx-gallery-frame,
.mk-demo-site[data-direction="shade-card"] .lx-split-media,
.mk-demo-site[data-direction="shade-card"] .lx-hero--split .lx-hero-media,
.mk-demo-site[data-direction="shade-card"] .lx-hero--editorial .lx-hero-media { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
.mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-gallery-frame .lx-img,
.mk-demo-site[data-direction="shade-card"] .lx-split-media .lx-img,
.mk-demo-site[data-direction="shade-card"] .lx-hero--split .lx-hero-media .lx-img { width: 100%; height: 100%; object-fit: contain; }
@container demo (min-width: 760px) {
  .mk-demo-site[data-direction="shade-card"] .lx-gallery--mosaic .lx-gallery-item:nth-child(5n + 1) .lx-gallery-frame { aspect-ratio: 16 / 10; }
}
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="shade-card"] .lx-cover { min-height: min(calc(var(--mk-vh, 1svh) * 92), 60rem, 62.5cqi); }
  .mk-demo-site[data-direction="shade-card"] .lx-hero--cover .lx-hero-media { aspect-ratio: auto; }
  .mk-demo-site[data-direction="shade-card"] .lx-chooser--lookbook .lx-gallery-frame { max-height: none; aspect-ratio: 16 / 10; }
  .mk-demo-site[data-direction="shade-card"] .lx-hero--split .lx-hero-grid { align-items: center; }
}

/* ── shade-card-v3.css ── */
/* ── Shade Card, version 3 additions — ashdub. Makeup (clean-room resale family, October 2026) ─────────────────────────
   Loaded only on marketplace routes (ResaleAssets), never by tenant runtimes, editor canvases or client routes, so the
   shared Shade Card stylesheet and every protected route's CSS stay byte-identical. */
/* Version 3: every price is an "Artist to confirm" slot, so a price row and its slot wrap within the row at 280
   instead of widening the page. */
.mk-demo-site[data-direction="shade-card"] :is(.lx-svc-head, .lx-price-head) { flex-wrap: wrap; row-gap: .35rem; min-width: 0; }
.mk-demo-site[data-direction="shade-card"] :is(.lx-svc-price, .lx-price-amount) { white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.mk-demo-site[data-direction="shade-card"] .lx-price-amount { font-size: 1.1rem; }
@container (max-width: 340px) {
  .mk-demo-site[data-direction="shade-card"] .lx-hero--split .lx-hero-grid { grid-template-columns: minmax(0, 1fr); }
}
/* At 280 the enquiry page's fact rows set their own width (nowrap hours, a long sample email): rows and hours wrap
   within the column; a day label stays whole. */
.mk-demo-site[data-direction="shade-card"] .lx-facts > div { grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr); }
.mk-demo-site[data-direction="shade-card"] .lx-facts > div:has(.lx-hours) { grid-template-columns: minmax(0, 1fr); }
.mk-demo-site[data-direction="shade-card"] .lx-facts dd { min-width: 0; overflow-wrap: anywhere; }
.mk-demo-site[data-direction="shade-card"] .lx-facts .lx-hours li > span { min-width: 0; white-space: normal; }
.mk-demo-site[data-direction="shade-card"] .lx-facts .lx-hours li > span:first-child { flex: none; overflow-wrap: normal; }

/* g93d4 critic (contrast): on wide frames the cover's light words ran past the end of its shade, so the lede and note
   sat on the pale part of the drawing (S4 risk). The plum shade now covers the whole words column before it fades. */
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="shade-card"] .lx-hero--cover .lx-hero-media::after { background: linear-gradient(90deg, rgb(28 16 24 / .9) 0, rgb(28 16 24 / .78) 42%, rgb(28 16 24 / .34) 62%, transparent 80%); }
}

/* ── system mode: the design's dark rules follow the visitor's device unless the owner fixed light or dark ── */
@media (prefers-color-scheme: dark) {
[data-direction="shade-card"][data-theme="system"] {
  --lx-paper: #19131a; --lx-ink: #f3ece8; --lx-muted: #c3b6bd; --lx-line: rgba(243,236,232,0.16);
  --lx-dark: #0f0b10; --sc-mat: #241b23; --sc-soft: #221a21;
}
[data-direction="shade-card"][data-theme="system"] .lx-step-n, [data-direction="shade-card"][data-theme="system"] .lx-gallery-filters button[aria-pressed="true"] { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="shade-card"][data-theme="system"] .lx-chooser--lookbook .lx-gallery-frame { box-shadow: 0 0 0 10px var(--lx-dark), 0 0 0 11px var(--lx-line); }
[data-direction="shade-card"][data-theme="system"] .lx-cta[data-lx-layout="diary"] { background-color: var(--lx-dark); color: var(--lx-dark-ink); }
}