/*
  JOSIAH LEINBACH — PROFESSIONAL PORTFOLIO
  styles.css — Visual Design

  HOW THIS FILE IS ORGANIZED:
  1. Design Tokens (CSS Variables) — your color palette and fonts in one place
  2. Reset & Base — removes browser default styles, sets sensible defaults
  3. Typography — font sizes, weights, and line heights
  4. Navigation — the top nav bar
  5. Page Wrapper — the centered content container
  6. Hero Section — name, subtitle, ornament, epigraph
  7. Content Sections — shared rules for all sections below the hero
  8. Work Grid — the "Current Work" three-card layout
  9. Interests Grid — the pill-shaped domain tags
  10. Footer — the bottom bar
  11. Responsive Design — adjustments for smaller screens (tablets, phones)

  HOW TO MAKE COMMON CHANGES:
  - Change a color: find it in Section 1 (Design Tokens) and update the hex value.
  - Change a font size: find the relevant selector in its section and update font-size.
  - Adjust spacing: look for "padding" or "margin" properties.
  - Change the max content width: update --max-width in Section 1.
*/


/* ================================================================
  1. DESIGN TOKENS (CSS VARIABLES)

  CSS variables (also called "custom properties") store values
  you use repeatedly. If you want to change your accent color
  from gold to something else, you change it once here and it
  updates everywhere on the site automatically.

  Syntax: --variable-name: value;
  Usage: color: var(--color-accent);
================================================================ */

:root {

  /* --- Color Palette: Midnight Navy (Palette A) --- */
  --color-bg:          #0D1B2A;  /* Page background — near-black navy */
  --color-surface:     #1A3A5C;  /* Card / panel background — deep navy */
  --color-surface-alt: #122333;  /* Slightly lighter than bg, for subtle variation */
  --color-accent:      #C4A35A;  /* Antique gold — links, labels, ornaments */
  --color-accent-dim:  rgba(196, 163, 90, 0.2); /* Gold at low opacity — borders, rules */
  --color-text-primary:#F5EDD8;  /* Vellum — headings and high-emphasis text */
  --color-text-body:   #A8BDD1;  /* Steel blue — body paragraphs */
  --color-text-muted:  #7A9BBF;  /* Dimmer steel blue — dates, metadata, footer */

  /* --- Typography --- */
  /* Cormorant Garamond: loaded from Google Fonts in index.html */
  --font-serif: "Cormorant Garamond", "Garamond", "Georgia", serif;

  /* Gill Sans: a system font — present on macOS and most Windows machines.
     The stack provides fallbacks for systems without it:
     "Gill Sans MT" is the Windows name for the same face.
     "Trebuchet MS" is a reasonable humanist sans fallback.
     "Libre Franklin" would be inserted here if you add it via Google Fonts. */
  --font-sans: "Gill Sans", "Gill Sans MT", "Trebuchet MS", "Libre Franklin", sans-serif;

  /* --- Layout --- */
  --max-width: 740px;   /* Maximum content width — keeps lines readable */
  --section-gap: 5rem;  /* Vertical space between sections */
}


/* ================================================================
  2. RESET & BASE STYLES

  Browsers apply their own default styles (margins, padding, font
  sizes) that differ across Chrome, Firefox, and Safari. This
  section neutralizes those differences so our design looks
  consistent everywhere.
================================================================ */

/* The * selector applies to every element on the page.
   box-sizing: border-box makes width calculations intuitive:
   padding and borders are included in an element's stated width,
   rather than added on top of it. */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* The html element: font-size: 100% respects the user's browser
   font size preference (usually 16px). This is important for
   accessibility. scroll-behavior: smooth makes anchor links
   scroll gracefully rather than jumping. */
html {
  font-size: 100%;
  scroll-behavior: smooth;
}

/* The body element: sets the background color, default text color,
   and font. Everything on the page inherits these unless overridden. */
body {
  background-color: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--font-serif);
  font-size: 1.0625rem;  /* 17px — slightly larger than default for book-like reading */
  line-height: 1.85;     /* Generous line spacing — easier to read on dark backgrounds */
  -webkit-font-smoothing: antialiased;   /* Smoother text rendering on macOS */
  -moz-osx-font-smoothing: grayscale;    /* Smoother text on Firefox/macOS */
}

/* Remove default bullet points from lists.
   We use <ul> and <li> for the nav, but style them as inline links. */
ul {
  list-style: none;
}

/* Base link style: gold color, no underline by default.
   The underline appears on hover (see below). */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity 0.2s ease; /* Smooth fade on hover */
}

a:hover {
  opacity: 0.75;
  text-decoration: underline;
}

/* Images should never overflow their containers */
img {
  max-width: 100%;
  display: block;
}


/* ================================================================
  3. TYPOGRAPHY UTILITIES

  Reusable text styles applied via class names throughout the HTML.
================================================================ */

/* Section label: the small Gill Sans signpost above each heading.
   font-variant: small-caps renders lowercase letters as smaller
   versions of capital letters — a classical typographic convention. */
.section-label {
  font-family: var(--font-sans);
  font-size: 0.875rem;    /* 14px */
  font-variant: small-caps;
  letter-spacing: 0.2em;   /* Wide tracking — key to the Gill Sans look */
  color: var(--color-accent);
  text-transform: lowercase; /* Ensures small-caps rendering works correctly */
  margin-bottom: 0.4rem;
}

/* Section heading: large Cormorant heading for each section */
.section-heading {
  font-family: var(--font-serif);
  font-size: 2rem;           /* 32px */
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: 1.75rem;
}

/* Prose container: wraps body paragraphs.
   The gap between paragraphs is set on the <p> elements inside it. */
.prose p {
  color: var(--color-text-body);
  margin-bottom: 1.25rem;
  text-align: justify;
}

/* Remove the bottom margin from the last paragraph in any prose block
   so it doesn't add extra space before the next section */
.prose p:last-child {
  margin-bottom: 0;
}


/* ================================================================
  4. NAVIGATION

  The top nav bar. Uses Gill Sans in small caps — the primary
  "functional" role for the sans-serif font.
================================================================ */

nav {
  /* Stick to the top of the viewport as you scroll */
  position: sticky;
  top: 0;
  z-index: 100; /* Ensures nav stays above other content when scrolling */

  /* Background with slight transparency — the dark bg color with
     a CSS backdrop-filter blurs content beneath it slightly,
     creating a frosted glass effect on supported browsers */
  background-color: rgba(13, 27, 42, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* Safari prefix */

  /* A very subtle gold line at the bottom of the nav */
  border-bottom: 1px solid var(--color-accent-dim);
}

/* The <ul> inside nav: display the list items in a horizontal row */
nav ul {
  display: flex;
  justify-content: center; /* Center the links horizontally */
  gap: 0.25rem;
  max-width: var(--max-width);
  margin: 0 auto;          /* Center the ul itself on wide screens */
  padding: 0 1.5rem;
}

/* Individual nav links: Gill Sans, small caps, widely tracked */
nav a {
  font-family: var(--font-sans);
  font-size: 1rem;    /* 16px */
  font-variant: small-caps;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--color-text-muted); /* Dimmer than active by default */
  text-decoration: none;
  padding: 1.1rem 0.75rem;
  display: block;           /* Makes the full padding area clickable */
  transition: color 0.2s ease;
  border-bottom: 2px solid transparent; /* Reserve space for active indicator */
}

nav a:hover {
  color: var(--color-text-primary);
  opacity: 1;
  text-decoration: none;
}

/* The active link (current page): gold color and a gold underline */
nav a.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}


/* ================================================================
  6. HERO SECTION

  The centered monument layout: name, subtitle, ornamental rule,
  and the Bacon epigraph — all centered on the page.
================================================================ */

.hero {
  text-align: center;
  padding: 5rem 0 4rem;     /* Generous top and bottom breathing room */
}

/* Your name: the largest text on the page.
   Cormorant Garamond at display size. */
.hero-name {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 8vw, 4.5rem); /* clamp(min, preferred, max)
     This is a responsive font size technique:
     - minimum: 3rem (48px) on very small screens
     - preferred: 8vw (8% of viewport width) — scales with screen
     - maximum: 4.5rem (72px) on large screens
     Never goes below 3rem or above 4.5rem. */
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  line-height: 1.0;
  margin-bottom: 1rem;
}

/* Subtitle: Gill Sans Light, widely tracked, in gold.
   The three titles separated by middle dots. */
.hero-subtitle {
  font-family: var(--font-sans);
  font-size: 0.8125rem;    /* 13px */
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 2.5rem;
}

/* ---- Ornamental Rule ----
   A horizontal divider with a gold fleuron (✦) at the center.
   This is built using CSS pseudo-elements ::before and ::after,
   which insert decorative content before and after the .ornament
   span without requiring extra HTML.

   The rule is created using a CSS flex layout trick:
   - .ornamental-rule is a flex container
   - ::before and ::after are flex items that grow to fill space
   - The .ornament span sits between them
*/
.ornamental-rule {
  display: flex;
  align-items: center;     /* Vertically center the ornament with the lines */
  gap: 1rem;
  margin: 0 auto 2.5rem;
  max-width: 28rem;        /* Keeps the rule from stretching too wide */
}

/* The lines on either side of the ornament:
   content: "" inserts an invisible element that can be styled.
   flex: 1 makes each line grow to fill available space equally. */
.ornamental-rule::before,
.ornamental-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-accent-dim);
}

/* The ✦ character between the lines */
.ornament {
  font-family: var(--font-sans);
  font-size: 0.625rem;     /* 10px — deliberately small */
  color: var(--color-accent);
  opacity: 0.7;
  flex-shrink: 0;           /* Prevents the ornament from being squished */
}

/* ---- Epigraph ----
   The Bacon quotation. <blockquote> is the correct semantic
   HTML element for a quotation from an external source. */
.epigraph {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;     /* 18px — slightly larger than body for emphasis */
  color: var(--color-text-body);
  line-height: 1.8;
  max-width: 36rem;
  margin: 0 auto;
}

.epigraph p {
  margin-bottom: 0.75rem;
}

/* The attribution line (— Francis Bacon, Essays):
   Gill Sans, small caps, muted color — classic citation treatment */
.epigraph cite {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;      /* 12px */
  font-style: normal;      /* Override the italic inherited from .epigraph */
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}


/* ================================================================
  7. CONTENT SECTIONS

  Shared styles for all sections below the hero (About, Current
  Work, Areas of Interest). Each section is separated by a thin
  gold rule at the top.
================================================================ */

.content-section {
  padding-top: var(--section-gap);  /* Space above each section */

  /* Gold rule at the top: a thin decorative line that visually
     separates sections without needing extra HTML elements.
     border-top draws a line above the section's padding box. */
  border-top: 1px solid var(--color-accent-dim);
  margin-top: var(--section-gap);
}

/* The first content section after the hero doesn't need a top margin
   because the hero already has bottom padding */
.content-section:first-of-type {
  margin-top: 0;
}


/* ================================================================
  8. WORK GRID

  The three-column card layout for "Current Work".
  On desktop: three cards side by side.
  On mobile: cards stack vertically (see responsive section).
================================================================ */

.work-grid {
  display: grid;
  /* auto-fit: create as many columns as fit.
     minmax(200px, 1fr): each column is at least 200px wide
     and grows equally to fill available space.
     On a 740px container this creates 3 columns; on small
     screens it collapses to 1. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

/* Individual work card */
.work-item {
  background-color: var(--color-surface); /* Deep navy card background */
  border: 1px solid var(--color-accent-dim);
  border-top: 2px solid var(--color-accent); /* Gold accent on top edge */
  padding: 1.5rem;
  /* No border-radius — angular corners are more consistent with the
     classical, architectural feel of the Scholar's Study aesthetic */
}

/* Discipline tag above the title */
.work-tag {
  font-family: var(--font-sans);
  font-size: 0.625rem;     /* 10px */
  font-variant: small-caps;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--color-accent);
  margin-bottom: 0.4rem;
}

/* Card title: Cormorant at a modest size */
.work-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;      /* 20px */
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.25;
  margin-bottom: 0.6rem;
}

/* Card description: Gill Sans Light — short, functional copy */
.work-desc {
  font-family: var(--font-sans);
  font-size: 0.8125rem;    /* 13px */
  font-weight: 300;
  color: var(--color-text-body);
  line-height: 1.65;
}


/* ================================================================
  9. INTERESTS GRID

  The pill-shaped domain tags. These wrap naturally across
  multiple lines depending on screen width.
================================================================ */

.interests-grid {
  display: flex;
  flex-wrap: wrap;         /* Tags wrap to the next line when there's no room */
  gap: 0.6rem;
}

/* Individual interest pill */
.interest-tag {
  font-family: var(--font-sans);
  font-size: 0.6875rem;    /* 11px */
  font-variant: small-caps;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-accent-dim);
  padding: 0.3rem 0.8rem;
  /* No border-radius: consistent with the angular design language */
  transition: color 0.2s ease, border-color 0.2s ease;
}

.interest-tag:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  cursor: default;          /* Tags aren't links, so no pointer cursor */
}


/* ================================================================
  10. FOOTER

  The bottom bar: name, tagline, links, copyright.
  Entirely in Gill Sans — a purely functional element.
================================================================ */

footer {
  border-top: 1px solid var(--color-accent-dim);
  margin-top: 5rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Footer name: smaller version of the hero name, in Cormorant */
.footer-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: 0.3rem;
}

/* Footer tagline: same treatment as hero subtitle, but smaller */
.footer-tagline {
  font-family: var(--font-sans);
  font-size: 0.625rem;     /* 10px */
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}

/* Footer navigation links */
.footer-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.footer-links a {
  font-family: var(--font-sans);
  font-size: 0.75rem;      /* 12px */
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-accent);
  text-decoration: none;
  opacity: 1;
}

/* Copyright line */
.footer-copy {
  font-family: var(--font-sans);
  font-size: 0.6875rem;    /* 11px */
  color: var(--color-text-muted);
  opacity: 0.5;
  letter-spacing: 0.06em;
}


/* ================================================================
  11. RESPONSIVE DESIGN

  CSS media queries adjust the layout at smaller screen sizes.
  "max-width: 600px" means: apply these rules only when the
  screen is 600px wide or less (phones and small tablets).

  The philosophy here is "mobile-first graceful degradation":
  the desktop design is the default; these rules simplify it
  for smaller screens rather than building it up from scratch.
================================================================ */

@media (max-width: 600px) {

  /* Slightly reduce the gap between sections on small screens */
  :root {
    --section-gap: 3.5rem;
  }

  /* Tighten hero top padding on mobile */
  .hero {
    padding: 3rem 0 3rem;
  }

  /* Reduce the subtitle letter-spacing slightly on narrow screens
     to prevent awkward line breaks */
  .hero-subtitle {
    letter-spacing: 0.14em;
  }

  /* On mobile, the work grid collapses to a single column.
     The minmax(200px, 1fr) in the grid definition handles most
     of this automatically, but this ensures it works on very
     narrow screens. */
  .work-grid {
    grid-template-columns: 1fr;
  }

  /* Stack nav items if they overflow on very small screens */
  nav ul {
    gap: 0;
    flex-wrap: wrap;
    justify-content: center;
  }

  nav a {
    padding: 0.75rem 0.5rem;
  }
}

/* 
  FADE-IN ANIMATION
  ----------------
  This defines a reusable animation named "fadeRise".
  "from" is the starting state; "to" is the ending state.
  
  opacity: 0 → 1  makes the page invisible at start, 
                  then fades to fully visible.
  
  translateY(20px) → translateY(0)  moves the page up 
  20 pixels as it fades in. Adjust "20px" to taste —
  larger values = more dramatic rise, smaller = subtler.
  
  This block does nothing on its own — it only activates
  when something references it with an "animation:" rule.
*/
@keyframes fadeRise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
  APPLY THE ANIMATION
  -------------------
  This tells the browser to run "fadeRise" when the 
  .page-wrapper element is loaded.
  
  0.6s         — total duration of the animation
  ease-out     — starts fast, decelerates smoothly 
                 (natural, not mechanical)
  both         — applies the "from" state before the 
                 animation starts, preventing a flash
                 of visible content
*/

.fade-in-page {
  animation: fadeRise 0.6s ease-out both;
}

/* ================================================================
  PAGE WRAPPER

  A div that wraps the main content of each page. It limits the
  maximum line length to --max-width and centers everything.
================================================================ */

.page-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;           /* Centers the wrapper on wide screens */
  padding: 0 1.5rem 5rem;   /* Side padding on small screens; bottom breathing room */
  animation: fadeRise 0.6s ease-out both;
  padding: 0 1rem 3rem;
}