/* ============================================================
   Tolke OMS — landingsside, utkast v3 «Deco»
   Profil: produkt/08-visuell-profil.md → «Variant B — Deco»
   ============================================================ */

:root{
  /* lyst tema — fullt sett, alltid definert */
  --blekk:#14212F;
  --blekk-2:#1E2C3B;
  --papir:#F8F0E2;
  --papir-2:#F0E5D2;
  --flate:#FDF8EE;
  --linje:#DFD1BA;
  --linje-svak:#EAE0CD;
  --skifer:#5C5A54;
  --lakk:#8A3826;
  --lakk-flate:#F2E1D8;
  --messing:#A87C2E;
  --messing-tekst:#8A6520;
  --paa-morkt:#F8F0E2;
  --paa-morkt-svak:#C8BFB0;
  --messing-paa-morkt:#C9A24A;

  --maks:1180px;
  --rail:150px;
  --steg:clamp(4.5rem,9vw,7.5rem);

  --f-display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --f-tekst:"Karla","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --blekk:#F0E6D6;
    --blekk-2:#26374A;
    --papir:#101B27;
    --papir-2:#16222F;
    --flate:#182533;
    --linje:#2A3949;
    --linje-svak:#20303F;
    --skifer:#ADA79C;
    --lakk:#E08A6E;
    --lakk-flate:#2A1E1B;
    --messing:#D3A550;
    --messing-tekst:#D3A550;
    --paa-morkt:#F0E6D6;
    --paa-morkt-svak:#ADA79C;
    --messing-paa-morkt:#D3A550;
  }
}
:root[data-theme="dark"]{
  --blekk:#F0E6D6;
  --blekk-2:#26374A;
  --papir:#101B27;
  --papir-2:#16222F;
  --flate:#182533;
  --linje:#2A3949;
  --linje-svak:#20303F;
  --skifer:#ADA79C;
  --lakk:#E08A6E;
  --lakk-flate:#2A1E1B;
  --messing:#D3A550;
  --messing-tekst:#D3A550;
  --paa-morkt:#F0E6D6;
  --paa-morkt-svak:#ADA79C;
  --messing-paa-morkt:#D3A550;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--papir);
  color:var(--blekk);
  font-family:var(--f-tekst);
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0}
h1{font-size:clamp(2.5rem,5.4vw,4.1rem);line-height:1.03;letter-spacing:-.015em}
h2{font-size:clamp(1.9rem,3.6vw,2.85rem);line-height:1.1;letter-spacing:-.01em}
h3{font-size:1.2rem;font-weight:500;line-height:1.3}
p{margin:0}
a{color:var(--lakk);text-decoration:none}

.etikett{
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--messing-tekst);
}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--lakk);outline-offset:3px;border-radius:1px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--blekk);color:var(--papir);padding:.75rem 1.25rem;
}
.skip:focus{left:.75rem;top:.75rem}

/* ---------- struktur ---------- */

.wrap{max-width:var(--maks);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.5rem)}

.seksjon{padding-block:var(--steg);position:relative}
.seksjon--dempet{background:var(--papir-2)}
.seksjon--morkt{background:var(--blekk-2);color:var(--paa-morkt)}
.seksjon--morkt h2,.seksjon--morkt h3{color:var(--paa-morkt)}
.seksjon--morkt .etikett{color:var(--messing-paa-morkt)}
.seksjon--morkt .ingress,.seksjon--morkt .dempet{color:var(--paa-morkt-svak)}

/* asymmetrisk rutenett: smal mono-spalte, bred innholdsspalte */
.rutenett{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem)}
@media (max-width:820px){
  .rutenett{grid-template-columns:1fr;gap:1.5rem}
}
.rail{padding-top:.6rem}
.rail-nr{
  font-family:var(--f-display);font-size:2.6rem;line-height:1;
  color:var(--messing);opacity:.55;display:block;margin-bottom:.35rem;
}

/* parvise oppsett: tekst + illustrasjon */
.duo{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
.duo--a{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.duo--b{grid-template-columns:minmax(0,1fr) minmax(0,.7fr);align-items:start}
.duo--c{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
.duo--d{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
@media (max-width:880px){
  .duo{grid-template-columns:1fr !important;gap:2rem}
  .duo--d > *:first-child{order:2}
}

.ingress{color:var(--skifer);font-size:1.135rem;max-width:62ch}
.dempet{color:var(--skifer)}
.tekst{max-width:64ch}

/* doble hårstreker + vifteknute mellom seksjoner */
.skille{border:0;height:0;position:relative;margin:0;overflow:visible}
.skille::before,.skille::after{
  content:"";position:absolute;left:0;right:0;height:1px;
}
.skille::before{top:0;background:var(--messing);opacity:.42}
.skille::after{top:4px;background:var(--linje)}

/* ---------- topplinje ---------- */

.topp{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--papir) 88%,transparent);
  backdrop-filter:blur(9px);
  border-bottom:1px solid transparent;
  transition:padding .35s ease,border-color .35s ease,background .35s ease;
  padding-block:1.1rem;
}
.topp.krympet{padding-block:.5rem;border-bottom-color:var(--linje)}
.topp .wrap{display:flex;align-items:center;gap:1.25rem;justify-content:space-between}

.merke{display:flex;align-items:center;gap:.65rem;color:var(--blekk)}
.merke svg{width:26px;height:26px;flex:none}
.merke b{font-family:var(--f-display);font-weight:500;font-size:1.16rem;letter-spacing:.01em}
.merke span{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--skifer);display:block;margin-top:-2px}

.toppmeny{display:flex;align-items:center;gap:1.6rem}
.toppmeny a{
  font-size:.9rem;color:var(--blekk);position:relative;padding-block:.35rem;
}

.toppmeny a:not(.knapp)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--messing);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.toppmeny a:not(.knapp):hover::after,.toppmeny a:not(.knapp):focus-visible::after{transform:scaleX(1)}

@media (max-width:760px){.toppmeny .skjul-sm{display:none}}

/* ---------- knapper ---------- */

.knapp{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-tekst);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  padding:.85rem 1.5rem;border:1px solid var(--lakk);background:var(--lakk);
  color:var(--papir);cursor:pointer;border-radius:1px;overflow:hidden;
  min-height:44px;transition:transform .25s ease;
}
.knapp::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(105deg,rgba(255,255,255,.16) 0 2px,transparent 2px 12px);
  transform:translateX(-102%);transition:transform .55s cubic-bezier(.2,.7,.3,1);
}

.knapp:hover { color:#999 !important; }
/*
.knapp:hover::before,.knapp:focus-visible::before{transform:translateX(0)}
.knapp:hover{transform:translateY(-1px)}
.knapp span{position:relative}
*/

.knapp--linje{background:transparent;color:var(--blekk);border-color:var(--linje)}
.knapp--linje:hover{border-color:var(--messing)}
.knapp--linje::before{background:repeating-linear-gradient(105deg,rgba(168,124,46,.16) 0 2px,transparent 2px 12px)}
.seksjon--morkt .knapp--linje{color:var(--paa-morkt);border-color:rgba(201,162,74,.5)}

.knapperad{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* ---------- panel med trappetrinnshjørne ---------- */

.panel{
  position:relative;background:var(--flate);padding:1.65rem 1.5rem 1.75rem;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid var(--linje);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
  transition:border-color .35s ease;
}
.panel::after{ /* selve fasen i trappetrinnet */
  content:"";position:absolute;top:0;right:0;width:26px;height:1px;
  background:var(--linje);transform-origin:100% 50%;transform:rotate(-45deg);
  transition:background .35s ease,width .35s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.panel:hover{transform:translateY(-3px)}
.panel:hover::before{border-color:var(--messing)}
.panel:hover::after{background:var(--messing);width:30px}
.seksjon--morkt .panel{background:rgba(255,255,255,.035)}

.panel h3{margin-bottom:.45rem}
.panel p{color:var(--skifer);font-size:.99rem}
.seksjon--morkt .panel p{color:var(--paa-morkt-svak)}
.seksjon--morkt .punktliste p{color:var(--paa-morkt-svak)}
.seksjon--morkt .punktliste b{color:var(--paa-morkt)}
.seksjon--morkt .sporsmal p,.seksjon--morkt caption{color:var(--paa-morkt-svak)}

.panelrad{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}

/* ---------- hero ---------- */

.hero{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:0;position:relative;overflow:hidden}
.hero-rutenett{
    display:grid;
    /* grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); */
    gap:clamp(2rem,5vw,4rem);
    align-items:center
}
@media (max-width:900px){.hero-rutenett{grid-template-columns:1fr}}

.hero h1{margin-block:1.15rem 1.35rem}
.hero h1 em{font-style:italic;color:var(--lakk)}
.hero .ingress{font-size:1.19rem;margin-bottom:1.9rem}

.hero-art{width:100%;height:auto;display:block}

/* faktabånd */
.faktabaand{
  border-top:1px solid var(--linje);border-bottom:1px solid var(--linje);
  margin-top:clamp(2.5rem,5vw,0rem);
  display:grid;grid-template-columns:repeat(4,1fr);
}
@media (max-width:760px){.faktabaand{grid-template-columns:repeat(2,1fr)}}
.fakta{padding:1.1rem 1.15rem;border-left:1px solid var(--linje-svak)}
.fakta:first-child{border-left:0}
@media (max-width:760px){.fakta:nth-child(3){border-left:0}.fakta:nth-child(n+3){border-top:1px solid var(--linje-svak)}}
.fakta b{display:block;font-family:var(--f-display);font-size:1.3rem;font-weight:500;line-height:1.15}
.fakta span{display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--skifer);margin-top:.3rem}

/* sømmen — signaturen og easter egg nr. 1 */
#som {
    display: none !important;
}
.som{
  display:inline-flex;align-items:center;gap:.85rem;background:none;border:0;
  cursor:pointer;padding:.5rem .2rem;font-family:var(--f-mono);
  font-size:.82rem;letter-spacing:.2em;color:var(--skifer);min-height:44px;
}
.som i{display:block;width:1px;height:20px;background:var(--messing);font-style:normal}
.som .kode{color:var(--blekk);transition:opacity .28s ease,transform .28s ease}
.som.skifter .kode{opacity:0;transform:translateY(-4px)}
.som:hover .pil{color:var(--lakk)}
.pil{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.som:hover .pil{transform:rotate(180deg)}

/* ---------- steg ---------- */

.steg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.35rem;padding-block:1.6rem;border-top:1px solid var(--linje-svak)}
.steg:first-of-type{border-top:0}
.steg-nr{
  font-family:var(--f-display);font-size:2.5rem;line-height:.9;color:var(--linje);
  transition:color .5s ease;font-variant-numeric:tabular-nums;
}
.steg.synlig .steg-nr{color:var(--messing)}
.steg h3{margin-bottom:.35rem}
.steg p{color:var(--skifer);max-width:58ch}

/* ---------- tabell ---------- */

.tabellboks{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.98rem}
th,td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--linje-svak);vertical-align:top}
th{
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--messing-tekst);white-space:nowrap;
}
.seksjon--morkt th{color:var(--messing-paa-morkt)}
.seksjon--morkt td{border-color:rgba(255,255,255,.09)}
td:first-child{width:15rem;font-weight:600}
td .dempet{font-weight:400}
tr:last-child td{border-bottom:0}

/* ---------- sitat ---------- */

.sitat{
  position:relative;padding:1.4rem 0 1.4rem 1.9rem;margin-block:1.5rem;
  border-left:1px solid var(--messing);
  font-family:var(--f-display);font-size:1.35rem;line-height:1.4;max-width:44ch;
}
.sitat span{display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--skifer);margin-top:.8rem}

/* ---------- liste ---------- */

.punktliste{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.punktliste li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start}
.punktliste svg{width:15px;height:15px;flex:none;margin-top:.42rem;color:var(--messing)}
.punktliste b{font-weight:600}
.punktliste p{color:var(--skifer);font-size:.99rem}

/* ---------- spørsmål ---------- */

.sporsmal{border-top:1px solid var(--linje);max-width:66ch}
.sporsmal details{border-bottom:1px solid var(--linje)}
.sporsmal summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;position:relative;
  font-family:var(--f-display);font-size:1.16rem;
}
.sporsmal summary::-webkit-details-marker{display:none}
.sporsmal summary::after{
  content:"";position:absolute;right:.35rem;top:1.5rem;width:9px;height:9px;
  border-right:1px solid var(--messing);border-bottom:1px solid var(--messing);
  transform:rotate(45deg);transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.sporsmal details[open] summary::after{transform:rotate(-135deg)}
.sporsmal p{color:var(--skifer);padding-bottom:1.3rem;max-width:60ch}

/* ---------- avslutning + bunn ---------- */

.slutt{text-align:center}
.slutt h2{margin-bottom:1rem}
.slutt .ingress{margin-inline:auto;text-align:center}
.slutt .knapperad{justify-content:center;margin-top:1.9rem}

.bunn{background:var(--blekk-2);color:var(--paa-morkt);padding-block:2.8rem}
.bunn a{color:var(--messing-paa-morkt)}
.bunn-rutenett{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-end}
.bunn p{color:var(--paa-morkt-svak);font-size:.93rem;max-width:40ch}
.kopier{
  background:none;border:0;padding:0;cursor:pointer;color:var(--messing-paa-morkt);
  font:inherit;font-size:.93rem;border-bottom:1px dashed rgba(201,162,74,.5);
}
.ornament-note{display:none;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--messing-paa-morkt);margin-top:1rem}

/* ---------- SVG-felles ---------- */

.d-blekk{fill:var(--blekk)}
.d-lakk{fill:var(--lakk)}
.s-blekk{stroke:var(--blekk);fill:none}
.s-linje{stroke:var(--linje);fill:none}
.s-messing{stroke:var(--messing);fill:none}
.s-lakk{stroke:var(--lakk);fill:none}
.f-flate{fill:var(--flate)}
.f-papir2{fill:var(--papir-2)}
.t-mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;fill:var(--skifer)}
.t-display{font-family:var(--f-display);fill:var(--blekk)}
.figur-morkt{fill:var(--blekk)}

.illu{width:100%;height:auto;display:block}
.illu-boks{position:relative;padding:1.2rem;background:var(--flate);border:1px solid var(--linje)}
.seksjon--morkt .illu-boks{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1)}

/* ---------- bevegelse ---------- */

.avslor{opacity:1;transform:none}
:root.js .avslor{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
:root.js .avslor.synlig{opacity:1;transform:none}

.straale{stroke-dasharray:220;stroke-dashoffset:220;animation:tegn 1.5s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes tegn{to{stroke-dashoffset:0}}

.bue{stroke-dasharray:700;stroke-dashoffset:700;animation:tegn 2.1s .25s cubic-bezier(.3,.8,.3,1) forwards}

.reise{
  offset-path:path("M170 256 C 232 198 282 196 320 214 C 358 232 410 216 470 256");
  offset-distance:0%;
  animation:reis 4.6s 1.5s cubic-bezier(.5,0,.5,1) forwards;
  opacity:0;
}
@keyframes reis{
  0%{offset-distance:0%;opacity:0}
  8%{opacity:1}
  46%{offset-distance:50%}
  54%{offset-distance:50%}
  92%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}

/* easter egg 1: viften folder seg ut til full sol */
.straale-ekstra{opacity:0;transition:opacity .9s ease}
.hero-art.blomstrer .straale-ekstra{opacity:.5}
.hero-art{transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.hero-art.blomstrer{transform:scale(1.015)}

/* easter egg 2: ornamentmodus */
:root.forgylt .seksjon{box-shadow:inset 0 0 0 1px rgba(168,124,46,.28)}
:root.forgylt .skille::after{background:var(--messing);opacity:.5}
:root.forgylt .ornament-note{display:block}
:root.forgylt .panel::before{border-color:var(--messing)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .straale,.bue{stroke-dashoffset:0}
  .reise{display:none}
  :root.js .avslor{opacity:1;transform:none}
}