/* shared light-page theme (catalogue, product, blog) — load after base.css and
   before the page's own sheet. Source-order override pattern: keep selectors
   low-specificity so page sheets and base.css component rules still win. */

/* whole page is a light surface -> light-tier roles. The dark islands
   (.foot/.ctaband/.cutaway/.qtray) read primitives, so need no counter-override */
body{
  background:var(--paper);color:var(--ink);
  --accent:var(--accent-on-light);--accent-hover:var(--accent-hover-on-light);
  --accent-line:var(--accent-line-on-light);--text-2:var(--text-2-on-light);
  --index:var(--index-on-light);--index-line:var(--index-line-on-light);
}
.sub{font-size:clamp(1.0625rem,1.6vw,1.3125rem);color:var(--steel);margin:24px auto 0}
.pagehead{padding:170px 0 0}

/* nav on light pages: solid paper bar with ink links — the translucent dark bar
   in base.css is tuned for the dark home hero and turns muddy over white */
.nav{background:rgb(var(--paper-rgb)/.92);border-bottom:1px solid var(--line)}
.brandlink{color:var(--ink)}
.wm{color:var(--ink)}
.wm .sec{color:var(--accent)}
.navlinks a{color:var(--steel)}
.navlinks a:hover{color:var(--ink)}
.navlinks a.here{color:var(--accent)}
.menubtn{border-color:var(--mist);color:var(--ink)}
.mobilemenu{background:rgb(var(--paper-rgb)/.98);border-bottom:1px solid var(--line)}
.mobilemenu a{color:var(--steel);border-bottom:1px solid var(--line)}

/* breadcrumb */
.crumb{font-family:var(--body);font-weight:500;font-size:0.75rem;letter-spacing:.04em;color:var(--text-2);margin-bottom:26px}
.crumb a{color:var(--accent)}
/* up-a-level affordance, 28x15 on a phone -- padding buys the tap area */
@media(pointer:coarse){.crumb{margin-bottom:18px}.crumb a{display:inline-block;padding:8px 2px}}

/* 23-bit encoder badge; .ptag is the shared kicker recipe in base.css */

/* series glyph — schematic line drawing identifying the product family */
.sglyph{position:absolute;top:56px;right:34px;width:44px;height:44px;color:var(--text-2);opacity:.8;pointer-events:none}
.sglyph svg{width:100%;height:100%;display:block}
/* tracks .pcard's narrow padding in base.css so .pname's reserve still fits */
@media(max-width:420px){.sglyph{right:22px}}
.sglyph .ga{stroke:var(--accent-line)}
.pbadge{display:inline-flex;width:fit-content;font-family:var(--mono);font-size:0.625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--index);background:rgb(var(--amber-rgb)/.16);border-radius:var(--r-pill);padding:5px 11px;margin-top:16px}

/* end-of-page dark CTA band — deliberately quieter than page sections */
.ctaband{background:var(--ink2);color:var(--paper);text-align:center;padding:80px 0;margin-top:60px}
.ctaband .h-lg{font-size:clamp(26px,3.2vw,2.5rem);margin:0}
.ctaband .sub{color:var(--fog);font-size:clamp(0.9375rem,1.3vw,1.0625rem);margin-top:14px}
.ctaband .btn.primary{margin-top:28px}