/* Nomad shop: shared chrome. Same world as the landing: black cloth, chalk type, bleach orange. */
:root {
  color-scheme: dark;
  --cloth: #080706;
  --cloth-2: #12100e;
  --chalk: #efebe4;
  --chalk-dim: rgb(239 235 228 / .58);
  --bleach-rust: #7c2c10;
  --bleach: #d9692a;
  --bleach-pale: #f1a866;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --copy-size: clamp(13px, 0.95vw, 16px);
  --gutter: max(20px, 4.2vw);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--cloth); }
body {
  margin: 0;
  background: var(--cloth);
  color: var(--chalk);
  font: 400 var(--copy-size)/1.5 var(--font-body);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* for search engines and screen readers only */
canvas.stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* iPhone Safari full bleed: Safari 26 never draws a fixed layer under its bars, only page content scrolled
   under them. So on phones the canvas is ordinary content, the large viewport plus a bleed above and below,
   and an inline script at the end of <body> opens the page one bleed down. Nothing can scroll it from there. */
:root { --bleed: 96px; }
@media (max-width: 720px) {
  html { height: auto; overflow-y: scroll; overscroll-behavior: none; }
  body { height: auto; min-height: calc(100lvh + 2 * var(--bleed)); overflow: visible; touch-action: none; }
  canvas.stage { position: absolute; inset: auto; top: 0; left: 0; right: 0; height: calc(100lvh + 2 * var(--bleed)); }
  .sheet { touch-action: pan-y; }
}

/* header: the parked signature, exactly where the landing leaves it */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + clamp(16px, 4.4vh, 40px)) var(--gutter) 0;
  pointer-events: none;
}
.top a { pointer-events: auto; }
.top__logo img { display: block; width: clamp(104px, 8.6vw, 160px); height: auto; }
.top__nav { display: flex; gap: clamp(16px, 2.4vw, 36px); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.top__nav { transition: opacity .3s ease; }
.top__nav a { color: var(--chalk); text-decoration: none; opacity: .8; transition: opacity .3s ease, color .3s ease; }
.top__nav a:hover, .top__nav a:focus-visible { opacity: 1; color: var(--bleach-pale); outline: none; }

/* heading line for each shop view */
.lede {
  position: fixed; left: var(--gutter); bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(20px, 5vh, 44px)); z-index: 4;
  max-width: 34ch; pointer-events: none;
}
.lede__kicker { margin: 0 0 6px; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; color: var(--bleach-pale); }
.lede__line { margin: 0; color: var(--chalk-dim); }
.lede { transition: opacity .4s ease; }
body:has(.sheet.is-open) .lede { opacity: 0; }

/* the open pair's drawing: a small box just above it on the leg, and the drawing itself, clean */
.drawing-box {
  position: absolute; left: 0; top: 0; z-index: 5;
  width: 46px; height: 46px; padding: 7px;
  border: 1.5px solid rgb(239 235 228 / .85); border-radius: 6px;
  background: rgb(8 7 6 / .55); cursor: zoom-in;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: border-color .25s ease, background-color .25s ease;
}
.drawing-box[hidden] { display: none; }
.drawing-box__ink { display: block; width: 100%; height: 100%; background: var(--chalk);
  -webkit-mask: var(--art, none) center / contain no-repeat; mask: var(--art, none) center / contain no-repeat; }
.drawing-box:hover, .drawing-box:focus-visible { border-color: var(--bleach); background: rgb(8 7 6 / .8); outline: none; }
.drawing-box:hover .drawing-box__ink, .drawing-box:focus-visible .drawing-box__ink { background: var(--bleach-pale); }
/* the gallery: full screen on the black cloth, the drawing (on the pair's wash) then the pair's photos in a strip */
.drawing-view {
  position: fixed; inset: 0; z-index: 9;
  background: rgb(8 7 6 / .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .45s ease;
}
.drawing-view[hidden] { display: none; }
.drawing-view.is-open { opacity: 1; }
.drawing-view__panel {
  height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: calc(env(safe-area-inset-top, 0px) + clamp(16px, 4.4vh, 40px)) 0 calc(env(safe-area-inset-bottom, 0px) + clamp(18px, 4vh, 36px));
  transform: translateY(16px); transition: transform .7s var(--ease);
}
.drawing-view.is-open .drawing-view__panel { transform: none; }
.drawing-view__panel:focus { outline: none; }
.drawing-view__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding: 0 var(--gutter); }
.drawing-view__name { margin: 0; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; color: var(--bleach-pale); }
.drawing-view__close { height: 44px; padding: 0 20px; }
.drawing-view__stage { position: relative; overflow: hidden; margin: clamp(10px, 2.4vh, 26px) 0; touch-action: none; user-select: none; cursor: grab; }
.drawing-view__stage.is-dragging { cursor: grabbing; }
.drawing-view__track { display: flex; align-items: center; height: 100%; will-change: transform; transition: transform .7s var(--ease); }
.drawing-view__slide {
  flex: none; position: relative; width: var(--slide-w); aspect-ratio: 2 / 3; margin-right: var(--gap);
  border-radius: 3px; overflow: hidden; background: rgb(239 235 228 / .04); cursor: pointer;
  opacity: .22; transform: scale(.9); transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.drawing-view__slide.is-on { opacity: 1; transform: none; cursor: inherit; }
.drawing-view__slide img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; pointer-events: none; -webkit-user-drag: none; }
.drawing-view__slide img.is-in { opacity: 1; }
.drawing-view__slide.is-drawing { background: var(--wash, #152a52); }
.drawing-view__art { position: absolute; inset: 10%; background: var(--ink, #fff);
  -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; }
.drawing-view__nav {
  position: absolute; top: 50%; z-index: 1; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%;
  border: 1px solid rgb(239 235 228 / .35); background: rgb(8 7 6 / .5); color: var(--chalk); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, opacity .3s ease;
}
.drawing-view__nav::before {   /* a drawn chevron, centred (a text ‹ sits off its baseline) */
  content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: translate(-30%, -50%) rotate(45deg);
}
.drawing-view__nav--next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.drawing-view__nav--prev { left: var(--gutter); } .drawing-view__nav--next { right: var(--gutter); }
.drawing-view__nav:hover, .drawing-view__nav:focus-visible { background: var(--bleach); border-color: var(--bleach); color: var(--cloth); outline: none; }
.drawing-view__nav:disabled { opacity: 0; pointer-events: none; }
.drawing-view__foot { display: grid; justify-items: center; gap: 14px; min-width: 0; padding: 0 var(--gutter); }
.drawing-view__caption { margin: 0; display: flex; align-items: baseline; gap: 14px; font-size: 13px; letter-spacing: .02em; }
.drawing-view__label { font-weight: 600; }
.drawing-view__count { font-size: 12px; color: var(--chalk-dim); font-variant-numeric: tabular-nums; }
.drawing-view__thumbs { position: relative; display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 4px; scrollbar-width: none; }
.drawing-view__thumbs::-webkit-scrollbar { display: none; }
.drawing-view__thumb {
  flex: none; width: 40px; height: 60px; padding: 0; overflow: hidden; cursor: pointer;
  border: 0; border-radius: 3px; background: rgb(239 235 228 / .06);
  outline: 1.5px solid transparent; outline-offset: 2px; opacity: .4;
  transition: opacity .3s ease, outline-color .3s ease;
}
.drawing-view__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.drawing-view__thumb.is-drawing { background: var(--wash, #152a52); }
.drawing-view__thumb.is-drawing::before { content: ''; display: block; width: 100%; height: 100%; background: var(--ink, #fff);
  -webkit-mask: var(--art) center / 70% no-repeat; mask: var(--art) center / 70% no-repeat; }
.drawing-view__thumb:hover { opacity: .8; }
.drawing-view__thumb.is-on { opacity: 1; outline-color: var(--bleach); }
.drawing-view__thumb:focus-visible { opacity: 1; outline-color: var(--bleach-pale); }
@media (prefers-reduced-motion: reduce) { .drawing-view__track, .drawing-view__slide, .drawing-view__panel { transition: none; } }

/* the site's credit, bottom right */
.credit {
  position: fixed; right: var(--gutter); bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(20px, 5vh, 44px)); z-index: 4;
  margin: 0; font-size: 11px; letter-spacing: .02em; color: var(--chalk-dim); transition: opacity .4s ease;
}
.credit a { color: var(--chalk); text-decoration: none; }
.credit a:hover, .credit a:focus-visible { color: var(--bleach-pale); outline: none; }
body:has(.sheet.is-open) .credit, body:has(.sheet.is-open) .top__nav { opacity: 0; pointer-events: none; }   /* the sheet's Close sits there */

/* the product sheet */
.sheet {
  position: fixed; z-index: 6; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  padding: calc(env(safe-area-inset-top, 0px) + clamp(84px, 14vh, 140px)) clamp(22px, 2.6vw, 40px) calc(env(safe-area-inset-bottom, 0px) + 32px);
  background: linear-gradient(90deg, rgb(8 7 6 / 0), rgb(8 7 6 / .86) 18%, rgb(8 7 6 / .94));
  display: flex; flex-direction: column; gap: 18px;
  overflow-y: auto; overscroll-behavior: contain;   /* a short window: the text scrolls, then the wheel steps pairs */
  transform: translateX(104%); transition: transform .7s var(--ease), visibility 0s .7s;
  pointer-events: none;
  visibility: hidden;   /* closed, it leaves the page: Safari tints its bars from fixed layers with a background */
}
.sheet.is-open { transform: none; pointer-events: auto; visibility: visible; transition: transform .7s var(--ease); }
.sheet__count { margin: 0; font-weight: 600; font-size: 12px; letter-spacing: .06em; color: var(--chalk-dim); font-variant-numeric: tabular-nums; }
.sheet__name { margin: 0; font-size: clamp(26px, 2.4vw, 38px); font-weight: 600; line-height: 1.1; text-wrap: balance; }
.sheet__note { margin: 0; color: var(--chalk-dim); max-width: 32ch; }
.sheet__price { margin: -8px 0 0; font-size: 18px; font-weight: 600; color: var(--bleach-pale); font-variant-numeric: tabular-nums; }
.sheet__sizes { margin: 0; font-size: 13px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sheet__made { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.7; color: var(--chalk-dim); }
.sheet__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 190px; height: 50px; padding: 0 24px;
  border: 2px solid var(--chalk); border-radius: 999px;
  background: transparent; color: var(--chalk);
  font: 400 var(--copy-size)/1 var(--font-body); text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.btn:hover, .btn:focus-visible { background: var(--bleach); border-color: var(--bleach); color: var(--cloth); outline: none; }
.btn--quiet { border-color: rgb(239 235 228 / .3); min-width: 0; }
.sheet__close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + clamp(28px, 6vh, 56px)); right: clamp(22px, 2.6vw, 40px); }
.sheet__placeholder { margin: auto 0 0; font-size: 11px; color: rgb(239 235 228 / .38); }

.loading {
  position: fixed; inset: 0; z-index: 8; display: grid; place-items: center;
  background: var(--cloth); transition: opacity .3s ease; pointer-events: none;   /* a quick fade: it only covers the loading */
}
.loading.is-done { opacity: 0; }
/* phones: the curtain is page content like the canvas, so it also covers the space under Safari's bars */
@media (max-width: 720px) { .loading { position: absolute; inset: auto; top: 0; left: 0; right: 0; height: calc(100lvh + 2 * var(--bleed)); } }
.loading img { width: 120px; opacity: .5; }

.scrim { display: none; }
@media (max-width: 720px) {
  /* the sheet is page content too, not fixed: a fixed layer on the bottom edge, even a transparent one, makes
     Safari paint its toolbar solid. It sits at the bottom of the screen (one bleed above the end of the page)
     with room below for the toolbar; its dark backdrop is the scrim, which runs on under the toolbar. */
  body { position: relative; }
  .top { position: absolute; top: var(--bleed); }   /* the header too: nothing fixed touches a screen edge */
  .sheet { position: absolute; width: 100%; top: auto; bottom: var(--bleed); height: auto; max-height: 56vh; overflow-y: auto;
    padding-top: 28px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); gap: 12px;
    background: none;
    opacity: 0; transform: translateY(40px);   /* sliding it off the bottom would make the page taller */
    transition: transform .6s var(--ease), opacity .35s ease, visibility 0s .6s; }
  .sheet.is-open { opacity: 1; transform: none; transition: transform .6s var(--ease), opacity .35s ease; }
  .scrim {
    display: block; position: absolute; z-index: 5; left: 0; right: 0;
    top: calc(var(--bleed) + 38lvh); height: calc(62lvh + var(--bleed));
    background: linear-gradient(180deg, rgb(8 7 6 / 0), rgb(8 7 6 / .9) 16%, rgb(8 7 6 / .96));
    opacity: 0; transition: opacity .5s ease; pointer-events: none;
  }
  body:has(.sheet.is-open) .scrim { opacity: 1; }
  .sheet__close { top: 22px; }
  .sheet__count, .sheet__name { padding-right: 112px; }   /* clear of Close */
  .sheet__made, .sheet__placeholder { display: none; }
  .lede { right: var(--gutter); bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); }
  /* phones: page content like the rest (nothing fixed), over the screen the page opens on */
  .drawing-view { position: absolute; inset: auto; left: 0; right: 0; top: var(--bleed); height: 100lvh; }
  .drawing-view__panel { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }   /* room for Safari's toolbar */
  .drawing-view__nav { display: none; }   /* phones swipe */
  .drawing-view__thumb { width: 32px; height: 48px; }
  .credit { display: none; }   /* phones: the screen's foot is under Safari's toolbar; the landing and About carry it */
}
@media (prefers-reduced-motion: reduce) { .sheet, .scrim { transition: none; } }