/* intertidal notes */
@font-face { font-family: "Fraunces"; src: url("/a/f/fraunces.48282a415e.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/a/f/fraunces-italic.f0c442fc41.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/a/f/source-sans-3.587435ca9d.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/a/f/source-sans-3-italic.b9b0f6feec.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --paper: #f6f1e6;
  --paper-2: #efe7d6;
  --sand: #e3d5b8;
  --ink: #213432;
  --ink-soft: #4d605c;
  --sea: #2f6f68;
  --sea-deep: #1c4a46;
  --glass: #8fbfb2;
  --glass-pale: #d5e8e0;
  --coral: #c8694a;
  --line: rgba(33, 52, 50, 0.14);
  --shadow: 0 1px 2px rgba(33, 52, 50, 0.06), 0 8px 24px -12px rgba(33, 52, 50, 0.25);
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --r: 14px;
  --wrap: 68rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1c1b;
    --paper-2: #152624;
    --sand: #2a3a36;
    --ink: #e4ece7;
    --ink-soft: #a9bab4;
    --sea: #86c3b5;
    --sea-deep: #b5ddd2;
    --glass: #4f8f82;
    --glass-pale: #1d3532;
    --coral: #e79676;
    --line: rgba(228, 236, 231, 0.13);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px -14px rgba(0, 0, 0, 0.7);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.075rem/1.65 var(--sans);
  background-image: radial-gradient(ellipse 80rem 30rem at 10% -10%, var(--glass-pale), transparent 70%),
                    radial-gradient(ellipse 50rem 26rem at 110% 0%, var(--paper-2), transparent 70%);
  background-repeat: no-repeat;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--sea); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--coral); }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.18; color: var(--sea-deep); font-optical-sizing: auto; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); letter-spacing: -0.01em; margin: 0.2em 0 0.35em; }
h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); margin: 2em 0 0.5em; }
h3 { font-size: 1.2rem; margin: 1.6em 0 0.4em; }
p, ul, ol { margin: 0 0 1em; }
small, .small { font-size: 0.86rem; color: var(--ink-soft); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.prose { max-width: 42rem; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 40rem; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--paper); padding: 0.5rem 0.8rem; z-index: 10; }

/* header / nav */
.masthead { padding: 1.1rem 0; }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--sea-deep); font: 600 1.25rem/1 var(--serif); }
.brand svg { width: 34px; height: 34px; transition: transform 0.6s ease; }
.brand:hover svg { transform: rotate(-8deg) translateY(-1px); }
.brand em { font-weight: 400; color: var(--ink-soft); }
.nav { display: flex; gap: 0.2rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.nav a { display: block; padding: 0.35rem 0.75rem; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 500; transition: background 0.2s, color 0.2s; }
.nav a:hover { background: var(--glass-pale); color: var(--sea-deep); }
.nav a[aria-current="page"] { background: var(--sea-deep); color: var(--paper); }

/* hero */
.hero { position: relative; padding: 2.5rem 0 1rem; overflow: hidden; }
.hero .contours { position: absolute; inset: -2rem -10% auto auto; width: 70%; max-width: 46rem; opacity: 0.55; pointer-events: none; z-index: -1; }
.hero-curve { margin: 1.5rem 0 0.5rem; }
.hero-curve path.tide { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: draw 1.4s ease-out 0.1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-curve path.tide { animation: none; stroke-dashoffset: 0; } html { scroll-behavior: auto; } }

/* cards */
.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); margin: 1.2rem 0 2rem; }
.card { position: relative; background: color-mix(in srgb, var(--paper) 70%, var(--paper-2)); border: 1px solid var(--line); border-radius: var(--r); padding: 1.15rem 1.2rem 1.25rem; box-shadow: var(--shadow); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s; }
.card:hover { transform: translateY(-3px); border-color: var(--glass); }
.card h3 { margin-top: 0.4rem; }
.card a.cover::after { content: ""; position: absolute; inset: 0; }
.card .art { display: block; width: 100%; height: 7.5rem; border-radius: 10px; background: var(--glass-pale); }
.card p { color: var(--ink-soft); margin-bottom: 0; }

/* notices pointing to official sources */
.notice { display: flex; gap: 0.85rem; align-items: flex-start; border-radius: var(--r); padding: 0.95rem 1.1rem; margin: 1.4rem 0; background: color-mix(in srgb, var(--sand) 45%, var(--paper)); border: 1px solid color-mix(in srgb, var(--coral) 30%, var(--line)); font-size: 0.97rem; }
.notice svg { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; color: var(--coral); }
.notice p { margin: 0; }
.notice strong { color: var(--ink); }

/* calendar */
.upcoming { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.6rem; }
.upcoming li { display: grid; grid-template-columns: 11rem 6.5rem 1fr; align-items: center; gap: 0.8rem; padding: 0.6rem 0.9rem; border-radius: 10px; background: color-mix(in srgb, var(--paper-2) 70%, transparent); border: 1px solid var(--line); }
.upcoming .when { white-space: nowrap; font-family: var(--serif); font-weight: 600; color: var(--sea-deep); }
.badge { display: inline-block; text-align: center; min-width: 5.6rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.12rem 0.55rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.badge.excellent { color: var(--paper); background: var(--sea-deep); border-color: var(--sea-deep); }
.badge.good { color: var(--sea); }
.badge.fair { color: var(--ink-soft); border-style: dashed; }
.light { font-size: 0.85rem; color: var(--ink-soft); }
.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.6rem; margin: 0.8rem 0 2rem; padding: 0; list-style: none; }
.months a { display: block; padding: 0.7rem 0.9rem; border-radius: 10px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: color-mix(in srgb, var(--paper-2) 60%, transparent); transition: border-color 0.2s, transform 0.2s; }
.months a:hover { border-color: var(--sea); transform: translateY(-2px); }
.months a span { display: block; font-size: 0.82rem; color: var(--ink-soft); }
.months a[aria-current="true"] { border-color: var(--coral); }
table.days { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; font-variant-numeric: tabular-nums; }
.days th, .days td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.days th { font-weight: 600; font-size: 0.85rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.days tr.today td { background: color-mix(in srgb, var(--glass-pale) 70%, transparent); }
.days td.date { font-family: var(--serif); font-weight: 600; white-space: nowrap; color: var(--sea-deep); }
.days .low { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; margin-right: 1.4rem; min-width: 6rem; }
.days .low b { font-weight: 600; }
.days .spark { width: 9rem; height: 2.2rem; color: var(--sea); }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0 2rem; }
@media (max-width: 40rem) {
  .days .spark, .days .col-spark { display: none; }
  .upcoming li { grid-template-columns: 1fr auto; }
  .upcoming li .light { grid-column: 1 / -1; }
}

/* field guide + shores */
.guide-group { display: grid; grid-template-columns: 8rem 1fr; gap: 1.2rem; align-items: start; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.guide-group svg { width: 8rem; height: 8rem; color: var(--sea); }
.guide-group h2 { margin-top: 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 1rem 0 1.5rem; padding: 1rem 1.1rem; border-radius: var(--r); border: 1px solid var(--line); background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
.facts dt { font-weight: 600; color: var(--ink-soft); }
.facts dd { margin: 0; }
.shore-art { width: 100%; border-radius: var(--r); margin: 0.5rem 0 1rem; }
@media (max-width: 40rem) { .guide-group { grid-template-columns: 1fr; } .guide-group svg { width: 6rem; height: 6rem; } }

/* reminder form */
.remind { margin: 1.5rem 0 2rem; padding: 1.3rem; border-radius: var(--r); border: 1px solid var(--line); background: color-mix(in srgb, var(--glass-pale) 55%, var(--paper)); max-width: 34rem; }
.remind label { display: block; font-weight: 600; margin: 0.2rem 0 0.35rem; }
.remind input[type="email"], .remind select { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.75rem; margin-bottom: 0.9rem; }
.remind input:focus, .remind select:focus { outline: 2px solid var(--glass); outline-offset: 1px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font: 600 1rem/1 var(--sans); color: var(--paper); background: var(--sea-deep); border: 0; border-radius: 999px; padding: 0.75rem 1.3rem; cursor: pointer; transition: background 0.2s, transform 0.15s; }
.btn:hover { background: var(--coral); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.form-msg { margin: 0.8rem 0 0; min-height: 1.4em; color: var(--sea-deep); }
.form-msg.err { color: var(--coral); }

/* footer */
.foot { margin-top: 4rem; padding: 2rem 0 2.5rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.92rem; position: relative; }
.foot .wave { position: absolute; top: -18px; left: 0; width: 100%; height: 18px; color: var(--line); }
.foot .cols { display: flex; gap: 2rem; justify-content: space-between; flex-wrap: wrap; }
.foot ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.foot a { color: var(--ink-soft); }
.foot .caveat { max-width: 40rem; margin-top: 1rem; }

/* misc */
.crumbs { font-size: 0.9rem; color: var(--ink-soft); margin: 0.5rem 0 0; }
.crumbs a { color: var(--ink-soft); }
.lost { text-align: center; padding: 3rem 0; }
.lost svg { width: 14rem; color: var(--sea); }
.reveal { animation: rise 0.45s ease both; }
.reveal:nth-child(2) { animation-delay: 0.05s; } .reveal:nth-child(3) { animation-delay: 0.1s; } .reveal:nth-child(n+4) { animation-delay: 0.15s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }
@media print { .masthead nav, .foot .wave, .remind { display: none; } body { background: #fff; } }