/* =========================================================
   AMINE TAZIT — Portfolio comédien
   Visual foundations: editorial, theatrical, monochrome + ember
   ========================================================= */

@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&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- Color palette ---------- */
  /* Stage-paper neutrals — warm off-white & deep ink */
  --paper:        #F4F0E8;   /* main background, warm off-white */
  --paper-2:      #ECE6D9;   /* subtle alternate panel */
  --ivory:        #FBF8F1;   /* card background, lightest */
  --ink:          #161311;   /* primary text, near-black warm */
  --ink-2:        #2A2520;   /* secondary text */
  --ink-3:        #6B645B;   /* tertiary, captions */
  --ink-4:        #9C9388;   /* disabled, dividers-on-paper */
  --rule:         #1A1714;   /* hairline rule color */
  --rule-soft:    rgba(22,19,17,0.18);

  /* Single warm accent — "ember" — used sparingly */
  --ember:        #B8431F;   /* burnt sienna, theatre-curtain red */
  --ember-deep:   #7D2A12;
  --ember-tint:   #E9D9C9;   /* pale warm wash */

  /* Stage black inversion */
  --stage:        #0E0B09;   /* deep velvet black, for hero */
  --stage-2:      #1A1612;
  --stage-fg:     #F4F0E8;

  /* Semantic */
  --fg:           var(--ink);
  --fg-2:         var(--ink-2);
  --fg-muted:     var(--ink-3);
  --fg-faint:     var(--ink-4);
  --bg:           var(--paper);
  --bg-card:      var(--ivory);
  --accent:       var(--ember);

  /* ---------- Type families ---------- */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Garamond, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'SFMono-Regular', ui-monospace, Menlo, monospace;

  /* ---------- Type scale ---------- */
  --t-display:    clamp(72px, 11vw, 168px);   /* Hero name */
  --t-h1:         clamp(48px, 6vw, 88px);
  --t-h2:         clamp(32px, 4vw, 56px);
  --t-h3:         28px;
  --t-h4:         20px;
  --t-lede:       22px;
  --t-body:       16px;
  --t-small:      14px;
  --t-caption:    12px;
  --t-eyebrow:    11px;

  /* ---------- Spacing & layout ---------- */
  --gutter:       24px;
  --margin:       clamp(24px, 5vw, 80px);
  --max-w:        1440px;

  --r-none:       0;
  --r-xs:         2px;
  --r-sm:         4px;       /* never larger — editorial, no pillows */

  /* ---------- Borders & shadows ---------- */
  --hair:         0.5px solid var(--rule);
  --line:         1px solid var(--rule);
  --line-soft:    1px solid var(--rule-soft);
  --shadow-card:  0 1px 0 rgba(22,19,17,0.06), 0 12px 32px -16px rgba(22,19,17,0.18);
  --shadow-photo: 0 30px 60px -28px rgba(22,19,17,0.45);

  /* ---------- Motion ---------- */
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-stage:   cubic-bezier(0.65, 0, 0.35, 1);   /* curtain open/close */
  --dur-fast:     180ms;
  --dur:          320ms;
  --dur-slow:     720ms;
}

/* =========================================================
   Base
   ========================================================= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   Semantic type — use these classes directly
   ========================================================= */

/* Display: actor name on hero — Cormorant, light weight, very tight */
.t-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-display);
  line-height: 0.86;
  letter-spacing: -0.02em;
  font-style: italic;     /* signature italic for the name */
}

/* H1 — page openers */
.t-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: 0.95;
  letter-spacing: -0.015em;
}

/* H2 — section headers, can be italic for intimacy */
.t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.t-h2--italic { font-style: italic; font-weight: 300; }

/* H3 — subsection / role title */
.t-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -0.005em;
}

/* H4 — small headings, sans serif for credits */
.t-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.3;
  letter-spacing: 0;
}

/* Lede — intro paragraph under hero / on about page */
.t-lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--t-lede);
  line-height: 1.45;
  color: var(--fg-2);
}

/* Body — Inter, comfortable */
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg-2);
}

/* Small — credits, supporting info */
.t-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg-muted);
}

/* Caption — under photos, image numbers */
.t-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  font-size: var(--t-caption);
  line-height: 1.4;
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

/* Eyebrow — section labels, tracked uppercase */
.t-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-muted);
}

/* Number / metadata — tabular */
.t-num {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}

/* Pull quote — for press / scenes */
.t-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--fg);
  text-wrap: balance;
}

/* =========================================================
   Utility primitives
   ========================================================= */
.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  width: 100%;
}
.rule--soft { background: var(--rule-soft); }
.rule--hair { height: 0.5px; }

.eyebrow-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-muted);
}
.eyebrow-bar::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* Reset list reset for this design */
.list-clean { list-style: none; padding: 0; margin: 0; }