/* ============================================================
   BASE.CSS — Florence Pittet · Design System
   Fonts · Reset · Custom Properties · Typography
   ============================================================ */

/* FONTS */
@font-face {
  font-family: 'Zarid';
  src: url('../fonts/zarid-display.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bauziet';
  src: url('../fonts/bauziet-variable.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MgMedium';
  src: url('../fonts/mg-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* TOKENS */
:root {
  --navy:        #001c6a;
  --navy-97:     rgba(0,28,106,0.97);
  --navy-80:     rgba(0,28,106,0.80);
  --navy-55:     rgba(0,28,106,0.55);
  --navy-15:     rgba(0,28,106,0.15);
  --navy-06:     rgba(0,28,106,0.06);
  --cyan:        #16c6e5;
  --coral:       #ff3345;
  --white:       #ffffff;
  --anthracite:  #0d0f1a;
  --pearl:       #f4f5f8;
  --text-muted:  rgba(255,255,255,0.65);

  --f-display: 'Zarid', 'Cormorant Garamond', Georgia, serif;
  --f-ui:      'Bauziet', 'Inter', system-ui, sans-serif;
  --f-accent:  'MgMedium', 'Bauziet', sans-serif;

  --r-max: 1400px;
  --r-pad: clamp(20px, 5vw, 80px);
  --gap:   clamp(40px, 6vw, 96px);
  --transition: 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.7;
  color: var(--anthracite);
  background: var(--white);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }
input, textarea, select {
  font-family: var(--f-ui);
  font-size: inherit;
  border: none;
  outline: none;
}

/* TYPOGRAPHY SCALE */
h1 {
  font-family: var(--f-display);
  font-size: clamp(42px, 7vw, 88px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h2 {
  font-family: var(--f-display);
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h3 {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 400;
  line-height: 1.25;
}
.label {
  font-family: var(--f-accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tagline {
  font-family: var(--f-accent);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}
.poem {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.8;
  letter-spacing: 0.02em;
}