/* Creating Kings brand. Change these and every page changes with them.
   Dark theme: near black page, white words, grey for quiet text. Colours come from the crown logo (grey to white).
   Fonts are hosted with the site (faster, and no visitor data goes to Google). To change the font, put its
   .woff2 files in /assets/fonts, point the @font-face lines at them and change --font-head and --font-body. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-latin.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: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/inter-tight-latin.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: 'Inter Tight'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/inter-tight-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  color-scheme: dark;
  --bg: #0a0a0a;           /* page */
  --soft: #0a0a0a;         /* same as the page: every section is the same black (Nate, 25 Oct) */
  --photo: #1a1a1a;        /* behind pictures */
  --ink: #f5f5f5;          /* headlines and main text */
  --sub: #a3a3a3;          /* sub lines and quiet text (keep it light enough: test/check-type.js checks contrast) */
  --line: #262626;         /* borders and dividers */
  --accent: #ffffff;       /* icons, ticks and eyebrow labels */
  --head-accent: #8f8f8f;  /* the grey words in headlines (the dark end of the crown) */
  --button: #ffffff;       /* buttons */
  --button-ink: #0a0a0a;   /* text on buttons */
  --button-hover: #d4d4d4;
  --star: #ffffff;         /* review stars */
  --error: #ff8a80;
  --error-bg: #2a1414;
  --font-head: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;  /* Helvetica-like capitals (Nate, 25 Oct) */
  --font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --head-weight: 700;
  --head-tracking: -0.02em;
}

/* The logo: crown mark plus the name in capitals, like the 7-Day Recode cover. */
/* Same everywhere: the header, the phone menu and the footer. */
a.logo { gap: 10px; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; }
a.logo .crown { width: 27px; height: auto; flex: none; }

/* Hero email form: the email box and the button side by side on wider screens, stacked on phones. */
.hero-form { max-width: 540px; margin: var(--gap-4) auto 0; text-align: left; }
.hero-form-row { display: grid; gap: 10px; }
@media (min-width: 600px) { .hero-form-row { grid-template-columns: 1fr auto; } }
.hero-form .form-note { margin: 2px 0 0; text-align: left; }