/* Shared theme for every page: Inter, palette tokens (light + dark),
   top bar and footer. Loaded after styles.css and before home.css.
   Inter is used under the SIL Open Font License.
   See src/assets/fonts/OFL-inter.txt. */

@font-face {
  font-family: Inter;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: Inter;
  src: url("../assets/fonts/inter-latin-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  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;
}

/* Palette tokens (homepage palette, used on every page) */
body {
  --home-paper: #f3f0e8;
  --home-ink: #1c1b17;
  --home-muted: #5c574e;
  --home-line: #ddd6c8;
  --home-accent: #0e5c56;
  --home-font: Inter, "Segoe UI", sans-serif;
  --home-wrap: 1080px;
  /* Older pages' tokens, mapped onto the palette */
  --text: var(--home-ink);
  background: var(--home-paper);
  color: var(--home-ink);
}

body :focus-visible {
  outline: 2px solid var(--home-accent);
  outline-offset: 3px;
}

body ::selection {
  background: #d5e6e1;
  color: var(--home-ink);
}

body .skip {
  background: var(--home-paper);
  color: var(--home-ink);
}

body main [id] {
  scroll-margin-top: 84px;
}

/* Top bar */
body .site-header {
  background: var(--home-paper);
  box-shadow: none;
  border-bottom: 1px solid var(--home-line);
  position: sticky;
  top: 0;
}

body .header-inner {
  min-height: 72px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 32px;
}

body .logo {
  font-family: var(--home-font);
  font-weight: 600;
  font-size: 22px;
  color: var(--home-ink);
  letter-spacing: -0.03em;
}

/* Nav links render in ink on the homepage (its link reset sets them to
   inherit), so they do here too. */
body .nav a {
  font-family: var(--home-font);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--home-ink);
}

body .nav a[aria-current="page"],
body .nav a:hover {
  color: var(--home-ink);
}

body .menu-toggle span {
  background: var(--home-ink);
}

/* Footer */
body .site-footer {
  background: var(--home-paper);
  border-top: 1px solid var(--home-line);
  text-align: left;
  padding: 36px 24px 48px;
}

body .footer-social,
body .site-footer p {
  width: min(var(--home-wrap), 100%);
  margin-left: auto;
  margin-right: auto;
}

body .footer-social {
  justify-content: flex-start;
  margin-bottom: 14px;
}

body .site-footer p {
  font-family: var(--home-font);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--home-muted);
}

@media (max-width: 860px) {
  body .header-inner {
    min-height: 64px;
    padding: 10px 16px;
  }

  body .logo {
    font-size: 22px;
  }

  body .nav {
    background: var(--home-paper);
  }
}

@media (prefers-color-scheme: dark) {
  body {
    --home-paper: #131311;
    --home-ink: #f3f0e8;
    --home-muted: #c2bbb0;
    --home-line: #2c2b27;
    --home-accent: #8ecfb8;
    color-scheme: dark;
  }

  body ::selection {
    background: #1d4a44;
    color: var(--home-ink);
  }

  /* Inner pages (Work, Music, Blog, Me): dark versions of the old
     band tints and accents. The homepage does not use these. */
  body:not(.page-home) {
    --muted: var(--home-muted);
    --accent: #7cc3d2;
    --off: #181816;
    --grey: #1c1c1a;
    --teal: #15201f;
    --beige: #211d17;
    --pink: #221819;
    --peach: #231b16;
    --button: #3d5559;
  }

  /* Logos and icons drawn for a white page get a light tile, as on the
     homepage. */
  body:not(.page-home) .logo-row img,
  body:not(.page-home) .tool-row img,
  body:not(.page-home) .edu-logo,
  body:not(.page-home) .cox-logo,
  body:not(.page-home) .medium-mark,
  body:not(.page-home) .stream-row a,
  body:not(.page-home) .mini-row a {
    background: #f4f1ea;
  }

  body:not(.page-home) .logo-row img,
  body:not(.page-home) .tool-row img,
  body:not(.page-home) .edu-logo,
  body:not(.page-home) .cox-logo,
  body:not(.page-home) .medium-mark {
    padding: 6px;
  }

  body:not(.page-home) .stream-row a,
  body:not(.page-home) .mini-row a {
    border-radius: 999px;
    line-height: 0;
  }

  body:not(.page-home) .then-now .mark:not(.app) {
    background: rgba(244, 241, 234, 0.92);
  }

  body:not(.page-home) .contact-form input,
  body:not(.page-home) .contact-form textarea {
    border-color: var(--home-muted);
    color: var(--home-ink);
  }

  body:not(.page-home) .contact-form button {
    color: var(--home-ink);
  }

  body:not(.page-home) .contact-form button:hover {
    background: #4a666b;
  }
}

@media (prefers-color-scheme: dark) {
  .map {
    filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.9);
    border-color: var(--home-line);
  }
}

/* App grid (homepage + Work) */
.home-products {
  list-style: none;
  margin: 28px 0 12px;
  padding: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
  border-top: 1px solid var(--home-line);
  padding-top: 28px;
}

.home-products a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
}

.home-products img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}

.home-products span {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.home-products a:hover span {
  color: var(--home-accent);
}

.home-products a,
.home-products a:hover {
  color: inherit;
  text-decoration: none;
}

.home-products span {
  font-family: var(--home-font);
}


@media (max-width: 860px) {
  .home-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
}

.prose .home-products {
  margin-bottom: 40px;
}

.prose .timeline-title {
  margin-top: 8px;
}

/* Inner pages (Work, Music, Blog, Me): homepage typography.
   Inter and the homepage type scale replace the older Raleway and
   Nunito Sans styles from styles.css. The homepage keeps its own
   rules in home.css, so everything here skips body.page-home. */
body:not(.page-home) {
  --font-display: var(--home-font);
  --font-body: var(--home-font);
  font-family: var(--home-font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  font-synthesis: none;
}

body:not(.page-home) h1,
body:not(.page-home) h2,
body:not(.page-home) h3 {
  font-family: var(--home-font);
  font-weight: 600;
  color: var(--home-ink);
}

body:not(.page-home) h1 {
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

body:not(.page-home) h2,
body:not(.page-home) .product-head h2 {
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}

body:not(.page-home) .product-head h2,
body:not(.page-home) .post-head h2 {
  margin: 0;
}

body:not(.page-home) h3,
body:not(.page-home) .post h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

body:not(.page-home) .year {
  font-family: var(--home-font);
  font-weight: 500;
  font-size: 0.55em;
  letter-spacing: 0.06em;
  vertical-align: 0.15em;
}

body:not(.page-home) strong {
  font-weight: 600;
}

body:not(.page-home) .tagline {
  font-family: var(--home-font);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-top: 4px;
}

body:not(.page-home) .caption {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 4px;
}

/* Links keep their colour; weight and underline follow the homepage. */
body:not(.page-home) .lead a,
body:not(.page-home) .prose a,
body:not(.page-home) .tagline a,
body:not(.page-home) .post a,
body:not(.page-home) .card a,
body:not(.page-home) .edu a,
body:not(.page-home) .back,
body:not(.page-home) .back a {
  font-weight: 500;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

body:not(.page-home) h2 a,
body:not(.page-home) h3 a,
body:not(.page-home) .post h2 a {
  font-weight: inherit;
}

body:not(.page-home) .timeline-title {
  margin-top: 28px;
}

body:not(.page-home) .timeline {
  font-size: 16px;
  line-height: 1.6;
}

body:not(.page-home) .timeline li {
  margin: 4px 0;
}

body:not(.page-home) .timeline .y {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

body:not(.page-home) .disco-index a {
  font-family: var(--home-font);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

body:not(.page-home) .post-date {
  font-family: var(--home-font);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  margin: 6px 0 12px;
}

body:not(.page-home) .contact-form label {
  font-size: 14px;
  font-weight: 500;
}

body:not(.page-home) .contact-form input,
body:not(.page-home) .contact-form textarea {
  font-family: var(--home-font);
  font-size: 16px;
}

body:not(.page-home) .contact-form button {
  font-family: var(--home-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

body:not(.page-home) .form-status {
  font-family: var(--home-font);
  font-weight: 600;
}