/* ── Psychotronic Film Library ──────────────────────────────────────────────
   Palette cut from the banner: hot magenta on near-black plum, cream bubble
   type, a lick of orange, the turquoise from her hair, poster yellow for the
   credit blocks. Halftone dots and film grain over everything.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --ink: #12060f;
  --black: #070206;
  --plum: #2a0b2e;
  --plum-2: #451447;
  --magenta: #ff2d9b;
  --magenta-deep: #b8126b;
  --orange: #ff5a1f;
  --cream: #f4e6c3;
  --paper: #fff8ea;
  --yellow: #f4e04d;
  --teal: #3cc7c0;
  --dim: rgba(244, 230, 195, .62);

  --display: "Shrikhand", "Cooper Black", Georgia, serif;
  --poster: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --type: "Special Elite", "Courier New", monospace;
  --body: "Crimson Pro", Georgia, "Times New Roman", serif;

  --wrap: 1180px;
  --gutter: 16px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 45, 155, .28) 0 1px, transparent 1.3px),
    radial-gradient(ellipse at 50% 0%, rgba(255, 45, 155, .14), transparent 55%),
    linear-gradient(180deg, var(--plum) 0%, var(--ink) 45%, var(--black) 100%);
  background-size: 26px 26px, 100% 100%, 100% 100%;
  overflow-x: hidden;
}

/* Concentric rings, top right, like the banner's hypno-swirl. */
body::before {
  content: "";
  position: fixed;
  inset: -40vmax -40vmax auto auto;
  width: 90vmax; height: 90vmax;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center,
    rgba(255, 45, 155, .0) 0 14px,
    rgba(255, 45, 155, .07) 14px 22px,
    rgba(69, 20, 71, .0) 22px 36px);
  pointer-events: none;
  z-index: 0;
  opacity: .8;
}

/* Film grain overlay. */
.grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 10;
  background: var(--yellow); color: var(--ink); padding: .4em .8em; font-family: var(--poster);
}
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

a { color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { color: var(--paper); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.wrap { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) 4rem; }

/* ── Masthead ─────────────────────────────────────────────────────────────── */
.masthead { position: relative; z-index: 1; padding: clamp(14px, 3vw, 34px) var(--gutter) 0; }
.banner {
  display: block; max-width: var(--wrap); margin: 0 auto;
  transform: rotate(-.6deg);
  border-radius: 4px;
  box-shadow: 0 0 0 4px var(--cream), 0 0 0 7px var(--black), 0 22px 50px rgba(0, 0, 0, .65);
  transition: transform .25s ease;
}
.banner:hover { transform: rotate(.3deg) scale(1.005); }
.banner img { display: block; width: 100%; height: auto; border-radius: 3px; }

.marquee {
  max-width: var(--wrap); margin: clamp(22px, 4vw, 40px) auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .2em 2.2em;
  padding: .55em 1em;
  background: linear-gradient(180deg, var(--magenta) 0%, var(--magenta-deep) 100%);
  border-top: 6px dotted var(--yellow);
  border-bottom: 6px dotted var(--yellow);
  box-shadow: 0 8px 24px rgba(255, 45, 155, .28);
}
.marquee a {
  font-family: var(--poster); text-transform: uppercase; letter-spacing: .14em;
  font-size: clamp(.95rem, 1.6vw, 1.2rem);
  color: var(--cream); text-decoration: none; padding: .2em 0;
  text-shadow: 2px 2px 0 var(--black);
}
.marquee a:hover, .marquee a[aria-current="page"] { color: var(--yellow); }
.marquee a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .22em; }

/* ── Type ─────────────────────────────────────────────────────────────────── */
.display {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.3rem, 6.5vw, 4.4rem); line-height: 1.02; color: var(--cream);
  text-shadow: 3px 3px 0 var(--magenta-deep), 6px 6px 0 var(--black);
  letter-spacing: .01em;
}
.strap { margin: .7em 0 0; font-family: var(--poster); text-transform: uppercase; letter-spacing: .1em; color: var(--yellow); font-size: 1.05rem; }
.strap b { font-weight: 400; color: var(--paper); }
.strap-sep { margin: 0 .5em; color: var(--magenta); }
.aka { margin: .5em 0 0; font-family: var(--type); color: var(--dim); font-size: .95rem; }
.rule {
  margin: 3rem 0 1rem; padding-bottom: .25em; font-family: var(--poster); font-weight: 400;
  text-transform: uppercase; letter-spacing: .14em; font-size: 1.4rem; color: var(--yellow);
  border-bottom: 4px double var(--magenta);
}
.dim { color: var(--dim); font-family: var(--type); font-size: .9em; }

.page-head { margin: clamp(1.6rem, 4vw, 3rem) 0 2rem; }
.lobby-head { margin: clamp(1.6rem, 4vw, 3rem) 0 1.4rem; text-align: center; }

/* ── Prose ────────────────────────────────────────────────────────────────── */
.prose { max-width: 68ch; }
.prose p { margin: 0 0 1.2em; }
.prose h2, .prose h3 { font-family: var(--poster); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: var(--yellow); margin: 1.8em 0 .5em; }
.prose blockquote { margin: 1.4em 0; padding: .2em 1.2em; border-left: 5px solid var(--magenta); font-style: italic; color: var(--paper); }
.prose img { max-width: 100%; height: auto; border: 4px solid var(--cream); box-shadow: 8px 8px 0 var(--magenta); }
.prose hr { border: 0; border-top: 4px dotted var(--magenta); margin: 2em 0; }
.prose code { font-family: var(--type); background: var(--plum); padding: .05em .3em; }

/* ── Finder (search + genre chips) ────────────────────────────────────────── */
.finder { margin: 0 auto 2.2rem; max-width: 820px; text-align: center; }
.finder input {
  width: 100%; padding: .7em 1em; font: 1.05rem var(--type);
  color: var(--ink); background: var(--paper);
  border: 3px solid var(--black); border-radius: 2px;
  box-shadow: 5px 5px 0 var(--magenta);
}
.finder input::placeholder { color: rgba(18, 6, 15, .55); }
.finder input:focus { outline: 3px solid var(--yellow); outline-offset: 2px; }
.genre-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; margin-top: 1rem; }

.chip {
  display: inline-block; padding: .28em .8em .22em; cursor: pointer;
  font-family: var(--poster); font-size: .85rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--cream); background: transparent; border: 2px solid var(--cream); border-radius: 999px;
  text-decoration: none; line-height: 1.3; transition: background .15s, color .15s, transform .15s;
}
.chip:hover { background: var(--magenta); border-color: var(--magenta); color: var(--paper); transform: translateY(-1px); }
.chip.is-on { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: .4em; }
.genre-row:not(.is-open) .chip-more { display: none; }
.chip-toggle { border-style: dashed; color: var(--dim); }
.genre-row.is-open .chip-toggle { display: none; }
.chips .chip { font-size: .72rem; }

/* ── The rack of lobby cards ──────────────────────────────────────────────── */
.rack {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.2rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.card { position: relative; }
.card-link {
  display: block; height: 100%; color: var(--ink); text-decoration: none;
  background: var(--cream); padding: 8px 8px 12px;
  border: 2px solid var(--black); border-radius: 3px;
  box-shadow: 6px 6px 0 var(--magenta), 6px 6px 0 2px var(--black);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:nth-child(3n+1) .card-link { transform: rotate(-.7deg); }
.card:nth-child(3n+2) .card-link { transform: rotate(.5deg); }
.card:nth-child(3n) .card-link { transform: rotate(-.3deg); }
.card-link:hover, .card-link:focus-visible {
  transform: translate(-3px, -4px) rotate(0);
  box-shadow: 10px 10px 0 var(--orange), 10px 10px 0 2px var(--black);
  color: var(--ink);
}
.card-poster { position: relative; margin: 0; aspect-ratio: 2 / 3; overflow: hidden; background: var(--plum); border: 1px solid rgba(0, 0, 0, .35); }
.card-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sticker {
  position: absolute; top: -8px; right: -8px;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--poster); font-size: 1rem; letter-spacing: .02em;
  color: var(--paper); background: var(--orange);
  border: 3px solid var(--cream); box-shadow: 2px 2px 0 var(--black);
  transform: rotate(9deg);
}
.card-text { padding: .75rem .25rem 0; }
.card-genre { margin: 0 0 .15em; font-family: var(--poster); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: var(--magenta-deep); }
.card-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.12; color: var(--ink); }
.card-dir { margin: .35em 0 .4em; font-family: var(--type); font-size: .8rem; color: rgba(18, 6, 15, .75); }
.empty { text-align: center; font-family: var(--type); color: var(--dim); margin: 3rem 0; }

/* ── Eyes (the rating) ────────────────────────────────────────────────────── */
.eyes { display: inline-flex; gap: 3px; vertical-align: middle; --eye-line: currentColor; }
.eye { width: 24px; height: 15px; overflow: visible; }
.eye .lid { fill: none; stroke: var(--eye-line); stroke-width: 2; opacity: .35; }
.eye .iris, .eye .pupil { fill: none; }
.eye.lit .lid { fill: var(--paper); stroke: var(--ink); opacity: 1; }
.eye.lit .iris { fill: var(--magenta); }
.eye.lit .pupil { fill: var(--ink); }
.credits .eyes { --eye-line: var(--cream); }
.credits .eye { width: 30px; height: 19px; }

/* ── Review page ──────────────────────────────────────────────────────────── */
.review-head { text-align: center; margin: clamp(1.6rem, 4vw, 3rem) auto 2.4rem; max-width: 900px; }
.review-grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem; }
@media (min-width: 860px) {
  .review-grid { grid-template-columns: 320px 1fr; gap: 3.5rem; align-items: start; }
  .one-sheet { position: sticky; top: 1.5rem; }
}
.poster-frame {
  position: relative; margin: 0 0 1.6rem; max-width: 420px;
  transform: rotate(-1.4deg);
  border: 6px solid var(--cream); background: var(--cream);
  box-shadow: 12px 12px 0 var(--magenta), 12px 12px 0 2px var(--black);
}
.poster-frame img { display: block; width: 100%; height: auto; }
.stamp {
  position: absolute; left: -16px; top: 22px;
  transform: rotate(-12deg);
  padding: .2em .55em .12em; font-family: var(--poster); text-transform: uppercase; letter-spacing: .12em; font-size: 1.05rem;
  color: var(--orange); border: 4px double var(--orange); background: rgba(18, 6, 15, .82);
  box-shadow: 3px 3px 0 var(--black);
}
.credits { margin: 0; font-family: var(--type); font-size: .95rem; }
.credits dt { font-family: var(--poster); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; color: var(--magenta); margin: 0 0 .15em; }
.credits dd { margin: 0 0 1rem; color: var(--paper); }
.review-body { font-size: 1.22rem; padding: .2rem 1.2rem .6rem; margin: 0 -1.2rem; background: radial-gradient(ellipse at 50% 30%, rgba(18, 6, 15, .85), rgba(18, 6, 15, .55) 70%, transparent 100%); border-radius: 12px; }
.review-body > p:first-of-type::first-letter {
  float: left; font-family: var(--display); font-size: 3.9em; line-height: .78;
  padding: .08em .12em 0 0; color: var(--magenta); text-shadow: 3px 3px 0 var(--black);
}
.byline { margin-top: 2.4em; font-family: var(--type); font-size: .9rem; color: var(--dim); border-top: 3px dotted var(--magenta); padding-top: 1em; }

.double-bill { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 3.5rem; }
@media (min-width: 640px) { .double-bill { grid-template-columns: 1fr 1fr; } }
.bill { display: block; padding: .9em 1.1em; border: 3px dashed var(--cream); text-decoration: none; color: var(--cream); transition: background .15s; }
.bill:hover { background: var(--plum-2); color: var(--paper); }
.bill.next { text-align: right; }
.bill-label { display: block; font-family: var(--poster); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; color: var(--magenta); }
.bill-title { display: block; font-family: var(--display); font-size: 1.2rem; line-height: 1.15; }

/* ── Screening room (trailer + score) ────────────────────────────────────── */
.screening { margin-top: 2.5rem; }
.screening .rule { margin-top: 2rem; font-size: 1.15rem; }
.player { position: relative; aspect-ratio: 16 / 9; max-width: 720px; background: var(--black); border: 4px solid var(--cream); box-shadow: 8px 8px 0 var(--magenta), 8px 8px 0 2px var(--black); overflow: hidden; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-face { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: var(--black); cursor: pointer; }
.player-face img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s, transform .3s; }
.player-face:hover img { opacity: 1; transform: scale(1.03); }
.play-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--magenta); color: var(--paper); font-size: 1.7rem; padding-left: 6px; border: 3px solid var(--cream); box-shadow: 3px 3px 0 var(--black); }
.player-face:hover .play-badge { background: var(--orange); }
.tracks { list-style: none; margin: 0 0 1.4rem; padding: 0 0 12px; display: grid; gap: 1.6rem; }
@media (min-width: 720px) { .tracks { grid-template-columns: 1fr 1fr; } }
.track-title { margin: 0 0 .5rem; font-family: var(--type); font-size: .95rem; color: var(--paper); }

/* ── Other posters ───────────────────────────────────────────────────────── */
.poster-alts { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; max-width: 420px; }
.poster-alts .alt { display: block; padding: 0; width: 56px; border: 2px solid rgba(244, 230, 195, .4); background: var(--black); cursor: pointer; transition: border-color .15s, transform .15s; }
.poster-alts .alt img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.poster-alts .alt:hover { border-color: var(--yellow); transform: translateY(-2px); }
.poster-alts .alt.is-on { border-color: var(--magenta); box-shadow: 2px 2px 0 var(--black); }

/* ── Stills ──────────────────────────────────────────────────────────────── */
.stills { margin-top: 2.5rem; }
.still-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (min-width: 720px) { .still-strip { grid-template-columns: repeat(4, 1fr); } }
.still-strip img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 3px solid var(--cream); box-shadow: 5px 5px 0 var(--magenta), 5px 5px 0 2px var(--black); transition: transform .15s; }
.still-strip a:hover img { transform: translate(-2px, -2px); }

/* ── Related ─────────────────────────────────────────────────────────────── */
.related { margin-top: 3rem; }
.rack-small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.rack-small .card-title { font-size: 1rem; }
.rack-small .sticker { width: 46px; height: 46px; font-size: .85rem; }
.elsewhere { display: flex; gap: .9em; flex-wrap: wrap; }
.elsewhere a { color: var(--yellow); }
.top-shelf-page .rule { margin-top: 2.2rem; }

/* ── Shelf ────────────────────────────────────────────────────────────────── */
.genre-block { margin: 1.4rem 0 2rem; }
.genre-name { margin: 0 0 .3em; font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--cream); text-transform: capitalize; }
.listing { list-style: none; margin: 0; padding: 0; columns: 1; }
@media (min-width: 720px) { .listing { columns: 2; column-gap: 3rem; } }
.listing li { break-inside: avoid; padding: .3em 0; border-bottom: 1px dotted rgba(244, 230, 195, .25); }
.listing a { color: var(--paper); text-decoration: none; }
.listing a:hover { color: var(--yellow); text-decoration: underline; }

/* ── Coming attractions strip ─────────────────────────────────────────────── */
.coming { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em 1em; margin: 0 auto 2rem; max-width: 900px; padding: .6em 1em; background: var(--cream); color: var(--ink); border: 2px solid var(--black); box-shadow: 5px 5px 0 var(--orange), 5px 5px 0 2px var(--black); transform: rotate(.4deg); }
.coming-label { font-family: var(--poster); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: var(--magenta-deep); }
.coming-list { display: flex; flex-wrap: wrap; gap: .3em 1.2em; font-family: var(--type); font-size: .92rem; }
.coming-item::before { content: "\25B8 "; color: var(--magenta); }

/* ── Dice ────────────────────────────────────────────────────────────────── */
.marquee .dice { color: var(--yellow); }
.marquee .dice:hover { color: var(--paper); }

/* ── Directors ──────────────────────────────────────────────────────────── */
.director-block { margin: 1.4rem 0 2rem; scroll-margin-top: 1rem; }
.director-name { margin: 0 0 .2em; font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--cream); }
.director-count { font-family: var(--type); font-size: .85rem; color: var(--dim); margin-left: .5em; }
.quiet { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--magenta); }
.quiet:hover { color: var(--yellow); }

/* ── Where to watch ─────────────────────────────────────────────────────── */
.watch { display: flex; flex-wrap: wrap; gap: .3em .9em; }
.watch-item a { color: var(--yellow); }

/* ── Comments ────────────────────────────────────────────────────────────── */
.comments { margin-top: 2.5rem; }
.comments-note { margin: 0 0 1rem; font-family: var(--type); font-size: .85rem; color: var(--dim); }

/* ── Newsletter ─────────────────────────────────────────────────────────── */
.newsletter { max-width: 560px; margin: 0 auto 2rem; }
.newsletter-form { padding: 1.2rem 1.4rem; background: var(--cream); color: var(--ink); border: 2px solid var(--black); box-shadow: 6px 6px 0 var(--magenta), 6px 6px 0 2px var(--black); transform: rotate(-.5deg); text-align: left; }
.newsletter-label { display: block; font-family: var(--poster); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--magenta-deep); margin-bottom: .5rem; }
.newsletter-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.newsletter-row input { flex: 1 1 200px; padding: .55em .8em; font: 1rem var(--type); color: var(--ink); background: var(--paper); border: 2px solid var(--ink); }
.newsletter-row .button { margin-top: 0; }
.newsletter-small { margin: .6rem 0 0; font-family: var(--type); font-size: .78rem; color: rgba(18, 6, 15, .7); }

/* ── Contact ──────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1.2fr; gap: 3.5rem; align-items: start; } }
.contact-form { display: grid; gap: .35rem; padding: 1.4rem; background: var(--cream); color: var(--ink); border: 2px solid var(--black); box-shadow: 8px 8px 0 var(--magenta), 8px 8px 0 2px var(--black); transform: rotate(-.4deg); }
.contact-form label { font-family: var(--poster); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--magenta-deep); margin-top: .7rem; }
.contact-form input, .contact-form textarea { width: 100%; padding: .6em .8em; font: 1rem var(--type); color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; }
.contact-form textarea { resize: vertical; min-height: 9em; }
.contact-form input:focus, .contact-form textarea:focus { outline: 3px solid var(--magenta); outline-offset: 1px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.button { margin-top: 1.2rem; justify-self: start; padding: .55em 1.4em .45em; cursor: pointer; font-family: var(--poster); text-transform: uppercase; letter-spacing: .14em; font-size: 1rem; color: var(--paper); background: var(--magenta); border: 2px solid var(--black); box-shadow: 4px 4px 0 var(--black); transition: transform .12s, box-shadow .12s; }
.button:hover { background: var(--orange); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--black); }
.button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--black); }
.form-note { margin: .8rem 0 0; font-family: var(--type); font-size: .85rem; color: var(--magenta-deep); }
.form-note:empty { display: none; }

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.lost-head { text-align: center; padding: 3rem 0; }
.lost-head .display { font-size: clamp(4rem, 18vw, 11rem); }
.lost-head .chip { margin-top: 1.5rem; }

/* ── Colophon ─────────────────────────────────────────────────────────────── */
.colophon {
  position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: 1.6rem var(--gutter) 3rem;
  text-align: center; font-family: var(--type); color: var(--dim); border-top: 6px dotted var(--magenta);
}
.colophon-line { margin: 0 0 .4em; font-size: .95rem; }
.colophon-small { margin: 0; font-size: .78rem; }

@media (prefers-reduced-motion: reduce) {
  .banner, .card-link, .chip, .bill { transition: none; }
  .card-link:hover { transform: none; }
}