/* ============================================================
   Layout — background layers, shell, section scaffolding
   ============================================================ */

html {
  scroll-padding-top: 96px;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(1200px 900px at 15% -10%, var(--bg-glow-1) 0%, transparent 55%),
    radial-gradient(1000px 800px at 110% 20%, var(--bg-glow-2) 0%, transparent 55%),
    var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
}

::selection { background: rgba(52, 226, 226, 0.3); color: var(--ink); }

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

/* ---------- Background mount ----------
   Layers, back to front: body gradient → #field canvas → blobs+grain → content */
#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  display: block;
  pointer-events: none;
}

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.blob {
  position: absolute;
  width: 52vw;
  height: 52vw;
  min-width: 460px;
  min-height: 460px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: var(--blob-opacity);
  will-change: transform;
}
.blob--indigo  { background: radial-gradient(circle at 30% 30%, var(--blob-1), transparent 68%); top: -12%; left: -8%;  animation: drift-a 26s var(--ease) infinite alternate; }
.blob--cyan    { background: radial-gradient(circle at 30% 30%, var(--blob-2), transparent 68%); top: 34%;  left: 58%;  animation: drift-b 32s var(--ease) infinite alternate; }
.blob--magenta { background: radial-gradient(circle at 30% 30%, var(--blob-3), transparent 68%); top: 66%;  left: 6%;   animation: drift-c 29s var(--ease) infinite alternate; }

.grain {
  position: absolute;
  inset: -50%;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
}

@keyframes drift-a { from { transform: translate(0,0) scale(1); } to { transform: translate(14vw, 10vh) scale(1.15); } }
@keyframes drift-b { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-16vw, 6vh) scale(0.95); } }
@keyframes drift-c { from { transform: translate(0,0) scale(1); } to { transform: translate(10vw, -12vh) scale(1.2); } }

.glass-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Containers + sections ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  position: relative;
  max-width: var(--maxw);
  margin: clamp(96px, 13vw, 160px) auto 0;
  padding: 0 24px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 28px;
}
.section-index {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--accent-2);
}

/* ---------- Floating pill nav (shell) ----------
   Same class names as the old shell so interior pages inherit it. */
.header {
  position: sticky;
  top: 18px;
  z-index: 50;
  padding: 0 20px;
  display: flex;
  justify-content: center;
}
.nav {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px 10px 20px;
  border-radius: 999px;
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-brd);
  box-shadow:
    inset 0 1px 1px 0 var(--glass-rim),
    inset 0 -1px 1px 0 var(--glass-rim-2),
    inset 0 0 0 1px var(--surface-1),
    0 12px 40px -12px var(--shadow-soft),
    0 3px 10px -6px var(--shadow-soft);
}
/* Liquid specular sheen — bright gloss curving across the top of the bar */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(255, 255, 255, 0) 52%);
  pointer-events: none;
  z-index: 0;
}
.nav > * { position: relative; z-index: 1; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav {
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(30px) saturate(190%);
    backdrop-filter: blur(30px) saturate(190%) url(#glass-distortion);
  }
}
.nav-logo {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  color: var(--ink);
}
.nav-logo::before {
  content: "h.m";
  font-family: var(--font-mono);
  color: var(--accent-2);
  margin-right: 8px;
}
.nav-links {
  display: flex;
  gap: 4px;
  margin: 0 auto 0 4px;
}
.nav-link {
  display: inline-block;
  color: var(--ink-soft);
  font-size: 0.9rem;
  padding: 8px 13px;
  border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}
.nav-link:hover { color: var(--ink); background: var(--surface-2); }
.nav-link.active { color: var(--ink); background: var(--surface-hover); }
.nav-cta {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--btn-solid-ink);
  background: var(--btn-solid);
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 16px -4px rgba(109, 139, 255, 0.6);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -6px rgba(109, 139, 255, 0.8); }
.nav-toggle { display: none; }

/* ---------- Hero: offset panel + overlapping terminal ---------- */
/* Fills the viewport below the sticky nav and centres the composition, so
   nothing below the hero is visible until you scroll. The extra bottom
   padding balances the terminal's overhang past the panel. */
.hero {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px 120px;
  min-height: calc(100svh - 80px);
  display: flex;
  align-items: center;
}
.hero-stage { position: relative; width: 100%; }
/* Scroll cue: label over a hairline track with a light travelling down it */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--ink-mute);
  transition: color 0.2s;
}
.scroll-cue:hover { color: var(--ink); }
.scroll-cue-line {
  position: relative;
  width: 2px;
  height: 64px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--glass-brd);
}
.scroll-cue-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, var(--accent), transparent);
  animation: scroll-cue 2.2s var(--ease) infinite;
}
@keyframes scroll-cue {
  from { transform: translateY(-100%); }
  to   { transform: translateY(250%); }
}
.hero-panel {
  width: min(91%, 975px);
  top: 42px;
  padding: clamp(36px, 5vw, 64px);
  border-radius: var(--radius-lg);
}
.hero-name {
  font-size: clamp(2.8rem, 8vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 18px;
}
.hero-tagline {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
  max-width: 24ch;
}
.hero-description {
  color: var(--ink-mute);
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  max-width: 44ch;
  margin: 0 0 32px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* Terminal hangs off the hero panel's right edge and crosses the
   hero→about section boundary. Parallax wrapper; window inside. */
.hero-terminal {
  position: absolute;
  right: 0;
  bottom: clamp(-120px, -9vw, -64px);
  width: min(44%, 470px);
  z-index: 3;
}
/* Headshot: glass-framed panel in the hero's top-right; the terminal
   overlaps its lower edge (higher z-index) for the stacked-glass look. */
.hero-photo {
  position: absolute;
  top: 10px;
  right: 36px;
  width: min(33%, 344px);
  aspect-ratio: 25 / 24;
  z-index: 2;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--glass-brd);
  box-shadow:
    inset 0 1px 0 0 var(--glass-rim),
    0 30px 60px -24px var(--shadow-strong);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- About: single full-width panel ---------- */
.about-layout { position: relative; }
.about-panel { padding: clamp(28px, 4vw, 48px); }

/* ---------- Projects: irregular mosaic — the heading is one tile in it ----------
   The cards are direct grid items (the list wrapper goes `display: contents`),
   so each one picks its own span and the rows stagger instead of stacking in a
   single right-hand column. */
.projects-layout {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(22px, 2.8vw, 38px);
  align-items: start;
}
.projects-rail {
  grid-column: 1 / span 2;
  padding-top: clamp(8px, 2vw, 28px);
}
.projects-rail .section-title { font-size: clamp(2rem, 4.6vw, 3rem); }
.projects-rail-note {
  color: var(--ink-mute);
  font-size: 0.95rem;
  max-width: 26ch;
  margin: 14px 0 0;
}
.projects-rail-count {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-mute);
  margin-top: 26px;
}
.projects-list {
  display: grid;
  gap: 26px;
}
/* Inside the mosaic the wrapper is transparent, so the cards themselves land
   in .projects-layout's grid. */
.projects-layout > .projects-list { display: contents; }
.projects-layout .project-wrap:nth-child(1) { grid-column: 3 / span 4; }
.projects-layout .project-wrap:nth-child(2) { grid-column: 1 / span 3; }
.projects-layout .project-wrap:nth-child(3) { grid-column: 4 / span 3; margin-top: clamp(0px, 5vw, 64px); }
.projects-layout .project-wrap:nth-child(4) { grid-column: 2 / span 3; margin-top: clamp(0px, 2.5vw, 30px); }
.projects-layout .project-wrap:nth-child(5) { grid-column: 4 / span 3; margin-top: clamp(0px, 1.5vw, 18px); }

/* Hub pages (guides/timeline) put the list straight under .section — cap its
   width so single-column cards keep a readable measure, and keep the old
   left/right stagger there. */
.section > .projects-list { max-width: 840px; }
.section > .projects-list > .project-wrap:nth-child(odd)  { margin-right: clamp(0px, 6vw, 72px); }
.section > .projects-list > .project-wrap:nth-child(even) { margin-left: clamp(0px, 6vw, 72px); }

/* ---------- Explore: asymmetric pair, second card drops low ---------- */
.explore {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 20px;
  align-items: start;
}
.explore-card:nth-child(2) { margin-top: 56px; }

/* ---------- Contact: right-shifted panel ---------- */
.contact-panel {
  max-width: 780px;
  margin-left: auto;
  padding: clamp(28px, 5vw, 52px);
}

/* ---------- Footer (shell) ---------- */
.footer {
  max-width: var(--maxw);
  margin: clamp(80px, 12vw, 130px) auto 40px;
  padding: 0 24px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 0.85rem;
  font-family: var(--font-mono);
}
/* Footer already provides the gutter + max-width; neutralise the inner
   .container so the text isn't double-inset. */
.footer .container { max-width: none; padding: 0; }