/* ==========================================================================
   1. DESIGN TOKENS
   CSS custom properties (variables). Defining colors/spacing/fonts once here
   means every other rule in this file references a name, not a raw value —
   change the palette in one place, the whole site updates.
   ========================================================================== */
:root {
  --bg:            #10151c;   /* page background — alpine dusk */
  --surface:       #1a222c;   /* cards, panels */
  --surface-alt:   #161d25;   /* alternating section background */
  --border:        #29323d;

  --text:          #eef1f4;   /* primary text */
  --text-muted:    #9aa7b4;   /* secondary text */

  --accent:        #e8a33d;   /* alpenglow amber */
  --accent-soft:   #e8a33d1a; /* amber at low opacity, for glows/backgrounds */
  --accent-2:      #4fb5a6;   /* glacier teal, secondary accent */

  --font-display:  'Fraunces', serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', monospace;

  --container-w:   1100px;
  --radius:        10px;

  --transition:    200ms ease;
}

/* ==========================================================================
   2. RESET
   Browsers apply their own default spacing/sizing to elements. This block
   flattens those defaults so we start from a predictable, blank canvas.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Respect users who've asked their OS to reduce motion — an accessibility
   basic, not an afterthought. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible focus outline for keyboard users (Tab key navigation).
   Never remove this without replacing it — it's essential accessibility. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 24px;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.25rem; }

.section__eyebrow, .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.section__intro { color: var(--text-muted); max-width: 60ch; margin-top: 12px; }

/* ==========================================================================
   3. SCROLL PROGRESS BAR
   A 3px strip fixed to the top of the viewport. JS updates its width as you
   scroll (0% at the top of the page, 100% at the bottom).
   ========================================================================== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index: 100;
  transition: width 80ms linear;
}

/* ==========================================================================
   4. HEADER / NAV
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(16, 21, 28, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }

.nav__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
}
.nav__brand .dot { color: var(--accent); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 0.95rem;
}

.nav__links a { color: var(--text-muted); transition: color var(--transition); }
.nav__links a:hover { color: var(--text); }

.nav__cta {
  color: var(--bg) !important;
  background: var(--accent);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 500;
}
.nav__cta:hover { background: var(--accent-2); }

/* Hamburger button — hidden on desktop, shown on mobile below */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav__toggle span {
  width: 22px; height: 2px;
  background: var(--text);
  transition: transform var(--transition), opacity var(--transition);
}

/* ==========================================================================
   5. HERO + RIDGE-LINE SVG
   The path is drawn once, then "hidden" using stroke-dasharray/dashoffset —
   a classic SVG trick: set the dash length to the path's total length, then
   offset it by the same amount so nothing shows. JS reduces the offset as
   you scroll, which visually "draws" the line in.
   ========================================================================== */
.hero {
  position: relative;
  padding-top: 120px;
  padding-bottom: 160px;
  overflow: hidden;
}

.hero__ridge {
  position: absolute;
  inset: 0;
  bottom: -1px;
}

.ridge-svg { width: 100%; height: 100%; display: block; }

.ridge-fill {
  fill: var(--surface);
  opacity: 0.6;
}

.ridge-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* stroke-dasharray/offset values are set inline by JS once it knows the
     path's real length — see main.js */
}

.hero__content { position: relative; z-index: 1; max-width: 780px; }

.hero__lede {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 60ch;
  margin-top: 20px;
}

.hero__actions { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }

/* Buttons: one shared base, two visual variants */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 500;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.btn--primary { background: var(--accent); color: var(--bg); }
.btn--primary:hover { background: var(--accent-2); transform: translateY(-2px); }

.btn--ghost { border: 1px solid var(--border); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); transform: translateY(-2px); }

/* ==========================================================================
   6. GENERIC SECTION SPACING
   ========================================================================== */
.section { padding-block: 96px; }
.section--alt { background: var(--surface-alt); border-block: 1px solid var(--border); }

/* Elements with this class start hidden + shifted, then animate to their
   resting position when they scroll into view (see IntersectionObserver
   in main.js). */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   7. ABOUT
   ========================================================================== */
.about__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
}

.about__text p { color: var(--text-muted); margin-top: 16px; }
.about__text h2 { color: var(--text); margin-bottom: 4px; }

.about__now {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.now__title { font-family: var(--font-mono); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-2); margin-bottom: 18px; }
.now__list { display: flex; flex-direction: column; gap: 18px; }
.now__list li { display: flex; flex-direction: column; gap: 4px; }
.now__label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; }

/* ==========================================================================
   8. SKILLS
   ========================================================================== */
.skills__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.skill-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color var(--transition), transform var(--transition);
}
.skill-card:hover { border-color: var(--accent-2); transform: translateY(-4px); }
.skill-card h3 { margin-bottom: 16px; }

.tag-list { display: flex; flex-direction: column; gap: 8px; }
.tag-list li {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  padding-left: 16px;
  position: relative;
}
.tag-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.tag-list--small { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag-list--small li {
  padding: 4px 10px;
  background: var(--accent-soft);
  border-radius: 999px;
  color: var(--accent);
}
.tag-list--small li::before { content: none; }

/* ==========================================================================
   9. WORK
   ========================================================================== */
.work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.work-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), transform var(--transition);
}
.work-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.work-card__meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); margin-bottom: 10px; }
.work-card h3 { margin-bottom: 10px; }
.work-card p { color: var(--text-muted); font-size: 0.95rem; flex-grow: 1; }
.work-card__link { display: inline-block; margin-top: 20px; color: var(--accent-2); font-weight: 500; font-size: 0.9rem; }
.work-card__link:hover { color: var(--accent); }

/* ==========================================================================
   10. TRAIL (personal / off the clock)
   Reuses the ridge motif at a smaller scale, purely decorative here.
   ========================================================================== */
.trail__timeline { margin-top: 48px; }
.trail__svg {
  width: 100%;
  height: 90px;
  stroke: var(--accent-2);
  stroke-width: 2.5;
  fill: none;
}
.trail__list {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 12px;
}
.trail__peak {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.trail__note { color: var(--text-muted); margin-top: 28px; font-size: 0.95rem; }

/* ==========================================================================
   11. CONTACT
   ========================================================================== */
.contact__inner { text-align: center; max-width: 600px; }
.contact__lede { color: var(--text-muted); margin-top: 12px; }
.contact__links { display: flex; justify-content: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer { border-top: 1px solid var(--border); padding-block: 28px; }
.footer__inner { text-align: center; color: var(--text-muted); font-size: 0.85rem; }

/* ==========================================================================
   13. RESPONSIVE — MOBILE
   Media queries let us override rules below a certain screen width. Mobile
   phones are typically under 640px wide; tablets under ~900px. We go
   "desktop-first" here (base styles are desktop, media queries adjust down),
   which is a completely valid approach for a small site like this.
   ========================================================================== */
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .skills__grid { grid-template-columns: repeat(2, 1fr); }
  .work__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .nav__toggle { display: flex; }

  .nav__links {
    position: absolute;
    top: 68px;
    left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition), opacity var(--transition);
  }
  .nav__links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav__links li { width: 100%; padding-block: 12px; border-bottom: 1px solid var(--border); }
  .nav__links li:last-child { border-bottom: none; padding-top: 16px; }
  .nav__cta { display: inline-block; }

  .skills__grid { grid-template-columns: 1fr; }
  .hero { padding-top: 100px; padding-bottom: 120px; }
  .trail__list { justify-content: flex-start; }
}