/* ============================================================
   Chesapeake Cytometry Consortium — design tokens
   Palette drawn from two sources this org actually sits between:
   the Bay itself (deep tidal ink, water teal, marsh green) and
   the instrument readout (the raspberry/coral of a PE channel,
   the green of a FITC channel) used only inside the plot motif.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink: #13293D;
  --ink-soft: #3C5872;
  --paper: #EEF2F6;
  --paper-raised: #FFFFFF;
  --bay: #1D6FA5;
  --bay-deep: #0B3B5C;
  --marsh: #2E8B95;
  --channel-red: #C33C54;
  --channel-green: #6FA86F;
  --line: rgba(19,41,61,0.14);

  --display: 'Fraunces', Georgia, serif;
  --body: 'Inter', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --max: 1120px;
  --pad: clamp(20px, 5vw, 56px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;}
img{max-width:100%; display:block;}

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 0.4em;
  letter-spacing:-0.01em;
}
h1{font-weight:500;}

p{margin:0 0 1em;}
.eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--bay-deep);
  display:flex;
  align-items:center;
  gap:0.6em;
  margin-bottom:0.9em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--channel-red);
  display:inline-block;
}

.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(238,240,233,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--ink);
}
.brand-mark{width:40px; height:auto; flex:none; object-fit:contain;}
.brand-text{
  font-family:var(--display);
  font-weight:600;
  font-size:1.02rem;
  line-height:1.15;
}
.brand-text small{
  display:block;
  font-family:var(--mono);
  font-weight:400;
  font-size:0.62rem;
  letter-spacing:0.1em;
  color:var(--ink-soft);
  text-transform:uppercase;
  margin-top:2px;
}
.nav-links{display:flex; gap:2.2rem; align-items:center; list-style:none; margin:0; padding:0;}
.nav-links a{
  text-decoration:none;
  font-size:0.92rem;
  font-weight:500;
  color:var(--ink-soft);
  position:relative;
  padding:6px 0;
}
.nav-links a:hover, .nav-links a:focus-visible{color:var(--ink);}
.nav-links a.current{color:var(--ink);}
.nav-links a.current::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:var(--channel-red);
}
.nav-cta{
  background:var(--bay-deep); color:#fff !important;
  padding:9px 18px; border-radius:3px;
  font-weight:600 !important;
}
.nav-cta:hover{background:var(--ink);}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:22px; height:2px; background:var(--ink);
  position:relative; transition:transform .2s ease;
}
.nav-toggle span::before{position:absolute; top:-7px;}
.nav-toggle span::after{position:absolute; top:7px;}

:focus-visible{outline:2px solid var(--channel-red); outline-offset:2px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.5em;
  font-family:var(--body); font-weight:600; font-size:0.94rem;
  padding:13px 24px; border-radius:3px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:all .15s ease;
}
.btn-primary{background:var(--bay); color:#fff;}
.btn-primary:hover{background:var(--bay-deep); transform:translateY(-1px);}
.btn-ghost{background:transparent; border-color:var(--ink); color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:#fff;}
.btn-light{background:#fff; color:var(--ink);}
.btn-light:hover{background:var(--paper);}

/* ---------- hero ---------- */
.hero{
  background:var(--bay-deep);
  color:#F4F5EF;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:40px;
  align-items:center;
  padding-top:clamp(50px, 9vw, 96px);
  padding-bottom:clamp(50px, 9vw, 96px);
}
.hero .eyebrow{color:#BFD4CE;}
.hero .eyebrow::before{background:var(--channel-red);}
.hero h1{
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  color:#fff;
}
.hero h1 em{
  font-style:italic;
  color:#8FC5E0;
}
.hero .lede{
  font-size:1.1rem;
  color:#D6DDD5;
  max-width:46ch;
}
.hero-actions{display:flex; gap:14px; margin-top:1.6em; flex-wrap:wrap;}
.hero-figure{
  position:relative;
  aspect-ratio:1/1;
  max-width:440px;
  justify-self:end;
}
#plot{width:100%; height:100%;}
.plot-caption{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.06em;
  color:#8FA9A2; text-align:center; margin-top:10px;
}

/* ---------- sections ---------- */
section{padding:clamp(56px, 8vw, 100px) 0;}
.section-head{max-width:640px; margin-bottom:2.6em;}
.section-head h2{font-size:clamp(1.6rem, 3vw, 2.2rem);}
.section-head .lede{color:var(--ink-soft); font-size:1.05rem;}

.band-alt{background:var(--paper-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:40px;}

.vendor-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.vendor-card{
  display:flex; align-items:center; justify-content:center;
  height:120px; padding:20px;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:4px;
  transition:border-color .15s ease, transform .15s ease;
}
.vendor-card:hover{border-color:var(--bay); transform:translateY(-2px);}
.vendor-card img{
  max-width:100%; max-height:100%; object-fit:contain;
  filter:grayscale(100%); opacity:0.7;
  transition:filter .2s ease, opacity .2s ease;
}
.vendor-card:hover img{filter:none; opacity:1;}

.card{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:4px;
  padding:28px;
}
.card .num{
  font-family:var(--mono); font-size:0.75rem; color:var(--channel-red);
  letter-spacing:0.08em; margin-bottom:0.8em; display:block;
}
.card h3{font-size:1.1rem; margin-bottom:0.5em;}
.card p{color:var(--ink-soft); font-size:0.95rem; margin:0;}

/* ---------- meeting panel ---------- */
.meeting-panel{
  background:var(--ink);
  color:#F4F5EF;
  border-radius:6px;
  padding:clamp(28px,5vw,48px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
}
.meeting-panel .eyebrow{color:#9FC3BC;}
.meeting-panel .eyebrow::before{background:var(--channel-red);}
.meeting-panel h2{color:#fff; font-size:clamp(1.5rem,3vw,2rem);}
.meeting-facts{list-style:none; margin:1.4em 0 0; padding:0; display:grid; gap:14px;}
.meeting-facts li{
  display:grid; grid-template-columns:110px 1fr; gap:14px;
  font-size:0.95rem; border-top:1px solid rgba(255,255,255,0.14); padding-top:14px;
}
.meeting-facts li:first-child{border-top:none; padding-top:0;}
.meeting-facts .k{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:#9FC3BC;}
.meeting-side{background:rgba(255,255,255,0.06); border-radius:4px; padding:24px;}
.meeting-side h3{color:#fff; font-size:1rem;}
.meeting-side p{color:#C7CFC9; font-size:0.92rem;}

/* ---------- agenda table ---------- */
.agenda{width:100%; border-collapse:collapse; font-size:0.94rem;}
.agenda th{
  text-align:left; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-soft); padding:0 16px 12px; border-bottom:1px solid var(--line);
}
.agenda td{padding:16px; border-bottom:1px solid var(--line); vertical-align:top;}
.agenda tr:last-child td{border-bottom:none;}
.agenda .time{font-family:var(--mono); font-size:0.86rem; white-space:nowrap; color:var(--bay-deep);}
.agenda .ph{color:var(--ink-soft); font-style:italic;}

/* ---------- placeholder note ---------- */
.editnote{
  background:#FBF3E5;
  border:1px dashed #C9A24B;
  border-radius:4px;
  padding:14px 18px;
  font-size:0.86rem;
  color:#6B5326;
  margin:0 0 2em;
}
.editnote strong{color:#4A3A19;}

/* ---------- footer ---------- */
footer{background:var(--bay-deep); color:#C7D3CF; padding:48px 0 32px;}
footer .wrap{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;}
footer h4{color:#fff; font-family:var(--display); font-weight:500; margin-bottom:0.6em;}
footer a{color:#C7D3CF; text-decoration:none; font-size:0.9rem;}
footer a:hover{color:#fff;}
.footer-cols{display:flex; gap:64px; flex-wrap:wrap;}
.footer-cols ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.foot-bottom{
  margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.14);
  font-size:0.8rem; color:#8FA9A2;
}
.foot-bottom .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

/* ---------- registration page ---------- */
.reg-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:44px; align-items:start;}
.tier-list{list-style:none; margin:0 0 1.6em; padding:0; display:grid; gap:12px;}
.tier-list li{border:none; padding:0;}
.tier-list a{
  display:flex; justify-content:space-between; align-items:baseline;
  border:1px solid var(--line); border-radius:4px; padding:16px 18px; background:var(--paper-raised);
  text-decoration:none; color:var(--ink); transition:border-color .15s ease, background .15s ease;
}
.tier-list a:hover, .tier-list a:focus-visible{
  border-color:var(--bay); background:#F3F8FB;
}
.tier-list .name{font-weight:600;}
.tier-list .desc{display:block; font-size:0.85rem; color:var(--ink-soft); font-weight:400; margin-top:2px;}
.tier-list .price{font-family:var(--mono); font-size:1.05rem; color:var(--bay-deep); white-space:nowrap;}

.pay-box{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:6px; padding:28px;
  position:sticky; top:96px;
}
.pay-box h3{font-size:1.05rem;}
.pay-box .fine{font-size:0.82rem; color:var(--ink-soft);}
.paypal-btn-wrap{margin-top:1.2em; padding-top:1.2em; border-top:1px solid var(--line);}

.field-list{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:0.92rem; color:var(--ink-soft);}
.field-list li::before{content:"— "; color:var(--channel-red);}

@media (max-width: 880px){
  .nav-links{
    position:fixed; inset:76px 0 0 0; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:8px var(--pad) 24px; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease; border-bottom:1px solid var(--line);
  }
  .nav-links.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .nav-links li{width:100%; border-top:1px solid var(--line);}
  .nav-links a{display:block; padding:16px 0;}
  .nav-toggle{display:block;}
  .hero .wrap{grid-template-columns:1fr;}
  .hero-figure{justify-self:center; max-width:320px;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .vendor-grid{grid-template-columns:repeat(2,1fr);}
  .meeting-panel{grid-template-columns:1fr;}
  .reg-grid{grid-template-columns:1fr;}
  .pay-box{position:static;}
  footer .wrap{flex-direction:column;}
}