/* Display face built from the speaker-badge lettering. The slant is drawn into the
   outlines, so the face is registered as normal/400 and synthesis is turned off. */
@font-face {
  font-family: "Infinity";
  src: url("/assets/fonts/infinity-bolditalic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* The line under the badge lettering: Michroma, an extended faceplate-style sans,
   SIL OFL 1.1 (see OFL-Michroma.txt). */
@font-face {
  font-family: "Michroma";
  src: url("/assets/fonts/michroma-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0e141c;
  /* Ink colour: measured from the badge photos (#f39373), saturation raised from 0.53 to 0.62 */
  --ink: #f3825c;
  --fg: #e8edf3;
  --muted: #a9b4c2;
  /* Neutral dark grey for the line under the heading: about 3:1 on the fog behind it */
  --tagline: #74787d;
  /* Heading size, shared with the layout rule that positions the heading */
  --brand-size: clamp(1.75rem, 7.5vw, 6.5rem);
  /* Vertical position of the heading centre, as a fraction of the viewport height */
  --brand-y: 0.40;
  /* Soft drop shadow behind both lines, as if the lettering stands slightly off the scene
     with the light above-left. Offsets and blur are in em, so they scale with each line. */
  --shadow-x: 0.06em;
  --shadow-y: 0.11em;
  --shadow-blur: 0.3em;
  --shadow-opacity: 0.85;
  --link: #9cc4ff;
  --link-hover: #c7ddff;
  /* Strength of the dark overlay on the background image: 0 = none, 1 = black */
  --tint: 0.50;
  color-scheme: dark;
}

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

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html {
  height: 100%;
  background: var(--bg);
}

body {
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

/* Home page: fixed, viewport-locked night road background with a tint overlay */
body.scene {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* clip, unlike hidden, also stops script and focus scrolling into the cast shadows */
  overflow: clip;
  isolation: isolate;
}

body.scene::before,
body.scene::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body.scene::before {
  background-color: var(--bg);
  background-image: url("/assets/img/bg-2560.jpg");
  background-image: image-set(
    url("/assets/img/bg-2560.webp") type("image/webp"),
    url("/assets/img/bg-2560.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Extra desaturation on the image layer only; the text is not affected */
  filter: saturate(0.6);
}

@media (max-width: 1280px) and (orientation: landscape) {
  body.scene::before {
    background-image: url("/assets/img/bg-1280.jpg");
    background-image: image-set(
      url("/assets/img/bg-1280.webp") type("image/webp"),
      url("/assets/img/bg-1280.jpg") type("image/jpeg")
    );
  }
}

@media (orientation: portrait) {
  body.scene::before {
    background-image: url("/assets/img/bg-portrait-1080.jpg");
    background-image: image-set(
      url("/assets/img/bg-portrait-1080.webp") type("image/webp"),
      url("/assets/img/bg-portrait-1080.jpg") type("image/jpeg")
    );
  }
}

body.scene::after {
  background:
    linear-gradient(
      to bottom,
      rgba(6, 10, 16, calc(var(--tint) * 0.8)) 0%,
      rgba(6, 10, 16, 0) 32%,
      rgba(6, 10, 16, 0) 68%,
      rgba(6, 10, 16, calc(var(--tint) * 0.9)) 100%
    ),
    rgba(6, 10, 16, var(--tint));
}

.center {
  width: 100%;
  max-width: 40rem;
  text-align: center;
  overflow-wrap: break-word;
}

body.scene {
  align-items: flex-start;
}

/* The heading's vertical centre sits --brand-y down the viewport
   (0.525 = half the heading's 1.05 line height). */
body.scene .center {
  margin-top: calc(var(--brand-y) * 100vh - 0.525 * var(--brand-size));
  margin-top: calc(var(--brand-y) * 100dvh - 0.525 * var(--brand-size));
  max-width: 72rem;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  margin: 0.25rem 0;
}

.brand {
  margin: 0 0 0.35em;
  font-family: "Infinity", system-ui, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  /* "DIRK ENTERPRISES" is about 8.9em wide: 7.5vw keeps it on one line down to phones */
  font-size: var(--brand-size);
  line-height: 1.05;
  overflow-wrap: normal;
  letter-spacing: 0;
  /* Infinity has capitals only */
  text-transform: uppercase;
  color: var(--ink);
}

.tagline {
  margin: 0;
  /* Tracking adds space after the last letter too; this offsets it so the line stays centred */
  margin-right: -0.12em;
  font-family: "Michroma", system-ui, sans-serif;
  font-weight: 400;
  /* About a quarter of the heading size, never below 0.95rem on phones */
  font-size: clamp(0.95rem, calc(var(--brand-size) * 0.27), 1.75rem);
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tagline);
}

/* Soft shadow: a tight, faint contact layer plus a wide, diffuse layer offset down-right.
   No letter detail, just the sense that the type sits in front of the scene. */
.cast {
  text-shadow:
    calc(var(--shadow-x) * 0.3) calc(var(--shadow-y) * 0.3) calc(var(--shadow-blur) * 0.25) rgba(0, 0, 0, calc(var(--shadow-opacity) * 0.6)),
    var(--shadow-x) var(--shadow-y) var(--shadow-blur) rgba(0, 0, 0, var(--shadow-opacity));
}

.muted {
  color: var(--muted);
}

a {
  color: var(--link);
}

a:hover,
a:focus-visible {
  color: var(--link-hover);
}