/* ============================================================================
   Kalibreringsattest — designsystem for ziad.apptek.dev
   Tokens først, så komponenter. Alt her bruges af den rigtige side; kit.html
   er kun et prøveark der viser systemet.
   ========================================================================= */

@font-face{
  font-family:"Mona Sans";
  src:url("fonts/MonaSans.woff2") format("woff2-variations");
  font-weight:200 900; font-stretch:75% 125%; font-display:swap;
}
@font-face{
  font-family:"Mona Mono";
  src:url("fonts/MonaMono.woff2") format("woff2-variations");
  font-weight:200 900; font-display:swap;
}

/* ---------------------------------------------------------------- tokens */
:root{
  /* flader */
  --paper:        #F4F5F1;   /* emaljeret instrumentpanel */
  --paper-raised: #FAFBF7;
  --paper-sunk:   #EBEDE6;

  /* blæk */
  --ink:    #14171A;
  --ink-2:  #41474A;
  --ink-3:  #636967;         /* 5.1:1 mod --paper */

  /* streger */
  --rule:      #14171A;      /* tung: dokumentets egne skillelinjer */
  --hair:      #C6C9C1;
  --hair-soft: #DEE0D9;

  /* accent — flaskegrøn. Mættet flade med hvid tekst, som stempelblæk.
     Aldrig tekstfarve på papir uden --accent-edge. */
  --accent:          #0B6B3A;
  --accent-ink:      #FFFFFF;              /* 6.6:1 mod --accent */
  --accent-ink-soft: rgba(255,255,255,.86);/* sekundær tekst inde i stemplet */
  --accent-edge:     #0B6B3A;              /* 6.0:1 mod --paper — streg og fokus */

  /* type */
  --sans: "Mona Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "Mona Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-xs:   0.6875rem;
  --t-sm:   0.8125rem;
  --t-base: 1.125rem;
  --t-md:   1.25rem;
  --t-lg:   1.5rem;
  --t-xl:   2rem;
  --t-2xl:  2.75rem;
  --t-display: clamp(2.75rem, 6.2vw, 5rem);
  /* Påstanden i hovedet. Mindre end et projektnavn, fordi den er en sætning
     og ikke et navn, og fordi den skal knække over tre linjer og ikke to. */
  --t-claim: clamp(2.25rem, 5.2vw, 4rem);

  /* rytme — 4px-basis */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Dokumentkolonnen. ALT ligger i den og starter i samme venstrekant:
     navnet, brødteksten, tabellerne og billederne. Derfor er kolonnen smal
     nok til at en linje tekst er til at læse i fuld bredde. */
  --doc: 900px;
  --measure: none;           /* tekst fylder kolonnen, den knækker ikke før */
  --label-rail: 148px;       /* etiketkolonnen i spec- og faktatabeller */

  --focus: var(--accent-edge);
}

/* Siden er lys. Punktum. Den følger IKKE systemets tema, fordi designet er
   besluttet lys-først (PRODUCT.md, 12.08.2026) og en læser med mørk Mac
   ellers får en side der aldrig blev tegnet til ham. Mørk findes kun når
   den slås til med vilje via data-theme. */
:root[data-theme="dark"]{
  --paper:#141614; --paper-raised:#1B1E1B; --paper-sunk:#0F110F;
  --ink:#E9EBE5; --ink-2:#B7BCB4; --ink-3:#8E948C;
  --rule:#E9EBE5; --hair:#31352F; --hair-soft:#24271F;
  --accent:#12844A; --accent-ink:#FFFFFF;
  --accent-ink-soft:rgba(255,255,255,.86);
  --accent-edge:#2FA96A; --focus:#2FA96A;
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-base); line-height:1.55;
  font-variation-settings:"wdth" 100,"opsz" 16;
  -webkit-font-smoothing:antialiased;
}
p{margin:0 0 var(--s4); max-width:var(--measure)}
/* Danske sammensatte ord bliver lange. En overskrift må knække et ord frem
   for at skubbe hele siden ud i siden på en smal skærm. */
h1,h2,h3{margin:0; font-weight:640; letter-spacing:-0.018em; text-wrap:balance;
  overflow-wrap:break-word}
h1{font-size:var(--t-display); line-height:0.96; font-variation-settings:"wdth" 108,"opsz" 90}
h2{font-size:var(--t-xl); line-height:1.1; margin-bottom:var(--s4)}
h3{font-size:var(--t-md); line-height:1.25}
:where(a){color:inherit; text-decoration-thickness:1px; text-underline-offset:3px}
:where(a):hover{text-decoration-color:var(--accent-edge)}
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus); outline-offset:3px; border-radius:1px;
}

/* ------------------------------------------------------------ hjælpeklasser */
.k{                                   /* mono-etiket */
  font-family:var(--mono); font-size:var(--t-xs); font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3);
}
.val{                                  /* måleværdi */
  font-family:var(--mono); font-size:var(--t-md); font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:-0.01em; color:var(--ink);
  /* Tusindtalsmellemrum i mono er for bredt og læses som to tal. */
  word-spacing:-0.22em;
  /* "6,5 → 245 MB" må ikke knække mellem tallet og enheden. */
  white-space:nowrap;
}
.val--muted{color:var(--ink-3)}
.lede{font-size:var(--t-md); line-height:1.45; color:var(--ink-2); max-width:var(--measure)}
.wrap{max-width:var(--doc); margin-inline:auto; padding-inline:var(--s6)}

/* ---------------------------------------------------------- blokjustering */
/* Brødteksten har lige kant i begge sider, som i et sat dokument. Det er dét
   der gør at teksten står i samme kasse som billederne over den i stedet for
   at flosse i højre side.

   Grunden til at det ser godt ud i LaTeX og skidt ud i Word er ikke selve
   justeringen, det er orddelingen. Uden orddeling kan en linje kun rettes af
   ved at trække mellemrummene fra hinanden, og så opstår de hvide floder ned
   gennem afsnittet. Med orddeling har ombryderen et sted mere at give sig, og
   mellemrummene behøver næsten ikke ændre sig. Word deler ikke ord som
   udgangspunkt. Det gør vi.

   `hyphens:auto` med `lang="da"` bruger browserens danske orddelingsregler,
   og det er efterprøvet at de virker: »oversættelsesnøgler« deles i stedet
   for at stikke ud af sin spalte. Grænserne holder de grimme delinger ude:
   ord under seks tegn deles ikke, og der skal være mindst tre tegn før og to
   efter stregen. `text-wrap:pretty` lader browseren se på hele afsnittet frem
   for én linje ad gangen, hvilket er samme idé som Knuth-Plass, bare i en
   mindre udgave.

   Målt på siden, mellemrum i forhold til det naturlige: gennemsnit 1,26 gange
   og værste linje 1,94. Sats regnes normalt for i orden op til omkring 1,5, så
   det er ét sted der spænder og ikke et gennemgående problem, og det sted er
   et afsnit på to linjer hvor der ikke er nok tekst at fordele på.
   `text-wrap:stable` gav bedre mellemrum, 1,23 og 1,77, men efterlod til
   gengæld to afsnit med ét enkelt ord på sidste linje. Enlige ord er værre at
   se på end lidt luft, så `pretty` fik lov at blive.

   Det vi ikke kan i en browser er microtypes to sidste greb: at strække selve
   bogstaverne nogle promille, og at lade komma og bindestreg hænge en anelse
   ud over kanten. Det er den sidste procent, og den er ikke til at få. */
.masthead__intro, .lede,
.project p:not(.figure__spec), .section > div > p,
.decision__body p, .steps p, .facts__row p, .redaction p, .foot p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto; -webkit-hyphens:auto;
  hyphenate-limit-chars:6 3 2;
  text-wrap:pretty;
}
/* Safari kan lade tegnsætning hænge ud over satskanten. De andre kan ikke,
   og der sker ingenting hos dem. */
.masthead__intro, .project p:not(.figure__spec), .section > div > p{
  hanging-punctuation:first allow-end last;
}
/* På en telefon er linjen så kort at justering giver huller i stedet for
   ro. Der får teksten lov at flosse, og orddelingen bliver. */
@media (max-width:560px){
  .masthead__intro, .lede,
  .project p:not(.figure__spec), .section > div > p,
  .decision__body p, .steps p, .facts__row p, .redaction p, .foot p{
    text-align:left;
  }
}

/* ------------------------------------------------------- 1 · dokumentbånd */
/* Dokumentets egen titellinje. Optræder ÉN gang, øverst — den er sidens
   hoved, ikke en etiket oven på en overskrift. */
.doc-band{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:var(--s2) var(--s5);
  padding-bottom:var(--s3); border-bottom:1.5px solid var(--rule);
}
.doc-band__title{
  font-family:var(--sans); font-size:0.9375rem; font-weight:680;
  letter-spacing:0.26em; text-transform:uppercase;
  font-variation-settings:"wdth" 112;
}
.doc-band__meta{font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:0.12em; color:var(--ink-3)}

/* ------------------------------------------------------------ 2 · masthead */
/* Hovedet er én kolonne, ikke to. En spec-blok ude i siden ville flytte
   brødteksten ind og give siden to venstrekanter. */
.masthead{display:block; padding:var(--s8) 0 var(--s5)}
/* Det største på siden skal sige mest. Navnet står i dokumentbåndet ovenfor,
   så det er sætningen der får pladsen, ikke navneskiltet. */
.claim{font-size:var(--t-claim); line-height:1.04; letter-spacing:-0.022em;
  font-variation-settings:"wdth" 104,"opsz" 60; text-wrap:balance}
.masthead__intro{font-size:var(--t-md); line-height:1.5; color:var(--ink-2);
  margin-top:var(--s6); margin-bottom:0}
/* Andet afsnit hører til det første. Luften mellem dem er afsnitsluft og
   ikke blokluft, ellers læses de som to selvstændige udsagn i stedet for
   som én indledning der har to ting at sige. */
.masthead__intro + .masthead__intro{margin-top:var(--s4)}

/* --------------------------------------------------------- 3 · spec-blok */
/* Detaljer om personen er ikke sidens ærinde. Fire felter ved siden af
   hinanden, etiket over værdi, holdt sammen af én grøn streg. Stregen ligger
   OVER blokken og ikke ude i venstre side, fordi en streg i siden enten
   skubber teksten ind eller selv stikker ud, og begge dele giver siden to
   venstrekanter. Her starter stregen, etiketten og værdien samme sted. */
.spec{
  margin-top:var(--s7);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--s5) var(--s6);
  border-top:1.5px solid var(--accent-edge);
  padding-top:var(--s5);
}
.spec__row{display:block}
.spec__row .k{display:block; margin-bottom:var(--s1)}
.spec__v{display:block; font-size:var(--t-sm); font-weight:560; color:var(--ink);
  min-width:0; overflow-wrap:anywhere}

/* --------------------------------------------- 4 · etiketskinne + sektion */
/* Etiketten står OVER overskriften og i samme venstrekant som alt andet.
   Den er ikke en eyebrow: den er dokumentets afsnitsnummer, og den sidder
   lige under den streg der lukkede forrige afsnit. */
.section{display:block; padding:var(--s8) 0; border-bottom:1px solid var(--hair)}
/* Den sidste sektion lukker ikke med en streg. Enten følger foden efter med
   sin egen tunge overstreg, eller også er dokumentet slut og skal have luft
   under sig i stedet for en kant på sidste pixelrække. */
.section:last-of-type{border-bottom:0}
main.wrap:not(:has(.foot)) > .section:last-of-type{padding-bottom:var(--s9)}
.section__rail{margin-bottom:var(--s4)}
.section__rail .k{display:block}
.section > *{min-width:0}
@media (max-width:860px){
  .section{padding:var(--s7) 0}
}
@media (max-width:560px){
  .wrap{padding-inline:var(--s5)}
  .doc-band__title{letter-spacing:0.2em}
  .spec{gap:var(--s5)}
}

/* ---------------------------------------------------- 5 · målingstabellen */
.measure{width:100%; border-collapse:collapse; margin:var(--s5) 0 0}
.measure thead th{
  font-family:var(--mono); font-size:var(--t-xs); font-weight:500;
  letter-spacing:0.19em; text-transform:uppercase; color:var(--ink-3);
  text-align:left; padding:0 var(--s4) var(--s3) 0; border-bottom:1.5px solid var(--rule);
}
/* Sidste kolonne højrestilles KUN når den bærer verdikt-mærket. I en tabel
   med tre kolonner er den sidste prosa, og prosa sat op mod højrekanten
   giver siden en falsk anden kant. */
.measure thead th:last-child,.measure td:last-child{padding-right:0}
.measure thead th:nth-child(4):last-child,
.measure td:last-child:has(.verdict){text-align:right}
.measure td{padding:var(--s4) var(--s4) var(--s4) 0; border-bottom:1px solid var(--hair-soft);
  vertical-align:baseline}
.measure tr:last-child td{border-bottom:0}
.measure__what{font-size:var(--t-base); color:var(--ink)}
.measure__how{font-size:var(--t-sm); color:var(--ink-3)}
.measure__n{font-family:var(--mono); font-size:var(--t-xs); color:var(--ink-3);
  padding-right:var(--s3)}

@media (max-width:860px){
  .measure,.measure tbody,.measure tr,.measure td{display:block; width:100%}
  .measure thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  .measure tr{padding:var(--s5) 0; border-bottom:1px solid var(--hair-soft)}
  .measure td{border:0; padding:0 0 var(--s2)}
  .measure td:last-child{text-align:left; padding-top:var(--s2)}
}

/* ------------------------------------------------------- 6 · verdikt-mærker */
.verdict{display:inline-flex; align-items:center; gap:var(--s2);
  font-size:var(--t-sm); font-weight:560; white-space:nowrap}
.verdict svg{flex:none; width:15px; height:15px}
.verdict--live{background:var(--accent); color:var(--accent-ink);
  padding:3px var(--s2) 3px 6px; border-radius:1px}
.verdict--built{color:var(--ink-2)}
.verdict--possible{color:var(--ink-3)}

/* ------------------------------------------------------- 7 · beslutningen */
/* Ét rigtigt valg pr. projekt: hvad der blev valgt, og hvorfor. Ikke et kort
   og ingen farvet venstrekant — en indrykket blok med tung overstreg. */
/* Etiketten er grøn, ikke grå. Uden det ligner blokken en ny sektion, fordi
   tung overstreg plus mono-etiket er nøjagtig det en sektion også er. */
.decision{margin:var(--s6) 0 0; padding:var(--s5) 0 0; border-top:1.5px solid var(--rule)}
.decision > .k{display:block; color:var(--accent-edge)}
.decision__body{margin-top:var(--s3)}
.decision__body p{margin-bottom:var(--s3)}
.decision__body p:last-child{margin-bottom:0}
.decision q{quotes:"»" "«"; font-style:normal; color:var(--ink)}

/* ------------------------------------------------- 8 · figur + redaktion */
.figure{margin:var(--s6) 0 0}
.figure__frame{
  border:1px solid var(--hair); background:var(--paper-sunk);
  aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden;
}
/* Polstringen hører til pladsholderteksten, ikke til rammen. Ligger den på
   rammen, får et billede en mindre kasse end rammen selv, og så skærer
   object-fit kanterne af. Det kostede en runde at finde. */
.figure__frame:not(:has(img)){padding:var(--s5)}
.figure__frame img{display:block; width:100%; height:100%; object-fit:cover}
.figure__spec{font-family:var(--mono); font-size:var(--t-xs); line-height:1.7;
  color:var(--ink-3); text-align:center; max-width:46ch}
.figure__cap{display:flex; gap:var(--s4); margin-top:var(--s3);
  font-size:var(--t-sm); color:var(--ink-2)}
.figure__cap .k{flex:none; padding-top:2px}

/* Oplysning om at fortroligt materiale er fjernet og erstattet. Den skal
   kunne SES — den er et argument, ikke en undskyldning. */
.redaction{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s3) var(--s4);
  align-items:start; margin-top:var(--s4); padding:var(--s4);
  border:1px dashed var(--hair); background:var(--paper-raised);
}
.redaction svg{width:16px; height:16px; color:var(--ink-2); margin-top:2px}
.redaction p{margin:0; font-size:var(--t-sm); color:var(--ink-2)}

/* -------------------------------------------------------------- 9 · stempel */
.stamp{
  display:inline-flex; flex-direction:column; gap:var(--s2);
  border:2px solid var(--rule); background:var(--accent); color:var(--accent-ink);
  padding:var(--s3) var(--s5); rotate:-3.2deg; transform-origin:left center;
}
.stamp__t{font-size:var(--t-sm); font-weight:700; letter-spacing:0.24em;
  text-transform:uppercase; font-variation-settings:"wdth" 108}
.stamp__m{font-family:var(--mono); font-size:var(--t-xs); letter-spacing:0.1em;
  color:var(--accent-ink-soft)}

/* Sidens ene bevægelse: stemplet sætter sig én gang. Det er synligt fra
   første frame — animationen flytter det kun på plads. */
@media (prefers-reduced-motion:no-preference){
  .stamp{animation:press 620ms cubic-bezier(.16,1,.3,1) both}
}
@keyframes press{
  from{rotate:-8deg; scale:1.055}
  to{rotate:-3.2deg; scale:1}
}

/* ------------------------------------------------------ 10 · handlinger */
.btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  font:inherit; font-weight:600; font-size:var(--t-base);
  background:var(--accent); color:var(--accent-ink);
  border:1.5px solid var(--rule); border-radius:1px;
  padding:var(--s3) var(--s5); cursor:pointer; text-decoration:none;
  max-width:100%; overflow-wrap:anywhere;
  transition:translate 120ms ease-out, box-shadow 120ms ease-out;
}
.btn:hover{translate:0 -1px}
.btn:active{translate:0 0}
.btn[disabled],.btn[aria-disabled="true"]{
  background:var(--paper-sunk); color:var(--ink-3);
  border-color:var(--hair); cursor:not-allowed; translate:none;
}
.link{
  color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--accent-edge); text-decoration-thickness:1.5px;
  text-underline-offset:4px;
}
.link:hover{text-decoration-thickness:2.5px}

/* ------------------------------------------------------------- 11 · fod */
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
  gap:var(--s6); padding:var(--s8) 0 var(--s9); border-top:1.5px solid var(--rule)}
.foot > *{min-width:0}
@media (max-width:720px){ .foot{flex-direction:column; align-items:flex-start} }

/* ------------------------------------------------- 12 · udkast/placeholder */
/* Skal kunne SES. En placeholder der ligner færdig tekst er værre end ingen. */
.placeholder{
  border:1px dashed var(--accent-edge); padding:var(--s4) var(--s5);
  margin:0 0 var(--s4); background:var(--paper-raised);
}
.placeholder > .k{display:block; color:var(--accent-edge); margin-bottom:var(--s2)}
.placeholder p{margin:0; color:var(--ink-2); font-size:var(--t-sm)}
/* Udkast markeres ikke længere visuelt. Siden skal se færdig ud, og hvad der
   mangler at blive skrevet om står i SKRIVELISTE.md. Klassen bliver stående
   så udkastene kan findes med et grep. */
/* Udkast-mærket er kun et mærke. Det tæller med i skrivelisten og bliver
   fjernet af sig selv når teksten er skrevet om, og det må ikke kunne ses.
   Reglen stod før som `color:inherit`, og den slog farven på afsnittet
   omkring ihjel: et udkast i hovedet blev sort mens resten var grå. Et
   arbejdsmærke der ændrer designet er værre end intet mærke. */
.draft{ /* med vilje tom */ }

/* ------------------------------------------------------- 13 · arbejdsform */
/* --------------------------------------------------------- 14 · faktaliste */
.facts{display:grid; gap:0; margin:var(--s5) 0 0; border-top:1px solid var(--hair)}
.facts__row{display:grid; grid-template-columns:var(--label-rail) minmax(0,1fr);
  gap:var(--s5); padding:var(--s4) 0; border-bottom:1px solid var(--hair-soft)}
.facts__row p{margin:0}
@media (max-width:860px){
  .facts__row{grid-template-columns:1fr; gap:var(--s1)}
}

/* --------------------------------------------------- 15 · protokol-sider */
/* Tilbage til attesten. Står øverst, før dokumentbåndet. */
.backlink{display:inline-flex; align-items:center; gap:var(--s2); margin-bottom:var(--s5);
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink-3); text-decoration:none}
.backlink:hover{color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--accent-edge); text-underline-offset:4px}
.backlink svg{width:14px; height:14px; rotate:180deg}

/* Videre til protokollen, sat i bunden af et projekt på forsiden. */
.more{display:inline-flex; align-items:center; gap:var(--s2); margin-top:var(--s5);
  font-size:var(--t-base); font-weight:560; color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--accent-edge); text-decoration-thickness:1.5px;
  text-underline-offset:4px}
.more:hover{text-decoration-thickness:2.5px}
.more svg{width:15px; height:15px}
/* Peger linket tilbage til forsiden, skal pilen også pege tilbage. */
.more[href$="index.html"] svg{rotate:180deg}

/* Trinene i en metode. Nummeret bærer rækkefølgen, som i en protokol. */
.steps{list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:var(--s6)}
.steps > li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:var(--s4)}
.steps__n{font-family:var(--mono); font-size:var(--t-xs); color:var(--ink-3); padding-top:6px}
.steps h3{margin:0 0 var(--s2)}
.steps p{margin:0 0 var(--s3)}
.steps p:last-child{margin-bottom:0}
.steps__val{font-family:var(--mono); font-size:var(--t-sm); font-weight:500;
  font-variant-numeric:tabular-nums; color:var(--ink);
  border-bottom:1.5px solid var(--accent-edge); padding-bottom:1px;
  white-space:nowrap}
/* Værdien holdes samlet, men aldrig på bekostning af at siden får en
   vandret scrollbar. På smalle skærme må den hellere knække. */
@media (max-width:600px){ .steps__val{white-space:normal} }
@media (max-width:560px){
  .steps > li{grid-template-columns:1fr; gap:var(--s2)}
}

/* --------------------------------------------------- 17 · telefonskærme */
/* En app er ikke et bredformat. Et 16:9-felt om en telefonskærm er en løgn om
   hvad man kigger på. Tre skærme ved siden af hinanden viser til gengæld et
   forløb, og det er præcis hvad en app er: en vej gennem nogle skærme.
   Ingen karrusel. En karrusel skjuler to tredjedele af det den viser. */
.screens{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--s5); margin-top:0}
.screens figure{margin:0}
.screens .figure__frame{aspect-ratio:9 / 19.5}
.screens .figure__frame:not(:has(img)){padding:var(--s4)}
.screens .figure__spec{max-width:none; line-height:1.6}
.screens .figure__cap{margin-top:var(--s3); gap:var(--s3); align-items:baseline}
.screens .figure__cap .k{padding-top:0}
/* Forklaringen til et billede står som almindeligt afsnit under det, i samme
   grad og samme farve som resten af teksten. Den lille grå figurtekst med
   etiket foran gjorde forklaringen til en fodnote, og så bliver den ikke
   læst. Etiketterne under telefonskærmene bliver, for de navngiver kun. */
.figure__cap{margin-top:var(--s3)}

/* Rammen og dens etiket er én ting. Det der kommer bagefter er en anden, og
   skiftet skal kunne ses. Uden luften her læser brødteksten som en billedtekst
   der bare blev for lang. Afstanden ind til billedet og ud af det igen er den
   samme, så billedblokken står som en blok og ikke som noget klemt ind. */
.screens + p, .screens + figure, .screens + .figure--pair, .screens + .redaction,
.figure--pair + p, figure + p, .redaction + p,
.screens + .keys, .figure--pair + .keys, figure + .keys{margin-top:var(--s6)}

p + .screens, p + .figure--pair, p + figure,
.redaction + .screens, .redaction + figure{margin-top:var(--s6)}

/* Browserens egen figur-margen er 40 px i siderne, og den gjorde et 16:9-
   billede smallere end telefonrækken over det. To forskellige bredder i samme
   spalte er den slags der får en side til at se skæv ud uden at man kan sige
   hvorfor. Figuren fylder spalten som alt andet. */
figure{margin:0}

/* På en telefon bliver tre spalter til to plus et hul. Der bliver rækken
   til en vandret rulleliste med snap i stedet, så man kan trække sig
   igennem skærmene. Det er browserens egen rulning, ikke en karrusel:
   ingen JavaScript, ingen bevægelse siden selv sætter i gang, og den
   virker med tastatur og med rullehjul. Strimlen holder sig inden for
   tekstkolonnen, så den første skærm står i nøjagtig samme venstrekant som
   alt andet, og den næste skærm er synligt skåret af i højre side. Det er
   dét der fortæller at der er mere. */
@media (max-width:720px){
  .screens{
    display:flex; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; gap:var(--s5); padding-bottom:var(--s2);
  }
  .screens figure{flex:0 0 66%; scroll-snap-align:start}
}

/* ---------------------------------------------- 16 · projektet på forsiden */
/* Forsiden viser projekter, ikke datablade. Navnet står først og alene,
   billedet lige under, og målingerne er skåret ned til tre. Resten af
   tallene bor i protokollen, hvor der er plads til metoden ved siden af. */

/* Projektet lukker ikke med en streg under stakken. Luften mellem to
   projekter gør det samme arbejde, og navnet på det næste projekt er stort
   nok til selv at sige at et nyt afsnit begynder. Sektionerne på
   protokolsiderne beholder deres streg, for dér er overskrifterne små. */
.section.project{border-bottom:0}
.project__name{
  font-size:var(--t-2xl); line-height:1.02; letter-spacing:-0.022em;
  font-variation-settings:"wdth" 106,"opsz" 40; margin-bottom:var(--s3);
}
.project__role{
  font-family:var(--mono); font-size:var(--t-sm); line-height:1.65;
  color:var(--ink-3); margin:0 0 var(--s6);
}
.project p:last-of-type{margin-bottom:0}
.project .placeholder{margin-top:var(--s5)}

/* Ledebilledet står øverst i projektet, uden etiket over sig. */
.figure--lead{margin-top:0}
.figure--pair{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); margin-top:var(--s6)}
.figure--pair .figure__frame{aspect-ratio:16/9}
.figure--pair figure{margin:0}
@media (max-width:720px){
  .figure--pair{grid-template-columns:1fr}
}

/* Tre nøgletal. Flere end tre, og projektet bliver til en tabel igen. */
.keys{
  list-style:none; margin:var(--s6) 0 0; padding:var(--s4) 0 0;
  border-top:1px solid var(--hair);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5);
}
.keys__v{
  display:block; font-family:var(--mono); font-size:var(--t-lg); font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:-0.01em; color:var(--ink);
  word-spacing:-0.22em;
}
.keys__l{display:block; margin-top:var(--s1); font-size:var(--t-sm);
  line-height:1.4; color:var(--ink-3); max-width:26ch}
@media (max-width:720px){
  .keys{grid-template-columns:1fr 1fr; gap:var(--s5) var(--s4)}
}
@media (max-width:480px){
  .keys{grid-template-columns:1fr}
}

/* ------------------------------------------------ 17b · stakken pr. projekt */
/* Under tallene glider mærkerne for det projektet er bygget af. Ét bånd, én
   retning, roligt tempo. Det er ikke en karrusel man skal betjene, det er en
   linje der bevæger sig af sig selv, så øjet fanger den uden at blive bedt om
   noget.

   Mærkerne er sat i blæk og ikke i deres egne farver. Ti brandfarver i en
   stribe ville være det eneste kulørte på hele siden, og så handler siden
   pludselig om logoerne. I én farve læses de som det de er: en materialeliste.

   Båndet toner ud i begge ender, fordi et mærke der bliver klippet skarpt over
   ved kanten ligner en fejl, mens et der toner ud ligner noget der fortsætter. */
.stak{
  margin-top:var(--s4); padding:var(--s3) 0;
  overflow:hidden; color:var(--ink-2);
  mask-image:linear-gradient(to right, transparent, #000 56px,
             #000 calc(100% - 56px), transparent);
}
.stak__spor{display:flex; width:max-content}
.stak__raekke{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:var(--s8);
  padding-right:var(--s8);
}
.stak__raekke li{flex:none; display:block}
.stak__raekke svg{display:block; height:24px; width:auto; fill:currentColor}
/* Nogle mærker er tegnet tungere end andre. De to her fylder for meget ved
   samme højde som resten, så de får en lavere. Det er øjemål og ikke matematik,
   og det er den slags der afgør om en stribe ser rolig ud. */
.stak__raekke svg[data-tung]{height:20px}
/* Navnet står der for skærmlæsere og for den der holder musen stille. */
.skjul{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}

/* En række der kan være i kolonnen, glider ikke. Bevægelsen ville ikke vise
   noget der ikke allerede stod der, og med to eller tre mærker bliver båndet
   til tapet: de samme to logoer om og om igen, hele vejen ud. Så bliver det
   et mønster i stedet for en materialeliste.
   Kun stakke der er bredere end kolonnen ruller, og de ruller fordi der
   faktisk er mere at se. Rækken ombrydes på smalle skærme i stedet for at
   stikke ud af siden. */
.stak--rolig{overflow:visible; mask-image:none}
.stak--rolig .stak__spor{width:auto; animation:none}
.stak--rolig .stak__raekke{flex-wrap:wrap; gap:var(--s5) var(--s8); padding-right:0}

/* Båndet er kun hulløst hvis der altid ligger mindst én hel kopi af rækken
   parat uden for vinduet. Derfor står antallet af kopier på selve elementet:
   kopier gange rækkebredde skal dække kolonnen plus den kopi der glider ud.
   Med to kopier og en kort række nåede rækken at slippe kanten, og så kom der
   et hul indtil løkken sprang tilbage. Det var fejlen.

   Varigheden står samme sted og er regnet ud fra rækkens bredde, så alle fem
   bånd glider i samme tempo, omkring 29 px i sekundet, selv om de er
   forskelligt lange. */
@media (prefers-reduced-motion:no-preference){
  .stak__spor{animation:stak-glid var(--varighed,42s) linear infinite}
  /* Peger man på båndet, står det stille. Så kan man nå at kigge på et mærke
     man ikke genkender uden at jagte det. */
  .stak:hover .stak__spor, .stak:focus-within .stak__spor{animation-play-state:paused}
}
@keyframes stak-glid{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-100% / var(--kopier,2)),0,0)}
}
/* Vil man ikke have bevægelse, bliver båndet til en stille blok. Mærkerne
   ombrydes i stedet for at rulle, kopien skjules, og masken slukkes. Så er
   der ingen der skal trække i noget for at se hele stakken, og der er intet
   der stikker ud af siden. */
@media (prefers-reduced-motion:reduce){
  .stak{overflow:visible; mask-image:none}
  .stak__spor{width:auto}
  .stak__raekke{flex-wrap:wrap; gap:var(--s5) var(--s7); padding-right:0}
  .stak__raekke[aria-hidden]{display:none}
}

/* -------------------------------------------------- 18 · billedvisningen */
/* Siden har ingen detaljesider. I stedet kan hvert billede åbnes stort og
   bladres igennem. Rammen skal derfor vise at den kan klikkes, uden at blive
   en knap med kant og skygge. En markør og en hårstreg der bliver mørkere. */
.figure__frame{cursor:zoom-in; transition:border-color 120ms ease-out}
.figure__frame:hover{border-color:var(--ink-3)}
.figure__frame:focus-visible{outline:2px solid var(--focus); outline-offset:3px}

.lys{
  border:0; padding:0; max-width:100vw; max-height:100vh;
  width:100%; height:100%; background:var(--paper); color:var(--ink);
}
.lys::backdrop{background:rgba(20,23,26,.86)}
.lys__flade{
  position:absolute; inset:0 0 72px; display:grid; place-items:center;
  padding:var(--s6);
}
/* Procenthøjde er ikke bestemt nok her, så billedet løb ud over bunden.
   Skærmenheder er bestemte, og 72px er fodens højde. */
.lys__flade img{
  max-width:calc(100vw - var(--s7)); max-height:calc(100vh - 72px - var(--s7));
  width:auto; height:auto; object-fit:contain;
}
.lys__tom{
  border:1px dashed var(--hair); padding:var(--s8) var(--s7);
  background:var(--paper-sunk); max-width:56ch;
}
.lys__tom .figure__spec{font-size:var(--t-sm); line-height:1.9; max-width:none}
.lys__fod{
  position:absolute; left:0; right:0; bottom:0; height:72px;
  display:flex; align-items:center; gap:var(--s5);
  padding-inline:var(--s6); border-top:1.5px solid var(--rule);
}
.lys__tal{flex:none}
.lys__tekst{font-size:var(--t-sm); color:var(--ink-2); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Bladring skal kunne ses. Piletasterne findes stadig, men en besøgende der
   har åbnet ét billede med musen har ingen grund til at gætte på et tastatur.
   Knapperne er sat som resten af siden: mono, versaler, én hårstreg om sig,
   ingen kapsel og ingen skygge. */
.lys__styr{margin-left:auto; flex:none; display:flex; gap:var(--s3)}
.lys__gaa{
  display:inline-flex; align-items:center; gap:var(--s2);
  font:inherit; font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.16em; text-transform:uppercase;
  background:transparent; color:var(--ink); border:1px solid var(--hair);
  padding:7px var(--s4); cursor:pointer; border-radius:1px;
  transition:border-color 120ms ease-out;
}
.lys__gaa:hover{border-color:var(--ink-3)}
.lys__gaa svg{width:14px; height:14px; flex:none}
.lys__gaa[hidden]{display:none}
.lys__luk{
  flex:none; font:inherit; font-family:var(--mono);
  font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase;
  background:var(--accent); color:var(--accent-ink); border:0;
  padding:8px var(--s4); cursor:pointer; border-radius:1px;
}
@media (max-width:560px){
  .lys__flade{padding:var(--s4)}
  .lys__fod{padding-inline:var(--s5); gap:var(--s4)}
  /* På en telefon er der ikke plads til ordene. Pilene siger det samme. */
  .lys__tekst{display:none}
  .lys__gaa{padding:7px var(--s3); font-size:0; gap:0; letter-spacing:0}
  .lys__gaa svg{width:16px; height:16px}
}