/* Det fasta skalet. Ligger på var enda rutt och rör sig aldrig.
   Desktop: allt hänger på linjen (56vh) och rutnätsenheten U.
   Mobil (<=768): ordmärke och nav flyttar till en 82 px hög rad i botten,
   stjärnan flyttar från nedre till ÖVRE högra hörnet, och linjen sitter på
   50vh - 4.73px. Allt uppmätt vid 390x844 och 768x1024. */

.shell-wordmark {
  display: flex; position: fixed; top: var(--line); left: 0;
  justify-content: flex-end;
  z-index: 20;
  /* Topluft så ingen container klipper glyfernas ovankant (Christoffer
     2026-09-17: loggan kapades i toppen under introt och släpptes när det tog
     slut). Orsak: .shell-wordmark-boxen var exakt kapshöjd med glyferna
     nudgade 1.8px ovanför den; Safari komposit-klipper det fixerade lagret
     till boxen medan den vita loadern ligger ovanpå. padding-top ger boxen
     luft uppåt, kompenserande margin håller ordmärkets faktiska läge exakt. */
  padding-top: 6px; margin-top: -6.5px;
  /* AVSTEG (2026-09-15, ersätter handen.css avsteg 5): parc har width: U,
     alltså ordmärkets högerkant på kolumn 2:s VÄNSTERKANT, guttern uppäten.
     Det bar för "parc+" (35 px). "MARIA KOSHENKOVA" (133 px) slutade då dörr
     i dörr med titellistan. Rätt lösning på rutnätet är inte att flytta
     listan (avsteg 5 gjorde det, +2 gap, utanför nätet) utan att hålla
     ordmärket inne i sin kolumn: bredd U − gap. Då står listan på U, exakt
     parcs lag, med en gutter emellan. Gräns: kolumnbredden är 133 px vid
     1024 -- under det (till 769) sticker namnet ut åt vänster. Mobilen har
     egen rad. */
  width: var(--span-1);
  pointer-events: none;
}
/* Ordmärkets baslinje. Uppmätt i originalet: ordmärkets alfabetiska
   baslinje ligger 0.49 px OVANFÖR den aktiva titelns, alltså praktiskt
   flush. Utan förskjutningen hamnar den 1.31 px under och raden
   "parc+CHANEL FW 2025/26" ser bruten ut. */
.wordmark {
  position: relative; top: -1.8px;
  padding-block: 0;
  pointer-events: auto;
  font-family: var(--font-wordmark);
  font-size: var(--fs-wordmark);
  font-weight: 500;
  line-height: 0;
  letter-spacing: 0;
  color: var(--ink);
  text-box: trim-both cap alphabetic;
}
/* SAFARI-BUGGEN, den riktiga orsaken (2026-09-15, Christoffer: ordmarket
   och den rullande listan/about-texten inte alignade i Safari). Uppmatt
   mot bade Playwright-chromium OCH Playwright-webkit (_analysis/wk-diag2.mjs):
   `text-box-trim` stods av BADA motorerna (CSS.supports = true i bada), men
   Safari trimmar FRAN den satta line-height:0 (0 minus halva ledningen ar
   fortfarande ~0, ingen positiv box kan skapas ur intet), medan Chromium
   raknar om boxen helt fran typsnittets versalhojd oavsett line-height och
   ignorerar 0:an. Med line-height:0 gav webkit height:0/bottom lika med top;
   chromium gav 9.14px. Med line-height:normal gav BÅDA motorerna 9.13px
   (0.02px isar) -- identiskt, TOPPEN opaverkad. Fixen ar allts inte en
   @supports-fallback, det ar att aldrig satta line-height:0 pa ett element
   som ska trimmas: lat text-box-trim gora hela jobbet fran ett normalt
   line-height i stallet. */
.wordmark { line-height: normal; }

.shell-nav {
  display: flex; position: fixed; top: var(--line); right: 16px;
  gap: 10px; z-index: 20;
}
.shell-nav a { transition: opacity var(--dur-300) var(--in-out); }
.shell-nav a.is-inactive { opacity: var(--op-mid); }
.shell-nav a.is-active { opacity: 1; }
.shell-nav a:hover { opacity: 1; }   /* uppmätt: 0.2 -> 1 */

.projects-titles {
  position: fixed; top: var(--line); left: 0;
  z-index: 20; width: 100vw; padding-left: var(--U);
  pointer-events: none;
}
.projects-titles-list {
  display: flex; flex-direction: column; gap: var(--title-gap);
  align-items: flex-start; width: max-content;
  transition: transform var(--dur-400) var(--in-out);
  will-change: transform;
}
/* Originalets egen klass. Under scroll är transform-övergången AV, listan
   följer scrollen ram för ram. Uppmätt: listTy släpar bara ~0.25 px på en
   17.5 px förflyttning, alltså ingen 0.4 s-transition i det läget. */
.projects-titles-list.no-transition { transition-property: opacity; }

.project-title {
  opacity: var(--op-dim);
  transition: opacity var(--dur-150) var(--in-out);
  pointer-events: auto;
}
.project-title.is-active { opacity: 1; }
/* Under avfärden håller den lämnande aktiva titeln 0.2, inte 0.05. Uppmätt. */
body.is-leaving-page .project-title:not(.is-active) { opacity: var(--op-mid); }
.project-title:not(.is-active):hover { opacity: var(--op-mid); }
.project-title a { display: block; position: relative; }
.project-title a::before { content: ""; position: absolute; inset-block: -4.5px; inset-inline: 0; }

/* Exhibitions: årtal i egen tabular-kolumn (2026-09-16, struktur från
   r1-rummet). Bara på data-route="exhibitions" så Work-titlarna är orörda.
   Radens vänsterkant (t-yr) ligger kvar på --U; namnet är indraget en
   kolumnbredd + gap. align-items:baseline delar baslinje mellan årtal och
   namn så gaten mäter samma underkant som förr. */
html[data-route="exhibitions"] .project-title > a,
html[data-route="exhibitions"] .project-title > span {
  display: flex; align-items: baseline; gap: var(--ex-yr-gap);
}
html[data-route="exhibitions"] .t-yr {
  flex: 0 0 auto; width: var(--ex-yr-w);
  font-variant-numeric: tabular-nums;
}
html[data-route="exhibitions"] .t-rest { flex: 1 1 auto; min-width: 0; }

.journal-star-link {
  display: flex; position: fixed; right: 0; bottom: 0;
  justify-content: center; align-items: center;
  z-index: 60; padding: 10px;
  opacity: var(--op-mid);
  color: var(--ink);
}
.journal-star-icon { display: block; width: 20px; height: 19px; }
.journal-star-icon path { fill: currentColor; }

/* Andningen på mailto-raden. Uppmätt ur originalet:
   background-clip:text, 250% bred gradient, 4s linjär loop, 100% -> 0%. */
.breathe {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0) calc(50% - 56px), rgb(0,0,0) 50%, rgba(0,0,0,0) calc(50% + 56px)),
    linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05));
  background-size: 250% 100%, auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: breathe-shimmer 4s linear infinite;
  transition: color var(--dur-400) var(--in-out), -webkit-text-fill-color var(--dur-400) var(--in-out);
}
/* Uppmätt: hovras mailto-raden byts skimret mot solid svart över 400 ms. */
.breathe:hover { color: var(--ink); }
@keyframes breathe-shimmer {
  from { background-position: 100% 50%, 0 0; }
  to   { background-position: 0% 50%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .breathe { animation: none; background-position: 50% 50%, 0 0; }
  .projects-titles-list { transition: none; }
}

/* ---- mobilraden, uppmätt ------------------------------------------------
   82 hög, padding 14 0 20, inre nav 48 hög. Ordmärket 16.83 px på x10.
   Länkarna högerställda, gap 15, 10 från högerkanten. */
.mobile-bar { display: none; }
@media (max-width: 768px) {
  .shell-wordmark, .shell-nav { display: none; }
  .projects-titles { padding-left: var(--mobile-pad); }
  .journal-star-link { top: 0; bottom: auto; }

  .mobile-bar {
    display: flex; position: fixed; left: 0; bottom: 0;
    align-items: center;
    width: 100vw; height: var(--mobile-bar-h);
    padding: 14px 0 20px;
    z-index: 20;
  }
  .mobile-bar .wordmark { margin-left: var(--mobile-pad); font-size: var(--fs-wordmark); }
  .mobile-bar nav {
    display: flex; gap: 15px;
    margin-left: auto; margin-right: var(--mobile-pad);
  }
  .mobile-bar nav a.is-inactive { opacity: var(--op-mid); }
}