/* Sex fotografier — demonstrationssida. INGEN avsändare, ingen studio-pitch.
   Skelett och mekanik ÄRVDA från cut.merthen.ai
   (Desktop/Grok Projects/burger-scroll/index.html) enligt Daniels order.
   Lärdomen bakom det: när Daniel namnger en referenssajt är det SKELETTET som
   är beställningen, inte stämningen. Att bygga "i den andan" brände ett helt
   pass på Erborian 2026-07-25.

   ⭐ Accenten #e86a2a är The Cuts egen — och den råkar ligga på HOKA-loggans
   orange i filmen. Det är därför sidan hänger ihop utan att vi lagt till något. */

:root{
  --bg:#09090b;
  --bg-2:#111114;
  --surface:#16161a;
  --text:#f3eee6;                        /* varm offvit, INTE kall #fff */
  --muted:rgba(243,238,230,.52);
  --faint:rgba(243,238,230,.14);
  --line:rgba(243,238,230,.12);
  --accent:#e86a2a;
  --accent-soft:#f0a060;
  --radius:14px;
  --ease:cubic-bezier(.16,1,.3,1);
  --display:"Syne",sans-serif;
  --sans:"DM Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}

/* ══ HERO ═════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;min-height:100svh;
  display:grid;align-items:end;
  grid-template-columns:1fr auto;gap:2rem;
  padding:clamp(1.4rem,4vw,3.4rem);
  padding-bottom:clamp(3.6rem,9vh,5.4rem);
  overflow:hidden;
}
.hero__film{position:absolute;inset:0;z-index:0}

/* ⚠️ object-fit:FILL, inte cover. Kommentaren i The Cuts källa förklarar varför:
   fill mappar skärm-x→video-x OCH skärm-y→video-y proportionellt över hela
   rutan, så tonen stämmer vid varje söm mot förgrundens kant på samma höjd.
   Aspekt-stretchen är osynlig under 48 px sudd. */
/* ⚠️ UPPMÄTT i klippet, inte gissat. Två fel matade den här ytan:
   1. Videon har ett INBAKAT ljussken med linsflare i övre HÖGRA hörnet — hela
      klippet igenom ligger högerkanten på luminans 20 mot vänsterkantens 9,5.
   2. Filmen avslutas med en inzoomning där skon växer ur högerkanten
      (ruta 227–232), och då spikar högerkanten till 60.
   Självbakgrunden följde bildens ljushet rakt av och förstorade båda till ett
   sken som lös ut utanför förgrundens kant. Därför: kraftigt nedtonad, mer
   sudd, och en mask som tonar ut den mot sidans kanter så den aldrig når dem. */
.film-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:fill;transform:scale(1.1);
  filter:blur(64px) saturate(.9) brightness(.42);
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 46%,#000 34%,transparent 82%);
          mask-image:radial-gradient(ellipse 78% 82% at 50% 46%,#000 34%,transparent 82%);
}
/* contain = skon syns ALLTID i sin helhet. Den är beviset och får inte kapas. */
.film{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;background:transparent;
}
.film-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    /* MOTGRADIENT mot videons inbakade hörnsken uppe till höger. Den är riktad,
       inte symmetrisk, av exakt det skälet — en jämn vinjett hade mörkat den
       redan mörka vänsterkanten lika mycket och behållit obalansen. */
    radial-gradient(ellipse 58% 62% at 100% 0%,rgba(9,9,11,.52) 0%,transparent 68%),
    linear-gradient(to bottom,rgba(9,9,11,.62) 0%,transparent 22%,transparent 58%,rgba(9,9,11,.9) 100%),
    linear-gradient(to right,rgba(9,9,11,.74) 0%,transparent 44%,rgba(9,9,11,.34) 100%),
    radial-gradient(ellipse 64% 64% at 50% 48%,transparent 54%,rgba(9,9,11,.5) 100%);
}

.hero__copy{position:relative;z-index:2;max-width:38rem;min-width:0}
.hero__eyebrow{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-soft);margin:0 0 1rem;font-weight:500;
}
/* ⚠️ 7,4vw gav 106 px vid 1440 → "PHOTOGRAPHS" blev ~770 px brett i Syne 800
   och sprängde sin 34 rem-spalt rakt in i specpanelen. Värre: .hero har
   overflow:hidden, så ordet KLIPPTES tyst i stället för att skapa sidoscroll
   som hade avslöjat felet. Ett långt ord i displaygrad måste måttsättas mot
   spaltbredden, inte mot viewporten. */
/* Måttsatt mot SPALTBREDDEN, inte mot viewporten. Syne 800 = 1,19 em/tecken
   (uppmätt). "SIX" är 3 tecken och tål därför stor grad; "PHOTOGRAPHS" är 11
   och måste ligga en bra bit under. */
.hero h1{
  font-family:var(--display);font-weight:800;
  margin:0 0 1.15rem;display:flex;flex-direction:column;gap:.1em;
}
.h1-num{
  font-size:clamp(3.4rem,8.6vw,6.8rem);line-height:.86;letter-spacing:-.04em;
}
/* The Cuts h1-mekanik: ett ord i <em> bär accenten. En gång, i heron, aldrig
   upprepad — det är repetitionen som gör det till ett AI-tell, inte greppet. */
.hero h1 em{
  font-style:normal;color:var(--accent);
  font-size:clamp(1.2rem,2.9vw,2.45rem);line-height:1;letter-spacing:-.005em;
}
.hero__sub{
  margin:0;color:var(--muted);max-width:44ch;
  font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.6;
}

.hero__meta{
  position:relative;z-index:2;justify-self:end;align-self:end;
  display:grid;gap:.85rem;width:min(268px,100%);
  padding:1.15rem 1.2rem;
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(9,9,11,.45);backdrop-filter:blur(12px) saturate(140%);
}
.hero__meta-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-size:.8rem;
}
.hero__meta-row span{color:var(--muted)}
.hero__meta-row strong{font-weight:600;font-variant-numeric:tabular-nums}
.hero__meta-row .hot{color:var(--accent)}

.scrollcue{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(1rem,2.4vh,1.6rem);z-index:2;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);
}
.scrollcue::after{content:' ↓'}

/* ══ BAND ═════════════════════════════════════════════════════════════════ */
.band{position:relative;padding:clamp(4.5rem,12vh,8rem) 0;overflow:hidden}
.band__bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%,rgba(232,106,42,.07),transparent 60%),
    var(--bg-2);
}
.band__inner{
  position:relative;z-index:1;max-width:1180px;margin:0 auto;
  padding:0 clamp(1.4rem,4vw,3.4rem);
}
.band h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.08;letter-spacing:-.015em;
  margin:0 0 .9rem;
}
.band__lede{
  margin:0 0 2.4rem;color:var(--muted);max-width:52ch;
  font-size:clamp(.98rem,1.4vw,1.08rem);line-height:1.62;
}

/* Chip-rutnätet är The Cuts mekanik. Sex stycken, aldrig fler — ANTALET är
   argumentet, och därför får rutnätet aldrig scrolla i sidled. */
.band__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem}
.chip{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.chip:hover{border-color:rgba(232,106,42,.4);transform:translateY(-3px)}
/* ⚠️ 4:3, uppmätt ur källorna (1611×1201, 1639×1200, 1666×1234 …). Ett
   kvadratiskt format med cover skar bort en fjärdedel av varje sko — precis
   fel bild att beskära när poängen är att visa vad som gick IN. */
.chip img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#f4f4f6}
/* Fast höjd + nowrap: två etiketter radbröts och gav ojämna celler i ett
   rutnät som ska läsa som en kontaktkarta. */
.chip span{
  display:flex;gap:.5rem;align-items:baseline;
  padding:.6rem .7rem;height:2.3rem;
  font-size:.6rem;letter-spacing:.06em;color:var(--muted);
  white-space:nowrap;overflow:hidden;
}
.chip span b{color:var(--text);font-weight:600}

.stats{
  margin-top:2.6rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.8rem;border-top:1px solid var(--line);padding-top:2rem;
}
.stat{display:flex;flex-direction:column;gap:.4rem}
.stat strong{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.4rem,5.4vw,3.8rem);line-height:.9;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;   /* bara på tal, aldrig på brödtext */
}
.stat:last-child strong{color:var(--accent)}
.stat span{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}

/* ══ FEATURE ══════════════════════════════════════════════════════════════ */
.feature{
  max-width:1180px;margin:0 auto;
  padding:clamp(4rem,11vh,7rem) clamp(1.4rem,4vw,3.4rem) clamp(5rem,13vh,8rem);
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.feature h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3vw,2.2rem);margin:0 0 1.4rem;letter-spacing:-.015em;
}
.feature ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.feature li{
  color:var(--muted);line-height:1.6;font-size:clamp(.95rem,1.35vw,1.04rem);
  padding-left:1.1rem;position:relative;
}
.feature li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:5px;height:5px;background:var(--accent);border-radius:1px;
}
.feature li b{color:var(--text);font-weight:600}
.feature__frame{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--surface);
}
.feature__frame img{width:100%;height:100%;object-fit:cover;opacity:.62}

/* ══ REVEAL ═══════════════════════════════════════════════════════════════
   ⚠️ FAIL-OPEN. Elementen göms BARA när JS satt .js-reveal på <html>. Utan den
   spärren ger ett JS-fel en tom sida i stället för en oanimerad — fällan ligger
   loggad i designnoden. */
.js-reveal .reveal{opacity:0;transform:translateY(26px)}
.js-reveal .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.js-reveal .band__grid .reveal:nth-child(2){transition-delay:.05s}
.js-reveal .band__grid .reveal:nth-child(3){transition-delay:.1s}
.js-reveal .band__grid .reveal:nth-child(4){transition-delay:.15s}
.js-reveal .band__grid .reveal:nth-child(5){transition-delay:.2s}
.js-reveal .band__grid .reveal:nth-child(6){transition-delay:.25s}

/* ══ RESPONSIVT ═══════════════════════════════════════════════════════════ */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;align-items:end}
  .hero__meta{justify-self:start;width:min(300px,100%)}
  .band__grid{grid-template-columns:repeat(3,1fr)}
  .feature{grid-template-columns:1fr}
  .feature__frame{order:-1;max-height:240px}
}
@media (max-width:600px){
  .band__grid{grid-template-columns:repeat(2,1fr)}
  /* ⚠️ Tre tal i bredd blir oläsliga under 600 px, men 6 → 240 → 70 får inte
     brytas isär till lösa siffror — sambandet ÄR argumentet. Staplas i stället
     så ordningen består. */
  .stats{grid-template-columns:1fr;gap:1.5rem}
  .stat{flex-direction:row;align-items:baseline;gap:.9rem}
  .stat strong{font-size:2.4rem;min-width:3.2ch}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-reveal .reveal{opacity:1;transform:none;transition:none}
  .chip{transition:none}
}