/* =============================================================
   Ludovic Baron Fine Art — Design tokens
   Generated from the written brand & design charter.
   The single permitted accent is beige sable #D4C5A9.
   Any other hex value introduced in product CSS is a bug.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* Playfair Display — served locally from /fonts.
   Two variable fonts cover the full upright + italic weight axis. */
@font-face {
  font-family: "Playfair Display";
  src: url("./fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype-variations"),
       url("./fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("./fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("./fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Canvas & surfaces ---------- */
  --canvas:               #000000;   /* absolute pure black, hero + main sections */
  --surface-1:            #0D0D0D;   /* alternating section background */
  --surface-2:            #141414;   /* rare cards & modals */
  --surface-2-hover:      #1F1F1F;   /* hover on surface-2 */

  /* ---------- Ink (typography) ---------- */
  --ink-primary:          #FFFFFF;   /* titles & body main */
  --ink-soft:             #E8E8E8;   /* long-form paragraphs */
  --ink-muted:            #999999;   /* captions, metadata, timestamps */

  /* ---------- The one accent: beige sable ---------- */
  --accent:               #D4C5A9;   /* links, focus rings, active borders */
  --accent-hover:         #BFAE91;   /* hover saturated variant */
  --accent-muted:         #4A4337;   /* inactive borders, very subtle separators */

  /* ---------- Borders ---------- */
  --border-hairline:      rgba(212, 197, 169, 0.15);  /* default */
  --border-active:        #D4C5A9;                    /* focus & hover */
  --border-divider:       rgba(255, 255, 255, 0.08);  /* neutral separator */

  /* ---------- The single permitted gradient ---------- */
  /* Used only as a photo overlay for title legibility */
  --hero-overlay:         linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));

  /* ---------- Typography families ---------- */
  --font-display:         "Playfair Display", "Times New Roman", serif;
  --font-body:            "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:            "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ---------- Display scale (Playfair Display, weight 400) ----------
     Compact scale — the patrimonial voice never shouts. */
  --display-xl-size:      48px;
  --display-xl-lh:        1.15;
  --display-xl-tracking:  -0.01em;

  --display-l-size:       40px;
  --display-l-lh:         1.15;
  --display-l-tracking:   -0.01em;

  --display-m-size:       30px;
  --display-m-lh:         1.2;
  --display-m-tracking:   -0.005em;

  --display-s-size:       24px;
  --display-s-lh:         1.25;
  --display-s-tracking:   0;

  /* ---------- Body scale (Open Sans, weight 400) ---------- */
  --body-l-size:          16px;
  --body-l-lh:            1.6;

  --body-m-size:          15px;
  --body-m-lh:            1.55;

  --body-s-size:          13px;
  --body-s-lh:            1.55;

  /* ---------- Caption ---------- */
  --caption-size:         12px;
  --caption-lh:           1.5;
  --caption-tracking:     0.04em;

  /* ---------- Eyebrow / technical labels ---------- */
  --eyebrow-size:         11px;
  --eyebrow-weight:       600;
  --eyebrow-tracking:     0.18em;

  /* ---------- Spacing scale (8px base, six steps, no in-between) ---------- */
  --space-1:              8px;
  --space-2:              16px;
  --space-3:              24px;
  --space-4:              48px;
  --space-5:              96px;
  --space-6:              160px;   /* reserved for cinematic chapter breathing */

  /* ---------- Radius (three values only) ---------- */
  --radius-0:             0;        /* default, images, frames, artworks */
  --radius-1:             4px;      /* inputs and small utilities */
  --radius-pill:          999px;    /* nav pills and collection tags */

  /* ---------- Motion (one curve, three durations) ---------- */
  --ease:                 cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:             200ms;   /* hover & focus */
  --dur-medium:           400ms;   /* panels & drawers */
  --dur-slow:             800ms;   /* image fades, chapter transitions */
}

/* =============================================================
   Semantic typographic styles
   Use these classes; do not redefine sizes inline.
   ============================================================= */

html, body {
  background: var(--canvas);
  color: var(--ink-primary);
  font-family: var(--font-body);
  font-size: var(--body-m-size);
  line-height: var(--body-m-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

.display-xl,
.display-l,
.display-m,
.display-s,
.h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink-primary);
  margin: 0;
}

.display-xl, .h1 {
  font-size: var(--display-xl-size);
  line-height: var(--display-xl-lh);
  letter-spacing: var(--display-xl-tracking);
}
.display-l, .h2 {
  font-size: var(--display-l-size);
  line-height: var(--display-l-lh);
  letter-spacing: var(--display-l-tracking);
}
.display-m, .h3 {
  font-size: var(--display-m-size);
  line-height: var(--display-m-lh);
  letter-spacing: var(--display-m-tracking);
}
.display-s, .h4 {
  font-size: var(--display-s-size);
  line-height: var(--display-s-lh);
  letter-spacing: var(--display-s-tracking);
}

/* Artwork names — Playfair Display *upright*, in accent beige, framed by French guillemets.
   The italic treatment from the original charter is retired (illegible on pure black). */
.artwork-name {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  color: var(--accent);
}
.artwork-name::before { content: "« "; color: var(--ink-muted); }
.artwork-name::after  { content: " »"; color: var(--ink-muted); }

.body-l, p.body-l {
  font-family: var(--font-body);
  font-size: var(--body-l-size);
  line-height: var(--body-l-lh);
  color: var(--ink-soft);
}
.body-m, p {
  font-family: var(--font-body);
  font-size: var(--body-m-size);
  line-height: var(--body-m-lh);
  color: var(--ink-soft);
}
.body-s {
  font-family: var(--font-body);
  font-size: var(--body-s-size);
  line-height: var(--body-s-lh);
  color: var(--ink-soft);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  letter-spacing: var(--caption-tracking);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--body-s-size);
  color: var(--ink-soft);
}

/* =============================================================
   Components
   ============================================================= */

a, .link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--border-hairline);
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
a:hover, .link:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 18px 36px;
  border: 0;
  border-radius: var(--radius-0);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.btn--primary {
  background: var(--ink-primary);
  color: var(--canvas);
}
.btn--primary:hover {
  background: var(--accent);
  color: var(--canvas);
}

.btn--outline {
  background: transparent;
  color: var(--ink-primary);
  border: 1px solid var(--accent);
}
.btn--outline:hover {
  background: var(--accent);
  color: var(--canvas);
}

.text-link {
  color: var(--accent);
  border-bottom: 1px solid var(--border-hairline);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.text-link:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent);
}

.input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-hairline);
  color: var(--ink-primary);
  font-family: var(--font-body);
  font-size: 16px;
  padding: 12px 0;
  outline: none;
  border-radius: var(--radius-0);
  transition: border-color var(--dur-fast) var(--ease);
}
.input::placeholder { color: var(--ink-muted); }
.input:focus { border-bottom-color: var(--accent); }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-0);
  padding: var(--space-4);
  transition: border-color var(--dur-fast) var(--ease);
}
.card:hover { border-color: var(--accent); }

/* Focus-visible — the only place box-shadow is permitted */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent);
}