/* Butte Bouldering Bash — shared theme.
   Colors follow montanabouldering.com (Blogger "Awesome Inc.": black page,
   #141414 panels, white text). Red is the SMCC logo. Headings echo the
   flyer's heavy condensed oblique. */

:root{
  --bg:#000;
  --panel:#141414;
  --panel-2:#1c1c1c;
  --rule:#2a2a2a;
  --text:#fff;
  --text-soft:#a8a8a8;
  --link:#d0d0d0;
  --red:#d42e06;
  --red-deep:#a82405;
  --ok:#5aa66e;
  --warn:#e2932a;
  --measure:62ch;
  --display:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:Arial,Helvetica,"Helvetica Neue",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 17px/1.6 var(--body);
}
.wrap{max-width:1040px;margin:0 auto;padding:clamp(28px,5vw,64px) clamp(20px,5vw,40px)}

/* ---- type ------------------------------------------------------------ */
h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1;
  margin:0;
}
h1{font-size:clamp(40px,8vw,74px)}
h2{font-size:26px;margin:2em 0 .5em}
h2:first-child{margin-top:0}
p{margin:0 0 1em}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--text)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:2px}
code{color:var(--text-soft);font-size:13px}
.soft{color:var(--text-soft)}

/* ---- masthead -------------------------------------------------------- */
.masthead{
  display:grid;grid-template-columns:1fr;gap:24px;align-items:end;
  border-bottom:2px solid var(--text);padding-bottom:20px;margin-bottom:clamp(28px,5vw,48px);
}
@media(min-width:720px){.masthead{grid-template-columns:1fr 300px}}
.kicker{
  font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:16px;letter-spacing:.04em;color:var(--red);margin:0 0 8px;
}
.when{margin:12px 0 0;font-size:17px;color:var(--text-soft)}
.art{width:100%;height:auto;display:block;max-width:360px;justify-self:center;
     mix-blend-mode:screen;user-select:none}
@media(min-width:720px){.art{justify-self:end}}

/* ---- layout ---------------------------------------------------------- */
.cols{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,56px)}
@media(min-width:880px){.cols{grid-template-columns:1fr 400px;align-items:start}}
.prose{max-width:var(--measure)}
.prose ul{padding-left:1.2em;margin:0 0 1em}
.prose li{margin:0 0 .35em}

dl.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 20px;font-size:16px}
dl.facts dt{color:var(--text-soft)}
dl.facts dd{margin:0}

/* ---- panel (the site's .widget box) ---------------------------------- */
.panel{
  background:var(--panel);
  border:1px solid var(--rule);
  border-top:4px solid var(--red);
  padding:28px 26px 26px;
}
.panel.warn{border-top-color:var(--warn)}
.panel.ok{border-top-color:var(--ok)}
.panel h2{margin:0 0 4px;font-size:30px}
.panel .lead{font-size:15px;color:var(--text-soft);margin:0 0 22px}
.sticky{position:sticky;top:24px}
@media(max-width:879px){.sticky{position:static}}

/* ---- steps ------------------------------------------------------------ */
ol.steps{list-style:none;counter-reset:s;margin:0 0 24px;padding:0}
ol.steps li{counter-increment:s;position:relative;padding:0 0 16px 42px;font-size:15.5px;line-height:1.5}
ol.steps li:last-child{padding-bottom:0}
ol.steps li::before{
  content:counter(s);
  position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;
  background:var(--red);color:#fff;
  font:700 14px/1 var(--display);display:grid;place-items:center;
}
ol.steps li::after{content:"";position:absolute;left:13px;top:29px;bottom:6px;width:1px;background:var(--rule)}
ol.steps li:last-child::after{display:none}
ol.steps b{display:block;font-weight:700}
ol.steps span{color:var(--text-soft)}

/* ---- buttons / inputs ------------------------------------------------- */
.btn,button{
  display:inline-block;
  background:var(--red);color:#fff;
  border:1px solid var(--red);border-radius:0;
  font:700 18px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;
  padding:14px 20px;text-align:center;text-decoration:none;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.btn.block{display:block;width:100%;padding:17px 20px;font-size:21px}
.btn.block+.btn.block{margin-top:10px}
.btn:hover,button:hover,.btn:focus-visible,button:focus-visible{background:var(--red-deep);border-color:var(--red-deep);color:#fff}
button.ghost{background:transparent;color:var(--text);border-color:var(--rule)}
button.ghost:hover{background:var(--panel-2);border-color:var(--text-soft)}
input[type=search],input[type=text]{
  background:var(--bg);color:var(--text);
  border:1px solid var(--rule);border-radius:0;padding:9px 10px;
  font:inherit;font-size:15px;min-width:11rem;
}
input::placeholder{color:var(--text-soft)}
.note{font-size:13.5px;color:var(--text-soft);margin:14px 0 0;line-height:1.45}
.resume{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--rule);font-size:14px}

/* ---- pills / table (roster) ------------------------------------------- */
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pill.ok{background:#173d24;color:#8fd3a3}
.pill.owes{background:#42260a;color:#f0b35a}
table{width:100%;border-collapse:collapse}
td,th{text-align:left;padding:12px 18px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-size:13px;font-weight:700;color:var(--text-soft);text-transform:uppercase;letter-spacing:.04em}
tr.in{background:var(--panel-2)}
.empty{color:var(--text-soft);padding:40px 18px;text-align:center}

/* ---- centered single-panel pages (done, paused) ----------------------- */
body.center{display:grid;place-items:center;min-height:100dvh;padding:24px}
body.center main{max-width:34rem;width:100%}
body.center h1{font-size:clamp(32px,6vw,44px);margin:0 0 12px}
body.center ul{margin:0 0 1em;padding-left:1.1em;color:var(--text-soft);font-size:15.5px}

/* ---- footer ----------------------------------------------------------- */
footer{margin-top:clamp(40px,7vw,80px);padding-top:18px;border-top:1px solid var(--rule);font-size:14px;color:var(--text-soft)}
footer a{color:inherit}

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