/* Droppets rum.
   ============================================================================
   /genesis-01/ ska inte kännas som ännu en undersida utan som ett annat rum.
   Sajten är varm: varmvitt papper, Bodoni, brons. Droppet är kallt: sex
   gråvärden, kondenserad Archivo i versaler, och en enda accent som är kall
   vitmetall. Noll guld — varenda konkurrent i segmentet är guld på svart, och
   det är hela skälet att inte vara det.

   Filen laddas bara på droppsidan, och droppets typsnitt (45 kB) med den.
   Att lägga dem på alla sexton sidor för ett släpp som syns på en vore fel.

   Allt är omslutet av body.sida-dropp. Tokens skrivs om i stället för att
   komponenterna dubbleras: .btn, .wrap, .sek och .etikett ärver droppets
   palett automatiskt, och det som verkligen är droppets eget — skylten,
   följesedeln, räknaren — får egna klasser med dropp-prefix. */

.sida-dropp{
  --form:#0E0E0D;    /* formolja: grunden */
  --gjut:#1A1917;    /* rå betong, otorkad */
  --slip:#2A2925;    /* slipad yta, där ballasten syns */
  --damm:#8C8880;    /* betongdamm: all sekundärtext */
  --kalk:#E7E4DD;    /* kalkvit: ordmärket och brödtexten */
  --metall:#C9D2D8;  /* kall vitmetall: enda accenten */

  /* Sajtens tokens pekas om. Komponenterna vet inte att de bytt rum. */
  --papper:var(--form); --papper-2:var(--gjut); --yta:var(--gjut);
  --natt:var(--form); --natt-2:var(--gjut);
  --linje:#3A382F; --linje-svag:#2A2925; --natt-linje:#3A382F;
  --ink:var(--kalk); --ink-2:var(--damm); --ink-3:#6E6A63;
  --ljus:var(--kalk); --ljus-2:var(--damm); --ljus-3:#6E6A63;
  --black:var(--form);
  --brons:var(--metall); --brons-hi:var(--kalk); --guld:var(--metall);
  --pa-brons:var(--form);

  --skylt:'Skylt','Archivo Condensed',Impact,sans-serif;
  --data:var(--mono);

  background:var(--form);
  color:var(--kalk);
  font-family:'Dropptext',system-ui,sans-serif;
  color-scheme:dark;
}

/* 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(28px,4.6vw,58px);line-height:.92}
.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)}

/* ------------------------------------------------------------ hjälten */
/* Ytan i hjälten är gjuten betong, inte pjäsen. Det är avsiktligt: bilden bär
   idén — en gjutning som härdar — och pjäsen visas för sig längre ner där den
   får hela ytan. En hjälte som redan visar varan har ingenting kvar att ge. */
/* Slöjan lutar över spalten där texten står och släpper i högra tredjedelen.
   Ett jämnt lager över hela bilden släcker ballasten, och ballasten är det enda
   som gör att ytan läser som sten i stället för som rök — det var precis felet
   på första försöket, som lade .62 rakt över alltihop. */
.dropp-hjalte .hjalte-bild::after{
  background:
    linear-gradient(96deg,rgba(14,14,13,.9) 0%,rgba(14,14,13,.58) 38%,
      rgba(14,14,13,.1) 72%,rgba(14,14,13,0) 100%),
    linear-gradient(0deg,rgba(14,14,13,.66) 0%,rgba(14,14,13,0) 44%),
    linear-gradient(180deg,rgba(14,14,13,.72) 0,rgba(14,14,13,.32) 62px,
      rgba(14,14,13,0) 120px);
}
/* 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;
}

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

/* ------------------------------------------------------------ plattan */
.dropp-platta{
  display:inline-block;border:2px solid var(--kalk);
  padding:9px 16px;font-family:var(--data);
  font-size:15px;letter-spacing:.09em;color:var(--kalk);
}

/* ------------------------------------------------------------ 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:13px 16px 13px 0;
  border-bottom:1px solid var(--linje);
  font-weight:400;vertical-align:baseline;
}
.dropp-sedel th{
  font-family:var(--data);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--damm);width:36%;
}
.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(22px,3vw,32px) 0;
  display:grid;gap:10px;
}
@media (min-width:820px){
  .dropp-villkor li{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(24px,4vw,56px)}
}
.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. */
.sida-dropp .nav{background:var(--kalk);color:var(--form);border-bottom-color:#C9C6BF}
.sida-dropp .nav .nav-lankar a{color:#5A5750}
.sida-dropp .nav .nav-lankar a[aria-current],
.sida-dropp .nav .nav-lankar a:hover{color:var(--form)}
.sida-dropp .nav .btn{background:var(--form);color:var(--kalk);border-color:var(--form)}
.sida-dropp .nav .burger span{background:var(--form)}
.sida-dropp footer{background:var(--gjut);border-top:1px solid var(--linje)}