/* =========================================================
   AMAN SHAH — PORTFOLIO
   Design tokens
   Colour   #0A0A0B rich black · #F3EEE3 bone
            #FF4E1F electric orange (primary accent)
            #D8FF3E acid lime (secondary accent)
            #2438FF deep cobalt (tertiary, used sparingly)
   Type     Display — Unbounded (900/800)
            Labels — Inter
            Body — Inter
   ========================================================= */

:root{
  --black:#0A0A0B;
  --bone:#F3EEE3;
  --bone-dim:#c9c3b6;
  --orange:#FF4E1F;
  --lime:#D8FF3E;
  --cobalt:#2438FF;

  --display:'Unbounded', sans-serif;
  --body:'Inter', sans-serif;

  --ease: cubic-bezier(.16,.84,.44,1);
  --nav-h:5.5rem;
}

/* ---------------------------------------------------------
   Responsive scale
   Every length below is in rem. Up to 1500px wide 1rem = 16px.
   Above that the root size grows with the window (1500px -> 16px,
   1920px -> ~20.5px), so a large monitor shows the same layout as a
   laptop, just larger, in every browser. Capped at 28px (~2625px wide).
   --------------------------------------------------------- */
html{ font-size:100%; }
@media (min-width:1500px){
  html{ font-size:max(100%, min(1.0667vw, 28px)); }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
html,body{ background:var(--black); color:var(--bone); }
body{
  margin:0;
  font-family:var(--body);
  font-size:1rem;
  line-height:1.5;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
img,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:800; }
button{ font-family:inherit; background:none; border:0; color:inherit; cursor:pointer; }

.skip-link{
  position:absolute; left:-62.4375rem; top:0; z-index:999;
  background:var(--lime); color:var(--black); padding:0.625rem 1rem;
  font-family:var(--body); font-size:.8rem;
}
.skip-link:focus{ left:0.75rem; top:0.75rem; }

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

/* =========================== PRELOADER =========================== */
.preloader{
  position:fixed; inset:0; z-index:1000;
  background:var(--black);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.375rem;
}
.preloader__word{
  display:flex; font-family:var(--display); font-weight:900;
  font-size:clamp(2.2rem,8vw,5rem); letter-spacing:.02em; color:var(--bone);
}
.preloader__word span{ display:inline-block; opacity:0; transform:translateY(60%); }
.preloader__bar{ width:min(20rem,60vw); height:0.125rem; background:rgba(243,238,227,.2); overflow:hidden; }
.preloader__bar span{ display:block; width:0%; height:100%; background:var(--orange); }

/* =========================== CURSOR =========================== */
.cursor{
  position:fixed; top:0; left:0; width:0.875rem; height:0.875rem;
  border-radius:50%; background:var(--bone);
  pointer-events:none; z-index:900; mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  transition:width .25s var(--ease), height .25s var(--ease), background-color .25s var(--ease);
}
.cursor__label{
  font-family:var(--body); font-size:.65rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--black); opacity:0; white-space:nowrap;
  transition:opacity .2s var(--ease);
}
.cursor.is-active{ width:4.625rem; height:4.625rem; background:var(--lime); }
.cursor.is-active .cursor__label{ opacity:1; }
@media (hover:none), (pointer:coarse){ .cursor{ display:none; } }

/* =========================== NAV =========================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.625rem clamp(1.25rem,4vw,3rem);
  transition:transform .5s var(--ease);
}
.nav.nav--hidden{ transform:translateY(-115%); }
.nav__mark{
  font-family:var(--display); font-weight:900; font-size:1.35rem;
  letter-spacing:.04em; padding:0.5rem 0.375rem;
}
.nav__toggle{
  display:flex; align-items:center; gap:0.75rem; min-height:2.75rem; padding:0 0.25rem;
  font-family:var(--body); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
}
.nav__toggle-icon{ display:flex; flex-direction:column; gap:0.3125rem; width:1.375rem; }
.nav__toggle-icon i{ height:0.09375rem; background:var(--bone); transition:transform .35s var(--ease), opacity .35s var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon i:first-child{ transform:translateY(0.20312rem) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon i:last-child{ transform:translateY(-0.20312rem) rotate(-45deg); }

.nav__menu{
  position:fixed; inset:0; z-index:700;
  background:var(--orange); color:var(--black);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:7.5rem clamp(1.5rem,6vw,5rem) 3.75rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .65s var(--ease);
  overflow-y:auto; overscroll-behavior:contain;
}
.nav__menu.is-open{ clip-path:inset(0 0 0% 0); }
.nav__menu-back{
  position:absolute; top:1.625rem; left:clamp(1.25rem,4vw,3rem);
  font-family:var(--body); font-size:1.8rem; line-height:1;
  color:var(--black);
}
.nav__menu ol{ display:flex; flex-direction:column; gap:.15em; list-style:none; margin:0; padding:0; width:100%; max-width:100vw; }
.nav__menu a{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.8rem,7vw,3.8rem); line-height:1.05;
  display:inline-block; transition:transform .35s var(--ease), color .3s;
  word-break:break-word;
  max-width:90vw;
}
.nav__menu a:hover, .nav__menu a:focus-visible{ transform:translateX(.2em); color:var(--black); text-decoration:underline wavy 0.1875rem; }
.nav__menu-foot{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem;
  font-family:var(--body); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  border-top:1.5px solid rgba(10,10,11,.35); padding-top:1.125rem;
  max-width:100vw;
}
.nav__progress{ position:absolute; left:0; right:0; bottom:0; height:0.125rem; background:rgba(243,238,227,.12); }
.nav__progress span{ display:block; height:100%; width:0%; background:var(--lime); }

/* =========================== HERO =========================== */
.hero{
  position:relative; min-height:100dvh; min-height:100svh; padding:calc(var(--nav-h) + 0.5rem) clamp(1.25rem,4vw,3rem) 0;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.hero__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.05; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__eyebrow{
  font-family:var(--body); font-size:clamp(.68rem,1.1vw,.85rem);
  text-transform:uppercase; letter-spacing:.12em; color:var(--bone-dim);
  max-width:32.5rem; margin:0 0 1.125rem; display:flex; align-items:center; gap:.5rem;
}
.hero__eyebrow span{
  color:var(--orange); font-size:1.1em; font-weight:700;
}
.hero__title{
  display:flex; flex-direction:column; line-height:.86;
  font-size:clamp(3.2rem,14vw,12rem); letter-spacing:-.01em;
  user-select:none;
  max-width:100%;
  overflow:hidden;
}
.hero__line{ display:flex; }
.hero__line--2{ align-self:flex-end; }
.letter{
  display:inline-block; position:relative; will-change:transform;
}
.hero__line--1 .letter{ color:var(--bone); }
.hero__line--2 .letter{ -webkit-text-stroke:0.125rem var(--bone); color:transparent; }

.hero__meta{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-top:2.125rem; gap:1.5rem; flex-wrap:wrap;
}
.hero__note{
  font-family:var(--body); font-size:.78rem; color:var(--bone-dim);
  line-height:1.5; margin:0;
}
.hero__scroll{
  display:flex; flex-direction:column; align-items:center; gap:0.625rem;
  font-family:var(--body); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--bone-dim);
}
.hero__scroll svg{ animation:bob 1.8s ease-in-out infinite; }
.hero__resume{
  font-family:var(--body); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--orange); border-bottom:2px solid var(--orange); padding-bottom:0.4375rem;
  transition:color .2s ease,border-color .2s ease,transform .2s ease;
}
.about__resume{ color:var(--lime); border-color:var(--lime); }
.hero__resume:hover,.hero__resume:focus-visible{ color:var(--orange); border-color:var(--orange); transform:translateY(-0.125rem); }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(0.375rem);} }

.hero__strip{
  margin-top:2.75rem; border-top:1px solid rgba(243,238,227,.16); overflow:hidden;
  display:none;
}
.hero__strip-track{
  display:flex; gap:2.5rem; white-space:nowrap; padding:0.875rem 0;
  font-family:var(--body); font-size:.75rem; letter-spacing:.14em;
  color:var(--bone-dim);
  animation:scroll-x 22s linear infinite;
}
@keyframes scroll-x{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* =========================== INTRO STRIP =========================== */
.intro{
  padding:min(6vw,4.5rem) clamp(1.25rem,4vw,3rem);
  border-top:1px solid rgba(243,238,227,.12);
}
.intro__text{
  margin:0; font-family:var(--display); font-weight:600;
  font-size:clamp(1.2rem,4.4vw,2.8rem); line-height:1.28; max-width:100%; white-space:normal;
  color:var(--bone-dim); overflow-wrap:break-word; word-break:break-word;
}
.intro__line{ display:inline; }
.intro__line--white{ color:var(--bone); }
.intro__line--accent{ color:var(--orange); }

/* =========================== SECTION TITLE =========================== */
.section-title{
  font-size:clamp(2.2rem,6vw,4.2rem); letter-spacing:-.01em;
}

/* =========================== EXPERIENCE =========================== */
.experience{
  padding:4rem clamp(1.25rem,4vw,3rem);
  border-top:1px solid rgba(243,238,227,.12);
}
.experience__head{
  margin-bottom:2rem;
}
.experience__head .section-title span{ color:var(--orange); }
.experience__eyebrow{
  margin:0 0 0.5rem; color:var(--bone-dim); font-family:var(--body);
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
}
.experience__card{
  display:grid; grid-template-columns:9.375rem 1fr; gap:clamp(1.25rem,6vw,5.5rem);
  align-items:start; width:100%; padding:1.5rem 0;
  overflow-wrap:break-word;
  word-break:break-word;
}
.experience__logo{
  display:grid; place-items:center; aspect-ratio:1; border-radius:22%; overflow:hidden;
}
.experience__logo img{
  display:block; width:100%; height:100%; object-fit:contain;
}
.experience__period{
  margin:0 0 1.125rem; color:var(--lime); font-family:var(--body);
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
}
.experience__details h3{
  font-size:clamp(1.5rem,3vw,2.5rem); line-height:1.05;
}
.experience__company{
  margin:0.625rem 0 0.375rem; color:var(--orange); font-family:var(--body);
  font-size:.9rem; letter-spacing:.08em; text-transform:uppercase;
}
.experience__location{
  margin:0 0 1.375rem; color:var(--bone-dim); font-family:var(--body);
  font-size:.78rem; letter-spacing:.06em;
}
.experience__description{
  margin:0; color:var(--bone-dim); line-height:1.7;
}

/* =========================== WORK =========================== */
.work{ padding:4rem clamp(1.25rem,4vw,3rem) 1.5rem; border-top:1px solid rgba(243,238,227,.12); }
.work__head{
  margin-bottom:1rem;
}
.work__title-accent{ color:var(--lime); }
.project{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,5vw,5rem);
  align-items:center; padding:3.5rem 0; border-bottom:1px solid rgba(243,238,227,.12);
}
.project-list .project:first-child{ padding-top:1.5rem; }
.project:nth-child(even){ direction:rtl; }
.project:nth-child(even) > *{ direction:ltr; }
.project__art{
  width:min(100%,30rem); justify-self:start; border-radius:2px; overflow:hidden; aspect-ratio:1/1; background:var(--black);
  transform:translateY(1.875rem); opacity:0;
}
.project:nth-child(even) .project__art{ justify-self:end; }
.art-svg{ width:100%; height:100%; transition:transform .6s var(--ease); }
.project:hover .art-svg{ transform:scale(1.045); }

.project__body{ min-width:0; transform:translateY(1.875rem); opacity:0; }
.project__tag{
  display:block; font-family:var(--body); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--bone-dim); margin-bottom:0.875rem;
}
.project__title{
  font-size:clamp(2.2rem,5.2vw,4.4rem); line-height:1; margin-bottom:1.25rem;
  color:var(--bone);
}
.project--02 .project__title{ color:#fff; }
.project--04 .project__title{ color:var(--orange); }
.project--06 .project__title{ color:var(--lime); }
.project__desc{
  max-width:52ch; color:var(--bone-dim); font-size:1rem; line-height:1.65; margin-bottom:1.375rem;
}
.project__facts{ display:flex; flex-wrap:wrap; gap:0.625rem 1.125rem; }
.project__facts li{
  font-family:var(--body); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--bone); border:1px solid rgba(243,238,227,.28); padding:0.375rem 0.75rem; border-radius:100px;
  word-break:break-word;
  white-space:normal;
}
.project-list .project[data-project-extra]{ display:grid; }
.project-list .project[data-project-extra][hidden]{ display:none; }
.project__links{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.5rem; }
.project__links a{ display:inline-flex; align-items:center; gap:0.375rem; color:var(--lime); font-family:var(--body); font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border-bottom:1.5px solid var(--lime); padding:0 0 0.25rem; transition:color .2s ease,border-color .2s ease,transform .2s ease; }
.project__links a:hover,.project__links a:focus-visible{ color:var(--orange); border-color:var(--orange); transform:translateY(-0.125rem); }
.work__toggle{ display:block; margin:2.5rem auto 0; padding:0.75rem 0 0.5rem; border:0; border-bottom:2px solid var(--lime); background:transparent; color:var(--bone); font-family:var(--display); font-size:clamp(1.15rem,5vw,1.8rem); letter-spacing:.01em; text-transform:uppercase; cursor:pointer; transition:color .2s ease,border-color .2s ease,transform .2s ease; white-space:normal; text-align:center; line-height:1.2; }
.work__toggle:hover,.work__toggle:focus-visible{ color:var(--lime); border-color:var(--orange); transform:translateY(-0.1875rem); }

/* =========================== ABOUT =========================== */
.about{
  padding:4rem clamp(1.25rem,4vw,3rem);
  display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(1.875rem,6vw,6.25rem);
  border-top:1px solid rgba(243,238,227,.12);
}
.about__lede{ font-size:clamp(1.2rem,2.4vw,1.6rem); line-height:1.55; color:var(--bone); margin:1.875rem 0 1.375rem; }
.about__lede-accent{ color:var(--orange); }
.about__body{ color:var(--bone-dim); max-width:60ch; line-height:1.7; }
.about__visual{ display:flex; align-items:center; justify-content:flex-end; }
.about__terminal{
  width:min(100%,26.25rem); padding:1.125rem 1.25rem 1.375rem; border:1px solid rgba(243,238,227,.24);
  background:rgba(10,10,11,.76); box-shadow:0.5rem 0.5rem 0 var(--orange); transform:rotate(1.5deg);
  font-family:var(--body); font-size:.72rem; line-height:1.8; color:var(--bone-dim);
}
.about__terminal-bar{ display:flex; gap:0.4375rem; margin-bottom:1.375rem; }
.about__terminal-dot{ width:0.5rem; height:0.5rem; border-radius:50%; }
.about__terminal-dot--orange{ background:var(--orange); }
.about__terminal-dot--lime{ background:var(--lime); }
.about__terminal-dot--blue{ background:var(--cobalt); }
.about__terminal p{ margin:0; }
.about__terminal-prompt{ color:var(--orange); }
.about__terminal-output{ padding-left:1.125rem; color:var(--bone); }
.about__terminal-output--accent{ color:var(--lime); }
.about__block{ margin-bottom:2.125rem; }
.about__block h3{
  font-family:var(--body); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--orange); margin-bottom:0.875rem; font-weight:700;
}
.about__block li{ padding:0.5rem 0; border-bottom:1px solid rgba(243,238,227,.12); color:var(--bone-dim); }
/* =========================== SKILLS =========================== */
.skills{
  padding:4rem clamp(1.25rem,4vw,3rem);
  border-top:1px solid rgba(243,238,227,.12);
}
.skills__head{
  margin-bottom:2rem;
}
.skills__title-accent{ color:var(--lime); }
.skills__intro{ color:var(--bone-dim); margin-top:0.875rem; }
.skills__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2.375rem,5vw,4.5rem) clamp(1.75rem,6vw,5.5rem);
}
.skill-card{
  position:relative; min-width:0; padding:1.5rem 1.5rem 1.25rem;
  border:1px solid rgba(243,238,227,.2); background:rgba(10,10,11,.55);
  box-shadow:.35rem .35rem 0 rgba(243,238,227,.08);
}
.skill-card::before{
  content:""; position:absolute; top:0; left:0; width:2.5rem; height:.25rem;
  background:var(--lime);
}
.skill-card--backend::before{ background:var(--orange); }
.skill-card--tools::before{ background:var(--cobalt); }
.skill-card--ai::before{ background:var(--lime); }
.skill-card h3{
  margin-bottom:1rem; font-size:1.2rem; color:var(--bone);
}
.skill-card li{
  padding:.55rem 0; border-bottom:1px solid rgba(243,238,227,.12);
  color:var(--bone-dim); font-size:1rem;
}
.skill-card li:last-child{ border-bottom:0; }
/* =========================== CERTIFICATIONS =========================== */
.certifications{
  padding:4rem clamp(1.25rem,4vw,3rem);
  border-top:1px solid rgba(243,238,227,.12);
}
.certifications__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  margin-bottom:2.25rem;
}
.certifications__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem;
}
.certification-card:nth-child(1){ order:2; }
.certification-card:nth-child(2){ order:3; }
.certification-card:nth-child(3){ order:5; }
.certification-card:nth-child(4){ order:6; }
.certification-card:nth-child(5){ order:4; }
.certification-card:nth-child(6){ order:1; }
.certification-card{
  display:flex; flex-direction:column; min-width:0;
  border:1px solid rgba(243,238,227,.18); background:rgba(10,10,11,.5);
  transition:border-color .2s ease, transform .2s ease;
}
.certification-card:focus-visible{ outline:2px solid var(--lime); outline-offset:.25rem; }
.certification-card:hover{ border-color:var(--lime); transform:translateY(-.25rem); }
.certification-card__logo{
  display:flex; align-items:center; justify-content:center; height:11rem;
  padding:1.25rem; background:var(--bone);
  overflow:hidden;
}
.certification-card__logo img{
  display:block; width:95%; height:82%; object-fit:contain;
  mix-blend-mode:multiply;
}
.certification-card__logo--cisco img{ width:115%; height:100%; }
.certification-card__logo--compact img{ width:80%; height:70%; }
.certification-card__body{ display:flex; flex:1; flex-direction:column; padding:1.25rem; }
.certification-card__body h3{
  min-height:3.25em; font-size:1.05rem; line-height:1.2; letter-spacing:-.01em;
}
.certification-card__body p{
  margin:.75rem 0 1.25rem; color:var(--bone-dim); font-family:var(--body);
  font-size:.86rem; line-height:1.5;
}
.certification-card__body p span{ color:var(--orange); }
.certification-card__body a{
  align-self:flex-start; margin-top:auto; color:var(--lime);
  border-bottom:1px solid var(--lime); padding-bottom:.25rem;
  font-family:var(--body); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em;
  transition:color .2s ease, border-color .2s ease;
}
.certification-card__body a:hover{ color:var(--orange); border-color:var(--orange); }
/* =========================== CONTACT =========================== */
.contact{
  padding:min(9vw,6.5rem) clamp(1.25rem,4vw,3rem) 2.5rem;
  border-top:1px solid rgba(243,238,227,.12);
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
.contact__eyebrow{
  font-family:var(--body); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--lime);
  margin-bottom:1.5rem;
}
.contact__statement{
  font-size:clamp(2.6rem,9vw,7rem); line-height:.98; letter-spacing:-.01em;
}
.contact__statement span{ color:var(--orange); }
.contact__email{
  display:inline-block; margin-top:2.5rem; font-family:var(--body);
  font-size:clamp(1rem,2vw,1.3rem); border-bottom:1.5px solid var(--bone);
  padding-bottom:0.25rem; transition:color .25s, border-color .25s;
}
.contact__email:hover{ color:var(--lime); border-color:var(--lime); }
.contact__links{ display:flex; flex-wrap:wrap; gap:1.625rem; justify-content:center; margin-top:2rem; }
.contact__links a{
  font-family:var(--body); font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--bone-dim);
  transition:color .2s;
}
.contact__links a:hover{ color:var(--bone); }

/* =========================== FOOTER =========================== */
.footer{ border-top:1px solid rgba(243,238,227,.12); }
.footer__marquee{ overflow:hidden; border-bottom:1px solid rgba(243,238,227,.12); }
.footer__marquee-track{
  display:flex; gap:2.125rem; white-space:nowrap; padding:1rem 0;
  font-family:var(--display); font-weight:800; font-size:clamp(1rem,2.6vw,1.6rem);
  color:var(--bone-dim); animation:scroll-x 26s linear infinite;
}
.footer__row{
  display:flex; flex-wrap:wrap; gap:0.875rem; justify-content:space-between;
  padding:1.375rem clamp(1.25rem,4vw,3rem);
  font-family:var(--body); font-size:.75rem; letter-spacing:.05em; color:var(--bone-dim);
}
.footer__row a:hover{ color:var(--lime); }

/* =========================== MOBILE LAYOUT =========================== */
@media (max-width:760px){
  .preloader{
    padding:1.25rem;
  }
  .preloader__word{
    width:100%;
    justify-content:center;
    font-size:clamp(2rem,13vw,3.6rem);
    letter-spacing:-.04em;
    line-height:1;
  }
  .preloader__bar{
    width:min(13.75rem,72vw);
  }
  .nav{
    padding:1.125rem 1.25rem;
  }
  .nav__menu{
    padding:6rem 1.25rem 2.25rem;
  }
  .nav__menu a{
    font-size:clamp(1.5rem,7.5vw,2.6rem);
  }
  .hero{
    min-height:100dvh;
    min-height:100svh;
    padding:calc(var(--nav-h) + 0.5rem) 1.25rem 0;
  }
  .hero__title{
    width:100%;
    font-size:clamp(2.8rem,16vw,5rem);
    letter-spacing:-.05em;
    max-width:100vw;
  }
  .hero__line{
    width:100%;
  }
  .hero__line--2{
    align-self:flex-start;
    justify-content:flex-end;
  }
  .hero__meta{
    align-items:flex-start;
    margin-top:1.625rem;
  }
  .intro{
    padding:3rem 1.25rem;
  }
  .intro__text{
    font-size:clamp(1.05rem,5.5vw,1.8rem);
    line-height:1.3;
    white-space:normal;
  }
  .intro__line{
    display:inline;
  }
  .experience,
  .about,
  .skills,
  .certifications{
    padding:3.25rem 1.25rem;
  }
  .experience__head,
  .work__head,
  .skills__head{
    margin-bottom:1.5rem;
  }
  .experience__head .section-title,
  .work__head .section-title,
  .skills__head .section-title{
    flex:1 1 auto;
    width:100%;
    max-width:100%;
    font-size:clamp(1.8rem,9vw,3.2rem);
    letter-spacing:-.03em;
  }
  .experience__card{
    grid-template-columns:1fr;
    gap:1.125rem;
    padding:1.125rem 0 0;
  }
  .experience__logo{
    width:5rem;
  }
  .experience__details h3{
    font-size:clamp(1.3rem,6.5vw,1.9rem);
  }
  .experience__description{
    font-size:.9rem;
    line-height:1.6;
  }
  .work{
    padding:3.25rem 1.25rem 1.5rem;
  }
  .project,
  .project:nth-child(even){
    grid-template-columns:1fr;
    direction:ltr;
    gap:1.25rem;
    padding:2rem 0;
  }
  .project-list .project:first-child{ padding-top:1rem; }
  .project__art,
  .project:nth-child(even) .project__art{
    width:100%;
    max-width:30rem;
    justify-self:stretch;
    aspect-ratio:4/3;
  }
  .project__title{
    max-width:100%;
    font-size:clamp(1.75rem,9vw,3.5rem);
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .project__desc{
    max-width:100%;
    font-size:.95rem;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .project__facts{
    gap:0.375rem 0.5rem;
  }
  .project__facts li{
    font-size:.7rem;
    padding:0.25rem 0.5rem;
    line-height:1.25;
  }
  .project__links{ gap:0.625rem; margin-top:1rem; }
  .project__links a{ font-size:.75rem; padding:0.5rem 0 0.25rem; }
  .about{
    gap:2.25rem;
    grid-template-columns:1fr;
  }
  .about__lede{
    font-size:clamp(1.05rem,4.5vw,1.25rem);
    margin:1.25rem 0 1.125rem;
  }
  .about__visual{
    margin-top:0;
    justify-content:center;
  }
  .about__terminal{
    width:100%;
    max-width:100%;
    padding:0.875rem 0.75rem 1rem;
    font-size:.72rem;
    overflow-wrap:anywhere;
    transform:rotate(0deg);
    box-shadow:0.25rem 0.25rem 0 var(--orange);
  }
  .skills__grid{
    grid-template-columns:1fr;
    gap:1rem;
  }
  .skill-card{
    padding:1.25rem 1rem 1rem;
  }
  .certifications__head{
    align-items:flex-start; flex-direction:column; gap:.75rem; margin-bottom:1.75rem;
  }
  .certifications__head .section-title{
    width:100%; font-size:clamp(1.8rem,9vw,3.2rem); letter-spacing:-.03em;
  }
  .certifications__grid{ grid-template-columns:1fr; gap:.875rem; }
  .certification-card__logo{ height:12rem; }
  .certification-card__body h3{ min-height:0; }
  .contact{
    padding:4.5rem 1.25rem 2.5rem;
  }
  .contact__statement{
    width:100%;
    max-width:100%;
    font-size:clamp(1.8rem,9vw,3.8rem);
    letter-spacing:-.04em;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .contact__email{
    max-width:100%;
    margin-top:1.75rem;
    font-size:.9rem;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .footer__row{
    padding:1.125rem 1.25rem;
  }
}

@media (min-width:761px) and (max-width:1100px){
  .experience__card{
    grid-template-columns:7rem 1fr;
    gap:clamp(1.25rem,4vw,3rem);
  }
  .skills__grid{
    gap:2rem 2.5rem;
  }
  .certifications__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .certifications__head{ align-items:flex-start; flex-wrap:wrap; }
}

@media (min-width:761px) and (max-width:900px){
  .project,
  .project:nth-child(even){
    grid-template-columns:1fr;
    direction:ltr;
    gap:1.75rem;
    padding:2.75rem 0;
  }
  .project__art,
  .project:nth-child(even) .project__art{
    width:min(100%,28rem);
    justify-self:start;
  }
  .about{
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .about__visual{
    justify-content:flex-start;
  }
}

/* =========================== REDUCED MOTION =========================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* =========================== SELECTION =========================== */
::selection{ background:var(--orange); color:var(--black); }