/* ═══════════════════════════════════════════════════════════════
   APORT — designsystem
   Farverne er Apports egne og er ikke rørt. Skriften er skiftet.

   HVORFOR SKRIFTEN ER SKIFTET
   Playfair Display + guld + rosa læses som skønhedssalon. Apport er
   ikke en salon — Apport er studiet, der bygger salonens side. Derfor
   én stram grotesk til Apports egen side, og serifferne bliver ovre
   hos kunderne, hvor de hører til. Rammen er stille. Arbejdet råber.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Apports egne farver, uændret */
  --moerk:#15100E;
  --ivory:#F5EFE7;
  --guld:#C9A96E;
  --blaek:#1E1917;
  --daempet:#6e5f4b;

  /* Tilføjet: guld har for lav kontrast som tekst på ivory.
     Målt 2,1:1 — WCAG kræver 4,5:1. Denne er samme kulør, men læsbar. */
  --guld-tekst:#6E5427;

  --flade:#FFFFFF;
  --streg:rgba(30,25,23,.12);
  --streg-lys:rgba(245,239,231,.16);

  --ui:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Skalaen har ét stort spring. Det er dét, der gør den redaktionel
     i stedet for lunken: brødtekst i én størrelse, overskrifter meget
     større, og næsten ingenting derimellem. */
  --t-mikro:12.5px;
  --t-lille:14px;
  --t-brod:clamp(16px,.95rem + .28vw,18.5px);
  --t-stor:clamp(20px,1.05rem + .7vw,26px);
  --t-h3:clamp(21px,1.1rem + .8vw,29px);
  --t-h2:clamp(34px,1.5rem + 3.4vw,68px);
  --t-h1:clamp(42px,1.7rem + 6.2vw,104px);

  --sektion:clamp(80px,11vw,164px);
  --kant:clamp(20px,5vw,72px);
  --maks:1360px;
  --ind:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ivory);color:var(--blaek);
  font-family:var(--ui);font-size:var(--t-brod);line-height:1.62;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
button{font:inherit}

/* ─── typografi ─────────────────────────────────────────────── */
.h1,.h2,.h3{font-weight:600;letter-spacing:-.032em;line-height:1.03}
.h1{font-size:var(--t-h1)}
.h2{font-size:var(--t-h2);line-height:1.05}
.h3{font-size:var(--t-h3);line-height:1.18;letter-spacing:-.022em}
.stor{font-size:var(--t-stor);line-height:1.42;letter-spacing:-.012em}
.brod{font-size:var(--t-brod);color:var(--daempet);max-width:62ch}

/* Sektionsmærkat. Aldrig som kicker lige over en overskrift —
   den står som en indholdsfortegnelse i marginen. */
.mrk{
  font-size:var(--t-mikro);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--guld-tekst);
}
.moerk .mrk{color:var(--guld)}

/* ─── ramme ─────────────────────────────────────────────────── */
.ramme{width:100%;max-width:var(--maks);margin-inline:auto;padding-inline:var(--kant)}
.sektion{padding-block:var(--sektion)}
.moerk{background:var(--moerk);color:var(--ivory)}
.moerk .brod{color:rgba(245,239,231,.66)}

/* ─── knapper ───────────────────────────────────────────────── */
.knap{
  display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:2px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  border:1px solid var(--blaek);background:var(--blaek);color:var(--ivory);
  cursor:pointer;transition:background .35s var(--ind),color .35s var(--ind),border-color .35s var(--ind);
}
.knap:hover{background:transparent;color:var(--blaek)}
.knap .pil{transition:transform .35s var(--ind)}
.knap:hover .pil{transform:translateX(4px)}
.knap.klar{background:transparent;color:var(--blaek)}
.knap.klar:hover{background:var(--blaek);color:var(--ivory)}
.moerk .knap{background:var(--ivory);color:var(--blaek);border-color:var(--ivory)}
.moerk .knap:hover{background:transparent;color:var(--ivory)}
.moerk .knap.klar{background:transparent;color:var(--ivory);border-color:var(--streg-lys)}
.moerk .knap.klar:hover{background:var(--ivory);color:var(--blaek);border-color:var(--ivory)}

/* Tekstlink med streg der tændes — ikke en understregning der bare er der */
.tlink{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:600;
  /* 44 px hoejde er ikke pynt. Under det rammer en tommelfinger ved siden af,
     og linket bliver til en irritation i stedet for en vej videre. */
  min-height:44px;padding-block:10px;
  border-bottom:1px solid var(--streg);
  transition:border-color .35s var(--ind)
}
.tlink:hover{border-bottom-color:var(--blaek)}
.moerk .tlink{border-bottom-color:var(--streg-lys)}
.moerk .tlink:hover{border-bottom-color:var(--ivory)}
.tlink .pil{transition:transform .35s var(--ind)}
.tlink:hover .pil{transform:translateX(4px)}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--guld-tekst);outline-offset:3px;border-radius:2px
}
.moerk :where(a,button):focus-visible{outline-color:var(--guld)}

.spring{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:14px 20px;background:var(--blaek);color:var(--ivory);font-weight:600
}
.spring:focus{left:12px;top:12px}

/* ─── bevægelse ─────────────────────────────────────────────── */
/* Indholdet er SYNLIGT som udgangspunkt. Foerst naar JS bekraefter, at
   den kan koere indgangen, skjules det — og selv da findes der en
   sikkerhedstimer. Uden JS, uden IntersectionObserver, eller hvis noget
   som helst fejler, staar teksten der stadig. En animation maa aldrig
   kunne skjule en hel side. */
/* 9. september 2026, kl. 15: indgangsanimationen er FJERNET.
   Den stod live paa forsiden og gjorde 54 elementer usynlige — en helt
   sort sektion — faa timer foer et bankmoede. Sikkerhedsnettet paa tre
   sekunder udloeste ikke, og jeg naaede ikke at finde ud af hvorfor.
   En bloed indtoning er ingenting vaerd mod en side, der kan blive sort.
   Indholdet er nu synligt. Punktum. Skal animationen tilbage, skal den
   bevises paa en rigtig telefon foerst — ikke i et skjult panel. */
/* 10. september 2026: bevaegelsen er tilbage — paa en anden maade.
   Den koerer i ren CSS, bundet til rulningen (animation-timeline: view()).
   Der er ingen klasse, JavaScript skal naa at fjerne, og ingen timer.
   Et element kan kun vaere gennemsigtigt, mens det ligger UNDER
   skaermkanten; det toner op, i takt med at det rulles ind. Kan
   browseren ikke (@supports), staar alt der som foer. Der findes
   ingen "skjult"-tilstand, som noget skal naa at ophaeve. */
.ind{opacity:1;transform:none}
@supports (animation-timeline:view()){
  .ind{animation:ind-op linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  .hero .ind{animation:none} /* synligt fra foerste sekund — og .hero klipper (overflow:hidden) */
}
/* Bloed overgang, naar man trykker sig fra side til side paa apport.dk
   (Chrome 126+, Safari 18.2+). Kan browseren ikke, skifter den som foer. */
@view-transition{navigation:auto}
@keyframes ind-op{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}}
@media(prefers-reduced-motion:reduce){
  .ind{opacity:1;transform:none;transition:none;animation:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ═══ browserramme — porteføljens vigtigste komponent ═══════════
   Skærmbilledet skal gøre arbejdet. Rammen skal kun sige "det her
   er en rigtig hjemmeside" og så holde mund. Derfor: én tynd streg,
   tre prikker, ingen efterligning af Safari. */
.skaerm{
  position:relative;border-radius:8px;overflow:hidden;
  background:var(--flade);border:1px solid var(--streg);
  box-shadow:0 1px 2px rgba(30,25,23,.04),0 18px 46px -22px rgba(30,25,23,.24);
  transition:transform .5s var(--ind),box-shadow .5s var(--ind)
}
.moerk .skaerm{border-color:var(--streg-lys);box-shadow:0 24px 60px -26px rgba(0,0,0,.7)}
a.skaerm:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(30,25,23,.05),0 30px 60px -24px rgba(30,25,23,.3)}
.skaerm-top{
  display:flex;align-items:center;gap:7px;
  padding:11px 14px;background:#EFE9E1;border-bottom:1px solid var(--streg)
}
.moerk .skaerm-top{background:#241D19;border-bottom-color:var(--streg-lys)}
.skaerm-top i{width:9px;height:9px;border-radius:50%;background:rgba(30,25,23,.17);flex:none}
.moerk .skaerm-top i{background:rgba(245,239,231,.2)}
.skaerm-adr{
  margin-left:8px;font-size:11.5px;color:var(--daempet);
  letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.moerk .skaerm-adr{color:rgba(245,239,231,.5)}
.skaerm img{width:100%;height:auto}

/* telefonramme — beviser responsivt design i stedet for at påstå det */
.telefon{
  border-radius:22px;overflow:hidden;background:var(--flade);
  border:1px solid var(--streg);padding:7px;
  box-shadow:0 18px 44px -22px rgba(30,25,23,.3)
}
.telefon img{border-radius:16px;width:100%;height:auto}   /* height:auto er ikke pynt: uden den vinder height="1688" fra HTML og billedet straekkes 1688 px ned over siden */
.moerk .telefon{border-color:var(--streg-lys)}
/* 14. sept 2026: ingen enkelt-ords sidste linje i overskrifter (maalt ved 390 px) */
h1,h2{text-wrap:balance}