/* ABOUT — parc.studio/research:s introstycke som mall (fast text i grid-
   kolumn 2, ordmarke-prefix i kolumn 1), inte parc:s egen /about-yta.
   Kalla: 08 Site References/Portfolios/parc.studio/captured/research.css,
   klass .public-layout/.about-text/.public-brand. Geometrin ar hamtad darifran
   och skalad till HANDEN:s eget --U-rutnat; parc:s egna typsnitt anvands
   aldrig (GL21), allt star i --font-sans (licensierad HN Text).

   AVSTEG fran parc: deras /research-yta ar exakt en viewport hog (M i deras
   DESIGN.md). Var about-text ar langre (fyra stycken + en meritlista mot
   deras ett kort stycke), sa ytan tillats rulla i stallet for att klippa
   texten eller krympa typografin. Dokumenterat har, inte en tyst avvikelse. */

/* LAYOUTEN OMGJORD 2026-09-15 (Christoffer: "använd exakt samma layout för
   about som för exhibitions och work"). Ingen egen 7-kolumnsgrid längre --
   about-content positioneras med SAMMA formler som .projects-titles
   (fast vänsterkant, padding-left: U + gap*2, handen.css avsteg 5) och
   videon med SAMMA formler som .media-column-wrapper (margin-top:
   --card-top, margin-left: --card-left). Bredden på både text och video
   styrs av EN delad token, --card-left (handen.css avsteg 6), så de två
   flyttar sig tillsammans om den ändras, och Exhibitions bilder hamnar på
   exakt samma x-position som About:s video eftersom båda ruttarna delar
   samma --card-left-override. */
.about-layout {
  position: relative;
  min-height: 100vh;
  /* Linjen som PADDING här, inte som margin på .about-content: en margin-top
     kollapsar genom den här boxen och drar ner den absoluta videon lika
     mycket (uppmätt 2026-09-15: videon på 894 i stället för 371). */
  padding-top: var(--line);
  padding-bottom: var(--space-100);
}

.about-content {
  position: relative;
  margin-left: var(--U);                 /* kolumn 2, parcs lag, samma som titellistan */
  display: flex;
  flex-direction: column;
  gap: var(--space-30);
  /* Bredd = 2 kolumner (2U − gap), inte 66ch: rutnätet bestämmer, inte
     tecknen. 2 spann ger 57 tecken/rad vid 1440, 66 vid 1680, 76 vid 1920
     (norm 45–75, grinden mäter). Nästa spann (3) ger 85+ och krockar med
     mediakolumnen på 40vw + U. */
  width: var(--span-2);
}
/* Baslinjejustering, samma ide som .wordmark:top:-1.8px i shell.css: utan
   den hamnar stycket ett par pixlar under ordmarkets egen baslinje och den
   ihopgladda meningen ser brusten ut. */
.about-text p:first-child { margin-top: var(--nudge-about); }   /* mellanrummet mot ordmärket är nu guttern, ingen text-indent */
/* Storlek = ORDMÄRKETS (Christoffer 2026-09-15, tredje justeringen: först
   13.8 body, sedan 10 som titlarna, nu 12.83 som MARIA KOSHENKOVA), färg
   nedtonad till --ink-body (70 % svart), se tokens.css. Radavstånd =
   titelpitch 16.125 (1.26 på 12.83 px), samma rytm som listan till vänster
   på work/exhibitions. Gemener kvar. */
.about-text p { margin: 0 0 var(--title-pitch); font-family: var(--font-sans); font-size: var(--fs-about); line-height: var(--title-pitch); letter-spacing: var(--ls-body); font-weight: var(--fw-body); color: var(--ink-body); }
.about-text p:last-child { margin-bottom: 0; }

/* Meritlistan. Samma tvakolumnsmonster som parc:s info-section (etikett
   0.05, varde 0.2->1 pa hover), men i HANDEN:s egen typtrappa. */
.info-section { display: block; }
.info-label {
  margin: 0 0 var(--space-9);
  font-family: var(--font-sans); font-size: var(--fs-ui); line-height: var(--lh-ui);
  font-weight: var(--fw-ui); letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  color: rgb(0 0 0 / var(--op-dim));
}
.info-values {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--space-9);
  font-family: var(--font-sans); font-size: var(--fs-ui); line-height: var(--title-pitch);
  font-weight: var(--fw-ui); letter-spacing: var(--ls-ui);
  color: var(--ink);
}
/* Kalla som inte styrks av institutionens egen sida (research 2026-09-14):
   markeras, tas aldrig bort tyst. Samma monster som handen.css
   .credits-values, upprepat har eftersom listan star i en annan klass. */
.info-values li[data-src="unverified"]::after {
  content: " \00b7 unverified";
  opacity: .45;
}

/* Videons malruta. Tredje rundan (2026-09-15): "exakt samma layout som
   exhibitions och work" -- positionen ar nu SAMMA formler som
   .media-column-wrapper (projects.css): margin-top: --card-top,
   margin-left: --card-left. --card-left ar overridad for data-route=about
   till samma varde som for exhibitions (handen.css avsteg 6), sa videon
   och Exhibitions forsta bild hamnar pa EXAKT samma x-position, precis
   det Christoffer bad om. Fast, inte i flodet (about-texten ar mycket
   langre an en bildlista och skulle annars dra videon langt ner). */
.about-video-slot {
  /* FIXED på desktop (Christoffer 2026-09-16: "videon ligger kvar i samma
     position när man scrollar"). --line/--card-left är viewport-relativa, så
     läget vid scroll 0 är identiskt med det gamla absoluta, men den följer
     inte med scrollen. Mobil override nedan sätter tillbaka static i flödet. */
  position: fixed;
  /* Parcs centreringslag på elementets EGEN höjd: --card-top räknar på
     kortets 1.66, videon är 16:9 och hamnade 8.6 px för högt (grinden). */
  top: calc(var(--line) - (var(--card-w) / 1.7778) / 2);
  left: var(--card-left);
  width: var(--card-w);      /* samma bredd som ett kort på work/exhibitions */
  height: auto;
  aspect-ratio: 1.7778;      /* videons eget format, inte kortets 1.66 */
  /* Ingen bakgrund (Christoffer 2026-09-16: "ta bort den graa boxen sa man
     inte ser vart den skall landa"). Videon tacker rutan nar den landat. */
  background: transparent;
  overflow: hidden;
  pointer-events: none;
  z-index: 15;
}
.about-video-slot video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Mobil: ordmarket flyttar till en egen rad langst ner (shell.css:
   .shell-wordmark/.shell-nav display:none, .mobile-bar tar over), sa
   ihopklistringen med paragrafen fungerar inte dar -- namnet maste stå i
   sjalva texten i stallet. KANT GAP: inte skarmdumpat annu (2026-09-15). */
.mobile-name { display: none; }
@media (max-width: 768px) {
  .mobile-name { display: inline; font-weight: 700; }
  .about-layout { padding-top: calc(var(--line) + var(--space-40)); padding-inline: var(--space-20); }
  .about-content { margin: 0; width: 100%; }
  .about-video-slot {
    position: static; margin-top: var(--space-30); height: auto; width: 100%; aspect-ratio: 1.7778;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   INTRO-LADDAREN — port av alykula.com:s #site-loader/.stack, matt live
   2026-09-15 (se README "Intro"). Sju falt (sex bilder + video), varje
   falt REVEALAS i ett hart klipp nar det laddat, ingen crossfade, ingen
   storleksanimation in (referensens matta transition: none). Enda egna
   tillagget: sista faltet (videon) dror kvar 3 s och FLIPar sedan till
   about-videons malruta, med en riktig transition -- det finns inget
   sadant steg pa alykula, hela den rorelsen ar var egen.

   AVSTEG fran referensen, med flit: deras ruta har tva olika procenttak per
   axel (bredd 84%, hojd 72%, den som ar "primar" beror pa en per-bild
   orienteringsetikett vi inte har data pa). Var ruta anvander ETT tak,
   84% pa bada axlarna (object-fit: contain), sa alla sex bilder + videon
   far samma enkla regel utan att gissa en etikett som inte finns i vart
   underlag. */
.intro-loader {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
}
.intro-stack {
  position: relative;
  /* +30 % 2026-09-15 (Christoffer: "öka alla bilder och videons storlek ...
     30 %", det gällde INTROT). 420 -> 546, 58vmin -> 75vmin. */
  width: var(--intro-stack);
  height: var(--intro-stack);
}
.intro-item {
  position: absolute; top: 50%; left: 50%;
  max-width: 84%; max-height: 84%;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.intro-item.is-visible { opacity: 1; }
.intro-item img, .intro-item video { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Videon i sin EXAKTA slutstorlek (Christoffer 2026-09-16: "videon flyttar
   bara, växer inte"). --intro-video = --card-w = about-slotens bredd; höjden
   följer den inline-satta aspect-ration (1.7778, videons eget 16:9). Explicit
   `width` behovs: utan den sizer WebKit .intro-item pa bara max-width/max-
   height + inline aspect-ratio, och kollapsar till ~273px i stallet for
   slotens 432px. max-width/max-height nollas sa den explicita bredden vinner
   aven nar --card-w > 84% av stacken (t.ex. 1680). FLIPen blir da en ren
   positionsflytt: top/left andras, width/height konstant. */
.intro-item.is-video {
  width: var(--intro-video);
  max-width: none; max-height: none;
}

/* Videons flip: fran fast (position: fixed, samma koordinater som stacken)
   till malrutans rect, en riktig CSS-transition eftersom det HAR ar var
   egen rorelse, inte referensens. 900ms/--ease, eget val, kallmarkt. */
.intro-video-flip {
  position: fixed; z-index: 1001;
  transition: top .9s var(--ease), left .9s var(--ease), width .9s var(--ease), height .9s var(--ease);
}
.intro-video-flip video { display: block; width: 100%; height: 100%; object-fit: cover; }

.intro-loader.is-fading { transition: opacity .52s var(--ease); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .intro-loader, .intro-video-flip { display: none !important; }
}