/* Bebas Neue self-hosted — Phase 1 optimization 2026-10-16: this @font-face replaces the Google Fonts @import that was on line 1 */ @font-face{font-family:'Bebas Neue';src:url('../fonts/bebas-neue.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} *{box-sizing:border-box}body{margin:0;background:#111;color:#f7f2e8;font-family:Arial,Helvetica,sans-serif;line-height:1.5} .site-header{position:sticky;top:0;display:flex;align-items:center;gap:18px;padding:16px 5%;background:#111;border-bottom:1px solid #333;z-index:5} .brand{color:#fff;text-decoration:none;font-weight:900;letter-spacing:.04em}.brand strong{color:#e22} nav{margin-left:auto;display:flex;gap:18px}nav a{color:#fff;text-decoration:none}.menu{display:none;margin-left:auto;background:none;color:#fff;border:0;font-size:1.6rem} main{min-height:75vh}.hero,.page{max-width:1100px;margin:auto;padding:70px 5%}.hero{padding-top:100px} .eyebrow{font-weight:900;letter-spacing:.15em;color:#f2b544}.hero h1,.page h1{font-size:clamp(2.5rem,8vw,5.5rem);line-height:.95;margin:.2em 0}.hero h1 span{color:#e22} .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.button,.filters button{display:inline-block;padding:13px 18px;border:1px solid #555;border-radius:8px;color:#fff;background:#222;text-decoration:none;font-weight:800} .primary{background:#d71920;border-color:#d71920}.cards{max-width:1100px;margin:0 auto 60px;padding:0 5%;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .cards article{background:#1c1c1c;border:1px solid #333;border-radius:14px;padding:22px}.badge{font-size:.75rem;color:#f2b544;font-weight:900} .filters{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 30px}form{max-width:650px}label{display:block;margin:15px 0;font-weight:800} input,select,textarea{width:100%;margin-top:6px;padding:12px;border-radius:7px;border:1px solid #555;background:#1c1c1c;color:#fff} footer{text-align:center;padding:30px;border-top:1px solid #333;color:#aaa} @media(max-width:700px){.menu{display:block}nav{display:none;position:absolute;left:0;right:0;top:62px;background:#111;padding:18px 5%;flex-direction:column}nav.open{display:flex}.cards{grid-template-columns:1fr}.hero{padding-top:60px}} .state-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:30px} .state-card{min-height:90px;padding:15px;background:#1c1c1c;border:1px solid #333;border-radius:10px;color:#fff;text-decoration:none;display:flex;flex-direction:column;justify-content:center} .state-card strong{font-size:1.4rem;color:#e22}.state-card span{font-size:.9rem} .state-card:hover,.state-card:focus{border-color:#f2b544;transform:translateY(-1px)} .state-card .flag{width:46px;height:auto;border-radius:4px;margin-bottom:8px;box-shadow:0 1px 3px rgba(0,0,0,.45)} .share-row{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap} .share-label{font-size:.8rem;color:#999} .share-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#2a2a2a;border:1px solid #444;color:#fff;cursor:pointer;padding:0;text-decoration:none} .share-btn svg{width:17px;height:17px;display:block} .share-btn:hover{border-color:#f2b544;color:#f2b544} .share-btn.copied{border-color:#4caf50;color:#4caf50} .badge-card{text-align:center} .badge-img{width:110px;height:110px;object-fit:contain;margin:0 auto 8px;display:block} @media(max-width:800px){.state-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:480px){.state-grid{grid-template-columns:repeat(2,1fr)}} .restaurant-hero{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;align-items:center;margin:30px 0} .photo-placeholder{min-height:220px;border:2px dashed #555;border-radius:14px;display:grid;place-items:center;color:#888;background:#181818;text-align:center;padding:20px} .restaurant-photo{min-height:320px}.profile-card,.qr-panel{background:#1c1c1c;border:1px solid #333;border-radius:14px;padding:22px;margin:20px 0} .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.stat-grid div{background:#111;padding:14px;border-radius:9px} .stat-grid strong,.stat-grid span{display:block}.stat-grid span{font-size:.8rem;color:#aaa} .qr-panel{display:flex;align-items:center;gap:20px}.qr-placeholder{width:110px;height:110px;display:grid;place-items:center;background:#fff;color:#111;font-weight:900;border:10px solid #fff;outline:3px dashed #111} button:disabled{opacity:.45} @media(max-width:700px){.restaurant-hero{grid-template-columns:1fr}.restaurant-photo{min-height:220px}.stat-grid{grid-template-columns:repeat(2,1fr)}.qr-panel{align-items:flex-start}} /* V7 */ .state-switcher{max-width:1100px;margin:18px auto 0;padding:0 5%;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.state-switcher label{margin:0}.state-switcher select{width:auto;min-width:210px;margin:0}.status-pill{display:inline-block;padding:5px 9px;border:1px solid #666;border-radius:999px;font-size:.72rem;font-weight:900;letter-spacing:.04em}.state-summary{margin-top:24px}.state-summary .cards{padding:0;margin:0;max-width:none}.progress-box{background:#1c1c1c;border:1px solid #333;border-radius:14px;padding:20px;margin:22px 0}.progress-box button{cursor:pointer}.small{font-size:.9rem;color:#bbb}.brand{white-space:nowrap} @media(max-width:520px){.site-header{padding:13px 4%}.brand{font-size:.82rem}.state-switcher{padding:0 4%}.state-switcher select{width:100%}} details.verify-how{margin:16px 0}details.verify-how summary{cursor:pointer}details.verify-how ol{margin:12px 0 0 20px;line-height:1.6} /* V5: challenge photos + translate button */ .challenge-photo{width:100%;max-height:260px;object-fit:cover;border-radius:8px;margin:0 0 8px;display:block} .thumb{width:64px;height:64px;object-fit:cover;border-radius:6px;vertical-align:middle;margin-right:8px} #bmc-translate-btn{position:fixed;right:12px;bottom:12px;z-index:9999;background:#d71920;color:#fff;border:0;border-radius:999px;padding:6px 10px;font-size:12px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3)} #bmc-translate-panel{position:fixed;right:12px;bottom:56px;z-index:9999;background:#fff;color:#111;border:1px solid #ccc;border-radius:8px;padding:10px;max-width:240px;box-shadow:0 2px 12px rgba(0,0,0,.3)} #bmc-translate-panel .tiny{font-size:11px;color:#666;margin:6px 0} /* V5: video/sound toggle */ #bmc-media-toggle{position:fixed;left:12px;bottom:12px;z-index:9999;display:flex;gap:6px} #bmc-media-toggle button{background:#222;color:#fff;border:0;border-radius:999px;padding:10px 12px;font-size:14px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3)} /* ============================================================ HEADING FONT — 2026-10-15 Bebas Neue (Google Fonts) for headings site-wide. Loaded via the @import at the very top of this file. Body text and all other elements are unchanged. Rollback: delete this block AND the @import line at the top. ============================================================ */ h1, h2, h3, .eyebrow { font-family: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif; letter-spacing: .02em; } .eyebrow { letter-spacing: .18em; } /* ============================================================ COSMETIC POLISH — 2026-10-16 Site-wide finishing touches, shared css/styles.css only: 1. Brand-red text selection. 2. Smooth scrolling (disabled under prefers-reduced-motion). 3. Slim dark scrollbar — webkit + Firefox, muted brand red. 4. Footer link row (.bmc-footer-links) — the row itself is injected by js/app.js into the existing