/* ============================================
   TOKENS
   ---------------------------------------------
   Three color schemes, set via data-theme on <html>:
     (default / "beige") — the original drafting-paper palette
     "light"             — clean warm white
     "dark"              — dark mode
   ============================================ */
:root {
  color-scheme: light;

  /* BEIGE — default */
  --bg: #BFB9A4;
  --panel: #ECE7D9;
  --panel-line: #8C8368;
  --paper: #22251D;
  --paper-dim: #3F4235;
  --orange: #2A7A56;
  --blue: #234358;
  --muted: #504C3C;

  --nav-bg: rgba(191, 185, 164, 0.85);
  --grid-line: rgba(59, 110, 140, 0.07);
  --card-shadow: rgba(42, 46, 39, 0.12);

  /* night-sky canvas (script.js): star ink color + glow radius in px */
  --star: #234358;
  --star-glow: 0;

  --font-display: 'Space Mono', 'Courier New', monospace;
  --font-body: 'Inter', -apple-system, sans-serif;

  --container: 1100px;
  --edge: 6vw;

  /* Detail-page hero image size. Change here to affect EVERY project page,
     or override on a single page with an inline style on .detail-image —
     e.g. <div class="detail-image" style="--img-width: 480px">
     Set --img-height to `none` to let an image be its natural height. */
  --img-width: 620px;
  --img-height: 400px;
  /* --img-fit: `contain` = never crop, pad with panel color.
                `cover`   = crop to fill the box.
     --img-pos: with `cover`, which part to KEEP (e.g. `center 30%` keeps
                nearer the top). Ignored when fit is `contain`. */
  --img-fit: contain;
  --img-pos: center;

  /* four-point star used as a CSS mask (color comes from `background`) */
  --star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 7 17 12 24 12C17 12 12 17 12 24C12 17 7 12 0 12C7 12 12 7 12 0Z'/%3E%3C/svg%3E");
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #F5F3EE;
  --panel: #FFFFFF;
  --panel-line: #D9D4C7;
  --paper: #21241C;
  --paper-dim: #494B40;
  --orange: #256E4D;
  --blue: #234358;
  --muted: #6A6454;

  --nav-bg: rgba(245, 243, 238, 0.85);
  --grid-line: rgba(59, 110, 140, 0.05);
  --card-shadow: rgba(33, 36, 28, 0.09);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #191C16;
  --panel: #23271E;
  --panel-line: #4A4736;
  --paper: #ECE7D9;
  --paper-dim: #C4BEA8;
  --orange: #55B98C;
  --blue: #8FB7CD;
  --muted: #948C6E;

  --nav-bg: rgba(25, 28, 22, 0.85);
  --grid-line: rgba(143, 183, 205, 0.06);
  --card-shadow: rgba(0, 0, 0, 0.4);

  --star: #ECE7D9;
  --star-glow: 6;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--paper);
  font-family: var(--font-body);
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* subtle blueprint grid texture across the whole page */
.grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* starfield + falling stars, drawn by script.js. z-index -1 keeps it under
   every piece of content (including non-positioned blocks) but above the
   page background, which body propagates to the root. */
.sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

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

::selection { background: var(--orange); color: #FFFFFF; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ============================================
   NAV
   ============================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem var(--edge);
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--panel-line);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.theme-switch {
  display: inline-flex;
  border: 1px solid var(--panel-line);
}

.theme-switch button {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: none;
  border-left: 1px solid var(--panel-line);
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.theme-switch button:first-child { border-left: none; }

.theme-switch button:hover { color: var(--paper); }

.theme-switch button[aria-pressed="true"] {
  color: var(--panel);
  background: var(--blue);
}

@media (max-width: 640px) {
  .nav {
    flex-wrap: wrap;
    row-gap: 0.85rem;
  }
  .nav-right {
    width: 100%;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .nav-links {
    flex-wrap: wrap;
    gap: 0.9rem 1rem;
  }
  .theme-switch button {
    font-size: 0.58rem;
    padding: 0.32rem 0.4rem;
    letter-spacing: 0.03em;
  }
}

.nav-mark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--blue);
}

.nav-links {
  display: flex;
  gap: 2.5rem;
}

.nav-links a {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
  transition: color 0.2s ease;
}

.nav-links a:hover { color: var(--orange); }

@media (max-width: 640px) {
  .nav-links { gap: 1.2rem; }
  .nav-links a { font-size: 0.7rem; }
}

/* ============================================
   HERO / TITLE BLOCK
   ============================================ */
.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 4rem;
  align-items: end;
  padding: 6rem var(--edge) 5rem;
  max-width: 1400px;
  margin: 0 auto;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--blue);
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
}

.hero-bio {
  font-size: 1.15rem;
  color: var(--paper-dim);
  max-width: 42ch;
}

.title-block {
  border: 1px solid var(--panel-line);
  background: var(--panel);
}

.tb-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--panel-line);
  font-size: 0.85rem;
}

.tb-row:last-child { border-bottom: none; }

.tb-header {
  background: var(--bg);
  justify-content: flex-start;
}

.tb-header span {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--blue);
}

.tb-label {
  font-family: var(--font-display);
  color: var(--muted);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.tb-value {
  text-align: right;
  color: var(--paper);
  font-weight: 500;
}

@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 4rem var(--edge) 3rem;
  }
}

/* ============================================
   DIMENSION-LINE DIVIDER
   ============================================ */
.dim-divider {
  position: relative;
  z-index: 1;
  height: 3rem;
  display: flex;
  align-items: center;
  padding: 0 var(--edge);
}

.dim-divider span {
  flex: 1;
  height: 1px;
  background: var(--panel-line);
  position: relative;
}

.dim-divider span::before,
.dim-divider span::after {
  content: '';
  position: absolute;
  top: -5px;
  width: 1px;
  height: 11px;
  background: var(--panel-line);
}

.dim-divider span::before { left: 0; }
.dim-divider span::after { right: 0; }

/* ============================================
   SECTIONS (shared)
   ============================================ */
.section {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 4rem var(--edge);
}

.section-eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--blue);
  margin-bottom: 0.8rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 3rem;
}

/* ============================================
   PROJECTS
   ============================================ */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.project-card {
  position: relative;
  display: block;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  padding: 2.2rem 2rem 2rem;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.project-card:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--card-shadow);
}

.project-more {
  display: inline-block;
  margin-top: 1.2rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--blue);
}

.project-callout {
  position: absolute;
  top: -14px;
  left: 2rem;
  background: var(--orange);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
}

/* Corner sparkle — two four-point stars that pop in on the card's top-right
   corner on hover / keyboard focus. Hidden at rest so the grid stays clean. */
.card-spark {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 18px;
  height: 28px;
  pointer-events: none;
}

.card-spark::before,
.card-spark::after {
  content: '';
  position: absolute;
  background: var(--orange);
  -webkit-mask: var(--star-shape) center / contain no-repeat;
          mask: var(--star-shape) center / contain no-repeat;
  opacity: 0;
  transform: scale(0.3) rotate(-45deg);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.card-spark::before { top: 0; right: 0; width: 18px; height: 18px; }
.card-spark::after  { top: 19px; right: 4px; width: 9px; height: 9px; transition-delay: 0.08s; }

.project-card:hover .card-spark::before,
.project-card:hover .card-spark::after,
.project-card:focus-visible .card-spark::before,
.project-card:focus-visible .card-spark::after {
  opacity: 1;
  transform: scale(1) rotate(0);
  /* slow twinkle once the pop-in has finished; the small star runs half a
     cycle behind so the two never pulse together */
  animation: spark-twinkle 2.6s ease-in-out 0.5s infinite;
}

.project-card:hover .card-spark::after,
.project-card:focus-visible .card-spark::after { animation-delay: 1.8s; }

@keyframes spark-twinkle {
  0%, 100% { transform: scale(1) rotate(0); }
  50%      { transform: scale(0.72) rotate(20deg); }
}

/* glow only in dark mode — on the paper themes a glow reads as a smudge */
:root[data-theme="dark"] .card-spark {
  filter: drop-shadow(0 0 4px var(--orange));
}

/* paper themes get a hairline flare instead: pen-drawn light spikes through
   the big star that extend out from the corner and fade at the tips. Rotated
   45° so the rays fall between the star's points instead of lying on top of
   the card's own borders (the star sits exactly on the corner). */
:root:not([data-theme="dark"]) .project-card::after {
  content: '';
  position: absolute;
  top: -26px;
  right: -26px;
  width: 52px;
  height: 52px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--orange) 50%, transparent) center / 100% 1px no-repeat,
    linear-gradient(transparent, var(--orange) 50%, transparent) center / 1px 100% no-repeat;
  opacity: 0;
  transform: rotate(45deg) scale(0.4);
  transition: opacity 0.4s ease, transform 0.5s ease;
}

:root:not([data-theme="dark"]) .project-card:hover::after,
:root:not([data-theme="dark"]) .project-card:focus-visible::after {
  opacity: 0.75;
  transform: rotate(45deg) scale(1);
}

.project-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0.6rem 0 0.3rem;
  line-height: 1.3;
}

.project-role {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.project-desc {
  font-size: 0.95rem;
  color: var(--paper-dim);
  margin-bottom: 1.4rem;
}

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

.project-tags span {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--blue);
  border: 1px solid var(--panel-line);
  padding: 0.3rem 0.6rem;
}

@media (max-width: 800px) {
  .project-grid { grid-template-columns: 1fr; }
}

/* ============================================
   TIMELINE (experience)
   ============================================ */
.timeline {
  display: flex;
  flex-direction: column;
}

.timeline-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 2rem;
  padding: 1.8rem 0;
  border-top: 1px solid var(--panel-line);
}

.timeline-item:last-child { border-bottom: 1px solid var(--panel-line); }

.timeline-date {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--blue);
  padding-top: 0.2rem;
}

.timeline-body h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}

.timeline-org {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
}

.timeline-body p:last-child {
  color: var(--paper-dim);
  font-size: 0.95rem;
  max-width: 60ch;
}

@media (max-width: 640px) {
  .timeline-item { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ============================================
   SKILLS
   ============================================ */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
}

.skill-block {
  border-top: 2px solid var(--orange);
  padding-top: 1rem;
}

.skill-block h4 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--blue);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.skill-block ul {
  list-style: none;
}

.skill-block li {
  font-size: 0.9rem;
  color: var(--paper-dim);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--panel-line);
}

.skill-block li:last-child { border-bottom: none; }

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

/* ============================================
   PROJECT DETAIL PAGE
   ============================================ */

/* Lift page content onto its own layer above the fixed .grid-overlay and
   .sky canvas, like the home page sections already are. Left flat between
   those two fixed layers, Safari skipped repainting parts of the page when
   the theme changed, so they kept the old theme's colors. */
.back-link,
.detail-hero,
.detail-image,
.detail-body,
.detail-nav {
  position: relative;
  z-index: 1;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 2.5rem var(--edge) 0;
  transition: color 0.2s ease;
}
.back-link:hover { color: var(--orange); }

.detail-hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: 2.5rem var(--edge) 3rem;
}

.detail-callout {
  display: inline-block;
  background: var(--orange);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  margin-bottom: 1.2rem;
}

.detail-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  margin-bottom: 0.8rem;
}

.detail-role {
  font-family: var(--font-display);
  color: var(--muted);
  font-size: 0.95rem;
}

.detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 0.9rem;
}

.detail-links a {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--blue);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.detail-links a:hover {
  color: var(--orange);
  border-color: var(--orange);
}

.detail-image {
  max-width: var(--img-width);
  margin: 0 auto;
  padding: 0 var(--edge) 3rem;
}

.image-placeholder {
  border: 1px dashed var(--panel-line);
  background: var(--panel);
  aspect-ratio: 16 / 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--muted);
  text-align: center;
  padding: 2rem;
}

.image-placeholder .ph-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.image-placeholder .ph-sub {
  font-size: 0.8rem;
  max-width: 40ch;
}

/* Drop a real <img> straight into .detail-image (replacing .image-placeholder) */
.detail-image img {
  display: block;
  width: 100%;
  max-height: var(--img-height);
  object-fit: var(--img-fit);
  object-position: var(--img-pos);
  background: var(--panel);
  border: 1px solid var(--panel-line);
}

.detail-image figure { margin: 0; }

.detail-image figcaption {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--muted);
}

.detail-body {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--edge) 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.detail-block h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--blue);
  letter-spacing: 0.03em;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--panel-line);
  padding-bottom: 0.6rem;
}

.detail-block p {
  color: var(--paper-dim);
  font-size: 1rem;
}

.detail-block ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.detail-block li {
  color: var(--paper-dim);
  font-size: 1rem;
  padding-left: 1.4rem;
  position: relative;
}

.detail-block li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--orange);
}

.detail-block strong {
  color: var(--paper);
  font-weight: 600;
}

.detail-block code {
  font-family: var(--font-display);
  font-size: 0.82em;
  background: var(--bg);
  border: 1px solid var(--panel-line);
  padding: 0.05em 0.35em;
  white-space: nowrap;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.detail-tags span {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--blue);
  border: 1px solid var(--panel-line);
  padding: 0.3rem 0.6rem;
}

.detail-nav {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--edge) 4rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--panel-line);
  padding-top: 2rem;
}

.detail-nav a {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--paper);
  transition: color 0.2s ease;
}

.detail-nav a:hover { color: var(--orange); }

/* ============================================
   SCROLL REVEAL
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   404
   ============================================ */
.notfound {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 6rem);
  max-width: 680px;
  margin: 0 auto;
  padding: 4rem var(--edge);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.notfound h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  margin-bottom: 0.9rem;
}

.notfound .nowrap { white-space: nowrap; }

.notfound-star {
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.3em;
  vertical-align: 0.6em;
  background: var(--orange);
  -webkit-mask: var(--star-shape) center / contain no-repeat;
          mask: var(--star-shape) center / contain no-repeat;
  animation: spark-twinkle 2.6s ease-in-out infinite;
}

:root[data-theme="dark"] .notfound-star {
  filter: drop-shadow(0 0 4px var(--orange));
}

.notfound-msg {
  font-size: 1.1rem;
  color: var(--paper-dim);
  margin-bottom: 2.2rem;
}

.notfound .tb-value { overflow-wrap: anywhere; }

.notfound .detail-links { margin-top: 1.6rem; }

/* ============================================
   FOOTER
   ============================================ */
.footer {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 5rem var(--edge) 4rem;
}

.footer-content h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin-bottom: 2rem;
  line-height: 1.1;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-links a {
  font-size: 1.05rem;
  color: var(--paper-dim);
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-links a:hover {
  color: var(--orange);
  border-color: var(--orange);
}

@media (max-width: 800px) {
  .footer { padding-top: 4rem; }
}