/* ==========================================================================
   global.css - the site's design system.

   Every color, font, and spacing value used anywhere on the site is defined
   here once as a "CSS custom property" (a variable, written --like-this).
   Change a value here and it changes everywhere it's used.

   The palette is drawn from the profile photo's backdrop: Mount Baker at
   dusk: charcoal-slate from the suit and mountain shadows, alpine teal from
   the forested slopes, glacier blue from the shirt, warm alabaster from the
   sky. Background stays white; the photo colors appear only as accents.
   ========================================================================== */

:root {
  /* ---- Colors ---- */
  --color-background: #ffffff;   /* page background - always white */
  --color-ink:        #232f3a;   /* main text - charcoal-slate (the suit) */
  --color-ink-soft:   #55636f;   /* secondary text - lighter slate */
  --color-accent:     #3f605b;   /* links, buttons - alpine teal (the slopes) */
  --color-accent-dark:#2e4844;   /* accent on hover - deeper teal */
  --color-glacier:    #a9bccf;   /* subtle borders/details - glacier blue (the shirt) */
  --color-alabaster:  #f7f4ee;   /* tinted section backgrounds - warm sky tone */
  --color-line:       #e5e1d8;   /* hairline rules and card borders */

  /* ---- Typography ----
     A "system font stack": the browser uses whatever high-quality font the
     visitor's own device already has (Segoe UI on Windows, San Francisco on
     Mac, Roboto on Android). Nothing to download, nothing sent to Google. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* ---- Spacing scale ----
     rem = "root em", a unit tied to the browser's base font size (16px by
     default), so spacing scales with the visitor's text-size settings. */
  --space-xs: 0.5rem;
  --space-s:  1rem;
  --space-m:  1.5rem;
  --space-l:  2.5rem;
  --space-xl: 4rem;

  /* ---- Layout ---- */
  --width-content: 44rem;   /* comfortable reading width for text */
  --width-wide:    62rem;   /* wider container for the header and hero */
  --radius: 10px;           /* rounded corners on cards and images */
}

/* ---- Minimal reset: strip inconsistent browser defaults ---- */
*,
*::before,
*::after {
  box-sizing: border-box;   /* padding counts inside an element's width */
  margin: 0;
}

img {
  max-width: 100%;          /* images never overflow their container */
  height: auto;
  display: block;
}

/* ---- Base styles ---- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;     /* 17px, slightly larger than default for readability */
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.01em;  /* large headings look better slightly tightened */
}

h1 { font-size: clamp(2rem, 5vw, 2.75rem); }  /* scales with screen width */
h2 { font-size: 1.5rem; margin-bottom: var(--space-s); }
h3 { font-size: 1.125rem; }

p + p { margin-top: var(--space-s); }

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--color-accent-dark); }

/* Containers center the content and cap its width */
.container      { max-width: var(--width-wide);    margin-inline: auto; padding-inline: var(--space-m); }
.container-text { max-width: var(--width-content); margin-inline: auto; padding-inline: var(--space-m); }

/* ==========================================================================
   Header & navigation - shared by every page
   ========================================================================== */
.site-header {
  border-bottom: 1px solid var(--color-line);
  padding-block: var(--space-s);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;            /* nav drops below the name on narrow screens */
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
}

.site-name {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-ink);
  text-decoration: none;
}

.site-nav {
  display: flex;
  gap: var(--space-m);
  list-style: none;
  padding: 0;
}

.site-nav a {
  color: var(--color-ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
}

.site-nav a:hover { color: var(--color-accent-dark); }

/* aria-current="page" marks the page you're on - styled and announced
   by screen readers, one attribute doing both jobs */
.site-nav a[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 600;
}

/* ==========================================================================
   Footer - shared by every page
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--color-line);
  margin-top: var(--space-xl);
  padding-block: var(--space-l);
  color: var(--color-ink-soft);
  font-size: 0.9rem;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
}

/* ==========================================================================
   Home page
   ========================================================================== */
.hero {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  padding-block: var(--space-xl);
}

/* On screens 720px and up, put text and portrait side by side */
@media (min-width: 720px) {
  .hero { grid-template-columns: 3fr 2fr; }
}

.hero .eyebrow {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
}

.hero .lede {
  font-size: 1.2rem;
  color: var(--color-ink-soft);
  margin-top: var(--space-s);
  max-width: 34rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-m);
}

.portrait {
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  /* Soft glacier-blue glow keys the photo to the palette */
  box-shadow: 0 12px 32px rgba(169, 188, 207, 0.35);
}

/* ---- Buttons (really just styled links) ---- */
.button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

.button-primary {
  background: var(--color-accent);
  color: #ffffff;
  border: 1px solid var(--color-accent);
}

.button-primary:hover { background: var(--color-accent-dark); color: #ffffff; }

.button-secondary {
  color: var(--color-accent);
  border: 1px solid var(--color-glacier);
  background: transparent;
}

.button-secondary:hover { border-color: var(--color-accent); }

/* ---- Featured quote band (home page) ---- */
.quote-band {
  background: var(--color-alabaster);
  border-block: 1px solid var(--color-line);
  padding-block: var(--space-l);
}

.quote-band blockquote {
  font-size: 1.25rem;
  line-height: 1.5;
  max-width: 40rem;
}

.quote-band cite,
.recommendation cite {
  display: block;
  margin-top: var(--space-s);
  font-style: normal;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

/* ==========================================================================
   Resume page
   ========================================================================== */
.resume-section { margin-top: var(--space-xl); }

.resume-section h2 {
  color: var(--color-accent-dark);
  border-bottom: 2px solid var(--color-glacier);
  padding-bottom: var(--space-xs);
}

.job { margin-top: var(--space-m); }

.job header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-xs);
}

.job .dates {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  white-space: nowrap;
}

.job .org { color: var(--color-ink-soft); }

.job ul {
  margin-top: var(--space-xs);
  padding-left: 1.2rem;
}

.job li + li { margin-top: 0.35rem; }

/* Skills as small "pills" */
.skill-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.skill-list li {
  background: var(--color-alabaster);
  border: 1px solid var(--color-line);
  border-radius: 999px;        /* fully rounded ends */
  padding: 0.25rem 0.9rem;
  font-size: 0.9rem;
}

/* Recommendation quotes on the resume page */
.recommendation {
  background: var(--color-alabaster);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-m);
  margin-top: var(--space-m);
}

/* ==========================================================================
   Projects page
   ========================================================================== */
.project-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-m);
  margin-top: var(--space-m);
}

.project-card h3 { margin-bottom: var(--space-xs); }

.project-card .meta {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  margin-bottom: var(--space-xs);
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-card {
  text-align: center;
  padding-block: var(--space-xl);
}

.contact-card .button { margin-top: var(--space-m); }