/* Dyelot · example store (s2-clothing). Committed lichen on dye-room paper; one family (Saira), width is the voice. */

@font-face { font-family: 'Saira'; font-style: normal; font-weight: 100 900; font-stretch: 50% 125%; font-display: swap; src: url(/fonts/saira-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 100 900; font-stretch: 50% 125%; font-display: swap; src: url(/fonts/saira-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Saira Fallback'; src: local('Arial'); size-adjust: 97%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }

:root {
  --paper: oklch(96.8% 0.006 140);
  --paper-2: oklch(93% 0.009 140);
  --paper-3: oklch(89.5% 0.012 142);
  --line: oklch(82% 0.014 145);
  --ink: oklch(21% 0.018 150);
  --ink-2: oklch(39% 0.02 150);
  --lichen: oklch(72% 0.045 148);
  --lichen-2: oklch(66% 0.05 148);
  --lichen-3: oklch(80% 0.035 148);
  --err: oklch(47% 0.16 28);
  --err-bg: oklch(94% 0.03 28);
  --focus: oklch(42% 0.12 255);

  --f: 'Saira', 'Saira Fallback', system-ui, sans-serif;
  --wide: 125%;
  --semi: 112%;
  --narrow: 78%;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --t1: 140ms; --t2: 240ms; --t3: 420ms; --t4: 720ms;

  --g: clamp(16px, 4.2vw, 56px);
  --max: 1720px;
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 7rem;
  --sec: clamp(3.5rem, 7vw, 8rem);
  --r: 4px;

  --z-sticky: 200; --z-menu: 250; --z-bag: 400;
  color-scheme: light;
}

/* swatch colours, from the garments */
.sw-lichen { --sw: oklch(74% 0.045 145); } .sw-clay { --sw: oklch(74% 0.045 45); } .sw-oat { --sw: oklch(85% 0.028 75); }
.sw-bone { --sw: oklch(95.5% 0.006 95); } .sw-ink { --sw: oklch(23% 0.01 260); } .sw-rose { --sw: oklch(64% 0.095 16); }
.sw-moss { --sw: oklch(38% 0.022 100); } .sw-sky { --sw: oklch(87% 0.04 240); } .sw-poppy { --sw: oklch(60% 0.19 25); }
.sw-cocoa { --sw: oklch(45% 0.035 45); } .sw-sand { --sw: oklch(80% 0.04 75); } .sw-charcoal { --sw: oklch(46% 0.012 300); }
.sw-bone_ink { --sw: linear-gradient(90deg, oklch(95.5% 0.006 95) 50%, oklch(23% 0.01 260) 50%); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f); font-size: 1.0625rem; line-height: 1.55; font-weight: 400; font-stretch: 100%;
  font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (min-width: 768px) { body { font-size: 1.125rem; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--lichen); color: var(--ink); }

.skip { position: absolute; left: var(--g); top: -100px; background: var(--ink); color: var(--paper); padding: var(--s3) var(--s4); z-index: 999; text-decoration: none; }
.skip:focus { top: var(--s2); }

/* ---------- type ---------- */
.h1 { font-stretch: var(--semi); font-weight: 800; font-size: clamp(2.3rem, 4.2vw + 1rem, 5.25rem); line-height: 1; letter-spacing: -0.01em; }
.h2 { font-stretch: var(--semi); font-weight: 800; font-size: clamp(1.75rem, 1.8vw + 1.1rem, 3rem); line-height: 1.05; letter-spacing: -0.005em; }
.h3 { font-stretch: var(--semi); font-weight: 750; font-size: 1.375rem; line-height: 1.15; }
.kicker { font-stretch: var(--narrow); font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9375rem; }
.lede { font-size: 1.1875rem; max-width: 58ch; color: var(--ink-2); }
@media (min-width: 768px) { .lede { font-size: 1.3125rem; } }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: 0 1.5rem; border: 2px solid var(--ink); border-radius: var(--r);
  font-stretch: var(--semi); font-weight: 750; font-size: 1.0625rem; letter-spacing: 0.01em; text-decoration: none;
  transition: background-color var(--t2) var(--ease), color var(--t2) var(--ease), transform var(--t1) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: oklch(32% 0.03 150); border-color: oklch(32% 0.03 150); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--paper-2); }
.btn-wide { width: 100%; }
.link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
  font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em;
  text-decoration-color: var(--lichen-2); transition: text-decoration-color var(--t2) var(--ease);
}
.link:hover { text-decoration-color: currentColor; }
.link-ink { text-decoration-color: currentColor; }
.round {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper);
  display: inline-grid; place-items: center; font-size: 1.25rem; font-weight: 700; transition: background-color var(--t2) var(--ease), transform var(--t1) var(--ease);
}
.round:hover { background: var(--lichen-3); }
.round:active { transform: scale(0.94); }
.round:disabled { opacity: 0.35; cursor: default; }

/* ---------- example bar + header ---------- */
.example-bar { background: var(--ink); color: var(--paper); text-align: center; font-size: 0.9375rem; line-height: 1.35; padding: 0.55rem var(--g); font-stretch: 100%; font-weight: 500; }
@media (max-width: 479px) { .example-bar { font-stretch: 75%; font-weight: 600; letter-spacing: 0; padding-inline: 8px; } }
.top { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--paper); border-bottom: 1px solid var(--line); }
.top-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--g); height: 64px; display: flex; align-items: center; gap: var(--s4); }
.mark { font-stretch: var(--wide); font-weight: 900; font-size: 1.5rem; letter-spacing: 0.02em; text-decoration: none; margin-right: auto; min-height: 44px; display: inline-flex; align-items: center; }
.nav ul { display: flex; gap: var(--s5); }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; font-stretch: var(--semi); }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 3px; background: var(--lichen-2); transform: scaleX(0); transform-origin: left; transition: transform var(--t3) var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.menu-btn { display: none; }
.bag-btn {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 0.85rem; margin-left: var(--s2);
  border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 700; font-stretch: var(--semi);
  transition: background-color var(--t2) var(--ease);
}
.bag-btn:hover { background: var(--lichen-3); }
.bag-count { min-width: 1.6em; height: 1.6em; padding: 0 0.35em; display: inline-grid; place-items: center; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.bag-count.bump { animation: bump var(--t3) var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
.menu-panel { border-top: 1px solid var(--line); background: var(--paper); }
.menu-panel ul { padding: var(--s2) var(--g) var(--s4); }
.menu-panel a { display: flex; align-items: center; min-height: 52px; font-size: 1.375rem; font-weight: 750; font-stretch: var(--semi); text-decoration: none; border-bottom: 1px solid var(--line); }
@media (max-width: 767px) {
  .js .nav { display: none; }
  .js .menu-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; border: 0; background: none; font-weight: 650; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--lichen-2); text-decoration-thickness: 2px; }
  .nav ul { gap: var(--s3); }
  .bag-word { display: none; }
  .mark { font-size: 1.3rem; }
}
.menu-panel:not([hidden]) { animation: drop var(--t3) var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- motion system ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade { from { opacity: 0; } }
[data-load] { animation: rise var(--t4) var(--ease) both; animation-delay: calc(var(--d, 0) * 110ms + 80ms); }
[data-load="1"] { --d: 0; } [data-load="2"] { --d: 1; } [data-load="3"] { --d: 2; } [data-load="4"] { --d: 3; }
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--t4) var(--ease), transform var(--t4) var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- hero (committed lichen) ---------- */
.hero {
  position: relative; overflow: clip; background: var(--lichen);
  display: grid; gap: var(--s6); padding: var(--s6) var(--g) 0;
  grid-template-columns: minmax(0, 1fr);
}
.hero-copy { position: relative; z-index: 2; max-width: 40rem; }
.hero .kicker { margin-bottom: var(--s4); }
.hero-h { font-stretch: var(--semi); font-weight: 850; font-size: clamp(2.5rem, 5vw + 1rem, 6rem); line-height: 0.98; letter-spacing: -0.015em; }
.hero-sub { margin-top: var(--s5); max-width: 44ch; font-size: 1.125rem; }
.hero-cta { margin-top: var(--s6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.hero-fig { position: relative; z-index: 2; max-width: 34rem; width: 100%; justify-self: end; }
.hero-img { display: block; border-radius: var(--r); overflow: hidden; background: var(--lichen-2); box-shadow: 0 30px 60px -30px oklch(25% 0.03 150 / 0.55); }
.hero-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; animation: unveil 1100ms var(--ease) both 200ms; transition: transform 900ms var(--ease); }
.hero-img:hover img { transform: scale(1.03); }
@keyframes unveil { from { clip-path: inset(100% 0 0 0); transform: scale(1.08); } to { clip-path: inset(0 0 0 0); transform: none; } }
.ticket {
  position: absolute; left: -0.75rem; bottom: -1.75rem; width: min(78%, 17rem);
  background: var(--paper); color: var(--ink); border-radius: var(--r); padding: 1.25rem 1rem 0.85rem 1.1rem;
  display: grid; gap: 0.15rem; transform: rotate(-3deg); box-shadow: 0 14px 30px -18px oklch(25% 0.03 150 / 0.6);
  animation: tag-in 900ms var(--ease) both 700ms;
}
.ticket::before { content: ''; position: absolute; top: 0.55rem; right: 0.9rem; width: 12px; height: 12px; border-radius: 50%; background: var(--lichen); box-shadow: inset 0 0 0 2px var(--ink); }
@keyframes tag-in { from { opacity: 0; transform: rotate(-12deg) translateY(30px); } }
.ticket-lot { font-stretch: var(--wide); font-weight: 900; font-size: 2.1rem; line-height: 1; letter-spacing: 0.01em; margin-bottom: 0.4rem; }
.ticket-row { display: flex; justify-content: space-between; gap: var(--s3); border-top: 1px dashed var(--ink-2); padding-top: 0.3rem; font-stretch: var(--narrow); font-weight: 650; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.hero-word {
  position: relative; z-index: 1; grid-column: 1 / -1; margin: calc(var(--s6) * -1 - 4.5vw) calc(var(--g) * -0.35) -0.13em;
  font-stretch: var(--wide); font-weight: 900; line-height: 0.8; letter-spacing: -0.025em; white-space: nowrap;
  font-size: 20.5vw; color: var(--lichen-2); pointer-events: none; user-select: none;
}
.hero-word span { display: inline-block; animation: rise 900ms var(--ease) both; }
.hero-word span:nth-child(2) { animation-delay: 60ms; } .hero-word span:nth-child(3) { animation-delay: 120ms; }
.hero-word span:nth-child(4) { animation-delay: 180ms; } .hero-word span:nth-child(5) { animation-delay: 240ms; } .hero-word span:nth-child(6) { animation-delay: 300ms; }
@media (min-width: 768px) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); padding-top: var(--s7); align-items: start; }
  .hero-fig { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-bottom: 3rem; width: min(100%, calc((100svh - 13rem) * 0.8)); min-width: 15rem; }
  .hero-word { grid-row: 2; grid-column: 1 / -1; align-self: end; margin-top: var(--s5); font-size: min(20.5vw, 36svh); }
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: var(--s8); padding-left: max(var(--g), calc((100vw - var(--max)) / 2 + var(--g))); padding-right: max(var(--g), calc((100vw - var(--max)) / 2 + var(--g))); }
  .hero-h { font-size: clamp(2.5rem, 3.6vw + 0.6rem, 5.75rem); }
  .hero-sub { font-size: 1.1875rem; margin-top: var(--s4); }
  .hero-cta { margin-top: var(--s5); }
  .hero-word { margin-top: 0; }
}
@media (min-width: 2200px) { .hero-word { font-size: min(25rem, 36svh); } }

/* ---------- sections ---------- */
.sec { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--g) 0; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap; }

/* ---------- product cards ---------- */
.grid { display: grid; gap: var(--s6) var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s7) var(--s5); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
@media (min-width: 768px) and (max-width: 1023px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card-link { display: grid; gap: var(--s2); text-decoration: none; }
.card-img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--paper-2); }
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--t3) var(--ease), transform 900ms var(--ease); }
.card-img .ci-2 { opacity: 0; }
@media (hover: hover) {
  .card-link:hover .has-2 .ci-2 { opacity: 1; }
  .card-link:hover .card-img img { transform: scale(1.035); }
}
.card-link:active .card-img { transform: scale(0.985); transition: transform var(--t1) var(--ease); }
.tag { position: absolute; left: 0.6rem; top: 0.6rem; padding: 0.2rem 0.55rem; border-radius: 2px; background: var(--paper); color: var(--ink); font-stretch: var(--narrow); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.05em; text-transform: uppercase; }
.tag-out { background: var(--ink); color: var(--paper); }
.card-name { font-weight: 650; font-size: 1.0625rem; line-height: 1.25; margin-top: var(--s1); }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.card-price { font-stretch: var(--semi); font-weight: 800; font-variant-numeric: tabular-nums; }
.dots { display: inline-flex; gap: 4px; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px oklch(21% 0.018 150 / 0.35); }
.card[data-stock="out"] .card-img img { filter: grayscale(0.35) brightness(0.97); }

/* ---------- dyes band ---------- */
.dyes { display: grid; gap: var(--s6); }
.dyes-head p { margin-top: var(--s3); max-width: 52ch; color: var(--ink-2); }
.dye-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
@media (min-width: 768px) { .dye-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .dyes { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); align-items: start; gap: var(--s8); } }
.dye { display: grid; gap: 0.35rem; text-decoration: none; padding-bottom: var(--s2); }
.dye-chip { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r); background: var(--sw); box-shadow: inset 0 0 0 1px oklch(21% 0.018 150 / 0.18); transition: transform var(--t3) var(--ease); }
.dye-chip::before { content: ''; position: absolute; top: 9%; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px oklch(21% 0.018 150 / 0.4); }
.dye:hover .dye-chip { transform: translateY(-6px) rotate(-2deg); }
.dye-name { font-stretch: var(--semi); font-weight: 800; font-size: 1.0625rem; line-height: 1.1; }
.dye-n { font-size: 0.9375rem; color: var(--ink-2); }

/* ---------- lookbook strip ---------- */
.look { timeline-scope: --look; }
.look-ctrl { display: none; gap: var(--s2); }
.js .look-ctrl { display: flex; }
.look-strip { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--g) * -1); padding: 0 var(--g); scroll-padding-inline: var(--g); scroll-timeline: --look x; cursor: grab; overscroll-behavior-x: contain; }
.look-strip::-webkit-scrollbar { display: none; }
.look-strip.drag { cursor: grabbing; scroll-snap-type: none; }
.look-strip.drag a { pointer-events: none; }
.look-list { display: flex; gap: var(--s4); width: max-content; }
.look-item { width: min(72vw, 22rem); scroll-snap-align: start; }
@media (min-width: 1024px) { .look-item { width: clamp(18rem, 24vw, 30rem); } }
.look-item img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; border-radius: var(--r); background: var(--paper-2); user-select: none; -webkit-user-drag: none; }
.look-item figcaption { display: flex; justify-content: space-between; align-items: start; gap: var(--s3); margin-top: var(--s2); font-size: 0.9375rem; color: var(--ink-2); }
.look-item figcaption span { padding-top: 0.6rem; }
.look-item .link { color: var(--ink); white-space: nowrap; }
.look-progress { height: 3px; background: var(--line); margin-top: var(--s5); border-radius: 2px; overflow: hidden; display: none; }
@supports (animation-timeline: scroll()) {
  .look-progress { display: block; }
  .look-progress span { display: block; height: 100%; background: var(--ink); transform-origin: left; animation: grow linear both; animation-timeline: --look; }
}
@keyframes grow { from { transform: scaleX(0.12); } to { transform: scaleX(1); } }

/* ---------- how ---------- */
.how { display: grid; gap: var(--s6); }
.how-fig img { border-radius: var(--r); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.steps { display: grid; gap: var(--s5); margin-top: var(--s5); counter-reset: s; }
.steps li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s4); border-top: 2px solid var(--ink); padding-top: var(--s3); }
.step-n { grid-row: span 2; font-stretch: var(--wide); font-weight: 900; font-size: 2.25rem; line-height: 1; color: var(--lichen-2); }
.steps h3 { font-stretch: var(--semi); font-weight: 750; font-size: 1.25rem; }
.steps p { color: var(--ink-2); max-width: 48ch; }
@media (min-width: 1024px) { .how { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s8); align-items: center; } }

/* ---------- sample review + promises ---------- */
.words { display: grid; gap: var(--s7); padding-bottom: var(--sec); }
.quote { max-width: 52rem; }
.sample-tag { display: inline-block; font-stretch: var(--narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9375rem; padding: 0.15rem 0.55rem; border: 2px solid var(--ink); border-radius: 2px; margin-bottom: var(--s4); }
.quote blockquote { margin: 0; font-stretch: var(--semi); font-weight: 700; font-size: clamp(1.5rem, 1.5vw + 1rem, 2.5rem); line-height: 1.2; }
.quote figcaption { margin-top: var(--s3); color: var(--ink-2); font-size: 0.9375rem; }
.quote-sm { margin-top: var(--s6); padding: var(--s5); background: var(--paper-2); border-radius: var(--r); }
.quote-sm blockquote { font-size: 1.25rem; }
.promises { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.promises li { padding: var(--s4) 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.promises strong { display: block; color: var(--ink); font-stretch: var(--semi); font-weight: 800; font-size: 1.25rem; }
@media (min-width: 768px) { .promises { grid-template-columns: repeat(3, 1fr); } .promises li { padding-right: var(--s5); border-bottom: 0; } }

/* ---------- footer (committed lichen) ---------- */
.foot { background: var(--lichen); margin-top: var(--sec); overflow: clip; }
.p-home .foot { margin-top: 0; }
.foot-in { max-width: var(--max); margin: 0 auto; padding: var(--s7) var(--g) var(--s5); }
.foot-mark { font-stretch: var(--wide); font-weight: 900; font-size: clamp(4rem, 19vw, 22rem); line-height: 0.8; letter-spacing: -0.01em; color: var(--lichen-2); margin-bottom: var(--s6); white-space: nowrap; }
.foot-cols { display: grid; gap: var(--s6); }
@media (min-width: 768px) { .foot-cols { grid-template-columns: 1.6fr 1fr 1fr; } }
.foot-h { font-stretch: var(--semi); font-weight: 800; font-size: 1.25rem; margin-bottom: var(--s2); }
.foot-list a { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; text-decoration: none; font-weight: 550; }
.foot-list a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.news { margin-top: var(--s4); max-width: 30rem; }
.news label { display: block; font-weight: 650; margin-bottom: var(--s1); }
.news-row { display: flex; gap: var(--s2); }
.news-row input { flex: 1; min-width: 0; }
.foot .field-err { color: oklch(30% 0.13 28); }
.foot-legal { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid oklch(21% 0.018 150 / 0.3); font-size: 0.875rem; max-width: 90ch; }

/* ---------- forms ---------- */
input[type=text], input[type=email], select, textarea {
  width: 100%; min-height: 52px; padding: 0.7rem 0.85rem; border: 2px solid var(--ink); border-radius: var(--r);
  background: var(--paper); font-size: 1.0625rem; transition: border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
textarea { min-height: 9rem; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[aria-invalid="true"] { border-color: var(--err) !important; background-color: var(--err-bg); }
.field { display: grid; gap: 0.3rem; margin-bottom: var(--s4); }
.field label { font-weight: 650; }
.field-hint { font-size: 0.9375rem; color: var(--ink-2); }
.field-err { color: var(--err); font-weight: 650; font-size: 0.9375rem; }
.field-err:not([hidden]) { animation: rise var(--t2) var(--ease); }
.opt { font-weight: 400; color: var(--ink-2); }
.form-ok { margin-top: var(--s3); font-weight: 650; }
.form-ok:not([hidden]) { animation: rise var(--t3) var(--ease); }

/* ---------- shop ---------- */
.shop-head { max-width: var(--max); margin: 0 auto var(--s4); padding: var(--s6) var(--g) var(--s5); display: grid; gap: var(--s2); background: var(--lichen); box-shadow: 0 0 0 100vmax var(--lichen); clip-path: inset(0 -100vmax); }
.shop-head .shop-count { color: var(--ink); }
.shop-count { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.shop { max-width: var(--max); margin: 0 auto; padding: 0 var(--g); display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
.filter-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); position: sticky; top: 64px; z-index: 5; background: var(--paper); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.filter-n:empty { display: none; }
.filter-n { min-width: 1.5em; height: 1.5em; display: inline-grid; place-items: center; border-radius: 999px; background: var(--lichen); font-size: 0.9375rem; }
.sort { display: flex; align-items: center; gap: var(--s2); font-weight: 600; }
.sort select { width: auto; min-height: 48px; }
.filters { display: grid; gap: var(--s5); padding: var(--s4) 0 var(--s5); border-bottom: 1px solid var(--line); }
.js .filters:not(.open) { display: none; }
.filters.open { animation: drop var(--t3) var(--ease); }
.f-group legend { font-stretch: var(--narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9375rem; margin-bottom: var(--s2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 0.95rem; border: 2px solid var(--ink); border-radius: 999px; font-weight: 600; transition: background-color var(--t2) var(--ease), color var(--t2) var(--ease), transform var(--t1) var(--ease); }
.chip input:checked + span { background: var(--ink); color: var(--paper); }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.chip:active span { transform: scale(0.96); }
.chip-col i { width: 16px; height: 16px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px oklch(21% 0.018 150 / 0.4), 0 0 0 1px var(--paper); }
.chips-size .chip span { min-width: 3.25rem; justify-content: center; }
.f-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.f-actions .link { color: var(--ink); }
@media (min-width: 1024px) { .f-show { display: none; } }
html:not(.js) .f-show { display: none; }
.results { min-width: 0; padding-top: var(--s4); }
.grid-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .grid-shop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card.is-hiding { pointer-events: none; }
.empty { padding: var(--s8) 0; text-align: left; max-width: 34rem; }
.empty:not([hidden]) { animation: rise var(--t3) var(--ease); }
.empty-h { font-stretch: var(--semi); font-weight: 800; font-size: 1.75rem; line-height: 1.1; margin-bottom: var(--s2); }
.empty p + p { margin-top: var(--s4); }
@media (min-width: 1024px) {
  .shop { grid-template-columns: 17rem minmax(0, 1fr); column-gap: var(--s7); }
  .filter-bar { grid-column: 1 / -1; }
  .filter-toggle { display: none; }
  .filter-bar { justify-content: flex-end; }
  .js .filters:not(.open), .filters { display: grid; align-content: start; position: sticky; top: 136px; border-bottom: 0; padding-top: var(--s4); max-height: calc(100vh - 150px); overflow: auto; }
}
@media (min-width: 1536px) { .grid-shop { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- product page ---------- */
.crumbs { max-width: var(--max); margin: 0 auto; padding: var(--s3) var(--g); font-size: 0.9375rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.4rem; color: var(--ink-2); }
.crumbs li { display: flex; align-items: center; min-height: 44px; }
.crumbs li + li::before { content: '/'; margin-right: 0.4rem; color: var(--line); }
.crumbs a { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; color: var(--ink); }
@media (max-width: 767px) { .crumbs { padding-top: 0; padding-bottom: 0; } }
.pdp { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.gal { min-width: 0; }
.gal-set[hidden] { display: none; }
.gal-set.swap { animation: fade var(--t3) var(--ease); }
.gal-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 2px; }
.gal-list::-webkit-scrollbar { display: none; }
.gal-item { flex: 0 0 100%; scroll-snap-align: start; background: var(--paper-2); }
.gal-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gal-set { position: relative; }
.gal-count { position: absolute; right: var(--g); top: var(--s3); background: var(--paper); padding: 0.1rem 0.55rem; border-radius: 2px; font-weight: 650; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.gal-thumbs { display: flex; gap: var(--s2); padding: var(--s3) var(--g) 0; }
.thumb { width: 64px; padding: 0; border: 2px solid transparent; border-radius: var(--r); background: var(--paper-2); overflow: hidden; min-height: 44px; transition: border-color var(--t2) var(--ease); }
.thumb img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.thumb[aria-current="true"] { border-color: var(--ink); }
.buy { padding: 0 var(--g); min-width: 0; }
.buy-ticket { display: inline-flex; gap: var(--s3); align-items: center; background: var(--lichen); padding: 0.3rem 0.7rem; border-radius: 2px; font-stretch: var(--narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9375rem; }
.buy-ticket span + span::before { content: '·'; margin-right: var(--s3); }
.buy-h { margin-top: var(--s3); font-stretch: var(--wide); font-weight: 900; font-size: clamp(2.1rem, 2.6vw + 1.2rem, 3.6rem); line-height: 0.98; letter-spacing: -0.01em; }
.buy-price { margin-top: var(--s2); font-stretch: var(--semi); font-weight: 800; font-size: 1.625rem; font-variant-numeric: tabular-nums; }
.buy-blurb { margin-top: var(--s3); color: var(--ink-2); max-width: 46ch; }
.buy-form { margin-top: var(--s5); display: grid; gap: var(--s5); }
.pick legend { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--s3); width: 100%; margin-bottom: var(--s2); font-weight: 600; }
.pick legend strong { font-weight: 800; }
.guide-btn { margin-left: auto; color: var(--ink); }
.swatches { position: relative; display: flex; flex-wrap: wrap; gap: var(--s3); padding: 4px; }
.sw { position: relative; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sw-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px oklch(21% 0.018 150 / 0.35); transition: transform var(--t2) var(--ease); }
.sw:hover .sw-dot { transform: scale(1.08); }
.sw.is-out .sw-dot { background-image: linear-gradient(135deg, transparent calc(50% - 1.5px), var(--ink) calc(50% - 1.5px), var(--ink) calc(50% + 1.5px), transparent calc(50% + 1.5px)); background-color: var(--sw); }
.sw input:focus-visible ~ .sw-dot { outline: 3px solid var(--focus); outline-offset: 5px; }
.sw-ring { position: absolute; left: 4px; top: 4px; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); pointer-events: none; transition: transform var(--t3) var(--ease); }
.no-js .sw-ring, .sw-ring:not(.on) { display: none; }
.sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr)); gap: 0.375rem; }
.sizes-gift { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.size { position: relative; }
.size input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.size span { display: grid; place-items: center; min-height: 52px; padding: 0 0.5rem; border: 2px solid var(--line); border-radius: var(--r); font-weight: 700; font-stretch: var(--semi); text-align: center; transition: border-color var(--t2) var(--ease), background-color var(--t2) var(--ease), color var(--t2) var(--ease), transform var(--t1) var(--ease); }
.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: 3px solid var(--focus); outline-offset: 2px; }
.size:active span { transform: scale(0.96); }
.size input:disabled + span { color: var(--ink-2); border-style: dashed; text-decoration: line-through; text-decoration-thickness: 2px; cursor: not-allowed; background: var(--paper-2); }
.size input:disabled { cursor: not-allowed; }
.pick-size.has-err .sizes span { border-color: var(--err); }
.pick-size.has-err { animation: nudge 300ms var(--ease); }
@keyframes nudge { 30% { transform: translateX(-6px); } 60% { transform: translateX(4px); } }
.guide { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t3) var(--ease), visibility var(--t3); }
.js .guide:not(.open) { grid-template-rows: 0fr; visibility: hidden; }
.js .guide { margin-top: calc(var(--s5) * -1); }
.guide-in { overflow: hidden; min-height: 0; }
.guide-in > * { margin-left: 0; }
.guide-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding-top: var(--s4); }
.guide-h { font-stretch: var(--semi); font-weight: 800; font-size: 1.25rem; }
.unit { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; padding: 3px; }
.unit-b { min-width: 52px; min-height: 40px; border: 0; border-radius: 999px; background: transparent; font-weight: 700; transition: background-color var(--t2) var(--ease), color var(--t2) var(--ease); }
.unit-b[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.guide-scroll { overflow-x: auto; margin-top: var(--s3); }
.guide-table { border-collapse: collapse; width: 100%; min-width: 20rem; font-variant-numeric: tabular-nums; }
.guide-table th, .guide-table td { padding: 0.55rem 0.4rem; text-align: center; border-bottom: 1px solid var(--line); }
.guide-table th[scope=row] { text-align: left; font-weight: 600; font-size: 0.9375rem; padding-left: 0; max-width: 8.5rem; line-height: 1.25; }
@media (max-width: 479px) { .guide-table th, .guide-table td { padding-inline: 0.2rem; } }
.guide-table thead th { font-stretch: var(--semi); font-weight: 800; }
.guide-table td.flip { animation: flip var(--t3) var(--ease); }
.guide-table .col-on { background: var(--lichen-3); }
@keyframes flip { from { opacity: 0; transform: translateY(8px); } }
.guide-note { margin-top: var(--s3); font-size: 0.9375rem; color: var(--ink-2); max-width: 60ch; }
.buy-row { display: flex; gap: var(--s3); }
.qty { display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: var(--r); }
.qty-b { width: 48px; height: 48px; border: 0; background: none; font-size: 1.375rem; font-weight: 700; transition: background-color var(--t2) var(--ease); }
.qty-b:hover { background: var(--paper-2); }
.qty-b:disabled { opacity: 0.35; cursor: default; }
.qty-n { min-width: 2ch; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.qty-sm .qty-b { width: 44px; height: 44px; }
.add { flex: 1; position: relative; overflow: hidden; }
.add .add-ok { position: absolute; inset: 0; display: grid; place-items: center; background: var(--lichen); color: var(--ink); transform: translateY(101%); transition: transform var(--t3) var(--ease); }
.add.done .add-ok { transform: none; }
.add[aria-disabled="true"] { background: var(--paper-3); color: var(--ink-2); border-color: var(--paper-3); cursor: not-allowed; }
.buy-ship { font-size: 0.9375rem; color: var(--ink-2); margin-top: calc(var(--s3) * -1); }
.acc { margin-top: var(--s6); border-top: 2px solid var(--ink); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 56px; cursor: pointer; font-stretch: var(--semi); font-weight: 750; font-size: 1.125rem; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ''; width: 12px; height: 12px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--t3) var(--ease); }
.acc details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.acc-b { padding-bottom: var(--s4); color: var(--ink-2); max-width: 62ch; }
.acc-b p + p { margin-top: var(--s2); }
.acc details[open] .acc-b { animation: rise var(--t3) var(--ease); }
.with { padding-bottom: 0; }
.sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--g) max(var(--s2), env(safe-area-inset-bottom)); background: var(--paper); border-top: 2px solid var(--ink); transform: translateY(110%); transition: transform var(--t3) var(--ease); }
.sticky-buy.on { transform: none; }
html:not(.js) .sticky-buy { display: none; }
.sticky-name { font-weight: 750; font-stretch: var(--semi); line-height: 1.2; min-width: 0; }
.sticky-name span { display: block; font-weight: 500; font-stretch: 100%; color: var(--ink-2); font-size: 0.9375rem; }
@media (min-width: 768px) {
  .gal-list { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; gap: var(--s2); }
  .gal-item:first-child { grid-column: 1 / -1; }
  .gal-count, .gal-thumbs { display: none; }
  .sticky-buy { display: none; }
  .pdp { padding: 0 var(--g); grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s6); align-items: start; }
  .gal-item { border-radius: var(--r); overflow: hidden; }
  .buy { padding: 0; position: sticky; top: 88px; }
}
@media (min-width: 1024px) { .pdp { grid-template-columns: minmax(0, 1.3fr) minmax(24rem, 0.8fr); gap: var(--s8); } .gal-list:has(> :nth-child(2):last-child) .gal-item { grid-column: auto; } }
@media (min-width: 768px) and (max-width: 1023px) { .gal-list { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px) and (max-width: 1023px) {
  .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); }
  .buy-h { font-size: 2.25rem; }
}

/* ---------- about / contact / 404 ---------- */
.page-head { max-width: var(--max); margin: 0 auto; padding: var(--s7) var(--g) var(--s6); display: grid; gap: var(--s4); }
.page-head .h1 { max-width: 18ch; }
.about-head { background: none; }
.wide-fig { max-width: var(--max); margin: 0 auto; padding: 0 var(--g); }
.wide-fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); max-height: 78vh; }
.story { display: grid; gap: var(--s6); }
.story-col { display: grid; gap: var(--s4); max-width: 62ch; }
.story-col .h2 + p { margin-top: calc(var(--s2) * -1); }
.story-col p { color: var(--ink-2); }
.story-col .h2:not(:first-child) { margin-top: var(--s5); }
.story-fig img { border-radius: var(--r); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
@media (min-width: 1024px) { .story { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s8); align-items: start; } .story-fig { position: sticky; top: 100px; } }
.weight-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); margin-top: var(--s5); }
@media (min-width: 1024px) { .weight-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.weight-list li { border-top: 2px solid var(--ink); padding-top: var(--s3); display: grid; }
.w-bar { display: block; height: 3.5rem; margin-bottom: var(--s3); background: repeating-linear-gradient(0deg, var(--lichen-2) 0 2px, var(--lichen) 2px 5px); border-radius: 2px; transform-origin: bottom; transition: transform 900ms var(--ease); }
.w-200 .w-bar { transform: scaleY(0.476); } .w-240 .w-bar { transform: scaleY(0.571); } .w-380 .w-bar { transform: scaleY(0.905); }
.js .weight-list:not(.in) .w-bar { transform: scaleY(0.05); }
.w-n { font-stretch: var(--wide); font-weight: 900; font-size: clamp(2.5rem, 4vw + 1rem, 5rem); line-height: 0.95; }
.w-u { font-stretch: var(--narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9375rem; }
.w-t { margin-top: var(--s2); color: var(--ink-2); font-size: 1rem; }
.credits p { margin-top: var(--s3); max-width: 70ch; color: var(--ink-2); font-size: 1rem; }
.contact { max-width: var(--max); margin: 0 auto; padding: 0 var(--g); display: grid; gap: var(--s7); }
.cform { max-width: 40rem; }
.form-ok-big { margin-top: var(--s5); padding: var(--s5); background: var(--lichen); border-radius: var(--r); font-weight: 500; }
.ok-h { font-stretch: var(--semi); font-weight: 800; font-size: 1.375rem; margin-bottom: var(--s2); }
.c-side { display: grid; gap: var(--s5); align-content: start; }
.c-block { display: grid; gap: var(--s2); padding: var(--s5); background: var(--paper-2); border-radius: var(--r); }
.c-block .fine { font-size: 0.9375rem; color: var(--ink-2); }
.c-fig img { border-radius: var(--r); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
@media (min-width: 1024px) { .contact { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s8); } }
.faq .acc { max-width: 56rem; margin-top: var(--s5); }
.nf { max-width: var(--max); margin: 0 auto; padding: var(--s8) var(--g) var(--s6); display: grid; gap: var(--s4); }
.nf-lot { font-stretch: var(--wide); font-weight: 900; font-size: clamp(4rem, 14vw, 12rem); line-height: 0.85; color: var(--lichen-2); }

/* ---------- bag drawer ---------- */
.bag {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0; width: min(30rem, 100vw); height: 100dvh; max-height: none; max-width: 100vw;
  background: var(--paper); color: var(--ink); box-shadow: -30px 0 60px -30px oklch(21% 0.018 150 / 0.5);
  transform: translateX(100%); transition: transform var(--t3) var(--ease), overlay var(--t3) allow-discrete, display var(--t3) allow-discrete;
}
.bag[open] { transform: none; }
@starting-style { .bag[open] { transform: translateX(100%); } }
.bag.closing { transform: translateX(100%); transition-timing-function: var(--ease-in); transition-duration: 300ms; }
.bag::backdrop { background: oklch(21% 0.018 150 / 0.45); transition: opacity var(--t3) var(--ease), overlay var(--t3) allow-discrete, display var(--t3) allow-discrete; opacity: 1; }
@starting-style { .bag[open]::backdrop { opacity: 0; } }
.bag.closing::backdrop { opacity: 0; }
.bag-in { display: flex; flex-direction: column; height: 100%; overflow: auto; overscroll-behavior: contain; }
.bag-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--g); background: var(--lichen); position: sticky; top: 0; z-index: 2; }
.bag-head h2 { font-stretch: var(--wide); font-weight: 900; font-size: 1.5rem; }
.bag-close { min-height: 44px; padding: 0 0.9rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 700; }
.bag-steps { display: flex; gap: var(--s2); padding: var(--s3) var(--g); border-bottom: 1px solid var(--line); counter-reset: st; }
.bag-steps li { counter-increment: st; flex: 1; font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); padding-top: 0.35rem; border-top: 3px solid var(--line); transition: border-color var(--t3) var(--ease), color var(--t3) var(--ease); }
.bag-steps li::before { content: counter(st) '. '; }
.bag-steps li.on { color: var(--ink); border-color: var(--ink); }
.bag-step { padding: var(--s4) var(--g) var(--s6); flex: 1; display: flex; flex-direction: column; }
.bag-step:not([hidden]) { animation: rise var(--t3) var(--ease); }
.bag-empty { padding: var(--s5) 0; display: grid; gap: var(--s3); }
.bag-empty-h { font-stretch: var(--semi); font-weight: 800; font-size: 1.5rem; }
.bag-empty-links { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s2); }
.bag-lines { display: grid; }
.line { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.line.new { animation: print 600ms var(--ease); }
@keyframes print { from { clip-path: inset(0 0 100% 0); transform: translateY(-10px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.line.going { animation: gone 280ms var(--ease-in) forwards; }
@keyframes gone { to { opacity: 0; transform: translateX(30px); } }
.line-img img { width: 80px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); background: var(--paper-2); }
.line-name { font-weight: 750; line-height: 1.25; }
.line-name a { text-decoration: none; }
.line-meta { font-size: 0.9375rem; color: var(--ink-2); margin: 0.1rem 0 var(--s2); }
.line-end { display: grid; justify-items: end; align-content: space-between; }
.line-price { font-weight: 800; font-variant-numeric: tabular-nums; }
.line-rm { font-size: 0.9375rem; color: var(--ink); }
.bag-sum { margin-top: auto; padding-top: var(--s5); display: grid; gap: var(--s2); }
.ship-note { font-size: 0.9375rem; font-weight: 600; }
.ship-meter { height: 6px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.ship-meter span { display: block; height: 100%; background: var(--lichen-2); transform-origin: left; transform: scaleX(0); transition: transform var(--t4) var(--ease); }
.sum-row { display: flex; justify-content: space-between; font-stretch: var(--semi); font-weight: 800; font-size: 1.25rem; margin-top: var(--s3); font-variant-numeric: tabular-nums; }
.sum-fine { font-size: 0.9375rem; color: var(--ink-2); margin-bottom: var(--s3); }
.co-note { padding: var(--s3) var(--s4); background: var(--paper-2); border-radius: var(--r); font-size: 0.9375rem; margin-bottom: var(--s4); }
.co-two { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s3); }
.co-actions { display: grid; gap: var(--s2); justify-items: center; margin-top: var(--s3); }
.bag-done { gap: var(--s3); }
.done-stamp { align-self: start; font-stretch: var(--wide); font-weight: 900; text-transform: uppercase; font-size: 1.25rem; letter-spacing: 0.08em; color: var(--err); border: 3px solid var(--err); padding: 0.2rem 0.7rem; transform: rotate(-4deg); animation: stamp 520ms var(--ease) both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.6); } 70% { opacity: 1; } to { transform: rotate(-4deg) scale(1); } }
.done-h { font-stretch: var(--semi); font-weight: 850; font-size: 1.75rem; line-height: 1.1; }
.done-h:focus { outline: none; }
.done-lines { display: grid; gap: var(--s2); margin-top: var(--s2); padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 1rem; }
.done-lines li { display: flex; justify-content: space-between; gap: var(--s3); }
.done-ref { font-size: 0.9375rem; color: var(--ink-2); }
html:has(.bag[open]) { overflow: hidden; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- very wide screens ---------- */
@media (min-width: 2400px) {
  body { font-size: 1.25rem; }
  :root { --max: 2000px; }
}

/* ---------- page to page: the card photo becomes the product photo (cross-document View Transition) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .p-product .gal-set:first-child .gal-item:first-child .gal-img { view-transition-name: pimg; }
  .top { view-transition-name: top; }
  .example-bar { view-transition-name: bar; }
  ::view-transition-group(pimg) { animation-duration: 560ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  ::view-transition-old(root) { animation: 180ms cubic-bezier(0.64, 0, 0.78, 0) both vt-out; }
  ::view-transition-new(root) { animation: 380ms cubic-bezier(0.22, 1, 0.36, 1) 60ms both vt-in; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* ==========================================================================
   Brand Store ($990) additions: new dyes, the dye lot, collections, lookbook, gifts, help pages
   ========================================================================== */
.sw-slate { --sw: oklch(58% 0.022 250); } .sw-caramel { --sw: oklch(66% 0.075 60); } .sw-cream { --sw: oklch(93.5% 0.022 88); }
.sw-bark { --sw: oklch(42% 0.04 55); } .sw-khaki { --sw: oklch(70% 0.05 85); } .sw-ochre { --sw: oklch(73% 0.13 82); }
.sw-stone { --sw: oklch(60% 0.022 110); } .sw-pistachio { --sw: oklch(83% 0.075 122); }

/* ---------- lot tickets: the number sits in a window it can be reprinted through ---------- */
.lot-win { display: inline-grid; clip-path: inset(0 -4px); vertical-align: baseline; }
.lot-win > * { grid-area: 1 / 1; }
.lot-n { display: inline-block; font-variant-numeric: tabular-nums; }
.buy-ticket span + span::before { content: none; }
.buy-ticket > span:not(.tk-stub) + span::before { content: '·'; margin-right: var(--s3); }
.buy-ticket { padding-left: 0.35rem; }
.tk-stub { width: 1.15rem; height: 1.15rem; border-radius: 2px; background: var(--sw); box-shadow: inset 0 0 0 1.5px var(--ink); transition: background-color var(--t3) var(--ease); }

/* ---------- the dye lot ---------- */
.dye-stage { position: relative; overflow: clip; overflow-clip-margin: 4px; isolation: isolate; }
.dye-layer { display: block; }
.dye-layer[hidden] { display: none; }
.dip { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 2; will-change: transform; background: var(--paper-2); }
.dip-in { will-change: transform; }
.dip-tint { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.dip-band { position: absolute; left: -2%; width: 104%; top: 0; height: 120px; z-index: 3; pointer-events: none; will-change: transform; }
.dip-w { position: absolute; left: 0; height: 30px; width: calc(100% + 240px); background-repeat: repeat-x; background-size: 240px 30px; }
.dip-w1 { top: 2px; opacity: 0.5; animation: wave 1700ms linear infinite reverse; }
.dip-w2 { top: 8px; animation: wave 1150ms linear infinite; }
.dip-body { position: absolute; left: 0; right: 0; top: 37px; height: 83px; }
@keyframes wave { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-240px, 0, 0); } }

/* home hero: the stage unveils (not the photos, so a dipped photo never replays it) */
.hero-img img { animation: none; }
.hero-img.dye-stage { animation: unveil 1100ms var(--ease) both 200ms; }
.hero-dips { position: absolute; z-index: 3; top: 0.75rem; right: 0.75rem; display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--paper); border-radius: 999px; box-shadow: 0 10px 24px -14px oklch(25% 0.03 150 / 0.6); animation: tag-in 700ms var(--ease) both 1000ms; }
.no-js .hero-dips, html:not(.js) .hero-dips { display: none; }
.dips-label { font-stretch: var(--narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9375rem; padding: 0 0.4rem 0 0.7rem; }
.dip-btn { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 0.85rem 0 0.5rem; border: 2px solid transparent; border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; font-stretch: var(--semi); font-size: 1rem; cursor: pointer; transition: background-color var(--t2) var(--ease), transform var(--t1) var(--ease); }
.dip-btn i { width: 22px; height: 22px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1.5px var(--ink); }
.dip-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.dip-btn[aria-pressed="true"] i { box-shadow: inset 0 0 0 1.5px var(--paper); }
.dip-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .dip-btn:hover:not([aria-pressed="true"]) { background: var(--lichen-3); } }


/* ---------- home: collection tiles ---------- */
.col-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
@media (min-width: 768px) { .col-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
.col-tile a { position: relative; display: grid; text-decoration: none; color: var(--ink); }
.col-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--paper-2); }
.col-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.col-name { margin-top: var(--s2); font-stretch: var(--wide); font-weight: 900; font-size: clamp(1.25rem, 1.4vw + 0.8rem, 2.25rem); line-height: 1; letter-spacing: -0.005em; }
.col-n { font-stretch: var(--narrow); font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9375rem; color: var(--ink-2); margin-top: 0.2rem; }
@media (hover: hover) and (pointer: fine) { .col-tile a:hover .col-img img { transform: scale(1.04); } }
.col-tile a:active .col-img { transform: scale(0.985); transition: transform var(--t1) var(--ease); }
.js .col-tiles .col-tile:nth-child(3n + 2) { transition-delay: 70ms; } .js .col-tiles .col-tile:nth-child(3n) { transition-delay: 120ms; }

/* ---------- home: gift band ---------- */
.gift-band { display: grid; gap: var(--s5); align-items: center; }
.gb-fig { max-width: 22rem; }
.gb-fig img { width: 100%; border-radius: var(--r); }
.gb-copy .h2 { max-width: 20ch; margin-top: var(--s2); }
.gb-copy > p:not(.kicker):not(.hero-cta) { margin-top: var(--s3); max-width: 46ch; color: var(--ink-2); }
@media (min-width: 768px) { .gift-band { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s8); } .gb-fig { max-width: none; } }

/* ---------- lookbook strip: each photo drifts inside its frame as the strip moves (depth) ---------- */
.look-frame { display: block; overflow: hidden; border-radius: var(--r); background: var(--paper-2); }
.look-item .look-frame img { border-radius: 0; }
.look-all { margin-right: var(--s3); align-self: center; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .look-frame img { scale: 1.16; animation: drift linear both; animation-timeline: view(inline); }
  }
}
@keyframes drift { from { transform: translateX(7%); } to { transform: translateX(-7%); } }

/* ---------- shop: collection tabs ---------- */
.col-tabs { margin: 0 calc(var(--g) * -1) var(--s3); padding: 0 var(--g); overflow-x: auto; scrollbar-width: none; }
.col-tabs::-webkit-scrollbar { display: none; }
.col-tabs ul { display: flex; gap: var(--s2); width: max-content; }
.col-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 2px solid var(--ink); text-decoration: none; color: var(--ink); font-weight: 700; font-stretch: var(--semi); background: transparent; transition: background-color var(--t2) var(--ease); }
.col-tabs a[aria-current="page"] { background: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .col-tabs a:not([aria-current]):hover { background: var(--lichen-3); } }
.shop-line { max-width: 52ch; font-size: 1.0625rem; }

/* ---------- lookbook page ---------- */
.lb-head .h1 { max-width: 16ch; }
.spread { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--g) 0; display: grid; gap: var(--s5); align-items: center; }
.spread-frame { display: block; overflow: hidden; border-radius: var(--r); background: var(--paper-2); aspect-ratio: 3 / 4; }
.spread-frame img { width: 100%; height: 100%; object-fit: cover; }
.spread-n { font-stretch: var(--wide); font-weight: 900; font-size: clamp(3rem, 6vw, 6.5rem); line-height: 0.8; color: var(--lichen-2); }
.spread-copy .h2 { margin-top: var(--s3); }
.spread-copy > p:not(.spread-n) { margin-top: var(--s3); max-width: 40ch; color: var(--ink-2); }
.mini-h { margin-top: var(--s6); font-stretch: var(--narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9375rem; }
.minis { margin-top: var(--s2); display: grid; gap: var(--s2); }
.mini a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s4); align-items: center; padding: var(--s2); border-radius: var(--r); text-decoration: none; color: var(--ink); background: var(--paper-2); transition: background-color var(--t2) var(--ease), transform var(--t1) var(--ease); }
.mini-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; }
.mini-img img { width: 100%; height: 100%; object-fit: cover; }
.mini-t { display: grid; gap: 0.15rem; }
.mini-name { font-weight: 750; font-stretch: var(--semi); font-size: 1.0625rem; line-height: 1.2; }
.mini-meta { color: var(--ink-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.mini a:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .mini a:hover { background: var(--lichen-3); } }
@media (min-width: 768px) {
  .spread { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); }
  .spread-r .spread-fig { order: 2; }
  .spread-frame { aspect-ratio: 4 / 5; }
}
@media (min-width: 1280px) { .spread { gap: var(--s9); } .spread-r { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (min-width: 2200px) { .spread { max-width: 1900px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .spread-frame img { scale: 1.14; animation: lift linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes lift { from { transform: translateY(-6%); } to { transform: translateY(6%); } }
.lb-end { padding-bottom: var(--s4); }

/* ---------- gifts page ---------- */
.gifts-head .h1 { max-width: 20ch; }
.gift-pair { max-width: var(--max); margin: 0 auto; padding: 0 var(--g); display: grid; gap: var(--s5); }
@media (min-width: 1024px) { .gift-pair { grid-template-columns: 1fr 1fr; } }
.gift-box { display: grid; gap: var(--s5); padding: var(--s5); background: var(--paper-2); border-radius: var(--r); align-items: center; }
@media (min-width: 640px) { .gift-box { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.gift-fig img { width: 100%; border-radius: var(--r); }
.gift-copy { display: grid; gap: var(--s3); align-content: start; }
.gift-copy p { max-width: 44ch; }
.gift-copy .fine { color: var(--ink-2); font-size: 0.9375rem; }
.amounts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.amount { display: inline-grid; place-items: center; min-height: 48px; min-width: 4.5rem; padding: 0 1rem; border: 2px solid var(--ink); border-radius: var(--r); text-decoration: none; color: var(--ink); font-stretch: var(--wide); font-weight: 900; font-size: 1.125rem; transition: background-color var(--t2) var(--ease), transform var(--t1) var(--ease); }
.amount:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .amount:hover { background: var(--lichen); } }

/* ---------- size guide page ---------- */
.sg { max-width: var(--max); margin: 0 auto; padding: 0 var(--g); display: grid; gap: var(--s6); }
.sg-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s3); position: sticky; top: var(--top-h, 72px); z-index: 5; background: var(--paper); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.sg-tip { color: var(--ink-2); }
.sg-block { display: grid; gap: var(--s3); max-width: 60rem; }
.sg-block .guide-scroll { margin: 0; }

/* ---------- FAQ page ---------- */
.faq-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--g); display: grid; gap: var(--s6); }
.faq-nav ul { display: flex; flex-wrap: wrap; gap: var(--s2); }
.faq-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.9rem; border-radius: 999px; background: var(--paper-2); text-decoration: none; color: var(--ink); font-weight: 650; }
@media (hover: hover) and (pointer: fine) { .faq-nav a:hover { background: var(--lichen-3); } }
.faq-groups { display: grid; gap: var(--s7); max-width: 56rem; }
.faq-g { scroll-margin-top: 6rem; }
.faq-g .acc { margin-top: var(--s3); }
@media (min-width: 1024px) {
  .faq-wrap { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--s8); align-items: start; }
  .faq-nav { position: sticky; top: 7rem; }
  .faq-nav ul { flex-direction: column; align-items: flex-start; }
}

/* ---------- about: the lot register + credits ---------- */
.register .sec-head { align-items: baseline; }
.reg-sub { color: var(--ink-2); }
.reg-list { display: grid; border-top: 2px solid var(--ink); }
.reg-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2) var(--s5); padding: var(--s4) 0; border-bottom: 1px solid var(--line); align-items: center; }
.reg-lot { font-stretch: var(--wide); font-weight: 900; font-size: clamp(1.75rem, 2vw + 1rem, 3rem); line-height: 1; }
.reg-cols { display: flex; flex-wrap: wrap; gap: var(--s2); }
.reg-col { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.8rem 0 0.45rem; border-radius: 999px; background: var(--paper-2); text-decoration: none; color: var(--ink); font-weight: 650; }
.reg-col i { width: 20px; height: 20px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px oklch(21% 0.018 150 / 0.35); }
@media (hover: hover) and (pointer: fine) { .reg-col:hover { background: var(--lichen-3); } }
.reg-n { font-stretch: var(--narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9375rem; color: var(--ink-2); }
@media (min-width: 768px) { .reg-row { grid-template-columns: 9rem minmax(0, 1fr) auto; } }
.credit-list { margin-top: var(--s3); display: grid; gap: var(--s2); max-width: 70ch; color: var(--ink-2); font-size: 1rem; }
.credit-list strong { color: var(--ink); }

/* ---------- reduced motion: the dye is a cross-fade, nothing drifts ---------- */
@media (prefers-reduced-motion: reduce) {
  .dip-w { animation: none; }
  .hero-img.dye-stage { animation: none; }
}

/* touch targets (kit WARNs 10 Nov) */
.nav a { min-width: 44px; justify-content: center; }
.hero-cta .link, .lb-end .link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.unit-b { min-height: 44px; }

/* hero dips: the pill row fits the photo at every width (the figure is a size container) */
.hero-fig { container-type: inline-size; }
.dips-label, .dip-btn { white-space: nowrap; }
.hero-dips { max-width: calc(100% - 1.5rem); }
@container (max-width: 400px) { .dips-label { display: none; } .dip-btn { padding: 0 0.6rem 0 0.4rem; gap: 0.3rem; font-size: 0.9375rem; } }
@container (max-width: 300px) { .hero-dips { top: 0.5rem; right: 0.5rem; max-width: calc(100% - 1rem); } .dip-btn { padding: 0 0.45rem 0 0.35rem; } .dip-btn i { width: 18px; height: 18px; } }
/* lookbook: the first look starts on the first screen */
.lb-head + .spread { padding-top: var(--s4); }

/* fit note on the product page (the brand's own note, not buyer reviews) */
.fit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: calc(var(--s3) * -1); font-size: 0.9375rem; }
.fit-l { font-weight: 650; color: var(--ink-2); }
.fit-scale { display: grid; grid-template-columns: repeat(3, auto); border-radius: 999px; background: var(--paper-2); padding: 3px; }
.fit-scale span { padding: 0.2rem 0.75rem; border-radius: 999px; color: var(--ink-2); font-weight: 600; }
.fit-scale .on { background: var(--ink); color: var(--paper); }

/* ---------- Outside review 10 Nov: the deciding facts and the delivery rows ---------- */
.buy-facts { display: grid; gap: 0; margin: calc(var(--s2) * -1) 0 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.buy-facts .fact { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s3); padding: 0.625rem 0; border-bottom: 1px solid var(--line); }
.buy-facts dt { font-stretch: var(--semi); font-weight: 750; color: var(--ink); }
.buy-facts dd { margin: 0; color: var(--ink-2); }
.buy-facts .link { white-space: nowrap; }
.sum-rows { margin: var(--s3) 0 0; }
.sum-rows dd { margin: 0; font-variant-numeric: tabular-nums; }
.sum-line { display: flex; justify-content: space-between; font-size: 1rem; color: var(--ink-2); padding: 0.125rem 0; }
.sum-rows .sum-row { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.done-total { font-weight: 750; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }

/* One shoot: every product card gets the same grade and the same fine grain, the still-life shoots a matching lift
   (tone only: brightness, contrast, saturation; never a hue change on a garment). */
.card-img img { filter: contrast(0.95) saturate(0.95); }
.card-img.shoot-still img { filter: brightness(1.07) contrast(0.88) saturate(0.92); }
.card-img.shoot-linen img { filter: contrast(0.97) saturate(0.95); }
.card-img::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light; opacity: 0.32;
  box-shadow: inset 0 0 0 1px oklch(21% 0.018 150 / 0.07);
}
.card-img .tag { z-index: 2; }

/* Hero, desktop: the hoodie takes the right half as a bleed photo, the full first screen tall (outside review 10 Nov:
   the photo was a third of the width with dead lichen around it, and the first screen at 1920 ended in an empty band). */
@media (min-width: 1024px) {
  .hero { min-height: calc(100svh - 6.5rem); padding-right: 0; grid-template-columns: minmax(0, 1fr) min(50%, calc((100svh - 6.5rem) * 1.05)); grid-template-rows: auto 1fr; }
  .hero-fig { grid-column: 2; grid-row: 1 / span 2; justify-self: stretch; align-self: stretch; width: auto; min-width: 0; max-width: none; margin: calc(var(--s7) * -1) 0 0; }
  .hero-img { height: 100%; border-radius: 0; box-shadow: none; }
  .hero-img .dye-layer, .hero-img .dip-in { height: 100%; }
  .hero-img img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 35%; }
  .hero .ticket { left: -2.75rem; bottom: 3rem; }
  .hero-dips { top: 1.25rem; right: 1.25rem; }
  .hero-copy { align-self: center; padding-top: var(--s5); }
}
@media (min-width: 1024px) {
  .hero { padding-right: max(0px, calc((100vw - var(--max) - 400px) / 2)); }
  .hero-word { position: absolute; left: max(var(--g), calc((100vw - var(--max)) / 2 + var(--g))); bottom: -0.13em; margin: 0; font-size: min(17vw, 30svh); }
}
@media (min-width: 1024px) {
  .hero-word { grid-column: auto; grid-row: auto; }
  .hero-img { position: absolute; inset: 0; height: auto; }
}

/* Home gift band: a photo of folded lots instead of the flat parcel drawing; phone dye chips smaller (outside review 10 Nov). */
.gb-fig img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 767px) {
  .dye-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--s2); }
  .dye-chip { aspect-ratio: 1; }
  .dye-chip::before { width: 10px; height: 10px; margin-left: -5px; }
  .dye-name { font-size: 0.9375rem; }
}
.news-fine { margin-top: var(--s2); font-size: 0.9375rem; color: var(--ink); max-width: 40ch; }
.buy-facts .fact { align-items: baseline; }
/* Wear it with: two pieces in the two-column grid below 1024 px, no orphan card */
@media (max-width: 767px) { .with .grid-3 > li:nth-child(3) { display: none; } }
/* a colour with one photo keeps the thumbnail row's height, so a dip never makes the page jump */
.gal-thumbs-empty .thumb { display: block; visibility: hidden; height: 79px; }