/* Vienne store. Base: tokens, type, layout, buttons, links, focus, motion rules.
   Minimal: off white ground, near black ink, lots of space. Bold condensed uppercase headings
   (Barlow Condensed), tiny spaced uppercase labels everywhere else (Manrope). Square corners, hairlines. */

:root {
  --paper: #f2f1ee;
  --tile: #e6e4df;       /* the light neutral square a product sits on until it has a cutout */
  --bone: #e9e7e2;
  --ink: #111111;
  --ink-2: #3b3b3a;
  --muted: #6f6e6a;
  --rule: rgba(17, 17, 17, .12);
  --rule-2: rgba(17, 17, 17, .26);
  --ok: #2f5d3a;
  --err: #8a2f2f;
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --serif: var(--display);
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gutter: 16px;
  --hdr: 56px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.6, 0, .8, .3);
  --max: 1440px;
}
@media (min-width: 700px) { :root { --gutter: 28px; --hdr: 64px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; scroll-padding-top: calc(var(--hdr) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; border-radius: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
dl, dd { margin: 0; }
[hidden] { display: none !important; }
main { display: block; outline: none; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 16px; background: var(--ink); color: var(--paper); font-size: 13px; }
.skip:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- type ---------- */
.eyebrow, .label {
  margin: 0 0 12px;
  font: 600 10.5px/1.35 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.h1, .h2, .h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; }
.h1 { font-size: clamp(40px, 8vw, 88px); line-height: .95; }
.h1--xl { font-size: clamp(44px, 9vw, 112px); }
.h1 em, .h2 em, .hero__h em { font-style: normal; }
.h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1; }
.h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.05; }
.h4 { font: 600 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; margin: 32px 0 12px; }
.sub { margin: 10px 0 0; font: 500 11px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 12.5px; line-height: 1.5; }
.lead { font-size: 15px; max-width: 36em; }
.note { color: var(--muted); margin: 10px 0 0; }

/* ---------- links ---------- */
.u {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size .45s var(--ease);
}
@media (hover: hover) { .u:hover { background-size: 0 1px; background-position: 100% 100%; } }
.ul { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .45s var(--ease); }
@media (hover: hover) { .ul:hover { background-size: 100% 1px; } }
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  padding: 12px 0;
}
.link-arrow svg, .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .4s var(--ease); }
@media (hover: hover) { .link-arrow:hover svg, .btn:hover svg { transform: translateX(4px); } }

/* ---------- buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px;
  font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--ink);
  white-space: nowrap;
  transition: color .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), opacity .2s;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink::before { background: #2c2c2b; }
.btn--line { background: transparent; color: var(--ink); }
.btn--line::before { background: var(--ink); }
/* small outlined button on the dark hero */
.btn--ghost { min-height: 44px; padding: 0 18px; border-color: rgba(255, 255, 255, .85); color: #fff; background: transparent; }
.btn--ghost::before { background: #fff; }
@media (hover: hover) {
  .btn:hover::before { transform: none; }
  .btn--line:hover { color: var(--paper); }
  .btn--ghost:hover { color: var(--ink); }
}
.btn--block { width: 100%; }
@media (max-width: 420px) { .btn { padding: 0 16px; letter-spacing: .14em; } }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 10.5px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.btn:active { opacity: .85; }

/* ---------- form bits ---------- */
input[type="email"], input[type="search"], input[type="text"], select {
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 12.5px; line-height: 1.45; cursor: pointer; color: var(--ink-2); }
.check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); cursor: pointer; }

/* ---------- sections ---------- */
.sec { padding: 64px 0; }
.sec--tight { padding: 40px 0; }
.sec--rule { border-top: 1px solid var(--rule); }
.sec__head { margin-bottom: 28px; }
.sec__head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; }
.sec__head--c { text-align: center; }
.sec__lead { max-width: 40em; margin: -12px 0 28px; }
.sec__more { display: flex; justify-content: center; margin-top: 36px; }
@media (min-width: 900px) { .sec { padding: 104px 0; } .sec--tight { padding: 56px 0; } .sec__head { margin-bottom: 52px; } }

.rows { border-top: 1px solid var(--rule); margin: 22px 0; }
.rows__r { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 13px; line-height: 1.5; }
.rows__r dd { min-width: 0; overflow-wrap: anywhere; }
.rows__r dt { font: 600 10.5px/1.7 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.rows--tight .rows__r { padding: 10px 0; font-size: 12.5px; }
.rows--wide .rows__r { grid-template-columns: 160px 1fr; font-size: 15px; padding: 16px 0; }
@media (max-width: 600px) { .rows--wide .rows__r { grid-template-columns: 96px 1fr; font-size: 14px; } }
@media (max-width: 420px) { .rows__r { grid-template-columns: 124px 1fr; } }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* Slow Ken Burns on hero media. Reduced motion turns it off (bottom of this file). */
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.06); } }
.kb img { animation: kb 24s ease-in-out infinite alternate; transform-origin: 50% 40%; }

/* scroll reveals (10-core.js): .rv is only ever added by script, to things below the first screen */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease) var(--rv-d, 0s), transform 1s var(--ease) var(--rv-d, 0s); }
.js .rv.is-in { opacity: 1; transform: none; }
/* pictures fade in as they finish loading (watchImg in 10-core.js) */
.js .pic { transition: opacity .7s var(--ease); }
.js .pic.is-loading { opacity: 0; }

/* No cross-page view transitions (removed Oct 28 2026): while one runs, the transition layer sits over the page
   and swallows taps, so buttons needed two taps right after every page load. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .rv, .js .pic.is-loading { opacity: 1; transform: none; }
}

/* Vienne store. Components: announcement, header, drawers, bag, search, product shots, cards, chips,
   signup, accordions, urgency, footer. */

/* ---------- announcement bar ---------- */
.announce { background: var(--ink); color: #f2f1ee; }
.announce__list { position: relative; height: 32px; overflow: hidden; text-align: center; }
.announce__list li {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter);
  font: 600 10px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.announce__list li + li { opacity: 0; }
.js .announce__list li { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .announce__list li.is-out { opacity: 0; transform: translateY(-8px); }
.js .announce__list li.is-in { opacity: 1; transform: none; }

/* ---------- header: tiny text nav left, VIENNE centred, Search and CART (0) right ---------- */
.hdr {
  position: sticky; top: 0; z-index: 40;
  background: rgba(242, 241, 238, .94);
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--ease);
}
@supports (backdrop-filter: blur(8px)) { .hdr { backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); } }
.hdr.is-scrolled { border-bottom-color: var(--rule); }
.hdr__in {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--hdr); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
}
.hdr__left { display: flex; align-items: center; }
.hdr__nav { display: none; gap: 26px; }
.hdr__txt, .hdr__link {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font: 600 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.hdr__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
@media (hover: hover) { .hdr__link:hover::after, .hdr__link.is-active::after { transform: scaleX(1); transform-origin: left; } }
.wordmark { justify-self: center; display: block; padding: 10px 0; color: var(--ink); }
.wordmark__svg { width: 84px; height: auto; aspect-ratio: 2493.87 / 962.87; }
.wordmark--sm .wordmark__svg { width: 84px; }
.hdr__tools { justify-self: end; display: flex; align-items: center; gap: 12px; }
.hdr__search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.hdr__search-l { display: none; }
.hdr__icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; -webkit-tap-highlight-color: transparent;
}
.hdr__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.bag-count { display: inline-block; min-width: .6em; text-align: center; }
@keyframes bump { 0% { transform: none; } 35% { transform: translateY(-3px); } 100% { transform: none; } }
.bag-count.bump { animation: bump .45s var(--ease); }
@media (min-width: 900px) {
  .hdr__nav { display: flex; }
  .hdr__menu { display: none; }
  .hdr__search svg { display: none; }
  .hdr__search-l { display: inline; }
  .hdr__tools { gap: 26px; }
  .wordmark__svg { width: 112px; }
}

/* ---------- scrim + drawers ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(17, 17, 17, .3); opacity: 0; transition: opacity .4s var(--ease); }
.scrim.is-on { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; z-index: 70;
  width: min(420px, 100%); height: 100%; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--paper); border-left: 1px solid var(--rule);
  transform: translateX(100%); transition: transform .5s var(--ease);
  overscroll-behavior: contain;
}
.drawer--left { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--rule); transform: translateX(-100%); }
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--hdr); padding: 0 6px 0 var(--gutter); border-bottom: 1px solid var(--rule); }
.drawer__title { margin: 0; font: 600 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.drawer__scroll { flex: 1; overflow-y: auto; padding: 24px var(--gutter) 40px; -webkit-overflow-scrolling: touch; }
html.is-locked, html.is-locked body { overflow: hidden; }

.menu__list { padding: 12px var(--gutter); flex: 1; overflow-y: auto; }
.menu__list a { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); font: 700 30px/1 var(--display); text-transform: uppercase; }
.menu__card { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; margin: 0 var(--gutter) 8px; padding: 12px 0; border-top: 1px solid var(--rule); }
.menu__img { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--tile); }
.menu__img .pic { position: absolute; inset: 0; }
.menu__card .eyebrow { display: block; margin-bottom: 4px; }
.menu__card-t { font: 600 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.menu__foot { display: flex; flex-direction: column; gap: 10px; padding: 20px var(--gutter) calc(24px + env(safe-area-inset-bottom)); font-size: 13px; }
.menu__foot a { align-self: flex-start; }

/* ---------- bag ---------- */
.ship-meter { padding: 14px var(--gutter); border-bottom: 1px solid var(--rule); }
.ship-meter__text { margin: 0 0 9px; font-size: 12.5px; }
.ship-meter__bar { height: 2px; background: var(--rule); overflow: hidden; }
.ship-meter__bar span { display: block; height: 100%; width: 0; background: var(--ink); transition: width .7s var(--ease); }
#bag { overflow-y: auto; }
.bag__body { flex: 1 0 auto; padding: 0 var(--gutter); }
.bag__empty { padding: 40px 0; text-align: center; }
.bag__empty p { margin-bottom: 18px; }
.line { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.line__img { aspect-ratio: 1; background: var(--tile); overflow: hidden; padding: 6px; }
.line__img img { width: 100%; height: 100%; object-fit: cover; }
.line__img .ph { height: 100%; min-height: 0; padding: 0; }
.line__img .ph span { display: none; }
.line__t { margin: 0 0 2px; font: 600 11.5px/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.line__v { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.line__p { text-align: right; font-size: 13px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--rule-2); }
.qty button { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.qty button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.qty span { min-width: 22px; text-align: center; font-size: 12px; }
.line__rm { margin-left: 12px; font-size: 11.5px; color: var(--muted); }
.bag__upsell:empty { display: none; }
.bag__upsell { padding: 16px var(--gutter); border-top: 1px solid var(--rule); }
.bag__upsell .pair__row { grid-template-columns: 56px 1fr auto; }
.bag__foot { position: sticky; bottom: 0; padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: var(--paper); }
.bag__row { display: flex; justify-content: space-between; margin-bottom: 6px; font: 700 22px/1.1 var(--display); text-transform: uppercase; }
.bag__foot .small { margin-bottom: 14px; }
.checkout-note { margin-top: 14px; padding: 14px 0 0; border-top: 1px solid var(--rule); font-size: 13px; }
.checkout-note .btn { margin-top: 12px; }

/* ---------- bag savings: set prices, the waitlist code, one friendly line (20-cart.js renderSavings) ---------- */
.line__set { margin: -6px 0 10px; font: 600 10.5px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.bag__sets { margin-bottom: 8px; }
.bag__set { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 4px; font-size: 12.5px; }
.bag__set > span:last-child { white-space: nowrap; }
.bag__code p { margin: 2px 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.bag__code-c { font: 600 11.5px/1 var(--sans); letter-spacing: .12em; color: var(--ink); }
.bag__save { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(4px);
  transition: grid-template-rows .45s var(--ease), opacity .35s var(--ease) .08s, transform .45s var(--ease); }
.bag__save.is-on { grid-template-rows: 1fr; opacity: 1; transform: none; }
.bag__save-in { overflow: hidden; min-height: 0; margin: 0; }
.bag__save-t { display: block; margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--rule-2); font: 600 13px/1.4 var(--sans); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .bag__save { transition: none; transform: none; } }

/* ---------- search ---------- */
.search {
  position: fixed; left: 0; right: 0; top: 0; z-index: 70;
  max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  transform: translateY(-100%); transition: transform .5s var(--ease);
}
.search.is-open { transform: none; }
.search__in { padding-top: 10px; padding-bottom: 28px; }
.search__bar { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--ink); }
.search__bar > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
.search__bar input { flex: 1; min-width: 0; height: 58px; border: 0; background: transparent; font: 700 24px var(--display); text-transform: uppercase; outline: none; }
.search__bar input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search__label { margin-top: 22px; }
.search__results { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; margin-bottom: 18px; }
.search__results a { display: block; }
.search__results .pic, .search__results .ph { aspect-ratio: 1; background: var(--tile); }
.search__results p { margin: 8px 0 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- images + placeholders ---------- */
.pic { display: block; width: 100%; height: 100%; }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.concept-tag {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  padding: 4px 6px 3px; background: rgba(242, 241, 238, .88);
  font: 600 8.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  pointer-events: none;
}
.ph {
  position: relative; width: 100%; height: 100%; min-height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 20px; text-align: center; background: var(--tile); color: var(--muted);
}
.ph__mark { width: 28px; height: 29px; color: var(--rule-2); }
.ph span { font: 600 10px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; max-width: 18em; }
.ph--sq { aspect-ratio: 1; min-height: 0; }
.ph--tall { aspect-ratio: 4 / 5; }
.ph--card, .ph--slide { aspect-ratio: 1; min-height: 0; }

/* Product shot. A cutout floats on the page with no box. Until a cutout exists, the render is cropped
   tight on a light neutral square, so the grid still reads as one clean row. */
.shot { position: relative; display: block; width: 100%; height: 100%; }
.shot--mat { background: var(--tile); }
.shot--mat .pic { position: relative; width: 100%; height: 100%; overflow: hidden; }
.shot--cut .pic img { object-fit: contain; }
.shot--alpha .pic img { filter: drop-shadow(0 18px 22px rgba(17, 17, 17, .10)); }
/* an opaque cutout's background is matched to --paper in build/images.py, so it needs no box at all */
.shot--flat { background: var(--paper); }

/* ---------- product cards: no box, tiny uppercase name and price under the piece ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 12px; }
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); gap: 64px 28px; }
  .grid--4 { grid-template-columns: repeat(4, 1fr); gap: 64px 24px; }
}
.card { position: relative; text-align: center; }
.card__link { display: block; }
.card__media { position: relative; aspect-ratio: 1; }
.card__media > .shot, .card__media > .ph { position: absolute; inset: 0; }
.card__media img { transition: transform 1.2s var(--ease), opacity .6s var(--ease); }
.card__alt { opacity: 0; transition: opacity .6s var(--ease); }
@media (hover: hover) {
  .card:hover .card__img img { transform: scale(1.03); }
  .card:hover .card__alt { opacity: 1; }
}
.card__t { margin: 16px 0 4px; font: 600 11px/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.card__p { margin: 0; font: 500 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.card__sub { margin: 4px 0 0; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- urgency: only real numbers (build/urgency.py), small and quiet ---------- */
.urgs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 8px 0 0; }
.urgs--pdp { justify-content: flex-start; margin: 0 0 10px; }
.urg { margin: 0; font: 600 10px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.urg--low::before, .urg--fast::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: #b3361f; vertical-align: middle; }
.urg--clock { margin-top: 12px; }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px; scrollbar-width: none; }
.chips--scroll::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .chips--scroll { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 12px; border: 1px solid var(--rule-2);
  font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
@media (hover: hover) { .chip:hover { border-color: var(--ink); } }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip i { width: 10px; height: 10px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .2); }
.chip.is-on i { box-shadow: 0 0 0 1px rgba(242, 241, 238, .6); }

/* ---------- signup ---------- */
.signup { max-width: 460px; }
.signup__h { font: 700 22px/1.05 var(--display); text-transform: uppercase; margin-bottom: 12px; }
.signup__row { display: flex; border: 1px solid var(--ink); background: transparent; }
.signup__row:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.signup__row input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 0; background: transparent; font-size: 16px; outline: none; }
.signup__row input::placeholder { color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.signup__row .btn { border: 0; min-height: 48px; }
.signup__status { min-height: 18px; margin: 8px 0 0; font-size: 12.5px; }
.signup__status.err { color: var(--err); }
.signup__fine { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.signup__done { padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.signup__done p:first-child { font: 700 24px/1.1 var(--display); text-transform: uppercase; margin-bottom: 4px; }

/* ---------- accordions ---------- */
.acc { border-bottom: 1px solid var(--rule); }
.acc:first-of-type { border-top: 1px solid var(--rule); }
.acc summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 15px 30px 15px 0; font: 600 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::before, .acc summary::after {
  content: ""; position: absolute; right: 2px; top: 50%; width: 10px; height: 1px; background: currentColor;
  transition: transform .4s var(--ease), opacity .3s;
}
.acc summary::after { transform: rotate(90deg); }
.acc[open] summary::after { transform: rotate(0); opacity: 0; }
.acc__a { padding: 0 0 16px; font-size: 13px; color: var(--ink-2); max-width: 40em; }
.acc[open] .acc__a { animation: rise .45s var(--ease) both; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .acc::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
  .acc[open]::details-content { block-size: auto; }
}

/* ---------- footer ---------- */
.ftr { border-top: 1px solid var(--rule); padding-top: 56px; }
.ftr__top { display: grid; gap: 44px; }
.ftr__h { font: 700 26px/1 var(--display); text-transform: uppercase; margin-bottom: 16px; }
.ftr__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; }
.ftr__col li { margin: 0 0 9px; font: 500 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.ftr__base { margin-top: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 16px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); font-size: 11px; color: var(--muted); }
.ftr__base p { margin: 0; }
@media (min-width: 900px) {
  .ftr__top { grid-template-columns: 4fr 7fr; gap: 64px; }
  .ftr__top--solo { grid-template-columns: 1fr; }
  .ftr__cols { grid-template-columns: repeat(4, 1fr); }
}

.script { aspect-ratio: 2493.87 / 962.87; height: auto; }
/* Colour circles under each product card: hover or tap swaps the card photo to that colourway */
.card__sw { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* scoped to the card: the product page has its own .sws circles (30-pages.css). A bigger invisible tap area on phones. */
.card__sw .sw { position: relative; width: 14px; height: 14px; padding: 0; border-radius: 50%; background: var(--sw); border: 1px solid rgba(17, 17, 17, .2); cursor: pointer; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.card__sw .sw::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.card__sw .sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
@media (hover: hover) { .card__sw .sw:hover { transform: scale(1.15); } }
.card__sw .sw:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.card__cv { position: absolute; inset: 0; }
.card__cv > .shot, .card__cv > .ph { position: absolute; inset: 0; }
.card__cv[hidden] { display: none; }

/* ---------- motion polish ---------- */
/* menu links rise in one after another as the drawer opens */
.drawer.is-open .menu__list li { animation: rise .55s var(--ease) both; }
.drawer.is-open .menu__list li:nth-child(2) { animation-delay: .05s; }
.drawer.is-open .menu__list li:nth-child(3) { animation-delay: .1s; }
.drawer.is-open .menu__list li:nth-child(4) { animation-delay: .15s; }
.drawer.is-open .menu__list li:nth-child(5) { animation-delay: .2s; }
.drawer.is-open .menu__list li:nth-child(n+6) { animation-delay: .25s; }
.menu__list a { transition: opacity .3s var(--ease), padding-left .4s var(--ease); }
@media (hover: hover) { .menu__list a:hover { padding-left: 6px; } }
/* cards: the name dims a touch and the piece lifts slightly on hover */
.card__t, .card__p { transition: opacity .35s var(--ease); }
@media (hover: hover) { .card__link:hover .card__t { opacity: .7; } }
.card__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.hdr__txt, .hdr__icon, .ftr__col a, .help__nav a, .crumbs a { transition: color .3s var(--ease), opacity .3s var(--ease); }
@media (hover: hover) { .ftr__col a:hover { opacity: .6; } }
/* search results and bag lines arrive with a short rise */
.search.is-open .search__results > * { animation: rise .5s var(--ease) both; }
.search.is-open .search__results > :nth-child(2) { animation-delay: .04s; }
.search.is-open .search__results > :nth-child(3) { animation-delay: .08s; }
.search.is-open .search__results > :nth-child(n+4) { animation-delay: .12s; }
/* "Price soon · Coming soon" never breaks mid phrase on a phone card: two tidy lines instead */
@media (max-width: 599px) { .card__st { display: block; margin-top: 2px; } .card__dot { display: none; } }
/* Vol. 01 4-Pack (Oct 29 2026): one card across two columns, so both sets sit side by side instead of being cropped */
.card--wide { grid-column: span 2; }
.card--wide .card__media { aspect-ratio: 3 / 2; }
@media (min-width: 900px) { .card--wide .card__media { aspect-ratio: 2 / 1; } }

/* Vienne store. Page sections: home hero, arrivals, join block, shop, collection, product, help, popup. */

/* ---------- home hero: light grey studio photo, dark text over its empty space ----------
   Phones: the tall 4:5 photo, copy on a band of the photo's own grey above it (faded together).
   768px and up: the wide 16:9 photo at its own ratio, copy bottom left over the empty grey. */
.hero { position: relative; overflow: hidden; background: var(--hero-bg, #d9d9d9); color: var(--ink); display: flex; flex-direction: column; }
.hero__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%); }
.hero__media .pic { position: absolute; inset: 0; }
.hero__media img { object-position: 50% 100%; }
.hero__in { order: -1; position: relative; z-index: 1; display: grid; justify-items: start; gap: 8px; padding-top: 28px; padding-bottom: 0; }
.hero__vol { margin: 0; font: 700 clamp(40px, 7vw, 76px)/.92 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.hero__h { margin: 0; font: 600 11px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.hero__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin-top: 12px; }
.hero__btn { min-height: 42px; }
.hero__join { font: 600 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 12px 0; text-decoration: underline; text-underline-offset: 5px; }
.hero__tag { left: auto; right: var(--gutter); bottom: 14px; }
@media (min-width: 768px) {
  .hero { display: block; height: min(calc(100svh - var(--hdr) - 32px), 56.25vw); min-height: 420px; }
  .hero__media { position: absolute; inset: 0; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
  .hero__media img { object-position: 70% 50%; }
  .hero__in { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 0; padding-bottom: 48px; }
}
@media (min-width: 1200px) { .hero__in { padding-bottom: 64px; } }

/* ---------- small centred band ---------- */
.minor { text-align: center; display: grid; justify-items: center; }
.minor__t { margin: 0 0 4px; font: 700 clamp(22px, 3vw, 32px)/1 var(--display); text-transform: uppercase; max-width: 18em; }

/* ---------- join block: one big line, one small line, inline email ---------- */
.join { border-top: 1px solid var(--rule); }
.join__in { display: grid; justify-items: center; text-align: center; }
.join__h { margin: 0 0 12px; font: 700 clamp(36px, 7vw, 76px)/.92 var(--display); text-transform: uppercase; max-width: 12em; }
.join__p { margin: 0 0 28px; font-size: 13px; color: var(--muted); max-width: 34em; }
.join .signup { width: 100%; text-align: left; }
.join .check { justify-content: center; }
.join .signup__fine, .join .signup__status { text-align: center; }

/* ---------- page heads + breadcrumbs ---------- */
.pagehead { padding: 28px 0 32px; border-bottom: 1px solid var(--rule); }
.pagehead .h1 { margin-bottom: 12px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font: 500 10.5px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (hover: hover) { .crumbs a:hover { color: var(--ink); } }
.crumbs--pdp { margin: 16px 0 14px; }
@media (max-width: 699px) { .crumbs--pdp { display: none; } }   /* phones: the photo and the buy box come first */
@media (min-width: 900px) { .pagehead { padding: 44px 0 52px; } }
.pagehead--split { padding-bottom: 0; border-bottom: 0; }
.coll__in { display: grid; gap: 28px; }
.coll__media { order: -1; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tile); }
.coll__media .pic { position: absolute; inset: 0; }
.coll__copy p:not(.eyebrow) { color: var(--ink-2); max-width: 32em; }
@media (min-width: 900px) { .coll__in { grid-template-columns: 1fr 1fr; gap: 72px; align-items: end; } .coll__media { order: 0; } }
.promise { max-width: 760px; }
.promise__p { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.5; margin: 18px 0 22px; }

/* ---------- filters ---------- */
.filters { position: sticky; top: var(--hdr); z-index: 20; background: rgba(242, 241, 238, .96); border-bottom: 1px solid var(--rule); }
.filters__bar { display: flex; justify-content: space-between; align-items: center; min-height: 50px; }
.filters__count, .filters__toggle { margin: 0; font: 600 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.filters__toggle { min-height: 44px; padding: 0 2px; }
.filters__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 4px 0 18px; }
.filters__g { min-width: 0; }
.js .filters__panel { display: none; }
.js .filters.is-open .filters__panel { display: grid; animation: rise .35s var(--ease) both; }
.filters__g .eyebrow { margin-bottom: 8px; }
.filters__clear { justify-self: start; font-size: 12px; }
@media (min-width: 900px) {
  .filters { position: static; background: transparent; }
  .filters__toggle { display: none; }
  .js .filters__panel, .filters__panel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 36px; }
}
.card.is-hidden { display: none; }
.empty { text-align: center; }
.empty .btn { margin-top: 18px; }

/* ---------- product page ----------
   Phones: image, title and price, buy box, accordions. Desktop: small info left, one huge image centred,
   buy box right, both sides sticky, lots of empty space. */
.pdp__in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "head" "buy" "accs"; gap: 22px; padding-bottom: 48px; }
.pdp__media { grid-area: media; margin: 0 calc(-1 * var(--gutter)); min-width: 0; }
.pdp__head { grid-area: head; min-width: 0; }
.pdp__buy { grid-area: buy; min-width: 0; }
.pdp__accs { grid-area: accs; min-width: 0; }
@media (min-width: 1000px) {
  .pdp__in { grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr) minmax(270px, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "head media buy" "accs media buy"; gap: 0 56px; padding-bottom: 88px; }
  .pdp__media { margin: 0; }
  .pdp__head { padding-top: 24px; }
  .pdp__accs { align-self: start; position: sticky; top: calc(var(--hdr) + 24px); margin-top: 28px; }
  .pdp__buy { align-self: start; position: sticky; top: calc(var(--hdr) + 24px); padding-top: 24px; }
}

.gal { position: relative; }
.gal__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline-offset: -3px; }
.gal__track::-webkit-scrollbar { display: none; }
.gal__slide { position: relative; flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: start; }
.gal__slide > .shot, .gal__slide > .ph { position: absolute; inset: 0; }
.gal__slide .shot--mat { padding: 0; }
.gal__slide.is-off { display: none; }
.gal__ui { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 12px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; pointer-events: none; }
.gal__count { font: 600 10px/1 var(--sans); letter-spacing: .14em; }
.gal__dots { display: flex; gap: 5px; }
.gal__dots i { width: 5px; height: 5px; border-radius: 3px; background: rgba(17, 17, 17, .25); transition: width .4s var(--ease), background-color .4s; }
.gal__dots i.on { width: 16px; background: var(--ink); }
.gal__slide .concept-tag { bottom: auto; top: 10px; left: 10px; }
.gal__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: opacity .25s; }
.gal__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.gal__nav--prev { left: 4px; }
.gal__nav--prev svg { transform: scaleX(-1); }
.gal__nav--next { right: 4px; }
@media (hover: hover) { .gal__nav:hover { background: rgba(17, 17, 17, .06); } }
.gal__nav:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gal__nav[disabled] { opacity: 0; pointer-events: none; }
@media (min-width: 1000px) {
  .gal__ui { justify-content: center; }
  .gal__nav--prev { left: -8px; }
  .gal__nav--next { right: -8px; }
}

.pdp__t { font: 700 clamp(30px, 3vw, 42px)/.95 var(--display); text-transform: uppercase; margin: 0 0 10px; }
.pdp__price { margin: 0 0 12px; font: 600 13px/1.4 var(--sans); letter-spacing: .08em; }
.pdp__hook { margin: 0; font-size: 13px; color: var(--muted); }
.ticks { margin: 10px 0 0; }
.ticks li { position: relative; padding: 4px 0 4px 16px; font-size: 13px; line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 1px; background: var(--ink); }

.opt { margin-bottom: 20px; }
.opt__top { display: flex; justify-content: space-between; align-items: baseline; }
.opt__l { margin: 0 0 10px; font: 600 10.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.opt__v { margin-left: 6px; font-weight: 500; color: var(--muted); }
/* colour circles, the same look as the card circles: round, a hairline edge, a ring on the selected one */
.sws { display: flex; flex-wrap: wrap; gap: 6px; margin-left: -7px; }
.sws .sw { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sws .sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sws .sw__dot { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--sw); border: 1px solid rgba(17, 17, 17, .2); box-shadow: 0 0 0 0 var(--paper), 0 0 0 0 transparent; transition: box-shadow .3s var(--ease), transform .3s var(--ease); pointer-events: none; }
.sws .sw input:checked + .sw__dot { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--ink); }
@media (hover: hover) { .sws .sw:hover .sw__dot { transform: scale(1.1); } }
.sws .sw input:focus-visible + .sw__dot { outline: 2px solid var(--ink); outline-offset: 5px; }
.sizesel { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 6px; }
.size { position: relative; }
.size input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.size > span { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1px solid var(--rule-2); font: 600 11px/1 var(--sans); letter-spacing: .08em; transition: background-color .25s var(--ease), color .25s, border-color .25s; }
@media (hover: hover) { .size:hover > span { border-color: var(--ink); } }
.size input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.size input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.size.is-out > span { color: var(--muted); text-decoration: line-through; border-style: dashed; cursor: not-allowed; }
.opt .urg { margin-top: 10px; }
.btn--buy { min-height: 54px; }
.btn--buy.is-added { background: var(--ok); border-color: var(--ok); }
.buy.shake .sizesel { animation: shake .4s var(--ease); }
@keyframes shake { 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
.buy__err { min-height: 16px; margin: 8px 0 0; color: var(--err); }
.cset { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; margin: 4px 0 14px; padding: 8px 10px 8px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cset__img { position: relative; aspect-ratio: 1; }
.cset__img .shot { position: absolute; inset: 0; }
.cset__txt { display: grid; gap: 2px; min-width: 0; }
.cset__txt .label { margin: 0; font-size: 9.5px; color: var(--muted); }
.cset__t { font: 600 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.cset__s { font-size: 11.5px; color: var(--muted); }
.cset svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .4s var(--ease); }
@media (hover: hover) { .cset:hover svg { transform: translateX(4px); } }
.cset-wrap { margin-top: 22px; }
.setrow { margin-top: 56px; }
.setrow__h { text-align: center; margin-bottom: 20px; }
@media (min-width: 900px) { .setrow { margin-top: 72px; } }
.facts { margin: 6px 0 0; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.facts li { position: relative; padding: 3px 0 3px 14px; font-size: 12px; }
.facts li::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.trust { margin: 12px 0 0; font-size: 12px; color: var(--ink-2); }
.trust strong { font-weight: 600; color: var(--ink); }
/* fit note on the size row (Reigning Champ, Represent): honest [ ] placeholders until the samples are worn */
.fitline { margin: 10px 0 0; color: var(--ink-2); }
.fitline__k { font-weight: 600; color: var(--ink); }
.fitbox { margin: 4px 0 16px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.fitbox .fitline { margin: 0; font-size: 13px; }
.fitbox .fitline + .fitline { margin-top: 4px; font-size: 12px; }
.buy__join { margin: 10px 0 0; color: var(--muted); }

.pair { margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rule); }
.pair .label { margin-bottom: 10px; }
.pair__row { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 10px; align-items: center; }
.pair__img { position: relative; aspect-ratio: 1; overflow: hidden; }
.pair__img .shot { position: absolute; inset: 0; padding: 4px; }
.pair__t { font: 600 10.5px/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.pair__txt .small { margin: 2px 0 0; font-size: 11.5px; }
.pair__size { height: 38px; padding: 0 24px 0 10px; border: 1px solid var(--rule-2); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 8px center; font-size: 12px; }
.pair__msg { min-height: 16px; margin: 6px 0 0; }
@media (max-width: 520px) {
  .pair__row { grid-template-columns: 52px 1fr auto; row-gap: 10px; }
  .pair__img { grid-row: span 2; align-self: start; }
  .pair__txt { grid-column: 2 / 4; }
  .pair__size { grid-column: 2; width: 100%; }
}
.concept-cta .signup { margin-top: 22px; }
/* Vol. 01 while drop.preorders_live is false: price and sizes stay, the button becomes Coming soon + notify me */
.sizesel--static { list-style: none; margin: 0; padding: 0; }
.size--static > span { color: var(--ink-2); cursor: default; }
@media (hover: hover) { .size--static:hover > span { border-color: var(--rule-2); } }
.soon { display: grid; gap: 4px; margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--ink); text-align: center; }
.soon__k { font: 700 18px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.soon__s { font-size: 12px; color: var(--ink-2); }
.buy--soon .signup { margin-top: 18px; }
.buy--soon .signup__h { font-size: 18px; }
.buy--soon .buy__join { margin: 10px 0 14px; }
.buy--soon .cset + .facts, .buy--soon .cset + .cset + .facts { border-top: 0; margin-top: -14px; }
.cartpage__soon { max-width: 34em; margin: 0 auto; }
.qs { display: grid; gap: 18px; }
.qs .muted { max-width: 36em; font-size: 13px; }
@media (min-width: 900px) { .qs { grid-template-columns: 1fr 2fr; gap: 64px; } }

/* sticky add to bag (phones). Slides up whenever the real button is off screen. */
.stickybuy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(242, 241, 238, .97); border-top: 1px solid var(--rule); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .45s var(--ease); }
.stickybuy.is-on { transform: none; }
.stickybuy__in { display: flex; align-items: center; gap: 14px; }
.stickybuy__t { flex: 1; min-width: 0; }
.stickybuy__t p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickybuy__t p:first-child { font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.stickybuy__t .small { font-size: 11.5px; color: var(--muted); }
.stickybuy .btn { flex: none; min-height: 46px; padding: 0 20px; }
@media (max-width: 999px) { .pg-product .ftr__base { padding-bottom: calc(92px + env(safe-area-inset-bottom)); } }
@media (min-width: 1000px) { .stickybuy { display: none; } }

.table-wrap { overflow-x: auto; margin: 14px 0 8px; }
.sizes { width: 100%; border-collapse: collapse; font-size: 12px; }
.sizes th, .sizes td { padding: 9px 6px; border-bottom: 1px solid var(--rule); text-align: center; white-space: nowrap; }
.sizes th[scope="row"] { text-align: left; font-weight: 500; white-space: normal; min-width: 110px; }
.sizes thead th { font: 600 10px/1 var(--sans); letter-spacing: .14em; border-bottom-color: var(--ink); }
.sizes td { color: var(--muted); }
.plain { list-style: decimal; padding-left: 20px; margin: 0 0 16px; }
ul.plain { list-style: disc; }
.plain li { margin-bottom: 8px; }

/* ---------- help pages ---------- */
.help { display: grid; gap: 32px; }
.help__nav ul { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 600 10.5px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.help__nav a { color: var(--muted); padding: 6px 0; display: inline-block; }
@media (hover: hover) { .help__nav a[aria-current], .help__nav a:hover { color: var(--ink); } }
.prose { max-width: 44em; font-size: 14px; }
.prose > p, .prose li { color: var(--ink-2); }
.prose .h4:first-child { margin-top: 0; }
.prose .btn { margin-top: 18px; }
.prose--lg p { font: 400 clamp(16px, 1.7vw, 19px)/1.6 var(--sans); color: var(--ink); }
.about { display: grid; gap: 40px; }
.about__sign { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 13px !important; }
@media (min-width: 900px) {
  .help { grid-template-columns: 220px 1fr; gap: 64px; }
  .help__nav ul { flex-direction: column; position: sticky; top: calc(var(--hdr) + 24px); }
  .about { grid-template-columns: 3fr 2fr; gap: 80px; align-items: start; }
}
.cartpage { display: grid; gap: 32px; }
@media (min-width: 900px) { .cartpage { grid-template-columns: 2fr 1fr; gap: 64px; align-items: start; } }
.nf { padding: 80px 0 110px; text-align: center; }
.nf__in { display: grid; justify-items: center; }
.nf__mark { width: 48px; height: 50px; margin-bottom: 26px; }
.nf .muted { margin: 14px 0 0; }
.nf .hero__cta { justify-content: center; margin-top: 24px; }

/* ---------- popup v3 ----------
   Phones: a bottom sheet over a dim scrim, the page stays visible above it (no full screen interstitial).
   Desktop: a centred split modal, Vol. 01 photo left, the steps right. Square corners, hairlines, one ink. */
.pop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(17, 17, 17, 0); transition: background-color .42s var(--ease); }
.pop.is-on { background: rgba(17, 17, 17, .42); }
.pop__box { position: relative; width: 100%; max-height: 92svh; display: grid; background: var(--paper); transform: translateY(100%); transition: transform .42s var(--ease); }
.pop.is-on .pop__box { transform: none; }
.pop__media { display: none; position: relative; overflow: hidden; background: var(--tile); }
.pop__media .pic { position: absolute; inset: 0; }
.pop__media img { width: 100%; height: 100%; object-fit: cover; }
.pop.is-on .pop__media img { animation: kb 24s ease-in-out infinite alternate; }
.pop__panel {
  position: relative; max-height: 92svh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 22px 20px calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
.pop__panel > * { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) {
  .pop { align-items: center; padding: 32px; }
  .pop__box { width: min(900px, 100%); max-height: min(640px, calc(100vh - 64px)); grid-template-columns: 5fr 6fr; transform: translateY(14px); opacity: 0; transition: transform .42s var(--ease), opacity .3s var(--ease); }
  .pop.is-on .pop__box { opacity: 1; }
  .pop__media { display: block; }
  .pop__panel { max-height: min(640px, calc(100vh - 64px)); padding: 44px 48px 22px; justify-content: center; }
}
.pop__panel > .pop__x { position: absolute; margin: 0; top: 4px; right: 4px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; z-index: 2; }
.pop__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.pop__prog { list-style: none; padding: 0; margin: 0 auto 16px; display: flex; gap: 4px; max-width: 96px !important; }
.pop__prog li { flex: 1; height: 2px; background: var(--rule-2); transition: background-color .3s var(--ease); }
.pop__prog li.is-on { background: var(--ink); }
.pop__step { text-align: center; }
.pop__step.is-in { animation: rise .45s var(--ease) both; }
.pop__step .eyebrow { margin-bottom: 8px; }
.pop__h { font: 700 clamp(30px, 8.4vw, 42px)/.95 var(--display); text-transform: uppercase; margin: 0 auto 8px; max-width: 12em; outline: none; }
.pop__q { font-size: 13px; color: var(--ink-2); margin: 0 auto 16px; max-width: 30em; }
.pop__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pop__opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-height: 44px; padding: 8px 8px 12px; border: 1px solid var(--rule-2); background: transparent; transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease); -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .pop__opt:hover { border-color: var(--ink); } }
.pop__opt:active { transform: scale(.98); }
.pop__opt-img { position: relative; display: block; width: 100%; aspect-ratio: 5 / 4; overflow: hidden; }
.pop__opt-img .shot { position: absolute; inset: 0; background: transparent; }
.pop__opt-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s var(--ease); }
@media (hover: hover) { .pop__opt:hover .pop__opt-img img, .pop__opt.is-on .pop__opt-img img { transform: scale(1.05) translateY(-2px); } }
.pop__mono { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pop__script { width: 44%; max-width: 92px; color: var(--ink); opacity: .55; }
.pop__opt-l { font: 700 16px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.pop__opt.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--bone); }
.pop__opt.is-on::after { content: ""; position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23f2f1ee' stroke-width='1.8'/%3E%3C/svg%3E") center / 14px no-repeat; }
@media (max-height: 700px) and (max-width: 899px) { .pop__opt-img { aspect-ratio: 2 / 1; } .pop__h { font-size: 30px; } }
.pop__panel > .pop__no { width: auto; align-self: center; margin-top: 8px; min-height: 44px; padding: 0 12px; font: 500 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.pop__fine { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.pop__fine--tbc { font-size: 10.5px; letter-spacing: .04em; }
[data-step="4"] .btn { margin-top: 18px; }
.pop__form { text-align: left; }
.pop__form input[type="email"] { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--ink); background: transparent; font-size: 16px; border-radius: 0; }
.pop__form .btn { margin-top: 14px; }

/* popup 2: one small step (same offer). Phones: the same bottom sheet. From 600px: a small centred card, no photo. */
.pop--mini .pop__panel { padding-top: 30px; }
.pop--mini .pop__h { font-size: clamp(32px, 9vw, 40px); }
.pop--mini .pop__q { margin-bottom: 14px; }
@media (min-width: 600px) {
  .pop--mini { align-items: center; padding: 24px; }
  .pop--mini .pop__box { width: min(420px, 100%); max-height: calc(100vh - 48px); grid-template-columns: 1fr; transform: translateY(14px); opacity: 0; transition: transform .42s var(--ease), opacity .3s var(--ease); }
  .pop--mini.is-on .pop__box { transform: none; opacity: 1; }
  .pop--mini .pop__panel { max-height: calc(100vh - 48px); padding: 40px 36px 26px; justify-content: flex-start; }
}

/* the Vol. 01 pass: a typographic ticket with a perforated stub you tear off */
.tix { --notch: 9px; position: relative; display: grid; grid-template-columns: 1fr 76px; margin: 4px 0 14px; text-align: left; user-select: none; -webkit-user-select: none; }
.tix__main, .tix__stub { position: relative; background: var(--ink); color: var(--paper); }
.tix__main { padding: 16px 18px 14px; overflow: hidden;
  -webkit-mask: radial-gradient(circle var(--notch) at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.tix__stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: grab; touch-action: pan-y; transform-origin: 0 100%;
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); border-left: 2px dashed rgba(242, 241, 238, .45);
  -webkit-mask: radial-gradient(circle var(--notch) at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.tix.is-pulling .tix__stub { transition: none; cursor: grabbing; }
.tix__stub svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.tix:not(.is-torn) .tix__stub svg { animation: nudge 1.6s var(--ease) infinite; }
.tix__tear { font: 600 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.tix__k { margin: 0 0 6px; font: 600 9.5px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; opacity: .7; }
.tix__big { margin: 0; font: 700 clamp(44px, 13vw, 58px)/.86 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.tix__s { margin: 4px 0 10px; font: 700 15px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.tix__pick { margin: 0; padding-top: 8px; border-top: 1px solid rgba(242, 241, 238, .22); font: 500 10.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
.tix__stamp { position: absolute; right: 14px; top: 14px; margin: 0; padding: 4px 8px; border: 1.5px solid var(--paper); font: 700 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: rotate(-8deg) scale(1.6); transition: opacity .25s var(--ease) .15s, transform .35s cubic-bezier(.3, 1.6, .5, 1) .15s; }
.tix.is-torn .tix__stub { transition: transform .7s var(--ease-in), opacity .7s var(--ease-in); transform: translate(46px, 150px) rotate(34deg); opacity: 0; pointer-events: none; }
.tix.is-torn .tix__stamp { opacity: 1; transform: rotate(-8deg); }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(5px); } }

/* teaser tab: a slim vertical ink tab on the left edge after a dismissal. Whenever a button, field or link
   would sit under it (60-popup.js checks on scroll), it tucks away to a sliver so it never covers what you tap. */
.teaser { position: fixed; left: 0; top: 56%; z-index: 40; display: inline-flex; align-items: center; gap: 8px; width: 34px; padding: 14px 0; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); background: var(--ink); color: var(--paper); font: 600 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 18px rgba(17, 17, 17, .18); transition: translate .45s var(--ease), opacity .3s var(--ease); -webkit-tap-highlight-color: transparent; }
.teaser::before { content: ""; width: 7px; height: 10px; border: 1.5px solid currentColor; border-bottom-style: dashed; }
.teaser.is-tucked { translate: -25px 0; }
@media (hover: hover) { .teaser:hover { translate: 2px 0; } .teaser.is-tucked:hover { translate: 0 0; } }
.teaser[hidden] { display: none; }
@media print { .teaser { display: none; } }
.no-js .pop, .no-js .teaser { display: none !important; }

/* ---------- Vote the next drop (/pages/vote/) ---------- */
.vote__closed { display: inline-block; margin: 18px 0 0; padding: 9px 12px 8px; border: 1px solid var(--ink); font: 600 10.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.vote__opts, .vote__send { margin: 0; padding: 0; border: 0; min-width: 0; }
.vote__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 12px; }
@media (min-width: 900px) { .vote__grid--3 { grid-template-columns: repeat(3, 1fr); gap: 28px; } .vote__grid--4 { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.vopt { position: relative; display: flex; flex-direction: column; }
.vopt__in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vopt__lab { display: flex; flex-direction: column; flex: 1; border: 1px solid transparent; padding: 0 0 14px; cursor: pointer; transition: border-color .3s var(--ease); }
.vopt__in:disabled + .vopt__lab { cursor: default; }
.vopt__media { position: relative; display: grid; aspect-ratio: 1; background: var(--paper); overflow: hidden; }
.vopt__media--2 { grid-template-columns: 1fr 1fr; }
.vopt__img { position: relative; min-width: 0; }
.vopt__img > .shot { position: absolute; inset: 0; }
.vopt__media .shot--flat { background: transparent; }
.vopt__media--2 { gap: 6px; }
.vopt__media img { transition: transform 1.2s var(--ease); }
@media (hover: hover) { .vopt__in:not(:disabled) + .vopt__lab:hover .vopt__media img { transform: scale(1.03); } }
.vopt__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px 0; text-align: center; }
.vopt__kind { margin: 0; font: 600 9.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.vopt__pieces { margin: 0; font-size: 11px; line-height: 1.4; color: var(--ink-2); }
.vopt__t { font: 700 clamp(20px, 2.2vw, 26px)/1 var(--display); text-transform: uppercase; }
.vopt__l { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.vopt__count { font: 600 10.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.vopt__pick { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font: 600 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.vopt__pick i { width: 14px; height: 14px; border: 1px solid var(--ink); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--paper); transition: background .2s var(--ease); }
.vopt__pick-on { display: none; }
.vopt__in:checked + .vopt__lab { border-color: var(--ink); }
.vopt__in:checked + .vopt__lab .vopt__pick i { background: var(--ink); }
.vopt__in:checked + .vopt__lab .vopt__pick-on { display: inline; }
.vopt__in:checked + .vopt__lab .vopt__pick-off { display: none; }
.vopt__in:focus-visible + .vopt__lab { outline: 2px solid var(--ink); outline-offset: 3px; }
.vopt__in:disabled + .vopt__lab .vopt__pick { display: none; }
.vopt__more { margin: 8px 0 0; font-size: 11px; text-align: center; color: var(--muted); }
.vote__send { max-width: 460px; margin: 56px auto 0; padding-top: 36px; border-top: 1px solid var(--rule); text-align: center; }
.vote__send:disabled { opacity: .6; }
.vote__h { margin: 0 0 6px; font: 700 clamp(26px, 3.4vw, 36px)/1 var(--display); text-transform: uppercase; }
.vote__send .small { margin-bottom: 18px; }
.vote__send .check { justify-content: center; text-align: left; }
.vote__send .btn { margin-top: 18px; }
.vote__send .signup__row input:disabled { cursor: not-allowed; }
.vote__done { max-width: 460px; margin: 56px auto 0; padding: 28px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); text-align: center; outline: none; }
.vote__done-h { margin: 0 0 8px; font: 700 clamp(30px, 4vw, 44px)/1 var(--display); text-transform: uppercase; }
.vote__form.is-done .vopt__in:not(:checked) + .vopt__lab { opacity: .45; }
@media (min-width: 900px) { .vote__send, .vote__done { margin-top: 80px; } }
/* the small block on /shop/ Next drop, only while voting is open */
.votecta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 48px; padding: 22px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.votecta .eyebrow { margin-bottom: 6px; }
.votecta__h { margin: 0 0 4px; font: 700 clamp(24px, 3vw, 32px)/1 var(--display); text-transform: uppercase; }

/* Homepage hero slideshow (15-hero.js). Full bleed: every slide fills the hero and they cross fade.
   The copy sits on top, bottom left. Slide 1 is the group photo (cover); the rest are product cutouts,
   centred in the space the copy leaves free, with the caption under the piece. Fixed height, so nothing
   jumps while images load. Counter and timing bar top right, arrows beside the copy. */
.hero--slides { position: relative; display: block; background: var(--paper); height: calc(100vh - var(--hdr) - 32px); height: calc(100svh - var(--hdr) - 32px); min-height: 540px; max-height: 960px; overflow: hidden; }
.hs, .hs__track { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.hs__track { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.hs__s { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.hs__s.is-on { z-index: 1; opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }
.hs__a { position: absolute; inset: 56px var(--gutter) 200px; display: flex; flex-direction: column; align-items: center; -webkit-tap-highlight-color: transparent; }
.hs__m { position: relative; flex: 1 1 auto; width: 100%; min-height: 0; }
.hs__m > .shot, .hs__m .pic { position: absolute; inset: 0; background: transparent; }
.hs__m img { width: 100%; height: 100%; object-fit: contain; transform: translateY(10px) scale(.975); transition: transform .9s var(--ease); }
.hs__s.is-on .hs__m img { transform: none; }
.hs__cap { flex: none; display: flex; gap: 8px; justify-content: center; padding-top: 14px; font: 600 10.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease) .12s, transform .5s var(--ease) .12s; }
.hs__s.is-on .hs__cap { opacity: 1; transform: none; }
.hs__k { color: var(--muted); }
/* the group photo: full cover, a soft wash of the page colour behind the copy */
.hs__s--group .hs__a { inset: 0; display: block; }
.hs__s--group .pic, .hs__s--group .shot { position: absolute; inset: 0; }
.hs__s--group img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: scale(1.06); transition: transform 7s cubic-bezier(.2, .6, .3, 1); }
.hs__s--group.is-on img { transform: none; }
.hs__s--group::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(242, 241, 238, .94) 0, rgba(242, 241, 238, .6) 20%, rgba(242, 241, 238, 0) 44%); pointer-events: none; }
/* small fixed labels: never stretch (width and height come from the text only) */
.concept-tag.hs__tag { position: absolute; z-index: 3; top: 16px; left: var(--gutter); right: auto; bottom: auto; width: auto; height: auto; display: inline-block; white-space: nowrap; }
.hs__meta { position: absolute; z-index: 3; top: 16px; right: var(--gutter); display: grid; justify-items: end; gap: 9px; pointer-events: none; }
.hs__count { font: 600 10px/1 var(--sans); letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.hs__bar { display: block; width: 56px; height: 1px; background: var(--rule-2); overflow: hidden; }
.hs__bar i { display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
/* copy on top, bottom left; the arrows sit on the VOL. 01 line on phones and beside the buttons on desktop */
.hero__grid { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none; padding-block: 0 28px; }
.hero__copy { display: grid; justify-items: start; gap: 8px; pointer-events: auto; }
.hs__ctrl { position: absolute; top: 0; right: var(--gutter); display: flex; gap: 6px; pointer-events: auto; }
.hs__nav { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--rule-2); border-radius: 50%; background: rgba(242, 241, 238, .6); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .2s var(--ease); }
.hs__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .35s var(--ease); }
.hs__nav--prev svg { transform: scaleX(-1); }
.hs__nav:active { transform: scale(.94); }
@media (hover: hover) {
  .hs__nav:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .hs__nav--next:hover svg { transform: translateX(2px); }
  .hs__nav--prev:hover svg { transform: scaleX(-1) translateX(2px); }
}
.hs__nav:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 359px) { .hero__btn { padding: 0 12px; } .hero__cta { gap: 10px 16px; } }
@media (min-width: 768px) {
  .hs__s--group img { object-position: 68% 50%; }
  .hs__s--group::after { background: linear-gradient(to right, rgba(242, 241, 238, .82) 0, rgba(242, 241, 238, .35) 26%, rgba(242, 241, 238, 0) 46%); }
}
@media (min-width: 900px) {
  .hs__a { inset: 56px var(--gutter) 64px 34%; }
  .hs__cap { padding-top: 18px; }
  .concept-tag.hs__tag, .hs__meta { top: 22px; }
  .hero__grid { top: 0; display: flex; align-items: flex-end; justify-content: space-between; padding-block: 0 56px; }
  .hs__ctrl { position: static; }
  .hs__nav { width: 46px; height: 46px; }
}
/* product gallery: a soft cross fade when the colour changes (30-product.js adds .is-swap for one frame) */
.gal__track { transition: opacity .45s var(--ease); }
.gal__track.is-swap { opacity: 0; transition: none; }

/* ---------- popup 1 as a full screen takeover (Kage, Oct 27) ----------
   Phones: the whole viewport, content centred, scrolls inside when it is taller than the screen, safe areas
   respected, the close X pinned top right so it is always reachable. Desktop: full screen split, the big
   Vol. 01 photo left, the steps centred right. Popup 2 (.pop--mini) keeps its small sheet and card. */
.pop--full { align-items: stretch; padding: 0; }
.pop--full .pop__box { width: 100%; height: 100%; max-height: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); transform: translateY(24px); opacity: 0; transition: transform .5s var(--ease), opacity .4s var(--ease); }
.pop--full.is-on .pop__box { transform: none; opacity: 1; }
.pop--full.is-on { background: rgba(17, 17, 17, .5); }
.pop--full .pop__panel { max-height: none; height: 100%; padding: calc(24px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom)); }
.pop--full .pop__panel > .pop__x { position: fixed; top: calc(6px + env(safe-area-inset-top)); right: calc(6px + env(safe-area-inset-right)); width: 48px; height: 48px; border-radius: 50%; background: rgba(242, 241, 238, .9); transition: background-color .3s var(--ease), transform .3s var(--ease); }
@media (hover: hover) { .pop--full .pop__panel > .pop__x:hover { background: var(--bone); transform: rotate(90deg); } }
.pop--full .pop__x svg { width: 20px; height: 20px; }
/* auto margins centre the steps when they fit and collapse to 0 when they don't, so nothing is cut off */
.pop--full .pop__panel > .pop__brand { display: block; width: 92px; max-width: 92px; margin: 0 auto auto; padding: 4px 0 18px; color: var(--ink); }
.pop--full .pop__brand-svg { width: 100%; height: auto; }
.pop--full .pop__panel > .pop__no { margin-bottom: auto; }
.pop--full .pop__panel > .pop__step, .pop--full .pop__panel > .pop__prog { flex: none; }
.pop--full .pop__h { font-size: clamp(34px, 9.6vw, 46px); }
@media (min-width: 600px) and (max-width: 899px) { .pop--full .pop__panel > * { max-width: 480px; } }
@media (min-width: 900px) {
  .pop--full .pop__box { width: 100%; max-height: none; height: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); transform: scale(.985); }
  .pop--full.is-on .pop__box { transform: none; }
  .pop--full .pop__panel { max-height: none; padding: 40px 56px 28px; justify-content: flex-start; }
  .pop--full .pop__panel > * { max-width: 480px; }
  .pop--full .pop__panel > .pop__x { top: 16px; right: 16px; }
  .pop--full .pop__panel > .pop__brand { width: 110px; max-width: 110px; padding-bottom: 28px; }
  .pop--full .pop__h { font-size: clamp(44px, 4vw, 60px); }
  .pop--full .pop__q { font-size: 14px; margin-bottom: 22px; }
  .pop--full .pop__opts { gap: 10px; }
  .pop--full .pop__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17, 17, 17, .18), rgba(17, 17, 17, 0) 35%); pointer-events: none; }
}
@media (max-height: 700px) and (max-width: 899px) { .pop--full .pop__panel > .pop__brand { width: 72px; padding-bottom: 10px; } }

/* ---------- home: Vote the next drop (pages.home_vote, only while vote.enabled) ---------- */
.hvote { display: block; color: inherit; text-decoration: none; }
.hvote__media { position: relative; display: grid; aspect-ratio: 4 / 5; background: var(--paper); overflow: hidden; }
.hvote__media--2 { grid-template-columns: 1fr 1fr; gap: 4px; }
.hvote__img { position: relative; min-width: 0; }
.hvote__img > .shot { position: absolute; inset: 0; }
.hvote__media .shot--flat { background: transparent; }
.hvote__media img { transition: transform 1.2s var(--ease); }
@media (hover: hover) { .hvote:hover .hvote__media img { transform: scale(1.03); } }
.hvote .card__p { font: 500 12.5px/1.45 var(--sans); letter-spacing: 0; text-transform: none; }
.hvote__cta { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.hvote__cta svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .hvote__media img { transition: none; } }