:root {
  --creosote: #2a1a10;
  --board: #3a2617;
  --rust: #a8391f;
  --haint: #4f9a94;
  --signyellow: #e5b63f;
  --bone: #efe3c6;
  --swamp: #3e5a2b;
  --paper: #e9dec2;
  --card: #f5ecd6;
  --ink: #1d140c;
  --mute: #6b5a45;
  --line: #cdbb97;
  --stamp: #a8391f;
  --shout: 'Ultra', 'Rockwell Extra Bold', 'Arial Black', serif;
  --scrawl: 'Permanent Marker', 'Comic Sans MS', cursive;
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #1c140d; --card: #26190f; --ink: #efe3c6; --mute: #b9a688; --line: #4a3826; }
}
:root[data-theme="dark"] { --paper: #1c140d; --card: #26190f; --ink: #efe3c6; --mute: #b9a688; --line: #4a3826; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
body { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.55;
  background: var(--paper);
  background-image: repeating-linear-gradient(90deg, rgba(90,60,30,.045) 0 2px, transparent 2px 9px), repeating-linear-gradient(0deg, rgba(90,60,30,.03) 0 1px, transparent 1px 7px); }
img { max-width: 100%; display: block; }
a { color: inherit; }
kbd { font-family: var(--mono); font-size: .85em; border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; }
.wrap { width: min(1180px, 100% - 32px); margin: 0 auto; }
.narrow { width: min(720px, 100% - 32px); margin: 0 auto; }

/* ---------- painted road stripes ---------- */
.stripe { height: 16px; background: repeating-linear-gradient(-45deg, var(--rust) 0 24px, var(--bone) 24px 48px); border-top: 2px solid var(--creosote); border-bottom: 2px solid var(--creosote); }

/* ---------- the sign (hero + viewer): creosote boards ---------- */
.sign { color: var(--bone); background: var(--creosote);
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 118px), repeating-linear-gradient(90deg, rgba(255,230,180,.03) 0 3px, transparent 3px 11px), radial-gradient(ellipse at 20% 0%, rgba(229,182,63,.16), transparent 55%);
  position: relative; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.brand { font-family: var(--shout); font-size: 24px; letter-spacing: .01em; text-decoration: none; text-transform: none; color: var(--bone); }
.brand span { color: var(--signyellow); }
.topbar nav { display: flex; gap: 20px; }
.topbar nav a { text-decoration: none; opacity: .85; }
.topbar nav a:hover, .topbar nav a:focus-visible { opacity: 1; color: var(--signyellow); }
.live { display: inline-flex; align-items: center; gap: 8px; color: var(--signyellow); }
.live::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 0 rgba(168,57,31,.7); animation: blink 1.6s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(168,57,31,.7); } 50% { opacity: .4; box-shadow: 0 0 0 8px rgba(168,57,31,0); } }

/* church letterboard */
.board { background: #121212; color: #f7f2e4; border-top: 6px solid #d8d2c0; border-bottom: 6px solid #d8d2c0; overflow: hidden; font-family: var(--mono); font-weight: 500; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 10px); }
.board .track { display: inline-block; padding: 11px 0; animation: ticker 60s linear infinite; }
.board span { margin-right: 64px; }
.board span::before { content: '✦'; color: var(--signyellow); margin-right: 22px; letter-spacing: 0; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.hero { padding: clamp(44px, 7vw, 96px) 0 clamp(36px, 5vw, 64px); }
.hero .wrap { display: grid; gap: 24px; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--signyellow); margin: 0; }
h1 { font-family: var(--shout); font-weight: 400; font-size: clamp(50px, 11vw, 150px); line-height: .92; margin: 0; text-transform: uppercase; text-wrap: balance; color: var(--bone); text-shadow: 4px 4px 0 rgba(0,0,0,.45); }
h1 .q { display: inline-block; font-family: var(--scrawl); text-transform: none; color: var(--signyellow); transform: rotate(-3deg); font-size: 1.08em; text-shadow: 3px 3px 0 var(--rust); padding-right: .1em; }
.lede { font-size: clamp(18px, 2.2vw, 24px); margin: 0; max-width: 42ch; color: #e6d9bd; }
.herorow { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; }

.btn { font-family: var(--shout); font-weight: 400; font-size: clamp(20px, 2.6vw, 30px); text-transform: uppercase; letter-spacing: .02em; background: var(--signyellow); color: var(--creosote); border: 3px solid var(--creosote); border-radius: 4px; padding: 14px 30px; cursor: pointer; box-shadow: 6px 6px 0 var(--rust); transition: transform .08s ease, box-shadow .08s ease; position: relative; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 8px 8px 0 var(--rust); }
.btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--rust); }
.btn:focus-visible { outline: 3px solid var(--haint); outline-offset: 4px; }
.btn.go::after { content: 'FRESH'; position: absolute; top: -18px; right: -16px; transform: rotate(8deg); font-family: var(--scrawl); font-size: 18px; color: var(--bone); background: var(--rust); padding: 2px 10px; border-radius: 3px; letter-spacing: .05em; }
.btn.alt { background: var(--haint); color: var(--bone); font-size: 18px; padding: 12px 20px; box-shadow: 5px 5px 0 var(--creosote); border-color: var(--bone); }
.btn.alt:hover { box-shadow: 7px 7px 0 var(--creosote); }
.btn.alt:active { box-shadow: 2px 2px 0 var(--creosote); }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; box-shadow: none; font-size: 18px; padding: 12px 20px; text-decoration: none; display: inline-block; }
.btn.ghost:hover { color: var(--signyellow); transform: none; }
.btn.hot { background: var(--rust); color: var(--bone); animation: shake .4s infinite; }
@keyframes shake { 0%, 100% { transform: translate(0,0) rotate(0); } 25% { transform: translate(-2px, 1px) rotate(-.6deg); } 75% { transform: translate(2px, -1px) rotate(.6deg); } }

.clock { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #c8b995; display: grid; gap: 6px; }
.clock b { font-family: var(--shout); font-weight: 400; font-size: clamp(32px, 4.6vw, 54px); color: var(--bone); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: .02em; }
.clock b.bad { color: var(--signyellow); }

.flash { position: fixed; inset: 0; background: var(--signyellow); opacity: 0; pointer-events: none; z-index: 50; }
.flash.on { animation: flash .38s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* viewer */
.viewer { display: none; padding: 0 0 56px; }
.viewer.on { display: block; }
.frame { position: relative; background: #000; border-top: 10px solid var(--bone); border-bottom: 10px solid var(--bone); }
.frame img { width: 100%; height: clamp(300px, 64vw, 760px); object-fit: cover; }
.stamp { position: absolute; top: 7%; left: 4%; transform: rotate(-9deg); font-family: var(--shout); font-size: clamp(20px, 3.6vw, 46px); line-height: 1; text-transform: uppercase; color: var(--stamp); border: .14em double var(--stamp); border-radius: 50% / 50%; padding: .55em 1.1em; letter-spacing: .04em; text-align: center; mix-blend-mode: multiply; background: rgba(255,255,255,.72); max-width: 11em; }
.stamp small { display: block; font-family: var(--mono); font-size: .32em; letter-spacing: .18em; margin-top: .4em; }
.cap { display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; padding: 24px 0 0; align-items: end; }
.cap h2 { font-family: var(--shout); font-weight: 400; font-size: clamp(32px, 5.4vw, 76px); margin: 0; text-transform: uppercase; line-height: .98; color: var(--bone); }
.cap .latin { font-style: italic; color: #cbbc98; margin: 6px 0 0; font-size: 19px; }
.cap .credit { font-family: var(--mono); font-size: 12px; color: #b3a382; grid-column: 1 / -1; margin: 0; letter-spacing: .04em; }
.cap .credit a { color: inherit; }
.num { font-family: var(--mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--signyellow); text-align: right; white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; align-items: center; }
.toast { font-family: var(--scrawl); font-size: 18px; color: var(--signyellow); min-height: 1.4em; margin-top: 14px; }

/* ---------- counter: letterboard ---------- */
.counter { background: #121212; color: #f7f2e4; padding: 40px 0 46px; border-top: 8px solid #d8d2c0; border-bottom: 8px solid #d8d2c0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 10px); }
.counter .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; align-items: end; }
.counter .big { font-family: var(--shout); font-weight: 400; font-size: clamp(60px, 10vw, 140px); line-height: .9; font-variant-numeric: tabular-nums; }
.counter .lab, .counter .lvl { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #bfb69f; }
.counter .lab { margin-top: 12px; }
.meter { display: flex; gap: 6px; margin: 12px 0 8px; }
.meter i { flex: 1; height: 26px; background: #2b2b2b; }
.meter i.on { background: var(--signyellow); }
.meter i.on.hot { background: var(--rust); }
.counter .lvl b { color: var(--signyellow); font-weight: 500; }

/* ---------- paper sections ---------- */
section.block { padding: clamp(48px, 7vw, 96px) 0; }
section.block + section.block { border-top: 3px double var(--ink); }
h2.sec { font-family: var(--shout); font-weight: 400; font-size: clamp(38px, 6.4vw, 92px); text-transform: uppercase; line-height: .94; margin: 0 0 14px; text-wrap: balance; }
h2.sec .q { display: inline-block; font-family: var(--scrawl); text-transform: none; color: var(--rust); transform: rotate(-3deg); font-size: 1.05em; }
.sub { color: var(--mute); margin: 0 0 34px; max-width: 58ch; font-size: 19px; }

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.quotes figure { margin: 0; background: var(--card); border: 1px solid var(--line); padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 16px; position: relative; box-shadow: 3px 4px 0 rgba(60,40,20,.12);
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(79,154,148,.25) 31px 32px); }
.quotes figure::before { content: ''; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e07a5f, var(--rust)); box-shadow: 0 2px 3px rgba(0,0,0,.35); transform: translateX(-50%); }
.quotes .case { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); display: flex; justify-content: space-between; }
.quotes .case b { color: var(--rust); font-weight: 500; }
.quotes blockquote { margin: 0; font-size: 21px; line-height: 1.3; }
.quotes figcaption { font-family: var(--scrawl); font-size: 15px; color: var(--mute); margin-top: auto; }

.facts { counter-reset: fact; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0 36px; }
.facts li { position: relative; padding: 20px 0 20px 76px; border-top: 1px solid var(--line); }
.facts li::before { counter-increment: fact; content: counter(fact, decimal-leading-zero); position: absolute; left: 0; top: 14px; font-family: var(--shout); color: var(--rust); font-size: 40px; line-height: 1; }
.facts strong { font-family: var(--shout); font-weight: 400; display: block; margin-bottom: 4px; text-transform: uppercase; font-size: 17px; letter-spacing: .02em; }

.tees { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.tee { background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: 3px 4px 0 rgba(60,40,20,.12); }
.tee .shirt { aspect-ratio: 1; display: grid; place-items: center; padding: 8%; }
.tee .shirt svg, .tee .shirt img { width: 100%; height: 100%; object-fit: contain; }
.tee .meta { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.tee h3 { margin: 0; font-family: var(--shout); font-weight: 400; font-size: 18px; text-transform: uppercase; line-height: 1.1; }
.tee p { margin: 0; color: var(--mute); font-size: 15px; }
.tee .row { display: flex; gap: 10px; align-items: center; margin-top: auto; }
.tee .price { font-family: var(--mono); font-size: 13px; }
.tee .buy { margin-left: auto; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; background: var(--ink); color: var(--paper); text-decoration: none; padding: 9px 14px; }
.tee .buy:hover { background: var(--rust); color: #fff; }
.tee .buy[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.swatch { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); vertical-align: -2px; margin-right: 5px; }

.about { background: var(--card); border: 1px solid var(--line); border-left: 10px solid var(--signyellow); padding: 26px 30px; font-size: 19px; box-shadow: 3px 4px 0 rgba(60,40,20,.12); }
.about p { margin: 0 0 1em; }
.about p:last-child { margin: 0; font-family: var(--scrawl); font-size: 26px; color: var(--rust); }

footer { background: var(--creosote); color: #c8b995; padding: 0 0 40px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between; }
footer a { color: inherit; }

table.cred { width: 100%; border-collapse: collapse; font-size: 15px; }
table.cred th, table.cred td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cred th { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--mute); }
table.cred img { width: 90px; aspect-ratio: 3/2; object-fit: cover; }
.tablewrap { overflow-x: auto; }
.small { font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: .04em; }
.sign .small { color: #b3a382; }

/* ---------- cooternami ---------- */
.nami { position: fixed; inset: 0; z-index: 60; display: none; overflow: hidden; background: rgba(42,26,16,.93); }
.nami.on { display: block; }
.nami .wave { position: absolute; inset: 0; }
.nami img { position: absolute; width: clamp(140px, 22vw, 320px); height: auto; aspect-ratio: 3/2; object-fit: cover; border: 5px solid var(--bone); box-shadow: 0 20px 50px rgba(0,0,0,.6); animation: surge 2.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes surge { 0% { transform: translateX(120vw) rotate(var(--r, 0deg)) scale(.7); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateX(var(--x, -10vw)) rotate(var(--r, 0deg)) scale(1); opacity: 1; } }
.namistamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-6deg); font-family: var(--shout); font-size: clamp(48px, 14vw, 210px); line-height: .9; text-transform: uppercase; color: var(--stamp); border: .08em double var(--stamp); border-radius: 50%/50%; padding: .3em .6em; letter-spacing: .02em; background: rgba(255,255,255,.86); text-align: center; animation: stampin .5s .9s cubic-bezier(.2,1.6,.4,1) both; }
.namistamp small { display: block; font-family: var(--mono); font-size: .14em; letter-spacing: .3em; margin-top: .4em; }
@keyframes stampin { from { transform: translate(-50%, -50%) rotate(-6deg) scale(2.4); opacity: 0; } to { transform: translate(-50%, -50%) rotate(-6deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nami img { animation: none; transform: rotate(var(--r, 0deg)); } .namistamp { animation: none; } }

@media (max-width: 640px) {
  .topbar nav { gap: 12px; }
  .topbar .hide-s { display: none; }
  .cap { grid-template-columns: 1fr; }
  .num { text-align: left; }
  .btn.go::after { top: -16px; right: -8px; font-size: 15px; }
}

/* ---------- bunting (used-car-lot pennants) ---------- */
.sign .hero { position: relative; padding-top: clamp(96px, 12vw, 150px); }
.sign .hero::before { content: ''; position: absolute; top: 10px; left: -20px; right: -20px; height: 70px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 70%22%3E%3Cpath d=%22M0 4 H320%22 stroke=%22%23efe3c6%22 stroke-width=%222%22/%3E%3Cpath d=%22M0 4 L40 4 L20 62 Z%22 fill=%22%23a8391f%22 stroke=%22%232a1a10%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M40 4 L80 4 L60 62 Z%22 fill=%22%23efe3c6%22 stroke=%22%232a1a10%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M46 14 L74 14 M49 24 L71 24 M52 34 L68 34%22 stroke=%22%23a8391f%22 stroke-width=%223%22/%3E%3Cpath d=%22M80 4 L120 4 L100 62 Z%22 fill=%22%234f9a94%22 stroke=%22%232a1a10%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M120 4 L160 4 L140 62 Z%22 fill=%22%23e5b63f%22 stroke=%22%232a1a10%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M160 4 L200 4 L180 62 Z%22 fill=%22%23a8391f%22 stroke=%22%232a1a10%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M200 4 L240 4 L220 62 Z%22 fill=%22%23efe3c6%22 stroke=%22%232a1a10%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M206 14 L234 14 M209 24 L231 24 M212 34 L228 34%22 stroke=%22%23a8391f%22 stroke-width=%223%22/%3E%3Cpath d=%22M240 4 L280 4 L260 62 Z%22 fill=%22%232b3d6b%22 stroke=%22%232a1a10%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%22252%22 cy=%2214%22 r=%222%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22260%22 cy=%2214%22 r=%222%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22268%22 cy=%2214%22 r=%222%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22256%22 cy=%2222%22 r=%222%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22264%22 cy=%2222%22 r=%222%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22260%22 cy=%2230%22 r=%222%22 fill=%22%23fff%22/%3E%3Cpath d=%22M280 4 L320 4 L300 62 Z%22 fill=%22%23e5b63f%22 stroke=%22%232a1a10%22 stroke-width=%221.5%22/%3E%3C/svg%3E") repeat-x; background-size: 320px 70px; transform-origin: top center; animation: sway 6s ease-in-out infinite; filter: drop-shadow(0 6px 4px rgba(0,0,0,.35)); pointer-events: none; }
@keyframes sway { 0%, 100% { transform: skewX(-1.2deg) translateY(0); } 50% { transform: skewX(1.2deg) translateY(3px); } }

/* ---------- the State of Cooter flag, nailed up behind the sign ---------- */
.sign .hero::after { content: ''; position: absolute; inset: 60px 0 0 0; z-index: 0; pointer-events: none; background: url("/flag.svg") no-repeat right 45%/min(1100px, 95vw) auto; opacity: .22; filter: sepia(.35) contrast(.95); mask-image: linear-gradient(90deg, transparent 0, #000 35%, #000 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%, #000 100%); animation: flutter 7s ease-in-out infinite; transform-origin: left center; }
@keyframes flutter { 0%, 100% { transform: skewY(-.6deg) scaleX(1); } 50% { transform: skewY(.6deg) scaleX(1.012); } }
.sign .hero .wrap { position: relative; z-index: 1; }
@media (max-width: 760px) { .sign .hero::after { background-position: center 20%; background-size: 160vw auto; opacity: .16; mask-image: none; -webkit-mask-image: none; } }

/* ---------- hero fills the first screen (Ben, 16 Oct) ---------- */
.sign .hero { min-height: calc(100svh - 150px); display: grid; align-content: center; padding-bottom: clamp(28px, 4vh, 56px); }
.sign .hero h1 { font-size: clamp(40px, min(10.5vw, 17svh), 150px); }
.sign .hero .lede { font-size: clamp(17px, min(2.2vw, 2.6svh), 24px); }
.sign .hero .wrap { gap: clamp(14px, 2.4svh, 24px); }
@media (max-height: 700px) { .sign .hero { padding-top: 84px; } .sign .hero .small { display: none; } }

/* ---------- phone: tighter chrome, no dead space, flag kept faint ---------- */
@media (max-width: 760px) {
  .stripe { height: 9px; }
  .topbar .wrap { padding: 9px 0; gap: 10px; }
  .brand { font-size: 19px; }
  .topbar nav { gap: 10px; font-size: 10px; letter-spacing: .08em; }
  .board { font-size: 11px; letter-spacing: .16em; border-top-width: 4px; border-bottom-width: 4px; }
  .board .track { padding: 7px 0; animation-duration: 40s; }
  .board span { margin-right: 36px; }
  .board span::before { margin-right: 12px; }
  .sign .hero { min-height: 0; padding-top: 62px; padding-bottom: 34px; align-content: start; }
  .sign .hero::before { top: 2px; height: 46px; background-size: 210px 46px; left: -10px; right: -10px; }
  .sign .hero::after { inset: auto -10vw -20px auto; width: 120vw; height: 60vw; background-position: right bottom; background-size: 120vw auto; opacity: .14; mask-image: linear-gradient(180deg, transparent 0, #000 40%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%); }
  .sign .hero .wrap { gap: 14px; }
  .eyebrow { font-size: 11px; letter-spacing: .16em; }
  .sign .hero h1 { font-size: clamp(42px, 12.5vw, 64px); line-height: .95; }
  .sign .hero .lede { font-size: 17px; max-width: none; }
  .herorow { gap: 16px; }
  .btn.go { width: 100%; font-size: 21px; padding: 15px 16px; letter-spacing: .01em; box-shadow: 5px 5px 0 var(--rust); }
  .btn.go::after { top: -13px; right: 8px; font-size: 13px; padding: 1px 8px; }
  .clock { grid-template-columns: 1fr auto; align-items: center; gap: 12px; width: 100%; }
  .clock b { font-size: 28px; }
  .sign .small { font-size: 11px; }
  .viewer .actions .btn { width: 100%; text-align: center; }
  .stamp { font-size: 16px; padding: .5em .9em; }
}
@media (max-width: 400px) { .topbar nav a:last-child { display: none; } }

/* ---------- desktop: whole action area on the first screen, no dead band under the bunting ---------- */
@media (min-width: 761px) {
  .sign .hero { padding-top: 96px; padding-bottom: 24px; min-height: calc(100svh - 132px); align-content: center; }
  .sign .hero .wrap { gap: clamp(10px, 1.8svh, 20px); }
  .sign .hero h1 { font-size: clamp(44px, min(9.2vw, 13svh), 132px); line-height: .9; }
  .sign .hero .lede { font-size: clamp(17px, 2.3svh, 22px); }
  .sign .hero::after { inset: 40px 0 0 0; background-position: right -6vw top 38%; background-size: min(820px, 62vw) auto; opacity: .2; }
  .sign .hero .small { margin-top: 4px; }
}
@media (min-width: 761px) and (max-height: 760px) { .sign .hero h1 { font-size: min(8vw, 11svh); } .sign .hero .small { display: none; } }

/* ---------- Old Glory, nailed up behind the sign; bunting retired (Ben, 16 Oct) ---------- */
.sign .hero::before { display: none; }
.sign .hero::after { background-image: url("/flag-us.svg"); background-repeat: no-repeat; opacity: .24; filter: sepia(.45) saturate(.8) contrast(.9) brightness(.85); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 30%, #000 60%), linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 30%, #000 60%); mask-composite: intersect; -webkit-mask-composite: source-in; }
@media (min-width: 761px) { .sign .hero { padding-top: 48px; min-height: calc(100svh - 132px); } .sign .hero::after { inset: 0; background-position: right -4vw top 18%; background-size: min(1100px, 78vw) auto; } }
@media (max-width: 760px) { .sign .hero { padding-top: 26px; } .sign .hero::after { inset: 0; width: auto; height: auto; background-position: right -20vw top 0; background-size: 130vw auto; opacity: .16; mask-image: linear-gradient(180deg, #000 0, #000 55%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 55%, transparent 100%); } }