/* Stakker — stakker.co
   Ett enda system: fyra-punktsraster for avstand, en linjetjocklek,
   tre horn-radier, sex typsteg. Ingen fargaccent — kontrasten ar accenten. */

/* ---------- Tokens ---------- */
:root {
  /* Avstand: allt ar en multipel av 4. Anvand bara dessa. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Sektionsrytm: samma varde overallt, aldrig en engangssiffra. */
  --sektion: clamp(72px, 9vw, 128px);
  --ranna: clamp(20px, 4vw, 48px);
  --max: 1240px;
  --matt: 62ch;

  /* Typsteg */
  --t-hero: clamp(2.75rem, 7.4vw, 6.25rem);
  --t-xl: clamp(2rem, 4.2vw, 3.5rem);
  --t-lg: clamp(1.375rem, 2.2vw, 1.875rem);
  --t-md: 1.1875rem;
  --t-bas: 1.0625rem;
  --t-sm: 0.9375rem;
  --t-xs: 0.75rem;

  /* Form */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-pill: 999px;
  --linje: 1px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Farg */
  --paper: #faf9f8;
  --paper-2: #f3f2f0;
  --ink: #0d0d0c;
  /* Brodtexten lag pa #55534f och las som gra. Nu nara svart. */
  --ink-2: #26241f;
  --ink-3: #6b6963;
  --rule: #dedcd7;
  --skugga: 0 1px 2px rgba(13, 13, 12, 0.04), 0 12px 32px -16px rgba(13, 13, 12, 0.14);
}

html[data-tema='dark'] {
  --paper: #0d0d0c;
  --paper-2: #171614;
  --ink: #f4f3f1;
  --ink-2: #e2e0dc;
  --ink-3: #918f8a;
  --rule: #2b2a28;
  --skugga: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.7);
}

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

/* Ingen scroll-behavior: smooth. Sidan ska rulla exakt sa fort som fingret eller
   hjulet sager, aldrig i en animation ovanpa. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-bas);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

/* Har stod overflow-x: hidden pa body. Den ar borta, och det ska den vara.
   overflow-x: hidden gor body till en rullningsyta i WebKit. Da har sidan tva
   rullningslager i varandra: fingret drar det ena, och nar riktningen vander drar
   webblasaren det andra tillbaka -- ett hopp uppat till blocket ovanfor, precis det
   felet. Regeln var dessutom onodig: ingenting pa sidan sticker ut i sidled pa nagon
   bredd fran 390 till 1440 px. Lagg den inte tillbaka som en forsiktighetsatgard;
   ratta det som sticker ut i stallet. */

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-sm); letter-spacing: -0.01em; }

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

.skip {
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  padding: var(--sp-2) var(--sp-4); background: var(--ink); color: var(--paper);
  border-radius: var(--r-pill); transform: translateY(-200%); z-index: 100;
}
.skip:focus { transform: none; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--ranna); }

/* Ankarlankarna i foten far inte lagga rubriken under det klistrade huvudet. */
section[id] { scroll-margin-top: 96px; }

/* ---------- Typklasser ---------- */
.h-hero { font-size: var(--t-hero); }
.h-xl { font-size: var(--t-xl); }
.h-lg { font-size: var(--t-lg); line-height: 1.12; }

.eyebrow {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: var(--sp-5);
}

.lead { font-size: var(--t-md); color: var(--ink-2); max-width: 46ch; }
.fineprint { font-size: var(--t-sm); color: var(--ink-3); }

/* ---------- Knappar ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: 52px; padding: 0 var(--sp-6);
  border: var(--linje) solid transparent; border-radius: var(--r-pill);
  font-size: var(--t-bas); font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--sm { min-height: 42px; padding: 0 var(--sp-5); font-size: var(--t-sm); }
.btn--ink { background: var(--ink); color: var(--paper); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-8); font-weight: 700; text-decoration: none;
  border-bottom: var(--linje) solid var(--rule); padding-bottom: var(--sp-1);
}
.link-arrow svg { transition: transform 0.2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Huvud ---------- */
.header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: var(--linje) solid transparent;
  transition: border-color 0.3s var(--ease);
}
.header--scrolled { border-bottom-color: var(--rule); }
.header__inner {
  max-width: var(--max); margin-inline: auto; padding: var(--sp-4) var(--ranna);
  display: flex; align-items: center; gap: var(--sp-6);
}
.mark { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.mark__glyph { width: 22px; height: 22px; }
.mark__word { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.04em; }
.header__actions { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }

/* ---------- Hjalten ----------
   Rent typografisk. Har stod ett kopt fotografi i helskarm med rubriken over;
   det gjorde forsta intrycket till en bildbank i stallet for en produkt. */
.hero { padding-block: clamp(var(--sp-12), 8vh, var(--sp-24)) var(--sektion); }
.hero__grid {
  display: grid; gap: var(--sp-16); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
}
.hero__inner { max-width: 34rem; }
.hero__vy { justify-self: end; }
.hero .h-hero { letter-spacing: -0.045em; }
.hero__lead { margin-top: var(--sp-6); font-size: var(--t-md); color: var(--ink-2); max-width: 38ch; }
.hero .fineprint { margin-top: var(--sp-5); }

/* ---------- Utgivarraden ----------
   Kortet ar samma form som i appens Discover: market, namnet, avsandarens egen
   beskrivning, amnet. Byggs av sajt-verktyg/utgivare.py -- redigera inte HTML. */
.upptack { padding-bottom: var(--sektion); }
.upptack__head .h-xl { max-width: 20ch; }
.upptack__head { max-width: 36rem; margin-bottom: var(--sp-12); }
.upptack__head .lead { margin-top: var(--sp-5); }

/* Marken i tva rader som glider i sidled av sig sjalva medan sidan rullar, en at
   vardera hallet.

   Tva forsok ligger begravda har, sa att de inte gors om:
   1. Raderna var sidledsrullande lador (overflow-x: auto). Pa iPhone hoppade sidan
      uppat till blocket ovanfor sa fort man rullade uppat under avsnittet.
   2. Den verkliga orsaken var `overflow-x: hidden` pa body, som gor body till en
      rullningsyta i WebKit. Tva rullningslager i varandra: fingret drog det ena, och
      nar riktningen vande drog webblasaren det andra tillbaka. Den regeln ar borta.
      Lagg ALDRIG tillbaka den; ratta det som sticker ut i stallet.

   Nu finns ingen rullningsyta kvar i raderna over huvud taget. Raden ar en enda bred
   flexrad, och den flyttas med transform. En transform ror inte layouten -- den kan
   varken andra sidans hojd eller dess rullningslage, och kan darfor inte hoppa.
   `.rader` klipper med `clip`, inte `hidden`: clip skapar ingen rullningsyta.
   Sjalva forflyttningen rakans ut i app.js. */
.rader {
  display: grid; gap: var(--sp-3);
  overflow-x: clip;
  overflow-y: visible;
}

.rad {
  display: flex;
  gap: var(--sp-3);
  width: max-content;
  /* Forsta kortet borjar dar rubriken borjar. */
  padding-inline: max(var(--ranna), calc((100vw - var(--max)) / 2 + var(--ranna)));
  /* Sager at webblasaren att lagga raden i ett eget lager pa grafikkortet, sa att
     forflyttningen inte kostar en omritning av sidan. */
  will-change: transform;
}

/* Hur langt raden glider satts av app.js som --vag, eftersom det beror pa hur breda
   korten blev. Sjalva rorelsen driver webblasaren, inte skriptet. */
@keyframes rad-vanster {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--vag, 0px)), 0, 0); }
}
@keyframes rad-hoger {
  from { transform: translate3d(calc(-1 * var(--vag, 0px)), 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* Rorelsen kopplas till hur langt raderna gatt genom rutan -- inte till tid, och
   inte till ett skript. Sedan Safari 26.4 kor WebKit scroll-drivna animationer pa
   egen trad, alltsa helt utanfor huvudtraden: rullningen kan da inte hacka av att
   sidan har nagot annat att gora. Det var precis felet med den forsta versionen,
   som rakande ut lagena i ett rullningslyssnare och en requestAnimationFrame.
   Skriptet har en egen variant kvar for webblasare utan detta stod. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Tidslinjen sitter pa ladan, inte pa raderna: bada raderna ska rora sig i takt
       med samma passage genom rutan. Lag den pa raderna skulle den overe raden --
       som ar lika hog -- anda fa en egen aning annan rakning. */
    .rader { view-timeline-name: --marken; }
    .rad {
      animation: rad-vanster linear both;
      animation-timeline: --marken;
    }
    .rad:nth-child(even) { animation-name: rad-hoger; }
  }
}

.utg {
  flex: 0 0 auto; width: clamp(216px, 22vw, 254px);
  display: flex; flex-direction: column; min-width: 0;
  padding: var(--sp-5); border-radius: var(--r-md);
  background: var(--paper-2); border: var(--linje) solid transparent;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.utg:hover { border-color: var(--rule); transform: translateY(-2px); }
.utg__namn { font-size: var(--t-md); line-height: 1.15; margin-top: var(--sp-5); }
.utg__text {
  margin-top: var(--sp-2); font-size: var(--t-sm); color: var(--ink-2);
  line-height: 1.45;
}
.utg__amne {
  margin-top: auto; padding-top: var(--sp-5);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
}

/* Market. Med logotyp ar plattan alltid vit -- ett marke ar ritat for sin egen
   bakgrund, och pa morkt papper forsvinner halften av dem. Utan logotyp ritas
   bokstaven pa avsandarens egen farg, som skriptet raknar fram sa kontrasten
   haller; CDLP:s gula ar ett riktigt varumarke, inte en platshallare. */
.mrk {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--platta, var(--rule)); color: var(--bokstav, var(--ink));
  font-size: 1.375rem; font-weight: 900; letter-spacing: -0.03em;
}
.mrk--logo { background: #fff; box-shadow: inset 0 0 0 var(--linje) rgba(13, 13, 12, 0.08); }
.mrk--logo img { width: 36px; height: 36px; object-fit: contain; }

/* ---------- Inkorgen ---------- */
/* En avbild av appens inkorg, inte en tolkning. Matten ar hamtade ur
   components/IssueCard.tsx och constants/theme.ts: kortets ram 16px radie och
   1px #E5E5E5, skuggan 0 6px 14px rgba(0,0,0,0.08), innermattet 16px med 9px
   mellan raderna, rubriken 17/22 med -0.3 i sparr, olastpricken 8px vid
   right:14 top:16, logotypen 28px. Skarmen ar ljus aven i morkt lage, for
   appen ar ljus -- ett morkt lage vi inte har byggt far inte visas som om det
   fanns.

   Har star medvetet ingen tidsangivelse. Appen skriver relativ tid ur
   lib/time.ts, och pa en statisk sida hade den varit det enda pahittade i hela
   komponenten. Rubrikerna ar ordagranna amnesrader med kalla i inkorg.json. */
/* Telefonen. Ramen ar en tunn silhuett, inte en fotografisk attrapp: ingen
   falsk urklippning, ingen statusrad med pahittad tid, inget tillverkarmarke.
   Skarmen klipps nedtill for att en inkorg fortsatter under kanten. */
.telefon {
  width: 100%; max-width: 21rem;
  padding: 10px; border-radius: 46px;
  background: #0d0d0c;
  box-shadow: 0 30px 60px -20px rgba(13, 13, 12, 0.45),
              0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.telefon__skarm {
  position: relative;
  aspect-ratio: 390 / 844; overflow: hidden;
  padding: var(--sp-5) var(--sp-4) 0;
  border-radius: 37px;
  background: #f7f7f7;
}
.telefon__skarm .skarm__titel { margin-bottom: var(--sp-4); }
.telefon__skarm::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1.5rem;
  background: linear-gradient(to top, #f7f7f7, rgba(247, 247, 247, 0));
  pointer-events: none;
}
.skarm__titel {
  font-size: 1.875rem; font-weight: 800; letter-spacing: -0.04em;
  line-height: 1.1; color: #111; margin-bottom: var(--sp-5);
}
.stack { display: grid; gap: var(--sp-3); }

.brev {
  position: relative;
  display: grid; gap: 9px;
  padding: 16px 34px 16px 16px;
  border-radius: 16px;
  background: #fff; border: 1px solid #e5e5e5;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.brev__topp { display: flex; align-items: center; gap: 7px; }
.mrk--liten { width: 28px; height: 28px; border-radius: 8px; }
.mrk--liten img { width: 20px; height: 20px; }
.brev__avs { font-size: 12px; font-weight: 700; color: #111; }
.brev__rubrik {
  font-size: 17px; line-height: 22px; font-weight: 800;
  letter-spacing: -0.3px; color: #111; margin: 0;
}
.brev__prick {
  position: absolute; right: 14px; top: 16px;
  width: 8px; height: 8px; border-radius: 8px; background: #111;
}

.inkorg__kalla {
  max-width: 21rem; margin-top: var(--sp-5); text-align: center;
  font-size: var(--t-xs); color: var(--ink-3);
  text-wrap: balance;
}
.inkorg__kalla a {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
}

/* ---------- Mekaniken ---------- */
.hur { padding-block: var(--sektion); border-top: var(--linje) solid var(--rule); }
.hur__grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(var(--sp-10), 6vw, var(--sp-20)); align-items: start;
}
.hur__intro { max-width: 46rem; margin-bottom: var(--sp-16); }
.hur__intro .lead { margin-top: var(--sp-5); max-width: 52ch; }

/* Forloppslinjen langs stegen: samma tanke som mattet under markesraden, men
   lodratt. Hojden satts av app.js ur avsnittets vag genom vyn. */
.hur__lista { position: relative; padding-left: var(--sp-8); }
.hur__linje {
  position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
  background: var(--rule); border-radius: 2px; overflow: hidden;
}
.hur__linje i { display: block; width: 100%; height: 0; background: var(--ink); }
.hur__steg { display: grid; gap: var(--sp-12); margin: 0; padding: 0; list-style: none; }

/* Klassen satts av app.js, sa att stegen ar fullt lasbara utan skript och vid
   begaran om stillhet. Ett steg vaknar nar det passerar vyns nedre fjardedel. */
.hur__steg--vaknar > li {
  opacity: 0.3; transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.hur__steg--vaknar > li.is-vaken { opacity: 1; transform: none; }
.hur__nr {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--t-xs); color: var(--ink-3);
}
.hur__rubrik { margin-top: var(--sp-3); font-size: var(--t-lg); line-height: 1.12; }
.hur__text { margin-top: var(--sp-2); color: var(--ink-2); max-width: 40ch; }
.hur__not { margin-top: var(--sp-5); font-size: var(--t-sm); color: var(--ink-3); }

/* ---------- Komponenten ---------- */
.komp {
  background: var(--paper-2); border: var(--linje) solid var(--rule);
  border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--skugga);
}
.komp__etikett {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-3);
}
.komp__rad { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); }
.komp__rad .mono { font-weight: 400; }
.komp__rad .chip { margin-left: auto; }
.chip {
  display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-4);
  border: var(--linje) solid var(--rule); border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 700;
}


/* ---------- Avslutet ---------- */
.close { padding-block: var(--sektion); border-top: var(--linje) solid var(--rule); }
.close__inner { text-align: center; }
.close .h-xl { max-width: 18ch; margin-inline: auto; }
.close .fineprint { margin-top: var(--sp-5); }

/* ---------- Foten ---------- */
.footer { background: var(--paper-2); padding-top: var(--sektion); }
.footer__inner {
  max-width: var(--max); margin-inline: auto; padding: 0 var(--ranna) var(--sp-16);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: clamp(var(--sp-10), 6vw, var(--sp-20));
}
.footer__marke { display: grid; gap: var(--sp-4); align-content: start; }
.footer__marke .footer__brod { max-width: 18ch; }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-10); }
.footer__cols > div { display: grid; gap: var(--sp-3); align-content: start; }
.footer__rubrik {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-3);
}
.footer__cols a { font-size: var(--t-sm); text-decoration: none; color: var(--ink-2); }
.footer__cols a:hover { color: var(--ink); }
.footer__brod { font-size: var(--t-sm); color: var(--ink-2); }
.footer__brod a { text-decoration: underline; text-underline-offset: 3px; }
.footer__note {
  max-width: var(--max); margin-inline: auto;
  padding: var(--sp-5) var(--ranna); border-top: var(--linje) solid var(--rule);
  display: flex; justify-content: space-between; gap: var(--sp-6);
  font-size: var(--t-xs); color: var(--ink-3);
}

.doc { max-width: 46rem; margin-inline: auto; padding: var(--sektion) var(--ranna); }
.doc h1 { font-size: var(--t-xl); }
.doc h2 { font-size: var(--t-lg); margin-top: var(--sp-16); }
.doc p, .doc li { color: var(--ink-2); max-width: var(--matt); }
.doc p { margin-top: var(--sp-4); }
.doc ul { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.doc li { padding-left: var(--sp-5); position: relative; }
.doc li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 8px; height: var(--linje); background: var(--ink-3); }
.doc a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Avslojande ---------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease) var(--d, 0ms), transform 0.7s var(--ease) var(--d, 0ms);
}

/* ---------- Mindre skarmar ---------- */
@media (max-width: 900px) {
  .hur__grid,
  /* Skarmen under texten i stallet for vid sidan, och rutnattets 64px blir for
     stort nar spalterna staplas. */
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); }
  .hero__vy { justify-self: center; }
  .inkorg__kalla { margin-inline: auto; }
  .hur__visa { margin-top: var(--sp-4); max-width: 22rem; }
  .hur__intro { margin-bottom: var(--sp-12); }
  .hur__lista { padding-left: var(--sp-6); }
  .hur__steg { gap: var(--sp-10); }
  .footer__inner { grid-template-columns: minmax(0, 1fr); }
  .footer__cols { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
}

@media (max-width: 560px) {
  .btn { width: 100%; justify-content: center; }
  .btn--sm { width: auto; }
  .footer__note { flex-direction: column; gap: var(--sp-2); }
}

/* ---------- Hamtkortet: QR-koden for bordet ----------
   Ligger fast i nedre hogra hornet. Vilolaget ar dolt och utan pekhandelser, sa
   det finns inget att trycka pa forran skriptet slappt fram det -- och saknas
   skriptet syns det aldrig, vilket ar ratt: da finns inget satt att stanga det. */
.hamt {
  position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: 60;
  display: none; width: 188px;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  background: var(--paper); color: var(--ink);
  border: var(--linje) solid var(--rule); border-radius: var(--r-md);
  box-shadow: var(--skugga);
  text-align: center;
  opacity: 0; transform: translateY(12px) scale(0.98);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}
/* Bordet, och bara bordet: bred yta, ett pekdon som kan peka och hovra. En
   surfplatta far det inte -- dar ar telefonen redan i handen. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .hamt { display: block; }
}
.hamt.is-in { opacity: 1; transform: none; }

.hamt__rubrik {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-size: var(--t-sm); font-weight: 700;
}
.hamt__rubrik svg { flex: 0 0 auto; }

/* Tallriken ar alltid vit, aven i morkt lage. En QR-kod som vander pa fargerna
   lases inte av en kamera. */
.hamt__platta {
  display: block; margin-top: var(--sp-4); padding: var(--sp-2);
  background: #ffffff; border-radius: var(--r-sm);
}
.hamt__platta img { display: block; width: 100%; height: auto; }

.hamt__brod { margin-top: var(--sp-3); font-size: var(--t-xs); color: var(--ink-3); }

.hamt__stang {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  width: 28px; height: 28px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-3); cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.hamt__stang:hover { background: var(--paper-2); color: var(--ink); }

@media print { .hamt { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hamt { transition: none; }
  .reveal { opacity: 1; transform: none; }
  .utg { transition: none; }

}