/* Subroom Agency - base styles.
   Lines 1-167 of the main site's design system (SUBROOM PAGE MAIN/_design-preview/subroom.css):
   tokens, reset, layout, type, kickers and buttons, unchanged. Then the fonts,
   served from this server (no request to any other host). */

/* ==========================================================================
   SUBROOM RECORDS - design system
   Brand: black ground, white type, single green accent (#1DBF6A).
   Type:  Encode Sans Expanded (display) / Encode Sans (text).
   ========================================================================== */

:root{
  /* ground */
  --ink:        #050506;
  --ink-2:      #0B0B0F;
  --ink-3:      #121218;
  --line:       rgba(255,255,255,.12);
  --line-soft:  rgba(255,255,255,.06);

  /* type */
  --fg:         #FFFFFF;
  --fg-dim:     rgba(255,255,255,.72);
  --muted:      #83838F;

  /* accent */
  --accent:     #1DBF6A;
  --accent-dim: rgba(29,191,106,.18);
  --accent-ink: #04140C;

  /* families */
  --display: "Encode Sans Expanded", "Encode Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text:    "Encode Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* rhythm */
  --gutter:  clamp(1.25rem, 4vw, 3.5rem);
  --shell:   1680px;
  --section: clamp(4.5rem, 10vw, 9rem);
  --radius:  2px;

  /* motion */
  --ease: cubic-bezier(.2,.7,.3,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--fg-dim);
  font-family:var(--text);
  font-size:1rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--accent); color:var(--accent-ink); }

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

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

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell--narrow{ max-width:860px; }

.section{ padding-block:var(--section); }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }
.section + .section{ border-top:1px solid var(--line-soft); }

/* ---------------------------------------------------------------- type --- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--fg);
  margin:0 0 .5em;
  text-wrap:balance;
}

.display{
  font-size:clamp(2.5rem, 7.5vw, 6.5rem);
  text-transform:uppercase;
  letter-spacing:-.035em;
  line-height:.95;
}
.h2{ font-size:clamp(1.9rem, 4vw, 3.25rem); text-transform:uppercase; }
.h3{ font-size:clamp(1.2rem, 2vw, 1.6rem); }

p{ margin:0 0 1.25em; max-width:62ch; }
.lead{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--fg-dim); }

/* small caps label - the connective tissue of the whole design */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:.65em;
  font-family:var(--text);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.5rem;
}
.kicker::before{
  content:"";
  width:1.75rem; height:1px;
  background:var(--accent);
  flex:0 0 auto;
}
.kicker--plain::before{ display:none; }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
  margin-bottom:clamp(2rem,4vw,3.5rem);
}
.section-head p{ margin-bottom:0; }

/* -------------------------------------------------------------- buttons -- */

.btn{
  --btn-bg:var(--accent);
  --btn-fg:var(--accent-ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7em;
  padding:1.05em 2.1em;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--text);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1;
  border-radius:var(--radius);
  border:1px solid var(--btn-bg);
  transition:transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--fg);
  border-color:var(--line);
}
.btn--ghost:hover{ border-color:var(--fg); background:var(--fg); color:var(--ink); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* ---------------------------------------------------------------- fonts -- */
@font-face{ font-family:"Encode Sans"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/encode-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Encode Sans"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/encode-sans-latin-400-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Encode Sans"; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/encode-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Encode Sans"; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/encode-sans-latin-600-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Encode Sans"; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/encode-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Encode Sans"; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/encode-sans-latin-700-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Encode Sans Expanded"; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/encode-sans-expanded-latin-ext-700-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Encode Sans Expanded"; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/encode-sans-expanded-latin-700-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Encode Sans Expanded"; font-style:normal; font-weight:800; font-display:swap; src:url(../fonts/encode-sans-expanded-latin-ext-800-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Encode Sans Expanded"; font-style:normal; font-weight:800; font-display:swap; src:url(../fonts/encode-sans-expanded-latin-800-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"VT323"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/vt323-latin-ext-400-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"VT323"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/vt323-latin-400-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root{ --tour:#c91832; --osd:"VT323", ui-monospace, monospace; }