/* =========================================================
COUTURE per-site tokens — generated from Design DNA
All {{...}} placeholders are replaced at build time.
========================================================= */
:root {
--c-ink: #e8eadf;
--c-ink-soft: #c2c8b3;
--c-paper: #0d1f12;
--c-paper-2: #162b1c;
--c-accent: #86efac;
--c-accent-2: #fde047;
--c-accent-3: #fb923c;
--c-muted: #828c84;
--c-line: #243426;
--c-display: "Playfair Display", serif;
--c-body: "Cormorant Garamond", sans-serif;
--c-mono: "JetBrains Mono", monospace;
--c-gutter: clamp(18px, 3vw, 48px);
--c-rhythm: clamp(80px, 12vh, 180px);
/* card_style */
--c-card-radius: 0px;
--c-card-shadow: 8px 8px 0 0 var(--c-ink);
}
html { scroll-behavior: smooth; }
body { background: var(--c-paper); color: var(--c-ink); font-family: var(--c-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* V4.7 — View Transitions API. The JS triggers a crossfade between
pages on internal-link clicks (when supported). These rules tune
the timing + curve so the transition feels "deliberate" not
"browser-default". prefers-reduced-motion is checked in JS too. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: .28s;
animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}
::view-transition-old(root) { animation-name: c-fade-out; }
::view-transition-new(root) { animation-name: c-fade-in; }
@keyframes c-fade-out { to { opacity: 0; transform: translateY(-2px); } }
@keyframes c-fade-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* V4.6 — global form-control sanity. Without these:
- iOS Safari zooms the page when an input with font-size < 16px receives focus
- Skip-link is invisible until focused, then ugly (default browser outline)
- Focus rings are inconsistent across input/button/link
The body of the rules avoids overriding per-component layout — only
typographic + accessibility minimums. */
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea { font-size: max(16px, 1em); /* iOS zoom guard */ }
/* Visible-when-focused skip link — keyboard users land here first.
Looks like a small label that "drops in" from the top edge. */
.skip-link, a.skip-link {
position: absolute; top: -100px; left: 16px; z-index: 999;
padding: 12px 18px; background: var(--c-ink); color: var(--c-paper);
text-decoration: none; font-family: var(--c-mono); font-size: 12px;
letter-spacing: .12em; text-transform: uppercase;
border: 2px solid var(--c-accent);
transition: top .15s ease;
}
.skip-link:focus, .skip-link:focus-visible {
top: 12px; outline: none;
}
/* Universal :focus-visible — visible focus ring that doesn't fight the
palette. 2px outline + offset in the accent color. Click + touch
inputs don't trigger this (focus-visible is keyboard / programmatic). */
:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
border-radius: 2px;
}
button:focus-visible, [role="button"]:focus-visible,
.cta:focus-visible, a.cta:focus-visible {
outline-offset: 4px;
}
::selection { background: var(--c-accent); color: var(--c-paper); }
/* decorative_motif overlay */
body::after { content:""; position: fixed; inset: 0; pointer-events:none; z-index:-1; opacity:.22; background-image: radial-gradient(var(--c-ink) 1px, transparent 1.2px); background-size: 28px 28px; }
/* wp-block-cover fallback (our pipeline uses it for full-bleed-image hero) */
.wp-block-cover.couture-hero-cover { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-start; }
.wp-block-cover.couture-hero-cover > .wp-block-cover__background { position: absolute; inset: 0; background: rgba(0,0,0,.55); z-index: 1; pointer-events: none; }
.wp-block-cover.couture-hero-cover > .wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.wp-block-cover.couture-hero-cover > .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; }
.wp-block-cover.couture-hero-cover::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 30%, transparent 55%, rgba(0,0,0,.6) 100%); z-index:1; pointer-events:none; }
/* hero */
.couture-hero { position: relative; padding: clamp(60px, 9vw, 140px) var(--c-gutter) clamp(40px, 6vw, 80px); overflow: hidden; }
.couture-hero h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(56px, 11vw, 176px); line-height: 0.92; letter-spacing: -0.02em; }
.couture-hero h1 em { font-style: italic; color: var(--c-accent-2); font-weight: 400; }
.couture-hero .eyebrow { display:flex; align-items:center; gap:12px; font-family: var(--c-mono); font-size: 12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom: 36px; color: var(--c-ink); }
.couture-hero .eyebrow::before { content:""; width:48px; height:1px; background: var(--c-ink); }
.couture-hero .hero-sub { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,5vw,96px); margin-top: clamp(40px,6vw,80px); align-items:end; }
.couture-hero .hero-sub p { max-width: 46ch; font-size:18px; }
.couture-hero .hero-art { margin-top: clamp(40px,6vw,72px); position:relative; aspect-ratio: 21/9; overflow:hidden; background: var(--c-paper-2); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.couture-hero .hero-art img { width:100%; height:100%; object-fit:cover; filter: contrast(1.1); clip-path: polygon(0 6%, 100% 0, 98% 100%, 2% 96%); }
.couture-hero .hero-art::after { content:""; position:absolute; inset:0; pointer-events:none; }
/* marquee */
.couture-marquee { border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); overflow:hidden; padding:22px 0; font-family: var(--c-display); font-style: italic; font-size: clamp(36px,5vw,64px); white-space:nowrap; background: var(--c-paper); }
.couture-marquee-track { display:inline-block; animation: couture-slide 36s linear infinite; padding-right: 48px; }
/* V4.4: items are no longer duplicated in markup. The track's content is
cloned via couture.js (which appends a hidden copy after first paint)
so the loop appears seamless without doubling the visible phrase list. */
.couture-marquee-track span { margin-right: 48px; }
.couture-marquee-track .dot { color: var(--c-accent); }
@media (prefers-reduced-motion: reduce) {
.couture-marquee-track { animation: none; }
}
@keyframes couture-slide { from { transform: translateX(0) } to { transform: translateX(-50%) } }
/* section head */
.couture-section { padding: var(--c-rhythm) var(--c-gutter); position: relative; }
.couture-section-head { display:grid; grid-template-columns: 120px 1fr; gap: 24px; margin-bottom: clamp(40px,5vw,72px); align-items: start; }
.couture-section-head .num { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); padding-top: 14px; border-top: 2px solid var(--c-accent); }
.couture-section-head h2 .italic { font-style: italic; color: var(--c-accent-2); }
/* story */
.couture-story { display:grid; grid-template-columns: 4fr 5fr; gap: clamp(40px,6vw,96px); align-items:start; }
.couture-story .lede p:first-child::first-letter { font-family: var(--c-display); font-weight:400; font-size: 6em; line-height:.85; float: left; margin: 4px 10px 0 -4px; color: var(--c-accent-2); }
.couture-story .callout { position:relative; padding: 40px 32px; background: var(--c-paper-2); border: 1px solid var(--c-line); transform: rotate(-1.2deg) translateY(24px); box-shadow: var(--c-card-shadow); }
.couture-story .callout::before { content:"\201C"; position:absolute; top:-46px; left:18px; font-family: var(--c-display); font-size: 180px; line-height:1; color: var(--c-accent); }
.couture-story .callout p { font-family: var(--c-display); font-size: 26px; line-height: 1.2; font-style: italic; }
.couture-story .callout cite { font-family: var(--c-mono); font-style: normal; font-size: 11px; letter-spacing:.1em; text-transform: uppercase; color: var(--c-muted); }
/* products */
.couture-products { display:grid; grid-template-columns: repeat(12, 1fr); gap:28px; row-gap:64px; }
.couture-products .prod { position: relative; cursor: pointer; }
.couture-products .prod:nth-child(4n+1) { grid-column: span 5; }
.couture-products .prod:nth-child(4n+2) { grid-column: span 7; transform: translateY(40px); }
.couture-products .prod:nth-child(4n+3) { grid-column: span 7; }
.couture-products .prod:nth-child(4n+4) { grid-column: span 5; transform: translateY(32px); }
.couture-products .prod-img { aspect-ratio: 4/5; overflow:hidden; position:relative; background: var(--c-paper-2); border:1px solid var(--c-line); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.couture-products .prod:hover .prod-img { transform: translateY(-6px); }
.couture-products .prod-img img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); filter: contrast(1.1); clip-path: polygon(0 6%, 100% 0, 98% 100%, 2% 96%); }
.couture-products .prod:hover .prod-img img { transform: scale(1.06); }
.couture-products .ribbon { position:absolute; top:14px; left:14px; background: var(--c-accent); color: var(--c-paper); font-family: var(--c-mono); font-size: 10px; letter-spacing:.12em; text-transform:uppercase; padding: 6px 10px; z-index:2; }
.couture-products .meta { display:grid; grid-template-columns: 1fr auto; margin-top: 22px; align-items:baseline; gap:18px; }
.couture-products h3 { font-style: italic; font-weight: 500; }
.couture-products .origin { font-family: var(--c-mono); font-size: 11px; letter-spacing:.08em; text-transform:uppercase; color: var(--c-muted); margin-top: 4px; }
.couture-products .price { font-family: var(--c-display); font-weight: 500; font-size: 28px; white-space: nowrap; }
.couture-products .notes { margin-top: 10px; font-size: 14px; color: var(--c-ink-soft); max-width: 44ch; }
/* ritual/steps */
.couture-ritual { display:grid; grid-template-columns: 5fr 6fr; gap: clamp(48px,6vw,112px); align-items:start; }
.couture-ritual .sticky { position: sticky; top: 80px; aspect-ratio: 3/4; background-size: cover; background-position: center; border: 1px solid var(--c-line); box-shadow: var(--c-card-shadow); }
.couture-ritual .list { display:flex; flex-direction: column; gap: 8px; }
.couture-ritual .item { display:grid; grid-template-columns: 80px 1fr; gap:24px; padding: 28px 0; border-bottom: 1px solid rgba(0,0,0,.1); align-items:baseline; }
.couture-ritual .item:last-child { border-bottom:none; }
.couture-ritual .item .n { font-family: var(--c-display); font-size: 64px; font-weight: 300; line-height:1; color: var(--c-accent); font-style: italic; }
.couture-ritual .item h3 { font-style: italic; margin-bottom: 10px; }
.couture-ritual .item p { color: var(--c-ink-soft); max-width: 52ch; }
/* pullquote */
.couture-pullquote { padding: calc(var(--c-rhythm) * 0.6) var(--c-gutter); background: var(--c-ink); color: var(--c-paper); position: relative; overflow:hidden; }
.couture-pullquote::before { content:"\201C"; position:absolute; top:-60px; left:40px; font-family: var(--c-display); font-size: 520px; line-height:1; color: var(--c-accent-2); opacity:.4; pointer-events:none; }
.couture-pullquote blockquote { max-width: 1100px; margin: 0; font-family: var(--c-display); font-weight: 300; font-size: clamp(32px,4.5vw,68px); line-height: 1.08; letter-spacing: -0.015em; }
.couture-pullquote blockquote em { font-style: italic; color: var(--c-accent-3); }
.couture-pullquote .attrib { margin-top: 48px; font-family: var(--c-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; display:flex; gap:24px; align-items:center; color: var(--c-paper-2); }
.couture-pullquote .attrib::before { content:""; width:48px; height:1px; background: var(--c-accent-3); }
/* faq */
.couture-faq-list { border-top: 1px solid var(--c-line); }
.couture-faq-item { border-bottom: 1px solid var(--c-line); padding: 32px 0; cursor: pointer; }
.couture-faq-q { display:grid; grid-template-columns: 60px 1fr auto; gap: 24px; align-items:baseline; font-family: var(--c-display); font-size: clamp(22px,2.4vw,32px); font-style: italic; font-weight: 400; }
.couture-faq-q .n { font-family: var(--c-mono); font-style: normal; font-size: 12px; letter-spacing:.08em; color: var(--c-accent); }
.couture-faq-q .plus { width: 28px; height: 28px; position:relative; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.couture-faq-q .plus::before, .couture-faq-q .plus::after { content:""; position:absolute; background: var(--c-ink); }
.couture-faq-q .plus::before { left:0; right:0; top:50%; height: 1px; }
.couture-faq-q .plus::after { top:0; bottom:0; left:50%; width: 1px; transition: transform .4s; }
.couture-faq-a { max-height: 0; overflow:hidden; transition: max-height .6s cubic-bezier(.2,.8,.2,1), margin .4s ease; padding: 0 0 0 84px; max-width: 64ch; color: var(--c-ink-soft); }
.couture-faq-item.open .plus { transform: rotate(90deg); }
.couture-faq-item.open .plus::after { transform: scaleY(0); }
.couture-faq-item.open .couture-faq-a { max-height: 320px; margin-top: 18px; }
/* newsletter */
.couture-newsletter { background: var(--c-accent); color: var(--c-paper); padding: calc(var(--c-rhythm) * 0.7) var(--c-gutter); position: relative; overflow:hidden; }
.couture-newsletter::after { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.1), transparent 40%), radial-gradient(circle at 80% 70%, rgba(0,0,0,.2), transparent 40%); pointer-events:none; }
.couture-newsletter .wrap { display:grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items:end; position:relative; z-index:1; }
.couture-newsletter h2 { color: var(--c-paper); font-style: italic; font-weight: 300; }
.couture-newsletter form { display:flex; gap:0; border-bottom: 1px solid var(--c-paper); align-items:center; }
.couture-newsletter input { flex:1; background: transparent; border: none; color: var(--c-paper); padding: 16px 0; font-family: var(--c-body); font-size: 17px; outline:none; }
.couture-newsletter input::placeholder { color: rgba(244,234,217,.6); }
.couture-newsletter button { background: transparent; color: var(--c-paper); border: none; padding: 16px 4px; font-family: var(--c-mono); letter-spacing: .1em; text-transform: uppercase; font-size: 12px; cursor: pointer; }
/* ============================================================
HOUSE SEAL — tiny lower-right stamp, archetype-shaped
============================================================ */
.couture-seal { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; align-items: center; justify-content: center; flex-direction: column; pointer-events: none; opacity: .92; }
.couture-seal .seal-mark { font-family: var(--c-display); font-weight: 400; font-style: italic; font-size: 28px; line-height: 1; color: var(--c-ink); }
.couture-seal .seal-text { font-family: var(--c-mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink); margin-top: 4px; }
/* oval — editorial / journal / gallery */
.couture-seal--oval { width: 78px; height: 56px; background: var(--c-paper); border: 2px solid var(--c-ink); border-radius: 50%; padding: 6px 10px; box-shadow: var(--c-card-shadow); }
/* wax seal — atelier / made-to-order */
.couture-seal--wax { width: 64px; height: 64px; background: var(--c-accent); color: var(--c-paper); border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,.18), inset 0 -3px 4px rgba(0,0,0,.18), inset 0 3px 4px rgba(255,255,255,.18); padding: 8px; clip-path: polygon(50% 0,61% 8%,75% 4%,82% 18%,96% 25%,93% 42%,100% 50%,93% 58%,96% 75%,82% 82%,75% 96%,61% 92%,50% 100%,39% 92%,25% 96%,18% 82%,4% 75%,7% 58%,0 50%,7% 42%,4% 25%,18% 18%,25% 4%,39% 8%); }
.couture-seal--wax .seal-mark { color: var(--c-paper); font-size: 20px; font-weight: 700; font-style: normal; }
.couture-seal--wax .seal-text { color: var(--c-paper); font-size: 7px; }
/* square stamp — brutalist / auction / manifesto */
.couture-seal--square { width: 76px; height: 56px; background: var(--c-paper); border: 2px solid var(--c-ink); border-radius: 0; padding: 6px 8px; box-shadow: var(--c-card-shadow); transform: rotate(-3deg); }
.couture-seal--square .seal-mark { color: var(--c-accent); }
/* die-cut tag — shop-first / field-journal / subscription / zine */
.couture-seal--die-cut { width: 84px; height: 50px; background: var(--c-paper); border: 1px dashed var(--c-ink); padding: 4px 10px; box-shadow: var(--c-card-shadow); position: fixed; clip-path: polygon(0 0, 100% 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.couture-seal--die-cut .seal-mark { font-size: 22px; }
.couture-seal--die-cut::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; transform: translateY(-50%); border: 1px solid var(--c-ink); border-radius: 50%; }
@media (max-width: 700px) { .couture-seal { display: none; } }
/* legacy footer — kept as a baseline; per-archetype variants below override */
.couture-footer { background: var(--c-ink); color: var(--c-paper); padding: calc(var(--c-rhythm) * 0.5) var(--c-gutter) 40px; }
.couture-footer-grid { display:grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 48px; padding-bottom: 64px; border-bottom: 1px solid rgba(244,234,217,.15); }
.couture-footer-grid h4 { font-family: var(--c-mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase; color: var(--c-accent-3); margin-bottom: 20px; font-weight: 500; }
.couture-footer-grid ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.couture-footer-grid a { text-decoration:none; font-size: 15px; color: var(--c-paper-2); }
.couture-footer-grid a:hover { color: var(--c-accent-3); }
.couture-footer .brand { font-family: var(--c-display); font-style: italic; font-size: clamp(48px,7vw,96px); line-height:.95; font-weight: 300; margin-bottom: 24px; }
.couture-footer .bottom { display:flex; justify-content:space-between; padding-top: 32px; font-family: var(--c-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
/* ============================================================
FOOTER VARIANTS — one per archetype family
============================================================ */
/* 1. EDITORIAL GRAND — newspaper masthead */
.couture-footer--grand { background: var(--c-ink); color: var(--c-paper); padding: clamp(60px,8vw,120px) var(--c-gutter) 40px; }
.couture-footer--grand .grand-masthead { text-align:center; padding-bottom: 40px; border-bottom: 2px double var(--c-paper-2); margin-bottom: 48px; }
.couture-footer--grand .grand-name { font-family: var(--c-display); font-weight: 300; font-size: clamp(72px, 12vw, 200px); line-height: .9; letter-spacing: -.04em; color: var(--c-paper); }
.couture-footer--grand .grand-tagline { margin-top: 18px; font-family: var(--c-display); font-style: italic; font-weight: 400; font-size: clamp(16px, 1.6vw, 22px); color: var(--c-paper-2); max-width: 60ch; margin-inline:auto; }
.couture-footer--grand .grand-grid { display:grid; grid-template-columns: 1fr 1fr 1.4fr; gap: clamp(28px, 4vw, 64px); padding-bottom: 48px; border-bottom: 1px solid rgba(244,234,217,.12); }
.couture-footer--grand .grand-col h4 { font-family: var(--c-mono); font-size: 11px; letter-spacing:.16em; text-transform:uppercase; color: var(--c-accent-3); margin: 0 0 18px; font-weight: 500; }
.couture-footer--grand .grand-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.couture-footer--grand .grand-col a { color: var(--c-paper); text-decoration:none; font-family: var(--c-display); font-style: italic; font-size: 18px; }
.couture-footer--grand .grand-col a:hover { color: var(--c-accent-3); }
.couture-footer--grand .grand-col p { color: var(--c-paper-2); font-size: 14px; line-height: 1.6; margin: 0 0 6px; }
.couture-footer--grand .grand-form { display:flex; align-items:center; border-bottom: 1px solid var(--c-paper); margin-top: 14px; }
.couture-footer--grand .grand-form input { flex:1; background:transparent; border:none; color: var(--c-paper); padding:14px 0; font-family: var(--c-body); font-size: 15px; outline:none; }
.couture-footer--grand .grand-form input::placeholder { color: rgba(244,234,217,.55); }
.couture-footer--grand .grand-form button { background: var(--c-accent); color: var(--c-paper); border:none; padding: 12px 18px; font-family: var(--c-mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.couture-footer--grand .grand-rule { height: 4px; background: linear-gradient(90deg, transparent, var(--c-accent-2), transparent); margin: 36px 0 18px; opacity:.5; }
.couture-footer--grand .grand-foot { display:flex; justify-content:space-between; gap: 20px; font-family: var(--c-mono); font-size: 11px; letter-spacing:.1em; text-transform:uppercase; color: var(--c-paper-2); flex-wrap: wrap; }
.couture-footer--grand .grand-colophon i { font-style: italic; color: var(--c-accent-3); text-transform: none; letter-spacing: 0; font-family: var(--c-display); font-size: 13px; }
/* 2. ATELIER CORRESPONDENCE — French / restrained */
.couture-footer--atelier { background: var(--c-paper-2); color: var(--c-ink); padding: clamp(60px,8vw,120px) var(--c-gutter) 32px; border-top: 1px solid var(--c-line); }
.couture-footer--atelier .atl-mark { font-family: var(--c-display); font-size: clamp(64px, 10vw, 120px); color: var(--c-accent); line-height: .9; margin-bottom: 32px; }
.couture-footer--atelier .atl-row { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 80px); padding-bottom: 56px; border-bottom: 1px solid var(--c-line); }
.couture-footer--atelier .atl-eyebrow { font-family: var(--c-mono); font-size: 11px; letter-spacing:.18em; text-transform:uppercase; color: var(--c-muted); margin-bottom: 18px; }
.couture-footer--atelier .atl-email { font-family: var(--c-display); font-style: italic; font-weight: 300; font-size: clamp(28px, 4vw, 56px); color: var(--c-ink); text-decoration:none; line-height: 1.05; word-break: break-all; }
.couture-footer--atelier .atl-email:hover { color: var(--c-accent); }
.couture-footer--atelier .atl-tel,
.couture-footer--atelier .atl-addr { margin-top: 12px; font-size: 14px; color: var(--c-ink-soft); font-family: var(--c-mono); letter-spacing: .04em; }
.couture-footer--atelier .atl-right p { font-family: var(--c-body); font-size: 16px; line-height: 1.6; color: var(--c-ink-soft); margin: 0 0 24px; max-width: 42ch; }
.couture-footer--atelier .atl-cta { font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-paper); background: var(--c-ink); padding: 14px 22px; text-decoration: none; display: inline-block; }
.couture-footer--atelier .atl-cta:hover { background: var(--c-accent); }
.couture-footer--atelier .atl-nav { padding: 28px 0; display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.couture-footer--atelier .atl-nav a { color: var(--c-ink); text-decoration:none; }
.couture-footer--atelier .atl-nav a:hover { color: var(--c-accent); }
.couture-footer--atelier .atl-nav span { color: var(--c-muted); }
.couture-footer--atelier .atl-foot { display:flex; justify-content:space-between; padding-top: 24px; border-top: 1px dashed var(--c-line); font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; text-transform:uppercase; color: var(--c-muted); }
/* 3. BRUTALIST SPEC — monospace, dense */
.couture-footer--spec { background: var(--c-ink); color: var(--c-paper); padding: 48px var(--c-gutter) 24px; font-family: var(--c-mono); font-size: 11px; letter-spacing: .1em; line-height: 1.6; border-top: 4px solid var(--c-accent); }
.couture-footer--spec .spec-top { display:flex; justify-content:space-between; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid rgba(244,234,217,.2); flex-wrap: wrap; gap: 18px; }
.couture-footer--spec .spec-brand { font-family: var(--c-display); font-weight: 400; font-style: italic; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.01em; }
.couture-footer--spec .spec-flags { display:flex; gap: 24px; flex-wrap:wrap; text-transform: uppercase; }
.couture-footer--spec .spec-flags b { color: var(--c-accent-3); font-weight: 500; margin-right: 6px; }
.couture-footer--spec .spec-cols { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; padding: 24px 0; border-bottom: 1px solid rgba(244,234,217,.2); }
.couture-footer--spec .spec-cols a { color: var(--c-paper); text-decoration:none; padding: 8px 0; border-right: 1px dashed rgba(244,234,217,.2); padding-right: 14px; text-transform: uppercase; }
.couture-footer--spec .spec-cols a:hover { color: var(--c-accent); }
.couture-footer--spec .spec-policy { display:flex; flex-wrap:wrap; gap: 18px; padding: 16px 0; border-bottom: 1px solid rgba(244,234,217,.2); color: var(--c-paper-2); text-transform: uppercase; }
/* Contact row: TEL / MAIL / ADDR were all running together on one line —
the row had no flex layout (V4.4 audit). Now properly spaced + wrapping. */
.couture-footer--spec .spec-contact { display:flex; flex-wrap:wrap; gap: 14px 28px; padding: 16px 0; border-bottom: 1px solid rgba(244,234,217,.2); color: var(--c-paper-2); }
.couture-footer--spec .spec-contact b { color: var(--c-accent-3); font-weight: 500; margin-right: 8px; text-transform: uppercase; }
.couture-footer--spec .spec-contact a { color: var(--c-paper); text-decoration: none; border-bottom: 1px dotted rgba(244,234,217,.4); }
.couture-footer--spec .spec-contact a:hover { color: var(--c-accent); border-color: var(--c-accent); }
.couture-footer--spec .spec-foot { display:flex; justify-content:space-between; padding-top: 16px; color: var(--c-muted); text-transform: uppercase; }
/* 4. MANIFESTO LOUD — three giant lines */
.couture-footer--loud { background: var(--c-paper); color: var(--c-ink); padding: clamp(60px,8vw,140px) var(--c-gutter); border-top: 4px solid var(--c-ink); }
.couture-footer--loud .loud-lines { display:flex; flex-direction:column; gap: 4px; margin-bottom: 64px; }
.couture-footer--loud .loud-line { font-family: var(--c-display); font-weight: 300; font-size: clamp(40px, 8vw, 120px); line-height: .98; letter-spacing: -.03em; }
.couture-footer--loud .loud-line--0 { color: var(--c-ink); }
.couture-footer--loud .loud-line--1 { font-style: italic; color: var(--c-accent-2); padding-left: 8%; }
.couture-footer--loud .loud-line--2 { color: var(--c-ink); padding-left: 16%; }
.couture-footer--loud .loud-line--3 { font-style: italic; color: var(--c-accent); padding-left: 24%; }
.couture-footer--loud .loud-foot { display:flex; justify-content:space-between; align-items: end; padding-top: 32px; border-top: 1px solid var(--c-line); flex-wrap: wrap; gap: 18px; }
.couture-footer--loud .loud-contact { font-family: var(--c-mono); font-size: 12px; letter-spacing: .1em; }
.couture-footer--loud .loud-contact a { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 4px; }
.couture-footer--loud .loud-nav { display:flex; gap: 18px; font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.couture-footer--loud .loud-nav a { color: var(--c-ink); text-decoration:none; }
.couture-footer--loud .loud-nav a:hover { color: var(--c-accent); }
/* 5. GALLERY COLOPHON — museum catalogue */
.couture-footer--colophon { background: var(--c-paper); color: var(--c-ink); padding: 80px var(--c-gutter) 32px; border-top: 1px solid var(--c-line); }
.couture-footer--colophon .col-rule { height: 1px; background: var(--c-ink); margin-bottom: 24px; }
.couture-footer--colophon .col-title { font-family: var(--c-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 28px; }
.couture-footer--colophon .col-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--c-line); }
.couture-footer--colophon .col-grid > div { padding: 14px 18px; border-bottom: 1px solid var(--c-line); border-right: 1px dashed var(--c-line); }
.couture-footer--colophon .col-grid > div:last-child { border-right: none; }
.couture-footer--colophon .col-grid dt { font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 6px; }
.couture-footer--colophon .col-grid dd { margin: 0; font-family: var(--c-display); font-style: italic; font-size: 18px; color: var(--c-ink); }
.couture-footer--colophon .col-nav { padding: 28px 0; font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink); }
.couture-footer--colophon .col-nav a { color: var(--c-ink); text-decoration: none; }
.couture-footer--colophon .col-nav a:hover { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.couture-footer--colophon .col-foot { display:flex; justify-content:space-between; padding-top: 16px; border-top: 1px solid var(--c-line); font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
/* 6. FIELD STAMP — expedition stamp */
.couture-footer--stamp { background: var(--c-ink); color: var(--c-paper); padding: 60px var(--c-gutter) 28px; border-top: 8px double var(--c-accent-3); }
.couture-footer--stamp .stamp-head { text-align: center; margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px dashed rgba(244,234,217,.2); }
.couture-footer--stamp .stamp-mark { font-size: clamp(48px, 8vw, 88px); color: var(--c-accent-3); line-height: 1; margin-bottom: 14px; }
.couture-footer--stamp .stamp-title { font-family: var(--c-display); font-style: italic; font-size: clamp(40px, 6vw, 72px); font-weight: 300; line-height: 1; }
.couture-footer--stamp .stamp-sub { font-family: var(--c-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-paper-2); margin-top: 8px; }
.couture-footer--stamp .stamp-cols { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 36px; padding-bottom: 32px; border-bottom: 1px dashed rgba(244,234,217,.2); }
.couture-footer--stamp .stamp-cols h4 { font-family: var(--c-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent-3); margin: 0 0 16px; font-weight: 500; }
.couture-footer--stamp .stamp-cols ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.couture-footer--stamp .stamp-cols a { color: var(--c-paper); text-decoration: none; font-family: var(--c-display); font-style: italic; font-size: 16px; }
.couture-footer--stamp .stamp-cols a:hover { color: var(--c-accent-3); }
.couture-footer--stamp .stamp-cols p { font-family: var(--c-body); font-size: 14px; color: var(--c-paper-2); line-height: 1.6; margin: 0 0 8px; }
.couture-footer--stamp .stamp-date { font-family: var(--c-mono); font-size: 10px; letter-spacing: .12em; color: var(--c-muted); margin-left: 6px; }
.couture-footer--stamp .stamp-foot { display:flex; justify-content:space-between; padding-top: 18px; font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; color: var(--c-paper-2); flex-wrap: wrap; gap: 14px; }
/* 7. Storyteller Warm — small intimate two-column footer (V4.3 polish) */
.couture-footer--storyteller { padding: clamp(56px, 7vw, 96px) var(--c-gutter); background: var(--c-paper-2); border-top: 1px solid var(--c-line); }
.couture-footer--storyteller .storyteller-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; max-width: 1240px; margin: 0 auto 40px; }
.couture-footer--storyteller .storyteller-mark { margin-bottom: 18px; }
.couture-footer--storyteller .storyteller-statement { font-family: var(--c-display); font-style: italic; font-size: clamp(20px, 2vw, 28px); line-height: 1.4; color: var(--c-ink); max-width: 38ch; margin: 0 0 32px; }
.couture-footer--storyteller .storyteller-newsletter label { display: block; font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 12px; }
.couture-footer--storyteller .storyteller-newsletter-row { display: flex; gap: 0; max-width: 420px; }
.couture-footer--storyteller .storyteller-newsletter input { flex: 1; padding: 14px 16px; border: 1px solid var(--c-line); background: var(--c-paper); font-family: var(--c-body); font-size: 14px; }
.couture-footer--storyteller .storyteller-newsletter button { padding: 14px 20px; background: var(--c-ink); color: var(--c-paper); border: none; font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.couture-footer--storyteller .storyteller-right { display: flex; flex-direction: column; gap: 18px; }
.couture-footer--storyteller .storyteller-line { margin: 0; padding: 14px 0; border-top: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 4px; }
.couture-footer--storyteller .storyteller-line strong { font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.couture-footer--storyteller .storyteller-line a, .couture-footer--storyteller .storyteller-line span { font-family: var(--c-display); font-size: 17px; color: var(--c-ink); text-decoration: none; }
.couture-footer--storyteller .storyteller-line a:hover { color: var(--c-accent); }
.couture-footer--storyteller .storyteller-nav { display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 24px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); max-width: 1240px; margin: 0 auto 18px; font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.couture-footer--storyteller .storyteller-nav a { color: var(--c-ink); text-decoration: none; }
.couture-footer--storyteller .storyteller-nav a:hover { color: var(--c-accent); }
.couture-footer--storyteller .storyteller-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; max-width: 1240px; margin: 0 auto; font-family: var(--c-mono); font-size: 10px; letter-spacing: .12em; color: var(--c-muted); }
/* qa-attribution — handoff item N5: city-as-attribution moved out of the
"In conversation with X." headline into a small line under the dialogue. */
.couture-story-interview .qa-attrib { font-family: var(--c-display); font-style: italic; font-size: 14px; color: var(--c-muted); text-align: right; margin: 24px 0 0; }
@media (max-width: 800px) {
.couture-footer--grand .grand-grid,
.couture-footer--atelier .atl-row,
.couture-footer--colophon .col-grid,
.couture-footer--stamp .stamp-cols,
.couture-footer--storyteller .storyteller-grid { grid-template-columns: 1fr; }
.couture-footer--loud .loud-line { padding-left: 0 !important; }
}
/* motion — stagger reveal */
.couture-reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
.couture-reveal.in { opacity: 1; transform: translateY(0); }
.couture-reveal.d1 { transition-delay: .08s; }
.couture-reveal.d2 { transition-delay: .16s; }
.couture-reveal.d3 { transition-delay: .24s; }
.couture-reveal.d4 { transition-delay: .32s; }
/* ============================================================
STRUCTURAL VARIANTS — applied when the archetype swaps a section
============================================================ */
/* --- hero: magazine cover ------------------------------------ */
.couture-hero--cover { padding: 40px var(--c-gutter) clamp(40px, 6vw, 80px); }
.couture-hero--cover .cover-flags { display:flex; gap:28px; padding-bottom:18px; border-bottom: 2px solid var(--c-ink); font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink); }
.couture-hero--cover .cover-flags b { color: var(--c-accent); margin-right:6px; }
.couture-hero--cover .cover-masthead { font-family: var(--c-display); font-weight: 300; font-size: clamp(72px, 14vw, 220px); line-height: 0.9; letter-spacing: -0.04em; margin: 24px 0 32px; }
.couture-hero--cover .cover-art { position: relative; aspect-ratio: 4/5; max-height: 78vh; overflow: hidden; background: var(--c-paper-2); border: 1px solid var(--c-line); }
.couture-hero--cover .cover-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.1); clip-path: polygon(0 6%, 100% 0, 98% 100%, 2% 96%); }
.couture-hero--cover .cover-overprint { position: absolute; left: 6%; bottom: 8%; max-width: 84%; margin: 0; color: var(--c-paper); font-family: var(--c-display); font-style: italic; font-weight: 300; font-size: clamp(44px, 8vw, 128px); line-height: 0.98; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.couture-hero--cover .cover-lede { position: absolute; right: 6%; top: 6%; max-width: 32ch; margin: 0; color: var(--c-paper); font-family: var(--c-body); font-size: 15px; line-height: 1.5; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.couture-hero--cover .cover-barcode { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-line); display: flex; justify-content: space-between; font-family: var(--c-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
/* --- hero: vertical type ------------------------------------- */
.couture-hero--vertical { display: grid; grid-template-columns: minmax(80px, 12vw) 1fr; gap: clamp(32px, 4vw, 64px); min-height: 70vh; padding: clamp(60px, 9vw, 140px) var(--c-gutter); }
.couture-hero--vertical .vert-head { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; font-family: var(--c-display); font-weight: 300; font-size: clamp(56px, 9vw, 140px); line-height: 0.92; letter-spacing: -0.02em; }
.couture-hero--vertical .vert-body { display: flex; flex-direction: column; gap: 28px; max-width: 60ch; padding-top: clamp(24px, 4vw, 80px); }
.couture-hero--vertical .vert-body p { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.55; max-width: 52ch; }
.couture-hero--vertical .vert-body figure { margin: 32px 0 0; aspect-ratio: 16/10; overflow: hidden; border: 1px solid var(--c-line); }
.couture-hero--vertical .vert-body figure img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.1); clip-path: polygon(0 6%, 100% 0, 98% 100%, 2% 96%); }
/* --- hero: manifesto text ------------------------------------ */
.couture-hero--manifesto { padding: clamp(80px, 14vw, 200px) var(--c-gutter); max-width: 1200px; }
.couture-hero--manifesto h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(48px, 7vw, 112px); line-height: 1.02; letter-spacing: -0.02em; margin: 16px 0 48px; }
.couture-hero--manifesto .manifest-lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 36px); counter-reset: ml; }
.couture-hero--manifesto .manifest-lines li { counter-increment: ml; font-family: var(--c-display); font-size: clamp(24px, 3vw, 44px); line-height: 1.25; font-style: italic; padding-left: 72px; position: relative; }
.couture-hero--manifesto .manifest-lines li::before { content: counter(ml, decimal-leading-zero); position: absolute; left: 0; top: .3em; font-family: var(--c-mono); font-style: normal; font-size: 12px; letter-spacing: .1em; color: var(--c-accent); }
/* --- story: magazine ----------------------------------------- */
.couture-story-magazine .mag-grid { display:grid; grid-template-columns: 1.35fr 1fr .8fr; gap: clamp(28px, 4vw, 80px); align-items:start; padding: var(--c-rhythm) 0 0; border-top: 2px solid var(--c-ink); }
.couture-story-magazine .mag-body p { font-size: 17px; line-height: 1.65; margin: 0 0 1.25em; }
.couture-story-magazine .mag-body p.dropcap { font-size: 18px; line-height: 1.6; }
.couture-story-magazine .mag-body p.dropcap::first-letter { font-family: var(--c-display); font-weight: 400; font-size: 5.4em; line-height: .85; float: left; margin: 8px 14px 0 -4px; color: var(--c-accent-2); }
.couture-story-magazine .mag-pull blockquote { margin: 0; font-family: var(--c-display); font-style: italic; font-weight: 300; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.2; color: var(--c-ink); border-left: 3px solid var(--c-accent); padding: 6px 0 6px 22px; }
.couture-story-magazine .mag-pull cite { display: block; margin-top: 20px; font-family: var(--c-mono); font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.couture-story-magazine .mag-credits { border-top: 1px solid var(--c-line); padding-top: 14px; }
.couture-story-magazine .mag-credits .num { font-family: var(--c-mono); font-size: 11px; letter-spacing:.12em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 18px; }
.couture-story-magazine .mag-credits > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-family: var(--c-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 10px 0; border-bottom: 1px dashed var(--c-line); }
.couture-story-magazine .mag-credits > div span:last-child { color: var(--c-ink); text-transform: none; letter-spacing: 0; }
/* --- story: interview ---------------------------------------- */
.couture-story-interview .qa { margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(28px, 3vw, 48px); max-width: 80ch; }
.couture-story-interview .qa > div { padding-bottom: 32px; border-bottom: 1px solid var(--c-line); }
.couture-story-interview .qa dt { font-family: var(--c-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 16px; position: relative; padding-left: 34px; }
.couture-story-interview .qa dt::before { content: "Q"; position: absolute; left: 0; top: -2px; width: 22px; height: 22px; display: grid; place-items: center; background: var(--c-accent); color: var(--c-paper); font-size: 11px; border-radius: 50%; }
.couture-story-interview .qa dd { margin: 0; font-family: var(--c-display); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.35; font-style: italic; font-weight: 300; padding-left: 34px; position: relative; }
.couture-story-interview .qa dd::before { content: "A"; position: absolute; left: 0; top: .3em; font-family: var(--c-mono); font-style: normal; font-size: 12px; letter-spacing: .1em; color: var(--c-ink-soft); }
/* --- story: timeline ----------------------------------------- */
.couture-story-timeline .timeline { list-style: none; margin: 0; padding: 48px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; counter-reset: tl; position: relative; }
.couture-story-timeline .timeline::before { content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 2px; background: var(--c-ink); }
.couture-story-timeline .timeline li { position: relative; padding: 32px 18px 0 0; border-right: 1px dashed var(--c-line); }
.couture-story-timeline .timeline li:last-child { border-right: none; }
.couture-story-timeline .timeline li::before { content: ""; position: absolute; top: 4px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--c-paper); border: 2px solid var(--c-accent); }
.couture-story-timeline .timeline time { font-family: var(--c-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); display: block; margin-bottom: 10px; }
.couture-story-timeline .timeline strong { display: block; font-family: var(--c-display); font-size: clamp(22px, 2.2vw, 30px); font-style: italic; font-weight: 400; line-height: 1.15; margin-bottom: 8px; }
.couture-story-timeline .timeline p { font-size: 14px; color: var(--c-ink-soft); line-height: 1.55; max-width: 26ch; }
/* --- products: lookbook -------------------------------------- */
.couture-lookbook .lookbook-stack { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(20px, 2.4vw, 40px); align-items: start; }
.couture-lookbook .lb { position: relative; margin: 0; overflow: hidden; background: var(--c-paper-2); }
.couture-lookbook .lb-big { grid-column: span 4; aspect-ratio: 4/5; }
.couture-lookbook .lb-small { grid-column: span 2; aspect-ratio: 3/4; margin-top: 64px; }
.couture-lookbook .lb:nth-child(3) { transform: translateY(-36px); }
.couture-lookbook .lb:nth-child(5) { transform: translateY(24px); }
.couture-lookbook .lb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.2,.8,.2,1); filter: contrast(1.1); clip-path: polygon(0 6%, 100% 0, 98% 100%, 2% 96%); }
.couture-lookbook .lb:hover img { transform: scale(1.04); }
.couture-lookbook .lb figcaption { position: absolute; left: 18px; bottom: 18px; right: 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--c-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-paper); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.couture-lookbook .lb-name { font-family: var(--c-display); font-style: italic; font-size: 18px; letter-spacing: 0; text-transform: none; }
.couture-lookbook .lb-price { font-weight: 500; }
/* --- products: index table ----------------------------------- */
.couture-index .couture-index-table { width: 100%; border-collapse: collapse; font-family: var(--c-mono); font-size: 13px; }
.couture-index .couture-index-table th { text-align: left; padding: 18px 14px; border-bottom: 2px solid var(--c-ink); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; }
.couture-index .couture-index-table td { padding: 22px 14px; border-bottom: 1px solid var(--c-line); vertical-align: top; line-height: 1.5; }
.couture-index .couture-index-table td:first-child { color: var(--c-muted); width: 64px; }
.couture-index .couture-index-table td strong { font-family: var(--c-display); font-weight: 400; font-style: italic; font-size: 20px; letter-spacing: 0; display: block; margin-bottom: 4px; text-transform: none; }
.couture-index .couture-index-table tr:hover { background: var(--c-paper-2); }
/* --- products: carousel shelf -------------------------------- */
.couture-shelf .shelf-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 320px); gap: 28px; overflow-x: auto; padding: 0 0 32px; scroll-snap-type: x mandatory; scroll-padding: var(--c-gutter); -webkit-overflow-scrolling: touch; }
.couture-shelf .shelf-rail::-webkit-scrollbar { height: 4px; }
.couture-shelf .shelf-rail::-webkit-scrollbar-thumb { background: var(--c-accent); }
.couture-shelf .shelf-card { scroll-snap-align: start; background: var(--c-paper-2); border: 1px solid var(--c-line); overflow: hidden; display: flex; flex-direction: column; }
.couture-shelf .shelf-card img { aspect-ratio: 3/4; width: 100%; object-fit: cover; display: block; filter: contrast(1.1); clip-path: polygon(0 6%, 100% 0, 98% 100%, 2% 96%); }
.couture-shelf .shelf-meta { padding: 22px 18px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.couture-shelf .shelf-meta h3 { font-family: var(--c-display); font-style: italic; font-weight: 500; font-size: 22px; }
.couture-shelf .shelf-origin { font-family: var(--c-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.couture-shelf .shelf-notes { font-size: 13px; color: var(--c-ink-soft); line-height: 1.5; margin: 6px 0; }
.couture-shelf .shelf-price { margin-top: auto; font-family: var(--c-display); font-weight: 500; font-size: 22px; }
/* --- process: diagram (radial) ------------------------------- */
.couture-process-diagram .diagram-ring { position: relative; max-width: 760px; margin: 0 auto; aspect-ratio: 1/1; display: grid; place-items: center; }
.couture-process-diagram .ring-hub { position: absolute; inset: 0; display: grid; place-items: center; }
.couture-process-diagram .ring-hub span { display: grid; place-items: center; width: 36%; aspect-ratio: 1; border-radius: 50%; background: var(--c-ink); color: var(--c-paper); font-family: var(--c-display); font-style: italic; text-align: center; padding: 18px; font-size: clamp(16px, 1.6vw, 24px); line-height: 1.2; }
.couture-process-diagram .diagram-ring::before { content: ""; position: absolute; inset: 12%; border: 1px dashed var(--c-line); border-radius: 50%; }
.couture-process-diagram .ring-node { position: absolute; width: 30%; text-align: center; background: var(--c-paper); padding: 14px; border-radius: var(--c-card-radius); box-shadow: var(--c-card-shadow); }
.couture-process-diagram .ring-node[data-i="1"] { top: 0; left: 50%; transform: translateX(-50%); }
.couture-process-diagram .ring-node[data-i="2"] { top: 28%; right: 0; }
.couture-process-diagram .ring-node[data-i="3"] { bottom: 28%; right: 0; }
.couture-process-diagram .ring-node[data-i="4"] { bottom: 0; left: 50%; transform: translateX(-50%); }
.couture-process-diagram .ring-node[data-i="5"] { bottom: 28%; left: 0; }
.couture-process-diagram .ring-node[data-i="6"] { top: 28%; left: 0; }
.couture-process-diagram .ring-no { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; color: var(--c-accent); }
.couture-process-diagram .ring-node h3 { font-family: var(--c-display); font-style: italic; font-weight: 400; font-size: 18px; margin: 6px 0 4px; }
.couture-process-diagram .ring-node p { font-size: 12px; line-height: 1.5; color: var(--c-ink-soft); margin: 0; }
/* --- process: checklist -------------------------------------- */
/* V4.7 — kinetic hero h1 sizing. The previous inline clamp of
clamp(80px, 22vw, 360px) produced absurd 80px+ type on iPhone SE
(320px wide → 22vw = 70.4px on the vw term, but 80px floor wins —
then on a 360px screen 22vw = 79.2px which feels like a billboard).
Now: tighter floor on small screens via media query. */
.couture-hero--kinetic-h1 { font-size: clamp(56px, 22vw, 360px); }
@media (max-width: 480px) {
.couture-hero--kinetic-h1 { font-size: clamp(48px, 16vw, 96px); line-height: .95; }
.couture-hero--kinetic .kinetic-subline { font-size: clamp(16px, 4.5vw, 22px) !important; }
}
/* V4.6 — meta-stack on hero (label/value pairs like "City / Phoenix",
"Discipline / Artisan"). Without these rules the label and value
stacked with no spacing or distinction (rendered as "CityPhoenix"
on chedralis live). Now: small mono uppercase label above big
display value, generous gap between pairs. */
.couture-hero .meta-stack { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px) clamp(28px, 4vw, 56px); margin-top: clamp(32px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--c-line); }
.couture-hero .meta-stack > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.couture-hero .meta-stack > div > span:first-child { font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); line-height: 1; }
.couture-hero .meta-stack > div > span:last-child { font-family: var(--c-display); font-style: italic; font-size: clamp(20px, 2vw, 28px); line-height: 1.1; color: var(--c-ink); }
@media (max-width: 700px) { .couture-hero .meta-stack { gap: 18px 28px; } }
.couture-checklist .spec-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; border-top: 2px solid var(--c-ink); }
.couture-checklist .spec-list li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: 22px 18px; border-bottom: 1px solid var(--c-line); border-right: 1px solid var(--c-line); align-items: start; }
.couture-checklist .spec-list li:nth-child(2n) { border-right: none; }
.couture-checklist .spec-list .tick { width: 24px; height: 24px; border-radius: 50%; background: var(--c-accent); color: var(--c-paper); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.couture-checklist .spec-list li strong { display: block; font-family: var(--c-display); font-weight: 500; font-size: 18px; margin-bottom: 4px; font-style: italic; }
.couture-checklist .spec-list li span { display: block; font-size: 14px; line-height: 1.55; color: var(--c-ink-soft); }
/* --- manifesto ------------------------------------------------ */
.couture-manifesto { text-align: left; max-width: 960px; padding: var(--c-rhythm) var(--c-gutter); }
.couture-manifesto .manifesto-mark { font-family: var(--c-display); font-weight: 400; font-size: clamp(80px, 12vw, 180px); line-height: 1; color: var(--c-accent); margin-bottom: 8px; }
.couture-manifesto p { font-family: var(--c-display); font-weight: 300; font-size: clamp(32px, 5.4vw, 80px); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 .4em; }
.couture-manifesto p:nth-child(even) { font-style: italic; color: var(--c-accent-2); }
.couture-manifesto cite { display: block; margin-top: 48px; font-family: var(--c-mono); font-style: normal; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
/* --- stat wall ------------------------------------------------ */
.couture-stats .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border-top: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink); }
.couture-stats .stat { padding: clamp(40px, 6vw, 72px) 28px; border-right: 1px solid var(--c-line); }
.couture-stats .stat:last-child { border-right: none; }
.couture-stats .stat strong { display: block; font-family: var(--c-display); font-weight: 300; font-size: clamp(56px, 9vw, 128px); line-height: 0.9; letter-spacing: -0.03em; color: var(--c-accent); margin-bottom: 14px; }
.couture-stats .stat span { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-soft); }
/* --- press wall ----------------------------------------------- */
.couture-press .press-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.couture-press figure { margin: 0; padding: 28px; background: var(--c-paper-2); border: 1px solid var(--c-line); border-radius: var(--c-card-radius); box-shadow: var(--c-card-shadow); display: flex; flex-direction: column; gap: 18px; }
.couture-press blockquote { margin: 0; font-family: var(--c-display); font-style: italic; font-weight: 400; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.25; color: var(--c-ink); }
.couture-press figcaption { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); }
/* --- index listing -------------------------------------------- */
.couture-idx .idx-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--c-ink); }
.couture-idx .idx-list li { display: grid; grid-template-columns: 80px 1fr auto; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--c-line); font-family: var(--c-display); font-size: clamp(22px, 2.6vw, 36px); font-style: italic; font-weight: 400; align-items: baseline; }
.couture-idx .idx-list li:hover { background: var(--c-paper-2); }
.couture-idx .idx-list li > span:first-child { font-family: var(--c-mono); font-style: normal; font-size: 11px; letter-spacing: .12em; color: var(--c-accent); }
.couture-idx .idx-note { font-family: var(--c-mono); font-style: normal; font-size: 11px; letter-spacing: .08em; color: var(--c-muted); }
/* motion — stagger reveal */
.couture-reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
.couture-reveal.in { opacity: 1; transform: translateY(0); }
.couture-reveal.d1 { transition-delay: .08s; }
.couture-reveal.d2 { transition-delay: .16s; }
.couture-reveal.d3 { transition-delay: .24s; }
.couture-reveal.d4 { transition-delay: .32s; }
/* ============================================================
NAVIGATION MODELS
============================================================ */
/* top-bar (default) */
.couture-nav-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--c-gutter); background: var(--c-paper); border-bottom: 1px solid var(--c-line); backdrop-filter: saturate(1.2) blur(10px); }
.couture-nav-topbar .brand a { font-family: var(--c-display); font-style: italic; font-weight: 400; font-size: 22px; color: var(--c-ink); text-decoration: none; letter-spacing: -0.01em; }
.couture-nav-topbar nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; font-family: var(--c-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.couture-nav-topbar nav a { color: var(--c-ink); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .2s; }
.couture-nav-topbar nav a:hover { border-color: var(--c-accent); }
.couture-nav-topbar .actions .cart { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--c-ink); padding: 8px 14px; text-decoration: none; color: var(--c-ink); }
/* side-rail */
.couture-nav-siderail { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; padding: 32px 24px; background: var(--c-paper); border-right: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 40px; z-index: 40; }
.couture-nav-siderail .rail-brand a { font-family: var(--c-display); font-weight: 400; font-style: italic; font-size: 24px; letter-spacing: -0.01em; color: var(--c-ink); text-decoration: none; line-height: 1.05; display: block; }
.couture-nav-siderail .rail-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; }
.couture-nav-siderail .rail-menu a { color: var(--c-ink); text-decoration: none; padding-left: 16px; position: relative; }
.couture-nav-siderail .rail-menu a::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--c-accent); border-radius: 50%; opacity: 0; transition: opacity .2s; }
.couture-nav-siderail .rail-menu a:hover::before { opacity: 1; }
.couture-nav-siderail .rail-footer { margin-top: auto; }
.couture-nav-siderail .rail-cta { font-family: var(--c-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-paper); background: var(--c-ink); padding: 14px 18px; text-decoration: none; display: block; text-align: center; }
/* Site-wide offset when the rail is present */
.couture-nav-siderail ~ .couture-spatial,
body:has(.couture-nav-siderail) .couture-spatial { margin-left: 240px; }
body:has(.couture-nav-siderail) .couture-footer { margin-left: 240px; }
/* dot-index */
.couture-nav-dotindex { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--c-gutter); background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
.couture-nav-dotindex .dot-brand a { font-family: var(--c-display); font-style: italic; font-size: 22px; color: var(--c-ink); text-decoration: none; }
.couture-nav-dotindex .dot-menu { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; display: flex; gap: 20px; }
.couture-nav-dotindex .dot-menu a { color: var(--c-ink); text-decoration: none; }
.couture-nav-dotindex .dot-rail { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 12px 8px; background: var(--c-paper); border: 1px solid var(--c-line); z-index: 60; }
.couture-nav-dotindex .dot-rail a { display: block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--c-ink); font-size: 0; color: transparent; position: relative; }
.couture-nav-dotindex .dot-rail a:hover { background: var(--c-accent); border-color: var(--c-accent); }
.couture-nav-dotindex .dot-rail a::after { content: attr(title); position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 10px; font-family: var(--c-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink); white-space: nowrap; background: var(--c-paper); padding: 4px 8px; border: 1px solid var(--c-line); opacity: 0; transition: opacity .2s; pointer-events: none; }
.couture-nav-dotindex .dot-rail a:hover::after { opacity: 1; }
/* drawer */
.couture-nav-drawer { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 16px var(--c-gutter); background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
.couture-nav-drawer .drawer-brand a { font-family: var(--c-display); font-style: italic; font-size: 24px; color: var(--c-ink); text-decoration: none; }
.couture-nav-drawer .drawer-trigger { font-family: var(--c-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; background: transparent; border: 1px solid var(--c-ink); padding: 10px 16px; cursor: pointer; color: var(--c-ink); }
.couture-nav-drawer .drawer-cart { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink); text-decoration: none; }
/* ============================================================
CART CHIP placements (handoff item N6)
Cart used to live top-right on every nav variant. Now varies:
- inline → top-right pill (top-bar, split-corner)
- floating → bottom-right floating button (drawer, toc, dot-index)
- rail → small link in side-rail footer
Some archetypes (by-appointment, made-to-order, wholesale) skip
the cart chip entirely — driven from nav.js renderCartChip().
============================================================ */
.couture-cart-chip { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.couture-cart-chip--inline { color: var(--c-ink); border: 1px solid var(--c-ink); padding: 8px 14px; transition: background .2s, color .2s; }
.couture-cart-chip--inline:hover { background: var(--c-ink); color: var(--c-paper); }
.couture-cart-chip--rail { display: block; padding: 10px 14px; margin-top: 12px; border: 1px solid var(--c-line); color: var(--c-ink); text-align: center; font-size: 10px; }
.couture-cart-chip--rail:hover { border-color: var(--c-ink); }
/* V4.6 — bottom positioning respects iPhone home indicator + bottom-safe
area so the chip never overlaps the indicator bar on notched devices. */
.couture-cart-chip--floating { position: fixed; right: clamp(20px, 3vw, 36px); bottom: calc(clamp(20px, 3vw, 36px) + env(safe-area-inset-bottom, 0px)); z-index: 60; padding: 14px 22px; background: var(--c-ink); color: var(--c-paper); box-shadow: 0 8px 28px rgba(0,0,0,.18); border: 1px solid var(--c-ink); transition: transform .15s, box-shadow .2s; }
.couture-cart-chip--floating:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,.22); background: var(--c-accent); border-color: var(--c-accent); }
@media (max-width: 700px) {
.couture-cart-chip--floating { padding: 12px 18px; font-size: 10px; right: 16px; bottom: 16px; }
}
.couture-nav-drawer .drawer-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 85vw); background: var(--c-ink); color: var(--c-paper); padding: 80px 40px 40px; transform: translateX(100%); transition: transform .5s cubic-bezier(.2,.8,.2,1); z-index: 100; overflow-y: auto; }
.couture-nav-drawer .drawer-panel[aria-hidden="false"], .couture-nav-drawer .drawer-panel:not([hidden]) { transform: translateX(0); }
.couture-nav-drawer .drawer-panel ul { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.couture-nav-drawer .drawer-panel a { color: var(--c-paper); text-decoration: none; font-family: var(--c-display); font-size: 36px; font-style: italic; letter-spacing: -.01em; }
.couture-nav-drawer .drawer-panel a:hover { color: var(--c-accent-3); }
.couture-nav-drawer .drawer-close { font-family: var(--c-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; opacity: .7; }
/* toc (table of contents header) */
.couture-nav-toc { padding: 32px var(--c-gutter) 0; border-bottom: 2px solid var(--c-ink); background: var(--c-paper); }
.couture-nav-toc .toc-top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 20px; border-bottom: 1px solid var(--c-line); }
.couture-nav-toc .toc-brand a { font-family: var(--c-display); font-weight: 300; font-size: clamp(36px, 5vw, 64px); line-height: 1; color: var(--c-ink); text-decoration: none; letter-spacing: -.03em; }
.couture-nav-toc .toc-menu { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.couture-nav-toc .toc-menu a { color: var(--c-ink); text-decoration: none; }
.couture-nav-toc .toc-contents { padding: 28px 0 40px; }
.couture-nav-toc .toc-contents h2 { font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin: 0 0 16px; font-weight: 500; }
.couture-nav-toc .toc-list { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 40px; column-rule: 1px dashed var(--c-line); }
.couture-nav-toc .toc-list li { break-inside: avoid; display: grid; grid-template-columns: 36px 1fr auto; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--c-line); font-family: var(--c-body); font-size: 15px; }
.couture-nav-toc .toc-list .toc-n { font-family: var(--c-mono); font-size: 11px; letter-spacing: .1em; color: var(--c-accent); }
.couture-nav-toc .toc-list a { color: var(--c-ink); text-decoration: none; font-style: italic; }
.couture-nav-toc .toc-list .toc-dots { border-bottom: 1px dotted var(--c-muted); min-width: 40px; }
/* split-corner */
.couture-nav-split { position: fixed; top: 28px; left: 28px; z-index: 50; background: var(--c-paper); padding: 18px; border: 1px solid var(--c-line); max-width: 220px; }
.couture-nav-split .split-brand a { font-family: var(--c-display); font-weight: 300; font-style: italic; font-size: 22px; color: var(--c-ink); text-decoration: none; display: block; margin-bottom: 14px; letter-spacing: -.01em; }
.couture-nav-split .split-menu ul { list-style: none; margin: 0; padding: 0; }
.couture-nav-split .split-menu li { padding: 4px 0; border-bottom: 1px solid var(--c-line); font-family: var(--c-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.couture-nav-split .split-menu li:last-child { border-bottom: none; }
.couture-nav-split .split-menu a { color: var(--c-ink); text-decoration: none; display: block; }
body:has(.couture-nav-split) .couture-spatial { padding-left: 260px; }
/* ============================================================
SPATIAL WRAPPERS
============================================================ */
.couture-spatial-vertical { }
/* V4.6 — 100vh is broken on mobile Safari (the address bar in/out
makes the viewport jump). 100dvh (dynamic viewport height) tracks
the visible area; the 100vh fallback exists for older browsers
that don't support dvh. */
.couture-spatial-chapters .couture-chapter { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 0; position: relative; }
.couture-spatial-chapters .couture-chapter::before { content: attr(data-ch); position: absolute; top: 36px; right: 36px; font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; color: var(--c-accent); }
.couture-spatial-chapters .couture-chapter + .couture-chapter { border-top: 1px solid var(--c-line); }
.couture-spatial-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100dvh; }
.couture-spatial-split .split-left { padding: 60px var(--c-gutter); border-right: 1px solid var(--c-line); }
.couture-spatial-split .split-left .split-section + .split-section { margin-top: 96px; }
.couture-spatial-split .split-right { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--c-paper-2); }
.couture-spatial-split .split-well { position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 40%, var(--c-accent) 0%, transparent 40%), radial-gradient(circle at 70% 70%, var(--c-accent-2) 0%, transparent 45%); opacity: .4; }
.couture-spatial-stage { height: 100vh; height: 100dvh; overflow: hidden; }
.couture-spatial-stage .stage-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.couture-spatial-stage .stage-panel { flex: 0 0 100vw; height: 100%; overflow-y: auto; scroll-snap-align: start; padding: 40px var(--c-gutter); border-right: 1px solid var(--c-line); }
.couture-spatial-canvas .canvas-wall { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(180px, auto); gap: 16px; padding: var(--c-gutter); }
.couture-spatial-canvas .canvas-tile { padding: 24px; border: 1px solid var(--c-line); background: var(--c-paper-2); overflow: hidden; position: relative; }
.couture-spatial-canvas .canvas-tile:nth-child(1) { grid-column: span 8; grid-row: span 2; }
.couture-spatial-canvas .canvas-tile:nth-child(2) { grid-column: span 4; grid-row: span 2; background: var(--c-ink); color: var(--c-paper); }
.couture-spatial-canvas .canvas-tile:nth-child(3) { grid-column: span 5; grid-row: span 1; transform: rotate(-1deg); }
.couture-spatial-canvas .canvas-tile:nth-child(4) { grid-column: span 7; grid-row: span 1; }
.couture-spatial-canvas .canvas-tile:nth-child(5) { grid-column: span 4; background: var(--c-accent-3); }
.couture-spatial-canvas .canvas-tile:nth-child(6) { grid-column: span 8; }
.couture-spatial-canvas .canvas-tile:nth-child(7) { grid-column: span 6; transform: rotate(.5deg); }
.couture-spatial-canvas .canvas-tile:nth-child(n+8) { grid-column: span 6; }
/* ============================================================
PAGE ANATOMIES — headers & common frames
============================================================ */
.couture-page { padding: clamp(32px, 5vw, 80px) var(--c-gutter) clamp(80px, 12vw, 160px); max-width: 1280px; margin: 0 auto; }
.couture-shop-head, .couture-journal-head, .couture-arch-head { margin-bottom: clamp(36px, 5vw, 64px); }
.couture-shop-head .num, .couture-journal-head .num, .couture-arch-head .num { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); padding-top: 12px; border-top: 2px solid var(--c-accent); display: inline-block; margin-bottom: 16px; padding-right: 18px; }
.couture-shop-head h1, .couture-journal-head h1, .couture-arch-head h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(40px, 6vw, 96px); line-height: .95; letter-spacing: -.02em; margin: 0 0 18px; }
.couture-shop-head .lede, .couture-journal-head .lede, .couture-arch-head .lede { max-width: 56ch; color: var(--c-ink-soft); font-size: clamp(16px, 1.4vw, 20px); }
/* shop layout with facets */
.couture-shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: clamp(24px, 3vw, 48px); }
.couture-shop-facets { font-family: var(--c-body); }
.couture-shop-facets section { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px dashed var(--c-line); }
.couture-shop-facets h3 { font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 14px; font-weight: 500; }
.couture-shop-facets ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.couture-shop-facets a { color: var(--c-ink); text-decoration: none; font-size: 14px; }
.couture-shop-facets a:hover { color: var(--c-accent-2); }
.couture-shop-facets label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--c-ink-soft); cursor: pointer; }
.couture-shop-facets select { width: 100%; padding: 10px 12px; border: 1px solid var(--c-line); font-family: var(--c-body); font-size: 14px; background: var(--c-paper); }
.couture-cat-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(24px, 3vw, 40px); }
.couture-cat-chips a { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; }
.couture-cat-chips a:hover { background: var(--c-ink); color: var(--c-paper); }
.couture-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(20px, 2vw, 32px); }
.couture-cat-grid .cat-card a { text-decoration: none; color: inherit; }
.couture-cat-grid .cat-img { aspect-ratio: 4/5; overflow: hidden; background: var(--c-paper-2); border: 1px solid var(--c-line); margin-bottom: 14px; }
.couture-cat-grid .cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); filter: contrast(1.1); clip-path: polygon(0 6%, 100% 0, 98% 100%, 2% 96%); }
.couture-cat-grid .cat-card:hover .cat-img img { transform: scale(1.04); }
.couture-cat-grid h3 { font-family: var(--c-display); font-size: 20px; font-style: italic; font-weight: 500; margin: 0 0 4px; }
.couture-cat-grid .origin { font-family: var(--c-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 6px; }
.couture-cat-grid .price { font-family: var(--c-display); font-weight: 500; font-size: 18px; }
/* gallery wall */
.couture-gallerywall { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 120px; gap: 12px; }
.couture-gallerywall .gw-tile { overflow: hidden; position: relative; display: block; text-decoration: none; background: var(--c-paper-2); }
.couture-gallerywall .gw-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.couture-gallerywall .gw-tile:hover img { transform: scale(1.05); }
.couture-gallerywall .gw-square { grid-column: span 3; grid-row: span 2; }
.couture-gallerywall .gw-wide { grid-column: span 6; grid-row: span 2; }
.couture-gallerywall .gw-tall { grid-column: span 3; grid-row: span 3; }
.couture-gallerywall .gw-label { position: absolute; left: 14px; bottom: 14px; right: 14px; display: flex; justify-content: space-between; color: var(--c-paper); font-family: var(--c-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.couture-gallerywall .gw-label em { font-style: italic; font-family: var(--c-display); font-size: 16px; letter-spacing: 0; text-transform: none; }
/* product pages */
.couture-product-lede { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 4vw, 64px); margin-bottom: clamp(48px, 6vw, 96px); align-items: start; }
.couture-product-lede .pr-img { aspect-ratio: 4/5; overflow: hidden; background: var(--c-paper-2); border: 1px solid var(--c-line); }
.couture-product-lede .pr-img img { width: 100%; height: 100%; object-fit: cover; }
.couture-product-lede .eyebrow { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 16px; }
.couture-product-lede h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(36px, 5vw, 80px); line-height: .95; margin: 0 0 18px; letter-spacing: -.02em; }
.couture-product-lede .short { font-size: clamp(15px, 1.3vw, 18px); color: var(--c-ink-soft); max-width: 48ch; margin-bottom: 24px; }
.couture-product-lede .price { font-family: var(--c-display); font-weight: 500; font-size: 28px; margin-bottom: 24px; }
.couture-product-lede .cta, .couture-product-editorial .cta, .couture-product-tech .cta, .couture-product-conv .cta, .couture-product-lookhero .cta, .couture-appointment-cta .cta, .couture-repair .cta, .couture-press-kit .cta, .couture-product-atelier .cta { display: inline-block; padding: 14px 22px; background: var(--c-ink); color: var(--c-paper); border: none; font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.couture-product-lede .cta:hover { background: var(--c-accent); }
.couture-product-tabs { border-top: 1px solid var(--c-line); padding-top: 28px; margin-top: 64px; }
.couture-product-tabs nav { display: flex; gap: 4px; border-bottom: 1px solid var(--c-line); margin-bottom: 28px; }
.couture-product-tabs [role="tab"] { background: transparent; border: none; padding: 14px 18px; font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; color: var(--c-ink-soft); border-bottom: 2px solid transparent; }
.couture-product-tabs [role="tab"][aria-selected="true"] { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.couture-product-tabs [role="tabpanel"] { display: none; }
.couture-product-tabs [role="tabpanel"].active { display: block; }
.couture-product-tabs [role="tabpanel"] { padding: 10px 0 30px; font-size: 16px; color: var(--c-ink-soft); line-height: 1.7; }
.couture-spec { padding: 28px 0; }
.couture-spec h3 { font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 18px; font-weight: 500; }
.couture-spec dl { display: grid; grid-template-columns: 180px 1fr; gap: 6px 20px; }
.couture-spec.as-grid dl { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.couture-spec dl > div { display: contents; }
.couture-spec dt { font-family: var(--c-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); padding: 8px 0; border-top: 1px dashed var(--c-line); }
.couture-spec dd { margin: 0; padding: 8px 0; border-top: 1px dashed var(--c-line); font-family: var(--c-body); font-size: 14px; }
.couture-spec.dense dt, .couture-spec.dense dd { padding: 4px 0; font-size: 12px; }
/* V4.12 — In the box + Care sub-sections inside the Specs panel.
Renders inside `.couture-spec` after the dl. Visually distinct from
the spec rows so the operator can tell them apart at a glance. */
.couture-spec-inbox, .couture-spec-care { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.couture-spec-inbox h4, .couture-spec-care h4 { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 12px; font-weight: 500; }
.couture-spec-inbox ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.couture-spec-inbox li { font-family: var(--c-body); font-size: 14px; padding-left: 22px; position: relative; }
.couture-spec-inbox li::before { content: '·'; position: absolute; left: 8px; top: -4px; font-size: 22px; color: var(--c-accent); line-height: 1; }
.couture-spec-care p { font-family: var(--c-body); font-size: 14px; line-height: 1.65; margin: 0; color: var(--c-ink); }
.couture-related { margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--c-line); }
.couture-related h2 { font-family: var(--c-display); font-style: italic; font-weight: 300; font-size: clamp(28px, 3vw, 42px); margin: 0 0 28px; }
.couture-related .rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.couture-related .rel-card img { aspect-ratio: 4/5; width: 100%; object-fit: cover; display: block; background: var(--c-paper-2); }
.couture-related h4 { font-family: var(--c-display); font-weight: 500; font-style: italic; font-size: 18px; margin: 14px 0 4px; }
.couture-related h4 a { color: inherit; text-decoration: none; }
.couture-related .price { font-family: var(--c-display); font-weight: 500; font-size: 16px; }
/* product variants */
.couture-product-editorial-hero { text-align: center; margin-bottom: 60px; }
.couture-product-editorial-hero h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(40px, 7vw, 120px); line-height: .95; letter-spacing: -.02em; margin: 18px 0; }
.couture-product-editorial-hero .lede { max-width: 48ch; margin: 0 auto; font-size: clamp(16px, 1.4vw, 20px); color: var(--c-ink-soft); }
.couture-product-big-image { margin: 60px 0; aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--c-line); }
.couture-product-big-image img { width: 100%; height: 100%; object-fit: cover; }
.couture-product-longread { max-width: 64ch; margin: 0 auto 80px; font-size: 17px; line-height: 1.7; color: var(--c-ink-soft); }
.couture-product-longread p { margin: 0 0 1.1em; }
.couture-product-longread p:first-child::first-letter { font-family: var(--c-display); font-size: 5em; line-height: .85; float: left; margin: 8px 12px 0 -4px; color: var(--c-accent-2); }
.couture-product-buy { text-align: center; padding: 40px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); margin-bottom: 60px; }
.couture-product-buy .price { font-family: var(--c-display); font-weight: 300; font-size: 56px; margin-bottom: 20px; }
.couture-product-atelier { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.couture-product-atelier figure { margin: 0; aspect-ratio: 4/5; overflow: hidden; background: var(--c-paper-2); }
.couture-product-atelier figure img { width: 100%; height: 100%; object-fit: cover; }
.couture-product-atelier .eyebrow { font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 18px; }
.couture-product-atelier h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(40px, 5vw, 72px); line-height: 1; margin: 0 0 18px; letter-spacing: -.02em; }
.couture-product-atelier .atelier-spec { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin: 32px 0; font-family: var(--c-mono); font-size: 12px; }
.couture-product-atelier dt { letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); padding: 10px 0; border-top: 1px dashed var(--c-line); }
.couture-product-atelier dd { padding: 10px 0; border-top: 1px dashed var(--c-line); margin: 0; font-family: var(--c-body); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--c-ink); }
.couture-product-tech { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 60px; }
.couture-product-tech figure { margin: 0; aspect-ratio: 1/1; overflow: hidden; background: var(--c-ink); display: grid; place-items: center; }
.couture-product-tech figure img { width: 100%; height: 100%; object-fit: cover; }
.couture-product-tech h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(36px, 5vw, 64px); line-height: 1; margin: 18px 0; }
.couture-product-tech .price { font-family: var(--c-display); font-weight: 500; font-size: 32px; margin: 24px 0; }
.couture-product-firmware { padding: 32px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); margin-bottom: 60px; }
.couture-product-firmware h2 { font-family: var(--c-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 20px; font-weight: 500; }
.couture-product-firmware .fw-row { display: grid; grid-template-columns: 80px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--c-line); font-family: var(--c-mono); font-size: 12px; line-height: 1.5; }
.couture-product-conv { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 60px; align-items: center; }
.couture-product-conv figure { margin: 0; aspect-ratio: 4/5; overflow: hidden; background: var(--c-paper-2); border-radius: var(--c-card-radius); }
.couture-product-conv figure img { width: 100%; height: 100%; object-fit: cover; }
.couture-product-conv h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(36px, 5vw, 64px); margin: 0 0 24px; letter-spacing: -.02em; }
.couture-product-qa dl { display: flex; flex-direction: column; gap: 28px; max-width: 72ch; }
.couture-product-qa dt { font-family: var(--c-display); font-style: italic; font-size: 22px; margin-bottom: 8px; }
.couture-product-qa dd { margin: 0; font-size: 16px; line-height: 1.65; color: var(--c-ink-soft); padding-left: 28px; border-left: 2px solid var(--c-accent); }
.couture-product-lookhero { min-height: 80vh; background-size: cover; background-position: center; position: relative; padding: 60px var(--c-gutter); color: var(--c-paper); display: flex; align-items: flex-end; border-radius: var(--c-card-radius); overflow: hidden; }
.couture-product-lookhero .lookhero-meta { max-width: 48ch; }
.couture-product-lookhero .eyebrow { font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px; opacity: .9; }
.couture-product-lookhero h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(48px, 8vw, 120px); line-height: .95; margin: 0 0 24px; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.couture-product-lookhero .pair { display: flex; gap: 24px; align-items: center; }
.couture-product-lookhero .price { font-family: var(--c-display); font-weight: 500; font-size: 28px; }
/* journal */
.couture-journal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 3vw, 48px); }
.couture-journal-grid .jr-card img { aspect-ratio: 4/3; width: 100%; object-fit: cover; display: block; background: var(--c-paper-2); }
.couture-journal-grid .jr-card .num { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; color: var(--c-accent); margin: 14px 0 6px; }
.couture-journal-grid .jr-card h2 { font-family: var(--c-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; margin: 6px 0 10px; font-style: italic; }
.couture-journal-grid .jr-card h2 a { color: inherit; text-decoration: none; }
.couture-journal-grid .jr-card p { color: var(--c-ink-soft); font-size: 15px; line-height: 1.55; }
.couture-journal-grid .byline { font-family: var(--c-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin-top: 10px; }
.couture-issues-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.couture-issues-grid .iss-cover { text-decoration: none; color: inherit; display: block; }
.couture-issues-grid .iss-cover img { aspect-ratio: 3/4; width: 100%; object-fit: cover; background: var(--c-paper-2); box-shadow: var(--c-card-shadow); }
.couture-issues-grid .iss-meta { display: flex; flex-direction: column; margin-top: 16px; font-family: var(--c-mono); font-size: 11px; letter-spacing: .1em; }
.couture-issues-grid .iss-meta strong { font-size: 11px; color: var(--c-accent); margin-bottom: 6px; }
.couture-issues-grid .iss-meta span:not(.date) { font-family: var(--c-display); font-style: italic; font-size: 18px; letter-spacing: 0; color: var(--c-ink); text-transform: none; font-weight: 400; }
.couture-issues-grid .iss-meta .date { text-transform: uppercase; color: var(--c-muted); margin-top: 4px; }
/* articles */
.couture-article-essay { max-width: 680px; margin: 0 auto; }
.couture-article-essay header { text-align: center; margin-bottom: 48px; padding-bottom: 40px; border-bottom: 1px solid var(--c-line); }
.couture-article-essay .eyebrow { font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 18px; display: block; }
.couture-article-essay h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(36px, 5vw, 72px); line-height: 1.05; margin: 0 0 20px; letter-spacing: -.02em; }
.couture-article-essay .byline { font-family: var(--c-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.couture-article-essay figure.cover { margin: 0 calc(-1 * var(--c-gutter)) 48px; }
.couture-article-essay figure.cover img { width: 100%; display: block; }
.couture-article-essay .body p { font-size: 19px; line-height: 1.7; margin: 0 0 1.5em; font-family: var(--c-body); }
.couture-article-essay .body p:first-child::first-letter { font-family: var(--c-display); font-size: 5em; line-height: .85; float: left; margin: 8px 14px 0 -4px; color: var(--c-accent-2); }
.couture-article-essay .callout { margin: 40px 0; padding: 32px; border-left: 3px solid var(--c-accent); background: var(--c-paper-2); font-family: var(--c-display); font-style: italic; font-size: 24px; line-height: 1.3; }
.couture-article-essay .end-rule { text-align: center; font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--c-line); }
.couture-article-field { max-width: 900px; margin: 0 auto; }
.couture-article-field header { padding: 0 0 40px; border-bottom: 2px solid var(--c-ink); margin-bottom: 48px; }
.couture-article-field header h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(36px, 5vw, 72px); margin: 14px 0; line-height: 1; }
.couture-article-field .stop { display: grid; grid-template-columns: 48px 1fr; gap: 24px; margin-bottom: 72px; position: relative; }
.couture-article-field .stop-n { font-family: var(--c-mono); font-size: 12px; letter-spacing: .1em; color: var(--c-accent); padding-top: 8px; border-top: 2px solid var(--c-accent); height: 40px; }
.couture-article-field .stop figure { margin: 0 0 20px; }
.couture-article-field .stop figure img { width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover; }
.couture-article-field .stop figcaption { font-family: var(--c-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin-top: 8px; }
.couture-article-field .stop h2 { font-family: var(--c-display); font-style: italic; font-weight: 400; font-size: 32px; margin: 0 0 14px; }
.couture-article-field .stop p { font-size: 17px; line-height: 1.7; color: var(--c-ink-soft); }
.couture-article-release header { border-bottom: 2px solid var(--c-ink); padding-bottom: 28px; margin-bottom: 40px; }
.couture-article-release header h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(36px, 5vw, 64px); margin: 10px 0; }
.couture-article-release .body { font-family: var(--c-body); font-size: 16px; line-height: 1.7; color: var(--c-ink-soft); margin-bottom: 40px; max-width: 680px; }
.couture-article-manifesto { max-width: 920px; margin: 0 auto; text-align: left; padding: 80px 0; }
.couture-article-manifesto header { margin-bottom: 60px; }
.couture-article-manifesto header h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(48px, 8vw, 120px); line-height: .95; letter-spacing: -.02em; margin: 10px 0 0; }
.couture-article-manifesto .manifest-lines { list-style: none; padding: 0; margin: 0; counter-reset: ml; }
.couture-article-manifesto .manifest-lines li { counter-increment: ml; font-family: var(--c-display); font-weight: 300; font-size: clamp(28px, 4vw, 56px); line-height: 1.15; padding: 24px 0 24px 80px; border-top: 1px solid var(--c-line); position: relative; font-style: italic; }
.couture-article-manifesto .manifest-lines li::before { content: counter(ml, decimal-leading-zero); position: absolute; left: 0; top: 28px; font-family: var(--c-mono); font-style: normal; font-size: 12px; letter-spacing: .1em; color: var(--c-accent); }
.couture-article-manifesto .sign { margin-top: 48px; font-family: var(--c-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.couture-article-catalog { max-width: 1080px; margin: 0 auto; }
.couture-article-catalog .cat-head { padding-bottom: 32px; border-bottom: 2px solid var(--c-ink); margin-bottom: 40px; }
.couture-article-catalog .cat-head h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(36px, 5vw, 72px); margin: 12px 0; line-height: 1; }
.couture-article-catalog .body.two-col { columns: 2; column-gap: 48px; column-rule: 1px dashed var(--c-line); font-size: 16px; line-height: 1.7; color: var(--c-ink-soft); }
.couture-article-catalog .body.two-col p { margin: 0 0 1em; break-inside: avoid; }
@media (max-width: 800px) { .couture-article-catalog .body.two-col { columns: 1; } }
/* about pages */
.couture-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; padding: var(--c-rhythm) var(--c-gutter); }
.couture-team figure { margin: 0; }
.couture-team figure img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--c-paper-2); }
.couture-team figcaption { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; font-family: var(--c-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.couture-team figcaption strong { font-family: var(--c-display); font-size: 20px; font-style: italic; letter-spacing: 0; text-transform: none; }
.couture-colophon { max-width: 720px; }
.couture-colophon .colophon-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--c-line); margin-top: 32px; }
.couture-colophon .colophon-list > div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--c-line); font-family: var(--c-body); }
.couture-colophon dt { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.couture-colophon dd { margin: 0; font-size: 15px; color: var(--c-ink); }
/* contact */
.couture-appointment { max-width: 860px; }
.couture-appointment h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(40px, 6vw, 96px); line-height: .95; margin: 12px 0 18px; letter-spacing: -.02em; }
.couture-appointment .appt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin: 40px 0; }
.couture-appointment .appt-form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.couture-appointment .appt-form label.full { grid-column: span 2; }
.couture-appointment .appt-form input, .couture-appointment .appt-form textarea { padding: 12px 14px; border: 1px solid var(--c-line); background: var(--c-paper); font-family: var(--c-body); font-size: 15px; color: var(--c-ink); }
.couture-appointment .appt-form button { grid-column: span 2; padding: 16px; font-family: var(--c-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; background: var(--c-ink); color: var(--c-paper); border: none; cursor: pointer; }
.couture-appointment .appt-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; padding: 28px 0; border-top: 1px solid var(--c-line); }
.couture-appointment .appt-info strong { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); display: block; margin-bottom: 6px; }
/* stockists */
.couture-stockists { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 48px; }
.couture-stockists .city h2 { font-family: var(--c-display); font-weight: 300; font-size: 28px; margin: 0 0 20px; border-bottom: 2px solid var(--c-ink); padding-bottom: 10px; letter-spacing: -.01em; }
.couture-stockists .city ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.couture-stockists .city li { padding: 12px 0; border-bottom: 1px dashed var(--c-line); display: flex; flex-direction: column; gap: 4px; }
.couture-stockists .city strong { font-family: var(--c-display); font-size: 18px; font-style: italic; font-weight: 400; }
.couture-stockists .city span { font-family: var(--c-mono); font-size: 11px; letter-spacing: .1em; color: var(--c-muted); }
/* firmware / repair */
.couture-firmware-list article { padding: 24px 0; border-bottom: 1px solid var(--c-line); }
.couture-firmware-list header { display: flex; justify-content: space-between; font-family: var(--c-mono); font-size: 12px; letter-spacing: .1em; margin-bottom: 14px; }
.couture-firmware-list header strong { color: var(--c-accent); font-size: 14px; }
.couture-firmware-list ul { list-style: disc; padding-left: 24px; font-family: var(--c-body); color: var(--c-ink-soft); line-height: 1.7; }
.couture-repair { max-width: 720px; }
.couture-repair h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(36px, 5vw, 72px); line-height: 1; margin: 12px 0 18px; }
/* press */
.couture-press-kit { text-align: center; margin-top: 48px; }
/* home-section: categories strip */
.couture-cat-strip { padding: var(--c-rhythm) var(--c-gutter); }
.couture-cat-strip h2 { font-family: var(--c-display); font-weight: 300; font-size: clamp(28px, 3vw, 48px); margin: 0 0 24px; }
.couture-cat-strip .strip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.couture-cat-strip .strip-tile { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--c-paper-2); display: block; text-decoration: none; color: var(--c-paper); }
.couture-cat-strip .strip-tile img { width: 100%; height: 100%; object-fit: cover; }
.couture-cat-strip .strip-tile span { position: absolute; bottom: 14px; left: 14px; font-family: var(--c-display); font-style: italic; font-size: 22px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
/* home-section: journal teaser */
.couture-journal-teaser { padding: var(--c-rhythm) var(--c-gutter); }
.couture-journal-teaser h2 { font-family: var(--c-display); font-weight: 300; font-size: clamp(32px, 4vw, 56px); margin: 0 0 32px; }
.couture-journal-teaser .teaser-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.couture-journal-teaser .teaser a { text-decoration: none; color: inherit; display: block; }
.couture-journal-teaser .teaser img { aspect-ratio: 4/3; width: 100%; object-fit: cover; background: var(--c-paper-2); }
.couture-journal-teaser .teaser h3 { font-family: var(--c-display); font-style: italic; font-weight: 400; font-size: 22px; margin: 14px 0 6px; }
/* home-section: releases */
.couture-releases-teaser { padding: var(--c-rhythm) var(--c-gutter); }
.couture-releases-teaser .release-list { list-style: none; margin: 24px 0 0; padding: 0; border-top: 2px solid var(--c-ink); }
.couture-releases-teaser .release-list li a { display: grid; grid-template-columns: 80px 1fr auto; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; font-family: var(--c-mono); font-size: 13px; letter-spacing: .08em; }
.couture-releases-teaser .release-list strong { color: var(--c-accent); }
.couture-releases-teaser .release-list span { font-family: var(--c-display); font-style: italic; font-size: 18px; letter-spacing: 0; }
/* home-section: field notes */
.couture-field-strip { padding: var(--c-rhythm) var(--c-gutter); }
.couture-field-strip h2 { font-family: var(--c-display); font-weight: 300; font-size: clamp(32px, 4vw, 56px); margin: 0 0 24px; }
.couture-field-strip .field-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.couture-field-strip .field-tile { position: relative; aspect-ratio: 3/4; display: block; text-decoration: none; color: var(--c-paper); overflow: hidden; }
.couture-field-strip .field-tile img { width: 100%; height: 100%; object-fit: cover; }
.couture-field-strip .field-caption { position: absolute; left: 14px; right: 14px; bottom: 14px; font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.couture-field-strip .field-caption strong { color: var(--c-accent-3); display: block; margin-bottom: 4px; }
.couture-field-strip .field-caption span { font-family: var(--c-display); font-style: italic; font-size: 18px; letter-spacing: 0; text-transform: none; }
/* home-section: map callout */
.couture-map-callout { padding: var(--c-rhythm) var(--c-gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.couture-map-callout .mc-text h2 { font-family: var(--c-display); font-weight: 300; font-size: clamp(36px, 5vw, 72px); margin: 0 0 16px; line-height: 1; }
.couture-map-callout .mc-map { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--c-paper-2), var(--c-ink)); background-image: radial-gradient(circle at 40% 50%, var(--c-accent) 2px, transparent 3px), radial-gradient(circle at 20% 30%, var(--c-accent-2) 2px, transparent 3px), radial-gradient(circle at 70% 70%, var(--c-accent-3) 2px, transparent 3px), linear-gradient(135deg, var(--c-paper-2), var(--c-ink)); background-size: 100% 100%; border: 1px solid var(--c-line); }
/* home-section: appointment CTA */
.couture-appointment-cta { padding: var(--c-rhythm) var(--c-gutter); background: var(--c-ink); color: var(--c-paper); text-align: center; }
.couture-appointment-cta h2 { font-family: var(--c-display); font-weight: 300; font-size: clamp(36px, 5vw, 80px); margin: 0 0 20px; line-height: 1; color: var(--c-paper); }
.couture-appointment-cta p { max-width: 50ch; margin: 0 auto 32px; font-size: 18px; opacity: .9; }
.couture-appointment-cta .cta { background: var(--c-accent); color: var(--c-paper); }
/* home-section: signatories */
.couture-signatories { padding: var(--c-rhythm) var(--c-gutter); }
.couture-signatories h2 { font-family: var(--c-display); font-weight: 300; font-size: clamp(32px, 4vw, 56px); margin: 0 0 32px; }
.couture-signatories ul { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 32px; }
.couture-signatories li { break-inside: avoid; padding: 14px 0; border-top: 1px dashed var(--c-line); display: flex; justify-content: space-between; font-family: var(--c-mono); font-size: 12px; letter-spacing: .08em; }
.couture-signatories li strong { font-family: var(--c-display); font-style: italic; font-weight: 400; font-size: 18px; letter-spacing: 0; text-transform: none; }
/* home-section: scrapbook */
.couture-scrapbook { padding: var(--c-rhythm) var(--c-gutter); position: relative; }
.couture-scrapbook .sb-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 24px; }
.couture-scrapbook .sb-card { padding: 18px; background: var(--c-paper); border: 1px solid var(--c-line); box-shadow: var(--c-card-shadow); }
.couture-scrapbook .sb-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 12px; }
.couture-scrapbook .sb-card p { font-family: var(--c-body); font-size: 14px; color: var(--c-ink-soft); margin: 0; line-height: 1.5; }
.couture-scrapbook .sb-0 { transform: rotate(-1.5deg); }
.couture-scrapbook .sb-1 { transform: rotate(.8deg) translateY(10px); }
.couture-scrapbook .sb-2 { transform: rotate(-.5deg) translateY(20px); }
.couture-scrapbook .sb-3 { transform: rotate(1.2deg); }
/* home-section: lookbook grid */
.couture-lookbook-grid { padding: var(--c-rhythm) var(--c-gutter); }
.couture-lookbook-grid .lb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 24px; }
.couture-lookbook-grid .lb-tile { display: block; position: relative; aspect-ratio: 3/4; text-decoration: none; color: var(--c-paper); overflow: hidden; }
.couture-lookbook-grid .lb-tile img { width: 100%; height: 100%; object-fit: cover; }
.couture-lookbook-grid .lb-tile span { position: absolute; left: 14px; bottom: 14px; font-family: var(--c-display); font-style: italic; font-size: 22px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
/* ensure older responsive breakpoint still applies to new layouts */
@media (max-width: 900px) {
.couture-shop-layout { grid-template-columns: 1fr; }
.couture-product-lede, .couture-product-atelier, .couture-product-tech, .couture-product-conv, .couture-map-callout { grid-template-columns: 1fr; }
.couture-appointment .appt-form { grid-template-columns: 1fr; }
.couture-appointment .appt-form label.full, .couture-appointment .appt-form button { grid-column: span 1; }
.couture-signatories ul { columns: 2; }
.couture-spatial-split { grid-template-columns: 1fr; }
.couture-spatial-split .split-right { display: none; }
body:has(.couture-nav-siderail) .couture-spatial,
body:has(.couture-nav-siderail) .couture-footer { margin-left: 0; }
.couture-nav-siderail { position: relative; width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--c-line); flex-direction: row; padding: 16px var(--c-gutter); gap: 24px; align-items: center; }
.couture-nav-siderail .rail-menu { flex-direction: row; flex-wrap: wrap; }
body:has(.couture-nav-split) .couture-spatial { padding-left: 0; }
.couture-nav-split { position: relative; top: 0; left: 0; max-width: 100%; }
.couture-gallerywall { grid-template-columns: repeat(6, 1fr); }
.couture-gallerywall .gw-wide { grid-column: span 6; }
.couture-gallerywall .gw-square, .couture-gallerywall .gw-tall { grid-column: span 3; }
}
@media (max-width: 900px) {
.couture-hero .hero-sub, .couture-story, .couture-ritual, .couture-newsletter .wrap, .couture-footer-grid { grid-template-columns: 1fr; }
.couture-products { grid-template-columns: repeat(2, 1fr); }
.couture-products .prod { grid-column: span 1 !important; transform: none !important; }
.couture-ritual .sticky { position: relative; top: 0; }
.couture-pullquote::before { font-size: 280px; top: -30px; }
.couture-story-magazine .mag-grid { grid-template-columns: 1fr; }
.couture-lookbook .lookbook-stack { grid-template-columns: 1fr 1fr; }
.couture-lookbook .lb-big, .couture-lookbook .lb-small { grid-column: span 1; margin-top: 0; }
.couture-lookbook .lb { transform: none !important; }
.couture-hero--vertical { grid-template-columns: 1fr; }
.couture-hero--vertical .vert-head { writing-mode: horizontal-tb; transform: none; }
.couture-process-diagram .diagram-ring { aspect-ratio: auto; display: block; }
.couture-process-diagram .ring-node { position: relative; width: auto; transform: none !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin-bottom: 16px; }
.couture-process-diagram .ring-hub { position: relative; inset: auto; margin: 32px 0; }
.couture-checklist .spec-list { grid-template-columns: 1fr; }
.couture-checklist .spec-list li { border-right: none; }
.couture-stats .stat { border-right: none; border-bottom: 1px solid var(--c-line); }
}
/* ---------------------------------------------------------------------------
* Brand logo placement (rendered by nav.js / brandBlock).
*
* The renderer emits 
* inside the per-archetype brand wrapper (.brand, .rail-brand, .dot-brand,
* .drawer-brand, .toc-brand, .split-brand, .grand-mark, .atl-mark, .stamp-mark
* etc.) in parts/header.html and parts/footer.html. The publisher swaps the
* src for the WP-uploaded media URL after the theme is on disk; if no logo
* was generated, the image is hidden with the placeholder src.
* ----------------------------------------------------------------------- */
.couture-nav-topbar .brand,
.couture-nav-siderail .rail-brand,
.couture-nav-dotindex .dot-brand,
.couture-nav-drawer .drawer-brand,
.couture-nav-toc .toc-brand,
.couture-nav-split .split-brand { display: flex; align-items: center; gap: 12px; }
a.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; line-height: 1; }
a.brand:hover { opacity: .85; }
/* Logo defaults raised in V4.3 (handoff item N2) — wordmark logos at 44px
were unreadable, especially on AI-generated assets where the wordmark
IS the brand. Per-archetype scaling is applied INLINE on the ![]()
by
nav.js (multiplies these defaults). */
img.brand-logo { display: block; height: 64px; width: auto; max-width: 320px; object-fit: contain; }
img.brand-logo--standard { height: 64px; max-width: 320px; }
img.brand-logo--lockup { height: 48px; max-width: 220px; }
img.brand-logo--mark { height: 44px; max-width: 96px; }
img.brand-logo--stamp { height: 64px; max-width: 280px; margin-bottom: 18px; }
img.brand-logo--large { height: 88px; max-width: 360px; }
/* If the publisher couldn't upload a logo (no file on disk), the src will
* still be the unresolved sentinel — hide the broken image cleanly so the
* wordmark fallback (when present) is the only visible element. */
img.brand-logo[src="__BRAND_LOGO_URL__"],
img.brand-logo[src=""] { display: none !important; }
/* When a logo image IS present in the topbar, retire the wordmark fallback
* so we don't render the brand name twice (logo + text). */
.couture-nav-topbar .brand a.brand .brand-word { display: none; }
/* In the side-rail / toc the lockup variant intentionally shows BOTH the
* mark and the wordmark beside it — set the wordmark style. */
.brand-word {
font-family: var(--c-display);
font-style: italic;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--c-ink);
}
/* Footer flourishes that now host a logo image instead of a glyph */
.couture-footer--grand .grand-mark { margin-bottom: 18px; }
.couture-footer--grand .grand-mark img.brand-logo { height: 64px; max-width: 280px; }
.couture-footer--atelier .atl-mark { display: flex; align-items: flex-start; min-height: 64px; }
.couture-footer--atelier .atl-mark img.brand-logo { height: 64px; max-width: 200px; }
.couture-footer--spec .spec-brand { display: flex; align-items: center; gap: 14px; }
.couture-footer--spec .spec-brand img.brand-logo { height: 36px; max-width: 100px; filter: grayscale(1) contrast(1.2); }
.couture-footer--spec .spec-brand-text { font-family: var(--c-mono); font-size: 14px; letter-spacing: .14em; }
.couture-footer--colophon .col-mark { margin: 14px 0 28px; }
.couture-footer--colophon .col-mark img.brand-logo { height: 40px; max-width: 180px; opacity: .85; }
.couture-footer--stamp .stamp-mark { display: flex; justify-content: center; align-items: center; }
.couture-footer--stamp .stamp-mark img.brand-logo { height: 72px; max-width: 200px; }
/* When a paper-2 background is on the topbar, give the logo a quiet
* surface so high-contrast logos don't clash with the noise/grain motif. */
.couture-nav-topbar { gap: 18px; }
@media (max-width: 900px) {
img.brand-logo--standard { height: 48px; max-width: 220px; }
img.brand-logo--lockup { height: 38px; max-width: 180px; }
img.brand-logo--mark { height: 36px; max-width: 80px; }
img.brand-logo--stamp { height: 52px; max-width: 220px; }
}
/* ---------------------------------------------------------------------------
* Subscription-box anatomies: /plans (tiers), /how-it-works (steps), /help (FAQ)
* ----------------------------------------------------------------------- */
/* Common page-shell intro spacing */
.couture-page-plans-tiers,
.couture-page-how-it-works-steps,
.couture-page-help-faq { padding: var(--c-rhythm) var(--c-gutter); max-width: 1200px; margin: 0 auto; }
.couture-plans-head, .couture-hiw-head, .couture-help-head { margin-bottom: clamp(40px, 5vw, 72px); max-width: 720px; }
.couture-plans-head .num, .couture-hiw-head .num, .couture-help-head .num { font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 14px; }
.couture-plans-head h1, .couture-hiw-head h1, .couture-help-head h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(40px, 6vw, 80px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 18px; }
.couture-plans-head .lede, .couture-hiw-head .lede, .couture-help-head .lede { font-size: 18px; line-height: 1.55; color: var(--c-ink-soft); margin: 0; max-width: 56ch; }
/* /plans — three tier cards */
.couture-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 36px; }
.couture-tier { position: relative; padding: 36px 30px 30px; background: var(--c-paper); border: 1px solid var(--c-line); display: flex; flex-direction: column; min-height: 540px; }
.couture-tier--featured { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); transform: translateY(-12px); box-shadow: 0 24px 48px -16px rgba(0,0,0,.18); }
.couture-tier--featured h2, .couture-tier--featured .tier-eyebrow, .couture-tier--featured .amount, .couture-tier--featured .cadence, .couture-tier--featured .tier-includes li { color: var(--c-paper); }
.couture-tier--featured .tier-includes li::before { background: var(--c-paper); }
.couture-tier .tier-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--c-accent-3); color: var(--c-paper); padding: 5px 14px; font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.couture-tier .tier-head { margin-bottom: 24px; }
.couture-tier .tier-eyebrow { font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 8px; }
.couture-tier h2 { font-family: var(--c-display); font-weight: 300; font-size: 36px; line-height: 1; margin: 0 0 18px; letter-spacing: -0.01em; }
.couture-tier .tier-price { display: flex; align-items: baseline; gap: 6px; }
.couture-tier .tier-price .amount { font-family: var(--c-display); font-weight: 400; font-size: 56px; line-height: 1; }
.couture-tier .tier-price .cadence { font-family: var(--c-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.couture-tier .tier-includes { list-style: none; margin: 0 0 28px; padding: 24px 0 0; border-top: 1px solid color-mix(in oklab, var(--c-line) 50%, transparent); flex: 1; }
.couture-tier .tier-includes li { position: relative; padding-left: 22px; margin-bottom: 12px; font-size: 14px; line-height: 1.5; }
.couture-tier .tier-includes li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 1px; background: var(--c-ink); }
.couture-tier .tier-cta { display: block; text-align: center; padding: 14px 18px; font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; background: var(--c-ink); color: var(--c-paper); transition: background .2s; }
.couture-tier--featured .tier-cta { background: var(--c-accent-3); }
.couture-tier .tier-cta:hover { background: var(--c-accent); }
.couture-plans-foot { margin-top: 32px; font-family: var(--c-mono); font-size: 12px; letter-spacing: .04em; color: var(--c-muted); text-align: center; }
/* /how-it-works — numbered steps */
.couture-hiw-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 56px; margin-bottom: 64px; }
.couture-hiw-steps .hiw-step { display: grid; grid-template-columns: 80px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--c-line); }
.couture-hiw-steps .hiw-num { font-family: var(--c-display); font-weight: 300; font-style: italic; font-size: 64px; line-height: 1; color: var(--c-accent); }
.couture-hiw-steps .hiw-body h3 { font-family: var(--c-display); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.2; margin: 0 0 8px; }
.couture-hiw-steps .hiw-body p { font-size: 15px; line-height: 1.55; color: var(--c-ink-soft); margin: 0; }
.couture-hiw-faq { padding: 48px 0; border-top: 2px solid var(--c-ink); }
.couture-hiw-faq h2 { font-family: var(--c-display); font-weight: 300; font-size: 32px; margin: 0 0 24px; }
.couture-hiw-faq dl { margin: 0; }
.couture-hiw-faq dl > div { padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.couture-hiw-faq dt { font-family: var(--c-display); font-style: italic; font-size: 18px; margin-bottom: 8px; }
.couture-hiw-faq dd { font-size: 15px; line-height: 1.55; color: var(--c-ink-soft); margin: 0; }
.couture-hiw-faq .hiw-more { display: inline-block; margin-top: 24px; font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-ink); padding-bottom: 4px; }
.couture-hiw-cta { text-align: center; padding: 32px 0; }
.couture-hiw-cta .cta { display: inline-block; padding: 18px 36px; background: var(--c-ink); color: var(--c-paper); font-family: var(--c-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.couture-hiw-cta .cta:hover { background: var(--c-accent); }
/* /help — accordion FAQ */
.couture-help-list { margin-bottom: 64px; }
.couture-help-item { border-bottom: 1px solid var(--c-line); padding: 0; }
.couture-help-item summary { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; cursor: pointer; list-style: none; }
.couture-help-item summary::-webkit-details-marker { display: none; }
.couture-help-item .help-q { font-family: var(--c-display); font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; padding-right: 24px; }
.couture-help-item .help-toggle { font-family: var(--c-mono); font-size: 22px; line-height: 1; color: var(--c-muted); flex-shrink: 0; transition: transform .2s; }
.couture-help-item[open] .help-toggle { transform: rotate(45deg); color: var(--c-ink); }
.couture-help-item .help-a { padding: 0 0 24px; max-width: 60ch; }
.couture-help-item .help-a p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--c-ink-soft); }
.couture-help-contact { padding: 40px 0; border-top: 2px solid var(--c-ink); }
.couture-help-contact h2 { font-family: var(--c-display); font-weight: 300; font-size: 32px; margin: 0 0 8px; }
.couture-help-contact p { font-size: 16px; color: var(--c-ink-soft); margin: 0 0 24px; max-width: 50ch; }
.couture-help-contact .help-contact-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.couture-help-contact .help-contact-list li { padding: 18px 0; border-top: 1px solid var(--c-line); }
.couture-help-contact .help-contact-list strong { display: block; font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 8px; }
.couture-help-contact .help-contact-list a, .couture-help-contact .help-contact-list span { font-family: var(--c-display); font-style: italic; font-size: 18px; color: var(--c-ink); text-decoration: none; }
@media (max-width: 900px) {
.couture-plans-grid { grid-template-columns: 1fr; gap: 32px; }
.couture-tier--featured { transform: none; }
.couture-hiw-steps { grid-template-columns: 1fr; gap: 0; }
.couture-hiw-steps .hiw-step { grid-template-columns: 56px 1fr; gap: 14px; }
.couture-hiw-steps .hiw-num { font-size: 44px; }
}
/* =============================================================================
* WooCommerce single-product layout (handoff items N1 + N7)
*
* The Couture renderer no longer emits a `/shop//` standalone page.
* Instead, WC owns `/product//`, the theme provides
* `templates/single-product.html`, and the editorial story + spec + Q&A is
* written into the product `description` (which post-content renders as
* .couture-product-wc-body inside the column on the right of the page,
* below the image gallery, title, price, and add-to-cart).
* ============================================================================= */
.couture-page-product-wc { padding: clamp(40px, 6vw, 96px) var(--c-gutter) clamp(80px, 12vw, 160px); max-width: 1320px; }
.couture-product-wc-grid { gap: clamp(32px, 5vw, 80px); margin-bottom: clamp(40px, 6vw, 80px); }
.couture-product-wc-gallery img { width: 100%; height: auto; display: block; }
.couture-product-wc-meta { display: flex; flex-direction: column; gap: 14px; align-self: start; position: sticky; top: 96px; }
.couture-product-wc-eyebrow { font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 0; }
.couture-product-wc-eyebrow a { color: inherit; text-decoration: none; }
.couture-product-wc-title { font-family: var(--c-display); font-weight: 300; font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -.02em; margin: 0; }
.couture-product-wc-price { font-family: var(--c-display); font-style: italic; font-size: clamp(20px, 2vw, 28px); color: var(--c-accent); margin: 0; }
.couture-product-wc-price .price del { color: var(--c-muted); margin-right: 8px; }
.couture-product-wc-short { font-family: var(--c-body); font-size: 16px; line-height: 1.65; color: var(--c-ink-soft); max-width: 50ch; margin: 0; }
.couture-product-wc-meta .quantity { display: flex; align-items: center; gap: 8px; }
.couture-product-wc-meta .quantity input { width: 64px; padding: 12px 8px; border: 1px solid var(--c-line); background: var(--c-paper); font-family: var(--c-mono); font-size: 13px; text-align: center; }
.couture-product-wc-meta .single_add_to_cart_button,
.couture-product-wc-meta button[type="submit"] { display: inline-block; padding: 16px 28px; background: var(--c-ink); color: var(--c-paper); font-family: var(--c-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: background .2s; }
.couture-product-wc-meta .single_add_to_cart_button:hover,
.couture-product-wc-meta button[type="submit"]:hover { background: var(--c-accent); }
.couture-product-wc-meta .product_meta { font-family: var(--c-mono); font-size: 11px; letter-spacing: .08em; color: var(--c-muted); padding-top: 18px; border-top: 1px solid var(--c-line); margin-top: 8px; }
.couture-product-wc-meta .product_meta > span { display: block; padding: 4px 0; }
/* The body-only HTML the renderer wrote into description. Same vocabulary as
the standalone product anatomies but without the duplicated chrome. */
.couture-product-wc-body { max-width: 720px; margin: 0; padding: clamp(40px, 5vw, 64px) 0 0; border-top: 1px solid var(--c-line); }
.couture-product-body { font-family: var(--c-body); font-size: 16px; line-height: 1.7; color: var(--c-ink); }
.couture-product-body .couture-product-lede { font-family: var(--c-display); font-style: italic; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; color: var(--c-ink-soft); margin: 0 0 32px; }
.couture-product-body .couture-product-longread p { margin: 0 0 1.4em; }
.couture-product-body .couture-product-longread p:first-child::first-letter { font-family: var(--c-display); font-size: 4em; line-height: .85; float: left; padding: .08em .12em 0 0; font-weight: 400; color: var(--c-accent); }
.couture-product-body .couture-spec, .couture-product-body .atelier-spec { margin-top: 36px; }
.couture-product-body .couture-spec h3 { font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin: 0 0 16px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.couture-product-body .couture-spec dl, .couture-product-body .atelier-spec { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 8px 24px; margin: 0; }
.couture-product-body .couture-spec dl > div { display: contents; }
.couture-product-body .couture-spec dt, .couture-product-body .atelier-spec dt { font-family: var(--c-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); padding: 10px 0; border-bottom: 1px dotted var(--c-line); }
.couture-product-body .couture-spec dd, .couture-product-body .atelier-spec dd { font-size: 14px; color: var(--c-ink); padding: 10px 0; margin: 0; border-bottom: 1px dotted var(--c-line); }
.couture-product-body .couture-product-qa dl { display: block; }
.couture-product-body .couture-product-qa dl > div { display: block; padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.couture-product-body .couture-product-qa dt { font-family: var(--c-display); font-style: italic; font-size: clamp(18px, 1.6vw, 22px); margin-bottom: 8px; }
.couture-product-body .couture-product-qa dd { font-size: 15px; line-height: 1.65; color: var(--c-ink-soft); margin: 0; }
.couture-product-body .couture-product-firmware { margin-top: 32px; }
.couture-product-body .couture-product-firmware h3 { font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin: 0 0 12px; }
.couture-product-body .couture-product-firmware .fw-row { display: grid; grid-template-columns: 80px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px dotted var(--c-line); font-size: 14px; }
.couture-product-body .couture-product-firmware .fw-row strong { font-family: var(--c-mono); color: var(--c-accent); }
.couture-product-body .couture-product-tabs nav { display: flex; gap: 24px; border-bottom: 1px solid var(--c-line); margin-bottom: 24px; }
.couture-product-body .couture-product-tabs button { background: none; border: none; padding: 12px 0; font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.couture-product-body .couture-product-tabs button[aria-selected="true"] { color: var(--c-ink); border-bottom-color: var(--c-accent); }
.couture-product-body .couture-product-tabs [role="tabpanel"] { display: none; }
.couture-product-body .couture-product-tabs [role="tabpanel"].active { display: block; }
.couture-product-wc-related { padding-top: clamp(48px, 6vw, 80px); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--c-line); }
.couture-product-wc-related h2 { font-family: var(--c-display); font-weight: 300; font-style: italic; font-size: clamp(24px, 2.5vw, 36px); margin: 0 0 32px; }
/* Universal product trust block — ships, returns, made-by-hand. Always
present at the bottom of every product body so even bare products show
confidence-building content. (V4.4) */
.couture-product-trust { margin-top: 40px; padding: 24px 0; border-top: 1px solid var(--c-line); }
.couture-product-trust ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px 32px; }
.couture-product-trust li { display: flex; flex-direction: column; gap: 6px; }
.couture-product-trust strong { font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.couture-product-trust span { font-family: var(--c-body); font-size: 14px; line-height: 1.5; color: var(--c-ink); }
/* Empty-state message inside tabs — intentionally calm copy, not a 404. */
.couture-product-empty { font-family: var(--c-body); font-size: 14px; color: var(--c-muted); font-style: italic; margin: 0; padding: 16px 0; }
@media (max-width: 900px) {
.couture-product-wc-grid { flex-direction: column !important; gap: 24px !important; }
.couture-product-wc-grid .wp-block-column { flex-basis: auto !important; width: 100% !important; }
.couture-product-wc-meta { position: static; }
.couture-product-wc-body { padding-top: 24px; }
.couture-product-body .couture-spec dl, .couture-product-body .atelier-spec { grid-template-columns: 1fr; gap: 0; }
.couture-product-body .couture-spec dt, .couture-product-body .atelier-spec dt { padding-bottom: 4px; border-bottom: none; }
.couture-product-body .couture-spec dd, .couture-product-body .atelier-spec dd { padding-top: 0; }
/* V4.5 — sticky add-to-cart on mobile PDP. Once the gallery scrolls
past, the cart row pins to the bottom edge so the visitor can buy
without scrolling back. Replaces the "lost ATC" UX on long mobile
pages. Desktop keeps the sticky-meta (top: 96px) handled above. */
.couture-page-product-wc .couture-product-wc-meta .quantity,
.couture-page-product-wc .couture-product-wc-meta .single_add_to_cart_button,
.couture-page-product-wc .couture-product-wc-meta button[type="submit"] { /* no change to layout */ }
body.single-product .wc-block-add-to-cart-form,
body.single-product .single_add_to_cart_button {
position: sticky; bottom: 0; z-index: 50;
background: var(--c-paper);
padding: 12px 16px;
/* V4.6 — respect iPhone home indicator + bottom-safe area so the
sticky bar doesn't sit underneath it. env() returns 0 on devices
without a notch so this is a no-op everywhere else. */
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -8px 24px -12px rgba(0,0,0,.18);
}
body.single-product .single_add_to_cart_button {
width: 100%;
text-align: center;
font-size: 13px !important;
padding: 18px 24px !important;
}
/* Hide the floating cart chip on PDP mobile so it doesn't fight the
sticky buy bar. */
body.single-product .couture-cart-chip--floating { display: none; }
}
/* =============================================================================
* Press page enrichment (V4.3 polish item #2)
* - Selected coverage with longer excerpts
* - Quote wall (existing)
* - Press contact card
* ============================================================================= */
.couture-page-press-page .press-section-title { font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin: 0 0 24px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.couture-page-press-page .press-features { margin-bottom: 56px; }
.couture-page-press-page .press-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; }
.couture-page-press-page .press-feature { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--c-line); background: var(--c-paper); }
.couture-page-press-page .press-feature-outlet { font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); }
.couture-page-press-page .press-feature-title { font-family: var(--c-display); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; margin: 0; }
.couture-page-press-page .press-feature-title a { color: inherit; text-decoration: none; }
.couture-page-press-page .press-feature-title a:hover { color: var(--c-accent); }
.couture-page-press-page .press-feature-excerpt { font-family: var(--c-body); font-size: 15px; line-height: 1.6; color: var(--c-ink-soft); margin: 0; flex: 1; }
.couture-page-press-page .press-feature-foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--c-mono); font-size: 11px; letter-spacing: .08em; color: var(--c-muted); padding-top: 12px; border-top: 1px solid var(--c-line); }
.couture-page-press-page .press-feature-link { color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-ink); padding-bottom: 1px; }
.couture-page-press-page .press-wall-section { margin-bottom: 56px; }
.couture-page-press-page .press-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.couture-page-press-page .press-grid figure { padding: 24px; border-left: 2px solid var(--c-accent); margin: 0; }
.couture-page-press-page .press-grid blockquote { font-family: var(--c-display); font-style: italic; font-size: 18px; line-height: 1.4; margin: 0 0 12px; color: var(--c-ink); }
.couture-page-press-page .press-grid figcaption { font-family: var(--c-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.couture-page-press-page .press-contact { margin-bottom: 40px; padding: 32px; background: var(--c-paper-2); border-left: 2px solid var(--c-ink); }
.couture-page-press-page .press-contact-lede { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--c-ink-soft); max-width: 60ch; }
.couture-page-press-page .press-contact-email { font-family: var(--c-display); font-style: italic; font-size: clamp(20px, 2vw, 28px); color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-ink); padding-bottom: 4px; }
.couture-page-press-page .press-contact-email:hover { color: var(--c-accent); border-color: var(--c-accent); }
.couture-page-press-page .press-kit { padding-top: 24px; border-top: 1px solid var(--c-line); }
/* =============================================================================
* Contact section — working form + plausible socials (V4.3 polish item #3)
* ============================================================================= */
.couture-contact-section .couture-contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 80px); margin-top: 32px; }
.couture-contact-section .couture-contact-meta .contact-lede { font-family: var(--c-display); font-style: italic; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.4; color: var(--c-ink); margin: 0 0 32px; max-width: 38ch; }
.couture-contact-section .contact-list { display: flex; flex-direction: column; gap: 0; margin: 0 0 32px; padding: 0; }
.couture-contact-section .contact-list > div { padding: 16px 0; border-top: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 6px; }
.couture-contact-section .contact-list > div:last-child { border-bottom: 1px solid var(--c-line); }
.couture-contact-section .contact-list dt { font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin: 0; }
.couture-contact-section .contact-list dd { font-family: var(--c-display); font-style: italic; font-size: 17px; color: var(--c-ink); margin: 0; }
.couture-contact-section .contact-list dd a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
.couture-contact-section .contact-list dd a:hover { border-color: var(--c-accent); }
.couture-contact-section .couture-contact-socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.couture-contact-section .couture-contact-socials a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--c-line); background: var(--c-paper); text-decoration: none; transition: border-color .2s, background .2s; }
.couture-contact-section .couture-contact-socials a:hover { border-color: var(--c-ink); background: var(--c-paper-2); }
.couture-contact-section .couture-contact-socials strong { font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.couture-contact-section .couture-contact-socials span { font-family: var(--c-display); font-style: italic; font-size: 14px; color: var(--c-ink); }
.couture-contact-section .couture-contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; align-content: start; }
.couture-contact-section .couture-contact-form .cf-row { display: flex; flex-direction: column; gap: 8px; }
.couture-contact-section .couture-contact-form .cf-row.cf-full { grid-column: 1 / -1; }
.couture-contact-section .couture-contact-form .cf-row span { font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.couture-contact-section .couture-contact-form input,
.couture-contact-section .couture-contact-form textarea { padding: 14px 16px; border: 1px solid var(--c-line); background: var(--c-paper); font-family: var(--c-body); font-size: 15px; color: var(--c-ink); resize: vertical; }
.couture-contact-section .couture-contact-form input:focus,
.couture-contact-section .couture-contact-form textarea:focus { outline: none; border-color: var(--c-ink); }
.couture-contact-section .couture-contact-form .cf-submit { grid-column: 1 / -1; justify-self: start; padding: 16px 28px; background: var(--c-ink); color: var(--c-paper); border: none; font-family: var(--c-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.couture-contact-section .couture-contact-form .cf-submit:hover { background: var(--c-accent); }
.couture-contact-section .couture-contact-form .cf-note { grid-column: 1 / -1; margin: 0; font-family: var(--c-mono); font-size: 10px; letter-spacing: .08em; color: var(--c-muted); }
.couture-contact-section .couture-contact-form .cf-status { grid-column: 1 / -1; margin: 0; font-family: var(--c-body); font-size: 14px; line-height: 1.5; min-height: 1.2em; }
.couture-contact-section .couture-contact-form .cf-status[data-kind="ok"] { color: #15803d; }
.couture-contact-section .couture-contact-form .cf-status[data-kind="err"] { color: #b91c1c; }
.couture-contact-section .couture-contact-form .cf-status[data-kind="pending"] { color: var(--c-muted); }
.couture-contact-section .couture-contact-form .cf-status a { color: inherit; text-decoration: underline; }
.couture-contact-section .couture-contact-form button[disabled] { opacity: .55; cursor: progress; }
@media (max-width: 800px) {
.couture-contact-section .couture-contact-grid { grid-template-columns: 1fr; }
.couture-contact-section .couture-contact-form { grid-template-columns: 1fr; }
}
/* =============================================================================
* WooCommerce cart / checkout / account / order-confirmation (V4.5)
*
* The previous theme only customised the single-product page; cart,
* checkout, account, and post-checkout pages all rendered with default
* WC + WP block styling, including the unfortunate "black sad-face
* emoji" empty-cart icon. This block:
*
* - Wraps each WC page header in a `.couture-{page}-head` matching
* other Couture page heads (eyebrow num + display h1).
* - Replaces WC's emoji-icon empty-cart with a typographic statement +
* a brand CTA back to /shop/.
* - Tunes WC block-checkout / cart fonts and accent colors to use
* the rolled DNA tokens (no more sea of light-gray defaults).
* ============================================================================= */
.couture-page-cart-wc,
.couture-page-checkout-wc,
.couture-page-account-wc,
.couture-page-order-wc { padding: clamp(40px, 6vw, 96px) var(--c-gutter) clamp(80px, 12vw, 160px); max-width: 1280px; }
.couture-cart-head, .couture-checkout-head, .couture-account-head, .couture-order-head { margin-bottom: clamp(40px, 5vw, 72px); max-width: 720px; }
.couture-cart-head .num, .couture-checkout-head .num, .couture-account-head .num, .couture-order-head .num { font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin: 0 0 12px; }
.couture-cart-head h1, .couture-checkout-head h1, .couture-account-head h1, .couture-order-head h1 { font-family: var(--c-display); font-weight: 300; font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -.02em; margin: 0 0 16px; }
.couture-cart-head .lede, .couture-order-head .lede { font-family: var(--c-display); font-style: italic; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; color: var(--c-ink-soft); max-width: 50ch; margin: 0; }
/* Empty cart — the WC default uses a black emoji-style sad face which
feels off-brand on every Couture site. Hide it and emit a typographic
replacement via ::before. */
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block .wp-block-heading {
font-family: var(--c-display) !important;
font-style: italic;
font-weight: 300;
font-size: clamp(28px, 3vw, 44px) !important;
color: var(--c-ink) !important;
letter-spacing: -.02em !important;
}
/* The frowny SVG/emoji image WC ships with — hide it on cart pages */
.couture-page-cart-wc .wp-block-woocommerce-empty-cart-block img,
.couture-page-cart-wc .wc-block-cart__empty-cart__heading svg,
.wc-block-cart__empty-cart > img:first-child,
.wp-block-woocommerce-empty-cart-block .wp-block-image:first-child img { display: none !important; }
/* Replacement typographic mark — a single quiet asterism */
.couture-page-cart-wc .wp-block-woocommerce-empty-cart-block::before {
content: "⁂";
display: block;
font-family: var(--c-display);
font-size: clamp(64px, 8vw, 120px);
color: var(--c-accent);
text-align: center;
line-height: 1;
margin-bottom: 24px;
opacity: .7;
}
/* V4.6 — surface a path back to the catalog from the empty-cart state.
The default WC "Return to shop" button is a small grey link; this
styles it as a confident CTA so visitors don't bounce. */
.couture-page-cart-wc .wc-block-cart__empty-cart__heading + p,
.couture-page-cart-wc .wp-block-woocommerce-empty-cart-block p { font-family: var(--c-body); font-size: 15px; color: var(--c-ink-soft); text-align: center; max-width: 44ch; margin: 16px auto 28px; }
.couture-page-cart-wc .wc-block-cart__empty-cart__heading + p a,
.couture-page-cart-wc .wp-block-woocommerce-empty-cart-block .wp-block-button a,
.couture-page-cart-wc .wp-block-woocommerce-empty-cart-block .wc-block-button {
display: inline-block; margin-top: 8px;
padding: 14px 26px;
font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
background: var(--c-ink); color: var(--c-paper);
text-decoration: none; border: 1px solid var(--c-ink);
transition: background .15s, color .15s;
}
.couture-page-cart-wc .wc-block-cart__empty-cart__heading + p a:hover,
.couture-page-cart-wc .wp-block-woocommerce-empty-cart-block .wp-block-button a:hover {
background: var(--c-accent); border-color: var(--c-accent); color: var(--c-paper);
}
/* WC block-cart line items */
.wc-block-cart, .wc-block-cart-items, .wc-block-components-product-name { font-family: var(--c-body); }
.wc-block-cart-items { border-top: 1px solid var(--c-line); }
.wc-block-cart-items__row { border-bottom: 1px solid var(--c-line); padding: 18px 0; }
.wc-block-components-product-name { font-family: var(--c-display) !important; font-size: clamp(18px, 1.8vw, 22px) !important; font-weight: 400 !important; color: var(--c-ink) !important; text-decoration: none !important; }
.wc-block-cart-item__quantity { font-family: var(--c-mono); font-size: 12px; }
.wc-block-formatted-money-amount { font-family: var(--c-display); font-style: italic; color: var(--c-accent); }
.wc-block-cart__totals-title { font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
/* Checkout — labels, inputs, buttons */
.wc-block-checkout, .wc-block-checkout__form, .wc-block-checkout__sidebar { font-family: var(--c-body); }
.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input label,
.wp-block-woocommerce-checkout label { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.wc-block-checkout input, .wc-block-checkout select, .wc-block-checkout textarea { border: 1px solid var(--c-line) !important; border-radius: 0 !important; background: var(--c-paper) !important; color: var(--c-ink) !important; font-family: var(--c-body) !important; padding: 14px 16px !important; }
.wc-block-checkout input:focus, .wc-block-checkout select:focus, .wc-block-checkout textarea:focus { border-color: var(--c-ink) !important; outline: none !important; box-shadow: none !important; }
.wc-block-checkout__step-heading { font-family: var(--c-display); font-style: italic; font-size: clamp(22px, 2vw, 28px); color: var(--c-ink); }
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
background: var(--c-ink) !important;
color: var(--c-paper) !important;
border-radius: 0 !important;
font-family: var(--c-mono) !important;
font-size: 12px !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
padding: 18px 28px !important;
border: none !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover { background: var(--c-accent) !important; }
/* My-account — login form + dashboard list */
.couture-page-account-wc .woocommerce-account, .couture-page-account-wc .woocommerce { font-family: var(--c-body); }
.couture-page-account-wc .woocommerce h2 { font-family: var(--c-display); font-weight: 300; font-size: clamp(28px, 3vw, 40px); margin: 0 0 24px; }
.couture-page-account-wc form.woocommerce-form-login,
.couture-page-account-wc form.woocommerce-form-register { max-width: 520px; }
.couture-page-account-wc form.woocommerce-form-login p,
.couture-page-account-wc form.woocommerce-form-register p { margin-bottom: 18px; }
.couture-page-account-wc form.woocommerce-form-login label,
.couture-page-account-wc form.woocommerce-form-register label { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); display: block; margin-bottom: 8px; }
.couture-page-account-wc form.woocommerce-form-login input[type="text"],
.couture-page-account-wc form.woocommerce-form-login input[type="email"],
.couture-page-account-wc form.woocommerce-form-login input[type="password"],
.couture-page-account-wc form.woocommerce-form-register input { width: 100%; padding: 14px 16px; border: 1px solid var(--c-line); background: var(--c-paper); color: var(--c-ink); font-family: var(--c-body); border-radius: 0; box-sizing: border-box; }
.couture-page-account-wc button.woocommerce-button { background: var(--c-ink); color: var(--c-paper); padding: 16px 28px; border: none; font-family: var(--c-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.couture-page-account-wc button.woocommerce-button:hover { background: var(--c-accent); }
.couture-page-account-wc nav.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 32px; display: flex; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--c-line); padding-bottom: 18px; }
.couture-page-account-wc nav.woocommerce-MyAccount-navigation li { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.couture-page-account-wc nav.woocommerce-MyAccount-navigation a { color: var(--c-ink-soft); text-decoration: none; padding-bottom: 6px; border-bottom: 2px solid transparent; }
.couture-page-account-wc nav.woocommerce-MyAccount-navigation li.is-active a { color: var(--c-ink); border-color: var(--c-accent); }
/* Order confirmation — receipt-like layout, restraint */
.couture-page-order-wc .wp-block-woocommerce-order-confirmation { font-family: var(--c-body); }
.couture-page-order-wc .wp-block-woocommerce-order-confirmation table { width: 100%; border-collapse: collapse; }
.couture-page-order-wc .wp-block-woocommerce-order-confirmation th { font-family: var(--c-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); padding: 12px 0; border-bottom: 1px solid var(--c-line); text-align: left; }
.couture-page-order-wc .wp-block-woocommerce-order-confirmation td { padding: 14px 0; border-bottom: 1px dotted var(--c-line); font-size: 14px; }
/* =============================================================================
* Print stylesheet (V4.5) — press kits, order receipts, confirmations look
* acceptable when printed. Hides chrome (nav, footer, cart, motion), expands
* details, and forces ink-on-paper colors so saved PDFs and printed pages
* carry brand recognition without bleeding ink everywhere.
* ============================================================================= */
@media print {
body { background: white !important; color: black !important; }
header, footer, .couture-nav-topbar, .couture-nav-siderail, .couture-nav-drawer, .couture-nav-toc, .couture-nav-dotindex, .couture-nav-split, .couture-cart-chip, .couture-seal { display: none !important; }
.couture-spatial { margin-left: 0 !important; }
details { open: open; }
.couture-page { padding: 24px; max-width: none; }
a { color: black !important; text-decoration: underline; }
.couture-product-trust ul { display: block; }
.couture-product-trust li { margin-bottom: 12px; }
img { max-width: 60% !important; page-break-inside: avoid; }
h1, h2, h3 { page-break-after: avoid; color: black !important; }
}
/* ============================================================
V4.11 — Legal page layouts (5 variants)
Driven by copy.legal._layout, set in couture_copy.js based on
the brand's voice register. Each gives the legal pages a
visually distinct treatment so a luxury brand's Privacy Policy
doesn't look identical to a brutalist tech brand's.
============================================================ */
/* Shared legal styles */
.couture-legal { max-width: 760px; margin: 0 auto; padding: 64px 24px; }
.couture-legal-header { margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--c-line); }
.couture-legal-header .eyebrow { font-family: var(--c-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 18px; }
.couture-legal-header h1 { margin: 0 0 16px; }
.couture-legal-header .updated { font-size: 13px; color: var(--c-muted); margin: 0; }
.couture-legal-header .updated.mono { font-family: var(--c-mono); letter-spacing: .08em; text-transform: uppercase; }
.couture-legal-disclaimer { display: block; font-family: var(--c-mono); font-size: 11px; letter-spacing: .04em; padding: 12px 16px; margin-top: 20px; border: 1px solid var(--c-line); }
.couture-legal-disclaimer--template { background: rgba(255, 200, 0, 0.08); color: var(--c-ink); border-color: rgba(255, 200, 0, 0.4); }
.couture-legal-disclaimer--ai { background: var(--c-paper-2); color: var(--c-muted); }
.couture-legal .body p { line-height: 1.7; margin: 0 0 18px; }
.couture-legal .legal-h { margin: 36px 0 14px; font-size: 18px; }
/* 1. Editorial — magazine: drop-cap on first paragraph, generous serif */
.couture-legal--editorial .couture-legal-header h1 { font-family: var(--c-display); font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.01em; }
.couture-legal--editorial .body { font-family: var(--c-body); font-size: 17px; }
.couture-legal--editorial .body .legal-h { font-family: var(--c-display); font-weight: 500; }
.couture-legal--editorial .legal-p.has-dropcap::first-letter {
float: left; font-family: var(--c-display); font-size: 5em; line-height: 0.85; padding: 4px 12px 0 0; color: var(--c-accent);
}
/* 2. Columnar — luxury: 2-col body with gold-rule dividers */
.couture-legal--columnar .couture-legal-header h1 { font-family: var(--c-display); font-size: clamp(36px, 4.5vw, 56px); letter-spacing: 0.02em; }
.couture-legal--columnar .body { column-count: 2; column-gap: 48px; column-rule: 1px solid var(--c-accent); font-size: 14px; line-height: 1.65; }
@media (max-width: 760px) { .couture-legal--columnar .body { column-count: 1; } }
.couture-legal--columnar .body .legal-h { column-span: all; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--c-accent); font-family: var(--c-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); }
.couture-legal--columnar .couture-legal-footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--c-line); text-align: center; font-family: var(--c-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
/* 3. Spec — technical: monospace, numbered sections, hard rules */
.couture-legal--spec .couture-legal-header h1.legal-h1--mono { font-family: var(--c-mono); font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -0.01em; text-transform: uppercase; }
.couture-legal--spec .body--spec { list-style: none; padding: 0; margin: 0; counter-reset: legal; }
.couture-legal--spec .legal-section { display: grid; grid-template-columns: 60px 1fr; gap: 16px 24px; padding: 28px 0; border-top: 1px solid var(--c-ink); }
.couture-legal--spec .legal-section:last-child { border-bottom: 1px solid var(--c-ink); }
.couture-legal--spec .legal-num { font-family: var(--c-mono); font-size: 12px; color: var(--c-accent); letter-spacing: .08em; padding-top: 4px; }
.couture-legal--spec .legal-h--mono { grid-column: 2; margin: 0 0 8px; font-family: var(--c-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.couture-legal--spec .legal-section p { grid-column: 2; margin: 0; font-family: var(--c-body); line-height: 1.65; font-size: 15px; }
/* 4. Plain — warm: relaxed, soft, no decorative chrome */
.couture-legal--plain { max-width: 640px; }
.couture-legal--plain .couture-legal-header h1 { font-size: clamp(28px, 3vw, 40px); font-weight: 500; }
.couture-legal--plain .body { font-size: 16px; }
.couture-legal--plain .body .legal-h { font-size: 17px; font-weight: 600; margin-top: 32px; margin-bottom: 12px; }
/* V4.15 — feature_banner section.
AI-generated wide promotional / brand-statement banner. Two layouts
picked by domain hash: `inset` (image with overlay) and `split`
(image left, copy right). Both use the same CSS variable palette as
the rest of the theme so accent / paper / ink colors flow through. */
.couture-feature-banner {
margin: clamp(48px, 8vw, 96px) 0;
padding: 0;
}
.couture-feature-banner .fb-image {
position: relative;
margin: 0;
overflow: hidden;
}
.couture-feature-banner .fb-image img {
display: block;
width: 100%;
height: auto;
/* V4.15 — 21/9 to match FLUX Schnell's accepted enum (16:5 was rejected). */
aspect-ratio: 21/9;
object-fit: cover;
}
.couture-feature-banner .fb-eyebrow {
font-family: var(--c-mono); font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; color: var(--c-accent);
margin-bottom: 14px;
}
.couture-feature-banner .fb-headline {
font-family: var(--c-display);
font-size: clamp(28px, 4vw, 52px);
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0 0 14px;
color: inherit;
}
.couture-feature-banner .fb-sub {
font-family: var(--c-body);
font-size: 15px;
line-height: 1.55;
margin: 0 0 20px;
max-width: 56ch;
color: inherit;
}
.couture-feature-banner .fb-cta {
display: inline-block;
font-family: var(--c-mono);
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--c-ink);
text-decoration: none;
border-bottom: 2px solid var(--c-accent);
padding-bottom: 4px;
transition: color .15s, border-color .15s;
}
.couture-feature-banner .fb-cta:hover {
color: var(--c-accent);
border-bottom-color: var(--c-ink);
}
/* Variant: inset — image full-width, copy as bottom-left overlay */
.couture-feature-banner--inset .fb-overlay {
position: absolute;
bottom: clamp(20px, 4vw, 48px);
left: clamp(20px, 4vw, 48px);
right: clamp(20px, 4vw, 48px);
max-width: 600px;
background: var(--c-paper);
color: var(--c-ink);
padding: clamp(20px, 3vw, 36px);
border: 1px solid var(--c-line);
}
@media (max-width: 680px) {
.couture-feature-banner--inset .fb-image img { aspect-ratio: 4/3; }
.couture-feature-banner--inset .fb-overlay {
position: static;
margin: -16px 16px 0;
max-width: none;
}
}
/* Variant: split — image on the left, copy on the right (50/50) */
.couture-feature-banner--split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: stretch;
}
.couture-feature-banner--split .fb-image img {
height: 100%;
aspect-ratio: auto;
min-height: 380px;
}
.couture-feature-banner--split .fb-copy {
padding: clamp(28px, 5vw, 64px);
display: flex;
flex-direction: column;
justify-content: center;
background: var(--c-paper-2, var(--c-paper));
}
@media (max-width: 760px) {
.couture-feature-banner--split { grid-template-columns: 1fr; }
.couture-feature-banner--split .fb-image img { min-height: auto; aspect-ratio: 16/9; }
}
/* Variant: text-only (image generation failed / copy-only banner) */
.couture-feature-banner--text .fb-frame {
background: var(--c-paper-2, var(--c-paper));
padding: clamp(40px, 8vw, 96px);
text-align: center;
border-top: 1px solid var(--c-line);
border-bottom: 1px solid var(--c-line);
}
.couture-feature-banner--text .fb-headline { margin-left: auto; margin-right: auto; max-width: 16ch; }
.couture-feature-banner--text .fb-sub { margin-left: auto; margin-right: auto; }
/* V4.14 — Footer fineprint row (legal links: terms / privacy / returns
/ shipping / cookies). Appended to every footer variant by
`_legalLinkRow()` in nav.js. Visual: muted, small, all-link-no-bullet,
centered or left-aligned per footer's natural alignment. */
.couture-fineprint {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--c-line);
font-family: var(--c-mono);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--c-muted);
display: flex;
flex-wrap: wrap;
gap: 8px 6px;
align-items: center;
justify-content: center;
}
.couture-fineprint a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color .15s, color .15s;
}
.couture-fineprint a:hover { color: var(--c-ink); border-bottom-color: var(--c-ink); }
.couture-fineprint .couture-fineprint-sep { opacity: 0.4; user-select: none; }
/* Brutalist + spec footers prefer flush-left alignment */
.couture-footer--spec .couture-fineprint,
.couture-footer--stamp .couture-fineprint,
.couture-footer--colophon .couture-fineprint { justify-content: flex-start; }
/* ============================================================
V4.1 DNA AXIS OVERRIDES — generated per site
spacing_scale=tight · grid_density=3up · accent_application=one-detail
headline_treatment=large-display · navigation_density=sparse
============================================================ */
:root {
--c-section-pad: 90px;
--c-rhythm: 1.4;
--c-wrap-max: 1140px;
--c-grid-cols: repeat(3, minmax(0, 1fr));
--c-grid-gap: 36px;
}
.couture-section { padding-block: var(--c-section-pad); }
.couture-section .wrap, .couture-page > * { max-width: var(--c-wrap-max); }
body { line-height: var(--c-rhythm); }
.couture-products .grid, .lookbook-grid, .product-grid, .couture-shelf, .couture-issues-grid, .couture-products-carousel .shelf { display: grid; grid-template-columns: var(--c-grid-cols); gap: var(--c-grid-gap); }
a:not(.brand-logo) { text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.couture-section-head h2, .couture-page-head h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); letter-spacing: -.02em; line-height: 1.02; font-weight: 700; }
.couture-nav { padding: 24px 32px; gap: 36px; font-size: 0.9rem; } .couture-nav .nav-link { letter-spacing: .08em; text-transform: uppercase; font-size: 0.78rem; }
/* --- shelf-card polish (V4.1) ----------------------------------- */
.shelf-card {
transition: transform .35s ease, box-shadow .35s ease;
position: relative;
}
.shelf-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 60px -28px color-mix(in oklab, var(--c-ink) 55%, transparent);
}
.shelf-card .shelf-card-img-link {
display: block; overflow: hidden; position: relative;
}
.shelf-card .shelf-card-img-link img {
transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.shelf-card:hover .shelf-card-img-link img {
transform: scale(1.04);
}
.shelf-card .shelf-price {
margin-top: 8px; font-weight: 600; font-size: 1.05rem;
}
.shelf-card .shelf-price-amt { color: var(--c-ink); }
.shelf-card .shelf-origin {
font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
color: color-mix(in oklab, var(--c-ink) 60%, var(--c-paper));
margin-top: 4px;
}
/* === ARCHETYPE: storyteller =================================== */
.couture-archetype-storyteller .couture-section { padding-block: clamp(80px, 10vw, 140px); }
.couture-archetype-storyteller .couture-section + .couture-section { border-top: 1px dashed color-mix(in oklab, var(--c-line) 60%, transparent); }
.couture-archetype-storyteller .couture-section .lede p:first-of-type::first-letter {
font-family: var(--c-display); font-size: 4em; line-height: .82;
float: left; padding: .04em .15em 0 0; font-weight: 400;
color: var(--c-accent);
}
.couture-archetype-storyteller blockquote.callout p,
.couture-archetype-storyteller .pullquote {
font-family: var(--c-display); font-style: italic;
font-size: clamp(22px, 2.6vw, 32px); line-height: 1.25;
max-width: 28ch; margin: 32px auto;
text-align: center; color: var(--c-ink-soft, var(--c-ink));
}
.couture-archetype-storyteller blockquote.callout cite {
display: block; text-align: right; font-style: normal;
font-family: var(--c-mono); font-size: 11px;
letter-spacing: .14em; text-transform: uppercase;
color: var(--c-muted); margin-top: 12px;
}
.couture-archetype-storyteller .couture-section-head h2 {
font-family: var(--c-display); font-weight: 300; font-style: italic;
letter-spacing: -.01em;
}