/* De fire hjørnesider deler ét ark: de skal være tomme nok til at den flydende knap er
   det eneste, der er noget på siden. */
:root {
  --ink: #14161a;
  --cream: #f4f1ea;
  --dim: rgba(244, 241, 234, 0.6);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--cream);
  font:
    400 17px/1.65 system-ui,
    -apple-system,
    Segoe UI,
    sans-serif;
}
a {
  color: var(--cream);
}
/* DE ØVERSTE HJØRNER FÅR DEN ØVERSTE STRIBE FOR SIG SELV. Knappen sidder fast 20 px fra toppen og
   er omkring 48 px høj, og uden luft lå den oven på «← Laboratoriet» (tr) og oven på båndets tekst
   på en telefon (tl) — så den ene udvej fra siden var dækket af det, siden handler om. */
body.oeverst {
  padding-top: 84px;
}
/* FLEX-WRAP, fordi linket ikke må brydes: med `nowrap` på «← Laboratoriet» klemte en 320 px skærm
   båndets tekst ned til ét ord pr. linje (e2e/demo-sites). Nu går linket på sin egen linje i stedet. */
.ribbon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 16px;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(244, 241, 234, 0.16);
  font:
    500 12px/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.04em;
}
/* «← Kontrolrum» i båndet: 12px/1 monotekst, altså et 12px højt trykmål. Et link, der ikke står i
   en sætning, har ingen fritagelse fra WCAG 2.5.8's 24px. */
.ribbon a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  white-space: nowrap;
}
main {
  max-width: 640px;
  margin: 0 auto;
  padding: 15vh 24px 24vh;
}
h1 {
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
p {
  margin: 0 0 18px;
}
.mono {
  font:
    500 12.5px/1.6 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  color: var(--dim);
  background: #1c1f25;
  border: 1px solid rgba(244, 241, 234, 0.16);
  border-radius: 10px;
  padding: 12px 14px;
  overflow-x: auto;
}
.dim {
  color: var(--dim);
  font-size: 0.95rem;
}
.hjoerner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.hjoerner a {
  min-width: 52px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(244, 241, 234, 0.3);
  border-radius: 10px;
  font:
    500 13px/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  text-decoration: none;
}
.hjoerner a:hover {
  background: var(--cream);
  color: var(--ink);
}