@font-face{
  font-family:'Handel Gothic';
  src:url('fonts/handelgothic.woff2') format('woff2'),
      url('fonts/handelgothic.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
:root{
  --bg:#0e0e11;
  --surface:#17171c;
  --surface-2:#1f1f26;
  --border:#2b2b34;
  --text:#f3f3f5;
  --muted:#9a9aa6;
  --gold:#e6a63c;
  --gold-dark:#c98a24;
  --blue:#2472ad;      /* The Blue Boar */
  --blue-light:#3f8fce;
  --danger:#d1495b;
  --ok:#4caf7d;
  --radius:14px;
  --radius-sm:10px;
  --maxw:620px;
  --shadow:0 6px 24px rgba(0,0,0,.35);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Handel Gothic',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--gold)}
button{font-family:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.wrap-wide{max-width:900px;margin:0 auto;padding:0 16px}

/* ---------- Typography ---------- */
.display{
  font-family:var(--font-display);
  font-weight:400;letter-spacing:.01em;text-transform:uppercase;
  line-height:1.02;margin:0;
}
h1.display{font-size:clamp(30px,7vw,52px)}
h2.section-title{
  font-family:var(--font-display);
  font-weight:400;text-transform:uppercase;letter-spacing:.06em;
  font-size:14px;color:var(--gold);margin:0 0 10px;
}
.lead{color:var(--muted);font-size:17px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  font-weight:700;font-size:16px;padding:13px 22px;transition:.15s;
  min-height:48px;
}
.btn-gold{background:var(--gold);color:#1a1204}
.btn-gold:hover{background:var(--gold-dark)}
.btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-block{width:100%}
.btn-lg{font-size:18px;padding:16px 26px;min-height:56px}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ---------- Site header (logos) ---------- */
.masthead{padding:26px 0 8px;text-align:center}
.route{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:0 auto 18px;flex-wrap:wrap;
}
.logo-rock{height:62px;width:auto}
.logo-boar{height:92px;width:auto}
.route .arrow{color:var(--gold);font-size:26px;font-weight:800}
.venue-line{color:var(--muted);font-size:15px;margin-top:2px}
.venue-line strong{color:var(--text)}

/* topbar for live page */
.topbar{
  position:sticky;top:0;z-index:40;background:rgba(14,14,17,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border);
}
.topbar-inner{display:flex;align-items:center;gap:12px;padding:10px 16px;max-width:var(--maxw);margin:0 auto}
.topbar .mini-logos{display:flex;align-items:center;gap:8px}
.topbar .mini-logos img{height:30px;width:auto;background:#000;border-radius:6px}
.topbar h1{font-size:15px;margin:0;text-transform:uppercase;letter-spacing:.03em;font-weight:400;font-family:var(--font-display);line-height:1.1}
.topbar .spacer{flex:1}
.tag{font-size:11px;color:var(--muted)}

/* ---------- Cards / panels ---------- */
.panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;margin:16px 0;
}
.panel.gold-edge{border-color:rgba(230,166,60,.4)}

/* ---------- Fundraising bar ---------- */
.thermo{margin:14px 0 4px}
.thermo .amounts{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.thermo .amounts .raised{color:var(--gold);font-weight:800;font-size:18px}
.thermo .amounts .target{color:var(--muted)}
.thermo .track{height:14px;background:var(--surface-2);border-radius:999px;overflow:hidden;border:1px solid var(--border)}
.thermo .fill{height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold));border-radius:999px;transition:width .6s}

/* ---------- Public page sections ---------- */
.hero{padding:8px 0 4px;text-align:center}
.hero .sub{color:var(--muted);font-size:18px;margin:10px 0 18px}
.hero .cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.facts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:18px 0 6px}
.fact{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-size:14px}
.fact b{display:block;color:var(--gold);font-size:15px}

.memory{border-left:3px solid var(--gold);background:var(--surface);padding:16px 18px;border-radius:0 var(--radius) var(--radius) 0;margin:16px 0}
.memory h2{margin:0 0 6px;font-size:20px;font-family:var(--font-display);font-weight:400}
.memory p{margin:0;color:#dcdce2}

.lastyear figure{margin:0}
.lastyear img{border-radius:var(--radius);border:1px solid var(--border)}
.lastyear figcaption{color:var(--muted);font-size:13px;margin-top:8px;text-align:center}

.charity-note{color:#cfcfd6;font-size:15px}
.charity-note .reg{color:var(--muted);font-size:13px}

.divider{height:1px;background:var(--border);margin:26px 0}

/* ---------- Gate (passcode) ---------- */
.gate{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.gate .card{max-width:420px;width:100%;text-align:center}
.gate .badge{margin:0 auto 8px}
.gate p{color:var(--muted)}
.field{margin:12px 0}
.field label{display:block;text-align:left;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:600}
input[type=text],input[type=password],textarea{
  width:100%;background:var(--surface-2);border:1.5px solid var(--border);
  color:var(--text);border-radius:var(--radius-sm);padding:14px;
  font-size:16px;/* 16px stops iOS zooming on focus */
}
input:focus,textarea:focus{outline:0;border-color:var(--gold)}
textarea{resize:vertical;min-height:64px}
.err{color:var(--danger);font-size:14px;margin-top:8px}
.hint{color:var(--muted);font-size:13px}

/* ---------- Upload panel (live) ---------- */
.uploader{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:16px 0}
.uploader h2{margin:0 0 12px;font-size:16px;text-transform:uppercase;letter-spacing:.04em;font-family:var(--font-display);font-weight:400}
.pick{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  border:2px dashed var(--border);border-radius:var(--radius-sm);
  padding:22px;text-align:center;cursor:pointer;color:var(--muted);
  transition:.15s;
}
.pick:hover,.pick.drag{border-color:var(--gold);color:var(--text);background:rgba(230,166,60,.05)}
.pick .big{font-size:28px}
.pick input{display:none}
.previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin:12px 0}
.previews .thumb{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.previews .thumb img{width:100%;height:100%;object-fit:cover}
.previews .thumb .rm{
  position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,.7);color:#fff;border:0;cursor:pointer;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.progress{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin:10px 0;display:none}
.progress .bar{height:100%;width:0;background:var(--gold);transition:width .2s}
.upload-msg{font-size:14px;margin-top:8px;min-height:1.2em}
.upload-msg.ok{color:var(--ok)}
.upload-msg.bad{color:var(--danger)}

/* ---------- Feed ---------- */
.feed-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 6px}
.feed-head h2{font-size:16px;text-transform:uppercase;letter-spacing:.04em;margin:0;font-family:var(--font-display);font-weight:400}
.live-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.live-dot i{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.chips{display:flex;gap:8px;overflow-x:auto;padding:8px 0 4px;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;background:var(--surface-2);border:1px solid var(--border);
  color:var(--muted);border-radius:999px;padding:7px 14px;font-size:14px;cursor:pointer;white-space:nowrap;
}
.chip.active{background:var(--gold);color:#1a1204;border-color:var(--gold);font-weight:700}

.feed{display:flex;flex-direction:column;gap:16px;margin:10px 0 30px}
.post{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;animation:fadein .4s}
.post.new{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.post .head{display:flex;align-items:center;gap:10px;padding:12px 14px}
.post .avatar{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0}
.post .who{font-weight:700;font-size:15px;line-height:1.2}
.post .when{color:var(--muted);font-size:12px}
.post .head .spacer{flex:1}
.post .del{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:5px 9px;font-size:12px;cursor:pointer}
.post .del:hover{border-color:var(--danger);color:var(--danger)}
.post .media{display:grid;gap:2px;background:#000}
.post .media.n1{grid-template-columns:1fr}
.post .media.n2{grid-template-columns:1fr 1fr}
.post .media.n3,.post .media.n4{grid-template-columns:1fr 1fr}
.post .media img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;background:#000}
.post .media.n1 img{max-height:75vh;object-fit:contain}
.post .media.n3 img:first-child{grid-column:1 / span 2}
.post .media .more{position:relative}
.post .media .more span{position:absolute;inset:0;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;pointer-events:none}
.post .cap{padding:12px 14px;color:#e7e7ec;font-size:15px;white-space:pre-wrap;word-wrap:break-word}
.post .cap:empty{display:none}

.empty{text-align:center;color:var(--muted);padding:36px 16px;border:1px dashed var(--border);border-radius:var(--radius)}
.loadmore{display:block;margin:6px auto 30px}
.spinner{width:22px;height:22px;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;margin:20px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);display:none;flex-direction:column}
.lightbox.open{display:flex}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-y}
.lb-stage img{max-width:100vw;max-height:82vh;object-fit:contain}
.lb-cap{padding:12px 18px;color:#eaeaea;font-size:15px;text-align:center;max-width:700px;margin:0 auto}
.lb-close{position:absolute;top:12px;right:14px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;border:0;font-size:22px;cursor:pointer;z-index:2}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;border:0;font-size:26px;cursor:pointer;z-index:2}
.lb-prev{left:10px}.lb-next{right:10px}
.lb-count{position:absolute;top:18px;left:0;right:0;text-align:center;color:#bbb;font-size:13px}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:12px 18px;border-radius:999px;box-shadow:var(--shadow);opacity:0;transition:.25s;z-index:120;font-size:15px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--border);margin-top:30px;padding:24px 0 40px;text-align:center;color:var(--muted);font-size:13px}
footer a{color:var(--muted)}
footer .rock{color:var(--text)}

/* ---------- Setup warning ---------- */
.setup{background:#3a2a12;border:1px solid var(--gold-dark);color:#ffe9c7;padding:14px 16px;border-radius:var(--radius);margin:16px auto;max-width:var(--maxw)}
.setup ul{margin:8px 0 0;padding-left:20px}

@media(min-width:560px){
  .post .media.n1 img{max-height:70vh}
}


/* ---------- transparent logos ---------- */
.topbar .mini-logos img{height:30px;width:auto;background:none;border-radius:0}
.topbar .mini-logos img:last-child{height:36px}

/* ---------- walker call to action ---------- */
.walkerbox{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  background:linear-gradient(135deg,rgba(230,166,60,.16),rgba(230,166,60,.06));
  border:1.5px solid var(--gold);border-radius:var(--radius);
  padding:16px 18px;margin:20px 0;color:var(--text);transition:.15s;
}
.walkerbox:hover{background:rgba(230,166,60,.22)}
.walkerbox .wb-icon{font-size:28px;line-height:1}
.walkerbox strong{display:block;font-size:17px;color:var(--gold)}
.walkerbox span{font-size:14px;color:var(--muted)}
.walkerbox .wb-arrow{margin-left:auto;font-size:22px;color:var(--gold)}

/* ---------- text to donate ---------- */
.textdonate{
  border:1px dashed var(--border);border-radius:var(--radius);
  padding:14px 16px;margin:16px 0 4px;text-align:center;
}
.textdonate .td-main{font-size:17px;color:var(--text)}
.textdonate .td-main strong{color:var(--gold);letter-spacing:.02em}
.textdonate .td-small{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}

/* ---------- story / charity ---------- */
.memory p+p{margin-top:10px}
.joke{color:var(--muted);font-style:italic;margin-top:10px}
.charity .loros-logo{max-width:210px;margin:0 0 12px}
.nick-footer{max-width:170px;margin:0 auto 14px;opacity:.95}

/* ---------- misc ---------- */
.btn-sm{padding:7px 14px;min-height:0;font-size:14px}
.share-row{margin:14px 0 4px}


/* ---------- camera / library picker buttons ---------- */
.pickrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 10px}
.pickbtn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--surface-2);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:16px 10px;cursor:pointer;
  color:var(--text);transition:.15s;min-height:96px;justify-content:center;
}
.pickbtn:hover,.pickbtn:active{border-color:var(--gold);background:rgba(230,166,60,.08)}
.pickbtn .pb-icon{font-size:26px;line-height:1}
.pickbtn strong{font-size:15px}
.pickbtn .pb-sub{font-size:12px;color:var(--muted);text-align:center;line-height:1.3}
.pick-drop{padding:12px;margin-bottom:8px}
.pick-drop .hint{margin:0}
@media (max-width:420px){
  .pickbtn{min-height:86px;padding:13px 8px}
  .pickbtn strong{font-size:14px}
}
/* drag-and-drop target is pointless on phones */
@media (hover:none){ .pick-drop{display:none} }


/* ---------- compact masthead (journal-first layout) ---------- */
.masthead.compact{padding:20px 0 6px}
.masthead.compact .route{margin-bottom:12px}
.masthead.compact .logo-rock{height:52px}
.masthead.compact .logo-boar{height:76px}
.masthead.compact h1.display{font-size:clamp(26px,6.4vw,42px)}
.one-liner{
  text-align:center;color:#dcdce2;font-size:16px;line-height:1.5;
  max-width:520px;margin:12px auto 0;
}
.one-liner.sub{color:var(--muted);font-size:14.5px;margin-top:6px}
.masthead.compact .cta-row{margin-top:16px}
.td-inline{
  text-align:center;color:var(--muted);font-size:14px;margin:12px 0 0;
}
.td-inline strong{color:var(--gold)}

/* ---------- journal ---------- */
.journal{margin-top:20px}
.journal .feed-head{margin-top:6px}
.journal .feed-head h2{font-size:19px}
.journal .hint{margin-top:0}
.lastyear figure{margin:14px 0 0}


/* ---------- topbar fix: stop logos/title colliding ---------- */
.topbar-inner{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;max-width:var(--maxw);margin:0 auto;
}
.topbar .mini-logos{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.topbar .mini-logos img{height:26px;width:auto;flex:0 0 auto}
.topbar .mini-logos img:last-child{height:32px}
.topbar-inner > div:nth-child(2){min-width:0;flex:1 1 auto}
.topbar h1{
  font-size:13.5px;margin:0;text-transform:uppercase;letter-spacing:.02em;
  font-weight:400;font-family:var(--font-display);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar .tag{
  font-size:11px;color:var(--muted);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar .spacer{display:none}
.topbar .btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:400px){
  .topbar h1{font-size:12.5px}
  .topbar .mini-logos img{height:22px}
  .topbar .mini-logos img:last-child{height:27px}
  .topbar .btn-sm{padding:6px 10px;font-size:13px}
}


/* ---------- share progress ---------- */
.share-row{margin:16px 0 6px}
.share-hint{
  text-align:center;color:var(--muted);font-size:12.5px;
  margin:8px 4px 0;line-height:1.4;
}


/* ---------- route map ---------- */
.routemap{margin-top:24px}
.routemap .feed-head h2{font-size:19px}
.map-link{font-size:14px;color:var(--gold);text-decoration:none;white-space:nowrap}
.map-link:hover{text-decoration:underline}
.map-frame{
  position:relative;width:100%;aspect-ratio:4/3;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:var(--surface);
}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (min-width:600px){ .map-frame{aspect-ratio:16/10} }