/* 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}
}

/* ══ CAD — inverterad sektion ══════════════════════════════════════════════
   Sidans enda ljusa yta. Inverteringen görs genom att skriva om tokens LOKALT
   i stället för att skriva nya regler: .stats, .reveal och rubrikgraderna ärvs
   då oförändrade och sektionen kan inte glida isär från resten vid en ändring.

   ⭐ Sektionen svarar på sidans egen gränsdragning. Heron säger "Measured
   geometry — none"; här står "yes". Feature-sektionen säger att genomskärningar
   kräver en annan teknik — det här ÄR den tekniken. Ordningen är därför inte
   godtycklig: den här sektionen måste ligga SIST. */
.cad{
  --bg:#f3eee6;
  --text:#09090b;
  --muted:rgba(9,9,11,.60);
  --faint:rgba(9,9,11,.28);
  --line:rgba(9,9,11,.15);
  --surface:#e9e2d6;
  background:var(--bg);color:var(--text);
  padding:clamp(4.5rem,12vh,8rem) 0 clamp(5rem,13vh,8rem);
}
.cad__inner{
  max-width:1180px;margin:0 auto;
  padding:0 clamp(1.4rem,4vw,3.4rem);
}
.cad__eyebrow{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:#b4501b;                        /* accenten mörkad — #e86a2a på beige
                                           ger 2,6:1 och underkänns som text */
  margin:0 0 1rem;font-weight:500;
}
/* ⚠️ `.motion h2` MÅSTE stå med. Rörelse-sektionen återanvänder .cad__inner,
   .cad__eyebrow och .cad__lede men ligger i <section class="motion">, så en
   regel på enbart `.cad h2` når den ALDRIG. Uppmätt: dess rubrik låg på 24 px
   webbläsardefault mot CAD-rubrikens 43 px — den har aldrig haft egen stil.
   Det var en stor del av varför beige-delen läste svagare än resten av sidan.

   Graden höjd 2,7 -> 4,0 rem: rubrikerna ska bära sektionen, inte inleda ett
   stycke. Ligger fortfarande under heroens 6,8 rem — heron ska vinna sidan. */
.cad h2, .motion h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.1rem,5vw,4rem);line-height:1.02;letter-spacing:-.025em;
  margin:0 0 1.15rem;max-width:19ch;
}
.cad h2 em, .motion h2 em{font-style:normal;color:#b4501b}
.cad__lede{
  margin:0 0 2.4rem;color:var(--muted);max-width:54ch;
  font-size:clamp(.98rem,1.4vw,1.08rem);line-height:1.62;
}

/* Scenen. Ingen fast höjd i px — svh gör att modellen behåller sin luft på
   mobil utan att svälla på en 27-tummare. */
.cad__stage{
  position:relative;margin:0;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);overflow:hidden;
  /* +25 % på höjd (Daniel 2026-07-26): 340/62/620 → 425/77,5/775. */
  height:clamp(425px,77.5svh,775px);
}
.cad__stage canvas{display:block;width:100%;height:100%}

/* Platshållare tills modellen laddat. Ligger KVAR om WebGL saknas — sektionen
   får aldrig bli en tom ruta. */
.cad__ph{
  position:absolute;inset:0;display:grid;place-content:center;gap:.7rem;
  justify-items:center;background:var(--surface);
  transition:opacity .6s var(--ease);
}
.cad__ph.done{opacity:0;pointer-events:none}
.cad__ph p{
  margin:0;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);
}
.cad__bar{width:180px;height:2px;background:rgba(9,9,11,.12);overflow:hidden}
.cad__bar i{display:block;height:100%;width:0;background:#b4501b;transition:width .25s}

.cad__hint{
  position:absolute;left:1rem;bottom:.9rem;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  /* ⚠️ Låg opacitet på versalgemener i 0,62 rem är dubbelt straff — versaler
     saknar över- och underlängder att känna igen formen på, så kontrasten får
     bära ensam. .28 gav 2,2:1 och var i praktiken dekor. */
  color:rgba(9,9,11,.66);pointer-events:none;
}
/* Bildtext + kontroller på samma rad UNDER scenen. Låg de inne i rutan slogs de
   mot hinten om samma hörn, och på mobil hamnade de ovanpå modellen. */
.cad__figure{margin:0}
.cad__cap{
  margin:.85rem .15rem 0;display:flex;gap:1.2rem;
  justify-content:space-between;align-items:center;flex-wrap:wrap;
  font-size:.68rem;letter-spacing:.04em;color:rgba(9,9,11,.62);line-height:1.55;
}
.cad__cap > span:first-child{max-width:46ch}
.cad__btns{display:flex;gap:.5rem;flex-shrink:0}
.cad__btns button{
  font:inherit;font-size:.66rem;letter-spacing:.05em;
  padding:.5rem .8rem;cursor:pointer;color:var(--text);
  background:transparent;border:1px solid var(--line);border-radius:3px;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.cad__btns button:hover{background:rgba(9,9,11,.05);border-color:rgba(9,9,11,.34)}
.cad__btns button:focus-visible{outline:2px solid #b4501b;outline-offset:2px}
.cad__btns button[aria-pressed="true"]{
  background:#b4501b;border-color:#b4501b;color:#f3eee6;
}
.cad .stats{margin-top:2.6rem}
.cad .stat:last-child strong{color:#b4501b}

@media (max-width:600px){
  .cad__cap{flex-direction:column;align-items:flex-start;gap:.8rem}
  .cad__btns{width:100%}
  .cad__btns button{flex:1;text-align:center;padding:.6rem .4rem}
}
@media (prefers-reduced-motion:reduce){
  .cad__ph{transition:none}
}

/* Zoom I bilden, ytterst i kanterna. De ligger utanför modellens yta i alla
   vyer och skymmer därför aldrig det de styr.

   Vilande tills man rör rutan: kompositionen ska vara ren när man bara tittar,
   men greppet måste finnas när man vill använda det. På touch finns ingen
   hover — där ligger de framme hela tiden, annars vore de omöjliga att hitta. */
.cad__zoom{
  position:absolute;top:50%;transform:translateY(-50%);
  width:2.2rem;height:2.2rem;display:grid;place-items:center;
  font:inherit;font-size:1rem;line-height:1;cursor:pointer;
  color:var(--text);background:rgba(243,238,230,.72);
  border:1px solid var(--line);border-radius:50%;
  backdrop-filter:blur(6px);
  opacity:0;transition:opacity .25s var(--ease),background .18s var(--ease);
}
.cad__zoom--ut{left:.85rem}
.cad__zoom--in{right:.85rem}
.cad__stage:hover .cad__zoom,
.cad__stage:focus-within .cad__zoom{opacity:1}
.cad__zoom:hover{background:#f3eee6}
.cad__zoom:focus-visible{opacity:1;outline:2px solid #b4501b;outline-offset:2px}
@media (hover:none){
  .cad__zoom{opacity:1}
}

/* ── RÖRELSE ────────────────────────────────────────────────────────────────
   Fortsättning på CAD-blocket, inte ett nytt. Samma beige och samma tokens,
   ingen bakgrundsväxling emellan — hårlinjen upptill är hela avgränsningen.
   Toppadding avsiktligt mindre än .cad så de två läser som ETT stycke i två
   delar: först formen som går att vrida, sedan samma form i rörelse. */
.motion{
  --bg:#f3eee6;
  --text:#09090b;
  --muted:rgba(9,9,11,.60);
  --faint:rgba(9,9,11,.28);
  --line:rgba(9,9,11,.15);
  --surface:#e9e2d6;
  background:var(--bg);color:var(--text);
  padding:clamp(3rem,7vh,4.6rem) 0 clamp(5rem,13vh,8rem);
}
.motion .cad__inner{position:relative}
.motion .cad__inner::before{
  content:"";position:absolute;left:clamp(1.4rem,4vw,3.4rem);
  right:clamp(1.4rem,4vw,3.4rem);top:calc(-1 * clamp(1.5rem,3.5vh,2.3rem));
  height:1px;background:var(--line);
}
.motion__figure{margin:0}

/* 16:9 låst via aspect-ratio — videon är 1280x720 och ska ALDRIG beskäras
   eller brevlådas. Ingen fast höjd i px. */
.motion__stage{
  position:relative;margin:0;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);overflow:hidden;
  aspect-ratio:16/9;
}
.motion__video{
  display:block;width:100%;height:100%;object-fit:cover;
}
/* Platshållaren ligger KVAR tills videon bevisligen spelar. Saknas filen står
   en läsbar rad i stället för en tom beige ruta. */
.motion__ph{
  position:absolute;inset:0;display:grid;place-content:center;
  background:var(--surface);transition:opacity .6s var(--ease);
}
.motion__ph.done{opacity:0;pointer-events:none}
.motion__ph p{
  margin:0;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);
}
.motion .stats{margin-top:2.6rem}
.motion .stat:last-child strong{color:#b4501b}
.motion .cad__cap > span:first-child{max-width:52ch}

/* prefers-reduced-motion hanteras i JS: videon laddas och visar sin FÖRSTA
   bildruta, men startar aldrig. Att dölja den helt lämnade "Loading motion"
   kvar för alltid — sämre än ingen video. */