:root {
  --bg: #000;
  --ink: #fff;
  --dim: #8a8a8a;
  --line: #333;
  --faint: #2e2e2e;
  --pad: clamp(1.5rem, 4vw, 3.5rem);
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 300;
}

/* ---- layout: header at top, content centred, footer at bottom ---- */

main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--pad);
}

.center {
  margin: auto 0;
  text-align: center;
}

/* ---- header ---- */

header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Lockup: the mark sits on the wordmark's baseline and is sized in em, so it
   always scales with the type instead of drifting out of proportion. */
.name {
  display: flex;
  align-items: baseline;
  gap: .7em;
  font-size: 1.17em;
  color: var(--ink);
  text-decoration: none;
}
.name svg { height: 1em; width: auto; fill: var(--ink); }

/* the underline marks the page you are on; everything else is a plain link */
nav { display: flex; gap: 2rem; }
nav a {
  color: var(--dim);
  text-decoration: none;
  padding-bottom: .35rem;
  border-bottom: 1px solid transparent;
}
nav a:hover { color: var(--ink); }
nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* ---- text ---- */

h1 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.15;
}
h1 em { font-style: italic; color: var(--dim); }

.center p {
  margin: 2rem auto 0;
  max-width: 30rem;
  font-size: .78rem;
  line-height: 2;
  color: var(--dim);
}
.center p a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.center p a:hover { border-color: var(--ink); }

footer {
  text-align: right;
  font-size: .68rem;
  line-height: 1.9;
  letter-spacing: .12em;
  color: var(--dim);
}

/* ---- home only: text on the left, mark on the right ---- */

.mark {
  position: fixed;
  inset: 0 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mark svg { height: 58vh; }
.mark path { fill: none; stroke: var(--faint); stroke-width: 1.1; }

.home .center {
  width: 50%;
  padding-left: 4vw;
  text-align: left;
}
.home .center p { margin-left: 0; }

/* no room for two columns: drop the mark, centre the text like every other page */
@media (max-width: 900px) {
  .mark { display: none; }
  .home .center { width: 100%; padding-left: 0; text-align: center; }
  .home .center p { margin-left: auto; }
}

/* tighten tracking, never the type size — the lockup stays one size everywhere */
@media (max-width: 620px) {
  header { letter-spacing: .12em; }
  nav { gap: 1.25rem; }
}