@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/bitter-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibmplexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #050505;
  --ink: #e8e2d8;
  --dim: #7d7871;
  --rule: rgba(232, 226, 216, 0.13);
  --accent: rgba(196, 26, 26, 0.55);
  --gut: clamp(1.4rem, 5vw, 4.6rem);
  --serif: 'Bitter', 'Iowan Old Style', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(3rem, 9vh, 7rem);
  padding: var(--gut);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The mark. One block, all caps, no spaces, nothing else attached to it. */
.mark {
  font-size: clamp(0.66rem, 1.05vw, 0.8rem);
  font-weight: 300;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink);
  /* the tracking adds a trailing space; pull it back so the mark sits flush left */
  margin-right: -0.42em;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2.6rem, 7vh, 5rem);
  max-width: 60rem;
  animation: arrive 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.statement {
  font-size: clamp(1.9rem, 6.3vw, 5.4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.statement span { display: block; }

/* The one red in the whole page. Structural, not decorative. */
.rule {
  width: 100%;
  max-width: 34rem;
  height: 1px;
  background: var(--accent);
}

.holdings {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.62rem clamp(1.6rem, 4vw, 3.2rem);
  font-family: var(--mono);
  font-size: clamp(0.63rem, 0.92vw, 0.74rem);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  width: fit-content;
}

.holdings dt { color: var(--dim); }
.holdings dd { color: var(--ink); }

footer {
  font-family: var(--mono);
  font-size: clamp(0.6rem, 0.85vw, 0.7rem);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--dim);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(0.7rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
}

/* The 404 shares the surface. Nothing about it explains itself. */
body.absent { grid-template-rows: auto 1fr; }
.absent .holdings { display: none; }