* { box-sizing: border-box; }

:root {
  color-scheme: dark;
  --cream: #eee9dc;
  --cream-2: #f6f1e6;
  --ink: #12130f;
  --muted: #5f6257;
  --line: rgba(18, 19, 15, 0.16);
  --green: #9ed84b;
  --screen: #c7ff50;
  --dark: #11160f;
  --dark-2: #0a0f0a;
  --aqua: #72d5f1;
  --orange: #e38a48;
  --max: 1280px;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  background: #070907;
}
body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  color: var(--ink);
  background: linear-gradient(to bottom, #070907 0 100svh, var(--cream) 100svh);
  color-scheme:light;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

/*
  iOS 26 Safari ignores theme-color and samples fixed elements near each
  viewport edge instead. These masked elements remain invisible in the page
  while giving Safari the site's cream color for its top and bottom chrome.
*/
.safari-ui-tint {
  position: fixed;
  left: 50%;
  width: 89%;
  height: 11px;
  z-index: 2147483647;
  pointer-events: none;
  background: #070907;
  transform: translateX(-50%);
  mask-image: linear-gradient(to right, transparent, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, transparent);
}

.safari-ui-tint-top { top: 4px; }
.safari-ui-tint-bottom { bottom: 3px; }

/* CSS geometry avoids iOS rendering the Unicode north-east arrow as emoji. */
.external-arrow {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: .8em;
  height: .8em;
  font-style: normal;
  vertical-align: .02em;
}
.external-arrow::before {
  content: "";
  position: absolute;
  left: .05em;
  bottom: .12em;
  width: .82em;
  height: .1em;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: left center;
}
.external-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: .48em;
  height: .48em;
  border-top: .1em solid currentColor;
  border-right: .1em solid currentColor;
}

.site-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 300;
  opacity: .065;
  background-image:
    linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

.topbar {
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translate(-50%, -18px);
  width: min(calc(100% - 44px), var(--max));
  min-height: 66px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 200;
  color: #161712;
  background: rgba(246, 241, 230, 0.96);
  border: 1px solid rgba(18, 19, 15, 0.10);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.topbar.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.topbar-brand {
  width: 54px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(15,16,13,.88);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.04em;
  backdrop-filter: blur(8px);
}

.topbar-nav {
  display: flex;
  gap: 28px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1c1d17;
}
.topbar-nav a { position: relative; }
.topbar-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform .16s ease;
}
.topbar-nav a:hover::after { transform: scaleX(1); }

.hero-scroll { height: 365vh; position: relative; }
.hero-disc-snap,
.hero-menu-snap {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.hero-disc-snap { top: 100vh; }
.hero-menu-snap { top: 200vh; }
.hero-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #111;
}

.hero-frame-wrap { position: absolute; inset: 0; }
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  pointer-events: none;
}
.hero-light-falloff {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14,14,12,.16) 0%, rgba(14,14,12,.04) 37%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.12));
}

.hero-copy {
  position: absolute;
  z-index: 20;
  left: max(34px, calc((100vw - var(--max)) / 2));
  top: 50%;
  width: min(39vw, 580px);
  transform: translateY(-47%);
  color: #171813;
  transition: opacity .15s linear, transform .15s linear;
}
.hero-kicker {
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}
.hero-copy h1 {
  margin: 0;
  font-size: clamp(58px, 6.2vw, 102px);
  line-height: .88;
  letter-spacing: -.075em;
  font-weight: 900;
}
.hero-copy h1 em { font-style: normal; color: #75a82e; }
.hero-lead {
  max-width: 520px;
  margin: 26px 0 0;
  color: #4d5147;
  font-size: 17px;
  line-height: 1.5;
}
.hero-scroll-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 38px;
}
.scroll-icon {
  width: 50px;
  height: 50px;
  border: 2px solid #171813;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.hero-scroll-label div { display: grid; gap: 3px; }
.hero-scroll-label strong { font-size: 10px; letter-spacing: .15em; }
.hero-scroll-label small { color: #64675d; font-size: 11px; }

.hero-progress {
  position: absolute;
  z-index: 25;
  left: max(34px, calc((100vw - var(--max)) / 2));
  bottom: 24px;
  width: min(390px, 32vw);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  color: #20211d;
  font-size: 9px;
  font-weight: 900;
}
.progress-track { height: 3px; background: rgba(20,21,18,.18); }
.progress-track i { display:block; width:0%; height:100%; background:#7cab35; }

.mobile-hero-control { display:none; }

.monitor-ui {
  position: absolute;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  color: #ebffc8;
  background: rgba(4, 14, 7, 0.60);
  border: 1px solid rgba(199,255,80,.22);
  overflow: hidden;
  transform-origin: center center;
  filter: drop-shadow(0 0 18px rgba(159,237,74,.09));
  transition: opacity .22s ease;
  clip-path: polygon(1.2% 0.8%, 99.3% 0.2%, 99.7% 99.0%, 0.5% 99.5%);
}
.monitor-ui.visible { opacity: 1; pointer-events: auto; }
.monitor-scanlines {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: .22;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(202,255,106,.12) 4px);
}
.monitor-glass {
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,.055), transparent 26%), linear-gradient(180deg, rgba(122, 255, 111, .02), rgba(0,0,0,0));
}
.monitor-status {
  position: relative;
  z-index: 4;
  height: 13.4%;
  padding: 3.2% 4.2% 2.4%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(199,255,80,.22);
  font-size: clamp(10px, .82vw, 15px);
  font-weight: 900;
  letter-spacing: .14em;
  color: #e9ffc6;
  text-shadow: 0 0 8px rgba(199,255,80,.08);
}
.monitor-status .online { color: var(--screen); }
.monitor-layout {
  position: relative;
  z-index: 4;
  height: 72%;
  display: grid;
  grid-template-columns: 40% 60%;
}
.monitor-menu {
  border-right: 1px solid rgba(199,255,80,.18);
  padding: 4.8% 5.0% 4.9% 4.2%;
  display: grid;
  align-content: start;
  gap: 3.0%;
}
.monitor-menu button {
  border: 0;
  min-height: 14.8%;
  padding: 2.9% 5.0%;
  display: grid;
  grid-template-columns: 20% 1fr;
  align-items: center;
  background: transparent;
  color: #b7d09d;
  cursor: pointer;
  text-align: left;
}
.monitor-menu button span { font-size: clamp(8px, .72vw, 12px); font-weight: 900; }
.monitor-menu button strong { font-size: clamp(11px, .96vw, 17px); letter-spacing: .08em; }
.monitor-menu button.active {
  background: rgba(199,255,80,.94);
  color: #0b120a;
  box-shadow: 0 0 20px rgba(199,255,80,.24);
}
.monitor-panel {
  padding: 6.6% 5.8%;
  position: relative;
}
.monitor-label { margin:0; color:#aec690; font-size:clamp(8px,.68vw,11px); letter-spacing:.15em; font-weight: 900; }
.monitor-panel h2 { margin:5% 0 2.8%; font-size:clamp(22px,1.9vw,34px); line-height:.96; letter-spacing:-.045em; color:#efffd0; text-shadow: 0 0 10px rgba(199,255,80,.06); }
.monitor-role { margin:0; color:var(--screen); font-size:clamp(10px,.85vw,14px); letter-spacing:.1em; font-weight: 900; }
.monitor-text { margin:7% 0 0; color:#d0e5be; font-size:clamp(10px,.8vw,13px); line-height:1.52; max-width:96%; }
.monitor-open {
  margin-top: 7%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--screen);
  font-size: clamp(10px,.8vw,13px);
  font-weight: 900;
  letter-spacing: .1em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .55em;
}
.monitor-footer {
  position: relative;
  z-index: 4;
  height: 13.8%;
  padding: 0 4.2%;
  display: flex;
  align-items: center;
  gap: 8%;
  border-top: 1px solid rgba(199,255,80,.20);
  color: #a5bf90;
  font-size: clamp(8px,.66vw,11px);
  letter-spacing: .1em;
}

.section-shell { width:min(calc(100% - 46px), var(--max)); margin-inline:auto; }
.intro-strip { padding: 125px 0 100px; }
.section-kicker { margin:0 0 20px; font-size:10px; font-weight:900; letter-spacing:.18em; }
.intro-grid, .section-heading { display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:end; }
.intro-grid h2, .section-heading h2, .about-copy h2, .contact h2 {
  margin:0;
  font-size:clamp(46px,5.4vw,76px);
  line-height:.91;
  letter-spacing:-.065em;
}
.intro-grid p, .section-heading > p { margin:0; color:var(--muted); font-size:16px; line-height:1.55; }

.projects, .experience, .skills, .about, .contact { padding: 120px 0; border-top:1px solid var(--line); }
.section-heading { margin-bottom: 42px; }
.compact-heading { grid-template-columns:1fr; }

.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.project-card { background:rgba(255,255,255,.32); border:1px solid var(--line); overflow:hidden; }
.project-card:first-child { grid-column:span 2; }
.project-art { position:relative; min-height:315px; overflow:hidden; }
.project-card:first-child .project-art { min-height:430px; }
.project-index { position:absolute; top:18px; left:18px; z-index:4; font-size:9px; letter-spacing:.13em; }
.project-art-copy { position:absolute; left:22px; bottom:20px; z-index:5; }
.project-art-copy small { display:block; margin-bottom:7px; font-size:8px; font-weight:900; letter-spacing:.14em; }
.project-art-copy strong { font-size:clamp(32px,4vw,58px); line-height:.9; letter-spacing:-.055em; }
.project-body { padding:24px; }
.project-body h3 { margin:0; font-size:24px; letter-spacing:-.03em; }
.project-body p { margin:12px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }
.tag-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.tag-row span { padding:7px 9px; border:1px solid var(--line); font-size:8px; font-weight:900; letter-spacing:.08em; }

.art-maelstrom { color:#dfffba; background:radial-gradient(circle at 75% 35%,rgba(199,255,80,.20),transparent 26%),linear-gradient(145deg,#102016,#08110c 58%,#10221b); }
.radar { position:absolute; width:250px; aspect-ratio:1; right:10%; top:50%; transform:translateY(-50%); border-radius:50%; border:1px solid rgba(199,255,80,.18); background:radial-gradient(circle,transparent 24%,rgba(199,255,80,.08) 25%,transparent 26%),radial-gradient(circle,transparent 46%,rgba(199,255,80,.08) 47%,transparent 48%),linear-gradient(rgba(199,255,80,.11),rgba(199,255,80,.11)) center/1px 100% no-repeat,linear-gradient(90deg,rgba(199,255,80,.11),rgba(199,255,80,.11)) center/100% 1px no-repeat; }
.radar::after { content:""; position:absolute; left:50%; top:50%; width:50%; height:1px; background:var(--screen); transform-origin:left center; animation:sweep 4s linear infinite; box-shadow:0 0 11px var(--screen); }
@keyframes sweep { to { transform:rotate(360deg); } }
.art-hook { color:#1a302c; background:radial-gradient(circle at 49% 60%,rgba(110,214,244,.9),rgba(89,186,219,.6) 34%,transparent 35%),linear-gradient(180deg,#f7dd9e 0 43%,#6bcbe6 43% 69%,#244d3e 69%); }
.art-hook::before { content:""; position:absolute; inset:44% -28% -18%; background:repeating-radial-gradient(ellipse at center,transparent 0 11px,rgba(255,255,255,.36) 12px 13px,transparent 14px 27px); }
.art-hook::after { content:"⌁"; position:absolute; right:8%; top:12%; font-size:125px; font-family:Georgia,serif; transform:rotate(-25deg); }
.art-backend { color:#eef4ff; background:radial-gradient(circle at 76% 21%,rgba(114,213,241,.2),transparent 26%),linear-gradient(145deg,#132631,#0b1118 58%,#111721); }
.server-stack { position:absolute; left:14%; right:14%; top:20%; display:grid; gap:8px; }
.server-stack span { padding:12px; text-align:center; border:1px solid rgba(114,213,241,.20); background:rgba(114,213,241,.08); font-size:8px; font-weight:900; letter-spacing:.14em; }
.art-ui { color:#2b1605; background:radial-gradient(circle at 76% 18%,rgba(255,255,255,.22),transparent 24%),linear-gradient(145deg,#ffc16a,#e48142 58%,#98432c); }
.hud-window { position:absolute; left:13%; right:13%; top:18%; height:165px; border:2px solid rgba(43,22,5,.48); background:rgba(255,250,232,.14); padding:15px; }
.hud-window span { display:block; height:14px; margin-bottom:9px; background:rgba(43,22,5,.24); }
.hud-window span:nth-child(2) { width:72%; }.hud-window span:nth-child(3) { width:48%; }
.hud-window i { display:block; width:48px; height:48px; margin:21px auto 0; border-radius:50%; border:8px solid rgba(43,22,5,.30); }

.experience-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); }
.experience-item { min-height:260px; padding:24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.experience-item:nth-child(3n) { border-right:0; }
.experience-item:nth-last-child(-n+3) { border-bottom:0; }
.experience-item > span { width:40px; height:40px; display:grid; place-items:center; background:var(--green); border:2px solid var(--ink); font-size:10px; font-weight:900; }
.experience-item h3 { margin:36px 0 10px; font-size:22px; letter-spacing:-.03em; }
.experience-item p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }

.skill-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); }
.skill-column { min-height:330px; padding:24px; border-right:1px solid var(--line); }
.skill-column:last-child { border-right:0; }
.skill-column > span { color:#709b31; font-size:10px; font-weight:900; }
.skill-column h3 { margin:34px 0 20px; font-size:23px; letter-spacing:-.03em; }
.skill-column ul { margin:0; padding:0; list-style:none; }
.skill-column li { padding:9px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:13px; }

.about { display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center; }
.about-terminal { background:var(--dark); color:#d8ffa1; border:2px solid var(--ink); padding:22px; box-shadow:17px 17px 0 rgba(18,19,15,.08); }
.terminal-topline { display:flex; justify-content:space-between; font-size:8px; letter-spacing:.13em; }
.terminal-name { margin:44px 0 8px; font-size:clamp(48px,6vw,74px); line-height:.82; letter-spacing:-.08em; font-weight:900; }
.terminal-sub { color:#7f936a; font-size:9px; letter-spacing:.14em; }
.terminal-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:28px; }
.terminal-stats div { min-height:75px; padding:12px; display:grid; align-content:center; border:1px solid rgba(199,255,80,.14); }
.terminal-stats span { color:#718460; font-size:7px; letter-spacing:.13em; }.terminal-stats strong { margin-top:5px; font-size:11px; }
.about-copy p:not(.section-kicker) { color:var(--muted); font-size:16px; line-height:1.6; }

.contact h2 { max-width:900px; font-size:clamp(58px,7.5vw,108px); }
.contact-intro { max-width:670px; color:var(--muted); font-size:16px; line-height:1.55; }
.contact-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:48px; }
.contact-card { min-height:150px; padding:22px; border:2px solid var(--ink); position:relative; display:grid; align-content:center; transition:transform .17s ease,background .17s ease; }
.contact-card:hover { transform:translateY(-4px); background:var(--green); }
.contact-card span { font-size:8px; font-weight:900; letter-spacing:.14em; }.contact-card strong { margin-top:7px; font-size:24px; }.contact-card > i { position:absolute; right:20px; top:18px; font-size:24px; }
.edit-note { color:var(--muted); font-size:11px; margin-top:14px; } code { font-family:Consolas,"Courier New",monospace; background:rgba(18,19,15,.08); padding:2px 5px; }
.footer { min-height:90px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-size:9px; font-weight:900; letter-spacing:.1em; }

@media (max-width: 1000px) {
  .intro-grid,.section-heading,.about { grid-template-columns:1fr; }
  .experience-grid { grid-template-columns:repeat(2,1fr); }
  .experience-item:nth-child(3n) { border-right:1px solid var(--line); }
  .experience-item:nth-child(2n) { border-right:0; }
  .experience-item:nth-last-child(-n+3) { border-bottom:1px solid var(--line); }
  .experience-item:nth-last-child(-n+2) { border-bottom:0; }
  .skill-grid { grid-template-columns:repeat(2,1fr); }
  .skill-column:nth-child(2) { border-right:0; }
  .skill-column:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .hero-copy { width:min(48vw,520px); }
}

@media (max-width: 720px) {
  html { scroll-snap-type:none; }
  .topbar { top:max(10px, env(safe-area-inset-top)); width:min(calc(100% - 28px),var(--max)); }
  .topbar-nav { display:none; }
  .hero-scroll { height:auto; min-height:100svh; }
  .hero-sticky { position:relative; height:100svh; min-height:620px; }
  .hero-disc-snap,
  .hero-menu-snap { display:none; }
  .hero-copy { left:18px; right:18px; top:46%; bottom:auto; width:auto; transform:translateY(-50%); padding:18px; background:rgba(239,233,218,.76); backdrop-filter:blur(9px); }
  .hero-copy h1 { font-size:clamp(45px,13vw,66px); }
  .hero-lead { font-size:14px; }
  .hero-scroll-label,
  .hero-progress { display:none; }

  .mobile-hero-control {
    --scrub-progress: 0%;
    position:absolute;
    z-index:65;
    left:14px;
    right:14px;
    bottom:max(14px, env(safe-area-inset-bottom));
    display:block;
    padding:12px 13px 11px;
    color:#eaffc8;
    background:rgba(5,11,6,.88);
    border:1px solid rgba(199,255,80,.34);
    clip-path:polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    box-shadow:0 12px 34px rgba(0,0,0,.28), 0 0 24px rgba(154,231,72,.07) inset;
    backdrop-filter:blur(12px);
    transition:border-color .2s ease, box-shadow .2s ease;
  }

  .mobile-hero-control::before {
    content:"";
    position:absolute;
    inset:5px;
    pointer-events:none;
    border:1px solid rgba(199,255,80,.07);
    clip-path:inherit;
  }

  .mobile-hero-control.is-complete {
    border-color:rgba(199,255,80,.76);
    box-shadow:0 12px 34px rgba(0,0,0,.30), 0 0 28px rgba(154,231,72,.13);
  }

  .mobile-hero-control-head,
  .mobile-hero-control-foot {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-family:Consolas, "Courier New", monospace;
  }

  .mobile-hero-control-head strong {
    color:#c7ff50;
    font-size:10px;
    letter-spacing:.15em;
  }

  .mobile-hero-control-head output {
    color:rgba(229,255,195,.72);
    font-size:9px;
    font-weight:800;
    letter-spacing:.10em;
  }

  .mobile-hero-slider-shell {
    position:relative;
    display:block;
    height:42px;
    margin:3px 0 0;
  }

  .mobile-hero-slider {
    position:absolute;
    z-index:4;
    left:19px;
    right:19px;
    top:0;
    bottom:0;
    width:auto;
    height:42px;
    margin:0;
    opacity:0;
    cursor:ew-resize;
    touch-action:pan-y;
  }

  .mobile-hero-slider-track {
    position:absolute;
    z-index:1;
    left:19px;
    right:19px;
    top:50%;
    height:8px;
    transform:translateY(-50%);
    background:
      linear-gradient(90deg, transparent calc(67% - 1px), rgba(219,255,169,.62) calc(67% - 1px) calc(67% + 1px), transparent calc(67% + 1px)),
      rgba(199,255,80,.12);
    border:1px solid rgba(199,255,80,.22);
  }

  .mobile-hero-slider-track i {
    position:absolute;
    inset:-1px auto -1px -1px;
    width:var(--scrub-progress);
    background:linear-gradient(90deg, #709f2e, #c7ff50);
    box-shadow:0 0 12px rgba(199,255,80,.34);
  }

  .mobile-hero-slider-track b {
    position:absolute;
    left:var(--scrub-progress);
    top:50%;
    width:44px;
    height:30px;
    display:grid;
    place-items:center;
    transform:translate(-50%, -50%);
    color:#10150c;
    background:#c7ff50;
    border:2px solid #0d130a;
    box-shadow:0 0 0 1px rgba(224,255,187,.6), 0 0 18px rgba(199,255,80,.28);
    font:900 7px/1 Consolas, "Courier New", monospace;
    letter-spacing:.08em;
    line-height:1;
  }

  .mobile-hero-control-foot {
    color:rgba(214,239,184,.48);
    font-size:7px;
    font-weight:800;
    letter-spacing:.12em;
  }

  .monitor-ui { display:none; }
  .section-shell { width:min(calc(100% - 28px),var(--max)); }
  .project-grid,.experience-grid,.skill-grid,.contact-grid { grid-template-columns:1fr; }
  .project-card:first-child { grid-column:span 1; }
  .experience-item,.experience-item:nth-child(3n),.experience-item:nth-child(2n) { border-right:0; border-bottom:1px solid var(--line); }
  .experience-item:last-child { border-bottom:0; }
  .skill-column,.skill-column:nth-child(2) { border-right:0; border-bottom:1px solid var(--line); }
  .skill-column:last-child { border-bottom:0; }
  .terminal-stats { grid-template-columns:1fr; }
  .footer { flex-direction:column; justify-content:center; align-items:flex-start; gap:5px; padding-bottom:env(safe-area-inset-bottom); }
}

@media (max-width: 760px) { .topbar { top:max(10px, env(safe-area-inset-top)); min-height: 58px; padding: 10px 12px; width:min(calc(100% - 24px),var(--max)); } .topbar-nav { gap: 14px; font-size: 10px; } }

/* === TEMPORARY MONITOR CALIBRATION PASS === */
.monitor-ui {
  left: 0 !important;
  top: 0 !important;
  width: 2000px !important;
  height: 1400px !important;
  transform-origin: 0 0 !important;
  clip-path: none;
  background: transparent !important;
  border: 0 !important;
  filter: none !important;
}

.monitor-calibration {
  position: absolute;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}

.monitor-calibration.visible {
  opacity: 1;
}

.monitor-calibration.handles-hidden .cal-handle {
  display: none;
}

.cal-handle {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #0c1308;
  background: #c7ff50;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 18px rgba(199,255,80,.65);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}

.cal-handle:active { cursor: grabbing; }

.cal-handle::after {
  content: attr(data-corner);
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 5px;
  border-radius: 4px;
  background: rgba(6,10,5,.92);
  color: #dfff9c;
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.cal-panel {
  position: fixed;
  left: 18px;
  bottom: 18px;
  width: min(390px, calc(100vw - 36px));
  padding: 14px;
  border: 1px solid rgba(199,255,80,.35);
  border-radius: 12px;
  background: rgba(8, 13, 7, .94);
  color: #ebffc8;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  pointer-events: auto;
  backdrop-filter: blur(10px);
}

.cal-panel > strong {
  display: block;
  font-size: 11px;
  letter-spacing: .13em;
}

.cal-panel > small {
  display: block;
  margin-top: 6px;
  color: #a8bd91;
  font-size: 11px;
  line-height: 1.4;
}

#alignmentOutput {
  width: 100%;
  height: 116px;
  margin-top: 10px;
  padding: 9px;
  resize: none;
  border: 1px solid rgba(199,255,80,.20);
  border-radius: 7px;
  outline: none;
  background: #050905;
  color: #dfff9c;
  font: 11px/1.45 Consolas, "Courier New", monospace;
}

.cal-actions {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}

.cal-actions button {
  flex: 1;
  min-height: 35px;
  padding: 0 10px;
  border: 1px solid rgba(199,255,80,.32);
  border-radius: 7px;
  background: rgba(199,255,80,.08);
  color: #dfff9c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  cursor: pointer;
}

.cal-actions button:hover { background: rgba(199,255,80,.16); }

/* No floating pill header: simple overlay navigation on the hero image. */
.topbar {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(calc(100% - 48px), var(--max));
  min-height: 82px;
  padding: 0;
  color: #171813;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  opacity: 1;
  pointer-events: auto;
}

.topbar.visible { transform: translateX(-50%); }
.topbar-nav {
  color: #f5f0e5;
  font-size: 12px;
  text-shadow: 0 2px 12px rgba(0,0,0,.72);
}


/* === TRANSPARENT MONITOR COMPOSITING ===
   The photographed screen is the background. Only UI glyphs/lines/highlights are projected. */
.monitor-ui {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Whole-screen tint layers caused the pasted-on rectangle effect. */
.monitor-scanlines,
.monitor-glass {
  display: none !important;
}

/* Keep only interface structure on top of the real monitor. */
.monitor-status,
.monitor-menu,
.monitor-footer {
  background: transparent !important;
}

.monitor-status {
  border-bottom-color: rgba(199, 255, 80, 0.16);
}

.monitor-menu {
  border-right-color: rgba(199, 255, 80, 0.14);
}

.monitor-footer {
  border-top-color: rgba(199, 255, 80, 0.14);
}

.monitor-menu button:not(.active) {
  background: transparent !important;
}

.monitor-menu button.active {
  background: rgba(199, 255, 80, 0.88);
  box-shadow: 0 0 16px rgba(199, 255, 80, 0.12);
}

/* Final monitor readability pass */
.monitor-menu button span {
  font-size: clamp(10px, .88vw, 14px);
}
.monitor-menu button strong {
  font-size: clamp(13px, 1.12vw, 19px);
  letter-spacing: .075em;
}

.monitor-calibration[hidden] { display: none !important; }


/* =========================================================
   RESPONSIVE HOLOGRAPHIC PORTFOLIO UI
   Desktop >= 1200px: calibrated monitor UI.
   Smaller screens: console-driven hologram after disc insert.
   ========================================================= */

.holo-ui {
  display: none;
}

@media (max-width: 1199px) {
  /* The photographed monitor is no longer used as an interface surface. */
  .monitor-ui,
  .monitor-calibration {
    display: none !important;
  }

  .holo-ui {
    --holo: #c7ff50;
    --holo-soft: rgba(199, 255, 80, 0.24);
    --holo-dim: rgba(205, 255, 145, 0.72);
    position: absolute;
    z-index: 55;
    left: 50%;
    top: 54%;
    width: min(690px, calc(100vw - 52px));
    height: min(500px, 58vh);
    transform: translate(-50%, -42%) scale(0.92);
    transform-origin: 50% 100%;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s linear, transform .22s ease-out, visibility 0s linear .22s;
  }

  .holo-ui.energizing,
  .holo-ui.visible {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  .holo-ui.energizing {
    transform: translate(-50%, -42%) scale(0.96);
  }

  .holo-ui.visible {
    transform: translate(-50%, -42%) scale(1);
    pointer-events: auto;
  }

  .holo-projection {
    position: absolute;
    inset: -18% -12% -20%;
    pointer-events: none;
    overflow: visible;
  }

  .holo-beam {
    position: absolute;
    left: 50%;
    bottom: -7%;
    width: 46%;
    height: 115%;
    transform: translateX(-50%);
    clip-path: polygon(42% 100%, 58% 100%, 92% 0, 8% 0);
    background: linear-gradient(to top,
      rgba(199,255,80,.20),
      rgba(199,255,80,.055) 58%,
      transparent 100%);
    filter: blur(1px);
    opacity: 0;
  }

  .holo-ui.energizing .holo-beam,
  .holo-ui.visible .holo-beam {
    animation: holoBeamIn .55s ease-out both;
  }

  .holo-floor-grid {
    position: absolute;
    left: 50%;
    bottom: -3%;
    width: 76%;
    height: 42%;
    transform: translateX(-50%) perspective(440px) rotateX(69deg);
    transform-origin: 50% 100%;
    background-image:
      linear-gradient(rgba(199,255,80,.21) 1px, transparent 1px),
      linear-gradient(90deg, rgba(199,255,80,.21) 1px, transparent 1px);
    background-size: 34px 27px;
    mask-image: radial-gradient(ellipse at center, #000 18%, rgba(0,0,0,.78) 48%, transparent 76%);
    opacity: 0;
  }

  .holo-ui.energizing .holo-floor-grid,
  .holo-ui.visible .holo-floor-grid {
    animation: gridBoot .62s ease-out both;
  }

  .holo-orbit {
    position: absolute;
    left: 50%;
    top: 54%;
    border: 1px solid rgba(199,255,80,.32);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) rotateX(68deg);
    box-shadow: 0 0 18px rgba(199,255,80,.06);
  }

  .orbit-a { width: 78%; height: 48%; }
  .orbit-b { width: 58%; height: 34%; border-style: dashed; }
  .orbit-c { width: 38%; height: 23%; }

  .holo-ui.energizing .holo-orbit,
  .holo-ui.visible .holo-orbit {
    animation: orbitIn .48s ease-out both, orbitDrift 8s linear .48s infinite;
  }
  .holo-ui.energizing .orbit-b,
  .holo-ui.visible .orbit-b { animation-delay: .08s, .56s; }
  .holo-ui.energizing .orbit-c,
  .holo-ui.visible .orbit-c { animation-delay: .15s, .63s; }

  .holo-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--holo);
    box-shadow: 0 0 9px var(--holo);
    opacity: 0;
  }
  .hp-1 { left: 23%; top: 35%; }
  .hp-2 { left: 72%; top: 27%; }
  .hp-3 { left: 81%; top: 61%; }
  .hp-4 { left: 31%; top: 73%; }
  .hp-5 { left: 60%; top: 14%; }

  .holo-ui.energizing .holo-particle,
  .holo-ui.visible .holo-particle {
    animation: particleBlink 2.2s ease-in-out infinite;
  }
  .hp-2 { animation-delay: -.4s !important; }
  .hp-3 { animation-delay: -.9s !important; }
  .hp-4 { animation-delay: -1.3s !important; }
  .hp-5 { animation-delay: -1.7s !important; }

  .holo-terminal {
    position: absolute;
    left: 50%;
    top: 49%;
    width: min(610px, 91%);
    min-height: 310px;
    transform: translate(-50%, -50%) perspective(900px) rotateX(1.2deg);
    padding: 18px 20px 17px;
    color: #ecffd0;
    background:
      linear-gradient(180deg, rgba(7,18,8,.77), rgba(5,13,6,.63)),
      repeating-linear-gradient(to bottom, transparent 0 4px, rgba(199,255,80,.025) 5px);
    border: 1px solid rgba(199,255,80,.38);
    clip-path: polygon(2% 0, 98% 0, 100% 4%, 100% 96%, 98% 100%, 2% 100%, 0 96%, 0 4%);
    box-shadow:
      0 0 0 1px rgba(199,255,80,.05) inset,
      0 0 42px rgba(139,230,55,.10),
      0 20px 70px rgba(0,0,0,.18);
    opacity: 0;
    filter: blur(2px);
  }

  .holo-ui.energizing .holo-terminal {
    animation: terminalBoot .55s .12s ease-out both;
  }

  .holo-ui.visible .holo-terminal {
    opacity: 1;
    filter: none;
    transform: translate(-50%, -50%) perspective(900px) rotateX(1.2deg);
  }

  .holo-terminal::before,
  .holo-terminal::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  .holo-terminal::before {
    inset: 0;
    background: linear-gradient(110deg, rgba(255,255,255,.045), transparent 26% 78%, rgba(199,255,80,.025));
  }

  .holo-terminal::after {
    left: 10px;
    right: 10px;
    top: -3px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(199,255,80,.9), transparent);
    box-shadow: 0 0 12px rgba(199,255,80,.45);
    animation: holoScan 3.8s linear infinite;
  }

  .holo-topline,
  .holo-footline {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
  }

  .holo-topline {
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(199,255,80,.18);
  }

  .holo-online { color: var(--holo); }

  .holo-boot-copy {
    position: relative;
    z-index: 2;
    min-height: 198px;
    padding: 28px 6px 20px;
    display: grid;
    align-content: center;
    gap: 14px;
    color: rgba(223,255,184,.78);
    font: 800 13px/1.2 Consolas, "Courier New", monospace;
    letter-spacing: .07em;
  }

  .holo-boot-copy span {
    opacity: 0;
    transform: translateX(-8px);
  }

  .holo-ui.energizing .holo-boot-copy span:nth-child(1) { animation: bootLine .22s .17s both; }
  .holo-ui.energizing .holo-boot-copy span:nth-child(2) { animation: bootLine .22s .31s both; }
  .holo-ui.energizing .holo-boot-copy span:nth-child(3) { animation: bootLine .22s .45s both; }

  .holo-menu {
    position: relative;
    z-index: 3;
    padding: 17px 4px 14px;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .holo-ui.visible .holo-boot-copy { display: none; }
  .holo-ui.visible .holo-menu { display: grid; }

  .holo-menu button {
    min-height: 57px;
    padding: 10px 12px;
    border: 1px solid rgba(199,255,80,.20);
    background: rgba(199,255,80,.035);
    color: #dfffb9;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 7px;
    text-align: left;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
  }

  .holo-menu button:hover,
  .holo-menu button:focus-visible {
    outline: none;
    background: rgba(199,255,80,.12);
    border-color: rgba(199,255,80,.52);
    transform: translateY(-2px);
  }

  .holo-menu button span {
    color: rgba(199,255,80,.70);
    font-size: 12px;
    font-weight: 900;
  }

  .holo-menu button strong {
    font-size: 16px;
    letter-spacing: .07em;
  }

  .holo-menu button i {
    color: var(--holo);
    font-style: normal;
    font-size: 17px;
  }

  .holo-footline {
    padding-top: 12px;
    border-top: 1px solid rgba(199,255,80,.16);
    color: rgba(202,230,173,.64);
    font-size: 9px;
  }

  @keyframes holoBeamIn {
    from { opacity: 0; transform: translateX(-50%) scaleY(.15); }
    to { opacity: .88; transform: translateX(-50%) scaleY(1); }
  }

  @keyframes gridBoot {
    from { opacity: 0; transform: translateX(-50%) perspective(440px) rotateX(69deg) scale(.62); }
    to { opacity: .82; transform: translateX(-50%) perspective(440px) rotateX(69deg) scale(1); }
  }

  @keyframes orbitIn {
    from { opacity: 0; transform: translate(-50%, -50%) rotateX(68deg) scale(.45); }
    to { opacity: .72; transform: translate(-50%, -50%) rotateX(68deg) scale(1); }
  }

  @keyframes orbitDrift {
    from { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(0deg); }
    to { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(360deg); }
  }

  @keyframes particleBlink {
    0%, 100% { opacity: .18; transform: translateY(0); }
    50% { opacity: .95; transform: translateY(-10px); }
  }

  @keyframes terminalBoot {
    0% { opacity: 0; filter: blur(4px); transform: translate(-50%, -42%) perspective(900px) rotateX(5deg) scaleY(.12); }
    45% { opacity: .95; filter: blur(1px); transform: translate(-50%, -50%) perspective(900px) rotateX(2deg) scaleY(1.035); }
    100% { opacity: 1; filter: none; transform: translate(-50%, -50%) perspective(900px) rotateX(1.2deg) scaleY(1); }
  }

  @keyframes bootLine {
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes holoScan {
    0% { transform: translateY(2px); opacity: 0; }
    8% { opacity: .85; }
    90% { opacity: .20; }
    100% { transform: translateY(285px); opacity: 0; }
  }
}

@media (max-width: 720px) {
  .holo-ui {
    top: 50%;
    width: calc(100vw - 36px);
    height: min(410px, 53vh);
    transform: translate(-50%, -50%) scale(.97);
  }

  .holo-ui.energizing,
  .holo-ui.visible {
    transform: translate(-50%, -50%) scale(1);
  }

  /* On phones this is a physical console screen, not a floating hologram. */
  .holo-projection { display:none; }

  .holo-terminal {
    width: 100%;
    min-height: 332px;
    padding: 15px 14px 14px;
    background:
      linear-gradient(180deg, rgba(8,18,8,.97), rgba(4,10,5,.98)),
      repeating-linear-gradient(to bottom, transparent 0 4px, rgba(199,255,80,.018) 5px);
    border:1px solid rgba(199,255,80,.36);
    border-radius:3px;
    clip-path:none;
    box-shadow:
      0 0 0 6px rgba(3,7,4,.90),
      0 0 0 7px rgba(199,255,80,.13),
      0 22px 50px rgba(0,0,0,.42),
      0 0 30px rgba(116,177,53,.05) inset;
  }

  .holo-terminal::before {
    background:
      linear-gradient(112deg, rgba(255,255,255,.035), transparent 24% 82%),
      repeating-linear-gradient(to bottom, transparent 0 3px, rgba(199,255,80,.018) 4px);
  }

  .holo-terminal::after {
    left:12px;
    right:12px;
    top:0;
    height:1px;
    opacity:.45;
    animation:none;
    box-shadow:0 0 8px rgba(199,255,80,.22);
  }

  .holo-ui.energizing .holo-terminal {
    animation:mobileScreenBoot .34s ease-out both;
  }

  .holo-ui.visible .holo-terminal {
    transform:translate(-50%, -50%);
  }

  .holo-topline {
    font-size: 9px;
    letter-spacing: .09em;
  }

  .holo-menu {
    grid-template-columns: 1fr;
    gap: 7px;
    padding-top: 13px;
  }

  .holo-menu button {
    min-height: 48px;
    background:rgba(199,255,80,.025);
    border-color:rgba(199,255,80,.16);
    box-shadow:none;
  }

  .holo-menu button strong { font-size: 15px; }
  .holo-boot-copy { min-height: 225px; font-size: 11px; }
  .holo-footline { font-size: 8px; }

  /* Keep the final console/desk frame visible under the hologram. */
  .hero-frame { object-position: 64% center; }

  @keyframes mobileScreenBoot {
    0% { opacity:0; filter:brightness(2) blur(1px); transform:translate(-50%, -50%) scaleY(.03); }
    62% { opacity:1; filter:brightness(1.18); transform:translate(-50%, -50%) scaleY(1.015); }
    100% { opacity:1; filter:none; transform:translate(-50%, -50%) scaleY(1); }
  }
}


/* =========================================================
   FINAL DESKTOP MONITOR TYPOGRAPHY + TRANSFORMED TEXT QUALITY
   Minimum monitor text size: 15px.
   ========================================================= */
@media (min-width: 1200px) {
  .monitor-ui,
  .monitor-ui * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .monitor-ui {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    will-change: transform;
    filter: none !important;
  }

  .monitor-status { font-size: clamp(15px, 1vw, 19px); }
  .monitor-menu button span { font-size: clamp(15px, 1vw, 19px); font-weight: 900; }
  .monitor-menu button strong { font-size: clamp(19px, 1.25vw, 25px); font-weight: 900; letter-spacing: .055em; }
  .monitor-label { font-size: clamp(15px, .95vw, 18px); font-weight: 900; }
  .monitor-panel h2 { font-size: clamp(30px, 2.2vw, 42px); }
  .monitor-role { font-size: clamp(17px, 1.1vw, 21px); }
  .monitor-text { font-size: clamp(15px, 1vw, 19px); line-height: 1.42; }
  .monitor-open { font-size: clamp(16px, 1.05vw, 20px); }
  .monitor-footer { font-size: clamp(15px, .92vw, 18px); }

  .monitor-status,
  .monitor-menu button,
  .monitor-label,
  .monitor-panel h2,
  .monitor-role,
  .monitor-text,
  .monitor-open,
  .monitor-footer {
    text-shadow: 0 0 .35px currentColor, 0 0 4px rgba(199,255,80,.08);
  }
}

/* =========================================================
   PROJECT CONTENT + FILTER BAR
   ========================================================= */
.project-filter-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 26px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.project-filter-label {
  display: grid;
  gap: 3px;
  flex: 0 0 auto;
}

.project-filter-label span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
}

.project-filter-label strong {
  font-size: 11px;
  letter-spacing: .11em;
}

.project-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.project-filter {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(18, 19, 15, .20);
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .10em;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.project-filter:hover {
  transform: translateY(-1px);
  color: var(--ink);
}

.project-filter.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream-2);
}

.project-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.project-card,
.project-card:first-child {
  grid-column: span 1;
}

.project-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: opacity .18s ease, transform .18s ease;
}

.project-card.project-hidden {
  display: none;
}

.project-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}

.project-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.002);
  transition: transform .45s ease;
}

.project-card:hover .project-cover {
  transform: scale(1.025);
}

.project-media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,10,7,.03), rgba(8,10,7,.08) 45%, rgba(8,10,7,.76) 100%),
    linear-gradient(90deg, rgba(8,10,7,.18), transparent 46%);
  pointer-events: none;
}

.project-media .project-index {
  color: #f3f0e6;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.project-media .project-art-copy {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

.project-media .project-art-copy small {
  color: #d8ff9e;
}

.project-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
}

.project-title-row h3 {
  flex: 1 1 auto;
}

.project-kind {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase;
}

.project-highlights {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.project-highlights li {
  position: relative;
  padding-left: 16px;
  color: #40433b;
  font-size: 12px;
  line-height: 1.48;
}

.project-highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 18px;
}

.project-gallery img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(18,19,15,.12);
  background: #111;
}

.project-external {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-top: 18px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  color: #557a23;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .10em;
  gap: .55em;
}

/* VR is a first-class skill area, so the skills section now supports 6 balanced groups. */
.skill-grid {
  grid-template-columns: repeat(3, 1fr);
}

.skill-column:nth-child(3n) {
  border-right: 0;
}

.skill-column:nth-child(-n+3) {
  border-bottom: 1px solid var(--line);
}

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

  .project-filter-wrap {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-filter-bar {
    justify-content: flex-start;
  }

  .skill-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .skill-column:nth-child(3n) {
    border-right: 1px solid var(--line);
  }

  .skill-column:nth-child(2n) {
    border-right: 0;
  }

  .skill-column:nth-child(-n+4) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  .project-filter-bar {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none;
  }

  .project-filter-bar::-webkit-scrollbar {
    display: none;
  }

  .project-filter {
    flex: 0 0 auto;
  }

  .project-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .project-kind {
    text-align: left;
  }

  .project-gallery {
    gap: 5px;
  }

  .skill-grid {
    grid-template-columns: 1fr;
  }

  .skill-column,
  .skill-column:nth-child(2n),
  .skill-column:nth-child(3n) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .skill-column:last-child {
    border-bottom: 0;
  }
}


/* =========================================================
   MONITOR UI 2X INTERNAL RENDER SURFACE
   The outer projective plane is 2000x1400, while the UI is laid
   out at 1000x700 and rendered at 2x before perspective mapping.
   This keeps the calibrated screen corners unchanged while giving
   transformed text substantially more raster resolution.
   ========================================================= */
.monitor-render-surface {
  position: relative;
  width: 1000px;
  height: 700px;
  transform: scale(2) translateZ(0);
  transform-origin: 0 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.monitor-render-surface,
.monitor-render-surface * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* =========================================================
   PROJECT VIDEO + EXPANDED MEDIA GALLERIES
   ========================================================= */
.project-video-wrap {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.project-video-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 10px;
}

.project-video-heading span {
  color: #557a23;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.project-video-heading strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.project-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  background: #0a0c09;
  border: 1px solid rgba(18,19,15,.16);
}

.project-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-gallery-item {
  margin: 0;
  min-width: 0;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(18,19,15,.10);
}

.project-gallery-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border: 0;
}

.project-gallery-open {
  width: 100%;
  padding: 0;
  display: block;
  border: 0;
  background: #0a0c09;
  cursor: zoom-in;
  overflow: hidden;
}

.project-gallery-open img {
  transition: transform .24s ease, opacity .24s ease;
}

.project-gallery-open:hover img,
.project-gallery-open:focus-visible img {
  transform: scale(1.035);
  opacity: .9;
}

.project-gallery-open:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

.project-gallery-item figcaption {
  padding: 7px 8px 8px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.3;
}

body.lightbox-open { overflow: hidden; }

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: 64px 88px 36px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 22px;
  color: #f4f5ea;
  background: rgba(4, 6, 4, .94);
  backdrop-filter: blur(14px);
}

.image-lightbox[hidden] { display: none; }

.lightbox-figure {
  min-width: 0;
  max-width: min(1180px, 100%);
  max-height: calc(100vh - 100px);
  margin: auto;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.lightbox-figure img {
  max-width: 100%;
  max-height: calc(100vh - 145px);
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  box-shadow: 0 22px 70px rgba(0,0,0,.5);
}

.lightbox-figure figcaption {
  color: rgba(244,245,234,.76);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.lightbox-close,
.lightbox-nav {
  border: 1px solid rgba(244,245,234,.28);
  color: #f4f5ea;
  background: rgba(10,15,10,.72);
  cursor: pointer;
}

.lightbox-close:hover,
.lightbox-nav:hover,
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  color: #10140d;
  background: var(--screen);
  outline: none;
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  min-height: 38px;
  padding: 0 13px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.lightbox-nav {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 23px;
}

@media (max-width: 720px) {
  .image-lightbox {
    padding: 58px 10px 24px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .lightbox-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 42px;
    height: 42px;
    font-size: 19px;
    transform: translateY(-50%);
    background: rgba(10,15,10,.86);
  }

  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close { top: 10px; right: 10px; }
  .lightbox-figure img { max-height: calc(100svh - 130px); }
}

@media (max-width: 720px) {
  .project-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-video-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}


/* Main project media can be a video instead of a static cover */
.project-media-video {
  background: #090b08;
}

.project-cover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #090b08;
}

.project-cover-fallback {
  position: absolute;
  inset: 0;
}

/* Author-level display rules on .project-cover otherwise override the
   browser's built-in [hidden] rule and leave the poster above the video. */
.project-cover-video[hidden],
.project-cover-fallback[hidden] {
  display: none;
}

.project-media-video .project-media-shade {
  background:
    linear-gradient(180deg, rgba(8,10,7,.02), rgba(8,10,7,.02) 34%, rgba(8,10,7,.72) 100%),
    linear-gradient(90deg, rgba(8,10,7,.14), transparent 46%);
}

.project-media-video .project-index,
.project-media-video .project-art-copy {
  z-index: 2;
}

.project-media-video .project-art-copy {
  max-width: calc(100% - 110px);
}

.project-cover-video::-webkit-media-controls-panel {
  background: linear-gradient(180deg, rgba(11, 13, 10, .1), rgba(11, 13, 10, .72));
}


/* Main project video playback + mobile canvas framing guard */
.project-media-video .project-media-shade { pointer-events: none; }
.project-cover-video { z-index: 0; }
.project-cover-fallback { z-index: 0; }
.project-media-video .project-index,
.project-media-video .project-art-copy {
  pointer-events: none;
  transition: opacity .2s ease;
}
.project-media-video:hover .project-index,
.project-media-video:hover .project-art-copy { opacity: .18; }

@media (max-width: 720px) {
  .hero-canvas { transform: none !important; }
}


/* =========================================================
   INTERACTIVE 3D BUILD-CORE HERO — LOCAL CONCEPT
   ========================================================= */
.legacy-hero { display:none !important; }

.hero3d-scroll {
  position:relative;
  height:330svh;
  color:#f0ecdf;
  background:#070907;
  scroll-snap-align:none;
}

.hero3d-sticky {
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  min-height:650px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 68% 50%, rgba(123,169,54,.12), transparent 31%),
    linear-gradient(135deg, #111510 0%, #080a08 52%, #050605 100%);
}

.hero3d-canvas,
.hero3d-fallback,
.hero3d-atmosphere {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.hero3d-canvas {
  z-index:2;
  display:block;
  visibility:hidden;
  background:#070907;
  touch-action:pan-y;
  cursor:grab;
}
.hero3d-canvas:active { cursor:grabbing; }
.webgl-ready .hero3d-canvas { visibility:visible; }

.hero3d-atmosphere {
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,7,5,.88) 0%, rgba(5,7,5,.36) 37%, transparent 61%),
    linear-gradient(180deg, rgba(0,0,0,.16), transparent 22%, transparent 78%, rgba(0,0,0,.46)),
    radial-gradient(circle at 71% 48%, transparent 0 23%, rgba(2,3,2,.14) 54%, rgba(2,3,2,.42) 100%);
}

.hero3d-atmosphere::after {
  content:"";
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

.hero3d-copy {
  position:absolute;
  isolation:isolate;
  text-shadow:0 2px 5px rgba(0,0,0,.85), 0 7px 24px rgba(0,0,0,.65);
  z-index:10;
  left:max(34px, calc((100vw - var(--max)) / 2));
  top:50%;
  width:min(550px, 40vw);
  transform:translateY(-50%);
  pointer-events:none;
  transition:opacity .12s linear, transform .12s linear;
}

.hero3d-copy::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-28px -30px;
  background:radial-gradient(ellipse at 42% 48%, rgba(4,7,4,.82) 0%, rgba(4,7,4,.62) 48%, transparent 76%);
  filter:blur(14px);
  pointer-events:none;
}

.hero3d-eyebrow {
  margin:0 0 22px;
  color:#b8d884;
  font-size:10px;
  font-weight:900;
  letter-spacing:.20em;
}

.hero3d-copy h1 {
  margin:0;
  max-width:570px;
  color:#f0ecdf;
  font-size:clamp(62px, 6vw, 104px);
  font-weight:900;
  line-height:.88;
  letter-spacing:-.072em;
}

.hero3d-copy h1 em {
  display:block;
  color:#9bd13e;
  font-style:normal;
}

.hero3d-copy .hero3d-description {
  max-width:510px;
  margin:26px 0 0;
  color:rgba(233,237,224,.65);
  font-size:16px;
  line-height:1.55;
}

.hero3d-skills {
  margin:18px 0 0;
  color:#b8d884;
  font:700 10px/1.7 Consolas, "Courier New", monospace;
  letter-spacing:.08em;
}

.hero3d-console-label {
  position:absolute;
  z-index:8;
  right:max(32px, calc((100vw - var(--max)) / 2));
  top:96px;
  display:flex;
  gap:24px;
  color:rgba(221,236,202,.48);
  font:800 9px/1 Consolas, "Courier New", monospace;
  letter-spacing:.14em;
  pointer-events:none;
}
.hero3d-console-label span:last-child { color:#a9de4c; }

.hero3d-scroll-cue {
  position:absolute;
  z-index:12;
  left:max(34px, calc((100vw - var(--max)) / 2));
  bottom:max(26px, env(safe-area-inset-bottom));
  width:min(420px, calc(100vw - 68px));
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:13px;
  color:rgba(231,239,221,.60);
  font:900 8px/1 Consolas, "Courier New", monospace;
  letter-spacing:.13em;
}
.hero3d-scroll-cue > div {
  position:relative;
  height:3px;
  overflow:hidden;
  background:rgba(199,255,80,.13);
}
.hero3d-scroll-cue i {
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  background:#a9e048;
  box-shadow:0 0 12px rgba(169,224,72,.46);
}
.hero3d-scroll-cue b { color:#a9e048; }


.hero3d-quicklinks {
  position:absolute;
  z-index:15;
  right:max(34px, calc((100vw - var(--max)) / 2));
  bottom:48px;
  width:min(370px, 31vw);
  padding:14px;
  display:grid;
  gap:7px;
  color:#eaffc8;
  background:rgba(5,11,6,.92);
  border:1px solid rgba(199,255,80,.27);
  box-shadow:0 24px 70px rgba(0,0,0,.42), 0 0 28px rgba(132,199,59,.05) inset;
  backdrop-filter:blur(14px);
  opacity:0;
  visibility:hidden;
  transform:translateY(18px) scale(.97);
  transform-origin:100% 100%;
  pointer-events:none;
  transition:opacity .28s ease, transform .34s cubic-bezier(.2,.8,.2,1), visibility 0s .34s;
}

.hero3d-scroll.is-online .hero3d-quicklinks {
  opacity:var(--menu-exit-opacity, 1);
  visibility:visible;
  transform:translateY(var(--menu-exit-y, 0px));
  transition:none;
  pointer-events:auto;
  transition-delay:0s;
}

.hero3d-quicklinks-head {
  padding:2px 3px 10px;
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid rgba(199,255,80,.15);
  font:900 9px/1 Consolas, "Courier New", monospace;
  letter-spacing:.13em;
}
.hero3d-quicklinks-head strong { color:#a9e048; }

.hero3d-quicklinks a {
  min-height:47px;
  padding:0 12px;
  display:grid;
  grid-template-columns:32px 1fr auto;
  align-items:center;
  gap:8px;
  border:1px solid rgba(199,255,80,.12);
  background:rgba(199,255,80,.025);
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.hero3d-quicklinks a:hover,
.hero3d-quicklinks a:focus-visible {
  outline:none;
  background:rgba(199,255,80,.10);
  border-color:rgba(199,255,80,.40);
  transform:translateX(-3px);
}
.hero3d-quicklinks a span { color:#8bbd3a; font:900 10px/1 Consolas, monospace; }
.hero3d-quicklinks a strong { font-size:12px; letter-spacing:.11em; }

.hero3d-fallback {
  visibility:hidden;
  z-index:1;
  display:grid;
  place-items:center 72%;
  pointer-events:none;
}
.webgl-ready .hero3d-fallback { opacity:0; }
.hero3d-fallback-console {
  width:min(430px, 34vw);
  aspect-ratio:1.08;
  border:1px solid rgba(199,255,80,.14);
  border-radius:24px;
  background:linear-gradient(145deg,#242b24,#0b0e0b 58%);
  box-shadow:0 38px 80px rgba(0,0,0,.45);
}
.hero3d-fallback-console span {
  display:block;
  width:72%;
  height:43%;
  margin:17% auto;
  border:10px solid #090c09;
  border-radius:8px;
  background:#102011;
}
.hero3d-fallback-core {
  position:absolute;
  left:calc(72% - 76px);
  top:9%;
  width:152px;
  height:120px;
  padding:24px 18px;
  color:#0a0d09;
  background:#a9e048;
  border-radius:10px 10px 3px 3px;
  font:900 25px/.9 Arial, sans-serif;
  letter-spacing:-.04em;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.hero3d-fallback-core small { font:900 8px/1 Consolas, monospace; letter-spacing:.12em; }

@media (max-width: 900px) {
  .hero3d-scroll { height:260svh; }
  .hero3d-sticky { min-height:600px; }
  .hero3d-atmosphere {
    background:
      linear-gradient(180deg, rgba(5,7,5,.45) 0%, transparent 25%, transparent 72%, rgba(2,3,2,.55)),
      radial-gradient(circle at 50% 58%, transparent 0 24%, rgba(2,3,2,.16) 55%, rgba(2,3,2,.42) 100%);
  }
  .hero3d-copy {
    left:18px;
    right:18px;
    top:112px;
    width:auto;
    transform:none;
  }
  .hero3d-copy h1 { max-width:620px; font-size:clamp(49px, 12vw, 76px); }
  .hero3d-copy .hero3d-description { max-width:540px; margin-top:17px; font-size:13px; }
  .hero3d-eyebrow { margin-bottom:14px; font-size:8px; }
  .hero3d-console-label { top:auto; right:18px; bottom:88px; gap:12px; }
  .hero3d-scroll-cue { left:18px; bottom:max(22px, env(safe-area-inset-bottom)); width:calc(100% - 36px); }
  .hero3d-quicklinks {
    left:14px;
    right:14px;
    bottom:74px;
    width:auto;
    transform-origin:50% 100%;
  }
}

@media (max-width: 560px) {
  .hero3d-scroll { height:245svh; }
  .hero3d-copy { top:94px; }
  .hero3d-copy h1 { font-size:clamp(45px, 13.2vw, 60px); max-width:360px; }
  .hero3d-copy .hero3d-description { max-width:345px; }
  .hero3d-console-label { display:none; }
  .hero3d-scroll-cue { grid-template-columns:auto 1fr; }
  .hero3d-scroll-cue b { display:none; }
  .hero3d-quicklinks { padding:11px; gap:5px; }
  .hero3d-quicklinks a { min-height:43px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero3d-scroll { height:100svh; }
  .hero3d-copy,
  .hero3d-canvas,
  .hero3d-quicklinks { transition:none; }
}