/* ===========================================================================
   pledii.store - shared chrome
   ---------------------------------------------------------------------------
   Tokens, type, top navigation, the cat banner, footer, buttons and the small
   controls every page uses. Loaded by /, /resources.html and /docs/.

   Built to the owner's design picture (Sep 2026). Colours are sampled from
   it: a neutral near-black ground (#121211) shared by the nav and the page,
   cards that are the same ground with a lighter edge, and ONE bright red
   (#E3001B) used for the active nav mark, the banner rule, the selected
   filter and the primary button. Type: Big Shoulders Display for display,
   Roboto Condensed for the navigation, Segoe UI for text (Open Sans where
   Segoe UI is not installed - it is only downloaded on those machines).
   =========================================================================== */

:root{
  color-scheme:dark;

  --paper:#121211;        /* page and nav ground                         */
  --paper-rgb:18,18,17;
  --well:#0E0E0D;         /* inputs and resting filter buttons           */
  --panel:#141413;        /* cards                                       */
  --panel-2:#1C1C1A;      /* selected filter, hover                      */
  --panel-3:#252523;
  --skel:#2D2D2B;         /* skeleton and placeholder bars               */

  --ink:#F2F2EE;
  --ink-2:#D2D2CD;
  --ink-3:#A5A5A0;

  --line-soft:#242423;
  --line:#353534;
  --line-strong:#4D4D4A;

  --accent:#E3001B;
  --accent-2:#C20017;
  --accent-text:#FF6470;  /* red as type on the dark ground              */
  --accent-wash:rgba(227,0,27,.12);
  --accent-glow:rgba(227,0,27,.40);
  --on-accent:#FFFFFF;
  --link:#F0669A;
  --ok:#22BF4E;
  --warn:#FDA640;

  --r:3px;
  --r-sm:2px;
  --shadow:none;
  --shadow-2:0 18px 50px rgba(0,0,0,.55);

  --f-display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --f-nav:"Roboto Condensed","Arial Narrow",sans-serif;
  --f-body:"Segoe UI","Open Sans",system-ui,-apple-system,Roboto,sans-serif;

  --shell:1440px;
  --gut:48px;
}

:root[data-skin="light"]{
  color-scheme:light;
  --paper:#F4F3EF;
  --paper-rgb:244,243,239;
  --well:#FFFFFF;
  --panel:#FFFFFF;
  --panel-2:#ECEBE6;
  --panel-3:#E2E1DB;
  --skel:#E4E3DD;

  --ink:#161615;
  --ink-2:#3C3C38;
  --ink-3:#62625C;

  --line-soft:#E6E5E0;
  --line:#D4D3CD;
  --line-strong:#A9A8A1;

  --accent:#D6001A;
  --accent-2:#B00015;
  --accent-text:#B00015;
  --accent-wash:rgba(214,0,26,.08);
  --accent-glow:rgba(214,0,26,.25);
  --link:#A82454;
  --ok:#1D7A36;
  --warn:#8A5A12;
  --shadow-2:0 18px 50px rgba(40,36,30,.22);
}

@media (max-width:1100px){:root{--gut:28px}}
@media (max-width:640px){:root{--gut:16px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}
/* set for one frame while the theme switches, so nothing fades between palettes */
.no-trans,.no-trans *{transition:none!important}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.shell{width:100%;max-width:calc(var(--shell) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}

/* icons: Tabler Icons (MIT), inlined as a sprite on each page */
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- top navigation ------------------------------------------------
   Logo left, sections centred, theme and basket right. The current section
   carries a 4px red bar under its label. */
.topnav{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:30}
.topnav-in{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"logo links right";align-items:center;min-height:61px}
.logo{
  grid-area:logo;justify-self:start;
  font-family:var(--f-display);font-weight:800;font-size:40px;line-height:1;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
/* the underscore is drawn, not typed: Big Shoulders' own _ is twice the
   width of the short red bar in the design */
.logo i,.foot-logo i{display:inline-block;width:.42em;height:.12em;margin-left:.16em;background:var(--accent);vertical-align:baseline}
.nav-links{grid-area:links;display:flex;align-items:center;gap:56px}
.nav-links a{
  position:relative;padding:6px 0;line-height:1;
  font-family:var(--f-nav);font-weight:400;font-size:17px;letter-spacing:0;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
}
.nav-links a::after{
  content:"";position:absolute;left:-10px;right:-10px;bottom:-4px;height:4px;
  background:var(--accent);transform:scaleX(0);transition:transform .2s ease;
}
.nav-links a:hover::after{transform:scaleX(1);background:var(--line-strong)}
.nav-links a[aria-current="page"]::after{transform:none;background:var(--accent)}
.nav-right{grid-area:right;justify-self:end;display:flex;align-items:center}
.icon-btn{
  display:grid;place-items:center;width:38px;height:38px;padding:0;
  background:none;border:0;border-radius:var(--r);color:var(--ink);cursor:pointer;
}
.icon-btn:hover{background:var(--panel-2)}
.icon-btn .ic{width:22px;height:22px}
.nav-sep{width:1px;height:26px;background:var(--line);margin:0 26px 0 24px}
.cart-btn{
  display:flex;align-items:center;gap:19px;padding:6px 0;background:none;border:0;cursor:pointer;
  font-family:var(--f-nav);font-weight:400;font-size:17px;letter-spacing:0;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;line-height:1;
}
.cart-btn .ic{width:26px;height:26px;stroke-width:1.75}
.cart-btn:hover{color:var(--accent-text)}
.cart-btn .n{font-variant-numeric:tabular-nums}

@media (max-width:980px){
  .topnav-in{grid-template-columns:auto 1fr;grid-template-areas:"logo right" "links links";row-gap:0}
  .nav-links{gap:26px;overflow-x:auto;scrollbar-width:none;padding:6px 0 12px;justify-self:stretch}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{font-size:15px}
  .nav-links a::after{left:-6px;right:-6px;bottom:-6px;height:3px}
  .logo{font-size:34px;padding:10px 0}
  .nav-sep{margin:0 14px}
}
@media (max-width:420px){.cart-btn .lbl{display:none}}

/* ---------- the cat banner -------------------------------------------------
   A 117px strip: the title block on black at the left, the owner's banner
   art on the right, faded into the black so the two read as one surface.
   Dark in both themes - it is artwork, not chrome. */
.banner{position:relative;overflow:hidden;background:#000;border-bottom:1px solid #2A2A29;color:#F4F4F0}
.banner-art{
  position:absolute;top:0;bottom:0;right:0;width:66%;
  background:url("/assets/banner-dark.jpg") center 64% / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%);
  filter:brightness(1.22) saturate(1.15);
}
.banner-in{position:relative;z-index:1;min-height:117px;display:flex;flex-direction:column;justify-content:center;padding-top:10px;padding-left:calc(var(--gut) + 25px)}
.banner h1{
  font-family:var(--f-display);font-weight:900;font-size:53px;line-height:.86;letter-spacing:.012em;
  text-transform:uppercase;color:#F4F4F0;
}
.banner .bar{display:block;width:67px;height:5px;background:var(--accent);margin:6px 0 6px}
.banner p{font-size:20px;line-height:1.25;color:#D6D6D1}
@media (max-width:760px){
  .banner-in{min-height:104px;padding-left:var(--gut)}
  .banner h1{font-size:44px}
  .banner p{font-size:16px}
  .banner-art{width:100%;opacity:.42;-webkit-mask-image:none;mask-image:none}
}

/* ---------- buttons and small controls ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;
  height:42px;padding:0 20px;border:1px solid transparent;border-radius:var(--r);
  font-family:var(--f-body);font-weight:600;font-size:16.5px;line-height:1;white-space:nowrap;
  cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn-red{background:var(--accent);color:var(--on-accent)}
.btn-red:hover{background:var(--accent-2)}
.btn-red:active{transform:translateY(1px)}
.btn-line{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn-line:hover{border-color:var(--ink-3)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.tag{
  display:inline-flex;align-items:center;height:20px;padding:0 9px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font-size:12.5px;line-height:1;color:var(--ink);white-space:nowrap;
}
.tags{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- footer ---------- */
.site-foot{margin-top:auto;border-top:1px solid var(--line);background:var(--paper)}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;min-height:58px;padding-top:8px;padding-bottom:8px}
.foot-logo{font-family:var(--f-display);font-weight:800;font-size:30px;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.foot-links{display:flex;align-items:center;flex-wrap:wrap;row-gap:8px}
.foot-links a{padding:0 20px;border-left:1px solid var(--line);font-size:13.5px;line-height:20px;color:var(--ink-2)}
.foot-links a:first-child{border-left:0}
.foot-links a:last-child{padding-right:0}
.foot-links a:hover{color:var(--ink)}
.foot-legal{border-top:1px solid var(--line-soft);padding:10px var(--gut);text-align:center;font-size:11.5px;line-height:1.6;color:var(--ink-3)}
@media (max-width:640px){
  .foot-links a{padding:0 12px}
  .foot-links a:first-child{padding-left:0}
}