/* Rashi Chauhan portfolio: shared styles */
:root {
  --bg: #0a0c12;
  --bg-2: #0e1119;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.075);
  --line: rgba(255, 255, 255, 0.10);
  --text: #eceff6;
  --muted: #a0a9bb;
  --faint: #7f8aa0;
  --a1: #7aa2ff;
  --a2: #b69cff;
  --a3: #5eead4;
  --grad: linear-gradient(110deg, var(--a1), var(--a2) 50%, var(--a3));
  --node: 150, 180, 255;
  --blob-a: rgba(122, 162, 255, 0.20);
  --blob-b: rgba(182, 156, 255, 0.16);
  --blob-c: rgba(94, 234, 212, 0.11);
  --on-accent: #0a0c12;
  --focus: #9db9ff;
  --good: #5eead4;
  --radius: 16px;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
:root[data-theme="light"] {
  --bg: #f7f6f2;
  --bg-2: #efede7;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-2: rgba(255, 255, 255, 0.95);
  --line: rgba(20, 25, 40, 0.12);
  --text: #141824;
  --muted: #4d566a;
  --faint: #667086;
  --a1: #2f55d4;
  --a2: #7a4fd1;
  --a3: #0d9488;
  --node: 47, 85, 212;
  --blob-a: rgba(47, 85, 212, 0.14);
  --blob-b: rgba(122, 79, 209, 0.12);
  --blob-c: rgba(13, 148, 136, 0.10);
  --on-accent: #ffffff;
  --focus: #2f55d4;
  --good: #0d9488;
}
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.22s ease both vt-out; }
::view-transition-new(root) { animation: 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.65 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
::selection { background: rgba(122, 162, 255, 0.35); }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-weight: 600; transition: top 0.2s; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ambient background */
.ambient { position: fixed; inset: 0; z-index: -2; background: var(--bg); overflow: hidden; }
.ambient i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); will-change: transform; }
.ambient i:nth-child(1) { background: var(--blob-a); top: -22vmax; left: -14vmax; animation: drift1 26s ease-in-out infinite alternate; }
.ambient i:nth-child(2) { background: var(--blob-b); top: 18vmax; right: -24vmax; animation: drift2 32s ease-in-out infinite alternate; }
.ambient i:nth-child(3) { background: var(--blob-c); bottom: -26vmax; left: 12vmax; animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(14vmax, 10vmax) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-12vmax, 8vmax) scale(0.9); } }
@keyframes drift3 { to { transform: translate(10vmax, -10vmax) scale(1.15); } }
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.cursor-glow { position: fixed; left: 0; top: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; pointer-events: none; z-index: -1; opacity: 0;
  background: radial-gradient(circle, rgba(var(--node), 0.14), transparent 65%); transition: opacity 0.4s; }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: var(--grad); transform: scaleX(0); transform-origin: left; }

/* header */
header.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; gap: 14px; min-height: 58px; }
.brand { font: 700 18px var(--font-head); letter-spacing: -0.01em; white-space: nowrap; }
.brand span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
nav.main { margin-left: auto; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
nav.main::-webkit-scrollbar { display: none; }
nav.main a { padding: 6px 12px; font-size: 14px; color: var(--muted); white-space: nowrap; border-radius: 999px; transition: color 0.2s, background 0.2s; }
nav.main a:hover { color: var(--text); }
nav.main a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
nav.main a.cta-link { border: 1px solid var(--line); color: var(--text); margin-left: 6px; }
nav.main a.cta-link:hover { border-color: rgba(var(--node), 0.6); }
#theme { flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--text); border-radius: 50%; cursor: pointer; transition: transform 0.3s, background 0.2s; }
#theme:hover { transform: rotate(25deg); background: var(--surface-2); }
#theme svg { width: 18px; height: 18px; }

/* hero (home) */
.hero { position: relative; padding: clamp(60px, 11vw, 120px) 0 52px; }
#net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.9;
  mask-image: linear-gradient(to bottom, #000 55%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.status { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 500 13px var(--font-mono); color: var(--muted); margin-bottom: 26px; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--a3); position: relative; }
.status .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--a3); animation: ping 2s ease-out infinite; }
@keyframes ping { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
h1.name { margin: 0; font: 700 clamp(46px, 11vw, 108px)/0.98 var(--font-head); letter-spacing: -0.035em; }
h1.name .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
h1.name .line > span { display: inline-block; }
h1.name .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: sheen 8s linear infinite; }
@keyframes sheen { to { background-position: -200% 0; } }
.role { margin: 20px 0 0; font: 500 clamp(18px, 3vw, 26px) var(--font-head); color: var(--muted); }
.role b { font-weight: 600; color: var(--text); }
.typed { margin: 10px 0 0; font: 400 clamp(15px, 2.4vw, 19px) var(--font-mono); color: var(--a1); min-height: 1.6em; }
.typed .caret { display: inline-block; width: 2px; height: 1.1em; background: var(--a1); margin-left: 3px; vertical-align: -0.2em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.lead { max-width: 62ch; margin: 20px 0 0; color: var(--muted); font-size: clamp(16px, 2.2vw, 19px); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font: 600 15px var(--font-body); border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer;
  transition: transform 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s; }
.btn:hover { transform: translateY(-2px); background: var(--surface-2); border-color: rgba(var(--node), 0.5); }
.btn.primary { background: var(--grad); border-color: transparent; color: var(--on-accent); }
.btn.primary:hover { box-shadow: 0 10px 30px rgba(var(--node), 0.35); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn .dl { transition: transform 0.3s; }
.btn:hover .dl { transform: translateY(2px); }
.btn:hover .go { transform: translateX(3px); }
.btn .go { transition: transform 0.25s; }

/* inner page hero */
.phero { padding: clamp(48px, 8vw, 88px) 0 8px; position: relative; }
.crumbs { font: 400 13px var(--font-mono); color: var(--faint); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.phero h1 { margin: 0 0 14px; font: 700 clamp(36px, 7vw, 68px)/1.04 var(--font-head); letter-spacing: -0.03em; }
.phero h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: sheen 9s linear infinite; }
.phero p.lead { margin: 0; }

/* sections */
section { padding: clamp(44px, 7vw, 84px) 0 0; }
.eyebrow { display: flex; align-items: center; gap: 14px; font: 500 13px var(--font-mono); color: var(--a1); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.eyebrow::after { content: ""; height: 1px; flex: 1; max-width: 140px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 1s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.eyebrow.in::after, html:not(.js) .eyebrow::after { transform: scaleX(1); }
h2.title { margin: 0 0 12px; font: 700 clamp(26px, 4.6vw, 40px)/1.12 var(--font-head); letter-spacing: -0.025em; }
.sub { margin: 0 0 34px; color: var(--muted); max-width: 66ch; }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.js .from-left { transform: translateX(-34px); }
.js .from-right { transform: translateX(34px); }
.js .from-left.in, .js .from-right.in { transform: none; }

.card { position: relative; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); padding: 22px; overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s, background 0.3s; }
.card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--node), 0.16), transparent 45%); }
.card:hover { transform: translateY(-4px); border-color: rgba(var(--node), 0.45); background: var(--surface-2); }
.card:hover::before { opacity: 1; }
.card > * { position: relative; }
a.card { display: block; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.tags span { font: 400 12px var(--font-mono); padding: 3px 10px; border-radius: 999px; background: rgba(var(--node), 0.10); color: var(--a1); }
:root[data-theme="light"] .tags span { background: rgba(var(--node), 0.09); }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
.more { margin-top: 22px; } .more a { color: var(--a1); font-weight: 500; } .more a:hover { text-decoration: underline; }

/* stats (home) */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--bg-2); padding: 22px 18px; }
:root[data-theme="light"] .stat { background: var(--surface-2); }
.stat .num { font: 700 clamp(28px, 4vw, 40px)/1.1 var(--font-head); letter-spacing: -0.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .lbl { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.4; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:last-child { grid-column: 1 / -1; } }

/* home: snapshot + explore */
.snap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 820px) { .snap { grid-template-columns: 1fr; } }
.snap p { margin: 0 0 14px; color: var(--muted); font-size: 17px; } .snap p strong { color: var(--text); font-weight: 600; }
.facts { display: grid; gap: 10px; }
.fact { display: flex; gap: 14px; align-items: baseline; padding: 13px 16px; }
.fact .k { font: 500 12px var(--font-mono); color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; min-width: 86px; }
.fact .v { color: var(--text); font-size: 15px; }
.explore { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.explore .card { display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
.explore .n { font: 500 12px var(--font-mono); color: var(--a1); letter-spacing: 0.08em; }
.explore h3 { margin: 0; font: 600 19px var(--font-head); }
.explore p { margin: 0; color: var(--muted); font-size: 14.5px; }
.explore .arrow { margin-top: auto; color: var(--a1); transition: transform 0.3s; width: 20px; height: 20px; }
.explore .card:hover .arrow { transform: translateX(6px); }
.featured { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.featured .card { display: flex; flex-direction: column; gap: 8px; }
.featured .kicker { font: 500 12px var(--font-mono); color: var(--a1); text-transform: uppercase; letter-spacing: 0.08em; }
.featured h3 { margin: 0; font: 600 19px var(--font-head); } .featured p { margin: 0; color: var(--muted); font-size: 15px; }
.featured .big { font: 700 32px var(--font-head); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* experience */
.timeline { position: relative; padding-left: 34px; }
.timeline .rail { position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 2px; }
.timeline .rail i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--grad); border-radius: 2px; }
.job { position: relative; margin-bottom: 22px; }
.job::before { content: ""; position: absolute; left: -34px; top: 26px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--a1); box-shadow: 0 0 0 4px rgba(var(--node), 0.14); }
.job .head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; align-items: baseline; }
.job h3 { margin: 0; font: 600 20px var(--font-head); letter-spacing: -0.01em; }
.job .org { color: var(--a1); font-weight: 500; }
.job .when { font: 400 13px var(--font-mono); color: var(--faint); }
.job ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.job li { position: relative; padding-left: 20px; color: var(--muted); font-size: 15px; }
.job li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1.5px; background: var(--a2); }
.job li b { color: var(--text); font-weight: 600; }
.js .job li { opacity: 0; transform: translateX(-12px); transition: opacity 0.6s, transform 0.6s; transition-delay: calc(var(--i, 0) * 0.08s + 0.2s); }
.js .job.in li { opacity: 1; transform: none; }
.rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 0 0 40px; }
.ringcard { padding: 18px 12px 16px; text-align: center; }
.ring { position: relative; width: 112px; height: 112px; margin: 0 auto 10px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.ring .bgc { stroke: var(--line); }
.ring .fg { stroke: url(#ringgrad); stroke-dasharray: var(--v) 100; }
.js .ring .fg { stroke-dasharray: 0 100; transition: stroke-dasharray 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s; }
.js .ringcard.in .ring .fg { stroke-dasharray: var(--v) 100; }
.ring .v { position: absolute; inset: 0; display: grid; place-items: center; font: 700 22px var(--font-head); letter-spacing: -0.02em; }
.ringcard .l { font-size: 13px; color: var(--muted); line-height: 1.4; }
.ringcard .l b { display: block; color: var(--text); font: 600 14px var(--font-body); margin-bottom: 2px; }

/* research */
.yearchart { display: flex; align-items: flex-end; gap: 14px; height: 150px; padding: 20px 22px 14px; margin-bottom: 30px; }
.yearchart .col { flex: 0 0 56px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.yearchart .bar { width: 100%; height: calc(var(--h) * 10px); background: var(--grad); border-radius: 8px 8px 3px 3px; transform-origin: bottom; }
.js .yearchart .bar { transform: scaleY(0); transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 0.12s + 0.1s); }
.js .yearchart.in .bar { transform: scaleY(1); }
.yearchart .n { font: 600 13px var(--font-head); } .yearchart .y { font: 400 12px var(--font-mono); color: var(--faint); }
.yearchart .legend { margin-left: auto; align-self: center; color: var(--muted); font-size: 14px; max-width: 30ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip { font: 500 13px var(--font-body); padding: 7px 16px; border-radius: 999px; cursor: pointer; background: var(--surface); border: 1px solid var(--line); color: var(--muted); transition: all 0.25s; }
.chip:hover { color: var(--text); border-color: rgba(var(--node), 0.5); }
.chip[aria-pressed="true"] { background: var(--grad); border-color: transparent; color: var(--on-accent); }
.pubs { display: grid; gap: 12px; }
.pub { display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items: center; padding: 18px 20px; }
.pub[hidden] { display: none; }
.pub.pop { animation: pop 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: var(--d, 0s); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.pub .yr { font: 700 20px var(--font-head); color: var(--faint); transition: color 0.3s; }
.pub:hover .yr { color: var(--a1); }
.pub h3 { margin: 0; font: 500 16px/1.4 var(--font-head); letter-spacing: -0.005em; }
.pub .m { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.pub .m a { color: var(--a1); border-bottom: 1px solid transparent; } .pub .m a:hover { border-color: var(--a1); }
.pub .side { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.tag { font: 500 11px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tag.first { border-color: rgba(var(--node), 0.5); color: var(--a1); }
@media (max-width: 640px) { .pub { grid-template-columns: 1fr; gap: 6px; } .pub .side { flex-direction: row; align-items: flex-start; } .yearchart .legend { display: none; } }

/* projects */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.proj { display: flex; flex-direction: column; gap: 10px; padding: 0; }
.proj summary { list-style: none; cursor: pointer; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.proj summary::-webkit-details-marker { display: none; }
.proj .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.proj .ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--grad); color: var(--on-accent); font: 700 15px var(--font-mono); }
.proj .metric { font: 700 20px var(--font-head); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.proj h3 { margin: 0; font: 600 18px var(--font-head); letter-spacing: -0.01em; }
.proj .blurb { margin: 0; color: var(--muted); font-size: 14.5px; }
.proj .more-hint { font: 500 12px var(--font-mono); color: var(--a1); display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.proj .more-hint svg { width: 14px; height: 14px; transition: transform 0.3s; }
.proj[open] .more-hint svg { transform: rotate(180deg); }
.proj .body { padding: 0 22px 22px; display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; margin: 0 22px; padding-inline: 0; }
.proj[open] .body { animation: slidedown 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes slidedown { from { opacity: 0; transform: translateY(-8px); } }
.proj .body dl { margin: 0; display: grid; gap: 10px; }
.proj .body dt { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--a1); }
.proj .body dd { margin: 2px 0 0; color: var(--muted); font-size: 14.5px; }
.proj .body dd b { color: var(--text); font-weight: 600; }
.proj .links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 22px 22px; font-size: 14px; }
.proj .links a { color: var(--a1); font-weight: 500; } .proj .links a:hover { text-decoration: underline; }
.proj[hidden] { display: none; }

/* skills */
.skillgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.skillgrid .card { padding: 20px; } .skillgrid h3 { margin: 0 0 12px; font: 600 15px var(--font-head); }
.skillgrid .tags { margin: 0; padding: 0; }

/* education / honors */
.two { display: grid; gap: 16px; grid-template-columns: 1.1fr 1fr; align-items: start; }
@media (max-width: 820px) { .two { grid-template-columns: 1fr; } }
.edu, .honors { display: grid; gap: 14px; align-content: start; }
.edu .row { padding: 20px 22px; }
.edu h3 { margin: 0; font: 600 17px var(--font-head); }
.edu .sch { color: var(--a1); font-size: 15px; font-weight: 500; margin-top: 2px; }
.edu .dt { color: var(--faint); font: 400 13px var(--font-mono); margin-top: 6px; }
.honors .card { padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; }
.honors .ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--node), 0.12); color: var(--a1); }
.honors .ic svg { width: 18px; height: 18px; }
.honors b { display: block; font: 600 15px var(--font-head); } .honors span.d { color: var(--muted); font-size: 14px; }

/* contact */
.orbs { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.orbs i { position: absolute; border-radius: 50%; filter: blur(50px); opacity: 0.55; }
.orbs i:nth-child(1) { width: 320px; height: 320px; background: var(--a1); top: -60px; left: 8%; animation: orb1 14s ease-in-out infinite alternate; }
.orbs i:nth-child(2) { width: 260px; height: 260px; background: var(--a2); top: 30px; right: 10%; animation: orb2 17s ease-in-out infinite alternate; }
.orbs i:nth-child(3) { width: 220px; height: 220px; background: var(--a3); bottom: -80px; left: 40%; animation: orb3 19s ease-in-out infinite alternate; }
@keyframes orb1 { to { transform: translate(120px, 70px) scale(1.2); } }
@keyframes orb2 { to { transform: translate(-130px, 90px) scale(0.85); } }
@keyframes orb3 { to { transform: translate(90px, -60px) scale(1.15); } }
.mailbox { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; }
.mailbox .addr { font: 500 clamp(16px, 3vw, 22px) var(--font-mono); padding: 12px 20px; border-radius: 14px; border: 1px dashed rgba(var(--node), 0.6); background: var(--surface); user-select: all; }
.reasons { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.reasons .card { display: flex; flex-direction: column; gap: 8px; } .reasons h3 { margin: 0; font: 600 18px var(--font-head); }
.reasons p { margin: 0; color: var(--muted); font-size: 14.5px; } .reasons .btn { align-self: flex-start; margin-top: auto; }
.links-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.links-row a.card { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; }
.links-row .k { font: 500 12px var(--font-mono); color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; } .links-row .v { color: var(--text); font-weight: 500; word-break: break-word; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 30px); opacity: 0; background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 999px; font: 600 14px var(--font-body); z-index: 90; pointer-events: none; transition: all 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* resume page */
.rlayout { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: start; }
@media (max-width: 880px) { .rlayout { grid-template-columns: 1fr; } .toc { display: none; } }
.toc { position: sticky; top: 84px; display: grid; gap: 4px; font-size: 14px; }
.toc a { color: var(--muted); padding: 6px 12px; border-left: 2px solid var(--line); transition: all 0.2s; }
.toc a:hover, .toc a.on { color: var(--text); border-color: var(--a1); background: var(--surface); }
.ractions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 30px; }
.doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 4vw, 44px); }
.doc h2 { font: 700 15px var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--a1); margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.doc .contact-line { margin-bottom: 4px; }
.doc .contact-line { color: var(--muted); font-size: 15px; margin: 4px 0 0; }
.doc .contact-line a { color: var(--a1); text-decoration: underline; text-underline-offset: 2px; }
.doc li a { color: var(--a1); text-decoration: underline; text-underline-offset: 2px; }
.nw { white-space: nowrap; }
.doc h3 { margin: 18px 0 2px; font: 600 16px var(--font-head); }
.doc h3 .when { float: right; font: 400 13px var(--font-mono); color: var(--faint); }
.doc .org { color: var(--muted); font-size: 14.5px; margin: 0 0 6px; }
.doc ul { margin: 6px 0 0; padding-left: 20px; color: var(--muted); font-size: 15px; display: grid; gap: 5px; }
.doc p { color: var(--muted); font-size: 15px; margin: 0 0 8px; }
.doc dl.skills { margin: 0; display: grid; gap: 6px; font-size: 15px; } .doc dl.skills div { display: grid; grid-template-columns: 200px 1fr; gap: 4px 16px; }
.doc dl.skills dt { font-weight: 600; } .doc dl.skills dd { margin: 0; color: var(--muted); }
@media (max-width: 600px) { .doc dl.skills div { grid-template-columns: 1fr; gap: 0; } .doc h3 .when { float: none; display: block; } }
.doc .name { font: 700 clamp(28px, 5vw, 40px)/1.1 var(--font-head); letter-spacing: -0.02em; margin: 0; }
.doc .tagline { color: var(--text); font-weight: 500; margin: 2px 0 6px; }

footer { margin-top: clamp(56px, 8vw, 100px); padding: 36px 0 52px; border-top: 1px solid var(--line); color: var(--faint); font-size: 14px; }
footer .cols { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-start; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; } footer a { color: var(--muted); } footer a:hover { color: var(--text); text-decoration: underline; }
footer .fine { margin-top: 22px; font: 400 12.5px var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .js .reveal, .js .job li { opacity: 1; transform: none; }
  .js .ring .fg { stroke-dasharray: var(--v) 100; }
  .js .yearchart .bar { transform: none; }
}

/* print: used for the resume page and PDF */
@media print {
  @page { size: A4; margin: 14mm 15mm; }
  :root, :root[data-theme="dark"], :root[data-theme="light"] { --bg: #fff; --text: #111; --muted: #222; --faint: #444; --line: #bbb; --a1: #111; }
  html, body { background: #fff !important; color: #111 !important; font: 10.5pt/1.4 Arial, Helvetica, sans-serif !important; }
  .ambient, .grain, .cursor-glow, .progress, header.top, footer, .skip, .phero, .ractions, .toc, .toast, .no-print { display: none !important; }
  .wrap { width: 100% !important; margin: 0 !important; }
  .rlayout { display: block !important; }
  section { padding: 0 !important; }
  .doc { background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; }
  .doc h2, .doc h3, .doc dl.skills dt, .doc .tagline { font-family: Arial, Helvetica, sans-serif !important; }
  .doc h2 { letter-spacing: 0.04em !important; color: #111 !important; border-bottom: 1px solid #111 !important; font-size: 11pt !important; margin: 14px 0 6px !important; break-after: avoid; }
  .doc h3 { font-size: 10.5pt !important; margin: 8px 0 1px !important; break-after: avoid; }
  .doc h3 .when { font-family: Arial, Helvetica, sans-serif !important; color: #111 !important; }
  .doc ul, .doc p, .doc .org, .doc dl.skills dd, .doc .contact-line { color: #111 !important; font-size: 10pt !important; }
  .doc a, .doc .contact-line a, .doc li a { color: #1a4fa0 !important; text-decoration: underline !important; }
  .doc li { break-inside: avoid; }
  .doc .name { font: 700 20pt Arial, Helvetica, sans-serif !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}