/* =====================================================================
   Rishi Neupane — Portfolio
   Editorial dark-first design system. No build step, no dependencies.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --sans : 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mono : 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --accent   : #FF5C39;   /* decorative: fills, glows, gradients          */
  --accent-ink: #FF5C39;  /* accent used as TEXT - must pass WCAG AA      */
  --on-accent: #0A0A0B;   /* text placed ON an accent fill                */
  --ok       : #31D07C;   /* "current / available" green                  */
  --accent-2 : #7C5CFF;

  --bg      : #0A0A0B;
  --bg-2    : #101013;
  --surface : rgba(255,255,255,.035);
  --surface-2: rgba(255,255,255,.06);
  --line    : rgba(255,255,255,.10);
  --line-2  : rgba(255,255,255,.18);
  --text    : #EDEDEE;
  --muted   : #8C8C93;
  --shadow  : 0 24px 60px -24px rgba(0,0,0,.8);

  --wrap    : 1240px;
  --gutter  : clamp(20px, 5vw, 72px);
  --sec-pad : clamp(80px, 12vh, 160px);
  --r       : 18px;
  --ease    : cubic-bezier(.22,1,.36,1);
}

html[data-theme="light"]{
  /* #FF5C39 only reaches 2.77:1 on this background, so accent TEXT and
     borders switch to a darker shade (4.91:1). Fills keep the bright hue. */
  --accent-ink: #C43512;
  --ok      : #1A7F4B;
  --bg      : #F5F3F0;
  --bg-2    : #EBE7E1;
  --surface : rgba(0,0,0,.028);
  --surface-2: rgba(0,0,0,.05);
  --line    : rgba(0,0,0,.10);
  --line-2  : rgba(0,0,0,.20);
  --text    : #141416;
  --muted   : #6B6B72;
  --shadow  : 0 24px 60px -28px rgba(0,0,0,.28);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(15px,.55vw + 13.4px,17px);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .5s var(--ease), color .5s var(--ease);
}
body.is-locked{ overflow:hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
code{ font-family:var(--mono); font-size:.86em; background:var(--surface-2); padding:.1em .4em; border-radius:5px; }
::selection{ background:var(--accent); color:var(--on-accent); }

.mono{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.serif{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:9999;
  background:var(--accent); color:var(--on-accent); padding:12px 18px; border-radius:10px;
}
.skip-link:focus{ top:16px; }
:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; border-radius:4px; }

/* ---------- 3. Preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:9000;
  background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ width:min(560px,80vw); }
.preloader__name{
  font-size:clamp(28px,6vw,54px); font-weight:700; letter-spacing:-.04em;
  display:flex; flex-wrap:wrap; margin-bottom:26px;
}
.preloader__name span{
  display:inline-block; opacity:0; transform:translateY(100%);
  animation:preIn .7s var(--ease) forwards;
}
@keyframes preIn{ to{ opacity:1; transform:translateY(0); } }
.preloader__meta{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.preloader__count{ color:var(--accent-ink); font-size:.9rem; }
.preloader__bar{ height:2px; background:var(--line); overflow:hidden; }
.preloader__bar i{ display:block; height:100%; width:0%; background:var(--accent); transition:width .2s linear; }

/* ---------- 4. Cursor, progress, grain ---------- */
.cursor,.cursor-dot{ display:none; }
@media (hover:hover) and (pointer:fine){
  .cursor{
    display:block; position:fixed; top:0; left:0; z-index:8000;
    width:34px; height:34px; border:1px solid var(--line-2); border-radius:50%;
    pointer-events:none; transform:translate(-50%,-50%);
    transition:width .3s var(--ease), height .3s var(--ease),
               background .3s var(--ease), border-color .3s var(--ease);
  }
  .cursor.is-hover{ width:64px; height:64px; background:var(--accent); border-color:var(--accent-ink); mix-blend-mode:difference; }
  .cursor-dot{
    display:block; position:fixed; top:0; left:0; z-index:8001;
    width:5px; height:5px; border-radius:50%; background:var(--accent);
    pointer-events:none; transform:translate(-50%,-50%);
  }
  .cursor.is-hover + .cursor-dot{ opacity:0; }
  .cursor,.cursor-dot{ opacity:0; transition:opacity .3s; }
  body.has-pointer .cursor,body.has-pointer .cursor-dot{ opacity:1; }
  body.has-pointer .cursor{ transition:width .3s var(--ease), height .3s var(--ease),
                                       background .3s var(--ease), border-color .3s var(--ease), opacity .3s; }
}
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:7000; background:transparent; }
.scroll-progress i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.grain{
  position:fixed; inset:-50%; z-index:6000; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-5%,-10%)} 20%{transform:translate(-15%,5%)}
  30%{transform:translate(7%,-25%)} 40%{transform:translate(-5%,25%)} 50%{transform:translate(-15%,10%)}
  60%{transform:translate(15%,0)} 70%{transform:translate(0,15%)} 80%{transform:translate(3%,35%)} 90%{transform:translate(-10%,10%)}
}

/* ---------- 5. Header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:5000;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px var(--gutter);
  border-bottom:1px solid transparent;
  transition:transform .5s var(--ease), background .4s var(--ease),
             border-color .4s var(--ease), padding .4s var(--ease);
}
.header.is-stuck{
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line); padding-block:12px;
}
.header.is-hidden{ transform:translateY(-100%); }

.brand{ display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.02em; }
.brand__mark{
  width:34px; height:34px; display:grid; place-items:center; flex:none;
  border-radius:10px; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:16px;
  transition:transform .4s var(--ease);
}
.brand:hover .brand__mark{ transform:rotate(-8deg) scale(1.06); }
.brand__text em{ font-family:var(--serif); font-style:italic; color:var(--muted); margin-left:4px; }

.nav{ display:flex; gap:4px; }
.nav__link{
  position:relative; padding:8px 14px; border-radius:99px; font-size:.9rem;
  color:var(--muted); transition:color .3s, background .3s;
}
.nav__link span{ font-family:var(--mono); font-size:.62rem; opacity:.5; margin-right:5px; }
.nav__link:hover,.nav__link.is-active{ color:var(--text); background:var(--surface); }
.nav__link.is-active span{ color:var(--accent-ink); opacity:1; }

.header__actions{ display:flex; align-items:center; gap:10px; }
.theme-toggle{
  width:38px; height:38px; display:grid; place-items:center; flex:none;
  border:1px solid var(--line); border-radius:50%; color:var(--muted);
  transition:color .3s, border-color .3s, transform .3s var(--ease);
}
.theme-toggle:hover{ color:var(--text); border-color:var(--line-2); transform:rotate(25deg); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .ic-moon{ display:none; }
html[data-theme="light"] .theme-toggle .ic-moon{ display:block; }
html[data-theme="light"] .theme-toggle .ic-sun{ display:none; }

.burger{ display:none; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; padding:11px 10px; flex-direction:column; justify-content:space-between; }
.burger i{ display:block; height:1.5px; width:100%; background:var(--text); transition:transform .4s var(--ease), opacity .3s; }
.burger.is-open i:first-child{ transform:translateY(7px) rotate(45deg); }
.burger.is-open i:last-child{ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- 6. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:99px; font-size:.92rem; font-weight:500;
  border:1px solid transparent; white-space:nowrap;
  transition:background .35s var(--ease), color .35s, border-color .35s, transform .35s var(--ease);
}
.btn svg{ width:17px; height:17px; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn--solid{ background:var(--text); color:var(--bg); }
.btn--solid:hover{ background:var(--accent); color:var(--on-accent); }
.btn--ghost{ border-color:var(--line-2); color:var(--text); }
.btn--ghost:hover{ background:var(--surface-2); border-color:var(--text); }
.btn--sm{ padding:10px 18px; font-size:.84rem; }
.btn--sm svg{ width:14px; height:14px; }

/* ---------- 7. Mobile menu ---------- */
.menu{
  position:fixed; inset:0; z-index:4900;
  background:var(--bg-2);
  clip-path:circle(0% at calc(100% - 46px) 40px);
  transition:clip-path .8s var(--ease);
  display:flex; align-items:center;
}
.menu.is-open{ clip-path:circle(150% at calc(100% - 46px) 40px); }
.menu__inner{ width:100%; padding:110px var(--gutter) 40px; display:flex; flex-direction:column; height:100%; }
.menu__label{ margin-bottom:24px; }
.menu__nav{ display:flex; flex-direction:column; gap:2px; flex:1; justify-content:center; }
.menu__link{
  display:flex; align-items:baseline; gap:14px;
  font-size:clamp(30px,9vw,54px); font-weight:600; letter-spacing:-.04em; line-height:1.25;
  opacity:0; transform:translateY(24px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.menu.is-open .menu__link{ opacity:1; transform:none; }
.menu__link span{ font-size:.6rem; color:var(--accent-ink); }
.menu__link:hover{ color:var(--accent-ink); }
.menu__foot{ border-top:1px solid var(--line); padding-top:20px; display:flex; flex-wrap:wrap; gap:12px 20px; justify-content:space-between; font-size:.88rem; color:var(--muted); }
.menu__social{ display:flex; gap:18px; }
.menu__social a:hover{ color:var(--accent-ink); }

/* ---------- 8. Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:clamp(112px,14vh,148px) 0 clamp(32px,5vh,56px); overflow:hidden; }
.hero__inner{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); position:relative; z-index:2; }
.hero__glow{
  position:absolute; top:-30%; right:-10%; width:min(900px,90vw); aspect-ratio:1; z-index:0;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--accent) 40%,transparent) 0%, transparent 62%);
  filter:blur(60px); opacity:.5; animation:float 14s ease-in-out infinite;
}
@keyframes float{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-6%,5%) scale(1.12)} }
.hero__lines{ position:absolute; inset:0; z-index:0; display:flex; justify-content:space-between; padding-inline:var(--gutter); max-width:var(--wrap); margin-inline:auto; left:0; right:0; }
.hero__lines i{ width:1px; height:100%; background:linear-gradient(to bottom, transparent, var(--line) 25%, var(--line) 75%, transparent); }

.hero__top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-bottom:clamp(20px,4vh,42px); }
.chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 12px; border:1px solid var(--line); border-radius:99px;
  font-size:.78rem; color:var(--muted); background:var(--surface);
}
.chip__dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(49,208,124,.6); animation:pulse 2.2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(49,208,124,0);} 100%{ box-shadow:0 0 0 0 rgba(49,208,124,0);} }
.hero__loc b{ color:var(--accent-ink); font-weight:400; }

.hero__title{
  font-size:clamp(44px,10.5vw,150px); line-height:.95; font-weight:700; letter-spacing:-.05em;
  margin-bottom:clamp(24px,4vh,48px);
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .word{ display:inline-block; }
.hero__title .char{ display:inline-block; transform:translateY(105%); opacity:0; }
.is-loaded .hero__title .char{ animation:charIn .9s var(--ease) forwards; }
@keyframes charIn{ to{ transform:translateY(0); opacity:1; } }
.hero__title .serif{ font-size:.85em; color:var(--accent-ink); }
.hero__title .outline{
  -webkit-text-stroke:1.4px var(--text); color:transparent;
  transition:color .5s var(--ease);
}
.hero__title .outline:hover{ color:var(--accent-ink); -webkit-text-stroke-color:var(--accent-ink); }

.hero__bottom{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:end; }
.hero__lead{ color:var(--muted); font-size:clamp(15px,1.1vw,18px); max-width:52ch; }
.hero__lead strong{ color:var(--text); font-weight:600; }
.hero__lead em{ color:var(--text); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }

/* Scroll cue sits in a reserved band at the base of the hero so it can never
   collide with the lead paragraph or the CTA row. */
.hero__scroll{
  position:absolute; z-index:2; bottom:14px; display:none; align-items:center; gap:12px;
  left:50%; transform:translateX(-50%); color:var(--muted);
  transition:color .3s;
}
.hero__scroll:hover{ color:var(--text); }
.hero__scroll i{
  display:block; width:34px; height:1px; overflow:hidden;
  background:linear-gradient(to right,var(--accent),transparent);
}
@media (min-height:720px) and (min-width:1024px){
  .hero__scroll{ display:flex; }
  .hero__inner{ padding-bottom:62px; }
}

/* ---------- 9. Marquee ---------- */
.marquee{ border-block:1px solid var(--line); padding:22px 0; overflow:hidden; background:var(--surface); }
.marquee__track{ display:flex; width:max-content; animation:scroll 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes scroll{ to{ transform:translateX(-50%); } }
.marquee__group{ display:flex; align-items:center; gap:28px; padding-right:28px; }
.marquee__group span{ font-size:clamp(20px,2.6vw,34px); font-weight:600; letter-spacing:-.03em; white-space:nowrap; }
.marquee__group i{ color:var(--accent-ink); font-size:1rem; font-style:normal; }

/* ---------- 10. Section shell ---------- */
.section{ padding-block:var(--sec-pad); position:relative; }
.sec-head{ margin-bottom:clamp(40px,6vh,72px); }
.sec-head__num{ display:block; color:var(--accent-ink); margin-bottom:12px; }
.sec-head__title{ font-size:clamp(32px,5.5vw,68px); font-weight:700; letter-spacing:-.04em; line-height:1.02; }
.sec-head__title em{ color:var(--muted); }
.sec-head__note{ color:var(--muted); margin-top:14px; max-width:56ch; font-size:.95rem; }

/* reveal */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- 11. About ---------- */
.about__grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr); gap:clamp(28px,5vw,80px); align-items:start; }
.about__media{ position:sticky; top:110px; display:flex; flex-direction:column; gap:16px; }
.portrait{
  position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:
    radial-gradient(120% 90% at 20% 0%, color-mix(in srgb,var(--accent) 32%,transparent), transparent 60%),
    radial-gradient(120% 90% at 90% 100%, color-mix(in srgb,var(--accent-2) 34%,transparent), transparent 62%),
    var(--bg-2);
  display:grid; place-items:center; transform-style:preserve-3d; transition:transform .3s var(--ease);
}
.portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
.portrait__fallback{ font-size:clamp(60px,9vw,110px); font-weight:700; letter-spacing:-.05em; opacity:.28; }
.portrait__tag{
  position:absolute; left:14px; bottom:14px; z-index:3;
  background:color-mix(in srgb,var(--bg) 72%,transparent); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:99px; padding:7px 14px; color:var(--text);
}
.lang-card{ border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; background:var(--surface); }
.lang-card__label{ display:block; margin-bottom:6px; }
.lang-card p{ font-weight:500; }

.about__lead{ font-size:clamp(20px,2.4vw,30px); line-height:1.4; letter-spacing:-.02em; font-weight:500; margin-bottom:22px; }
.about__lead em{ color:var(--accent-ink); }
.about__body p{ color:var(--muted); margin-bottom:18px; max-width:62ch; }

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:36px 0; }
.stat{ border-top:1px solid var(--line); padding-top:16px; }
.stat__num{ display:block; font-size:clamp(34px,4.5vw,56px); font-weight:700; letter-spacing:-.04em; line-height:1; }
.stat__num::after{ content:'+'; color:var(--accent-ink); }
.stat__lbl{ display:block; font-size:.8rem; color:var(--muted); margin-top:8px; line-height:1.4; }

.info-list{ border-top:1px solid var(--line); }
.info-list li{ display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line); }
.info-list b{ font-weight:500; }

.cv-card{
  margin-top:26px; padding:22px 24px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); display:flex; flex-wrap:wrap; gap:18px 24px;
  align-items:center; justify-content:space-between;
  transition:border-color .35s, background .35s;
}
.cv-card:hover{ border-color:var(--line-2); background:var(--surface-2); }
.cv-card__label{ display:block; color:var(--accent-ink); margin-bottom:5px; }
.cv-card__text p{ margin:0; color:var(--muted); font-size:.92rem; max-width:40ch; }
.cv-card__actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cv-card__alt{
  font-size:.84rem; color:var(--muted); border-bottom:1px solid var(--line-2);
  padding-bottom:2px; transition:color .3s, border-color .3s;
}
.cv-card__alt:hover{ color:var(--accent-ink); border-color:var(--accent-ink); }

/* ---------- 12. Tabs + timeline ---------- */
.tabs{ display:inline-flex; gap:4px; padding:5px; border:1px solid var(--line); border-radius:99px; background:var(--surface); margin-bottom:44px; }
.tab{ padding:10px 22px; border-radius:99px; font-size:.9rem; color:var(--muted); transition:color .3s, background .3s; }
.tab.is-active{ background:var(--text); color:var(--bg); }

.timeline{ display:none; }
.timeline.is-visible{ display:block; animation:fadeUp .6s var(--ease); }
@keyframes fadeUp{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }

.tl{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(16px,4vw,56px); padding:34px 0; border-top:1px solid var(--line); position:relative; }
.tl:last-child{ border-bottom:1px solid var(--line); }
.tl::after{ content:''; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--accent); transition:width .6s var(--ease); }
.tl:hover::after{ width:100%; }
.tl__side{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.tl__date{ color:var(--text); }
.tag{ display:inline-flex; align-items:center; gap:7px; font-size:.72rem; padding:5px 12px; border-radius:99px; border:1px solid var(--line); color:var(--muted); }
.tag--live{ border-color:color-mix(in srgb,var(--ok) 45%,transparent); color:var(--ok); }
.tag--live i{ width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 2.2s infinite; }
.tl__role{ font-size:clamp(21px,2.6vw,30px); font-weight:600; letter-spacing:-.03em; }
.tl__org{ color:var(--accent-ink); font-weight:500; margin:4px 0 14px; }
.tl__org .mono{ color:var(--muted); }
.tl__desc{ color:var(--muted); max-width:64ch; }
.tl__link{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:.88rem; border-bottom:1px solid var(--line-2); padding-bottom:3px; transition:color .3s, border-color .3s; }
.tl__link svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.tl__link:hover{ color:var(--accent-ink); border-color:var(--accent-ink); }
.tl__link:hover svg{ transform:translate(3px,-3px); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chips li{ font-size:.76rem; padding:6px 13px; border-radius:99px; background:var(--surface-2); color:var(--muted); border:1px solid var(--line); }
.chips--sm li{ font-size:.71rem; padding:5px 11px; }

/* ---------- 13. Projects ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px; }
.filter{ padding:9px 18px; border:1px solid var(--line); border-radius:99px; font-size:.85rem; color:var(--muted); transition:all .3s var(--ease); }
.filter:hover{ border-color:var(--line-2); color:var(--text); }
.filter.is-active{ background:var(--text); color:var(--bg); border-color:var(--text); }

.pgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(16px,2vw,26px); }
.pcard{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface);
  display:flex; flex-direction:column; transform-style:preserve-3d;
  transition:border-color .4s var(--ease), transform .3s var(--ease), background .4s;
}
.pcard:hover{ border-color:var(--line-2); background:var(--surface-2); }
.pcard.is-hidden{ display:none; }
.pcard__thumb{
  position:relative; aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(135deg, var(--c1,#FF5C39), var(--c2,#7C5CFF));
}
.pcard__thumb::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), transparent 55%);
  mix-blend-mode:overlay;
}
.pcard__thumb::after{
  content:''; position:absolute; inset:0; opacity:.16;
  background-image:linear-gradient(rgba(0,0,0,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.6) 1px, transparent 1px);
  background-size:22px 22px;
}
.pcard__mono{ position:relative; z-index:2; font-size:clamp(40px,5vw,64px); font-weight:700; letter-spacing:-.05em; color:#fff; mix-blend-mode:soft-light; transition:transform .5s var(--ease); }
.pcard:hover .pcard__mono{ transform:scale(1.1); }
.pcard__type{ position:absolute; z-index:2; top:12px; left:12px; background:rgba(0,0,0,.35); color:#fff; border-radius:99px; padding:5px 12px; backdrop-filter:blur(6px); }
.pcard__body{ padding:22px 22px 26px; display:flex; flex-direction:column; flex:1; }
.pcard__title{ font-size:1.32rem; font-weight:600; letter-spacing:-.02em; margin-bottom:10px; }
.pcard__desc{ color:var(--muted); font-size:.92rem; flex:1; }
.pcard__meta{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.pcard__link{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:.86rem; color:var(--accent-ink); align-self:flex-start; }
.pcard__link svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.pcard__link:hover svg{ transform:translate(3px,-3px); }

@media (min-width:1080px){
  .pcard--wide{ grid-column:span 2; flex-direction:row; }
  .pcard--wide .pcard__thumb{ aspect-ratio:auto; width:40%; flex:none; }
  .pcard--wide .pcard__body{ padding:30px 30px 32px; justify-content:center; }
  .pcard--wide .pcard__desc{ flex:0 0 auto; }   /* let content centre, don't stretch */
  .pcard--wide .pcard__title{ font-size:1.6rem; }
}

/* ---------- 14. GitHub ---------- */
.gh__profile{
  display:flex; flex-wrap:wrap; align-items:center; gap:20px 32px; justify-content:space-between;
  border:1px solid var(--line); border-radius:var(--r); padding:22px 26px; background:var(--surface); margin-bottom:22px;
}
.gh__id{ display:flex; align-items:center; gap:14px; }
.gh__avatar{
  width:56px; height:56px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font-weight:700; font-size:22px;
  background-size:cover; background-position:center; overflow:hidden;
}
.gh__avatar.has-img{ color:transparent; }
.gh__idtext b{ display:block; font-size:1.08rem; font-weight:600; }
.gh__nums{ display:flex; gap:28px; }
.gh__nums div{ display:flex; flex-direction:column; gap:2px; }
.gh__nums span:first-child{ font-size:1.4rem; font-weight:700; letter-spacing:-.02em; }

.repos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.repo{
  border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--surface);
  display:flex; flex-direction:column; gap:10px; min-height:150px;
  transition:border-color .35s, transform .35s var(--ease), background .35s;
}
.repo:hover{ border-color:var(--line-2); background:var(--surface-2); transform:translateY(-3px); }
.repo__name{
  font-weight:600; display:flex; align-items:flex-start; gap:8px; letter-spacing:-.01em;
  min-width:0; overflow-wrap:anywhere;      /* long repo names must not escape the card */
}
.repo__name svg{ width:15px; height:15px; flex:none; color:var(--accent-ink); margin-top:4px; }
/* flex:1 made the box grow past the clamp, leaving a sliver of a cut 5th line.
   The clamp now sets the height; the meta row is pushed down instead. */
.repo__desc{
  color:var(--muted); font-size:.88rem;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
}
.repo__meta{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:auto; font-size:.76rem; color:var(--muted); font-family:var(--mono); }
.repo__lang{ display:inline-flex; align-items:center; gap:6px; }
.repo__dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); }
.repo--skeleton{ background:linear-gradient(90deg,var(--surface),var(--surface-2),var(--surface)); background-size:200% 100%; animation:shimmer 1.5s infinite; }
@keyframes shimmer{ to{ background-position:-200% 0; } }
.repos__msg{ grid-column:1/-1; color:var(--muted); border:1px dashed var(--line); border-radius:14px; padding:26px; text-align:center; }

/* ---------- 15. Skills ---------- */
.skills__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(16px,2vw,24px); }
.skillbox{ border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; background:var(--surface); transition:border-color .35s, background .35s; }
.skillbox:hover{ border-color:var(--line-2); background:var(--surface-2); }
.skillbox__label{ display:block; color:var(--accent-ink); margin-bottom:18px; }
.tagcloud{ display:flex; flex-wrap:wrap; gap:9px; }
.tagcloud li{
  font-size:.85rem; padding:8px 15px; border-radius:10px; border:1px solid var(--line);
  transition:transform .3s var(--ease), border-color .3s, color .3s;
}
.tagcloud li:hover{ transform:translateY(-3px); border-color:var(--accent-ink); color:var(--accent-ink); }

/* ---------- 16. Certificates ---------- */
.cert-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(16px,2vw,24px); }
.cert{
  display:flex; gap:18px; padding:24px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); transform-style:preserve-3d;
  transition:border-color .35s, background .35s, transform .3s var(--ease);
}
.cert:hover{ border-color:var(--line-2); background:var(--surface-2); }
.cert__badge{
  width:56px; height:56px; flex:none; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,#FF9900,#FF5C39); color:var(--on-accent);
}
.cert__badge .mono{ color:var(--on-accent); font-size:.7rem; font-weight:500; }
.cert__year{ display:block; color:var(--accent-ink); margin-bottom:5px; }
.cert__title{ font-size:1.1rem; font-weight:600; letter-spacing:-.02em; margin-bottom:8px; }
.cert__body p{ color:var(--muted); font-size:.89rem; margin-bottom:12px; }
.cert__issuer{ display:block; }

.refs{ margin-top:clamp(40px,6vh,72px); border-top:1px solid var(--line); padding-top:28px; }
.refs__label{ display:block; color:var(--accent-ink); margin-bottom:18px; }
.refs__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.ref b{ display:block; font-weight:600; margin-bottom:3px; }
.ref span{ color:var(--muted); font-size:.87rem; }
.refs__note{ margin-top:18px; }

/* ---------- 17. Contact ---------- */
.contact{ padding-bottom:clamp(60px,9vh,110px); }
.contact__inner{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.contact__label{ display:block; color:var(--accent-ink); margin-bottom:18px; }
.contact__title{ font-size:clamp(34px,7vw,92px); font-weight:700; letter-spacing:-.05em; line-height:1.02; max-width:16ch; }
.contact__title em{ color:var(--accent-ink); }
.contact__sub{ color:var(--muted); margin-top:18px; max-width:46ch; }
.contact__mail{
  display:inline-flex; align-items:center; gap:14px; margin-top:38px;
  font-size:clamp(16px,2.4vw,30px); font-weight:500; letter-spacing:-.02em;
  padding:16px 30px; border:1px solid var(--line-2); border-radius:99px;
  transition:background .4s var(--ease), color .4s, border-color .4s, transform .4s var(--ease);
  max-width:100%; overflow-wrap:anywhere;
}
.contact__mail svg{ width:22px; height:22px; flex:none; transition:transform .4s var(--ease); }
.contact__mail:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.contact__mail:hover svg{ transform:translateX(6px); }

.contact__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:46px; width:100%; text-align:left; }
.ccard{
  border:1px solid var(--line); border-radius:14px; padding:18px 20px; background:var(--surface);
  display:flex; flex-direction:column; gap:6px;
  transition:border-color .35s, background .35s, transform .35s var(--ease);
}
.ccard:hover{ border-color:var(--accent-ink); background:var(--surface-2); transform:translateY(-3px); }
.ccard b{ font-weight:500; font-size:.95rem; overflow-wrap:anywhere; }

/* ---------- 18. Footer ---------- */
.footer{ border-top:1px solid var(--line); padding-block:40px; }
.footer__inner{ display:flex; flex-wrap:wrap; gap:22px; align-items:flex-end; justify-content:space-between; }
.footer__big{ display:block; font-size:clamp(26px,4vw,44px); font-weight:700; letter-spacing:-.04em; line-height:1.1; }
.footer__meta{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.to-top{ display:inline-flex; align-items:center; gap:8px; font-size:.88rem; border-bottom:1px solid var(--line-2); padding-bottom:3px; transition:color .3s, border-color .3s; }
.to-top svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.to-top:hover{ color:var(--accent-ink); border-color:var(--accent-ink); }
.to-top:hover svg{ transform:translateY(-3px); }

/* ---------- 19. Responsive ---------- */
@media (max-width:1080px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .hero__lines{ display:none; }
}
@media (max-width:920px){
  .about__grid{ grid-template-columns:1fr; }
  .about__media{ position:static; flex-direction:row; gap:16px; }
  .portrait{ flex:1 1 60%; aspect-ratio:1/1; }
  .lang-card{ flex:1 1 40%; align-self:flex-start; }
  .hero__bottom{ grid-template-columns:1fr; }
  .hero__cta{ justify-content:flex-start; }
  .tl{ grid-template-columns:1fr; gap:16px; }
  .tl__side{ flex-direction:row; align-items:center; gap:12px; }
}
@media (max-width:640px){
  .hide-sm{ display:none; }
  .header{ padding-block:14px; }
  .hero{ min-height:92svh; padding-top:120px; }
  .hero__title{ letter-spacing:-.04em; }
  .hero__title .outline{ -webkit-text-stroke-width:1px; }
  .hero__cta .btn{ flex:1 1 100%; justify-content:center; }
  .about__media{ flex-direction:column; }
  .portrait{ aspect-ratio:4/5; }
  .cv-card{ flex-direction:column; align-items:stretch; }
  .cv-card__actions .btn{ flex:1 1 100%; justify-content:center; }
  .stats{ grid-template-columns:1fr; gap:0; }
  .stat{ display:flex; align-items:baseline; gap:16px; padding-block:16px; }
  .stat__num{ font-size:34px; }
  .stat__lbl{ margin-top:0; }
  .stat__lbl br{ display:none; }
  .pgrid{ grid-template-columns:1fr; }
  .gh__profile{ flex-direction:column; align-items:stretch; }
  .gh__nums{ justify-content:space-between; }
  .cert{ flex-direction:column; gap:14px; }
  .footer__inner{ flex-direction:column; align-items:flex-start; }
  .footer__meta{ align-items:flex-start; }
  .contact__mail{ font-size:15px; padding:14px 22px; gap:10px; }
}
@media (max-width:380px){
  .brand__text{ display:none; }
  .marquee__group span{ font-size:20px; }
}

/* ---------- 20. Motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__title .char{ opacity:1; transform:none; }
  .grain{ display:none; }
}
@media print{
  .header,.menu,.preloader,.cursor,.cursor-dot,.grain,.scroll-progress,.marquee,.hero__scroll{ display:none !important; }
  body{ background:#fff; color:#000; }
  .reveal{ opacity:1; transform:none; }
}