/* USA Bonspiel Calendar — static site styles */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none!important}

:root{
  --ice:#eef3f6;
  --ground:#e7eef2;
  --surface:#ffffff;
  --surface-2:#f5f9fb;
  --ink:#0e1e29;
  --ink-2:#3c5666;
  --muted:#6d8798;
  --hair:#cfdde5;
  --hair-soft:#e2ebf0;
  --house-red:#c8102e;
  --house-blue:#1f6fb2;
  --accent:var(--house-red);
  --t-open:#5b7f93;
  --t-men:#1f6fb2;
  --t-women:#c8102e;
  --t-mixed:#7a4fa3;
  --t-junior:#2e8b57;
  --t-under:#b8730c;
  --t-senior:#0d7d80;
  --t-college:#4457b8;
  --t-other:#7b8a94;
  --shadow:0 1px 2px rgba(14,30,41,.06),0 8px 24px -18px rgba(14,30,41,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ice:#0a141b;--ground:#0a141b;--surface:#111f29;--surface-2:#16262f;
    --ink:#e6eef3;--ink-2:#b3c6d1;--muted:#8199a8;
    --hair:#253a47;--hair-soft:#1c2d38;
    --house-red:#f2607a;--house-blue:#5fa8e0;--accent:var(--house-red);
    --t-open:#8fb0c2;--t-men:#5fa8e0;--t-women:#f2607a;--t-mixed:#b28ad6;
    --t-junior:#5fbd8b;--t-under:#e3a martinez;--t-under:#e0a53f;--t-senior:#41b8b8;
    --t-college:#8b98e8;--t-other:#93a5b0;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ice:#0a141b;--ground:#0a141b;--surface:#111f29;--surface-2:#16262f;
  --ink:#e6eef3;--ink-2:#b3c6d1;--muted:#8199a8;
  --hair:#253a47;--hair-soft:#1c2d38;
  --house-red:#f2607a;--house-blue:#5fa8e0;--accent:var(--house-red);
  --t-open:#8fb0c2;--t-men:#5fa8e0;--t-women:#f2607a;--t-mixed:#b28ad6;
  --t-junior:#5fbd8b;--t-under:#e0a53f;--t-senior:#41b8b8;
  --t-college:#8b98e8;--t-other:#93a5b0;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -20px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px 80px}

/* ---------- masthead ---------- */
header.mast{padding:44px 0 26px;border-bottom:2px solid var(--ink)}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px
}
h1{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:800;
  font-size:clamp(34px,6.4vw,62px);line-height:.94;letter-spacing:-.028em;
  margin:0;text-wrap:balance;text-transform:uppercase;
}
h1 .thin{font-weight:400;color:var(--ink-2)}
.blurb{margin:16px 0 0;max-width:60ch;color:var(--ink-2);font-size:16px}

/* house rings — the only ornament */
.rings{float:right;width:74px;height:74px;margin:2px 0 8px 22px;flex:none}

/* ---------- summary strip ---------- */
.strip{
  display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--hair);
  background:var(--surface);margin-top:0;
}
.stat{padding:14px 22px 13px;border-right:1px solid var(--hair-soft);flex:1 1 auto;min-width:120px}
.stat:last-child{border-right:0}
.stat b{
  display:block;font-family:"Archivo",sans-serif;font-weight:800;font-size:26px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1
}
.stat span{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-top:3px
}

/* ---------- controls ---------- */
.controls{
  position:sticky;top:0;z-index:20;background:var(--surface);
  border-bottom:1px solid var(--hair);box-shadow:var(--shadow);
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 22px;
}
.field{position:relative;display:flex;align-items:center}
input[type="search"],select{
  font:inherit;font-size:14px;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--hair);border-radius:2px;padding:8px 11px;
  appearance:none;-webkit-appearance:none;
}
input[type="search"]{width:230px;padding-left:30px}
.field svg{position:absolute;left:9px;pointer-events:none;color:var(--muted)}
select{padding-right:30px;background-image:none;cursor:pointer}
.selwrap{position:relative;display:inline-flex;align-items:center}
.selwrap::after{
  content:"";position:absolute;right:11px;pointer-events:none;
  border:4px solid transparent;border-top-color:var(--muted);margin-top:4px
}
input:focus-visible,select:focus-visible,button:focus-visible{
  outline:2px solid var(--house-blue);outline-offset:1px
}
.toggle{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--hair);border-radius:2px;padding:8px 12px;
}
.toggle[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.count{
  margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap
}
.count b{color:var(--ink);font-weight:600}

/* ---------- list ---------- */
.month{
  display:flex;align-items:baseline;gap:12px;
  padding:30px 22px 9px;background:var(--ground);
}
.month h2{
  font-family:"Archivo",sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;font-size:15px;margin:0;color:var(--ink)
}
.month .rule{flex:1;height:1px;background:var(--hair)}
.month em b{font-weight:500;color:var(--ink-2)}
.month em{
  font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--muted);font-variant-numeric:tabular-nums
}

ol.list{list-style:none;margin:0;padding:0;background:var(--surface);border-block:1px solid var(--hair)}
li.spiel{
  display:grid;grid-template-columns:104px 1fr auto;gap:0 18px;align-items:baseline;
  padding:13px 22px;border-bottom:1px solid var(--hair-soft);
}
li.spiel:last-child{border-bottom:0}
li.spiel:hover{background:var(--surface-2)}

.when{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap;
  border-left:3px solid var(--dot,var(--t-open));padding-left:10px;line-height:1.35
}
.when small{display:block;font-size:10px;letter-spacing:.08em;color:var(--muted);font-weight:400}

.what .nm{font-weight:600;font-size:15.5px;letter-spacing:-.005em;color:var(--ink)}
.what .where{
  display:block;font-size:13px;color:var(--muted);margin-top:2px
}
.what .where b{font-weight:500;color:var(--ink-2)}

a.nm,a.clublink{
  color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .12s,color .12s
}
a.nm{border-bottom-color:var(--hair)}
a.nm:hover,a.nm:focus-visible{color:var(--house-red);border-bottom-color:var(--house-red)}
a.clublink:hover,a.clublink:focus-visible{color:var(--house-blue);border-bottom-color:var(--house-blue)}
a.nm:focus-visible,a.clublink:focus-visible{outline:2px solid var(--house-blue);outline-offset:2px;border-radius:1px}
.ext{
  display:inline-block;margin-left:5px;font-size:10px;line-height:1;color:var(--muted);
  vertical-align:1px;transition:color .12s
}
a.nm:hover .ext{color:var(--house-red)}
.ext.approx{opacity:.55}

.tag{
  justify-self:end;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--dot,var(--t-open));flex:none}
.tag i.split{background:linear-gradient(90deg,var(--t-men) 0 50%,var(--t-women) 50% 100%)}

/* annual (expected, not yet dated) rows */
li.spiel.annual .when{border-left-style:dashed;color:var(--muted)}
li.spiel.annual .what .nm{font-weight:500;color:var(--ink-2)}
.pill{
  display:inline-block;margin-left:7px;padding:1px 6px 2px;border-radius:2px;
  border:1px dashed var(--hair);color:var(--muted);background:transparent;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;vertical-align:1px;font-weight:500;white-space:nowrap
}
.hist{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;font-family:"IBM Plex Mono",monospace}

.empty{padding:60px 22px;text-align:center;color:var(--muted);background:var(--surface)}
.empty p{margin:0 0 6px}

/* ---------- footer ---------- */
footer{margin-top:38px;padding-top:22px;border-top:1px solid var(--hair);color:var(--muted);font-size:13px}
footer h3{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 8px;font-weight:600
}
footer p{margin:0 0 12px;max-width:72ch}
footer ul{margin:0 0 12px;padding-left:18px;max-width:72ch}
footer li{margin-bottom:3px}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 18px;padding:0;list-style:none}
.legend li{display:flex;align-items:center;gap:7px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.legend i{width:7px;height:7px;border-radius:50%;flex:none}

@media (max-width:640px){
  .rings{width:52px;height:52px;margin-left:14px}
  li.spiel{grid-template-columns:1fr;gap:5px;padding:14px 18px}
  .when{border-left:0;padding-left:0;border-top:3px solid var(--dot,var(--t-open));padding-top:6px;display:inline-block}
  .tag{justify-self:start}
  .controls{padding:10px 18px}
  input[type="search"]{width:100%}
  .field{flex:1 1 100%}
  .count{margin-left:0;flex:1 1 100%}
  .month,ol.list li.spiel{padding-inline:18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}