/* ============================================================
   John Maggard — From Hangers to Handlebars.
   Warm Americana: wood, cream, Harley orange. The photo is the star.
   ============================================================ */
:root{
  --wood0:#221710; --wood1:#33241a; --wood2:#4a3525; --cream:#f4e9d6; --tan:#e6d3b3;
  --orange:#f26a21; --orange2:#ffb347; --green:#4e8a5c; --denim:#4a72a8;
  --ink:#f4e9d6; --muted:#c7ad8c; --card:rgba(244,233,214,.06); --brd:rgba(244,233,214,.16);
  --maxw:1040px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:'Oswald',system-ui,sans-serif; color:var(--ink); min-height:100dvh; overflow-x:hidden;
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(242,106,33,.16), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(255,179,71,.10), transparent 55%),
    linear-gradient(170deg, var(--wood0), var(--wood1) 55%, #1c130d),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 3px, transparent 3px 7px);
  background-attachment:fixed; -webkit-font-smoothing:antialiased}
canvas#bg,canvas#fx{position:fixed; inset:0; width:100vw; height:100dvh; z-index:0; pointer-events:none}
canvas#fx{z-index:60}
main{position:relative; z-index:10; max-width:var(--maxw); margin:0 auto; padding:0 18px 90px}

.topbar{position:relative; z-index:20; max-width:var(--maxw); margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; padding:20px 18px 0; gap:10px}
.brand{font-weight:700; letter-spacing:.22em; font-size:.74rem; color:var(--orange2); text-transform:uppercase}
.controls{display:flex; gap:8px}
.chip{font-family:'Oswald',sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.04em; color:var(--ink);
  background:var(--card); border:1px solid var(--brd); border-radius:7px; padding:8px 13px; cursor:pointer; backdrop-filter:blur(6px); transition:.2s}
.chip:hover{border-color:var(--orange); box-shadow:0 0 14px rgba(242,106,33,.35)}
.chip[aria-pressed="true"]{border-color:var(--orange2); color:var(--orange2)}

/* ---------- HERO ---------- */
.hero{text-align:center; padding:26px 0 6px}
.eyebrow{display:inline-block; font-weight:700; letter-spacing:.26em; font-size:.82rem; color:var(--wood0);
  background:linear-gradient(90deg,var(--orange),var(--orange2)); padding:7px 18px; border-radius:4px; text-transform:uppercase;
  box-shadow:0 0 24px rgba(242,106,33,.4)}
.name{font-family:'Alfa Slab One',serif; font-weight:400; font-size:clamp(2.6rem,10vw,5.4rem); line-height:.95;
  margin:.2em 0 .02em; color:var(--cream); letter-spacing:.01em; text-shadow:0 4px 0 rgba(0,0,0,.35), 0 0 40px rgba(242,106,33,.3)}
.script{font-family:'Kaushan Script',cursive; font-size:clamp(1.4rem,5vw,2.4rem); color:var(--orange2); margin:.1em 0 -.1em; transform:rotate(-2deg)}
.tagline{font-family:'Alfa Slab One',serif; font-weight:400; font-size:clamp(1.8rem,7.5vw,4rem); line-height:1; margin:.1em 0 0;
  color:var(--orange); text-shadow:0 3px 0 rgba(0,0,0,.4), 0 0 30px rgba(242,106,33,.4); -webkit-text-stroke:1px rgba(0,0,0,.25)}

/* THE PHOTO — the star of the show */
.hero-photo{margin:26px auto 0; max-width:920px; padding:10px; border-radius:14px;
  background:linear-gradient(160deg, var(--wood2), var(--wood1));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 4px rgba(242,106,33,.35)}
.hero-photo img{display:block; width:100%; height:auto; border-radius:9px; box-shadow:0 6px 20px rgba(0,0,0,.5)}
.subtitle{font-size:clamp(1.05rem,3.6vw,1.4rem); color:var(--muted); margin:18px 0 0; letter-spacing:.02em; font-weight:400}
.subtitle b{color:var(--cream)}

/* ---------- COUNTDOWN ---------- */
.counter-wrap{margin:40px auto 0; max-width:760px; text-align:center}
.counter-label{font-weight:700; letter-spacing:.2em; font-size:.84rem; color:var(--orange2); margin-bottom:14px; text-transform:uppercase}
.counter{display:flex; align-items:stretch; justify-content:center; gap:clamp(6px,1.6vw,16px); flex-wrap:nowrap}
.unit{flex:1 1 0; max-width:170px; text-align:center; background:linear-gradient(180deg, rgba(74,53,37,.7), rgba(34,23,16,.8));
  border:1px solid var(--brd); border-radius:14px; padding:clamp(12px,2.4vw,22px) 6px;
  box-shadow:0 10px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06)}
.num{font-family:'Alfa Slab One',serif; font-weight:400; font-variant-numeric:tabular-nums; line-height:1;
  font-size:clamp(2rem,8.5vw,4.6rem); color:var(--cream); text-shadow:0 0 26px rgba(255,179,71,.5)}
.lab{margin-top:8px; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.sep{display:flex; align-items:center; font-family:'Alfa Slab One',serif; font-size:clamp(1.4rem,5vw,3rem); color:var(--orange); opacity:.5}
.num.tick{animation:pop .5s ease}
@keyframes pop{0%{transform:translateY(-5px) scale(1.1); color:var(--orange2)}100%{transform:none}}
.cta-row{margin:26px 0 0}
.btn-rev{font-family:'Alfa Slab One',serif; font-weight:400; font-size:1.05rem; color:var(--wood0); letter-spacing:.02em;
  background:linear-gradient(180deg,var(--orange2),var(--orange)); border:0; border-radius:999px; padding:15px 32px; cursor:pointer;
  text-transform:uppercase; box-shadow:0 0 30px rgba(242,106,33,.5); transition:transform .14s}
.btn-rev:hover{transform:translateY(-2px) scale(1.03)} .btn-rev:active{transform:scale(.96)}

/* ---------- PROGRESS ---------- */
.progress-wrap{max-width:760px; margin:40px auto 0}
.progress-head{display:flex; justify-content:space-between; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.progress-head span:last-child{color:var(--orange2)}
.progress-track{position:relative; height:20px; border-radius:999px; background:rgba(0,0,0,.3); border:1px solid var(--brd); overflow:visible}
.progress-fill{height:100%; width:0%; border-radius:999px; background:repeating-linear-gradient(45deg,var(--orange) 0 14px,var(--orange2) 14px 28px);
  box-shadow:0 0 16px rgba(242,106,33,.5); transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.progress-bike{position:absolute; top:50%; left:0; transform:translate(-50%,-60%) scaleX(-1); font-size:1.6rem; transition:left 1.2s cubic-bezier(.2,.8,.2,1); filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}

/* ---------- chapters / what's next ---------- */
.sect-title{font-family:'Alfa Slab One',serif; font-weight:400; text-align:center; color:var(--cream);
  font-size:clamp(1.7rem,6vw,2.6rem); margin:0 0 .5em; text-shadow:0 0 30px rgba(242,106,33,.25)}
.chapters{margin:54px auto 0; max-width:980px}
.chapters.next .ch-name{color:var(--orange2)}
.chapter-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.chapter{background:var(--card); border:1px solid var(--brd); border-radius:14px; padding:22px 20px; text-align:center; backdrop-filter:blur(7px); transition:.22s}
.chapter:hover{transform:translateY(-4px); border-color:var(--orange); box-shadow:0 14px 34px rgba(0,0,0,.4)}
.ch-emoji{font-size:2.4rem}
.ch-name{font-family:'Alfa Slab One',serif; font-weight:400; font-size:1.1rem; color:var(--cream); margin:.3em 0 .5em; letter-spacing:.01em}
.chapter p{font-size:.96rem; line-height:1.5; color:var(--muted); margin:0}
.ch-foot{text-align:center; font-family:'Kaushan Script',cursive; font-size:clamp(1.3rem,4.5vw,2rem); color:var(--orange2); margin:1em 0 0}
.ch-foot b{color:var(--cream); font-family:inherit}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px; margin:54px auto; max-width:940px}
.stat{background:var(--card); border:1px solid var(--brd); border-radius:14px; padding:18px 14px; text-align:center; backdrop-filter:blur(7px); transition:.2s}
.stat:hover{transform:translateY(-3px); border-color:var(--orange)}
.stat .emoji{font-size:1.7rem}
.stat .big{font-family:'Alfa Slab One',serif; font-weight:400; font-size:1.8rem; color:var(--orange2); margin:.1em 0; font-variant-numeric:tabular-nums; text-shadow:0 0 16px rgba(255,179,71,.3)}
.stat .cap{font-size:.82rem; color:var(--muted); line-height:1.3; text-transform:uppercase; letter-spacing:.03em}

/* ---------- guestbook ---------- */
.wishes{max-width:760px; margin:58px auto 0}
.wishes-sub{text-align:center; color:var(--muted); margin:.2em 0 1.3em}
.wishes-sub span{color:var(--orange2)}
.wish-form{background:var(--card); border:1px solid var(--brd); border-radius:14px; padding:18px; backdrop-filter:blur(8px)}
.wish-name,.wish-msg{width:100%; font-family:'Oswald',sans-serif; color:var(--ink); background:rgba(0,0,0,.3); border:1px solid var(--brd); border-radius:8px; padding:11px 13px; font-size:1rem; margin-bottom:10px; resize:vertical}
.wish-name:focus,.wish-msg:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(242,106,33,.2)}
.wish-msg{min-height:80px}
.wish-actions{display:flex; align-items:center; justify-content:space-between}
.wish-counter{font-size:.74rem; color:var(--muted)}
.btn-post{font-family:'Alfa Slab One',serif; font-weight:400; font-size:.9rem; color:var(--wood0); background:linear-gradient(180deg,var(--orange2),var(--orange)); border:0; border-radius:999px; padding:11px 22px; cursor:pointer; text-transform:uppercase}
.btn-post:hover{filter:brightness(1.05)} .btn-post:disabled{opacity:.5}
.wish-status{font-size:.84rem; margin-top:8px; min-height:1.1em; color:var(--orange2)}
.wish-status.err{color:#ff8a5b}
.wish-wall{margin-top:22px; columns:2; column-gap:14px}
@media (max-width:560px){.wish-wall{columns:1}}
.wish-card{break-inside:avoid; margin:0 0 14px; padding:14px 16px; border-radius:12px; animation:rise .5s ease both;
  background:var(--card); border:1px solid var(--brd); border-left:4px solid var(--orange)}
@keyframes rise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.wish-card .msg{font-size:1rem; line-height:1.45}
.wish-card .who{margin-top:8px; font-size:.84rem; color:var(--orange2); font-weight:700}
.wish-card .when{color:var(--muted); font-weight:400}
.foot{text-align:center; color:var(--muted); margin-top:54px; font-size:.85rem; letter-spacing:.04em}

/* ---------- finale ---------- */
.retired-overlay{position:fixed; inset:0; z-index:80; display:grid; place-items:center; background:radial-gradient(closest-side,rgba(40,28,18,.55),rgba(20,13,8,.95))}
.retired-overlay[hidden]{display:none}
.retired-card{text-align:center; padding:28px}
.stamp{font-family:'Alfa Slab One',serif; font-weight:400; font-size:clamp(3rem,15vw,8rem); color:var(--orange);
  border:.12em solid var(--orange); border-radius:14px; padding:.06em .22em; transform:rotate(-7deg); display:inline-block;
  text-shadow:0 0 30px rgba(242,106,33,.5); box-shadow:0 0 44px rgba(242,106,33,.35); letter-spacing:.02em}
.retired-sub{font-size:1.25rem; color:var(--cream); margin:1em 0 1.1em}

@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }