/* ============================================================
   ARTANTIQUE — Design Tokens (canonical)
   Source: .planning/design/source/style.css + tokens.jsx
   Extracted 1:1 from Claude Design v.2 bundle.
   DO NOT modify values without updating the design source.
   ============================================================ */

:root {
  /* ----- Surface ----- */
  --paper:      #F4F1E9;       /* warm off-white — main background */
  --paper-2:    #ECE7DA;       /* section ground */
  --paper-3:    #E3DCC9;       /* photo plate (letterbox bg under lot photos) */
  --paper-deep: #16140F;       /* dark band (manifest, footer accent) */
  --lot-num:    #F4E7D3;       /* lot № overlay on photos — light cream (post-bundle addition, owner 2026-05-23) */

  /* ----- Ink (typographic greys) ----- */
  --ink:        #15120F;       /* primary text + CTA */
  --ink-2:      #5E544A;       /* secondary text */
  --ink-3:      #9A8E7B;       /* tertiary / meta */

  /* ----- Rules / hairlines ----- */
  --rule:       #C6B99F;       /* default 1px hairline */
  --rule-soft:  #DCD2BB;       /* low-emphasis hairline */

  /* ----- Single accent (oxblood from logo) ----- */
  --accent:     #7A2D2A;       /* used point-wise: numerals, sale price, active cat */
  --accent-hi:  #9A4138;       /* hover / highlight variant */
  --ok:         #6E8E5C;       /* sage — «в наличии» status dot (из артборда product.jsx) */

  /* Overlay over photo for state=5 (sold) — прозрачный (owner 2026-05-27: тонировать не нужно,
     достаточно бейджа «ПРОДАНО» на бледно-красном фоне). Токен оставлен для будущих изменений. */
  --overlay-sold: transparent;

  /* ----- Typography ----- */
  --f-sans:     'Manrope', 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --f-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-serif:    'Newsreader', 'Source Serif Pro', 'PT Serif', Georgia, serif;

  /* ----- Rhythm ----- */
  --pad-x:      56px;          /* page horizontal padding (desktop) */
  --gut:        16px;          /* grid column gap */

  /* ----- Breakpoints (used in @media; CSS vars not directly usable in @media) ----- */
  /* mobile:   <= 767px         (375 design baseline) */
  /* tablet:   768px - 1199px   (768 design baseline) */
  /* desktop:  >= 1200px        (1440 design baseline) */
}

/* ============================================================
   Adaptive page padding & grid gutters
   ============================================================ */
@media (max-width: 1199px) {
  :root { --pad-x: 32px; }     /* tablet */
}
@media (max-width: 767px) {
  :root { --pad-x: 16px; --gut: 12px; }   /* mobile */
}

/* ============================================================
   Global reset (from style.css)
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Защита от горизонтального overflow: если случайный элемент шире viewport,
     mobile filter drawer (position:fixed; right:0) уезжал за видимый край экрана. */
  overflow-x: clip;
}

/* Scrollbar — thumb чуть темнее трека, чтобы был виден на бежевом фоне. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
/* Firefox */
* { scrollbar-color: var(--rule) var(--paper-2); scrollbar-width: thin; }

/* ============================================================
   Typography roles
   ============================================================ */
.display {
  font-family: var(--f-sans);
  font-weight: 300;
  letter-spacing: -0.024em;
  line-height: 1.02;
}
.h-tight   { letter-spacing: -0.02em; line-height: 1.06; font-weight: 400; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* Eyebrow-заголовок как ссылка — визуально не отличается (тот же цвет/шрифт, без подчёркивания). */
.eyebrow__link {
  color: inherit;
  text-decoration: none;
}
.eyebrow__link:hover { color: var(--accent); }

.label {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.lead {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink-2);
}

.lot-no {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.num-tab { font-variant-numeric: tabular-nums; }

.numeral {
  font-family: var(--f-sans);
  font-weight: 200;
  font-feature-settings: "tnum" 1;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Serif accent — italic highlights only (NOT body text) */
.serif {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.serif-accent {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.005em;
}

/* ============================================================
   Type scale (tokenized from tokens.jsx LangArtboard)
   ============================================================ */
/* H1 · Hero       — Manrope 300, 60/62, letter-spacing -0.028em */
/* H2 · Section    — Manrope 400, 36/40 */
/* H3 · Sub        — Manrope 500, 22/28 */
/* Lead            — Manrope 400, 17/25, letter-spacing -0.005em */
/* Body            — Manrope 400, 14/21 */
/* UI button       — Manrope 600, 12/12, uppercase */
/* Label · mono    — JetBrains Mono 500, 10.5/14, letter-spacing 0.18em, uppercase */
/* Lot no · mono   — JetBrains Mono 500, 10.5/14, letter-spacing 0.06em */

/* ============================================================
   Decorative rules
   ============================================================ */
.hr      { height: 1px; background: var(--rule);      border: 0; width: 100%; }
.hr-soft { height: 1px; background: var(--rule-soft); border: 0; width: 100%; }
.hr-ink  { height: 1px; background: var(--ink);       border: 0; width: 100%; }
.hr-acc  { height: 1px; background: var(--accent);    border: 0; width: 100%; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  font: 500 12px/1 var(--f-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.btn:hover { background: transparent; color: var(--ink); }

.btn-ghost {
  font: 500 12px/1 var(--f-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 20px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.btn-accent {
  font: 600 12px/1 var(--f-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
  text-decoration: none;
}

/* Typographic CTA — link-like with bottom rule */
.cta-text {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 11px/1 var(--f-sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  transition: gap .2s;
}
.cta-text:hover { gap: 18px; }

/* ============================================================
   Photo plate (letterbox for variable-height antique photos)
   ============================================================ */
.plate {
  background: var(--paper-3);
  overflow: hidden; position: relative;
  isolation: isolate;
}
.plate img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.plate.contain img { object-fit: contain; }

/* Blurred backdrop for item photos (variant A): blurred bg + centered contain at 90% */
.plate__blur {
  position: absolute; inset: -10%;
  background-size: cover; background-position: center;
  filter: blur(22px);
  transform: scale(1.05);
  opacity: .7;
  z-index: 0;
}
.plate.blur-bg { isolation: isolate; }
.plate.blur-bg picture { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; }
.plate.blur-bg img {
  object-fit: contain;
  width: 90%; height: 90%;
}

.img-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--ink-3);
  background:
    repeating-linear-gradient(45deg, transparent 0 5px, rgba(21,18,15,0.04) 5px 6px),
    var(--paper-3);
}

/* Hover-зум фото каталога — усилен по просьбе владельца (D-02-04..08, 2026-05-23):
   1.025 → 1.06, чуть заметнее реакция на наведение. */
.lot-card:hover .plate img { transform: scale(1.06); }
.lot-card:hover .lot-title { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .lot-card:hover .plate img { transform: none; }
}

/* ============================================================
   Icons (1.5px hairline, stroke only)
   ============================================================ */
.ico {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   Chips (filter tags, active filters)
   ============================================================ */
.chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  font: 500 11px/1 var(--f-sans);
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip .x { margin-left: 8px; opacity: 0.6; font-size: 10px; }

/* ============================================================
   Utility
   ============================================================ */
.cap-row { display: flex; align-items: baseline; gap: 12px; }

/* ============================================================
   Grid logic (from tokens.jsx GridLogic)
   ============================================================ */
/* BASE     : 12 columns · gap 16px · page padding 56px (desktop) */
/* HERO     : 7/5 asymmetric split (photo / text) — NOT 50/50 */
/* LOT GRID : 6 cols on desktop · column-gap 16 · row-gap 28-36 */
/* On tablet (768): 3 col lot grid */
/* On mobile (375): 2 col lot grid */