/* tuckerchap.in: shared by index.html and 404.html. See CLAUDE.md for the design rules. */

@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(/fonts/montserrat-latin.woff2) format("woff2");
}
@font-face {
  font-family: Montserrat;
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/montserrat-italic-latin.woff2) format("woff2");
}

/* Three tones, all WCAG AA (4.5:1+) on their background:
   --fg     current things
   --muted  current taglines, labels, and links to past things
   --faint  past taglines, and past things with nothing to link to */
:root {
  --bg: #fff;
  --fg: #000;
  --muted: #525252; /* 7.8:1 */
  --faint: #737373; /* 4.7:1 */
  /* One spacing unit: top of page, label-to-content gutter, between blocks, between contact links. */
  --space: 1.5rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000;
    --fg: #fff;
    --muted: #a6a6a6; /* 8.6:1 */
    --faint: #808080; /* 5.3:1 */
  }
}

html {
  background: var(--bg);
  color: var(--fg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font: 300 1rem/1.5 Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
ul { list-style: none; margin: 0; padding: 0; }

/* Layout: one two-column grid (label gutter | content). The gutter is as wide as the
   widest label, and the page is as wide as its longest unwrapped line (capped), then
   centered, so the text has equal space on its left and right. Blocks and rows
   subgrid into it so every label and every content edge line up. */
.page {
  box-sizing: border-box;
  width: fit-content;
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--space) 1.25rem 4rem;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space);
}
header, main, .row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}
header, main { row-gap: var(--space); }
.row { align-items: baseline; }

.title { margin: 0; font-size: 2.75rem; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.label {
  margin: 0;
  font-size: .875rem;
  font-weight: 300;
  font-style: italic;
  color: var(--muted);
  text-align: right;
}

nav ul { display: flex; flex-wrap: wrap; gap: .25rem var(--space); }
section ul { display: grid; gap: .5rem; }
/* Flex rows make the name and tagline separate blocks, so double/triple-click selection
   stays inside one of them and the whitespace between them never gets selected. */
section li { display: flex; flex-wrap: wrap; align-items: baseline; }
.name { font-size: 1.125rem; font-weight: 500; }
.tag { font-style: italic; color: var(--muted); margin-left: .76em; }
.past { color: var(--faint); }
.past a.name { color: var(--muted); }
.past .tag { color: inherit; }

/* Read by screen readers, not shown. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Below tablet portrait (768px) the gutter layout no longer fits unwrapped: stack
   each label above its content. Labels that only make sense in the gutter
   (name, contact) disappear visually but stay readable to screen readers. */
@media (max-width: 47.9375rem) {
  .page { width: auto; grid-template-columns: minmax(0, 1fr); }
  .title { font-size: 2rem; }
  .label { text-align: left; margin-bottom: .5rem; }
  .gutter-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  section ul { gap: .75rem; }
  section li { flex-direction: column; }
  .tag { font-size: .875rem; margin-left: 0; }
}

@media print {
  :root { --bg: #fff; --fg: #000; --muted: #444; --faint: #666; }
  .page { padding: 0; }
}