/* ============================================================
   Contagious Experiences - design tokens
   v1  |  12 September 2026
   Palette locked 11 Sep (Option B). Type is launch-tier, see note.

   Drop this in first and reference the variables everywhere.
   Nothing in the build should carry a raw hex value or a raw px
   font size. That is what makes the later font swap one edit
   instead of a rebuild.
   ============================================================ */

:root {

  /* ---------- colour ----------------------------------------
     Violet is for things you can click. Buttons, links, hovers,
     the active video thumbnail, focus rings. It is never a
     section background, never a divider, never an icon tint on
     something static. If violet appears on something inert, the
     system has broken.
     ---------------------------------------------------------- */

  --ground:        #0A0A0B;   /* page background, near-black not pure black */
  --panel:         #161619;   /* raised surfaces, cards, video thumbnails   */
  --panel-hi:      #202024;   /* hover state on a panel                     */
  --line:          #2A2A2E;   /* hairlines and dividers                     */

  --text:          #F4F3F1;   /* headlines and body on dark   17.85:1 AA    */
  --dim:      	   #9C978E;   /* secondary copy, captions      6.4:1  AA    */
  --bone:          #DDD1C3;   /* eyebrows, small caps, rules  13.18:1 AA    */

  --accent:        #B36BFF;   /* interactive only              6.09:1 AA    */
  --accent-hi:     #C594FF;
  --accent-press:  #9B4FF0;

  /* Light panel, used once on the homepage "the moment" section.
     This inversion is the page's one structural surprise. Do not
     reuse it elsewhere or it stops being a surprise. */
  --invert-bg:     #F4F3F1;
  --invert-ink:    #0A0A0B;
  --invert-dim:    #5E574E;
  --invert-text:   #0A0A0B;

  /* Type ON the accent is near-black. White on violet is 3.25:1
     and fails AA. This is not a preference. */
  --on-accent:     #0A0A0B;

  --focus:         #C594FF;   /* focus ring, must stay visible on both grounds */
  --error:         #E08B76;   /* form validation messages      7.6:1  AA    */


  /* ---------- type ------------------------------------------
     LAUNCH TIER. Newsreader and IBM Plex Sans are the free
     stand-ins. The licensed faces go in these two variables and
     nowhere else, so the swap is two lines.

     Licensed target:  --font-display: "Tiempos Headline"
                       --font-ui:      "Founders Grotesk"

     The wordmark must be a fixed SVG, not live text set in
     --font-display, or licensing later means redrawing it.
     ---------------------------------------------------------- */

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui:      "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* The serif makes every statement. The sans does nav, buttons,
     labels and captions, and never sets a headline or a paragraph
     longer than three lines. That inversion is what stops this
     reading as VaynerSpeakers, which is all sans. */

  --size-hero:    clamp(2.6rem, 6.4vw, 5.2rem);   /* display, hero only     */
  --size-h1:      clamp(2.1rem, 4.6vw, 3.4rem);   /* display, section leads */
  --size-h2:      clamp(1.5rem, 3vw, 2.1rem);     /* display                */
  --size-h3:      1.4rem;                         /* display                */
  --size-body:    1.125rem;                       /* ui  18px               */
  --size-small:   1rem;                           /* ui  16px               */
  --size-label:   0.8125rem;                      /* ui, uppercase  13px    */
  --size-eyebrow: 1.0625rem;                      /* ui, uppercase  17px    */
  --size-mark:    clamp(1.12rem, 1.9vw, 1.45rem); /* display, header name   */
  --size-mark-tag: 0.75rem;                       /* ui, header tagline 12px */
  --size-nav:     1.0625rem;                      /* ui, header nav  17px   */

  /* Eyebrow, header name, tagline and nav were enlarged about 1.3x on
     15 Oct at Chris and team's request (they were label-sized before).
     Buttons and the footer keep their smaller sizes. */

  /* Body, small and label were each lifted one step on 14 Sep after Laura
     read the mockup and found the small type hard going. Headlines were
     left alone. Do not quietly shrink these back to fit more in. */

  --lh-display:   1.04;
  --lh-body:      1.62;
  --track-display: -0.015em;
  --track-label:   0.17em;   /* uppercase eyebrows need the air */

  --measure:      62ch;      /* never run body copy wider than this */


  /* ---------- space, an 8pt scale --------------------------- */

  --1:  0.5rem;
  --2:  1rem;
  --3:  1.5rem;
  --4:  2rem;
  --6:  3rem;
  --8:  4rem;
  --12: 6rem;
  --16: 8rem;      /* vertical rhythm between homepage sections */

  --gutter: max(1.25rem, 4vw);
  --maxw:   1280px;


  /* ---------- shape and motion ------------------------------
     Near-square corners. Rounded reads friendly, and this brand
     is not friendly, it is composed.
     ---------------------------------------------------------- */

  --radius:     2px;
  --radius-img: 0;

  --ease:     cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur:      240ms;
}


/* ============================================================
   Temporary
   ============================================================ */

/* ---------- mockup banner ---------- */
.banner{background:#1C1520;border-bottom:1px solid #3A2A46;
  padding:11px var(--gutter);font-size:13.5px;color:#CBB8DC;
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;font-family:var(--font-ui)}
.banner b{color:var(--accent-hi);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-size:12px}


/* ============================================================
   Base
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }

*{box-sizing:border-box}

body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
  margin: 0;
}

p { max-width: var(--measure); }

img, video { max-width: 100%; height: auto; display: block; }


/* ---------- eyebrow / small caps label ---------------------- */

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bone);
}


/* ---------- buttons ----------------------------------------
   Primary carries near-black type on violet. Secondary is a
   bone hairline that fills on hover. There is no third button.
   ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--1);
  font-family: var(--font-ui);
  font-size: var(--size-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 1.05rem 1.9rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn--primary:hover  { 
	background: var(--accent-hi); 
	color: var(--on-accent);
}
.btn--primary:active { 
	background: var(--accent-press); 
	
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--bone);
}
.btn--ghost:hover {
  background: var(--bone);
  color: var(--ground);
  border-color: var(--bone);
}


/* ---------- links ------------------------------------------- */

a { 
	color: var(--accent); 
	/* text-underline-offset: 0.22em; 
	text-decoration-thickness: 1px; */
	text-decoration: none;
}
a:hover { 
	color: var(--accent-hi); 
}


/* ---------- focus, never remove this ------------------------ */

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}


/* ---------- the one light section --------------------------- */

.invert {
  background: var(--invert-bg);
  color: var(--invert-text);
}
.invert .eyebrow { color: #6B645A; }
.invert .btn--ghost { color: var(--invert-text); border-color: var(--invert-text); }





/* ---------- video ------------------------------------------
   Every looping video needs a poster frame. Mobile browsers
   block autoplay in places and the hero has to survive it.
   ------------------------------------------------------------ */

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease);
}
.thumb:hover,
.thumb[aria-current="true"] { border-color: var(--accent); }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__video { display: none; }     /* poster image shows instead */
}

/* ---------- layout ------------------------------------------ */

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--12); }

@media (max-width: 640px) {
  .section { padding-block: var(--8); }
}