/* =============================================================================
   Tide & Catch — "coastal field guide / tide chart"
   Warm sand paper, deep ocean-teal ink, coral accent, faint tide-line waves.
   Bricolage Grotesque display + Newsreader serif body + IBM Plex Mono readouts.
   ============================================================================= */

:root {
  --paper:    #f7f0e1;   /* warm sand */
  --paper-2:  #fdfaf2;
  --card:     #fffdf7;
  --ink:      #0c3b3b;   /* deep teal ink */
  --ink-2:    #14514f;
  --muted:    #5a6f6c;
  --faint:    #636f6c;
  --teal:     #1d7a72;
  --coral:    #e2603a;   /* sunrise-over-water */
  --coral-deep:#bc4725;
  --border:   #d8cdb4;
  --border-2: #c3b89c;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1080px;
  --radius: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- Coastal background: horizon wash + tide-line waves ----------------- */
.coast-bg { position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, #dfe9e3 0%, #eef0e0 14%, var(--paper) 34%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='26'%3E%3Cpath d='M0 13 Q35 3 70 13 T140 13' fill='none' stroke='%230c3b3b' stroke-opacity='0.06' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
}

/* A little angler rows slowly across the horizon, bobbing on the swell. */
.fisher { position: absolute; top: 23%; left: 0; width: 146px; height: 104px; will-change: transform; }
.fisher-boat { display: block; width: 100%; height: 100%; opacity: 0.9;
  background: url("/fisherman.png") no-repeat center / contain;
  background-image: -webkit-image-set(url("/fisherman.webp") type("image/webp"), url("/fisherman.png") type("image/png"));
  background-image: image-set(url("/fisherman.webp") type("image/webp"), url("/fisherman.png") type("image/png")); }
@media (prefers-reduced-motion: no-preference) {
  .fisher { animation: sail 52s linear infinite; }
  .fisher-boat { animation: bob 3.6s ease-in-out infinite; }
}
@keyframes sail { from { transform: translateX(-18vw); } to { transform: translateX(120vw); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.6deg); } 50% { transform: translateY(-5px) rotate(1.6deg); } }
@media (prefers-reduced-motion: reduce) { .fisher { left: 6%; } }

.wrap { width: min(var(--wrap), 91vw); margin-inline: auto; }

a { color: var(--coral-deep); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--coral); }
/* In-content links are underlined so they're distinguishable by more than colour (WCAG 1.4.1). */
main p a, main li a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* ---- Type --------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); }
h1 { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; margin: 0.1em 0 0.3em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); margin: 2.4rem 0 0.8rem; }
h3 { font-size: 1.12rem; }
.lede { font-size: 1.22rem; color: var(--ink-2); max-width: 58ch; line-height: 1.55; }

.kicker, .sky-label, .fact-grid dt, .product-cat, .breadcrumbs, .site-header nav a, .site-footer .copyright {
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--faint);
}

/* ---- Header / footer ---------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 20;
  background: rgba(247,240,225,0.85); backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--ink); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0; }
.brand { display: inline-flex; align-items: baseline; gap: 0.5rem; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark { color: var(--coral); font-size: 1.4rem; font-weight: 800; transform: translateY(2px); }
.brand-name { font-family: var(--display); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.site-header nav a { margin-left: 1.6rem; color: var(--ink-2); }
.site-header nav a:hover { color: var(--coral-deep); }

main.wrap { padding: 2.5rem 0 4rem; }

.site-footer { border-top: 2px solid var(--ink); color: var(--muted); font-size: 0.86rem; padding: 2rem 0 3rem; margin-top: 2rem; }
.site-footer .disclosure { margin: 0 0 0.6rem; max-width: 78ch; }
.site-footer .copyright { font-size: 0.72rem; letter-spacing: 0.05em; }

/* ---- Breadcrumbs -------------------------------------------------------- */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0 0 1.6rem; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs .sep { margin-left: 0.5rem; color: var(--border-2); }
.breadcrumbs [aria-current] { color: var(--coral-deep); }

/* ---- Hero --------------------------------------------------------------- */
.hero { padding: 2rem 0 1rem; }
.hero h1 { max-width: 16ch; position: relative; }
.hero h1::after { content: ""; display: block; width: 4.5rem; height: 5px; margin-top: 1rem;
  background: var(--coral); border-radius: 3px; }
.hero .lede { max-width: 54ch; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  main > section { animation: rise 0.6s ease both; }
  main > section:nth-of-type(1) { animation-delay: 0.06s; }
  main > section:nth-of-type(2) { animation-delay: 0.14s; }
  main > section:nth-of-type(3) { animation-delay: 0.22s; }
  main > section:nth-of-type(4) { animation-delay: 0.30s; }
}

/* ---- Live conditions widget (the hero feature) ------------------------- */
.sky-widget { position: relative; margin: 1.8rem 0 2.4rem; padding: 1.5rem 1.6rem 1.7rem;
  background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 8px 8px 0 rgba(12,59,59,0.12); }
.sky-widget::before { content: "● LIVE"; position: absolute; top: 1.3rem; right: 1.5rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--coral); font-weight: 500; }
.sky-widget h2 { margin: 0 0 0.15rem; font-size: 1.45rem; }
.sky-widget-sub { color: var(--muted); margin: 0.2rem 0 0; font-size: 0.95rem; font-family: var(--body); }
.sky-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.85rem; margin-top: 1.3rem; }
.sky-cell { padding: 0.95rem 1.05rem 1.05rem; border-radius: 9px; background: var(--paper);
  border: 1px solid var(--border); border-top: 3px solid var(--teal); }
.sky-label { display: block; margin-bottom: 0.4rem; }
.sky-value { display: block; font-family: var(--display); font-size: 1.18rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.sky-cell-wide { grid-column: 1 / -1; }
.sky-updated { font-family: var(--mono); font-size: 0.71rem; color: var(--faint); margin-top: 1rem; letter-spacing: 0.02em; }

/* ---- Facts -------------------------------------------------------------- */
.facts .fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.8rem; }
.fact-grid div { padding: 0.95rem 1.05rem; border: 1px solid var(--border); border-radius: 9px; background: var(--paper-2); }
.fact-grid dt { display: block; margin-bottom: 0.35rem; }
.fact-grid dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }

/* ---- Link card lists ---------------------------------------------------- */
.location-list, .guide-list { list-style: none; padding: 0; display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 1.2rem 0; }
.location-list a, .guide-list a { display: block; padding: 1.1rem 1.2rem; background: var(--card);
  border: 1.5px solid var(--border-2); border-radius: 11px; color: var(--ink);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.location-list a:hover, .guide-list a:hover { transform: translateY(-3px); border-color: var(--coral);
  box-shadow: 6px 6px 0 rgba(226,96,58,0.18); }
.location-list strong, .guide-list strong { font-family: var(--display); font-size: 1.15rem; font-weight: 700; display: block; }
.location-list span, .guide-list span { display: block; color: var(--muted); font-size: 0.92rem; margin-top: 0.3rem; }

/* ---- Products ----------------------------------------------------------- */
.product-list { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 1.2rem; }
.product-card { display: flex; gap: 1rem; padding: 1.1rem; background: var(--card);
  border: 1.5px solid var(--border-2); border-radius: 11px; transition: border-color 0.2s, transform 0.2s; }
.product-card:hover { border-color: var(--teal); transform: translateY(-2px); }
.product-card img { border-radius: 8px; object-fit: cover; background: var(--paper); flex: 0 0 auto; }
.product-cat { display: block; color: var(--teal); margin-bottom: 0.2rem; }
.product-title { font-family: var(--display); font-size: 1.05rem; font-weight: 700; margin: 0.15rem 0 0.45rem; line-height: 1.18; }
.product-blurb { font-size: 0.93rem; color: var(--muted); margin: 0 0 0.7rem; }
.product-foot { display: flex; align-items: center; justify-content: space-between; margin: 0; }
.product-price { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.product-cta { background: var(--coral-deep); color: #fff; font-family: var(--display); font-weight: 700;
  font-size: 0.86rem; padding: 0.5rem 1rem; border-radius: 8px; transition: background 0.2s, transform 0.15s; }
.product-cta:hover { color: #fff; background: #a13d1f; transform: translateY(-1px); }

/* ---- Guide article ------------------------------------------------------ */
/* Two-column guide: prose fills the left column (left edge aligned with the
   breadcrumb), "Our picks" is a sticky sidebar filling the right. Single column
   on narrow screens. */
.guide { max-width: none; }
.guide-main > * { max-width: 68ch; }
.guide-aside h2 { margin-top: 0; }
.guide-aside .product-list { grid-template-columns: 1fr; }
@media (min-width: 980px) {
  .guide { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3rem; align-items: start; }
  .guide-aside { position: sticky; top: 5rem; }
}
.guide h2 { color: var(--teal); }
.guide ul { padding-left: 1.3rem; }
.guide li { margin: 0.5rem 0; }
.guide-foot { margin-top: 2.5rem; font-family: var(--mono); font-size: 0.85rem; }

section > p, .gear p { max-width: 66ch; color: var(--ink-2); }

/* ---- Maps --------------------------------------------------------------- */
.map-section { margin-top: 2.4rem; }
.spot-map { height: 400px; border: 2px solid var(--ink); border-radius: var(--radius);
  background: #cfe0e6; box-shadow: 8px 8px 0 rgba(12,59,59,0.10); overflow: hidden; }
.map-note { font-family: var(--mono); font-size: 0.72rem; color: var(--faint);
  letter-spacing: 0.04em; margin-top: 0.7rem; text-transform: uppercase; }
.leaflet-container { font-family: var(--body); }