/* Minimal light theme, responsive, accessible */
:root{
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --accent: #2563eb;
  --card: #ffffff;
  --border: #e2e8f0;
  --shadow: 0 8px 24px rgba(2,6,23,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.65;
}
.container{max-width:960px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:static;width:auto;height:auto;background:#fff;color:#000;padding:.5rem}
.site-header{
  position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.logo{font-weight:800;letter-spacing:.3px;text-decoration:none;color:var(--text)}
.nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.nav a{color:var(--text);text-decoration:none;padding:.3rem .5rem;border-radius:.5rem}
.nav a:hover{background:#f8fafc}
.btn{background:var(--accent);color:#fff;text-decoration:none;padding:.45rem .75rem;border-radius:.6rem;font-weight:600;box-shadow:var(--shadow)}
.hero{padding:56px 0 16px}
.hero h1{font-size:clamp(28px, 5vw, 44px);line-height:1.1;margin:0 0 8px}
.accent{color:var(--accent)}
.tagline{color:var(--muted);font-weight:600;margin:0 0 10px}
.intro{font-size:1.05rem;max-width:72ch}

.section{padding:30px 0;border-top:1px solid var(--border)}
.section h2{margin:0 0 14px;font-size:1.5rem}

.cards{
  display:grid;gap:16px;
  grid-template-columns:1fr;
}
@media (min-width: 780px){
  .cards{grid-template-columns:1fr 1fr}
}

/* ---------- Card + Media (full-bleed image/video) ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;           /* clip media to rounded corners */
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  padding:0;                 /* ensure no inner gap around media */
}

/* Remove default figure margins; make it a clean box */
.media{
  margin:0;                  /* key change: remove default <figure> margin */
  background:#f1f5f9;
}

/* Keep a responsive box and make media cover it */
.ratio-16x9{aspect-ratio:16/9;width:100%}
.media>img,
.media>iframe,
.media>video{
  width:100%;
  height:100%;
  object-fit:cover;          /* fill the box, crop if needed */
  border:0;
  display:block;
}

/* Put spacing only on the text portion */
.content{padding:14px}
.card h3{margin:.2rem 0 .4rem 0;font-size:1.15rem}
.meta{color:var(--muted);font-size:.92rem;margin:.3rem 0}
.badge{font-size:.78rem;background:#e0e7ff;color:#3730a3;padding:.15rem .45rem;border-radius:.4rem;margin-left:.35rem}
.links .text-link, .text-link{color:var(--accent);text-decoration:none}
.links .text-link:hover, .text-link:hover{text-decoration:underline}
.site-footer{border-top:1px solid var(--border);margin-top:30px}
.site-footer p{text-align:center;color:var(--muted)}

/* ---------- Quick links row in the hero ---------- */
.connect{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:14px;
}
.connect a{ text-decoration:none; }

/* Pill-style links (GitHub/LinkedIn/Twitter) */
.pill{
  border:1px solid var(--border, #e2e8f0);
  background:#fff;
  color:var(--text, #0f172a);
  padding:.45rem .75rem;
  border-radius:.6rem;
  font-weight:600;
}
.pill:hover{ background:#f8fafc; }

/* Emphasized button (Resume) */
.btn{
  background:var(--accent, #2563eb);
  color:#fff;
  padding:.5rem .9rem;
  border-radius:.6rem;
  font-weight:700;
  border:0;
}
.btn:hover{ filter:brightness(0.95); }

.award{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.28rem .6rem;
  border:1px solid #f59e0b33;
  background:#fef9c3;      /* light gold */
  color:#854d0e;            /* dark gold/brown text */
  border-radius:.6rem;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.2px;
}
.award::before{
  content:"";
  width:.55rem; height:.55rem;
  border-radius:50%;
  background:#f59e0b;      /* gold dot */
}

.looking.left-accent{
  margin: .75rem 0 1rem;
  padding: .5rem .9rem;
  border-left: 3px solid var(--accent, #2563eb);
  background: var(--card, #fff);
  color: var(--text, #0f172a);
  border-radius: .5rem;
}

/* === Uniform, responsive media height across all cards === */

/* One place to tune the media height.
   On small screens it’s ~160px, grows with viewport width,
   and caps around 240px. This ends up ~1/3 of most cards. */
   :root{
    --card-media-h: clamp(160px, 28vw, 240px);
  }
  
  /* Keep full-bleed media with rounded corners clipped by the card */
  .card{
    display:flex;
    flex-direction:column;
    padding:0;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    background:var(--card);
    box-shadow:var(--shadow);
  }
  
  /* Remove default figure margins and fix its height uniformly */
  .media{
    margin:0;
    background:#f1f5f9;
  }
  
  /* Override previous aspect-ratio rule: force a fixed, responsive height */
  .ratio-16x9{
    width:100%;
    height: var(--card-media-h);  /* << same size for all figures */
    aspect-ratio: auto;           /* we’re controlling height directly */
  }
  
  /* Make the image/video fill that box */
  .media > img,
  .media > video,
  .media > iframe{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border:0;
  }
  
  /* Keep spacing only on text */
  .card .content{ padding:14px; }
  
  /* Optional: on wider screens make cards a bit taller so media ≈ 1/3 of card */
  @media (min-width: 960px){
    .card { min-height: 540px; }  /* tweak if you want a different proportion */
  }