/* CLUB ESOX / FIELD NOTES 002 — WILD PREDATOR IDENTITY
   Bold condensed type, utilitarian sports UI, field-grade colour, raw footage.
   Overlays the layout base without changing deploy method. */
:root{
  --bg:#071411;--bg-2:#0d211b;--bg-3:#183528;
  --ink:#f2f5e9;--muted:#a0b6a7;
  --gold:#d9f047;--gold-hot:#f1ff89;
  --line:rgba(222,240,217,.2);
  --display:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --sans:'Barlow',Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --radius:0px;
}
body{font:400 16px/1.55 var(--sans);background:#071411;letter-spacing:.004em}
em{font-family:inherit;font-style:normal!important;color:var(--gold)}
h1,h2,h3{font-family:var(--display);font-weight:900;text-transform:uppercase}
.section-shell{max-width:1340px}
.section-pad{padding:clamp(100px,10vw,150px) 0}
.section-index,.section-small,.kicker,.image-note{font:800 12px/1.4 var(--sans);letter-spacing:.19em}
.section-index{display:inline-block;padding-left:15px;border-left:3px solid var(--gold)}
.btn,.nav-cta,.hero-discover{border-radius:0!important;clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px));background:var(--gold);color:#07140b;font:800 13px/1.1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.btn--outline{background:transparent;color:var(--ink);clip-path:none;border:1px solid rgba(228,243,220,.5)}
.btn--gold:hover,.nav-cta:hover,.hero-discover:hover{background:var(--gold-hot)}
.text-link{font-weight:800;letter-spacing:.09em;border-color:var(--gold)}
/* Club marque: no decorative serif, the wordmark is bold industrial lettering */
.site-header{height:98px;padding-inline:clamp(23px,4.7vw,84px);border-bottom:1px solid rgba(240,255,230,.16)}
.site-header.scrolled{background:rgba(4,17,13,.94)}
.brand{align-items:flex-start;flex-basis:195px;gap:0;color:var(--ink)}
.brand__fish{width:86px;height:24px;margin-left:3px;color:var(--gold)}
.brand__name{font:900 31px/.85 var(--display);letter-spacing:.012em;text-transform:uppercase}
.brand__name em{color:var(--gold)}
.brand__sub{margin-top:6px;font-size:7px;font-weight:800;letter-spacing:.1em;color:#b5c9ba}
.desktop-nav{padding-left:0;gap:clamp(16px,2vw,32px)}
.desktop-nav a{font-weight:800;font-size:11px;letter-spacing:.065em;text-transform:uppercase}
.nav-cta{min-height:47px;padding:15px 19px;font-size:10px}
.preloader__brand{font:900 clamp(64px,9vw,145px)/.9 var(--display)}
.preloader small{font-weight:700;letter-spacing:.24em}
.preloader__line{height:3px}
.preloader__line i{height:3px}
/* The fish film actually swims, independent of scroll. Scroll moves the 'camera' and captions. */
.story-sticky{background:#06120f}
.story-sticky:before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0,transparent 95px,rgba(222,243,211,.04) 96px),repeating-linear-gradient(90deg,transparent 0,transparent 95px,rgba(222,243,211,.035) 96px);mask-image:linear-gradient(90deg,#000,transparent 68%)}
.story-track{height:510svh;height:510vh}
.scene--water{opacity:.54}
.scene--water::after{z-index:4;background:linear-gradient(90deg,rgba(2,16,11,.86) 0%,rgba(2,16,11,.56) 38%,rgba(2,16,11,.1) 78%),linear-gradient(0deg,rgba(3,15,12,.7),transparent 42%,rgba(3,15,12,.32))}
.scene--lake::after{background:linear-gradient(90deg,rgba(3,16,13,.58),rgba(3,16,13,.35) 60%,rgba(3,16,13,.22))}
.scene__photo--water{background-image:url('../img/brochet-midjourney-poster.webp');background-position:50% center}
.wild-video{position:absolute;z-index:1;inset:-5%;width:110%;height:110%;display:block;object-fit:cover;object-position:50% 50%;opacity:.96;filter:brightness(.79) saturate(.91) contrast(1.14);transform:scale(1.06) scaleX(-1);will-change:transform,opacity;pointer-events:none}
.wild-video.is-unavailable{opacity:0!important}
.wild-video-grade{z-index:2;position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(10,27,17,.47),transparent 66%),radial-gradient(ellipse at 85% 13%,rgba(195,241,101,.13),transparent 48%);mix-blend-mode:multiply}
.underwater-rays{z-index:3}
.scene-vignette{background:radial-gradient(ellipse at 62% 40%,transparent 30%,rgba(1,7,5,.75) 100%)}
.film-grain{opacity:.11}
.hero-coordinate,.hero-vertical{position:absolute;z-index:12;pointer-events:none;font:800 10px var(--sans);letter-spacing:.18em;color:#c9d4c2}
.hero-coordinate{bottom:46px;left:clamp(23px,7vw,110px)}
.hero-coordinate i{display:inline-block;width:30px;height:1px;background:var(--gold);vertical-align:middle;margin:0 12px}
.hero-vertical{top:43%;right:26px;writing-mode:vertical-rl;transform:rotate(180deg);opacity:.55}
.story-beat{left:clamp(23px,7vw,110px);width:min(1080px,81vw);top:51%}
.story-beat h1,.story-beat h2,.story-beat--impact h2{font:900 clamp(100px,11.2vw,208px)/.77 var(--display);letter-spacing:-.012em;text-transform:uppercase;text-shadow:0 14px 45px rgba(0,0,0,.42)}
.story-beat h1{max-width:none}
.story-beat h1 em,.story-beat h2 em{display:inline-block;font-weight:900;font-style:normal;letter-spacing:-.012em}
.story-beat h2{font-size:clamp(100px,12.5vw,217px)}
.story-beat p{max-width:470px;font:500 16px/1.55 var(--sans);letter-spacing:.02em;margin-top:27px;color:#f0f2e8}
.story-beat--impact{width:92vw;left:50%}
.story-beat--impact h2{font-size:clamp(95px,14.5vw,240px)}
.kicker{background:var(--gold);color:#07150f;padding:10px 13px;margin-bottom:27px;font-size:10px;display:inline-flex;width:max-content;max-width:100%}
.kicker i{background:#0b1b12;width:16px;height:2px}
.hero-discover{margin-top:34px;min-height:53px;display:inline-flex;align-items:center;gap:34px;padding:15px 20px;pointer-events:auto;transition:background .3s}
.hero-discover span{font-size:23px;font-weight:400}
.story-beat:not(.is-active) .hero-discover{pointer-events:none}
.story-progress{height:4px}
.story-progress__fill{box-shadow:0 0 15px rgba(217,240,71,.6)}
.story-counter strong{font:900 36px/.95 var(--display);letter-spacing:.02em}
.story-counter small{font-weight:800}
.scroll-invite__symbol{border-radius:0;border-color:var(--gold)}
.scroll-invite{bottom:87px;font-weight:800;letter-spacing:.11em}
.story-skip{font-weight:800;color:var(--gold);top:112px}
/* editorial sports layouts */
.intro{background:#0b1a15}
.intro-copy h2,.section-head h2,.territory-content h2,.benefits-head h2,.booking h2{font:900 clamp(78px,9vw,154px)/.79 var(--display);letter-spacing:-.005em;text-transform:uppercase}
.intro-copy h2{max-width:930px}
.intro-right p,.intro-right p:first-child{font-family:var(--sans)}
.intro-photo{clip-path:polygon(0 0,100% 0,100% 94%,95% 100%,0 100%)}
.intro-photo__seal{border-radius:0;background:var(--gold);color:#0a1810;transform:rotate(-6deg)}
.stats{background:var(--gold);color:#0b1812}
.stats-grid strong{font:900 clamp(79px,8.3vw,144px)/.8 var(--display);letter-spacing:-.01em}
.stats-grid span{font:800 11px/1.4 var(--sans)}
.journeys{background:#061310}
.section-head h2{font-size:clamp(75px,8.1vw,146px)}
.journey-card{min-height:660px;clip-path:polygon(0 0,100% 0,100% 96%,96% 100%,0 100%)}
.journey-card__number{font:800 11px/1 var(--sans);letter-spacing:.13em}
.journey-card__content h3{font:900 clamp(74px,7.2vw,126px)/.78 var(--display);letter-spacing:-.005em;text-transform:uppercase}
.journey-card--pike .journey-card__bg{background-position:60% 48%}
.pill{border-radius:0;background:var(--gold);border-color:var(--gold);color:#081810;font-weight:800}
.round-link{border-radius:0;color:#06150e;background:var(--gold);border-color:var(--gold);font-weight:800}
.round-link:hover{transform:translate(6px,-6px) rotate(0)}
.territory{background:#0d211a}
.territory-visual{clip-path:polygon(0 0,100% 0,100% 94%,94% 100%,0 100%)}
.territory-visual__stamp{font:900 74px/.85 var(--display);letter-spacing:0}
.territory-visual__stamp em{font:900 78px/.83 var(--display)}
.territory-content .lead{font:700 26px/1.28 var(--sans)}
.territory-tags span{font-weight:800}
.benefits{background:#071410}
.benefit-row>span:first-child{font:800 26px var(--display)}
.benefit-row h3{font:800 clamp(35px,4.1vw,65px)/.95 var(--display);text-transform:uppercase}
.benefit-row:hover{background:#142c21}
.quote-content blockquote{font:900 clamp(67px,8.8vw,160px)/.8 var(--display);letter-spacing:0;text-transform:uppercase}
.booking{background:#173827}
.booking h2{font-size:clamp(86px,11vw,190px)}
.footer{background:#06120e}
.footer-brand>span{font:900 81px/.8 var(--display)}
.footer-bottom{letter-spacing:.06em}
.footer-credits{padding:16px clamp(21px,5vw,85px) 22px;border-top:1px solid rgba(240,255,230,.09);text-align:center;font:500 10px/1.7 var(--sans);letter-spacing:.04em;color:#85998b}
.footer-credits a{text-decoration:underline;text-underline-offset:3px}
/* keep sticky captions clearly above the film even on small screens */
@media(max-width:1100px){.brand{flex-basis:165px}.desktop-nav{gap:15px}.desktop-nav a{font-size:10px}.nav-cta{font-size:10px;padding-inline:16px}.story-beat h1{font-size:clamp(85px,12vw,150px)}.story-beat h2{font-size:clamp(90px,13vw,169px)}}
@media(max-width:980px){.site-header{height:80px}.brand{flex-basis:auto}.brand__fish{width:66px;height:18px}.brand__name{font-size:27px}.brand__sub{font-size:6px}.menu-toggle{border-radius:0}.mobile-menu{background:#071511}.mobile-menu>a{font:800 clamp(46px,8vw,80px)/.85 var(--display);text-transform:uppercase}.mobile-menu>a.mobile-menu__reserve{border-radius:0;clip-path:polygon(0 0,96% 0,100% 20%,100% 100%,4% 100%,0 80%)}.story-beat{left:5vw;width:90vw}.story-beat h1{font-size:clamp(87px,13.5vw,150px)}.story-beat h2{font-size:clamp(88px,14vw,155px)}.story-beat--impact{left:50%;width:92vw}.story-beat--impact h2{font-size:clamp(91px,13vw,175px)}.intro-copy h2,.section-head h2,.territory-content h2,.benefits-head h2,.booking h2{font-size:clamp(80px,11vw,135px)}.benefit-row h3{font-size:clamp(37px,5vw,64px)}}
@media(max-width:620px){
  .story-track{height:470svh;height:470vh}.story-sticky{min-height:0}
  .site-header{padding-inline:17px}.site-header.scrolled{height:70px}.brand__fish{width:62px}.brand__name{font-size:25px}.brand__sub{max-width:120px}
  .story-beat{left:21px;width:calc(100% - 42px);top:50%}.story-beat h1,.story-beat h2{font-size:clamp(70px,17.5vw,122px);line-height:.77;max-width:none;letter-spacing:0}.story-beat h2{font-size:clamp(64px,16vw,108px)}
  .story-beat--impact{left:50%;width:94vw}.story-beat--impact h2{font-size:clamp(68px,18.5vw,110px)}
  .story-beat p{font-size:13px;line-height:1.5;max-width:330px;margin-top:19px}
  .kicker{font-size:8px;letter-spacing:.08em;margin-bottom:19px;padding:8px}
  .hero-discover{font-size:10px;margin-top:22px;gap:15px;min-height:45px;padding:12px 14px}
  .wild-video{inset:-1%;width:102%;height:102%;object-position:100% 49%;filter:brightness(.77) contrast(1.25) saturate(.89)}
  .scene--water::after{background:linear-gradient(90deg,rgba(2,16,11,.82),rgba(2,16,11,.33)),linear-gradient(0deg,rgba(3,15,12,.75),transparent 45%)}
  .scene__photo--water{background-position:75% center}
  .story-edge,.hero-vertical{display:none}.hero-coordinate{font-size:8px;left:21px;bottom:105px;max-width:75%;line-height:1.7}
  .story-skip{right:21px;top:92px;font-size:8px}
  .scroll-invite{bottom:32px;left:21px}.story-counter{right:21px;bottom:35px}
  .intro-copy h2,.section-head h2,.territory-content h2,.benefits-head h2,.booking h2{font-size:clamp(69px,16vw,103px);line-height:.8}
  .intro-top{align-items:flex-start}.intro-top .section-index{max-width:150px}
  .stats-grid strong{font-size:75px}.stats-grid span{font-size:9px}
  .journey-card{min-height:540px}.journey-card__content h3{font-size:clamp(69px,16vw,106px)}
  .territory-visual__stamp{font-size:54px}.territory-visual__stamp em{font-size:56px}
  .benefit-row h3{font-size:clamp(31px,8.4vw,50px)}
  .quote-content blockquote{font-size:clamp(61px,13.5vw,95px)}
  .booking h2{font-size:clamp(79px,18vw,130px)}
  .footer-brand>span{font-size:65px}
  .footer-credits{text-align:left;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  html:not(.motion-opt-in) .story-track{height:100svh;height:100dvh}
  html:not(.motion-opt-in) .scene--lake{opacity:0!important}
  html:not(.motion-opt-in) .scene--water{opacity:1!important}
  html:not(.motion-opt-in) .wild-video{display:none}
  html:not(.motion-opt-in) .story-beat h1{font-size:clamp(70px,13vw,165px)}
}

/* MIDJOURNEY FISH FILM — V3
   Real motion is native video; scroll controls the camera and six chapters.
   Poster remains readable if video fails or motion is reduced. */
.wild-video{background:#06140e;backface-visibility:hidden}
.scene__photo--water{background-image:url('../img/brochet-midjourney-poster.webp')}
@media(max-width:620px){
  .story-sticky .wild-video{object-position:right center}
  .story-beat h1,.story-beat h2{overflow-wrap:normal}
  .story-beat p{background:linear-gradient(90deg,rgba(3,17,12,.5),transparent);width:fit-content}
}