/* Grafikverket — designtokens. Papper + tryckfärg: ett verk, inte en app. */
:root{
  --papper:#F1EEE6; --papper2:#E9E4D8; --kol:#14130F; --kol2:#3A3831; --dis:#7A766B; --linje:#D6D0C2;
  --magenta:#E5007D; --cyan:#00A7E1; --gul:#FFD200; --vit:#FFFFFF;
  --bg:var(--papper); --fg:var(--kol); --fg2:var(--kol2); --mut:var(--dis); --kort:var(--vit); --ram:var(--linje); --acc:var(--magenta);
  --r:14px; --gutter:16px; --max:1180px;
  --display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif; --body:"Instrument Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#14130F; --fg:#F1EEE6; --fg2:#D9D4C7; --mut:#9B968A; --kort:#1D1B16; --ram:#2C2A23; --papper2:#1D1B16; } }
:root[data-theme="dark"]{ --bg:#14130F; --fg:#F1EEE6; --fg2:#D9D4C7; --mut:#9B968A; --kort:#1D1B16; --ram:#2C2A23; --papper2:#1D1B16; }
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit} img{max-width:100%;display:block} button,input,textarea{font:inherit;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
.etikett{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(38px,7vw,84px);line-height:.98;font-variation-settings:"opsz" 96,"wdth" 90}
h2{font-size:clamp(28px,4vw,44px);line-height:1.05}
h3{font-size:20px}
p{margin:0}
.lead{font-size:clamp(17px,2vw,21px);color:var(--fg2);max-width:34em}
.reg{display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-radius:50%;position:relative;vertical-align:-2px}
.reg::before,.reg::after{content:"";position:absolute;background:currentColor}
.reg::before{left:50%;top:-3px;bottom:-3px;width:1.5px;transform:translateX(-50%)}
.reg::after{top:50%;left:-3px;right:-3px;height:1.5px;transform:translateY(-50%)}
/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--ram)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.marke{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.06em;text-decoration:none;display:flex;align-items:center;gap:10px}
.marke .reg{color:var(--magenta)}
.marke svg.logo{height:24px;width:auto;display:block;color:var(--fg)}
.marke .ordtext{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:.04em;font-variation-settings:"wdth" 85;color:var(--fg)}.marke .ordtext b{font-weight:800;color:var(--magenta)}
.marke svg.ikon{height:30px;width:30px;display:block;flex:none}
@media (max-width:480px){.marke svg.logo{height:20px}.marke svg.ikon{height:26px;width:26px}.marke .ordtext{font-size:18px}}
.top nav{display:flex;gap:6px;align-items:center}
.knapp{border:0;border-radius:999px;padding:11px 18px;font-weight:600;cursor:pointer;background:var(--fg);color:var(--bg);transition:transform .12s ease,opacity .12s}
.knapp:hover{transform:translateY(-1px)} .knapp:disabled{opacity:.45;cursor:wait;transform:none}
.knapp.acc{background:var(--acc);color:#fff}
.knapp.lugn{background:transparent;color:var(--fg);border:1.5px solid var(--ram)}
.knapp.liten{padding:8px 14px;font-size:14px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ram);border-radius:999px;padding:7px 12px;font-size:14px;background:var(--kort)}
.chip b{font-family:var(--mono);font-weight:600}
/* hero */
.hero{padding:56px 0 24px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.hero h1 em{font-style:normal;color:var(--magenta)}
.hero .lead{margin-top:18px}
.verk{margin-top:28px;background:var(--kort);border:1px solid var(--ram);border-radius:var(--r);padding:18px;box-shadow:0 30px 60px -40px rgba(0,0,0,.45)}
.verk .rad{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.verk .rad{grid-template-columns:1fr}}
.falt{display:flex;flex-direction:column;gap:6px}
.falt label{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
input,textarea{width:100%;background:var(--bg);border:1.5px solid var(--ram);border-radius:10px;padding:12px 14px;outline:none}
input:focus,textarea:focus{border-color:var(--fg)} textarea{min-height:86px;resize:vertical}
.verk .cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}
.verk .cta small{color:var(--mut)}
.status{min-height:22px;color:var(--mut);margin-top:12px;font-family:var(--mono);font-size:13px}
/* provark (galleri i hero) */
.provark{position:relative;background:var(--papper2);border:1px solid var(--ram);border-radius:var(--r);padding:22px;overflow:hidden;min-height:420px}
.provark .etikett{display:flex;justify-content:space-between}
.ark{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.ark .lapp{background:var(--vit);border-radius:10px;aspect-ratio:1;padding:12px;position:relative;overflow:hidden;animation:in .6s ease backwards}
.ark .lapp img{width:100%;height:100%;object-fit:contain}
.ark .lapp:nth-child(2n){animation-delay:.08s}.ark .lapp:nth-child(3n){animation-delay:.16s}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hornen{position:absolute;inset:12px;pointer-events:none}
.hornen i{position:absolute;width:12px;height:12px;border:1.5px solid var(--fg);opacity:.35}
.hornen i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.hornen i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.hornen i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.hornen i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.cmyk{display:flex;gap:6px;margin-top:14px}.cmyk i{width:22px;height:10px;border-radius:2px}
.cmyk i:nth-child(1){background:var(--cyan)}.cmyk i:nth-child(2){background:var(--magenta)}.cmyk i:nth-child(3){background:var(--gul)}.cmyk i:nth-child(4){background:var(--kol)}
/* resultat */
.resultat{padding:8px 0 40px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.k{background:#fff;border-radius:12px;overflow:hidden;cursor:pointer;border:2.5px solid transparent;position:relative;aspect-ratio:1;transition:transform .15s,border-color .15s}
.k:hover{transform:translateY(-2px)} .k img{width:100%;height:100%;object-fit:contain} .k.vald{border-color:var(--magenta)}
.k small{position:absolute;left:8px;bottom:6px;background:#000c;color:#fff;border-radius:6px;padding:2px 7px;font-family:var(--mono);font-size:11px}
.k.fel{opacity:.5}
.k.vantar{background:var(--kort);cursor:default;border:1.5px dashed var(--ram)}
.k.vantar::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:2.5px solid var(--ram);border-top-color:var(--magenta);border-radius:50%;animation:sn .9s linear infinite}
@keyframes sn{to{transform:rotate(360deg)}}
.k.las{background:var(--kort);border:1.5px solid var(--ram);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center}
.k.las b{font-family:var(--display);font-size:20px;line-height:1.1}.k.las span{color:var(--mut);font-size:13px}
.kop{margin-top:16px;background:var(--kort);border:1px solid var(--ram);border-radius:var(--r);padding:18px;display:none;gap:18px;grid-template-columns:200px 1fr;align-items:center}
.kop.visa{display:grid} @media (max-width:640px){.kop{grid-template-columns:1fr}}
.kop .bild{background:#fff;border-radius:10px;aspect-ratio:1;overflow:hidden}.kop .bild img{width:100%;height:100%;object-fit:contain}
.kop ul{margin:8px 0 12px;padding:0;list-style:none;display:grid;gap:4px;font-family:var(--mono);font-size:13px}
.kop ul li::before{content:"■ ";color:var(--magenta)}
.ned a{display:inline-flex;align-items:center;gap:8px;margin:6px 10px 0 0;font-weight:600}
/* sektioner */
section.del{padding:56px 0;border-top:1px solid var(--ram)}
.tre{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
@media (max-width:760px){.tre{grid-template-columns:1fr}}
.steg{background:var(--kort);border:1px solid var(--ram);border-radius:var(--r);padding:20px}
.steg .n{font-family:var(--mono);color:var(--magenta);font-size:12px;letter-spacing:.14em}
.steg h3{margin:8px 0 6px}.steg p{color:var(--fg2)}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ram);border-radius:var(--r);overflow:hidden;margin-top:28px;background:var(--kort)}
@media (max-width:760px){.spec{grid-template-columns:1fr}}
.spec div{padding:18px 20px;border-bottom:1px solid var(--ram)}.spec div:nth-child(odd){border-right:1px solid var(--ram)}
@media (max-width:760px){.spec div:nth-child(odd){border-right:0}}
.spec b{display:block;font-family:var(--display);font-size:18px;margin-bottom:4px}.spec span{font-family:var(--mono);font-size:12.5px;color:var(--mut)}
.pris{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:14px;margin-top:28px}
@media (max-width:900px){.pris{grid-template-columns:1fr 1fr}} @media (max-width:560px){.pris{grid-template-columns:1fr}}
.pk{background:var(--kort);border:1px solid var(--ram);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px}
.pk.fri{background:var(--fg);color:var(--bg)} .pk .stor{font-family:var(--display);font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1}
.pk .stor small{font-size:15px;font-weight:600;letter-spacing:0;margin-left:6px}.pk p{color:inherit;opacity:.8;font-size:14px}.pk .knapp{margin-top:auto;align-self:flex-start}
.faq{margin-top:28px;border-top:1px solid var(--ram)}
.faq details{border-bottom:1px solid var(--ram);padding:14px 0}.faq summary{cursor:pointer;font-weight:600;font-family:var(--display);font-size:18px;list-style:none;display:flex;justify-content:space-between}
.faq summary::after{content:"+";color:var(--magenta)}.faq details[open] summary::after{content:"–"}.faq p{margin-top:8px;color:var(--fg2);max-width:60ch}
footer{border-top:1px solid var(--ram);padding:28px 0 40px;color:var(--mut);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer a{margin-right:14px}
/* modal + panel */
.overlag{position:fixed;inset:0;background:#0007;display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.overlag.visa{display:flex}
.modal{background:var(--kort);color:var(--fg);border-radius:var(--r);padding:24px;width:100%;max-width:440px;border:1px solid var(--ram);box-shadow:0 40px 80px -30px #000}
.modal h3{font-size:24px;margin-bottom:4px}.modal .u{color:var(--mut);font-size:14px;margin-bottom:16px}
.flikar{display:flex;gap:6px;margin-bottom:14px}.flikar button{background:transparent;border:1.5px solid var(--ram);border-radius:999px;padding:7px 14px;cursor:pointer}.flikar button.aktiv{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.modal .falt{margin-bottom:10px}.modal .fel{color:var(--magenta);font-size:14px;min-height:20px;margin:6px 0}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--kort);border-left:1px solid var(--ram);z-index:40;transform:translateX(100%);transition:transform .25s ease;padding:24px;overflow:auto}
.panel.visa{transform:none}
.panel h3{font-size:24px}.panel .rad2{display:flex;justify-content:space-between;align-items:center;margin:14px 0}
.panel ul{list-style:none;padding:0;margin:8px 0}.panel li{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--ram);font-size:14px}
.panel .paket{display:grid;gap:8px;margin:10px 0 18px}.panel .paket button{display:flex;justify-content:space-between;background:var(--bg);border:1.5px solid var(--ram);border-radius:10px;padding:12px 14px;cursor:pointer}
.stang{background:transparent;border:0;font-size:22px;cursor:pointer;color:var(--mut)}
:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}