/* ==========================================================================
   SUSPECT SOCIETY
   ========================================================================== */

:root{
  --svart:      #0A0A0A;
  --svart-2:    #101010;
  --marin:      #1B2436;
  --marin-ljus: #26324A;
  --guld:       #C9992F;
  --guld-ljus:  #E0BC63;
  --papper:     #F2EFE8;
  --dov:        #8B8478;

  --display: "Cormorant Garamond", "Bell MT", Georgia, serif;
  --brod:    "Inter", -apple-system, "Segoe UI", sans-serif;

  --marg: clamp(1.25rem, 5vw, 6rem);
  --max: 1280px;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

body{
  background:var(--svart);
  color:var(--papper);
  font-family:var(--brod);
  font-weight:300;
  font-size:clamp(.95rem,.9rem + .2vw,1.0625rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }

::selection{ background:var(--guld); color:var(--svart); }

:focus-visible{ outline:2px solid var(--guld); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--guld); color:var(--svart); padding:.75rem 1.25rem;
}
.skip:focus{ left:0; }

/* --- Delade byggstenar ---------------------------------------------------- */

.ogonbryn{
  font-family:var(--brod);
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--guld);
}

.lank-pil{
  display:inline-flex; align-items:center; gap:.85rem;
  font-size:.75rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--papper); text-decoration:none;
  padding-bottom:.5rem;
  border-bottom:1px solid rgba(201,153,47,.35);
  transition:color .35s, border-color .35s, gap .35s;
}
.lank-pil::after{
  content:""; width:1.75rem; height:1px; background:var(--guld);
  transition:width .35s;
}
.lank-pil:hover{ color:var(--guld-ljus); border-color:var(--guld); gap:1.15rem; }
.lank-pil:hover::after{ width:2.5rem; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.topp{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:clamp(1.5rem,4vw,3.5rem);
  padding:1.15rem var(--marg);
  background:rgba(10,10,10,0);
  transition:background .5s, padding .5s, border-color .5s;
  border-bottom:1px solid transparent;
}
.topp.fast{
  background:rgba(10,10,10,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(201,153,47,.16);
  padding:.8rem var(--marg);
}

.topp__logga{ flex-shrink:0; }
.topp__logga img{ height:56px; width:auto; transition:height .5s; }
.topp.fast .topp__logga img{ height:44px; }

.topp__nav{ display:flex; gap:2.5rem; }
.topp__nav a{
  position:relative;
  font-size:.6875rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--papper); text-decoration:none; opacity:.75;
  transition:opacity .3s, color .3s;
}
.topp__nav a::after{
  content:""; position:absolute; left:0; bottom:-.4rem;
  width:0; height:1px; background:var(--guld); transition:width .35s;
}
.topp__nav a:hover{ opacity:1; color:var(--guld-ljus); }
.topp__nav a:hover::after{ width:100%; }

.topp__knapp{
  display:none; flex-direction:column; gap:5px;
  margin-left:auto;
  background:none; border:0; cursor:pointer; padding:.5rem;
}
.topp__knapp span{
  display:block; width:24px; height:1px; background:var(--papper);
  transition:transform .35s, opacity .35s;
}
.topp__knapp[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.topp__knapp[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

.mobilmeny{
  position:fixed; inset:0; z-index:99;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.5rem;
  background:var(--svart);
}
.mobilmeny[hidden]{ display:none; }
.mobilmeny a{
  font-family:var(--display); font-size:2rem; font-weight:600;
  color:var(--papper); text-decoration:none; letter-spacing:.02em;
}
.mobilmeny a:hover{ color:var(--guld); }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:9rem var(--marg) 5rem;
  overflow:hidden;
}
.hero__bild{ position:absolute; inset:0; }
.hero__bild img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  filter:grayscale(.35) contrast(1.06) brightness(.55);
  transform:scale(1.04);
}
.hero__bild::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(10,10,10,.94) 0%, rgba(10,10,10,.78) 42%, rgba(10,10,10,.22) 100%),
    linear-gradient(to top, var(--svart) 0%, transparent 45%),
    radial-gradient(circle at 20% 50%, rgba(27,36,54,.55), transparent 65%);
}

.hero__inre{ position:relative; max-width:44rem; }
.hero__inre > * + *{ margin-top:1.75rem; }

.hero__rubrik{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.9rem, 1.5rem + 6.5vw, 7.5rem);
  line-height:.92; letter-spacing:-.015em;
}
.hero__rubrik span{
  display:block;
  opacity:0; transform:translateY(1.75rem);
  animation:stig .95s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__rubrik span:nth-child(1){ animation-delay:.1s; }
.hero__rubrik span:nth-child(2){ animation-delay:.22s; }
.hero__rubrik span:nth-child(3){ animation-delay:.34s; }
.hero__rubrik em{
  font-style:italic; font-weight:400; color:var(--guld);
}

@keyframes stig{ to{ opacity:1; transform:none; } }

.hero__text{
  max-width:34rem; color:rgba(242,239,232,.72);
  font-size:clamp(1rem,.95rem + .3vw,1.1875rem);
}

.hero__akt{
  position:absolute; left:var(--marg); right:var(--marg); bottom:2.25rem;
  display:flex; align-items:center; gap:1.5rem;
  font-size:.625rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(242,239,232,.42);
}
.hero__linje{ flex:1; height:1px; background:rgba(201,153,47,.28); }

/* ==========================================================================
   KONCEPT
   ========================================================================== */

.koncept{
  padding:clamp(5rem,11vw,10rem) var(--marg);
  border-top:1px solid rgba(201,153,47,.14);
  border-bottom:1px solid rgba(201,153,47,.14);
  background:linear-gradient(180deg, var(--svart) 0%, var(--svart-2) 100%);
}
.koncept__text{
  max-width:52rem; margin-inline:auto; text-align:center;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem, 1rem + 1.5vw, 2.25rem);
  line-height:1.5; color:rgba(242,239,232,.86);
}
.koncept__text em{ font-style:italic; color:var(--guld-ljus); }

/* ==========================================================================
   SEKTIONER
   ========================================================================== */

.sektion{
  max-width:var(--max); margin-inline:auto;
  padding:clamp(5rem,10vw,9rem) var(--marg);
}
.sektion--om{
  max-width:none;
  background:var(--marin);
  background-image:linear-gradient(160deg, var(--marin-ljus) 0%, var(--marin) 55%, #141B29 100%);
}
.sektion--om > *{ max-width:var(--max); margin-inline:auto; }

.sektion__topp{ margin-bottom:clamp(3rem,6vw,5.5rem); }
.sektion__topp > * + *{ margin-top:1rem; }

.sektion__rubrik{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.25rem,1.5rem + 3vw,4.25rem);
  line-height:1; letter-spacing:-.01em;
}
.sektion__ingress{
  max-width:36rem; color:rgba(242,239,232,.6);
}

/* ==========================================================================
   FALL — Kräftskivemordet
   ========================================================================== */

.fall{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2.5rem,5vw,6rem); align-items:start;
}

.fall__bild{
  position:sticky; top:7rem;
  padding:clamp(1.5rem,3vw,3rem);
  background:linear-gradient(150deg, rgba(27,36,54,.9), rgba(10,10,10,.9));
  border:1px solid rgba(201,153,47,.2);
}
.fall__bild img{
  width:100%;
  box-shadow:0 2rem 4rem rgba(0,0,0,.6);
}

.fall__text > * + *{ margin-top:2rem; }

.fall__titel{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.5rem,1.8rem + 3vw,4.5rem);
  line-height:1; letter-spacing:-.01em;
  margin-top:.85rem !important;
  hyphens:manual;
}
.fall__ingress{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.15rem,1rem + .6vw,1.6rem);
  line-height:1.55; color:var(--guld-ljus);
  padding-left:1.5rem; border-left:1px solid rgba(201,153,47,.4);
}
.fall__brod > p + p{ margin-top:1.15rem; }
.fall__brod p{ color:rgba(242,239,232,.68); }

/* Akt = faktarutan, satt som en beslagtagen dokumentetikett */
.akt{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  border-top:1px solid rgba(201,153,47,.22);
  border-left:1px solid rgba(201,153,47,.22);
}
.akt > div{
  display:flex; flex-direction:column; gap:.35rem;
  padding:1.1rem 1.25rem;
  border-right:1px solid rgba(201,153,47,.22);
  border-bottom:1px solid rgba(201,153,47,.22);
}
.akt__etikett{
  font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dov);
}
.akt__varde{
  font-family:var(--display); font-weight:600; font-size:1.0625rem;
  color:var(--papper); line-height:1.3;
}

.innehall__rubrik{
  font-size:.6875rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--guld); margin-bottom:1rem;
}
.innehall ul{ list-style:none; display:grid; gap:.6rem; }
.innehall li{
  display:flex; align-items:baseline; gap:.85rem;
  color:rgba(242,239,232,.75);
}
.innehall li::before{
  content:"◆"; font-size:.45rem; color:var(--guld); flex-shrink:0;
  transform:translateY(-.15em);
}

/* ==========================================================================
   KOMMANDE
   ========================================================================== */

.kommande{
  margin-top:clamp(5rem,10vw,9rem);
  padding-top:clamp(3rem,6vw,5rem);
  border-top:1px solid rgba(201,153,47,.16);
}
.kommande__topp{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.kommande__topp > * + *{ margin-top:.85rem; }
.kommande__rubrik{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.75rem,1.4rem + 1.6vw,2.75rem); line-height:1;
}
.kommande__rutnat{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(1.5rem,3vw,3rem);
}

.teaser{
  border:1px solid rgba(201,153,47,.2);
  background:linear-gradient(170deg, rgba(27,36,54,.5), rgba(10,10,10,.5));
  transition:border-color .5s;
}
.teaser:hover{ border-color:rgba(201,153,47,.45); }

.teaser__bild{ padding:clamp(1.75rem,3.5vw,3rem); }
.teaser__bild img{ width:100%; }

.teaser__data{
  border-top:1px solid rgba(201,153,47,.2);
  display:grid; grid-template-columns:1fr 1fr;
}
.teaser__data > div{
  padding:1.15rem 1.35rem;
  display:flex; flex-direction:column; gap:.35rem;
}
.teaser__data > div:first-child{ border-right:1px solid rgba(201,153,47,.2); }
.teaser__data dt{
  font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dov);
}
.teaser__data dd{
  font-family:var(--display); font-weight:600; font-size:1.125rem;
  color:var(--guld-ljus);
}

/* ==========================================================================
   OM OSS
   ========================================================================== */

.om{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(2.5rem,5vw,6rem); align-items:start;
}
.om__text > p + p{ margin-top:1.35rem; }
.om__text p{ color:rgba(242,239,232,.7); }
.om__ledande{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.3rem,1.05rem + 1vw,1.9rem);
  line-height:1.5; color:var(--papper) !important;
}

.om__stampel{ list-style:none; display:grid; gap:1px; background:rgba(201,153,47,.22); }
.om__stampel li{
  background:var(--marin);
  padding:1.35rem 1.5rem;
  font-size:.6875rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--guld-ljus);
  display:flex; align-items:center; gap:1rem;
}
.om__stampel li::before{
  content:""; width:1.5rem; height:1px; background:var(--guld); flex-shrink:0;
}

/* ==========================================================================
   BUTIKER
   ========================================================================== */

.butiker{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
  gap:clamp(2.5rem,5vw,5rem);
}
.butiker__rubrik{
  font-size:.6875rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--guld); font-weight:400;
  padding-bottom:1.15rem; margin-bottom:.5rem;
  border-bottom:1px solid rgba(201,153,47,.28);
}
.butiker__lista{ list-style:none; }
.butiker__lista li{
  padding:1.5rem 0;
  border-bottom:1px solid rgba(242,239,232,.08);
}
.butik__namn{
  font-family:var(--display); font-weight:600;
  font-size:1.35rem; line-height:1.3; color:var(--papper);
  display:block;
}
a.butik__namn{ text-decoration:none; transition:color .3s; }
a.butik__namn:hover{ color:var(--guld-ljus); }
a.butik__namn::after{ content:" ↗"; font-size:.75em; color:var(--guld); }
.butik__adress{
  margin-top:.35rem; font-size:.875rem; color:var(--dov); line-height:1.6;
}

/* ==========================================================================
   RUTA — bli återförsäljare
   ========================================================================== */

.ruta{
  margin-top:clamp(4rem,8vw,7rem);
  padding:clamp(2rem,4.5vw,4rem);
  border:1px solid rgba(201,153,47,.3);
  background:linear-gradient(150deg, rgba(27,36,54,.75), rgba(10,10,10,.75));
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem); align-items:center;
}
.ruta__rubrik{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.65rem,1.35rem + 1.3vw,2.5rem);
  line-height:1.1; margin-bottom:1.15rem;
}
.ruta__text p{ color:rgba(242,239,232,.68); max-width:38rem; }

.ruta__kontakt{ display:grid; gap:1px; background:rgba(201,153,47,.28); }
.ruta__kontakt a{
  background:var(--svart);
  padding:1.35rem 1.5rem;
  font-family:var(--display); font-weight:600; font-size:1.25rem;
  color:var(--papper); text-decoration:none;
  transition:background .35s, color .35s;
  text-align:center; word-break:break-word;
}
.ruta__kontakt a:hover{ background:var(--guld); color:var(--svart); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.fot{
  border-top:1px solid rgba(201,153,47,.16);
  padding:clamp(3.5rem,7vw,6rem) var(--marg) 2rem;
  background:var(--svart-2);
}
.fot__inre{
  max-width:var(--max); margin-inline:auto;
  display:grid; grid-template-columns:1.6fr repeat(3,1fr);
  gap:clamp(2rem,4vw,4rem);
}
.fot__markes img{ height:76px; width:auto; margin-bottom:1.5rem; }
.fot__markes p{ color:var(--dov); font-size:.875rem; max-width:20rem; }

.fot__kol h2{
  font-size:.625rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--guld); font-weight:400; margin-bottom:1.25rem;
}
.fot__kol a, .fot__kol p{
  display:block; font-size:.9375rem; color:rgba(242,239,232,.68);
  text-decoration:none; line-height:1.9;
  transition:color .3s;
}
.fot__kol a:hover{ color:var(--guld-ljus); }

.fot__rad{
  max-width:var(--max); margin:clamp(3rem,6vw,5rem) auto 0;
  padding-top:1.75rem; border-top:1px solid rgba(242,239,232,.08);
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dov);
}

/* ==========================================================================
   AVSLÖJANDE VID SCROLL
   ========================================================================== */

/* ==========================================================================
   AVSLÖJANDE VID SCROLL
   Innehållet döljs BARA om skriptet hunnit sätta <html class="js">.
   Utan JS, eller om något går fel, syns allt direkt.
   ========================================================================== */

.js .avsloja{
  opacity:0; transform:translateY(1.75rem);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
.js .avsloja.syns{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .js .avsloja{ opacity:1; transform:none; }
  .hero__rubrik span{ opacity:1; transform:none; animation:none; }
}

/* ==========================================================================
   RESPONSIVT
   ========================================================================== */

@media (max-width:1024px){
  .fall{ grid-template-columns:1fr; }
  .fall__bild{ position:static; max-width:26rem; }
  .om{ grid-template-columns:1fr; }
  .ruta{ grid-template-columns:1fr; }
  .fot__inre{ grid-template-columns:1fr 1fr; }
  .fot__markes{ grid-column:1 / -1; }
}

@media (max-width:768px){
  .topp__nav{ display:none; }
  .topp__knapp{ display:flex; }
  .hero{ padding-top:7.5rem; align-items:flex-end; padding-bottom:7rem; }
  .hero__bild img{ object-position:center 35%; }
  .hero__bild::after{
    background:
      linear-gradient(to top, var(--svart) 12%, rgba(10,10,10,.72) 55%, rgba(10,10,10,.42) 100%);
  }
  .hero__akt{ font-size:.5625rem; gap:1rem; }
  .teaser__data{ grid-template-columns:1fr; }
  .teaser__data > div:first-child{
    border-right:0; border-bottom:1px solid rgba(201,153,47,.2);
  }
}

@media (max-width:520px){
  .fot__inre{ grid-template-columns:1fr; }
  .akt{ grid-template-columns:1fr 1fr; }
}