/* ===== The Crew — Undersea Board (page-scoped) ===== */
  #csroot{position:relative;overflow:hidden;background:linear-gradient(180deg,#5AD8E6 0%,#2FC0D6 30%,#1FA9C0 70%,#1897AE 100%)}
  #csroot *{box-sizing:border-box}

  /* undersea reef — background scene behind the board */
  #csroot .cs-reef{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  #csroot .cs-depth{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,transparent 24%,rgba(6,74,86,.10) 66%,rgba(6,74,86,.34) 100%)}
  #csroot .cs-ray{position:absolute;top:0;height:100%;transform:skewX(-12deg);will-change:transform}
  #csroot .cs-floor{position:absolute;left:0;right:0;bottom:0;height:180px}

  /* ambient water + bubbles */
  #csroot .cs-water{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  #csroot .cs-caustics{position:absolute;inset:0;background:
      radial-gradient(340px 150px at 20% 12%,rgba(255,255,255,.5),transparent 60%),
      radial-gradient(300px 140px at 78% 8%,rgba(255,255,255,.4),transparent 62%),
      radial-gradient(260px 120px at 60% 30%,rgba(255,255,255,.28),transparent 60%),
      radial-gradient(280px 130px at 30% 60%,rgba(255,255,255,.2),transparent 60%);
      mix-blend-mode:screen;animation:csshim 11s ease-in-out infinite}
  #csroot .cs-bub{position:absolute;bottom:-30px;border-radius:50%;
      background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95),rgba(255,255,255,.12) 62%,rgba(255,255,255,0));
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);animation:csbub 15s linear infinite}

  /* hero */
  #csroot .cs-eyebrow{font:800 12px/1 'Nunito Sans',sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#06373d;text-shadow:0 1px 0 rgba(255,255,255,.45)}
  #csroot .cs-pennant{width:34px;height:46px;clip-path:polygon(0 0,100% 0,50% 100%);box-shadow:0 4px 5px rgba(0,0,0,.13)}

  /* board */
  #csroot .cs-board{position:relative;border-radius:8px;
      background-color:#CBA16A;
      background-image:radial-gradient(rgba(120,80,40,.26) 1px,transparent 1.6px),radial-gradient(rgba(150,110,60,.26) 1px,transparent 1.6px),radial-gradient(rgba(90,60,30,.18) 1px,transparent 1.6px);
      background-size:16px 16px,23px 23px,29px 29px;background-position:0 0,7px 11px,14px 3px;
      box-shadow:inset 0 0 70px rgba(90,60,30,.4),inset 0 0 0 1px rgba(90,60,30,.28);
      overflow:hidden;padding:clamp(30px,4vw,52px) clamp(16px,3vw,40px)}
  #csroot .cs-doodle{position:absolute;z-index:1;pointer-events:none}

  /* card grid — tightened so the board centre isn't a dead gap */
  #csroot .cs-cards{position:relative;z-index:5;max-width:812px;margin:0 auto;
      display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(26px,3.4vw,46px)}
  #csroot .cs-card{position:relative;width:min(342px,86vw)}
  #csroot .cs-card:nth-child(2){width:min(320px,86vw);margin-top:clamp(34px,5vw,70px)}
  #csroot .cs-card:nth-child(3){width:min(322px,86vw);margin-top:clamp(-26px,-2vw,0px)}
  #csroot .cs-card:nth-child(4){width:min(300px,86vw);margin-top:clamp(30px,4vw,58px)}
  #csroot .cs-lift{transition:transform .45s cubic-bezier(.34,1.1,.5,1),filter .45s ease}
  #csroot .cs-card:hover .cs-lift,#csroot .cs-card:focus-within .cs-lift{transform:translateY(-10px) scale(1.015);filter:drop-shadow(0 24px 30px rgba(15,40,45,.4))}
  #csroot .cs-card a:focus-visible,#csroot .cs-cta:focus-visible{outline:3px solid #06373d;outline-offset:3px}
  #csroot .cs-photo{position:relative;overflow:hidden;border-radius:2px;background:#D5F3F5}
  #csroot .cs-photo img{width:100%;height:100%;object-fit:cover;display:block}

  /* closing CTA button */
  #csroot .cs-cta{display:inline-block;font:800 13px/1 'Nunito Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FCF6EC;text-decoration:none;background:#B8431F;padding:16px 30px;border:2.5px solid #2A3B33;border-radius:8px;box-shadow:4px 4px 0 #2A3B33;transition:transform .15s ease,box-shadow .15s ease}
  #csroot .cs-cta:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #2A3B33}

  @keyframes csbub{0%{transform:translateY(0) translateX(0);opacity:0}12%{opacity:.85}100%{transform:translateY(-620px) translateX(var(--bx,14px));opacity:0}}
  @keyframes cssway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
  @keyframes csspin{to{transform:rotate(360deg)}}
  @keyframes csshim{0%,100%{opacity:.4;transform:translate(0,0)}50%{opacity:.72;transform:translate(-18px,14px)}}
  @keyframes csshine{0%{transform:translateX(-170%) rotate(20deg)}60%,100%{transform:translateX(280%) rotate(20deg)}}
  @keyframes csbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  /* reef motion */
  @keyframes csray{0%,100%{opacity:.16;transform:skewX(-12deg) translateX(0)}50%{opacity:.4;transform:skewX(-12deg) translateX(14px)}}
  @keyframes csshark{0%{transform:translateX(-34vw) translateY(0)}50%{transform:translateX(46vw) translateY(-16px)}100%{transform:translateX(128vw) translateY(0)}}
  @keyframes csturtle{0%{transform:translateX(-26vw) translateY(0) rotate(-2deg)}50%{transform:translateX(48vw) translateY(-20px) rotate(2deg)}100%{transform:translateX(126vw) translateY(0) rotate(-2deg)}}
  @keyframes csshoalA{0%{transform:translateX(-48vw)}100%{transform:translateX(132vw)}}
  @keyframes csfin{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
  @keyframes csjelly{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-16px) scaleY(.85)}}
  @keyframes cskelp{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
  #csroot .cs-sway{transform-origin:top center;animation:cssway 6.5s ease-in-out infinite}
  #csroot .cs-bob{animation:csbob 6s ease-in-out infinite}

  @media (max-width:920px){
    #csroot .cs-card,
    #csroot .cs-card:nth-child(2),
    #csroot .cs-card:nth-child(3),
    #csroot .cs-card:nth-child(4){width:min(340px,86vw);margin-top:0;transform:rotate(0deg)!important}
    #csroot .cs-doodle{display:none}
    #csroot .cs-mini{right:-10px!important}
    /* thin the reef on small screens: drop the big roamers, keep the coral floor + faint rays */
    #csroot .cs-shark,#csroot .cs-turtle,#csroot .cs-shoal-b,#csroot .cs-jelly-b{display:none!important}
    #csroot .cs-ray{opacity:.12!important}
  }
  @media (prefers-reduced-motion: reduce){
    #csroot *{animation:none!important}
  }

  /* ===== Past Crew (86d3rtytt) — count-agnostic grid =====
     Deliberately its own `.tc-past-*` namespace, structurally independent from
     `.cs-board`/`.cs-cards`/`.cs-card`: no nth-child positioning, no fixed count,
     so 0, 1 or 20 entries all lay out cleanly and neither section can ever break
     the other. Sits inside #csroot, so it inherits the reef backdrop + box-sizing. */
  #csroot .tc-past-crew{position:relative;z-index:1;padding:clamp(8px,2vw,20px) clamp(16px,4vw,40px) clamp(30px,4vw,44px)}
  #csroot .tc-past-inner{max-width:1180px;margin:0 auto}
  #csroot .tc-past-head{text-align:center;margin-bottom:clamp(20px,3vw,34px)}
  #csroot .tc-past-title{font:800 clamp(28px,4.4vw,44px)/1 var(--font-display);color:#0B6E66;margin:0;text-shadow:2px 3px 0 rgba(11,110,102,.14)}
  #csroot .tc-past-sub{font:600 clamp(15px,2vw,18px)/1 'Caveat',cursive;color:#06373d;margin-top:6px}

  #csroot .tc-past-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(16px,2.2vw,28px);align-items:start}
  #csroot .tc-past-card{background:#FFFDF7;border:1.5px solid #e2d7bf;border-radius:10px;box-shadow:0 16px 28px -18px rgba(15,40,45,.5);padding:12px 12px 15px}
  #csroot .tc-past-photo{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:#D5F3F5;box-shadow:0 2px 0 rgba(90,60,30,.08)}
  #csroot .tc-past-photo img{width:100%;height:100%;object-fit:cover;display:block}
  #csroot .tc-past-photo--empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#bfe9ec,#8fc9d3)}
  #csroot .tc-past-photo--empty span{font:800 clamp(44px,6vw,64px)/1 var(--font-display);color:#0B6E66;opacity:.55}
  #csroot .tc-past-name{font:700 26px/.9 'Caveat',cursive;color:#0B6E66;margin:11px 2px 0}
  #csroot .tc-past-year{display:inline-block;font:800 10px/1 'Nunito Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#FCF6EC;background:#146A73;padding:5px 9px;border-radius:3px;margin:7px 2px 0;transform:rotate(-1deg)}
  #csroot .tc-past-bio{font:400 13.5px/1.62 'Nunito Sans',sans-serif;color:#2A3B33;margin:9px 2px 0;text-wrap:pretty}

  /* Match the board's existing 920px breakpoint — tighten the grid so it never
     overflows on phones (auto-fill drops to 2 cols ~360px, 1 col below ~200px). */
  @media (max-width:920px){
    #csroot .tc-past-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
    #csroot .tc-past-name{font-size:23px}
  }