/* Formprov D: Om oss, omgång 6. Bara det som är unikt för sidan; allt gemensamt ligger i ../gemensam.css.
   Berättelsen, den mest känslosamma av undersidorna men fortfarande lugn: gryningen i heron, stigen som en tunn
   linje genom de fyra kapitlen, citatet i gryningens aprikos och principerna. Två textstorlekar per avsnitt. */

/* Heron: stigen genom snön mot staden i gryningen. Himlen är ljus, så rubriken står i mörk text i himlen uppe
   till vänster, med en svag ljus toning där himlen är som mörkast. Knapparna står nere på snön. När sidan laddas
   stiger gryningsljuset långsamt vid horisonten. */
.omoss-hero {
  --fokus-x: .5; --fokus-y: .4;
  --ljus-x: 64%; --ljus-y: 40%; --ljus-b: 78%; --ljus-h: 30%; --ljus-farg: rgba(255, 196, 140, .5); --ljus-styrka: .5;
}
.omoss-hero::before {
  background:
    radial-gradient(ellipse 54% 50% at 22% 26%, rgba(246, 240, 232, .66), rgba(246, 240, 232, .36) 60%, rgba(246, 240, 232, 0) 100%),
    linear-gradient(rgba(246, 240, 232, .5), rgba(246, 240, 232, 0) 18%);
}
.omoss-hero .hero-ingress { max-width: 40rem; text-wrap: balance; }
.omoss-hero .hero-ingress strong { font-weight: 600; }
.omoss-hero .knappar { margin-top: auto; }
.omoss-hero .knapp-tyst { background: rgba(241, 245, 243, .9); }
.omoss-hero .knapp-tyst:hover { background: var(--vit); }
@media (min-width: 761px) {
  .omoss-hero h1 { font-size: clamp(3rem, min(6.6vw, 9vh), 7.5rem); }
}
@keyframes gryning-stiger { from { opacity: 0; translate: -50% -34%; } to { opacity: var(--ljus-styrka); translate: -50% -50%; } }
.skript .omoss-hero .sida-hero-ljus { animation: gryning-stiger 6.5s cubic-bezier(.3, .1, .2, 1) .3s both; }
.skript .omoss-hero .sida-hero-bild::after { animation-duration: 5.5s; }

/* Berättelsen längs stigen. Linjen slingrar sig genom kapitlens punkter och ritas med scrollen (gemensam.js). Utan
   skript är den en rak linje genom punkterna. Tiden står till vänster och texten till höger, med luft mellan. */
.berattelse { padding: var(--luft) 0; }
.berattelse h2 { margin-bottom: clamp(24px, 4vh, 40px); }
.kapitel { position: relative; list-style: none; margin: 0; padding: 0; max-width: 1080px; }
.kapitel::before { content: ""; position: absolute; left: 23.25px; top: 60px; bottom: 60px; border-left: 1.5px solid var(--trad-morgon); }
.stationer-aktiv.kapitel::before { display: none; }
.kapitel > li {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 10px clamp(24px, 4vw, 64px);
  padding: clamp(40px, 7vh, 80px) 0 clamp(40px, 7vh, 80px) 72px;
}
.kapitel-punkt {
  position: absolute; left: 16px; top: calc(clamp(40px, 7vh, 80px) + .25em); width: 16px; height: 16px; border-radius: 50%;
  background: var(--sjogron); box-shadow: inset 0 0 0 1.5px var(--trad-morgon), 0 0 0 6px var(--morgon); transition: background-color .5s ease;
}
.stationer-aktiv li:not(.nadd) .kapitel-punkt { background: var(--morgon); }
.kapitel-tid { margin: 0; display: grid; gap: 2px; align-content: start; }
.kapitel-tid time, .kapitel-tid-ord { font-weight: 650; font-size: 1.1rem; color: var(--accent); font-variant-numeric: tabular-nums; transition: color .5s ease; }
.stationer-aktiv li:not(.nadd) :is(.kapitel-tid time, .kapitel-tid-ord) { color: var(--ink-mjuk); }
.kapitel-tid > span:last-child { font-size: 1rem; color: var(--ink-mjuk); }
.kapitel-text h3 { max-width: 24ch; margin-bottom: 16px; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 560; }
.kapitel-text p { max-width: 60ch; font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); line-height: 1.6; }
.kapitel-text p:last-child { margin-bottom: 0; }
/* Siffran ur meningen, stor. Meningen står kvar ordagrant under den. */
.kapitel .kapitel-tal { margin: 4px 0 12px; font-family: var(--rubrik); font-weight: 560; font-size: clamp(3.4rem, 2rem + 4.4vw, 6rem); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.kapitel-fraga { margin: 24px 0 26px; padding: 4px 0 4px clamp(18px, 2vw, 26px); border-left: 3px solid var(--sjogron); }
.kapitel .kapitel-fraga p { margin: 0; max-width: 28ch; font-family: var(--rubrik); font-weight: 500; font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.2rem); line-height: 1.28; }
.kompetenser { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1em; padding: 0; list-style: none; }
.kompetenser li { padding: 7px 14px; border-radius: 999px; background: var(--vit); box-shadow: inset 0 0 0 1px var(--kant); font-size: .95rem; }
@media (max-width: 760px) {
  .kapitel::before { left: 13.25px; }
  .kapitel > li { grid-template-columns: minmax(0, 1fr); padding-left: 48px; }
  .kapitel-punkt { left: 6px; }
}

/* Citatet i gryningens aprikos, stort */
.citat-band { padding: clamp(80px, 16vh, 168px) 0; background: linear-gradient(#DCE6EA, var(--aprikos) 70%); color: var(--blak); --fokus: var(--natt); }
.citat { margin: 0; }
.citat p {
  margin: 0; max-width: 16ch; font-family: var(--rubrik); font-weight: 560;
  font-size: clamp(2.4rem, 1.3rem + 4.4vw, 5.6rem); line-height: 1.04; letter-spacing: -.018em; text-wrap: balance;
}

/* Principerna i tre spalter */
.principer { padding: var(--luft) 0; }
.principer h2 { margin-bottom: clamp(28px, 5vh, 48px); }
.princip-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(28px, 4vw, 56px); }
.princip-lista li { padding-top: 18px; border-top: 1.5px solid var(--linje-stark); font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); line-height: 1.5; }
.princip-lista b { display: block; margin-bottom: 4px; font-family: var(--rubrik); font-size: 1.3rem; font-weight: 600; }
.princip-lista span { display: block; color: var(--ink-mjuk); }
@media (max-width: 760px) { .princip-lista { grid-template-columns: minmax(0, 1fr); } }