/* Primitives every fictional site leans on. A brand's own stylesheet sets the
   palette and the parts that make it look like itself; this holds the rest. */

:root {
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--sans); font-size: 15px; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: default; }

/* Stand-in imagery. Never a photograph of a real person or place. */
.art { background: linear-gradient(140deg, #cfd6e6, #aab6d0); }
.art-warm { background: linear-gradient(140deg, #f0d8c0, #d9b48c); }
.art-cool { background: linear-gradient(140deg, #bcd6e8, #8fa9c8); }
.art-dusk { background: linear-gradient(140deg, #6b5f8a, #33304f); }
.art-green { background: linear-gradient(140deg, #cfe0c4, #93ae8c); }
.art-night { background: linear-gradient(140deg, #2a2f45, #14161f); }

.initials { display: grid; place-items: center; color: #fff; font-weight: 700; }

/* The About page, identical everywhere ------------------------------------ */
.about-page { max-width: 640px; margin: 0 auto; padding: clamp(32px, 6vw, 64px) clamp(16px, 4vw, 24px) 60px; }
.about-page .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: .6; }
.about-page h1 { font-size: clamp(28px, 5vw, 40px); letter-spacing: -0.025em; line-height: 1.1; margin: 12px 0 22px; }
.about-page h2 { font-size: 17px; margin: 30px 0 8px; letter-spacing: -0.01em; }
.about-page p { font-size: 16px; line-height: 1.62; margin: 0 0 14px; opacity: .88; }
.about-page .back { display: inline-block; margin-top: 30px; font-size: 14px; }