/* Concept store — the stylesheet. DESIGN.md is the source of truth for every
   value below; a value that is not there gets added there first. */

@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/vazirmatn-subset.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}

:root {
  /* colour — negakhte's values, used sparingly. DESIGN.md §2 */
  --paper: #F5EFE6;       /* the page */
  --stone: #EAE0D1;       /* panels, photo wells */
  --ink: #1F1A15;         /* text; the footer. 15.1:1 on paper */
  --ink-2: #6C6255;       /* secondary text. 5.2:1 on paper, 4.6:1 on stone */
  --rule: #DDD1BF;
  --ox: #7A2E1F;          /* oxblood: the key word, buttons, the current tab. 8.2:1 */
  --ox-deep: #5A1F12;
  --gold: #C99846;        /* marks only: the diamond, the highlighter, the button shadow */
  --gold-ink: #7E5D25;    /* gold that carries small text on paper. 5.3:1 */
  --on-ink: #D8CFC3;      /* secondary text on the ink footer. 11.6:1 */

  /* one family, sturdy weights: nothing lighter than 400 anywhere. Emphasis is
     colour (oxblood + the gold highlighter), not a jump in weight. */
  --font: "Vazirmatn", system-ui, sans-serif;          /* text: body, UI, prices */
  --display: "Vazirmatn", system-ui, sans-serif;       /* headlines */
  --w-display: 700;                                    /* headlines */
  --w-strong: 800;                                     /* the oxblood word */

  /* type */
  --t-meta: 0.8125rem;    /* 13 */
  --t-body: 0.9375rem;    /* 15 */
  --t-name: 1.0625rem;    /* 17 */
  --t-lede: 1.125rem;     /* 18 */
  --t-h3: 1.5rem;         /* 24 */
  --t-h2: clamp(1.875rem, 3.2vw, 2.875rem);   /* 30–46, Bold */
  --t-h1: clamp(3rem, 6.2vw, 5.75rem);        /* 48–92, Bold: the home headline */
  --t-title: clamp(3.25rem, 7.4vw, 6.75rem);  /* 52–108, Bold: section titles */

  /* space */
  --gutter: 1.125rem;
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 7rem;
  --mast: 4.25rem;
  --max: 1440px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 700px) { :root { --gutter: 2rem; --mast: 4.75rem; } }
@media (min-width: 1100px) { :root { --gutter: 3rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--s3); background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-body)/1.8 var(--font); text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h1, h2, h3 { line-height: 1.1; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.code { direction: ltr; unicode-bidi: isolate; font-weight: 600; letter-spacing: .04em; }
:focus-visible { outline: 2px solid var(--ox); outline-offset: 3px; }
@view-transition { navigation: auto; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; inset-inline-start: var(--s2); top: -4rem; z-index: 50; background: var(--ink); color: var(--paper); padding: var(--s1) var(--s2); }
.skip:focus { top: var(--s1); }

/* ---- the marks shared with negakhte */
.dia { display: inline-block; width: .3em; height: .3em; background: var(--gold); rotate: 45deg;
  margin-inline-start: .32em; vertical-align: .12em; flex: none; }
.hl { background: linear-gradient(to top, transparent .2em, rgb(201 152 70 / .45) .2em .4em, transparent .4em) right / 100% 100% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .04em; }
.eyebrow { display: flex; align-items: center; gap: .75rem; font-size: var(--t-meta); font-weight: 500; color: var(--gold-ink); }
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; flex: none; }
.eyebrow a:hover { color: var(--ox); }

/* ---- buttons: negakhte's hard gold shadow on the primary */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.125rem;
  padding: .6rem 1.6rem; border: 1px solid var(--ink); border-radius: 2px; background: transparent; color: var(--ink);
  font: 600 var(--t-body)/1.2 var(--font); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), translate .2s var(--ease), box-shadow .2s var(--ease); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-pri { background: var(--ox); border-color: var(--ox); color: var(--paper); box-shadow: 4px 4px 0 var(--gold); }
.btn-pri:hover { background: var(--ox-deep); border-color: var(--ox-deep); translate: -2px -2px; box-shadow: 6px 6px 0 var(--gold); }
.btn-pri:active { translate: 2px 2px; box-shadow: 0 0 0 var(--gold); }
.btn[aria-disabled="true"] { cursor: default; }

/* ---------------------------------------------------------------- masthead */
.mast { position: relative; z-index: 20; border-bottom: 1px solid var(--rule); }
.is-home .mast { position: absolute; inset-inline: 0; top: 0; border-color: transparent; }
.mast-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--mast); }
.wordmark { display: inline-flex; align-items: center; font-weight: 800; font-size: 1.3125rem; white-space: nowrap; }
.nav { display: flex; gap: 2.1rem; font-size: .875rem; font-weight: 500; }
.nav a { color: var(--ink-2); padding-block: .5rem; }
.is-home .nav a { color: var(--ink); }
.nav a:hover, .nav a[aria-current] { color: var(--ox); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { width: 1.4rem; height: .9rem; border-block: 2px solid var(--ink); position: relative; }
.menu summary span::after { content: ""; position: absolute; inset: calc(50% - 1px) 0 auto; border-top: 2px solid var(--ink); }
.menu ul { position: absolute; inset-inline-end: 0; top: 100%; min-width: 13rem; background: var(--paper); border: 1px solid var(--rule);
  padding: .5rem 0; box-shadow: 0 18px 40px -18px rgb(31 26 21 / .35); }
.menu a { display: block; padding: .6rem 1.2rem; font-weight: 500; }
.menu a:hover { color: var(--ox); }
@media (max-width: 699px) { .nav { display: none; } .menu { display: block; } }

.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: var(--t-meta); color: var(--ink-2); padding-top: var(--s2); }
.crumbs a:hover { color: var(--ox); }
.crumbs [aria-current] { color: var(--ink); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- home: the sunlit corner
   The home page opens on the corner every product was photographed in, empty,
   with the headline on its calm wall: thin, huge, one heavy oxblood word. */
.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; background: var(--stone);
  min-height: max(36rem, min(94svh, 67vw)); }
.hero-bg, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-bg img { object-fit: cover; object-position: 20% 75%; }
.hero-in { position: relative; z-index: 2; display: grid; grid-template-rows: 1fr auto; gap: var(--s4); padding-top: calc(var(--mast) + var(--s4)); padding-bottom: var(--s4); }
.hero-copy { align-self: center; display: grid; gap: var(--s3); max-width: min(100%, 52rem); min-width: 0; }
/* the columns are the screen, not the widest line: a nowrap misra must never widen
   them (both grids, or the headline's own box "fits" and nothing gets resized) */
.hero-in, .hero-copy { grid-template-columns: minmax(0, 1fr); }
.hero-h1 { min-width: 0; }
.hero .eyebrow { color: var(--ink); }
.hero-h1 { font-family: var(--display); font-size: var(--t-h1); font-weight: var(--w-display); line-height: 1.28; }
.hero-h1 .w { display: inline-block; }
/* a verse: smaller than a slogan, with the air poetry needs, one misra per line */
.hero-h1.is-verse { font-size: clamp(1.75rem, 4.3vw, 4rem); line-height: 1.6; }
.hero-h1.is-verse .ln { white-space: nowrap; }
/* a misra too long for a narrow phone: two even halves, and air between misras */
.hero-h1.is-verse.is-wrapped .ln { white-space: normal; text-wrap: balance; }
.hero-h1.is-verse.is-wrapped .ln + .ln { margin-top: .35em; }
.hero-cite { display: flex; align-items: center; gap: .75rem; font-size: var(--t-body); font-weight: 600; margin-top: -.5rem; }
.hero-cite::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
.hero-h1 b { font-weight: var(--w-strong); color: var(--ox); }
.hero-h1 .ln { display: block; }
.hero-lede { font-size: var(--t-lede); line-height: 1.85; max-width: 32em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero-stats { display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); align-self: end; }
.hero-stats div { display: grid; align-content: end; }
.hero-stats dd { order: -1; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 600; line-height: 1.2; }
.hero-stats dt { font-size: var(--t-meta); font-weight: 500; }
@media (min-width: 700px) {
  .hero-copy { justify-self: start; width: min(64%, 56rem); }
}
@media (max-width: 699px) {
  .hero { min-height: max(40rem, 100svh); }
  .hero-bg img { object-position: 30% 100%; }
  .hero-in { padding-top: calc(var(--mast) + var(--s3)); grid-template-rows: auto 1fr; }
  .hero-copy { align-self: start; }
  .hero-cta .btn { flex: 1 1 9rem; padding-inline: .9rem; }
}
/* The entrance — the sun reaching the room, once per visit:
   the photo brightens and settles, one sunbeam passes over the wall, the
   headline writes itself in from the right (as Persian is read), then the
   highlighter draws under the heavy word. After that only the dust in the
   window light moves (site.js), as the hint that the page is alive. */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 32%, rgb(255 242 214 / .14) 46%, rgb(255 242 214 / .05) 54%, transparent 66%);
  mix-blend-mode: screen; }
.motes { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero-bg img { animation: light-up 3.2s cubic-bezier(.16, 1, .3, 1) both; }
  .hero::after { animation: sunbeam 3.4s cubic-bezier(.45, 0, .2, 1) .5s both; }
  /* the headline arrives word by word, each rising out of a slight blur */
  .hero-h1 .w { animation: word-in 1.05s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.35s + var(--i) * 70ms); }
  .hero-h1 .hl { animation: underline .9s cubic-bezier(.65, 0, .35, 1) 1.25s both; }
  .hero-cite { animation: rise 1s cubic-bezier(.16, 1, .3, 1) 1.15s both; }
  .hero-lede { animation: rise 1s cubic-bezier(.16, 1, .3, 1) 1.3s both; }
  .hero-cta { animation: rise 1s cubic-bezier(.16, 1, .3, 1) 1.42s both; }
  .hero-stats { animation: rise 1s cubic-bezier(.16, 1, .3, 1) 1.55s both; }
  .motes { animation: fade-in 2.4s ease 1.4s both; }
}
@keyframes light-up { from { scale: 1.035; filter: brightness(.86); } }
@keyframes sunbeam { 0% { opacity: 0; translate: -50% 0; } 30% { opacity: 1; } 100% { opacity: 0; translate: 55% 0; } }
@keyframes word-in { from { opacity: 0; translate: 0 .3em; filter: blur(7px); } }
@keyframes underline { from { background-size: 0% 100%; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; translate: 0 12px; } }

/* ---------------------------------------------------------------- section heads */
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s2) var(--s4);
  padding-bottom: var(--s3); }
.sec-head > div { display: grid; gap: .6rem; }
.sec-head h2 { font-family: var(--display); font-size: var(--t-h2); font-weight: var(--w-display); line-height: 1.3; }
.sec-head h2 b { font-weight: var(--w-strong); color: var(--ox); }
.sec-aside { font-size: var(--t-body); color: var(--ink-2); max-width: 30em; }
.sec-link { font-size: .875rem; font-weight: 600; color: var(--ox); }
.sec-link:hover { text-decoration: underline; text-underline-offset: .3em; }

/* ---------------------------------------------------------------- the vitrine
   Eight collections as tall photographs edge to edge. On a desktop the one
   under the pointer widens; on touch screens they become a sideways swipe. */
.vitrine { padding-top: var(--s5); }
.vit { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: var(--gutter); padding-bottom: 4px; }
.vit::-webkit-scrollbar { display: none; }
.pane { flex: 0 0 76vw; scroll-snap-align: center; position: relative; overflow: hidden; background: var(--stone); }
.pane a { display: block; height: 100%; }
.pane picture, .pane img { width: 100%; height: 100%; }
.pane img { aspect-ratio: 4 / 5; object-fit: cover; transition: filter .6s var(--ease), scale .9s var(--ease); }
.tag { position: absolute; inset-inline: .75rem; bottom: .75rem; display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; background: var(--paper); padding: .65rem .9rem; white-space: nowrap; overflow: hidden; }
.tag b { font-weight: 700; font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; }
.tag em { font-style: normal; font-size: .75rem; color: var(--ink-2); }
.tag em::after { content: " ←"; color: var(--ox); }
@media (min-width: 700px) { .pane { flex-basis: 42vw; } }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .vit { overflow: visible; gap: 4px; padding-inline: 4px; height: clamp(26rem, 41vw, 40rem); scroll-snap-type: none; }
  .pane { flex: 1 1 0; min-width: 0; transition: flex-grow .7s var(--ease); }
  .pane img { aspect-ratio: auto; filter: saturate(.78) brightness(.97); }
  .pane.is-open, .pane:hover, .pane:focus-within { flex-grow: 3.1; }
  .vit:hover .pane.is-open:not(:hover), .vit:focus-within .pane.is-open:not(:focus-within) { flex-grow: 1; }
  .pane.is-open img, .pane:hover img, .pane:focus-within img { filter: none; }
  .pane:hover img { scale: 1.02; }
  .tag { inset-inline: .45rem; bottom: .45rem; padding: .4rem .5rem; }
  .tag b { font-size: .8125rem; font-weight: 600; }
  .tag em { display: none; }
  .pane.is-open .tag, .pane:hover .tag, .pane:focus-within .tag { inset-inline: 1.25rem auto; bottom: 1.25rem; padding: .9rem 1.2rem; gap: 1.6rem; }
  .pane.is-open .tag b, .pane:hover .tag b, .pane:focus-within .tag b { font-size: 1.375rem; }
  .pane.is-open .tag em, .pane:hover .tag em, .pane:focus-within .tag em { display: inline; }
  .vit:hover .pane.is-open:not(:hover) .tag { inset-inline: .45rem; bottom: .45rem; padding: .4rem .5rem; }
  .vit:hover .pane.is-open:not(:hover) .tag b { font-size: .8125rem; }
  .vit:hover .pane.is-open:not(:hover) .tag em { display: none; }
  .vit:hover .pane.is-open:not(:hover) img { filter: saturate(.78) brightness(.97); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pane { animation: unveil linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .pane:nth-child(2) { animation-range: entry 4% entry 94%; }
    .pane:nth-child(3) { animation-range: entry 8% entry 98%; }
    .pane:nth-child(4) { animation-range: entry 12% cover 30%; }
    .pane:nth-child(n+5) { animation-range: entry 16% cover 34%; }
  }
}
@keyframes unveil { from { clip-path: inset(100% 0 0 0); } }

/* ---------------------------------------------------------------- product cards */
.item a, .item.is-sold { display: grid; gap: .75rem; align-content: start; }
.ph { position: relative; overflow: hidden; background: var(--stone); }
.ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: scale .9s var(--ease); }
.item a:hover .ph img { scale: 1.035; }
.meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem 1rem; align-items: baseline; }
.meta .code { grid-column: 1 / -1; font-size: .75rem; color: var(--ink-2); }
.nm { font-size: var(--t-name); font-weight: 500; line-height: 1.5; }
.item a:hover .nm { color: var(--ox); }
.pr { font-weight: 600; white-space: nowrap; }   /* proportional: tabular figures give ٬ a full digit width */
.pr small { font-size: .75rem; font-weight: 400; color: var(--ink-2); }
.pr-ask { color: var(--gold-ink); font-weight: 500; }
.pr-sold { color: var(--ink-2); font-weight: 400; font-size: var(--t-meta); }
@media (max-width: 699px) {
  .meta { grid-template-columns: 1fr; }
  .nm { font-size: .9375rem; }
}

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) .75rem; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) 1.25rem; } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5) 1.5rem; } }

/* the shelf: big and small pieces in a magazine rhythm */
.shelf { padding-top: var(--s6); }
.ed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) .75rem; grid-auto-flow: dense; }
.ed .big { grid-column: span 2; }
.ed .big .nm { font-size: 1.1875rem; font-weight: 500; }
@media (min-width: 900px) {
  .ed { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3.25rem 1.5rem; }
  .ed .item { grid-column: span 3; }
  .ed .big { grid-column: span 6; grid-row: span 2; }
  .ed .big a { height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
  .ed .big .ph { min-height: 0; }
  .ed .big .ph img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .ed .big .nm { font-size: 1.375rem; }
}

/* ---------------------------------------------------------------- the statement */
.state { display: grid; margin-top: var(--s6); background: var(--stone); }
.state-ph img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.state-tx { display: grid; align-content: center; gap: var(--s3); padding: var(--s5) var(--gutter); }
.state h2 { font-family: var(--display); font-size: clamp(2.25rem, 4.4vw, 3.75rem); font-weight: var(--w-display); line-height: 1.3; }
.state h2 b { font-weight: var(--w-strong); color: var(--ox); }
.state p { font-size: var(--t-lede); line-height: 1.9; color: var(--ink-2); max-width: 30em; }
.nums { display: flex; flex-wrap: wrap; gap: var(--s2) clamp(1.5rem, 4vw, 3rem); border-top: 1px solid #D2C5B2; padding-top: var(--s3); }
.nums div { display: grid; }
.nums dd { order: -1; font-size: clamp(1.625rem, 2.4vw, 2.125rem); font-weight: 600; line-height: 1.2; }
.nums dt { font-size: var(--t-meta); color: var(--ink-2); }
@media (min-width: 900px) {
  .state { grid-template-columns: 1fr 1fr; }
  .state-ph img { aspect-ratio: auto; min-height: 44rem; }
  .state-tx { padding: var(--s5) clamp(3rem, 6vw, 6rem); }
}

/* ---------------------------------------------------------------- ordering */
.order { display: grid; gap: var(--s5); padding-block: var(--s6); align-items: center; }
.order h2 { font-family: var(--display); font-size: var(--t-h2); font-weight: var(--w-display); line-height: 1.3; margin-block: .6rem var(--s3); }
.steps li { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s3); padding-block: var(--s3); border-top: 1px solid var(--rule); }
.step-n { font-size: 3rem; font-weight: 400; line-height: 1; color: var(--ox); }
.steps h3 { font-size: var(--t-h3); font-weight: 600; }
.steps p { color: var(--ink-2); margin-top: .25rem; }
.order .channels { margin-top: var(--s3); }
.chat { background: var(--stone); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: var(--s2); }
.chat-who { display: flex; align-items: center; gap: .75rem; font-size: .75rem; color: var(--ink-2); }
.chat-who i { width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink); display: grid; place-items: center; flex: none; }
.chat-who i::after { content: ""; width: .5rem; height: .5rem; background: var(--gold); rotate: 45deg; }
.bubble { justify-self: end; max-width: 88%; background: var(--ox); color: var(--paper); padding: 1rem 1.25rem;
  border-radius: 1.1rem 1.1rem .25rem 1.1rem; line-height: 1.85; }
.bubble .code { color: #F0D9B0; }
.chat-note { justify-self: end; font-size: .75rem; color: var(--ink-2); }
@media (min-width: 900px) { .order { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 6vw, 5rem); } }
.channels { display: flex; flex-wrap: wrap; gap: .9rem; }
.channels .btn { flex: 1 1 12rem; }

/* ---------------------------------------------------------------- section pages */
.sec-hero { padding-top: var(--s3); }
.sec-hero-in { display: grid; gap: var(--s4); align-items: end; }
.sec-copy { display: grid; gap: var(--s2); }
.sec-copy h1 { font-family: var(--display); font-size: var(--t-title); font-weight: var(--w-display); line-height: 1.15; margin-top: .4rem; }
.sec-copy h1 b { font-weight: var(--w-strong); color: var(--ox); }
.sec-copy h1.long { font-size: var(--t-h1); line-height: 1.25; }   /* sentences and names, not one-word sections */
.sec-intro { font-size: var(--t-lede); line-height: 1.9; color: var(--ink-2); max-width: 30em; }
.sec-copy .nums { border-top: 0; padding-top: var(--s1); }
.sec-ph { margin-inline: calc(var(--gutter) * -1); }
.sec-ph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 900px) {
  .sec-hero-in { grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
  .sec-ph { margin-inline: 0; }
  .sec-ph img { aspect-ratio: 16 / 11; }
}
.tabs { margin-top: var(--s4); border-bottom: 1px solid var(--rule); }
.tabs ul { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.tabs ul::-webkit-scrollbar { display: none; }
.tabs a { display: block; white-space: nowrap; padding: 1rem 1.15rem .9rem; font-size: .875rem; font-weight: 500; color: var(--ink-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { color: var(--ink); font-weight: 700; border-color: var(--ox); }
.listing { padding-top: var(--s4); }
.sold { padding-top: var(--s6); }
.sold h2 { font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: var(--w-display); margin-bottom: var(--s1); }
.sold .sec-aside { margin-bottom: var(--s3); }
.grid-sold { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) .75rem; }
@media (min-width: 700px) { .grid-sold { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3) 1rem; } }
.grid-sold .ph img { filter: grayscale(.6) contrast(.9); opacity: .8; }
.grid-sold .nm { font-size: .8125rem; color: var(--ink-2); font-weight: 400; }
.grid-sold .meta { grid-template-columns: 1fr; }

/* ---------------------------------------------------------------- product page */
.prod { display: grid; gap: var(--s3); }
.prod-ph { background: var(--stone); }
.prod-ph img { width: 100%; }
.prod-info { display: grid; gap: var(--s3); align-content: start; padding-inline: var(--gutter); }
.prod-info h1 { font-family: var(--display); font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: var(--w-display); line-height: 1.35; }
.prod-price { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 600; }
.prod-price small { font-size: var(--t-body); color: var(--ink-2); }
.prod-price .pr-ask { font-size: 1.25rem; }
.codebox { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding-block: var(--s3); border-block: 1px solid var(--rule); }
.codebox > span { font-size: var(--t-meta); color: var(--ink-2); }
.codebox .code { font-size: 1.375rem; background: var(--stone); padding: .2rem .9rem; }
.copy, .share { background: none; border: 0; padding: .35rem 0; color: var(--ox); cursor: pointer; font-size: var(--t-meta); font-weight: 600;
  text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.copy { margin-inline-start: auto; }
.copy:hover, .share:hover { color: var(--ox-deep); }
.share { justify-self: start; }
.prod .channels .btn { min-height: 3.5rem; font-size: 1rem; flex-basis: 100%; }
.hint { font-size: var(--t-meta); color: var(--ink-2); }
.notes { display: grid; gap: .5rem; font-size: .875rem; color: var(--ink-2); }
.notes li { display: flex; gap: .75rem; }
.notes li::before { content: ""; width: .375rem; height: .375rem; background: var(--gold); rotate: 45deg; margin-top: .65rem; flex: none; }
.more { padding-top: var(--s6); }
@media (min-width: 900px) {
  .prod { grid-template-columns: 7fr 5fr; gap: clamp(2.5rem, 4.5vw, 4rem); max-width: var(--max); margin-inline: auto; padding-inline-end: var(--gutter); }
  .prod-info { position: sticky; top: var(--s3); padding-inline: 0; padding-top: var(--s4); }
}
.buybar { position: sticky; bottom: 0; z-index: 10; margin-top: var(--s5); background: rgb(245 239 230 / .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom); }
.buybar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 4.25rem; }
.buybar .pr { font-size: 1.0625rem; }
.buybar .btn { min-height: 2.875rem; padding-inline: 1.15rem; box-shadow: 3px 3px 0 var(--gold); }
@media (min-width: 900px) { .buybar { display: none; } }

/* ---------------------------------------------------------------- about, contact, 404 */
.contact-list { display: grid; gap: .5rem; font-size: 1.0625rem; }
.contact-list a { color: var(--ox); }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------------------------------------------------------------- footer: ink, closed by the name */
.foot { margin-top: var(--s6); background: var(--ink); color: var(--paper); overflow: hidden; }
.foot-in { display: grid; gap: var(--s4); padding-block: var(--s5) var(--s4); font-size: .875rem; }
.foot h2 { font-size: .75rem; font-weight: 600; color: var(--gold); margin-bottom: .75rem; }
.foot p, .foot li { color: var(--on-ink); line-height: 2.1; }
.foot a:hover { color: var(--paper); }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (min-width: 900px) { .foot-in { grid-template-columns: 2fr 3fr; } .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.giant { border-top: 1px solid #3A322A; padding-block: var(--s3); font-size: clamp(3rem, 11vw, 10.5rem); font-weight: 800;
  line-height: 1.15; white-space: nowrap; color: var(--paper); }
.giant .dia { width: .12em; height: .12em; vertical-align: .14em; }
.foot-small { padding-bottom: var(--s3); font-size: .75rem; color: var(--on-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  @view-transition { navigation: none; }
}