/* ==========================================================================
   TOW ROPE KATFISHING — Design System
   Google Fonts are loaded via <link> in each page's <head> (with
   preconnect) instead of @import here — @import blocks CSS parsing on
   a second round-trip before the browser even knows the fonts exist.
   ========================================================================== */

:root{
  /* ---- Palette ---- */
  --void:        #0a0a0a;
  --charcoal:    #16171a;
  --charcoal-2:  #1e2024;
  --line:        #2a2c31;
  --gold:      #d4af37;
  --gold-dim:  #a8841f;
  --gold-glow: rgba(212,175,55,.35);
  --bone:        #f2efe9;
  --steel:       #8b8f94;
  --steel-dim:   #5b5e63;
  --success:     #4caf7d;

  /* ---- Type ---- */
  --f-display: 'Anton', Impact, sans-serif;
  --f-body:    'Inter', -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', monospace;

  /* ---- Scale ---- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1280px;

  --shadow-lift: 0 20px 60px -20px rgba(0,0,0,.7);
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--f-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
/* Reusable for a plain inline text link dropped into otherwise
   non-linked body copy (an outbound mention like "KatYakers of Ohio")
   outside of .post-content, which already styles its own <a> tags. */
.link-inline{ color:var(--gold); text-decoration:underline; text-underline-offset:.15em; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }

/* ---- Focus visibility (a11y) ---- */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* ---- Skip link ---- */
.skip-link{
  position:absolute; top:-100%; left:1rem;
  background:var(--gold); color:var(--void);
  padding:.75rem 1.25rem; z-index:200; font-weight:700;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:0; }

/* ---- Layout helpers ---- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block: clamp(3.5rem, 8vw, 7rem); position:relative; }
.section-tight{ padding-block: clamp(2.5rem, 5vw, 4rem); }
.grid{ display:grid; gap:1.5rem; }
.grid > *{ min-width:0; }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---- Typography ---- */
h1,h2,h3,h4{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.01em; line-height:1.05; color:var(--bone); }
h1{ font-size:clamp(2.6rem, 7vw, 5.5rem); }
h2{ font-size:clamp(1.9rem, 4.5vw, 3.1rem); }
h3{ font-size:clamp(1.25rem, 2.5vw, 1.65rem); }
p{ color:var(--steel); max-width:62ch; }
.eyebrow{
  font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.18em;
  color:var(--gold); font-size:.78rem; font-weight:700;
  display:flex; align-items:center; gap:.6em; margin-bottom:.9rem;
}
.eyebrow::before{
  content:''; width:18px; height:14px; display:inline-block; flex-shrink:0;
  background:url('../img/egg/katfish.png') center/contain no-repeat;
}
.section-head{ max-width:44rem; margin-bottom:2.5rem; }
.lede{ font-size:1.1rem; color:var(--steel); }
.text-gold{ color:var(--gold); }
.mono{ font-family:var(--f-mono); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-body); font-weight:700; font-size:.95rem;
  padding:.95rem 1.9rem; border-radius:999px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap; position:relative;
}
@media (max-width:480px){
  .btn{ white-space:normal; text-align:center; }
}
.btn-primary{
  background:linear-gradient(135deg, var(--gold), var(--gold-dim));
  color:var(--void);
  box-shadow:0 8px 24px -8px var(--gold-glow);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -8px var(--gold-glow); }
.btn-ghost{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  color:var(--bone);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn-sm{ padding:.6rem 1.2rem; font-size:.82rem; }

/* ---- Glass card ---- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(10px);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* Selector repeats .card on purpose — bumps specificity just enough to
   reliably beat [data-reveal].is-visible{ transform:translateY(0) },
   which shares this rule's old (0,2,0) specificity and, since it's
   defined later in the file, was silently cancelling this lift on every
   card on the site (gear, roster, blog, video — anything both revealed
   on scroll AND hovered, which is nearly everything). Same root cause
   found and fixed on .pb-card specifically; this is the general case. */
.card.card:hover{ transform:translateY(-4px); border-color:rgba(212,175,55,.4); box-shadow:var(--shadow-lift); }

/* -- personal-best cards: grow + uncrop the full photo on hover, over 1.5s -- */
.pb-card{
  position:relative; overflow:visible;
  transition:transform 1.5s var(--ease), border-color 1.5s var(--ease), box-shadow 1.5s var(--ease);
}
.pb-photo{
  aspect-ratio:4/3; border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow:hidden;
  background:linear-gradient(150deg,#1c1f23,#0c0d0e); transition:aspect-ratio 1.5s var(--ease);
}
.pb-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Scale is uniform (same factor both axes) so the card genuinely grows
   wider too, not just taller from the aspect-ratio reveal below — bumped
   well past the subtle 1.08 this used to be so it's obviously growing in
   both directions, deliberately overlapping neighboring cards on hover
   (overflow:visible + z-index above handle that). */
/* Selector is .card.pb-card:hover (not just .pb-card:hover) specifically
   to outrank [data-reveal].is-visible{ transform:translateY(0) } — same
   specificity, and since that rule is the one active once a card has
   scrolled into view (i.e. almost always), it was silently overwriting
   this transform back to nothing. That's the real reason the card was
   only ever visibly growing taller (a separate rule, on the child
   .pb-photo, wasn't affected) and never wider. */
.card.pb-card:hover{ transform:translateY(-4px) scale(1.3); z-index:5; border-color:rgba(212,175,55,.4); box-shadow:var(--shadow-lift); }
.pb-card:hover .pb-photo{ aspect-ratio:var(--reveal-ratio, 4/3); }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  padding-block:1.1rem;
  background:rgba(10,10,10,.55);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), padding .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled{
  padding-block:.6rem;
  background:rgba(10,10,10,.86);
  border-bottom-color:var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.logo{ display:flex; align-items:center; gap:.65rem; font-family:var(--f-display); font-size:1.35rem; letter-spacing:.02em; }
.logo .knot{ color:var(--gold); }
.logo small{ display:block; font-family:var(--f-mono); font-size:.55rem; letter-spacing:.16em; color:var(--steel); text-transform:uppercase; font-weight:400; }
.logo-img{ height:42px; width:auto; display:block; transition:transform .2s var(--ease); }
.logo:hover .logo-img{ transform:scale(1.04); }
.footer-col .logo-img{ height:52px; }

.main-nav{ display:flex; }
/* NOTE: must be a direct-child selector (>), not a descendant one — a
   descendant selector here would also match .nav-dropdown-inner (a <ul>
   nested inside .main-nav for the dropdown panels) and force those
   vertical dropdown menus into a horizontal row instead. */
.main-nav > ul{ display:flex; gap:2rem; }
.main-nav a, .main-nav .nav-dropdown-trigger{
  font-size:.86rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--steel); position:relative; padding-block:.3rem;
  transition:color .2s;
}
.main-nav a::after, .main-nav .nav-dropdown-trigger::after{
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--gold); transition:width .25s var(--ease);
}
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a.active,
.main-nav .has-dropdown:hover .nav-dropdown-trigger, .main-nav .nav-dropdown-trigger:focus-visible, .main-nav .has-dropdown.active .nav-dropdown-trigger{ color:var(--bone); }
.main-nav a:hover::after, .main-nav a.active::after,
.main-nav .has-dropdown:hover .nav-dropdown-trigger::after, .main-nav .has-dropdown.active .nav-dropdown-trigger::after{ width:100%; }

/* -- desktop nav dropdowns (Media, About+Contact) -- */
.has-dropdown{ position:relative; list-style:none; }
.nav-dropdown-trigger{ cursor:pointer; }
.nav-dropdown{
  /* top:100% with no margin keeps this box's hit-area touching the trigger —
     padding-top (not margin) creates the visual gap so hovering through it
     still counts as hovering .has-dropdown, instead of the dropdown closing
     the instant the pointer crosses a real gap on the way down to it.
     No pointer-events:none here either — this box needs to stay hoverable
     (even while invisible) for that same hand-off to work; opacity alone
     hides it, and it's positioned tight to the trigger so there's nothing
     stray to accidentally click. */
  position:absolute; top:100%; left:50%; min-width:170px; padding-top:.85rem;
  opacity:0; transform:translate(-50%,-8px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  z-index:50;
}
.has-dropdown:hover .nav-dropdown, .has-dropdown:focus-within .nav-dropdown, .has-dropdown.is-open .nav-dropdown{
  opacity:1; transform:translate(-50%,0);
}
.nav-dropdown-inner{
  background:var(--charcoal); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:.5rem; box-shadow:var(--shadow-lift); list-style:none;
}
.nav-dropdown-inner li{ list-style:none; }
.nav-dropdown-inner a{
  display:block; padding:.6rem .8rem; border-radius:6px; white-space:nowrap;
  font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--steel);
  transition:background .2s, color .2s;
}
.nav-dropdown-inner a::after{ display:none; }
.nav-dropdown-inner a:hover, .nav-dropdown-inner a:focus-visible, .nav-dropdown-inner a.active{ background:rgba(255,255,255,.05); color:var(--gold); }

/* -- mobile nav sub-groups (always expanded, no separate toggle) -- */
.nav-group-label{
  font-family:var(--f-display); font-size:1.5rem; text-transform:uppercase; color:var(--bone); display:block;
}
.nav-group-label.active{ color:var(--gold); }
.nav-subgroup{ display:grid; gap:.9rem; margin-top:1rem; padding-left:1.2rem; border-left:2px solid var(--line); }
.nav-subgroup a{ font-size:1.1rem !important; }

.header-actions{ display:flex; align-items:center; gap:1.1rem; }
.social-row{ display:flex; align-items:center; gap:.9rem; }
.social-row a{ color:var(--steel); transition:color .2s, transform .2s; }
.social-row a:hover{ color:var(--gold); transform:translateY(-2px); }
.social-row svg{ width:18px; height:18px; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:.4rem; }
.nav-toggle span{ width:24px; height:2px; background:var(--bone); transition:transform .25s var(--ease), opacity .25s; }

.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(85vw, 360px); height:100vh;
  background:var(--charcoal); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .35s var(--ease);
  z-index:150; padding:2rem 1.75rem; overflow-y:auto;
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav ul{ display:flex; flex-direction:column; gap:1.4rem; margin-top:2.5rem; }
.mobile-nav a{ font-family:var(--f-display); font-size:1.5rem; text-transform:uppercase; color:var(--bone); }
.mobile-nav .social-row{ margin-top:2.5rem; }
.nav-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:140;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.nav-scrim.is-open{ opacity:1; pointer-events:auto; }

@media (max-width:960px){
  .main-nav{ display:none; }
  .header-actions .social-row{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ==========================================================================
   SONAR DIVIDER — signature element
   ========================================================================== */
.sonar{
  position:relative; height:64px; width:100%; overflow:hidden;
  background:
    linear-gradient(180deg, transparent 0%, rgba(212,175,55,.03) 50%, transparent 100%);
}
.sonar svg{ width:200%; height:100%; animation:sonar-scroll 14s linear infinite; }
.sonar-line{ fill:none; stroke:var(--gold-dim); stroke-width:1.5; opacity:.55; }
.sonar-line.alt{ stroke:var(--steel-dim); opacity:.35; }
.sonar-ping{
  position:absolute; top:50%; left:14%; width:8px; height:8px; border-radius:50%;
  background:var(--gold); transform:translate(-50%,-50%);
  box-shadow:0 0 0 0 var(--gold-glow);
  animation:ping 3.2s ease-out infinite;
}
@keyframes sonar-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(212,175,55,.5); }
  70%{ box-shadow:0 0 0 22px rgba(212,175,55,0); }
  100%{ box-shadow:0 0 0 0 rgba(212,175,55,0); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
  padding-block: clamp(4rem, 10vw, 7rem) clamp(3rem, 8vw, 5rem);
  overflow:hidden;
  /* No hero photo in this branch (was Tow Rope's own branded promo shot) —
     pure gradient background until this gets its own art. */
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(212,175,55,.14), transparent 60%),
    linear-gradient(180deg, rgba(6,6,7,.45) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.85) 100%);
}
.hero-texture{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    repeating-linear-gradient(100deg, transparent 0 2px, rgba(255,255,255,.015) 2px 3px);
}
.hero-waterline{ position:absolute; inset:0; z-index:0; }
.hero-waterline path{ stroke:rgba(212,175,55,.18); stroke-width:1; fill:none; }
.hero-inner{
  position:relative; z-index:2; display:grid; gap:2.5rem; width:100%;
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem,4vw,2.5rem);
}
.hero .eyebrow{ justify-content:flex-start; }
.hero h1{ max-width:16ch; }
.hero h1 .flick{ color:var(--gold); display:block; }
.hero-sub{ font-size:1.15rem; max-width:46ch; margin-top:1rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.hero-stats{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.5rem); margin-top:3rem; }
.hero-stat b{ font-family:var(--f-display); font-size:2rem; color:var(--gold); display:block; }
.hero-stat span{ font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--steel); }

.media-frame{
  aspect-ratio:16/10; border-radius:var(--radius-lg); overflow:hidden; position:relative;
  border:1px solid var(--line);
  background:
    linear-gradient(160deg, #23262b, #101114 65%);
}
.media-frame::before{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(212,175,55,.12), transparent 40%),
    radial-gradient(circle at 80% 75%, rgba(255,255,255,.05), transparent 35%);
}
.media-frame .frame-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--steel-dim);
}
.media-frame .frame-icon svg{ width:15%; height:15%; opacity:.5; }
.media-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.media-frame:has(img)::before{
  background-image: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.75) 100%);
}
.media-caption{
  position:absolute; left:1.1rem; bottom:1.1rem; right:1.1rem;
  display:flex; justify-content:space-between; align-items:flex-end;
  font-family:var(--f-mono); font-size:.72rem; color:var(--gold); text-transform:uppercase; letter-spacing:.06em;
}

/* ==========================================================================
   REUSABLE PIECES
   ========================================================================== */

/* -- pill/tag -- */
.tag{
  display:inline-block; font-family:var(--f-mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--gold); background:rgba(212,175,55,.1);
  border:1px solid rgba(212,175,55,.25); padding:.3rem .7rem; border-radius:999px;
}

/* -- video card -- */
.video-card{ overflow:hidden; }
.video-thumb{
  aspect-ratio:16/9; position:relative; background:linear-gradient(150deg,#22252a,#0f1013);
  overflow:hidden;
}
.video-thumb .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; background:var(--gold); color:var(--void);
  display:flex; align-items:center; justify-content:center; transition:transform .25s var(--ease);
}
.video-card:hover .play{ transform:translate(-50%,-50%) scale(1.12); }
.video-thumb .dur{ position:absolute; right:.6rem; bottom:.6rem; background:rgba(0,0,0,.75); font-family:var(--f-mono); font-size:.7rem; padding:.2rem .5rem; border-radius:4px; }
.video-body{ padding:1.1rem 1.2rem 1.3rem; }
.video-body h4{ font-family:var(--f-body); font-weight:700; text-transform:none; font-size:1rem; margin-bottom:.35rem; }
.video-meta{ font-family:var(--f-mono); font-size:.72rem; color:var(--steel-dim); text-transform:uppercase; letter-spacing:.05em; }

/* -- blog/post card -- */
/* Same "pop out and grow" treatment as the homepage PB cards, tuned down
   slightly (1.18 vs 1.3) since a post card carries an excerpt paragraph
   that would get uncomfortably large at the bigger scale. Selector
   doubles .card for the same specificity reason as .card.card:hover
   above — needed here too or [data-reveal].is-visible cancels it. */
.post-card{
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  transition:transform 1.5s var(--ease), border-color 1.5s var(--ease), box-shadow 1.5s var(--ease);
}
.card.post-card:hover{ transform:translateY(-4px) scale(1.18); z-index:5; border-color:rgba(212,175,55,.4); box-shadow:var(--shadow-lift); }
.post-thumb{ aspect-ratio:16/10; background:linear-gradient(150deg,#1c1e22,#0d0e10); position:relative; }
.post-body{ padding:1.4rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.post-cat{ font-family:var(--f-mono); font-size:.7rem; color:var(--gold); text-transform:uppercase; letter-spacing:.08em; }
.post-body h3{ font-family:var(--f-body); text-transform:none; font-size:1.15rem; font-weight:700; }
.post-excerpt{ font-size:.92rem; }
.post-foot{ margin-top:auto; display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:.72rem; color:var(--steel-dim); padding-top:.8rem; border-top:1px solid var(--line); }

/* -- full post article body (post.html) -- */
/* Frames the whole article in a card-style border, same look as every
   other boxed element on the site. On a wide monitor the post column
   doesn't reach the edges of the screen — this gives that surrounding
   space a visible edge to sit against instead of just trailing off into
   blank background. */
.post-frame{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2.5rem clamp(1.25rem, 4vw, 2.5rem);
}
.post-content{ font-size:1.05rem; color:var(--steel); }
/* Overrides the sitewide `p{ max-width:62ch }` default (css line ~92,
   a readability cap meant for normal body copy elsewhere on the site) —
   in here specifically, paragraphs should run the same full width as
   the photos, not get capped independently of that rule. */
.post-content p{ margin-top:.9rem; max-width:none; }
.post-content p:first-child{ margin-top:0; }
.post-content h2,.post-content h3{ margin-top:2.2rem; margin-bottom:.6rem; }
.post-content ul,.post-content ol{ margin-top:.9rem; padding-left:1.4rem; list-style:disc; display:grid; gap:.5rem; }
.post-content ol{ list-style:decimal; }
/* Text runs the same full width as the photos/video below — no separate
   narrower reading column. The callout card (e.g. "Gear We Trust") is the
   one exception: it's a boxed UI element, not flowing text, and stays at
   a contained width so it doesn't turn into an oddly wide, mostly-empty
   bar. */
.post-content > .card{
  max-width:720px; margin-inline:auto;
}
.post-content a{ color:var(--gold); text-decoration:underline; text-underline-offset:.2em; }
/* .post-content a's own specificity (class+type) actually beats a bare
   .btn-primary (one class), which was quietly overriding the button's
   void-on-orange text back to orange-on-orange for any <a class="btn">
   embedded in post body copy (e.g. a product callout link) — this rule
   needs to out-specificity that, not just repeat the same declaration. */
.post-content a.btn{ color:var(--void); text-decoration:none; }
.post-content code{ font-family:var(--f-mono); font-size:.9em; background:var(--charcoal); padding:.1em .4em; border-radius:4px; color:var(--bone); }
/* Every image/video in a post — landscape or portrait — spans the full
   column width, same as each other, for one consistent visual rhythm
   down the page rather than differently-sized boxes. Portrait media
   just ends up taller, which is expected here. */
.post-content img{
  border-radius:var(--radius-md); border:1px solid var(--line); margin-top:1.5rem;
  display:block; width:100%;
}
/* For a <video poster="..."> with a landscape poster but a portrait
   clip (very common — phone video, cover frame pulled from a wide
   photo), some browsers size the box off the POSTER's aspect ratio
   instead of the video's own, even after the real video has fully
   loaded — height:auto alone won't self-correct that. If a future
   post's embedded video looks the wrong shape, add an inline
   style="aspect-ratio:<w>/<h>;" (real clip dimensions, e.g. via
   `ffprobe -show_entries stream=width,height`) on that specific
   <video> tag to force it — see the Hoover post for an example. */
.post-content video{
  border-radius:var(--radius-md); border:1px solid var(--line); margin-top:1.5rem;
  display:block; width:100%; height:auto; background:#000;
}
.post-content hr{ margin:2.2rem 0; border:none; border-top:1px solid var(--line); }

/* -- gear item -- */
.gear-card{ padding:1.4rem; display:flex; flex-direction:column; gap:.9rem; }
.gear-photo{ aspect-ratio:4/3; border-radius:var(--radius-md); background:linear-gradient(150deg,#202327,#101114); overflow:hidden; }
.gear-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; }
.gear-top h3{ font-family:var(--f-body); text-transform:none; font-size:1.05rem; font-weight:700; }
.stars{ color:var(--gold); font-size:.85rem; letter-spacing:.1em; white-space:nowrap; }
.gear-details{
  max-height:0; overflow:hidden; transition:max-height .4s var(--ease);
}
.gear-card.is-open .gear-details{ max-height:600px; }
.gear-toggle{ display:flex; align-items:center; gap:.4rem; font-family:var(--f-mono); font-size:.75rem; color:var(--gold); text-transform:uppercase; letter-spacing:.06em; }
.gear-toggle svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.gear-card.is-open .gear-toggle svg{ transform:rotate(180deg); }
.gear-specs{ font-family:var(--f-mono); font-size:.78rem; color:var(--steel); display:grid; gap:.35rem; margin-block:.9rem; }
.gear-specs div{ display:flex; justify-content:space-between; border-bottom:1px dashed var(--line); padding-bottom:.35rem; }
.pros-cons{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; font-size:.85rem; }
.pros-cons b{ display:block; margin-bottom:.4rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; }
.pros-cons .pros b{ color:var(--success); }
.pros-cons .cons b{ color:#e05656; }

/* -- Golden Whiskers: Whisker Cartel roster card -- */
.roster-card{ padding:1.4rem; display:flex; flex-direction:column; gap:.9rem; }
.roster-photo{ position:relative; aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden; background:linear-gradient(150deg,#202327,#101114); }
.roster-photo img{ width:100%; height:100%; object-fit:cover; }
/* Higher specificity than ".roster-photo img" above (needs to override
   its width/height:100%) rather than fighting it with !important.
   Not scoped to "img" — this is now a .wc-logo-swap link, not a bare
   <img>, so it needs to stay clickable (pointer-events left at default).
   aspect-ratio (not height:auto) sizes the box — both logo images are
   square, and unlike height:auto it doesn't depend on the link having
   any in-flow content tall enough to size itself from. */
.roster-photo .roster-watermark{
  position:absolute; right:.6rem; bottom:.6rem; width:15%; aspect-ratio:1/1; min-width:30px; max-width:46px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.7)); opacity:.9; transition:opacity .25s var(--ease);
}
.roster-photo .roster-watermark img{ width:100%; height:100%; object-fit:contain; display:block; }
.roster-photo .roster-watermark:hover, .roster-photo .roster-watermark:focus-visible{ opacity:1; }
.roster-initials{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:2.6rem; letter-spacing:.02em; color:var(--void);
  background:linear-gradient(135deg, var(--gold), var(--gold-dim));
}
.roster-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; }
.roster-top h3{ font-family:var(--f-body); text-transform:none; font-size:1.05rem; font-weight:700; }
.roster-realname{ font-size:.82rem; color:var(--steel); margin-top:.15rem; }
.roster-location{ font-family:var(--f-mono); font-size:.72rem; color:var(--steel-dim); text-transform:uppercase; letter-spacing:.05em; margin-top:.25rem; }
.roster-status{
  font-family:var(--f-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.3rem .65rem; border-radius:999px; white-space:nowrap; flex-shrink:0;
}
.roster-status.is-active{ color:var(--success); background:rgba(76,175,125,.12); border:1px solid rgba(76,175,125,.3); }
.roster-status.is-inactive{ color:var(--steel-dim); background:rgba(255,255,255,.03); border:1px solid var(--line); }
.roster-bio{ font-size:.9rem; }
.roster-details{ max-height:0; overflow:hidden; transition:max-height .7s var(--ease); }
.roster-card.is-open .roster-details{ max-height:900px; } /* extra headroom for the optional video */
.roster-details .brand-video{ margin-bottom:1rem; }
.roster-toggle{ display:flex; align-items:center; gap:.4rem; font-family:var(--f-mono); font-size:.75rem; color:var(--gold); text-transform:uppercase; letter-spacing:.06em; }
.roster-toggle svg{ width:14px; height:14px; transition:transform .7s var(--ease); }
.roster-card.is-open .roster-toggle svg{ transform:rotate(180deg); }
.roster-facts{ font-family:var(--f-mono); font-size:.78rem; color:var(--steel); display:grid; gap:.35rem; margin-top:.9rem; }
.roster-facts div{ display:flex; justify-content:space-between; gap:1rem; border-bottom:1px dashed var(--line); padding-bottom:.35rem; }
.roster-facts div span:first-child{ color:var(--steel-dim); flex-shrink:0; }
.roster-facts div span:last-child{ text-align:right; }
.roster-facts a{ color:var(--gold); text-decoration:underline; text-underline-offset:.15em; }

/* -- weigh-in table: one row per angler, one column per season, so a
   name never has to repeat as more seasons get filled in. Team Total is
   NOT a row in here anymore — it's its own element pinned to the bottom
   of the card (.gw-team-total), separate from the per-angler breakdown.
   Markup is still a real <table> (semantic/accessible), but visually
   each row is flattened into a wrapping flex line of small labeled
   stat-chips instead of fixed columns — the header row is hidden and
   its labels are re-injected per-cell via ::before so nothing ever
   needs a fixed column width. That's deliberate: a fixed-column table
   forces a horizontal scrollbar on any card narrower than its content
   (every phone, and even desktop at rest before the old hover-to-widen
   trick), which read as broken/annoying. Wrapping chips never overflow
   sideways at any width, so the side-scroll is gone everywhere, not
   just patched for mobile. */
.weight-table-wrap{ margin-top:.9rem; }
.weight-table, .weight-table tbody{ display:block; width:100%; }
.weight-table thead{ display:none; }
.weight-table tr{
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.7rem; row-gap:.25rem;
  padding:.55rem 0; border-bottom:1px dashed var(--line);
}
.weight-table tr:last-child{ border-bottom:none; }
.weight-table td{ padding:0; border:none; text-align:left; }
.weight-table td:first-child{
  flex:1 1 100%; color:var(--steel); font-weight:700; font-size:.85rem;
}
.weight-table td:not(:first-child){ font-family:var(--f-mono); font-size:.74rem; color:var(--steel); white-space:nowrap; }
.weight-table td:not(:first-child)::before{
  color:var(--steel-dim); text-transform:uppercase; font-size:.6rem; letter-spacing:.05em; margin-right:.3rem;
}
.weight-table td:nth-child(2)::before{ content:"Fall"; }
.weight-table td:nth-child(3)::before{ content:"Winter"; }
.weight-table td:nth-child(4)::before{ content:"Spring"; }
.weight-table td:nth-child(5)::before{ content:"Summer"; }
.weight-table td:nth-child(6)::before{ content:"Total"; }
.weight-table td:last-child{ color:var(--gold); font-weight:700; }

/* -- Golden Whiskers team card: built like an actual trading card —
   nameplate on top, a big crest "art" window below it (the logo, framed
   like the card's picture, not a small corner badge), then a stat zone
   (roster chips or the weigh-in stat table) with the team-total callout
   pinned to the bottom via margin-top:auto.
   (Used to grow/lift on hover as a "pop off the pack" flourish — removed,
   it read worse the more you interacted with it. The override below also
   cancels the site's normal .card.card:hover lift/shadow for these cards
   specifically, so they're fully static now, not just missing the grow.) */
.gw-team-card{
  display:flex; flex-direction:column; padding:0; overflow:hidden;
  position:relative;
}
.card.gw-team-card:hover{ transform:none; box-shadow:none; border-color:var(--line); }
.gw-team-head{
  padding:1rem 1.2rem .8rem;
  background:linear-gradient(135deg, rgba(212,175,55,.14), rgba(212,175,55,.02));
  border-bottom:1px solid var(--line);
}
.gw-team-head h3{ font-size:1.15rem !important; }
.gw-team-head .tag{ margin-bottom:.5rem; display:inline-block; }
.gw-team-picture{
  position:relative; height:150px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 42%, rgba(212,175,55,.18), rgba(0,0,0,0) 68%), var(--void);
  border-bottom:1px solid var(--line);
}
.gw-team-picture::before, .gw-team-picture::after{
  content:''; position:absolute; width:16px; height:16px; border:2px solid rgba(212,175,55,.35);
}
.gw-team-picture::before{ top:10px; left:10px; border-right:none; border-bottom:none; }
.gw-team-picture::after{ bottom:10px; right:10px; border-left:none; border-top:none; }
.gw-team-logo{
  width:130px; height:130px; object-fit:contain; flex-shrink:0; border-radius:50%;
  background:var(--void); border:2px solid rgba(212,175,55,.5); padding:8px;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));
  position:relative; z-index:1;
}
.gw-team-body{ padding:1.2rem; display:flex; flex-direction:column; gap:.9rem; flex:1; }
.gw-team-roster{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem;
  font-family:var(--f-mono); font-size:.78rem; color:var(--steel);
}
.gw-team-roster li{
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:999px;
  padding:.3rem .75rem;
}
.gw-team-total{
  margin-top:auto; padding:.9rem 1.2rem;
  background:linear-gradient(135deg, rgba(212,175,55,.14), rgba(212,175,55,.02));
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:.15rem; text-align:center;
}
.gw-team-total span{ font-family:var(--f-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--steel-dim); }
.gw-team-total b{ font-family:var(--f-display); font-size:2.1rem; color:var(--gold); line-height:1; }
.roster-socials{ display:flex; gap:.9rem; margin-top:1rem; }
.roster-socials a{ color:var(--steel); transition:color .2s, transform .2s; }
.roster-socials a:hover, .roster-socials a:focus-visible{ color:var(--gold); transform:translateY(-2px); }
.roster-socials svg{ width:18px; height:18px; }

/* -- Branded video player (self-hosted MP4/HEVC clips) --
   Native <video controls> with a custom Tow Rope logo play button laid
   over the poster frame; the button hides once playback starts and the
   browser's own controls take over. */
.brand-video{
  position:relative; aspect-ratio:16/9; border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(150deg,#1c1e22,#0d0e10);
}
.brand-video-el{ width:100%; height:100%; object-fit:cover; background:#000; display:block; }
/* Phone-shot portrait clips (9:16) — set once real dimensions are known
   (see initBrandVideos) so they aren't badly cropped by the 16:9 default. */
.brand-video.is-portrait{ aspect-ratio:9/16; max-height:420px; width:auto; margin-inline:auto; }
.brand-video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  background:var(--void); border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -8px var(--gold-glow);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.brand-video-play svg{ width:38%; height:38%; color:var(--gold); }
.brand-video-play:hover{ transform:translate(-50%,-50%) scale(1.08); }
.brand-video.is-playing .brand-video-play{ opacity:0; pointer-events:none; }
/* Corner brand watermark — a small badge is far more forgiving of a
   wide/off-center source logo than trying to center it inside the tiny
   circular play button ever was. Top-right, not bottom-right — the
   browser's native <video controls> bar always sits along the bottom
   edge, so a bottom-right badge would overlap it. */
.brand-video-watermark{
  position:absolute; right:.6rem; top:.6rem; z-index:2;
  width:15%; height:auto; min-width:34px; max-width:52px;
  opacity:.9; filter:drop-shadow(0 2px 8px rgba(0,0,0,.7));
  pointer-events:none;
}
.brand-video-fallback{ padding:1.5rem; font-size:.85rem; color:var(--steel); }
.brand-video-fallback a{ color:var(--gold); text-decoration:underline; text-underline-offset:.2em; }
.brand-video.has-error{ aspect-ratio:auto; }
.brand-video.has-error .brand-video-el, .brand-video.has-error .brand-video-play, .brand-video.has-error .brand-video-watermark{ display:none; }

/* -- Golden Whiskers hero/team logo -- */
.wc-hero-logo{ width:clamp(96px,14vw,150px); height:clamp(96px,14vw,150px); flex-shrink:0; object-fit:contain; }

/* -- Whisker Cartel logo hover-swap (funlogo-wc.png -> WC-Logo.png) --
   A single <img> whose src is swapped by JS (see initWcLogoSwap in
   interactions.js) after a delay on hover/focus — a real swap, not a
   crossfade blend of both images. The img itself keeps whatever sizing
   class/style it always had; this wrapper doesn't need its own size. */
.wc-logo-swap{ display:inline-block; cursor:pointer; }
.wc-logo-swap img{ transition:opacity .2s var(--ease); }
.gw-fb-link img{ transition:transform .25s var(--ease), border-color .25s var(--ease); }
.gw-fb-link:hover img, .gw-fb-link:focus-visible img{ transform:scale(1.02); border-color:var(--gold-dim); }

/* -- filter bar -- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.2rem; }
.filter-btn{
  padding:.5rem 1.1rem; border-radius:999px; border:1px solid var(--line);
  font-size:.8rem; font-weight:600; color:var(--steel); transition:all .2s;
}
.filter-btn:hover{ border-color:var(--gold); color:var(--bone); }
.filter-btn.active{ background:var(--gold); border-color:var(--gold); color:var(--void); }

.search-input{
  background:var(--charcoal-2); border:1px solid var(--line); border-radius:999px;
  padding:.7rem 1.3rem; color:var(--bone); width:100%; max-width:320px;
}
.search-input::placeholder{ color:var(--steel-dim); }

/* -- gallery -- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  grid-auto-rows:170px; grid-auto-flow:dense; gap:1rem;
}
.gallery-item{
  grid-column:span 1; grid-row:span 1;
  border-radius:var(--radius-md); overflow:hidden; position:relative; cursor:pointer;
  background:linear-gradient(150deg,#1c1f23,#0c0d0e); border:1px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gallery-item.is-wide{ grid-column:span 2; }
.gallery-item.is-tall{ grid-row:span 2; }
.gallery-item.is-big{ grid-column:span 2; grid-row:span 2; }
.gallery-item:hover, .gallery-item:focus-visible{
  transform:scale(1.16); z-index:3; box-shadow:var(--shadow-lift);
  border-color:var(--gold-dim);
}
.gallery-item::after{
  content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.8), transparent 50%);
  opacity:0; transition:opacity .25s; z-index:1;
}
.gallery-item:hover::after, .gallery-item:focus-visible::after{ opacity:1; }
.gallery-item span{
  position:absolute; left:.8rem; bottom:.7rem; right:.8rem; font-family:var(--f-mono); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.05em; opacity:0; transition:opacity .25s, transform .25s; z-index:2;
  transform:translateY(6px); color:var(--gold);
}
.gallery-item:hover span, .gallery-item:focus-visible span{ opacity:1; transform:translateY(0); }
.gallery-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 70% 60% at 50% 40%, rgba(212,175,55,.08), transparent 65%);
  padding:18%;
}
.gallery-icon img{ width:100%; height:100%; object-fit:contain; opacity:.55; transition:opacity .3s, transform .3s var(--ease); }
.gallery-item:hover .gallery-icon img, .gallery-item:focus-visible .gallery-icon img{ opacity:.9; transform:scale(1.05); }
.gallery-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s var(--ease); }
.gallery-item:hover .gallery-photo{ transform:scale(1.1); }
.lightbox-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; border-radius:var(--radius-lg); }

.lightbox{
  position:fixed; inset:0; background:rgba(5,5,5,.94); z-index:200;
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none;
  transition:opacity .3s; padding:2rem;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox-frame{ max-width:900px; width:100%; aspect-ratio:16/10; background:linear-gradient(150deg,#22252a,#0f1013); border-radius:var(--radius-lg); position:relative; border:1px solid var(--line); }
.lightbox-close{ position:absolute; top:-3rem; right:0; color:var(--bone); font-size:1rem; display:flex; gap:.5rem; align-items:center; }

/* -- timeline (about) -- */
.timeline{ position:relative; padding-left:2.2rem; display:grid; gap:2.6rem; }
.timeline::before{ content:''; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--gold), var(--line)); }
.timeline-item{ position:relative; }
.timeline-item::before{
  content:''; position:absolute; left:-2.2rem; top:.35rem; width:14px; height:14px; border-radius:50%;
  background:var(--void); border:2px solid var(--gold);
}
.timeline-date{ font-family:var(--f-mono); font-size:.75rem; color:var(--gold); text-transform:uppercase; letter-spacing:.08em; }

/* -- stat strip -- */
.stat-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1.5rem; text-align:center; }
.stat-strip b{ font-family:var(--f-display); font-size:2.4rem; color:var(--gold); display:block; }
.stat-strip span{ font-family:var(--f-mono); font-size:.72rem; color:var(--steel); text-transform:uppercase; letter-spacing:.08em; }

/* Opt-in class for a faded site-logo watermark behind a card's content —
   reused wherever a stat/summary card is personal enough to warrant it.
   Stat-strip's own children are direct <div>s, so those get lifted onto
   their own stacking context rather than wrapping them in anything new. */
.logo-watermark-card{ position:relative; overflow:hidden; }
.logo-watermark-card::after{
  content:'';
  position:absolute;
  top:50%; right:-5%;
  width:190px; height:127px;
  transform:translateY(-50%) rotate(-6deg);
  background:url('../img/AltLogo.png') no-repeat center / contain;
  opacity:.06;
  pointer-events:none;
}
.logo-watermark-card > div{ position:relative; z-index:1; }
@media (max-width:640px){
  .logo-watermark-card::after{ width:130px; height:87px; }
}


/* -- form -- */
.form-grid{ display:grid; gap:1.2rem; }
.field label{ display:block; font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--steel); margin-bottom:.5rem; }
.field input, .field select, .field textarea{
  width:100%; background:var(--charcoal-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.8rem 1rem; color:var(--bone); transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); outline:none; }
.field textarea{ resize:vertical; min-height:130px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }

/* -- map placeholder -- */
.map-frame{
  aspect-ratio:16/8; border-radius:var(--radius-lg); border:1px solid var(--line);
  background:
    linear-gradient(rgba(212,175,55,.05) 1px, transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg, rgba(212,175,55,.05) 1px, transparent 1px) 0 0/32px 32px,
    var(--charcoal);
  position:relative; display:flex; align-items:center; justify-content:center; color:var(--steel);
  overflow:hidden;
}
.map-pin{ position:absolute; width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 6px rgba(212,175,55,.15); }

/* -- real fishing-locations map (home) -- */
#fishing-map{
  aspect-ratio:16/8; border-radius:var(--radius-lg); border:1px solid var(--line);
  overflow:hidden; background:var(--charcoal); z-index:0;
}
.map-marker{
  width:26px; height:26px; border-radius:50%;
  background:var(--gold); border:2px solid var(--void); box-shadow:0 0 0 5px rgba(212,175,55,.2);
  display:flex; align-items:center; justify-content:center;
}
.map-marker img{ width:60%; height:60%; object-fit:contain; filter:brightness(0); }
.leaflet-popup-content-wrapper{
  background:var(--charcoal); color:var(--bone); border:1px solid var(--line); border-radius:var(--radius-md);
}
.leaflet-popup-tip{ background:var(--charcoal); border:1px solid var(--line); }
.leaflet-popup-content{ font-family:var(--f-body); margin:.85rem 1rem; }
.leaflet-popup-content b{ font-family:var(--f-display); text-transform:uppercase; color:var(--gold); font-size:.95rem; letter-spacing:.02em; }
.leaflet-popup-close-button{ color:var(--steel) !important; }
.leaflet-container{ font-family:var(--f-body); background:var(--charcoal) !important; }
.leaflet-control-attribution{ background:rgba(10,10,10,.7) !important; color:var(--steel-dim) !important; }
.leaflet-control-attribution a{ color:var(--steel) !important; }
.leaflet-control-zoom a{ background:var(--charcoal) !important; color:var(--bone) !important; border-color:var(--line) !important; }
.leaflet-control-zoom a:hover{ background:var(--gold) !important; color:var(--void) !important; }

/* -- accordion (resources) -- */
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:1.2rem 0; font-family:var(--f-body); font-weight:700; font-size:1rem; text-align:left;
}
.accordion-trigger svg{ width:16px; height:16px; flex-shrink:0; transition:transform .3s var(--ease); color:var(--gold); }
.accordion-item.is-open .accordion-trigger svg{ transform:rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.accordion-item.is-open .accordion-panel{ max-height:2200px; } /* generous ceiling — some panels (league rules) run long; a bigger max-height doesn't change how short ones render */
.accordion-panel-inner{ padding-bottom:1.3rem; font-size:.92rem; color:var(--steel); }

/* -- calculator -- */
.calc-card{ padding:2rem; display:grid; gap:1.2rem; max-width:480px; }
.calc-result{
  font-family:var(--f-mono); background:var(--void); border:1px dashed var(--gold);
  border-radius:var(--radius-md); padding:1.2rem; text-align:center;
}
.calc-result b{ font-size:2rem; color:var(--gold); display:block; }

/* -- partner logo grid -- */
.logo-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1.2rem; }
.logo-tile{
  aspect-ratio:2/1; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); text-transform:uppercase; color:var(--steel-dim); font-size:.95rem;
  filter:grayscale(1); opacity:.6; transition:all .25s;
}
.logo-tile:hover{ filter:none; opacity:1; color:var(--gold); }
.logo-tile img{ width:100%; height:100%; object-fit:contain; }
.logo-tile-open{ padding:1.2rem; border:1px dashed var(--line); background:transparent; }
.logo-tile-open img{ width:100%; height:100%; object-fit:contain; opacity:.5; transition:opacity .25s; }
.logo-tile-open:hover img{ opacity:.85; }

/* -- breadcrumbs -- */
.breadcrumbs{ font-family:var(--f-mono); font-size:.72rem; color:var(--steel-dim); text-transform:uppercase; letter-spacing:.06em; display:flex; gap:.5rem; margin-bottom:1.5rem; }
.breadcrumbs a{ color:var(--steel); }
.breadcrumbs a:hover{ color:var(--gold); }

/* -- page header band (interior pages) -- */
.page-band{
  position:relative; overflow:hidden;
  padding-block: clamp(6rem,12vw,8rem) 2.5rem;
  /* No hero photo in this branch (was Tow Rope's own branded promo shot) —
     pure gradient background until this gets its own art. */
  background:
    radial-gradient(ellipse 70% 60% at 80% 0%, rgba(212,175,55,.12), transparent 60%),
    linear-gradient(180deg, rgba(6,6,7,.35) 0%, rgba(10,10,10,.55) 100%);
  border-bottom:1px solid var(--line);
}
.page-band .wrap{
  position:relative; z-index:1;
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem,4vw,2.5rem);
}

/* -- future feature placeholder chip -- */
.soon-chip{
  display:inline-flex; align-items:center; gap:.4em; font-family:var(--f-mono); font-size:.65rem;
  text-transform:uppercase; letter-spacing:.08em; background:var(--void); border:1px solid var(--line);
  color:var(--steel-dim); padding:.25rem .6rem; border-radius:999px;
}
.soon-chip::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); }

/* -- kayak hotspots -- */
.kayak-diagram{
  position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); border:1px solid var(--line);
  background:linear-gradient(150deg,#1b1e22,#0c0d0e); overflow:hidden;
}
.hotspot{
  position:absolute; width:26px; height:26px; border-radius:50%; background:rgba(212,175,55,.2);
  border:2px solid var(--gold); display:flex; align-items:center; justify-content:center;
  transform:translate(-50%,-50%); cursor:pointer; font-family:var(--f-mono); font-size:.7rem; font-weight:700;
  color:var(--gold); transition:transform .2s;
}
.hotspot::before{ content:''; position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(212,175,55,.4); animation:pulse-ring 2.4s ease-out infinite; }
.hotspot:hover{ transform:translate(-50%,-50%) scale(1.15); }
@keyframes pulse-ring{ 0%{ transform:scale(.8); opacity:1; } 100%{ transform:scale(1.6); opacity:0; } }
.hotspot-panel{
  margin-top:1.5rem; padding:1.4rem; display:none;
}
.hotspot-panel.is-active{ display:block; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ border-top:1px solid var(--line); background:var(--charcoal); padding-block:3.5rem 2rem; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; }
@media (max-width:820px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }
.footer-col h4{ font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--steel); margin-bottom:1.1rem; }
.footer-col ul{ display:grid; gap:.65rem; }
.footer-col a{ color:var(--steel); font-size:.9rem; transition:color .2s; }
.footer-col a:hover{ color:var(--gold); }
.footer-col .btn{ font-size:.85rem; }
.footer-col .btn-primary{ color:var(--void); }
.footer-col .btn-primary:hover{ color:var(--void); }

/* -- footer CTA column: faded katfish watermark behind the text -- */
.footer-col-cta{ position:relative; }
.footer-col-cta::before{
  content:''; position:absolute; top:-1rem; right:-1.5rem; width:9rem; height:6.75rem;
  background:url('../img/egg/katfish.png') center/contain no-repeat;
  opacity:.09; pointer-events:none; z-index:0;
}
.footer-col-cta > *{ position:relative; z-index:1; }
.footer-bottom{
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  font-family:var(--f-mono); font-size:.72rem; color:var(--steel-dim); text-transform:uppercase; letter-spacing:.05em;
}
.footer-bottom a{ color:var(--steel-dim); }
.footer-bottom a:hover{ color:var(--gold); }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* Sticky mobile CTA */
.sticky-cta{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:90;
  display:none; justify-content:center;
}
.sticky-cta .btn{ width:100%; justify-content:center; box-shadow:0 12px 30px -8px rgba(0,0,0,.6); }
@media (max-width:640px){ .sticky-cta.is-active{ display:flex; } }

/* Skeleton loader */
.skeleton{ position:relative; overflow:hidden; background:var(--charcoal-2); }
.skeleton::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation:shimmer 1.6s infinite;
}
@keyframes shimmer{ 100%{ transform:translateX(100%); } }

/* Responsive grid utilities */
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }