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

  body{
    background:
      radial-gradient(ellipse 900px 500px at 78% 55%, rgba(217,43,28,0.16), transparent 60%),
      radial-gradient(ellipse 700px 700px at 10% 0%, rgba(217,43,28,0.06), transparent 55%),
      var(--bg-0);
    color:var(--white);
    font-family:'Inter',sans-serif;
    min-height:100vh;
  }

  .wrap{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:0 48px;
    box-sizing:border-box;
  }
  @media (max-width:600px){
    .wrap{ padding:0 20px; }
  }

  /* header/nav-row/nav/.home-btn/nav ul/nav a intentionally not duplicated here —
     they're defined once in global.css so every page renders an identical header.
     (This file used to have its own copies with different values, which was
     exactly why headers looked inconsistent page to page.) */

  /* ---------- SECTION DIVIDER ---------- */
  .section-divider{
    height:4px;
    width:100%;
    position:relative;
    background:var(--red-dim);
    overflow:hidden;
  }
  .section-divider::before{
    content:'';
    position:absolute;
    top:0; bottom:0;
    left:0;
    width:35%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.9) 50%, transparent);
    filter:blur(1px);
    animation:dividerSweep 2.4s ease-in-out infinite;
  }
  @keyframes dividerSweep{
    0%{ transform:translateX(-120%); }
    100%{ transform:translateX(385%); }
  }

  /* ---------- BUTTONS (shared) ---------- */
  .btn{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:14px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    padding:18px 34px;
    border-radius:2px;
    text-decoration:none;
    display:inline-block;
    transition:transform .15s ease, box-shadow .15s ease;
    border:none;
    cursor:pointer;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn-solid{
    background:var(--red);
    color:var(--white);
    box-shadow:0 8px 24px rgba(217,43,28,0.35);
  }
  .btn-solid:hover{ box-shadow:0 10px 30px rgba(217,43,28,0.5); }

  /* ---------- INTRO ---------- */
  .intro{
    padding:64px 0 40px;
    max-width:720px;
  }
  .eyebrow{
    font-family:'Oswald',sans-serif;
    font-size:13px;
    font-weight:500;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--red);
    margin-bottom:18px;
  }
  h1{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:clamp(32px, 4.4vw, 50px);
    line-height:1.05;
    letter-spacing:-0.5px;
    text-transform:uppercase;
    color:var(--white);
    margin-bottom:20px;
  }
  .intro p{
    font-family:'Inter',sans-serif;
    font-size:15.5px;
    line-height:1.75;
    color:#cfccc6;
  }
  .intro h2{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:clamp(26px, 3.4vw, 38px);
    line-height:1.1;
    letter-spacing:-0.4px;
    text-transform:uppercase;
    color:var(--white);
    margin-bottom:16px;
  }
  /* tighter than the page-level .intro above — this one sits right under the
     sub-nav tabs, which already carry their own bottom spacing */
  .events-panel .intro{
    padding:28px 0 32px;
  }

  /* ---------- EVENTS SUB-NAV (tab switcher between event categories) ---------- */
  .events-subnav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding-bottom:32px;
    margin-bottom:8px;
    border-bottom:1px solid var(--line);
  }
  .events-tab{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:12.5px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--gray);
    background:none;
    border:1px solid var(--line);
    border-radius:2px;
    padding:12px 22px;
    cursor:pointer;
    transition:all .2s ease;
  }
  .events-tab:hover{
    color:var(--white);
    border-color:var(--red);
  }
  .events-tab.active{
    color:var(--white);
    background:var(--red);
    border-color:var(--red);
  }

  /* ---------- EVENTS PANEL (coming-soon placeholder for empty categories) ---------- */
  .events-placeholder{
    padding:64px 24px;
    margin-bottom:64px;
    border:1.5px dashed rgba(217,43,28,0.35);
    border-radius:6px;
    text-align:center;
  }
  .events-placeholder .ph-label{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:16px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--white);
    margin-bottom:10px;
  }
  .events-placeholder p{
    font-family:'Inter',sans-serif;
    font-size:14px;
    color:var(--gray);
  }

  /* ---------- LOCAL FESTIVALS TAB BACKGROUND ----------
     A rainbow-trout-inspired gradient — not a literal fish, just its actual color
     journey — sampled top-to-bottom straight off the trout illustration in the
     current festival's poster (a frame pulled from the Craig Caddis Festival
     reel): olive back → gold → the coral-red lateral stripe → silvery belly.
     Swap in a different festival later by updating these values (hex + -rgb
     companion per stop, same pattern as --gold/--paper on Tournaments) —
     scoped to this panel since they're this one event's colors, not shared
     site-wide like --gold/--paper/--ink are. */
  #panel-local-festivals{
    --trout-olive-rgb:96,110,63;
    --trout-gold-rgb:183,116,72;
    --trout-coral-rgb:197,83,57;
    --trout-silver-rgb:145,162,165;

    background:linear-gradient(180deg,
      rgba(var(--trout-olive-rgb), 0.4) 0%,
      rgba(var(--trout-gold-rgb), 0.32) 28%,
      rgba(var(--trout-coral-rgb), 0.3) 52%,
      rgba(var(--trout-silver-rgb), 0.22) 75%,
      transparent 95%);
    border:1px solid rgba(var(--trout-coral-rgb), 0.35);
    border-radius:14px;
    padding:32px 24px 48px;
  }

  /* ---------- EVENT CARD (a real, populated event within a category) ---------- */
  .event-card{
    display:flex;
    gap:28px;
    align-items:center;
    flex-wrap:wrap;
    padding:32px;
    margin-bottom:32px;
    border:1px solid var(--line);
    border-radius:8px;
    background:rgba(255,255,255,0.02);
  }
  .event-card-image{
    flex:0 0 200px; /* portrait box — this reel is vertical, unlike the 4:3
                        landscape box originally built for a static photo */
    width:200px;
    aspect-ratio:9/16;
    border-radius:6px;
    overflow:hidden;
    background:rgba(255,255,255,0.03);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .event-card-image img,
  .event-card-image video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .event-card-image-placeholder{
    font-family:'Oswald',sans-serif;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--gray);
    text-align:center;
    padding:12px;
  }
  .event-card-body{
    flex:1;
    min-width:220px;
  }
  .event-card-title{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:22px;
    text-transform:uppercase;
    letter-spacing:-0.2px;
    color:var(--white);
    margin-bottom:10px;
  }
  .event-card-desc{
    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.6;
    color:var(--gray);
    margin-bottom:16px;
  }
  .event-card-link{
    display:inline-block;
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:12.5px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--white);
    text-decoration:none;
    border-bottom:1px solid var(--red);
    padding-bottom:2px;
    transition:color .2s ease;
  }
  .event-card-link:hover{ color:var(--red); }

  /* Tournaments tab background — built entirely from --gold/--paper (the same
     variables the flyer itself is styled with, defined once in global.css).
     Swap in a different flyer down the road and re-tint it by changing those
     vars (+ their -rgb companions) there; this backdrop follows automatically
     without touching a single rule here.
     One single top-to-bottom fade (not separate radial shapes — those read as
     disconnected blobs/columns rather than one cohesive background). */
  #panel-tournaments{
    background:linear-gradient(180deg,
      rgba(var(--gold-rgb), 0.4) 0%,
      rgba(var(--paper-rgb), 0.16) 45%,
      transparent 85%);
    border:1px solid rgba(var(--gold-rgb), 0.35);
    border-radius:14px;
    padding:32px 24px 48px;
  }

  /* ---------- FLYER EMBED ---------- */
  .mkwo-flyer-section{
    padding:8px 0 64px;
    display:flex;
    justify-content:center;
  }
  /* ---------- MONTANA KAYAK WALLEYE OPEN FLYER (scoped) ---------- */
  .mkwo-flyer{
    width:100%;
    max-width:816px;
    display:flex;
    justify-content:center;
    position:relative;
  }
  /* an offset gold backing panel behind the flyer — picks up the flyer's own
     accent color so it reads as "part of" it, but shifted so it stands out
     against the page instead of blending flush into the dark background.
     Sized via inset:0 to .mkwo-flyer's own box, so it only lines up with the
     flyer correctly once .flyer-scale below reports the same (scaled-down)
     height that .mkwo-flyer inherits from it. */
  .mkwo-flyer::before{
    content:'';
    position:absolute;
    inset:0;
    transform:translate(18px, 18px);
    background:var(--gold);
    opacity:0.16;
    border:1px solid rgba(var(--gold-rgb), 0.4);
    z-index:0;
  }

  /* The flyer itself is a fixed 816px print-style design — every size inside
     it (fonts, padding, the plate/rivets) is a pixel value tuned for that
     canvas, not a fluid layout. Below 816px viewports, js/flyer-scale.js
     applies transform:scale() to .flyer to shrink the whole design as one
     unit and sets this wrapper's height to match the scaled result, so nested
     content shrinks in proportion instead of reflowing/overflowing, and the
     gold backing panel above (sized to this element) lines up with the
     flyer's actual visible edges instead of cutting across it. */
  .flyer-scale{
    width:100%;
    max-width:816px;
    overflow:hidden;
    position:relative;
    z-index:1;
  }

.flyer{
    width:816px;
    background:var(--paper);
    color:var(--ink);
    position:relative;
    transform-origin:top left;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
  }

  .hero{
    position:relative;
    width:100%;
    aspect-ratio:1199/1312;
    overflow:hidden;
    background:var(--paper);
  }
  .hero img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 50%;
    display:block;
  }

  .hero-top{
    position:absolute;
    top:34px; left:40px; right:40px;
    z-index:3;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
  }
  .mkwo-flyer .eyebrow{
    font-family:'Space Mono',monospace;
    font-size:12px;
    letter-spacing:.24em;
    color:var(--gold);
    font-weight:700;
  }
  .presented-tag{
    font-family:'Space Mono',monospace;
    font-size:10.5px;
    letter-spacing:.1em;
    color:var(--ink);
    opacity:.8;
    text-align:right;
  }
  .presented-tag b{color:var(--gold); opacity:1;}

  .hero-title{
    padding:26px 40px 6px;
    background:var(--paper);
  }
  .mkwo-flyer h1{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    font-size:60px;
    line-height:.96;
    color:var(--ink);
    letter-spacing:.005em;
  }
  .mkwo-flyer h1 .accent{color:var(--gold);}
  .tagline{
    margin-top:12px;
    font-family:'Oswald',sans-serif;
    font-weight:500;
    font-size:17px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--gold);
  }

  .panel{
    padding:30px 40px 40px;
    background:var(--paper);
  }

  .plate-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:26px;
  }
  .plate{
    position:relative;
    background:#fefefe;
    border:2px solid var(--ink);
    width:100%;
    padding:22px 30px;
  }
  .plate:before{
    content:"OFFICIAL EVENT SPECIFICATION";
    position:absolute;
    top:-11px;
    left:24px;
    background:var(--paper);
    padding:0 10px;
    font-family:'Space Mono',monospace;
    font-size:11px;
    letter-spacing:.18em;
    color:var(--ink);
  }
  .rivet{
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 1px 2px rgba(0,0,0,.4);
  }
  .r-tl{top:10px;left:10px;} .r-tr{top:10px;right:10px;}
  .r-bl{bottom:10px;left:10px;} .r-br{bottom:10px;right:10px;}

  .plate-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 32px;
    font-family:'Space Mono',monospace;
  }
  .plate-field{border-top:1px solid rgba(14,13,11,.15); padding-top:8px;}
  .plate-field .label{
    font-size:10.5px;
    letter-spacing:.14em;
    color:var(--ink);
    opacity:.6;
  }
  .plate-field .value{
    font-size:16px;
    font-weight:700;
    margin-top:3px;
    color:var(--ink);
  }

  .facts{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin:0 0 26px;
    border-top:2px solid var(--ink);
    border-bottom:2px solid var(--ink);
  }
  .fact{
    padding:14px 10px;
    text-align:center;
    border-right:1px solid rgba(14,13,11,.2);
  }
  .fact:last-child{border-right:none;}
  .fact .k{
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:.1em;
    color:var(--gold);
    font-weight:600;
  }
  .fact .v{
    font-family:'Barlow',sans-serif;
    font-weight:600;
    font-size:15px;
    margin-top:4px;
    color:var(--ink);
  }

  .cta{
    background:var(--ink);
    color:var(--paper);
    padding:24px 32px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
  }
  .cta .msg{
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    font-weight:600;
    font-size:22px;
    letter-spacing:.02em;
  }
  .cta .msg span{color:var(--gold);}
  .cta .details{
    font-family:'Barlow',sans-serif;
    font-size:13px;
    line-height:1.5;
    text-align:right;
  }

  .footer-note{
    text-align:center;
    font-family:'Space Mono',monospace;
    font-size:10px;
    letter-spacing:.08em;
    color:var(--ink);
    opacity:.5;
    margin-top:18px;
  }

  
  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--line);
    padding:60px 0 22px;
    position:relative;
    width:100%;
    box-sizing:border-box;
  }
  footer .foot-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
  }
  @media (max-width:600px){
    footer{ padding:36px 0 18px; }
    footer .foot-row{ flex-direction:column; align-items:center; text-align:center; gap:14px; }
  }
  footer p{
    font-family:'Inter',sans-serif;
    font-size:12px;
    color:var(--gray);
    letter-spacing:0.3px;
  }
  .footer-explore-row{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px 20px;
    padding:16px 0 20px;
    border-bottom:1px solid var(--line);
  }
  .footer-explore-row a{
    font-family:'Inter',sans-serif;
    font-size:13.5px;
    color:var(--gray);
    text-decoration:none;
    transition:color .2s ease;
    white-space:nowrap;
  }
  .footer-explore-row a:hover{ color:var(--white); }
  @media (max-width:480px){
    .footer-explore-row{ gap:8px 14px; }
    .footer-explore-row a{ font-size:11px; }
  }
  /* footer-grid/footer-head/footer-col/.social-row/.social-btn intentionally not
     duplicated here — footer-grid's Contact column was removed site-wide, and
     .social-row/.social-btn are defined once in global.css (this file used to
     have its own copy at the old 36px size, silently overriding the current
     54px buttons on this page only). */