:root{
  --max: 800px;

  /* Theme */
  --color-bg:      #0F0A0C;   /* page background (very dark) */
  --color-surface: #2A0E15;   /* cards/panels */
  --color-primary: #7A0A1E;   /* burgundy */
  --color-accent:  #FFDA3C;   /* yellow */
  --color-text:    #FFF9F1;
  --color-text-2:  #E9E1D6;
  --color-border:  #362629;
  --color-focus:   #FFE47A;

  --radius: 16px;
  --gap: 1rem;
  --container: 720px;
}

*{ box-sizing: border-box; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  margin: 0;
  padding: 1rem;
  background: var(--color-bg);
  color: var(--color-text);
}

a{ text-decoration: none; }

/* ---------- Focus styles (one unified rule) ---------- */
a:focus, button:focus, input:focus, textarea:focus, select:focus{
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Extra pop for interactive elements only */
.nav a:focus, .btn:focus{
  background: var(--color-accent);
  color: var(--color-surface);
}

/* ---------- Profile Card ---------- */
article[data-testid="test-profile-card"]{
  max-width: var(--max);
  margin: 0 auto;
  background: var(--color-surface);
  border: 12px solid var(--color-accent);   /* fixed thickness */
  border-radius: var(--radius);            /* fixed invalid value */
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

/* ---------- Avatar (single, non-duplicated rule) ---------- */
figure img{
  width: 100%;
  height: 200px;         /* fixed display height */
  object-fit: cover;     /* crop to fill without distortion */
  border-radius: 12px;   /* choose rounded rectangle; change to 999px for circle */
}

/* ---------- Inputs for avatar URL/file ---------- */
input[type="url"], input[type="file"]{
  background: var(--color-primary);
  color: var(--color-text);
  border: 2px solid var(--color-accent);
  border-radius: 10px;
  padding: .5rem .6rem;
}

input[type="url"]:focus, input[type="file"]:focus{
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---------- Layout helpers ---------- */
.container{ max-width: var(--container); margin: 0 auto; }

.card{
  background: var(--color-surface);
  border: 12px solid var(--color-accent);  /* fixed + deduped */
  border-radius: var(--radius);           /* fixed invalid value */
  padding: 1rem;
}

/* ---------- Header / main nav ---------- */
.site-header{
  margin: 0 auto 1rem;
  max-width: var(--container);
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}

.nav a{
  display:inline-block; padding:.45rem .8rem; border-radius:999px;
  border:1px solid var(--color-border);
  background:#1B0B10;
  color:var(--color-text);
}

.nav a[aria-current="page"]{ background: var(--color-primary); }

.nav a:hover{
  background: var(--color-accent);
  color: var(--color-surface);
  transition: background .3s, color .3s;
}

/* ---------- Form ---------- */
.form-grid{ display:grid; gap:.9rem; }
label{ font-weight:600; color: var(--color-text-2); }

input, textarea, select{
  width:100%;
  color: var(--color-text);
  background:#17090E;
  border:1px solid var(--color-border);
  border-radius: 10px;
  padding:.7rem .8rem;
}

.btn{
  display:inline-block; padding:.6rem .9rem; border-radius:999px;
  background: var(--color-primary);
  border:1px solid var(--color-border);
  color: var(--color-text);
}

.btn:hover{
  background: var(--color-accent);    /* fixed invalid filter */
  color: var(--color-surface);
  transition: background .3s, color .3s;
}

.help-error{
  color:#FFC2C2; background:#3A1218; border:1px solid #74222F;
  padding:.4rem .6rem; border-radius:8px;
}

.success{
  color:#1E2E12; background:#EAFCC7; border:1px solid #9FD968;
  padding:.6rem .8rem; border-radius:10px;
}

/* ---------- Content layout ---------- */
.card-grid{ display: grid; gap: 1rem; }

@media (min-width: 700px){
  .card-grid{ grid-template-columns: 200px 1fr; align-items: start; }
}

figure{ margin: 0; }
img{ width: 100%; height: auto; display: block; }

/* Headings pop in yellow */
h1, h2, h3{
  color: var(--color-accent);
  letter-spacing: .3px;
}

header h2{ margin: 0; font-size: 1.5rem; }
.meta{ font-size: .9rem; opacity: .85; }

/* ---------- Social links / lists ---------- */
nav ul, .list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

nav ul li a{
  padding: .5rem .75rem;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  display: inline-block;
  color: #e8eefc;
}

nav ul li a:hover{ background: var(--color-primary); }

section h3{ margin: .5rem 0; font-size: 1.1rem; }
.list li{
  background: var(--color-primary);
  border: 1px solid var(--color-accent);
  padding: .5rem .6rem;
  border-radius: 10px;
}

/* Message box size */
#contact-message{
  height: 200px;
  border-radius: 15px;
}

/* Prevent layout breaks for long words/handles */
.wrap{ word-break: break-word; overflow-wrap: anywhere; }