/* ═══════════════════════════════════════════════════════════════
   Materiaal — launching soon
   Palette + type live in :root. Change them there, not below.
   ═══════════════════════════════════════════════════════════════ */

/* Inter (variable, roman, latin subset) — SIL Open Font License 1.1.
   Same file the Materiaal docs site ships, so the two stay in step. */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/Inter-roman-latin-var.woff2") format("woff2");
}

:root {
  /* Brand */
  --black:      #141414;
  --off-white:  #FAFAF7;
  --grey:       #9A9A9A;
  --orange:     #FF5F00;   /* PANTONE Bright Orange C */

  /* Background pattern */
  --pattern-tile:    620px;  /* smaller = denser lines */
  --pattern-opacity: 0.11;   /* semi-transparent; 0 hides it */

  /* Ghosted icon watermark */
  --watermark-opacity: 0.06;

  /* Type */
  --font-display: "Anton", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
  --font-text:    "Inter var", Inter, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --gutter: clamp(1.5rem, 5.5vw, 5rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--black);
  color: var(--off-white);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Semi-transparent line pattern ────────────────────────────── */

.pattern {
  position: fixed;
  inset: -80px;                 /* overscan, so parallax never shows an edge */
  z-index: 0;
  pointer-events: none;

  background: url("assets/pattern-lines.svg") repeat;
  background-size: var(--pattern-tile) var(--pattern-tile);
  opacity: var(--pattern-opacity);

  /* Fade it out behind the type so the message stays legible */
  -webkit-mask-image: radial-gradient(115% 85% at 50% 42%,
                        rgba(0,0,0,.10) 0%, rgba(0,0,0,.35) 38%, #000 78%);
          mask-image: radial-gradient(115% 85% at 50% 42%,
                        rgba(0,0,0,.10) 0%, rgba(0,0,0,.35) 38%, #000 78%);

  /* Nudged by main.js on pointer move */
  translate: var(--pattern-x, 0px) var(--pattern-y, 0px);
  transition: translate .9s cubic-bezier(.22, 1, .36, 1);
}

/* ── Ghosted icon, bleeding off the right edge ────────────────── */

.watermark {
  position: fixed;
  z-index: 0;
  top: 50%;
  right: -8vw;
  height: min(56vh, 440px);
  width: auto;
  translate: 0 -50%;
  opacity: var(--watermark-opacity, .06);
  pointer-events: none;
  user-select: none;
}

/* ── Page frame ───────────────────────────────────────────────── */

.page {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  padding: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 8vh, 5rem);
}

/* ── Masthead ─────────────────────────────────────────────────── */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .9rem clamp(1rem, 3vw, 2rem);
}

.wordmark {
  display: block;
  width: clamp(168px, 24vw, 280px);
  height: auto;
}

.eyebrow {
  margin: 0;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey);
}

/* ── Headline ─────────────────────────────────────────────────── */

.headline {
  margin: auto 0;              /* centers it in the leftover space */
  max-width: 13ch;

  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.35rem, 7.4vw, 6.75rem);
  line-height: 1.04;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Highlighter streak */
.mark {
  position: relative;
  color: var(--black);
  padding-inline: .1em;
}

.mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: .17em -.05em .09em;
  background: var(--orange);
  rotate: -.7deg;
}

/* ── Contact ──────────────────────────────────────────────────── */

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem clamp(2rem, 7vw, 6rem);
  align-items: flex-start;
}

.contact__item {
  display: grid;
  gap: .7rem;
  justify-items: start;
}

.link {
  display: grid;
  gap: .45rem;
  text-decoration: none;
  color: inherit;
}

.link__label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey);
  transition: color .18s ease;
}

.link__value {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 450;
  color: var(--off-white);
  border-bottom: 1px solid rgba(250, 250, 247, .28);
  padding-bottom: .18em;
  transition: color .18s ease, border-color .18s ease;
}

.link:hover .link__label,
.link:focus-visible .link__label { color: var(--orange); }

.link:hover .link__value,
.link:focus-visible .link__value {
  color: var(--orange);
  border-color: var(--orange);
}

/* ── Focus + motion ───────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .pattern { translate: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Small screens ────────────────────────────────────────────── */

@media (max-width: 34rem) {
  :root { --pattern-tile: 420px; }

  /* The mark is wide (1.8:1), so at full height it bleeds off both
     edges on a phone. Shrink it and drop it into the gap between the
     headline and the contact block, still anchored right. */
  .watermark {
    top: auto;
    bottom: 21vh;
    translate: none;
    height: min(26vh, 200px);
    right: -8vw;
  }
  .headline { max-width: none; }
  .contact { flex-direction: column; gap: 1.6rem; }
}