/* ============================================================
   JEFFREY THORNE — Personal Site Stylesheet
   Last updated: 2026
   
   TABLE OF CONTENTS
   1. Fonts & Reset
   2. Design Tokens (colors, spacing, type scale)
   3. Base Elements
   4. Navigation
   5. Page Layout & Container
   6. Typography Utilities
   7. Components — Tags & Chips
   8. Components — Cards
   9. Components — Timeline (Resume)
   10. Components — Credentials
   11. Page — Home
   12. Page — Resume
   13. Page — Projects
   14. Responsive (mobile)
   ============================================================ */


/* ============================================================
   1. FONTS & RESET
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}


/* ============================================================
   2. DESIGN TOKENS
   Change these to restyle the whole site.
   ============================================================ */

:root {
  /* Colors */
  --color-bg:            #f7f6f3;
  --color-surface:       #ffffff;
  --color-border:        #e5e3dc;
  --color-border-strong: #c9c6bc;
  --color-text:          #1c1b18;
  --color-muted:         #6a6760;
  --color-hint:          #9e9b94;
  --color-accent:        #1a4f7a;
  --color-tag-bg:        #eeece7;
  --color-tag-text:      #4a4844;

  /* Typography */
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* Layout */
  --nav-height: 60px;
  --max-width:  780px;
  --radius-sm:  6px;
  --radius-md:  10px;
}


/* ============================================================
   3. BASE ELEMENTS
   ============================================================ */

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

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

a:hover {
  text-decoration: underline;
}

ul {
  list-style: none;
  padding:    0;
  margin:     0;
}

hr {
  border:     none;
  border-top: 1px solid var(--color-border);
  margin:     var(--space-lg) 0;
}


/* ============================================================
   4. NAVIGATION
   Domain name on the left, page links on the right.
   Links sit in a flex row — li display:inline prevents any
   browser default block stacking.
   ============================================================ */

.nav {
  position:        sticky;
  top:             0;
  z-index:         100;
  height:          var(--nav-height);
  background:      rgba(247, 246, 243, 0.92);
  backdrop-filter: blur(12px);
  border-bottom:   1px solid var(--color-border);
}

.nav__inner {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: space-between;
  max-width:       var(--max-width);
  height:          100%;
  margin:          0 auto;
  padding:         0 var(--space-md);
}

/* Left — full domain name as plain text */
.nav__brand {
  font-family:     var(--font-sans);
  font-size:       var(--text-base);
  font-weight:     500;
  color:           var(--color-text);
  text-decoration: none;
  letter-spacing:  -0.01em;
  flex-shrink:     0;
}

.nav__brand:hover {
  color:           var(--color-text);
  text-decoration: none;
}

/* Right — horizontal link list */
.nav__links {
  display:        flex;
  flex-direction: row;
  align-items:    center;
  gap:            var(--space-md);
  list-style:     none;
  padding:        0;
  margin:         0;
}

.nav__links li {
  display: inline;
}

.nav__links a {
  display:         inline;
  font-family:     var(--font-sans);
  font-size:       var(--text-sm);
  font-weight:     400;
  color:           var(--color-muted);
  text-decoration: none;
  white-space:     nowrap;
  transition:      color 0.15s;
}

.nav__links a:hover {
  color:           var(--color-text);
  text-decoration: none;
}

/* Active page — underline only, no background */
.nav__links a.active {
  color:                     var(--color-text);
  text-decoration:           underline;
  text-underline-offset:     4px;
  text-decoration-thickness: 1px;
}


/* ============================================================
   5. PAGE LAYOUT & CONTAINER
   ============================================================ */

.container {
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   var(--space-xl) var(--space-md) 6rem;
}

.section {
  margin-bottom: var(--space-lg);
}

.section + .section {
  padding-top: var(--space-lg);
  border-top:  1px solid var(--color-border);
}


/* ============================================================
   6. TYPOGRAPHY UTILITIES
   ============================================================ */

/* Small uppercase label above headings */
.eyebrow {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  font-weight:    500;
  color:          var(--color-hint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom:  0.5rem;
}

/* Main page title */
.page-title {
  font-size:      var(--text-xl);
  font-weight:    600;
  letter-spacing: -0.02em;
  line-height:    1.25;
  color:          var(--color-text);
  margin-bottom:  0.75rem;
}

/* Subtitle under a page title */
.page-subtitle {
  font-size:   var(--text-base);
  color:       var(--color-muted);
  max-width:   520px;
  line-height: 1.6;
}

/* Muted mono label — dates, locations */
.mono-label {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  color:          var(--color-hint);
  letter-spacing: 0.04em;
}


/* ============================================================
   7. COMPONENTS — TAGS & CHIPS
   ============================================================ */

.tag {
  display:     inline-block;
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  color:       var(--color-tag-text);
  background:  var(--color-tag-bg);
  border:      1px solid var(--color-border);
  padding:     3px 8px;
  border-radius: 4px;
}

.tag-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
  margin-top: 0.75rem;
}

/* Pill-shaped contact chip — no icons, text only */
.chip {
  display:         inline-block;
  font-family:     var(--font-mono);
  font-size:       var(--text-xs);
  color:           var(--color-tag-text);
  background:      var(--color-tag-bg);
  border:          1px solid var(--color-border);
  padding:         5px 12px;
  border-radius:   99px;
  text-decoration: none;
  transition:      border-color 0.15s, color 0.15s;
}

.chip:hover {
  border-color:    var(--color-border-strong);
  color:           var(--color-text);
  text-decoration: none;
}

.chip-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}


/* ============================================================
   8. COMPONENTS — CARDS
   ============================================================ */

/* Stat row — three equal columns with dividers */
.stat-row {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  background:            var(--color-border);
  border:                1px solid var(--color-border);
  border-radius:         var(--radius-md);
  overflow:              hidden;
  gap:                   1px;
  margin-bottom:         var(--space-lg);
}

.stat {
  background: var(--color-surface);
  padding:    1.25rem 1.5rem;
  text-align: center;
}

.stat__number {
  display:     block;
  font-family: var(--font-mono);
  font-size:   var(--text-lg);
  font-weight: 500;
  color:       var(--color-accent);
}

.stat__label {
  display:    block;
  font-size:  var(--text-xs);
  color:      var(--color-hint);
  margin-top: 3px;
}

/* Project card */
.card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       1.25rem 1.5rem;
  transition:    border-color 0.2s;
}

.card:hover {
  border-color: var(--color-border-strong);
}

.card__title {
  font-size:     var(--text-base);
  font-weight:   600;
  color:         var(--color-text);
  margin-bottom: 0.4rem;
}

.card__body {
  font-size:   var(--text-sm);
  color:       var(--color-muted);
  line-height: 1.65;
}

.card-grid {
  display: grid;
  gap:     var(--space-sm);
}


/* ============================================================
   9. COMPONENTS — TIMELINE (Resume experience entries)
   ============================================================ */

.job {
  margin-bottom: var(--space-lg);
}

/* Company header row */
.job__header {
  display:       flex;
  flex-direction: row;
  align-items:   baseline;
  flex-wrap:     wrap;
  gap:           0.5rem;
  margin-bottom: var(--space-sm);
}

.job__company {
  font-family: var(--font-mono);
  font-size:   var(--text-sm);
  font-weight: 500;
  color:       var(--color-muted);
}

.job__location {
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  color:       var(--color-hint);
}

.job__dates {
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  color:       var(--color-hint);
  margin-left: auto;
}

/* Individual role within a job */
.role {
  position:      relative;
  padding-left:  1.25rem;
  border-left:   2px solid var(--color-border);
  margin-bottom: var(--space-md);
}

/* Dot on the timeline line */
.role::before {
  content:       '';
  position:      absolute;
  left:          -5px;
  top:           9px;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--color-surface);
  border:        2px solid var(--color-border-strong);
}

.role__title {
  font-size:     var(--text-base);
  font-weight:   600;
  color:         var(--color-text);
  margin-bottom: 2px;
}

.role__dates {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  color:          var(--color-hint);
  letter-spacing: 0.04em;
  margin-bottom:  0.6rem;
}

.role__bullets {
  font-size:   var(--text-sm);
  color:       var(--color-muted);
  line-height: 1.65;
  list-style:  none;
  padding:     0;
  margin:      0;
}

.role__bullets li {
  position:      relative;
  padding-left:  1rem;
  margin-bottom: 0.3rem;
}

.role__bullets li::before {
  content:   '—';
  position:  absolute;
  left:      0;
  color:     var(--color-hint);
  font-size: var(--text-xs);
}


/* ============================================================
   10. COMPONENTS — CREDENTIALS
   ============================================================ */

.credentials {
  border-top: 1px solid var(--color-border);
}

.credential {
  display:         flex;
  flex-direction:  row;
  justify-content: space-between;
  align-items:     baseline;
  gap:             1rem;
  padding:         0.85rem 0;
  border-bottom:   1px solid var(--color-border);
}

.credential__main {
  font-size:   var(--text-sm);
  font-weight: 500;
  color:       var(--color-text);
}

.credential__sub {
  font-size:  var(--text-sm);
  color:      var(--color-muted);
  margin-top: 2px;
}

.credential__date {
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  color:       var(--color-hint);
  white-space: nowrap;
  flex-shrink: 0;
}


/* ============================================================
   11. PAGE — HOME
   ============================================================ */

.hero {
  margin-bottom: var(--space-lg);
}

.hero__greeting {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  color:          var(--color-hint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom:  1.25rem;
}

.hero__title {
  font-size:      var(--text-2xl);
  font-weight:    600;
  letter-spacing: -0.025em;
  line-height:    1.2;
  color:          var(--color-text);
  margin-bottom:  1.25rem;
}

.accent {
  color: var(--color-accent);
}

.hero__bio {
  font-size:     var(--text-md);
  color:         var(--color-muted);
  max-width:     540px;
  line-height:   1.7;
  margin-bottom: 1.75rem;
}

/* Currently blurb */
.currently {
  font-size:   var(--text-base);
  color:       var(--color-muted);
  line-height: 1.7;
}

.currently strong {
  color:       var(--color-text);
  font-weight: 500;
}


/* ============================================================
   12. PAGE — RESUME
   ============================================================ */

.resume-header {
  margin-bottom: var(--space-lg);
}


/* ============================================================
   13. PAGE — PROJECTS
   ============================================================ */

.projects-header {
  margin-bottom: var(--space-lg);
}


/* ============================================================
   14. RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 600px) {

  .hero__title {
    font-size: 26px;
  }

  .stat-row {
    grid-template-columns: 1fr;
  }

  .stat {
    text-align: left;
  }

  .credential {
    flex-direction: column;
    gap:            0.2rem;
  }

  .job__dates {
    margin-left: 0;
    width:       100%;
  }

  .nav__links {
    gap: var(--space-sm);
  }

}