/* Tidechart — a ruled tide book. Signature: window / leaves / height rows. */
:root {
  --ink: #1b2a33; --sea: #0e6b6b; --clay: #c4552a; --paper: #f3efe4; --rule: #cfc6b2;
  --disp: "Libre Baskerville", Georgia, serif;
  --ui: "Atkinson Hyperlegible", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ui); font-size: 17px; line-height: 1.55; }
a { color: var(--sea); }
.td-skip { position: absolute; left: -999px; }
.td-skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 3; }
.td-rule { max-width: 920px; margin: 0 auto; padding: 0 18px; }
.td-mast { border-bottom: 8px solid var(--sea); background: #fffdf8; }
.td-brand { font-family: var(--disp); font-size: 1.7rem; color: var(--ink); text-decoration: none; display: block; padding-top: 16px; }
.td-where { margin: 0; font-size: 0.85rem; letter-spacing: 0.04em; }
.td-nav { display: flex; gap: 16px; padding: 10px 0 14px; }
.td-nav a { color: var(--ink); }
.td-menu { display: none; float: right; margin-top: 16px; font: inherit; background: var(--sea); color: #fff; border: 0; padding: 8px 12px; }
.td-fold { display: none; background: #e7f3f3; padding: 8px 18px 14px; }
.td-fold[hidden] { display: none; }
.td-fold a { display: block; padding: 8px 0; color: var(--ink); }
h1, h2, h3 { font-family: var(--disp); line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 4vw, 2.45rem); }
.td-block { padding: 36px 0; border-bottom: 1px solid var(--rule); }
.td-tide { list-style: none; margin: 16px 0; padding: 0; border-top: 2px solid var(--ink); }
.td-tide li { display: grid; grid-template-columns: 140px 1fr 90px; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ink); font-variant-numeric: tabular-nums; }
.td-tide .td-h { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.td-height { font-family: var(--disp); font-size: 1.3rem; color: var(--sea); text-align: right; }
.td-note { background: #fff; border-left: 6px solid var(--clay); padding: 14px 16px; }
.td-prices { width: 100%; border-collapse: collapse; }
.td-prices th, .td-prices td { text-align: left; padding: 8px 10px; border-bottom: 1px dashed var(--rule); }
.td-form { background: #fff; padding: 18px; border: 1px solid var(--ink); }
.td-f { margin-bottom: 12px; }
.td-l { display: block; font-weight: 700; }
.td-in { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--ink); }
.td-tick { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 0.88rem; margin: 10px 0; }
.td-btn { background: var(--sea); color: #fff; border: 0; font: inherit; font-weight: 700; padding: 12px 16px; cursor: pointer; width: 100%; }
.td-mark { font-weight: 700; }
.td-mark.is-bad { color: #8e2418; }
.td-ebb { background: #e7f3f3; padding: 16px; }
.td-foot { background: #1b2a33; color: #d5e4e2; padding: 28px 0; font-size: 0.9rem; }
.td-foot a { color: #fff; }
.td-pair { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; }
@media (max-width: 800px) {
  .td-nav { display: none; }
  .td-menu { display: inline-block; }
  .td-fold { display: block; }
  .td-tide li, .td-pair { grid-template-columns: 1fr; }
  .td-height { text-align: left; }
}