/* ========================
   Vera — Modern Editorial CSS (HTML unchanged)
   - Left-aligned, editorial hero
   - Clean grid on desktop, stacked on mobile
   - Accessible contrast, reduced motion safe
   - CSP-friendly (no external fonts/scripts)
========================= */

/* === Theme tokens === */
:root {
  --bg: #64c5b1;
  --bg-2: #58b3a1;
  --fg: #ffffff;
  --fg-muted: rgba(255, 255, 255, 0.92);
  --ink-strong: rgba(0, 0, 0, 0.85);
  --ink: rgba(0, 0, 0, 0.75);
  --ring: rgba(255, 255, 255, 0.55);
  --ring-strong: rgba(255, 255, 255, 0.85);
  --btn-border: rgba(255, 255, 255, 0.35);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  --card: rgba(255, 255, 255, 0.08);
  --card-blur: rgba(255, 255, 255, 0.05);
}

/* === Reset & base === */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--fg);
  background: linear-gradient(155deg, var(--bg) 0%, var(--bg-2) 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  text-align: left;
}

/* Layout shell */
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh; /* better mobile viewport units */
  width: 100%;
  padding-block: 32px;
  padding-inline: clamp(24px, 6vw, 64px);
}

.container {
  max-width: 920px;
  margin-inline: auto;
  width: 100%;
  display: grid;
  /* Mobile-first: stack */
  grid-template-columns: 1fr;
  grid-template-areas:
    "avatar"
    "title"
    "copy"
    "social";
  align-items: start;
  row-gap: 18px;
  container-type: inline-size;
  container-name: main;
}

/* Desktop editorial split */
@media (min-width: 900px) {
  .container {
    grid-template-columns: 240px minmax(540px, 1fr);
    grid-template-areas:
      "avatar title"
      "avatar copy"
      "avatar social";
    column-gap: 32px;
    row-gap: 18px;
  }
  .container > picture { justify-self: end; }
}

/* Map existing elements to areas (HTML unchanged) */
.container > picture { grid-area: avatar; justify-self: center; }
.container > h1 { grid-area: title; }
.container > p  { grid-area: copy; }
.container > .social-icons { grid-area: social; justify-content: flex-start; }

/* Media element */
.centered-picture { display: block; position: relative; }

.profile-pic {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 10px solid var(--fg);
  object-fit: cover;
  box-shadow: var(--shadow);
  transition: transform 220ms ease, box-shadow 220ms ease;
  will-change: transform;
}

.profile-pic:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .profile-pic:hover { transform: none; }
}

@container main (max-width: 560px) {
  .profile-pic { width: 160px; height: 160px; border-width: 8px; }
}

/* Typography — editorial tone */
h1 {
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
  line-height: 1.05;
  margin: 0; /* tight hero */
  letter-spacing: 0.2px;
  text-align: left;
}

/* Elegant accent underline for the hero name */
h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.4));
}

@media (max-width: 600px) {
  h1::after { margin-left: auto; margin-right: auto; }
}

/* Paragraph as refined card (lighter glass) */
p {
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.75;
  margin: 0; /* handled by grid gaps */
  max-width: 62ch;
  color: var(--fg-muted);
  background: var(--card);
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

@supports (backdrop-filter: blur(10px)) {
  p { background: var(--card-blur); backdrop-filter: blur(10px); }
}

p::selection { background-color: rgba(255, 255, 255, 0.22); }

/* Social row */
.social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0; /* grid controls spacing */
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--btn-border);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.social-icons a:hover {
  transform: translateY(-1px) scale(1.06);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  border-color: var(--ring);
}

.social-icons a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring-strong);
  border-color: transparent;
}

.social-icons svg { width: 24px; height: 24px; fill: var(--fg); opacity: 0.92; transition: opacity 180ms ease; }
.social-icons a:hover svg { opacity: 1; }

/* Mobile polish */
@media (max-width: 600px) {
  .wrapper { padding: 24px 14px; }
  h1 {
    text-align: center;
    font-size: clamp(2.6rem, 9vw, 3rem);
  }
  p  { padding: 16px 16px; }
  .social-icons {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  .social-icons a {
    width: 50px;
    height: 50px;
  }
  .social-icons a svg {
    width: 24px;
    height: 24px;
  }
}

/* Container-based refinements (scales with column width) */
@container main (min-width: 520px) {
  p  { font-size: 1.06rem; }
  .social-icons a { width: 48px; height: 48px; }
}

@container main (min-width: 720px) {
  p { font-size: 1.1rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .social-icons a { transition: none; }
}

/* Dark mode tone */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #4aa896;
    --bg-2: #3f9686;
    --fg: #ffffff;
    --fg-muted: rgba(255, 255, 255, 0.92);
    --btn-border: rgba(255, 255, 255, 0.28);
    --ring: rgba(255, 255, 255, 0.45);
    --ring-strong: rgba(255, 255, 255, 0.8);
    --card: rgba(255,255,255,0.07);
    --card-blur: rgba(255,255,255,0.045);
  }
}

/* Print */
@media print {
  * { box-shadow: none !important; text-shadow: none !important; }
  body { background: #ffffff !important; color: #000 !important; }
  .wrapper { min-height: auto; padding: 0; }
  .container { max-width: 760px; }
  .profile-pic { border-color: #000 !important; }
  p { background: transparent !important; color: #000 !important; padding: 0; }
  .social-icons a { border-color: #000 !important; background: transparent !important; }
  .social-icons svg { fill: #000 !important; opacity: 1 !important; }
}