/* tv.líf.is: sami handteiknaði stíll og forsíða líf.is og appið í stofunni. */
@font-face{font-family:'Yuanmo';src:url('/letur/yuanmo.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Yuanmo';src:url('/letur/eth.ttf') format('truetype');font-display:swap;unicode-range:U+00F0}
@font-face{font-family:'Jinkies';src:url('/letur/High_Jinkies.woff2') format('woff2');font-display:swap}

:root{
 --ink:#2a2633;--soft:#6a6475;--paper:#fffbf0;--page:#f6f1e3;--deep:#231d38;
 --gul:#f7d44c;--graen:#8fd18b;--bleik:#f6a5c9;--bla:#8ccaf2;--raud:#f07a63;--fjola:#b9a3e8;
 --gul-t:#fff3c4;--graen-t:#e2f5dc;--bleik-t:#fde3ef;--bla-t:#ddf0fc;--raud-t:#fde0d8;--fjola-t:#ece5fb;
 --hand:'Yuanmo','Comic Sans MS','Chalkboard SE',cursive;
 --body:ui-rounded,'SF Pro Rounded',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
 color-scheme:light dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:18px/1.6 var(--body);overflow-x:hidden}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
:focus-visible{outline:3px dashed var(--ink);outline-offset:4px}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 max(16px,4vw)}

/* Haus með tannaðri bleklínu, eins og á forsíðunni */
.top{position:relative;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px max(16px,4vw)}
.top::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:6px;background:var(--ink);clip-path:polygon(0 30%,8% 55%,19% 25%,33% 60%,47% 30%,61% 58%,74% 28%,88% 62%,100% 35%,100% 70%,88% 90%,74% 62%,61% 92%,47% 64%,33% 94%,19% 60%,8% 88%,0 66%)}
.brand{display:grid;text-decoration:none;line-height:.85;transform:rotate(-3deg)}
.brand b{font:400 50px var(--hand);letter-spacing:-1px}
.brand b i{font-style:normal;color:#6fb38a}
.brand small{font:15px var(--hand);color:var(--soft);margin-left:5px}
.top nav{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.top nav a{font:20px var(--hand);text-decoration:none;padding:6px 14px 4px;border:2.5px solid var(--ink);border-radius:14px 9px 16px 8px;background:var(--paper);box-shadow:3px 3px 0 var(--ink)}
.top nav a[aria-current]{background:var(--gul)}

/* Hetjan */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;padding:46px 0 30px}
.hero h1{font:400 clamp(44px,7vw,84px)/.95 var(--hand);margin:0 0 18px;transform:rotate(-2deg)}
.mind{display:inline-block;background:var(--bleik);border:3px solid var(--ink);border-radius:18px 10px 20px 12px;padding:0 14px 4px;box-shadow:4px 4px 0 var(--ink);transform:rotate(3deg)}
.hero p{font-size:19px;color:var(--soft);margin:0 0 20px;max-width:520px}
.badge{display:inline-block;font:22px var(--hand);background:var(--fjola);border:2.5px solid var(--ink);border-radius:18px 12px 20px 10px;padding:8px 18px 6px;box-shadow:3px 3px 0 var(--ink);transform:rotate(2deg)}
.shot{border:3px solid var(--ink);border-radius:22px 14px 26px 12px;box-shadow:7px 8px 0 var(--ink);overflow:hidden;background:var(--paper);transform:rotate(1deg)}
.shot.l{transform:rotate(-1.2deg)}

/* Eiginleikar */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;padding:20px 0 40px}
.card{position:relative;padding:20px 20px 16px;background:var(--t,var(--paper));border:2.5px solid var(--ink);border-radius:20px 13px 24px 12px;box-shadow:5px 6px 0 var(--c,var(--ink))}
.card:nth-child(3n+1){border-radius:13px 24px 12px 20px}
.card:nth-child(3n+2){border-radius:24px 12px 20px 16px}
.card h3{font:400 28px/1.05 var(--hand);margin:0 0 8px}
.card p{margin:0;font-size:16px;line-height:1.5}
.c-gul{--c:var(--gul);--t:var(--gul-t)}.c-graen{--c:var(--graen);--t:var(--graen-t)}.c-bleik{--c:var(--bleik);--t:var(--bleik-t)}.c-bla{--c:var(--bla);--t:var(--bla-t)}.c-raud{--c:var(--raud);--t:var(--raud-t)}.c-fjola{--c:var(--fjola);--t:var(--fjola-t)}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;padding:10px 0 50px}
.gallery figure{margin:0}
.gallery figcaption{font:20px var(--hand);margin-top:12px}

/* Textasíður */
.doc{max-width:780px;margin:0 auto;padding:40px max(16px,4vw) 60px}
.doc h1{font:400 clamp(40px,6vw,64px)/1 var(--hand);margin:0 0 10px;transform:rotate(-2deg)}
.doc h2{font:400 30px/1.1 var(--hand);margin:38px 0 8px}
.doc .lead{color:var(--soft);font-size:19px}
.tag{display:inline-block;font:400 18px var(--hand);background:var(--gul);border:2px solid var(--ink);border-radius:9px 6px 10px 5px;padding:2px 10px 0;transform:rotate(-3deg)}
.note{background:var(--paper);border:2.5px solid var(--ink);border-radius:18px 12px 20px 10px;box-shadow:4px 5px 0 var(--bla);padding:16px 20px;margin:24px 0}
.en{margin-top:56px;padding-top:30px;border-top:3px dashed var(--soft)}
kbd{font:600 15px var(--body);padding:1px 7px;border:2px solid var(--ink);border-radius:7px;background:var(--paper)}
dl dt{font:400 22px var(--hand);margin-top:16px}
dl dd{margin:2px 0 0}

.foot{text-align:center;color:var(--soft);font-size:14px;padding:20px 16px 40px}

@media (max-width:760px){
 .hero{grid-template-columns:1fr;padding-top:30px}
 .top nav{margin-left:0}
}
@media (prefers-color-scheme:dark){
 :root:not([data-theme=light]){--page:var(--deep);--ink:#2a2633;--soft:#cfc8dd}
 body{color:var(--paper)}
 .card,.note,.shot,.top nav a,.badge,.mind,.tag,kbd{color:var(--ink)}
 .top::after{background:var(--paper);opacity:.5}
 .brand b,.hero h1,.doc h1,.doc h2,.gallery figcaption{color:var(--paper)}
 .hero h1 .mind{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}