/* Opifex Labs — opifex.in
   One stylesheet, token-driven. Light + dark via prefers-color-scheme, with an explicit
   [data-theme] override winning in both directions. No external requests. */

/* ---- self-hosted Outfit (headings only; body uses the system stack) ---- */
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/outfit-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/outfit-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/outfit-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/outfit-latin-700-normal.woff2") format("woff2")}

/* ---- tokens ---- */
:root{
  --ground:#F2F1EC; --ground-2:#EBE9E1; --card:#FBFAF7;
  --ink:#1B2028; --muted:#5D6470; --faint:#8A8F98;
  --bronze:#A96F2D; --bronze-ink:#8A5A22;
  --line:#DBD9D0; --line-strong:#C9C6BA;
  --warm:#EAE8E2;
  --shadow:0 1px 2px rgba(27,32,40,.04),0 8px 24px rgba(27,32,40,.06);
  --maxw:1080px; --measure:64ch; --radius:14px;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --display:"Outfit","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Mono",Consolas,ui-monospace,"SFMono-Regular",monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#14171D; --ground-2:#181C23; --card:#1C2026;
    --ink:#E8E9E6; --muted:#9AA0A8; --faint:#767C86;
    --bronze:#D9954A; --bronze-ink:#E0A968;
    --line:#2C313A; --line-strong:#3A404B;
    --warm:#EAE8E2;
    --shadow:0 1px 2px rgba(0,0,0,.2),0 10px 30px rgba(0,0,0,.28);
  }
}
:root[data-theme="light"]{
  --ground:#F2F1EC; --ground-2:#EBE9E1; --card:#FBFAF7;
  --ink:#1B2028; --muted:#5D6470; --faint:#8A8F98;
  --bronze:#A96F2D; --bronze-ink:#8A5A22;
  --line:#DBD9D0; --line-strong:#C9C6BA;
  --shadow:0 1px 2px rgba(27,32,40,.04),0 8px 24px rgba(27,32,40,.06);
}
:root[data-theme="dark"]{
  --ground:#14171D; --ground-2:#181C23; --card:#1C2026;
  --ink:#E8E9E6; --muted:#9AA0A8; --faint:#767C86;
  --bronze:#D9954A; --bronze-ink:#E0A968;
  --line:#2C313A; --line-strong:#3A404B;
  --shadow:0 1px 2px rgba(0,0,0,.2),0 10px 30px rgba(0,0,0,.28);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; min-height:100vh;
}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.12; text-wrap:balance; margin:0}
h1{font-size:clamp(2.1rem,5.2vw,3.4rem); letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3vw,2.05rem); letter-spacing:-.015em}
h3{font-size:1.2rem; letter-spacing:-.01em}
p{margin:0}
a{color:var(--bronze-ink); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--bronze); outline-offset:3px; border-radius:3px}
img,svg{max-width:100%}

/* ---- layout primitives ---- */
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.stack>*+*{margin-top:1.1rem}
.eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); margin:0}
.lede{font-size:1.2rem; color:var(--muted); max-width:var(--measure)}
.prose{max-width:var(--measure)}
.prose p{color:var(--muted); margin-top:1rem}
.prose h2{margin-top:2.4rem; color:var(--ink)}
.prose h3{margin-top:1.8rem; color:var(--ink)}
.prose ul{margin:1rem 0 0; padding-left:1.2rem; color:var(--muted)}
.prose li{margin-top:.5rem}
.prose strong{color:var(--ink); font-weight:600}
.tofill{background:color-mix(in srgb,var(--bronze) 16%,transparent); color:var(--bronze-ink);
  padding:.05em .4em; border-radius:4px; font-family:var(--mono); font-size:.86em; font-style:normal}

/* ---- header ---- */
.site-header{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter:saturate(1.1) blur(10px); border-bottom:1px solid var(--line)}
.site-header .container{display:flex; align-items:center; gap:20px; height:66px}
.brand{display:inline-flex; align-items:center; gap:11px; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand svg{height:34px; width:auto; display:block}
.brand .wm-svg{height:27px} /* the pathed wordmark master, theme-adaptive */
.nav{margin-left:auto; display:flex; align-items:center; gap:6px}
.nav a{color:var(--muted); font-size:.95rem; padding:8px 12px; border-radius:8px}
.nav a:hover{color:var(--ink); background:var(--ground-2); text-decoration:none}
.nav a[aria-current="page"]{color:var(--ink)}
.theme-toggle{background:none; border:1px solid var(--line); color:var(--muted); cursor:pointer;
  width:38px; height:38px; border-radius:9px; display:inline-grid; place-items:center; margin-left:6px}
.theme-toggle:hover{color:var(--ink); border-color:var(--line-strong)}
.theme-toggle svg{height:18px;width:18px}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun,@media (prefers-color-scheme:dark){.theme-toggle .sun{display:none}}
:root[data-theme="dark"] .theme-toggle .moon{display:block}
@media (prefers-color-scheme:dark){.theme-toggle .moon{display:block}}
:root[data-theme="light"] .theme-toggle .sun{display:block}
:root[data-theme="light"] .theme-toggle .moon{display:none}

/* ---- main / sections ---- */
main{flex:1 0 auto}
.section{padding-block:clamp(3rem,7vw,5.5rem)}
.section--tight{padding-block:clamp(2rem,4vw,3rem)}
.hero{padding-top:clamp(3.5rem,9vw,7rem); padding-bottom:clamp(3rem,7vw,5rem)}
.hero h1{margin-top:.6rem}
.hero .lede{margin-top:1.3rem}
.hero-mark{height:120px;width:auto;margin-bottom:.5rem}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.98rem;
  padding:.72em 1.25em; border-radius:10px; border:1px solid transparent; cursor:pointer}
.btn--primary{background:var(--ink); color:var(--ground)}
.btn--primary:hover{text-decoration:none; opacity:.9}
.btn--ghost{border-color:var(--line-strong); color:var(--ink)}
.btn--ghost:hover{text-decoration:none; border-color:var(--ink); background:var(--ground-2)}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:1.8rem}

/* ---- cards / products ---- */
.grid{display:grid; gap:18px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.grid--2,.grid--3{grid-template-columns:1fr}}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.card h3{margin-bottom:.3rem}
.card p{color:var(--muted); font-size:.97rem}
.tick{display:inline-flex; align-items:center; gap:.5em; font-size:.82rem; color:var(--muted); font-family:var(--mono)}
.tick svg{height:15px;width:auto}
.pill{display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bronze); border:1px solid color-mix(in srgb,var(--bronze) 40%,transparent); border-radius:999px; padding:3px 9px}

/* ---- pricing ---- */
.price-table{width:100%; border-collapse:collapse; margin-top:1.5rem; font-size:.97rem}
.price-table th,.price-table td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--line)}
.price-table th{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:500}
.price-table td:last-child{text-align:right; font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto}

/* ---- footer ---- */
.site-footer{flex-shrink:0; border-top:1px solid var(--line); background:var(--ground-2); margin-top:auto}
.site-footer .container{padding-block:40px; display:grid; gap:28px; grid-template-columns:1.4fr 1fr 1fr}
@media (max-width:760px){.site-footer .container{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.site-footer .container{grid-template-columns:1fr}}
.foot-brand p{color:var(--muted); font-size:.9rem; margin-top:.8rem; max-width:34ch}
.foot-col h4{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:500; margin-bottom:.8rem}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.foot-col a{color:var(--muted); font-size:.92rem}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{border-top:1px solid var(--line); }
.foot-bottom .container{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-block:18px; font-size:.82rem; color:var(--faint)}
.foot-bottom .container p{margin:0}

/* ---- misc ---- */
.notice{background:color-mix(in srgb,var(--bronze) 8%,var(--card)); border:1px solid color-mix(in srgb,var(--bronze) 30%,var(--line));
  border-radius:12px; padding:16px 18px; font-size:.93rem; color:var(--muted)}
.notice strong{color:var(--ink)}
.updated{font-family:var(--mono); font-size:.76rem; color:var(--faint); margin-top:.4rem}
.centered-404{min-height:56vh; display:grid; place-content:center; text-align:center; gap:1rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}