/* ============================================================
   NEKTAR — Colors & Type
   Bar à Vin · 35 rue de Verneuil, Paris 7e
   ============================================================ */

/* ---- Webfonts (Google Fonts substitutes — see README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Work+Sans:wght@200;300;400;500&display=swap');

:root {
  /* ============================================================
     COLORS — three colors. That's it.
     ============================================================ */

  /* Base palette */
  --nektar-creme:        #F5F0E8;   /* dominant background */
  --nektar-creme-deep:   #EDE5D6;   /* subtle section divider on cream */
  --nektar-nuit:         #0D1B3E;   /* bleu nuit — titles, body text on cream */
  --nektar-or:           #C9A84C;   /* or champagne — accents only */

  /* Tints & shades — used sparingly */
  --nektar-nuit-80:      rgba(13, 27, 62, 0.80);
  --nektar-nuit-60:      rgba(13, 27, 62, 0.60);
  --nektar-nuit-40:      rgba(13, 27, 62, 0.40);
  --nektar-nuit-15:      rgba(13, 27, 62, 0.15);
  --nektar-nuit-08:      rgba(13, 27, 62, 0.08);

  --nektar-or-80:        rgba(201, 168, 76, 0.80);
  --nektar-or-40:        rgba(201, 168, 76, 0.40);
  --nektar-or-20:        rgba(201, 168, 76, 0.20);

  --nektar-ink:          #1A1A1A;   /* near-black for photo overlays only */

  /* ---- Semantic tokens ---- */
  --bg:                  var(--nektar-creme);
  --bg-deep:             var(--nektar-creme-deep);
  --fg:                  var(--nektar-nuit);
  --fg-muted:            var(--nektar-nuit-60);
  --fg-quiet:            var(--nektar-nuit-40);
  --accent:              var(--nektar-or);
  --rule:                var(--nektar-nuit-15);
  --rule-or:             var(--nektar-or);

  /* On dark overlays (hero photo) */
  --on-photo:            #F8F4EC;
  --on-photo-muted:      rgba(248, 244, 236, 0.75);

  /* ============================================================
     TYPE
     Display: Cormorant Garamond  — editorial high-contrast serif
     Body:    Work Sans (Light)   — clean, breathes on cream
     Mono:    JetBrains Mono      — rare; details only
     ============================================================ */

  --font-display: "Cormorant Garamond", "Cormorant", "EB Garamond", Georgia, serif;
  --font-body:    "Work Sans", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Type scale — desktop. Mobile clamps applied per element. */
  --t-display:   clamp(64px, 11vw, 184px);   /* editorial XXL — affiche */
  --t-h1:        clamp(44px, 6vw, 96px);
  --t-h2:        clamp(32px, 4vw, 64px);
  --t-h3:        clamp(22px, 2.2vw, 32px);
  --t-eyebrow:   12px;                       /* "BAR À VIN — PARIS" */
  --t-body:      18px;
  --t-body-lg:   20px;
  --t-small:     14px;
  --t-caption:   13px;

  /* Line heights */
  --lh-display:  0.95;
  --lh-heading:  1.05;
  --lh-body:     1.55;
  --lh-tight:    1.2;

  /* Tracking */
  --track-tight:    -0.02em;
  --track-normal:   0;
  --track-eyebrow:  0.24em;   /* wide-spaced caps */
  --track-label:    0.12em;

  /* ============================================================
     SPACING — generous, magazine-style.
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;
  --space-11: 192px;   /* between major sections — full breath */

  /* Layout */
  --gutter:        clamp(20px, 4vw, 64px);
  --max-content:   1440px;
  --max-text:      640px;     /* short measure for body copy */

  /* Hairlines & shadows — almost none. */
  --hair:          1px solid var(--rule);
  --hair-or:       1px solid var(--rule-or);

  /* Radii — almost zero, ever. */
  --radius-0:      0;
  --radius-pill:   999px;     /* used only for the round logo medallion */

  /* Motion */
  --ease:          cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:      160ms;
  --dur:           260ms;
  --dur-slow:      520ms;
}

/* ============================================================
   ELEMENT DEFAULTS
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-tight);
  color: var(--fg);
  margin: 0;
}

/* The .display class is the XXL "affiche" face — Cormorant Light, upright.
   Reserved for the single hero word and rare section openers. */
.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 300;
  font-style: normal;
  line-height: var(--lh-display);
  letter-spacing: -0.025em;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow--ink { color: var(--fg); }

p {
  max-width: var(--max-text);
  margin: 0 0 1em 0;
  color: var(--fg);
}

p.lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-body-lg);
  line-height: 1.45;
  color: var(--fg);
}

small, .small {
  font-size: var(--t-small);
  color: var(--fg-muted);
}

/* ---- Text link — the only "button" Nektar uses ---- */
a.link, .link {
  color: inherit;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-size: var(--t-small);
}
a.link::after, .link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}
a.link:hover::after, .link:hover::after { transform: scaleX(1); }

/* The single permitted "CTA" — text + fine gold rule, always */
.link--cta {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-size: 13px;
  color: var(--fg);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--accent);
}
.link--cta:hover { color: var(--accent); }

/* ---- Hairline rule ---- */
hr.rule { border: 0; border-top: var(--hair); margin: var(--space-7) 0; }
hr.rule--or { border-top: var(--hair-or); }