/* ============================================================
   IK Professionella Amatörer — designsystem
   Svart/vitt. Stor typografi. Lugn rörelse.
   ============================================================ */

/* ---------- 0. Typsnitt ----------
   Egna kopior i assets/fonts/ i stället för Google Fonts. Ingen besökardata
   lämnar servern, och sidan slipper vänta på ett externt anrop innan texten
   kan ritas. unicode-range gör att -ext-filerna bara hämtas om en text
   faktiskt innehåller tecken utanför latin — svenska gör inte det. */
@font-face{
  font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/anton-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/anton-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 1. Tokens ---------- */
:root{
  --ink:        #0c0c0c;
  --ink-soft:   #151515;
  --ink-line:   rgba(255,255,255,.14);
  --ink-dim:    rgba(255,255,255,.62);

  --paper:      #f6f5f2;
  --paper-2:    #ecebe6;
  --paper-line: rgba(12,12,12,.14);
  --paper-dim:  rgba(12,12,12,.60);

  --white:      #ffffff;

  --wrap:       1240px;
  --page:       1600px;
  --gutter:     clamp(20px, 5vw, 64px);
  --sec-y:      clamp(72px, 11vw, 160px);

  --ease:       cubic-bezier(.22,.61,.36,1);
  --nav-h:      72px;

  --f-display:  "Anton", "Arial Narrow", Impact, sans-serif;
  --f-text:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-text);
  font-size:clamp(16px,1.05vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--white);color:var(--ink)}

:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--white);color:var(--ink);padding:12px 18px;font-weight:600;
}
.skip:focus{left:8px;top:8px}

/* ---------- 2. Typografi ---------- */
.display{
  font-family:var(--f-display);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0;
}
h1.display{font-size:clamp(2.6rem,8.4vw,6.8rem)}
h2.display{font-size:clamp(2.1rem,6.4vw,4.7rem)}
h3.display{font-size:clamp(1.5rem,3vw,2.2rem)}

.eyebrow{
  font-size:.74rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:600;
  margin:0 0 1.35rem;
  display:flex;align-items:center;gap:.8rem;
  opacity:.8;
}
.eyebrow::before{
  content:"";width:clamp(24px,4vw,56px);height:1px;background:currentColor;flex:none;opacity:.6;
}

.lede{
  font-size:clamp(1.12rem,1.9vw,1.42rem);
  line-height:1.5;
  font-weight:500;
  max-width:36ch;
}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* ---------- 3. Layout ---------- */
.wrap{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:var(--sec-y);position:relative}
main section[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* Tak för de element som annars går kant i kant med skärmen. Utan det glider
   hero-fotot ut till högerkanten på en ultrabred skärm medan texten står kvar
   i mitten, med ett stort tomrum emellan. Sektionernas bakgrunder är kvar i
   full bredd — det är bara innehållet som hålls ihop.
   Ytan utanför visar body-bakgrunden, som har samma färg, så ingen kant syns. */
.hero,
.pagehead,
.gallery,
.marquee{
  max-width:var(--page);
  margin-inline:auto;
}
.section--dark{background:var(--ink);color:var(--paper)}
.section--paper{background:var(--paper);color:var(--ink)}
.section--paper .eyebrow{opacity:.65}

.rule{height:1px;background:var(--paper-line);border:0;margin:0}
.section--dark .rule{background:var(--ink-line)}

/* ---------- 4. Knappar ---------- */
.btn{
  --bg:var(--white); --fg:var(--ink);
  display:inline-flex;align-items:center;gap:.7em;
  background:var(--bg);color:var(--fg);
  border:1px solid var(--bg);
  border-radius:100px;
  padding:1.02em 1.85em;
  font-weight:600;font-size:.94rem;
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  will-change:transform;
}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .arrow{transform:translateX(4px)}
/* Genomskinlig knapp. Hovern sätter explicita färger — currentColor duger inte här,
   eftersom bakgrunden då hade läst av textfärgen som bytts i samma regel. */
.btn--ghost{background:transparent;color:inherit;border-color:currentColor}
.hero .btn--ghost:hover,
.section--dark .btn--ghost:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.section--paper .btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--ink{--bg:var(--ink);--fg:var(--paper)}

.textlink{
  display:inline-flex;align-items:center;gap:.5em;
  text-decoration:none;font-weight:600;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  transition:gap .25s var(--ease),opacity .2s;
}
.textlink:hover{gap:.85em}

/* ---------- 5. Header ---------- */
.header{
  position:fixed;inset:0 0 auto;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;
  color:var(--paper);
  transition:background .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
}
.header::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(12,12,12,.88);
  backdrop-filter:blur(14px);
  opacity:0;transition:opacity .35s var(--ease);
}
.header.is-stuck::after{opacity:1}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand img{width:34px;height:34px;object-fit:contain}
.brand b{
  font-family:var(--f-display);font-weight:400;
  font-size:1.02rem;letter-spacing:.04em;text-transform:uppercase;
  line-height:1;
}
.brand__txt > span{display:block;font-size:.56rem;letter-spacing:.11em;opacity:.7;font-weight:600;margin-top:3px;white-space:nowrap}
@media (max-width:420px){.brand__txt > span{display:none}}

.nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.9rem)}
.nav a{
  text-decoration:none;font-size:.84rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  opacity:.82;position:relative;padding:4px 0;white-space:nowrap;
  transition:opacity .2s;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{opacity:1}
.nav .btn{font-size:.8rem;padding:.72em 1.3em}
.nav .btn::after{display:none}

.burger{
  display:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;margin-right:-10px;
  position:relative;
}
.burger i{
  position:absolute;left:11px;width:22px;height:2px;background:currentColor;
  transition:transform .3s var(--ease),opacity .2s;
}
.burger i:nth-child(1){top:17px}
.burger i:nth-child(2){top:25px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:99;
  background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--nav-h) var(--gutter) 0;
  transform:translateY(-100%);
  transition:transform .5s var(--ease);
  visibility:hidden;
}
.drawer.is-open{transform:none;visibility:visible}
.drawer a{
  font-family:var(--f-display);font-size:clamp(1.8rem,7.4vw,3.2rem);
  text-transform:uppercase;text-decoration:none;line-height:1.08;
  padding:.16em 0;border-bottom:1px solid var(--ink-line);
  display:block;
  opacity:0;transform:translateY(16px);
}
.drawer.is-open a{animation:drawerIn .5s var(--ease) forwards}
.drawer.is-open a:nth-child(1){animation-delay:.08s}
.drawer.is-open a:nth-child(2){animation-delay:.13s}
.drawer.is-open a:nth-child(3){animation-delay:.18s}
.drawer.is-open a:nth-child(4){animation-delay:.23s}
.drawer.is-open a:nth-child(5){animation-delay:.28s}
.drawer.is-open a:nth-child(6){animation-delay:.33s}
@keyframes drawerIn{to{opacity:1;transform:none}}

@media (max-width:1040px){
  .nav{display:none}
  .burger{display:block}
}

/* Scrollprogress */
.progress{
  position:fixed;top:0;left:0;height:2px;z-index:101;
  background:var(--white);width:0;
  transition:width .08s linear;
}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding-block:calc(var(--nav-h) + clamp(24px,3vw,40px)) clamp(40px,5vw,64px);
  background:var(--ink);
  overflow:hidden;
}
.hero__grid{position:relative;z-index:1;width:100%}
.hero__text{max-width:min(58%,600px)}

/* Fotot ligger helt ovispat till höger — texten lägger sig ovanpå */
.hero__shot{
  position:absolute;right:0;top:50%;
  transform:translateY(-50%);
  margin:0;z-index:0;
  height:min(86svh,880px,58vw);
  opacity:0;animation:shotIn 1.1s var(--ease) .25s forwards;
}
.hero__shot img{
  height:100%;width:auto;max-width:none;
  filter:saturate(1.04);
}
/* Mörkar ner bildens vänsterkant så den smälter in i svärtan och rubriken går
   att läsa där den överlappar. Hur långt in skuggan behöver nå beror på hur
   mycket texten faktiskt ligger över fotot, och det varierar med bredden. */
.hero__shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    var(--ink) 0%,
    rgba(12,12,12,.94) 20%,
    rgba(12,12,12,.55) 42%,
    rgba(12,12,12,.14) 64%,
    rgba(12,12,12,0) 80%);
}
/* Från 1200 px slutar rubriken i stort sett precis vid bildkanten — då behöver
   skuggan bara mjuka upp övergången, inte täcka halva fotot. */
@media (min-width:1200px){
  .hero__shot::after{
    background:linear-gradient(90deg,
      var(--ink) 0%,
      rgba(12,12,12,.78) 11%,
      rgba(12,12,12,.32) 25%,
      rgba(12,12,12,.07) 39%,
      rgba(12,12,12,0) 52%);
  }
}
@keyframes shotIn{from{opacity:0;transform:translate(24px,-50%)}to{opacity:1;transform:translate(0,-50%)}}

.hero__mark{
  width:clamp(48px,4.6vw,72px);height:auto;
  margin-bottom:clamp(14px,1.8vw,22px);
  opacity:0;animation:fadeUp .8s var(--ease) .1s forwards;
}
.hero h1{margin-bottom:clamp(18px,2.2vw,28px);line-height:1.08;font-size:clamp(2.4rem,5.8vw,5rem)}
.hero h1 .word{
  display:block;overflow:hidden;
  padding-block:.3em .08em;margin-block:-.3em -.08em;
}
.hero h1 .word > span{
  display:block;
  transform:translateY(104%);
  animation:wordUp .95s var(--ease) forwards;
}
.hero h1 .word:nth-child(1) > span{animation-delay:.16s}
.hero h1 .word:nth-child(2) > span{animation-delay:.24s}
.hero h1 .word:nth-child(3) > span{animation-delay:.32s}
.hero h1 .word:nth-child(4) > span{animation-delay:.40s}
@keyframes wordUp{to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.hero__foot{
  display:grid;gap:clamp(18px,2.2vw,26px);
  opacity:0;animation:fadeUp .9s var(--ease) .6s forwards;
}
.hero__foot p{max-width:44ch;color:var(--ink-dim);font-size:1.02rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem}

/* Smal skärm: fotot glider upp under textblocket i stället för vid sidan om */
@media (max-width:860px){
  .hero{
    min-height:0;flex-direction:column;align-items:stretch;
    padding-bottom:0;
  }
  .hero__text{max-width:none}
  .hero__shot{
    position:static;transform:none;
    height:auto;width:100%;
    margin-top:calc(-1 * clamp(64px,19vw,110px));
    animation:fadeUp 1s var(--ease) .3s forwards;
  }
  .hero__shot img{width:100%;height:auto}
  .hero__shot::after{
    background:linear-gradient(180deg,
      var(--ink) 0%,
      rgba(12,12,12,.9) 14%,
      rgba(12,12,12,.4) 28%,
      rgba(12,12,12,0) 44%);
  }
}

.scrollcue{
  position:absolute;right:var(--gutter);bottom:clamp(40px,7vw,80px);z-index:1;
  writing-mode:vertical-rl;
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;
  color:var(--ink-dim);
  display:flex;align-items:center;gap:12px;
  opacity:0;animation:fadeUp .9s var(--ease) .9s forwards;
}
.scrollcue::after{
  content:"";width:1px;height:54px;background:currentColor;
  transform-origin:top;animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:1100px){.scrollcue{display:none}}

/* ---------- 7. Marquee ---------- */
.marquee{
  background:var(--white);color:var(--ink);
  padding:clamp(14px,1.6vw,20px) 0;
  overflow:hidden;
}
.marquee__track{
  display:flex;width:max-content;
  animation:slide 38s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{
  font-family:var(--f-display);
  font-size:clamp(1.1rem,2.3vw,1.9rem);
  text-transform:uppercase;letter-spacing:.01em;
  padding-inline:.5em;
  display:flex;align-items:center;gap:.5em;
  white-space:nowrap;
}
.marquee span::after{content:"";width:.26em;height:.26em;background:currentColor;border-radius:50%;flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 8. Split (Om) ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,6vw,90px);
  align-items:center;
}
.split__media{position:relative}
.split__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  filter:saturate(1.04);
}
.split__tag{
  position:absolute;left:0;bottom:0;
  background:var(--ink);color:var(--paper);
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(.95rem,1.7vw,1.3rem);
  padding:.55em .9em;
  max-width:88%;
}
.section--dark .split__tag{background:var(--white);color:var(--ink)}
.split h2{margin-bottom:1.2rem}
.creed{
  margin:clamp(24px,3.5vw,38px) 0 0;
  padding:0;list-style:none;
  font-family:var(--f-display);
  font-size:clamp(1.15rem,2.4vw,1.85rem);
  text-transform:uppercase;line-height:1.24;
}
.creed li{padding:.35em 0;border-bottom:1px solid var(--paper-line)}
.creed li:first-child{border-top:1px solid var(--paper-line)}
.section--dark .creed li{border-color:var(--ink-line)}

@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split__media img{aspect-ratio:3/2}
}

/* ---------- 9. Värdekort ---------- */
.cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--ink-line);
  border:1px solid var(--ink-line);
  margin-top:clamp(34px,5vw,58px);
}
.card{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink);
  padding:clamp(30px,3.6vw,48px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:.9rem;
  min-height:clamp(300px,28vw,390px);
}

/* Siffran som konturtext i hörnet. Ren dekoration — korten är inte klickbara,
   så de har medvetet inget hovertillstånd. */
.card__n{
  position:absolute;top:-.16em;right:.04em;z-index:-1;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(5rem,9.5vw,8.5rem);line-height:1;
  color:rgba(255,255,255,.13);
  pointer-events:none;user-select:none;
}
@supports (-webkit-text-stroke: 1px #000){
  .card__n{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.26)}
}

.card h3{margin:0}
.card p{font-size:.96rem;color:var(--ink-dim)}

@media (max-width:860px){
  .cards{grid-template-columns:minmax(0,1fr)}
  .card{min-height:0}
}

/* ---------- 9b. Senaste Instagram-inlägget ---------- */
/* Ett nedtonat band mellan två pappersytor, med inlägget i en svart ram. */
.section--band{
  background:var(--paper-2);color:var(--ink);
  border-block:1px solid var(--paper-line);
  padding-block:clamp(56px,8vw,104px);
}
.section--band .eyebrow{opacity:.65}
.senaste{display:flex;flex-direction:column;align-items:center;text-align:center}
.senaste .eyebrow{justify-content:center}
.senaste .eyebrow::after{
  content:"";width:clamp(24px,4vw,56px);height:1px;background:currentColor;flex:none;opacity:.6;
}
.senaste h2{margin-bottom:clamp(28px,4vw,44px)}
.senaste__ram{
  margin:0;width:100%;max-width:560px;
  background:var(--ink);color:var(--paper);
  padding:10px 10px 0;
  box-shadow:12px 12px 0 rgba(12,12,12,.12);
}
/* Instagrams inbäddning slutar med en rad för gilla, kommentera och
   kommentarsfält. Den går inte att ändra inifrån (annan domän), så vi drar
   upp iframens underkant och klipper bort raden. Måttet är nederdelens höjd
   och är densamma oavsett bredd. Ändras Instagrams utseende justeras det här. */
.senaste__inlagg{--klipp:155px;min-height:120px;overflow:hidden}
.senaste__inlagg iframe{display:block;width:100%;border:0;background:var(--white);margin-bottom:calc(-1 * var(--klipp))}
.senaste__fot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem .5rem .95rem;
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(.95rem,1.7vw,1.15rem);text-align:left;
}
.senaste__fot span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.senaste__fot a{display:inline-flex;gap:.4em;align-items:center;white-space:nowrap;color:inherit}
.senaste__fot a:hover{text-decoration:underline;text-underline-offset:.2em}

/* Adminsidan serveras av Workern och lånar sajtens formspråk. */
.admin{max-width:46rem}
.admin__nu{color:var(--ink-dim);font-size:.94rem;margin-bottom:clamp(20px,3vw,28px)}
.admin__nu a{word-break:break-all}
.admin__ok,.admin__fel{
  padding:.9em 1.1em;margin-bottom:1.2rem;font-size:.94rem;
  border-left:3px solid currentColor;
}
.admin__ok{color:#8ff0a4;background:rgba(143,240,164,.08)}
.admin__fel{color:#ff9a8c;background:rgba(255,154,140,.08)}
.admin__form{display:grid;gap:.5rem;max-width:32rem}
.admin__form label{
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;opacity:.75;margin-top:.8rem;
}
.admin__form input{
  font:inherit;font-size:1rem;
  background:transparent;color:var(--paper);
  border:1px solid var(--ink-line);border-radius:0;
  padding:.85em 1em;width:100%;
}
.admin__form input:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.admin__knappar{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.admin__hjalp{
  margin-top:clamp(28px,4vw,40px);font-size:.9rem;color:var(--ink-dim);
  max-width:48ch;
}
.admin__hjalp code{
  background:rgba(255,255,255,.08);padding:.1em .4em;font-size:.92em;
}

/* ---------- 10. Numrerade rader (Vad gör vi) ---------- */
.rows{margin-top:clamp(28px,4vw,46px);border-top:1px solid var(--paper-line)}
.row{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(0,32%) clamp(130px,15vw,200px);
  gap:clamp(16px,3vw,40px);align-items:center;
  padding:clamp(24px,3.4vw,42px) 0;
  border-bottom:1px solid var(--paper-line);
}
.row__n{
  font-family:var(--f-display);font-size:clamp(.85rem,1.3vw,1rem);
  opacity:.45;letter-spacing:.1em;
  min-width:3ch;
}
.row h3{transition:transform .4s var(--ease)}
.row p{font-size:.98rem;color:var(--paper-dim);margin:0}
.row__thumb{overflow:hidden}
.row__thumb img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .7s var(--ease);
}
@media (hover:hover) and (min-width:861px){
  .row:hover h3{transform:translateX(14px)}
  .row:hover .row__thumb img{transform:scale(1.05)}
}
@media (max-width:860px){
  .row{grid-template-columns:auto 1fr;gap:10px 16px}
  .row p{grid-column:2}
  .row__thumb{grid-column:1/-1;margin-top:14px}
  .row__thumb img{aspect-ratio:16/9}
}

/* ---------- 11. Galleri ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1px}
.gallery figure{margin:0;position:relative;overflow:hidden;background:var(--ink-soft)}
.gallery img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:1;
  filter:brightness(.94) saturate(1.04);
  transition:transform .8s var(--ease),filter .5s var(--ease);
}
.gallery figure:hover img{transform:scale(1.06);filter:brightness(1.03) saturate(1.06)}
.gallery figure.wide{grid-column:span 2}
@media (max-width:860px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery figure.wide{grid-column:span 2}
}

/* ---------- 12. Statement ---------- */
.statement{
  font-family:var(--f-display);
  font-size:clamp(1.6rem,4.4vw,3.3rem);
  line-height:1.06;text-transform:uppercase;
  max-width:17ch;margin:0;
}
.statement em{font-style:normal;opacity:.5}
.maybe{
  list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;
  display:grid;gap:.15rem;max-width:54ch;
}
.maybe li{
  padding:.7em 0;border-bottom:1px solid var(--paper-line);
  display:flex;gap:.9em;align-items:baseline;
}
.maybe li::before{content:"";width:7px;height:7px;background:currentColor;flex:none;transform:translateY(-2px)}
.maybe li:last-child{border-bottom:0;font-weight:600}

/* ---------- 13. Medlemskort ---------- */
.member{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.pricecard{
  border:1px solid var(--ink-line);
  padding:clamp(28px,4vw,52px);
  background:linear-gradient(180deg,rgba(255,255,255,.055),transparent 60%);
}
.price{
  font-family:var(--f-display);
  font-size:clamp(3rem,9vw,6.4rem);line-height:.85;
  display:flex;align-items:baseline;gap:.18em;flex-wrap:wrap;
  margin:0 0 .35em;
}
.price small{font-size:clamp(.9rem,1.6vw,1.2rem);letter-spacing:.14em;opacity:.55;font-family:var(--f-text);font-weight:600}
.perks{list-style:none;margin:0 0 clamp(26px,3.4vw,36px);padding:0;display:grid;gap:.1rem}
.perks li{
  padding:.62em 0;border-bottom:1px solid var(--ink-line);
  display:flex;gap:.8em;align-items:center;font-size:.98rem;
}
.perks li svg{flex:none;opacity:.8}
.swish{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem;
  margin-top:clamp(20px,2.6vw,28px);
  font-size:.92rem;color:var(--ink-dim);
}
.swish b{font-family:var(--f-display);font-size:1.22rem;letter-spacing:.02em;color:var(--paper);font-weight:400}
.member__media img{width:100%;aspect-ratio:1;object-fit:cover}
@media (max-width:860px){.member{grid-template-columns:1fr}}

/* ---------- 14. Styrelse & kontakt ---------- */
.board{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.2vw,26px);
  margin-top:clamp(28px,4vw,44px);
}
.person{display:flex;flex-direction:column;gap:.75rem;text-decoration:none}
.person__ph{
  position:relative;overflow:hidden;background:var(--ink);
  aspect-ratio:4/3;
}
.person__ph img{
  width:100%;height:100%;object-fit:cover;object-position:50% 34%;
  transition:transform .7s var(--ease);
}
.person:hover .person__ph img{transform:scale(1.04)}
.person__ph--empty{display:grid;place-items:center}
.person__ph--empty .initial{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1;
  color:rgba(255,255,255,.34);
}
.person__name{
  font-family:var(--f-display);font-size:1.3rem;font-weight:400;
  text-transform:uppercase;line-height:1.05;display:block;
}
.person__role{font-size:.85rem;opacity:.62;display:block;margin-top:.15rem}

.person--cta .person__ph{
  background:none;border:1px dashed var(--paper-line);
  display:grid;place-items:center;text-align:center;padding:1rem;
}
.person--cta .person__ph span{
  font-family:var(--f-display);font-size:clamp(1.1rem,1.8vw,1.35rem);
  text-transform:uppercase;line-height:1.1;
}
.person--cta:hover .person__ph{background:var(--ink);color:var(--paper);border-style:solid}

@media (max-width:900px){.board{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}}

.contactgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);
  margin-top:clamp(28px,4vw,44px);
}
.contactgrid a,.contactgrid div{
  background:var(--paper);padding:clamp(22px,2.6vw,32px);
  text-decoration:none;display:flex;flex-direction:column;gap:.35rem;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.contactgrid a:hover{background:var(--ink);color:var(--paper)}
.contactgrid small{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6;font-weight:600}
.contactgrid strong{font-family:var(--f-display);font-size:clamp(1.05rem,1.8vw,1.35rem);font-weight:400;text-transform:uppercase;word-break:break-word}

/* ---------- 15. Footer ---------- */
.footer{background:var(--ink);color:var(--paper);padding-block:clamp(52px,7vw,84px) 32px}
.footer__top{
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,48px);
  justify-content:space-between;align-items:flex-start;
}
.footer__brand{display:flex;align-items:center;gap:1rem}
.footer__brand img{width:58px;height:auto}
.footer__brand b{font-family:var(--f-display);font-size:1.3rem;text-transform:uppercase;font-weight:400;line-height:1.1;display:block;max-width:12ch}
.footer__place{display:block;font-size:.8rem;color:var(--ink-dim);margin-top:.35rem}
.footer nav{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.footer nav a{text-decoration:none;font-size:.86rem;opacity:.72;transition:opacity .2s}
.footer nav a:hover{opacity:1}
.footer__bottom{
  margin-top:clamp(36px,5vw,56px);padding-top:22px;
  border-top:1px solid var(--ink-line);
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  font-size:.78rem;color:var(--ink-dim);
}
.values-strip{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(1rem,2vw,1.35rem);letter-spacing:.02em;
  display:flex;flex-wrap:wrap;gap:.6em;
}
.values-strip i{font-style:normal;opacity:.35}

/* ---------- 16. Sidhuvud för undersidor ---------- */
.pagehead{
  position:relative;background:var(--ink);color:var(--paper);
  padding-block:calc(var(--nav-h) + clamp(58px,9vw,120px)) clamp(48px,7vw,90px);
  overflow:hidden;
}
.pagehead__media{position:absolute;inset:0;z-index:0}
.pagehead__media img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.02) brightness(.48)}
.pagehead__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,12,12,.9),rgba(12,12,12,.5) 50%,var(--ink));
}
.pagehead .wrap{position:relative;z-index:1}
.pagehead p{max-width:52ch;color:var(--ink-dim);margin-top:1.3rem}
.crumbs{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;opacity:.6;margin-bottom:1.1rem}
.crumbs a{text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{border-color:currentColor}

/* ---------- 17. Etapper (Klassikern) ---------- */
.legs{margin-top:clamp(30px,4vw,50px)}
.leg{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,4vw,60px);align-items:center;
  padding-block:clamp(26px,4vw,52px);
  border-top:1px solid var(--paper-line);
}
.leg:last-child{border-bottom:1px solid var(--paper-line)}
.leg__media{position:relative;overflow:hidden}
.leg__media img{width:100%;aspect-ratio:16/11;object-fit:cover;filter:saturate(1.04);transition:transform .8s var(--ease)}
.leg:hover .leg__media img{transform:scale(1.05)}
.leg__media .ph{
  width:100%;aspect-ratio:16/11;
  background:repeating-linear-gradient(135deg,var(--paper-2) 0 10px,transparent 10px 20px),var(--paper);
  display:grid;place-items:center;
  border:1px solid var(--paper-line);
}
.leg__media .ph span{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;opacity:.5;
  background:var(--paper);padding:.5em .8em;text-align:center;
}
.leg__n{font-family:var(--f-display);font-size:clamp(2.6rem,6vw,4.6rem);line-height:.8;opacity:.16;margin-bottom:.16em}
.leg h3{margin-bottom:.5rem}
.leg .meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.tag{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--paper-line);border-radius:100px;padding:.45em .95em;
}
.section--dark .tag{border-color:var(--ink-line)}
.leg:nth-child(even) .leg__media{order:2}
@media (max-width:860px){
  .leg{grid-template-columns:1fr}
  .leg:nth-child(even) .leg__media{order:0}
}

/* ---------- 17b. Brödtext (policysidor) ---------- */
.prose{max-width:66ch}
.prose h2{
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.18;letter-spacing:-.01em;
  margin:clamp(38px,5vw,56px) 0 .8rem;
}
.prose > :first-child{margin-top:0}
.prose p,.prose li{color:var(--paper-dim)}
.prose ul{padding-left:1.15em;margin:0 0 1.1em}
.prose li{margin-bottom:.45em}
.prose a{font-weight:600}
.prose dl{margin:0 0 1.1em}
.prose dt{font-weight:600;margin-top:.9em}
.prose dd{margin:0;color:var(--paper-dim)}
.prose__updated{
  font-size:.82rem;opacity:.6;
  margin-top:clamp(40px,5vw,60px);padding-top:1.3rem;
  border-top:1px solid var(--paper-line);
}

/* ---------- 18. Tidslinje (Bakgrund) ---------- */
.timeline{margin-top:clamp(30px,4vw,50px);position:relative;padding-left:clamp(18px,3vw,34px)}
.timeline::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--paper-line)}
.tl{position:relative;padding:0 0 clamp(28px,3.6vw,44px) clamp(18px,3vw,34px)}
.tl::before{
  content:"";position:absolute;left:calc(clamp(18px,3vw,34px) * -1 - 4px);top:.55em;
  width:9px;height:9px;background:currentColor;border-radius:50%;
}
.tl time{font-family:var(--f-display);font-size:1.02rem;letter-spacing:.1em;opacity:.5;display:block;margin-bottom:.3rem}
.tl h3{margin-bottom:.4rem}
.tl p{color:var(--paper-dim);max-width:60ch}

.note{
  border:1px dashed var(--paper-line);
  padding:clamp(20px,2.6vw,30px);
  margin-top:clamp(28px,4vw,44px);
  font-size:.94rem;color:var(--paper-dim);
}
.note b{font-weight:600}
.section--dark .note{border-color:var(--ink-line);color:var(--ink-dim)}

/* ---------- 19. Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html:focus-within{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none}
  .hero h1 .word > span{transform:none}
  .hero__mark,.hero__foot,.scrollcue{opacity:1}
}