/* ============================================================
   The Vine — Self-contained brand stylesheet
   (tokens + base, bundled so the /site folder works offline)
   Load this FIRST, then vine-site.css.
   ============================================================ */

/* ============================================================
   The Vine — Webfonts
   Body / Headings:  Ibarra Real Nova   (brand "Body font")
   Header script:    Brittany Signature (brand "Header font")
   Both are the brand's official faces, self-hosted in assets/fonts/.
   ============================================================ */

/* ---- Ibarra Real Nova ---- */
@font-face {
  font-family: 'Ibarra Real Nova';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/IbarraRealNova-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Ibarra Real Nova';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/IbarraRealNova-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Ibarra Real Nova';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/IbarraRealNova-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Ibarra Real Nova';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/IbarraRealNova-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Ibarra Real Nova';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/IbarraRealNova-Italic.ttf') format('truetype');
}

/* ---- Brittany Signature (brand header script) ---- */
@font-face {
  font-family: 'Brittany Signature';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/BrittanySignature.ttf') format('truetype');
}


/* ============================================================
   The Vine — Color Tokens
   Brand palette (from Brand Guide 2025):
     Black  #000000  ·  Gold  #A46A07
     Cream  #F8F8F0  ·  Ivory #FFFBF5
   Extended warm-neutral + imagery-derived accents
   (deep greens, burgundy, soft neutrals) round out the system.
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --vine-black:   #000000;   /* primary ink / dark surfaces        */
  --vine-gold:    #A46A07;   /* signature wine-country gold/amber  */
  --vine-cream:   #F8F8F0;   /* soft cream — quiet page surface    */
  --vine-ivory:   #FFFBF5;   /* warm white — default page bg       */

  /* ---- Warm neutral scale (ink → ivory) ---- */
  --vine-espresso: #221C14;  /* body text — softer than pure black */
  --vine-bark:     #4A3F30;  /* secondary text                     */
  --vine-stone:    #8A7E6B;  /* tertiary text, captions, meta      */
  --vine-sand:     #D8CFBE;  /* hairline borders, dividers         */
  --vine-linen:    #EFE9DD;  /* subtle fills, hover surfaces       */

  /* ---- Imagery-derived accents ---- */
  --vine-green:      #3D4A33; /* deep vineyard / olive green       */
  --vine-sage:       #7C8466; /* soft sage                         */
  --vine-burgundy:   #5E1F2A; /* deep wine red                     */
  --vine-gold-soft:  #C89A4E; /* lit gold — highlights, hovers     */
  --vine-gold-deep:  #7E5106; /* darkened gold — pressed states    */

  /* ---- Semantic: surfaces ---- */
  --surface-page:    var(--vine-ivory);
  --surface-quiet:   var(--vine-cream);
  --surface-card:    #FFFFFF;
  --surface-raised:  var(--vine-linen);
  --surface-dark:    var(--vine-black);
  --surface-green:   var(--vine-green);

  /* ---- Semantic: text ---- */
  --text-heading:    var(--vine-black);
  --text-body:       var(--vine-espresso);
  --text-muted:      var(--vine-bark);
  --text-subtle:     var(--vine-stone);
  --text-on-dark:    var(--vine-cream);
  --text-on-dark-muted: rgba(248,248,240,0.66);
  --text-accent:     var(--vine-gold);

  /* ---- Semantic: lines & accents ---- */
  --border-hairline: var(--vine-sand);
  --border-strong:   var(--vine-bark);
  --divider:         rgba(34,28,20,0.10);
  --accent:          var(--vine-gold);
  --accent-hover:    var(--vine-gold-deep);
  --accent-quiet:    rgba(164,106,7,0.10);

  /* ---- Semantic: status ---- */
  --status-success:  #4A6B3D;
  --status-error:    var(--vine-burgundy);
  --status-warning:  var(--vine-gold);
  --status-info:     var(--vine-sage);

  /* ---- Focus ring ---- */
  --focus-ring: rgba(164,106,7,0.45);
}


/* ============================================================
   The Vine — Typography Tokens
   Two families, brand-true:
     · Ibarra Real Nova — workhorse serif (body + headings),
       set in wide-tracked caps it echoes the logo wordmark.
     · Brittany Signature — the brand's header script for
       romantic display accents & flourishes.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-serif:  'Ibarra Real Nova', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --font-script: 'Brittany Signature', 'Snell Roundhand', cursive;
  /* alias kept for clarity in components */
  --font-body:    var(--font-serif);
  --font-heading: var(--font-serif);
  --font-display: var(--font-script);

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Type scale (px) ---- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;

  /* ---- Line heights ---- */
  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.10em;   /* small caps labels        */
  --tracking-wider:   0.20em;   /* logo-style wordmark caps */
  --tracking-widest:  0.32em;   /* "ESTD · 2015" micro-caps */
}


/* ============================================================
   The Vine — Spacing, Radii, Shadows, Borders, Layout
   The brand reads classic and editorial: crisp hairlines,
   minimal rounding, soft warm shadows, generous air.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---- Corner radii — restrained & elegant ---- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-pill: 999px;
  --radius-card: var(--radius-md);

  /* ---- Border widths ---- */
  --border-thin:    1px;
  --border-regular: 1.5px;
  --border-thick:   2px;

  /* ---- Soft, warm shadows ---- */
  --shadow-xs: 0 1px 2px rgba(34,28,20,0.06);
  --shadow-sm: 0 2px 8px rgba(34,28,20,0.07);
  --shadow-md: 0 8px 24px rgba(34,28,20,0.09);
  --shadow-lg: 0 18px 48px rgba(34,28,20,0.12);
  --shadow-xl: 0 32px 80px rgba(34,28,20,0.16);

  /* ---- Image / overlay protection gradients ---- */
  --scrim-bottom: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 100%); /* @kind other */
  --scrim-full:   linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.30)); /* @kind other */

  /* ---- Motion ---- */
  --ease-soft:  cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* ---- Layout ---- */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1120px;
  --container-xl:  1320px;
  --gutter:        clamp(20px, 5vw, 64px); /* @kind spacing */
}


/* ============================================================
   The Vine — Base layer
   Light, optional element defaults + a few brand utility
   classes (prefixed .vine-*). Tokens do the heavy lifting;
   this just makes raw HTML pick up the brand voice.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  margin: 0 0 0.5em;
  letter-spacing: var(--tracking-tight);
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

::selection { background: var(--accent-quiet); color: var(--vine-black); }

/* ---- Brand utility classes ---- */

/* Romantic script accent — Brittany Signature (brand header font) */
.vine-script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1.1;
  color: var(--accent);
}

/* Wide-tracked caps "eyebrow" — the logo's voice in small type */
.vine-eyebrow {
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-subtle);
}

/* Logo-style wordmark caps */
.vine-wordmark {
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-regular);
}

/* Micro caps (e.g. "ESTD · 2015") */
.vine-micro {
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

/* Thin gold double-rule — echoes the logo's oval frame */
.vine-rule {
  border: none;
  border-top: 1px solid var(--accent);
  position: relative;
  height: 4px;
  background: none;
}
.vine-rule::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 3px;
  border-top: 1px solid var(--accent);
}

/* A small centered laurel/leaf divider mark slot */
.vine-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--accent);
}
.vine-divider::before,
.vine-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-hairline);
}