/* Clero — Arkitekturtegningen (verden valgt 2026-09-04, erstatter den varme hybrid).
   Sitet ER tegningen af det, Clero bygger: ét ark millimeterpapir med ramme,
   én linje fra e-conomic til beslutning, revisionsliste og titelfelt.
   Ingen kort, ingen skygger, ingen JavaScript. Se DESIGN.md. */
:root {
  --papir: #f4f7fb;        /* køligt tegnepapir */
  --papir-dyb: #eaf0f7;    /* titelfeltets flade */
  --blaek: #0b1f3a;        /* blueprint-navy: al tekst og alle streger */
  --blaek-svag: #3b4f6b;   /* sekundær tekst (7,9:1 mod papir) */
  --maal: #4f6587;         /* målsætninger og annotationer (5,5:1 mod papir, 5,2:1 mod titelfelt) */
  --gitter: #dde5f0;       /* millimeterpapirets tynde linjer */
  --gitter-staerk: #c9d6e8;/* hver 5. linje */
  --linje: #059669;        /* ÉN accent: dataens vej */
  --linje-tekst: #047857;  /* emerald til tekst (5,1:1 mod papir) */
  --gitter-trin: 24px;
  --ramme: 1.5px;
  --maxw: 76rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--papir); }
body {
  margin: 0; color: var(--blaek);
  font: 400 1rem/1.55 "DM Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    linear-gradient(var(--gitter-staerk) 1px, transparent 1px) 0 0 / calc(var(--gitter-trin) * 5) calc(var(--gitter-trin) * 5),
    linear-gradient(90deg, var(--gitter-staerk) 1px, transparent 1px) 0 0 / calc(var(--gitter-trin) * 5) calc(var(--gitter-trin) * 5),
    linear-gradient(var(--gitter) 1px, transparent 1px) 0 0 / var(--gitter-trin) var(--gitter-trin),
    linear-gradient(90deg, var(--gitter) 1px, transparent 1px) 0 0 / var(--gitter-trin) var(--gitter-trin),
    var(--papir);
  min-height: 100vh;
}

/* Browserens egne flader taler tegningens sprog */
::selection { background: #d1fae5; color: var(--blaek); }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--linje); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--linje-tekst); }
a:focus-visible { outline: 2px solid var(--linje); outline-offset: 3px; border-radius: 2px; }
.mono { font-family: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--maal); }
.nobr { white-space: nowrap; }

/* ── Arket: tegningens ramme ──────────────────────────────────────────── */
.ark {
  max-width: var(--maxw); margin: clamp(14px, 2.5vw, 32px) auto;
  border: var(--ramme) solid var(--blaek); outline: 1px solid var(--blaek); outline-offset: 4px;
  display: grid; grid-template-rows: auto auto auto;
  /* Arket er præcis så højt som indholdet — intet tomt gitter på høje skærme */
}
.ark > * { padding-inline: clamp(20px, 4vw, 56px); }

.ark-hoved {
  display: flex; align-items: baseline; gap: 24px;
  padding-block: 18px; border-bottom: var(--ramme) solid var(--blaek);
}
/* Navnetrækket er husets signatur — samme Instrument Serif som webappens
   lockup. Det eneste serif-element på siden; resten er tegningens DM Sans/Mono. */
.wordmark { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 1.75rem; line-height: 1; letter-spacing: -.01em; }
.wordmark a { text-decoration: none; }
.ark-hoved nav { margin-left: auto; }
.ark-hoved nav a { font-weight: 500; white-space: nowrap; }
.ark-hoved .mono { display: none; }
@media (min-width: 720px) { .ark-hoved .mono { display: block; } }
/* Lodret liste (under 1024): trinnene må ikke blive kilometerlange på tablet */
@media (min-width: 600px) and (max-width: 1023.98px) { .trin { max-width: 40rem; } }

/* ── Tegningen: én linje gennem fem trin ─────────────────────────────── */
.tegning { padding-block: clamp(40px, 7vh, 88px) clamp(28px, 4vh, 48px); }
.tegning h1 {
  margin: 0 0 clamp(28px, 4vh, 44px); max-width: 30ch;
  font-weight: 600; font-size: clamp(1.9rem, 4.2vw, 3.25rem); line-height: 1.05; letter-spacing: -.025em;
  text-wrap: balance;
}
.tegning h1 em { font-style: normal; color: var(--linje-tekst); }

.flow { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 16px; }
/* Linjen: den ene grafik på siden — en målsat linje med en tik ind i hvert
   trin, som på en tegning. Tegner sig selv én gang. */
.flow::before {
  content: ""; position: absolute; background: var(--linje); z-index: 0;
  transform-origin: left center;
  animation: tegn 1.4s cubic-bezier(.2, .8, .2, 1) both;
}
/* Tikkerne følger linjen: de toner frem, når linjen er nået frem til dem */
.trin::before { content: ""; position: absolute; background: var(--linje); z-index: 0; animation: tik .4s ease-out both; }
.trin:nth-child(1)::before { animation-delay: .35s; }
.trin:nth-child(2)::before { animation-delay: .6s; }
.trin:nth-child(3)::before { animation-delay: .85s; }
.trin:nth-child(4)::before { animation-delay: 1.05s; }
.trin:nth-child(5)::before { animation-delay: 1.25s; }
@keyframes tik { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1023.98px) {
  .flow { padding-left: 28px; }
  .flow::before { left: 0; top: 0; bottom: 0; width: 2px; transform-origin: center top; animation-name: tegn-lodret; }
  .trin::before { left: -28px; top: 26px; width: 28px; height: 1.5px; }
}
/* Fem kolonner først fra laptop-bredde — på tablet blev trinnene for smalle */
@media (min-width: 1024px) {
  .flow { grid-template-columns: repeat(5, 1fr); gap: 14px; padding-top: 24px; }
  .flow::before { left: 0; right: 0; top: 0; height: 2px; }
  .trin::before { left: 50%; top: -24px; width: 1.5px; height: 24px; }
}
@keyframes tegn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tegn-lodret { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .flow::before, .trin::before { animation: none; } }

.trin {
  position: relative; z-index: 1;
  background: var(--papir); border: var(--ramme) solid var(--blaek);
  padding: 14px 16px 16px;
}
.trin .nr { display: block; margin-bottom: 10px; color: var(--blaek); }
.trin h2 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.trin h2 small { display: block; font-weight: 400; font-size: .8rem; color: var(--blaek-svag); margin-top: 2px; }
.trin p { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--blaek-svag); }
/* Kilden er udefra (stiplet); målet er jeres — det eneste, linjen farver */
.trin.kilde { border-style: dashed; }
.trin.maal { border-color: var(--linje); }


.maalsaetning { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.maalsaetning span::before { content: "— "; }

/* ── Revisionsliste + titelfelt (som på en rigtig tegning) ───────────── */
.fod { padding: 0 !important; border-top: var(--ramme) solid var(--blaek); display: grid; }
@media (min-width: 900px) { .fod { grid-template-columns: 7fr 5fr; } }

.revisioner { padding: 22px clamp(20px, 4vw, 56px) 26px; }
.revisioner h2 { margin: 0 0 12px; font-size: .95rem; font-weight: 600; }
.revisioner table { width: 100%; border-collapse: collapse; font-size: .92rem; }
/* Ingen skillelinjer mellem referencerne: en tredje slags streg (hverken
   blæk-ramme eller gitter) læses som støj oven på millimeterpapiret. Luft skiller. */
.revisioner th, .revisioner td { text-align: left; vertical-align: top; padding: 0 12px 14px 0; }
.revisioner tr:last-child th, .revisioner tr:last-child td { padding-bottom: 0; }
.revisioner th { font-weight: 600; white-space: nowrap; width: 9rem; }
.revisioner td { color: var(--blaek-svag); }
.revisioner td .aar { color: var(--maal); font-variant-numeric: tabular-nums; }
.produkter-h { margin-top: 22px !important; padding-top: 16px; border-top: var(--ramme) solid var(--blaek); }
.produkter { margin: 0; font-size: .92rem; color: var(--blaek-svag); max-width: 60ch; }
.produkter strong { font-weight: 600; color: var(--blaek); }
/* Mobil: navn over beskrivelse — tre kolonner klemte teksten til ét ord pr. linje */
@media (max-width: 559.98px) {
  .revisioner tr, .revisioner th, .revisioner td { display: block; width: auto; }
  .revisioner th { padding-bottom: 2px; }
  .revisioner tr:last-child th { padding-bottom: 2px; }
}

.titelfelt { background: var(--papir-dyb); padding: 22px clamp(20px, 4vw, 56px) 26px; border-top: var(--ramme) solid var(--blaek); }
@media (min-width: 900px) { .titelfelt { border-top: 0; border-left: var(--ramme) solid var(--blaek); } }
.titelfelt .statement { margin: 0 0 16px; font-weight: 600; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.015em; }
.titelfelt dl { margin: 0; }
.titelfelt dl > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--gitter-staerk); font-size: .86rem; }
.titelfelt dt { color: var(--maal); font-family: "DM Mono", ui-monospace, monospace; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding-top: 3px; }
.titelfelt dd { margin: 0; color: var(--blaek-svag); }
.titelfelt dd strong { font-weight: 500; color: var(--blaek); }

/* 404 */
.tom { padding-block: clamp(48px, 12vh, 120px); }
.tom h1 { font-weight: 600; font-size: clamp(1.6rem, 3.5vw, 2.4rem); letter-spacing: -.02em; margin: 0 0 12px; }
.tom p { margin: 0; color: var(--blaek-svag); }

/* ── Print: en tegning er noget, man printer ─────────────────────────── */
@media print {
  @page { margin: 12mm; }
  html, body { background: #fff !important; }
  .ark { margin: 0; max-width: none; outline: none; border-color: #000; }
  .ark-hoved nav { display: none; }
  .flow::before, .trin::before { animation: none !important; background: #000; }
  .trin.maal { border-color: #000; }
  .tegning h1 em { color: #000; }
  .titelfelt { background: #fff; }
  a { text-decoration: none; color: inherit; }
  a[href^="mailto:"]::after { content: ""; }
}