/* ---------- Fonter (selvhostet, ingen tredjepart) ----------
   ITF Free Font License. Se assets/fonts/lisenser/
   Variable filer: én per stil dekker hele vektaksen 100-900.
   ---------------------------------------------------------- */
@font-face{
  font-family:'Boska';
  src:url('../assets/fonts/boska-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Boska';
  src:url('../assets/fonts/boska-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Melodrama';
  src:url('../assets/fonts/melodrama-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Gambetta';
  src:url('../assets/fonts/gambetta-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Gambetta';
  src:url('../assets/fonts/gambetta-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Switzer';
  src:url('../assets/fonts/switzer-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Switzer';
  src:url('../assets/fonts/switzer-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Satoshi';
  src:url('../assets/fonts/satoshi-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Satoshi';
  src:url('../assets/fonts/satoshi-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Cabinet Grotesk';
  src:url('../assets/fonts/cabinet-grotesk-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* 🎨1 Natt og gull: papir og gull samplet fra logoen */
  --c-papir:#12100C; --c-flate:#1C1914; --c-blekk:#F1E9DA; --c-dempet:#B9AE9C;
  --c-aksent:#E2BC66; --c-paa-aksent:#15120D; --c-linje:rgba(241,233,218,.16);
  --c-fokus:#E2BC66; --c-hero-tekst:#F6EFE2; --c-slor:18,16,12;

  --f-display:'Boska',Georgia,serif; --f-tekst:'Switzer',system-ui,sans-serif;
  --f-display-vekt:300; --f-display-lh:.94; --f-display-spor:-.025em; --f-kursiv:italic;

  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-5:3rem; --s-6:4.5rem;
  --s-seksjon:clamp(80px,10vw,144px); --s-kant:clamp(20px,4.5vw,72px);
  --t-hero:clamp(3.4rem,9.4vw,9rem); --t-h2:clamp(2.6rem,5.6vw,5.2rem); --t-h3:clamp(1.9rem,2.8vw,2.6rem);
  --t-tekst:1.0625rem; --t-liten:.875rem; --lh-tekst:1.55; --spalte:34rem;

  --z-dekor:1; --z-sticky:100; --z-dokk:200; --z-overlay:300; --z-panel:400; --z-varsel:500;
  --ease-ut:cubic-bezier(.22,1,.36,1); --dokk-h:0px;
}
html[data-pal="2"]{ /* Krem og gull */
  --c-papir:#F3EDE2; --c-flate:#EAE1D1; --c-blekk:#1A1612; --c-dempet:#5C5348;
  --c-aksent:#C99A3E; --c-paa-aksent:#1A1612; --c-linje:rgba(26,22,18,.16); --c-fokus:#1A1612;
}
html[data-pal="3"]{ /* Taupe, fra ever.co.id */
  --c-papir:#6E5642; --c-flate:#614B39; --c-blekk:#F7F1E7; --c-dempet:#EDE3D3;
  --c-aksent:#E9CF97; --c-paa-aksent:#2A2119; --c-linje:rgba(247,241,231,.22); --c-fokus:#E9CF97;
}
html[data-font="2"]{ --f-display:'Melodrama',Georgia,serif; --f-tekst:'Satoshi',system-ui,sans-serif; --f-display-lh:.92; --f-display-spor:-.01em; --f-kursiv:normal; }
html[data-font="3"]{ --f-display:'Gambetta',Georgia,serif; --f-tekst:'Cabinet Grotesk',system-ui,sans-serif; --f-display-lh:.96; }

/* ---------- Grunn ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--c-papir);color:var(--c-blekk);font:400 var(--t-tekst)/var(--lh-tekst) var(--f-tekst);
  font-synthesis:none;-webkit-font-smoothing:antialiased;padding-bottom:var(--dokk-h);transition:background-color .4s,color .4s}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
h1,h2,h3{text-wrap:balance;font-family:var(--f-display);font-weight:var(--f-display-vekt);letter-spacing:var(--f-display-spor);line-height:var(--f-display-lh);margin:0}
em{font-style:var(--f-kursiv)}
b,strong{font-weight:600}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:2px solid var(--c-fokus);outline-offset:3px;border-radius:2px}
.hopp{position:absolute;left:var(--s-2);top:-100px;z-index:var(--z-varsel);background:var(--c-aksent);color:var(--c-paa-aksent);padding:.75rem 1rem}
.hopp:focus{top:var(--s-2)}
[hidden]{display:none!important}

.seksjon{padding:var(--s-seksjon) var(--s-kant)}
.seksjon__tittel{font-size:var(--t-h2)}

.knapp{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.6rem;
  font:500 .95rem/1 var(--f-tekst);text-decoration:none;border:1px solid transparent;
  transition:background-color .25s var(--ease-ut),color .25s var(--ease-ut),transform .2s var(--ease-ut)}
.knapp:active{transform:scale(.97)}
.knapp--gull{background:var(--c-aksent);color:var(--c-paa-aksent)}
.knapp--blekk{background:var(--c-paa-aksent);color:var(--c-aksent)}
.knapp--strek{border-color:currentColor}
@media (hover:hover) and (pointer:fine){
  .knapp--gull:hover{background:var(--c-blekk);color:var(--c-papir)}
  .knapp--strek:hover{background:var(--c-blekk);color:var(--c-papir);border-color:var(--c-blekk)}
  .knapp--blekk:hover{background:var(--c-papir);color:var(--c-blekk)}
}
.lenke{display:inline-flex;align-items:center;min-height:44px;font-size:.95rem}

/* ---------- Topp ---------- */
.topp{position:absolute;inset:0 0 auto;z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-3) var(--s-kant);color:var(--c-hero-tekst)}
html[data-hero="2"] .topp{color:var(--c-blekk)}
.merke{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.merke__navn{font-family:var(--f-display);font-size:1.6rem;letter-spacing:.01em;font-variant-caps:small-caps}
.topp__nav{display:flex;gap:var(--s-4);margin-left:auto;font-size:.95rem}
.topp__nav a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
@media (hover:hover) and (pointer:fine){.topp__nav a:hover{text-decoration:underline}}
.topp .knapp{min-height:44px}

/* ---------- Hero 1: foto ---------- */
.hero{position:relative}
.hero--foto{min-height:100svh;display:grid;align-items:end;color:var(--c-hero-tekst);overflow:hidden;background:#0d0b08}
.hero__bilde,.hero__bilde img{position:absolute;inset:0;width:100%;height:100%}
.hero__bilde img{object-fit:cover;object-position:62% 40%}
.hero__bilde::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--c-slor),.78) 0%,rgba(var(--c-slor),0) 24%),
             linear-gradient(90deg,rgba(var(--c-slor),.92) 0%,rgba(var(--c-slor),.72) 38%,rgba(var(--c-slor),.12) 70%,rgba(var(--c-slor),0) 100%),
             linear-gradient(0deg,rgba(var(--c-slor),.6) 0%,rgba(var(--c-slor),0) 45%)}
.hero__innhold{position:relative;z-index:var(--z-dekor);padding:0 var(--s-kant) clamp(96px,13vh,132px);max-width:1100px}
.hero__tittel{font-size:var(--t-hero)}
/* Masken må romme blekket, ikke linjeboksen. Med lh under 1 stikker nedstreker og
   kursiv overheng utenfor boksen. Målt over hele fontbiblioteket ved lh 0,94:
   maks 0,25em under, 0,20em over. Negativ margin nuller ut paddingen i layouten. */
.linje{display:block;overflow:hidden;padding:.2em .25em .26em;margin:-.2em -.25em -.26em}
.linje>*{display:inline-block}
.hero__ingress{max-width:30rem;margin-top:var(--s-4);font-size:1.125rem;color:var(--c-hero-tekst)}
.hero__handling{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-4)}

/* ---------- Hero 2: typografisk indeks ---------- */
.hero--indeks{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--s-6) + 40px) var(--s-kant) var(--s-6);text-align:center;overflow:hidden}
.ring{position:absolute;width:min(72vh,86vw);aspect-ratio:1;left:50%;top:56%;translate:-50% -50%;z-index:0;pointer-events:none}
.ring circle{fill:none;stroke:var(--c-aksent);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0;opacity:.85}
.indeks__over{position:relative;max-width:26rem;color:var(--c-dempet);font-size:var(--t-liten);margin-bottom:var(--s-4)}
.indeks{position:relative;list-style:none;margin:0;padding:0;font-family:var(--f-display);font-weight:var(--f-display-vekt);
  font-size:clamp(2.6rem,7.6vw,7.4rem);line-height:var(--f-display-lh);letter-spacing:var(--f-display-spor)}
.indeks a{text-decoration:none;transition:color .3s var(--ease-ut)}
@media (hover:hover) and (pointer:fine){.indeks a:hover{color:var(--c-aksent)}}
.hero__handling--midt{justify-content:center;position:relative}

/* ---------- Velkommen ---------- */
.velkommen{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s-6);align-items:start}
.velkommen__tittel{font-size:var(--t-h2)}
.velkommen__tekst{max-width:var(--spalte);padding-top:.6rem}
.velkommen__tekst>p{font-size:1.2rem;line-height:1.5}
.fakta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin:var(--s-5) 0 0;padding-top:var(--s-3);border-top:1px solid var(--c-linje)}
.fakta dt{font-size:var(--t-liten);color:var(--c-dempet);margin-bottom:.35rem}
.fakta dd{margin:0}
.fakta a{display:inline-flex;min-height:44px;align-items:flex-start}

/* ---------- Behandlinger ---------- */
.behandlinger{background:var(--c-flate)}
.kort{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-5)}
.kort__rad{display:grid;gap:var(--s-3);align-content:start}
.kort__rad:nth-child(even){margin-top:var(--s-6)}
.kort__rad img{width:100%;aspect-ratio:4/3;object-fit:cover}
.kort__tekst h3{font-size:var(--t-h3)}
.kort__ord{color:var(--c-aksent);font-size:var(--t-liten);margin-top:.6rem}
html[data-pal="2"] .kort__ord{color:var(--c-dempet)}
.kort__mer{margin-top:var(--s-2);max-width:30rem;color:var(--c-dempet)}
.kort__tekst .lenke{margin-top:.25rem}

/* ---------- Kropp ---------- */
.kropp{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-6);align-items:center}
.kropp__bilde{margin:0}
.kropp__bilde img{width:100%;aspect-ratio:530/482;object-fit:cover}
.kropp__bilde figcaption{font-size:var(--t-liten);color:var(--c-dempet);margin-top:.75rem}
.kropp__ingress{margin-top:var(--s-3);max-width:var(--spalte);font-size:1.15rem}
.steg{list-style:none;counter-reset:steg;margin:var(--s-4) 0 0;padding:0;border-top:1px solid var(--c-linje)}
.steg li{counter-increment:steg;display:grid;grid-template-columns:2.2rem 9rem 1fr;gap:var(--s-2);padding:.9rem 0;border-bottom:1px solid var(--c-linje);color:var(--c-dempet)}
.steg li::before{content:counter(steg);font-family:var(--f-display);font-size:1.4rem;line-height:1;color:var(--c-aksent)}
.steg b{color:var(--c-blekk);font-weight:500}
.kropp__merk{margin-top:var(--s-3);font-size:var(--t-liten);color:var(--c-dempet)}

/* ---------- Priser ---------- */
.priser{border-top:1px solid var(--c-linje)}
.priser__topp{display:flex;justify-content:space-between;align-items:end;gap:var(--s-4);flex-wrap:wrap}
.priser__merk{max-width:26rem;color:var(--c-dempet);font-size:var(--t-liten)}
.priser__grupper{margin-top:var(--s-5);columns:2;column-gap:var(--s-5)}
.pris{break-inside:avoid}
.pris{border-top:1px solid var(--c-linje)}
.pris summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:72px;cursor:pointer}
.pris summary::-webkit-details-marker{display:none}
.pris__navn{font-family:var(--f-display);font-weight:var(--f-display-vekt);font-size:clamp(1.6rem,2.4vw,2.2rem);letter-spacing:var(--f-display-spor);line-height:1}
.pris__antall{font-size:var(--t-liten);color:var(--c-dempet);display:inline-flex;align-items:center;gap:.6rem}
.pris__antall::after{content:"+";font-size:1.4rem;line-height:1;color:var(--c-aksent);transition:rotate .2s var(--ease-ut)}
.pris[open] .pris__antall::after{rotate:45deg}
.pris__liste{list-style:none;margin:0 0 var(--s-3);padding:0}
.pris__liste li{display:flex;justify-content:space-between;gap:var(--s-3);padding:.55rem 0;border-bottom:1px dotted var(--c-linje);font-size:.95rem}
.pris__liste li span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Bestill: gullflaten ---------- */
.bestill{--c-blekk:var(--c-paa-aksent);--c-dempet:var(--c-paa-aksent);--c-linje:rgba(21,18,13,.25);--c-fokus:var(--c-paa-aksent);
  background:var(--c-aksent);color:var(--c-paa-aksent);padding:var(--s-seksjon) var(--s-kant);
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s-6);align-items:end}
.bestill__tittel{font-size:clamp(3.4rem,8vw,7.6rem)}
.bestill__venstre>p{margin-top:var(--s-3);max-width:28rem;font-size:1.15rem}
.bestill__knapper{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}
@media (hover:hover) and (pointer:fine){.bestill .knapp--strek:hover{background:var(--c-paa-aksent);color:var(--c-aksent)}}
.bestill__hoyre h3{font-size:var(--t-h3)}
.bestill address{font-style:normal;margin-top:var(--s-3);display:grid;gap:.4rem}
.bestill__vei{max-width:24rem;opacity:.85}
.kontakt{list-style:none;margin:var(--s-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--s-3)}
.kontakt a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- Bunn ---------- */
.bunn{padding:var(--s-6) var(--s-kant) var(--s-5);display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2) var(--s-5);font-size:var(--t-liten);color:var(--c-dempet)}
.bunn__merke{font-family:var(--f-display);font-size:2.4rem;color:var(--c-blekk);font-variant-caps:small-caps;grid-column:1/-1;line-height:1;margin-bottom:var(--s-2)}
.bunn__lenker{display:flex;gap:var(--s-3)}
.bunn a{display:inline-flex;align-items:center;min-height:44px}
.bunn__foto{grid-column:1/-1;margin-top:var(--s-3)}

/* ---------- Mobil-dokk ---------- */
.dokk{display:none}

/* ---------- Design Lab ---------- */
.lab{pointer-events:none;position:fixed;left:16px;bottom:calc(16px + var(--dokk-h));z-index:var(--z-panel);display:flex;align-items:center;gap:6px;
  font:500 12px/1 var(--f-tekst);color:#F4EEE3}
.lab__bryter,.lab__panel{pointer-events:auto;background:rgba(20,17,13,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);border-radius:999px}
.lab__bryter{font:inherit;color:inherit;padding:0 14px;min-height:44px;cursor:pointer}
.lab__panel{display:flex;align-items:center;gap:14px;padding:5px 14px 5px 10px}
.lab__bryter[aria-expanded="false"]+.lab__panel{display:none}
.lab__rad{display:flex;align-items:center;gap:4px}
.lab__rad>span{font-size:14px;margin-right:2px}
.lab__rad button{font:inherit;color:inherit;width:32px;height:32px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s}
.lab__rad button[aria-pressed="true"]{background:#E2BC66;color:#15120D;border-color:#E2BC66}
.lab__sign{font-size:10px;opacity:.75}
.lab__sign a{color:inherit}

/* ---------- Animasjon: skjul-tilstander bare når skriptet har sagt ja ---------- */
.anim-hero .hero .linje>*{transform:translateY(150%)}
.anim-hero .hero [data-hero-sist]{opacity:0;transform:translateY(16px)}
.anim-hero .ring circle{stroke-dashoffset:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- Mobil: ruter, ikke ramser opp ---------- */
@media (max-width:860px){
  :root{--dokk-h:64px; --s-seksjon:64px}
  .topp{padding:var(--s-2) var(--s-kant)}
  .topp__nav,.topp>.knapp{display:none}
  .hero--foto{min-height:88svh}
  .hero__bilde img{object-position:68% 40%}
  .hero__bilde::after{background:linear-gradient(180deg,rgba(var(--c-slor),.8) 0%,rgba(var(--c-slor),0) 22%),linear-gradient(0deg,rgba(var(--c-slor),.94) 0%,rgba(var(--c-slor),.7) 40%,rgba(var(--c-slor),.1) 75%)}
  .hero__handling{gap:var(--s-3)}
  .hero--indeks{min-height:88svh}
  .velkommen{grid-template-columns:1fr;gap:var(--s-3)}
  .velkommen__tekst>p{font-size:1.05rem}
  .fakta{margin-top:var(--s-4)}
  /* Behandlinger: kompakt rad med miniatyr, beskrivelsen ligger i prislisten */
  .kort{grid-template-columns:1fr;gap:0;margin-top:var(--s-4)}
  .kort__rad,.kort__rad:nth-child(even){grid-template-columns:76px 1fr;gap:var(--s-2);margin:0;padding:var(--s-2) 0;border-top:1px solid var(--c-linje);align-items:center}
  .kort__rad img{aspect-ratio:1}
  .kort__tekst h3{font-size:1.6rem}
  .kort__ord{margin-top:.3rem}
  .kort__mer{display:none}
  .kort__tekst .lenke{min-height:40px;font-size:.875rem}
  .kropp{grid-template-columns:1fr;gap:var(--s-4)}
  .kropp__bilde{order:2}
  .kropp__bilde img{aspect-ratio:16/10}
  .kropp__ingress{font-size:1.05rem}
  .steg li{grid-template-columns:1.6rem 1fr;row-gap:0;padding:.7rem 0}
  .steg li span{grid-column:2;font-size:.9rem}
  .priser__grupper{columns:1;margin-top:var(--s-4)}
  .pris summary{min-height:60px}
  .bestill{grid-template-columns:1fr;gap:var(--s-5)}
  .bunn{grid-template-columns:1fr;padding-top:var(--s-5)}
  .dokk{display:grid;grid-template-columns:1fr 1.4fr;position:fixed;inset:auto 0 0;z-index:var(--z-dokk);height:var(--dokk-h);
    background:var(--c-papir);border-top:1px solid var(--c-linje)}
  .dokk a{display:flex;align-items:center;justify-content:center;text-decoration:none;font-weight:500}
  .dokk a+a{background:var(--c-aksent);color:var(--c-paa-aksent)}
  .lab{left:12px;right:12px;bottom:calc(12px + var(--dokk-h));flex-direction:column;align-items:flex-start}
  .lab__panel{order:-1;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;border-radius:16px;padding:10px 12px}
  .lab__sign{grid-column:1/-1}
  .kort__tekst .lenke{min-height:44px}
}