/* Artikkelsider. Arver alle tokens fra styles.css - last den foerst. */

.art-top{ padding: clamp(2.6rem,7vw,5rem) 0 0; }
.smuler{ font-size:.92rem; color:var(--ink-3); margin:0 0 1.6rem; }
.smuler a{ color:var(--ink-3); text-decoration:none; border-bottom:1px solid var(--line); }
.smuler a:hover{ color:var(--ink); }
.smuler span[aria-current]{ color:var(--ink-2); }

.art{ max-width:none; }
.art-inn{ max-width:38rem; margin:0 auto; }
.art h1{
  font-size:clamp(2.05rem, 1.2rem + 3.4vw, 3.15rem);
  letter-spacing:-.038em; line-height:1.06; margin:0 0 1.5rem; text-wrap:balance;
}

/* Svaret staar foerst, i egen ramme. Det er hele poenget med sidene:
   en forelder som skumleser skal ha svaret sitt paa fem sekunder. */
.svar{
  background:var(--paper); border-radius:var(--r);
  padding:clamp(1.3rem,3.4vw,2rem) clamp(1.3rem,3.4vw,2.1rem);
  box-shadow:var(--sh-1), inset 0 0 0 1px var(--line-2);
  border-left:4px solid var(--clay);
  margin:0 0 2.6rem;
}
.svar p{ font-size:1.11rem; line-height:1.62; color:var(--ink); margin:0; }
.svar p + p{ margin-top:.85rem; }

.art-inn h2{
  font-size:clamp(1.42rem, 1.1rem + 1.2vw, 1.85rem);
  letter-spacing:-.028em; line-height:1.16; margin:2.9rem 0 .9rem; text-wrap:balance;
}
.art-inn h3{ font-size:1.12rem; letter-spacing:-.014em; margin:1.9rem 0 .5rem; }
.art-inn p{ font-size:1.045rem; line-height:1.68; color:var(--ink-2); margin:0 0 1.05rem; }
.art-inn strong{ color:var(--ink); font-weight:600; }
.art-inn ul{ margin:0 0 1.3rem; padding-left:1.15rem; }
.art-inn li{ font-size:1.045rem; line-height:1.62; color:var(--ink-2); margin-bottom:.5rem; }
.art-inn li::marker{ color:var(--clay); }
.art-inn a{ color:var(--forest-2); text-decoration:underline; text-underline-offset:2px; }
.art-inn a:hover{ color:var(--forest); }

/* Rammen for "dette er ikke oss" - peker foreldre videre til PPT/Statped.
   Det koster oss ingenting og bygger tilliten som selger. */
.videre{
  background:var(--forest-w); border-radius:var(--r-s);
  padding:1.2rem 1.35rem; margin:2rem 0 2.4rem;
}
.videre p{ margin:0; font-size:1rem; line-height:1.6; color:var(--ink-2); }
.videre p + p{ margin-top:.6rem; }
.videre strong{ color:var(--forest); }

.avslutt{
  margin:3.4rem 0 0; padding:clamp(1.5rem,4vw,2.2rem);
  background:var(--cream-2); border-radius:var(--r);
  text-align:center;
}
.avslutt h2{ margin:0 0 .6rem; font-size:clamp(1.35rem,1.1rem + 1vw,1.7rem); }
.avslutt p{ margin:0 auto 1.35rem; max-width:34rem; }

.les-mer{ margin:3.2rem 0 0; padding-top:2rem; border-top:1px solid var(--line); }
.les-mer h2{ font-size:1.15rem; margin:0 0 1rem; letter-spacing:-.014em; }
.les-mer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.les-mer a{ color:var(--ink); text-decoration:none; font-size:1.02rem;
  border-bottom:1px solid var(--line); }
.les-mer a:hover{ color:var(--clay-ink); border-bottom-color:var(--clay); }

.hub-liste{ list-style:none; padding:0; margin:2.2rem 0 0; display:grid; gap:1rem; }
.hub-kort{
  background:var(--paper); border-radius:var(--r-s); padding:1.35rem 1.5rem;
  box-shadow:var(--sh-1), inset 0 0 0 1px var(--line-2);
}
.hub-kort a{ color:var(--ink); text-decoration:none; font-weight:600;
  font-size:1.12rem; letter-spacing:-.014em; }
.hub-kort a:hover{ color:var(--clay-ink); }
.hub-kort p{ margin:.4rem 0 0; font-size:.99rem; color:var(--ink-3); line-height:1.55; }

@media (max-width:640px){ .art-inn{ max-width:none; } }