/* ============================================================
   LAYOVER — design tokens
   Reference DNA: Jacquemus Casa Jondal, Ibiza, summer 2025
   Banana yellow primary · polka dot motif · Mediterranean light
   ============================================================ */

:root {
  /* ----- Color ----- */
  --c-yellow:       #F2D74E;   /* banana yellow — primary brand block */
  --c-yellow-deep:  #E5C72E;   /* shadow / hover state on yellow */
  --c-cream:        #FAF6EE;   /* paper background, secondary surface */
  --c-cream-warm:   #F4EDDC;   /* aged paper, subtle differentiation */
  --c-lemon:        #FFF8E0;   /* lemon-white, capsule lift, soft cards */

  --c-ink:          #2A1F18;   /* deep walnut, all body text — warmer than black */
  --c-ink-soft:     #6B5B4D;   /* secondary copy, captions */
  --c-ink-mute:     #A89B8B;   /* tertiary, microcopy */

  --c-poppy:        #D9412E;   /* poppy red, CTAs, italic display accents */
  --c-poppy-deep:   #B12F1F;   /* poppy hover / pressed */

  --c-sky:          #C5D6DC;   /* pale Mediterranean sky, atmosphere */
  --c-sea:          #6B97A7;   /* mid sea-blue, accent rules, type detail */
  --c-cobalt:       #2D5570;   /* deep cobalt, rare emphasis only */

  --c-rule:         rgba(42, 31, 24, 0.16);   /* hairlines on cream */
  --c-rule-yellow:  rgba(42, 31, 24, 0.28);   /* hairlines on yellow */
  --c-rule-thin:    rgba(42, 31, 24, 0.10);   /* almost-invisible rules */

  /* ----- Type ----- */
  --f-display:      'Fraunces', 'Times New Roman', serif;
  --f-body:         'Inter Tight', 'Inter', -apple-system, system-ui, sans-serif;
  --f-mono:         'JetBrains Mono', 'SFMono-Regular', monospace;

  /* Display sizes, fluid */
  --t-display-xl:   clamp(72px, 12vw, 196px);   /* hero */
  --t-display-lg:   clamp(56px, 8vw, 132px);    /* section headline */
  --t-display-md:   clamp(40px, 5vw, 80px);     /* sub-section */
  --t-display-sm:   clamp(28px, 3.2vw, 48px);

  /* Body sizes */
  --t-lede:         clamp(20px, 1.6vw, 24px);   /* lead paragraph */
  --t-body:         17px;
  --t-small:        14px;
  --t-micro:        11px;                       /* labels, all-caps */

  /* Line heights */
  --lh-display:     0.94;
  --lh-head:        1.08;
  --lh-body:        1.55;
  --lh-tight:       1.2;

  /* Letter spacing */
  --ls-display:     -0.025em;
  --ls-tight:       -0.012em;
  --ls-label:       0.16em;     /* all-caps labels */
  --ls-mono:        0.04em;

  /* ----- Space (4-base scale) ----- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;
  --s-11:  192px;

  /* ----- Layout ----- */
  --max-w:        1320px;
  --gutter:       clamp(20px, 4vw, 56px);

  /* ----- Radius ----- */
  --r-0:   0px;            /* magazine button, no round */
  --r-1:   2px;
  --r-2:   6px;
  --r-pill: 999px;

  /* ----- Borders ----- */
  --bw:    1px;
  --bw-2:  1.5px;

  /* ----- Shadow ----- */
  --sh-1:  0 1px 0 rgba(42, 31, 24, 0.06);
  --sh-2:  0 8px 28px rgba(42, 31, 24, 0.10);
  --sh-card: 0 30px 60px -20px rgba(42, 31, 24, 0.20);

  /* ----- Motion ----- */
  --d-fast:    180ms;
  --d-mid:     360ms;
  --d-slow:    640ms;
  --e-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --e-soft:    cubic-bezier(0.4, 0.1, 0.2, 1);

  /* ----- Pattern: polka dot motif ----- */
  --pattern-dot-walnut-on-yellow:
    radial-gradient(circle, var(--c-ink) 1.6px, transparent 2px);
  --pattern-dot-yellow-on-cream:
    radial-gradient(circle, var(--c-yellow-deep) 1.6px, transparent 2px);
  --pattern-dot-size: 14px 14px;
}

/* ----- Base ----- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--c-ink); color: var(--c-yellow); }

a { color: inherit; text-decoration: none; }

/* ----- Utility ----- */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.label {
  font-family: var(--f-body);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink);
}

.italic-accent {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 80, "WONK" 1;
  color: var(--c-poppy);
}

/* Polka dot strip — section divider or motif */
.dot-strip {
  height: 28px;
  background-image: var(--pattern-dot-walnut-on-yellow);
  background-size: var(--pattern-dot-size);
  background-repeat: repeat-x;
  background-position: 0 center;
}

/* Button — magazine-style, no round, poppy red on yellow/cream */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 18px 28px;
  border: var(--bw-2) solid var(--c-ink);
  border-radius: var(--r-1);
  background: var(--c-poppy);
  color: var(--c-cream);
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  transition: transform var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}
.btn:hover {
  background: var(--c-poppy-deep);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--c-ink);
}
.btn:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 var(--c-ink);
}

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

/* Wordmark — LAYOVER, all caps, tracked tight */
.wordmark {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.wordmark::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--c-poppy);
  border-radius: 50%;
}