:root {
  --ink: #26201c;
  --ink-soft: #7c6c62;
  --paper: #fffaf6;
  --card: #ffffff;
  --paper-alt: #fdf3ea;
  --line: #f2e4d8;

  --c-literary:    #c2410c;  --c-literary-br:    #f97316;  --c-literary-tt:    #ffedd5;
  --c-engineering: #4338ca;  --c-engineering-br: #6366f1;  --c-engineering-tt: #e6e6fb;
  --c-articles:    #0f766e;  --c-articles-br:    #14b8a6;  --c-articles-tt:    #d7f5f0;
  --c-poems:       #be123c;  --c-poems-br:       #f43f5e;  --c-poems-tt:       #ffe4e9;
  --c-stories:     #7c3aed;  --c-stories-br:     #a855f7;  --c-stories-tt:     #f0e6fe;
  --c-books:       #487409;  --c-books-br:       #84cc16;  --c-books-tt:       #e9f7d5;
  --c-art:         #a21caf;  --c-art-br:         #d946ef;  --c-art-tt:         #fae8ff;
  --c-music:       #0369a1;  --c-music-br:       #0ea5e9;  --c-music-tt:       #e0f2fe;
  --c-essays:      #1d4ed8;  --c-essays-br:      #3b82f6;  --c-essays-tt:      #dbeafe;
  --c-research:    #92400e;  --c-research-br:    #d97706;  --c-research-tt:    #fdead3;

  --accent: var(--c-literary);
  --accent-bright: var(--c-literary-br);
  --accent-tint: var(--c-literary-tt);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --max: 940px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 4px 20px rgb(124 80 48 / 7%);
  --shadow-lift: 0 14px 34px rgb(124 80 48 / 14%);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}


:root[data-theme="dark"] {
  --ink: #f3ece6;
  --ink-soft: #b0a49a;
  --paper: #17130f;
  --card: #211a15;
  --paper-alt: #2a221b;
  --line: #3b3027;

  --c-literary:    #fb923c;  --c-literary-tt:    #fb923c26;
  --c-engineering: #a5b4fc;  --c-engineering-br: #818cf8;  --c-engineering-tt: #a5b4fc26;
  --c-articles:    #2dd4bf;  --c-articles-tt:    #2dd4bf26;
  --c-poems:       #fb7185;  --c-poems-tt:       #fb718526;
  --c-stories:     #c4b5fd;  --c-stories-tt:     #c4b5fd26;
  --c-books:       #a3e635;  --c-books-tt:       #a3e63526;
  --c-art:         #e879f9;  --c-art-tt:         #e879f926;
  --c-music:       #38bdf8;  --c-music-tt:       #38bdf826;
  --c-essays:      #93b4fd;  --c-essays-tt:      #93b4fd26;
  --c-research:    #fbbf24;  --c-research-tt:    #fbbf2426;

  --shadow: 0 4px 20px rgb(0 0 0 / 34%);
  --shadow-lift: 0 14px 34px rgb(0 0 0 / 46%);
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(900px 520px at 82% -6%, #2b1d13 0%, rgba(43, 29, 19, 0) 62%),
    radial-gradient(720px 480px at 4% 4%, #221a14 0%, rgba(34, 26, 20, 0) 60%),
    radial-gradient(1000px 700px at 50% 108%, #16201a 0%, rgba(22, 32, 26, 0) 62%),
    var(--paper);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f3ece6;
    --ink-soft: #b0a49a;
    --paper: #17130f;
    --card: #211a15;
    --paper-alt: #2a221b;
    --line: #3b3027;

    --c-literary:    #fb923c;  --c-literary-tt:    #fb923c26;
    --c-engineering: #a5b4fc;  --c-engineering-br: #818cf8;  --c-engineering-tt: #a5b4fc26;
    --c-articles:    #2dd4bf;  --c-articles-tt:    #2dd4bf26;
    --c-poems:       #fb7185;  --c-poems-tt:       #fb718526;
    --c-stories:     #c4b5fd;  --c-stories-tt:     #c4b5fd26;
    --c-books:       #a3e635;  --c-books-tt:       #a3e63526;
    --c-art:         #e879f9;  --c-art-tt:         #e879f926;
    --c-music:       #38bdf8;  --c-music-tt:       #38bdf826;
    --c-essays:      #93b4fd;  --c-essays-tt:      #93b4fd26;
    --c-research:    #fbbf24;  --c-research-tt:    #fbbf2426;

    --shadow: 0 4px 20px rgb(0 0 0 / 34%);
    --shadow-lift: 0 14px 34px rgb(0 0 0 / 46%);
  }

  :root:not([data-theme="light"]) body {
    background:
      radial-gradient(900px 520px at 82% -6%, #2b1d13 0%, rgba(43, 29, 19, 0) 62%),
      radial-gradient(720px 480px at 4% 4%, #221a14 0%, rgba(34, 26, 20, 0) 60%),
      radial-gradient(1000px 700px at 50% 108%, #16201a 0%, rgba(22, 32, 26, 0) 62%),
      var(--paper);
  }
}

/* Which hue each page wears. */
body.s-home, body.s-literary, body.s-about
                   { --accent: var(--c-literary);    --accent-bright: var(--c-literary-br);    --accent-tint: var(--c-literary-tt); }
body.s-engineering { --accent: var(--c-engineering); --accent-bright: var(--c-engineering-br); --accent-tint: var(--c-engineering-tt); }
body.s-articles    { --accent: var(--c-articles);    --accent-bright: var(--c-articles-br);    --accent-tint: var(--c-articles-tt); }
body.s-poems       { --accent: var(--c-poems);       --accent-bright: var(--c-poems-br);       --accent-tint: var(--c-poems-tt); }
body.s-stories     { --accent: var(--c-stories);     --accent-bright: var(--c-stories-br);     --accent-tint: var(--c-stories-tt); }
body.s-books       { --accent: var(--c-books);       --accent-bright: var(--c-books-br);       --accent-tint: var(--c-books-tt); }
body.s-art         { --accent: var(--c-art);         --accent-bright: var(--c-art-br);         --accent-tint: var(--c-art-tt); }
body.s-music       { --accent: var(--c-music);       --accent-bright: var(--c-music-br);       --accent-tint: var(--c-music-tt); }
body.s-essays      { --accent: var(--c-essays);      --accent-bright: var(--c-essays-br);      --accent-tint: var(--c-essays-tt); }
body.s-research    { --accent: var(--c-research);    --accent-bright: var(--c-research-br);    --accent-tint: var(--c-research-tt); }

/* Cards borrow the hue of wherever they lead. */
.k-literary  { --card-accent: var(--c-literary); }
.k-engineering { --card-accent: var(--c-engineering); }
.k-articles  { --card-accent: var(--c-articles); }
.k-poems     { --card-accent: var(--c-poems); }
.k-stories   { --card-accent: var(--c-stories); }
.k-books     { --card-accent: var(--c-books); }
.k-art       { --card-accent: var(--c-art); }
.k-music     { --card-accent: var(--c-music); }
.k-essays    { --card-accent: var(--c-essays); }
.k-research  { --card-accent: var(--c-research); }

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 520px at 82% -6%, #ffe9d5 0%, rgba(255, 233, 213, 0) 62%),
    radial-gradient(720px 480px at 4% 4%, #fdf0e2 0%, rgba(253, 240, 226, 0) 60%),
    radial-gradient(1000px 700px at 50% 108%, #f3f6e6 0%, rgba(243, 246, 230, 0) 62%),
    var(--paper);
  background-attachment: fixed;
}

h1, h2, h3, .brand { font-family: var(--font-serif); letter-spacing: -0.01em; }
a { color: var(--accent); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Shared surfaces ----------
   Everything that sits on the page as a raised white card. */
.card, .piece, .book, .achievement, .design, .art-piece, .recording,
.highlight, .project, .elsewhere, .qa, .piece-nav a {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Lift on hover, but only where there is a real pointer: phones fire
   :hover on tap and it sticks. */
@media (hover: hover) and (pointer: fine) {
  .card:hover, .achievement:hover, .design:hover,
  .art-piece:hover, .recording:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
  }

  .piece:hover, .book:hover, .highlight:hover, .piece-nav a:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
  }

  .piece h2 a:hover, .back-link:hover, .site-footer a:hover,
  .detail a.d-value:hover, .detail .d-value a:hover { color: var(--accent); }

  nav.main-nav a:hover { color: var(--ink); background: var(--accent-tint); }
  .sub-nav a:hover, .tab-labels label:hover { color: var(--ink); }
  .qa summary:hover { color: var(--accent); }
  .search-results a:hover { background: var(--paper-alt); }
  .pub-list a:hover, .design .design-files a:hover { text-decoration: underline; }
  .icon-btn:hover { color: var(--accent); border-color: var(--accent); }

  .channel-link a:hover, .send-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
  }
}

.card, .achievement, .design, .art-piece, .recording, .piece, .book,
.highlight, .piece-nav a {
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}

.channel-link a, .send-btn {
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

.icon-btn {
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out),
              transform 200ms var(--ease-out);
}

.card:active { transform: scale(0.99); }
.channel-link a:active, .send-btn:active { transform: scale(0.98); }
.icon-btn:active { transform: scale(0.94); }

/* ---------- Shared labels ----------
   Small uppercase text. The first group sits in a tinted pill, the
   second is bare. */
.pill, .piece .meta, .book .author, article.prose .byline {
  display: inline-block;
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 999px;
}

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; padding: 5px 13px; }
.piece .meta, .book .author { font-size: 0.72rem; padding: 4px 12px; margin: 0 0 12px; }
article.prose .byline { font-size: 0.72rem; padding: 5px 13px; margin: 0 0 30px; }

.col-label, .timeline .when, .piece-nav .dir, .search-results .s-kind,
.design .design-meta, .fill .fill-label {
  display: block;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.col-label { font-size: 0.72rem; letter-spacing: 0.08em; margin-bottom: 12px; }
.timeline .when { font-size: 0.74rem; margin-bottom: 4px; }
.piece-nav .dir { font-size: 0.72rem; margin-bottom: 6px; }
.search-results .s-kind { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 4px; }
.design .design-meta { font-size: 0.74rem; margin-bottom: 10px; }

/* Unfilled placeholder text, wherever it appears. */
.empty { font-style: italic; color: var(--ink-soft); }
.project h3.empty { font-weight: 700; }
.design .design-meta.empty, .timeline .when.empty {
  font-style: normal;
  color: var(--ink-soft);
}
.recording-body .meta.empty, .piece p.empty { font-style: normal; }

/* ---------- Header and navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand { font-size: 1.2rem; font-weight: 700; text-decoration: none; color: var(--ink); }
.brand span { color: var(--accent); }

nav.main-nav ul, .sub-nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  flex-wrap: wrap;
}

nav.main-nav ul { gap: 8px; padding: 0; }
.sub-nav ul { gap: 6px; padding: 10px 0; }

nav.main-nav a, .sub-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
  border-radius: 999px;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}

nav.main-nav a { font-size: 0.92rem; padding: 7px 14px; }
.sub-nav { border-bottom: 1px solid var(--line); }
.sub-nav a { font-size: 0.88rem; padding: 6px 13px; }

nav.main-nav a.active, .sub-nav a.active { color: var(--accent); background: var(--accent-tint); }

.header-tools { display: flex; align-items: center; gap: 6px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
}

.icon-btn svg { width: 17px; height: 17px; }

/* One theme glyph at a time. */
.icon-btn .moon { display: none; }
:root[data-theme="dark"] .icon-btn .moon { display: block; }
:root[data-theme="dark"] .icon-btn .sun { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .moon { display: block; }
  :root:not([data-theme="light"]) .icon-btn .sun { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 44px;
  align-items: center;
  padding: 72px 0 56px;
}

.portrait {
  display: block;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card);
  box-shadow: var(--shadow-lift);
}

.hero h1 { font-size: 3.4rem; line-height: 1.04; margin: 16px 0 4px; font-weight: 700; }
.hero p.pill { margin: 0 0 4px; }
.hero .tagline { color: var(--accent); font-weight: 600; font-size: 0.98rem; margin: 0 0 20px; }
.hero p:not(.pill) { margin: 0 0 14px; color: var(--ink-soft); font-size: 1.05rem; }

/* ---------- Page and section headings ---------- */
.section { padding: 46px 0; border-top: 1px solid var(--line); }
.section h2 { font-size: 1.9rem; margin: 0 0 6px; }
.section .section-note { color: var(--ink-soft); margin: 0 0 28px; }
.more-note { margin-top: 26px; font-size: 0.94rem; }

.section-intro { max-width: 62ch; margin: 26px 0 40px; color: var(--ink-soft); font-size: 1.04rem; }
.section-intro p { margin: 0 0 16px; }

.page-head { padding: 56px 0 4px; }
.page-head h1 { font-size: 2.8rem; margin: 12px 0 10px; font-weight: 700; }
.page-head > p:not(.pill) { color: var(--ink-soft); margin: 0; max-width: 58ch; font-size: 1.06rem; }

.big-head { text-align: center; margin: 60px 0 44px; }
main.wrap > .big-head:first-of-type { margin-top: 48px; }
.big-head .pill { margin-bottom: 16px; }
.big-head h2 { font-size: 2.6rem; margin: 0 0 14px; font-weight: 700; }
.big-head h2 span { color: var(--accent); }
.big-head > p { color: var(--ink-soft); margin: 0 auto; max-width: 54ch; }

.big-head h2::after {
  content: "";
  display: block;
  width: 84px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 2px;
  background: var(--accent-bright);
}

.section-banner {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top: 34px;
}

.section-banner + .page-head { padding-top: 30px; }

/* ---------- Buttons and links ---------- */
.channel-link { margin-top: 26px; }

.channel-link a, .send-btn {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  border-radius: 999px;
  font-weight: 600;
  box-shadow: var(--shadow);
}

.channel-link a { display: inline-block; text-decoration: none; padding: 13px 26px; font-size: 0.92rem; }

.send-btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  padding: 14px 26px;
  font: inherit;
  font-weight: 600;
}

.send-btn svg { width: 17px; height: 17px; }

.back-link {
  display: inline-block;
  margin-top: 32px;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
}

/* ---------- Card grids ---------- */
.cards, .achievements, .design-grid, .gallery, .recordings {
  display: grid;
  gap: 24px;
}

.cards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.achievements { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 76px; }
.design-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: 20px; }
.gallery { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 20px; }
.recordings { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 20px; }

@media (min-width: 720px) {
  .cards.cards-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

main.wrap > .cards:last-of-type { margin-bottom: 76px; }

.card { display: block; overflow: hidden; text-decoration: none; color: inherit; }
.card-media { display: block; width: 100%; aspect-ratio: 800 / 340; object-fit: cover; }
.card-body { padding: 20px 24px 24px; }
.card h3 { margin: 0 0 8px; font-size: 1.3rem; color: var(--card-accent, var(--accent)); }
.card p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }

.card .go {
  display: inline-block;
  margin-top: 16px;
  color: var(--card-accent, var(--accent));
  font-size: 0.86rem;
  font-weight: 600;
}

/* Cards that carry a picture: achievements, CAD models, artwork. */
.achievement, .design, .art-piece, .recording { overflow: hidden; }
.design, .art-piece { margin: 0; }

.achievement .shot, .design img, .art-piece img {
  display: block;
  width: 100%;
  object-fit: cover;
  background: var(--paper-alt);
}

.achievement .shot { aspect-ratio: 16 / 10; }
.design img, .art-piece img { aspect-ratio: 4 / 3; }

.achievement .body { padding: 20px 22px 24px; }
.achievement h3 { font-size: 1.12rem; margin: 0 0 8px; }
.achievement p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }

/* A highlight with no photo spans the row and holds a list. */
.achievement.wide { grid-column: 1 / -1; }
.achievement.wide .body { padding: 26px 28px 28px; }

.design figcaption { padding: 18px 22px 22px; }
.design .design-title { display: block; font-weight: 700; font-size: 1.06rem; margin-bottom: 3px; }
.design .design-note { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }

.art-piece figcaption { padding: 16px 20px 20px; }
.art-piece .art-title { display: block; font-weight: 600; margin-bottom: 3px; }
.art-piece .art-meta { display: block; color: var(--ink-soft); font-size: 0.86rem; }

.recording-body { padding: 18px 22px 22px; }
.recording-body h3 { font-size: 1.15rem; margin: 0 0 10px; }

/* A downloadable file under a card. */
.design .design-files { margin: 12px 0 0; font-size: 0.9rem; }
.design .design-files a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; text-decoration: none; }

.design .design-files a::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px) scale(0.8);
}

/* ---------- Listings ---------- */
.piece-list, .book-list { list-style: none; margin: 30px 0 76px; padding: 0; }
.piece, .book { padding: 26px 28px; margin-bottom: 18px; }
.piece h2, .book h2 { font-size: 1.35rem; margin: 0 0 10px; }
.piece h2 a { text-decoration: none; color: var(--ink); }
.piece .summary, .book .reason { margin: 0; color: var(--ink-soft); }

/* The featured list on the home page borrows each piece's own hue. */
.featured-list { margin: 0 0 8px; }
.featured-list .meta { background: var(--card-accent-tint, var(--accent-tint)); color: var(--card-accent, var(--accent)); }
.featured-list .piece h2 a:hover { color: var(--card-accent, var(--accent)); }

.meta.k-articles { --card-accent: var(--c-articles); --card-accent-tint: var(--c-articles-tt); }
.meta.k-poems    { --card-accent: var(--c-poems);    --card-accent-tint: var(--c-poems-tt); }
.meta.k-stories  { --card-accent: var(--c-stories);  --card-accent-tint: var(--c-stories-tt); }
.meta.k-books    { --card-accent: var(--c-books);    --card-accent-tint: var(--c-books-tt); }
.meta.k-art      { --card-accent: var(--c-art);      --card-accent-tint: var(--c-art-tt); }
.meta.k-music    { --card-accent: var(--c-music);    --card-accent-tint: var(--c-music-tt); }
.meta.k-essays   { --card-accent: var(--c-essays);   --card-accent-tint: var(--c-essays-tt); }

/* ---------- Reading pages ---------- */
article.prose {
  max-width: 40rem;
  margin: 0 auto 76px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 46px 52px 52px;
}

article.prose h1 { font-size: 2.3rem; line-height: 1.15; margin: 0 0 12px; font-weight: 700; }
article.prose h2 { font-size: 1.4rem; margin: 34px 0 14px; }

/* The writing itself reads better in the serif. */
article.prose p, article.prose li {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  line-height: 1.72;
}

article.prose p { margin: 0 0 20px; }
article.prose ul { margin: 0 0 20px; padding-left: 1.3em; }
article.prose li { margin-bottom: 8px; }
article.prose p.block { color: var(--ink-soft); }
article.prose.poem { max-width: 34rem; }
article.prose.poem .stanza { margin: 0 0 30px; line-height: 1.85; }

article.prose .end-mark {
  color: var(--accent-bright);
  text-align: center;
  letter-spacing: 0.6em;
  margin: 40px 0 0;
}

/* Cited sources, and the note saying where a piece was published.
   Both step out of the serif back into the interface font. */
article.prose ol.sources { margin: 0 0 22px; padding-left: 1.4em; }

article.prose ol.sources li {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

article.prose p.published-note {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--ink-soft);
}

article.prose ol.sources li { margin-bottom: 12px; }
.sources .src-what { font-style: italic; color: var(--ink); }
.sources .src-use { display: block; font-size: 0.86rem; opacity: 0.85; }

/* Moving between pieces. */
.piece-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 40rem;
  margin: 0 auto 76px;
}

.piece-nav a { display: block; text-decoration: none; padding: 18px 22px; }

.piece-nav .name {
  display: block;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.35;
}

.piece-nav .next { text-align: right; }
.piece-nav .next-placeholder { visibility: hidden; }

/* ---------- Projects, tabs and video ---------- */
.tabs { margin-bottom: 76px; }
.tabs > input { position: absolute; opacity: 0; pointer-events: none; }

.tab-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 26px;
}

.tab-labels label {
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}

/* Pair each hidden radio with its own label and panel by position.
   They cannot be adjacent siblings, so `+` will not do. */
.tabs > input:nth-of-type(1):checked ~ .tab-labels > label:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ .tab-labels > label:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ .tab-labels > label:nth-of-type(3),
.tabs > input:nth-of-type(4):checked ~ .tab-labels > label:nth-of-type(4),
.tabs > input:nth-of-type(5):checked ~ .tab-labels > label:nth-of-type(5),
.tabs > input:nth-of-type(6):checked ~ .tab-labels > label:nth-of-type(6) {
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  border-color: transparent;
  color: #fff;
}

.tabs > input:nth-of-type(1):focus-visible ~ .tab-labels > label:nth-of-type(1),
.tabs > input:nth-of-type(2):focus-visible ~ .tab-labels > label:nth-of-type(2),
.tabs > input:nth-of-type(3):focus-visible ~ .tab-labels > label:nth-of-type(3),
.tabs > input:nth-of-type(4):focus-visible ~ .tab-labels > label:nth-of-type(4),
.tabs > input:nth-of-type(5):focus-visible ~ .tab-labels > label:nth-of-type(5),
.tabs > input:nth-of-type(6):focus-visible ~ .tab-labels > label:nth-of-type(6) {
  outline: 3px solid var(--accent-bright);
  outline-offset: 3px;
}

.panel { display: none; }

.tabs > input:nth-of-type(1):checked ~ .panels > .panel:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ .panels > .panel:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ .panels > .panel:nth-of-type(3),
.tabs > input:nth-of-type(4):checked ~ .panels > .panel:nth-of-type(4),
.tabs > input:nth-of-type(5):checked ~ .panels > .panel:nth-of-type(5),
.tabs > input:nth-of-type(6):checked ~ .panels > .panel:nth-of-type(6) { display: block; }

.project { padding: 32px 34px; }
.project h3 { font-size: 1.7rem; margin: 0 0 12px; }
.project .lede { color: var(--ink-soft); margin: 0 0 20px; max-width: 62ch; }
.project .links { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 22px; }
.project .links a { text-decoration: none; font-size: 0.9rem; font-weight: 600; color: var(--accent); }

.project-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}


.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }

.tags li {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* A 16:9 frame for an embedded video. */
.video {
  position: relative;
  padding-top: 56.25%;
  background: var(--paper-alt);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.recording .video { border-radius: 0; border: 0; }

/* Shown until a real video ID replaces it. */
.video-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-style: italic;
}

/* Build clips are portrait phone recordings, so they sit side by side
   at a fixed height rather than stretching to the column. */
.clips { display: flex; flex-wrap: wrap; gap: 18px; margin: 4px 0 0; }
.clip { margin: 0; max-width: 100%; }

.clip video {
  display: block;
  height: 340px;
  width: auto;
  max-width: 100%;
  border-radius: var(--radius-sm);
  background: #000;
  box-shadow: var(--shadow);
}

.clip figcaption { margin-top: 8px; color: var(--ink-soft); font-size: 0.88rem; }

/* ---------- Fill-in placeholders ----------
   A slot waiting for real text. Replace the whole <div class="fill">
   with your own paragraphs and the dashed styling goes with it. */
.fill {
  border: 2px dashed var(--accent-bright);
  background: var(--accent-tint);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 0 0 20px;
}

.fill .fill-label {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.fill p { margin: 0 0 10px; color: var(--ink-soft); font-size: 0.97rem; }
.fill p:last-child { margin-bottom: 0; }
.fill .hint { font-style: italic; opacity: 0.85; font-size: 0.9rem; }
.fill code {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.88em;
}

/* ---------- About: prose beside highlight cards ---------- */
.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-bottom: 30px;
}

.about-split .prose-col p { color: var(--ink-soft); margin: 0 0 18px; }
.about-split .prose-col strong { color: var(--ink); font-weight: 600; }
.about-split .prose-col .hl { color: var(--accent); font-weight: 600; }

.highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.highlight { padding: 24px 20px; text-align: center; }
.highlight svg { width: 30px; height: 30px; color: var(--accent); margin-bottom: 12px; }
.highlight .h-title { display: block; font-weight: 700; font-size: 1.02rem; margin-bottom: 3px; }
.highlight .h-sub { display: block; color: var(--ink-soft); font-size: 0.86rem; }
.highlight .empty { font-weight: 500; }

/* A dated list: school years, competitions, build sessions. */
.timeline { list-style: none; margin: 0 0 20px; padding: 0; }
.timeline li { position: relative; padding: 0 0 24px 30px; border-left: 2px solid var(--line); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }

.timeline li::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-bright);
  border: 3px solid var(--paper);
}

.timeline .what { display: block; font-weight: 600; margin-bottom: 4px; }
.timeline .detail { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }

/* Question and answer. */
.qa-list { max-width: 68ch; margin: 0 0 20px; }
.qa { margin-bottom: 14px; overflow: hidden; }

.qa summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  list-style: none;
  transition: color 200ms var(--ease-out);
}

.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: -3px; }

.qa summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 220ms var(--ease-out);
}

.qa[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }

/* Collapse the answer ourselves; some engines get <details> wrong. */
.qa:not([open]) .answer { display: none; }
.qa .answer { padding: 0 22px 22px; color: var(--ink-soft); }
.qa .answer p { margin: 0 0 14px; }
.qa .answer p:last-child, .qa .answer .fill { margin-bottom: 0; }

/* ---------- Get in touch ---------- */
.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 76px;
}

.contact-details { display: grid; gap: 26px; padding-top: 6px; }
.detail { display: flex; align-items: flex-start; gap: 14px; }

.detail .ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  background: var(--accent-tint);
  color: var(--accent);
}

.detail .ic svg { width: 18px; height: 18px; }
.detail .d-label { display: block; font-weight: 700; margin-bottom: 2px; }

.detail .d-value, .detail a.d-value, .detail .d-value a {
  display: block;
  color: var(--ink-soft);
  text-decoration: none;
  word-break: break-word;
}

.contact-form { display: grid; gap: 14px; }

.contact-form input, .contact-form textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 18px;
  outline: none;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form ::placeholder { color: var(--ink-soft); opacity: 1; }

.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.contact-form .invalid, .form-note.error { border-color: #dc2626; color: #dc2626; }
.form-note { margin: 2px 0 0; color: var(--ink-soft); font-size: 0.9rem; min-height: 1.2em; }

/* ---------- Elsewhere, publications ---------- */
.elsewhere { padding: 32px 34px 36px; margin: 8px 0 76px; }
.elsewhere h2 { font-size: 1.4rem; margin: 0 0 8px; }
.elsewhere p { color: var(--ink-soft); margin: 0 0 14px; max-width: 58ch; }
.elsewhere .channel-link { margin-top: 20px; }

.pub-list { list-style: none; margin: 16px 0 0; padding: 0; }
.pub-list li { border-top: 1px solid var(--line); padding: 12px 0; }
.pub-list li:last-child { padding-bottom: 0; }
.pub-list a { font-weight: 600; text-decoration: none; }
.pub-list .pub-date { display: block; color: var(--ink-soft); font-size: 0.84rem; margin-top: 2px; }

/* ---------- Search ---------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgb(20 14 10 / 46%);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  padding: 12vh 20px 20px;
}

.search-overlay[hidden] { display: none; }

.search-box {
  width: 100%;
  max-width: 620px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.search-field svg { width: 19px; height: 19px; color: var(--accent); flex: none; }

.search-field input {
  flex: 1;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.02rem;
  outline: none;
  min-width: 0;
}

.search-close {
  border: 1px solid var(--line);
  background: var(--paper-alt);
  color: var(--ink-soft);
  border-radius: 7px;
  padding: 4px 9px;
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}

.search-results { overflow-y: auto; padding: 8px; }

.search-results a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
}

.search-results a.on { background: var(--accent-tint); }

.search-results .s-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.04rem;
  margin-bottom: 2px;
}

.search-results .s-text {
  display: -webkit-box;
  color: var(--ink-soft);
  font-size: 0.87rem;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

.search-empty { color: var(--ink-soft); padding: 20px 14px; margin: 0; font-size: 0.94rem; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 30px 0 48px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.site-footer a { color: var(--ink-soft); }
.site-status { display: inline-flex; align-items: center; gap: 8px; }

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgb(34 197 94 / 22%);
  flex: none;
}

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: 90px 0 100px; }
.notfound h1 { font-size: 3.2rem; margin: 16px 0 12px; }
.notfound p { color: var(--ink-soft); margin: 0 auto 26px; max-width: 46ch; }

/* ---------- Keyboard access ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

main:focus { outline: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The placeholder graphics are drawn light; dim them in dark mode.
   Scoped to those files, so real photos are untouched. */
:root[data-theme="dark"] img[src$="photo-placeholder.svg"],
:root[data-theme="dark"] img[src$="portrait-placeholder.svg"] {
  filter: brightness(0.26) saturate(0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img[src$="photo-placeholder.svg"],
  :root:not([data-theme="light"]) img[src$="portrait-placeholder.svg"] {
    filter: brightness(0.26) saturate(0.7);
  }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 820px) {
  .about-split, .contact-split { grid-template-columns: 1fr; }
  .about-split { gap: 28px; }
  .contact-split { gap: 32px; }
  .project { padding: 26px 22px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 48px; gap: 28px; }
  .portrait { margin: 0 auto; width: 190px; height: 190px; }
  .hero h1 { font-size: 2.5rem; }
  .page-head h1 { font-size: 2.1rem; }
  .section-banner { height: 140px; }
  .site-header .wrap, nav.main-nav ul { justify-content: center; }
  article.prose { padding: 32px 26px 38px; }
  .search-overlay { padding-top: 6vh; }
}

@media (max-width: 620px) {
  .piece-nav { grid-template-columns: 1fr; }
  .piece-nav .next { text-align: left; }
  .piece-nav .next-placeholder { display: none; }
}

@media (max-width: 520px) {
  .clip video { height: 300px; }
}

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

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .qa summary::after { transition: none; }

  .card, .card:hover, .card:active, .piece:hover, .book:hover,
  .achievement:hover, .design:hover, .art-piece:hover, .recording:hover,
  .highlight:hover, .piece-nav a:hover,
  .channel-link a, .channel-link a:hover, .channel-link a:active,
  .send-btn:hover, .send-btn:active {
    transition: box-shadow 200ms ease;
    transform: none;
  }
}

/* ---------- Print: the writing, nothing else ---------- */
@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .site-header, .sub-nav, .skip-link, .back-link,
  .piece-nav, .site-footer, .section-banner, .end-mark { display: none; }

  article.prose {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
  }

  article.prose .byline { background: none; color: #444; padding: 0; }
  a { text-decoration: none; color: #000; }
}