/* ==========================================================================
   Merke — komponenter
   ========================================================================== */

/* ---- [ länk ] ---------------------------------------------------------
   Signaturlänken. Hakparenteserna är dekor (aria-hidden), texten ligger i
   .mk-link__wrap som klipper. Andra textkopian klonas av JS — inte i PHP:
   auto-editable.php:s handle_button() läser textContent på <a> och skulle
   spara "Se casetSe caset" samt kollapsa markupen till en textnod.
   ---------------------------------------------------------------------- */
.mk-link {
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  font-family: var(--mk-font-mono);
  font-size: var(--mk-fs-mono);
  letter-spacing: var(--mk-ls-label);
  text-transform: uppercase;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.mk-link__b { color: var(--mk-accent); flex: none; }
.mk-link:hover .mk-link__t { color: var(--mk-accent); }
.mk-link--lg { font-size: var(--mk-fs-body); }

/* ---- Case-kort --------------------------------------------------------
   Hover = blur + mörkare + text fram. Bara OPACITET animeras: en
   backdrop-filter-textur som byggs om varje frame är dyr, en som byggs en
   gång och fadas in är gratis. Bildens viloläge ligger i CSS (inte inline
   som referensen) — ett viloläge kan inte ge FOUC.
   ---------------------------------------------------------------------- */
.mk-case { position: relative; }
.mk-case__link { display: grid; gap: var(--mk-s-4); }

.mk-case__media {
  position: relative;
  display: block;
  overflow: clip;
  background: var(--mk-bg-2);
  isolation: isolate;          /* håller backdrop-filter inom kortet */
}
.mk-case__media::before { content: ''; display: block; padding-top: 62.5%; }

.mk-case__img,
.mk-case__media > picture > img,
.mk-case__media > canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(.88) saturate(.86);
  transform: scale(1) translateZ(0);
  transition: transform 700ms var(--mk-ease-quart);
}

.mk-case__veil {
  position: absolute; inset: 0;
  -webkit-backdrop-filter: blur(14px) brightness(.42) saturate(.85);
          backdrop-filter: blur(14px) brightness(.42) saturate(.85);
  /* Bara opacitet animeras. Att animera blur-STYRKAN tvingar GPU:n att bygga
     om den suddiga texturen varje frame; en färdig textur som fadas in är
     gratis. */
  transition: opacity 420ms var(--mk-ease-quart);
}
/* Firefox <103 och äldre Safari: färgad slöja + billig bildblur i
   fallback-grenen. Kostnaden är acceptabel eftersom den är sällsynt. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mk-case__veil { background: rgba(11, 11, 12, .62); }
  .mk-case:hover .mk-case__img { filter: contrast(.88) saturate(.86) blur(10px); }
}

.mk-case__meta {
  position: absolute;
  inset: auto var(--mk-s-5) var(--mk-s-5) var(--mk-s-5);
  display: grid;
  gap: var(--mk-s-2);
  color: #F2F1EE;              /* alltid ljus — ligger på mörknad bild */
}
.mk-case__meta-title {
  font-family: var(--mk-font-display);
  font-size: var(--mk-fs-h3);
  line-height: var(--mk-lh-tight);
  letter-spacing: var(--mk-ls-head);
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: none;
}
/* Hover-titeln ligger inuti bildytan, som är smalare än sidan. På små
   skärmar spillde långa kundnamn ("Axia Redovisningbyrå" mäter 12,7 em)
   ut ur kortet — h3-skalan är för grov här. */
@media (max-width: 560px) {
  .mk-case__meta { inset: auto var(--mk-s-4) var(--mk-s-4) var(--mk-s-4); }
  .mk-case__meta-title { font-size: clamp(1.125rem, 5.5vw, 1.625rem); }
}
.mk-case__meta-sub { color: rgba(242, 241, 238, .78); }

.mk-case__pill {
  /* Följer pekaren via --mx/--my, som mk-motion.js skriver på kortet.
     En custom property i stället för en tween: ingen ticker att frysa. */
  position: absolute;
  top: var(--my, 50%); left: var(--mx, 50%);
  padding: .5rem .9rem;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  background: rgba(244, 75, 78, .88);
  color: #0B0B0C;              /* mörk text på rött = 5.59:1; vit vore 3.52:1 */
  font-family: var(--mk-font-mono);
  font-size: var(--mk-fs-label);
  letter-spacing: var(--mk-ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--mk-r-pill);
  pointer-events: none;
  transition: opacity 380ms var(--mk-ease-quart), transform 380ms var(--mk-ease-quart);
}

.mk-case__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--mk-s-2) var(--mk-s-4);
  flex-wrap: wrap;              /* typen hoppar ner i stället för att klippas */
}
.mk-case__title {
  font-family: var(--mk-font-display);
  font-size: var(--mk-fs-h4);
  text-transform: uppercase;
  min-width: 0;                 /* utan detta krymper flex-item aldrig under sitt innehåll */
  overflow-wrap: break-word;
  hyphens: none;
}
.mk-case__type { color: var(--mk-fg-mute); }
@media (max-width: 620px) {
  .mk-case__foot { flex-direction: column; align-items: flex-start; }
}

/* Hover OCH tangentbordsfokus ger samma avslöjande. Utan fokusregeln vore
   hela hover-informationen otillgänglig med tangentbord. :has(:focus-visible)
   och inte :focus-within: ett musklick ger också fokus, och det fokuset låg
   kvar när man backade till sidan, så kortet stod suddigt. */
.mk-case:hover .mk-case__veil,
.mk-case:has(:focus-visible) .mk-case__veil { opacity: 1; }

.mk-case:hover .mk-case__meta,
.mk-case:has(:focus-visible) .mk-case__meta {
  opacity: 1; transform: none;
  transition: opacity 460ms var(--mk-ease-quart) 60ms, transform 460ms var(--mk-ease-quart) 60ms;
}

.mk-case:hover .mk-case__pill { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.mk-case:hover .mk-case__img,
.mk-case:has(:focus-visible) .mk-case__img { transform: scale(1.05); }

/* Touch: ingen hover-modell finns, så metan visas permanent och pillen
   hoppas över. mk-motion.js sätter .mk-touch på <html>. */
.mk-touch .mk-case__veil { opacity: .5; }
.mk-touch .mk-case__meta { opacity: 1; transform: none; }
.mk-touch .mk-case__pill { display: none; }

/* ---- Case-rutnät ------------------------------------------------------ */
.mk-casegrid { display: grid; gap: var(--mk-s-8) var(--mk-s-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .mk-casegrid { grid-template-columns: minmax(0, 1fr); } }
/* Vartannat kort skjuts ned — bryter rutnätets stelhet. */
@media (min-width: 761px) {
  .mk-casegrid > *:nth-child(even) { margin-top: var(--mk-s-10); }
}

/* ---- Marquee ----------------------------------------------------------
   Hastigheten sätts i px/s av JS (--mk-marquee-dur), inte i sekunder, så
   remsan går lika fort på mobil som på 4K. Pausar på hover/fokus så den
   faktiskt går att klicka i.
   ---------------------------------------------------------------------- */
.mk-marquee { overflow: clip; position: relative; }
.mk-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: mk-marquee var(--mk-marquee-dur, 30s) linear infinite;
}
.mk-marquee:hover .mk-marquee__track,
.mk-marquee:focus-within .mk-marquee__track { animation-play-state: paused; }
@keyframes mk-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }   /* exakt en kopia */
}
.mk-marquee__set { display: flex; align-items: center; flex: none; }
.mk-marquee__item {
  flex: none;
  /* gap som margin, inte gap: translateX(-50%) spricker med flex-gap
     eftersom gapet inte räknas in i bredden. */
  margin-right: clamp(2rem, 5vw, 4rem);
  display: flex; align-items: center; justify-content: center;
  /* Fast box i stället för fast höjd. Loggorna har vitt skilda proportioner —
     en kvadratisk sköld och en avlång ordbild ser olika stora ut vid samma
     höjd. Boxen + object-fit: contain balanserar dem optiskt. */
  width: clamp(6.5rem, 11vw, 9.5rem);
  height: clamp(2.75rem, 5vw, 3.5rem);
}
.mk-marquee__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  opacity: .5;
  filter: grayscale(1);
  transition: opacity var(--mk-swap) var(--mk-ease-quad), filter var(--mk-swap) var(--mk-ease-quad);
}
.mk-marquee__item:hover .mk-marquee__logo { opacity: 1; filter: grayscale(0); }

/* Text-marquee (ordremsa som sektionspaus) */
.mk-marquee--text .mk-marquee__item {
  font-family: var(--mk-font-display);
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: var(--mk-ls-display);
  white-space: nowrap;
}

/* ---- Credits ---------------------------------------------------------- */
.mk-credits { display: grid; }
.mk-credits__row {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
  gap: var(--mk-s-5);
  padding-block: var(--mk-s-4);
  border-top: 1px solid var(--mk-line);
}
.mk-credits__row:last-child { border-bottom: 1px solid var(--mk-line); }
.mk-credits dt { color: var(--mk-fg-mute); }
.mk-credits dd { margin: 0; }
@media (max-width: 620px) {
  .mk-credits__row { grid-template-columns: minmax(0, 1fr); gap: var(--mk-s-1); }
}

/* ---- Knapp ------------------------------------------------------------ */
.mk-btn {
  display: inline-flex; align-items: center; gap: var(--mk-s-3);
  padding: var(--mk-s-4) var(--mk-s-6);
  background: var(--mk-accent);
  color: var(--mk-accent-ink);
  font-family: var(--mk-font-mono);
  font-size: var(--mk-fs-label);
  letter-spacing: var(--mk-ls-label);
  text-transform: uppercase;
  border: 0; border-radius: var(--mk-r-pill);
  cursor: pointer;
  transition: background-color var(--mk-swap) var(--mk-ease-quad), color var(--mk-swap) var(--mk-ease-quad);
}
.mk-btn:hover { background: var(--mk-fg); color: var(--mk-bg); }
.mk-btn--ghost { background: transparent; color: var(--mk-fg); border: 1px solid var(--mk-line-strong); }
.mk-btn--ghost:hover { background: var(--mk-fg); color: var(--mk-bg); border-color: var(--mk-fg); }

/* ---- Hero ------------------------------------------------------------- */
.mk-hero {
  position: relative;
  min-height: 100svh;          /* svh, inte vh — annars hoppar hero när
                                  mobilens adressfält glider undan */
  display: grid;
  align-content: end;
  /* Ingen sidopadding här: innehållet ligger i .mk-wrap och får därmed
     exakt samma vänsterkant och maxbredd som alla andra sektioner. */
  padding-block: var(--mk-sec-lg) var(--mk-sec);
  overflow: clip;
  isolation: isolate;
}
.mk-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: clip; background: #000; }
.mk-hero__poster,
.mk-hero__bg > picture > img,
.mk-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Postern dämpas likadant som videon, annars syns ett hopp i mättnad
   i det ögonblick videon tonar in ovanpå. */
.mk-hero__poster,
.mk-hero__bg > picture > img { filter: saturate(.72) contrast(.95); }
/* Videon tonas in när den kan spela — ingen svart glimt, ingen pop. */
.mk-hero__video {
  opacity: 0;
  transition: opacity .8s var(--mk-ease-quart);
  filter: saturate(.72) contrast(.95);
}
.mk-hero.is-playing .mk-hero__video { opacity: 1; }

/* Scrimen är kontrastkravet, inte kosmetik: showreelen växlar mellan mörka
   klubbklipp och starkt färgade scenljus, så utan ett jämnt lager kan vit
   text hamna på en ljus frame och falla under 4,5:1. Tre lager:
     1) jämn ton över hela ytan — sätter ett golv oavsett vilken frame som visas
     2) gradient underifrån — bär ordmärket och länkraden
     3) gradient uppifrån — bär navraden
   Kontrasten mäts mot scrimen, aldrig mot videon. */
.mk-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(11,11,12,.93) 0%, rgba(11,11,12,.55) 42%, rgba(11,11,12,.12) 74%),
    linear-gradient(to bottom, rgba(11,11,12,.62) 0%, rgba(11,11,12,0) 30%),
    rgba(11, 11, 12, .22);
}
.mk-hero__content { position: relative; z-index: 3; display: grid; gap: var(--mk-s-6); }
.mk-hero__word {
  margin: 0;
  /* Optisk vänsterjustering: versaler i Archivo har en liten sidobearing,
     så ordmärket ser indraget ut mot ingressen under om man inte drar
     tillbaka det. */
  margin-left: -.045em;
  text-wrap: nowrap;
}
/* Mobil: bryt till två rader i stället för att krympa till oläslighet.
   "MERKS" ensamt mäter 4,7 em (uppmätt), så 92vw / 4,7 ≈ 19,5vw — 18vw
   ger marginal för den optiska indragningen. */
@media (max-width: 720px) {
  .mk-hero__word {
    font-size: clamp(2.75rem, 18vw, 9rem);
    text-wrap: balance;
    max-width: 6ch;
  }
}
.mk-hero__row {
  display: flex; align-items: end; justify-content: space-between;
  gap: var(--mk-s-5) var(--mk-s-8); flex-wrap: wrap;
}
/* Ingressen ska rymmas på EN rad och inte konkurrera med ordmärket. */
.mk-hero__lead { max-width: none; text-wrap: balance; }
@media (max-width: 900px) { .mk-hero__lead { max-width: 32ch; } }
.mk-hero__links { display: flex; gap: var(--mk-s-6); flex-wrap: wrap; }

/* ---- Pixel-reveal-canvas ----------------------------------------------
   Canvasen skjuts in bredvid <img> under effekten och tas bort efteråt,
   så DOM och SEO påverkas inte.
   ---------------------------------------------------------------------- */
.mk-pixel-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}

/* ---- Footer ----------------------------------------------------------- */
.mk-footer {
  padding-top: var(--mk-sec);
  border-top: 1px solid var(--mk-line);
  overflow: clip;
  /* Alltid mörk, oavsett sidans tema: logotyperna i varumärkesraden är vita
     negativ och skulle försvinna mot den ljusa bakgrunden på case-sidorna.
     Ger dessutom alla sidor samma avslut. */
  background: var(--mk-bg);
  color: var(--mk-fg);
}
/* CTA:n har en EGEN RAD i full bredd. Den låg tidigare i en 40 %-kolumn
   bredvid fyra länkkolumner, vilket bröt rubriken på två korta rader medan
   allt annat i footern löpte över hela bredden — det var det som läste som
   "mycket smalare än allt annat". */
.mk-footer__lead {
  display: grid;
  gap: var(--mk-s-6);
  justify-items: start;
  padding-block: var(--mk-s-9) var(--mk-s-10);
}
/* Ingen max-width. Rubriken ska bre ut sig som sidans övriga rubriker. */
.mk-footer__lead .mk-h2 { max-width: none; }

.mk-footer__top {
  padding-bottom: var(--mk-s-9);
  border-top: 1px solid var(--mk-line);
  padding-top: var(--mk-s-8);
}

.mk-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mk-s-6); }
@media (max-width: 700px) { .mk-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-footer__col { display: grid; gap: var(--mk-s-2); align-content: start; }
.mk-footer__col .mk-label { margin-bottom: var(--mk-s-2); }
.mk-footer__link {
  color: var(--mk-fg-mute);
  font-size: var(--mk-fs-sm);
  transition: color var(--mk-d-1) var(--mk-ease-quad);
}
.mk-footer__link:hover { color: var(--mk-accent); }
.mk-footer__social { display: inline-flex; align-items: center; gap: var(--mk-s-2); }
.mk-footer__social svg { flex: none; }

.mk-footer__bottom {
  display: flex; justify-content: space-between; gap: var(--mk-s-4); flex-wrap: wrap;
  padding-block: var(--mk-s-5);
  border-top: 1px solid var(--mk-line);
}

/* Liten vit logotyp under CTA:n. Footern är alltid mörk (data-theme="dark"),
   så den ljusa varianten gäller på alla sidor. */
.mk-footer__logo { display: block; margin-top: var(--mk-s-6); }
.mk-footer__logo img { display: block; width: 10rem; height: auto; opacity: .6; }

/* ---- Filter (arbeten) -------------------------------------------------- */
.mk-filter {
  display: flex; align-items: baseline; gap: var(--mk-s-5); flex-wrap: wrap;
  margin-top: var(--mk-s-8);
  padding-top: var(--mk-s-5);
  border-top: 1px solid var(--mk-line);
}
.mk-filter__item {
  font-family: var(--mk-font-mono);
  font-size: var(--mk-fs-mono);
  letter-spacing: var(--mk-ls-label);
  text-transform: uppercase;
  color: var(--mk-fg-mute);
  padding-bottom: var(--mk-s-1);
  border-bottom: 1px solid transparent;
  transition: color var(--mk-d-1) var(--mk-ease-quad), border-color var(--mk-d-1) var(--mk-ease-quad);
}
.mk-filter__item:hover { color: var(--mk-fg); }
.mk-filter__item.is-on { color: var(--mk-accent); border-bottom-color: var(--mk-accent); }
.mk-filter__count { margin-left: auto; color: var(--mk-fg-faint); white-space: nowrap; }
@media (max-width: 560px) {
  /* Räknaren hoppar ner på egen rad i stället för att tryckas ut ur skärmen. */
  .mk-filter__count { margin-left: 0; flex-basis: 100%; }
}



/* ---- Case-sidan ------------------------------------------------------- */
.mk-case-page { padding-top: var(--mk-s-6); }
/* Kompakt hero: titeln ska inte skjuta ner videon under vecket. */
.mk-case-hero {
  display: grid; gap: var(--mk-s-4);
  padding-block: var(--mk-s-10) var(--mk-s-8);
}
/* Titeln får hela bredden: med 34ch bröts långa namn ("UF Alumni Summer
   Weekend") till ett ord per rad. Bara ingressen hålls till läsbar bredd. */
.mk-case-hero .mk-h1 { max-width: none; }
.mk-case-hero .mk-lead { color: var(--mk-fg-mute); max-width: 60ch; }
/* Heron är en egen sektion, men luften ner till videon ges av .mk-case-hero.
   Sektionens padding-bottom ovanpå det sköt ner videon nästan en skärmhöjd. */
.mk-case-page > .mk-sec:first-child { padding-bottom: 0; }
.mk-case__opener { display: block; }

/* Flex, inte lika breda kolumner: ett långt kundnamn ("Ung Företagsamhet")
   bröts annars i sin kvartskolumn och gick ihop med året bredvid. Nu tar
   varje fält den bredd det behöver och avståndet mellan dem är fast. */
.mk-meta {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--mk-s-6) var(--mk-s-10);
  padding-block: var(--mk-s-6);
  border-top: 1px solid var(--mk-line);
  border-bottom: 1px solid var(--mk-line);
}
@media (max-width: 700px) { .mk-meta { column-gap: var(--mk-s-8); } }
.mk-meta__item { display: grid; gap: var(--mk-s-2); align-content: start; min-width: 0; }
.mk-meta dt { color: var(--mk-fg-mute); }
.mk-meta dd { margin: 0; font-size: var(--mk-fs-h4); font-family: var(--mk-font-display); text-transform: uppercase; }

/* ---- Video-facade ------------------------------------------------------ */
/* Proportionen ligger på CONTAINERN, inte på facaden. Facaden byts ut mot
   en iframe vid klick — låg höjden på den försvann den med, och iframen
   (position:absolute; inset:0) hamnade i en box med noll höjd. */
.mk-video { position: relative; background: #000; overflow: clip; }
.mk-video::before { content: ''; display: block; padding-top: 56.25%; }
.mk-video__facade {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.mk-video__thumb {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--mk-d-4) var(--mk-ease-quart), filter var(--mk-d-3) var(--mk-ease-quart);
  filter: contrast(.92);
}
.mk-video__facade:hover .mk-video__thumb { transform: scale(1.03); filter: contrast(1.02); }
.mk-video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  padding: var(--mk-s-4) var(--mk-s-7);
  background: var(--mk-accent); color: var(--mk-accent-ink);
  font-family: var(--mk-font-mono); font-size: var(--mk-fs-label);
  letter-spacing: var(--mk-ls-label); text-transform: uppercase;
  border-radius: var(--mk-r-pill);
  transition: transform var(--mk-d-2) var(--mk-ease-quart);
}
.mk-video__facade:hover .mk-video__play { transform: translate(-50%, -50%) scale(1.06); }
.mk-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Galleri ----------------------------------------------------------- */
.mk-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-s-5); }
.mk-gallery__item { margin: 0; }
.mk-gallery__item.is-wide { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .mk-gallery { grid-template-columns: minmax(0, 1fr); }
  .mk-gallery__item.is-wide { grid-column: auto; }
}
.mk-gallery-more { margin-top: var(--mk-s-6); }
.mk-gallery-more > summary { cursor: pointer; list-style: none; display: inline-flex; gap: .4em; }
.mk-gallery-more > summary::-webkit-details-marker { display: none; }
.mk-gallery-more[open] > summary { margin-bottom: var(--mk-s-6); }

/* ---- Nästa case -------------------------------------------------------- */
.mk-next { background: var(--mk-bg); color: var(--mk-fg); }
/* Etiketten behöver luft ner till titeln — de låg tidigare så tätt att
   "Nästa projekt" såg ut att sitta på samma linje som projektnamnet. */
.mk-next .mk-label { margin-bottom: var(--mk-s-6); }
.mk-next__link {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--mk-s-5); flex-wrap: wrap;
  padding-block: var(--mk-s-7);
  border-top: 1px solid var(--mk-line);
  border-bottom: 1px solid var(--mk-line);
  transition: color var(--mk-d-2) var(--mk-ease-quad);
}
.mk-next__link:hover { color: var(--mk-accent); }
.mk-next__type { color: var(--mk-fg-mute); }
.mk-next__title { min-width: 0; overflow-wrap: break-word; hyphens: none; }
.mk-next__back { margin-top: var(--mk-s-7); }

/* ---- Sidhuvud ----------------------------------------------------------
   Egen grid med explicit gap: rubrikerna har line-height ~1.0, så glyferna
   svämmar över sin radbox och lägger sig ovanpå etiketten ovanför om
   syskonen bara staplas med default-margin (som vi nollat i 02-base).
   ---------------------------------------------------------------------- */
.mk-pagehead { display: grid; gap: var(--mk-s-5); justify-items: start; }
.mk-pagehead .mk-label { margin-bottom: calc(var(--mk-s-1) * -1); }
.mk-pagehead .mk-lead { color: var(--mk-fg-mute); margin-top: var(--mk-s-2); }

/* ---- Startsidan -------------------------------------------------------- */
.mk-more { margin-top: var(--mk-s-9); display: flex; justify-content: center; }

.mk-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--mk-s-9);
  align-items: start;
}
@media (max-width: 900px) { .mk-about__grid { grid-template-columns: minmax(0, 1fr); gap: var(--mk-s-6); } }
.mk-about__grid .mk-label { margin-bottom: var(--mk-s-4); }
.mk-about__body { display: grid; gap: var(--mk-s-6); justify-items: start; }
.mk-about__body .mk-body { font-size: var(--mk-fs-lead); line-height: 1.55; }
.mk-about__links { display: flex; gap: var(--mk-s-6); flex-wrap: wrap; }

/* ---- Steg (om-sidan) --------------------------------------------------- */
.mk-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.mk-steps__item {
  display: grid; grid-template-columns: 3rem 1fr; gap: var(--mk-s-5);
  padding-block: var(--mk-s-6);
  border-top: 1px solid var(--mk-line);
}
.mk-steps__item:last-child { border-bottom: 1px solid var(--mk-line); }
.mk-steps__num { color: var(--mk-accent); padding-top: .35em; }
.mk-steps__item h3 { margin-bottom: var(--mk-s-3); }
@media (max-width: 620px) { .mk-steps__item { grid-template-columns: 1fr; gap: var(--mk-s-3); } }

/* ---- CTA --------------------------------------------------------------- */
.mk-cta {
  display: grid; gap: var(--mk-s-6); justify-items: start;
  padding: var(--mk-s-10) 0;
  border-top: 1px solid var(--mk-line);
}
/* Samma sak som i footern: rubriken ska få bre ut sig som sidans övriga
   rubriker, inte klämmas ihop av en snäv teckenbredd. */
.mk-cta .mk-h2 { max-width: 20ch; }
.mk-cta__links { display: flex; gap: var(--mk-s-6); flex-wrap: wrap; }

/* ---- Följ (om-sidan) -------------------------------------------------- */
/* Två stora kort i samma rutnätsspråk som varumärkesraden: hårfina linjer,
   ingen bakgrund förrän hover. Pilen och ikonen tar accentfärgen. */
.mk-follow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--mk-s-8);
  border-top: 1px solid var(--mk-line);
  border-left: 1px solid var(--mk-line);
}
@media (max-width: 640px) { .mk-follow { grid-template-columns: minmax(0, 1fr); } }
.mk-follow__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--mk-s-5);
  padding: var(--mk-s-8) var(--mk-s-6);
  border-right: 1px solid var(--mk-line);
  border-bottom: 1px solid var(--mk-line);
  color: var(--mk-fg);
  transition: background-color var(--mk-swap) var(--mk-ease-quad);
}
.mk-follow__card:hover { background: rgba(242, 241, 238, .04); }
.mk-follow__icon { transition: color var(--mk-swap) var(--mk-ease-quad); }
.mk-follow__text { display: grid; gap: var(--mk-s-1); min-width: 0; }
.mk-follow__handle { color: var(--mk-fg-mute); overflow-wrap: anywhere; }
.mk-follow__arrow {
  font-size: 1.5rem; line-height: 1;
  transition: transform var(--mk-swap) var(--mk-ease-quad), color var(--mk-swap) var(--mk-ease-quad);
}
.mk-follow__card:hover .mk-follow__icon,
.mk-follow__card:hover .mk-follow__arrow { color: var(--mk-accent); }
.mk-follow__card:hover .mk-follow__arrow { transform: translate(.15em, -.15em); }

/* ---- Villkorssida ------------------------------------------------------ */
.mk-terms__body { display: grid; gap: var(--mk-s-8); margin-top: var(--mk-s-9); }
.mk-terms__section { display: grid; gap: var(--mk-s-4); }
.mk-terms__section h2 {
  font-family: var(--mk-font-display);
  padding-bottom: var(--mk-s-3);
  border-bottom: 1px solid var(--mk-line);
}
.mk-terms__section p { color: var(--mk-fg-mute); line-height: 1.65; }
.mk-terms__list { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--mk-s-2); }
.mk-terms__list li { color: var(--mk-fg-mute); line-height: 1.6; }
.mk-terms__list li::marker { color: var(--mk-accent); }
.mk-terms__meta { margin-top: var(--mk-s-9); padding-top: var(--mk-s-5); border-top: 1px solid var(--mk-line); }
.mk-terms__meta a { color: var(--mk-accent); text-decoration: underline; text-underline-offset: .18em; }

/* ---- Letter-rise -------------------------------------------------------
   Två staplade textkopior i en klippande wrap. Vid hover glider båda upp
   exakt en radhöjd, så kopia 2 tar kopia 1:s plats. Ren CSS — ingen tween
   som kan frysa.
   ---------------------------------------------------------------------- */
.mk-link__t,
.mk-link__t--dup {
  transition: transform 460ms var(--mk-ease-quint), color var(--mk-d-2) var(--mk-ease-quad);
}
.mk-link:hover .mk-link__t,
.mk-link:focus-visible .mk-link__t,
.mk-nav__item:hover .mk-link__t,
.mk-nav__item:focus-visible .mk-link__t,
.mk-nav__toggle:hover .mk-link__t,
.mk-nav__toggle:focus-visible .mk-link__t { transform: translateY(-100%); }

/* ---- Varumärken --------------------------------------------------------
   Ligger i footern, alltså på varje sida. Rutnät med hairlines i samma språk
   som credits och metaraden. Namnen bor i alt-texten, inte under logotypen —
   raden ska läsas som en vägg av märken, inte som en lista.
   ---------------------------------------------------------------------- */
.mk-brands { padding-bottom: var(--mk-s-9); }
.mk-brands__label { color: var(--mk-fg-mute); margin-bottom: var(--mk-s-5); }

.mk-brands__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--mk-line);
  border-left: 1px solid var(--mk-line);
}
@media (max-width: 1100px) { .mk-brands__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .mk-brands__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .mk-brands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mk-brand {
  display: block;
  padding: var(--mk-s-5) var(--mk-s-4);
  border-right: 1px solid var(--mk-line);
  border-bottom: 1px solid var(--mk-line);
  transition: background-color var(--mk-swap) var(--mk-ease-quad);
}
.mk-brand:hover { background: rgba(242, 241, 238, .04); }

/* width/height + object-fit: contain, INTE auto + max-height. En procentuell
   max-height löses inte mot en grid-area vars höjd kommer från clamp(), så
   logotyperna behöll sin naturliga storlek och svämmade ut över raden under. */
/* Cellen har en fast höjd så raderna blir jämna; loggan centreras i den och
   får sin höjd ur --mk-logo-s (lika visuell yta, sätts i brands.php). */
.mk-brand {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(clamp(2.6rem, 4.6vw, 3.6rem) * 1.35 + 2 * var(--mk-s-5));
}
.mk-brand img {
  display: block;
  width: 100%;
  height: calc(clamp(2.6rem, 4.6vw, 3.6rem) * var(--mk-logo-s, 1));
  object-fit: contain;
  object-position: center;
  opacity: .45;
  filter: grayscale(1);
  transition: opacity var(--mk-swap) var(--mk-ease-quad), filter var(--mk-swap) var(--mk-ease-quad);
}
.mk-brand:hover img { opacity: 1; filter: grayscale(0); }

/* ---- Bio (om-sidan) ---------------------------------------------------- */
.mk-bio {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: var(--mk-s-10);
  align-items: start;
}
@media (max-width: 900px) { .mk-bio { grid-template-columns: minmax(0, 1fr); gap: var(--mk-s-7); } }
.mk-bio__figure { margin: 0; display: grid; gap: var(--mk-s-3); }
.mk-bio__caption { color: var(--mk-fg-faint); }
.mk-bio__body { display: grid; gap: var(--mk-s-6); padding-top: var(--mk-s-2); }
.mk-bio__body .mk-body { font-size: var(--mk-fs-lead); line-height: 1.55; }
/* Sista stycket lyfts ut som ett citat — det är personligt, inte information. */
.mk-bio__pull {
  font-family: var(--mk-font-display);
  font-size: var(--mk-fs-h3);
  line-height: 1.15;
  letter-spacing: var(--mk-ls-head);
  text-transform: uppercase;
  max-width: 18ch;
  padding-top: var(--mk-s-4);
  border-top: 1px solid var(--mk-line);
}

/* ==========================================================================
   Kontakt

   Ombyggd. Den första versionen numrerade fälten 01–05 och gömde telefon och
   e-post i en sidokolumn — vilket fick en enkel förfrågan att se ut som en
   blankett och begravde den snabbaste vägen in.
   ========================================================================== */

.mk-kontakt__intro { max-width: 46ch; }

/* ---- Direktkontakt -----------------------------------------------------
   Ligger före formuläret. De flesta som hör av sig om en produktion vill
   ringa eller mejla; formuläret är för dem som hellre skriver.
   ---------------------------------------------------------------------- */
.mk-direct {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: var(--mk-s-9) 0 var(--mk-s-10);
  background: var(--mk-line);
  border: 1px solid var(--mk-line);
}
@media (max-width: 720px) { .mk-direct { grid-template-columns: minmax(0, 1fr); } }

.mk-direct__item {
  display: grid;
  gap: var(--mk-s-2);
  padding: var(--mk-s-6);
  background: var(--mk-bg);
  transition: background-color var(--mk-swap) var(--mk-ease-quad),
              color var(--mk-swap) var(--mk-ease-quad);
}
a.mk-direct__item:hover { background: var(--mk-accent); color: var(--mk-accent-ink); }
a.mk-direct__item:hover .mk-direct__label { color: var(--mk-accent-ink); opacity: .7; }
.mk-direct__item--static { cursor: default; }

.mk-direct__label {
  font-size: var(--mk-fs-sm);
  color: var(--mk-fg-mute);
  transition: color var(--mk-swap) var(--mk-ease-quad);
}
.mk-direct__value {
  font-family: var(--mk-font-display);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: var(--mk-ls-head);
  overflow-wrap: anywhere;
  hyphens: none;                /* aldrig avstava en e-postadress */
}
.mk-direct__globe { text-transform: none; }

/* ---- Formulär ---------------------------------------------------------- */
.mk-form { display: grid; gap: var(--mk-s-9); max-width: 44rem; }

.mk-form__group { border: 0; margin: 0; padding: 0; display: grid; gap: var(--mk-s-5); }
.mk-form__legend {
  /* Grupprubrik, inte etikett: den delar formuläret i två begripliga steg. */
  font-family: var(--mk-font-display);
  font-size: var(--mk-fs-h4);
  text-transform: uppercase;
  letter-spacing: var(--mk-ls-head);
  padding: 0 0 var(--mk-s-4);
  margin-bottom: var(--mk-s-1);
  border-bottom: 1px solid var(--mk-line);
  width: 100%;
}

.mk-field__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-s-5); }
@media (max-width: 620px) { .mk-field__row { grid-template-columns: minmax(0, 1fr); } }

.mk-field { position: relative; display: grid; gap: var(--mk-s-2); border: 0; margin: 0; padding: 0; }

/* Etiketterna är brödtext, inte spärrad mono. Mono här var kostym: det
   gjorde enkla ord som "Namn" långsammare att läsa utan att tillföra något. */
.mk-field__label {
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-sm);
  font-weight: 500;
  color: var(--mk-fg);
  letter-spacing: 0;
  text-transform: none;
}
.mk-field__hint { color: var(--mk-fg-mute); font-weight: 400; }

.mk-field__input {
  width: 100%;
  padding: var(--mk-s-4);
  background: var(--mk-bg-2);
  border: 1px solid var(--mk-line-strong);
  border-radius: var(--mk-r-1);
  font-family: var(--mk-font-body);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--mk-fg);
  transition: border-color var(--mk-d-1) var(--mk-ease-quad),
              background-color var(--mk-d-1) var(--mk-ease-quad);
}
.mk-field__input--area { resize: vertical; min-height: 8rem; }
/* --mk-fg-faint gav 3,88:1 mot basen — under kravet på 4,5:1 för
   placeholder-text. --mk-fg-mute ger 7,38:1. */
.mk-field__input::placeholder { color: var(--mk-fg-mute); opacity: 1; }
.mk-field__input:hover { border-color: var(--mk-fg-faint); }
.mk-field__input:focus {
  outline: 2px solid var(--mk-accent);
  outline-offset: 2px;
  border-color: var(--mk-accent);
  background: var(--mk-bg);
}

.mk-field.is-error .mk-field__input { border-color: var(--mk-accent); }
.mk-field__err {
  display: flex; gap: var(--mk-s-2);
  font-size: var(--mk-fs-sm);
  color: var(--mk-accent-hi);
}
.mk-field__err::before { content: '↳'; flex: none; opacity: .7; }

.mk-form__alert {
  padding: var(--mk-s-4) var(--mk-s-5);
  border: 1px solid var(--mk-accent);
  border-radius: var(--mk-r-1);
  background: var(--mk-accent-soft);
  color: var(--mk-fg);
  font-size: var(--mk-fs-sm);
}

/* ---- Chips ------------------------------------------------------------- */
.mk-chips { display: flex; flex-wrap: wrap; gap: var(--mk-s-3); }
.mk-chip { position: relative; }
.mk-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.mk-chip span {
  display: inline-block;
  padding: .625rem 1.1rem;
  cursor: pointer;
  border: 1px solid var(--mk-line-strong);
  border-radius: var(--mk-r-pill);
  font-size: var(--mk-fs-sm);
  color: var(--mk-fg-mute);
  transition: background-color var(--mk-d-1) var(--mk-ease-quad),
              color var(--mk-d-1) var(--mk-ease-quad),
              border-color var(--mk-d-1) var(--mk-ease-quad);
}
.mk-chip span:hover { border-color: var(--mk-fg); color: var(--mk-fg); }
.mk-chip input:checked + span {
  background: var(--mk-accent); color: var(--mk-accent-ink);
  border-color: var(--mk-accent); font-weight: 500;
}
.mk-chip input:focus-visible + span { outline: 2px solid var(--mk-accent); outline-offset: 3px; }

/* ---- Skicka ------------------------------------------------------------
   En riktig knapp. Tidigare var sidans enda primära handling formad som en
   textlänk, vilket gjorde den svår att hitta.
   ---------------------------------------------------------------------- */
.mk-form__foot { display: flex; align-items: center; gap: var(--mk-s-5); flex-wrap: wrap; }
.mk-btn--submit { font-family: var(--mk-font-body); font-size: 1rem; font-weight: 500;
                  letter-spacing: 0; text-transform: none; padding: var(--mk-s-4) var(--mk-s-7); }
.mk-form__note { color: var(--mk-fg-mute); font-size: var(--mk-fs-sm); }

/* ---- Kvitto ------------------------------------------------------------ */
.mk-receipt { display: grid; gap: var(--mk-s-5); justify-items: start; max-width: 40rem; }
.mk-receipt:focus { outline: none; }
.mk-receipt .mk-lead { color: var(--mk-fg-mute); max-width: 46ch; }
.mk-receipt__actions { display: flex; align-items: center; gap: var(--mk-s-6); flex-wrap: wrap; margin-top: var(--mk-s-3); }

/* Varumärkena som egen sektion på startsidan (i footern på övriga sidor). */
.mk-brands--section .mk-brands__label { margin-bottom: var(--mk-s-6); }

/* ==========================================================================
   Hamburgare

   Port av "menu-toggle" från React till CSS. Ett enda path animerar mellan
   hamburgare och kryss via stroke-dasharray, plus en rotation på -45°.
   ========================================================================== */
.mk-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -.5rem;      /* optisk kant mot rännan */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--mk-fg);
  transition: color var(--mk-d-1) var(--mk-ease-quad);
}
.mk-burger:hover { color: var(--mk-accent); }
.mk-burger:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; border-radius: var(--mk-r-1); }

.mk-burger svg {
  width: 1.75rem; height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 600ms var(--mk-ease-quart);
}
.mk-burger path {
  transition: stroke-dasharray 600ms var(--mk-ease-quart),
              stroke-dashoffset 600ms var(--mk-ease-quart),
              opacity 260ms var(--mk-ease-quad);
}
/* Beskär den långa kurvan till bara det översta strecket i vila. */
.mk-burger .mk-burger__morph { stroke-dasharray: 12 63; }

/* Öppet: rotationen plus den utritade kurvan bildar ett kryss, och det
   nedersta strecket försvinner så bara två linjer står kvar. */
.mk-nav.is-open .mk-burger svg { transform: rotate(-45deg); }
.mk-nav.is-open .mk-burger .mk-burger__morph {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42px;
}
.mk-nav.is-open .mk-burger .mk-burger__bottom { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .mk-burger svg, .mk-burger path { transition-duration: 1ms; }
}