/* Sonic_Gio: design tokens (Slow Room). Phase 1. */

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/anton-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/archivo-latin-var.woff2") format("woff2");
}

:root {
  /* Colors */
  --bg: #12100E;
  --cream: #F4EADC;
  --sand: #CDB9A0;
  --orange: #E8601C;
  --orange-text: #F27A2E;
  --orange-hover: #F2A65A;
  --line: rgba(244, 234, 220, .5);
  --line-soft: rgba(244, 234, 220, .34);
  --glow: rgba(232, 96, 28, .65);
  --embers: radial-gradient(62% 72% at 68% 46%, #9A3A10 0%, #5A200B 42%, #12100E 80%);
  --veil-home: linear-gradient(90deg, rgba(18, 16, 14, .84) 0%, rgba(18, 16, 14, .66) 55%, rgba(18, 16, 14, .52) 100%);
  --veil-page: rgba(18, 16, 14, .8);
  --veil-play: rgba(18, 16, 14, .46);

  /* Type faces */
  --font-display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display-tracking: .005em;

  /* Type sizes */
  --fs-places: clamp(64px, min(15vh, 20vw), 136px);
  --lh-places: 1.03;
  --fs-title: clamp(64px, min(11vw, 20vh), 150px);
  --lh-title: 1.04;
  --fs-play: clamp(120px, min(44vw, 48vh), 400px);
  --lh-play: 1.02;
  --fs-chapter-1: clamp(50px, 8.4vw, 118px);
  --fs-chapter: clamp(42px, 6.4vw, 90px);
  --lh-chapter: 1.06;
  --fs-info-title: clamp(50px, min(7.4vw, 14vh), 104px);
  --lh-info-title: 1.05;
  --fs-set: clamp(30px, 3.6vw, 46px);
  --lh-set: 1.1;
  --fs-lead: clamp(26px, 3vw, 38px);
  --lh-lead: 1.16;
  --fs-body: clamp(19px, 1.9vw, 22px);
  --lh-body: 1.42;
  --measure-body: 720px;
  --fs-note: clamp(17px, 1.6vw, 19px);
  --lh-note: 1.34;
  --fs-menu: 15px;
  --menu-tracking: .06em;

  /* Spacing */
  --pad-x: clamp(20px, 5vw, 64px);

  /* Motion */
  --t-fast: .18s;
  --t-view: .6s;
}

@media (max-width: 760px) {
  :root {
    --fs-places: clamp(52px, 17vw, 68px);
    --fs-lead: 23px;
    --veil-home: rgba(18, 16, 14, .72);
  }
}

/* Small phones (320 to 360): set titles sit next to a thumbnail, so they get a little smaller */
@media (max-width: 360px) {
  :root {
    --fs-set: 26px;
  }
}