/* ==========================================================================
   Glyphnests Blueprint — editorial grid design system
   Tokens, utilities, components. Mobile-first breakpoints: 1120 / 820 / 640
   ========================================================================== */

:root{
  --ink:#080A1E;          /* primary text / structural hairlines */
  --ink-2:#23263D;        /* body copy */
  --muted:#6B7280;        /* meta / mono labels */
  --accent:#3C66DD;       /* brand accent — swap this one value to rebrand */
  --accent-deep:#1E2C8C;  /* hover + icon stroke */
  --accent-wash:#EDF1FD;  /* highlighted grid cells */
  --rule:#E4E6EF;         /* light hairline */
  --paper:#FFFFFF;
  --navy:#0B1030;         /* dark bands + footer */
  --navy-2:#141A45;       /* dark band tiles */
  --page:1360px;
  --gutter:40px;
}

/* ---------- reset-ish ---------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink)}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-deep)}

/* ---------- type ---------- */
.gn-page h1,.gn-page h2,.gn-page h3,.gn-page h4{font-family:'Space Grotesk',sans-serif;color:inherit}
.gn-foot h4,.gn-foot .gn-foot-h{font-family:'JetBrains Mono',monospace}
.ui{font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif}
.mono{font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace}
.meta{font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
      font-size:11px;letter-spacing:.06em;color:var(--muted)}
.fig{font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
     font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* ---------- layout utilities ---------- */
.fx{display:flex}.col{flex-direction:column}.grid{display:grid}
.ac{align-items:center}.jc{justify-content:center}.jb{justify-content:space-between}
.f1{flex:1}.noshrink{flex-shrink:0}.wrap{flex-wrap:wrap}
.tc{text-align:center}.upper{text-transform:uppercase}.nowrap{white-space:nowrap}
.m0{margin:0}.w100{width:100%}.pointer{cursor:pointer}
.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap20{gap:20px}
.gap24{gap:24px}.gap28{gap:28px}.gap40{gap:40px}

/* ---------- page shell ---------- */
.gn-page{width:100%;max-width:var(--page);margin:0 auto;background:var(--paper);color:var(--ink)}
.gn-sec{border-bottom:1px solid var(--ink)}
.gn-pad{padding:40px var(--gutter)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.gn-util{height:34px;padding:0 var(--gutter);border-bottom:1px solid var(--rule);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;
  color:var(--muted);display:flex;align-items:center;gap:24px}
.gn-util-b{margin-left:auto;color:var(--accent-deep)}

.gn-bar{height:66px;padding:0 var(--gutter);border-bottom:1px solid var(--ink);
  display:flex;align-items:center;gap:28px}
.gn-logo{display:flex;align-items:center;flex-shrink:0;line-height:0}
.gn-logo-mark{width:22px;height:22px;border:2px solid var(--accent);position:relative;flex-shrink:0}
.gn-logo-mark::after{content:"";position:absolute;inset:4px;border:2px solid var(--accent-deep)}
.gn-logo-text{font-family:'Space Grotesk',sans-serif;font-size:19px;letter-spacing:-.03em;
  color:var(--ink);font-weight:500;margin-left:9px}
.gn-logo-text b{font-weight:700}

.gn-nav{display:flex;gap:24px;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.gn-nav a{padding:11px 0 3px;color:var(--muted);border-bottom:2px solid transparent}
.gn-nav a:hover,.gn-nav a.is-active{color:var(--ink);border-bottom-color:var(--accent)}

.gn-tools{margin-left:auto;display:flex;align-items:center;gap:14px}
.gn-search{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;
  border:1px solid var(--rule);width:250px;background:var(--paper)}
.gn-search input{border:0;outline:0;font-family:'Space Grotesk',sans-serif;font-size:13px;
  width:100%;background:transparent;color:var(--ink)}
.gn-search input::placeholder{color:var(--muted)}
.gn-icon-btn{position:relative;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--rule);color:var(--ink)}
.gn-icon-btn:hover{border-color:var(--ink)}
.gn-badge{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;padding:0 4px;
  background:var(--accent);color:#fff;border-radius:9px;font-family:'JetBrains Mono',monospace;
  font-size:10px;display:flex;align-items:center;justify-content:center}
.gn-cart{display:flex;align-items:center;gap:10px;height:38px;padding:0 16px;
  background:var(--ink);color:#fff;font-family:'JetBrains Mono',monospace;font-size:12px}
.gn-cart:hover{color:#fff;background:var(--accent-deep)}
.gn-burger{display:none;width:38px;height:38px;border:1px solid var(--rule);
  align-items:center;justify-content:center;background:none;cursor:pointer}

/* mobile drawer */
.gn-drawer{position:fixed;inset:0;z-index:9999;display:none}
.gn-drawer.is-open{display:block}
.gn-drawer-veil{position:absolute;inset:0;background:rgba(8,10,30,.45)}
.gn-drawer-panel{position:absolute;top:0;left:0;bottom:0;width:min(86vw,340px);
  background:var(--paper);padding:22px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.gn-drawer-panel a{padding:13px 0;border-bottom:1px solid var(--rule);color:var(--ink);
  font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.gn-drawer-close{align-self:flex-end;border:0;background:none;font-size:26px;line-height:1;
  cursor:pointer;color:var(--ink);margin-bottom:4px}

/* ==========================================================================
   HERO
   ========================================================================== */
.gn-hero{display:flex;border-bottom:1px solid var(--ink)}
.gn-hero-copy{width:470px;flex-shrink:0;padding:46px var(--gutter) 40px;
  border-right:1px solid var(--ink)}
.gn-hero h1{font-size:52px;line-height:1;letter-spacing:-.035em;margin:18px 0 0;
  font-weight:700;text-wrap:pretty}
.gn-hero p{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:22px 0 0;max-width:352px}
.gn-btns{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.gn-btn{display:flex;align-items:center;justify-content:center;height:48px;padding:0 22px;
  font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:500}
.gn-btn-solid{background:var(--accent);color:#fff}
.gn-btn-solid:hover{background:var(--accent-deep);color:#fff}
.gn-btn-ghost{border:1px solid var(--ink);color:var(--ink)}
.gn-btn-ghost:hover{background:var(--ink);color:#fff}
.gn-stats{display:flex;gap:28px;margin-top:38px;padding-top:22px;border-top:1px solid var(--rule)}
.gn-stat-n{font-size:23px;font-weight:700;letter-spacing:-.02em}
.gn-stat .meta{margin-top:4px}

.gn-hero-grid{flex-grow:1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  align-content:start}
.sq{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper)}
.sq.is-lit{background:var(--accent-wash)}

/* ==========================================================================
   CATEGORY TAB BAR
   ========================================================================== */
.gn-tabs{display:flex;border-bottom:1px solid var(--ink);overflow-x:auto;scrollbar-width:none}
.gn-tabs::-webkit-scrollbar{display:none}
.gn-tab{display:flex;align-items:center;gap:6px;padding:17px 16px;white-space:nowrap;
  border-right:1px solid var(--rule);font-family:'Space Grotesk',sans-serif;font-size:13.5px;
  color:var(--ink)}
.gn-tab:first-child{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding-left:var(--gutter)}
.gn-tab-n{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)}
.gn-tab.is-active{background:var(--accent);color:#fff}
.gn-tab.is-active .gn-tab-n{color:rgba(255,255,255,.75)}
.gn-tab:hover:not(.is-active):not(:first-child){background:var(--accent-wash)}

/* ==========================================================================
   FEATURED PACKS
   ========================================================================== */
.gn-sec-head{display:flex;align-items:baseline;gap:14px;padding:32px var(--gutter) 20px}
.gn-sec-head h2{font-size:24px;letter-spacing:-.025em;margin:0;font-weight:700}
.gn-sec-head .gn-all{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.gn-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
  padding:0 var(--gutter) 40px}
.gn-card{border:1px solid var(--ink);display:flex;flex-direction:column;background:var(--paper)}
.gn-card-media{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  padding:18px;border-bottom:1px solid var(--rule);overflow:hidden}
.gn-card-media img{width:100%;height:100%;object-fit:contain;display:block}
.gn-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.gn-card-cat{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.gn-card-title{font-size:14.5px;font-weight:500;line-height:1.35;color:var(--ink);margin:0}
a.gn-card-title:hover{color:var(--accent)}
.gn-card-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:14px}
.gn-card-price{font-size:15px;font-weight:700;color:var(--accent)}
.gn-add{display:flex;align-items:center;justify-content:center;height:36px;padding:0 22px;
  background:var(--ink);color:#fff;font-family:'Space Grotesk',sans-serif;font-size:13.5px;
  font-weight:500;border:0;cursor:pointer}
.gn-add:hover{background:var(--accent);color:#fff}

/* ==========================================================================
   DARK BAND — one library, every style
   ========================================================================== */
.gn-band{display:flex;background:var(--navy);color:#fff;border-bottom:1px solid var(--ink)}
.gn-band-copy{width:400px;flex-shrink:0;padding:44px var(--gutter) 40px}
.gn-band-copy .fig{color:#8FA6EE}
.gn-band-copy h2{font-size:34px;line-height:1.08;letter-spacing:-.03em;margin:16px 0 0;
  font-weight:700;color:#fff}
.gn-band-copy p{font-size:15px;line-height:1.62;color:#B9BFD8;margin:18px 0 0;max-width:330px}
.gn-band-copy .gn-btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;margin-top:26px;
  display:inline-flex;width:max-content}
.gn-band-copy .gn-btn-ghost:hover{background:#fff;color:var(--navy)}
.gn-band-tiles{flex-grow:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.gn-tile{border-left:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;color:#fff}
.gn-tile:hover{color:#fff;background:rgba(255,255,255,.04)}
.gn-tile-art{flex:1;background:var(--navy-2);display:flex;align-items:center;justify-content:center;
  padding:22px;min-height:210px;max-height:210px;overflow:hidden}
.gn-tile-art img{width:100%;height:100%;object-fit:contain;
  filter:grayscale(1) invert(1) contrast(1.05);mix-blend-mode:screen}
.gn-tile-cap{padding:16px 18px 20px;border-top:1px solid rgba(255,255,255,.14)}
.gn-tile-cap .t{display:block;font-size:13.5px;font-weight:500;color:#fff;line-height:1.35}
.gn-tile-cap .m{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#8A92B4;margin-top:6px}

/* ==========================================================================
   EDITORIAL SPLIT
   ========================================================================== */
.gn-split{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--ink)}
.gn-split > div{padding:36px var(--gutter) 40px}
.gn-split > div + div{border-left:1px solid var(--ink)}
.gn-split .fig{color:var(--muted)}
.gn-split h3,.gn-split .gn-h3{font-size:25px;letter-spacing:-.028em;margin:14px 0 0;font-weight:700}
.gn-split p{font-size:15px;line-height:1.62;color:var(--ink-2);margin:14px 0 0;max-width:470px}
.gn-split .gn-more{display:inline-block;margin-top:18px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}

/* ==========================================================================
   FEATURE ROW
   ========================================================================== */
.gn-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--ink)}
.gn-feat{padding:30px var(--gutter) 34px}
.gn-feat + .gn-feat{border-left:1px solid var(--rule)}
.gn-feat svg{color:var(--accent)}
.gn-feat .t{font-size:15px;font-weight:700;margin-top:16px}
.gn-feat p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:8px 0 0}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.gn-foot{background:var(--navy);color:#fff}
.gn-foot-in{max-width:var(--page);margin:0 auto;display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:48px var(--gutter) 40px}
.gn-foot .gn-logo-text{color:#fff}
.gn-foot-blurb{font-size:14px;line-height:1.6;color:#B9BFD8;margin:16px 0 0;max-width:300px}
.gn-foot-co{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16)}
.gn-foot-co .n{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#8A92B4}
.gn-foot-co .a{font-size:13px;line-height:1.6;color:#B9BFD8;margin-top:6px}
/* demoted to h2 for heading order; styling unchanged */
.gn-foot-col h4,.gn-foot-col .gn-foot-h{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#8A92B4;margin:0 0 16px;font-weight:400}
.gn-foot-col a{display:block;padding:6px 0;font-size:14px;color:#E6E9F5}
.gn-foot-col a:hover{color:#fff}
.gn-foot-bar{max-width:var(--page);margin:0 auto;padding:18px var(--gutter);
  border-top:1px solid rgba(255,255,255,.16);display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:#8A92B4}
.gn-foot-bar .r{margin-left:auto}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1400px){ :root{--page:100%} .gn-page{max-width:1360px} }

@media (max-width:1120px){
  .gn-hero-copy{width:400px;padding:38px 28px 34px}
  .gn-hero h1{font-size:44px}
  .gn-hero-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .gn-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gn-band-copy{width:340px}
  .gn-band-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gn-tile:nth-child(3),.gn-tile:nth-child(4){border-top:1px solid rgba(255,255,255,.14)}
  .gn-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gn-feat:nth-child(3),.gn-feat:nth-child(4){border-top:1px solid var(--rule)}
  .gn-feat:nth-child(3){border-left:0}
  .gn-foot-in{grid-template-columns:1fr 1fr;gap:32px}
  .gn-search{width:180px}
}

@media (max-width:820px){
  :root{--gutter:24px}
  .gn-nav,.gn-search{display:none}
  .gn-burger{display:flex}
  .gn-bar{gap:14px;height:60px}
  .gn-util{font-size:9.5px;gap:12px}
  .gn-util-b{display:none}
  .gn-hero{flex-direction:column}
  .gn-hero-copy{width:100%;border-right:0;border-bottom:1px solid var(--ink);padding:34px 24px 30px}
  .gn-hero h1{font-size:36px}
  .gn-hero p{max-width:none}
  .gn-hero-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .gn-split{grid-template-columns:1fr}
  .gn-split > div + div{border-left:0;border-top:1px solid var(--ink)}
  .gn-band{flex-direction:column}
  .gn-band-copy{width:100%;padding:34px 24px 30px}
  .gn-tile{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .gn-sec-head{padding:26px 24px 16px;flex-wrap:wrap}
  .gn-cards{padding:0 24px 32px}
}

@media (max-width:640px){
  .gn-cards{grid-template-columns:1fr;gap:16px}
  .gn-feats{grid-template-columns:1fr}
  .gn-feat + .gn-feat{border-left:0;border-top:1px solid var(--rule)}
  .gn-foot-in{grid-template-columns:1fr;gap:28px;padding:36px 24px 30px}
  .gn-hero h1{font-size:30px}
  .gn-hero-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gn-band-copy h2{font-size:27px}
  .gn-band-tiles{grid-template-columns:1fr 1fr}
  .gn-stats{gap:18px}
  .gn-foot-bar{flex-direction:column;align-items:flex-start;gap:8px}
  .gn-foot-bar .r{margin-left:0}
}

/* ==========================================================================
   CATEGORIES PAGE
   ========================================================================== */
.gn-pagehead{padding:46px var(--gutter) 38px;border-bottom:1px solid var(--ink)}
.gn-pagehead h1{font-size:44px;line-height:1.02;letter-spacing:-.035em;margin:16px 0 0;font-weight:700}
.gn-pagehead p{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:16px 0 0;max-width:520px}

.gn-catgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-bottom:1px solid var(--ink)}
.gn-catcard{display:flex;flex-direction:column;border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);color:var(--ink)}
.gn-catcard:hover{background:var(--accent-wash);color:var(--ink)}
.gn-catcard-art{display:flex;align-items:center;justify-content:center;padding:24px;
  aspect-ratio:1/1;overflow:hidden}
.gn-catcard-art img{width:100%;height:100%;object-fit:contain}
.gn-catcard-foot{padding:0 22px 22px}
.gn-catcard-foot .n{display:block;font-size:15px;font-weight:500}
.gn-catcard-foot .c{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.12em;color:var(--muted);margin-top:6px}

@media (max-width:1120px){ .gn-catgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){
  .gn-catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gn-pagehead{padding:34px 24px 28px}
  .gn-pagehead h1{font-size:34px}
}
@media (max-width:640px){
  /* the hero rail is 8 rows deep on a phone — show 6 and keep the scroll sane */
  .gn-hero-grid .sq:nth-child(n+25){display:none}
}

@media (max-width:400px){
  /* header row is 2px wider than a 360px viewport — tighten the rail, not the layout */
  :root{--gutter:16px}
  .gn-bar{gap:10px}
  .gn-tools{gap:8px}
  .gn-cart{padding:0 11px;gap:7px;font-size:11px}
  .gn-icon-btn,.gn-burger{width:34px;height:34px}
  .gn-logo-text{font-size:17px}
}

/* ==========================================================================
   HOVER CONTRACT
   Ohio ships a red brand colour (#D90A2C) as --clb-color-primary and hangs its
   link-hover rules on it, which beat ours and painted red text onto our dark
   hover backgrounds. Repoint the variable, then state every interactive hover
   explicitly so text always keeps contrast against whatever it sits on.
   Rule: hover only ever moves within the blue/ink family — never a hue change.
   ========================================================================== */
:root{
  --clb-color-primary:#3C66DD;   /* was Ohio red */
  --clb-color-primary-hover:#1E2C8C;
  --clb-color-danger:#D92D20;    /* genuine error states stay red */
}

/* --- solid blue button: deepen the blue, text stays white --- */
.gn-btn-solid:hover,.gn-btn-solid:focus-visible{background:var(--accent-deep)!important;color:#fff!important}

/* --- ghost button on white: fill with ink, text flips white --- */
.gn-btn-ghost:hover,.gn-btn-ghost:focus-visible{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
/* ghost button on the dark band inverts the other way */
.gn-band-copy .gn-btn-ghost:hover,.gn-band-copy .gn-btn-ghost:focus-visible{background:#fff!important;color:var(--navy)!important;border-color:#fff!important}

/* --- dark buttons (Add, cart): lift to brand blue, text stays white --- */
.gn-add:hover,.gn-add:focus-visible,
.gn-cart:hover,.gn-cart:focus-visible{background:var(--accent)!important;color:#fff!important}

/* --- text links on white: darken the blue, never change hue --- */
.gn-card-title:hover,.gn-all:hover,.gn-more:hover,
.gn-catcard:hover .gn-catcard-foot .n{color:var(--accent-deep)!important}

/* --- nav: ink text + blue rule underneath --- */
.gn-nav a:hover,.gn-nav a:focus-visible{color:var(--ink)!important;border-bottom-color:var(--accent)!important}

/* --- category rail --- */
.gn-tab:hover:not(.is-active):not(:first-child){background:var(--accent-wash)!important;color:var(--ink)!important}
.gn-tab.is-active:hover{background:var(--accent-deep)!important;color:#fff!important}

/* --- icon button --- */
.gn-icon-btn:hover,.gn-icon-btn:focus-visible{border-color:var(--ink)!important;color:var(--ink)!important;background:var(--accent-wash)!important}

/* --- cards --- */
.gn-card:hover{border-color:var(--accent)!important}
.gn-catcard:hover{background:var(--accent-wash)!important;color:var(--ink)!important}

/* --- anything on the navy band or footer resolves to white, never red --- */
.gn-tile:hover,.gn-tile:hover .t,
.gn-foot a:hover,.gn-foot-col a:hover{color:#fff!important}
.gn-drawer-panel a:hover{color:var(--accent)!important}

/* --- catch-all: no descendant of ours may inherit Ohio's red on hover --- */
.gn-page a:hover *,.gn-header a:hover *,.gn-foot a:hover *{color:inherit}
.gn-page a:hover{text-decoration:none}

/* ==========================================================================
   BAND TILE BLEND FIX
   .gn-tile-art img uses mix-blend-mode:screen. Painting a background on the
   tile (hover) promotes it to its own blending group, so it stopped
   compositing against the band's navy and fell back to a transparent
   backdrop — the tile flashed white and the white caption text vanished.
   Fix: every layer paints its OWN opaque ground, and the blend is isolated
   to the art box so it can never escape into the caption.
   ========================================================================== */
.gn-tile{background:var(--navy)}
.gn-tile:hover{background:#151C47!important}          /* opaque lift, not a translucent white wash */
.gn-tile-art{background:var(--navy-2);isolation:isolate}
.gn-tile-cap{background:var(--navy);position:relative;z-index:1}
.gn-tile:hover .gn-tile-art{background:#1A2252}
.gn-tile:hover .gn-tile-cap{background:#151C47}

/* ==========================================================================
   WOOCOMMERCE / BLOCK BUTTONS
   These are <a> elements, so Ohio's link-hover colour applies to them. Once
   --clb-color-primary became blue, WooCommerce Blocks was painting the same
   blue as the button's hover BACKGROUND — blue text on blue, contrast 1.00.
   Filled commerce buttons therefore state their own hover pair explicitly.
   ========================================================================== */
.wc-block-cart__submit-button,
.wc-block-components-button:not(.is-link),
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order{
  background-color:var(--ink);
  color:#fff!important;
}
.wc-block-cart__submit-button:hover,.wc-block-cart__submit-button:focus-visible,
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus-visible,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #place_order:hover{
  background-color:var(--accent)!important;
  color:#fff!important;
}
/* link-style block buttons stay text, never inherit a filled treatment */
.wc-block-components-button.is-link:hover{color:var(--accent-deep)!important;background:transparent!important}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.gn-about-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-bottom:1px solid var(--ink)}
.gn-about-stat{padding:28px var(--gutter) 30px}
.gn-about-stat + .gn-about-stat{border-left:1px solid var(--rule)}
.gn-about-stat .gn-stat-n{font-size:27px;font-weight:700;letter-spacing:-.02em}
.gn-about-stat .meta{margin-top:6px}

.gn-about-cats{padding:34px var(--gutter) 40px;border-bottom:1px solid var(--ink)}
.gn-about-catlist{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.gn-about-catlist a{display:flex;align-items:center;gap:9px;padding:9px 15px;
  border:1px solid var(--rule);color:var(--ink);font-size:14px}
.gn-about-catlist a:hover{border-color:var(--accent);background:var(--accent-wash);color:var(--ink)}
.gn-about-catlist .c{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted)}
.gn-about-catlist a:hover .c{color:var(--accent-deep)}

/* About CTA band: copy left, glyph rail right — same rhythm as the hero */
.gn-band-cta .gn-band-copy{width:460px;flex-shrink:0}
.gn-band-cta .gn-band-copy p{max-width:360px}
.gn-cta-grid{flex-grow:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-left:1px solid rgba(255,255,255,.14)}
.gn-cta-cell{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.gn-cta-cell:nth-child(4n){border-right:0}
.gn-cta-cell:nth-child(n+5){border-bottom:0}
.gn-band-cta .gn-btns{margin-top:26px}
.gn-band-cta .gn-btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.gn-band-cta .gn-btn-ghost:hover{background:#fff!important;color:var(--navy)!important;border-color:#fff!important}

@media (max-width:820px){ .gn-band-cta .gn-band-copy{width:100%} .gn-cta-grid{border-left:0;border-top:1px solid rgba(255,255,255,.14)} }
@media (max-width:1120px){ .gn-about-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gn-about-stat:nth-child(3),.gn-about-stat:nth-child(4){border-top:1px solid var(--rule)}
  .gn-about-stat:nth-child(3){border-left:0} }
@media (max-width:640px){ .gn-about-stats{grid-template-columns:1fr}
  .gn-about-stat + .gn-about-stat{border-left:0;border-top:1px solid var(--rule)} }

/* ==========================================================================
   FAQ
   ========================================================================== */
.gn-faq{border-bottom:1px solid var(--ink)}
.gn-qa{border-bottom:1px solid var(--rule)}
.gn-qa:last-child{border-bottom:0}
.gn-qa summary{display:flex;align-items:flex-start;gap:18px;padding:22px var(--gutter);
  cursor:pointer;list-style:none;position:relative}
.gn-qa summary::-webkit-details-marker{display:none}
.gn-qa summary:hover{background:var(--accent-wash)}
.gn-qa-n{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  color:var(--accent);padding-top:4px;flex-shrink:0}
.gn-qa-q{font-size:17px;font-weight:500;line-height:1.4;flex:1}
.gn-qa-mark{position:relative;width:14px;height:14px;flex-shrink:0;margin-top:5px}
.gn-qa-mark::before,.gn-qa-mark::after{content:"";position:absolute;background:var(--ink);
  transition:transform .18s ease}
.gn-qa-mark::before{top:6px;left:0;width:14px;height:2px}
.gn-qa-mark::after{left:6px;top:0;width:2px;height:14px}
.gn-qa[open] .gn-qa-mark::after{transform:rotate(90deg)}
.gn-qa-a{padding:0 var(--gutter) 26px calc(var(--gutter) + 29px)}
.gn-qa-a p{margin:0;font-size:15px;line-height:1.65;color:var(--ink-2);max-width:760px}
.gn-btn-inline{display:inline-flex;width:max-content;margin-top:20px}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.gn-contact{display:grid;grid-template-columns:1.45fr 1fr;border-bottom:1px solid var(--ink)}
.gn-contact-form{padding:34px var(--gutter) 40px}
.gn-contact-side{padding:34px var(--gutter) 40px;border-left:1px solid var(--ink)}
.gn-contact-row{padding:16px 0;border-bottom:1px solid var(--rule)}
.gn-contact-row:last-child{border-bottom:0}
.gn-contact-row .v{font-size:15px;line-height:1.6;margin-top:6px;color:var(--ink)}

/* CF7 inside the blueprint grid */
.gn-contact-form .wpcf7{margin-top:18px}
.gn-contact-form .wpcf7 p{margin:0 0 14px}
.gn-contact-form label{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.gn-contact-form input[type=text],.gn-contact-form input[type=email],
.gn-contact-form textarea{width:100%;border:1px solid var(--rule);background:var(--paper);
  padding:12px 14px;font-family:'Space Grotesk',sans-serif;font-size:15px;color:var(--ink);
  border-radius:0;box-sizing:border-box}
.gn-contact-form input:focus,.gn-contact-form textarea:focus{outline:0;border-color:var(--accent)}
.gn-contact-form textarea{min-height:150px;resize:vertical}
.gn-contact-form .wpcf7-submit{height:48px;padding:0 26px;background:var(--accent);color:#fff;
  border:0;font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:500;cursor:pointer}
.gn-contact-form .wpcf7-submit:hover{background:var(--accent-deep);color:#fff}
.gn-contact-form .wpcf7-not-valid-tip{color:#D92D20;font-size:12.5px;margin-top:5px}
.gn-contact-form .wpcf7-response-output{border:1px solid var(--rule);padding:12px 14px;
  margin:16px 0 0;font-size:14px}

@media (max-width:820px){
  .gn-contact{grid-template-columns:1fr}
  .gn-contact-side{border-left:0;border-top:1px solid var(--ink)}
  .gn-qa summary{padding:18px 24px;gap:14px}
  .gn-qa-a{padding:0 24px 22px 24px}
  .gn-qa-q{font-size:16px}
}

/* ==========================================================================
   SHOP / ARCHIVE / SEARCH
   ========================================================================== */
.gn-shopbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px var(--gutter);border-bottom:1px solid var(--rule)}
.gn-shopbar .woocommerce-result-count{margin:0;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gn-shopbar .woocommerce-ordering{margin:0 0 0 auto}
.gn-shopbar select{border:1px solid var(--rule);background:var(--paper);color:var(--ink);
  font-family:'Space Grotesk',sans-serif;font-size:13.5px;padding:9px 12px;border-radius:0}
.gn-shopbar select:focus{outline:0;border-color:var(--accent)}

/* the archive grid reuses the homepage card grid */
ul.gn-cards{list-style:none;margin:0;padding:24px var(--gutter) 40px}
ul.gn-cards li.gn-card{margin:0;float:none;width:auto}

.gn-pager{padding:0 var(--gutter) 48px}
.gn-pager .page-numbers{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.gn-pager .page-numbers li{margin:0}
.gn-pager a.page-numbers,.gn-pager span.page-numbers{display:flex;align-items:center;
  justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--rule);
  font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink)}
.gn-pager a.page-numbers:hover{border-color:var(--accent);background:var(--accent-wash);color:var(--ink)}
.gn-pager .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}

.gn-empty{padding:48px var(--gutter) 60px;border-bottom:1px solid var(--ink)}
.gn-empty h2{font-size:26px;letter-spacing:-.025em;margin:0 0 10px}
.gn-empty p{font-size:15px;color:var(--ink-2);margin:0}
.gn-search-page{width:min(420px,100%);margin-top:22px;height:44px}

/* ==========================================================================
   SINGLE PRODUCT
   ========================================================================== */
.gn-crumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:16px var(--gutter);border-bottom:1px solid var(--rule);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--muted)}
.gn-crumbs a{color:var(--accent)}
.gn-crumb-current{color:var(--ink)}

.gn-prod{display:grid;grid-template-columns:1.25fr 1fr;border-bottom:1px solid var(--ink)}
.gn-prod-media{display:flex;align-items:center;justify-content:center;padding:40px;
  border-right:1px solid var(--ink);background:var(--paper)}
.gn-prod-media img{width:100%;height:auto;max-width:620px;display:block}
.gn-prod-summary{padding:38px var(--gutter) 40px}
.gn-prod-summary h1{font-size:36px;line-height:1.08;letter-spacing:-.03em;margin:14px 0 0;font-weight:700}
.gn-prod-cats{margin-top:12px;font-size:13.5px;color:var(--muted)}
.gn-prod-cats a{color:var(--accent)}
.gn-prod-price{margin-top:18px;font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.gn-prod-price del{color:var(--muted);font-weight:400;font-size:20px;margin-right:8px}
.gn-prod-excerpt{margin-top:16px;font-size:15px;line-height:1.62;color:var(--ink-2);max-width:460px}
.gn-prod-cart{margin-top:26px;padding-top:24px;border-top:1px solid var(--rule)}
.gn-prod-cart form.cart{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}
.gn-prod-cart .quantity input{width:78px;height:50px;border:1px solid var(--rule);text-align:center;
  font-family:'Space Grotesk',sans-serif;font-size:15px;color:var(--ink);border-radius:0}
.gn-prod-cart button.single_add_to_cart_button{height:50px;padding:0 30px;background:var(--ink);
  color:#fff;border:0;border-radius:0;font-family:'Space Grotesk',sans-serif;font-size:15px;
  font-weight:500;cursor:pointer}
.gn-prod-cart button.single_add_to_cart_button:hover{background:var(--accent);color:#fff}
.gn-prod-meta{list-style:none;margin:28px 0 0;padding:22px 0 0;border-top:1px solid var(--rule)}
.gn-prod-meta li{display:flex;align-items:baseline;gap:16px;padding:7px 0}
.gn-prod-meta .meta{min-width:96px;flex-shrink:0}
.gn-prod-meta .v{font-size:14px;color:var(--ink)}

.gn-prod-desc{padding:34px var(--gutter) 40px;border-bottom:1px solid var(--ink)}
.gn-prod-desc-body{margin-top:16px;max-width:760px}
.gn-prod-desc-body p{font-size:15.5px;line-height:1.68;color:var(--ink-2);margin:0 0 14px}
.gn-prod-desc-body p:last-child{margin-bottom:0}
.gn-related{border-bottom:1px solid var(--ink)}
.gn-related .gn-cards{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Ohio's floating "Next Product" card overlapped the footer */
.sticky-nav{display:none!important}

@media (max-width:1120px){ .gn-related .gn-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:820px){
  .gn-prod{grid-template-columns:1fr}
  .gn-prod-media{border-right:0;border-bottom:1px solid var(--ink);padding:28px}
  .gn-prod-summary{padding:28px 24px 32px}
  .gn-prod-summary h1{font-size:28px}
  .gn-shopbar{padding:14px 24px}
  .gn-shopbar .woocommerce-ordering{margin-left:0;width:100%}
  ul.gn-cards{padding:20px 24px 32px}
}
@media (max-width:640px){ .gn-related .gn-cards{grid-template-columns:1fr} }

/* logo is now a PNG (transparent, rendered at 4x for retina) */
.gn-logo-img{display:block;width:129px;height:22px;flex-shrink:0}
@media (max-width:400px){ .gn-logo-img{width:112px;height:19px} }

/* payment marks — the Visa blue is too close to the footer navy, so the
   card logos sit on a white chip the way card marks normally are presented */
.gn-pay{display:flex;align-items:center;gap:10px;margin-left:28px}
.gn-pay-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:#8A92B4}
.gn-pay-chip{display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:6px;padding:5px 9px;line-height:0}
.gn-pay-chip img{display:block;width:120px;height:28px;object-fit:contain}
@media (max-width:640px){ .gn-pay{order:3;margin-left:0} }

/* ==========================================================================
   COMPANY DETAILS (footer · contact · legal sidebar)
   ========================================================================== */
.gn-company-name{font-size:13.5px;font-weight:700;letter-spacing:.01em}
.gn-company-addr{font-size:13px;line-height:1.6;margin-top:6px}
.gn-company-reg{font-size:13px;margin-top:6px}
.gn-company-mail{display:inline-block;margin-top:8px;font-size:13px}
.gn-foot .gn-company{color:#B9BFD8}
.gn-foot .gn-company-name{color:#fff}
.gn-foot .gn-company-mail{color:#E6E9F5}
.gn-foot .gn-company-mail:hover{color:#fff}
.gn-contact-row .gn-company{color:var(--ink)}
.gn-contact-row .gn-company-addr,.gn-contact-row .gn-company-reg{color:var(--ink-2)}

/* ==========================================================================
   LEGAL DOCUMENTS
   ========================================================================== */
.gn-legal-head .gn-legal-date{margin-top:14px}
.gn-legal{display:grid;grid-template-columns:288px 1fr;border-bottom:1px solid var(--ink)}
.gn-legal-nav{border-right:1px solid var(--ink);padding:28px 0 30px}
.gn-legal-nav > .meta{padding:0 24px 14px}
.gn-legal-nav nav{display:flex;flex-direction:column}
.gn-legal-nav a{display:flex;align-items:center;gap:12px;padding:12px 24px;color:var(--ink);
  border-left:3px solid transparent;font-size:13.5px}
.gn-legal-nav a .n{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted)}
.gn-legal-nav a:hover{background:var(--accent-wash);color:var(--ink)}
.gn-legal-nav a.is-current{border-left-color:var(--accent);background:var(--accent-wash);font-weight:500}
.gn-legal-co{margin:26px 24px 0;padding-top:20px;border-top:1px solid var(--rule);color:var(--ink-2)}
.gn-legal-co .meta{margin-bottom:8px}

.gn-legal-main{padding:30px var(--gutter) 46px}
.gn-legal-main > p{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin:0 0 10px;max-width:720px}
.gn-legal-sec{display:flex;gap:18px;margin-top:30px;padding-top:22px;border-top:1px solid var(--rule)}
.gn-legal-n{width:44px;flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:12px;
  color:var(--accent);padding-top:4px}
.gn-legal-body{flex-grow:1;max-width:720px}
.gn-legal-body h2{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0}
.gn-legal-body h3{font-size:16px;font-weight:600;margin:18px 0 0}
.gn-legal-body p{font-size:15px;line-height:1.7;color:var(--ink-2);margin:10px 0 0}
.gn-legal-body ul,.gn-legal-body ol{margin:10px 0 0;padding-left:20px}
.gn-legal-body li{font-size:15px;line-height:1.7;color:var(--ink-2);margin:6px 0}
.gn-legal-body a{color:var(--accent)}
.gn-legal-body strong{color:var(--ink)}
.gn-legal-body table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px}
.gn-legal-body th,.gn-legal-body td{border:1px solid var(--rule);padding:10px 12px;text-align:left;
  color:var(--ink-2);vertical-align:top}
.gn-legal-body th{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:400}

@media (max-width:980px){
  .gn-legal{grid-template-columns:1fr}
  .gn-legal-nav{border-right:0;border-bottom:1px solid var(--ink);padding:22px 0 24px}
  .gn-legal-main{padding:26px 24px 36px}
  .gn-legal-sec{gap:12px}
}
@media (max-width:640px){
  .gn-legal-sec{flex-direction:column;gap:6px}
  .gn-legal-n{padding-top:0}
}