/* ==========================================================================
   corbincaldwell.me / base.css
   Design tokens, reset, typography, layout primitives, shared components,
   and the page shell (header, intro, footer).
   Section styles live in interests.css, background.css and career.css and
   must use the tokens defined here. See work/DESIGN.md.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, SIL Open Font Licence; licences in fonts/)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Handwriting for polaroid captions only. Not preloaded: the browser fetches it
   only when a caption uses it, and swap shows the fallback until it arrives. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/caveat-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette. Hunter green anchors everything; poppy and chartreuse bring it to life. */
  --color-hunter: #386150;       /* anchor: tagline, links, section rules, the Interests band, the footer */
  --color-paper: #FCF9F2;        /* page background: a clean, bright warm white */
  --color-ink: #15241D;          /* body text and headings */
  --color-poppy: #C8401E;        /* the accent: underlines, dashes, arrows, focus ring, large italic statements */
  --color-chartreuse: #D9E26B;   /* supporting: tags, highlights, labels on hunter, image placeholders */

  /* Derived shades and tints (same hues, not new colours) */
  --color-poppy-deep: #B33819;   /* poppy for small text on paper (5.7:1): labels, numbers, kickers, link hover */
  --color-hunter-deep: #26443A;  /* hover/pressed hunter */
  --color-ink-soft: #4A5650;     /* secondary text on paper */
  --color-mist: #D5E6DA;         /* pale hunter: secondary text on hunter, image wells on paper */
  --color-print: #FFFEFA;        /* photo-print stock: the polaroid border, a shade whiter than paper */

  /* Roles. Components use these, so they adapt inside .on-hunter. */
  --bg: var(--color-paper);
  --surface: var(--color-mist);
  --text: var(--color-ink);
  --text-muted: var(--color-ink-soft);
  --accent: var(--color-hunter);
  --accent-strong: var(--color-hunter-deep);
  --label: var(--color-poppy-deep);  /* small accent text */
  --mark: var(--color-poppy);         /* non-text accents and large display text */
  --link: var(--color-hunter);
  --link-hover: var(--color-poppy-deep);
  --link-underline: var(--color-poppy);
  --link-underline-hover: var(--color-poppy);
  --chip-bg: var(--color-chartreuse);
  --chip-text: var(--color-ink);
  --chip-border: rgb(56 97 80 / 0.4);  /* hunter hairline: chartreuse alone is 1.33:1 against paper */
  --rule: rgb(21 36 29 / 0.16);
  --rule-strong: var(--color-hunter);
  --focus: var(--color-poppy);
  /* A print resting on the page: a tight contact shadow plus a soft, wider fall-off. */
  --print-shadow: 0 0 0 1px rgb(21 36 29 / 0.05), 0 1px 1px rgb(21 36 29 / 0.10), 0 4px 8px -2px rgb(21 36 29 / 0.12), 0 22px 34px -16px rgb(21 36 29 / 0.32);

  /* Type families */
  --font-serif: "Newsreader", "Iowan Old Style", "Charter", "Georgia", "Times New Roman", serif;
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", "Newsreader", Georgia, serif; /* polaroid captions only */

  /* Type scale: fluid between 360px and 1440px viewports */
  --step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);   /* 12 → 13: eyebrows, tags */
  --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.9375rem); /* 13 → 15: captions, nav, meta */
  --step-0: clamp(1.0625rem, 1.02rem + 0.21vw, 1.1875rem);  /* 17 → 19: body */
  --step-1: clamp(1.1875rem, 1.1rem + 0.42vw, 1.5rem);      /* 19 → 24: lede, small headings */
  --step-2: clamp(1.4375rem, 1.27rem + 0.83vw, 2rem);       /* 23 → 32: item headings */
  --step-3: clamp(1.75rem, 1.42rem + 1.48vw, 2.75rem);      /* 28 → 44: statements */
  --step-4: clamp(2.375rem, 1.79rem + 2.6vw, 4.25rem);      /* 38 → 68: section titles */
  --step-5: clamp(3.5rem, 2.4rem + 7.8vw, 9.5rem);          /* 66 → 152: the name */

  --leading-tight: 1.04;
  --leading-snug: 1.22;
  --leading-body: 1.6;
  --tracking-display: -0.022em;
  --tracking-label: 0.12em;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;
  --space-section: clamp(4.5rem, 2.5rem + 7vw, 9rem);  /* between sections */

  /* Layout */
  --container: 78rem;                                  /* 1248px content width */
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);        /* page side margin */
  --grid-gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);       /* column gap */
  --measure: 34rem;                                    /* running text */
  --measure-narrow: 26rem;                             /* captions, short notes */
  --measure-wide: 44rem;                               /* wide prose, statements */
  --header-height: 4.5rem;

  /* Shape */
  --radius-0: 0;          /* images and frames: square corners */
  --radius-s: 3px;        /* buttons, small boxes */
  --radius-pill: 999px;   /* tags only */
  --border-hair: 1px solid var(--rule);
  --border-strong: 2px solid var(--rule-strong);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 160ms;
  --duration: 320ms;
  --duration-slow: 800ms;
}

/* Inverse context: hunter background with paper text (the Interests band
   and the footer). */
.on-hunter {
  --bg: var(--color-hunter);
  --surface: var(--color-hunter-deep);
  --text: var(--color-paper);
  --text-muted: var(--color-mist);
  --accent: var(--color-paper);
  --accent-strong: var(--color-paper);
  --label: var(--color-chartreuse);
  --mark: var(--color-chartreuse);
  --chip-border: transparent;
  --link: var(--color-paper);
  --link-hover: var(--color-chartreuse);
  --link-underline: var(--color-chartreuse);
  --link-underline-hover: var(--color-chartreuse);
  --rule: rgb(252 249 242 / 0.26);
  --rule-strong: var(--color-paper);
  --focus: var(--color-chartreuse);
  --print-shadow: 0 1px 2px rgb(8 18 13 / 0.28), 0 8px 14px -4px rgb(8 18 13 / 0.30), 0 28px 42px -18px rgb(8 18 13 / 0.60);
  /* Borders must be re-declared: custom properties resolve where defined. */
  --border-hair: 1px solid var(--rule);
  --border-strong: 2px solid var(--rule-strong);
  background-color: var(--bg);
  color: var(--text);
}


/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--space-m);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

:target { scroll-margin-top: var(--space-m); }


/* --------------------------------------------------------------------------
   4. Base typography
   -------------------------------------------------------------------------- */

body {
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: var(--leading-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p, li, dd, figcaption { text-wrap: pretty; }

strong, b { font-weight: 600; }

em, i { font-style: italic; }

::selection { background: var(--color-chartreuse); color: var(--color-ink); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Running text: paragraphs, lists and links with a comfortable rhythm. */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.35em; }
.prose li::marker { color: var(--mark); }
.prose a { /* same as .link */
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--link-underline);
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}
.prose a:hover { color: var(--link-hover); text-decoration-color: var(--link-underline-hover); }

/* Type roles. Use these instead of setting font sizes in section CSS. */
.display {
  font-size: var(--step-5);
  line-height: 0.94;
  letter-spacing: var(--tracking-display);
  font-weight: 380;
}
.heading-xl { font-size: var(--step-4); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.heading-l  { font-size: var(--step-3); line-height: 1.12; letter-spacing: -0.016em; }
.heading-m  { font-size: var(--step-2); line-height: 1.18; letter-spacing: -0.012em; }
.heading-s  { font-size: var(--step-1); line-height: 1.3; font-weight: 500; letter-spacing: -0.005em; }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: var(--measure);
}

.statement { /* an italic pull line, e.g. a quote or a one-line summary */
  font-size: var(--step-3);
  font-style: italic;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--mark); /* large text: the brighter poppy keeps 4.75:1 */
  max-width: 22ch;
}

.small { font-size: var(--step--1); line-height: 1.5; }
.muted { color: var(--text-muted); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--label);
}

.meta { /* dates, places, short facts */
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   5. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

/* The page grid. Named lines: full, rail, main.
   < 48em: 4 columns, rail and main both span everything.
   48em+:  8 columns, rail = 2, main = 6.
   64em+: 12 columns, rail = 3, main = 9.
   Children can also use numbered lines (1 to 13 on desktop). */
.grid {
  display: grid;
  grid-template-columns: [full-start rail-start main-start] repeat(4, minmax(0, 1fr)) [rail-end main-end full-end];
  column-gap: var(--grid-gap);
  row-gap: var(--space-l);
}
.grid > * { grid-column: full; min-width: 0; }
.col-full { grid-column: full; }
.col-rail { grid-column: rail; }
.col-main { grid-column: main; }

@media (min-width: 48em) {
  .grid {
    grid-template-columns: [full-start rail-start] repeat(2, minmax(0, 1fr)) [rail-end main-start] repeat(6, minmax(0, 1fr)) [main-end full-end];
  }
}

@media (min-width: 64em) {
  .grid {
    grid-template-columns: [full-start rail-start] repeat(3, minmax(0, 1fr)) [rail-end main-start] repeat(9, minmax(0, 1fr)) [main-end full-end];
  }
}

/* Sections: space above, the heading, then the body. */
.section {
  padding-top: var(--space-section);
}

.section--band { /* a full-bleed colour band; use with .on-hunter. At most one section. */
  margin-top: var(--space-section);
  padding-block: var(--space-section);
}

.section-head {
  border-top: var(--border-strong);
  padding-top: var(--space-s);
  margin-bottom: clamp(2.5rem, 1.5rem + 3.5vw, 5rem);
  row-gap: var(--space-m);
}

.section-head__index {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--label);
  font-variant-numeric: tabular-nums;
}

.section-head__main { grid-column: main; }

.section-head__title {
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 400;
  margin-top: var(--space-l);
}

.section-head__lede {
  margin-top: var(--space-m);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: var(--measure);
}

@media (min-width: 48em) {
  .section-head { margin-bottom: clamp(2.5rem, 1.5rem + 2.2vw, 3.5rem); }
  .section-head__index { grid-column: rail; }
  .section-head__title { margin-top: calc(var(--space-2xl) * 0.75); }
  /* The band's own edge marks the break, so it needs less space around it
     than a plain section. */
  .section--band {
    margin-top: calc(var(--space-section) * 0.5);
    padding-block: calc(var(--space-section) * 0.6);
  }
}

/* Phones: the head stacks, so close up the intervals it repeats down the page. */
@media (max-width: 47.99em) {
  .section-head { row-gap: 0; margin-bottom: var(--space-l); }
  .section-head__title { margin-top: var(--space-s); }
  .section-head__lede { margin-top: var(--space-s); }
  .section--band { margin-top: var(--space-xl); padding-block: var(--space-xl); }
}

/* Stub shown until a section is designed. Safe to delete with the stub. */
.stub {
  grid-column: main;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-s);
  padding: var(--space-xl) var(--space-m);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   6. Shared components
   -------------------------------------------------------------------------- */

/* Text link */
.link {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--link-underline);
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}
.link:hover { color: var(--link-hover); text-decoration-color: var(--link-underline-hover); }

/* Arrow link: sans label with a small arrow, for "more" style actions */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--link);
  text-decoration: none;
}
.link-arrow svg { width: 0.95em; height: 0.95em; flex: none; color: var(--mark); transition: transform var(--duration) var(--ease-out); }
.link-arrow:hover { color: var(--link-hover); }
.link-arrow:hover svg { transform: translateX(3px); }

/* Image frame with caption. Set the ratio with a modifier. */
.frame { margin: 0; }
.frame__img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio, 4 / 5);
  object-fit: cover;
  background-color: var(--surface);
  border-radius: var(--radius-0);
}
.frame--4x5  { --ratio: 4 / 5; }
.frame--3x4  { --ratio: 3 / 4; }
.frame--1x1  { --ratio: 1 / 1; }
.frame--3x2  { --ratio: 3 / 2; }
.frame--16x9 { --ratio: 16 / 9; }
.frame__caption {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
  margin-top: var(--space-xs);
  max-width: var(--measure-narrow);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--text-muted);
}
.frame__caption::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 2px;
  background-color: var(--mark);
  transform: translateY(-0.3em);
}

/* Polaroid: an instant print dropped onto the page. A whiter print border with a
   deep bottom margin, an optional handwritten caption in that margin, a slight
   tilt and a soft resting shadow. Every proportion is a share of the print's own
   width (cqi units), so it looks right at any size and for landscape, portrait
   or square photos. Set the width from your layout; the print does the rest. */
.polaroid {
  --tilt: -1.8deg;
  --print-side: 5cqi;    /* top and side border */
  --print-foot: 17cqi;   /* the deeper bottom margin */
  container-type: inline-size;
  position: relative;
  margin: 0;
  background-color: var(--color-print);
  box-shadow: var(--print-shadow);
  rotate: var(--tilt); /* the rotate property, so .reveal's transform can't undo it */
}
.polaroid--tilt-right { --tilt: 1.6deg; }
.polaroid--straight   { --tilt: 0deg; }

.polaroid__img {
  display: block;
  width: calc(100% - 2 * var(--print-side));
  height: auto;
  margin: var(--print-side) var(--print-side) var(--print-foot);
  aspect-ratio: var(--ratio, auto); /* auto: the photo's own shape from its width/height */
  object-fit: cover;
  background-color: var(--color-mist);
  outline: 1px solid rgb(21 36 29 / 0.10); /* the faint edge where emulsion meets border */
  outline-offset: -1px;
}
.polaroid--1x1 { --ratio: 1 / 1; }  /* optional: crop to the classic square */
.polaroid--4x5 { --ratio: 4 / 5; }

.polaroid__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--print-foot);
  margin-top: calc(-1 * var(--print-foot)); /* written into the bottom margin */
  padding-inline: calc(var(--print-side) * 1.6);
  overflow: hidden;
  font-family: var(--font-hand);
  font-size: clamp(1.05rem, 6.4cqi, 1.75rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--color-hunter-deep); /* pen ink: 10.3:1 on the print */
  text-align: center;
  text-wrap: balance;
}

/* Phones: a gentler tilt, so a print near the gutter never pokes past the page. */
@media (max-width: 47.99em) {
  .polaroid { rotate: calc(var(--tilt) * 0.6); }
}

/* Tags: small labels for topics, tools, places */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  list-style: none;
  padding: 0;
}
.tag {
  display: inline-block;
  padding: 0.32em 0.85em 0.3em;
  border: 1px solid var(--chip-border);
  border-radius: var(--radius-pill);
  background-color: var(--chip-bg);
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chip-text);
}

/* Button: use sparingly, one per section at most */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.8em 1.35em;
  border: 1px solid var(--accent);
  border-radius: var(--radius-s);
  background-color: var(--accent);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.button:hover { background-color: var(--accent-strong); border-color: var(--accent-strong); }
.button--quiet { background-color: transparent; color: var(--accent); }
.button--quiet:hover { background-color: transparent; color: var(--accent-strong); border-color: var(--accent-strong); }
.on-hunter .button:hover { background-color: var(--color-chartreuse); border-color: var(--color-chartreuse); color: var(--color-ink); }

/* Horizontal rule */
.rule { border: 0; border-top: var(--border-hair); }
.rule--strong { border-top: var(--border-strong); }

/* Key/value list, e.g. "Currently: …" */
.facts {
  display: grid;
  gap: var(--space-s) var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.facts dt {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--label);
}
.facts dd { margin-top: var(--space-3xs); font-size: var(--step-0); line-height: 1.4; }

/* Gentle reveal on scroll. Only active when js/site.js has run and the
   visitor has not asked for reduced motion; without JS content is visible. */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }


/* --------------------------------------------------------------------------
   7. Skip link
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  z-index: 100;
  padding: 0.7em 1.1em;
  background-color: var(--color-hunter);
  color: var(--color-paper);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-s);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.skip-link:focus-visible { outline-color: var(--color-poppy); }


/* --------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */

.site-header {
  background-color: var(--color-paper);
  border-bottom: var(--border-hair);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: var(--space-l);
  row-gap: var(--space-2xs);
  padding-block: var(--space-s) var(--space-xs);
}

.wordmark {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--text);
  text-decoration: none;
}
.wordmark:hover { color: var(--color-hunter); }

.site-nav { width: 100%; }

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs); /* phones: space-between spreads five links across one line */
  list-style: none;
  padding: 0;
}

.site-nav__link {
  display: inline-block;
  padding-block: 0.35em;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
  text-decoration-color: transparent;
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}
.site-nav__link:hover { color: var(--text); text-decoration-color: var(--rule); }
.site-nav__link[aria-current] { color: var(--color-hunter); text-decoration-color: var(--color-poppy); text-decoration-thickness: 2px; }

@media (min-width: 30em) {
  .site-nav { width: auto; }
  .site-nav__list { justify-content: flex-start; column-gap: var(--space-m); }
}

@media (min-width: 48em) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .site-header__inner {
    flex-wrap: nowrap;
    align-items: center;
    min-height: var(--header-height);
    padding-block: 0;
  }
  .site-nav__list { gap: var(--space-l); }
  html { scroll-padding-top: calc(var(--header-height) + var(--space-m)); }
  :target { scroll-margin-top: calc(var(--header-height) + var(--space-m)); }
}


/* --------------------------------------------------------------------------
   9. Intro (hero)
   -------------------------------------------------------------------------- */

.intro {
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 6.5rem) 0;
}

.intro__grid { row-gap: var(--space-xl); }

.intro__head { grid-column: full; }

.intro__eyebrow { margin-bottom: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); }

.intro__name {
  font-size: var(--step-5);
  line-height: 0.92;
  letter-spacing: var(--tracking-display);
  font-weight: 380;
  margin-left: -0.05em; /* optical alignment of the large capital */
}
.intro__name span { display: block; }

.intro__tagline {
  margin-top: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
  max-width: 24ch;
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-hunter);
  text-wrap: balance;
}

.intro__portrait {
  grid-column: full;
  justify-self: end; /* on phones: a narrower frame set to the right edge */
  width: min(76%, 20rem);
}

.intro__body { grid-column: full; }

.intro__text {
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: 1.55;
}

.intro__facts {
  margin-top: var(--space-xl);
  padding-top: var(--space-s);
  border-top: var(--border-hair);
  max-width: var(--measure);
}

/* Phones: name, tagline and paragraph first, then the facts set beside a
   smaller portrait, so the intro fits in about a screen and a bit. */
@media (max-width: 47.99em) {
  .intro { padding-top: var(--space-l); }
  .intro__grid {
    grid-template-columns: [full-start] minmax(0, 5fr) minmax(0, 6fr) [full-end];
    row-gap: var(--space-l);
  }
  .intro__eyebrow { margin-bottom: var(--space-s); }
  .intro__head { grid-row: 1; }
  .intro__body { display: contents; }
  .intro__text { grid-column: full; grid-row: 2; }
  .intro__facts { grid-column: 1; grid-row: 3; align-self: start; margin-top: 0; grid-template-columns: minmax(0, 1fr); }
  .intro__portrait { grid-column: 2; grid-row: 3; width: auto; justify-self: stretch; }
}

@media (min-width: 48em) {
  .intro__grid { row-gap: 0; }
  .intro__head { grid-column: 1 / 6; grid-row: 1; }
  .intro__body { grid-column: 1 / 6; grid-row: 2; padding-top: var(--space-xl); }
  .intro__portrait { grid-column: 6 / 9; grid-row: 1 / 3; width: auto; justify-self: stretch; align-self: start; }
}

@media (min-width: 64em) {
  .intro__head { grid-column: 1 / 8; }
  .intro__body { grid-column: 1 / 8; padding-top: var(--space-xl); padding-right: var(--space-l); }
  .intro__portrait { grid-column: 8 / 13; margin-top: 0.4rem; }
}

/* Entrance: a single soft rise on load. CSS only; off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .intro__name span,
  .intro__tagline,
  .intro__text,
  .intro__facts,
  .intro__portrait {
    animation: rise var(--duration-slow) var(--ease-out) both;
  }
  .intro__name span:nth-child(2) { animation-delay: 70ms; }
  .intro__tagline { animation-delay: 160ms; }
  .intro__portrait { animation-delay: 220ms; }
  .intro__text { animation-delay: 280ms; }
  .intro__facts { animation-delay: 340ms; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--space-section);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--space-l);
}

@media (min-width: 48em) {
  .site-footer__title { margin-top: calc(var(--space-2xl) * 0.75); }
}

.site-footer__head {
  row-gap: var(--space-m);
  border-top: var(--border-strong);
  padding-top: var(--space-s);
}

.site-footer__index { grid-column: rail; line-height: 1.4; }

.site-footer__main { grid-column: main; }

.site-footer__title {
  margin-top: var(--space-xl);
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  max-width: 16ch;
}

/* Phones: same close-up as the section heads. */
@media (max-width: 47.99em) {
  .site-footer__head { row-gap: 0; }
  .site-footer__title { margin-top: var(--space-s); }
}

.site-footer__note {
  margin-top: var(--space-m);
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
}

/* The closing portrait: a polaroid between the invitation and the links on
   phones and tablets; beside the closing line on desktops. */
.site-footer__photo {
  width: min(88%, 22rem);
  margin: var(--space-xl) var(--space-2xs) 0 auto;
}

@media (min-width: 48em) {
  .site-footer__photo { width: min(64%, 23rem); margin-right: var(--space-m); }
}

@media (min-width: 64em) {
  .site-footer__main {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)); /* the main column's nine page columns */
    column-gap: var(--grid-gap);
    align-items: start;
  }
  .site-footer__main > * { grid-column: 1 / 6; }
  .site-footer__title { grid-row: 1; }
  .site-footer__note { grid-row: 2; }
  .site-footer__photo {
    grid-column: 6 / 10;
    grid-row: 1 / 3;
    width: auto;
    margin: calc(var(--space-2xl) * 0.75 + var(--space-2xs)) var(--space-s) 0 var(--space-m);
  }
  .site-footer__main > .contact-list { grid-column: 1 / 10; grid-row: 3; }
}

.contact-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-2xl);
  border-top: var(--border-hair);
}
@media (max-width: 63.99em) {
  .site-footer__photo + .contact-list { margin-top: var(--space-xl); }
}
.contact-list li { border-bottom: var(--border-hair); }

.contact-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem);
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}
.contact-link__arrow {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  color: var(--text-muted);
  transition: transform var(--duration) var(--ease-out), color var(--duration-fast) ease;
}
.contact-link:hover .contact-link__arrow { transform: translate(3px, -3px); color: var(--text); }
.contact-link:hover .contact-link__label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--link-underline);
}

.site-footer__base {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-l);
  margin-top: var(--space-section);
  padding-top: var(--space-s);
  border-top: var(--border-hair);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.site-footer__base a { color: var(--text-muted); text-decoration: none; }
.site-footer__base a:hover { color: var(--text); }

@media (min-width: 48em) {
  .site-footer__base { flex-direction: row; }
}

@media (min-width: 64em) {
  .contact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    border-top: 0;
  }
  .contact-list li:nth-child(-n + 2) { border-top: var(--border-hair); }
}


/* --------------------------------------------------------------------------
   11. Reduced motion: remove all non-essential movement
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}