:root {
  --cream:     #F2EBD9;
  --bone:      #E8DEC8;
  --ink:       #1A1208;
  --ink-warm:  #5C3D22;
  --ink-faded: #8A6E52;
  --ink-ghost: #B5A08A;
  --rust:      #B84C1A;
  --rust-warm: #D4622A;
  --rule:      rgba(58,40,20,0.16);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-stamp:   'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-type:    'Courier Prime', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

/* ── LAYOUT ───────────────────────────────── */
.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── HEADER ───────────────────────────────── */
header {
  padding: 5rem 2rem 4rem;
  max-width: 760px;
  margin: 0 auto;
  border-bottom: 1px solid var(--rule);
}

.name {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.name em {
  font-style: italic;
  color: var(--rust);
}

.tagline {
  font-family: var(--font-type);
  font-size: 0.9375rem;
  color: var(--ink-faded);
  font-style: italic;
  line-height: 1.5;
}

/* ── WORK LIST ────────────────────────────── */
main {
  padding: 0 2rem;
  max-width: 760px;
  margin: 0 auto;
}

.project-list {
  list-style: none;
}

.project {
  border-bottom: 1px solid var(--rule);
}

.project-link {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: 0 2rem;
  align-items: baseline;
  padding: 2.25rem 0;
  text-decoration: none;
  color: inherit;
  transition: background 120ms;
}
.project-link[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

/* Index number */
.p-num {
  font-family: var(--font-type);
  font-size: 0.75rem;
  color: var(--ink-ghost);
  letter-spacing: 0.06em;
  padding-top: 0.2em;
}

/* Center text block */
.p-body {}

.p-cat {
  font-family: var(--font-stamp);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 0.375rem;
}

.p-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0.5rem;
  transition: color 150ms;
}

.project-link:not([aria-disabled="true"]):hover .p-title {
  color: var(--rust);
}

.p-desc {
  font-family: var(--font-type);
  font-size: 0.875rem;
  color: var(--ink-faded);
  line-height: 1.55;
}

/* Arrow / status */
.p-action {
  font-family: var(--font-stamp);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: center;
}
.p-action.live  { color: var(--rust); }
.p-action.soon  { color: var(--ink-ghost); }

/* ── FOOTER ───────────────────────────────── */
footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.footer-name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-ghost);
  letter-spacing: -0.01em;
}
.footer-name em { color: var(--rust); font-style: italic; }

.footer-copy {
  font-family: var(--font-type);
  font-size: 0.75rem;
  color: var(--ink-ghost);
}

/* ── RESPONSIVE ───────────────────────────── */
@media (max-width: 540px) {
  header, main, footer { padding-left: 1.25rem; padding-right: 1.25rem; }
  header { padding-top: 3.5rem; padding-bottom: 3rem; }
  .project-link { grid-template-columns: 1.75rem 1fr; gap: 0 1.25rem; }
  .p-action { display: none; }
  .p-cat::after { content: ' 92'; color: var(--rust); }
  .project-link[aria-disabled="true"] .p-cat::after { content: ''; }
  footer { flex-direction: column; gap: 0.5rem; }
}