/* ============================================================
   nathanpaine.net
   Hand-written. No build step, no framework, no font files.
   Everything below is yours to edit — start with --patina.
   ============================================================ */

:root {
  --paper:  #e8eaec;   /* cool grey, deliberately not cream */
  --ink:    #14181d;   /* blue-black */
  --patina: #2f6f62;   /* verdigris — the one accent */
  --muted:  #5b646c;
  --rule:   #c3c8cc;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #14181d;
    --ink:    #e8eaec;
    --patina: #6fbfad;
    --muted:  #8b959d;
    --rule:   #2b3239;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- the plate ------------------------------------------- */

.plate {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vmin 5vw;
}

.plate__eyebrow {
  margin: 0 0 1.4rem;
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1.1vw, 0.8rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The name fills the viewport width at every size — that's the whole idea. */
.plate__name {
  margin: 0;
  font-size: 14.6vw;
  line-height: 0.92;
  font-weight: 400;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.plate__rule {
  height: 2px;
  margin: 3.2vmin 0 0;
  background: var(--patina);
  transform-origin: left center;
}

.plate__bio {
  max-width: 34ch;
  margin: 3.4vmin 0 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--muted);
}

/* ---- links ----------------------------------------------- */

.plate__links {
  margin-top: 4.6vmin;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}

.plate__link {
  position: relative;
  font-family: var(--mono);
  font-size: clamp(0.82rem, 1.3vw, 0.95rem);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 3px;
}

/* Underline grows from the left on hover — the rule motif, repeated small. */
.plate__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--patina);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms ease;
}

.plate__link:hover::after,
.plate__link:focus-visible::after { transform: scaleX(1); }

.plate__link:focus-visible {
  outline: 2px solid var(--patina);
  outline-offset: 5px;
  border-radius: 1px;
}

/* ---- load sequence --------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(0.5em); }
  to   { opacity: 1; transform: none; }
}

@keyframes draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.plate__eyebrow,
.plate__name,
.plate__bio,
.plate__links {
  animation: rise 700ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.plate__name  { animation-delay: 90ms; }
.plate__bio   { animation-delay: 520ms; }
.plate__links { animation-delay: 640ms; }

.plate__rule {
  animation: draw 760ms cubic-bezier(0.22, 0.61, 0.36, 1) 300ms backwards;
}

@media (prefers-reduced-motion: reduce) {
  .plate__eyebrow,
  .plate__name,
  .plate__bio,
  .plate__links,
  .plate__rule { animation: none; }
  .plate__link::after { transition: none; }
}