/* Grondwerk: shared site styles */

:root{
  --bg:#fbf7f1;
  --bg-sink:#f4ece1;
  --surface:#ffffff;
  --ink:#241a12;
  --muted:#6b5d51;
  --accent:#b4541f;
  --accent-ink:#fbf7f1;
  --line:#e4dacb;
  --line-soft:#efe6da;
  --glow:rgba(196,98,45,.13);
  --shadow:0 1px 2px rgba(36,26,18,.05), 0 8px 24px -12px rgba(36,26,18,.18);
  --radius:14px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#16110e;
    --bg-sink:#1c1512;
    --surface:#201814;
    --ink:#f2eae0;
    --muted:#a8988a;
    --accent:#e68e4f;
    --accent-ink:#241a12;
    --line:#322620;
    --line-soft:#2a201b;
    --glow:rgba(230,142,79,.12);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.wrap-wide{max-width:940px;margin:0 auto;padding:0 20px}

h1,h2,h3{line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(1.9rem,1.4rem + 2.2vw,2.7rem);margin:0}
h2{font-size:1.2rem;margin:2.4rem 0 .7rem;letter-spacing:.005em}
h3{font-size:1rem;margin:1.5rem 0 .4rem}
p{margin:0 0 1rem;text-wrap:pretty}

a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

code{font-family:var(--mono);font-size:.9em;background:var(--bg-sink);padding:.12em .38em;border-radius:4px}

/* ---------- site chrome ---------- */

.topbar{border-bottom:1px solid var(--line-soft)}
.topbar .wrap-wide,.topbar .wrap{display:flex;align-items:center;gap:10px;height:60px}
.topbar a.home{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--ink);text-decoration:none;font-weight:600;letter-spacing:-.01em;
}
.topbar a.home:hover{color:var(--accent)}
.topbar svg{width:26px;height:26px;display:block}
.topbar nav{margin-left:auto;display:flex;gap:20px;font-size:.92rem}
.topbar nav a{color:var(--muted);text-decoration:none}
.topbar nav a:hover{color:var(--accent)}

.site-footer{
  margin-top:80px;border-top:1px solid var(--line-soft);
  padding:26px 0 44px;color:var(--muted);font-size:.9rem;
}
.site-footer .wrap-wide,.site-footer .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
.site-footer nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px 20px}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--accent)}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border-radius:10px;
  background:var(--accent);color:var(--accent-ink);
  font-weight:600;font-size:.97rem;text-decoration:none;
  border:1px solid transparent;
  transition:transform .12s ease,filter .12s ease;
}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:0 0 18px}

.btn-ghost{
  background:transparent;color:var(--ink);border-color:var(--line);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:26px 0 0}

/* ---------- badges ---------- */

.badge{
  display:inline-block;padding:3px 10px;border-radius:999px;
  background:var(--bg-sink);border:1px solid var(--line);
  color:var(--muted);font-size:.75rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
}
.badge-accent{background:var(--glow);border-color:transparent;color:var(--accent)}

/* ---------- cards ---------- */

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;
}
.card h2{margin-top:0}

/* ---------- tables ---------- */

.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;margin:.6rem 0 0;font-size:.95rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
tr:last-child td{border-bottom:0}

ul{padding-left:1.2rem}
li{margin:.35rem 0}