/* =========================================================================
   evannadeau.ca
   Direction: "Instrument". The page is a scale you traverse.

   Type: IBM Plex, self-hosted. Chosen because Plex was commissioned by IBM,
   whose world is the enterprise infrastructure this career was spent in.
   Mono carries every measured claim, so the numbers read as instrument
   output rather than marketing.

   Colour: warm-neutral ground, deep slate-green ink, and a single oxide
   signal used ONLY on numerals and the active rail node. Nothing else in
   the page is allowed that colour.
   ========================================================================= */

@font-face {
  font-family: "Plex Sans";
  src: url("fonts/plex-sans-var.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  --paper:  #F3F3F1;
  --ink:    #1B2422;
  --muted:  #5E645F;
  --rule:   #D6D8D3;
  --signal: #B33F22;

  --sans: "Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --measure: 34rem;
  --gap: clamp(4.5rem, 11vh, 8rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #131917;
    --ink:    #E7E9E4;
    --muted:  #8A918B;
    --rule:   #28302D;
    --signal: #E2734F;
  }
}

/* ---------- base ---------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(4rem, 12vh, 8rem) 1.5rem;
}

section { margin-bottom: var(--gap); }
section:last-child { margin-bottom: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--signal); color: var(--paper); }

/* ---------- type ---------- */

h1, h2, h3 { font-weight: 600; line-height: 1.12; margin: 0; }

h1 {
  font-size: clamp(3rem, 9vw, 5.2rem);
  letter-spacing: -0.04em;
  margin: 0.18em 0 0.3em;
}

h2 {
  font-size: clamp(1.7rem, 4.2vw, 2.15rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.5em;
}

h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  margin-bottom: 0.5em;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0;
}

.role {
  font-size: 1.0625rem;
  color: var(--muted);
  margin-bottom: 2.2em;
}

.lede {
  font-size: clamp(1.45rem, 3.4vw, 1.9rem);
  line-height: 1.35;
  letter-spacing: -0.018em;
  margin-bottom: 0.9em;
}

.lede-sm {
  font-size: 1.18rem;
  line-height: 1.55;
  margin-bottom: 2em;
}

.sub { color: var(--muted); max-width: 30rem; }

.closer {
  margin-top: 2.4em;
  padding-top: 1.6em;
  border-top: 1px solid var(--rule);
  color: var(--muted);
}

/* ---------- method ----------
   Each item is a statement of how he works, in display type, with the
   evidence underneath in a quieter voice. The statement is the point. */

.method { list-style: none; margin: 0; padding: 0; }

.method li {
  padding-top: 1.7rem;
  border-top: 1px solid var(--rule);
  margin-bottom: 3rem;
}
.method li:last-child { margin-bottom: 0; }

.method h3 {
  font-size: clamp(1.3rem, 3.4vw, 1.62rem);
  line-height: 1.25;
  letter-spacing: -0.021em;
  margin-bottom: 0.65em;
  max-width: 30ch;
}

.method p { color: var(--muted); }

/* ---------- strengths ----------
   The only place on the page wearing the signal colour, besides the active
   rail node. Five short labels, so it reads as a set rather than decoration. */

.strengths { margin: 0; }

.strengths dt {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 0.5em;
}

.strengths dd {
  margin: 0 0 1.9em;
  padding-bottom: 1.9em;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}
.strengths dd:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* ---------- calls to action ---------- */

.cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2.2em; }

.btn {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85em 1.3em;
  border: 1px solid var(--rule);
  color: var(--ink);
  transition: border-color .18s, color .18s, background-color .18s;
}
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.primary:hover { background: transparent; color: var(--ink); }

/* ---------- the scale rail (desktop enhancement) ---------- */

.rail { display: none; }

@media (min-width: 1100px) {
  .rail {
    display: block;
    position: fixed;
    /* Anchored to the text column, not the window, so it reads as the page's
       spine rather than a widget stranded in the left margin. */
    left: max(1.5rem, calc(50% - 23.5rem));
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }

  .rail-line {
    position: absolute;
    left: 3px;
    top: 0.55rem;
    bottom: 0.55rem;
    width: 1px;
    background: var(--rule);
  }
  .rail-fill {
    display: block;
    width: 100%;
    height: var(--progress, 0%);
    background: var(--signal);
    transition: height .12s linear;
  }

  .rail ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
    position: relative;
  }

  .rail a {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    opacity: 0.65;
    transition: opacity .2s, color .2s;
  }
  .rail a::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: none;
    border: 1px solid var(--rule);
    background: var(--paper);
    transition: background-color .2s, border-color .2s;
  }
  .rail a:hover { opacity: 1; }
  .rail a[aria-current="true"] { color: var(--ink); opacity: 1; }
  .rail a[aria-current="true"]::before {
    background: var(--signal);
    border-color: var(--signal);
  }
}

/* ---------- footer ---------- */

footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- a11y ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* ---------- motion ---------- */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease-out, transform .55s ease-out;
}
.js-reveal .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .rail-fill { transition: none; }
  .btn { transition: none; }
}