/* ICE clan pages (home, events). Same navy + mint as the Battleship Bingo site. */
@font-face{font-family:"Big Shoulders Display";font-weight:900;font-display:swap;src:url(/fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:400;font-display:swap;src:url(/fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:700;font-display:swap;src:url(/fonts/figtree-latin-700-normal.woff2) format("woff2")}

:root{
  color-scheme: dark;
  --navy:#001E40; --navy-2:#062a52; --navy-3:#0b3664;
  --mint:#ADECD2; --text:#E6F5EF; --muted:#9DBFBD; --line:rgba(173,236,210,.15);
  --f-display:"Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--navy);color:var(--text);font-family:var(--f-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
body{background:radial-gradient(ellipse 80% 55% at 50% 0%, #0a3463 0%, var(--navy) 70%) var(--navy)}
::selection{background:var(--mint);color:var(--navy)}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
h1,h2{font-family:var(--f-display);font-weight:900;text-transform:uppercase;line-height:.92;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--mint);text-underline-offset:3px}

.page{min-height:100vh;min-height:100dvh;display:grid;align-content:center;justify-items:center;gap:26px;padding:48px 20px;text-align:center}
.logo{width:clamp(96px,22vw,150px);height:auto;display:block;filter:drop-shadow(0 10px 28px rgba(173,236,210,.18))}
.page h1{font-size:clamp(2.6rem,10vw,4.6rem)}
.page h1 span{color:var(--mint);display:block}
.lead{max-width:34ch;font-size:1.15rem;color:var(--text)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:4px}

.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;transition:background .15s, color .15s, transform .12s}
.btn:active{transform:scale(.98)}
.btn svg{width:22px;height:22px;flex:none}
.btn.primary{background:var(--mint);color:var(--navy)}
.btn.primary:hover{background:#c4f3df}
.btn.ghost{color:var(--mint);box-shadow:inset 0 0 0 2px var(--mint)}
.btn.ghost:hover{background:rgba(173,236,210,.1)}
.foot{color:var(--muted);font-size:.85rem}

/* Events page */
.wrap{max-width:720px;margin:0 auto;padding:28px 20px 64px;display:grid;gap:28px}
.top{display:flex;align-items:center;gap:14px}
.top img{width:40px;height:auto}
.top a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:1.3rem}
.wrap h1{font-size:clamp(2.4rem,9vw,3.6rem)}
.events{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.event{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;align-items:center;padding:20px 22px;border-radius:16px;background:var(--navy-2)}
.event h2{font-size:1.9rem}
.event p{color:var(--muted)}
.event .when{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.event .btn{grid-row:1 / span 3;grid-column:2}
.empty{color:var(--muted)}
@media (max-width:520px){
  .event{grid-template-columns:1fr}
  .event .btn{grid-row:auto;grid-column:auto;justify-self:start;margin-top:8px}
}