/* ─────────────────────────────────────────────────────────────────────────────
   My Work Here Is — teaser page
   Brand tokens and fonts copied from the Prelaunch site (app/globals.css).
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "League Spartan";
  src: url("/fonts/LeagueSpartan-VariableFont_wght.ttf") format("truetype-variations"),
       url("/fonts/LeagueSpartan-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/SourceSans3-VariableFont_wght.ttf") format("truetype-variations"),
       url("/fonts/SourceSans3-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-midnight: #0A0A0A;
  --color-white:    #FAFAF8;
  --color-quiet:    #C9C9C4;
  --color-green:    #005F54;

  --fg-1: var(--color-midnight);
  --fg-2: #3A3A38;
  --fg-3: #6A6A66;

  --font-headline: "League Spartan", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-body:     "Source Sans 3", "Source Sans Pro", system-ui, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--color-green); color: var(--color-white); }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 32px; }
@media (max-width: 720px) { .container { padding-inline: 20px; } }

main { flex: 1; display: flex; align-items: center; padding: 96px 0; }
@media (max-width: 720px) { main { padding: 56px 0; } }

.eyebrow {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 28px;
}

/* The lockup set in type: two lines, then the blank drawn as the bracket.
   Green is reserved for the blank, as on the lockup and the favicon. */
.wordmark {
  font-family: var(--font-headline); font-weight: 700;
  font-size: clamp(56px, 11vw, 144px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0;
}
.wordmark span { display: block; }

.blank {
  display: block;
  width: 3.9em;               /* the lockup's bracket spans "my work" */
  max-width: 100%;
  height: 0.3em;
  margin-top: 0.22em;
  border: 0.11em solid var(--color-green);
  border-top: 0;
}

.lede {
  font-size: clamp(19px, 1.2vw + .5rem, 24px);
  line-height: 1.45;
  color: var(--fg-2);
  max-width: 34ch;
  margin: 40px 0 0;
  text-wrap: pretty;
}

footer {
  padding: 24px 0 32px;
  border-top: 1px solid var(--color-quiet);
  font-size: 14px;
  color: var(--fg-3);
}
footer p { margin: 0; }