/* RemindHistory.online — shared stylesheet */

@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --paper: #f4eee2;
  --paper-2: #ebe3d3;
  --card: #fbf8f1;
  --ink: #1f1a15;
  --ink-2: #4a4239;
  --muted: #6e655a;
  --rule: #d6ccb9;
  --accent: #7c2d22;
  --accent-ink: #fbf8f1;
  --good: #3f6b3a;
  --emblem: url("../img/emblem.png");
  --logo: url("../img/logo-ink.png");

  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --measure: 66ch;
  --wrap: 1120px;
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17140f;
    --paper-2: #1f1b15;
    --card: #221d17;
    --ink: #ece4d4;
    --ink-2: #cfc5b3;
    --muted: #a3988a;
    --rule: #3a3329;
    --accent: #d08a72;
    --accent-ink: #17140f;
    --good: #9cc08f;
    --emblem: url("../img/emblem-light.png");
    --logo: url("../img/logo-light.png");
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1875rem; /* 19px */
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
s { color: var(--muted); }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

.wrap { width: min(var(--wrap), 100% - 2rem); margin-inline: auto; }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { margin-top: 2.25rem; }
.prose h3:first-child { margin-top: 0; }
.aside { color: var(--muted); font-style: italic; }
.small { font: .8rem/1.5 var(--sans); color: var(--muted); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.brand { display: flex; align-items: center; gap: .65rem; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.3rem; letter-spacing: .02em; white-space: nowrap; }
.brand::before { content: ""; width: 46px; height: 28px; background: var(--emblem) center / contain no-repeat; flex: none; }
.brand small { font-weight: 400; font-size: 1em; color: var(--muted); margin-left: -.65rem; }
.nav { display: flex; gap: .15rem; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-family: var(--sans); font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase; padding: .5rem .6rem; border-radius: var(--radius); white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: var(--paper-2); }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.menu-btn { display: none; }

@media (max-width: 980px) {
  .menu-btn {
    display: inline-flex; align-items: center; gap: .4rem; background: none; border: 1px solid var(--rule); color: var(--ink);
    font: 500 .875rem var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: .45rem .7rem; border-radius: var(--radius); cursor: pointer;
  }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule); padding: .5rem 1rem 1rem;
  }
  .nav.open { display: flex; }
  .nav a { padding: .8rem .25rem; border-bottom: 1px solid var(--rule); border-radius: 0; font-size: .95rem; }
  .nav a[aria-current="page"] { box-shadow: none; color: var(--accent); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; color: #f6efe2; overflow: hidden;
  min-height: min(78vh, 680px); display: grid; align-items: end;
  background: #241c15;
}
.hero::before {
  content: ""; position: absolute; z-index: -2; right: -3%; top: 50%; translate: 0 -54%;
  width: min(62vw, 760px); aspect-ratio: 425 / 257;
  background: url("../img/emblem-light.png") center / contain no-repeat; opacity: .2;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 85% 40%, transparent 0%, rgba(20,15,10,.5) 70%),
    linear-gradient(180deg, rgba(20,15,10,0) 40%, rgba(20,15,10,.75) 100%);
}
.hero .wrap { padding: 6rem 0 4rem; }
.eyebrow {
  font-family: var(--sans); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 1rem; color: var(--muted);
}
.hero .eyebrow { color: #e3d6bf; }
.hero h1 { font-weight: 500; font-size: clamp(2.6rem, 7vw, 5.25rem); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 1rem; max-width: 14ch; }
.hero .lede { font-style: italic; font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 0 0 2rem; color: #efe5d3; max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero .credit { position: absolute; right: 1rem; bottom: .6rem; font: .72rem var(--sans); color: rgba(246,239,226,.6); margin: 0; }
@media (max-width: 720px) {
  .hero::before { width: 120vw; right: -30%; top: 30%; opacity: .14; }
  .hero .credit { position: static; padding: 0 1rem 1rem; }
}

.btn {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; cursor: pointer;
  font: 500 .9rem var(--sans); letter-spacing: .05em; text-transform: uppercase;
  padding: .85rem 1.3rem; border-radius: var(--radius); border: 1px solid transparent; background: none; color: inherit;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: currentColor; color: inherit; }
.btn-ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.hero .btn-primary { background: #f4eee2; color: #1f1a15; }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Page header (inner pages) ---------- */
.page-head { padding: 4.5rem 0 2.5rem; border-bottom: 1px solid var(--rule); }
.page-head h1 { font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.08; margin: 0 0 .75rem; max-width: 22ch; }
.page-head .lede { font-size: 1.3rem; color: var(--ink-2); font-style: italic; margin: 0; max-width: var(--measure); }
.crumbs { font: .8rem var(--sans); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 1.25rem; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.page-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }

/* ---------- Sections ---------- */
.section { padding: 4.5rem 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section-alt { background: var(--paper-2); }
h2 { font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.15; margin: 0 0 1.25rem; }
h3 { font-weight: 600; font-size: 1.35rem; line-height: 1.25; margin: 0 0 .5rem; }

.split { display: grid; grid-template-columns: 1fr 1.6fr; gap: 3rem 4rem; align-items: start; }
.split > :first-child { position: sticky; top: 96px; }
.split > * { min-width: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split > :first-child { position: static; } }

.dropcap::first-letter { float: left; font-size: 3.6em; line-height: .85; padding: .08em .1em 0 0; color: var(--accent); font-weight: 500; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin: 2rem 0 0; border-top: 1px solid var(--rule); }
.facts div { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--rule); }
.facts dt { font: .75rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: .2rem 0 0; font-size: 1.3rem; line-height: 1.25; }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.card {
  position: relative; display: flex; flex-direction: column; gap: .5rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.75rem 1.5rem 1.5rem; color: inherit; text-decoration: none; transition: border-color .2s, transform .2s;
}
a.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card .num { font: .75rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.card p { margin: 0; color: var(--ink-2); font-size: 1.05rem; }
.card .more { margin-top: auto; padding-top: 1rem; font: 500 .82rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
/* Five cards: three on the first row, two wider ones on the second. */
@media (min-width: 900px) {
  .cards-5 { grid-template-columns: repeat(6, 1fr); }
  .cards-5 > * { grid-column: span 2; }
  .cards-5 > :nth-child(n+4) { grid-column: span 3; }
}
.status { display: inline-block; font: .7rem var(--sans); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--rule); color: var(--muted); padding: .15rem .5rem; border-radius: 99px; align-self: flex-start; }

/* ---------- Notice ---------- */
.notice {
  border-left: 3px solid var(--accent); background: var(--card); padding: 1.25rem 1.5rem; border-radius: 0 var(--radius) var(--radius) 0;
  max-width: var(--measure); font-size: 1.05rem; color: var(--ink-2);
}
.notice > :first-child { margin-top: 0; }
.notice > :last-child { margin-bottom: 0; }
.notice strong { color: var(--ink); font-weight: 600; }
.notice-true { border-left-color: var(--good); }
.notice-true .eyebrow { color: var(--good); margin-bottom: .5rem; }
.notice ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.notice li { margin-bottom: .35rem; }

/* ---------- Stamp ---------- */
.stamp {
  display: inline-block; font: 700 .78rem var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); border: 2px solid var(--accent); border-radius: 3px; padding: .3rem .6rem; rotate: -4deg; opacity: .85;
}

/* ---------- Fact of the moment (home) ---------- */
.factbox {
  position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 2.25rem 2rem 1.75rem; text-align: center;
}
.factbox .stamp { position: absolute; right: 1.25rem; top: 1rem; }
.factbox blockquote { margin: .5rem auto 1.5rem; max-width: 30ch; font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1.2; font-weight: 500; min-height: 3.6em; display: grid; place-items: center; text-wrap: balance; }
.factbox .btn { color: var(--accent); }
.factbox .small { margin: 1rem 0 0; }
@media (max-width: 560px) { .factbox .stamp { position: static; margin-bottom: 1rem; } }

/* ---------- Logo plate ---------- */
.plate { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 2rem 1.5rem 1.25rem; text-align: center; }
.plate .logo { width: min(100%, 360px); aspect-ratio: 440 / 346; margin: 0 auto; background: var(--logo) center / contain no-repeat; }
.plate figcaption { font: .82rem/1.5 var(--sans); color: var(--muted); margin-top: 1rem; }

/* ---------- Exhibits (fake facts) and timeline ---------- */
.entries { display: grid; gap: 2.5rem; }
.entry { display: grid; grid-template-columns: 170px 1fr; gap: 1.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.entry:first-child { border-top: 0; padding-top: 0; }
.entry > * { min-width: 0; }
.entry .when, .entry time { font: .8rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding-top: .45rem; }
.entry .when small { display: block; color: var(--muted); letter-spacing: .06em; margin-top: .35rem; text-transform: none; font-size: .78rem; line-height: 1.4; }
.entry h2, .entry h3 { font-weight: 500; font-size: clamp(1.45rem, 2.6vw, 1.9rem); line-height: 1.2; margin: 0 0 .6rem; text-wrap: balance; }
.entry p { margin: 0 0 .8em; max-width: var(--measure); }
.entry .source { font: .85rem/1.5 var(--sans); color: var(--muted); }
.entry .source b { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; }
@media (max-width: 640px) { .entry { grid-template-columns: 1fr; gap: .5rem; } }

details.truth { margin-top: 1rem; max-width: var(--measure); border: 1px dashed var(--rule); border-radius: var(--radius); background: var(--card); }
details.truth summary { cursor: pointer; padding: .6rem .9rem; font: 500 .8rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--good); }
details.truth p { margin: 0; padding: 0 .9rem .9rem; font-size: 1.05rem; color: var(--ink-2); }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; }
table.compare { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
table.compare th { font: .75rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: left; padding: .6rem .9rem .6rem 0; border-bottom: 1px solid var(--ink-2); }
table.compare td { padding: .8rem .9rem .8rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.compare td:first-child { font-weight: 600; white-space: nowrap; }

/* ---------- Q&A ---------- */
.qa { margin: 0; max-width: var(--measure); }
.qa dt { font-weight: 600; font-size: 1.25rem; margin-top: 1.5rem; }
.qa dt:first-child { margin-top: 0; }
.qa dd { margin: .25rem 0 0; color: var(--ink-2); }

/* ---------- Zoo debate ---------- */
.scoreboard {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; text-align: center;
  background: #1c1712; color: #f1e8d8; border-radius: var(--radius); padding: 1.75rem 1.25rem;
}
.scoreboard .team { font: .8rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #a3988a; }
.scoreboard .score { font-size: clamp(3rem, 9vw, 5rem); line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; }
.scoreboard .vs { font-style: italic; color: #a3988a; font-size: 1.3rem; }
.scoreboard .note { grid-column: 1 / -1; font: .78rem var(--sans); color: #a3988a; margin: 0; }

.speakers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }

.round { padding-top: 2.5rem; margin-top: 2.5rem; border-top: 1px solid var(--rule); }
.round:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.round-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; margin-bottom: 1.25rem; }
.round-title .num { font: .75rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.round-title h3 { margin: 0; font-weight: 500; font-size: 1.7rem; }
.exchange { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 720px) { .exchange { grid-template-columns: 1fr; } }
.speech { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem 1.4rem; }
.speech .who { font: .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.speech p { margin: 0 0 .7em; }
.speech p:last-child { margin-bottom: 0; }
.speech.zoo { border-top: 3px solid var(--good); }
.speech.nozoo { border-top: 3px solid var(--muted); }
.ruling { margin: 1.25rem 0 0; padding: .9rem 1.2rem; border-left: 3px solid var(--accent); background: var(--card); font-style: italic; color: var(--ink-2); border-radius: 0 var(--radius) var(--radius) 0; }
.ruling b { font: 600 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--accent); margin-right: .5rem; }

.verdict { text-align: center; max-width: 46rem; margin-inline: auto; }
.verdict .big { font-size: clamp(2.4rem, 7vw, 4.5rem); line-height: 1.05; font-weight: 500; margin: .5rem 0 1rem; }
.verdict p { margin: 0 auto 1em; max-width: 56ch; }

.vote { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.75rem 1.5rem; text-align: center; }
.vote-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 1.25rem 0 1rem; }
.vote .btn-ghost { color: var(--ink-2); }
.vote output { display: block; min-height: 3.2em; font-style: italic; color: var(--ink-2); max-width: 52ch; margin-inline: auto; }

.jokes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.25rem; }
.jokes li { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem 1.4rem; }
.jokes .q { font-weight: 600; margin: 0 0 .35rem; }
.jokes .a { margin: 0; color: var(--ink-2); font-style: italic; }

/* ---------- Procrastination ---------- */
.progress { max-width: var(--measure); }
.progress-track { height: 14px; border: 1px solid var(--rule); border-radius: 99px; background: var(--card); overflow: hidden; }
.progress-bar { height: 100%; width: 12%; background: var(--accent); border-radius: 99px; transition: width .6s ease; }
.progress-label { display: flex; justify-content: space-between; gap: 1rem; font: .8rem var(--sans); color: var(--muted); margin-top: .5rem; }
.todo { font: .85rem var(--sans); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: .1rem .45rem; border-radius: 3px; white-space: nowrap; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.checklist li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; align-items: start; }
.checklist li::before { content: "✓"; font: 700 .8rem var(--sans); color: var(--good); border: 1px solid var(--rule); border-radius: 3px; text-align: center; line-height: 1.3rem; height: 1.4rem; margin-top: .25rem; background: var(--card); }
.checklist li.undone::before { content: ""; }
.checklist li.undone { color: var(--muted); }
.toc { margin: 0; padding-left: 1.3rem; }
.toc li { margin-bottom: .3rem; }
.toc .status { margin-left: .5rem; vertical-align: .15em; }
.solution { margin-top: 1.5rem; }
.solution output { display: block; margin-top: 1rem; min-height: 3.2em; font-style: italic; color: var(--ink-2); max-width: var(--measure); }
.trail-off::after { content: ""; display: inline-block; width: .55em; height: 1.05em; background: var(--ink); vertical-align: -.15em; margin-left: .15em; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Vegan reasons ---------- */
.reasons { list-style: none; margin: 0; padding: 0; counter-reset: reason; display: grid; gap: 0; }
.reasons > li { counter-increment: reason; display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.5rem; padding: 2rem 0; border-top: 1px solid var(--rule); }
.reasons > li:first-child { border-top: 0; padding-top: 0; }
.reasons > li::before { content: counter(reason, decimal-leading-zero); font-size: 3.4rem; line-height: 1; color: var(--accent); font-weight: 500; }
.reasons > li > div { min-width: 0; }
.reasons .was { font: .78rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .35rem; }
.reasons h3 { font-weight: 500; font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: .5rem; }
.reasons p { margin: 0 0 .8em; max-width: var(--measure); }
.reasons p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .reasons > li { grid-template-columns: 1fr; gap: .5rem; } .reasons > li::before { font-size: 2.4rem; } }

.detector { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.75rem 1.5rem; text-align: center; }
.detector .btn { margin-top: .5rem; }
.detector output { display: block; min-height: 3.2em; margin-top: 1rem; font-style: italic; color: var(--ink-2); max-width: 52ch; margin-inline: auto; }

/* ---------- Footer ---------- */
.site-footer { background: #1c1712; color: #d9cfbd; padding: 3.5rem 0 2rem; font-size: 1rem; }
.site-footer a { color: #f1e8d8; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.footer-grid h2 { font: .75rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #a3988a; margin: 0 0 .75rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.footer-grid ul a { text-decoration: none; }
.footer-grid ul a:hover { text-decoration: underline; }
.footer-brand { display: flex; align-items: center; gap: .6rem; font-size: 1.3rem; font-weight: 600; color: #f1e8d8; margin-bottom: .5rem; }
.footer-brand::before { content: ""; width: 44px; height: 27px; background: url("../img/emblem-light.png") center / contain no-repeat; }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #3a3329; font: .8rem var(--sans); color: #a3988a; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Animations ---------- */

/* Scroll-in: site.js adds .reveal to things below the fold, then .in once they are on screen. */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

/* Rubber stamp landing on the paper. */
@keyframes thunk {
  0% { scale: 2.6; opacity: 0; rotate: -16deg; }
  55% { scale: .9; opacity: 1; rotate: -2deg; }
  75% { scale: 1.06; }
  100% { scale: 1; opacity: .85; rotate: -4deg; }
}
.stamp.in { animation: thunk .45s cubic-bezier(.3, .7, .3, 1) both; }
.when .stamp { margin-top: .9rem; font-size: .68rem; }

/* The riders: trot in on load, gallop off and back when poked. */
@keyframes trot { 0%, 100% { rotate: 0deg; } 25% { rotate: -1.6deg; } 75% { rotate: 1.6deg; } }
@keyframes ride-in { from { transform: translateX(-120vw); } to { transform: none; } }
@keyframes gallop-off {
  0% { transform: none; }
  48% { transform: translateX(130vw); }
  48.01% { transform: translateX(-170vw); }
  100% { transform: none; }
}
.hero::before { transform-origin: 50% 100%; animation: ride-in 1.9s cubic-bezier(.2, .7, .2, 1) both, trot .3s ease-in-out 6; }
.hero.gallop::before { animation: gallop-off 2.8s ease-in-out both, trot .26s ease-in-out 11; }
.brand::before { transform-origin: 50% 100%; }
.brand:hover::before { animation: trot .28s ease-in-out 4; }
button.credit { background: none; border: 0; cursor: pointer; text-align: left; text-decoration: underline dotted; text-underline-offset: .25em; }
button.credit:hover { color: #f6efe2; }

/* About: the sticker gets slapped onto the page, and wiggles when you bother it. */
.sticker { margin: 1.75rem 0 0; display: flex; align-items: center; gap: 1.5rem; }
.sticker img {
  width: 118px; flex: none; rotate: -6deg; cursor: pointer; transition: rotate .25s ease, scale .25s ease;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 6px 9px rgba(0, 0, 0, .3));
}
.sticker img:hover { rotate: 5deg; scale: 1.07; }
.sticker figcaption { font: .82rem/1.5 var(--sans); color: var(--muted); max-width: 24ch; }
@keyframes slap {
  0% { scale: 2; rotate: 16deg; opacity: 0; }
  60% { scale: .94; rotate: -9deg; opacity: 1; }
  80% { scale: 1.04; rotate: -4deg; }
  100% { scale: 1; rotate: -6deg; }
}
.sticker.in img { animation: slap .5s cubic-bezier(.3, .7, .3, 1) both; }

/* Fake facts: the truth drawer slides open. */
@keyframes drawer { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
details.truth[open] p { animation: drawer .35s ease both; }

/* Gerlingen: the U6 rolls in and stops at the buffer. */
.u6 { margin-top: 1.5rem; max-width: 32rem; }
.u6-track { position: relative; height: 2.6rem; border-bottom: 2px solid var(--ink-2); margin-bottom: 1rem; }
.u6-track::after { content: ""; position: absolute; right: 0; bottom: 0; width: 6px; height: 1.2rem; background: var(--accent); border-radius: 2px 2px 0 0; }
.u6-end { position: absolute; right: 0; top: 0; font: .66rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.u6-tram {
  position: absolute; bottom: 3px; left: calc(100% - 4.4rem - 10px); width: 4.4rem; text-align: center;
  font: 700 .78rem var(--sans); letter-spacing: .08em; color: #1f1a15; background: #f2c200;
  padding: .22rem 0; border-radius: 9px 9px 3px 3px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18);
}
@keyframes u6-ride {
  0% { left: 0; }
  78% { left: calc(100% - 4.4rem - 6px); }
  90% { left: calc(100% - 4.4rem - 15px); }
  100% { left: calc(100% - 4.4rem - 10px); }
}
@keyframes u6-bump { 0%, 100% { transform: none; } 30% { transform: translateX(5px); } 55% { transform: translateX(-13px); } 80% { transform: translateX(-2px); } }
.u6.in .u6-tram { animation: u6-ride 2.8s cubic-bezier(.3, .6, .3, 1) both; }
.u6.push .u6-tram { animation: u6-bump .55s ease; }
.u6 output { display: block; margin-top: .75rem; min-height: 1.7em; font-style: italic; color: var(--ink-2); }
.u6 .btn { color: var(--ink-2); padding: .6rem 1rem; font-size: .8rem; }

/* Zoo: the penguin's closing statement, a shy button and a jumpy scoreboard. */
.penguin-stage { height: 4.6rem; margin: .25rem 0 .75rem; padding-left: 150px; display: flex; align-items: flex-end; }
.penguin { background: none; border: 0; padding: 0; cursor: pointer; font-size: 3.2rem; line-height: 1; transform-origin: 50% 92%; transform: translate(8px, -.42em) rotate(90deg); }
@keyframes waddle-fall {
  0% { transform: translateX(-150px) rotate(-9deg); }
  10% { transform: translateX(-120px) rotate(9deg); }
  20% { transform: translateX(-90px) rotate(-9deg); }
  30% { transform: translateX(-60px) rotate(9deg); }
  40% { transform: translateX(-30px) rotate(-9deg); }
  50% { transform: translateX(0) rotate(0deg); }
  56% { transform: translateX(0) translateY(-5px) rotate(0deg); }
  62%, 74% { transform: translateX(0) rotate(0deg); }
  88% { transform: translate(8px, -.42em) rotate(100deg); }
  94% { transform: translate(8px, -.42em) rotate(84deg); }
  100% { transform: translate(8px, -.42em) rotate(90deg); }
}
.penguin-stage.in .penguin { animation: waddle-fall 3s ease-in-out both; }
@keyframes bump { 0%, 100% { scale: 1; } 40% { scale: 1.25; } }
.score.bump { animation: bump .3s ease; }
.vote .btn { transition: transform .18s ease-out, filter .2s, background-color .2s; }

/* Procrastination: oh look, a bird. */
@keyframes bird-fly {
  0% { transform: translate(0, 0) scaleX(-1); }
  25% { transform: translate(30vw, -7vh) scaleX(-1); }
  50% { transform: translate(60vw, 3vh) scaleX(-1); }
  75% { transform: translate(90vw, -6vh) scaleX(-1); }
  100% { transform: translate(125vw, 0) scaleX(-1); }
}
.bird { position: fixed; left: -4rem; top: 32vh; z-index: 60; font-size: 2.4rem; pointer-events: none; animation: bird-fly 3.4s linear forwards; }

/* Vegan: headings get crossed out as you reach them, and the detector pretends to scan. */
.js .reasons .was s { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0% 1px; transition: background-size .7s ease .45s; }
.js .reasons li.in .was s { background-size: 100% 1px; }
.scan { height: 4px; max-width: 18rem; margin: 1.25rem auto 0; border-radius: 99px; background: var(--rule); overflow: hidden; }
.scan::after { content: ""; display: block; width: 35%; height: 100%; border-radius: 99px; background: var(--accent); }
@keyframes scan-sweep { from { transform: translateX(0); } to { transform: translateX(186%); } }
.scanning .scan::after { animation: scan-sweep .6s ease-in-out infinite alternate; }
.btn:disabled { opacity: .6; cursor: progress; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }