/* Shivas Lab. Three colours: paper ground, ink, one sea-blue accent per screen.
   Shapes: photos and panels square; controls are pills. Motion: transform + opacity only. */
:root {
  --paper: #FBFAF7; --ink: #121212; --sea: #1D4C8F;
  --mute: rgba(18, 18, 18, .6); --line: rgba(18, 18, 18, .14);
  --pmute: rgba(251, 250, 247, .66); --pline: rgba(251, 250, 247, .18);
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-io: cubic-bezier(.77, 0, .175, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --g: 16px; --gap: 6px; --hd: 60px; --sec: clamp(64px, 8vw, 128px); --table: #E9E5DD; --rule: #E4E0D8; --la: 64px;
  --serif: 'Bodoni Moda', 'Bodoni 72', Didot, serif; --sans: 'Archivo', system-ui, sans-serif;
  color-scheme: light;
}
@media (min-width: 900px) { :root { --g: clamp(24px, 2.6vw, 44px); --hd: 68px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--sea); color: var(--paper); }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
em { font-style: italic; }
.wrap { padding-inline: var(--g); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- type ---------- */
.d-hero, .d1, .d2, .d3, .serif { font-family: var(--serif); font-optical-sizing: auto; }
.d-hero { word-spacing: .08em; font-weight: 700; font-size: clamp(60px, 23vw, 310px); line-height: .86; letter-spacing: -.045em; }
@media (min-width: 600px) { .d-hero { font-size: clamp(60px, 17vw, 310px); } }
.d1 { font-weight: 700; font-size: clamp(52px, 12.4vw, 230px); line-height: .88; letter-spacing: -.04em; }
.d2 { font-weight: 700; font-size: clamp(40px, 7.4vw, 132px); line-height: .9; letter-spacing: -.035em; }
.d3 { font-weight: 400; font-size: clamp(26px, 3.4vw, 58px); line-height: 1.08; letter-spacing: -.02em; }
.d-hero em, .d1 em, .d2 em { font-weight: 400; }
.cap { font: 600 11px/1.4 var(--sans); font-stretch: 112%; letter-spacing: .2em; text-transform: uppercase; }
.credit { font: 500 10.5px/1.5 var(--sans); font-stretch: 108%; font-variant-numeric: tabular-nums; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding-top: 9px; }
.lede { font-size: 17px; max-width: 34ch; color: var(--mute); }
@media (min-width: 900px) { .lede { font-size: 19px; } }
.hint { font: 500 10.5px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.hint .t { display: none; }
@media (hover: none) { .hint .m { display: none; } .hint .t { display: inline; } }

/* ---------- buttons: pill + nested arrow ---------- */
.btn { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 6px 6px 22px; border-radius: 999px; border: 1px solid currentColor;
  font: 600 13px/1 var(--sans); letter-spacing: .06em; white-space: nowrap; cursor: pointer; background: none;
  transition: transform 160ms var(--ease-out), opacity 200ms var(--ease-out); }
.btn i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-style: normal; background: rgba(18, 18, 18, .08); transition: transform 220ms var(--ease-out); }
.btn.no-i { padding-right: 22px; }
.btn-accent { background: var(--sea); border-color: var(--sea); color: var(--paper); }
.btn-accent i, .on-ink .btn i { background: rgba(251, 250, 247, .16); }
.btn-paper { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn:active, .press:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover i { transform: translateX(3px); } }
.link { border-bottom: 1px solid currentColor; padding-bottom: 2px; font-weight: 600; font-size: 13px; letter-spacing: .06em; }

/* ---------- header ---------- */
.mast .cap + .cap { display: none; }
@media (min-width: 700px) { .mast .cap + .cap { display: inline; } }
.mast { display: flex; justify-content: space-between; gap: 12px; padding: 10px var(--g); border-bottom: 1px solid var(--line); }
.mast .cap { font-size: 10px; }
.hd { position: sticky; top: 0; z-index: 30; height: var(--hd); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: var(--g);
  background: rgba(251, 250, 247, .82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--line); }
.logo { display: grid; justify-items: center; line-height: 1; padding: 6px; }
.logo b { font: 700 19px/1 var(--serif); letter-spacing: .22em; margin-right: -.22em; }
.logo span { font: 600 8.5px/1 var(--sans); letter-spacing: .6em; margin-right: -.6em; color: var(--sea); margin-top: 5px; }
@media (min-width: 900px) { .logo b { font-size: 22px; } .logo span { font-size: 9.5px; } }
.nav { display: none; gap: 26px; }
.nav a, .hd-r a, .hd-r button { font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.nav a { padding: 14px 0; position: relative; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav a:hover::after { transform: scaleX(1); } }
.nav a[aria-current]::after { transform: scaleX(1); }
.hd-r { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
.hd-r .st { display: none; }
.hd-r { gap: 26px; }
.bagbtn { background: none; border: 0; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0; }
.bagbtn em { font-style: normal; display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; border: 1px solid currentColor; font-size: 10px; letter-spacing: 0; }
.menubtn { width: 44px; height: 44px; border: 0; background: none; position: relative; cursor: pointer; margin-left: -10px; }
.menubtn span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform 240ms var(--ease-out); }
.menubtn span:first-child { top: 18px; } .menubtn span:last-child { top: 25px; }
.menu-open .menubtn span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .menubtn span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (min-width: 1000px) { .nav { display: flex; } .menubtn { display: none; } .hd-r .st { display: inline; } }
.menu { position: fixed; inset: var(--hd) 0 0; z-index: 29; background: var(--paper); padding: 28px var(--g); display: grid; align-content: start; gap: 2px;
  opacity: 0; visibility: hidden; transition: opacity 220ms var(--ease-out), visibility 0s 220ms; overflow-y: auto; }
.menu a { font: 700 clamp(40px, 11vw, 64px)/1.02 var(--serif); letter-spacing: -.03em; transform: translateY(18px); opacity: 0; transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out); }
.menu a.sm { font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 16px 0 4px; }
.menu-open .menu { opacity: 1; visibility: visible; transition: opacity 220ms var(--ease-out); }
.menu-open .menu a { transform: none; opacity: 1; transition-delay: calc(var(--i) * 40ms + 60ms); }
.menu-open { overflow: hidden; }

/* ---------- reveal ---------- */
[data-r] { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
[data-r].in { opacity: 1; transform: none; }

/* ---------- photos, credits, loupe ---------- */
.ph { position: relative; overflow: hidden; background: var(--ink); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.look { margin: 0; }
.look .ph { aspect-ratio: 4 / 5; display: block; }
.look .ph img { transition: transform 900ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .look:hover .ph img { transform: scale(1.025); } }

/* ---------- hero (home) ---------- */
.hero { position: relative; height: calc(100svh - var(--hd) - 38px); min-height: 560px; max-height: 1100px; overflow: hidden; background: var(--ink); color: var(--paper); }
.hero > .ph { position: absolute; inset: 0; }
.hero > .ph img { object-position: 50% 40%; animation: heroImg 1100ms var(--ease-out) both; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 18, 18, .72), rgba(18, 18, 18, 0) 58%); pointer-events: none; }
.hero-tx { position: absolute; z-index: 1; left: var(--g); right: var(--g); bottom: var(--g); display: grid; gap: 22px; }
.hero h1 { font-size: clamp(60px, 22vw, 310px); }
.hero h1 .ln { display: block; overflow: hidden; padding: .08em 0 .04em; margin: -.08em 0 -.04em; }
.hero h1 .dk { display: none; }
@media (min-width: 900px) { .hero h1 { font-size: clamp(60px, 17vw, 310px); } .hero h1 .dk { display: inline; } .hero h1 .pm { display: none; } }
.hero h1 .ln > span { display: block; animation: rise 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 150ms); }
.hero-foot { display: grid; gap: 18px; animation: fade 700ms var(--ease-out) 600ms both; }
.hero-foot p { color: var(--paper); max-width: 36ch; text-shadow: 0 1px 14px rgba(18, 18, 18, .55); }
.hero-foot .btns { display: flex; flex-wrap: wrap; gap: 10px; }
.hero .credit { position: absolute; z-index: 1; left: var(--g); top: 14px; color: var(--pmute); padding: 0; }
@media (min-width: 900px) {
  .hero-tx { grid-template-columns: 1fr auto; }
  .hero h1 { grid-area: 1 / 1 / 2 / 3; }
  .hero-foot { grid-area: 1 / 2; align-self: start; justify-items: end; text-align: right; padding-top: 1.2vw; max-width: 380px; }
}
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fade { from { opacity: 0; } }
@keyframes heroImg { from { opacity: 0; transform: scale(1.06); } }

/* ---------- chapters on ink ---------- */
.on-ink { background: var(--ink); color: var(--paper); }
.on-ink .credit, .on-ink .lede, .on-ink .hint { color: var(--pmute); }
.chapters-sec { padding: var(--sec) 0 var(--gap); }
.sec-hd { padding-inline: var(--g); display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 72px); }
.chapters { display: grid; gap: var(--gap); padding-inline: var(--gap); }
.ch { position: relative; display: block; overflow: hidden; height: min(118vw, 640px); color: var(--paper); isolation: isolate; }
.ch .ph { position: absolute; inset: 0; background: var(--ink); }
.ch .ph img { transform: scale(1.06); transition: transform 900ms var(--ease-out); }
.ch .ph::before, .ch .ph::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.ch .ph::before { background: var(--ink); mix-blend-mode: color; transition: opacity 700ms var(--ease-out); }
.ch .ph::after { background: linear-gradient(to top, rgba(18, 18, 18, .9), rgba(18, 18, 18, .42) 55%, rgba(18, 18, 18, .5)); transition: opacity 700ms var(--ease-out); }
.ch-no { position: absolute; z-index: 1; top: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; color: var(--pmute); transition: color 400ms var(--ease-out); }
.ch-num { position: absolute; z-index: 1; top: 34px; right: 14px; font: 400 italic clamp(90px, 15vw, 240px)/1 var(--serif); letter-spacing: -.05em; opacity: .22; transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.ch-body { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 18px; display: grid; gap: 14px; }
.ch-body .d2 { transform: translateY(calc(var(--open-shift, 1) * 46px)); transition: transform 700ms var(--ease-out); }
.ch-more { display: grid; gap: 16px; opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); }
.ch-more p { max-width: 38ch; color: var(--pmute); }
.ch-more .ch-spec { color: var(--paper); font-size: 10px; }
.ch-more .row { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.ch-sw { display: flex; gap: 4px; }
.ch-sw img { width: 40px; height: 40px; object-fit: cover; }
.ch.open .ph::before { opacity: 0; }
.ch.open .ph::after { opacity: .62; }
.ch.open .ph img { transform: scale(1); }
.ch.open .ch-num { opacity: .9; transform: translateY(-6px); }
.ch.open .d2 { --open-shift: 0; }
.ch.open .ch-more { opacity: 1; transform: none; transition-delay: 80ms; }
@media (hover: hover) and (pointer: fine) {
  .ch:hover .ph::before { opacity: 0; } .ch:hover .ph::after { opacity: .62; } .ch:hover .ph img { transform: scale(1); }
  .ch:hover .ch-num { opacity: .9; transform: translateY(-6px); } .ch:hover .d2 { --open-shift: 0; } .ch:hover .ch-more { opacity: 1; transform: none; transition-delay: 80ms; }
}
@media (min-width: 900px) {
  .chapters { grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(460px, 46vw, 860px); }
  .ch { height: auto; grid-column: span 7; }
  .ch:nth-child(4n+2), .ch:nth-child(4n+3) { grid-column: span 5; }
  .ch:nth-child(4n+3) { grid-column: span 5; } .ch:nth-child(4n+0) { grid-column: span 7; }
  .ch:only-child, .chapters.two .ch { grid-column: span 6; }
  .ch-no { top: 26px; left: 28px; right: 28px; } .ch-body { left: 28px; right: 28px; bottom: 28px; } .ch-num { right: 22px; }
}

/* ---------- marquee of cloth ---------- */
.marquee { overflow: hidden; padding: var(--gap) 0; background: var(--ink); }
.mq-track { display: flex; gap: var(--gap); width: max-content; animation: mq 90s linear infinite; }
.mq-track a { width: clamp(132px, 13vw, 220px); flex: none; position: relative; }
.mq-track img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.mq-track span { position: absolute; left: 8px; bottom: 6px; color: var(--paper); font: 600 9.5px/1 var(--sans); letter-spacing: .16em; opacity: 0; transition: opacity 200ms var(--ease-out); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
@media (hover: hover) and (pointer: fine) { .marquee:hover .mq-track { animation-play-state: paused; } .mq-track a:hover span { opacity: 1; } }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- edits (women / men doors) ---------- */
.edits { padding: var(--sec) var(--g); display: grid; gap: 56px; align-items: start; }
.door { margin: 0; display: grid; gap: 4px; align-content: start; }
.door .ph { aspect-ratio: 4 / 5; }
.door .d1 { margin-top: 14px; }
.door .row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
@media (min-width: 900px) {
  .edits { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .edits .sec-hd { grid-column: 1 / -1; padding: 0; }
  .door:first-of-type { grid-column: 1 / span 7; }
  .door:last-of-type { grid-column: 9 / span 4; margin-top: 22vw; }
}

/* ---------- who we supply ---------- */
.who { padding: 0 var(--g) var(--sec); }
.who .sec-hd { padding: 0; }
.wrow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 18px; padding: 22px 0; border-top: 1px solid var(--ink); position: relative; }
.wrow:last-child { border-bottom: 1px solid var(--ink); }
.wrow .d1 { transition: transform 400ms var(--ease-out); }
.wrow p { grid-column: 1 / -1; color: var(--mute); max-width: 40ch; }
.wrow .arr { grid-row: 1; grid-column: 2; font: 400 italic clamp(28px, 4vw, 60px)/1 var(--serif); transition: transform 300ms var(--ease-out); }
.wrow .thumb { display: none; }
@media (min-width: 900px) {
  .wrow { grid-template-columns: 1fr 26ch auto; padding: 26px 0 30px; }
  .wrow p { grid-column: 2; grid-row: 1; }
  .wrow .arr { grid-column: 3; }
  .wrow .thumb { display: block; position: absolute; right: 18%; top: 50%; width: 15vw; aspect-ratio: 4 / 5; translate: 0 -50%; opacity: 0; transform: scale(.95) rotate(-2deg); transition: opacity 220ms var(--ease-out), transform 300ms var(--ease-out); pointer-events: none; z-index: 2; }
}
@media (hover: hover) and (pointer: fine) {
  .wrow:hover .d1 { transform: translateX(2vw); } .wrow:hover .arr { transform: translateX(-8px); }
  .wrow:hover .thumb { opacity: 1; transform: none; }
}

/* ---------- lookbooks ---------- */
.books-sec { padding: var(--sec) 0; }
.books { display: grid; grid-auto-flow: column; grid-auto-columns: 68vw; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gap); scrollbar-width: none; }
.books::-webkit-scrollbar { display: none; }
.book { scroll-snap-align: start; position: relative; aspect-ratio: 2 / 3; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--paper); background: var(--ink); overflow: hidden; transition: transform 160ms var(--ease-out); }
.book .ph { position: absolute; inset: 0; }
.book .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(18, 18, 18, .55), rgba(18, 18, 18, 0) 30%, rgba(18, 18, 18, 0) 55%, rgba(18, 18, 18, .8)); }
.book .ph img { transition: transform 900ms var(--ease-out); }
.book-top, .book-bot { position: absolute; z-index: 1; left: 14px; right: 14px; }
.book-top { top: 14px; display: flex; justify-content: space-between; align-items: baseline; }
.book-top b { font: 700 15px/1 var(--serif); letter-spacing: .22em; }
.book-bot { bottom: 14px; display: grid; gap: 8px; }
.book-bot .serif { font-weight: 700; font-size: clamp(34px, 2.15vw, 44px); line-height: .95; letter-spacing: -.03em; }
@media (min-width: 900px) { .books { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; } }
@media (hover: hover) and (pointer: fine) { .book:hover .ph img { transform: scale(1.04); } }

/* ---------- gate band (lookbook) ---------- */
.gate { display: grid; gap: 22px; padding: clamp(64px, 9vw, 130px) var(--g); }
.gate .d2 { max-width: 12ch; }
@media (min-width: 900px) { .gate { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- footer ---------- */
.ft { background: var(--ink); color: var(--paper); padding: clamp(64px, 8vw, 120px) var(--g) 0; overflow: hidden; }
.ft-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px var(--g); }
.ft-cols div { display: grid; gap: 4px; align-content: start; }
.ft-cols .cap { color: var(--pmute); margin-bottom: 10px; }
.ft-cols a { padding: 6px 0; font-size: 15px; }
.ft-cols p { color: var(--pmute); font-size: 14px; max-width: 30ch; }
.ft-word { font: 700 25.4vw/.74 var(--serif); letter-spacing: -.02em; margin: clamp(56px, 8vw, 120px) 0 0 -.04em; white-space: nowrap; transform: translateY(.12em); }
.ft-small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 18px 0; border-top: 1px solid var(--pline); color: var(--pmute); font-size: 12px; position: relative; z-index: 1; background: var(--ink); }
@media (min-width: 900px) { .ft-cols { grid-template-columns: 4fr 2fr 2fr 2fr; } }
@media (hover: hover) and (pointer: fine) { .ft-cols a:hover { color: var(--pmute); } }

/* ---------- sheets (bag, lookbook) ---------- */
dialog.sheet { position: fixed; margin: 0; padding: 0; border: 0; max-width: none; max-height: none; background: var(--paper); color: var(--ink);
  inset: auto 0 0 0; width: 100%; height: min(88svh, 760px); display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform 280ms var(--ease-drawer), overlay 280ms allow-discrete, display 280ms allow-discrete; }
dialog.sheet[open] { transform: none; }
@starting-style { dialog.sheet[open] { transform: translateY(100%); } }
dialog.sheet:not([open]) { display: none; transition-duration: 200ms; }
dialog.sheet::backdrop { background: rgba(18, 18, 18, .42); opacity: 0; transition: opacity 280ms var(--ease-out), overlay 280ms allow-discrete, display 280ms allow-discrete; }
dialog.sheet[open]::backdrop { opacity: 1; }
@starting-style { dialog.sheet[open]::backdrop { opacity: 0; } }
@media (min-width: 760px) { dialog.sheet { inset: 0 0 0 auto; width: min(480px, 100vw); height: 100%; transform: translateX(100%); } @starting-style { dialog.sheet[open] { transform: translateX(100%); } } }
.sh-hd { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--g) 14px 24px; border-bottom: 1px solid var(--line); }
.sh-x { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; font: 400 28px/1 var(--serif); }
.sh-bd { flex: 1; overflow-y: auto; padding: 24px; display: grid; gap: 22px; align-content: start; }
.sh-ft { padding: 18px 24px 24px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.sh-ft .btn { justify-content: space-between; width: 100%; }
.field { display: grid; gap: 7px; }
.field label { font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.field input { height: 50px; border: 1px solid rgba(18, 18, 18, .4); border-radius: 0; background: #fff; padding: 0 14px; font-size: 16px; }
.field input:focus { outline: 2px solid var(--sea); outline-offset: -1px; border-color: var(--sea); }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 14px; color: var(--mute); align-items: start; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--sea); }
.done { display: grid; gap: 16px; padding-top: 10vh; }
.done[hidden], form[hidden] { display: none; }
.line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; }
.line img { width: 64px; height: 64px; object-fit: cover; }
.line b { font: 700 19px/1.1 var(--serif); display: block; }
.line small { color: var(--mute); font-size: 12.5px; }
.line .rm { border: 0; background: none; color: var(--mute); font-size: 12px; text-decoration: underline; cursor: pointer; min-height: 44px; }
.bump { border: 1px solid var(--ink); padding: 16px; }
.bump .check { color: var(--ink); }
.bump .check b { font-family: var(--serif); font-size: 18px; display: block; }
.tot { display: flex; justify-content: space-between; align-items: baseline; }
.tot b { font: 700 30px/1 var(--serif); }
.empty { color: var(--mute); }

/* ---------- page openers ---------- */
.opener { position: relative; min-height: calc(100svh - var(--hd)); max-height: 1100px; display: grid; align-content: end; padding: var(--g); overflow: hidden; color: var(--paper); background: var(--ink); }
.opener > .ph { position: absolute; inset: 0; }
.opener > .ph::before { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--ink); mix-blend-mode: color; transition: opacity 1100ms var(--ease-out) 250ms; }
.opener > .ph::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(18, 18, 18, .85), rgba(18, 18, 18, .3) 60%); transition: opacity 1100ms var(--ease-out) 250ms; }
.opener.open > .ph::before { opacity: 0; }
.opener.open > .ph::after { opacity: .75; }
.opener-tx { position: relative; z-index: 1; display: grid; gap: 20px; }
.opener h1 { padding-bottom: .1em; margin-bottom: -.1em; }
.opener .lede { color: var(--pmute); }
.opener .ch-num { top: auto; bottom: auto; position: static; opacity: .9; font-size: clamp(64px, 10vw, 170px); }
@media (min-width: 900px) { .opener-tx { grid-template-columns: 1fr auto; align-items: end; column-gap: 40px; } .opener-tx > .meta { justify-items: end; text-align: right; } }
.opener-tx > .meta { display: grid; gap: 16px; min-width: min(320px, 100%); }

.page-hd { padding: clamp(48px, 8vw, 120px) var(--g) clamp(36px, 5vw, 72px); display: grid; gap: 20px; }
@media (min-width: 900px) { .page-hd.split { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- looks grid ---------- */
.looks-sec { padding: var(--sec) 0; }
.looks { display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--gap); padding-inline: var(--gap); align-items: start; }
.looks .look:nth-child(3n+1) { grid-column: 1 / -1; }
.looks .look:nth-child(3n) { margin-top: 22vw; }
@media (max-width: 899px) { .looks .look:not(:nth-child(3n+1)) .credit, .strip .credit { font-size: 9.5px; letter-spacing: .08em; } }
.looks .credit { padding-inline: 2px; }
@media (min-width: 900px) {
  .looks { grid-template-columns: repeat(12, 1fr); row-gap: 56px; }
  .looks .look { grid-column: span 4; margin-top: 0 !important; }
  .looks .look:nth-child(5n+2), .looks .look:nth-child(5n+4) { margin-top: 16vw !important; }
  .looks .look:nth-child(5n+1) { grid-column: span 7; }
  .looks .look:nth-child(5n+2) { grid-column: 9 / span 4; }
  .looks .look:nth-child(5n+3) { grid-column: 2 / span 4; }
  .looks .look:nth-child(5n+4) { grid-column: 7 / span 5; }
  .looks .look:nth-child(5n+5) { grid-column: 4 / span 6; }
}
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 62vw; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gap); scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip .look { scroll-snap-align: start; }
@media (min-width: 900px) { .strip { grid-auto-columns: 24vw; } }

/* ---------- cloth grid + filters ---------- */
.filters { position: sticky; top: var(--hd); z-index: 5; background: rgba(251, 250, 247, .94); display: grid; gap: 8px; padding: 12px var(--g); border-block: 1px solid var(--line); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); background: none; font: 500 13px/1 var(--sans); cursor: pointer; transition: transform 160ms var(--ease-out); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:active { transform: scale(.97); }
.selects { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.selects select, .selects input { flex: none; min-height: 40px; border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; background: #fff; font-size: 14px; max-width: 220px; }
.selects input { width: 170px; }
.count { padding: 18px var(--g) 14px; color: var(--mute); font-size: 13px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px var(--gap); padding: 0 var(--gap) var(--gap); }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.more { display: flex; justify-content: center; padding: 40px var(--g) 100px; }

/* ---------- product ---------- */
.pd { display: grid; gap: 40px; padding-bottom: var(--sec); }
.pd-media { display: grid; gap: var(--gap); padding-inline: var(--gap); }
.pd-media .ph { aspect-ratio: 4 / 5; }
.pd-media .ph.sq { aspect-ratio: 1; }
.pd-info { padding: 0 var(--g); display: grid; gap: 26px; align-content: start; }
.pd-info .d2 { font-size: clamp(44px, 6vw, 104px); }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px var(--g); margin: 0; border-top: 1px solid var(--ink); padding-top: 18px; }
.specs div { display: grid; gap: 4px; }
.specs dt { font: 600 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.specs dd { margin: 0; font: 400 19px/1.25 var(--serif); }
.pd-btns { display: grid; gap: 10px; }
.pd-btns .btn { justify-content: space-between; }
@media (min-width: 1000px) {
  .pd { grid-template-columns: 7fr 5fr; column-gap: 0; padding-top: var(--gap); }
  .pd-media { grid-template-columns: 1fr 1fr; padding-right: 0; align-content: start; }
  .pd-media > :only-child, .pd-media > .wide { grid-column: 1 / -1; }
  .pd-info { position: sticky; top: calc(var(--hd) + 32px); padding: 24px var(--g) 0 4vw; }
}

/* ---------- niche pages ---------- */
.n-hero { display: grid; gap: var(--gap); padding: var(--gap); }
.n-hero .tx { padding: clamp(36px, 6vw, 90px) calc(var(--g) - var(--gap)) clamp(20px, 3vw, 40px); display: grid; gap: 22px; align-content: end; }
.n-hero .ph { aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .n-hero { grid-template-columns: 7fr 5fr; min-height: calc(100svh - var(--hd)); } .n-hero .ph { aspect-ratio: auto; } }
.forwho { padding: var(--sec) var(--g); display: grid; gap: 36px; }
.forwho ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--g); }
.forwho li { display: grid; grid-template-columns: 52px 1fr; padding: 18px 0; border-top: 1px solid var(--ink); font: 400 clamp(22px, 2.4vw, 36px)/1.15 var(--serif); }
.forwho li span { font: 600 11px/2.6 var(--sans); letter-spacing: .16em; color: var(--mute); }
@media (min-width: 900px) { .forwho { grid-template-columns: 4fr 8fr; } .forwho ol { grid-template-columns: 1fr 1fr; } }
.proof { padding: var(--sec) var(--g); }
.steps { display: grid; gap: 0 var(--g); margin: 0; padding: 0; list-style: none; }
.steps li { border-top: 1px solid var(--ink); padding: 18px 0 26px; display: grid; gap: 8px; }
.steps b { font: 700 clamp(30px, 3.2vw, 52px)/1 var(--serif); letter-spacing: -.02em; }
.steps span { color: var(--mute); font-size: 15px; max-width: 30ch; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* ---------- vip ---------- */
.vip { min-height: calc(100svh - var(--hd)); display: grid; align-content: center; gap: 34px; padding: clamp(56px, 8vw, 120px) var(--g); }
.vip .d1 { max-width: 12ch; }
.vip .fan { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); }
.vip .fan img { aspect-ratio: 1; object-fit: cover; width: 100%; }
@media (min-width: 900px) { .vip .fan { grid-template-columns: repeat(12, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; scroll-behavior: auto !important; }
  [data-r] { transform: none; }
  .mq-track { animation: none !important; }
  .ch .ph img, .look .ph img, .ch-body .d2, .ch-more, .ch-num, .wrow .d1, .scard, .cc-act { transform: none !important; }
}

/* ---------- spec strip: thin rules, small caps labels, tabular figures ---------- */
.spec { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-block: 1px solid var(--ink); }
.spec div { display: grid; gap: 6px; align-content: start; padding: 12px 12px 14px 0; border-bottom: 1px solid var(--line); }
.spec div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
.spec div:nth-last-child(-n+2):nth-child(odd), .spec div:last-child { border-bottom: 0; }
.spec dt { font: 600 9.5px/1.2 var(--sans); font-stretch: 112%; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.spec dd { margin: 0; font: 400 clamp(19px, 1.7vw, 27px)/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.005em; }
@media (min-width: 900px) {
  .spec:not(.two) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .spec:not(.two) div { border-bottom: 0; border-left: 1px solid var(--line); padding: 14px 16px 16px; }
  .spec:not(.two) div:first-child { border-left: 0; padding-left: 0; }
}
.spec.on { border-color: var(--pline); } .spec.on div { border-color: var(--pline); } .spec.on dt { color: var(--pmute); }

/* ---------- home: the Lab, one photo + statement + spec strip ---------- */
.letter { padding: var(--sec) var(--g); display: grid; gap: 32px; }
.letter-tx { display: grid; gap: clamp(28px, 4vw, 56px); align-content: space-between; }
.letter .d3 { font-size: clamp(30px, 4.2vw, 72px); line-height: 1.03; letter-spacing: -.025em; max-width: 19ch; }
.letter .d3 em { color: var(--sea); }
.letter-ph { width: 74%; justify-self: end; }
@media (min-width: 900px) { .letter { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); } .letter-ph { grid-column: 1 / span 4; width: auto; justify-self: stretch; } .letter-tx { grid-column: 6 / -1; } }

/* ---------- is this right for your studio? ---------- */
.fit { padding: var(--sec) var(--g); display: grid; gap: 28px; }
.fit-hd { display: grid; gap: 12px; }
.fit-tabs { display: grid; gap: var(--gap); }
.fit-tabs button { display: grid; gap: 6px; text-align: left; padding: 16px 18px; border: 1px solid var(--ink); background: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.fit-tabs b { font: 400 clamp(21px, 2vw, 30px)/1.1 var(--serif); }
.fit-tabs .cap { color: var(--mute); }
.fit-tabs [aria-selected="true"] { background: var(--ink); color: var(--paper); }
.fit-tabs [aria-selected="true"] .cap { color: var(--pmute); }
@media (hover: hover) and (pointer: fine) { .fit-tabs button:not([aria-selected="true"]):hover { background: rgba(18, 18, 18, .05); } }
.fit-panel { display: grid; gap: 28px; }
.fit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-content: start; }
.fit-col { display: grid; gap: 6px; align-content: start; }
.fit-col .ph { display: block; aspect-ratio: 3 / 4; margin-bottom: 6px; }
.fit-col .ph img { transition: transform 700ms var(--ease-out); }
.fit-col b { font: 700 clamp(26px, 2.6vw, 42px)/1 var(--serif); letter-spacing: -.02em; }
.fit-col small { color: var(--mute); font-size: 13px; }
@media (hover: hover) and (pointer: fine) { .fit-col:hover .ph img { transform: scale(1.04); } }
.fit-why { display: grid; gap: 22px; align-content: start; }
.fit-why ol { margin: 0; padding: 0; list-style: none; counter-reset: w; border-top: 1px solid var(--ink); }
.fit-why li { counter-increment: w; display: grid; grid-template-columns: 38px 1fr; padding: 14px 0; border-bottom: 1px solid var(--line); font: 400 clamp(19px, 1.6vw, 25px)/1.28 var(--serif); }
.fit-why li::before { content: '0' counter(w); font: 600 10px/2.6 var(--sans); letter-spacing: .16em; color: var(--mute); }
.fit-first { display: grid; gap: 6px; }
.fit .btns, .ss .btns { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
@media (min-width: 900px) { .fit-panel { grid-template-columns: 1fr 1fr; column-gap: 4vw; } }

/* ---------- the Studio Starter: flat lay + spec sheet ---------- */
.ss { padding: var(--sec) var(--g); display: grid; gap: 40px; border-top: 1px solid var(--line); align-items: center; }
.ss-tx { display: grid; gap: 22px; align-content: start; }
.ss-price { font: 700 clamp(64px, 8.6vw, 150px)/.86 var(--serif); letter-spacing: -.045em; }
.ss-price sup { font-size: .34em; font-weight: 400; font-style: italic; vertical-align: top; position: relative; top: .25em; letter-spacing: 0; }
.ss-price small { font: 600 10.5px/1 var(--sans); font-stretch: 112%; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin-left: 10px; vertical-align: middle; }
.ss-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.ss-list li { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ss-list .n { font: 600 10px/1 var(--sans); letter-spacing: .14em; color: var(--mute); font-variant-numeric: tabular-nums; }
.ss-list b { font: 700 20px/1.1 var(--serif); margin-right: 10px; font-variant-numeric: lining-nums; }
.ss-list em { font: italic 400 16px/1 var(--serif); color: var(--mute); }
.ss-list small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.ss-list .sz { font: 600 10px/1 var(--sans); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.ss-list .plus b { color: var(--ink); }
@media (min-width: 900px) { .ss { grid-template-columns: 1fr 1fr; column-gap: 5vw; } }

/* ---------- cloth cards ---------- */
.cc { display: grid; align-content: start; }
.cc-m { position: relative; overflow: hidden; }
.cc-ph { display: block; aspect-ratio: 1; background: var(--ink); }
.cc-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.cc-type { display: grid; place-items: center; height: 100%; aspect-ratio: 1; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font: 400 italic clamp(20px, 2vw, 30px)/1 var(--serif); }
.cc-act { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.cc-act button { min-height: 44px; border: 0; background: var(--paper); font: 600 9.5px/1 var(--sans); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cc-act { position: absolute; left: 8px; right: 8px; bottom: 8px; gap: 4px; background: none; border: 0; opacity: 0; transform: translateY(8px); transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out); }
  .cc-act button { min-height: 38px; border-radius: 999px; background: rgba(251, 250, 247, .95); transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
  .cc-act button:hover { background: var(--ink); color: var(--paper); }
  .cc:hover .cc-act, .cc:focus-within .cc-act { opacity: 1; transform: none; }
  .cc:hover .cc-ph img { transform: scale(1.06); }
}
.cc-tx { display: grid; gap: 4px; padding-top: 11px; }
.cc-tag { font: 600 9.5px/1.3 var(--sans); font-stretch: 112%; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.cc-tx b { font: 700 clamp(21px, 1.8vw, 28px)/1.02 var(--serif); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.cc-spec { font-size: 12.5px; line-height: 1.4; color: var(--mute); }

/* ---------- grouped grids: collection > book > pattern ---------- */
.grp-h { display: flex; align-items: baseline; margin: 0; }
.grp-h sup { font: 600 10px/1 var(--sans); letter-spacing: .1em; color: var(--mute); margin-left: 8px; font-variant-numeric: tabular-nums; }
.g0 { margin-top: clamp(36px, 4vw, 64px); }
.g0 > .grp-h { font: 700 clamp(32px, 3.6vw, 60px)/1 var(--serif); letter-spacing: -.025em; padding: 0 var(--g) 14px; border-bottom: 1px solid var(--ink); margin-bottom: 16px; }
.g1 { margin-top: 22px; }
.g1 > .grp-h { font: 400 clamp(20px, 1.8vw, 28px)/1.1 var(--serif); padding: 0 var(--g) 12px; }
.g2 { margin-top: 16px; }
.g2 > .grp-h { font: 600 10px/1 var(--sans); font-stretch: 112%; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); padding: 0 var(--g) 10px; }
.g0 > .grp-h + .grid { margin-top: 0; }
.grp-more { display: inline-flex; align-items: center; gap: 8px; margin: 10px var(--g) 0; min-height: 44px; border: 0; background: none; padding: 0; font: 600 11px/1 var(--sans); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; border-bottom: 1px solid currentColor; }
.grp-more i { font-style: normal; }

/* ---------- in-page bar (collection, sub-stores) ---------- */
.subnav { position: sticky; top: var(--hd); z-index: 6; display: flex; align-items: center; gap: 2px; height: 52px; padding: 0 var(--g); overflow-x: auto; scrollbar-width: none;
  background: rgba(251, 250, 247, .9); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--line); }
.subnav::-webkit-scrollbar { display: none; }
.subnav .sub-t { margin-right: auto; white-space: nowrap; padding-right: 16px; }
.subnav a, .subnav button { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border: 0; background: none; cursor: pointer;
  font: 600 11px/1 var(--sans); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; transition: transform 160ms var(--ease-out); }
.subnav a:active, .subnav button:active { transform: scale(.97); }
.subnav sup { font-size: 9px; margin-left: 4px; color: var(--mute); }
.subnav .sub-st { margin-left: 6px; border: 1px solid var(--ink); border-radius: 999px; min-height: 36px; }
@media (max-width: 599px) { .subnav .sub-t { display: none; } .subnav { justify-content: space-between; } }
@media (hover: hover) and (pointer: fine) { .subnav a:not(.sub-st):hover, .subnav button:hover { color: var(--sea); } }
body[data-page=collection] .filters, body[data-page=niche] .filters { position: static; }
[id] { scroll-margin-top: calc(var(--hd) + 60px); }
.opener.short { min-height: min(70svh, 700px); }
.cloth-sec { padding-bottom: var(--sec); }
.cloth-hd { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; padding: clamp(28px, 4vw, 52px) var(--g) 18px; }
.cloth-hd .count { padding: 0; }
.sec-hd.row { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 16px; }
.strip-nav { display: none; gap: 8px; }
.strip-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink); background: none; cursor: pointer; font-size: 16px; transition: transform 160ms var(--ease-out); }
.strip-nav button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .strip-nav { display: flex; } }
.n-hero .spec { margin-top: 4px; }
.pd-info .sku { font-size: clamp(52px, 6.4vw, 116px); letter-spacing: -.035em; }

/* ---------- merchant blocks: mills line, you are / we do, how trade works, the house ---------- */
.mills { font: 400 italic clamp(16px, 1.3vw, 19px)/1.6 var(--serif); color: var(--ink); }
.mills .cap { font-style: normal; color: var(--mute); margin-right: 10px; font-size: 9.5px; }
.match { padding: var(--sec) var(--g); display: grid; gap: clamp(28px, 4vw, 52px); }
.mx { border-top: 1px solid var(--ink); }
.mx-r { display: grid; gap: 10px; padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.mx-r p { display: grid; gap: 6px; }
.mx-r .cap { color: var(--mute); font-size: 9.5px; }
.mx-you { font: 400 clamp(22px, 2.2vw, 34px)/1.15 var(--serif); letter-spacing: -.01em; }
.mx-we { font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 46ch; }
.mx-arr { display: none; font: 400 italic 28px/1 var(--serif); color: var(--sea); }
@media (min-width: 900px) { .match { grid-template-columns: 4fr 8fr; } .mx-r { grid-template-columns: 1fr 44px 1fr; align-items: baseline; column-gap: 24px; } .mx-arr { display: block; } }
.trade { padding: var(--sec) var(--g); display: grid; gap: clamp(28px, 4vw, 52px); border-top: 1px solid var(--line); }
.trade .steps .cap { color: var(--mute); }
.house { padding: var(--sec) var(--g); display: grid; gap: 32px; border-top: 1px solid var(--line); }
.house .spec a { border-bottom: 1px solid currentColor; }
@media (min-width: 900px) { .house { grid-template-columns: 5fr 7fr; column-gap: 5vw; align-items: end; } }

/* ---------- mill ticket under every look ---------- */
.tk { display: grid; grid-template-columns: 50px 1fr; gap: 12px; align-items: center; padding-top: 10px; }
.tk-chip { position: relative; display: block; width: 50px; aspect-ratio: 1; padding: 3px; background: var(--paper); box-shadow: 0 0 0 1px var(--ink); }
.tk-chip img { width: 100%; height: 100%; object-fit: cover; }
.tk-chip::before { content: ''; position: absolute; z-index: 1; left: 6px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .55); }
.tk-tx { display: grid; gap: 3px; min-width: 0; }
.tk-tx b { font: 700 18px/1.05 var(--serif); font-variant-numeric: lining-nums; }
.tk-tx small { font: 600 8.5px/1.35 var(--sans); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- the Shivas swatch card (A6, punched corner, 9 x 11 window) ---------- */
.scard { --cw: 336px; position: relative; display: flex; flex-direction: column; width: var(--cw); font-size: calc(var(--cw) / 21); padding: 1.375em 1.375em 1.1em; background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 0 rgba(18, 18, 18, .06), 0 1.1em 2.5em -1.1em rgba(18, 18, 18, .38); transition: transform 300ms var(--ease-out); }
.scard::before { content: ''; position: absolute; top: .875em; left: .875em; width: .875em; height: .875em; border-radius: 50%; background: var(--table); box-shadow: inset 0 1px 2px rgba(18, 18, 18, .25); }
.scard .k { font: 600 .5625em/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.sc-top { display: flex; justify-content: space-between; align-items: center; padding-left: 1.375em; }
.sc-top > .k { color: var(--mute); }
.sc-mk { display: grid; line-height: 1; }
.sc-mk b { font: 700 .75em/1 var(--serif); letter-spacing: .22em; }
.sc-mk s { text-decoration: none; font: 600 .375em/1 var(--sans); letter-spacing: .6em; color: var(--sea); margin-top: .3em; }
.sc-win { display: block; margin: 1em 0 .875em; aspect-ratio: 9 / 11; border: 1px solid var(--rule); overflow: hidden; }
.sc-win img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); }
.sc-code { font: 700 1.625em/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.sc-spec { display: flex; justify-content: space-between; gap: 1em; margin-top: .5em; color: var(--mute); }
.sc-spec + .sc-spec { margin-top: .25em; }
.sc-lot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; margin-top: .75em; padding-top: .5em; border-top: 1px solid var(--rule); }
.sc-lot .nfr { color: var(--sea); white-space: nowrap; }
.sc-cell { container-type: inline-size; width: 100%; }
.sc-cell .scard { --cw: 100cqw; }
.table-well { display: grid; place-items: center; padding: clamp(28px, 5vw, 64px) clamp(28px, 6vw, 80px); background: var(--table); }
.table-well .sc-cell { max-width: 380px; }

/* ---------- starter: the pack on the table ---------- */
.ss-table { position: relative; container-type: inline-size; aspect-ratio: 1 / 1.12; background: var(--table); overflow: hidden; }
.ss-table .scard { --cw: 48cqw; position: absolute; top: 8cqw; left: calc(4cqw + var(--i) * 9.6cqw); transform: rotate(calc((var(--i) - 2) * 5deg)); transform-origin: 50% 120%; z-index: var(--i); }
.ss-table .scard.on { transform: translateY(-4cqw) rotate(0deg); z-index: 9; }
@media (hover: hover) and (pointer: fine) { .ss-table .scard:hover { transform: translateY(-4cqw) rotate(0deg); z-index: 9; } }
.ss-sleeve { display: none; }
@media (min-width: 900px) {
  .ss-table { aspect-ratio: 1 / .92; }
  .ss-table .scard { --cw: 34cqw; top: 14cqw; left: calc(30cqw + var(--i) * 7.6cqw); }
  .ss-sleeve { position: absolute; left: 5cqw; top: 9cqw; width: 34cqw; aspect-ratio: 105 / 148; z-index: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; font-size: calc(34cqw / 21);
    padding: 1.6em 1.4em; background: var(--ink); color: var(--paper); box-shadow: 0 1.2em 2.4em -1.1em rgba(18, 18, 18, .5); transform: rotate(-3deg); }
  .ss-sleeve .sc-mk b { color: var(--paper); }
  .ss-sleeve img { width: 46%; align-self: center; }
  .ss-sleeve .serif { font: 700 2.2em/.92 var(--serif); letter-spacing: -.02em; } .ss-sleeve .serif em { font-weight: 400; }
  .ss-sleeve .k { font: 600 .5625em/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--pmute); }
}

/* ---------- edits (women / men) ---------- */
.es { padding: var(--sec) 0; display: grid; gap: clamp(28px, 4vw, 52px); }
.es + .es { border-top: 1px solid var(--line); }
.es-hd { padding: 0 var(--g); display: grid; gap: 22px; }
.es-meta { display: grid; gap: 18px; align-content: end; }
.es-grid { display: grid; gap: 28px var(--gap); padding: 0 var(--gap); align-items: start; }
.es-more { display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--gap); }
.es-cloth { display: grid; gap: 16px; }
.es-cloth .sec-hd { padding: 0 var(--g); }
.grid.six { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grid.six { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grid.six { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 900px) {
  .es-hd { grid-template-columns: 1fr minmax(320px, 420px); align-items: end; column-gap: 5vw; }
  .es-grid { grid-template-columns: 7fr 5fr; }
  .es.m .es-grid { grid-template-columns: 5fr 7fr; } .es.m .es-lead { order: 2; }
}

/* ---------- the Swatchbooks ---------- */
.sb { padding: var(--sec) var(--g); display: grid; gap: clamp(28px, 4vw, 52px); border-top: 1px solid var(--line); }
.sb-hd { display: grid; gap: 16px; }
@media (min-width: 900px) { .sb-hd { grid-template-columns: 1fr minmax(300px, 420px); align-items: end; column-gap: 5vw; } }
.sb-list { display: grid; grid-template-columns: 1fr 1fr; gap: 30px var(--gap); }
@media (min-width: 900px) { .sb-list { grid-template-columns: repeat(4, 1fr); } }
.sbk { display: grid; gap: 6px; align-content: start; }
.sbk .ph { display: block; aspect-ratio: 1; background: var(--table); margin-bottom: 6px; }
.sbk .ph img { object-fit: contain; padding: 8%; transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sbk .ph:hover img { transform: scale(1.04); } }
.sbk .cap { color: var(--mute); font-size: 9.5px; }
.sbk b { font: 700 clamp(18px, 1.5vw, 23px)/1.1 var(--serif); }
.sbk small { color: var(--mute); font-size: 12.5px; }
.sbk .row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 6px; }
.pill { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ink); background: none; cursor: pointer; font: 600 10px/1 var(--sans); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; transition: transform 160ms var(--ease-out); }

/* ---------- trusted by + reviews ---------- */
.trusted { padding: clamp(36px, 5vw, 64px) var(--g); display: grid; gap: 22px; justify-items: center; text-align: center; border-bottom: 1px solid var(--line); }
.trusted > .cap { color: var(--mute); }
.logos { --la: 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 18px; align-items: center; justify-items: center; width: 100%; }
.logos img { width: auto; max-width: 100%; opacity: .86; }
@media (min-width: 900px) { .logos { --la: 62px; grid-template-columns: repeat(6, 1fr); gap: 4vw; } }
.tr-line { font-size: 10px; }
.rv { padding: var(--sec) var(--g); display: grid; gap: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); }
.rv-hd { display: grid; gap: 12px; }
@media (min-width: 900px) { .rv-hd { grid-template-columns: 1fr auto; align-items: end; } }
.rv-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 14px; }
.rv-sum b { font: 700 40px/1 var(--serif); font-variant-numeric: lining-nums; }
.rv-sum span:last-child { color: var(--mute); }
.stars { color: var(--ink); letter-spacing: .1em; font-size: 13px; }
.rv-wall { columns: 1; column-gap: 14px; }
@media (min-width: 640px) { .rv-wall { columns: 2; } }
@media (min-width: 1000px) { .rv-wall { columns: 3; } }
.rvc { break-inside: avoid; margin: 0 0 14px; padding: 20px 20px 18px; display: grid; gap: 10px; background: rgba(18, 18, 18, .025); box-shadow: inset 0 0 0 1px var(--line); }
.rvc b { font: 600 16px/1.3 var(--sans); }
.rvc blockquote { margin: 0; font-size: 16.5px; line-height: 1.6; }
.rvc figcaption { font-size: 12.5px; line-height: 1.5; color: var(--mute); }
.rvc figcaption a { border-bottom: 1px solid currentColor; }
@media (max-width: 639px) { .rv:not(.all) .rvc:nth-child(n+5) { display: none; } }
.rv-all { justify-self: center; }
@media (min-width: 640px) { .rv-all { display: none; } }
/* ---------- lookbook landing, reorder, trade, unsubscribe ---------- */
.lbk { display: grid; gap: 32px; padding: var(--gap) var(--gap) var(--sec); }
.lbk-cover { position: relative; aspect-ratio: 2 / 3; overflow: hidden; color: var(--paper); background: var(--ink); }
.lbk-cover .ph { position: absolute; inset: 0; }
.lbk-cover .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(18, 18, 18, .5), rgba(18, 18, 18, 0) 30%, rgba(18, 18, 18, 0) 55%, rgba(18, 18, 18, .8)); }
.lbk-cover .book-top, .lbk-cover .book-bot { left: 20px; right: 20px; } .lbk-cover .book-top { top: 20px; } .lbk-cover .book-bot { bottom: 20px; }
.lbk-cover .book-bot .serif { font-size: clamp(48px, 6vw, 96px); }
.lbk-tx { display: grid; gap: 22px; align-content: center; padding: 0 calc(var(--g) - var(--gap)); }
@media (min-width: 900px) { .lbk { grid-template-columns: 5fr 7fr; column-gap: 5vw; align-items: center; } .lbk-cover { max-height: calc(100svh - var(--hd) - 24px); justify-self: stretch; } }
.spreads { display: grid; gap: clamp(40px, 6vw, 90px); padding-bottom: var(--sec); }
.spread { display: grid; gap: 14px; }
.spread > .cap { padding: 0 var(--g); color: var(--mute); }
.spread-pp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: 0 var(--gap); align-items: start; }
.spread-pp .table-well { height: 100%; }
.ro { display: grid; gap: 36px; padding: var(--gap) var(--gap) var(--sec); }
.ro-form { display: grid; gap: 18px; align-content: start; max-width: 520px; padding: 0 calc(var(--g) - var(--gap)); }
@media (min-width: 900px) { .ro { grid-template-columns: 6fr 6fr; column-gap: 5vw; align-items: center; } }
.pd-media .table-well, .pd-media .wide { grid-column: 1 / -1; }
.ft-house { display: grid; gap: 18px; align-content: start; }
.ft-house .seal { width: 112px; height: 112px; }
.unsub { min-height: calc(100svh - var(--hd)); display: grid; align-content: center; gap: 24px; padding: var(--sec) var(--g); }

/* starter: ink sleeve + dye-lot tag sit on the table with the cards */
.ss-tag { display: none; }
@media (min-width: 900px) {
  .ss-table { aspect-ratio: 1 / 1.02; }
  .ss-tag { position: absolute; left: 5cqw; top: 62cqw; width: 34cqw; z-index: 1; display: grid; gap: .5em; font-size: calc(34cqw / 21); padding: 1.2em 1.3em 1.1em; background: var(--paper);
    box-shadow: 0 0 0 1px var(--rule), 0 .9em 1.9em -1.1em rgba(18, 18, 18, .35); transform: rotate(2deg); }
  .ss-tag::before { content: ''; position: absolute; right: 1.1em; top: 1.1em; width: .75em; height: .75em; border-radius: 50%; border: 1px solid var(--mute); }
  .ss-tag .k { font: 600 .5625em/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
  .ss-tag .row { display: flex; justify-content: space-between; gap: 1em; border-top: 1px solid var(--rule); padding-top: .4em; font-size: .72em; }
  .ss-tag .row span:first-child { color: var(--mute); }
  .ss-sleeve { top: 4cqw; height: auto; aspect-ratio: 105 / 140; }
}
.cc-price { font: 600 10px/1.4 var(--sans); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; margin-top: 2px; }
.house .d2 { font-size: clamp(40px, 5vw, 88px); }
.ss { align-items: start; }
button[disabled] { opacity: .4; pointer-events: none; }
/* ---------- for/<brand>: the personal page ---------- */
.for-hd { padding: clamp(48px, 7vw, 110px) var(--g) clamp(32px, 4vw, 56px); display: grid; gap: 22px; }
.for-hd .d1 { max-width: 12ch; } .for-hd .lede { max-width: 52ch; }
.for-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 30px var(--gap); padding: 0 var(--gap) var(--sec); }
@media (min-width: 900px) { .for-picks { grid-template-columns: repeat(3, 1fr); } }
.fp { display: grid; gap: 10px; align-content: start; } .fp .cc-spec { padding: 0 4px; }
.fp .table-well { padding: clamp(16px, 3vw, 44px); }
.fp-act { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px; }
.for-reply { padding: var(--sec) var(--g); display: grid; gap: 20px; justify-items: start; border-top: 1px solid var(--line); }
.fp-why { font: 400 italic 17px/1.4 var(--serif); padding: 4px 4px 0; }
.pd-info .sku, .ro .sku { font-size: clamp(40px, 4.6vw, 96px); white-space: nowrap; }