:root {
  --bg:    #0d0c0b;
  --bg2:   #131210;
  --red:   #cc3300;
  --red2:  #8b0000;
  --white: #ede9e3;
  --gray1: #c0b8b0;
  --gray2: #7a7268;
  --gray3: #3a3530;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Share Tech Mono', monospace;
  min-height: 100vh;
  overflow-x: hidden;
}

/* subtle paper grain, doesn't really show much but feels right */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.4;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade { opacity: 0; animation: fadeUp 0.5s ease forwards; }
.f1 { animation-delay: 0.05s; }
.f2 { animation-delay: 0.15s; }
.f3 { animation-delay: 0.25s; }
.f4 { animation-delay: 0.35s; }
.f5 { animation-delay: 0.45s; }

.wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 64px 24px 80px;
  position: relative;
  z-index: 2;
}

/* header */

header {
  margin-bottom: 52px;
}

.handle {
  font-family: 'Special Elite', serif;
  font-size: clamp(38px, 10vw, 62px);
  font-weight: normal;
  color: var(--white);
  letter-spacing: 0.03em;
  line-height: 1;
  margin-bottom: 10px;
}

.handle em {
  color: var(--red);
  font-style: normal;
}

.tagline {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: clamp(14px, 3.5vw, 17px);
  color: var(--gray1);
  line-height: 1.5;
}

/* sections */

section {
  margin-bottom: 44px;
}

.section-title {
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--gray2);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray3);
}

/* bio */

.bio {
  font-family: 'IM Fell English', serif;
  font-size: clamp(14px, 3.5vw, 16px);
  color: var(--gray1);
  line-height: 1.8;
}

.bio strong {
  color: var(--white);
  font-style: normal;
}

/* profiles grid */

.profiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
}

.profile-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--gray3);
  text-decoration: none;
  color: var(--gray1);
  font-size: 11px;
  letter-spacing: 0.08em;
  transition: border-color 0.15s, color 0.15s;
}

.profile-link:hover {
  border-color: var(--red);
  color: var(--white);
}

.p-dot {
  width: 5px;
  height: 5px;
  background: var(--gray3);
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: background 0.15s;
}

.profile-link:hover .p-dot {
  background: var(--red);
}

.p-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.p-name {
  font-family: 'Special Elite', serif;
  font-size: 12px;
}

.p-sub {
  font-size: 9px;
  color: var(--gray2);
  letter-spacing: 0.12em;
}

.profile-link:hover .p-sub {
  color: var(--gray1);
}

/* pgp */

.pgp-wrap {
  background: var(--bg2);
  border: 1px solid var(--gray3);
  border-left: 2px solid var(--red2);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.pgp-label {
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--gray2);
  margin-bottom: 7px;
}

.pgp-fp {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gray1);
  line-height: 1.9;
  word-break: break-all;
}

.pgp-fp span {
  margin-right: 4px;
}

.pgp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--gray3);
  color: var(--gray1);
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.pgp-btn::before {
  content: '↓ ';
  color: var(--red);
}

.pgp-btn:hover {
  border-color: var(--red);
  color: var(--white);
}

/* contact */

.contact-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gray3);
  font-size: 12px;
}

.contact-row:last-child {
  border-bottom: none;
}

.contact-key {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--gray2);
  min-width: 80px;
  flex-shrink: 0;
}

.contact-val {
  color: var(--gray1);
  text-decoration: none;
  transition: color 0.12s;
}

.contact-val:hover {
  color: var(--red);
}

.contact-val.muted {
  color: var(--gray2);
}

/* footer */

footer {
  margin-top: 52px;
  padding-top: 20px;
  border-top: 1px solid var(--gray3);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--gray2);
}

@media (max-width: 480px) {
  .profiles {
    grid-template-columns: 1fr;
  }
}