/*  Custom colors. Go to coolors.co or palettte.app to generate colors without playing aorund manually.
=====================================================================
    CSS CUSTOM PROPERTIES (VARIABLES)
    Defined on :root so they're available everywhere in the stylesheet.
    Change a value here and it updates everywhere it's used.
    Reference them with var(--name).
===================================================================== */
:root {
  --bg:        #1a1714;  /* Main background — very dark warm brown */
  --bg2:       #211e1a;  /* Slightly lighter background (used for alternating areas) */
  --surface:   #2a2520;  /* Card/panel background — sits above --bg */
  --border:    #3d3830;  /* Subtle border color for cards and dividers */
  --sand:      #c9a96e;  /* Warm sandy gold — used for accents, links */
  --terra:     #b85c38;  /* Terracotta red-orange — primary accent/highlight color */
  --sage:      #7a8c6e;  /* Muted green — used for publication venue labels */
  --stone:     #8c8070;  /* Warm gray — secondary text, tag colors */
  --text:      #e8e0d0;  /* Main body text — warm off-white */
  --muted:     #9a9080;  /* De-emphasized text — descriptions, metadata */
  --heading:   #f0e8d8;  /* Brightest text — used for h1, h2, card titles */
}

/* =====================================================================
    CSS RESET
    Browsers apply default margins/padding to elements. This removes them
    so we start with a clean slate and control all spacing ourselves.
    box-sizing: border-box means padding and border are included in an
    element's total width/height (much easier to work with).
===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth; /* Animate scrolling when clicking anchor links like href="#about" */
  font-size: 16px;         /* Base font size. "rem" units are relative to this value.
                                1rem = 16px, 0.75rem = 12px, 1.5rem = 24px, etc. */
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Lora', Georgia, serif;
  /* Font stack: try Lora first, fall back to Georgia, then any serif */
  line-height: 1.7;    /* Space between lines of text (1.7 = 170% of font size) */
  overflow-x: hidden;  /* Prevent horizontal scrollbar from elements that extend slightly off-screen */
}

/* =====================================================================
    NOISE TEXTURE OVERLAY
    A subtle grain effect applied over the entire page background.
    Uses a CSS pseudo-element (::before) so it doesn't affect the HTML.
    
    The background-image is an inline SVG (encoded as a URL) that uses
    the SVG <feTurbulence> filter to generate procedural noise.
    
    position: fixed — stays in place as user scrolls (covers the viewport)
    inset: 0        — shorthand for top:0; right:0; bottom:0; left:0
    z-index: 0      — sits above the background but below all content
    pointer-events: none — mouse clicks pass through it (non-interactive)
===================================================================== */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.4;
}

/* =====================================================================
    NAVIGATION BAR
    Fixed at the top of the screen — stays visible as user scrolls.
===================================================================== */
nav {
  position: fixed;           /* Removes from document flow, pins to viewport */
  top: 0; left: 0; right: 0; /* Stretches full width at the top */
  z-index: 100;              /* High z-index ensures it appears above all page content */
  display: flex;             /* Flexbox for horizontal layout */
  align-items: center;       /* Vertically center logo and links */
  justify-content: space-between; /* Push logo left, links right */
  padding: 1.2rem 3rem;
  background: rgba(26,23,20,0.88); /* Semi-transparent background (88% opacity) */
  backdrop-filter: blur(12px);     /* Frosted glass effect — blurs content behind nav */
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  font-family: 'DM Mono', monospace;
  font-size: 0.85rem;
  color: var(--sand);
  letter-spacing: 0.08em; /* Adds space between each character */
  text-decoration: none;  /* Remove underline from the <a> tag */
}

.nav-links {
  display: flex;
  gap: 2.5rem;      /* Space between each nav item */
  list-style: none; /* Remove bullet points from <ul> */
}

.nav-links a {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase; /* "about" → "ABOUT" */
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s; /* Animate color change over 0.2 seconds on hover */
}

.nav-links a:hover { color: var(--sand); }
/* :hover is a CSS pseudo-class — styles applied when mouse is over element */

/* =====================================================================
    HERO SECTION
    The full-height landing area — first thing visitors see.
===================================================================== */
#hero {
  min-height: 100vh; /* At least 100% of the viewport height */
  display: flex;
  flex-direction: column; /* Stack children vertically */
  justify-content: center; /* Center content vertically */
  padding: 8rem 3rem 4rem; /* top: 8rem (clears nav), sides: 3rem, bottom: 4rem */
  position: relative; /* Required so child elements with position:absolute are positioned relative to this */
  overflow: hidden;   /* Clip the seismic waveform SVG if it extends beyond bounds */
}

.hero-bg-line {
  /* 
    Decorative horizontal grid lines — like graph paper or seismic recording paper.
    Uses repeating-linear-gradient to draw a 1px line every 60px.
    position: absolute positions it relative to #hero (its nearest positioned ancestor).
    pointer-events: none so it doesn't interfere with clicking buttons.
  */
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,                          /* Horizontal lines (0 degrees = left to right) */
    transparent,
    transparent 59px,              /* 59px of transparency... */
    rgba(201,169,110,0.04) 60px    /* ...then a 1px line at 60px, repeating */
  );
  pointer-events: none;
}

.hero-content {
  max-width: 820px;    /* Limit text width for readability */
  position: relative;  /* z-index only works on positioned elements */
  z-index: 1;          /* Sit above .hero-bg-line (which has no z-index / z-index:0) */
}

/* ── HERO ENTRY ANIMATIONS ──
    Each hero element starts invisible (opacity: 0) and slides up into position.
    The animation: fadeUp shorthand means:
      fadeUp      — which @keyframes to use
      0.7s        — duration
      ease        — easing function (slow start, fast middle, slow end)
      0.2s        — delay before starting
      forwards    — keep the final state after animation ends (stay visible)
    
    Each element has a slightly longer delay, creating a "stagger" effect
    where elements appear one after another.
*/
.hero-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 1.2rem;
  opacity: 0;
  animation: fadeUp 0.7s ease 0.2s forwards;  /* Appears first */
}

h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  /*
    clamp(min, preferred, max):
      - Never smaller than 2.8rem
      - Ideally 6% of viewport width (scales with window)
      - Never larger than 5.5rem
    This makes the font responsive without media queries.
  */
  font-weight: 700;
  color: var(--heading);
  line-height: 1.08;  /* Tight line height for large display text */
  margin-bottom: 0.3rem;
  opacity: 0;
  animation: fadeUp 0.7s ease 0.35s forwards; /* 0.15s after eyebrow */
}

.hero-phd {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: var(--sand);
  font-style: italic;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 0.7s ease 0.5s forwards;  /* 0.15s after h1 */
}

.hero-desc {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 580px;   /* Narrower than hero-content for comfortable reading */
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.7s ease 0.65s forwards;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap; /* Tags wrap to next line if they don't fit */
  gap: 0.6rem;
  margin-bottom: 3rem;
  opacity: 0;
  animation: fadeUp 0.7s ease 0.8s forwards;
}

.tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 2px; /* Slight rounding — nearly square corners */
  color: var(--stone);
}

.hero-ctas {
  /* CTA = Call To Action. The row of buttons. */
  display: flex; gap: 1rem; flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.7s ease 0.95s forwards; /* Last to appear */
}

/* ── BUTTONS ──
    .btn is the base style shared by all buttons.
    .btn-primary and .btn-secondary modify it for different visual treatments.
    This is called "modifier classes" — a common CSS pattern.
*/
.btn {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.75rem 1.8rem;
  text-decoration: none;  /* Buttons are <a> tags — remove underline */
  border-radius: 2px;
  transition: all 0.2s;   /* Animate ALL property changes on hover */
  display: inline-block;  /* <a> is inline by default; this allows padding to work correctly */
}

.btn-primary {
  background: var(--terra);  /* Filled terracotta background */
  color: #fff;
  border: 1px solid var(--terra);
}
.btn-primary:hover { background: #c96840; border-color: #c96840; } /* Slightly lighter on hover */

.btn-secondary {
  background: transparent; /* Ghost/outline button */
  color: var(--sand);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--sand); } /* Border brightens on hover */

/* ── KEYFRAME ANIMATION ──
    @keyframes defines a reusable animation sequence.
    from = 0% (start state), to = 100% (end state).
    Elements using this start below their position and faded out,
    then slide up into place and fade in.
*/
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); } /* Start: invisible, 18px below */
  to   { opacity: 1; transform: translateY(0); }    /* End: visible, normal position */
}

/* =====================================================================
    SHARED SECTION STYLES
    Applied to every <section> element on the page.
===================================================================== */
section {
  padding: 6rem 3rem;     /* Generous vertical padding between sections */
  position: relative;     /* So child elements can use position:absolute */
  z-index: 1;             /* Sit above the body::before noise overlay (z-index:0) */
}

section + section {
  /* 
    The "+" is the CSS adjacent sibling selector.
    This adds a top border only between sections (not on the first one).
    Equivalent to "every section that immediately follows another section."
  */
  border-top: 1px solid var(--border);
}

.section-label {
  /* Small numbered label above each section heading e.g. "01 — About" */
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.6rem;
}

h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--heading);
  font-weight: 600;
  margin-bottom: 3rem;
  position: relative; /* Required for the ::after pseudo-element below */
}

h2::after {
  /*
    Adds a decorative terracotta underline bar below each h2.
    ::after inserts a virtual element AFTER the h2's content.
    content: '' is required (even empty) to make it render.
    display: block makes it appear on its own line.
  */
  content: '';
  display: block;
  width: 48px; height: 2px;
  background: var(--terra);
  margin-top: 0.8rem;
}

.container {
  max-width: 960px; /* Cap content width for readability on wide screens */
  margin: 0 auto;   /* Center horizontally */
}

/* =====================================================================
    ABOUT SECTION
===================================================================== */
#about .about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 4rem;                       /* Space between columns */
  align-items: start;              /* Align columns to their tops (not stretched) */
}

.about-bio {
  font-size: 1.05rem;
  color: var(--muted);
  font-style: italic;
  border-left: 2px solid var(--border); /* Vertical accent line on left */
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.about-body { color: var(--text); line-height: 1.85; }

.stat-grid {
  /* 2x2 grid of stats cards in the right column */
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.2rem 1.5rem;
  border-radius: 3px;
}

.stat-num {
  /* The big number (e.g. "6+", "$1.1M+") */
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--sand);
  line-height: 1;
  margin-bottom: 0.2rem;
}

.stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =====================================================================
    PROJECTS SECTION
===================================================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  /*
    auto-fill: create as many columns as will fit
    minmax(420px, 1fr): each column is at least 420px wide, expands to fill space
    On wide screens: 2 columns. On narrow: 1 column. No media queries needed.
  */
  gap: 1.5rem;
}

.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1.8rem;
  transition: border-color 0.2s, transform 0.2s;
  position: relative; /* For the ::before top-bar animation */
  overflow: hidden;   /* Clip the ::before bar when it's scaled to 0 */
}

.project-card::before {
  /*
    Decorative terracotta bar that slides in from the left on hover.
    Starts scaled to 0 width (invisible), transitions to full width.
    transform-origin: left — the scale animation grows from the left edge.
  */
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--terra);
  transform: scaleX(0);      /* Initially invisible (0 width) */
  transform-origin: left;
  transition: transform 0.3s;
}

.project-card:hover {
  border-color: var(--stone);
  transform: translateY(-2px); /* Card lifts slightly on hover */
}
.project-card:hover::before { transform: scaleX(1); } /* Bar slides in on hover */

.project-domain {
  /* Small category label at top of card e.g. "AI Framework" */
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.5rem;
}

.project-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--heading);
  margin-bottom: 0.8rem;
}

.project-card p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 1.2rem;
}

.project-tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}

.project-tag {
  /* Small tech stack tags at bottom of each card */
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  padding: 0.2rem 0.55rem;
  background: rgba(201,169,110,0.08);  /* Very faint sand tint */
  border: 1px solid rgba(201,169,110,0.2);
  border-radius: 2px;
  color: var(--sand);
}

/* =====================================================================
    PUBLICATIONS SECTION
===================================================================== */
.pub-list { display: flex; flex-direction: column; gap: 0; }

.pub-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 80px 1fr; /* Fixed 80px year column, rest for content */
  gap: 1.5rem;
  align-items: start;
}

.pub-year {
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
  color: var(--terra);
  padding-top: 0.1rem; /* Nudge down to align with text baseline */
}

.pub-venue {
  /* Journal/conference name e.g. "Bulletin of the Seismological Society of America" */
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.35rem;
}

.pub-title {
  font-family: 'Lora', serif;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 0.3rem;
  font-style: italic; /* Publication titles are conventionally italicized */
}

.pub-authors {
  font-size: 0.82rem;
  color: var(--muted);
}

.pub-authors strong {
  /* Highlight the author's own name (Wells, D.) in sand color */
  color: var(--sand);
  font-weight: 500;
}

.pub-link {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--terra);
  text-decoration: none;
}
.pub-link:hover { text-decoration: underline; }

.pub-badge {
  /* "In Preparation" badge shown next to unpublished work */
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--sage);
  color: var(--sage);
  border-radius: 2px;
  margin-left: 0.5rem;
  vertical-align: middle; /* Align badge with surrounding text baseline */
}

/* =====================================================================
    CV SECTION
===================================================================== */
#cv .cv-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.cv-block { margin-bottom: 2.5rem; }

.cv-block h3 {
  /* Section subheadings: "Experience", "Education", "Patents" */
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

.cv-entry { margin-bottom: 1.2rem; }

.cv-role {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: var(--heading); /* Job title */
}

.cv-place {
  font-size: 0.85rem;
  color: var(--stone); /* Institution name */
  margin-bottom: 0.2rem;
}

.cv-date {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: var(--terra); /* Date range */
}

.cv-download {
  margin-top: 2rem;
  text-align: center; /* Center the download button */
}

/* =====================================================================
    CONTACT SECTION
===================================================================== */
#contact .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.contact-intro {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.contact-links { display: flex; flex-direction: column; gap: 1rem; }

.contact-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--text);
  padding: 0.9rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  transition: border-color 0.2s;
  font-size: 0.9rem;
}

.contact-link:hover { border-color: var(--sand); }

.contact-link-icon {
  /* The platform label on the left side of each contact row e.g. "Email" */
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra);
  min-width: 70px; /* Fixed width so all the contact values line up vertically */
}

/* =====================================================================
    FOOTER
===================================================================== */
footer {
  border-top: 1px solid var(--border);
  padding: 2rem 3rem;
  display: flex;
  justify-content: space-between; /* Copyright left, credit right */
  align-items: center;
  position: relative; z-index: 1;
}

footer p {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.08em;
}

/* =====================================================================
    RESPONSIVE DESIGN — MOBILE BREAKPOINT
    @media queries apply styles only when certain conditions are true.
    max-width: 768px means "apply these styles on screens 768px wide or less."
    
    This is a "mobile-first override" approach: desktop styles are the default,
    and we override them for smaller screens.
===================================================================== */
@media (max-width: 768px) {
  nav { padding: 1rem 1.5rem; }
  .nav-links { gap: 1.5rem; }

  section { padding: 4rem 1.5rem; } /* Less horizontal padding on mobile */

  /* Switch all 2-column grids to single column on mobile */
  #about .about-grid,
  #cv .cv-inner,
  #contact .contact-grid { grid-template-columns: 1fr; gap: 2rem; }

  .projects-grid { grid-template-columns: 1fr; } /* One project card per row */

  footer { flex-direction: column; gap: 0.5rem; text-align: center; }
}