/* ============================================================================
   SAISON — Social Media Creative Design System
   Shared tokens, type, grain and a few branded atoms used across every
   creative. Each creative ships its OWN unique composition CSS on top of this;
   this file only carries the brand foundation so the campaign feels native to
   the Saison website (same palette, type, grain, voice).
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,300..800&family=Hanken+Grotesk:ital,wght@0,300..800;1,400..600&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* Core palette (mirrors the website's CSS variables, as hex) */
  --cream: #ede9e6;
  --paper: #f7f4f0;
  --clay: #c9996b;
  --clay-600: #a87c50;
  --espresso: #5c4f4a;
  --sage: #5c766d;
  --sage-700: #455a52;
  --ink: #221e1c;
  --line: #dad3cc;
  --ember: #d9572a;
  --ember-600: #be431c;
  --butter: #e7c796;

  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

/* The canvas IS the body — exact pixel dimensions, nothing bleeds outside.
   Feed = 1080x1080, Story = 1080x1920. Set --w / --h per file. */
body {
  width: var(--w, 1080px);
  height: var(--h, 1080px);
  overflow: hidden;
  position: relative;
  background: var(--cream);
  color: var(--espresso);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Full-bleed root layer helper */
.canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

img {
  display: block;
}

/* Paper grain — same overlay language as the site (multiply, low opacity).
   Always sits above artwork, below text. */
.grain {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.06;
  background-image: url("/grain.svg");
  background-repeat: repeat;
  background-size: 200px 200px;
}
.grain--soft { opacity: 0.04; }
.grain--on-dark { mix-blend-mode: soft-light; opacity: 0.10; }

/* ---- Branded atoms ------------------------------------------------------- */

/* Eyebrow rail: leading rule + mono uppercase label, like the website */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  white-space: nowrap;
}
.eyebrow .rule {
  display: block;
  height: 1.5px;
  width: 54px;
  background: currentColor;
  flex: none;
  opacity: 0.8;
}
.eyebrow .dot {
  display: block;
  height: 9px;
  width: 9px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}

/* Index number, e.g. (01) */
.index {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* Sticker chip — hand-placed rotated tag with hard ink border */
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  border: 2.5px solid var(--ink);
  border-radius: 4px;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  box-shadow: 0 18px 34px -22px rgba(34, 30, 28, 0.6);
}
.sticker--ember { background: var(--ember); color: var(--cream); }
.sticker--espresso { background: var(--espresso); color: var(--cream); }
.sticker--sage { background: var(--sage); color: var(--cream); }
.sticker--clay { background: var(--clay); color: var(--ink); }
.sticker--butter { background: var(--butter); color: var(--ink); }
.sticker--cream { background: var(--cream); color: var(--ink); }

/* Star rating row */
.stars {
  display: inline-flex;
  gap: 6px;
  color: var(--ember);
}
.stars svg { display: block; }

/* Display type defaults — Bricolage, tight, optical sizing on */
.display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 0;
}
.serif-quote {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Wordmark with the signature ember dot */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.9;
}
.wordmark .dot { color: var(--ember); }

/* Mono caption / kicker */
.mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* Asterisk separator used in the website marquees */
.ast { color: var(--ember); }

/* A photo set into a panel with the warm shadow language */
.shadow-warm { box-shadow: 0 28px 60px -30px rgba(34, 30, 28, 0.55); }
.shadow-warm-lg { box-shadow: 0 44px 90px -36px rgba(34, 30, 28, 0.62); }

/* Hairline divider */
.hr {
  height: 1px;
  width: 100%;
  background: var(--line);
  border: 0;
}
.hr--dark { background: rgba(237, 233, 230, 0.18); }

/* Reusable scrim gradients for cinematic photo treatments */
.scrim-bottom {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(34, 30, 28, 0.92) 0%,
    rgba(34, 30, 28, 0.45) 42%,
    rgba(34, 30, 28, 0.05) 78%
  );
}
.scrim-veil { position: absolute; inset: 0; background: rgba(34, 30, 28, 0.42); }
.ember-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(120px);
  background: radial-gradient(circle, rgba(217, 87, 42, 0.55) 0%, rgba(217, 87, 42, 0) 70%);
  pointer-events: none;
}