/* IN DA CLUB — släpp 01. STÄMMAN.
   ============================================================================
   Den här filen bestämmer bara färg och typografi. Strukturen ligger i
   dropp.css och är gemensam för alla släpp. Ett drop byter ton, inte grammatik.

   VÄRLDEN
   Kvällen. Hjälten står utanför dörren — repet, kromstolpen, kylan — och allt
   efter hjälten är innanför. Referensen är Filips: Timbaland, "Give It To Me",
   mitten av 2000-talet. Men sidan är inte en musikvideo. Den lånar ett riktigt
   dokuments grammatik precis som Genesis lånade betongens följesedel, och här
   är dokumentet DÖRREN: listan, kapaciteten, klockslaget.

   VARFÖR ALLT ÄR KALLT
   Pjäsen är silver. En varm ton bakom kall vitmetall lovar guld som pjäsen
   inte har, och det är ett påstående vi inte får göra med färg heller. Genesis
   var kall av positioneringsskäl (varenda konkurrent är guld på svart); det
   här släppet är kallt av materialskäl. Samma resultat, annat skäl.

   TYPOGRAFIN
   Syne, i tre vikter: ExtraBold som skylt, Regular som brödtext, Syne Mono som
   avläsning. Den valdes genom att renderas och tittas på mot droppets faktiska
   ord, inte genom att läsas som namn i en lista — sju kandidater, och de andra
   sex drog antingen åt sci-fi eller åt startup. Syne läser galleri och
   underground, vilket är skillnaden mellan en klubb man vill in på och en
   nattklubbsflyer. Snitten ligger under OFL; licenstexten följer med i
   dropp/in-da-club/fonts/ och får inte städas bort. */

.sida-dropp.dropp-in-da-club{
  --form:#08090C;    /* natten utanför: blåsvart, inte neutralsvart */
  --gjut:#10131A;    /* rummet innanför, en aning lyft */
  --slip:#1C212A;    /* kanter och ytor som fångar ljus */
  --damm:#7E8896;    /* kall grå: all sekundärtext */
  --damm-2:#5A6472;
  --kalk:#E6EBF0;    /* nästan vitt, kalldraget */
  --metall:#C8D6E2;  /* krom: enda accenten, och den är silver */

  /* Ljusmodellen, i klubbens temperatur. Se LJUSMODELLEN i stil.css för
     kurvan och varför den har fyra steg. Här är ljuset kallt hela vägen ner,
     vilket är omvänt mot huset — huset lyser varmt och skuggar kallt. */
  --natt-hi:#242C38; --natt-h2:#161C25;
  --natt-l2:#0A0C11; --natt-lo:#05060A;
  --aura-rgb:176,203,228;

  /* Slöjan över hjältefotot, som kanaler så att dropp.css kan sätta alfa. */
  --slojan:8 9 12;

  --linje:#2A323D; --linje-svag:#1A202A; --natt-linje:#2A323D;

  --skylt:'Skylt','Syne',system-ui,sans-serif;
  --data:'Droppdata',ui-monospace,'SFMono-Regular',monospace;
}

/* Syne ExtraBold är BRED, inte kondenserad som Genesis Archivo. Samma mått ger
   därför helt andra radbrytningar: 16ch blev fem rader och läste som skrik.
   Måtten räknas om här och inte i grammatiken, eftersom de hör till snittet. */
.dropp-in-da-club .hjalte h1{max-width:9ch}
.dropp-in-da-club .jatte{font-size:clamp(46px,10.5vw,132px);line-height:.86}
.dropp-in-da-club .d.stor{font-size:clamp(26px,3.9vw,50px);line-height:.98}
.dropp-in-da-club .manifest{max-width:22ch}

/* Skylten spärras en aning. Syne sitter tätt i versaler, och ett ord som ska
   läsa som en skylt över en dörr behöver luft mellan bokstäverna. */
.dropp-in-da-club .d,
.dropp-in-da-club .jatte{letter-spacing:.012em}

/* Raden under ordmärket är kvällens data och sätts i mono, inte i skylten.
   Med skyltsnittet konkurrerade den med rubriken den står under. */
.dropp-in-da-club .dropp-under{font-size:clamp(13px,1.7vw,19px);letter-spacing:.11em}

/* Gjutskarven heter fortfarande så i grammatiken, men här är den dörrposten:
   en enda rak linje som skiljer skylten från det som gäller i kväll. */
.dropp-in-da-club .dropp-skarv{background:var(--slip)}

/* KORNET GÅR UPP I KLUBBEN.
   Husets korn är 96 px och avsiktligt osynligt — man ska känna ytan, inte se
   bruset. Här ska man se det. En klubbild klockan två är tagen på hög känsla
   med en liten kamera, och det syns. Samma bricka som huset använder, men
   uppskalad till 192 så prickarna blir dubbelt så stora, och lagd additivt så
   den bidrar i mörkret där overlay inte gör någonting.
   Det ligger som ett fjärde lager i kroppens bakgrund, alltså under texten och
   över ljuset. Inga extra rutor i märkningen. */
.sida-dropp.dropp-in-da-club{
  background-image:var(--korn-mork),var(--aura-natt),url(/img/rok.webp),var(--ljus-natt);
  background-size:192px 192px,auto,cover,auto;
  background-blend-mode:screen,normal,screen,normal;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
  background-attachment:fixed,fixed,fixed,fixed;
}

/* Bilens remsa beskärs efter ljusstaven, inte efter mitten. Bilen är
   fotograferad med taket högt i rutan och staven på 38 % av höjden, och en
   remsa som klipper på mitten visar plåt i stället för det enda som ska synas.
   Regeln pekar på just den bilden och inte på alla remsor — de andra plåtarna
   är komponerade för mitten och ska ligga kvar där. */
.dropp-in-da-club .band-bild img[src*="klubb-bil"]{object-position:50% 44%}

/* Hjältebilden är LIGGANDE och behöver ingen beskärningsförskjutning.
   Den var stående först, och då rymdes inte glaset och armbandet samtidigt:
   fönstret visar 33 % av en stående plåt, glaset ligger på 0,33 av höjden och
   armbandet på 0,60–0,72. Fyrtiofem procents innehåll får inte plats i ett
   fönster på trettiotre. Lösningen var inte ett bättre beskärningsvärde utan
   en bild i rätt format — se REDIGERINGAR i fal.py. */
.dropp-in-da-club .hjalte-bild img{object-position:50% 56%}

/* Rubriken får ett mått så att länken ryms bredvid den. Utan det tar en
   tvåradig rubrik hela satsytan och länken bryter ner under den, vilket läser
   som två block i stället för som en rad. */
.dropp-in-da-club .sek-topp .d.stor{max-width:15ch}
/* Slöjan var satt för repbilden, där motivet låg som en ljus diagonal rakt
   genom texten och måste dämpas hårt. Den här bilden har sitt motiv i mitten
   och mörk duk i nedre vänstra hörnet där skylten står, alltså finns redan den
   yta rubriken behöver. Kvar blir en mycket lättare slöja som bara håller
   nederkanten och menyremsan. En slöja som är satt för fel bild släcker det
   enda som ska synas. */
.dropp-in-da-club .dropp-hjalte .hjalte-bild::after{
  background:
    linear-gradient(96deg,rgb(var(--slojan)/.74) 0%,rgb(var(--slojan)/.46) 32%,
      rgb(var(--slojan)/.12) 62%,rgb(var(--slojan)/0) 100%),
    linear-gradient(0deg,rgb(var(--slojan)/.62) 0%,rgb(var(--slojan)/0) 40%),
    linear-gradient(180deg,rgb(var(--slojan)/.74) 0,rgb(var(--slojan)/.3) 62px,
      rgb(var(--slojan)/0) 130px),
    radial-gradient(124% 104% at 50% 46%,rgb(var(--slojan)/0) 46%,rgb(var(--slojan)/.42));
}