/* Deliberate Frames - dark theme with light accents.
   Committed dark: the gallery reads better against near-black, and a
   photograph should be the brightest thing on the page. */

:root {
  color-scheme: dark;

  /* Ground */
  --ink-900: #0b0b0d; /* page */
  --ink-800: #121215; /* raised surface */
  --ink-700: #1c1c21; /* borders, hairlines */

  /* Light accents */
  --paper: #f4efe7; /* primary text, warm off-white */
  --paper-dim: #a6a099; /* secondary text */
  --accent: #d8c9a8; /* champagne, for rules and emphasis */

  --measure: 34rem;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--paper);
  font: 400 16px/1.65 var(--serif);
  -webkit-font-smoothing: antialiased;
}

.page {
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2.5rem;
  padding: 2rem;
  text-align: center;
}

.masthead {
  max-width: var(--measure);
}

h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2rem, 7vw, 3.25rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rule {
  width: 4rem;
  height: 1px;
  margin: 0 auto 1.5rem;
  background: var(--accent);
}

.lede {
  margin: 0;
  color: var(--paper-dim);
  font-size: 1.05rem;
}

.note {
  margin: 0;
  max-width: var(--measure);
  color: var(--paper-dim);
  font: 400 0.85rem/1.6 var(--sans);
  letter-spacing: 0.04em;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

a:hover {
  color: var(--paper);
}

/* Respect users who ask for less motion or higher contrast. */
@media (prefers-contrast: more) {
  :root {
    --paper-dim: #cfc9c1;
    --accent: #f0e2c2;
  }
}