:root{
  --bg: #ffffff;
  --surface: #fafafa;
  --card: #ffffff;
  --text: #0a0a0a;
  --muted: #6b7280;
  --border: #e5e7eb;

  /* Accent (Violet default) */
  --accent-from: #7c3aed;
  --accent-to: #db2777;

  --radius: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 24px rgba(0,0,0,.06);
}
:root.dark{
  --bg: #0b0b0d;
  --surface: #0a0a0c;
  --card: #111113;
  --text: #f3f4f6;
  --muted: #9ca3af;
  --border: #23242a;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 20px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 10% -10%, rgba(127,127,255,.08), transparent) ,
              linear-gradient(180deg, var(--surface), var(--bg));
  color: var(--text);
  line-height: 1.6;
}

/* Containers & layout */
.container{max-width: 1120px; margin-inline:auto; padding-inline: 16px}
.section-pad{padding-block: 64px}
body.compact .section-pad{padding-block: 32px}

/* Header */
.site-header{
  position: sticky; top:0; z-index: 100;
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; gap:12px; height:64px;
}
.brand{
  width:32px; height:32px; border-radius:12px;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  box-shadow: var(--shadow);
}
.brand-name{
  background:none; border:none; padding:0; color:var(--text);
  font-weight: 700; cursor: pointer;
}
.main-nav{ margin-left:auto; display:none; gap:12px; }
.main-nav a{
  padding:8px 12px; border-radius: 999px; text-decoration:none; color:var(--text);
  border: 1px solid transparent;
}
.main-nav a.active, .main-nav a:hover{
  border-color: var(--border);
  background: color-mix(in oklab, var(--card) 70%, transparent);
}
.header-actions{ display:flex; align-items:center; gap:8px; margin-left:12px }
.theme-controls{ display:flex; align-items:center; gap:8px }
#accent{
  appearance:none; border:1px solid var(--border); background:var(--card); color:var(--text);
  padding:8px 10px; border-radius: 999px;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius: 10px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; font-weight:600;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) }
.btn-pill{ border-radius: 999px }
.btn-primary{
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  color: #fff; box-shadow: var(--shadow);
}
.btn-outline{
  background: transparent; border-color: var(--border); color: var(--text);
}
.btn-secondary{
  background: color-mix(in oklab, var(--accent-from) 15%, var(--card));
  border-color: transparent;
}
.btn-ghost{
  background: transparent; color: var(--text); border-color: transparent;
}
.btn-icon{ width:40px; height:40px; padding:0 }

/* Cards */
.card{
  background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-plain{ background: transparent; border-color: transparent; box-shadow:none }
.card-media{ border-bottom: 1px solid var(--border) }
.card-body{ padding: 20px }
.card-footer{ margin-top: 8px }
.card-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px }
.btn-row{ display:flex; gap:8px }
.thumb{ aspect-ratio: 16/9; border-bottom:1px solid var(--border); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius) }

/* Hero */
.hero-grid{ display:grid; grid-template-columns: 1fr; gap:24px }
.kicker{
  text-transform: uppercase; letter-spacing:.2em; font-size:12px; font-weight:700; color: var(--muted);
}
.hero-title{ font-size: clamp(2rem, 5vw, 3.5rem); line-height:1.05; margin:6px 0 8px }
.lead{ font-size: clamp(1.05rem, 1.75vw, 1.25rem); color: var(--muted); margin: 8px 0 10px }
.muted{ color: var(--muted) }
.small{ font-size:.9rem }

/* Accent text */
.accent-text{
  background: linear-gradient(90deg, var(--accent-from), var(--accent-to));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Generic grid helpers */
.grid.two{ display:grid; grid-template-columns: 1fr; gap:24px }
.grid.three{ display:grid; grid-template-columns: 1fr; gap:16px }
.cards .card{ height:100%; display:flex; flex-direction:column }
.cards .card .card-body{ flex:1 }
.hoverable{ transition: box-shadow .2s ease, transform .08s ease }
.hoverable:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.1) }

/* Tags */
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.tags.big .tag{ padding:10px 14px }
.tag{
  display:inline-block; padding:6px 10px; border-radius: 999px;
  background: color-mix(in oklab, var(--card) 70%, var(--accent-from) 10%);
  border:1px solid var(--border); font-weight:600; font-size:.9rem;
}

/* Lists */
.list{ margin:0; padding-left: 16px }
.list li{ margin: 6px 0 }

/* Timeline */
.timeline{ display:grid; gap:16px }
.tl-item{ display:grid; grid-template-columns: 160px 1fr; gap:12px; align-items:flex-start }
.tl-time{ color: var(--muted); font-size:.95rem }
.tl-body .h5{ margin:0 0 6px }

/* Forms */
.form{ display:grid; gap:10px }
.form input,.form textarea{
  width:100%; padding:12px 14px; border-radius: 12px; border:1px solid var(--border);
  background: var(--card); color: var(--text);
}
.form input:focus,.form textarea:focus{ outline: 2px solid color-mix(in oklab, var(--accent-from) 50%, transparent) }

/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  padding-block: 28px;
  background: color-mix(in oklab, var(--surface) 85%, transparent);
}
.footer-inner{ display:flex; gap:12px; align-items:center; justify-content:space-between }

/* Links */
.link{ color: inherit; text-underline-offset: 3px }
.link:hover{ text-decoration: underline }

/* Decorative */
.gradient-block{
  width:100%; height: 180px; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
}

/* Responsive */
@media (min-width: 768px){
  .main-nav{ display:flex }
  .hero-grid{ grid-template-columns: 1.1fr .9fr }
  .grid.two{ grid-template-columns: 1.3fr .7fr }
  .grid.three{ grid-template-columns: repeat(3, 1fr) }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important }
}


.card-photo{
  display:block;
  width:100%;
  height:220px;                 /* tweak if you want taller/shorter */
  object-fit:cover;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-bottom:1px solid var(--border);
}
@media (min-width:768px){
  .card-photo{ height:260px; }
}

.avatar-round{
  width:160px;
  height:160px;
  border-radius:50%;
  object-fit:cover;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
@media (min-width:768px){
  .avatar-round{ width:180px; height:180px; }
}
/* Center anything inside the card media area */
.card-media{
  display: grid;
  place-items: center;   /* centers horizontally + vertically */
  padding: 20px;
  min-height: 220px;     /* ensures there's space to center in */
}
@media (min-width:768px){
  .card-media{ min-height: 260px; }
}

/* (Optional) also center the image if you aren’t using the grid approach */
.avatar-round{ display:block; margin-inline:auto; }