/* The Regulators: Mount Up for Men's Mental Health
   Look: frontier movie poster. Red field, yellow sun, white type, black ink.
   Type: Rye for the wordmark on the home hero only. Archivo for everything else
   (condensed black caps for headlines). Both free on Google Fonts.
   Film grain runs only on the red heroes. Serious sections stay flat and still. */

/* The site's own fonts (scripts/make_fonts.py cuts them from fonts/). Archivo carries its width and weight axes. */
@font-face { font-family: "Archivo"; src: url("fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Rye"; src: url("fonts/rye.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Ultra"; src: url("fonts/ultra.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IM Fell English SC"; src: url("fonts/imfell-sc.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("fonts/imfell-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }

:root {
  /* Colour, type and shape tokens come from tokens.css (copied from design/tokens.css by the build). */
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --head-h: 92px;
  --section: clamp(64px, 9vw, 112px);
  --wipe: clamp(72px, 9vw, 128px);    /* depth of a hero's dry-brush bottom edge */

  color-scheme: light;
}
@media (max-width: 760px) { :root { --head-h: 124px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
#bounty { scroll-margin-top: 0; }
body { margin: 0; background: var(--bianco); color: var(--ink); font-family: var(--sans); font-size: var(--step-0); line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--sole); outline-offset: 3px; }
.band--sole :focus-visible, .ask :focus-visible { outline-color: var(--ink); }

.wrap {
  max-width: 1160px;
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.band { padding-block: var(--section); position: relative; isolation: isolate; }
.band--ink { background: var(--ink); color: var(--bianco); }
.band--rosso { background: var(--rosso); color: var(--bianco); }
.band--sole { background: var(--sole); color: var(--ink); }
.band > .wrap { position: relative; z-index: 2; }

.skip { position: absolute; left: -9999px; top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--sole); color: var(--ink); padding: 10px 14px; font-weight: 800; }

/* ---------- type ---------- */
.eyebrow { font-stretch: 62%; font-weight: 800; font-size: .875rem; letter-spacing: .16em; text-transform: uppercase; margin: 0; }
.paren { font-stretch: 100%; font-weight: 500; letter-spacing: .02em; text-transform: lowercase; opacity: .8; }
.h-display {
  font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.5rem, 6.4vw, 4.5rem); line-height: .9; letter-spacing: .005em;
  margin: 0; text-wrap: balance;
}
.lead { font-size: var(--step-1); line-height: 1.5; margin: 0; max-width: 58ch; }
.section-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 4.5vw, 52px); max-width: 62ch; }
.band--ink .lead, .band--ink .muted { color: var(--bianco-soft); }
.muted { color: var(--ink-soft); }
.prose p { margin: 0 0 1em; max-width: 60ch; }
.prose p:last-child { margin-bottom: 0; }

/* Text set on red only reaches 4.1:1 contrast, so anything on red stays large and bold. */
.on-red .eyebrow { font-size: 1.2rem; }

/* Moustache flourish either side of a label, from the Reckoning poster */
.mo-flank { display: inline-flex; align-items: center; gap: .7em; }
.mo-flank::before, .mo-flank::after {
  content: ""; width: 2.4em; height: .9em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M30 7.5C33 4.2 38 4 42 6.8 46 9.8 50 11 53 9.2c1.8-1.2 1.7-3.6.2-4.3 2.3-.6 4.4 1.7 3.4 4.8C55 14 48 15.4 42 13 37.2 11 34 10.8 30 12.6 26 10.8 22.8 11 18 13 12 15.4 5 14 3.4 9.7 2.4 6.6 4.5 4.3 6.8 4.9 5.3 5.6 5.2 8 7 9.2 10 11 14 9.8 18 6.8 22 4 27 4.2 30 7.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M30 7.5C33 4.2 38 4 42 6.8 46 9.8 50 11 53 9.2c1.8-1.2 1.7-3.6.2-4.3 2.3-.6 4.4 1.7 3.4 4.8C55 14 48 15.4 42 13 37.2 11 34 10.8 30 12.6 26 10.8 22.8 11 18 13 12 15.4 5 14 3.4 9.7 2.4 6.6 4.5 4.3 6.8 4.9 5.3 5.6 5.2 8 7 9.2 10 11 14 9.8 18 6.8 22 4 27 4.2 30 7.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Shaded caps: white face, black extrusion in fine sub-pixel steps so the diagonals stay smooth */
.shaded {
  font-stretch: 100%; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; line-height: .95;
  word-spacing: .14em;     /* the extrusion eats into the space after each word; give it back */
  color: var(--bianco);
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0.25px 0.25px 0 var(--ink), 0.5px 0.5px 0 var(--ink), 0.75px 0.75px 0 var(--ink), 1px 1px 0 var(--ink), 1.25px 1.25px 0 var(--ink), 1.5px 1.5px 0 var(--ink), 1.75px 1.75px 0 var(--ink), 2px 2px 0 var(--ink), 2.25px 2.25px 0 var(--ink), 2.5px 2.5px 0 var(--ink), 2.75px 2.75px 0 var(--ink), 3px 3px 0 var(--ink), 3.25px 3.25px 0 var(--ink), 3.5px 3.5px 0 var(--ink), 3.75px 3.75px 0 var(--ink), 4px 4px 0 var(--ink), 4.25px 4.25px 0 var(--ink), 4.5px 4.5px 0 var(--ink), 4.75px 4.75px 0 var(--ink), 5px 5px 0 var(--ink), 5.25px 5.25px 0 var(--ink), 5.5px 5.5px 0 var(--ink), 5.75px 5.75px 0 var(--ink), 6px 6px 0 var(--ink);
  margin: 0;
}
.shaded--rosso { color: var(--rosso); }
.rough { filter: url(#rough-type); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 800 1rem/1 var(--sans); font-stretch: 100%; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; padding: 15px 22px; border: 2px solid var(--ink); border-radius: 2px;
  --shadow: var(--ink); --fill: var(--sole);
  /* Red waits under the button: a press dips the whole button into it. */
  background: linear-gradient(var(--rosso-deep), var(--rosso-deep)) 50% 100% / 100% 0% no-repeat, var(--fill);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--shadow); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: transform .14s, box-shadow .14s, background-size .22s cubic-bezier(.2, .8, .2, 1), color .18s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--shadow); }
.btn:active {
  transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow);
  background-size: 100% 100%; color: var(--bianco);
  transition-duration: .08s, .08s, .12s, .08s;
}
.btn--sole { --fill: var(--sole); }
.btn--bianco { --fill: var(--bianco); }
.btn--sm { padding: 11px 15px; font-size: .875rem; }
.on-dark .btn, .band--ink .btn { --shadow: var(--rosso); }
/* Narrow phones (360px Androids and down): long labels wrap instead of pushing the page sideways */
@media (max-width: 400px) { .btn { white-space: normal; text-align: center; line-height: 1.15; } }
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:active { background: transparent; color: inherit; border-style: dashed; box-shadow: none; cursor: default; transform: none; }

/* ---------- header: sits on top of each page's hero ---------- */
.site-head { position: absolute; inset: 0 0 auto; z-index: 10; color: var(--bianco); }
.head-inner {
  display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "brand nav snd cta";
  align-items: center; gap: 14px 36px; min-height: var(--head-h); padding-block: 14px;
}
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { width: 32px; height: 32px; flex: none; color: var(--sole); }
.brand-word { font-stretch: 62%; font-weight: 900; font-size: 1.35rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.nav { grid-area: nav; justify-self: end; display: flex; gap: 32px; }
.nav a {
  text-decoration: none; font-stretch: 62%; font-weight: 800; font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1; padding-block: 8px 6px; border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: currentColor; }
.nav a[aria-current="page"] { border-bottom-color: var(--sole); }
.head-cta { grid-area: cta; }
/* Sound: off until switched on here. A speaker, with waves when on and a cross when off. */
.sound-toggle {
  grid-area: snd; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 -6px 0 -10px; padding: 0;
  background: none; border: 0; color: inherit; cursor: pointer; transition: transform .14s; -webkit-tap-highlight-color: transparent;
}
.sound-toggle:hover { transform: translateY(-1px); }
.sound-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .spk { fill: currentColor; }
.sound-toggle .wave, .sound-toggle[aria-pressed="true"] .mute { display: none; }
.sound-toggle[aria-pressed="true"] .wave { display: inline; }
@media (max-width: 760px) {
  .head-inner { grid-template-columns: 1fr auto; grid-template-areas: "brand cta" "nav nav"; gap: 10px 16px; align-content: start; }
  .sound-toggle { grid-area: 2 / 2; justify-self: end; margin: -8px -8px -8px 0; }  /* shares the nav row, at its right end */
  .nav a { white-space: nowrap; }
  .nav { gap: 20px; }
  .nav { justify-self: start; gap: 24px; }
  .brand-word { font-size: 1.05rem; }
  .brand svg { width: 24px; height: 24px; }
  .head-cta.btn { padding: 9px 12px; font-size: .78rem; box-shadow: 3px 3px 0 var(--shadow); white-space: nowrap; }
}
@media (max-width: 370px) { .brand svg { display: none; } .nav { gap: 18px; } }
/* Once the hero has scrolled past, the header waits above the screen and slides back in on an ink bar
   whenever you scroll up (site.js). Back at the very top it sits on the hero again. */
.site-head { transition: background-color .25s; }
.site-head.is-stuck { position: fixed; background: var(--ink); box-shadow: 0 3px 0 var(--rosso); transform: translateY(calc(-100% - 4px)); }
.site-head.is-stuck.is-shown { transform: none; }
.site-head.can-slide { transition: transform .28s cubic-bezier(.2, .8, .2, 1), background-color .25s; }
.is-stuck .head-inner { min-height: 0; padding-block: 12px; }
.is-stuck .btn { --shadow: var(--rosso); }
@media (max-width: 760px) { .is-stuck .head-inner { padding-block: 10px; row-gap: 4px; } }

/* ---------- film layer (built by film.js) ---------- */
.film { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.film > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film__flicker { background: var(--ink); opacity: 0; }
.film__vignette { background: radial-gradient(ellipse at 50% 46%, transparent 55%, rgba(22, 21, 21, .5) 100%); }
.weave { will-change: transform; }

/* ---------- home hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--rosso); color: var(--bianco); }
.hero-copy {
  position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; gap: 16px;
  padding-block: calc(var(--head-h) + clamp(12px, 3.5vw, 44px)) clamp(4px, 1.5vw, 12px);
}
.wordmark { margin: 0; font-family: var(--wordmark); font-weight: 400; line-height: .9; color: var(--bianco); text-transform: uppercase; }
.wordmark .wm-the { display: block; font-size: clamp(1.5rem, 4vw, 2.75rem); color: var(--ink); }
.wordmark .wm-main { display: block; font-size: clamp(2.5rem, 11.5vw, 7.6rem); letter-spacing: .01em; }
.rule-line {
  display: flex; align-items: center; gap: 14px; width: min(100%, 700px); margin: 0;
  font-stretch: 125%; font-weight: 800; font-size: clamp(1.17rem, 1.9vw, 1.3rem); letter-spacing: .14em; text-transform: uppercase;
}
.rule-line::before, .rule-line::after { content: ""; flex: 1; height: 2px; background: currentColor; opacity: .7; }
.tagline { margin: 4px 0 0; font-weight: 800; font-size: clamp(1.25rem, 2.6vw, 1.65rem); line-height: 1.3; max-width: 26ch; text-wrap: balance; }
.hero .tagline { max-width: 34ch; }
.tagline .keep { display: inline-block; }
.tagline--lines span { display: block; }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 10px; }
.hero-art { position: relative; z-index: 0; margin-top: -4px; }
.hero-art img { display: block; width: 100%; height: clamp(230px, 28vw, 580px); object-fit: cover; object-position: 50% 100%; }

.bounty { position: absolute; z-index: 3; bottom: clamp(-96px, -6vw, -40px); right: clamp(16px, 5vw, 72px); width: clamp(176px, 15vw, 214px); rotate: 9deg; }
.bounty svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(4px 4px 0 rgba(22, 21, 21, .35)); }
@media (max-width: 900px) { .bounty { position: static; rotate: -5deg; margin-top: 6px; width: 188px; } }

/* ticker strip under the hero */
.ticker { background: var(--ink); color: var(--bianco); overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: ticker 44s linear infinite; }
.ticker-track span { font-stretch: 62%; font-weight: 800; font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; padding: 14px 28px; white-space: nowrap; }
.ticker-track span:nth-child(odd) { color: var(--sole); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.stat { padding: clamp(24px, 3vw, 36px) clamp(0px, 2vw, 28px) clamp(24px, 3vw, 36px) 0; display: grid; gap: 12px; align-content: start; }
.stat + .stat { border-left: 3px solid var(--ink); padding-left: clamp(20px, 3vw, 40px); }
.stat-num { font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(3.8rem, 10vw, 6.8rem); line-height: .85; color: var(--rosso); }
.stat p { margin: 0; font-size: var(--step-1); line-height: 1.45; max-width: 32ch; }
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 3px solid var(--ink); padding-left: 0; }
}
/* One stat on its own: the number and its sentence side by side across the row, stacked on a phone */
.stats--one { grid-template-columns: minmax(0, 1fr); }
.stats--one .stat { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px clamp(28px, 5vw, 64px); padding-right: 0; }
.stats--one .stat p { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 700; line-height: 1.3; max-width: 30ch; }
@media (max-width: 640px) { .stats--one .stat { grid-template-columns: minmax(0, 1fr); } }
.sources { font-size: .85rem; color: var(--ink-soft); margin: 14px 0 0; }
.inline-help { margin-top: clamp(28px, 4vw, 40px); padding: 4px 0 4px 18px; border-left: 6px solid var(--rosso); max-width: 60ch; }
.inline-help p { margin: 0; font-size: var(--step-1); line-height: 1.5; }
.inline-help a { font-weight: 900; white-space: nowrap; color: var(--rosso-deep); }

/* ---------- PMB block ---------- */
.pmb-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-dark); }
.pmb-list li { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 6px 32px; padding: 20px 0; border-bottom: 1px solid var(--rule-dark); }
.pmb-head { display: flex; align-items: center; gap: 14px; }
.ico { flex: none; width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pmb-head .ico { color: var(--sole); }
.pmb-list h3 { margin: 0; font-stretch: 62%; font-weight: 900; font-size: 1.3rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .03em; color: var(--sole); }
.pmb-list p { margin: 0; max-width: 62ch; }
@media (max-width: 680px) { .pmb-list li { grid-template-columns: 1fr; } }
.ask { margin-top: clamp(32px, 4vw, 48px); background: var(--sole); color: var(--ink); padding: clamp(24px, 3.5vw, 40px); box-shadow: 8px 8px 0 var(--rosso); }
.ask { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); }
.ask-ico { width: clamp(52px, 7vw, 72px); height: auto; stroke-width: 2.4; }
.ask p { margin: 0; font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.25rem); line-height: 1.15; letter-spacing: -.01em; max-width: 30ch; text-wrap: balance; }
.small-print { font-size: .875rem; margin: 18px 0 0; color: var(--bianco-soft); }

/* ---------- bounty / money ---------- */
.money { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 820px) { .money { grid-template-columns: 1fr; } }
.money-figure { display: grid; gap: 6px; container-type: inline-size; }
/* sized to its column, so all eight characters of R100,000 fit at any width */
.money-figure .big { display: block; font-stretch: 62%; font-weight: 900; font-size: clamp(5rem, 15vw, 10rem); font-size: min(10rem, 28cqi); line-height: .82; color: var(--rosso); transform-origin: 20% 60%; }
#bounty:target .money-figure .big { animation: stamp .5s cubic-bezier(.3, 1.6, .5, 1) .35s both; }
@keyframes stamp { from { transform: scale(1.35) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }
.care { list-style: none; padding: 0; margin: 20px 0 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.care li { border: 2px solid var(--ink); padding: 7px 13px; font-weight: 700; font-size: .95rem; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.cta-row p { margin: 0; font-size: .95rem; }
.cta-row--center { justify-content: center; margin-top: clamp(40px, 5vw, 60px); }

/* ---------- events ---------- */
.events { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 820px) { .events { grid-template-columns: 1fr; } }
.event { background: var(--bianco); border: 2px solid var(--ink); padding: 24px 22px 26px; display: grid; gap: 10px; align-content: start; box-shadow: 6px 6px 0 var(--ink); }
.event time { font-stretch: 62%; font-weight: 900; font-size: 2.6rem; line-height: .9; text-transform: uppercase; color: var(--rosso); }
.event h3 { margin: 0; font-stretch: 62%; font-weight: 900; font-size: 1.45rem; text-transform: uppercase; line-height: 1.05; letter-spacing: .02em; }
.event p { margin: 0; font-size: 1rem; }
/* One event on its own: a single wide ticket, the date stood off to the left by a rule */
.events--one { grid-template-columns: minmax(0, 46rem); }
.events--one .event { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px 28px; padding: clamp(22px, 3vw, 32px); }
.events--one .event time { font-size: clamp(3.2rem, 7vw, 4.8rem); padding-right: 28px; border-right: 3px solid var(--ink); }
.events--one .event div { display: grid; gap: 8px; }
.events--one .event h3 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
.events--one .event p { font-size: var(--step-0); max-width: 44ch; }
@media (max-width: 520px) {
  .events--one .event { grid-template-columns: minmax(0, 1fr); }
  .events--one .event time { padding: 0 0 14px; border-right: 0; border-bottom: 3px solid var(--ink); }
}

/* ---------- page heroes (about, posse) ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; }
.page-hero .wrap { position: relative; z-index: 2; padding-block: calc(var(--head-h) + clamp(28px, 5vw, 64px)) clamp(56px, 8vw, 96px); display: grid; gap: 18px; justify-items: start; }
.page-hero .h-display { font-size: clamp(3rem, 9vw, 6.5rem); }
.most-wanted { font-size: clamp(3.4rem, 11.5vw, 8rem); }
/* The posse page's one big yellow shape: a tin star pinned low on the right of the hero, under the headline */
.posse-star { position: absolute; z-index: 1; right: max(-30px, calc((100vw - 1160px) / 2 - 30px)); bottom: calc(var(--wipe) - var(--section) - var(--wipe) * .2); width: clamp(280px, 32vw, 460px); rotate: 14deg; pointer-events: none; }
.posse-star svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(8px 8px 0 rgba(22, 21, 21, .35)); }
@media (max-width: 760px) { .posse-star { width: 150px; right: -22px; bottom: -34px; } }

/* A hero that ends in a dry-brush wipe instead of a straight line (the posse page). The red, and the grain over it,
   are masked by assets/wipe.svg along the bottom, painted the way the sun's rim is. The hero runs --wipe down over
   the black band, so the bristles land on it, and the tin star hangs on over the edge instead of being cropped. */
.has-wipe {
  --wipe-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--wipe) + 2px) no-repeat, url("wipe.svg") center bottom / auto var(--wipe) repeat-x;
  --paint: var(--rosso);
  background: transparent; z-index: 2; overflow-x: clip; overflow-y: visible;
  padding-bottom: var(--wipe); margin-bottom: calc(-1 * var(--wipe));
}
.has-wipe::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paint); }
.band--ink.has-wipe { --paint: var(--ink); }
.about-hero.has-wipe { padding-bottom: calc(var(--wipe) * .5); }  /* the campfire ground is ink already: brush out of it */
.has-wipe::before, .has-wipe > .film { -webkit-mask: var(--wipe-mask); mask: var(--wipe-mask); }
.has-wipe + .band { padding-top: calc(var(--section) + var(--wipe)); }

/* Divider between bands: the colour above brushed down over the colour below (--from, --to, set by the build).
   It overlaps both bands' padding, so the solid top matches the band above and the ground matches the band below.
   --shift and wipe--flip keep neighbouring dividers from looking stamped out of one mould. */
.wipe {
  --wipe: clamp(48px, 6vw, 88px);
  position: relative; z-index: 1; height: var(--wipe); margin-block: calc(var(--wipe) * -.5); background: var(--to); pointer-events: none;
}
.wipe::before {
  content: ""; position: absolute; inset: 0; background: var(--from);
  -webkit-mask: url("wipe.svg") calc(50% + var(--shift, 0px)) 0 / auto 100% repeat-x;
  mask: url("wipe.svg") calc(50% + var(--shift, 0px)) 0 / auto 100% repeat-x;
}
.wipe--flip::before { transform: scaleX(-1); }
.ticker + .wipe { margin-top: 0; }
main > .wipe:last-child { margin-bottom: 0; }  /* and end on it, so the helpline keeps its room */  /* the ticker is all text: start below it, not over it */

/* ---------- about ---------- */
/* The hero ends on the posse round a campfire (drawn by art.campfire_svg in the build). The fire flickers;
   it is the only thing that moves, and it stays still for reduced motion. */
/* the text sits a little lower and the scene comes up to meet it, so the hero reads as one picture */
.about-hero .wrap { padding-top: calc(var(--head-h) + clamp(44px, 7vw, 104px)); padding-bottom: 0; }
.night { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.night canvas { display: block; width: 100%; height: 100%; }
.camp { position: relative; z-index: 1; margin-top: clamp(-100px, -7vw, -20px); }
.camp svg { display: block; width: 100%; height: clamp(240px, 30vw, 560px); }
.camp .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.3s ease-in-out infinite alternate; }
.camp .f2 { animation-duration: .9s; animation-delay: -.4s; }
.camp .f3 { animation-duration: .6s; animation-delay: -.2s; }
.camp .glow { animation: glow 1.7s ease-in-out infinite alternate; }
.camp .spark { transform-box: fill-box; opacity: 0; animation: spark 2.2s linear infinite; }
@keyframes flicker {
  0% { transform: scale(1, 1) skewX(0deg); } 35% { transform: scale(.95, 1.07) skewX(3deg); }
  70% { transform: scale(1.04, .94) skewX(-2deg); } 100% { transform: scale(.98, 1.05) skewX(1.5deg); }
}
@keyframes glow { from { opacity: .82; } to { opacity: 1; } }
@keyframes spark { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -110px); } }
.name-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 3px solid var(--ink); }
.name-points li { padding: 22px 24px 4px 0; display: grid; gap: 8px; align-content: start; }
.name-points li + li { border-left: 3px solid var(--ink); padding-left: 24px; }
.name-points h3 { margin: 0; font-stretch: 62%; font-weight: 900; font-size: 2.2rem; line-height: .9; text-transform: uppercase; color: var(--rosso); }
.name-points p { margin: 0; }
@media (max-width: 820px) {
  .name-points { grid-template-columns: 1fr; }
  .name-points li { padding-right: 0; padding-bottom: 18px; }
  .name-points li + li { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
}

/* ---------- posse ---------- */
.posters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(26px, 3vw, 38px); }
/* A wanted poster tacked to the wall: old yellowed paper with torn edges, foxed darker towards the edge,
   a brass tack at the top and a printed rule inside the edge. Set in the type of a frontier print shop:
   Ultra for WANTED and the alias, IM Fell English for the small print, the name and the oath. */
.poster {
  position: relative; isolation: isolate; color: var(--ink);
  padding: 24px 20px 22px; display: grid; gap: 10px; align-content: start; text-align: center;
  --lift: 6px; --torn: polygon(0.0% 0.3px, 6.2% 2.4px, 12.5% 1.2px, 18.8% 1.5px, 25.0% 1.6px, 31.2% 2.4px, 37.5% 1.2px, 43.8% 1.4px, 50.0% 0.5px, 56.2% 1.9px, 62.5% 1.4px, 68.8% 1.4px, 75.0% 1.0px, 81.2% 2.2px, 87.5% 0.6px, 93.8% 0.4px, calc(100% - 2.4px) 0.0%, calc(100% - 1.0px) 3.3%, calc(100% - 0.0px) 6.7%, calc(100% - 2.0px) 10.0%, calc(100% - 0.4px) 13.3%, calc(100% - 2.5px) 16.7%, calc(100% - 0.1px) 20.0%, calc(100% - 2.0px) 23.3%, calc(100% - 2.1px) 26.7%, calc(100% - 0.7px) 30.0%, calc(100% - 1.5px) 33.3%, calc(100% - 2.4px) 36.7%, calc(100% - 1.0px) 40.0%, calc(100% - 2.0px) 43.3%, calc(100% - 1.1px) 46.7%, calc(100% - 1.9px) 50.0%, calc(100% - 7.4px) 53.3%, calc(100% - 0.3px) 56.7%, calc(100% - 1.0px) 60.0%, calc(100% - 0.1px) 63.3%, calc(100% - 1.3px) 66.7%, calc(100% - 0.7px) 70.0%, calc(100% - 1.7px) 73.3%, calc(100% - 2.0px) 76.7%, calc(100% - 2.2px) 80.0%, calc(100% - 1.1px) 83.3%, calc(100% - 2.2px) 86.7%, calc(100% - 1.5px) 90.0%, calc(100% - 1.4px) 93.3%, calc(100% - 1.1px) 96.7%, 100.0% calc(100% - 0.6px), 93.8% calc(100% - 0.9px), 87.5% calc(100% - 2.4px), 81.2% calc(100% - 0.1px), 75.0% calc(100% - 0.7px), 68.8% calc(100% - 1.6px), 62.5% calc(100% - 1.8px), 56.2% calc(100% - 1.8px), 50.0% calc(100% - 0.8px), 43.8% calc(100% - 1.4px), 37.5% calc(100% - 1.5px), 31.2% calc(100% - 0.3px), 25.0% calc(100% - 1.7px), 18.8% calc(100% - 1.6px), 12.5% calc(100% - 2.6px), 6.2% calc(100% - 0.7px), 0.3px 100.0%, 1.3px 96.7%, 1.7px 93.3%, 1.3px 90.0%, 0.9px 86.7%, 0.2px 83.3%, 2.3px 80.0%, 0.1px 76.7%, 1.1px 73.3%, 1.1px 70.0%, 0.3px 66.7%, 1.6px 63.3%, 2.0px 60.0%, 1.0px 56.7%, 1.5px 53.3%, 1.4px 50.0%, 2.4px 46.7%, 0.7px 43.3%, 0.6px 40.0%, 0.1px 36.7%, 0.0px 33.3%, 0.3px 30.0%, 1.4px 26.7%, 2.5px 23.3%, 2.5px 20.0%, 0.8px 16.7%, 0.7px 13.3%, 1.8px 10.0%, 2.5px 6.7%, 0.9px 3.3%);
  filter: drop-shadow(var(--lift) var(--lift) 0 var(--rosso));
  transition: transform .2s, filter .2s;
}
.poster:nth-child(3n+2) { --torn: polygon(0.0% 1.0px, 6.2% 0.5px, 12.5% 0.1px, 18.8% 0.4px, 25.0% 2.1px, 31.2% 1.3px, 37.5% 1.0px, 43.8% 0.1px, 50.0% 1.3px, 56.2% 1.0px, 62.5% 1.5px, 68.8% 2.3px, 75.0% 1.0px, 81.2% 1.3px, 87.5% 2.0px, 93.8% 1.8px, calc(100% - 1.4px) 0.0%, calc(100% - 1.2px) 3.3%, calc(100% - 2.4px) 6.7%, calc(100% - 1.9px) 10.0%, calc(100% - 1.7px) 13.3%, calc(100% - 0.3px) 16.7%, calc(100% - 2.1px) 20.0%, calc(100% - 1.0px) 23.3%, calc(100% - 2.2px) 26.7%, calc(100% - 0.3px) 30.0%, calc(100% - 0.2px) 33.3%, calc(100% - 0.6px) 36.7%, calc(100% - 0.2px) 40.0%, calc(100% - 6.3px) 43.3%, calc(100% - 0.5px) 46.7%, calc(100% - 2.1px) 50.0%, calc(100% - 1.6px) 53.3%, calc(100% - 1.4px) 56.7%, calc(100% - 0.1px) 60.0%, calc(100% - 1.8px) 63.3%, calc(100% - 0.4px) 66.7%, calc(100% - 2.2px) 70.0%, calc(100% - 1.2px) 73.3%, calc(100% - 1.5px) 76.7%, calc(100% - 1.2px) 80.0%, calc(100% - 1.4px) 83.3%, calc(100% - 2.2px) 86.7%, calc(100% - 1.1px) 90.0%, calc(100% - 0.4px) 93.3%, calc(100% - 1.6px) 96.7%, 100.0% calc(100% - 1.4px), 93.8% calc(100% - 0.8px), 87.5% calc(100% - 0.9px), 81.2% calc(100% - 1.7px), 75.0% calc(100% - 1.3px), 68.8% calc(100% - 1.6px), 62.5% calc(100% - 0.8px), 56.2% calc(100% - 0.9px), 50.0% calc(100% - 0.7px), 43.8% calc(100% - 1.7px), 37.5% calc(100% - 2.1px), 31.2% calc(100% - 2.2px), 25.0% calc(100% - 2.4px), 18.8% calc(100% - 1.4px), 12.5% calc(100% - 0.9px), 6.2% calc(100% - 2.4px), 0.8px 100.0%, 0.6px 96.7%, 0.1px 93.3%, 0.7px 90.0%, 0.8px 86.7%, 1.8px 83.3%, 1.1px 80.0%, 1.7px 76.7%, 0.3px 73.3%, 2.4px 70.0%, 2.2px 66.7%, 0.1px 63.3%, 2.5px 60.0%, 0.4px 56.7%, 0.3px 53.3%, 2.1px 50.0%, 1.0px 46.7%, 2.2px 43.3%, 1.5px 40.0%, 2.4px 36.7%, 0.4px 33.3%, 1.5px 30.0%, 1.1px 26.7%, 0.2px 23.3%, 0.2px 20.0%, 1.9px 16.7%, 0.1px 13.3%, 1.7px 10.0%, 2.0px 6.7%, 1.4px 3.3%); }
.poster:nth-child(3n) { --torn: polygon(0.0% 1.1px, 6.2% 0.7px, 12.5% 2.2px, 18.8% 2.6px, 25.0% 1.2px, 31.2% 2.5px, 37.5% 0.5px, 43.8% 1.4px, 50.0% 2.0px, 56.2% 0.0px, 62.5% 2.4px, 68.8% 1.1px, 75.0% 0.4px, 81.2% 2.0px, 87.5% 2.4px, 93.8% 1.8px, calc(100% - 1.1px) 0.0%, calc(100% - 2.6px) 3.3%, calc(100% - 2.0px) 6.7%, calc(100% - 1.1px) 10.0%, calc(100% - 1.1px) 13.3%, calc(100% - 2.5px) 16.7%, calc(100% - 1.4px) 20.0%, calc(100% - 1.8px) 23.3%, calc(100% - 1.7px) 26.7%, calc(100% - 2.4px) 30.0%, calc(100% - 0.1px) 33.3%, calc(100% - 1.9px) 36.7%, calc(100% - 0.2px) 40.0%, calc(100% - 2.1px) 43.3%, calc(100% - 5.4px) 46.7%, calc(100% - 1.9px) 50.0%, calc(100% - 1.0px) 53.3%, calc(100% - 0.4px) 56.7%, calc(100% - 1.7px) 60.0%, calc(100% - 1.2px) 63.3%, calc(100% - 2.1px) 66.7%, calc(100% - 0.2px) 70.0%, calc(100% - 0.5px) 73.3%, calc(100% - 1.8px) 76.7%, calc(100% - 2.1px) 80.0%, calc(100% - 1.7px) 83.3%, calc(100% - 2.5px) 86.7%, calc(100% - 2.3px) 90.0%, calc(100% - 2.6px) 93.3%, calc(100% - 0.2px) 96.7%, 100.0% calc(100% - 1.5px), 93.8% calc(100% - 1.5px), 87.5% calc(100% - 1.0px), 81.2% calc(100% - 0.9px), 75.0% calc(100% - 0.4px), 68.8% calc(100% - 1.4px), 62.5% calc(100% - 0.8px), 56.2% calc(100% - 2.5px), 50.0% calc(100% - 1.3px), 43.8% calc(100% - 0.8px), 37.5% calc(100% - 1.3px), 31.2% calc(100% - 0.7px), 25.0% calc(100% - 2.2px), 18.8% calc(100% - 0.4px), 12.5% calc(100% - 1.9px), 6.2% calc(100% - 2.6px), 0.0px 100.0%, 0.2px 96.7%, 1.6px 93.3%, 1.4px 90.0%, 1.5px 86.7%, 0.8px 83.3%, 2.5px 80.0%, 0.3px 76.7%, 1.7px 73.3%, 1.6px 70.0%, 2.2px 66.7%, 0.9px 63.3%, 2.0px 60.0%, 2.4px 56.7%, 0.6px 53.3%, 0.4px 50.0%, 2.4px 46.7%, 0.5px 43.3%, 1.1px 40.0%, 0.4px 36.7%, 0.1px 33.3%, 1.4px 30.0%, 1.7px 26.7%, 0.6px 23.3%, 2.4px 20.0%, 0.4px 16.7%, 1.9px 13.3%, 0.0px 10.0%, 0.9px 6.7%, 1.3px 3.3%); }
.poster::before {                                   /* the paper */
  content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--torn);
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 58%, rgba(157, 46, 24, .26) 100%),
    radial-gradient(circle at 84% 16%, rgba(157, 46, 24, .12), transparent 20%),
    radial-gradient(circle at 14% 72%, rgba(157, 46, 24, .09), transparent 16%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)' opacity='.5'/%3E%3C/svg%3E"),
    var(--paper);
}
.poster::after {                                    /* the printed rule */
  content: ""; position: absolute; inset: 9px; z-index: -1; border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 2px;
  opacity: .8; pointer-events: none;
}
.poster .tack {
  position: absolute; z-index: 1; top: -7px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  border: 2px solid var(--ink); background: radial-gradient(circle at 36% 34%, var(--bianco) 0 16%, var(--sole) 24%);
}
.poster:hover { transform: translateY(-3px); --lift: 9px; }
.poster .wanted { margin: 0; line-height: .9; text-transform: uppercase; }
.poster .w-most { display: block; font-family: var(--poster-caps); font-size: 1.15rem; letter-spacing: .32em; margin: 0 0 2px .32em; }
.poster .w-wanted { display: block; font-family: var(--poster-display); font-size: 2.45rem; letter-spacing: .01em; }
.poster .crime { font-family: var(--poster-caps); font-size: .86rem; letter-spacing: .02em; margin: -2px 0 2px; border-block: 1.5px solid var(--ink); padding-block: 4px 3px; }
.poster .frame { aspect-ratio: 4 / 5; max-width: 100%; border: 2px solid var(--ink); background: var(--sole); overflow: hidden; position: relative; display: grid; place-items: end center; }
.poster .frame--rosso { background: var(--rosso); }
.poster .frame--bianco { background: var(--bianco); }
.poster .plate {                                     /* mugshot number plate */
  position: absolute; z-index: 1; left: 8px; bottom: 8px; background: var(--ink); color: var(--bianco);
  font-stretch: 62%; font-weight: 800; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1; padding: 5px 7px 4px;
}
.poster .badge { position: absolute; z-index: 1; right: 6px; bottom: 6px; width: 50px; height: 50px; rotate: 12deg; }
.poster .badge svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(2px 2px 0 rgba(22, 21, 21, .4)); }
.poster .frame img { width: 100%; height: 100%; object-fit: cover; }
.poster .frame svg { width: 84%; height: auto; display: block; }
.poster .alias { font-family: var(--poster-display); font-weight: 400; font-size: 1.3rem; line-height: 1.05; text-transform: uppercase; color: var(--rosso-deep); margin: 6px 0 0; text-wrap: balance; }
.poster .real { font-family: var(--poster-caps); font-weight: 400; font-size: 1.2rem; letter-spacing: .08em; margin: 0; }
.poster .oath { font-family: var(--poster-text); font-style: italic; margin: 0; font-size: 1.1rem; line-height: 1.35; }
.poster .btn { justify-self: center; margin-top: 4px; }
.poster .share {
  justify-self: center; font-stretch: 62%; font-weight: 800; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; padding: 4px 2px;
}
.poster .share:hover { color: var(--rosso-deep); }
.poster--tile { padding: 10px 10px 16px; }
.poster--tile .tile { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid var(--ink); }
.poster { scroll-margin-top: 24px; }
.poster:target, .poster.is-wanted { outline: 4px solid var(--sole); outline-offset: 6px; animation: stamp .5s cubic-bezier(.3, 1.6, .5, 1) .2s both; }
@media (max-width: 560px) {
  .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .poster { padding: 16px 11px 14px; gap: 7px; --lift: 4px; }
  .poster:hover { --lift: 6px; }
  .poster::after { inset: 6px; outline-offset: 1.5px; }
  .poster .tack { width: 13px; height: 13px; margin-left: -6.5px; top: -6px; }
  .poster .plate { left: 5px; bottom: 5px; font-size: .62rem; padding: 4px 5px 3px; }
  .poster .badge { width: 28px; height: 28px; right: 4px; bottom: 4px; }
  .poster .w-most { font-size: .78rem; }
  .poster .w-wanted { font-size: 1.42rem; }
  .poster .crime { font-size: .66rem; letter-spacing: .02em; padding-block: 3px 2px; }
  .poster .alias { font-size: .98rem; }
  .poster .real { font-size: .84rem; }
  .poster .oath { font-size: .9rem; }
  .poster .btn--sm { padding: 9px 10px; font-size: .72rem; white-space: normal; }
  .pending { font-size: .56rem; letter-spacing: .05em; white-space: nowrap; left: 6px; right: 6px; top: 6px; padding: 4px 2px; }
  .posters .poster--join { min-height: 0; padding: 22px 12px; }
  .posters .poster--join .wanted { font-size: 1.2rem; }  /* beats the desktop rule further down */
  /* Full width only when it would start a row on its own; otherwise it fills the gap beside the last poster */
  .posters .poster--join:nth-child(odd) { grid-column: 1 / -1; padding: 22px 16px; }
}
.poster--join { color: var(--bianco); border: 2px dashed var(--bianco); filter: none; align-content: center; min-height: 340px; padding: 28px 22px; }
.poster--join::before, .poster--join::after { display: none; }
.poster--join:hover { transform: none; }
.poster--join .wanted { color: var(--sole); font-family: var(--poster-display); font-size: 1.9rem; line-height: 1.05; }
.poster--join p { margin: 0; }
.muted-join { color: var(--bianco-soft); font-size: .95rem; }
.pending {
  position: absolute; left: 10px; right: 10px; top: 10px; text-align: center;
  font-stretch: 62%; font-weight: 800; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--bianco); color: var(--ink); border: 1.5px solid var(--ink); padding: 5px 6px;
}

/* ---------- footer: the poster's billing block ---------- */
.site-foot { background: var(--ink); color: var(--bianco); padding-block: clamp(48px, 7vw, 80px) clamp(36px, 5vw, 56px); }
.helpline {
  border: 2px solid var(--sole); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px 40px;
  padding: clamp(18px, 3vw, 26px) clamp(18px, 3vw, 30px);
}
.helpline .hl-kicker { margin: 0; font-weight: 800; font-size: 1.25rem; line-height: 1.25; }
.helpline a { display: grid; gap: 2px; text-decoration: none; }
.helpline .hl-label { font-stretch: 62%; font-weight: 800; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bianco-soft); }
.helpline .hl-num { font-stretch: 62%; font-weight: 900; font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1; color: var(--sole); letter-spacing: .02em; }
.helpline a:hover .hl-num { text-decoration: underline; text-decoration-thickness: 2px; }
@media (max-width: 820px) { .helpline { grid-template-columns: 1fr; } }

.billing { text-align: center; display: grid; justify-items: center; gap: 10px; margin-top: clamp(44px, 6vw, 64px); }
.billing p { margin: 0; }
.b-small { font-stretch: 62%; font-weight: 700; font-size: .95rem; letter-spacing: .4em; text-transform: uppercase; color: var(--bianco-soft); }
.b-title { font-stretch: 62%; font-weight: 900; font-size: clamp(3rem, 9vw, 5.5rem); line-height: .85; letter-spacing: .02em; text-transform: uppercase; }
.b-line { font-stretch: 125%; font-weight: 800; font-size: .95rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sole); }
.billing .b-credits {
  max-width: 62ch; font-stretch: 62%; font-weight: 600; font-size: 1.05rem; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bianco-soft); margin-top: 8px;
}
.b-credits b { color: var(--bianco); font-weight: 900; }
.b-credits .cast { white-space: nowrap; }
.b-credits small { font-size: .78em; text-transform: lowercase; letter-spacing: .04em; }
.b-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 40px; margin-top: 22px; }
.b-nav { display: flex; gap: 28px; }
.b-nav a { font-stretch: 62%; font-weight: 800; font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 3px; }
.b-nav a:hover { border-bottom-color: var(--sole); }
.rated { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; border: 2px solid currentColor; padding: 9px 16px 9px 12px; max-width: 100%; text-align: left; }
.rated .m { font-family: var(--wordmark); font-weight: 400; font-size: 2.6rem; line-height: 1; border-right: 2px solid currentColor; padding-right: 14px; }
.rated strong { display: block; font-stretch: 62%; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: .95rem; }
.rated span { font-size: .85rem; }
.billing .b-fine { font-size: .8rem; color: var(--bianco-soft); margin-top: 18px; max-width: 60ch; }

/* ---------- reel: a film leader counts 3, 2, 1 on the first page of a visit; between pages the roll runs out
   and the next page cuts straight in (assets/reel.js) ---------- */
.reel { display: none; }
.js .reel {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; overflow: hidden;
  background: var(--ink); color: var(--bianco);
  --fw: min(84vw, 600px, 93vh);                       /* width of the projected frame */
  animation: reel-failsafe 0s 5s forwards;            /* never leaves the page covered if a script fails */
}
.js.reel-quick .reel { animation-delay: 2s; }
.js.reel-quick .reel-leader, .js.reel-quick .reel-label { display: none; }
.reel-sound {                                        /* "Tap for sound" under the leader, while sound is off or held back */
  position: absolute; z-index: 2; left: 50%; bottom: calc(max(28px, env(safe-area-inset-bottom, 0px)) + 40px); translate: -50% 0;
  background: none; border: 1.5px solid rgba(247, 245, 236, .45); color: var(--bianco); padding: 9px 16px 8px; cursor: pointer;
  font: 800 .85rem/1 var(--sans); font-stretch: 62%; letter-spacing: .2em; text-transform: uppercase;
  animation: reel-fade .2s .3s both;
}
.reel-sound:hover { border-color: var(--bianco); }
.sound-on .reel:not(.needs-tap) .reel-sound, .js.reel-quick .reel-sound, .reel.is-closing .reel-sound, .reel.is-leaving .reel-sound { display: none; }
.reel.is-leaving, .reel.is-closing { pointer-events: none; }
/* running the count again from 3 (a tap for sound): every animation in the reel drops for one frame */
.js .reel.restart, .reel.restart .reel-leader, .reel.restart .reel-leader *, .reel.restart .reel-sweep::after { animation: none; }
.js .reel::before, .js .reel::after {                /* sprocket holes running down both edges */
  content: ""; position: absolute; top: -48px; bottom: -48px; width: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='48'%3E%3Crect x='3' y='12' width='16' height='22' rx='4' fill='%23F7F5EC' fill-opacity='.2'/%3E%3C/svg%3E") repeat-y;
  animation: sprockets .4s linear infinite;
}
.js .reel::before { left: max(8px, env(safe-area-inset-left, 0px)); }
.js .reel::after { right: max(8px, env(safe-area-inset-right, 0px)); }
/* The leader: a projected frame with crosshairs and two rings. Each number gets one turn of the hand,
   the swept wedge brightening behind it, and a flash of the lamp as it changes. .7s a number. */
.reel-leader {
  position: relative; width: var(--fw); aspect-ratio: 4 / 3; border-radius: calc(var(--fw) * .04);
  background: rgba(247, 245, 236, .07); box-shadow: inset 0 0 calc(var(--fw) * .12) rgba(22, 21, 21, .9);
  animation: reel-fade .2s both, leader-tick .7s 3;
}
.reel-leader svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(247, 245, 236, .5); stroke-width: 2; }
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.reel-sweep {
  position: absolute; left: 20%; top: 10%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(rgba(247, 245, 236, .16) var(--sweep), transparent 0);
  animation: leader-sweep .7s linear 3;
}
.reel-sweep::after {                                  /* the hand */
  content: ""; position: absolute; left: calc(50% - 1px); top: 0; width: 2px; height: 50%;
  background: rgba(247, 245, 236, .75); transform-origin: 50% 100%;
  animation: leader-hand .7s linear 3;
}
.reel-num b {
  position: absolute; inset: 0; display: grid; place-items: center; opacity: 0;
  font-stretch: 62%; font-weight: 900; font-size: calc(var(--fw) * .3); line-height: 1; color: var(--bianco);
  animation: leader-num .7s;
}
.reel-num b:nth-child(2) { animation-delay: .7s; }
.reel-num b:nth-child(3) { animation-delay: 1.4s; animation-fill-mode: forwards; }   /* 1 holds until the page is ready */
.reel-label {
  position: absolute; left: 0; right: 0; bottom: max(28px, env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center;
  font-stretch: 62%; font-weight: 800; font-size: .95rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bianco-soft);
  animation: reel-fade .2s .12s both;
}
.reel-burn {
  position: absolute; inset: -10%; opacity: 0;
  background: radial-gradient(circle at var(--bx, 50%) var(--by, 45%), #FFFBEA 0%, var(--sole) 20%, rgba(250, 202, 6, .6) 40%, rgba(215, 67, 37, 0) 72%);
}
/* the page is ready: one flash frame, then the leader runs up and out of the gate */
.js .reel.is-leaving { animation: reel-up .42s cubic-bezier(.7, 0, .25, 1) .1s forwards; }
/* a later page arriving: no swipe. The lamp flickers up through the black and a frame line rolls down the
   screen, like film settling in the gate, then the picture holds. */
.reel-roll { position: absolute; left: 0; right: 0; top: 0; height: 18vh; opacity: 0; pointer-events: none;
  background: linear-gradient(transparent, rgba(22, 21, 21, .92) 30%, rgba(22, 21, 21, .92) 70%, transparent); }
.js.reel-quick .reel.is-leaving { animation: lamp-up .5s linear forwards; }
.js.reel-quick .reel.is-leaving::before, .js.reel-quick .reel.is-leaving::after { display: none; }
.js.reel-quick .reel.is-leaving .reel-roll { animation: frame-roll .42s cubic-bezier(.3, 0, .7, 1) both; }
.reel.is-leaving .reel-burn { animation: flash-frame .2s ease-out both; }
.js .reel.is-gone { display: none; }
/* leaving the page: the film runs out, the lamp blows the screen out, and it cuts to black */
.js .reel.is-closing { display: grid; animation: run-out .36s linear both; }
.reel.is-closing .reel-leader, .reel.is-closing .reel-label { display: none; }
.reel.is-closing .reel-burn { animation: blow-out .36s ease-in both; }
@keyframes reel-failsafe { to { visibility: hidden; } }
@keyframes reel-fade { from { opacity: 0; } }
@keyframes sprockets { to { transform: translateY(48px); } }
@keyframes leader-sweep { from { --sweep: 0deg; } to { --sweep: 360deg; } }
@keyframes leader-hand { to { transform: rotate(360deg); } }
@keyframes leader-num { from, to { opacity: 1; } }
@keyframes leader-tick { 0% { background-color: rgba(247, 245, 236, .2); } 15%, 100% { background-color: rgba(247, 245, 236, .07); } }
@keyframes reel-up { from { transform: translateY(0); } to { transform: translateY(-104%); visibility: hidden; } }
@keyframes lamp-up {
  0% { background-color: var(--ink); } 16% { background-color: rgba(22, 21, 21, .45); } 26% { background-color: rgba(22, 21, 21, .85); }
  42% { background-color: rgba(22, 21, 21, .2); } 56% { background-color: rgba(22, 21, 21, .5); } 76% { background-color: rgba(22, 21, 21, .08); }
  100% { background-color: transparent; visibility: hidden; }
}
@keyframes frame-roll { from { opacity: 1; transform: translateY(-10vh); } to { opacity: .6; transform: translateY(105vh); } }
@keyframes flash-frame { 0% { opacity: 0; } 30% { opacity: .85; } 100% { opacity: 0; } }
@keyframes run-out {
  0% { background: transparent; } 14% { background: rgba(22, 21, 21, .35); } 22% { background: transparent; }
  58% { background: transparent; } 60%, 100% { background: var(--ink); }
}
@keyframes blow-out { 0% { opacity: 0; transform: scale(.6); } 45% { opacity: .95; transform: scale(1.25); } 60% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- arrival (site.js): the hero builds in once the reel lifts; blocks ease up as they scroll into view ---------- */
.reveal-on [data-reveal] {
  transition: opacity .75s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), translate .75s cubic-bezier(.2, .7, .2, 1) var(--d, 0s),
    scale .6s cubic-bezier(.3, 1.5, .5, 1) var(--d, 0s);
}
.reveal-on [data-reveal]:not(.is-in) { opacity: 0; translate: 0 18px; }
.reveal-on [data-reveal="rise"]:not(.is-in) { translate: 0 36px; }          /* the riders come up over the ridge */
.reveal-on [data-reveal="stamp"]:not(.is-in) { translate: 0 0; scale: 1.5; }  /* the bounty stamp lands */

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  background: var(--ink); color: var(--bianco); border: 2px solid var(--sole); padding: 12px 16px;
  width: max-content; max-width: min(92vw, 460px); font-weight: 600; font-size: .95rem;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reel { display: none; }
  .poster:target, .poster.is-wanted { animation: none; }
  #bounty:target .money-figure .big { animation: none; }
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; }
  .ticker-track .dup { display: none; }
  .btn, .poster, .toast, .site-head.can-slide { transition: none; }
  .camp .flame, .camp .glow { animation: none; }
  .camp .sparks { display: none; }
}