/* Layout: verkstedvegg – navn og kort intro øverst, appene som kort i et rutenett under */
:root{
  --bg:#F2F3F6; --surface:#FFFFFF; --ink:#15171C; --muted:#5A6170; --line:#D8DBE2;
  --accent:#2B3FD6; --on-accent:#FFFFFF; --soft:#E6E9F8; --title:#E8B400;
  --display:"Syne","Arial Black",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101217; --surface:#191C23; --ink:#ECEEF2; --muted:#9BA2AF; --line:#2C313B;
    --accent:#8C9BFF; --on-accent:#0D1020; --soft:#232945; --title:#FFD43B; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#101217; --surface:#191C23; --ink:#ECEEF2; --muted:#9BA2AF; --line:#2C313B;
  --accent:#8C9BFF; --on-accent:#0D1020; --soft:#232945; --title:#FFD43B; color-scheme:dark;
}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55}
[hidden]{display:none!important}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding-block:48px 72px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;gap:40px}
h1{color:var(--title);font-family:var(--display);font-weight:800;font-size:clamp(22px,calc((100vw - 32px) / 11),80px);line-height:.95;letter-spacing:-.025em;margin:0;text-wrap:balance;overflow-wrap:break-word}
.lead{max-width:60ch;color:var(--muted);margin:14px 0 0;font-size:17px}
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
.app{display:grid;grid-template-rows:auto 1fr;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.app:hover{border-color:var(--accent);transform:translateY(-2px)}
.app:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.strip{display:flex;height:96px}
.strip span{flex:1}
.body{display:grid;gap:10px;padding:18px 20px 20px;align-content:start}
.app h2{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.1;margin:0}
.app p{margin:0;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12px;font-weight:500;padding:2px 9px;border-radius:999px;background:var(--soft);color:var(--ink)}
.open{font-weight:600;color:var(--accent);margin-top:4px}
footer{color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:16px}
@media (prefers-reduced-motion: reduce){.app{transition:none}.app:hover{transform:none}}