/* ==========================================================
   North Star Anglers — site styles
   Brand colors live here. Change a value once, it updates everywhere.
   ========================================================== */
:root {
  --cream:     #F3EEDC;  /* Birch Cream  — headlines on dark, light sections */
  --sand:      #E4DCC6;  /* Sand         — body text on dark */
  --sunset:    #CD6E3B;  /* Sunset Orange — buttons, links, one highlight */
  --sunset-hi: #E0844F;  /* lighter orange for text on dark backgrounds */
  --lake:      #15302C;  /* Lake Green   — main background */
  --shore:     #213B36;  /* Shoreline    — alternate section */
  --pine:      #0D1F1C;  /* Deep Pine    — header, footer */
  --sage:      #9FB3A6;  /* Sage         — small labels, captions */
  --line:      #2E4A44;
  --ink:       #1E2E29;  /* text on cream */
  --ink-soft:  #3E5049;

  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --max: 1120px;
  --gutter: clamp(18px, 5vw, 48px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  background: var(--lake);
  color: var(--sand);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sunset-hi); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--sunset-hi); outline-offset: 3px;
}
h1, h2, h3, h4 {
  font-family: var(--display); color: var(--cream); margin: 0;
  line-height: 1.02; text-transform: uppercase; letter-spacing: .015em; text-wrap: balance;
}
h1 { font-size: clamp(44px, 7.5vw, 84px); font-weight: 700; }
h2 { font-size: clamp(34px, 5vw, 52px); font-weight: 700; }
h3 { font-size: 24px; font-weight: 700; letter-spacing: .03em; }
p { margin: 0; }
.accent { color: var(--sunset-hi); }

.container { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 9vw, 104px); }
.section.pine  { background: var(--pine); }
.section.shore { background: var(--shore); }
.section.cream { background: var(--cream); color: var(--ink-soft); }
.section.cream h2, .section.cream h3 { color: var(--ink); }
.section.cream .eyebrow { color: #5B6E64; }
.stack { display: grid; gap: 18px; }
.stack-lg { display: grid; gap: 36px; }

.eyebrow {
  font: 600 13px/1.2 var(--body); letter-spacing: .22em;
  text-transform: uppercase; color: var(--sage);
}
.lede { font-size: 19px; max-width: 60ch; }
.muted { color: var(--sage); }

/* ---------- buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
  padding: 16px 22px; border-radius: 3px; border: 2px solid var(--sunset);
  background: var(--sunset); color: var(--pine); text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--sunset-hi); border-color: var(--sunset-hi); }
.btn.ghost { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn.ghost:hover { background: var(--cream); color: var(--pine); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(13, 31, 28, .94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 24px; padding-block: 12px;
}
.brand {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  font: 700 20px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--cream);
}
.brand img { width: 42px; height: 42px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.site-nav a {
  font: 600 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--sand); text-decoration: none; padding-block: 8px;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--cream); box-shadow: inset 0 -2px 0 var(--sunset); }
.site-nav a.nav-yt { color: var(--sunset-hi); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 55% 70% at 80% 20%, rgba(205,110,59,.30), transparent 62%),
    linear-gradient(180deg, var(--lake), var(--pine));
  padding-block: clamp(64px, 10vw, 120px) clamp(80px, 11vw, 132px);
}
.hero-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; align-items: center; }
.hero .lede { color: var(--sand); }
.hero-logo { justify-self: center; width: min(300px, 100%); }
.treeline {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; background: var(--pine);
  clip-path: polygon(0 100%,0 60%,4% 20%,8% 60%,12% 0,16% 55%,21% 15%,26% 60%,30% 10%,35% 60%,40% 25%,45% 55%,50% 5%,55% 60%,60% 20%,65% 55%,70% 0,75% 60%,80% 25%,85% 55%,90% 10%,95% 55%,100% 30%,100% 100%);
}
.hero + .section.pine { padding-top: clamp(40px, 7vw, 80px); }

/* ---------- grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }

.step { display: grid; gap: 10px; align-content: start; }
.step .num { font: 700 52px/1 var(--display); color: var(--sunset); }

.col { border-top: 3px solid var(--sunset); padding-top: 16px; display: grid; gap: 10px; align-content: start; }
.col .tag { font: 500 12.5px/1 var(--mono); color: var(--sage); }
.section.cream .col .tag { color: #5B6E64; }

/* ---------- videos ---------- */
.video-card { display: grid; gap: 12px; text-decoration: none; color: inherit; align-content: start; }
.video-thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden;
  background: linear-gradient(135deg, var(--shore), var(--pine)); border: 1px solid var(--line);
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.video-card:hover .video-thumb img { transform: scale(1.03); }
.video-thumb::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%;
  background: rgba(13,31,28,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23F3EEDC'/%3E%3C/svg%3E") center / 26px no-repeat;
}
.video-badge {
  position: absolute; left: 10px; top: 10px; z-index: 1;
  font: 600 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase;
  background: var(--sunset); color: var(--pine); padding: 6px 8px; border-radius: 2px;
}
.video-card b { font: 600 18px/1.3 var(--body); color: var(--cream); }
.video-card small { font-size: 15px; color: var(--sage); }

/* ---------- forms ---------- */
.signup-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; align-items: center; }
.form-row { display: flex; flex-wrap: wrap; gap: 10px; max-width: 560px; }
.form-row input[type="email"] {
  flex: 1 1 220px; min-width: 0; font: 400 17px/1 var(--body); padding: 15px 14px;
  border-radius: 3px; border: 2px solid var(--line); background: var(--pine); color: var(--cream);
}
.form-row input::placeholder { color: var(--sage); }
.hidden-field { position: absolute; left: -9999px; }
.form-note { font-size: 14px; color: var(--sage); }

.tree-card {
  background: var(--pine); border: 1px solid var(--line); border-radius: 6px; padding: 22px;
  transform: rotate(-1.5deg); box-shadow: 0 16px 40px rgba(0,0,0,.3); display: grid; gap: 12px;
}
.tree-card pre { margin: 0; font: 400 14px/1.75 var(--mono); color: var(--sand); white-space: pre; overflow-x: auto; }
.tree-card pre b { color: var(--sunset-hi); font-weight: 500; }

/* ---------- road to 500 ---------- */
.meter { display: grid; gap: 10px; max-width: 640px; }
.meter-bar { height: 16px; background: var(--pine); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.meter-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--sunset), var(--sunset-hi)); }
.meter-nums { display: flex; justify-content: space-between; font: 500 14px/1 var(--mono); color: var(--sage); font-variant-numeric: tabular-nums; }

/* ---------- merch ---------- */
.merch-grid { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; }
.merch-grid img { width: 240px; border-radius: 6px; border: 1px solid var(--line); }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: start; }
.portrait {
  aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: 6px; border: 1px solid var(--line);
  background: var(--shore);
}
.portrait-fallback {
  aspect-ratio: 4 / 5; border: 2px dashed var(--line); border-radius: 6px; background: var(--shore);
  display: grid; place-items: center; text-align: center; padding: 24px; color: var(--sage); font-size: 15px;
}
.prose { display: grid; gap: 18px; max-width: 64ch; }
.promise { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.45; color: var(--ink); max-width: 46ch; }
.promise strong { color: #A8521F; }

.faq { max-width: 760px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding-block: 18px; }
.faq summary { font: 600 18px/1.35 var(--body); color: var(--cream); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--sunset-hi); font-weight: 600; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; }

.email-chip {
  display: inline-block; font: 500 16px/1 var(--mono); color: var(--cream);
  background: var(--lake); border: 1px solid var(--line); padding: 14px 16px; border-radius: 3px;
}

/* ---------- footer ---------- */
.site-footer { background: var(--pine); border-top: 1px solid var(--line); padding-block: 56px 40px; text-align: center; }
.site-footer .container { display: grid; gap: 10px; justify-items: center; }
.until { font: 600 14px/1 var(--body); letter-spacing: .32em; text-transform: uppercase; color: var(--sage); }
.keep { font: 700 clamp(42px, 7vw, 64px)/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--cream); }
.handle { font: 400 14px/1 var(--mono); color: var(--sage); margin-top: 4px; }
.social { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.social a { font: 600 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--sand); text-decoration: none; }
.social a:hover { color: var(--sunset-hi); }
.copyright { font-size: 13px; color: var(--sage); margin-top: 22px; }

/* ---------- simple pages (thanks / 404) ---------- */
.center-page { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.center-page .stack { justify-items: center; max-width: 620px; }
.center-page img { width: 140px; }

/* ---------- phones ---------- */
@media (max-width: 800px) {
  .hero-grid, .signup-grid, .about-grid, .merch-grid { grid-template-columns: 1fr; }
  .hero-logo { order: -1; width: 150px; justify-self: start; }
  .tree-card { transform: none; }
  .merch-grid img { width: 180px; }
  .about-grid .portrait, .about-grid .portrait-fallback { max-width: 360px; }
  .site-header { position: static; }
}

/* ---------- gear page ---------- */
.season-switch { display: flex; flex-wrap: wrap; gap: 10px; }
.season-switch a {
  font: 600 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px;
}
.season-switch a:hover { border-color: var(--sunset); color: var(--sunset-hi); }
.season-head { display: grid; gap: 12px; margin-bottom: 36px; }
.season-head h2 .count { font: 500 15px/1 var(--mono); color: var(--sage); letter-spacing: 0; text-transform: none; margin-left: 10px; vertical-align: middle; }
.gear-group { display: grid; grid-template-columns: 200px 1fr; gap: 12px 32px; padding-block: 26px; border-top: 1px solid var(--line); }
.gear-group > h3 { font-size: 22px; padding-top: 4px; }
.gear-group > h3 small { display: block; margin-top: 6px; font: 400 14px/1.4 var(--body); color: var(--sage); text-transform: none; letter-spacing: 0; }
.gear-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.gear-item {
  display: grid; grid-template-rows: auto 1fr auto; gap: 8px; text-decoration: none; color: inherit;
  background: var(--lake); border: 1px solid var(--line); border-radius: 5px; padding: 16px 16px 14px;
  transition: border-color .15s, transform .15s;
}
.section.shore .gear-item { background: var(--pine); }
.gear-item:hover { border-color: var(--sunset); transform: translateY(-2px); }
.gear-item .sub { font: 500 12px/1.2 var(--mono); color: var(--sage); }
.gear-item b { font: 600 17px/1.3 var(--body); color: var(--cream); }
.gear-item .note { font-size: 14px; color: var(--sage); }
.gear-item .shop { font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--sunset-hi); margin-top: 4px; }
.disclosure { font-size: 14px; color: var(--sage); max-width: 70ch; border-left: 3px solid var(--sunset); padding-left: 14px; }
@media (max-width: 800px) {
  .gear-group { grid-template-columns: 1fr; }
}

.brand-feature {
  display: grid; grid-template-columns: 1fr auto; gap: 20px 40px; align-items: center;
  text-decoration: none; color: inherit; padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--sunset); border-radius: 6px;
  background: radial-gradient(ellipse 60% 120% at 100% 0%, rgba(205,110,59,.18), transparent 60%), var(--lake);
}
.brand-feature:hover .btn { background: var(--sunset-hi); border-color: var(--sunset-hi); }
@media (max-width: 800px) { .brand-feature { grid-template-columns: 1fr; } .brand-feature .btn { justify-self: start; } }

/* ---------- rigs (gear page) ---------- */
.rig { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px 40px; align-items: center; }
.rig-photos { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.rig-photos img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); }
.rig-photos img.console { aspect-ratio: auto; }
.spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.spec-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-block: 10px; border-bottom: 1px solid var(--line); }
.spec-list span { font: 500 12.5px/1.4 var(--mono); color: var(--sage); text-transform: uppercase; letter-spacing: .06em; }
.spec-list b { font-weight: 600; color: var(--cream); text-align: right; }
@media (max-width: 800px) { .rig { grid-template-columns: 1fr; } }

/* ---------- photos ---------- */
.hero-photo { position: relative; justify-self: center; width: min(340px, 100%); }
.hero-photo img.shot {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px;
  border: 6px solid var(--cream); box-shadow: 0 24px 50px rgba(0,0,0,.45); transform: rotate(2.5deg);
}
.hero-photo img.badge {
  position: absolute; left: -34px; bottom: -28px; width: 120px; height: 120px;
  background: var(--pine); border-radius: 50%; padding: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.4);
}
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: 5px; background: var(--shore); }
.gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .4s; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 10px;
  background: linear-gradient(transparent, rgba(13,31,28,.85));
  font: 600 12px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--cream);
}
.photo-band {
  position: relative; min-height: clamp(280px, 42vw, 460px); display: grid; align-items: end;
  background-size: cover; background-position: center 60%;
}
.photo-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,31,28,.15) 30%, rgba(13,31,28,.85)); }
.photo-band .container { position: relative; padding-block: 40px; }
.photo-band h2 { max-width: 18ch; }
.photo-pair { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.photo-pair img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); }
.photo-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 32px; }
.photo-row img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); }
.aurora-page { background: linear-gradient(rgba(13,31,28,.55), rgba(13,31,28,.8)), url("/assets/photos/aurora.jpg") center / cover; }
@media (max-width: 800px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .hero-photo { width: 220px; justify-self: start; order: -1; }
  .hero-photo img.badge { width: 84px; height: 84px; left: auto; right: -20px; bottom: -18px; }
  .photo-pair, .photo-row { grid-template-columns: 1fr; }
}

.brand-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.brand-grid .brand-feature { grid-template-columns: 1fr; align-content: space-between; gap: 22px; }
.brand-grid .brand-feature h2 { font-size: clamp(30px, 3.6vw, 40px); }
.brand-grid .brand-feature p { color: var(--sand); max-width: 52ch; }
.brand-grid .brand-feature .btn { justify-self: start; }
@media (max-width: 800px) { .brand-grid { grid-template-columns: 1fr; } }

.brand-single .brand-feature { grid-template-columns: 1fr auto; }
@media (max-width: 800px) { .brand-single .brand-feature { grid-template-columns: 1fr; } }
.sponsor-banner { display: grid; gap: 8px; justify-items: center; margin-top: 8px; }
.sponsor-label { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sage); text-align: center; }
.sponsor-banner a { display: block; max-width: 100%; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); line-height: 0; }
.sponsor-banner img { max-width: 100%; height: auto; display: block; }