/* One typeface, black on off-white, hairlines and huge tight type.
   Tailwind reads the color tokens through tailwind.config.cjs. */

/* Archivo, self-hosted from Google Fonts v25. One variable file per style and subset, declared at 500 and 700
   like Google does, so weights in between (prose bold is 600) round to 700 as they did with the Google CSS. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-normal-latin.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: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-normal-latin.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: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-italic-latin.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: 'Archivo';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-italic-latin.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: 'Archivo';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: 242 242 242;
  --ink: 0 0 0;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --display-xl: clamp(3.4rem, 7.4vw, 7rem);
  --display-lg: clamp(2.6rem, 5vw, 4.75rem);
  --display-md: clamp(2rem, 3.4vw, 3.25rem);
  color-scheme: light;
}

/* Colour themes, picked with the swatches on the home page (theme-liquid.js). Text stays black. */
html.theme-1 { --paper: 180 183 192; }
html.theme-2 { --paper: 242 94 58; }
html.theme-3 { --paper: 138 150 65; }
html.theme-4 { --paper: 180 29 35; }

html {
  scroll-behavior: smooth;
}

body {
  background-color: rgb(var(--paper));
  color: rgb(var(--ink));
  font-size: 0.875rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible {
  outline: 2px solid rgb(var(--ink));
  outline-offset: 3px;
}

/* ---- Type ---- */
.display-xl,
.display-lg,
.display-md {
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.045em;
}

.display-xl { font-size: var(--display-xl); }
.display-lg { font-size: var(--display-lg); }
.display-md { font-size: var(--display-md); }

.label {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.body-copy {
  font-size: 0.9375rem;
  line-height: 1.3;
  max-width: 34ch;
}

/* ---- Pieces ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  background: rgb(var(--ink));
  color: #f2f2f2;
  padding: 0.5rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: transform 300ms var(--ease-out-expo);
}

.pill:hover {
  transform: scale(1.04);
}

.pill-ghost {
  background: transparent;
  color: rgb(var(--ink));
  box-shadow: inset 0 0 0 1px rgb(var(--ink));
}

/* Theme swatches: solid colour dots; the active one gets a black ring.
   The attribute selector outranks the Tailwind button reset that clears backgrounds. */
.swatch[data-theme-mode] {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgb(var(--ink) / 0.25);
  cursor: pointer;
  transition: transform 300ms var(--ease-out-expo), box-shadow 300ms var(--ease-out-expo);
}

.swatch[data-theme-mode]:hover {
  transform: scale(1.2);
}

.swatch[data-theme-mode][aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgb(var(--ink) / 0.25), 0 0 0 2px rgb(var(--paper)), 0 0 0 3.5px rgb(var(--ink));
}

/* Table-like rows with hairlines, the reference's "awards" list. */
.rows > * {
  border-bottom: 1px solid rgb(var(--ink) / 0.18);
}

.rows > *:first-child {
  border-top: 1px solid rgb(var(--ink) / 0.18);
}

.hairline {
  border-color: rgb(var(--ink) / 0.18);
}

.underline-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.underline-link:hover {
  text-decoration-thickness: 2px;
}

/* ---- Motion ----
   Text in .lines (one <span> per line) pours in through an SVG "goo" blur, other .reveal
   blocks fade in from a blur. Scripts show them; without JS nothing is hidden. */
html.js .lines > *,
html.js .reveal {
  visibility: hidden;
}

/* The loading rule starts collapsed; intro.js grows it (or sets it to its full height). */
html.js [data-intro-line] {
  height: 0;
}

.lines > * {
  display: block;
}

.lines > * > * {
  display: block;
}

.reveal {
  will-change: opacity, filter;
}

/* Floating images in the hero drift a little with the scroll position. */
.float {
  will-change: transform;
}

/* ---- Menu overlay ---- */
.menu-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms var(--ease-out-expo), visibility 0s linear 500ms;
}

.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ---- Articles ---- */
html .prose {
  --tw-prose-body: rgb(var(--ink) / 0.92);
  --tw-prose-headings: rgb(var(--ink));
  --tw-prose-links: rgb(var(--ink));
  --tw-prose-bold: rgb(var(--ink));
  --tw-prose-counters: rgb(var(--ink) / 0.5);
  --tw-prose-bullets: rgb(var(--ink) / 0.5);
  --tw-prose-hr: rgb(var(--ink) / 0.18);
  --tw-prose-quotes: rgb(var(--ink));
  --tw-prose-quote-borders: rgb(var(--ink));
  --tw-prose-captions: rgb(var(--ink) / 0.5);
  --tw-prose-code: rgb(var(--ink));
  --tw-prose-pre-code: #f2f2f2;
  --tw-prose-pre-bg: #000;
  --tw-prose-th-borders: rgb(var(--ink) / 0.3);
  --tw-prose-td-borders: rgb(var(--ink) / 0.18);
  font-size: 1.0625rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

html .prose :where(h2, h3) {
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

html .prose :where(h2) {
  font-size: 2.2em;
}

html .prose :where(a) {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .pill,
  .menu-overlay,
  .swatch {
    transition: none;
  }
}

@media print {
  #site-header,
  #site-footer,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}