/* Bluehour: shared styles (tokens, base, buttons, header, footer). Loaded on every page. */

@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/cabinet-grotesk-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin.woff2") format("woff2");
  font-weight: 400 600;
  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: "Geist Mono";
  src: url("../fonts/geist-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  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;
}

:root {
  color-scheme: light only; /* light mode only, by choice */

  --bg: #EDEFEA;          /* Cirrus */
  --surface: #DDE2DC;     /* Haze */
  --tint: #9FB3A1;        /* Lichen */
  --deep: #0F3B3A;        /* Lagoon Ink */
  --deep-2: #0A2B2A;
  --on-deep: #EDEFEA;
  --on-deep-muted: #A9BDB9;
  --text: #14202B;        /* Night Ferry */
  --text-muted: #4A5866;  /* Harbour Slate */
  --accent: #E2603A;      /* Sodium */
  --on-accent: #14202B;
  --accent-ink: #A3391B;  /* Sodium, deepened for small text such as form errors */
  --shadow: 20 32 43;     /* Night Ferry as rgb triplet */

  --font-display: "Cabinet Grotesk", "Geist", system-ui, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

  --radius-card: 16px;
  --radius-input: 10px;
  --radius-pill: 999px;

  --gutter: clamp(1rem, 4vw, 3rem);
  --container: 1360px;
  --header-h: 72px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base */

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

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

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

/* In-page links land below the fixed header, not under it */
[id] { scroll-margin-block-start: calc(var(--header-h) + 1rem); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

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

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

.skip-link {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-pill);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Buttons */

.btn.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.625rem;
  padding-inline: 1.25rem;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border: 0;               /* also used on <button> */
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.btn.btn:active { transform: translateY(1px) scale(0.98); }

.btn.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn.btn--primary:hover { background: color-mix(in oklab, var(--accent) 88%, var(--text)); }

.btn.btn--lg {
  padding-block: 0.9375rem;
  padding-inline: 1.625rem;
  font-size: 1rem;
}

.btn__icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.3s var(--ease-out);
}
.btn:hover .btn__icon { transform: translateX(3px); }

/* Header */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-block-end: 1px solid color-mix(in oklab, var(--text) 8%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: var(--container);
  height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--text);
}
.brand__mark { width: 20px; height: 24px; color: var(--text); }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}

.site-nav { margin-inline-start: auto; }

.site-nav__list {
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__list a {
  font-size: 0.9375rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.site-nav__list a:hover { color: var(--text); }

.menu-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--text) 16%, transparent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.menu-toggle svg { width: 20px; height: 20px; }

@media (max-width: 899px) {
  .site-nav { margin-inline-start: 0; }
  .site-header__cta { margin-inline-start: auto; }
  .menu-toggle { display: grid; margin-inline-start: 0; }

  .site-nav__list {
    position: absolute;
    inset-block-start: var(--header-h);
    inset-inline: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    background: var(--bg);
    border-block-end: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  }
  .site-nav__list a {
    display: block;
    padding-block: 0.75rem;
    font-size: 1.125rem;
    color: var(--text);
  }
  .js .site-nav__list { display: none; }
  .js .site-nav__list.is-open { display: flex; }
}

@media (max-width: 479px) {
  .site-header__cta { display: none; }
  .menu-toggle { margin-inline-start: auto; }
}


/* Blocksy's content styles load on non-home pages: keep them out of our header and footer */
:where(.site-header, .site-footer) :is(ul, ol) { margin: 0; padding-inline-start: 0; list-style: none; }
:where(.site-header, .site-footer) :is(h2, p, label) { margin: 0; }
:where(.site-footer) label { font-weight: inherit; }
/* Blocksy colours every heading; ours set their own */
.site-footer .footer-letter__title { color: var(--f-text); }

/* Stories and other content pages: our type on Blocksy's content templates */
body:not(.home) #main :is(h1, h2, h3) {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--text);
}
body:not(.home) #main .entry-content { font-family: var(--font-body); font-size: 1.125rem; line-height: 1.65; }
body:not(.home) #main .entry-meta { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-muted); }
body:not(.home) #main, body:not(.home) #main :is(.page-description, p, li) { font-family: var(--font-body); }
body:not(.home) #main .entry-meta img,
body:not(.home) #main .entry-meta .ct-media-container { display: none; }

/*
  Footer: the page ends at night. Night Ferry background, Cirrus text,
  Sodium for the one lamp (the subscribe button and focus). The giant
  wordmark sits half below the bottom edge, like the sun in the logo.
*/

.site-footer {
  --f-text: var(--bg);
  --f-muted: #9AA8B4;
  --f-line: rgb(237 239 234 / 0.12);
  position: relative;
  overflow: hidden;
  background: var(--text);
  color: var(--f-text);
}

.site-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(4rem, 7vw, 6.5rem) 0;
}
.site-footer__inner--bar { padding-block: 0; }

.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

.footer-top {
  display: grid;
  gap: 3.5rem;
  padding-block-end: clamp(3rem, 5vw, 4.5rem);
}

/* Newsletter */
.footer-letter__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.footer-letter__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  margin-block-start: 2rem;
  max-width: 34rem;
}

.footer-letter__field {
  flex: 1 1 14rem;
  display: grid;
  gap: 0.25rem;
}

.footer-letter__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--f-muted);
}

.footer-letter__input {
  padding: 0.25rem 0.1em 0.5rem;
  border: 0;
  border-block-end: 2px solid rgb(237 239 234 / 0.3);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--f-text);
  transition: border-color 0.2s;
}
.footer-letter__input::placeholder { color: var(--f-muted); opacity: 1; font-weight: 500; }
.footer-letter__input:hover { border-block-end-color: rgb(237 239 234 / 0.55); }
.footer-letter__input:focus { outline: none; border-block-end-color: var(--accent); }
.footer-letter__input[aria-invalid="true"] { border-block-end-color: var(--accent); }

.footer-letter__msg {
  flex-basis: 100%;
  margin: 0;
  min-height: 1.4em;
  font-size: 0.875rem;
  color: var(--f-muted);
}
.footer-letter__msg.is-error { color: var(--accent); font-weight: 500; }
.footer-letter__msg.is-done { color: var(--f-text); }

/* Link columns */
.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
}
.footer-links__title {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--f-muted);
}
.footer-links ul {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
}
.footer-links__note { font-size: 0.875rem; color: var(--f-muted); }

/* Bottom bar */
.footer-bar {
  display: grid;
  gap: 1.25rem;
  padding-block: 1.75rem;
  border-block-start: 1px solid var(--f-line);
  font-size: 0.875rem;
  color: var(--f-muted);
}
.footer-bar__credit { margin: 0; }

.footer-bar__social {
  order: 3;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-bar__social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--f-line);
  border-radius: var(--radius-pill);
  color: var(--f-text);
  transition: border-color 0.2s, color 0.2s;
}
.footer-bar__social a:hover { border-color: var(--accent); }
.footer-bar__social svg { width: 1rem; height: 1rem; }

.footer-bar__credit a { text-decoration: underline; text-underline-offset: 0.2em; color: var(--f-text); }

.footer-bar__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The wordmark, between the links and the bottom bar: exactly as wide as the footer's content */
.footer-mark {
  max-width: var(--container);
  margin-inline: auto;
  margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
  padding-inline: var(--gutter);
  container-type: inline-size;
  font-family: var(--font-display);
  font-weight: 800;
  white-space: nowrap;
  color: rgb(237 239 234 / 0.07);
  user-select: none;
}
/*
  Drawn from data-text so it stays out of the text and accessibility checks.
  "Bluehour" in Cabinet Grotesk 800 at -0.05em tracking is 3.705em wide and its ink starts 0.05em in,
  so this size and nudge make the letters run edge to edge of the content box.
*/
.footer-mark::before {
  content: attr(data-text);
  display: block;
  font-size: calc(100cqi / 3.705);
  line-height: 0.78;
  letter-spacing: -0.05em; /* here, not on .footer-mark: an em set there would resolve at 16px */
  margin-inline-start: -0.05em;
}

@media (min-width: 900px) {
  .footer-top {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
  .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-bar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 2rem;
  }
}

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

/* Pages other than the homepage start below the fixed header */
body:not(.home) #main { padding-block-start: var(--header-h); }

/* Logged in: sit below the admin bar (it only stays fixed from 601px up). WordPress already pads anchor scrolling for the bar. */
@media (min-width: 601px) {
  .admin-bar .site-header { inset-block-start: var(--wp-admin--admin-bar--height, 32px); }
}