@import "/portfolio/css/tokens.css";

/* Site-root front door — shares the portfolio token system, minus the
   portfolio chrome. Minimal base + typography only. */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: var(--leading-body);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; opacity: 0.85; }
img { max-width: 100%; height: auto; display: block; }

.container {
  width: min(100% - 2rem, var(--width-content));
  margin-inline: auto;
  padding: var(--space-8) var(--space-4);
}

.centered { text-align: center; }

h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, var(--text-3xl));
  font-stretch: 125%;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--white);
  font-weight: 700;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--white);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--accent);
  font-weight: 600;
  margin: var(--space-6) 0 var(--space-3);
}

p { margin-bottom: var(--space-4); max-width: 68ch; }
.centered p, p.centered { max-width: none; }

strong { color: var(--white); font-weight: 700; }

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

/* Intro block */
.tldr {
  text-align: center;
  margin-bottom: var(--space-6);
}
.tldr p { max-width: none; }
.tldr .tagline { color: var(--muted); font-size: var(--text-lg); }

/* Body prose sits centered in a readable measure */
main.container > div:not(.tldr) {
  max-width: var(--width-prose);
  margin-inline: auto;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 720px) {
  .container { padding: var(--space-6) var(--space-4) var(--space-8); }
}