@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ink: #EDE7D9;
  --bg: #0F1D17;
  --surface: #152720;
  --muted: #8CA095;
  --citrine: #D9A441;
  --line: #26382F;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
}

::selection { background: #D9A44144; }

a { color: inherit; }

/* Header */
.header {
  max-width: 860px;
  margin: 0 auto;
  padding: 36px 24px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.wordmark {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-decoration: none;
  color: var(--ink);
}

.wordmark .accent { color: var(--citrine); }

.nav {
  display: flex;
  gap: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.navlink {
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: var(--muted);
}

.navlink::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  height: 1px; width: 0%;
  background: var(--citrine);
  transition: width .25s ease;
}

.navlink.active,
.navlink:hover {
  color: var(--ink);
}

.navlink.active::after,
.navlink:hover::after {
  width: 100%;
}

/* Fill rule */
.fillrule {
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.fillrule::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--citrine);
  animation: fill 1.4s ease forwards .2s;
}

@keyframes fill { to { width: 38%; } }

.fadeup { animation: fadeup .5s ease both; }
@keyframes fadeup {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Main */
.main {
  max-width: 640px;
  margin: 0 auto;
  padding: 72px 24px 100px;
  min-height: 50vh;
}

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--citrine);
  margin-bottom: 18px;
}

.h1 {
  font-family: 'Fraunces', serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 22px;
  font-style: italic;
}

.lede {
  color: #B9C4BC;
  font-size: 16px;
  line-height: 1.75;
  max-width: 520px;
  margin: 0;
}

.meta-row {
  display: flex;
  gap: 40px;
  margin-top: 44px;
  flex-wrap: wrap;
}

.meta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 6px;
}

.meta-value {
  font-size: 14px;
  color: var(--ink);
}

.divider {
  height: 1px;
  background: var(--line);
  margin: 40px 0;
}

.block-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px;
}

.block-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--citrine);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.block-text {
  color: #B9C4BC;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.email-link {
  display: inline-block;
  margin-top: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: var(--citrine);
  text-decoration: none;
  border-bottom: 1px solid #D9A44166;
  padding-bottom: 3px;
}

.small-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  max-width: 460px;
}

.footer {
  border-top: 1px solid var(--line);
  padding: 20px 24px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

.footer span { color: #516058; }

@media (max-width: 600px) {
  .block-grid { grid-template-columns: 1fr !important; }
  .h1 { font-size: 30px !important; }
  .header { padding-top: 28px !important; }
  .main { padding-top: 48px !important; padding-bottom: 64px !important; }
  .meta-row { gap: 24px !important; }
  .nav { gap: 18px !important; }
}

@media (max-width: 380px) {
  .nav { width: 100%; justify-content: space-between; gap: 0 !important; }
  .h1 { font-size: 26px !important; }
}