/* ==========================================================================
   Tegnede sektioner (arbejdskopien /forside2, kladde)
   Emil, 3.10.2026: bud C fra artefaktet "Forsiden på papir", stillet op som
   bud D. Bygges af scripts/byg-forside2.js.

   To lag, der ikke bytter roller:
     - det trykte: hvid side, overskrift, punkter og kilde i sidens egen skrift
     - det håndlavede: én tegning pr. sektion på en lap ternet papir, tapet
       fast, og én håndtegnet streg under højst ét tal pr. sektion
   Sektionerne skifter side: tegningen til højre, så til venstre (.tegn--modsat).
   Punkterne (tal + kort tekst) står i stedet for brødtekst.

   Størrelser kommer fra grundsættet. Papiret, tapen, lappens skygge og
   håndskriften (Caveat) findes ikke i grundsættet endnu og står som egne
   variabler øverst. Bliver udtrykket valgt, skal de ind dér.
   ========================================================================== */

.tegn {
  --tegn-papir: #FAF8F2;
  --tegn-tern: #E4E0D4;
  --tegn-tern-fin: #EFECE2;
  --tegn-tape: #E9DFC6;
  --tegn-blyant: #6E6B64;
  --tegn-haand: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
  --tegn-skygge: 0 20px 44px -26px rgb(10 11 13 / .4);
  background: var(--bg); color: var(--text-body); padding-block: var(--section-space);
}
.tegn + .tegn { padding-top: 0; }

.tegn__gitter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; }
.tegn--modsat .tegn__gitter { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.tegn--modsat .tegn__tekst { grid-column: 2; grid-row: 1; }
.tegn--modsat .tegn__tegning { grid-column: 1; grid-row: 1; }
.tegn__tekst { display: grid; gap: var(--space-m); align-content: start; min-width: 0; }
.tegn__tegning { min-width: 0; }

/* --- Det trykte -------------------------------------------------------------- */
.tegn .tegn__spm { margin: 0; font-size: var(--type-body); line-height: 1.4; font-weight: var(--weight-medium); color: var(--text-body); }
.tegn .tegn__titel { margin: 0; font-size: var(--type-h2); line-height: 1.2; letter-spacing: var(--tracking-h2); font-weight: var(--weight-semi); color: var(--text); text-wrap: pretty; }
/* Den håndtegnede streg: højst under ét tal pr. sektion. */
.tegn__streg { white-space: nowrap; padding-bottom: .1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 18 2.5, 34 8.5, 52 5.5 S 84 3, 98 6.5' fill='none' stroke='%23F97316' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M9 11 C 30 8.5, 58 12, 90 9.5' fill='none' stroke='%23F97316' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3C/svg%3E") no-repeat left bottom / 100% .26em; }

/* Punkterne: tallet til venstre, en kort tekst til højre, og en tynd streg over hvert. */
.tegn .tegn__punkter { margin: 0; padding: 0; list-style: none; display: grid; max-width: 30rem; }
.tegn__punkter li { display: grid; grid-template-columns: clamp(4.25rem, 3rem + 1.6vw, 5.5rem) minmax(0, 1fr); column-gap: var(--space-s); align-items: baseline; padding-block: var(--space-s); border-top: 1px solid var(--line-strong); }
.tegn__punkter li:last-child { padding-bottom: 0; }
.tegn__punkter b { font-size: var(--type-h3); line-height: 1.2; letter-spacing: var(--tracking-h3); font-weight: var(--weight-semi); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tegn__punkter span { font-size: var(--type-body); line-height: 1.5; color: var(--text); text-wrap: pretty; }
.tegn .tegn__kilde { margin: 0; max-width: 30rem; font-size: var(--type-small); line-height: 1.5; color: var(--text-muted); }

/* --- Det håndlavede: tegningen på en lap ternet papir, tapet fast ------------- */
.tegn__lap { position: relative; padding: var(--space-l) var(--space-m) var(--space-s); border: 1px solid var(--line-strong); box-shadow: var(--tegn-skygge); transform: rotate(-1deg);
  background-color: var(--tegn-papir);
  background-image: linear-gradient(var(--tegn-tern) 1px, transparent 1px), linear-gradient(90deg, var(--tegn-tern) 1px, transparent 1px), linear-gradient(var(--tegn-tern-fin) 1px, transparent 1px), linear-gradient(90deg, var(--tegn-tern-fin) 1px, transparent 1px);
  background-size: 110px 110px, 110px 110px, 22px 22px, 22px 22px; }
.tegn--modsat .tegn__lap { transform: rotate(1deg); }
.tegn__lap::before { content: ""; position: absolute; top: calc(var(--space-s) * -1); left: 50%; width: 7rem; height: var(--space-l); background: var(--tegn-tape); opacity: .92; border-radius: 2px; transform: translateX(-50%) rotate(-3deg); }
.tegn__lap svg { display: block; width: 100%; height: auto; overflow: visible; }
.tegn .tegn__lap .tegn__kilde { margin-top: var(--space-2xs); max-width: none; }

/* Tegningens dele: blæk, blyant og orange tusch. Håndskrift på det tegnede, sidens skrift på tallene. */
.tegn svg text { font-family: var(--tegn-haand); font-weight: 700; }
.tegn svg text.t-tryk { font-family: var(--font); font-weight: 600; }
.tegn .t-blaek { fill: var(--text); }
.tegn .t-tusch { fill: var(--accent-strong); }
.tegn .t-blyant { fill: var(--tegn-blyant); }
.tegn .s-blaek { fill: none; stroke: var(--text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tegn .s-blyant { fill: none; stroke: var(--tegn-blyant); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 5 6; }
.tegn .f-tusch { fill: var(--accent); opacity: .94; }
.tegn .f-skrav { fill: url(#tegn-skravering); stroke: var(--text); stroke-width: 2.4; stroke-linejoin: round; }
.tegn__defs { position: absolute; width: 0; height: 0; }

/* Smalle skærme: teksten først, tegningen under. Under 860 px har .wrap ingen luft i siderne, så sektionen giver den selv. */
@media (max-width: 860px) {
  .tegn { padding-inline: var(--space-l); }
  .tegn__gitter, .tegn--modsat .tegn__gitter { grid-template-columns: minmax(0, 1fr); }
  .tegn--modsat .tegn__tekst, .tegn--modsat .tegn__tegning { grid-column: auto; grid-row: auto; }
}