/* Khorne Projects — site styles. No external fonts, no trackers. Light + dark themes via custom properties. */
:root{
  /* brand constants */
  --brand-crimson:#C8102E; --brand-brass:#B8893A; --brand-charcoal:#2B2B2B; --brand-parchment:#F7F4EE;
  --radius:14px; --max:1080px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  /* light theme (default) */
  color-scheme:light;
  --bg:#FFFFFF; --bg-shade:#FBFAF7; --surface:#FFFFFF; --surface-2:#FBFAF7;
  --text:#2B2B2B; --text-2:#3D3D3D; --muted:#5A5A5A; --line:#E6E0D4;
  --link:#C8102E; --link-hover:#9E0C24;
  --btn-bg:#C8102E; --btn-bg-hover:#A80D26; --btn-text:#FFFFFF;
  --ghost-bg:#FFFFFF; --ghost-text:#2B2B2B; --ghost-line:#E6E0D4;
  --accent-line:#B8893A; --focus:#B8893A;
  --badge-bg:#FCEDEF; --badge-text:#8E0B21; --badge-line:#F2C9D0;
  --badge2-bg:#F7F0E3; --badge2-text:#6B4E1C; --badge2-line:#E8D6B3;
  --featured-line:#E9C7CD; --featured-bg:linear-gradient(135deg,#FFFFFF 0,#FFF8F8 100%);
  --header-bg:rgba(255,255,255,.92); --footer-bg:#FBFAF7;
  --ph-bg:#FFF4CC; --ph-line:#C9A227; --ph-text:#2B2B2B;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(43,43,43,.05);
  --mark-shadow:drop-shadow(0 10px 18px rgba(43,43,43,.12));
}
/* dark theme tokens, applied by system preference (unless user chose light) or by explicit choice */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#2B2B2B; --bg-shade:#262626; --surface:#363636; --surface-2:#313131;
    --text:#F7F4EE; --text-2:#E8E3DA; --muted:#D4CEC3; --line:#4A4744;
    --link:#FF8090; --link-hover:#FFA8B3;
    --btn-bg:#D42A42; --btn-bg-hover:#B5162F; --btn-text:#FFFFFF;
    --ghost-bg:#363636; --ghost-text:#F7F4EE; --ghost-line:#5A5550;
    --accent-line:#B8893A; --focus:#D9A85A;
    --badge-bg:#4A1F26; --badge-text:#FFC2CA; --badge-line:#7A2B37;
    --badge2-bg:#3D3324; --badge2-text:#E8C88E; --badge2-line:#6B5530;
    --featured-line:#7A2B37; --featured-bg:linear-gradient(135deg,#363636 0,#3A2D30 100%);
    --header-bg:rgba(43,43,43,.92); --footer-bg:#262626;
    --ph-bg:#4A3F14; --ph-line:#C9A227; --ph-text:#FFF4CC;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
    --mark-shadow:drop-shadow(0 10px 18px rgba(0,0,0,.35));
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#2B2B2B; --bg-shade:#262626; --surface:#363636; --surface-2:#313131;
  --text:#F7F4EE; --text-2:#E8E3DA; --muted:#D4CEC3; --line:#4A4744;
  --link:#FF8090; --link-hover:#FFA8B3;
  --btn-bg:#D42A42; --btn-bg-hover:#B5162F; --btn-text:#FFFFFF;
  --ghost-bg:#363636; --ghost-text:#F7F4EE; --ghost-line:#5A5550;
  --accent-line:#B8893A; --focus:#D9A85A;
  --badge-bg:#4A1F26; --badge-text:#FFC2CA; --badge-line:#7A2B37;
  --badge2-bg:#3D3324; --badge2-text:#E8C88E; --badge2-line:#6B5530;
  --featured-line:#7A2B37; --featured-bg:linear-gradient(135deg,#363636 0,#3A2D30 100%);
  --header-bg:rgba(43,43,43,.92); --footer-bg:#262626;
  --ph-bg:#4A3F14; --ph-line:#C9A227; --ph-text:#FFF4CC;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --mark-shadow:drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.6;color:var(--text);
  background:linear-gradient(180deg,var(--bg) 0,var(--bg-shade) 520px,var(--bg) 100%)}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:2px}
a:hover{color:var(--link-hover)}
a:focus-visible,.btn:focus-visible,.theme-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:var(--brand-charcoal);color:#FFFFFF;padding:8px 12px;z-index:10}
.skip:focus{left:8px;top:8px}

/* Logo swap: light lockup by default, reverse lockup (KHORNE in parchment) in dark */
.logo-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-light{display:none}
  :root:not([data-theme="light"]) .logo-dark{display:block}
}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}

/* Header */
.site-header{background:var(--header-bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;backdrop-filter:saturate(1.2) blur(6px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand img{height:40px;width:auto}
.header-right{display:flex;align-items:center;gap:18px}
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:15px}
.nav a:hover{color:var(--link)}
.theme-toggle{align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:999px;
  border:1px solid var(--ghost-line);background:var(--ghost-bg);color:var(--text);cursor:pointer}
.theme-toggle:hover{border-color:var(--accent-line)}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .icon-sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none}
}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
.theme-toggle{display:none}
.js .theme-toggle{display:inline-flex}

/* Hero */
.hero{padding:64px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid var(--accent-line);padding-bottom:2px;margin-bottom:14px}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(30px,4.6vw,46px);letter-spacing:-.01em}
h2{font-size:clamp(24px,3vw,32px)}
h3{font-size:19px}
.lead{font-size:19px;color:var(--text-2);max-width:38em}
.hero-mark{justify-self:center;width:min(220px,60%);filter:var(--mark-shadow)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-block;white-space:nowrap;padding:12px 20px;border-radius:10px;font-weight:700;text-decoration:none;font-size:16px;line-height:1.2;border:2px solid transparent}
.btn-primary{background:var(--btn-bg);color:var(--btn-text)}
.btn-primary:hover{background:var(--btn-bg-hover);color:var(--btn-text)}
.btn-ghost{background:var(--ghost-bg);color:var(--ghost-text);border-color:var(--ghost-line)}
.btn-ghost:hover{border-color:var(--accent-line);color:var(--ghost-text)}

/* Sections */
section{padding:40px 0}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--accent-line),transparent);opacity:.55;border:0;margin:0}
.about p{max-width:44em}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 0;padding:0;list-style:none}
.points li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.points strong{display:block;margin-bottom:4px}

/* Products */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.card img{aspect-ratio:1/1;width:100%;object-fit:cover;border-bottom:1px solid var(--line);background:var(--brand-parchment)}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0}
.card p{margin:0;color:var(--text-2);font-size:15.5px}
.card .meta{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding-top:8px}
.price{font-weight:800;font-size:20px}
.price small{font-weight:600;font-size:13px;color:var(--muted)}
.badge{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;
  background:var(--badge-bg);color:var(--badge-text);border:1px solid var(--badge-line);align-self:flex-start}
.badge.brass{background:var(--badge2-bg);color:var(--badge2-text);border-color:var(--badge2-line)}
.featured{grid-column:1/-1;flex-direction:row;border-color:var(--featured-line);background:var(--featured-bg)}
.featured img{width:min(300px,34%);aspect-ratio:1/1;border-bottom:0;border-right:1px solid var(--line)}
.featured .card-body{padding:24px 28px;justify-content:center}
.featured h3{font-size:24px}
.note{font-size:14.5px;color:var(--muted);margin-top:18px}

/* Legal pages */
.doc{padding:44px 0 24px}
.doc .wrap{max-width:820px}
.doc h2{margin-top:1.6em;font-size:24px}
.doc h3{margin-top:1.3em}
.doc table{border-collapse:collapse;width:100%;margin:12px 0;font-size:15.5px}
.doc th,.doc td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.doc th{background:var(--surface-2)}
.seller-table{table-layout:fixed}
.seller-table th{width:34%}
.seller-details{margin:0 0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.seller-details summary{cursor:pointer;padding:10px 14px;font-weight:700;color:var(--text);border-radius:10px;list-style-position:inside}
.seller-details summary:hover{color:var(--link)}
.seller-details summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.seller-details[open] summary{border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
.seller-details .seller-table{margin:12px 14px;width:calc(100% - 28px)}
.placeholder{background:var(--ph-bg);color:var(--ph-text);border:1px dashed var(--ph-line);padding:0 4px;border-radius:4px;font-weight:700}
.updated{color:var(--muted);font-size:15px}

/* Footer */
.site-footer{margin-top:40px;border-top:1px solid var(--line);background:var(--footer-bg);font-size:15px;color:var(--text-2)}
.site-footer .wrap{padding-top:28px;padding-bottom:28px;display:grid;grid-template-columns:1fr auto;gap:16px 24px;align-items:start}
.site-footer nav{display:flex;gap:16px;flex-wrap:wrap}
.site-footer a{color:var(--text)}
.site-footer p{margin:0 0 6px}
.fine{grid-column:1/-1;font-size:14px;color:var(--muted)}

@media (max-width:1000px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .hero{padding:40px 0 24px}
  .hero .wrap{grid-template-columns:1fr}
  .hero-mark{display:none}
  .grid,.points{grid-template-columns:1fr 1fr}
  .featured{flex-direction:column}
  .featured img{width:100%;border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  body{font-size:16px}
  .grid,.points{grid-template-columns:1fr}
  .brand img{height:32px}
  .site-header{position:static}
  .site-header .wrap{flex-wrap:wrap;gap:6px 12px;padding-top:12px;padding-bottom:10px}
  .header-right{width:100%;justify-content:space-between;order:2}
  .nav{gap:12px}
  .nav a{font-size:14.5px}
  .site-footer .wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}