/* Whitby 49ers — poster broadside, 49ers palette
   Mapping from the reference brief:
   deep plum  -> deep royal  #10245c (ground)
   lavender   -> gold        #FDF718 (the one chromatic accent on dark)
   espresso   -> royal card  #1d3a7d
   mint/amber -> sky #9ADAFF / gold (light-section punctuation only)
*/
:root{
  --ground:#10245c;
  --card:#1d3a7d;
  --accent:#FDF718;
  --sky:#9ADAFF;
  --royal:#2E56A8;
  --white:#fff;
  --slate:#333;
  --charcoal:#121212;
  --hair:#e5e5e5;
  --display:"Oswald","Arial Narrow",Impact,sans-serif;
  --ui:"Manrope",Inter,system-ui,sans-serif;
  --max:1200px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--white);font-family:var(--ui);font-size:15px;line-height:1.43;letter-spacing:-.022em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* nav */
.nav{position:sticky;top:0;z-index:5;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:var(--ground)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--accent);font-family:var(--display);font-weight:500;font-size:13px;line-height:1;letter-spacing:.05em}
.links{display:flex;gap:32px}
.links a{font-size:14px;font-weight:500;text-decoration:none;color:var(--white)}
.links a:hover{color:var(--accent)}
.btn{display:inline-block;border-radius:9999px;padding:12px 20px;background:var(--accent);color:var(--ground);font:500 14px var(--ui);letter-spacing:-.022em;text-decoration:none;border:0;cursor:pointer}
.btn:hover{filter:saturate(1.15)}
.btn:disabled{opacity:.6;cursor:default}
.dark-btn{background:var(--ground);color:var(--accent)}

/* hero */
.hero{position:relative;padding:24px 0 48px;overflow:hidden;min-height:calc(100svh - 64px);display:grid;grid-template-columns:1.1fr .9fr;align-items:center}
.display{display:flex;flex-direction:column;padding:0 12px}
.word{font-family:var(--display);font-weight:700;font-size:clamp(64px,11.5vw,220px);line-height:.78;letter-spacing:.006em;color:var(--accent);text-transform:uppercase;white-space:nowrap}
.bridge{font:600 clamp(18px,3.6vw,58px)/1.1 var(--ui);letter-spacing:-.022em;color:var(--white);padding:14px 4px 10px;text-transform:uppercase;white-space:normal}
.hero-jersey{width:100%;max-width:760px;justify-self:end;margin-right:-6vw;pointer-events:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.hero-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;padding:40px 20px 0}
.hero-foot p{color:var(--white);font-size:14px;max-width:420px}
.pills{display:flex;gap:8px}
.pill{width:80px;height:48px;border-radius:9999px;border:1px solid var(--accent);display:grid;place-items:center;font-size:13px;font-weight:500;color:var(--accent);cursor:pointer;user-select:none}
.pill.active{background:var(--accent);color:var(--ground)}

/* sections */
section{padding:64px 0}
.light{background:var(--white);color:var(--slate)}
.dark{background:var(--ground);color:var(--white)}
.display-light{font-family:var(--display);font-weight:700;font-size:clamp(72px,13vw,187px);line-height:.85;letter-spacing:.005em;color:var(--charcoal);text-transform:uppercase}
.display-light.small{font-size:clamp(56px,8vw,120px)}
.display-dark{font-family:var(--display);font-weight:700;font-size:clamp(72px,13vw,187px);line-height:.85;letter-spacing:.005em;color:var(--accent);text-transform:uppercase}
.lede{font-size:16px;max-width:60ch;margin-top:32px}
.note{font-size:14px;max-width:44ch;margin-top:16px;color:rgba(255,255,255,.85)}
.note a{color:var(--accent)}

/* facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px;margin-top:40px}
.fact{border-top:1px solid var(--hair);padding:16px 0;display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:baseline}
.fact b{font-family:var(--display);font-weight:700;font-size:44px;line-height:.85;color:var(--charcoal)}
.fact span{font-size:14px;color:var(--slate)}

/* kit */
.kit-grid{display:grid;grid-template-columns:1fr 1fr .6fr;gap:8px;margin-top:40px}
.card{border-radius:14px;padding:20px;background:var(--card);color:var(--white);display:flex;flex-direction:column}
.card img{flex:1;min-height:0}
.card img{width:100%;height:100%;object-fit:contain}
.card.tall img{max-height:420px;margin:0 auto}
figcaption{margin-top:16px;font-size:14px;display:flex;align-items:center;gap:8px}
.tag{border-radius:6px;padding:4px 10px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;color:var(--charcoal)}
.tag.sky{background:var(--sky)}.tag.gold{background:var(--accent)}.tag.white{background:var(--white)}

/* price */
.price-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.check{list-style:none;padding:0;margin:24px 0 32px;display:grid;gap:8px}
.check li{padding-left:22px;position:relative;font-size:15px}
.check li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;background:var(--sky)}
.price-copy .lede{margin-top:0}

/* form */
.form-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
.form{display:grid;gap:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.form label{display:grid;gap:6px;font-size:12px;font-weight:500;color:rgba(255,255,255,.8)}
.form input,.form select,.form textarea{font:400 15px var(--ui);letter-spacing:-.022em;color:var(--white);background:var(--ground);border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:10px 12px;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.form select option{color:#000}
.form .btn{justify-self:start}
.hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
.status{font-size:14px;min-height:1.4em}
.status a{color:var(--accent)}

/* faq */
.faq{margin-top:32px;max-width:70ch;display:grid;gap:8px}
.faq dt{font-family:var(--display);font-weight:500;font-size:24px;line-height:1;color:var(--charcoal);text-transform:uppercase;margin-top:24px}
.faq dd{font-size:15px}

/* footer */
.foot{padding:64px 0 40px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:32px}
.foot-links a{font-size:14px;text-decoration:none}
.foot-links a:hover{color:var(--accent)}
.fine{font-size:12px;color:rgba(255,255,255,.6);margin-top:32px}

@media (max-width:860px){
  .word{font-size:clamp(56px,17vw,140px)}
  .links{display:none}
  .hero{min-height:0;grid-template-columns:1fr}
  .hero-jersey{width:min(92vw,560px);margin:24px auto 0;justify-self:center}
  .kit-grid,.price-wrap,.form-wrap,.form .row{grid-template-columns:1fr}
  .fact{grid-template-columns:96px 1fr}
}