/* Tidora web — brand system: deep navy ground, aqua/teal water,
   gold accents, coral reserved for flood breach. Plain CSS, no build. */
:root{
  --navy-deep:#041E2E; --navy:#062A3A; --navy-card:#0A3648;
  --aqua:#22D3EE; --teal:#2DD4BF; --gold:#F5C86B; --coral:#FF6B57;
  --text:#FFFFFF; --text-2:rgba(255,255,255,.68); --text-3:rgba(255,255,255,.42);
  --rim:rgba(34,211,238,.25);
}
*{box-sizing:border-box}
html{background:var(--navy-deep)}
body{
  margin:0; color:var(--text); background:var(--navy-deep);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.55;
}
a{color:var(--aqua); text-decoration:none}
a:hover{text-decoration:underline}
header.site{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 1.1rem; background:var(--navy); border-bottom:1px solid var(--rim);
  position:sticky; top:0; z-index:5;
}
header.site .brand{display:flex; align-items:center; gap:.55rem; color:var(--text);
  font-size:1.35rem; font-weight:600; letter-spacing:.01em}
header.site .brand:hover{text-decoration:none}
header.site nav{display:flex; gap:1.1rem; align-items:center; font-size:.95rem}
header.site nav a.cta{
  background:var(--aqua); color:var(--navy-deep); font-weight:600;
  padding:.42rem .9rem; border-radius:999px;
}
header.site nav a.cta:hover{text-decoration:none; background:var(--teal)}
main{max-width:880px; margin:0 auto; padding:1.4rem 1.1rem 2.5rem}
footer.site{
  max-width:880px; margin:0 auto; padding:1.2rem 1.1rem 2.2rem;
  border-top:1px solid var(--rim);
}
h1{font-size:2rem; line-height:1.2; margin:.4rem 0 .5rem}
h2{font-size:1.25rem; margin:1.8rem 0 .6rem; color:var(--text)}
p{margin:.55rem 0}
.meta{color:var(--text-2)}
.fine{color:var(--text-3); font-size:.85rem}
nav.crumbs{font-size:.9rem; color:var(--text-3); margin-bottom:.4rem}
nav.crumbs a{color:var(--text-2)}
.live{
  background:var(--navy-card); border:1px solid var(--rim); border-left:4px solid var(--teal);
  border-radius:10px; padding:.6rem .9rem; margin:1rem 0;
}
table{border-collapse:collapse; width:100%; margin:.6rem 0 1rem; font-size:.95rem}
table th, table td{padding:.4rem .6rem; text-align:left; border-bottom:1px solid rgba(255,255,255,.08)}
table.tides th{white-space:nowrap; color:var(--text-2); font-weight:600; width:6.5rem}
table.tides tr.today{background:rgba(34,211,238,.10)}
table.tides tr.today th{color:var(--aqua)}
table.levels{max-width:26rem}
table.levels th{color:var(--gold); font-weight:600; width:55%}
ul.near{list-style:none; padding:0; margin:.5rem 0}
ul.near li{padding:.42rem 0; border-bottom:1px solid rgba(255,255,255,.07)}
ul.cols{list-style:none; padding:0; margin:.5rem 0; columns:3 12rem; column-gap:2rem}
ul.cols li{padding:.28rem 0; break-inside:avoid}
section.pitch{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--navy-card); border:1px solid var(--rim); border-radius:16px;
  padding:1.1rem 1.2rem; margin:2rem 0;
}
section.pitch h2{margin-top:.1rem}
section.pitch img{flex:none; margin-top:.2rem}
a.store{
  display:inline-block; background:var(--aqua); color:var(--navy-deep);
  font-weight:600; padding:.55rem 1.1rem; border-radius:999px; margin-top:.3rem;
}
a.store:hover{background:var(--teal); text-decoration:none}
@media (max-width:560px){
  h1{font-size:1.6rem}
  section.pitch{flex-direction:column}
  header.site nav a:not(.cta){display:none}
}