/* ============================================================
   index.html — page-specific styles. Loaded after css/base.css.
   ============================================================ */

.sheet{ max-width:460px; }

/* ---------- brand block ---------- */
.brand{ padding: 40px 28px 28px; text-align:center; }

.avatar-frame{
  width:96px; height:96px; margin:0 auto 20px;
  position:relative;
}
.avatar-dup{
  position:absolute; inset:0;
  background: var(--coral);
  border: var(--line) solid var(--ink);
  transform: translate(6px,6px);
}
.avatar{
  position:relative;
  width:100%; height:100%;
  background: var(--mint);
  border: var(--line) solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono', monospace;
  font-weight:700; font-size:22px; letter-spacing:.05em;
  /* Swap this block for <img src="your-photo.jpg" class="avatar"> to use a real photo */
}

.name{
  font-family:'Archivo Black', sans-serif;
  font-size: clamp(1.9rem, 8vw, 2.5rem);
  line-height:.95;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin: 0 0 10px;
}
.name .accent{ color: var(--cobalt); }

.tagline{
  font-family:'Space Mono', monospace;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  opacity:.7;
  margin:0;
}

/* ---------- link list ---------- */
.links{
  display:flex; flex-direction:column; gap:16px;
  padding: 8px 28px 32px;
}

.tag{
  flex:0 0 48px;
  display:flex; align-items:center; justify-content:center;
  background: var(--tag, var(--cobalt));
  border-right: var(--line) solid var(--ink);
  font-family:'Space Mono', monospace;
  font-weight:700; font-size:12px;
}
.label{
  flex:1;
  display:flex; align-items:center;
  padding: 14px 14px;
  font-weight:700;
  text-transform:uppercase;
  font-size:14px;
  letter-spacing:.02em;
}

/* ============================================================
   DESKTOP BREAKPOINTS — mobile styles above stay the default;
   these only widen and reflow things once there's room to spare.
   ============================================================ */
@media (min-width: 700px){
  body{ padding: 64px 24px; }
  .sheet{ max-width: 640px; }
  .brand{ padding: 44px 40px 28px; }
  .links{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; padding: 8px 40px 36px; }
}

@media (min-width: 1000px){
  body{ padding: 80px 32px; }
  .sheet{ max-width: 860px; box-shadow: 14px 14px 0 var(--cobalt); }
  .brand{
    display:flex; align-items:center; gap:28px; text-align:left;
    padding: 52px 48px 36px;
  }
  .avatar-frame{ margin:0; flex-shrink:0; }
  .name, .tagline{ text-align:left; }
  .links{ grid-template-columns: 1fr 1fr 1fr; padding: 8px 48px 44px; }
  footer{ padding: 20px 48px 28px; }
}