/* ============================================================
   ORON — SEKSJON 12 · grunnlegger  ·  «Hvem står bak»

   Vi har ingen kunder å sitere. Da er det eneste ærlige å skrive
   et brev og legge visittkortet ved siden av. Formen er derfor
   redaksjonell, ikke et sitatkort: ingen anførselstegn, ingen
   avatarsirkel, ingen stjerner, ingen segl. Overskriften sier at
   ingenting her er oppdiktet — da kan ikke formen låne grammatikken
   til en oppdiktet kundehistorie.

   Komposisjonen har to objekter og to akser:
     · brevet står på containerens VENSTREakse, 620 px lesemål
     · kortet står på containerens HØYREakse, som et eget objekt
     · manchetten (merkelapp + tittel) ligger over begge
   Luften mellom de to objektene er selve komposisjonen. Ingenting
   er sentrert.

   Nabolaget (SPEC §4 — to naboseksjoner deler aldri form):
     garanti over  = varmt sandbånd, sirkelsegl venstre, tekst høyre
     faq under     = liten venstrespalte + lang liste til høyre
   Denne er speilvendt av faq (stor venstre, lite høyre), står på
   hvitt, har rette hjørner på merket og null sirkler.

   Oransje finnes ett eneste sted: prikken i merkelappen.
   ============================================================ */

/* Uten JavaScript kjører aldri reveal-observatøren, og base.css lar
   [data-reveal] stå på opacity 0. Et brev har ikke råd til å være
   usynlig. (scripting: none treffer kun når skript faktisk er av.) */
@media (scripting: none) {
  .s-grunnlegger [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

.s-grunnlegger {
  /* Lesemålet i brevet. Ved 21px lander det på 58–62 tegn per linje. */
  --gr-mal: 620px;
}

/* ------------------------------------------------------------
   1 · Manchetten
   ------------------------------------------------------------ */

/* Bredere enn brevspalten, smalere enn containeren: tittelen skal
   kunne stå på to hele linjer uten å bli en plakat. */
.s-grunnlegger .gr-head {
  max-width: 880px;
}

.s-grunnlegger .gr-head .eyebrow {
  margin-bottom: var(--s-5);
}

/* Størrelse, leading og tracking kommer uendret fra h2 i base.css. */
.s-grunnlegger .gr-tittel__l {
  display: block;
  color: var(--or-ink-500);
}

/* Kroken er den som skal stå i blekk. Påstanden over er premisset. */
.s-grunnlegger .gr-tittel__l--b {
  color: var(--or-ink-900);
}

/* ------------------------------------------------------------
   2 · Oppslaget — to objekter
   ------------------------------------------------------------ */

.s-grunnlegger .gr-oppslag {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  column-gap: var(--s-24);
  align-items: start;
  margin-top: var(--s-16);
}

/* ------------------------------------------------------------
   3 · Brevet — flat prosa, ett tekstnivå, en hårstrek
   ------------------------------------------------------------ */

.s-grunnlegger .gr-brev {
  max-width: var(--gr-mal);
}

.s-grunnlegger .gr-p {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--or-ink-700);
  text-wrap: pretty;
}

/* Avsnittet som er hele grunnen til at seksjonen finnes. Det bæres
   av blekket og av streken over — ikke av en ny skriftstørrelse, og
   ikke av et innrykk som ville lest som et sitat. */
.s-grunnlegger .gr-p--merk {
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px solid var(--or-border);
  color: var(--or-ink-900);
}

/* ------------------------------------------------------------
   4 · Kortet — det ene fysiske objektet i seksjonen
   ------------------------------------------------------------ */

.s-grunnlegger .gr-kort {
  overflow: hidden;
  max-width: 440px;
  background: var(--or-white);
  border: 1px solid var(--or-border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}

.s-grunnlegger .gr-kort__plate {
  padding: var(--s-8);
}

/* Ekte portrett. Samme firkantede plate-geometri som monogrammet hadde,
   så kortet beholder rytmen sin — bilde, ikke avatar-boble ved et sitat. */
.s-grunnlegger .gr-portrett {
  width: 96px;
  height: 96px;
  border-radius: var(--r-md);
  object-fit: cover;
  background-color: var(--or-gray-100);
  box-shadow: 0 0 0 1px var(--or-hairline), var(--sh-sm);
}

.s-grunnlegger .gr-kort__navn {
  margin-top: var(--s-5);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-h3);
  color: var(--or-ink-900);
}

.s-grunnlegger .gr-kort__rolle {
  margin-top: var(--s-1);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-body);
  color: var(--or-ink-500);
}

/* Bunnfeltet gir kortet to materialer — plate og påskrift — og er
   det eneste stedet varmen fra papiret er igjen. */
.s-grunnlegger .gr-kort__bio {
  padding: var(--s-6) var(--s-8);
  border-top: 1px solid var(--or-border);
  background: var(--or-cream);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--or-ink-700);
  text-wrap: pretty;
}

/* ============================================================
   5 · Responsivt — trinn på 1024 / 900 / 768 / 560.
   Ingen vw-ledd: hvert steg lander på en --s-verdi.
   ============================================================ */

@media (max-width: 1023px) {
  .s-grunnlegger .gr-head { max-width: 680px; }

  .s-grunnlegger .gr-oppslag {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    column-gap: var(--s-12);
    margin-top: var(--s-14);
  }

  .s-grunnlegger .gr-kort__plate { padding: var(--s-6); }
  .s-grunnlegger .gr-kort__bio { padding: var(--s-5) var(--s-6); }
}

/* Under 900 er det ikke plass til to spalter uten at lesemålet ryker.
   Da legger kortet seg under brevet — fortsatt på venstreaksen. */
@media (max-width: 899px) {
  .s-grunnlegger .gr-oppslag {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-12);
  }

  .s-grunnlegger .gr-kort { max-width: 480px; }
}

@media (max-width: 767px) {
  .s-grunnlegger .gr-oppslag {
    margin-top: var(--s-10);
    row-gap: var(--s-10);
  }
}

@media (max-width: 559px) {
  .s-grunnlegger .gr-kort {
    max-width: none;
    border-radius: var(--r-lg);
  }

  .s-grunnlegger .gr-portrett {
    width: 80px;
    height: 80px;
  }
}