:root{
  --yellow:#ffe81f;
  --bg:#000;
  --white:#fff;
  --flash:#ff3b30;

  --panel:#0a0c14;
  --panel-border:#2b3555;
  --panel-text:#e7ecff;
  --panel-sub:#a9b6d6;
  --focus:#9edbff;

  /* Warp tint (optional themes override these) */
  --warp-tint-1: rgba(120,215,255,.14);
  --warp-tint-2: rgba(54,130,255,.10);

  /* readable crawl speed (tweak this) */
  --crawl-duration:45s;

  /* layout helpers */
  --panel-max-w: 900px;

  /* Responsive/safe-area helpers (updated by JS) */
  --vh: 1vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--yellow);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  /* mobile polish */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
  scrollbar-gutter: stable both-edges;
}

/* ---- StarJedi Outline (your screenshot font) ---- */
@font-face{
  font-family: "StarJediOutline";
  src: url("../assets/fonts/starboba/starjedioutline.ttf") format("truetype");
  font-display: swap;
}

/* point the title at the outline font */
.title{
  font-family: "StarJediOutline","Segoe UI",system-ui,sans-serif;
  line-height: 0.9;         /* tighter line box so it won’t look cropped */
  letter-spacing: .02em;
  word-spacing: .08em;
}
.title .word{ display:inline-block; margin:0 .06em; }
.title .v-lc{ display:inline-block; transform:scale(.78) translateY(.16em); }

/* Visual “lowercase” V: same font, just scaled and lowered a bit */
.title .v-lc{
  display:inline-block;
  transform: scale(0.78) translateY(0.16em);
  transform-origin: left bottom;
  line-height: 0;          /* keeps the line height tidy */
}

/* Make sure we’re not shrinking/styling the whole 'van' differently */
.title .word--van{
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* Links & buttons */
a{color:#cfe1ff;text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit}
button:focus-visible,
a:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:10px;
}

/* --- Viewport height: fallback first, then dvh, then svh --- */

/* 1) Fallback using JS-updated --vh for older iOS / odd browsers */
.bg-canvas,
.crawl-wrapper,
.stage{
  height: calc(var(--vh, 1vh) * 100);
  min-height: calc(var(--vh, 1vh) * 100);
}

/* 2) Prefer modern dynamic viewport if supported */
@supports (height: 100dvh){
  .bg-canvas,
  .crawl-wrapper,
  .stage{
    height: 100dvh;
    min-height: 100dvh;
  }
}

/* 3) If svh is supported, let it win (handles visible viewport on mobile) */
@supports (height: 100svh){
  .bg-canvas,
  .crawl-wrapper,
  .stage{
    height: 100svh;
    min-height: 100svh;
  }
}

/* ---------- Starfield canvas ---------- */
.bg-canvas{
  position:fixed;
  inset:0;
  width:100vw;height:100vh;display:block;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(1200px 800px at 20% 15%,#0a0b12 0,#06070d 60%,#000 100%);
}

/* ---------- Intro / crawl (READABLE) ---------- */
.crawl-wrapper{
  position:relative;
  display:grid;
  place-items:center;
  background:transparent;
  perspective: 360px;          /* gentler perspective so text doesn’t shrink too much */
  z-index:2;
  overflow:hidden;
}
.crawl-wrapper::before,
.crawl-wrapper::after{
  content:"";
  position:absolute;left:0;right:0;height:16vh;pointer-events:none;z-index:1;
}
.crawl-wrapper::before{ top:0;    background:linear-gradient(#000, transparent); }
.crawl-wrapper::after{  bottom:0; background:linear-gradient(transparent, #000); }

.crawl{
  text-align:center;
  max-width:min(940px,92vw);
  padding:0 16px;
  animation: crawlReadable var(--crawl-duration) linear forwards;
  transform: translateY(40vh) scale(1) rotateX(12deg);
  will-change: transform;
}
.crawl--slow{ animation-duration: calc(var(--crawl-duration) * 1.35); }

/* keep your visual styles for the title, but don't override the font-family */
.title{
  /* font-family: "StarJedi","Segoe UI",sans-serif;  <-- removed to keep Outline */
  letter-spacing:.5px;
  font-size:clamp(2rem,8vw,4.6rem);
  margin:0 0 .6em;
  color:var(--yellow);
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.subtitle{
  font-size:clamp(1.05rem,4.5vw,2rem);
  margin:0 0 1.25em;
  color:#e9ecff;
  opacity:.95;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}
.crawl p{
  margin:.9em 0;
  color:#f4f6ff;
  opacity:.9;
  line-height:1.7;
  font-size:clamp(.95rem,3.6vw,1.1rem);
}
.crawl .whisper{ font-style:italic; opacity:.8 }
.crawl .callout{ color:var(--yellow); font-weight:700 }

/* give the crawl safe breathing room inside the clipped wrapper */
.crawl-wrapper{
  padding-left:  max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* slight inset so overhanging glyphs don’t touch the edge */
.title{ padding-inline: .2em; }

/* phones: a touch more padding for the crawl block */
@media (max-width: 520px){
  .crawl{ padding-inline: clamp(20px, 6vw, 28px); }
}

@keyframes crawlReadable{
  0%   { transform: translateY(40vh)  scale(1.00) rotateX(12deg); }
  50%  { transform: translateY(-50vh) scale(0.90) rotateX(15deg); }
  100% { transform: translateY(-165vh) scale(0.82) rotateX(18deg); }
}

/* Reduced motion = no crawl, just center */
@media (prefers-reduced-motion:reduce){
  .crawl{ animation:none; transform:none }
}

/* Start button */
#start-button,.btn-start{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom: clamp(16px, 2.8vh, 40px);
  padding:12px 24px;
  background:var(--yellow);color:#000;
  font-weight:700;border:0;border-radius:10px;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  z-index:3;
  transition:filter .15s ease, transform .08s ease;
  min-height:44px;                /* touch size */
  margin-bottom: max(0px, var(--safe-bottom));
}
#start-button:hover{filter:brightness(.95)}
#start-button:active{transform:translateX(-50%) scale(.98)}

/* ---------- Warp overlay ---------- */
.warp{
  position:fixed;inset:0;z-index:4;
  background:
    radial-gradient(1200px 800px at 50% 50%, var(--warp-tint-1) 0%, transparent 65%),
    radial-gradient(900px 600px at 20% 15%, var(--warp-tint-2) 0%, transparent 60%),
    rgba(0,0,0,.2);
  pointer-events:none;
  opacity:0;transition:opacity .25s ease;
}
.warp.active{opacity:1}

.warp.theme-cyan  { --warp-tint-1: rgba(120,215,255,.18); --warp-tint-2: rgba(54,130,255,.12); }
.warp.theme-violet{ --warp-tint-1: rgba(205,153,255,.18); --warp-tint-2: rgba(131,78,255,.12); }
.warp.theme-magma { --warp-tint-1: rgba(255,142,98,.18);  --warp-tint-2: rgba(255,68,68,.12); }
.warp.theme-emerald{--warp-tint-1: rgba(115,255,188,.18); --warp-tint-2: rgba(26,184,124,.12); }

@keyframes warpPulse{
  0%{filter:saturate(1) brightness(1)}
  100%{filter:saturate(1.12) brightness(1.06)}
}
.warp.pulse.active{animation:warpPulse 0.9s ease-in-out infinite alternate}

/* ---------- Stage (planets + ship) ---------- */
.stage{
  position:relative;width:100vw;
  z-index:2;
  cursor:default;
  touch-action:manipulation;
  contain: content; /* PERF: isolate layout/paint */
}
.stage[hidden]{display:none}

#fps-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:2;
  will-change:transform;
}

.ship3d-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;
  display:block;
  pointer-events:none;
  background:transparent;
}

/* HARD-KILL the old 2D fallback ship (paper plane) if present */
#ship{ display:none !important; }

/* ---------- Click flash (hit marker) ---------- */
.flash{
  position:absolute;width:40px;height:40px;
  border:2px solid var(--flash);border-radius:50%;pointer-events:none;
  animation:flash .35s ease-out forwards;z-index:10;
  transform:translate(-50%,-50%);
}
@keyframes flash{
  from{transform:translate(-50%,-50%) scale(1);opacity:1}
  to{transform:translate(-50%,-50%) scale(2.6);opacity:0}
}

/* ---------- Landing overlay ---------- */
#landing,.landing{
  position:fixed;inset:0;z-index:30;
  display:grid;grid-template-columns:1fr;grid-template-rows:1fr;
}
#landing[hidden],.landing[hidden]{display:none}

#landing .landing__bg,.landing .landing__bg{
  grid-area:1 / 1;
  background:radial-gradient(1200px 800px at 20% 15%,#0b0e15 0,#05060b 60%,#000 100%);
  background-size:cover;background-position:center;
  filter:saturate(1.05) brightness(.96);
}

#landing .landing__panel,.landing .landing__panel{
  grid-area:1 / 1;
  align-self:center;justify-self:center;
  width:min(var(--panel-max-w),92vw);
  max-height:86vh;overflow:auto;

  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  background:rgba(10,12,20,.58);
  border:1px solid var(--panel-border);
  border-radius:16px;
  padding:26px 24px 22px;

  box-shadow:0 22px 80px rgba(0,0,0,.55);
  color:var(--panel-text);
  transform:translateY(8px) scale(.985);
  opacity:0;
  position:relative;
  contain: content; /* PERF */
}

/* gentle inner vignette reduces high-contrast edges behind text */
.landing__panel::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(900px 600px at -10% -20%, rgba(120,215,255,.06), transparent 60%),
    radial-gradient(700px 500px at 120% 120%, rgba(40,54,92,.08), transparent 65%);
}

@keyframes panelIn{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
#landing:not([hidden]) .landing__panel{animation:panelIn .28s ease-out both}

/* Mobile-safe panel height + padding + safe areas */
#landing .landing__panel,
.landing .landing__panel{
  padding: clamp(16px, 3.6vw, 26px);
  max-height: calc(100dvh - max(24px, var(--safe-top)) - max(24px, var(--safe-bottom)));
}

#landing .landing__panel h2,.landing .landing__panel h2{
  margin:0 0 10px;color:#cfe1ff;font-size:clamp(1.3rem,3.8vw,2rem)
}
#landing .landing__panel h3{
  margin:18px 0 8px;color:#d8e6ff;font-weight:600;font-size:1.05rem
}
#landing .landing__panel p,.landing .landing__panel p{
  color:var(--panel-sub);line-height:1.6
}
#landing .landing__close,.landing .landing__close{
  background:transparent;border:1px solid #3a4775;color:#cfe1ff;
  padding:8px 12px;border-radius:10px;cursor:pointer;margin-bottom:12px;
  transition:background .15s ease, transform .08s ease;
  min-height:44px;
}
#landing .landing__close:hover{background:rgba(62,78,121,.18)}
#landing .landing__close:active{transform:translateY(1px)}

/* nice scroll */
#landing .landing__panel::-webkit-scrollbar{width:10px}
#landing .landing__panel::-webkit-scrollbar-thumb{ background:#2a355a;border-radius:8px }
#landing .landing__panel{scrollbar-color:#2a355a transparent;scrollbar-width:thin}

/* ---------- About block ---------- */
.about{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:16px;
  align-items:center;
  contain: content; /* PERF */
}
.about__avatar{
  width:96px;height:96px;border-radius:50%;
  object-fit:cover;object-position:center;
  border:2px solid rgba(158,219,255,.35);
  box-shadow:
    0 0 0 2px rgba(158,219,255,.2) inset,
    0 6px 24px rgba(0,0,0,.35),
    0 0 24px rgba(120,215,255,.25);
  animation:avatarGlow 4.2s ease-in-out infinite alternate;
}
@keyframes avatarGlow{
  from{ box-shadow:0 0 0 2px rgba(158,219,255,.18) inset, 0 6px 24px rgba(0,0,0,.35), 0 0 18px rgba(120,215,255,.18) }
  to  { box-shadow:0 0 0 2px rgba(158,219,255,.34) inset, 0 10px 28px rgba(0,0,0,.45), 0 0 34px rgba(120,215,255,.38) }
}
.about__text{color:var(--panel-text)}
@media (max-width:520px){
  .about{grid-template-columns:72px 1fr}
  .about__avatar{width:72px;height:72px}
}

/* (Optional) fancier ring if you wrap the img in .about__avatar-wrap */
.about__avatar-wrap{position:relative;width:96px;height:96px}
.about__avatar-wrap .about__avatar{position:relative;z-index:1}
.about__avatar-wrap::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  background:conic-gradient(from 0deg, #78d7ff, #3682ff, #78d7ff);
  filter:saturate(1.1) blur(.4px);
  animation:spin 6.5s linear infinite;
  opacity:.45;
}
.about__avatar-wrap::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(120,215,255,.35), transparent 70%);
  pointer-events:none;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:520px){
  .about__avatar-wrap{width:72px;height:72px}
}

/* Helpers for the wide About layout */
.about--wide{ grid-template-columns:120px 1fr; align-items:flex-start; }
.about__media{ display:flex;align-items:center;justify-content:center }
.about__bullets{ color:var(--panel-sub); line-height:1.7; padding-left:18px; margin:.5rem 0 0 }

/* Fancy avatar-frame variant */
.avatar-frame{position:relative;width:96px;height:96px}
.avatar-frame__img{
  width:96px;height:96px;border-radius:50%;
  object-fit:cover;border:2px solid rgba(158,219,255,.35);
  display:block;position:relative;z-index:2;
}
.avatar-frame__ring,
.avatar-frame__glow{
  position:absolute;inset:-6px;border-radius:50%;pointer-events:none
}
.avatar-frame__ring{
  background:conic-gradient(from 0deg,#78d7ff,#3682ff,#78d7ff);
  opacity:.45;filter:saturate(1.1) blur(.4px);
  animation:spin 7s linear infinite;
  z-index:1;
}
.avatar-frame__glow{
  inset:-2px;background:radial-gradient(closest-side, rgba(120,215,255,.28), transparent 70%);
  z-index:0;
}

/* ---------- Skills layout ---------- */
.skills{display:grid;gap:16px}
.skill-group{
  background:rgba(17,22,36,.5);
  border:1px solid #223055;
  border-radius:12px;
  padding:14px;
  transition:transform .12s ease, box-shadow .12s ease;
  contain: content; /* PERF */
}
.skill-group:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.28) }
.skill-group__title{ margin:0 0 8px; color:#d7e6ff; font-weight:600; font-size:1rem }
.skill{display:grid;gap:6px;margin:8px 0}
.skill__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.skill__name{color:#e7ecff;font-weight:600;font-size:.95rem}
.skill__pct{color:#cfe1ff;font-size:.85rem;opacity:.9}
.skill__bar{
  position:relative;height:10px;border-radius:9999px;overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid rgba(158,219,255,.22);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
.skill__fill{
  --w: 0%;
  width:0%;height:100%;
  background:linear-gradient(90deg, #78d7ff, #3682ff);
  box-shadow:0 0 12px rgba(120,215,255,.55), inset 0 -1px 0 rgba(0,0,0,.3);
  animation:fillBar 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes fillBar{from{width:0%}to{width:var(--w)}}

/* Optional palette variants */
.skill__fill--aqua  { background:linear-gradient(90deg,#78d7ff,#3682ff); box-shadow:0 0 12px rgba(120,215,255,.55), inset 0 -1px 0 rgba(0,0,0,.3); }
.skill__fill--amber { background:linear-gradient(90deg,#ffd84a,#f4b800); box-shadow:0 0 12px rgba(255,216,74,.45),  inset 0 -1px 0 rgba(0,0,0,.3); }
.skill__fill--coral { background:linear-gradient(90deg,#ff9aa2,#ff4f6d); box-shadow:0 0 12px rgba(255,159,174,.45), inset 0 -1px 0 rgba(0,0,0,.3); }
.skill__fill--mint  { background:linear-gradient(90deg,#9df6c7,#2ce6a1); box-shadow:0 0 12px rgba(157,246,199,.45), inset 0 -1px 0 rgba(0,0,0,.3); }

.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.badge{
  padding:4px 8px;border-radius:9999px;
  background:rgba(120,215,255,.14);
  border:1px solid rgba(120,215,255,.35);
  color:#dff3ff;font-size:.8rem
}

.link-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.link-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:10px;
  background:rgba(40,54,92,.45);
  border:1px solid #3a4775;color:#dbe7ff;text-decoration:none;
  transition:transform .08s ease, background .15s ease, box-shadow .15s ease;
  min-height:44px;
}
.link-btn:hover{
  background:rgba(40,54,92,.7);
  box-shadow:0 10px 26px rgba(0,0,0,.26);
  transform:translateY(-1px);
}
.link-btn:active{transform:translateY(1px)}

/* ---------- Contact form ---------- */
.contact{ display:grid; gap:12px; margin-top:8px }
.contact__row{ display:grid; gap:12px; grid-template-columns:1fr 1fr }
@media (max-width:720px){ .contact__row{grid-template-columns:1fr} }
.input, .textarea{
  width:100%;
  color:#e7ecff;
  background:rgba(17,22,36,.55);
  border:1px solid #223055;
  border-radius:10px;
  padding:10px 12px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.textarea{min-height:120px;resize:vertical;line-height:1.45}
.input::placeholder,.textarea::placeholder{color:#a9b6d6}
.input:focus{background:rgba(22,28,44,.65)}
.textarea:focus{background:rgba(22,28,44,.65)}
.btn{
  padding:10px 14px;border-radius:10px;border:1px solid #3a4775;
  background:rgba(40,54,92,.55);color:#dbe7ff;cursor:pointer;
  transition:transform .08s ease, background .15s ease, box-shadow .15s ease;
  min-height:44px;
}
.btn:hover{background:rgba(40,54,92,.75); box-shadow:0 10px 26px rgba(0,0,0,.26)}
.btn:active{transform:translateY(1px)}

.input-help{ font-size:.85rem; color:#9bb0dc; margin-top:4px }

/* ---------- Case studies ---------- */
.case{
  display:grid;gap:14px;
  grid-template-columns:220px 1fr;
  background:rgba(17,22,36,.5);
  border:1px solid #223055;border-radius:12px;
  padding:14px;
  transition:transform .12s ease, box-shadow .12s ease;
  contain: content; /* PERF */
}
.case:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.28) }
@media (max-width:820px){ .case{grid-template-columns:1fr} }
.case__hero{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;
  border:1px solid rgba(158,219,255,.18);
  background:#0a0f1f;
}
.case__title{margin:0 0 6px;color:#d7e6ff;font-weight:700}
.case__summary{margin:0 0 8px;color:var(--panel-sub)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.pill{
  font-size:.78rem;padding:4px 8px;border-radius:9999px;
  background:rgba(120,215,255,.14);border:1px solid rgba(120,215,255,.28);
  color:#dff3ff
}
.case__bullets{margin:8px 0 0; padding-left:18px; color:var(--panel-sub); line-height:1.6}

/* assistive */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Pointer/Reduced motion media ---------- */
@media (pointer:coarse){
  .stage{cursor:auto}
  /* PERF: disable hover shadows on touch devices */
  .link-btn:hover, .card:hover, .skill-group:hover, .case:hover { box-shadow:none; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .crawl{animation:none;transform:none}
  .warp{transition:none}
  .stage{cursor:default}
  .skill__fill{animation:none}
  .about__avatar{animation:none}
}

/* ======== Additive helpers ======== */
.input:focus-visible, .textarea:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-color:#3a77ff;
}
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.contact__status{font-size:.9rem;line-height:1.5}
.contact__status--ok{color:#a6ffbf}
.contact__status--err{color:#ff9aa2}
.input.is-invalid, .textarea.is-invalid{
  border-color:#ff6b6b;
  box-shadow:0 0 0 1px rgba(255,107,107,.25) inset;
}
@media (max-width:640px){
  .about--wide{grid-template-columns:1fr;gap:14px}
  .about__media{justify-content:center}
}

/* ===================== About split/portrait ===================== */
.about--split {
  display: grid;
  grid-template-columns: 1fr min(34vw, 360px);
  gap: 22px;
  align-items: center;
}

/* Force all About text to be left-aligned by default */
.about--split .about__text { text-align: left; }
.about--split .about__text h3,
.about--split .about__text p,
.about--split .about__text ul,
.about--split .about__text li { text-align: left; }

/* Text block */
.about--split .about__text {
  color: var(--panel-text);
  animation: fadeSlide .45s ease-out both;
  padding-right: 10px; /* gutter so text doesn’t touch portrait */
  position: relative;
  z-index: 1;          /* always above portrait blur */
}

/* Portrait/media block */
.about--split .about__media {
  position: relative;
  justify-self: end;
  width: min(34vw, 360px);
  aspect-ratio: 1/1.12;
  perspective: 600px;
  isolation: isolate; /* prevents bleed of backdrop-filter */
  overflow: clip;
  z-index: 0;
}

@supports not (overflow: clip) {
  .about--split .about__media { overflow: hidden; }
}

/* Animations */
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ====== Responsive breakpoints ====== */

/* Tablets / medium screens */
@media (max-width: 1024px) {
  .about--split {
    grid-template-columns: 1fr 300px;
    gap: 20px;
  }
  .about--split .about__media {
    width: 300px;
  }
}

/* Small tablets / large phones */
@media (max-width: 820px) {
  .about--split {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .about--split .about__media {
    order: -1;                /* portrait goes on top */
    justify-self: center;
    width: min(80vw, 420px);  /* scale down smoothly */
  }
  .about--split .about__text {
    padding-right: 0;
    text-align: left;       /* center text on stacked layout */
  }
}

/* Narrow phones */
@media (max-width: 480px) {
  .about--split {
    gap: 16px;
  }
  .about--split .about__media {
    width: min(88vw, 320px);
  }
  .about--split .about__text {
    font-size: 0.95rem;
    line-height: 1.55;
  }
}

/* ====== Soft feather/blur around portrait edges (contained) ====== */
.portrait-neo{
  position:absolute; inset:0;
  background: transparent;
  border-radius: 18px;
  -webkit-clip-path: polygon(8% 0, 92% 0, 100% 12%, 100% 88%, 92% 100%, 8% 100%, 0 88%, 0 12%);
          clip-path: polygon(8% 0, 92% 0, 100% 12%, 100% 88%, 92% 100%, 8% 100%, 0 88%, 0 12%);
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
}
.portrait-neo::after{ content:none; }

.portrait-neo__img{
  position:absolute; inset:8px;
  width:calc(100% - 16px); height:calc(100% - 16px);
  object-fit:cover; object-position:center 38%;
  border-radius:14px;
  -webkit-clip-path: polygon(8% 0, 92% 0, 100% 12%, 100% 88%, 92% 100%, 8% 100%, 0 88%, 0 12%);
          clip-path: polygon(8% 0, 92% 0, 100% 12%, 100% 88%, 92% 100%, 8% 100%, 0 88%, 0 12%);
  box-shadow: 0 10px 34px rgba(0,0,0,.45);
  transform: translateZ(0) rotateX(0) rotateY(0);
  transition: transform .28s ease, filter .28s ease;
}

/* Edge feather: now constrained to the media box so it won't blur your text */
.portrait-fade{
  position:absolute;
  inset:0;                    /* keep it inside so it can't overlap text */
  pointer-events:none;
  -webkit-clip-path: polygon(8% 0, 92% 0, 100% 12%, 100% 88%, 92% 100%, 8% 100%, 0 88%, 0 12%);
          clip-path: polygon(8% 0, 92% 0, 100% 12%, 100% 88%, 92% 100%, 8% 100%, 0 88%, 0 12%);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
          backdrop-filter: blur(12px) saturate(1.05);
  -webkit-mask: radial-gradient(closest-side, transparent 60%, black 75%);
          mask: radial-gradient(closest-side, transparent 60%, black 75%);
  opacity:.9;
}

/* Hover/idle motion */
.about__media:hover .portrait-neo__img{
  transform: translateY(-2px) scale(1.01) rotateX(2deg) rotateY(-2deg);
  filter: saturate(1.03);
}
@media (prefers-reduced-motion: reduce){
  .about--split .about__text{animation:none}
  .about__media:hover .portrait-neo__img{transform:none; filter:none}
}

/* ===== Card grid for Projects/Certifications ===== */
.grid-cards{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  contain: content; /* PERF */
}
@media (max-width: 420px){
  .grid-cards{ grid-template-columns: 1fr; }
}
.card{
  background:rgba(17,22,36,.5);
  border:1px solid #223055;
  border-radius:12px;
  padding:14px;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
  contain: paint; /* PERF */
}
.card:hover{
  transform:translateY(-1px);
  background:rgba(22,28,44,.55);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.card__title{margin:0 0 6px; color:#d7e6ff; font-weight:700}
.card__desc{margin:0 0 8px; color:var(--panel-sub)}
.card__sub{margin:10px 0 6px; font-size:.95rem; color:#cfe1ff}
.list{margin:0; padding-left:18px; color:var(--panel-sub); line-height:1.6}

/* ===== Responsive video container ===== */
.video-wrap{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:10px; overflow:hidden;
  border:1px solid rgba(158,219,255,.18);
  background:#0a0f1f; margin:10px 0;
  contain: content; /* PERF */
}
.video-wrap iframe, .video-wrap video{
  position:absolute; inset:0; width:100%; height:100%; display:block; border:0;
}

/* ===== Small subhead (use under Hobbies for the “Links” title) ===== */
.subhead{
  margin:14px 0 6px;
  color:#d7e6ff;
  font-weight:600;
  font-size:1rem;
}

/* ===== Reusable floating label (e.g., Station tooltip) ===== */
.floating-label{
  position:absolute;
  transform:translate(-50%, -120%);
  padding:6px 10px;
  border-radius:10px;
  background:rgba(17,22,36,.7);
  border:1px solid #223055;
  color:#dbe7ff;
  font-size:.9rem;
  pointer-events:none;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}

/* =================== Responsive + Mobile Production Tweaks =================== */

/* Touch-friendly targets globally */
.link-btn, .btn, .landing__close, #start-button{ min-height:44px; }

/* Ensure case grid wraps nicely on narrow phones */
.grid-cards{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Prevent portrait blur overlapping text on the smallest phones */
@media (max-width: 480px){
  .about--split .about__text{ padding-right: 0; }
}

/* =================== About split/portrait layout =================== */
.about--split .about__media{
  /* keep any blur/backdrop effects strictly inside this box */
  overflow: clip;
  isolation: isolate;
  z-index: 0;
}
/* Fallback for browsers without overflow: clip */
@supports not (overflow: clip){
  .about--split .about__media{ overflow: hidden; }
}
/* keep text layer above any effects */
.about--split .about__text{
  position: relative;
  z-index: 1;
}

@media (max-width: 820px){
  .about--split .about__media{ width: min(84vw, 440px); }
}

@media (max-width: 480px){
  .about--split{ gap: 18px; }
  .about--split .about__text{ padding-right: 0; } /* belt & suspenders */
}

/* === PATCH: phone + ultra-short landscape optimizations (keeps portrait small & prevents cramped UI) === */
@media (max-width: 480px){
  .about--split .about__media{ width: clamp(170px, 52vw, 300px); }
}
/* very short viewports (rotated phones/split-screen) */
@media (max-height: 420px) and (orientation: landscape){
  .crawl{ transform: none; animation: none; }            /* avoid cropped crawl */
  body{ overflow:auto; }                                  /* allow scroll in tight landscapes */
  .about--split{ gap: 14px; }
  .about--split .about__media{ width: clamp(160px, 38vw, 260px); }
  .portrait-fade{ backdrop-filter: blur(8px) saturate(1.02); } /* slightly lighter effect */
}

/* === PATCH: optional low-end mode hook (JS can toggle <html class="low-end">) === */
.low-end .portrait-fade{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; opacity:.45; }
.low-end .skill__fill{ animation:none !important; }
.low-end .about__avatar{ animation:none !important; box-shadow:0 0 0 2px rgba(158,219,255,.18) inset; }

/* === PERF: skip offscreen rendering cost for heavy sections === */
@supports (content-visibility: auto){
  .grid-cards,
  .skills,
  .case,
  .video-wrap,
  .about{ content-visibility: auto; contain-intrinsic-size: 600px 800px; }
  /* keep overlay panel snappy without layout thrash */
  .landing__panel{ content-visibility: auto; contain-intrinsic-size: 700px 640px; }
}

/* === TITLE FIX: make every word the same size/font === */
.title{
  font-family:"StarJediOutline","Segoe UI",system-ui,sans-serif !important;
  font-variant:normal !important;
  text-transform:none !important;
  line-height:0.9; letter-spacing:.02em; word-spacing:.08em;
}
.title .word{ display:inline-block; margin:0 .06em; }

/* don't shrink/style "van" differently */
.title .word--van{
  font: inherit !important;
  font-size:1em !important;
  letter-spacing: inherit !important;
  text-transform:none !important;
}

/* kill the mini V if markup still has it */
.title .v-lc{
  transform:none !important;
  line-height:inherit !important;
}