/* ============================================================
SKAYA — Quiet Luxury Theme
skaya.css · all styles (no framework, no preprocessor)
Type: Italiana · Outfit · Cormorant Garamond · Fragment Mono
============================================================ */
/* ============================================================
SKAYA — Vol. 03 · The Index, enhanced
Same maison, raised to atelier craft: intro curtain, magnetic
cursor, kinetic type, grain, parallax, scroll progress.
============================================================ */
:root {
--alabaster: #F4F1EA;
--paper: #EFEBE2;
--porcelain: #E7E2D7;
--greige: #D6D0C3;
--stone: #6F675A; /* was #9C9485 — 2.66:1 on alabaster, unreadable; now ~4.9:1 */
--champagne: #7E6C4B; /* was #AD9974 — 2.45:1 on alabaster; now ~4.5:1 */
--champagne-d:#8E7B58;
--ink: #1A1815;
--ink-soft: #2A2722;
--hairline: rgba(26, 24, 21, 0.14);
--hairline-strong: rgba(26, 24, 21, 0.30);
--hairline-ink: rgba(244, 241, 234, 0.18);
--display: "Italiana", serif;
--body: "Outfit", sans-serif;
--editorial: "Cormorant Garamond", serif;
--mono: "Fragment Mono", ui-monospace, monospace;
--pad-x: clamp(20px, 4vw, 54px); /* was 6vw/90px — narrower gutters, wider content */
--ease: cubic-bezier(.19, 1, .22, 1);
--ease-soft: cubic-bezier(.4, 0, .1, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--alabaster);
color: var(--ink);
font-family: var(--body);
font-weight: 300;
font-size: 18px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
body.lock { overflow: hidden; height: 100vh; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
::selection { background: var(--ink); color: var(--alabaster); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
/* ---------- type primitives ---------- */
.mono {
font-family: var(--mono); font-weight: 400; text-transform: uppercase;
letter-spacing: 0.12em; font-size: 16px; color: var(--stone);
}
.mono--ink { color: var(--ink); }
.eyebrow {
font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.26em;
font-size: 16px; color: var(--champagne);
}
.serif-it { font-family: var(--editorial); font-style: italic; font-weight: 400; color: var(--ink-soft); }
.lede { font-weight: 300; line-height: 1.75; font-size: clamp(16.8px, 1.38vw, 19.8px); max-width: 46ch; color: var(--ink-soft); }
.muted { color: var(--stone); }
.vrt { writing-mode: vertical-rl; text-orientation: mixed; }
/* ---------- links / buttons ---------- */
.arrowlink {
display: inline-flex; align-items: center; gap: 0.85em;
font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.2em;
font-size: 16px; color: var(--ink); padding-bottom: 5px;
border-bottom: 1px solid var(--hairline-strong);
transition: border-color .4s var(--ease), gap .4s var(--ease);
}
.arrowlink:hover { gap: 1.4em; border-color: var(--ink); }
.arrowlink--ink { color: var(--alabaster); border-color: var(--hairline-ink); }
.arrowlink--ink:hover { border-color: var(--alabaster); }
.arrowlink .ar { transition: transform .4s var(--ease); }
.arrowlink:hover .ar { transform: translateX(4px); }
.icon-btn {
width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hairline);
display: inline-flex; align-items: center; justify-content: center; color: var(--ink); flex: none;
transition: border-color .4s var(--ease), background .4s var(--ease);
}
.icon-btn:hover { border-color: var(--hairline-strong); background: rgba(214,208,195,0.3); }
.icon-btn svg { width: 15px; height: 15px; }
.ph { position: relative; background: var(--porcelain); overflow: hidden; }
.ph::after {
content: ""; position: absolute; inset: 0;
background-image: repeating-linear-gradient(135deg, transparent 0 12px, rgba(156,148,133,0.16) 12px 13px);
pointer-events: none;
}
figure.frame img { width: 100%; height: 100%; object-fit: cover; }
/* ============================================================
intro curtain
============================================================ */
.intro {
position: fixed; inset: 0; z-index: 200;
background: var(--ink);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 26px;
transition: transform 1.05s var(--ease);
will-change: transform;
}
.intro.done { transform: translateY(-101%); }
.intro__mark {
font-family: var(--display); text-transform: uppercase; color: var(--alabaster);
letter-spacing: 0.5em; text-indent: 0.5em; font-size: clamp(31.2px, 6vw, 62.4px);
overflow: hidden;
}
.intro__mark span { display: inline-block; transform: translateY(110%); animation: introUp .9s var(--ease) .15s forwards; }
@keyframes introUp { to { transform: none; } }
.intro__line {
width: clamp(160px, 22vw, 300px); height: 1px; background: rgba(244,241,234,0.18); position: relative; overflow: hidden;
}
.intro__line::after { content: ""; position: absolute; inset: 0; background: var(--champagne); transform: scaleX(0); transform-origin: left; animation: introFill 1.5s var(--ease-soft) .25s forwards; }
@keyframes introFill { to { transform: scaleX(1); } }
.intro__count { font-family: var(--mono); color: var(--stone); letter-spacing: 0.2em; font-size: 16px; }
/* ============================================================
scroll progress + section runner
============================================================ */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 90; pointer-events: none; }
.progress__fill { height: 100%; width: 0; background: var(--ink); transform-origin: left; }
.runner {
position: fixed; left: var(--pad-x); bottom: 22px; z-index: 60;
display: flex; align-items: center; gap: 12px; pointer-events: none;
/* Was mix-blend difference — over text it produced unreadable mush now
that gutters are slimmer. A translucent chip stays legible anywhere. */
color: var(--ink); background: rgba(244,241,234,0.9);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
padding: 8px 14px;
transition: opacity .4s var(--ease);
}
.runner__no { font-family: var(--mono); letter-spacing: 0.16em; font-size: 16px; }
.runner__bar { width: 30px; height: 1px; background: currentColor; opacity: .5; }
.runner__name { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.2em; font-size: 16px; }
/* Hidden alongside the single-column breakpoint — between 761-980px it
floated over the stacked sections' text. */
@media (max-width: 980px) { .runner { display: none; } }
/* grain overlay */
.grain {
position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: 0.045;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
/* ============================================================
custom cursor
============================================================ */
.cursor { position: fixed; top: 0; left: 0; z-index: 150; pointer-events: none; mix-blend-mode: difference; }
.cursor__dot { position: fixed; top: 0; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.cursor__ring {
position: fixed; top: 0; left: 0; width: 38px; height: 38px; border-radius: 50%;
border: 1px solid rgba(255,255,255,0.8); transform: translate(-50%, -50%) scale(1);
transition: width .4s var(--ease), height .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
display: flex; align-items: center; justify-content: center;
}
.cursor__ring.grow { width: 74px; height: 74px; background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.95); }
.cursor__label {
font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px;
color: #fff; opacity: 0; transform: scale(.6); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cursor__ring.grow .cursor__label { opacity: 1; transform: scale(1); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
body.has-cursor { cursor: none; }
body.has-cursor a, body.has-cursor button, body.has-cursor .strip { cursor: none; }
/* reveal + masked reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.mask { display: block; overflow: hidden; }
.mask > span { display: block; transform: translateY(112%); transition: transform 1s var(--ease); }
.mask.in > span { transform: none; }
/* ============================================================
header
============================================================ */
.topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 70;
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
padding: 18px var(--pad-x);
mix-blend-mode: difference; color: #fff;
transition: transform .5s var(--ease);
}
.topbar.hide { transform: translateY(-120%); }
/* The bar itself is a full-width transparent strip — it must not eat
hovers/clicks in its empty regions; only the controls are targets. */
.topbar { pointer-events: none; }
.topbar a, .topbar button { pointer-events: auto; }
.topbar a, .topbar button, .topbar span { color: #fff; }
.topbar__brand {
font-family: var(--display); text-transform: uppercase; letter-spacing: 0.5em; text-indent: 0.5em;
font-size: clamp(33.6px, 4.32vw, 52.8px); text-align: center;
}
.topbar__nav { display: flex; gap: clamp(16px, 2vw, 34px); }
.topbar__nav a {
font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 16px;
opacity: 0.78; position: relative; transition: opacity .35s var(--ease);
}
/* Text is ~26px tall inside a ~90px bar — expand the hit area so the
hover doesn't require pixel-precise aim (no layout impact). */
.topbar__nav a::before,
.topbar__right a::before,
.topbar__right button::before { content: ""; position: absolute; inset: -24px -10px; }
.topbar__right a, .topbar__right button { position: relative; }
.topbar__nav a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.topbar__nav a:hover { opacity: 1; }
.topbar__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.topbar__right { display: flex; justify-content: flex-end; align-items: center; gap: 20px; }
.topbar__meta { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px; opacity: 0.78; }
.topbar__bag { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px; display: inline-flex; align-items: center; gap: 7px; }
.topbar__bag .dot { width: 26px; height: 26px; border-radius: 50%; border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.burger { display: none; }
.edge { position: fixed; top: 0; bottom: 0; z-index: 40; width: var(--pad-x); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.edge span { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.34em; font-size: 16px; color: var(--stone); }
.edge--l { left: 0; } .edge--r { right: 0; }
@media (max-width: 1100px) { .edge { display: none; } }
/* ============================================================
1 — HERO
============================================================ */
.hero {
position: relative; min-height: calc(100svh / var(--page-zoom, 1));
padding: clamp(92px, 12vh, 120px) var(--pad-x) clamp(30px, 5vh, 54px);
display: grid; grid-template-columns: 1.15fr 0.85fr; grid-template-rows: 1fr auto;
gap: clamp(20px, 4vw, 56px); align-items: end;
}
.hero__ghost {
position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em; text-indent: 0.16em;
font-size: clamp(110px, 36vw, 110px); line-height: 0.8; color: transparent;
-webkit-text-stroke: 1px rgba(26,24,21,0.10); white-space: nowrap; pointer-events: none; user-select: none; z-index: 0;
will-change: transform;
}
.hero__copy { position: relative; z-index: 3; grid-row: 1; align-self: end; }
.hero__season { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(20px, 4vh, 40px); overflow: hidden; }
.hero__season > * { transform: translateY(110%); transition: transform .9s var(--ease) .2s; }
body.loaded .hero__season > * { transform: none; }
.hero__season::before { content: ""; width: clamp(28px, 4vw, 60px); height: 1px; background: var(--hairline-strong); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .4s; flex: none; }
body.loaded .hero__season::before { transform: scaleX(1); }
.hero__title {
font-family: var(--display); text-transform: uppercase; line-height: 0.9; letter-spacing: 0.01em;
font-size: clamp(62.4px, 11.4vw, 110px); color: var(--ink);
}
.hero__title em {
display: block; font-family: var(--editorial); font-style: italic; text-transform: none; font-weight: 400;
letter-spacing: 0; color: var(--champagne); font-size: clamp(40.8px, 7.44vw, 110px); line-height: 1; margin-left: clamp(20px, 9vw, 150px);
}
.hero__sub { margin: clamp(22px, 4vh, 38px) 0 clamp(24px, 4vh, 36px); }
.hero__sub, .hero__cta { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
body.loaded .hero__sub { transition-delay: .75s; opacity: 1; transform: none; }
body.loaded .hero__cta { transition-delay: .9s; opacity: 1; transform: none; }
.hero__figwrap { position: relative; z-index: 2; grid-column: 2; grid-row: 1 / span 2; align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-end; }
/* Width also capped by viewport HEIGHT (aspect 3/4.05 → h = w × 1.35):
the figure must never stretch the one-screen hero past the fold.
svh is divided by the page zoom — see the large-screens block. */
.hero__figure { position: relative; width: min(100%, 560px, calc((100svh / var(--page-zoom, 1) - 300px) * 0.74)); aspect-ratio: 3 / 4.05; overflow: hidden; }
.hero__figure::before { content: ""; position: absolute; inset: 0; background: var(--ink); z-index: 4; transform: translateY(0); transition: transform 1.1s var(--ease) .35s; }
body.loaded .hero__figure::before { transform: translateY(-101%); }
.hero__figure img { width: 100%; height: 112%; object-fit: cover; transform: scale(1.15); transition: transform 1.6s var(--ease) .4s; will-change: transform; }
body.loaded .hero__figure img { transform: scale(1); }
.hero__figcap { position: absolute; right: calc(100% + 14px); bottom: 0; white-space: nowrap; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.3em; font-size: 16px; color: var(--stone); }
.hero__figmeta { position: absolute; left: -1px; top: -1px; z-index: 5; background: var(--alabaster); border: 1px solid var(--hairline); padding: 9px 13px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 16px; color: var(--ink); }
.hero__foot { grid-column: 1; grid-row: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-top: 1px solid var(--hairline); padding-top: 18px; position: relative; z-index: 3; opacity: 0; transition: opacity 1s var(--ease) 1s; }
body.loaded .hero__foot { opacity: 1; }
.hero__scroll { display: flex; align-items: center; gap: 12px; }
.hero__scroll .line { width: 46px; height: 1px; background: var(--hairline-strong); position: relative; overflow: hidden; }
.hero__scroll .line::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateX(-100%); animation: sweep 2.6s var(--ease) infinite; }
@keyframes sweep { 0%{transform:translateX(-100%);} 60%,100%{transform:translateX(100%);} }
/* ============================================================
marquee ticker
============================================================ */
.ticker { border-block: 1px solid var(--hairline); overflow: hidden; padding: 18px 0; background: var(--paper); }
.ticker__track { display: flex; width: max-content; animation: tick 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__g { display: flex; flex: none; }
.ticker__i { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em; font-size: clamp(19.2px, 2.4vw, 33.6px); color: var(--ink); padding: 0 clamp(20px, 3vw, 44px); white-space: nowrap; display: inline-flex; align-items: center; gap: clamp(20px,3vw,44px); }
.ticker__i .dia { color: var(--champagne); font-size: 0.5em; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ============================================================
2 — THE COLLECTIONS (editorial plates)
============================================================ */
.section { padding: clamp(56px, 8vh, 100px) 0; }
.wrap { padding-inline: var(--pad-x); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding-bottom: clamp(18px, 3vh, 32px); margin-bottom: clamp(6px, 1vh, 12px); }
.sec-head__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(34px, 4.6vw, 66px); line-height: 1; }
.sec-head__title em { font-family: var(--editorial); font-style: italic; text-transform: none; color: var(--champagne); letter-spacing: 0; }
/* Centre-stage category carousel: ~4 cards in view, the centred one
enlarged and in full colour; arrows / drag / native swipe to flip. */
.platesc__controls { display: flex; align-items: center; gap: 16px; }
.platesc__controls .mono { margin-inline-end: 8px; }
.pc-arrow { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hairline-strong); color: var(--ink); background: none; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), opacity .3s; }
.pc-arrow svg { width: 18px; height: 18px; }
.pc-arrow:hover { background: var(--ink); color: var(--alabaster); border-color: var(--ink); }
.pc-arrow[disabled] { opacity: .3; pointer-events: none; }
.platesc { margin-inline: calc(-1 * var(--pad-x)); }
.platesc__track {
display: flex; align-items: flex-end; gap: clamp(14px, 1.8vw, 26px);
overflow-x: auto; scroll-snap-type: x proximity;
padding: clamp(18px, 3vh, 30px) calc(50% - (clamp(210px, 23.5vw, 340px) / 2)) 8px;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.platesc__track::-webkit-scrollbar { display: none; }
.platesc__track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
/* Suppress every transition for the one frame around an infinite-loop
teleport, so the equivalent clone appears already-staged. */
.platesc__track.pc-noanim .pcard__inner,
.platesc__track.pc-noanim .pcard__fig img,
.platesc__track.pc-noanim .pcard__fig::before,
.platesc__track.pc-noanim .pcard__desc,
.platesc__track.pc-noanim .pcard__cta,
.platesc__track.pc-noanim .pcard__name::before { transition: none !important; }
.pcard { flex: 0 0 clamp(210px, 23.5vw, 340px); scroll-snap-align: center; display: block; position: relative; }
.pcard__inner { transform: scale(.87); transform-origin: center bottom; transition: transform .7s var(--ease); will-change: transform; }
.pcard__meta { padding-bottom: 10px; }
.pcard__meta .mono { transition: color .5s var(--ease); }
.pcard__fig { position: relative; overflow: hidden; background: var(--porcelain); aspect-ratio: 3 / 4; }
/* Muting the side cards uses an alabaster wash (opacity-only = composited)
instead of a grayscale() filter — filter transitions repaint the full
photo every frame and made drag-scrolling stutter. */
.pcard__fig img { width: 100%; height: 100%; object-fit: cover; opacity: .88; transition: opacity .6s var(--ease); }
.pcard__fig::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--alabaster); opacity: .55; pointer-events: none; transition: opacity .6s var(--ease); }
.pcard__fig::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(244, 241, 234, 0.45); pointer-events: none; z-index: 2; }
.pcard__body { padding-top: 14px; }
.pcard__name { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(20px, 1.9vw, 32px); line-height: 1.05; color: var(--ink); position: relative; display: inline-block; padding-bottom: 6px; }
.pcard__name::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; height: 1px; width: 100%; background: var(--hairline-strong); }
.pcard__name::before { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; height: 1px; width: 0; background: var(--champagne); transition: width .65s var(--ease); z-index: 1; }
.pcard__desc { color: var(--stone); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5; margin-top: 8px; max-width: 30ch; opacity: 0; transform: translateY(8px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.pcard__cta { display: inline-flex; align-items: center; gap: 0.8em; margin-top: 12px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.2em; font-size: 13px; color: var(--champagne); opacity: 0; transform: translateY(8px); transition: opacity .55s var(--ease) .06s, transform .55s var(--ease) .06s, gap .5s var(--ease); }
.pcard__cta svg { width: 17px; height: 17px; }
.pcard.is-center { z-index: 2; }
.pcard.is-center .pcard__inner { transform: scale(1.06); }
.pcard.is-center .pcard__fig img { opacity: 1; }
.pcard.is-center .pcard__fig::before { opacity: 0; }
.pcard.is-center .pcard__desc, .pcard.is-center .pcard__cta { opacity: 1; transform: none; }
.pcard.is-center .pcard__name::before { width: 100%; }
@media (hover: hover) {
.platesc__track { cursor: grab; }
.pcard:hover .pcard__cta { gap: 1.4em; }
}
@media (max-width: 700px) {
.platesc__track { padding-inline: calc(50% - 31vw); gap: 14px; }
.pcard { flex-basis: 62vw; }
.pcard__inner { transform: scale(.92); }
.pcard.is-center .pcard__inner { transform: scale(1.02); }
.pcard__desc { display: none; }
.pcard__name { display: block; width: max-content; max-width: 100%; }
.pc-arrow { width: 38px; height: 38px; }
}
/* ============================================================
3 — THE COLLECTION (film strip)
============================================================ */
.strip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 0 var(--pad-x) clamp(22px, 3vh, 34px); }
.strip { display: flex; gap: clamp(16px, 2vw, 32px); overflow-x: auto; padding: 4px var(--pad-x) clamp(20px, 3vh, 34px); scroll-snap-type: x mandatory; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip.dragging { scroll-snap-type: none; }
.card { flex: none; width: clamp(248px, 28vw, 380px); scroll-snap-align: start; }
.card__top { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--hairline-strong); padding: 10px 0 14px; }
.card__no { font-family: var(--mono); font-size: 16px; color: var(--ink); }
.card__cat { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px; color: var(--stone); }
.card__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--porcelain); }
.card__media img { width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.card__media .ph__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px; color: var(--stone); white-space: nowrap; border: 1px solid var(--hairline); background: rgba(244,241,234,0.6); padding: 7px 11px; }
.card__media a:not(.card__plus) { transition: transform 1.3s var(--ease); }
.card__plus { position: absolute; inset-inline-end: 14px; bottom: 14px; width: 40px; height: 40px; background: rgba(244, 241, 234, 0.95); border: 1px solid var(--hairline-strong); color: var(--ink); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); z-index: 3; }
.card__plus svg { width: 15px; height: 15px; }
/* Stock chips on the media: quiet low-stock urgency, muted sold-out. */
.card__stock { position: absolute; inset-inline-start: 14px; bottom: 14px; z-index: 3; font-family: var(--mono); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; padding: 8px 12px; pointer-events: none; }
.card__stock--low { background: rgba(244, 241, 234, 0.94); color: var(--champagne); border: 1px solid var(--hairline-strong); }
.card__stock--out { background: rgba(26, 24, 21, 0.9); color: var(--alabaster); border: 1px solid var(--ink); }
.card--soldout .card__media img { opacity: 0.45; filter: grayscale(60%); }
.card--soldout .card__name a, .card--soldout .card__price { color: var(--stone); }
.card__foot { display: flex; align-items: baseline; justify-content: space-between; padding-top: 14px; gap: 12px; }
.card__name { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(19.2px, 1.8vw, 24px); position: relative; display: inline-block; padding-bottom: 5px; }
.card__name::before { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; height: 1px; width: 0; background: var(--champagne); transition: width .6s var(--ease); }
.card__no { transition: color .45s var(--ease); }
.card__price { font-family: var(--mono); font-size: 18px; color: var(--ink); font-weight: 500; }
/* Hover: a slow editorial zoom (on the inner link — the img itself is
driven by the scroll parallax), the quick-add rising in quietly, and
a champagne rule drawing under the name. */
@media (hover: hover) {
.card:hover .card__media a:not(.card__plus) { transform: scale(1.045); }
.card:hover .card__plus { opacity: 1; transform: none; }
.card__plus:hover { background: var(--ink); color: var(--alabaster); border-color: var(--ink); }
.card:hover .card__name::before { width: 100%; }
.card:hover .card__no { color: var(--champagne); }
}
/* Touch: no hover to reveal it — quick-add stays visible. */
@media (hover: none) {
.card__plus { opacity: 1; transform: none; }
}
.strip-rail { display: flex; align-items: center; gap: 18px; padding: clamp(18px, 3vh, 28px) var(--pad-x) 0; }
.strip-rail__count { font-family: var(--mono); font-size: 16px; color: var(--stone); letter-spacing: 0.12em; white-space: nowrap; }
.strip-rail__bar { flex: 1; height: 1px; background: var(--hairline); position: relative; }
.strip-rail__thumb { position: absolute; top: -1px; left: 0; height: 3px; width: 22%; background: var(--ink); transition: left .15s linear; }
.strip-rail__arrows { display: flex; gap: 10px; }
/* ============================================================
4 — INK CHAPTER
============================================================ */
.chapter { background: var(--ink); color: var(--alabaster); padding: clamp(64px, 10vh, 120px) var(--pad-x); position: relative; overflow: hidden; }
.chapter__ghost { position: absolute; right: -0.06em; top: -0.16em; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: clamp(108px, 26.4vw, 110px); line-height: 0.8; color: transparent; -webkit-text-stroke: 1px rgba(244,241,234,0.12); white-space: nowrap; pointer-events: none; user-select: none; will-change: transform; }
.chapter__grid { position: relative; z-index: 2; max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.chapter__stack { position: relative; min-height: clamp(420px, 56vw, 640px); }
.chapter__fig { position: absolute; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,0.6); will-change: transform; }
.chapter__fig img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.chapter__fig--a { width: 62%; aspect-ratio: 3/4; left: 0; top: 0; z-index: 2; }
.chapter__fig--b { width: 50%; aspect-ratio: 3/4; right: 0; bottom: 0; z-index: 3; }
.chapter__figcap { position: absolute; left: -1px; bottom: -26px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.22em; font-size: 16px; color: var(--stone); }
.chapter__copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 3vh, 30px); }
.chapter__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.95; font-size: clamp(48px, 7.2vw, 110px); }
.chapter__title em { font-family: var(--editorial); font-style: italic; text-transform: none; color: var(--champagne); letter-spacing: 0; }
.chapter__quote { font-family: var(--editorial); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.88vw, 36px); line-height: 1.45; color: rgba(244,241,234,0.78); max-width: 22ch; }
.chapter .lede { color: rgba(244,241,234,0.6); }
.chapter__meta { display: flex; gap: clamp(28px, 5vw, 60px); margin-top: 6px; }
.chapter__meta div span { display: block; }
.chapter__meta .k { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px; color: var(--stone); margin-bottom: 8px; }
.chapter__meta .v { font-family: var(--display); font-size: clamp(21.6px, 2.16vw, 28.8px); }
/* ============================================================
5 — ANATOMY (interactive hotspot study)
============================================================ */
.anatomy { background: var(--paper); border-block: 1px solid var(--hairline); }
.anat { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(28px, 5vw, 78px); align-items: stretch; }
.anat__stage { position: relative; }
.anat__figure { position: relative; width: 100%; height: 100%; min-height: clamp(420px, 58vw, 660px); overflow: hidden; background: var(--porcelain); }
.anat__figure img { width: 100%; height: 100%; object-fit: cover; }
.anat__nlabel { position: absolute; left: -1px; top: -1px; z-index: 3; background: var(--paper); border: 1px solid var(--hairline); padding: 9px 13px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 16px; color: var(--ink); }
.hot {
position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%;
border: 1px solid rgba(244,241,234,0.85); background: rgba(26,24,21,0.28);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
display: grid; place-items: center; color: var(--alabaster);
font-family: var(--mono); font-size: 16px; z-index: 4;
transition: background .4s var(--ease), border-color .4s var(--ease), transform .45s var(--ease);
}
.hot::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(244,241,234,0.55); animation: hotPulse 2.6s ease-out infinite; }
@keyframes hotPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }
.hot:hover { transform: translate(-50%, -50%) scale(1.14); }
.hot.active { background: var(--champagne); border-color: var(--champagne); transform: translate(-50%, -50%) scale(1.14); }
.hot.active::before { border-color: rgba(173,153,116,0.7); }
.anat__panel { display: flex; flex-direction: column; justify-content: center; }
.anat__bodies { position: relative; }
.anat__detail { display: none; }
.anat__detail.is-on { display: block; animation: anatIn .55s var(--ease); }
@keyframes anatIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.anat__cat { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.26em; font-size: 16px; color: var(--champagne); }
.anat__idx { font-family: var(--display); font-size: clamp(52.8px, 7.8vw, 110px); line-height: 0.8; letter-spacing: 0.01em; color: var(--ink); margin: 14px 0 6px; }
.anat__idx em { font-family: var(--editorial); font-style: italic; color: var(--champagne); }
.anat__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(28.8px, 3.84vw, 52.8px); line-height: 1; margin-bottom: clamp(14px,2vh,20px); }
.anat__desc { max-width: 40ch; }
.anat__specs { margin-top: clamp(20px, 3vh, 30px); margin-bottom: 0; border-top: 1px solid var(--hairline); }
.anat__spec { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--hairline); margin: 0; }
.anat__spec dt { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px; color: var(--stone); margin: 0; }
.anat__spec dd { margin: 0; font-family: var(--display); font-size: clamp(16.8px, 1.68vw, 21.6px); letter-spacing: 0.02em; color: var(--ink); text-align: right; }
.anat__nav { display: flex; gap: 10px; margin-top: clamp(24px, 4vh, 34px); }
.anat__nav button { font-family: var(--mono); font-size: 16px; letter-spacing: 0.1em; color: var(--stone); width: 46px; height: 46px; border: 1px solid var(--hairline); border-radius: 50%; display: grid; place-items: center; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.anat__nav button:hover { border-color: var(--hairline-strong); color: var(--ink); }
.anat__nav button.active { background: var(--ink); color: var(--alabaster); border-color: var(--ink); }
/* ============================================================
6 — DIPTYCH
============================================================ */
/* Kept intentionally more compact than the other home sections —
capped width + smaller numerals/titles (user request). */
.diptych { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; max-width: 1060px; margin-inline: auto; }
.dip { position: relative; }
.dip:nth-child(2) { margin-top: clamp(32px, 9vh, 104px); }
.dip__no { font-family: var(--display); font-size: clamp(46px, 6.2vw, 80px); line-height: 0.8; letter-spacing: 0.01em; margin-bottom: clamp(14px, 2vh, 20px); }
.dip__no em { font-family: var(--editorial); font-style: italic; color: var(--champagne); }
.dip__media { aspect-ratio: 4/5; overflow: hidden; margin-bottom: clamp(16px, 2.5vh, 24px); }
.dip__media img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.dip__cat { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.2em; font-size: 15px; color: var(--stone); }
.dip__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(25px, 3vw, 38px); margin: 12px 0 12px; }
/* ============================================================
6 — NEWSLETTER
============================================================ */
.signup { text-align: center; }
.signup__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; line-height: 0.98; font-size: clamp(48px, 8.4vw, 110px); }
.signup__title em { font-family: var(--editorial); font-style: italic; text-transform: none; color: var(--champagne); letter-spacing: 0; }
.signup__copy { max-width: 44ch; margin: clamp(20px,3vh,30px) auto clamp(34px,5vh,50px); }
.signup__form { display: flex; align-items: flex-end; gap: 18px; max-width: 560px; margin: 0 auto; border-bottom: 1px solid var(--hairline-strong); padding-bottom: 12px; transition: border-color .4s var(--ease); }
.signup__form:focus-within { border-color: var(--ink); }
.signup__form input { flex: 1; border: none; background: none; outline: none; font-family: var(--display); font-size: clamp(21.6px, 2.64vw, 33.6px); color: var(--ink); padding: 4px 0; }
.signup__form input::placeholder { color: var(--stone); }
.signup__submit { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.2em; font-size: 16px; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding-bottom: 4px; transition: gap .4s var(--ease); }
.signup__submit:hover { gap: 16px; }
.signup__note { margin-top: 16px; }
/* ============================================================
7 — FOOTER
============================================================ */
.footer { background: var(--ink); color: var(--alabaster); padding: clamp(52px, 8vh, 88px) var(--pad-x) 36px; position: relative; overflow: hidden; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 5vw, 70px); position: relative; z-index: 2; padding-bottom: clamp(50px, 8vh, 90px); }
.footer__brand { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em; text-indent: 0.16em; font-size: clamp(40.8px, 6vw, 76.8px); line-height: 0.9; }
.footer__tag { font-family: var(--editorial); font-style: italic; color: rgba(244,241,234,0.6); font-size: clamp(19.2px, 2.16vw, 25.2px); margin-top: 18px; }
.footer__col h4 { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.2em; font-size: 16px; color: var(--stone); font-weight: 400; margin-bottom: 20px; }
.footer__col a { display: inline-block; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 16px; color: rgba(244,241,234,0.78); padding: 6px 0; position: relative; transition: color .35s var(--ease), padding-left .35s var(--ease); }
.footer__col a::before { content: "→"; position: absolute; left: -16px; opacity: 0; transition: opacity .35s var(--ease); }
.footer__col a:hover { color: var(--alabaster); padding-left: 16px; }
.footer__col a:hover::before { opacity: 1; }
.footer__col a + a { display: block; }
.footer__bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--hairline-ink); padding-top: 26px; position: relative; z-index: 2; }
.footer__bar span { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px; color: rgba(244,241,234,0.55); }
.footer__top-btn { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px; color: rgba(244,241,234,0.78); display: inline-flex; align-items: center; gap: 8px; transition: gap .35s var(--ease); }
.footer__top-btn:hover { gap: 14px; }
.footer__ghost { position: absolute; left: 50%; bottom: -0.22em; transform: translateX(-50%); font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; text-indent: 0.1em; font-size: clamp(110px, 38.4vw, 110px); line-height: 0.8; color: transparent; -webkit-text-stroke: 1px rgba(244,241,234,0.07); white-space: nowrap; pointer-events: none; user-select: none; }
/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 110; background: var(--alabaster); transform: translateY(-100%); visibility: hidden; transition: transform .6s var(--ease), visibility 0s linear .6s; display: flex; flex-direction: column; padding: 24px var(--pad-x); }
.drawer.open { transform: none; visibility: visible; transition: transform .6s var(--ease), visibility 0s; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__brand { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.4em; text-indent: 0.4em; font-size: 21.6px; }
.drawer__nav { margin-top: 12vh; display: flex; flex-direction: column; gap: 22px; }
.drawer__nav a { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(36px, 10.8vw, 55.2px); }
.drawer__nav a small { font-family: var(--mono); font-size: 16px; color: var(--stone); letter-spacing: 0.16em; margin-right: 14px; }
.drawer__foot { margin-top: auto; display: flex; justify-content: space-between; }
.drawer__foot span { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 16px; color: var(--stone); }
/* ============================================================
responsive
============================================================ */
@media (max-width: 980px) {
.topbar__nav, .topbar__meta { display: none; }
.burger { display: inline-flex; }
.hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: auto; }
.hero__figwrap { grid-column: 1; grid-row: 2; justify-content: flex-start; }
.hero__figure { width: min(78%, 380px); }
.hero__foot { grid-column: 1; grid-row: 3; }
.hero__ghost { top: 26%; }
.hero__figcap { display: none; }
.chapter__grid { grid-template-columns: 1fr; }
/* Height follows the stack's real width (figures are %-sized with 3/4
aspect), instead of 130vw which left a huge empty gap at 560-980px. */
.chapter__stack { min-height: 0; aspect-ratio: 100 / 129; max-width: 460px; }
.footer__top { grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: 1 / -1; }
.diptych { grid-template-columns: 1fr; gap: clamp(40px,9vw,60px); }
.dip:nth-child(2) { margin-top: 0; }
.anat { grid-template-columns: 1fr; gap: clamp(34px,7vw,48px); }
.anat__figure { min-height: clamp(440px, 118vw, 720px); }
}
@media (max-width: 560px) {
.hero__title { font-size: clamp(60px, 20.4vw, 108px); }
.hero__figure { width: 100%; }
.footer__top { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.reveal { opacity: 1 !important; transform: none !important; }
.mask > span { transform: none !important; }
.intro { display: none !important; }
.cursor { display: none !important; }
}
/* ============================================================
============ THEME PAGES — shared components =============
============================================================ */
/* ---- buttons ---- */
.button { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 16px; line-height: 1; padding: 16px 30px; background: var(--ink); color: var(--alabaster); border: 1px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 0.8em; cursor: pointer; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), gap .4s var(--ease); white-space: nowrap; }
.button:hover { background: var(--ink-soft); gap: 1.1em; }
.button--ghost { background: transparent; color: var(--ink); border-color: var(--hairline-strong); }
.button--ghost:hover { background: var(--ink); color: var(--alabaster); border-color: var(--ink); }
.button--light { background: var(--alabaster); color: var(--ink); border-color: var(--alabaster); }
.button--block { width: 100%; }
.button--sm { padding: 11px 18px; font-size: 16px; }
/* ---- forms ---- */
.field { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
.field > label { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px; color: var(--ink-soft); }
.field > label .req { color: #a03030; }
.field input, .field select, .field textarea { font-family: var(--body); font-weight: 400; font-size: 18px; letter-spacing: 0.01em; color: var(--ink); background: rgba(255,255,255,0.55); border: 1px solid rgba(26,24,21,0.5); padding: 15px 16px; outline: none; transition: border-color .35s var(--ease), background .35s var(--ease); border-radius: 0; -webkit-appearance: none; appearance: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--stone); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); background: #fff; }
.field textarea { min-height: 150px; resize: vertical; }
.field select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; cursor: pointer; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* A select's intrinsic width (longest option) must never widen its grid
track — clamp the track children and stretch the controls to fit. */
.field-row > .field { min-width: 0; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; }
.field-note { font-family: var(--mono); font-size: 16px; letter-spacing: 0.04em; color: var(--stone); margin-top: 4px; }
.check { display: flex; align-items: flex-start; gap: 11px; font-size: 16px; color: var(--ink-soft); cursor: pointer; line-height: 1.5; }
.check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
/* ---- interior header variant ---- */
.topbar--page { position: sticky; mix-blend-mode: normal; background: rgba(244,241,234,0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); }
.topbar--page a, .topbar--page button, .topbar--page span { color: var(--ink); }
.topbar--page .topbar__nav a { opacity: 0.82; }
.topbar--page .icon-btn { border-color: var(--hairline); }
.topbar__icons { display: flex; align-items: center; gap: 10px; }
.bagbtn { position: relative; }
.bagbtn__count { position: absolute; top: -5px; right: -5px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; background: var(--champagne); color: var(--alabaster); font-family: var(--mono); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
/* ---- page head ---- */
.page-head { padding: clamp(48px, 8vh, 90px) var(--pad-x) clamp(26px, 4.5vh, 46px); border-bottom: 1px solid var(--hairline); position: relative; }
.page-head__crumb { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 16px; color: var(--stone); display: flex; gap: 10px; align-items: center; margin-bottom: clamp(22px, 4vh, 40px); }
.page-head__crumb a:hover { color: var(--ink); }
.page-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.page-head__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.92; font-size: clamp(52.8px, 9.6vw, 110px); }
.page-head__title em { font-family: var(--editorial); font-style: italic; text-transform: none; color: var(--champagne); letter-spacing: 0; }
/* Product names are long dynamic strings — the editorial 110px scale is for short page titles. */
.page-head--product .page-head__title { font-size: clamp(32px, 4.2vw, 58px); line-height: 1; }
.page-head__lead { max-width: 42ch; }
/* ---- generic utilities ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 48px); }
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.media-frame { overflow: hidden; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
/* ============================================================
ABOUT
============================================================ */
.about-intro__media { aspect-ratio: 4/5; }
.about-quote { background: var(--ink); color: var(--alabaster); padding: clamp(56px,9vh,100px) var(--pad-x); text-align: center; }
.about-quote p { font-family: var(--editorial); font-style: italic; font-size: clamp(31.2px, 4.8vw, 67.2px); line-height: 1.3; max-width: 22ch; margin: 0 auto; }
.about-quote span { display: block; margin-top: 28px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.22em; font-size: 16px; color: var(--stone); }
.ethos { padding-block: 0; }
.ethos__item { border-top: 1px solid var(--hairline); padding-top: 22px; }
.ethos__no { font-family: var(--mono); font-size: 16px; color: var(--champagne); }
.ethos__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(24px, 2.4vw, 33.6px); margin: 14px 0 14px; }
.steps { border-top: 1px solid var(--hairline); }
.step-row { display: grid; grid-template-columns: 0.6fr 3fr 3fr; gap: clamp(16px,3vw,48px); align-items: start; padding: clamp(24px,4vh,44px) 0; border-bottom: 1px solid var(--hairline); }
.step-row__no { font-family: var(--display); font-size: clamp(36px,4.8vw, 67.2px); line-height: 0.85; color: var(--ink); }
.step-row__no em { font-family: var(--editorial); font-style: italic; color: var(--champagne); }
.step-row__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(24px,2.64vw, 36px); }
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,40px); border-top: 1px solid var(--hairline); padding-top: clamp(28px,4vh,44px); }
.stat__n { font-family: var(--display); font-size: clamp(48px,6vw, 91.2px); line-height: 0.9; }
.stat__n em { font-family: var(--editorial); font-style: italic; color: var(--champagne); }
.stat__k { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 16px; color: var(--stone); margin-top: 12px; }
/* ============================================================
SHOP
============================================================ */
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: clamp(24px,4vh,38px); border-bottom: 1px solid var(--hairline); margin-bottom: clamp(28px,4vh,48px); }
.chips { display: flex; flex-wrap: wrap; gap: clamp(10px,1.6vw,22px); }
.chip { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px; color: var(--stone); padding-bottom: 6px; border-bottom: 1px solid transparent; transition: color .35s var(--ease), border-color .35s var(--ease); cursor: pointer; }
.chip:hover { color: var(--ink); }
.chip.active { color: var(--ink); border-color: var(--champagne); }
.shop-sort { display: flex; align-items: center; gap: 12px; }
.shop-sort label { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px; color: var(--stone); }
.shop-sort select { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 16px; color: var(--ink); background: transparent; border: 1px solid var(--hairline-strong); padding: 9px 34px 9px 14px; outline: none; -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,2.4vw,40px) clamp(16px,2vw,32px); }
.shop-grid .card { width: auto; }
/* The image link only — .card__plus can also be an (quick view) and
must keep its 40px button size, not swell to cover the media. */
.card__media a:not(.card__plus) { display: block; width: 100%; height: 100%; }
.card.is-hidden { display: none; }
.shop-more { display: flex; justify-content: center; margin-top: clamp(40px,6vh,70px); }
/* ============================================================
PRODUCT (single item)
============================================================ */
.pdp { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px,5vw,80px); align-items: start; }
.pdp__gallery { display: grid; grid-template-columns: 76px 1fr; gap: 16px; position: sticky; top: 90px; }
.pdp__thumbs { display: flex; flex-direction: column; gap: 12px; }
.pdp__thumb { aspect-ratio: 3/4; overflow: hidden; border: 1px solid transparent; opacity: 0.6; transition: opacity .35s var(--ease), border-color .35s var(--ease); cursor: pointer; background: var(--porcelain); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb.active { opacity: 1; border-color: var(--ink); }
.pdp__stage { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--porcelain); }
.pdp__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.pdp__stage img.is-on { opacity: 1; }
.pdp__info { padding-top: 6px; }
.pdp__cat { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.22em; font-size: 16px; color: var(--champagne); }
.pdp__name { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(36px,4.8vw, 67.2px); line-height: 1; margin: 16px 0 14px; }
.pdp__price { font-family: var(--mono); font-size: clamp(22px, 2vw, 26px); color: var(--ink); letter-spacing: 0.04em; font-weight: 500; }
.pdp__desc { margin: clamp(22px,3vh,30px) 0; }
.opt { margin-bottom: 26px; }
.opt__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.opt__label { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px; color: var(--stone); }
.opt__val { font-family: var(--mono); font-size: 16px; color: var(--ink); }
.swatches { display: flex; gap: 12px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hairline); position: relative; cursor: pointer; transition: transform .3s var(--ease); }
.swatch::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--ink); opacity: 0; transition: opacity .3s var(--ease); }
.swatch.active::after { opacity: 1; }
.swatch:hover { transform: scale(1.08); }
.sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.size { min-width: 50px; padding: 12px 8px; text-align: center; border: 1px solid var(--hairline-strong); font-family: var(--mono); font-size: 16px; color: var(--ink); cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
.size:hover { border-color: var(--ink); }
.size.active { background: var(--ink); color: var(--alabaster); border-color: var(--ink); }
.size.is-out { color: var(--stone); border-style: dashed; cursor: not-allowed; text-decoration: line-through; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--hairline-strong); }
.qty button { width: 40px; height: 44px; display: grid; place-items: center; color: var(--ink); transition: background .3s var(--ease); }
.qty button:hover { background: var(--porcelain); }
.qty button svg { width: 13px; height: 13px; }
.qty__val { width: 46px; text-align: center; font-family: var(--mono); font-size: 16px; }
.pdp__buy { display: flex; gap: 12px; align-items: stretch; margin: 28px 0; }
.pdp__buy .qty { flex: none; }
.pdp__buy .button { flex: 1; }
.pdp__buy .button:disabled { opacity: 0.5; cursor: not-allowed; }
/* Sold out: the qty stepper has nothing to step. */
.pdp__buy.is-out .qty { display: none; }
/* Stock status line (hidden unless low / out — the variant JS drives it) */
.pdp__stock { display: none; align-items: center; gap: 10px; font-family: var(--mono); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; margin: 26px 0 0; }
.pdp__stock.is-low, .pdp__stock.is-out { display: flex; }
.pdp__stock.is-low { color: var(--champagne); }
.pdp__stock.is-out { color: var(--stone); }
.pdp__stock-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; }
.pdp__stock.is-low .pdp__stock-dot { animation: stock-pulse 1.8s var(--ease) infinite; }
@keyframes stock-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(126, 108, 75, 0.4); }
50% { box-shadow: 0 0 0 7px rgba(126, 108, 75, 0); }
}
.accordion { border-top: 1px solid var(--hairline); }
.acc { border-bottom: 1px solid var(--hairline); }
.acc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px; color: var(--ink); cursor: pointer; text-align: left; }
.acc__sign { position: relative; width: 12px; height: 12px; flex: none; }
.acc__sign::before, .acc__sign::after { content: ""; position: absolute; background: var(--ink); transition: transform .35s var(--ease); }
.acc__sign::before { top: 5.5px; left: 0; width: 12px; height: 1px; }
.acc__sign::after { left: 5.5px; top: 0; width: 1px; height: 12px; }
.acc.open .acc__sign::after { transform: scaleY(0); }
.acc__body { overflow: hidden; max-height: 0; transition: max-height .45s var(--ease); }
.acc.open .acc__body { max-height: 320px; }
.acc__inner { padding: 0 0 20px; color: var(--ink-soft); font-size: 16.8px; line-height: 1.7; max-width: 52ch; }
/* ============================================================
CONTACT
============================================================ */
.contact { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(34px,6vw,90px); align-items: start; }
.contact__aside { display: flex; flex-direction: column; gap: clamp(28px,4vh,40px); }
.info-block h4 { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 16px; color: var(--stone); font-weight: 400; margin-bottom: 12px; }
.info-block p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.info-block a:hover { color: var(--champagne); }
.boutique { border-top: 1px solid var(--hairline); padding: 18px 0; display: flex; justify-content: space-between; gap: 16px; }
.boutique__city { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(20.4px,1.92vw, 25.2px); }
.boutique__addr { font-size: 16px; color: var(--stone); text-align: right; line-height: 1.6; }
.contact__map { aspect-ratio: 16/10; margin-top: clamp(40px,6vh,70px); }
/* ============================================================
CART DRAWER (offcanvas)
============================================================ */
.scrim { position: fixed; inset: 0; z-index: 120; background: rgba(26,24,21,0.42); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s var(--ease); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }
.scrim.open { opacity: 1; visibility: visible; }
.cartdrawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 130; width: min(440px, 92vw); background: var(--alabaster); transform: translateX(101%); transition: transform .6s var(--ease); display: flex; flex-direction: column; box-shadow: -30px 0 70px -40px rgba(26,24,21,0.5); }
.cartdrawer.open { transform: none; }
.cartdrawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid var(--hairline); }
.cartdrawer__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em; font-size: 19.2px; }
.cartdrawer__title span { color: var(--stone); }
.cartdrawer__body { flex: 1; overflow-y: auto; padding: 8px 26px; }
.cartline { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.cartline__media { aspect-ratio: 3/4; overflow: hidden; background: var(--porcelain); }
.cartline__media img { width: 100%; height: 100%; object-fit: cover; }
.cartline__name { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; font-size: 18px; }
.cartline__meta { font-family: var(--mono); font-size: 16px; letter-spacing: 0.06em; color: var(--stone); margin: 6px 0 14px; text-transform: uppercase; }
.cartline__price { font-family: var(--mono); font-size: 17px; color: var(--ink); font-weight: 500; white-space: nowrap; }
.cartline__remove { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 16px; color: var(--stone); margin-top: 12px; cursor: pointer; transition: color .3s var(--ease); }
.cartline__remove:hover { color: var(--ink); }
.qty--sm button { width: 30px; height: 32px; }
.qty--sm .qty__val { width: 34px; font-size: 16px; }
.cartdrawer__foot { border-top: 1px solid var(--hairline); padding: 22px 26px calc(22px + env(safe-area-inset-bottom)); }
.cart-line-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.cart-line-row .k { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 16px; color: var(--stone); }
.cart-line-row .v { font-family: var(--display); font-size: 24px; }
.cart-line-row--total .k { color: var(--ink); }
.cartdrawer__note { font-family: var(--mono); font-size: 16px; letter-spacing: 0.04em; color: var(--stone); text-align: center; margin-top: 14px; }
.cart-empty { display: none; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 64px 10px; }
.cart-empty .empty__glyph { font-family: var(--display); font-size: 55.2px; color: var(--champagne); line-height: 1; }
.cart-empty .empty__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 21.6px; color: var(--ink); }
.cartdrawer.is-empty .cart-empty { display: flex; }
.cartdrawer.is-empty .cartdrawer__foot, .cartdrawer.is-empty .cartline { display: none; }
/* ============================================================
CART PAGE
============================================================ */
.cartpage { display: grid; grid-template-columns: 1.5fr 0.9fr; gap: clamp(34px,5vw,70px); align-items: start; }
.cartpage__items { border-top: 1px solid var(--ink); }
.cartrow { display: grid; grid-template-columns: 112px 1fr auto auto; gap: clamp(16px,2.4vw,32px); align-items: center; padding: clamp(22px,3.2vh,34px) 0; border-bottom: 1px solid var(--hairline); }
.cartrow__media { aspect-ratio: 3/4; overflow: hidden; background: var(--porcelain); }
.cartrow__media img { width: 100%; height: 100%; object-fit: cover; }
.cartrow__name { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(20.4px,2.16vw, 26.4px); }
.cartrow__meta { font-family: var(--mono); text-transform: uppercase; font-size: 16px; letter-spacing: 0.08em; color: var(--stone); margin: 8px 0 12px; }
.cartrow__remove { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 16px; color: var(--stone); cursor: pointer; }
.cartrow__remove:hover { color: var(--ink); }
.cartrow__price { font-family: var(--mono); font-size: 18.5px; color: var(--ink); font-weight: 500; white-space: nowrap; justify-self: end; }
.summary { border: 1px solid var(--hairline); padding: clamp(26px,3vw,38px); position: sticky; top: 90px; }
.summary__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(26.4px,2.88vw, 36px); margin-bottom: clamp(22px,3vh,30px); }
.summary__row { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0; font-size: 17px; }
.summary__row .k { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 16px; color: var(--stone); }
.summary__row .v { font-family: var(--mono); font-size: 18px; color: var(--ink); font-weight: 500; }
.summary__total { border-top: 1px solid var(--hairline); margin-top: 8px; padding-top: 18px; }
.summary__total .k { color: var(--ink); font-size: 16px; }
.summary__total .v { font-family: var(--display); font-size: 33px; }
.promo { display: flex; gap: 10px; margin: 6px 0 22px; }
.promo input { flex: 1; border: 1px solid var(--hairline-strong); background: transparent; padding: 13px 15px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 16px; outline: none; }
.promo input:focus { border-color: var(--ink); }
/* ============================================================
CHECKOUT
============================================================ */
.checkout { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: clamp(34px,5vw,80px); align-items: start; }
.cstep { border: 1px solid var(--hairline); margin-bottom: 16px; }
.cstep__head { display: flex; align-items: center; gap: 16px; padding: 22px 26px; }
.cstep__no { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hairline-strong); display: grid; place-items: center; font-family: var(--mono); font-size: 16px; color: var(--stone); flex: none; }
.cstep.open .cstep__no, .cstep.done .cstep__no { background: var(--ink); color: var(--alabaster); border-color: var(--ink); }
.cstep__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(21px,2.3vw, 27px); }
.cstep__edit { margin-left: auto; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 16px; color: var(--stone); cursor: pointer; display: none; }
.cstep.done .cstep__edit { display: inline; }
.cstep__body { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.cstep.open .cstep__body { max-height: 1300px; }
.cstep__inner { padding: 6px 26px 28px; }
.pay-tabs { display: flex; gap: 0; border: 1px solid var(--hairline-strong); margin-bottom: 22px; }
.pay-tab { flex: 1; padding: 15px; text-align: center; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 16px; color: var(--stone); cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
.pay-tab.active { background: var(--ink); color: var(--alabaster); }
.deliv { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.deliv__opt { display: flex; align-items: center; gap: 14px; border: 1px solid var(--hairline-strong); padding: 16px 18px; cursor: pointer; transition: border-color .3s var(--ease); }
.deliv__opt.active { border-color: var(--ink); }
.deliv__radio { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--hairline-strong); flex: none; position: relative; }
.deliv__opt.active .deliv__radio { border-color: var(--ink); }
.deliv__opt.active .deliv__radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); }
.deliv__name { font-size: 18px; }
.deliv__price { margin-left: auto; font-family: var(--mono); font-size: 16px; color: var(--ink); font-weight: 500; }
.order-mini { border: 1px solid var(--hairline); padding: clamp(24px,3vw,34px); position: sticky; top: 90px; }
.order-mini__line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--hairline); }
.order-mini__line img { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--porcelain); }
.order-mini__nm { font-family: var(--display); text-transform: uppercase; font-size: 17px; letter-spacing: 0.02em; }
.order-mini__mt { font-family: var(--mono); font-size: 16px; color: var(--stone); letter-spacing: 0.06em; margin-top: 4px; }
.order-mini__pr { font-family: var(--mono); font-size: 16px; color: var(--ink); font-weight: 500; }
/* ============================================================
AUTH (login / register)
============================================================ */
.auth { max-width: 460px; margin: 0 auto; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--hairline); margin-bottom: clamp(30px,4vh,44px); }
.auth-tab { flex: 1; padding: 0 0 16px; text-align: center; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 16px; color: var(--stone); cursor: pointer; position: relative; }
.auth-tab::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transition: transform .4s var(--ease); }
.auth-tab.active { color: var(--ink); }
.auth-tab.active::after { transform: scaleX(1); }
.auth-pane { display: none; }
.auth-pane.active { display: block; animation: anatIn .5s var(--ease); }
.auth-alt { text-align: center; margin-top: 26px; font-family: var(--mono); font-size: 16px; letter-spacing: 0.04em; color: var(--stone); }
.auth-alt a { color: var(--ink); border-bottom: 1px solid var(--hairline-strong); padding-bottom: 2px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 0 24px; }
.auth-row a { font-family: var(--mono); font-size: 16px; letter-spacing: 0.04em; color: var(--stone); }
.auth-row a:hover { color: var(--ink); }
/* ============================================================
ACCOUNT / PROFILE
============================================================ */
.account { display: grid; grid-template-columns: 250px 1fr; gap: clamp(34px,5vw,72px); align-items: start; }
.acct-aside { position: sticky; top: 90px; }
.acct-user { border-bottom: 1px solid var(--hairline); padding-bottom: 22px; margin-bottom: 22px; }
.acct-user__hi { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px; color: var(--stone); }
.acct-user__name { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(26.4px,2.64vw, 36px); margin-top: 10px; }
.acct-nav { display: flex; flex-direction: column; }
.acct-nav button { text-align: left; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 16px; color: var(--stone); padding: 14px 0; border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: color .3s var(--ease), padding-left .3s var(--ease); }
.acct-nav button:hover { color: var(--ink); padding-left: 6px; }
.acct-nav button.active { color: var(--ink); }
.acct-nav button.active span { color: var(--champagne); }
.acct-panel { display: none; }
.acct-panel.active { display: block; animation: anatIn .5s var(--ease); }
.acct-panel__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(28.8px,3.6vw, 48px); margin-bottom: clamp(22px,3vh,32px); }
.ord { border: 1px solid var(--hairline); padding: clamp(20px,2.4vw,28px); margin-bottom: 16px; }
.ord__top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--hairline); padding-bottom: 16px; margin-bottom: 16px; }
.ord__id { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 24px; }
.ord__meta { font-family: var(--mono); font-size: 16px; letter-spacing: 0.1em; color: var(--stone); text-transform: uppercase; margin-top: 6px; }
.ord__status { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 16px; padding: 7px 14px; border: 1px solid var(--hairline-strong); height: fit-content; }
.ord__status--ship { color: var(--champagne); border-color: var(--champagne); }
.ord__items { display: flex; gap: 12px; align-items: center; }
.ord__thumb { width: 60px; aspect-ratio: 3/4; object-fit: cover; background: var(--porcelain); }
.ord__sum { margin-left: auto; font-family: var(--mono); font-size: 17px; color: var(--ink); font-weight: 500; }
.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.addr { border: 1px solid var(--hairline); padding: 24px; }
.addr.is-default { border-color: var(--ink); }
.addr__tag { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 16px; color: var(--champagne); margin-bottom: 14px; }
.addr__name { font-family: var(--display); text-transform: uppercase; font-size: 23px; letter-spacing: 0.02em; margin-bottom: 10px; }
.addr p { font-size: 17px; color: var(--ink-soft); line-height: 1.7; }
.addr__actions { display: flex; gap: 16px; margin-top: 16px; }
.addr__actions a { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 16px; color: var(--stone); cursor: pointer; }
.addr__actions a:hover { color: var(--ink); }
/* ============================================================
PAGE RESPONSIVE
============================================================ */
@media (max-width: 980px) {
.grid-2, .cols-3, .pdp, .contact, .cartpage, .checkout, .account, .shop-grid, .field-row, .addr-grid, .stat-row, .step-row { grid-template-columns: 1fr; }
.cols-3 { grid-template-columns: 1fr 1fr; }
.shop-grid { grid-template-columns: 1fr 1fr; }
.pdp__gallery { position: static; grid-template-columns: 1fr; }
/* Real products carry many photos — the thumb row scrolls sideways
instead of crushing 10+ thumbs into the viewport width. */
.pdp__thumbs { flex-direction: row; order: 2; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x); padding-bottom: 4px; }
.pdp__thumbs::-webkit-scrollbar { display: none; }
.pdp__thumb { width: 64px; flex: none; scroll-snap-align: start; }
.summary, .order-mini, .acct-aside { position: static; }
.account { gap: 30px; }
.step-row { gap: 8px; }
}
@media (max-width: 600px) {
.cols-3, .shop-grid, .addr-grid, .stat-row { grid-template-columns: 1fr; }
.stat-row { gap: 30px; }
.cartrow { grid-template-columns: 72px 1fr; grid-template-areas: "media name" "media price"; }
.cartrow__price { justify-self: start; grid-column: 2; }
/* Phone buy row: quantity full-line, add-to-cart full width below —
side by side they fought for ~350px and clipped the price label. */
.pdp__buy .qty { flex: 1; justify-content: space-between; }
.pdp__buy .button { flex: 1 1 100%; }
}
/* ============================================================
EMPTY STATES + 404
============================================================ */
.empty { text-align: center; max-width: 460px; margin: 0 auto; padding: clamp(50px,10vh,110px) 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.empty__glyph { font-family: var(--display); font-size: clamp(48px,7.2vw, 86.4px); color: var(--champagne); line-height: 1; }
.empty__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(26.4px,3.6vw, 43.2px); }
.empty__text { color: var(--stone); font-size: 16.8px; line-height: 1.7; max-width: 36ch; }
.empty__actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
/* cart page empty */
.cartpage__empty { display: none; }
.cartpage.is-empty .cartpage__items, .cartpage.is-empty .summary { display: none; }
.cartpage.is-empty .cartpage__empty { display: flex; grid-column: 1 / -1; }
/* shop no-results */
.shop-empty { display: none; grid-column: 1 / -1; }
.shop-empty.show { display: flex; }
/* 404 */
.notfound { min-height: clamp(60vh, 72vh, 80vh); display: grid; place-items: center; text-align: center; padding: clamp(70px,12vh,140px) var(--pad-x); position: relative; overflow: hidden; }
.notfound__ghost { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); font-family: var(--display); font-size: clamp(110px, 52.8vw, 110px); line-height: 0.8; color: transparent; -webkit-text-stroke: 1px rgba(26,24,21,0.08); white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; }
.notfound__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 520px; }
.notfound__title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(40.8px,6vw, 76.8px); line-height: 1; }
.notfound__title em { font-family: var(--editorial); font-style: italic; text-transform: none; color: var(--champagne); letter-spacing: 0; }
.notfound__links { display: flex; gap: clamp(16px,3vw,30px); margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.notfound__links a { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 16px; color: var(--stone); transition: color .35s var(--ease); }
.notfound__links a:hover { color: var(--ink); }
/* ============================================================
RESPONSIVE FIXES (2026-07) — mobile overflow + topbar
============================================================ */
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; }
/* Product cards must never widen their grid column */
.card__foot { flex-wrap: wrap; }
.card__name { min-width: 0; overflow-wrap: break-word; }
.card__price { white-space: nowrap; }
/* PDP buy row (qty + add-to-cart with price label) wraps when tight */
.pdp__buy { flex-wrap: wrap; }
.pdp__buy .button { flex: 1 1 220px; min-width: 0; }
/* Long product names in breadcrumbs — min-width:0 lets the flex item
actually shrink, and bidi isolation keeps LTR names from scrambling
the crumb order on the Arabic (RTL) storefront. */
.page-head__crumb { max-width: 100%; overflow: hidden; }
.page-head__crumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; unicode-bidi: isolate; }
.page-head__crumb a { flex: none; }
@media (max-width: 980px) {
/* Locale + account live in the mobile drawer — free the topbar row */
.topbar__lang, .topbar__account { display: none; }
.topbar__right { gap: 14px; }
}
@media (max-width: 560px) {
.topbar { padding: 14px 16px; }
.topbar__brand { font-size: 24px; letter-spacing: 0.3em; text-indent: 0.3em; }
.topbar__bag { font-size: 16px; letter-spacing: 0.1em; }
.topbar__bag .dot { width: 24px; height: 24px; font-size: 16px; }
.topbar__right { gap: 10px; }
}
/* ── Overflow hardening (measured with real-browser audit) ── */
/* Decorative ghost words must never widen the page */
.hero, .footer, .chapter, .signup { overflow-x: clip; }
/* Grid children default to min-width:auto and can blow the 1fr track
wider than the viewport — let them shrink. */
.reviews > *, .checkout > *, .pdp > *, .grid-2 > *, .account > *,
.cartpage > *, .contact > *, .cols-3 > *, .addr-grid > * { min-width: 0; }
.checkout__steps, .order-mini, .reviews__list, .review-form { max-width: 100%; }
input, select, textarea { max-width: 100%; }
/* Newsletter form wraps instead of pushing its button off-screen */
.signup__form { flex-wrap: wrap; }
.signup__form input { min-width: 0; flex: 1 1 200px; }
/* Drawer content taller than the viewport must not peek out while
the drawer is translated off-screen; scroll it when open instead. */
.drawer { overflow: hidden; }
.drawer.open { overflow-y: auto; }
/* ── Language switcher ── */
.topbar__lang { font-family: "Fragment Mono", "Cairo", ui-monospace, monospace; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .78; position: relative; padding-bottom: 2px; transition: opacity .35s var(--ease); }
.topbar__lang::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.topbar__lang:hover { opacity: 1; }
.topbar__lang:hover::after { transform: scaleX(1); }
.drawer__locales { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: clamp(26px, 5vh, 44px); padding-top: 24px; border-top: 1px solid var(--hairline); }
.drawer__locales-pill { font-family: "Fragment Mono", "Cairo", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.1em; font-size: 16px; line-height: 1; padding: 11px 24px; border: 1px solid var(--hairline-strong); border-radius: 999px; color: var(--ink); transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
a.drawer__locales-pill:hover, a.drawer__locales-pill:active { background: var(--ink); color: var(--alabaster); border-color: var(--ink); }
.drawer__locales-pill.is-current { background: var(--ink); color: var(--alabaster); border-color: var(--ink); }
/* ── Checkout — compact pass (scoped to the page, user request) ── */
.page-head--checkout { padding: clamp(34px, 5vh, 56px) var(--pad-x) clamp(18px, 3vh, 30px); }
.page-head--checkout .page-head__title { font-size: clamp(34px, 4vw, 54px); }
.cstep__head { padding: 14px 18px; }
.cstep__no { width: 22px; height: 22px; font-size: 12px; }
.cstep__title { font-size: clamp(16.5px, 1.7vw, 19px); }
.cstep__edit { font-size: 11.5px; }
.cstep__inner { padding: 2px 18px 18px; }
.cstep { margin-bottom: 12px; }
.pay-tab { padding: 11px; font-size: 11.5px; }
.deliv__opt { padding: 11px 13px; }
.deliv__name { font-size: 15px; }
.deliv__price { font-size: 13.5px; }
.order-mini { padding: 20px 22px; }
.order-mini__line { grid-template-columns: 46px 1fr auto; padding: 10px 0; }
.order-mini__nm { font-size: 14px; }
.order-mini__mt { font-size: 11px; }
.order-mini__pr { font-size: 13.5px; }
.checkout .field { gap: 6px; margin-bottom: 14px; }
.checkout .field > label { font-size: 12px; letter-spacing: 0.12em; }
.checkout .field input, .checkout .field select, .checkout .field textarea { font-size: 15px; padding: 10px 12px; }
.checkout .field select { background-position: right 12px center; padding-right: 34px; }
.checkout .field textarea { min-height: 104px; }
.checkout .field-note { font-size: 11.5px; }
.checkout .summary__title, .order-mini .summary__title { font-size: clamp(19px, 2vw, 24px); margin-bottom: 16px; }
.checkout .summary__row { padding: 8px 0; font-size: 14px; gap: 16px; }
.checkout .summary__row .v { text-align: end; font-size: 15px; }
.checkout .summary__row .k { font-size: 12px; }
.checkout .summary__total .k { font-size: 13px; }
.checkout .summary__total .v { font-size: 23px; }
.checkout .check { font-size: 13.5px; }
.checkout .button { padding: 13px 24px; font-size: 12px; }
.checkout .field-error { font-size: 12px; }
/* ── Large screens ──────────────────────────────────────────────
The layout's clamps top out near a 1440px design width; on wider
monitors the content used to float in empty alabaster. Scale the
whole page proportionally (same effect as browser zoom, which is
exactly how the design was judged to "look right"). Media queries
measure the real viewport, so these don't feed back into themselves.
GOTCHA: viewport units (svh/vh) are NOT divided by zoom — a 100svh
hero would render 100svh × zoom tall and push past the fold. Any
full-screen sizing must use calc(100svh / var(--page-zoom)). */
:root { --page-zoom: 1; }
@media (min-width: 1600px) { :root { --page-zoom: 1.15; } }
@media (min-width: 1920px) { :root { --page-zoom: 1.28; } }
@media (min-width: 2300px) { :root { --page-zoom: 1.42; } }
html { zoom: var(--page-zoom); }
/* Shop + product pages carry denser content — run them ~13% below the
global scale on desktop widths (mobile/tablet untouched). The class
sits on , so any calc(100svh / var(--page-zoom)) stays honest. */
@media (min-width: 981px) { html.page-compact { --page-zoom: 0.87; } }
@media (min-width: 1600px) { html.page-compact { --page-zoom: 1.0; } }
@media (min-width: 1920px) { html.page-compact { --page-zoom: 1.11; } }
@media (min-width: 2300px) { html.page-compact { --page-zoom: 1.24; } }
/* ── Contrast: dark surfaces keep the lighter muted/accent tones ── */
.chapter, .footer, .about-quote { --stone: #A9A192; --champagne: #C7B389; }