/* Thin rounded hr below name */
hr {
  border: none;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.35), transparent);
  margin: 0.1em 0;
}

html { scroll-behavior: smooth; }

/* html holds the pure black color; body + content wrappers stay transparent
   so the <canvas id="cv-starfield"> drawn by the inline starfield script in
   the rendered HTML shows through the entire layout. */
html,
html.quarto-light {
  background-color: #000000 !important;
  background-image: none !important;
  color: white;
}

#quarto-content,
.quarto-container,
.column-page,
.quarto-about-solana,
.about-entity,
.entity-contents,
main.content,
.page-layout-full {
  background-color: transparent !important;
  background-image: none !important;
  color: white;
}

/* Use Quicksand to match site-wide font */
.about-entity,
.about-entity *:not(i):not(.fa):not([class*="fa-"]):not(input):not(textarea):not(select):not(button){
  font-family: 'Quicksand', system-ui, sans-serif !important;
  font-weight: 400;
  line-height: 1.5;
}


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


div.quarto-title h1.title {
  font-size: 2.5em !important;
}

div.about-entity{
  margin-top: 0 !important;
  align-items: flex-start !important;
}

/* entity-contents takes all remaining space so calc(100% + 27em) works */
.quarto-about-solana .about-entity .entity-contents {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* image column: fixed 27em, never shrinks */
.quarto-about-solana .about-entity > img.about-image {
  flex: 0 0 27em !important;
  min-width: 0 !important;
}

.quarto-about-solana {
  padding-top: 9em !important;
}

/* Full-bleed: span the full viewport instead of the narrower column-page zone */
#quarto-content .quarto-about-solana.column-page {
  grid-column: screen-start / screen-end !important;
  padding-left: 5vw;
  padding-right: 5vw;
}

/* Break about-contents out of entity-contents so sections span full content width.
   The profile image (25em + 2em margin = 27em) lives as a flex sibling of
   entity-contents. Using calc(100% + 27em) mirrors the same trick already used
   on the links bar to overflow past the image column.
   At < 992px Quarto switches about-entity to column-reverse — no image beside
   entity-contents — so the overflow is reset to plain 100%. */
.quarto-about-solana .about-contents {
  width: calc(100% + 27em) !important;
  max-width: none !important;
  padding-right: 0 !important;
}

/* Profile photo — desktop base. Declared BEFORE the media queries so the mobile
   overrides below actually win. (A base rule placed AFTER @media overrides the
   media rules at every width — which is exactly what shrank the mobile photo.) */
img.about-image.rounded {
  width: 25em !important;
  margin-top: 3em !important;
  margin-left: 2em !important;
  opacity: 0;
  animation: cvImageIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.18s forwards;
}

@media (max-width: 991.98px) {
  /* Hero section */
  .quarto-about-solana {
    padding-top: 5em !important;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  /* Image stacks above entity-contents — no sibling stealing width */
  .quarto-about-solana .about-contents {
    width: 100% !important;
  }

  /* Allow Quarto's mobile centering to take over */
  div.about-entity {
    align-items: center !important;
  }

  /* Profile photo on mobile. Quarto owns the size via a HIGHER-specificity inline
     rule — `div.quarto-about-solana .about-entity .about-image` (0,3,1) with
     max-width: 42% — so a plain `img.about-image.rounded` (0,2,1) override loses
     even with !important. Match that selector (+ .rounded → 0,4,2) to win: lift
     the 42% cap and set a prominent size (≈64vw, ~250px @390px). */
  div.quarto-about-solana .about-entity img.about-image.rounded {
    width: clamp(240px, 64vw, 340px) !important;
    max-width: none !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1em !important;
  }

  /* Scale down the name heading */
  div.quarto-title h1.title {
    font-size: 1.8em !important;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .quarto-about-solana {
    padding-top: 4em !important;
  }
}

@keyframes cvImageIn {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* Horizontal flex wrap for links — override Quarto solana default */
.quarto-about-solana .about-entity .about-links {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px 16px !important;
  justify-content: flex-start !important;
}

@keyframes link-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Base: colored text + staggered entrance */
a.about-link {
  position: relative;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  font-size: 1.05rem !important;
  opacity: 0;
  animation: link-in 0.45s ease forwards;
  transition: filter 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Soft radial halo behind the link fades in on hover */
a.about-link::after {
  content: '';
  position: absolute;
  inset: -5px -10px;
  border-radius: 8px;
  background: radial-gradient(ellipse at center, currentColor 0%, transparent 68%);
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}
a.about-link:hover::after {
  opacity: 0.14;
}

a.about-link:hover {
  filter: brightness(1.25);
  cursor: pointer;
}

/* Per-link colors + staggered delays
   Order: Stanford Profile, Mail, ORCID, Google Scholar, GitHub, LinkedIn, X */
a.about-link:nth-child(1) { color: #8C1515 !important; animation-delay: 0.62s; } /* Stanford cardinal */
a.about-link:nth-child(2) { color: #EA4335 !important; animation-delay: 0.68s; } /* Gmail red */
a.about-link:nth-child(3) { color: #A6CE39 !important; animation-delay: 0.74s; } /* ORCID green */
a.about-link:nth-child(4) { color: #4285F4 !important; animation-delay: 0.80s; } /* Google blue */
a.about-link:nth-child(5) { color: #e6edf3 !important; animation-delay: 0.86s; } /* GitHub near-white */
a.about-link:nth-child(6) { color: #0A66C2 !important; animation-delay: 0.92s; } /* LinkedIn blue */
a.about-link:nth-child(7) { color: #e7e9ea !important; animation-delay: 0.98s; } /* X near-white */
a.about-link:nth-child(8) { color: #00C030 !important; animation-delay: 1.04s; } /* Letterboxd green */

/* Hover glow using the same color as the text */
a.about-link:nth-child(1):hover { text-shadow: 0 0 10px #8C1515; }
a.about-link:nth-child(2):hover { text-shadow: 0 0 10px #EA4335; }
a.about-link:nth-child(3):hover { text-shadow: 0 0 10px #A6CE39; }
a.about-link:nth-child(4):hover { text-shadow: 0 0 10px #4285F4; }
a.about-link:nth-child(5):hover { text-shadow: 0 0 10px #e6edf3; }
a.about-link:nth-child(6):hover { text-shadow: 0 0 10px #0A66C2; }
a.about-link:nth-child(7):hover { text-shadow: 0 0 10px #e7e9ea; }
a.about-link:nth-child(8):hover { text-shadow: 0 0 10px #00C030; }


/* keep your font imports and global rules as-is */

/* ===== HORIZONTAL CARD + PRESERVED HOVER ===== */
.card {
  /* layout */
  --imgW: 40%;                  /* left image width (tweak as needed) */
  display: flex;
  flex-direction: row;
  align-items: stretch;

  /* size & visuals (kept from your original, with small tweaks) */
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  height: 150px;                /* card height now controls image height */
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
  margin-right: 25px;
  transition:
    transform .55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow .55s ease;
  will-change: transform;
  box-shadow: 0px 13px 10px -7px rgba(0, 0, 0,0.1);
}
.card:hover {
  box-shadow: 0px 30px 18px -8px rgba(0, 0, 0,0.1);
  transform: scale(1.10, 1.10);
}

/* left image pane (base) */
.card__img {
   visibility: hidden;          /* HIDE the background */
  position: relative;
  width: var(--imgW);
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* hover overlay: starts as left image width, expands to full card on hover */
.card__img--hover {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--imgW);           /* start covering just the image area */
  height: 100%;                 /* full card height */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
   transition:
    width .60s cubic-bezier(0.22, 1, 0.36, 1),
    opacity .45s ease-in-out;
  opacity: 1;                   /* visible image */
  z-index: 1;                   /* under the text, above base image */
  pointer-events: none;         /* don’t block anchor hover */
  border-radius: 12px;          /* full rounding; will cover entire card on hover */
}


.card__info img {
  display: block;
  max-width: 50%;
  margin-bottom: 6px;
}

.card__category {
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.card__title {
  font-size: 13px;

}

.card__by {
  font-size: 12px;
}

.card:hover .card__img--hover {
  width: 100%;                  /* expands to cover the text box too */
  opacity: 0.3;                 /* same dim effect as your vertical version */
}

/* text box on the right */
.card__info {
  z-index: 2;                   /* above the overlay so text is readable */
  width: calc(100% - var(--imgW));
  background-color: #fff;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 0;
  padding: 8px 12px;    
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background-color .45s ease;
  justify-content: center;      /* vertical centering */
}

/* keep original “image shows through under text” behavior */
.card:hover .card__info {
  background-color: transparent;
  position: relative;
}

/* keep this, but scope width to the image side so it doesn’t stretch over text initially */
.card__info-hover {
  position: absolute;
  padding: 16px;
  width: var(--imgW);           /* only over image area */
  opacity: 0;
  top: 0;
  left: 0;
  z-index: 1;
}
.card:hover .card__info-hover {
  opacity: 1;
}

/* REMOVE vertical-only heights so they don’t fight with horizontal layout */
.card__img,
.card__img--hover {
  /* override the old fixed 235px height */
  height: 100%;
}

/* keep your image assignments */
.card--1 .card__img, .card--1 .card__img--hover {
  background-image: url('images/stanford_quad.jpg');
}
.card--2 .card__img, .card--2 .card__img--hover {
  background-image: url('images/cide_region_centro.png');
}

.card--3 .card__img, .card--3 .card__img--hover {
  background-image: url('images/munich.png');
}

.card--4 .card__img, .card--4 .card__img--hover {
  background-image: url('images/btor.jpg');
}

.card--5 .card__img, .card--5 .card__img--hover {
  background-image: url('images/cide_ppd.jpg');
}

/* optional: nicer wrap if multiple cards */
.cards {
  display: grid;                                     /* was flex */
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* two equal columns */
  column-gap: 360px;                                         /* keeps your spacing */
  max-width: 1200px;                                  /* optional: wider than 820 */
  margin: 0 auto;                                    /* center the grid */
  justify-content: initial;                          /* no need to center with grid */
  flex-wrap: initial;                                 /* grid doesn't use this, harmless */
}

/* responsive: stack vertically on small screens (keeps your hover effect) */
@media (max-width: 640px) {
  .card {
    --imgW: 100%;
    flex-direction: column;
    height: auto;
  }
  .card__img {
    height: 180px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 0;
  }
  .card__img--hover {
    width: 100%;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 0;
  }
  .card__info {
    width: 100%;
    border-top-right-radius: 0;
    border-bottom-left-radius: 12px;
  }
}


.education {
  width: 100% !important;
  margin-top: 1.5em;
}


.edu-link {
  display: contents;          /* keeps your grid structure intact */
  text-decoration: none;      /* remove underline */
  color: inherit;             /* keep your original text color */
}

.edu-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
  gap: 24px;
  width: 100%;           /* stretch grid across section */
  list-style: none;    /* remove bullets */
  margin: 0;           /* remove default margins */
  padding: 0;  
}


.edu-row {
  border-top: none;  /* remove old borders */
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0,0,0,0.03);  /* subtle background */
  border-radius: 8px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}



.edu-row:first-child {
  border-top: none;
}

/* when hovering, the whole row reacts */
.edu-row:hover {
  transform: translateX(4px);
}


/* logo styling */
.edu-logo img {
  width: 70%;        /* takes full width of its grid column */
  max-width: 70px;    /* prevents it from getting too large */
  height: auto;       /* keeps proportions */
  object-fit: contain;
  border-radius: 4px;
  opacity: 0.85;
  transition: opacity .25s ease;
}
.edu-tribute {
  font-size: 0.68rem;
  opacity: 0.45;
  font-style: italic;
  margin-top: 3px;
}


.edu-row:hover .edu-icon {
  opacity: 1;
}


.edu-main {
  line-height: 1.3;
  margin-left: 4px;   /* nudges text further from logo */
  font-size: .8rem;
}

.edu-main strong {
  font-weight: 300;
  font-size: .8rem;
}

.edu-sub {
  font-size: 0.75rem;
  opacity: 0.75;
  margin-top: 2px;
}

.edu-dates {
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0.8;
  margin-left: 10px;
  transition: opacity .25s ease;
}

.edu-row:hover .edu-dates {
  opacity: 1;
}

/* dark mode support */
@media (prefers-color-scheme: dark) {
  .edu-row { border-top-color: rgba(255,255,255,0.12); }
}

/* ===== MOBILE: stack cards + education ===== */
@media (max-width: 640px) {
  /* Experience */
  .cards {
    display: grid;
    grid-template-columns: 1fr;   /* 1 column */
    row-gap: 16px;
    column-gap: 0;
  }
  .cards .card {
    width: 100% !important;       /* override wide desktop setting */
    max-width: none !important;
    height: auto;
    margin-right: 0 !important;
  }

  /* Education */
  .edu-list {
    display: grid;
    grid-template-columns: 1fr !important;  /* force single column */
    gap: 12px;
  }
  .edu-row {
    padding: 12px;
    gap: 10px;
  }
  .edu-logo img {
    max-width: 48px;
    width: auto; height: auto;
  }
}

/* At 560px and below: stack + order = image → main → dates */
@media (max-width: 560px) {
  .edu-row {
    display: flex;              /* already set, repeating for clarity */
    flex-direction: column;     /* stack items vertically */
    align-items: flex-start;
  }

  /* Because .edu-link uses display: contents, these children
     are direct flex items and we can order them */
  .edu-logo  { order: 0; }
  .edu-main  { order: 1; }
  .edu-dates { order: 2; }

  /* Tidy mobile sizing */
  .edu-logo img {
    width: 72px;
    height: auto;
  }
  .edu-main  { margin-top: 6px; }

}

.education { container-type: inline-size; }

@container (max-width: 560px) {
  .edu-row { flex-direction: column; align-items: flex-start; }
  .edu-logo  { order: 0; }
  .edu-main  { order: 1; }
  .edu-dates { order: 2; }
}


/* ===== TABLET: 2 cols for cards, 1 col for education ===== */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Experience */
  .cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* 2 columns */
    column-gap: 40px;
    row-gap: 20px;
  }
  .cards .card {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
  }

  /* Education */
  .edu-list {
    display: grid;
    grid-template-columns: 1fr !important;  /* single column for readability */
    gap: 16px;
  }
  .edu-logo img { max-width: 60px; }
}


/* let effects breathe */
.cards, .education, .edu-list, .content, .column-page, .entity-contents {
  overflow: visible !important;
}

/* card scaling shouldn’t get sliced */
.card { overflow: visible; }

/* mobile fixed background fallback */
@supports (-webkit-touch-callout: none) {
  .bg-fixed { background-attachment: scroll; }
}

/* avoid mobile/tablet horizontal chopping when cards are very wide */
@media (max-width: 1024px) {
  .cards .card { width: 50% !important; max-width: none !important; }
  html, body { overflow-x: hidden; }
}
/* ===========================
   TABLET + MOBILE (<= 1024px)
   =========================== */
@media (max-width: 1024px) {
  /* ---- Education ---- */
  section.education {
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
  }

  .edu-list {
    display: grid;
    grid-template-columns: 1fr !important;  /* single column */
    gap: 14px;                               /* comfy spacing */
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .edu-row {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;                  /* tighter gap */
    padding: 10px 12px;        /* slimmer row */
    background: rgba(0,0,0,0.03);
    border-radius: 8px;
    overflow: hidden;          /* keep content inside grey bg */
  }

  .edu-logo img {
    width: clamp(24px, 7vw, 60px);
    height: auto;
    object-fit: contain;
    flex: 0 0 auto;
  }

  .edu-main {
    flex: 1 1 auto;
    min-width: 0;              /* allow wrapping/truncation */
    line-height: 1.3;
  }

  .edu-dates {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-left: 8px;
    font-size: 0.9rem;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;   /* avoid disappearing when tight */
  }

  /* ---- Experience (cards) ---- */
  .cards {
    display: grid;
    grid-template-columns: 1fr !important;  /* single column */
    row-gap: 20px;
    column-gap: 0;
    max-width: 100%;
    margin: 0 auto;
  }

  .cards .card {
    width: 100% !important;    /* override wide desktop width only here */
    max-width: none !important;
    height: auto;
    margin-right: 0 !important;
  }
}



/* =========================================
   SMALL MOBILE (<= 560px): wrap date below
   ========================================= */
@media (max-width: 560px) {
  .edu-row { flex-wrap: wrap; }

  .edu-dates {
    order: 3;                  /* move date under text */
    width: 100%;
    margin-left: 0;
    white-space: normal;       /* allow multi-line dates */
    text-align: left;
    opacity: 0.9;
  }
}



  /* --- your page backdrop (unchanged) --- */
  :root{
    --bg: #222C32;
    --panel: #2B343A;
    --card: #333C42;
     --rail: #1A237E;
      --dot:  #283593;
  }
  html, body { height: 100%; margin: 0; background: var(--bg); }
  body { font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }

  /* ===== Timeline container (full width) ===== */
  .cd-container {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
    background: transparent;
    padding: 0 4%;         /* gentle side padding */
  }

  /* Center rail */
  #cd-timeline {
    position: relative;
    padding: 2em 0;
    margin: 3em 0;
  }
  #cd-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;             /* center rail */
    transform: translateX(-2px);
    height: 100%;
    width: 4px;
    background: var(--rail);
  }

  /* One timeline block */
  .cd-timeline-block {
    position: relative;
    margin: 3em 0;
  }
  .cd-timeline-block::after { content: ""; display: table; clear: both; }

  /* Dot on the rail */
  .cd-timeline-img {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--dot);
    box-shadow: 0 0 0 4px var(--rail),
                inset 0 2px 0 rgba(0,0,0,.08),
                0 3px 0 4px rgba(0,0,0,.05);
  }

  /* ===== Content wrapper that holds YOUR CARD ===== */
  .cd-timeline-content {
    /* make the wrapper invisible so your card style shows */
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0;
    position: relative;
    overflow: visible;     /* let your wide (300%) card spill out if needed */
    width: 46%;            /* ~half screen per side on large screens */
    max-width: 46% !important;
  }
  .cd-timeline-content::before { display: none; } /* remove default arrow */

  /* Left/right placement for alternating blocks */
  @media (min-width: 1170px) {
    .cd-timeline-block.cd-left  .cd-timeline-content { float: left;  margin-right: 6%; }
    .cd-timeline-block.cd-right .cd-timeline-content { float: right; margin-left:  6%; }
  }

  /* Reveal-on-scroll animation (applied to wrapper, not your card) */
  .reveal { opacity: 0; transform: translateY(16px); }
  .reveal.visible { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
  @media (min-width:1170px){
    .cd-timeline-block.cd-left  .reveal { transform: translateX(-24px); }
    .cd-timeline-block.cd-right .reveal { transform: translateX( 24px); }
    .cd-timeline-block .reveal.visible { transform: none; }
  }
  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal.visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  }

  /* Ensure your anchor behaves as a block so the card can size itself */
  .cd-timeline-content > a.card_link { display: block; }
  


/* =================================================================
   Mobile/Tablet: < 1170px — centered rail design
   Rail stays visible down the middle, dots punctuate it, year badges
   ride on it, and cards stack full-width below each dot. Same visual
   language as desktop, just collapsed to a single column.
   ================================================================= */
@media (max-width: 1169.98px) {
  #cd-timeline {
    padding: 1.5em 0 !important;
    margin: 1em 0 2em !important;
    display: block;
    position: relative;
  }

  /* Center rail — visible, JS-driven height animation still applies */
  #cd-timeline::before {
    display: block !important;
    left: 50%;
    transform: translateX(-2px);
  }

  /* Dots — centered on the rail at the top of each block */
  #cd-timeline .cd-timeline-img {
    display: block !important;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }

  /* Year badges stay visible on the rail */
  .cd-timeline-year-block { display: block; }

  /* Each block: dot floats absolutely at top; card flows below */
  #cd-timeline .cd-timeline-block {
    position: relative;
    margin: 0 0 36px !important;
    padding-top: 50px;
    display: block;
    text-align: left;
  }

  /* Card wrapper — centered, no float, full-content width */
  #cd-timeline .cd-timeline-content {
    float: none !important;
    width: 92% !important;
    max-width: 92% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Neutralize inline left-nudges from individual blocks */
  #cd-timeline .cd-timeline-content[style*="margin-left"] {
    margin-left: auto !important;
  }

  /* Inner cards fill the wrapper */
  #cd-timeline .cd-timeline-content .card,
  #cd-timeline .cd-timeline-content .card[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  html, body { overflow-x: hidden; }
}

/* Tablet sweet spot: tighter card width since rail is more visible */
@media (min-width: 989.98px) and (max-width: 1169.98px) {
  #cd-timeline .cd-timeline-content {
    width: 78% !important;
    max-width: 78% !important;
  }
}

/* Other card sections (.cards, .projects, .portfolio) — stacked grid */
@media (max-width: 1169.98px) {
  .cards-below,
  .cards,
  .projects,
  .portfolio {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 20px;
    column-gap: 0;
    max-width: 80%;
    margin: 0 auto;
  }
  .cards-below .card,
  .cards .card,
  .projects .card,
  .portfolio .card {
    width: 80% !important;
    max-width: 80% !important;
    height: auto;
    margin: 0 !important;
    overflow: visible !important;
  }
}

/* ===== Year badges on the timeline rail ===== */
.cd-timeline-year-block {
  position: relative;
  margin: 0.1em 0;
  height: 2.6em;
  pointer-events: none;
  clear: both;
}

.cd-timeline-year-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.82);
  z-index: 4;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(10, 14, 22, 0.78);
  border: 1px solid rgba(40, 53, 147, 0.5);
  border-radius: 999px;
  padding: 4px 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.55s ease,
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.cd-timeline-year-label.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* "Present" badge — green breathing glow */
.cd-timeline-year-label--present {
  color: rgba(100, 255, 160, 0.85);
  border-color: rgba(100, 255, 160, 0.35);
  background: rgba(10, 30, 20, 0.82);
}
.cd-timeline-year-label--present.visible {
  animation: present-breathe 2.8s ease-in-out infinite;
}
@keyframes present-breathe {
  0%, 100% { box-shadow: 0 0 6px rgba(100, 255, 160, 0.15); }
  50%      { box-shadow: 0 0 18px rgba(100, 255, 160, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .cd-timeline-year-label--present.visible { animation: none; }
}

/* ===== Animated rail draw on scroll ===== */
#cd-timeline {
  --rail-h: 0%;
}
#cd-timeline::before {
  height: var(--rail-h);
  transition: height 0.15s ease-out;
}

/* Year badges stay visible at all widths — mobile keeps the rail */

/* ============================================
   CV section headers — icon + horizontal accent line
   ============================================ */
#quarto-content h1:not(.title) {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: 'Quicksand', sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: #ffffff;
  margin: 2.5rem 0 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(100, 181, 246, 0.25);
  position: relative;
  /* scroll entrance start state */
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#quarto-content h1.cv-h1-visible {
  opacity: 1;
  transform: translateX(0);
}

#quarto-content h1:not(.title)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #64B5F6, #42A5F5);
  border-radius: 2px;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

#quarto-content h1.cv-h1-visible::after {
  width: 70px;
}

#quarto-content h1:hover::after {
  width: 140px;
  transition-delay: 0s;
}

#quarto-content h1:not(.title) i,
#quarto-content h1:not(.title) .fa,
#quarto-content h1:not(.title) .fas,
#quarto-content h1:not(.title) .fa-solid {
  color: #64B5F6;
  font-size: 0.85em;
  margin-right: 0.2rem;
}

@media (max-width: 600px) {
  #quarto-content h1:not(.title) {
    font-size: 1.3rem;
    margin: 2rem 0 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #quarto-content h1:not(.title) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  #quarto-content h1:not(.title)::after {
    width: 70px !important;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
}



/* ============================================
   CV page-load entrance sequence
   ============================================ */

/* 1. Title h1 — slides in from left (mirrors image entering from right) */
#title-block-header h1.title {
  opacity: 0;
  transform: translateX(-20px);
  animation: cvTitleIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards;
  /* undo section-header styles that bleed in from #quarto-content h1 */
  display: block !important;
  border-bottom: none !important;
  font-size: 2.5em !important;
  letter-spacing: normal !important;
  padding-bottom: 0 !important;
}

@keyframes cvTitleIn {
  to { opacity: 1; transform: translateX(0); }
}

/* 2. Divider hr — draws from left */
.quarto-about-solana .entity-contents hr {
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  animation: cvHrDraw 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

@keyframes cvHrDraw {
  to { opacity: 1; transform: scaleX(1); }
}

/* 3. Bio — whole block enters as one unit */
.bio-landing {
  opacity: 0;
  transform: translateY(16px);
  animation: bioParaIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards;
}

@keyframes bioParaIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #title-block-header h1.title,
  .quarto-about-solana .entity-contents hr,
  .bio-landing {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  img.about-image.rounded,
  a.about-link {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================
   Mobile constraints — keep 150%-wide desktop
   containers from clipping on narrow viewports
   ============================================ */
@media (max-width: 1169.98px) {
  .cd-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
  }
  section.education,
  .education {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 600px) {
  .cards {
    column-gap: 0 !important;
    row-gap: 16px !important;
  }
  .cd-container {
    padding: 0 0.5rem !important;
  }
}