/* B.C. Joe LLC — shared stylesheet. System fonts only; no external requests. */
:root{
  color-scheme:light dark;
  --paper:#F4F1EA; --surface:#FBFAF6; --ink:#1B1A17; --ink-2:#4B4842; --ink-3:#77736A;
  --line:#DCD7CB; --accent:#8A4B12; --accent-soft:#F1E3D0;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --maxw:680px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#121210; --surface:#1A1917; --ink:#EDE9DF; --ink-2:#B9B3A5; --ink-3:#847E70;
    --line:#2E2C27; --accent:#E1A25E; --accent-soft:#2C2117;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:1.03rem; line-height:1.6; min-height:100vh; display:flex; flex-direction:column}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
header.top{border-bottom:1px solid var(--line); background:var(--surface)}
header.top .in{max-width:var(--maxw); margin:0 auto; padding:14px 20px;
  display:flex; align-items:baseline; gap:20px; flex-wrap:wrap}
header.top .brand{font-weight:650; letter-spacing:.01em; color:var(--ink); font-size:1.05rem}
header.top nav{margin-left:auto; display:flex; gap:16px; font-size:.92rem}
header.top nav a{color:var(--ink-2)}
header.top nav a[aria-current]{color:var(--ink); font-weight:600}
main{flex:1 0 auto; max-width:var(--maxw); width:100%; margin:0 auto; padding:36px 20px 56px}
h1{font-size:1.9rem; line-height:1.2; margin:0 0 .5em; letter-spacing:-.01em}
h2{font-size:1.25rem; margin:2.2em 0 .6em; padding-top:.6em; border-top:1px solid var(--line)}
h3{font-size:1.02rem; margin:1.4em 0 .4em}
p,li{color:var(--ink-2)}
p.lede{font-size:1.18rem; color:var(--ink); line-height:1.5}
.meta{color:var(--ink-3); font-size:.88rem; font-family:var(--mono)}
/* Products dropdown: a <details> so it works with no JS and closes on outside click. */
details.menu{position:relative}
details.menu summary{list-style:none; cursor:pointer; color:var(--ink-2); user-select:none}
details.menu summary::-webkit-details-marker{display:none}
details.menu summary::after{content:"\25BE"; font-size:.8em; margin-left:4px; color:var(--ink-3)}
details.menu[open] summary{color:var(--ink)}
details.menu .drop{position:absolute; top:calc(100% + 8px); right:0; min-width:220px; z-index:10;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:6px;
  box-shadow:0 8px 24px -12px rgba(0,0,0,.35)}
details.menu .drop a{display:block; padding:8px 10px; border-radius:6px; color:var(--ink); white-space:nowrap}
details.menu .drop a:hover{background:var(--accent-soft); text-decoration:none}
.tag{display:inline-block; font-size:.74rem; font-family:var(--mono); padding:2px 8px;
  border-radius:999px; background:var(--accent-soft); color:var(--accent); margin-left:8px; vertical-align:middle}
.contact{border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:16px 18px}
footer.bot{border-top:1px solid var(--line); background:var(--surface); font-size:.86rem; color:var(--ink-3)}
footer.bot .in{max-width:var(--maxw); margin:0 auto; padding:16px 20px; display:flex; gap:16px; flex-wrap:wrap}
footer.bot a{color:var(--ink-2)}
ol.legal{padding-left:1.3em} ol.legal>li{margin:.5em 0}
/* Close the dropdown when clicking anywhere else: a full-screen transparent backdrop
   behind the open menu (the <details> element itself is above it). */
details.menu[open] summary::before{content:""; position:fixed; inset:0; z-index:9; cursor:default}
details.menu[open] .drop{z-index:10}