/*
Theme Name: oysteinsen
Description: Farveblok-design til oysteinsen.com
Version: 1.0
Text Domain: oysteinsen
*/
:root{--paper:oklch(0.96 0.03 90);--field:oklch(0.985 0.012 90);--ink:oklch(0.25 0.04 30);--coral:oklch(0.85 0.1 25);--sky:oklch(0.85 0.1 200);--grass:oklch(0.87 0.1 130);--lilac:oklch(0.87 0.1 300);--sun:oklch(0.88 0.1 70);--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;font-size:17px;line-height:1.45}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:960px;margin:0 auto;padding:24px}
.hd{display:flex;justify-content:space-between;align-items:baseline;padding:4px 12px 16px;font-weight:600}
.hd .brand{font-size:19px}.hd .lang{font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.top{grid-column:1/-1}
.hero{grid-column:span 2;background:var(--coral);border-radius:32px;padding:36px;min-height:280px;display:flex;align-items:flex-end}
.hero h1{margin:0;font-size:clamp(34px,6vw,60px);line-height:1.02;font-weight:700;letter-spacing:-0.03em;text-wrap:balance}
.intro{background:var(--sky);border-radius:32px;padding:28px;font-size:18px;line-height:1.4;display:flex;align-items:flex-start}
.card{display:flex;flex-direction:column;justify-content:space-between;gap:56px;min-height:230px;border-radius:32px;padding:26px;transition:transform .15s}
.card:hover{transform:translateY(-3px);text-decoration:none}
.card .meta{display:flex;justify-content:space-between;font-size:14px;font-weight:600}
.card .title{font-size:28px;font-weight:700;letter-spacing:-0.02em;line-height:1.1}
.card .desc{font-size:16px;margin-top:8px}
.ft{margin-top:16px;background:var(--ink);color:var(--paper);border-radius:32px;padding:16px 28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-weight:600;font-size:16px}
.ft a{color:inherit}.ft nav{display:flex;gap:20px}.ft .sys{opacity:.7}
.tile{background:var(--field);border-radius:32px;padding:28px;margin-bottom:16px}
.lbl{font-family:var(--mono);font-size:13px;margin-bottom:16px}
.sw{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.sw i{display:block;height:72px;border-radius:20px}
.sw b{display:block;font-size:14px;margin-top:6px}
.sw code{font-family:var(--mono);font-size:11px;opacity:.7}
.spec{font-family:var(--mono);font-size:12px;opacity:.7}
.demo{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.demo>div{width:260px;min-height:200px}