/* Nonessential Goods — brand option A (see branding/option-a/brand.txt). Fonts: Inter Tight + JetBrains Mono (SIL OFL, Google Fonts). */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;600;800&family=JetBrains+Mono:wght@500&display=swap');
:root{--ink:#141414;--paper:#F2EEE6;--orange:#FF5A1F;--card:#FBF9F5;--line:rgba(20,20,20,.14);
--sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
/* Contrast: orange on paper is ~2.7:1, so orange is never used for body text on paper.
   Orange appears as fills (ink text on orange ~5.9:1), underlines, borders and on ink (orange on ink ~5.9:1). */
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--sans);font-weight:800;letter-spacing:-.025em;line-height:1.08}
a{color:inherit;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
::selection{background:var(--orange);color:var(--ink)}

header{border-bottom:1px solid var(--ink);padding:18px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.logo{text-decoration:none}.logo img{display:block;height:30px;width:auto;max-width:62vw}
nav a{margin-left:18px;text-decoration:none;font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:4px 0;border-bottom:2px solid transparent}
nav a:hover{border-bottom-color:var(--orange)}
#cartn{display:inline-block;min-width:1.6em;text-align:center;background:var(--orange);color:var(--ink);border-radius:999px;padding:0 .45em;font-weight:500}

.hero{text-align:center;padding:64px 20px 48px;border-bottom:1px solid var(--ink)}
.hero h1{font-size:60px;margin:0;color:var(--ink)}
.hero h1::after{content:'*';color:var(--orange);margin-left:.04em}
.hero p{max-width:620px;margin:16px auto;font-size:18px}
.stamp{display:inline-block;background:var(--ink);color:var(--paper);padding:4px 10px;font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.1em;border-radius:3px}

section.brand{padding:44px 28px;border-bottom:1px solid var(--line)}
section.brand h2{font-size:36px;margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;margin-top:22px}
.card{background:var(--card);border:1px solid var(--ink);border-radius:6px;text-decoration:none;padding:10px;transition:transform .12s,box-shadow .12s}
.card:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--orange)}
.card img{width:100%;display:block;border-radius:3px}
.card h3{margin:10px 0 2px;font-size:16px;letter-spacing:-.01em}
.price{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:4px}

.btn{background:var(--orange);color:var(--ink);border:2px solid var(--ink);border-radius:6px;padding:14px 22px;font:800 16px var(--sans);letter-spacing:-.01em;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--orange)}
.btn:disabled{opacity:.55;cursor:wait}
main{max-width:1100px;margin:auto}
.prod{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:36px 28px}
.prod img{width:100%;border:1px solid var(--ink);border-radius:6px}
select,input{font:16px var(--sans);padding:8px 10px;border:1px solid var(--ink);border-radius:6px;background:var(--card);color:var(--ink)}
.opts button{margin:4px 4px 0 0;padding:8px 12px;border:1px solid var(--ink);border-radius:6px;background:var(--card);color:var(--ink);font:500 13px var(--mono);cursor:pointer}
.opts button:hover{border-color:var(--orange)}
.opts button.on{background:var(--ink);color:var(--paper);box-shadow:inset 0 -3px 0 var(--orange)}
table{width:100%;border-collapse:collapse}
td,th{border-bottom:1px solid var(--line);padding:10px;text-align:left}
th{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.08em}
small{font-family:var(--mono);font-size:12px}
.doc{padding:30px 28px;max-width:800px}
.doc h1{font-size:40px}.doc h3{font-size:20px;margin-top:28px}
footer{padding:28px;text-align:center;font:500 12px/1.9 var(--mono);background:var(--ink);color:var(--paper);margin-top:40px}
footer a{color:var(--orange);text-decoration:none}footer a:hover{text-decoration:underline}
@media(max-width:700px){.prod{grid-template-columns:1fr}.hero h1{font-size:40px}nav a{margin-left:12px}}