/* ===== Edit these to restyle the whole site ===== */
:root {
  --bg: #F5F5F5;
  --text: #290000;
  --muted: #7A6A6A;
  --accent: #BE0E34;
  --tile: #FFFFFF;
  --line: rgba(41, 0, 0, 0.25);  /* dimmed lines */

  --font-heading: "Baskervville", Georgia, serif;
  --font-body: "Atkinson Hyperlegible Mono", ui-monospace, monospace;

  --edge: 16px;             /* side margin, edge of the page */
  --space: 64px;            /* vertical whitespace between blocks */
  --label-spacing: 0.2em;   /* letter spacing for nav + labels */

  --size-body: 15px;
  --size-label: 13px;
  --size-nav: 11px;
  --weight-fine: 300;
  --size-small: 11px;
  --size-big: clamp(32px, 4vw, 52px);
  --size-name: 19.2vw;      /* sized so "Lacie Firth" spans edge to edge */
  --logo-size: 28px;
  --tile-gap: 12px;
  --tile-short: 160px;
  --tile-mid: 230px;
  --tile-tall: 310px;
}

/* ===== Base ===== */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.6;
}

a { color: var(--accent); }

p { margin: 0 0 8px; }

h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
}

.label {
  text-transform: uppercase;
  letter-spacing: var(--label-spacing);
  font-size: var(--size-label);
}

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

/* ===== Header ===== */
.site-header {
  position: relative;
  z-index: 1;               /* keeps nav clickable above the big name */
  border-bottom: 1px solid var(--line);
}

.site-header nav {
  display: flex;
  justify-content: space-between;   /* equal gaps, edge to edge */
  align-items: center;
  padding: 6px var(--edge);
}

.site-header nav a {
  color: var(--text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--label-spacing);
  font-size: var(--size-nav);
  font-weight: var(--weight-fine);
}

.site-header .logo { line-height: 0; }
.site-header .logo img { width: var(--logo-size); height: var(--logo-size); }

/* ===== Main ===== */
main {
  flex: 1;
  padding: var(--space) var(--edge);
}

main.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

main.center .big {
  font-size: var(--size-big);
  max-width: 20ch;
  margin-bottom: 24px;
}

main.center .label { margin-bottom: 12px; }

/* ===== Home ===== */
main.home { padding: 0 0 var(--space); }

.name {
  color: var(--text);
  font-size: var(--size-name);
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  padding: 8px 0 16px;
}

.intro {
  text-align: center;
  padding: 0 var(--edge);
}

.intro p { margin: 0 0 4px; }

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;           /* columns end at different heights */
  gap: var(--tile-gap);
  margin-top: var(--space);
  padding: 0 var(--edge);
}

.col {
  display: flex;
  flex-direction: column;
  gap: var(--tile-gap);
}

.tile { background: var(--tile); }
.tile.short { height: var(--tile-short); }
.tile.mid { height: var(--tile-mid); }
.tile.tall { height: var(--tile-tall); }

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid var(--line);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 24px;
  padding: 40px var(--edge) 24px;
}

.site-footer { font-size: 13px; font-weight: var(--weight-fine); }
.site-footer p { margin: 0 0 4px; }
.site-footer a { color: var(--text); text-decoration: none; }

.footer-socials { text-align: right; white-space: nowrap; }
.footer-socials .label { color: var(--muted); }

.site-footer .email-button {
  display: inline-block;
  margin: 8px 0 0;
  padding: 4px 12px;
  background: var(--accent);
  color: var(--bg);
  text-transform: uppercase;
  letter-spacing: var(--label-spacing);
  font-size: var(--size-nav);
  font-weight: var(--weight-fine);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--edge) 16px;
  font-size: var(--size-small);
  color: var(--muted);
}

/* ===== Phones ===== */
@media (max-width: 600px) {
  :root { --label-spacing: 0.12em; --size-label: 11px; }
  .tiles { display: block; columns: 2; column-gap: var(--tile-gap); padding: 0 var(--edge); }
  .col { display: contents; }
  .tile { break-inside: avoid; margin-bottom: var(--tile-gap); }
  :root { --tile-short: 120px; --tile-mid: 170px; --tile-tall: 230px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-socials { text-align: left; }
}

/* ===== 404 ===== */
main.nf {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--edge);
  overflow: hidden;
}

.not-found {
  font-size: 52vw;          /* stretches across the page */
  font-variant-numeric: lining-nums;
  line-height: 1;
  white-space: nowrap;
}