/* ============================================================
   Rowe Guns — destination site stylesheet
   Read. Break. Trace.

   Brand color/font tokens live in rowe-tokens.css (enqueued before
   this file) — vendored from ROWE-brand, the canonical source. Don't
   hardcode a hex color or font stack here; add a var(--token) to
   rowe-tokens.css / ROWE-brand/tokens.css instead.
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;color:var(--graphite);background:var(--bone);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
svg{max-width:100%}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(18px,4vw,32px)}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 clamp(18px,4vw,32px)}
a{color:inherit;text-decoration:none}
/* sticky-nav-aware anchor scrolling so section headings aren't hidden */
[id]{scroll-margin-top:84px}
/* keyboard accessibility */
a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:4px}
.mono{font-family:'JetBrains Mono',monospace}
.kick{font-size:clamp(10px,2.6vw,11px);letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--copper)}
.wm{height:34px;width:auto;display:block}
.serif{font-family:'Newsreader',Georgia,serif;font-style:italic}

/* ---------- top strip ---------- */
.strip{background:var(--copper);color:white;font-size:clamp(11px,3vw,12.5px);text-align:center;padding:9px 14px;letter-spacing:.02em}
.strip a{text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:var(--graphite);border-bottom:1px solid var(--graphite-line-cool)}
.navin{display:flex;align-items:center;justify-content:space-between;height:64px;gap:14px}
.navlogo .wm{height:30px}
.navlinks{display:flex;gap:clamp(11px,1.5vw,19px);align-items:center}
.navlinks a{color:var(--bone-dim);font-size:14px;font-weight:500}
.navlinks a:hover,.navlinks a.active{color:var(--bone)}
.btn{display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;padding:11px 18px;min-height:44px;border-radius:6px;border:1px solid var(--copper);background:var(--copper);color:white;cursor:pointer;text-align:center;transition:background .15s,border-color .15s}
.btn.ghost{background:transparent;color:var(--bone);border-color:var(--graphite-line-cool-3)}
.btn.dark{color:var(--graphite);border-color:var(--graphite);background:transparent}
.btn.dark:hover{background:var(--graphite);color:white}
.btn:hover{background:var(--copper-hover);border-color:var(--copper-hover)}
.btn.ghost:hover{background:var(--graphite-3);color:white}
.navtoggle{position:absolute;opacity:0;width:1px;height:1px}
.hamb{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hamb span{display:block;width:24px;height:2px;background:var(--bone);margin:0 auto;transition:transform .25s,opacity .25s}
.navtoggle:focus-visible+.hamb{outline:2px solid var(--copper);outline-offset:2px;border-radius:4px}

/* ---------- home hero ---------- */
.hero{background:var(--graphite);color:var(--bone);position:relative;overflow:hidden}
.hero .wrap{padding:clamp(48px,9vw,92px) clamp(18px,4vw,32px)}
.hero-mono{position:absolute;right:-6%;top:8%;width:min(440px,52vw);opacity:.06;pointer-events:none}
.hero .wm{height:clamp(58px,15vw,150px);margin-bottom:clamp(18px,3vw,26px)}
.hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.doctrine{font-size:clamp(20px,4.4vw,28px);font-weight:600;letter-spacing:-.01em;max-width:620px}
.wink{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:clamp(17px,3.4vw,20px);color:var(--copper);margin-top:12px}
.hero-cta{margin-top:clamp(24px,4vw,34px);display:flex;gap:12px;flex-wrap:wrap}
.hero-sub{margin-top:clamp(22px,4vw,30px);color:var(--bone-faint);font-size:clamp(13px,3vw,14px);max-width:560px;border-top:1px solid var(--graphite-line-cool);padding-top:18px}

/* ---------- page hero (interior) ---------- */
.phero{background:var(--graphite);color:var(--bone);position:relative;overflow:hidden}
.phero .wrap{padding:clamp(40px,7vw,72px) clamp(18px,4vw,32px)}
.phero-no{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--copper);letter-spacing:.08em}
.phero h1{font-size:clamp(30px,6.4vw,52px);font-weight:700;letter-spacing:-.02em;margin:10px 0 0;line-height:1.04}
.phero .ph-sub{color:var(--bone-dimmer);font-size:clamp(15px,2.8vw,18px);max-width:620px;margin-top:16px}
.phero .ph-cta{margin-top:clamp(20px,3vw,28px);display:flex;gap:12px;flex-wrap:wrap}
.phero-mono{position:absolute;right:-5%;top:-12%;width:min(380px,46vw);opacity:.05;pointer-events:none}

/* ---------- hero photography ----------
   The photo sits *under* the graphite surface rather than replacing it:
   low opacity over var(--graphite) keeps the hero a dark brand panel
   instead of a photo banner, so the wordmark and copy stay the subject.
   Stacking, back to front: photo (0), scrim + reticle monogram (1), .wrap
   text (2). The scrim is opaque graphite behind the text column and
   clears toward the right, which is where every one of these frames has
   its open sky - so contrast holds without flattening the image. */
.hero-photo,.phero-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.hero-photo{opacity:.38}
.phero-photo{opacity:.3}
.hero::after,.phero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,var(--graphite) 6%,color-mix(in srgb,var(--graphite) 74%,transparent) 44%,color-mix(in srgb,var(--graphite) 26%,transparent) 100%)}
.hero-mono,.phero-mono{z-index:1}
.hero .wrap,.phero .wrap{position:relative;z-index:2}
/* Narrow viewports: copy stops being a left-hand column and spans the
   full width, so a sideways scrim no longer sits behind all of it - the
   hero's closing paragraph ends up over open rock and grass. Flatten to
   an even wash and pull the photo back instead. */
@media (max-width:720px){
  .hero-photo{opacity:.3}
  .hero::after,.phero::after{background:color-mix(in srgb,var(--graphite) 62%,transparent)}
}

/* ---------- sections ---------- */
section{padding:clamp(46px,8vw,78px) 0}
section.tight{padding:clamp(34px,5vw,52px) 0}
.lead{font-size:clamp(22px,3.6vw,32px);font-weight:600;letter-spacing:-.01em;max-width:760px;line-height:1.3}
.lead em{font-family:'Newsreader',serif;font-style:italic;color:var(--sagedeep)}
.muted{color:var(--stone);max-width:680px;margin-top:18px;font-size:clamp(15px,2.6vw,16px)}
.muted.wide{max-width:820px}
h2.h{font-size:clamp(22px,3.6vw,30px);font-weight:600;letter-spacing:-.01em}
h2.h+.muted{margin-top:14px}
.band{background:var(--graphite);color:var(--bone)}
.band .muted{color:var(--bone-dimmer)}
.band h2.h{color:var(--bone)}
.paper{background:var(--paper)}

/* ---------- rooms grid ---------- */
.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(14px,2vw,18px);margin-top:clamp(28px,5vw,40px)}
.room{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:24px 24px 20px;position:relative;transition:border-color .15s,transform .15s;display:block}
.room:hover{border-color:var(--copper);transform:translateY(-2px)}
.room-no{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--copper)}
.room h3{font-size:20px;font-weight:600;margin:8px 0 8px}
.room p{color:var(--stone);font-size:14.5px}
.room-go{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--graphite)}

/* ---------- feature split ---------- */
.feat{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,48px);align-items:center}
.feat.rev{grid-template-columns:1fr 1.1fr}
.feat .tag{display:inline-block;background:var(--copper);color:white;font-size:11px;font-weight:600;letter-spacing:.12em;padding:5px 12px;border-radius:5px;text-transform:uppercase}
.feat h2{font-size:clamp(22px,3.6vw,30px);font-weight:600;margin:18px 0 14px;letter-spacing:-.01em}
.feat p{color:var(--bone-dimmer);font-size:clamp(15px,2.6vw,16px)}
.feat p+p{margin-top:12px}
.feat.light h2{color:var(--graphite)}
.feat.light p{color:var(--stone)}
.featbox{background:var(--graphite-3);border:1px solid var(--graphite-line-cool-2);border-radius:14px;padding:clamp(22px,4vw,34px);font-family:'JetBrains Mono',monospace}
.featbox.light{background:var(--paper);border-color:var(--line)}
.featbox .row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--graphite-line-cool-2);font-size:clamp(13px,2.5vw,14px);color:var(--bone-dim)}
.featbox.light .row{border-color:var(--line);color:var(--stone)}
.featbox .row:last-child{border:0}
.featbox .row b{color:var(--bone);font-weight:500;text-align:right}
.featbox.light .row b{color:var(--graphite)}

/* ---------- two-up / cards ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.split3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(16px,2vw,22px)}
.card2{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:clamp(24px,4vw,34px);color:var(--stone)}
/* belt-and-suspenders: light cards inside dark bands/cta always keep dark headings */
.band .card2,.cta .card2,.band .tile,.cta .tile{color:var(--stone)}
.band .card2 h3,.cta .card2 h3,.band .tile h3,.cta .tile h3{color:var(--graphite)}
.band .step p,.cta .step p{color:var(--bone-dimmer)}
.card2.feature{border-color:var(--copper);box-shadow:0 1px 0 var(--copper) inset}
.card2 h3{font-size:22px;font-weight:600;margin-bottom:10px;color:var(--graphite)}
.card2 p{color:var(--stone)}
.card2 .price{font-family:'JetBrains Mono',monospace;color:var(--brass);font-size:15px;margin:6px 0 14px}
.card2 ul{list-style:none;margin:14px 0 22px}
.card2 li{padding:9px 0 9px 22px;position:relative;color:var(--stone);font-size:14.5px;border-bottom:1px solid var(--line)}
.card2 li:last-child{border-bottom:0}
.card2 li:before{content:"";position:absolute;left:0;top:16px;width:8px;height:8px;border-radius:50%;background:var(--brass)}

/* small info tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(14px,2vw,18px);margin-top:clamp(24px,4vw,34px)}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px;color:var(--stone)}
.tile .ic{font-family:'JetBrains Mono',monospace;color:var(--copper);font-size:13px;letter-spacing:.06em}
.tile h3{font-size:17px;font-weight:600;margin:8px 0 6px;color:var(--graphite)}
.tile p{color:var(--stone);font-size:14px}

/* ---------- schedule / list table ---------- */
.sched{margin-top:clamp(24px,4vw,34px);border-top:1px solid var(--line)}
.sched .r{display:grid;grid-template-columns:140px 1fr auto;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.sched .r .when{font-family:'JetBrains Mono',monospace;color:var(--copper);font-size:13.5px}
.sched .r .what h4{font-size:16.5px;font-weight:600}
.sched .r .what p{color:var(--stone);font-size:14px;margin-top:3px}
.sched .r .meta{font-family:'JetBrains Mono',monospace;color:var(--stone);font-size:13px;white-space:nowrap}
/* keep schedules legible when placed inside a dark band */
.band .sched,.band .sched .r{border-color:var(--graphite-line)}
.band .sched .r .what h4{color:var(--bone)}
.band .sched .r .what p{color:var(--bone-dimmer)}
.band .sched .r .meta{color:var(--sage-dim)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(16px,2vw,22px);margin-top:clamp(24px,4vw,34px);counter-reset:s}
.step{position:relative;padding-top:14px;border-top:2px solid var(--copper)}
.step .n{font-family:'JetBrains Mono',monospace;color:var(--copper);font-size:13px}
.step h3{font-size:17px;font-weight:600;margin:6px 0 6px}
.step p{color:var(--stone);font-size:14px}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(24px,4vw,34px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:600;font-size:16.5px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--copper);font-family:'JetBrains Mono',monospace;font-size:20px;transition:transform .2s}
.faq details[open] summary:after{content:"–"}
.faq p{color:var(--stone);font-size:14.5px;padding:0 0 18px;max-width:760px}

/* ---------- quote ---------- */
.quote{background:var(--paper);text-align:center}
.quote blockquote{font-family:'Newsreader',serif;font-style:italic;font-size:clamp(22px,3.8vw,30px);max-width:820px;margin:0 auto;line-height:1.4}
.quote .attr{margin-top:22px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);font-weight:600}

/* ---------- CTA band ---------- */
.cta{background:var(--graphite);color:var(--bone);text-align:center}
.cta h2{font-size:clamp(24px,4.2vw,36px);font-weight:600;letter-spacing:-.01em;max-width:720px;margin:0 auto}
.cta p{color:var(--bone-faint);margin:16px auto 26px;max-width:560px;font-size:clamp(14px,2.6vw,16px)}
.cta .hero-cta{justify-content:center}

/* ---------- contact / visit ---------- */
.infogrid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,44px);align-items:start}
.infolist .row{padding:16px 0;border-bottom:1px solid var(--line)}
.infolist .row h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);font-weight:600;margin-bottom:6px}
.infolist .row p{color:var(--graphite);font-size:15.5px}
.infolist .row p span{color:var(--stone)}
.mapbox{background:var(--graphite-2);border:1px solid var(--line);border-radius:14px;min-height:300px;height:100%;display:flex;align-items:center;justify-content:center;color:var(--bone-faintest);font-family:'JetBrains Mono',monospace;font-size:13px;text-align:center;padding:24px;position:relative;overflow:hidden}
.form{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:clamp(22px,4vw,32px)}
.form label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);font-weight:600;margin:14px 0 6px}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:white;font-family:inherit;font-size:16px;color:var(--graphite);transition:border-color .15s,box-shadow .15s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--copper);box-shadow:0 0 0 3px color-mix(in srgb, var(--copper) 12%, transparent);outline:none}
.form textarea{min-height:120px;resize:vertical}
.form .btn{margin-top:20px;width:100%}

/* ---------- footer ---------- */
footer{background:var(--graphite);color:var(--bone-faint);padding:clamp(44px,7vw,60px) 0 34px;font-size:14px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3vw,32px);padding-bottom:30px;border-bottom:1px solid var(--graphite-line-cool)}
footer h4{color:var(--bone);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;font-weight:600}
footer a{display:block;padding:7px 0;color:var(--bone-faint)}
footer a:hover{color:var(--bone)}
.fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:22px;font-size:12.5px;color:var(--bone-faintest)}
.fwink{font-family:'Newsreader',serif;font-style:italic;color:var(--copper)}

/* ---------- responsive ---------- */
@media (max-width:980px){.fgrid{grid-template-columns:1fr 1fr}.feat,.feat.rev{grid-template-columns:1fr}.infogrid{grid-template-columns:1fr}.sched .r{grid-template-columns:110px 1fr}.sched .r .meta{grid-column:1/-1}}
/* nav collapses to a hamburger early enough that the 8 links never crowd */
@media (max-width:1024px){
  .hamb{display:flex}
  .navlinks{position:absolute;top:100%;left:0;right:0;background:var(--graphite);border-bottom:1px solid var(--graphite-line-cool);flex-direction:column;align-items:stretch;gap:0;padding:6px 0 14px;display:none;box-shadow:0 12px 24px rgba(0,0,0,.25)}
  .navtoggle:checked~.navlinks{display:flex}
  .navlinks a{padding:14px clamp(18px,4vw,32px);font-size:16px;border-top:1px solid var(--graphite-3);color:var(--bone)}
  .navlinks a.btn{margin:12px clamp(18px,4vw,32px) 0;border-top:0}
  .navtoggle:checked~.hamb span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtoggle:checked~.hamb span:nth-child(2){opacity:0}
  .navtoggle:checked~.hamb span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:900px){
  .feat,.split,.split3,.fgrid{grid-template-columns:1fr}
  .feat{gap:24px}
  .hero-cta .btn,.ph-cta .btn{flex:1 1 160px}
  .memberhead{align-items:flex-start}
}
/* The phone lockup overrides that used to live here have moved below the
   .lk-* block - see "phones: stack the hero lockup" further down. */
@media (max-width:560px){
  section{padding:clamp(40px,9vw,78px) 0}
  .hero-cta{gap:10px}
}
@media (max-width:430px){.fgrid{grid-template-columns:1fr}.hero-cta .btn,.ph-cta .btn{flex:1 1 100%}.sched .r{grid-template-columns:1fr}}
/* large desktops */
@media (min-width:1440px){.wrap{max-width:1280px}.wrap-narrow{max-width:920px}}

/* ============================================================
   Memberships page
   ============================================================ */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pills a{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.04em;
  padding:9px 15px;border:1px solid color-mix(in srgb, var(--bone) 28%, transparent);border-radius:999px;color:var(--bone)}
.pills a:hover{border-color:var(--copper);background:color-mix(in srgb, var(--copper) 14%, transparent)}
.statusbar{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:7px 13px;border-radius:999px;
  background:var(--bone-warm);color:var(--stone);margin-bottom:6px}
.statusbar:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sagedeep)}
.statusbar.sold{background:var(--copper-tint);color:var(--copper-deep)}.statusbar.sold:before{background:var(--copper-line)}
.statusbar.soon{background:var(--sage-tint);color:var(--sagedeep)}.statusbar.soon:before{background:var(--brass)}
.card2 .price-lg{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:27px;color:var(--graphite);letter-spacing:-.01em;margin:4px 0 2px}
.card2 .price-lg .per{font-size:13px;font-weight:500;color:var(--stone);letter-spacing:0;margin-left:7px}
/* Scoped to .card2 rather than .card2.feature so .ribbon-ghost (the
   invisible spacer in non-featured tier cards) inherits identical box
   metrics - see the tier-card block at the end of this file. */
.card2 .ribbon{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:white;background:var(--copper);padding:4px 10px;border-radius:5px}
.priceitem{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.priceitem:last-child{border-bottom:0}
.priceitem .pl span{display:block;color:var(--stone);font-size:13px;margin-top:2px}
.priceitem b{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:16px;color:var(--graphite);white-space:nowrap}
@media (hover:none){.room:hover{transform:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ============================================================
   Rowe Guns — primary logo lockup
   (inline, uses the loaded Archivo web font; bone on graphite)

   Ratios below are the logo kit's construction spec, expressed against
   the wordmark's own font-size as 1em: stop 0.19em square with 0.04em
   radius and 0.06em after the E, divider 0.095em wide by 1.286em tall,
   0.43em of gap either side of it. Those were already correct and are
   unchanged — at nav size, 21px wordmark gives the 27px divider and 9px
   gaps the kit specifies.

   What changed on 2026-08-13 is the descriptor. It used to be two
   stacked words ("Outdoor / Adventures") and so was set small with tight
   tracking to keep the block within the divider's height. Rowe Guns'
   descriptor is a single word, which the kit sets at 0.68em with 0.14em
   tracking, optically centred on the cap block. Hence the much larger
   .lk-sub sizes: the descriptor is two stacked lines as of 2026-08-28,
   so the old single-line 0.68 ratio no longer applies. The hero carries
   the artwork's true ratios against the wordmark's font-size - descriptor
   0.38, divider 0.74 tall x 0.058 wide, line gap 0.09. Nav and foot hold
   the descriptor nearer 0.44: 0.38 of a 21px wordmark is 8px, which is
   below where 800-weight Archivo at .14em tracking survives. That is an
   optical size adjustment, not a second mark.
   ============================================================ */
.lk{display:inline-flex;align-items:center;gap:9px;line-height:1;white-space:nowrap}
.lk-word{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.02em;color:var(--bone);display:inline-block;white-space:nowrap}
.lk-dot{display:inline-block;width:.19em;height:.19em;background:var(--copper);border-radius:.04em;margin-left:.06em;vertical-align:.03em}
.lk-div{width:2px;background:var(--copper);border-radius:1px;flex:none}
.lk-sub{font-family:'Archivo',sans-serif;font-weight:800;color:var(--bone);text-transform:uppercase;line-height:1;letter-spacing:.14em;
  display:flex;flex-direction:column;justify-content:center;gap:.24em}
/* The two descriptor lines. letter-spacing adds a trailing space after
   the last glyph, which on a left-aligned stack makes GUN and SHOP look
   misaligned against the divider - the negative margin takes it back. */
.lk-subline{display:block;margin-right:-.14em}
/* nav size */
.lk-nav .lk-word{font-size:21px}
.lk-nav .lk-div{height:16px}
.lk-nav .lk-sub{font-size:9.2px}
/* footer size */
.lk-foot .lk-word{font-size:23px}
.lk-foot .lk-div{height:17px}
.lk-foot .lk-sub{font-size:10px}
/* hero size */
.lk-hero{gap:clamp(14px,2.6vw,26px);margin-bottom:clamp(18px,3vw,26px)}
.lk-hero .lk-word{font-size:clamp(46px,12vw,104px)}
.lk-hero .lk-div{height:clamp(34px,8.9vw,77px);width:clamp(3px,.6vw,6px)}
.lk-hero .lk-sub{font-size:clamp(17px,4.56vw,40px)}
@media (max-width:380px){.lk-nav{gap:7px}.lk-nav .lk-word{font-size:19px}.lk-nav .lk-div{height:15px}.lk-nav .lk-sub{font-size:8.4px}}

/* phones: stack the hero lockup (ROWE. over GUNS) - the kit's stacked
   variant. The descriptor is letter-spaced to span the wordmark rather
   than set at the 0.68em horizontal ratio, since four letters can't span
   ROWE. at full size, and the divider becomes a rule beneath the wordmark
   instead of a bar beside it.

   These MUST sit after the .lk-* block above, not up with the other
   max-width:560px rules. They lived there until 2026-08-13 and were
   silently dead: same specificity (0,2,0), so the later unmediated
   .lk-hero declarations won every property they also declared. The phone
   hero rendered a 3x50px vertical hairline instead of a 56x3px rule, and
   the wordmark at 46.8px instead of 66px. Only letter-spacing survived,
   because nothing below declares it. */
@media (max-width:560px){
  .lk-hero{flex-direction:column;align-items:flex-start;gap:10px}
  .lk-hero .lk-div{width:56px;height:3px;border-radius:2px}
  .lk-hero .lk-word{font-size:clamp(54px,17vw,82px)}
  .lk-hero .lk-sub{font-size:clamp(18px,5.2vw,26px);letter-spacing:.42em;margin-right:-.42em}
}

/* ============================================================
   Member area — login, signup, profile dashboard
   ============================================================ */
.authwrap{max-width:470px;margin:0 auto}
.authcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:clamp(24px,4vw,34px)}
.tabs{display:flex;gap:6px;margin-bottom:22px;background:var(--bone-warm);border:1px solid var(--line);border-radius:10px;padding:4px}
.tabs button{flex:1;padding:10px;border:0;background:transparent;font-family:inherit;font-weight:600;font-size:14px;color:var(--stone);border-radius:7px;cursor:pointer}
.tabs button.on{background:white;color:var(--graphite);box-shadow:0 1px 2px rgba(0,0,0,.07)}
.authcard h2{font-size:21px;font-weight:600;margin-bottom:4px}
.authcard .sub{color:var(--stone);font-size:14px;margin-bottom:18px}
.alert{border-radius:8px;padding:11px 14px;font-size:14px;margin-bottom:16px;display:none;line-height:1.45}
.alert.err{background:var(--copper-tint);color:var(--copper-deep);border:1px solid var(--copper-tint-line);display:block}
.alert.ok{background:var(--sage-tint);color:var(--sage-deep-2);border:1px solid var(--sage-tint-line);display:block}
.muted-link{font-size:13.5px;color:var(--stone);margin-top:16px;text-align:center}
.muted-link a{color:var(--copper);font-weight:600;cursor:pointer}
/* membership card + profile */
.memberhead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:8px}
.memberwrap{display:grid;grid-template-columns:350px 1fr;gap:clamp(22px,4vw,40px);align-items:start;margin-top:clamp(24px,4vw,34px)}
.mcard{background:var(--graphite);border:1px solid var(--graphite-line);border-radius:16px;padding:24px;color:var(--bone);position:relative;overflow:hidden;min-height:210px;display:flex;flex-direction:column;justify-content:space-between}
.mcard .glow{position:absolute;right:-50px;top:-60px;width:220px;height:220px;background:radial-gradient(circle,color-mix(in srgb, var(--copper) 38%, transparent),transparent 65%);pointer-events:none}
.mcard .mtop{position:relative;display:flex;justify-content:space-between;align-items:flex-start}
.mcard .mtier{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--copper)}
.mcard .mname{font-family:'Archivo',sans-serif;font-weight:900;font-size:25px;letter-spacing:-.01em;margin-top:14px;position:relative}
.mcard .mrows{position:relative;margin-top:14px;border-top:1px solid var(--graphite-line);padding-top:12px}
.mcard .mrow{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--bone-dim);padding:3px 0}
.mcard .mrow b{color:var(--bone);font-weight:500}
.profileform .grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.profile-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:8px}
.btn.outline{background:transparent;color:var(--graphite);border-color:var(--line)}
.btn.outline:hover{background:var(--bone-warm);border-color:var(--stone)}
@media (max-width:760px){.memberwrap{grid-template-columns:1fr}.profileform .grid{grid-template-columns:1fr}}

/* Netlify form plumbing — must stay invisible in every engine */
.hp{display:none!important}
input[type=hidden]{display:none!important}

/* ============================================================
   v5 design polish — depth, motion, micro-interactions
   ============================================================ */
::selection{background:var(--copper);color:white}

/* buttons: lift on hover, settle on press */
.btn{transition:background .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s;will-change:transform}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb, var(--copper) 28%, transparent)}
.btn.ghost:hover{box-shadow:0 8px 20px rgba(0,0,0,.25)}
.btn.dark:hover,.btn.outline:hover{box-shadow:0 8px 20px color-mix(in srgb, var(--graphite) 16%, transparent)}
.btn:active{transform:translateY(0);box-shadow:none}

/* nav: shadow once the page scrolls (toggled by motion.js) */
nav{transition:box-shadow .25s}
nav.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.30)}
/* desktop nav links: copper underline sweep */
@media (min-width:1025px){
  .navlinks a:not(.btn){position:relative;padding-bottom:2px}
  .navlinks a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--copper);transition:right .22s ease}
  .navlinks a:not(.btn):hover::after,.navlinks a.active::after{right:0}
}
/* mobile menu: soft drop-in */
@keyframes menuDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:1024px){.navtoggle:checked~.navlinks{animation:menuDown .26s ease}}

/* hero: copper glow + slow watermark drift + staged entrance */
.hero::before{content:"";position:absolute;left:-12%;bottom:-45%;width:64%;height:130%;background:radial-gradient(circle,color-mix(in srgb, var(--copper) 13%, transparent),transparent 62%);pointer-events:none}
@keyframes heroDrift{from{transform:translateY(0)}to{transform:translateY(-16px)}}
.hero-mono{animation:heroDrift 10s ease-in-out infinite alternate}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero .lk-hero,.hero .doctrine,.hero .wink,.hero .hero-cta,.hero .hero-sub{animation:riseIn .7s cubic-bezier(.2,.7,.2,1) both}
.hero .doctrine{animation-delay:.08s}.hero .wink{animation-delay:.16s}
.hero .hero-cta{animation-delay:.24s}.hero .hero-sub{animation-delay:.32s}
/* interior page heroes get the same, quicker */
.phero .phero-no,.phero h1,.phero .ph-sub,.phero .ph-cta,.phero .pills{animation:riseIn .55s cubic-bezier(.2,.7,.2,1) both}
.phero h1{animation-delay:.06s}.phero .ph-sub{animation-delay:.12s}
.phero .ph-cta,.phero .pills{animation-delay:.18s}

/* rooms: copper reveal bar + deeper lift */
.room{overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.room::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.room:hover::before{transform:scaleX(1)}
.room:hover{transform:translateY(-3px);box-shadow:0 14px 30px color-mix(in srgb, var(--graphite) 10%, transparent)}
.room-go{transition:color .18s,transform .18s}
.room:hover .room-go{color:var(--copper);transform:translateX(3px)}

/* cards & tiles: whisper of depth on hover */
.card2,.tile{transition:box-shadow .22s,border-color .22s}
.card2:hover,.tile:hover{box-shadow:0 10px 26px color-mix(in srgb, var(--graphite) 7%, transparent)}

/* quote: decorative opening mark */
.quote blockquote::before{content:"\201C";display:block;font-family:'Newsreader',Georgia,serif;font-size:clamp(48px,8vw,72px);line-height:.55;color:var(--copper);opacity:.5;margin-bottom:16px;font-style:normal}

/* FAQ: warm the question on hover */
.faq summary{transition:color .15s}
.faq summary:hover{color:var(--copper)}

/* footer links: gentle slide */
.fgrid a{transition:color .15s,transform .15s}
.fgrid a:hover{transform:translateX(3px)}

/* scroll reveal (motion.js adds html.js + .rv/.in; safe without JS) */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
html.js .rv.in{opacity:1;transform:none}

/* honour reduced motion for everything above */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html.js .rv{opacity:1;transform:none}
}
@media (hover:none){.room:hover{transform:none;box-shadow:none}.btn:hover{transform:none;box-shadow:none}}

/* ============================================================
   Shopify theme layer — commerce components
   ============================================================ */
/* a11y */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* nav cart count */
.navcart{gap:8px}
.cartcount{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;background:var(--copper);color:white;border-radius:999px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.cartcount.empty{background:var(--graphite-line-cool-3)}

/* package cards */
.pkg-img{margin:-24px -24px 18px;border-radius:12px 12px 0 0;overflow:hidden;border-bottom:1px solid var(--line)}
.pkg-img img{width:100%;height:190px;object-fit:cover;display:block;transition:transform .35s ease}
/* .room, not .room.pkg: the front page's room cards now carry .pkg-img
   too, and reuse the product card's hover-zoom rather than restating it. */
.room:hover .pkg-img img{transform:scale(1.03)}
.pkg-price{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:19px;color:var(--graphite);margin:6px 0 8px}
.dep-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--copper)}

/* product / booking page */
.pkg-hero-img{border-radius:14px;overflow:hidden;border:1px solid var(--line);margin-bottom:26px}
.pkg-hero-img img{width:100%;height:auto;display:block}
.pkg-grid{grid-template-columns:1.3fr 1fr;align-items:start}
.pkg-desc{margin-top:4px}
.pkg-included{margin-top:30px}
.pkg-composition{margin-top:30px}
.pkg-arrangements{margin-top:30px}
.incl{list-style:none;margin-top:14px;border-top:1px solid var(--line);max-width:560px}
.incl li{padding:10px 0 10px 24px;position:relative;color:var(--stone);font-size:14.5px;border-bottom:1px solid var(--line)}
.incl li:before{content:"";position:absolute;left:0;top:17px;width:8px;height:8px;border-radius:50%;background:var(--brass)}
.pkg-steps{margin-top:38px}
.bookcard{position:sticky;top:96px}
.bookprice{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:30px;color:var(--graphite);margin:10px 0 6px;letter-spacing:-.01em}
.bookprice .per{display:block;font-size:12px;font-weight:500;color:var(--stone);letter-spacing:.04em;margin-top:4px}
.bookfine{font-size:12.5px;color:var(--stone);margin-top:16px;line-height:1.55}
.rte{color:var(--graphite);font-size:15.5px;max-width:760px}
.rte p{margin:0 0 14px}
.rte h2,.rte h3{font-weight:600;margin:26px 0 10px}
.rte ul,.rte ol{margin:0 0 14px 20px}
/* :not(.btn) because .rte a (0,1,1) outranks .btn (0,1,0), so a button
   placed inside page prose rendered copper text on a copper fill -
   invisible. Found 2026-09-11 on the members' portal, where WooCommerce
   renders My Account inside the page's .rte wrapper, but it was never
   portal-specific: any .btn in any page body had it. Excluding the
   component here rather than raising .btn's specificity keeps
   .btn.ghost and .btn.dark correct too, since neither is white. */
.rte a:not(.btn){color:var(--copper);font-weight:600}
@media (max-width:900px){.pkg-grid{grid-template-columns:1fr}.bookcard{position:static}}

/* cart */
.cartlist{border-top:1px solid var(--line)}
.cartrow{display:grid;grid-template-columns:1fr 90px 130px;gap:18px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}
.cartinfo h3{font-size:18px;font-weight:600}
.cartinfo h3 a:hover{color:var(--copper)}
.cartvariant{font-size:12.5px;color:var(--copper);margin-top:4px;letter-spacing:.04em}
.cartprop{font-size:13.5px;color:var(--stone);margin-top:4px}
.cartprop span{font-weight:600;color:var(--graphite)}
.cartqty input{width:74px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:white;font-family:'JetBrains Mono',monospace;font-size:15px;text-align:center}
.cartprice{font-weight:700;font-size:16px;text-align:right;padding-top:10px}
.cartfoot{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,44px);margin-top:30px;align-items:start}
.cartnote label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);font-weight:600;margin-bottom:8px}
.cartnote textarea{width:100%;min-height:110px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:white;font-family:inherit;font-size:15px;resize:vertical}
.cartsummary{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px}
.cartsubtotal{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line);font-weight:600}
.cartsubtotal b{font-size:22px}
.cartsummary .btn{width:100%;margin-top:14px}
@media (max-width:760px){.cartrow{grid-template-columns:1fr 74px}.cartprice{grid-column:1/-1;text-align:left;padding-top:0}.cartfoot{grid-template-columns:1fr}}

/* pagination */
.pgn{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:38px;flex-wrap:wrap}
.pgn-count{font-size:13px;color:var(--stone)}
/* .page-numbers is WordPress's own class from paginate_links() (used
   here in .pgn) and WooCommerce's pagination template (see
   rowe-woocommerce-overrides.css) both emit - styling it once here
   covers every paginated list in the theme, not just one. Previously
   unstyled entirely, rendering as bare default browser links. */
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--graphite);text-decoration:none;transition:border-color .15s,background .15s,color .15s}
a.page-numbers:hover{border-color:var(--copper);color:var(--copper)}
.page-numbers.current{background:var(--copper);border-color:var(--copper);color:white}
.page-numbers.dots{border:0;background:transparent;color:var(--stone)}

/* search */
.searchform{max-width:560px}
.searchform .btn{width:auto;margin-top:16px}

/* ---------- membership comparison table (gun-site-handoff build) ---------- */
.mtable-wrap{overflow-x:auto;margin-top:clamp(24px,4vw,34px)}
.mtable{width:100%;border-collapse:collapse;min-width:640px;font-size:14.5px}
.mtable th,.mtable td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.mtable thead th{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--copper);font-weight:600;border-bottom:2px solid var(--line)}
.mtable tbody th{font-weight:600;color:var(--graphite);white-space:nowrap}
.mtable td{color:var(--stone)}
.mtable tbody tr:last-child td,.mtable tbody tr:last-child th{border-bottom:0}

/* ---------- Rowe Range full-bleed band (template-parts/range-intro.php) -----

   The source is a 4:3 aerial and there is no natively panoramic frame
   left in the shoot that isn't already in use elsewhere, so the band has
   to crop. Height is generous for that reason - letterboxing a 4:3 frame
   into a thin strip would have thrown away either the peaks or the
   facility, and the picture's whole job is showing both in one view.

   object-position drops below centre to hold the valley corridor and the
   platforms in frame, since the sky is the most expendable part.

   Selector is .rangeband .rangeband-img (0,2,0), not the bare class, on
   purpose. This band only ever renders on a product archive, where
   WooCommerce's own woocommerce-layout.css sets `.woocommerce img,
   .woocommerce-page img{height:auto}` at (0,1,1) - which outranks a
   single class and silently reverted the band to its intrinsic 1080px
   while leaving object-fit/object-position applied, so it looked like
   the height had simply been ignored. .pkg-img img survives the same
   rule only because (0,1,1) ties and this stylesheet is enqueued after
   WooCommerce's; don't rely on that for a new component. */
.rangeband{margin:0}
.rangeband .rangeband-img{display:block;width:100%;height:clamp(280px,44vw,600px);object-fit:cover;object-position:50% 58%}

/* ---------- product card crops (content-product.php stand-in imagery) -------

   .pkg-img img caps every card image at 190px and centre-crops it. Two of
   the stand-in frames don't survive a centred crop, so they get aimed:

   - shooting-packages is a group standing under a roof; centred, the crop
     took torsos and legs and cut every head off.
   - handgun-experiences is a range lawn shot with the target backstop
     across the upper third; centred, the card was grass and sky with no
     indication it was a range at all.

   Percentages are the vertical point of the SOURCE frame the crop centres
   on, so they only make sense against these specific files - which is why
   the class is the asset's own basename rather than a category name. */
.card-cat-shooting-packages{object-position:50% 34%}
.card-cat-handgun-experiences{object-position:50% 40%}

/* ---------- membership community photograph (page-memberships.php) ----------

   align-items:start matters: .split items stretch by default, and a
   stretched item gets a definite height, which beats the figure's
   aspect-ratio and would leave the frame the full height of the row.

   The <img> carries width/height attributes (rowe_theme_image reads them
   off the file). A specified height also beats aspect-ratio, so the
   image is sized height:100% of the ratio-box rather than being left to
   auto - the same class of bug that stretched the Shopify card grid.
   The source frame is portrait (2:3). Shown at its own ratio it ran 735px
   against a ~290px list and swamped the section, so it is cropped square
   and the text column is given the wider share. object-position sits
   above centre because the subjects occupy roughly the middle 32-74% of
   the frame, with more foreground grass below them than sky above - a
   centred square crop would trim the mountains and keep the grass. */
.minclude{grid-template-columns:1.15fr .85fr;align-items:start}
.mfig{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1/1}
.mfig-img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
@media (max-width:900px){.minclude{grid-template-columns:1fr}}

/* ---------- membership tier cards (.split3 on page-memberships.php) ----------

   The three cards are grid siblings and already stretch to equal height,
   but their contents were top-packed and independently laid out, which
   showed up as three separate misalignments (measured at 1440px):

   1. The "Most benefits" ribbon sat in normal flow, so the featured
      card's heading started 72px down and the other two at 35px - every
      heading, price and benefit row was 37px out of step across the row.
      Fixed by giving EVERY card a ribbon slot; non-featured cards get an
      invisible .ribbon-ghost with the same box metrics, so the reserved
      height tracks the ribbon's own font-size/padding instead of a magic
      number that would silently drift if the ribbon were restyled.
   2. The CTAs landed at 489/403/403px from their card tops, leaving up
      to 122px of dead space under the two short cards. margin-top:auto
      on a flex-column child pins all three to a shared baseline.
   3. The CTAs were 259/235/208px wide because each label carries its own
      tier name. Full-width buttons make the label length irrelevant.

   Scoped to .tiercard, not .card2 - the same class is a whole-card link
   in home.php and archive.php, where none of this applies. */
.tiercard{display:flex;flex-direction:column}
.tiercard .ribbon-slot{margin:0 0 10px}
.tiercard .ribbon-ghost{visibility:hidden}
.tiercard>.btn{margin-top:auto;width:100%}
/* Stacked single-column: each card is its own row, so there is no
   neighbour to align to and the reserved slot is just dead space. */
@media (max-width:900px){
  .tiercard .ribbon-slot:has(.ribbon-ghost){display:none}
}

/* ============================================================
   GUN SHOP — category landing, facet rail, retail catalogue rows.
   Added 2026-08-28 alongside inc/shop.php.

   Every colour here is a token (see ../ROWE-brand/BRAND.md). The raw
   hexes elsewhere in this stylesheet predate the no-raw-colors hook and
   are grandfathered; new code does not get to add to them.

   Composes from the existing primitives rather than restating them:
   tiles are .room/.pkg, the rail's submit is .btn, sections are .wrap.
   ============================================================ */

/* Landing tiles ------------------------------------------------ */

/* A category with no photographed product anywhere in it still needs a
   frame the same height as its neighbours, or the grid combs. The
   monogram sits on the dark house colour so a blank tile reads as
   deliberate brand furniture rather than a failed image load. */
.shopcat-blank {
	background: var(--graphite);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 190px;
}
.shopcat-blank img {
	width: 110px;
	height: 110px;
	opacity: .22;
}

/* The tile's headline is a count, so it wants the numeric face the rest
   of the build uses for figures. */
.shopcat h3 {
	font-family: var(--font-mono);
	font-size: 17px;
	letter-spacing: -.01em;
}

/* Shop layout -------------------------------------------------- */

.shoplayout {
	display: grid;
	grid-template-columns: minmax(210px, 250px) 1fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
	margin-top: clamp(20px, 3vw, 30px);
}

.shoprail {
	position: sticky;
	top: 16px;
}

/* Facet rail --------------------------------------------------- */

.facets {
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--paper);
	padding: 18px 18px 20px;
}

.facets-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

.facets-title {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--copper);
	margin: 0;
}

.facets-clear {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--stone);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.facets-clear:hover {
	color: var(--copper);
}

.facet {
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}
.facet:last-of-type {
	border-bottom: 0;
}

.facet-h {
	font-size: 13px;
	font-weight: 600;
	color: var(--graphite);
	margin: 0 0 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.facet-h-note {
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .04em;
	color: var(--stone);
	text-transform: none;
}

.facet-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

/* Category links and brand checkboxes share a row shape: label left,
   count right, whole row a 40px+ target. */
.facet-cat,
.facet-check {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 4px 6px;
	border-radius: 6px;
	font-size: 13.5px;
	color: var(--stone);
	cursor: pointer;
}
.facet-cat span:first-child,
.facet-check span:not(.facet-n) {
	flex: 1;
}

.facet-cat:hover,
.facet-check:hover {
	background: var(--bone);
	color: var(--graphite);
}

.facet-cat.is-on {
	background: var(--copper-tint);
	border: 1px solid var(--copper-tint-line);
	color: var(--copper-deep);
	font-weight: 600;
	padding: 3px 5px;
}

.facet-n {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--stone);
	flex: none;
}
.facet-cat.is-on .facet-n {
	color: var(--copper-deep);
}

.facet-check input {
	width: 16px;
	height: 16px;
	accent-color: var(--copper);
	flex: none;
	margin: 0;
}

/* The price inputs are labelled for screen readers only - the "Price"
   heading above them is the visible label, and repeating "Minimum
   price" in the rail would be noise.

   WooCommerce's own stylesheet happens to define this class, so the
   labels are hidden today whether or not this rule exists. Defining it
   here anyway: the alternative is an accessibility affordance that
   silently becomes two stray visible words the day someone dequeues
   WooCommerce's CSS, which is a normal thing for a custom theme to do. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Price -------------------------------------------------------- */

.facet-price {
	display: flex;
	align-items: center;
	gap: 8px;
}

.facet-price input {
	width: 100%;
	min-width: 0;
	/* 16px: anything smaller makes iOS Safari zoom the viewport on
	   focus, which on a filter rail throws the visitor's place away. */
	font-size: 16px;
	font-family: var(--font-mono);
	padding: 9px 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: white;
	color: var(--graphite);
}
.facet-price input:focus-visible {
	outline: 2px solid var(--copper);
	outline-offset: 1px;
}

.facet-dash {
	color: var(--stone);
	flex: none;
}

.facet-hint {
	margin-top: 8px;
	font-size: 12px;
	color: var(--stone);
}
.facet-hint .amount {
	font-family: var(--font-mono);
}

.facet-more summary {
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--copper);
	padding: 8px 6px 2px;
}
.facet-more summary:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.facets-apply {
	width: 100%;
	margin-top: 18px;
}

/* With JavaScript running, filters apply on change and this button is a
   fallback rather than the route through - so it drops to the quieter
   outline treatment instead of competing with the page's real CTAs. It
   stays visible and focusable on purpose: a keyboard user mid-edit
   should still have somewhere to land. */
.facets-apply.is-enhanced {
	background: transparent;
	border-color: var(--line);
	color: var(--stone);
}
.facets-apply.is-enhanced:hover {
	background: var(--bone);
	border-color: var(--stone);
	color: var(--graphite);
}

/* .rooms uses auto-FIT, which collapses empty tracks and lets a short
   final row stretch to fill the width. That is the right behaviour on
   the home page, where the rooms are a deliberate composition - and the
   wrong one here, where the number of photographed products in a
   category is an accident of which items have been shot.

   Firearms has exactly one, so auto-fit gave it an 846px-wide card
   holding a 190px-tall crop: a letterbox, and a visibly upscaled one.
   auto-FILL keeps the empty tracks, so a card is the same size whether
   its category has one photograph or twelve, and the sizes attribute in
   content-product.php can describe a width that is actually true. */
.rooms.pkgs.shopgrid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* Split heading between the photographed block and the rest ------ */

.shopsplit {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: clamp(28px, 4vw, 38px) 0 14px;
	padding-top: clamp(20px, 3vw, 26px);
	border-top: 1px solid var(--line);
	font-size: 15px;
	font-weight: 600;
	color: var(--graphite);
}

.shopsplit-note {
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .03em;
	color: var(--stone);
}

/* Catalogue rows ------------------------------------------------ */

.plist {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--paper);
}

.prow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--line);
	transition: background .15s;
}
.prow:last-child {
	border-bottom: 0;
}
.prow:hover {
	background: var(--bone);
}

.prow-main {
	min-width: 0;
}

.prow-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.prow-brand {
	color: var(--copper);
	font-weight: 500;
}
.prow-cat {
	color: var(--stone);
}

.prow-title {
	margin: 3px 0 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--graphite);
	line-height: 1.35;
}

.prow-side {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: none;
	text-align: right;
}

.prow-stock {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sage-deep-2);
	background: var(--sage-tint);
	border: 1px solid var(--sage-tint-line);
	border-radius: 5px;
	padding: 3px 8px;
	white-space: nowrap;
}
.prow-stock.is-out {
	color: var(--copper-deep);
	background: var(--copper-tint);
	border-color: var(--copper-tint-line);
}

.prow-price {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 15px;
	color: var(--graphite);
	white-space: nowrap;
}

/* Empty result state -------------------------------------------- */

.shopempty {
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--paper);
	padding: clamp(28px, 5vw, 44px);
	text-align: center;
}
.shopempty .muted {
	margin-left: auto;
	margin-right: auto;
}
.shopempty .btn {
	margin-top: 18px;
}

/* Responsive ---------------------------------------------------- */

@media (max-width: 900px) {
	.shoplayout {
		grid-template-columns: 1fr;
	}

	/* Unpinned, and each option list capped: a sixteen-category rail
	   plus ninety-seven brands would otherwise push the products
	   themselves off the bottom of a phone screen. */
	.shoprail {
		position: static;
	}
	.facet-list {
		max-height: 232px;
		overflow-y: auto;
	}

	.prow {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}
	.prow-side {
		width: 100%;
		justify-content: space-between;
		text-align: left;
	}
}

/* ============================================================
   TYPE BAND + BRAND INDEX — the two ways into a category that has
   sub-categories (Firearms: centrefire / rimfire / shotguns /
   handguns, plus by brand). Added 2026-08-28.
   ============================================================ */

.types {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.types-h {
	margin-top: 6px;
}

/* 160px, not 190: on a phone the difference is two columns rather than
   one, which halves how far a visitor scrolls past the type band before
   reaching an actual product. On desktop it changes nothing - five tiles
   fill the row either way. */
.typegrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
	gap: clamp(10px, 1.4vw, 14px);
	margin-top: clamp(18px, 2.5vw, 24px);
}

.typetile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
	min-height: 78px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: white;
	transition: border-color .15s, transform .15s, background .15s;
}
.typetile:hover {
	border-color: var(--copper);
	transform: translateY(-2px);
}

.typetile-name {
	font-size: 15.5px;
	font-weight: 600;
	color: var(--graphite);
	letter-spacing: -.01em;
}

.typetile-n {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: .04em;
	color: var(--stone);
}

/* The current type. Same copper tint the rail uses for an active
   category, so "where am I" reads identically in both places. */
.typetile.is-on {
	background: var(--copper-tint);
	border-color: var(--copper-tint-line);
}
.typetile.is-on .typetile-name,
.typetile.is-on .typetile-n {
	color: var(--copper-deep);
}

/* Brand is a different axis from type, not a fifth type - the dashed
   edge says "another way in" without needing a label to explain it. */
.typetile-alt {
	border-style: dashed;
	background: transparent;
}
.typetile-alt .typetile-name {
	color: var(--copper);
}

/* Rail: the branch you are inside -------------------------------- */

.facet-kids {
	margin: 2px 0 6px 10px;
	padding-left: 10px;
	border-left: 1px solid var(--line);
}
.facet-kids .facet-cat {
	font-size: 13px;
	min-height: 30px;
}

/* An ancestor of the current category: on the path, but not the thing
   being viewed. Weight alone, no fill - the fill belongs to .is-on, and
   two filled rows would read as two active categories. */
.facet-cat.is-path {
	color: var(--graphite);
	font-weight: 600;
}

/* Brand index ---------------------------------------------------- */

.brandgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
	gap: 10px;
	margin-top: 16px;
}

.brandtile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--paper);
	transition: border-color .15s, background .15s;
}
.brandtile:hover {
	border-color: var(--copper);
	background: white;
}

.brandtile-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--graphite);
	line-height: 1.3;
}

.brandtile-n {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--stone);
	flex: none;
}

/* ---------- Rowe Range: package cards --------------------------------

   A named shooting package leads with its composition instead of a
   photograph (see content-product.php for why: all eight share one
   stand-in frame). .featbox is a product-page component, so what follows
   is geometry only - its clamp(22px,4vw,34px) of padding is most of a
   280px grid column, and its rows stack four deep on John Wick. Colours,
   borders and the mono face still come from .featbox.light, so the card
   and the product page cannot drift into two different-looking
   renderings of the same field.

   Overrides .pkg-composition's margin-top:30px by source order at equal
   specificity, which is why this block sits at the end of the file. */

.pkg-composition-card {
	margin: 12px 0 2px;
	padding: 10px 14px;
	border-radius: 10px;
}

/* Qualified with .featbox.light, which is the ONLY way to win here:
   that rule sets background:var(--paper) at 0-2-0, so an unqualified
   .pkg-composition-card loses on specificity no matter how late it
   appears. --paper on a --paper card reads as a flat gap rather than an
   inset panel, so this one property has to be fought for.

   The white keyword, not a hex - the no-raw-colors hook rejects new hex
   literals, and .typetile already sets background:white for the same
   "lift a panel off --paper" reason. */

.featbox.light.pkg-composition-card {
	background: white;
}

.pkg-composition-card .row {
	gap: 10px;
	padding: 7px 0;
	font-size: 12.5px;
}

/* A package card opens on text, not a .pkg-img, so the title needs its
   own breathing room under the category label. */

.room.pkg-named h3 {
	margin-bottom: 10px;
}

/* Bond has two composition rows, John Wick has four. .rooms stretches
   every track to the tallest card, so without this the CTAs sit at four
   different heights across a row. margin-top:auto on a flex-column child
   pins them to a shared baseline. .room::before is absolutely positioned
   and unaffected; .room-go keeps a content-width box so its hover
   translateX still reads. */

.rooms .room.pkg-named {
	display: flex;
	flex-direction: column;
}

.room.pkg-named .room-go {
	margin-top: auto;
	align-self: flex-start;
}

/* ---- Retail specifications ------------------------------------------
   Added for the technical-data block on Pro Shop retail products
   (product-retail.php). Everything structural is reused: the spec rows
   themselves are .featbox.light, the same mono label/value component the
   experience composition box uses, and the reticles are .tiles/.tile.
   What follows is only what those components do not already provide.
   Every colour is a token; no new tokens were needed. */

/* Factual chips - "First focal plane", "34 mm tube". Deliberately NOT
   .statusbar, which is the same shape but carries a ::before dot: a
   status dot reads as availability, and "34 mm tube" is not a status. */
.specbadges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: clamp(16px, 3vw, 22px) 0 0;
}

.specbadge {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--stone);
	background: var(--mist);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 6px 12px;
}

.specs {
	margin-top: clamp(28px, 4vw, 40px);
}

/* The group heading sits tight to its own table and clear of the one
   above, so three stacked .featbox tables read as three groups rather
   than one long list. */
.spec-group {
	margin: clamp(18px, 3vw, 26px) 0 10px;
}

.specs .featbox.light + .spec-group {
	margin-top: clamp(22px, 3.5vw, 30px);
}

/* Gallery: one viewer, a strip of thumbnails under it.

   The viewer is pinned to an aspect ratio with contain, because the
   images it swaps between are not the same shape - cut-out product
   photography is wide, a dimensioned drawing is not - and letting each
   set its own height makes the whole right-hand column jump every time
   a thumbnail is clicked. */
.pkg-media {
	margin-bottom: 26px;
}

.pkg-media .pkg-hero-img {
	margin-bottom: 10px;
}

.pkg-media .pkg-hero-img img {
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: contain;
	background: var(--paper);
}

.pkg-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr));
	gap: 10px;
	list-style: none;
	margin: 0;
}

/* height:100% against the grid's stretched row, so the one thumbnail
   carrying a caption does not stand taller than the rest of the strip. */
.pkg-thumb {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	box-sizing: border-box;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 8px;
	text-decoration: none;
	transition: border-color .15s ease;
}

.pkg-thumb img {
	display: block;
	width: 100%;
	height: 62px;
	object-fit: contain;
}

.pkg-thumb:hover {
	border-color: var(--copper-line);
}

/* Focus is drawn on the link itself rather than left to the UA outline,
   which a 1px --line border on --paper otherwise swallows. */
.pkg-thumb:focus-visible {
	outline: 2px solid var(--copper);
	outline-offset: 2px;
}

/* The selected thumbnail. Border weight AND fill, not colour alone - the
   copper-on-paper difference is too quiet to carry the state on its own,
   and colour by itself is not something everyone can read. */
.pkg-thumb[aria-current="true"] {
	border-color: var(--copper);
	box-shadow: inset 0 0 0 1px var(--copper);
	background: var(--copper-tint);
}

.pkg-thumb-cap {
	display: block;
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--stone);
	text-align: center;
	margin-top: 5px;
}

.reticles {
	margin-top: clamp(28px, 4vw, 40px);
}

.reticle-note {
	color: var(--stone);
	font-size: 14.5px;
	margin-top: 10px;
}

/* Reticle diagrams are fine black line art on transparency, so they need
   a light plate under them and room to breathe - dropped straight into
   .tile they collapse to a grey smudge. */
.reticle-tile img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: contain;
	background: white;
	border-radius: 8px;
}

.reticle-tile h3 {
	margin-top: 10px;
	font-family: var(--font-mono);
	font-size: 14px;
	letter-spacing: .06em;
}

/* .bookprice is 30px mono, sized for "R 12 500". "Talk to the Pro Shop"
   is a sentence and has to come down to read as one. */
.bookprice.ask {
	font-size: clamp(17px, 3vw, 19px);
	letter-spacing: 0;
	line-height: 1.35;
}

.related-units {
	margin-top: 20px;
	border-top: 1px solid var(--line);
	padding-top: 4px;
}

.related-units .row p {
	font-size: 14px;
}

.related-units .row p span {
	color: var(--stone);
	font-size: 13px;
}

@media (max-width: 900px) {
	.pkg-gallery {
		grid-template-columns: repeat(4, 1fr);
	}

	.pkg-thumb img {
		height: 52px;
	}

	.reticle-tile img {
		height: 130px;
	}
}

/* Brand blurb above the results (shop-brand-blurb.php). .featbox.light
   supplies the panel; this only gives it room and stops the mono face
   .featbox sets from reaching the prose inside it. */
.brandblurb {
	margin-bottom: clamp(18px, 3vw, 26px);
}

.brandblurb .h {
	margin-bottom: 8px;
}

.brandblurb .rte {
	font-family: var(--font-body);
}