/* ==========================================================================
   STYLE.CSS — base layer + layout shell
   Depends on theme.css being loaded first.
   Section-specific component styles (hero, skills, timeline,
   terminal, etc.) are added here section-by-section in later steps —
   this step lays the reset, shell, and navigation only.
   ========================================================================== */

/* ---- reset ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* belt */
  max-width:100vw;   /* + suspenders — the actual fix is per-component,
                        this is just a guardrail while components migrate */
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.01em;
  margin:0;
  color:var(--text);
}
a{ color:inherit; }
button{ font-family:inherit; }
img,svg{ max-width:100%; display:block; }
.mono{ font-family:var(--font-mono); }
::selection{ background:rgba(var(--accent-rgb),.35); color:#fff; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding-inline: var(--sp-s);
}

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:var(--z-progress);
  background:var(--accent); color:var(--void); font-weight:600;
  padding:12px 20px; border-radius:var(--radius-s);
  transition:top var(--dur-fast) var(--ease);
  text-decoration:none;
}
.skip-link:focus{ top:16px; }

/* ---- ambient background system ----------------------------------------- */
.bg-layer{ position:fixed; inset:0; z-index:var(--z-bg); pointer-events:none; }
.bg-aurora{
  background:
    radial-gradient(50% 40% at 20% 15%, rgba(var(--accent-rgb),.16), transparent 70%),
    radial-gradient(45% 35% at 85% 25%, rgba(var(--accent-2-rgb),.11), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(var(--accent-rgb),.08), transparent 70%),
    var(--void);
  background-size:160% 160%, 160% 160%, 160% 160%, auto;
  transition:background 1.2s ease;
  animation:aurora-drift 24s ease-in-out infinite alternate;
}

/* ---- drifting ambient orbs — big, slow, softly blurred color blobs that
   wander behind the grid/content, reinforcing depth without competing with
   the particle constellation (which stays sharp and foreground-adjacent) */
.bg-orbs{ overflow:hidden; }
.orb{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
  will-change:transform;
}
.orb-a{
  width:38vmax; height:38vmax; top:-10%; left:-8%;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.55), transparent 70%);
  animation:orb-drift-a 26s ease-in-out infinite;
}
.orb-b{
  width:32vmax; height:32vmax; bottom:-14%; right:-6%;
  background:radial-gradient(circle, rgba(var(--accent-2-rgb),.5), transparent 70%);
  animation:orb-drift-b 32s ease-in-out infinite;
}
.orb-c{
  width:26vmax; height:26vmax; top:40%; left:60%;
  background:radial-gradient(circle, rgba(var(--gold-rgb),.32), transparent 70%);
  animation:orb-drift-c 38s ease-in-out infinite;
}

.bg-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(80% 60% at 50% 20%, black, transparent 90%);
  animation:grid-pan 40s linear infinite;
}

/* ---- scanlines — very faint horizontal sweep, pure HUD/CRT texture ------ */
.bg-scanlines{
  background-image:repeating-linear-gradient(
    to bottom, rgba(255,255,255,.018) 0px, rgba(255,255,255,.018) 1px,
    transparent 1px, transparent 3px
  );
  background-size:100% 120px;
  animation:scan-move 9s linear infinite;
  mix-blend-mode:overlay;
}

#particle-canvas{ position:fixed; inset:0; z-index:var(--z-bg); pointer-events:none; opacity:.55; }

main{ position:relative; z-index:var(--z-content); }

/* ---- scroll progress ---------------------------------------------------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--gold));
  z-index:var(--z-progress); transition:width .1s linear, background .6s ease;
}

/* ==========================================================================
   NAVIGATION
   Desktop: sticky bar, blurs on scroll, animated active-link underline.
   Mobile (≤ 820px): bottom tab bar, auto-hides on scroll-down, shows on
   scroll-up (handled by interaction.js toggling .nav-hidden).
   ========================================================================== */
.site-nav{
  position:sticky; top:0; z-index:var(--z-nav);
  backdrop-filter:blur(14px);
  background:rgba(10,14,21,.6);
  border-bottom:1px solid var(--border-soft);
  transition:background .3s ease, border-color .3s ease;
}
.site-nav.is-scrolled{ background:rgba(10,14,21,.86); }

.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-xs) var(--sp-s);
  max-width:1180px; margin:0 auto;
}
.nav-brand{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-md);
  display:flex; align-items:center; gap:10px; text-decoration:none;
}
.nav-brand .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px rgba(var(--accent-rgb),.8);
  transition:background .6s ease, box-shadow .6s ease;
}

.nav-links{ display:flex; gap:6px; list-style:none; margin:0; padding:0; }
.nav-links a{
  text-decoration:none; color:var(--text-dim); font-size:var(--fs-sm); font-weight:500;
  padding:8px 14px; border-radius:var(--radius-s); position:relative;
  transition:color .25s ease;
}
.nav-links a:hover{ color:var(--text); }
.nav-links a[aria-current="true"]{ color:var(--text); }
.nav-links a[aria-current="true"]::after{
  content:''; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  background:var(--accent); border-radius:2px;
}

.nav-cta{
  font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:500;
  color:var(--bg); background:var(--accent);
  padding:9px 16px; border-radius:var(--radius-s); text-decoration:none;
  border:none; cursor:pointer; transition:transform .2s var(--ease), background .4s ease;
}
.nav-cta:hover{ transform:translateY(-1px); }

.nav-cmdk-btn{
  font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.04em;
  color:var(--text-mute); background:var(--panel-2); border:1px solid var(--border);
  border-radius:var(--radius-s); padding:8px 12px; cursor:pointer; margin-left:8px;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.nav-cmdk-btn:hover, .nav-cmdk-btn:focus-visible{ color:var(--accent); border-color:var(--accent); }

.nav-toggle{
  display:none; background:none; border:1px solid var(--border); color:var(--text);
  width:44px; height:44px; border-radius:var(--radius-s); cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-toggle svg{ width:20px; height:20px; }

/* ---- mobile: bottom tab bar instead of drawer ------------------------- */
@media (max-width:820px){
  .site-nav{
    position:fixed; top:auto; bottom:0; left:0; right:0;
    border-top:1px solid var(--border-soft); border-bottom:none;
    background:rgba(10,14,21,.92);
    transition:transform .35s var(--ease), background .3s ease;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .site-nav.nav-hidden{ transform:translateY(100%); }
  .nav-inner{ padding:10px var(--sp-xs); }
  .nav-brand{ display:none; }
  .nav-cta{ display:none; }
  .nav-cmdk-btn{ display:none; }
  .nav-toggle{ display:none; } /* bottom bar replaces the hamburger entirely */
  .nav-links{
    width:100%; justify-content:space-between; gap:0;
  }
  .nav-links a{
    flex:1; text-align:center; padding:10px 4px; font-size:var(--fs-xs);
    min-height:44px; display:flex; align-items:center; justify-content:center;
  }
  .nav-links a[aria-current="true"]::after{ bottom:auto; top:2px; left:50%; right:auto; width:16px; transform:translateX(-50%); }
}

/* ---- reusable card/panel base — every card component extends this ------ */
.panel{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-l); padding:var(--sp-m);
  position:relative;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease);
}
.panel:hover{ border-color:rgba(var(--accent-rgb),.4); }

/* signature corner-bracket "targeting frame" motif — kept from v1, it's
   the one piece of visual identity worth building everything else around */
.bracket-frame{ position:relative; }
.bracket-frame::before,.bracket-frame::after,
.bracket-frame .bk-tr,.bracket-frame .bk-bl{
  content:''; position:absolute; width:14px; height:14px;
  border-color:rgba(var(--accent-rgb),.55);
  transition:border-color .3s ease, width .25s ease, height .25s ease;
  pointer-events:none;
}
.bracket-frame::before{ top:-1px; left:-1px; border-top:2px solid; border-left:2px solid; }
.bracket-frame::after{ bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid; }
.bracket-frame .bk-tr{ top:-1px; right:-1px; border-top:2px solid; border-right:2px solid; }
.bracket-frame .bk-bl{ bottom:-1px; left:-1px; border-bottom:2px solid; border-left:2px solid; }
.bracket-frame:hover::before,.bracket-frame:hover::after,
.bracket-frame:hover .bk-tr,.bracket-frame:hover .bk-bl{
  border-color:var(--accent); width:18px; height:18px;
}

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

.section{ padding:var(--sp-2xl) 0; position:relative; }
.section-head{ margin-bottom:var(--sp-l); max-width:640px; }
.section-eyebrow{
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--accent);
  text-transform:uppercase; letter-spacing:.14em; margin-bottom:10px;
  transition:color .6s ease;
}
.section-title{ font-size:var(--fs-xl); margin-bottom:12px; }
.section-desc{ color:var(--text-dim); font-size:var(--fs-body); max-width:60ch; }


/* ==========================================================================
   HERO (base version — replaced with the full rebuild in Step 2)
   ========================================================================== */
.hero{ padding:var(--sp-2xl) 0 var(--sp-l); display:grid; grid-template-columns:auto 1fr; gap:var(--sp-l); align-items:center; position:relative; }
.hero-avatar-wrap{ position:relative; width:180px; height:180px; justify-self:center; }
.hero-avatar-ring{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--gold), var(--accent)); animation:ring-spin 8s linear infinite; padding:3px; }
.hero-avatar{
  position:absolute; inset:6px; border-radius:50%;
  background:var(--panel-2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-avatar img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
.hero-level{ position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); background:var(--void); border:1px solid var(--accent); color:var(--accent); font-family:var(--font-mono); font-size:.72rem; font-weight:600; padding:4px 12px; border-radius:20px; white-space:nowrap; box-shadow:0 0 16px rgba(var(--accent-rgb),.25); }
.hero-body .eyebrow{ font-family:var(--font-mono); font-size:.78rem; color:var(--accent-2); letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.eyebrow .blip{ width:6px; height:6px; border-radius:50%; background:var(--accent-2); animation:blip 1.6s ease-in-out infinite; }
.hero-title{ font-size:var(--fs-3xl); line-height:1.08; margin-bottom:14px; }
.hero-title .highlight{ color:var(--accent); }
.hero-tagline{ font-family:var(--font-mono); font-size:var(--fs-md); color:var(--text-dim); min-height:1.6em; margin-bottom:8px; }
.hero-tagline .cursor-caret{ display:inline-block; width:8px; background:var(--accent); margin-left:2px; animation:caret-blink 1s steps(1) infinite; }
.hero-line-id{ color:var(--text-mute); font-size:.92rem; margin-bottom:28px; }
.hero-xp{ max-width:420px; margin-bottom:32px; }
.hero-xp-label{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.74rem; color:var(--text-mute); margin-bottom:6px; text-transform:uppercase; letter-spacing:.06em; }
.hero-xp-track{ height:8px; border-radius:6px; background:var(--panel-2); border:1px solid var(--border); overflow:hidden; position:relative; }
.hero-xp-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); width:0%; transition:width 1.4s var(--ease); position:relative; }
.hero-xp-fill::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); width:40px; animation:xp-shine 2.6s ease-in-out infinite; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

.btn{
  font-family:var(--font-display); font-weight:600; font-size:.98rem;
  padding:13px 26px; border-radius:var(--radius-s); border:1px solid transparent;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .2s var(--ease), box-shadow .3s ease, background .3s ease, border-color .3s ease;
  min-height:44px; position:relative; overflow:hidden;
}
.btn-primary{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--void); }
.btn-primary:hover{ box-shadow:var(--glow); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

@media (max-width:760px){
  .hero-xp{ margin-inline:auto; }
  .hero-avatar-wrap{ width:140px; height:140px; }
}

/* parallax target gets its own transition so the rAF-driven transform
   (set in hero.js) doesn't fight the tilt engine's transform — tilt writes
   rotateX/Y, parallax writes translateY; see initHeroParallax comment */
[data-parallax]{ transition:transform .1s linear; will-change:transform; }

/* ---- floating achievement-category badges around the avatar ---- */
.hero-badge{
  position:absolute; width:34px; height:34px; border-radius:50%;
  background:var(--panel); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:600; color:var(--accent);
  box-shadow:var(--shadow-s);
  animation:float-y 3.6s ease-in-out infinite;
}
.hero-badge-1{ top:-6px; left:-14px; animation-delay:0s; color:var(--gold); }
.hero-badge-2{ bottom:18px; right:-18px; animation-delay:.6s; color:var(--teal); }
.hero-badge-3{ top:38%; right:-26px; animation-delay:1.2s; color:var(--violet); }
@media (max-width:760px){
  .hero-badge{ width:28px; height:28px; font-size:.6rem; }
  .hero-badge-1{ left:-8px; }
  .hero-badge-2{ right:-8px; }
  .hero-badge-3{ right:-14px; }
}

/* ---- hero stats row ---- */
.hero-stats{ display:flex; gap:var(--sp-l); flex-wrap:wrap; margin-bottom:28px; }
.hero-stat{ display:flex; flex-direction:column; gap:2px; }
.hero-stat-num{ font-size:var(--fs-lg); font-weight:600; color:var(--accent); line-height:1; }
.hero-stat-label{ font-size:.76rem; color:var(--text-mute); max-width:14ch; }
@media (max-width:760px){ .hero-stats{ justify-content:center; } .hero-stat-label{ max-width:none; } }

/* ---- scroll indicator ---- */
.scroll-indicator{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:none; border:none; color:var(--text-mute); cursor:pointer;
  padding:8px; transition:opacity .3s ease;
}
.scroll-indicator.is-faded{ opacity:0; pointer-events:none; }
.scroll-indicator-mouse{
  width:22px; height:36px; border:2px solid var(--border); border-radius:12px;
  display:flex; justify-content:center; padding-top:6px;
}
.scroll-indicator-wheel{ width:3px; height:7px; border-radius:2px; background:var(--accent); animation:float-y 1.4s ease-in-out infinite; }
.scroll-indicator-label{ font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; }
@media (max-width:760px){ .scroll-indicator{ display:none; } }

/* ---- about ---- */
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-l); align-items:start; }
.about-text p{ color:var(--text-dim); margin:0 0 16px; }
.trait-list{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:20px 0 0; }
.trait-chip{ font-family:var(--font-mono); font-size:.76rem; color:var(--accent-2); border:1px solid rgba(var(--accent-2-rgb),.35); background:rgba(var(--accent-2-rgb),.08); padding:6px 12px; border-radius:20px; transition:all .2s ease; }
.trait-chip:hover{ background:rgba(var(--accent-2-rgb),.18); transform:translateY(-1px); }
.hud-row{ display:flex; justify-content:space-between; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--border-soft); font-size:.9rem; }
.hud-row:last-child{ border-bottom:none; }
.hud-row .k{ color:var(--text-mute); font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.hud-row .v{ font-family:var(--font-mono); color:var(--text); }

/* ---- skills (bars — replaced with radar chart in a later step) ---- */
.skills-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.skill-group-title{ font-family:var(--font-mono); font-size:.76rem; color:var(--text-mute); text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px; }
.skill-item{ margin-bottom:18px; }
.skill-item:last-child{ margin-bottom:0; }
.skill-item-head{ display:flex; justify-content:space-between; margin-bottom:8px; }
.skill-name{ font-weight:600; font-size:.94rem; }
.skill-status{ font-family:var(--font-mono); font-size:.68rem; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:.04em; }
.skill-status.active{ color:var(--accent-2); background:rgba(var(--accent-2-rgb),.1); border:1px solid rgba(var(--accent-2-rgb),.3); }
.skill-status.learning{ color:var(--gold); background:rgba(209,162,78,.1); border:1px solid rgba(209,162,78,.3); }
.skill-bar-track{ height:6px; border-radius:4px; background:var(--panel-2); border:1px solid var(--border); overflow:hidden; }
.skill-bar-fill{ height:100%; border-radius:4px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); width:0%; transition:width 1.1s var(--ease); }
.skill-pct{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-mute); margin-top:4px; display:block; text-align:right; }

/* ---- quest log timeline ---- */
.quest-tabs{ display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
.quest-tab{ font-family:var(--font-mono); font-size:.82rem; font-weight:500; background:var(--panel); border:1px solid var(--border); color:var(--text-dim); padding:10px 18px; border-radius:var(--radius-s); cursor:pointer; transition:all .25s ease; }
.quest-tab[aria-selected="true"]{ color:var(--void); background:var(--accent); border-color:var(--accent); }
.quest-panel[hidden]{ display:none; }
.quest-list{ display:flex; flex-direction:column; gap:14px; position:relative; }
.quest-list::before{ content:''; position:absolute; left:31px; top:12px; bottom:12px; width:4px; background:linear-gradient(var(--border), var(--border-soft)); border-radius:2px; z-index:0; }
.quest-entry{ overflow:hidden; position:relative; }
.quest-entry-btn{ width:100%; text-align:left; background:none; border:none; color:inherit; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px 20px 60px; cursor:pointer; position:relative; z-index:2; }
.quest-entry-main{ display:flex; align-items:center; gap:16px; flex:1; min-width:0; }
.quest-date{ font-family:var(--font-mono); font-size:.76rem; color:var(--text-mute); white-space:nowrap; min-width:88px; flex-shrink:0; }
.quest-title-wrap{ min-width:0; }
.quest-title{ font-weight:600; font-size:1rem; margin-bottom:2px; }
.quest-org{ font-size:.86rem; color:var(--text-dim); }
.quest-status{ font-family:var(--font-mono); font-size:.68rem; padding:3px 10px; border-radius:10px; white-space:nowrap; text-transform:uppercase; flex-shrink:0; }
.quest-status.completed{ color:var(--accent-2); border:1px solid rgba(var(--accent-2-rgb),.35); }
.quest-status.inprogress{ color:var(--gold); border:1px solid rgba(209,162,78,.35); }
.quest-chevron{ width:18px; height:18px; flex-shrink:0; color:var(--text-mute); transition:transform .3s var(--ease); }
.quest-entry-btn[aria-expanded="true"] .quest-chevron{ transform:rotate(180deg); }
.quest-dot{ position:absolute; left:19px; top:26px; width:24px; height:24px; background:var(--panel); border:3px solid var(--accent); border-radius:50%; z-index:3; transition:all .3s var(--ease); display:flex; align-items:center; justify-content:center; }
.quest-dot::after{ content:''; width:8px; height:8px; background:var(--accent); border-radius:50%; }
.quest-entry:hover .quest-dot{ border-color:var(--accent-2); transform:scale(1.1); }
.quest-progress{ height:3px; background:var(--panel-2); border-radius:3px; overflow:hidden; margin-top:8px; position:relative; }
.quest-progress-fill{ height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width .8s var(--ease); }
.quest-progress-label{ font-family:var(--font-mono); font-size:.62rem; color:var(--text-mute); position:absolute; right:0; top:-14px; }
.quest-body-outer{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); padding-left:60px; }
.quest-entry-btn[aria-expanded="true"] + .quest-body-outer{ grid-template-rows:1fr; }
.quest-body-inner{ overflow:hidden; }
.quest-body{ padding:0 24px 22px 0; color:var(--text-dim); font-size:.92rem; max-width:64ch; }
@media (max-width:600px){
  .quest-entry-btn{ padding:16px 16px 16px 52px; gap:10px; }
  .quest-list::before{ left:24px; }
  .quest-dot{ left:12px; width:20px; height:20px; top:20px; }
  .quest-body-outer{ padding-left:52px; }
}

/* ---- currently building ---- */
.build-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.build-card{ display:flex; flex-direction:column; gap:14px; transition:transform .3s var(--ease); }
.build-status{ align-self:flex-start; font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gold); border:1px solid rgba(209,162,78,.35); background:rgba(209,162,78,.08); padding:4px 10px; border-radius:10px; }
.build-title{ font-size:1.1rem; }
.build-desc{ color:var(--text-dim); font-size:.9rem; flex:1; }
.build-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.build-tag{ font-family:var(--font-mono); font-size:.68rem; color:var(--text-mute); border:1px solid var(--border); padding:3px 9px; border-radius:8px; }
.build-cta-row{ text-align:center; margin-top:44px; }
.build-cta-row p{ color:var(--text-dim); margin-bottom:18px; }


/* ---- contact terminal ---- */
.terminal-shell{
  max-width:760px; margin:0 auto; padding:0; overflow:hidden;
  background:#0b0f16; border-color:var(--border);
}
.terminal-titlebar{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; background:var(--panel-2); border-bottom:1px solid var(--border-soft);
}
.terminal-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.dot-red{ background:#e05a5a; }
.dot-yellow{ background:#d1a24e; }
.dot-green{ background:#4bc9bb; }
.terminal-titletext{ margin-left:8px; font-size:.76rem; color:var(--text-mute); }

.terminal-body{
  height:min(46vh, 360px); overflow-y:auto; padding:16px 18px;
  font-size:.86rem; line-height:1.65; color:var(--text-dim);
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.terminal-body::-webkit-scrollbar{ width:8px; }
.terminal-body::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; }
.term-line{ margin:0 0 10px; white-space:pre-wrap; word-break:break-word; }
.term-line-echo{ color:var(--text); }
.term-prompt-echo{ color:var(--accent-2); }
.term-cmd{ color:var(--accent-2); }
.term-hint{ color:var(--text-mute); font-size:.78rem; }
.term-copy{
  background:none; border:none; padding:0; color:var(--gold); font-family:var(--font-mono);
  font-size:inherit; cursor:pointer; text-decoration:underline dotted; min-height:auto;
}
.terminal-body a{ color:var(--teal); }

.terminal-inputrow{
  position:relative;
  display:flex; align-items:center; gap:10px; padding:12px 18px;
  border-top:1px solid var(--border-soft); background:var(--panel-2);
}

/* ---- terminal autocomplete dropdown ---- */
.term-suggest{
  position:absolute; left:18px; right:18px; bottom:calc(100% + 4px);
  display:flex; flex-wrap:wrap; gap:6px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-s); padding:8px; box-shadow:var(--shadow-m);
  z-index:5;
}
.term-suggest[hidden]{ display:none; }
.term-suggest-item{
  font-family:var(--font-mono); font-size:.76rem; color:var(--text-dim);
  background:var(--panel-2); border:1px solid var(--border-soft);
  border-radius:6px; padding:4px 9px; cursor:pointer; transition:all .15s ease;
}
.term-suggest-item:hover{ color:var(--accent); border-color:var(--accent); }

/* ---- terminal JSON viewer ---- */
.term-json{
  margin:0 0 10px; padding:12px 14px; background:var(--panel);
  border:1px solid var(--border-soft); border-radius:var(--radius-s);
  font-family:var(--font-mono); font-size:.82rem; line-height:1.6;
  overflow-x:auto; white-space:pre;
}
.term-json-key{ color:var(--accent-2); }
.term-json-str{ color:var(--gold); }
.term-json-num{ color:var(--emerald); }
.terminal-prompt{ color:var(--accent-2); font-size:.84rem; flex-shrink:0; }
.terminal-input{
  flex:1; background:none; border:none; color:var(--text); font-size:.9rem;
  outline:none; min-width:0; min-height:24px;
}
.terminal-input::placeholder{ color:var(--text-mute); }

.terminal-quickrow{
  display:flex; flex-wrap:wrap; gap:8px; padding:12px 18px;
  border-top:1px solid var(--border-soft);
}
.quick-cmd{
  font-family:var(--font-mono); font-size:.76rem; color:var(--text-dim);
  background:var(--panel); border:1px solid var(--border); border-radius:20px;
  padding:8px 14px; cursor:pointer; transition:all .2s ease;
}
.quick-cmd:hover, .quick-cmd:focus-visible{ color:var(--accent); border-color:var(--accent); }
.quick-cmd-vcard{ color:var(--accent); border-color:rgba(var(--accent-rgb),.4); }

/* ---- direct contact links — always-visible fallback to typing commands - */
.contact-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-top:22px;
}
.contact-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.82rem; font-weight:500; color:var(--text-dim);
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-full);
  padding:10px 18px; text-decoration:none; cursor:pointer;
  transition:color .2s ease, border-color .2s ease, transform .2s var(--ease), background .2s ease;
}
.contact-link-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; font-size:.78rem; line-height:1; color:var(--accent);
}
.contact-link:hover, .contact-link:focus-visible{
  color:var(--text); border-color:var(--accent); transform:translateY(-2px);
  box-shadow:0 6px 18px -8px rgba(var(--accent-rgb),.5);
}
.contact-link-accent{
  color:var(--void); background:var(--accent); border-color:var(--accent);
}
.contact-link-accent .contact-link-icon{ color:var(--void); }
.contact-link-accent:hover, .contact-link-accent:focus-visible{ color:var(--void); transform:translateY(-2px); }

@media (max-width:600px){
  .terminal-body{ height:min(50vh, 320px); font-size:.82rem; }
  .terminal-titletext{ font-size:.68rem; }
}

.toast{ position:fixed; bottom:96px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--panel-2); border:1px solid var(--accent); color:var(--text); font-family:var(--font-mono); font-size:.86rem; padding:12px 20px; border-radius:var(--radius-s); opacity:0; pointer-events:none; transition:all .35s var(--ease); z-index:var(--z-toast); display:flex; align-items:center; gap:10px; }
.toast.is-shown{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .check{ color:var(--accent-2); }
@media (min-width:821px){ .toast{ bottom:28px; } }

.site-footer{ border-top:1px solid var(--border-soft); padding:40px 0 calc(40px + 64px); position:relative; z-index:1; }
@media (min-width:821px){ .site-footer{ padding-bottom:40px; } }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-inner p{
  color:var(--text-dim);
  font-size:.84rem;
  font-family:var(--font-mono);
}
.footer-name{
  color:var(--accent);
  font-weight:600;
  transition:color .6s ease;
}
.to-top-btn{ width:44px; height:44px; border-radius:50%; background:var(--panel); border:1px solid var(--border); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s ease; }
.to-top-btn:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* cursor */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:var(--z-cursor); pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); opacity:0; transition:opacity .3s ease; }
.cursor-dot{ width:6px; height:6px; background:var(--accent); }
.cursor-ring{ width:32px; height:32px; border:1px solid rgba(var(--accent-rgb),.6); transition:opacity .3s ease, width .2s var(--ease), height .2s var(--ease), border-color .2s ease; }
.has-pointer .cursor-dot,.has-pointer .cursor-ring{ opacity:1; }
.cursor-ring.is-active{ width:48px; height:48px; border-color:var(--accent-2); }

[data-magnetic],[data-tilt]{ transition:transform .25s var(--ease); }
[data-tilt]{ transform-style:preserve-3d; }

/* ---- Matrix mode overlay (Konami code easter egg, see easter-egg.js) --- */
.matrix-overlay{
  position:fixed; inset:0; z-index:var(--z-matrix); background:var(--void);
  display:none; align-items:flex-end; justify-content:center;
  padding-bottom:32px;
}
.matrix-overlay.is-active{ display:flex; }
.matrix-overlay canvas{ position:absolute; inset:0; width:100%; height:100%; }
.matrix-hint{
  position:relative; z-index:1; color:var(--teal); font-size:.8rem;
  background:rgba(8,11,16,.7); padding:8px 16px; border-radius:var(--radius-full);
  border:1px solid rgba(75,201,187,.4);
}
.matrix-hint kbd{ font-family:var(--font-mono); background:var(--panel-2); padding:1px 6px; border-radius:4px; border:1px solid var(--border); }