/* philip-todd.com. One hand-written stylesheet, no framework, no JS.
   Bump the ?v= on the <link> in each page when this file changes. */

/* Fonts are self-hosted (latin subsets from Google Fonts, OFL) and preloaded in each page's <head>. */
@font-face { font-family: "Didact Gothic"; src: url("/fonts/didact-gothic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pragati Narrow"; src: url("/fonts/pragati-narrow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pragati Narrow"; src: url("/fonts/pragati-narrow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Until they arrive, text is set in Arial (or Roboto on Android) scaled to each font's widths and line
   metrics, so swapping fonts doesn't move the layout. Values measured with fontTools on the real text. */
@font-face { font-family: "Didact Gothic Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 95%; ascent-override: 110.1%; descent-override: 27.9%; line-gap-override: 0%; }
@font-face { font-family: "Didact Gothic Fallback Android"; src: local("Roboto"); size-adjust: 94.6%; ascent-override: 110.5%; descent-override: 28%; line-gap-override: 0%; }
@font-face { font-family: "Pragati Narrow Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); font-weight: 400; size-adjust: 75.4%; ascent-override: 153.5%; descent-override: 70.8%; line-gap-override: 0%; }
@font-face { font-family: "Pragati Narrow Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); font-weight: 700; size-adjust: 75.4%; ascent-override: 153.5%; descent-override: 70.8%; line-gap-override: 0%; }
@font-face { font-family: "Pragati Narrow Fallback Android"; src: local("Roboto"); font-weight: 400; size-adjust: 81.1%; ascent-override: 142.8%; descent-override: 65.9%; line-gap-override: 0%; }
@font-face { font-family: "Pragati Narrow Fallback Android"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 700; size-adjust: 80.3%; ascent-override: 144.2%; descent-override: 66.5%; line-gap-override: 0%; }

:root {
  --dark: #212121;
  --on-dark: #f4f4f4;
  --on-dark-muted: #b4b4b4;
  --paper: #fff;
  --text: #222;
  --muted: #5f5f5f;
  --line: #e4e4e4;
  --spotlight: #4e4d92;

  --display: "Pragati Narrow", "Pragati Narrow Fallback", "Pragati Narrow Fallback Android", sans-serif;
  --body: "Didact Gothic", "Didact Gothic Fallback", "Didact Gothic Fallback Android", sans-serif;
  --wrap: 68rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --space: clamp(2.5rem, 6vw, 4.5rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--text);
  font: 400 clamp(1.0625rem, 1rem + .3vw, 1.1875rem)/1.65 var(--body);
  /* Didact Gothic's kerning table puts a wide gap before capitals ("Julia  Brown"). */
  font-kerning: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { flex: 1; }

img { display: block; max-width: 100%; height: auto; }

h1 {
  margin: 0;
  font: 700 clamp(2.5rem, 1.75rem + 3vw, 3.75rem)/1.05 var(--display);
  letter-spacing: -.005em;
  font-kerning: normal;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration: underline 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: .22em;
  transition: color .15s, text-decoration-color .15s, background-color .15s, transform .2s, box-shadow .2s;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

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

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  z-index: 10;
  left: var(--gutter);
  top: -4rem;
  padding: .5rem .875rem;
  background: var(--paper);
  color: var(--text);
}
.skip:focus { top: .75rem; }

/* Header: name on the left, four links. Wraps under the name on phones. */

.site-header { background: var(--dark); color: var(--on-dark); }

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 2rem;
  padding-block: .5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 52px;
  font: 700 1.25rem/1 var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.brand img { width: 36px; height: 36px; border-radius: 50%; }
.brand, .nav a { font-kerning: normal; }

.nav ul { display: flex; flex-wrap: wrap; column-gap: clamp(1.1rem, 3vw, 1.75rem); }

.nav a {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  min-height: 44px;
  color: var(--on-dark-muted);
  font: 400 1.0625rem/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav a:hover { color: var(--on-dark); }
.nav a[aria-current="page"] {
  color: var(--on-dark);
  text-decoration: underline 2px;
  text-underline-offset: .5em;
}
.nav svg { width: .6em; height: .6em; opacity: .7; }

@media (max-width: 40rem) {
  /* Phones: the four links on one row under the name. */
  .site-header .wrap { padding-block: .25rem 0; }
  .nav { width: 100%; }
  .nav ul { justify-content: space-between; column-gap: .75rem; }
  .nav a { font-size: .9375rem; letter-spacing: .06em; }
  .nav svg { display: none; }
}

@media (max-width: 23rem) {
  .nav ul { justify-content: flex-start; column-gap: 1.25rem; }
}

/* Home hero */

.hero { background: var(--dark); color: var(--on-dark); padding-bottom: var(--space); }

.hero .wrap { display: grid; gap: 1.75rem; align-items: center; }

.hero h1 { font-size: clamp(3rem, 2rem + 5vw, 5.25rem); }

.role {
  margin: .4rem 0 1.5rem;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  letter-spacing: .02em;
}

.credits { display: grid; gap: .35rem; color: var(--on-dark-muted); }
.credits a { color: var(--on-dark); white-space: nowrap; }

.hero-photo { display: block; }
.hero-photo img { width: 100%; }

@media (max-width: 47.99rem) {
  /* Phones: photo edge to edge straight under the header, name below it. */
  .hero-photo {
    order: -1;
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
  }
  .hero-photo img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
}

@media (min-width: 48rem) {
  .hero { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
  .hero .wrap { grid-template-columns: 5fr 6fr; gap: clamp(2rem, 5vw, 4.5rem); }
  .hero-photo img { border-radius: 3px; box-shadow: 0 24px 48px -24px rgb(0 0 0 / .8); }
}

/* Page sections */

.section { padding-block: var(--space); }

.lede {
  max-width: 34em;
  margin-inline: auto;
  text-align: center;
  font-size: 1.125em;
}

.poster {
  display: block;
  max-width: 56rem;
  margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 18px 40px -18px rgb(0 0 0 / .45);
}
.poster:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 26px 50px -20px rgb(0 0 0 / .5); }
.poster:focus-visible { outline-offset: 4px; }

.section--quiet { padding-top: 0; }
.section--quiet::before {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin: 0 auto var(--space);
  background: var(--line);
}

/* About and Contact */

.page-head { background: var(--dark); color: var(--on-dark); padding-block: clamp(1.75rem, 5vw, 3.5rem); }

.prose { max-width: 40em; }

.contact { max-width: 34em; border-top: 1px solid var(--line); }
.contact li { padding-block: 1.125rem; border-bottom: 1px solid var(--line); }
.contact span { display: block; color: var(--muted); font-size: .9375em; }
.contact a {
  display: inline-block;
  padding-block: .2rem;
  font-size: min(1.1875em, 5.2vw); /* the agent's email fits on one line down to 320px */
  overflow-wrap: anywhere;
}

/* Footer: socials and Spotlight badge above the copyright on phones, one row on wider screens. */

.site-footer {
  background: var(--dark);
  color: var(--on-dark-muted);
  font-size: .875rem;
  padding-block: 1.75rem;
}
.site-footer p { margin: 0; }

.site-footer .wrap {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.25rem; }

.spotlight {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 5px 13px 5px 6px;
  border-radius: 999px;
  background: var(--spotlight);
  color: #fff;
  font-size: .8125rem;
  letter-spacing: .01em;
  white-space: nowrap;
  text-decoration: none;
}
.spotlight:hover { background: color-mix(in srgb, var(--spotlight) 85%, #fff); }
.spotlight img { width: 21px; height: 20px; }

.social { display: flex; }
.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--on-dark-muted);
}
.social a:hover { color: var(--on-dark); background: rgb(255 255 255 / .08); }
.social svg { width: 22px; height: 22px; }

@media (min-width: 48rem) {
  .site-footer .wrap { flex-direction: row; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .poster:hover { transform: none; }
}