/* ==========================================================================
   Design tokens
   ==========================================================================
   Single source of truth for color/type. Everything else in this file
   references these — no improvised colors elsewhere.
*/
:root {
  /* "Deep ground" bedrock tones — everything below the sky (nav, modal,
     Experience/Skills/Education/Contact) sits on these, warm near-black
     brown rather than the old cool near-black. */
  --color-bg: #14100B;
  --color-surface: #201810;
  --color-surface-2: #2A2015;
  --color-border: #3B2C1C;
  --color-text: #EDE6D8;         /* bone white */
  --color-text-muted: #A89883;
  --color-accent: #E0854F;       /* muted terracotta — primary accent */
  --color-accent-soft: #E0854F26;
  --color-accent-2: #D8A657;     /* muted ochre/gold — secondary accent, sparing use */

  /* Dig-site palette, used by the Projects strata (see .projects below) */
  --color-sand: #C9A876;
  --color-clay: #8B5A42;
  --color-rock-dark: #241A13;

  /* Dusk sky behind the Hero (see .hero::before) */
  --sky-gradient: linear-gradient(180deg, #13142A 0%, #2B2436 32%, #463530 58%, #6E4A3A 80%, #A5703F 100%);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --max-width: 1080px;

  --shadow-window: 0 20px 60px -15px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

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

ul { margin: 0; padding: 0; list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
}

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

section {
  padding: 96px 0;
  position: relative;
}

.section-label {
  font-family: var(--font-mono);
  color: var(--color-accent);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.section-heading {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 40px;
}

/* ==========================================================================
   Top nav
   ========================================================================== */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(20, 16, 11, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-nav.is-scrolled {
  border-bottom-color: var(--color-border);
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 64px;
}
.nav-links {
  display: flex;
  gap: 28px;
}
.nav-links a {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.nav-links a:hover {
  color: var(--color-text);
  text-decoration: none;
}
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 64px;
}
.hero .container { width: 100%; }
/* The sky scrolls with the Hero (it isn't fixed), so the Backstory below
   can have a landscape of its own. z-index -2 sits under the boid canvas. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--sky-gradient);
  pointer-events: none;
}
.hero h1,
.hero .hero-subtitle,
.hero .hero-location {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.08;
  margin-bottom: 18px;
}
.hero .hero-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--color-text);
  margin-bottom: 10px;
  max-width: 640px;
}
.hero .hero-location {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 36px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.btn:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
  text-decoration: none;
}
.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--color-accent);
  opacity: 0.9;
}

/* ==========================================================================
   Boid-flock background
   ==========================================================================
   The canvas is fixed behind the whole page and the Hero's sky sits under it.
   Only the Hero is transparent, so the flock shows there and nowhere else:
   every section below sets its own opaque background.
*/
#boid-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  opacity: 0.6;
  pointer-events: none;
}
.site-bg-fallback {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 20%, #00000022, transparent 45%),
    radial-gradient(circle at 80% 65%, #A5703F33, transparent 40%);
  display: none;
  pointer-events: none;
}
body.no-canvas .site-bg-fallback { display: block; }

/* ==========================================================================
   About / "My History": papers spread across a curator's desk. A label, a
   handwritten name, catalogue records and aged photographs, all tied
   together with dotted red string. Paper grain is an SVG noise tile; the
   crumpling is an SVG lighting filter (#paper-soft / #paper-crumple in
   index.html) applied to each sheet.
   ========================================================================== */
.about {
  --ink: #2b2118;
  --ink-blue: #1c1915; /* the "pen" colour for all handwriting: now black */
  --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32  0 0 0 0 .22  0 0 0 0 .1  0 0 0 .34 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position: relative;
  padding: 104px 0 112px;
  /* The desk: mid-tone oak, clearly lighter than the dark strata of Projects
     below it, with faint grain and a pool of light. */
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, rgba(255, 232, 190, 0.20), transparent 75%),
    repeating-linear-gradient(92deg, rgba(50, 28, 10, 0.16) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(88deg, rgba(255, 228, 180, 0.07) 0 2px, transparent 2px 23px),
    linear-gradient(180deg, #8e6c47 0%, #7a5a3a 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.archive-board {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

/* Every piece of paper: a wrapper that rotates and casts the shadow, and an
   inner .paper that is torn (clip-path), stained and crumpled. The shadow
   has to live on the wrapper because clip-path would cut it off. */
.board-item {
  position: relative;
  filter: drop-shadow(0 9px 10px rgba(0, 0, 0, 0.5));
}
.paper {
  position: relative;
  color: var(--ink);
  filter: url(#paper-soft);
}

.archive-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 44px;
}
.archive-title { transform: rotate(-1.6deg); }
.archive-title .paper {
  padding: 22px 38px 24px;
  background:
    radial-gradient(circle at 80% 30%, rgba(120, 70, 20, 0.2) 0 8px, transparent 26px),
    radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(110, 70, 25, 0.5) 100%),
    var(--noise),
    linear-gradient(165deg, #d9c58f, #c7ad72);
  clip-path: polygon(0 5px, 12% 0, 31% 4px, 55% 0, 78% 5px, 100% 1px, calc(100% - 4px) 50%, 100% calc(100% - 2px), 80% 100%, 58% calc(100% - 4px), 34% 100%, 14% calc(100% - 3px), 0 100%, 4px 55%);
}
.archive-title::before,
.record::before,
.archive-photo::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 78px;
  height: 22px;
  margin-left: -39px;
  background: rgba(222, 205, 140, 0.68);
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  z-index: 3;
}
.about .section-label {
  color: #8a3b1f;
  margin-bottom: 8px;
}
.about .section-heading {
  color: var(--ink);
  margin-bottom: 0;
}
/* The name, handwritten on a scrap of paper. */
.archive-name { transform: rotate(3deg); margin-top: 10px; }
.archive-name .paper {
  padding: 16px 32px 22px;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(110, 70, 25, 0.4) 100%),
    var(--noise),
    linear-gradient(170deg, #e4d4a6, #d2bd88);
  clip-path: polygon(0 6%, 6% 0, 18% 5%, 33% 0, 52% 4%, 70% 0, 88% 5%, 100% 1%, 99% 40%, 100% 78%, 96% 100%, 80% 95%, 62% 100%, 44% 96%, 27% 100%, 10% 95%, 0 99%, 1% 55%);
}
.archive-name span {
  font-family: var(--hand);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ink-blue);
  white-space: nowrap;
  text-shadow: 0 0 1px rgba(31, 42, 77, 0.5);
}
.archive-name .paper::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 26px;
  bottom: 13px;
  height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C30 1 60 7 95 4 S160 2 198 5' fill='none' stroke='%231c1915' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: 0.8;
}

/* The desk layout: twelve columns, one row per record. */
.archive-items {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 30px;
  align-items: center;
}
/* Records take eight columns; photos are a fixed width tucked against the
   outer edge, which leaves an even gutter between paper and print. */
.record.side-left { grid-column: 1 / span 8; }
.record.side-right { grid-column: 5 / span 8; }
/* a record with no photo beside it gets a little extra width instead */
.record.solo.side-left { grid-column: 1 / span 9; }
.record.solo.side-right { grid-column: 4 / span 9; }
.archive-photo { margin: 0; width: 270px; max-width: 100%; }
.archive-photo.side-right { grid-column: 9 / span 4; justify-self: end; }
.archive-photo.side-left { grid-column: 1 / span 4; justify-self: start; }

/* Marker arrows: drawn on top of the papers, ignoring the pointer. Each
   stroke is a wobbly path with a "V" arrowhead; they draw themselves in
   once, the first time the desk scrolls into view. */
.archive-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}
.link-lines {
  filter: url(#marker-rough);
}
.link-lines path {
  fill: none;
  stroke: #b3241c;
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
}
.link-lines .arrow-head {
  stroke-width: 4;
}
/* stroke-dashoffset is set from the scroll position in updateArchiveArrows() */

/* ---- Records: three kinds of paper, cycled ---------------------------- */
.record-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(90, 40, 28, 0.4);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a3b1f;
}
.record .paper p { color: var(--ink); }

/* 0: a page ripped from a spiral notebook, in pen */
.record-v0 { transform: rotate(-1.2deg); }
.record-v0 .paper {
  --pl: 70px;  /* left padding, past the margin line and the holes */
  --pr: 28px;
  padding: 22px var(--pr) 26px var(--pl);
  background:
    linear-gradient(90deg, transparent 54px, rgba(176, 56, 44, 0.5) 54px 56px, transparent 56px),
    radial-gradient(circle at 20px 38px, #241a12 0 6px, transparent 7px) 0 0 / 100% 56px repeat-y,
    radial-gradient(circle at 76% 22%, rgba(120, 70, 20, 0.2) 0 10px, transparent 34px),
    radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(110, 70, 25, 0.5) 100%),
    var(--noise),
    linear-gradient(168deg, #ddc995, #cdb57c);
  clip-path: polygon(9px 0, 100% 3px, calc(100% - 3px) 30%, 100% 62%, calc(100% - 2px) 100%, 7px calc(100% - 3px), 0 82%, 8px 70%, 2px 55%, 9px 40%, 0 24%, 7px 12%);
}
.record-v0 .record-head { margin-left: -4px; }
.record-v0 .paper p {
  font-family: var(--hand);
  --rule: 30px;
  font-size: 1.5rem;
  line-height: var(--rule);
  color: var(--ink-blue);
  /* The ruled lines are drawn on the text block itself, one per line box, so
     every line of writing sits on a rule. The block is stretched out over the
     paper's padding so the rules still run edge to edge. */
  margin: 0 calc(-1 * var(--pr)) 0 calc(-1 * var(--pl));
  padding: 0 var(--pr) 0 var(--pl);
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--rule) - 1px), rgba(52, 84, 140, 0.32) calc(var(--rule) - 1px) var(--rule));
}

/* 1: a buff file card, typed */
.record-v1 { transform: rotate(1deg); }
.record-v1 .paper {
  padding: 24px 30px 28px;
  background:
    radial-gradient(circle at 18% 82%, rgba(110, 60, 20, 0.3) 0 14px, rgba(110, 60, 20, 0) 15px 22px, rgba(110, 60, 20, 0.22) 23px 25px, transparent 26px),
    radial-gradient(ellipse at 50% 50%, transparent 36%, rgba(110, 70, 25, 0.55) 100%),
    var(--noise),
    linear-gradient(165deg, #cfb273, #bf9f5e);
  clip-path: polygon(0 3px, 22% 0, 48% 4px, 73% 1px, 100% 5px, calc(100% - 3px) 45%, 100% 100%, 70% calc(100% - 3px), 38% 100%, 12% calc(100% - 4px), 0 100%, 3px 50%);
}
.record-v1 .paper p {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.75;
}
.record-v1::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 52%;
  width: 24px;
  height: 62px;
  z-index: 3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 62'%3E%3Cpath d='M7 40V12a5 5 0 0 1 10 0v38a8 8 0 0 1-16 0V16' fill='none' stroke='%23aab0b5' stroke-width='2.4' stroke-linecap='round' transform='translate(3 3)'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.4));
}
.record-v1::before { display: none; }

/* 2: a folded letter with a coffee ring */
.record-v2 { transform: rotate(-0.7deg); }
.record-v2 .paper {
  padding: 24px 30px 28px;
  background:
    linear-gradient(180deg, transparent 33%, rgba(80, 52, 22, 0.22) 33.3%, rgba(255, 246, 220, 0.3) 33.8%, transparent 34.2%),
    linear-gradient(180deg, transparent 66%, rgba(80, 52, 22, 0.2) 66.3%, rgba(255, 246, 220, 0.28) 66.8%, transparent 67.2%),
    radial-gradient(circle at 98% 84%, transparent 0 30px, rgba(110, 60, 20, 0.32) 31px 34px, rgba(110, 60, 20, 0.1) 35px 40px, transparent 41px),
    radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(110, 70, 25, 0.5) 100%),
    var(--noise),
    linear-gradient(162deg, #e0cd9c, #cfb67c);
  clip-path: polygon(0 4px, 15% 0, 40% 3px, 64% 0, 100% 3px, 99% 40%, 100% 78%, calc(100% - 2px) 100%, 60% calc(100% - 4px), 30% 100%, 8% calc(100% - 3px), 0 100%, 2px 60%);
}
.record-v2 .paper p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  line-height: 1.75;
}

/* ---- Photos: aged prints, crumpled and taped ---------------------------- */
.archive-photo.side-right { transform: rotate(3.2deg); }
.archive-photo.side-left { transform: rotate(-3.6deg); }
.archive-photo .paper {
  filter: url(#paper-crumple);
  padding: 13px 13px 50px;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(110, 70, 25, 0.55) 100%),
    var(--noise),
    linear-gradient(160deg, #d6c18c, #c1a76f);
  clip-path: polygon(0 2px, 30% 0, 62% 3px, 100% 0, calc(100% - 2px) 45%, 100% 100%, 70% calc(100% - 3px), 36% 100%, 0 calc(100% - 2px), 3px 50%);
}
.archive-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 35%;
  filter: sepia(0.7) contrast(0.9) brightness(1.02) saturate(0.75);
}
.photo-fig {
  position: absolute;
  left: 16px;
  bottom: 15px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b4326;
}
.photo-caption {
  position: absolute;
  right: 16px;
  bottom: 10px;
  font-family: var(--hand);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ink-blue);
}

@media (max-width: 760px) {
  .about { padding: 84px 0 96px; }
  .archive-head { flex-direction: column; align-items: flex-start; gap: 34px; margin-bottom: 52px; }
  .archive-name span { font-size: 2rem; }
  .archive-items { display: flex; flex-direction: column; gap: 52px; }
  .board-item { width: 94%; }
  .side-left { align-self: flex-start; }
  .side-right { align-self: flex-end; }
  .archive-photo { width: 62%; }
  .record-v0 .paper { --pl: 58px; }
  .record-v0 .paper p { font-size: 1.35rem; }
}

/* ==========================================================================
   Projects — the dig site. Sediment strata (newest/in-progress on top,
   oldest deepest), each holding its projects as stone slabs with a fossil
   (or, once set, a real screenshot/photo) pressed into them. Band colors
   are decorative; every slab keeps its own dark, readable surface.
   ========================================================================== */
.projects {
  border-top: 2px solid #0e0a07;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  background: var(--color-rock-dark); /* matches the horizon silhouette above */
}
.projects-heading {
  padding: 88px 0 28px;
  position: relative;
  z-index: 1;
  background: var(--color-rock-dark);
}
.projects-heading .section-heading { margin-bottom: 10px; }

.project-layer {
  position: relative;
  padding: 60px 0 76px;
}
/* A low-poly edge where one layer of soil meets the next. */
.project-layer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -29px;
  height: 30px;
  /* a dark outline along the angular edge, then the layer color */
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='840'%20height='30'%3E%3Cpath%20d='M0.0%2016.0L44.0%2010.3L95.4%2018.3L121.8%208.0L158.2%2024.3L210.4%209.8L257.6%2023.0L289.2%208.5L321.3%2025.2L349.6%2011.6L378.4%2023.2L417.2%208.2L475.2%2017.2L503.5%2012.3L548.9%2017.8L612.4%2012.6L642.6%2020.8L673.8%207.5L723.4%2018.5L775.9%205.4L808.4%2024.3L840.0%2016.0'%20fill='none'%20stroke='rgba(14,8,4,0.55)'%20stroke-width='9'%20stroke-linejoin='miter'/%3E%3Cpath%20d='M0.0%2016.0L44.0%2010.3L95.4%2018.3L121.8%208.0L158.2%2024.3L210.4%209.8L257.6%2023.0L289.2%208.5L321.3%2025.2L349.6%2011.6L378.4%2023.2L417.2%208.2L475.2%2017.2L503.5%2012.3L548.9%2017.8L612.4%2012.6L642.6%2020.8L673.8%207.5L723.4%2018.5L775.9%205.4L808.4%2024.3L840.0%2016.0'%20fill='none'%20stroke='rgba(255,226,180,0.18)'%20stroke-width='2'%20stroke-linejoin='miter'%20transform='translate(0%206)'/%3E%3C/svg%3E") bottom left / 840px 30px repeat-x,
    var(--layer-top);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='840'%20height='30'%3E%3Cpath%20d='M0%2030L0.0%2016.0L44.0%2010.3L95.4%2018.3L121.8%208.0L158.2%2024.3L210.4%209.8L257.6%2023.0L289.2%208.5L321.3%2025.2L349.6%2011.6L378.4%2023.2L417.2%208.2L475.2%2017.2L503.5%2012.3L548.9%2017.8L612.4%2012.6L642.6%2020.8L673.8%207.5L723.4%2018.5L775.9%205.4L808.4%2024.3L840.0%2016.0L840%2030Z'/%3E%3C/svg%3E") bottom left / 840px 30px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='840'%20height='30'%3E%3Cpath%20d='M0%2030L0.0%2016.0L44.0%2010.3L95.4%2018.3L121.8%208.0L158.2%2024.3L210.4%209.8L257.6%2023.0L289.2%208.5L321.3%2025.2L349.6%2011.6L378.4%2023.2L417.2%208.2L475.2%2017.2L503.5%2012.3L548.9%2017.8L612.4%2012.6L642.6%2020.8L673.8%207.5L723.4%2018.5L775.9%205.4L808.4%2024.3L840.0%2016.0L840%2030Z'/%3E%3C/svg%3E") bottom left / 840px 30px repeat-x;
}
/* The first layer meets the heading, not another layer: no edge there. */
#project-grid > .project-layer:first-child::before { display: none; }
/* Small angular stones in a range of earth tones, a shade darker or lighter
   than the soil. */
.project-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1400'%20height='560'%3E%3Cpolygon%20points='75,88%2065,79%2072,68%2082,71%2090,77%2087,87'%20fill='rgba(0,0,0,0.15)'/%3E%3Cpolygon%20points='63,207%2036,206%2036,190%2059,191'%20fill='rgba(0,0,0,0.15)'/%3E%3Cpolygon%20points='75,366%2066,368%2062,364%2064,360%2068,358%2074,363'%20fill='rgba(78,92,108,0.20)'/%3E%3Cpolygon%20points='129,478%20114,479%20114,467%20128,470'%20fill='rgba(0,0,0,0.15)'/%3E%3Cpolygon%20points='264,216%20253,216%20252,205%20263,199%20270,205%20272,209'%20fill='rgba(255,238,205,0.12)'/%3E%3Cpolygon%20points='231,323%20223,315%20226,310%20238,307%20242,313%20242,319'%20fill='rgba(0,0,0,0.15)'/%3E%3Cpolygon%20points='181,515%20198,499%20221,506%20204,527'%20fill='rgba(0,0,0,0.24)'/%3E%3Cpolygon%20points='464,34%20459,44%20442,39%20436,33%20449,23%20459,25'%20fill='rgba(190,104,58,0.20)'/%3E%3Cpolygon%20points='424,172%20427,158%20442,155%20450,161%20453,173%20435,178'%20fill='rgba(190,104,58,0.20)'/%3E%3Cpolygon%20points='440,381%20425,373%20432,363%20450,368'%20fill='rgba(190,104,58,0.20)'/%3E%3Cpolygon%20points='399,521%20379,528%20360,517%20373,502%20394,503'%20fill='rgba(255,238,205,0.12)'/%3E%3Cpolygon%20points='593,44%20577,40%20574,26%20583,21%20602,28%20610,35'%20fill='rgba(112,132,98,0.17)'/%3E%3Cpolygon%20points='613,242%20619,221%20638,225%20645,238%20637,248'%20fill='rgba(255,238,205,0.12)'/%3E%3Cpolygon%20points='677,385%20662,382%20663,369%20684,373'%20fill='rgba(0,0,0,0.24)'/%3E%3Cpolygon%20points='677,522%20654,536%20632,520%20657,507'%20fill='rgba(222,172,92,0.18)'/%3E%3Cpolygon%20points='736,121%20726,113%20727,104%20743,103%20749,112'%20fill='rgba(0,0,0,0.24)'/%3E%3Cpolygon%20points='785,229%20783,214%20798,204%20822,221%20806,234'%20fill='rgba(150,96,110,0.14)'/%3E%3Cpolygon%20points='777,396%20760,402%20746,393%20760,378%20776,387'%20fill='rgba(0,0,0,0.15)'/%3E%3Cpolygon%20points='810,507%20800,506%20797,501%20805,497%20811,500'%20fill='rgba(112,132,98,0.17)'/%3E%3Cpolygon%20points='922,91%20910,85%20909,79%20926,73%20932,82'%20fill='rgba(222,172,92,0.18)'/%3E%3Cpolygon%20points='916,206%20902,199%20895,186%20927,178%20935,184%20942,202'%20fill='rgba(0,0,0,0.15)'/%3E%3Cpolygon%20points='917,371%20911,359%20926,353%20939,364%20933,376'%20fill='rgba(150,96,110,0.14)'/%3E%3Cpolygon%20points='990,521%20967,518%20969,503%20988,496%201003,511'%20fill='rgba(78,92,108,0.20)'/%3E%3Cpolygon%20points='1193,178%201177,185%201162,176%201171,168%201192,169'%20fill='rgba(190,104,58,0.20)'/%3E%3Cpolygon%20points='1134,342%201136,333%201144,332%201152,338%201143,343'%20fill='rgba(0,0,0,0.24)'/%3E%3Cpolygon%20points='1293,65%201289,61%201290,56%201297,54%201302,57%201301,65'%20fill='rgba(112,132,98,0.17)'/%3E%3Cpolygon%20points='1355,243%201334,242%201330,225%201353,214%201366,222'%20fill='rgba(222,172,92,0.18)'/%3E%3Cpolygon%20points='1307,410%201275,406%201286,387%201311,391'%20fill='rgba(255,238,205,0.12)'/%3E%3C/svg%3E") 0 0 / 1400px 560px repeat;
}
.layer-grain { display: none; }
.project-layer > .container { position: relative; z-index: 1; }

.project-layer-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(20, 16, 11, 0.7);
  background: rgba(237, 230, 216, 0.6);
  border: 1px solid rgba(20, 16, 11, 0.28);
  border-radius: 3px;
  padding: 3px 9px;
  margin-bottom: 22px;
}

.fossil-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: 22px;
}
.fossil-card {
  position: relative;
  display: flex;
  align-items: stretch;
  text-align: left;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  color: var(--color-text);
  border: 1px solid rgba(214, 186, 140, 0.3);
  background: linear-gradient(150deg, #3f3328 0%, #2c231b 55%, #231b15 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 210, 0.1),
    inset 0 -3px 8px rgba(0, 0, 0, 0.35),
    0 14px 26px -12px rgba(0, 0, 0, 0.7);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.fossil-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fossil-card:hover,
.fossil-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 210, 0.14),
    inset 0 -3px 8px rgba(0, 0, 0, 0.3),
    0 20px 30px -12px rgba(0, 0, 0, 0.75);
  outline: none;
}

/* The pressed-in stone panel the fossil sits in. */
.fossil-relief {
  position: relative;
  flex: 0 0 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(circle at 35% 28%, #52443a 0%, #2f261e 62%, #251d17 100%);
  border-right: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: inset -3px 0 10px rgba(0, 0, 0, 0.4), inset 0 3px 12px rgba(0, 0, 0, 0.4);
}
.fossil-svg {
  width: 100%;
  height: auto;
  color: rgba(226, 198, 150, 0.9);
  /* light edge below, dark edge above: reads as carved/pressed into stone */
  filter: drop-shadow(0 1.5px 0 rgba(255, 240, 210, 0.22)) drop-shadow(0 -1px 1.5px rgba(0, 0, 0, 0.75));
  transition: transform 0.35s ease, color 0.35s ease;
}
/* A film of dust over the fossil until you brush it off (hover/focus). */
.fossil-dust {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 40% 38%, rgba(201, 168, 118, 0.3), rgba(201, 168, 118, 0.12) 75%);
  transition: opacity 0.35s ease;
}
.fossil-card:hover .fossil-dust,
.fossil-card:focus-visible .fossil-dust { opacity: 0; }
.fossil-card:hover .fossil-svg,
.fossil-card:focus-visible .fossil-svg {
  transform: scale(1.06) rotate(-2deg);
  color: rgba(246, 222, 178, 1);
}
.fossil-relief.has-cover { padding: 0; }
/* Thumbnails look like old fossil plates: drained to a brown stone tone,
   gritty and vignetted. The full-colour version is in the project window. */
.fossil-cover {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
  filter: grayscale(1) sepia(0.8) contrast(1.12) brightness(0.8);
}
.fossil-relief.has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse at 40% 35%, rgba(214, 184, 130, 0.35), rgba(40, 28, 18, 0.7) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.fossil-info {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 22px 24px;
}
.fossil-catalog {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-2);
}
.fossil-card .project-name {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--color-text);
}
.fossil-card .project-tagline {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.fossil-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.fossil-open {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--color-accent);
}

@media (max-width: 560px) {
  .fossil-relief { flex-basis: 96px; padding: 12px; }
  .fossil-info { padding: 16px 16px; }
  .fossil-card .project-name { font-size: 1rem; }
}

/* ==========================================================================
   Experience — tabs + timeline
   ========================================================================== */
/* The gallery: a crown molding at the ceiling line, green gallery walls
   under a wash of overhead light, and a baseboard and wood floor below. */
.experience {
  position: relative;
  padding: 126px 0 0;
  background:
    radial-gradient(ellipse 75% 40% at 50% 0%, rgba(255, 226, 160, 0.12), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, #243228 0%, #1a251e 100%);
}
.experience::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  background: linear-gradient(180deg, #5b4630 0, #7a5f3d 28%, #3b2c1e 29%, #2a2018 100%);
  border-bottom: 1px solid rgba(214, 186, 140, 0.4);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
}
.experience::after {
  content: "";
  display: block;
  height: 96px;
  margin-top: 64px;
  background:
    linear-gradient(180deg, #6a5238 0, #6a5238 2px, #2a1f16 2px, #2a1f16 15px, transparent 15px),
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255, 226, 160, 0.16), transparent 70%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0 2px, rgba(255, 220, 160, 0.06) 2px 3px, transparent 3px 96px),
    linear-gradient(180deg, #3d2d20 0, #241912 100%);
}
.experience .section-heading {
  color: #f3ead4;
}
.experience .section-heading::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin-top: 14px;
  background: linear-gradient(90deg, #d8b25e, #8a6a2f);
}
.exp-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 40px;
  border: 1px solid rgba(184, 146, 74, 0.5);
  background: rgba(0, 0, 0, 0.22);
  border-radius: var(--radius-sm);
  padding: 4px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.exp-tab {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: calc(var(--radius-sm) - 2px);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.exp-tab:hover {
  color: var(--color-text);
}
.exp-tab.is-active {
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 600;
}

/* Timeline: [date tag] -- [brass post on the velvet rope] -- [framed card].
   The date hangs off the rope like a museum specimen tag on a string. */
.timeline {
  --tl-tag: 188px;
  --tl-node: 46px;
  position: relative;
}
.timeline-entry {
  display: none;
}
.timeline-entry.is-visible {
  display: block;
  position: relative;
}
/* Velvet rope strung between the posts. */
.timeline-entry::before {
  content: "";
  position: absolute;
  left: calc(var(--tl-tag) + var(--tl-node) / 2 - 3.5px);
  top: 12px;
  bottom: 12px;
  width: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, #4a0f1a, #b02b41 42%, #6e1626 58%, #3a0a14);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 2px 0 7px rgba(0, 0, 0, 0.45);
}
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--tl-tag) var(--tl-node) 1fr;
  grid-template-areas: "tag node card";
  margin-bottom: 34px;
}
/* Wall-washer light falling on each exhibit. */
.tl-item::before {
  content: "";
  position: absolute;
  left: calc(var(--tl-tag) + var(--tl-node));
  right: -24px;
  top: -22px;
  bottom: -18px;
  pointer-events: none;
  background: radial-gradient(ellipse 52% 62% at 45% 0%, rgba(255, 228, 170, 0.15), transparent 100%);
}
.tl-tag-wrap {
  grid-area: tag;
  justify-self: end;
  display: flex;
  align-items: center;
  height: 56px;
}
.tl-node {
  grid-area: node;
  position: relative;
}
/* brass stanchion top the rope hangs from */
.tl-node::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 28px;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f8e6a6, #c9a24a 48%, #6f5018 100%);
  box-shadow: 0 0 0 2px #2e2210, 0 3px 6px rgba(0, 0, 0, 0.6);
}
/* the string the tag hangs from */
.tl-node::before {
  content: "";
  position: absolute;
  left: 0;
  width: 50%;
  top: 28px;
  border-top: 1px dashed rgba(230, 200, 140, 0.75);
}

/* The museum tag: a paper luggage tag with a punched hole. */
.tl-tag {
  position: relative;
  max-width: 172px;
  padding: 8px 28px 8px 13px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.4;
  color: #2b2016;
  background: linear-gradient(160deg, #f0e8d4, #ddd0b2);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
  transform: rotate(-1.6deg);
  transform-origin: right center;
  transition: transform 0.25s ease;
}
.tl-item:nth-child(even) .tl-tag { transform: rotate(1.3deg); }
.tl-tag::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}
.tl-tag-wrap {
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}
.tl-item:hover .tl-tag,
.tl-item:focus-within .tl-tag {
  transform: rotate(0deg);
}

/* Each card is a framed exhibit: gilt frame, matte inside. */
.timeline-card {
  grid-area: card;
  position: relative;
  border: none;
  border-radius: 3px;
  padding: 20px 24px;
  text-align: left;
  width: 100%;
  color: var(--color-text);
  background: linear-gradient(160deg, #1d1713, #14100b);
  box-shadow:
    inset 0 0 0 1px rgba(255, 235, 180, 0.2),
    inset 0 0 22px rgba(0, 0, 0, 0.6),
    0 0 0 4px #a8803a,
    0 0 0 5px #4f3816,
    0 12px 24px -4px rgba(0, 0, 0, 0.65);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.timeline-card:hover,
.timeline-card:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 235, 180, 0.3),
    inset 0 0 22px rgba(0, 0, 0, 0.6),
    0 0 0 4px #d6ac55,
    0 0 0 5px #4f3816,
    0 16px 28px -4px rgba(0, 0, 0, 0.7);
  outline: none;
}
.timeline-card .role {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 4px;
}
.timeline-card .place {
  color: var(--color-accent);
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .timeline { --tl-tag: 0px; --tl-node: 28px; }
  .tl-item {
    grid-template-columns: var(--tl-node) 1fr;
    grid-template-areas: "node tag" "node card";
    row-gap: 8px;
  }
  .tl-tag-wrap { justify-self: start; height: auto; }
  .tl-node::before { display: none; }
  .tl-node::after { top: 15px; width: 16px; height: 16px; }
  .tl-tag { max-width: 100%; }
}

/* ==========================================================================
   Shared window-modal component (Projects + Experience)
   ========================================================================== */
.window-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 4, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.window-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.window-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-window);
  width: 100%;
  max-width: 640px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.18s ease;
  overflow: hidden;
}
.window-overlay.is-open .window-modal {
  transform: translateY(0) scale(1);
}
.window-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 16px;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.window-titlebar .window-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.window-close {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.window-close svg { width: 14px; height: 14px; }
.window-close:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}
.window-body {
  padding: 24px;
  overflow-y: auto;
  position: relative;
}

/* Project and experience windows are dressed as a gallery piece: gilt frame
   on a lit wall, a brass nameplate for the title bar and a wall-label
   placard under the picture. The lightbox shares the base classes above
   but not this skin. */
#window-overlay .window-modal {
  --brass-dark: #2a1d0c;
  border: none;
  border-radius: 3px;
  background:
    radial-gradient(ellipse 80% 38% at 50% 0%, rgba(255, 226, 160, 0.13), transparent 75%),
    linear-gradient(180deg, #1f2a21 0%, #17201a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 235, 180, 0.18),
    0 0 0 5px #a8803a,
    0 0 0 6px #4f3816,
    0 30px 70px -10px rgba(0, 0, 0, 0.75);
}
#window-overlay .window-titlebar {
  padding: 11px 12px 11px 20px;
  background: linear-gradient(180deg, #e0c070 0%, #b89040 52%, #8c6c2e 100%);
  border-bottom: 1px solid #4f3816;
  box-shadow: inset 0 1px 0 rgba(255, 245, 205, 0.55);
}
#window-overlay .window-titlebar .window-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--brass-dark);
  text-shadow: 0 1px 0 rgba(255, 240, 190, 0.45);
  white-space: normal;
  line-height: 1.25;
}
#window-overlay .window-close {
  border-color: rgba(42, 29, 12, 0.55);
  color: var(--brass-dark);
}
#window-overlay .window-close:hover {
  background: rgba(42, 29, 12, 0.14);
  border-color: var(--brass-dark);
  color: var(--brass-dark);
}
#window-overlay .window-body {
  padding: 26px 28px 30px;
}
.window-placard {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(216, 166, 87, 0.28);
}
.window-dates {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-sand);
}
.window-medium {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.window-medium span {
  margin-right: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-2);
}
/* The project's own fossil, faint on the wall behind the label. */
.window-watermark {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 132px;
  color: var(--color-accent-2);
  opacity: 0.09;
  pointer-events: none;
}
.window-watermark svg { display: block; width: 100%; height: auto; }
#window-overlay .window-body > :not(.window-watermark) { position: relative; }
#window-overlay .window-section-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--color-accent-2);
}
.window-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin-bottom: 20px;
  overflow: hidden;
  text-align: center;
  padding: 0;
  position: relative;
}
.window-media img,
.window-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-trigger {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.media-trigger:hover {
  opacity: 0.88;
}
/* Several images/videos on one entry: a small scrollable thumbnail row
   instead of one big preview. Any one of them opens the lightbox, which
   can then step through the whole set with arrows/arrow keys. */
.window-media-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 20px;
}
.window-media-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 110px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg);
}
.window-media-thumb img,
.window-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--color-text);
}
.media-play-icon svg {
  width: 34px;
  height: 34px;
}
.window-media-thumb .media-play-icon svg {
  width: 24px;
  height: 24px;
}
.window-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-accent);
  border: 1px solid var(--color-accent-soft);
  background: var(--color-accent-soft);
  padding: 5px 10px;
  border-radius: 100px;
}
.window-section-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  margin-top: 22px;
}
.window-section-title:first-of-type { margin-top: 0; }
.window-description,
.window-reflection {
  color: var(--color-text);
  font-size: 0.95rem;
}
.window-reflection {
  font-style: italic;
  color: var(--color-text-muted);
}
.window-links {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.window-downloads {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.window-download-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}
.window-download-link svg {
  width: 15px;
  height: 15px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* ==========================================================================
   Media lightbox — reuses .window-overlay/.window-modal/.window-titlebar/
   .window-close for the chrome, stacked above the project/experience
   window-modal (higher z-index) so one can open on top of the other.
   ========================================================================== */
#lightbox-overlay {
  z-index: 200;
}
.lightbox-modal {
  max-width: min(92vw, 900px);
  width: auto;
  position: relative;
}
.lightbox-titlebar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.lightbox-titlebar-actions {
  display: flex;
  gap: 14px;
}
.lightbox-action-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.lightbox-action-link:hover {
  color: var(--color-accent);
}
.lightbox-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #000;
  overflow: auto;
}
.lightbox-image,
.lightbox-video {
  display: block;
  max-width: min(88vw, 860px);
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox-pdf {
  width: min(88vw, 820px);
  height: 80vh;
  border: none;
  display: block;
}
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: rgba(20, 16, 11, 0.7);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-arrow svg { width: 18px; height: 18px; }
.lightbox-arrow:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.lightbox-arrow-prev { left: 14px; }
.lightbox-arrow-next { right: 14px; }
.lightbox-arrow[hidden] { display: none; }

@media (max-width: 720px) {
  .lightbox-arrow { width: 34px; height: 34px; }
  .lightbox-pdf { width: 90vw; height: 72vh; }
}

/* ==========================================================================
   Skills
   ========================================================================== */
.skills {
  background: var(--color-bg);
}
.skills-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 36px 56px;
}
.skills-group h3 {
  font-family: var(--font-mono);
  color: var(--color-accent);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Styled like small specimen labels — a squared-off tag with a catalog-
   style accent edge, rather than a plain rounded pill. */
.skill-tag {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 9px 16px 9px 13px;
  border-radius: 2px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent-2);
  color: var(--color-text);
  background: var(--color-surface);
}

/* ==========================================================================
   Education — deliberately compact, this section is here for completeness
   ========================================================================== */
.education {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.education-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
}
.education-entry {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}
.education-entry:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.education-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.education-institution {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-text);
  font-size: 1rem;
}
.education-dates {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.education-program {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: 2px;
}
.education-awards {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.education-awards li {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  padding-left: 16px;
  position: relative;
}
.education-awards li::before {
  content: "\2726";
  color: var(--color-accent-2);
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 0.7rem;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.contact-inner {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.contact-inner p {
  color: var(--color-text-muted);
  margin-bottom: 32px;
}
.contact-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.contact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.contact-link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
  text-decoration: none;
}
.contact-link svg { width: 18px; height: 18px; }

.site-footer {
  background: var(--color-bg);
  text-align: center;
  padding: 28px 0 40px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 720px) {
  section { padding: 64px 0; }

  .nav-links {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    padding: 16px 24px 24px;
    gap: 18px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .nav-links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-toggle { display: flex; }

  .window-body { padding: 18px; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}


/* ==========================================================================
   Project/experience windows: framed slideshow, shown immediately
   ========================================================================== */
#window-overlay .window-modal { max-width: 740px; }
.window-slideshow { margin-bottom: 24px; }
.slide-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0b0907;
  border: 4px solid #a8803a;
  outline: 1px solid #4f3816;
  box-shadow:
    inset 0 0 0 1px rgba(255, 235, 180, 0.22),
    inset 0 0 30px rgba(0, 0, 0, 0.55),
    0 10px 22px -6px rgba(0, 0, 0, 0.6);
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.slide img,
.slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.slide img.media-trigger { cursor: zoom-in; }
.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(216, 166, 87, 0.7);
  background: rgba(20, 16, 11, 0.72);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-arrow svg { width: 18px; height: 18px; }
.slide-arrow:hover { border-color: var(--color-accent-2); color: var(--color-accent-2); }
.slide-prev { left: 10px; }
.slide-next { right: 10px; }
.slide-caption {
  margin-top: 12px;
  min-height: 2.9em;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-sand);
}
.slide-fig {
  margin-right: 10px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-2);
}
.slide-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.slide-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}
.slide-dots { display: flex; gap: 8px; }
.slide-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(216, 166, 87, 0.7);
  background: transparent;
}
.slide-dot.is-active { background: var(--color-accent-2); }


/* ==========================================================================
   Project windows: a dig-site specimen label, in brown clay and stone, so
   they don't read as the gallery (green and brass) used for experiences.
   ========================================================================== */
#window-overlay.skin-dig .window-modal {
  border-radius: 6px;
  background:
    radial-gradient(ellipse 80% 38% at 50% 0%, rgba(238, 196, 146, 0.12), transparent 75%),
    linear-gradient(180deg, #3b2a1e 0%, #2c2016 55%, #241912 100%);
  box-shadow:
    inset 0 0 0 1px rgba(236, 205, 160, 0.14),
    0 0 0 5px #7b4f35,
    0 0 0 6px #35231a,
    0 30px 70px -10px rgba(0, 0, 0, 0.75);
}
#window-overlay.skin-dig .window-titlebar {
  background:
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(0, 0, 0, 0.1) 6px 7px),
    linear-gradient(180deg, #b97c55 0%, #94603f 55%, #70452d 100%);
  border-bottom: 1px solid #35231a;
  box-shadow: inset 0 1px 0 rgba(255, 226, 190, 0.35);
}
#window-overlay.skin-dig .window-titlebar .window-title {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #f6e9d2;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
#window-overlay.skin-dig .window-close {
  border-color: rgba(246, 233, 210, 0.5);
  color: #f6e9d2;
}
#window-overlay.skin-dig .window-close:hover {
  background: rgba(0, 0, 0, 0.2);
  border-color: #f6e9d2;
  color: #f6e9d2;
}
.window-specimen {
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}
#window-overlay.skin-dig .window-dates {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.92rem;
  color: var(--color-sand);
}
#window-overlay.skin-dig .window-medium span { color: var(--color-accent); }
#window-overlay.skin-dig .window-placard { border-bottom-color: rgba(201, 168, 118, 0.28); }
#window-overlay.skin-dig .window-section-title {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--color-accent);
}
#window-overlay.skin-dig .window-watermark { color: var(--color-sand); }
#window-overlay.skin-dig .slide-frame {
  border-color: #8b5a42;
  outline-color: #35231a;
  box-shadow:
    inset 0 0 0 1px rgba(236, 205, 160, 0.2),
    inset 0 0 30px rgba(0, 0, 0, 0.55),
    0 10px 22px -6px rgba(0, 0, 0, 0.6);
}
#window-overlay.skin-dig .slide-arrow { border-color: rgba(201, 168, 118, 0.7); }
#window-overlay.skin-dig .slide-arrow:hover { border-color: var(--color-accent); color: var(--color-accent); }
#window-overlay.skin-dig .slide-fig { color: var(--color-accent); }
#window-overlay.skin-dig .slide-dot { border-color: rgba(201, 168, 118, 0.7); }
#window-overlay.skin-dig .slide-dot.is-active { background: var(--color-accent); }


/* ==========================================================================
   Phones and touch screens: lighter effects and a cleaner History layout.
   The SVG lighting filters, blend modes and big drop shadows look great on
   desktop but make scrolling stutter on a phone, so they are switched off.
   ========================================================================== */
@media (max-width: 900px), (pointer: coarse) {
  .paper,
  .archive-photo .paper,
  .link-lines { filter: none; }
  .board-item {
    filter: none;
    box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.45);
  }
  .window-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8, 6, 4, 0.85);
  }
}
@media (max-width: 760px) {
  .about { overflow-x: clip; }
  .archive-wrap, .archive-board { max-width: 100%; }
  .archive-head { margin-bottom: 56px; }
  /* One column; the gaps between papers are where the arrows go. */
  .archive-items { display: flex; flex-direction: column; gap: 64px; }
  .board-item { width: 100%; }
  .archive-photo { width: 68%; }
  .side-left { align-self: flex-start; }
  .side-right { align-self: flex-end; }
  .record, .record-v0, .record-v1, .record-v2 { transform: none; }
  .archive-title, .archive-name { transform: none; }
  .archive-name { width: auto; align-self: flex-start; }
  .archive-photo.side-left { transform: rotate(-2deg); }
  .archive-photo.side-right { transform: rotate(2deg); }
  .record-card p, .record .paper p { font-size: 1rem; }
  .record-v0 .paper p { font-size: 1.3rem; --rule: 28px; }
  .record-v1 .paper p { font-size: 0.86rem; }
}

/* Pixel art stays crisp when it is scaled up. */
.slide img.pixel,
.fossil-cover.pixel { image-rendering: pixelated; }
.window-credits { color: var(--color-text-muted); font-size: 0.9rem; }

.slide-embed {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}
.slide-open {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.72rem;
  white-space: nowrap;
}

/* Reflection and credits fold under their headings. */
.window-fold { margin-top: 24px; }
.window-fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.window-fold > summary::-webkit-details-marker { display: none; }
.window-fold > summary::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: -2px 2px 0 1px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.window-fold[open] > summary::before { transform: rotate(45deg); margin-top: -4px; }
.window-fold > summary:hover { color: var(--color-accent); }
.window-fold > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }