/* ============================================================
   Amazeing Sports hub (blazemazer.com root) — the bookshelf landing.
   Self-contained: own palette + Inter. The golf app keeps brand.css.
   Colorblind-safe: live vs coming-soon is carried by brightness +
   ribbon/badge TEXT + lock/play glyphs + different CTAs, never hue.
   ============================================================ */
*{box-sizing:border-box}
:root{
  --green:#0a5c2e; --green-deep:#07351d; --green-case:#063a20; --green-bar:#052a17;
  --gold:#ffd66b; --gold-deep:#e3b53d; --cream:#fffaf0; --ink:#14201a;
  --soft:#d9ecdf; --muted:#9fc3ad; --faint:#7fa890;
}
html,body{margin:0}
body{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--green-deep); color:var(--cream);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;max-width:1000px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .mark{width:34px;height:34px;border-radius:9px;background:var(--gold);color:#08351d;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.brand .wordmark{color:var(--cream);font-weight:800;font-size:16px;letter-spacing:.01em}
.nav-cta{color:var(--gold);font-weight:800;font-size:14px;text-decoration:none;white-space:nowrap}
.nav-cta:hover{color:#ffe08a}

/* hero */
.hero{position:relative;padding:32px 20px 40px;background:var(--green);
  background-image:repeating-linear-gradient(118deg,rgba(255,255,255,.045) 0 26px,rgba(255,255,255,0) 26px 52px);}
.hero .inner{max-width:1000px;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,214,107,.16);color:var(--gold);
  font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:999px;margin-bottom:16px}
.eyebrow svg{color:var(--gold)}
.hero h1{margin:0 0 10px;font-weight:900;font-size:clamp(34px,8.5vw,54px);line-height:1.02;letter-spacing:-.015em;color:var(--cream)}
.tagline{color:var(--gold);font-weight:800;font-size:clamp(18px,4.6vw,27px);line-height:1.16;margin:0 0 14px}
.sub{color:var(--soft);font-size:clamp(15px,3.6vw,17px);line-height:1.55;max-width:610px;font-weight:500;margin:0}

/* the case / shelf */
.case{background:var(--green-case);padding:26px 20px 16px}
.case .inner{max-width:1000px;margin:0 auto}
.case-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.case-title{color:var(--cream);font-weight:800;font-size:clamp(17px,4vw,20px)}
.case-note{color:var(--muted);font-size:13px;font-weight:500}

.shelf{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 24px;max-width:520px;margin:0 auto}
@media(min-width:760px){.shelf{grid-template-columns:repeat(4,1fr);max-width:none}}

.cell{display:flex;flex-direction:column;align-items:center;text-align:center}
.cover{position:relative;width:100%;max-width:210px;aspect-ratio:3/4;border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,214,107,.4);box-shadow:0 10px 26px rgba(0,0,0,.4)}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.soon .cover img{filter:saturate(.5) brightness(.6)}
.soon .cover::after{content:"";position:absolute;inset:0;background:rgba(6,30,18,.26)}
.ribbon{position:absolute;top:16px;left:-40px;transform:rotate(-45deg);background:var(--gold);color:#3a2a06;
  font-weight:800;font-size:11px;letter-spacing:.05em;padding:6px 46px;text-transform:uppercase;z-index:2}
.livebadge{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:4px;background:var(--gold);
  color:#08351d;font-weight:800;font-size:10.5px;letter-spacing:.04em;padding:4px 9px;border-radius:999px;text-transform:uppercase;z-index:2}
.base{width:min(100%,210px);height:9px;margin-top:-3px;border-radius:3px;background:var(--gold-deep);box-shadow:0 7px 13px rgba(0,0,0,.4)}
.name{margin-top:14px;display:flex;align-items:center;gap:6px;color:var(--cream);font-weight:800;font-size:15px}
.status{color:var(--muted);font-size:12px;font-weight:500;margin:2px 0 12px}
.url{color:var(--faint);font-size:10.5px;margin-top:7px}

/* buttons + forms */
.btn{cursor:pointer;font-family:inherit;font-weight:800;font-size:13px;border-radius:999px;border:0;
  padding:10px 18px;display:inline-flex;align-items:center;gap:7px;justify-content:center;text-decoration:none;line-height:1}
.play{background:var(--gold);color:#08351d}
.play:hover{background:#ffe08a}
.notify{background:transparent;color:var(--gold);border:1.5px solid rgba(255,214,107,.6)}
.notify:hover{background:rgba(255,214,107,.12)}
.join{background:var(--gold);color:#08351d}
.form{display:none;flex-direction:column;gap:8px;width:100%;max-width:200px;margin-top:2px}
.email{width:100%;height:40px;border-radius:9px;border:1.5px solid rgba(255,214,107,.4);background:var(--cream);
  color:var(--ink);padding:0 12px;font-size:13px;font-family:inherit;outline:none}
.email:focus{border-color:var(--gold)}
.ok{display:none;align-items:flex-start;gap:7px;color:var(--gold);font-weight:700;font-size:12.5px;max-width:210px;line-height:1.35;margin-top:2px}
.ok .ic{flex:0 0 auto}

/* "more titles" card */
.more{max-width:760px;margin:26px auto 8px;border:1.5px dashed rgba(255,214,107,.5);border-radius:14px;padding:18px;background:rgba(255,214,107,.05)}
.more-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.more .glyph{font-size:26px;line-height:1}
.more .mtxt{flex:1;min-width:200px}
.more h3{margin:0;color:var(--cream);font-weight:800;font-size:15px}
.more p{margin:3px 0 0;color:#bcd9c6;font-size:12.5px;font-weight:500;line-height:1.4}
.more .notify{white-space:nowrap}
.more .form{flex-direction:row;max-width:360px;margin-top:14px}
.more .email{max-width:none}
.more .ok{max-width:none}

/* footer */
.foot{background:var(--green-bar);border-top:1px solid rgba(255,255,255,.06);margin-top:18px}
.foot .inner{max-width:1000px;margin:0 auto;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.foot .brandline{display:flex;align-items:center;gap:8px;color:var(--soft);font-weight:700;font-size:13px}
.foot .brandline svg{color:var(--gold)}
.foot .social{display:flex;align-items:center;gap:16px}
.foot .social a{color:var(--soft);text-decoration:none;font-size:13px;font-weight:500}
.foot .social a:hover{color:var(--gold)}
.foot .handle{color:var(--faint);font-size:12px;font-weight:500}

/* focus visibility (a11y) */
.btn:focus-visible,.nav-cta:focus-visible,.brand:focus-visible,.email:focus-visible,.foot .social a:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}