/* extinction.meme · "I FUCKING LOVE AMERICA" theme (the styling half of america.js).
   Everything hangs off html[data-america="on"], which theme.js sets before first paint (July 4 by default, or whatever the
   visitor picked in settings). Remove the attribute and the site looks exactly like it did before.
   - light "discord kitten" -> picnic-blanket America: red gingham, white cards, royal-blue + red sticker pastels
   - dark  "reddit mod"     -> fireworks-night America: midnight navy, white lines, red hard shadows, a faint star field
   Pure kitsch, no politics: eagles, fireworks, flags, monster trucks. Decoration only: nothing here takes pointer events (except
   the draggable stickers) or moves the layout, and it all goes still under prefers-reduced-motion / calm mode.
   Load it AFTER season.css: when Halloween is on too, America wins the palette and Halloween's own decorations stay. */

@font-face { font-family: "XA Anton"; src: url(/fonts/Anton-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "XA Bangers"; src: url(/fonts/Bangers-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }

/* ============================================================ art tokens (the same in both vibes) ============================================================ */
html[data-america="on"] {
  --xa-ink: #0b1747; --xa-navy: #0b1747;
  --xa-red: #e0243a; --xa-red-d: #b3162b; --xa-blue: #2a56d6; --xa-blue-l: #4f80ff; --xa-white: #fff;
  --xa-gold: #ffd23f; --xa-gold-d: #f0a500; --xa-brown: #7b4a22; --xa-brown-d: #5a3414; --xa-beak: #ffbb1c;
  --xa-glass: #bfe0ff; --xa-tire: #232845; --xa-stick: #d9a15a;
  --xa-d-kitten: block; --xa-d-mod: none;
}

/* ============================================================ light = discord kitten, picnic-blanket America ============================================================ */
html[data-america="on"]:not(#xa) {
  --ink: #0b1747; --shade: #0b1747; --line: #9db2ee; --card: #fff; --well: #e8eeff;
  --header-bg: rgba(255, 255, 255, .94); --rule-line: #c9d6ff; --toast-bg: #0b1747; --toast-fg: #ffe45c;
  --title-stroke: #0b1747; --title-shadow: #0b1747; --ink-soft: #3d5190; --paper: #fffdfb; --pastel-ink: #0b1747;
  --bg: #fff7f5; --gingham: rgba(217, 31, 56, .15);
  --hot: #d91f38; --pink: #ffb1bd; --bubble: #ffd3da; --butter: #ffe45c; --sky: #a8cbff; --mint: #e3ecff; --lilac: #c6d3ff; --nope: #2f5fd0;
  --xs-hot-ink: #fff;
}

/* ============================================================ dark = reddit mod, fireworks-night America ============================================================ */
@media (prefers-color-scheme: dark) {
  html[data-america="on"]:not([data-theme="light"]):not(#xa) {
    --ink: #eef2ff; --ink-soft: #a9b6e0; --paper: #0e1738; --bg: #060c22; --gingham: rgba(224, 36, 58, .085);
    --line: #e6ecff; --shade: #e0243a; --card: #16224d; --well: #0a1230; --header-bg: rgba(6, 12, 34, .93);
    --rule-line: rgba(230, 236, 255, .14); --toast-bg: #eef2ff; --toast-fg: #0b1747; --title-stroke: #060c22; --title-shadow: #c81d33;
    --hot: #f0283f; --pink: #ffb0bb; --bubble: #ffd0d7; --butter: #ffe45c; --sky: #a8cbff; --mint: #dce8ff; --lilac: #c6d3ff; --nope: #7898ff;
    --xs-hot-ink: #fff;
    --xa-d-kitten: none; --xa-d-mod: block;
    --xa-eagle-fx: drop-shadow(0 0 5px rgba(170, 195, 255, .5)) brightness(1.18);
  }
  html[data-america="on"]:not([data-theme="light"]) body {
    background-image:
      linear-gradient(90deg, var(--gingham) 50%, transparent 50%),
      linear-gradient(var(--gingham) 50%, transparent 50%),
      radial-gradient(1.5px 1.5px at 23px 41px, rgba(255, 255, 255, .55), transparent),
      radial-gradient(1.2px 1.2px at 130px 88px, rgba(255, 255, 255, .4), transparent),
      radial-gradient(1.6px 1.6px at 200px 170px, rgba(255, 255, 255, .5), transparent),
      radial-gradient(1px 1px at 76px 210px, rgba(255, 255, 255, .35), transparent);
    background-size: 44px 44px, 44px 44px, 240px 240px, 240px 240px, 240px 240px, 240px 240px;
  }
}
html[data-america="on"][data-theme="dark"]:not(#xa) {
  --ink: #eef2ff; --ink-soft: #a9b6e0; --paper: #0e1738; --bg: #060c22; --gingham: rgba(224, 36, 58, .085);
  --line: #e6ecff; --shade: #e0243a; --card: #16224d; --well: #0a1230; --header-bg: rgba(6, 12, 34, .93);
  --rule-line: rgba(230, 236, 255, .14); --toast-bg: #eef2ff; --toast-fg: #0b1747; --title-stroke: #060c22; --title-shadow: #c81d33;
  --hot: #f0283f; --pink: #ffb0bb; --bubble: #ffd0d7; --butter: #ffe45c; --sky: #a8cbff; --mint: #dce8ff; --lilac: #c6d3ff; --nope: #7898ff;
  --xs-hot-ink: #fff;
  --xa-d-kitten: none; --xa-d-mod: block;
  --xa-eagle-fx: drop-shadow(0 0 5px rgba(170, 195, 255, .5)) brightness(1.18);
}
html[data-america="on"][data-theme="dark"] body {
  background-image:
    linear-gradient(90deg, var(--gingham) 50%, transparent 50%),
    linear-gradient(var(--gingham) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 23px 41px, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1.2px 1.2px at 130px 88px, rgba(255, 255, 255, .4), transparent),
    radial-gradient(1.6px 1.6px at 200px 170px, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1px 1px at 76px 210px, rgba(255, 255, 255, .35), transparent);
  background-size: 44px 44px, 44px 44px, 240px 240px, 240px 240px, 240px 240px, 240px 240px;
}

/* ============================================================ header + footer: a red / white / blue ribbon instead of the plain line ============================================================ */
html[data-america="on"] .top {
  border-bottom-color: transparent;
  border-image: repeating-linear-gradient(90deg, var(--xa-red) 0 16px, #fff 16px 22px, var(--xa-blue) 22px 38px, #fff 38px 44px) 1;
}
html[data-america="on"] footer {
  border-top-color: transparent;
  border-image: repeating-linear-gradient(90deg, var(--xa-red) 0 16px, #fff 16px 22px, var(--xa-blue) 22px 38px, #fff 38px 44px) 1;
}

/* ============================================================ the home page title: red / white / blue letters ============================================================ */
html[data-america="on"]:not(#xa) .hero-title .w1 .l:nth-child(3n+1) { color: var(--xa-red); }
html[data-america="on"]:not(#xa) .hero-title .w1 .l:nth-child(3n+2) { color: #fff; }
html[data-america="on"]:not(#xa) .hero-title .w1 .l:nth-child(3n) { color: var(--xa-blue-l); }
html[data-america="on"]:not(#xa) .hero-title .w2 .dot { color: var(--xa-gold); }
html[data-america="on"]:not(#xa) .hero-title .w2 .l:nth-child(2) { color: #fff; }
html[data-america="on"]:not(#xa) .hero-title .w2 .l:nth-child(3) { color: var(--xa-blue-l); }
html[data-america="on"]:not(#xa) .hero-title .w2 .l:nth-child(4) { color: var(--xa-red); }
html[data-america="on"]:not(#xa) .hero-title .w2 .l:nth-child(5) { color: #fff; }
html[data-america="on"] .hero::after {                 /* a red glow left, a blue glow right, like searchlights behind the title */
  content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; top: 20px; height: 400px; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 46% at 24% 46%, rgba(224, 36, 58, .17), transparent 72%),
    radial-gradient(ellipse 34% 46% at 76% 46%, rgba(42, 86, 214, .17), transparent 72%);
  animation: xa-sweep 7s ease-in-out infinite alternate;
}
@keyframes xa-sweep { from { opacity: .7; transform: translateX(-10px); } to { opacity: 1; transform: translateX(10px); } }

/* ============================================================ decoration plumbing ============================================================ */
.xa-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.xa-fxcv { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 89; pointer-events: none; }

/* symbol parts (the symbols live in .xa-defs; colours come from the tokens above, inherited through <use>) */
.xa-o { stroke: var(--xa-ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.xa-o2 { stroke: var(--xa-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.xa-ln { fill: none; stroke: var(--xa-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.xa-ln-w { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xa-ink-f { fill: var(--xa-ink); }
.xa-white-f { fill: #fff; }
.xa-nofill { fill: none; }
.xa-red { fill: var(--xa-red); } .xa-reddk { fill: var(--xa-red-d); }
.xa-blue { fill: var(--xa-blue); } .xa-bluel { fill: var(--xa-blue-l); }
.xa-white { fill: #fff; }
.xa-gold { fill: var(--xa-gold); } .xa-golddk { fill: var(--xa-gold-d); }
.xa-brown { fill: var(--xa-brown); } .xa-browndk { fill: var(--xa-brown-d); }
.xa-beak { fill: var(--xa-beak); }
.xa-glass { fill: var(--xa-glass); }
.xa-tire { fill: var(--xa-tire); }
.xa-stick { fill: var(--xa-stick); }
.xa-pole { fill: #e9edf8; }
.xa-blush { fill: #ff8fa8; opacity: .8; }
.xa-shade { fill: #000; opacity: .1; }
.xa-shine { fill: #fff; opacity: .55; }
.xa-tick { fill: none; stroke: var(--xa-brown-d); stroke-width: 2; stroke-linecap: round; }
.xa-brow { stroke-width: 3.6; }
.xa-thin { stroke-width: 1.6; }
.xa-talon { stroke: var(--xa-gold-d); stroke-width: 3; }
.xa-ray-o { fill: none; stroke: var(--xa-ink); stroke-width: 7; stroke-linecap: round; }
.xa-ray { fill: none; stroke: var(--c); stroke-width: 3.6; stroke-linecap: round; }
.xa-ray-dot { fill: var(--c); stroke: var(--xa-ink); stroke-width: 1.6; }
.xa-r-red { --c: var(--xa-red); } .xa-r-white { --c: #fff; } .xa-r-blue { --c: var(--xa-blue); } .xa-r-gold { --c: var(--xa-gold); }

/* ============================================================ the waving flag ribbon under the header (a canvas; zero-height wrapper, so nothing moves) ============================================================ */
.xa-flagwrap { position: relative; height: 0; z-index: 2; pointer-events: none; }
.xa-flag { position: absolute; left: 0; top: 0; width: 100%; height: 32px; pointer-events: none; display: block; }

/* ============================================================ logo: an Uncle-Sam top hat on the kitten skull, star-spangled shades on the fedora skull ============================================================ */
html[data-america="on"] .logo { position: relative; }
html[data-america="on"] .logo .xa-logohat {   /* same box + same hover transform as the skull svgs (see ".logo svg" in style.css) */
  position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0; overflow: visible; pointer-events: none; width: 38px; height: 38px;
}
html[data-america="on"] .logo .xa-hat-k { display: var(--xa-d-kitten); }
html[data-america="on"] .logo .xa-hat-m { display: var(--xa-d-mod); }
html[data-america="on"][data-season] .logo .xa-logohat { display: none; }   /* both themes on: keep Halloween's own logo decorations, no double hats */

/* ============================================================ sparkles around the hero title (glitter) ============================================================ */
.xa-glit { position: absolute; z-index: -1; width: var(--s, 22px); height: var(--s, 22px); pointer-events: none; animation: xa-tw 2.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
.xa-glit svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes xa-tw { 0%, 100% { opacity: .22; transform: scale(.55) rotate(0deg); } 50% { opacity: 1; transform: scale(1.05) rotate(24deg); } }

/* ============================================================ draggable patriotic stickers (look + feel of .sticker; america.js owns the dragging) ============================================================ */
.xa-sticker {
  position: absolute; pointer-events: auto; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  font-size: 40px; line-height: 1; white-space: nowrap; transform: rotate(var(--r, 0deg)); transition: box-shadow .1s;
}
.xa-sticker.dragging { cursor: grabbing; z-index: 10; }
.xa-sticker.xa-art { filter: drop-shadow(2px 3px 0 var(--shade)); }
.xa-sticker.xa-art.dragging { filter: drop-shadow(4px 6px 0 var(--shade)); }
.xa-sticker svg { display: block; width: calc(1em * var(--sz, 1.15)); height: calc(1em * var(--sz, 1.15)); overflow: visible; }
.xa-sticker .xa-bob { animation: xa-bob 2.8s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes xa-bob { from { transform: translateY(2px) rotate(-2deg); } to { transform: translateY(-4px) rotate(2deg); } }
.xa-sticker.xa-pill {
  font-family: var(--hand); font-weight: 700; font-size: 24px; padding: 6px 12px; border: 2.5px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--xa-navy); box-shadow: 3px 3px 0 var(--shade);
}
.xa-sticker.xa-pill.dragging { box-shadow: 6px 8px 0 var(--shade); }
.xa-pill.xa-p-red { background: var(--xa-red); color: #fff; }
.xa-pill.xa-p-blue { background: var(--xa-blue); color: #fff; }
.xa-pill.xa-p-white { background: #fff; color: var(--xa-navy); }
.xa-pill.xa-p-gold { background: var(--xa-gold); color: var(--xa-navy); }
.xa-sticker[hidden] { display: none; }

/* ============================================================ footer greeting ============================================================ */
footer .xa-foot { font-size: 26px; color: var(--hot); margin: 0 0 6px; }

/* ============================================================ the eagle that soars past: photos of a real bald eagle (behind the page, so it never covers anything you read) ============================================================ */
/* america.js flips five frames (site/fx/america/eagle-flap-1..5.webp, 720x460) and moves the box with a transform every animation frame */
.xa-eagle { position: fixed; left: 0; top: var(--y, 20vh); z-index: -1; width: var(--w, 300px); opacity: .96; pointer-events: none; will-change: transform; }
.xa-eagle .xa-flip { position: relative; display: block; aspect-ratio: 720 / 460; filter: var(--xa-eagle-fx, none); }
.xa-eagle.rtl .xa-flip { transform: scaleX(-1); }   /* the photos face right; a right-to-left flight mirrors them */
.xa-eagle .xa-fr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; visibility: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.xa-eagle .xa-fr.on { visibility: visible; }

/* click the eagle, get an egg. While it flies the eagle sits above the page (.xa-live) but ONLY the current frame's silhouette takes clicks (a clip-path
   polygon per frame, from the frames' alpha masks: the shape grown a few px, simplified), so nothing else is blocked and the page below keeps working. */
.xa-eagle.xa-live { z-index: 50; opacity: 1; }
.xa-eagle.xa-live .xa-fr.on { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.xa-eagle .xa-lay { position: absolute; left: 30%; top: 80%; width: 0; height: 0; pointer-events: none; }
.xa-eagle .xa-fr.xa-f0 { clip-path: polygon(15.6% 13.9%, 15.0% 22.0%, 16.9% 25.4%, 18.9% 35.4%, 20.8% 41.1%, 20.8% 46.5%, 25.0% 59.8%, 30.7% 71.3%, 30.4% 73.7%, 28.9% 75.4%, 19.3% 76.7%, 17.9% 78.0%, 16.7% 86.5%, 19.0% 92.4%, 23.2% 93.7%, 28.7% 91.5%, 33.2% 93.0%, 38.3% 88.0%, 48.5% 86.5%, 65.0% 77.0%, 68.5% 78.0%, 69.9% 76.7%, 70.4% 74.8%, 69.9% 70.2%, 65.1% 65.7%, 64.2% 62.2%, 66.5% 53.7%, 69.9% 48.0%, 74.9% 34.6%, 75.6% 24.6%, 73.9% 22.2%, 72.9% 17.6%, 71.9% 17.2%, 69.6% 18.7%, 68.2% 18.0%, 65.4% 20.9%, 63.2% 21.1%, 61.1% 24.1%, 58.5% 25.2%, 52.8% 32.8%, 43.3% 34.3%, 42.1% 33.7%, 39.0% 28.3%, 34.6% 10.7%, 31.1% 8.9%, 28.5% 3.3%, 25.3% 5.0%, 22.2% 4.6%, 20.8% 7.4%, 18.6% 8.5%, 17.8% 11.5%); }
.xa-eagle .xa-fr.xa-f1 { clip-path: polygon(5.1% 6.3%, 4.9% 10.2%, 3.5% 12.8%, 4.9% 17.4%, 4.7% 21.5%, 8.2% 25.9%, 16.1% 42.0%, 18.9% 50.7%, 30.3% 71.5%, 30.0% 73.9%, 28.7% 75.4%, 19.3% 76.7%, 17.9% 78.0%, 16.8% 86.7%, 17.6% 90.4%, 19.2% 92.4%, 23.1% 93.7%, 28.6% 91.5%, 31.5% 93.3%, 33.2% 93.0%, 37.9% 88.3%, 47.9% 86.7%, 65.4% 76.7%, 68.6% 77.8%, 70.0% 76.5%, 70.4% 71.7%, 69.9% 70.0%, 65.1% 65.7%, 64.2% 62.2%, 66.1% 56.3%, 72.9% 46.3%, 78.5% 34.6%, 79.6% 28.0%, 79.7% 22.0%, 77.6% 14.3%, 76.5% 13.9%, 72.9% 15.9%, 70.8% 18.7%, 68.2% 20.0%, 66.4% 23.0%, 63.9% 24.3%, 62.1% 27.6%, 60.1% 28.7%, 56.7% 33.9%, 48.5% 32.8%, 39.9% 36.5%, 28.6% 23.7%, 25.8% 18.3%, 21.7% 6.3%, 20.6% 4.8%, 17.5% 4.3%, 16.0% 0.0%, 8.2% 0.0%, 7.6% 3.7%); }
.xa-eagle .xa-fr.xa-f2 { clip-path: polygon(0.0% 16.7%, 0.0% 32.4%, 4.0% 34.8%, 14.0% 48.7%, 14.4% 50.7%, 18.3% 56.7%, 29.3% 71.1%, 29.3% 73.7%, 27.9% 75.7%, 19.4% 76.7%, 17.9% 78.0%, 16.8% 86.7%, 17.6% 90.4%, 19.4% 92.6%, 23.6% 93.5%, 28.6% 91.5%, 33.2% 93.0%, 37.9% 88.3%, 50.1% 85.9%, 56.8% 81.1%, 65.4% 76.7%, 69.2% 77.6%, 72.1% 73.5%, 81.8% 71.3%, 85.7% 72.4%, 87.6% 70.7%, 91.0% 70.7%, 99.9% 60.9%, 99.9% 53.5%, 97.9% 52.4%, 96.1% 53.5%, 92.8% 58.3%, 90.3% 59.8%, 76.0% 57.4%, 67.9% 58.0%, 66.5% 56.1%, 66.2% 48.5%, 64.3% 42.4%, 61.1% 37.8%, 57.4% 34.8%, 51.5% 32.8%, 47.2% 33.0%, 41.9% 35.2%, 37.4% 39.3%, 35.7% 39.3%, 22.8% 29.8%, 13.9% 17.4%, 10.7% 17.2%, 7.1% 12.8%, 5.7% 12.8%, 4.0% 14.8%); }
.xa-eagle .xa-fr.xa-f3 { clip-path: polygon(6.8% 12.6%, 6.5% 16.3%, 5.3% 18.7%, 5.4% 26.5%, 8.1% 28.9%, 18.3% 45.0%, 21.2% 53.5%, 30.7% 71.3%, 30.4% 73.7%, 29.2% 75.2%, 19.3% 76.7%, 17.9% 78.0%, 16.8% 86.7%, 17.6% 90.2%, 19.2% 92.4%, 23.1% 93.7%, 28.7% 91.5%, 33.2% 93.0%, 37.9% 88.3%, 51.0% 85.7%, 57.5% 89.3%, 60.6% 89.8%, 66.9% 95.0%, 69.0% 98.0%, 69.3% 99.8%, 80.7% 99.8%, 82.2% 93.9%, 84.3% 91.5%, 86.0% 84.3%, 84.9% 82.8%, 82.2% 82.0%, 74.7% 71.5%, 69.9% 69.6%, 64.4% 64.6%, 64.2% 62.2%, 66.2% 55.4%, 66.4% 49.8%, 65.1% 44.3%, 61.7% 38.5%, 57.4% 34.8%, 52.8% 33.0%, 48.5% 32.8%, 41.5% 34.6%, 19.9% 9.1%, 16.7% 10.4%, 11.7% 7.2%, 9.2% 11.1%); }
.xa-eagle .xa-fr.xa-f4 { clip-path: polygon(79.3% 90.4%, 78.1% 85.9%, 74.9% 83.0%, 70.7% 76.7%, 70.0% 70.4%, 64.3% 64.1%, 64.2% 62.2%, 66.4% 54.1%, 66.2% 48.5%, 64.3% 42.4%, 61.1% 37.8%, 58.1% 35.2%, 51.5% 32.8%, 44.4% 33.9%, 38.1% 38.7%, 35.7% 42.4%, 33.8% 48.5%, 33.8% 59.1%, 23.6% 67.2%, 15.3% 82.4%, 13.1% 89.1%, 13.3% 92.8%, 14.7% 94.3%, 18.6% 92.2%, 23.2% 93.7%, 28.3% 91.5%, 31.7% 93.3%, 34.2% 92.6%, 37.9% 88.3%, 48.3% 86.7%, 52.2% 89.3%, 57.9% 91.1%, 62.8% 95.2%, 64.7% 99.8%, 75.6% 99.8%, 77.2% 94.8%, 79.2% 92.4%); }
/* the egg, the shell and the chick (photos: egg.webp, egg-gold.webp, egg-crack.webp, egg-shell.webp share one canvas, so they swap in place) */
.xa-egg { position: fixed; left: 0; top: 0; z-index: 51; width: var(--ew, 42px); height: calc(var(--ew, 42px) * 166 / 120); pointer-events: none; transform-origin: 50% 100%; will-change: transform; filter: drop-shadow(0 2px 1.5px rgba(11, 23, 71, .35)); }
.xa-egg .xa-ei { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; visibility: hidden; pointer-events: none; }
.xa-egg .xa-ei.on { visibility: visible; }
.xa-egg .xa-ch { position: absolute; left: 50%; bottom: 0; width: calc(var(--ew, 42px) * 1.35); margin-left: calc(var(--ew, 42px) * -0.675); height: auto; display: block; visibility: hidden; pointer-events: none; transform-origin: 50% 100%; }
.xa-egg.xa-gold .xa-e-crack, .xa-egg.xa-gold .xa-e-shell { filter: sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.1); }   /* the cracked and empty golden shell: the white ones, gilded */

/* ============================================================ the FREEDOM stamp (super-likes) ============================================================ */
.xa-stamp {
  position: fixed; left: 50%; top: 40%; z-index: 111; pointer-events: none; white-space: nowrap; display: flex; align-items: center; gap: .12em;
  transform: translate(-50%, -50%) rotate(-9deg);
  font-family: "XA Anton", Impact, "Arial Narrow", sans-serif; font-size: clamp(46px, 13vw, 124px); letter-spacing: .05em; line-height: 1;
  color: var(--xa-red); padding: .1em .3em .14em; border: .08em solid var(--xa-red); border-radius: .16em; background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 .04em #fff, .07em .09em 0 .04em var(--xa-navy);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -12 8.2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -12 8.2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  -webkit-mask-size: 220px 220px; mask-size: 220px 220px;
  animation: xa-stamp 1.9s cubic-bezier(.2, .85, .25, 1) forwards;
}
.xa-stamp b { font-weight: 400; }
.xa-stamp i { font-style: normal; font-size: .82em; filter: drop-shadow(.03em .04em 0 var(--xa-navy)); }
.xa-stamp.xa-still { animation: none; }
@keyframes xa-stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-20deg) scale(2.6); }
  11% { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(.92); }
  17% { transform: translate(-50%, -50%) rotate(-9deg) scale(1.04); }
  23% { transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -54%) rotate(-9deg) scale(1.06); }
}

/* ============================================================ phones ============================================================ */
@media (max-width: 760px) {
  .xa-sticker { font-size: 32px; }  .xa-sticker.xa-pill { font-size: 19px; }
  .xa-flag { height: 28px; }
  footer .xa-foot { font-size: 23px; }
  html[data-america="on"] .hero::after { height: 280px; top: 10px; }
}

/* ============================================================ still, please: reduced motion + calm mode ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html[data-america="on"] .hero::after, .xa-glit, .xa-sticker .xa-bob { animation: none; }
  .xa-stamp { animation: none; }
}
html[data-calm][data-america="on"] .hero::after, html[data-calm] .xa-glit, html[data-calm] .xa-sticker .xa-bob, html[data-calm] .xa-stamp { animation: none; }