:root {
  /* 1u = 1px in the 531px-wide Figma frame, scaled with the viewport */
  --u: clamp(1px, .18832vw, 2.6px);
  --font: "Jersey 10", "Trebuchet MS", sans-serif;   /* change the site font here */
  --blue: #06a7f6;
  --bg: #1b1b1b;
  --pad: max(16px, calc(var(--u) * 17));
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-weight: 400;
  background: var(--bg);
  color: #fff;
  line-height: 1.2;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
section, header { scroll-margin-top: 50px; }
.inner { max-width: 1380px; margin: 0 auto; padding: 0 var(--pad); position: relative; }

/* ---------- torn-paper white buttons (only the background is roughened) ---------- */
.torn { position: relative; isolation: isolate; color: #111; }
.torn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #fff; filter: url(#rough-edge);
}
.ico { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- NAV ---------- */
nav {
  position: sticky; top: 0; z-index: 20;
  background: #262626;
  height: max(42px, calc(var(--u) * 22));
  font-size: max(20px, calc(var(--u) * 12.48));
}
nav .inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 max(16px, calc(var(--u) * 24)); }
nav ul { list-style: none; display: flex; gap: calc(var(--u) * 14); gap: max(12px, calc(var(--u) * 14)); }
nav a { transition: color .15s, opacity .15s; }
nav a:hover { color: var(--blue); }

/* ---------- HERO ---------- */
.hero {
  background: linear-gradient(180deg, #333 0%, #1e1e1e 100%);
  padding: max(14px, calc(var(--u) * 16)) 0 max(16px, calc(var(--u) * 20));
  text-align: center;
}
.lcd {
  display: block; width: min(73.3%, 1000px); height: auto; margin: 0 auto;
}
.lcd text { font-family: "Press Start 2P", monospace; fill: #fff; }
.lcd .cursor { fill: #fff; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.push-row {
  display: flex; justify-content: center;
  gap: max(28px, calc(var(--u) * 58));
  margin-top: max(10px, calc(var(--u) * 10));
}
.pushbtn { display: flex; flex-direction: column; align-items: center; width: max(78px, calc(var(--u) * 78)); cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }
.pushbtn svg { width: max(64px, calc(var(--u) * 70)); height: auto; overflow: visible; }
.pushbtn .cap { transform-origin: 276.5px 190.5px; transition: transform .14s cubic-bezier(.3,1.6,.5,1); animation: breathe 3.2s ease-in-out infinite; }
.pushbtn .halo { transform-origin: 276.5px 190.5px; opacity: 0; fill: none; stroke: var(--blue); stroke-width: 12; animation: ping 2.6s ease-out infinite; }
.pushbtn:nth-child(2) .cap, .pushbtn:nth-child(2) .halo { animation-delay: 1.3s; }
.pushbtn .label { margin-top: max(2px, calc(var(--u) * 2)); font-size: max(16px, calc(var(--u) * 8.84)); transition: color .15s, transform .15s; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(.955); } }
@keyframes ping { 0% { transform: scale(.95); opacity: .75; } 70%,100% { transform: scale(1.35); opacity: 0; } }
.pushbtn:hover .cap, .pushbtn:focus-visible .cap { animation: none; transform: scale(.9); }
.pushbtn:hover .halo, .pushbtn:focus-visible .halo { animation: none; opacity: .95; transform: scale(1.02); transition: opacity .15s; }
.pushbtn:hover .label, .pushbtn:focus-visible .label { color: var(--blue); transform: translateY(1px); }
.pushbtn:active .cap { transform: scale(.78); transition-duration: .06s; }
.pushbtn:active .label { transform: translateY(2px); }

/* ---------- section headings with resistor ---------- */
.title { display: flex; align-items: center; gap: max(10px, calc(var(--u) * 12)); }
h2 { font-weight: 400; font-size: max(29px, calc(var(--u) * 20.15)); line-height: 1.1; }
.res { width: max(46px, calc(var(--u) * 56)); height: auto; flex: none; }

/* ---------- ABOUT ---------- */
.about {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #dcdcdc 100%);
  color: #151515;
  min-height: calc(var(--u) * 188);
  padding: max(18px, calc(var(--u) * 20)) 0 max(26px, calc(var(--u) * 30));
}
.about p { margin-top: max(10px, calc(var(--u) * 12)); font-size: max(18px, calc(var(--u) * 11.96)); line-height: 1.45; max-width: 71%; }
.wires {
  position: absolute; top: calc(var(--u) * -14);
  right: max(8px, calc(var(--u) * 25), calc((100% - 1380px) / 2 + var(--u) * 25));
  width: max(58px, calc(var(--u) * 82)); height: auto; pointer-events: none;
}

/* ---------- PROJECTS ---------- */
.projects { background: #1e1e1e; padding: max(18px, calc(var(--u) * 20)) 0 max(22px, calc(var(--u) * 18)); }
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: max(18px, calc(var(--u) * 31));
  margin-top: max(14px, calc(var(--u) * 17));
  padding: 0 max(0px, calc(var(--u) * 11));
}
.card {
  display: flex; flex-direction: column; background: #343434;
  min-height: calc(var(--u) * 216);
  transition: transform .3s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s ease;
  will-change: transform;
}
.card .head { background: #3a3a3a; padding: max(10px, calc(var(--u) * 10)) max(10px, calc(var(--u) * 8)) max(10px, calc(var(--u) * 12)); min-height: calc(var(--u) * 77); }
.card h3 { font-weight: 400; font-size: max(26px, calc(var(--u) * 17.55)); line-height: 1.1; transition: color .2s; }
.card .head p { margin-top: max(4px, calc(var(--u) * 5)); font-size: max(16px, calc(var(--u) * 8.32)); line-height: 1.25; opacity: .88; }
.card .tags {
  text-align: center; white-space: nowrap;
  font-size: max(14px, calc(var(--u) * 8.19));
  padding: max(2px, calc(var(--u) * 2)) 0;
  transition: transform .3s ease;
}
.card .shot {
  position: relative; flex: 1 1 auto; min-height: calc(var(--u) * 120);
  background: linear-gradient(125deg, #2e2e2e 0%, #484848 40%, #a2a2a2 100%);
  background-size: 150% 150%; background-position: 0% 0%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: background-position .6s ease;
}
.card .shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .cube { width: 44%; height: auto; margin-bottom: max(14px, calc(var(--u) * 18)); transition: transform .6s cubic-bezier(.2,.9,.3,1.2); }
.card .gh {
  position: absolute; left: 50%; bottom: max(8px, calc(var(--u) * 7));
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: max(3px, calc(var(--u) * 3)); white-space: nowrap;
  padding: max(4px, calc(var(--u) * 3.5)) max(10px, calc(var(--u) * 8));
  font-size: max(16px, calc(var(--u) * 8.84));
  transition: transform .25s cubic-bezier(.3,1.6,.5,1);
}
/* hover animation for project cards */
.card:hover, .card:focus-within {
  transform: translateY(calc(var(--u) * -9)) rotate(-.7deg) scale(1.025);
  box-shadow: 0 0 0 max(2px, calc(var(--u) * 1.5)) var(--blue), 0 calc(var(--u) * 16) calc(var(--u) * 34) rgba(6,167,246,.28);
}
.card:nth-child(2):hover { transform: translateY(calc(var(--u) * -9)) rotate(.5deg) scale(1.025); }
.card:hover h3 { color: var(--blue); }
.card:hover .tags { transform: scaleX(1.04); }
.card:hover .shot { background-position: 100% 100%; }
.card:hover .cube { transform: rotateY(360deg) scale(1.1); }
.card:hover .gh { transform: translateX(-50%) translateY(calc(var(--u) * -3)) scale(1.06); }

/* ---------- BREADBOARD DIVIDER ---------- */
.board {
  display: block; width: 100%;
  height: max(64px, 8.445vw);               /* 503 / 5956 of the width = picture's own proportions */
  background: #f5f4f7 url("assets/breadboard.png") left center / auto 100% repeat-x;
}

/* ---------- CONTACT ---------- */
.contact { background: #1b1b1b; padding: max(16px, calc(var(--u) * 14)) 0 max(26px, calc(var(--u) * 24)); }
.links { display: flex; flex-wrap: wrap; gap: max(8px, calc(var(--u) * 9)); margin-top: max(12px, calc(var(--u) * 12)); }
.links a {
  display: inline-flex; align-items: center; gap: max(3px, calc(var(--u) * 3));
  padding: max(5px, calc(var(--u) * 4)) max(10px, calc(var(--u) * 7));
  font-size: max(17px, calc(var(--u) * 8.58));
  transition: transform .15s cubic-bezier(.3,1.6,.5,1);
}
.links a:hover { transform: translateY(calc(var(--u) * -2)) rotate(-1.5deg); }

/* ---------- NARROW: wires would run into the text, so they disappear ---------- */
@media (max-width: 820px) {
  .wires { display: none; }
  .about p { max-width: 100%; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 720px) {
  .lcd { width: 94%; }
  .cards { grid-template-columns: 1fr; padding: 0; max-width: 420px; margin-left: auto; margin-right: auto; }
  .card .head { min-height: 0; }
  .card .shot { min-height: 190px; }
  .card .tags { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}