/* base.css: sidans grund. Paletter, huvudet, skip-länken och chipsen som både
   våningar och projekt använder. Designsystemets tokens ligger i /colors_and_type.css. */

:root {
  /* CV:ts papperspalett (samma värden som PR #8, bakgrunden omräknad till OKLCH). */
  --paper-bg:       oklch(96.6% 0.007 85);
  --paper-ink:      oklch(23% 0.012 60);
  --paper-body:     oklch(43% 0.012 62);
  --paper-muted:    oklch(50% 0.012 68);
  --paper-line:     oklch(70% 0.012 70);
  --paper-rule:     oklch(89% 0.012 72);
  --paper-chip:     oklch(92% 0.016 78);
  --paper-chip-ink: oklch(44% 0.022 66);
  --paper-accent:   oklch(52% 0.13 48);

  /* Himlen, uppifrån: varm eftermiddag vid taket, blå dag genom Advania,
     skymning vid KI och natt vid grunden. Ett värde per bjälklag; varje
     våning målar sin bit från sitt tak till sitt golv, så att stoppen möts. */
  --sky-0: oklch(91% 0.045 86);   /* sidans topp */
  --sky-1: oklch(88% 0.06 80);    /* huvudets underkant, takets topp */
  --sky-2: oklch(85.5% 0.075 76); /* takfoten, 5 TR */
  --sky-3: oklch(81% 0.085 70);   /* 5 TR / 4 TR, 2024 */
  --sky-4: oklch(64% 0.085 234);  /* 4 TR / 3 TR, 2018 */
  --sky-5: oklch(61% 0.09 238);   /* 3 TR / 2 TR, 2017 */
  --sky-6: oklch(43% 0.08 262);   /* 2 TR / 1 TR, 2013: skymning */
  --sky-7: oklch(29% 0.07 272);   /* 1 TR / BV, 2009 */
  --sky-8: oklch(19% 0.055 276);  /* grunden, 2004: natt */

  --sky:        var(--sky-0);
  --sky-ink:    var(--paper-ink);
  --sky-body:   oklch(38% 0.014 62);
  --sky-accent: oklch(45% 0.12 48);
  --focus:      oklch(42% 0.13 48);

  --gutter: 16px;
  /* Läskolumnen: innehållsbredden för gatan, papperet och avslutet, så att
     alla vänsterkanter linjerar. Omslagen lägger på --gutter på var sida. */
  --col: 640px;

  /* ---- Tornets raster (se tower.css för skalan) ----
     Mobil: fasad + måttstock i en kolumn, skylten ovanpå fasaden.
     Bred (från 700 px, eller liggande från 560 px): fasad, måttstock, luft och
     en skyltkolumn bredvid. Värdena räknas i cqi, alltså mot omslagets egen
     bredd (.head och .tower-wrap är containrar med samma bredd), så att huvudet
     och tornet linjerar och inget klipps av en rullist. */
  --wrap-max: 480px;
  --ruler-w: 34px;
  --gap: 0px;
  --sign-w: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--sky-0); }
/* Mjuk scroll bara för den som inte bett om mindre rörelse. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--sky);
  color: var(--sky-ink);
  overflow-x: clip;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a:focus-visible { outline-color: var(--focus); }

/* Skip-länken: första tabbstoppet, synlig bara med fokus. */
.skip-link {
  position: fixed;
  top: var(--sp-2);
  left: var(--sp-2);
  max-width: calc(100vw - 2 * var(--sp-2));
  z-index: var(--z-overlay);
  padding: 10px 14px;
  background: var(--paper-ink);
  color: var(--paper-bg);
  font: 600 13px/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: var(--radius-1);
  transform: translateY(-220%);
}
.skip-link:focus { transform: translateY(0); }

/* ====== Huvudet: namn, roll, ingress, sammanfattning, kontakt ======
   Mobil: en kolumn, tät nog att taket och Kims fönster ryms i första vyn på
   360 × 640. Bred: samma raster som tornet, så att namnet står över tornet och
   sammanfattningen över skyltkolumnen (tower.css definierar rastret). Himlen
   bakom huvudet går från sidans topp till takets. */
.head {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  max-width: calc(var(--wrap-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 22px var(--gutter) 14px;
}
.head::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  background: linear-gradient(to bottom, var(--sky-0), var(--sky-1));
}
.head-name {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--sky-ink);
}
.head-role { font-size: 14.5px; font-weight: 600; color: var(--sky-accent); margin-top: 3px; }
.head-lede { font-size: 15px; line-height: 1.45; color: var(--sky-body); margin-top: 8px; max-width: 40ch; }
.head-summary { font-size: 14px; line-height: 1.5; color: var(--sky-body); margin-top: 6px; max-width: 60ch; }
.head-contact {
  font: 12.5px/1.65 var(--font-mono);
  color: var(--sky-body);
  margin-top: 8px;
  max-width: none;
}
.head-contact a { text-underline-offset: 3px; white-space: nowrap; }
/* Pekskärm: länkarna i kontaktraden får en träffyta på minst 24 px höjd. Vertikal
   padding på en inline-länk ändrar inte raden, så inget flyttar sig i bild. */
@media (any-pointer: coarse) {
  .head-contact a { padding-block: 5px; }
}

@media (min-width: 700px), (orientation: landscape) and (min-width: 560px) {
  .head { padding-top: 36px; padding-bottom: 28px; }
  .head-in {
    display: grid;
    grid-template-columns: calc(var(--tower-w) + var(--ruler-w)) var(--sign-w);
    column-gap: var(--gap);
    justify-content: center;
    align-items: start;
  }
  /* Namn, roll, ingress och kontakt över tornet; sammanfattningen över
     skyltkolumnen, där våningarnas skyltar sedan tar vid. */
  .head-name, .head-role, .head-lede, .head-contact { grid-column: 1; }
  .head-summary { grid-column: 2; grid-row: 1 / span 4; margin-top: 6px; font-size: 15px; line-height: 1.55; }
  .head-name { font-size: 34px; }
  .head-role { font-size: 16px; }
}
/* Låg skärm (liggande telefon): tätare huvud, så att taket och Kims fönster
   kommer upp i första vyn. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  .head { padding-top: 16px; padding-bottom: 12px; }
  .head-name { font-size: 26px; }
  .head-role { font-size: 14.5px; }
  .head-lede { margin-top: 4px; font-size: 14px; }
  .head-summary { font-size: 13.5px; line-height: 1.5; margin-top: 2px; }
  .head-contact { margin-top: 4px; font-size: 12px; }
}

/* ====== Chips: teknik per våning och per projekt ====== */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 0; padding: 0; }
.tags li {
  font: 600 11px/1 var(--font-mono);
  background: var(--paper-chip);
  color: var(--paper-chip-ink);
  padding: 5px 8px;
}