/* ══════════════════════════════════════════════════════════════
   BOUTIQUE MARCHELLA — skiss v1
   Palett (Daniel 2026-07-30): GULD · SILVER · OFF-WHITE · SVART.
   Guld = varm primär metall. Silver = kall sekundär metall (struktur,
   hårlinjer, "В движение"). Off-white = ljus text. Svart = botten.
   REGEL: metallerna är ALDRIG en yta. Bara linje, text och accent.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Ytor — varm svart, aldrig #000 */
  --ink:      #0c0a08;
  --ink-2:    #131009;
  --ink-3:    #1a1610;

  /* Guld — varm primär metall */
  --gold:     #c9a86a;
  --gold-lo:  #a98a4f;
  --gold-hi:  #e5cf9b;

  /* Silver — kall sekundär metall */
  --silver:   #c3c8cb;
  --silver-lo:#8b9296;
  --silver-hi:#e4e8ea;

  /* Off-white — ljus text/rubriker */
  --text:     #f1ede4;
  --muted:    #9c9285;
  --dim:      #6d665c;

  /* Hårlinjer: guld varm, silver kall — används där tonen passar. */
  --hairline:      rgba(201,168,106,.22);
  --hairline-ag:   rgba(195,200,203,.20);
  --hairline-soft: rgba(241,237,228,.10);

  /* Old Standard TT, inte Playfair Display: den senare star pa impeccables
     reflex-reject-lista. Old Standard har akta didone-kontrast, riktig
     kyrilliska OCH akta kursiv, vilket Prata/Forum/Alice saknar. */
  --serif: "Old Standard TT", "Times New Roman", Georgia, serif;
  --sans:  "Manrope", "Segoe UI", system-ui, sans-serif;

  /* Emil Kowalski: de inbyggda CSS-kurvorna ar for svaga. */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  --gut: clamp(1.25rem, 5vw, 5.5rem);
  --sec: clamp(5rem, 12vw, 11rem);
  --max: 1440px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem, .55vw + .88rem, 1.125rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; line-height:1.08; margin:0; }

::selection{ background:var(--gold); color:var(--ink); }

/* ── Fail-open reveal: dolt tillstånd gäller BARA om JS lever ── */
.js-reveal .reveal{ opacity:0; transform:translateY(22px); }
.js-reveal .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{ opacity:1; transform:none; }
}

/* ══════════ TYPOGRAFISKA PRIMITIVER ══════════ */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.5rem;
}
.eyebrow::before{
  content:""; display:inline-block;
  width:2.2rem; height:1px; background:var(--gold);
  vertical-align:middle; margin-right:.9rem; opacity:.6;
}

.sec__title{
  font-size:clamp(2rem, 4.2vw, 3.7rem);
  letter-spacing:-.015em;
  max-width:20ch;
}
.sec__lede{ color:var(--muted); max-width:56ch; margin:1.75rem 0 0; }

.link-gold{
  display:inline-block; margin-top:2rem;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); padding-bottom:.4rem;
  border-bottom:1px solid var(--hairline);
  transition:border-color .4s, color .4s;
}
.link-gold:hover{ color:var(--gold-hi); border-bottom-color:var(--gold); }

/* ══════════ KNAPPAR ══════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  padding:1.15rem 2.4rem;
  border:1px solid transparent;
  cursor:pointer; background:none; color:inherit;
  /* 450ms var over Emils 300ms-tak for UI. Explicita properties, aldrig "all". */
  transition:background-color .2s ease, color .2s ease,
             border-color .2s ease, transform .16s var(--ease-out);
}
/* Knappar maste kannas trycksvar. Saknades helt. */
.btn:active{ transform:scale(.97); }
.btn--gold{ border-color:var(--gold); color:var(--gold); }
.btn--gold:hover{ background:var(--gold); color:var(--ink); }
.btn--line{ border-color:var(--hairline-soft); color:var(--text); }
.btn--line:hover{ border-color:var(--text); }
.btn--ghost{ border-color:var(--hairline); color:var(--gold); }
.btn--ghost:hover{ background:var(--gold); color:var(--ink); }
.btn--sm{ padding:.72rem 1.4rem; font-size:.68rem; }
.btn--full{ width:100%; }

/* ══════════ NAV ══════════ */
/* Padding LAG i overgangen tidigare, vilket ar en layout-animation.
   Konstant padding nu; bara bakgrund och linje overgar. */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:1.15rem var(--gut);
  transition:background-color .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(12,10,8,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--hairline);
}
.nav__inner{
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}

.wordmark{ display:flex; align-items:baseline; gap:.7rem; }
.wordmark__m{
  font-family:var(--serif); font-size:1.55rem; line-height:1;
  color:var(--gold); font-style:italic;
}
.wordmark__txt{
  font-family:var(--sans); font-size:.74rem; font-weight:500;
  letter-spacing:.42em; color:var(--text);
}

.nav__links{ display:flex; gap:2.4rem; }
.nav__links a{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding-bottom:.25rem;
  border-bottom:1px solid transparent;
  transition:color .35s, border-color .35s;
}
.nav__links a:hover{ color:var(--text); border-bottom-color:var(--gold); }

.nav__right{ display:flex; align-items:center; gap:1.5rem; }
.lang{ display:flex; align-items:center; gap:.55rem; }
.lang__btn{
  background:none; border:0; cursor:pointer; padding:.2rem 0;
  font-family:var(--sans); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; color:var(--dim);
  transition:color .35s;
}
.lang__btn:hover{ color:var(--muted); }
.lang__btn.is-active{ color:var(--gold); }
.lang__sep{ width:1px; height:.8rem; background:var(--hairline); }

/* ══════════ HERO — seglet som svävande hjälte ══════════
   Ren Labs-riktning: produkten (här loggan) svävar centralt i ljus, med
   spegling under; plaggen är MJUKT maskade atmosfärpelare, inga raka kanter. */
.hero{
  /* SCENEN ÄR MÖRK I BÅDA TEMANA. Kubens kantglöd kräver mörker, exakt samma
     skäl som tvingade bort seglets mix-blend-mode:screen på ljust tema (se
     ljus.css). Genom att deklarera om variablerna HÄR ärver allt innanför
     hero:n nattversionen, oavsett vad :root säger. Ljus.css behöver därför
     ingen hero-override alls. */
  --ink:      #0c0a08;
  --ink-2:    #131009;
  --ink-3:    #1a1610;
  --gold:     #c9a86a;
  --gold-lo:  #a98a4f;
  --gold-hi:  #e5cf9b;
  --silver:   #c3c8cb;
  --silver-lo:#8b9296;
  --silver-hi:#e4e8ea;
  --text:     #f1ede4;
  --muted:    #9c9285;
  --dim:      #6d665c;
  --hairline:      rgba(201,168,106,.22);
  --hairline-soft: rgba(241,237,228,.10);

  position:relative;
  /* Scrollbudget: kuben ska hinna ett helt varv innan sidan går vidare. */
  height:260svh;
  color:var(--text);
  background:
    radial-gradient(120% 60% at 50% 14%, #16110a 0%, var(--ink) 46%, #070504 100%);
}

/* Innehållet står stilla medan kuben vänder. */
.hero__fast{
  position:sticky; top:0;
  height:100svh;
  display:grid; place-items:center;
  overflow:hidden;
  padding:4.6rem var(--gut) 3.4rem;
}

/* Navigeringen ligger ovanpå den mörka scenen tills den fastnar. Samma
   grepp som på .hero: deklarera om variablerna, så ärver ordmärke, länkar
   och språkväljare nattversionen. Annars blir ordmärket mörkt mot mörkt
   i ljust tema och försvinner helt. */
.nav:not(.is-stuck){
  --text:  #f1ede4;
  --muted: #9c9285;
  --dim:   #6d665c;
  --gold:  #c9a86a;
}

/* Atmosfärspelarna är borta: kuben visar fem verkliga plagg, då är
   flankbilderna bara upprepning. */
.hero__atmos{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
/* Guld-aura bakom kuben + vinjett runt kanterna för djup. */
.hero__aura{
  position:absolute; inset:0;
  background:
    radial-gradient(38% 42% at 50% 40%, rgba(201,168,106,.20), rgba(201,168,106,.05) 40%, transparent 66%),
    radial-gradient(120% 100% at 50% 120%, rgba(0,0,0,.6), transparent 55%),
    linear-gradient(0deg, var(--ink) 2%, transparent 26%);
}
.hero__grain{
  position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* ── Scen (centrerad) ── */
.hero__stage{
  position:relative; z-index:2;
  max-width:44rem; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero__place{
  font-family:var(--sans); font-size:.72rem; font-weight:500;
  letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.2rem;
  display:inline-flex; align-items:center; gap:1rem;
  opacity:0; animation:fadeup .9s var(--ease-out) .1s forwards;
}
/* Silver-hårlinjer runt platsraden: kall metall inramar den varma. */
.hero__place::before,
.hero__place::after{
  content:""; width:2.4rem; height:1px;
  background:linear-gradient(90deg, transparent, var(--silver-lo));
}
.hero__place::after{ transform:scaleX(-1); }

/* ── Scenen: ordmärket är horisonten, kuben står i den ── */
.hero__scen{
  position:relative;
  width:min(33vw, 31svh); aspect-ratio:1;
  margin:.2rem 0 1.2rem;
  display:grid; place-items:center;
  opacity:0; animation:crestin 1.3s var(--ease-out) .25s forwards;
}

/* Ordmärket ligger BAKOM kuben och sticker ut åt båda håll. Det är en SVG
   med texten på en bana: banan är välvd vid scrollens början och planas ut
   av kub.js medan kuben vrids, tills ordet ligger rakt som en horisont.
   textPath centrerar via startOffset, så ingen text-indent behövs. */
.hero__masthead{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(92vw, 1500px); height:auto;
  z-index:1; pointer-events:none; overflow:visible;
}
.hero__masthead text{
  font-family:var(--serif);
  font-size:150px;      /* användarenheter i viewBox, inte skärmpixlar */
  letter-spacing:.22em;
  fill:rgba(201,168,106,.20);
}

/* Kanvasen är MEDVETET större än scenen. Glödet måste hinna tona ut inom
   canvasytan, annars klipper canvaskanten det och man ser en ljus fyrkant
   runt kuben. Kameran flyttas bakåt med samma faktor i kub.js så kuben
   behåller sin storlek på skärmen. */
.hero__kub{ position:absolute; inset:-45%; z-index:2; }
.hero__kub-still{
  position:absolute; inset:0; margin:auto;
  width:46%; height:auto; border-radius:50%;
  filter:drop-shadow(0 0 46px rgba(201,168,106,.42)) drop-shadow(0 14px 30px rgba(0,0,0,.5));
  transition:opacity .5s var(--ease-out);
}
.hero__kub-duk{
  position:absolute; inset:0; display:block;
  width:100%; height:100%;
  opacity:0; transition:opacity .9s var(--ease-out);
}
/* Först när WebGL faktiskt ritat lämnas stillbilden över. Går något fel
   står loggan kvar och hero:n ser ut som förr. */
.hero__kub.is-vaken .hero__kub-duk{ opacity:1; }
.hero__kub.is-vaken .hero__kub-still{ opacity:0; }

@keyframes crestin{ from{ opacity:0; transform:translateY(20px) scale(.94); } to{ opacity:1; transform:none; } }

.hero__title{
  font-size:clamp(2.6rem, 6vw, 5.6rem);
  letter-spacing:-.02em; line-height:1.03;
}
.hero__line{ display:block; overflow:hidden; }
.hero__reveal{
  display:block; transform:translateY(102%);
  animation:rise 1s var(--ease-out) forwards;
}
.hero__line:nth-child(1) .hero__reveal{ animation-delay:.5s; }
.hero__line:nth-child(2) .hero__reveal{ animation-delay:.66s; }
@keyframes rise{ to{ transform:translateY(0); } }
.hero__title .l1{ text-shadow:0 2px 40px rgba(0,0,0,.55); }
.hero__title .l2{
  font-style:italic; color:var(--gold);
  font-size:.84em; margin-top:.1em;
}

.hero__lede{
  color:var(--muted); max-width:44ch;
  margin:1.4rem auto 0; font-size:1.02rem;
  opacity:0; animation:fadeup 1s var(--ease-out) .95s forwards;
}
.hero__cta{
  display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:1.9rem;
  opacity:0; animation:fadeup 1s var(--ease-out) 1.1s forwards;
}
@keyframes fadeup{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .hero__place,.hero__scen,.hero__reveal,.hero__lede,.hero__cta{ animation:none; opacity:1; transform:none; }
  /* Ingen scrolldriven rotation: sektionen krymper till en skärm och
     loggan står kvar som stillbild. kub.js startar inte alls. */
  .hero{ height:auto; min-height:100svh; }
  .hero__fast{ position:static; height:auto; min-height:100svh; }
}

/* Telefon: ordmärket måste rymmas, annars drar det ut sidan i sidled. */
@media (max-width:700px){
  .hero{ height:230svh; }
  .hero__scen{ width:min(76vw, 40svh); }
  /* Kuben täcker hela ordmärket vid den här bredden, så det gör ingen nytta
     bakom den. Navigeringens ordmärke bär namnet på mobil. */
  .hero__masthead{ display:none; }
}

.scrollhint{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:3;
  width:1px; height:4rem; background:var(--hairline); overflow:hidden;
}
.scrollhint span{
  position:absolute; inset:0 auto auto 0; width:1px; height:40%;
  background:var(--gold); animation:trickle 2.6s ease-in-out infinite;
}
@keyframes trickle{
  0%{ transform:translateY(-100%); } 100%{ transform:translateY(250%); }
}
@media (prefers-reduced-motion:reduce){ .scrollhint span{ animation:none; } }

/* ══════════ TRUST STRIP ══════════ */
.strip{
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:clamp(2.5rem,5vw,4rem) var(--gut);
  background:var(--ink-2);
}
.strip__list{
  max-width:var(--max); margin:0 auto; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem;
  text-align:center;
}
.strip__list li{ display:flex; flex-direction:column; gap:.6rem; }
.strip__n{
  font-family:var(--serif); font-size:clamp(2.2rem,4vw,3.4rem);
  color:var(--gold); line-height:1;
}
.strip__t{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}

/* ══════════ SEKTIONER ══════════ */
.sec{ padding:var(--sec) var(--gut); max-width:var(--max); margin:0 auto; }

/* Ankarhopp får inte lägga rubriken bakom den fasta navigeringen */
.sec[id], main[id]{ scroll-margin-top:6.5rem; }
.sec__head{ margin-bottom:clamp(3rem,6vw,5.5rem); }
.sec__head--center{ text-align:center; }
.sec__head--center .sec__title{ margin:0 auto; }
.sec__head--center .sec__lede{ margin-left:auto; margin-right:auto; }
.sec__head--center .eyebrow::before{ display:none; }

/* ══════════ PLATSHÅLLARE — tydligt märkta, inte påhittade plagg ══════════ */
.ph{
  position:relative; width:100%;
  background:
    repeating-linear-gradient(-45deg,
      rgba(201,168,106,.045) 0 1px,
      transparent 1px 13px),
    linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border:1px solid var(--hairline);
  display:grid; place-items:center;
  overflow:hidden;
}
.ph::after{
  content:attr(data-ph);
  font-family:var(--sans); font-size:.64rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-lo);
  border:1px solid var(--hairline);
  padding:.6rem 1.1rem;
  background:rgba(12,10,8,.6);
}
.ph--portrait{ aspect-ratio:3/4; }
.ph--tall{ aspect-ratio:3/4.4; }
.ph--reel{ aspect-ratio:9/16; }

/* ══════════ RIKTIGA BILDER (hämtade från hennes TikTok) ══════════ */
.shot{
  position:relative; overflow:hidden;
  border:1px solid var(--hairline);
  background:var(--ink-3);
}
.shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease-out);
}
.shot--portrait{ aspect-ratio:3/4; }
.shot--tall{ aspect-ratio:3/4.4; }
.shot--reel{ aspect-ratio:9/16; }

/* Hover bakom media query: pekskarmar utloser annars hover vid tryck. */
@media (hover:hover) and (pointer:fine){
  .cat:hover .shot img,
  .card:hover .shot img,
  .reel:hover .shot img{ transform:scale(1.04); }
}

/* ══════════ KOLLEKTION — medvetet ojämnt raster ══════════ */
.cats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.2vw,2.2rem);
}
/* Den höga kategorin spänner båda raderna och LÅTER bilden fylla höjden.
   Fast aspect-ratio här ger glapp — höjden måste komma från rutnätet. */
.cat--tall{ grid-row:span 2; display:flex; flex-direction:column; }
.cat--tall .ph,
.cat--tall .shot{ flex:1 1 auto; aspect-ratio:auto; min-height:0; }
.cat__meta{ padding-top:1.4rem; }
.cat__meta h3{
  font-size:clamp(1.15rem,1.7vw,1.6rem);
  margin-bottom:.5rem;
}
.cat__meta p{ color:var(--muted); font-size:.9rem; margin:0; line-height:1.6; }
.cat .ph{ transition:border-color .5s; }
.cat:hover .ph{ border-color:var(--gold); }

/* ══════════ ATELJÉN ══════════ */
.sec--atelier{ background:var(--ink-2); max-width:none; }
.atelier{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:5fr 6fr;
  gap:clamp(2.5rem,6vw,7rem); align-items:center;
}
.atelier__txt p{ color:var(--muted); margin:1.6rem 0 0; }
.atelier__txt .sec__title{ max-width:16ch; }

/* ══════════ REELS ══════════ */
.reels{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.8rem,1.8vw,1.6rem);
}
.reel .ph{ transition:transform .6s var(--ease-out), border-color .5s; }
/* Rörelse/video = kall silver-accent, inte guld. */
.reel .shot{ border-color:var(--hairline-ag); }
@media (hover:hover) and (pointer:fine){
  .reel:hover .shot{ border-color:var(--silver); transform:translateY(-8px); }
}

/* ══════════ PRODUKTRUTNÄT ══════════ */
/* Delad absolut ban: identiska kortrutnat. Var tredje kort tar dubbel bredd
   och far liggande bildformat, sa rytmen bryts i stallet for att upprepas. */
.grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,2.6vw,2.6rem);
}
.card--wide{ grid-column:span 2; }
.card--wide .shot--portrait{ aspect-ratio:16/11; }
.card__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; padding-top:1.2rem;
  border-top:1px solid var(--hairline-soft); margin-top:1.2rem;
}
.card__meta h3{ font-size:1.1rem; }
.price{ font-size:.86rem; color:var(--gold); letter-spacing:.06em; }
.card .ph{ transition:border-color .5s; }
.card:hover .ph{ border-color:var(--gold); }

/* ══════════ RÄTT STORLEK ══════════ */
.sec--fit{ background:var(--ink-2); max-width:none; }
.fit{ max-width:var(--max); margin:0 auto; }
.fit__lead{ margin-bottom:clamp(3rem,6vw,5rem); max-width:44rem; }
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(2rem,4vw,4rem);
}
/* Silver för det tekniska: mått och storlek = kall metall. */
.steps li{ border-top:1px solid var(--hairline-ag); padding-top:1.8rem; }
.steps__n{
  display:block; font-family:var(--serif); font-size:1.5rem;
  color:var(--silver); margin-bottom:1rem;
}
.steps h3{ font-size:1.25rem; margin-bottom:.8rem; }
.steps p{ color:var(--muted); font-size:.94rem; margin:0; }

/* ══════════ KONTAKT ══════════ */
.contact{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:start;
}
.contact__txt p{ color:var(--muted); margin:1.6rem 0 0; max-width:44ch; }
.contact__facts{ margin:3rem 0 0; display:grid; gap:1.4rem; }
.contact__facts div{ display:grid; gap:.3rem; }
.contact__facts dt{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim);
}
.contact__facts dd{ margin:0; color:var(--text); font-size:.98rem; }
.contact__facts a{ color:var(--gold); border-bottom:1px solid var(--hairline); }

.form{ display:grid; gap:1.5rem; }
.field{ display:grid; gap:.55rem; }
.field label{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim);
}
.field input,.field select,.field textarea{
  width:100%; background:transparent; color:var(--text);
  border:0; border-bottom:1px solid var(--hairline-soft);
  padding:.75rem 0; font-family:var(--sans); font-size:1rem; font-weight:300;
  transition:border-color .4s;
}
.field textarea{ resize:vertical; }
.field select option{ background:var(--ink-2); color:var(--text); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--gold);
}
.form__note{ font-size:.8rem; color:var(--dim); margin:0; text-align:center; }
.form__ok{
  font-size:.85rem; color:var(--gold); margin:0; text-align:center;
  border:1px solid var(--hairline); padding:.9rem;
}

/* ══════════ FOOTER ══════════ */
.foot{ border-top:1px solid var(--hairline); background:var(--ink-2); }
.foot__inner{
  max-width:var(--max); margin:0 auto;
  padding:clamp(3.5rem,7vw,6rem) var(--gut) clamp(2.5rem,5vw,4rem);
  display:grid; grid-template-columns:1.4fr 1fr; gap:3rem;
}
.foot__brand p{ color:var(--dim); font-size:.9rem; margin:1.4rem 0 0; max-width:32ch; }
.foot__cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:2.5rem; }
.foot__cols h4{
  font-family:var(--sans); font-size:.68rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1.2rem;
}
.foot__cols a{
  display:block; color:var(--muted); font-size:.9rem;
  padding:.35rem 0; transition:color .35s;
}
.foot__cols a:hover{ color:var(--text); }

.foot__bar{
  border-top:1px solid var(--hairline-soft);
  max-width:var(--max); margin:0 auto;
  padding:1.6rem var(--gut);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.74rem; letter-spacing:.1em; color:var(--dim);
}
.foot__draft{ color:var(--gold-lo); letter-spacing:.22em; }

/* ══════════ PRODUKTSIDA ══════════ */
.pd{ max-width:var(--max); margin:0 auto; padding:9rem var(--gut) var(--sec); }
.pd__back{
  display:inline-block; margin-bottom:clamp(2rem,4vw,3.5rem);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); transition:color .2s ease;
}
.pd__back::before{ content:"\2190"; margin-right:.7rem; }
.pd__back:hover{ color:var(--gold); }
.pd__wrap{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,6rem); align-items:start;
}
.pd__img{ max-width:34rem; }
.pd__kat{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.4rem;
}
.pd__namn{ font-size:clamp(1.8rem,3.4vw,3rem); letter-spacing:-.015em; max-width:16ch; }
.pd__pris{ color:var(--muted); margin:1.4rem 0 2.6rem; font-size:1rem; }

/* ══════════ TANGENTBORDSFOKUS ══════════ */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}
.btn:focus-visible{ outline-offset:4px; }

/* ══════════ TEMA-TOGGLE (mörk/ljus, instant) ══════════ */
.vswitch{
  position:fixed; left:1rem; bottom:1rem; z-index:200;
  display:inline-flex; align-items:center; gap:.55rem;
  background:rgba(12,10,8,.88);
  border:1px solid var(--hairline);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:.5rem .9rem;
  font-family:var(--sans); font-size:.62rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; color:var(--dim);
  transition:border-color .3s ease, transform .16s var(--ease-out);
}
.vswitch:hover{ border-color:var(--hairline-ag); }
.vswitch:active{ transform:scale(.97); }
.vswitch__opt{ color:var(--dim); transition:color .3s ease; }
.vswitch__opt.is-on{ color:var(--gold-hi); }         /* mörk aktiv = guld */
.vswitch__opt[data-th="light"].is-on{ color:var(--silver-hi); } /* ljus aktiv = silver */
.vswitch__sep{ width:1px; height:.75rem; background:var(--hairline-soft); }

@media (max-width:640px){ .vswitch{ left:.6rem; bottom:.6rem; font-size:.56rem; } }

/* ══════════ RESPONSIVT ══════════ */
@media (max-width:1080px){
  .nav__links{ display:none; }
  /* Klänningspelarna smalnar och tonas ner så seglet + typ dominerar. */
  .hero__drape{ opacity:.2; }
  .hero__drape--l{ left:-42%; }
  .hero__drape--r{ right:-42%; }
  .hero__seal{ width:clamp(8rem,26vw,11rem); }
  .hero__lede{ max-width:34ch; }
  .pd__wrap{ grid-template-columns:1fr; }
  .card--wide{ grid-column:span 2; }
  .cats{ grid-template-columns:repeat(2,1fr); }
  .cat--tall{ grid-row:auto; }
  .cat--tall .ph{ aspect-ratio:3/4; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .reels{ grid-template-columns:repeat(2,1fr); }
  .atelier,.contact{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:2rem; }
  .foot__inner{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .strip__list{ grid-template-columns:1fr; gap:2rem; }
  .cats,.grid{ grid-template-columns:1fr; }
  .card--wide{ grid-column:span 1; }
  .card--wide .shot--portrait{ aspect-ratio:3/4; }
  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width:100%; }
  .nav__right{ gap:.9rem; }
  .wordmark__txt{ letter-spacing:.3em; font-size:.66rem; }
}


/* ══════════ UTGLIDANDE BILDER ══════════
   glid.js skjuter bildblocken i sidled när de lämnar bild. Utan klippning
   växer dokumentet i bredd och sidan går att dra i sidled.
   `clip` och inte `hidden`: hidden skulle göra sektionerna till
   rullbehållare och kan slå sönder sticky-positionering i närheten. */
.sec{ overflow-x:clip; }
.card, .atelier__img, .reel{ will-change:transform, opacity; }