/* ============================================================
   Arghadeep Ghosh — portfolio
   Palette: warm cream ground, deep slate ink, terracotta accent
   ============================================================ */

:root{
  --cream:#EEE9DF;
  --cream-2:#E8DFD6;
  --sand:#C9C1B1;
  --ink:#1B2632;
  --ink-2:#2C3E50;
  --accent:#A35139;
  --accent-2:#C16A70;
  --accent-3:#D88D83;
  --warm:#FF7E5F;
  --warm-2:#FEB47B;

  --bg:var(--cream);
  --bg-alt:#E9E3D8;
  --surface:rgba(255,255,255,.62);
  --surface-solid:#F6F3EC;
  --border:rgba(27,38,50,.12);
  --border-strong:rgba(27,38,50,.2);
  --text:var(--ink);
  --text-muted:rgba(27,38,50,.66);
  --text-faint:rgba(27,38,50,.45);
  --shadow:0 1px 2px rgba(27,38,50,.04),0 8px 24px rgba(27,38,50,.06);
  --shadow-lg:0 2px 4px rgba(27,38,50,.04),0 24px 60px rgba(27,38,50,.1);

  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Feature-card gradients (overridden per theme). */
  --hero-from:#FF8A5F;
  --hero-mid:#F2704A;
  --hero-to:#E0603F;
  --connect-from:var(--accent-3);
  --connect-to:var(--accent-2);
  --on-feature:#fff;
  --pill-bg:rgba(255,255,255,.94);
  --pill-fg:#C2410C;

  --wrap:1180px;
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --ease:cubic-bezier(.22,1,.36,1);
}

html[data-theme="dark"]{
  --bg:#12181F;
  --bg-alt:#161D26;
  --surface:rgba(255,255,255,.045);
  --surface-solid:#1A222C;
  --border:rgba(238,233,223,.12);
  --border-strong:rgba(238,233,223,.22);
  --text:#EEE9DF;
  --text-muted:rgba(238,233,223,.66);
  --text-faint:rgba(238,233,223,.42);
  --accent:#D88D83;
  --accent-2:#C16A70;
  --accent-3:#B4585F;
  --sand:#3A4552;
  /* Feature-card gradients: deep, desaturated ramps that sit on the dark ground
     instead of glowing like a light-mode panel punched through the page. */
  --hero-from:#B84E2C;
  --hero-mid:#A8432A;
  --hero-to:#8A3722;
  --connect-from:#8E4550;
  --connect-to:#6E3746;
  --on-feature:#FDF3EC;
  --pill-bg:rgba(255,255,255,.92);
  --pill-fg:#8A3722;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.28);
  --shadow-lg:0 2px 4px rgba(0,0,0,.3),0 24px 60px rgba(0,0,0,.42);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
#main{scroll-margin-top:92px}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .4s var(--ease),color .4s var(--ease);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--accent);color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- ambience ---------- */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.05}
.orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.4}
html[data-theme="dark"] .orb{opacity:.22}
.orb-1{width:520px;height:520px;top:-160px;right:-120px;background:linear-gradient(135deg,var(--warm),var(--warm-2));animation:drift 22s ease-in-out infinite}
.orb-2{width:440px;height:440px;top:46%;left:-180px;background:linear-gradient(135deg,var(--accent-3),var(--accent));animation:drift 26s ease-in-out infinite reverse}
.orb-3{width:380px;height:380px;bottom:-120px;right:12%;background:linear-gradient(135deg,var(--accent-2),var(--warm-2));animation:drift 30s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-50px) scale(1.08)}66%{transform:translate(-30px,40px) scale(.95)}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .35s var(--ease)}
.nav-inner{
  max-width:var(--wrap);margin-inline:auto;padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:padding .35s var(--ease);
}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav.scrolled .nav-inner{padding-block:12px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:-.02em}
.brand-mark{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(163,81,57,.32);
}
.brand-name{font-size:15px}
.nav-links{display:flex;gap:4px}
.nav-links a{
  position:relative;font-size:14px;font-weight:500;color:var(--text-muted);
  padding:8px 13px;border-radius:8px;transition:color .25s,background .25s;
}
.nav-links a:hover{color:var(--text);background:var(--surface)}
.nav-links a.active{color:var(--accent);font-weight:600}
.nav-actions{display:flex;align-items:center;gap:10px}
.theme-toggle{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);cursor:pointer;
  display:grid;place-items:center;transition:all .25s var(--ease);
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.ico-moon{display:none}
html[data-theme="dark"] .ico-sun{display:none}
html[data-theme="dark"] .ico-moon{display:block}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  padding:12px 22px;border-radius:100px;border:1px solid transparent;
  cursor:pointer;transition:all .3s var(--ease);white-space:nowrap;
}
.btn .arr{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(163,81,57,.28)}
.btn-primary:hover{background:var(--ink);transform:translateY(-2px);box-shadow:0 10px 26px rgba(27,38,50,.26)}
html[data-theme="dark"] .btn-primary{color:#12181F}
html[data-theme="dark"] .btn-primary:hover{background:var(--cream);color:var(--ink)}
.btn-ghost{border-color:var(--border-strong);color:var(--text);background:var(--surface)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-sm{padding:8px 17px;font-size:13.5px;border:1px solid var(--border-strong);background:var(--surface)}
.btn-sm:hover{border-color:var(--accent);color:var(--accent)}
.btn-lg{padding:16px 30px;font-size:16px}

.menu-btn{display:none;width:38px;height:38px;border:1px solid var(--border);background:var(--surface);border-radius:10px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn span{width:16px;height:1.8px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.menu-btn.open span:first-child{transform:translateY(3.4px) rotate(45deg)}
.menu-btn.open span:last-child{transform:translateY(-3.4px) rotate(-45deg)}
/* Clickable cards: show the pointer so the whole tile reads as a link. */
.bx-cover{cursor:pointer}
/* Keyboard users need to see which card is focused — the cover is invisible. */
.bx:has(.bx-cover:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.bx-cover:focus-visible{outline:none}
.mobile-menu{
  position:fixed;top:70px;left:14px;right:14px;z-index:99;
  background:var(--surface-solid);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:12px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  animation:menuIn .3s var(--ease);
}
@keyframes menuIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mobile-menu[hidden]{display:none}
.mobile-menu a{padding:13px 16px;border-radius:12px;font-weight:600;font-size:15px;transition:background .2s}
.mobile-menu a:hover{background:var(--bg-alt);color:var(--accent)}
.mobile-menu a.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}

/* ---------- hero ---------- */
.hero{position:relative;z-index:2;padding-top:150px;padding-bottom:0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:64px;align-items:center;padding-bottom:76px}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  padding:7px 15px;border-radius:100px;margin-bottom:26px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}50%{opacity:.75;box-shadow:0 0 0 6px transparent}}

.hero-title{
  font-size:clamp(3.2rem,8.4vw,6.6rem);
  font-weight:800;line-height:.94;letter-spacing:-.045em;margin-bottom:26px;
}
.hero-title .line{display:block}
.hero-title .accent{
  background:linear-gradient(115deg,var(--accent),var(--accent-2) 45%,var(--warm));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{font-size:clamp(1rem,1.45vw,1.16rem);color:var(--text-muted);max-width:56ch;margin-bottom:34px}
.hero-sub strong{color:var(--text);font-weight:650}
.hero-sub em{font-style:normal;color:var(--accent);font-weight:600}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:38px}
.hero-socials{display:flex;gap:11px}
.hero-socials a{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--border);background:var(--surface);color:var(--text-muted);
  transition:all .28s var(--ease);
}
.hero-socials a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)}
.hero-socials svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hero-socials svg.fill{fill:currentColor;stroke:none}

.hero-visual{position:relative;justify-self:center}
.portrait{
  position:relative;width:clamp(230px,27vw,320px);aspect-ratio:4/5;
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--border);background:var(--bg-alt);box-shadow:var(--shadow-lg);
}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait-fallback{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(150deg,var(--cream-2),var(--sand));
}
html[data-theme="dark"] .portrait-fallback{background:linear-gradient(150deg,#1E2732,#2C3E50)}
.portrait.is-empty .portrait-fallback{display:flex}
.pf-initials{font-size:58px;font-weight:800;letter-spacing:-.04em;color:var(--accent)}
.pf-hint{font-family:var(--mono);font-size:10.5px;color:var(--text-faint);padding:5px 11px;border:1px dashed var(--border-strong);border-radius:100px}
.portrait-ring{position:absolute;inset:-11px;border-radius:calc(var(--r-xl) + 11px);border:1px dashed var(--border-strong);pointer-events:none}

.badge{
  position:absolute;background:var(--surface-solid);border:1px solid var(--border);
  border-radius:var(--r);padding:11px 16px;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;line-height:1.28;animation:float 5s ease-in-out infinite;
}
.badge strong{font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--accent)}
.badge span{font-size:10.5px;color:var(--text-muted);font-weight:500;white-space:nowrap}
.badge-a{bottom:34px;left:-52px}
.badge-b{top:22px;right:-46px;animation-delay:2.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.marquee{
  position:relative;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:17px 0;overflow:hidden;background:var(--surface);
}
.marquee-track{display:flex;gap:34px;align-items:center;width:max-content;animation:scroll 34s linear infinite}
.marquee-track span{font-size:14px;font-weight:600;color:var(--text-muted);letter-spacing:-.01em;white-space:nowrap}
.marquee-track i{color:var(--accent);font-size:8px;font-style:normal}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.section{position:relative;z-index:2;padding:106px 0}
.section.alt{background:var(--bg-alt)}
.sec-head{display:flex;align-items:center;gap:18px;margin-bottom:56px}
.sec-num{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--accent);letter-spacing:.04em}
.sec-title{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:800;letter-spacing:-.035em;line-height:1.1}
.sec-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--border-strong),transparent)}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:28px;backdrop-filter:blur(10px);transition:all .35s var(--ease);
}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1.35fr .95fr;gap:56px;align-items:start}
.about-copy p{color:var(--text-muted);margin-bottom:19px;font-size:15.5px}
.about-copy .lead{font-size:19px;color:var(--text);line-height:1.6;font-weight:450}
.about-copy strong{color:var(--text);font-weight:650}
.about-copy em{font-style:normal;color:var(--accent);font-weight:600}
.about-side{display:flex;flex-direction:column;gap:18px}
.info-card h3{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:19px}
.edu-list li{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.edu-list li:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.edu-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:3px}
.edu-top strong{font-size:15px;font-weight:650;letter-spacing:-.015em}
.tag{font-family:var(--mono);font-size:11px;color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent);padding:2px 9px;border-radius:100px;flex:none}
.edu-list p{font-size:13.5px;color:var(--text-muted)}
.dot-list li{position:relative;padding-left:19px;font-size:14.5px;color:var(--text-muted);margin-bottom:11px}
.dot-list li:last-child{margin-bottom:0}
.dot-list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- timeline ---------- */
.timeline{position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,var(--accent),var(--border) 70%,transparent)}
.tl-item{position:relative;margin-bottom:30px}
.tl-item:last-child{margin-bottom:0}
.tl-marker{position:absolute;left:-34px;top:26px;width:15px;height:15px;border-radius:50%;background:var(--bg-alt);border:1px solid var(--border-strong);display:grid;place-items:center}
.tl-marker span{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tl-body:hover{border-color:var(--border-strong);box-shadow:var(--shadow);transform:translateY(-2px)}
.tl-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:17px;flex-wrap:wrap}
.tl-head h3{font-size:19px;font-weight:700;letter-spacing:-.025em;line-height:1.3}
.org{font-size:14.5px;color:var(--accent);font-weight:600;margin-top:2px}
.period{font-family:var(--mono);font-size:12px;color:var(--text-faint);white-space:nowrap;padding-top:4px}
.bullets li{position:relative;padding-left:20px;font-size:14.5px;color:var(--text-muted);margin-bottom:9px;line-height:1.6}
.bullets li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:1px;background:var(--accent);transform:rotate(45deg)}
.bullets b{color:var(--text);font-weight:650}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:19px;padding-top:17px;border-top:1px solid var(--border)}
.chips span{font-family:var(--mono);font-size:11.5px;color:var(--text-muted);background:var(--bg);border:1px solid var(--border);padding:4px 10px;border-radius:100px}

/* ---------- projects ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px}
.proj{position:relative;display:flex;flex-direction:column;padding:0;overflow:hidden}
.proj:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.proj-thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(140deg,var(--cream-2),var(--sand));
  border-bottom:1px solid var(--border);display:grid;place-items:center;
}
html[data-theme="dark"] .proj-thumb{background:linear-gradient(140deg,#1E2732,#2C3E50)}
.proj-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.proj:hover .proj-thumb img{transform:scale(1.045)}
.thumb-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:16px;text-align:center}
.tf-ico{font-size:48px;opacity:1}
.proj-body{padding:24px;display:flex;flex-direction:column;flex:1}
.proj-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:9px}
.proj-top h3{font-size:18px;font-weight:700;letter-spacing:-.025em;line-height:1.3}
.proj-date{font-family:var(--mono);font-size:11.5px;color:var(--text-faint);white-space:nowrap;padding-top:3px}
.proj-stack{font-family:var(--mono);font-size:11.5px;color:var(--accent);margin-bottom:13px}
.proj-desc{font-size:14.5px;color:var(--text-muted);margin-bottom:15px}
.proj-points{margin-bottom:19px}
.proj-points li{position:relative;padding-left:18px;font-size:13.5px;color:var(--text-muted);margin-bottom:7px;line-height:1.55}
.proj-points li::before{content:"";position:absolute;left:2px;top:8px;width:4px;height:4px;border-radius:1px;background:var(--accent);transform:rotate(45deg)}
.proj-points b{color:var(--text);font-weight:650}
.proj-links{display:flex;gap:9px;margin-top:auto;padding-top:17px;border-top:1px solid var(--border)}
.proj-links a{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  padding:8px 15px;border-radius:100px;border:1px solid var(--border);
  color:var(--text-muted);transition:all .25s var(--ease);
}
.proj-links a:hover{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.proj-links svg{width:15px;height:15px;fill:currentColor}
.more-repos{display:flex;justify-content:center;margin-top:42px}

/* ---------- skills ---------- */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.skill-card h3{
  display:flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:19px;
}
.skill-card h3::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}
.skill-card:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:var(--shadow)}
.skill-tags{display:flex;flex-wrap:wrap;gap:8px}
.skill-tags span{
  font-size:13.5px;font-weight:550;color:var(--text);
  background:var(--bg);border:1px solid var(--border);
  padding:7px 14px;border-radius:100px;transition:all .25s var(--ease);
}
.skill-tags span:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

/* ---------- awards ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-bottom:34px}
.stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:26px;text-align:center;transition:all .32s var(--ease);
}
.stat:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.stat strong{
  display:block;font-size:35px;font-weight:800;letter-spacing:-.045em;line-height:1;margin-bottom:8px;
  background:linear-gradient(120deg,var(--accent),var(--warm));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat span{font-size:12.5px;color:var(--text-muted);font-weight:500}
.award-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:20px}
.award:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.aw-ico{font-size:26px;margin-bottom:13px}
.award h3{font-size:16.5px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.award p{font-size:14px;color:var(--text-muted)}
.award b{color:var(--text);font-weight:650}
.award code{font-family:var(--mono);font-size:12.5px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:1px 7px;border-radius:5px}

/* ---------- contact ---------- */
.contact{padding-block:118px}
.contact-inner{text-align:center;max-width:660px;margin-inline:auto}
.contact-inner .sec-num{display:block;margin-bottom:18px}
.contact-title{font-size:clamp(2.3rem,6vw,4.1rem);font-weight:800;letter-spacing:-.045em;line-height:1.04;margin-bottom:22px}
.contact-title .accent{background:linear-gradient(115deg,var(--accent),var(--warm));-webkit-background-clip:text;background-clip:text;color:transparent}
.contact-sub{font-size:17px;color:var(--text-muted);margin-bottom:34px}
.contact-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:32px}
.contact-links a{font-size:14px;font-weight:550;color:var(--text-muted);padding:8px 15px;border-radius:100px;border:1px solid var(--border);transition:all .25s var(--ease)}
.contact-links a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}

/* ---------- footer ---------- */
.footer{position:relative;z-index:2;border-top:1px solid var(--border);padding:30px 0;background:var(--bg-alt)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--text-faint)}
.footer-meta{font-family:var(--mono);font-size:12px}

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

/* ---------- responsive ---------- */
@media (min-width:1001px){
  .mobile-menu{display:none!important}
}
@media (max-width:1000px){
  .nav-links{display:none}
  .menu-btn{display:flex}
  .hero{padding-top:126px}
  .hero-grid{grid-template-columns:1fr;gap:52px;text-align:left}
  .hero-visual{justify-self:start}
  .badge-a{left:auto;right:-30px;bottom:22px}
  .badge-b{right:auto;left:-30px;top:18px}
  .about-grid{grid-template-columns:1fr;gap:38px}
}
@media (max-width:640px){
  .wrap{padding-inline:18px}
  .section{padding:74px 0}
  .contact{padding-block:88px}
  .brand-name{display:none}
  .btn-sm{display:none}
  .sec-head{gap:13px;margin-bottom:38px}
  .card{padding:22px}
  .proj-body{padding:20px}
  .timeline{padding-left:26px}
  .tl-marker{left:-26px}
  .hero-visual{justify-self:center}
  .badge-a{right:-14px}
  .badge-b{left:-14px}
  .proj-grid{grid-template-columns:1fr}
  .stat strong{font-size:29px}
  .footer-inner{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}
@media print{
  .nav,.mobile-menu,.orbs,.grain,.marquee,.hero-cta,.theme-toggle{display:none!important}
  body{background:#fff;color:#000}
}

/* Compact back-to-home affordance on sub-pages. */
.back-home{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;line-height:1;
  color:var(--text-muted);
  margin-bottom:22px;padding:6px 12px;border-radius:100px;
  border:1px solid var(--border);background:var(--surface);
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.back-home:hover{color:var(--accent);border-color:var(--accent);transform:translateX(-2px)}
.back-home svg{
  width:13px;height:13px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
}

/* Home nav spans the bento container so the brand and theme toggle line up
   with the card edges instead of floating 130px inside them. */
.page-home .nav-inner{max-width:1560px;padding-inline:22px}

/* ============================================================
   BENTO HOMEPAGE
   Full-viewport grid of cards, à la the reference layout.
   ============================================================ */
.bento-wrap{position:relative;z-index:2;padding:96px 0 26px}
.bento{
  width:100%;max-width:1560px;margin-inline:auto;padding-inline:22px;
  display:grid;gap:16px;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto auto;
  grid-template-areas:
    "hero hero exp  port"
    "hero hero exp  port"
    "hero hero os   port"
    "edu  quote resume port"
    "edu  quote proj   connect";
}
.bx{
  position:relative;overflow:hidden;
  background:var(--surface-solid);
  border:1px solid var(--border);
  border-radius:26px;
  padding:26px;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease);
}
.bx:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
/* Full-card click target; sits above art, below nothing else. */
.bx-cover{position:absolute;inset:0;z-index:3}

.bx-hero{grid-area:hero;background:linear-gradient(135deg,var(--hero-from),var(--hero-mid) 52%,var(--hero-to));border-color:transparent;color:var(--on-feature);min-height:380px;justify-content:flex-start}
.bx-meta{display:flex;flex-direction:column;gap:2px;font-size:14.5px;font-weight:500;color:color-mix(in srgb,var(--on-feature) 92%,transparent);z-index:2}
.clock{font-variant-numeric:tabular-nums}
.loc{color:color-mix(in srgb,var(--on-feature) 76%,transparent)}
.bx-name{
  margin-top:auto;font-size:clamp(2.6rem,4.8vw,4.6rem);font-weight:800;
  letter-spacing:-.045em;line-height:1.02;color:var(--on-feature);z-index:2;
}
.pill-link{
  display:inline-flex;align-items:center;gap:6px;vertical-align:middle;
  align-self:flex-start;width:fit-content;
  margin-top:26px;padding:11px 22px;border-radius:100px;font-size:15px;
  background:var(--pill-bg);color:var(--pill-fg);
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  box-shadow:0 4px 14px rgba(0,0,0,.12);transition:transform .28s var(--ease);
}
.pill-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pill-link:hover{transform:translateY(-2px) scale(1.03)}
.bx-tag strong{font-weight:750;color:var(--on-feature)}
.bx-tag{margin-top:16px;font-size:clamp(1rem,1.25vw,1.2rem);color:color-mix(in srgb,var(--on-feature) 95%,transparent);max-width:34ch;line-height:1.5;z-index:2}
.globe-canvas{
  position:absolute;right:-96px;bottom:-120px;
  width:440px;height:440px;
  pointer-events:none;z-index:1;
}

.bx-exp{grid-area:exp}
.bx-os{grid-area:os}
/* No border on this card: the image fills it edge to edge, and a 1px
   transparent border still leaves a seam against the rounded clip. */
.bx-portrait{grid-area:port;padding:0;min-height:300px;background:linear-gradient(150deg,var(--cream-2),var(--sand));border:0}
html[data-theme="dark"] .bx-portrait{background:linear-gradient(150deg,#1E2732,#2C3E50)}
html[data-theme="dark"] .dd-1{opacity:.22}
html[data-theme="dark"] .dd-2{opacity:.28}
html[data-theme="dark"] .doc{background:var(--surface-solid)}
.bx-portrait img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.portrait-ph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.bx-portrait.is-empty .portrait-ph{display:flex}
.bx-proj{grid-area:proj;justify-content:flex-start}
.bx-edu{grid-area:edu}
.bx-resume{grid-area:resume}
/* Text left, doc mock right: the card is short and wide, so a side-by-side
   split reads better than the old stacked/centred arrangement. */
.bx-resume{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
.res-text{display:flex;flex-direction:column;min-width:0}
.bx-resume .doc{margin-top:0;align-self:center;flex:none}
.bx-quote{grid-area:quote}
.bx-connect{grid-area:connect;background:linear-gradient(120deg,var(--connect-from),var(--connect-to));border-color:transparent;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
/* The connect tile spans two rows on desktop; a single centred row left most of
   the card empty. Stack it so the content occupies the height it is given. */
@media (min-width:1101px){
  /* Icons, direct contact and CTA stack in the single row this card now spans. */
  /* The email needs ~236px but a side-by-side CTA left it only 172px, so it
     ellipsised. Stack instead: contact details get the full card width, and the
     CTA sits on its own row where it can't squeeze them. */
  .bx-connect{flex-direction:column;align-items:stretch;justify-content:center;gap:10px;padding:16px 20px}
  .bx-connect .c-left{display:flex;flex-direction:column;gap:8px;min-width:0}
  .bx-connect .c-icons{gap:12px}
  .bx-connect .c-icons a{width:19px;height:19px}
  .bx-connect .c-direct{gap:4px}
  .bx-connect .c-direct a{font-size:13px;max-width:100%}
  /* CTA on its own row, pushed right so it still reads as the action. */
  .bx-connect .c-cta{align-self:flex-end;font-size:11.5px;gap:9px}
  .bx-connect .c-arrow{width:28px;height:28px}
  .bx-connect .c-arrow svg{width:14px;height:14px}
}

.bx-kicker{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px}
.bx-h{font-size:19px;font-weight:750;letter-spacing:-.03em;line-height:1.22;padding-right:32px;}
.bx-sub{font-size:13.5px;color:var(--text-muted);margin-top:3px}
.bx-sub b{color:var(--text);font-weight:650}
.bx-big{font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:850;letter-spacing:-.045em;line-height:1}
.bx-points{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.bx-points li{position:relative;padding-left:16px;font-size:13px;color:var(--text-muted);line-height:1.4}
.bx-points li::before{content:"";position:absolute;left:1px;top:7px;width:4px;height:4px;border-radius:1px;background:var(--accent);transform:rotate(45deg)}
.bx-points b{color:var(--text);font-weight:700}
.bx-line{margin-top:auto;padding-top:12px;font-size:13.5px;color:var(--text-muted);line-height:1.5}
.bx-line b{color:var(--text);font-weight:700}

.bx-foot{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:6px}
/* Cards with a filled body: push chips to the bottom for uniform spacing */
.bx-exp .bx-foot{margin-top:auto;padding-top:12px}
.mini-chip{font-family:var(--mono);font-size:10.5px;color:var(--text-muted);background:var(--bg);border:1px solid var(--border);padding:3px 9px;border-radius:100px}
.bx-gh{position:absolute;top:24px;right:24px;width:30px;height:30px;fill:var(--text);opacity:.14}
.bx-list{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:7px}
.bx-list li{position:relative;padding-left:15px;font-family:var(--mono);font-size:11.5px;color:var(--text-muted)}
.bx-list li::before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.6}

.ghost-btn{
  align-self:flex-start;margin-top:20px;z-index:2;
  font-size:12px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;
  padding:11px 20px;border-radius:100px;border:1px solid var(--border-strong);
  color:var(--text);background:var(--bg);transition:all .28s var(--ease);
}
.ghost-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.proj-doodle{position:absolute;right:-30px;bottom:-30px;width:190px;height:190px;opacity:.5}
.dd{position:absolute;border-radius:50%}
.dd-1{width:56px;height:56px;right:70px;bottom:88px;background:var(--accent-3);opacity:.5}
.dd-2{width:34px;height:34px;right:34px;bottom:52px;background:var(--warm-2);opacity:.65}
.dd-3{width:88px;height:88px;right:8px;bottom:6px;border:1.5px dashed var(--border-strong);border-radius:50%}

/* Same circular vocabulary as the projects doodle, dialled down: these cards
   have text on one side only, so a quiet ring fills the bare corner without
   competing with the copy. Sized/placed to sit clear of the text. */
.dd-cluster{position:absolute;pointer-events:none;z-index:0}
.dd-ring{border:1.5px dashed var(--border-strong);opacity:.55}
.dd-sm{background:var(--accent-3);opacity:.4}
.dd-sm2{background:var(--warm-2);opacity:.55}
.dd-os{right:-30px;bottom:-30px;width:120px;height:120px}
.dd-os .dd-ring{width:100px;height:100px;right:12px;bottom:12px}
.dd-os .dd-sm{width:20px;height:20px;right:22px;bottom:86px}
.dd-edu{right:-14px;top:16px;width:92px;height:92px}
.dd-edu .dd-ring{width:78px;height:78px;right:12px;top:12px}
.dd-edu .dd-sm{width:16px;height:16px;right:66px;top:8px}
.dd-edu .dd-sm2{width:10px;height:10px;right:14px;top:2px}
.dd-exp-h{right:-22px;top:-22px;width:100px;height:100px}
.dd-exp-h .dd-ring{width:84px;height:84px;right:10px;top:10px}
.dd-exp-h .dd-sm{width:18px;height:18px;right:20px;top:66px}
.dd-exp-h .dd-sm2{width:11px;height:11px;right:64px;top:16px}
html[data-theme="dark"] .dd-ring{opacity:.4}
html[data-theme="dark"] .dd-sm{opacity:.2}
html[data-theme="dark"] .dd-sm2{opacity:.3}
/* The education rows and the OS card's text must stay above the decoration. */
.bx-edu .edu-rows,.bx-os .bx-line,.bx-os .bx-h,.bx-os .bx-sub,
.bx-exp .bx-kicker,.bx-exp .bx-h,.bx-exp .bx-sub,.bx-exp .bx-points,.bx-exp .bx-foot{position:relative;z-index:1}

/* ---------- section doodles (sub-pages) ----------
   The same dashed-ring vocabulary as the bento cards, used sparingly: one
   cluster per page, parked in the section's own padding — the band of
   whitespace below the last row of content and above the section edge —
   so it fills dead space without crowding the copy. The content column
   spans x=74..1206 at desktop, leaving no usable side margin, hence the
   bottom placement. Hidden below 1101px, where the padding shrinks and
   the layout goes single-column. */
.sec-doodle{position:absolute;pointer-events:none;z-index:0;display:none}
@media (min-width:1101px){.sec-doodle{display:block}}

/* About / Awards — bottom-right of the section's lower padding band. */
.dd-about,.dd-awards{right:56px;width:96px;height:96px}
.dd-about .dd-ring,.dd-awards .dd-ring{width:80px;height:80px;right:8px;bottom:8px}
.dd-about .dd-sm,.dd-awards .dd-sm{width:15px;height:15px;right:74px;bottom:12px}
/* Both columns run close to the section's lower padding, so each cluster
   sits tight to the edge. The awards grid is auto-fit: below ~1440px it
   reflows to an extra row and reaches lower, hence the smaller size. */
.dd-about{bottom:4px}
.dd-awards{bottom:4px;width:72px;height:72px}
.dd-awards .dd-ring{width:60px;height:60px;right:6px;bottom:6px}
.dd-awards .dd-sm{width:13px;height:13px;right:56px;bottom:9px}

/* Experience — mirrored to the left so consecutive pages don't repeat.
   The timeline cards run to the section's lower padding, so this one is
   kept small and tucked into the ~80px band beneath the last card. */
.dd-exp{left:56px;bottom:6px;width:72px;height:72px}
.dd-exp .dd-ring{width:60px;height:60px;left:6px;bottom:6px}
.dd-exp .dd-sm{width:13px;height:13px;left:56px;bottom:9px}

/* Contact — centred text leaves both flanks open below the link row. */
.dd-contact-l{left:64px;bottom:22px;width:84px;height:84px}
.dd-contact-l .dd-ring{width:70px;height:70px;left:8px;bottom:8px}
.dd-contact-r{right:64px;bottom:30px;width:104px;height:104px}
.dd-contact-r .dd-ring{width:86px;height:86px;right:8px;bottom:8px}
.dd-contact-r .dd-sm{width:15px;height:15px;right:80px;bottom:12px}

/* Content sits above the doodles. */
.section .wrap{position:relative;z-index:1}

.doc{margin-top:auto;align-self:center;position:relative;width:98px;padding:12px 11px;background:var(--bg);border:1px solid var(--border);border-radius:9px;display:flex;flex-direction:column;gap:7px;box-shadow:var(--shadow);flex-shrink:0}
.doc-line{height:4px;border-radius:2px;background:var(--border-strong);opacity:.75}
.doc-line.w60{width:60%;height:6px;opacity:.9;background:var(--text-faint)}
.doc-line.w80{width:80%}
.doc-dot{position:absolute;right:11px;bottom:11px;width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.5}

.bx-quote .q{font-size:15px;line-height:1.55;color:var(--text);font-weight:450}
.bx-quote mark{background:color-mix(in srgb,var(--accent) 18%,transparent);color:inherit;padding:1px 5px;border-radius:5px}
html[data-theme="dark"] .bx-quote mark{background:color-mix(in srgb,var(--accent) 26%,transparent)}
.q-by{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--border)}
.q-by strong{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.q-by span{font-size:12.5px;color:var(--text-muted)}

.edu-rows{margin-top:12px;display:flex;flex-direction:column;gap:11px}
.edu-rows li{padding-bottom:11px;border-bottom:1px solid var(--border)}
.edu-rows li:last-child{padding-bottom:0;border-bottom:0}
.er-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.er-top strong{font-size:14.5px;font-weight:550;letter-spacing:-.02em;line-height:1.25}
.er-score{font-size:15px;font-weight:800;letter-spacing:-.03em;color:var(--accent);white-space:nowrap}
.er-score i{font-style:normal;font-size:10.5px;font-weight:600;opacity:.7;margin-left:1px}
.edu-rows p{font-size:11.5px;color:var(--text-muted);margin-top:2px;line-height:1.4}
.edu-rows .er-year{display:block}

.c-icons{display:flex;gap:12px}
.c-icons a{width:22px;height:22px;color:var(--on-feature);opacity:.9;transition:opacity .25s,transform .25s var(--ease)}
.c-icons a:hover{opacity:1;transform:translateY(-2px)}
.c-icons svg{width:100%;height:100%;fill:currentColor}
.c-direct{display:flex;flex-direction:column;gap:2px;min-width:0}
.c-direct a{
  font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  color:color-mix(in srgb,var(--on-feature) 92%,transparent);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb,var(--on-feature) 30%,transparent);
  align-self:flex-start;max-width:100%;transition:color .2s,border-color .2s;
}
.c-direct a:hover{color:var(--on-feature);border-color:var(--on-feature)}
.c-cta{display:inline-flex;align-items:center;gap:11px;color:var(--on-feature);font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.c-arrow{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--on-feature) 22%,transparent);display:grid;place-items:center;transition:transform .3s var(--ease),background .3s}
.c-arrow svg{width:16px;height:16px;fill:none;stroke:var(--on-feature);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bx-connect:hover .c-arrow{transform:translateX(4px);background:color-mix(in srgb,var(--on-feature) 34%,transparent)}

@media (max-width:1100px){
  .bento{
    grid-template-columns:repeat(2,1fr);
    grid-template-areas:
      "hero hero"
      "port exp"
      "port os"
      "edu  proj"
      "edu  resume"
      "quote quote"
      "connect connect";
  }
  .bx-portrait{min-height:340px}
}
@media (max-width:640px){
  .bento-wrap{padding-top:82px}
  .bento{grid-template-columns:1fr;gap:13px;padding-inline:16px;
    grid-template-areas:"hero" "port" "edu" "exp" "os" "proj" "resume" "quote" "connect";}
  .bx{padding:21px;border-radius:22px}
  .bx-portrait{padding:0}
  .bx-hero{min-height:330px}
  .globe-canvas{right:-90px;bottom:-110px;width:300px;height:300px}
  .bx-connect{flex-direction:column;align-items:stretch;justify-content:center;gap:16px;}
  .bx-connect .c-left{display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
  .bx-connect .c-direct{gap:6px;}
  .bx-connect .c-cta{align-self:flex-start;margin-top:4px;}
}

/* Education + Achievements: let the rows breathe into the card instead of
   stacking at the top over a block of dead space. The education list spreads its
   three rows across the height it is given; the achievement list absorbs the gap
   that margin-top:auto used to open above the footer. */
@media (min-width:1101px){
  body.page-home .bx-edu{justify-content:flex-start}
  body.page-home .bx-edu .edu-rows{
    flex:1;display:flex;flex-direction:column;gap:0;margin-top:10px;
  }
  body.page-home .bx-edu .edu-rows li{
    flex:1;display:flex;flex-direction:column;justify-content:center;
    padding:0;border-bottom:1px solid var(--border);position:relative;
  }
  body.page-home .bx-edu .edu-rows li:last-child{
    border-bottom:0;
  }

  body.page-home .bx-quote .bx-points,
  body.page-home .bx-exp .bx-points{flex:1;justify-content:space-evenly;gap:0}
  body.page-home .bx-quote .q{margin-top:2px}
}

/* Projects card: the button's fixed 20px top margin pushed it to within 8px of
   the card's bottom edge, against the 26px padding everywhere else. Let the space
   above it flex instead, so it sits on the padding line whatever the row height. */
@media (min-width:1101px){
  body.page-home .bx-proj .ghost-btn{margin-top:auto}
}

/* ============================================================
   MULTI-PAGE SHELL
   "/" is the bento grid alone; every other route is its own page.
   ============================================================ */

/* Home: the grid IS the screen — lock it to the viewport, never scroll.
   Rows share the leftover height, so the grid shrinks to fit instead of
   overflowing on shorter laptop displays. */
/* Desktop only: the grid is exactly one screen and never scrolls.
   Narrower viewports keep normal scrolling so the stacked cards stay reachable. */
@media (min-width:1101px){
  html:has(body.page-home){height:100%;overflow:hidden}
  body.page-home{height:100svh;overflow:hidden}
  .page-home .bento-wrap{
    height:100svh;
    display:flex;align-items:center;
    padding:86px 0 20px;
  }
  .page-home .bento{
    flex:1;
    height:100%;
    min-height:0;                  /* let grid children shrink below content size */
    grid-template-rows:repeat(3,minmax(0,.84fr)) minmax(0,1fr) minmax(0,1fr);
  }
  .page-home .bx{min-height:0;overflow:hidden}
  .page-home .footer{display:none}

  /* The middle column is the tightest band — keep these two lean.
     Scoped to body.page-home so they outrank the base .bx padding. */
  body.page-home .bx-os,
  body.page-home .bx-resume{padding:18px 20px}
  body.page-home .bx-os .bx-kicker{margin-bottom:4px}
  body.page-home .bx-os .bx-sub{margin-top:1px}
  body.page-home .bx-os .bx-line{padding-top:6px;font-size:12.5px}
  body.page-home .bx-os .bx-gh{width:22px;height:22px;top:16px;right:16px}
  /* Fuller exp/achievement cards: tighten their lists so the grid still fits. */
  body.page-home .bx-exp .bx-points,
  body.page-home .bx-quote .bx-points{gap:5px;margin-top:9px}
  body.page-home .bx-exp .bx-points li,
  body.page-home .bx-quote .bx-points li{font-size:12.5px;line-height:1.38}
  body.page-home .bx-exp .bx-foot{margin-top:auto}
  body.page-home .bx-exp .mini-chip{font-size:10px;padding:2px 8px}
  body.page-home .bx-quote .q{font-size:13.5px;line-height:1.45}
  body.page-home .bx-quote .q-by{padding-top:10px}
  body.page-home .bx-quote .q-by strong{font-size:12.5px}
  body.page-home .bx-quote .q-by span{font-size:11.5px}
  body.page-home .bx-resume .doc{width:80px;padding:9px 8px;gap:4px}
}

/* At tighter heights the cards need less internal padding to stay legible. */
/* Gentle easing only — content is sized to fit, so no aggressive squeezing. */
@media (min-width:1101px) and (max-height:880px){
  /* Headings carry the meaning; the label row is the first thing to go. */
  body.page-home .bx-os .bx-kicker,
  body.page-home .bx-resume .bx-kicker{display:none}
  body.page-home .bx-os,
  body.page-home .bx-resume{padding:16px 18px}
  
  body.page-home .bx-exp{padding:18px 22px}
  body.page-home .bx-exp .bx-kicker{margin-bottom:4px}
  body.page-home .bx-exp .bx-points{gap:3px;margin-top:6px}
  body.page-home .bx-exp .bx-foot{margin-top:auto}
}
@media (min-width:1101px) and (max-height:890px){
  .page-home .doc{width:88px;padding:10px 9px}
  .page-home .bento{gap:13px}
  .page-home .bento-wrap{padding:76px 0 15px}
  .page-home .bx{padding:20px}
  .page-home .bx-line{font-size:12.5px;padding-top:10px}
  .page-home .bx-sub{font-size:12.5px}
}
@media (min-width:1101px) and (max-height:830px){
  /* The chip row and the 4th achievement are the first things to go. */
  .page-home .bx-exp .bx-foot{display:none}
  /* Connect: the email + phone are the payload; the icon row repeats links that
     already live on the contact page, so it yields first. */
  .page-home .bx-connect .c-icons{display:none}
  .page-home .bx-quote .bx-points li:nth-child(4){display:none}
  .page-home .bx-exp .bx-points li:nth-child(4){display:none}
  .page-home .bx-quote .q-by{display:none}
}
@media (min-width:1101px) and (max-height:800px){
  .page-home .bx-proj .bx-big{font-size:1.5rem}
  .page-home .bx-proj .ghost-btn{padding:9px 16px;font-size:11px;margin-top:auto}
  .page-home .bx-proj .bx-sub{margin-top:1px}
}
@media (min-width:1101px) and (max-height:740px){
  /* Reclaim the label row; the card headings already carry the meaning. */
  .page-home .bx-exp .bx-kicker,
  .page-home .bx-os .bx-kicker{display:none}
  .page-home .doc{width:76px;padding:9px 8px;gap:5px}
  .page-home .bento{gap:11px}
  .page-home .bento-wrap{padding:70px 0 13px}
  .page-home .bx{padding:17px}
  .page-home .bx-h{font-size:17px}
  .page-home .bx-line{font-size:12px;padding-top:9px}
  .page-home .edu-rows{gap:9px}
  .page-home .edu-rows li{padding-bottom:9px}
}

@media (max-width:1100px){
  /* Below the two-column breakpoint the grid is taller than a screen. */
  .page-home .bento-wrap{min-height:0;display:block;padding-top:96px}
}
@media (max-width:640px){
  .page-sub .section{padding-top:104px}
  .page-sub .contact{padding-top:104px}
}