/* 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%;
}

/* Licensed from Swiss Typefaces; the EULA requires the original .otf, self-hosted */
@font-face {
  font-family: "Suisse Works";
  src: url("../fonts/SuisseWorks-Medium.otf") format("opentype");
  font-display: swap;
  ascent-override: 98.6%;
  descent-override: 31.1%;
  line-gap-override: 0%;
}

/* Same vertical metrics as Suisse Works, so the alignment constants below hold for both */
@font-face {
  font-family: "Suisse Intl";
  src: url("../fonts/SuisseIntl-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
  ascent-override: 98.6%;
  descent-override: 31.1%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Suisse Intl";
  src: url("../fonts/SuisseIntl-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
  ascent-override: 98.6%;
  descent-override: 31.1%;
  line-gap-override: 0%;
}

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

  --color-bg: #03040f;
  --color-text: #d8d8d8;
  --color-muted: #9a9a9a;
  --color-accent: #c8c8c8;
  --color-title: #e2ff3d;
  --color-highlight: #e5ff4d; /* 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, Suisse Works at line-height 1.4 */
  --title-cap-top: 0.2585;
  --title-base-bottom: 0.0415;
  --text-cap-top: 0.3125;
  --text-base-bottom: 0.3625;

  --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: "Suisse Intl", "Helvetica Neue", Arial, sans-serif;
  --font-sans: 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-sans);
  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;
}

@media (min-width: 48rem) {
  :root {
    --text-size: clamp(0.875rem, 1.1vw, 1.125rem);
    --title-size: calc(var(--text-size) * var(--phi) * var(--phi) * var(--phi)); /* φ³ */
  }
}

@media (min-width: 80rem) {
  :root {
    --title-size: calc(var(--text-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: "BRRR Skrrt", var(--font-sans);
  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; the phrases set the measure. Narrow phones flow normally. */
@media (min-width: 22rem) {
  .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-weight: 500;
  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);
}