/* ==========================================================================
   viggoeb.be — offentlig produktionsidentitet

   Koden på main er source of truth. Figma-filen er historik/reference og
   må ikke styre eller blokere ændringer i denne fil.
   ========================================================================== */

/* --- Self-hosted Inter (variabel). Ingen CDN, ingen Google-kald i drift. --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/inter-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/inter-latin-var-italic.woff2') format('woff2');
}

/* --- Primitives ---------------------------------------------------------- */
:root {
  --white: #fffefb;
  --grey-50: #f4f2e9;
  --grey-100: #eae9e1;
  --grey-200: #e0ded3;
  --grey-400: #a8a8a1;
  --grey-500: #8a8985;
  --grey-600: #6b6a62;
  --grey-800: #32312d;
  --grey-900: #1d1d1a;
  --black: #0e0e0b;
  --blue-300: #9db4ff;
  --blue-600: #1a1ae5;
  --blue-700: #1212a8;
}

/* --- Semantiske farver, Light-mode -------------------------------------- */
:root {
  --color-bg-canvas: var(--white);
  --color-bg-subtle: var(--grey-50);
  --color-bg-inverse: var(--black);
  --color-text-primary: var(--black);
  --color-text-reference: var(--grey-600);
  --color-text-inverse: var(--white);
  --color-border-strong: var(--black);
  --color-link-default: var(--blue-600);
  --color-link-hover: var(--blue-700);
  --color-focus-ring: var(--blue-600);
  --shadow-recess: rgba(0, 0, 0, .10);
  --shadow-recess-hairline: rgba(0, 0, 0, .06);
}

/* --- Dark-mode ----------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-bg-canvas: var(--black);
    --color-bg-subtle: var(--grey-900);
    --color-bg-inverse: var(--white);
    --color-text-primary: var(--grey-50);
    --color-text-reference: var(--grey-500);
    --color-text-inverse: var(--black);
    --color-border-strong: var(--grey-50);
    --color-link-default: var(--blue-300);
    --color-link-hover: var(--white);
    --color-focus-ring: var(--blue-300);
    --shadow-recess: rgba(0, 0, 0, .45);
    --shadow-recess-hairline: rgba(0, 0, 0, .30);
  }
}
:root[data-theme='dark'] {
  --color-bg-canvas: var(--black);
  --color-bg-subtle: var(--grey-900);
  --color-bg-inverse: var(--white);
  --color-text-primary: var(--grey-50);
  --color-text-reference: var(--grey-500);
  --color-text-inverse: var(--black);
  --color-border-strong: var(--grey-50);
  --color-link-default: var(--blue-300);
  --color-link-hover: var(--white);
  --color-focus-ring: var(--blue-300);
  --shadow-recess: rgba(0, 0, 0, .45);
  --shadow-recess-hairline: rgba(0, 0, 0, .30);
}

/* --- Layout-tokens, Desktop-mode ---------------------------------------- */
:root {
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --layout-page-margin: 72px;
  --layout-content-max: 720px;
  --radius-sm: 2px;
  --radius-md: 8px;

  /* Type-ramp, Desktop */
  --type-display: 600 48px/56px 'Inter', system-ui, sans-serif;
  --type-h1: 600 36px/44px 'Inter', system-ui, sans-serif;
  --type-h2: 600 28px/36px 'Inter', system-ui, sans-serif;
  --type-h3: 500 21px/28px 'Inter', system-ui, sans-serif;
  --type-body: 300 19px/32px 'Inter', system-ui, sans-serif;
  --type-body-small: 300 16px/26px 'Inter', system-ui, sans-serif;
  --type-quote: italic 300 22px/34px 'Inter', system-ui, sans-serif;
  --type-nav: 500 16px/24px 'Inter', system-ui, sans-serif;
  --type-meta: 300 14px/20px 'Inter', system-ui, sans-serif;
  --type-ref: 300 19px/32px 'Inter', system-ui, sans-serif;
}

/* --- Layout-tokens, Mobile-mode ----------------------------------------- */
@media (max-width: 640px) {
  :root {
    --space-md: 20px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-3xl: 56px;
    --layout-page-margin: 16px;
    --layout-content-max: 358px;

    --type-display: 600 34px/40px 'Inter', system-ui, sans-serif;
    --type-h1: 600 28px/34px 'Inter', system-ui, sans-serif;
    --type-h2: 600 22px/28px 'Inter', system-ui, sans-serif;
    --type-h3: 500 18px/24px 'Inter', system-ui, sans-serif;
    --type-body: 300 16px/28px 'Inter', system-ui, sans-serif;
    --type-body-small: 300 14px/24px 'Inter', system-ui, sans-serif;
    --type-quote: italic 300 19px/30px 'Inter', system-ui, sans-serif;
    --type-nav: 500 15px/22px 'Inter', system-ui, sans-serif;
    --type-meta: 300 12px/18px 'Inter', system-ui, sans-serif;
    --type-ref: 300 16px/28px 'Inter', system-ui, sans-serif;
  }
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font: var(--type-body);
  /* −5% tracking gennem hele skalaen. Bevidst stramt. */
  letter-spacing: -0.05em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

:where(a):focus-visible,
:where(button):focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --- Sidegitter ---------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: calc(var(--layout-content-max) + var(--layout-page-margin) * 2);
  margin-inline: auto;
  padding-inline: var(--layout-page-margin);
}
.column { max-width: var(--layout-content-max); margin-inline: auto; }

/* --- Header -------------------------------------------------------------- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  font: var(--type-nav);
  letter-spacing: -0.05em;
}
.masthead a { color: inherit; text-decoration: none; }
.masthead a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wordmark { font: var(--type-h3); letter-spacing: -0.05em; }
.masthead nav { display: flex; gap: var(--space-lg); }
@media (max-width: 640px) { .masthead nav { gap: var(--space-sm); } }

/* --- Forside ------------------------------------------------------------- */
main { display: block; }
.hero { padding-block: var(--space-3xl) var(--space-2xl); }
.hero h1 { font: var(--type-display); letter-spacing: -0.05em; }

.post-list { padding-bottom: var(--space-3xl); }
.post-list li + li { margin-top: var(--space-xl); }
.post-list a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.post-list a:hover .post-title { text-decoration: underline; text-underline-offset: 4px; }
.post-meta {
  font: var(--type-meta);
  letter-spacing: -0.05em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2xs);
}
.post-title { font: var(--type-h2); letter-spacing: -0.05em; }

/* --- Indlæg -------------------------------------------------------------- */
.article { padding-block: var(--space-3xl) 0; }
.article > * + * { margin-top: var(--space-lg); }
.article h1 { font: var(--type-h1); letter-spacing: -0.05em; margin-top: var(--space-2xs); }

/* Mere luft OVER en overskrift end under: forholdet er 2:1.
   Overskriften bindes visuelt til det, der følger under den. */
/* Afstanden under overskriften kommer fra næste søskendes margin-top
   (--space-lg). Her fordobles afstanden over, så forholdet bliver 2:1. */
.article h2 {
  font: var(--type-h2);
  letter-spacing: -0.05em;
  margin-top: calc(var(--space-lg) * 2);
}
.article h3 {
  font: var(--type-h3);
  letter-spacing: -0.05em;
  margin-top: calc(var(--space-lg) * 2);
}

.article p { font: var(--type-body); letter-spacing: -0.05em; }

blockquote {
  border-left: 2px solid var(--color-border-strong);
  padding-left: var(--space-md);
  padding-block: var(--space-2xs);
  font: var(--type-quote);
  letter-spacing: -0.05em;
  color: var(--color-text-primary);
}

/* --- Inline reference ---------------------------------------------------- */
.ref {
  font: var(--type-ref);
  letter-spacing: inherit;
  color: var(--color-text-reference);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
/* Hover skifter IKKE vægt — så teksten ikke reflower under musen. */
.ref:hover { color: var(--color-text-primary); }

/* --- Forklaringen: fuldbredde-bånd, nedsænket i siden ------------------- */
.explain {
  /* bryder ud af tekstspalten og går fra kant til kant */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  background: var(--color-bg-subtle);
  /* Nedsænket, ikke svævende. Båndet spænder hele viewporten, så de
     lodrette kanter — og deres skygge — ligger uden for skærmen. */
  box-shadow:
    inset 0 3px 8px var(--shadow-recess),
    inset 0 1px 1px var(--shadow-recess-hairline);
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease-out;
}
.explain[data-open='true'] { grid-template-rows: 1fr; }
/* Båndet ligger flush op ad linjen over — som i Figma, hvor containeren har gap 0.
   Når det er foldet sammen, er højden 0, og afstanden mellem de to afsnit er
   præcis den normale. Når det åbner, skubber det resten ned. */
.article > .explain { margin-top: 0; }
.explain > .explain-clip { overflow: hidden; }
.explain-inner {
  /* Samme boks som .shell, så teksten i båndet flugter præcis med
     artikelspalten selv om båndet selv går fra kant til kant. */
  max-width: calc(var(--layout-content-max) + var(--layout-page-margin) * 2);
  margin-inline: auto;
  padding-block: var(--space-md);
  padding-inline: var(--layout-page-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.explain-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.explain-term {
  font: var(--type-meta);
  letter-spacing: -0.05em;
  color: var(--color-text-reference);
}
.explain-body { font: var(--type-ref); letter-spacing: -0.05em; color: var(--color-text-primary); }
.collapse {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--color-text-reference);
  cursor: pointer;
}
.collapse svg { width: 16px; height: 16px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .explain { transition: none; }
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-xl);
  margin-top: var(--space-3xl);
  font: var(--type-meta);
  letter-spacing: -0.05em;
  color: var(--color-text-primary);
}
.site-footer .links { display: flex; gap: var(--space-md); }
.site-footer a { color: var(--color-link-default); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--color-link-hover); }
@media (max-width: 640px) {
  .site-footer { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
}