/* ============================================================
RESET & ROOT
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
/* Section palette */
--navy: #07111F;
--navy-mid: #0B1E36;
--navy-lt: #102540;
--navy-deep: #0A192F;
--charcoal: #0E0E10;
--charcoal2: #111113;
--crimson: #1A0508;
--crimson2: #200A0D;
--emerald: #030F09;
--emerald2: #041209;
--plum: #09050F;
--plum2: #0D0718;
--silver: #F0EDE8;
--silver2: #E8E4DE;
/* Accents */
--ice: #4FC3F7;
--ice-dim: rgba(79,195,247,0.12);
--ice-glow: rgba(79,195,247,0.06);
--red-acc: #E53935;
--red-glow: rgba(229,57,53,0.1);
--grn-acc: #00C853;
--grn-glow: rgba(0,200,83,0.1);
--pur-acc: #9C27B0;
--pur-glow: rgba(156,39,176,0.12);
--sil-acc: #B0BEC5;
/* Type */
--display: 'Bebas Neue', sans-serif;
--serif: 'Playfair Display', serif;
--body: 'IBM Plex Mono', monospace;
--sans: system-ui, sans-serif;
}
html{scroll-behavior:auto;overflow-x:hidden}
body{
background:var(--navy);
color:#fff;
font-family:var(--body);
overflow-x:hidden;
}
::selection{background:var(--ice);color:#000}
::-webkit-scrollbar{width:2px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:var(--ice)}
/* ============================================================
NOISE OVERLAY — cinematic grain
============================================================ */
#grain{
position:fixed;inset:0;pointer-events:none;z-index:9990;
opacity:.38;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-size:200px 200px;
animation:grainShift 0.08s steps(1) infinite;
}
@keyframes grainShift{
0%{background-position:0 0}25%{background-position:-30px 20px}
50%{background-position:20px -25px}75%{background-position:-15px 30px}
}
/* ============================================================
SCROLL PROGRESS
============================================================ */
#bar{
position:fixed;top:0;left:0;height:1.5px;
background:linear-gradient(90deg,var(--ice),rgba(79,195,247,0.3));
z-index:99997;width:0%;
box-shadow:0 0 8px var(--ice);
}
/* ============================================================
LOADER
============================================================ */
#loader{
position:fixed;inset:0;background:#000;z-index:999999;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:2.5rem;
}
.ld-num{
font-family:var(--display);font-size:clamp(5rem,18vw,16rem);
letter-spacing:-.02em;color:#fff;line-height:1;
position:relative;
}
.ld-num span{
position:absolute;bottom:0;left:50%;transform:translateX(-50%);
width:0%;height:1px;background:var(--ice);
box-shadow:0 0 16px var(--ice);
}
.ld-label{
font-family:var(--body);font-size:.6rem;letter-spacing:.35em;
color:rgba(255,255,255,.28);text-transform:uppercase;
}
.ld-count{font-family:var(--body);font-size:.72rem;letter-spacing:.15em;color:var(--ice);opacity:0}
/* ============================================================
NAVBAR
============================================================ */
nav{
position:fixed;top:0;left:0;right:0;z-index:9000;
padding:1.4rem 4rem;
display:flex;align-items:center;justify-content:space-between;
transition:all .45s ease;
background:transparent;
}
nav.on-light{background:rgba(250,250,250,.82);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(26,26,26,.08)}
/* hero: fully clear at the very top, white sheet fades in the moment you scroll */
nav.on-hero{background:rgba(250,250,250,0);border-bottom:1px solid rgba(26,26,26,0)}
nav.on-hero.scrolled{
padding:1rem 4rem;
background:rgba(250,250,250,.92);
backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
border-bottom:1px solid rgba(26,26,26,.08);
box-shadow:0 1px 24px -12px rgba(0,0,0,.25);
}
nav.on-light .nav-logo,nav.on-hero .nav-logo{color:#0A0A0A}
nav.on-hero .nav-logo b,nav.on-light .nav-logo b{color:#D1342F}
nav.on-hero .nav-links a,nav.on-light .nav-links a{color:rgba(10,10,10,0.42)}
nav.on-hero .nav-links a:hover,
nav.on-hero .nav-links a.act,
nav.on-light .nav-links a:hover,
nav.on-light .nav-links a.act{color:#0A0A0A}
nav.on-hero .nav-links a::after,nav.on-light .nav-links a::after{background:#0A0A0A;box-shadow:none}
nav.on-hero .btn-cv,nav.on-light .btn-cv{border-color:rgba(10,10,10,0.3);color:#0A0A0A}
nav.on-hero .btn-cv:hover,nav.on-light .btn-cv:hover{background:#0A0A0A;color:#EFE9DC;box-shadow:none}
nav.glass{
background:rgba(7,17,31,.82);
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
border-bottom:1px solid rgba(79,195,247,.08);
padding:1rem 4rem;
}
.nav-logo{
font-family:var(--display);font-size:1.5rem;letter-spacing:.08em;
color:#fff;text-decoration:none;
transition:color .4s ease;
}
.nav-logo b{color:var(--ice);transition:color .4s ease}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links a{
font-family:var(--body);font-size:.62rem;letter-spacing:.2em;
text-transform:uppercase;color:rgba(255,255,255,.4);
text-decoration:none;transition:color .3s;position:relative;
}
.nav-links a::after{
content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;
background:var(--ice);transition:width .35s;box-shadow:0 0 6px var(--ice);
}
.nav-links a:hover,.nav-links a.act{color:#fff}
.nav-links a.act::after,.nav-links a:hover::after{width:100%}
.nav-r{display:flex;gap:1rem;align-items:center}
.btn-cv{
padding:.4rem 1.2rem;border:1px solid rgba(79,195,247,.4);
color:var(--ice);font-family:var(--body);font-size:.62rem;letter-spacing:.12em;
background:transparent;transition:all .35s;text-decoration:none;
}
.btn-cv:hover{background:var(--ice);color:#000;box-shadow:0 0 20px rgba(79,195,247,.3)}
/* ============================================================
CHAPTER CONTAINER — fullscreen stacked
============================================================ */
.chapter{
position:relative;
width:100%;min-height:100vh;
overflow:hidden;
display:flex;flex-direction:column;justify-content:center;
}
/* ════════════════════════════════════════════════════════════
SHARED CHAPTER HEADER
One eyebrow and one title scale for every section, matched to
the Certificates heading, so the whole page reads as one document.
════════════════════════════════════════════════════════════ */
.ch-eyebrow{
font-family:var(--body);font-size:.6rem;letter-spacing:.3em;
text-transform:uppercase;display:flex;align-items:center;gap:.75rem;
margin-bottom:.9rem;
}
.ch-num{color:rgba(255,255,255,.32)}
.ch-lbl{color:rgba(255,255,255,.4)}
h2.ch-title{
font-family:var(--body);font-weight:700;
font-size:clamp(1.3rem,2vw,1.5rem);
line-height:1.28;letter-spacing:.015em;
text-transform:uppercase;color:#fff;
}
h2.ch-title em{color:var(--ice);font-style:normal;font-weight:700}
/* ============================================================
CH2 — ABOUT · Charcoal Black
============================================================ */
/* ════════════════════════════════════════════════════════════
CH2 — THE STORY · About + Experience
Near-black blueprint ground, engineering grid, terracotta accent.
Three-column editorial grid: timeline | content | insight panel.
Spacing is a strict 8px system: 24 / 32 / 48 / 64 / 96 only.
════════════════════════════════════════════════════════════ */
#ch-about{
--terra:#FF7A1A;
--ink-1:#FFFFFF;
--ink-2:#C9C9C9;
--ink-3:#8F8F8F;
--ink-4:#5C5C5C;
--div:rgba(255,255,255,.06);
--grid-l:rgba(255,255,255,.04);
--s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px;
background:#070707;
position:relative;z-index:1;
height:auto;min-height:100vh;
padding:var(--s12) 0;
overflow:hidden;
display:block;
font-family:var(--body);
}
/* ── blueprint ground: 60px engineering grid + one soft glow ── */
.about-bg{
position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:
linear-gradient(to right,var(--grid-l) 1px,transparent 1px),
linear-gradient(to bottom,var(--grid-l) 1px,transparent 1px);
background-size:32px 32px;
}
.about-bg::before{
content:'';position:absolute;inset:0;
background:radial-gradient(ellipse 58% 42% at 50% 10%,rgba(255,122,26,.07) 0%,transparent 62%);
}
.about-bg::after{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:rgba(255,255,255,.06);
}
.about-inner{
position:relative;z-index:2;
max-width:1200px;margin:0 auto;padding:0 var(--s6);
}
/* ── section header ── */
.story-head{
display:flex;align-items:flex-end;justify-content:space-between;
gap:var(--s6);flex-wrap:wrap;
padding-bottom:var(--s4);
border-bottom:1px solid var(--div);
margin-bottom:var(--s12);
}
#ch-about .ch-eyebrow{margin-bottom:var(--s3)}
#ch-about .ch-num{color:var(--terra)}
#ch-about .ch-lbl{color:var(--ink-4)}
#ch-about h2.ch-title{color:var(--ink-1)}
#ch-about h2.ch-title em{color:var(--terra);font-style:normal}
.story-kicker{
font-family:var(--body);font-size:11px;letter-spacing:.24em;
text-transform:uppercase;color:var(--ink-4);
max-width:280px;line-height:2;text-align:right;
}
/* ══ three-column editorial row ══ */
.order{
display:grid;
grid-template-columns:96px minmax(0,1fr) 320px;
gap:var(--s8);
align-items:start;
}
.order + .order{
margin-top:var(--s12);
padding-top:var(--s12);
border-top:1px solid var(--div);
}
/* ── column 1 · timeline ── */
.o-mark{position:relative;text-align:center}
.o-num{
width:64px;height:64px;margin:0 auto;
border:1px solid rgba(255,122,26,.4);border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:var(--serif);font-size:24px;line-height:1;
color:var(--terra);letter-spacing:.04em;
}
.o-label{
margin-top:var(--s3);
font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:var(--ink-4);line-height:1.8;
}
.o-rail{
position:absolute;left:50%;top:calc(64px + var(--s8));bottom:0;
width:1px;background:rgba(255,255,255,.06);
}
/* ── column 2 · main content ── */
.o-body{max-width:620px}
.o-title{
font-family:'Inter','Geist',-apple-system,system-ui,sans-serif;
font-weight:600;font-size:clamp(30px,3.6vw,48px);
line-height:1.1;letter-spacing:-.025em;color:var(--ink-1);
}
.o-period{
margin-top:var(--s3);
font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--terra);
}
.o-sub{
margin-top:var(--s3);
font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
}
.o-lead{
margin-top:var(--s6);
font-size:18px;line-height:1.9;color:var(--ink-2);max-width:620px;
}
/* short statements, each with its own air and rule */
.o-statements{list-style:none;margin:var(--s6) 0 0;padding:0}
.o-statements li{
font-size:18px;line-height:1.9;color:var(--ink-2);
padding-bottom:var(--s3);margin-bottom:var(--s3);
border-bottom:1px solid var(--div);
}
.o-statements li:last-child{border-bottom:none;margin-bottom:0}
.k{color:var(--terra);font-style:normal;font-weight:400}
/* experience blocks: label, then prose, then a rule */
.xblock{padding-bottom:var(--s4);margin-bottom:var(--s4);border-bottom:1px solid var(--div)}
.xblock:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.xk{
font-size:11px;letter-spacing:.24em;text-transform:uppercase;
color:var(--terra);margin-bottom:var(--s3);
}
.xblock p{font-size:18px;line-height:1.9;color:var(--ink-2);max-width:620px}
.xtools{display:flex;flex-wrap:wrap;gap:var(--s3)}
.xtools span{font-size:15px;line-height:1.9;color:var(--ink-2)}
/* ── column 3 · insight panel ── */
.o-panel{display:flex;flex-direction:column;gap:var(--s8)}
.pquote{
border-left:1px solid rgba(255,122,26,.5);
padding-left:var(--s3);
font-family:var(--serif);font-style:italic;
font-size:22px;line-height:1.6;color:var(--ink-3);
}
.p-block .p-k{
font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:var(--ink-4);margin-bottom:var(--s3);
padding-bottom:var(--s3);border-bottom:1px solid var(--div);
}
.p-block p{font-size:15px;line-height:1.9;color:var(--ink-3)}
.p-list{list-style:none;margin:0;padding:0}
.p-list li{
font-size:15px;line-height:1.9;color:var(--ink-2);
padding:0 0 var(--s3);margin-bottom:var(--s3);
border-bottom:1px solid var(--div);
}
.p-list li:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
/* dashboard-style metrics */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6) var(--s4)}
.metric b{
display:block;
font-family:'Inter','Geist',-apple-system,system-ui,sans-serif;
font-weight:600;font-size:48px;line-height:1;letter-spacing:-.03em;
color:var(--ink-1);
}
.metric span{
display:block;margin-top:var(--s3);
font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);
}
/* ══ responsive ══ */
@media(max-width:1080px){
.order{grid-template-columns:80px minmax(0,1fr);gap:var(--s6)}
.o-panel{grid-column:1 / -1;margin-top:var(--s8)}
.metrics{grid-template-columns:repeat(4,1fr)}
.o-rail{display:none}
}
@media(max-width:720px){
#ch-about{padding:var(--s8) 0}
.about-inner{padding:0 var(--s3)}
.about-bg{background-size:32px 32px}
.story-head{margin-bottom:var(--s8);flex-direction:column;align-items:flex-start}
.story-kicker{text-align:left;max-width:none}
.order{grid-template-columns:1fr;gap:var(--s6)}
.order + .order{margin-top:var(--s8);padding-top:var(--s8)}
.o-mark{display:flex;align-items:center;gap:var(--s3);text-align:left}
.o-num{width:48px;height:48px;font-size:20px;margin:0}
.o-label{margin-top:0}
.o-title{font-size:28px}
.o-lead,.o-statements li,.xblock p{font-size:16px;line-height:1.85}
.o-panel{margin-top:0;gap:var(--s6)}
.pquote{font-size:19px}
.metrics{grid-template-columns:1fr 1fr;gap:var(--s4)}
.metric b{font-size:36px}
}
/* ============================================================
CH3 — PROJECTS · Cinematic Crimson — PREMIUM REDESIGN
============================================================ */
#ch-projects{
background:var(--crimson);
padding:0;
height:100vh;
overflow:hidden;
position:relative;
z-index:3;
}
.projects-bg{
position:absolute;inset:0;
background:
radial-gradient(ellipse 80% 60% at 50% 100%,rgba(229,57,53,.07) 0%,transparent 55%),
radial-gradient(ellipse 50% 50% at 0% 50%,rgba(120,0,0,.08) 0%,transparent 55%),
radial-gradient(ellipse 40% 40% at 100% 0%,rgba(183,28,28,.05) 0%,transparent 50%);
}
.projects-bg::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(229,57,53,.4),transparent);
}
.projects-bg::after{
content:'';position:absolute;inset:0;
background-image:
linear-gradient(rgba(229,57,53,.018) 1px,transparent 1px),
linear-gradient(90deg,rgba(229,57,53,.018) 1px,transparent 1px);
background-size:32px 32px;
mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,black 0%,transparent 80%);
}
/* Fixed layout: header + card grid */
/* ──────────────────────────────────────────────
PROJECTS — pinned section + horizontal slide
────────────────────────────────────────────── */
/* The section wrapper holds 100vh; extra scroll
space (4×100vh) is added by GSAP pin spacer */
#proj-viewport{
position:absolute;inset:0;overflow:hidden;z-index:2;
}
#proj-track{
/* width is set from slides.length in JS so it can never drift again;
this value is only the no-JS fallback */
display:flex;width:500vw;height:100vh;
will-change:transform;
}
/* Persistent header overlay */
.projects-head{
position:absolute;top:0;left:0;right:0;z-index:10;
padding:3.5rem 5rem 0;
display:flex;align-items:flex-end;justify-content:space-between;
flex-wrap:wrap;gap:1rem;pointer-events:none;
will-change:opacity,transform;
}
.projects-head .ch-title{font-size:clamp(1.3rem,2vw,1.5rem);line-height:.9}
h2.ch-title.red em{color:var(--red-acc)}
.proj-counter{
font-family:var(--display);font-size:clamp(2.5rem,4vw,4rem);
color:rgba(229,57,53,.1);line-height:1;text-align:right;pointer-events:none;
}
.proj-counter span{
display:block;font-family:var(--body);font-size:.54rem;
letter-spacing:.2em;color:rgba(229,57,53,.26);text-transform:uppercase;margin-top:.2rem;
}
/* Each slide = full viewport — CENTERED single-column layout */
.pcard-new{
width:100vw;height:100vh;flex-shrink:0;
position:relative;overflow:hidden;
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;
padding:6rem 6vw 4.5rem;
}
/* Static atmospheric glow per card */
.pcard-new::before{
content:'';position:absolute;inset:0;
background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(229,57,53,.07) 0%,transparent 62%);
pointer-events:none;z-index:0;
}
/* Mouse-tracked inner glow */
.pcard-new::after{
content:'';position:absolute;inset:0;
background:radial-gradient(ellipse 40% 45% at var(--mx,50%) var(--my,50%),rgba(229,57,53,.06) 0%,transparent 55%);
opacity:0;transition:opacity .4s;pointer-events:none;z-index:1;
}
.pcard-new:hover::after{opacity:1}
/* Centered content column */
.p-slide-left{
position:relative;z-index:2;
display:flex;flex-direction:column;align-items:center;
max-width:740px;width:100%;
}
/* Giant number watermark — centered behind the title */
.pc-num-bg{
position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);
font-family:var(--display);font-size:clamp(12rem,26vw,28rem);
color:rgba(229,57,53,.05);line-height:1;letter-spacing:-.04em;
pointer-events:none;white-space:nowrap;z-index:-1;
}
.pc-cat{
font-family:var(--body);font-size:.6rem;letter-spacing:.28em;
color:rgba(229,57,53,.65);text-transform:uppercase;
display:flex;align-items:center;justify-content:center;gap:.7rem;margin-bottom:1.2rem;
}
.pc-cat::before,.pc-cat::after{content:'';width:28px;height:1px;background:rgba(229,57,53,.4);display:block}
h3.pc-title{
font-family:var(--display);
font-size:clamp(2.8rem,7vw,6.5rem);
letter-spacing:-.02em;line-height:.88;color:#fff;margin-bottom:1.4rem;
text-shadow:0 0 60px rgba(229,57,53,.1);
}
.pc-desc{
font-family:var(--body);font-size:.82rem;line-height:1.95;
color:rgba(255,255,255,.4);max-width:560px;margin:0 auto 2rem;
}
/* Project bullet points */
.pc-points{
list-style:none;margin:0 auto 1.6rem;padding:0;
max-width:660px;text-align:left;
display:flex;flex-direction:column;gap:.8rem;
}
.pc-points li{
position:relative;padding-left:1.5rem;
font-family:var(--body);font-size:.755rem;line-height:1.66;
color:rgba(255,255,255,.52);
}
.pc-points li::before{
content:'';position:absolute;left:0;top:.6em;
width:.8rem;height:1px;background:var(--red-acc);
box-shadow:0 0 8px rgba(229,57,53,.5);
}
.pc-points li strong{color:rgba(255,255,255,.85);font-weight:500}
.pc-points li em{color:var(--red-acc);font-style:normal;font-weight:500}
.pc-stack{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.7rem;justify-content:center}
.pc-tag{
padding:.3rem .8rem;background:rgba(229,57,53,.07);
border:1px solid rgba(229,57,53,.2);
font-family:var(--body);font-size:.56rem;letter-spacing:.06em;
color:rgba(229,57,53,.78);transition:all .3s;
}
.pcard-new:hover .pc-tag{background:rgba(229,57,53,.12);border-color:rgba(229,57,53,.3);color:rgba(229,57,53,.98)}
.pc-links{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.btn-red{
padding:.65rem 1.7rem;background:var(--red-acc);color:#fff;
font-family:var(--body);font-size:.62rem;letter-spacing:.1em;
border:none;text-decoration:none;display:inline-block;
transition:all .3s;box-shadow:0 0 24px rgba(229,57,53,.25);text-transform:uppercase;
}
.btn-red:hover{box-shadow:0 0 40px rgba(229,57,53,.5);transform:translateY(-2px)}
.btn-red-out{
padding:.65rem 1.7rem;border:1px solid rgba(229,57,53,.28);color:rgba(255,255,255,.45);
font-family:var(--body);font-size:.62rem;letter-spacing:.1em;
background:transparent;text-decoration:none;display:inline-block;
transition:all .3s;text-transform:uppercase;
}
.btn-red-out:hover{border-color:var(--red-acc);color:rgba(255,255,255,.9)}
/* Visual panel removed from centered layout (kept hidden for compatibility) */
.p-slide-right{display:none}
/* Progress indicator */
.proj-dots{
position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
display:flex;gap:.65rem;z-index:10;
}
.pdot{
width:34px;height:1.5px;background:rgba(229,57,53,.18);
transition:all .4s;
}
.pdot.on{background:var(--red-acc);width:54px;box-shadow:0 0 10px rgba(229,57,53,.45)}
/* ════════════════════════════════════════════════════════════
PROJECTS — LIGHT THEME
Matches the case-study deep-dive pages (causa.html etc):
#FAFAFA graph paper, white cards, 1px near-black borders, Inter.
Layout/GSAP-critical properties are untouched — visual only.
════════════════════════════════════════════════════════════ */
#ch-projects{
--pl-bg:#FAFAFA;
--pl-card:#FFFFFF;
--pl-ink:#111111;
--pl-ink-2:#3A3A3A;
--pl-ink-3:#666666;
--pl-ink-4:#8C8C8C;
--pl-line:#1A1A1A;
--pl-line-soft:rgba(26,26,26,.14);
--pl-line-hair:rgba(26,26,26,.08);
--pl-sans:'Inter','Geist','IBM Plex Sans',-apple-system,system-ui,sans-serif;
--pl-mono:'IBM Plex Mono',ui-monospace,monospace;
background:var(--pl-bg);
}
/* graph paper instead of the red glow field */
.projects-bg{background:none}
.projects-bg::before{
background:linear-gradient(90deg,transparent,rgba(26,26,26,.16),transparent);
}
/* hairline on the bottom edge too, where light meets the dark section below */
.projects-bg{border-bottom:1px solid rgba(26,26,26,.10)}
.projects-bg::after{
background-image:
linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),
linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);
background-size:32px 32px;
-webkit-mask-image:none;mask-image:none;
}
/* section header */
.projects-head{padding:2.6rem 5rem 0}
.projects-head .ch-num{color:var(--pl-ink-4)}
.projects-head .ch-lbl{color:var(--pl-ink-4)}
.projects-head .ch-eyebrow{font-family:var(--pl-mono);letter-spacing:.09em}
.projects-head h2.ch-title.red{
font-family:var(--pl-sans);font-weight:700;
font-size:clamp(1.3rem,2vw,1.5rem);line-height:1.28;letter-spacing:.015em;
color:var(--pl-ink);
}
.projects-head h2.ch-title.red em{color:var(--pl-ink-3);font-style:normal;font-weight:600}
.proj-counter{
font-family:var(--pl-sans);font-weight:600;letter-spacing:-.02em;
font-size:clamp(1.6rem,2.4vw,2.2rem);color:var(--pl-ink-4);
}
.proj-counter span{
font-family:var(--pl-mono);color:var(--pl-ink-4);opacity:.8;
font-size:.52rem;letter-spacing:.14em;
}
/* kill the red atmospheric glows */
.pcard-new::before{background:none}
.pcard-new::after{
background:radial-gradient(ellipse 42% 46% at var(--mx,50%) var(--my,50%),rgba(17,17,17,.035) 0%,transparent 58%);
}
/* content column becomes a real white card */
.pcard-new{padding:8.5rem 6vw 4.25rem}
.pcard-new .p-slide-left{
max-width:780px;
background:var(--pl-card);
border:1px solid rgba(26,26,26,.82);
border-radius:8px;
box-shadow:0 1px 2px rgba(17,17,17,.05);
padding:2.6rem 2.8rem;
overflow:hidden;
text-align:left;align-items:stretch;
transition:transform .24s cubic-bezier(.16,1,.3,1),box-shadow .24s cubic-bezier(.16,1,.3,1),border-color .24s ease;
}
.pcard-new:hover .p-slide-left{
transform:translateY(-3px);
box-shadow:0 6px 18px rgba(17,17,17,.09);
border-color:#000;
}
/* faint numeral, top-right inside the card */
.pcard-new .pc-num-bg{
left:auto;right:1.6rem;top:1.1rem;transform:none;
font-family:var(--pl-sans);font-weight:600;letter-spacing:-.04em;
font-size:clamp(4.5rem,8vw,7rem);
color:rgba(17,17,17,.055);
z-index:0;
}
/* card type */
.pcard-new .pc-cat{
font-family:var(--pl-mono);font-size:.62rem;font-weight:500;
letter-spacing:.1em;color:var(--pl-ink-4);
justify-content:flex-start;margin-bottom:.9rem;position:relative;z-index:1;
}
.pcard-new .pc-cat::before,.pcard-new .pc-cat::after{display:none}
.pcard-new h3.pc-title{
font-family:var(--pl-sans);font-weight:600;
font-size:clamp(1.6rem,2.9vw,2.3rem);line-height:1.16;letter-spacing:-.022em;
color:var(--pl-ink);margin-bottom:1.15rem;
text-shadow:none;position:relative;z-index:1;
}
.pcard-new .pc-points{
margin:0 0 1.5rem;max-width:none;gap:.75rem;position:relative;z-index:1;
}
.pcard-new .pc-points li{
font-family:var(--pl-sans);font-size:.9rem;line-height:1.62;
color:var(--pl-ink-3);padding-left:1.15rem;
}
.pcard-new .pc-points li::before{
top:.66em;width:.55rem;height:1.5px;background:var(--pl-line);
box-shadow:none;opacity:.75;
}
.pcard-new .pc-points li strong{color:var(--pl-ink-2);font-weight:600}
.pcard-new .pc-points li em{color:var(--pl-ink);font-weight:600;font-style:normal}
/* stack chips */
.pcard-new .pc-stack{justify-content:flex-start;gap:.45rem;margin-bottom:1.6rem;position:relative;z-index:1}
.pcard-new .pc-tag{
font-family:var(--pl-sans);font-size:.72rem;font-weight:500;letter-spacing:0;
color:var(--pl-ink-3);background:var(--pl-card);
border:1px solid var(--pl-line-soft);border-radius:6px;padding:.3rem .65rem;
}
.pcard-new:hover .pc-tag{background:var(--pl-card);border-color:var(--pl-line-soft);color:var(--pl-ink-3)}
.pcard-new .pc-tag:hover{border-color:var(--pl-line);color:var(--pl-ink)}
/* buttons */
.pcard-new .pc-links{justify-content:flex-start;gap:.55rem;position:relative;z-index:1}
.pcard-new .btn-red{
font-family:var(--pl-sans);font-size:.78rem;font-weight:500;letter-spacing:0;
text-transform:none;padding:.55rem 1.05rem;border-radius:6px;
background:var(--pl-ink);color:#fff;border:1px solid var(--pl-ink);box-shadow:none;
}
.pcard-new .btn-red:hover{
background:#000;transform:none;box-shadow:0 4px 14px rgba(17,17,17,.22);
}
.pcard-new .btn-red-out{
font-family:var(--pl-sans);font-size:.78rem;font-weight:500;letter-spacing:0;
text-transform:none;padding:.55rem 1.05rem;border-radius:6px;
background:var(--pl-card);color:var(--pl-ink-2);border:1px solid var(--pl-line-soft);
}
.pcard-new .btn-red-out:hover{
border-color:var(--pl-line);color:var(--pl-ink);
box-shadow:0 1px 2px rgba(17,17,17,.05);
}
/* dots */
.pdot{background:rgba(26,26,26,.16)}
.pdot.on{background:var(--pl-line);box-shadow:none}
@media(max-height:820px) and (min-width:901px){
.pcard-new{padding:7.5rem 6vw 3.5rem}
.pcard-new .p-slide-left{padding:2rem 2.2rem}
.pcard-new h3.pc-title{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:.9rem}
.pcard-new .pc-points{gap:.6rem;margin-bottom:1.1rem}
.pcard-new .pc-points li{font-size:.84rem;line-height:1.56}
.pcard-new .pc-stack{margin-bottom:1.1rem}
.pcard-new .pc-num-bg{font-size:clamp(3.5rem,6vw,5.5rem)}
}
@media(max-width:900px){
.projects-head{padding:1.4rem 1.25rem 0}
.pcard-new{padding:9rem 1.1rem 3.4rem}
.pcard-new .p-slide-left{padding:1.7rem 1.4rem;border-radius:8px}
.pcard-new .pc-num-bg{font-size:clamp(3.4rem,16vw,5rem);right:1rem;top:.7rem}
.pcard-new h3.pc-title{font-size:clamp(1.35rem,6.4vw,1.9rem);margin-bottom:.9rem}
.pcard-new .pc-points li{font-size:.8rem;line-height:1.58}
.pcard-new .pc-links{flex-wrap:wrap}
}
/* ============================================================
CH4 — EXPERIENCE · Deep Emerald — VP OVERLAY SCENE
============================================================ */
/* ════════════════════════════════════════════════════════════
/* ============================================================
CH5 — ADVENTURE / LIFE GOALS · Midnight Purple
============================================================ */
#ch-life{
background:var(--plum);
padding:10rem 5rem;
min-height:100vh;
}
.life-bg{
position:absolute;inset:0;
background:
radial-gradient(ellipse 70% 60% at 50% 50%,rgba(156,39,176,.06) 0%,transparent 65%),
radial-gradient(ellipse 30% 40% at 90% 10%,rgba(156,39,176,.04) 0%,transparent 55%),
radial-gradient(ellipse 25% 30% at 5% 90%,rgba(103,58,183,.04) 0%,transparent 55%);
}
.life-bg::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(156,39,176,.35),transparent);
}
/* Stars */
.stars{position:absolute;inset:0;overflow:hidden}
.star{
position:absolute;width:1px;height:1px;background:#fff;border-radius:50%;
animation:twinkle var(--d,3s) ease-in-out infinite;opacity:var(--o,0.3);
}
@keyframes twinkle{0%,100%{opacity:var(--o,.3)}50%{opacity:.8}}
.life-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto}
.life-header{margin-bottom:5rem}
h2.ch-title.pur em{color:var(--pur-acc)}
.life-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.life-card{
padding:2.5rem;border:1px solid rgba(156,39,176,.1);
position:relative;overflow:hidden;transition:all .45s;
background:rgba(156,39,176,.02);
}
.life-card:hover{
border-color:rgba(156,39,176,.25);
background:rgba(156,39,176,.04);
transform:translateY(-4px);
}
.life-card::after{
content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;
background:linear-gradient(90deg,transparent,rgba(156,39,176,.5),transparent);
transform:scaleX(0);transition:transform .45s;
}
.life-card:hover::after{transform:scaleX(1)}
.lc-icon{font-size:2rem;margin-bottom:1.5rem;filter:grayscale(40%)}
.lc-title{
font-family:var(--display);font-size:1.8rem;color:#fff;
margin-bottom:.75rem;line-height:1;
}
.lc-txt{
font-family:var(--body);font-size:.72rem;line-height:1.9;
color:rgba(255,255,255,.28);
}
.life-card.feat{
border-color:rgba(156,39,176,.2);
background:rgba(156,39,176,.05);
}
.life-card.feat .lc-title{color:var(--pur-acc)}
.life-skills{
margin-top:5rem;
border-top:1px solid rgba(156,39,176,.1);
padding-top:4rem;
}
.ls-title{
font-family:var(--body);font-size:.6rem;letter-spacing:.3em;color:rgba(156,39,176,.5);
text-transform:uppercase;margin-bottom:2rem;
}
.edu-list{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.edu-row{
padding:1.5rem 0;border-bottom:1px solid rgba(156,39,176,.06);
}
.edu-yr{font-family:var(--body);font-size:.6rem;color:rgba(156,39,176,.5);letter-spacing:.15em;margin-bottom:.4rem}
.edu-deg{font-family:var(--serif);font-size:1rem;color:rgba(255,255,255,.7)}
.edu-sch{font-family:var(--body);font-size:.65rem;color:rgba(255,255,255,.25);margin-top:.2rem}
/* Certifications sub-grid */
.cert-row{margin-top:5rem}
.cert-label{font-family:var(--body);font-size:.6rem;letter-spacing:.3em;color:rgba(156,39,176,.5);text-transform:uppercase;margin-bottom:2rem}
.cert-flex{display:flex;flex-wrap:wrap;gap:1rem}
.cert-chip{
padding:.7rem 1.4rem;border:1px solid rgba(156,39,176,.15);
font-family:var(--body);font-size:.65rem;letter-spacing:.06em;
color:rgba(255,255,255,.3);transition:all .3s;
}
.cert-chip:hover{border-color:rgba(156,39,176,.4);color:rgba(156,39,176,.8)}
.cert-chip b{color:rgba(156,39,176,.6);font-weight:400}
/* ============================================================
CH — CERTIFICATIONS · credential / seal restyle
============================================================ */
#ch-certs{
--acc:#4FC3F7; /* ice accent */
--acc-soft:rgba(79,195,247,.65);
background:
radial-gradient(ellipse 70% 50% at 50% 0%, #14171c 0%, transparent 62%),
linear-gradient(180deg,#08080a 0%,#0b0d11 50%,#08080a 100%);
padding:7rem 5rem;min-height:100vh;position:relative;z-index:1;
margin-top:-1px;
display:flex;align-items:center;
}
.certs-bg{
position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(ellipse 60% 60% at 80% 15%,rgba(255,255,255,.035) 0%,transparent 60%),
radial-gradient(ellipse 40% 50% at 10% 90%,rgba(255,255,255,.025) 0%,transparent 60%);
}
.certs-bg::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}
.certs-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;width:100%}
.certs-header{margin-bottom:2.6rem}
/* two credentials side by side */
.cert-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
.cert-duo .cert-feature{
grid-template-columns:1fr;gap:1.6rem;padding:2.4rem 2.2rem;
align-content:start;align-items:start;
}
.cert-duo .cert-feature::before{right:-190px;width:420px;height:420px}
.cert-duo .cf-seal{width:104px;height:104px}
.cert-duo .cf-seal-core b{font-size:1.35rem}
.cert-duo .cf-seal-core span{font-size:.38rem}
.cert-duo .cf-title{font-size:clamp(1.35rem,2.2vw,1.85rem);margin-bottom:.8rem}
.cert-duo .cf-desc{font-size:.72rem;line-height:1.85;max-width:none;margin-bottom:1.3rem}
.cert-duo .cf-meta{gap:1.3rem;margin-bottom:1.4rem}
.cert-duo .cf-btn{padding:.62rem 1.4rem;font-size:.58rem}
.cf-alt{
display:block;margin-top:.9rem;
font-family:var(--body);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
color:rgba(255,255,255,.32);text-decoration:none;transition:color .25s;
}
.cf-alt:hover{color:var(--acc)}
@media(max-width:900px){
.cert-duo{grid-template-columns:1fr;gap:1.2rem}
.cert-duo .cert-feature{padding:2rem 1.6rem}
}
h2.ch-title.ice em{color:var(--acc);font-style:normal}
/* Featured credential card */
.cert-feature{
position:relative;overflow:hidden;
display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:center;
padding:3.2rem 3.4rem;
border:1px solid rgba(79,195,247,.18);
background:linear-gradient(135deg,rgba(79,195,247,.05),rgba(79,195,247,.01));
transition:all .5s cubic-bezier(.23,1,.32,1);
}
.cert-feature::before{
content:'';position:absolute;right:-130px;top:50%;transform:translateY(-50%);
width:520px;height:520px;border-radius:50%;pointer-events:none;opacity:.55;z-index:0;
background:repeating-radial-gradient(circle at center,transparent 0 13px,rgba(79,195,247,.05) 13px 14px);
-webkit-mask-image:radial-gradient(circle at center,black 0%,transparent 70%);
mask-image:radial-gradient(circle at center,black 0%,transparent 70%);
}
.cert-feature:hover{
border-color:rgba(79,195,247,.34);
box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(79,195,247,.08);
}
/* verified ribbon */
.cf-ribbon{
position:absolute;top:1.4rem;right:1.4rem;z-index:3;
display:inline-flex;align-items:center;gap:.5rem;
padding:.42rem .85rem;border:1px solid rgba(0,200,83,.32);background:rgba(0,200,83,.07);
font-family:var(--body);font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;
color:rgba(0,200,83,.9);
}
.cf-ribbon::before{content:'';width:6px;height:6px;border-radius:50%;background:#00C853;box-shadow:0 0 8px rgba(0,200,83,.7)}
/* seal */
.cf-seal{position:relative;z-index:2;width:150px;height:150px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.cf-seal-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(79,195,247,.35);animation:cfSpin 26s linear infinite}
.cf-seal-ring.inner{inset:14px;border-style:solid;border-color:rgba(79,195,247,.18);animation:none}
.cf-seal-core{
position:relative;z-index:2;width:96px;height:96px;border-radius:50%;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
background:radial-gradient(circle at 50% 35%,rgba(79,195,247,.18),rgba(79,195,247,.02));
border:1px solid rgba(79,195,247,.3);
box-shadow:inset 0 0 24px rgba(79,195,247,.12),0 0 30px rgba(79,195,247,.1);
}
.cf-seal-core b{font-family:var(--display);font-size:1.9rem;letter-spacing:.04em;color:var(--acc);line-height:1}
.cf-seal-core span{font-family:var(--body);font-size:.42rem;letter-spacing:.18em;color:rgba(255,255,255,.45)}
@keyframes cfSpin{to{transform:rotate(360deg)}}
.cf-body{position:relative;z-index:2}
.cf-tag{font-family:var(--body);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--acc-soft);margin-bottom:.85rem}
.cf-title{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1;color:#fff;margin-bottom:1rem;letter-spacing:.01em}
.cf-desc{font-family:var(--body);font-size:.75rem;line-height:1.95;color:rgba(255,255,255,.4);max-width:60ch;margin-bottom:1.6rem}
.cf-meta{display:flex;flex-wrap:wrap;gap:2.2rem;margin-bottom:1.8rem}
.cf-meta-item{display:flex;flex-direction:column;gap:.28rem}
.cf-meta-k{font-family:var(--body);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.28)}
.cf-meta-v{font-family:var(--body);font-size:.74rem;color:rgba(255,255,255,.72);letter-spacing:.04em}
.cf-btn{
display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.9rem;
background:var(--acc);color:#06121f;
font-family:var(--body);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
text-decoration:none;transition:all .35s;box-shadow:0 0 24px rgba(79,195,247,.22);
}
.cf-btn:hover{box-shadow:0 0 42px rgba(79,195,247,.5);transform:translateY(-2px)}
/* additional chips */
.certs-more{margin-top:3.5rem}
.certs-more-label{font-family:var(--body);font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--acc-soft);margin-bottom:1.6rem;display:flex;align-items:center;gap:.7rem}
.certs-more-label::before{content:'';width:18px;height:1px;background:var(--acc);opacity:.6}
.certs-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem}
.cert-chip2{display:flex;align-items:center;gap:.85rem;padding:.95rem 1.1rem;border:1px solid rgba(79,195,247,.14);background:rgba(79,195,247,.025);transition:all .3s}
.cert-chip2:hover{border-color:rgba(79,195,247,.4);background:rgba(79,195,247,.05);transform:translateY(-2px)}
.cert-chip2 .cc-mark{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(79,195,247,.3);color:var(--acc);font-size:.7rem;background:rgba(79,195,247,.05)}
.cert-chip2 .cc-txt{display:flex;flex-direction:column;gap:.18rem;min-width:0}
.cert-chip2 .cc-org{font-family:var(--body);font-size:.72rem;color:rgba(255,255,255,.82);letter-spacing:.02em}
.cert-chip2 .cc-sub{font-family:var(--body);font-size:.58rem;color:rgba(255,255,255,.32);letter-spacing:.05em}
@media(max-width:768px){
#ch-certs{padding:7rem 1.5rem}
.cert-feature{grid-template-columns:1fr;gap:2rem;padding:2.4rem 1.6rem;text-align:center}
.cf-seal{margin:0 auto}
.cf-meta{justify-content:center}
.cf-desc{margin-left:auto;margin-right:auto}
.cf-ribbon{position:static;margin:0 auto 1.2rem;width:max-content}
}
/* ============================================================
CH — PUBLICATIONS · Navy + parchment, matches site theme
============================================================ */
#ch-pubs{
background:
radial-gradient(ellipse 70% 50% at 50% 0%, #16161a 0%, transparent 62%),
linear-gradient(180deg,#08080a 0%,#0c0c0f 50%,#08080a 100%);
padding:10rem 5rem;
min-height:100vh;
position:relative;
z-index:1;
overflow:hidden;
--pub-acc:#D4C4A0;
--pub-soft:rgba(212,196,160,.55);
--pub-dim:rgba(212,196,160,.18);
--pub-faint:rgba(212,196,160,.05);
}
.pubs-bg{
position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(ellipse 55% 55% at 78% 18%,rgba(212,196,160,.05) 0%,transparent 60%),
radial-gradient(ellipse 40% 50% at 12% 88%,rgba(212,196,160,.035) 0%,transparent 60%);
}
/* decorative open-book SVG (mirrors the certs-art seal idea) */
.pubs-art{
position:absolute;right:-160px;top:50%;transform:translateY(-50%);
width:680px;height:580px;pointer-events:none;z-index:1;
color:var(--pub-acc);opacity:.10;
-webkit-mask-image:radial-gradient(circle at center,black 0%,transparent 70%);
mask-image:radial-gradient(circle at center,black 0%,transparent 70%);
}
.pubs-art svg{width:100%;height:100%}
.pubs-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto}
/* Header — same pattern as other chapters */
.pubs-header{
display:flex;align-items:flex-end;justify-content:space-between;
flex-wrap:wrap;gap:2rem;margin-bottom:3.5rem;
}
.pubs-header .ch-lbl{color:rgba(212,196,160,.5)}
h2.ch-title.parch em{color:var(--pub-acc);font-style:normal}
/* ============================================================
Featured publication card — mirrors .cert-feature structure
============================================================ */
.pub-feature{
position:relative;overflow:hidden;
display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:center;
padding:3rem 3.4rem;
border:1px solid rgba(212,196,160,.16);
background:linear-gradient(135deg,rgba(212,196,160,.045),rgba(212,196,160,.008));
transition:all .5s cubic-bezier(.23,1,.32,1);
margin-bottom:3rem;
}
/* concentric dotted decoration — same vocabulary as certs */
.pub-feature::before{
content:'';position:absolute;right:-150px;top:50%;transform:translateY(-50%);
width:500px;height:500px;border-radius:50%;pointer-events:none;opacity:.5;z-index:0;
background:repeating-radial-gradient(circle at center,transparent 0 14px,rgba(212,196,160,.05) 14px 15px);
-webkit-mask-image:radial-gradient(circle at center,black 0%,transparent 70%);
mask-image:radial-gradient(circle at center,black 0%,transparent 70%);
}
.pub-feature:hover{
border-color:rgba(212,196,160,.32);
box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(212,196,160,.08);
}
/* Featured ribbon — same as cf-ribbon but parchment-toned */
.pf-ribbon{
position:absolute;top:1.4rem;right:1.4rem;z-index:3;
display:inline-flex;align-items:center;gap:.5rem;
padding:.42rem .85rem;
border:1px solid rgba(212,196,160,.32);
background:rgba(212,196,160,.06);
font-family:var(--body);font-size:.52rem;letter-spacing:.22em;
text-transform:uppercase;color:var(--pub-acc);
}
.pf-ribbon::before{
content:'';width:6px;height:6px;border-radius:50%;
background:var(--pub-acc);box-shadow:0 0 8px rgba(212,196,160,.6);
}
/* Book-cover visual — replaces the cert seal */
.pf-cover{
position:relative;z-index:2;width:160px;height:200px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
}
.pf-cover-spine{
position:absolute;left:0;top:6px;bottom:6px;width:6px;
background:linear-gradient(180deg,rgba(212,196,160,.7),rgba(212,196,160,.25));
box-shadow:0 0 18px rgba(212,196,160,.18);
}
.pf-cover-body{
position:relative;width:100%;height:100%;
background:linear-gradient(160deg,rgba(212,196,160,.10),rgba(212,196,160,.02));
border:1px solid rgba(212,196,160,.3);
display:flex;flex-direction:column;justify-content:space-between;
padding:1.1rem .9rem 1rem 1.4rem;
box-shadow:inset 0 0 24px rgba(212,196,160,.08),0 14px 34px rgba(0,0,0,.4);
}
.pf-cover-rule{height:1px;background:rgba(212,196,160,.35)}
.pf-cover-cap{
font-family:var(--body);font-size:.46rem;letter-spacing:.32em;
text-transform:uppercase;color:rgba(212,196,160,.65);
}
.pf-cover-tt{
font-family:var(--display);font-size:1.05rem;letter-spacing:.01em;
line-height:.95;color:#F4F4F6;text-transform:uppercase;
}
.pf-cover-foot{
font-family:var(--body);font-size:.42rem;letter-spacing:.3em;
text-transform:uppercase;color:rgba(212,196,160,.5);
}
/* Body of featured card */
.pf-body{position:relative;z-index:2}
.pf-tag{
font-family:var(--body);font-size:.55rem;letter-spacing:.26em;
text-transform:uppercase;color:var(--pub-acc);opacity:.85;
margin-bottom:1rem;
display:inline-flex;align-items:center;gap:.7rem;
}
.pf-tag::before{
content:'';width:24px;height:1px;background:rgba(212,196,160,.5);
}
.pf-title{
font-family:var(--display);font-size:clamp(2.4rem,4.2vw,3.6rem);
line-height:.95;letter-spacing:-.01em;color:#F4F4F6;
margin-bottom:1.1rem;
}
.pf-title em{color:var(--pub-acc);font-style:normal}
.pf-desc{
font-family:var(--body);font-size:.82rem;line-height:1.85;
color:rgba(255,255,255,.55);max-width:560px;margin-bottom:1.8rem;
}
.pf-meta{
display:flex;flex-wrap:wrap;gap:2rem;margin-bottom:1.8rem;
padding-top:1.4rem;border-top:1px dashed rgba(212,196,160,.18);
}
.pf-meta-item{display:flex;flex-direction:column;gap:.25rem}
.pf-meta-k{
font-family:var(--body);font-size:.5rem;letter-spacing:.24em;
text-transform:uppercase;color:rgba(255,255,255,.35);
}
.pf-meta-v{
font-family:var(--body);font-size:.75rem;color:rgba(255,255,255,.85);
}
.pf-btn{
display:inline-flex;align-items:center;gap:.6rem;
padding:.78rem 1.9rem;
background:var(--pub-acc);color:#0a0a0a;
font-family:var(--body);font-size:.62rem;letter-spacing:.14em;
text-transform:uppercase;text-decoration:none;
transition:all .35s;box-shadow:0 0 24px rgba(212,196,160,.18);
}
.pf-btn:hover{box-shadow:0 0 42px rgba(212,196,160,.45);transform:translateY(-2px)}
/* ============================================================
"Research notes" sub-section — 2 report cards + CTA
============================================================ */
.pubs-more{margin-top:3rem}
.pubs-more-label{
font-family:var(--body);font-size:.56rem;letter-spacing:.3em;
text-transform:uppercase;color:rgba(212,196,160,.5);
margin-bottom:1.6rem;display:flex;align-items:center;gap:.7rem;
}
.pubs-more-label::before{
content:'';width:18px;height:1px;background:rgba(212,196,160,.5);
}
.pubs-list{
display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;
}
.pub-item{
position:relative;display:flex;flex-direction:column;
padding:1.7rem 1.6rem 1.5rem;
border:1px solid rgba(212,196,160,.14);
background:rgba(212,196,160,.025);
text-decoration:none;color:inherit;
transition:all .4s cubic-bezier(.23,1,.32,1);
overflow:hidden;
}
.pub-item::after{
content:'';position:absolute;top:0;right:0;width:34px;height:34px;
background:linear-gradient(135deg,transparent 0 49%,rgba(212,196,160,.4) 49% 51%,transparent 51% 100%);
opacity:.45;transition:opacity .4s;
}
.pub-item:hover{
border-color:rgba(212,196,160,.4);
background:rgba(212,196,160,.05);
transform:translateY(-2px);
}
.pub-item:hover::after{opacity:1}
.pi-top{
display:flex;align-items:center;gap:.85rem;
margin-bottom:1rem;padding-bottom:.9rem;
border-bottom:1px dashed rgba(212,196,160,.18);
}
.pi-num{
font-family:var(--display);font-size:1.6rem;
color:var(--pub-acc);line-height:.85;letter-spacing:-.02em;
}
.pi-type{
font-family:var(--body);font-size:.5rem;letter-spacing:.26em;
text-transform:uppercase;color:rgba(212,196,160,.7);
padding:.32rem .7rem;
border:1px solid rgba(212,196,160,.28);
}
.pi-title{
font-family:var(--display);font-size:clamp(1.25rem,1.6vw,1.55rem);
line-height:1;letter-spacing:.005em;color:#F4F4F6;
margin-bottom:.8rem;
}
.pi-title em{color:var(--pub-acc);font-style:normal}
.pi-desc{
font-family:var(--body);font-size:.72rem;line-height:1.75;
color:rgba(255,255,255,.5);margin-bottom:1.1rem;flex-grow:1;
}
.pi-foot{
display:flex;align-items:center;justify-content:space-between;
padding-top:.9rem;border-top:1px solid rgba(212,196,160,.1);
}
.pi-kind{
font-family:var(--body);font-size:.5rem;letter-spacing:.22em;
text-transform:uppercase;color:rgba(255,255,255,.32);
}
.pi-arrow{
font-family:var(--body);font-size:.55rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--pub-acc);
display:inline-flex;align-items:center;gap:.5rem;transition:gap .3s;
}
.pub-item:hover .pi-arrow{gap:.85rem}
/* CTA row */
.pubs-cta-wrap{
margin-top:3rem;
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:1.5rem;
}
.pubs-cta-text{
font-family:var(--serif);font-style:italic;
font-size:clamp(.95rem,1.3vw,1.1rem);
color:rgba(255,255,255,.5);max-width:480px;line-height:1.6;
}
.pubs-cta{
display:inline-flex;align-items:center;gap:.7rem;
padding:.85rem 2rem;
background:transparent;color:var(--pub-acc);
font-family:var(--body);font-size:.62rem;letter-spacing:.14em;
text-transform:uppercase;text-decoration:none;
border:1px solid rgba(212,196,160,.4);
transition:all .4s;
}
.pubs-cta:hover{
background:var(--pub-acc);color:#0a0a0a;
box-shadow:0 0 32px rgba(212,196,160,.32);
transform:translateY(-2px);
}
/* ============================================================
Responsive
============================================================ */
@media(max-width:1024px){
#ch-pubs{padding:8rem 3rem}
.pub-feature{padding:2.4rem 2rem}
.pubs-art{width:520px;height:440px;right:-200px}
}
@media(max-width:768px){
#ch-pubs{padding:5.5rem 1.5rem;height:auto !important;min-height:auto}
.pubs-art{display:none}
.pubs-header{
flex-direction:column;align-items:flex-start;
gap:.8rem;margin-bottom:2.4rem;
}
.pub-feature{
grid-template-columns:1fr;gap:1.8rem;
padding:2rem 1.4rem;text-align:center;
margin-bottom:2rem;
}
.pf-ribbon{position:static;margin:0 auto 1rem;width:max-content}
.pf-cover{margin:0 auto;width:140px;height:175px}
.pf-tag{justify-content:center}
.pf-desc{margin-left:auto;margin-right:auto}
.pf-meta{justify-content:center;gap:1.4rem}
.pf-btn{justify-content:center}
.pubs-more{margin-top:1.8rem}
.pubs-list{grid-template-columns:1fr;gap:.9rem}
.pub-item{padding:1.4rem 1.2rem 1.2rem}
.pi-title{font-size:1.2rem}
.pi-desc{font-size:.7rem}
.pubs-cta-wrap{
flex-direction:column;align-items:stretch;text-align:left;
margin-top:2rem;
}
.pubs-cta-text{text-align:left}
.pubs-cta{justify-content:center}
}
/* ============================================================
CH6 — CONTACT · Soft Silver / Off-White
============================================================ */
#ch-contact{
background:var(--silver);
color:#111;
padding:6rem 5rem;
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
}
.contact-bg{
position:absolute;inset:0;
background:
radial-gradient(ellipse 60% 50% at 50% 50%,rgba(0,0,0,.03) 0%,transparent 65%),
radial-gradient(ellipse 30% 30% at 10% 10%,rgba(0,0,0,.02) 0%,transparent 60%);
}
.contact-bg::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent);
}
.contact-inner{
position:relative;z-index:2;
max-width:1200px;margin:0 auto;
}
.contact-eyebrow{
font-family:var(--body);font-size:.6rem;letter-spacing:.3em;
color:rgba(0,0,0,.3);text-transform:uppercase;margin-bottom:2.5rem;
display:flex;align-items:center;gap:.75rem;
}
.contact-eyebrow::before,.contact-eyebrow::after{
content:'';width:40px;height:1px;background:rgba(0,0,0,.15);
}
.contact-big{
font-family:var(--display);font-size:clamp(1.3rem,2vw,1.5rem);
letter-spacing:-.01em;line-height:1.24;color:#111;
margin-bottom:3.5rem;
}
.contact-big em{
font-style:normal;
-webkit-text-stroke:1.5px #111;
color:transparent;
}
.contact-sub{
font-family:var(--serif);font-style:italic;font-size:1.1rem;
color:rgba(0,0,0,.4);margin-bottom:4rem;max-width:500px;line-height:1.7;
}
.contact-links{
display:flex;gap:4rem;flex-wrap:wrap;justify-content:center;margin-bottom:5rem;
}
.cl{
display:flex;flex-direction:column;align-items:center;gap:.5rem;
text-decoration:none;transition:transform .35s;
}
.cl:hover{transform:translateY(-4px)}
.cl-lbl{
font-family:var(--body);font-size:.58rem;letter-spacing:.2em;
text-transform:uppercase;color:rgba(0,0,0,.3);
}
.cl-val{
font-family:var(--body);font-size:.85rem;color:rgba(0,0,0,.7);
transition:color .3s;border-bottom:1px solid rgba(0,0,0,.1);padding-bottom:.2rem;
}
.cl:hover .cl-val{color:#111;border-color:#111}
.contact-cta{
padding:1rem 3.5rem;background:#111;color:var(--silver);
font-family:var(--body);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
border:none;transition:all .4s;text-decoration:none;display:inline-block;
}
.contact-cta:hover{background:#000;box-shadow:0 8px 40px rgba(0,0,0,.15)}
.footer-strip{
position:absolute;bottom:2rem;left:0;right:0;padding:0 5rem;
display:flex;justify-content:space-between;align-items:center;
font-family:var(--body);font-size:.58rem;letter-spacing:.12em;
color:rgba(0,0,0,.25);z-index:2;
}
/* ============================================================
SKILLS SECTION — inside about or standalone
============================================================ */
.skills-marquee-wrap{
overflow:hidden;border-top:1px solid rgba(255,255,255,.04);
border-bottom:1px solid rgba(255,255,255,.04);
padding:1rem 0;margin-top:5rem;
}
.skills-marquee{display:flex;gap:3rem;animation:marquee 22s linear infinite;width:max-content}
.sm-item{
font-family:var(--serif);font-style:italic;font-size:1rem;
color:rgba(255,255,255,.15);white-space:nowrap;
display:flex;align-items:center;gap:2rem;
}
.sm-item::after{content:'·';color:rgba(255,255,255,.08)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ============================================================
FLOATING AI BUTTON
============================================================ */
#ai-fab{
position:fixed;bottom:2rem;right:2rem;z-index:9000;
width:auto;height:auto;
display:flex;align-items:center;gap:.8rem;
padding:.55rem 1.15rem .55rem .55rem;
border-radius:999px;
border:1px solid rgba(0,0,0,.10);
background:#0E0E0F;
color:#F5F5F4;font-family:var(--body);
text-transform:none;
cursor:pointer;
box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
transition:transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s ease, border-color .3s ease;
}
#ai-fab:hover{
transform:translateY(-3px);
border-color:rgba(255,255,255,.3);
box-shadow:0 16px 42px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.18), 0 0 34px rgba(255,255,255,.08);
}
.ai-fab-hex{
width:42px;height:42px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
border-radius:12px;
background:#161718;
border:1px solid rgba(255,255,255,.06);
}
.ai-fab-hex svg{
width:20px;height:20px;
fill:none;stroke:#F5F5F4;stroke-width:1.6;
stroke-linejoin:round;stroke-linecap:round;
filter:drop-shadow(0 0 5px rgba(255,255,255,.28));
}
.ai-fab-text{
display:flex;flex-direction:column;align-items:flex-start;gap:.14rem;line-height:1;
}
.ai-fab-kicker{
font-size:.55rem;letter-spacing:.24em;color:rgba(245,245,244,.45);
text-transform:uppercase;font-weight:500;
}
.ai-fab-main{
font-size:.9rem;letter-spacing:.005em;color:#F5F5F4;
font-weight:600;white-space:nowrap;
}
.ai-pulse{
width:9px;height:9px;border-radius:50%;background:#F5F5F4;flex-shrink:0;
box-shadow:0 0 10px rgba(255,255,255,.6);
animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}
/* ============================================================
AI MODAL
============================================================ */
#ai-modal{
position:fixed;inset:0;z-index:99999;display:none;
align-items:flex-end;justify-content:flex-end;padding:2rem;
}
#ai-modal.open{display:flex}
.am-overlay{
position:absolute;inset:0;background:rgba(0,0,0,.7);
backdrop-filter:blur(8px);
}
.am-panel{
position:relative;z-index:2;width:420px;
background:rgba(0,0,0,.98);border:1px solid rgba(79,195,247,.15);
animation:panelUp .4s cubic-bezier(.16,1,.3,1);
}
@keyframes panelUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.am-top{
padding:1.4rem 1.6rem;border-bottom:1px solid rgba(79,195,247,.08);
display:flex;justify-content:space-between;align-items:center;
}
.am-title{font-family:var(--body);font-size:.62rem;letter-spacing:.25em;color:var(--ice);text-transform:uppercase}
.am-close{background:none;border:none;color:rgba(255,255,255,.25);font-size:1rem;transition:color .2s}
.am-close:hover{color:#fff}
.am-msgs{min-height:220px;max-height:280px;overflow-y:auto;padding:1.4rem;display:flex;flex-direction:column;gap:.85rem}
.am-msg{font-family:var(--body);font-size:.74rem;line-height:1.8;padding:.85rem 1rem;border:1px solid rgba(79,195,247,.06)}
.am-msg.bot{color:rgba(255,255,255,.65);background:rgba(79,195,247,.03);border-color:rgba(79,195,247,.08)}
.am-msg.usr{color:rgba(255,255,255,.3);text-align:right;background:transparent}
.am-chips{padding:.75rem 1.4rem;display:flex;flex-wrap:wrap;gap:.5rem}
.am-chip{
padding:.3rem .8rem;border:1px solid rgba(79,195,247,.1);
font-family:var(--body);font-size:.6rem;color:rgba(79,195,247,.5);
background:transparent;transition:all .25s;
}
.am-chip:hover{border-color:var(--ice);color:var(--ice)}
.am-inp-row{
padding:.85rem 1.2rem;border-top:1px solid rgba(79,195,247,.08);
display:flex;gap:.6rem;
}
.am-inp{
flex:1;background:transparent;border:1px solid rgba(79,195,247,.12);
padding:.55rem .9rem;color:#fff;font-family:var(--body);font-size:.7rem;
outline:none;transition:border-color .3s;
}
.am-inp::placeholder{color:rgba(255,255,255,.18)}
.am-inp:focus{border-color:rgba(79,195,247,.4)}
.am-send{
padding:.55rem 1.1rem;background:rgba(79,195,247,.15);
border:1px solid rgba(79,195,247,.25);color:var(--ice);
font-family:var(--body);font-size:.68rem;transition:all .3s;
}
.am-send:hover{background:rgba(79,195,247,.25)}
/* ============================================================
RESPONSIVE
============================================================ */
@media(max-width:900px){
nav{padding:1.2rem 1.5rem}
nav.glass,nav.on-hero.scrolled{padding:.8rem 1.5rem}
.nav-links{display:none}
section.chapter,.chapter{padding-left:1.5rem;padding-right:1.5rem}
#ch-about,#ch-life,#ch-contact{padding:7rem 1.5rem}
/* Projects mobile — keep horizontal GSAP layout */
#proj-viewport{position:absolute;inset:0}
.pcard-new{padding:5rem 1.5rem 3rem}
.p-slide-right{display:none}
.projects-head{padding:2rem 1.5rem 0}
/* Experience mobile */
.exp-inner{padding:0}
.exp-header{flex-direction:column;align-items:flex-start;gap:1rem}
/* Life */
.life-grid{grid-template-columns:1fr}
.edu-list{grid-template-columns:1fr}
.contact-links{gap:2rem}
.footer-strip{flex-direction:column;gap:.5rem;text-align:center;position:relative;bottom:auto;padding:1.5rem}
.projects-head{padding:0}
}
/* ═══════════════════════════════════════════════════════
CH3.5 — SHOWCASE REEL · stacked full-screen panels
Recreation of the WebGL/GSAP scroll-stack animation.
Each panel pins, the next slides up and over it while
its title rises into center, color sweeps in, and
ghost text repeats across the background.
═══════════════════════════════════════════════════════ */
#ch-reel{
position:relative;
background:var(--navy);
}
.reel-pin{
position:relative;
height:100vh;
overflow:hidden;
}
/* each panel is absolutely stacked; JS translates it on scroll */
.reel-panel{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
will-change:transform;
overflow:hidden;
border-top:1px solid rgba(255,255,255,.08);
}
.reel-panel-inner{
position:relative;
z-index:3;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:0 1.5rem;
width:100%;
will-change:transform;
}
/* eyebrow: year - client */
.reel-eyebrow{
font-family:var(--body);
font-size:clamp(.75rem,1.4vw,1rem);
letter-spacing:.18em;
margin-bottom:1.1rem;
opacity:.85;
}
/* giant title flanked by > < arrows */
.reel-titlerow{
display:flex;
align-items:center;
justify-content:center;
gap:clamp(.8rem,3vw,2.5rem);
width:100%;
max-width:96vw;
margin:0 auto;
}
.reel-arrow{
font-family:var(--display);
font-weight:400;
font-size:clamp(2.2rem,6vw,5rem);
line-height:1;
opacity:.9;
flex:0 0 auto;
transform:translateY(-.04em);
}
.reel-title{
font-family:var(--display);
font-weight:400;
font-size:clamp(2.6rem,9vw,9rem);
line-height:.86;
letter-spacing:.005em;
white-space:nowrap;
flex:0 1 auto;
min-width:0;
}
/* tech tags row with little dashes */
.reel-tags{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:clamp(.7rem,2.2vw,2rem);
margin-top:1.6rem;
font-family:var(--body);
font-size:clamp(.7rem,1.3vw,.95rem);
letter-spacing:.06em;
}
.reel-tags span{display:inline-flex;align-items:center;gap:clamp(.6rem,1.8vw,1.5rem)}
.reel-tags span::before{
content:"";
display:inline-block;
width:clamp(14px,2vw,28px);
height:1px;
background:currentColor;
opacity:.6;
}
/* optional descriptive line under the title */
.reel-sub{
max-width:62ch;
margin:1.4rem auto 0;
font-family:var(--body);
font-size:clamp(.74rem,1.3vw,.95rem);
line-height:1.9;
opacity:.82;
}
/* stat chips row */
.reel-stats{
display:flex;
flex-wrap:wrap;
align-items:flex-start;
justify-content:center;
gap:clamp(1.6rem,5vw,4rem);
margin-top:1.8rem;
}
.reel-stat{display:flex;flex-direction:column;align-items:center;line-height:1}
.reel-stat-n{
font-family:var(--display);
font-size:clamp(2.2rem,5vw,3.4rem);
}
.reel-stat-l{
font-family:var(--body);
font-size:clamp(.55rem,1vw,.7rem);
letter-spacing:.12em;
text-transform:uppercase;
opacity:.7;
margin-top:.4rem;
}
/* repeating ghost text behind the title */
.reel-ghost{
position:absolute;
inset:0;
z-index:1;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
overflow:hidden;
}
.reel-ghost-track{
display:flex;
gap:2.5vw;
white-space:nowrap;
font-family:var(--display);
font-weight:400;
font-size:clamp(7rem,22vw,20rem);
line-height:1;
opacity:.10;
animation:reelMarquee 18s linear infinite;
}
.reel-ghost-track.alt{animation-direction:reverse;animation-duration:24s}
.reel-ghost-row{
position:absolute;
width:100%;
display:flex;
justify-content:center;
}
.reel-ghost-row.r1{top:6%}
.reel-ghost-row.r2{top:38%;opacity:.7}
.reel-ghost-row.r3{bottom:6%}
@keyframes reelMarquee{
from{transform:translateX(0)}
to{transform:translateX(-30vw)}
}
/* tiny corner labels echoing the reference video */
.reel-corner{
position:absolute;
z-index:4;
font-family:var(--body);
font-size:.7rem;
letter-spacing:.16em;
opacity:.7;
}
.reel-corner.tl{top:1.4rem;left:1.6rem}
.reel-corner.br{bottom:1.4rem;right:1.6rem}
.reel-progress{
position:absolute;
left:0;bottom:0;
height:4px;width:0%;
background:rgba(0,0,0,.55);
z-index:6;
}
@media(max-width:768px){
.reel-title{white-space:normal;font-size:clamp(2.6rem,15vw,5rem)}
.reel-arrow{font-size:clamp(2rem,9vw,3rem)}
.reel-tags{font-size:.72rem}
.reel-ghost-track{font-size:34vw}
}
/* ============================================================
HERO LINES PATTERN — animated background behind photo
============================================================ */
.hero-curves {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.hero-curves svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Drawn flowing arcs */
.curve-line {
fill: none;
stroke: rgba(10, 10, 10, 0.10);
stroke-width: 1.2;
stroke-dasharray: 800;
stroke-dashoffset: 800;
animation: curveDraw 2.8s cubic-bezier(.4,0,.2,1) forwards;
}
.curve-line.c1 { animation-delay: 0.3s; stroke-width: 1; }
.curve-line.c2 { animation-delay: 0.7s; stroke-width: 0.8; stroke: rgba(10,10,10,0.07); }
.curve-line.c3 { animation-delay: 1.1s; stroke-width: 1.4; stroke: rgba(10,10,10,0.08); }
.curve-line.c4 { animation-delay: 0.5s; stroke-width: 0.7; stroke: rgba(10,10,10,0.06); }
.curve-line.c5 { animation-delay: 1.4s; stroke-width: 1; stroke: rgba(10,10,10,0.07); stroke-dasharray: 600; stroke-dashoffset: 600; }
@keyframes curveDraw {
to { stroke-dashoffset: 0; }
}
/* Animated vertical line pattern that perpetually drifts */
.hero-lines-anim {
position: absolute;
inset: -10% -5%;
z-index: 0;
pointer-events: none;
opacity: 0;
animation: heroLinesFadeIn 1.4s ease 0.6s forwards;
-webkit-mask-image: radial-gradient(ellipse 62% 68% at 50% 52%, #000 18%, transparent 82%);
mask-image: radial-gradient(ellipse 62% 68% at 50% 52%, #000 18%, transparent 82%);
}
@keyframes heroLinesFadeIn { to { opacity: 1; } }
/* Layer 1 — fine diagonal hatch, scrolls slowly */
.hero-lines-anim::before {
content: '';
position: absolute;
inset: -40%;
background-image: repeating-linear-gradient(
115deg,
rgba(10,10,10,0.055) 0px,
rgba(10,10,10,0.055) 1px,
transparent 1px,
transparent 13px
);
animation: hatchDrift 18s linear infinite;
}
/* Layer 2 — crossing hatch, drifts the other way + pulses */
.hero-lines-anim::after {
content: '';
position: absolute;
inset: -40%;
background-image: repeating-linear-gradient(
-65deg,
rgba(10,10,10,0.04) 0px,
rgba(10,10,10,0.04) 1px,
transparent 1px,
transparent 22px
);
animation: hatchDriftAlt 26s linear infinite, hatchPulse 7s ease-in-out infinite;
}
@keyframes hatchDrift {
0% { transform: translate(0,0); }
100% { transform: translate(-13px, 26px); }
}
@keyframes hatchDriftAlt {
0% { transform: translate(0,0); }
100% { transform: translate(22px, 22px); }
}
@keyframes hatchPulse {
0%,100% { opacity: 0.55; }
50% { opacity: 1; }
}
/* Concentric ring lines that breathe behind the subject */
.hero-rings {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%,-52%);
width: clamp(280px, 34vw, 520px);
height: clamp(280px, 34vw, 520px);
z-index: 0;
pointer-events: none;
}
.hero-rings span {
position: absolute;
inset: 0;
margin: auto;
border: 1px solid rgba(10,10,10,0.07);
border-radius: 50%;
animation: ringBreathe 6s ease-in-out infinite;
}
.hero-rings span:nth-child(1){ width: 38%; height: 38%; animation-delay: 0s; }
.hero-rings span:nth-child(2){ width: 60%; height: 60%; animation-delay: .6s; border-color: rgba(10,10,10,0.055); }
.hero-rings span:nth-child(3){ width: 82%; height: 82%; animation-delay: 1.2s; border-color: rgba(10,10,10,0.045); }
.hero-rings span:nth-child(4){ width: 100%; height: 100%; animation-delay: 1.8s; border-color: rgba(209,52,47,0.10); }
@keyframes ringBreathe {
0%,100% { transform: scale(1); opacity: .6; }
50% { transform: scale(1.04); opacity: 1; }
}
/* ============================================================
HERO FLOATING CARDS
============================================================ */
.hero-float-card {
position: absolute;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(10, 10, 10, 0.78);
border: 1px solid rgba(10, 10, 10, 0.12);
color: #fff;
font-family: var(--h-mono);
z-index: 10;
animation: cardFloat 0.9s cubic-bezier(.18,.84,.24,1) both;
will-change: transform;
}
/* Individual float animations */
.hero-float-card.fc-finance {
left: -20px;
top: 30%;
padding: 0.55rem 1.1rem;
font-size: 0.62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
animation-delay: 0.8s;
animation-name: cardFloatLeft;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.hero-float-card.fc-data {
right: -10px;
top: 42%;
padding: 0.55rem 1.1rem;
font-size: 0.62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
animation-delay: 1.0s;
animation-name: cardFloatRight;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.hero-float-card.fc-markets {
left: -50px;
bottom: 28%;
padding: 0.55rem 1.1rem;
font-size: 0.62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
animation-delay: 1.2s;
animation-name: cardFloatLeft;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.hero-float-card.fc-students {
right: -30px;
bottom: 16%;
padding: 1.1rem 1.4rem;
animation-delay: 1.4s;
animation-name: cardFloatRight;
min-width: 160px;
box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}
.fc-students-num {
font-family: var(--display, 'Bebas Neue', sans-serif);
font-size: 2.2rem;
color: var(--ice, #4FC3F7);
line-height: 1;
display: block;
letter-spacing: 0.02em;
}
.fc-students-label {
font-size: 0.5rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
display: block;
margin-top: 0.3rem;
}
/* Card hover micro-interaction */
.hero-float-card:hover {
background: rgba(10, 10, 10, 0.88);
transform: translateY(-3px) !important;
transition: all 0.3s ease;
box-shadow: 0 16px 48px rgba(0,0,0,0.28);
}
/* Subtle perpetual float after entrance */
.hero-float-card.fc-finance { animation: cardFloatLeft 0.9s cubic-bezier(.18,.84,.24,1) 0.8s both, floatBob1 5s ease-in-out 2s infinite; }
.hero-float-card.fc-data { animation: cardFloatRight 0.9s cubic-bezier(.18,.84,.24,1) 1.0s both, floatBob2 6s ease-in-out 2.2s infinite; }
.hero-float-card.fc-markets { animation: cardFloatLeft 0.9s cubic-bezier(.18,.84,.24,1) 1.2s both, floatBob3 5.5s ease-in-out 2.4s infinite; }
.hero-float-card.fc-students { animation: cardFloatRight 0.9s cubic-bezier(.18,.84,.24,1) 1.4s both, floatBob1 7s ease-in-out 2.6s infinite; }
@keyframes cardFloatLeft {
from { opacity: 0; transform: translateX(-28px) scale(0.95); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes cardFloatRight {
from { opacity: 0; transform: translateX(28px) scale(0.95); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes floatBob1 {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes floatBob2 {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes floatBob3 {
0%, 100% { transform: translateY(-3px); }
50% { transform: translateY(3px); }
}
/* ============================================================
HERO SECTION (new cream design) — scoped to .hero only
============================================================ */
/* Hero-only CSS custom properties — scoped inside .hero */
/* SECTION 1 — HERO · light theme, matched to the Projects section
and the case-study pages (#FAFAFA + 32px graph paper + Inter). */
.hero{
--bg: #FFFFFF;
--bg-2: #FFFFFF;
--bg-3: #F4F4F4;
--ink: #111111;
--ink-soft: #1A1A1A;
--muted: #666666;
--muted-2: #8C8C8C;
--line: rgba(26,26,26,.16);
--line-soft: rgba(26,26,26,.09);
--accent: #111111;
--green: #16A34A;
--green-soft: rgba(22,163,74,0.16);
--ghost: rgba(17,17,17,0.10);
--h-display: 'Inter','Geist','IBM Plex Sans',-apple-system,system-ui,sans-serif;
--h-serif: 'Fraunces', 'Instrument Serif', Georgia, serif;
--h-mono: 'JetBrains Mono', ui-monospace, monospace;
background: var(--bg);
color: var(--ink);
font-family: var(--h-mono);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ============================================================
HERO STAGE
============================================================ */
.hero{
position: relative;
margin: 0;
min-height: 100vh;
padding: 5.5rem 3rem 0;
display: grid;
grid-template-columns: 1fr clamp(480px, 48vw, 700px);
grid-template-rows: auto 1fr;
grid-template-areas:
"top portrait"
"content portrait";
column-gap: 2rem;
overflow: visible;
isolation: isolate;
z-index: 0;
}
/* engineering graph paper — same 32px grid as the Projects section
and the case-study pages, so section 1 and section 4 read as one system */
.hero::before{
content:'';display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:
linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),
linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);
background-size:32px 32px;
}
/* Inter carries its own weight where Archivo Black used to */
.hero h1,.hero h2,.hero h3{font-weight:600;letter-spacing:-.028em}
/* paper grain — removed for clean white hero */
.hero::after{ content: none; display: none; }
/* ============================================================
TOP BAR (NSUT DELHI badge removed — left bar only)
============================================================ */
.topbar{
grid-area: top;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
opacity: 0;
transform: translateY(-12px);
animation: barIn .9s cubic-bezier(.2,.7,.2,1) .1s forwards;
}
.cat{
font-family: var(--h-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.26em;
color: var(--muted);
padding: 0.5rem 1rem;
border: 1px solid var(--line);
border-radius: 2px;
text-transform: uppercase;
transition: all .3s ease;
}
.cat:hover{
color: var(--ink);
border-color: var(--ink);
background: rgba(10,10,10,0.04);
}
.dot{
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(209,52,47,0.12);
animation: pulseDot 2.2s ease-in-out infinite;
}
.dot:nth-child(4){animation-delay: 1.1s}
@keyframes pulseDot{
0%, 100%{transform: scale(1); opacity: 1}
50%{transform: scale(1.25); opacity: .7}
}
@keyframes barIn{
to{opacity: 1; transform: translateY(0)}
}
/* ============================================================
CONTENT COLUMN
============================================================ */
.content{
grid-area: content;
display: flex;
flex-direction: column;
justify-content: center;
padding: 2rem 0 2.5rem;
}
/* eyebrow */
.eyebrow{
display: flex;
align-items: center;
gap: 0.9rem;
margin-bottom: 1rem;
opacity: 0;
animation: fadeUp .8s ease .3s forwards;
}
.eyebrow .line{
width: 36px;
height: 1px;
background: var(--ink);
}
.eyebrow .label{
font-family: var(--h-mono);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--muted);
}
.eyebrow .label em{
font-family: var(--h-serif);
font-style: italic;
font-weight: 400;
font-size: 0.95rem;
letter-spacing: 0;
text-transform: none;
color: var(--ink);
margin-left: 0.4rem;
}
/* NAME — stylish animated ABHINAV */
.name-row{ overflow: hidden; margin-bottom: -0.05em; }
.name{
font-family: var(--h-display);
font-size: clamp(2.2rem, 4.8vw, 4.4rem);
font-weight: 900;
line-height: 0.95;
letter-spacing: -0.025em;
color: var(--ink);
display: inline-block;
white-space: nowrap;
position: relative;
}
/* Shimmer sweep across the whole name */
.name::after{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg,
transparent 20%,
rgba(255,255,255,0.65) 50%,
transparent 80%
);
background-size: 200% 100%;
animation: nameSweep 3.2s ease 1.8s forwards;
opacity: 0;
pointer-events: none;
}
@keyframes nameSweep{
0% { opacity:1; background-position: 200% 0 }
60% { opacity:1; background-position: -100% 0 }
100%{ opacity:0; background-position: -100% 0 }
}
.name .ch{
display: inline-block;
transform: translateY(110%);
opacity: 0;
animation: charUp .8s cubic-bezier(.18,.84,.24,1) forwards;
transition: transform .2s cubic-bezier(.34,1.56,.64,1), color .2s ease;
cursor: default;
}
/* Magnetic hover per letter */
.name .ch:hover{
transform: translateY(-6px) scale(1.12) !important;
color: #444;
}
.name .ch:nth-child(1){animation-delay: .45s}
.name .ch:nth-child(2){animation-delay: .50s}
.name .ch:nth-child(3){animation-delay: .55s}
.name .ch:nth-child(4){animation-delay: .60s}
.name .ch:nth-child(5){animation-delay: .65s}
.name .ch:nth-child(6){animation-delay: .70s}
.name .ch:nth-child(7){animation-delay: .75s}
@keyframes charUp{
to{transform: translateY(0); opacity: 1}
}
/* JAIN — outlined SVG with neon draw-on + glow */
.name-2-wrap{
position: relative;
line-height: 0.95;
margin-top: 0.05em;
margin-bottom: 0.4rem;
}
.svg-jain{
display: block;
width: clamp(140px, 23vw, 280px);
height: auto;
overflow: visible;
filter: drop-shadow(0 0 0px rgba(10,10,10,0));
animation: jainGlow 4s ease 2.8s infinite alternate;
}
@keyframes jainGlow{
0% { filter: drop-shadow(0 0 0px rgba(10,10,10,0)) }
40% { filter: drop-shadow(0 0 8px rgba(10,10,10,0.18)) }
100%{ filter: drop-shadow(0 0 3px rgba(10,10,10,0.08)) }
}
.svg-jain text{
font-family: var(--h-display);
font-weight: 900;
fill: transparent;
stroke: var(--ink);
stroke-width: 1.4;
letter-spacing: -0.02em;
paint-order: stroke;
stroke-dasharray: 1100;
stroke-dashoffset: 1100;
animation: drawJain 2.2s cubic-bezier(.45,.05,.2,1) 1.0s forwards;
}
/* Second pass: accent colour briefly pulses inside */
.svg-jain .jain-fill{
font-family: var(--h-display);
font-weight: 900;
fill: var(--accent);
stroke: none;
opacity: 0;
animation: jainFill 1s ease 3.1s forwards;
}
@keyframes jainFill{
0% { opacity:0 }
40% { opacity:0.08 }
100%{ opacity:0 }
}
@keyframes drawJain{
to{stroke-dashoffset: 0}
}
/* serif "tagline" — adds editorial sophistication */
.tagline{
font-family: var(--h-serif);
font-size: clamp(0.9rem, 1.2vw, 1.1rem);
font-style: italic;
font-weight: 400;
color: var(--ink-soft);
margin-top: 0.4rem;
margin-bottom: 1.9rem;
max-width: 32em;
line-height: 1.5;
opacity: 0;
animation: fadeUp .8s ease 1.4s forwards;
}
.tagline strong{
font-style: normal;
font-weight: 600;
font-family: var(--h-mono);
font-size: 0.78em;
letter-spacing: 0.04em;
color: var(--ink);
padding: 0.1em 0.35em;
background: rgba(10,10,10,0.06);
border-radius: 2px;
}
/* credentials row */
.subline{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 0.9rem;
font-family: var(--h-mono);
font-size: 0.72rem;
color: var(--muted);
margin-bottom: 1.3rem;
opacity: 0;
animation: fadeUp .8s ease 1.55s forwards;
}
.subline .lead{
color: var(--ink);
font-weight: 600;
padding: 0.28rem 0.55rem;
border: 1px solid var(--ink);
font-size: 0.68rem;
letter-spacing: 0.14em;
}
.subline .dash{
width: 18px;
height: 1px;
background: var(--line);
}
.subline .role{
color: var(--ink-soft);
}
@keyframes fadeUp{
from{opacity: 0; transform: translateY(14px)}
to{opacity: 1; transform: translateY(0)}
}
/* SKILL CHIPS */
.skills{
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1.8rem;
opacity: 0;
animation: fadeUp .8s ease 1.55s forwards;
}
.skills-track{
flex: 1 1 100%;
min-width: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.chip.dup{ display: none; } /* marquee duplicates — phone only */
.chip{
font-family: var(--h-mono);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 0.38rem 0.75rem;
border: 1px solid var(--line);
border-radius: 2px;
background: transparent;
transition: all .25s ease;
cursor: default;
position: relative;
overflow: hidden;
z-index: 0;
}
.chip::before{
content:'';
position: absolute;
inset: 0;
background: var(--ink);
transform: translateY(101%);
transition: transform .35s cubic-bezier(.6,.05,.25,1);
z-index: -1;
}
.chip:hover{
color: var(--bg);
border-color: var(--ink);
}
.chip:hover::before{transform: translateY(0)}
/* CTAs */
.cta-row{
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
opacity: 0;
animation: fadeUp .8s ease 1.7s forwards;
}
.btn{
font-family: var(--h-mono);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 0.82rem 1.3rem;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
transition: all .3s ease;
border: 1.5px solid var(--ink);
}
.btn.primary{
background: var(--ink);
color: var(--bg);
}
.btn.primary:hover{
background: transparent;
color: var(--ink);
}
.btn.outline{
background: transparent;
color: var(--ink);
}
.btn.outline:hover{
background: var(--ink);
color: var(--bg);
}
.btn .arrow{
display: inline-block;
transition: transform .3s ease;
}
.btn:hover .arrow{transform: translateX(4px)}
/* ============================================================
PORTRAIT PANEL — background effects + hover color reveal
============================================================ */
.portrait{
grid-area: portrait;
position: relative;
align-self: stretch;
margin-bottom: 0;
display: flex;
flex-direction: column;
overflow: visible;
background: transparent;
border: none;
opacity: 0;
transform: translateY(20px);
animation: portraitIn 1.2s cubic-bezier(.18,.84,.24,1) .4s forwards;
z-index: 0;
}
/* ── background effects layer ── */
.portrait-bg{
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
/* Large radial glow that breathes */
.portrait-bg::before{
content: '';
position: absolute;
inset: -20%;
background: radial-gradient(ellipse 65% 70% at 50% 55%,
rgba(200,180,140,0.22) 0%,
rgba(200,180,140,0.08) 45%,
transparent 70%
);
animation: bgBreathe 5s ease-in-out infinite;
}
@keyframes bgBreathe{
0%,100%{ transform: scale(1); opacity:0.7 }
50% { transform: scale(1.06); opacity:1 }
}
/* Horizontal scan line — editorial feel */
.portrait-bg::after{
content: '';
position: absolute;
left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(10,10,10,0.08), transparent);
top: 50%;
animation: scanLine 8s linear infinite;
opacity: 0;
animation-delay: 2s;
}
@keyframes scanLine{
0% { top: 110%; opacity:0 }
5% { opacity:1 }
95% { opacity:1 }
100%{ top: -10%; opacity:0 }
}
/* Floating particles */
.portrait-particles{
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.portrait-particles span{
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--ink);
opacity: 0;
animation: particleFloat var(--dur,6s) ease-in-out var(--del,0s) infinite;
}
.portrait-particles span:nth-child(1){ left:15%; top:80%; --dur:7s; --del:0s; width:2px; height:2px; }
.portrait-particles span:nth-child(2){ left:80%; top:70%; --dur:9s; --del:1.2s; width:3px; height:3px; opacity:0;}
.portrait-particles span:nth-child(3){ left:30%; top:85%; --dur:6s; --del:2.1s; width:2px; height:2px; }
.portrait-particles span:nth-child(4){ left:65%; top:75%; --dur:8s; --del:0.7s; width:2px; height:2px; }
.portrait-particles span:nth-child(5){ left:50%; top:90%; --dur:5s; --del:3.5s; width:3px; height:3px; }
.portrait-particles span:nth-child(6){ left:20%; top:60%; --dur:10s;--del:1.8s; width:2px; height:2px; }
@keyframes particleFloat{
0% { transform: translateY(0) scale(0); opacity:0 }
15% { opacity:0.35 }
80% { opacity:0.2 }
100%{ transform: translateY(-140px) scale(1.5); opacity:0 }
}
/* Corner accent marks */
.portrait-corner{
position: absolute;
width: 18px;
height: 18px;
pointer-events: none;
z-index: 3;
opacity: 0;
animation: fadeUp .6s ease 2s forwards;
}
.portrait-corner--tl{ top:0.6rem; left:0.6rem; border-top:1.5px solid var(--ink); border-left:1.5px solid var(--ink); }
.portrait-corner--tr{ top:0.6rem; right:0.6rem; border-top:1.5px solid var(--ink); border-right:1.5px solid var(--ink);}
.portrait-corner--bl{ bottom:1.8rem; left:0.6rem; border-bottom:1.5px solid var(--ink); border-left:1.5px solid var(--ink);}
.portrait-corner--br{ bottom:1.8rem; right:0.6rem; border-bottom:1.5px solid var(--ink); border-right:1.5px solid var(--ink);}
.portrait .photo-stage{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -80px;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: visible;
z-index: 2;
}
/* Photo — grayscale by default, full colour on hover */
.portrait img{
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
filter: grayscale(100%) contrast(1.04);
animation: photoFloat 6s ease-in-out infinite;
transform-origin: center bottom;
transform: translateY(60px);
transition: filter 0.55s cubic-bezier(.4,0,.2,1);
cursor: crosshair;
}
/* Hover: colour + slight brightness boost + subtle scale */
.portrait:hover img{
filter: grayscale(0%) contrast(1.06) saturate(1.1);
}
/* Slow the float on hover for dramatic feel */
.portrait:hover img{
animation-play-state: paused;
}
@keyframes photoFloat{
0%,100%{ transform: translateY(60px); }
50% { transform: translateY(44px); }
}
/* green status pill — sits at top of panel */
.status-pill{
position: absolute;
top: 1.1rem;
left: 50%;
transform: translateX(-50%);
right: auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 0.6rem 1.2rem;
background: rgba(8, 14, 22, 0.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(0, 200, 83, 0.28);
border-radius: 2px;
font-family: var(--h-mono);
font-size: 0.58rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.88);
white-space: nowrap;
opacity: 0;
animation: statusPillIn .9s cubic-bezier(.18,.84,.24,1) 1.6s forwards, pillBob 6s ease-in-out 3s infinite;
z-index: 12;
box-shadow:
0 0 0 1px rgba(0, 200, 83, 0.10),
0 8px 32px rgba(0, 0, 0, 0.35),
0 0 20px rgba(0, 200, 83, 0.08);
}
@keyframes statusPillIn {
from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.96); }
to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes pillBob {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-5px); }
}
.status-pill:hover {
background: rgba(8, 14, 22, 0.96);
border-color: rgba(0, 200, 83, 0.5);
box-shadow: 0 0 0 1px rgba(0,200,83,0.18), 0 12px 40px rgba(0,0,0,0.4), 0 0 30px rgba(0,200,83,0.14);
transition: all 0.3s ease;
}
.status-pill .status-dot{
width: 7px;
height: 7px;
background: #00C853;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(0,200,83,0.2), 0 0 8px rgba(0,200,83,0.5);
animation: pulseGreen 2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes pulseGreen{
0%, 100%{ box-shadow: 0 0 0 3px rgba(0,200,83,0.2), 0 0 8px rgba(0,200,83,0.4); transform: scale(1) }
50% { box-shadow: 0 0 0 6px rgba(0,200,83,0.08), 0 0 16px rgba(0,200,83,0.6); transform: scale(1.15) }
}
@keyframes portraitIn{
to{opacity: 1; transform: translateY(0)}
}
/* footer removed */
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 980px){
.hero{
grid-template-columns: 1fr;
grid-template-areas:
"top"
"content"
"portrait";
padding: 1.5rem 1.5rem 0;
column-gap: 0;
row-gap: 1.5rem;
padding-bottom: 0;
margin-bottom: 0;
min-height: unset;
}
.portrait{
height: 420px;
border-left: none;
border-right: none;
border-top: 1px solid var(--line-soft);
border-bottom: none;
align-self: auto;
overflow: visible;
margin-bottom: 0;
padding-bottom: 0;
}
.content{padding: 0}
.name{font-size: clamp(2.4rem, 11vw, 4.5rem)}
.svg-jain{width: clamp(140px, 38vw, 280px)}
}
@media (max-width: 560px){
.hero{padding: 1.25rem 1.25rem 0}
.topbar { gap: 0.5rem; }
.cta-row{flex-direction: column; align-items: stretch}
.btn{justify-content: center}
.portrait{height: 320px; border-bottom: none; margin-bottom: 0;}
}
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation: none !important;
transition: none !important;
}
.name .ch, .topbar, .eyebrow, .tagline, .subline, .skills,
.cta-row, .portrait, .status-pill{
opacity: 1 !important;
transform: none !important;
}
.svg-jain text{stroke-dashoffset: 0 !important}
}
/* ============================================================
CH-SKILLS — Skills Section (segmented meter restyle)
============================================================ */
#ch-skills{
--cool:#4FC3F7; /* cool accent (ice) */
--cool-soft:rgba(79,195,247,.65);
--warm:#F5A623; /* warm accent (amber) */
--warm-soft:rgba(245,166,35,.7);
background:
radial-gradient(ellipse 75% 55% at 50% -5%, #18181c 0%, transparent 60%),
linear-gradient(180deg,#0a0a0c 0%,#0c0c0f 55%,#08080a 100%);
padding:4rem 5rem;position:relative;overflow:hidden;z-index:2;
height:100vh;min-height:600px;
display:flex;align-items:center;
}
.skills-bg{
position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(ellipse 60% 50% at 12% 18%, rgba(255,255,255,.04) 0%, transparent 55%),
radial-gradient(ellipse 50% 60% at 90% 85%, rgba(255,255,255,.025) 0%, transparent 55%);
}
.skills-bg::before{
content:'';position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:32px 32px;
mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,black 0%,transparent 80%);
-webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,black 0%,transparent 80%);
}
.skills-bg::after{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}
.skills-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%}
/* Header */
.skills-header{margin-bottom:2.2rem;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.skills-eyebrow{
font-family:var(--body);font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;
color:var(--cool-soft);margin-bottom:.8rem;display:flex;align-items:center;gap:.75rem;
}
.skills-eyebrow::after{content:'';flex:0 0 40px;height:1px;background:var(--cool);opacity:.5}
.skills-title{
font-family:'Archivo Black',var(--display),sans-serif;
font-size:clamp(1.3rem,2vw,1.5rem);color:#fff;line-height:1.28;letter-spacing:-.02em;
}
.skills-title em{color:var(--cool);font-style:normal}
.skills-caption{
font-family:var(--body);font-size:.7rem;line-height:1.9;color:rgba(255,255,255,.32);
max-width:34ch;text-align:right;
}
/* Grid */
.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 5rem;align-items:start}
.skills-col-title{
font-family:var(--body);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
color:var(--warm-soft);margin-bottom:1rem;display:flex;align-items:center;gap:.7rem;
}
.skills-col-title::before{content:'';width:18px;height:1px;background:var(--warm);opacity:.7}
.skills-col-title span{margin-left:auto;color:rgba(255,255,255,.18);letter-spacing:.18em}
/* Skill row — segmented meter */
.skill-row{
display:grid;grid-template-columns:auto 1fr auto;align-items:center;
gap:1rem;padding:.55rem 0;
border-bottom:1px solid rgba(255,255,255,.05);
transition:border-color .35s;
}
.skill-row:hover{border-color:rgba(79,195,247,.22)}
.skill-idx{
font-family:var(--body);font-size:.58rem;letter-spacing:.1em;
color:rgba(255,255,255,.2);transition:color .35s;
}
.skill-row:hover .skill-idx{color:var(--cool)}
.skill-main{min-width:0}
.skill-row-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.skill-name{font-family:var(--body);font-size:.8rem;color:rgba(255,255,255,.85);letter-spacing:.02em;transition:color .35s}
.skill-row:hover .skill-name{color:#fff}
.skill-track{
position:relative;width:100%;height:9px;
background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 7px,transparent 7px 11px);
}
.skill-fill{
position:absolute;left:0;top:0;height:100%;width:0%;
background:linear-gradient(90deg,var(--warm),var(--cool));
-webkit-mask:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 11px);
mask:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 11px);
transition:width 1.2s cubic-bezier(.4,0,.2,1);
box-shadow:0 0 14px rgba(79,195,247,.35);
}
.skill-row.animated .skill-fill{width:var(--pct)}
.skill-pct{
font-family:'JetBrains Mono',var(--body),monospace;
font-size:.72rem;color:rgba(255,255,255,.45);letter-spacing:.04em;
min-width:3.4ch;text-align:right;transition:color .35s;
}
.skill-row:hover .skill-pct{color:var(--cool)}
/* Soft skills */
.soft-skills-label{
font-family:var(--body);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
color:var(--warm-soft);margin:1.8rem 0 1rem;display:flex;align-items:center;gap:.7rem;
}
.soft-skills-label::before{content:'';width:18px;height:1px;background:var(--warm);opacity:.7}
.soft-tags{display:flex;flex-wrap:wrap;gap:.6rem}
.soft-tag{
display:inline-flex;align-items:center;gap:.5rem;
padding:.5rem 1rem;border:1px solid rgba(79,195,247,.18);background:rgba(79,195,247,.04);
font-family:var(--body);font-size:.64rem;letter-spacing:.06em;color:rgba(255,255,255,.62);
transition:all .3s;cursor:default;
}
.soft-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--cool);opacity:.6;transition:opacity .3s,box-shadow .3s}
.soft-tag:hover{border-color:rgba(79,195,247,.45);background:rgba(79,195,247,.09);color:#fff}
.soft-tag:hover::before{opacity:1;box-shadow:0 0 8px var(--cool)}
@media(max-width:768px){
#ch-skills{padding:5rem 1.5rem}
.skills-grid{grid-template-columns:1fr;gap:2.5rem}
.skills-caption{text-align:left}
}
/* ============================================================
CH-ACHIEVEMENTS — Problems solved + floating glowing badges
============================================================ */
#ch-achievements{
position:relative; z-index:2; overflow:hidden;
background:
radial-gradient(ellipse 70% 55% at 50% 0%, #1c1c22 0%, transparent 60%),
radial-gradient(ellipse 90% 90% at 50% 112%, #0f0f12 0%, transparent 72%),
linear-gradient(180deg, #0b0b0d 0%, #141418 48%, #0b0b0d 100%);
padding:6rem 5rem; min-height:100vh;
display:flex; align-items:center;
}
.ach-bg{position:absolute; inset:0; pointer-events:none;}
.ach-bg::before{
content:''; position:absolute; inset:0;
background-image:
linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
background-size:32px 32px;
-webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 45%,#000 0%,transparent 78%);
mask-image:radial-gradient(ellipse 90% 80% at 50% 45%,#000 0%,transparent 78%);
}
.ach-bg::after{
content:''; position:absolute; top:0; left:0; right:0; height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}
.ach-inner{position:relative; z-index:2; max-width:1180px; margin:0 auto; width:100%;}
/* header — harmonised with .skills-header */
.ach-header{margin-bottom:2.6rem; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:1.5rem;}
.ach-eyebrow{
font-family:var(--body); font-size:.6rem; letter-spacing:.32em; text-transform:uppercase;
color:var(--ice); margin-bottom:.8rem; display:flex; align-items:center; gap:.75rem;
}
.ach-eyebrow::after{content:''; flex:0 0 40px; height:1px; background:var(--ice); opacity:.4;}
.ach-title{font-family:'Archivo Black',var(--display),sans-serif; font-size:clamp(1.3rem,2vw,1.5rem); color:#fff; line-height:1.28; letter-spacing:-.02em;}
.ach-title em{color:var(--ice); font-style:normal;}
.ach-caption{font-family:var(--body); font-size:.7rem; line-height:1.9; color:rgba(255,255,255,.34); max-width:36ch; text-align:right;}
/* stat counters */
.ach-stats{display:flex; flex-wrap:wrap; gap:1.4rem; margin-bottom:3.6rem;}
.ach-stat{
position:relative; flex:1 1 200px; min-width:180px; padding:1.5rem 1.6rem;
border:1px solid rgba(255,255,255,.07); border-radius:14px;
background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
overflow:hidden; transition:border-color .4s, transform .4s;
}
.ach-stat::before{
content:''; position:absolute; left:0; top:0; width:100%; height:2px;
background:linear-gradient(90deg,var(--ac,var(--ice)),transparent); opacity:.75;
}
.ach-stat:hover{border-color:rgba(255,255,255,.18); transform:translateY(-4px);}
.ach-stat-n{
font-family:'Archivo Black',var(--display),sans-serif;
font-size:clamp(2.1rem,5vw,3.3rem); line-height:1; color:#fff;
text-shadow:0 0 26px var(--glow,rgba(79,195,247,.35));
}
.ach-stat-l{font-family:var(--body); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:.7rem;}
.ach-stat-s{font-family:var(--body); font-size:.56rem; letter-spacing:.05em; color:rgba(255,255,255,.3); margin-top:.4rem; line-height:1.5;}
/* badge constellation */
.ach-badges{
display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
gap:clamp(2.2rem,5vw,4rem) clamp(1.6rem,4vw,3.5rem); padding:1.2rem 0 .5rem;
}
.ach-orb{
position:relative; width:clamp(104px,13vw,156px); aspect-ratio:1;
display:grid; place-items:center;
}
.ach-orb::before{ /* revolving conic glow ring */
content:''; position:absolute; inset:-15%; border-radius:50%;
background:conic-gradient(from 0deg, transparent 0deg, var(--c) 65deg, transparent 150deg, transparent 360deg);
filter:blur(13px); opacity:.5; animation:orbRevolve 8s linear infinite;
}
.ach-orb::after{ /* soft pulsing aura */
content:''; position:absolute; inset:8%; border-radius:50%;
background:radial-gradient(circle, var(--c) 0%, transparent 66%);
opacity:.2; filter:blur(12px); animation:auraPulse 4.5s ease-in-out infinite;
}
.orb-img-wrap{position:relative; z-index:3; width:100%; height:100%; display:grid; place-items:center;
animation:orbFloat 6s ease-in-out infinite;}
.ach-orb img{
width:100%; height:100%; object-fit:contain;
filter:drop-shadow(0 10px 26px rgba(0,0,0,.55));
transition:filter .4s, transform .4s;
}
.ach-orb:hover img{
filter:drop-shadow(0 0 16px var(--c)) drop-shadow(0 12px 30px rgba(0,0,0,.6));
transform:scale(1.06);
}
.ach-orb:hover::before{opacity:.85; animation-duration:3.5s;}
.ach-orb:hover::after{opacity:.45;}
.orb-cap{
position:absolute; bottom:-1.8rem; left:50%; transform:translateX(-50%);
white-space:nowrap; font-family:var(--body); font-size:.55rem; letter-spacing:.13em;
text-transform:uppercase; color:rgba(255,255,255,.42); transition:color .4s;
}
.ach-orb:hover .orb-cap{color:var(--c);}
/* scatter into a loose constellation */
.ach-orb:nth-child(1){transform:translateY(-14px);}
.ach-orb:nth-child(2){transform:translateY(20px);}
.ach-orb:nth-child(3){transform:translateY(-24px);}
.ach-orb:nth-child(4){transform:translateY(10px);}
.ach-orb:nth-child(5){transform:translateY(-6px);}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes orbRevolve{to{transform:rotate(360deg)}}
@keyframes auraPulse{0%,100%{opacity:.16; transform:scale(.95)}50%{opacity:.44; transform:scale(1.08)}}
@media(max-width:768px){
#ch-achievements{padding:4.5rem 1.5rem; min-height:auto;}
.ach-header{flex-direction:column; align-items:flex-start;}
.ach-caption{text-align:left; max-width:100%;}
.ach-stats{flex-direction:column;}
.ach-stat{flex:0 0 auto;}
.ach-badges{gap:2.6rem 1.4rem;}
.ach-orb{width:clamp(96px,30vw,128px);}
.ach-orb:nth-child(n){transform:none;}
.orb-cap{font-size:.5rem;}
}
@media(prefers-reduced-motion:reduce){
.ach-orb::before,.ach-orb::after,.orb-img-wrap{animation:none !important;}
}
/* ============================================================
DECORATIVE CLASSICAL LINE-ART (golden spiral / column / laurel)
============================================================ */
.hero-art{
display:none;
}
.hero-art svg{width:100%;height:auto;display:block}
@media(max-width:980px){ .hero-art{opacity:.045; width:78vw; left:50%; transform:translate(-50%,-46%)} }
.certs-art{
position:absolute; z-index:1; pointer-events:none;
left:50%; top:clamp(110px,30%,320px); transform:translateX(-50%);
width:clamp(360px,44vw,600px); color:var(--ice); opacity:.1;
}
.certs-art svg{width:100%;height:auto;display:block}
@media(max-width:768px){ .certs-art{opacity:.09;width:88vw;top:90px} }
/* ---- CONTACT: image left / text right ---- */
.contact-inner{
display:grid; grid-template-columns:0.82fr 1.18fr;
gap:clamp(2rem,5vw,5rem); align-items:center; text-align:left;
max-width:1200px; margin:0 auto; width:100%;
}
.contact-figure{display:flex;justify-content:center;align-items:center;min-width:0}
.contact-art{
position:relative; z-index:1; pointer-events:none; user-select:none;
width:auto; height:auto; max-height:min(76vh,720px); max-width:100%;
mix-blend-mode:multiply; opacity:.75; filter:contrast(1.05) grayscale(15%);
mask-image:radial-gradient(ellipse 85% 90% at 50% 40%, black 30%, rgba(0,0,0,0.7) 60%, transparent 90%);
-webkit-mask-image:radial-gradient(ellipse 85% 90% at 50% 40%, black 30%, rgba(0,0,0,0.7) 60%, transparent 90%);
}
.contact-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.contact-copy .contact-eyebrow{margin-bottom:1.6rem}
.contact-copy .contact-eyebrow::before{display:none}
.contact-copy .contact-big{font-size:clamp(1.3rem,2vw,1.5rem);line-height:1.24;margin-bottom:1.4rem}
.contact-copy .contact-sub{margin-bottom:2.4rem;max-width:46ch}
.contact-copy .contact-links{display:grid;grid-template-columns:repeat(2,max-content);gap:2.2rem 3.5rem;justify-content:flex-start;margin-bottom:2.6rem}
.contact-copy .cl{align-items:flex-start}
@media(max-width:900px){
.contact-inner{grid-template-columns:1fr;gap:2.5rem;text-align:center;justify-items:center}
.contact-figure{order:-1}
.contact-copy{align-items:center}
.contact-copy .contact-eyebrow::before{display:block}
.contact-copy .contact-links{justify-content:center}
.contact-copy .cl{align-items:center}
.contact-art{max-height:46vh; mask-image:radial-gradient(ellipse 90% 90% at 50% 40%, black 30%, rgba(0,0,0,0.6) 65%, transparent 90%); -webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 40%, black 30%, rgba(0,0,0,0.6) 65%, transparent 90%);}
}
/* ============================================================
COMPREHENSIVE MOBILE OVERRIDES
PC: keeps 100vh everywhere
Mobile (≤768px): removes fixed heights, enables natural scroll
============================================================ */
/* ── HAMBURGER MENU (mobile nav) ── */
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 0.4rem;
z-index: 10001;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
.nav-hamburger span {
display: block;
width: 24px;
height: 1.5px;
background: currentColor;
transition: all 0.3s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
display: none;
position: fixed;
inset: 0;
background: rgba(7,17,31,0.97);
backdrop-filter: blur(20px);
z-index: 9999;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
font-family: var(--display);
font-size: clamp(2rem, 8vw, 3rem);
color: rgba(255,255,255,0.7);
text-decoration: none;
letter-spacing: 0.05em;
transition: color 0.3s;
}
.mobile-menu a:hover { color: var(--ice); }
.mobile-menu .mobile-cv {
font-family: var(--body);
font-size: 0.7rem;
letter-spacing: 0.2em;
padding: 0.7rem 2rem;
border: 1px solid rgba(79,195,247,0.4);
color: var(--ice);
text-transform: uppercase;
margin-top: 1rem;
}
@media (max-width: 768px) {
/* ── NAV ── */
nav { padding: 1rem 1.25rem; }
nav.glass,
nav.on-hero.scrolled { padding: 0.75rem 1.25rem; }
.nav-links, .nav-r { display: none !important; }
.nav-hamburger { display: flex; color: #fff; }
nav.on-hero .nav-hamburger,
nav.on-light .nav-hamburger { color: #0A0A0A; }
/* ── SECTIONS: remove fixed 100vh on mobile ── */
.chapter { min-height: unset !important; height: auto !important; }
/* ── Hero: ensure no bottom gap into about section ── */
#ch-hero {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
#ch-about {
height: auto !important;
min-height: unset !important;
padding: 5rem 1.25rem 5.5rem;
margin-top: 0 !important;
}
#ch-skills {
height: auto !important;
min-height: unset !important;
padding: 5rem 1.25rem 4rem;
align-items: flex-start;
}
#ch-certs {
height: auto !important;
min-height: unset !important;
padding: 5rem 1.25rem 4rem;
}
#ch-contact {
height: auto !important;
min-height: unset !important;
padding: 5rem 1.25rem 4rem;
}
#ch-life {
height: auto !important;
min-height: unset !important;
padding: 5rem 1.25rem 4rem;
}
/* ── ABOUT section ── */
.about-tagline {
align-self: flex-start;
font-size: 0.9rem;
}
h2.ch-title {
font-size: clamp(1.2rem, 5vw, 1.4rem);
}
/* ── PROJECTS: keep horizontal GSAP scroll on mobile, adjust sizing ── */
#ch-projects {
height: 100vh !important;
min-height: unset;
}
/* push slide content down so it doesn't overlap with the absolute header */
.pcard-new {
padding: 10.5rem 1.25rem 3rem;
justify-content: flex-start;
}
/* compact, single-column header on mobile */
.projects-head {
padding: 1.4rem 1.25rem 0;
flex-direction: column;
align-items: flex-start;
gap: .4rem;
}
.projects-head .ch-title {
font-size: clamp(1.8rem, 8.5vw, 2.6rem);
line-height: .92;
}
.projects-head .ch-eyebrow { margin-bottom: .3rem; }
/* hide the giant "03 PROJECTS SHIPPED" counter on mobile — it collides with the title when wrapped */
.proj-counter { display: none; }
.pc-num-bg { font-size: clamp(8rem, 36vw, 14rem); top: 56%; }
.pc-cat { font-size: .54rem; letter-spacing: .22em; margin-bottom: 1rem; }
h3.pc-title {
font-size: clamp(2rem, 9.5vw, 3.6rem);
margin-bottom: 1rem;
}
.pc-desc { font-size: 0.76rem; }
.pc-points { gap: .65rem; margin-bottom: 1.4rem; }
.pc-points li { font-size: 0.74rem; line-height: 1.6; }
.pc-stack { margin-bottom: 1.4rem; }
.pc-links { flex-wrap: wrap; }
/* ── REEL: keep GSAP stacking on mobile, adjust sizes ── */
.reel-title { font-size: clamp(2.4rem, 10vw, 5rem); }
.reel-arrow { font-size: clamp(1.6rem, 6vw, 3rem); }
.reel-sub { font-size: 0.76rem; padding: 0 0.5rem; }
.reel-ghost-track { font-size: 28vw; }
.reel-corner.tl { font-size: 0.58rem; letter-spacing: 0.1em; }
.reel-corner.br { font-size: 0.55rem; letter-spacing: 0.08em; }
.reel-stats { gap: 1.2rem; margin-top: 1.2rem; }
.reel-stat-n { font-size: clamp(1.6rem, 6vw, 2.4rem); }
.reel-stat-l { font-size: 0.5rem; }
.reel-panel-inner { padding: 0 1rem; }
.reel-eyebrow { font-size: 0.7rem; margin-bottom: 0.8rem; }
/* ── SKILLS section ── */
.skills-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
margin-bottom: 2rem;
}
.skills-title { font-size: clamp(2.4rem, 11vw, 4rem); }
.skills-caption { text-align: left; max-width: 100%; }
.skills-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.skill-name { font-size: 0.78rem; }
.skill-row { gap: 0.7rem; }
/* ── LIFE / GOALS section ── */
.life-grid { grid-template-columns: 1fr; gap: 1rem; }
.life-header { margin-bottom: 2.5rem; }
.edu-list { grid-template-columns: 1fr; }
.cert-flex { gap: 0.7rem; }
/* ── CERTS section ── */
.cert-feature {
grid-template-columns: 1fr;
gap: 1.8rem;
padding: 2rem 1.4rem;
text-align: center;
}
.cf-seal { margin: 0 auto; }
.cf-meta { justify-content: center; }
.cf-title { font-size: clamp(1.4rem, 6vw, 2rem); }
.cf-ribbon { position: static; margin: 0 auto 1rem; width: max-content; }
.certs-chips { grid-template-columns: 1fr; }
.cert-chip2 { padding: 0.8rem 1rem; }
/* ── CONTACT section ── */
.contact-inner {
grid-template-columns: 1fr !important;
gap: 2rem;
text-align: center;
justify-items: center;
}
.contact-figure { order: -1; }
.contact-copy { align-items: center; }
.contact-copy .contact-eyebrow::before { display: block; }
.contact-copy .contact-links { justify-content: center; gap: 1.5rem 2rem; }
.contact-copy .cl { align-items: center; }
.contact-big { font-size: clamp(1.2rem, 5vw, 1.4rem); margin-bottom: 1.4rem; }
.contact-sub { margin: 0 auto 2rem; }
.contact-art { max-height: 45vh; }
.footer-strip {
position: relative;
flex-direction: column;
gap: 0.5rem;
text-align: center;
padding: 1.5rem;
bottom: auto;
}
/* ── AI FAB & MODAL ── */
#ai-fab { bottom: 1.1rem; right: 1.1rem; width: auto; height: auto; padding:.5rem .9rem .5rem .5rem; gap:.6rem; }
.ai-fab-hex { width: 36px; height: 36px; }
.ai-fab-main { font-size: .78rem; }
.ai-fab-kicker { font-size: .5rem; letter-spacing:.2em; }
#ai-modal { padding: 0.75rem; align-items: flex-end; justify-content: center; }
.am-panel { width: 100%; max-width: 100%; }
/* ── SECTION SNAP: disable on mobile (causes janky UX) ── */
/* Handled via JS below */
/* ── HERO specific (extends existing 560px rules) ── */
.hero {
padding-top: 5rem;
padding-bottom: 0 !important;
min-height: unset;
margin-bottom: 0;
}
.hero-float-card { display: none; }
/* ── PORTRAIT: give it a real height so the abs-positioned photo-stage has a container ── */
.portrait {
height: 440px !important;
min-height: 440px;
position: relative;
overflow: visible;
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none !important;
}
/* Pill sits in a reserved band ABOVE the photo so it never overlaps the face */
.status-pill {
top: 0.85rem;
}
/* Photo starts BELOW the pill band — this brings the image down */
.portrait .photo-stage {
position: absolute;
top: 3.4rem; /* reserved band for the status pill */
left: 0;
right: 0;
bottom: 0;
overflow: hidden; /* clips any breathing overflow */
display: flex;
align-items: flex-start; /* pin to top so the head is never cut */
justify-content: center;
}
.portrait img {
width: 100%;
height: calc(100% + 8px); /* tiny bottom bleed kills sub-pixel seams */
object-fit: cover;
object-position: center top; /* keep the full head, crop only lower body */
transform-origin: center top; /* breathing grows downward, head stays put */
transform: scale(1);
}
/* Scale "breathing" instead of vertical drift: image only ever GROWS,
so no white gap can open at the top or bottom while it animates. */
@keyframes photoFloat {
0%,100%{ transform: scale(1); }
50% { transform: scale(1.035); }
}
.topbar { gap: 0.5rem; }
.cat { padding: 0.35rem 0.65rem; font-size: 0.58rem; letter-spacing: 0.18em; }
}
/* Extra small: ≤ 400px */
@media (max-width: 400px) {
#ch-about { padding: 4.5rem 1rem 3.5rem; }
#ch-skills { padding: 4.5rem 1rem 3.5rem; }
#ch-certs { padding: 4.5rem 1rem 3.5rem; }
#ch-contact{ padding: 4.5rem 1rem 3.5rem; }
h2.ch-title { font-size: clamp(1.15rem, 5vw, 1.35rem); }
.reel-panel { min-height: auto; padding: 3.5rem 0; }
.portrait {
height: 380px !important;
min-height: 380px;
}
.life-grid { grid-template-columns: 1fr; }
}
/* ——— Typing indicator ——— */
.am-typing { display:flex; align-items:center; gap:5px; padding:10px 14px !important; }
.am-typing span {
width:7px; height:7px; border-radius:50%;
background: var(--acc, #6ee7b7);
display:inline-block;
animation: am-bounce 1.2s infinite ease-in-out;
}
.am-typing span:nth-child(2) { animation-delay:.2s; }
.am-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes am-bounce {
0%,80%,100% { transform:translateY(0); opacity:.4; }
40% { transform:translateY(-6px); opacity:1; }
}
/* ════════════════════════════════════════════════════════════════════
UNIFIED VISUAL PASS
One language across About · Skillset · Proof of Work · Reel ·
Certifications · Contact:
· blueprint 32px grid on every ground
· pastel accents instead of neon
· real cards — 1px hairline, radius, drop shadow
· Inter for titles/prose, IBM Plex Mono for labels
════════════════════════════════════════════════════════════════════ */
:root{
/* pastel accent set */
--pa-blue:#A7C8E8;
--pa-mint:#A8D8C0;
--pa-amber:#EDC9A0;
--pa-lav:#CDB9E3;
--pa-rose:#EFB9A9;
/* dark ground + card system */
--ui-ground:#08080A;
--ui-card:#0F0F13;
--ui-card-2:#131318;
--ui-line:rgba(255,255,255,.085);
--ui-line-soft:rgba(255,255,255,.05);
--ui-grid:rgba(255,255,255,.075);
--ui-shadow:0 26px 60px -20px rgba(0,0,0,.95), 0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.035);
--ui-shadow-hi:0 36px 80px -20px rgba(0,0,0,1), 0 6px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
/* type */
--ui-sans:'Inter','Geist',-apple-system,system-ui,sans-serif;
--ui-mono:'IBM Plex Mono',ui-monospace,monospace;
}
/* reusable card shell + grid ground */
.ui-grid-ground{
background-image:
linear-gradient(to right,var(--ui-grid) 1px,transparent 1px),
linear-gradient(to bottom,var(--ui-grid) 1px,transparent 1px);
background-size:32px 32px;
}
/* ── NAV — pastel instead of neon ── */
.nav-logo b{color:var(--pa-blue)}
.nav-links a::after{background:var(--pa-blue);box-shadow:none}
.btn-cv{
border:1px solid rgba(167,200,232,.35);color:var(--pa-blue);
font-family:var(--ui-mono);border-radius:6px;
}
.btn-cv:hover{background:var(--pa-blue);color:#0a0f14;box-shadow:0 6px 18px rgba(167,200,232,.18)}
/* ════════════════════════════════════════════════════════════════════
1 · THE STORY (#ch-about) — editorial cards, pastel peach, real fonts
════════════════════════════════════════════════════════════════════ */
#ch-about{
--terra:#E9C49E;
--ink-1:#F4F4F4;
--ink-2:#BFBFBF;
--ink-3:#8E8E8E;
--ink-4:#6B6B6B;
--div:rgba(255,255,255,.07);
--grid-l:var(--ui-grid);
background:var(--ui-ground);
font-family:var(--ui-sans);
}
.about-bg::before{
background:radial-gradient(ellipse 58% 42% at 50% 8%,rgba(233,196,158,.05) 0%,transparent 62%);
}
/* header */
#ch-about .ch-eyebrow{font-family:var(--ui-mono);letter-spacing:.22em;font-size:.6rem}
#ch-about h2.ch-title{
font-family:var(--ui-sans);font-weight:700;letter-spacing:.01em;
}
.story-kicker{font-family:var(--ui-mono);font-size:10px;letter-spacing:.2em;color:var(--ink-4)}
/* timeline mark */
.o-num{
font-family:var(--ui-sans);font-weight:600;font-size:20px;
border-color:rgba(233,196,158,.35);
background:rgba(233,196,158,.05);
}
.o-label{font-family:var(--ui-mono);font-size:9.5px;letter-spacing:.2em}
/* main column becomes a card */
.o-body{
max-width:none;
background:linear-gradient(180deg,var(--ui-card-2),var(--ui-card));
border:1px solid var(--ui-line);
border-radius:12px;
padding:2.1rem 2.3rem;
box-shadow:var(--ui-shadow);
transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;
}
.o-body:hover{transform:translateY(-3px);box-shadow:var(--ui-shadow-hi);border-color:rgba(255,255,255,.14)}
.o-title{
font-family:var(--ui-sans);font-weight:600;
font-size:clamp(22px,2.2vw,30px);line-height:1.18;letter-spacing:-.02em;
}
.o-period,.o-sub{font-family:var(--ui-mono);font-size:10.5px;letter-spacing:.16em}
.o-period{margin-top:14px}
.o-sub{margin-top:10px;color:var(--ink-4)}
.o-lead{
font-family:var(--ui-sans);font-size:15.5px;line-height:1.78;
color:var(--ink-2);max-width:62ch;margin-top:26px;
}
.o-statements{margin-top:26px}
.o-statements li{
font-family:var(--ui-sans);font-size:15px;line-height:1.7;color:var(--ink-2);
padding-bottom:12px;margin-bottom:12px;
}
.k{color:var(--terra);font-weight:500}
.xblock{padding-bottom:22px;margin-bottom:22px}
.xblock:first-child{margin-top:0 !important}
.xk{font-family:var(--ui-mono);font-size:10px;letter-spacing:.22em;margin-bottom:12px}
.xblock p{font-family:var(--ui-sans);font-size:15.5px;line-height:1.78;color:var(--ink-2);max-width:62ch}
.xtools{gap:.5rem}
.xtools span{
font-family:var(--ui-mono);font-size:10.5px;letter-spacing:.08em;
color:var(--ink-3);border:1px solid var(--ui-line);border-radius:6px;
padding:.4rem .7rem;background:rgba(255,255,255,.02);
}
.xtools span.k{color:var(--terra);border-color:rgba(233,196,158,.28);background:rgba(233,196,158,.06)}
/* insight panel becomes a card too */
.o-panel{
gap:1.5rem;
background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
border:1px solid var(--ui-line-soft);
border-radius:12px;
padding:1.7rem 1.6rem;
box-shadow:0 20px 48px -22px rgba(0,0,0,.9);
}
.pquote{
border-left:2px solid rgba(233,196,158,.45);
padding-left:16px;
font-family:'Instrument Serif',var(--serif),serif;font-style:italic;
font-size:18px;line-height:1.55;color:var(--ink-2);
}
.p-block .p-k{font-family:var(--ui-mono);font-size:9.5px;letter-spacing:.2em;padding-bottom:10px;margin-bottom:14px}
.p-block p,.p-list li{font-family:var(--ui-sans);font-size:13.5px;line-height:1.72}
.p-list li{padding-bottom:10px;margin-bottom:10px}
.metrics{gap:1.5rem 1rem}
.metric b{font-family:var(--ui-sans);font-weight:600;font-size:30px;letter-spacing:-.02em}
.metric span{font-family:var(--ui-mono);font-size:9px;letter-spacing:.18em;margin-top:8px}
/* ════════════════════════════════════════════════════════════════════
2 · SKILLSET (#ch-skills) — two shadowed cards on a black grid
════════════════════════════════════════════════════════════════════ */
#ch-skills{
--cool:var(--pa-blue);
--cool-soft:rgba(167,200,232,.7);
--warm:var(--pa-amber);
--warm-soft:rgba(237,201,160,.8);
background:var(--ui-ground);
height:auto;min-height:100vh;
padding:5.5rem 5rem;
}
.skills-bg{
background-image:
linear-gradient(to right,var(--ui-grid) 1px,transparent 1px),
linear-gradient(to bottom,var(--ui-grid) 1px,transparent 1px);
background-size:32px 32px;
}
.skills-bg::before{
background-image:none;
background:
radial-gradient(ellipse 55% 45% at 15% 12%,rgba(167,200,232,.05) 0%,transparent 60%),
radial-gradient(ellipse 50% 50% at 88% 88%,rgba(237,201,160,.04) 0%,transparent 60%);
mask-image:none;-webkit-mask-image:none;
}
.skills-bg::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}
.skills-header{margin-bottom:2rem;padding-bottom:1.3rem;border-bottom:1px solid var(--ui-line-soft)}
.skills-eyebrow{font-family:var(--ui-mono);font-size:.6rem;letter-spacing:.22em;color:var(--cool-soft)}
.skills-eyebrow::after{background:var(--cool);opacity:.4}
.skills-title{
font-family:var(--ui-sans);font-weight:700;
font-size:clamp(1.3rem,2vw,1.5rem);letter-spacing:.01em;color:#F4F4F4;
}
.skills-title em{color:var(--cool)}
.skills-caption{font-family:var(--ui-sans);font-size:.78rem;line-height:1.75;color:rgba(255,255,255,.4);max-width:38ch}
/* the two cards */
.skills-grid{grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch}
@media(max-width:1180px){.skills-grid{grid-template-columns:1fr 1fr}}
#ch-skills .skills-col{
background:linear-gradient(180deg,var(--ui-card-2),var(--ui-card));
border:1px solid var(--ui-line);
border-radius:12px;
padding:1.4rem 1.6rem 1.6rem;
box-shadow:var(--ui-shadow);
transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;
}
#ch-skills .skills-col:hover{
transform:translateY(-4px);
box-shadow:var(--ui-shadow-hi);
border-color:rgba(255,255,255,.15);
}
.skills-col-title{
font-family:var(--ui-mono);font-size:.6rem;letter-spacing:.22em;color:var(--warm-soft);
padding-bottom:.85rem;margin-bottom:.5rem;
border-bottom:1px solid var(--ui-line-soft);
}
.skills-col-title span{color:rgba(255,255,255,.22)}
.skill-row{padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.045)}
.skill-row:last-child{border-bottom:none}
.skill-row:hover{border-color:rgba(167,200,232,.22)}
.skill-idx{font-family:var(--ui-mono);font-size:.55rem;letter-spacing:.08em}
.skill-name{font-family:var(--ui-sans);font-size:.82rem;letter-spacing:0;color:rgba(255,255,255,.86)}
.skill-track{
height:8px;border-radius:2px;
background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 7px,transparent 7px 11px);
}
.skill-fill{
background:linear-gradient(90deg,var(--warm),var(--cool));
box-shadow:0 0 12px rgba(167,200,232,.25);
}
.skill-pct{font-family:var(--ui-mono);font-size:.68rem;color:rgba(255,255,255,.42)}
.skill-row:hover .skill-idx,.skill-row:hover .skill-pct{color:var(--cool)}
/* soft skills — chips inside the right card */
.soft-skills-label{
font-family:var(--ui-mono);font-size:.6rem;letter-spacing:.22em;color:var(--warm-soft);
margin:1.5rem 0 .9rem;padding-top:1.1rem;border-top:1px solid var(--ui-line-soft);
}
.soft-skills-label::before{display:none}
.soft-tags{gap:.45rem}
.soft-tag{
padding:.42rem .8rem;border-radius:7px;
border:1px solid var(--ui-line);background:rgba(255,255,255,.025);
font-family:var(--ui-sans);font-size:.7rem;letter-spacing:0;color:rgba(255,255,255,.62);
}
.soft-tag::before{background:var(--pa-blue);opacity:.55;width:4px;height:4px}
.soft-tag:hover{border-color:rgba(167,200,232,.4);background:rgba(167,200,232,.07);color:#fff}
.soft-tag:hover::before{box-shadow:0 0 6px var(--pa-blue)}
/* ════════════════════════════════════════════════════════════════════
3 · PROOF OF WORK (#ch-achievements) — stat cards + badge card
════════════════════════════════════════════════════════════════════ */
#ch-achievements{
background:var(--ui-ground);
padding:5.5rem 5rem;min-height:100vh;
}
.ach-bg{
background-image:
linear-gradient(to right,var(--ui-grid) 1px,transparent 1px),
linear-gradient(to bottom,var(--ui-grid) 1px,transparent 1px);
background-size:32px 32px;
}
.ach-bg::before{
background-image:none;
background:
radial-gradient(ellipse 60% 45% at 50% 0%,rgba(167,200,232,.05) 0%,transparent 62%),
radial-gradient(ellipse 50% 50% at 85% 95%,rgba(168,216,192,.035) 0%,transparent 60%);
mask-image:none;-webkit-mask-image:none;
}
.ach-bg::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}
.ach-header{margin-bottom:2rem;padding-bottom:1.3rem;border-bottom:1px solid var(--ui-line-soft)}
.ach-eyebrow{font-family:var(--ui-mono);font-size:.6rem;letter-spacing:.22em;color:rgba(167,200,232,.75)}
.ach-eyebrow::after{background:var(--pa-blue);opacity:.4}
.ach-title{
font-family:var(--ui-sans);font-weight:700;
font-size:clamp(1.3rem,2vw,1.5rem);letter-spacing:.01em;color:#F4F4F4;
}
.ach-title em{color:var(--pa-blue)}
.ach-caption{font-family:var(--ui-sans);font-size:.78rem;line-height:1.75;color:rgba(255,255,255,.4);max-width:40ch}
/* stat cards */
.ach-stats{gap:1.3rem;margin-bottom:1.6rem}
.ach-stat{
padding:1.5rem 1.6rem 1.6rem;border-radius:12px;
border:1px solid var(--ui-line);
background:linear-gradient(180deg,var(--ui-card-2),var(--ui-card));
box-shadow:var(--ui-shadow);
transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;
}
.ach-stat::before{height:2px;background:linear-gradient(90deg,var(--ac,var(--pa-blue)),transparent);opacity:.7}
.ach-stat:hover{transform:translateY(-4px);box-shadow:var(--ui-shadow-hi);border-color:rgba(255,255,255,.15)}
.ach-stat-n{
font-family:var(--ui-sans);font-weight:600;letter-spacing:-.025em;
font-size:clamp(1.9rem,4vw,2.7rem);color:#F4F4F4;text-shadow:none;
}
.ach-stat-l{font-family:var(--ui-mono);font-size:.6rem;letter-spacing:.18em;color:rgba(255,255,255,.55);margin-top:.7rem}
.ach-stat-s{font-family:var(--ui-sans);font-size:.7rem;letter-spacing:0;color:rgba(255,255,255,.32);margin-top:.45rem}
/* badges live in their own card */
.ach-badges{
position:relative;
border:1px solid var(--ui-line);border-radius:12px;
background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));
box-shadow:0 22px 55px -24px rgba(0,0,0,.95);
padding:3.2rem 1.6rem 3.4rem;
gap:clamp(2rem,4vw,3.2rem) clamp(1.4rem,3.4vw,3rem);
}
.ach-badges::before{
content:'Badges & streaks';
position:absolute;top:1.05rem;left:1.6rem;
font-family:var(--ui-mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
color:rgba(237,201,160,.8);
}
.ach-orb{width:clamp(92px,10.5vw,124px)}
.ach-orb::before{filter:blur(15px);opacity:.32}
.ach-orb::after{opacity:.14}
.orb-cap{font-family:var(--ui-mono);font-size:.53rem;letter-spacing:.14em;color:rgba(255,255,255,.45)}
/* ════════════════════════════════════════════════════════════════════
4 · REEL (#ch-reel) — pastel panels, grid ground, content card
════════════════════════════════════════════════════════════════════ */
.reel-panel{border-top:1px solid rgba(0,0,0,.08)}
.reel-panel::after{
content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
background-image:
linear-gradient(to right,rgba(0,0,0,.045) 1px,transparent 1px),
linear-gradient(to bottom,rgba(0,0,0,.045) 1px,transparent 1px);
background-size:32px 32px;
}
.reel-ghost-track{font-size:clamp(4rem,13vw,11rem);opacity:.075}
.reel-ghost-row.r2{opacity:.55}
.reel-panel-inner{
max-width:min(1060px,92vw);
padding:2.3rem clamp(1.5rem,3vw,2.8rem) 2.5rem;
background:rgba(255,255,255,.62);
border:1px solid rgba(0,0,0,.1);
border-radius:14px;
box-shadow:0 28px 70px -28px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.55);
}
.reel-eyebrow{
font-family:var(--ui-mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
opacity:.6;margin-bottom:.9rem;
}
.reel-titlerow{gap:clamp(.6rem,1.6vw,1.2rem)}
.reel-title{
font-family:var(--ui-sans);font-weight:700;
font-size:clamp(1.4rem,3.2vw,2.4rem);line-height:1.12;letter-spacing:-.02em;
}
.reel-arrow{
font-family:var(--ui-mono);font-size:clamp(.9rem,1.6vw,1.2rem);opacity:.4;transform:none;
}
.reel-sub{
font-family:var(--ui-sans);font-size:clamp(.84rem,1.1vw,.94rem);line-height:1.75;
opacity:.72;max-width:70ch;margin-top:1.1rem;
}
.reel-sub strong{font-weight:600;opacity:1}
.reel-stats{gap:clamp(1.2rem,3vw,2.6rem);margin-top:1.7rem;padding-top:0;border-top:none}
.reel-stat-n{font-family:var(--ui-sans);font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.025em}
.reel-stat-l{font-family:var(--ui-mono);font-size:.55rem;letter-spacing:.16em;opacity:.6;margin-top:.5rem}
.reel-tags{
gap:.5rem;margin-top:1.5rem;padding-top:0;border-top:none;
font-family:var(--ui-mono);font-size:.62rem;letter-spacing:.08em;
}
.reel-tags span{
gap:0;padding:.4rem .75rem;border:1px solid rgba(0,0,0,.14);border-radius:7px;
background:rgba(255,255,255,.45);opacity:.85;
}
.reel-tags span::before{display:none}
.reel-corner{font-family:var(--ui-mono);font-size:.55rem;letter-spacing:.18em;opacity:.5;z-index:5}
.reel-progress{background:rgba(0,0,0,.28);height:3px}
/* ════════════════════════════════════════════════════════════════════
5 · CERTIFICATIONS (#ch-certs) — grid ground + pastel credentials
════════════════════════════════════════════════════════════════════ */
#ch-certs{
--acc:var(--pa-blue);
--acc-soft:rgba(167,200,232,.72);
background:var(--ui-ground);
padding:6rem 5rem;
}
.certs-bg{
background-image:
linear-gradient(to right,var(--ui-grid) 1px,transparent 1px),
linear-gradient(to bottom,var(--ui-grid) 1px,transparent 1px);
background-size:32px 32px;
}
.certs-bg::after{
content:'';position:absolute;inset:0;
background:
radial-gradient(ellipse 55% 45% at 80% 12%,rgba(167,200,232,.05) 0%,transparent 60%),
radial-gradient(ellipse 45% 45% at 12% 92%,rgba(205,185,227,.035) 0%,transparent 60%);
}
.certs-bg::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}
.certs-art{color:var(--pa-lav);opacity:.07}
.certs-header{
margin-bottom:2rem;padding-bottom:1.3rem;border-bottom:1px solid var(--ui-line-soft);
}
#ch-certs .ch-eyebrow{font-family:var(--ui-mono);letter-spacing:.22em}
#ch-certs h2.ch-title{font-family:var(--ui-sans);font-weight:700;letter-spacing:.01em;color:#F4F4F4}
h2.ch-title.ice em{color:var(--pa-blue)}
.cert-feature{
border:1px solid var(--ui-line);border-radius:12px;
background:linear-gradient(180deg,var(--ui-card-2),var(--ui-card));
box-shadow:var(--ui-shadow);
transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;
}
.cert-feature:hover{
transform:translateY(-4px);
border-color:rgba(255,255,255,.15);
box-shadow:var(--ui-shadow-hi);
}
.cert-feature::before{
background:repeating-radial-gradient(circle at center,transparent 0 13px,rgba(167,200,232,.045) 13px 14px);
opacity:.4;
}
.cf-ribbon{
border-radius:7px;
border:1px solid rgba(168,216,192,.3);background:rgba(168,216,192,.07);
font-family:var(--ui-mono);font-size:.52rem;letter-spacing:.18em;color:rgba(168,216,192,.95);
}
.cf-ribbon::before{background:var(--pa-mint);box-shadow:0 0 7px rgba(168,216,192,.6)}
.cf-seal-ring{border-color:rgba(167,200,232,.3)}
.cf-seal-ring.inner{border-color:rgba(167,200,232,.16)}
.cf-seal-core{
background:radial-gradient(circle at 50% 35%,rgba(167,200,232,.16),rgba(167,200,232,.02));
border-color:rgba(167,200,232,.28);
box-shadow:inset 0 0 22px rgba(167,200,232,.1),0 0 24px rgba(167,200,232,.07);
}
.cf-seal-core b{font-family:var(--ui-sans);font-weight:600;letter-spacing:-.01em;color:var(--pa-blue)}
.cf-seal-core span{font-family:var(--ui-mono);letter-spacing:.16em}
.cf-tag{font-family:var(--ui-mono);font-size:.55rem;letter-spacing:.2em;color:var(--acc-soft)}
.cf-title{
font-family:var(--ui-sans);font-weight:600;letter-spacing:-.02em;color:#F4F4F4;
}
.cert-duo .cf-title{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.2}
.cf-desc{font-family:var(--ui-sans);font-size:.8rem;line-height:1.75;color:rgba(255,255,255,.44)}
.cert-duo .cf-desc{font-size:.8rem;line-height:1.75}
.cf-meta-k{font-family:var(--ui-mono);font-size:.5rem;letter-spacing:.16em;color:rgba(255,255,255,.3)}
.cf-meta-v{font-family:var(--ui-sans);font-size:.78rem;letter-spacing:0;color:rgba(255,255,255,.76)}
.cf-btn{
border-radius:8px;background:var(--pa-blue);color:#0a141d;
font-family:var(--ui-mono);font-size:.58rem;letter-spacing:.14em;
box-shadow:0 8px 22px -8px rgba(167,200,232,.5);
}
.cf-btn:hover{background:#B9D5EE;box-shadow:0 12px 30px -8px rgba(167,200,232,.6);transform:translateY(-2px)}
.cf-alt{font-family:var(--ui-mono);font-size:.55rem;letter-spacing:.12em}
.cf-alt:hover{color:var(--pa-blue)}
/* ════════════════════════════════════════════════════════════════════
6 · CONTACT (#ch-contact) — same grid, on light ground
════════════════════════════════════════════════════════════════════ */
#ch-contact{background:var(--silver)}
.contact-bg{
background-image:
linear-gradient(to right,rgba(0,0,0,.05) 1px,transparent 1px),
linear-gradient(to bottom,rgba(0,0,0,.05) 1px,transparent 1px);
background-size:32px 32px;
}
.contact-bg::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 60% 50% at 50% 45%,rgba(0,0,0,.028) 0%,transparent 68%);
}
.contact-eyebrow{font-family:var(--ui-mono);font-size:.6rem;letter-spacing:.22em}
.contact-copy .contact-big{
font-family:var(--ui-sans);font-weight:700;letter-spacing:.01em;line-height:1.24;color:#111;
}
.contact-big em{-webkit-text-stroke:1px #111}
.contact-sub{
font-family:'Instrument Serif',var(--serif),serif;font-style:italic;
font-size:1.05rem;color:rgba(0,0,0,.45);
}
.cl-lbl{font-family:var(--ui-mono);font-size:.55rem;letter-spacing:.18em}
.cl-val{font-family:var(--ui-sans);font-size:.82rem;color:rgba(0,0,0,.72)}
.contact-cta{
border-radius:8px;font-family:var(--ui-mono);font-size:.62rem;letter-spacing:.14em;
padding:.9rem 2.6rem;
}
.footer-strip{font-family:var(--ui-mono);font-size:.55rem;letter-spacing:.14em;color:rgba(0,0,0,.3)}
/* ════════════════════════════════════════════════════════════════════
RESPONSIVE — new card paddings
════════════════════════════════════════════════════════════════════ */
@media(max-width:1080px){
.o-panel{margin-top:1.4rem}
}
@media(max-width:900px){
#ch-skills,#ch-achievements,#ch-certs{padding:4.5rem 1.5rem}
.skills-grid{grid-template-columns:1fr;gap:1.1rem}
.skills-caption,.ach-caption{text-align:left;max-width:100%}
#ch-skills .skills-col{padding:1.2rem 1.2rem 1.4rem}
.o-body,.o-panel{padding:1.5rem 1.3rem}
.reel-panel-inner{padding:1.6rem 1.2rem 1.8rem;max-width:94vw}
.reel-ghost-track{font-size:22vw;opacity:.06}
.ach-badges{padding:2.8rem 1rem 3rem}
}
@media(max-width:768px){
.skills-header,.ach-header,.certs-header{flex-direction:column;align-items:flex-start}
.reel-title{font-size:clamp(1.25rem,6vw,1.8rem);white-space:normal}
}
/* ════════════════════════════════════════════════════════════════════
UNIFIED PASS · ROUND 2
Nav · Publications · Reel legibility · AI assistant
════════════════════════════════════════════════════════════════════ */
/* ── NAV — neutral ink instead of navy blue ── */
nav.glass{
background:rgba(10,10,12,.86);
backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
border-bottom:1px solid rgba(255,255,255,.075);
}
.nav-links a{font-family:var(--ui-mono);font-size:.6rem;letter-spacing:.16em}
#bar{
background:linear-gradient(90deg,var(--pa-blue),rgba(167,200,232,.25));
box-shadow:0 0 6px rgba(167,200,232,.45);
}
#loader .ld-num span{background:var(--pa-blue);box-shadow:0 0 12px rgba(167,200,232,.5)}
.ld-count{color:var(--pa-blue)}
/* ════════════════════════════════════════════════════════════════════
REEL — no frosted card, full-strength type
════════════════════════════════════════════════════════════════════ */
.reel-panel-inner{
background:none;border:none;border-radius:0;box-shadow:none;
padding:0 clamp(1.2rem,3vw,2.5rem);
max-width:min(1060px,92vw);
}
.reel-eyebrow{opacity:.78}
.reel-title{opacity:1}
.reel-sub{opacity:.92}
.reel-stat-l{opacity:.72}
.reel-corner{opacity:.62}
.reel-stats,.reel-tags{border-top:none;padding-top:0}
.reel-tags span{
background:none;border:none;border-radius:0;opacity:.9;
padding:0;gap:clamp(.5rem,1.4vw,1rem);
}
.reel-tags{gap:clamp(.8rem,2.4vw,2rem)}
.reel-tags span::before{
display:inline-block;content:"";width:clamp(12px,1.6vw,22px);height:1px;
background:currentColor;opacity:.5;
}
.reel-ghost-track{opacity:.09}
/* ════════════════════════════════════════════════════════════════════
PUBLICATIONS (#ch-pubs) — grid ground + cards, parchment pastel
════════════════════════════════════════════════════════════════════ */
#ch-pubs{
background:var(--ui-ground);
padding:6rem 5rem;
--pub-acc:#E0D2AE;
--pub-soft:rgba(224,210,174,.6);
}
.pubs-bg{
background-image:
linear-gradient(to right,var(--ui-grid) 1px,transparent 1px),
linear-gradient(to bottom,var(--ui-grid) 1px,transparent 1px);
background-size:32px 32px;
}
.pubs-bg::before{
content:'';position:absolute;inset:0;
background:
radial-gradient(ellipse 55% 50% at 78% 15%,rgba(224,210,174,.05) 0%,transparent 60%),
radial-gradient(ellipse 42% 48% at 12% 90%,rgba(224,210,174,.03) 0%,transparent 60%);
}
.pubs-bg::after{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
}
.pubs-art{opacity:.07}
.pubs-header{
margin-bottom:2rem;padding-bottom:1.3rem;
border-bottom:1px solid var(--ui-line-soft);
}
#ch-pubs .ch-eyebrow{font-family:var(--ui-mono);letter-spacing:.22em}
#ch-pubs h2.ch-title{font-family:var(--ui-sans);font-weight:700;letter-spacing:.01em;color:#F4F4F4}
.pub-feature{
border:1px solid var(--ui-line);border-radius:12px;
background:linear-gradient(180deg,var(--ui-card-2),var(--ui-card));
box-shadow:var(--ui-shadow);
padding:2.4rem 2.6rem;gap:2.4rem;margin-bottom:1.6rem;
transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;
}
.pub-feature:hover{
transform:translateY(-4px);border-color:rgba(255,255,255,.15);
box-shadow:var(--ui-shadow-hi);
}
.pub-feature::before{opacity:.35}
.pf-ribbon{
border-radius:7px;font-family:var(--ui-mono);font-size:.52rem;letter-spacing:.18em;
border-color:rgba(224,210,174,.3);background:rgba(224,210,174,.07);
}
.pf-cover{width:132px;height:168px}
.pf-cover-cap,.pf-cover-foot{font-family:var(--ui-mono)}
.pf-cover-tt{font-family:var(--ui-sans);font-weight:600;font-size:.9rem;letter-spacing:-.01em}
.pf-tag{font-family:var(--ui-mono);font-size:.55rem;letter-spacing:.2em;color:var(--pub-soft)}
.pf-title{
font-family:var(--ui-sans);font-weight:600;letter-spacing:-.02em;
font-size:clamp(1.2rem,2.1vw,1.65rem);line-height:1.2;color:#F4F4F4;
}
.pf-desc{font-family:var(--ui-sans);font-size:.8rem;line-height:1.75;color:rgba(255,255,255,.46)}
.pf-meta-k{font-family:var(--ui-mono);font-size:.5rem;letter-spacing:.16em}
.pf-meta-v{font-family:var(--ui-sans);font-size:.78rem;letter-spacing:0}
.pf-btn{
border-radius:8px;font-family:var(--ui-mono);font-size:.58rem;letter-spacing:.14em;
box-shadow:0 8px 22px -8px rgba(224,210,174,.4);
}
.pubs-more-label{font-family:var(--ui-mono);font-size:.56rem;letter-spacing:.24em}
.pub-item{
border:1px solid var(--ui-line);border-radius:12px;
background:linear-gradient(180deg,var(--ui-card-2),var(--ui-card));
box-shadow:0 20px 48px -24px rgba(0,0,0,.95);
transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;
}
.pub-item:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.15);box-shadow:var(--ui-shadow-hi)}
.pi-num{font-family:var(--ui-sans);font-weight:600;font-size:1.15rem;letter-spacing:-.02em}
.pi-type,.pi-kind,.pi-arrow{font-family:var(--ui-mono)}
.pi-title{
font-family:var(--ui-sans);font-weight:600;letter-spacing:-.015em;
font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.35;
}
.pi-desc{font-family:var(--ui-sans);font-size:.76rem;line-height:1.7;color:rgba(255,255,255,.44)}
.pubs-cta-text{font-family:'Instrument Serif',var(--serif),serif;font-size:1rem}
.pubs-cta{border-radius:8px;font-family:var(--ui-mono);font-size:.6rem;letter-spacing:.14em}
/* ════════════════════════════════════════════════════════════════════
AI ASSISTANT — panel, bubbles, chips, composer
════════════════════════════════════════════════════════════════════ */
.am-overlay{background:rgba(6,6,8,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.am-panel{
width:400px;max-width:100%;
border-radius:18px;overflow:hidden;
background:linear-gradient(180deg,#131318,#0C0C0F);
border:1px solid rgba(255,255,255,.1);
box-shadow:0 40px 90px -25px rgba(0,0,0,1),0 8px 24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
}
/* header */
.am-top{
padding:.95rem 1.1rem;
border-bottom:1px solid rgba(255,255,255,.07);
background:rgba(255,255,255,.02);
}
.am-id{display:flex;align-items:center;gap:.7rem;min-width:0}
.am-avatar{
width:34px;height:34px;flex-shrink:0;border-radius:10px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(160deg,rgba(167,200,232,.22),rgba(167,200,232,.05));
border:1px solid rgba(167,200,232,.28);
}
.am-avatar svg{width:16px;height:16px;fill:none;stroke:var(--pa-blue);stroke-width:1.6;stroke-linejoin:round}
.am-id-txt{display:flex;flex-direction:column;gap:.15rem;line-height:1;min-width:0}
.am-title{
font-family:var(--ui-sans);font-weight:600;font-size:.82rem;letter-spacing:-.01em;
color:#F2F2F2;text-transform:none;
}
.am-status{
font-family:var(--ui-mono);font-size:.53rem;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.35);display:flex;align-items:center;gap:.4rem;
}
.am-status::before{
content:'';width:5px;height:5px;border-radius:50%;
background:var(--pa-mint);box-shadow:0 0 7px rgba(168,216,192,.7);
}
.am-close{
width:28px;height:28px;border-radius:8px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
color:rgba(255,255,255,.35);font-size:.8rem;cursor:pointer;
border:1px solid transparent;transition:all .2s;
}
.am-close:hover{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
/* messages */
.am-msgs{
min-height:250px;max-height:340px;padding:1.1rem;gap:.7rem;
overflow-x:hidden;
scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;
}
.am-msgs::-webkit-scrollbar{width:5px}
.am-msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}
.am-msg{
font-family:var(--ui-sans);font-size:.8rem;line-height:1.65;letter-spacing:0;
padding:.7rem .9rem;border-radius:14px;max-width:88%;
border:1px solid transparent;
/* long-token safety: a 60-char unbroken string must wrap, not overflow */
min-width:0;
overflow-wrap:anywhere;
word-break:break-word;
-webkit-hyphens:auto;hyphens:auto;
white-space:pre-wrap;
}
.am-msg a{color:var(--pa-blue);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.am-msg.usr a{color:#0F1720}
.am-msg.bot{
align-self:flex-start;border-bottom-left-radius:5px;
color:rgba(255,255,255,.8);
background:rgba(255,255,255,.05);
border-color:rgba(255,255,255,.075);
}
.am-msg.usr{
align-self:flex-end;text-align:left;border-bottom-right-radius:5px;
color:#0F1720;font-weight:500;
background:var(--pa-blue);
border-color:rgba(167,200,232,.5);
}
.am-typing{background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.075) !important}
.am-typing span{background:var(--pa-blue)}
/* quick chips */
.am-chips{padding:0 1.1rem .9rem;gap:.4rem}
.am-chip{
padding:.36rem .75rem;border-radius:99px;cursor:pointer;
font-family:var(--ui-sans);font-size:.68rem;letter-spacing:0;
color:rgba(255,255,255,.55);
border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.025);
transition:all .22s;
}
.am-chip:hover{
border-color:rgba(167,200,232,.45);color:var(--pa-blue);
background:rgba(167,200,232,.08);transform:translateY(-1px);
}
/* composer */
.am-inp-row{
padding:.8rem 1.1rem 1rem;border-top:1px solid rgba(255,255,255,.07);
gap:.5rem;align-items:center;background:rgba(255,255,255,.015);
}
.am-inp{
border-radius:11px;padding:.62rem .85rem;
font-family:var(--ui-sans);font-size:.78rem;letter-spacing:0;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
transition:border-color .25s,box-shadow .25s,background .25s;
}
.am-inp::placeholder{color:rgba(255,255,255,.28)}
.am-inp:focus{
border-color:rgba(167,200,232,.45);background:rgba(255,255,255,.06);
box-shadow:0 0 0 3px rgba(167,200,232,.12);
}
.am-send{
width:38px;height:38px;flex-shrink:0;border-radius:11px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
padding:0;font-size:.9rem;line-height:1;
background:var(--pa-blue);border:1px solid rgba(167,200,232,.6);color:#0F1720;
box-shadow:0 8px 20px -8px rgba(167,200,232,.55);
transition:all .25s;
}
.am-send:hover{background:#BCD8F0;transform:translateY(-1px);box-shadow:0 12px 26px -8px rgba(167,200,232,.65)}
/* floating button — pastel mark */
.ai-fab-hex{border-radius:11px;background:#17181A;border-color:rgba(167,200,232,.18)}
.ai-fab-hex svg{stroke:var(--pa-blue);filter:drop-shadow(0 0 5px rgba(167,200,232,.35))}
.ai-fab-kicker{font-family:var(--ui-mono)}
.ai-fab-main{font-family:var(--ui-sans)}
.ai-pulse{background:var(--pa-mint);box-shadow:0 0 10px rgba(168,216,192,.7)}
@media(max-width:900px){
#ch-pubs{padding:4.5rem 1.5rem}
.pub-feature{padding:1.7rem 1.4rem;gap:1.6rem}
.am-panel{border-radius:16px}
.am-msgs{max-height:46vh}
}
/* ════════════════════════════════════════════════════════════════════
UNIFIED PASS · ROUND 3 — loader curtain + hero portrait cleanup
════════════════════════════════════════════════════════════════════ */
/* ── LOADER — same grid ground, Inter mark, pastel rule ── */
#loader{
background:var(--ui-ground);
gap:1.4rem;
}
#loader::before{
content:'';position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(to right,var(--ui-grid) 1px,transparent 1px),
linear-gradient(to bottom,var(--ui-grid) 1px,transparent 1px);
background-size:32px 32px;
}
#loader::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 55% 45% at 50% 45%,rgba(167,200,232,.06) 0%,transparent 62%);
}
#loader > *{position:relative;z-index:2}
.ld-num{
font-family:var(--ui-sans) !important;font-weight:700;
font-size:clamp(1.6rem,4vw,2.6rem) !important;
letter-spacing:-.02em !important;color:#F4F4F4;
padding-bottom:.7rem;
}
.ld-num span{
height:1.5px;border-radius:99px;
background:linear-gradient(90deg,var(--pa-amber),var(--pa-blue));
box-shadow:0 0 12px rgba(167,200,232,.35);
}
.ld-label{
font-family:var(--ui-mono);font-size:.58rem;letter-spacing:.28em;
color:rgba(255,255,255,.32);
}
.ld-count{
font-family:var(--ui-mono);font-size:.58rem;letter-spacing:.2em;
color:var(--pa-blue);
}
/* ── HERO PORTRAIT — drop the leftover line decoration ── */
.portrait-bg::after{display:none} /* travelling scan line */
.portrait-corner{display:none} /* corner bracket rules */
/* ── SKILLSET — plain list, no percentage meters ── */
.skill-row{
display:grid;grid-template-columns:auto 1fr;align-items:center;
gap:.9rem;padding:.62rem 0;
}
.skill-track,.skill-pct{display:none}
.skill-row-top{margin-bottom:0}
.skill-name{font-size:.86rem}
/* ── GREEK PENCIL SKETCHES — faint marginalia, never in the way ── */
.gsketch{
position:absolute;pointer-events:none;z-index:1;
color:#FFFFFF;opacity:.055;
-webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 25%,transparent 82%);
mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 25%,transparent 82%);
}
.gsketch svg{width:100%;height:auto;display:block}
.gsketch--about{top:6%;right:3vw;width:clamp(150px,13vw,230px)}
.gsketch--skills{top:50%;right:2vw;transform:translateY(-50%);width:clamp(120px,10vw,190px);opacity:.05}
.gsketch--ach{top:52%;left:2vw;transform:translateY(-50%);width:clamp(180px,16vw,280px);opacity:.045}
.gsketch--contact{color:#111;opacity:.05;bottom:8%;right:3vw;width:clamp(160px,14vw,240px)}
@media(max-width:900px){
.gsketch--skills,.gsketch--ach{display:none}
.gsketch--about{width:120px;opacity:.05;top:2%;right:1rem}
.gsketch--contact{width:130px;opacity:.045;bottom:6rem;right:1rem}
}
/* ════════════════════════════════════════════════════════════════════
RESPONSIVE — FINAL PASS (tablet · phone)
Loaded last, so it settles every earlier breakpoint conflict.
1280 → desk 1024 → tablet 820 → small tablet
560 → phone 380 → small phone
════════════════════════════════════════════════════════════════════ */
/* global guards — nothing may push the page sideways */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%}
*{-webkit-tap-highlight-color:rgba(167,200,232,.18)}
/* ───────────────────────────── ≤ 1024px ───────────────────────── */
@media(max-width:1024px){
/* nav: eleven links never fit a tablet — go to the hamburger early */
.nav-links,.nav-r{display:none !important}
.nav-hamburger{display:flex !important}
nav{padding:1rem 1.5rem}
nav.glass,nav.on-hero.scrolled{padding:.8rem 1.5rem}
.mobile-menu{
overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:5.5rem 1.5rem 2.5rem;gap:.2rem;
}
.mobile-menu a{padding:.7rem 0;min-height:44px;display:flex;align-items:center}
/* hero stacks a little earlier so the portrait keeps its room */
.hero{
grid-template-columns:1fr;
grid-template-areas:"top" "content" "portrait";
padding:1.5rem 1.5rem 0;column-gap:0;row-gap:1.5rem;min-height:unset;
}
.portrait{height:440px;align-self:auto;border-left:none;border-right:none}
/* story */
.order{grid-template-columns:72px minmax(0,1fr);gap:1.8rem}
.o-panel{grid-column:1 / -1;margin-top:1.2rem}
.o-body,.o-panel{padding:1.6rem 1.5rem}
.about-inner{padding:0 1.75rem}
/* projects (stays a pinned horizontal rail) */
.projects-head{padding:1.8rem 2rem 0}
.pcard-new{padding:8rem 4vw 3.5rem}
.pcard-new .p-slide-left{padding:1.9rem 1.7rem;max-width:none}
.pcard-new h3.pc-title{font-size:clamp(1.35rem,3.4vw,1.9rem)}
.pcard-new .pc-points li{font-size:.84rem;line-height:1.6}
/* skills / proof of work / certs / pubs */
#ch-skills,#ch-achievements,#ch-certs,#ch-pubs{padding:4.5rem 1.75rem}
.skills-grid{gap:1.1rem}
.cert-duo{grid-template-columns:1fr;gap:1.1rem}
.pub-feature{grid-template-columns:1fr;gap:1.6rem;padding:1.9rem 1.7rem}
.pubs-list{grid-template-columns:1fr}
/* reel */
.reel-panel-inner{padding:0 1.4rem;max-width:94vw}
.reel-sub{font-size:.86rem;max-width:60ch}
/* contact */
.contact-inner{grid-template-columns:1fr;gap:2.2rem;justify-items:center;text-align:center}
.contact-figure{order:-1}
.contact-copy{align-items:center}
.contact-copy .contact-links{justify-content:center}
.contact-copy .cl{align-items:center}
.contact-art{max-height:44vh}
}
/* ───────────────────────────── ≤ 820px ────────────────────────── */
@media(max-width:820px){
/* fixed viewport heights off everywhere except the two pinned rails */
#ch-about,#ch-skills,#ch-achievements,#ch-certs,#ch-pubs,#ch-contact{
height:auto !important;min-height:unset !important;
}
#ch-about{padding:4.5rem 0 5rem}
#ch-skills,#ch-achievements,#ch-certs,#ch-pubs{padding:4rem 1.25rem 4rem}
#ch-contact{padding:4.5rem 1.25rem 6rem}
.about-inner{padding:0 1.25rem}
.story-head,.skills-header,.ach-header,.certs-header,.pubs-header{
flex-direction:column;align-items:flex-start;gap:.9rem;
}
.story-kicker,.skills-caption,.ach-caption{text-align:left;max-width:100%}
.order{grid-template-columns:1fr;gap:1.2rem}
.o-mark{display:flex;align-items:center;gap:.9rem;text-align:left}
.o-num{width:44px;height:44px;font-size:17px;margin:0}
.o-label{margin-top:0}
.o-rail{display:none}
.o-body,.o-panel{padding:1.4rem 1.2rem}
.o-title{font-size:22px}
.o-lead,.xblock p,.o-statements li{font-size:14.5px;line-height:1.7}
.metrics{grid-template-columns:1fr 1fr;gap:1.1rem}
.metric b{font-size:26px}
.skills-grid{grid-template-columns:1fr;gap:1rem}
#ch-skills .skills-col{padding:1.15rem 1.15rem 1.3rem}
.ach-stats{flex-direction:column;gap:.9rem}
.ach-stat{flex:0 0 auto;padding:1.2rem 1.2rem 1.3rem}
.ach-badges{padding:2.6rem 1rem 3rem;gap:2rem 1.2rem}
.ach-orb{width:clamp(84px,24vw,110px)}
.ach-orb:nth-child(n){transform:none}
.cert-feature{padding:1.7rem 1.3rem;gap:1.4rem;text-align:left}
.cf-body{display:flex;flex-direction:column;align-items:stretch}
.cf-btn{align-self:center;text-align:center}
.cf-alt{align-self:center;text-align:center;margin-top:.9rem}
.cf-seal{margin:0}
.cf-ribbon{position:static;margin:0 0 .9rem;width:max-content}
.pub-feature{padding:1.6rem 1.3rem}
/* projects rail */
.projects-head{padding:1.3rem 1.25rem 0}
.pcard-new{padding:8.5rem 1.1rem 3.2rem;justify-content:flex-start}
.pcard-new .p-slide-left{padding:1.35rem 1.15rem}
.pcard-new h3.pc-title{font-size:clamp(1.2rem,5.6vw,1.6rem);margin-bottom:.8rem}
.pcard-new .pc-points{gap:.55rem;margin-bottom:1rem}
.pcard-new .pc-points li{font-size:.78rem;line-height:1.55}
.pcard-new .pc-num-bg{font-size:clamp(3rem,14vw,4.4rem);right:1rem;top:.6rem}
.pcard-new .pc-stack{margin-bottom:1rem;gap:.35rem}
.pcard-new .pc-tag{font-size:.66rem;padding:.26rem .55rem}
.pcard-new .pc-links{flex-wrap:wrap;gap:.45rem}
.pcard-new .btn-red,.pcard-new .btn-red-out{font-size:.72rem;padding:.48rem .85rem}
.proj-dots{bottom:1.1rem}
.pdot{width:24px}.pdot.on{width:38px}
/* reel */
.reel-panel-inner{padding:0 1.15rem}
.reel-title{font-size:clamp(1.2rem,6.4vw,1.7rem);white-space:normal}
.reel-arrow{font-size:.8rem}
.reel-eyebrow{font-size:.55rem;margin-bottom:.7rem}
.reel-sub{font-size:.8rem;line-height:1.7;margin-top:.9rem}
.reel-stats{gap:1.4rem 1rem;margin-top:1.2rem;padding-top:0}
.reel-stats:has(.reel-stat:nth-child(4)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center}
.reel-stat{max-width:100%}
.reel-stat-l{text-align:center;line-height:1.35}
.reel-stat-n{font-size:clamp(1.3rem,5.5vw,1.7rem)}
.reel-stat-l{font-size:.5rem;letter-spacing:.12em}
.reel-tags{gap:.7rem;margin-top:1.2rem;padding-top:0;font-size:.58rem}
.reel-ghost-track{font-size:24vw;opacity:.07}
.reel-corner{font-size:.5rem;letter-spacing:.12em}
.reel-corner.tl{top:1rem;left:1rem}
.reel-corner.br{bottom:1rem;right:1rem}
/* contact */
.contact-links{gap:1.4rem 2rem;margin-bottom:2.2rem}
.contact-art{max-height:38vh}
.footer-strip{
position:relative;bottom:auto;padding:2rem 1.25rem 0;
flex-direction:column;gap:.45rem;text-align:center;
}
/* assistant */
#ai-modal{padding:0;align-items:flex-end;justify-content:center}
.am-panel{width:100%;border-radius:18px 18px 0 0}
.am-msgs{max-height:44vh}
#ai-fab{bottom:1rem;right:1rem;padding:.45rem .9rem .45rem .45rem;gap:.55rem}
.ai-fab-hex{width:34px;height:34px}
.ai-fab-main{font-size:.76rem}
.ai-fab-kicker{font-size:.46rem}
}
/* ───────────────────────────── ≤ 560px ────────────────────────── */
@media(max-width:560px){
nav{padding:.9rem 1.1rem}
nav.glass,nav.on-hero.scrolled{padding:.7rem 1.1rem}
.nav-logo{font-size:1.45rem !important}
.hero{padding:1.1rem 1.1rem 0}
.portrait{height:330px}
.cta-row{flex-direction:column;align-items:stretch}
.btn{justify-content:center}
h2.ch-title,.skills-title,.ach-title{font-size:clamp(1.1rem,5vw,1.3rem)}
.skills-caption,.ach-caption{font-size:.74rem}
#ch-skills,#ch-achievements,#ch-certs,#ch-pubs{padding:3.5rem 1.1rem}
#ch-contact{padding:4rem 1.1rem 5rem}
.skill-row{padding:.5rem 0;gap:.7rem}
.skill-name{font-size:.8rem}
.soft-tag{font-size:.66rem;padding:.36rem .65rem}
.ach-stat-n{font-size:1.9rem}
.ach-orb{width:clamp(76px,26vw,96px)}
.orb-cap{font-size:.46rem;bottom:-1.5rem}
.cf-title{font-size:1.15rem}
.cf-desc,.pf-desc,.pi-desc{font-size:.76rem}
.cf-meta{gap:1rem}
.pf-cover{width:104px;height:132px}
.am-chips{gap:.35rem}
.am-chip{font-size:.64rem;padding:.32rem .65rem}
.am-msg{font-size:.76rem;max-width:92%}
#ai-fab .ai-fab-kicker{display:none}
}
/* ───────────────────────────── ≤ 380px ────────────────────────── */
@media(max-width:380px){
.pcard-new{padding:8rem .9rem 3rem}
.pcard-new .p-slide-left{padding:1.15rem .95rem}
.o-body,.o-panel{padding:1.2rem 1rem}
#ch-skills .skills-col{padding:1rem}
.metrics{grid-template-columns:1fr}
.reel-title{font-size:clamp(1.05rem,7vw,1.4rem)}
.ai-fab-main{font-size:.7rem}
}
/* touch devices: hover-only reveals must not stick */
@media(hover:none){
.pcard-new:hover .p-slide-left,
#ch-skills .skills-col:hover,
.ach-stat:hover,.cert-feature:hover,.pub-feature:hover,.pub-item:hover,.o-body:hover{
transform:none;
}
}
/* ── MOBILE MENU — matched to the new UI, and scrollable ── */
.mobile-menu{
background:rgba(8,8,10,.97);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
justify-content:flex-start;gap:0;
padding:5.5rem 1.5rem 2.5rem;
overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.mobile-menu::before{
content:'';position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(to right,var(--ui-grid) 1px,transparent 1px),
linear-gradient(to bottom,var(--ui-grid) 1px,transparent 1px);
background-size:32px 32px;
}
.mobile-menu > *{position:relative;z-index:1}
.mm-close{
position:absolute;top:1.15rem;left:1.5rem;z-index:3;
display:inline-flex;align-items:center;gap:.55rem;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);border-radius:8px;
padding:.55rem .95rem;color:rgba(255,255,255,.82);
font-family:var(--ui-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
cursor:pointer;-webkit-appearance:none;appearance:none;
-webkit-tap-highlight-color:transparent;transition:color .25s,border-color .25s;
width:auto;max-width:none;min-height:0;border-bottom:1px solid rgba(255,255,255,.16);
}
.mm-close span{font-size:.85rem;line-height:1}
.mm-close:hover,.mm-close:active{color:var(--pa-blue);border-color:rgba(167,200,232,.5)}
.mobile-menu a{
font-family:var(--ui-sans);font-weight:600;
font-size:clamp(1.05rem,4.6vw,1.35rem);letter-spacing:-.015em;
color:rgba(255,255,255,.78);
width:100%;max-width:420px;
padding:.85rem .2rem;min-height:48px;
display:flex;align-items:center;
border-bottom:1px solid rgba(255,255,255,.06);
}
.mobile-menu a:hover,.mobile-menu a:active{color:var(--pa-blue)}
.mobile-menu .mobile-cv{
font-family:var(--ui-mono);font-size:.62rem;letter-spacing:.16em;
justify-content:center;border:1px solid rgba(167,200,232,.35);
border-radius:8px;color:var(--pa-blue);
margin-top:1.4rem;padding:.85rem 2rem;max-width:420px;
}
/* hamburger must stay visible on the light hero at tablet widths too */
@media(max-width:1024px){
nav.on-hero .nav-hamburger,
nav.on-light .nav-hamburger{color:#0A0A0A}
nav.glass .nav-hamburger{color:#fff}
.nav-hamburger{padding:.5rem;margin:-.5rem}
}
/* ════════════════════════════════════════════════════════════════════
FIXES — hero overflow / nav clearance · projects rail is desktop-only
════════════════════════════════════════════════════════════════════ */
/* hero: columns can never sum past the viewport, and the fixed nav
always has clear air above the name */
.hero{
grid-template-columns:minmax(0,1fr) clamp(360px,42vw,620px);
padding:7rem 3rem 0;
}
.portrait{min-width:0}
/* stack before the two columns start fighting for room */
@media(max-width:1150px){
.hero{
grid-template-columns:minmax(0,1fr);
grid-template-areas:"top" "content" "portrait";
padding:6.5rem 1.75rem 0;column-gap:0;row-gap:1.5rem;min-height:unset;
}
.portrait{height:440px;align-self:auto;border-left:none;border-right:none}
.hero-float-card.fc-finance{left:10px}
.hero-float-card.fc-data{right:10px}
.hero-float-card.fc-markets{left:10px}
.hero-float-card.fc-students{right:10px}
}
/* ── PROJECTS: vertical stack on tablet + phone ── */
@media(max-width:1024px){
#ch-projects{
height:auto !important;min-height:0 !important;
display:block;padding:0 0 2.5rem;
}
#proj-viewport{position:static;inset:auto;overflow:visible}
#proj-track{
display:block !important;width:100% !important;height:auto !important;
transform:none !important;
}
.pcard-new{
width:100%;height:auto;min-height:0;flex-shrink:1;
display:block;overflow:visible;
padding:0 1.5rem 1.25rem !important;
}
.pcard-new::before,.pcard-new::after{display:none}
.pcard-new .p-slide-left{max-width:760px;margin:0 auto}
.pcard-new .pc-num-bg{top:.6rem}
.projects-head{
position:static;pointer-events:auto;
opacity:1 !important;transform:none !important;
padding:4rem 1.5rem 1.5rem !important;
}
.proj-dots{display:none}
}
@media(max-width:560px){
.hero{padding:6rem 1.1rem 0}
.pcard-new{padding:0 1.1rem 1rem !important}
.projects-head{padding:3.2rem 1.1rem 1.2rem !important}
}
/* contact block: two-up everywhere, single column only where an email cannot share a row */
@media(max-width:560px){
.contact-copy .contact-links{grid-template-columns:minmax(0,1fr);justify-content:center}
.contact-copy .cl{min-width:0}
.cl-val{word-break:break-word}
}
/* ═══════════════════════════════════════════════════════════════════
MOBILE HOME SCREEN — dedicated phone layout for the hero.
Target: nav + masthead + tagline + skills + CTAs land inside one
screen, with the portrait as the reward for the first scroll.
═══════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
.hero{
padding:4.1rem 1.25rem 0;
row-gap:0;
/* the desktop grid is `auto 1fr` with min-height:100vh — on a phone
that 1fr row stretches to fill the viewport and leaves dead white
space under the portrait. Rows go auto, content packs to the top. */
min-height:0 !important;
height:auto !important;
grid-template-rows:auto auto auto !important;
align-content:start;
}
.hero > *{align-self:start}
.portrait{align-self:start !important}
.hero::before{background-size:26px 26px}
.content{padding:.15rem 0 .55rem}
/* ── eyebrow ── */
.eyebrow{margin-bottom:.45rem}
.eyebrow .line{width:24px}
.eyebrow .label{font-size:.53rem;letter-spacing:.26em}
/* ── masthead ── */
.name-row{margin-bottom:0}
.name{
font-size:13.6vw;
letter-spacing:-.035em;
line-height:.92;
}
.name-2-wrap{margin-top:.02em;margin-bottom:.5rem}
.svg-jain{width:42%}
/* ── tagline ── */
.tagline{
font-size:.82rem;line-height:1.48;
margin-top:0;margin-bottom:.7rem;
max-width:32ch;
}
/* ── skills: one continuously scrolling line ──────────────────
Two identical halves in .skills-track; translating the track
by exactly -50% loops seamlessly. Spacing uses margin-right
(not gap) so the rhythm is uniform across the seam. */
.skills{
display:block;
overflow:hidden;
margin:0 -1.25rem .72rem;
padding:.15rem 0;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 2rem,#000 calc(100% - 2rem),transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 2rem,#000 calc(100% - 2rem),transparent 100%);
}
.skills-track{
display:flex;
flex-wrap:nowrap;
width:max-content;
gap:0;
animation:skillsMarquee 30s linear infinite;
will-change:transform;
}
.skills .chip{
flex:0 0 auto;
margin-right:.45rem;
font-size:.57rem;
padding:.4rem .7rem;
}
.chip.dup{display:inline-flex}
/* ── CTAs ── */
.cta-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:.42rem;
margin-bottom:.75rem;
}
.cta-row .btn{
justify-content:center;text-align:center;
padding:.78rem .5rem;
font-size:.57rem;letter-spacing:.12em;
border-width:1.2px;
}
.cta-row .btn.primary{grid-column:1 / -1}
/* ── status pill ──────────────────────────────────────────────
The desktop entrance keyframes bake in translateX(-50%), and
animation-fill-mode:forwards keeps it — which dragged the pill
half its width off the left edge. Swap in a shift-free entrance. */
.status-pill{
position:static;
transform:none;
align-self:flex-start;
margin:0 0 .5rem;
padding:.4rem .85rem;
font-size:.55rem;letter-spacing:.16em;
animation:statusPillInFlow .7s cubic-bezier(.18,.84,.24,1) 1.2s forwards;
}
/* ── portrait ─────────────────────────────────────────────────
Sized by WIDTH, never by max-height. object-fit:contain inside a
height-capped box letterboxes the image, and that dead space under
the photo was the gap. Constraining the width instead means the
box is exactly as tall as the picture — nothing cropped, nothing
left over. line-height:0 kills the inline descender gap too. */
.portrait{height:auto;padding-bottom:0;margin-bottom:0}
.portrait .photo-stage{
position:relative;inset:auto;
display:block;
height:auto;
line-height:0;
font-size:0;
overflow:visible;
border-radius:0;
background:none;
}
.portrait img{
display:block;
width:100%;
max-width:100%;
height:auto;
max-height:none;
margin:0 auto;
object-fit:contain;
transform:none !important;
animation:none !important;
filter:grayscale(100%) contrast(1.05);
}
.portrait .photo-stage::after{display:none}
.portrait-bg,.portrait-particles,.portrait-corner{display:none}
.hero-float-card{display:none}
}
@keyframes skillsMarquee{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
@keyframes statusPillInFlow{
from{opacity:0;transform:translateY(-8px)}
to {opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
.skills-track{animation:none}
}
/* ── very small phones ── */
@media(max-width:400px){
.hero{padding:3.9rem 1rem 0}
.name{font-size:14.2vw}
.skills{margin-left:-1rem;margin-right:-1rem}
.cta-row .btn{font-size:.54rem;letter-spacing:.09em;padding:.8rem .4rem}
}
/* ── contact headline: it's the closing statement of the page, so it
should carry weight. Was capped at 1.5rem by an earlier rule. ── */
.contact-copy .contact-big{
font-size:clamp(2.1rem,5.4vw,4rem);
line-height:1.06;
letter-spacing:-.022em;
margin-bottom:1.7rem;
}
.contact-copy .contact-big em{-webkit-text-stroke:2px #111}
@media(max-width:768px){
.contact-copy .contact-big{
font-size:clamp(1.95rem,9.2vw,2.9rem);
line-height:1.08;
margin-bottom:1.35rem;
}
.contact-copy .contact-big em{-webkit-text-stroke:1.5px #111}
}
/* ── SCROLL CUE ───────────────────────────────────────────────────
A hairline with a lit segment travelling down it, matching the
thin-rule language already used by the hero eyebrow. */
.scroll-cue{
display:inline-flex;
align-items:center;
gap:.75rem;
margin-top:2rem;
text-decoration:none;
color:var(--ink,#111);
width:max-content;
opacity:0;
animation:fadeUp .8s ease 2s forwards;
transition:opacity .45s ease,transform .45s ease;
}
.scroll-cue .sc-label{
font-family:var(--h-mono,monospace);
font-size:.64rem;
font-weight:700;
letter-spacing:.24em;
text-transform:uppercase;
color:var(--ink,#111);
}
.scroll-cue .sc-track{
position:relative;
display:block;
width:2px;
height:40px;
background:rgba(26,26,26,.20);
overflow:hidden;
border-radius:2px;
}
.scroll-cue .sc-track i{
position:absolute;
left:0;
top:0;
width:100%;
height:16px;
background:var(--ink,#111);
border-radius:2px;
animation:scrollCueRun 1.7s cubic-bezier(.6,0,.4,1) infinite;
}
.scroll-cue:hover{color:var(--ink,#111)}
.scroll-cue.is-gone{
opacity:0 !important;
transform:translateY(6px);
pointer-events:none;
}
@keyframes scrollCueRun{
0% {transform:translateY(-100%);opacity:0}
20% {opacity:1}
80% {opacity:1}
100% {transform:translateY(340%);opacity:0}
}
/* phone: sits under the CTAs, a touch tighter */
@media(max-width:768px){
.scroll-cue{margin-top:.2rem;margin-bottom:.9rem;gap:.65rem}
.scroll-cue .sc-track{height:34px}
.scroll-cue .sc-label{font-size:.6rem;letter-spacing:.22em}
}
@media(prefers-reduced-motion:reduce){
.scroll-cue .sc-track i{animation:none;height:100%;opacity:.35}
}
/* ── REVEAL / CSS-TRANSITION CONFLICT ──────────────────────────────
Ten components (.o-body, .cert-feature, .pub-feature, .pcard-new,
.ach-stat, .skills-col …) carry `transition: transform .3s` for their
hover lift. GSAP writes a new transform every frame while revealing,
and the browser then tries to interpolate each one over 300ms. Two
systems animating the same property is the stutter.
So while an element is still waiting to reveal, CSS may transition
anything EXCEPT transform and opacity. Once GSAP is done it gets
.is-revealed back and the hover lift animates normally again. */
.reveal{
backface-visibility:hidden;-webkit-backface-visibility:hidden;
transition-property:box-shadow,border-color,background-color,background,color,filter;
}
.reveal.is-revealed{
transition-property:transform,box-shadow,border-color,background-color,background,color,filter;
}
/* ── scroll cue: which one shows depends on the breakpoint ── */
.scroll-cue--side{display:none}
@media(max-width:768px){
.scroll-cue--flow{display:none}
/* JAIN and the cue share a row; the cue takes the empty space to its right */
.name-2-wrap{
display:flex;
align-items:center;
gap:1rem;
}
.svg-jain{flex:0 0 auto}
.scroll-cue--side{
display:inline-flex;
flex-direction:column;
align-items:center;
gap:.5rem;
margin:0 .15rem 0 auto; /* pushed to the right edge of the row */
animation:fadeUp .8s ease 1.6s forwards;
}
.scroll-cue--side .sc-label{
writing-mode:vertical-rl;
text-orientation:mixed;
font-size:.6rem;
font-weight:700;
letter-spacing:.26em;
}
.scroll-cue--side .sc-track{height:34px;width:2px}
.scroll-cue--side .sc-track i{height:13px}
}
/* ── first-visit scroll guide ──────────────────────────────────────
A 2px hairline is too quiet to read as an instruction. On phones
the cue becomes a bouncing arrow in a circle: motion plus a
recognisable symbol, so it registers without being read. */
.sc-arrow{display:none}
@media(max-width:768px){
.scroll-cue--side{
gap:.6rem;
animation:fadeUp .7s ease .9s forwards; /* arrives sooner */
}
.scroll-cue--side .sc-track{display:none} /* replaced by the puck */
.scroll-cue--side .sc-label{
font-size:.58rem;
letter-spacing:.24em;
opacity:.75;
}
.scroll-cue--side .sc-arrow{
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border:1.5px solid rgba(26,26,26,.30);
border-radius:50%;
background:rgba(255,255,255,.75);
box-shadow:0 2px 10px -4px rgba(0,0,0,.25);
font-size:.95rem;
line-height:1;
color:var(--ink,#111);
animation:scrollArrowBob 1.5s ease-in-out infinite;
}
}
@keyframes scrollArrowBob{
0%,100%{transform:translateY(-3px);opacity:.7}
50% {transform:translateY(4px); opacity:1}
}
@media(prefers-reduced-motion:reduce){
.scroll-cue--side .sc-arrow{animation:none;opacity:1;transform:none}
}
/* ── phone: the story cards carried a 60px-blur shadow (--ui-shadow).
On a card 1000px+ tall that is a very expensive raster, and it is
barely legible at phone size anyway. Tighter, cheaper shadow. ── */
@media(max-width:768px){
.o-body{box-shadow:0 10px 26px -16px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.03)}
.o-panel{box-shadow:0 8px 22px -16px rgba(0,0,0,.8)}
.o-body:hover,.o-panel:hover{
transform:none;
box-shadow:0 10px 26px -16px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.03);
}
}
/* ── SCROLL CHEVRONS ──────────────────────────────────────────────
Four stacked chevrons pointing down. Each darkens in turn, top to
bottom, so the ink itself travels downward — that direction is the
instruction, and motion is what a first-time visitor actually
notices. */
.sc-chev{
display:flex;
flex-direction:column;
align-items:center;
gap:0;
}
.sc-chev i{
display:block;
width:10px;
height:10px;
border-right:2.2px solid currentColor;
border-bottom:2.2px solid currentColor;
transform:rotate(45deg);
color:rgba(26,26,26,.15);
margin-top:-3px;
animation:chevRun 1.6s ease-in-out infinite;
}
.sc-chev i:nth-child(1){margin-top:0; animation-delay:0s}
.sc-chev i:nth-child(2){animation-delay:.14s}
.sc-chev i:nth-child(3){animation-delay:.28s}
.sc-chev i:nth-child(4){animation-delay:.42s}
@keyframes chevRun{
0%, 55%, 100% { color:rgba(26,26,26,.15) }
22% { color:#111 }
}
@media(max-width:768px){
.scroll-cue--side{gap:.55rem}
.scroll-cue--side .sc-chev i{width:11px;height:11px;border-width:2.4px}
}
@media(prefers-reduced-motion:reduce){
.sc-chev i{animation:none;color:rgba(26,26,26,.45)}
}
/* ── "view all skills" → jumps to the skills section ── */
.skills-more{
display:inline-flex;
align-items:center;
gap:.45rem;
width:max-content;
margin:-.9rem 0 1.7rem; /* tucks under the chip row */
padding-bottom:.22rem;
font-family:var(--h-mono,monospace);
font-size:.58rem;
font-weight:600;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--muted,#666);
text-decoration:none;
border-bottom:1px solid rgba(26,26,26,.22);
opacity:0;
animation:fadeUp .8s ease 1.62s forwards;
transition:color .25s ease,border-color .25s ease;
}
.skills-more:hover{color:var(--ink,#111);border-color:var(--ink,#111)}
.skills-more .sm-arrow{font-size:.7rem;line-height:1}
.skills-more .sm-phone{display:none}
/* phone: the chips scroll, but this line stays put */
@media(max-width:768px){
.skills-more{
margin:0 0 .8rem;
font-size:.55rem;
letter-spacing:.13em;
gap:.4rem;
animation:none; /* static — no travel, no delay */
opacity:1;
}
.skills-more .sm-wide{display:none}
.skills-more .sm-phone{display:inline}
.skills{margin-bottom:.5rem} /* room reclaimed for the link */
}
/* ══════════════════════════════════════════════════════════════════
PORTRAIT BOX — final word.
Older breakpoints pin .portrait to a fixed pixel height (420 / 380
/ 330 / 320px), one of them with !important at <=400px. Whenever the
photo renders shorter than that box, the leftover height shows as
white space between the picture and the black section below. The box
must always be exactly as tall as the image.
══════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
.portrait{
height:auto !important;
min-height:0 !important;
max-height:none !important;
padding-bottom:0 !important;
margin-bottom:0 !important;
display:flex !important;
flex-direction:column;
justify-content:flex-end;
}
.portrait .photo-stage{
position:relative !important;
inset:auto !important;
display:block !important;
height:auto !important;
min-height:0 !important;
line-height:0;
font-size:0;
margin-bottom:0 !important;
}
.portrait img{
display:block !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:none !important;
margin:0 auto !important;
transform:none !important;
animation:none !important;
}
.hero{padding-bottom:0 !important}
}
/* ── #built_from_scratch tag on the project cards ── */
.pcard-new .pc-tag--scratch{
font-family:var(--ui-mono,monospace);
font-size:.66rem;
font-weight:500;
letter-spacing:.01em;
color:var(--pl-ink,#111);
background:transparent;
border:1px solid var(--pl-ink,#111);
border-radius:6px;
padding:.3rem .65rem;
}
.pcard-new:hover .pc-tag--scratch{
background:var(--pl-ink,#111);
color:#fff;
}
@media(max-width:768px){
.pcard-new .pc-tag--scratch{font-size:.6rem;padding:.26rem .55rem}
}
/* ── #learning_project tag ── */
.pcard-new .pc-tag--learning{
font-family:var(--ui-mono,monospace);
font-size:.66rem;font-weight:500;letter-spacing:.01em;
color:var(--pl-ink-3,#666);
background:transparent;
border:1px dashed var(--pl-line,rgba(26,26,26,.35));
border-radius:6px;padding:.3rem .65rem;
}
.pcard-new:hover .pc-tag--learning{color:var(--pl-ink,#111);border-color:var(--pl-ink,#111)}
@media(max-width:768px){.pcard-new .pc-tag--learning{font-size:.6rem;padding:.26rem .55rem}}
/* ── projects: provenance note, stated before the cards ── */
.proj-honesty{
max-width:min(760px,92vw);
margin:0 auto;
padding:1rem 1.2rem 0;
display:flex;
gap:1.1rem;
align-items:flex-start;
}
.proj-honesty .ph-k{
flex:0 0 auto;
font-family:var(--ui-mono,monospace);
font-size:.56rem;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--pl-ink-4,#8C8C8C);
padding-top:.28rem;
white-space:nowrap;
}
.proj-honesty p{
margin:0;
font-family:var(--ui-sans,'Inter',sans-serif);
font-size:.82rem;
line-height:1.65;
color:var(--pl-ink-3,#666);
border-left:1px solid var(--pl-line-soft,rgba(26,26,26,.14));
padding-left:1.1rem;
}
@media(max-width:768px){
.proj-honesty{
flex-direction:column;
gap:.5rem;
padding:.6rem 1.25rem 0;
}
.proj-honesty p{
font-size:.78rem;
line-height:1.6;
border-left:none;
padding-left:0;
}
}
/* ── chatbot: work-in-progress notice ── */
.am-notice{
align-self:stretch;
margin:.15rem 0 .35rem;
padding:.55rem .75rem;
border:1px dashed rgba(255,255,255,.16);
border-radius:8px;
background:rgba(255,255,255,.03);
font-family:var(--ui-mono,monospace);
font-size:.58rem;
line-height:1.6;
letter-spacing:.02em;
color:rgba(255,255,255,.5);
}
@media(max-width:768px){
.am-notice{font-size:.55rem;padding:.5rem .65rem}
}
/* ── NAV WORDMARK → AW MARK ────────────────────────────────────────
Plain ![]()
, embedded as a data URI so there is no file path, no
server and no cache involved. The artwork is white, so on the light
hero it is inverted to black. An ![]()
also fails visibly if
anything is wrong, unlike a CSS mask which just renders nothing. */
.nav-logo{
display:inline-flex;
align-items:center;
line-height:0;
}
.nav-logo-img{
display:block;
width:40px;
height:40px;
object-fit:contain;
transition:filter .4s ease;
}
/* light nav: white artwork inverts to black */
nav.on-hero .nav-logo-img,
nav.on-light .nav-logo-img{ filter:invert(1); }
nav.glass .nav-logo-img{ filter:none; }
@media(max-width:768px){ .nav-logo-img{width:34px;height:34px} }
@media(max-width:400px){ .nav-logo-img{width:31px;height:31px} }
/* ── EBOOK COVER, PHONE ────────────────────────────────────────────
The cover was shrinking to 104-132px while the title stayed at
.9rem uppercase on a .95 line-height, so three words had nowhere to
go. Give the cover back some size, loosen the leading, and drop the
type a step so the block breathes inside the frame. */
@media(max-width:768px){
.pf-cover{width:152px !important;height:198px !important;margin:0 auto}
.pf-cover-body{padding:.95rem .8rem .85rem 1.15rem}
.pf-cover-spine{width:5px}
.pf-cover-tt{
font-size:.86rem !important;
line-height:1.2 !important;
letter-spacing:.005em !important;
}
.pf-cover-cap{font-size:.42rem;letter-spacing:.22em;line-height:1.5}
.pf-cover-foot{font-size:.4rem;letter-spacing:.22em}
}
@media(max-width:400px){
.pf-cover{width:138px !important;height:180px !important}
.pf-cover-body{padding:.85rem .7rem .75rem 1rem}
.pf-cover-tt{font-size:.78rem !important}
}
/* ── PROJECTS: note must not collide with the first card ──
.proj-honesty had padding-bottom:0 and the rail that follows has no
top margin on phones, so the card butted straight into the last
line of the note. */
.proj-honesty{padding-bottom:.4rem}
@media(max-width:1024px){
.proj-honesty{margin-bottom:1.6rem}
#ch-projects .projects-head{padding-bottom:1rem !important}
}
@media(max-width:768px){
.proj-honesty{margin-bottom:1.4rem;padding-bottom:.2rem}
}
/* ── NAV TOGGLE: "MENU +" instead of three bars ────────────────────
The old rule styled every inside the button as a 24x1.5px
bar, so the label and the plus have to opt out of that explicitly. */
.nav-hamburger{
flex-direction:row !important;
align-items:center;
gap:.5rem !important;
padding:.35rem .1rem !important;
}
.nav-hamburger span{
width:auto;
height:auto;
background:none;
}
.nh-label{
font-family:var(--ui-mono,monospace);
font-size:.62rem;
font-weight:600;
letter-spacing:.2em;
text-transform:uppercase;
color:currentColor;
line-height:1;
}
.nh-plus{
position:relative;
width:13px;
height:13px;
flex:0 0 auto;
transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.nh-plus::before,
.nh-plus::after{
content:'';
position:absolute;
left:50%;
top:50%;
background:currentColor;
border-radius:1px;
}
.nh-plus::before{ width:13px; height:1.6px; transform:translate(-50%,-50%); }
.nh-plus::after { width:1.6px; height:13px; transform:translate(-50%,-50%); }
/* open state: the plus turns into a cross */
.nav-hamburger.open .nh-plus{ transform:rotate(45deg); }
@media(max-width:400px){
.nh-label{font-size:.58rem;letter-spacing:.16em}
.nh-plus{width:12px;height:12px}
.nh-plus::before{width:12px}
.nh-plus::after{height:12px}
}
/* ── MASTHEAD: pull JAIN up under ABHINAV ──────────────────────────
The SVG carries its own internal padding above the glyphs, so a
plain margin only closes part of the gap. A small negative top
margin on the wrapper takes out the rest. */
@media(max-width:768px){
.name{line-height:.86 !important}
.name-row{margin-bottom:-.06em !important}
.name-2-wrap{
margin-top:-.10em !important;
margin-bottom:.6rem !important;
}
.svg-jain{display:block}
}
@media(max-width:400px){
.name-2-wrap{margin-top:-.13em !important}
}
/* ── MOBILE MENU: must cover the whole screen ──────────────────────
Two things were leaking. The panel sat at z-index 9999 while it is
painted over a page whose own layers go up to 9990, and its
background was rgba(...,.97), so it was never fully opaque anyway.
On top of that `inset:0` resolves against the *layout* viewport, so
on Android the retracting URL bar leaves a strip uncovered at the
bottom. Pin it to the dynamic viewport, make it solid, and lift it
above everything except the loader. */
.mobile-menu{
position:fixed !important;
top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
width:100% !important;
height:100vh !important; /* fallback */
max-height:none !important;
background:#08080A !important; /* fully opaque, nothing bleeds through */
z-index:99998 !important; /* > #grain 9990, > #ai-fab 9000 */
overscroll-behavior:contain;
padding-bottom:calc(2.5rem + env(safe-area-inset-bottom, 0px)) !important;
}
@supports (height:100dvh){
.mobile-menu{ height:100dvh !important; }
}
/* the chat bubble sits on its own layer, so it has to be told to go */
body.menu-open #ai-fab{
opacity:0;
pointer-events:none;
transition:opacity .2s ease;
}
/* ── MENU + : breathing room, and a real rotation on tap ──────────── */
.nav-hamburger{
margin-right:.35rem !important;
padding-right:.35rem !important;
}
/* 90deg so the + lands as a clean x, over a slight overshoot curve
so the turn reads as deliberate rather than linear */
.nh-plus{
transition:transform .42s cubic-bezier(.34,1.4,.5,1) !important;
transform-origin:50% 50%;
}
.nav-hamburger.open .nh-plus{ transform:rotate(135deg) !important; }
/* a quick counter-spin on press, so tapping feels connected */
.nav-hamburger:active .nh-plus{ transform:rotate(45deg) scale(.9); }
.nav-hamburger.open:active .nh-plus{ transform:rotate(180deg) scale(.9) !important; }
/* ── MENU PANEL: everything centred ── */
.mobile-menu{
align-items:center !important;
text-align:center !important;
}
.mobile-menu a{
justify-content:center !important;
text-align:center !important;
}
.mobile-menu .mobile-cv{
justify-content:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
.mm-close{
position:static !important;
align-self:center !important;
margin:0 auto 1.6rem !important;
}
/* the Back button used to be absolutely positioned, so the panel
reserved 5.5rem of top padding for it. In flow, that reads as a
large empty gap, so pull it back. */
.mobile-menu{ padding-top:1.6rem !important; }
/* ── MASTHEAD SPACING ──────────────────────────────────────────────
The JAIN artwork used a 0..145 viewBox while the glyphs only sit
between y=12 and y=118, so a quarter of the SVG was empty space
padding the gap open. The viewBox is now cropped to the letters,
which closes it at every breakpoint, so the negative margins that
were compensating for it can come back to near zero. */
.name-2-wrap{
margin-top:0 !important;
margin-bottom:.35rem !important;
}
@media(max-width:768px){
.name{line-height:.84 !important}
.name-row{margin-bottom:-.02em !important}
.name-2-wrap{
margin-top:-.02em !important;
margin-bottom:.5rem !important;
}
}
@media(max-width:400px){
.name-2-wrap{margin-top:-.03em !important}
}
/* ── MOBILE MENU: open / close animation ───────────────────────────
`display` cannot be transitioned, so the panel stays flex at all
times and is hidden with visibility + opacity instead. visibility
is delayed on the way out so the fade finishes before the panel
stops being hit-testable, and snaps instantly on the way in. */
.mobile-menu{
display:flex !important;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-10px);
transition:
opacity .28s ease,
transform .38s cubic-bezier(.16,1,.3,1),
visibility 0s linear .38s;
}
.mobile-menu.open{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:none;
transition:
opacity .26s ease,
transform .46s cubic-bezier(.16,1,.3,1),
visibility 0s linear 0s;
}
/* items rise in one after another, and leave together */
.mobile-menu > *{
opacity:0;
transform:translateY(16px);
transition:opacity .3s ease, transform .3s ease;
transition-delay:0s;
}
.mobile-menu.open > *{
opacity:1;
transform:none;
transition:opacity .42s ease, transform .52s cubic-bezier(.16,1,.3,1);
}
.mobile-menu.open > *:nth-child(1){transition-delay:.05s}
.mobile-menu.open > *:nth-child(2){transition-delay:.09s}
.mobile-menu.open > *:nth-child(3){transition-delay:.13s}
.mobile-menu.open > *:nth-child(4){transition-delay:.17s}
.mobile-menu.open > *:nth-child(5){transition-delay:.21s}
.mobile-menu.open > *:nth-child(6){transition-delay:.25s}
.mobile-menu.open > *:nth-child(7){transition-delay:.29s}
.mobile-menu.open > *:nth-child(8){transition-delay:.33s}
.mobile-menu.open > *:nth-child(9){transition-delay:.37s}
.mobile-menu.open > *:nth-child(10){transition-delay:.41s}
.mobile-menu.open > *:nth-child(11){transition-delay:.45s}
.mobile-menu.open > *:nth-child(12){transition-delay:.49s}
.mobile-menu.open > *:nth-child(13){transition-delay:.53s}
/* the grid overlay is decorative and must not animate as an item */
.mobile-menu::before{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.mobile-menu,
.mobile-menu > *{transition-duration:.01s !important;transform:none !important}
}
/* ── PORTRAIT, PHONE ───────────────────────────────────────────────
No horizontal scaling. Widening past 100% clipped the shoulders
against the frame and left a hard vertical cut. The subject is made
to fill more of the frame by trimming the lower torso out of the
source image instead, so the full silhouette stays intact. */
@media(max-width:768px){
.portrait .photo-stage{ overflow:visible !important; }
.portrait img{
width:100% !important;
max-width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
/* ── PORTRAIT POSITION ─────────────────────────────────────────────
Desktop only. The image is object-fit:contain anchored to
`center bottom`, then pushed a further 60px down by photoFloat.
The new crop is shorter, so contain leaves vertical slack and the
bottom anchor drops the whole figure. Lift it and anchor centre.
Phone is deliberately untouched: it uses width:100% with height
auto, where raising the photo would just open a gap under it. */
@media(min-width:769px){
.portrait img{
object-position:center center !important;
transform:translateY(34px) !important;
animation:photoFloatUp 6s ease-in-out infinite !important;
}
}
@keyframes photoFloatUp{
0%,100%{ transform:translateY(34px); }
50% { transform:translateY(24px); }
}