/* Lipio Kunskap — motion design-testsida.
   Delar tokens med redesign.css (lipio.se) men lever helt fristående. */

:root {
  --paper: #faf8f4;
  --paper-tint: #f1ede4;
  --ink: #16291d;
  --pine: #2d5a3f;
  --sage: #b8c5b4;
  --sage-soft: #dce5d9;
  --sage-mist: #e9efe6;
  --terra: #cf6244;
  --night: #0c1710;
  --night-2: #14261b;
  --font-display: "Cabinet Grotesk", "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter Tight", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--sage-soft);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}
::selection { background: var(--sage-soft); color: var(--ink); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- Nav ---------- */
.mnav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  /* Samma horisontella gutter som hero-texten och sektionerna, så
     wordmarken linjerar exakt med "Kunskap."-blocket längre ner. */
  padding: 14px clamp(20px, 5vw, 64px);
  transition: background .35s ease, box-shadow .35s ease;
}
.mnav.solid { background: rgba(250,248,244,.88); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(22,41,29,.08); }
.mnav .wordmark {
  /* Weight 700 = samma vikt som lipio.se-redesignens wordmark. */
  font-family: var(--font-display); font-weight: 700; font-size: 27px;
  letter-spacing: -.02em; color: var(--ink); transition: color .35s ease;
}
.mnav .wordmark b { color: var(--terra); }
.mnav.ondark .wordmark { color: var(--paper); }
.mnav__right { display: flex; align-items: center; gap: 10px; }
.mnav__back {
  font-size: 13px; font-weight: 500; color: rgba(22,41,29,.72);
  padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(22,41,29,.2);
  transition: color .35s ease, border-color .35s ease;
}
.mnav.ondark .mnav__back { color: rgba(250,248,244,.72); border-color: rgba(250,248,244,.25); }
.mnav__cta {
  font-size: 13px; font-weight: 600; color: var(--paper);
  background: var(--terra); padding: 10px 18px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(207,98,68,.32);
}
@media (max-width: 640px) { .mnav__back { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; height: 460vh; }
@media (max-width: 768px) { .hero { height: 420vh; } }

.hero__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(220,229,217,.72) 0%, rgba(220,229,217,0) 55%),
    linear-gradient(180deg, rgba(220,229,217,.55) 0%, rgba(220,229,217,0) 30%);
}

.hero__txt {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 0 clamp(20px, 5vw, 64px) clamp(84px, 12vh, 130px);
  pointer-events: none;
}
.hero__txt .eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pine); margin-bottom: 14px;
}
.hero__txt h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(56px, 14vw, 150px); line-height: .94; letter-spacing: -.03em;
  color: var(--ink);
}
.hero__txt h1 em { font-style: normal; color: var(--terra); }
.hero__txt p {
  margin-top: 18px; max-width: 34ch;
  font-size: clamp(15px, 2.2vw, 19px); color: rgba(22,41,29,.72);
}

.hero__mid, .hero__mid2, .hero__end {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 0 clamp(20px, 6vw, 80px);
  opacity: 0; pointer-events: none;
}
.hero__mid h2, .hero__mid2 h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 6.5vw, 64px); line-height: 1.06; letter-spacing: -.02em;
  max-width: 18ch; color: var(--ink);
}
.hero__mid h2 em, .hero__mid2 h2 em { font-style: normal; color: var(--pine); }
.hero__mid .sub, .hero__mid2 .sub, .hero__end .sub { margin-top: 16px; font-size: clamp(14px, 2vw, 17px); color: rgba(22,41,29,.64); max-width: 44ch; }
/* Slutsteget: partiklarna bildar själva ordet — texten lägger sig under. */
.hero__end { justify-content: flex-end; padding-bottom: clamp(90px, 16vh, 150px); }

.hero__hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(22,41,29,.55);
}
.hero__hint .line { width: 1px; height: 34px; background: linear-gradient(180deg, var(--pine), transparent); animation: hint 2s ease-in-out infinite; transform-origin: top; }
@keyframes hint { 0%,100% { transform: scaleY(.35); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } }

.hero__load {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  z-index: 7; background: rgba(250,248,244,.08); opacity: 1; transition: opacity .6s ease;
}
.hero__load i { display: block; height: 100%; width: 0%; background: var(--sage); transition: width .25s ease; }
.hero__load.done { opacity: 0; }

/* ---------- Kapitel-index ---------- */
.toc { position: relative; padding: clamp(90px, 16vh, 160px) clamp(20px, 5vw, 64px); }
.toc .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sage); margin-bottom: 26px; }
.toc__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: clamp(18px, 3.4vh, 30px) 0; border-bottom: 1px solid rgba(250,248,244,.14);
  color: var(--paper);
}
.toc__row:first-of-type { border-top: 1px solid rgba(250,248,244,.14); }
.toc__num { font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--sage); min-width: 34px; }
.toc__name { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 6vw, 54px); letter-spacing: -.02em; line-height: 1.05; }
.toc__count { font-size: 13px; color: rgba(250,248,244,.55); white-space: nowrap; }

/* ---------- Kapitel ---------- */
.chapter { position: relative; padding: clamp(90px, 15vh, 170px) clamp(20px, 5vw, 64px); }
.chapter__head { max-width: 1180px; margin: 0 auto clamp(34px, 6vh, 64px); }
.chapter__kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.chapter__kicker .num {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--c-accent, var(--sage));
}
.chapter__kicker .rule { flex: 0 0 44px; height: 1px; background: var(--c-accent, var(--sage)); opacity: .6; }
.chapter__kicker .cnt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-dim, rgba(250,248,244,.55)); }
.chapter h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 9vw, 96px); line-height: .98; letter-spacing: -.03em;
  color: var(--c-fg, var(--paper));
}
.chapter__intro { margin-top: 16px; max-width: 52ch; font-size: clamp(14px, 2vw, 17px); color: var(--c-dim, rgba(250,248,244,.66)); }

.chapter__body {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 3.4vw, 44px); align-items: start;
}
@media (max-width: 900px) { .chapter__body { grid-template-columns: 1fr; } }

.chapter__media { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; }
.chapter__media img { width: 100%; height: 116%; object-fit: cover; will-change: transform; }
@media (min-width: 901px) { .chapter__media { position: sticky; top: 96px; } }

.cards { display: flex; flex-direction: column; gap: 14px; perspective: 1100px; }
.card {
  display: block; background: var(--paper); color: var(--ink);
  border-radius: 18px; padding: clamp(18px, 2.6vw, 26px) clamp(18px, 2.8vw, 28px);
  box-shadow: 0 18px 44px rgba(6, 14, 9, .18);
  transform-style: preserve-3d; will-change: transform, opacity;
  transition: box-shadow .3s ease;
}
.card:hover { box-shadow: 0 24px 54px rgba(6, 14, 9, .26); }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.card__cat { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pine); }
.card__time { font-size: 12px; color: rgba(22,41,29,.5); white-space: nowrap; }
.card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 2.6vw, 23px); line-height: 1.14; letter-spacing: -.015em;
}
.card p {
  margin-top: 8px; font-size: 14px; color: rgba(22,41,29,.66);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__go { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--terra); display: inline-flex; align-items: center; gap: 6px; }
.card__go svg { transition: transform .25s ease; }
.card:hover .card__go svg { transform: translateX(4px); }

/* Ljusa kapitel: korten får kant i stället för tung skugga */
.chapter.light .card { box-shadow: 0 10px 30px rgba(22,41,29,.10); border: 1px solid rgba(22,41,29,.08); }

/* ---------- Alla artiklar ---------- */
.all { position: relative; padding: clamp(90px, 15vh, 160px) clamp(20px, 5vw, 64px) clamp(60px, 9vh, 110px); color: var(--ink); }
.all__inner { max-width: 1180px; margin: 0 auto; }
.all .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pine); margin-bottom: 14px; }
.all h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 7vw, 72px); letter-spacing: -.025em; line-height: 1; margin-bottom: clamp(26px, 5vh, 48px); }
.all__list { border-top: 1px solid rgba(22,41,29,.12); }
.row {
  display: flex; align-items: baseline; gap: 16px;
  padding: 16px 4px; border-bottom: 1px solid rgba(22,41,29,.12);
  transition: background .2s ease, padding-left .2s ease;
}
.row:hover { background: var(--sage-mist); padding-left: 12px; border-radius: 8px; }
.row__title { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 2.4vw, 21px); letter-spacing: -.01em; line-height: 1.2; }
.row__cat { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pine); white-space: nowrap; }
.row__time { font-size: 12px; color: rgba(22,41,29,.45); white-space: nowrap; }
@media (max-width: 640px) { .row__cat { display: none; } }

.review {
  display: flex; align-items: center; gap: 10px; margin-top: 26px;
  font-size: 13px; color: rgba(22,41,29,.6);
}
.review .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pine); flex: none; }

/* ---------- CTA + footer ---------- */
.cta {
  margin: clamp(70px, 11vh, 120px) auto 0; max-width: 1180px;
  background: var(--pine); color: var(--paper); border-radius: 26px;
  padding: clamp(36px, 6vw, 64px); text-align: center;
  position: relative; overflow: hidden;
}
.cta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 5.4vw, 52px); letter-spacing: -.02em; line-height: 1.04; }
.cta p { margin: 14px auto 26px; max-width: 46ch; font-size: 15px; color: rgba(250,248,244,.75); }
.cta a {
  display: inline-block; background: var(--terra); color: var(--paper);
  font-weight: 600; font-size: 15px; padding: 15px 30px; border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.mfooter { padding: clamp(40px, 7vh, 70px) clamp(20px, 5vw, 64px); text-align: center; color: rgba(22,41,29,.5); font-size: 13px; }
.mfooter .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); }
.mfooter .wordmark b { color: var(--terra); }
.mfooter p { margin-top: 8px; }
.mfooter a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Motion-hjälpare ---------- */
.rv { opacity: 0; transform: translateY(34px); }
.no-js .rv, .reduced .rv { opacity: 1; transform: none; }

/* Reducerad rörelse / ingen JS: heron blir en vanlig vy */
.no-js .hero, .reduced .hero { height: 100vh; }
.no-js .hero__hint, .reduced .hero__hint { display: none; }
.no-js .hero__mid2, .reduced .hero__mid2 { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero__hint .line { animation: none; }
}
.no-js #toc, .reduced #toc,
.no-js #kap-behandling, .reduced #kap-behandling,
.no-js #kap-sakerhet, .reduced #kap-sakerhet { background: var(--night-2); }
.no-js #kap-livsstil, .reduced #kap-livsstil { background: var(--sage-soft); }
.no-js #kap-kostnad, .reduced #kap-kostnad { background: var(--paper-tint); }
.no-js #alla, .reduced #alla { background: var(--paper); }