/* ═══════════════════════════════════════════════════════════════
   WAYKOOL — shared site shell
   Tokens, masthead, ticker, buttons, cards, forms and footer used by
   every standalone page (about / bands / merch / events / contact /
   login). Ported 1:1 from the home page (index.php) so the whole site
   reads as one design. Page-specific bits live in each page's own
   <style> block.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:#16130F; --ink-soft:#26211B; --page:#0B0A08; --panel:#0F0D0A;
  --cream:#EDE6D6; --card:#F5F0E4; --amber:#E8A33D; --amber-hot:#F5BC63;
  --brown:#5A4632; --muted:#8A7862; --muted-lite:#A89A86; --teal:#2C5F5A; --red:#C4342A;
  --f-display:'Anton','Arial Narrow',sans-serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --f-data:'IBM Plex Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--cream);font-family:var(--f-body);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%}
a{color:#DCD3BF;text-decoration:none}
a:hover{color:var(--amber)}
::selection{background:var(--amber);color:var(--ink)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--teal);outline-offset:2px}
button{font-family:var(--f-body)}

/* ── keyframes ── */
@keyframes wkfade{from{opacity:0}to{opacity:1}}
@keyframes wkin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ── layout helpers ── */
.wrap{max-width:1180px;margin:0 auto}
.pad{padding-left:22px;padding-right:22px}
.eyebrow{font-family:var(--f-data);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-lite);margin:0 0 12px}
.head{font-family:var(--f-display);font-size:clamp(2rem,5vw,3.2rem);line-height:.95;text-transform:uppercase;margin:0 0 8px;padding-bottom:16px;border-bottom:3px solid var(--amber)}
.section{padding-top:52px;padding-bottom:24px}
.prose{font-size:1.05rem;color:#C7BCA9;max-width:62ch}
.prose p{margin:0 0 18px}
.prose a{color:var(--amber-hot)}
.prose a:hover{color:var(--amber)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;font-weight:600;transition:transform .18s ease;padding:0 24px}
.btn:hover{transform:translate(-2px,-2px)}
.btn-amber{border:2px solid var(--ink);background:var(--amber);color:var(--ink);box-shadow:4px 4px 0 rgba(22,19,15,.9);font-size:15px}
.btn-ghost{border:2px solid var(--cream);background:transparent;color:var(--cream);box-shadow:3px 3px 0 rgba(232,163,61,.35)}

/* ── masthead ── */
header.mast{position:sticky;top:0;z-index:40;background:var(--ink);border-bottom:3px solid var(--amber)}
.mast-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 18px}
.mast-logo img{height:42px;width:auto;display:block}
nav.desk{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:flex-end}
nav.desk a{color:var(--cream);font-family:var(--f-data);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:12px 11px}
nav.desk a:hover,nav.desk a.active{color:var(--amber)}
.login-link{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;margin-left:8px;background:transparent;color:var(--muted-lite);
  border:1px solid rgba(168,154,134,.45);font-weight:600;font-size:12px;font-family:var(--f-data);letter-spacing:.08em;text-transform:uppercase}
.login-link:hover{color:var(--amber);border-color:var(--amber)}
.burger{display:none;align-items:center;justify-content:center;width:48px;height:48px;background:transparent;border:2px solid var(--amber);color:var(--amber);font-size:22px;line-height:1;cursor:pointer;flex-shrink:0}
nav.mobile{display:none;border-top:1px solid rgba(232,163,61,.35);background:var(--ink)}
nav.mobile a{display:block;color:var(--cream);font-family:var(--f-data);font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:16px 22px;border-bottom:1px solid rgba(237,230,214,.12)}
nav.mobile a:hover{color:var(--amber);background:var(--ink-soft)}
nav.mobile a.login{background:var(--amber);color:var(--ink);text-align:center;font-family:var(--f-body);font-size:15px;border-bottom:0}

/* ── ticker ── */
.ticker{position:relative;background:var(--panel);border-top:2px solid #000;border-bottom:2px solid #000;overflow:hidden;padding:12px 0;cursor:grab;touch-action:pan-y;user-select:none}
.ticker .track{display:flex;width:max-content;will-change:transform}
.ticker .seg{display:flex;flex:none;font-family:var(--f-display);font-size:19px;text-transform:uppercase;letter-spacing:.02em;color:var(--amber);white-space:nowrap}
.ticker .seg span{padding:0 26px}
.ticker .seg span.dim{color:#DCD3BF}
.ticker .hint{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--f-data);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6B6058;background:var(--panel);padding:2px 8px;pointer-events:none;transition:opacity .3s}

/* ── page header ── */
.page-hero{background:var(--page);border-bottom:1px solid rgba(237,230,214,.10);padding:clamp(38px,6vw,60px) 0 clamp(26px,4vw,38px)}
.page-hero h1{font-family:var(--f-display);font-size:clamp(2.6rem,7vw,4.6rem);line-height:.9;text-transform:uppercase;margin:6px 0 0}
.page-hero .sub{font-size:clamp(1rem,2.4vw,1.15rem);color:#C7BCA9;max-width:58ch;margin:16px 0 0}
.page-hero .rule{height:3px;background:var(--amber);margin-top:22px}

/* ── generic content sections ── */
.pagebody{padding-top:clamp(30px,5vw,48px);padding-bottom:56px}
.soon{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-data);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
  border:1px solid rgba(232,163,61,.5);padding:6px 12px;border-radius:2px;margin:0 0 20px}
.note{font-family:var(--f-data);font-size:13px;color:#A2968A;border-left:3px solid var(--amber);padding:4px 0 4px 14px;margin:22px 0}

/* ── band + merch cards (ported from home) ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:28px}
.bandcard{border:2px solid var(--ink);background:var(--card);box-shadow:4px 4px 0 rgba(22,19,15,.9);color:var(--ink);display:block}
.bandcard:hover{transform:translate(-2px,-2px);transition:transform .18s ease}
.bandcard .art{aspect-ratio:4/3;position:relative;isolation:isolate}
.bandcard .art .grain{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(22,19,15,.55) 1px,transparent 1.7px);background-size:6px 6px;mix-blend-mode:multiply;opacity:.3}
.bandcard .art .town{position:absolute;left:14px;bottom:12px;font-family:var(--f-data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.bandcard .meta{padding:16px 16px 18px}
.bandcard h3{font-family:var(--f-display);font-size:1.5rem;text-transform:uppercase;line-height:1;margin:0 0 6px}
.bandcard .desc{font-size:13px;color:var(--brown);margin:0}
.bandcard .count{font-family:var(--f-data);font-size:12px;color:var(--muted);margin:10px 0 0}
.addband{border:2px dashed var(--muted);background:transparent;color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;min-height:200px}
.addband:hover{background:var(--card);color:var(--ink);transition:background .18s ease}
.merchcard{border:2px solid var(--ink);background:var(--card);color:var(--ink);box-shadow:4px 4px 0 rgba(22,19,15,.9)}
.merchcard .art{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:1.4rem;text-transform:uppercase;text-align:center;padding:16px}
.merchcard .row{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.merchcard .row .price{font-family:var(--f-data);font-weight:600}

/* ── flow cards (how it works) ── */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:28px}
.flow .cardstep{padding:24px}
.flow .num{font-family:var(--f-display);font-size:2.6rem;line-height:1;margin-bottom:12px}
.flow .steptitle{font-family:var(--f-display);font-size:1.5rem;text-transform:uppercase;line-height:1.02;margin:0 0 10px}
.flow .cardstep p{font-size:.95rem;margin:0}
.step-input{background:var(--ink);color:var(--cream);border:2px solid var(--amber);box-shadow:5px 5px 0 rgba(0,0,0,.6)}
.step-input .num{color:var(--amber)}
.step-input p{color:#DCD3BF}
.step-out{background:var(--card);color:var(--ink);border:2px solid var(--ink);box-shadow:5px 5px 0 rgba(22,19,15,.9)}
.step-out .num{color:var(--ink)}
.step-out p{color:var(--brown)}
.step-label{font-family:var(--f-data);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin:0 0 14px}

/* ── panels / feature grid ── */
.panelgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:rgba(237,230,214,.16);border:1px solid rgba(237,230,214,.16);margin:8px 0 4px}
.panelgrid .cell{background:var(--ink);padding:22px}
.panelgrid .cell .t{font-family:var(--f-display);font-size:1.3rem;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.panelgrid .cell p{font-size:14px;color:#A2968A;margin:0}

/* ── forms ── */
.form{max-width:520px;display:flex;flex-direction:column;gap:16px;margin-top:8px}
.form .field{display:flex;flex-direction:column;gap:6px}
.form label{font-family:var(--f-data);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-lite)}
.form input,.form textarea{width:100%;background:var(--card);color:var(--ink);border:2px solid var(--ink);padding:12px 14px;font-family:var(--f-body);font-size:15px}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form textarea:focus{outline:3px solid var(--teal);outline-offset:2px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formcard{border:2px solid var(--amber);background:var(--ink);box-shadow:5px 5px 0 rgba(0,0,0,.6);padding:26px}
.formnote{font-family:var(--f-data);font-size:12px;color:#A2968A;margin:14px 0 0}

/* ── footer ── */
footer.foot{background:var(--panel);color:#DCD3BF;border-top:1px solid rgba(237,230,214,.14)}
.foot-grid{padding:48px 22px 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px}
.foot-grid .colhead{font-family:var(--f-data);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#6B6058;margin:0 0 14px}
.foot-grid .links{display:flex;flex-direction:column;gap:10px}
.foot-grid .links a{color:#DCD3BF;font-size:14px}
.foot-grid .links a:hover{color:var(--amber)}
.foot-bottom{padding:0 22px 34px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--f-data);font-size:12px;color:#6B6058}

/* ── about band ── */
.about{background:var(--ink);color:var(--cream);border-top:3px solid var(--amber);margin-top:8px}

/* ── responsive ── */
@media(max-width:860px){
  nav.desk{display:none}
  .burger{display:inline-flex}
}
@media(max-width:520px){
  .form .row2{grid-template-columns:1fr}
}