/* ============================================================
   THE AD LAB — brand design system
   Source of truth: Concept 3 plates. If it's not in the plates,
   it's not in the brand.
   ============================================================ */

:root {
  /* ---- color ------------------------------------------------
     Paper world (99% of the site) + one dark world (the tear).
     Signal red is the ONLY accent. No other hues exist. */
  --paper:        #F4F1EA;   /* page background */
  --paper-2:      #ECE8DD;   /* recessed zones, table stripes */
  --sheet:        #FBFAF6;   /* specimen sheets, cards, chips */
  --ink:          #16140F;   /* text, wordmark, buttons */
  --ink-60:       rgba(22, 20, 15, .60);  /* secondary text */
  --ink-35:       rgba(22, 20, 15, .35);  /* placeholder text */
  --red:          #DF351C;   /* signal red — accent, stamps, marker */
  --red-pressed:  #C22D18;   /* stamp ink pressed / hover */
  --dark:         #0D0B08;   /* the world inside the tear */

  /* ---- gradients --------------------------------------------
     BANNED. Zero gradients in UI. All depth and atmosphere live
     inside the video footage, never in CSS. */

  /* ---- line -------------------------------------------------
     Hairlines are the grid language of the lab. */
  --line:         rgba(22, 20, 15, .16);  /* background grid, rules */
  --line-strong:  rgba(22, 20, 15, .55);  /* sheet borders, dividers */
  --hairline:     1px;

  /* ---- radius -----------------------------------------------
     Paper artifacts are sharp. Pills are for actions only. */
  --r-0:    0;      /* sheets, cards, images, sections */
  --r-1:    3px;    /* chips, thumbnails, stamps */
  --r-pill: 999px;  /* buttons, floating chips — nothing else */
  /* DESIGN.md §5: only for a reveal WHILE it opens, and it must reach --r-0 at
     rest. A growing window with square corners reads as a hole cut in the page;
     with these it reads as a pane of glass. 14px because at the 624px start size
     it is visible as a softness and gone by the time the frame is full bleed —
     any larger and the opening frame reads as a rounded card, which §5 bans. */
  --r-reveal: 14px;

  /* ---- space (4px base) ------------------------------------ */
  --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; --s-12: 256px;
  --gutter: clamp(20px, 4vw, 64px);   /* page side margins */

  /* ---- type -------------------------------------------------
     Archivo (variable width): the Swiss voice + the compressed
     burst voice in one family. IBM Plex Mono: dossier annotations.
     Inter is banned. Serifs do not exist in this brand. */
  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  --text-display: clamp(2.75rem, 7.5vw, 7rem);     /* section headlines */
  --text-burst:   clamp(4rem, 16vw, 15rem);        /* HOOK 01 — burst only */
  --text-h2:      clamp(1.75rem, 3.6vw, 3rem);
  --text-body:    1.0625rem;
  --text-small:   .875rem;
  --text-label:   .75rem;      /* mono uppercase labels */
  --text-micro:   .6875rem;    /* FIG. 04, timecodes, captions */

  --track-tight:  -0.03em;     /* display */
  --track-body:   0;
  --track-label:  0.08em;      /* uppercase mono labels */
  --leading-display: 0.98;
  --leading-body:    1.55;

  /* ---- elevation --------------------------------------------
     Two shadows total: paper-on-paper, object-on-paper. */
  --shadow-paper:   0 1px 2px rgba(22,20,15,.07), 0 8px 28px rgba(22,20,15,.09);
  --shadow-object:  0 18px 44px rgba(22,20,15,.20);

  /* ---- motion -----------------------------------------------
     Paper physics: fast out, soft settle. Referenced by GSAP. */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.7, 0, .16, 1);
  --dur-1: .25s;   /* hover, chips */
  --dur-2: .6s;    /* reveals */
  --dur-3: 1.1s;   /* stamps, big settles */
}

/* ---- base ---------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: auto; } /* Lenis owns scrolling */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--red); color: var(--sheet); }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: var(--track-tight); }
p { margin: 0; }
a { color: inherit; }
img, video { max-width: 100%; display: block; }

/* ---- typography voices -------------------------------------- */
.display {
  font-size: var(--text-display);
  font-weight: 640;
  line-height: var(--leading-display);
  letter-spacing: var(--track-tight);
}
.burst-type {
  font-size: var(--text-burst);
  font-weight: 900;
  font-stretch: 62.5%;            /* the compressed Prime Time voice */
  line-height: .9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--sheet);
}
.label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}
.micro {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: .04em;
  color: var(--ink-60);
}

/* ---- lab furniture ------------------------------------------ */
/* background hairline grid — one vertical + horizontals, like the plates */
.grid-lines {
  position: relative;
}
.grid-lines::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) var(--hairline), transparent var(--hairline)),
    linear-gradient(90deg, var(--line) var(--hairline), transparent var(--hairline));
  background-size: 100% 33.33vh, 50% 100%;
  background-position: 0 0, 0 0;
}

.rule { border: 0; border-top: var(--hairline) solid var(--line-strong); margin: 0; }

.sheet {
  background: var(--sheet);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-0);
  box-shadow: var(--shadow-paper);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--sheet);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  box-shadow: var(--shadow-paper);
  font-size: var(--text-small);
}

.stamp {
  display: inline-block;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--red);
  border: .14em solid var(--red);
  border-radius: var(--r-1);
  padding: .1em .45em;
  transform: rotate(-8deg);
  mix-blend-mode: multiply;  /* presses into the paper */
}

/* ---- actions ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 560;
  border: 0;
  border-radius: var(--r-pill);
  padding: 14px 26px;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--red { background: var(--red); color: var(--sheet); }
.btn--red:hover { background: var(--red-pressed); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 var(--hairline) var(--line-strong);
}

/* ---- texture ------------------------------------------------- */
/* film grain — barely there; visible grain reads amateur */
.grain::after {
  content: '';
  position: fixed; inset: -50%;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .04;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}