/* ============================================================
   TOKENS — warm beige / brown palette (light) + espresso dark
   ============================================================ */
:root{
  /* rgb triplets so alpha tints follow the theme */
  --ink-rgb:  43,33,24;     /* foreground tint source */
  --bg-rgb:   237,227,211;  /* background tint source */
  --soft-rgb: 243,236,223;  /* soft surface tint source */

  --void:        #EDE3D3;   /* background — warm beige */
  --void-soft:   #F3ECDF;   /* lighter card surface */
  --night:       #E3D2B6;   /* card / alt section bg — deeper tan */
  --night-2:     #D6C09C;   /* border tint */
  --paper:       #2B2118;   /* primary text — deep espresso brown */
  --slate:       #5C4A38;   /* secondary text — warm brown-grey */
  --slate-dim:   #71604D;   /* tertiary / labels — muted tan */
  --signal:      #A44926;   /* primary accent — burnt terracotta */
  --signal-soft: #903D20;   /* accent hover */
  --signal-dim:  rgba(181,85,44,0.16);
  --resolve:     #596341;   /* rare highlight — olive */
  --on-signal:   #F3ECDF;   /* text on terracotta buttons */

  --line:        rgba(var(--ink-rgb),0.1);
  --line-strong: rgba(var(--ink-rgb),0.16);

  --shadow-sm: 0 1px 2px rgba(43,33,24,0.05), 0 2px 8px rgba(43,33,24,0.05);
  --shadow-md: 0 2px 4px rgba(43,33,24,0.06), 0 12px 32px -8px rgba(43,33,24,0.16);
  --shadow-lg: 0 4px 8px rgba(43,33,24,0.06), 0 24px 48px -12px rgba(43,33,24,0.22);

  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body:    "Inter", -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", monospace;

  --container: 1180px;
  --radius: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"]{
  --ink-rgb:  237,227,211;
  --bg-rgb:   26,19,13;
  --soft-rgb: 42,32,23;

  --void:        #1A130D;
  --void-soft:   #251C13;
  --night:       #211812;
  --night-2:     #3D2F21;
  --paper:       #EDE3D3;
  --slate:       #C2B098;
  --slate-dim:   #B09D86;
  --signal:      #D06A3B;
  --signal-soft: #E0865A;
  --signal-dim:  rgba(208,106,59,0.22);
  --resolve:     #93A075;
  --on-signal:   #1A130D;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.3), 0 12px 32px -8px rgba(0,0,0,0.5);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.3), 0 24px 48px -12px rgba(0,0,0,0.6);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  background:var(--void);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .35s var(--ease), color .35s var(--ease);
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }

::selection{ background:var(--signal); color:var(--void); }

/* warm-toned scrollbar */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--void); }
::-webkit-scrollbar-thumb{
  background:var(--night-2); border-radius:8px;
  border:3px solid var(--void);
}
::-webkit-scrollbar-thumb:hover{ background:var(--slate-dim); }

.mono{ font-family:var(--font-mono); letter-spacing:0.04em; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--signal); color:var(--on-signal); padding:8px 16px; z-index:200;
}
.skip-link:focus{ left:12px; top:12px; }

:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

/* subtle paper-grain texture, very low opacity, fixed */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:repeating-linear-gradient(
    0deg, rgba(var(--ink-rgb),0.035) 0px, rgba(var(--ink-rgb),0.035) 1px,
    transparent 1px, transparent 3px
  );
  opacity:0.4;
  mix-blend-mode:multiply;
}
[data-theme="dark"] .grain{
  mix-blend-mode:normal;
  opacity:0.25;
}

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:110;
  background:linear-gradient(to right, var(--signal), var(--resolve));
  transform-origin:left;
  transform:scaleX(0);
  pointer-events:none;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 28px;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.92rem;
  line-height:1;
  transition:transform .35s var(--ease), background .35s var(--ease),
             border-color .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
}
.btn svg{ flex:0 0 auto; transition:transform .35s var(--ease); }

.btn-primary{
  background:var(--signal);
  color:var(--on-signal);
  box-shadow:0 2px 6px rgba(181,85,44,0.25), 0 8px 24px -6px rgba(181,85,44,0.35);
}
.btn-primary:hover{
  transform:translateY(-2px);
  background:var(--signal-soft);
  box-shadow:0 4px 10px rgba(181,85,44,0.28), 0 14px 32px -6px rgba(181,85,44,0.42);
}
.btn-primary:hover svg{ transform:translateY(2px); }

.btn-ghost{
  border:1px solid rgba(var(--ink-rgb),0.22);
  color:var(--paper);
  background:rgba(var(--soft-rgb),0.4);
}
.btn-ghost:hover{
  border-color:var(--signal); color:var(--signal); transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.btn-ghost:hover svg{ transform:translateY(2px); }

/* small round icon button (theme toggle, copy email) */
.icon-btn{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(var(--soft-rgb),0.4);
  border:1px solid rgba(var(--ink-rgb),0.22);
  color:var(--paper);
  cursor:pointer; flex:0 0 auto;
  transition:border-color .25s var(--ease), color .25s var(--ease),
             transform .3s var(--ease), box-shadow .25s var(--ease);
}
.icon-btn:hover{
  border-color:var(--signal); color:var(--signal);
  transform:translateY(-2px); box-shadow:var(--shadow-sm);
}

.theme-toggle .icon-sun{ display:none; }
.theme-toggle .icon-moon{ display:block; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(var(--bg-rgb),0.6);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(var(--ink-rgb),0.08);
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.scrolled{
  background:rgba(var(--bg-rgb),0.92);
  box-shadow:0 1px 0 rgba(var(--ink-rgb),0.06), 0 8px 24px -12px rgba(0,0,0,0.2);
}
.nav-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:18px 28px;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
}
.logo{
  font-family:var(--font-mono); font-weight:600; font-size:1.05rem;
  color:var(--paper); letter-spacing:0.06em;
  display:inline-flex; align-items:center; gap:10px;
  transition:color .25s var(--ease);
}
.logo::before{
  content:""; width:8px; height:8px; border-radius:2px;
  background:var(--signal);
  transform:rotate(45deg);
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.logo:hover::before{ transform:rotate(225deg); background:var(--resolve); }

.nav-links{ display:flex; gap:32px; flex:1; justify-content:center; }
.nav-links a{
  font-size:0.92rem; color:var(--slate); font-weight:500;
  position:relative; transition:color .25s var(--ease);
}
.nav-links a:hover{ color:var(--paper); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; border-radius:2px;
  background:var(--signal); transition:width .3s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-links a.active{ color:var(--paper); }
.nav-links a.active::after{ width:100%; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{
  width:22px; height:2px; background:var(--paper); border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-mobile{
  display:none;
  flex-direction:column;
  gap:18px;
  padding:6px 28px 26px;
  background:rgba(var(--bg-rgb),0.98);
  border-bottom:1px solid rgba(var(--ink-rgb),0.08);
}
.nav-mobile a{ color:var(--slate); font-size:1rem; }
.nav-mobile a:not(.btn):hover{ color:var(--signal); }
.nav-mobile .btn{ justify-content:center; margin-top:6px; }
.nav-mobile.open{ display:flex; }

@media (max-width: 860px){
  .nav-links, .nav-resume{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:140px 28px 100px;
  overflow:hidden;
}

/* static warm glows layered behind the grid */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(560px 420px at 18% 22%, rgba(181,85,44,0.11), transparent 68%),
    radial-gradient(640px 480px at 84% 74%, rgba(107,115,83,0.13), transparent 68%),
    radial-gradient(400px 300px at 72% 14%, rgba(201,123,79,0.08), transparent 70%);
}
/* soft vignette so text sits on a calm centre */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 62% 54% at 50% 46%, var(--void) 0%, rgba(var(--bg-rgb),0.72) 55%, transparent 100%);
}

.hero-canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  opacity:0.5;
}

.hero-content{ position:relative; z-index:2; max-width:820px; }

.hero-badge{
  display:inline-flex; align-items:center; gap:9px;
  font-size:0.68rem; font-weight:500; color:var(--resolve);
  padding:7px 15px; border-radius:999px;
  border:1px solid rgba(107,115,83,0.45);
  background:rgba(107,115,83,0.09);
  margin-bottom:22px;
}
[data-theme="dark"] .hero-badge{
  border-color:rgba(147,160,117,0.45);
  background:rgba(147,160,117,0.1);
}
.badge-dot{
  width:7px; height:7px; border-radius:50%; background:var(--resolve);
  position:relative; flex:0 0 auto;
}
.badge-dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--resolve);
  animation:badgePulse 2.4s ease-out infinite;
}
@keyframes badgePulse{
  0%{ transform:scale(0.55); opacity:0.9; }
  70%{ transform:scale(1.35); opacity:0; }
  100%{ transform:scale(1.35); opacity:0; }
}

.eyebrow{
  font-size:0.78rem; color:var(--signal); margin-bottom:26px;
  font-weight:500;
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before, .eyebrow::after{
  content:""; height:1px; width:36px;
  background:linear-gradient(to right, transparent, var(--signal));
}
.eyebrow::after{ background:linear-gradient(to left, transparent, var(--signal)); }

.hero-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.6rem, 8vw, 5.6rem);
  line-height:1.02;
  letter-spacing:-0.02em;
  margin-bottom:26px;
}
.hero-title::after{
  content:"."; color:var(--signal);
}

.hero-sub{
  font-size:clamp(1.02rem, 1.6vw, 1.25rem);
  color:var(--slate);
  max-width:620px;
  margin:0 auto 42px;
  line-height:1.7;
  text-wrap:balance;
}

.hero-actions{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
}

/* corner frame marks — quiet, technical */
.hero-mark{
  position:absolute; z-index:2; width:26px; height:26px; pointer-events:none;
  border-color:rgba(var(--ink-rgb),0.22); border-style:solid; border-width:0;
}
.hero-mark-tl{ top:110px; left:36px;  border-top-width:1px; border-left-width:1px; }
.hero-mark-tr{ top:110px; right:36px; border-top-width:1px; border-right-width:1px; }
.hero-mark-bl{ bottom:44px; left:36px;  border-bottom-width:1px; border-left-width:1px; }
.hero-mark-br{ bottom:44px; right:36px; border-bottom-width:1px; border-right-width:1px; }

@media (max-width:700px){
  .hero-mark{ display:none; }
}

/* Content stays readable when scripts or animation libraries are unavailable. */
[data-resolve]{ opacity:1; }


/* ============================================================
   SECTIONS — shared
   ============================================================ */
.section{ padding:120px 0; position:relative; z-index:2; scroll-margin-top:84px; }
.section-alt{ background:var(--night); border-top:1px solid rgba(var(--ink-rgb),0.08); border-bottom:1px solid rgba(var(--ink-rgb),0.08); }

.section-label{
  font-size:0.78rem; color:var(--signal); margin-bottom:18px; font-weight:500;
  display:inline-flex; align-items:center; gap:14px;
}
.section-label::before{
  content:""; width:34px; height:1px; background:var(--signal); opacity:0.7;
}
.section-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  max-width:760px;
  margin-bottom:8px;
}

.reveal{ opacity:0; transform:translateY(28px); }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{
  display:grid; grid-template-columns:1.5fr 1fr; gap:64px; align-items:start;
}
.lead{
  font-size:1.08rem; color:var(--slate); margin-top:22px; max-width:620px;
  text-align:left;
  line-height:1.85;
}
.lead strong{ color:var(--paper); font-weight:600; }

.about-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  margin-top:6px;
}
.stat{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:8px;
  padding:24px 22px;
  background:linear-gradient(160deg, var(--void-soft), rgba(var(--soft-rgb),0.4));
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.stat::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right, var(--signal), transparent 70%);
  opacity:0; transition:opacity .3s var(--ease);
}
.stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.stat:hover::before{ opacity:1; }
.stat-label{ font-size:0.68rem; color:var(--slate-dim); }
.stat-value{ font-family:var(--font-display); font-size:2rem; font-weight:700; }
.stat-value small{ font-size:1rem; color:var(--slate); font-weight:500; }
.stat-value-sm{ font-size:1.02rem; font-weight:600; line-height:1.35; }

@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr; gap:40px; }
}

/* ============================================================
   SKILLS
   ============================================================ */
.skills-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:48px;
}
.skill-card{
  position:relative; overflow:hidden;
  padding:28px 26px;
  background:var(--void);
  border:1px solid rgba(var(--ink-rgb),0.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.skill-card::before{
  content:""; position:absolute; top:0; left:0; height:2px; width:100%;
  background:linear-gradient(to right, var(--signal), var(--resolve));
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.skill-card:hover{ border-color:var(--line-strong); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.skill-card:hover::before{ transform:scaleX(1); }
.skill-cat{
  font-size:0.72rem; color:var(--slate); margin-bottom:16px;
  display:flex; align-items:center; gap:9px;
}
.skill-cat::before{
  content:""; width:7px; height:7px; border-radius:2px;
  background:var(--signal); transform:rotate(45deg); flex:0 0 auto;
  opacity:0.85;
}

.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  font-family:var(--font-mono); font-size:0.74rem; color:var(--paper);
  padding:6px 12px; border-radius:999px;
  background:rgba(var(--ink-rgb),0.05); border:1px solid rgba(var(--ink-rgb),0.14);
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.tag:hover{
  border-color:var(--signal); background:var(--signal-dim); color:var(--signal);
}
.tags-sm .tag{ font-size:0.7rem; padding:5px 11px; }

@media (max-width:860px){
  .skills-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   EXPERIENCE / TIMELINE
   ============================================================ */
.timeline{ margin-top:56px; display:flex; flex-direction:column; }
.timeline-item{
  position:relative;
  display:grid; grid-template-columns:200px 1fr; gap:36px;
  padding:0 0 56px 34px;
}
.timeline-item:last-child{ padding-bottom:0; }

/* connecting rail */
.timeline-item::before{
  content:""; position:absolute; left:5px; top:10px; bottom:-10px; width:1px;
  background:linear-gradient(to bottom, var(--night-2), rgba(var(--ink-rgb),0.08));
}
.timeline-item:last-child::before{ display:none; }

/* node dot */
.timeline-item::after{
  content:""; position:absolute; left:0; top:6px;
  width:11px; height:11px; border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 0 4px var(--signal-dim), 0 0 0 1px rgba(181,85,44,0.3);
}

.timeline-date{ font-size:0.76rem; color:var(--signal); padding-top:2px; }
.timeline-role{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; margin-bottom:4px; }
.timeline-org{
  color:var(--slate); font-size:0.95rem; margin-bottom:18px;
  display:inline-flex; align-items:center; gap:8px;
}
.timeline-org::before{
  content:""; width:16px; height:1px; background:var(--slate-dim);
}
.timeline-list li{
  position:relative; padding-left:22px; margin-bottom:12px; color:var(--slate); font-size:0.96rem; line-height:1.65;
}
.timeline-list li::before{
  content:""; position:absolute; left:0; top:9px; width:7px; height:7px;
  border-radius:2px; background:var(--signal); transform:rotate(45deg);
  opacity:0.8;
}

@media (max-width:700px){
  .timeline-item{ grid-template-columns:1fr; gap:10px; padding-left:28px; }
}

/* ============================================================
   PROJECTS
   ============================================================ */
.projects{
  margin-top:50px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  counter-reset: project;
}
.project-card{
  position:relative; overflow:hidden;
  counter-increment: project;
  background:var(--void);
  border:1px solid rgba(var(--ink-rgb),0.14);
  border-radius:var(--radius); padding:30px;
  display:flex; flex-direction:column; gap:18px;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* accent spine */
.project-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; z-index:1;
  background:linear-gradient(to bottom, var(--signal), rgba(181,85,44,0.15));
  transition:background .35s var(--ease);
}
/* big ghost index number */
.project-card::after{
  content:"0" counter(project);
  position:absolute; top:12px; right:20px;
  font-family:var(--font-mono); font-size:2.2rem; font-weight:600;
  color:rgba(var(--ink-rgb),0.14);
  line-height:1;
  transition:color .35s var(--ease);
  pointer-events:none;
}
.project-card:hover{
  transform:translateY(-6px);
  border-color:rgba(var(--ink-rgb),0.26);
  box-shadow:var(--shadow-lg);
}
.project-card:hover::before{
  background:linear-gradient(to bottom, var(--resolve), rgba(107,115,83,0.15));
}
.project-card:hover::after{ color:var(--signal); }

/* decorative art band on top of each card */
.project-banner{
  margin:-30px -30px 0;
  height:92px;
  border-bottom:1px solid var(--line);
  background:rgba(var(--ink-rgb),0.035);
  overflow:hidden;
}
.project-banner svg{ width:100%; height:100%; display:block; }
.project-banner .art-signal{ stroke:var(--signal); }
.project-banner .art-signal-fill{ fill:var(--signal); }
.project-banner .art-resolve{ stroke:var(--resolve); }
.project-banner .art-resolve-fill{ fill:var(--resolve); }
.project-banner .art-dim{ stroke:var(--slate-dim); }
.project-banner .art-dim-fill{ fill:var(--slate-dim); }

.project-head{ padding-right:50px; }
.project-title{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; }
.project-kicker{ display:block; margin-top:6px; font-size:0.66rem; color:var(--slate-dim); }
.project-desc{ color:var(--slate); font-size:0.93rem; line-height:1.65; flex:1; }
.project-link{
  font-family:var(--font-mono); font-size:0.78rem; color:var(--signal);
  display:inline-block; width:fit-content;
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.project-link:hover{ color:var(--resolve); transform:translateX(4px); }

@media (max-width:1020px){
  .projects{ grid-template-columns:1fr; }
}

/* ============================================================
   EDUCATION & CERTS
   ============================================================ */
.education-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.edu-item{
  margin-top:34px; position:relative; padding-left:22px;
  border-left:2px solid var(--night-2);
  transition:border-color .3s var(--ease);
}
.edu-item:hover{ border-left-color:var(--signal); }
.edu-school{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; }
.edu-deg{ color:var(--slate); font-size:0.92rem; margin-top:4px; }
.edu-detail{ color:var(--slate-dim); font-size:0.86rem; margin-top:6px; }

.cert-heading{
  font-size:0.74rem; color:var(--slate); margin-top:46px; margin-bottom:22px;
  display:inline-flex; align-items:center; gap:12px;
}
.cert-heading::before{
  content:""; width:24px; height:1px; background:var(--signal); opacity:0.7;
}
.cert-list ul{ display:flex; flex-direction:column; gap:18px; }
.cert-list li{
  display:flex; flex-direction:column; gap:4px;
  padding:20px 22px;
  background:linear-gradient(160deg, var(--void-soft), rgba(var(--soft-rgb),0.4));
  border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.cert-list li:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.cert-name{ font-weight:600; font-size:0.95rem; }
.cert-meta{ font-size:0.66rem; color:var(--slate-dim); }
.cert-link{
  font-family:var(--font-mono); font-size:0.76rem; color:var(--signal); margin-top:6px;
  width:fit-content;
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.cert-link:hover{ color:var(--resolve); transform:translateX(4px); }
.cert-note{ color:var(--slate); font-size:0.86rem; margin-top:4px; }

@media (max-width:860px){
  .education-grid{ grid-template-columns:1fr; gap:30px; }
  .cert-heading{ margin-top:10px; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ text-align:center; padding-bottom:140px; position:relative; overflow:hidden; }
.contact::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(520px 380px at 50% 100%, rgba(181,85,44,0.09), transparent 70%),
    radial-gradient(420px 320px at 12% 30%, rgba(107,115,83,0.08), transparent 70%);
}
.contact-inner{ display:flex; flex-direction:column; align-items:center; position:relative; }
.contact-title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.8rem, 4vw, 2.8rem); max-width:680px; margin-bottom:14px; letter-spacing:-0.01em;
}
.contact-sub{ color:var(--slate); max-width:480px; margin-bottom:38px; }

.email-row{
  display:flex; align-items:center; gap:14px;
  margin-bottom:34px; position:relative;
}
.contact-email{
  font-family:var(--font-display); font-size:clamp(1.3rem,3vw,1.9rem); font-weight:600;
  color:var(--signal);
  position:relative;
  transition:color .3s var(--ease);
}
.contact-email::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:100%;
  background:linear-gradient(to right, var(--signal), var(--resolve));
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.contact-email:hover{ color:var(--signal-soft); }
.contact-email:hover::after{ transform:scaleX(1); }

.copy-toast{
  position:absolute; left:50%; top:-40px; transform:translateX(-50%) translateY(6px);
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.04em;
  color:var(--on-signal); background:var(--signal);
  padding:6px 14px; border-radius:999px;
  opacity:0; pointer-events:none; white-space:nowrap;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.copy-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.contact-links{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:34px; }
.contact-links a{
  color:var(--slate); font-size:0.9rem; font-weight:500;
  padding:10px 20px; border-radius:999px;
  border:1px solid var(--line-strong);
  background:rgba(var(--soft-rgb),0.4);
  transition:color .25s var(--ease), border-color .25s var(--ease),
             transform .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-links a:hover{
  color:var(--signal); border-color:var(--signal);
  transform:translateY(-2px); box-shadow:var(--shadow-sm);
}
.contact-loc{
  font-size:0.7rem; color:var(--slate-dim);
  display:inline-flex; align-items:center; gap:12px;
}
.contact-loc::before, .contact-loc::after{
  content:""; width:28px; height:1px; background:var(--night-2);
}

@media (max-width:600px){
  .email-row{ flex-direction:column; gap:12px; }
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.to-top{
  position:fixed; right:26px; bottom:26px; z-index:90;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--void-soft); color:var(--paper);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-md);
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .35s var(--ease), transform .35s var(--ease),
             visibility .35s, border-color .25s var(--ease), color .25s var(--ease);
}
.to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ border-color:var(--signal); color:var(--signal); transform:translateY(-2px); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ padding:30px 0 40px; border-top:1px solid rgba(var(--ink-rgb),0.1); position:relative; z-index:2; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:0.68rem; color:var(--slate-dim); }

@media (max-width:600px){
  .footer-inner{ flex-direction:column; gap:6px; }
}

/* ============================================================
   RESOLUTION / EDITORIAL SYSTEM
   Large type, open layouts, precise rules and contrasting fields.
   ============================================================ */
:root{ --container:1360px; --radius:4px; }
html{ color-scheme:light; }
html[data-theme="dark"]{ color-scheme:dark; }
body{ overflow-x:clip; }
::selection{ background:var(--signal); color:var(--on-signal); }
.container{ width:100%; padding-inline:48px; }
.grain{ opacity:.12; }
.btn{ min-height:52px; border-radius:3px; justify-content:center; font-size:.82rem; padding:16px 24px; }
.btn-primary{ box-shadow:none; }
.btn-primary:hover{ box-shadow:0 8px 20px -12px var(--signal); }
.icon-btn{ width:44px; height:44px; border-radius:3px; }
.nav{ top:16px; left:24px; right:24px; border:1px solid var(--line-strong); border-radius:6px; background:rgba(var(--bg-rgb),.88); }
.nav-inner{ max-width:1312px; padding:12px 24px; gap:16px; }
.nav-links{ gap:clamp(14px,2vw,30px); }
.nav-links a{ font-family:var(--font-mono); font-size:.69rem; padding:12px 0; }
.nav-links a::after{ bottom:4px; height:1px; }
.nav-resume{ min-height:40px; padding:12px 16px; font-size:.75rem; }
.nav-toggle{ width:44px; height:44px; justify-content:center; align-items:center; }
.nav-mobile{ max-height:calc(100dvh - 100px); overflow:auto; gap:0; border-radius:0 0 6px 6px; }
.nav-mobile a:not(.btn){ padding:12px 0; border-bottom:1px solid var(--line); }
.nav-mobile a.active{ color:var(--signal); }
.nav-mobile .btn{ color:var(--on-signal); margin-top:20px; }
.nav-mobile.open{ animation:menuEnter .24s var(--ease); }
@keyframes menuEnter{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }

/* The name is the artwork. The grid resolves behind it, never over it. */
.hero{ min-height:850px; min-height:max(850px,100svh); padding:166px 48px 60px; align-items:stretch; justify-content:center; text-align:left; border-bottom:1px solid var(--line-strong); }
.hero-content{ width:100%; max-width:1264px; margin:auto; display:grid; grid-template-columns:1fr 1fr; align-items:start; column-gap:48px; }
.hero-content > div:first-child{ grid-column:2; grid-row:1; justify-self:end; }
.hero-badge{ margin:0; border-radius:3px; padding:8px 12px; font-size:.63rem; background:var(--void-soft); }
.badge-dot::after{ animation-iteration-count:2; }
.eyebrow{ grid-column:1; grid-row:1; display:block; margin:0; max-width:420px; font-size:.65rem; line-height:2; letter-spacing:.06em; padding-top:4px; }
.eyebrow::before,.eyebrow::after{ display:none; }
.hero-title{ grid-column:1/-1; margin:42px 0 38px; font-size:clamp(4rem,10.2vw,9rem); letter-spacing:-.072em; line-height:.94; position:relative; width:fit-content; }
.hero-title span:first-child{ color:var(--signal); }
.hero-title span:last-child{ font-weight:500; }
.hero-title::after{ position:absolute; bottom:0; right:-.25em; }
.hero-sub{ grid-column:2; grid-row:3; margin:0; max-width:520px; font-size:1rem; line-height:1.85; text-wrap:pretty; padding-top:25px; border-top:1px solid var(--line-strong); }
.hero-actions{ grid-column:1; grid-row:3; justify-content:flex-start; align-self:end; gap:12px; padding-top:28px; }
.hero-canvas{ opacity:.8; }
.hero::before{ background:linear-gradient(90deg,transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px)); }
.hero::after{ background:linear-gradient(90deg,var(--void) 0%,rgba(var(--bg-rgb),.9) 36%,rgba(var(--bg-rgb),.2) 100%); }
.hero-mark{ width:12px; height:12px; }
.hero-mark-tl,.hero-mark-tr{ top:120px; }
.hero-mark-bl,.hero-mark-br{ bottom:28px; }

/* Editorial section titles and a calm, asymmetric reading rhythm. */
.section{ padding:112px 0; scroll-margin-top:110px; }
.section-alt{ background:transparent; border-block:1px solid var(--line-strong); }
.section-label{ font-size:.67rem; letter-spacing:.12em; margin-bottom:30px; }
.section-label::before{ width:16px; }
.section-title{ font-size:clamp(2rem,4.1vw,3.8rem); letter-spacing:-.055em; line-height:1.12; text-wrap:balance; max-width:920px; }
.about-grid{ grid-template-columns:minmax(0,1fr); gap:56px; }
.about-text{ display:grid; grid-template-columns:1.1fr 1fr; gap:0 80px; }
.about-text .section-label{ grid-column:1/-1; }
.about-text .section-title{ font-size:clamp(2rem,3.3vw,3rem); }
.lead{ margin:0; font-size:1rem; line-height:1.9; text-align:left; max-width:none; }
.about-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:0; border-block:1px solid var(--line-strong); }
.stat{ background:none; border:0; border-right:1px solid var(--line-strong); border-radius:0; padding:30px; gap:24px; box-shadow:none; min-height:185px; }
.stat:first-child{ padding-left:0; }
.stat:last-child{ border-right:0; }
.stat:hover{ transform:none; box-shadow:none; }
.stat::before{ opacity:1; height:1px; background:var(--signal); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.stat:hover::before{ transform:scaleX(1); }
.stat-value{ font-size:clamp(1.8rem,3vw,2.8rem); line-height:1; letter-spacing:-.06em; }
.stat:first-child .stat-value{ font-size:clamp(3rem,5.8vw,5.2rem); color:var(--signal); }
.stat-label{ font-size:.63rem; }
.stat-value-sm{ font-family:var(--font-display); font-size:1.2rem; font-weight:500; }
.stat-cgpa{ display:flex; align-items:baseline; gap:.5rem; white-space:nowrap; }
.stat-cgpa > span,.stat-cgpa > small{ flex:none; }
.stat-cgpa > small{ letter-spacing:normal; line-height:1.4; }
.stat-focus{ display:grid; gap:.5rem; }
.stat-focus strong{ font-weight:700; }
.stat-focus > span{ font-size:.9em; line-height:1.45; }

/* A technical index, rather than a wall of interchangeable cards. */
#skills{ background:var(--paper); color:var(--void); }
#skills .section-label{ color:var(--signal-soft); }
#skills .section-label::before{ background:currentColor; }
.skills-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 56px; margin-top:58px; }
.skill-card{ background:none; border:0; border-top:1px solid currentColor; border-color:rgba(var(--bg-rgb),.22); border-radius:0; box-shadow:none; padding:30px 0 34px; overflow:visible; }
.skill-card:hover{ transform:none; box-shadow:none; border-color:var(--signal-soft); }
.skill-card::before{ height:1px; top:-1px; background:var(--signal-soft); }
.skill-cat{ color:inherit; font-size:.7rem; letter-spacing:.09em; margin-bottom:22px; }
.skill-cat::before{ background:var(--resolve); }
.tags{ gap:8px; }
.tag{ border-radius:3px; font-size:.71rem; line-height:1.6; padding:5px 9px; background:none; border:1px solid var(--line-strong); max-width:100%; overflow-wrap:anywhere; }
.tag:hover{ color:inherit; background:none; border-color:var(--line-strong); }
#skills .tag{ color:inherit; border-color:rgba(var(--bg-rgb),.22); background:rgba(var(--bg-rgb),.035); }
#skills .skill-card:hover .tag{ border-color:rgba(var(--bg-rgb),.4); }
[data-theme="light"] #skills .section-label{ color:#E5A080; }
[data-theme="dark"] #skills{ background:#211B15; color:var(--paper); }
[data-theme="dark"] #skills .skill-card,[data-theme="dark"] #skills .tag{ border-color:var(--line-strong); }

/* Experience reads as two substantial chapters. */
.timeline{ margin-top:60px; }
.timeline-item{ grid-template-columns:240px minmax(0,1fr); gap:48px; padding:0 0 50px 30px; }
.timeline-item::before{ background:var(--line-strong); }
.timeline-item::after{ width:9px; height:9px; border-radius:0; transform:rotate(45deg); transition:box-shadow .3s; }
.timeline-item:hover::after{ box-shadow:0 0 0 7px var(--signal-dim); }
.timeline-date{ font-size:.7rem; }
.timeline-role{ font-size:clamp(1.35rem,2.3vw,2rem); letter-spacing:-.035em; line-height:1.3; }
.timeline-org{ margin-top:12px; color:var(--signal); }
.timeline-body{ border-bottom:1px solid var(--line-strong); padding-bottom:36px; }
.timeline-item:last-child .timeline-body{ border:0; padding-bottom:0; }
.timeline-list li{ font-size:.94rem; line-height:1.85; padding-left:18px; }
.timeline-list li::before{ width:4px; height:4px; top:12px; transform:none; }

/* Each existing project gets a full-width case-study composition. */
.projects{ grid-template-columns:1fr; gap:0; margin-top:64px; }
.project-card{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows:auto auto auto auto; gap:22px 64px; padding:48px 0; border:0; border-top:1px solid var(--line-strong); border-radius:0; background:none; box-shadow:none; overflow:visible; }
.project-card:last-child{ border-bottom:1px solid var(--line-strong); }
.project-card::before{ display:none; }
.project-card::after{ top:66px; left:20px; right:auto; font-size:.7rem; color:var(--slate-dim); }
.project-card:hover{ transform:none; box-shadow:none; border-color:var(--signal); }
.project-banner{ grid-column:1; grid-row:1/5; margin:0; height:auto; min-height:330px; border:1px solid var(--line-strong); position:relative; display:flex; align-items:center; background-color:var(--void-soft); background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:32px 32px; }
.project-banner::after{ content:""; position:absolute; inset:18px; border:1px solid var(--line-strong); pointer-events:none; }
.project-banner svg{ height:auto; width:100%; transition:transform .6s var(--ease); }
.project-card:hover .project-banner svg{ transform:scale(1.06); }
.project-card:nth-child(2) .project-banner{ background-color:rgba(107,115,83,.10); }
.project-card:nth-child(3) .project-banner{ background-color:var(--signal-dim); }
.project-head{ grid-column:2; padding:0; }
.project-title{ font-size:clamp(2rem,3.6vw,3.5rem); line-height:1.1; letter-spacing:-.055em; }
.project-kicker{ font-size:.65rem; letter-spacing:.07em; margin-top:14px; }
.project-desc{ grid-column:2; font-size:.96rem; line-height:1.85; max-width:65ch; }
.project-card > .tags{ grid-column:2; }
.project-link{ grid-column:2; display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; border-top:1px solid var(--line-strong); padding-top:18px; font-size:.75rem; }
.project-card:focus-within{ border-color:var(--signal); }
.project-link:hover{ transform:none; }

.education-grid{ gap:80px; grid-template-columns:1.1fr 1fr; }
.edu-item{ border-left:1px solid var(--signal); padding:0 0 0 24px; margin-top:40px; }
.edu-school{ font-size:1.25rem; letter-spacing:-.025em; }
.edu-detail{ line-height:1.8; }
.cert-heading{ margin:8px 0 30px; }
.cert-list ul{ gap:0; }
.cert-list li{ border:0; border-top:1px solid var(--line-strong); border-radius:0; background:none; padding:26px 0; box-shadow:none; gap:10px; }
.cert-list li:last-child{ border-bottom:1px solid var(--line-strong); }
.cert-list li:hover{ transform:none; box-shadow:none; border-color:var(--signal); }
.cert-name{ font-size:1.1rem; font-family:var(--font-display); }
.cert-link{ min-height:32px; display:flex; align-items:center; }

/* A large, confident closing statement with the email as the action. */
.contact{ text-align:left; padding:100px 0 80px; border-top:1px solid var(--line-strong); background:var(--night); }
.contact::before{ background:linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:calc(100% / 8) 100%; opacity:.55; }
.contact-inner{ align-items:flex-start; }
.contact-title{ font-size:clamp(2.5rem,5.9vw,5.5rem); line-height:1.08; letter-spacing:-.06em; max-width:1060px; margin:0 0 34px; text-wrap:balance; }
.contact-sub{ align-self:flex-end; max-width:480px; line-height:1.8; margin-bottom:50px; }
.email-row{ width:100%; justify-content:space-between; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:24px 0; margin-bottom:30px; }
.contact-email{ font-size:clamp(1.1rem,4.2vw,4rem); letter-spacing:-.055em; line-height:1.3; overflow-wrap:anywhere; }
.copy-btn{ width:52px; height:52px; background:var(--void); }
.contact-links{ justify-content:flex-start; gap:24px; }
.contact-links a{ border:0; border-radius:0; padding:8px 0; background:none; font-family:var(--font-mono); font-size:.72rem; border-bottom:1px solid var(--line-strong); }
.contact-links a:hover{ box-shadow:none; transform:none; }
.contact-loc{ align-self:flex-end; font-size:.63rem; }
.footer{ padding-block:24px; }
.footer-inner{ font-size:.62rem; }

@media(min-width:1500px){ .hero-title{ font-size:10rem; } }
@media(max-width:1100px){
 .container{ padding-inline:36px; }
 .hero{ padding-inline:36px; min-height:800px; }
 .hero-content{ column-gap:30px; }
 .hero-title{ font-size:10.4vw; }
 .hero-actions{ flex-direction:column; align-items:flex-start; }
 .about-text{ gap:0 40px; }
 .project-card{ gap:22px 36px; }
 .timeline-item{ grid-template-columns:180px minmax(0,1fr); gap:32px; }
 .education-grid{ gap:40px; }
}
@media(max-width:860px){
 .nav{ top:10px; left:14px; right:14px; }
 .nav-inner{ padding:8px 14px; gap:10px; }
 .logo{ margin-right:auto; }
 .hero{ min-height:800px; padding-top:145px; }
 .hero-title{ font-size:10.2vw; margin-block:55px 40px; }
 .hero-sub{ font-size:.94rem; }
 .eyebrow{ font-size:.58rem; max-width:340px; }
 .hero-actions .btn{ font-size:.77rem; }
 .section{ padding-block:80px; }
 .about-text{ grid-template-columns:1fr; gap:24px; }
 .about-text .section-label{ margin:0; }
 .about-text .section-title{ max-width:640px; font-size:2.7rem; }
 .about-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
 .stat{ padding:24px; border-bottom:1px solid var(--line-strong); }
 .stat:first-child{ padding-left:24px; }
 .stat:nth-child(2){ border-right:0; }
 .stat:nth-child(n+3){ border-bottom:0; }
 .skills-grid{ gap:0 30px; }
 .timeline-item{ grid-template-columns:1fr; gap:18px; }
 .project-card{ grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:20px 28px; }
 .project-title{ font-size:2.3rem; }
 .project-desc{ font-size:.9rem; }
 .education-grid{ grid-template-columns:1fr; gap:48px; }
 .contact-sub{ align-self:flex-start; }
}
@media(max-width:600px){
 .container{ padding-inline:22px; }
 .hero{ min-height:0; padding:130px 22px 54px; }
 .hero-content{ grid-template-columns:minmax(0,1fr); gap:0; }
 .hero-content > div:first-child{ grid-column:1; grid-row:1; justify-self:start; }
 .hero-badge{ font-size:.59rem; }
 .eyebrow{ grid-column:1; grid-row:2; margin-top:28px; max-width:100%; font-size:.57rem; line-height:2.1; letter-spacing:.01em; }
 .hero-title{ grid-column:1; grid-row:3; font-size:10.1vw; line-height:1.05; margin:32px 0; letter-spacing:-.065em; }
 .hero-title span:first-child{ font-size:1.65em; line-height:1.05; }
 .hero-sub{ grid-column:1; grid-row:4; padding-top:22px; font-size:.94rem; max-width:100%; }
 .hero-actions{ grid-column:1; grid-row:5; flex-direction:row; gap:10px; padding-top:28px; }
 .hero-actions .btn{ font-size:.73rem; padding:15px; }
 .hero::after{ background:linear-gradient(90deg,var(--void),rgba(var(--bg-rgb),.65)); }
 .section{ padding-block:64px; scroll-margin-top:92px; }
 .section-title,.about-text .section-title{ font-size:2.15rem; }
 .section-label{ margin-bottom:24px; }
 .lead{ font-size:.95rem; }
 .about-grid{ gap:36px; }
 .stat{ min-height:162px; gap:20px; padding:22px 16px; }
 .stat:first-child{ padding-left:16px; }
 .stat-value{ font-size:1.9rem; }
 .stat-value-sm{ font-size:1rem; }
 .skills-grid{ grid-template-columns:1fr; margin-top:36px; }
 .skill-card{ padding-block:24px; }
 .skill-cat{ margin-bottom:18px; }
 .timeline{ margin-top:38px; }
 .timeline-item{ padding-left:24px; padding-bottom:36px; }
 .timeline-role{ font-size:1.35rem; }
 .timeline-date{ font-size:.66rem; }
 .timeline-list li{ font-size:.9rem; }
 .projects{ margin-top:38px; }
 .project-card{ grid-template-columns:1fr; gap:22px; padding-block:28px 36px; }
 .project-banner{ grid-column:1; grid-row:1; height:210px; min-height:0; }
 .project-card::after{ top:45px; }
 .project-head,.project-desc,.project-card > .tags,.project-link{ grid-column:1; }
 .project-title{ font-size:2.65rem; }
 .project-kicker{ font-size:.62rem; }
 .project-banner svg{ max-height:150px; }
 .contact-title{ font-size:2.65rem; }
 .contact-sub{ font-size:.95rem; margin-bottom:28px; }
 .email-row{ flex-direction:row; align-items:center; gap:10px; padding-block:22px; }
 .contact-email{ font-size:clamp(.97rem,4vw,1.5rem); }
 .copy-btn{ width:44px; height:44px; }
 .contact-links{ gap:12px 22px; }
 .contact-loc{ align-self:flex-start; font-size:.58rem; }
 .contact-loc::before{ display:none; }
 .footer-inner{ align-items:flex-start; text-align:left; font-size:.6rem; }
 .to-top{ right:14px; bottom:14px; width:42px; height:42px; }
}
@media(max-width:360px){
 .hero-actions{ flex-direction:column; align-items:stretch; }
 .contact-email{ font-size:.93rem; }
 .email-row{ gap:6px; }
 .contact-title{ font-size:2.3rem; }
}
/* Give the large metric and longer role/focus labels room on narrow phones. */
@media(max-width:480px){
 .about-stats{ grid-template-columns:minmax(0,1fr); }
 .stat{ border-right:0; min-height:0; }
 .stat:nth-child(n+3){ border-bottom:1px solid var(--line-strong); }
 .stat:last-child{ border-bottom:0; }
}
@media(prefers-reduced-motion:reduce){
 [data-resolve]{ opacity:1 !important; filter:none !important; transform:none !important; }
 .project-banner svg{ transform:none !important; }
}