/* August Miller — augustmiller.info
 *
 * Every colour is a token. Nothing below hardcodes a hex or rgba() outside
 * :root, so retargeting the palette is a single-block edit.
 */

/* ---------- fonts (self-hosted; see fonts/OFL.txt) ---------- */

@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif.woff2') format('woff2-variations');
  font-weight: 200 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-italic.woff2') format('woff2-variations');
  font-weight: 200 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('/fonts/libre-franklin.woff2') format('woff2-variations');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* surfaces */
  --paper: #f6f7f9;
  --paper-veil: rgba(246, 247, 249, .92);
  --sheet: #ffffff;
  --backdrop: #101318;

  /* text — every value below passes WCAG AA on --paper at its used size */
  --ink: #15181c;
  --ink-soft: #252b33;
  --muted: #4c5661;
  --faint: #646e7b;

  /* text over the dark hero photo */
  --on-dark: #eef2f6;
  --on-dark-soft: rgba(238, 242, 246, .82);
  --on-dark-line: rgba(238, 242, 246, .38);

  /* accent */
  --accent: #1e3d59;
  --accent-strong: #16304a;
  --accent-line: rgba(30, 61, 89, .38);
  --accent-wash: rgba(30, 61, 89, .045);
  --glow: rgba(30, 61, 89, .13);

  /* rules */
  --hairline: #dde2e8;
  --hairline-soft: #e7ebef;
  --page-break: #c2402f;
  --shadow-near: rgba(21, 24, 28, .10);
  --shadow-far: rgba(21, 24, 28, .09);

  /* Hero framing. The subject sits on the left of the photo, so narrow
   * viewports anchor to the left edge instead of cropping inward. */
  --hero-focus-x: 52%;
  --hero-focus-y: 42%;
  --hero-scale: 1.45;
  --hero-shift-x: 14%;
  --hero-shift-y: 9%;
  --hero-drift-y: 15%;
  --hero-origin: center;

  --serif: 'Source Serif 4', Charter, Georgia, 'Times New Roman', serif;
  --sans: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;
  --sheet-font: 'Liberation Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  transition: border-color .2s ease, color .2s ease;
}
a:hover { color: var(--accent-strong); border-bottom-color: var(--accent-strong); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

::selection { background: var(--accent); color: var(--paper); }

h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--on-dark);
  border: none;
  font-size: 15px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  color: var(--on-dark);
}

.page {
  position: relative;
  min-height: 100vh;
  padding: 0 32px 120px;
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px max(32px, calc(50vw - 380px)) 18px;
  font-size: 15px;
  color: var(--on-dark);
  border-bottom: 1px solid transparent;
  transition: background .5s ease, color .5s ease, padding .4s ease, border-color .5s ease;
}

.nav.is-paper {
  color: var(--ink);
  background: var(--paper-veil);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-top: 16px;
  padding-bottom: 14px;
  border-bottom-color: var(--hairline);
}

.nav--paper {
  position: static;
  color: var(--ink);
  padding: 26px 0 20px;
}

.nav__name {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: none;
  color: inherit;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: .01em;
}

.nav__mark { display: inline-flex; }
.mark-am { display: block; }

.nav__links { display: flex; gap: 26px; align-items: center; }

.nav__links a {
  color: inherit;
  border-bottom-color: currentColor;
  opacity: .82;
}
.nav__links a:hover { color: inherit; opacity: 1; }
.nav__links a[aria-current="page"] { opacity: 1; }

/* ---------- hero ---------- */

.glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 60vmax;
  height: 60vmax;
  margin: -30vmax 0 0 -30vmax;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.6s ease .6s;
  background: radial-gradient(circle at center, var(--glow), transparent 62%);
}
.glow.is-lit { opacity: 1; }

.hero-photo {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--backdrop);
}

.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus-x) var(--hero-focus-y);
  transform-origin: var(--hero-origin);
  transform: scale(var(--hero-scale)) translate(var(--hero-shift-x), var(--hero-shift-y));
  filter: grayscale(1) brightness(.56) contrast(1.1);
}

@keyframes hero-photo-drift {
  from { transform: scale(var(--hero-scale)) translate(var(--hero-shift-x), var(--hero-shift-y)); }
  to   { transform: scale(var(--hero-scale)) translate(var(--hero-shift-x), var(--hero-drift-y)); }
}

@supports (animation-timeline: scroll()) {
  .hero-photo img {
    animation: hero-photo-drift linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
}

.hero {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0 0 11vh;
}

.hero__plate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  max-width: 640px;
}

.hero__name {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .28em;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 7.5vw, 102px);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--on-dark);
}

.hero__name span {
  display: inline-block;
  overflow: hidden;
  padding-bottom: .08em;
}

.hero__name span span { animation: hero-rise 1.15s cubic-bezier(.16, .84, .24, 1) both; }
.hero__name span:nth-child(1) span { animation-delay: .08s; }
.hero__name span:nth-child(2) span { animation-delay: .19s; }

.hero__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(21px, 2.4vw, 32px);
  line-height: 1.32;
  color: var(--on-dark-soft);
  animation: hero-fade .9s ease .5s both;
}

.hero__rule {
  width: 100%;
  max-width: 340px;
  height: 1px;
  background: var(--on-dark-line);
  transform-origin: left center;
  animation: hero-rule 1.1s cubic-bezier(.16, .84, .24, 1) .55s both;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  margin-top: 4px;
  font-size: 15px;
  animation: hero-fade .9s ease .7s both;
}

.hero__actions a,
.hero__actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--on-dark);
  border-bottom-color: var(--on-dark-line);
}
.hero__actions a:hover,
.hero__actions button:hover { color: var(--on-dark); border-bottom-color: var(--on-dark); }
.hero__actions .arrow { font-size: 13px; }

@keyframes hero-rise { from { transform: translateY(110%) rotate(2.5deg); } to { transform: none; } }
@keyframes hero-fade { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes hero-rule { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- buttons ---------- */

.linkish {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 1px solid var(--accent-line);
  color: var(--accent);
  padding: 0 0 2px;
  transition: border-color .2s ease, color .2s ease;
}
.linkish:hover { border-bottom-color: var(--accent-strong); color: var(--accent-strong); }
.linkish:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- sections ---------- */

.section {
  padding: 96px 0;
  border-top: 1px solid var(--hairline);
}

.section__label {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
}

.section--about {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 44px;
  align-items: start;
}

.prose {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 620px;
}

.prose p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---------- figures ---------- */

.section--metrics { padding: 60px 0; }

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 36px 24px;
  margin: 0;
}

.figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.figure__value {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 4.6vw, 50px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}

.figure__label {
  margin: 0;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
}

/* ---------- experience ---------- */

.company {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline-soft);
}

.company h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
}

.company span { font-size: 14px; color: var(--faint); }

.role {
  display: grid;
  grid-template-columns: 1fr 170px;
  gap: 12px 24px;
  padding: 30px 0 34px;
  border-bottom: 1px solid var(--hairline-soft);
  align-items: baseline;
}

.role h4 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.005em;
}

.role__dates { font-size: 14px; color: var(--faint); text-align: right; }

.role ul {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 640px;
  text-wrap: pretty;
}

/* ---------- lists of links ---------- */

.rows { display: flex; flex-direction: column; }

.row {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline-soft);
  align-items: baseline;
  border-top: none;
  color: inherit;
  transition: background .2s ease;
}
a.row { border-bottom: 1px solid var(--hairline-soft); }
a.row:hover { background: var(--accent-wash); color: inherit; }

.row--numbered { grid-template-columns: 40px 1fr 190px; padding: 28px 0; }

.row__num {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--faint);
}

.row__body { display: flex; flex-direction: column; gap: 8px; }

.row__body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  color: var(--ink);
}

.row__body p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
  max-width: 46ch;
  margin-top: 4px;
}

.row__meta { font-size: 14px; color: var(--faint); text-align: right; }
/* The arrow is glued to the last word so it can never be orphaned. */
.row__meta .ext { font-size: .85em; white-space: nowrap; }

/* ---------- logo marks ---------- */

.mark {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  object-position: left center;
}

.mark--co {
  width: 38px;
  height: 38px;
  align-self: center;
  margin-right: 2px;
}

/* ---------- education + skills ---------- */

.section--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 56px;
}

.col { display: flex; flex-direction: column; gap: 24px; }

.entry { display: flex; flex-direction: column; gap: 6px; }

.entry h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.25;
}

.entry p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.entry p.dim { color: var(--faint); }

.skills { display: flex; flex-direction: column; gap: 20px; }
.skill { display: flex; flex-direction: column; gap: 5px; }
.skill strong { font-size: 15px; font-weight: 500; color: var(--ink-soft); }
.skill p { font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* ---------- footer ---------- */

.footer {
  padding: 96px 0 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.footer__cta {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 4.6vw, 48px);
  line-height: 1.12;
  letter-spacing: -.01em;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  font-size: 15px;
}

.footer__links a { display: inline-flex; align-items: center; gap: 8px; }
.footer__links svg { flex: none; }

.footer__fine {
  margin-top: 24px;
  font-size: 13px;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer__mark { display: inline-flex; color: var(--ink); }

/* ---------- for fun + 404 ---------- */

.masthead {
  padding: 14vh 0 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 620px;
}

.masthead h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(44px, 7.4vw, 86px);
  line-height: 1.02;
  letter-spacing: -.02em;
}

.masthead p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.38;
  color: var(--muted);
}

.masthead--404 { padding-top: 22vh; }
.masthead__links {
  display: flex;
  gap: 22px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 15px;
}

.plate {
  margin-top: 12vh;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
}
.plate + .plate { margin-top: 9vh; }
.plate > .section__label { display: block; margin-bottom: 26px; }

/* .masthead p sets serif italic, so this needs to outspecify it. */
.masthead p.masthead__intro {
  font-family: var(--sans);
  font-style: normal;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.footer--slim {
  margin-top: 12vh;
  padding: 40px 0 0;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  font-size: 15px;
}

.footer--slim .back { color: var(--faint); border-bottom-color: var(--hairline); }
.footer--slim .back:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- the resume sheet ----------
 *
 * Physical units on purpose: 8.5x11in at 9pt with the same margins the LaTeX
 * geometry package uses, so this is a usable proof of length. The red rule
 * marks where a page break would fall.
 */

.page--paper { padding-bottom: 80px; }
.shell--sheet { max-width: 8.5in; }

.sheet__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: baseline;
  justify-content: space-between;
  margin: 8px 0 20px;
  font-size: 15px;
}
.sheet__note { color: var(--faint); font-size: 13px; }

.sheet {
  width: 100%;
  max-width: 8.5in;
  min-height: 11in;
  margin: 0 auto;
  padding: 0.55in 0.65in 0.5in;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(11in - 1px),
      var(--page-break) calc(11in - 1px) 11in
    ),
    var(--sheet);
  box-shadow: 0 1px 2px var(--shadow-near), 0 12px 40px var(--shadow-far);
  color: var(--ink);
  font-family: var(--sheet-font);
  font-size: 9pt;
  line-height: 1.27;
}

.sheet__head h1 {
  font-family: inherit;
  font-size: 23pt;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
}

.sheet__contact {
  margin-top: 0.45em;
  font-size: 8pt;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  color: var(--ink);
}
.sheet__contact a,
.sheet__contact .linkish { font-size: inherit; color: var(--accent); }

.sheet__section { margin-top: 1.15em; }

.sheet__section h2 {
  font-family: inherit;
  font-size: 14.4pt;
  font-weight: 700;
  color: var(--accent);
  padding-bottom: .1em;
  border-bottom: .8pt solid var(--hairline);
  margin-bottom: .55em;
}

.sheet__section p { margin-bottom: .45em; text-wrap: pretty; }
.sheet__section p:last-child { margin-bottom: 0; }

.sheet__company { margin-bottom: .4em; }

.sheet__role {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: .8em 0 .2em;
}
.sheet__role strong { color: var(--accent); }
.sheet__role:first-of-type { margin-top: .2em; }

.sheet ul {
  margin: .42em 0 0;
  padding-left: 1.1em;
  list-style: disc;
}
.sheet li { margin-bottom: .4em; text-wrap: pretty; }

.sheet__skill { padding-left: 1.1em; text-indent: -1.1em; }
.sheet__metrics { color: var(--accent); }

/* ---------- reveal ---------- */

.reveal > * {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(5px);
}

.reveal.is-in > * {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity .85s ease, transform 1s cubic-bezier(.16, .84, .24, 1), filter .85s ease;
}

.no-js .reveal > *,
.reveal.is-static > * { opacity: 1; transform: none; filter: none; }

/* ---------- narrow ---------- */

/* A portrait viewport crops the photo horizontally, and the subject is a third
 * of the way in from the left — so the crop is pulled that way to keep him in
 * the middle of the frame. The zoom is only what the scroll drift needs to
 * play against: on a tall screen the photo covers by height, so any more of it
 * would push him back out of frame. */
@media (max-width: 900px) {
  :root {
    --hero-focus-x: 12%;
    --hero-focus-y: 50%;
    --hero-origin: center;
    --hero-scale: 1.12;
    --hero-shift-x: 0%;
    --hero-shift-y: 0%;
    --hero-drift-y: 4%;
  }
}

@media (max-width: 640px) {
  .page { padding: 0 22px 96px; }

  /* Five links plus a wordmark do not fit. Keep the mark, hide the name —
   * it is the first thing in the hero anyway. Hidden by clip rather than by
   * display, so the link still has a name for a screen reader. */
  .nav { padding: 18px 22px 14px; gap: 14px; font-size: 14px; }
  .nav--paper { padding: 22px 0 18px; }
  .nav__name span:not(.nav__mark) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .nav__links { gap: 15px; }
  /* A wrapped "For fun" pushes the bar onto two lines; the links get to be
   * narrower before they get to be two rows. */
  .nav__links a { white-space: nowrap; }
  .section { padding: 72px 0; }
  .section--about { grid-template-columns: 1fr; gap: 20px; }
  .role, .row, .row--numbered { grid-template-columns: 1fr; }
  .role__dates, .row__meta { text-align: left; }
  .figures { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .sheet { padding: 0.4in; }
}

@media (max-width: 400px) {
  .nav { gap: 10px; font-size: 13px; }
  .nav__links { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__name span span,
  .hero__tagline,
  .hero__rule,
  .hero__actions,
  .hero-photo img { animation: none !important; }
  .reveal > * { opacity: 1; transform: none; filter: none; }
}

/* ---------- print: the sheet, and nothing else ---------- */

@media print {
  @page { size: letter; margin: 0.5in 0.65in 0.5in; }
  body { background: var(--sheet); }
  .nav, .footer, .sheet__toolbar, .skip, .glow { display: none !important; }
  .page, .page--paper { padding: 0; min-height: 0; }
  .sheet {
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: var(--sheet);
    box-shadow: none;
  }
  .sheet a { color: var(--ink); border: none; }
}