/* Shared Outline geometry and color references. Page styles own their application. */
:root {
  --outline-ink: #08090a;
  --outline-paper: #f4f1eb;
  --outline-red: #c9434d;
  --outline-warm: #e2535d;
  --outline-pine: #101a14;
  --outline-glow: #e6c77a;
  --outline-muted-on-dark: #c4c1bd;
  --outline-border-on-dark: #ffffff29;
  --outline-radius-control: 16px;
  --outline-radius-card: 24px;
  --outline-radius-media: 32px;
  --outline-radius-pill: 999px;
  --outline-ease: cubic-bezier(.16, 1, .3, 1);
  --outline-shadow: 0 16px 48px #00000024;
  --outline-gutter: 64px;
  --outline-frame-max: 1280px;
  --outline-section-pad: 112px;
  --outline-column-gap: 64px;
}

@media (max-width: 1199px) {
  :root {
    --outline-gutter: 40px;
    --outline-section-pad: 80px;
    --outline-column-gap: 40px;
  }
}

@media (max-width: 800px) {
  :root {
    --outline-gutter: 24px;
    --outline-frame-max: 680px;
    --outline-section-pad: 72px;
    --outline-column-gap: 32px;
    --outline-radius-card: 20px;
    --outline-radius-media: 24px;
  }
}

@media (max-width: 480px) {
  :root {
    --outline-gutter: 16px;
    --outline-frame-max: 448px;
    --outline-section-pad: 64px;
    --outline-column-gap: 28px;
  }
}