/* itematic.dk — tokens and layout from the design hand-off (retning 1a, "Dokument"). */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2-variations'),
       url('/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --ink: #0A0404;
  --ink-64: rgba(10,4,4,.64);
  --ink-50: rgba(10,4,4,.5);
  --rule: rgba(10,4,4,.16);
  --link-rule: rgba(10,4,4,.28);
  --paper: #fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Hanken Grotesk', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--link-rule); }
a:hover { border-bottom-color: var(--ink); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.page { max-width: 900px; margin: 0 auto; padding: 72px 88px 80px; display: flex; flex-direction: column; gap: 64px; }

.masthead { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
.lockup { display: flex; align-items: center; gap: 16px; border-bottom: 0; }
.lockup img { display: block; width: 38px; height: 38px; }
.wordmark { font-size: 27px; font-weight: 500; letter-spacing: -.015em; line-height: 1; }
.lang { display: flex; align-items: center; gap: 14px; padding-top: 8px; }
.lang a { font: 500 13px/1 'Hanken Grotesk', sans-serif; letter-spacing: .06em; opacity: .4; border-bottom: 0; }
.lang a[aria-current="page"] { opacity: 1; }
.lang .sep { width: 1px; height: 12px; background: rgba(10,4,4,.24); }

.body { display: flex; flex-direction: column; gap: 56px; max-width: 620px; }
.lede { margin: 0; font-size: 26px; font-weight: 400; line-height: 1.5; letter-spacing: -.005em; text-wrap: pretty; }
.meta { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-50); }
.block { display: flex; flex-direction: column; gap: 14px; }
.label { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); }
.block p { margin: 0; font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.block p.muted { color: var(--ink-64); }
.block h3 { margin: 10px 0 0; font-size: 17px; font-weight: 600; line-height: 1.65; }
.block ul, .block ol { margin: 0; padding-left: 22px; font-size: 17px; line-height: 1.65; }
.block li { margin: 0 0 6px; text-wrap: pretty; }
.block table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.5; }
.block th, .block td { text-align: left; vertical-align: top; padding: 8px 16px 8px 0; border-bottom: 1px solid var(--rule); }
.block th { font-weight: 600; }
.contents ol { columns: 2; column-gap: 32px; font-size: 16px; line-height: 1.6; padding-left: 20px; }
.contents li { break-inside: avoid; }
.contents a { border-bottom: 0; color: var(--ink-64); }
.contents a:hover { color: var(--ink); border-bottom: 1px solid var(--ink); }

.details { gap: 18px; padding-top: 40px; border-top: 1px solid var(--rule); }
.details dl { display: grid; grid-template-columns: 130px 1fr; gap: 10px 24px; margin: 0; font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.details dt { color: var(--ink-50); }
.details dd { margin: 0; }

@media (max-width: 720px) {
  .page { padding: 40px 24px 56px; gap: 48px; }
  .wordmark { font-size: 23px; }
  .lockup img { width: 32px; height: 32px; }
  .body { gap: 44px; }
  .lede { font-size: 21px; }
  .block p, .block ul, .block ol, .block h3 { font-size: 16px; }
  .contents ol { columns: 1; }
  .details dl { grid-template-columns: 1fr; gap: 2px 0; }
  .details dd { margin-bottom: 10px; }
}