/* Living color. Locked tokens (--bg, --gold, --text, --muted, --line) stay.
   Accent washes sit on top so the page reads warmer and the Haven blocks
   are a separate night field. No extra images, fonts, or animation. */

:root {
  --pine: #1c4a3a;
  --copper: #c4784a;
  --lagoon: #143044;
  --lamp: #f3d7a1;
  --moon: #9fd4ee;
  --moss: #b7d7c3;
}

html body nav#main-nav { position: fixed; }
html body nav#main-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #C9A84C 0%, #E7B089 32%, #8fb59a 64%, #9fd4ee 100%);
  pointer-events: none;
}

.arc .hero-media::after {
  background:
    linear-gradient(180deg, rgba(8,8,8,.52) 0%, rgba(8,8,8,0) 20%, rgba(20,56,44,.2) 48%, rgba(8,8,8,.66) 74%, #080808 100%),
    linear-gradient(90deg, rgba(8,8,8,.8) 0%, rgba(18,42,34,.28) 42%, rgba(62,36,16,.22) 100%);
}
@media (max-width: 700px) {
  .arc .hero-media::after {
    background: linear-gradient(180deg, rgba(8,8,8,.42) 0%, rgba(16,42,36,.1) 22%, rgba(8,8,8,.4) 58%, rgba(8,8,8,.9) 86%, #080808 100%);
  }
}

.arc .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 8px 14px;
  color: #f3d7a1;
  background: linear-gradient(90deg, rgba(20,52,40,.82), rgba(48,30,14,.72));
  border: 1px solid rgba(201,168,76,.7);
  box-shadow: 0 0 0 1px rgba(159,212,238,.28);
}

#pre-snow-banner {
  background: linear-gradient(100deg, #14281f 0%, #1c150e 52%, #14202c 100%) !important;
  border: 0 !important;
  box-shadow: inset 0 3px 0 #C9A84C, inset 0 -3px 0 #9fd4ee;
}

#pinnacle-details {
  background:
    radial-gradient(700px 240px at 0% 0%, rgba(143,181,154,.18), transparent 70%),
    #0e1411;
}
.arc .band {
  background:
    radial-gradient(820px 280px at 100% 0%, rgba(196,120,74,.12), transparent 68%),
    #100e0c;
}
.arc .band.alt {
  background:
    radial-gradient(760px 260px at 0% 100%, rgba(28,74,58,.28), transparent 70%),
    #0e1412;
}

.ribbon {
  background:
    linear-gradient(90deg, rgba(201,168,76,.16), rgba(28,74,58,.2) 48%, rgba(20,48,68,.28));
  border-top: 0;
  border-bottom: 1px solid rgba(159,212,238,.28);
}
.ribbon li.rb-trex {
  background:
    radial-gradient(circle at 35% 40%, rgba(201,168,76,.34), transparent 62%),
    #14110c;
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.72);
}
.ribbon li .rb-logo {
  width: min(190px, 100%);
  filter: drop-shadow(0 10px 16px rgba(201,168,76,.4));
}
html body .ribbon .rb-medal {
  color: #C9CED6;
  border-color: rgba(201,206,214,.72);
  background: radial-gradient(circle at 35% 30%, rgba(229,228,226,.22), rgba(201,206,214,.08) 48%, transparent 72%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 12px rgba(176,186,200,.22);
}
html body .ribbon .rb-medal b,
html body .ribbon .rb-medal svg { color: #E5E4E2; stroke: #E5E4E2; }
.ribbon li:nth-child(2) .rb-medal {
  border-color: rgba(201,206,214,.72);
  background: radial-gradient(circle at 35% 30%, rgba(229,228,226,.22), rgba(201,206,214,.08) 48%, transparent 72%);
}
.ribbon li:nth-child(2) .rb-medal b { color: #E5E4E2; }
@media (max-width: 900px) {
  .ribbon li .rb-logo { width: min(148px, 100%); }
}

.arc .county-rail {
  position: static;
  display: block;
  background: #101612;
  padding: 16px clamp(22px, 6vw, 96px) 20px;
  border-bottom: 1px solid rgba(183,215,195,.28);
}
.county-rail p {
  margin: 0 0 10px;
  font-family: "DM Sans", "DM Sans Fallback", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #C9A84C;
}
.county-rail ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.county-rail a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: #e8e2d6;
  text-decoration: none;
  background: #161410;
  border: 1px solid rgba(201,206,214,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 12px rgba(176,186,200,.2);
  font-family: "DM Sans", "DM Sans Fallback", sans-serif;
  font-size: 15px;
}
.county-rail a:hover { color: #f3d7a1; border-color: #E5E4E2; }
.county-rail li:nth-child(1) a { border-color: #E5E4E2; }
.county-rail li:nth-child(2) a { border-color: #D8DCE3; }
.county-rail li:nth-child(3) a { border-color: #C9CED6; }
.county-rail li:nth-child(4) a { border-color: #D5DAE1; }
.county-rail li:nth-child(5) a { border-color: #E5E4E2; }
.county-rail li:nth-child(6) a { border-color: #C9CED6; }
.county-rail li:nth-child(7) a { border-color: #D8DCE3; }
.county-rail li:nth-child(8) a { border-color: #C5CCD6; }
.county-rail a:focus-visible {
  outline: 2px solid #f3d7a1;
  outline-offset: 3px;
}

.arc .chapter:nth-child(4n+1) .chapter-num { color: #C9A84C; }
.arc .chapter:nth-child(4n+2) .chapter-num { color: #E7B089; }
.arc .chapter:nth-child(4n+3) .chapter-num { color: #b7d7c3; }
.arc .chapter:nth-child(4n+4) .chapter-num { color: #9fd4ee; }
.arc .chapter:nth-child(4n+2)::before { background: #E7B089; }
.arc .chapter:nth-child(4n+3)::before { background: #b7d7c3; }
.arc .chapter:nth-child(4n+4)::before { background: #9fd4ee; }

.badge {
  background: radial-gradient(circle at 20% 20%, rgba(201,168,76,.22), transparent 70%);
  box-shadow: 0 0 0 1px rgba(201,168,76,.45), 0 16px 40px -24px rgba(201,168,76,.8);
}
.cert-icon.is-trex img,
.cert-card .is-trex img {
  filter: drop-shadow(0 10px 16px rgba(201,168,76,.4));
}

html body .page > section:nth-of-type(4n+1) { box-shadow: inset 4px 0 0 #C9A84C; }
html body .page > section:nth-of-type(4n+2) { box-shadow: inset 4px 0 0 #E7B089; }
html body .page > section:nth-of-type(4n+3) { box-shadow: inset 4px 0 0 #8fb59a; }
html body .page > section:nth-of-type(4n+4) { box-shadow: inset 4px 0 0 #9fd4ee; }
html body .svc-card:nth-child(4n+1) { box-shadow: inset 3px 0 0 #C9A84C; }
html body .svc-card:nth-child(4n+2) { box-shadow: inset 3px 0 0 #9fd4ee; }
html body .svc-card:nth-child(4n+3) { box-shadow: inset 3px 0 0 #E7B089; }
html body .svc-card:nth-child(4n+4) { box-shadow: inset 3px 0 0 #b7d7c3; }
html body .county-card:nth-child(4n+1),
html body .county-card:nth-child(4n+2),
html body .county-card:nth-child(4n+3),
html body .county-card:nth-child(4n+4) { box-shadow: inset 0 3px 0 #C9CED6; }
html body .county-card:hover {
  border-color: rgba(201,206,214,.7);
  box-shadow: inset 0 3px 0 #C9CED6, 0 18px 36px -20px rgba(176,186,200,.35);
}
html body .cert-card:hover {
  border-color: rgba(201,206,214,.7);
  box-shadow: 0 24px 50px -24px rgba(176,186,200,.38);
}

html body footer { position: relative; }
html body footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #C9A84C, #E7B089, #8fb59a, #9fd4ee);
  pointer-events: none;
}

/* Haven lighting and Haven product blocks: night field, lamp and moonlight. */
.haven-band,
.haven-panel,
body.haven-page main,
#stb-haven-lighting,
details.haven-note {
  background-color: #0c1c2b !important;
  background-image:
    radial-gradient(900px 340px at 100% 0%, rgba(159,212,238,.2), transparent 58%),
    radial-gradient(680px 280px at 0% 100%, rgba(243,215,161,.16), transparent 56%) !important;
  border-top: 1px solid rgba(159,212,238,.45) !important;
  border-bottom: 1px solid rgba(243,215,161,.4) !important;
  box-shadow: inset 6px 0 0 #9fd4ee, inset -6px 0 0 #f3d7a1;
}
.haven-chip,
.haven-band .kicker,
.haven-panel .section-eyebrow,
body.haven-page .hero-eyebrow,
body.haven-page .section-eyebrow,
#stb-haven-lighting .pdc-name,
details.haven-note summary em {
  color: #f3d7a1 !important;
}
.haven-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0 0 12px;
  padding: 0 12px;
  font-family: "DM Sans", "DM Sans Fallback", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #0c1c2b !important;
  background: #f3d7a1;
}
.haven-band .kicker::before,
.haven-panel .section-eyebrow::before,
body.haven-page .section-eyebrow::before {
  background: #9fd4ee !important;
}
#stb-haven-lighting {
  box-shadow: inset 0 0 0 1px rgba(159,212,238,.7), 0 18px 40px -28px rgba(159,212,238,.8);
}
#stb-haven-lighting .pdc-role,
.haven-band .big,
.haven-panel .section-h2,
.haven-panel .body-copy,
body.haven-page .body-copy,
body.haven-page .hero-h1,
details.haven-note summary {
  color: #f5f0e8;
}
.haven-panel .body-copy,
body.haven-page .body-copy,
details.haven-note .voice p {
  color: #e8e2d6;
}
.haven-project {
  background:
    radial-gradient(800px 240px at 50% 0%, rgba(159,212,238,.14), transparent 60%),
    #071018 !important;
  box-shadow: inset 0 4px 0 #9fd4ee;
}
body.haven-page {
  background: #0c1c2b;
}
body.haven-page #main-nav::after {
  background: linear-gradient(90deg, #9fd4ee, #f3d7a1, #C9A84C);
}
body.haven-page .page-hero-bg::after {
  background:
    linear-gradient(180deg, rgba(8,16,28,.55) 0%, rgba(8,16,28,.08) 28%, rgba(12,28,43,.35) 58%, #0c1c2b 100%),
    linear-gradient(90deg, rgba(8,18,32,.72) 0%, rgba(8,18,32,.15) 70%) !important;
}
body.haven-page a:focus-visible,
body.haven-page button:focus-visible,
.haven-band a:focus-visible,
.haven-panel a:focus-visible {
  outline: 2px solid #f3d7a1;
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .haven-band,
  .haven-panel,
  body.haven-page main {
    box-shadow: inset 0 4px 0 #9fd4ee;
  }
}

/* Cert WebPs and county seals: brushed platinum.
   Full grayscale so the source gold cannot remain, with low contrast
   and a light cool cast so highlights stay silver instead of white.
   Brand gold (--gold), the TrexPro badge (.is-trex / .rb-logo), Haven
   night fields, and county name text stay as they are. */
html body .cert-icon.is-gold {
  filter: drop-shadow(0 12px 16px rgba(150,160,172,.28));
}
html body .cert-icon.is-gold img,
html body .cc-emblem {
  filter: grayscale(1) contrast(1.06) sepia(.22) hue-rotate(186deg) saturate(.25) brightness(1.01);
}
html body .cc-emblem {
  filter: grayscale(1) contrast(1.06) sepia(.22) hue-rotate(186deg) saturate(.25) brightness(1.01) drop-shadow(0 8px 14px rgba(0,0,0,.4));
}
html body .cc-emblem-wrap::before {
  background: radial-gradient(ellipse at center, rgba(176,186,200,.28), rgba(176,186,200,0) 72%);
}
html body .sc-map .cc-face {
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 0 0 1px rgba(201,206,214,.4) inset,
    0 18px 40px -18px rgba(0,0,0,.75),
    0 4px 14px -6px rgba(0,0,0,.6);
}
html body .sc-map .cc-face:hover,
html body .sc-map .cc-face[aria-expanded="true"] {
  box-shadow:
    0 1px 0 rgba(255,255,255,.1) inset,
    0 0 0 1px rgba(229,228,226,.65) inset,
    0 22px 48px -18px rgba(0,0,0,.8),
    0 6px 18px -6px rgba(0,0,0,.65);
}
html body .sc-map .cc-sheen {
  background: linear-gradient(115deg, transparent 40%, rgba(201,206,214,.1) 48%, rgba(213,218,225,.2) 50%, rgba(201,206,214,.1) 52%, transparent 60%);
}
html body .sc-map .cc-btn {
  color: #14181c;
  background: linear-gradient(180deg, #d5dbe3 0%, #c5ccd4 58%, #a7b0bb 100%);
  box-shadow: 0 6px 16px -6px rgba(150,160,172,.4);
}
html body .sc-map .cc-btn:hover {
  filter: none;
  background: linear-gradient(180deg, #e0e5eb 0%, #ced4dc 58%, #b3bcc6 100%);
}