:root {
  color-scheme: light;
  --dark: 0;

  --noise-url: url(data:image/png;base64,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);
  --noise-opacity: calc(0.4 - var(--dark) * 0.325);

  /* NB Design System — Web Colors */
  --nb-surface-base:        light-dark(#F4F4F4, #17181B);
  --nb-surface-elevated:    light-dark(#FFFFFF, #28292D);
  --nb-surface-highlighted: light-dark(#E4DFDE, #352834);
  --nb-text-default:        light-dark(#17181B, #FFEAEA);
  --nb-text-muted:          light-dark(#5B5C62, #95959D);
  --nb-primary-default:     light-dark(#17181B, #FFC9C9);
  --nb-primary-active:      light-dark(#550029, #FE91B8);
  --nb-secondary-400:       light-dark(#FE91B8, #402E3E);
  --nb-secondary-300:       #4B3A4A;
  --nb-secondary-200:       light-dark(#FDBECA, #513D4F);
  --nb-secondary-100:       light-dark(#FFEAEA, #6D556B);
  --nb-tints-300:           light-dark(#6D6F76, #C1ACAE);
  --nb-tints-200:           light-dark(#919298, #9F878B);
  --nb-tints-100:           light-dark(#D4D4D4, #78666A);
  --nb-system-error:        light-dark(#C72A2A, #BC5353);
  --nb-system-warning:      light-dark(#C77F2A, #BC8C53);
  --nb-system-success:      light-dark(#007435, #53BC64);
  --nb-additional-green:    light-dark(#93C1B1, #10453F);

  --ink: var(--nb-text-default);
  --ink-soft: var(--nb-tints-300);
  --muted: var(--nb-text-muted);
  --line: var(--nb-tints-100);
  --line-soft: var(--nb-surface-highlighted);
  --paper: var(--nb-surface-base);
  --paper-2: var(--nb-surface-highlighted);
  --card: var(--nb-surface-elevated);
  --accent: var(--nb-primary-active);
  --focus: var(--nb-primary-active);
  --border-ui: light-dark(#888888, #9F878B);

  --serif: "ITC Clearface Std", Georgia, serif;
  --sans: "STK Bureau Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* NB design system text scale */
  --nb-text-meta:   clamp(0.8125rem, 0.5982rem + 0.2381vw, 0.8125rem);
  --nb-text-xsmall: clamp(0.8125rem, 0.7232rem + 0.2381vw, 0.9375rem);
  --nb-text-small:  clamp(0.875rem, 0.7857rem + 0.2381vw, 1rem);
  --nb-text-medium: clamp(1rem,     0.9107rem + 0.2381vw, 1.125rem);
  --nb-text-large:  clamp(1.125rem, 1.0357rem + 0.2381vw, 1.25rem);

  --nb-heading-xsmall: clamp(1.25rem,  1.1607rem + 0.2381vw, 1.375rem);
  --nb-heading-small: clamp(1.625rem, 1.3571rem + 0.7143vw, 2rem);
  --nb-heading-medium: clamp(2rem,     1.2857rem + 1.9048vw, 3rem);
  --nb-heading-large: clamp(2.625rem, 1.6429rem + 2.619vw,  4rem);

  /* Header sizing: content row height is governed by the fixed-size
     dark-mode button (--nb-header-btn-size), padded top/bottom by
     --nb-header-v-pad. Kept as a variable so anything that needs to
     offset below the sticky header (e.g. aside.filters) tracks the
     actual rendered height. */
  --nb-header-btn-size: 32px;
  --nb-header-v-pad: clamp(1.875rem, 1.4286rem + 1.1905vw, 2.4375rem);
  --nb-header-height: calc(var(--nb-header-v-pad) * 2 + var(--nb-header-btn-size));
}

/* ---- Dark mode: system preference (unless user overrode to light) ---- */
@media (prefers-color-scheme: dark) {
  html:not(.light-mode) { color-scheme: dark; --dark: 1; }
  html:not(.light-mode) .skip-link { color: #17181b; }
}

/* ---- Dark mode: user explicitly chose dark ---- */
html.dark-mode { color-scheme: dark; --dark: 1; }
html.dark-mode .skip-link { color: #17181b; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scrollbar-gutter: stable; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--nb-text-medium);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

.type-pill {
  padding: 3px 8px;
  text-transform: uppercase; letter-spacing: .06em; border-radius: 4px;
  font-family: var(--sans); font-size: var(--nb-text-meta); font-weight: 600;
}
.type-pill.tale     { background: #e8d5d5; color: #6b1f1f; }
.type-pill.tekst    { background: #e0dccf; color: #4a4530; }
.type-pill.leksikon { background: #d6e0d4; color: #2f4530; }
.type-pill.verktoy  { background: #d4dde0; color: #2f4750; }
.type-pill.video    { background: #ddd4e0; color: #422f50; }
.type-pill.ngram    { background: #dde0d4; color: #354530; }

/* ---- Noise overlay (shared by header + hero) ---- */
.nb-header::before, .hero::before, footer::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--noise-url);
  background-repeat: repeat;
  opacity: var(--noise-opacity);
  pointer-events: none;
  z-index: 0;
}
.nb-header > *, .hero > *, footer > * { position: relative; z-index: 1; }

/* ---- Header ---- */
.nb-header {
  background: var(--paper-2);
  position: sticky; top: 0; z-index: 50;
  overflow: hidden;
}
.nb-header__inner {
  padding: var(--nb-header-v-pad) clamp(0.75rem, 0.5714rem + 0.4762vw, 1rem);
  display: flex; align-items: center; justify-content: space-between;
}
.nb-site-logo {
  display: flex; align-items: center;
  font-size: clamp(.9375rem, .7857rem + .4048vw, 1.15rem);
  font-weight: 400; line-height: 1; text-decoration: none;
  gap: 0 clamp(0.5rem, 0.3214rem + 0.4762vw, 0.75rem);
}
.nb-site-logo > a {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(0.5rem, 0.3214rem + 0.4762vw, 0.75rem);
  text-decoration: none; color: inherit;
}
.nb-site-logo > a:hover { text-decoration: underline; }
.nb-logo {
  height: clamp(1.3125rem, 1.0893rem + 0.5952vw, 1.625rem);
  width: auto; display: block; flex-shrink: 0;
  margin-top: 2px;
}
.nb-site-logo__sublabel {
  display: flex; align-items: center;
  gap: clamp(0.5rem, 0.3214rem + 0.4762vw, 0.75rem);
  font-weight: 400;
}
.nb-site-logo__sublabel .separator { opacity: .4; }
.nb-site-logo__sublabel a { text-decoration: none; color: inherit; }
.nb-site-logo__sublabel a:hover { color: var(--accent); }
.nb-header__controls { display: flex; align-items: center; gap: 12px; font-size: clamp(.9375rem, .7857rem + .4048vw, 1.15rem); }

/* Dark mode toggle button */
.nb-dark-mode-btn {
  background: transparent; border: none; padding: 4px;
  color: var(--ink); cursor: pointer;
  width: var(--nb-header-btn-size); height: var(--nb-header-btn-size); display: flex; align-items: center; justify-content: center;
  border-radius: 50%; position: relative;
  transition: background .2s;
}
/* Expand the tappable area to the 44x44 WCAG 2.5.8 minimum without
   growing the visible button (which drives --nb-header-height). */
.nb-dark-mode-btn::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.nb-dark-mode-btn:hover { background: var(--paper-2); }
.nb-dark-mode-btn svg { width: 20px; height: 20px; display: none; fill: currentColor; }
.nb-dark-mode-btn .icon-night { display: block; }
.nb-dark-mode-btn[aria-pressed="true"] .icon-night { display: none; }
.nb-dark-mode-btn[aria-pressed="true"] .icon-day   { display: block; }

/* Language switch */
.lang-switch { display: flex; gap: 2px; align-items: center; font-size: var(--nb-text-xsmall); }
.lang-btn {
  padding: 5px 9px; background: transparent; border: none; position: relative;
  color: var(--muted); border-radius: 50px; font-weight: 500; letter-spacing: .02em;
}
/* Expand tappable height to the 44px WCAG 2.5.8 minimum; width already
   exceeds it once text is rendered, so only height needs padding out. */
.lang-btn::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0;
  height: 44px; transform: translateY(-50%);
}
.lang-btn[aria-pressed="true"] { color: var(--ink); background: var(--nb-secondary-100); }
.lang-btn:hover { color: var(--ink); }
.lang-sep { color: var(--muted); }

/* ---- Hero ---- */
.hero {
  background: var(--paper-2);
  border-radius: 0 0 clamp(1.5rem, -0.2857rem + 4.7619vw, 4rem) clamp(1.5rem, -0.2857rem + 4.7619vw, 4rem);
  padding: clamp(1.25rem, 1rem + 0.75vw, 2rem) clamp(1.5rem, 1rem + 2vw, 3rem) clamp(2.5rem, 2rem + 1.5vw, 4rem);
  position: relative; overflow: hidden;
}
.hero-inner {
  max-width: 41.75rem; margin: 0 auto;
}

footer { background: var(--paper-2); margin-top: auto; position: relative; overflow: hidden; }
.footer-inner {
  padding: 28px clamp(0.75rem, 0.5714rem + 0.4762vw, 1rem);
  display: flex; align-items: center; justify-content: space-between; font-size: var(--nb-text-small);
}
.footer-inner img { height: 20px; width: auto; }
.footer-contact { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.footer-contact svg { flex-shrink: 0; }
.footer-inner a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-family: var(--sans); font-size: var(--nb-text-small); }
.footer-inner a:hover { color: var(--accent); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.skip-link {
  position: absolute; top: -100%; left: 16px;
  background: var(--accent); color: #fff;
  padding: 10px 18px; border-radius: 0 0 4px 4px;
  font-size: var(--nb-text-small); font-family: var(--sans); font-weight: 500;
  text-decoration: none; z-index: 200;
}
.skip-link:focus { top: 0; }

@media (max-width: 860px) {
  .footer-inner { padding: 28px 18px; }
}
@media (max-width: 640px) {
  .nb-header__inner { flex-wrap: wrap; align-items: center; padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .nb-header__controls { display: contents; }
  .nb-site-logo { flex: 1; }
  .lang-switch { flex-basis: 100%; justify-content: flex-start; margin-top: 10px; }
}
@media (max-width: 480px) {
  .footer-inner { padding: 24px 14px; }
  .nb-site-logo__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}