/* ============================================================
   ELITE ESPORTS GROUP

   Ljus koncernbotten, mörkt arbete. Sidan är off-white och luftig;
   hero, showreel, postervägg och kontakt är mörka block i full bredd
   så att materialet smäller till mot pappret.

   Allt färgsätts via tokens. Ett block som ska vara mörkt får bara
   klassen .dark - då byts tokens ut lokalt och alla komponenter
   följer med. Skriv aldrig en färg direkt i en komponent.
   ============================================================ */

:root{
  /* ljus grund */
  --paper:#F6F6F4;
  --paper-2:#EDECE7;
  --ink:#111214;
  --ink-soft:#5C6068;
  --ink-faint:#8A8E96;
  --line:#DEDCD5;
  --line-2:#C6C3BA;

  /* mörka block */
  --dark:#0B0C0E;
  --dark-2:#131519;
  --dark-3:#1B1E24;

  /* EEG-symbolen som mask - kan därför färgsättas och skalas fritt.
     Sökvägen är relativ till den här filen. */
  --mark:url("../../logo/Off-Black%20Version/elite-esports-group-isolated-icon-offblack.png");

  --signal:#FFD400;       /* gul ram. Signalen som syns på håll. */
  --bla:#2B7CEE;          /* blå stapel i flaggan. Detalj, inte bärare. */
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Barlow','Helvetica Neue',Arial,sans-serif;

  --gutter:clamp(20px,5vw,64px);
  --maxw:1240px;
  --rail:200px;
  --r:8px;
}

/* Mörkt block: samma tokens, andra värden. */
.dark{
  --paper:var(--dark);
  --paper-2:var(--dark-2);
  --ink:#F2F2F0;
  --ink-soft:#A9AFB8;
  --ink-faint:#787E88;
  --line:rgba(242,242,240,.13);
  --line-2:rgba(242,242,240,.26);
  background:var(--paper);
  color:var(--ink);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html,.shorts{ scroll-behavior:auto; } .stage-track{ transition:none; } }

body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video,iframe{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
[hidden]{ display:none !important; }

/* ---------- typografi ---------- */
/* line-height måste rymma Å och Ä. Mätt i Archivo: Å når 0,94 em över
   baslinjen och Ö hänger 0,02 em under, så rader närmare än 0,96 em
   får prickarna att slå i raden ovanför. 1,02 ger marginal. */
.display{
  font-family:var(--display); font-weight:800; font-stretch:112%;
  text-transform:uppercase; line-height:1.02; letter-spacing:-.012em; text-wrap:balance;
  overflow-wrap:break-word;
}
h1.display{ font-size:clamp(1.95rem,6.4vw,5.4rem); }
h2.display{ font-size:clamp(1.55rem,4.2vw,3.4rem); }
.label{
  font-family:var(--display); font-weight:700; font-stretch:112%;
  text-transform:uppercase; font-size:.6875rem; letter-spacing:.2em; color:var(--ink-faint);
  display:flex; align-items:center; gap:9px;
}
.label::before{ content:""; width:17px; height:15px; flex:none; background:var(--ink); -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat; }
.lede{ font-size:clamp(1.06rem,1.5vw,1.3rem); color:var(--ink-soft); max-width:56ch; }
p{ max-width:64ch; }

/* ---------- header ---------- */
.top{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(16px); border-bottom:1px solid var(--line);
}
.top-in{ display:flex; align-items:center; gap:24px; height:70px; }
.brand{ display:flex; align-items:center; text-decoration:none; margin-right:auto; }
.brand img{ height:19px; width:auto; }
.brand .on-light{ display:block; } .brand .on-dark{ display:none; }
.dark .brand .on-light{ display:none; } .dark .brand .on-dark{ display:block; }

nav.main{ display:flex; gap:26px; }
nav.main a{
  font-family:var(--display); font-weight:600; font-stretch:108%; text-transform:uppercase;
  font-size:.6875rem; letter-spacing:.15em; color:var(--ink-soft); text-decoration:none;
  padding:6px 0; border-bottom:2px solid transparent; transition:color .18s,border-color .18s;
}
nav.main a:hover,nav.main a[aria-current]{ color:var(--ink); border-bottom-color:var(--ink); }
nav.main a[data-aktiv]{ color:var(--ink); border-bottom-color:var(--line-2); }

.lang{ display:flex; align-items:center; border:1px solid var(--line-2); }
.lang button{
  font-family:var(--display); font-weight:700; font-stretch:110%; font-size:.625rem;
  letter-spacing:.14em; text-transform:uppercase; background:none; border:0;
  color:var(--ink-faint); cursor:pointer; padding:7px 10px; transition:background .18s,color .18s;
}
.lang button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.lang button:hover{ color:var(--ink); }
.lang button[aria-pressed="true"]:hover{ color:var(--paper); }

.burger{
  display:none; background:none; border:1px solid var(--line-2); color:var(--ink);
  padding:8px 11px; cursor:pointer; font-family:var(--display); font-size:.625rem;
  letter-spacing:.14em; text-transform:uppercase; font-weight:700;
}
@media (max-width:920px){
  nav.main{
    position:fixed; inset:70px 0 auto 0; flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 20px; display:none;
  }
  nav.main.open{ display:flex; }
  nav.main a{ font-size:.95rem; letter-spacing:.1em; padding:14px 0; border-bottom:1px solid var(--line); }
  .burger{ display:block; }
}

/* ---------- sektionsraster ---------- */
.sec{ display:grid; grid-template-columns:var(--rail) 1fr; gap:0 52px; padding-block:clamp(64px,8vw,120px); }
.sec > .rail{ position:sticky; top:116px; align-self:start; }
.sec > .col{ display:flex; flex-direction:column; gap:32px; min-width:0; }
@media (max-width:920px){
  .sec{ grid-template-columns:1fr; gap:26px; }
  .sec > .rail{ position:static; }
}
.band{ border-top:1px solid var(--line); }

/* ---------- knappar ---------- */
.btn{
  font-family:var(--display); font-weight:700; font-stretch:110%; text-transform:uppercase;
  font-size:.6875rem; letter-spacing:.16em; padding:16px 28px; text-decoration:none;
  display:inline-block; border:1px solid transparent; cursor:pointer;
  background:transparent;   /* annars slår webbläsarens egen knappbakgrund igenom */
  transition:background .18s,color .18s,border-color .18s;
}
.btn-solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-solid:hover{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost{ border-color:var(--line-2); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); color:var(--ink); }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* Symbolen som stor, tyst markering. Riktig fil, inte ritad. */
.hero-mark{
  position:absolute; right:clamp(-24px,2vw,52px); top:15%;
  width:min(26vw,300px); opacity:.1; z-index:3; pointer-events:none;
}
@media (max-width:920px){ .hero-mark{ display:none; } }
.kontakt-mark{ width:clamp(72px,8vw,112px); opacity:.3; margin-bottom:10px; }

/* ============ HERO (mörkt block) ============ */
.hero{ position:relative; min-height:min(92vh,860px); display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--dark); }
.hero-media video,.hero-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-poster{ z-index:0; }
/* iframen storleksätts av JS så den täcker ytan - object-fit finns inte för iframes */
.hero-yt{ position:absolute; top:50%; left:50%; translate:-50% -50%; border:0; z-index:1; pointer-events:none; max-width:none; filter:brightness(1.14) saturate(1.04); opacity:0; transition:opacity .8s ease; }
.hero-yt.on{ opacity:1; }
/* Slöjan ska bära texten, inte släcka filmen. Mörk längst ner där texten
   står, klar på mitten, svag topp så headern går att läsa. */
.hero-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(11,12,14,.95) 0%, rgba(11,12,14,.74) 20%,
      rgba(11,12,14,.20) 50%, rgba(11,12,14,0) 70%, rgba(11,12,14,.36) 100%),
    linear-gradient(to right,
      rgba(11,12,14,.70) 0%, rgba(11,12,14,.30) 34%, rgba(11,12,14,0) 60%);
}
.hero-in{ width:100%; position:relative; z-index:3; padding-block:clamp(130px,19vw,200px) clamp(30px,4vw,52px); }
.hero-logo{ height:clamp(21px,2.5vw,31px); width:auto; margin-bottom:14px; }
.hero-kicker{
  font-family:var(--display); font-weight:600; font-stretch:108%; text-transform:uppercase;
  font-size:.6875rem; letter-spacing:.2em; color:#C6CBD3; margin-bottom:30px;
}
.hero h1{ margin-bottom:26px; }
.hero .lede{ margin-bottom:36px; color:#D6DAE0; max-width:52ch; }

/* ============ NÄTVERKET ============ */
/* Öppna rader, inga kortytor. Bara hårlinjer emellan. */
.clubs{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.club{
  display:grid; gap:10px 0; align-items:start;
  padding-block:24px; border-bottom:1px solid var(--line);
  text-decoration:none; position:relative;
}
.club::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.16,.84,.32,1);
}
.club:hover::after,.club:focus-visible::after{ transform:scaleX(1); }

@media (min-width:860px){
  .club{
    grid-template-columns:52px minmax(150px,190px) minmax(0,1fr) auto;
    align-items:center; gap:0 32px; padding-block:22px;
  }
}

/* Märkena är gjorda för mörk botten, därför en liten mörk bricka. */
.club-mark{
  width:52px; height:52px; flex:none; display:grid; place-items:center;
  background:var(--dark); border-radius:var(--r);
}
.club-mark img{ width:64%; height:64%; object-fit:contain; }
.club-mark.empty{ background:none; border:1px dashed var(--line-2); }

.club-id{ display:flex; flex-direction:column; gap:3px; }
.club .cname{
  font-family:var(--display); font-weight:800; font-stretch:112%; text-transform:uppercase;
  font-size:clamp(1.15rem,1.9vw,1.4rem); line-height:1.05; letter-spacing:-.005em;
}
.club .country{
  font-family:var(--display); font-weight:600; font-stretch:106%; text-transform:uppercase;
  font-size:.5875rem; letter-spacing:.2em; color:var(--ink-faint);
}
.club p{ color:var(--ink-soft); font-size:.95rem; max-width:52ch; }
.club .go{
  font-family:var(--display); font-weight:700; font-stretch:106%; text-transform:uppercase;
  font-size:.5875rem; letter-spacing:.15em; color:var(--ink-faint);
  white-space:nowrap; transition:color .25s ease;
}
.club:hover .go,.club:focus-visible .go{ color:var(--ink); }

/* ============ VAD VI GÖR ============ */
/* Arbetsfördelningen är hela erbjudandet, så den får vara en egen figur.
   Panelen "Vi gör" är mörk för att visa var tyngden ligger. */
.split{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:640px){ .split{ grid-template-columns:1fr 1fr; } }
.split > div{ background:var(--paper); padding:30px 32px 34px; }
.split-h{
  font-family:var(--display); font-weight:700; font-stretch:112%; text-transform:uppercase;
  font-size:.6875rem; letter-spacing:.2em; color:var(--ink-faint);
}
.split ul{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-top:18px; }
.split li{
  font-family:var(--display); font-weight:700; font-stretch:108%; text-transform:uppercase;
  font-size:clamp(.92rem,1.5vw,1.06rem); letter-spacing:.03em;
  display:flex; gap:12px; align-items:center;
}
.split li::before{ content:""; width:13px; height:11px; flex:none; background:var(--ink); -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat; }

.do-item{ display:grid; grid-template-columns:1fr; gap:7px; padding:26px 0; border-bottom:1px solid var(--line); }
.do-item:first-child{ padding-top:0; }
.do-item:last-child{ border-bottom:0; padding-bottom:0; }
.do-item h3{ font-family:var(--display); font-weight:800; font-stretch:108%; text-transform:uppercase; font-size:1.08rem; letter-spacing:.02em; }
.do-item p{ color:var(--ink-soft); max-width:56ch; }
@media (min-width:760px){ .do-item{ grid-template-columns:minmax(0,15rem) 1fr; gap:0 44px; align-items:baseline; } }

/* ============ SHOWREEL ============ */
.reel-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px 32px; flex-wrap:wrap; padding-block:clamp(56px,7vw,92px) 30px; }
.reel-head h2{ max-width:15ch; }
/* Påståendet står brett - det ska läsas, inte bara skummas. */
.pastaende{ max-width:56ch; margin-top:16px; font-size:1.04rem; color:var(--ink-soft); }
.pastaende strong{ color:var(--ink); font-weight:600; }
/* Scenen: en film i taget, i full bredd. Höjden kapas mot fönstret så
   att hela 16:9-ytan får plats utan att man måste scrolla. */
.stage-wrap{ position:relative; padding-bottom:26px; }
.stage{ overflow:hidden; touch-action:pan-y; cursor:grab; }
.stage.dragging{ cursor:grabbing; }
.stage-track{
  display:flex; will-change:transform;
  transition:transform .55s cubic-bezier(.16,.84,.32,1);
}
.stage.dragging .stage-track{ transition:none; }
.stage.utan-animation .stage-track,
.stage.utan-animation .slide{ transition:none !important; }
/* Slidesen är smalare än scenen, så nästa och förra filmen tittar fram i
   kanterna. Då syns det att det går att bläddra utan att man måste gissa. */
.slide{
  flex:0 0 82%; padding-inline:6px; display:grid; place-items:center;
  user-select:none; opacity:.3; transition:opacity .5s ease;
}
@media (min-width:760px){ .slide{ flex-basis:72%; padding-inline:10px; } }
@media (min-width:1200px){ .slide{ flex-basis:66%; padding-inline:12px; } }
.slide.active{ opacity:1; }
.slide-inner{ width:min(100%, calc(74vh * 16 / 9)); aspect-ratio:16/9; position:relative; }

.film-frame{
  position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0;
  background:var(--paper-2); padding:0; cursor:pointer; overflow:hidden;
  display:block; color:inherit; font:inherit;
}
.film-frame img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease, filter .35s ease; filter:saturate(.94) brightness(.9); }
.film-frame:hover img,.film-frame:focus-visible img{ transform:scale(1.02); filter:saturate(1.04) brightness(1); }
.film-frame iframe{ width:100%; height:100%; border:0; }
.play{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.play span{ width:84px; height:84px; border-radius:50%; background:var(--ink); display:grid; place-items:center; transition:transform .3s ease; }
.play span::after{ content:""; width:0; height:0; margin-left:7px; border-left:24px solid var(--paper); border-top:15px solid transparent; border-bottom:15px solid transparent; }
.film-frame:hover .play span,.film-frame:focus-visible .play span{ transform:scale(1.1); }

/* pilar */
.stage-nav{
  position:absolute; top:50%; translate:0 -50%; z-index:3;
  width:52px; height:52px; display:grid; place-items:center; cursor:pointer;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  border:1px solid var(--line-2); color:var(--ink);
  font-family:var(--display); font-weight:700; font-size:1.2rem; line-height:1;
  transition:background .2s,border-color .2s,opacity .2s;
}
.stage-nav:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.stage-nav[disabled]{ opacity:.22; pointer-events:none; }
.stage-prev{ left:clamp(10px,2vw,28px); }
.stage-next{ right:clamp(10px,2vw,28px); }

/* text under scenen */
.stage-meta{
  display:flex; align-items:baseline; gap:16px 22px; flex-wrap:wrap;
  padding-bottom:clamp(34px,4vw,52px);
}
.stage-count{
  font-family:var(--display); font-weight:700; font-stretch:110%;
  font-size:.6875rem; letter-spacing:.18em; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.stage-title{
  font-family:var(--display); font-weight:800; font-stretch:110%; text-transform:uppercase;
  font-size:clamp(1.05rem,1.9vw,1.35rem); letter-spacing:.02em;
}
.stage-sub{
  font-family:var(--display); font-weight:600; font-stretch:104%; text-transform:uppercase;
  font-size:.5875rem; letter-spacing:.15em; color:var(--ink-faint);
}
.stage-sub i{ font-style:normal; color:var(--ink); }

/* Kortformatet ligger i .wrap och följer därför samma kant som allt annat.
   Rutnät på desktop; sidoscroll först i mobil, där det är det naturliga. */
/* Full bredd, som filmscenen. Första kortet börjar i linje med
   innehållet, resten löper ut mot kanten. Ingen synlig scrollbar -
   man drar med musen eller sveper. */
.shorts-wrap{ position:relative; padding-bottom:clamp(56px,7vw,92px); }
.shorts{
  display:flex; gap:14px; overflow-x:auto;
  padding-inline:var(--gutter);
  scroll-snap-type:x proximity; scroll-padding-inline:var(--gutter);
  scroll-behavior:smooth; padding-bottom:4px;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab; touch-action:pan-x pan-y;   /* touch scrollar nativt */
  overscroll-behavior-x:contain;
  /* Tonar ut i båda kanterna så raden ser ut att fortsätta åt båda håll. */
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.shorts::-webkit-scrollbar{ display:none; }
/* Under drag och utrullning ska varken snap eller mjuk scroll motarbeta oss. */
.shorts.dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.shorts-nav{
  position:absolute; top:calc(50% - clamp(28px,3.5vw,46px)); translate:0 -50%; z-index:3;
  width:46px; height:46px; display:grid; place-items:center; cursor:pointer;
  background:color-mix(in srgb, var(--paper) 84%, transparent);
  border:1px solid var(--line-2); color:var(--ink);
  font-family:var(--display); font-weight:700; font-size:1.1rem; line-height:1;
  transition:background .2s,border-color .2s,color .2s,opacity .2s;
}
.shorts-nav:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.shorts-nav[disabled]{ opacity:0; pointer-events:none; }
.shorts-prev{ left:clamp(8px,1.6vw,22px); }
.shorts-next{ right:clamp(8px,1.6vw,22px); }
.reel-item{
  flex:0 0 auto; width:min(56vw,208px); scroll-snap-align:start;
  display:flex; flex-direction:column; gap:11px;
}

/* Fasad: omslag + play. Iframen laddas först vid klick. */
.short-frame{
  position:relative; width:100%; aspect-ratio:9/16; display:block; padding:0;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--paper-2); cursor:pointer; color:inherit; font:inherit;
}
.short-frame img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .35s ease; filter:saturate(.94) brightness(.9); }
.short-frame:hover img,.short-frame:focus-visible img{ transform:scale(1.04); filter:none; }
.short-frame iframe{ width:100%; height:100%; border:0; }
.short-frame .play span{ width:52px; height:52px; }
.short-frame .play span::after{ margin-left:4px; border-left:14px solid var(--paper); border-top:9px solid transparent; border-bottom:9px solid transparent; }
.flagga{
  position:absolute; top:10px; left:10px; z-index:2; max-width:calc(100% - 20px);
  display:flex; align-items:stretch; gap:7px;
  background:#F4F4F2; color:#0B0C0E;
  font-family:var(--display); font-weight:800; font-stretch:112%;
  text-transform:uppercase; font-size:.5625rem; letter-spacing:.085em; line-height:1.55;
  padding:6px 9px 6px 6px; border-radius:3px; pointer-events:none;
  box-shadow:0 3px 16px rgba(0,0,0,.5);
}
/* Blå stapel i vänsterkanten. Ramen runt kortet bär det gula. */
.flagga::before{ content:''; flex:none; width:3px; background:var(--bla); border-radius:2px; }
@media (max-width:560px){
  .flagga{ font-size:.5rem; letter-spacing:.06em; padding:5px 7px 5px 5px; gap:6px; }
}

/* Hela kortet ringas in, så det syns i raden och inte bara i hörnet. */
/* Ramen är bara kantlinjen. Den extra ringen gjorde den dubbelt så tjock. */
.reel-item.utvald .short-frame{
  border-color:var(--signal);
  box-shadow:0 5px 24px rgba(255,212,0,.18);
}
.reel-item.utvald .short-frame img{ filter:none; }
/* De omärkta får stå tillbaka en aning, det är kontrasten som gör jobbet. */
.reel-item:not(.utvald) .short-frame img{ filter:saturate(.9) brightness(.82); }

.reel-item .cap{ font-family:var(--display); font-weight:600; font-stretch:104%; text-transform:uppercase; font-size:.5875rem; letter-spacing:.15em; color:var(--ink-faint); }
.reel-item .cap b{ color:var(--ink); font-weight:700; display:block; margin-bottom:3px; }

.reel-lead .wrap{ padding-block:clamp(96px,12vw,150px) clamp(34px,4vw,54px); display:flex; flex-direction:column; gap:22px; }
.reel-lead h1.display{ font-size:clamp(2.1rem,5.6vw,4.4rem); }

/* ============ SNABBVAL I SHOWREELET ============ */
.reel-block{ position:relative; }
/* Raden ligger på mörk botten oavsett var den råkar hamna, därför
   fasta färger i stället för tokens. */
.reel-nav{
  position:sticky; top:70px; z-index:40;
  background:rgba(11,12,14,.92);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(242,242,240,.11);
}
.reel-nav-in{
  display:flex; align-items:center; gap:6px; height:52px;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.reel-nav-in::-webkit-scrollbar{ display:none; }
.reel-nav a{
  font-family:var(--display); font-weight:700; font-stretch:108%;
  text-transform:uppercase; font-size:.625rem; letter-spacing:.15em;
  color:rgba(242,242,240,.56); text-decoration:none; white-space:nowrap;
  padding:9px 14px; border:1px solid transparent; border-radius:4px;
  transition:color .18s, border-color .18s, background .18s;
}
.reel-nav a:hover,.reel-nav a:focus-visible{ color:#F2F2F0; border-color:rgba(242,242,240,.26); }
.reel-nav a[data-aktiv]{ color:#0B0C0E; background:#F2F2F0; border-color:#F2F2F0; }

/* Hoppen ska landa under toppmenyn OCH under snabbvalen. */
#filmproduktion,#kortformat,#grafik,#merchandise{ scroll-margin-top:122px; }

/* ============ MERCHANDISE ============ */
/* Samma dragbara rad som kortformatet, men kvadratiska kort. */
.merch-item{ width:min(62vw,236px); }
.merch-frame{
  position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; display:block;
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper-2);
  padding:0; cursor:zoom-in; color:inherit; font:inherit;
}
.merch-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease, filter .35s ease;
  filter:saturate(.92) brightness(.9);
}
.merch-item:hover .merch-frame img{ transform:scale(1.04); filter:none; }
.merch-item.utvald .merch-frame{
  border-color:var(--signal);
  box-shadow:0 5px 24px rgba(255,212,0,.18);
}
.merch-item.utvald .merch-frame img{ filter:none; }
/* Fram och bak tätt ihop; gapet mellan plagg är radens egna 14 px. */
.merch-par{ display:flex; flex:0 0 auto; gap:5px; }
.merch-text{ padding-top:clamp(30px,4vw,48px); }

/* ============ POSTERVÄGG ============ */
.grafik-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px 32px; flex-wrap:wrap; padding-block:clamp(56px,7vw,92px) 28px; }
.grafik-titel{ display:flex; flex-direction:column; gap:14px; }
.grafik-head h2{ max-width:20ch; }
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.filters button{
  font-family:var(--display); font-weight:700; font-stretch:106%; text-transform:uppercase;
  font-size:.625rem; letter-spacing:.15em; background:none; cursor:pointer;
  border:1px solid var(--line-2); color:var(--ink-soft); padding:9px 15px;
  transition:color .18s,border-color .18s,background .18s;
}
.filters button:hover{ color:var(--ink); border-color:var(--ink); }
.filters button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.wall{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.wall-mer{ display:flex; justify-content:center; padding-block:clamp(26px,3.5vw,44px) clamp(56px,7vw,92px); }
.wall-mer button[hidden]{ display:none; }
@media (min-width:640px){ .wall{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .wall{ grid-template-columns:repeat(4,1fr); } }
.tile{
  margin:0; padding:0; width:100%; display:block; position:relative;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  cursor:zoom-in; overflow:hidden; color:inherit; font:inherit; text-align:left;
}
.tile img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .5s ease, filter .35s ease; }
.tile:hover img,.tile:focus-visible img{ transform:scale(1.04); filter:brightness(1.08); }
.tile figcaption{
  position:absolute; inset:auto 0 0 0; padding:28px 13px 12px;
  background:linear-gradient(to top,rgba(8,9,11,.94),rgba(8,9,11,0));
  color:#F2F2F0; opacity:0; transform:translateY(6px);
  transition:opacity .25s ease,transform .25s ease;
}
.tile:hover figcaption,.tile:focus-visible figcaption{ opacity:1; transform:none; }
.tile figcaption b{ display:block; font-family:var(--display); font-weight:800; font-stretch:106%; text-transform:uppercase; font-size:.6875rem; letter-spacing:.06em; }
.tile figcaption span{ font-family:var(--display); font-weight:600; font-stretch:104%; text-transform:uppercase; font-size:.5625rem; letter-spacing:.14em; color:rgba(242,242,240,.7); }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:200; background:rgba(12,13,17,.965); display:none; place-items:center;
  padding:clamp(16px,4vw,52px) clamp(72px,9vw,130px); }
.lb[open]{ display:grid; }
/* Raden: granne · huvudbild · granne. Centreras som en enhet. */
.lb-rad{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,1.8vw,26px); width:100%; min-width:0;
}
.lb img#lb-img{
  height:auto; max-height:min(76vh,700px);
  width:auto; max-width:100%; min-width:0; flex:0 1 auto;
  object-fit:contain; border-radius:var(--r);
}
.lb button[hidden]{ display:none; }
.lb-cap{ position:absolute; left:0; right:0; bottom:clamp(14px,2.4vw,26px); text-align:center; color:#F2F2F0; }
.lb-cap b{ display:block; font-family:var(--display); font-weight:800; font-stretch:108%; text-transform:uppercase; font-size:.82rem; letter-spacing:.05em; }
.lb-cap span{ font-family:var(--display); font-weight:600; font-stretch:104%; text-transform:uppercase; font-size:.5875rem; letter-spacing:.15em; color:rgba(242,242,240,.7); }
.lb button{
  position:absolute; background:rgba(11,12,14,.72); border:1px solid rgba(242,242,240,.26); color:#F2F2F0;
  width:48px; height:48px; display:grid; place-items:center; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:1.05rem; line-height:1;
  transition:background .18s,border-color .18s,color .18s;
}
.lb button:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
/* Grannbilderna innanför pilarna, ungefär en tredjedel av huvudbilden. */
.lb .lb-peek{
  position:static; flex:0 0 auto; z-index:1;
  width:min(21vh,200px); height:min(21vh,200px); padding:0; overflow:hidden;
  background:var(--dark-2); border:1px solid rgba(242,242,240,.16); border-radius:var(--r);
  opacity:.42; cursor:pointer; transition:opacity .2s ease, border-color .2s ease;
}
.lb .lb-peek:hover,.lb .lb-peek:focus-visible{ opacity:1; border-color:rgba(242,242,240,.4); }
.lb .lb-peek img{ width:100%; height:100%; object-fit:cover; display:block; }
.lb .lb-peek[hidden]{ display:none; }
.lb .lb-prev{ left:clamp(8px,2vw,28px); top:50%; translate:0 -50%; }
.lb .lb-next{ right:clamp(8px,2vw,28px); top:50%; translate:0 -50%; }

/* Under den här bredden finns inte plats för tre bilder i rad. */
@media (max-width:1080px){
  .lb .lb-peek{ display:none; }
}
.lb .lb-close{ right:clamp(8px,2vw,28px); top:clamp(8px,2vw,28px); }

/* ============ CASE ============ */
.caselist{ display:flex; flex-direction:column; }
.case{ display:grid; grid-template-columns:1fr; gap:28px; padding-block:clamp(38px,5vw,60px); border-top:1px solid var(--line); }
.case:first-child{ border-top:0; padding-top:0; }
@media (min-width:880px){
  .case{ grid-template-columns:minmax(0,38%) minmax(0,1fr); gap:0 clamp(44px,4.6vw,68px); align-items:start; }
  /* order flyttar bilden, men kolumnerna följer inte med. Utan den här
     raden får texten den smala kolumnen på vartannat kort. */
  .case.flip{ grid-template-columns:minmax(0,1fr) minmax(0,38%); }
  .case.flip > .case-media{ order:2; }
  .case-media{ position:sticky; top:116px; }
}
.case-media video,.case-media img{ width:100%; height:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--paper-2); }
.case-media.portrait video,
.case-media.portrait img{ aspect-ratio:9/16; object-fit:cover; max-width:320px; }
.case-body{ display:flex; flex-direction:column; gap:19px; }
.case h3{ font-family:var(--display); font-weight:800; font-stretch:110%; text-transform:uppercase; font-size:clamp(1.25rem,2.2vw,1.65rem); letter-spacing:.01em; }
.case .for{ font-family:var(--display); font-weight:600; font-stretch:106%; text-transform:uppercase; font-size:.625rem; letter-spacing:.17em; color:var(--ink); margin-top:8px; }
.case .pitch{ color:var(--ink-soft); font-size:1.06rem; line-height:1.72; max-width:62ch; text-wrap:pretty; }
.spec{ display:grid; grid-template-columns:auto 1fr; gap:11px 24px; border-top:1px solid var(--line); padding-top:19px; }
.spec dt{ font-family:var(--display); font-weight:700; font-stretch:106%; text-transform:uppercase; font-size:.5875rem; letter-spacing:.16em; color:var(--ink-faint); padding-top:4px; white-space:nowrap; }
.spec dd{ font-size:.95rem; }
/* Foten binder ihop konceptet med varumärket bakom det. */
/* Ett koncept kan bära sin egen accentfärg. Sätts per kort med
   style="--accent:#FF7A52" - resten av sidan rör den inte. */
.case{ --accent:var(--ink); }

/* Statusetikett. Inte den gula flaggan: den betyder "värd en extra titt",
   det här betyder "finns inte i drift än". Skilda saker, skilda märken. */
.case-status{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-family:var(--display); font-weight:700; font-stretch:108%;
  text-transform:uppercase; font-size:.5625rem; letter-spacing:.15em;
  color:var(--accent); border:1px solid var(--accent); border-radius:3px;
  padding:6px 10px; margin-top:10px;
}
.case-status::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); flex:none;
}
.case[style*="--accent"] .case-logo{ background:var(--dark); }

.case-foot{
  display:flex; align-items:center; flex-wrap:wrap; gap:13px 16px;
  border-top:1px solid var(--line); padding-top:20px; margin-top:2px;
}
.case-with{
  font-family:var(--display); font-weight:600; font-stretch:104%;
  text-transform:uppercase; font-size:.5625rem; letter-spacing:.17em;
  color:var(--ink-faint);
}
/* Logotyperna är ljusa original. På ljus botten behöver de en mörk platta
   - att färga om dem har vi redan provat, det förstörde dem. */
.case-logo{
  display:grid; place-items:center; background:var(--dark);
  border-radius:5px; padding:10px 15px;
}
.case-logo img{ display:block; width:auto; }
.case-foot .chip{ margin-left:auto; }
/* Smakprov ur identiteten. Tre färgställningar, tre sidor av märket. */
.case-etikett{
  font-family:var(--display); font-weight:600; font-stretch:104%;
  text-transform:uppercase; font-size:.5rem; letter-spacing:.18em;
  color:var(--ink-faint); margin-top:14px;
}
.case-brickor{ display:grid; gap:6px; margin-top:8px; }
.case-brickor.tre{ grid-template-columns:repeat(3,1fr); }
.case-brickor.tva{ grid-template-columns:repeat(2,1fr); }
.case-brickor img{ width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:4px; }
.case-lander{
  font-family:var(--display); font-weight:700; font-stretch:108%;
  text-transform:uppercase; font-size:.5875rem; letter-spacing:.13em; color:var(--ink);
}

.links{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-family:var(--display); font-weight:600; font-stretch:104%; text-transform:uppercase;
  font-size:.5875rem; letter-spacing:.13em; color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  padding:7px 11px; text-decoration:none; transition:color .18s,border-color .18s;
}
a.chip:hover{ border-color:var(--ink); }
.stat-row{ display:flex; flex-wrap:wrap; gap:32px; }
.stat b{ font-family:var(--display); font-weight:800; font-stretch:112%; font-size:1.85rem; display:block; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.stat span{ font-family:var(--display); font-weight:600; font-stretch:104%; text-transform:uppercase; font-size:.5875rem; letter-spacing:.15em; color:var(--ink-faint); }

/* ============ PARTNERS ============ */
/* Ett band i full bredd som rullar. Ingen sista rad som hänger snett,
   oavsett hur många logotyper som läggs till. */
/* Texten ovanför står nära bandet; luften läggs under i stället.
   #partners .sec får därför mindre bottenluft än vanliga sektioner. */
#partners .sec{ padding-bottom:clamp(10px,1.4vw,18px); }
#partners{ padding-bottom:clamp(14px,2vw,26px); }
.marquee{
  position:relative; overflow:hidden;
  padding-block:clamp(22px,2.8vw,34px);
  margin-bottom:0;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{
  display:flex; width:max-content; gap:0;
  animation:marquee var(--dur,34s) linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.partners{
  display:flex; align-items:center; list-style:none;
  gap:var(--logogap); padding-right:var(--logogap); padding-left:0;
  --logogap:clamp(40px,5vw,86px);
  --logoyta:3100;
}
@media (max-width:640px){ .partners{ --logoyta:2300; } }
.partners li{ display:grid; place-items:center; flex:none; }
.partners img{ height:32px; width:auto; opacity:.78; transition:opacity .25s ease; }
.marquee:hover .partners img{ opacity:1; }
.partners li:not(:has(img)){
  font-family:var(--display); font-weight:800; font-stretch:112%; text-transform:uppercase;
  font-size:1.05rem; letter-spacing:.08em; color:var(--ink-soft); white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
  .marquee{ overflow-x:auto; }
  .marquee-track{ animation:none; }
}

.note{ font-size:.9rem; color:var(--ink-faint); max-width:62ch; }

/* ============ OM OSS ============ */
.founders{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:720px){ .founders{ grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); } }
.founder{ background:var(--paper); padding:32px; display:flex; gap:20px; align-items:flex-start; }
.founder .ph{ width:62px; height:54px; flex:none; background:var(--ink); opacity:.14; -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat; }
.founder h3{ font-family:var(--display); font-weight:800; font-stretch:110%; text-transform:uppercase; font-size:1.02rem; letter-spacing:.02em; }
.founder .role{ font-family:var(--display); font-weight:600; font-stretch:104%; text-transform:uppercase; font-size:.5875rem; letter-spacing:.16em; color:var(--ink); margin:6px 0 12px; }
.founder p{ font-size:.95rem; color:var(--ink-soft); max-width:58ch; }

/* ============ ESPORT-SIDAN ============ */
/* Bild med bildtext. Kickern säger vad bilden är, meningen säger
   varför den står där. */
.fig{ margin:0; display:flex; flex-direction:column; gap:13px; }
.fig img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper-2);
}
.fig figcaption{ display:flex; flex-direction:column; gap:7px; max-width:62ch; }
.fig figcaption b{
  font-family:var(--display); font-weight:700; font-stretch:106%;
  text-transform:uppercase; font-size:.5875rem; letter-spacing:.15em;
  color:var(--ink);
}
.fig figcaption span{ font-size:.92rem; color:var(--ink-faint); }

.lead-in .col{ gap:24px; }
.lead-in h1.display{ font-size:clamp(2.1rem,5vw,3.9rem); }
.sources{ list-style:none; counter-reset:src; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); }
/* Källorna ska gå att kontrollera, inte kräva uppmärksamhet. */
#kallor .label{ color:var(--ink-faint); }
.sources li{
  background:var(--paper); padding:22px 26px 22px 58px; position:relative;
  font-size:.95rem; color:var(--ink-soft); max-width:none;
}
.sources li::before{
  counter-increment:src; content:counter(src);
  position:absolute; left:26px; top:22px;
  font-family:var(--display); font-weight:800; font-stretch:110%;
  font-size:.8rem; color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.sources b{ color:var(--ink); font-weight:600; }
.sources a{
  display:inline-block; margin-left:6px;
  font-family:var(--display); font-weight:700; font-stretch:104%; text-transform:uppercase;
  font-size:.5875rem; letter-spacing:.14em; color:var(--ink-faint); text-decoration:none;
  border-bottom:1px solid var(--line-2);
}
.sources a:hover{ color:var(--ink); border-bottom-color:var(--ink); }

/* ============ NYHETER ============ */
.news-grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:760px){ .news-grid.multi{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); } }
.news-card{ background:var(--paper); padding:32px; text-decoration:none; display:flex; flex-direction:column; gap:13px; transition:background .2s; }
.news-card:hover{ background:var(--paper-2); }
.news-card time{ font-family:var(--display); font-weight:600; font-stretch:104%; font-size:.5875rem; letter-spacing:.17em; text-transform:uppercase; color:var(--ink); font-variant-numeric:tabular-nums; }
.news-card h3{ font-family:var(--display); font-weight:800; font-stretch:108%; text-transform:uppercase; font-size:1.2rem; letter-spacing:.02em; line-height:1.06; text-wrap:balance; }
.news-card p{ color:var(--ink-soft); font-size:.97rem; }
.news-card .go{ font-family:var(--display); font-weight:700; font-stretch:104%; text-transform:uppercase; font-size:.5875rem; letter-spacing:.16em; color:var(--ink-faint); margin-top:auto; padding-top:10px; }
.news-card:hover .go{ color:var(--ink); }
.news-empty{ background:var(--paper); padding:38px 32px; color:var(--ink-faint); }

/* ============ ARTIKEL ============ */
.article{ padding-block:clamp(52px,7vw,96px) clamp(60px,8vw,104px); }
.article .back{ font-family:var(--display); font-weight:700; font-stretch:104%; text-transform:uppercase; font-size:.625rem; letter-spacing:.16em; color:var(--ink-faint); text-decoration:none; display:inline-block; margin-bottom:34px; }
.article .back:hover{ color:var(--ink); }
.article time{ font-family:var(--display); font-weight:600; font-stretch:104%; font-size:.625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); }
.article h1{ font-size:clamp(2.1rem,4.6vw,3.5rem); margin:14px 0 24px; }
.article .body{ max-width:66ch; display:flex; flex-direction:column; gap:19px; color:var(--ink-soft); font-size:1.08rem; }
.article .body strong{ color:var(--ink); font-weight:600; }
.article .body a{ color:var(--ink); }

/* ============ KONTAKT ============ */
/* Stycket runt adressen får inte ärva p{max-width:64ch} - 64ch räknas på
   brödtextens storlek, inte på rubrikstilen, så länken blev bredare än sitt
   eget stycke och bröts mitt i ordet. */
p:has(> .mailto){ max-width:none; }
.mailto{
  display:inline-block; max-width:100%;
  font-family:var(--display); font-weight:800; font-stretch:110%;
  font-size:clamp(1.2rem,3.2vw,2.5rem); text-decoration:none; letter-spacing:-.015em;
  border-bottom:2px solid var(--ink); padding-bottom:5px; transition:color .2s;
  overflow-wrap:anywhere;   /* bryter bara om den verkligen inte får plats */
}
.mailto:hover{ color:var(--ink); }

/* ============ FOOTER ============ */
/* Toppmenyn håller sig till några få destinationer. Footern är kartan -
   allt som inte får plats där uppe ska gå att nå härifrån. */
footer{ padding-block:clamp(48px,6vw,76px) 0; }
.foot-in{
  display:grid; gap:38px 48px; align-items:start;
  padding-bottom:clamp(36px,5vw,56px); border-bottom:1px solid var(--line);
}
@media (min-width:760px){ .foot-in{ grid-template-columns:minmax(0,1fr) auto; } }

.foot-nav{ display:grid; gap:30px 44px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:560px){ .foot-nav{ grid-template-columns:repeat(3,auto); gap:0 clamp(36px,5vw,72px); } }
.foot-nav > div{ display:flex; flex-direction:column; gap:11px; }
.foot-h{
  font-family:var(--display); font-weight:700; font-stretch:110%; text-transform:uppercase;
  font-size:.5875rem; letter-spacing:.2em; color:var(--ink-faint); margin-bottom:4px;
}
.foot-nav a{
  font-size:.94rem; color:var(--ink-soft); text-decoration:none;
  transition:color .18s; width:fit-content;
}
.foot-nav a:hover{ color:var(--ink); }

.foot-bottom{ padding-block:22px 30px; }
.foot-bottom small{
  font-family:var(--display); font-weight:600; font-stretch:104%; text-transform:uppercase;
  font-size:.5875rem; letter-spacing:.16em; color:var(--ink-faint);
}

/* ============ RÖRELSE ============ */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .6s ease,transform .6s ease; }
.rv.in{ opacity:1; transform:none; }
.rise{ opacity:0; transform:translateY(20px); animation:rise .85s cubic-bezier(.16,.84,.32,1) forwards; }
.rise:nth-child(1){ animation-delay:.06s } .rise:nth-child(2){ animation-delay:.16s }
.rise:nth-child(3){ animation-delay:.26s } .rise:nth-child(4){ animation-delay:.36s }
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .rv,.rise{ opacity:1; transform:none; transition:none; animation:none; } }