*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: #e8e4d8;
  font-family: 'Archivo', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #1a1714;
}

.page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px 36px;
  gap: 0;
}

/* ── Top bar ── */
.meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 48px;
}
.meta a {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: #c01e0e;
  text-decoration: none;
}
.meta span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: #c01e0e;
}
.meta-left {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.meta-left .meta-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: rgba(26,23,20,0.4);
}
.meta-nav {
  display: flex;
  gap: 22px;
}
.meta-nav a {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: rgba(26,23,20,0.4);
  text-decoration: none;
}
.meta-nav a:hover,
.meta-nav a.active { color: #1a1714; }

/* ── Content area ── */
.content {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 40px;
  align-content: start;
}

.page-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(48px, 8vw, 96px);
  letter-spacing: -0.03em;
  text-transform: lowercase;
  line-height: 1;
  color: #1a1714;
  padding-top: 4px;
}

.content-body {
  padding-top: 8px;
}

/* ── Bottom nav ── */
nav:not(.meta-nav) {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 48px;
}
.nav-name {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: #c01e0e;
  text-decoration: none;
}
.nav-links { display: flex; gap: 22px; }
nav a {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: rgba(26,23,20,0.4);
  text-decoration: none;
}
nav a:hover, nav a.active { color: #1a1714; }

/* ── Typography ── */
.label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: #c01e0e;
  margin-bottom: 20px;
}

p {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(26,23,20,0.75);
  max-width: 540px;
}

p + p { margin-top: 16px; }

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.meta    { animation: fadeUp 0.4s ease both 0.05s; }
.content { animation: fadeUp 0.5s ease both 0.12s; }
nav      { animation: fadeUp 0.4s ease both 0.22s; }