/* ============================================================================
   tybeecat.com
   Palette is drawn from the island itself: marsh grass, oyster shell, the
   desaturated green-grey of the Back River, and Fort Pulaski's brick.
   Deliberately not coastal turquoise.
   ========================================================================== */

:root {
  /* ground + ink */
  --ground:    #F3F4EE;
  --surface:   #FBFBF7;
  --surface-2: #E7E8DE;
  --ink:       #191D18;
  --ink-2:     #5D6459;
  --rule:      #D3D6C9;

  /* accents */
  --marsh:     #4E6339;
  --marsh-sat: #566B3F;
  --tide:      #33545C;
  --brick:     #9C4A33;
  --sand:      #B08C4E;

  /* type */
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:    "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* scale */
  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.19vw, 1.13rem);
  --step-1:  clamp(1.24rem, 1.16rem + 0.38vw, 1.47rem);
  --step-2:  clamp(1.51rem, 1.36rem + 0.71vw, 1.94rem);
  --step-3:  clamp(1.84rem, 1.58rem + 1.24vw, 2.58rem);
  --step-4:  clamp(2.24rem, 1.79rem + 2.10vw, 3.44rem);

  --gutter: max(20px, min(4vw, 48px));
  --measure: 66ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:    #13160F;
    --surface:   #1B1F17;
    --surface-2: #252A20;
    --ink:       #EBEDE3;
    --ink-2:     #99A190;
    --rule:      #333A2C;
    --marsh:     #A8C083;
    --marsh-sat: #A3BC7E;
    --tide:      #82AEB6;
    --brick:     #DC8264;
    --sand:      #D4B87F;
  }
}

:root[data-theme="dark"] {
  --ground:    #13160F;
  --surface:   #1B1F17;
  --surface-2: #252A20;
  --ink:       #EBEDE3;
  --ink-2:     #99A190;
  --rule:      #333A2C;
  --marsh:     #A8C083;
  --marsh-sat: #A3BC7E;
  --tide:      #82AEB6;
  --brick:     #DC8264;
  --sand:      #D4B87F;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-synthesis-weight: none;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--marsh); }

:focus-visible {
  outline: 2px solid var(--marsh);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--step-4); letter-spacing: -0.035em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.015em; }

p { margin: 0; }

/* --- layout primitives ---------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.flow > * + * { margin-block-start: 1.1em; }
.flow > * + h2 { margin-block-start: 2.4em; }
.flow > * + h3 { margin-block-start: 2em; }
.flow > h2 + *, .flow > h3 + * { margin-block-start: 0.7em; }
/* an eyebrow labels the heading under it — keep the pair tight */
.flow > .eyebrow + h2,
.flow > .eyebrow + h3 { margin-block-start: 0.35em; }

.measure { max-width: var(--measure); }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.48;
  color: var(--ink-2);
  max-width: 54ch;
}

/* --- masthead ------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 58px;
  flex-wrap: wrap;
  padding-block: 0.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--ink);
  margin-inline-end: auto;
}
.wordmark svg { width: 26px; height: 26px; color: var(--marsh); flex: none; }

.nav {
  display: flex;
  gap: 0.15rem 1.05rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}
.nav a { text-decoration: none; color: var(--ink-2); padding-block: 0.2rem; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--marsh);
}

/* --- hero ----------------------------------------------------------------- */

.hero { padding-block: clamp(2.6rem, 7vw, 5rem) clamp(1.4rem, 3vw, 2.2rem); }
.hero .eyebrow + h1 { margin-block-start: 0.5rem; }
.hero h1 { max-width: 15ch; }
.hero .lede { margin-block-start: 1.3rem; }

/* --- the rail: body text with Lila's notes in the margin ------------------ */

.rail {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(0, 15rem);
  gap: 2.6rem;
  align-items: start;
}
@media (max-width: 860px) {
  .rail { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
}

.rail__notes { display: flex; flex-direction: column; gap: 1.4rem; }

/* --- Lila's notes --------------------------------------------------------- */

.note {
  font-family: var(--mono);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-2);
  border-inline-start: 2px solid var(--marsh);
  padding-inline-start: 0.85rem;
}
.note__who {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  color: var(--marsh);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.68rem;
  margin-block-end: 0.4rem;
}
.note__who svg { width: 15px; height: 15px; flex: none; }

/* --- sections ------------------------------------------------------------- */

.section { padding-block: clamp(2.4rem, 6vw, 4.2rem); }
.section + .section { border-block-start: 1px solid var(--rule); }

/* --- cards ---------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 1.35rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.card h3 { font-size: var(--step-1); }
.card p { font-size: var(--step--1); line-height: 1.55; color: var(--ink-2); }

a.card { text-decoration: none; transition: border-color .15s, transform .15s; }
a.card:hover { border-color: var(--marsh); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { a.card:hover { transform: none; } }

.card__more {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--marsh);
  margin-block-start: auto;
  padding-block-start: 0.5rem;
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  padding: 0.72rem 1.15rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ground);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn:hover { background: var(--marsh); border-color: var(--marsh); color: var(--ground); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--quiet:hover { background: transparent; border-color: var(--marsh); color: var(--marsh); }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* --- tide panel (the signature element) ----------------------------------- */

.tide {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-block-start: 3px solid var(--tide);
  padding: 1.5rem 1.4rem;
}
.tide__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-block-end: 1.1rem;
}
.tide__station {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.tide__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.tide__row {
  display: grid;
  grid-template-columns: 5.2rem 1fr auto;
  gap: 0.8rem;
  align-items: baseline;
  font-family: var(--mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  padding-block-end: 0.5rem;
  border-block-end: 1px solid var(--rule);
}
.tide__row:last-child { border-block-end: 0; padding-block-end: 0; }
.tide__time { font-weight: 500; }
.tide__kind { color: var(--ink-2); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem; }
.tide__ht { color: var(--ink-2); }
.tide__fallback { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }

/* --- rules list (beach regulations) --------------------------------------- */

.rules { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.rules li {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 1rem;
  padding-block: 0.95rem;
  border-block-end: 1px solid var(--rule);
  align-items: start;
}
@media (max-width: 520px) {
  .rules li { grid-template-columns: 1fr; gap: 0.3rem; }
}
.rules li:last-child { border-block-end: 0; }
.tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.42rem;
  border: 1px solid currentColor;
  justify-self: start;
  white-space: nowrap;
  line-height: 1.5;
}
.tag--no    { color: var(--brick); }
.tag--ok    { color: var(--marsh); }
.tag--watch { color: var(--sand); }
.rules p { font-size: var(--step--1); line-height: 1.6; }
.rules strong { font-weight: 600; }
.fine {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--brick);
  margin-block-start: 0.3rem;
  letter-spacing: 0.02em;
}

/* --- callout -------------------------------------------------------------- */

.callout {
  border: 1px solid var(--brick);
  border-inline-start-width: 3px;
  background: color-mix(in srgb, var(--brick) 6%, var(--surface));
  padding: 1.1rem 1.2rem;
  font-size: var(--step--1);
  line-height: 1.6;
}
.callout__title {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brick);
  margin-block-end: 0.45rem;
}

/* --- eat list ------------------------------------------------------------- */

.spot {
  padding-block: 1.5rem;
  border-block-end: 1px solid var(--rule);
  display: grid;
  gap: 0.5rem;
}
.spot:last-child { border-block-end: 0; }
.spot__head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.spot__head h3 { font-size: var(--step-1); }
.spot__meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.spot p { font-size: var(--step--1); line-height: 1.6; max-width: var(--measure); }
.verdict {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--marsh);
  border-inline-start: 2px solid var(--marsh);
  padding-inline-start: 0.7rem;
  max-width: 52ch;
}

/* --- month table ---------------------------------------------------------- */

.months { display: grid; gap: 0; }
.month {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1.4rem;
  padding-block: 1.25rem;
  border-block-end: 1px solid var(--rule);
  align-items: start;
}
@media (max-width: 620px) {
  .month { grid-template-columns: 1fr; gap: 0.4rem; }
}
.month:last-child { border-block-end: 0; }
.month__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
}
.month__rate {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: block;
  margin-block-start: 0.15rem;
}
.month p { font-size: var(--step--1); line-height: 1.6; max-width: var(--measure); }
.month__events {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--tide);
  margin-block-start: 0.45rem;
  letter-spacing: 0.02em;
}

/* --- booking cards -------------------------------------------------------- */

/* booking cards keep a sane width even when there is only one manager */
.grid--book {
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 27rem));
  justify-content: start;
}

.book {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.book__co { font-family: var(--display); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.02em; }
.book p { font-size: var(--step--1); color: var(--ink-2); line-height: 1.55; }
.book .btn-row { margin-block-start: auto; padding-block-start: 0.6rem; }

/* --- facts strip ---------------------------------------------------------- */

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.2rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.facts li { padding-block: 0.3rem; }
.facts b { color: var(--ink); font-weight: 500; }

/* --- figure --------------------------------------------------------------- */

figure { margin: 0; display: grid; gap: 0.6rem; }
figcaption {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.shot {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--surface-2);
}
/* full-width letterbox band — crops tall photos to a banner without squashing */
.band {
  aspect-ratio: 2.4 / 1;
  object-fit: cover;
  object-position: center 42%;
}
@media (max-width: 700px) {
  .band { aspect-ratio: 16 / 10; }
}

/* --- inline SVG figures (map, tide section) ------------------------------- */

.fig {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  color: var(--ink);
}
.fig text { font-family: var(--mono); fill: currentColor; }
.fig-road  { font-size: 13px; letter-spacing: 0.1em; opacity: 0.55; }
.fig-st    { font-size: 13px; opacity: 0.5; }
.fig-water { font-size: 13px; letter-spacing: 0.14em; fill: var(--tide); opacity: 0.8; }
.fig-pt    { font-size: 14px; }
.fig-dist  { font-size: 12.5px; opacity: 0.62; }
.fig-off   { font-size: 13px; opacity: 0.75; }
.fig-here  { font-size: 15px; font-weight: 500; fill: var(--marsh); }

figure > .fig + figcaption { margin-block-start: .7rem; }

.photo-slot {
  aspect-ratio: 3 / 2;
  max-width: 100%;
  background: var(--surface-2);
  border: 1px dashed var(--rule);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-2);
  text-align: center;
  padding: 1rem;
}

/* --- footer --------------------------------------------------------------- */

.footer {
  border-block-start: 1px solid var(--rule);
  margin-block-start: 2rem;
  padding-block: 2.6rem 3.4rem;
  font-size: var(--step--1);
  color: var(--ink-2);
}
.footer__grid {
  display: grid;
  gap: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.footer h4 {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-2);
  margin-block-end: 0.6rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__fine { margin-block-start: 2.2rem; font-size: 0.74rem; line-height: 1.6; max-width: 58ch; }

/* --- theme toggle --------------------------------------------------------- */

.theme-btn {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.34rem 0.6rem;
  cursor: pointer;
}
.theme-btn:hover { color: var(--ink); border-color: var(--marsh); }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: 0.5rem;
  z-index: 100;
  background: var(--ink);
  color: var(--ground);
  padding: 0.6rem 0.9rem;
  font-family: var(--mono);
  font-size: var(--step--1);
}