:root{--bg:#000;--card:#090b0b;--card2:#0c0f0f;--text:#f4f5f3;--muted:#a7adaa;--line:rgba(255,255,255,.12);--gold:#d9ae4f;--gold-soft:rgba(217,174,79,.55);--sans:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--serif:"Playfair Display",Georgia,serif}
*{box-sizing:border-box;margin:0;padding:0}html{background:#000;scroll-behavior:smooth}body{background:#000;color:var(--text);font-family:var(--sans);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}body::-webkit-scrollbar{width:0;height:0}body::-webkit-scrollbar-thumb{background:transparent}a{color:inherit;text-decoration:none}button{font:inherit}p{line-height:1.55}.topbar{position:fixed;z-index:100;top:0;left:0;right:0;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:linear-gradient(180deg,rgba(0,0,0,.88),rgba(0,0,0,0));backdrop-filter:blur(5px)}.brand{font-size:1.05rem;font-weight:700;letter-spacing:-.03em;display:inline-flex;align-items:center;white-space:nowrap}.brand-name{color:#f2f4f1}.brand-mark{color:var(--gold)}.nav-links{display:flex;gap:34px;align-items:center}.nav-links a,.talk-link{font-size:.78rem;color:#c7ccca;transition:color .25s}.nav-links a:hover,.nav-links a.active,.talk-link:hover{color:var(--gold)}.nav-actions{display:flex;gap:12px;align-items:center}.resume-link{padding:12px 17px;border:1px solid var(--gold-soft);border-radius:999px;color:var(--gold);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.talk-link{padding:12px 16px;border:1px solid var(--line);border-radius:999px}.hero{min-height:100svh;height:100svh;padding:100px max(7vw,34px) 50px;display:flex;align-items:center;position:relative;background:#000}.hero-grid{width:min(1180px,100%);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5vw}.eyebrow,.section-kicker,.project-type{color:var(--gold);text-transform:uppercase;letter-spacing:.15em;font-size:.66rem;font-weight:700}.hero h1{font-size:clamp(4rem,7.5vw,7.5rem);line-height:.86;letter-spacing:-.075em;margin:17px 0 30px}.hero h1 em,.contact-card h2 em{font-family:var(--serif);font-weight:600;color:var(--gold);font-style:italic}.hero h1 span{color:var(--gold)}.hero-text{max-width:610px;color:#b8bfbc;font-size:1.03rem}.hero-actions,.contact-links{display:flex;gap:12px;margin-top:30px}.button{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;text-transform:uppercase;letter-spacing:.08em;font-size:.67rem;font-weight:700;border:1px solid var(--line)}.button.primary{background:#f3f5f2;color:#050606;border-color:#f3f5f2}.button.ghost{color:#d6dbd8}.scroll-note{position:absolute;bottom:28px;left:max(7vw,34px);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#727a77}.scroll-note span{color:var(--gold);font-size:1rem}.hero-orbit{position:relative;width:min(440px,70vw);aspect-ratio:1;margin:auto}.orbit{position:absolute;border:1px solid rgba(217,174,79,.22);border-radius:50%;inset:10%}.orbit-b{inset:24%;border-color:rgba(130,170,155,.2)}.core{position:absolute;inset:37%;border-radius:50%;background:linear-gradient(145deg,#17211e,#0b0e0d);border:1px solid rgba(217,174,79,.18);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:.58rem;letter-spacing:.14em;color:#bfc8c4}.orbit-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(217,174,79,.5)}.dot-a{top:12%;right:21%}.dot-b{right:28%;bottom:27%;background:#8db8a5}.section-wrap{position:relative;height:112svh}.card{position:sticky;top:88px;width:90%;height:calc(100svh - 150px);margin:0 auto;min-height:0;overflow:hidden;background:linear-gradient(145deg,rgba(10,12,12,.985),rgba(4,6,6,.985));border:1px solid rgba(217,174,79,.55);border-radius:44px;box-shadow:0 35px 100px rgba(0,0,0,.6);transform-origin:center top;will-change:transform,width,height,border-radius,opacity,filter}.about-card{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;padding:clamp(50px,6vw,92px);gap:30px}.about-copy{max-width:540px}.about-copy h2,.experience-card h2,.projects-card h2,.skills-card h2,.education-card h2,.contact-card h2{font-size:clamp(3.2rem,6vw,6.4rem);line-height:.92;letter-spacing:-.075em;margin:14px 0 22px}.about-text{max-width:470px;color:#b5bcb9;font-size:1.05rem}.about-links{display:flex;gap:9px;margin-top:28px}.contact-pill,.icon-pill{border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-size:.7rem}.icon-pill{min-width:43px;text-align:center;font-weight:700}.about-photo{align-self:stretch;display:flex;align-items:end;justify-content:center;overflow:hidden}.about-photo img{width:100%;height:88%;object-fit:cover;object-position:center top;mix-blend-mode:screen;filter:contrast(1.04) saturate(.7);mask-image:linear-gradient(to bottom,black 75%,transparent 100%)}.experience-card{padding:clamp(44px,5vw,78px);display:flex;flex-direction:column;justify-content:center}.experience-head{max-width:600px;margin-bottom:28px}.experience-head>div>p:last-child{color:#aeb6b2;max-width:550px}.timeline{max-width:930px;width:100%;margin:0 auto}.timeline-item{display:grid;grid-template-columns:125px 18px 1fr;column-gap:22px;position:relative;padding:22px 0}.timeline-item+.timeline-item{border-top:1px solid rgba(255,255,255,.1)}.time{color:var(--gold);font-size:.72rem;line-height:1.8;text-transform:uppercase;letter-spacing:.08em;font-weight:600}.timeline-node{width:10px;height:10px;border-radius:50%;background:var(--gold);margin-top:8px;box-shadow:0 0 15px rgba(217,174,79,.25)}.timeline-item:first-child .timeline-node:after{content:"";position:absolute;top:30px;bottom:-22px;left:129px;width:1px;background:rgba(255,255,255,.16)}.timeline-item h3{font-size:clamp(1.25rem,2vw,2rem);line-height:1.1}.timeline-item h3 span{color:var(--gold)}.timeline-item p{color:#aeb6b2;margin-top:10px;max-width:760px;font-size:.92rem}.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}.tags span{border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 9px;color:#b8bfbc;font-size:.57rem;text-transform:uppercase;letter-spacing:.06em}.projects-card{padding:clamp(42px,5vw,70px);display:flex;flex-direction:column;justify-content:center}.section-head.compact{margin-bottom:26px}.section-head p:last-child{color:#8f9895;font-size:.82rem;margin-top:8px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1080px;width:100%;margin:0 auto}.project{border:1px solid rgba(255,255,255,.1);background:rgba(10,13,13,.7);border-radius:20px;padding:25px;min-height:350px}.project-top{display:flex;justify-content:space-between;align-items:center}.project-top strong{font-size:2.2rem;color:var(--gold);letter-spacing:-.06em}.project-top span{font-size:1.25rem}.project h3{font-size:clamp(1.35rem,2vw,2rem);line-height:1.05;margin:12px 0}.project>p:not(.project-type){color:#aab2af;font-size:.76rem;line-height:1.55}.project-type{font-size:.58rem;margin-top:4px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;border-top:1px solid rgba(255,255,255,.1);margin-top:18px;padding-top:14px}.metrics strong{display:block;color:#f2f4f1;font-size:1.1rem}.metrics span{display:block;color:#777f7c;font-size:.48rem;line-height:1.3;text-transform:uppercase}.skills-card{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:55px;padding:clamp(50px,7vw,100px)}.skills-copy p:last-child{max-width:450px;color:#aeb6b2}.skill-cloud{display:flex;flex-wrap:wrap;gap:10px;align-content:center}.skill-cloud span{border:1px solid rgba(217,174,79,.22);background:rgba(255,255,255,.025);border-radius:999px;padding:11px 14px;color:#e1e5e2;font-size:.7rem}.education-card{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding:clamp(50px,7vw,110px)}.education-block{padding:28px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(255,255,255,.02)}.education-block h2{font-size:clamp(2rem,4vw,4.5rem)}.education-block>p:not(.section-kicker){color:#aeb6b2}.education-block strong{display:inline-block;color:var(--gold);margin-top:20px}.education-block ul{list-style:none;margin-top:18px;color:#b5bdb9;line-height:2}.contact-card{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(50px,9vw,130px)}.contact-card>p:not(.section-kicker){max-width:620px;color:#aeb6b2}.section-dots{position:fixed;z-index:120;right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:11px}.dot{width:7px;height:7px;border:0;border-radius:50%;background:#666d6a;cursor:pointer;transition:.3s ease}.dot.active{width:9px;height:20px;border-radius:99px;background:var(--gold);box-shadow:0 0 12px rgba(217,174,79,.35)}.footer{position:fixed;z-index:105;left:0;right:0;bottom:0;height:62px;padding:0 5vw;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);color:#666d6a;font-size:.65rem;text-transform:uppercase;letter-spacing:.12em}.fade-in-ready{opacity:0;transform:translate3d(var(--fade-x,0),var(--fade-y,30px),0);transition:opacity var(--fade-duration,.7s) cubic-bezier(.25,.1,.25,1) var(--fade-delay,0s),transform var(--fade-duration,.7s) cubic-bezier(.25,.1,.25,1) var(--fade-delay,0s);will-change:opacity,transform}.fade-in-ready.is-visible{opacity:1;transform:translate3d(0,0,0)}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fade-in-ready{opacity:1;transform:none;transition:none}.card{transition:none!important}}
@media(max-width:900px){.nav-links{gap:15px}.nav-links a:nth-child(5){display:none}.nav-actions .talk-link{display:none}.hero-grid,.about-card,.skills-card,.education-card{grid-template-columns:1fr}.hero-orbit{position:absolute;right:-18vw;bottom:7vh;width:55vw;opacity:.45}.about-photo{height:45vh}.about-photo img{height:100%}.project-grid{grid-template-columns:1fr}.project{min-height:0}.experience-card,.projects-card{padding:34px}.timeline-item{grid-template-columns:90px 14px 1fr;column-gap:13px}.timeline-item:first-child .timeline-node:after{left:98px}.metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.topbar{height:64px;padding:0 16px}.brand{font-size:.95rem}.nav-links{display:none}.resume-link{font-size:.58rem;padding:9px 11px}.hero{padding:90px 22px 35px}.hero h1{font-size:clamp(3.5rem,15vw,5.2rem)}.hero-text{font-size:.9rem}.hero-orbit{display:none}.card{width:94%;height:calc(100svh - 118px);top:74px;border-radius:28px}.about-card{padding:30px 25px}.about-photo{height:34vh;order:-1}.about-copy h2,.experience-card h2,.projects-card h2,.skills-card h2,.education-card h2,.contact-card h2{font-size:clamp(2.7rem,13vw,4.4rem)}.experience-card,.projects-card,.skills-card,.education-card,.contact-card{padding:30px 25px}.timeline-item{grid-template-columns:1fr;gap:8px}.timeline-node{display:none}.timeline-item:first-child .timeline-node:after{display:none}.project-grid{gap:10px}.project{padding:20px}.skill-cloud{gap:7px}.skill-cloud span{padding:8px 10px;font-size:.62rem}.section-dots{right:10px;gap:8px}.dot{width:6px;height:6px}.dot.active{width:8px;height:17px}.footer{height:56px;padding:0 20px}}

/* About statement — reference-matched editorial typography */
.about-statement{
  max-width:760px;
  font-family:Inter,system-ui,sans-serif;
  font-size:clamp(3.4rem,6.4vw,7.1rem)!important;
  line-height:.88!important;
  letter-spacing:-.075em!important;
  font-weight:800;
  margin:18px 0 30px!important;
  color:#f3f6f4;
}
.about-statement em{
  font-family:"Playfair Display",Georgia,serif;
  font-style:italic;
  font-weight:500;
  color:#8ec6ae;
  letter-spacing:-.055em;
}
.about-text{
  max-width:760px!important;
  font-size:clamp(1rem,1.45vw,1.25rem)!important;
  line-height:1.55!important;
  color:#aeb7b3!important;
}
.about-card .about-copy{
  max-width:800px;
  align-self:center;
}
.about-card .about-photo{
  min-height:390px;
}
@media (max-width:900px){
  .about-statement{
    font-size:clamp(3rem,9vw,5rem)!important;
  }
}
@media (max-width:600px){
  .desktop-break{display:none}
  .about-statement{
    font-size:clamp(2.7rem,12vw,4.2rem)!important;
    line-height:.92!important;
  }
}

/* Brand is always the full name; never collapse it to initials. */
.brand-name{display:inline!important}.brand-mark{display:inline!important}


/* Header/footer-safe card viewport. Cards never pass underneath either fixed bar. */
:root{--nav-h:76px;--footer-h:62px;--card-gap:12px}
.topbar{height:var(--nav-h)}
.card{top:calc(var(--nav-h) + var(--card-gap));height:calc(100svh - var(--nav-h) - var(--footer-h) - (var(--card-gap) * 2));max-height:calc(100svh - var(--nav-h) - var(--footer-h) - (var(--card-gap) * 2))}
.section-wrap{height:112svh}
.footer{height:var(--footer-h)}
@media(max-width:620px){
  :root{--nav-h:64px;--footer-h:56px;--card-gap:10px}
  .card{top:calc(var(--nav-h) + var(--card-gap));height:calc(100svh - var(--nav-h) - var(--footer-h) - (var(--card-gap) * 2));max-height:calc(100svh - var(--nav-h) - var(--footer-h) - (var(--card-gap) * 2))}
  .footer{height:var(--footer-h)}
}

/* Final polish: real GitHub mark + permanently rounded section cards. */
.github-pill svg{width:16px;height:16px;display:block;fill:currentColor;margin:auto}
.github-pill{display:inline-flex;align-items:center;justify-content:center}
/* Cards remain rounded even when fully settled; never collapse to square corners. */
.card{border-radius:34px!important}
@media(max-width:620px){.card{border-radius:26px!important}}


/* =========================================================
   V19 — SMOOTH CINEMATIC CARD STACK
   Fixed header/footer define the safe viewport. Cards never
   become square or slide under either fixed bar.
   ========================================================= */
:root{
  --header-h:76px;
  --footer-h:62px;
  --card-gap:24px;
}

main#site{
  position:relative;
  width:100%;
  background:#000;
}

/* Give each section enough scroll distance for a calm, cinematic
   hand-off instead of a fast snap. */
.section-wrap{
  height:132svh;
  min-height:760px;
  position:relative;
}

/* Cards are always cards — rounded at rest AND in transit. */
.section-wrap > .card{
  position:sticky;
  top:calc(var(--header-h) + var(--card-gap));
  width:min(92%, 1480px);
  height:calc(100svh - var(--header-h) - var(--footer-h) - (var(--card-gap) * 2));
  min-height:520px;
  max-height:calc(100svh - var(--header-h) - var(--footer-h) - (var(--card-gap) * 2));
  margin:0 auto;
  border-radius:38px !important;
  overflow:hidden;
  transform-origin:center center;
  will-change:transform,opacity,filter;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  contain:layout paint;
}

/* Safe internal spacing so content never collides with the fixed bars. */
.about-card{
  padding:clamp(34px,4.6vw,70px);
  gap:clamp(22px,4vw,60px);
}
.about-copy h2,
.experience-card h2,
.projects-card h2,
.skills-card h2,
.education-card h2,
.contact-card h2{
  margin-top:12px;
}
.about-statement{
  font-size:clamp(3rem,5.45vw,6rem) !important;
  line-height:.9 !important;
  margin-bottom:24px !important;
}
.about-text{
  font-size:clamp(.9rem,1.2vw,1.08rem) !important;
}
.about-photo{
  min-height:0 !important;
  height:100%;
}
.about-photo img{
  height:92%;
  object-fit:cover;
  object-position:center top;
}

/* Keep project/experience/skills content inside the safe card. */
.experience-card,
.projects-card,
.skills-card,
.education-card,
.contact-card{
  padding:clamp(34px,4.4vw,68px);
}
.experience-card{justify-content:center;}
.projects-card{justify-content:center;}
.skills-card{align-items:center;}
.education-card{align-items:center;}

/* The card border stays visible at rest. */
.section-wrap > .card{
  border:1px solid rgba(217,174,79,.48);
  box-shadow:0 28px 90px rgba(0,0,0,.52);
}

/* Real GitHub icon */
.github-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.github-pill svg{
  width:15px;
  height:15px;
  display:block;
}

/* Dots stay a visual indicator, never a scrollbar. */
.section-dots{
  pointer-events:auto;
  right:22px;
}

/* Fixed bars always sit above cards. */
.topbar{z-index:200;}
.footer{z-index:200;}

/* Mobile safe area */
@media(max-width:900px){
  :root{--header-h:64px;--footer-h:56px;--card-gap:16px;}
  .section-wrap{
    height:126svh;
    min-height:680px;
  }
  .section-wrap > .card{
    width:94%;
    height:calc(100svh - var(--header-h) - var(--footer-h) - (var(--card-gap) * 2));
    max-height:calc(100svh - var(--header-h) - var(--footer-h) - (var(--card-gap) * 2));
    border-radius:30px !important;
  }
  .about-card{
    padding:26px 24px;
  }
  .about-statement{
    font-size:clamp(2.5rem,9.8vw,4.5rem)!important;
  }
}

/* V20 — About spacing refinement */
.about-card{
  padding: clamp(44px,5vw,78px) clamp(48px,6vw,88px);
  gap: clamp(24px,4vw,56px);
}
.about-copy h2{
  font-size: clamp(2.85rem,5.25vw,5.65rem);
  line-height: .94;
  margin: 12px 0 20px;
}
.about-text{
  font-size: 1rem;
  line-height: 1.58;
  max-width: 500px;
}
.about-links{
  margin-top: 22px;
  gap: 8px;
}
.contact-pill,.icon-pill{
  padding: 9px 12px;
}

/* V20 — Projects: use the reference's more generous outer spacing,
   slightly smaller heading, and wider/taller project cards with cleaner
   breathing room between the header and cards. */
.projects-card{
  padding: clamp(34px,4.2vw,62px) clamp(42px,5.2vw,86px);
  justify-content: flex-start;
}
.projects-card .section-head.compact{
  margin-bottom: clamp(28px,3.5vh,42px);
}
.projects-card .section-head h2{
  font-size: clamp(3.35rem,5.6vw,5.8rem);
  line-height: .92;
  margin-bottom: 0;
}
.project-grid{
  max-width: 1230px;
  gap: 16px;
  align-self: center;
}
.project{
  min-height: 405px;
  padding: 28px 30px;
  border-radius: 22px;
}
.project-top strong{
  font-size: 2.05rem;
}
.project h3{
  font-size: clamp(1.35rem,1.9vw,1.95rem);
  margin: 13px 0 12px;
}
.project>p:not(.project-type){
  font-size: .78rem;
  line-height: 1.58;
}
.metrics{
  margin-top: 20px;
  padding-top: 15px;
}

/* Keep the card away from the fixed footer and header while preserving
   the rounded presentation. */
.section-wrap{
  height: 110svh;
}
.card{
  top: 88px;
  height: calc(100svh - 158px);
}

/* The reference keeps the projects card visually roomy rather than
   vertically crowded. */
@media(max-width:900px){
  .about-card{
    padding: 38px 30px;
  }
  .about-copy h2{
    font-size: clamp(2.5rem,9vw,4.5rem);
  }
  .projects-card{
    padding: 34px 26px;
  }
  .projects-card .section-head.compact{
    margin-bottom: 24px;
  }
  .project-grid{
    max-width: 100%;
  }
  .project{
    min-height: 0;
    padding: 24px;
  }
}

/* =========================================================
   V21 — About breathing room + Projects reference spacing
   ========================================================= */

/* ABOUT: reduce the editorial headline a little so the
   description + contact row have comfortable bottom space. */
.about-statement{
  font-size:clamp(2.75rem,4.85vw,5.45rem)!important;
  line-height:.91!important;
  margin:14px 0 20px!important;
}
.about-text{
  font-size:clamp(.88rem,1.05vw,.98rem)!important;
  line-height:1.55!important;
  max-width:650px!important;
}
.about-links{
  margin-top:18px!important;
  gap:8px;
}
.contact-pill,.icon-pill{
  padding:8px 11px!important;
}
.about-card{
  padding:clamp(30px,4vw,58px) clamp(38px,5vw,72px)!important;
}

/* PROJECTS: return to the proportions of reference image 3.
   The heading stays comfortably left, while the two project
   cards form a narrower centered grid with more black space
   around them. */
.projects-card{
  padding:30px 28px 42px!important;
  justify-content:flex-start!important;
}
.projects-card .section-head.compact{
  width:100%;
  margin-bottom:30px!important;
}
.projects-card .section-head h2{
  font-size:clamp(3.5rem,5.2vw,5.5rem)!important;
  line-height:.9!important;
  margin:0!important;
}
.projects-card .section-head p:last-child{
  margin-top:10px!important;
  font-size:.82rem!important;
}
.project-grid{
  width:min(1220px,100%)!important;
  max-width:1220px!important;
  gap:16px!important;
  margin:0 auto!important;
  align-self:center!important;
}
.project{
  min-height:420px!important;
  padding:28px!important;
  border-radius:22px!important;
}
.project-top strong{
  font-size:2rem!important;
}
.project h3{
  font-size:clamp(1.35rem,1.75vw,1.8rem)!important;
  line-height:1.05!important;
  margin:12px 0!important;
}
.project>p:not(.project-type){
  font-size:.75rem!important;
  line-height:1.55!important;
}
.metrics{
  margin-top:18px!important;
  padding-top:14px!important;
}

/* Desktop: leave generous black space below the project cards,
   matching the supplied reference rather than filling the card. */
@media(min-width:901px){
  .projects-card{
    padding-top:34px!important;
    padding-bottom:64px!important;
  }
}

/* Smaller screens retain the same hierarchy without crowding. */
@media(max-width:900px){
  .about-statement{
    font-size:clamp(2.55rem,8.2vw,4.35rem)!important;
  }
  .projects-card{
    padding:28px 24px 42px!important;
  }
  .projects-card .section-head.compact{
    margin-bottom:24px!important;
  }
  .project-grid{
    width:100%!important;
  }
  .project{
    min-height:0!important;
    padding:24px!important;
  }
}

@media(max-width:620px){
  .about-statement{
    font-size:clamp(2.35rem,10.5vw,3.8rem)!important;
  }
  .about-card{
    padding:28px 22px!important;
  }
  .projects-card{
    padding:26px 22px 36px!important;
  }
}

/* V22 — Project section micro-spacing + richer Project 01 */
.projects-card .section-head.compact{
  margin-bottom:clamp(36px,4.2vh,54px)!important;
}
.project-grid{
  margin-top:4px!important;
}
.project{
  padding:30px 32px 28px!important;
}
.project h3{
  margin-top:14px!important;
  margin-bottom:14px!important;
}
.project>p:not(.project-type){
  max-width:95%!important;
}
.project .tags{
  margin-top:18px!important;
}
.project-impact{
  margin-top:24px!important;
  padding-top:15px!important;
  display:grid!important;
}
.project-impact > div strong{
  font-size:1.18rem!important;
  letter-spacing:-.02em;
}
.project-impact > div span{
  font-size:.55rem!important;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.04em;
}
@media(max-width:900px){
  .projects-card .section-head.compact{
    margin-bottom:28px!important;
  }
  .project{
    padding:25px 24px!important;
  }
  .project-impact{
    margin-top:20px!important;
  }
}

/* V23 — final polish */

/* Projects: slightly smaller footprint, with more space below. */
.projects-card .project{
  min-height:390px !important;
  padding:26px 28px !important;
}
.projects-card .project h3{
  font-size:clamp(1.28rem,1.65vw,1.72rem) !important;
  margin:11px 0 !important;
}
.projects-card .project>p:not(.project-type){
  font-size:.73rem !important;
  line-height:1.52 !important;
}
.projects-card .metrics{
  margin-top:16px !important;
  padding-top:13px !important;
}
.projects-card{
  padding-bottom:78px !important;
}

/* Tech Stack: restore readable contrast; remove faded appearance. */
.tech-card .section-head p,
.tech-card .section-copy,
.tech-card .tech-copy,
.tech-card .tech-description{
  color:rgba(235,239,237,.78) !important;
  opacity:1 !important;
}
.tech-card h2,
.tech-card .section-head h2{
  color:#f1f4f2 !important;
  opacity:1 !important;
}
.tech-card .tech-pill,
.tech-card .skill-pill,
.tech-card .stack-pill{
  color:rgba(240,243,241,.9) !important;
  opacity:1 !important;
}

@media(max-width:900px){
  .projects-card .project{
    min-height:0 !important;
    padding:24px !important;
  }
  .projects-card{
    padding-bottom:54px !important;
  }
}

/* V24 — Tech Stack contrast: the content must remain crisp and readable. */
.skills-card{
  opacity:1 !important;
  filter:none !important;
}
.skills-card h2{
  color:#f4f6f4 !important;
  text-shadow:0 0 18px rgba(255,255,255,.025);
}
.skills-card .section-kicker{
  color:#d9ae4f !important;
  opacity:1 !important;
}
.skills-card p,
.skills-card .skills-copy p:last-child{
  color:#c7cecb !important;
  opacity:1 !important;
}
.skills-card .skill-cloud span{
  color:#eef1ef !important;
  opacity:1 !important;
  border-color:rgba(217,174,79,.34) !important;
  background:rgba(255,255,255,.035) !important;
  text-shadow:0 0 8px rgba(255,255,255,.015);
}

/* =========================================================
   V25 — Responsive mobile layout
   Keeps desktop untouched and makes About / Experience /
   Projects adapt fluidly across phone widths.
   ========================================================= */

:root{
  --mobile-side: clamp(16px, 5vw, 28px);
  --mobile-card-width: calc(100% - 24px);
  --mobile-header: 64px;
  --mobile-footer: 56px;
}

/* Tablet / small laptop: reduce density before the phone breakpoint. */
@media (max-width: 1100px){
  .about-card{
    padding: clamp(34px, 5vw, 56px);
    gap: clamp(18px, 3vw, 36px);
  }

  .about-copy h2,
  .experience-card h2,
  .projects-card h2{
    font-size: clamp(2.8rem, 6vw, 5.2rem);
  }

  .experience-card{
    padding: clamp(34px, 5vw, 58px);
  }

  .timeline{
    max-width: 100%;
  }

  .projects-card{
    padding: clamp(32px, 5vw, 58px);
  }

  .project-grid{
    max-width: 100%;
  }
}

/* Phones: stack content vertically and make each card fit the
   actual usable viewport between the fixed header and footer. */
@media (max-width: 900px){
  html, body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .topbar{
    height: var(--mobile-header);
    padding: 0 var(--mobile-side);
  }

  .nav-links{
    display: none;
  }

  .nav-actions{
    gap: 7px;
  }

  .resume-link{
    padding: 9px 12px;
    font-size: .58rem;
  }

  .hero{
    min-height: 100svh;
    height: 100svh;
    padding:
      calc(var(--mobile-header) + 20px)
      var(--mobile-side)
      calc(var(--mobile-footer) + 24px);
  }

  .hero-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hero h1{
    font-size: clamp(3.25rem, 15vw, 5.6rem);
    line-height: .86;
    margin: 12px 0 22px;
  }

  .hero-text{
    font-size: .9rem;
    max-width: 620px;
  }

  .hero-orbit{
    display: none;
  }

  /* Keep the card away from both fixed UI bars. */
  .section-wrap{
    height: 112svh;
    min-height: 760px;
  }

  .card{
    top: calc(var(--mobile-header) + 8px);
    width: var(--mobile-card-width);
    height: calc(
      100svh -
      var(--mobile-header) -
      var(--mobile-footer) -
      24px
    );
    min-height: 0;
    max-height: calc(
      100svh -
      var(--mobile-header) -
      var(--mobile-footer) -
      24px
    );
    border-radius: 28px;
  }

  /* ---------- ABOUT ---------- */
  .about-card{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    gap: 8px;
    padding:
      28px
      24px
      22px;
    overflow:hidden;
  }

  .about-copy{
    width:100%;
    max-width:none;
    display:flex;
    flex-direction:column;
  }

  .about-copy .section-kicker{
    margin-bottom: 2px;
  }

  .about-copy h2{
    font-size: clamp(2.25rem, 9.5vw, 4.25rem);
    line-height: .91;
    letter-spacing: -.065em;
    margin: 9px 0 14px;
    max-width: 100%;
  }

  .about-text{
    max-width: 100%;
    font-size: clamp(.78rem, 3.2vw, .95rem);
    line-height: 1.48;
  }

  .about-links{
    margin-top: 14px;
    gap: 7px;
    flex-wrap: wrap;
  }

  .contact-pill,
  .icon-pill{
    padding: 8px 10px;
    font-size: .58rem;
    border-radius: 10px;
  }

  /* Portrait becomes a contained lower visual rather than pushing
     the text below the viewport. */
  .about-photo{
    width:100%;
    height: min(34svh, 285px);
    min-height: 170px;
    flex: 0 0 auto;
    order: 2;
    align-self: center;
    margin-top: auto;
    overflow:hidden;
    border-radius: 18px;
  }

  .about-photo img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    mix-blend-mode:screen;
    mask-image: linear-gradient(
      to bottom,
      black 82%,
      transparent 100%
    );
  }

  /* ---------- EXPERIENCE ---------- */
  .experience-card{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:
      28px
      24px
      22px;
    overflow:hidden;
  }

  .experience-head{
    width:100%;
    max-width:none;
    margin-bottom: 10px;
  }

  .experience-card h2{
    font-size: clamp(2.35rem, 10vw, 4.4rem);
    line-height:.9;
    margin: 8px 0 12px;
  }

  .experience-head>div>p:last-child{
    max-width:100%;
    font-size:.76rem;
    line-height:1.45;
  }

  .timeline{
    width:100%;
    max-width:none;
    margin: 4px 0 0;
    overflow:visible;
  }

  .timeline-item{
    grid-template-columns: 76px 12px minmax(0,1fr);
    column-gap: 10px;
    padding: 15px 0;
  }

  .timeline-item:first-child .timeline-node:after{
    left: 85px;
    top: 27px;
    bottom: -15px;
  }

  .time{
    font-size:.56rem;
    line-height:1.55;
    word-break:normal;
  }

  .timeline-node{
    width:8px;
    height:8px;
    margin-top:6px;
  }

  .timeline-item h3{
    font-size: clamp(1rem, 4.5vw, 1.45rem);
    line-height:1.08;
  }

  .timeline-item p{
    margin-top:7px;
    font-size:.68rem;
    line-height:1.45;
  }

  .tags{
    gap:5px;
    margin-top:8px;
  }

  .tags span{
    padding:5px 7px;
    font-size:.48rem;
  }

  /* ---------- PROJECTS ---------- */
  .projects-card{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:
      28px
      24px
      22px;
    overflow:hidden;
  }

  .projects-card .section-head.compact{
    width:100%;
    margin-bottom: 17px;
  }

  .projects-card h2{
    font-size: clamp(2.4rem, 10.5vw, 4.5rem);
    line-height:.9;
    margin: 8px 0 0;
  }

  .projects-card .section-head p:last-child{
    font-size:.7rem;
    line-height:1.4;
    max-width:100%;
    margin-top:7px;
  }

  .project-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    width:100%;
    max-width:none;
    margin:0;
    overflow:visible;
  }

  .project{
    min-height:0 !important;
    height:auto;
    padding:18px 17px;
    border-radius:17px;
  }

  .project-top strong{
    font-size:1.55rem;
  }

  .project-top span{
    font-size:1rem;
  }

  .project-type{
    font-size:.48rem;
    margin-top:3px;
  }

  .project h3{
    font-size: clamp(1.05rem, 4.4vw, 1.4rem);
    line-height:1.05;
    margin:8px 0;
  }

  .project>p:not(.project-type){
    font-size:.63rem;
    line-height:1.42;
  }

  .metrics{
    grid-template-columns:repeat(4,1fr);
    gap:5px;
    margin-top:11px;
    padding-top:10px;
  }

  .metrics strong{
    font-size:.82rem;
  }

  .metrics span{
    font-size:.39rem;
    line-height:1.25;
  }

  .section-dots{
    right:7px;
    gap:7px;
  }

  .dot{
    width:5px;
    height:5px;
  }

  .dot.active{
    width:7px;
    height:15px;
  }

  .footer{
    height:var(--mobile-footer);
    padding:0 18px;
    font-size:.48rem;
    letter-spacing:.08em;
  }
}

/* Narrow phones: make typography and spacing fluid instead of
   introducing another hard layout breakpoint. */
@media (max-width: 430px){
  .card{
    width: calc(100% - 16px);
    border-radius:24px;
  }

  .about-card,
  .experience-card,
  .projects-card{
    padding-left:18px;
    padding-right:18px;
  }

  .about-copy h2{
    font-size: clamp(2.05rem, 10.2vw, 3.4rem);
  }

  .about-text{
    font-size:.72rem;
  }

  .about-photo{
    height:min(31svh,230px);
    min-height:145px;
  }

  .experience-card h2,
  .projects-card h2{
    font-size: clamp(2.15rem, 11vw, 3.55rem);
  }

  .experience-head>div>p:last-child{
    font-size:.67rem;
  }

  .timeline-item{
    grid-template-columns:64px 10px minmax(0,1fr);
    column-gap:8px;
    padding:12px 0;
  }

  .timeline-item:first-child .timeline-node:after{
    left:72px;
  }

  .timeline-item h3{
    font-size:1rem;
  }

  .timeline-item p{
    font-size:.62rem;
  }

  .project{
    padding:15px;
  }

  .project h3{
    font-size:1.02rem;
  }

  .project>p:not(.project-type){
    font-size:.59rem;
  }

  .metrics strong{
    font-size:.72rem;
  }

  .metrics span{
    font-size:.34rem;
  }
}

/* Very narrow devices: allow the portrait to shrink further and
   prevent long project text from overflowing horizontally. */
@media (max-width: 360px){
  .about-copy h2{
    font-size:2rem;
  }

  .about-photo{
    min-height:125px;
    height:27svh;
  }

  .timeline-item{
    grid-template-columns:58px 8px minmax(0,1fr);
  }

  .timeline-item:first-child .timeline-node:after{
    left:65px;
  }

  .project-grid{
    gap:7px;
  }

  .project{
    padding:13px;
  }
}

/* =========================================================
   V26 — MOBILE CONTENT / CARD FIX
   Desktop remains unchanged.
   ========================================================= */

@media (max-width: 900px){

  html, body{
    overflow-x:hidden;
    width:100%;
  }

  /* The mobile page must be allowed to grow with its content.
     Do NOT force every card into a viewport-sized clipping box. */
  main#site{
    width:100%;
    overflow:visible;
  }

  .section-wrap{
    height:auto !important;
    min-height:calc(100svh - 64px);
    padding:0 0 34px;
    overflow:visible !important;
  }

  .section-wrap > .card,
  .card{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;

    width:calc(100% - 24px) !important;

    height:auto !important;
    min-height:calc(100svh - 64px - 56px - 24px);
    max-height:none !important;

    margin:0 auto !important;

    overflow:visible !important;

    box-sizing:border-box;
    padding-bottom:34px;

    border-radius:28px !important;
  }

  /* =======================================================
     ABOUT
     ======================================================= */

  /* User requested NO portrait on mobile. */
  .about-photo{
    display:none !important;
  }

  .about-card{
    display:block !important;
    padding:30px 24px 42px !important;
  }

  .about-copy{
    width:100% !important;
    max-width:none !important;
  }

  .about-statement,
  .about-copy h2{
    font-size:clamp(2.35rem, 10.5vw, 4rem) !important;
    line-height:.93 !important;
    letter-spacing:-.065em !important;
    max-width:100% !important;
    margin:10px 0 17px !important;
  }

  .about-text{
    width:100% !important;
    max-width:none !important;
    font-size:clamp(.76rem, 3.45vw, .95rem) !important;
    line-height:1.5 !important;
  }

  .about-links{
    width:100%;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:7px !important;
    margin-top:20px !important;
    padding-bottom:4px;
  }

  .contact-pill,
  .icon-pill{
    flex:0 0 auto;
    white-space:nowrap;
  }

  /* =======================================================
     EXPERIENCE
     ======================================================= */

  .experience-card{
    display:block !important;
    padding:30px 24px 42px !important;
  }

  .experience-head{
    width:100% !important;
    max-width:none !important;
    margin-bottom:18px !important;
  }

  .experience-card h2{
    font-size:clamp(2.45rem, 11vw, 4rem) !important;
    line-height:.9 !important;
    margin:9px 0 13px !important;
  }

  .experience-head > div > p:last-child{
    width:100% !important;
    max-width:none !important;
    font-size:.76rem !important;
    line-height:1.48 !important;
  }

  .timeline{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  .timeline-item{
    display:grid !important;
    grid-template-columns:68px 10px minmax(0,1fr) !important;
    column-gap:9px !important;
    width:100% !important;
    padding:17px 0 !important;
    min-width:0 !important;
  }

  .timeline-item > *{
    min-width:0 !important;
  }

  .time{
    width:auto !important;
    font-size:.53rem !important;
    line-height:1.65 !important;
    overflow-wrap:normal !important;
  }

  .timeline-node{
    display:block !important;
    width:8px !important;
    height:8px !important;
    margin-top:5px !important;
  }

  .timeline-item:first-child .timeline-node:after{
    display:block !important;
    left:72px !important;
    top:27px !important;
    bottom:-17px !important;
  }

  .timeline-item h3{
    width:100% !important;
    font-size:clamp(1rem, 4.5vw, 1.35rem) !important;
    line-height:1.08 !important;
    overflow-wrap:normal !important;
  }

  .timeline-item p{
    width:100% !important;
    max-width:none !important;
    margin-top:7px !important;
    font-size:.67rem !important;
    line-height:1.48 !important;
    overflow-wrap:break-word !important;
  }

  .tags{
    width:100%;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:5px !important;
  }

  .tags span{
    font-size:.47rem !important;
    padding:5px 7px !important;
  }

  /* =======================================================
     PROJECTS
     ======================================================= */

  .projects-card{
    display:block !important;
    padding:30px 24px 42px !important;
  }

  .projects-card .section-head.compact{
    width:100% !important;
    margin-bottom:19px !important;
  }

  .projects-card h2{
    font-size:clamp(2.5rem, 11vw, 4rem) !important;
    line-height:.9 !important;
    margin:9px 0 0 !important;
  }

  .projects-card .section-head p:last-child{
    width:100% !important;
    max-width:none !important;
    font-size:.7rem !important;
    line-height:1.45 !important;
  }

  .project-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:none !important;
    gap:10px !important;
    margin:0 !important;
  }

  .project{
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    padding:18px 16px !important;
    border-radius:18px !important;
  }

  .project-top strong{
    font-size:1.55rem !important;
  }

  .project h3{
    font-size:clamp(1.05rem, 4.6vw, 1.35rem) !important;
    line-height:1.06 !important;
    margin:9px 0 !important;
  }

  .project > p:not(.project-type){
    font-size:.62rem !important;
    line-height:1.48 !important;
    overflow-wrap:break-word !important;
  }

  .project-impact,
  .metrics{
    width:100% !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:7px !important;
  }

  .project:nth-child(2) .metrics{
    grid-template-columns:repeat(2,1fr) !important;
  }

  .metrics strong{
    font-size:.8rem !important;
  }

  .metrics span{
    font-size:.37rem !important;
  }

  /* =======================================================
     OTHER SECTIONS — same content-safe behavior
     ======================================================= */

  .skills-card,
  .education-card,
  .contact-card{
    display:block !important;
    padding:30px 24px 42px !important;
  }

  .skills-card h2,
  .education-card h2,
  .contact-card h2{
    font-size:clamp(2.45rem, 11vw, 4rem) !important;
    line-height:.9 !important;
  }

  .skills-copy{
    width:100% !important;
    max-width:none !important;
  }

  .skill-cloud{
    width:100% !important;
    margin-top:22px;
    gap:7px !important;
  }

  .skill-cloud span{
    font-size:.58rem !important;
    padding:8px 10px !important;
  }

  .education-card{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
  }

  .education-block{
    width:100% !important;
    padding:20px !important;
  }

  .education-block h2{
    font-size:clamp(1.8rem, 8vw, 3rem) !important;
  }

  .contact-card{
    min-height:0 !important;
  height:auto !important;
  padding-bottom:28px !important;
  }

  /* Dots stay outside the content and never affect card width. */
  .section-dots{
    right:5px !important;
    z-index:120 !important;
  }

  /* Footer remains fixed, but card content gets enough bottom room. */
  .footer{
    height:56px !important;
  }
}

@media (max-width:430px){
  .section-wrap{
    padding-bottom:26px;
  }

  .section-wrap > .card,
  .card{
    width:calc(100% - 16px) !important;
    border-radius:24px !important;
    min-height:calc(100svh - 64px - 56px - 16px);
  }

  .about-card,
  .experience-card,
  .projects-card,
  .skills-card,
  .education-card,
  .contact-card{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .about-statement,
  .about-copy h2{
    font-size:clamp(2.15rem, 10.4vw, 3.35rem) !important;
  }

  .timeline-item{
    grid-template-columns:61px 9px minmax(0,1fr) !important;
    column-gap:8px !important;
  }

  .timeline-item:first-child .timeline-node:after{
    left:68px !important;
  }

  .timeline-item h3{
    font-size:1rem !important;
  }

  .timeline-item p{
    font-size:.61rem !important;
  }

  .project{
    padding:15px !important;
  }

  .project > p:not(.project-type){
    font-size:.59rem !important;
  }
}

@media (max-width:360px){
  .about-statement,
  .about-copy h2,
  .experience-card h2,
  .projects-card h2,
  .skills-card h2,
  .education-card h2,
  .contact-card h2{
    font-size:2rem !important;
  }

  .timeline-item{
    grid-template-columns:56px 8px minmax(0,1fr) !important;
  }

  .timeline-item:first-child .timeline-node:after{
    left:63px !important;
  }

  .project-impact,
  .metrics{
    gap:4px !important;
  }
}
@media (max-width: 900px) {
  /* Contact is the final section, so don't reserve another viewport
     of empty space between the card and the fixed footer. */
  .section-wrap:has(.contact-card) {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 0 !important;
  }

  .contact-card {
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 0 !important;
  }
}
@media (max-width: 1024px) {
  .section-wrap:has(.contact-card) {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .contact-card {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 48px !important;
    overflow: visible !important;
  }

  footer {
    
    z-index: 10 !important;
  }
}
@media (min-width: 1025px) {
  footer {
    position: fixed;
  }
}
@media (max-width: 1024px) {
  .section-dots {
    display: none !important;
  }

  .scroll-indicator {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   FINAL CONTACT / FOOTER FIX
   Mobile + tablet only.
   Desktop remains exactly as designed.

   IMPORTANT:
   The footer is a normal-flow element below the final section
   on non-desktop screens. The Contact card therefore cannot
   disappear underneath it.
   ========================================================= */

@media (max-width: 1024px) {

  /* ---------- FOOTER ---------- */
  .footer,
  footer.footer {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;

    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;
    transform: none !important;

    z-index: 200 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    background: rgba(0,0,0,.96) !important;
    backdrop-filter: blur(8px);
  }

  /* ---------- FINAL CONTACT WRAPPER ---------- */
  main#site > .section-wrap[data-index="6"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  /* Do NOT keep the Contact card sticky on mobile/tablet.
     Sticky positioning was the main reason it could visually
     run underneath the footer. */
  main#site > .section-wrap[data-index="6"] > .contact-card {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;

    width: calc(100% - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto !important;

    overflow: visible !important;
    transform-origin: center top !important;

    /* Enough breathing room INSIDE the card, not after it. */
    padding: 30px 24px 38px !important;
  }

  /* Keep the Contact buttons inside the card. */
  .contact-card .contact-links {
    position: relative !important;
    margin-top: 26px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    z-index: 2 !important;
  }

  /* No artificial blank viewport after the Contact card. */
  main#site > .section-wrap[data-index="6"]::after {
    content: none !important;
    display: none !important;
  }

  /* Dots are desktop-only. */
  .section-dots {
    display: none !important;
  }
}

/* ---------- PHONE-SPECIFIC ---------- */
@media (max-width: 600px) {
  main#site > .section-wrap[data-index="6"] > .contact-card {
    width: calc(100% - 24px) !important;
    padding: 28px 22px 34px !important;
    border-radius: 28px !important;
  }

  .contact-card h2 {
    margin-bottom: 18px !important;
  }

  .contact-card > p:not(.section-kicker) {
    max-width: 100% !important;
  }

  .contact-card .contact-links {
    gap: 10px !important;
    margin-top: 24px !important;
  }

  .contact-card .button {
    padding: 12px 16px !important;
  }

  .footer,
  footer.footer {
    height: 56px !important;
    min-height: 56px !important;
  }
}

/* Desktop keeps the cinematic fixed footer. */
@media (min-width: 1025px) {
  .footer,
  footer.footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 200 !important;
  }
}

/* FINAL MOBILE GAP FIX:
   The blank space before Contact comes from the previous section
   retaining a viewport-sized wrapper. Let the Education wrapper end
   immediately after its card instead of reserving another viewport. */
@media (max-width: 1024px) {
  main#site > .section-wrap[data-index="5"] {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 18px !important;
    margin-bottom: 0 !important;
  }

  main#site > .section-wrap[data-index="5"] > .education-card {
    margin-bottom: 0 !important;
  }

  main#site > .section-wrap[data-index="6"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 600px) {
  main#site > .section-wrap[data-index="5"] {
    padding-bottom: 12px !important;
  }
}

/* MOBILE CARD HEIGHT FIX
   On iPhone-sized screens the cards must grow from their content instead
   of inheriting a viewport height. This removes the large empty interiors. */
/* V27 — compact mobile cards + restored cinematic section runway.
   Card height is content-driven; the wrapper keeps a controlled runway
   so the existing JS card-transition animation can still run smoothly. */
@media (max-width: 600px) {
  .section-wrap {
    height: auto !important; /* script.js sets the exact runway after measuring content */
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  .section-wrap > .card,
  .card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    position: sticky !important;
  }

  /* Do not reserve space for the portrait on phones. */
  .about-photo {
    display: none !important;
  }

  .section-wrap:last-of-type {
    padding-bottom: 0 !important;
  }
}

/* V27 — restore the subtle hero motion seen in the reference recording. */
.hero-orbit .orbit {
  animation: orbit-breathe 8s ease-in-out infinite;
  transform-origin: center;
}

.hero-orbit .orbit-b {
  animation: orbit-breathe-reverse 11s ease-in-out infinite;
}

.hero-orbit .core {
  animation: core-pulse 5s ease-in-out infinite;
}

.hero-orbit .orbit-dot {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  offset-path: ellipse(38% 38% at 50% 50%);
  offset-rotate: 0deg;
  animation: orbit-dot 13s linear infinite;
  will-change: offset-distance;
}

.hero-orbit .dot-a {
  offset-distance: 8%;
}

.hero-orbit .dot-b {
  offset-distance: 58%;
  animation-duration: 17s;
  animation-direction: reverse;
}

@keyframes orbit-dot {
  to { offset-distance: 108%; }
}

@keyframes orbit-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.015) rotate(2deg); }
}

@keyframes orbit-breathe-reverse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(.985) rotate(-2deg); }
}

@keyframes core-pulse {
  0%, 100% { transform: scale(1); opacity: .96; }
  50% { transform: scale(1.025); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orbit .orbit,
  .hero-orbit .orbit-b,
  .hero-orbit .core,
  .hero-orbit .orbit-dot {
    animation: none !important;
  }
}

/* V28 — final mobile Contact/footer separation.
   Contact is the last card: it must finish before the footer and must not
   participate in the sticky card hand-off on phone screens. */
@media (max-width: 600px) {
  main#site > .section-wrap[data-index="6"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
  }

  main#site > .section-wrap[data-index="6"] > .contact-card {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: calc(100% - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding-bottom: 30px !important;
    overflow: visible !important;
  }

  main#site > .section-wrap[data-index="6"] .contact-links {
    margin-bottom: 0 !important;
  }

  .footer,
  footer.footer {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    margin-top: 0 !important;
  }
}


/* =====================================================
   LIGHT / DARK THEME
===================================================== */

/* Light theme overrides */
[data-theme="light"] {
  --bg: #f2efe8;
  --card: #ffffff;
  --card2: #f7f4ee;
  --text: #0e0e0e;
  --muted: #6a6d6b;
  --line: rgba(0,0,0,0.10);
  --gold: #a87c20;
  --gold-soft: rgba(168,124,32,0.45);
}

[data-theme="light"] html,
[data-theme="light"] body {
  background: var(--bg);
}

/* Smooth transition when switching */
html {
  transition: background 0.35s ease, color 0.35s ease;
}
.card,
.topbar,
.footer,
.section-wrap {
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

[data-theme="light"] body { background: var(--bg); color: var(--text); }
[data-theme="light"] main#site { background: var(--bg); }
[data-theme="light"] .topbar {
  background: linear-gradient(180deg, rgba(242,239,232,0.92), rgba(242,239,232,0));
}
[data-theme="light"] .card {
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(247,244,238,0.98));
  border-color: rgba(168,124,32,0.35);
  box-shadow: 0 20px 80px rgba(0,0,0,0.12);
}
[data-theme="light"] .footer {
  background: rgba(242,239,232,0.95);
  border-top-color: rgba(0,0,0,0.08);
  color: #999;
}
[data-theme="light"] .hero { background: var(--bg); }
[data-theme="light"] .hero h1 { color: #0e0e0e; }
[data-theme="light"] .hero-text { color: #5a5e5c; }
[data-theme="light"] .about-text { color: #5a5e5c !important; }
[data-theme="light"] .about-statement { color: #0e0e0e; }
[data-theme="light"] .timeline-item p,
[data-theme="light"] .section-head p:last-child,
[data-theme="light"] .experience-head > div > p:last-child { color: #5a5e5c; }
[data-theme="light"] .tags span { color: #444; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .skill-cloud span { color: #333; border-color: rgba(168,124,32,0.3); background: rgba(255,255,255,0.6); }
[data-theme="light"] .project { background: rgba(0,0,0,0.025); border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .project > p:not(.project-type) { color: #5a5e5c; }
[data-theme="light"] .metrics span { color: #888; }
[data-theme="light"] .metrics strong { color: #0e0e0e; }
[data-theme="light"] .education-block { background: rgba(0,0,0,0.025); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .education-block > p:not(.section-kicker) { color: #5a5e5c; }
[data-theme="light"] .contact-card > p:not(.section-kicker) { color: #5a5e5c; }
[data-theme="light"] .button.ghost { color: #333; border-color: rgba(0,0,0,0.15); }
[data-theme="light"] .button.ghost:hover { color: #0e0e0e; }
[data-theme="light"] .contact-pill, [data-theme="light"] .icon-pill { border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .nav-links a { color: #666; }
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active { color: var(--gold); }
[data-theme="light"] .talk-link { border-color: rgba(0,0,0,0.15); color: #333; }
[data-theme="light"] .scroll-note { color: #999; }
[data-theme="light"] .dot { background: #bbb; }
[data-theme="light"] .timeline-item + .timeline-item { border-top-color: rgba(0,0,0,0.08); }
[data-theme="light"] .timeline-item:first-child .timeline-node:after { background: rgba(0,0,0,0.15); }
[data-theme="light"] .about-photo img {
  mix-blend-mode: multiply;
  filter: contrast(1.05) saturate(0.85);
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line) !important;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.3s ease;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.theme-toggle:hover {
  border-color: var(--gold-soft) !important;
  background: rgba(217,174,79,0.08);
  transform: rotate(20deg);
}
.theme-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s, transform 0.3s var(--ease-out, ease);
}
/* Dark mode: show sun, hide moon */
[data-theme="dark"] .theme-icon-dark  { opacity: 1; transform: scale(1) rotate(0deg); }
[data-theme="dark"] .theme-icon-light { opacity: 0; transform: scale(0.5) rotate(30deg); }
/* Light mode: show moon, hide sun */
[data-theme="light"] .theme-icon-dark  { opacity: 0; transform: scale(0.5) rotate(-30deg); }
[data-theme="light"] .theme-icon-light { opacity: 1; transform: scale(1) rotate(0deg); }

/* =====================================================
   CUSTOM CURSOR + TRAIL
===================================================== */

/* Hide default cursor on non-touch */
@media (pointer: fine) {
  body, a, button { cursor: none !important; }
}

#cursor-wrap {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9997;
}

/* Main dot — sits exactly on cursor */
#cursor-dot {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, opacity 0.2s;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 0 8px var(--gold-soft);
}

/* Outer ring — follows with lag via JS */
#cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1.5px solid var(--gold-soft);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, opacity 0.3s, border-color 0.3s;
  pointer-events: none;
  z-index: 9998;
}

/* Hover state — ring expands, dot shrinks */
body.cur-hover #cursor-dot { width: 6px; height: 6px; opacity: 0.6; }
body.cur-hover #cursor-ring { width: 52px; height: 52px; border-color: var(--gold); }

/* Click state */
body.cur-click #cursor-dot { width: 12px; height: 12px; }
body.cur-click #cursor-ring { width: 26px; height: 26px; }

/* Trail particles spawned by JS */
.cursor-trail {
  position: fixed;
  pointer-events: none;
  z-index: 9996;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: trail-pop 0.65s ease-out forwards;
  will-change: transform, opacity;
}

@keyframes trail-pop {
  0%   { transform: translate(-50%, -50%) scale(0);    opacity: 0.9; }
  35%  { transform: translate(-50%, -50%) scale(1);    opacity: 0.7; }
  100% {
    transform: translate(
      calc(-50% + var(--trail-tx, 0px)),
      calc(-50% + var(--trail-ty, 0px))
    ) scale(0);
    opacity: 0;
  }
}

/* Light mode cursor color adjustments */
[data-theme="light"] #cursor-dot { background: var(--gold); box-shadow: 0 0 8px var(--gold-soft); }
[data-theme="light"] #cursor-ring { border-color: var(--gold-soft); }


/* =====================================================
   LIGHT THEME — contrast fixes (override !important rules)
   Earlier dark-theme fixes used !important on headings and
   pills; these win in light mode via higher specificity.
===================================================== */

/* Headings across all cards */
[data-theme="light"] .hero h1,
[data-theme="light"] .about-copy h2,
[data-theme="light"] .about-statement,
[data-theme="light"] .experience-card h2,
[data-theme="light"] .projects-card h2,
[data-theme="light"] .skills-card h2,
[data-theme="light"] .tech-card h2,
[data-theme="light"] .tech-card .section-head h2,
[data-theme="light"] .education-card h2,
[data-theme="light"] .education-block h2,
[data-theme="light"] .contact-card h2,
[data-theme="light"] .timeline-item h3,
[data-theme="light"] .project h3 {
  color: #141414 !important;
  text-shadow: none !important;
}

/* Keep italic/serif accents in the warm gold-green for light mode */
[data-theme="light"] .hero h1 em,
[data-theme="light"] .contact-card h2 em,
[data-theme="light"] .about-statement em {
  color: #7a6a1f !important;
}
[data-theme="light"] .hero h1 span,
[data-theme="light"] .timeline-item h3 span {
  color: var(--gold) !important;
}

/* Body / description text */
[data-theme="light"] .hero-text,
[data-theme="light"] .about-text,
[data-theme="light"] .skills-card p,
[data-theme="light"] .skills-card .skills-copy p:last-child,
[data-theme="light"] .tech-card .section-head p,
[data-theme="light"] .tech-card .section-copy,
[data-theme="light"] .tech-card .tech-copy,
[data-theme="light"] .tech-card .tech-description,
[data-theme="light"] .experience-head > div > p:last-child,
[data-theme="light"] .section-head p:last-child,
[data-theme="light"] .timeline-item p,
[data-theme="light"] .project > p:not(.project-type),
[data-theme="light"] .education-block > p:not(.section-kicker),
[data-theme="light"] .contact-card > p:not(.section-kicker) {
  color: #545755 !important;
  opacity: 1 !important;
}

/* Skill / tech pills */
[data-theme="light"] .skills-card .skill-cloud span,
[data-theme="light"] .skill-cloud span,
[data-theme="light"] .tech-card .tech-pill,
[data-theme="light"] .tech-card .skill-pill,
[data-theme="light"] .tech-card .stack-pill {
  color: #2e2e2e !important;
  opacity: 1 !important;
  border-color: rgba(168,124,32,0.4) !important;
  background: rgba(255,255,255,0.7) !important;
  text-shadow: none !important;
}

/* Tag chips */
[data-theme="light"] .tags span {
  color: #444 !important;
  border-color: rgba(0,0,0,0.14) !important;
}

/* Metrics + numbers */
[data-theme="light"] .metrics strong { color: #141414 !important; }
[data-theme="light"] .metrics span { color: #7a7d7b !important; }
[data-theme="light"] .project-top strong { color: var(--gold) !important; }

/* Section kickers stay gold */
[data-theme="light"] .section-kicker,
[data-theme="light"] .eyebrow,
[data-theme="light"] .project-type,
[data-theme="light"] .skills-card .section-kicker {
  color: var(--gold) !important;
  opacity: 1 !important;
}

/* =====================================================
   CURSOR — stronger visibility in BOTH themes
===================================================== */

/* Dark theme: bright gold, glowing */
[data-theme="dark"] #cursor-dot {
  background: #ffd25e;
  box-shadow: 0 0 10px rgba(255,210,94,0.8);
}
[data-theme="dark"] #cursor-ring {
  border-color: rgba(255,210,94,0.7);
}

/* Light theme: darker gold so it reads on the pale background */
[data-theme="light"] #cursor-dot {
  background: #8a6410;
  box-shadow: 0 0 8px rgba(138,100,16,0.6);
}
[data-theme="light"] #cursor-ring {
  border-color: rgba(138,100,16,0.6);
}
[data-theme="light"] body.cur-hover #cursor-ring { border-color: #8a6410; }


/* Light theme — education certifications list + CGPA */
[data-theme="light"] .education-block ul,
[data-theme="light"] .education-block li {
  color: #3a3d3b !important;
}
[data-theme="light"] .education-block strong {
  color: #7a6a1f !important;
}


/* =====================================================
   HERO ORBIT — stronger ring visibility in both themes
   Original rings were ~0.2 opacity and barely rendered.
===================================================== */

/* Dark theme */
[data-theme="dark"] .hero-orbit .orbit {
  border-color: rgba(217,174,79,0.5) !important;
  border-width: 1.5px !important;
}
[data-theme="dark"] .hero-orbit .orbit-b {
  border-color: rgba(142,198,174,0.42) !important;
}

/* Light theme — needs darker lines to show on the pale bg */
[data-theme="light"] .hero-orbit .orbit {
  border-color: rgba(168,124,32,0.55) !important;
  border-width: 1.5px !important;
}
[data-theme="light"] .hero-orbit .orbit-b {
  border-color: rgba(80,120,95,0.5) !important;
}
[data-theme="light"] .hero-orbit .core {
  background: linear-gradient(145deg, #ffffff, #f0ece2) !important;
  border-color: rgba(168,124,32,0.4) !important;
}
[data-theme="light"] .hero-orbit .core span {
  color: #4a4d4b !important;
}
[data-theme="light"] .hero-orbit .dot-b {
  background: #4f8a6e !important;
}


/* =====================================================
   PROJECT LINKS (Live Demo / GitHub) + 3-card grid
===================================================== */

/* Fit three project cards in the grid */
.projects-card .project-grid {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1280px;
  /* Even row sizing so cards never get clipped mid-content.
     Each row sizes to its tallest card; rows align to top. */
  grid-auto-rows: max-content;
  align-content: start;
  row-gap: 16px;
}

/* Clickable demo / repo links inside a project card */
.project-links {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.project-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 13px;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.project-links a:hover {
  background: var(--gold);
  color: #050606;
  border-color: var(--gold);
  transform: translateY(-1px);
}
[data-theme="light"] .project-links a:hover { color: #fff; }

/* Tighten project card internals so all 3 columns read
   cleanly and the content-heavy card (FraudShield) fits
   without clipping its metrics/links row. */
.projects-card .project {
  min-height: 0 !important;   /* override base 350px floor */
  height: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.projects-card .project > p:not(.project-type) {
  font-size: .72rem;
  line-height: 1.5;
}
/* Compact the dense sub-blocks so the tallest card fits */
.projects-card .project .tags { margin-top: 9px; gap: 5px; }
.projects-card .project .tags span { padding: 4px 7px; font-size: .53rem; }
.projects-card .project .metrics { margin-top: 10px; padding-top: 10px; gap: 6px; }
.projects-card .project .metrics strong { font-size: .95rem; }
.projects-card .project .project-links { margin-top: 10px; }
.projects-card .project .project-links a { padding: 7px 11px; font-size: .55rem; }
.projects-card .project h3 { font-size: clamp(1.2rem, 1.6vw, 1.7rem); margin: 10px 0; }
.projects-card .project > p:not(.project-type) { font-size: .7rem; line-height: 1.45; }

/* Responsive: fall back to the original single/double column layouts */
@media (max-width: 1100px) {
  .projects-card .project-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .projects-card .project-grid { grid-template-columns: 1fr; }
}


/* =====================================================
   TIMELINE CONNECTOR — robust, self-aligning (FINAL)
   -----------------------------------------------------
   The old connector was a single :after on the FIRST
   item only, positioned with hardcoded `left:NNpx`.
   That breaks the moment the number of entries changes
   or the layout shifts. This replaces it with a line
   anchored to the node column itself, drawn on EVERY
   node, connecting each one down to the next — so the
   vertical line always runs cleanly through all nodes
   regardless of how many experiences are added.
===================================================== */

/* Kill the old fragile connector in every breakpoint */
.timeline-item:first-child .timeline-node:after {
  content: none !important;
  display: none !important;
}

/* Anchor the connector to the full-height grid ROW
   (.timeline-item), not the node. The line is drawn in
   the node's column and spans the entire row down into
   the next one — so it needs no pixel math and scales to
   any number of entries automatically.

   Column layout is `125px 18px 1fr` with a 22px gap, so
   the node column center sits at: 125 + 22 + (18/2) = 156px. */
.timeline .timeline-item {
  position: relative;
}
.timeline .timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 149px;             /* centered on the node dot */
  top: 32px;               /* just below the node */
  bottom: -22px;           /* reach into the next item's node */
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--gold-soft) 0%,
    rgba(255,255,255,0.14) 100%
  );
  pointer-events: none;
  z-index: 0;
}

[data-theme="light"] .timeline .timeline-item:not(:last-child)::before {
  background: linear-gradient(
    to bottom,
    rgba(168,124,32,0.45) 0%,
    rgba(0,0,0,0.12) 100%
  );
}

/* Tablet: column layout becomes `90px 14px 1fr`, gap 13px.
   Node column center = 90 + 13 + (14/2) = 110px. */
@media (max-width: 900px) {
  .timeline .timeline-item:not(:last-child)::before {
    left: 103px;
  }
}

/* On mobile the node column collapses and nodes hide,
   so no connector is needed there. */
@media (max-width: 620px) {
  .timeline .timeline-item:not(:last-child) .timeline-node::before {
    display: none !important;
  }
}


/* =====================================================
   EXPERIENCE CARD — scrollable timeline when > 2 entries
   -----------------------------------------------------
   Problem: the card has a fixed height and used
   justify-content:center, so a 3rd+ entry overflowed and
   got clipped (heading pushed off the top). Fix: pin the
   heading, give the timeline its own scroll area that
   only scrolls when content exceeds the available space.
===================================================== */

/* Switch the card from centered to top-aligned column so
   nothing gets pushed off the top edge. */
.experience-card {
  justify-content: flex-start !important;
  overflow: hidden;             /* card itself never scrolls */
}

/* Keep the heading fixed at the top of the card. */
.experience-card .experience-head {
  flex: 0 0 auto;
}

/* The timeline becomes the scroll container. It fills the
   remaining height and scrolls internally only if needed.
   The scrollbar is hidden — scrolling still works. */
.experience-card .timeline {
  flex: 1 1 auto;
  min-height: 0;                /* allow flex child to shrink */
  overflow-y: auto;
  overflow-x: hidden;
  /* hide scrollbar (Firefox + IE/Edge legacy) */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* soft fade at top/bottom so clipped content looks intentional */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 14px,
    #000 calc(100% - 14px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 14px,
    #000 calc(100% - 14px),
    transparent 100%
  );
}

/* Hide scrollbar (WebKit / Chrome / Safari) */
.experience-card .timeline::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* On small screens the card already scrolls as a block,
   so don't double-scroll the timeline there. */
@media (max-width: 620px) {
  .experience-card .timeline {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
}


/* =====================================================
   TIMELINE SCROLL HINT — "more below" drop arrow
   Shown only when the timeline overflows (3+ entries)
   and hidden once scrolled to the bottom. The .is-active
   class is toggled by JS.
===================================================== */
.timeline-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  background: rgba(10,12,12,0.75);
  backdrop-filter: blur(6px);
  color: var(--gold);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  z-index: 5;
}
.timeline-scroll-hint svg {
  width: 13px;
  height: 13px;
  animation: hint-bounce 1.5s ease-in-out infinite;
}

/* Visible state (toggled by JS) */
.timeline-scroll-hint.is-active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@keyframes hint-bounce {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(2px); }
}

[data-theme="light"] .timeline-scroll-hint {
  background: rgba(247,244,238,0.85);
  border-color: rgba(168,124,32,0.5);
  color: #8a6410;
}

@media (prefers-reduced-motion: reduce) {
  .timeline-scroll-hint svg { animation: none; }
}

/* On mobile the whole card scrolls as a block, so no hint. */
@media (max-width: 620px) {
  .timeline-scroll-hint { display: none !important; }
}


/* =====================================================
   PROJECTS CARD — scrollable grid + "more below" hint
   -----------------------------------------------------
   With 4+ project cards the 3-column grid wraps to a
   second row that overflowed the fixed-height card and
   got clipped. Same fix as the experience timeline:
   pin the header, let the grid scroll internally, hide
   the scrollbar, and show a drop-arrow hint when there
   is more content below.
===================================================== */

/* Top-align so the header stays pinned and nothing is
   pushed off the top edge. */
.projects-card {
  justify-content: flex-start !important;
  overflow: hidden;
}
.projects-card .section-head {
  flex: 0 0 auto;
}

/* The grid becomes the scroll container. */
.projects-card .project-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  padding: 2px 6px 2px 2px;
  /* hide scrollbar (Firefox + legacy Edge) */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* subtle fade only at the very edges so bottom content
     (like the Live Demo / GitHub links) stays readable */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 8px,
    #000 calc(100% - 6px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 8px,
    #000 calc(100% - 6px),
    transparent 100%
  );
}
.projects-card .project-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Scroll hint — identical look to the timeline hint */
.projects-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  background: rgba(10,12,12,0.75);
  backdrop-filter: blur(6px);
  color: var(--gold);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  z-index: 5;
}
.projects-scroll-hint svg {
  width: 13px;
  height: 13px;
  animation: hint-bounce 1.5s ease-in-out infinite;
}
.projects-scroll-hint.is-active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-theme="light"] .projects-scroll-hint {
  background: rgba(247,244,238,0.85);
  border-color: rgba(168,124,32,0.5);
  color: #8a6410;
}
@media (prefers-reduced-motion: reduce) {
  .projects-scroll-hint svg { animation: none; }
}

/* On mobile the whole card scrolls as a block, so no hint
   and no internal scroll. */
@media (max-width: 620px) {
  .projects-scroll-hint { display: none !important; }
  .projects-card .project-grid {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
}