/* ==========================================================================
   Jackson Bateman — design system
   "Lone Star" — modern navy, white & Texas red, with a single star signature.
   Economics/business portfolio with a performing-arts wing.

   HOW THIS FILE IS ORGANIZED
   Every page on the site (index.html, resume.html, etc.) links to this one
   stylesheet, and every reusable "look" — buttons, cards, the nav — is
   defined once here as a class (.btn, .card, ...) and reused across pages.
   That's the whole trick to keeping a multi-page static site consistent
   without a framework: one CSS file, shared class names, no duplication.

   The file is organized in the order a browser meets a page: base/reset
   first, then header/nav, then hero, then generic section/section-head
   patterns, then one block per *feature* (gallery, resume, timeline,
   contact form, footer), roughly in the order those features appear as you
   scroll through the site. See README.md for the full site map.
   ========================================================================== */

/* Pull in three Google Fonts in one request. Sora = headlines (bold,
   geometric, "modern business"), Inter = body copy (reads well at small
   sizes), IBM Plex Mono = anything that's a number or a data point (stats,
   dates, tags) — monospace makes rows of numbers line up visually, which is
   why it shows up on the résumé and stat cards. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* Design tokens: every color, font, and spacing value the site uses is
   declared once here as a CSS custom property (a "variable"), then referenced
   everywhere else as var(--name). Change a value in this one block and it
   updates across all 9 pages — that's the whole point of a design-token
   system instead of hard-coding colors inline throughout the CSS.

   Note on naming: --brass and --stage are left over from an earlier palette
   (a parchment-and-brass "ledger" theme) that got restyled into this navy/
   red Texas theme without renaming the variables. That's a deliberate
   trade-off, not a mistake — renaming would have meant touching every page's
   inline `style="color:var(--brass)"` reference too. In your own project,
   decide case by case whether a rename is worth the extra diff. */
:root {
  /* Neutrals: backgrounds, surfaces, borders, and text, light-to-dark. */
  --paper: #F4F6F9;       /* page background */
  --paper-soft: #EAEEF3;  /* alternate section background, one shade darker */
  --card: #FFFFFF;        /* cards, form fields, anything "raised" off the page */
  --ink: #0F1B2E;         /* primary text + the dark navy used for the footer/CTA */
  --ink-soft: #4C5768;    /* secondary/body text */
  --ink-faint: #8790A0;   /* tertiary text — labels, captions, timestamps */
  --line: #E1E5EC;        /* hairline dividers */
  --line-strong: #CBD2DC; /* borders that need to read a bit more clearly */

  /* primary accent — Texas flag red. Used sparingly: buttons, links, the
     lone-star marks, and anything that should draw the eye first. */
  --brass: #C8202E;
  --brass-bright: #E23B47; /* hover/active state for the accent above */
  --brass-soft: rgba(200, 32, 46, 0.10); /* accent as a light background tint */

  /* secondary accent — reserved for the Performing Arts wing only, so that
     section reads as a distinct "room" in the site without a full re-theme. */
  --stage: #B4790E;
  --stage-bright: #D99A2B;
  --stage-soft: rgba(180, 121, 14, 0.12);

  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --container: 1180px; /* max content width — keeps text lines readable on wide screens */
  --radius: 16px;      /* corner rounding for cards/panels */
  --radius-sm: 10px;   /* corner rounding for smaller elements (photos, chips, inputs) */

  /* Three shadow "weights" so elevation stays consistent site-wide instead of
     every component inventing its own box-shadow values. */
  --shadow-sm: 0 1px 2px rgba(15, 27, 46, 0.06), 0 1px 1px rgba(15, 27, 46, 0.04);
  --shadow-md: 0 12px 28px rgba(15, 27, 46, 0.10), 0 2px 8px rgba(15, 27, 46, 0.06);
  --shadow-lg: 0 24px 56px rgba(15, 27, 46, 0.16), 0 4px 12px rgba(15, 27, 46, 0.08);

  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* the one easing curve used for every transition/animation */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; } /* native smooth-scroll for in-page anchor links */

/* Accessibility: some visitors set "reduce motion" in their OS because
   animation causes discomfort (vestibular disorders) or they just prefer a
   stiller UI. This respects that by collapsing every animation/transition on
   the page to effectively-instant, rather than turning motion off entirely
   (which would need touching every animation rule individually). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

::selection { background: var(--brass); color: #fff; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
  color: var(--ink);
}

p { margin: 0 0 1em; color: var(--ink-soft); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

/* The small star before every eyebrow label is a single SVG star path,
   inlined directly as a data: URI (no separate image file/request) and
   applied as a CSS mask rather than a background-image. A mask only needs
   a shape — color comes from `background-color`, i.e. var(--brass) — so if
   the accent color ever changes, this star recolors for free instead of
   needing a re-exported icon. -webkit-mask is required for Safari; mask is
   the standard property everyone else uses. */
.eyebrow::before {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background-color: var(--brass);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 17.27l-6.18 3.23L7 13.63l-5-4.87 6.91-1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 17.27l-6.18 3.23L7 13.63l-5-4.87 6.91-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--brass);
  color: #fff;
  border-color: var(--brass);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--brass-bright); border-color: var(--brass-bright); box-shadow: var(--shadow-md); }

.btn-ghost {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--paper-soft); }

.btn-block { width: 100%; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: padding 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.site-header.is-scrolled {
  padding: 14px 0;
  background: rgba(244, 246, 249, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(15,27,46,0.06);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-family: var(--font-display);
  font-size: 1.32rem;
  letter-spacing: -0.01em;
  font-weight: 800;
  color: var(--ink);
}
.brand span { color: var(--brass); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: block;
  padding: 9px 16px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  border-radius: 999px;
  transition: color 0.25s, background 0.25s;
}

.nav-links a:hover { color: var(--ink); background: rgba(15,27,46,0.05); }
.nav-links a.active { color: #fff; background: var(--ink); }

.nav-cta { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--card);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.nav-toggle::before { top: 15px; }
.nav-toggle span { top: 20px; }
.nav-toggle::after { top: 25px; }
.nav-toggle.is-open::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle.is-open::after { transform: translateY(-5px) rotate(-45deg); }
.nav-toggle.is-open span { opacity: 0; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    inset: 0;
    top: 0;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: var(--paper);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.5s var(--ease), opacity 0.4s;
    pointer-events: none;
  }
  .nav-links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a { font-size: 1.4rem; padding: 14px 24px; font-family: var(--font-display); font-weight: 700; }
  .nav-cta .btn-ghost { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding: 190px 0 120px;
  overflow: hidden;
  background: var(--paper);
}

/* The ascending line behind the hero headline is a real <svg><path> in
   index.html, animated with a classic "line draw" trick: give the path a
   stroke-dasharray equal to (at least) its own length, offset the dashes by
   that same amount so the whole stroke is invisible, then animate
   stroke-dashoffset down to 0. The dashes appear to "draw in" from start to
   end. The two waypoint dots and the star fade in afterwards via
   `animation-delay`, timed to land just after the line reaches them. */
.hero-trendline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.7;
}
.hero-trendline path {
  fill: none;
  stroke: var(--brass);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: draw-line 2.4s var(--ease) 0.2s forwards;
}
.hero-trendline circle { fill: var(--ink-faint); opacity: 0; animation: dot-in 0.4s ease 2.2s forwards; }
.hero-trendline .star-point { fill: var(--brass); opacity: 0; animation: dot-in 0.5s var(--ease) 2.3s forwards; }

@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes dot-in { to { opacity: 0.9; } }

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: start;
  gap: 56px;
}

.hero-copy h1 {
  font-size: clamp(2.7rem, 5.2vw, 4.3rem);
  margin: 0.28em 0 0.32em;
  font-weight: 800;
}
.hero-copy h1 em {
  font-style: normal;
  color: var(--brass);
}

.hero-tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
  margin-bottom: 20px;
}

.hero-copy p.lede {
  font-size: 1.05rem;
  max-width: 50ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* Profile card — hero identity block + reused in resume sidebar */
.ledger-card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--brass);
}
.ledger-card .ledger-photo {
  aspect-ratio: 4/5;
  overflow: hidden;
}
.ledger-card .ledger-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ledger-card .ledger-head {
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--line);
}
.ledger-card .ledger-head h3 { font-size: 1.15rem; margin-bottom: 2px; }
.ledger-card .ledger-head p { font-size: 0.86rem; margin-bottom: 0; }
.ledger-card .ledger-stats { padding: 4px 22px; }
.ledger-card .stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.86rem;
}
.ledger-card .stat:last-of-type { border-bottom: none; }
.ledger-card .stat span { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; }
.ledger-card .stat b { font-family: var(--font-mono); color: var(--ink); font-weight: 600; text-align: right; }
.ledger-card .ledger-actions { padding: 18px 22px 24px; display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 900px) {
  .hero { padding: 150px 0 70px; }
  .hero .container { grid-template-columns: 1fr; }
  .hero-copy p.lede { max-width: none; }
  .ledger-card { max-width: 380px; margin: 0 auto; }
}

/* facts ticker strip — the scrolling marquee under the hero.
   main.js duplicates the .ticker-item list once (see "Duplicate ticker
   content" in main.js), so the DOM actually contains the same items twice
   back to back. The animation below then just slides the whole strip left
   by exactly 50% of its width (see @keyframes ticker) — since the second
   half is an identical copy of the first, the moment it fully scrolls off,
   what's left on screen is indistinguishable from the starting position,
   so the loop reads as seamless with no visible jump-cut. */
.ticker-wrap {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink);
  overflow: hidden;
  padding: 16px 0;
}
.ticker {
  display: flex;
  width: max-content;
  animation: ticker 40s linear infinite;
}
.ticker-wrap:hover .ticker { animation-play-state: paused; }
.ticker-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 26px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.86rem;
  color: rgba(244,246,249,0.72);
  white-space: nowrap;
}
.ticker-item b { color: #fff; font-weight: 700; }
.ticker-item::after {
  content: '\2605';
  color: var(--brass-bright);
  margin-left: 26px;
  font-size: 0.72rem;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   Sections
   ========================================================================== */

section { padding: 108px 0; }
.section-tight { padding: 72px 0; }

.section-head {
  max-width: 640px;
  margin-bottom: 52px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.section-head h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  margin-top: 0.4em;
}

.section-head h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 18px;
  border-radius: 2px;
  background: var(--brass);
}
.section-head.center h2::after { margin-left: auto; margin-right: auto; }

.bg-soft { background: var(--paper-soft); }

/* Scroll-reveal: elements start invisible and slightly lower, then fade/
   slide into place. This class only sets the *before* and *after* states —
   the thing that actually adds `.is-visible` at the right moment is an
   IntersectionObserver in main.js, which watches every `.reveal` element and
   flips the class on once it scrolls into view. CSS handles the animation,
   JS handles the "when." The `-delay-N` variants stagger a group of
   siblings (e.g. four cards in a row) so they don't all animate in unison. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* about teaser split */
.split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}
.split-media { position: relative; }
.split-media img {
  border-radius: var(--radius);
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: top;
  box-shadow: var(--shadow-lg);
}
.split-body p { font-size: 1.02rem; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
}

/* highlight / stat cards */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid transparent;
  transition: box-shadow 0.3s, transform 0.3s var(--ease), border-color 0.3s;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-top-color: var(--brass); }
.card .icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--brass-soft);
  color: var(--brass);
  margin-bottom: 18px;
}
.card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.card p { font-size: 0.9rem; margin-bottom: 0; }

@media (max-width: 900px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-cards { grid-template-columns: 1fr; } }

/* secondary teaser card (performing arts / music) */
.teaser-card {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 44px;
  align-items: center;
  background: var(--card);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--stage);
}
.teaser-card .teaser-media { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-sm); }
.teaser-card .teaser-media img { width: 100%; height: 100%; object-fit: cover; }
.teaser-card .teaser-body { padding: 20px 28px 20px 4px; }
.teaser-card .teaser-body h3 { font-size: 1.5rem; }

@media (max-width: 700px) {
  .teaser-card { grid-template-columns: 1fr; padding: 16px; }
  .teaser-card .teaser-body { padding: 20px 8px 4px; }
}

/* featured photo grid */
.grid-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.grid-photos a { grid-column: span 1; border-radius: var(--radius-sm); overflow: hidden; position: relative; aspect-ratio: 3/4; box-shadow: var(--shadow-sm); }
.grid-photos a:nth-child(1) { grid-row: span 2; aspect-ratio: 3/6.4; }
.grid-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.grid-photos a:hover img { transform: scale(1.05); }

@media (max-width: 900px) {
  .grid-photos { grid-template-columns: repeat(2, 1fr); }
  .grid-photos a:nth-child(1) { grid-row: span 1; aspect-ratio: 3/4; }
}

/* music teaser / track card (performing arts wing) */
.music-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: center;
  background: var(--card);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--stage);
}
.music-art {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.music-art img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .music-card { grid-template-columns: 1fr; } .music-art { max-width: 180px; margin: 0 auto; } }

/* CTA banner with star badge */
.cta-banner {
  position: relative;
  border-radius: 24px;
  padding: 68px 48px;
  text-align: center;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 100% at 50% 0%, rgba(200,32,46,0.28), transparent 70%);
}
.cta-banner > * { position: relative; }
.cta-banner .stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  background: var(--brass);
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 auto 24px;
  line-height: 1.35;
  padding: 8px;
  box-shadow: 0 10px 28px rgba(200,32,46,0.45);
}
.cta-banner .stamp svg { display: block; margin: 0 auto 4px; }
.cta-banner h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  max-width: 22ch;
  margin: 0 auto 0.5em;
  color: #fff;
}
.cta-banner p { max-width: 52ch; margin: 0 auto 28px; color: rgba(244,246,249,0.78); }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-banner .btn-ghost { background: transparent; border-color: rgba(255,255,255,0.35); color: #fff; }
.cta-banner .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */

.page-header {
  position: relative;
  padding: 160px 0 64px;
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.page-header .container { position: relative; z-index: 1; }
.page-header h1 { font-size: clamp(2.2rem, 4.2vw, 3.2rem); margin-top: 0.3em; font-weight: 800; }
.page-header .lede { max-width: 62ch; font-size: 1.02rem; }
.page-header .crumb {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--stage);
  margin-bottom: 14px;
}
.page-header .crumb:hover { text-decoration: underline; }

/* ==========================================================================
   Gallery / lightbox (performing arts wing)
   ========================================================================== */

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 44px;
}
.filter-btn {
  padding: 9px 20px;
  border-radius: 999px;
  border: 2px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
}
.filter-btn:hover { color: var(--ink); border-color: var(--stage); }
.filter-btn.active { background: var(--stage); border-color: var(--stage); color: #fff; }

.gallery-group { margin-bottom: 60px; }
.gallery-group-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
  font-size: 1.4rem;
}
.gallery-group-title span {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}

/* CSS multi-column layout (`columns:`) gives a Pinterest-style masonry grid
   with zero JavaScript: the browser flows items down each column in order,
   wrapping to the next column once a column fills. "260px" is a minimum
   column width — the browser fits as many 260px+ columns as will comfortably
   render, so this also handles the responsive column count automatically. */
.masonry {
  columns: 3 260px;
  column-gap: 14px;
}
.masonry .ph {
  break-inside: avoid; /* without this, a photo can get its bottom half sliced onto the next column */
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.masonry .ph img { width: 100%; display: block; transition: transform 0.5s var(--ease); }
.masonry .ph:hover img { transform: scale(1.04); }

.headshot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.headshot-grid .ph {
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.headshot-grid .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.headshot-grid .ph:hover img { transform: scale(1.05); }

@media (max-width: 900px) { .headshot-grid { grid-template-columns: repeat(2, 1fr); } .masonry { columns: 2 220px; } }
@media (max-width: 560px) { .masonry { columns: 1; } }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 27, 46, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  padding: 40px;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 100%;
  max-height: 84vh;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.lightbox-caption {
  position: absolute;
  bottom: 28px; left: 0; right: 0;
  text-align: center;
  color: #EAEEF3;
  font-size: 0.88rem;
  font-family: var(--font-mono);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.2);
  color: #fff;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 0.25s, border-color 0.25s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: var(--brass); border-color: var(--brass); }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }

@media (max-width: 700px) {
  .lightbox { padding: 16px; }
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; }
}

/* ==========================================================================
   Resume / Experience ledger
   ========================================================================== */

.resume-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 60px;
}

.resume-section { margin-bottom: 48px; }
.resume-section h2 {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.resume-section h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}

.credit-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.8fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.credit-row:first-of-type { padding-top: 0; }
.credit-show { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.credit-role { color: var(--ink-soft); font-size: 0.9rem; }
.credit-note { color: var(--ink-faint); font-size: 0.8rem; font-family: var(--font-mono); text-align: right; }

@media (max-width: 640px) {
  .credit-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .credit-note { text-align: left; }
}

.venue-note { color: var(--ink-faint); font-size: 0.88rem; margin-top: 6px; }

.training-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 40px;
}
.training-item h4 { font-size: 0.96rem; color: var(--ink); margin-bottom: 6px; }
.training-item p { font-size: 0.9rem; margin-bottom: 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* position: sticky pins the profile card in place once the page scrolls
   past it, so it stays visible alongside the résumé's longer left column —
   no JS scroll listener needed. `top: 110px` is the offset from the
   viewport's top edge (clears the fixed site header); `align-self: start`
   stops the grid from stretching this column to match the taller one next
   to it, which sticky positioning needs to have any room to move within. */
.resume-side {
  position: sticky;
  top: 110px;
  align-self: start;
  height: fit-content;
}

@media (max-width: 900px) {
  .resume-layout { grid-template-columns: 1fr; }
  .resume-side { position: static; }
  .training-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   About — timeline
   ========================================================================== */

.timeline {
  position: relative;
  padding-left: 32px;
  border-left: 2px solid var(--line-strong);
}
.timeline-item {
  position: relative;
  padding-bottom: 44px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -38px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brass);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--brass);
}
.timeline-item .tl-date {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--brass);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}
.timeline-item h3 { font-size: 1.15rem; margin-bottom: 6px; }
.timeline-item p { margin-bottom: 0; font-size: 0.95rem; }

/* ==========================================================================
   Music page (performing arts wing)
   ========================================================================== */

.track-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: center;
  background: var(--card);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--stage);
}
.track-art { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; box-shadow: var(--shadow-sm); }
.track-art img { width: 100%; height: 100%; object-fit: cover; }
.track-meta .eyebrow { margin-bottom: 14px; }
.track-meta h2 { font-size: 1.8rem; margin-bottom: 6px; }
.track-meta .track-sub { color: var(--ink-faint); font-size: 0.9rem; margin-bottom: 22px; }

audio { width: 100%; height: 44px; accent-color: var(--stage); }

@media (max-width: 700px) {
  .track-card { grid-template-columns: 1fr; padding: 26px; }
  .track-art { max-width: 200px; margin: 0 auto; }
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

.contact-methods { display: flex; flex-direction: column; gap: 14px; margin: 30px 0; }
.contact-method {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s, transform 0.3s var(--ease);
}
.contact-method:hover { box-shadow: var(--shadow-md); transform: translateX(4px); }
.contact-method .icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brass-soft);
  color: var(--brass);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-method .label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 2px; }
.contact-method .value { color: var(--ink); font-weight: 700; }

.social-row { display: flex; gap: 12px; margin-top: 8px; }
.social-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.3s var(--ease);
}
.social-btn:hover { background: var(--brass); border-color: var(--brass); color: #fff; transform: translateY(-3px); }

.form-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--brass);
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.field input, .field textarea {
  width: 100%;
  background: var(--paper-soft);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.25s;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brass);
}
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 0.8rem; color: var(--ink-faint); margin-top: 14px; text-align: center; }

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding: 60px 0 30px;
  background: var(--ink);
  color: rgba(244,246,249,0.7);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer-brand .brand { display: block; margin-bottom: 14px; color: #fff; }
.footer-brand .brand span { color: var(--brass-bright); }
.footer-brand p { max-width: 42ch; font-size: 0.9rem; color: rgba(244,246,249,0.6); }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(244,246,249,0.4);
  margin-bottom: 16px;
  font-weight: 600;
}
.footer-col a, .footer-col p { display: block; color: rgba(244,246,249,0.72); font-size: 0.9rem; margin-bottom: 10px; transition: color 0.2s; }
.footer-col a:hover { color: var(--brass-bright); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 26px;
  border-top: 1px solid rgba(244,246,249,0.14);
  font-size: 0.8rem;
  color: rgba(244,246,249,0.42);
}
.footer-bottom .social-row { margin-top: 0; }
.footer-bottom .social-btn { width: 36px; height: 36px; background: transparent; border-color: rgba(244,246,249,0.24); color: #fff; }
.footer-bottom .social-btn:hover { background: var(--brass); border-color: var(--brass); }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   404
   ========================================================================== */

.not-found {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}
.not-found .huge {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 16vw, 8rem);
  color: var(--brass);
  margin: 0;
  line-height: 1;
}

/* utility */
.mt-40 { margin-top: 40px; }
.text-center { text-align: center; }