/* ============================================================
   J/70 FLEET 13 — shared styles for every page.
   This file is identical site-wide. You do not edit it to change
   content; all content lives in config.js.
   ============================================================ */
:root{
  /* Chicago city-flag palette: white field, sky-blue bars, red six-point stars */
  --chi-blue:#41B6E6;        /* the flag's light blue */
  --chi-blue-deep:#1483c2;
  --chi-red:#E4002B;         /* official "Star Red" — City of Chicago Design System (Pantone 185) */
  --navy:#13181d;            /* near-black — the flag has no navy; CDS uses black as the dark primary */
  --navy-2:#1d242b;
  --ink:#15191e;             /* near-black text on white field */
  --ink-soft:#5b6a74;        /* neutral gray */
  --paper:#f7fafc;
  --paper-2:#eef5fa;
  --sky-tint:#e3f2fb;
  --white:#ffffff;
  --line:#d6e4ee;
  --ok:#1f8f6b;
  --shadow:0 18px 50px -22px rgba(11,42,69,.40);
  --shadow-sm:0 8px 24px -14px rgba(11,42,69,.35);
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Archivo',sans-serif;color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{min-height:100vh;display:flex;flex-direction:column}     /* sticky footer for short pages */
.site-main{flex:1 0 auto}
h1,h2,h3,h4{font-family:'Fraunces',serif;line-height:1.05;letter-spacing:-.01em}
.mono{font-family:'Spline Sans Mono',monospace}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* two-bar Chicago divider motif */
.barband{height:14px;background:
    linear-gradient(var(--white),var(--white)) padding-box,
    var(--white);
    position:relative}
.barband::before,.barband::after{content:"";position:absolute;left:0;right:0;height:4px;background:var(--chi-blue)}
.barband::before{top:3px}.barband::after{bottom:3px}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .star{width:34px;height:34px;flex:none}
.brand b{font-family:'Fraunces';font-weight:700;font-size:19px;color:var(--navy);display:block;line-height:1}
.brand span{font-size:10.5px;color:var(--chi-blue-deep);letter-spacing:.16em;text-transform:uppercase;font-weight:800;display:block;margin-top:3px}
nav.links{margin-left:auto;display:flex;gap:2px;align-items:center}
nav.links a{color:var(--navy);text-decoration:none;font-size:13.5px;font-weight:700;padding:9px 12px;border-radius:9px}
nav.links a:hover{background:var(--sky-tint);color:var(--chi-blue-deep)}
nav.links a.active{background:var(--sky-tint);color:var(--chi-blue-deep)}        /* current page */
nav.links a.cta{background:var(--chi-red);color:#fff}
nav.links a.cta:hover{background:#bd2218}
nav.links a.cta.active{background:#bd2218;color:#fff}
.burger{display:none;margin-left:auto;background:none;border:0;color:var(--navy);font-size:24px;cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;background:linear-gradient(160deg,#fff 0%,var(--sky-tint) 100%);overflow:hidden;padding:60px 0 0}
.hero::after{content:"";position:absolute;top:-80px;right:-60px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(65,182,230,.18),transparent 70%)}
.hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:1.12fr .88fr;gap:42px;align-items:center;padding-bottom:34px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--chi-blue-deep);font-weight:800;margin-bottom:18px}
.eyebrow .ministar{width:16px;height:16px}
.hero h1{font-size:clamp(40px,6vw,76px);font-weight:600;color:var(--navy)}
.hero h1 em{font-style:italic;color:var(--chi-blue-deep)}
.hero .sub{margin-top:18px;font-size:17px;max-width:42ch;color:var(--ink-soft)}
.hero .home-port{margin-top:16px;font-size:13.5px;color:var(--chi-blue-deep);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);color:var(--navy);text-decoration:none;padding:11px 16px;border-radius:999px;font-size:14px;font-weight:700;transition:.15s;box-shadow:var(--shadow-sm)}
.chip:hover{transform:translateY(-1px);border-color:var(--chi-blue)}
.chip.primary{background:var(--chi-red);border-color:var(--chi-red);color:#fff}
.chip.primary:hover{background:#bd2218}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--chi-blue)}
.chip.primary .dot{background:#fff}

.nextcard{background:#fff;border-radius:18px;padding:22px;box-shadow:var(--shadow);border:1px solid var(--line);position:relative;overflow:hidden}
.nextcard::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--chi-red)}
.nextcard .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--chi-red);font-weight:800;margin-top:6px}
.nextcard h3{font-size:24px;margin:8px 0 2px;font-weight:600;color:var(--navy)}
.nextcard .when{font-size:14px;color:var(--ink-soft);font-weight:700}
.nextcard .meta{display:flex;gap:18px;margin:16px 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nextcard .meta .k{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-weight:800}
.nextcard .meta .v{font-size:15px;font-weight:700;margin-top:3px;color:var(--navy)}
.nextcard .countdown{font-family:'Spline Sans Mono';font-size:13px;color:var(--chi-blue-deep);font-weight:600}

.waves{position:relative;z-index:2;line-height:0}
.waves svg{display:block;width:100%;height:auto}

/* ---------- page header (inner pages) ---------- */
.pagehead{background:linear-gradient(160deg,#fff 0%,var(--sky-tint) 100%);position:relative;overflow:hidden}
.pagehead .wrap{padding-top:46px;padding-bottom:30px;position:relative;z-index:2}
.pagehead .kk{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--chi-blue-deep);font-weight:800;display:flex;align-items:center;gap:9px}
.pagehead .kk .ministar{width:15px;height:15px}
.pagehead h1{font-size:clamp(32px,5vw,52px);font-weight:600;margin-top:10px;color:var(--navy)}
.pagehead h1 em{font-style:italic;color:var(--chi-blue-deep)}
.pagehead p{color:var(--ink-soft);max-width:60ch;margin-top:10px;font-size:16px}
.pagehead::after{content:"";position:absolute;top:-90px;right:-60px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(65,182,230,.16),transparent 70%)}

/* ---------- sections ---------- */
section{padding:72px 0;position:relative}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px;flex-wrap:wrap}
.sec-head .kk{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--chi-blue-deep);font-weight:800;display:flex;align-items:center;gap:9px}
.sec-head .kk .ministar{width:15px;height:15px}
.sec-head h2{font-size:clamp(28px,4vw,42px);font-weight:600;margin-top:10px;color:var(--navy)}
.sec-head p{color:var(--ink-soft);max-width:56ch;margin-top:8px}
.bg-tint{background:var(--paper-2)}
.bg-navy{background:var(--navy);color:#dcebf5}
.hidden{display:none}

/* Covers Sheet-fed sections (schedule, results, news, roster, photos, crew
   board) while the real data is still loading, so visitors never see the
   config.js placeholder examples — only a brief "Loading…" state. */
.data-loading{position:relative;min-height:64px}
.data-loading>*{visibility:hidden}
.data-loading::after{content:'Loading…';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:13px;letter-spacing:.02em}
.bg-navy h2{color:#fff}.bg-navy .sec-head .kk{color:var(--chi-blue)}.bg-navy .sec-head p{color:#a9c6da}

/* ---------- calendar ---------- */
.cal-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start}
.cal{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.cal-top{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.cal-top h3{font-size:22px;font-weight:600;color:var(--navy)}
.cal-nav{display:flex;gap:8px}
.cal-nav button{height:36px;min-width:36px;padding:0 10px;border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer;font-size:15px;font-weight:700;color:var(--navy);display:grid;place-items:center;transition:.15s}
.cal-nav button:hover{background:var(--sky-tint);border-color:var(--chi-blue)}
/* minmax(0,1fr), not plain 1fr: a grid track's automatic minimum width is
   otherwise based on its content's min-content size, so a day cell with a
   long, unbroken event title (nowrap + ellipsis) would still force that
   one column wider than the rest, throwing off the weekly grid. minmax(0,…)
   overrides that, so every column stays an equal 1/7th no matter what's in
   it. */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-grid .dow{text-align:center;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--ink-soft);padding:12px 0;text-transform:uppercase;background:var(--paper-2)}
.cell{min-height:78px;min-width:0;border-right:1px solid #eaf1f6;border-bottom:1px solid #eaf1f6;padding:7px 8px;position:relative;font-size:13px;overflow:hidden}
.cell:nth-child(7n){border-right:0}
.cell.out{background:#fafcfd;color:#b9ccd8}
.cell .num{font-weight:700;font-size:13px;color:var(--ink-soft)}
.cell.today .num{background:var(--chi-red);color:#fff;width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.ev{display:block;margin-top:4px;font-size:11px;font-weight:700;color:#fff;border-radius:5px;padding:2px 6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.45}
.ev.race{background:var(--chi-blue-deep)}
.ev.regatta{background:var(--chi-red)}
.ev.social{background:#c98a1e}
.ev.clinic{background:var(--ok)}
/* continuation day of a multi-day regatta — same color, no repeated
   title, just a slim connecting bar so the calendar doesn't fill up with
   duplicate labels across the whole span */
.ev-cont{font-size:0;line-height:1;height:7px;padding:0;border-radius:3px;opacity:.85}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:12px;height:12px;border-radius:4px;display:inline-block}

.upcoming{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.upcoming .uh{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.upcoming .uh h3{font-size:18px;font-weight:600;color:var(--navy)}
.upcoming .uh a{font-size:12.5px;color:var(--chi-blue-deep);font-weight:800;text-decoration:none}
.ulist{max-height:430px;overflow:auto}
.urow{display:flex;gap:14px;padding:14px 20px;border-bottom:1px solid #eef4f8;align-items:flex-start}
.urow:last-child{border-bottom:0}
/* Landed here from a calendar click — flash it so it's obvious which
   regatta the visitor came to see, then settle to transparent. */
.urow:target,.hist-row:target{animation:raceFlash 2.4s ease}
@keyframes raceFlash{0%{background:var(--sky-tint)}100%{background:transparent}}
.udate{flex:none;width:48px;text-align:center}
.udate .m{font-size:11px;font-weight:800;text-transform:uppercase;color:var(--chi-red);letter-spacing:.04em}
.udate .d{font-size:22px;font-weight:800;font-family:'Fraunces';line-height:1;color:var(--navy)}
.uinfo h4{font-size:15px;font-weight:700;font-family:'Archivo';color:var(--navy)}
.uinfo .det{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.pill{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:999px;margin-top:6px;color:#fff}
.pill.race{background:var(--chi-blue-deep)}.pill.regatta{background:var(--chi-red)}.pill.social{background:#c98a1e}.pill.clinic{background:var(--ok)}

.subscribe{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:10px;font-weight:700;font-size:14px;padding:12px 18px;text-decoration:none;cursor:pointer;border:0;transition:.15s;font-family:'Archivo'}
.btn.solid{background:var(--navy);color:#fff}.btn.solid:hover{background:#06223a}
.btn.line{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}.btn.line:hover{background:var(--sky-tint)}
.btn.red{background:var(--chi-red);color:#fff}.btn.red:hover{background:#bd2218}

/* ---------- crew ---------- */
.boards{max-width:640px;margin:0 auto;display:grid;gap:20px}
.board{background:#1b2228;border:1px solid rgba(255,255,255,.1);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.board-h{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center}
.board-h h3{font-size:20px;font-weight:600;color:#fff}
.board-h .ct{font-size:12px;font-weight:800;color:var(--navy);background:var(--chi-blue);padding:3px 10px;border-radius:999px}
.board-body{padding:8px 20px 20px}
.post{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.post:last-child{border-bottom:0}
.post .pt{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.post .name{font-weight:700;font-size:15px;color:#fff}
.post .role{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px}
.role.want{background:rgba(218,41,28,.22);color:#ff8a7e}
.role.avail{background:rgba(31,143,107,.24);color:#7fd9b3}
.post .note{font-size:13px;color:#bcd5e4;margin-top:4px}
.post .meta{font-size:11.5px;color:#86a6bb;margin-top:5px;font-family:'Spline Sans Mono'}
.pos-tag{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 9px;border-radius:999px;margin-top:6px;background:rgba(65,182,230,.2);color:#7cc7ea}
.filter-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.filter-row label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#86a6bb}
.filter-row select{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#eaf4fa;font-family:'Archivo';font-size:13px}
.filter-row select option{color:#000}
.signup-form{margin-top:8px;display:grid;gap:10px}
.signup-form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.signup-form input,.signup-form select,.signup-form textarea{width:100%;padding:11px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#eaf4fa;font-family:'Archivo';font-size:14px}
.signup-form input::placeholder,.signup-form textarea::placeholder{color:#82a2b6}
.signup-form input:focus,.signup-form select:focus,.signup-form textarea:focus{outline:2px solid var(--chi-blue);border-color:transparent}
.signup-form select option{color:#000}
details.addpost{margin-top:14px;border-top:1px solid rgba(255,255,255,.1);padding-top:14px}
details.addpost summary{cursor:pointer;font-weight:800;color:var(--chi-blue);font-size:14px;list-style:none}
details.addpost summary::-webkit-details-marker{display:none}
details.addpost summary::before{content:"+ ";font-weight:800}
details.addpost[open] summary::before{content:"– "}

/* ---------- usual crew (boat page) + "email my crew" ---------- */
.cc-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;margin-bottom:8px}
.cc-row input{width:100%;padding:10px 11px;border-radius:9px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#eaf4fa;font-family:'Archivo';font-size:14px}
.cc-row input::placeholder{color:#82a2b6}
.cc-remove{flex:none;background:rgba(255,255,255,.07);color:#d7e8f2;border:1px solid rgba(255,255,255,.2);border-radius:9px;font-size:15px;font-weight:800;width:38px;height:38px;cursor:pointer}
.cc-remove:hover{color:#ff8a7e;border-color:#ff8a7e}
@media(max-width:640px){.cc-row{grid-template-columns:1fr}}
.text-crew-box{margin-top:10px;padding:14px;background:var(--sky-tint);border-radius:9px;display:grid;gap:8px}
.text-crew-box .tcb-hint{font-size:12.5px;color:var(--ink-soft)}
.text-crew-box .tcb-msg{width:100%;padding:10px 11px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:'Archivo';font-size:13.5px;resize:vertical}
.text-crew-box .tcb-code{width:100%;max-width:220px;padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:'Archivo';font-size:13.5px}
.text-crew-box .tcb-result{font-size:12.5px;font-weight:700;min-height:16px}

/* ---------- confirm.html (crew's one-tap "I'm in" page) ---------- */
.cfm-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:24px;max-width:420px;margin:0 auto;display:grid;gap:12px}
.cfm-days{display:grid;gap:8px}
.cfm-day{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink);cursor:pointer}
.cfm-day input{width:18px;height:18px}
.cfm-card #cfm_name{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:15px;font-family:'Archivo'}
.cfm-card .tcb-result{font-size:13px;font-weight:700;min-height:18px}

/* ---------- results & history ---------- */
.hist-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.hist-row{display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px solid #eef4f8}
.hist-row:last-child{border-bottom:0}
.hist-date{text-align:center}
.hist-date .y{font-size:11px;font-weight:800;color:var(--ink-soft);letter-spacing:.04em}
.hist-date .md{font-family:'Fraunces';font-size:17px;font-weight:700;color:var(--navy);line-height:1.05}
.hist-main h4{font-size:16px;font-weight:700;font-family:'Archivo';color:var(--navy)}
.hist-main .where{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.hist-main .podium{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}
.hist-main .podium span{font-size:12px;font-weight:700;color:var(--navy);background:var(--sky-tint);padding:3px 9px;border-radius:7px}
.hist-main .podium span b{color:var(--chi-blue-deep)}
.hist-link a{font-size:12.5px;font-weight:800;color:var(--chi-blue-deep);text-decoration:none;white-space:nowrap}
.hist-link a:hover{text-decoration:underline}

/* "More details" — regatta overview, race website, and admin-defined
   extra fields — on race rows (upcoming list) and result rows (history). */
details.rd{margin-top:8px}
details.rd summary{cursor:pointer;font-weight:800;color:var(--chi-blue-deep);font-size:12.5px;list-style:none}
details.rd summary::-webkit-details-marker{display:none}
details.rd summary::before{content:"+ ";font-weight:800}
details.rd[open] summary::before{content:"– ";font-weight:800}
.rd-body{margin-top:8px;padding:10px 12px;background:var(--sky-tint);border-radius:8px}
.rd-row{font-size:12.5px;color:var(--ink);line-height:1.5}
.rd-row+.rd-row{margin-top:6px}
.rd-row b{color:var(--navy);margin-right:6px}
.rd-overview{color:var(--ink);font-style:italic}
.rd-row a{color:var(--chi-blue-deep);font-weight:700;word-break:break-word}
.rd-lineups{background:transparent}
.ll-daygroup+.ll-daygroup{margin-top:8px}
.ll-day{font-weight:800;color:var(--navy);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;margin-top:6px}
.ll-row{font-size:12.5px;line-height:1.6}
.ll-row b{color:var(--navy);margin-right:6px}
.ll-crew{color:var(--ink)}
.ll-short{display:inline-block;margin-left:8px;background:var(--chi-red);color:#fff;font-weight:700;font-size:10.5px;padding:2px 8px;border-radius:99px;vertical-align:middle}
.ll-status{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:99px;margin-right:6px;vertical-align:middle}
.ll-status.in{background:#dff5e8;color:#1a8a4c}
.ll-status.maybe{background:#fdf0d5;color:#a8690c}
.ll-status.out{background:#f1f1f1;color:#8a8f96}
.rd-cta{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px}

/* race attendance strip — always visible on a race row (upcoming list),
   not tucked behind "More details", since "who's going / who's needed"
   is the thing people check most */
.race-att{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.att-row{font-size:12px}
.att-chip{display:inline-block;font-weight:700;font-size:11px;padding:3px 10px;border-radius:99px;margin-right:6px}
.att-chip.in{background:#dff5e8;color:#1a8a4c}
.att-chip.maybe{background:#fdf0d5;color:#a8690c}
.att-chip.out{background:#f1f1f1;color:#8a8f96}
.att-chip.need{background:var(--chi-red);color:#fff}
.att-chip.att-empty{background:var(--sky-tint);color:var(--chi-blue-deep);font-weight:600}
.lineup-open{display:inline-block;background:#fff;border:1.5px solid var(--chi-blue-deep);color:var(--chi-blue-deep);font-weight:700;font-size:12px;padding:7px 12px;border-radius:99px;cursor:pointer;text-decoration:none;font-family:'Archivo'}
.lineup-open:hover{background:var(--sky-tint)}
.empty{color:var(--ink-soft);font-size:13.5px;padding:4px 0}

/* ---------- crew needs (Crew Finder, filtered by race) ---------- */
#crewNeeds{padding:36px 0 6px}
.cn-filterbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:16px 20px;margin-bottom:20px}
.cn-filterbar select{flex:1;min-width:220px;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:'Archivo';background:#fff;color:var(--ink)}
.cn-section{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:18px 20px;margin-bottom:16px}
.cn-section h3{font-size:16px;font-weight:700;font-family:'Archivo';color:var(--navy);margin-bottom:10px}
.seclead-ish{font-size:12.5px;color:var(--ink-soft);margin:-4px 0 12px}
.cn-going{display:grid;gap:10px}
.cn-going-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 10px;padding:10px 12px;background:var(--sky-tint);border-radius:9px;font-size:13px}
.cn-going-row b{color:var(--navy)}
.cn-going-row>div{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.cn-sail{font-family:'Spline Sans Mono';font-size:11.5px;color:var(--ink-soft)}
.cn-need-card{border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin-bottom:12px}
.cn-need-card:last-child{margin-bottom:0}
.cn-need-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.cn-crew-have{font-size:12.5px;color:var(--ink-soft);margin-bottom:8px}
.int-list{display:grid;gap:6px;margin:8px 0}
.int-row{font-size:12.5px;color:var(--ink);background:var(--paper-2);border-radius:7px;padding:6px 10px}
.int-row a{color:var(--chi-blue-deep);font-weight:700;text-decoration:none}
.int-row a:hover{text-decoration:underline}
.int-form{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-top:8px}
.int-form input{padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:'Archivo';background:#fff;color:var(--ink)}
.int-form .int-note{grid-column:1/3}
.int-form .btn{white-space:nowrap;padding:9px 16px;font-size:12.5px}
.cn-general .int-form{margin-top:0}
.ll-day-inline{font-weight:800;color:var(--navy);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;margin-right:2px}
@media (max-width:640px){
  .int-form{grid-template-columns:1fr}
  .int-form .int-note{grid-column:1}
}

/* ---------- "coming soon" placeholder (Media page) ---------- */
.comingsoon{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:44px 28px;text-align:center;max-width:560px;margin:0 auto}
.comingsoon .cs-icon{font-size:34px;margin-bottom:10px}
.comingsoon h3{font-size:22px;font-weight:600;color:var(--navy);margin-bottom:10px}
.comingsoon p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;max-width:44ch;margin:0 auto 8px}
.comingsoon a{color:var(--chi-blue-deep);font-weight:700;text-decoration:none}
.comingsoon a:hover{text-decoration:underline}

#lineupPanel{position:fixed;inset:0;z-index:200;background:rgba(7,26,42,.6);padding:24px;overflow-y:auto}
#lineupPanel .lb-inner{box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}

.linkcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.linkcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);transition:.18s;display:flex;flex-direction:column;gap:9px}
.linkcard:hover{transform:translateY(-3px);border-color:var(--chi-blue)}
.linkcard .ic{width:42px;height:42px;border-radius:11px;background:var(--sky-tint);display:grid;place-items:center;font-size:20px}
.linkcard h3{font-size:18px;font-weight:600;color:var(--navy)}
.linkcard p{font-size:13px;color:var(--ink-soft)}
.linkcard .go{margin-top:auto;font-size:13px;font-weight:800;color:var(--chi-blue-deep)}

/* ---------- photo gallery ---------- */
.gal-groups{display:flex;flex-direction:column;gap:34px}
.gal-group h3{font-size:20px;font-weight:600;color:var(--navy);margin-bottom:4px}
.gal-group .gsub{font-size:13px;color:var(--ink-soft);margin-bottom:14px}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;cursor:pointer;box-shadow:var(--shadow-sm);background:var(--sky-tint)}
.tile img,.tile svg{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.tile:hover img,.tile:hover svg{transform:scale(1.06)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 9px;background:linear-gradient(transparent,rgba(11,42,69,.78));color:#fff;font-size:12.5px;font-weight:700;opacity:0;transition:.2s}
.tile:hover .cap{opacity:1}
.tile .ph-badge{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.92);color:var(--chi-blue-deep);font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:6px}
.ph-host{width:100%;height:100%}
.tile-video video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.tile-video .play-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(11,42,69,.72);color:#fff;display:grid;place-items:center;font-size:16px}

/* media search/filter bar (Media + Resources pages) */
.media-filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.media-filterbar input[type=text]{flex:1;min-width:220px;padding:11px 14px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:'Archivo'}
.media-filterbar select{padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:'Archivo';background:#fff}

/* resources page */
.res-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.res-cat{background:#fff;border:1.5px solid var(--line);color:var(--ink);font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:99px;cursor:pointer}
.res-cat.active,.res-cat:hover{border-color:var(--chi-blue-deep);color:var(--chi-blue-deep);background:var(--sky-tint)}
.res-groups{display:flex;flex-direction:column;gap:30px}
.res-group h3{font-size:18px;font-weight:600;color:var(--navy);margin-bottom:12px}
.res-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.res-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);transition:.15s;display:block}
.res-card:hover{transform:translateY(-2px);border-color:var(--chi-blue)}
.res-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.res-title{font-weight:700;color:var(--navy);font-size:14.5px}
.res-type{flex:none;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--chi-blue-deep);background:var(--sky-tint);padding:3px 8px;border-radius:99px}
.res-card p{font-size:12.5px;color:var(--ink-soft);margin-top:6px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
@media(max-width:760px){.res-cards{grid-template-columns:1fr}}

/* "+ Suggest a resource" — public submission, reviewed in /admin before
   it joins the real list above. */
.sugg-toggle{margin-top:32px}
.sugg-toggle summary{cursor:pointer;font-weight:800;color:var(--chi-blue-deep);font-size:14px;list-style:none}
.sugg-toggle summary::-webkit-details-marker{display:none}
.sugg-toggle summary::before{content:"+ ";font-weight:800}
.sugg-toggle[open] summary::before{content:"– ";font-weight:800}
.sugg-form{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:20px;display:grid;gap:10px;max-width:520px}
.sugg-form select,.sugg-form input,.sugg-form textarea{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:'Archivo';background:#fff;color:var(--ink)}
.sugg-form textarea{min-height:60px;resize:vertical}
.sugg-form .btn{justify-self:start}
#sgNote{font-size:12.5px;color:var(--ink-soft);min-height:16px}

/* lightbox */
#lb{position:fixed;inset:0;z-index:200;background:rgba(7,26,42,.93);display:none;align-items:center;justify-content:center;padding:30px}
#lb.open{display:flex}
#lb .lb-stage{max-width:1000px;width:100%;text-align:center}
#lb .lb-img{max-width:100%;max-height:78vh;margin:0 auto;border-radius:12px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
#lb .lb-tags{color:#9bbcd0;font-weight:400;font-size:12.5px}
#lb .lb-cap{color:#dcebf5;font-size:14px;font-weight:600;margin-top:14px}
#lb .lb-x{position:absolute;top:20px;right:24px;background:none;border:0;color:#fff;font-size:34px;cursor:pointer;line-height:1}
#lb .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;color:#fff;font-size:30px;width:54px;height:54px;border-radius:50%;cursor:pointer}
#lb .lb-nav:hover{background:var(--chi-red)}
#lb .lb-prev{left:18px}#lb .lb-next{right:18px}

/* ---------- news ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.news-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:.18s}
.news-card:hover{transform:translateY(-3px);border-color:var(--chi-blue)}
.news-card .nc-top{height:6px;background:var(--chi-blue)}
.news-card .nc-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.news-card .nc-date{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--chi-red)}
.news-card h3{font-size:19px;font-weight:600;color:var(--navy)}
.news-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.news-card .by{margin-top:auto;font-size:12px;color:var(--ink-soft);font-weight:600;padding-top:8px}

/* ---------- fleet / roster ---------- */
.fleet-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.join-card{margin-top:40px;background:var(--navy);border-radius:var(--r);box-shadow:var(--shadow);padding:30px;display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:center}
.join-card .join-copy h3{font-size:26px;font-weight:600;color:#fff}
.join-card .join-copy p{color:#a9c6da;font-size:15px;margin-top:8px;max-width:34ch}
.join-form .jf-note{font-size:13px;font-weight:700;color:#7fd9b3;margin-top:4px;min-height:1em}
.fleet-copy p{color:var(--ink-soft);margin-bottom:14px;font-size:15.5px}
.stat-row{display:flex;gap:28px;margin:22px 0}
.stat .n{font-family:'Fraunces';font-size:38px;font-weight:600;color:var(--chi-blue-deep);line-height:1}
.stat .l{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);font-weight:800;margin-top:4px}
.roster{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.roster .rh{padding:14px 18px;background:var(--navy);color:#fff;font-weight:700;display:flex;justify-content:space-between;font-size:14px}
table{width:100%;border-collapse:collapse}
.roster td{padding:11px 18px;border-bottom:1px solid #eef4f8;font-size:14px}
.roster tr:last-child td{border-bottom:0}
.roster .sail{font-family:'Spline Sans Mono';font-weight:600;color:var(--chi-blue-deep);width:92px}
.roster .boat{font-weight:700;color:var(--navy)}
.roster .skip{color:var(--ink-soft);text-align:right}

/* ---------- footer ---------- */
footer{background:var(--navy);color:#bcd5e4;padding:56px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
footer h4{color:#fff;font-size:13px;letter-spacing:.04em;margin-bottom:14px;font-family:'Archivo';font-weight:800;text-transform:uppercase}
footer a{color:#bcd5e4;text-decoration:none;font-size:14px;display:block;margin-bottom:9px}
footer a:hover{color:#fff}
.capt{background:#1b2228;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px}
.capt .nm{font-family:'Fraunces';font-size:20px;color:#fff;font-weight:600}
.capt .tt{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--chi-blue);font-weight:800;margin:2px 0 12px}
.capt a{font-family:'Spline Sans Mono';font-size:13.5px}
.foot-bottom{margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#7ea2b9}

#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--navy);color:#fff;padding:14px 22px;border-radius:12px;box-shadow:var(--shadow);font-weight:600;font-size:14px;z-index:220;transition:transform .35s cubic-bezier(.2,.8,.2,1);border:1px solid rgba(255,255,255,.14)}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast b{color:var(--chi-blue)}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}

@media(max-width:900px){
  nav.links{display:none}
  .burger{display:block}
  nav.links.open{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;background:#fff;padding:14px;gap:6px;box-shadow:var(--shadow)}
  nav.links.open a{width:100%}
  .hero-grid,.cal-layout,.linkcards,.fleet-layout,.foot-grid,.news-grid,.join-card{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .hero{padding-top:40px}
}
@media(max-width:560px){
  .cell{min-height:54px}.ev{font-size:0;padding:5px}
  .signup-form .row{grid-template-columns:1fr}
  .stat-row{flex-wrap:wrap;gap:16px}
  .hist-row{grid-template-columns:54px 1fr;}.hist-link{grid-column:1/-1}
}