/* ════════════════════════════════════════════════════════════
   BOUTIQUE MARCHELLA — ljus utgåva
   Byggd mot mekaniken hos The Row, Khaite, Zimmermann och Totême:
   ljus grund, asymmetrisk rytm, plagget som enda dekor, understrukna
   länkar i stället för knappar, och EN rubrikgrad för alla sektioner
   (fem nästan-lika grader är drift, inte hierarki).
   ════════════════════════════════════════════════════════════ */

:root{
  /* Butiken själv är vit marmor och varmt ljus. Grunden följer rummet. */
  --ben:#f3f0ea;          /* huvudgrund */
  --ben-djup:#e9e4da;     /* sekundär yta */
  --black:#16130f;        /* text */
  /* Sekundärtext måste klara BÅDA ytorna. #6d675e gav 4.92:1 mot --ben
     men bara 4.42:1 mot --ben-djup, så rörelse- och kontaktsektionen föll
     under AA. Kontrast mäts mot den yta texten faktiskt ligger på. */
  --dampat:#67615a;       /* 5.38:1 mot --ben · 4.83:1 mot --ben-djup */
  --harlinje:#d5cec1;
  /* Mässing används ALDRIG som yta — bara som hårlinje och understrykning.
     TVÅ toner: linjetonen behöver ingen kontrast, texttonen gör det.
     #8a6a3c mäter 4.39:1 mot benvitt — under AA för liten text. */
  --massing:#8a6a3c;        /* hårlinjer, understrykningar, ramar */
  --massing-text:#7d5f34;   /* all mässingsfärgad TEXT — 5.19:1 */

  /* EN grad för alla sektioner. Sänkt från 4.6vw så steget upp till
     heron blir 1.30× i stället för 1.22× — under ~1.25 läser ögat
     skillnaden som ojämnhet, inte som en nivå. */
  --h2:clamp(2.4rem, 4.3vw, 4.3rem);
  /* Precis EN avvikare, med avsikt: rörelsesektionen är sajtens tes. */
  --h2-tes:clamp(2.9rem, 5.6vw, 5.4rem);
  --brod:clamp(1.06rem, 1.15vw, 1.25rem);

  --spalt:clamp(20px, 4.4vw, 84px);
  --sektion:clamp(88px, 12vh, 168px);
  --lugn:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--ben);
  color:var(--black);
  font:300 var(--brod)/1.62 Manrope,-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* clip, aldrig hidden: hidden gör elementet till rullbehållare
     och kan slå sönder position:sticky i närheten. */
  overflow-x:clip;
}

h1,h2,h3{font-family:Prata,"Old Standard TT",Georgia,serif;font-weight:400;letter-spacing:-.012em}
em{font-style:normal;color:var(--massing-text)}
/* height:auto är INTE kosmetik. width/height-attributen i HTML mappas av
   webbläsaren till en riktig CSS-höjd, och en explicit höjd slår
   aspect-ratio. Utan den här raden blir en 3/4-ruta 1498 px hög. */
img,video{display:block;max-width:100%;height:auto}

.hoppa{position:absolute;left:-9999px}
.hoppa:focus{left:var(--spalt);top:12px;z-index:99;background:var(--black);color:var(--ben);padding:10px 16px}

/* ─── Länk: understruken linje som växer, ingen knapp ─── */
.lank{
  display:inline-block;color:var(--black);text-decoration:none;
  font-size:.94rem;letter-spacing:.1em;text-transform:uppercase;
  padding-bottom:6px;position:relative;
}
.lank::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--massing);transform-origin:left;
  transition:transform .5s var(--lugn);
}
.lank:hover::after{transform:scaleX(.35)}

.ogonblick{
  font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dampat);margin-bottom:1.6rem;
}
.stor{font-size:var(--h2);line-height:1.04}

/* ─── Navigering ─── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:2rem;
  padding:22px var(--spalt);
  background:color-mix(in srgb, var(--ben) 86%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s, padding .4s var(--lugn);
}
.nav.fast{border-bottom-color:var(--harlinje);padding-block:14px}
.nav__markt{
  display:flex;align-items:center;gap:13px;
  font-family:Prata,serif;font-size:1.02rem;letter-spacing:.34em;
  color:var(--black);text-decoration:none;
}
/* Marias eget sigill, friläggt ur originalfilen — teckningen är hennes,
   bara den svarta plattan är borta. Ringen tål inte att bli mindre än
   ~34 px innan hårlinjerna i ramen försvinner. */
.sigill{width:38px;height:38px;flex:none}
.nav.fast .sigill{width:32px;height:32px;transition:width .4s var(--lugn),height .4s var(--lugn)}
.nav__lankar{display:flex;gap:1.9rem;margin-left:auto}
/* Träffytan måste vara minst 24 px hög (WCAG 2.5.8). Texten är 22 px,
   så höjden kommer från padding — inte från större typsnitt. */
.nav__lankar a{
  color:var(--dampat);text-decoration:none;font-size:.86rem;letter-spacing:.06em;
  padding-block:8px;transition:color .3s;
}
.nav__lankar a:hover{color:var(--black)}
.nav__ort{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dampat)}

/* Menyknappen finns bara på små skärmar. Ordet i stället för hamburgare:
   sajten har inga ikoner någon annanstans, och ett ord är otvetydigt. */
.nav__knapp{
  display:none;margin-left:auto;cursor:pointer;
  background:none;border:0;color:var(--black);
  font:400 .82rem/1 Manrope,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  padding:11px 2px;border-bottom:1px solid var(--massing);
}

/* ═══ HERO ═══════════════════════════════════════════════════
   Texten i vänsterspalten, filmen bryter ut ur rutnätet åt höger
   och går ända till kanten. Ingenting ligger på mittlinjen. ═══ */
.hero{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(24px,4vw,64px);
  align-items:center;
  padding:clamp(140px,17vh,210px) 0 var(--sektion) var(--spalt);
  min-height:92vh;
}
.hero__text{max-width:30ch}
.hero__rubrik{
  font-size:clamp(2.9rem,5.6vw,5.4rem);
  line-height:1.0;margin-bottom:1.9rem;
}
.hero__lede{color:var(--dampat);max-width:38ch;margin-bottom:2.4rem;font-size:1.05rem}

.hero__film{position:relative}
.hero__film video{
  width:100%;height:min(78vh,760px);object-fit:cover;
  /* Bilden är fotad i butikens kalla lysrörsljus; en aning värme
     drar den mot rummets ton utan att röra plaggets färg. */
  filter:saturate(.94) contrast(1.02);
}
/* Bildtexten ligger UNDER filmen, inte ovanpå. Text på rörlig bild
   kräver scrim eller gloria — och ingen av dem hör hemma här. */
.hero__film figcaption{
  margin-top:12px;padding-right:var(--spalt);
  text-align:right;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dampat);
}

/* ═══ TYG — tre beskärningar i förskjutet rutnät ═══ */
.tyg{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2.4vw,34px) clamp(14px,2vw,28px);
  padding:var(--sektion) var(--spalt);
  align-items:end;
}
.tyg__ord{grid-column:1/4;align-self:center}
.tyg__ord h2{font-size:clamp(2rem,3.1vw,3rem);line-height:1.06;margin-bottom:1.2rem}
.tyg__ord p{color:var(--dampat);max-width:30ch}
.tyg__b{overflow:hidden}
.tyg__b img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--lugn)}
.tyg__b:hover img{transform:scale(1.03)}
.tyg__b--1{grid-column:4/8;aspect-ratio:3/4}
.tyg__b--2{grid-column:8/11;aspect-ratio:3/4;margin-bottom:clamp(30px,7vw,90px)}
.tyg__b--3{grid-column:11/13;aspect-ratio:2/3}

/* ═══ KOLLEKTION — lista med hårlinjer, inga kort ═══ */
.lista{padding:var(--sektion) var(--spalt);max-width:1500px}
.lista__ingress{color:var(--dampat);margin:1.4rem 0 clamp(40px,6vw,80px);max-width:44ch}
.rader{list-style:none}
/* Varje rad bär ett plagg. En klänningsbutik som visar noll klänningar
   i sin kollektionssektion är inte återhållsam — den är ofärdig.
   Bilden ligger i radens flöde, inte i ett kort. */
.rader li{
  display:grid;
  grid-template-columns:70px minmax(0,1fr) minmax(0,1.1fr) 104px;
  gap:clamp(12px,3vw,48px);
  align-items:center;
  padding:clamp(18px,2vw,26px) 0;
  border-top:1px solid var(--harlinje);
  transition:padding-left .55s var(--lugn);
}
.rader li > .nr,.rader li > .namn{align-self:center}
.rader li img{
  width:104px;aspect-ratio:3/4;object-fit:cover;justify-self:end;
  filter:saturate(.92);
  transition:transform .8s var(--lugn), filter .8s var(--lugn);
}
.rader li:last-child{border-bottom:1px solid var(--harlinje)}
.rader li:hover{padding-left:14px}
.rader li:hover img{transform:scale(1.06);filter:saturate(1)}
.nr{font-size:.8rem;letter-spacing:.16em;color:var(--massing-text)}
.namn{font-family:Prata,serif;font-size:clamp(1.4rem,2.3vw,2.1rem);line-height:1.14}
.om{color:var(--dampat);font-size:1rem}

/* ═══ I RÖRELSE ═══ */
.dvizh{
  background:var(--ben-djup);
  padding:var(--sektion) var(--spalt);
}
.dvizh__ord{max-width:56ch;margin-bottom:clamp(40px,6vw,76px)}
.dvizh__ord h2.stor{font-size:var(--h2-tes)}
.dvizh__ord p{color:var(--dampat);margin:1.4rem 0 2rem;max-width:52ch}
.dvizh__rutnat{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.6vw,22px);
}
.dvizh__rutnat figure{position:relative}
/* Ojämn baslinje: klippen står inte på rad, de faller i trappa. */
.dvizh__rutnat figure:nth-child(2){margin-top:clamp(18px,3.4vw,52px)}
.dvizh__rutnat figure:nth-child(4){margin-top:clamp(26px,5vw,74px)}
.dvizh__rutnat figure:nth-child(5){margin-top:clamp(10px,1.8vw,26px)}
.dvizh__rutnat video{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--harlinje)}
.dvizh__rutnat figcaption{
  margin-top:10px;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dampat);
}

/* ═══ ATELJÉN ═══ */
.atelie{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(28px,5vw,90px);align-items:center;
  padding:var(--sektion) var(--spalt);
}
.atelie__bild{aspect-ratio:4/5;overflow:hidden}
.atelie__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.atelie__ord p{color:var(--dampat);margin-top:1.6rem;max-width:46ch}
.atelie__ord h2{margin-bottom:.4rem}
.atelie__slag{
  font-family:Prata,serif;font-size:clamp(1.3rem,2vw,1.8rem);
  color:var(--black)!important;margin:2rem 0 2.2rem!important;
  padding-left:18px;border-left:1px solid var(--massing);
}

/* ═══ VITRINA ═══ */
.vitrina{padding:var(--sektion) var(--spalt)}
.vitrina__rad{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.8vw,26px);margin-top:clamp(38px,5vw,66px);
}
.vitrina__rad > a{text-decoration:none;color:var(--black);display:block}
.vitrina__alla{margin-top:clamp(28px,3.4vw,46px)}
.vitrina figure{overflow:hidden}
.vitrina img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.1s var(--lugn)}
.vitrina figure:hover img{transform:scale(1.035)}
.vitrina figcaption{
  display:flex;justify-content:space-between;gap:10px;
  margin-top:12px;font-size:.86rem;
}
.pris{color:var(--dampat);font-size:.8rem;letter-spacing:.04em}

/* ═══ PASSFORM ═══ */
.passform{padding:var(--sektion) var(--spalt);border-top:1px solid var(--harlinje)}
.steg{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
      gap:clamp(24px,4vw,64px);margin-top:clamp(40px,6vw,78px)}
.steg li{border-top:1px solid var(--massing);padding-top:20px}
.steg h3{font-size:1.28rem;margin:.7rem 0 .6rem}
.steg p{color:var(--dampat);font-size:.98rem}

/* ═══ KONTAKT ═══ */
.kontakt{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px,6vw,110px);
  padding:var(--sektion) var(--spalt);
  background:var(--ben-djup);
}
.kontakt__ord p{color:var(--dampat);margin-top:1.5rem;max-width:42ch}
.fakta{margin-top:2.6rem;border-top:1px solid var(--harlinje)}
.fakta > div{display:grid;grid-template-columns:120px 1fr;gap:16px;
             padding:14px 0;border-bottom:1px solid var(--harlinje)}
.fakta dt{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dampat)}
.fakta dd,.fakta a{color:var(--black);text-decoration:none}
/* Träffytan var 165×23 — under WCAG 2.5.8. Höjden kommer från padding. */
.fakta a{display:inline-block;padding-block:4px}
.fakta a:hover{text-decoration:underline}

.form{display:grid;gap:18px;align-content:start}
.form label{display:grid;gap:7px;font-size:.76rem;letter-spacing:.18em;
            text-transform:uppercase;color:var(--dampat)}
.form input,.form select,.form textarea{
  font:300 1.02rem/1.5 Manrope,sans-serif;color:var(--black);
  background:transparent;border:0;border-bottom:1px solid var(--harlinje);
  padding:11px 2px;border-radius:0;transition:border-color .3s;
}
/* Fokusringen får INTE tas bort. En flyttad underkantsfärg räcker inte:
   den syns inte för någon som navigerar med tangentbord i högkontrastläge,
   och WCAG 2.4.7 kräver en synlig markering. Ringen ritas utanför fältet
   så den inte flyttar något i layouten. */
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{
  outline:2px solid var(--massing-text);outline-offset:3px;
  border-bottom-color:var(--massing-text);
}
.form input:focus,.form select:focus,.form textarea:focus{
  border-bottom-color:var(--massing-text);
}
.form textarea{resize:vertical}
.form button{
  justify-self:start;margin-top:10px;cursor:pointer;
  background:var(--black);color:var(--ben);border:0;
  font:400 .86rem/1 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  padding:17px 34px;transition:background .35s;
}
.form button:hover{background:var(--massing)}
.form__not{font-size:.82rem;color:var(--dampat);letter-spacing:0;text-transform:none}
.form__tack{font-size:.94rem;color:var(--massing-text)}

/* ═══ SIDFOT ═══ */
.fot{
  display:flex;flex-wrap:wrap;gap:14px clamp(24px,5vw,70px);align-items:baseline;
  padding:clamp(46px,6vw,80px) var(--spalt);
  border-top:1px solid var(--harlinje);
  font-size:.84rem;color:var(--dampat);
}
.fot__markt{font-family:Prata,serif;font-size:1rem;letter-spacing:.34em;color:var(--black)}
.fot__sigill{width:76px;height:76px;flex:none;align-self:center}
.fot span:last-child{margin-left:auto}

/* ═══ Inträde: text stiger, en gång, aldrig i loop ═══ */
.upp{opacity:0;transform:translateY(18px);
     transition:opacity .9s var(--lugn), transform .9s var(--lugn)}
.upp.inne{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .upp{opacity:1;transform:none;transition:none}
  .tyg__b img,.vitrina img{transition:none}
}

/* ═══ Mindre skärmar ═══ */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr;padding-right:var(--spalt);min-height:0}
  .hero__film video{height:min(62vh,560px)}
  .tyg{grid-template-columns:repeat(6,1fr)}
  .tyg__ord{grid-column:1/7}
  .tyg__b--1{grid-column:1/4}
  .tyg__b--2{grid-column:4/7;margin-bottom:0}
  .tyg__b--3{grid-column:1/7;aspect-ratio:16/9}
  .dvizh__rutnat{grid-template-columns:repeat(3,1fr)}
  .dvizh__rutnat figure{margin-top:0!important}
  .atelie{grid-template-columns:1fr}
  .vitrina__rad{grid-template-columns:repeat(2,1fr)}
  .kontakt{grid-template-columns:1fr}

  /* ⛔ Här låg tidigare bara `.nav__lankar{display:none}` — fem länkar,
     noll sätt att nå dem. Att gömma navigeringen ÄR inte att göra den
     responsiv. Nu fälls den ut som panel under hårlinjen i stället. */
  .nav__knapp{display:block}
  .nav__lankar{
    display:grid;position:absolute;left:0;right:0;top:100%;
    background:var(--ben);border-bottom:1px solid var(--harlinje);
    padding:6px var(--spalt) 18px;margin:0;gap:0;
    /* visibility (inte display) så övergången kan animeras, och så att
       länkarna inte går att tabba till när panelen är stängd. */
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .35s var(--lugn), transform .35s var(--lugn), visibility .35s;
  }
  .nav.oppen .nav__lankar{opacity:1;visibility:visible;transform:none}
  .nav__lankar a{
    padding:15px 0;border-bottom:1px solid var(--harlinje);
    font-size:1.02rem;color:var(--black);
  }
  .nav__lankar a:last-child{border-bottom:0}
  .nav__ort{display:none}
}
@media (max-width:620px){
  .rader li{grid-template-columns:44px 1fr 74px;row-gap:6px}
  .om{grid-column:2/3}
  .rader li img{width:74px;grid-row:1/4;grid-column:3/4}
  .dvizh__rutnat{grid-template-columns:repeat(2,1fr)}
  .steg{grid-template-columns:1fr}
  .fot span:last-child{margin-left:0}
}