/* ============================================================
   The Crab Island Catch — coming-soon landing page
   Crab Island Radio experience (water, glass, platform rail)
   + the paper's own identity (newsprint panels, serif masthead).
   ============================================================ */
:root{
  --sea-900:#04121c;
  --sea-800:#061422;
  --aqua:#40e0d0;
  --aqua-soft:#7df0e2;
  --aqua-dim:#9be8dc;
  --gold:#ffd76a;
  --ink:#eaf6f6;
  --ink-dim:#d7efec;
  --ink-faint:#7fa8a3;
  --panel-border:rgba(64,224,208,.28);
  --radius:16px;
  /* newsprint */
  --cream:#f8f1de;
  --cream-dark:#efe4c8;
  --paper-ink:#2b2620;
  --paper-dim:#5a5347;
  --paper-rule:#d8c9a3;
  --turquoise:#0e7c86;
  --turquoise-deep:#0a5f67;
  --serif:Georgia,'Times New Roman',serif;
  --sans:"Trebuchet MS",Verdana,Geneva,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--sea-900);
  min-height:100vh;
  line-height:1.5;
}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
}

/* ---- full-page water background (video with poster fallback) ---- */
.bg-video{
  position:fixed;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
}
.bg-poster{
  position:fixed;inset:0;z-index:-3;
  background:var(--sea-900) url("images/background-poster.jpg") center/cover no-repeat;
}
.bg-tint{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(160deg,rgba(2,16,28,.82),rgba(2,16,28,.55) 55%,rgba(20,4,32,.78));
}
a{color:var(--aqua-soft)}
img{max-width:100%}

/* ---- header ---- */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:16px;
  padding:12px 28px;
  background:rgba(4,18,30,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--panel-border);
}
.brand{text-decoration:none;display:flex;align-items:center;gap:12px}
.brand .logo{width:46px;height:46px;border-radius:50%;flex:none}
.brand .wordmark{
  font-family:var(--serif);
  font-size:24px;letter-spacing:1px;color:var(--cream);font-weight:bold;
  text-shadow:0 0 14px rgba(64,224,208,.35);white-space:nowrap;
}
.brand .tagline-sub{
  display:block;font-family:var(--sans);font-size:10px;letter-spacing:4px;
  color:var(--aqua-dim);text-shadow:none;font-weight:normal;margin-top:2px;
}
.main-nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap;align-items:center}
.main-nav a{
  color:#bfefff;text-decoration:none;font-size:13.5px;
  padding:8px 11px;border-radius:8px;white-space:nowrap;
}
.main-nav a:hover{background:rgba(64,224,208,.16);color:#fff}
.main-nav a.radio-link{
  border:1px solid var(--panel-border);color:var(--aqua-soft);margin-left:6px;
}
.main-nav a.radio-link:hover{background:rgba(64,224,208,.22);color:#fff}

/* ---- layout shell ---- */
.wrap{max-width:1100px;margin:0 auto;padding:30px 70px 30px 28px}

/* ---- newsprint panels: the paper's own identity ---- */
.panel.newsprint{
  background:var(--cream);
  color:var(--paper-ink);
  font-family:var(--serif);
  border:1px solid var(--paper-rule);
  border-radius:var(--radius);
  padding:30px 34px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  margin-bottom:26px;
}
.panel.newsprint h1{
  font-size:clamp(1.9rem,5vw,2.8rem);
  color:var(--turquoise-deep);
  margin-bottom:1rem;
  text-align:center;
}
.panel.newsprint h2{
  font-size:1.4rem;
  color:var(--turquoise-deep);
  border-bottom:2px solid var(--turquoise);
  display:inline-block;
  padding-bottom:.25rem;
  margin-bottom:.9rem;
}
.panel.newsprint p{margin-bottom:.8rem;line-height:1.65}
.panel.newsprint a{color:var(--turquoise-deep)}

.hero{text-align:center}
.hero .mission{font-size:1.15rem;max-width:640px;margin:0 auto 1rem}
.hero .mission-sub{font-style:italic;color:var(--paper-dim)}

/* ---- three columns ---- */
.columns{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.4rem;margin-bottom:26px;
}
.columns .panel.newsprint{margin-bottom:0}

/* ---- forms on newsprint ---- */
.notify-form{display:flex;gap:.5rem;margin-top:.75rem;flex-wrap:wrap}
.notify-form input{
  flex:1 1 160px;padding:.6rem .75rem;font-family:var(--serif);font-size:1rem;
  border:1px solid var(--paper-rule);border-radius:4px;background:#fffdf6;color:var(--paper-ink);
}
.notify-form button,
.tip-button,
.stacked-form button{
  padding:.6rem 1.1rem;font-family:var(--serif);font-size:1rem;
  background:var(--turquoise);color:#fff;border:none;border-radius:4px;cursor:pointer;
}
.notify-form button:hover,
.tip-button:hover,
.stacked-form button:hover{background:var(--turquoise-deep)}
.form-note{margin-top:.75rem;font-style:italic;color:var(--paper-dim);font-size:.95rem}
.form-note.thanks{color:var(--turquoise-deep);font-weight:bold;font-style:normal}

.stacked-form{margin-top:1rem;text-align:left}
.stacked-form label{
  display:block;font-size:.9rem;margin:.6rem 0 .25rem;color:var(--paper-dim);
}
.stacked-form input,
.stacked-form textarea{
  width:100%;padding:.6rem .75rem;font-family:var(--serif);font-size:1rem;
  border:1px solid var(--paper-rule);border-radius:4px;background:#fffdf6;color:var(--paper-ink);
}
.stacked-form textarea{resize:vertical}
.stacked-form button{margin-top:.9rem}

/* checkbox option groups */
.check-group{
  border:1px solid var(--paper-rule);border-radius:4px;background:#fffdf6;
  padding:.7rem .9rem;margin:.6rem 0;
}
.check-group legend{font-size:.9rem;color:var(--paper-dim);padding:0 .4rem}
.stacked-form label.check{
  display:flex;gap:.55rem;align-items:flex-start;
  font-size:1rem;color:var(--paper-ink);margin:.45rem 0;cursor:pointer;
}
.stacked-form .check input{width:auto;margin-top:.25rem;accent-color:var(--turquoise)}

/* ---- tabbed submissions hub ---- */
.contribute{text-align:center}
.contrib-intro{max-width:660px;margin:0 auto 1rem}
.tab-bar{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
  margin:1.2rem 0 1.6rem;
}
.tab{
  font-family:var(--serif);font-size:.95rem;
  padding:.55rem 1.05rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--paper-rule);background:#fffdf6;color:var(--turquoise-deep);
}
.tab:hover{border-color:var(--turquoise)}
.tab.active{background:var(--turquoise);border-color:var(--turquoise);color:#fff;font-weight:bold}
.tab-panels{text-align:left}
.tab-panel{display:none}
.tab-panel.active{display:block}
.tab-panel h3{
  font-size:1.25rem;color:var(--turquoise-deep);text-align:center;margin-bottom:.5rem;
}
.tab-panel .lede{max-width:640px;margin:0 auto 1rem;text-align:center}
.tab-panel .stacked-form{max-width:560px;margin-left:auto;margin-right:auto}
.price-note{
  text-align:center;font-weight:bold;color:var(--turquoise-deep);margin-bottom:.5rem;
}
.disclosure{
  font-size:.85rem;font-style:italic;color:var(--paper-dim);text-align:center;
  max-width:560px;margin:.8rem auto 0;
}
.fine-print{
  font-size:.72rem;font-style:italic;color:var(--paper-dim);opacity:.75;text-align:center;
  max-width:520px;margin:1.6rem auto 0;
}
.field-hint{font-weight:normal;color:var(--paper-dim);font-size:.85em}
.stacked-form select{
  width:100%;padding:.6rem .75rem;font-family:var(--serif);font-size:1rem;
  border:1px solid var(--paper-rule);border-radius:4px;background:#fffdf6;color:var(--paper-ink);
}
.stacked-form input[type="file"]{border:none;background:none;padding:.4rem 0}

/* ---- cover teaser ---- */
.cover-teaser{text-align:center}
.cover-label{
  display:inline-block;background:var(--turquoise);color:#fff;font-style:italic;
  padding:.3rem 1rem;border-radius:999px;margin-bottom:1rem;font-size:.95rem;
  font-family:var(--sans);
}
.cover-teaser img{
  display:block;max-width:520px;width:100%;margin:0 auto;
  border:1px solid var(--paper-rule);
  box-shadow:0 4px 18px rgba(0,0,0,.25);
}
.cover-caption{
  font-style:italic;color:var(--paper-dim);max-width:520px;margin:1rem auto 0;
}

/* ---- platform rail : fixed right on desktop, bottom bar on mobile ---- */
.platform-rail{
  position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:10px;
  background:rgba(4,18,30,.6);border:1px solid var(--panel-border);
  padding:12px 9px;border-radius:999px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.platform-rail a{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(64,224,208,.1);border:1px solid rgba(64,224,208,.4);
  color:var(--aqua-soft);text-decoration:none;font-weight:bold;font-size:15px;
}
.platform-rail a:hover{background:rgba(64,224,208,.32);color:#fff}
.platform-rail svg{width:20px;height:20px}
.platform-rail .rail-label{
  writing-mode:vertical-rl;font-size:9px;letter-spacing:3px;color:var(--ink-faint);
  text-align:center;margin:2px 0;font-family:var(--sans);
}

/* ---- footer ---- */
.site-footer{
  text-align:center;padding:1.5rem 1rem 2.5rem;
  background:rgba(4,18,30,.72);border-top:1px solid var(--panel-border);
  color:var(--ink-dim);font-size:.9rem;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.site-footer .llc{color:var(--ink-faint);font-size:.85rem;margin-top:.3rem}
.site-footer .foot-links{margin-top:.6rem}

/* ---- responsive ---- */
@media (max-width:860px){
  .wrap{padding:18px 12px 26px}
  .site-header{padding:10px 14px;flex-wrap:wrap;row-gap:8px}
  .brand .wordmark{font-size:18px}
  .main-nav{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .main-nav a{font-size:11px;padding:6px 7px}
  .panel.newsprint{padding:20px 16px}
  .tab-bar{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding-bottom:.4rem}
  .tab{flex:none}
  .platform-rail{
    position:static;transform:none;flex-direction:row;justify-content:center;
    width:max-content;margin:0 auto 22px;border-radius:999px;flex-wrap:wrap;
  }
  .platform-rail .rail-label{writing-mode:horizontal-tb}
  .platform-rail a{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  .bg-video{display:none}
}

/* Astrid — on-page presenter. Invisible player: green keyed out live on the
   canvas, so she stands on the page itself. No entrance animation. */
.astrid-spot{
  position:relative;
  width:min(300px,72vw);
  margin:0 auto .5rem;
  visibility:hidden;
}
.astrid-spot.on{visibility:visible}
.astrid-spot canvas{width:100%;height:auto;display:block}
.astrid-spot video{display:none}
.astrid-pill{
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  display:none;background:none;border:0;padding:0;cursor:pointer;z-index:5;
}
.astrid-pill.show{display:block}
.astrid-pill span{
  display:inline-block;background:rgba(11,61,74,.94);color:#f7f2df;
  border:1px solid #2aa198;border-radius:999px;padding:10px 22px;
  font-size:.95rem;font-family:Georgia,serif;white-space:nowrap;
  box-shadow:0 8px 28px rgba(0,0,0,.4);
  animation:astrid-pulse 1.6s ease-in-out infinite;
}
@keyframes astrid-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}