/* ============================================================
   1. THE TYPEFACE
   ------------------------------------------------------------
   Geist Variable is hosted locally from /fonts. It's a free
   OFL-licensed grotesque that sits close to Helvetica Medium.

   Want real Helvetica: buy a webfont licence, drop the file in
   /fonts and just change url() and --sans below.
   ============================================================ */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;      /* variable axis: one file, every weight */
  font-style: normal;
  font-display: swap;        /* text shows at once, swaps when the font lands */
}

:root {
  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ink: #111111;
  --mid: #6b6b6b;
  --line: #e4e4e4;
  --bg: #ffffff;

  /* The footer is dark — the same palette inverted. */
  --footer-bg: #0d0d0d;
  --footer-ink: #ededed;
  --footer-mid: #8f8f8f;
}

/* ============================================================
   2. BASE SETUP
   ============================================================ */

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;        /* svh: stays clear of the mobile browser bar */
  display: flex;
  flex-direction: column;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;   /* keeps text from looking bold on Mac */
  -moz-osx-font-smoothing: grayscale;
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ============================================================
   3. THE WORDMARK — sits both at the top and in the footer
   ============================================================ */

.logo {
  font-weight: 500;          /* Medium */
  letter-spacing: 0.04em;    /* the extra tracking */
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
}

/* The mark before the name. 0.71em is Geist's cap height, so the
   square measures exactly as tall as the capitals next to it, and
   sitting on the baseline lines its top and bottom up with them.
   currentColor keeps it the same colour as the name it belongs to:
   black at the top of the page, white down in the footer. */
.logo::before {
  content: "";
  display: inline-block;
  width: 0.71em;
  height: 0.71em;
  margin-right: 0.38em;      /* the 0.04em tracking adds to this */
  vertical-align: baseline;
  background: currentColor;
}

/* ============================================================
   4. THE TOP
   ============================================================ */

/* The bar itself runs full width and only sets the height; the .wrap
   inside handles the max-width and the side padding, so the mark here
   lands on the same left edge as the one in the footer. */
.topbar {
  padding: 40px 0;
}

/* Name left, year right, sitting on a shared baseline. */
.topbar .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

/* Set to match the wordmark opposite it. No colour of its own — it
   inherits the ink from body just as the wordmark does, so the two
   cannot drift apart. */
.year {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;    /* the wordmark's tracking; 0.12em belongs to 11px type */
  line-height: 1;
}

/* ============================================================
   5. THE PAGE — one line, centred in whatever is left
   ============================================================ */

main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 120px 32px;
}

main h1 {
  margin: 0;
  font-size: clamp(48px, 9vw, 88px);
  font-weight: 500;
  letter-spacing: -0.02em;   /* large headings tighten in, never out */
  line-height: 1.05;
  text-align: center;
}

/* The three dots trail off with a widening gap, so the line reads as
   though it drifts away. Set in em, so the spacing scales with the
   clamp() on the heading instead of drifting at small sizes. */
.dot { margin-left: 0.22em; }
.dot + .dot { margin-left: 0.42em; }
.dot + .dot + .dot { margin-left: 0.62em; }

/* ============================================================
   6. THE FOOTER
   ============================================================ */

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
}

.footer-top {
  display: grid;
  /* The brand block soaks up the slack, so the two link columns
     get pushed over to the right edge and sit as wide as their
     longest link — no trailing air after the last one. */
  grid-template-columns: 1fr auto auto;
  gap: 64px 80px;
  padding: 88px 32px 72px;
}

/* --- Left block: name and description --- */

/* Pure white here, a step brighter than the links around it, so the
   name and its mark read as the brightest thing in the footer. */
.footer-brand .logo {
  color: #ffffff;
  margin-bottom: 24px;
}

.footer-desc {
  color: var(--footer-mid);
  max-width: 42ch;
  margin: 0;
}

/* --- The three columns --- */

.footer-col h2 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--footer-mid);
  margin: 0 0 28px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li + li { margin-top: 14px; }

.footer-col a {
  color: var(--footer-ink);
  text-decoration: none;
}

.footer-col a:hover { color: #ffffff; text-decoration: underline; }

/* --- The bottom line --- */

.footer-bottom {
  padding: 28px 32px 40px;
}

.copyright {
  margin: 0;
  font-size: 15px;
  color: var(--footer-mid);
}

/* ============================================================
   7. SMALLER SCREENS
   ============================================================ */

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 56px 40px;
    padding-top: 72px;
  }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
}