/* =================================================================
   BODVAR, variant 2: LJUSET.
   Svart sida som ligger i morker tills pekaren lyser upp den.
   Rubrikerna i en display-serif, brodtext i grotesk. Ingenting rors
   snabbt. Kansla: ett rum dar man bar en lampa.
   ================================================================= */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --svart:#000; --vit:#fff;
  --dov:rgba(255,255,255,.58); --dovare:rgba(255,255,255,.34);
  --linje:rgba(255,255,255,.16); --linje-svag:rgba(255,255,255,.08);
  --pad:clamp(20px,5vw,80px); --sek:clamp(58px,9vh,120px);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Schibsted Grotesk",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --lugn:cubic-bezier(.22,1,.36,1);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--svart);color:var(--vit);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--vit);color:var(--svart)}
:focus-visible{outline:1px solid var(--vit);outline-offset:3px}
.inre{padding-inline:var(--pad)}
.etikett{font-family:var(--sans);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dovare)}

/* lampan */
.ljus{position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:0;
  transition:opacity 1.2s var(--lugn)}
.ljus.pa{opacity:1}
main,.fot,.topp{position:relative;z-index:1}

.topp{position:fixed;top:0;left:0;right:0;z-index:50;
  padding:clamp(22px,3vw,38px) var(--pad);
  transition:background .5s var(--lugn)}
.topp.fast{background:rgba(0,0,0,.8);backdrop-filter:blur(12px)}
.markan{font-size:clamp(15px,1.5vw,19px);font-weight:500}

/* hjalten */
.hjalte{padding-top:clamp(120px,22vh,240px);padding-bottom:clamp(60px,10vh,120px)}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,7.4vw,104px);
  line-height:1.02;letter-spacing:-.018em;max-width:19ch;color:var(--vit)}
h1 .h1-br{display:block;height:.5em}
h1 em{font-style:italic}
.hjalte-tva{margin-top:clamp(52px,9vh,116px);display:grid;gap:clamp(26px,4vw,72px);
  grid-template-columns:1fr}
@media (min-width:860px){ .hjalte-tva{grid-template-columns:1fr 1fr} }
.ledande{font-family:var(--serif);font-size:clamp(21px,2.5vw,34px);line-height:1.22;
  max-width:20ch;color:var(--vit)}
.hjalte-tva p:not(.ledande){color:var(--dov);font-size:15.5px;line-height:1.68;max-width:48ch}
.hjalte-tva p + p{margin-top:1em}

.sek{padding-block:var(--sek);border-top:1px solid var(--linje-svag)}
.sek-topp{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:clamp(26px,4vh,46px);gap:18px;flex-wrap:wrap}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.4vw,62px);
  line-height:1.06;letter-spacing:-.014em}

/* portfolj */
.pf{border-top:1px solid var(--linje)}
.pf-rad{border-bottom:1px solid var(--linje);position:relative}
.pf-knapp{width:100%;background:none;border:0;cursor:pointer;color:var(--vit);
  font-family:var(--serif);text-align:left;display:flex;align-items:baseline;
  justify-content:space-between;gap:20px;padding:clamp(18px,2.6vw,30px) 0;
  font-size:clamp(23px,3.4vw,46px);font-weight:400;letter-spacing:-.014em;
  transition:opacity .4s var(--lugn)}
.pf-nr{font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:var(--dovare);
  margin-right:clamp(14px,2.4vw,34px);opacity:0;transition:opacity .4s var(--lugn)}
.pf-rad:hover .pf-nr{opacity:1}
.pf-tecken{position:relative;width:14px;height:14px;flex:none;align-self:center}
.pf-tecken::before,.pf-tecken::after{content:"";position:absolute;background:var(--vit);
  left:50%;top:50%;transition:transform .45s var(--lugn),opacity .3s var(--lugn)}
.pf-tecken::before{width:14px;height:1px;transform:translate(-50%,-50%)}
.pf-tecken::after{width:1px;height:14px;transform:translate(-50%,-50%)}
.pf-rad.oppen .pf-tecken::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.pf-panel{overflow:hidden;height:0}
.pf-inre{padding-bottom:clamp(22px,3vw,36px);display:grid;gap:16px 44px;grid-template-columns:1fr}
@media (min-width:860px){ .pf-inre{grid-template-columns:minmax(0,56ch) auto} }
.pf-inre p{color:var(--dov);font-size:15.5px;line-height:1.66}
.pf-lank{align-self:start;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid var(--linje);padding-bottom:4px;white-space:nowrap;
  transition:border-color .35s var(--lugn),color .35s var(--lugn)}
.pf-lank:hover{border-color:var(--vit);color:var(--vit)}

/* team */
.team{display:grid;gap:clamp(26px,4vw,64px);grid-template-columns:1fr}
@media (min-width:680px){ .team{grid-template-columns:1fr 1fr} }
.person h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,40px);
  letter-spacing:-.012em;margin-bottom:4px}
.person .roll{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dovare);margin-bottom:16px}
.person a{color:var(--dov);font-size:15.5px;border-bottom:1px solid var(--linje);
  padding-bottom:3px;transition:color .35s var(--lugn),border-color .35s var(--lugn)}
.person a:hover{color:var(--vit);border-color:var(--vit)}

/* kontakt */
.kontakt h2{max-width:15ch}
.kontakt .rad{margin-top:clamp(28px,4vh,50px)}
.kn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--linje);
  border-radius:999px;padding:16px 34px;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;transition:background .4s var(--lugn),color .4s var(--lugn),border-color .4s var(--lugn)}
.kn:hover,.kn.fylld{background:var(--vit);color:var(--svart);border-color:var(--vit)}
.kn.fylld:hover{background:transparent;color:var(--vit);border-color:var(--linje)}

/* fot */
.fot{border-top:1px solid var(--linje-svag);padding:clamp(38px,5vw,64px) var(--pad) clamp(24px,3vw,36px)}
.fot-nat{display:flex;flex-wrap:wrap;gap:26px 60px;justify-content:space-between;margin-bottom:clamp(30px,5vw,54px)}
.fot-kol h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dovare);
  font-weight:400;margin-bottom:12px}
.fot-kol p,.fot-kol a{display:block;font-size:14.5px;color:var(--dov);line-height:1.8}
.fot-kol a:hover{color:var(--vit)}
.fot-marke{display:flex;justify-content:center;padding:clamp(34px,6vw,74px) 0 clamp(26px,4vw,50px)}
.fot-marke svg{width:clamp(44px,6vw,78px);height:auto;color:var(--vit);opacity:.85;
  transition:opacity .5s var(--lugn)}
.fot-marke:hover svg{opacity:1}
.fot-slut{border-top:1px solid var(--linje-svag);padding-top:18px;display:flex;
  flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dovare)}

/* text som avslojas ord for ord */
.ord{display:inline-block;opacity:.16;transition:opacity .5s var(--lugn)}
.ord.tand{opacity:1}
@media (prefers-reduced-motion: reduce){
  .ljus{display:none} .ord{opacity:1 !important}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* =================================================================
   RATTELSER efter Joakims genomgang 2026-09-02.
   1. "fonten ar riktigt ful"  -> Instrument Serif ut, Schibsted
      Grotesk in, alltsa ettans typsnitt i tvaans layout.
   2. "weird when the website link has a line that's so long"
      -> lanken var display:block i ett rutnat, sa understrykningen
         drogs ut over hela spalten. Nu bara sa bred som texten.
   3. "should the portfolio companies be left-aligned"
      -> namnet lag i mitten eftersom knappen var space-between.
         Nu ligger nummer och namn ihop till vanster, plustecknet
         skjuts ut till hoger for sig.
   ================================================================= */

:root{
  --serif:"Schibsted Grotesk",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

/* 1. typografin far grotesk-behandling: tatare sparr, lite mer vikt */
h1{font-family:var(--serif);font-weight:400;letter-spacing:-.032em;line-height:1.06;
  font-size:clamp(34px,6.4vw,88px)}
h2{font-family:var(--serif);font-weight:400;letter-spacing:-.03em;
  font-size:clamp(26px,4vw,54px)}
.ledande{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(20px,2.3vw,30px);line-height:1.26}
.pf-knapp{font-family:var(--serif);font-weight:400;letter-spacing:-.028em;
  font-size:clamp(21px,3vw,40px)}
.person h3{font-family:var(--serif);font-weight:400;letter-spacing:-.026em;
  font-size:clamp(22px,2.7vw,36px)}
.etikett,.pf-nr,.person .roll,.pf-lank,.fot-kol h4,.fot-slut{font-family:var(--mono)}

/* 2. lanken ar bara sa bred som sin egen text */
.pf-inre{grid-template-columns:1fr}
@media (min-width:860px){ .pf-inre{grid-template-columns:minmax(0,54ch) auto} }
.pf-lank{display:inline-flex;align-items:center;gap:8px;width:auto;justify-self:start;
  align-self:start;border-bottom:1px solid var(--linje);border-top:0;border-left:0;border-right:0;
  padding:0 0 5px;font-size:10.5px;letter-spacing:.16em}
.pf-lank::after{content:"\2197";font-size:12px;line-height:1;transition:transform .3s var(--lugn)}
.pf-lank:hover::after{transform:translate(2px,-2px)}

/* 3. namnet vansterstallt, plustecknet for sig sjalvt till hoger */
.pf-knapp{justify-content:flex-start;gap:0}
.pf-nr{flex:none}
.pf-tecken{margin-left:auto}

/* Sidhuvudet ar fast, sa ett ankarhopp la rubriken bakom det.
   scroll-margin-top skjuter ner landningen forbi huvudet. */
section[id],.sek[id]{scroll-margin-top:clamp(72px,10vh,110px)}

/* Portfoljlistan ska inte spanna over hela skarmen. Halva bredden,
   vansterstalld, sa raderna blir lasbara i stallet for att strackas ut. */
.pf{max-width:min(760px,52%)}
@media (max-width:900px){ .pf{max-width:none} }
.pf-inre{grid-template-columns:1fr;gap:14px}
.pf-lank{justify-self:start}