/* ==========================================================================
   Shared foundation — tokens, reset, layout primitives
   Layout system: 12-column grid, 24px gutters, 8px baseline spacing scale.
   1712px reference frame; `cqw` units resolve against `.page`.
   ========================================================================== */

:root {
  /* Color */
  --color-bg: #171717;
  --color-ink: #171717;
  --color-fg: #ffffff;
  --color-paper: #f4f4f1;
  --color-band: #e5e5e0;
  --color-muted: #6f6f6a;

  /* Placeholder-image palette (muted, print-like) */
  --ph-tan: #b5a181;
  --ph-red: #c14f2e;
  --ph-blue: #84a6c1;
  --ph-mustard: #b7942e;
  --ph-crimson: #a12844;
  --ph-orange: #c67747;
  --ph-slate: #8d99a3;

  /* Type — Söhne / Arnhem with hosted fallbacks */
  --font-sans: "Söhne", "Sohne", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Arnhem Blond", "Arnhem", "Source Serif 4", Georgia, "Times New Roman", serif;

  /* 8px spacing scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-11: 88px;
  --space-12: 96px;
  --space-16: 128px;
  --space-20: 160px;

  /* Grid */
  --gutter: var(--space-3);

  /* Reference frame: design is 1712px wide, content well 1504px (104px margins) */
  --page-max: 1712px;
  --page-pad: clamp(var(--space-3), 6.075cqw, 104px);

  /* Artwork grows with its layout until it reaches this viewport ceiling. */
  --image-max-height: 80vh;

  --shadow-panel: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* Reset ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Layout primitives ------------------------------------------------------ */
.page {
  position: relative;
  max-width: var(--page-max);
  margin-inline: auto;
  container-type: inline-size;
  overflow: clip;
}

.container {
  padding-inline: var(--page-pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}

/* One mobile content edge, shared by the index, articles, and artwork. */
@media (max-width: 900px) {
  :root {
    --mobile-page-pad: 24px;
    --page-pad: var(--mobile-page-pad);
    --gutter: 16px;
  }
}

@media (max-width: 360px) {
  :root { --mobile-page-pad: 20px; }
}

@media (min-width: 701px) and (max-width: 900px) {
  :root {
    --mobile-page-pad: 40px;
    --gutter: 24px;
  }
}