/** Shopify CDN: Minification failed

Line 33:0 All "@import" rules must come first
Line 35:0 All "@import" rules must come first

**/
/* ===================================================================
   Arteriel Design System — Foundations
   Brand: Artériel — global authenticated art distributor
   Typefaces: Didot (display) + Avenir Next (text)
   Aesthetic: gallery wall — paper-white surfaces, black ink type,
              the artwork carries all the color. Restrained, museum-grade.
   =================================================================== */

@font-face {
  font-family: "Didot Display";
  src: local("Didot"), local("Didot LT Std"),
       url("https://fonts.cdnfonts.com/s/14564/Didot.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Didot Display";
  src: local("Didot Italic"), local("Didot LT Std Italic"),
       url("https://fonts.cdnfonts.com/s/14564/Didot-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* GFS Didot is the closest free metrics-match for Didot LT Std at display sizes */
@import url("https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap");
/* Inter is the closest free metrics-match for Avenir Next */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  /* ─── PAPER & INK ─────────────────────────────────────────────── */
  /* Surfaces are paper, type is ink — no off-the-shelf grays. */
  --paper:        #f8f6f1;   /* primary background — warm museum-wall white */
  --paper-deep:   #efece4;   /* secondary surface — section breaks, cards */
  --paper-edge:   #e6e2d6;   /* hairline rules, dividers */
  --ink:          #14140f;   /* primary type — never pure black */
  --ink-soft:     #3a3a33;   /* secondary type, captions */
  --ink-muted:    #76746a;   /* tertiary type, metadata, breadcrumbs */

  /* ─── ACCENTS ─────────────────────────────────────────────────── */
  /* Two brand accents pulled from museum gallery vocabulary.
     Used sparingly — accent on hover, on tags, on the AI Concierge mark.
     Bordeaux refers to the deep red of curtained galleries / catalog covers.
     Cobalt refers to the indigo blue of monograph endpapers. */
  --bordeaux:     #6b1e2f;
  --cobalt:       #1e3a6b;
  --gilt:         #b08a4a;   /* gold accent — sparingly, for Italian-frame swatches */

  /* ─── STATE ──────────────────────────────────────────────────── */
  --positive:     #2c6a4a;
  --critical:     #8a2a1f;

  /* ─── SPACING (10-step, 4px rhythm) ──────────────────────────── */
  /* html { font-size: 62.5% } so 1rem = 10px */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2.0rem;
  --space-6: 2.4rem;
  --space-7: 3.2rem;
  --space-8: 4.0rem;
  --space-9: 6.4rem;
  --space-10: 9.6rem;
  --space-section: 12rem;
  --space-section-lg: 16rem;

  /* ─── TYPE FAMILIES ──────────────────────────────────────────── */
  --font-display: "Didot Display", "GFS Didot", "Didot LT Std", Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
  --font-text:    "Avenir Next", "Avenir Next LT Pro", Avenir, "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ─── TYPE SCALE ─────────────────────────────────────────────── */
  /* Display is Didot — high-contrast modern serif used at 48px+ only.
     Below that, Didot's hairlines disappear; switch to Avenir. */
  --type-display-1: clamp(64px, 9vw, 144px);   /* hero — gallery-poster scale */
  --type-display-2: clamp(48px, 6vw, 88px);    /* section openers */
  --type-display-3: 56px;                       /* page H1 */
  --type-h1:        40px;                       /* below this, no Didot */
  --type-h2:        28px;
  --type-h3:        20px;
  --type-body-lg:   18px;
  --type-body:      15px;
  --type-body-sm:   13px;
  --type-caption:   12px;
  --type-eyebrow:   11px;   /* Avenir, tracked, uppercase */

  /* ─── TRACKING ───────────────────────────────────────────────── */
  --track-display:  -0.02em;  /* Didot tightens at display */
  --track-tight:    -0.01em;
  --track-normal:    0;
  --track-wide:      0.08em;  /* Avenir UI labels */
  --track-eyebrow:   0.18em;  /* tracked uppercase */
  --track-letterspaced: 0.4em; /* T H E M E S, A R T I S T S — hero label style */

  /* ─── LINE HEIGHT ────────────────────────────────────────────── */
  --leading-display: 1.0;
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-body:    1.55;
  --leading-loose:   1.7;

  /* ─── BORDERS & RULES ────────────────────────────────────────── */
  --rule-hairline: 1px solid var(--paper-edge);
  --rule-ink:      1px solid var(--ink);
  --rule-thick:    2px solid var(--ink);
  --radius:        0;            /* always square — no rounded corners */
  --radius-pill:   999px;        /* avatar / dot indicators only */

  /* ─── ELEVATION ──────────────────────────────────────────────── */
  /* Almost flat. The catalog page lift is the only real shadow. */
  --shadow-card:   0 2px 24px rgba(20, 20, 15, 0.08);
  --shadow-modal:  0 24px 64px rgba(20, 20, 15, 0.18);
  --focus-ring:    0 0 0 2px var(--paper), 0 0 0 4px var(--ink);

  /* ─── MOTION ─────────────────────────────────────────────────── */
  --ease-gallery: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:     160ms;
  --dur-base:     280ms;
  --dur-slow:     520ms;

  /* ─── LAYOUT ─────────────────────────────────────────────────── */
  --container:     176rem;       /* 1760px max */
  --container-narrow: 96rem;     /* 960px reading width */
  --gutter:        var(--space-7);
  --header-h:      8rem;
}

/* Reset to 10px root so 1rem = 10px */
html { font-size: 62.5%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── TYPE ROLES ────────────────────────────────────────────────── */
.t-display-1 {
  font-family: var(--font-display);
  font-size: var(--type-display-1);
  font-weight: 400;
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
}
.t-display-2 {
  font-family: var(--font-display);
  font-size: var(--type-display-2);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
}
.t-display-3 {
  font-family: var(--font-display);
  font-size: var(--type-display-3);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
}
.t-h1 { font-family: var(--font-text); font-size: var(--type-h1); font-weight: 500; line-height: var(--leading-tight); }
.t-h2 { font-family: var(--font-text); font-size: var(--type-h2); font-weight: 500; line-height: var(--leading-snug); }
.t-h3 { font-family: var(--font-text); font-size: var(--type-h3); font-weight: 500; line-height: var(--leading-snug); }
.t-body-lg { font-size: var(--type-body-lg); line-height: var(--leading-loose); }
.t-body { font-size: var(--type-body); line-height: var(--leading-body); }
.t-body-sm { font-size: var(--type-body-sm); line-height: var(--leading-body); color: var(--ink-soft); }
.t-caption { font-size: var(--type-caption); color: var(--ink-muted); }
.t-eyebrow {
  font-family: var(--font-text);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* The Artériel "letterspaced" mark — A R T I S T S, T H E M E S, etc.
   Used in nav, page titles, and the wordmark itself (page 1 of brief). */
.t-mark {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--track-letterspaced);
  text-transform: uppercase;
}

/* ─── PRIMITIVES ────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 14px 28px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: background var(--dur-fast) var(--ease-gallery), color var(--dur-fast) var(--ease-gallery);
}
.btn:hover { background: transparent; color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--link {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  padding: 4px 0;
  letter-spacing: var(--track-wide);
}
.btn--link:hover { border-bottom-color: var(--bordeaux); color: var(--bordeaux); }

.tag {
  display: inline-block;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.tag--filled { background: var(--ink); color: var(--paper); }

/* Concierge mark — for the AI-POWERED ART CONCIERGE label */
.concierge-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bordeaux);
}
.concierge-mark::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bordeaux);
}