:root {
  --bg: #0b0f14;
  --panel: #121821;
  --text: #e6edf3;
  --muted: #a8b3bd;
  --accent: #6ea8fe;
  --danger: #ff6b6b;
  --ring: #93c5fd;
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 10% -10%, #192231 0%, #0b0f14 60%);
  color: var(--text);
  line-height: 1.5;
}

/* Page frame */
.wrap {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

/* Card */
article.profile-card {
  --radius: 16px;
  width: min(960px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: 0 10px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  overflow: clip;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .grid { grid-template-columns: 280px 1fr; }
}

/* Left rail */
.rail {
  background: linear-gradient(180deg, #0f1520, #0b0f14);
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
  align-content: start;
  border-right: 1px solid rgba(255,255,255,0.06);
}

figure.avatar {
  margin: 0;
  display: grid;
  gap: .5rem;
  justify-items: center;
}

.avatar-img {
  inline-size: clamp(120px, 26vw, 220px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  background: #0b0f14;
}

.controls {
  display: grid;
  gap: .5rem;
}
.controls label { font-size: .9rem; color: var(--muted); }
.controls input[type="url"],
.controls input[type="file"] {
  width: 100%;
  padding: .625rem .75rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #0f1520;
  color: var(--text);
}

/* Main */
.main {
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
}

header.card-head { display: grid; gap: .25rem; }
h2.name { margin: 0; font-size: clamp(1.25rem, 3.5vw, 1.75rem); }
p.bio { margin: 0; color: var(--muted); }

.meta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.time {
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(110,168,254,0.12);
  border: 1px solid rgba(110,168,254,0.35);
  font-variant-numeric: tabular-nums;
}

nav.social { margin-top: .25rem; }
.social ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.social a {
  display: inline-block;
  padding: .45rem .7rem;
  border-radius: 999px;
  background: #0f1520;
  border: 1px solid rgba(255,255,255,0.1);
  text-decoration: none;
  color: var(--text);
}
.social a:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }

.lists {
  display: grid;
  gap: 1rem;
}

@media (min-width: 960px) {
  .lists { grid-template-columns: 1fr 1fr; }
}

section.list-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: .75rem;
}
section.list-block h3 { margin: 0 0 .5rem 0; font-size: 1rem; }
ul.items { margin: 0; padding: 0 0 0 1rem; }
ul.items li { margin: .25rem 0; word-break: break-word; }

/* Focus and reduced motion */
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .social a { transition: transform .12s ease, border-color .12s ease; }
  .social a:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.25); }
}

/* Utility (visually hidden for labels) */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}


/* ===== Stage 1 (About + Contact) — clean, award-style, no cards ===== */
:root{ --muted: var(--muted, #9aa3ac); --danger: var(--danger, #ff5a5f); --ring: var(--ring, #7aa2ff); --accent: var(--accent, #4f9cf9); }
html,body{min-height:100svh}
body{ position:relative; }
body::before{ content:""; position:fixed; inset:0; z-index:-1; background:
  radial-gradient(1200px 800px at 15% -10%, #12263a 0%, transparent 60%),
  radial-gradient(1000px 700px at 110% -10%, #1a1627 0%, transparent 60%),
  linear-gradient(180deg, #0b0c10 0%, #0b0c10 100%);
}

.container{ width:min(1000px,92%); margin-inline:auto; }
.site-header{ position:sticky; top:0; z-index:50; background:rgba(11,12,16,.7); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.06); }
.site-header nav{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; }
.brand{ font-weight:700; text-decoration:none; color:var(--text); }
.nav-links{ list-style:none; display:flex; gap:.6rem; margin:0; padding:0; }
.nav-links a{ color:var(--text); text-decoration:none; padding:.4rem .6rem; border-radius:10px; }
.nav-links a[aria-current="page"], .nav-links a:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }

.page{ padding-block:1.5rem 2.5rem; }
@media (max-width:720px){ .page{ padding-inline:4vw; } }

/* Type */
h1{ font-size:clamp(1.35rem,3.6vw,2rem); line-height:1.2; margin:.25rem 0 1rem; }
h2{ font-size:clamp(1.1rem,3vw,1.3rem); line-height:1.25; margin:1.35rem 0 .6rem; }
.muted{ color:var(--muted); }

/* About layout */
[data-testid="test-about-page"]{ max-width:800px; }
[data-testid="test-about-page"] > section{ padding-block:1rem; border-bottom:1px solid rgba(255,255,255,.08); }
[data-testid="test-about-page"] > section:first-of-type{ padding-top:0; }
[data-testid="test-about-page"] > section:last-of-type{ border-bottom:0; }
[data-testid="test-about-page"] ul{ margin:.25rem 0 0; padding-left:1.1rem; display:grid; gap:.4rem; list-style:disc outside; }
[data-testid="test-about-page"] li::marker{ color:var(--accent); }

/* Avatar */
:root{ --avatar-size: clamp(160px, 22vw, 220px); }
.about-hero{ display:grid; grid-template-columns: var(--avatar-size) 1fr; gap:24px; align-items:center; margin:1.2rem 0 1.6rem; }
@media (max-width:720px){ .about-hero{ grid-template-columns:1fr; } }
.about-avatar{ position:relative; width:var(--avatar-size); height:var(--avatar-size); border-radius:50%; overflow:hidden;
  border:2px solid rgba(255,255,255,.12); box-shadow:0 12px 40px rgba(0,0,0,.45); background:#0f1520; }
.about-avatar img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.avatar-fallback{ position:absolute; inset:0; display:grid; place-items:center; font-weight:700; letter-spacing:.5px; color:var(--text);
  background:linear-gradient(135deg,#1b2a44,#1a1627); }
.about-avatar.is-loaded .avatar-fallback{ display:none; }

/* Contact form */
.contact-wrap{ max-width:720px; }
#contact-form{ display:grid; gap:1rem; margin-top:.5rem; }
.field{ display:grid; gap:.35rem; }
label{ font-weight:600; }
input, textarea{ background:#0f1520; color:var(--text); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.75rem .95rem; }
textarea{ resize:vertical; min-height:9rem; }
input::placeholder, textarea::placeholder{ color:rgba(168,179,189,.75); }
input:focus-visible, textarea:focus-visible{ outline:3px solid var(--ring); outline-offset:3px; border-color:transparent; }
.error{ color:var(--danger); font-size:.92rem; min-height:1.2em; }
input[aria-invalid="true"], textarea[aria-invalid="true"]{ border-color:var(--danger); box-shadow:0 0 0 3px color-mix(in oklab, var(--danger) 24%, transparent); }
.success{ color:#2ecc71; font-weight:600; margin-top:.3rem; }
.hidden{ display:none; }

/* Helpers */
.vh,.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* === Contact form button fix (drop-in override) === */

/* Base button */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0.9rem 1.25rem; min-height:44px; font-weight:700; border-radius:14px;
}
@media (max-width:720px){ #contact-form .btn{width:100%} }

.btn {
  /* size */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: 0.9rem 1.25rem;        /* bigger click target */
  min-height: 44px;               /* a11y: recommended touch target */
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;

  /* visuals */
  background: var(--accent);
  color: #dfe9e6;
  border: 0;
  border-radius: 14px;

  /* polish */
  box-shadow: 0 6px 20px rgba(79,156,249,.25);
  cursor: pointer;
  transition: transform .12s ease, filter .15s ease, box-shadow .2s ease;
}


/* Hover / active */
.btn:hover { 
  filter: brightness(1.06);
  box-shadow: 0 10px 28px rgba(79,156,249,.32);
  transform: translateY(-1px);
}
.btn:active { 
  transform: translateY(0);
  filter: brightness(1.0);
}


/* Mobile: make it full-width for easier tapping */
@media (max-width: 720px) {
  #contact-form .btn {
    width: 100%;
    justify-self: stretch;
  }
}