/* Charcoal surfaces, with the portfolio's existing accent colours. */
:root {
  color-scheme: dark;
  --bg: #242424;
  --ink: #f3f0e8;
  --muted: #b8b6b0;
  --line: #494949;
  --card: #2d2d2d;
  --shadow: 0 18px 60px rgba(0, 0, 0, .18);
}

.brand-mark,
.button.primary,
.button-dark,
.skip,
.filter-button[aria-pressed=true] {
  background: var(--ink);
  color: var(--bg);
}
.site-header .nav-resume,
.site-header .nav-cta {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
}
.site-header .nav-resume:hover,
.site-header .nav-cta:hover {
  background: #ddd9d0 !important;
}
.button.secondary { background: transparent; }
.menu-toggle { color: var(--ink); }

.site-header.psr-header {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 18px !important;
}
.site-wordmark {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: block;
  width: min(100%, 300px);
  aspect-ratio: 6 / 1;
  color: #f3f0e8;
}
.site-wordmark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.psr-header .brand { grid-column: 1; grid-row: 1; }
.psr-header .menu-toggle, .psr-header .nav-links { grid-column: 3; grid-row: 1; }
@media (max-width: 820px) {
  .site-header.psr-header { gap: 8px !important; }
  .site-wordmark { width: min(100%, 240px); }
  .site-header.psr-header .nav-links { grid-column: 1 / -1; grid-row: 2; }
}
.managed-logo.logo-dark { background: #303236; border-color: #45474a; }
.managed-logo.logo-dark img { width: 52px; height: 52px; }
.managed-logo.logo-dark .logo-text-fallback { color: #f3f0e8; }
.managed-logo .logo-text-fallback { max-width: 100%; font-size: 10px; overflow-wrap: anywhere; text-align: center; }
.works-subpage #web .commercial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) {
  .works-subpage #web .commercial-grid { grid-template-columns: 1fr; }
}

.creative-section,
.about-section { background: #292929; }
.creative-grid-bg {
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
}
.creative-card,
.creative-card:nth-child(3),
.cert-card,
.education-card,
.education-section .education-grid article,
.project-note {
  background: var(--card);
  border-color: var(--line);
}
.creative-card:nth-child(2) { border-color: var(--line); }
.creative-type,
.creative-card p { color: var(--muted); opacity: 1; }
.tool-marquee span { color: var(--muted); }
.legacy-return {
  background: var(--bg) !important;
  border-color: var(--line) !important;
}

/* Keep dark lettering on the original light artwork and logo tiles. */
.web-art,
.web-browser,
.managed-logo,
.campaign-logo,
.brand-logo,
.personal-card,
.collab-pill:nth-child(3n),
.collab-pill:nth-child(4n) { color: #151515; }
.personal-card .button.primary { background: #151515; color: #fff; }
.personal-card .button.secondary { border-color: #151515; }

.brand-art {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #202020;
  border-radius: 12px;
}
.brand-art img {
  display: block;
  width: 70%;
  height: 80%;
  object-fit: contain;
}
.brand-art-insourceai, .official-logo { background: #303236; }
.brand-art-golden-wax { background: #f3f0e8; }
.brand-art-golden-wax img { width: 84%; }
.brand-art-cream { position: relative; }
.brand-art-cream img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.commercial-card .brand-art { margin-bottom: 20px; }

.tiktok-picks { grid-column: 1 / -1; }
.tiktok-picks h3 { margin: 0 0 12px; font-size: 18px; }
.hobby-grid #running { grid-column: 1 / -1; }
.hobby-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hobby-stats-grid a {
  display: grid;
  gap: 5px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.hobby-stats-grid img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.hobby-stats-grid span { color: var(--muted); font-size: 12px; }

.run-dashboard {
  --run-orange: #ffae70;
  --run-panel: #19191b;
  --run-edge: #444449;
  --run-muted: #c1bdb7;
}
.run-header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.run-header .run-source { margin: 0; color: var(--run-muted); }
.run-cluster {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
}
.run-dial, .run-trip, .run-timing {
  min-width: 0;
  background: var(--run-panel);
  border: 1px solid var(--run-edge);
  border-radius: 12px;
}
.run-dial {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 14px;
  align-content: center;
  gap: 12px;
}
.run-gauge { width: 100%; max-width: 280px; position: relative; }
.run-dial svg { display: block; width: 100%; max-width: none; }
.run-dial svg path { fill: none; }
.run-dial-track { stroke: #39393d; stroke-width: 12; }
.run-dial-ticks { stroke: #b1aaa1; stroke-width: 9; stroke-dasharray: .4 2.1; }
.run-dial-redline { stroke: #fa624e; stroke-width: 12; stroke-dasharray: 13 100; stroke-dashoffset: -86; }
.run-dial-energy { stroke: var(--run-orange); stroke-width: 4; filter: drop-shadow(0 0 3px #ff8a4670); }
.run-dial-labels { fill: var(--run-muted); font: 8px ui-monospace, monospace; letter-spacing: 1px; }
.run-pedal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid var(--run-edge);
  border-radius: 9px;
  background: #242427;
  color: var(--run-muted);
  font: 600 11px/1.4 ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: pointer;
}
.run-pedal[hidden] { display: none; }
.pedal-grip {
  width: 14px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 3px;
  transform: skewY(-12deg);
  background: repeating-linear-gradient(0deg, transparent 0 4px, currentColor 4px 5px);
}
.run-pedal:focus-visible { outline: 2px solid var(--run-orange); outline-offset: 4px; }
.run-pedal[aria-pressed="true"] { color: var(--run-orange); background: #30251f; border-color: var(--run-orange); }
.run-pedal[aria-pressed="true"] .pedal-grip { transform: skewY(0); }
.run-odometer {
  position: absolute;
  inset: 28% 8% 10%;
  display: grid;
  place-content: center;
  gap: 7px;
  text-align: center;
}
.run-odometer span, .run-trip h3 {
  color: var(--run-muted);
  font: 600 12px/1.4 ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: .075em;
}
.run-odometer strong {
  color: var(--run-orange);
  font: 700 clamp(23px, 3.2vw, 40px)/1 ui-monospace, monospace;
  white-space: nowrap;
}
.run-trip { padding: 16px; }
.run-trip h3, .run-timing-head h3 { margin: 0 0 10px; }
.run-dashboard dl { margin: 0; }
.run-dashboard dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-block: 7px;
  border-bottom: 1px solid var(--run-edge);
}
.run-dashboard dt { color: var(--run-muted); font-size: 13px; }
.run-dashboard dd {
  margin: 0;
  color: var(--run-orange);
  font: 700 14px/1.4 ui-monospace, monospace;
  white-space: nowrap;
}
.run-timing { margin-top: 12px; padding: 16px; }
.run-timing-head .eyebrow { margin: 0 0 6px; }
.run-timing dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
@media (max-width: 760px) {
  .run-cluster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .run-dial { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .run-cluster, .run-timing dl { grid-template-columns: 1fr; }
}

.hobby-tabs { margin-block: 24px; }
.hobby-tabs a[aria-current="page"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.run-header h1 {
  margin: 0;
  font-size: clamp(32px, 5vw, 54px);
  letter-spacing: -.045em;
}

.works-results { margin-top: 32px; }
.works-results h2 { font-size: 20px; }
.works-results ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
  color: var(--muted);
}
.works-results li { padding: 14px 0; border-top: 1px solid var(--line); }
.works-results strong { display: block; color: var(--ink); font-size: 24px; }
.works-subpage-title h1 {
  margin: 0;
  padding: 12px 0 22px;
  font-size: clamp(34px, 6vw, 60px);
  letter-spacing: -.05em;
}
.works-subpage > section:first-of-type { padding-top: 14px; }

body[data-page="about"] #resume { margin-top: clamp(32px, 6vw, 72px); }
.education-section .education-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1px;
}
.education-section .education-grid article + article { border-left: 0; }
.education-subheading { margin: 30px 0 14px; }
.education-section .education-grid .education-dates { color: var(--ink); }

.tiktok-profile-peek { position: relative; margin-top: 48px; }
.mascot-peek {
  position: absolute;
  inset: auto 22px 100% auto;
  width: 126px;
  height: 110px;
  pointer-events: none;
}
.mascot-peek svg { display: block; width: 100%; height: auto; }

.works-subpage .works-results { margin: 12px 0 44px; }
.pokemon-stream { grid-template-columns: minmax(0, 1fr); }
.pokemon-stream .tiktok-profile-peek { margin-top: 92px; }
.about-cartoon > img {
  width: min(100%, 340px);
  margin-inline: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 0;
}
.about-cartoon figcaption { text-align: center; }

.home-latest .section-head { align-items: baseline; }
.home-latest .section-head h2 { font-size: clamp(24px, 4vw, 38px); }
.home-latest .post-row { grid-template-columns: minmax(0, 1fr); }
.home-latest .post-number, .home-latest .post-row .circle-link { display: none; }
.about-subsections { display: grid; gap: 12px; padding-bottom: 0; }
.about-subsections details {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}
.about-subsections summary {
  cursor: pointer;
  padding: 16px 20px;
  font-size: clamp(16px, 3vw, 22px);
  font-weight: 650;
}
.about-subsections .education-grid, .about-subsections .tool-marquee {
  margin: 0 12px 12px;
}

.mascot-mark { display: block; width: 56px; height: 43px; }
.mascot-stage { text-align: center; }
.mascot-trigger {
  display: block;
  width: min(100%, 360px);
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.mascot-art { display: block; width: 100%; height: auto; }
.mascot-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.mascot-actions button {
  min-height: 44px;
  padding: 8px 14px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.mascot-actions button:hover { border-color: var(--ink); }
.mascot-reply { min-height: 1.4em; margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.mascot-arm { transform-box: view-box; transform-origin: 128px 158px; }
.mascot-flower-arm { transform-box: view-box; transform-origin: 102px 147px; }
.mascot-queen { opacity: 0; }
.mascot-stage[data-reaction="wave"] .mascot-arm { animation: mascot-wave .32s ease-in-out 6 alternate; }
.mascot-stage[data-reaction="flower"] .mascot-flower-arm {
  animation: mascot-give 1.65s ease-in-out both;
}
.mascot-stage[data-reaction="dance"] .mascot-queen { opacity: 1; }
.mascot-stage[data-reaction="dance"] .mascot-performer {
  transform-origin: 115px 218px;
  animation: mascot-dance .56s ease-in-out 4;
}
.mascot-stage[data-reaction="dance"] .mascot-arm { animation: mascot-wave .28s ease-in-out 8 alternate; }
@keyframes mascot-wave { to { transform: rotate(-24deg); } }
@keyframes mascot-give {
  25%, 70% { transform: rotate(16deg); }
}
@keyframes mascot-dance {
  25% { transform: translate(9px, -13px) rotate(-14deg); }
  65% { transform: translate(26px, -6px) rotate(13deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mascot-stage[data-reaction] .mascot-art g, .mascot-stage[data-reaction] .mascot-art path { animation: none; }
  .mascot-stage[data-reaction="wave"] .mascot-arm { transform: rotate(-24deg); }
  .mascot-stage[data-reaction="flower"] .mascot-flower-arm { transform: rotate(16deg); }
}
.mascot-foreground { transform: translateX(42px); }
.mascot-stage[data-reaction="dance"] .mascot-foreground { transform: none; }