/* =========================================================================
   TOURS KIT — css/tours.css (Templates/Tours, claude/tour-spec.md)
   Wild, bold, alive. Live Sky phases on html[data-sky].
   Legal pages and 404 still use css/styles.css (restaurant base).
   ========================================================================= */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/anton-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/anton-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../fonts/fraunces-latin-opsz-italic.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/dm-sans-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/dm-sans-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --slate: #123524; --slate-deep: #07150E;
  --amber: #E3A43A; --amber-dark: #B87A1A;
  --mist: #EEF1E4; --mist-2: #DDE5CF; --cream: #F7F8F0; --ink: #10241A;
  --on-dark: #EEF1E4; --on-dark-muted: #B8C6B4;
  --amber-ink: #7A4E07;               /* amber as text on light grounds (AA) */
  --light-bg: var(--mist); --light-bg-2: var(--mist-2); --light-fg: var(--ink); --light-muted: #3C4A42; --light-line: rgba(16,36,26,.14);
  --dark-bg: var(--slate-deep); --dark-bg-2: #0D2619;
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.23,1,.32,1);
  --r: 20px;
  /* scene palette — day */
  --sky-1: #7FC3DE; --sky-2: #D8EEF0; --sun: #FFF3C4; --sun-glow: rgba(255,240,180,.55);
  --far: #3F7A57; --mid: #1F4E33; --near: #0C2A1A; --leaf: #154A2C;
  --w-top: #2F6E63; --w-bot: #133A35; --rip: rgba(255,255,255,.35);
  --hull: #6B3B1C; --paddler: #0B1F15;
}
/* Live Sky: the scene and the light sections follow the real sky */
[data-sky="dawn"] { --sky-1:#F3B997; --sky-2:#B8CBD6; --sun:#FFE2B8; --sun-glow:rgba(255,190,140,.5); --far:#5D7E6B; --mid:#2E5541; --w-top:#7A8E8E; --w-bot:#2B4646; --light-bg:#F6EEE4; --light-bg-2:#EADFD1; }
[data-sky="golden"] { --sky-1:#F08A3E; --sky-2:#F7D27E; --sun:#FFE08A; --sun-glow:rgba(255,170,70,.6); --far:#4D5E2E; --mid:#26381C; --near:#140F06; --leaf:#2A2A10; --w-top:#B9783A; --w-bot:#3A2A16; --rip:rgba(255,220,150,.55); --light-bg:#F6EBD6; --light-bg-2:#EBDBBE; }
[data-sky="dusk"] { --sky-1:#4B3B78; --sky-2:#D98A7F; --sun:#FFC2A0; --sun-glow:rgba(230,130,130,.45); --far:#3A3A55; --mid:#211F35; --near:#0D0B18; --leaf:#1A1830; --w-top:#5A4C7A; --w-bot:#1A1630; --rip:rgba(255,200,220,.35); --light-bg:#EEE8F2; --light-bg-2:#E0D7E8; }
[data-sky="night"] { --sky-1:#03070D; --sky-2:#0C1E2C; --far:#0F2A22; --mid:#081B13; --near:#030A06; --leaf:#06170D; --w-top:#0B2129; --w-bot:#03090C; --rip:rgba(160,220,255,.18); --hull:#2A160A; --paddler:#020604;
  --light-bg:#0B2016; --light-bg-2:#10291D; --light-fg:#E7EEE2; --light-muted:#B4C3B2; --light-line:rgba(231,238,226,.16); --amber-ink:#F0B44F; }

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--light-fg); background: var(--dark-bg); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--amber); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px; font: 700 15px/1 var(--sans); letter-spacing: .02em; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .18s var(--ease), background-color .18s var(--ease), color .18s, border-color .18s; }
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.btn-lg { min-height: 56px; padding: 16px 28px; font-size: 16px; }
.btn-amber { background: var(--amber); color: #10241A; }
.btn-amber:hover { background: #F2B856; }
.btn-ghost { color: #fff; border-color: rgba(255,255,255,.7); background: rgba(4,14,9,.25); }
.btn-ghost:hover { background: rgba(255,255,255,.14); }
.btn-dark { background: var(--light-fg); color: var(--light-bg); }
.btn-outline { border-color: var(--light-fg); color: var(--light-fg); background: transparent; }
.btn .ico { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; }

/* ---------- header ---------- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; color: #fff; transition: background-color .3s, box-shadow .3s; }
.top.solid { background: rgba(7,21,14,.92); box-shadow: 0 8px 24px -16px rgba(0,0,0,.6); backdrop-filter: blur(8px); }
.top-inner { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 42px; height: 42px; flex: none; }
.bm-bg { fill: var(--amber); } .bm-water { fill: none; stroke: #10241A; stroke-width: 2.4; stroke-linecap: round; }
.bm-canoe { fill: #10241A; } .bm-paddle { stroke: #10241A; stroke-width: 2.4; stroke-linecap: round; }
.brand-name { font: 400 20px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.nav { display: flex; gap: 22px; }
.nav a { text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 0; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav a:hover::after { transform: scaleX(1); }
.top-actions { display: flex; align-items: center; gap: 12px; }
.lang { display: flex; border: 1.5px solid rgba(255,255,255,.6); border-radius: 999px; overflow: hidden; }
.lang button { background: transparent; color: #fff; border: 0; font: 700 13px var(--sans); padding: 0 12px; min-height: 36px; min-width: 40px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: #fff; color: #10241A; }
@media (max-width: 980px) { .nav { display: none; } }
@media (max-width: 560px) { .top-book { display: none; } .brand-name { font-size: 16px; } .brand-mark { width: 36px; height: 36px; } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: max(640px, 100svh); display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: linear-gradient(180deg, var(--sky-1), var(--sky-2) 70%); transition: background 2.4s; }
.scene { position: absolute; inset: 0; }
.scene-svg { width: 100%; height: 100%; display: block; }
.scene-svg * { transition: fill 2.4s, stroke 2.4s, opacity 2.4s; }
.sun { fill: var(--sun); } .sun-core { stop-color: var(--sun-glow); } .sun-edge { stop-color: rgba(255,255,255,0); }
.moon { fill: #E9EEF5; opacity: 0; } .stars circle { fill: #fff; opacity: 0; }
.far { fill: var(--far); } .mid { fill: var(--mid); } .near path { fill: var(--near); } .near .leaf { fill: var(--leaf); }
.near .vine { fill: none; stroke: var(--near); stroke-width: 5; }
.roots path { fill: none; stroke: var(--mid); stroke-width: 6; stroke-linecap: round; }
.w-top { stop-color: var(--w-top); } .w-bot { stop-color: var(--w-bot); }
.ripples path { fill: none; stroke: var(--rip); stroke-width: 3; stroke-linecap: round; }
.canoe-wrap { transform: translateX(880px); }
@media (max-width: 760px) { .canoe-wrap { transform: translateX(640px); } .croc { transform: translateX(-300px); } }
.canoe-hull { fill: var(--hull); } .canoe-rim { fill: none; stroke: rgba(0,0,0,.35); stroke-width: 3; }
.canoe-reflect { fill: rgba(0,0,0,.25); } .canoe-wake { fill: none; stroke: var(--rip); stroke-width: 3; stroke-linecap: round; }
.paddler .head, .paddler .body { fill: var(--paddler); }
.paddle .shaft { stroke: var(--paddler); stroke-width: 6; stroke-linecap: round; } .paddle .blade { fill: var(--paddler); }
.lantern { opacity: 0; } .lantern-glow { fill: rgba(255,190,90,.35); } .lantern-body { fill: #FFC864; } .lantern-pole { stroke: #2A160A; stroke-width: 3; }
.croc-back { fill: none; stroke: var(--w-bot); stroke-width: 9; stroke-linecap: round; opacity: .9; }
.croc-eye { fill: #2D3A1E; } .croc-pupil { fill: #E3A43A; } .croc-ring { fill: none; stroke: var(--rip); stroke-width: 2.5; }
.mist rect { fill: rgba(255,255,255,.35); opacity: 0; }
.fireflies circle { fill: #F6F7A8; opacity: 0; }
.bird { fill: none; stroke: #10241A; stroke-width: 3; stroke-linecap: round; opacity: .7; }
[data-sky="night"] .sun, [data-sky="night"] .sun-glow, [data-sky="night"] .birds { opacity: 0; }
[data-sky="night"] .moon { opacity: 1; } [data-sky="night"] .stars circle { opacity: .85; }
[data-sky="night"] .lantern { opacity: 1; } [data-sky="night"] .fireflies circle { opacity: .9; }
[data-sky="night"] .croc-pupil { fill: #FFD27A; }
[data-sky="dusk"] .stars circle { opacity: .4; } [data-sky="dusk"] .birds { opacity: .5; }
[data-sky="dawn"] .mist rect { opacity: 1; }
[data-sky="golden"] .sun { transform: translateY(160px); } [data-sky="dusk"] .sun { transform: translateY(260px); opacity: .6; }
[data-sky="dawn"] .sun { transform: translate(-760px, 170px); }
.sun, .sun-glow { transition: transform 2.4s var(--ease), opacity 2.4s; }
[data-sky="golden"] .sun-glow { transform: translateY(160px); } [data-sky="dusk"] .sun-glow { transform: translateY(260px); } [data-sky="dawn"] .sun-glow { transform: translate(-760px,170px); }

.hero-scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(4,14,9,.88) 0%, rgba(4,14,9,.66) 36%, rgba(4,14,9,0) 62%); }
@media (max-width: 760px) { .hero-scrim { background: linear-gradient(0deg, rgba(4,14,9,.92) 0%, rgba(4,14,9,.72) 55%, rgba(4,14,9,.35) 100%); } }
.hero-inner { position: relative; padding: 140px 0 72px; max-width: 1200px; }
.hero-eyebrow { font: italic 400 20px/1.3 var(--serif); color: #F6D693; margin: 0 0 14px; }
.hero-title { margin: 0; font: 400 clamp(64px, 13vw, 184px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.ht { display: block; }
.ht2 { font-size: .5em; letter-spacing: .02em; color: #F6D693; margin: .08em 0 .02em; }
.ht3 { color: var(--amber); text-shadow: 0 6px 40px rgba(0,0,0,.35); }
.hero-lead { max-width: 560px; font-size: clamp(17px, 1.6vw, 20px); margin: 22px 0 28px; color: #F1F4EC; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.rating-chip { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; text-decoration: none; background: rgba(4,14,9,.6); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 8px 16px; font-size: 14px; }
.stars-txt { color: var(--amber); letter-spacing: 2px; }
.rating-chip strong { font: 400 20px/1 var(--display); }

/* scene motion */
@media (prefers-reduced-motion: no-preference) {
  .rip { animation: drift 26s linear infinite; } .r2 { animation-duration: 18s; } .r3 { animation-duration: 12s; }
  @keyframes drift { to { transform: translateX(-1600px); } }
  .canoe-wrap { animation: travel 22s ease-in-out infinite alternate; }
  @keyframes travel { 0% { transform: translateX(760px); } 100% { transform: translateX(1000px); } }
  @media (max-width: 760px) { @keyframes travel { 0% { transform: translateX(560px); } 100% { transform: translateX(760px); } } }
  .canoe { animation: bob 3.2s ease-in-out infinite; transform-origin: 200px 740px; }
  @keyframes bob { 0%,100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(5px) rotate(.8deg); } }
  .p1 .paddle { animation: stroke 1.6s ease-in-out infinite; transform-origin: 125px 705px; }
  .p2 .paddle { animation: stroke 1.6s ease-in-out .8s infinite; transform-origin: 290px 708px; }
  @keyframes stroke { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(16deg); } }
  .near-l { animation: sway 7s ease-in-out infinite; transform-origin: 0 900px; }
  .near-r { animation: sway 8s ease-in-out -2s infinite; transform-origin: 1600px 900px; }
  @keyframes sway { 0%,100% { transform: rotate(0); } 50% { transform: rotate(1.4deg); } }
  .croc { animation: croc 14s ease-in-out infinite; }
  @keyframes croc { 0%,8% { transform: translateY(18px); opacity: 0; } 16%,86% { transform: translateY(0); opacity: 1; } 94%,100% { transform: translateY(18px); opacity: 0; } }
  .bird { animation: fly 22s linear infinite; } .b1 { transform: translate(-100px, 220px); } .b2 { animation-delay: -7s; } .b3 { animation-delay: -14s; animation-duration: 28s; }
  @keyframes fly { 0% { transform: translate(-120px, 260px); } 100% { transform: translate(1720px, 120px); } }
  [data-sky="night"] .fireflies circle { animation: glow 3s ease-in-out infinite; }
  .fireflies circle:nth-child(2n) { animation-delay: -1.1s; } .fireflies circle:nth-child(3n) { animation-delay: -2s; animation-duration: 4s; }
  @keyframes glow { 0%,100% { opacity: .1; } 50% { opacity: 1; } }
  .mist rect { animation: mist 30s ease-in-out infinite alternate; } @keyframes mist { to { transform: translateX(240px); } }
  .lantern-glow { animation: flick 2.2s ease-in-out infinite; } @keyframes flick { 50% { opacity: .6; } }
  .motion-ok .ht { opacity: 0; transform: translateY(40px); }
  .motion-ok.ready .ht { animation: rise .9s var(--ease) forwards; }
  .motion-ok.ready .ht2 { animation-delay: .12s; } .motion-ok.ready .ht3 { animation-delay: .24s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ---------- today strip ---------- */
.strip { background: var(--dark-bg); color: var(--on-dark); border-top: 1px solid rgba(255,255,255,.08); }
.strip-inner { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 16px 0; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 500; text-decoration: none; min-height: 32px; }
.sky-arc { width: 40px; height: 22px; } .sky-arc path { stroke: rgba(238,241,228,.45); stroke-width: 1.6; stroke-dasharray: 3 3; } .sky-arc circle { fill: var(--amber); }
.chip-tide svg { width: 22px; height: 22px; stroke: var(--amber); stroke-width: 1.8; }
.chip-tide { border-bottom: 1px solid rgba(227,164,58,.6); }
.chip-tide:hover { color: var(--amber); }

/* ---------- section grounds ---------- */
section { position: relative; }
.sec-dark { background: var(--dark-bg); color: var(--on-dark); padding: clamp(80px, 11vw, 150px) 0; }
.sec-dark + .sec-dark { background: var(--dark-bg-2); }
.sec-light { background: var(--light-bg); color: var(--light-fg); padding: clamp(80px, 11vw, 150px) 0; transition: background-color 2.4s, color 2.4s; }
.eyebrow { font: italic 400 20px/1.3 var(--serif); margin: 0 0 10px; }
.sec-dark .eyebrow { color: var(--amber); } .sec-light .eyebrow { color: var(--amber-ink); }
.display { font: 400 clamp(44px, 7.4vw, 104px)/.92 var(--display); text-transform: uppercase; margin: 0 0 26px; letter-spacing: .005em; }
.big { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.55; }
.sec-dark p { color: var(--on-dark); } .sec-light p { color: var(--light-fg); }

/* quiet */
.quiet-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; }
.place-note { border-left: 3px solid var(--amber); padding-left: 16px; color: var(--on-dark-muted) !important; font-size: 15px; }
.wave-edge { position: absolute; left: 0; bottom: -1px; width: 100%; height: 50px; } .wave-edge path { fill: var(--light-bg); transition: fill 2.4s; }
@media (max-width: 820px) { .quiet-grid { grid-template-columns: 1fr; gap: 10px; } }

/* tours */
.tour-list { display: grid; gap: 40px; margin-top: 30px; }
.tour { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border-radius: var(--r); overflow: hidden; background: var(--light-bg-2); border: 1px solid var(--light-line); }
.tour-alt .tour-media { order: 2; }
.tour-media { position: relative; min-height: 360px; background: var(--slate); }
.tour-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tour-num { position: absolute; left: 20px; bottom: 6px; font: 400 120px/1 var(--display); color: rgba(255,255,255,.9); text-shadow: 0 6px 30px rgba(0,0,0,.5); }
.tour-body { padding: clamp(26px, 4vw, 48px); }
.tour-sub { font: italic 400 18px/1.3 var(--serif); color: var(--amber-ink) !important; margin: 0 0 6px; }
.tour h3 { font: 400 clamp(32px, 4vw, 48px)/1 var(--display); text-transform: uppercase; margin: 0 0 16px; }
.tour dl { margin: 22px 0 26px; display: grid; gap: 12px; }
.tr { display: grid; grid-template-columns: 130px 1fr; gap: 12px; border-top: 1px solid var(--light-line); padding-top: 12px; }
.tr dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--light-muted); }
.tr dd { margin: 0; font-size: 16px; }
@media (max-width: 820px) { .tour { grid-template-columns: 1fr; } .tour-alt .tour-media { order: 0; } .tour-media { min-height: 240px; aspect-ratio: 3/2; } .tr { grid-template-columns: 1fr; gap: 2px; } .tour-num { font-size: 84px; } }

/* wildlife */
.wild-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; }
.wild-note { max-width: 380px; color: var(--on-dark-muted) !important; margin: 0 0 30px; }
.species { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.sp figure { margin: 0; }
.sp-img { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 1; background: var(--slate); }
.sp-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.sp:hover .sp-img img { transform: scale(1.05); }
.sp figcaption { padding: 14px 4px 0; }
.sp h3 { font: 400 24px/1.05 var(--display); text-transform: uppercase; margin: 0 0 6px; color: #fff; }
.sp p { margin: 0; font-size: 15px; color: var(--on-dark-muted) !important; }
.sp-feature { grid-column: 1 / -1; }
.sp-feature figure { display: grid; grid-template-columns: 1.7fr 1fr; gap: 36px; align-items: end; }
.sp-feature .sp-img { aspect-ratio: 16 / 9; }
.sp-feature figcaption { padding: 0 0 10px; }
.sp-feature h3 { font-size: clamp(40px, 5vw, 64px); line-height: .95; color: var(--amber); margin-bottom: 14px; }
.sp-feature p { font-size: 18px; }
.sp-leaf { position: absolute; width: 70%; height: 70%; background: var(--leaf, #154A2C); border-radius: 0 100% 0 100%; pointer-events: none; opacity: 0; }
.sp-leaf-a { left: -10%; top: -10%; } .sp-leaf-b { right: -10%; bottom: -10%; transform: rotate(180deg); }
@media (max-width: 1100px) { .species { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .species { grid-template-columns: 1fr 1fr; gap: 14px; } .sp-feature figure { grid-template-columns: 1fr; gap: 14px; } .sp h3 { font-size: 20px; } .sp p { font-size: 14px; } }

/* guide */
.guide-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.guide-mark svg { width: 100%; max-width: 380px; }
.gm-ring { fill: var(--light-bg-2); stroke: var(--amber-ink); stroke-width: 2; stroke-dasharray: 4 8; }
.gm-water { fill: none; stroke: var(--amber-ink); stroke-width: 3; stroke-linecap: round; }
.gm-canoe, .gm-head, .gm-body { fill: var(--light-fg); } .gm-paddle { stroke: var(--light-fg); stroke-width: 5; stroke-linecap: round; }
.gm-leaf { fill: var(--amber); opacity: .85; }
@media (max-width: 820px) { .guide-grid { grid-template-columns: 1fr; gap: 20px; } .guide-mark svg { max-width: 220px; } }

/* reviews */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 10px; }
.q { margin: 0; padding: 30px; border-radius: var(--r); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; justify-content: space-between; }
.q blockquote { margin: 0 0 22px; } .q blockquote p { font: 400 clamp(20px, 2vw, 26px)/1.3 var(--serif); margin: 0; }
.q blockquote p::before { content: "“"; color: var(--amber); } .q blockquote p::after { content: "”"; color: var(--amber); }
.q figcaption { font-size: 14px; color: var(--on-dark-muted); } .q figcaption a { color: var(--on-dark); }
.review-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.rl { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; padding: 10px 18px; border-radius: 999px; border: 1.5px solid rgba(227,164,58,.7); min-height: 44px; }
.rl strong { font: 400 20px/1 var(--display); color: var(--amber); }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }

/* faq */
.faq-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; }
.fq { border-top: 1px solid var(--light-line); }
.fq:last-child { border-bottom: 1px solid var(--light-line); }
.fq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 700; font-size: 18px; min-height: 44px; }
.fq summary::-webkit-details-marker { display: none; }
.fq-ico { flex: none; width: 22px; height: 22px; position: relative; }
.fq-ico::before, .fq-ico::after { content: ""; position: absolute; left: 3px; right: 3px; top: 10px; height: 2.5px; background: var(--amber-ink); transition: transform .25s var(--ease); }
.fq-ico::after { transform: rotate(90deg); } .fq[open] .fq-ico::after { transform: rotate(0); }
.fq p { margin: 0 0 22px; color: var(--light-muted) !important; }
@media (max-width: 820px) { .faq-grid { grid-template-columns: 1fr; gap: 0; } }

/* book */
.book { background: radial-gradient(1200px 600px at 85% 20%, rgba(227,164,58,.18), transparent 60%), var(--dark-bg) !important; }
.book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.book-form { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r); padding: clamp(22px, 3vw, 36px); display: grid; gap: 16px; }
.book-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.book-form input, .book-form select { font: 500 17px var(--sans); min-height: 50px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid rgba(238,241,228,.5); background: #0A1F14; color: var(--on-dark); width: 100%; }
.book-form input::-webkit-calendar-picker-indicator { filter: invert(1); }
.row2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.form-err { margin: 0; color: #FFC9A8 !important; font-weight: 600; }
@media (max-width: 820px) { .book-grid { grid-template-columns: 1fr; gap: 10px; } }

/* find */
.find-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: center; }
.find-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.find-map svg { width: 100%; }
.fm-sea { fill: var(--light-bg-2); stroke: var(--light-line); }
.fm-estuary { fill: none; stroke: #2F6E63; stroke-width: 10; stroke-linecap: round; opacity: .8; }
[data-sky="night"] .fm-estuary { stroke: #3E8C7E; }
.fm-pin { fill: var(--amber); } .fm-pin-ring { fill: none; stroke: var(--amber); stroke-width: 2; }
.fm-label { font: 400 22px var(--display); fill: var(--light-fg); text-transform: uppercase; }
.fm-muted { fill: var(--light-muted); font-size: 18px; }
.fm-taxi { fill: none; stroke: var(--light-fg); stroke-width: 2; stroke-dasharray: 5 6; }
@media (prefers-reduced-motion: no-preference) { .fm-pin-ring { animation: ping 2.4s var(--ease) infinite; transform-origin: 165px 128px; } @keyframes ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } }
@media (max-width: 820px) { .find-grid { grid-template-columns: 1fr; } .find-map svg { max-width: 360px; } }

/* reveal */
@media (prefers-reduced-motion: no-preference) {
  .motion-ok .reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .motion-ok .reveal.in { opacity: 1; transform: none; }
  .motion-ok .sp .sp-leaf { opacity: 1; transition: transform 1.1s var(--ease) .15s, opacity 1.1s .15s; }
  .motion-ok .sp.in .sp-leaf-a { transform: translate(-90%, -90%) rotate(-25deg); opacity: 0; }
  .motion-ok .sp.in .sp-leaf-b { transform: translate(90%, 90%) rotate(155deg); opacity: 0; }
}

/* side rail (desktop) */
.rail { position: fixed; right: 18px; top: 90px; bottom: 30px; width: 40px; z-index: 40; opacity: 0; pointer-events: none; transition: opacity .5s; }
.rail-on { opacity: 1; pointer-events: auto; }
.rail-svg { position: absolute; inset: 0; width: 40px; height: 100%; }
.rail-river { fill: none; stroke: rgba(227,164,58,.35); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }
.rail-canoe { position: absolute; left: 0; top: 0; width: 60px; height: 30px; transition: transform .25s linear; }
.rail-canoe path { fill: var(--amber); stroke: #10241A; stroke-width: 1.5; } .rail-canoe circle { fill: #10241A; }
@media (max-width: 1280px) { .rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .rail { display: none; } }

/* fact line (js/cr-fact.js) */
.cr-fact { background: var(--light-bg); color: var(--light-fg); border-top: 1px solid var(--light-line); }
.cr-fact-inner { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; column-gap: 14px; row-gap: 6px; padding-block: 26px; }
.cr-fact-icon { width: 18px; height: 18px; color: var(--amber-ink); align-self: center; }
.cr-fact-label { font: 600 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--amber-ink); margin: 0; white-space: nowrap; }
.cr-fact-text { font: 400 17px/1.5 var(--serif); margin: 0; max-width: 72ch; color: var(--light-fg); }
@media (max-width: 640px) { .cr-fact-inner { grid-template-columns: auto 1fr; } .cr-fact-text { grid-column: 1 / -1; font-size: 16px; } }

/* footer */
.site-footer { background: #040C08; color: var(--on-dark); padding: 56px 0 110px; }
.foot { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; }
.foot-name { font: 400 28px/1 var(--display); text-transform: uppercase; margin: 0 0 8px; }
.foot-sub { color: var(--on-dark-muted); margin: 0 0 12px; }
.foot-links { display: grid; gap: 4px; align-content: start; }
.foot-links a { min-height: 32px; display: inline-flex; align-items: center; }
.foot-h { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin: 0 0 6px; }
.foot-copy { grid-column: 1 / -1; font-size: 14px; color: var(--on-dark-muted); border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; margin: 0; }
@media (min-width: 900px) { .site-footer { padding-bottom: 56px; } }

/* mobile action bar */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(4,12,8,.96); border-top: 1px solid rgba(255,255,255,.12); padding-bottom: env(safe-area-inset-bottom); }
.mbar a { display: flex; align-items: center; justify-content: center; min-height: 56px; text-decoration: none; color: var(--on-dark); font-weight: 700; font-size: 15px; }
.mbar a:first-child { background: var(--amber); color: #10241A; }
@media (min-width: 900px) { .mbar { display: none; } }

/* ---------- tides page ---------- */
.tp { padding: 140px 0 90px; }
.tp h1 { font: 400 clamp(46px, 8vw, 96px)/.92 var(--display); text-transform: uppercase; margin: 0 0 14px; }
.tp-sub { color: var(--light-muted) !important; margin: 0 0 40px; }
.tp-now { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 30px; }
.tp-card { background: var(--light-bg-2); border-radius: var(--r); padding: 24px; border: 1px solid var(--light-line); }
.tp-card h2 { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--light-muted); margin: 0 0 8px; }
.tp-big { font: 400 46px/1 var(--display); margin: 0 0 6px; }
.tp-curve { width: 100%; height: auto; display: block; }
.tp-curve .cv { fill: none; stroke: var(--amber-ink); stroke-width: 3; }
.tp-curve .cv-fill { fill: rgba(227,164,58,.18); }
.tp-curve .axis { stroke: var(--light-line); } .tp-curve text { fill: var(--light-muted); font: 22px var(--sans); }
.tp-curve .now { fill: var(--amber); stroke: var(--light-bg); stroke-width: 3; }
.tp-week { list-style: none; padding: 0; margin: 0; }
.tp-week li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--light-line); }
.tp-notes { margin-top: 30px; font-size: 14px; } .tp-notes p { color: var(--light-muted) !important; margin: 0 0 8px; }
.tp-top { background: rgba(7,21,14,.95); }
body.tides-body { background: var(--light-bg); }
@media (max-width: 520px) { .tp-week li { grid-template-columns: 1fr; gap: 2px; } }

@media (forced-colors: active) { .btn { border-color: ButtonText; } .cr-fact { border-top: 1px solid CanvasText; } }
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .croc { animation-name: crocm; }
  @keyframes crocm { 0%,8% { transform: translate(-300px, 18px); opacity: 0; } 16%,86% { transform: translate(-300px, 0); opacity: 1; } 94%,100% { transform: translate(-300px, 18px); opacity: 0; } }
}

/* mobile hero: the river gets its own band above the headline */
@media (max-width: 760px) {
  .hero { display: block; min-height: 0; background: var(--dark-bg); }
  .scene { position: relative; height: 380px; inset: auto; background: linear-gradient(180deg, var(--sky-1), var(--sky-2) 70%); transition: background 2.4s; }
  .hero-scrim { inset: 0 0 auto 0; height: 380px; background: linear-gradient(0deg, var(--dark-bg) 0%, rgba(7,21,14,0) 30%), linear-gradient(180deg, rgba(4,14,9,.55) 0%, rgba(4,14,9,0) 28%); }
  .hero-inner { padding: 8px 0 48px; }
  .hero-title { font-size: clamp(60px, 19vw, 96px); }
}

/* ---------- locations (optional SITE.locations, 22 Oct 2026) ---------- */
.tour-rate { margin: 2px 0 12px; font-size: 15px; font-weight: 700; }
.tour-rate a { color: var(--light-fg); text-decoration: none; border-bottom: 1.5px solid var(--amber); padding-bottom: 1px; }
.tour-rate a:hover { color: var(--amber-ink); }
.tour-rate span { color: var(--amber-ink); }
.find-locs { display: grid; gap: 16px; align-self: stretch; align-content: center; }
.loc { background: var(--light-bg-2); border: 1px solid var(--light-line); border-radius: var(--r); padding: 20px 22px; }
.loc h3 { font: 400 26px/1 var(--display); text-transform: uppercase; margin: 0 0 8px; }
.loc p { margin: 0 0 14px; }
.loc-links { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-loc-name { font-weight: 600; }