/* Eetu Netti — eetunetti.com
   Plain CSS, no build step. Fonts self-hosted in /assets/fonts (IBM Plex, OFL). */

@font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-italic.woff2") format("woff2"); font-weight: 100 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  --bg:    #F4F2EC;
  --ink:   #141414;
  --muted: #6E6B64;
  --sans: "Plex Sans", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Plex Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --ink: #ECEAE4; --muted: #9B9891; }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 clamp(0.9375rem, 0.85rem + 0.45vw, 1.0625rem)/1.6 var(--sans); }
::selection { background: var(--ink); color: var(--bg); }

/* Background field: contour lines + pointer-following cross grid. Drawn by field.js. */
.field {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  height: 100lvh; /* iOS: extend under the collapsible toolbar */
  z-index: -1; pointer-events: none;
}

.page {
  position: relative;
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 6rem) clamp(1.25rem, 6vw, 4rem) 3rem;
  padding: calc(clamp(2.5rem, 8vw, 6rem) + env(safe-area-inset-top))
           calc(clamp(1.25rem, 6vw, 4rem) + env(safe-area-inset-right))
           calc(3rem + env(safe-area-inset-bottom))
           calc(clamp(1.25rem, 6vw, 4rem) + env(safe-area-inset-left));
}

hr { border: 0; border-top: 1px solid var(--ink); margin: clamp(2rem, 5vw, 3.5rem) 0; }

/* Masthead */
.masthead { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.name {
  font: 600 clamp(2.5rem, 7vw, 5.5rem)/1 var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  letter-spacing: -0.01em;
  margin: 0 0 .25rem;
}
.meta {
  font: italic 400 1rem/1.6 var(--mono);
  letter-spacing: 0.01em;
  margin: 0;
}
.meta .sep { padding: 0 0.35em; }

.portrait { width: clamp(5rem, 14vw, 10rem); aspect-ratio: 1; margin: 0; }
.portrait img { display: block; width: 100%; height: 100%; border-radius: 50%; }

/* Bio: full column width */
.bio p { margin: 0 0 1.25em; }
.bio p:last-child { margin-bottom: 0; }

/* Index rows with dot leaders (leader lives inside dt so it always sits on the label baseline) */
.index { margin: 0; }
/* .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 60%); column-gap: 0.75rem; align-items: start; } */
.row + .row { margin-top: 0.9rem; }
.row dt {
  color: var(--ink);
  font: 600 1.5rem/1.6 var(--serif); 
  display: flex; align-items: baseline; gap: 0.75rem;
  font-style: normal;  letter-spacing: 0.01em;
  line-height: calc(1.3rem * 1.6);
  white-space: nowrap;
}
.row dd { margin: 0; }

/* Links */
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover, a:focus-visible { background: var(--ink); color: var(--bg); text-decoration: none; outline: none; }

/* Colophon */
.colophon { font: italic 400 0.8125rem/1.6 var(--mono); color: var(--muted); letter-spacing: 0.01em; }
.colophon p { margin: 0; }

/* 404 */
.notfound p { margin: 0; }

@media (max-width: 36em) {
  .masthead { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
  .portrait { order: -1; width: 5rem; }
  .row { grid-template-columns: 1fr; }
  .row dt::after { display: none; }
  .row dd { margin-top: 0.2rem; }
  .row + .row { margin-top: 1.4rem; }
}

@media print {
  html { background: #fff; color: #000; }
  .page { padding: 0; max-width: none; }
  .field { display: none; }
}