/* ===================================================================
   Ethan Mills — Engineering Portfolio
   Dark aerospace / technical design system — signal blue on graphite.
=================================================================== */

:root{
  /* Dark aerospace base — cool graphite with a blue accent */
  --bg:            #0a0d12;
  --bg-alt:        #0d1117;
  --surface:       #12161d;
  --surface-2:     #171c25;
  --border:        #232a35;
  --border-soft:   #1a202a;

  --text:          #edf1f7;
  --text-dim:      #a9b2c3;
  --text-faint:    #6b7484;

  /* Primary accent: signal blue */
  --accent:        #4fc3ff;
  --accent-rgb:    79,195,255;
  --accent-dim:    #2f7fa8;
  --accent-soft:   #6ecfff;

  /* Secondary accent: warm ember — used for flow-viz + contrast, not dominant */
  --accent-2:      #ff8a4c;
  --accent-2-rgb:  255,138,76;

  --success:       #4fd692;
  --success-rgb:   79,214,146;

  /* Jet gradient — the exact blue -> red -> amber progression from the Goals
     section's flow-viz graphic. Reused sparingly as a site-wide signature
     accent (buttons, hover glows, ambient background) so every section
     shares the same visual thread as that image. */
  --jet-blue:  #7bb5d3;
  --jet-red:   #d37a8a;
  --jet-amber: #d1ab75;
  --gradient-jet: linear-gradient(135deg, var(--jet-blue) 0%, var(--jet-red) 52%, var(--jet-amber) 100%);

  /* More saturated variant, used only on primary buttons: blue holds as the
     dominant color (like the jet photo, where blue covers most of the
     airframe) with red and amber appearing as smaller, later accents
     rather than three equal bands. */
  --jet-blue-vivid:  #1a6fd1;
  --jet-red-vivid:   #e9637b;
  --jet-amber-vivid: #e8af5e;
  --jet-black-lead:  #05070c;
  --jet-navy-lead:   #0c2247;
  --gradient-jet-btn: linear-gradient(135deg, var(--jet-black-lead) 0%, var(--jet-navy-lead) 16%, var(--jet-blue-vivid) 38%, var(--jet-blue-vivid) 50%, var(--jet-red-vivid) 76%, var(--jet-amber-vivid) 100%);

  --font-head: 'Big Shoulders Display', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;

  --radius: 10px;
  --radius-sm: 6px;

  --header-h: 76px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============ RESET ============ */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--font-head); font-weight: 700; margin: 0; line-height: 1.05; letter-spacing: 0.002em; }
p{ margin: 0; }
button{ font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }

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

.skip-link{
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #041018;
  padding: 12px 18px; z-index: 999; font-weight: 600;
  border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }

/* Custom scrollbar — thin, signal-blue thumb on graphite track */
html{ scrollbar-color: var(--accent-dim) var(--bg-alt); scrollbar-width: thin; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--bg-alt); }
::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, var(--jet-blue), var(--jet-red)); border-radius: 6px; border: 2px solid var(--bg-alt); opacity: 0.7; }
::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, var(--jet-blue), var(--jet-amber)); }

.bg-grid{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse 46% 30% at 8% 6%, rgba(79,195,255,0.05), transparent 68%),
    radial-gradient(ellipse 40% 26% at 96% 38%, rgba(211,122,138,0.04), transparent 68%),
    radial-gradient(ellipse 42% 28% at 12% 92%, rgba(209,171,117,0.035), transparent 68%),
    linear-gradient(rgba(var(--accent-rgb),0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),0.05) 1px, transparent 1px);
  background-size: auto, auto, auto, 56px 56px, 56px 56px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
}

/* Aero flow background — cursor-reactive streamline field, absolutely
   positioned behind page content from the very top of the document
   down to a per-page boundary (see js/main.js), so it scrolls away
   with the page instead of persisting behind every section. */
#aero-flow-background{
  position: absolute; top: 0; left: 0; width: 100%; z-index: 0;
  pointer-events: none; background: transparent;
}

/* ============ LAYOUT ============ */
.section{ position: relative; z-index: 1; padding: var(--space-2xl) var(--space-md); }
.section--alt{ background: linear-gradient(180deg, transparent, var(--bg-alt) 12%, var(--bg-alt) 88%, transparent); }
.section-inner{ max-width: 1180px; margin: 0 auto; }

.section-eyebrow{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em;
  color: var(--accent); margin-bottom: var(--space-sm); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 9px;
}
.section-eyebrow::before{
  content: ""; display: inline-block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--gradient-jet); flex-shrink: 0;
}
.section-title{ font-size: clamp(30px, 4vw, 46px); margin-bottom: var(--space-md); text-transform: uppercase; }
.section-lede{ font-size: 18px; color: var(--text-dim); max-width: 760px; margin-bottom: var(--space-xl); }

/* Reveal: a technical "drafting wipe" instead of a plain fade */
.reveal{
  opacity: 0; transform: translateY(18px);
  clip-path: inset(0 0 12% 0);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), clip-path 0.6s var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* ============ BUTTONS ============ */
.btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 15px; border: 1px solid transparent;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  white-space: nowrap; position: relative;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--accent); color: #041018; }
.btn-primary:hover{ filter: brightness(1.1); box-shadow: 0 10px 30px -8px rgba(var(--accent-rgb),0.4); }
.btn-ghost{ background: rgba(255,255,255,0.03); border-color: var(--border); color: var(--text); }
.btn-ghost:hover{ border-color: var(--accent-dim); background: rgba(var(--accent-rgb),0.07); }
.btn-sm{ padding: 9px 18px; font-size: 13.5px; }

/* ============ HEADER ============ */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h); display: flex; align-items: center;
  background: rgba(10,13,18,0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.header-inner{
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-md);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
}
.brand{ display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-text{ display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.brand-name{
  font-family: var(--font-head); font-weight: 700; font-size: 20px; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.brand-sub{
  font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.brand-tick{
  width: 6px; height: 6px; border-radius: 50%; background: var(--gradient-jet); flex-shrink: 0;
  box-shadow: 0 0 6px 1px rgba(var(--accent-rgb),0.6);
  animation: tickpulse 2.4s ease-in-out infinite;
}
@keyframes tickpulse{ 0%,100%{ opacity: 0.5; } 50%{ opacity: 1; } }

.main-nav{ display: flex; align-items: center; gap: clamp(14px, 2.4vw, 40px); flex-wrap: nowrap; }
.nav-link{
  font-family: var(--font-mono); font-size: 13.5px; color: var(--text-dim);
  position: relative; padding: 10px 2px 14px; transition: color 0.2s var(--ease);
}
.nav-link::after{
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px;
  background: var(--accent); border-radius: 1px; transform: translateX(-50%) rotate(45deg) scale(0);
  transition: transform 0.25s var(--ease);
}
.nav-link:hover{ color: var(--text); }
.nav-link:hover::after, .nav-link.is-active::after{ transform: translateX(-50%) rotate(45deg) scale(1); }
.nav-link.is-active{ color: var(--accent); }

.header-actions{ display: flex; align-items: center; gap: var(--space-sm); }
.nav-toggle{
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.nav-toggle span{ display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--text); transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ============ HERO (flow-field canvas) ============ */
.hero{
  position: relative; min-height: 100svh;
  display: flex; align-items: center; padding-top: var(--header-h);
  overflow: hidden;
}
.hero-flow{
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 70% 60% at 78% 45%, #0d1420 0%, var(--bg) 62%);
}
.hero-flow-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--bg) 0%, rgba(10,13,18,0.85) 30%, rgba(10,13,18,0.25) 55%, transparent 78%);
}
.hero-flow--compact{ position: absolute; }

.hud-badge{
  position: absolute; z-index: 1; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--text-dim);
  background: rgba(10,13,18,0.55); border: 1px solid var(--border-soft);
  padding: 8px 12px; border-radius: 999px; backdrop-filter: blur(6px);
}
.hud-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px 1px var(--accent); flex-shrink: 0; }
.hud-badge--tr{ top: calc(var(--header-h) + 28px); right: 28px; }
.hud-badge--bl{ bottom: 60px; right: 28px; }
@media (max-width: 780px){ .hud-badge{ display: none; } }

.hero-content{ position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; width: 100%; padding: var(--space-xl) var(--space-md); }
.eyebrow{ font-family: var(--font-mono); font-size: 13px; color: var(--accent); letter-spacing: 0.05em; margin-bottom: var(--space-sm); }
.hero-title{
  font-size: clamp(56px, 10vw, 128px); max-width: 900px; margin-bottom: var(--space-md);
  text-transform: uppercase; letter-spacing: 0.005em;
}
.hero-lede{ font-size: 18px; color: var(--text-dim); max-width: 540px; margin-bottom: var(--space-lg); }
.hero-actions{ display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* ============ ABOUT ============ */
.about-grid{ display: grid; grid-template-columns: 260px 1fr; gap: var(--space-2xl); }
@media (max-width: 860px){ .about-grid{ grid-template-columns: 1fr; gap: var(--space-lg); } }

.about-photo-wrap{ align-self: start; }
.about-photo-frame{
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); aspect-ratio: 4 / 5; background: var(--surface);
  max-width: 60%; margin: 0 auto;
}
.about-photo-frame::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(9,7,5,0.7)); pointer-events: none; }
.about-photo-frame img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: sepia(0.12) saturate(0.92); }
.about-photo-tag{ margin-top: var(--space-sm); font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); text-align: center; }

.about-gallery{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: var(--space-md); }
.about-gallery img{
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--border); filter: saturate(0.88);
  transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
}
.about-gallery img:last-child{ grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.about-gallery img:hover{ transform: scale(1.06); filter: saturate(1); }

.about-copy p{ color: var(--text-dim); font-size: 16.5px; margin-bottom: var(--space-md); }
.about-copy strong{ color: var(--accent-soft); font-weight: 600; }

.fact-line{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: var(--space-lg); padding-top: var(--space-lg);
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint);
}
.fact-line .dot{ color: var(--accent-dim); }

/* ============ SKILLS ============ */
.skills-groups{ display: flex; flex-direction: column; gap: var(--space-xl); }

.skills-group-title{
  display: inline-block; font-family: var(--font-mono); font-size: 12px; color: var(--accent);
  border: 1px solid var(--accent-dim); padding: 5px 12px; border-radius: 999px; margin: 0 0 var(--space-md);
}

.skills-mini-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 960px){ .skills-mini-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .skills-mini-grid{ grid-template-columns: 1fr; } }

.skill-mini{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-lg); transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
  position: relative; overflow: hidden;
}
.skill-mini::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gradient-jet);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.skill-mini:hover{ border-color: var(--accent-dim); transform: translateY(-2px); }
.skill-mini:hover::before{ transform: scaleX(1); }
.skill-mini h4{
  font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--text);
  margin: 0 0 8px; letter-spacing: 0.01em;
}
.skill-mini p{ font-size: 14.5px; line-height: 1.6; color: var(--text-faint); margin: 0; }

/* ============ PROJECTS ============ */
.projects-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
@media (max-width: 780px){ .projects-grid{ grid-template-columns: 1fr; } }

.project-card{
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
a.project-card:hover{ border-color: var(--accent-dim); transform: translateY(-4px); box-shadow: 0 20px 50px -24px rgba(var(--accent-rgb),0.4), 0 30px 60px -34px rgba(209,171,117,0.3); }
.project-card-media{ position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-alt); }
.project-card-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); filter: saturate(0.85); }
a.project-card:hover .project-card-media img{ transform: scale(1.05); }
.project-card-tag{
  position: absolute; top: 14px; left: 14px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.05em; color: var(--success); background: rgba(10,13,18,0.7);
  border: 1px solid rgba(var(--success-rgb),0.4); padding: 5px 10px; border-radius: 999px;
}
.project-card-tag--pending{ color: var(--accent); border-color: rgba(var(--accent-rgb),0.4); }
/* Targeting corner brackets — reveal on hover, CAD-selection style */
.corner{ position: absolute; width: 18px; height: 18px; opacity: 0; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); pointer-events: none; }
.corner::before, .corner::after{ content: ""; position: absolute; background: var(--accent); }
.corner::before{ width: 100%; height: 2px; }
.corner::after{ width: 2px; height: 100%; }
.corner-tl{ top: 10px; left: 10px; transform: translate(6px, 6px); }
.corner-tr{ top: 10px; right: 10px; transform: translate(-6px, 6px); }
.corner-bl{ bottom: 10px; left: 10px; transform: translate(6px, -6px); }
.corner-br{ bottom: 10px; right: 10px; transform: translate(-6px, -6px); }
.corner-tl::before, .corner-tl::after{ top: 0; left: 0; }
.corner-tr::before{ top: 0; right: 0; } .corner-tr::after{ top: 0; right: 0; }
.corner-bl::before{ bottom: 0; left: 0; } .corner-bl::after{ bottom: 0; left: 0; }
.corner-br::before{ bottom: 0; right: 0; } .corner-br::after{ bottom: 0; right: 0; }
a.project-card:hover .corner{ opacity: 1; transform: translate(0,0); }

.project-card-media--ghost{
  display: flex; align-items: center; justify-content: center; color: var(--text-faint);
  border-bottom: 1px dashed var(--border);
}
.project-card--ghost{ border-style: dashed; }
.project-card-media--icon{
  position: relative; display: flex; align-items: center; justify-content: center;
  color: var(--accent); background: linear-gradient(135deg, rgba(var(--accent-rgb),0.1), var(--bg-alt));
}
/* Belt-and-suspenders centering: pin the icon to the exact middle regardless of
   flex/aspect-ratio quirks in any browser or viewport. */
.project-card-media--icon svg{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;
}
.project-card-body{ padding: var(--space-lg); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.project-card-eyebrow{ font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.project-card-body h3{ font-size: 26px; text-transform: uppercase; }
.project-card-body p{ color: var(--text-dim); font-size: 14.5px; line-height: 1.55; flex: 1; }
.project-card-link{
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 13px;
  color: var(--accent); margin-top: 6px;
}
.project-card-link svg{ transition: transform 0.25s var(--ease); }
a.project-card:hover .project-card-link svg{ transform: translateX(3px); }

/* ============ GOALS (full-bleed flow-viz background) ============ */
.goals-section{ position: relative; overflow: hidden; }
.goals-bg{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* Soft blue glow sitting behind the jet — this is what the edges blend into,
   instead of blending straight into flat black. */
.goals-bg-glow{
  position: absolute; inset: -120px;
  background: radial-gradient(ellipse 50% 50% at 92% 40%, rgba(79,195,255,0.22), rgba(79,195,255,0.06) 55%, transparent 75%);
  filter: blur(50px);
}

/* The jet image itself: the source photo is already near-black everywhere
   except the glowing jet streak, so "screen" blending drops its black
   background straight into the page background with no edge at all —
   what's left is just the glow, not a cropped photo. The mask is only
   there to taper the far tail softly rather than end abruptly. */
.goals-bg-img{
  position: absolute; inset: -60px;
  background-image: url('../assets/images/goals-bg-jet.jpg');
  background-repeat: no-repeat;
  background-size: 46% auto;
  background-position: 96% 42%;
  filter: blur(6px) saturate(1.15) brightness(1.05);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 68% 70% at 96% 42%, black 45%, transparent 92%);
  mask-image: radial-gradient(ellipse 68% 70% at 96% 42%, black 45%, transparent 92%);
}

.goals-bg-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--bg) 0%, rgba(10,13,18,0.88) 32%, rgba(10,13,18,0.45) 55%, rgba(10,13,18,0.15) 76%, rgba(10,13,18,0.1) 100%),
    linear-gradient(180deg, var(--bg) 0%, transparent 14%, transparent 86%, var(--bg) 100%);
}
.goals-section .section-inner{ position: relative; z-index: 1; }
.goals-section .section-lede{ max-width: 620px; }
@media (max-width: 700px){
  .goals-bg-glow{
    background: radial-gradient(ellipse 55% 45% at 82% 22%, rgba(79,195,255,0.2), rgba(79,195,255,0.05) 55%, transparent 75%);
  }
  .goals-bg-img{
    background-size: 130% auto;
    background-position: 82% 22%;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 82% 22%, black 40%, transparent 88%);
    mask-image: radial-gradient(ellipse 75% 65% at 82% 22%, black 40%, transparent 88%);
  }
  .goals-bg-overlay{
    background:
      linear-gradient(180deg, var(--bg) 0%, rgba(10,13,18,0.8) 18%, rgba(10,13,18,0.6) 40%, rgba(10,13,18,0.8) 65%, var(--bg) 100%);
  }
}

/* Interest index — a numbered, expandable spec-sheet list (replaces icon cards) */
.interest-index{ border-top: 1px solid var(--border-soft); }
.interest-row{
  padding: 16px 4px; border-bottom: 1px solid var(--border-soft); position: relative;
  transition: padding-left 0.3s var(--ease), background 0.3s var(--ease);
}
.interest-row::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--jet-blue), var(--jet-red)); transform: scaleY(0); transform-origin: top;
  transition: transform 0.3s var(--ease);
}
.interest-row:hover, .interest-row:focus-visible{
  padding-left: 18px; background: linear-gradient(90deg, rgba(var(--accent-rgb),0.06), transparent);
}
.interest-row:hover::before, .interest-row:focus-visible::before{ transform: scaleY(1); }
.interest-row-top{ display: flex; align-items: baseline; gap: 18px; }
.interest-num{
  font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); width: 26px;
  flex-shrink: 0; transition: color 0.3s var(--ease);
}
.interest-row:hover .interest-num, .interest-row:focus-visible .interest-num{ color: var(--accent); }
.interest-name{ font-family: var(--font-head); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 0.01em; }
.interest-desc{
  max-height: 0; opacity: 0; overflow: hidden; margin-left: 44px; margin-top: 0; color: var(--text-faint);
  font-size: 13.5px; line-height: 1.5; transition: max-height 0.35s var(--ease), opacity 0.3s var(--ease), margin-top 0.35s var(--ease);
}
.interest-row:hover .interest-desc, .interest-row:focus-visible .interest-desc{
  max-height: 60px; opacity: 1; margin-top: 8px;
}
/* Touch/no-hover: never hide the description behind a hover-only interaction */
@media (hover: none), (pointer: coarse){
  .interest-row::before{ transform: scaleY(1); }
  .interest-desc{ max-height: none; opacity: 1; margin-top: 6px; }
}

/* ============ CONTACT ============ */
.contact-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); max-width: 720px; }
@media (max-width: 620px){ .contact-grid{ grid-template-columns: 1fr; } }

.contact-card{
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-lg);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease);
}
.contact-card::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gradient-jet);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
a.contact-card:hover{ border-color: var(--accent); transform: translateY(-3px); background: linear-gradient(135deg, rgba(79,195,255,0.08), rgba(209,171,117,0.04) 75%, var(--surface)); }
a.contact-card:hover::before{ transform: scaleX(1); }
.contact-icon{
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(var(--accent-rgb),0.09); color: var(--accent); margin-bottom: 4px;
}
.contact-label{ font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.contact-value{ font-size: 16px; font-weight: 600; color: var(--text); word-break: break-word; }

/* ============ PROJECT HERO (novaracing.html) ============ */
.project-hero{
  position: relative; padding: calc(var(--header-h) + var(--space-2xl)) var(--space-md) var(--space-2xl);
  overflow: hidden; min-height: 62svh; display: flex; align-items: center;
}
.project-hero-content{ position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; width: 100%; }
.back-link{
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 13px;
  color: var(--text-dim); margin-bottom: var(--space-lg); transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}
.back-link:hover{ color: var(--accent); gap: 10px; }
.project-hero-title{ font-size: clamp(46px, 7vw, 84px); margin-bottom: var(--space-md); text-transform: uppercase; }
.project-meta-row{
  display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-lg);
  padding-top: var(--space-lg); border-top: 1px solid var(--border-soft);
  font-size: 13.5px; color: var(--text-dim);
}
.project-meta-row strong{ display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; font-weight: 500; }

/* ============ YEAR TABS ============ */
.year-tabs{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-2xl); }
@media (max-width: 620px){ .year-tabs{ grid-template-columns: 1fr; } }

.year-tab{
  display: flex; align-items: center; gap: var(--space-md); text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg); transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.year-tab:hover{ border-color: var(--accent-dim); }
.year-tab.is-active{ border-color: var(--accent); background: linear-gradient(135deg, rgba(79,195,255,0.1), rgba(209,171,117,0.05) 80%, transparent); }
.year-tab-num{ font-family: var(--font-mono); font-size: 26px; font-weight: 500; color: var(--text-faint); transition: color 0.25s var(--ease); }
.year-tab.is-active .year-tab-num{ color: var(--accent); }
.year-tab-text{ display: flex; flex-direction: column; gap: 3px; }
.year-tab-title{ font-family: var(--font-head); font-weight: 700; font-size: 18px; text-transform: uppercase; }
.year-tab-sub{ font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }

.year-panel{ display: none; }
.year-panel.is-active{ display: block; animation: fadeIn 0.5s var(--ease); }
@keyframes fadeIn{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }

/* ============ STORY BLOCKS (novaracing.html) ============ */
.story{
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start;
  padding-bottom: var(--space-2xl); margin-bottom: var(--space-2xl); border-bottom: 1px solid var(--border-soft);
}
.story:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.story--full{ grid-template-columns: 1fr; }
@media (max-width: 900px){ .story{ grid-template-columns: 1fr; } }

.pill{
  display: inline-block; font-family: var(--font-mono); font-size: 12px; color: var(--accent);
  border: 1px solid var(--accent-dim); padding: 5px 12px; border-radius: 999px; margin-bottom: var(--space-md);
}
.story-copy{ display: flex; flex-direction: column; }
.story-copy p{ color: var(--text-dim); font-size: 16.5px; line-height: 1.65; margin-bottom: var(--space-md); }
.story-copy p:last-child{ margin-bottom: 0; }
.story-copy strong{ color: var(--accent-soft); font-weight: 600; }
.story-copy--wide{ max-width: 820px; }

.footnote{ font-size: 13px !important; color: var(--text-faint) !important; font-style: italic; margin-top: var(--space-md) !important; }

.result-card{
  background: linear-gradient(135deg, rgba(var(--success-rgb),0.09), transparent);
  border: 1px solid rgba(var(--success-rgb),0.35); border-radius: var(--radius); padding: var(--space-md);
  margin: var(--space-md) 0;
}
.result-card--muted{ background: linear-gradient(135deg, rgba(var(--accent-rgb),0.07), transparent); border-color: var(--accent-dim); }
.in-progress-note{ max-width: 520px; }
.in-progress-note .result-card{ margin: 0; }
.result-tag{ display: inline-block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--success); margin-bottom: 6px; }
.result-card--muted .result-tag{ color: var(--accent); }
.result-card p{ font-size: 14.5px !important; color: var(--text-dim) !important; margin: 0 !important; }
.result-card strong{ color: var(--text); }

.check-list{ display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); }
.check-list li{ position: relative; padding-left: 26px; color: var(--text-dim); font-size: 15px; line-height: 1.6; }
.check-list li::before{
  content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px;
  border: 1.5px solid var(--accent); border-radius: 3px; background: rgba(var(--accent-rgb),0.09);
}

/* Collage: photos overlap and interlock rather than sitting in a plain grid. */
.story-collage{
  display: flex; flex-wrap: wrap; align-items: flex-start; padding: 10px 0;
}
.collage-item{
  position: relative; flex: 1 1 220px; margin: 16px 10px;
  border: 4px solid var(--bg-alt); border-radius: 4px; overflow: hidden;
  background: var(--surface); box-shadow: 0 16px 34px -18px rgba(0,0,0,0.65);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  cursor: zoom-in; z-index: 1;
}
.collage-item:hover{ transform: rotate(0deg) scale(1.04); z-index: 8; box-shadow: 0 26px 50px -18px rgba(0,0,0,0.75); }
.collage-item img{
  display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: filter 0.4s var(--ease); filter: saturate(0.88);
}
.collage-item:hover img{ filter: saturate(1); }
.collage-item figcaption{
  padding: 9px 11px; font-size: 11.5px; line-height: 1.45; color: var(--text-faint);
  border-top: 1px solid var(--border-soft); background: var(--surface);
}
.collage-item figcaption strong{ color: var(--text-dim); font-weight: 600; }

/* Utility modifiers for hand-placed rhythm — rotation, offset, size, crop */
.collage-item.tilt-l{ --rot: -2.2deg; }
.collage-item.tilt-r{ --rot: 1.8deg; }
.collage-item.lift{ margin-top: -6px; z-index: 3; }
.collage-item.drop{ margin-top: 32px; }
.collage-item.pull-l{ margin-left: -26px; z-index: 4; }
.collage-item.pull-r{ margin-right: -18px; }
.collage-item.big{ flex-basis: 320px; }
.collage-item.small{ flex-basis: 165px; }
.collage-item.wide{ flex-basis: 100%; }
.collage-item.wide img{ aspect-ratio: 16 / 8; }
.collage-item.tall img{ aspect-ratio: 3 / 4; }
.collage-item.square img{ aspect-ratio: 1 / 1; }

/* Grid variant: a clean, even mosaic of square photos with no rotation,
   offset, or overlap — used where a plain interlocking collage read as
   messy. Hover still "pops" the tile via the shared .collage-item rule.
   Flexbox (not CSS grid) so a leftover partial row centers itself
   automatically instead of hugging the left edge. */
.story-collage--grid{
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm);
}
.story-collage--grid .collage-item{ margin: 0; flex: 0 1 calc(33.333% - 11px); }
.story-collage--grid.cols-4 .collage-item{ flex-basis: calc(25% - 12px); }
.story-collage--grid .collage-item.wide{ flex-basis: 100%; }
@media (max-width: 700px){ .story-collage--grid .collage-item{ flex-basis: calc(50% - 8px); } }
@media (max-width: 420px){ .story-collage--grid .collage-item{ flex-basis: 100%; } }
@media (max-width: 640px){
  .story-collage:not(.story-collage--grid) .collage-item{ --rot: 0deg !important; margin: 10px 6px !important; flex-basis: 44% !important; z-index: 1 !important; }
  .story-collage:not(.story-collage--grid) .collage-item.wide{ flex-basis: 100% !important; }
}

/* ============ FOOTER ============ */
.site-footer{ position: relative; z-index: 1; border-top: 1px solid var(--border-soft); padding: var(--space-lg) var(--space-md); }
.footer-inner{
  max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-md); font-size: 13.5px; color: var(--text-faint);
}
.footer-nav{ display: flex; gap: var(--space-md); }
.footer-nav a{ color: var(--text-faint); font-size: 13.5px; transition: color 0.2s var(--ease); }
.footer-nav a:hover{ color: var(--accent); }

/* ============ LIGHTBOX ============ */
.lightbox{
  position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: var(--space-sm); background: rgba(6,8,11,0.94);
  backdrop-filter: blur(6px); padding: var(--space-lg);
}
.lightbox.is-open{ display: flex; }
.lightbox img{ max-width: min(92vw, 1100px); max-height: 78vh; object-fit: contain; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.lightbox-caption{ font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); text-align: center; max-width: 700px; }
.lightbox-close{
  position: absolute; top: var(--space-md); right: var(--space-md); width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text);
  font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover{ border-color: var(--accent); color: var(--accent); }

/* ============ RESPONSIVE NAV ============ */
@media (max-width: 900px){
  .nav-toggle{ display: flex; }
  .main-nav{
    position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 100;
    background: #0d1015; border-bottom: 1px solid var(--border-soft);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: var(--space-sm) var(--space-md) var(--space-md);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .main-nav.is-open{ opacity: 1; transform: none; pointer-events: auto; }
  .main-nav .nav-link{ width: 100%; padding: 14px 4px; border-bottom: 1px solid var(--border-soft); font-size: 15px; }
  .main-nav .nav-link::after{ left: 0; bottom: 14px; transform: rotate(45deg) scale(0); }
  .main-nav .nav-link:hover::after, .main-nav .nav-link.is-active::after{ transform: rotate(45deg) scale(1); }
  .header-actions .btn-sm{ display: none; }
}
@media (min-width: 901px){ .main-nav{ display: flex !important; } }