:root{
  --bg-0:#0e0f12; --bg-1:#121318; --bg-2:#171922;
  --ink-0:#f1f3f6; --ink-1:#c8cdd6; --accent:#ff3b2f; --line:#262933;
  --shadow:0 10px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--bg-0); color:var(--ink-0); font:16px/1.55 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent); text-decoration:none} a:hover{filter:brightness(1.08)}
.wrapper{width:min(1100px,92vw); margin:0 auto}
.full-bleed{margin:0 calc(50% - 50vw); width:100vw}
.section{padding:64px 0}
h1,h2,h3{font-weight:800; margin:0 0 12px}
.sub{color:var(--ink-1); max-width:70ch}

/* Cards */
.card{background:linear-gradient(180deg,var(--bg-1),var(--bg-2)); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); padding:18px 20px}

/* Sticky top banner */
.nav{position:sticky; top:0; z-index:1000; background:rgba(18,19,24,.80); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.nav__in{display:flex; align-items:center; gap:16px; padding:10px 0}
.badge{display:inline-block; background:var(--accent); color:#0b0f14; font-weight:900; letter-spacing:.18em;
  padding:.25rem .6rem; border-radius:6px}
.tabs{margin-left:12px; display:flex; gap:18px; padding:6px 10px; border:1px solid var(--line);
  border-radius:999px; background:rgba(0,0,0,.25)}
.tabs a{color:var(--ink-0); padding:6px 10px; border-radius:999px; font-weight:700}
.tabs a.is-active{background:var(--accent); color:#0b0f14}
.avatar{margin-left:auto; width:40px; height:40px; border-radius:50%; object-fit:cover;
  border:2px solid var(--accent); box-shadow:0 0 0 2px rgba(0,0,0,.3)}

/* Hero video */
.hero{position:relative; min-height:88vh}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.65)),
             linear-gradient(0deg,rgba(255,59,47,.20),rgba(255,59,47,.20))}
.hero__content{position:absolute; inset:0; z-index:2; display:grid; place-items:center; padding:6vw}
.headline{font-size:clamp(28px,6vw,64px); line-height:1.05; font-weight:900; color:var(--accent); margin:0 0 10px}
.btn{display:inline-block; background:var(--accent); color:#0b0f14; border-radius:12px; padding:.65rem 1rem; font-weight:800}

/* Anchors offset for sticky header */
.anchor{position:relative; top:-100px; visibility:hidden}

/* Project grid */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px}
.tile{overflow:hidden; border-radius:16px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2)); box-shadow:var(--shadow)}
.tile img,.tile video{width:100%; height:190px; object-fit:cover; display:block}
.tile__body{padding:14px}
.tile__title{font-weight:800}
.tile__meta{color:var(--ink-1); margin-top:4px}

/* Resume lists */
.resume-list{list-style:none; padding:0; margin:0; display:grid; gap:16px}
.resume-item__title{font-weight:800}
.resume-item__meta{color:var(--ink-1); font-size:.95rem}
.resume-item__bullets{margin:8px 0 0 18px}

/* Footer band */
.band{background:var(--accent); color:#0b0f14; padding:36px 0; margin-top:36px}
.band a{color:#0b0f14; text-decoration:underline; font-weight:700}

/* === ABOUT SECTION LAYOUT === */
.about-section {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 3rem;           /* pushes it down off the header bar */
}

.about-section img.profile-left {
  width: 350px;               /* slightly larger photo */
  height: 350px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  object-fit: cover;
  box-shadow: 0 0 18px rgba(0,0,0,0.45);
  flex-shrink: 0;             /* keeps size constant on smaller screens */
}

.about-text {
  flex: 1;
  min-width: 280px;
  max-width: 800px;
}

.hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures it fills without squashing */
  transform: translate(-50%, -50%);
  z-index: 0;
}


/* Markdown content area */
#education_md img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Helpers you can mix & match in Markdown (via inline HTML) */
.img-xxs   { width: 90px;}
.img-xs    { width: 120px; }
.img-sm    { width: 200px; }
.img-md    { width: 320px; }
.img-lg    { width: 480px; }
.img-xl    { width: 640px; }

.float-left  { float: left;  margin: 0 1rem 1rem 0; }
.float-right { float: right; margin: 0 0 1rem 1rem; }
.center      { margin: 1rem auto; text-align: center; }
.shadow      { box-shadow: 0 8px 20px rgba(0,0,0,.25); border-radius: 12px; }
.clearfix::after { content: ""; display: block; clear: both; }

.profile-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.badge-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.badge-img {
  width: 100px;
  height: 100px;
  border-radius: 0px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  background: #0e0f12;
  padding: 6px;
  border: 0px solid var(--line);
  transition: transform 0.2s ease;
}

.badge-img:hover {
  transform: scale(1.05);
}