/* DESIGN TOKENS */
:root {
  --bg:          #06090f;
  --bg-alt:      #09111d;
  --bg-card:     rgba(255,255,255,.025);
  --bg-card-h:   rgba(255,255,255,.042);
  --gold:        #c8a96e;
  --gold-hi:     #dfc08a;
  --gold-dim:    rgba(200,169,110,.5);
  --gold-line:   rgba(200,169,110,.15);
  --gold-bg:     rgba(200,169,110,.07);
  --gold-glow:   rgba(200,169,110,.12);
  --blue:        #2a6bbf;
  --blue-dim:    rgba(42,107,191,.12);
  --text:        #e6dfd3;
  --text-muted:  #6a8298;
  --text-sub:    rgba(230,223,211,.58);
  --white:       #ffffff;
  --nav-w:       268px;
  --r:           12px;
  --r-sm:        7px;
  --px:          clamp(1.5rem, 5vw, 4.5rem);
  --py:          clamp(3.5rem, 7vw, 6rem);
  --ease:        cubic-bezier(.4,0,.2,1);
  --spring:      cubic-bezier(.34,1.56,.64,1);
  --dur:         .28s;
}

/* RESET & BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* selection */
::selection { background: rgba(200,169,110,.22); color: var(--white); }

/* scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(200,169,110,.35); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* skip link (accessibility) */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  background: var(--gold); color: var(--bg); padding: .5rem 1rem;
  border-radius: var(--r-sm); font-weight: 600; font-size: .85rem;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* focus visible */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* PROGRESS BAR */
#prog {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold), #5590d8, var(--gold));
  background-size: 200% 100%;
  z-index: 9000;
  transition: width .08s linear;
  pointer-events: none;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* NAV TRIGGER */
.nav-btn {
  position: fixed; top: 1.1rem; left: 1.1rem; z-index: 900;
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(6,9,15,.9); backdrop-filter: blur(20px);
  border: 1px solid var(--gold-line); border-radius: var(--r-sm);
  padding: .55rem .62rem; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur), transform var(--dur) var(--spring), left .38s var(--ease);
}
/* on desktop, shift hamburger right when nav open so it sits outside nav */
@media (min-width: 900px) {
  .nav-btn.is-open { left: calc(var(--nav-w) + 1.1rem); }
}
.nav-btn span {
  display: block; width: 19px; height: 1.5px;
  background: var(--gold); border-radius: 1px;
  transition: transform .28s var(--ease), opacity .2s, width .2s;
}
.nav-btn:hover { background: var(--gold-bg); border-color: rgba(200,169,110,.3); transform: scale(1.05); }
.nav-btn.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-btn.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* SIDE NAV */
.sidenav {
  position: fixed; inset: 0 auto 0 0; width: var(--nav-w); z-index: 870;
  background: rgba(5,8,14,.98); backdrop-filter: blur(32px);
  border-right: 1px solid rgba(200,169,110,.08);
  display: flex; flex-direction: column;
  transform: translateX(calc(-1 * var(--nav-w)));
  transition: transform .38s var(--ease), box-shadow .38s var(--ease);
  overflow-y: auto;
}
.sidenav.is-open {
  transform: translateX(0);
  box-shadow: 12px 0 40px rgba(0,0,0,.4);
}

/* nav header */
.sn-header {
  display: flex; align-items: center;
  padding: 1.2rem 1.25rem;
  border-bottom: 1px solid rgba(200,169,110,.06);
  flex-shrink: 0;
}
.sn-brand { display: flex; align-items: center; gap: .7rem; }
.sn-initials {
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--gold); color: var(--bg);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: .9rem; font-weight: 600; letter-spacing: .02em;
}
.sn-brand-text { display: flex; flex-direction: column; }
.sn-name {
  font-size: .75rem; font-weight: 600; color: var(--text);
  letter-spacing: .02em; line-height: 1.2;
}
.sn-subtitle {
  font-size: .56rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-dim);
}

/* nav links */
.sn-nav { flex: 1; padding: .5rem 0; }
.sn-nav a {
  display: flex; align-items: center; gap: .78rem;
  padding: .62rem 1.25rem;
  font-size: .84rem; font-weight: 400;
  color: rgba(230,223,211,.45);
  position: relative;
  transition: color var(--dur), background var(--dur);
}
.sn-nav a i {
  width: 14px; font-size: .75rem;
  color: rgba(200,169,110,.35); flex-shrink: 0;
  transition: color var(--dur), transform var(--dur) var(--spring);
}
.sn-nav a::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 2px; background: var(--gold); border-radius: 1px;
  transform: scaleY(0); transition: transform .22s var(--ease);
}
.sn-nav a:hover, .sn-nav a.active {
  color: var(--text); background: rgba(200,169,110,.035);
}
.sn-nav a:hover i, .sn-nav a.active i {
  color: var(--gold); transform: scale(1.15);
}
.sn-nav a:hover::before, .sn-nav a.active::before { transform: scaleY(1); }

/* nav footer */
.sn-foot {
  flex-shrink: 0; padding: 1rem 1.25rem;
  border-top: 1px solid rgba(200,169,110,.05);
  display: flex; flex-direction: column; gap: .32rem;
  font-size: .57rem; color: var(--text-muted);
  letter-spacing: .08em; line-height: 1.8;
}
.sn-status {
  display: flex; align-items: center; gap: .45rem;
  color: rgba(100,200,140,.7); margin-bottom: .15rem;
}
.sn-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4eca88; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(78,202,136,.4);
  animation: pulse-badge 2.2s ease infinite;
}
@keyframes pulse-badge {
  0%   { box-shadow: 0 0 0 0 rgba(78,202,136,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(78,202,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(78,202,136,0); }
}
.sn-foot i { color: var(--gold-dim); margin-right: .2rem; }

/* nav overlay */
.nav-overlay {
  position: fixed; inset: 0; z-index: 860;
  background: rgba(2,4,10,.5); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
}
.nav-overlay.visible { opacity: 1; pointer-events: all; }

/* WRAP — shifts via padding so ALL content remains visible */
.wrap {
  transition: padding-left .38s var(--ease);
  /* ensure min padding so hamburger never overlaps content */
  padding-left: 0;
}
@media (min-width: 900px) {
  .wrap.is-pushed { padding-left: var(--nav-w); }
}

/* SECTION BASE */
section { padding: var(--py) var(--px); }
.bg-alt { background: var(--bg-alt); }
.sec-head { margin-bottom: 0; }

.label {
  display: flex; align-items: center; gap: .7rem;
  font-size: .57rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; margin-bottom: .85rem;
  font-family: 'DM Mono', monospace;
}
.label::after {
  content: ''; width: 24px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: .5;
}

h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 300; color: var(--white);
  line-height: 1.1; letter-spacing: -.01em;
}
h2 em { font-style: italic; color: var(--gold); font-weight: 400; }

.body-text { font-size: .92rem; color: var(--text-sub); line-height: 1.92; font-weight: 300; }
.mt-xl { margin-top: 2.8rem; }

/* CHIPS & PILLS */
.chips { display: flex; flex-wrap: wrap; gap: .32rem; margin-top: .9rem; }
.chips span {
  font-family: 'DM Mono', monospace;
  font-size: .56rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  padding: .26rem .7rem;
  background: var(--gold-bg); border: 1px solid var(--gold-line);
  border-radius: 100px; color: rgba(200,169,110,.7);
  transition: all var(--dur) var(--ease);
}
.chips span:hover {
  background: rgba(200,169,110,.13); color: var(--gold-hi);
  border-color: rgba(200,169,110,.35); transform: translateY(-1px);
}

.pill-cloud { display: flex; flex-wrap: wrap; gap: .32rem; margin-top: 1rem; }
.pill-cloud span {
  font-size: .6rem; padding: .27rem .65rem; border-radius: 100px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  color: var(--text-muted);
  transition: all var(--dur) var(--ease);
}
.pill-cloud span:hover {
  background: var(--gold-bg); border-color: var(--gold-line); color: var(--gold-hi);
  transform: translateY(-1px);
}

/* tag cloud (hero) */
.tag-cloud { display: flex; flex-wrap: wrap; gap: .38rem; margin: 1.6rem 0 2rem; }
.tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .6rem; font-weight: 500; letter-spacing: .06em;
  padding: .32rem .78rem; border-radius: 100px;
  border: 1px solid rgba(200,169,110,.13);
  color: var(--text-muted);
  transition: all var(--dur) var(--ease);
  cursor: default;
}
.tag i { font-size: .6rem; color: rgba(200,169,110,.45); transition: color var(--dur); }
.tag:hover { border-color: rgba(200,169,110,.35); color: var(--gold-hi); background: var(--gold-bg); }
.tag:hover i { color: var(--gold); }
.tag-accent { border-color: rgba(200,169,110,.32); color: var(--gold-hi); background: var(--gold-bg); }
.tag-accent i { color: var(--gold); }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: .42rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .75rem 1.65rem; border-radius: var(--r-sm); cursor: pointer;
  transition: all var(--dur) var(--ease); font-family: 'DM Mono', monospace;
  white-space: nowrap;
}
.btn-fill {
  background: var(--gold); color: var(--bg); border: none;
  box-shadow: 0 4px 14px rgba(200,169,110,.18);
}
.btn-fill:hover {
  background: var(--gold-hi); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200,169,110,.28);
}
.btn-ring {
  background: transparent; color: var(--text);
  border: 1px solid rgba(230,223,211,.18);
}
.btn-ring:hover {
  border-color: var(--gold); color: var(--gold);
  background: var(--gold-bg); transform: translateY(-2px);
}
.btn-ghost {
  background: transparent; color: var(--text-muted);
  border: 1px solid rgba(255,255,255,.08);
}
.btn-ghost:hover {
  color: var(--text); border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04); transform: translateY(-2px);
}
.btn-sm { padding: .58rem 1.1rem; font-size: .58rem; }
.btn-row { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* MEDIA CARDS */
.mcard {
  background: var(--bg-card); border: 1px solid var(--gold-line);
  border-radius: var(--r); overflow: hidden;
  transition: all var(--dur) var(--ease);
}
.mcard:hover {
  border-color: rgba(200,169,110,.3);
  box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 0 0 1px rgba(200,169,110,.08);
  transform: translateY(-3px);
}
.mcard img, .mcard video { width: 100%; display: block; }
.mcard figcaption {
  padding: .58rem .95rem;
  border-top: 1px solid rgba(200,169,110,.06);
  font-size: .57rem; color: var(--text-muted);
  letter-spacing: .07em;
  display: flex; align-items: center; gap: .42rem; line-height: 1.5;
}
.mcard figcaption i { color: var(--gold); font-size: .65rem; flex-shrink: 0; }

/* COMMON GRIDS */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.media-stack { display: flex; flex-direction: column; gap: 1rem; }

/* info grid */
.info-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--gold-line); border-radius: var(--r); overflow: hidden;
}
.info-grid > div {
  padding: .68rem .95rem;
  border-bottom: 1px solid rgba(200,169,110,.05);
  border-right: 1px solid rgba(200,169,110,.05);
  transition: background var(--dur);
}
.info-grid > div:hover { background: var(--gold-bg); }
.info-grid > div:nth-child(even) { border-right: none; }
.info-grid > div:nth-last-child(-n+2) { border-bottom: none; }
.info-grid dt {
  font-family: 'DM Mono', monospace;
  font-size: .52rem; letter-spacing: .17em; text-transform: uppercase;
  color: rgba(200,169,110,.48); margin-bottom: .16rem;
}
.info-grid dd { font-size: .83rem; color: rgba(230,223,211,.72); line-height: 1.45; }

/* scroll reveal */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.on { opacity: 1; transform: translateY(0); }

/* HERO */
.hero {
  min-height: 100svh; display: grid; grid-template-columns: 54% 46%;
  position: relative; overflow: hidden;
}

.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 62% at 7% 52%, rgba(18,55,115,.15) 0%, transparent 55%),
    radial-gradient(ellipse 35% 42% at 82% 18%, rgba(200,169,110,.07) 0%, transparent 52%),
    radial-gradient(ellipse 40% 40% at 60% 80%, rgba(18,55,115,.05) 0%, transparent 50%),
    linear-gradient(145deg, #06090f 0%, #08111e 55%, #04080e 100%);
}

.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200,169,110,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,169,110,.02) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.hero-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: .4; pointer-events: none; mix-blend-mode: overlay;
}

.hero-glow {
  position: absolute; top: 40%; left: 22%;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(18,55,115,.07) 0%, transparent 65%);
  animation: glow-pulse 10s ease-in-out infinite;
  pointer-events: none;
}
.hero-glow-2 {
  top: 60%; left: 60%; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(200,169,110,.04) 0%, transparent 65%);
  animation-delay: -5s; animation-duration: 13s;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(1.08); }
}

.hero-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 2.5rem 5rem var(--px);
  animation: fadeUp .9s .1s var(--ease) both;
}

/* hero eyebrow pill */
.hero-eyebrow { margin-bottom: 1.4rem; }
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .57rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  padding: .3rem .78rem; border-radius: 100px;
  background: rgba(78,202,136,.07); border: 1px solid rgba(78,202,136,.2);
  color: rgba(100,210,155,.8);
  font-family: 'DM Mono', monospace;
}
.pulse-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #4eca88; flex-shrink: 0;
  animation: pulse-badge 2.2s ease infinite;
}

.overline {
  display: flex; align-items: center; gap: .75rem;
  font-family: 'DM Mono', monospace;
  font-size: .57rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.5rem;
}
.overline-bar { width: 22px; height: 1px; background: var(--gold); flex-shrink: 0; }

h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3.2rem, 5.2vw, 5.6rem);
  font-weight: 300; line-height: 1.0; color: var(--white);
  letter-spacing: -.01em; margin-bottom: .5rem;
}
h1 em { font-style: italic; color: var(--gold); font-weight: 400; }

.hero-role {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(.95rem, 1.35vw, 1.1rem);
  color: rgba(230,223,211,.6); margin-bottom: 1.25rem; font-weight: 300;
}
.hero-bio {
  font-size: .9rem; color: rgba(230,223,211,.55);
  max-width: 440px; line-height: 1.95; font-weight: 300;
}
.hero-btns { display: flex; gap: .7rem; flex-wrap: wrap; }

/* hero visual */
.hero-visual {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: 4rem var(--px) 4rem 1.5rem;
  animation: fadeUp .9s .28s var(--ease) both;
}

.portrait-wrap { position: relative; width: min(295px, 88%); }

.portrait-ring {
  position: absolute; inset: -12px;
  border: 1px solid var(--gold-line); border-radius: calc(var(--r) + 4px);
  pointer-events: none;
  animation: ring-breathe 6s ease-in-out infinite;
}
.portrait-ring-2 {
  inset: -22px; border-color: rgba(200,169,110,.05);
  animation-delay: -3s; animation-duration: 8s;
}
@keyframes ring-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.portrait-wrap img {
  width: 100%; border-radius: var(--r);
  filter: contrast(1.04) saturate(.95);
}

.portrait-badge {
  position: absolute; bottom: -15px; right: -15px; z-index: 2;
  background: var(--gold); color: var(--bg);
  padding: .65rem 1rem; border-radius: var(--r-sm);
  font-size: .55rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.75;
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
  font-family: 'DM Mono', monospace;
}
.portrait-badge i { margin-bottom: .12rem; }

/* floating cards */
.float-card {
  position: absolute;
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .85rem;
  background: rgba(6,9,15,.9); backdrop-filter: blur(16px);
  border: 1px solid var(--gold-line); border-radius: var(--r-sm);
  font-size: .6rem; font-weight: 500; color: var(--gold-hi);
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.float-card i { font-size: .7rem; color: var(--gold); }
.float-card-1 {
  top: 20%; left: -20px;
  animation: float-a 5s ease-in-out infinite;
}
.float-card-2 {
  bottom: 22%; right: -10px;
  animation: float-b 6.5s ease-in-out infinite;
}
@keyframes float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes float-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* scroll cue */
.scroll-cue {
  position: absolute; bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  font-family: 'DM Mono', monospace;
  font-size: .5rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted); z-index: 5;
  animation: fadeUp .9s .8s var(--ease) both;
  transition: color var(--dur);
}
.scroll-cue i { animation: bounce 2s ease-in-out infinite; font-size: .65rem; }
.scroll-cue:hover { color: var(--gold); }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

/* STATS BAR */
.statsbar {
  display: flex; justify-content: space-around; align-items: center;
  flex-wrap: wrap; gap: 1.2rem;
  padding: 2rem var(--px);
  background: linear-gradient(90deg, #09111e, #07101a, #09111e);
  border-top: 1px solid rgba(200,169,110,.05);
  border-bottom: 1px solid rgba(200,169,110,.05);
  position: relative; overflow: hidden;
}
.statsbar::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(200,169,110,.02), transparent);
}
.stat { text-align: center; }
.stat-n {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem; font-weight: 400; color: var(--gold); line-height: 1;
}
.stat span {
  display: block; font-size: .52rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted); margin-top: .3rem;
  font-family: 'DM Mono', monospace;
}
.stat-div { width: 1px; height: 28px; background: rgba(200,169,110,.1); }

/* SKILLS */
.skills-grid { display: grid; grid-template-columns: 1fr 320px; gap: 2.8rem; align-items: start; }
.skill-cards { display: flex; flex-direction: column; gap: .85rem; }

.skill-card {
  padding: 1.35rem 1.6rem;
  background: var(--bg-card); border: 1px solid var(--gold-line); border-radius: var(--r);
  position: relative; overflow: hidden;
  transition: all var(--dur) var(--ease);
}
.skill-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--gold), var(--gold-dim));
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur) var(--ease);
}
.skill-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(200,169,110,.03), transparent);
  opacity: 0; transition: opacity var(--dur);
}
.skill-card:hover { border-color: rgba(200,169,110,.28); transform: translateX(6px); box-shadow: -4px 0 20px rgba(200,169,110,.05); }
.skill-card:hover::before { transform: scaleY(1); }
.skill-card:hover::after { opacity: 1; }

.sc-top { display: flex; align-items: center; gap: .78rem; margin-bottom: .68rem; }
.sc-icon {
  width: 35px; height: 35px; flex-shrink: 0; border-radius: var(--r-sm);
  background: var(--gold-bg); border: 1px solid var(--gold-line);
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; color: var(--gold);
  transition: all var(--dur) var(--ease);
}
.skill-card:hover .sc-icon { background: rgba(200,169,110,.14); border-color: rgba(200,169,110,.3); }
.sc-top h3 { font-size: .95rem; font-weight: 600; color: var(--white); }
.sc-num {
  margin-left: auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem; font-weight: 300; color: rgba(200,169,110,.07);
  line-height: 1; user-select: none;
}
.skill-card p { font-size: .83rem; color: var(--text-muted); line-height: 1.75; }

.skills-side { display: flex; flex-direction: column; gap: .9rem; }

/* language proficiency */
.proficiency-card {
  padding: 1.4rem 1.5rem;
  background: var(--bg-card); border: 1px solid var(--gold-line); border-radius: var(--r);
}
.prof-title {
  font-family: 'DM Mono', monospace;
  font-size: .55rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-dim); margin-bottom: 1rem;
}
.prof-item {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: .7rem;
}
.prof-item:last-child { margin-bottom: 0; }
.prof-lang { font-size: .78rem; color: var(--text); width: 58px; flex-shrink: 0; }
.prof-bar {
  flex: 1; height: 3px;
  background: rgba(255,255,255,.06); border-radius: 2px;
  overflow: hidden;
}
.prof-fill {
  height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transition: width 1.2s var(--ease);
}
.prof-fill.animated { width: var(--w); }
.prof-level {
  font-family: 'DM Mono', monospace;
  font-size: .52rem; letter-spacing: .1em;
  color: var(--gold-dim); width: 52px; text-align: right; flex-shrink: 0;
}

/* PROJECTS */
.project-list { display: flex; flex-direction: column; }
.project {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; align-items: center;
  padding: 3rem 0; border-bottom: 1px solid rgba(200,169,110,.055);
}
.project:last-child { border-bottom: none; }
.project-flip .proj-media { order: 2; }
.project-flip .proj-body { order: 1; }
.proj-media video {
  width: 100%; border-radius: var(--r);
  border: 1px solid var(--gold-line); background: #000; display: block;
  transition: border-color var(--dur);
}
.proj-media video:hover { border-color: rgba(200,169,110,.3); }
.proj-img-wrap { margin: 0; }
.proj-img { width: 100%; height: auto; display: block; }
.proj-tag {
  font-family: 'DM Mono', monospace;
  font-size: .56rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .5rem; font-weight: 400;
}
.proj-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem; font-weight: 300; color: var(--white);
  margin-bottom: .65rem; line-height: 1.2;
}
.proj-body p { font-size: .87rem; color: var(--text-sub); line-height: 1.9; font-weight: 300; }

/* ACHIEVEMENTS */
.ach-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; align-items: center;
  padding: 2.4rem;
  background: var(--bg-card); border: 1px solid var(--gold-line); border-radius: var(--r);
  position: relative; overflow: hidden;
}
.ach-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(18,55,115,.07), transparent 60%);
  pointer-events: none;
}
.ach-hero::after {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,169,110,.18), transparent);
}

.ach-fig { position: relative; }
.ach-fig img:first-child {
  width: 100%; border-radius: var(--r-sm); border: 1px solid var(--gold-line);
}
.cert-float {
  position: absolute; bottom: -12px; right: -12px; width: 50%;
  border-radius: var(--r-sm); border: 2px solid var(--gold) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}

.badge {
  display: inline-flex; align-items: center; gap: .38rem;
  font-family: 'DM Mono', monospace;
  font-size: .56rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  padding: .28rem .75rem; border-radius: 100px; margin-bottom: .85rem;
}
.badge-gold   { background: rgba(200,169,110,.14); color: var(--gold-hi); border: 1px solid rgba(200,169,110,.28); }
.badge-silver { background: rgba(148,172,200,.1); color: #9fb5cc; border: 1px solid rgba(148,172,200,.22); }
.badge-bronze { background: rgba(170,108,58,.12); color: #c07843; border: 1px solid rgba(170,108,58,.25); }

.ach-hero-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem; font-weight: 300; color: var(--white);
  margin-bottom: .3rem;
}
.ach-org {
  font-family: 'DM Mono', monospace;
  font-size: .58rem; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(200,169,110,.5); margin-bottom: .8rem;
}

.ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.ach-card {
  background: var(--bg-card); border: 1px solid var(--gold-line);
  border-radius: var(--r); overflow: hidden;
  transition: all var(--dur) var(--ease);
}
.ach-card:hover {
  border-color: rgba(200,169,110,.3);
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(0,0,0,.22);
}
.ach-card figure img { width: 100%; height: auto; display: block; }
.ach-body { padding: .85rem 1.05rem; }
.ach-body h4 { font-size: .9rem; font-weight: 600; color: var(--white); margin: .38rem 0 .22rem; }
.ach-body p { font-size: .78rem; color: var(--text-muted); line-height: 1.65; }

.cert-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cert-card {
  background: var(--bg-card); border: 1px solid var(--gold-line);
  border-radius: var(--r); overflow: hidden;
  transition: all var(--dur) var(--ease);
}
.cert-card:hover { border-color: rgba(200,169,110,.3); transform: translateY(-3px); }
.cert-card img { width: 100%; height: auto; display: block; }
.cert-card figcaption {
  padding: .5rem .75rem; font-size: .57rem; color: var(--text-muted);
  text-align: center; border-top: 1px solid rgba(200,169,110,.055);
  letter-spacing: .06em;
}

/* NSRI */
.nsri-banner {
  display: flex; align-items: center; gap: 2rem;
  padding: 2.2rem 2.6rem;
  background: var(--bg-card); border: 1px solid var(--gold-line); border-radius: var(--r);
  position: relative; overflow: hidden;
}
.nsri-banner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(18,55,115,.06), transparent);
  pointer-events: none;
}
.nsri-logo { height: 64px; flex-shrink: 0; filter: drop-shadow(0 0 14px rgba(200,169,110,.14)); }
.nsri-banner h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem; font-weight: 300; color: var(--white); margin-bottom: .38rem;
}

.nsri-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ns {
  text-align: center; padding: 1.6rem .8rem;
  background: var(--bg-card); border: 1px solid var(--gold-line); border-radius: var(--r);
  transition: all var(--dur) var(--ease);
}
.ns:hover {
  border-color: rgba(200,169,110,.3); background: var(--gold-bg);
  transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.ns-n {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem; font-weight: 400; color: var(--gold); line-height: 1;
}
.ns span {
  display: block; font-family: 'DM Mono', monospace;
  font-size: .52rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); margin-top: .4rem;
}

.role-box {
  padding: 1.85rem 2.1rem;
  background: rgba(200,169,110,.04); border: 1px solid var(--gold-line); border-radius: var(--r);
  position: relative;
}
.role-box::after {
  content: ''; position: absolute; top: 0; left: 2rem; right: 2rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .15;
}

.pathways { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.pathway {
  padding: 2rem; border: 1px solid var(--gold-line); border-radius: var(--r);
  background: var(--bg-card); position: relative; overflow: hidden;
  transition: all var(--dur) var(--ease);
}
.pathway:hover {
  border-color: rgba(200,169,110,.3);
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(0,0,0,.18);
}
.pw-num {
  position: absolute; top: .7rem; right: 1.2rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.2rem; font-weight: 300;
  color: rgba(200,169,110,.055); line-height: 1; user-select: none;
}
.pathway h4 { font-size: 1rem; font-weight: 600; color: var(--white); margin-bottom: .5rem; }
.pathway p { font-size: .84rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 1.25rem; }
.text-link {
  font-family: 'DM Mono', monospace;
  font-size: .58rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); display: inline-flex; align-items: center; gap: .42rem;
  transition: gap var(--dur), color var(--dur);
}
.text-link:hover { gap: .78rem; color: var(--gold-hi); }

/* EDUCATION / TIMELINE */
.edu-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3.8rem; align-items: start; }
.edu-side { display: flex; flex-direction: column; gap: 1rem; }

.timeline { padding-left: 1.6rem; position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 50px; width: 1px;
  background: linear-gradient(to bottom, var(--gold), rgba(200,169,110,.04));
}
.tl-item { position: relative; padding-left: 1.75rem; margin-bottom: 2.5rem; }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot {
  position: absolute; left: -2.2rem; top: 6px; width: 8px; height: 8px;
  background: var(--gold); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(200,169,110,.1), 0 0 12px rgba(200,169,110,.3);
}
.tl-date {
  font-family: 'DM Mono', monospace;
  font-size: .56rem; font-weight: 400; color: var(--gold);
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: .3rem;
}
.tl-item h3 { font-size: 1.02rem; font-weight: 600; color: var(--white); margin-bottom: .22rem; }
.tl-org { font-size: .8rem; color: rgba(230,223,211,.5); font-style: italic; margin-bottom: .48rem; }
.tl-item p:last-child { font-size: .83rem; color: var(--text-muted); line-height: 1.8; }

/* GALLERY / MASONRY */
.masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
.m-col { display: flex; flex-direction: column; gap: 1rem; }

.gitem {
  position: relative; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--gold-line); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.gitem:hover {
  border-color: rgba(200,169,110,.35);
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
  transform: translateY(-3px);
}
.gitem:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gitem img, .gitem video { width: 100%; display: block; }
.gcap {
  padding: .5rem .75rem;
  background: rgba(5,8,15,.78); backdrop-filter: blur(8px);
  font-size: .57rem; color: var(--text-muted);
  letter-spacing: .06em; border-top: 1px solid rgba(200,169,110,.05);
}

/* lightbox (gallery click) */
.lb {
  position: fixed; inset: 0; background: rgba(2,4,10,.96);
  z-index: 9800; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .28s var(--ease);
  backdrop-filter: blur(8px);
}
.lb.open { opacity: 1; pointer-events: all; }
.lb-panel { position: relative; max-width: min(1080px, 96vw); max-height: 92vh; }
#lb-content img, #lb-content video {
  max-width: 100%; max-height: 88vh; object-fit: contain;
  border-radius: var(--r); border: 1px solid var(--gold-line);
}
.lb-close {
  position: absolute; top: -2rem; right: 0;
  background: none; border: none; color: var(--text-muted);
  font-size: 1.2rem; cursor: pointer; padding: .25rem .38rem;
  transition: color var(--dur);
}
.lb-close:hover { color: var(--gold); }

/* IN-PAGE VIEWER  (double-click any image/video → floating window) */
.viewer {
  position: fixed; inset: 0; z-index: 9900;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0;
  transition: opacity .25s var(--ease);
}
.viewer:not([hidden]) { pointer-events: all; opacity: 1; }
.viewer[hidden] { display: none; }

.viewer-backdrop {
  position: absolute; inset: 0;
  background: rgba(2,4,10,.72); backdrop-filter: blur(6px);
  cursor: pointer;
}

.viewer-box {
  position: relative; z-index: 1;
  width: min(640px, 92vw);
  max-height: 82vh;
  background: rgba(6,9,15,.97);
  border: 1px solid var(--gold-line);
  border-radius: var(--r);
  box-shadow: 0 32px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(200,169,110,.06);
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: viewer-in .22s var(--ease) both;
}
@keyframes viewer-in {
  from { opacity: 0; transform: scale(.94) translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.viewer-close {
  position: absolute; top: .6rem; right: .7rem; z-index: 2;
  width: 28px; height: 28px;
  background: rgba(6,9,15,.85); backdrop-filter: blur(8px);
  border: 1px solid var(--gold-line); border-radius: 50%;
  color: var(--text-muted); font-size: .8rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.viewer-close:hover { color: var(--gold); border-color: rgba(200,169,110,.45); background: var(--gold-bg); }

.viewer-content { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; }
.viewer-content img {
  width: 100%; height: auto; display: block;
  object-fit: contain; border-radius: 0;
}
.viewer-content video {
  width: 100%; max-height: 72vh; display: block;
  background: #000;
}

/* cursor hints */
img { cursor: default; }
.mcard img, .gitem img, .ach-card img, .cert-card img,
.ach-fig img, .hob-media img, .proj-media img { cursor: zoom-in; }

/* VIDEO OVERLAY (play/pause button) */
.vid-wrap {
  position: relative; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--gold-line); background: #000;
  transition: border-color var(--dur);
}
.vid-wrap:hover { border-color: rgba(200,169,110,.3); }
.vid-wrap video { width: 100%; display: block; }

/* overlay button */
.vid-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,9,15,.35);
  cursor: pointer; border: none;
  transition: background var(--dur);
  z-index: 2;
}
.vid-btn:hover { background: rgba(6,9,15,.22); }
.vid-btn.hidden { opacity: 0; pointer-events: none; }

.vid-btn-icon {
  width: 52px; height: 52px;
  background: rgba(6,9,15,.82); backdrop-filter: blur(8px);
  border: 1.5px solid rgba(200,169,110,.45);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1.1rem;
  transition: transform var(--dur) var(--spring), background var(--dur), border-color var(--dur);
  pointer-events: none;
}
.vid-btn:hover .vid-btn-icon {
  transform: scale(1.1);
  background: rgba(200,169,110,.15);
  border-color: var(--gold);
}

/* proj-media with vid-wrap gets no extra border */
.proj-media .vid-wrap { border-radius: var(--r); }

/* hobby media vid-wrap fills height */
.hob-media .vid-wrap { height: 100%; border-radius: 0; border: none; }
.hob-media .vid-wrap video { height: 100%; object-fit: cover; }
.hob-media .vid-btn-icon { width: 46px; height: 46px; font-size: 1rem; }

/* HOBBIES */
.hobbies { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.hobby {
  border: 1px solid var(--gold-line); border-radius: var(--r);
  overflow: hidden; background: var(--bg-card); display: grid;
  transition: all var(--dur) var(--ease);
}
.hobby:hover { border-color: rgba(200,169,110,.3); box-shadow: 0 14px 32px rgba(0,0,0,.2); }
.hobby-wide { grid-column: span 2; grid-template-columns: 1fr 1fr; }
.hob-media video, .hob-media img {
  width: 100%; min-height: 200px; height: 100%;
  object-fit: cover; display: block;
}
.hob-body {
  padding: 1.75rem; display: flex; flex-direction: column; justify-content: center;
}
.hob-ico { font-size: 1.3rem; color: var(--gold); margin-bottom: .65rem; }
.hob-body h3 { font-size: 1.02rem; font-weight: 600; color: var(--white); margin-bottom: .42rem; }
.hob-body p { font-size: .85rem; color: var(--text-muted); line-height: 1.82; }

/* GOALS */
.goals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.goal {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.5rem 1.6rem;
  background: var(--bg-card); border: 1px solid var(--gold-line); border-radius: var(--r);
  transition: all var(--dur) var(--ease);
}
.goal:hover {
  border-color: rgba(200,169,110,.3); background: var(--bg-card-h);
  transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.goal-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--gold-bg); border: 1px solid var(--gold-line);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; color: var(--gold);
  transition: all var(--dur) var(--spring);
}
.goal:hover .goal-ico { background: rgba(200,169,110,.14); transform: scale(1.1) rotate(-5deg); }
.goal h3 { font-size: .93rem; font-weight: 600; color: var(--white); margin-bottom: .3rem; }
.goal p { font-size: .82rem; color: var(--text-muted); line-height: 1.72; }

/* CONTACTS */
.contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ccard {
  display: flex; align-items: flex-start; gap: .92rem;
  padding: 1.5rem 1.55rem;
  background: var(--bg-card); border: 1px solid var(--gold-line); border-radius: var(--r);
  position: relative; overflow: hidden;
  transition: all var(--dur) var(--ease);
}
.ccard::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dim), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.ccard:hover {
  border-color: rgba(200,169,110,.3); background: var(--bg-card-h);
  transform: translateY(-5px); box-shadow: 0 16px 32px rgba(0,0,0,.2);
}
.ccard:hover::after { transform: scaleX(1); }
.cico {
  width: 38px; height: 38px; flex-shrink: 0;
  background: var(--gold-bg); border: 1px solid var(--gold-line); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; color: var(--gold);
  transition: all var(--dur) var(--ease);
}
.ccard:hover .cico { background: rgba(200,169,110,.14); }
.c-lbl {
  display: block; font-family: 'DM Mono', monospace;
  font-size: .52rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(200,169,110,.48); margin-bottom: .16rem;
}
.c-val { display: block; font-size: .82rem; color: var(--text); word-break: break-all; margin-bottom: .13rem; }
.c-note { display: block; font-size: .7rem; color: var(--text-muted); }

/* FOOTER */
footer {
  background: #040810; border-top: 1px solid rgba(200,169,110,.055);
  padding: 2.5rem var(--px);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1.2rem;
}
.ft-left {
  display: flex; flex-direction: column; gap: .16rem;
  font-size: .58rem; color: var(--text-muted); letter-spacing: .08em; line-height: 1.9;
}
.ft-left strong { color: var(--gold-hi); font-size: .63rem; }
.ft-social { display: flex; gap: .5rem; align-items: center; }
.ft-social a {
  width: 30px; height: 30px; border: 1px solid var(--gold-line); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; color: var(--text-muted);
  transition: all var(--dur) var(--ease);
}
.ft-social a:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-bg); transform: translateY(-2px); }
.ft-right {
  display: flex; flex-direction: column; gap: .16rem;
  font-size: .54rem; color: rgba(106,130,152,.28);
  letter-spacing: .08em; text-align: right; line-height: 1.9;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  .skills-grid { grid-template-columns: 1fr 290px; }
  .cert-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .ach-grid { grid-template-columns: repeat(2, 1fr); }
  .nsri-stats { grid-template-columns: repeat(4, 1fr); }
  .contacts { grid-template-columns: repeat(2, 1fr); }
  .edu-layout { grid-template-columns: 1fr 250px; gap: 2.5rem; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-content { padding: 4.5rem var(--px) 2rem; }
  .hero-visual { padding: 1rem var(--px) 4rem; }
  .float-card { display: none; }
  .scroll-cue { display: none; }
  .split-2 { grid-template-columns: 1fr; gap: 2rem; }
  .skills-grid { grid-template-columns: 1fr; }
  .project, .project-flip { grid-template-columns: 1fr; gap: 1.5rem; }
  .project-flip .proj-media, .project-flip .proj-body { order: unset; }
  .ach-hero { grid-template-columns: 1fr; }
  .cert-float { display: none; }
  .nsri-stats { grid-template-columns: repeat(2, 1fr); }
  .g2 { grid-template-columns: 1fr; }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .pathways { grid-template-columns: 1fr; }
  .edu-layout { grid-template-columns: 1fr; }
  .masonry { grid-template-columns: repeat(2, 1fr); }
  .hobbies { grid-template-columns: 1fr; }
  .hobby-wide { grid-column: span 1; grid-template-columns: 1fr; }
  .goals { grid-template-columns: 1fr; }
  .contacts { grid-template-columns: 1fr; }
  footer { flex-direction: column; align-items: flex-start; }
  .ft-right { text-align: left; }
  .statsbar { gap: .8rem; }
  .stat-div { display: none; }
}
@media (max-width: 600px) {
  html { font-size: 15px; }
  h1 { font-size: 2.8rem; }
  .ach-grid { grid-template-columns: 1fr; }
  .cert-strip { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: 1fr; }
  .masonry { grid-template-columns: 1fr; }
  .nsri-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-content { padding: 4rem var(--px) 1.5rem; }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* print styles */
@media print {
  .sidenav, .nav-btn, .nav-overlay, #prog, .scroll-cue,
  .float-card, .portrait-ring { display: none !important; }
  .wrap { transform: none !important; }
  body { background: #fff; color: #000; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .75em; }
  section { padding: 1.5rem 2rem; }
  .hero { min-height: auto; grid-template-columns: 1fr 1fr; }
  .bg-alt { background: #f9f9f9; }
}