/* Based on the original Figma Sites design of bartmatusiak.com, made responsive */

:root {
  --bg: #04100e;
  /* Cards and the contact form: dark green, darker on the left (Bart, 2026-10-26), a touch greener on hover. */
  --card-from: #020d09;
  --card-to: #04160f;
  --card-hover: #05190f;
  --line: rgba(171, 186, 186, 0.12);
  /* The edge of anything you click (cards, Share, the form): the primary green. */
  --edge: var(--accent);
  --edge-glow: 0 0 0 1px var(--accent), 0 8px 28px -10px rgba(4, 212, 174, 0.45);
  --accent: #04d4ae;
  /* The second accent: the rose-to-amber tint of the avatar in the header. */
  --rose: #d9579b;
  --amber: #FFC72C; /* NetFire Amber */
  --text-strong: #f1f4f4;
  --text: #e3e8e8;
  --text-soft: #abbaba;
  --text-muted: #8fa3a3;
  --icon-muted: #adb3b3;
  --on-accent: #101414;

  --font-display: "Jaro", "Impact", sans-serif; /* headings and logo (Bart tried Russo One, went back to Jaro, 2026-10-26) */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", monospace;

  --max: 1120px;
  --read: 820px; /* the post column: about 85 characters a line at 18px */
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 24px;
}
/* Type scale: text 16px; ledes and post bodies 16px on phones up to 18px; small text 14px;
   mono labels 12px (kickers, form labels, notes) and 13px (nav, buttons, section labels, dates); badges 11px. */

*, *::before, *::after { box-sizing: border-box; }
/* No transitions until the page has loaded (site.js adds html.ready): Safari otherwise eased the menu links in from the
   browser's own visited-link purple on every page load. */
html:not(.ready) *, html:not(.ready) *::before, html:not(.ready) *::after { transition: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* below the sticky header */
}

body {
  margin: 0;
  overflow-x: clip; /* the header's full-width ground may not widen the page; clip keeps it sticky */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  letter-spacing: -0.2px;
}

/* Desktop: the share image's green glow (og-default.jpg), held in the top-right corner while the page scrolls.
   It's a fixed layer of its own (body::before), not a fixed background: the browser draws it once and leaves it in
   place, where a fixed background repainted the grain and both glows on every frame of scrolling. */
@media (min-width: 900px) {
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* A faint grain over the glow dithers it, so the dark gradient has no visible steps (banding). */
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.018 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      radial-gradient(ellipse 70% 60% at 85% 10%,
        rgba(4, 212, 174, 0.14) 0%, rgba(4, 212, 174, 0.11) 15%, rgba(4, 212, 174, 0.075) 30%,
        rgba(4, 212, 174, 0.045) 42%, rgba(4, 212, 174, 0.02) 52%, rgba(4, 212, 174, 0.006) 60%, transparent 68%),
      radial-gradient(ellipse 50% 50% at 10% 100%,
        rgba(4, 212, 174, 0.05) 0%, rgba(4, 212, 174, 0.025) 30%, rgba(4, 212, 174, 0.008) 50%, transparent 65%);
    will-change: transform; /* its own layer, so scrolling only moves the page over it */
  }
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; font-weight: 400; }

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

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  padding: 8px 12px; border-radius: 8px;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-mono); font-size: 13px;
}
.skip-link:focus { top: 16px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Header ---------- */
.site-header {
  /* Fixed over the page, as on netfire.com: it never takes part in the layout, so shrinking it or sliding it away
     can't move the page (a sticky header that shrank made phones skip and stick while scrolling). .header-space
     below holds its full-size room in the page. */
  position: fixed;
  top: 0;
  left: 50%;
  width: min(var(--max), 100% - var(--gutter) * 2);
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(20px, 3vw, 32px) 0 12px;
  transition: padding 0.25s ease, transform 0.3s ease-in-out;
}
/* Slides away while you scroll down, and back as soon as you scroll up (site.js sets .is-hidden). */
.site-header.is-hidden { transform: translate(-50%, calc(-100% - 48px)); transition: padding 0.25s ease, transform 0.2s ease-in; } /* away quickly, back in at the usual pace */
/* Back mid-page after a reload (layout.py's HEADER_START): hidden from the start, with nothing animating. */
.header-start-hidden .site-header { transform: translate(-50%, calc(-100% - 48px)); }
.header-start-hidden .site-header, .header-start-hidden .site-header * { transition: none !important; }
/* The header's full-size room in the page: its padding and the avatar, the tallest thing in it. */
.header-space { height: calc(clamp(20px, 3vw, 32px) + clamp(80px, 10vw, 104px) + 12px); }
/* Its ground: full width, and only once the page has scrolled (site.js sets .is-stuck). */
.site-header::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  z-index: -1;
  background: rgba(4, 16, 14, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(171, 186, 186, 0.08);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.site-header.is-compact { padding: 10px 0; }
.site-header.is-stuck::before { opacity: 1; }
.site-header .brand__avatar, .site-header .brand__name, .site-header .brand__tag { transition: width 0.25s ease, height 0.25s ease, font-size 0.25s ease, margin 0.25s ease; }
.site-header.is-compact .brand__avatar { width: 48px; height: 48px; }
.site-header.is-compact .brand__name { font-size: 23px; }
.site-header .brand__tag { max-height: 2em; overflow: hidden; transition: opacity 0.2s ease, max-height 0.25s ease, margin 0.25s ease; }
/* Compact (site.js sets .is-compact once the page has scrolled): just the avatar and BART.M. */
.site-header.is-compact .brand__tag { opacity: 0; max-height: 0; margin-top: 0; }
.brand { display: flex; align-items: center; gap: clamp(14px, 2vw, 20px); }
.brand__avatar {
  width: clamp(80px, 10vw, 104px);
  height: clamp(80px, 10vw, 104px);
  border-radius: 50%;
}
.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 40px);
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: 0.02em;
}
.brand__tag {
  display: block;
  margin-top: 6px;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent);
}

.nav { position: relative; }
.nav__toggle {
  width: 40px; height: 40px;
  display: none; place-items: center;
  border: 0; background: none; padding: 0;
  cursor: pointer;
  color: var(--icon-muted);
}
.nav__toggle svg { width: 18px; height: 14px; }
.nav__toggle:hover { color: var(--accent); }
.nav__links { display: flex; gap: 4px; }
.nav__links a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  color: var(--text-strong); /* white (Bart, 2026-10-26) */
  transition: color 0.2s, background 0.2s;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--accent); background: rgba(4, 212, 174, 0.06); }
/* Pressed: a deeper teal fill, at once (no fade), so a tap or click shows it landed. */
.nav__links a:active { color: var(--accent); background: rgba(4, 212, 174, 0.16); transition: none; }
.nav__toggle:active { color: var(--accent); background: rgba(4, 212, 174, 0.12); border-radius: 10px; }

@media (max-width: 640px) {
  .nav__toggle { display: grid; }
  .nav__links {
    position: absolute; right: 0; top: 48px; z-index: 10;
    min-width: 190px;
    flex-direction: column;
    padding: 8px;
    border-radius: 16px;
    background: linear-gradient(90deg, var(--card-from), var(--card-to));
    border: 1px solid var(--line);
    display: none;
  }
  .nav.is-open .nav__links { display: flex; }
}

/* ---------- Home: hero ---------- */
.hero { padding-top: clamp(72px, 11vw, 150px); }
.hero__title {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(36px, 6.4vw, 76px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text-strong);
}
.hero__lede {
  margin-top: clamp(24px, 3vw, 36px);
  max-width: 620px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--text);
}

/* ---------- Home: intro beside the latest posts (wide screens) ---------- */
@media (min-width: 1000px) {
  .home-top {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
  .home-top .hero__title { font-size: clamp(40px, 4.8vw, 66px); }
  /* Level with the headline: the same top padding as the hero. */
  .home-top .posts { padding-top: clamp(72px, 11vw, 150px); }
  .home-top .post-grid { grid-template-columns: 1fr; }
}

/* ---------- Home: post list ---------- */
.posts { padding-top: clamp(64px, 9vw, 120px); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 200px;
  padding: 28px 24px 24px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--card-from), var(--card-to));
  border: 1px solid var(--edge);
  transition: background 0.2s, box-shadow 0.35s ease;
}
.post-card:hover { background: var(--card-hover); box-shadow: var(--edge-glow); }
@media (max-width: 640px) {
  .post-card { min-height: 0; gap: 12px; }
}
.post-card__date {
  padding-right: 24px; /* clear of the arrow in the corner */
  font-family: var(--font-mono);
  font-size: 12px; /* category · date · read time on one line in a 360px card */
  line-height: 24px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.post-card__title {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: color 0.2s;
}
.post-card:hover .post-card__title { color: var(--text-strong); }
.post-card__arrow {
  position: absolute; top: 33px; right: 28px;
  width: 15px; height: 15px;
  color: var(--text-strong);
  transition: transform 0.2s, color 0.2s;
}
.post-card:hover .post-card__arrow { color: var(--accent); transform: translate(2px, -2px); }

/* ---------- Home: elsewhere (projects) ---------- */
.projects { padding-top: clamp(64px, 9vw, 120px); }
.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 760px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); }
}
.project-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--card-from), var(--card-to));
  border: 1px solid var(--edge);
  transition: background 0.2s, box-shadow 0.35s ease;
}
.project-card:hover { background: var(--card-hover); }
.project-card img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.project-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.project-card__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--amber);
}
.project-card__title {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1.1;
  color: var(--text-strong);
}
.project-card__text { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--text); }
.project-card .btn { margin-top: auto; }
.project-card__text + .btn { margin-top: 24px; }
.project-card__arrow { width: 11px; height: 11px; }
.project-card .btn { background: linear-gradient(90deg, var(--rose), var(--amber)); color: var(--on-accent); }
.project-card:hover .btn { filter: brightness(1.08); }

/* ---------- Car bucket list ---------- */
.cars { padding-top: clamp(40px, 6vw, 64px); display: grid; gap: clamp(40px, 6vw, 64px); }
.car-group .section-head { margin-bottom: 8px; }
.car-list { list-style: none; margin: 0; padding: 0; }
.car {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.car__name { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.4; color: var(--text-strong); }
.car__paint {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  font-family: var(--font-mono); font-size: 12px; line-height: 18px; text-transform: uppercase;
  color: var(--text-muted);
}
.paint { display: inline-flex; align-items: center; gap: 6px; } /* a colour's dot right beside its name */
.swatch {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--paint);
}
.swatch { flex: none; }
.swatch--any { background: conic-gradient(#c8102e, #f2c500, #04d4ae, #1d4f9c, #c8102e); }
.badge {
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid rgba(4, 212, 174, 0.4);
  font-family: var(--font-mono); font-size: 11px; line-height: 16px;
  color: var(--accent);
}

/* ---------- Concert bucket list ---------- */
.act-list { list-style: none; margin: 0; padding: 0; counter-reset: act; }
.act {
  counter-increment: act;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.act::before {
  content: counter(act, decimal-leading-zero);
  min-width: 28px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
}
.act__name { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 24px; line-height: 1.2; color: var(--text-strong); }
.act__name a { color: inherit; text-decoration: none; }
.act__name a:hover { color: var(--accent); }
.act__link { vertical-align: 2px; color: var(--text-muted); }
.act__note {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 12px; line-height: 18px; text-transform: uppercase;
  color: var(--amber);
}

/* A card with no picture: a big figure in its place. */
.project-card__figure {
  display: grid; place-items: center;
  aspect-ratio: 1200 / 630;
  background:
    radial-gradient(circle at 75% 25%, rgba(229, 57, 70, 0.28), transparent 55%),
    radial-gradient(circle at 25% 80%, rgba(217, 87, 155, 0.24), transparent 55%),
    var(--bg);
  font-family: var(--font-display); font-size: clamp(72px, 9vw, 120px); line-height: 1; color: var(--text-strong);
}
.project-card__figure--grizz {
  padding: 0 12%;
  background:
    radial-gradient(circle at 50% 60%, rgba(237, 28, 36, 0.32), transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, 0.03) 18px 36px),
    #0b0b0c;
}
.project-card__figure--grizz img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; background: none; }
@media (min-width: 760px) {
  .project-card--wide { grid-column: 1 / -1; flex-direction: row; }
  .project-card--wide .project-card__figure { flex: 0 0 42%; aspect-ratio: auto; min-height: 220px; }
  .project-card--wide .project-card__body { justify-content: center; }
  .project-card--wide .btn { margin-top: 24px; }
}
.project-card__figure--music {
  background:
    radial-gradient(circle at 70% 30%, rgba(217, 87, 155, 0.26), transparent 55%),
    radial-gradient(circle at 25% 75%, rgba(120, 90, 255, 0.24), transparent 55%),
    var(--bg);
}
.project-card__figure--travel {
  background:
    radial-gradient(circle at 70% 30%, rgba(4, 212, 174, 0.22), transparent 55%),
    radial-gradient(circle at 25% 75%, rgba(255, 199, 44, 0.2), transparent 55%),
    var(--bg);
}
.section-head--sub { margin-top: clamp(40px, 6vw, 64px); }
@media (min-width: 900px) {
  .project-grid--three { grid-template-columns: repeat(3, 1fr); }
  .project-grid--three .project-card__figure { font-size: clamp(64px, 6vw, 96px); }
}
.eyebrow--flag { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow--flag .flag { width: 18px; height: 18px; }
/* Phones: where a row has a colour beside it (the car list), its pill goes under the name so the colour keeps room.
   Rows without one (travel, music) keep the pill beside the name. */
@media (max-width: 640px) {
  .car:has(.car__paint) { flex-wrap: nowrap; align-items: center; }
  .car:has(.car__paint) .car__name { flex-direction: column; align-items: flex-start; gap: 6px; flex: 1; min-width: 0; }
  .car__paint { flex: none; max-width: 45%; justify-content: flex-end; text-align: right; }
}
.badge--own { border-color: rgba(255, 199, 44, 0.5); color: var(--amber); }
.project-card__figure small { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 13px; text-align: center; text-transform: uppercase; color: var(--rose); }

/* ---------- Subscribe (Typeform, until the contact form goes live) ---------- */
.subscribe {
  display: grid;
  gap: 32px;
  padding-top: clamp(96px, 13vw, 180px);
}
@media (min-width: 900px) {
  .subscribe { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .subscribe__form { justify-self: end; }
}
.subscribe__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text-strong);
}
.subscribe__text {
  margin-top: 24px;
  max-width: 440px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--text);
}
.subscribe__form {
  /* Typeform switches to a white desktop layout when wider than ~460px */
  width: 100%;
  max-width: 440px;
  height: 480px;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(90deg, var(--card-from), var(--card-to));
}
.subscribe__fallback {
  display: grid; place-items: center; height: 100%;
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Contact ---------- */
.contact {
  display: grid;
  gap: 32px;
  padding-top: clamp(96px, 13vw, 180px);
}
@media (min-width: 900px) {
  .contact { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
}
.contact__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text-strong);
}
.contact__text {
  margin-top: 24px;
  max-width: 440px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--text);
}
.contact-form {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--card-from), var(--card-to)); /* the cards' dark green */
  border: 1px solid var(--edge);
}
/* Floating labels (Halo Labs' floating field): a 48px field with its label inside, which moves up onto the
   border at 3/4 size once the field has focus or a value. The label stays see-through: instead of a patch behind it,
   the border (drawn by .field::before, the focus ring by ::after) leaves a gap the label's width (--nw, measured in
   site.js) where it sits. */
.field { position: relative; --nx: 10px; --nw: 0px; }
.field input,
.field textarea {
  display: block;
  width: 100%;
  height: 48px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent; /* the form's own dark green shows through */
  color: var(--text-strong);
  font: inherit;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: normal;
}
.field textarea { height: auto; min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; }
.field input::placeholder, .field textarea::placeholder { color: transparent; }
.field::before, .field::after {
  content: ""; position: absolute; pointer-events: none;
  transition: border-color 0.2s, opacity 0.2s;
}
.field::before { inset: 0; border: 1px solid var(--line); border-radius: 8px; }
.field::after { inset: -4px; border: 3px solid rgba(4, 212, 174, 0.18); border-radius: 11px; opacity: 0; }
.field:hover::before { border-color: rgba(171, 186, 186, 0.28); }
.field:focus-within::before { border-color: var(--accent); }
.field:focus-within::after { opacity: 1; }
/* The gap in the top edge, only while the label is up there. */
.field:focus-within::before,
.field:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown))::before {
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / var(--nx) 4px no-repeat,
    linear-gradient(#000 0 0) calc(var(--nx) + var(--nw)) 0 / 100% 4px no-repeat,
    linear-gradient(#000 0 0) 0 4px / 100% calc(100% - 4px) no-repeat;
          mask:
    linear-gradient(#000 0 0) 0 0 / var(--nx) 4px no-repeat,
    linear-gradient(#000 0 0) calc(var(--nx) + var(--nw)) 0 / 100% 4px no-repeat,
    linear-gradient(#000 0 0) 0 4px / 100% calc(100% - 4px) no-repeat;
}
.field:focus-within::after {
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / calc(var(--nx) + 4px) 8px no-repeat,
    linear-gradient(#000 0 0) calc(var(--nx) + 4px + var(--nw)) 0 / 100% 8px no-repeat,
    linear-gradient(#000 0 0) 0 8px / 100% calc(100% - 8px) no-repeat;
          mask:
    linear-gradient(#000 0 0) 0 0 / calc(var(--nx) + 4px) 8px no-repeat,
    linear-gradient(#000 0 0) calc(var(--nx) + 4px + var(--nw)) 0 / 100% 8px no-repeat,
    linear-gradient(#000 0 0) 0 8px / 100% calc(100% - 8px) no-repeat;
}
.field label {
  position: absolute; left: var(--nx); top: 12px; z-index: 1;
  max-width: calc(100% - 20px); padding: 0 4px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 16px; line-height: 22px; color: var(--text-muted);
  transform-origin: left center;
  pointer-events: none;
  transition: transform 0.3s, color 0.3s;
}
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label {
  transform: translateY(-25px) scale(0.75);
  color: var(--text-soft);
}
.field input:focus + label, .field textarea:focus + label { color: var(--accent); }
.contact-form altcha-widget {
  --altcha-max-width: 100%;
  --altcha-color-base: transparent;
  --altcha-color-base-content: var(--text);
  --altcha-color-neutral: var(--text-muted);
  --altcha-color-primary: var(--accent);
  --altcha-color-primary-content: var(--on-accent);
  --altcha-color-success: var(--accent);
  --altcha-color-success-content: var(--on-accent);
  --altcha-color-error: #E4002B;
  --altcha-border-color: var(--line);
  --altcha-border-radius: 12px;
  --altcha-input-background-color: transparent;
  --altcha-checkbox-border-color: var(--text-muted);
  --altcha-checkbox-border-width: 1.5px;
  --altcha-checkbox-border-radius: 5px;
  --altcha-spinner-color: var(--accent);
  font-family: var(--font-body);
}
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 4px; }
.contact-form .btn--solid { align-self: center; margin-top: 0; border: 0; cursor: pointer; padding: 12px 20px; }
.btn--solid:hover { filter: brightness(1.1); }
.btn--solid:disabled { opacity: 0.6; cursor: progress; }
.contact-form__status { font-size: 14px; line-height: 1.4; color: var(--text-soft); }
.contact-form__status[data-tone="ok"] { color: var(--accent); }
.contact-form__status[data-tone="error"] { color: #E4002B; } /* NetFire Crimson */

/* ---------- Footer ---------- */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: clamp(80px, 10vw, 140px);
  padding: 28px 0 32px;
  border-top: 1px solid var(--line);
}
.socials { display: flex; align-items: center; gap: 24px; }
.socials a { color: var(--accent); display: grid; place-items: center; transition: opacity 0.2s; }
.socials a:hover { opacity: 0.75; }
.socials svg { display: block; }
.site-footer__credit { font-size: 14px; line-height: 20px; color: var(--text-soft); }
.site-footer__credit a:hover { color: var(--text-strong); }
@media (max-width: 640px) {
  .site-footer { flex-direction: column; justify-content: center; text-align: center; }
  .socials { justify-content: center; }
  .site-footer__credit { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; }
}
.hosted { display: inline-flex; align-items: center; gap: 8px; }
.hosted img { height: 24px; width: auto; transform: translateY(-1px); } /* sized to sit with the 14px credit text */

/* ---------- Post page ---------- */
/* Widths (2026-10-26): a post's text runs in the centred 720px reading column (about 70 characters a line at 18px);
   list and index pages (posts, bucket lists, tech) use the full 1120px content width, left-aligned, lists in two columns. */
.read { max-width: var(--read); margin: 0 auto; }
@media (min-width: 960px) {
  .cars { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; align-items: start; }
}

.post { padding-top: clamp(32px, 4.5vw, 64px); }
.post__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.4vw, 60px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--accent);
}
.post__meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.post__meta .by { color: var(--text-strong); }
/* On a phone, the date and read time go on a line of their own, under the category and author (posts.py). */
.post__meta-break { display: none; }
@media (max-width: 640px) {
  .post__meta:has(.post__meta-break) { column-gap: 8px; font-size: min(13px, 3.3vw); } /* each line fits, in every language, down to 375px */
  .post__meta-break { display: block; flex-basis: 100%; height: 0; }
  .post__meta span[aria-hidden="true"]:has(+ .post__meta-break) { display: none; }
}
.post__hero {
  width: 100%;
  max-width: 960px;
  margin: clamp(32px, 5vw, 56px) auto 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}
.post__body { margin-top: clamp(32px, 5vw, 56px); color: var(--text-strong); }
.post__body h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.2;
}
.post__body p { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.7; color: var(--text); }
.post__body * + p { margin-top: 1.4em; }
.post__body * + h2 { margin-top: 1.8em; }
.post__body h2 + p { margin-top: 0.8em; }
.post__body ol, .post__body ul {
  margin: 1.2em 0 0;
  padding-left: 1.4em;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--text);
}
.post__body li + li { margin-top: 0.5em; }
.post__body li::marker { color: var(--accent); font-family: var(--font-mono); font-size: 0.85em; }
.post__body * + .callout, .post__body .callout + * { margin-top: 1.4em; }
.post__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post__body * + .video, .post__body .video + * { margin-top: 1.4em; }
.video { margin-left: 0; margin-right: 0; }
.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #000;
}
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.post__body .video figcaption a { color: var(--accent); }
.callout {
  padding: 18px 22px;
  border-radius: 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, var(--card-from), var(--card-to));
}
.callout p { margin: 0; color: var(--text-soft); }

/* ---------- Share ---------- */
.share { margin-top: 24px; }
.post__body + .share { margin-top: clamp(40px, 6vw, 64px); }
.share__wrap { position: relative; display: inline-block; }
.share__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: none;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.share__toggle:hover,
.share__toggle[aria-expanded="true"] { color: var(--accent); background: rgba(4, 212, 174, 0.08); }
.share__menu {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 20;
  min-width: 200px;
  padding: 6px;
  display: grid;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(90deg, var(--card-from), var(--card-to));
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}
.share__menu[hidden], .share__menu [hidden] { display: none; }
.share__menu a, .share__menu button {
  display: block; width: 100%;
  padding: 9px 12px;
  border: 0; border-radius: 9px;
  background: none;
  color: var(--text-soft);
  font-family: var(--font-mono); font-size: 12px; line-height: 16px;
  text-align: left; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
}
.share__menu a:hover, .share__menu button:hover,
.share__menu a:focus-visible, .share__menu button:focus-visible { color: var(--accent); background: rgba(4, 212, 174, 0.08); outline: none; }

.author {
  display: flex; align-items: center; gap: 20px;
  margin-top: clamp(48px, 7vw, 80px);
  padding: 24px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--card-from), var(--card-to));
}
.author img { flex: none; width: 88px; height: 88px; border-radius: 50%; }
.author__name { font-family: var(--font-display); font-size: 22px; line-height: 28px; color: var(--text-strong); }
.author__bio { margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--text-muted); }

.related { padding-top: clamp(72px, 9vw, 120px); }
.related.read { max-width: none; } /* the full width of the page, not the reading column */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); /* the cards share the row */
  gap: 24px;
}
.related-card {
  display: flex; flex-direction: column;
  padding: 20px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--card-from), var(--card-to));
  border: 1px solid var(--edge);
  transition: background 0.2s, box-shadow 0.35s ease;
}
.related-card:hover { background: var(--card-hover); box-shadow: var(--edge-glow); }
.related-card img { margin-bottom: 24px; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 13px; }
.related-card__title { margin-top: 0; font-family: var(--font-display); font-size: 24px; line-height: 32px; color: #fff; }
.related-card__meta {
  margin-bottom: 12px; /* above the title: category · date · read time, wrapping as one line of text */
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.btn {
  align-self: flex-start;
  margin-top: 28px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--rose), var(--amber)); /* the one button style, everywhere */
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  text-transform: uppercase;
  transition: filter 0.2s, opacity 0.2s;
}
a.btn:hover, button.btn:hover:not(:disabled) { filter: brightness(1.08); }
.related-card:hover .btn { filter: brightness(1.1); }
/* Pressed: the gradient darkens a step. */
a.btn:active, button.btn:active:not(:disabled), .project-card:active .btn, .related-card:active .btn { filter: brightness(0.88); transition: none; }

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

/* ---------- Language (posts: Share and the language menu side by side) ---------- */
.post-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.post-tools .share { margin-top: 0; }
.lang { position: relative; display: inline-block; }
.lang .share__menu { min-width: 190px; }
.lang .share__menu a { display: flex; align-items: center; gap: 10px; }
/* Hover brightens the name, no ground behind it. */
.lang .share__menu a:hover, .lang .share__menu a:focus-visible { background: none; color: var(--text-strong); }
.lang .share__menu a[aria-current="true"] { color: var(--accent); }
.lang .share__menu a[aria-current="true"]::after {
  content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.flag {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(241, 244, 244, 0.22);
  overflow: hidden;
}
.share__toggle .flag { width: 16px; height: 16px; }
.lang .share__toggle .lang__chevron { width: 10px; height: 10px; transition: transform 0.2s; }
.lang .share__toggle[aria-expanded="true"] .lang__chevron { transform: rotate(180deg); }
@media (max-width: 480px) { .lang .share__menu { left: auto; right: 0; } }

/* ---------- Gradient edges (Bart, 2026-10-26) ----------
   The buttons' rose-to-amber, as a ring that turns: always on the contact form, on the cards only on hover.
   Drawn without masks (a masked overlay filled the whole form in some browsers): each box has a 1.5px transparent
   border, its fill painted inside the border (padding-box) and the turning gradient under it, showing only in the
   border (border-box). At rest a card's ring layer is clear. Last in the file so it wins over earlier rules. */
@property --edge-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes edge-spin { to { --edge-angle: 360deg; } }
.post-card, .project-card, .related-card, .contact-form { position: relative; border: 1.5px solid transparent; }
.post-card, .related-card, .contact-form {
  background:
    linear-gradient(90deg, var(--card-from), var(--card-to)) padding-box,
    linear-gradient(transparent, transparent) border-box;
}
.post-card:hover, .related-card:hover {
  background:
    linear-gradient(var(--card-hover), var(--card-hover)) padding-box,
    conic-gradient(from var(--edge-angle), var(--rose), var(--amber), var(--rose), var(--amber), var(--rose)) border-box;
  animation: edge-spin 4s linear infinite;
}
/* The contact form's ring is always on, turning slowly. */
.contact-form {
  background:
    linear-gradient(90deg, var(--card-from), var(--card-to)) padding-box,
    conic-gradient(from var(--edge-angle), var(--rose), var(--amber), var(--rose), var(--amber), var(--rose)) border-box;
  animation: edge-spin 8s linear infinite;
}
/* A project card's fill is on its text block (below), so its ring layer is all it paints. */
.project-card { background: linear-gradient(transparent, transparent) border-box; }
.project-card:hover {
  background: conic-gradient(from var(--edge-angle), var(--rose), var(--amber), var(--rose), var(--amber), var(--rose)) border-box;
  animation: edge-spin 4s linear infinite;
}
.post-card:hover, .project-card:hover, .related-card:hover, .contact-form:hover, .contact-form:focus-within {
  box-shadow: 0 10px 32px -12px rgba(217, 87, 155, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .post-card:hover, .project-card:hover, .related-card:hover, .contact-form { animation: none; }
}

/* The project cards' fill sits behind their text only, so a picture's rounded corners meet the page directly:
   with the fill behind the picture too, its colour showed as a faint line where the corners are smoothed. */
/* Both fills are gradients: going from a gradient to a plain colour drops the gradient at once while the colour fades
   in, and for that moment the ring's gradient behind it flashed through. */
.project-card__body { position: relative; margin-top: -1px; background: linear-gradient(90deg, var(--card-from), var(--card-to)); }
/* (margin-top: -1px: the picture's height comes out a fraction of a pixel short, and the hover ring behind the card
   showed through that sliver as a coloured line between the picture and the text; the text block now overlaps it.) */
.project-card:hover .project-card__body { background: linear-gradient(var(--card-hover), var(--card-hover)); }


/* ---------- Tech (/tech/) ---------- */
.tech-grid { margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 760px) { .tech-grid { grid-template-columns: repeat(2, 1fr); } }
.project-card__figure--vram {
  background:
    radial-gradient(circle at 50% 55%, rgba(122, 190, 60, 0.22), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(255, 199, 44, 0.12), transparent 50%),
    var(--bg);
}
.project-card__figure--vram img { width: 30%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5)); }
.post__crumb { margin-bottom: 16px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; }
.post__crumb a { color: var(--accent); }
.post__crumb a::before { content: "\2190  "; }
.app-hero { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: clamp(16px, 3vw, 28px); }
/* Wide: the icon beside the title and the line under it. Phones: the icon centred on the title, the line below both. */
.app-hero__icon { grid-row: 1 / span 2; }
.app-hero .post__title { align-self: end; }
.app-hero .post__meta { align-self: start; }
@media (max-width: 640px) {
  .app-hero__icon { grid-row: 1; }
  .app-hero .post__title { align-self: center; }
  .app-hero .post__meta { grid-column: 1 / -1; margin-top: 16px; flex-wrap: nowrap; gap: min(8px, 1.6vw); font-size: min(12px, 3vw); white-space: nowrap; } /* one line, even at 375px */
}
.app-hero__icon img { width: clamp(72px, 10vw, 112px); height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5)); }
.app-hero .post__title { margin: 0; }
.app-download { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.app-download .btn { margin-top: 0; }
.app-download p { font-size: 14px; color: var(--text-muted); }
.btn--soon { opacity: 0.55; cursor: not-allowed; } /* the same button, not ready yet */

/* ---------- Posts (/posts/) ---------- */
.post-grid--all { margin-top: clamp(32px, 5vw, 56px); }
.post-card__desc { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--text-muted); }

/* VRAM Meter page: the text in the reading column, screenshots breaking out to the full content width. */
.wide { width: min(var(--max), 100vw - 2 * var(--gutter)); margin: clamp(32px, 5vw, 48px) 0 0 50%; transform: translateX(-50%); }
.shots { display: grid; gap: 16px; }
@media (min-width: 760px) { .shots { grid-template-columns: repeat(3, 1fr); } }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: #000; }
.shot figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; line-height: 18px; text-transform: uppercase; color: var(--text-muted); }
.app-lede { margin-top: 24px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; color: var(--text); }
.shot-note { font-size: 14px !important; color: var(--text-muted) !important; }

/* The author box links to the contact form. */
.author__link { display: flex; align-items: center; gap: inherit; width: 100%; color: inherit; }
.author__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  font-family: var(--font-mono); font-size: 13px; line-height: 20px; text-transform: uppercase; color: var(--amber);
  transition: gap 0.2s;
}
.author__link:hover .author__cta { gap: 12px; }
.author__link:hover .author__name { color: var(--accent); }

/* ---------- Style guide (/style-guide/) ---------- */

.sg .btn { margin-top: 0; }
.sg-lede { max-width: 640px; margin-top: 20px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; color: var(--text); }
.sg-toc { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.sg-toc a { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; color: var(--text-soft); }
.sg-toc a span { color: var(--amber); margin-right: 6px; }
.sg-toc a:hover { color: var(--accent); }
.sg-section { padding-top: clamp(56px, 8vw, 96px); }
.sg-chapter { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 32px; padding-bottom: 20px; margin-bottom: 32px; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.sg-chapter__num { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); line-height: 1; background: linear-gradient(90deg, var(--rose), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sg-chapter__title { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); line-height: 1; text-transform: uppercase; color: var(--text-strong); }
.sg-chapter__intro { grid-column: 2; margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--text-soft); }
@media (max-width: 640px) { .sg-chapter { grid-template-columns: 1fr; } .sg-chapter__intro { grid-column: 1; } }
.sg-sub { margin: 28px 0 12px; font-family: var(--font-mono); font-size: 12px; line-height: 18px; text-transform: uppercase; color: var(--amber); }
.sg-block > .sg-sub:first-child, .sg-grid > .sg-block > .sg-sub:first-child { margin-top: 0; }
.sg-block p, .sg-note { font-size: 16px; line-height: 1.6; color: var(--text); }
.sg-note { margin-top: 12px; font-size: 14px; color: var(--text-muted); }
.sg-grid { display: grid; gap: 24px 32px; }
@media (min-width: 760px) {
  .sg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sg-rules { margin-top: 32px; }
.sg-voice { display: grid; gap: 14px; margin: 0; }
.sg-voice div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sg-voice dt { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; color: var(--text-strong); }
.sg-voice dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text); }
.sg-panel { display: grid; place-items: center; gap: 20px; min-height: 240px; padding: 32px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); }
.sg-panel--card { background: linear-gradient(90deg, var(--card-from), var(--card-to)); }
.sg-brand { pointer-events: none; }
.sg-brand--compact .brand__avatar { width: 48px; height: 48px; }
.sg-brand--compact .brand__name { font-size: 23px; }
.sg-caption { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: var(--text-muted); }
.sg-dont { position: relative; display: grid; place-items: center; gap: 12px; min-height: 150px; padding: 20px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; text-align: center; }
.sg-dont::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(228, 0, 43, 0.85) 50%, transparent calc(50% + 1px)); pointer-events: none; }
.sg-dont .brand__name { font-size: 30px; }
.sg-dont p { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: var(--text-muted); }
.sg-dont--busy { background: repeating-linear-gradient(45deg, #d9579b 0 10px, #04d4ae 10px 20px, #FFC72C 20px 30px); }
.sg-dont--busy p { color: #101414; }
.sg-swatches { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.sg-swatch__chip { height: 120px; border-radius: 16px; border: 1px solid var(--line); margin-bottom: 12px; }
.sg-swatch__name { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; color: var(--text-strong); }
.sg-swatch__code { margin-top: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.sg-swatch__use { margin-top: 6px; font-size: 14px !important; line-height: 1.5; color: var(--text-soft) !important; }
.sg-gradient { display: flex; justify-content: space-between; align-items: flex-end; height: 120px; padding: 16px; border-radius: 16px; background: linear-gradient(90deg, var(--rose), var(--amber)); font-family: var(--font-mono); font-size: 12px; color: #101414; }
.sg-face { padding: 24px; border-radius: var(--radius); background: linear-gradient(90deg, var(--card-from), var(--card-to)); }
.sg-face__aa { font-size: 72px; line-height: 1; color: var(--text-strong); margin-bottom: 16px; }
.sg-face__set { margin: 12px 0 8px; font-size: 15px; line-height: 1.6; color: var(--text-soft); word-break: break-all; }
.sg-type { border-top: 1px solid var(--line); }
.sg-type-row { display: grid; grid-template-columns: 220px 1fr; gap: 8px 32px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 640px) { .sg-type-row { grid-template-columns: 1fr; } }
.sg-t-hero { font-family: var(--font-display); font-size: clamp(40px, 4.8vw, 66px); line-height: 1.05; text-transform: uppercase; color: var(--text-strong); }
.sg-t-page { font-family: var(--font-display); font-size: clamp(36px, 5.4vw, 60px); line-height: 1.05; text-transform: uppercase; color: var(--accent); }
.sg-t-h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); line-height: 1.15; color: var(--text-strong); }
.sg-t-card { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; text-transform: uppercase; color: var(--text-soft); }
.sg-t-lede { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; color: var(--text); }
.sg-t-body { font-size: 16px; line-height: 1.7; color: var(--text); }
.sg-t-small { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.sg-t-label { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; color: var(--text-muted); }
.sg-t-kicker { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: var(--amber); }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sg-form { max-width: 420px; }
.sg-form::after { display: none; }
.site-footer__credit a { color: inherit; }

.strips { display: grid; gap: 20px; }
.strip { margin: 0; }
.strip img { width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); }
.strip figcaption { margin-top: 8px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: var(--text-muted); }

/* ---------- Contact page (/contact/): the form, and other ways to reach me beside it ---------- */
.contact-page__lede { max-width: 620px; margin-top: 20px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; color: var(--text); }
.contact-page__grid { display: grid; gap: 48px; margin-top: clamp(32px, 5vw, 56px); align-items: start; }
@media (min-width: 900px) { .contact-page__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; } }
.contact-page__aside { display: grid; gap: 40px; }
.contact-page__aside .eyebrow { display: block; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.contact-links { list-style: none; margin: 0; padding: 0; }
.contact-links li { border-bottom: 1px solid var(--line); }
.contact-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; font-size: 16px; color: var(--text-strong); transition: color 0.2s; }
.contact-links a:hover { color: var(--accent); }
.contact-links .project-card__arrow { color: var(--text-muted); transition: transform 0.2s, color 0.2s; }
.contact-links a:hover .project-card__arrow { color: var(--accent); transform: translate(2px, -2px); }
.contact-links--projects a { flex-direction: column; align-items: flex-start; gap: 2px; }
.contact-links--projects small { font-size: 14px; color: var(--text-muted); }

/* ---------- VRAM Meter page: intro on the left, screenshots drawn live (sharp at any size) ---------- */
.app-intro { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .app-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; } }
.app-facts .eyebrow { display: block; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.app-facts dl { margin: 0; }
.app-facts dl div { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.app-facts dt { font-family: var(--font-mono); font-size: 12px; line-height: 22px; text-transform: uppercase; color: var(--text-muted); }
.app-facts dd { margin: 0; font-size: 16px; line-height: 22px; color: var(--text-strong); }
.app-page .wide { width: 100%; margin-left: 0; transform: none; }
.vshot { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: #000; container-type: inline-size; }
.strip .vshot { border-radius: 10px; }
/* The 1920x1080 picture, scaled to the box by site.js (transform), so its text stays text. */
.vshot__stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
.vshot__stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; }
.shot .vshot__stage > img { border: 0; }
.vo-badge {
  /* As src/Overlay.cs draws it: one line, no panel, a black blurred shadow under the text; snapped top-right, 16
     physical px in (8 here), at 0.75 of its size, which is its true size on a 1440p screen pictured 1920 wide. */
  position: absolute; top: 8px; right: 8px; transform: scale(0.75); transform-origin: top right;
  display: flex; align-items: baseline; white-space: nowrap; padding: 2px 4px;
  font-family: "Barlow Semi Condensed", "Bahnschrift", sans-serif; font-variant-numeric: tabular-nums;
  color: #E3E8E8; text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 6px #000;
}
.vo-badge .l { font-size: 16px; color: #C2CDCD; margin: 0 5px 0 16px; }
.vo-badge .l.first { margin-left: 0; }
.vo-badge .v { font-size: 18px; display: inline-block; text-align: right; }
.vo-badge .div { font-size: 18px; color: #C2CDCD; margin: 0 12.8px; }
.vo-badge .of, .vo-badge .det, .vo-badge .gpu { font-size: 18px; }
.vo-badge .of { margin-left: 5px; }
.vo-badge .det { color: #C2CDCD; }
.vo-window { position: absolute; left: 330px; top: 40px; width: 1260px; height: 984px; overflow: hidden; background: #04100E; color: #E3E8E8; font-family: "Barlow Semi Condensed", "Bahnschrift", sans-serif; line-height: 1.2; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.12); text-align: left; }
.vo-titlebar { height: 32px; display: flex; align-items: center; justify-content: space-between; padding-left: 12px; background: #0B0B0B; font-family: "Segoe UI", system-ui, sans-serif; font-size: 12px; color: #c9ccc5; }
.vo-controls { display: flex; font-size: 14px; }
.vo-controls span { width: 46px; text-align: center; }
.vo-plain { font-family: "Segoe UI", system-ui, sans-serif; }
.vo-taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(28, 28, 32, 0.86); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-top: 1px solid rgba(255, 255, 255, 0.08); font: 400 9px "Segoe UI", system-ui, sans-serif; color: #fff; } /* Windows 11 at 3/4: its 48 px bar pictured as 36 */
.vo-tb-apps { display: flex; align-items: center; gap: 4px; }
.vo-tb-ico { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 4px; }
.vo-tb-ico img { width: 18px; height: 18px; border: 0; border-radius: 3px; }
.vo-tb-ico.is-open { background: rgba(255, 255, 255, 0.08); }
.vo-tb-ico.is-open::after { content: ""; position: absolute; bottom: 1px; left: 50%; width: 12px; height: 2px; margin-left: -6px; border-radius: 1px; background: #4CC2FF; }
.vo-tb-search { display: flex; align-items: center; gap: 6px; width: 150px; height: 24px; margin: 0 3px; padding: 0 9px; border-radius: 12px; font-size: 10.5px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.75); }
.vo-tb-tray { position: absolute; right: 9px; top: 0; bottom: 0; display: flex; align-items: center; gap: 6px; }
.vo-tb-tray > svg { width: 12px; height: 12px; }
.vo-tb-tray > svg:first-child { margin-right: 3px; width: 9px; height: 9px; }
.vo-tb-clock { display: grid; text-align: right; line-height: 12px; margin-left: 6px; }
.vo-titlebar > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.vo-titlebar img { width: 16px; height: 16px; border: 0; border-radius: 0; }
.vo-key { display: inline-block; width: 22px; height: 22px; margin-right: 12px; flex: none; }
.vo-btn { display: inline-block; border: 1px solid #E3E8E8; padding: 3px 10px; font-size: 13px; color: #E3E8E8; }
.app-facts .app-download { margin-top: 24px; }


/* The season's picture on the footer's line (assets/js/seasons.js): its bottom edge sits on the line, over the pile. */
.season-prop { position: absolute; bottom: calc(100% + 1px); left: 8%; z-index: 2; line-height: 0; pointer-events: none; }
.season-prop svg { display: block; width: auto; height: var(--h, 60px); }
.season-prop--fall { --h: 56px; left: 2.5%; } /* the jack-o'-lantern, at the left end */
.season-prop--small-pumpkin { --h: 26px; left: auto; right: 17.5%; } /* near the scarecrow */
.season-prop--scarecrow { --h: 104px; left: auto; right: 9%; }
/* Fall: a spider web in each corner where the line ends, behind the pumpkins and the scarecrow. */
.season-prop--web { --h: 70px; z-index: 1; }
.season-prop--web-left { left: 0; }
.season-prop--web-right { left: auto; right: 0; }
.season-prop--web-right svg { transform: scaleX(-1); } /* mirrored inside its box, so the box stays put */
/* The spider walks the length of the line and back, its legs stepping as it goes. */
.season-prop--spider { --h: 18px; left: 74%; z-index: 3; /* in front of the pumpkins */ animation: spider-walk 70s ease-in-out infinite alternate; }
@keyframes spider-walk { 0%, 4% { left: 74%; } 46%, 54% { left: 40%; } 96%, 100% { left: 2%; } } /* from past the pumpkins, before the scarecrow, on the right, over to the left and back */
@keyframes spider-walk-sm { 0%, 4% { left: 70%; } 46%, 54% { left: 38%; } 96%, 100% { left: 2%; } }
.season-prop--spider .legs-a { animation: legs 0.5s steps(1) infinite; }
.season-prop--spider .legs-b { animation: legs 0.5s steps(1) -0.25s infinite; }
@keyframes legs { 0% { opacity: 1; } 50% { opacity: 0; } }
.season-prop--winter { --h: 96px; }
.season-prop--spring { --h: 70px; left: 0; right: 0; } /* the whole line */
.season-prop--spring svg { width: 100%; height: 70px; }
.season-prop--summer { --h: 84px; }
.season-prop--sleigh { --h: 76px; left: auto; right: 6%; } /* winter: Santa and his reindeer, on the right */
/* Phones: the left-hand pictures a little smaller at the left, the right-hand ones smaller at the right, so the two
   ends never meet; the spider, the spring meadow and the ocean stay full size. */
@media (max-width: 640px) {
  .season-prop--fall, .season-prop--winter, .season-prop--summer { left: 4%; transform: scale(0.75); transform-origin: bottom left; }
  .season-prop--scarecrow, .season-prop--sleigh { left: auto; right: 4%; transform: scale(0.6); transform-origin: bottom right; }
  .season-prop--web-left { left: 0; transform: scale(0.7); transform-origin: bottom left; }
  .season-prop--web-right { left: auto; right: 0; transform: scale(0.7); transform-origin: bottom right; }
}
.season-prop .grow { transform: translateY(calc((1 - var(--g, 1)) * var(--rise, 0px))); transition: transform 1.2s ease-out; } /* rising out of the ground, one at a time, with the rain */
.season-prop .sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 5s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .season-prop .sway, .season-prop--spider, .season-prop--spider .legs-a, .season-prop--spider .legs-b { animation: none; } }

/* Summer: the ocean along the footer's line, two rows of waves rolling at different speeds (assets/js/seasons.js). */
.season-ocean {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); z-index: 1; height: 28px; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='28'%3E%3Cpath d='M0 16Q20 9 40 16T80 16T120 16T160 16V28H0z' fill='%231490ad'/%3E%3Cpath d='M0 16Q20 9 40 16T80 16T120 16T160 16' fill='none' stroke='%23bfeaf2' stroke-opacity='.7' stroke-width='1.4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28'%3E%3Cpath d='M0 11Q15 5 30 11T60 11T90 11T120 11V28H0z' fill='%230c5f7a'/%3E%3C/svg%3E"), linear-gradient(#1490ad, #1490ad);
  background-repeat: repeat-x, repeat-x, no-repeat;
  background-size: 160px 28px, 120px 28px, 100% 12px;
  background-position: 0 100%, 0 100%, 0 100%;
  animation: waves 14s linear infinite;
  border-radius: 0 0 2px 2px;
}
@keyframes waves { to { background-position: 160px 100%, -120px 100%, 0 100%; } }
@media (prefers-reduced-motion: reduce) { .season-ocean { animation: none; } }

/* Winter: a Santa hat on the header photo (assets/js/seasons.js). */
.avatar-hat { position: relative; display: inline-block; flex: none; line-height: 0; }
/* The compact header sits close to the top of the window: a little more room above the photo for the hat. */
.site-header.is-compact:has(.avatar-hat) { padding-top: 18px; }
.santa-hat { position: absolute; left: 22%; top: -20%; width: 56%; height: auto; transform: rotate(-12deg); transform-origin: 50% 100%; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35)); }

/* Summer: a sailboat out on the water, riding on the waves and bobbing as it sails along and
   turning at each end; a crab scuttling sideways along the beach. */
.season-prop--boat { --h: 64px; bottom: calc(100% + 9px); left: 45%; z-index: 2; /* riding on the front wave */ animation: sail 120s linear infinite; }
.season-prop--boat svg { transform-origin: 50% 90%; animation: bob 4.5s ease-in-out infinite alternate; }
@keyframes sail { 0% { left: 45%; transform: scaleX(1); } 49.9% { left: calc(100% - 70px); transform: scaleX(1); } 50% { left: calc(100% - 70px); transform: scaleX(-1); } 100% { left: 45%; transform: scaleX(-1); } }
@keyframes bob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(2px) rotate(3deg); } }
.season-prop--crab { --h: 18px; left: 9.5%; z-index: 3; animation: scuttle 26s ease-in-out infinite alternate; }
.season-prop--crab .legs-a { animation: legs 0.35s steps(1) infinite; }
.season-prop--crab .legs-b { animation: legs 0.35s steps(1) -0.17s infinite; }
@keyframes scuttle { 0%, 6% { left: 9.5%; } 40%, 52% { left: 15%; } 94%, 100% { left: 20.5%; } } /* along the sand */
@media (max-width: 640px) { .season-prop--boat { --h: 46px; } .season-prop--crab { animation-name: scuttle-sm; } @keyframes scuttle-sm { 0%, 6% { left: 7%; } 94%, 100% { left: 32%; } } }
@media (prefers-reduced-motion: reduce) { .season-prop--boat, .season-prop--boat svg, .season-prop--crab, .season-prop--crab .legs-a, .season-prop--crab .legs-b { animation: none; } }

/* Winter: a snowbank along the footer's line (assets/js/seasons.js), under the snowman, the tree and the sleigh. */
.season-snow {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); z-index: 1; height: 20px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='20'%3E%3Cpath d='M0 12C15 12 20 6 37.5 6S60 12 75 12S95 7 112.5 7S135 12 150 12V20H0z' fill='%23eef4f7'/%3E%3Cpath d='M0 12C15 12 20 6 37.5 6S60 12 75 12S95 7 112.5 7S135 12 150 12' fill='none' stroke='%23d3e2ea' stroke-width='1.2'/%3E%3Ccircle cx='37' cy='10' r='.9' fill='%23ffffff'/%3E%3Ccircle cx='112' cy='11' r='.9' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x 0 100% / 150px 20px; /* rounded drifts, flat where tiles meet, so no seams or points */
}

/* Spring: once the rain stops the sun comes out over the right of the line, rising and turning slowly. */
.season-prop--sun { --h: 110px; left: auto; right: 12%; bottom: calc(100% + 30px); z-index: 0; opacity: 0; transform: translateY(40px); transition: opacity 2.5s ease, transform 3s ease-out; }
.season-prop--sun.is-out { opacity: 1; transform: none; }
.season-prop--sun .sun-rays { transform-origin: 60px 60px; animation: sun-turn 40s linear infinite; }
@keyframes sun-turn { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .season-prop--sun { --h: 80px; right: 6%; } }
@media (prefers-reduced-motion: reduce) { .season-prop--sun { transition: none; } .season-prop--sun .sun-rays { animation: none; } }

/* Spring's lightning (assets/js/seasons.js): a faint flash over the page. */
.lightning-flash { position: fixed; inset: 0; z-index: 44; pointer-events: none; background: rgb(220, 235, 255); opacity: 0; animation: flash 0.6s ease-out forwards; }
@keyframes flash { 0% { opacity: 0.16; } 12% { opacity: 0.03; } 22% { opacity: 0.12; } 100% { opacity: 0; } }

/* The smiling face in sunglasses after "5 in collection" (cars page, home card). */
.cool-face { display: inline-block; width: 1.3em; height: 1.3em; margin-left: 2px; vertical-align: -0.3em; }

/* A page's title with its gradient icon before it (page_intro(..., icon=...)): the icon in rose to amber, the title
   in white, as the style guide's chapter numbers and titles. */
.post__title--icon { display: flex; align-items: center; gap: 0.32em; color: var(--text-strong); }
.post__title--icon .page-icon { flex: none; position: relative; top: 0.04em; width: 0.92em; height: 0.92em; } /* centred on the capitals, which sit a little below the middle of the line */

/* The home page's four-line title, with a 5px rose-to-amber bar down its left side. */
.hero__title { position: relative; max-width: calc(18ch + clamp(18px, 2.2vw, 30px)); padding-left: clamp(18px, 2.2vw, 30px); } /* the bar's room is added to the width, so it stays four lines */
/* Wide screens: the title shares the row with the latest posts, so the bar hangs in the page margin and the text
   keeps the column's whole width. */
@media (min-width: 1000px) {
  .home-top .hero__title { padding-left: 0; max-width: 18ch; }
  .home-top .hero__title::before { left: -28px; }
}
.hero__title::before { content: ""; position: absolute; left: 0; top: 0.2em; bottom: 0.12em; width: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--rose), var(--amber)); }

/* ---------- Loading animations ---------- */
/* The page's sections rise and fade in, one after another, and the ones further down as they scroll into view.
   html.reveal-on comes from the script in <head> (layout.py's HEAD_SCRIPT); site.js adds .is-in to each section as it
   comes into view. The list of sections is in site.js too (REVEAL): keep the two the same. */
.reveal-on :is(main > .post, main > .cat-pills, main > .post-grid, main > .project-grid, main > .contact-page__grid, main > section:not(.contact):not(.subscribe) > *, main > .contact, main > .subscribe, main > article > *, .home-top > *, .cars > .car-group):not(.is-in) { opacity: 0; translate: 0 18px; }
.reveal-on :is(main > .post, main > .cat-pills, main > .post-grid, main > .project-grid, main > .contact-page__grid, main > section:not(.contact):not(.subscribe) > *, main > .contact, main > .subscribe, main > article > *, .home-top > *, .cars > .car-group) { transition: opacity 0.7s ease, translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--reveal-delay, 0s); }
/* The home title's gradient bar draws down, and a page title's icon pops in. */
.reveal-on .hero__title::before { transform-origin: top; animation: bar-draw 0.9s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes bar-draw { from { transform: scaleY(0); } }
.reveal-on .post__title--icon .page-icon { animation: icon-pop 0.6s 0.2s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes icon-pop { from { opacity: 0; scale: 0.4; rotate: -12deg; } }

/* The contact form's robot check keeps its room while its script loads (it used to push the form taller once it
   arrived), with a soft shimmer in that room until it does. */
.contact-form altcha-widget { display: block; min-height: 48px; }
.contact-form altcha-widget:not(:defined) {
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .contact-form altcha-widget:not(:defined) { animation: none; } }

/* Style guide: a block two columns wide (the seasons), and the page-title sample at a smaller size. */
@media (min-width: 760px) { .sg-grid--3 > .sg-block--wide { grid-column: span 2; } }
.sg-page-title .post__title { font-size: 40px; }

/* VRAM Meter: Download beside Built with, at the bottom of the page. */
.app-get { display: grid; gap: 40px; margin-top: clamp(48px, 6vw, 72px); }
@media (min-width: 900px) { .app-get { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.app-get .app-download { margin-top: 24px; }
.btn svg:first-child { flex: none; } /* an icon before the label (GitHub) */

/* ---------- Post categories ---------- */
/* The category on a post card, at the start of its date line. */
.post-card__cat { color: var(--amber); }
/* The category in a post's byline, linking to the category's page. */
.post__meta .post__cat { color: var(--amber); }
.post__meta .post__cat:hover { color: var(--text-strong); }
/* The row of categories over the list of posts: the one being shown is filled with the gradient. */
.cat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.cat-pills a {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: color 0.2s, border-color 0.2s;
}
.cat-pills a span { margin-left: 4px; color: var(--text-muted); }
.cat-pills a:hover { color: var(--accent); border-color: rgba(4, 212, 174, 0.4); }
.cat-pills a[aria-current="page"] { border-color: transparent; background: linear-gradient(90deg, var(--rose), var(--amber)); color: var(--on-accent); }
.cat-pills a[aria-current="page"] span { color: var(--on-accent); opacity: 0.7; }

/* Travel: a place's coming F1 race weekends on the right of it, one per line (the F1 mark, then the dates). */
.place__f1 { flex-direction: column; align-items: flex-end; gap: 4px; }
.place__race { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.place__f1 .f1 { flex: none; width: 24px; height: 12px; }
.place__name { display: inline-flex; align-items: center; gap: 10px; }
/* The parts of a card's date line (date, read time) never break in the middle. */
.post-card__date time, .post-card__date .read-time, .related-card__meta time, .related-card__meta .read-time { white-space: nowrap; }

/* ---------- Home: the latest post, one at a time (cards.post_carousel, site.js) ---------- */
/* All cards share one grid cell, so the box is as tall as the tallest and switching never moves the page. */
.carousel__track { display: grid; }
.carousel__track > .post-card { grid-area: 1 / 1; transition: opacity 0.35s ease, translate 0.35s ease, visibility 0.35s; }
.carousel__track > .post-card:not(.is-current) { opacity: 0; visibility: hidden; translate: 12px 0; pointer-events: none; }
.carousel__track > .post-card.is-leaving-back { translate: -12px 0; }
/* Under the card, on the right. */
.carousel__controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.carousel__btn {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 50%;
  background: none; color: var(--text-strong);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.carousel__btn--prev svg { transform: scaleX(-1); }
.carousel__btn:hover:not(:disabled) { color: var(--accent); border-color: rgba(4, 212, 174, 0.5); }
.carousel__btn:active:not(:disabled) { background: rgba(4, 212, 174, 0.12); transition: none; }
.carousel__btn:disabled { opacity: 0.3; cursor: default; }
.carousel__count { min-width: 3.2em; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .carousel__track > .post-card { transition: none; } }

/* ---------- Posts: newer / older post (article.post_step) ---------- */
/* ‹ 2 / 3 › at the right end of the Share row, with the home page's carousel buttons and count. */
.post-step { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.share.read + .post-step { justify-content: flex-end; margin-top: 12px; } /* a post with no translations (no shared row) */
.carousel__btn[aria-disabled="true"] { opacity: 0.3; cursor: default; pointer-events: none; }

/* A More posts card's Read more button always sits at the bottom, so the buttons line up across a row. */
.related-card__title { margin-bottom: 28px; }
.related-card .btn { margin-top: auto; }

/* The contact form's glow fades in on hover and focus instead of appearing at once. */
.contact-form { transition: box-shadow 0.4s ease; }

/* Fall: the crow on the scarecrow's arm turns to look the other way at uneven gaps of 3 to 8 seconds (5, 3, 8, 4, 6
   and 4 seconds over a 30-second loop), with a tiny hop as it turns. */
.season-prop .crow { transform-box: fill-box; transform-origin: 50% 100%; animation: crow-look 30s infinite; }
@keyframes crow-look {
  0%, 16.0% { transform: scaleX(1); }
  16.7% { transform: translateY(-2px) scaleX(-1); }
  17.4%, 26.0% { transform: scaleX(-1); }
  26.7% { transform: translateY(-2px) scaleX(1); }
  27.4%, 52.6% { transform: scaleX(1); }
  53.3% { transform: translateY(-2px) scaleX(-1); }
  54.0%, 66.0% { transform: scaleX(-1); }
  66.7% { transform: translateY(-2px) scaleX(1); }
  67.4%, 86.0% { transform: scaleX(1); }
  86.7% { transform: translateY(-2px) scaleX(-1); }
  87.4%, 99.3% { transform: scaleX(-1); }
  100.0% { transform: translateY(-2px) scaleX(1); }
}
/* Once a minute it hops across to the other arm (77 units left, in an arc over the hat) and later back, each time while it's
   facing the way it hops: at 17 s it faces left (crow-look) and goes left; at 51 s it faces right and comes back. */
.season-prop .crow-perch { animation: crow-perch 60s infinite; }
.season-prop--scarecrow svg { overflow: visible; } /* the hop's arc goes over the hat, above the picture's box */
@keyframes crow-perch {
  0%, 28.3% { transform: translate(0, 0); }
  28.55% { transform: translate(-9.6px, -19.9px); }
  28.80% { transform: translate(-19.2px, -36.8px); }
  29.05% { transform: translate(-28.9px, -48.0px); }
  29.30% { transform: translate(-38.5px, -52.0px); }
  29.55% { transform: translate(-48.1px, -48.0px); }
  29.80% { transform: translate(-57.8px, -36.8px); }
  30.05% { transform: translate(-67.4px, -19.9px); }
  30.3%, 85% { transform: translate(-77px, 0); }
  85.25% { transform: translate(-67.4px, -19.9px); }
  85.50% { transform: translate(-57.8px, -36.8px); }
  85.75% { transform: translate(-48.1px, -48.0px); }
  86.00% { transform: translate(-38.5px, -52.0px); }
  86.25% { transform: translate(-28.9px, -48.0px); }
  86.50% { transform: translate(-19.2px, -36.8px); }
  86.75% { transform: translate(-9.6px, -19.9px); }
  87%, 100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .season-prop .crow, .season-prop .crow-perch { animation: none; } }

/* Winter: the Christmas tree's lights twinkle, two strands in turn (amber, then teal), each with a soft glow, and the
   star on top glows gently. */
.season-prop .tree-lights { animation: twinkle 1.6s ease-in-out infinite; }
.season-prop .tree-lights--a { filter: drop-shadow(0 0 1.5px #FFC72C); }
.season-prop .tree-lights--b { filter: drop-shadow(0 0 1.5px #04d4ae); animation-delay: -0.8s; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.season-prop .tree-star { animation: star-glow 3s ease-in-out infinite; }
@keyframes star-glow { 0%, 100% { filter: drop-shadow(0 0 1px #FFC72C); } 50% { filter: drop-shadow(0 0 5px #FFC72C); } }
@media (prefers-reduced-motion: reduce) { .season-prop .tree-lights, .season-prop .tree-star { animation: none; } }

/* Winter: a starry night above the line, behind the page's content (z-index -1), fading out towards the top, with a
   happy full moon that bobs gently. The stars twinkle at their own pace. */
/* The footer makes room for the sky, so its stars stay clear of the page's content above (Bart, 2026-10-27). */
.site-footer { --sky-h: 180px; }
.site-footer:has(.season-sky) { margin-top: calc(var(--sky-h) + 16px); }
@media (max-width: 640px) { .site-footer { --sky-h: 150px; } }
.season-sky {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); height: var(--sky-h); z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent); mask-image: linear-gradient(to top, #000 55%, transparent);
}
.season-sky__star {
  position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.55);
  animation: star-twinkle 3s ease-in-out infinite;
}
/* The bigger stars shine: a stronger halo and four thin rays that sparkle with the twinkle. */
.season-sky__star.is-big { width: 3.5px; height: 3.5px; box-shadow: 0 0 8px 2px rgba(255, 250, 225, 0.6); }
.season-sky__star.is-big::before, .season-sky__star.is-big::after {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  width: 14px; height: 1px;
}
.season-sky__star.is-big::after { width: 1px; height: 14px; background: linear-gradient(transparent, rgba(255, 255, 255, 0.85), transparent); }
@keyframes star-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
.season-sky__moon { position: absolute; left: 34%; bottom: 92px; width: 80px; height: 80px; z-index: 1; } /* in front of the shooting stars */
/* The moon holds its place in the sky, asleep, breathing slowly in and out: it swells a touch and settles, in time
   with its glow. */
.season-sky__moon { transform-origin: 50% 50%; animation: moon-breathe 5s ease-in-out infinite; }
@keyframes moon-breathe { 0%, 100% { transform: scale(0.97); } 50% { transform: scale(1.03); } }
.season-sky__moon .moon-glow { transform-box: fill-box; transform-origin: 50% 50%; animation: moon-glow 5s ease-in-out infinite; }
@keyframes moon-glow { 0%, 100% { opacity: 0.8; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.06); } }
/* Winter: Santa waves, his raised arm rocking from the shoulder. */
.season-prop .santa-wave { transform-box: fill-box; transform-origin: 15% 92%; animation: santa-wave 1.6s ease-in-out infinite; }
@keyframes santa-wave { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(16deg); } }
@media (max-width: 640px) { .season-sky__moon { left: auto; right: 10%; bottom: 78px; width: 60px; height: 60px; } }
@media (prefers-reduced-motion: reduce) { .season-sky__star, .season-sky__moon, .season-sky__moon .moon-glow, .season-prop .santa-wave { animation: none; } }

/* Winter: the gingerbread house in the middle of the line (none on phones, where the tree and sleigh fill it), its
   rope of lights twinkling in two sets like the tree's. */
.season-prop--gingerbread { --h: 84px; left: 44%; }
@media (max-width: 640px) { .season-prop--gingerbread { display: none; } }
.season-prop .gb-bulb { animation: bulb-shine 1.8s ease-in-out infinite; }
.season-prop .gb-bulb.is-b { animation-delay: -0.9s; }
/* Lit bulbs: a bright two-layer glow that swells, and only a slight dim between, so they read as shining. */
@keyframes bulb-shine {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 5px currentColor); }
  50% { opacity: 0.55; filter: drop-shadow(0 0 1px currentColor); }
}

/* Winter: the reindeer idle. Each nods now and then (its head and neck, from the shoulders), flicks its tail, and
   Rudolph's nose glows; every reindeer starts at a different point, so they never move together. */
.season-prop .rd-head { transform-box: fill-box; transform-origin: 85% 95%; animation: rd-nod 9s ease-in-out infinite; }
@keyframes rd-nod { 0%, 62%, 100% { transform: rotate(0); } 68%, 74% { transform: rotate(-9deg); } 80% { transform: rotate(2deg); } }
.season-prop .rd-tail { transform-box: fill-box; transform-origin: 0% 50%; animation: rd-tail 9s ease-in-out infinite; }
@keyframes rd-tail { 0%, 30%, 36%, 100% { transform: rotate(0); } 32% { transform: rotate(-25deg); } 34% { transform: rotate(10deg); } }
.season-prop .rd-nose { animation: rd-nose 2.4s ease-in-out infinite; }
@keyframes rd-nose { 0%, 100% { filter: drop-shadow(0 0 1px #E4002B); } 50% { filter: drop-shadow(0 0 4px #ff4060); } }
@media (prefers-reduced-motion: reduce) { .season-prop .gb-bulb, .season-prop .rd-head, .season-prop .rd-tail, .season-prop .rd-nose { animation: none; } }

/* Winter: a shooting star, now and then (seasons.js adds one, and it removes itself when done): a bright streak, coral
   into amber with a near-white head, gliding 10 degrees below level at an even speed and burning out. */
.season-sky__shooting {
  position: absolute; width: 110px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(242, 162, 81, 0), rgba(242, 162, 81, 0.75) 40%, #FFC72C 80%, #fff6d8);
  filter: drop-shadow(0 0 3px rgba(255, 199, 44, 0.8));
  transform-origin: 100% 50%;
  animation: shooting-star 1.1s linear forwards;
}
@keyframes shooting-star {
  0% { opacity: 0; transform: rotate(170deg) translateX(0) scaleX(0.3); }
  12% { opacity: 1; transform: rotate(170deg) translateX(40px) scaleX(1); }
  80% { opacity: 0.9; }
  100% { opacity: 0; transform: rotate(170deg) translateX(360px) scaleX(0.6); }
}

/* Fall: a graveyard in the middle of the line, after Super Ghouls 'n Ghosts (none on phones, where the pumpkins and
   scarecrow fill the line). The zombie rises out of the ground now and then, looks about, and sinks back; the ghost
   floats up and down and drifts a little. */
.season-prop--graveyard { --h: 98px; left: 60%; } /* a zombie's grave, right of the middle, before the scarecrow */
@media (max-width: 640px) { .season-prop--graveyard { display: none; } }
/* The zombie (in profile, arms out), on a 16-second loop: under the ground (0-4 s), climbs out of its grave (4-5.6 s),
   waits a second, shuffles off to the left (6.6-9.4 s), turns round, shuffles back (9.9-12.8 s) and sinks back into the grave still
   facing that way (12.8-14.6 s). */
.season-prop .gng-zombie { transform-box: view-box; transform-origin: 94.5px 92px; animation: gng-zombie 16s ease-in-out 1 both paused; } /* once per page load: seasons.js starts it when the footer comes into view */ /* turns round its own body, over the middle of its grave (not the middle of its outline, arms and all) */
@keyframes gng-zombie {
  0%, 25% { transform: translate(0, 58px) scaleX(1); }
  35%, 41.5% { transform: translate(0, 0) scaleX(1); } /* out, and waits a second */
  59% { transform: translate(-42px, 0) scaleX(1); } /* up to the pumpkin, its hands just short of it */
  62% { transform: translate(-42px, 0) scaleX(-1); }
  80% { transform: translate(0, 0) scaleX(-1); }
  91% { transform: translate(0, 58px) scaleX(-1); } /* sinks in facing the way it came back */
  91.1%, 100% { transform: translate(0, 58px) scaleX(1); } /* turned round again under the ground, out of sight */
}
/* Its legs swing only while it's actually moving (from 7 s and from 10.3 s, once its ease into the walk is under way), on the same 16 s loop; they're still while it climbs
   out, stands, turns round and sinks back. */
.season-prop .gng-leg { transform-box: fill-box; transform-origin: 50% 0; animation: gng-step 16s ease-in-out 1 both paused; }
.season-prop .gng-leg--far { animation-name: gng-step-far; }
@keyframes gng-step {
  0%, 42.5% { transform: rotate(0deg); }
  43.50% { transform: rotate(14deg); }
  45.69% { transform: rotate(-14deg); }
  47.88% { transform: rotate(14deg); }
  50.06% { transform: rotate(-14deg); }
  52.25% { transform: rotate(14deg); }
  54.44% { transform: rotate(-14deg); }
  56.62% { transform: rotate(14deg); }
  58.81% { transform: rotate(-14deg); }
  59.00% { transform: rotate(0deg); }
  63.5% { transform: rotate(0deg); }
  64.50% { transform: rotate(14deg); }
  66.69% { transform: rotate(-14deg); }
  68.88% { transform: rotate(14deg); }
  71.06% { transform: rotate(-14deg); }
  73.25% { transform: rotate(14deg); }
  75.44% { transform: rotate(-14deg); }
  77.62% { transform: rotate(14deg); }
  79.81% { transform: rotate(-14deg); }
  80.00% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes gng-step-far {
  0%, 42.5% { transform: rotate(0deg); }
  43.50% { transform: rotate(-14deg); }
  45.69% { transform: rotate(14deg); }
  47.88% { transform: rotate(-14deg); }
  50.06% { transform: rotate(14deg); }
  52.25% { transform: rotate(-14deg); }
  54.44% { transform: rotate(14deg); }
  56.62% { transform: rotate(-14deg); }
  58.81% { transform: rotate(14deg); }
  59.00% { transform: rotate(0deg); }
  63.5% { transform: rotate(0deg); }
  64.50% { transform: rotate(-14deg); }
  66.69% { transform: rotate(14deg); }
  68.88% { transform: rotate(-14deg); }
  71.06% { transform: rotate(14deg); }
  73.25% { transform: rotate(-14deg); }
  75.44% { transform: rotate(14deg); }
  77.62% { transform: rotate(-14deg); }
  79.81% { transform: rotate(14deg); }
  80.00% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .season-prop .gng-zombie, .season-prop .gng-leg { animation: none; } .season-prop .gng-zombie { transform: none; opacity: 0; } }

/* Fall: rolling grassy hills along the line, two layers of dark green, behind everything else (as in Super Ghouls 'n
   Ghosts), with cows grazing on them. */
.season-hills {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); z-index: 0; height: 54px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='54'%3E%3Cpath d='M0 30C40 30 60 8 105 8S170 34 215 34S280 14 320 14S385 30 420 30V54H0z' fill='%231d3a26'/%3E%3C/svg%3E") repeat-x 0 100% / 420px 54px; /* the far hills */
}
.season-hills--front { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='54'%3E%3Cpath d='M0 44C30 44 55 24 95 24S150 42 200 42S260 26 300 26S370 44 420 44V54H0z' fill='%23274b30'/%3E%3C/svg%3E"); } /* the near hills, in front of the cows */
/* Cows grazing on the far hilltops (seasons.js places them on the crests), each wandering a little way left and right
   and turning around at each end, at its own pace. */
.season-hill-cow { position: absolute; z-index: 0; transform-origin: 50% 100%; width: 44px; height: 28px; pointer-events: none; animation: cow-wander var(--t, 22s) ease-in-out var(--d, 0s) infinite; }
.season-hill-cow svg { display: block; width: 100%; height: 100%; }
@keyframes cow-wander {
  /* the cow is drawn facing left: scaleX(-1) faces it right, so it always walks head first */
  0%, 18% { transform: translateX(-7px) scaleX(-1); } /* grazing, facing right */
  48% { transform: translateX(7px) scaleX(-1); } /* walks right */
  50%, 68% { transform: translateX(7px) scaleX(1); } /* turns round to face left, grazing */
  98% { transform: translateX(-7px) scaleX(1); } /* walks left */
  100% { transform: translateX(-7px) scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) { .season-hill-cow { animation: none; } }
.season-hill-cow.is-still { animation: none; transform: scaleX(-1); } /* the cow on the hill stands where it is, facing right (it's drawn facing left), until its friend is taken */
@media (max-width: 640px) { .season-hills { height: 36px; background-size: 280px 36px; } .season-hill-cow { width: 32px; height: 20px; } .season-hill-cow.is-hidden { width: 22px; height: 14px; } } /* the hidden one stays under the lower hills */

/* Fall: grass along the whole line, blades of two greens, behind the pictures. */
.season-grass {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); z-index: 1; height: 12px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Cpath d='M0 12h48' stroke='%232b4f25' stroke-width='3'/%3E%3Cpath d='M2 12l2-8 2 8M9 12l1-5 2 5M15 12l3-10 1 10M23 12l1-6 2 6M30 12l2-9 2 9M37 12l1-5 2 5M43 12l2-8 2 8' fill='%233f6e34'/%3E%3Cpath d='M6 12l1-6 2 6M19 12l2-7 1 7M27 12l1-4 2 4M34 12l2-7 1 7M40 12l1-4 2 4' fill='%232f5a29'/%3E%3C/svg%3E") repeat-x 0 100% / 48px 12px;
}


/* Fall: Bart's mom's headstone, on its own between the pumpkins and the knight, away from the graveyard. */
.season-prop--memorial { --h: 70px; left: 8%; } /* Mom's headstone, on the left after the big pumpkin */
@media (max-width: 640px) { .season-prop--memorial { --h: 54px; left: 45%; } .season-prop.season-prop--fall { left: 4%; transform: scale(0.7); } .season-prop--small-pumpkin { right: 19%; } }

/* Fall: the UFO (seasons.js flies it in once, to beam up the cows, then it leaves for good). It and its beam are on
   the footer's sky, behind the page; the beam is a narrow-topped cone in the site's teal. */
.season-sky .ufo { position: absolute; left: 0; bottom: 0; width: 64px; height: 30px; transform-origin: 0 100%; z-index: 1; }
.season-sky .ufo svg { display: block; width: 64px; height: 30px; }
.season-sky .ufo-beam {
  position: absolute; width: 40px; opacity: 0;
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  background: linear-gradient(rgba(4, 212, 174, 0.55), rgba(4, 212, 174, 0.18));
}
.season-sky .ufo .ufo-light { animation: twinkle 1.2s ease-in-out infinite; }
.season-sky .ufo .ufo-light.is-b { animation-delay: -0.6s; }

@media (max-width: 640px) { .season-prop--spider { left: 70%; animation-name: spider-walk-sm; } } /* phones: the pumpkins are further left */

/* Fall: the "!" over the cow on the hill when it sees a UFO (Metal Gear Solid style): pops up with a bounce, stays
   while the cow runs, and fades. */
.cow-alert { position: absolute; left: 50%; bottom: calc(100% + 2px); width: 12px; height: 26px; margin-left: -6px; transform-origin: 50% 100%; animation: cow-alert 0.45s ease-out forwards; }
.cow-alert svg { display: block; width: 100%; height: 100%; }
@keyframes cow-alert {
  0% { transform: translateY(6px) scale(0.2); opacity: 0; }
  55% { transform: translateY(-4px) scale(1.25); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* it stays up until seasons.js dismisses it, then fades */
.cow-alert.is-leaving { animation: cow-alert-out 0.4s ease-in forwards; }
@keyframes cow-alert-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-3px); } }


/* Fall: the cows graze with their heads down, nibbling (the head turns down from the neck); a startled cow lifts its
   head. */
.season-hill-cow .cow-head { transform-box: view-box; transform-origin: -13px -14px; transition: transform 0.4s ease-out; }
.season-hill-cow.is-grazing .cow-head { transform: translate(3px, 3.5px) rotate(-50deg); transition: transform 0.8s ease-in-out; animation: cow-nibble 1.6s ease-in-out 0.8s infinite; } /* eases down, then starts nibbling */
@keyframes cow-nibble { 0%, 100% { transform: translate(3px, 3.5px) rotate(-50deg); } 50% { transform: translate(3px, 2.5px) rotate(-43deg); } }
@media (prefers-reduced-motion: reduce) { .season-hill-cow.is-grazing .cow-head { animation: none; } }

/* Fall: the cow on the hill, being beamed up, looks left and right in a panic (its picture flips back and forth). */
.season-hill-cow.is-looking > svg { transform-origin: 50% 50%; animation: cow-look 6s ease-in-out 1 forwards; } /* over the 6 s lift */
/* three looks round in all: at about 1.2, 2.9 and 4.6 seconds */
@keyframes cow-look { 0%, 18% { transform: scaleX(1); } 21% { transform: scaleX(0.1); } 24%, 46% { transform: scaleX(-1); } 49% { transform: scaleX(0.1); } 52%, 74% { transform: scaleX(1); } 77% { transform: scaleX(0.1); } 80%, 100% { transform: scaleX(-1); } }
@media (prefers-reduced-motion: reduce) { .season-hill-cow.is-looking > svg { animation: none; } }

/* Fall: the zombie's last appearance. Back at its grave, it turns to face you (the front view swaps in) and waves, then
   sinks back in still facing you. */
.season-prop .gng-front { opacity: 0; }
.season-prop .gng-zombie.is-waving .gng-profile { opacity: 0; transition: opacity 0.15s; }
.season-prop .gng-zombie.is-waving .gng-front { opacity: 1; transition: opacity 0.15s; }
.season-prop .gng-wave { transform-box: view-box; transform-origin: 101px 57px; }
.season-prop .gng-zombie.is-waving .gng-wave { animation: gng-wave 0.55s ease-in-out infinite alternate; }
@keyframes gng-wave { from { transform: rotate(-18deg); } to { transform: rotate(14deg); } }

/* Scrollbars: the site's teal on the page's dark. scrollbar-color for Chrome and Firefox; the ::-webkit-scrollbar
   rules for Safari, which ignores it (Chrome ignores those once scrollbar-color is set). */
html { scrollbar-color: var(--accent) var(--bg); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border: 3px solid var(--bg); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #3fe6c6; }