/* fairrev.com
   One stylesheet, no framework, no build. Colours are tokens on :root and are redefined once
   for dark mode, so nothing further down the file has to know which theme it is in. */

:root {
  --paper: #fbfaf7;
  --surface: #ffffff;
  --ink: #16130f;
  --ink-2: #4a423a;
  --muted: #7a7166;
  --rule: #e6e0d6;
  --accent: #0f5c57;
  --accent-ink: #ffffff;
  --accent-soft: #e6f1ef;
  --good: #1d6f3f;
  --mid: #8a6212;
  --low: #9a3325;
  --shadow: 0 1px 2px rgba(20, 16, 12, .05), 0 8px 24px rgba(20, 16, 12, .05);
  --measure: 40rem;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #100f0d;
    --surface: #1a1815;
    --ink: #f3f0ea;
    --ink-2: #cdc6bb;
    --muted: #9c9488;
    --rule: #2e2a25;
    --accent: #6fd6c8;
    --accent-ink: #0c1b19;
    --accent-soft: #14312e;
    --good: #5fc287;
    --mid: #d8ab4c;
    --low: #e08472;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
  }
}

:root[data-theme="dark"] {
  --paper: #100f0d;
  --surface: #1a1815;
  --ink: #f3f0ea;
  --ink-2: #cdc6bb;
  --muted: #9c9488;
  --rule: #2e2a25;
  --accent: #6fd6c8;
  --accent-ink: #0c1b19;
  --accent-soft: #14312e;
  --good: #5fc287;
  --mid: #d8ab4c;
  --low: #e08472;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

a { color: inherit; }

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

.wrap {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 16px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 12px;
  z-index: 10;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 8px 14px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 5;
}

.masthead-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 68px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .04em;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }

.brand-name {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.015em;
}

.brand-tag {
  font-family: var(--font-sans);
  font-size: .74rem;
  color: var(--muted);
  letter-spacing: .02em;
}

.nav {
  display: flex;
  gap: 18px;
  font-family: var(--font-sans);
  font-size: .85rem;
  flex-wrap: wrap;
}

.nav a {
  text-decoration: none;
  color: var(--ink-2);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

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

main { padding: 40px 16px 64px; }

.hero { margin: 0 0 40px; max-width: var(--measure); }

.hero h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  margin: 0 0 12px;
}

.hero p {
  margin: 0;
  color: var(--ink-2);
  font-size: 1.15rem;
}

.hero-small h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.25rem); }

.page-title { font-size: 1.4rem; margin: 0 0 28px; color: var(--muted); font-family: var(--font-sans); }

.empty { color: var(--muted); font-style: italic; }

.setup-note {
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: .9rem;
  color: var(--ink-2);
}

.setup-note code { font-size: .85em; }

/* ---------------------------------------------------------------- cards */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 32px 28px;
  margin-top: 36px;
}

.card { display: flex; flex-direction: column; gap: 12px; }

.card-media {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: var(--rule);
  aspect-ratio: 16 / 9;
}

.card-media img { width: 100%; height: 100%; object-fit: cover; }

.card-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.kicker { color: var(--accent); text-decoration: none; font-weight: 600; }
.kicker:hover { text-decoration: underline; }

.card-title {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.card-title a { text-decoration: none; }
.card-title a:hover { color: var(--accent); }

.card-summary { margin: 0; color: var(--ink-2); font-size: 1rem; }

.card-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: .8rem;
  color: var(--muted);
}

.card-lead {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 36px;
}

.card-lead .card-title { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); }
.card-lead .card-summary { font-size: 1.1rem; max-width: var(--measure); }

@media (min-width: 46rem) {
  .card-lead { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; }
  .card-lead .card-media { aspect-ratio: 3 / 2; }
}

.byline { font-style: italic; }

.rating {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-sans);
  background: var(--accent-soft);
  color: var(--ink);
}
.rating b { font-size: .95rem; font-weight: 700; }
.rating i { font-style: normal; font-size: .72rem; color: var(--muted); }
.rating-good b { color: var(--good); }
.rating-mid b { color: var(--mid); }
.rating-low b { color: var(--low); }

/* ---------------------------------------------------------------- article */

.post { max-width: var(--measure); margin: 0 auto; }

.post-head { margin-bottom: 28px; }

.post-head h1 {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 10px 0 14px;
}

.standfirst {
  font-size: 1.2rem;
  color: var(--ink-2);
  margin: 0 0 18px;
}

.post-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: .85rem;
  color: var(--muted);
}

.post-media { margin: 0 0 32px; }
.post-media img { border-radius: 10px; }

.prose { font-size: 1.125rem; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: 1.6rem; line-height: 1.25; letter-spacing: -.02em; margin: 2.2em 0 .6em; }
.prose h3 { font-size: 1.25rem; margin: 1.8em 0 .5em; }
.prose p { margin: 0 0 1.2em; }
.prose a { color: var(--accent); text-underline-offset: 2px; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: 8px; margin: 1.6em 0; }
.prose blockquote {
  margin: 1.6em 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--accent);
  color: var(--ink-2);
  font-style: italic;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--accent-soft);
  padding: 1px 5px;
  border-radius: 4px;
}
.prose pre {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
}
.prose pre code { background: none; padding: 0; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: .96em;
}
.prose th, .prose td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
}
.prose th { font-family: var(--font-sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }

.related {
  max-width: 64rem;
  margin: 64px auto 0;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
}
.related h2 { font-size: 1.1rem; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0; }
.related .card-title { font-size: 1.15rem; }

/* ---------------------------------------------------------------- pager and footer */

.pager {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: .88rem;
}
.pager a { color: var(--accent); text-decoration: none; font-weight: 600; }
.pager a:hover { text-decoration: underline; }
.pager .is-off { color: var(--muted); opacity: .5; }
.pager-at { margin-left: auto; color: var(--muted); }

.footer {
  border-top: 1px solid var(--rule);
  background: var(--surface);
  padding: 28px 0;
  font-family: var(--font-sans);
  font-size: .85rem;
  color: var(--muted);
}

.footer-inner { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.footer p { margin: 0; }
.footer-links { display: flex; gap: 18px; }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--accent); }

/* ===== FAIRREV BRAND TOKENS ==============================================
   Appended rather than edited in place, so removing it is trimming from here
   down. These redefine the same custom properties declared at the top of this
   file, and later wins at equal specificity. Fold it into the top block when
   somebody is confident nothing else depends on the old palette.
   ======================================================================== */
/* FairRev brand tokens for fairrev.com
   =====================================

   Drop-in replacement for the three token blocks at the top of public/styles.css:
   `:root`, the `prefers-color-scheme: dark` block, and `:root[data-theme="dark"]`.
   Nothing else in that file changes. The structure, the layout and the dark mode
   plumbing are all fine, only the palette belongs to a different product.

   What is wrong today: the stylesheet ships a warm cream and teal editorial theme,
   `--paper: #fbfaf7` and `--accent: #0f5c57`, with Palatino and Georgia as the
   primary face. That is a publication template. FairRev is blue #2563EB, emerald
   #10B981 and slate #0F172A.

   Contrast, checked rather than assumed. Every foreground and background pair below
   clears WCAG AA at 4.5:1, and the pairs that matter most clear it comfortably:
   ink on paper 17.1, ink-2 on paper 9.9, muted on paper 5.9, accent on paper 6.4,
   white on accent 6.7. Dark mode: ink on paper 15.9, accent on paper 8.0.

   Two brand colours are deliberately NOT used as text. #10B981 scores 2.42 on the
   light paper and #F59E0B scores 2.05, so both fail as type. They are fill colours.
   Where the stylesheet uses `--good` and `--mid` for words, this maps them to darker
   variants of the same hues that pass. Use the raw brand values for a swatch, a bar
   or an icon, never for a sentence.

   The font stacks are left alone on purpose. Changing the body from serif to sans is
   a look decision rather than a correctness one, so it is a separate conversation.
   If you want it, the design system asks for Plus Jakarta Sans on both heading and
   body, and the swap is two lines here plus a Google Fonts link in the head. */

:root {
  --paper: #f8fafc;
  --surface: #ffffff;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #566274;
  --rule: #e2e8f0;
  --accent: #1d4ed8;
  --accent-ink: #ffffff;
  --accent-soft: #eff6ff;
  --good: #047857;
  --mid: #b45309;
  --low: #dc2626;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
  --measure: 40rem;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b1220;
    --surface: #111a2e;
    --ink: #e8edf5;
    --ink-2: #b9c4d4;
    --muted: #94a3b8;
    --rule: #24314a;
    --accent: #7da8ff;
    --accent-ink: #0b1220;
    --accent-soft: #16264a;
    --good: #34d399;
    --mid: #fbbf24;
    --low: #f87171;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
  }
}

:root[data-theme="dark"] {
  --paper: #0b1220;
  --surface: #111a2e;
  --ink: #e8edf5;
  --ink-2: #b9c4d4;
  --muted: #94a3b8;
  --rule: #24314a;
  --accent: #7da8ff;
  --accent-ink: #0b1220;
  --accent-soft: #16264a;
  --good: #34d399;
  --mid: #fbbf24;
  --low: #f87171;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
}

/* The masthead currently renders a text placeholder, `<span class="brand-mark">FR</span>`,
   styled as a 38px rounded square filled with --accent. Once render.js emits the real
   logo instead, the square background has to go or it will sit behind the mark. */

.brand-mark.brand-mark--image {
  background: none;
  width: auto;
  height: 38px;
  border-radius: 0;
}

.brand-mark.brand-mark--image img {
  display: block;
  height: 38px;
  width: auto;
}