*{box-sizing:border-box}
body{margin:0}
@font-face{
  font-family: 'Schibsted Grotesk';
  src: url('./assets/fonts/schibsted-grotesk-latin-variable.woff2') format('woff2-variations'), url('./assets/fonts/schibsted-grotesk-latin-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Newsreader';
  src: url('./assets/fonts/newsreader-latin-normal.woff2') format('woff2-variations'), url('./assets/fonts/newsreader-latin-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Newsreader';
  src: url('./assets/fonts/newsreader-latin-italic.woff2') format('woff2-variations'), url('./assets/fonts/newsreader-latin-italic.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
[data-app]{
  --bg: #fcfcfa;
  --ink: #1d2330;
  --text-muted: #576072;
  --accent: #2b45c9;
  --border: #e5e7eb;
}
::selection{ background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--ink) }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px }
a{ color: var(--accent) }
::-webkit-scrollbar{ width: 12px; height: 12px }
::-webkit-scrollbar-track{ background: var(--bg) }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 999px; border: 3px solid var(--bg) }
* { scrollbar-color: var(--border) var(--bg) }

[data-topbar]{ padding: 18px clamp(20px,6vw,80px) 16px; border-bottom: 1px solid var(--border); }
[data-topbar-link]{ font-weight: 760; font-size: 20px; color: var(--ink); text-decoration: none; }
[data-topbar-tagline]{ font-family: 'Schibsted Grotesk', sans-serif; font-weight: 400; font-size: 15px; color: var(--text-muted); margin: 2px 0 0; }

[data-hero-band]{
  --bg: #000;
  --ink: #fff;
  --text-muted: #b8bcc6;
  --accent: #a9b8ff;
  --border: #3a3d45;
  background: var(--bg);
}
[data-hero]{ max-width: 1080px; margin: 0 auto; padding: clamp(36px,5vw,64px) clamp(20px,6vw,32px) 48px; }
[data-hero-grid]{ display: grid; grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: clamp(32px,4vw,56px); align-items: center; }
[data-hero-cover]{ display: block; width: 100%; aspect-ratio: 3/4; object-fit: contain; border-radius: 6px; }
[data-meta-line]{ font-size: 13.5px; color: var(--text-muted); margin: 0 0 12px; }
[data-meta-line-sm]{ font-size: 12.5px; color: var(--text-muted); display: block; margin-bottom: 4px; }
[data-title]{ font-weight: 760; font-size: clamp(30px,4.4vw,46px); line-height: 1.08; color: var(--ink); margin: 0 0 12px; }
[data-subtitle]{ font-family: 'Newsreader', serif; font-style: italic; font-size: 17px; color: var(--text-muted); margin: 0 0 6px; }
[data-abstract]{ font-family: 'Newsreader', serif; font-size: 16px; line-height: 1.65; color: var(--ink); margin: 0 0 22px; max-width: 62ch; }
[data-action-row]{ display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

[data-catalog]{ max-width: 1080px; margin: 0 auto; padding: 32px clamp(20px,6vw,32px) 80px; border-top: 1px solid var(--border); }
[data-row]{
  width: 100%; display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center;
  padding: 32px 0; border-bottom: 1px solid var(--border);
}
[data-row]:first-of-type{ padding-top: 0; }
[data-row]:last-of-type{ border-bottom: none; }
[data-row-cover]{ display: block; width: 100%; aspect-ratio: 3/4; object-fit: contain; border-radius: 4px; }
[data-row-copy]{ display: flex; flex-direction: column; min-width: 0; }
[data-row-title]{ font-weight: 700; font-size: 19px; color: var(--ink); margin-bottom: 4px; }
[data-row-subtitle]{ font-family: 'Newsreader', serif; font-style: italic; font-size: 14.5px; color: var(--text-muted); margin-bottom: 6px; }
[data-meta-list]{ display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; color: var(--text-muted); margin: 0 0 16px; }
[data-meta-list] dd{ margin: 0; color: var(--ink); }
[data-tag-row]{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
[data-tag]{ font-size: 12px; color: var(--text-muted); border: 1px solid var(--border); padding: 3px 10px; border-radius: 999px; }
[data-download-count]{ font-size: 13px; color: var(--text-muted); }

[data-footer]{
  max-width: 1080px; margin: 0 auto; padding: 28px clamp(20px,6vw,32px) 60px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--text-muted); font-size: 13px; border-top: 1px solid var(--border);
}
[data-footer-link]{ color: var(--text-muted); text-decoration: none; border-bottom: 1px solid var(--border); }

[data-panel]{ max-width: 640px; margin: 40px auto; padding: 24px clamp(20px,6vw,32px); border: 1px solid var(--border); border-radius: 8px; }
[data-btn-primary]{ background: var(--ink); color: #fcfcfa; border: none; border-radius: 999px; padding: 10px 22px; font-weight: 700; font-size: 14px; cursor: pointer; }

[data-skeleton-wrap]{ max-width: 1080px; margin: 0 auto; padding: 48px clamp(20px,6vw,32px); }
@keyframes shimmer{ 0%{ background-position: -300% 0 } 100%{ background-position: 300% 0 } }
[data-skeleton]{
  background: linear-gradient(90deg, #f0f0ee 25%, #e5e5e2 37%, #f0f0ee 63%);
  background-size: 400% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce){
  [data-skeleton]{ animation: none }
}

@media (max-width: 640px){
  [data-hero-grid]{ grid-template-columns: 1fr; }
  [data-hero-cover]{ max-width: 220px; margin: 0 auto; }
  [data-row]{ grid-template-columns: 1fr; }
  [data-row-cover]{ max-width: 200px; margin: 0 auto 20px; }
}