@import url('/css/fonts.css');
@import url('/css/palette.css');

/* =========================================================================
   Vinnende

   Efter designsystemet Steep: serif-redaktion på varmt papper. Nästan helt
   akromatiskt, serif i vikt 400 i alla storlekar, kort utan skugga, och en
   enda persikoaccent.

   Två saker är medvetna avsteg från specen, båda för att sajten är ett flöde
   och inte en produktsida:

   1. Kategorierna har en egen varm ton. Steep tillåter bara persika och
      sienna, men ett flöde utan färg till vänster om titeln är platt att
      skanna. Tonerna är lånade ur samma pigmentvärld, se lib/palette.js.
   2. Persikan används på fler än ett ställe per sida, eftersom den bär
      chansbedömningen och den återkommer i flödet.
   ========================================================================= */

:root {
  --ink: #17191c;
  --paper: #ffffff;
  --mist: #f2f2f3;
  --fog: #fafafb;
  --slate: #777b86;
  --ash: #8a8a8d;
  --hairline: #ececec;
  --rule-strong: #d8d8d9;

  --blush: #fbe1d1;
  --sienna: #5d2a1a;

  /* Semantiskt tillstånd, inte varumärkesfärg: enbart deadline. */
  --urgent: #9c2f0d;
  --urgent-soft: #fdeee8;

  --serif: 'Source Serif 4', 'Source Serif Pro', ui-serif, Georgia, serif;
  --sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --artifact: 0 0 0 1px rgb(4 23 43 / 0.05), 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Steeps två strukturradier: helrunda kontroller, 24px på kort. */
  --r-pill: 9999px;
  --r-card: 24px;
  --r-panel: 20px;
  --r-media: 12px;
  --r-input: 16px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 160ms;
  --slow: 480ms;

  --page: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(3rem, 7vw, 80px);
}

/* Steep är ett ljust system. Mörkt läge är en kompetent invertering så att
   sajten inte bränner näthinnan, inte en andra design. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f0efec;
    --paper: #14140f;
    --mist: #1e1e19;
    --fog: #1a1a15;
    --slate: #a3a29c;
    --ash: #8d8c86;
    --hairline: #2b2b25;
    --rule-strong: #3d3c35;
    --blush: #3a241a;
    --sienna: #f0c9ae;
    --urgent: #ff9d78;
    --urgent-soft: #2c1a13;
    --artifact: 0 0 0 1px rgb(255 255 255 / 0.06), 0 20px 25px -5px rgb(0 0 0 / 0.6);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.4;
  font-variation-settings: 'opsz' 17;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }

.shell { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-panel) 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------- typografi -- */

/* Serifen stannar på vikt 400 i alla storlekar. Systemets signatur: den
   viskar auktoritet i stället för att skrika i fetstil. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.24;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.5rem, 5.6vw, 76px);
  letter-spacing: -0.025em;
  line-height: 1.12;
}
.heading-lg { font-size: clamp(2rem, 4.2vw, 60px); letter-spacing: -0.018em; }
.heading { font-size: clamp(1.75rem, 3.2vw, 42px); letter-spacing: -0.015em; }

/* En kursiverad fras mitt i rubriken, i sienna. */
.display em, .heading em, .heading-lg em { font-style: italic; color: var(--sienna); }

.lede { font-size: 20px; line-height: 1.4; color: var(--slate); max-width: 48ch; }
.mono { font-family: var(--sans); font-size: 14px; font-variant-numeric: tabular-nums; }
.muted { color: var(--slate); }
.dim { color: var(--ash); }

/* --------------------------------------------------------------- logga -- */

/* Maskoten är en skata. Fågeln varje svensk vet samlar allt som glimmar,
   vilket är precis vad sajten gör med tävlingar, och redan svartvit. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.012em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark svg { width: 34px; height: 34px; flex: none; display: block; }
.logo__ink { fill: var(--ink); }
.logo__beak { fill: var(--sienna); }
.logo__flash, .logo__eye { fill: var(--blush); }
/* Prickarna över ä. Det enda som skiljer ordbilden från brödtext. */
.wordmark i { font-style: normal; color: var(--sienna); }

@media (prefers-color-scheme: dark) {
  .logo__flash, .logo__eye { fill: var(--paper); }
}

/* ------------------------------------------------------------- sidhuvud -- */

/* Viskande tyst: ingen bakgrund, ingen ram, ingen skugga. */
.masthead { position: relative; z-index: 30; }
.masthead__bar { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding-block: 24px; }

.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  margin-left: auto;
  font-size: 16px;
}
.masthead__nav a { text-decoration: none; padding-block: 2px; color: var(--ink); }
.masthead__nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
/* Knappen i menyn är en knapp först och en menylänk sedan. Utan detta ärver
   den menyns textfärg och blir svart text på svart botten. */
.masthead__nav a.btn--primary, .masthead__nav a.btn--primary:hover { color: var(--paper); }
.masthead__nav a.btn--ghost:hover { color: var(--paper); }

.masthead__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 900px) {
  .masthead__toggle { display: block; }
  .masthead__nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    padding: 0.5rem var(--gutter) 1.5rem;
    box-shadow: var(--artifact);
    border-radius: 0 0 var(--r-card) var(--r-card);
  }
  .masthead__nav[data-open='true'] { display: flex; }
  .masthead__nav a { padding-block: 0.9rem; border-bottom: 1px solid var(--hairline); font-size: 18px; }
  .masthead__nav .btn { margin-top: 1rem; justify-content: center; border-bottom: 0; }
}

/* --------------------------------------------------------------- knappar -- */

/* Fylld pillerknapp parad med en spökpiller på samma baslinje. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 44px;
  padding-inline: 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--fast) var(--ease), background var(--fast) var(--ease),
    color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { opacity: 0.86; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--lg { height: 52px; padding-inline: 26px; font-size: 17px; }
.btn--plain { padding-inline: 20px; }

/* Pilen bor inte i en egen cirkel här. Steep sätter den som en del av
   etiketten, och den grammatiken gäller hela sajten. */
.btn__pip { display: none; }

.arrowlink { font-size: 16px; text-decoration: none; }
.arrowlink:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------------ hero -- */

.hero {
  padding-block: clamp(1.5rem, 4vw, 40px) var(--section);
  background: linear-gradient(180deg, color-mix(in srgb, var(--blush) 46%, var(--paper)) 0%, var(--paper) 94%);
  border-bottom: 1px solid color-mix(in srgb, var(--sienna) 12%, transparent);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: clamp(2rem, 5vw, 64px);
  align-items: center;
}
.hero .display { margin-bottom: 22px; }
.hero .lede { margin-bottom: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.pulse {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--sienna) 16%, transparent);
  font-size: 16px;
  color: var(--slate);
  max-width: 42ch;
}
.pulse b { color: var(--sienna); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Kollaget. Produktfragment som överlappar varandra, lutar olika håll och har
   olika karaktär. Överlappet är det som gör det till ett kollage i stället
   för en prydlig kolumn med kort. */
.artifacts { position: relative; padding-block: 20px; }
.artifact {
  background: var(--paper);
  border-radius: var(--r-panel);
  box-shadow: var(--artifact);
  padding: 16px 18px 14px;
}
.artifact__label { font-size: 14px; color: var(--ash); margin-bottom: 8px; }
.artifact__title { font-family: var(--serif); font-size: 19px; line-height: 1.24; }
.artifact__sub {
  margin-top: 6px;
  font-size: 14px;
  color: var(--slate);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.artifact__metric { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }

.artifact--photo { position: relative; z-index: 2; width: 300px; margin-left: auto; padding: 12px 12px 14px; transform: rotate(1.4deg); }
.artifact--photo img { width: 100%; height: 168px; object-fit: cover; border-radius: var(--r-media); background: var(--mist); margin-bottom: 12px; }
.artifact--photo .artifact__title, .artifact--photo .artifact__sub { padding-inline: 4px; }

.artifact--gauge { position: relative; z-index: 3; width: 224px; margin-top: -18px; margin-left: -14px; transform: rotate(-1.8deg); }

.artifact--chance {
  position: relative;
  z-index: 4;
  width: 268px;
  margin-top: -18px;
  margin-left: auto;
  background: var(--blush);
  color: var(--sienna);
  box-shadow: 0 0 0 1px rgb(93 42 26 / 0.08), 0 18px 30px -14px rgb(93 42 26 / 0.35);
  transform: rotate(1.1deg);
}
.artifact--chance .artifact__label { color: var(--sienna); opacity: 0.75; }

.spark { display: block; width: 100%; height: 44px; margin-top: 10px; }
.spark path { fill: none; stroke: var(--sienna); stroke-width: 1.5; }

@media (max-width: 1119px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .artifacts { display: none; }
}

/* -------------------------------------------------------------- sektioner -- */

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2rem, 4vw, 48px); }
.section--fog { background: var(--fog); }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 32px;
}
.section__more { font-size: 16px; text-decoration: none; }
.section__more:hover { text-decoration: underline; text-underline-offset: 4px; }
.eyebrow { font-size: 14px; color: var(--ash); margin-bottom: 10px; }

/* ---------------------------------------------------------------- flödet -- */

.feed { list-style: none; margin: 0; padding: 0; }

/* Fyra kolumner, för raden har fyra barn: tidsstämpel, bricka, innehåll och
   sifferkolumn. Med tre kolumner hamnade sifferkolumnen på egen rad och hela
   flödet såg sönderslaget ut. */
.row {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem 96px minmax(0, 1fr) 11rem;
  gap: 24px;
  align-items: start;
  padding-block: 26px;
  border-bottom: 1px solid var(--hairline);
}
.row:first-child { border-top: 1px solid var(--hairline); }

.row__when { font-size: 14px; color: var(--ash); }

/* Brickan finns alltid: arrangörens bild när den går att hämta, annars
   kategorins ton med sitt namn i. Aldrig en tom ruta. */
.row__tile {
  position: relative;
  width: 96px;
  height: 76px;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--cat, var(--cat-ovrigt));
  display: grid;
  place-items: center;
}
.row__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.row__tile-label {
  position: relative;
  padding-inline: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
  color: #fff;
  hyphens: manual;
}

.row__main { min-width: 0; }
.row__main h3 {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.22;
  letter-spacing: -0.012em;
  margin-bottom: 6px;
}
.row__main h3 a { text-decoration: none; }
.row__main h3 a::after { content: ''; position: absolute; inset: 0; }
.row:hover .row__main h3 { text-decoration: underline; text-underline-offset: 5px; }

.row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 15px;
  color: var(--slate);
}
.row__meta .sep { display: none; }

.row__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.value { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Sponsrat läge. Märkningen är inte förhandlingsbar. */
.row--sponsored { background: var(--fog); }
.sponsor-flag { font-size: 14px; color: var(--sienna); }

@media (max-width: 900px) {
  /* Två kolumner: brickan till vänster, allt annat staplat till höger. */
  .row { grid-template-columns: 96px minmax(0, 1fr); gap: 8px 18px; }
  .row__tile { grid-row: span 3; grid-column: 1; }
  .row__when { grid-column: 2; }
  .row__main { grid-column: 2; }
  .row__aside {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    text-align: left;
    gap: 6px 16px;
  }
  .row__main h3 { font-size: 21px; }
}

/* ---------------------------------------------------------------- taggar -- */

/* Typografiska taggar: de grupperar utan visuell vikt. */
.tag { font-size: 14px; color: var(--ash); white-space: nowrap; text-decoration: none; }
a.tag:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tag--cat { color: var(--cat, var(--ash)); }

/* Chansmärkningen är den enda taggen som får en yta. Persika med sienna, som
   bläck på kraftpapper, och den bär den enda bedömning sajten själv gör. */
.tag--odds {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding-inline: 12px;
  border-radius: var(--r-pill);
  background: var(--blush);
  color: var(--sienna);
  font-weight: 500;
}
.tag--platform { color: var(--ash); }

/* Lenkekontrollen. Nøytral grå: de to fargelagene er opptatt — sienna betyr
   klikkbart og kategorifargen betyr premietype — og en tredje betydning ville
   gjort begge utydelige. Haken bærer signalet, ikke fargen. */
.verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--slate);
  white-space: nowrap;
  cursor: help;
}
.verified svg {
  width: 11px;
  height: 11px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tag--accent { color: var(--sienna); }
.tag--urgent { color: var(--urgent); font-weight: 500; }

/* ----------------------------------------------------------------- kort -- */

.lead { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 16px; }

/* Standardkortet: platt, mjukt och tyst. Ingen skugga, ingen ram. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mist);
  border-radius: var(--r-card);
  overflow: hidden;
}

.card__face { position: relative; aspect-ratio: 16 / 10; background: var(--cat, var(--cat-ovrigt)); overflow: hidden; }
.card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__face-label {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgb(10 10 14 / 0.5);
  color: #fff;
  font-size: 13px;
}

.card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__body h3 { font-family: var(--serif); font-size: 20px; line-height: 1.26; letter-spacing: -0.01em; }
.card__body h3 a { text-decoration: none; }
.card__body h3 a::after { content: ''; position: absolute; inset: 0; }
.card:hover .card__body h3 { text-decoration: underline; text-underline-offset: 4px; }
.card__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card__price { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card__price em { font-style: normal; font-size: 0.7em; font-weight: 400; color: var(--slate); margin-left: 3px; }
.card__price--free { color: var(--slate); }

@media (max-width: 640px) { .card__face { aspect-ratio: 5 / 2; } }

/* ------------------------------------------------------- utvalgte konkurranser -- */

/* Våre egne betalte plasseringer. De ska se ut som sajten, inte som en annons
   någon klistrat på: samma radie, samma mist-botten, samma serif. Det som
   skiljer dem är att ytan bär varumärket i stället för ett foto, och att
   märkningen sitter i hörnet där en bild annars hade legat.

   Rotationen kräver att [hidden] verkligen döljer. Utan regeln nedan vinner
   display:flex över attributet och hela potten syns på en gång. */

.promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 16px; }

.promo {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mist);
  border-radius: var(--r-card);
  overflow: hidden;
}
.promo[hidden] { display: none; }

.promo__face {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--cat, var(--cat-ovrigt));
  display: grid;
  place-items: center;
  padding: 18px 16px;
}
/* Varumärket är kortets bild. Serif i vikt 400 som allt annat, så att det
   läses som en rubrik och inte som en logotyp vi inte har rätt att rita. */
.promo__brand {
  font-family: var(--serif);
  font-size: clamp(21px, 3vw, 28px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: #fff;
  text-align: center;
  text-wrap: balance;
}
/* Annonsörens kreativ läggs ovanpå kategorifärgen. Laddar den inte syns
   varumärkesnamnet igenom och kortet ser fortfarande färdigt ut, precis som
   brickan i flödet. */
.promo__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Märkningen ligger ovanpå annonsbilden. Utan z-index målas bilden över den,
   eftersom den kommer senare i DOM:en — och en betald placering utan ordet
   "Sponsrad" är inte förhandlingsbar. */
.promo__flag {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgb(10 10 14 / 0.5);
  color: #fff;
  font-size: 13px;
}

.promo__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.promo__body h3 { font-family: var(--serif); font-size: 20px; line-height: 1.26; letter-spacing: -0.01em; }
.promo__body h3 a { text-decoration: none; }
.promo__body h3 a::after { content: ''; position: absolute; inset: 0; }
.promo__body p { font-size: 0.875rem; line-height: 1.5; }
.promo:hover .promo__body h3 { text-decoration: underline; text-underline-offset: 4px; }
.promo__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* Erbjudandet i rutnätet. Persikan skiljer det från tävlingarna omkring, på
   samma sätt som raden mitt i flödet. */
.promo--tilbud { background: var(--blush); }
.promo--tilbud .promo__face { background: var(--sienna); }
.promo--tilbud .promo__body h3,
.promo--tilbud .promo__body p,
.promo--tilbud .card__price,
.promo--tilbud .card__price em { color: var(--sienna); }
.promo--tilbud .promo__body p { opacity: 0.85; }

@media (max-width: 640px) { .promo__face { aspect-ratio: 5 / 2; } }

/* Smal variant, för åtgärdspanelen på en tävlingssida. Där finns ingen bredd
   för ett rutnät, och panelens egen knapp ska fortfarande vara det tyngsta på
   sidan. Prickar i kategorins ton, som i kategorilistan. */
.utvalda-smal { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.utvalda-smal h4 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ash);
  margin-bottom: 10px;
}

.smala { list-style: none; margin: 0; padding: 0; display: grid; }
.smal { border-top: 1px solid var(--hairline); }
.smal[hidden] { display: none; }
.smal:first-child { border-top: 0; }
.smal a { display: grid; gap: 2px; padding-block: 11px; text-decoration: none; }
.smal a:hover .smal__title { text-decoration: underline; text-underline-offset: 3px; }
.smal__brand { font-size: 13px; color: var(--cat, var(--ash)); }
.smal__title { font-family: var(--serif); font-size: 16px; line-height: 1.3; }

/* Betalt erbjudande som inte är en tävling. Bandet lånar formen av .band men
   inte persikan: den färgen bär chansbedömningen och uppmaningen att skicka in
   en tävling, och en tredje betydelse hade gjort de två andra otydliga.
   Här är ytan mist med en sienna-knapp. */
.erbj {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: clamp(24px, 4vw, 36px);
  background: var(--mist);
  border-radius: var(--r-card);
}
.erbj h2 { font-family: var(--sans); font-size: 24px; font-weight: 500; letter-spacing: -0.009em; margin-top: 6px; }
.erbj p { font-size: 17px; line-height: 1.55; color: var(--slate); margin-top: 10px; max-width: 60ch; }
.erbj__actions { display: grid; justify-items: center; gap: 12px; }
.erbj .btn--primary { background: var(--sienna); color: var(--paper); white-space: nowrap; }
.erbj__more { font-size: 15px; color: var(--slate); }
@media (max-width: 760px) {
  .erbj { grid-template-columns: 1fr; }
  .erbj__actions { justify-items: start; }
}


/* Tilbudet midt i strømmen. Den enda raden som har en yta, och det är hela
   poängen: den ska läsas som ett avbrott och inte som ännu en tävling.
   Persikan bär sajtens egna ord på övriga sidan, vilket stämmer här — det är
   vår rekommendation och inte en arrangörs. */
.row--tilbud { background: var(--blush); color: var(--sienna); }
.row--tilbud .row__main h3 { font-size: 24px; }
.row--tilbud .row__meta,
.row--tilbud .row__meta span { color: var(--sienna); opacity: 0.85; }
.row--tilbud .sponsor-flag { color: var(--sienna); }
.row--tilbud .tag--accent { color: var(--sienna); text-decoration: underline; text-underline-offset: 3px; }
.row__tile--tilbud { background: var(--sienna); }
.row__tile--tilbud .row__tile-label { font-family: var(--serif); font-size: 15px; }


/* Lenker til landingssidene. Piller i stället för en lista: de är
   sökfraser och läses snabbare på en rad än under varandra. */
.soklankar { display: flex; flex-wrap: wrap; gap: 8px; }
.soklankar a {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding-inline: 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-size: 15px;
  color: var(--slate);
  text-decoration: none;
  transition: all var(--fast) var(--ease);
}
.soklankar a:hover { border-color: var(--ink); color: var(--ink); }
.page-body .soklankar { margin-top: 12px; }


/* --------------------------------------------------- avslutas snart-remsa -- */

.strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.strip > * { scroll-snap-align: start; flex: 0 0 min(19rem, 78vw); }
.mini {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--mist);
  border-radius: var(--r-card);
}
.mini h3 { font-family: var(--serif); font-size: 19px; line-height: 1.26; }
.mini h3 a { text-decoration: none; }
.mini h3 a::after { content: ''; position: absolute; inset: 0; }
.mini:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.mini__countdown { margin-top: auto; font-size: 14px; color: var(--urgent); }

/* ------------------------------------------------------------ kategorier -- */

.cats { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 40px; display: block; }
.cats a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 14px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  font-size: 17px;
  break-inside: avoid;
}
.cats a::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cat, var(--cat-ovrigt));
  flex: none;
  margin-right: 2px;
  transform: translateY(-1px);
}
.cats a span { margin-left: auto; font-size: 14px; color: var(--ash); font-variant-numeric: tabular-nums; }
.cats a:hover { color: var(--cat, var(--ink)); }
@media (max-width: 860px) { .cats { columns: 2; } }
@media (max-width: 560px) { .cats { columns: 1; } }

/* ------------------------------------------------------------------ band -- */

/* Persikokortet. Det är det Steep kallar en redaktionell accent. */
.band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: clamp(28px, 5vw, 40px);
  background: var(--blush);
  color: var(--sienna);
  border-radius: var(--r-card);
}
.band h2 { font-family: var(--sans); font-size: 26px; font-weight: 500; letter-spacing: -0.009em; color: var(--sienna); }
.band p { font-size: 18px; margin-top: 10px; max-width: 52ch; }
.band .btn--primary { background: var(--sienna); color: var(--blush); }
@media (max-width: 760px) { .band { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ redaktionellt -- */

.prose { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.prose h3 { font-family: var(--sans); font-size: 20px; font-weight: 500; margin-bottom: 10px; }
.prose p { font-size: 17px; line-height: 1.55; color: var(--slate); }
.prose p + p { margin-top: 12px; }
.prose a { color: var(--ink); }

.page-body { max-width: 68ch; }
.page-body--wide { max-width: none; }
.page-body h2 { font-family: var(--sans); font-size: 22px; font-weight: 500; margin-top: 40px; margin-bottom: 10px; }
.page-body h2:first-child { margin-top: 0; }
.page-body p { font-size: 17px; line-height: 1.6; color: var(--ink); }
.page-body p + p { margin-top: 12px; }
.page-body a { color: var(--ink); }
.page-body .cats { max-width: none; }

/* ------------------------------------------------------------- detaljsida -- */

.detail { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: start; padding-block: clamp(2rem, 5vw, 48px); }
@media (max-width: 980px) { .detail { grid-template-columns: 1fr; gap: 40px; } }

.detail h1 { font-size: clamp(1.875rem, 3.6vw, 44px); letter-spacing: -0.018em; margin-block: 14px 18px; }
.detail__media { border-radius: var(--r-media); overflow: hidden; margin-bottom: 28px; background: var(--mist); }

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--ash); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Åtgärdspanelen är ett svävande produktfragment, inte ett innehållskort, och
   därför det enda elementet här som har skugga. */
.act { position: sticky; top: 24px; background: var(--paper); border-radius: var(--r-panel); box-shadow: var(--artifact); padding: 0; }
.act__inner { padding: 24px 20px 20px; }
.act .btn { width: 100%; }
.act__note { margin-top: 14px; font-size: 14px; color: var(--slate); line-height: 1.5; }

.facts { margin: 0 0 20px; display: grid; gap: 14px; }
.facts > div { display: grid; gap: 2px; }
.facts dt { font-size: 14px; color: var(--ash); }
.facts dd { margin: 0; font-size: 17px; }

/* ---------------------------------------------------------------- filter -- */

.filters { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 4px 24px; align-items: center; }
.chip {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding-inline: 18px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--slate);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-current='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip--odds[aria-pressed='true'] { background: var(--blush); border-color: var(--blush); color: var(--sienna); }

/* Valgt sortering. Samme svarte flate som en valgt lenke ville fått, slik at
   knappen og lenken ikke ser ut som to ulike slags kontroll. */
.chip[data-sortera][aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filters--sort { padding-block: 0 20px; }

/* -------------------------------------------------------------- formulär -- */

.form { display: grid; gap: 20px; max-width: 34rem; }
.field { display: grid; gap: 6px; }
.field label { font-size: 15px; font-weight: 500; }
.field .hint { font-size: 14px; color: var(--slate); }
.field .err { font-size: 14px; color: var(--urgent); }
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-input);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ash); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { min-height: 7rem; resize: vertical; }
.field[data-invalid] input, .field[data-invalid] textarea { border-color: var(--urgent); }

/* Honeypot: osynlig för människor, lockande för skript. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { padding: 20px; border-radius: var(--r-card); background: var(--blush); color: var(--sienna); font-size: 16px; }
.notice--bad { background: var(--urgent-soft); color: var(--urgent); }

/* ------------------------------------------------------------------ tomt -- */

.empty { padding: clamp(2.5rem, 6vw, 4rem) 1.5rem; text-align: center; background: var(--mist); border-radius: var(--r-card); }
.empty h3 { font-family: var(--sans); font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.empty p { color: var(--slate); max-width: 44ch; margin-inline: auto; margin-bottom: 20px; }

/* ------------------------------------------------------------- paginering -- */

.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; }
.pager__pos { font-size: 14px; color: var(--ash); }

/* ------------------------------------------------------------------- fot -- */

.foot { border-top: 1px solid var(--hairline); padding-block: 48px 40px; margin-top: var(--section); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(9rem, 1fr)); gap: 32px; }
.foot h4 { font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--ash); margin-bottom: 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { font-size: 16px; text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__legal {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ash);
}

/* -------------------------------------------------------------- notisfält -- */

/* Sajten sätter inga cookies. Det här är därför en upplysning och inte en
   samtyckesruta: den ber inte om lov, den berättar. */
.cookiebar {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: 40;
  max-width: 26rem;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 18px 18px 20px;
  background: var(--paper);
  border-radius: var(--r-panel);
  box-shadow: var(--artifact);
}
.cookiebar p { font-size: 15px; line-height: 1.5; color: var(--slate); }
.cookiebar a { color: var(--ink); }
.cookiebar[hidden] { display: none; }
@media (max-width: 620px) {
  .cookiebar { left: 12px; right: 12px; bottom: 12px; max-width: none; flex-direction: column; }
}

/* ---------------------------------------------------------------- rörelse -- */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ admin -- */

.admin-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.admin-table th { text-align: left; font-size: 14px; font-weight: 400; color: var(--ash); padding: 10px 12px; border-bottom: 1px solid var(--rule-strong); }
.admin-table td { padding: 14px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-actions button {
  font-family: var(--sans);
  font-size: 14px;
  height: 34px;
  padding-inline: 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.admin-actions button:hover { border-color: var(--ink); }
.admin-actions button[data-variant='go'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.admin-actions button[data-variant='no']:hover { border-color: var(--urgent); color: var(--urgent); }