*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
:root{
  --bg:#0a0a0b;
  --bg2:#111113;
  --bg3:#18181b;
  --border:rgba(255,255,255,0.07);
  --border2:rgba(255,255,255,0.13);
  --text:#e4e4e7;
  --muted:#52525b;
  --muted2:#71717a;
  --accent-dim:rgba(228,228,231,0.05);
  --green:#22c55e;
  --green-soft:#1a3d1a;
  --green-glow:rgba(28,197,94,0.55);
  --pcb:#0a1a0a;
  --mono:'Geist Mono',monospace;
  --sans:'Geist',system-ui,sans-serif;
}
html{
  scroll-behavior:smooth;
  font-size:clamp(14.5px,calc(0.5vw + 9px),16px);
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Contact is the last section. Stretch it so the page's max-scroll lands
   exactly where #contact sits at viewport top (where the nav button anchors
   to) — the footer fills the remaining space below. 7.5rem ≈ footer height
   (2.5rem + 3.5rem padding + content + border). */
#contact{
  min-height:calc(100vh - 7.5rem);
}

.bg-grid{
  position:fixed;
  /* Extend the grid well beyond the viewport so the scroll-driven
     translate can keep moving without clipping the pattern at the edges. */
  inset:-175vh 0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--border) 1.5px,transparent 1.5px),
    linear-gradient(90deg,var(--border) 1.5px,transparent 1.5px);
  background-size:48px 48px;
  background-repeat:repeat;
  will-change:transform;
  /* Fade grid to transparent at edges using a radial mask with many intermediate
     stops so the grid lines smoothly blend into the plain background without
     visible banding. */
  -webkit-mask-image:radial-gradient(ellipse 85% 60% at 50% 50%,#000 0%,#000 40%,rgba(0,0,0,.85) 55%,rgba(0,0,0,.6) 65%,rgba(0,0,0,.3) 80%,transparent 100%);
  mask-image:radial-gradient(ellipse 85% 60% at 50% 50%,#000 0%,#000 40%,rgba(0,0,0,.85) 55%,rgba(0,0,0,.6) 65%,rgba(0,0,0,.3) 80%,transparent 100%);
}

.board-bg{
  position:fixed;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .6s ease;
  padding-inline:clamp(1rem,1.8vw,1.8rem);
  /* Vignette fade: inset box-shadow fades edges to dark without clipping
     SVG drop-shadows. The radial gradient effect is applied via the shadow
     layering: innermost is tight, outermost is large and subtle. */
  box-shadow:inset 0 0 120px rgba(0,0,0,.35), inset 0 0 200px rgba(0,0,0,.15);
}
.board-bg svg {
  height: 68vh;
  width: auto;

  max-width: calc(100vw - 2 * clamp(1rem, 1.8vw, 1.8rem));
  max-height: 68vh;

  opacity: .45;
  overflow: visible;
}
/* PCB chassis: the only rectangular silhouette in the SVG. Stripping its
   stroke removes the visible "board border", and a low opacity lets the
   bg + grid show through so the green fill fades into the page rather
   than reading as a hard panel. The vignette above further softens the
   corners so no straight edge survives. */
.board-bg .pcb-base{
  /* script handles the boardbase opacity */
  /*opacity:.08;*/
  stroke:none;
}

nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(.9rem,1.5vw,2.75rem);
  flex-wrap:nowrap;
  padding:0 clamp(1.25rem,1.8vw,2.5rem);
  height:clamp(54px,4vw,58px);
  background:rgba(10,10,11,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-logo{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  flex-shrink:0;
  min-width:max-content;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:14.5px;
  color:var(--green);
  letter-spacing:.05em;
}
.nav-logo span{
  color:var(--green);
  white-space:nowrap;
}
.nav-links{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  gap:clamp(.5rem,1.4vw,2rem);
  align-items:center;
  justify-content:flex-end;
}
.nav-links a{
  flex:0 0 auto;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:14px;
  color:var(--green-glow);
  text-decoration:none;
  letter-spacing:.04em;
  transition:color .2s;
}
.nav-links a:hover,.nav-links a.active{
  color:var(--green);
}
.nav-links a.active{
  font-weight:500;
}

.lang-toggle{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.06em;
  margin-left:auto;
  padding:.35rem .65rem;
  border:1px solid var(--green-glow);
  background:transparent;
  color:var(--green-glow);
  cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
  margin-left:.5rem;
}
.lang-toggle:hover{
  color:var(--green);
  border-color:var(--green);
  background:var(--accent-dim);
}

.page-wrap{
  position:relative;
  z-index:2;
  max-width:1040px;
  margin:0 auto;
  padding:0 clamp(1rem,1.6vw,2rem);
}

section{
  padding:clamp(5.5rem,5vw,7rem) 0 clamp(3rem,3.5vw,4rem);
  position:relative;
  /* One section per viewport. Content stays anchored to the top via the
     7rem padding; the min-height pushes the next section past the fold so
     the user sees exactly one at a time. #contact keeps its own (smaller)
     min-height so the footer can share its viewport. */
  min-height:100vh;
}
section:first-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:clamp(72px,5vw,80px);
}
.section-label{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--muted2);
  letter-spacing:.1em;
  margin-bottom:2.5rem;
  display:flex;
  align-items:center;
  gap:1rem;
  text-transform:uppercase;
}
.section-label::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--border);
}
h1{
  font-size:clamp(3rem,5.8vw,5.4rem);
  font-weight:300;
  line-height:1.05;
  letter-spacing:-.03em;
  margin-bottom:1.2rem;
}
h1 em{
  font-style:normal;
  color:var(--muted2);
}
.home-sub{
  font-size:1.2rem;
  color:var(--muted2);
  max-width:640px;
  line-height:1.75;
  margin-bottom:2.5rem;
}
.home-tag{
  font-family:var(--mono);
  font-size:13.5px;
  color:var(--muted);
  letter-spacing:.08em;
  margin-bottom:1.2rem;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.home-tag::before{
  content:'';
  display:block;
  width:20px;
  height:1px;
  background:var(--muted);
}
.home-links{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}
.btn{
  font-family:var(--mono);
  font-size:13.5px;
  letter-spacing:.05em;
  padding:.6rem 1.15rem;
  border:1px solid var(--border2);
  background:rgba(10,10,11,.5);
  color:var(--text);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  transition:background .2s,border-color .2s,color .2s;
  cursor:pointer;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.btn:hover{
  background:var(--accent-dim);
  border-color:rgba(255,255,255,.2);
}
.btn-ghost{
  color:var(--muted2);
  border-color:var(--border);
}
.btn-ghost:hover{
  color:var(--text);
}

/* Floating "next section" jump button. Understated by default, blooms
   into a full glow on hover (same drop-shadow vocabulary as .glow-comp.lit). */
.next-section{
  position:fixed;
  left:50%;
  bottom:4rem;
  transform:translateX(-50%);
  z-index:150;
  width:3.25rem;
  height:3.25rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:1.1rem;
  line-height:1;
  color:rgba(34,197,94,.75);
  background:rgba(10,15,11,.55);
  border:2px solid rgba(34,197,94,.35);
  border-radius:50%;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 0 rgba(34,197,94,0);
  transition:opacity .3s ease,color .25s,background .25s,border-color .25s,transform .2s,box-shadow .3s ease;
}
.next-section:hover{
  color:var(--green);
  background:rgba(10,20,12,.7);
  border-color:rgba(34,197,94,.55);
  transform:translateX(-50%) translateY(-2px);
  /* Washed-out halo: three low-alpha layers spread far so the bloom
     reads as ambient haze rather than a hard ring (matches the
     partially-transparent feel of the board behind). */
  box-shadow:
    0 0 18px rgba(34,197,94,.2),
    0 0 42px rgba(34,197,94,.1),
    0 0 72px rgba(34,197,94,.05);
}
.next-section.hidden{
  opacity:0;
  pointer-events:none;
}

h2{
  font-size:clamp(1.7rem,2.2vw,2rem);
  font-weight:400;
  letter-spacing:-.02em;
  margin-bottom:1.4rem;
}
.section-lead{
  color:var(--muted2);
  font-size:1.02rem;
  line-height:1.7;
  max-width:70ch;
  margin:-.35rem 0 1.35rem;
}
/* About + education sections wrap their content in a single glass panel
   with a white left accent. The vertical gradient softens the panel into
   the board behind it. */
/* Each paragraph is its own glass panel (split per-<p>). 
   Flex column + gap stacks them with breathing room. */
.about-text{
  color:var(--muted2);
  line-height:1.8;
  font-size:1.15rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.about-text p{
  padding:1.35rem 1.65rem;
  background:linear-gradient(180deg,rgba(17,17,19,.5),rgba(17,17,19,.3));
  border:1px solid var(--border);
  border-left:2px solid rgba(255, 255, 255, 0.35);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
}
.about-text strong{
  color:var(--text);
  font-weight:400;
}

.skills-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1px;
}
.skill-item{
  padding:2rem 1.5rem;
  background:rgba(17,17,19,.62);
  display:grid;
  grid-template-columns:1fr auto;
  align-items:start;
  gap:1rem;
  transition:background .2s;
  border:1px solid var(--border);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
}
.skill-text{
  min-width:0;
}
.skill-meta{
  min-width:0;
}
.skill-item:hover{
  background:rgba(24,24,27,.78);
}
.skill-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.2rem;
}
.skill-name{
  font-size:18px;
  color:var(--text);
  font-weight:400;
}
.skill-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.45rem;
  justify-self:end;
}
.skill-cat{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--muted2);
  letter-spacing:.04em;
}

/* Education + Languages: glass panel + left-stripe treatment as
   .about-text. Inner items keep hairline dividers but no per-item box. */
[data-render="education"],
[data-render="languages"]{
  background:linear-gradient(180deg,rgba(17,17,19,.5),rgba(17,17,19,.3));
  border:1px solid var(--border);
  border-left:2px solid rgba(255, 255, 255, 0.35);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
}
.edu-item{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:start;
  padding:1.45rem 1.75rem;
  border-bottom:1px solid var(--border);
}
.edu-item:last-child{
  border-bottom:none;
}
.edu-school{
  font-size:19px;
  color:var(--text);
  font-weight:400;
  margin-bottom:.3rem;
}
.edu-degree{
  font-size:17px;
  color:#c4c4c8;
  font-style:italic;
}
.edu-detail{
  margin-top:.35rem;
  font-size:15.5px;
  color:var(--muted);
  line-height:1.6;
  max-width:52ch;
}
.edu-details{
  margin:.45rem 0 0 1.1rem;
  padding:0;
  color:var(--muted);
  font-size:15.5px;
  line-height:1.55;
  max-width:56ch;
}
.edu-details li + li{
  margin-top:.15rem;
}
.edu-year{
  font-family:var(--mono);
  font-size:14.5px;
  color:var(--muted2);
  padding-top:3px;
}

/* Languages list rows: same row-shape as .edu-item — language name on
   the left, fluency level on the right in mono. */
.lang-row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  padding:1.1rem 1.65rem;
  border-bottom:1px solid var(--border);
}
.lang-row:last-child{
  border-bottom:none;
}
.lang-name{
  font-size:18px;
  color:var(--text);
  font-weight:400;
}
.lang-context{
  margin-top:.35rem;
  font-size:14.5px;
  color:var(--muted);
  line-height:1.5;
}
.lang-details{
  margin:.45rem 0 0 1.1rem;
  padding:0;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.5;
  max-width:50ch;
}
.lang-details li + li{
  margin-top:.12rem;
}
.lang-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.2rem;
  text-align:right;
}
.lang-level{
  font-family:var(--mono);
  font-size:14px;
  color:var(--muted2);
  letter-spacing:.04em;
}
.lang-cert{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--muted);
  letter-spacing:.04em;
}
/* Proficiency bars: languages keep the original horizontal row, while
  skill rankings reuse the same pill styling in a vertical stack.
  `filled` is set by the renderer from the relevant `bars` value.
  Filled segments echo the board's PCB green with a soft halo; empty
  ones are barely-there outlines. */
.lang-bars,
.skill-bars{
  display:flex;
  gap:4px;
  margin-top:0;
  align-items:flex-end;
}
.lang-bars{
  flex-direction:row;
}
.skill-bars{
  flex-direction:column-reverse;
}
.lang-bars .bar,
.skill-bars .bar{
  position:relative;
  display:block;
  width:22px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  /* Inset shadow stands in for a 1px border so the padding-box (which
     positions ::before) equals the visible bar — partial fills land on
     the right pixel without border-related offsets. */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
/* Green fill is a separate pseudo-element. The language bars fill left
  to right via `width`, while the skill bars fill bottom to top via
  `height` (0%–100%, set inline by the renderer). The halo lives on
  this element, not the parent — that keeps the glow tight around just
  the green portion instead of bleeding around the empty end. */
.lang-bars .bar::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--fill,0%);
  border-radius:999px;
  background:rgba(34,197,94,.55);
  pointer-events:none;
}
.skill-bars .bar::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--fill,0%);
  border-radius:999px;
  background:rgba(34,197,94,.55);
  pointer-events:none;
}
.lang-bars .bar.filled::before,
.skill-bars .bar.filled::before{
  box-shadow:0 0 6px rgba(34,197,94,.25);
}

.lab-grid{
  display:grid;
  gap:2px;
}
.lab-item{
  background:rgba(17,17,19,.62);
  padding:1.35rem;
  display:flex;
  gap:1.25rem;
  align-items:flex-start;
  transition:background .2s;
  border:1px solid var(--border);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
}
.lab-item:hover{
  background:rgba(24,24,27,.78);
}
.lab-icon{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--muted2);
  padding:.35rem .55rem;
  border:1px solid var(--border);
  white-space:nowrap;
  background:var(--bg);
  flex-shrink:0;
  margin-top:1px;
}
.lab-title{
  font-size:16px;
  color:var(--text);
  font-weight:400;
  margin-bottom:.35rem;
}
.lab-desc{
  font-size:14.5px;
  color:var(--muted2);
  line-height:1.65;
}
.lab-tags{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  margin-top:.7rem;
}
.tag{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--muted2);
  padding:.2rem .5rem;
  border:1px solid var(--border);
  letter-spacing:.04em;
}

.proj-grid{
  display:grid;
  gap:2px;
}
.proj-item{
  background:rgba(17,17,19,.62);
  padding:1.5rem 1.65rem;
  display:flex;
  gap:1.35rem;
  align-items:flex-start;
  text-decoration:none;
  color:inherit;
  transition:background .2s;
  border:1px solid var(--border);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
}
.proj-item:hover{
  background:rgba(24,24,27,.78);
}
.proj-year{
  font-family:var(--mono);
  font-size:13px;
  color:var(--muted2);
  padding:.3rem 0;
  border:1px solid var(--border);
  background:var(--bg);
  flex-shrink:0;
  letter-spacing:.04em;
  margin-top:1px;
  width:5.5rem;
  text-align:center;
}
.proj-year abbr{
  text-decoration:none;
  border-bottom:none;
  cursor:help;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.3rem;
}
.proj-year .ongoing-mark{
  color:var(--text);
  font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","Noto Sans Symbols",system-ui,sans-serif;
  font-size:14px;
  line-height:1;
}
.proj-body{
  flex:1;
  min-width:0;
}
.proj-title{
  font-size:17px;
  color:var(--text);
  font-weight:400;
  margin-bottom:.4rem;
}
.proj-arrow{
  font-family:var(--mono);
  font-size:13.5px;
  color:var(--border2);
  transition:color .2s,transform .2s;
  display:inline-block;
}
a.proj-item:hover .proj-arrow{
  color:var(--muted2);
  transform:translateX(2px);
}
.proj-desc{
  font-size:15px;
  color:var(--muted2);
  line-height:1.65;
}
.proj-tags{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  margin-top:.7rem;
}
.proj-empty{
  background:linear-gradient(180deg,rgba(17,17,19,.5),rgba(17,17,19,.3));
  border:1px solid var(--border);
  border-left:2px solid rgba(255,255,255,0.35);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  padding:1.5rem 1.85rem;
  font-size:15px;
  color:var(--muted2);
  font-style:italic;
  line-height:1.55;
}

.contact-links{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.contact-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.6rem 1.85rem;
  background:rgba(17,17,19,.62);
  text-decoration:none;
  transition:background .2s;
  border:1px solid var(--border);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
}
.contact-link:hover{
  background:rgba(24,24,27,.78);
}
.contact-link-left{
  display:flex;
  align-items:center;
  gap:1.5rem;
}
.contact-platform{
  font-family:var(--mono);
  font-size:14px;
  color:var(--muted2);
  width:110px;
  letter-spacing:.06em;
}
.contact-value{
  font-size:17.5px;
  color:var(--text);
}
.contact-arrow{
  font-family:var(--mono);
  font-size:15.5px;
  color:var(--border2);
  transition:color .2s,transform .2s;
}
.contact-link:hover .contact-arrow{
  color:var(--muted2);
  transform:translateX(3px);
}

footer{
  max-width:1100px;
  margin:0 auto;
  padding:2.5rem 2rem 3.5rem;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  z-index:2;
}
.footer-text{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--muted);
}

.fade-in{
  opacity:0;
  transform:translateY(14px);
  /* Opacity transitions much faster than the slide. */
  transition:opacity .2s ease,transform .65s ease;
}
.fade-in.visible{
  opacity:1;
  transform:none;
}
.d1{
  transition-delay:.08s;
}
.d2{
  transition-delay:.16s;
}
.d3{
  transition-delay:.24s;
}
.d4{
  transition-delay:.32s;
}

/* Components: appear/disappear bidirectionally with scroll. home = empty.
   We deliberately do NOT animate `transform` here: top-level component groups
   in the SVG carry their own `transform="translate(...)"`/matrix() attributes
   for positioning, and a CSS `transform` would override them and dislocate
   the group (CPU, RAM, USB ports, etc. would render at the SVG origin).
   Opacity + filter give the reveal effect without touching geometry. */
.pcb-base{
  transition:opacity .8s ease;
}
.comp{
  opacity:0;
  filter:blur(1px);
  transition:
    opacity 1.1s cubic-bezier(.16,1,.3,1),
    filter 1.1s cubic-bezier(.16,1,.3,1);
}
.comp.lit{
  opacity:1;
  filter:blur(0);
}
.glow-comp.lit{
  filter:blur(0) drop-shadow(0 0 2px var(--green-glow)) drop-shadow(0 0 4px var(--green-glow));
}

/* Wires: progressive draw along the path. Direction is set per wire at init
   via the .from-b modifier — the offset starts on whichever end has the
   later-revealed component, so the line draws *from* the already-visible
   component *to* the newly-appearing one. Removing .lit reverses cleanly. */
.trace{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  opacity:0;
  transition:
    stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1) .15s,
    stroke .6s ease,
    opacity .45s ease;
}
.trace.from-b{
  stroke-dashoffset:-100;
}
.trace.lit{
  stroke-dashoffset:0;
  stroke:var(--green);
  opacity:1;
}
.full-glow{
  opacity:0;
  transition:opacity 1.1s ease;
}

@media (max-aspect-ratio: 1/1) {
  .board-bg {
    padding-inline: clamp(.5rem, 1vw, 1rem);
  }

  .board-bg svg {
    height: 90vh;
    max-height: 50vh;
    max-width: 120vw;

    transform: rotate(90deg);
    transform-origin: center;
  }
}

@media (max-width: 900px) {
  .page-wrap{
    padding:0 1.25rem;
  }
  nav{
    padding:0 0.9rem;
  }
  .nav-links{
    gap:.8rem;
    flex-wrap:nowrap;
    flex:1 1 auto;
  }
  .nav-links a{
    font-size:12px;
    flex:0 0 auto;
    white-space:nowrap;
  }
  .nav-logo{
    font-size:13px;
  }
  .next-section{
    display:none;
  }
  section:first-child{
    min-height:100vh;
  }
  section{
    min-height:auto;
  }
  .about-text{
    font-size:0.95rem;
    line-height:1.6;
  }
  .skills-grid{
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  }
  .skill-item{
    padding:1rem 1rem;
    grid-template-columns:minmax(0,1fr) auto;
  }
  .skill-name{
    font-size:14px;
  }
  .skill-cat{
    font-size:11px;
  }
  footer{
    padding:2.5rem 1.25rem 3rem;
  }
}

/* Once the header gets tight enough, collapse to the logo + language switch. */
@media (max-width: 775px) {
  .nav-links a{
    display:none;
  }
  .skills-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .skill-item{
    padding:1rem .9rem;
  }
}

/* Mobile tweaks */
@media (max-width: 440px) {
  /* Hide the SVG-based graphics (board, traces, components). */
  .board-bg,
  .board-bg svg,
  .trace,
  .pcb-base,
  .comp,
  .glow-comp,
  .full-glow{
    display:none !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* Stack the education / language rows so the year no longer forces a second column */
  .edu-item,
  .lang-row,
  .proj-item,
  .contact-link{
    grid-template-columns: 1fr;
    gap:.45rem;
  }

  /* Put the year/metadata on its own row but aligned to the right */
  .edu-year,
  .proj-year,
  .lang-meta{
    justify-self:end;
    width:auto;
    margin-top:.15rem;
  }

  /* Remove left indents that expected a two-column layout */
  .edu-details,
  .lang-details{
    margin-left:0;
    max-width:100%;
  }
}

/* Adjustments for 1080p screens */
@media (max-height: 1120px) and (min-width: 901px) {
  html{
    font-size:14px;
  }
  nav{
    padding:0 clamp(1rem,1.4vw,2rem);
    height:54px;
  }
  .page-wrap{
    max-width:880px;
    padding:0 clamp(.9rem,1.2vw,1.5rem);
  }
  section{
    padding:clamp(4.5rem,4vw,6rem) 0 clamp(2.5rem,3vw,3.5rem);
  }
  section:first-child{
    padding-top:68px;
  }
  #contact{
    min-height:calc(100vh - 8.25rem);
    padding-top:clamp(3.5rem,3.5vw,5rem);
  }
  h1{
    font-size:clamp(3.8rem,6vw,5.8rem);
  }
  h2{
    font-size:clamp(1.55rem,2vw,1.9rem);
  }
  .home-sub{
    font-size:1.08em;
    line-height:1.7;
    max-width:580px;
  }
  .section-lead{
    font-size:0.98em;
  }
  .about-text{
    font-size:1.18rem;
    line-height:1.72;
    .edu-school{
      font-size:1.08em;
    }
    .edu-degree{
      font-size:0.94em;
    }
  }
  .about-text p{
    padding:1.5rem 1.75rem;
  }
  .skill-item{
    padding:2rem 1.5rem;
  }
  .skills-grid{
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  }
  .skill-name{
    font-size:15px;
  }
  .skill-cat{
    font-size:11.5px;
  }
  .edu-detail,
  .edu-details,
  .lab-desc,
  .proj-desc,
  .proj-empty,
  .contact-value{
    font-size:0.98em;
  }
  .edu-item,
  .lang-row,
  .lab-item,
  .proj-item,
  .contact-link{
    padding-top:1.5rem;
    padding-bottom:1.5rem;
  }
  .contact-link-left{
    gap:1.65rem;
  }
  .contact-platform{
    font-size:1rem;
  }
  .contact-value{
    font-size:1.1rem;
  }
  .contact-arrow{
    font-size:1rem;
  }
  .edu-school,
  .lang-name,
  .lab-title,
  .proj-title{
    font-size:1.15em;
  }
  .edu-school{
    font-size:1.2em;
  }
  .edu-degree{
    font-size:1em;
  }
  .edu-year{
    font-size:12.5px;
  }
}

/* Adjustments for 4k screens */
@media (min-width: 3200px) and (min-height: 1800px) {
  html{
    font-size:22px;
  }
  nav{
    padding:0 clamp(2.5rem,0.8vw,5rem);
    height:84px;
  }
  .page-wrap{
    max-width:1700px;
    padding:0 clamp(1.75rem,0.7vw,3.5rem);
  }
  .nav-logo{
    font-size:18px;
  }
  .nav-links{
    gap:2.75rem;
  }
  .nav-links a{
    font-size:20px;
  }
  .lang-toggle{
    font-size:19px;
    padding:.45rem .8rem;
    margin-left:.65rem;
  }
  section{
    padding:clamp(8rem,4vw,10rem) 0 clamp(5rem,3.5vw,6.5rem);
  }
  section:first-child{
    padding-top:120px;
  }
  .section-label{
    font-size:16px;
    margin-bottom:2.75rem;
    gap:1.1rem;
  }
  h1{
    font-size:clamp(5.2rem,4.2vw,8.4rem);
  }
  h2{
    font-size:clamp(2.8rem,1.4vw,3.4rem);
  }
  .home-sub{
    font-size:1.76rem;
    line-height:1.86;
    max-width:1300px;
  }
  .home-tag,
  .btn{
    font-size:18.5px;
  }
  .home-tag::before{
    width:34px;
  }
  .next-section{
    width:4.5rem;
    height:4.5rem;
    font-size:1.65rem;
    bottom:6.5rem;
  }
  .section-lead{
    font-size:1.34rem;
    max-width:84ch;
  }
  .about-text{
    font-size:1.44rem;
    line-height:1.82;
  }
  .about-text p{
    padding:2rem 2.25rem;
  }
  .skills-grid{
    grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
    gap:3px;
  }
  .edu-item,
  .lang-row,
  .lab-item,
  .proj-item,
  .contact-link{
    padding-top:2rem;
    padding-bottom:2rem;
  }
  .skill-item{
    padding:2.3rem 2rem;
  }
  .skill-name,
  .edu-school,
  .lang-name,
  .lab-title,
  .proj-title{
    font-size:1.16em;
  }
  .skill-name{
    font-size:1.24em;
  }
  .skill-cat{
    font-size:1.04em;
  }
  .edu-school{
    font-size:1.5em;
  }
  .edu-degree{
    font-size:1.2em;
  }
  .lang-level,
  .contact-platform,
  .proj-arrow,
  .contact-arrow{
    font-size:1em;
  }
  .lang-bars{
    gap:5px;
  }
  .lang-bars .bar{
    width:28px;
    height:7px;
  }
  .edu-detail,
  .edu-details,
  .lang-context,
  .lang-details,
  .lab-desc,
  .proj-desc,
  .proj-empty,
  .contact-value{
    font-size:1.24rem;
  }
  .edu-year{
    font-size:20px;
  }
  .lab-grid,
  .proj-grid,
  .contact-links{
    gap:3px;
  }
  .contact-link-left{
    gap:2.75rem;
  }
  .contact-platform{
    width:132px;
  }
  .lab-icon,
  .proj-year,
  .lang-cert,
  .footer-text{
    font-size:18px;
  }
  footer{
    max-width:1720px;
    padding:4.25rem 3.5rem 5.75rem;
  }
  .footer-text{
    font-size:16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .comp,.trace,.fade-in,.full-glow{
    transition:none;
  }
  html{
    scroll-behavior:auto;
  }
}