@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --bg: #191619;
  --bg-soft: #211b20;
  --panel: #241f23;
  --panel-strong: #2b242b;
  --ink: #f0eae9;
  --ink-soft: #c7bcc0;
  --ink-faint: #aa9da4;
  --line: #f0eae92b;
  --line-strong: #f0eae952;
  --cyan: #e3a27c;
  --lime: #91b6a7;
  --violet: #c5a5b8;
  --coral: #d7957a;
  --surface-sheen: linear-gradient(145deg, #f0eae90b, #f0eae903 38%, #e3a27c09 100%);
  --shadow-card: 0 1px 0 #f0eae909, 0 24px 70px #00000052;
  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html {
  background: var(--bg);
}

body {
  font-synthesis: none;
}

::selection {
  background: var(--cyan);
  color: #191619;
}

.site-shell {
  background:
    radial-gradient(70rem 42rem at 90% -10%, #e3a27c24, transparent 70%),
    radial-gradient(52rem 46rem at -16% 32%, #91b6a71c, transparent 72%),
    linear-gradient(#191619 0%, #211b20 42%, #191619 100%);
}

.site-header {
  background: linear-gradient(#211b20eb, #191619c9);
}

.brand-mark {
  background: linear-gradient(145deg, #e3a27c2b, #91b6a71c 58%, #f0eae906);
}

.links-menu-panel {
  background: #2b242bfa;
}

.lightbox-frame {
  background: #211b20;
}

.lightbox-close {
  background: #2b242beb;
}

.hero-copy h1,
.inner-hero h1 {
  background: linear-gradient(112deg, #f7f1f0 8%, #d9cdd2 50%, #f0eae9 82%);
  -webkit-background-clip: text;
  background-clip: text;
}

.home-hero::before {
  background:
    radial-gradient(at 25% 18%, #e3a27c1c, transparent 43%),
    radial-gradient(at 79% 60%, #91b6a71c, transparent 42%);
}

.home-portrait {
  background: linear-gradient(145deg, #e3a27c5c, #91b6a738);
}

.hero-project-gallery::before {
  background:
    radial-gradient(at 58% 40%, #e3a27c33, transparent 57%),
    radial-gradient(at 38% 72%, #91b6a72b, transparent 54%);
}

.hero-project-links > a {
  background: radial-gradient(18rem 12rem at 0 0, #e3a27c17, transparent 70%), var(--surface-sheen), #f0eae905;
}

.hero-project-links > a:hover {
  background: radial-gradient(18rem 12rem at 0 0, #e3a27c2e, transparent 70%), var(--surface-sheen), var(--panel);
  border-color: #e3a27c8c;
}

.projects-home {
  background:
    radial-gradient(56rem 34rem at 8% 18%, #e3a27c18, transparent 72%),
    radial-gradient(48rem 34rem at 92% 82%, #91b6a717, transparent 74%),
    linear-gradient(#211b20, #191619);
}

.feature-project-lime {
  background: radial-gradient(34rem 24rem at 0 0, #91b6a71c, transparent 72%), var(--surface-sheen), var(--panel);
}

.feature-project-violet {
  background: radial-gradient(34rem 24rem at 0 0, #c5a5b820, transparent 72%), var(--surface-sheen), var(--panel);
}

.project-media,
.screenshot-gallery figure {
  background: linear-gradient(145deg, #2b242b, #211b20);
}

.inner-hero {
  background:
    radial-gradient(40rem 25rem at 12% 0, #e3a27c17, transparent 72%),
    radial-gradient(34rem 24rem at 90% 100%, #91b6a717, transparent 74%);
}

.project-index {
  background: radial-gradient(42rem 28rem at 8% 20%, #e3a27c15, transparent 72%);
}

.case-lime {
  background:
    radial-gradient(48rem 34rem at 4% 5%, #91b6a726, transparent 70%),
    radial-gradient(42rem 30rem at 96% 72%, #e3a27c17, transparent 74%),
    var(--bg);
}

.case-violet {
  background:
    radial-gradient(50rem 36rem at 96% 5%, #c5a5b82b, transparent 70%),
    radial-gradient(40rem 30rem at 5% 80%, #e3a27c17, transparent 74%),
    var(--bg-soft);
}

.case-lime .analytics-panel {
  background: radial-gradient(34rem 20rem at 0 0, #91b6a71c, transparent 72%), var(--surface-sheen), #f0eae905;
}

.case-violet .analytics-panel {
  background: radial-gradient(34rem 20rem at 0 0, #c5a5b821, transparent 72%), var(--surface-sheen), #f0eae905;
}

.bench-card,
.stack-grid article {
  background: radial-gradient(24rem 18rem at 100% 0, #e3a27c17, transparent 72%), var(--surface-sheen), #f0eae905;
}

.scope-band {
  background:
    radial-gradient(48rem 32rem at 10% 8%, #e3a27c17, transparent 72%),
    radial-gradient(42rem 30rem at 92% 90%, #91b6a717, transparent 74%),
    linear-gradient(145deg, #2b242b, #211b20);
}

.work-example-grid article {
  background: radial-gradient(26rem 18rem at 100% 0, #c5a5b817, transparent 72%), var(--surface-sheen), #f0eae905;
}

.writing-main {
  background: radial-gradient(42rem 30rem at 92% 12%, #e3a27c15, transparent 74%);
}

.writing-feature {
  background: radial-gradient(38rem 26rem at 0 0, #e3a27c26, transparent 68%), var(--surface-sheen), var(--panel);
}

.writing-feature-book {
  background: radial-gradient(36rem 25rem at 0 0, #c5a5b82b, transparent 68%), var(--surface-sheen), var(--panel);
}

.writing-feature:hover {
  border-color: #e3a27c8c;
}

.writing-feature-book:hover {
  border-color: #c5a5b894;
}

.notes-section {
  background: radial-gradient(42rem 24rem at 8% 90%, #c5a5b817, transparent 74%);
}

.contact-main {
  background: radial-gradient(40rem 28rem at 94% 8%, #c5a5b817, transparent 74%);
}

.contact-options {
  background: radial-gradient(28rem 20rem at 100% 0, #e3a27c17, transparent 70%), var(--surface-sheen), var(--panel);
}

.site-footer {
  background: radial-gradient(42rem 24rem at 86% 0, #e3a27c17, transparent 72%), linear-gradient(#191619, #111014);
}