/* Okanagan Bucktail Co. — design system
   Brand colours are sampled from the client's real O.B.C fly-card logo:
   card yellow #FACC34 on near-black. Type: Zilla Slab (slab serif, echoes the
   logo's letterforms) for display, Inter for everything else. */

:root {
  --y: #facc34;
  --y-dk: #e0b420;
  --y-soft: #fff3cd;
  --ink: #0e1014;
  --ink-2: #161a20;
  --ink-3: #1e242c;
  --line: #2a323c;
  --paper: #ffffff;
  --paper-2: #f6f4ef;
  --paper-3: #eceae3;
  --txt: #1a1d22;
  --txt-2: #5a6270;
  --txt-inv: #f4f5f7;
  --txt-inv-2: #a8b1bd;
  --lake: #1f4d63;

  /* Vertical rhythm. Every section gap comes from one of these three so the
     page reads on one scale — do not hand-roll a padding on a section. */
  --sp-sec: clamp(2.9rem, 5.6vw, 4.6rem);
  --sp-sec-tight: clamp(2.4rem, 5vw, 3.8rem);
  --sp-gap: clamp(2rem, 4.4vw, 3rem);

  --wrap: 1180px;
  --narrow: 760px;
  --r: 14px;
  --r-sm: 9px;
  --shadow: 0 1px 2px rgba(14, 16, 20, .06), 0 8px 28px rgba(14, 16, 20, .08);
  --shadow-lg: 0 2px 6px rgba(14, 16, 20, .08), 0 24px 60px rgba(14, 16, 20, .16);
  --f-disp: "Zilla Slab", Georgia, "Times New Roman", serif;
  --f-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--txt);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }
svg { width: 1.15em; height: 1.15em; flex: none; }

h1, h2, h3 { font-family: var(--f-disp); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; }
a { color: var(--lake); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 200; background: var(--y); color: var(--ink); padding: .7rem 1.1rem; border-radius: var(--r-sm); font-weight: 600; }
:focus-visible { outline: 3px solid var(--y); outline-offset: 2px; border-radius: 3px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.narrow { max-width: var(--narrow); }
.center { text-align: center; }

/* ---------------------------------------------------------------- topbar */
.topbar { background: var(--ink); color: var(--txt-inv-2); font-size: .84rem; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; }
.topbar-msg strong { color: var(--y); }
.topbar-call { display: inline-flex; align-items: center; gap: .45rem; color: var(--y); font-weight: 600; text-decoration: none; white-space: nowrap; }
.topbar-call:hover { color: #fff; }
@media (max-width: 720px) { .topbar-msg { display: none; } .topbar-in { justify-content: center; } }

/* ---------------------------------------------------------------- header */
.site-head { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.93); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--paper-3); }
.head-in { display: flex; align-items: center; gap: 1.4rem; padding: .7rem 0; }
.brand { flex: none; line-height: 0; }
.brand img { width: 176px; height: auto; border-radius: 4px; }
.nav { display: flex; gap: 1.35rem; margin-left: auto; }
.nav a { color: var(--txt); text-decoration: none; font-weight: 550; font-size: .95rem; padding: .3rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { border-bottom-color: var(--y); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.head-cta { flex: none; }
.burger { display: none; }

@media (max-width: 1040px) {
  .head-in .head-cta { display: none; }
  .nav { gap: 1rem; }
  .nav a { font-size: .9rem; }
}
@media (max-width: 900px) {
  .brand img { width: 148px; }
  .head-in { gap: .75rem; }
  .burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; width: 44px; height: 44px; padding: 0 9px; background: none; border: 1px solid var(--paper-3); border-radius: var(--r-sm); cursor: pointer; }
  .burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--paper-3); box-shadow: var(--shadow); padding: .5rem 0; display: none; }
  .nav.open { display: flex; }
  .nav a { padding: .85rem clamp(1.25rem, 5vw, 2rem); border-bottom: none; border-left: 3px solid transparent; font-size: 1rem; }
  .nav a[aria-current="page"], .nav a:hover { border-left-color: var(--y); background: var(--paper-2); }
}

@media (max-width: 400px) { .brand img { width: 132px; } }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--f-body); font-weight: 650; font-size: .95rem; line-height: 1.2; padding: .78rem 1.3rem; border-radius: 999px; border: 1.5px solid transparent; text-decoration: none; cursor: pointer; transition: transform .12s ease, background .15s, color .15s, border-color .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .95rem 1.7rem; font-size: 1.02rem; }
.btn-y { background: var(--y); color: var(--ink); }
.btn-y:hover { background: var(--y-dk); color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-3); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: #cfd4dc; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }
.btn-clear { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(6px); }
.btn-clear:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn.block { display: flex; width: 100%; margin-top: .55rem; }
.btnrow { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }

/* ---------------------------------------------------------------- hero */
/* The hero carries the client's ENTIRE statement (see build.mjs). That much copy
   only fits OVER the photo when the card is at its FULL 1180px width, where the
   copy column still leaves the subject a clear third beside it. `.wrap` is
   `min(100% - 2.5rem, 1180px)`, so that is a 1220px viewport. Any narrower and
   the column eats into Geoff's face. Below it the photo becomes a band across
   the top of the
   same card, fading into the card's ink where the copy starts. Two modes, one
   card, one breakpoint — do not add a third. */
.hero { padding: clamp(.7rem, 1.6vw, 1.3rem) 0 clamp(2.2rem, 5vw, 3.6rem); }
.hero-card { position: relative; isolation: isolate; overflow: hidden; border-radius: clamp(16px, 2.2vw, 26px);
  background: var(--ink); min-height: min(84vh, 740px); display: flex; align-items: flex-end; }

/* OVERLAY MODE (>=1220px). The source is nearly square, so `cover` crops it
   vertically only and the horizontal half of object-position does nothing —
   sliding the subject clear of the copy has to be done with a transform, and the
   scale is what buys the overscan that keeps the left edge covered. */
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 42%; transform: scale(1.3) translateX(11.5%); transform-origin: 50% 44%; z-index: -2; }
.hero-scrim { position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(180deg, rgba(10,12,16,.55) 0%, rgba(10,12,16,.12) 22%, rgba(10,12,16,.72) 62%, rgba(10,12,16,.94) 100%),
    linear-gradient(96deg, rgba(10,12,16,.8) 0%, rgba(10,12,16,.5) 46%, rgba(10,12,16,0) 78%); }

/* Oversized brand word bled off the top edge, echoing the client's own card. */
.hero-ghost { position: absolute; top: clamp(-.16em, -1.4vw, -.06em); left: clamp(.6rem, 2.4vw, 2.4rem); z-index: -1;
  font-family: var(--f-disp); font-weight: 700; font-size: clamp(4.5rem, 15vw, 13rem); line-height: .82;
  letter-spacing: -.03em; text-transform: uppercase; color: #fff; opacity: .1; pointer-events: none; user-select: none; }

/* In overlay mode the column is what keeps the photo's right third clear.
   Widen it and the headline runs across Geoff's face again. */
.hero-in { padding: clamp(2.4rem, 6vw, 4rem) clamp(1.3rem, 4vw, 3.2rem) clamp(2rem, 4vw, 3rem); color: #fff;
  max-width: min(100%, 640px); }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 4vw, 3.05rem); text-shadow: 0 2px 24px rgba(0,0,0,.35); margin-bottom: .6em; }
/* Body copy set over a photo needs a real shadow, not just the scrim, to survive
   the brightest part of the sky. */
.hero-p { max-width: 56ch; font-size: clamp(1rem, 1.55vw, 1.1rem); line-height: 1.62; color: #e8ecf1;
  margin-bottom: 1.05em; text-shadow: 0 1px 14px rgba(0,0,0,.6); }
.hero-creed { max-width: 34ch; font-family: var(--f-disp); font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.22; font-size: clamp(1.15rem, 2.1vw, 1.6rem); color: var(--y);
  margin: 1.7rem 0; text-shadow: 0 1px 14px rgba(0,0,0,.6); }
.hero-ask { font-family: var(--f-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .01em;
  line-height: 1.12; font-size: clamp(1.45rem, 3.2vw, 2.3rem); color: #fff; margin: 1.7rem 0 1.4rem;
  text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--y); margin: 0 0 .8rem; }

/* Stat row lifted over the bottom edge of the photo. */
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--paper-3);
  border: 1px solid var(--paper-3); border-radius: clamp(12px, 1.6vw, 18px); overflow: hidden;
  margin: calc(-1 * clamp(1.4rem, 3vw, 2.4rem)) clamp(.4rem, 2vw, 2rem) 0; position: relative; z-index: 2;
  box-shadow: var(--shadow-lg); }
.hstat { background: #fff; padding: clamp(.95rem, 2vw, 1.35rem) clamp(.8rem, 1.6vw, 1.4rem); }
.hstat-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lake); margin: 0 0 .3rem; }
.hstat-value { font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.05; margin: 0 0 .2rem; }
.hstat-note { font-size: .82rem; color: var(--txt-2); margin: 0; }
.hstat-cta { display: flex; align-items: center; gap: .6rem; background: var(--y); color: var(--ink); text-decoration: none; font-weight: 650; font-size: .95rem; transition: background .15s; }
.hstat-cta:hover { background: var(--y-dk); color: var(--ink); }
.hstat-ico { display: inline-flex; width: 2.1rem; height: 2.1rem; align-items: center; justify-content: center; background: var(--ink); color: var(--y); border-radius: 10px; flex: none; }
.hstat-cta svg:last-child { margin-left: auto; }

/* ⚠️ BAND MODE (<=1219px). Below this width the card is too narrow to hold the
   statement AND keep the subject clear: at 820px the paragraphs ran straight
   across Geoff's face. So the photo stops being a background fill and becomes a
   fixed band at the top, and the copy sits under it on the card's own ink.
   --hero-band is the single source of truth — the image, the scrim and the
   copy's top padding all read from it and must stay in step.
   These blocks MUST come after the base `.hero-in { padding: … }` shorthand:
   media queries add no specificity, so an earlier padding-top silently loses. */
@media (max-width: 1219px) {
  .hero-card { --hero-band: clamp(400px, 52vw, 620px); min-height: 0; }
  .hero-bg { inset: 0 0 auto 0; height: var(--hero-band); object-position: 56% 30%; transform: none; }
  /* No copy sits over the band, so it only needs the bottom fade into the ink.
     Keep the top light or the photo reads as murky. */
  .hero-scrim { inset: 0 0 auto 0; height: var(--hero-band); background:
    linear-gradient(180deg, rgba(10,12,16,.2) 0%, rgba(10,12,16,0) 26%, rgba(10,12,16,.45) 74%, #0e1014 100%); }
  .hero-in { padding-top: calc(var(--hero-band) - .6rem); max-width: 100%; }
  .hero-p, .hero-creed { text-shadow: none; }
}

@media (max-width: 900px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 640px) {
  .hero-card { --hero-band: clamp(300px, 90vw, 420px); }
  .hero h1 { font-size: 1.8rem; }
  .hero-h1 { gap: .12em; }
  .hero-h1 span { font-size: .54em; }
  .hero-p { font-size: .96rem; line-height: 1.58; margin-bottom: .95em; }
  .hero-creed { font-size: 1.2rem; margin: 1.4rem 0; }
  .hero-ask { font-size: 1.5rem; margin: 1.4rem 0 1.2rem; }
  .hero-cta { gap: .55rem; }
  .hero-cta .btn { width: 100%; }
  .hero-cta .btn-lg { padding: .8rem 1.2rem; font-size: .98rem; }
  .hero-stats { grid-template-columns: 1fr; margin-inline: 0; }
  .hstat-cta { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- sections */
.sec { padding: var(--sp-sec) 0; }
.sec-tight { padding: var(--sp-sec-tight) 0; }
.sec-top0 { padding-top: 0; }
/* Two untinted sections in a row are one continuous field of paper, so the seam
   between them must be ONE rhythm step. Stacking both sections' full padding
   opened a ~95px hole that read as a missing block rather than a topic change;
   the first section's padding-bottom alone is the step. Tinted/dark sections
   keep their full padding: there the colour change is the separator and the
   padding is the band's own inner margin. */
.sec:not(.sec-alt):not(.sec-dark) + .sec:not(.sec-alt):not(.sec-dark),
.hero + .sec:not(.sec-alt):not(.sec-dark) { padding-top: 0; }

/* A section's padding-bottom should BE the gap. Without this the trailing
   paragraph's own margin is added on top of it, so every section bottom sits a
   line and a half lower than the one next to it. */
.wrap > *:last-child { margin-bottom: 0; }
.sec-alt { background: var(--paper-2); }
.sec-dark { background: var(--ink); color: var(--txt-inv); }
.sec-dark h2, .sec-dark h3 { color: #fff; }
.lead { font-size: 1.12rem; color: var(--txt-2); max-width: 62ch; }
.sec-dark .lead { color: var(--txt-inv-2); }
.note { font-size: .92rem; color: var(--txt-2); }
.mid-note { margin-top: 1.8rem; font-size: .98rem; color: var(--txt-2); }

.pagehead { padding: clamp(2rem, 5vw, 3.2rem) 0 var(--sp-gap); }
.pagehead .lead { margin-bottom: 1.2rem; }
.pagehead h1 { max-width: 18ch; }
.pagehead .wrap:not(.narrow) h1 { max-width: 20ch; }
.pagehead .wrap.center h1 { max-width: none; }

.crumbs { border-bottom: 1px solid var(--paper-3); background: var(--paper-2); font-size: .84rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: .6rem 0; color: var(--txt-2); }
.crumbs li + li::before { content: "/"; margin-right: .45rem; color: #b9bfc9; }
.crumbs a { color: var(--txt-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

.prose h2 { margin-top: 2.2rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: .5rem; }

/* ---------------------------------------------------------------- split */
.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.split-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.split-rev .split-img { order: -1; }
.split-img img { border-radius: var(--r); box-shadow: var(--shadow); width: 100%; }
@media (max-width: 900px) { .split, .split-rev { grid-template-columns: 1fr; } .split-rev .split-img { order: 0; } }

.wide-img img { width: 100%; border-radius: var(--r); box-shadow: var(--shadow); max-height: 560px; object-fit: cover; }
.wide-img { margin: 0; }
/* Portrait source in a wide band (see wideImg in build.mjs): show it whole over
   a blurred copy of itself rather than cropping the subject out of frame. */
.wide-img.is-tall { position: relative; height: 560px; border-radius: var(--r); overflow: hidden;
  background: var(--ink); box-shadow: var(--shadow); }
.wide-img.is-tall img { position: absolute; inset: 0; height: 100%; max-height: none;
  border-radius: 0; box-shadow: none; }
.wide-img.is-tall .wide-fill { object-fit: cover; filter: blur(24px) saturate(.85) brightness(.5); transform: scale(1.15); }
.wide-img.is-tall .wide-photo { object-fit: contain; }
@media (max-width: 640px) { .wide-img.is-tall { height: 420px; } }

/* Intro row: heading on the left, supporting copy on the right. Replaces a
   .split that had no second column and left 40% of the row empty. */
.lede-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 3.5rem); align-items: start; margin-bottom: clamp(2rem, 4vw, 3rem); }
.lede-split h2 { margin-bottom: 0; }
.lede-split-body { padding-top: .2rem; }
.lede-split-body p { color: var(--txt-2); font-size: 1.05rem; }
.lede-split-body p:last-child { margin-bottom: 0; }
.nomargin { margin-bottom: 0 !important; }
@media (max-width: 820px) { .lede-split { grid-template-columns: 1fr; align-items: start; } .lede-split h2 br { display: none; } }

/* ---------------------------------------------------------------- pillars */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem); }
.pillars .pillar { padding-top: 1.4rem; border-top: 2px solid var(--y); }
.pillar svg { width: 2.1rem; height: 2.1rem; color: var(--ink); background: var(--y); border-radius: 10px; padding: 6px; }
.pillar h3 { margin: .85rem 0 .45rem; font-size: 1.15rem; }
.pillar p { font-size: .96rem; color: var(--txt-2); margin-bottom: .5rem; }
.pillar a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .9rem; text-decoration: none; }
.pillar a:hover { text-decoration: underline; }
.pillar a svg { width: .95em; height: .95em; background: none; padding: 0; color: inherit; }

/* ---------------------------------------------------------------- trips */
.trips { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
@media (min-width: 660px) { .trips { grid-template-columns: repeat(2, 1fr); } }
.trip { background: #fff; border: 1px solid var(--paper-3); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.sec-alt .trip { border-color: #e2dfd7; }
.trip-img { display: block; line-height: 0; }
.trip-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .35s ease; }
.trip:hover .trip-img img { transform: scale(1.03); }

/* Portrait source in a landscape slot (see tripCard in build.mjs). The photo is
   shown whole on top of a blurred, darkened copy of itself, so the card keeps
   its 4:3 height and nothing is cropped off the subject. */
.trip-img.is-tall { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--ink); }
.trip-img.is-tall img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.trip-img.is-tall .trip-fill { object-fit: cover; filter: blur(18px) saturate(.85) brightness(.5); transform: scale(1.15); }
.trip-img.is-tall .trip-photo { object-fit: contain; }
.trip:hover .trip-img.is-tall .trip-fill { transform: scale(1.15); }
.trip:hover .trip-img.is-tall .trip-photo { transform: scale(1.03); }
.trip-body { padding: 1.3rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.trip-body h3 { margin-bottom: .3rem; font-size: 1.28rem; }
.trip-body h3 a { color: var(--ink); text-decoration: none; }
.trip-body h3 a:hover { text-decoration: underline; }
.trip-meta { display: flex; align-items: center; gap: .4rem; font-size: .87rem; color: var(--txt-2); margin-bottom: .7rem; }
.trip-meta .dot { opacity: .5; }
.trip-body > p { font-size: .96rem; color: var(--txt-2); }
.trip-price { margin-top: auto; padding-top: .6rem; font-size: .88rem; color: var(--txt-2); }
.trip-price strong { font-family: var(--f-disp); font-size: 1.75rem; color: var(--ink); margin-right: .4rem; }
.trip-links { display: flex; gap: .35rem; margin: 1rem 0 0; flex-wrap: wrap; align-items: center; }
.trip-links .btn { font-size: .89rem; padding: .65rem 1.1rem; }

.minicards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; }
.minicard { display: flex; flex-direction: column; gap: .15rem; padding: .95rem 1.1rem; background: #fff; border: 1px solid var(--paper-3); border-radius: var(--r-sm); text-decoration: none; color: var(--ink); }
.minicard:hover { border-color: var(--ink); }
.minicard span { font-size: .85rem; color: var(--txt-2); }

/* ---------------------------------------------------------------- cards */
.card { background: #fff; border: 1px solid var(--paper-3); border-radius: var(--r); padding: 1.4rem 1.5rem; box-shadow: var(--shadow); }
.sec-alt .card { border-color: #e2dfd7; }
.card h3 { font-size: 1.1rem; margin-bottom: .8rem; }
.sticky { position: sticky; top: 96px; }
@media (max-width: 900px) { .sticky { position: static; } }
.card-price { margin: 1rem 0 .3rem; }
.card-price strong { font-family: var(--f-disp); font-size: 2rem; display: block; line-height: 1.1; }
.card-price span { font-size: .87rem; color: var(--txt-2); }
.card-note { font-size: .84rem; color: var(--txt-2); margin: .5rem 0 1rem; }

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .55rem; font-size: .95rem; }
.ticks svg { color: #2f7d4f; margin-top: .22em; width: 1em; height: 1em; }
.ticks-x li { padding-left: 1.6rem; position: relative; color: var(--txt-2); }
.ticks-x li::before { content: "—"; position: absolute; left: 0; color: #b9bfc9; }

.factlist { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; font-size: .93rem; }
.factlist dt { font-weight: 650; color: var(--txt-2); }
.factlist dd { margin: 0; }

.twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; margin: 2rem 0; }

/* ---------------------------------------------------------------- rates table */
.tablewrap { overflow-x: auto; margin: 1.4rem 0; }
.rates { width: 100%; border-collapse: collapse; font-size: .97rem; min-width: 420px; }
.rates caption { caption-side: bottom; padding-top: .8rem; font-size: .85rem; color: var(--txt-2); text-align: left; }
.rates th, .rates td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--paper-3); }
.rates thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--txt-2); border-bottom-width: 2px; border-bottom-color: var(--ink); }
.rates tbody th { font-weight: 600; }
.rates tbody th a { color: var(--ink); text-decoration: none; }
.rates tbody th a:hover { text-decoration: underline; }
.rates .num { font-family: var(--f-disp); font-weight: 700; font-size: 1.15rem; white-space: nowrap; }

/* The rates table is also dropped into the narrow sidebar card on /contact/ and
   /book/, where its 420px min-width overflowed and chopped the price column in
   half. In that context show trip + price only. */
.card .tablewrap { overflow: visible; margin: .6rem 0 1rem; }
.card .rates { min-width: 0; font-size: .93rem; }
.card .rates th, .card .rates td { padding: .55rem .25rem; }
.card .rates thead th:nth-child(2), .card .rates tbody td:not(.num) { display: none; }
.card .rates .num { font-size: 1.05rem; }
.card .rates caption { font-size: .8rem; }

/* ---------------------------------------------------------------- chips */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chips a { display: inline-block; padding: .5rem 1rem; background: #fff; border: 1px solid var(--paper-3); border-radius: 999px; font-size: .92rem; font-weight: 550; color: var(--ink); text-decoration: none; }
.chips a:hover { background: var(--y); border-color: var(--y); }
.sec-alt .chips a { border-color: #e2dfd7; }

/* ---------------------------------------------------------------- mosaic + gallery */
.mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin-bottom: 2rem; }
@media (min-width: 760px) { .mosaic { grid-template-columns: repeat(3, 1fr); } }
.mosaic img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.shot { padding: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; border-radius: var(--r-sm); overflow: hidden; }
.shot img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform .35s ease; }
.shot:hover img { transform: scale(1.04); }

/* `display: grid` on the class beats the UA rule for [hidden], so without this
   the lightbox renders permanently open and blacks out the whole gallery page. */
.lightbox[hidden] { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8,10,13,.94); display: grid; place-items: center; padding: 2rem; }
.lightbox img { max-width: 100%; max-height: 88vh; width: auto; border-radius: var(--r-sm); }
.lb-close { position: absolute; top: 1rem; right: 1.3rem; width: 46px; height: 46px; font-size: 2rem; line-height: 1; color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 50%; cursor: pointer; }
.lb-close:hover { background: rgba(255,255,255,.25); }

/* ---------------------------------------------------------------- flies */
.flies { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.fly { background: #fff; border: 1px solid var(--paper-3); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .22s ease, border-color .18s; }
.fly:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #d8d4c9; }
.fly-body { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.fly h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.fly p { font-size: .92rem; color: var(--txt-2); margin-bottom: .5rem; }
.fly-price { font-family: var(--f-disp); font-weight: 700; color: var(--ink) !important; font-size: 1.05rem; margin: auto 0 0 !important; padding-top: .5rem; }

/* the illustration sits on a dark card so pale dressings still read */
.fly-frame { background: radial-gradient(120% 120% at 30% 20%, #232a33 0%, #12151a 70%); border-bottom: 3px solid var(--y); overflow: hidden; }
.fly-art { display: block; width: 100%; height: auto; }
.fly-photo { aspect-ratio: 16/9; object-fit: cover; }
.fly-hair { transform-origin: 96px 78px; transition: transform .5s cubic-bezier(.22,.9,.3,1); }
.fly:hover .fly-hair { transform: rotate(-2.2deg) translateX(4px) scaleX(1.02); }
@media (prefers-reduced-motion: reduce) { .fly-hair { transition: none; } .fly:hover .fly-hair { transform: none; } .fly:hover { transform: none; } }

/* patterns whose colours Geoff has not confirmed: brand tile, no invented colour */
.fly-art-tbc { aspect-ratio: 320/150; display: grid; place-items: center; background:
  repeating-linear-gradient(135deg, #1a1e25 0 10px, #171b21 10px 20px); }
.fly-art-tbc span { font-family: var(--f-disp); font-weight: 700; font-size: 2.6rem; color: var(--y); opacity: .55; }
.fly-tbc .fly-frame { border-bottom-color: #3a424d; }

.art-note { margin-top: 1.4rem; text-align: center; max-width: 70ch; margin-inline: auto; }

/* ---------------------------------------------------------------- quote */
.quote { max-width: 60ch; margin-inline: auto; }
.stars { color: var(--y); display: flex; gap: .15rem; justify-content: center; margin-bottom: .8rem; }
.stars svg { width: 1.25rem; height: 1.25rem; }
.quote blockquote { margin: 0; font-family: var(--f-disp); font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.45; color: var(--ink); }
.quote-who { font-size: .9rem; color: var(--txt-2); margin-top: .8rem; }
.pull { margin: 1.6rem 0; padding: 1.1rem 0 1.1rem 1.4rem; border-left: 4px solid var(--y); font-family: var(--f-disp); font-size: 1.18rem; line-height: 1.5; }
.pull p { margin-bottom: .4rem; }
.pull cite { font-family: var(--f-body); font-style: normal; font-size: .88rem; color: var(--txt-2); }

/* ---------------------------------------------------------------- faq */
.faq details { border-bottom: 1px solid var(--paper-3); }
.faq summary { cursor: pointer; padding: 1.05rem 2rem 1.05rem 0; font-weight: 650; font-size: 1.03rem; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: .95rem; font-size: 1.5rem; font-weight: 400; color: var(--txt-2); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: 1.1rem; color: var(--txt-2); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- band */
.band { background: var(--y); }
.band-in { display: flex; flex-wrap: wrap; gap: 1.6rem 2.5rem; align-items: center; justify-content: space-between; padding: clamp(2rem, 4vw, 3rem) 0; }
.band h2 { margin-bottom: .3rem; }
.band p { margin: 0; color: #4a4224; max-width: 52ch; }
.band-cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.band .btn-y { background: var(--ink); color: #fff; }
.band .btn-y:hover { background: var(--ink-3); }

/* ---------------------------------------------------------------- contact */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.ccard { display: flex; flex-direction: column; gap: .2rem; padding: 1.3rem; background: #fff; border: 1px solid var(--paper-3); border-radius: var(--r); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.ccard:hover { border-color: var(--ink); }
.ccard .ci { display: inline-flex; width: 2.2rem; height: 2.2rem; align-items: center; justify-content: center; background: var(--y); border-radius: 9px; margin-bottom: .5rem; }
.ccard strong { font-size: 1.02rem; }
.ccard > span:last-child { font-size: .9rem; color: var(--txt-2); }

.postcard { border-left: 4px solid var(--y); padding-left: 1.4rem; }
.post-date { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--txt-2); margin-bottom: .3rem; }
.postcard h2 a { color: var(--ink); text-decoration: none; }
.postcard h2 a:hover { text-decoration: underline; }
.more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; text-decoration: none; }
.more:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- footer */
.site-foot { background: var(--ink); color: var(--txt-inv-2); padding: clamp(2.8rem, 6vw, 4.5rem) 0 2rem; font-size: .93rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem; }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand img { width: 190px; height: auto; margin-bottom: 1rem; }
.foot-tag { font-family: var(--f-disp); color: #fff; font-size: 1.1rem; margin-bottom: 1rem; }
.foot-addr { display: flex; gap: .5rem; margin-bottom: .6rem; line-height: 1.5; }
.foot-addr a { color: var(--txt-inv-2); text-decoration: none; display: inline-flex; gap: .5rem; align-items: center; }
.foot-addr a:hover { color: var(--y); }
.foot-addr svg { color: var(--y); margin-top: .15em; }
.site-foot h3 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; font-family: var(--f-body); font-weight: 700; margin-bottom: .9rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .45rem; }
.site-foot ul a { color: var(--txt-inv-2); text-decoration: none; }
.site-foot ul a:hover { color: var(--y); }
.social { display: flex; gap: .6rem; margin-top: 1rem; }
.social a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; color: var(--txt-inv-2); }
.social a:hover { background: var(--y); border-color: var(--y); color: var(--ink); }
.foot-base { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: .84rem; color: #7c8593; }
.foot-base p { margin: 0; }

/* ---------------------------------------------------------------- mobile action bar */
.actionbar { display: none; }
@media (max-width: 720px) {
  .actionbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; border-top: 1px solid var(--line); }
  .actionbar a { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .95rem .5rem; font-weight: 650; font-size: .95rem; text-decoration: none; }
  .ab-call { background: var(--ink); color: #fff; }
  .ab-book { background: var(--y); color: var(--ink); }
  body { padding-bottom: 56px; }
  .sticky { position: static; }
}

/* ---------------------------------------------------------------- extra button variants */
.btn-outline { background: transparent; color: var(--ink); border-color: rgba(20,22,26,.35); }
.btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-plain { background: none; border: 0; color: var(--txt-2); padding-inline: .4rem; }
.btn-plain:hover { color: var(--ink); background: none; }
.btn-plain svg { width: .95em; height: .95em; }

/* ---------------------------------------------------------------- big call/text cards */
.bigcta { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.bigcta-card { display: flex; flex-direction: column; gap: .25rem; padding: 1.7rem 1.8rem; border-radius: var(--r); text-decoration: none; border: 1.5px solid transparent; transition: transform .14s ease, box-shadow .2s; }
.bigcta-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.bigcta-ico { display: inline-flex; width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center; border-radius: 12px; margin-bottom: .5rem; }
.bigcta-ico svg { width: 1.35rem; height: 1.35rem; }
.bigcta-card strong { font-family: var(--f-disp); font-size: 1.5rem; line-height: 1.1; }
.bigcta-num { font-size: 1.28rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bigcta-note { font-size: .93rem; margin-top: .5rem; }
.bigcta-call { background: var(--ink); color: #fff; }
.bigcta-call .bigcta-ico { background: var(--y); color: var(--ink); }
.bigcta-call .bigcta-num { color: var(--y); }
.bigcta-call .bigcta-note { color: var(--txt-inv-2); }
.bigcta-text { background: var(--y); color: var(--ink); }
.bigcta-text .bigcta-ico { background: var(--ink); color: var(--y); }
.bigcta-text .bigcta-note { color: #574d24; }

.promise { display: flex; gap: .7rem; align-items: flex-start; margin: 1.4rem 0 0; padding: 1rem 1.2rem; background: var(--paper-2); border-radius: var(--r-sm); font-size: .96rem; color: var(--txt-2); }
.promise svg { color: #2f7d4f; margin-top: .25em; }
.promise strong { color: var(--ink); }

/* ---------------------------------------------------------------- composer */
.composer { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; margin-top: 1.8rem; }
@media (max-width: 900px) { .composer { grid-template-columns: 1fr; } }
.composer-fields { background: #fff; border: 1px solid #e2dfd7; border-radius: var(--r); padding: 1.5rem 1.6rem; }
.composer fieldset { border: 0; margin: 0 0 1.3rem; padding: 0; }
.composer legend, .field > span, .composer h3 { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-2); }
.composer legend { margin-bottom: .7rem; padding: 0; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .55rem; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt span { display: flex; flex-direction: column; gap: .1rem; padding: .8rem 1rem; border: 1.5px solid var(--paper-3); border-radius: var(--r-sm); background: #fff; transition: border-color .15s, background .15s; }
.opt strong { font-size: .97rem; }
.opt em { font-style: normal; font-size: .83rem; color: var(--txt-2); }
.opt:hover span { border-color: #c9cdd5; }
.opt input:checked + span { border-color: var(--ink); background: var(--y-soft); }
.opt input:focus-visible + span { outline: 3px solid var(--y); outline-offset: 2px; }

.composer-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem; margin-bottom: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field input, .field select { font: inherit; font-size: .97rem; padding: .7rem .85rem; border: 1.5px solid var(--paper-3); border-radius: var(--r-sm); background: #fff; color: var(--txt); width: 100%; }
.field input:focus, .field select:focus { outline: none; border-color: var(--ink); }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .94rem; margin-bottom: .55rem; cursor: pointer; }
.check input { margin-top: .28em; accent-color: var(--ink); width: 1.05em; height: 1.05em; flex: none; }

.composer-out { background: var(--ink); color: var(--txt-inv); border-radius: var(--r); padding: 1.5rem 1.6rem; position: sticky; top: 96px; }
.composer-out h3 { color: var(--txt-inv-2); margin-bottom: .7rem; }
@media (max-width: 900px) { .composer-out { position: static; } }
.bubble { background: #23282f; border-radius: 14px 14px 14px 4px; padding: .95rem 1.1rem; font-size: .96rem; line-height: 1.55; color: #eef1f5; margin: 0 0 1.1rem; min-height: 5rem; }
.composer-out .btn-ghost { border-color: #3b444f; color: var(--txt-inv); }
.composer-out .btn-ghost:hover { background: #23282f; border-color: #57616e; color: #fff; }
.composer-out .btn-plain { color: var(--txt-inv-2); }
.composer-out .btn-plain:hover { color: var(--y); }
.composer-out .note { color: #7c8593; }

/* ---------------------------------------------------------------- steps */
.steps { counter-reset: s; list-style: none; margin: 1.4rem 0 0; padding: 0; }
.steps li { counter-increment: s; position: relative; padding: 0 0 1.4rem 3.4rem; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -.15rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; background: var(--y); color: var(--ink); font-family: var(--f-disp); font-weight: 700; font-size: 1.1rem; border-radius: 50%; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 1.13rem; top: 2.5rem; bottom: .2rem; width: 2px; background: var(--paper-3); }

/* mobile action bar gets a text button */
@media (max-width: 720px) { .ab-text { background: var(--y); color: var(--ink); } }

/* ---------------------------------------------------------------- named endorsement */
.endorse { margin: 0 auto; max-width: 900px; background: var(--ink); color: var(--txt-inv); border-radius: var(--r); padding: clamp(1.8rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.2rem); position: relative; }
.endorse-wide { max-width: 100%; }
.endorse-mark { position: absolute; top: clamp(1rem, 2vw, 1.6rem); right: clamp(1.2rem, 3vw, 2.4rem); color: var(--y); opacity: .35; }
.endorse-mark svg { width: 2.6rem; height: 2.6rem; }
.endorse blockquote { margin: 0; }
.endorse blockquote p { font-family: var(--f-disp); font-size: clamp(1.12rem, 2.1vw, 1.5rem); line-height: 1.45; color: #fff; margin: 0; }
.endorse figcaption { display: flex; flex-direction: column; gap: .12rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 2px solid var(--y); }
.endorse-who { font-family: var(--f-disp); font-weight: 700; font-size: 1.16rem; color: var(--y); }
.endorse-role { font-size: .93rem; color: var(--txt-inv-2); }

.quote-small { margin-top: 2.2rem; text-align: center; }
.quote-small blockquote p { font-size: clamp(1.02rem, 1.9vw, 1.2rem); color: var(--txt-2); }
.eyebrow.center { text-align: center; }

/* ---------------------------------------------------------------- sale (rebuilt from the client's poster) */
.salecard { background: var(--y); color: var(--ink); border-radius: var(--r); padding: clamp(1.8rem, 4vw, 3rem); text-align: center; border: 3px solid var(--ink); }
.sale-kicker { font-size: .82rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 .4rem; }
.sale-deal { display: flex; align-items: baseline; justify-content: center; gap: .5rem; flex-wrap: wrap; font-family: var(--f-disp); font-weight: 700; line-height: 1; margin: 0 0 .3rem; }
.sale-any { font-size: clamp(1.2rem, 3vw, 1.9rem); text-transform: uppercase; }
.sale-n { font-size: clamp(3.4rem, 11vw, 6.5rem); }
.sale-word { font-size: clamp(1.4rem, 3.6vw, 2.4rem); text-transform: uppercase; }
.sale-price { font-family: var(--f-disp); font-weight: 700; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.1; margin: 0 0 .2rem; }
.sale-price span { display: block; font-family: var(--f-body); font-weight: 500; font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; color: #574d24; }
.sale-badges { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; justify-content: center; margin: 1.3rem 0 0; padding: 0; font-size: .92rem; font-weight: 600; }
.sale-badges li { display: inline-flex; align-items: center; gap: .4rem; }
.sale-badges svg { width: 1em; height: 1em; color: var(--ink); }
.sale-dates { font-size: .9rem; color: #574d24; margin: .7rem 0 1.4rem; }
.sale-cta { justify-content: center; }
.sale-tag { font-family: var(--f-disp); font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.25rem); text-transform: uppercase; letter-spacing: .02em; margin: 1.4rem 0 0; }

/* ---------------------------------------------------------------- fly showcase */
.showcase { overflow: hidden; }
.showcase { background: radial-gradient(80% 60% at 50% 8%, #1d2530 0%, transparent 62%), var(--ink); }
.showcase .eyebrow { text-align: center; }
.showcase h2 { text-align: center; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }

.show-stage { position: relative; --slide: min(460px, 82vw); }
.show-track { display: flex; list-style: none; margin: 0; padding: 0; width: max-content;
  margin-left: calc(50% - var(--slide) / 2);
  transform: translateX(calc(-1 * var(--i) * var(--slide)));
  transition: transform .55s cubic-bezier(.3,.9,.3,1); }
@media (prefers-reduced-motion: reduce) { .show-track { transition: none; } }

.show-slide { width: var(--slide); flex: 0 0 var(--slide); padding: 0 clamp(.6rem, 2vw, 1.2rem);
  opacity: .28; transform: scale(.84); transition: opacity .45s ease, transform .45s ease; }
.show-slide[aria-current="true"] { opacity: 1; transform: scale(1); }

.show-disc { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.show-disc::before { content: ""; position: absolute; inset: 12%; border-radius: 50%;
  background: var(--disc); opacity: .92; }
.show-disc .fly-art { position: relative; width: 118%; max-width: none; filter: drop-shadow(0 18px 26px rgba(0,0,0,.45)); }
.show-disc .fly-art-tbc { width: 76%; aspect-ratio: 1; border-radius: 50%; background:
  repeating-linear-gradient(135deg, #1a1e25 0 12px, #171b21 12px 24px); }

.show-meta { text-align: center; margin-top: -.4rem; }
.show-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--y); margin: 0 0 .3rem; }
.show-meta h3 { font-size: clamp(1.6rem, 4vw, 2.3rem); color: #fff; margin-bottom: .35rem; }
.show-note { color: var(--txt-inv-2); font-size: .95rem; max-width: 34ch; margin: 0 auto .7rem; }
.show-price { font-family: var(--f-disp); font-weight: 700; font-size: 1.5rem; color: var(--y); margin: 0 0 1rem; }
.show-cta { justify-content: center; }
.show-slide:not([aria-current="true"]) .show-meta { visibility: hidden; }
.btn-outline-light { background: transparent; color: #fff; border-color: #454e5a; }
.btn-outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.show-nav { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-top: clamp(1.2rem, 3vw, 2rem); }
.show-arrow { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: transparent; color: #fff; border: 1.5px solid #3b444f; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.show-arrow:hover { background: var(--y); border-color: var(--y); color: var(--ink); }
.show-dots { display: flex; gap: .4rem; overflow-x: auto; padding: .3rem; scrollbar-width: none; }
.show-dots::-webkit-scrollbar { display: none; }
.show-dot { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; cursor: pointer;
  background: transparent; border: 1.5px solid #2d353f; border-radius: 999px; padding: .42rem .8rem;
  color: var(--txt-inv-2); font: inherit; font-size: .85rem; font-weight: 600; transition: border-color .15s, color .15s, background .15s; }
.show-dot:hover { color: #fff; border-color: #4d5763; }
.show-dot[aria-current="true"] { color: var(--ink); background: var(--y); border-color: var(--y); }
.show-swatch { width: .8rem; height: .8rem; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%); box-shadow: 0 0 0 1.5px rgba(255,255,255,.25); }

/* ---------------------------------------------------------------- species */
.fish-art { display: block; width: 100%; height: auto; }
.fishstrip { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fishstrip a { display: flex; flex-direction: column; gap: .3rem; padding: 1rem .9rem 1.1rem;
  background: #171c23; border: 1px solid #262e38; border-radius: var(--r-sm); text-decoration: none;
  transition: border-color .16s, background .16s, transform .16s; }
.fishstrip a:hover { border-color: var(--y); background: #1d232b; transform: translateY(-2px); }
.fishstrip strong { color: #fff; font-size: .97rem; }
.fish-tag { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #74d39a; }
.fish-tag.is-intro { color: #e8a35c; }

.fishcards { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .fishcards { grid-template-columns: repeat(2, 1fr); } }
.fishcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--paper-3);
  border-radius: var(--r); overflow: hidden; scroll-margin-top: 110px; }
.fishcard-art { background: linear-gradient(160deg, #eef2f6 0%, #dfe7ee 100%); padding: 1.4rem 1.2rem; }
.fishcard-flag .fishcard-art { background: linear-gradient(160deg, #fff4d0 0%, #ffe49b 100%); }
.fishcard-flag { border-color: var(--y); box-shadow: 0 0 0 2px rgba(250,204,52,.35); }
.fish-big { max-width: 420px; margin-inline: auto; }
.fishcard-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.fishcard-kicker { font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--txt-2); margin: 0 0 .3rem; }
.fishcard-kicker em { font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 500; }
.fishcard h3 { font-size: 1.32rem; margin-bottom: .3rem; }
.fishcard-lede { font-family: var(--f-disp); font-size: 1.05rem; color: var(--ink); margin-bottom: .6rem; }
.fishcard p { font-size: .95rem; color: var(--txt-2); }
.fishstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem;
  margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--paper-3); }
.fishstats div { display: flex; flex-direction: column; gap: .1rem; }
.fishstats dt { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--txt-2); }
.fishstats dd { margin: 0; font-size: .9rem; font-weight: 600; color: var(--ink); }

/* links inside dark sections need the brand yellow, not the lake blue */
.sec-dark a:not(.btn):not(.fishstrip a) { color: var(--y); }
.sec-dark a:not(.btn):not(.fishstrip a):hover { color: #fff; }
.sec-dark .more { color: var(--y); }

/* real product cutouts: portrait carded shots, sat on the frame not cropped */
.fly-photo { aspect-ratio: auto; object-fit: contain; width: auto; max-height: 210px; margin: 0 auto; padding: .5rem 0; }
.show-disc .fly-photo { max-height: none; width: 78%; padding: 0;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.5)); }
.show-disc .fly-art.fly-photo { position: relative; }

/* real species photography */
.fish-photo { display: block; width: 100%; height: auto; aspect-ratio: 8/5; object-fit: cover; border-radius: var(--r-sm); }
.fishcard-art { padding: 0; background: #0e1014; }
.fishcard-art .fish-photo { border-radius: 0; }
.fish-plate { object-fit: contain; background: #f4f5f7; }
.fishstrip .fish-photo { border-radius: var(--r-sm); margin-bottom: .5rem; }
.fish-credit { font-size: .74rem; color: var(--txt-2); margin: .6rem 0 0; }
.fish-credit a { color: var(--txt-2); }

/* ---------------------------------------------------------------- forecast */
.fc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: 1.2rem; }
.fc-head h2 { margin: 0; }
.fc-head .note { margin: 0; }
.fc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
.fc-loading { grid-column: 1 / -1; color: var(--txt-2); margin: 0; padding: 1.4rem; background: var(--paper-2); border-radius: var(--r-sm); text-align: center; }
.fcd { background: #fff; border: 1px solid var(--paper-3); border-radius: var(--r); padding: 1rem .85rem 1.1rem; text-align: center; }
.fcd-day { font-family: var(--f-disp); font-weight: 700; font-size: 1.02rem; margin: 0; }
.fcd-date { font-size: .76rem; color: var(--txt-2); margin: 0 0 .5rem; }
.fcd-icon { font-size: 1.9rem; line-height: 1; margin: 0 0 .3rem; }
.fcd-cond { font-size: .8rem; color: var(--txt-2); margin: 0 0 .55rem; min-height: 2.1em; }
.fcd-temp { margin: 0 0 .45rem; display: flex; gap: .4rem; justify-content: center; align-items: baseline; }
.fcd-temp strong { font-family: var(--f-disp); font-size: 1.5rem; }
.fcd-temp span { color: var(--txt-2); font-size: .95rem; }
.fcd-wind { font-size: .82rem; font-weight: 650; margin: 0 0 .15rem; padding: .2rem .4rem; border-radius: 999px; }
.fcd-wind.is-calm { color: #24603f; background: #e5f4ea; }
.fcd-wind.is-breezy { color: #7a5312; background: #fdf1d8; }
.fcd-wind.is-rough { color: #8c3030; background: #fbe6e6; }
.fcd-sub { font-size: .74rem; color: var(--txt-2); margin: .3rem 0 0; }
.months .is-trophy { background: #fffaea; }
.months tbody th { white-space: nowrap; }
.tag-trophy { display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--y); color: var(--ink); padding: .12rem .42rem; border-radius: 999px; margin-left: .35rem; vertical-align: middle; }
.months td:last-child { font-size: .92rem; color: var(--txt-2); min-width: 22ch; }

/* ---------------------------------------------------------------- solunar */
.solunar .lead { max-width: 68ch; }
.sol-strip { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem .2rem 1rem; scrollbar-width: none; }
.sol-strip::-webkit-scrollbar { display: none; }
.sol-pill { flex: 1 0 auto; min-width: 78px; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  background: transparent; border: 1.5px solid #2b333d; border-radius: var(--r); padding: .6rem .7rem;
  color: var(--txt-inv-2); font: inherit; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.sol-pill span { font-size: .66rem; font-weight: 700; letter-spacing: .1em; }
.sol-pill strong { font-family: var(--f-disp); font-size: 1.5rem; line-height: 1.1; color: #fff; }
.sol-pill:hover { border-color: #4a545f; }
.sol-pill[aria-current="true"] { background: var(--y); border-color: var(--y); color: #5c4d17; }
.sol-pill[aria-current="true"] strong { color: var(--ink); }

.sol-panel { background: #151a21; border: 1px solid #242c36; border-radius: var(--r); padding: clamp(1.2rem, 3vw, 2rem); }
.sol-rating { position: relative; width: 150px; margin: 0 auto .4rem; text-align: center; }
.sol-gauge { width: 150px; height: 150px; transform: rotate(-135deg); }
.g-track, .g-fill { fill: none; stroke-width: 10; stroke-linecap: round; }
.g-track { stroke: #262f39; stroke-dasharray: 245 400; }
.g-fill { stroke: var(--y); transition: stroke-dashoffset .5s ease; }
.sol-rating-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sol-rating-txt strong { font-family: var(--f-disp); font-size: 2.5rem; line-height: 1; color: #fff; }
.sol-rating-txt strong span { font-size: 1rem; color: var(--txt-inv-2); }
.sol-rating-txt em { font-style: normal; font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--y); }
.sol-rating-label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-inv-2); margin: .2rem 0 0; }

.sol-chart { margin: 1.6rem 0 1.4rem; }
.sol-bars { display: flex; align-items: flex-end; gap: 2px; height: 110px; }
.sol-bars i { flex: 1; height: var(--h); background: #3f7f96; border-radius: 2px 2px 0 0; }
.sol-bars i.is-now { background: #ff7a59; }
.sol-axis { display: flex; justify-content: space-between; font-size: .7rem; color: #6f7a86; margin-top: .35rem; }

.sol-times { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid #242c36; border-bottom: 1px solid #242c36; text-align: center; }
.sol-col + .sol-col { border-left: 1px solid #242c36; }
.sol-h { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--y); margin: 0 0 .5rem; }
.sol-times p { margin: 0 0 .3rem; }
.sol-times strong { font-family: var(--f-disp); font-size: clamp(1rem, 2.2vw, 1.25rem); color: #fff; font-variant-numeric: tabular-nums; }

.sol-astro { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; padding-top: 1.2rem; }
.sol-astro-col p { display: flex; justify-content: space-between; gap: .8rem; margin: 0 0 .35rem; font-size: .9rem; color: #fff; font-variant-numeric: tabular-nums; }
.sol-astro-col span { color: var(--txt-inv-2); font-size: .8rem; }
.sol-phase { text-align: center; }
.sol-phase em { display: block; font-style: normal; font-size: .82rem; color: #fff; margin-top: .35rem; }
.sol-phase small { color: var(--txt-inv-2); font-size: .74rem; }
.sol-dot { display: block; width: 46px; height: 46px; border-radius: 50%; margin: 0 auto;
  background: linear-gradient(90deg, #e9eef4 calc(var(--lit) * 1%), #232b34 calc(var(--lit) * 1%)); box-shadow: inset 0 0 0 1px #39424d; }
@media (max-width: 620px) { .sol-astro { grid-template-columns: 1fr; } .sol-times { grid-template-columns: 1fr; } .sol-col + .sol-col { border-left: 0; border-top: 1px solid #242c36; padding-top: .8rem; } }

.sol-note { margin-top: 1.6rem; }
.sol-note p { color: var(--txt-inv-2); font-size: .95rem; max-width: 78ch; }
.sol-note strong { color: #fff; }

/* ---------------------------------------------------------------- wind finder */
.wind-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0 0 1.1rem; font-size: .84rem; color: var(--txt-2); }
.wind-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.wl { width: .8rem; height: .8rem; border-radius: 3px; flex: none; }
.wl-calm { background: #4f9d6b; } .wl-ok { background: #7fb04a; }
.wl-chop { background: #e0a32e; } .wl-rough { background: #cf5b46; }
/* The 48 hourly columns are always wider than the page, so the track scrolls.
   Without the right-edge fade the last column is simply sliced off and there is
   nothing to say the rest of the forecast is one swipe away. */
.wind-wrap { position: relative; border: 1px solid var(--paper-3); border-radius: var(--r); background: var(--paper-2); padding: .6rem; }
.wind-wrap::after { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: clamp(24px, 4vw, 46px);
  border-radius: 0 var(--r) var(--r) 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(246,244,239,0) 0%, var(--paper-2) 78%); }
.wind-scroll { display: flex; gap: 2px; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: thin;
  scroll-snap-type: x proximity; }
.wcol { scroll-snap-align: start; }
.wcol { flex: 0 0 44px; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .4rem .1rem; border-radius: 7px; background: #fff; }
.wcol-day { flex: 0 0 auto; background: none; justify-content: center; padding: 0 .5rem; }
.wcol-day span { writing-mode: vertical-rl; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-2); }
.w-hr { font-size: .64rem; color: var(--txt-2); }
.w-bar { position: relative; width: 12px; height: 74px; display: flex; align-items: flex-end; justify-content: center;
  background: #e8eaed; border-radius: 3px; overflow: hidden; }
.w-bar::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: var(--h); background: #cdd3d9; }
.w-bar i { position: relative; width: 100%; height: var(--h); }
.wcol.is-calm .w-bar i { background: #4f9d6b; }
.wcol.is-ok .w-bar i { background: #7fb04a; }
.wcol.is-chop .w-bar i { background: #e0a32e; }
.wcol.is-rough .w-bar i { background: #cf5b46; }
.w-sp { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.w-ar { font-size: .8rem; color: var(--txt-2); transform: rotate(var(--rot)); line-height: 1; }

/* ---------------------------------------------------------------- reports & tips */
.report { padding: 0 0 1.6rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--paper-3); }
.report:last-of-type { border-bottom: 0; }
.report.is-latest { border-left: 4px solid var(--y); padding-left: 1.4rem; }
.report-badge { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: var(--y); color: var(--ink); padding: .2rem .55rem; border-radius: 999px; margin: 0 0 .5rem; }
.report h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: .4rem; }
.report h2 a { color: var(--ink); text-decoration: none; }
.report h2 a:hover { text-decoration: underline; }
.report-facts { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; margin: 1rem 0; padding: 0; }
.report-facts li { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .9rem; background: var(--paper-2); border-radius: var(--r-sm); }
.report-facts span { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-2); }
.report-facts strong { font-size: .95rem; }
.report-facts.is-big li { background: #fff; border: 1px solid var(--paper-3); }
.report-facts.is-big strong { font-family: var(--f-disp); font-size: 1.1rem; }
.report-flies { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1rem; }
.report-flies li { padding: .45rem .95rem; background: var(--y-soft); border: 1px solid #efdca4; border-radius: 999px; font-weight: 600; font-size: .95rem; }
.report-flies a { color: var(--ink); text-decoration: none; }
.report-flies a:hover { text-decoration: underline; }
.report-signoff { font-family: var(--f-disp); font-size: 1.12rem; color: var(--ink); margin-top: 1.6rem; }

.tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.tip { display: flex; flex-direction: column; gap: .4rem; padding: 1.3rem 1.4rem 1.4rem; background: #fff;
  border: 1px solid var(--paper-3); border-radius: var(--r); text-decoration: none; color: var(--ink);
  transition: transform .16s, box-shadow .2s, border-color .16s; }
.tip:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #d8d4c9; }
.tip-tag { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lake); }
.tip strong { font-family: var(--f-disp); font-size: 1.18rem; line-height: 1.25; }
.tip-blurb { font-size: .93rem; color: var(--txt-2); }
.tip-more { margin-top: auto; padding-top: .6rem; font-weight: 650; font-size: .9rem; color: var(--lake); display: inline-flex; align-items: center; gap: .35rem; }

/* ---------------------------------------------------------------- hero headline (client copy) */
.hero-h1 { display: flex; flex-direction: column; gap: .18em; text-transform: uppercase; letter-spacing: -.005em; }
.hero-h1 span { font-size: .58em; line-height: 1.12; color: #e9edf2; font-weight: 700; }
.hero-h1 em { font-style: normal; line-height: 1.02; }


/* ---------------------------------------------------------------- syndicated blocks */
.bestwin .bw-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.4rem); align-items: center; margin: 1.2rem 0; }
@media (max-width: 620px) { .bestwin .bw-grid { grid-template-columns: 1fr; } }
.bw-rate { text-align: center; }
.bw-rate strong { display: block; font-family: var(--f-disp); font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1; }
.bw-rate strong span { font-size: .38em; color: var(--txt-2); }
.bw-rate em { font-style: normal; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-2); }
.sec-dark .bw-rate strong { color: #fff; }
.sec-dark .bw-rate em, .sec-dark .bw-rate strong span { color: var(--y); }
.bw-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.bw-cols p { margin: 0 0 .2rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.bw-h { font-size: .68rem !important; font-weight: 800 !important; letter-spacing: .12em; text-transform: uppercase; color: var(--lake); margin-bottom: .35rem !important; }
.sec-dark .bw-h { color: var(--y); }
.sec-dark .bw-cols p { color: #fff; }

.mn-stats { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .7rem; margin: 1rem 0 1.2rem; padding: 0; }
.mn-stats li { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .9rem; background: var(--paper-2); border-radius: var(--r-sm); }
.mn-stats span { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-2); }
.mn-stats strong { font-family: var(--f-disp); font-size: 1.25rem; }
/* These two are data blocks, so they sit on the page gutter with the cards and
   grids around them rather than in the 760px reading column — indenting them
   left their edge lining up with nothing. Only their prose keeps a measure. */
.bestwin .note { max-width: 88ch; }
.monthnow p { max-width: 68ch; }

.soltable th span { font-weight: 400; color: var(--txt-2); font-size: .84rem; }
.soltable .tw { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .92rem; }
.soltable tr.is-today { background: #fffaea; }
.rate-chip { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.rate-excellent { background: #d9f0e2; color: #1d6b41; }
.rate-good { background: #e6f2d8; color: #4a6b1d; }
.rate-fair { background: #fdf1d8; color: #7a5312; }
.rate-poor { background: #f1f2f4; color: #5a6270; }

/* ---------------------------------------------------------------- compact photo hero */
/* The card is an inset object, not a full-bleed band: it needs page background
   above AND below it. Without the bottom gap a following .sec-dark/.sec-alt
   starts flush on the card's rounded edge and the two read as one broken block. */
.phero { padding: clamp(.7rem, 1.6vw, 1.2rem) 0 var(--sp-gap); }
.phero-card { position: relative; isolation: isolate; overflow: hidden; border-radius: clamp(14px, 2vw, 22px);
  background: var(--ink); min-height: clamp(260px, 34vw, 400px); display: flex; align-items: flex-end; }
.phero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; z-index: -2; }
.phero-scrim { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(10,12,16,.5) 0%, rgba(10,12,16,.2) 34%, rgba(10,12,16,.9) 100%),
  linear-gradient(96deg, rgba(10,12,16,.72) 0%, rgba(10,12,16,.32) 52%, rgba(10,12,16,0) 82%); }
.phero-in { padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.2rem, 3.4vw, 2.6rem); color: #fff; max-width: 62ch; }
.phero-in h1 { color: #fff; font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: .4rem; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.phero-lead { color: #e6eaef; font-size: clamp(1rem, 1.7vw, 1.12rem); margin: 0; }

/* ---------------------------------------------------------------- forecast polish */
.wi { width: 2.6rem; height: 2.2rem; display: block; margin: 0 auto; }
.wi-sun { fill: #f2b21f; }
.wi-ray { stroke: #f2b21f; stroke-width: 2.6; stroke-linecap: round; fill: none; }
.wi-cloud { fill: #cdd6df; }
.wi-line { stroke: #aab4bf; stroke-width: 2.6; stroke-linecap: round; fill: none; }
.wi-drop { stroke: #5aa2c9; stroke-width: 2.8; stroke-linecap: round; fill: none; }
.wi-bolt { fill: #f2b21f; }
.fcd.is-today { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.fcd-icon { margin: 0 0 .35rem; }

.fc-verdict { background: var(--ink); color: #fff; border-radius: var(--r); padding: 1.3rem 1.5rem;
  margin-bottom: 1rem; display: grid; gap: .25rem; }
.v-kicker { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--y); margin: 0; }
.v-day strong { font-family: var(--f-disp); font-size: clamp(1.4rem, 3vw, 2rem); }
.v-day { margin: 0; }
.v-why { color: var(--txt-inv-2); margin: .1rem 0 .8rem; }
.v-cta { margin: 0; }

/* ---------------------------------------------------------------- solunar day strip */
.barcell { min-width: 190px; }
.daybar { position: relative; display: block; height: 16px; border-radius: 4px; background: #e7e9ec; overflow: hidden; }
.daybar i { position: absolute; top: 0; bottom: 0; }
.b-day { background: #f7f2e0; }
.b-min { background: #b9c48a; }
.b-maj { background: var(--y); }
.barkey { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .82rem; color: var(--txt-2); margin: .4rem 0 1rem; }
.barkey span { display: inline-flex; align-items: center; gap: .4rem; }
.barkey i { width: .85rem; height: .85rem; border-radius: 3px; }
.k-day { background: #f7f2e0; box-shadow: inset 0 0 0 1px #e3dcc4; }
.k-min { background: #b9c48a; }
.k-maj { background: var(--y); }
.soltable tr.is-hot { background: #fffdf3; }
.soltable tr.is-hot .rate-chip { box-shadow: 0 0 0 2px rgba(250,204,52,.45); }

/* ---------------------------------------------------------------- month temperature bar */
.tempcell { min-width: 200px; }
.tempbar { position: relative; display: block; height: 10px; border-radius: 5px; background: #e7e9ec; margin-bottom: .3rem; }
.tempbar i { position: absolute; top: 0; bottom: 0; border-radius: 5px;
  background: linear-gradient(90deg, #6aa9d0, #f2b21f); }
.tempnum { font-size: .84rem; color: var(--txt-2); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- google reviews */
.gr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.6rem; margin-bottom: 1.6rem; }
.gr-head h2 { margin: 0; }
.gr-score { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: .96rem; color: var(--txt-2); }
.gr-score strong { font-family: var(--f-disp); font-size: 1.5rem; color: var(--ink); line-height: 1; }
.gr-score .stars { margin: 0; }
/* 320px min gives 3 across at full width, so five reviews sit 3+2 rather than
   4+1 with one card stranded on its own row. */
.gr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.gr-card { margin: 0; background: #fff; border: 1px solid var(--paper-3); border-radius: var(--r);
  padding: 1.2rem 1.3rem 1.1rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.sec-alt .gr-card { border-color: #e2dfd7; }
.gr-card .stars { margin: 0 0 .6rem; }
.gr-card blockquote { margin: 0; flex: 1; }
.gr-card blockquote p { margin: 0 0 .9rem; font-size: .98rem; line-height: 1.6; }
.gr-card figcaption { font-weight: 650; font-size: .92rem; color: var(--txt-2); }