/* ============================================================
   style.css  -  Main stylesheet for drg.com
   Apple-inspired design language: true-black canvas, soft
   aurora glows, frosted "liquid glass" surfaces, SF-style
   system typography, and fully-rounded pill controls.
   Edit the :root block to retheme every element at once.
   ============================================================ */


/* ── 1. CUSTOM PROPERTIES (DESIGN TOKENS) ───────────────────
   Define all colors, type sizes, and spacing here.
   Every rule further down references these variables.
   ─────────────────────────────────────────────────────────── */
:root {
  /* --- Palette ---
     True black base (Apple dark mode) with a warm violet →
     pink → orange gradient as the only splash of color.       */
  --color-bg:         #000000;   /* True-black page background */
  --color-surface:    rgba(255, 255, 255, 0.04);  /* Glass card fill   */
  --color-border:     rgba(255, 255, 255, 0.10);  /* Glass card edge   */
  --color-accent:     #ff6480;   /* Warm pink - used sparingly */
  --color-text:       #f5f5f7;   /* Apple's off-white          */
  --color-muted:      #a1a1a6;   /* Apple's secondary gray     */
  --color-faint:      rgba(255, 255, 255, 0.06);  /* Hairline dividers */

  /* The signature gradient (no blue, no green)                */
  --gradient-warm: linear-gradient(100deg, #bf5af2 0%, #ff375f 50%, #ff9f0a 100%);

  /* Glass recipe pieces, reused by nav / menu / cards          */
  --glass-bg:     rgba(22, 22, 26, 0.55);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 16px 40px rgba(0, 0, 0, 0.45),
                  inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* --- Fonts ---
     SF Pro on Apple devices, Inter everywhere else. The mono
     stack survives only for the 404 error path readout.       */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  --font-sans:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;

  /* --- Fluid type scale ---
     clamp(min, preferred, max) scales between viewport widths */
  --text-xs:   clamp(0.75rem, 1.5vw, 0.8125rem);
  --text-sm:   clamp(0.85rem, 1.8vw, 0.9375rem);
  --text-base: clamp(1.00rem, 2.0vw, 1.0625rem);
  --text-lg:   clamp(1.15rem, 2.5vw, 1.25rem);
  --text-xl:   clamp(1.30rem, 3.0vw, 1.5rem);
  --text-2xl:  clamp(1.60rem, 4.0vw, 1.75rem);
  --text-3xl:  clamp(2.00rem, 5.0vw, 2.75rem);
  --text-hero: clamp(3.00rem, 8.0vw, 5.75rem);   /* Big name   */

  /* --- Spacing scale ---
     Named by multiples of 4 px (0.25 rem = 4 px)            */
  --sp-1: 0.25rem;   /*  4px */
  --sp-2: 0.50rem;   /*  8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1.00rem;   /* 16px */
  --sp-6: 1.50rem;   /* 24px */
  --sp-8: 2.00rem;   /* 32px */
  --sp-12: 3.00rem;  /* 48px */
  --sp-16: 4.00rem;  /* 64px */
  --sp-24: 6.00rem;  /* 96px */
  --sp-32: 8.00rem;  /* 128px */

  /* --- Layout --- */
  --max-width:  980px;   /* Content column cap            */
  --nav-height: 56px;    /* Floating nav pill height      */

  /* --- Radii ---
     Big and soft. --radius-full gives the Apple pill shape.  */
  --radius:      14px;
  --radius-lg:   28px;
  --radius-full: 980px;

  /* --- Transitions --- */
  --transition:    180ms ease;
  --transition-md: 320ms ease;

  /* --- Animation easings ---
     --ease-spring is the springy curve Apple uses for sheet
     and control morphs - perfect for the nav collapse.       */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
}


/* ── 2. RESET ────────────────────────────────────────────────
   Minimal reset: removes browser defaults that cause
   inconsistencies across Chrome, Safari, Firefox.
   ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;   /* Include padding/border in width  */
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;    /* Animate jump-to-anchor scrolls  */
  scrollbar-gutter: stable;   /* Reserve space before scrollbar  */
                              /* appears - avoids layout shift   */
}

body {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  line-height: 1.7;
  color:       var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;

  /* Soft aurora glows - violet top-left, pink center-right,
     amber low-left - barely-there color washes over black.    */
  background-image:
    radial-gradient(ellipse 70% 45% at 15% -5%,  rgba(191, 90, 242, 0.13) 0%, transparent 60%),
    radial-gradient(ellipse 55% 40% at 85% 18%,  rgba(255, 55, 95, 0.08)  0%, transparent 60%),
    radial-gradient(ellipse 60% 35% at 25% 75%,  rgba(255, 159, 10, 0.05) 0%, transparent 60%);
  background-attachment: fixed;

  overflow-x: hidden;   /* Prevent horizontal scroll on mobile   */
}

/* Text selection picks up the accent                            */
::selection { background: rgba(255, 55, 95, 0.35); color: #fff; }

/* Thin, minimal scrollbar (Chrome / Safari / Edge)              */
::-webkit-scrollbar              { width: 5px; }
::-webkit-scrollbar-track        { background: var(--color-bg); }
::-webkit-scrollbar-thumb        { background: rgba(255,255,255,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(255,255,255,0.30); }

img, svg { display: block; max-width: 100%; }

a            { color: inherit; text-decoration: none; }
ul, ol       { list-style: none; }
button       { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }


/* ── 3. TYPOGRAPHY UTILITIES ─────────────────────────────────
   Reusable text patterns applied by class name.
   ─────────────────────────────────────────────────────────── */

/* Small gradient eyebrow above a section title, e.g. "Focus"  */
.section-label {
  font-size:   var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width: fit-content;
  margin-bottom: var(--sp-3);
}

/* Section heading - big, bold, tight tracking                 */
.section-title {
  font-family: var(--font-display);
  font-size:   var(--text-3xl);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--sp-6);
}

/* Section intro paragraph - sits under a section title        */
.section-intro {
  max-width: 580px;
  font-size: var(--text-lg);
  color: var(--color-muted);
  margin-bottom: var(--sp-12);
  line-height: 1.6;
}

/* Utility: gradient ink for inline highlights                  */
.accent {
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ── 4. LAYOUT ───────────────────────────────────────────────
   The .container class centers content and adds side padding.
   ─────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;          /* Centers the block horizontally */
  padding-inline: var(--sp-6);  /* Left/right breathing room      */
}

section {
  padding-block: var(--sp-32);   /* Generous top/bottom space      */
}


/* ── 5. NAVIGATION (LIQUID GLASS) ────────────────────────────
   A floating frosted-glass pill, centered near the top of the
   viewport. Once the user scrolls, JS adds .collapsed and the
   pill morphs into a small glass dot pinned to the top-right
   corner. Tapping the dot opens a glass dropdown menu.
   ─────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;   /* Shorthand for top/right/bottom/left   */
  z-index: 100;
  /* The nav element itself is just a positioning frame -
     only its children receive pointer events.                  */
  pointer-events: none;
}

/* The morphing glass pill / dot.
   Expanded:  centered pill, content width.
   Collapsed: 52px circle pinned 16px from the top-right.
   width / right / height / border-radius are all animatable
   lengths, so the morph is a single smooth spring.            */
.nav-shell {
  pointer-events: auto;
  position: absolute;
  top: 14px;
  right: max(16px, calc((100% - var(--max-width)) / 2));
  width: min(100% - 32px, var(--max-width));
  height: var(--nav-height);
  border-radius: var(--radius-full);

  /* Liquid glass: translucency + heavy blur + saturation boost,
     a bright hairline on top, and a deep soft drop shadow.     */
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);

  overflow: hidden;   /* Clip inner content during the morph     */
  transition:
    width         0.55s var(--ease-spring),
    height        0.55s var(--ease-spring),
    right         0.55s var(--ease-spring),
    border-radius 0.55s var(--ease-spring);
}

.nav.collapsed .nav-shell {
  width:  52px;
  height: 52px;
  right:  16px;
  border-radius: 50%;
}

/* Brand + links row - fades away as the pill collapses        */
.nav-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--sp-6);
  transition: opacity 0.25s ease;
}
.nav.collapsed .nav-inner {
  opacity: 0;
  pointer-events: none;
}

/* Stylized brand: lowercase, tight, with a gradient dot        */
.nav-brand {
  font-family: var(--font-display);
  font-size:   1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  transition: opacity var(--transition);
}
.nav-brand:hover { opacity: 0.7; }

/* The "." between eric and gdovin, rendered in gradient ink    */
.nav-brand .brand-dot {
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.nav-links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  transition: color var(--transition);
}
.nav-links a:hover      { color: var(--color-text); }
.nav-links a.nav-active { color: var(--color-text); }

/* The dot button - fills the collapsed circle and only
   becomes interactive once the pill has shrunk.               */
.nav-dot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease 0.15s;
}
.nav.collapsed .nav-dot {
  opacity: 1;
  pointer-events: auto;
}

/* The glowing gradient dot at the center of the button         */
.nav-dot-core {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gradient-warm);
  box-shadow: 0 0 12px rgba(255, 55, 95, 0.55);
  transition: transform 0.3s var(--ease-spring);
}
.nav-dot:hover .nav-dot-core,
.nav.menu-open .nav-dot-core { transform: scale(1.35); }

/* Dropdown menu - a glass sheet that springs open from the
   top-right corner, underneath the dot.                       */
.nav-menu {
  pointer-events: none;
  position: absolute;
  top: 78px;
  right: 16px;
  min-width: 220px;
  padding: var(--sp-2);
  border-radius: var(--radius-lg);

  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.90);
  transform-origin: top right;
  transition:
    opacity    0.30s var(--ease-spring),
    transform  0.30s var(--ease-spring),
    visibility 0.30s;
}
.nav.menu-open .nav-menu {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-menu a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 18px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  transition: background var(--transition);
}
.nav-menu a:hover,
.nav-menu a.nav-active { background: rgba(255, 255, 255, 0.10); }

/* Muted secondary row (email) at the bottom of the menu        */
.nav-menu .nav-menu-secondary {
  color: var(--color-muted);
  border-top: 1px solid var(--color-faint);
  border-radius: 0 0 18px 18px;
  margin-top: var(--sp-1);
}
.nav-menu .nav-menu-secondary:hover { color: var(--color-text); }


/* ── 6. HERO SECTION ─────────────────────────────────────────
   Full-viewport height. Elements animate in with CSS
   @keyframes + staggered animation-delay (no JS needed here).
   ─────────────────────────────────────────────────────────── */

#hero {
  min-height: 100svh;   /* svh = "small viewport height" - handles mobile bars */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-32);
  /* Push content below the floating nav pill                   */
  padding-top: calc(var(--nav-height) + var(--sp-24));
}

/* Each hero child uses this @keyframes animation.
   "both" fill-mode means it applies the start state before
   the delay fires, preventing a flash of visible content.     */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Stagger: each element starts 150ms after the previous one   */
.hero-eyebrow { animation: fade-up 0.7s var(--ease-out) 0.10s both; }
.hero-name    { animation: fade-up 0.7s var(--ease-out) 0.25s both; }
.hero-tagline { animation: fade-up 0.7s var(--ease-out) 0.40s both; }
.hero-bio     { animation: fade-up 0.7s var(--ease-out) 0.55s both; }
.hero-actions { animation: fade-up 0.7s var(--ease-out) 0.70s both; }
.scroll-hint  { animation: fade-up 0.7s var(--ease-out) 0.90s both; }

/* Small gradient line above the main heading                   */
.hero-eyebrow {
  font-size:   var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width: fit-content;
  margin-bottom: var(--sp-4);
}

/* Big bold name with a white → silver fade, the way Apple
   renders large display type on dark keynote slides.          */
.hero-name {
  font-family: var(--font-display);
  font-size:   var(--text-hero);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff 30%, #9b9ba3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: var(--sp-6);
}

/* The ", DO" span keeps the warm gradient via .accent          */

/* Three-word tagline with decorative separator dots            */
.hero-tagline {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-6);
}

/* The dots between tagline words                               */
.hero-tagline .sep {
  color: var(--color-muted);
  margin-inline: var(--sp-2);
  opacity: 0.6;
}

/* Two-sentence bio below the tagline                           */
.hero-bio {
  font-size: var(--text-base);
  color: var(--color-muted);
  max-width: 540px;
  line-height: 1.7;
  margin-bottom: var(--sp-8);
}

/* Button row                                                   */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* Filled primary button - Apple's white pill on dark           */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.75rem 1.60rem;
  background: #f5f5f7;
  color: #000;
  font-size:   var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--radius-full);
  transition: background var(--transition), transform var(--transition);
}
.btn-primary:hover {
  background: #ffffff;
  transform: scale(1.04);
}

/* Glass secondary button                                       */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.75rem 1.60rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size:   var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
  transition:
    border-color var(--transition),
    background   var(--transition),
    transform    var(--transition);
}
.btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.04);
}

/* Subtle animated scroll indicator at the bottom of the hero  */
.scroll-hint {
  margin-top: var(--sp-16);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}
.scroll-hint span {
  font-size:   var(--text-xs);
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* A 1px tall line that pulses to suggest scrolling            */
.scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  animation: scroll-pulse 2.4s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.35; transform: scaleY(1);    }
  50%       { opacity: 1.00; transform: scaleY(0.75); }
}


/* ── 7. FOCUS / ABOUT SECTION ────────────────────────────────
   Three glass cards - one per domain. Cards lift on hover.
   Each card gets its own tint from the gradient family:
   violet, pink, amber.
   ─────────────────────────────────────────────────────────── */

/* Auto-fit grid: 3 columns on wide screens, fewer on narrow   */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-2);
}

.focus-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  position: relative;
  overflow: hidden;          /* Clip the ::before pseudo-element  */
  transition:
    border-color var(--transition-md),
    background   var(--transition-md),
    transform    var(--transition-md);
}

/* Top-edge gradient line - hidden until hover                  */
.focus-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;   /* Stretch across the top               */
  height: 1px;
  background: var(--gradient-warm);
  opacity: 0;
  transition: opacity var(--transition-md);
}
.focus-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-4px);
}
.focus-card:hover::before { opacity: 0.8; }

/* Rounded-square icon at the top of each card                  */
.focus-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-6);
}

/* Per-card tints: violet / pink / amber (Apple system colors) */
.focus-card:nth-child(1) .focus-icon { color: #bf5af2; background: rgba(191, 90, 242, 0.14); }
.focus-card:nth-child(2) .focus-icon { color: #ff375f; background: rgba(255, 55, 95, 0.14); }
.focus-card:nth-child(3) .focus-icon { color: #ff9f0a; background: rgba(255, 159, 10, 0.14); }

.focus-card h3 {
  font-size:   var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-3);
}

.focus-card p {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.7;
}


/* Aside below the focus cards for personal interests           */
.focus-aside {
  margin-top: var(--sp-8);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 580px;
  line-height: 1.75;
}


/* ── 8. WORK SECTION ─────────────────────────────────────────
   Each project / paper is its own rounded glass card.
   Change <div class="work-item"> to <a href="..."> when
   the project has a real destination URL.
   ─────────────────────────────────────────────────────────── */

.work-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Each card uses a two-column grid: content | tags + arrow     */
.work-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--sp-4) var(--sp-8);
  align-items: center;
  padding: var(--sp-6) var(--sp-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color var(--transition-md),
    background   var(--transition-md),
    transform    var(--transition-md);
}
.work-item:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-3px);
}

/* Year + type label above the title                            */
.work-meta {
  font-size:   var(--text-xs);
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-2);
}

/* Project title                                                */
.work-title {
  font-size:   var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-2);
}

/* One-line description                                         */
.work-desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.65;
}

/* Tag chips on the right                                       */
.work-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
  align-self: start;
  padding-top: var(--sp-1);
}

/* Individual tag pill                                          */
.tag {
  font-size:   var(--text-xs);
  font-weight: 500;
  padding: 0.25rem 0.70rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-full);
  color: var(--color-muted);
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.work-item:hover .tag {
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-text);
}

/* Arrow indicator - slides right on hover                      */
.work-arrow {
  grid-row: 1 / -1;       /* Span both rows on the right        */
  align-self: center;
  color: var(--color-muted);
  font-size: var(--text-xl);
  opacity: 0.4;
  transition:
    opacity   var(--transition),
    transform var(--transition);
}
.work-item:hover .work-arrow {
  opacity: 1;
  transform: translateX(5px);
}


/* Within-list divider between project and publication groups   */
.work-separator {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-muted);
}

/* Thin line extending to the right of the label               */
.work-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-faint);
}


/* ── 9. CONTACT SECTION ──────────────────────────────────────
   A flex row of glass pill links - email, GitHub, etc.
   ─────────────────────────────────────────────────────────── */

.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* Each link is a pill button with an icon + label              */
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.75rem 1.40rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  transition:
    border-color var(--transition),
    background   var(--transition),
    transform    var(--transition);
}
.contact-link:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.04);
}
.contact-link svg { flex-shrink: 0; color: var(--color-muted); }


/* ── 10. FOOTER ──────────────────────────────────────────────*/

footer {
  border-top: 1px solid var(--color-faint);
  padding-block: var(--sp-8);
}

.footer-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.footer-copy {
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.footer-copy a { transition: color var(--transition); }
.footer-copy a:hover { color: var(--color-text); }


/* ── 11. SCROLL-ZOOM REVEAL ──────────────────────────────────
   Elements with class .animate-in start small, low, and
   transparent. JS (see initScrollZoom in main.js) scrubs
   their opacity / scale / lift continuously with the scroll
   position, so content zooms toward the viewer as it rises
   from the bottom of the viewport - and recedes again if the
   user scrolls back. No CSS transition here: the JS writes
   eased values every animation frame, which keeps the motion
   glued to the scroll instead of lagging behind it.

   Set the --delay CSS variable inline to stagger siblings:
     <div class="animate-in" style="--delay: 200ms">
   JS converts the delay into extra scroll distance, so cards
   in a row still arrive one after another.
   ─────────────────────────────────────────────────────────── */

.animate-in {
  will-change: opacity, transform;
}

/* The hidden / mid-scrub state. Scoped to :not(.visible) so
   the settled state declares NOTHING - that matters: a rule
   like `.visible { transform: none }` would sit later in the
   stylesheet than `.focus-card:hover` and cancel the hover
   lift at equal specificity.

   transition: none while scrubbing - JS writes styles every
   frame, and any CSS transition (e.g. a card's hover
   transition) would smear those writes and make the motion
   lag the scroll.

   JS adds .visible (and clears its inline styles) once the
   element fully settles, returning control to the normal CSS
   so hover lifts and transitions work again. Also used by the
   reduced-motion fallback path.                               */
.animate-in:not(.visible) {
  opacity: 0;
  transform: translateY(48px) scale(0.92);
  transition: none !important;
}


/* ── 12. 404 PAGE ────────────────────────────────────────────
   Styles used only on 404.html (scoped by page body class).
   ─────────────────────────────────────────────────────────── */

/* 404.html adds class="page-404" to <body>                    */
body.page-404 {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.error-page {
  max-width: 480px;
  padding: var(--sp-8);
  animation: fade-up 0.7s var(--ease-out) 0.1s both;
}

/* Large faded "404" as a visual anchor                         */
.error-code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 20vw, 10rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  /* Gradient text - the color shows through a transparent fill */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.error-title {
  font-family: var(--font-display);
  font-size:   var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: var(--sp-4) 0;
}

.error-desc {
  font-size: var(--text-base);
  color: var(--color-muted);
  margin-bottom: var(--sp-6);
  line-height: 1.75;
}

/* The bad URL displayed like a file system path               */
.error-path {
  display: inline-block;
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-8);
}


/* ── 13. RESPONSIVE ──────────────────────────────────────────
   Breakpoints only override what actually needs to change.
   ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* On small screens the nav is ALWAYS the glass dot - the
     dropdown menu is the navigation. Mirrors the .collapsed
     rules so no JS is required for the mobile state.          */
  .nav-shell {
    width:  52px;
    height: 52px;
    right:  16px;
    border-radius: 50%;
  }
  .nav-inner { opacity: 0; pointer-events: none; }
  .nav-dot   { opacity: 1; pointer-events: auto; }

  /* Stack work cards vertically                               */
  .work-item {
    grid-template-columns: 1fr;
    padding: var(--sp-6);
  }
  .work-tags  { justify-content: flex-start; }
  .work-arrow { display: none; }

  /* Stack footer items                                        */
  .footer-inner { flex-direction: column; align-items: flex-start; }
}


/* ── 14. REDUCED MOTION ──────────────────────────────────────
   Respect the user's OS-level "reduce motion" preference.
   This makes the page accessible to people with vestibular
   disorders who find animations disorienting.
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-delay:      0.01ms !important;
    transition-duration:  0.01ms !important;
  }
  /* Immediately reveal elements that would otherwise animate in */
  .animate-in { opacity: 1; transform: none; }
}