/* ==========================================================================
   DESIGN TOKENS
   Single source of truth for colour/spacing/type so the whole site stays
   consistent. Change a value here instead of hunting through selectors.
   ========================================================================== */
:root {
  --bg: #0a0a0a;
  --bg-raised: #141414;
  --text: #f5f5f7;
  --muted: #9ca3af;
  --border: rgba(255, 255, 255, 0.1);
  --accent: #ffffff;
  --accent-ink: #0a0a0a;
  --focus: #4b8df8;

  --radius-sm: 8px;
  --radius-md: 12px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --max-width: 1100px;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

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

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

a { color: inherit; }

ul { list-style: none; }

/* Respect users who've asked the OS for reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Visible, high-contrast focus ring for keyboard users. Never remove
   focus outlines without replacing them — that's a WCAG 2.4.7 failure. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Skip link: hidden off-screen until it receives keyboard focus */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 100;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

.wrap {
  width: min(var(--max-width), 90%);
  margin-inline: auto;
}

.section-title {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  margin-bottom: var(--space-1);
}

.section-lede {
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.15s ease-out;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { opacity: 0.85; }

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

.header-row {
  /* Mobile-first: logo stacked above nav. 4 nav items plus the logo
     don't fit on one row below ~560px without either overlapping or
     shrinking illegibly, so they get their own row instead. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding-block: 1rem;
}

@media (min-width: 560px) {
  .header-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: 1.1rem;
  }
}

.logo {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.05rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem var(--space-3);
}

.site-header nav a {
  text-decoration: none;
  color: var(--muted);
  font-size: 0.9rem;
}
.site-header nav a:hover { color: var(--text); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  padding-block: var(--space-5) var(--space-4);
  text-align: center;
}

/* Turns .hero .wrap into a query container, so descendants can size
   themselves off its *actual rendered width* (cqw units) instead of
   guessing from the viewport — the viewport and this container are not
   the same width once max-width/percentage rules are involved. */
.hero .wrap {
  container-type: inline-size;
}

.eyebrow {
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-1);
}

.hero h1 {
  font-weight: 600;
  margin-inline: auto;
  /* 5cqw is calibrated (measured against this exact heading's text) to
     stay just under the container's real width at any size, so the
     line never overflows once nowrap applies below. The 1.9rem floor
     is what actually governs on phones — at narrow container widths
     5cqw is smaller than 1.9rem, so the floor wins and the heading
     wraps onto 2 lines at full readable size instead of shrinking. */
  font-size: clamp(1.9rem, 5cqw, 3.2rem);
}

/* From tablet width up, the container is wide enough that 5cqw no
   longer hits the 1.9rem floor — so it's safe to also forbid wrapping. */
@media (min-width: 700px) {
  .hero h1 {
    white-space: nowrap;
  }
}

.hero-lede {
  color: var(--muted);
  max-width: 560px;
  margin: var(--space-2) auto var(--space-3);
}

/* ==========================================================================
   SECTIONS SHARED
   ========================================================================== */
section { padding-block: var(--space-4); }
section + section { border-top: 1px solid var(--border); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
/* Two-column on wider screens, same "spread across the width" rhythm
   as the Projects grid and Experience section below it — previously
   About was the one section still stacked in a single narrow strip
   while everything else used the full wrap width. The bio column's
   ~600-650px rendered width at typical desktop sizes also happens to
   land inside the readable 60-80 characters/line range, so a separate
   max-width hack on the paragraphs isn't needed any more — the grid
   column governs it naturally instead. */
.about-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .about-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-4);
    align-items: start;
  }
}

.about-bio p { color: var(--muted); margin-bottom: var(--space-3); }
.about-bio p:last-child { margin-bottom: 0; }

.about-skills-heading {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

/* .skills-list and .skills-list-secondary are two separate <ul>s for
   screen readers (distinct aria-labels: "Skills" vs "Platform skills"),
   but visually they should read as one continuous, wrapping row of
   chips — not two independently-wrapping rows with a forced break
   between them even when there's room to continue on the same line.
   display:contents removes each <ul>'s own box from layout so its <li>
   children become direct flex items of .skills-flow instead; the wrap
   container has just one flex-wrap context for both lists combined. */
.skills-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.skills-flow > ul {
  display: contents;
}

.skills-list li {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  background: var(--bg-raised);
}

/* ==========================================================================
   EXPERIENCE
   ========================================================================== */
.experience-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.experience-item {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.experience-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.experience-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 0.25rem;
}

.experience-head h3 { font-size: 1.05rem; }

.experience-dates {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.experience-org {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.experience-item p {
  color: var(--muted);
  max-width: 720px;
}

/* ==========================================================================
   PROJECT GRID
   Mobile-first: single column by default, grid kicks in at 640px+
   ========================================================================== */
.project-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .project-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

.project-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  transition: transform 0.15s ease-out;
}
.project-card:hover { transform: translateY(-4px); }

.project-card h3 { margin-block: var(--space-1) 0.5rem; }
.project-card p { color: var(--muted); margin-bottom: var(--space-2); }

.project-card .meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.project-card a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.project-card-placeholder { border-style: dashed; opacity: 0.7; }

.status-chip {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: var(--space-1);
}
.status-building { background: rgba(75, 141, 248, 0.15); color: #7fb0ff; }
.status-planned { background: rgba(255, 255, 255, 0.08); color: var(--muted); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.connect-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.connect-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-3);
}

@media (min-width: 640px) {
  .connect-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

.connect-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease-out;
}
.connect-card:hover,
.connect-card:focus-visible {
  border-color: var(--muted);
}

.connect-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--muted);
}
.connect-icon svg { width: 18px; height: 18px; }

.connect-text { min-width: 0; }
.connect-name { display: block; font-weight: 500; font-size: 0.95rem; }
.connect-value {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.availability-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.availability-card p:last-child { color: var(--muted); margin: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { border-top: 1px solid var(--border); padding-block: var(--space-3); }

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: var(--muted);
}

.footer-row a { color: var(--accent); text-decoration: none; }