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

* {
  margin: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

/* Fonts */
@font-face {
  font-family: "BRRR Skrrt";
  src: url("../fonts/BRRR-Skrrt.otf") format("opentype");
  font-display: swap;
  /* Pinned vertical metrics (hhea) so the grid alignment below is identical in every browser */
  ascent-override: 114.4%;
  descent-override: 22.7%;
  line-gap-override: 0%;
}

/* Tokens */
:root {
  color-scheme: dark;

  --color-bg: #03040f;
  --color-text: #d8d8d8;
  --color-muted: #9a9a9a;
  --color-accent: #c8c8c8;
  --color-title: #ccff00;
  --color-highlight: #d2ff1a; /* text accents, a touch lighter than the shader title */
  --color-title-white: #e2e2e2;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 3.5rem;

  /* Page margin and gutter in golden ratio */
  --margin: clamp(1rem, 5vw, 5rem);
  --gutter: calc(var(--margin) / var(--phi));

  /* Where cap tops and baselines sit inside a line box, in em, from the pinned font metrics:
     BRRR at line-height 1 (title) and at line-height 1.4 (text) */
  --title-cap-top: 0.2585;
  --title-base-bottom: 0.0415;
  --text-cap-top: 0.4585;
  --text-base-bottom: 0.2415;

  --max-width: 70rem;

  /* Type scale: title = text × φⁿ (golden ratio) */
  --phi: 1.618;
  --text-size: 1rem;
  --lead-size: clamp(1rem, 1.5vw, 1.25rem);
  /* Phones: the widest word ("Systems", ≈ 5.8em) spans the content width ÷ ⁴√φ, at most φ³ */
  --title-size: min(calc((100vw - 2 * var(--margin)) / 5.8 / 1.128), calc(var(--text-size) * var(--phi) * var(--phi) * var(--phi)));
  --font-text: "BRRR Skrrt", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Base */
/* No rubber-band bounce (iOS Safari): the page fits the screen, there is nothing to scroll */
html,
body {
  overscroll-behavior: none;
}

body {
  font-family: var(--font-text);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

/* Layout */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--margin);
}

/* Phones: title and text centred in the free space, address and email stacked at the bottom */
.hero > .title,
.corners {
  margin-top: auto;
}

.corners {
  display: grid;
  gap: var(--space-2);
}

/* 13-column grid from 60rem. Free space above : below the content is 1 : φ (golden section).
   The text starts at the cap height of "Systems". */
@media (min-width: 60rem) {
  .hero {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: 1fr auto 1.618fr;
    align-content: stretch;
    align-items: start;
    column-gap: var(--gutter);
    row-gap: 0;
  }

  .hero > .title {
    margin-top: 0;
  }

  /* Address bottom left, email under the text column, on one baseline at the bottom margin. They sit inside
     the lower free space, so the golden section is measured on the full page height; if they need
     more room than that space, the row grows instead of overlapping. */
  .corners {
    display: contents;
  }

  .corner {
    grid-row: 3;
    align-self: end;
  }

  .corner-left {
    grid-column: 1 / span 6;
  }

  /* Email starts on the text column's left edge */
  .corner-right {
    grid-column: 8 / -1;
  }

  .hero .title {
    grid-row: 2;
    grid-column: 1 / span 7;
  }

  /* The text box spans from the cap height of "Systems" to the baseline of "Attitude"; inside it the
     free space above : below the paragraph is 1 : φ. If the paragraph is taller
     than the title, the spacers collapse and it simply starts at the cap height. */
  .hero .intro {
    grid-row: 2;
    grid-column: 8 / span 6;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: calc(var(--title-cap-top) * var(--title-size) - var(--text-cap-top) * var(--lead-size));
    margin-bottom: calc(var(--title-base-bottom) * var(--title-size) - var(--text-base-bottom) * var(--lead-size));
  }

  .hero .intro::before,
  .hero .intro::after {
    content: "";
    flex: 1;
  }

  .hero .intro::after {
    flex-grow: var(--phi);
  }

}

/* One word per line; nudge "with" down so the descender of "Systems" doesn't crowd it */
.title span {
  display: block;
}

.title-with {
  position: relative;
  top: 0.05em;
}

/* Tablets: as on phones, but up to φ⁴ */
@media (min-width: 48rem) {
  :root {
    --text-size: clamp(0.875rem, 1.1vw, 1.125rem);
    --title-size: min(calc((100vw - 2 * var(--margin)) / 5.8 / 1.128), calc(var(--text-size) * var(--phi) * var(--phi) * var(--phi) * var(--phi)));
  }
}

/* Two columns: title = text × φ³. The text is as large as both columns allow: the widest word
   ("Systems", ≈ 5.8em) fits the title's columns and the widest phrase (≈ 24.5em) the text's.
   The clamp keeps the text readable; at its limits the title only gets smaller than its columns. */
@media (min-width: 60rem) {
  :root {
    --col: calc((100vw - 2 * var(--margin) - 12 * var(--gutter)) / 13);
    --title-fit: calc((7 * var(--col) + 6 * var(--gutter)) / 5.8);
    --text-fit: calc((6 * var(--col) + 5 * var(--gutter)) / 24.5);
    --lead-size: clamp(1rem, min(var(--title-fit) / 4.236, var(--text-fit)), 1.25rem);
    --title-size: calc(var(--lead-size) * var(--phi) * var(--phi) * var(--phi)); /* φ³ */
  }
}

/* Wide screens: title = text × φ⁴, on 8 columns; text on 5 */
@media (min-width: 80rem) {
  :root {
    --title-fit: calc((8 * var(--col) + 7 * var(--gutter)) / 5.8);
    --text-fit: calc((5 * var(--col) + 4 * var(--gutter)) / 24.5);
    --lead-size: clamp(1rem, min(var(--title-fit) / 6.854, var(--text-fit)), 1.5rem);
    --title-size: calc(var(--lead-size) * var(--phi) * var(--phi) * var(--phi) * var(--phi)); /* φ⁴ */
  }

  /* Title : text = 8 : 5 columns (Fibonacci, ≈ φ) */
  .hero .title {
    grid-column: 1 / span 8;
  }

  .hero .intro,
  .corner-right {
    grid-column: 9 / span 5;
  }
}


.title {
  font-family: var(--font-text);
  font-size: var(--title-size);
  font-weight: normal;
  line-height: 1;
  color: var(--color-title-white);
}

.title-accent {
  color: var(--color-title);
}

.intro {
  display: grid;
  gap: var(--space-4);
  font-family: var(--font-text);
  font-size: var(--text-size);
  line-height: 1.4;
}

.lead {
  font-size: var(--lead-size);
}

.lead {
  font-weight: 400;
}

/* Soft dark halo: keeps the text readable (WCAG 4.5:1) where a bright blob passes behind it */
.lead,
.corner {
  text-shadow:
    0 0 0.15em rgb(3 4 15 / 0.6),
    0 0 0.6em rgb(3 4 15 / 0.5);
}

/* One phrase per line once they fit (widest ≈ 24.5em, at 90% content width); the phrases set the measure.
   Narrower phones flow normally. */
@media (min-width: 28rem) {
  .lead .line {
    display: block;
  }

  /* Small pause between the two sentences: line height ÷ φ² */
  .lead .new-sentence {
    margin-top: calc(1.4em / var(--phi) / var(--phi));
  }
}

/* Keep each phrase whole in two-column mode; any overflow is a few px into the page margin */
@media (min-width: 60rem) {
  .lead .line {
    white-space: nowrap;
  }
}

.hl {
  color: var(--color-highlight);
}

/* Corner small print: same face and size as the paragraph */
.corner {
  font-family: var(--font-text);
  font-size: var(--lead-size);
  font-style: normal;
  line-height: 1.4;
}

.corner a {
  color: var(--color-highlight);
  text-decoration: none;
  text-underline-offset: 0.2em;
}

.corner a:hover,
.corner a:focus-visible {
  text-decoration: underline;
}

/* Drawn by the shader (js/sketch.js); the HTML text stays for layout and accessibility */
.shader-title .title,
.shader-title .title span {
  color: transparent;
}

/* Utilities */
.lowercase {
  text-transform: lowercase;
}

.nowrap {
  white-space: nowrap;
}

/* Shader background */
#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Always fill the screen, also while a resize is pending (p5 sets pixel sizes inline) */
  width: 100% !important;
  height: 100% !important;
}

/* Layout grid overlay (js/grid-overlay.js): shares .hero's padding and columns */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  grid-template-rows: 1fr;
  align-content: stretch;
  align-items: stretch;
  pointer-events: none;
  visibility: hidden;
}

.show-grid .grid-overlay {
  visibility: visible;
}

.grid-col {
  background: rgb(255 80 160 / 0.12);
  border-inline: 1px solid rgb(255 80 160 / 0.6);
}

/* Single column below 60rem */
@media (max-width: 59.999rem) {
  .grid-col + .grid-col {
    display: none;
  }
}

.grid-col {
  grid-row: 1;
  flex: 1;
}

.show-grid .title,
.show-grid .lead,
.show-grid .corner {
  outline: 1px dashed rgb(0 255 255 / 0.8);
}