/* Peter Hood — v4 (matches Figma frame "Simplified") */
:root {
  /* Palette */
  --hero: #001C3A;        /* name only */
  --ink-navy: #0B182B;    /* previous text colour (kept for easy switch-back) */
  --black: #000000;       /* all other text — testing true black */
  --dark-gray: #A5ADB5;   /* descriptions */
  --date-gray: #E5E5E5;   /* dates (from Figma; not in the palette sheet) */
  --light-gray: #F3F3F3;
  --white: #FFFFFF;

  --ink: var(--black);
  --paper: var(--white);

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --size: 16px;
  --lh: 1.1;
  --line: 1.1em;          /* one blank line */
  --tracking: -0.04em;
  --edge: 20px;
  --gap: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--size);
  line-height: var(--lh);
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, ol, ul { margin: 0; padding: 0; font: inherit; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--dark-gray); }
::selection { background: var(--hero); color: var(--paper); }

/* Three columns: about | work | contact */
.page {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding: var(--edge);
  min-height: 100vh;
  align-items: start;
}
.bio     { grid-column: 1 / span 4; grid-row: 1; }
.work    { grid-column: 6 / span 4; grid-row: 1; }
.contact { grid-column: 11 / span 2; grid-row: 1; text-align: right; }

/* Column headings (Medium) */
.heading { font-weight: 500; margin-bottom: 14px; }
.work .heading { letter-spacing: 0; }
.site-name { color: var(--hero); letter-spacing: -0.04em; }

/* About column */
.bio p + p { margin-top: var(--line); }

/* Work entries */
.entries li + li { margin-top: 34px; }
.entries .name { font-weight: 500; }
.entries a.name { text-decoration: none; }
.entries a.name:hover { color: inherit; text-decoration: underline; }
.entries .date { color: var(--date-gray); }
.entries .by   { color: var(--dark-gray); margin-top: 4px; }

/* Every column heading sits 14px above its first line */

/* Tablet: about + work side by side, contact under about */
@media (max-width: 1000px) {
  .bio     { grid-column: 1 / span 5; }
  .work    { grid-column: 7 / span 6; grid-row: 1 / span 2; }
  .contact { grid-column: 1 / span 5; grid-row: 2; text-align: left; margin-top: 40px; }
  .entries li + li { margin-top: 24px; }
}

/* Phone: one tight column */
@media (max-width: 640px) {
  :root { --edge: 16px; }
  .page { display: block; min-height: 0; }
  .bio, .work, .contact { margin-top: 0; text-align: left; }
  .work, .contact { margin-top: 32px; }
  .heading { margin-bottom: 10px; }
  .entries li + li { margin-top: 16px; }
  .entries .by { margin-top: 2px; }
}