/* Shared design tokens + the few reusable pieces (grain, social rail, modals).
   Everything else stays inline per the design reference. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:optional;src:url('/fonts/anton-latin-400.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:optional;src:url('/fonts/archivo-latin-variable.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:italic;font-weight:400 900;font-display:optional;src:url('/fonts/archivo-latin-variable-italic.woff2') format('woff2')}
@font-face{font-family:'Doto';font-style:normal;font-weight:900;font-display:optional;src:url('/fonts/doto-latin-900.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:optional;src:url('/fonts/ibm-plex-mono-latin-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:optional;src:url('/fonts/ibm-plex-mono-latin-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:optional;src:url('/fonts/ibm-plex-mono-latin-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:optional;src:url('/fonts/ibm-plex-mono-latin-700.woff2') format('woff2')}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:400;font-display:optional;src:url('/fonts/pt-serif-latin-400.woff2') format('woff2')}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:700;font-display:optional;src:url('/fonts/pt-serif-latin-700.woff2') format('woff2')}
@font-face{font-family:'PT Serif';font-style:italic;font-weight:400;font-display:optional;src:url('/fonts/pt-serif-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'PT Serif';font-style:italic;font-weight:700;font-display:optional;src:url('/fonts/pt-serif-latin-700-italic.woff2') format('woff2')}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden;overflow-x:clip}
body{background:#ffffff;color:#111110;font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.modal-open{overflow:hidden}
a{color:#111110;text-decoration:none}
a:hover{color:#6b6b66}
/* Kill double-tap-zoom tap delay/quirks on interactive elements — the mobile
   pages are wall-to-wall link tiles, so tap handling must be unambiguous.
   Scrolling is unaffected (manipulation permits pan + pinch). */
a,button,input,textarea,select,[role="button"]{touch-action:manipulation}
/* Site media is decorative or link-wrapped, never a touch target itself:
   taps fall through to the wrapping link (or to nothing), so webviews can
   never hand a decorative video to the native player or pop the long-press
   save/preview callout on imagery. */
a img,a video,video[aria-hidden="true"],[data-glitch-media],[data-glitch-media] img,[data-glitch-media] video{pointer-events:none}
img,video{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.ambient-loop{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[role="button"]:focus-visible{outline:2px solid #0a3cfd;outline-offset:3px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;top:8px;left:8px;z-index:1000;background:#0a3cfd;color:#ffffff;padding:10px 14px;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;transform:translateY(-150%)}
.skip-link:focus{transform:none;color:#ffffff}
@keyframes bgn-disclosure-bob{0%,70%,77%,82%,100%{transform:translateY(0)}74%{transform:translateY(-6px)}79%{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
@media (prefers-reduced-motion:reduce){.ambient-loop{display:none!important}}

.mark-scale{overflow:visible;filter:drop-shadow(0 2px 1.5px rgba(17,17,16,.2))}
.bgn-loop-viewport{overflow:hidden;overflow:clip;touch-action:pan-y}
.bgn-loop-track{display:flex;width:max-content;will-change:transform}
.goon-scroll-section{width:100%;padding:12px 0 8px}
.goon-scroll-viewport{height:191px}
/* whole-masthead desktop gate (store page carries the global header on
   desktop only; mobile store stays a lean feed). !important beats the
   partial's inline display:flex. */
.hdr-desktop-only{display:none !important}
@media (max-width:430px){
  .mast-main{display:grid !important;grid-template-columns:minmax(0,1fr);padding:6px 12px 8px !important}
  .mast-logo{grid-column:1;grid-row:1;justify-self:center;margin-left:0 !important}
  .soc-rail{position:static !important;grid-column:1;grid-row:2;width:100% !important;height:44px !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:4px !important;padding:0 !important}
  .soc{width:44px !important;height:44px !important}
  .soc-bar{position:static !important;transform:none !important;width:44px;height:44px;padding:0 !important;justify-content:center}
  .soc-ic{width:44px;height:44px;align-items:center}
}

/* Desktop (≥1024px): proportionally scale the approved 430px layout — type,
   thumbs, and spacing grow together (Ryan, 2026-07-21). min-height compensates
   for zoom so a short page still fills one screen, not 1.3 of them. */
@media (min-width:1024px){
  /* --bgn-edge: the calculated edge inset (Ryan 2026-07-27). The whole
     composition (rail, mark, socials, sidebar, content grids) lives inside
     a frame capped at 1300 layout px; on wider screens the frame centers,
     pulling every edge-pinned element inward in lockstep. 100vw/--dz
     converts real viewport px to pre-zoom layout px. */
  :root{--dz:1.3;--bgn-edge:max(28px, calc((100vw / var(--dz) - 1300px) / 2))}
  body{overflow-x:hidden;overflow-x:clip}
  .zoomable{zoom:var(--dz);min-height:77vh !important}
  .mast-col{max-width:100% !important}
  /* mark and socials retain the original shared site-frame landmarks */
  .soc-rail{width:calc(var(--bgn-edge) + 32px) !important;padding-right:var(--bgn-edge) !important}
  .mast-logo{width:196px !important;height:137.6px !important;margin-left:calc(var(--bgn-edge) - 8px) !important}
  .mast-logo .mark-scale{transform:scale(1.2645)}
  /* store grid on desktop: 4 tiles per row, natural page flow (the nested
     scroll-tease height retired 2026-07-26) */
  #store-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  .hdr-desktop-only{display:flex !important}
}

@media (prefers-reduced-motion:reduce){
  .bgn-loop-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;touch-action:pan-x pan-y}
  .site-ticker .bgn-loop-track{transform:none!important}
}

/* vertical social rail: hover slides out a mono uppercase label */
.soc{position:relative;display:block;width:32px;height:24px}
.soc-bar{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding:5px 0;background:transparent;color:#111110;transition:background .28s cubic-bezier(.4,0,.2,1),color .28s cubic-bezier(.4,0,.2,1),padding .28s cubic-bezier(.4,0,.2,1)}
.soc-ic{display:inline-flex;flex:none;width:32px;justify-content:center}
.soc-lbl{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:9px;letter-spacing:.16em;text-transform:uppercase;transition:max-width .28s cubic-bezier(.4,0,.2,1),opacity .22s ease .04s,margin-left .28s cubic-bezier(.4,0,.2,1)}
/* hover-capable devices only — touch taps just navigate, no label pop */
@media (hover:hover) and (pointer:fine){
  .soc:hover .soc-bar,.soc:focus-visible .soc-bar{background:#111110;color:#ffffff;padding:5px 10px 5px 7px}
  .soc:hover .soc-lbl,.soc:focus-visible .soc-lbl{max-width:92px;opacity:1;margin-left:5px}
}

/* modals (electric blue) */
.modal-backdrop{position:fixed;inset:0;z-index:60;background:rgba(17,17,16,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px}
.modal-backdrop[hidden]{display:none}
.modal-panel{width:100%;background:#0a3cfd;color:#ffffff;padding:32px 28px 26px;position:relative;box-shadow:0 30px 80px rgba(10,26,120,.5)}
.modal-close{position:absolute;top:10px;right:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;color:#a9bcff;font-family:'IBM Plex Mono',monospace;font-size:15px;line-height:1;cursor:pointer}
.modal-close:hover{color:#ffffff}
.modal-input{width:100%;box-sizing:border-box;background:#ffffff;border:1px solid rgba(17,17,16,.15);color:#111110;padding:13px 14px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;outline:none}
.modal-input:focus{border:1px solid rgba(17,17,16,.5)}
textarea.modal-input{resize:none;line-height:1.5}
.modal-btn{width:100%;background:#111110;color:#ffffff;border:none;padding:13px 0;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.modal-btn:hover{background:#000000}
.modal-btn-secondary{box-shadow:inset 0 0 0 1px #a9bcff;background:transparent;color:#ffffff}
.modal-btn-secondary:hover{background:rgba(255,255,255,.1);color:#ffffff}
.modal-error{margin-top:10px;text-align:center;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#ffd3d3}
.modal-error:empty{display:none}
.js-recall-toggle:hover{color:#ffffff}
.modal-kicker{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#eef2ff}
.modal-title{margin-top:8px;font-family:'Archivo',sans-serif;font-weight:700;font-size:23px;line-height:1.1}
.modal-description,.modal-result p{margin:10px 0 0;font-family:'Archivo',sans-serif;font-style:italic;font-size:13px;line-height:1.5;color:#d3dcff}
.modal-form{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.modal-legal{margin:12px 0 0;text-align:center;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:9px;line-height:1.45;letter-spacing:.1em;text-transform:uppercase;color:#eef2ff}
.modal-legal a{color:#ffffff;text-decoration:underline;text-underline-offset:3px}
.modal-text-button{display:block;margin:14px auto 0;padding:8px;border:0;background:transparent;color:#eef2ff;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:9px;letter-spacing:.16em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.modal-result{padding:12px 0 4px;text-align:center;outline:none}
.modal-result-title{font-family:'Archivo',sans-serif;font-weight:700;font-size:20px;letter-spacing:.02em}
@media (max-width:1023px){
  .modal-close{top:4px;right:4px;width:44px;height:44px;color:#eef2ff}
  .modal-input{font-size:16px;letter-spacing:.02em}
  .modal-btn{min-height:44px}
  .modal-panel [style*="color:#a9bcff"]{color:#eef2ff !important}
}

/* ── Nav system (design_handoff_nav_system, 2026-07-24) ─────────────────── */
/* rail glitch keyframes */
@keyframes bgn-railjit{0%,100%{transform:translate(0,0)}18%{transform:translate(-1.2px,.4px)}34%{transform:translate(1.6px,-.6px) skewX(.5deg)}52%{transform:translate(-.8px,.8px)}68%{transform:translate(1.1px,.3px) skewX(-.4deg)}84%{transform:translate(-1.5px,-.4px)}}
@keyframes bgn-railroll{0%{top:-18%}100%{top:118%}}
@keyframes bgn-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* floating rail: desktop only */
.bgn-rail{display:none}
@media (min-width:1024px){.bgn-rail{display:flex}}
/* console rail (handoff_nav01_device 2026-07-25): channel links hover BLUE;
   inactive category/stop labels hover ink */
.rail-link:hover{text-decoration:underline;text-underline-offset:3px}
.rail-sub:hover .rs-label{color:#111110}
.rail-sub:hover{color:#111110 !important}
.rail-cat:not(.on):hover .rc-label{color:#111110}
#rail-news-toggle:hover{color:#111110}
/* The rail's compact typography should not require precision clicking. These
   transparent extensions fill the visual gaps between rows without changing
   the card's layout or its protected float/glitch motion. */
.rail-cat,.rail-link,.rail-sub{position:relative}
.rail-cat::before,.rail-sub::before,.rail-link::before{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}
.rail-link::before{top:-7.5px;bottom:-7.5px}
@keyframes bgnFlicker{0%{opacity:1}25%{opacity:.3}50%{opacity:.85}75%{opacity:.45}100%{opacity:1}}
.bgn-flicker{animation:bgnFlicker .18s steps(2,end)}
/* sensory layer (2026-07-26): rows are physical keys — a half-pixel hover
   lift with a whisper of shadow (raised), press depression pushes them back
   in (release fires the flicker via the click handler); additive blue focus
   ring on the rail search — border stays black */
@media (hover:hover) and (pointer:fine){
  .rail-cat,.rail-link,.rail-sub{transition:transform .12s ease,filter .12s ease}
  .rail-cat:hover,.rail-link:hover,.rail-sub:hover{transform:translateY(-.5px)}
}
.rail-cat:active{transform:translateY(1px);filter:brightness(.55)}
/* desktop store: categories + search feedback live in the rail now */
@media (min-width:1024px){.store-catnav{display:none !important}#search-status{display:none !important}}
@media (max-width:1023px){.store-catnav{width:100vw;margin-left:calc(50% - 50vw)}}
.mobile-scroll-shell{position:relative;background:#111110}
.mobile-scroll-shell::after{content:'→';position:absolute;right:0;top:0;bottom:0;width:46px;display:flex;align-items:center;justify-content:flex-end;padding-right:12px;background:linear-gradient(90deg,rgba(17,17,16,0),#111110 58%);color:#ffffff;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:13px;pointer-events:none;transition:opacity .15s ease}
.mobile-scroll-shell.is-scroll-end::after{opacity:0}
.mobile-scroll-rail{scrollbar-width:none}
.mobile-scroll-rail::-webkit-scrollbar{display:none}

/* mobile bottom tab bar (+ its content spacer): mobile only.
   Theme via --tb-* (default White; add .tabbar-ink on <body> for Ink). */
:root{--tb-bg:#ffffff;--tb-line:#e8e7e1;--tb-on:#111110;--tb-off:#5f5e59}
.tabbar-ink{--tb-bg:#111110;--tb-line:#111110;--tb-on:#ffffff}
.bgn-tabbar{display:flex}
.tab-spacer{height:74px}
@media (min-width:1024px){.bgn-tabbar{display:none}.tab-spacer{height:0}}
a.tab-link:hover{color:var(--tb-on) !important}

/* Compliance + utility surfaces keep the publication voice without competing
   with the primary editorial/store content. */
.affiliate-note{width:100%;padding:10px 24px;border-bottom:1px solid #e8e7e1;font-family:'Archivo',sans-serif;font-size:12px;line-height:1.45;color:#4d4d49}
.affiliate-note strong{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#111110}
.store-affiliate-disclosure{position:relative;width:100%;margin:0;padding:10px 24px 12px;border-bottom:1px solid #e8e7e1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px;align-items:end}
.store-affiliate-disclosure-art{display:block;grid-column:3;width:100%;height:auto}
/* Found-object prop: the pink STORE bag hangs in the header band, tucked
   BEHIND the divider — the band is a clip window ending 1px above the rule,
   so the line always reads over the bag and nothing spills onto products.
   bag-prop.js slides the img down inside the window on scroll (subtle
   movement that ends when the dead space leaves the viewport). Never given
   pointer-events — clicks pass straight through. */
.store-bag-prop-band{position:absolute;inset:0 0 1px 0;overflow:hidden;pointer-events:none;z-index:2}
.store-bag-prop{position:absolute;left:50%;top:0;width:calc((100% - 84px)*.307);height:auto;transform:translateX(-56%) translateY(-17%) rotate(7deg);user-select:none}
/* The compact footer starts immediately below Goon Scroll. Its clip edge
   keeps the transparent disclosure pack tucked behind the mobile tab bar. */
.site-footer{position:relative;overflow:hidden;width:100%;max-width:680px;min-height:150px;margin:0 auto -24px;padding:12px 24px calc(86px + env(safe-area-inset-bottom));color:#5f5e59}
.site-footer-disclosure{position:absolute;right:24px;bottom:-44px;width:230px;max-width:calc(100% - 48px);margin:0;animation:bgn-disclosure-bob 8s ease-in-out infinite;will-change:transform}
.site-footer-disclosure-art{display:block;width:100%;height:auto}
.footer-ask{position:absolute;left:24px;bottom:78px;z-index:3;min-height:44px;padding:10px 13px;border:1px solid #111110;background:#ffffff;color:#111110;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.footer-ask:hover{background:#111110;color:#ffffff}
/* Privacy = a sideways white tab coming out of the screen's right wall on
   EVERY viewport (utility row retired 2026-07-28; Ryan-approved full-bleed
   exception #3 in DESIGN_CONTRACT). Hairline on top/left/bottom, static
   (never bobs), centered on the resting pack's visible midline.
   Rotated 180° so the type reads bottom-up (sideways-lr isn't safe on older
   iOS Safari); the missing border is LEFT pre-rotation so the open side
   still faces the wall after the flip. */
.privacy-tab{position:absolute;right:0;bottom:75px;transform:translateY(50%) rotate(180deg);z-index:2;writing-mode:vertical-rl;background:#ffffff;border:1px solid #111110;border-left:0;padding:7px 5px;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#111110;text-decoration:none}
.privacy-tab::before{content:"";position:absolute;inset:-12px -14px}
.privacy-page{width:100%;max-width:680px;margin:0 auto;padding:34px 24px 10px}
.privacy-page h1{margin:6px 0 0;font-family:'Anton',sans-serif;font-size:54px;line-height:1;text-transform:uppercase;font-weight:400}
.privacy-kicker,.privacy-updated{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#5f5e59}
.privacy-page h2{margin:30px 0 8px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.privacy-page p{margin:0;font-family:'PT Serif',Georgia,serif;font-size:16px;line-height:1.65}
.privacy-page p a{text-decoration:underline;text-underline-offset:3px}
/* Privacy is a reading surface inside the global desktop chrome. Shift only
   its text column one optical step right of center; the protected rail stays
   on its shared anchor. The max() also guarantees breathing room beside the
   rail at the narrowest desktop widths. */
@media (min-width:1024px){
  body[data-page="privacy"] .privacy-page{
    width:680px;
    max-width:calc(100% - 280px);
    margin-left:max(calc(var(--bgn-edge,28px) + 244px),calc(50% - 276px));
    margin-right:0;
  }
}
.store-product-name{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:12px;line-height:1.25;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.store-product-link{display:flex;flex-direction:column;gap:6px;color:#111110}
.store-product-brand{font-family:'IBM Plex Mono',monospace;font-size:8.5px;line-height:1.25;letter-spacing:.12em;text-transform:uppercase;color:#6b6b66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-product-description{font-family:'Archivo',sans-serif;font-style:italic;font-weight:400;font-size:12px;line-height:1.4;color:#5f5e59;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:2.8em}
.store-product-card{content-visibility:auto;contain-intrinsic-size:auto 240px}
.store-product-card[hidden]{display:none!important}
.store-save{align-self:flex-start;min-height:32px;margin-top:auto;padding:6px 8px;border:1px solid #c9c7c1;background:#ffffff;color:#111110;font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.store-save[aria-pressed="true"]{border-color:#0a3cfd;background:#0a3cfd;color:#ffffff}
.store-top-pick{align-self:flex-start;background:#111110;color:#ffffff;padding:4px 6px;font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.store-product-why{margin:2px 0 0;font-family:'Archivo',sans-serif;font-size:11px;line-height:1.4;color:#3d3d3a}
.store-tools{display:grid;gap:12px;padding:18px 24px 4px;border-bottom:1px solid #e8e7e1}
.store-tools label{display:grid;gap:5px;font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#5f5e59}
.store-search-row{display:flex;gap:8px}
.store-search-row input,.store-filter-row select{width:100%;min-width:0;height:44px;border:1px solid #111110;border-radius:0;background:#ffffff;color:#111110;padding:0 11px;font-family:'IBM Plex Mono',monospace;font-size:16px}
.store-search-row button{min-width:74px;min-height:44px;border:1px solid #111110;background:#111110;color:#ffffff;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.store-filter-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.store-filter-row select{font-size:12px}
.store-favorites-toggle{justify-self:start;min-height:40px;padding:8px 10px;border:1px solid #111110;background:#ffffff;color:#111110;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.store-favorites-toggle[aria-pressed="true"]{background:#111110;color:#ffffff}
.store-results-summary{min-height:1.35em;margin:0;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#6b6b66}
.store-membership-note{margin:0;padding:10px 0 12px;border-top:1px solid #e8e7e1;font-family:'Archivo',sans-serif;font-size:12px;line-height:1.45;color:#5f5e59}
.store-membership-note button{border:0;background:transparent;color:#111110;padding:0;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.store-more{display:block;align-self:center;min-width:190px;min-height:48px;margin:22px auto 8px;border:1px solid #111110;background:#ffffff;color:#111110;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.store-more[hidden]{display:none}
@media (max-width:390px){:root{--store-cols:2}}
/* Match the visible 430px link column below: its 24px side padding leaves a
   382px content edge, which is the line the countdown should share. */
.launch-countdown{width:calc(100% - 48px);max-width:382px;margin:18px auto 8px;padding:22px 20px;background:#111110;color:#ffffff;text-align:center}
.launch-countdown-kicker{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#a9bcff}
.launch-countdown h2{margin:8px 0 0;font-family:'Anton',sans-serif;font-weight:400;font-size:31px;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.launch-countdown p{max-width:430px;margin:12px auto 0;font-family:'Archivo',sans-serif;font-style:italic;font-size:13px;line-height:1.5;color:#d3dcff}
.launch-countdown-clock{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:18px auto 0;max-width:430px;background:#4a4a47}
.launch-countdown-clock span{display:flex;flex-direction:column;gap:4px;padding:12px 4px;background:#ffffff;color:#111110}
.launch-countdown-clock strong{font-family:'Doto','IBM Plex Mono',monospace;font-size:29px;line-height:1;font-variant-numeric:tabular-nums}
.launch-countdown-clock small{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase}
.launch-countdown-actions{display:flex;gap:8px;justify-content:center;margin-top:18px}
.launch-countdown-primary,.launch-countdown-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:11px 15px;border:1px solid #ffffff;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.launch-countdown-primary{background:#ffffff;color:#111110}
.launch-countdown-primary:hover{background:#eceae4;color:#111110}
.launch-countdown-secondary{background:transparent;color:#ffffff}
.launch-countdown-secondary:hover{background:#ffffff;color:#111110}
.launch-countdown-live{background:#0a3cfd}
@media (min-width:1024px){.launch-countdown{margin-top:24px}}
@media (min-width:1024px){
  /* Every public footer keeps its centered rule + utility links, while the
     disclosure artwork shares the midpoint of the 220px news stack column. */
  .store-affiliate-disclosure{grid-template-columns:repeat(4,minmax(0,1fr))}
  .store-affiliate-disclosure-art{grid-column:4}
  /* Desktop: sit above the middle grid columns (row-1 slots 2–3). Width uses
     the same column formula as the disclosure sign's grid track — padding 48
     + gaps 54 — so bag and sign resize in exact lockstep on any monitor. */
  .store-bag-prop{width:calc((100% - 102px)*.193)}
  /* The compact footer geometry carries through from mobile. */
  .site-footer{max-width:none;margin-bottom:0;padding-bottom:28px;border-top:0}
  .site-footer-disclosure{right:calc(var(--bgn-edge,28px) - 59px);z-index:1}
  .footer-ask{left:calc(var(--bgn-edge,28px) + 244px);bottom:40px}
  .affiliate-note{padding-left:0;padding-right:0}
  /* Homepage: pull the bottom-anchored pack toward GOON SCROLL by removing
     only the empty chamber around it. The pack's crop, bob, horizontal
     alignment, disclosure horizon, divider, and utility-link anchors stay
     unchanged. */
  body[data-page="home"] .site-footer{min-height:160px;margin-top:0}
  /* Home uses the same 196px axis for its protected menu, right story stack,
     and cigarette-pack disclosure. The matching edge insets keep the pack's
     visible right edge inside the shared BGN/social site frame. */
  body[data-page="home"] .site-footer-disclosure{right:var(--bgn-edge,28px);width:196px}
}
@media (min-width:1440px){
  /* At the wide-news breakpoint the stack grows to 300px, so its midpoint
     moves 40px right; the disclosure remains locked to that same axis. */
  .site-footer-disclosure{right:calc(var(--bgn-edge,28px) - 19px)}
}

/* store desktop: category cluster centered (Ryan 2026-07-23). Grid spans
   OPTICAL symmetry (Ryan 2026-07-26): the menu is content, not margin, so
   the EMPTINESS balances — left void (36 page→rail + ~62 rail→grid ≈ 98px)
   mirrors the right margin (~97px). Tile left edge: 272 layout px (rail
   right 224 + 48 gutter); right: 75 layout. Padding = those minus the
   grid's own 24px. The old 600px cap stays retired; tiles grow with the
   viewport (350px at 1920). */
@media (min-width:1024px){
  .cat-items{justify-content:center !important;gap:44px !important}
  /* offsets ride --bgn-edge (248 = 28+220, 51 = 28+23) so the store grid
     tracks the rail inward on big screens, voids still mirrored */
  .store-col{max-width:none !important;padding-left:calc(var(--bgn-edge) + 220px);padding-right:calc(var(--bgn-edge) + 23px)}
}