/* All Tagged Up — design system. Palette from Rob's own merch: tan hoodie, charcoal, bone, antler brown; blaze orange only for action. */
:root{
  --ink:#0b0b09; --coal:#141310; --coal-2:#1c1a16; --line:#2c2924; --line-2:#3d3932;
  --bone:#f1eadc; --bone-2:#cfc6b4; --dim:#8f877a; --tan:#d9c7a3; --tan-2:#b9a47c; --antler:#8a6f4e;
  --blaze:#ff6a13; --blaze-2:#ff8a3d; --snow:#e8eef6; --night:#0e1622;
  --display:"Oswald", "Arial Narrow", sans-serif; --serif:"Cormorant Garamond", Georgia, serif; --sans:"Inter", system-ui, sans-serif;
  --pad:clamp(16px, 4vw, 56px); --max:1240px; --r:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box; margin:0; padding:0}
html{background:var(--ink); color:var(--bone); -webkit-text-size-adjust:100%}
body{font-family:var(--sans); font-size:16px; line-height:1.6; background:var(--ink); overflow-x:hidden}
img,video,canvas,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--blaze); color:#000}
:focus-visible{outline:2px solid var(--blaze); outline-offset:3px; border-radius:4px}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* type */
.kicker{font-family:var(--display); font-weight:500; font-size:.78rem; letter-spacing:.32em; text-transform:uppercase; color:var(--tan)}
.kicker.blaze{color:var(--blaze)}
h1,h2,h3,.display{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.02em; line-height:.95}
h1{font-size:clamp(3rem, 10vw, 8.5rem)}
h2{font-size:clamp(2.2rem, 6vw, 4.8rem)}
h3{font-size:clamp(1.3rem, 2.4vw, 1.8rem); line-height:1.05}
.lede{font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.25rem, 2.4vw, 1.9rem); line-height:1.3; color:var(--bone-2)}
.quote{font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem, 4vw, 3.2rem); line-height:1.15; color:var(--bone)}
.quote cite{display:block; font-family:var(--display); font-style:normal; font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; color:var(--tan); margin-top:18px}
p{color:var(--bone-2)}
.muted{color:var(--dim)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.18em; font-size:.82rem;
  padding:15px 24px; border-radius:999px; background:var(--blaze); color:#140800; transition:transform .25s var(--ease), background .25s}
.btn:hover{background:var(--blaze-2); transform:translateY(-2px)}
.btn.ghost{background:transparent; color:var(--bone); border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--tan); color:var(--tan)}
.btn.tan{background:var(--tan); color:#1a140a}
.arrow{transition:transform .25s var(--ease)} .btn:hover .arrow{transform:translateX(4px)}

/* header */
.hdr{position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; gap:18px; padding:14px var(--pad);
  transition:background .4s, backdrop-filter .4s, transform .4s var(--ease)}
.hdr.solid{background:rgba(11,11,9,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.05)}
.hdr.hide{transform:translateY(-100%)}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:46px; height:auto}
.brand span{font-family:var(--display); font-weight:600; letter-spacing:.2em; font-size:.95rem; text-transform:uppercase; line-height:1}
.brand small{display:block; font-family:var(--sans); font-weight:500; font-size:.6rem; letter-spacing:.3em; color:var(--tan); margin-top:4px}
.nav{display:flex; gap:26px; margin-left:auto; align-items:center}
.nav a{font-family:var(--display); font-weight:500; letter-spacing:.2em; text-transform:uppercase; font-size:.76rem; color:var(--bone-2); position:relative; padding:6px 0}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--blaze); transition:right .3s var(--ease)}
.nav a:hover, .nav a[aria-current]{color:var(--bone)} .nav a:hover::after, .nav a[aria-current]::after{right:0}
.nav .btn{padding:10px 18px; font-size:.72rem; color:#140800}
.nav .btn::after{display:none}
.burger{display:none; margin-left:auto; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); align-items:center; justify-content:center}
.burger i{display:block; width:18px; height:1.5px; background:var(--bone); position:relative}
.burger i::before,.burger i::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--bone); transition:transform .3s}
.burger i::before{top:-6px} .burger i::after{top:6px}
.menu-open .burger i{background:transparent} .menu-open .burger i::before{transform:translateY(6px) rotate(45deg)} .menu-open .burger i::after{transform:translateY(-6px) rotate(-45deg)}
.live{display:inline-flex; align-items:center; gap:8px; font-family:var(--display); letter-spacing:.2em; font-size:.68rem; text-transform:uppercase; color:var(--bone)}
.live b{width:8px; height:8px; border-radius:50%; background:var(--blaze); box-shadow:0 0 0 0 rgba(255,106,19,.6); animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(255,106,19,0)}100%{box-shadow:0 0 0 0 rgba(255,106,19,0)}}
@media (max-width:900px){
  .nav{position:fixed; inset:0; flex-direction:column; justify-content:center; gap:22px; background:rgba(11,11,9,.97); opacity:0; pointer-events:none; transition:opacity .35s}
  .nav a{font-size:1.4rem}
  .menu-open .nav{opacity:1; pointer-events:auto}
  .burger{display:flex; z-index:2}
  .hdr .live{display:none}
}

/* sections */
section{position:relative}
.sec{padding:clamp(80px, 12vw, 170px) 0}
.sec-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(34px, 5vw, 64px)}
.sec-head h2{max-width:14ch}
.sec-head p{max-width:46ch}
.grain::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.rule{height:1px; background:linear-gradient(90deg, transparent, var(--line-2), transparent)}

/* reveal */
.rv{opacity:0; transform:translateY(28px)}
.rv.in{opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease)}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none} }

/* cards */
.card{background:var(--coal); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.media{position:relative; overflow:hidden; border-radius:var(--r); background:var(--coal-2)}
.media img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.media:hover img{transform:scale(1.04)}
.tag{display:inline-block; font-family:var(--display); letter-spacing:.2em; text-transform:uppercase; font-size:.66rem; padding:5px 10px; border-radius:999px; border:1px solid var(--line-2); color:var(--tan)}
.tag.blaze{border-color:rgba(255,106,19,.5); color:var(--blaze)}

/* video tiles (YouTube, loaded on tap) */
.yt{position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; background:#000; cursor:pointer}
.yt.short{aspect-ratio:9/16}
.yt img{width:100%; height:100%; object-fit:cover; opacity:.85; transition:opacity .4s, transform 1s var(--ease)}
.yt:hover img{opacity:1; transform:scale(1.03)}
.yt .play{position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px; border-radius:50%; background:rgba(11,11,9,.55); border:1px solid rgba(241,234,220,.5);
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); transition:transform .3s var(--ease), background .3s}
.yt:hover .play{transform:scale(1.08); background:var(--blaze)}
.yt .play::before{content:""; border-left:18px solid var(--bone); border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:5px}
.yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.yt .cap{position:absolute; left:0; right:0; bottom:0; padding:44px 16px 14px; background:linear-gradient(transparent, rgba(0,0,0,.85)); font-family:var(--display); letter-spacing:.06em; text-transform:uppercase; font-size:.9rem; line-height:1.15}
.yt .cap small{display:block; font-family:var(--sans); text-transform:none; letter-spacing:0; color:var(--tan); font-size:.74rem; margin-top:4px}

/* forms */
.field{display:flex; gap:8px; background:var(--coal); border:1px solid var(--line-2); border-radius:999px; padding:6px; max-width:520px}
.field input{flex:1; min-width:0; background:transparent; border:0; color:var(--bone); font:inherit; padding:10px 16px; outline:none}
.field input::placeholder{color:var(--dim)}
.consent{font-size:.74rem; color:var(--dim); max-width:520px; margin-top:12px; line-height:1.5}

/* footer */
.ftr{border-top:1px solid var(--line); padding:70px 0 40px; background:var(--ink)}
.ftr-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.ftr h4{font-family:var(--display); letter-spacing:.24em; text-transform:uppercase; font-size:.74rem; color:var(--tan); margin-bottom:14px; font-weight:500}
.ftr ul{list-style:none; display:flex; flex-direction:column; gap:8px; font-size:.92rem; color:var(--bone-2)}
.ftr a:hover{color:var(--blaze)}
.ftr-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:60px; padding-top:24px; border-top:1px solid var(--line); font-size:.78rem; color:var(--dim)}
.ftr .big{font-family:var(--display); font-size:clamp(3.2rem, 13vw, 11rem); line-height:.85; letter-spacing:.01em; color:var(--coal-2); text-transform:uppercase; margin-top:50px; white-space:nowrap; overflow:hidden; user-select:none}
@media (max-width:900px){ .ftr-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .ftr-grid{grid-template-columns:1fr} }

/* page hero (inner pages) */
.phero{min-height:72vh; display:flex; align-items:flex-end; padding:140px 0 70px; position:relative; overflow:hidden}
.phero .bg{position:absolute; inset:0; z-index:-1}
.phero .bg img{width:100%; height:100%; object-fit:cover; opacity:.45}
.phero .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,9,.3), var(--ink) 92%)}
.phero h1{font-size:clamp(3rem, 9vw, 7.5rem)}
.phero .lede{max-width:40ch; margin-top:20px}

/* grids */
.g2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px, 2.4vw, 32px)}
.g3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 2.4vw, 32px)}
.g4{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(14px, 2vw, 24px)}
@media (max-width:900px){ .g3,.g4{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:620px){ .g2,.g3{grid-template-columns:1fr} .g4{grid-template-columns:repeat(2, minmax(0,1fr))} }

/* draft banner: this whole site is a private preview */
.draft{position:fixed; left:12px; bottom:12px; z-index:60; font-family:var(--display); letter-spacing:.2em; text-transform:uppercase; font-size:.62rem;
  background:rgba(255,106,19,.14); border:1px solid rgba(255,106,19,.45); color:var(--blaze-2); padding:7px 12px; border-radius:999px; backdrop-filter:blur(8px)}

/* grid children may shrink below their content width (stops the signup form pushing phones sideways) */
.g2>*, .g3>*, .g4>*, .ride-grid>*, .now-grid>*, .story-grid>*{min-width:0}
.field{width:100%}
.field .btn{white-space:nowrap; padding:13px 18px}
/* mid-width screens: keep the header on one line */
.brand span, .nav a{white-space:nowrap}
@media (max-width:1180px) and (min-width:901px){ .nav{gap:16px} .nav a{letter-spacing:.12em; font-size:.7rem} .hdr .live{display:none} }