/* ===== Layout helpers ===== */
.container { width: min(1100px, 92vw); margin-inline: auto; }
html { scroll-behavior: smooth; }

/* ===== Sticky Top Nav ===== */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: #0b0c10; /* dark bar like Prof site */
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.bar{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0;
}

/* Brand */
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; color:#e8eef7; letter-spacing:.2px; text-decoration:none; }
.brand-dot{ width:10px; height:10px; border-radius:999px; background:#ff9f0a; box-shadow:0 0 0 6px rgba(255,159,10,.25); }

/* Nav */
.nav{
  display:flex; align-items:center; gap:.25rem;
  overflow-x:auto; /* keeps in one row; scrolls if narrow */
  scrollbar-width:none; /* hide scrollbar in Firefox */
}
.nav::-webkit-scrollbar{ display:none; } /* hide scrollbar in WebKit */

.nav-link{
  --pad-x: 14px;
  color:#e6e7ee; text-decoration:none; font-weight:700;
  padding:.55rem var(--pad-x);
  border-radius:999px;
  opacity:.95;
}
.nav-link:hover{ background: rgba(255,255,255,.08); opacity:1; }
.nav-link.active{ background:#ff9f0a; color:#111; }

/* Mobile toggle (shown < 860px) */
.nav-toggle{
  display:none; background:transparent; color:#e6e7ee;
  border:1px solid rgba(255,255,255,.25); border-radius:10px; padding:.45rem .6rem;
}
@media (max-width: 860px){
  .nav{ display:none; flex-direction:column; align-items:flex-start; gap:.2rem; padding: .4rem 0; }
  .nav.open{ display:flex; }
  .nav-toggle{ display:inline-flex; }
}



/* ===== Page header (under the bar) ===== */
.page-header{
  background: radial-gradient(1200px 400px at 80% -20%, rgba(255,159,10,.18), transparent 60%),
              linear-gradient(180deg, #2b3353 0%, #2b3353 55%, #12151d 100%);
  color:#eef3ff;
  padding: 20px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.page-header .eyebrow{ margin:0 0 6px; color:#aab3c7; font-weight:600; letter-spacing:.3px; }
.page-title{
  font-size: clamp(2.4rem, 2rem + 3.2vw, 4.2rem); /* bigger */
  line-height: 1.1;
  letter-spacing: 0.2px;
}
.page-subtitle{
  font-size: clamp(1.05rem, 0.95rem + .4vw, 1.25rem);
  margin-top: .25rem;
  max-width: 70ch;
}

/* ===== Body background ===== */
body{ background:#c5cccc; }        /* dark like reference */
main, .section, .content{ background:#2b3353; color:#e8eef7; }
.card{ background:#2b3353; border:1px solid rgba(255,255,255,.06); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); }


/* -------------------------------------------------
   Anish Portfolio — Clean Baseline Theme
   Replace your CSS with this file (or paste at end).
   Uses system fonts for speed; swap to Inter if you like.
-------------------------------------------------- */

/* 0) Root tokens */
:root{
  --bg: #0f1220;         /* page background (dark)   */
  --panel: #121627;      /* cards/sections           */
  --text: #e8eef7;       /* primary text             */
  --muted: #b9c1d6;      /* secondary text           */
  --line: rgba(255,255,255,.08);

  --accent: #ff9f0a;     /* orange brand             */
  --accent-ink: #121212; /* text on accent           */
  --ring: rgba(255,159,10,.35);

  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --container: min(1100px, 92vw);
}

/* 1) Base / reset */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.6;
  background: var(--bg);
  color: var(--text);
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--text); text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{ width: var(--container); margin-inline:auto; }
.section{ padding: 28px 0; }
.hidden{ display:none !important; }

/* Typography */
h1,h2,h3{ margin:0 0 .4rem; line-height:1.25; letter-spacing:.2px; color: var(--text); }
h1{ font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); font-weight: 900; }
h2{ font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); font-weight: 800; }
h3{ font-size: 1.15rem; font-weight: 800; }
p{ margin:.4rem 0 .9rem; color: var(--muted); }

/* Focus ring for a11y */
:where(a,button,input,textarea,select):focus-visible{
  outline:3px solid var(--ring); outline-offset:2px; border-radius:10px;
}

/* 2) Header / Top Navigation */
.site-header{
  position: sticky; top:0; z-index:1000;
  background:#0b0c10; border-bottom:1px solid var(--line);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 0;
}
.brand{ display:flex; align-items:center; gap:.6rem; color:#e8eef7; text-decoration:none; font-weight:900; }
.brand-dot{ width:10px; height:10px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 6px var(--ring); }

.nav{
  display:flex; align-items:center; gap:.25rem;
  overflow-x:auto; scrollbar-width:none;
}
.nav::-webkit-scrollbar{ display:none; }

.nav-link{
  --pad-x: 14px;
  display:block; padding:.55rem var(--pad-x);
  border-radius:999px; font-weight:800;
  color:#e6e7ee; opacity:.95; text-decoration:none;
}
.nav-link:hover{ background: rgba(255,255,255,.08); opacity:1; }
.nav-link.active{ background: var(--accent); color: var(--accent-ink); }

.nav-toggle{
  display:none; background:transparent; color:#e6e7ee;
  border:1px solid rgba(255,255,255,.25); border-radius:10px; padding:.45rem .6rem;
}
@media (max-width: 860px){
  .nav{ display:none; flex-direction:column; align-items:flex-start; gap:.2rem; padding:.5rem 0; }
  .nav.open{ display:flex; }
  .nav-toggle{ display:inline-flex; }
}

/* 3) Page header (hero at top of each page) */
.page-header{
  background:
    radial-gradient(1200px 400px at 80% -20%, rgba(255,159,10,.18), transparent 60%),
    linear-gradient(180deg, #0e1420 0%, #0e1420 55%, #12151d 100%);
  color:#eef3ff;
  padding: 20px 0 20px;
  border-bottom:1px solid var(--line);
}
.page-header .eyebrow{ margin:0 0 6px; color:#aab3c7; font-weight:700; letter-spacing:.3px; }
.page-title{ margin:.2rem 0 .3rem; }
.page-subtitle{ margin:0; color:#c6ccda; max-width: 70ch; }

/* 4) Cards / grids / badges / buttons */
.card{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card .pad{ padding:18px; }
.card img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }

.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){ .grid-3{ grid-template-columns: 1fr 1fr } }
@media (max-width: 680px){ .grid-2, .grid-3{ grid-template-columns: 1fr } }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--accent); color: var(--accent-ink);
  padding:.7rem 1rem; border-radius:12px; font-weight:800;
  border:none; cursor:pointer; box-shadow: var(--shadow);
}
.btn:hover{ filter: brightness(1.05); }
.btn.dark{ background:#1a1a1a; color:#fff; }

.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:999px;
  background: rgba(255,255,255,.06); border:1px solid var(--line);
  font-size:.85rem; color:#dbe3f7;
}

/* 5) Timeline (experience/awards) */
.timeline{ position:relative; max-width:1000px; margin:0 auto; }
.timeline::before{ content:''; position:absolute; top:0; bottom:0; left:130px; width:2px;
  background: linear-gradient(var(--accent), transparent); }
.timeline-item{ position:relative; margin-bottom:22px; padding-left:160px; }
.timeline-dot{ position:absolute; left:124px; top:.7rem; width:10px; height:10px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 6px var(--ring); }
.timeline-date{ position:absolute; left:0; width:110px; text-align:right; color:var(--muted); font-weight:700; }
.timeline-content{ background: var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow: var(--shadow); padding:16px; }
@media (max-width: 720px){
  .timeline::before{ left:24px }
  .timeline-dot{ left:18px }
  .timeline-item{ padding-left:54px }
  .timeline-date{ position:static; width:auto; text-align:left; color:var(--accent); margin-bottom:.2rem; }
}

/* 6) Forms (Contact) */
input, textarea, select{
  width:100%; color:#e8eef7; background:#0e1326;
  border:1px solid var(--line); border-radius:10px; padding:.8rem .9rem;
}
input::placeholder, textarea::placeholder{ color:#8d96ad; }
textarea{ min-height: 140px; resize: vertical; }

.form-row{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
@media (max-width: 680px){ .form-row{ grid-template-columns:1fr } }

.submit-btn{
  background: var(--accent); color: var(--accent-ink);
  border:none; border-radius:12px; padding:.95rem 1.4rem; font-weight:900;
  cursor:pointer; box-shadow: var(--shadow);
}

/* 7) Footer */
footer{
  border-top:1px solid var(--line);
  padding: 20px 0 32px; color: var(--muted);
}
footer .links{ display:flex; gap:12px; flex-wrap:wrap; }
footer .links a{ color:#dbe3f7; text-decoration:none; }
footer .links a:hover{ text-decoration:underline; }

/* 8) Utilities to ensure visible text inside light cards (if any) */
.light, .card.light{ background:#ffffff; color:#1a1f2b; }
.light :is(h1,h2,h3){ color:#1a1f2b; }
.light p{ color:#47506a; }


/*---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------
=------------------------------------------------------------------------------------------------
------------------------------------------------*/
/* ==== Palette refresh ==== */
:root{
  --bg:#0d1326;              /* page background */
  --panel:#141b35;           /* cards/sections */
  --text:#eef3ff;            /* primary text   */
  --muted:#c3cbe3;           /* secondary text */
  --line:rgba(255,255,255,.08);

  --accent:#8b5cf6;          /* indigo */
  --accent-2:#22d3ee;        /* teal   */
  --accent-ink:#ffffff;
  --accent-grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --ring: rgba(139,92,246,.35);
}

/* Body + cards read brighter */
body{ background: var(--bg); color: var(--text); }
.card{ background: var(--panel); border-color: var(--line); }

/* Buttons → gradient */
.btn{
  background: var(--accent-grad);
  color: var(--accent-ink);
  box-shadow: 0 10px 24px rgba(34,211,238,.16), 0 6px 14px rgba(139,92,246,.14);
}
.btn.dark{ background:#1d233d; color:#fff; }
.btn:hover{ transform: translateY(-1px); filter: saturate(1.05); }

/* Badges turn subtle glass */
.badge{ background: rgba(255,255,255,.06); border-color: var(--line); color:#eaf0ff; }

/* Nav bar + active pill */
.site-header{ background:#0b1022; }
.brand-dot{
  background: var(--accent-grad);
  box-shadow: 0 0 0 6px rgba(139,92,246,.25);
}
.nav-link.active{
  background: var(--accent-grad);
  color:#fff;
}
.nav-link:hover{ background: rgba(255,255,255,.09); }

/* ==== Hero upgrade ==== */
.page-header{
  position: relative;
  min-height: 72vh;      /* was ~62vh */
  padding: 20px 0 20px;             /* more breathing room */
  color:#f5f8ff;
  border-bottom: 1px solid var(--line);
  /* layered gradient + SVG wave pattern */
  background:
    radial-gradient(1200px 480px at 85% -10%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(900px 420px at -10% 10%, rgba(139,92,246,.22), transparent 55%),
    linear-gradient(180deg, #0f1530 0%, #0e1430 55%, #121939 100%);
  overflow: hidden;
}

/* Add soft wave lines using an embedded SVG pattern */
.page-header::after{
  content:"";
  position:absolute; inset:0;
  background-image: url("../images/waves.svg");
  background-repeat:no-repeat;
  background-size: 900px 500px;
  background-position: 75% 0%;      /* push waves to the right */
  opacity:.45;
  pointer-events:none;
}

/* Larger headline + nicer eyebrow */
.page-header .eyebrow{
  color:#bcd2ff; letter-spacing:.32px; font-weight:700; margin:0 0 10px;
}
.page-title{
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
  font-weight: 900;
  margin:.2rem 0 .5rem;
}
.page-subtitle{
  color:#d9e2ff; max-width: 70ch;
  font-size: clamp(1rem, .9rem + .4vw, 1.15rem);
}

/* Optional: hero content container gets a faint rounded panel look */
.page-header .container{
  padding: 15px 15px 0;
  border-radius: 15px;
  background: radial-gradient(600px 160px at 0% 0%, rgba(255,255,255,.02), transparent 60%);
}

/* Make sections pop a bit more on dark bg */
.section .section-title{ color:#f5f8ff; }
.card h3{ color:#f8faff; }
.card p{ color:#cbd6f2; }

/* Grid: 3 → 2 → 1 responsive */
.projects-grid{
  display:grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1024px){ .projects-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){  .projects-grid{ grid-template-columns: 1fr; } }

/* Card layout = equal height, aligned buttons */
.project-card{
  display:flex; flex-direction:column; overflow:hidden;
}
.project-card img{
  width:100%; aspect-ratio: 16/9; object-fit:cover;
  border-bottom: 1px solid var(--line);
}
.project-card .pad{
  display:flex; flex-direction:column; gap:.55rem;
  padding: 18px;
  min-height: 220px;           /* keeps text area consistent */
}
.project-card h3{ margin:.2rem 0 .1rem; font-size:1.2rem; font-weight:900; }
.project-meta{ color: var(--muted); margin: 0; }
.project-card .tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.2rem; }

/* Push actions to the bottom so all CTAs align */
.project-actions{
  margin-top:auto;             /* key for equal bottom alignment */
  display:flex; gap:.6rem; flex-wrap:wrap;
}
.project-actions .btn{ min-width: 128px; justify-content:center; }

/* Slight hover lift for cards */
.project-card{ transition: transform .24s ease, box-shadow .24s ease; }
.project-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.28); }



/* ===== Expandable list cards (Projects) ===== */
.exp-list{
  display:flex; flex-direction:column; gap:14px;
  /* keeps the list centered but fluid */
  max-width: 1100px; margin-inline:auto;
}
.exp-card{
  cursor:pointer;
  display:flex; align-items:center; gap:18px;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height: 96px;
  padding: 14px;
  perspective: 800px;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.exp-card:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.28); }

.exp-cover{
  width: 128px; height: 170px; object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .5s ease, box-shadow .4s ease;
}

.exp-info{ display:flex; flex-direction:column; gap:6px; min-width: 260px; flex: 1 1 auto; }
.exp-title{ font-size: 1.15rem; font-weight:900; color:#fff; letter-spacing:.3px; margin:0; }
.exp-sub{ font-size:.92rem; color: var(--muted); }

.exp-aside{ margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.stat{ display:flex; align-items:baseline; gap:6px; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.06); }
.stat .val{ font-weight:900; color:#fff; }
.stat .lbl{ color:#cbd6f2; font-size:.85rem; }

/* Hidden content (collapsed by default) */
.exp-hidden{
  height:0; overflow:hidden; width:100%;
  color:#cbd6f2; font-size:.95rem;
  transition: height .25s ease, margin .2s ease, opacity .2s ease;
  opacity:0;
}
.exp-actions{ display:flex; gap:.6rem; margin-top:.6rem; flex-wrap:wrap; }
.btn.simple{ background:#1ea94b; color:#fff; border:none; padding:.7rem 1rem; border-radius:10px; font-weight:800; }

/* OPEN STATE */
.exp-card.open{
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), var(--panel);
}
.exp-card.open .exp-cover{
  transform: rotateY(42deg);
  box-shadow:-12px 10px 18px rgba(0,0,0,.25), -2px 0 0 #8ea2ff;
}
.exp-card.open .exp-info{ transform: translateY(-4px); transition: transform .2s ease; }
.exp-card.open .stat{ background: rgba(255,255,255,.10); }
.exp-card.open .exp-hidden{ height:auto; margin-top: 10px; opacity:1; }

/* Responsive */
@media (max-width: 860px){
  .exp-card{ align-items:flex-start; }
  .exp-cover{ width:110px; height:150px; }
}
@media (max-width: 640px){
  .exp-card{ flex-wrap:wrap; }
  .exp-aside{ width:100%; align-items:flex-start; }
}


/* Make home hero big and consistent */
.hero-xl{ min-height: 78vh; padding: 96px 0 80px; }   /* taller than default .page-header */

.hero-wrap{
  display: grid;
  grid-template-columns: 120px 1fr;   /* avatar + text */
  gap: 24px;
  align-items: center;
}

/* When avatar is removed, make hero text center and single-column */
.hero-wrap.no-avatar{
  grid-template-columns: 1fr; /* single column */
  text-align: left;           /* left-align headings and paragraphs */
  justify-items: start;
  padding-inline-start: 36px;
  padding-inline-end: 36px;
   /* leave some space from left edge */
}
.hero-wrap.no-avatar .hero-text{ max-width: none; }
/* allow the intro heading to wrap on small screens while keeping words intact */
.hero-wrap.no-avatar h3{
  white-space: normal;
  overflow-wrap: normal;
}
/* Try to keep each hero line on a single row on wider viewports by scaling the font; allow wrap on small screens */
.hero-wrap.no-avatar .eyebrow,
.hero-wrap.no-avatar .page-subtitle,
.hero-wrap.no-avatar h2{
  white-space: normal; /* allow wrapping */
  display: block;
  margin: 0 0 12px 0;   /* spacing after each line */
}
.hero-wrap.no-avatar h2{
  font-size: clamp(1.8rem, 2.2rem + 1.4vw, 3.2rem);
  font-weight:900;
  line-height:1.05;
  margin-bottom: 18px;
}
.hero-wrap.no-avatar .page-subtitle{ max-width: none; color: var(--muted); margin-bottom:18px; }

/* Buttons align left and get extra top margin */
.hero-wrap.no-avatar .hero-actions{
  justify-content: flex-start;
  margin-top: 12px;
}

@media (max-width: 900px){
  .hero-wrap.no-avatar{
    text-align: center; justify-items: center; padding-inline-start: 0;padding-inline-end: 0;
  }
  .hero-wrap.no-avatar .hero-text{ max-width: 82ch; }
  .hero-wrap.no-avatar h3{ white-space: normal; }
  .hero-wrap.no-avatar .hero-actions{ justify-content: center; }
}
@media (min-width: 1024px){
  /* keep hero copy on a single line on spacious viewports */
  .hero-wrap.no-avatar h3,
  .hero-wrap.no-avatar .page-subtitle{
    white-space: nowrap;
  }
}

.profile-icon{
  width: 120px; height: 120px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 2px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.page-title{
  font-size: clamp(2.6rem, 2rem + 3.6vw, 4.4rem);
  line-height: 1.1;
  margin: .2rem 0 .5rem;
}

.page-subtitle{
  font-size: clamp(1.1rem, .95rem + .5vw, 1.3rem);
  margin: 0 0 1rem;
  max-width: 70ch;
}

.hero-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* ===== Publications page ===== */
.pubs-controls{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.pubs-controls input[type="search"],
.pubs-controls select{
  background:#0e1326; color:#e8eef7;
  border:1px solid var(--line); border-radius:10px;
  padding:.75rem .9rem;
}
.pubs-controls input[type="search"]{ flex:1 1 320px; min-width: 220px; }

.pubs-year{
  margin: 8px 0 10px;
  color:#f5f8ff; font-weight:900;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
}

.pub{ overflow:hidden; }
.pub .pad{ padding:18px; }
.pub-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.pub-title{ margin:0; font-size:1.1rem; line-height:1.35; font-weight:900; color:#fff; }
.pub-authors{ margin:.25rem 0 .2rem; color:#d4dcf5; }
.pub-venue{ margin:.1rem 0 .4rem; color:#aeb9db; }
.pub-doi a{ color:#a9e0ff; text-decoration:underline; }
.pub-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem; }

.badge-accepted{ background: rgba(34,211,238,.14); border:1px solid rgba(34,211,238,.34); color:#aaf4ff; }
.badge-published{ background: rgba(139,92,246,.18); border:1px solid rgba(139,92,246,.38); color:#e9ddff; }

/* hover lift */
.pub{ transition: transform .18s ease, box-shadow .22s ease; }
.pub:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.28); }

/* === Publications spacing + stronger borders === */

/* More vertical space between items */
.pubs-year {
  margin: 18px 0 12px;            /* more room around year labels */
}

/* Add gaps between cards */
.pub { 
  margin: 14px 0;                 /* space above/below each card */
  border-width: 1.5px;            /* slightly thicker border */
  border-color: #ffffff;          /* white border as requested */
}
.pub + .pub { 
  margin-top: 18px;               /* extra gap between consecutive cards */
}

/* Keep the border white on hover too */
.pub:hover { 
  border-color: #ffffff; 
  box-shadow: 0 18px 38px rgba(0,0,0,.30);
}

/* Optional: add a faint inner separator so content doesn't feel cramped */
.pub .pad { 
  padding: 22px;                  /* a little more breathing room inside */
}

/* Optional: create extra space before each new year block */
.pubs-year:not(:first-of-type) {
  margin-top: 26px;
}

.pub { 
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%), var(--panel);
}

/* ===== Make publication text brighter (white) ===== */
.pubs-list p,
.pubs-list .pub-authors,
.pubs-list .pub-venue,
.pubs-list .pub-doi,
.pubs-list .pub-doi a {
  color: #ffffff;              /* full white for readability */
}

/* Slightly bolder for key lines */
.pubs-list .pub-authors { font-weight: 600; }
.pubs-list .pub-venue { opacity: 0.95; }
.pubs-list .pub-doi a { text-decoration: underline; }

/* Optional: brighten buttons’ labels if they sit on dark backgrounds */
.pubs-list .btn.dark { color: #ffffff; }

/* ===== Contact panel: bordered card at page bottom ===== */
.contact-section{
  padding: 40px 0 56px;          /* space around the card */
  margin-top: 36px;               /* gap from previous section */
  background: transparent;
}

/* turn the inner container into a card */
.contact-section > .container{
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%), var(--panel);
  border: 1.5px solid #ffffff;    /* crisp white border */
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.30);
  padding: 22px 22px 28px;
}

/* layout keeps your two-column form */
.contact-container{ display:grid; grid-template-columns: 1fr 2fr; gap: 22px; }
@media (max-width: 900px){ .contact-container{ grid-template-columns: 1fr; } }

/* headings & intro text inside the card */
.contact-section h2{ margin: 0 0 6px; color: #fff; }
.contact-intro{ color:#e9eeff; }

/* labels & fields: brighter text and clearer borders */
.contact-form label{ color:#ffffff; font-weight: 700; }
.contact-form input,
.contact-form textarea{
  background:#0e1326;
  color:#f5f8ff;
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 12px;
  padding: .9rem 1rem;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:#a9b5d3; }

/* focus state pops with your accent */
.contact-form :where(input,textarea):focus{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-color: transparent;
}

/* row layout you already use */
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group.full-width{ grid-column: 1 / -1; }
@media (max-width: 680px){ .form-row{ grid-template-columns: 1fr; } }

/* submit button matches site style */
.submit-btn{
  background: var(--accent-grad, linear-gradient(135deg, var(--accent), var(--accent-2)));
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: .95rem 1.4rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(34,211,238,.16), 0 6px 14px rgba(139,92,246,.14);
  cursor: pointer;
}
.submit-btn:hover{ transform: translateY(-1px); filter: saturate(1.05); }

/* email on the left column */
.contact-info h3{ margin: 0 0 4px; color:#fff; }
.contact-info p{ color:#f2f6ff; }


/* ===== Canonical hero styles (override & simplify) ===== */

/* Compact hero for every page by default */
.page-header{
  position: relative;
  min-height: 34vh;                 /* ~half of what you have now */
  padding: 48px 0 40px;             /* less vertical space */
  color:#f5f8ff;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 320px at 85% -10%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(700px 300px at -10% 10%, rgba(139,92,246,.18), transparent 55%),
    linear-gradient(180deg, #0f1530 0%, #0e1430 55%, #121939 100%);
  overflow: hidden;
}

/* Waves (file path is relative to css/styles.css) */
.page-header::after{
  content:"";
  position:absolute; inset:0;
  background-image: url("../images/waves.svg");
  background-repeat:no-repeat;
  background-size: 720px 400px;     /* smaller so it doesn’t dominate */
  background-position: 78% 10%;
  opacity:.35;
  pointer-events:none;
}

/* Typography spacing inside hero */
.page-header .eyebrow{ color:#bcd2ff; letter-spacing:.32px; font-weight:700; margin:0 0 8px; }
.page-title{ font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); line-height:1.1; margin:.2rem 0 .4rem; }
.page-subtitle{ margin:0; color:#d9e2ff; max-width: 70ch; }

/* Slight soft panel look (kept subtle) */
.page-header .container{
  padding: 12px 12px 0;
  border-radius: 14px;
  background: radial-gradient(520px 140px at 0% 0%, rgba(255,255,255,.02), transparent 60%);
}

/* Home-only modifier: tall hero */
.hero-xl{
  min-height: 58vh;                /* larger than default, but much less than 72vh */
  padding: 88px 0 64px;
}
.hero-xl .page-title{ font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4rem); }

/* Optional: tiny hero (if any page needs it) */
.hero-sm{
  min-height: 24vh;
  padding: 32px 0 28px;
}

/* Mobile: keep things reasonable */
@media (max-width: 768px){
  .page-header{ min-height: 28vh; padding: 36px 0 30px; }
  .hero-xl{ min-height: 44vh; padding: 60px 0 44px; }
  .page-header::after{ background-size: 520px 300px; background-position: 80% 8%; }
}


/* === 3×3 Projects Grid === */
.projects-grid--33{
  display:grid;
  gap: 24px;                               /* space between cards */
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1024px){ .projects-grid--33{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){  .projects-grid--33{ grid-template-columns: 1fr; } }

/* Card look */
.project-card{
  display:flex; flex-direction:column; overflow:hidden;
  border: 1.5px solid #ffffff;            /* crisp white border */
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%), var(--panel);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.project-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0,0,0,.32);
  border-color: #ffffff;
}

/* Media */
.project-card img{
  width:100%; aspect-ratio: 16/9; object-fit: cover;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Content + equal height trick */
.project-card .pad{
  display:flex; flex-direction:column; gap:.6rem;
  padding: 18px;
  min-height: 230px;                       /* makes heights consistent */
}
.project-card h3{ margin: .2rem 0 .1rem; font-size: 1.2rem; font-weight: 900; color:#fff; }
.project-meta{ color:#f0f4ff; opacity:.95; }
.tags{ display:flex; gap:.45rem; flex-wrap:wrap; }

.project-actions{
  margin-top:auto;                          /* aligns buttons to bottom on all cards */
  display:flex; gap:.6rem; flex-wrap:wrap;
}
.project-actions .btn{ min-width: 136px; justify-content: center; }

/* ===== Experience tabs ===== */
.xp-tabs{
  display:flex; gap:10px; flex-wrap:wrap;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.14);
  padding:8px; border-radius:14px;
}
.xp-tab{
  appearance:none; border:none; cursor:pointer; font-weight:900;
  padding:.7rem 1rem; border-radius:999px;
  color:#eaf0ff; background: transparent;
}
.xp-tab:hover{ background: rgba(255,255,255,.08); }
.xp-tab.active{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; box-shadow: 0 10px 22px rgba(0,0,0,.24);
}

/* ===== Experience list/cards ===== */
.xp-list{ display:flex; flex-direction:column; gap:16px; }

.xp-card{
  display:grid; grid-template-columns: 1fr auto; gap:16px;
  border:1.5px solid #ffffff; border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%), var(--panel);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  padding:18px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.xp-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 44px rgba(0,0,0,.32); }

.xp-head { grid-column: 1 / -1; }
.xp-title{ margin:.1rem 0 .1rem; font-size:1.25rem; font-weight:900; color:#fff; }
.xp-org{ color:#e9eeff; }
.xp-loc{ color:#cbd6f2; font-size:.95rem; }
.xp-date{ color:#bcd2ff; font-weight:700; margin-bottom:.2rem; }

.xp-body{ grid-column: 1 / 2; color:#f7f9ff; }
.xp-bullets{ margin:.3rem 0 .2rem .95rem; }
.xp-bullets li{ margin:.18rem 0; }

/* Optional right-side image */
.xp-media{
  grid-column: 2 / 3;
  width: 220px; height: 140px; object-fit: cover;
  border-radius:12px; border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 20px rgba(0,0,0,.26);
  align-self: start;
}
@media (max-width: 880px){
  .xp-card{ grid-template-columns: 1fr; }
  .xp-media{ grid-column: 1 / -1; width: 100%; height: 180px; }
}

/* Utility from earlier pages */
.hidden{ display:none !important; }


/*beginners chess css*/

/* ===== Projects tabs & panels ===== */
.proj-tabs{
  display:flex; gap:10px; flex-wrap:wrap;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.14);
  padding:8px; border-radius:14px;
}
.proj-tab{
  appearance:none; border:none; cursor:pointer; font-weight:900;
  padding:.7rem 1rem; border-radius:999px;
  color:#eaf0ff; background: transparent;
}
.proj-tab:hover{ background: rgba(255,255,255,.08); }
.proj-tab.active{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; box-shadow: 0 10px 22px rgba(0,0,0,.24);
}

/* Panel card */
.proj-panel{
  border: 1.5px solid #ffffff;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%), var(--panel);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  overflow: hidden;
}
.proj-title{ margin:.2rem 0 .6rem; font-size:1.6rem; font-weight:900; color:#fff; }
.proj-sub{ margin:.8rem 0 .3rem; font-weight:900; color:#e7ecff; }
.proj-intro{ color:#fff; }

/* Project gallery: responsive grid with constrained image height */
/* Project gallery: show full image, no cropping */
.proj-gallery{
  display: grid;
  grid-template-columns: 1fr;        /* 1-wide on mobile */
  gap: 20px;
  margin-top: 22px;
}

.proj-gallery img{
  width: 100%;
  height: auto;                       /* natural aspect ratio */
  max-height: clamp(280px, 40vh, 520px);  /* never overflow the viewport */
  object-fit: contain;                /* show entire diagram/screenshot */
  background: #0e1326;                /* subtle matte behind transparent PNGs */
  padding: 10px;                      /* breathing room inside the border */
  border: 1.5px solid #ffffff;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0,0,0,.32);
  display: block;
}

@media (min-width: 900px){
  .proj-gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 2-up */
}

/* --- Optional: if you have PHOTO-style images that should fill & crop --- */
/* Add class 'proj-gallery--photo' to that gallery container */
.proj-gallery--photo img{
  padding: 0;
  background: transparent;
  height: 360px;
  max-height: none;
  object-fit: cover;                  /* fill and crop like a photo card */
}


/* Simple list inside Nebula section */
.proj-list{ margin:.2rem 0 .2rem 1.1rem; }
.proj-list li{ margin:.2rem 0; }

/* Utility */
.hidden{ display:none !important; }


/*--------------------------------------------------------------------------------*/

/* Click-to-zoom hint */
.proj-gallery img{ cursor: zoom-in; }

/* Lightbox overlay */
.lb{
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(2px);
}
.lb.open{ display:flex; animation: lbFade .18s ease; }
@keyframes lbFade{ from{opacity:0} to{opacity:1} }

.lb-img{
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  background:#0e1326;
}

/* Caption */
.lb-caption{
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  max-width: min(92vw, 1200px);
  color: #fff; text-align:center; font-size: .98rem; line-height: 1.35;
  padding: .5rem .75rem; border-radius: 10px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18);
}

/* Buttons */
.lb-btn{
  position: absolute; top: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-weight: 900; line-height: 1;
  width: 44px; height: 44px; border-radius: 999px;
  display:grid; place-items:center; cursor:pointer;
  backdrop-filter: blur(2px);
}
.lb-btn:hover{ background: rgba(255,255,255,.16); }
.lb-close{ right: 14px; font-size: 20px; }

.lb-prev, .lb-next{
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; font-size: 34px;
}
.lb-prev{ left: 18px; }
.lb-next{ right: 18px; }

/* Make buttons bigger on touch screens */
@media (pointer: coarse){
  .lb-btn{ width: 56px; height: 56px; font-size: 24px; }
  .lb-prev, .lb-next{ font-size: 40px; }
}

/* ===== Activities page spacing & cards ===== */

/* Extra air around the tab row */
.section .container .proj-tabs { 
  margin-bottom: 18px; 
}

/* Make the Activities panels feel roomy */
#panel-clubs, #panel-cf {
  padding-top: 6px;          /* a touch below the tabs */
}

/* Card defaults (only inside Activities panels) */
#panel-clubs .card, 
#panel-cf .card {
  border: 1.6px solid rgba(255,255,255,.28);
  background: radial-gradient(700px 200px at -10% -20%, rgba(255,255,255,.03), transparent 60%),
              rgba(15, 20, 35, .65);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  padding: 24px 26px;                    /* more internal space */
  margin: 16px 0;                        /* vertical gap between cards */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Larger gaps on wide screens */
@media (min-width: 960px){
  #panel-clubs .card, 
  #panel-cf .card {
    padding: 28px 30px;
    margin: 20px 0;
  }
}

/* Hover polish */
#panel-clubs .card:hover, 
#panel-cf .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.42);
}

/* Title + meta text rhythm */
#panel-clubs .proj-title,
#panel-cf .proj-title{
  margin: 0 0 .45rem;
  font-weight: 900;
  font-size: clamp(1.15rem, 0.9rem + 1.2vw, 1.65rem);
  line-height: 1.2;
  color: #ffffff;
}

#panel-clubs p strong,
#panel-cf p strong{
  font-weight: 800;
  color: #cfe2ff;
}

/* Paragraph readability */
#panel-clubs p,
#panel-cf p{
  margin: .4rem 0 .85rem;
  line-height: 1.65;
  color: #eaf0ff;
}

/* Reduce last-paragraph extra gap */
#panel-clubs .card p:last-child,
#panel-cf .card p:last-child{
  margin-bottom: .2rem;
}

/* Tighten the curved “stacked pill” edges between adjacent cards on mobile */
#panel-clubs .card + .card,
#panel-cf .card + .card{
  margin-top: 18px;
}

/* Tabs (reuse but slightly bigger for this page) */
.proj-tabs{
  display:flex; gap:12px; flex-wrap:wrap;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.18);
  padding:10px; border-radius:16px;
}
.proj-tab{
  appearance:none; border:none; cursor:pointer;
  font-weight:900;
  padding:.75rem 1.1rem; border-radius:999px;
  color:#eaf0ff; background: transparent;
}
.proj-tab:hover{ background: rgba(255,255,255,.08); }
.proj-tab.active{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; 
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
}


/* Make hero shorter on this page */
.slim-hero { min-height: 38vh; }

/* Achievements cards */
.ach-card{
  border: 1.6px solid rgba(255,255,255,.28);
  background: radial-gradient(900px 200px at -10% -20%, rgba(255,255,255,.03), transparent 60%),
              rgba(15,19,35,.66);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.30);
  overflow: hidden;
  margin: 18px 0;
}
.ach-head{ padding: 18px 22px 0; }
.ach-title{
  margin: 0 0 8px;
  font-weight: 900;
  color: #fff;
  font-size: clamp(1.2rem, 1rem + 1.2vw, 1.7rem);
}
.ach-body{ padding: 8px 22px 22px; }

/* Achievements list formatting */
.ach-list{
  margin: .4rem 0 1rem 1rem;
  padding-left: .6rem;
  color:#eaf0ff;
  line-height: 1.6;
}
.ach-list li{ margin: .25rem 0; }

/* Figures & image grid */
.fig-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 900px){
  .fig-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.fig{
  margin: 0;
}
.fig img{
  width: 100%; height: auto;
  max-height: clamp(280px, 42vh, 560px);
  object-fit: contain;
  background: #0e1326;
  padding: 10px;
  border: 1.5px solid #fff;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0,0,0,.32);
  cursor: zoom-in;
}
.figcaption{
  text-align: center;
  font-size: .9rem;
  color: #cfd8ef;
  margin-top: 6px;
}

/* ——— Highlights (reuseable across site) ——— */
.hl {
  display:inline-block; padding:.08rem .42rem; border-radius:999px;
  background: rgba(173,216,255,.16);
  border: 1px solid rgba(226,240,255,.35);
  color:#e9f4ff; font-weight:800; line-height:1.1;
  box-shadow: 0 6px 18px rgba(0,0,0,.22) inset, 0 1px 0 rgba(255,255,255,.08);
}
.hl-grad {
  font-weight:900;
  background: linear-gradient(135deg, #7dd3fc 0%, #a78bfa 50%, #fca5a5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hl-underline { position:relative; font-weight:800; }
.hl-underline::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:.02em;
  height:.42em; background:linear-gradient(90deg, rgba(124,58,237,.28), rgba(14,165,233,.28));
  border-radius:6px; z-index:-1;
}
.stat{ font-variant-numeric: tabular-nums; letter-spacing:.2px; }

/* Lightbox core (if not already in styles.css) */
.lb{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.88); backdrop-filter:blur(2px); }
.lb.open{ display:flex; animation:lbFade .18s ease; }
@keyframes lbFade{ from{opacity:0} to{opacity:1} }
.lb-img{ max-width:min(92vw,1400px); max-height:86vh; border-radius:14px; box-shadow:0 16px 48px rgba(0,0,0,.45); background:#0e1326; }
.lb-caption{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); max-width:min(92vw,1200px); color:#fff; text-align:center; font-size:.98rem; line-height:1.35; padding:.5rem .75rem; border-radius:10px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18); }
.lb-btn{ position:absolute; top:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff; font-weight:900; width:44px; height:44px; border-radius:999px; display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(2px); }
.lb-btn:hover{ background:rgba(255,255,255,.16); }
.lb-close{ right:14px; font-size:20px; }
.lb-prev,.lb-next{ top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:34px; }
.lb-prev{ left:18px; } .lb-next{ right:18px; }
@media (pointer: coarse){ .lb-btn{ width:56px; height:56px; font-size:24px; } .lb-prev,.lb-next{ font-size:40px; } }

/* Tabs spacing reuse */
.proj-tabs{ margin-bottom:16px; }


/* ===== Achievements tables ===== */
.table-wrap{
  overflow-x: auto;                 /* responsive scroll on small screens */
  border-radius: 14px;
}

.ach-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(12,18,32,.55);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  overflow: hidden;
  color: #eaf0ff;
  font-size: clamp(.92rem, .86rem + .2vw, 1rem);
}

.ach-table thead th{
  text-align: left;
  font-weight: 900;
  letter-spacing: .25px;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-bottom: 1px solid rgba(255,255,255,.2);
  padding: 14px 14px;
}

.ach-table tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.ach-table tbody tr:nth-child(odd){
  background: rgba(255,255,255,.03);
}

.ach-table tbody tr:hover{
  background: rgba(125, 211, 252, .06); /* soft cyan hover */
}

/* narrow first & last columns on wide screens */
@media (min-width: 900px){
  .ach-table thead th:first-child,
  .ach-table tbody td:first-child{ width: 56px; }
  .ach-table thead th:last-child,
  .ach-table tbody td:last-child{ width: 88px; }
}


/* ===== Program blocks (AI/ML Learning Series) ===== */
.prog-block{
  margin: 18px 0 8px;
  padding: 14px 16px;
  border: 2px solid rgba(148, 115, 115, 0.537);
  border-radius: 12px;
  background: radial-gradient(600px 160px at -10% -20%, rgba(255,255,255,.03), transparent 60%),
              rgba(255,255,255,.02);
}
.prog-term{
  margin: 0 0 .4rem;
  font-weight: 900;
  color: #dce6ff;
  font-size: 1.05rem;
}
.prog-title{
  margin: .2rem 0 .2rem;
  font-weight: 800;
  color: #fff;
  font-size: 1rem;
}

/* ===== Featured Announcement (Homepage) ===== */
.announce{
  position: relative;
  overflow: hidden;
  border:1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(900px 320px at 105% -10%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(900px 340px at -10% 0%, rgba(139,92,246,.14), transparent 55%),
    rgba(255,255,255,.02);
}
.announce-ribbon{
  position:absolute; top:18px; right:-58px;
  padding:8px 80px;
  transform:rotate(35deg);
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.22);
  color:#fff; font-weight:800; letter-spacing:.4px; font-size:.82rem;
}
.announce-head{ padding: 6px 16px 0; }
.announce-eyebrow{
  margin:0 0 .35rem; color:#bcd2ff; font-weight:800; letter-spacing:.3px; font-size:.92rem;
}
.announce-title{
  margin:.1rem 0 .35rem;
  font-size: clamp(1.6rem, 1.2rem + 2.2vw, 2.4rem);
  line-height:1.15; color:#fff; letter-spacing:.2px; font-weight:900;
}
.announce-sub{
  margin:0 0 .6rem; color:#dbe6ff; max-width: 70ch;
}
.announce-body{
  display:grid; gap:18px;
  grid-template-columns: 1fr;
  padding: 6px 16px 16px;
}
.announce-col{
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:14px;
  background: radial-gradient(600px 160px at -10% -20%, rgba(255,255,255,.03), transparent 60%),
              rgba(255,255,255,.02);
}
.announce-section{
  margin:.1rem 0 .5rem; color:#fff; font-weight:900; letter-spacing:.2px;
}
.announce-list{
  margin:.1rem 0 .8rem; padding-left:1.1rem; color:#eef3ff;
}
.announce-list li{ margin:.28rem 0; }
.announce-ctas{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem; }

/* schedule rows */
.schedule{
  display:grid; gap:6px; margin:.2rem 0 .8rem;
}
.schedule-row{
  display:grid; grid-template-columns: 140px 1fr; align-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:8px 10px;
  background: rgba(255,255,255,.02);
}
.schedule-row .day{ font-weight:800; color:#fff; }
.schedule-row .time{ color:#d9e5ff; }

/* responsive: two columns on wide screens */
@media (min-width: 900px){
  .announce-body{ grid-template-columns: 1fr 1fr; }
}

/* ===== Featured Boot Camp: full-width figure below the announcement ===== */
/* Make the image sit within the same grid and span both columns */
/* Full-width figure inside the two-column announcement grid */
/* 2-col layout for the announcement body */
/* Grid for the announcement body */
.announce-body{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 900px){
  .announce-body{ grid-template-columns: 1fr; }
}

/* Card padding variable (used to bleed the figure) */
.card.announce{ --card-pad: 24px; padding: var(--card-pad); }

/* === Full-width figure that spans both columns and bleeds to card edges === */
.announce-figure .fig{                     /* reset default figure margin */
  margin: 0;
}

/* Show the whole image without cropping and keep it sharp */

/* Optional: cap overly tall images while preserving full image */




/* === Featured boot-camp figure: align + size tweaks === */

/* Span both columns, bleed to card edges but keep ~1px inset on each side */
.announce-figure{
  grid-column: 1 / -1;
  margin: 18px calc( -1 * var(--card-pad) + 1px );  /* ← 1px less bleed L/R */
}

/* Keep full image (no crop), nice frame, and bigger height */
.announce-figure img{
  display: block;
  width: 100%;
  height: auto;                   /* show entire image */
  background: #fff;
  border: 1.5px solid #fff;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0,0,0,.32);
  cursor: zoom-in;
}

/* Make the image ~25% taller than before, still without cropping */
.announce-figure--limit img{
  /* previously ~70vh cap; bump to ~85vh (max 860px) */
  max-height: min(85vh, 860px);
  object-fit: contain;            /* keep full image visible */
}

/* Caption */
.announce-figure figcaption{
  margin-top: 8px;
  text-align: center;
  font-size: .92rem;
  color: #cfd8ff;
}

/* ===== Correct the oversized home hero ===== */

/* tighten the grid a bit so the lines wrap sooner */
#home-hero .hero-wrap{
  grid-template-columns: 88px 1fr;
  gap: 16px;
}

/* keep text block readable width */
#home-hero .hero-text{ max-width: 72ch; }

/* this beats generic .page-header .page-title rules */
.page-header#home-hero .page-title{
  font-size: clamp(1.4rem, 0.9rem + 1.6vw, 2.35rem) !important;
  line-height: 1.25;
  letter-spacing: .2px;
  margin: .4rem 0 0;
  font-weight: 400;
}

/* eyebrow spacing a touch tighter */
#home-hero .eyebrow{ margin-bottom: .35rem; }

/* highlight “pills” slimmer so they don’t look huge */
#home-hero .page-title .hl{
  padding: .06em .32em;
  border-radius: .5em;
  background: linear-gradient(180deg, rgba(186,204,255,.16), rgba(186,204,255,.06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  font-weight: 900;
}

/* optional: tiny bump on very large screens only */
@media (min-width: 120px){
  .page-header#home-hero .page-title{ font-size: 1.2rem !important; }
}