/* ==========================================================================
   WEBBMAKARN — 02 BASE
   Nollställning, typografi, tillgänglighetsgrund.
   ========================================================================== */

*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }

html {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-synthesis-weight:none;
}
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }

body {
  background:var(--botten);
  color:var(--text);
  font-family:var(--f-text);
  font-size:var(--t-brod);
  line-height:1.62;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* -- Rubriker. Display-familjen, tight spärr, stora storlekar. ----------- */
h1,h2,h3,h4,h5 {
  font-family:var(--f-display);
  color:var(--text);
  text-wrap:balance;
  font-weight:600;
}
h1 { font-size:var(--t-hero); line-height:.95;  letter-spacing:-.038em; }
h2 { font-size:var(--t-h2);   line-height:1.0;  letter-spacing:-.032em; }
h3 { font-size:var(--t-h3);   line-height:1.16; letter-spacing:-.018em; }
h4 { font-size:var(--t-h4);   line-height:1.35; letter-spacing:-.008em; font-weight:600; }

p { color:var(--text-3); max-width:var(--matt); text-wrap:pretty; }
.stor  { font-size:var(--t-stor); line-height:1.42; color:var(--text-2); letter-spacing:-.014em; max-width:32rem; }
.liten { font-size:var(--t-liten); line-height:1.55; }
strong { color:var(--text); font-weight:600; }

/* Etikett — versal, spärrad, med accentprick */
.etikett {
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:var(--f-text); font-size:var(--t-mikro); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-4);
}
.etikett::before {
  content:""; width:5px; height:5px; background:var(--accent); flex:0 0 5px;
}
.etikett-ren::before { display:none; }

/* Sifferetikett i marginalen */
.nummer {
  font-family:var(--f-mono); font-size:var(--t-mikro); font-weight:500;
  letter-spacing:.1em; color:var(--text-4); font-variant-numeric:tabular-nums;
}

a { color:inherit; text-decoration:none; }
a:not([class]) {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
}
a:not([class]):hover { text-decoration-thickness:2px; }

img,svg,video { max-width:100%; display:block; }
ul,ol { list-style:none; padding:0; }

/* -- Tillgänglighet ------------------------------------------------------ */
:target,[id] { scroll-margin-top:calc(var(--huvud) + 32px); }

:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px;
}

.hoppa {
  position:absolute; left:-9999px; top:12px; z-index:300;
  background:var(--text); color:var(--botten);
  padding:.85rem 1.4rem; font-weight:600; font-size:var(--t-liten);
}
.hoppa:focus { left:var(--kant); }

.dold {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* Sidan är medvetet lugn. Enda rörelsen är hovring och sidövergångar. */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

::selection { background:var(--accent); color:var(--vit); }