/* Tyngdekraft — felles stilark for tørrmur og laft */
:root{
  --bg:#F3EEE4; --surface:#EAE3D4; --surface-2:#E2DACA; --ink:#1E1B16; --muted:#6B6355;
  --line:#D5CBB8; --accent:#8E6E36; --accent-ink:#F3EEE4;
  --serif:Georgia,'Iowan Old Style','Palatino Linotype',Palatino,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --gutter:clamp(18px,6vw,110px); --measure:36em; --ease:cubic-bezier(.2,0,0,1);
  --radius:4px;
}
:root[data-craft="laft"]{ --accent:#9A5B2C; }
:root[data-craft="stein"]{ --accent:#6F7A66; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --bg:#15130F; --surface:#1E1A14; --surface-2:#262117; --ink:#EAE3D5; --muted:#9A907F; --line:#332C21; --accent:#C9A567; --accent-ink:#15130F; }
  :root:not([data-theme="light"])[data-craft="laft"]{ --accent:#D1915A; }
  :root:not([data-theme="light"])[data-craft="stein"]{ --accent:#A7B39B; }
}
:root[data-theme="dark"]{ --bg:#15130F; --surface:#1E1A14; --surface-2:#262117; --ink:#EAE3D5; --muted:#9A907F; --line:#332C21; --accent:#C9A567; --accent-ink:#15130F; }
:root[data-theme="dark"][data-craft="laft"]{ --accent:#D1915A; }
:root[data-theme="dark"][data-craft="stein"]{ --accent:#A7B39B; }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:70px}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.45; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E")}
:root[data-theme="dark"] body::before{mix-blend-mode:screen; opacity:.5}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body::before{mix-blend-mode:screen; opacity:.5} }
::selection{background:var(--accent); color:var(--accent-ink)}
a{color:inherit; text-decoration-color:var(--accent); text-underline-offset:3px}
img,svg{max-width:100%}
h1,h2,h3,h4{font-weight:400; margin:0; line-height:1.12; letter-spacing:-.01em}
p{margin:0 0 1.05em}
.sans{font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em; font-weight:500; font-size:.72rem}
.mono{font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; color:var(--muted)}
.muted{color:var(--muted)}
.measure{max-width:var(--measure)}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--bg); padding:10px 16px; z-index:200}
.skip:focus{left:8px; top:8px}

/* topplinje */
header.bar{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(8px) saturate(120%); -webkit-backdrop-filter:blur(8px) saturate(120%); border-bottom:1px solid var(--line)}
.bar-in{display:flex; align-items:center; gap:18px; padding:12px var(--gutter)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.26em; text-transform:uppercase; white-space:nowrap}
.brand svg{width:14px; height:28px; display:block; color:var(--accent)}
.brand small{font-weight:400; letter-spacing:.14em; color:var(--muted); display:none}
@media(min-width:760px){.brand small{display:inline}}
nav.main{margin-left:auto; display:flex; align-items:center; gap:4px 18px; flex-wrap:wrap; justify-content:flex-end}
nav.main a{font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; color:var(--muted); padding:6px 0; border-bottom:1px solid transparent}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}
nav.main a.cta{color:var(--accent-ink); background:var(--accent); padding:8px 14px; border-radius:var(--radius); border:0}
nav.main a.cta:hover{filter:brightness(1.08)}
@media(max-width:640px){ nav.main a:not(.cta):not(.keep){display:none} }
.theme{background:none; border:1px solid var(--line); color:var(--muted); width:30px; height:30px; border-radius:50%; cursor:pointer; display:grid; place-items:center; padding:0}
.theme:hover{color:var(--ink)}

/* loddsnor */
#spine{position:absolute; top:0; bottom:0; left:var(--gutter); width:1px; z-index:1; pointer-events:none; background:var(--accent); opacity:.22}
@media(max-width:700px){#spine{display:none}}

main{position:relative; z-index:2}
section{padding:clamp(56px,9vw,120px) var(--gutter); position:relative}
section.tight{padding-top:clamp(36px,6vw,70px); padding-bottom:clamp(36px,6vw,70px)}
.eyebrow{display:flex; align-items:baseline; gap:14px; margin:0 0 26px}
.eyebrow .plate{color:var(--accent)}
h2.head{font-size:clamp(1.7rem,3.8vw,2.8rem); margin:0 0 .6em}
h3.sub{font-size:clamp(1.2rem,2.2vw,1.5rem); margin:0 0 .5em}
p.lede{font-size:1.15rem}
.rule{height:1px; background:var(--line); border:0; margin:0}
.reveal{opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* hero */
.hero{min-height:78vh; display:flex; flex-direction:column; justify-content:flex-end; padding-top:clamp(40px,8vw,80px); padding-bottom:clamp(36px,6vw,70px)}
.hero .eyebrow{margin-bottom:auto}
h1.display{font-size:clamp(2.6rem,9vw,6.4rem); line-height:1.0; letter-spacing:-.02em; margin:.1em 0 0 -.03em}
h1.display .l{display:block}
.hero-sub{font-style:italic; font-size:clamp(1.1rem,2vw,1.4rem); color:var(--muted); max-width:28em; margin:1.2em 0 0}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; padding:13px 20px; border-radius:var(--radius); border:1px solid var(--ink); color:var(--ink); background:transparent; cursor:pointer; transition:background .25s,color .25s}
.btn:hover{background:var(--ink); color:var(--bg)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08); background:var(--accent); color:var(--accent-ink)}
.btn.small{padding:9px 14px; font-size:.68rem}
.btn[aria-disabled="true"]{opacity:.5; pointer-events:none}
.hero-facts{display:flex; gap:28px 40px; flex-wrap:wrap; margin-top:36px; padding-top:22px; border-top:1px solid var(--line)}
.hero-facts div{min-width:120px}
.hero-facts b{display:block; font-weight:400; font-size:1.3rem; line-height:1.1}
.hero-facts span{font-family:var(--sans); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

/* to-dørs forside */
.doors{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line)}
@media(min-width:800px){.doors{grid-template-columns:1fr 1fr}}
.door{background:var(--bg); padding:clamp(28px,4vw,56px); text-decoration:none; display:flex; flex-direction:column; gap:18px; min-height:420px; position:relative; transition:background .3s}
.door:hover{background:var(--surface)}
.door h2{font-size:clamp(2rem,4.5vw,3.4rem); line-height:1}
.door .pic{height:150px; display:flex; align-items:flex-end}
.door .pic svg{width:100%; height:100%; color:var(--accent)}
.door p{color:var(--muted); max-width:30em}
.door .go{margin-top:auto; font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent)}

/* kolonner */
.cols{display:grid; gap:34px 48px; grid-template-columns:1fr}
@media(min-width:860px){.cols{grid-template-columns:1fr 1fr}}
.cols.three{grid-template-columns:1fr}
@media(min-width:860px){.cols.three{grid-template-columns:1fr 1fr 1fr}}
.split{display:grid; gap:36px 60px; grid-template-columns:1fr; align-items:start}
@media(min-width:900px){.split{grid-template-columns:5fr 7fr}}
.split.rev{direction:ltr}
.figure{margin:0; border:1px solid var(--line); background:var(--surface); padding:18px}
.figure svg{width:100%; height:auto; display:block; color:var(--ink)}
.figure figcaption{margin-top:12px}

/* liste over hva som varer */
.pillars{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); grid-template-columns:1fr}
@media(min-width:760px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{background:var(--bg); padding:26px 24px}
.pillar b{display:block; font-weight:400; font-size:1.25rem; margin-bottom:8px}
.pillar p{color:var(--muted); font-size:.98rem; margin:0}

/* tidslinje */
.timeline{list-style:none; margin:0; padding:0; border-left:1px solid var(--accent)}
.timeline li{position:relative; padding:0 0 28px 28px}
.timeline li::before{content:""; position:absolute; left:-5px; top:.55em; width:9px; height:9px; border-radius:50%; background:var(--accent)}
.timeline time{display:block; font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:4px}
.timeline b{font-weight:400; font-size:1.15rem; display:block}
.timeline p{margin:4px 0 0; color:var(--muted); font-size:.98rem; max-width:34em}
.timeline li.now::before{background:var(--ink); box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--ink)}

/* kjente byggverk */
.works{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); grid-template-columns:1fr}
@media(min-width:700px){.works{grid-template-columns:1fr 1fr}}
@media(min-width:1050px){.works{grid-template-columns:1fr 1fr 1fr}}
.work{background:var(--bg); padding:24px}
.work .mono{display:block; margin-bottom:8px}
.work b{display:block; font-weight:400; font-size:1.2rem; margin-bottom:6px}
.work p{margin:0; color:var(--muted); font-size:.96rem}

/* kurskort */
.courses{display:grid; gap:22px; grid-template-columns:1fr}
@media(min-width:860px){.courses{grid-template-columns:1fr 1fr}}
.course{border:1px solid var(--line); background:var(--surface); padding:clamp(22px,3vw,34px); display:flex; flex-direction:column; gap:14px}
.course header{display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap}
.course h3{font-size:clamp(1.5rem,2.6vw,2rem)}
.course .price{font-size:1.5rem; white-space:nowrap}
.course .price small{font-family:var(--sans); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:block}
.course ul.inc{list-style:none; margin:0; padding:0; display:grid; gap:6px; color:var(--muted); font-size:.98rem}
.course ul.inc li{padding-left:18px; position:relative}
.course ul.inc li::before{content:""; position:absolute; left:0; top:.65em; width:8px; height:1px; background:var(--accent)}
.dates{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:8px}
.dates li{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; border:1px solid var(--line); background:var(--bg); border-radius:var(--radius)}
.dates .when{flex:1 1 auto; min-width:160px}
.dates .when b{font-weight:400; display:block}
.dates .when span{color:var(--muted); font-size:.9rem}
.dates .seats{font-family:var(--sans); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.dates .seats.few{color:var(--accent)}
.dates .seats.full{color:var(--muted); text-decoration:line-through}
.dates .ics{font-family:var(--sans); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line)}

/* kalender */
.cal{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); grid-template-columns:1fr}
@media(min-width:760px){.cal{grid-template-columns:1fr 1fr}}
.cal-month{background:var(--bg); padding:22px}
.cal-month h3{font-size:1.2rem; margin-bottom:12px; display:flex; justify-content:space-between; align-items:baseline}
.cal-month .mono{font-size:.62rem}
.cal-month .ev{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line); text-decoration:none}
.cal-month .ev:first-of-type{border-top:0}
.cal-month .ev .d{font-family:var(--sans); font-size:.72rem; letter-spacing:.1em; color:var(--accent); min-width:62px; padding-top:4px}
.cal-month .ev b{font-weight:400; display:block}
.cal-month .ev span{color:var(--muted); font-size:.9rem}
.tag{display:inline-block; font-family:var(--sans); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; padding:3px 7px; border:1px solid var(--line); border-radius:3px; color:var(--muted); margin-left:6px; vertical-align:middle}
.tag.stein{border-color:#6F7A66; color:#6F7A66}
.tag.laft{border-color:#9A5B2C; color:#9A5B2C}

/* dagsplan */
.plan{border-top:1px solid var(--line)}
.plan details{border-bottom:1px solid var(--line)}
.plan summary{cursor:pointer; list-style:none; padding:16px 0; display:flex; gap:16px; align-items:baseline}
.plan summary::-webkit-details-marker{display:none}
.plan summary .mono{min-width:90px; color:var(--accent)}
.plan summary b{font-weight:400; font-size:1.12rem; flex:1}
.plan summary::after{content:"+"; color:var(--muted); font-family:var(--sans)}
.plan details[open] summary::after{content:"–"}
.plan .body{padding:0 0 18px 106px; color:var(--muted); font-size:.98rem; max-width:40em}
@media(max-width:640px){.plan .body{padding-left:0}}
.plan .body ul{margin:0; padding-left:18px}

/* praktisk */
.facts{display:grid; gap:18px 36px; grid-template-columns:1fr; margin:0}
@media(min-width:700px){.facts{grid-template-columns:1fr 1fr}}
.facts div{border-top:1px solid var(--line); padding-top:12px}
.facts dt{font-family:var(--sans); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:6px}
.facts dd{margin:0; color:var(--muted); font-size:.98rem}

/* FAQ */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:16px 0; font-size:1.08rem; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--muted); font-family:var(--sans)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 18px; color:var(--muted); max-width:40em}

/* sitat */
.quote{font-size:clamp(1.4rem,3vw,2.2rem); line-height:1.25; font-style:italic; max-width:22em; margin:0}
.quote + .mono{margin-top:16px; display:block}

/* blogg */
.posts{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); grid-template-columns:1fr}
@media(min-width:760px){.posts{grid-template-columns:1fr 1fr}}
.post{background:var(--bg); padding:26px; text-decoration:none; display:flex; flex-direction:column; gap:10px}
.post:hover{background:var(--surface)}
.post h3{font-size:1.3rem}
.post p{color:var(--muted); font-size:.96rem; margin:0}
.post .mono{margin-top:auto}
article.prose{max-width:38em}
article.prose h2{font-size:1.6rem; margin:1.6em 0 .5em}
article.prose h3{font-size:1.2rem; margin:1.4em 0 .4em}
article.prose p,article.prose li{font-size:1.05rem}
article.prose ul,article.prose ol{padding-left:22px}
article.prose figure{margin:28px 0}
article.prose blockquote{margin:28px 0; padding-left:20px; border-left:2px solid var(--accent); font-style:italic; color:var(--muted)}
article.prose table{border-collapse:collapse; width:100%; font-size:.95rem; margin:18px 0}
article.prose th,article.prose td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top}
article.prose th{font-family:var(--sans); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.byline{color:var(--muted); font-size:.9rem; margin-bottom:28px}

/* bunn */
footer.foot{border-top:1px solid var(--line); padding:40px var(--gutter) 60px; font-size:.92rem; color:var(--muted); display:grid; gap:24px 48px; grid-template-columns:1fr}
@media(min-width:800px){footer.foot{grid-template-columns:2fr 1fr 1fr}}
footer.foot a{text-decoration:none; border-bottom:1px solid var(--line)}
footer.foot a:hover{border-bottom-color:var(--accent)}
footer.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
footer.foot .brand{margin-bottom:10px}

/* notis */
.note{border:1px solid var(--line); background:var(--surface); padding:16px 18px; font-size:.95rem; color:var(--muted); border-radius:var(--radius)}
.note b{color:var(--ink); font-weight:400}
.inline-form{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.inline-form input{font:inherit; padding:10px 12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:var(--radius); min-width:220px; flex:1}

/* merkelapper i mørk modus */
:root[data-theme="dark"] .tag.stein{border-color:#A7B39B; color:#A7B39B}
:root[data-theme="dark"] .tag.laft{border-color:#D1915A; color:#D1915A}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tag.stein{border-color:#A7B39B; color:#A7B39B}
  :root:not([data-theme="light"]) .tag.laft{border-color:#D1915A; color:#D1915A}
}

/* påmeldingsskjema */
.signup{display:grid; gap:16px 20px; grid-template-columns:1fr; max-width:52em; border:1px solid var(--line); background:var(--surface); padding:clamp(20px,3vw,32px)}
@media(min-width:720px){.signup{grid-template-columns:1fr 1fr} .signup .wide{grid-column:1/-1}}
.signup label{display:grid; gap:6px; font-family:var(--sans); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.signup input,.signup select,.signup textarea{font:inherit; font-family:var(--serif); font-size:1rem; letter-spacing:0; text-transform:none; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; width:100%}
.signup input:focus,.signup select:focus,.signup textarea:focus{outline:2px solid var(--accent); outline-offset:1px}
.signup textarea{resize:vertical}