/* ============ MIAO Personal Showcase — Event Horizon theme ============ */
:root {
  --bg: #030303;
  --bg-2: #0a0705;
  --amber: #ff9a3c;
  --amber-hi: #ffd9a0;
  --amber-deep: #c2410c;
  --ember: #ff6b1a;
  --txt: #e8e2d9;
  --txt-dim: #8a8378;
  --line: rgba(255, 154, 60, .18);
  --card: rgba(255, 154, 60, .04);
  --font-en: 'Space Grotesk', 'Noto Sans SC', sans-serif;
  --font-zh: 'Noto Sans SC', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-y: scroll; overflow-x: hidden; height: 100%; }
body {
  overflow-x: hidden;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font-zh);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ember); color: #000; }

canvas#bg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}

#flash {
  position: fixed; inset: 0; z-index: 60;
  background: radial-gradient(circle at 50% 55%, #ffdcae, #ff7a1a 40%, transparent 70%);
  opacity: 0; pointer-events: none;
}

/* ---------- Loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .8s ease, visibility .8s;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; }
.loader-ring {
  width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,154,60,.15);
  border-top-color: var(--amber);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text { display: flex; flex-direction: column; gap: 7px; }
.loader-line-en {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 13px; letter-spacing: .3em;
  color: var(--txt);
  animation: loaderBreathe 3s ease-in-out infinite;
}
.loader-line-zh {
  font-family: var(--font-zh); font-weight: 400;
  font-size: 10px; letter-spacing: .2em;
  color: #777;
}
@keyframes loaderBreathe {
  0%, 100% { text-shadow: 0 0 0 rgba(255,154,60,0); }
  50% { text-shadow: 0 0 14px rgba(255,154,60,.45); }
}
.loader-dots { display: inline-flex; margin-left: 2px; }
.loader-dots span { opacity: .2; animation: loaderDot 1.2s ease-in-out infinite; }
.loader-dots span:nth-child(2) { animation-delay: .2s; }
.loader-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes loaderDot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }

/* ---------- Topbar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 36px;
  mix-blend-mode: normal;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-en); font-weight: 700;
  font-size: 20px; letter-spacing: .3em;
  color: var(--txt); text-decoration: none;
}
.logo-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from 0deg, var(--amber), transparent 40%, var(--ember) 70%, var(--amber));
  animation: spin 8s linear infinite;
}
.logo-avatar-core {
  width: 100%; height: 100%; border-radius: 50%;
  background: #0d0a07;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-size: 13px; font-weight: 700; letter-spacing: 0;
  color: var(--amber-hi);
  animation: spin 8s linear infinite reverse;
}
.logo-tag {
  font-family: var(--font-zh); font-weight: 400;
  font-size: 12px; letter-spacing: .05em;
  color: var(--txt-dim);
}
.status-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em;
  color: var(--amber);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px;
  background: rgba(3,3,3,.5); backdrop-filter: blur(8px);
}
.pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: pulse 2s ease infinite;
}
@keyframes pulse { 50% { opacity: .3; } }

/* ---------- Side nav ---------- */
.sidenav {
  position: fixed; left: 32px; top: 50%; transform: translateY(-50%);
  z-index: 50; display: flex; flex-direction: column; gap: 22px;
}
.sidenav a {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  font-family: var(--font-mono);
  color: var(--txt-dim);
  transition: color .3s;
}
.sidenav a i { font-style: normal; font-size: 10px; letter-spacing: .2em; }
.sidenav a em {
  font-style: normal; font-size: 11px; letter-spacing: .25em;
  opacity: 0.55;
  transition: opacity .3s, transform .3s;
  white-space: nowrap;
}
.sidenav a::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  border: 1px solid var(--txt-dim);
  transition: all .3s;
}
.sidenav a:hover em, .sidenav a.active em { opacity: 1; transform: none; }
.sidenav a.active { color: var(--amber-hi); }
.sidenav a.active::before {
  background: var(--amber); border-color: var(--amber);
  box-shadow: 0 0 12px var(--amber);
}

/* ---------- Sections ----------
   Each section is locked to exactly one viewport (any browser, any
   resolution). Spacing scales with min(vw, vh) so it shrinks on short
   screens before content ever needs to. If a screen is short enough that
   content still doesn't fit even at the compressed floor, the section
   scrolls internally (overflow-y: auto) instead of spilling into the next
   section — that's what reads as "truncated" on smaller laptops. */
#sections { position: relative; z-index: 10; }
.sec {
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(64px, 10vh, 120px) 6vw clamp(56px, 9vh, 120px);
  /* floor must clear the fixed sidenav's rendered width (~153px at left:32px)
     with margin — 13vw alone dips below that from ~960px up to ~1380px wide,
     which let the "系统 SYSTEMS" label bleed into card content */
  padding-left: clamp(180px, 13vw, 190px);
  scroll-margin-top: 10vh;
}
.sec-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.sec-inner { width: 100%; max-width: 1180px; margin: 0 auto; }

.sec-head { margin-bottom: clamp(24px, 6vh, 56px); }
.sec-head.center { text-align: center; }
.sec-no {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .5em; color: var(--amber);
}
.sec-head h2 {
  font-family: var(--font-en); font-weight: 700;
  font-size: clamp(28px, min(5vw, 6vh), 58px);
  margin: 10px 0 14px;
  letter-spacing: .02em;
}
.sec-head h2 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--amber-hi), var(--ember));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec-desc { color: var(--txt-dim); font-size: 15px; letter-spacing: .05em; }

/* ---------- HERO ---------- */
.hero-content { position: relative; }
.hero-chip {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em;
  color: var(--amber-hi);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 22px; margin-bottom: clamp(16px, 3vh, 34px);
  background: rgba(10,7,5,.55); backdrop-filter: blur(10px);
}
.hero-title {
  font-family: var(--font-en); font-weight: 700;
  font-size: clamp(36px, min(9vw, 11vh), 118px);
  line-height: 1.04; letter-spacing: -.01em;
  background-image:
    linear-gradient(100deg, transparent 35%, rgba(255,255,255,.95) 50%, transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #f6f2e9 55%, #e9e3d5 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 220% 100%, 100% 100%;
  background-position: -60% 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(255, 214, 160, .5);
  animation: titleShine 5s linear infinite, titleGlow 4s ease-in-out infinite, titleSparkle 2.2s ease-in-out infinite;
}
@keyframes titleShine {
  0% { background-position: -60% 0, 0 0; }
  15% { background-position: 160% 0, 0 0; }
  100% { background-position: 160% 0, 0 0; }
}
@keyframes titleGlow {
  0%, 100% { text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 3px 8px rgba(0,0,0,.45); }
  50% { text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 4px 10px rgba(0,0,0,.5); }
}
@keyframes titleSparkle {
  0%, 100% { -webkit-text-stroke-color: rgba(255, 214, 160, .4); -webkit-text-stroke-width: 1px; }
  50% { -webkit-text-stroke-color: rgba(255, 248, 220, 1); -webkit-text-stroke-width: 1.4px; }
}
.hero-title .line { display: block; }
.hero-title em {
  font-style: normal;
  background: linear-gradient(100deg, #ffd87a 0%, var(--amber) 45%, var(--ember) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(255, 214, 160, .4);
  animation: titleSparkleGold 2.2s ease-in-out infinite;
}
@keyframes titleSparkleGold {
  0%, 100% {
    -webkit-text-stroke-color: rgba(255, 200, 120, .4);
    -webkit-text-stroke-width: 1px;
    text-shadow: 0 1px 0 rgba(255,255,255,.4), 0 3px 8px rgba(0,0,0,.45);
  }
  50% {
    -webkit-text-stroke-color: rgba(255, 248, 210, 1);
    -webkit-text-stroke-width: 1.4px;
    text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 4px 10px rgba(0,0,0,.5);
  }
}
.hero-sub {
  margin-top: clamp(12px, 3vh, 26px);
  color: #cfc6b8; font-size: 16px; letter-spacing: .2em;
  text-shadow: 0 2px 18px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.8);
}
.hero-cta { margin-top: clamp(20px, 5vh, 44px); display: flex; gap: 18px; justify-content: center; }

.btn {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em;
  padding: 15px 30px; border-radius: 4px;
  text-decoration: none; cursor: pointer;
  transition: all .3s;
}
.btn-solid {
  background: linear-gradient(100deg, var(--amber), var(--ember));
  color: #140a02; border: none; font-weight: 600;
  box-shadow: 0 0 28px rgba(255,120,26,.35);
}
.btn-solid:hover { box-shadow: 0 0 44px rgba(255,140,40,.6); transform: translateY(-2px); }
.btn-ghost {
  color: var(--txt); border: 1px solid var(--line);
  background: rgba(10,7,5,.4); backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--amber); color: var(--amber-hi); }

.scroll-hint {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .35em;
  color: var(--txt-dim);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.scroll-hint span {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--amber), transparent);
  animation: drop 1.8s ease infinite;
}
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 60% { transform: scaleY(1); } 100% { opacity: 0; } }

/* ---------- PROFILE ---------- */
.profile-grid { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: clamp(20px, 4vh, 40px); align-items: stretch; }
/* --- optical glass: panels refract the particle field behind them --- */
.glass, .profile-card, .sys-card, .media-card, .module-card {
  position: relative;
  border: 1px solid rgba(255, 190, 110, .16);
  border-radius: 14px;
  background:
    linear-gradient(155deg, rgba(255,170,80,.07), rgba(255,255,255,.012) 42%, rgba(255,110,25,.045)),
    rgba(8, 5, 3, .52);
  backdrop-filter: blur(22px) saturate(1.4) brightness(.9);
  -webkit-backdrop-filter: blur(22px) saturate(1.4) brightness(.9);
  box-shadow: inset 0 1px 0 rgba(255,220,160,.14), 0 24px 60px rgba(0,0,0,.45);
}
.glass::before, .profile-card::before, .sys-card::before, .media-card::before, .module-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,150,50,.13), transparent 46%);
  opacity: 0; transition: opacity .35s;
  pointer-events: none;
}
.glass:hover::before, .profile-card:hover::before,
.sys-card:hover::before, .media-card:hover::before, .module-card:hover::before { opacity: 1; }
.profile-card, .module-grid { height: 100%; }

.tilt { will-change: transform; transition: transform .25s ease; transform-style: preserve-3d; }

.profile-card {
  padding: clamp(20px, 4vh, 36px);
}
.avatar-frame {
  width: clamp(64px, 10vh, 96px); height: clamp(64px, 10vh, 96px); border-radius: 50%;
  padding: 2px; margin-bottom: clamp(14px, 3vh, 24px);
  background: conic-gradient(from 0deg, var(--amber), transparent 40%, var(--ember) 70%, var(--amber));
  animation: spin 8s linear infinite;
}
.avatar-core {
  width: 100%; height: 100%; border-radius: 50%;
  background: #0d0a07;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-size: clamp(28px, 4vh, 40px); font-weight: 700;
  color: var(--amber);
  animation: spin 8s linear infinite reverse;
}
.profile-intro h3 { font-family: var(--font-en); font-size: 24px; letter-spacing: .08em; }
.profile-intro h3 span { font-size: 14px; color: var(--txt-dim); font-weight: 400; }
.profile-intro p { margin: clamp(10px, 2vh, 18px) 0 clamp(12px, 3vh, 24px); color: var(--txt-dim); line-height: 1.9; font-size: 14px; }
.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list li {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em;
  color: var(--amber-hi);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 10px;
}

.module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(12px, 3vh, 22px);
}
.module-card {
  padding: clamp(16px, 3vh, 28px) clamp(16px, 2.2vw, 24px);
  display: flex; flex-direction: column; justify-content: center;
  transition: border-color .35s, box-shadow .35s;
}
.module-card:hover {
  border-color: rgba(255,154,60,.5);
  box-shadow: inset 0 1px 0 rgba(255,220,160,.2), 0 18px 44px rgba(255,110,20,.16);
}
.module-card .sys-id { display: block; margin-bottom: clamp(6px, 1.4vh, 12px); }
.module-card h3 { font-size: 17px; font-weight: 500; margin: 0 0 clamp(6px, 1.4vh, 10px); }
.module-card p { color: var(--txt-dim); font-size: 13px; line-height: 1.7; }

/* ---------- SYSTEMS ---------- */
.sys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 3vh, 22px); }
.sys-card {
  padding: clamp(16px, 3.5vh, 30px);
  transition: transform .25s ease, border-color .35s, box-shadow .35s;
  overflow: hidden;
}
.sys-card:hover {
  border-color: rgba(255,154,60,.5);
  box-shadow: inset 0 1px 0 rgba(255,220,160,.2), 0 18px 50px rgba(255,110,20,.16);
}
.sys-id { font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em; color: var(--amber); }
.sys-card h3 { margin: clamp(8px, 2vh, 14px) 0 clamp(6px, 1.5vh, 12px); font-size: 18px; font-weight: 500; }
.sys-card h3 span { margin-left: 8px; font-family: var(--font-en); font-size: 11px; font-weight: 400; letter-spacing: .04em; color: var(--txt-dim); }
.sys-card p { color: var(--txt-dim); font-size: 13px; line-height: 1.8; min-height: 44px; }
.sys-meta { display: flex; gap: 8px; margin-top: clamp(10px, 2vh, 18px); }
.sys-meta span {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .15em;
  color: var(--txt-dim);
  border: 1px solid rgba(255,154,60,.12); border-radius: 3px;
  padding: 4px 8px;
}

/* ---------- HONORS ---------- */
.honors-grid { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(24px, 5vh, 48px); align-items: center; }
.honor-media {
  border: 1px solid rgba(255, 190, 110, .16);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.honor-media img { display: block; width: 100%; height: auto; }
.honor-copy { padding: clamp(20px, 4vh, 36px); }
.honor-row { display: flex; gap: 16px; align-items: baseline; }
.honor-row + .honor-row { margin-top: clamp(12px, 2.5vh, 20px); }
.honor-label {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em;
  color: var(--amber);
}
.honor-row p { color: var(--txt); font-size: 14px; line-height: 1.8; }

/* ---------- MEDIA ---------- */
.media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 3vh, 26px); }
.media-list { display: flex; flex-direction: column; gap: clamp(12px, 2.6vh, 22px); }
.media-card {
  display: flex; gap: 20px; text-decoration: none; color: var(--txt);
  padding: clamp(12px, 2.5vh, 18px);
  transition: transform .25s ease, border-color .3s;
}
.media-card:hover { border-color: rgba(255,154,60,.5); }
.media-thumb {
  position: relative; flex: 0 0 clamp(120px, 18vh, 168px); height: clamp(78px, 12vh, 108px); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mt-1 { background: radial-gradient(circle at 30% 70%, #7a2d08, #180b04 70%); }
.mt-2 { background: radial-gradient(circle at 70% 30%, #8a3d0a, #14090a 70%); }
.mt-3 { background: radial-gradient(circle at 50% 90%, #5e2606, #100804 70%); }
.mt-4 { background: radial-gradient(circle at 20% 20%, #93450c, #120a06 70%); }
.mt-5 { background: radial-gradient(circle at 60% 50%, #6e2a07, #170a05 70%); }
.mt-6 { background: radial-gradient(circle at 80% 10%, #9c4a0e, #130b07 70%); }
.mt-7 { background: radial-gradient(circle at 40% 80%, #7d3109, #0f0804 70%); }
.mt-8 { background: radial-gradient(circle at 10% 60%, #8b380b, #140a06 70%); }
.play {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(3,3,3,.55); border: 1px solid rgba(255,180,90,.5);
  color: var(--amber-hi); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: transform .3s, box-shadow .3s;
}
.media-card:hover .play { transform: scale(1.15); box-shadow: 0 0 24px rgba(255,140,40,.5); }
.media-info { display: flex; flex: 1; min-width: 0; flex-direction: column; justify-content: center; gap: 8px; }
.media-badge {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em;
  color: #140a02; background: var(--amber);
  border-radius: 3px; padding: 3px 8px; font-weight: 600;
}
.badge-xhs { background: #ff5b5b; color: #1a0505; }
.media-info h4 { font-size: 15px; font-weight: 500; }
.media-info h4 span { margin-left: 8px; font-family: var(--font-en); font-size: 11px; font-weight: 400; letter-spacing: .04em; color: var(--txt-dim); }
.media-info p { font-size: 12px; color: var(--txt-dim); font-family: var(--font-mono); }
.media-tagline { font-family: var(--font-zh); font-size: 13px; font-style: italic; color: var(--txt); }
.media-tagline-en { font-family: var(--font-en); font-size: 11px; color: var(--txt-dim); overflow-wrap: break-word; }

/* ---------- CONTACT ---------- */
.contact-inner { max-width: 620px; position: relative; }
.contact-form { display: flex; flex-direction: column; gap: clamp(12px, 2.5vh, 22px); }
.field label {
  display: block;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em;
  color: var(--amber); margin-bottom: 10px;
}
.field input, .field textarea {
  width: 100%;
  /* isolation wall: form stays razor-sharp no matter how bright the scene behind it burns */
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--amber-hi);
  font-family: var(--font-mono); font-size: 16px;
  padding: clamp(10px, 2vh, 16px) 18px;
  outline: none; resize: none;
  transition: border-color .3s, box-shadow .3s;
  caret-color: var(--amber);
}
.field label { text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.contact-form .btn-transmit { box-shadow: 0 0 28px rgba(255,120,26,.35), 0 8px 30px rgba(0,0,0,.6); }
.field input:focus, .field textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(255,154,60,.3), 0 0 30px rgba(255,120,26,.12);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(138,131,120,.5); }
.btn-transmit { margin-top: 8px; align-self: center; padding: 17px 44px; }

.contact-links { display: flex; gap: 28px; justify-content: center; margin-top: clamp(20px, 4vh, 44px); }
.contact-links a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .25em;
  color: var(--txt-dim); text-decoration: none;
  transition: color .3s, text-shadow .3s;
}
.contact-links a:hover { color: var(--amber-hi); text-shadow: 0 0 16px rgba(255,140,40,.6); }

.finale-msg {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.finale-msg h3 {
  font-family: var(--font-en); font-weight: 700;
  font-size: clamp(34px, 5vw, 56px); letter-spacing: .12em;
  background: linear-gradient(100deg, #ffe9c9, var(--amber), var(--ember));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 80px rgba(255,120,26,.4);
}
.finale-msg p { color: var(--txt-dim); letter-spacing: .3em; font-size: 13px; }

/* ---------- Footer ---------- */
.foot {
  position: relative; z-index: 10;
  display: flex; justify-content: space-between;
  padding: 26px 36px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
  color: rgba(138,131,120,.6);
  border-top: 1px solid rgba(255,154,60,.08);
}

/* ---------- Reveal helper ---------- */
.reveal { opacity: 0; transform: translateY(40px); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .sidenav { display: none; }
  /* Below the sidenav breakpoint, drop the "one section = one locked
     viewport with its own internal scroll" model entirely. On a phone,
     content inside profile/systems/media genuinely can't fit one screen —
     the internal overflow-y:auto trapped the scroll gesture inside a
     section, so getting from systems to media meant scrolling through all
     of systems' internal overflow first, with no clear signal you even
     could move on. Reverting to plain document flow here means one
     continuous scroll through everything, no per-section trap.
     No min-height here (deliberately) — paginated sections (systems/media)
     have pages with very different content lengths (6 cards vs. 2 on the
     last page), and a min-height:100dvh floor padded the short pages out
     into a screen of empty starfield with nothing to interact with, which
     read as "stuck" even though the page technically kept scrolling. */
  .sec {
    height: auto;
    overflow-y: visible;
    padding-left: 6vw; /* nav is hidden — reclaim the safe zone */
    /* fixed px, not vh: iOS Safari shrinks the layout viewport when the
       on-screen keyboard opens, so a vh-based padding-top collapses right
       when a form input is focused, letting the section heading slide up
       underneath the fixed topbar */
    padding-top: 100px;
  }
  .sec-hero { min-height: 100vh; min-height: 100dvh; } /* hero's content is fixed, not paginated — keep it a proper intro screen */
  .profile-grid { grid-template-columns: 1fr; }
  .module-grid { height: auto; }
  .honors-grid { grid-template-columns: 1fr; }
  .honor-media { max-width: 280px; margin: 0 auto; }
  .sys-grid { grid-template-columns: 1fr 1fr; }
  .media-grid { grid-template-columns: 1fr; }
  /* shine sweep + breathing glow + sparkle stroke read as visual noise at
     phone size (small glyphs, animation redraw cost, glow smearing against
     a busy starfield) — mobile keeps the static metallic gradient only. */
  .hero-title, .hero-title em {
    animation: none;
    -webkit-text-stroke-width: 0;
    text-shadow: none;
  }
}
@media (max-width: 620px) {
  .sys-grid { grid-template-columns: 1fr; }
  .module-grid { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; align-items: center; }
}

/* ---------- Pagination ---------- */
/* clip here, not on .sec: the inactive page is position:absolute for the
   crossfade, but it's still sized to ITS OWN content (e.g. page 1's 6 cards)
   — without clipping at this level, that invisible page still occupies real
   layout space below the shorter active page, which on mobile (where .sec
   no longer clips overflow) read as dead scroll space before the next
   section, i.e. exactly the "stuck" symptom */
.pg-wrap { position: relative; overflow: hidden; }
.pg-page {
  display: grid;
  transition: opacity .45s ease, transform .45s ease;
}
.pg-page:not(.pg-active) {
  position: absolute; top: 0; left: 0; right: 0;
  opacity: 0; pointer-events: none;
  transform: translateY(12px);
}
.pg-page.pg-active {
  position: relative;
  opacity: 1; transform: translateY(0);
}

.pg-controls {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: clamp(12px, 3vh, 36px);
  font-family: var(--font-mono);
}
.pg-arrow {
  width: clamp(30px, 5vh, 38px); height: clamp(30px, 5vh, 38px); border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(10,7,5,.45); backdrop-filter: blur(8px);
  color: var(--txt-dim); font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .3s;
}
.pg-arrow:hover { border-color: var(--amber); color: var(--amber-hi); }
.pg-arrow:disabled { opacity: .25; cursor: default; border-color: var(--line); color: var(--txt-dim); }

.pg-dots { display: flex; gap: 8px; }
.pg-dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--txt-dim);
  background: transparent; cursor: pointer;
  transition: all .3s;
}
.pg-dot.pg-dot-active { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 10px var(--amber); }
.pg-dot:hover:not(.pg-dot-active) { border-color: var(--amber-hi); }

.pg-counter {
  font-size: 10px; letter-spacing: .25em;
  color: var(--txt-dim);
  margin: 0 6px; white-space: nowrap;
}

/* ---------- Short-viewport floors ----------
   This is a public site — "short" has to cover everything from a maximized
   1366x768 laptop with 100px+ of browser chrome, to a non-maximized window,
   to a tablet in landscape, on any browser. Two compression tiers degrade
   gracefully instead of chasing one device's exact numbers, and both keep a
   real, visible gap above the viewport edge (never flush against it) before
   a section falls back to its own internal scroll as a last resort.
   Placed at the true end of the file so these overrides win regardless of
   where the property they touch was originally declared — CSS cascade
   resolves same-specificity rules by source order, not by media-query
   position, so a later plain rule (e.g. .pg-controls further up the file)
   would otherwise silently out-rank an earlier media-query override. */
@media (max-height: 820px) {
  .sec { padding-top: 48px; padding-bottom: 44px; }
  .sec-head { margin-bottom: 24px; }
  .profile-card, .sys-card { padding: 20px; }
  .module-card { padding: 10px 16px; }
  .sys-card p { line-height: 1.6; min-height: 0; }
  .module-grid, .sys-grid, .media-grid { gap: 12px; }
  .pg-controls { margin-top: 20px; }
}
@media (max-height: 620px) {
  .sec { padding-top: 40px; padding-bottom: 36px; }
  .sec-head { margin-bottom: 16px; }
  .profile-card, .sys-card { padding: 14px; }
  .module-card { padding: 8px 14px; }
  .avatar-frame, .avatar-core { width: 48px; height: 48px; }
  .profile-intro p { line-height: 1.5; }
  .sys-card p { line-height: 1.4; }
  .module-grid, .sys-grid, .media-grid { gap: 8px; }
  .pg-controls { margin-top: 14px; }
}