/* Droppets rum — GRAMMATIKEN.
   ============================================================================
   Den här filen är gemensam för ALLA drop och innehåller bara strukturen:
   hjältens slöja, följesedeln, villkoren, räknaren, mätaren, knapparna,
   sidhuvudets undantag. Ingen färg och inget typsnitt bestäms här.

   Stämman ligger i sajt/dropp-<skin>.css, en fil per släpp. Ett drop byter
   TON, inte grammatik: skylten heter 'Skylt' i varje drop, brödtexten
   'Dropptext' och avläsningarna 'Droppdata', oavsett vilka snitt som ligger
   bakom namnen. Därför behöver den här filen aldrig veta vilket drop den klär,
   och drop 03 är en katalog plus en palett.

   Uppdelningen kom till när Genesis blev IN DA CLUB. Allt låg i EN fil och
   varenda regel var skriven mot betong; att byta värld hade betytt att skriva
   om filen, och då blir det aldrig fler än ett drop.

   Allt är omslutet av body.sida-dropp. Sajtens tokens pekas om i skinnet i
   stället för att komponenterna dubbleras: .btn, .wrap, .sek och .etikett
   ärver droppets palett automatiskt.

   Filen laddas bara på droppsidor, tillsammans med släppets typsnitt. Att
   lägga dem på alla sexton sidor för ett släpp som syns på en vore fel. */

.sida-dropp{
  /* Sajtens tokens pekas om till droppets egna. Värdena kommer från skinnet;
     kopplingen är densamma i alla drop. */
  --papper:var(--form); --papper-2:var(--gjut); --yta:var(--gjut);
  --natt:var(--form); --natt-2:var(--gjut);
  --ink:var(--kalk); --ink-2:var(--damm); --ink-3:var(--damm-2);
  --ljus:var(--kalk); --ljus-2:var(--damm); --ljus-3:var(--damm-2);
  --black:var(--form);
  --brons:var(--metall); --brons-hi:var(--kalk); --guld:var(--metall);
  --pa-brons:var(--form);

  /* SEKTIONSLUFTEN. Droppet körde husets startsideluft rakt av — 151 px upp
     och 151 ner på varje kapitel, alltså 302 px mellan följesedeln och
     villkoren. Ett första pass drog dem till 115/67 och det räckte inte: en
     sida med sex kapitel som alla är upplysningar tål inte startsidans
     andrum, för där finns fem påståenden som var och ett ska väga.
     Talen är nu satta mot vad sidan ska KÄNNAS som och inte mot en procent av
     det gamla: 56 px vid 1440 och 88 mellan kapitlen. Det är ett drop, inte
     ett uppslagsverk — rummet ska vara fullt, inte luftigt.
        före     första passet    nu
        151      115              46   sektionsluft
         83       67              30   tät sektionsluft
        234      182              76   mellan kapitlen  */
  --sek:clamp(30px,3.2vw,46px);
  --sek-tyst:clamp(40px,4.3vw,64px);
  --sek-tat:clamp(20px,2.1vw,30px);

  /* Husets mono pekas om till droppets. Utan raden hänger stil.css
     datagrammatik (.dat, .sedel, .stegreg, .konstr) kvar i 'Data', och den
     familjen laddas inte på droppsidor längre — ett släpp betalar för sin egen
     mono, inte för husets också. Med raden faller alla komponenter tillbaka i
     kvällens snitt av sig själva, vilket är hela poängen med att skriva om
     tokens i stället för att dubblera komponenterna. */
  --mono:var(--data);
  --serif:var(--skylt);

  /* Ljuset ligger på KROPPEN här, inte på sektionerna. Droppsidan är mörk hela
     vägen och sektionerna är genomskinliga, så en radial på .sek-mork når
     aldrig fram — mätt tvärs över sidan gav den 14,5 i båda kanterna, alltså
     plan färg. Samma förankring som huset: fixed räknas mot skärmen, så ljuset
     ligger stilla medan sidan rullar förbi.
     Röken ligger mellan auran och ljuset som ett ADDITIVT lager, inte som en
     bild: plåten är svart med ljusa slingor, och med screen bidrar det svarta
     ingenting alls medan slingorna lägger till ljus. Ingen opacitet, ingen
     extra ruta i markupen — atmosfär i ytan, inte ett motiv man tittar på. */
  background-image:var(--aura-natt),url(/img/rok.webp),var(--ljus-natt);
  background-size:auto,cover,auto;
  background-blend-mode:normal,screen,normal;
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-attachment:fixed,fixed,fixed;
  color:var(--kalk);
  font-family:'Dropptext',system-ui,sans-serif;
  color-scheme:dark;
}

/* DEN LYFTA YTAN.
   Huset växlar papper och natt, och det är den växlingen som gör att en sida
   läser som sektioner i stället för som en lång rullning. Droppsidan hade
   ingen växling alls: allt låg på samma mörka kropp, och då blir bara fotona
   avbrott medan textblocken flyter ihop.

   .sek-mork pekar i det här rummet om --natt till --form, alltså exakt kroppens
   färg — regeln gjorde ingenting. Nu ligger den på --gjut i stället, som är
   rummet en aning lyft, med hårstreck i över- och underkant.

   Det är EN lyft yta per drop, inte varannan. Sidan har tre textsektioner och
   varannan-växling hade gett två lyfta som möts över en enda bas; en lyft yta
   mitt i är i stället en tydlig mitt. Följesedeln får den, för den är ett
   dokument och ska ligga på något — papper på ett bord. */
.sida-dropp .sek-mork{
  background:var(--gjut);
  border-block:1px solid var(--linje-svag);
}

/* Serifen finns inte i det här rummet. Att låta en enda Bodoni-rubrik stå kvar
   mitt bland skyltarna läser som ett misstag, inte som en brygga. */
.sida-dropp .d,
.sida-dropp .jatte{
  font-family:var(--skylt);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.004em;
}
.sida-dropp .jatte{font-size:clamp(56px,14vw,180px);line-height:.84}
.sida-dropp .d.stor{font-size:clamp(26px,4vw,51px);line-height:.9}
.sida-dropp h3.d{font-size:clamp(18px,1.8vw,24px);line-height:1.06}

/* Etiketten och allt annat som är DATA sätts i mono. Det är följesedelns
   logik: ett batchnummer är inte en rubrik, det är en avläsning. */
.sida-dropp .etikett{
  font-family:var(--data);font-weight:400;
  font-size:11px;letter-spacing:.16em;color:var(--metall);
}
.sida-dropp .lede{color:var(--damm)}
.sida-dropp .lede.stor{color:var(--kalk)}
.sida-dropp .tal{font-family:var(--data)}

/* ------------------------------------------------------------ kapitelmärket */
/* Linjalen som säger var i berättelsen läsaren står. Ett hårstreck tvärs hela
   satsytan, löpnumret i vänstermarginalen, kapitlets namn efter det och totalen
   i högerkanten.

   VARFÖR ETT BRÅK OCH INTE BARA EN SIFFRA. Sidan har redan två numreringar:
   släppets (#01) och villkorens (01–04). En tredje naken tvåsiffring hade lagt
   sig i samma register som dem. 04/06 kan inte förväxlas med en post i en lista
   och säger dessutom något de inte gör — hur mycket som är kvar.

   Hårstrecket är satt i kalk och inte i --linje. Märket står både på plåtar och
   över fotografier, och --linje (#2A323D) försvinner mot ett foto.

   Märket ersätter etiketten där det står. Två etikettrader ovanför samma rubrik
   är en för mycket. */
.kapitel{
  display:flex;align-items:baseline;gap:clamp(14px,2.2vw,26px);
  margin:0 0 clamp(16px,1.9vw,28px);padding-top:11px;
  border-top:1px solid color-mix(in srgb, var(--kalk) 24%, transparent);
  font-family:var(--data);font-weight:400;font-size:12px;line-height:1;
  /* Linjalen ser LIKADAN ut i varje kapitel, även i remsan där texten under
     den är högerställd. En spine som byter uppställning är ingen spine. */
  text-align:left;
}
/* Måtten som gäller brödtext gäller inte linjalen. I remsan är märket ett <p>
   och .band p har max-width:46ch — hårstrecket slutade därför vid 430 px medan
   det gick tvärs satsytan i alla andra kapitel. En linjal som är olika lång
   från kapitel till kapitel mäter ingenting. */
.band .kapitel,.klubbremsa .kapitel{max-width:none}
.kapitel b{
  font-weight:400;font-size:12px;letter-spacing:.12em;color:var(--metall);
  flex:0 0 auto;
}
.kapitel span{
  flex:1 1 auto;min-width:0;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--kalk);
}
/* Totalen sattes i --damm-2, alltså placeholderns ton, och mätte 3,32 mot
   kvällen. Den är inte en placeholder: den säger hur mycket som är kvar, och
   ett bråk som inte går att läsa mäter ingenting. --damm, uppmätt 5,18. */
.kapitel i{
  font-style:normal;font-size:11px;letter-spacing:.12em;color:var(--damm);
  flex:0 0 auto;
}
/* Över ett fotografi är plåten mörkare och strecket får mer ljus. */
.band .kapitel,.klubbremsa .kapitel{
  border-top-color:color-mix(in srgb, var(--kalk) 34%, transparent);
}

/* ------------------------------------------------------------ hjälten */
/* Hjälten kan bära IDÉN eller VARAN, och det är ett beslut per släpp.
   Genesis bar idén: en gjutning som härdar, medan pjäsen fick hela ytan längre
   ner — en hjälte som redan visar varan har ingenting kvar att ge. IN DA CLUB
   bär varan, för i ett drop är varan hela erbjudandet och man kommer för
   armbandet, inte för dörren. Båda reglerna finns kvar i grammatiken.

   BILD UTAN TEXT. Bär hjälten varan gör den det ensam: ingen rubrik tryckt
   över, ingen slöja som ska göra text läsbar. Slöjan tar då bara kanterna, så
   att sidhuvudet och skarven nedåt håller ihop, och släpper mitten helt.

   Slöjan nedan lutar över spalten där texten står och släpper i högra tredjedelen.
   Ett jämnt lager över hela bilden släcker motivet, och motivet är det enda
   som gör att ytan läser som material i stället för som dimma — det var precis
   felet på första försöket, som lade .62 rakt över alltihop.

   Kulören kommer ur --slojan i skinnet, så samma slöja fungerar över betong
   och över krom. Regeln skriver över husets hjälteslöja helt, alltså måste
   även vinjetten upprepas — annars är droppet den enda sidan utan djup i
   hörnen. */
.dropp-hjalte .hjalte-bild::after{
  background:
    linear-gradient(96deg,rgb(var(--slojan)/.9) 0%,rgb(var(--slojan)/.58) 38%,
      rgb(var(--slojan)/.1) 72%,rgb(var(--slojan)/0) 100%),
    linear-gradient(0deg,rgb(var(--slojan)/.66) 0%,rgb(var(--slojan)/0) 44%),
    linear-gradient(180deg,rgb(var(--slojan)/.72) 0,rgb(var(--slojan)/.32) 62px,
      rgb(var(--slojan)/0) 120px),
    radial-gradient(120% 100% at 54% 44%,rgb(var(--slojan)/0) 46%,rgb(var(--slojan)/.44));
}
/* Bild utan text: slöjan tar bara över- och underkanten. Den lutande slöjan
   ovan finns för att göra rubriker läsbara, och utan rubrik släcker den bara
   motivet i onödan. */
/* Droppets hjälte är LÄGRE än husets. Husets hjälte tar 88svh för att den ska
   äga skärmen; droppets bär en bild och två rader, och det som kommer efter —
   dörrplåten — ska hinna skymta i underkanten. En hjälte som fyller skärmen
   exakt döljer att sidan fortsätter. */
.dropp-hjalte{min-height:clamp(420px,66svh,720px)}

/* ------------------------------------------------------------- skylten */
/* Hjälten som SKYLT. 66svh gav 594 px på en skärm på 900: en bild, ett namn
   och en rad, och nästa sektion redan igång i underkanten. Ingenting fick en
   skärm för sig själv, och sidans öppning läste därför som ett kort och inte
   som en entré.
   92svh och inte 100: plåtens överkant ska skymta, för en hjälte som fyller
   skärmen exakt döljer att sidan fortsätter. Det var det riktiga i det gamla
   beslutet och det gäller fortfarande — felet var höjden, inte principen. */
.dropp-hjalte-skylt{min-height:clamp(440px,72svh,800px)}
.dropp-hjalte-skylt .hjalte-in{padding-block:clamp(40px,6vh,72px)}
.dropp-hjalte-skylt .etikett{margin:0 0 clamp(14px,2vh,26px)}
/* Namnet sitter PÅ hårstrecket. Versaler utan underhäng, alltså ska
   kägelns luft under baslinjen bort — annars svävar skylten över sin egen
   linje och läser som en rubrik med en regel under. */
.dropp-hjalte-skylt h1{max-width:none;margin:0 0 clamp(16px,2.4vh,30px)}
/* Foten: hårstreck tvärs hela satsytan, mono-raden delad mot kanterna. Samma
   avläsningsgrammatik som följesedeln och villkoren nedanför sidan. */
/* Hårstrecket är ett eget element och inte en border, för det RITAS ut från
   vänster vid laddning — samma rörelse som måttlinjen på husets sidor. En
   border går inte att dra; en skalad linjal gör det. Utan skript står den
   still och full, alltså är sidan komplett utan rörelsen. */
.dropp-hjalte-fot{
  position:relative;
  display:flex;justify-content:space-between;align-items:baseline;
  gap:12px 32px;flex-wrap:wrap;
  padding-top:clamp(12px,1.8vh,20px);
}
.dropp-hjalte-fot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--linje);
  transform:scaleX(var(--dra,1));transform-origin:0 50%;
}
.dropp-hjalte-fot .dropp-under{margin:0;font-size:clamp(11px,1.15vw,14px)}
.dropp-hjalte-fot .dropp-under:last-child{color:var(--damm)}
/* På telefon står skylten i två rader, och då ska den fylla spalten. Måttet
   sitter på hjälten och inte på .jatte: samma klass bär dörrvaktens skylt,
   som är centrerad och redan stor, och den ska inte växa med. */
@media (max-width:640px){
  .dropp-hjalte-skylt h1{font-size:clamp(52px,17vw,86px)}
  .dropp-hjalte-fot{gap:6px 18px}
  .dropp-hjalte-fot .dropp-under{font-size:10px;letter-spacing:.04em}
}

.dropp-hjalte-bild-ensam{min-height:clamp(460px,78svh,860px)}
.dropp-hjalte-bild-ensam .hjalte-bild::after{
  background:
    linear-gradient(180deg,rgb(var(--slojan)/.82) 0,rgb(var(--slojan)/.28) 90px,
      rgb(var(--slojan)/0) 190px),
    linear-gradient(0deg,rgb(var(--slojan)/.72) 0,rgb(var(--slojan)/0) 26%),
    radial-gradient(124% 104% at 50% 44%,rgb(var(--slojan)/0) 44%,rgb(var(--slojan)/.5));
}
/* Platshållarmärkningen sitter på SEKTIONEN och inte på bildrutan.
   .dropp-provisorisk sätter position:relative, och dropp.css laddas efter
   stil.css — lagd på .hjalte-bild skrev den över dess position:absolute, bilden
   föll ur sitt lager och hjälten tappade hela sin höjd. En regel som bara ska
   bära ett märke ska inte kunna välta en layout. */
.dropp-hjalte-bild-ensam.dropp-provisorisk::after{
  left:clamp(22px,4vw,60px);bottom:24px;z-index:2;
}

/* Skylten är kondenserad och versal, alltså mycket smalare per tecken än
   Bodonin måtten är satta för. 11ch respektive 21ch ger sex rader här och
   läser som skrik; måtten räknas om i det här rummet. */
.sida-dropp .hjalte h1{max-width:16ch}
.sida-dropp .manifest{max-width:30ch}
.dropp-skylt{margin:0}
.dropp-under{
  font-family:var(--data);color:var(--metall);
  font-size:clamp(14px,2.3vw,26px);letter-spacing:.05em;
  margin:10px 0 0;
}
/* Gjutskarven: en enda rak linje tvärs över. Det är den detaljen som gör att
   ytan läser som gjuten i form och inte som en slumptextur. */
.dropp-skarv{
  height:1px;background:var(--linje);border:0;
  margin:clamp(26px,4vw,44px) 0 clamp(22px,3vw,34px);
  max-width:560px;
}

/* --------------------------------------------------------- dörrplåten */
/* Släppets identitet, läge och tid i ett fullbrett block under hjälten.
   Allt det här låg tidigare tryckt över hjältefotot i en ruta på 560 px. Två
   fel i ett: en bild som ska bära ensam ska inte ha en rubrik över sig, och en
   dörr ska ha rummets bredd, inte en tredjedel av den.
   Plåten ligger på den LYFTA ytan. Utan den läste den som ett glapp mellan
   hjälten och första remsan i stället för som ett instrument. */
.dropp-plat{
  position:relative;
  background:var(--gjut);
  border-block:1px solid var(--linje-svag);
  overflow:hidden;
}
/* GRUNDEN: rummets ljus bakom dörren, och den står stilla.
   Här låg en fondfilm — pjäsen i rörelse bakom plåtens innehåll. Den är struken
   och skälen står i sajt.py vid plat_grund. Kvar är samma idé i en stillbild,
   och den fungerar av exakt samma skäl som klubbplåtarna:

   Skiktet ligger under satsytan med plåtens egen färg bakom sig och blandas
   med SCREEN. Bilden är nästan helsvart med en enda ljusbåge, och i screen
   bidrar svart exakt noll — plåten lämnas orörd överallt utom där bågen går.
   Det finns alltså ingen bildruta att se, bara ljus som tar slut.

   Skiktet täcker hela plåten men bilden är förskjuten så att bågen kommer in
   från HÖGER. Text, fält och knapp ligger till vänster; ljuset får den spalt
   de inte använder. Masken tonar bort de sista trettio procenten åt vänster så
   att ljuset aldrig lägger sig bakom en rad man ska läsa. */
.dropp-plat-grund{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,
    rgba(0,0,0,.05) 26%,rgba(0,0,0,.3) 48%,rgba(0,0,0,.8) 74%,#000 92%);
  mask-image:linear-gradient(90deg,transparent 0%,
    rgba(0,0,0,.05) 26%,rgba(0,0,0,.3) 48%,rgba(0,0,0,.8) 74%,#000 92%);
}
.dropp-plat-grund img{
  width:100%;height:100%;object-fit:cover;object-position:56% 50%;
  display:block;opacity:.9;mix-blend-mode:screen;
}
/* Bara kanterna, så att bågen inte skär av mot plåtens över- och underkant
   som en klippt bild. */
.dropp-plat-grund::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--gjut) 62%, transparent) 0%,
    transparent 24%, transparent 76%,
    color-mix(in srgb, var(--gjut) 62%, transparent) 100%);
}
.dropp-plat .wrap{position:relative;z-index:2}
/* Staplad plåt: texten går hela bredden, alltså finns ingen tom spalt kvar att
   lägga ljuset i. Bågen flyttas då NER under satsytan i stället för åt sidan —
   masken vänder från vågrätt till lodrät och bilden siktas på bågens nedre
   ände. Skiktet släcks inte: en stillbild kostar ingenting att inte spela, och
   utan den är plåten en plan färgruta på telefon. */
@media (max-width:760px){
  .dropp-plat-grund{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,
      rgba(0,0,0,.06) 34%,rgba(0,0,0,.44) 62%,#000 88%);
    mask-image:linear-gradient(180deg,transparent 0%,
      rgba(0,0,0,.06) 34%,rgba(0,0,0,.44) 62%,#000 88%);
  }
  .dropp-plat-grund img{object-position:64% 46%;opacity:.72}
}
/* Rubriken och ingressen till vänster, nedräkningen till höger, på samma
   baslinje. */
.dropp-plat-topp{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:18px 48px;flex-wrap:wrap;
}
.dropp-dorr-txt{flex:1 1 460px;min-width:0}
.dropp-dorr-txt h2{max-width:14ch;margin:0}
.dropp-ingress{max-width:44ch;margin-top:clamp(12px,1.4vw,18px)}

.dropp-klocka{
  margin:0;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:14px;
}
.dropp-klocka b{
  font-weight:400;font-size:clamp(22px,2.6vw,34px);color:var(--kalk);
  line-height:1;letter-spacing:.02em;
}
.dropp-klocka span{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--damm);
}

/* Produktfilmen. Stående klipp (4:5) mitt i plåten — en pjäs i rörelse, inte
   en biografduk. Smalare än satsytan med flit: filmen är ett föremål i rummet,
   och rummets mörker ska synas runt den. Ramen är samma svaga linje som
   plåtens övriga ytor — ingen egen inramning som gör den till "spelare". */
.dropp-film{
  margin:clamp(28px,4vw,52px) auto;max-width:min(460px,86vw);
}
.dropp-film video{
  display:block;width:100%;height:auto;
  border:1px solid var(--linje-svag);
}

/* UPPSLAGET. Två rutor i kapitel 02: samma pjäs, två ljus.
   ==========================================================================
   FÖRSTA VERSIONEN VAR 7/5 MED DEN MINDRE NEDSÄNKT och den föll på Filips
   dom. Lärdomen är värd att skriva ner: en asymmetri som inte går att läsa
   som ett system läser inte som komposition utan som slarv. Förskjutningen
   hade en avsikt i huvudet på den som satte den och ingen på skärmen.

   SYSTEMET ÄR NU SYNLIGT. Två exakt lika rutor, exakt halva satsytan var, och
   luften emellan är HUSETS EGNA SPALTLUFT — clamp(24px,3vw,56px), samma tal
   som .villkor, .tre-kol och .pass-fot använder på varje annan sida. Ett mått
   som är räknat mot fönstret i stället hade sett systematiskt ut på 1440 och
   sprungit iväg på 1920, där satsytan står still medan marginalen växer: två
   bilder som krymper och glider isär när skärmen blir större är inget system,
   det är en bieffekt. Uppmätt.

   BILDERNA ÄR BESKURNA MOT VARANDRA, inte bara mot samma ramformat. Stenraden
   korsar båda rutorna på 62 procent av höjden och stenarna mäter lika, vilket
   krävde olika utsnitt ur de två källorna — se idc-foto.py. Det är det som
   gör paret läsbart: allt är sig likt utom ljuset och ytan, alltså är det
   ljuset och ytan bilderna handlar om.

   Rutorna är INNESLUTNA och går aldrig kant i kant. Källorna är 1024² och
   skalas här ner; samma filer i ett utfall hade blåsts upp och tappat precis
   den skärpa som är hela skälet att de finns på sidan.

   Ingen ram och ingen skugga. Bilderna tonar mot svart i kanterna av sig
   själva, alltså har de redan sin egen avgränsning mot rummet. */
.dropp-uppslag{
  margin-top:clamp(20px,2.4vw,36px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,56px);align-items:start;
}
.dropp-uppslag figure{margin:0}
/* Höjden kommer ur bilden och inte ur en regel: filerna är exakt lika stora,
   alltså står över- och underkant i liv av sig själva. Måttet står ändå här
   som ett kontrakt — byts en fil mot ett annat format ska raden inte kunna
   glida isär utan att någon märker det. */
.dropp-uppslag img{display:block;width:100%;height:auto;aspect-ratio:900/600;
  object-fit:cover}
@media (max-width:700px){
  /* Staplade, men samma system: samma bredd, samma format, samma kant och
     samma luft emellan som mellan spalter på dator. Ingen av rutorna byter
     mått när de hamnar under varandra — då vore det två olika bilder igen. */
  .dropp-uppslag{grid-template-columns:1fr}
}

/* KVÄLLENS PLATTA. Samma språk som uppslaget i kapitel 02.
   ==========================================================================
   Här stod en delad plåt där bilden ägde 55 procent av FÖNSTRET och gick ut i
   kanten. Tre fel, alla uppmätta:

     1  Vid 1510 blev spalten 830 px och vid 1920 1056 — ur en källa på 1024.
        Bilden var alltså grötig på precis de skärmar där resten av sidan är
        skarpast. En bild får aldrig visas bredare än sina källpixlar.
     2  Spalten låg utanför satsytan och började ovanför kapitelmärket, med ett
        dött mörkerband över sig. Den läste som en bild som hörde till tabellen
        i kapitlet innan.
     3  På telefon hamnade den föräldralös mellan följesedeln och rubriken.

   Lösningen är inte en ny uppställning utan DEN SOM REDAN ÄR GODKÄND. Plattan
   sitter innesluten i satsytan, med knivskarp kant, i uppslagets format och
   uppslagets spaltluft. Texten tar ena halvan, plattan den andra, överkanterna
   i liv.

   TAKET ÄR INBYGGT I GEOMETRIN. Satsytan slutar växa vid 1320, alltså är
   halvan 638 px vid 1440 och 632 vid 1920 — plattan kan inte springa ifrån
   sina 1024 källpixlar hur bred skärmen än blir. max-width står ändå kvar som
   kontrakt: byts filen mot en mindre ska taket följa med i samma rörelse. */
.dropp-kvall{
  margin-top:clamp(18px,2.2vw,32px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,56px);align-items:stretch;
}
.dropp-kvall figure{margin:0;max-width:900px}
.dropp-kvall img{display:block;width:100%;height:auto;aspect-ratio:900/600;
  object-fit:cover}
/* TEXTSPALTEN SPÄNNER MOT BILDENS BÅDA KANTER. Rubriken är två rader och
   ingressen tre; bilden är 511 px hög vid 1440. Toppställd text lämnade
   tvåhundra pixlar tomma under sig, och en spalt som tar slut halvvägs läser
   som att något saknas.
   Nu står rubriken vid överkanten och ingressen vid underkanten, alltså har
   raden TVÅ linjeringar i stället för en: bildens topp mot rubrikens, bildens
   fot mot ingressens sista rad. Luften hamnar mellan rubrik och ingress, där
   den är typografi. Det är samma yta som förut — skillnaden är att den nu
   ligger på ett ställe där den betyder något. */
.dropp-kvall-txt{display:flex;flex-direction:column;justify-content:space-between}
.dropp-kvall h2{margin:0;max-width:13ch}
.dropp-kvall .lede{margin-top:clamp(18px,2.2vw,28px);max-width:38ch}
@media (max-width:700px){
  /* Staplat finns ingen bildkant att spänna emot, alltså faller texten
     tillbaka till vanligt flöde. Ett space-between i en spalt som är exakt
     lika hög som sitt innehåll gör ingenting — men regeln ska ändå stå, för
     den dagen någon lägger till en rad. */
  .dropp-kvall-txt{display:block}
  /* Staplade i märkningens ordning: orden först, plattan efter dem. Samma
     brytpunkt och samma sidoluft som uppslaget, alltså ligger sidans två
     inneslutna kapitel på samma kant hela vägen ner. */
  .dropp-kvall{grid-template-columns:1fr;gap:clamp(24px,5vw,36px)}
}

/* Foten hänger under topprutan i samma satsyta. Den låg tidigare i en egen
   .wrap med en filmplats emellan; nu är kapitlet ett block och luften måste
   sättas här. Ett hårstreck skiljer beskedet från frågan: allt ovanför är vad
   som gäller, allt nedanför är vad man gör. */
/* BESKEDET PÅ EN RAD, FRÅGAN PÅ NÄSTA.
   Foten var en enda flexrad med fyra saker i: läget, väntraden, formulärets
   två fält och knappen. Fälten bröt ner under de andra och knappen hamnade
   högerställd mitt under raden, alltså läste uppmaningen som en fotnot till
   en statusrad. Nu är det ett rutnät: läget till vänster och priset till höger
   på rad ett, formuläret ensamt på rad två. Sidans enda fråga får en egen rad. */
.dropp-plat-fot{
  display:grid;gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(18px,2.2vw,30px);padding-top:clamp(16px,2vw,26px);
  border-top:1px solid var(--linje);
}
@media (min-width:820px){
  .dropp-plat-fot{grid-template-columns:minmax(0,1fr) auto;align-items:baseline}
  .dropp-plat-fot > .lista-form,
  .dropp-plat-fot > .dropp-nyckellage,
  .dropp-plat-fot > .btn{grid-column:1/-1;justify-self:start}
  .dropp-plat-fot .dropp-raknare{justify-self:end;text-align:right}
}
/* Formuläret är två fält och en knapp, inte en satsyta. Utan mått sträcker det
   sig över hela plåten och fälten blir 400 px breda för en e-postadress. */
.dropp-plat-fot .lista-form{width:min(100%,660px)}
/* flex:0 0 auto gav lägesraden max-content som bredd, och lägestexten är en
   hel mening. På telefon sköt den ut ur plåten: innan fonden lades in gav det
   sidledes rullning, och när fonden tog med sig overflow:hidden blev samma fel
   i stället en mening som kapades mitt i ett ord. Raden ska krympa och bryta
   som all annan text — min-width:0 är det som tillåter det inuti flex. */
.dropp-lage{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0;
  flex:0 1 auto;min-width:0;
}
.dropp-lage span{min-width:0}
.dropp-lage b{
  font-family:var(--skylt);font-weight:400;text-transform:uppercase;
  font-size:clamp(17px,1.9vw,22px);letter-spacing:.02em;color:var(--kalk);
}
.dropp-lage span{
  font-family:var(--data);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--damm);
}
/* VÄNTRADEN ÄR STRUKEN. Den stod i stället för avläsningarna så länge
   ingenting var satt, för tre streck i rad läser som trasigt. Avläsningarna är
   en enda nu — priset — och ett ensamt streck under etiketten PRIS är husets
   egen grammatik för ett värde som inte är satt. Meningen "Tid och pris sätts
   innan dörren öppnar" sa dessutom samma sak som lägestexten två centimeter
   till vänster, i samma versala mono. */

/* Här låg rummet: en remsa med svepande ljus, och sist en filmad kö. Allt
   togs bort när Filip landade i att platsen ska bära en PRODUKTFILM i stället.
   Historiken finns i git; det som är värt att ta med sig står i sajt.py vid
   platshållaren. */

/* ------------------------------------------------------------ räknaren */
.dropp-raknare{
  display:flex;flex-wrap:wrap;gap:0;
  border:1px solid var(--linje);max-width:560px;
  margin-top:clamp(24px,3vw,36px);
}
.dropp-raknare div{
  flex:1 1 120px;padding:16px 18px;
  border-right:1px solid var(--linje);
}
.dropp-raknare div:last-child{border-right:0}
.dropp-raknare b{
  display:block;font-family:var(--data);font-weight:400;
  font-size:clamp(20px,2.6vw,30px);color:var(--kalk);line-height:1;
}
.dropp-raknare span{
  display:block;margin-top:8px;font-family:var(--data);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--damm);
}
/* Ett värde som inte är satt ska SE ut som att det inte är satt. Ett streck
   där priset ska stå är ärligare än en siffra vi hittat på, och omöjligt att
   glömma kvar när sidan går live. */
.dropp-raknare b.osatt{color:var(--damm)}

/* Priset i dörrplåtens fot. Ingen ram — foten är redan en rad, och en ruta
   inuti en rad läser som att den hamnat där av misstag.
   Här stod först öppning och stängning också. De var dels en dubblering av
   nedräkningen högre upp, dels skrevs de ut som råa tidsstämplar mitt i raden:
   "2026-08-23T00:59:48+00:00". Tiderna är nedräkningens jobb. */
.dropp-plat-fot .dropp-raknare{border:0;max-width:none;margin:0;flex:0 0 auto}
.dropp-plat-fot .dropp-raknare div{padding:0;border-right:0;flex:0 0 auto}
.dropp-plat-fot .dropp-raknare b{font-size:clamp(17px,1.9vw,22px)}

/* ------------------------------------------------------------ pjäsblocket */
/* RUBRIK MOT TEXT. Blocket beskrivs i sajt.py som två spalter — påståendet
   till vänster, berättelsen till höger — och det var precis vad det INTE var:
   klasserna .dropp-huvud, .dropp-huvud-txt och .dropp-par-slut satt i
   märkningen utan en enda regel bakom sig. Blocket föll därför till vanligt
   blockflöde, hela högra halvan av satsytan stod tom, och måttlinjen låg dikt
   an mot länken under sig utan luft emellan.

   Uppställningen är 5/7 och inte 6/6. En jämn delning läser som ett rutnät;
   en ojämn läser som en satsyta med marginal. Rubriken sitter i den smala
   spalten, alltså i marginalen, och texten i den breda — samma grepp som
   villkoren använder längre ner. */
/* 7/5 OCH INTE 5/7. Uppställningen var omvänd så länge blocket bar två stycken
   brödtext; nu ligger första stycket i remsan och kvar är ett enda. Med
   rubriken i den smala spalten bröt "DET ÄR INTE DU SOM SKA BERÄTTA DET." på
   fem rader i skyltsnittet medan textspalten stod halvtom bredvid — mätt, inte
   uppskattat. Rubriken tar den breda spalten och bryter på tre rader, texten
   den smala och läser som en marginalanteckning, vilket är vad ett ensamt
   stycke är. Delningen är fortfarande ojämn, alltså fortfarande satsyta och
   inte rutnät. */
.dropp-huvud{display:grid;gap:clamp(14px,2vw,22px)}
@media (min-width:900px){
  .dropp-huvud{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:clamp(32px,5vw,84px);
  }
}
.dropp-huvud-txt > p+p{margin-top:16px}
/* Måttlinjen är en avläsning och länken en handling. De hörde inte ihop och
   låg tjugotre pixlar isär, alltså som en enda klump. */
.dropp-huvud-txt .matt{margin:clamp(18px,2.2vw,28px) 0 0}
.dropp-par-slut{margin:clamp(16px,1.8vw,24px) 0 0}

/* PLATTAN ÄR STRUKEN. En ruta med texten LISTA IDC-01 stod ovanför följesedeln,
   och tabellens första rad under den lyder "LISTA · IDC-01". Två centimeter
   mellan ett värde och samma värde igen läser inte som eftertryck, det läser
   som att någon glömt ta bort det ena. */

/* ------------------------------------------------------- följesedelns rum */
/* Kapitel 03 är sidans paus: ett dokument, hela satsytan, ingenting annat i
   sektionen. Ytan är LYFT av samma skäl som .sek-mork ovan — en blankett ska
   ligga på något, som ett papper på ett bord — men den får sin egen klass i
   stället för att låna .sek-mork, eftersom den också är sidans enda tonskifte
   mellan två textkapitel. */
.dropp-sedelsek{
  background:var(--gjut);
  border-block:1px solid var(--linje-svag);
}

/* FÖLJESEDELNS RAD. Tabellen till vänster, noten i spalten bredvid.
   ==========================================================================
   Blanketten låg tvärs hela satsytan med noten under sig, och båda felen syntes
   på en gång: etikettspalten var satt till 36 % av 1320 px, alltså 475 px åt
   ordet LISTA, och värdena började först på fyra tiondelar av bredden med
   ingenting alls till höger om dem. Kapitlet var en tabell med en tom halva och
   en fotnot som tryckte ner sidan ytterligare hundra pixlar.

   Noten är inte en fotnot till tabellen — den säger vad blanketten ÄR — och
   hör därför bredvid den, inte under. Samma 7/5 och samma spaltluft som resten
   av sidan. Kapitlet blir då ett uppslag: dokumentet till vänster, vad det
   betyder till höger, och ingen tom halva kvar att förklara.

   NOTEN HÄNGER I FOTEN, inte i toppen. Toppställd blev den tre rader högst upp
   i en spalt på trehundrafyrtio pixlar, alltså samma hål som förut fast
   flyttat neråt — tjugofem ord fyller inte en halv sektion hur man än ställer
   dem. Vid foten landar den däremot på tabellens sista hårstreck: dokumentet
   till vänster, vad det betyder undertecknat i högerkanten, och två hörn i
   raden är förankrade i stället för ett. */
.dropp-sedelrad{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,3vw,56px);align-items:end;
}
@media (max-width:820px){
  .dropp-sedelrad{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
}
.dropp-not{margin-top:0}
.dropp-not p{
  margin:0;max-width:56ch;font-size:14px;line-height:1.65;color:var(--damm);
}
.dropp-not .lank-pil{margin-left:12px;white-space:nowrap}

/* ------------------------------------------------------------ följesedeln */
/* Sidans tyngsta element, och avsiktligt det minst dekorerade. Betong levereras
   aldrig utan följesedel — batchnummer, recept, tid, mängd. Ett intyg som ser
   ut som ett dokument från en verkstad är trovärdigare än ett diplom i guldram,
   och numret ska vara det tyngsta på sidan. Se sigillet. */
.dropp-sedel{
  border-collapse:collapse;width:100%;
  font-variant-numeric:tabular-nums;
}
.dropp-sedel th,
.dropp-sedel td{
  text-align:left;padding:9px 16px 9px 0;
  border-bottom:1px solid var(--linje);
  font-weight:400;vertical-align:baseline;
}
/* Etikettspalten är satt efter det längsta ordet och inte efter en andel av
   sidan. UPPLAGA är åtta tecken i elva punkter med .14em spärr, alltså drygt
   nittio pixlar; 30 % av en 770 px spalt ger 230 och räcker med marginal.
   36 % av HELA satsytan gav 475 px åt ordet LISTA, och en nyckel som står en
   halv skärm från sitt värde är ingen uppställning — det är två kolumner som
   råkat hamna på samma rad. */
.dropp-sedel th{
  font-family:var(--data);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--damm);width:30%;
}
.dropp-sedel td{font-family:var(--data);font-size:14px;color:var(--kalk)}

/* ------------------------------------------------------------ pjäsen */
.dropp-pjas{
  display:grid;gap:clamp(28px,5vw,64px);align-items:center;
}
@media (min-width:900px){
  .dropp-pjas{grid-template-columns:1.05fr .95fr}
}
.dropp-pjas img{width:100%;height:auto;display:block;border:1px solid var(--linje)}
/* Måttlinjen har ingen egen marginal utanför hjälten — utan den här klistrar
   den fast i stycket ovanför och läser som en avbruten rad. */
.dropp-pjas .matt{margin-top:36px;max-width:520px}

/* Bilderna i droppet är platshållare tills Filip fotat sitt eget armband.
   Märkningen ligger i CSS och inte i ett kommentarsfält, för en märkning man
   inte ser är en märkning man glömmer bort. */
.dropp-provisorisk{position:relative}
.dropp-provisorisk::after{
  content:attr(data-not);
  position:absolute;left:0;bottom:0;
  background:var(--form);color:var(--damm);
  font-family:var(--data);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;padding:7px 12px;
  border:1px solid var(--linje);border-left:0;border-bottom:0;
}

/* ------------------------------------------------------------ villkoren */
.dropp-villkor{list-style:none;margin:0;padding:0;display:grid;gap:0}
.dropp-villkor li{
  border-top:1px solid var(--linje);
  padding:clamp(12px,1.5vw,18px) 0;
  display:grid;gap:7px;
}
/* Tre spalter: nummer, påstående, text. Numret ligger i en smal marginal och
   texten får den bredd som blev över när blocket slutade sluta vid två
   tredjedelar av sidan. */
@media (min-width:820px){
  .dropp-villkor li{
    grid-template-columns:76px minmax(0,4fr) minmax(0,7fr);
    gap:clamp(20px,3vw,52px);align-items:baseline;
  }
}
/* Löpnumret bar --damm-2 och mätte 3,32–3,38: fyra villkor vars numrering
   inte gick att läsa. Ett register utan läsbara nummer är en punktlista. */
.dropp-villkor .nr{
  font-size:12px;letter-spacing:.14em;color:var(--damm);
}
.dropp-villkor li:last-child{border-bottom:1px solid var(--linje)}
.dropp-villkor b{font-family:var(--skylt);font-weight:400;text-transform:uppercase;
  font-size:clamp(18px,2.2vw,26px);line-height:1.02;color:var(--kalk)}
.dropp-villkor p{margin:0;color:var(--damm);max-width:56ch}

/* ------------------------------------------------------------ knappen */
.sida-dropp .btn{
  background:var(--kalk);color:var(--form);border-color:var(--kalk);
  font-family:var(--data);letter-spacing:.08em;text-transform:uppercase;
  font-size:12px;border-radius:0;
}
.sida-dropp .btn:hover{background:var(--metall);border-color:var(--metall)}
.sida-dropp .btn.tom{background:transparent;color:var(--kalk);border-color:var(--linje)}
.sida-dropp .btn.tom:hover{background:transparent;border-color:var(--kalk)}

/* Navigering och sidfot ligger kvar i husets typografi. Droppet är ett rum i
   huset, inte ett eget varumärke — ordmärket ska vara detsamma på vägen in och
   på vägen ut. Bara färgerna följer med rummet. */
/* Sidhuvudet är IDENTISKT på varje sida, droppsidan inräknad. Det låg tidigare
   i droppets egen kalkvita ton, vilket var en nyans ifrån husets varmvita — och
   ett märke som skiftar nyans när man byter sida läser som att något är fel,
   inte som två rum. Rummen skiljs av allt annat: typografin, paletten, ytan.
   Värdena skrivs ut i klartext eftersom .sida-dropp pekar om --papper och --ink
   till sina egna, mörka värden. */
/* SIDHUVUDET GÅR IN I RUMMET.
   --------------------------------------------------------------------------
   Här stod tidigare motsatsen, och det var Filips regel: sidhuvudet skulle
   vara identiskt på varje sida, i husets varmvita, även på droppsidan. Skälet
   var riktigt då — ett märke som skiftar NYANS när man byter sida läser som
   att något är fel, inte som två rum.

   Det som ändrade sig är att droppen blev en serie med varsitt universum. Då
   är ett krämvitt band i överkanten inte en konstant, det är en läcka: allt
   annat på sidan är kvällen och remsan högst upp är fortfarande butiken.

   Skillnaden mot den gamla buggen är att det här inte är en NYANS ifrån, det
   är ett annat rum helt och hållet — och märket är fortfarande exakt samma
   märke, ritat ur samma fil. Det är marken under som byter, inte logotypen.

   Typsnittet i menyn stannar däremot i husets. Menyn är husets navigering och
   ska inte klä ut sig till kvällen; sätts länkarna i skyltsnittet blir de en
   del av droppet i stället för vägen ut ur det. */
.sida-dropp .nav,.sida-dropp .mobilmeny{
  background:var(--form);
  color:var(--kalk);
  border-bottom-color:var(--linje);
  font-family:'Familjen Grotesk',system-ui,-apple-system,sans-serif;
}
.sida-dropp .nav .mark{color:var(--kalk)}
.sida-dropp .nav .nav-lankar a{color:var(--damm)}
.sida-dropp .nav .nav-lankar a[aria-current],
.sida-dropp .nav .nav-lankar a:hover{color:var(--kalk)}
.sida-dropp .nav .nav-lankar a::after{background:var(--metall)}
.sida-dropp .nav .btn,.sida-dropp .mobilmeny .btn{
  background:var(--kalk);color:var(--form);border-color:var(--kalk);
  font-family:inherit;letter-spacing:0;text-transform:none;font-size:15px;
}
.sida-dropp .nav .burger span{background:var(--kalk)}
/* Menyns länkar följer med in i grotesken i stället för att stå kvar i husets
   Bodoni. Regeln ovan säger att menyn stannar i husets snitt — det gjorde bara
   remsan, för `.mobilmeny a` sätter var(--serif) och vann på specificitet, så
   den utfällda menyn var den enda didonen kvar i kvällens rum.
   Det är också det som gör att droppsidan kan lämna Bodoni HELT: det enda som
   satte ett tecken i den var den här listan, och 57 kB för sex länkar bakom en
   hamburgare är ingen affär. Märket rör det inte — 26B är SVG-kurvor ur
   logga.py, inte text.
   Storleken går ner från 30 till 24: en grotesk fyller sin kägel helt annat än
   en didone gör, och 30 px hade läst som rubrik i stället för som navigering. */
.sida-dropp .mobilmeny nav a{
  font-family:inherit;font-size:24px;letter-spacing:-.01em;
}

/* MENYN GÅR IN UNDER HAMBURGAREN, ÄVEN PÅ DATOR.
   Sex länkar tvärs över överkanten läcker ut ur rummet: allt annat på sidan är
   kvällen, och remsan högst upp är fortfarande en meny genom huset.

   Men de tas INTE bort. Ett drop är ett rum i huset och inte en egen sajt, och
   en sida med logga utan navigering är en landningssida — precis den billiga
   signalen vi arbetat bort. Viktigare: någon som kommer hit från Instagram och
   inte är redo att skriva upp sig ska kunna hitta custom-benet, som är
   huvudaffären. Droppet är kroken.
   Utgången finns alltså kvar, ett klick bort i stället för noll. */
@media (min-width:861px){
  .sida-dropp .nav .nav-lankar{display:none}
  .sida-dropp .nav .burger{display:block}
  /* Det var LÄNKSPALTEN som bar margin-left:auto och sköt allt annat åt höger.
     Döljs den faller knapp och hamburgare tillbaka mot loggan, och första
     försöket att lösa det med order gjorde bara att de bytte plats med
     varandra i vänsterkanten. Utrymmet måste flyttas till det som nu står
     först av det som ska ligga till höger. */
  .sida-dropp .nav .nav-btn{margin-left:auto}
}

.sida-dropp footer{background:var(--gjut);border-top:1px solid var(--linje)}

/* --------------------------------------------------------- dörrvakten */
/* En riktig dörr framför droppsidan när släppet inte är öppet.
   Två blad som möts i mitten, och innehållet ovanpå dem. Går man in glider
   bladen isär och sidan ligger där bakom.

   HIDDEN SOM FÖRVAL. Märkningen skickas med attributet hidden och skriptet
   tar bort det. Utan skript finns alltså ingen dörr — en overlay som inte går
   att stänga utan JavaScript är en låst dörr utan handtag, och den kostar hela
   sidan för den som har skript avstängt eller vars nätverk tappade filen.

   z-index 400 ligger över kornet (300) och sidhuvudet (120). Dörren är det
   yttersta lagret; ligger kornet över den syns en filmkornsslöja på en yta som
   ska vara massiv. */
.dorrvakt[hidden]{display:none}
.dorrvakt{
  position:fixed;inset:0;z-index:400;
  display:flex;align-items:center;
  overflow:hidden;
  color:var(--kalk);
}
.dorrvakt-blad{
  position:absolute;top:0;bottom:0;width:50.5%;
  /* Materialet: korn så ytan läser som yta, ett ljusfall uppifrån, och en
     välvning in mot springan — ljuset därinne kysser bladens innerkanter.
     Utan det är bladen två färgrutor och skarven ett streck. */
  background:
    var(--korn-mork),
    radial-gradient(120% 90% at 50% 0%,var(--natt-hi) 0%,var(--form) 52%,var(--natt-lo) 100%);
  transition:transform 1.05s var(--kurva);
}
/* Bladen är riktiga plåtar: borstat stål ur ComfyUI, graderat mot droppets
   ljusmodell (in-bilder/dorr/skript/finish.py äger graderingen). Höger är
   vänster speglad så dörren blir symmetrisk kring springan, och springplåten
   ligger i screen ovanpå så ljuset läser som en händelse PÅ metallen — dess
   ljuskärna är mätt till skarvens pixel. Gradienterna under är reservytan:
   når plåten aldrig fram står den gamla CSS-dörren kvar, inte ett hål in
   till sidan bakom. */
.dorrvakt-vanster{left:0;
  background:
    url(/img/dorr/springa-vanster.webp) center/cover no-repeat,
    url(/img/dorr/blad-vanster.webp) center/cover no-repeat,
    var(--korn-mork),
    linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 55%,rgba(var(--aura-rgb),.10) 96%,rgba(var(--aura-rgb),.20) 100%),
    radial-gradient(120% 90% at 50% 0%,var(--natt-hi) 0%,var(--form) 52%,var(--natt-lo) 100%);
  background-blend-mode:screen,normal,normal,normal,normal;
}
.dorrvakt-hoger{right:0;
  background:
    url(/img/dorr/springa-hoger.webp) center/cover no-repeat,
    url(/img/dorr/blad-hoger.webp) center/cover no-repeat,
    var(--korn-mork),
    linear-gradient(270deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 55%,rgba(var(--aura-rgb),.10) 96%,rgba(var(--aura-rgb),.20) 100%),
    radial-gradient(120% 90% at 50% 0%,var(--natt-hi) 0%,var(--form) 52%,var(--natt-lo) 100%);
  background-blend-mode:screen,normal,normal,normal,normal;
}
/* Springan mellan bladen lyser. Det är den enda antydan om att det finns ett
   rum bakom, och den gör att ytan läser som en stängd dörr i stället för som
   en mörk skiva. */
.dorrvakt::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:min(340px,32vw);
  transform:translateX(-50%);pointer-events:none;
  /* Över bladen: pseudo-elementet är första barnet och målas annars under. */
  z-index:1;transition:opacity .5s;
  /* Ljuset från rummet: en bred mjuk blom och en smal skarp kärna. Blommen
     är det som gör att strimman läser som LJUS och inte som ett streck. */
  background:
    linear-gradient(90deg,rgba(var(--aura-rgb),0) 0%,rgba(var(--aura-rgb),.05) 30%,
      rgba(var(--aura-rgb),.13) 47%,rgba(var(--aura-rgb),.75) 49.7%,
      rgba(var(--aura-rgb),.95) 50%,rgba(var(--aura-rgb),.75) 50.3%,
      rgba(var(--aura-rgb),.13) 53%,rgba(var(--aura-rgb),.05) 70%,
      rgba(var(--aura-rgb),0) 100%);
  /* Strimman viker undan där innehållet står: starkast ovanför skylten och
     nere vid golvet, dämpad genom mittbandet. Ett ljus som skär rakt genom
     ordbilden är ett streck igen, hur mjukt det än blommar. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 16%,rgba(0,0,0,.18) 30%,
    rgba(0,0,0,.14) 66%,rgba(0,0,0,.55) 82%,#000 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 16%,rgba(0,0,0,.18) 30%,
    rgba(0,0,0,.14) 66%,rgba(0,0,0,.55) 82%,#000 100%);
}
/* Golvspillet: ljuset ur springan landar på golvet framför dörren. Det är
   den detaljen som ger dörren ett RUM att stå i. */
.dorrvakt::after{
  content:"";position:absolute;left:50%;bottom:0;width:min(900px,80vw);height:26vh;
  transform:translateX(-50%);pointer-events:none;z-index:1;transition:opacity .5s;
  background:radial-gradient(55% 100% at 50% 100%,rgba(var(--aura-rgb),.16) 0%,
    rgba(var(--aura-rgb),.05) 45%,transparent 75%);
}
.dorrvakt.oppen::before,.dorrvakt.oppen::after{opacity:0}
.dorrvakt-in{
  position:relative;z-index:2;
  width:min(100% - 44px,var(--wrap));margin-inline:auto;
  /* Man står FRAMFÖR en dörr, mitt emot springan: allt centrerat. Den
     vänsterställda varianten fick springan att skära genom innehållet som
     ett fel i stället för att vara sidans mittaxel. */
  text-align:center;
}
.dorrvakt-in .jatte{margin:12px 0 0}
.dorrvakt-in .dropp-under{margin-top:14px}
.dorrvakt-lage{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:center;
  margin:clamp(28px,4vw,44px) 0 0;
}
.dorrvakt-lage b{
  font-family:var(--skylt);font-weight:400;text-transform:uppercase;
  font-size:clamp(17px,1.9vw,22px);color:var(--kalk);
}
.dorrvakt-lage span{
  font-family:var(--data);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--damm);
}
.dorrvakt .dropp-klocka{margin-top:16px;justify-content:center;display:flex;align-items:baseline;gap:12px}
.dorrvakt-knappar{
  display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vw,28px);
  margin-top:clamp(34px,4.6vw,56px);
}
/* Vägen in är en knapp och inte en länk, för den leder ingen annanstans. Den
   ser ut som husets pil-länk eftersom den gör samma sak: för dig vidare. */
.dorrvakt-in-knapp{
  background:none;border:0;padding:12px 8px;margin-block:-8px;cursor:pointer;
  font:inherit;color:var(--damm);
}
@media (hover:hover){.dorrvakt-in-knapp:hover{color:var(--kalk)}}

/* Öppen: bladen glider ut ur bild och dörren slutar ta emot klick. */
.dorrvakt.oppen{pointer-events:none}
.dorrvakt.oppen .dorrvakt-vanster{transform:translateX(-100%)}
.dorrvakt.oppen .dorrvakt-hoger{transform:translateX(100%)}
.dorrvakt.oppen .dorrvakt-in,
.dorrvakt.oppen::before{opacity:0;transition:opacity .4s}

/* Den som bett om mindre rörelse får dörren att bara försvinna. */
@media (prefers-reduced-motion:reduce){
  .dorrvakt-blad{transition:none}
}

/* ------------------------------------------------- väntelistan och nyckeln */
/* Listan är en biljett, inte ett samtal: två fält och en knapp i droppets
   datagrammatik. Formuläret byts mot beskedet när anmälan gått in — ett
   ifyllt fält som står kvar ser ut som att inget hände. */
.lista-form{max-width:560px}
.dorrvakt-knappar .lista-form{max-width:640px;width:100%;margin-inline:auto}
.dorrvakt .lista-falt{justify-content:center}
.dorrvakt .lista-not,.dorrvakt .lista-status{text-align:center}
.lista-falt{display:flex;gap:10px;flex-wrap:wrap}
.lista-falt input{
  flex:1 1 180px;min-width:0;padding:13px 14px;font-family:var(--data);
  font-size:13px;letter-spacing:.03em;color:var(--kalk);
  background:transparent;border:1px solid var(--linje);border-radius:0;
}
.lista-falt input::placeholder{color:var(--damm-2)}
.lista-falt input:focus{outline:none;border-color:var(--kalk)}
.lista-falt .btn{flex:0 0 auto}
/* IOS ZOOMAR IN PÅ ETT FÄLT UNDER 16 PIXLAR. Det är inte en smaksak: telefonen
   skalar upp hela sidan när fältet får fokus och skalar aldrig tillbaka, så
   den som skriver upp sig på listan lämnas i en sida som ligger utanför
   skärmen i sidled. Fälten stod på 13. Måttet höjs på pek och inte bara på
   smal skärm — en surfplatta i liggande läge är bred och har samma beteende.
   Raden bryts samtidigt: knappen låg som en tredje kolumn på 223 av 360 px
   och hamnade högerställd under två fullbreda fält, vilket läste som att den
   hörde till någonting annat. På en telefon är en uppmaning full bredd. */
@media (pointer:coarse),(max-width:860px){
  .lista-falt input{font-size:16px;padding:14px 14px}
}
@media (max-width:640px){
  .lista-falt{gap:12px}
  .lista-falt input,.lista-falt .btn{flex:1 1 100%;width:100%}
  .lista-falt .btn{justify-content:center;text-align:center}
}
/* Noten under listan säger vad man skriver upp sig PÅ. Den stod i
   placeholderns ton (3,22–3,36) och står dessutom mitt i dörrens ljusspringa
   på telefon, där bakgrunden LJUSNAR och en svag grå tappar ännu mer. --damm
   klarar båda lägena; strimman rörs inte. */
.lista-not{margin:10px 0 0;font-family:var(--data);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--damm)}
.lista-status{margin:10px 0 0;font-size:14px;color:var(--damm)}
.lista-status.ok{color:var(--kalk)}
.lista-status.fel{color:#C96A5A}
.lista-status:empty{display:none}
/* honungsfällan: osynlig för människor, ifyllbar för robotar */
.lista-form .fanga{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Nyckellåset under öppen dörr: låst läge med fält, upplåst knapp.
   Sidan bär bara hashen — dörren döms alltid om av servern. */
.dropp-nyckellage{width:100%}
.dropp-nyckel-last .nyckel-form{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 22px}
.nyckel-form input{
  flex:0 1 220px;min-width:0;padding:13px 14px;font-family:var(--data);
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--kalk);
  background:transparent;border:1px solid var(--linje);border-radius:0;
}
.nyckel-form input:focus{outline:none;border-color:var(--kalk)}
.nyckel-form .lista-status{flex-basis:100%}