/* /assets/css/site.css */
:root {
  --page: #f6f7f4;
  --surface: #ffffff;
  --surface-muted: #e9eeec;
  --text: #172126;
  --text-muted: #556268;
  --line: #c8d1cf;
  --line-strong: #84938f;
  --accent: #007b78;
  --accent-strong: #005c5a;
  --signal: #e0a821;
  --focus: #006ce5;
  --header-bg: #f6f7f4;
  --shadow: 0 12px 30px rgba(27, 42, 46, 0.1);
  --shadow-raised: 0 22px 52px rgba(27, 42, 46, 0.14);
  --motion-fast: 180ms;
  --motion-medium: 360ms;
  --premium-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --type-body-line-height: 1.68;
  --type-body-letter-spacing: 0.003em;
  --type-body-weight: 430;
  --type-project-line-height: 1.72;
  --type-project-letter-spacing: 0.002em;
  --type-project-weight: 440;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --page: #111618;
  --surface: #1b2225;
  --surface-muted: #20292b;
  --text: #edf2ef;
  --text-muted: #abb7b5;
  --line: #354245;
  --line-strong: #718180;
  --accent: #51cbc3;
  --accent-strong: #7be2db;
  --signal: #f1c654;
  --focus: #69aaff;
  --header-bg: #111618;
  --shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
  --shadow-raised: 0 24px 58px rgba(0, 0, 0, 0.42);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-letter-spacing);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible, canvas:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
h1 { margin-bottom: 16px; font-size: clamp(2.9rem, 7vw, 6.5rem); font-weight: 720; }
h2 { margin-bottom: 18px; font-size: clamp(2rem, 4vw, 3.7rem); font-weight: 680; }
h3 { margin-bottom: 10px; font-size: 1.25rem; }

.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;
}
.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 9px 14px;
  background: var(--text);
  color: var(--page);
}
.skip-link:focus { transform: translateY(0); }
/* Skip-link and in-page menu targets receive programmatic focus only. */
:is(#main-content, main section)[tabindex="-1"]:focus { outline: none; }
.content-shell { width: min(1180px, calc(100% - 56px)); margin-inline: auto; }

html.reveal-enabled .reveal-item {
  /* Content stays readable even when a fast scroll outruns the observer. */
  opacity: 0.85;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 240ms var(--premium-ease) var(--reveal-delay, 0ms),
    transform 300ms var(--premium-ease) var(--reveal-delay, 0ms),
    border-color var(--motion-medium) ease,
    box-shadow var(--motion-medium) var(--premium-ease);
  will-change: opacity, transform;
}
html.reveal-enabled .reveal-item.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
}
.nav-shell {
  width: min(1280px, calc(100% - 40px));
  min-height: 64px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 24px;
}
.site-identity { display: inline-flex; align-items: center; gap: 10px; width: fit-content; font-weight: 700; text-decoration: none; transition: color var(--motion-fast) ease; }
.identity-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-medium) ease;
}
.site-navigation { display: flex; align-items: center; justify-content: center; gap: 26px; }
.site-navigation a { position: relative; color: var(--text-muted); font-size: 0.9rem; font-weight: 620; text-decoration: none; transition: color var(--motion-fast) ease; }
.site-navigation a::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  background: var(--accent);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--motion-medium) var(--premium-ease);
}
.site-navigation a:hover { color: var(--text); }
.site-navigation a:hover::after, .site-navigation a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
/* Project pages: a way back to the projects grid, beside the menu button. */
.nav-back-link { grid-column: 2; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.nav-back-link:hover > span:last-child, .nav-back-link:focus-visible > span:last-child { text-decoration: underline; text-underline-offset: 4px; }
.icon-button { display: none; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--text); }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 21px; height: 2px; background: currentColor; content: ""; }
.menu-icon { position: relative; margin: auto; }
.menu-icon::before { position: absolute; top: -7px; }
.menu-icon::after { position: absolute; top: 7px; }

.hero-section { min-height: calc(100vh - 64px); max-height: 920px; display: grid; align-items: center; border-bottom: 1px solid var(--line); }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.65fr); align-items: center; gap: clamp(48px, 8vw, 120px); padding-block: 72px; }
.eyebrow, .section-index { margin-bottom: 16px; color: var(--accent-strong); font-size: 0.76rem; font-weight: 760; text-transform: uppercase; }
.hero-role { margin-bottom: 22px; color: var(--signal); font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 660; }
.hero-introduction { max-width: 670px; margin-bottom: 32px; color: var(--text-muted); font-size: clamp(1.05rem, 1.6vw, 1.28rem); }
.hero-links { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-weight: 700;
  text-decoration: none;
}
.text-link::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.35;
  transform: scaleX(0.28);
  transform-origin: left;
  transition: opacity var(--motion-fast) ease, transform var(--motion-medium) var(--premium-ease);
}
.text-link:hover::after, .text-link:focus-visible::after { opacity: 0.9; transform: scaleX(1); }
.text-link > span { transition: transform var(--motion-medium) var(--premium-ease); }
.text-link:hover > span { transform: translateX(4px); }
.text-link[href$="#projects"]:hover > span { transform: translateX(-4px); }
.text-link-primary { color: var(--accent-strong); }
.portrait-frame { margin: 0; aspect-ratio: 4 / 5; max-height: 620px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface-muted); }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }

.page-section { padding-block: clamp(80px, 10vw, 144px); border-bottom: 1px solid var(--line); }
.section-muted { background: var(--surface-muted); }
.two-column-section, .contact-layout { display: grid; grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.4fr); gap: clamp(48px, 9vw, 140px); }
.section-body { max-width: 720px; }
body:not(.persona-design) .education-honors { margin: 0 0 1em; padding: 0; list-style: none; }
.prose { color: var(--text-muted); font-size: 1.08rem; line-height: var(--type-project-line-height); }
.prose p:last-child { margin-bottom: 36px; }
.section-body h3 { margin-top: 36px; font-size: 0.82rem; text-transform: uppercase; }
.tag-list, .technology-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.tag-list li, .technology-list li { border: 1px solid var(--line-strong); padding: 5px 10px; color: var(--text-muted); font-size: 0.8rem; }
.section-header { display: grid; grid-template-columns: 1fr minmax(280px, 0.8fr); align-items: end; gap: 56px; margin-bottom: 56px; }
.section-header > p { max-width: 560px; margin-bottom: 8px; color: var(--text-muted); }

.experience-list { border-top: 1px solid var(--line-strong); }
.experience-item {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(28px, 6vw, 80px);
  margin-inline: -16px;
  padding: 38px 16px;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--motion-medium) ease, box-shadow var(--motion-medium) ease;
}
.experience-meta { display: flex; flex-direction: column; color: var(--text-muted); font-size: 0.82rem; }
.experience-meta time { color: var(--text); font-weight: 720; }
.experience-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.experience-heading p { margin-bottom: 4px; color: var(--accent-strong); font-size: 0.8rem; font-weight: 760; text-transform: uppercase; }
.experience-heading h3 { margin-bottom: 18px; }
.achievement-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: 999px;
  padding: 6px 11px 6px 9px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent-strong);
  font-size: 0.7rem;
  font-weight: 760;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 30%, transparent);
}
.achievement-badge::before { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); content: ""; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.experience-content ul { display: grid; gap: 8px; max-width: 800px; margin: 0; padding-left: 20px; color: var(--text-muted); }

.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.project-card {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  isolation: isolate;
  transition: border-color var(--motion-fast) ease, transform var(--motion-medium) var(--premium-ease);
}
.project-card::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  box-shadow: var(--shadow-raised);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-medium) var(--premium-ease);
}
.project-card-featured { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); grid-template-rows: none; }
.project-media { position: relative; min-height: 240px; overflow: hidden; background: #10191c; }
.project-playable-badge {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  padding: 7px 10px;
  background: var(--accent-strong);
  color: var(--surface);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.project-media :is(picture, .project-screen) { display: block; width: 100%; height: 100%; }
.project-media :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transform: translateZ(0) scale(1);
  transition: transform 700ms var(--premium-ease);
}
.project-media img.project-image-logo {
  object-fit: contain;
  padding: clamp(24px, 4vw, 48px);
}
.project-media-placeholder { display: grid; min-height: 240px; aspect-ratio: 16 / 10; place-content: center; justify-items: center; gap: 9px; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 32px 32px; color: var(--text-muted); }
.project-media-placeholder span { display: grid; width: 72px; height: 72px; place-items: center; border: 1px solid var(--line-strong); background: var(--surface); color: var(--accent-strong); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 1.25rem; font-weight: 760; }
.project-media-placeholder small, .project-draft-label { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.65rem; font-weight: 680; letter-spacing: 0.07em; text-transform: uppercase; }
.project-content { display: flex; flex-direction: column; padding: 30px; }
/* Persona-only numbered card label; hidden in the original design by default. */
.project-file-index { display: none; }
.project-content > p {
  color: var(--text-muted);
  font-weight: var(--type-project-weight);
  letter-spacing: var(--type-project-letter-spacing);
  line-height: var(--type-project-line-height);
}
.collaborator-byline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  width: fit-content;
  gap: 8px;
  margin: 8px 0 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 12px 6px 7px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.25;
}
.collaborator-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  font-size: 0.88rem;
  font-weight: 800;
}
.collaborator-byline a { color: var(--accent-strong); font-weight: 760; }
.collaborator-byline-card { margin: 0 0 14px; }
.collaborator-byline-multiple { border-radius: 16px; }
.collaborator-byline-multiple > a, .collaborator-byline-multiple > span:not(.collaborator-icon) { white-space: nowrap; }
.collaborator-byline-multiple > a + a, .collaborator-byline-multiple > span + span { margin-left: 2px; }
.project-content > .collaborator-byline { color: var(--text-muted); }
.project-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 24px; font-weight: 700; }
.project-links a { position: relative; text-decoration: none; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) var(--premium-ease); }
.project-links .source-link::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--motion-medium) var(--premium-ease);
}
.project-links .source-link:hover::after, .project-links .source-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.project-demo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--accent);
  padding: 9px 13px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent-strong);
  line-height: 1.25;
}
.project-demo-link span { transition: transform var(--motion-medium) var(--premium-ease); }
.project-demo-link:hover, .project-demo-link:focus-visible { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); transform: translateY(-2px); }
.project-demo-link:hover span, .project-demo-link:focus-visible span { transform: translateX(4px); }
.source-link { color: var(--text-muted); }
.source-link-pending { display: inline-flex; align-items: baseline; gap: 6px; cursor: default; }
.source-link-pending small { color: var(--text-muted); font-size: 0.62rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.project-draft-label { color: var(--text-muted); }

.case-study { overflow: clip; }
.case-study-hero { padding: clamp(64px, 9vw, 120px) 0 0; border-bottom: 1px solid var(--line); }
.case-study-hero-copy { max-width: 920px; padding-bottom: clamp(40px, 6vw, 72px); }
.case-study-hero h1 { max-width: 980px; font-size: clamp(3rem, 7.5vw, 7.1rem); }
.case-study-summary { max-width: 780px; margin: 24px 0 0; color: var(--text-muted); font-size: clamp(1.12rem, 2vw, 1.42rem); line-height: 1.55; }
.case-study-hero-media { width: min(1440px, 100%); margin: 0 auto; overflow: hidden; border: 1px solid var(--line-strong); border-bottom: 0; background: var(--surface-muted); }
.case-study-hero-media img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.case-study-hero-media figcaption { padding: 11px 16px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 0.76rem; }
.case-study-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 760px); justify-content: center; align-items: start; gap: clamp(52px, 8vw, 116px); padding-block: clamp(72px, 10vw, 140px); }
.case-study-meta { position: sticky; top: 94px; border-top: 2px solid var(--accent); border-bottom: 1px solid var(--line); padding: 22px 0; }
.case-study-meta dl { display: grid; gap: 20px; margin: 0; }
.case-study-meta div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
.case-study-meta dt { color: var(--text-muted); font-size: 0.68rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; }
.case-study-meta dd { margin: 0; font-size: 0.88rem; font-weight: 650; line-height: 1.45; }
.case-study-collaborators { display: grid; gap: 5px; }
.case-study-collaborators a { color: var(--accent-strong); text-underline-offset: 3px; }
.case-study-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.case-study-tools li { border: 1px solid var(--line); padding: 3px 7px; color: var(--text-muted); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.68rem; font-weight: 650; }
.case-study-source { display: inline-flex; gap: 8px; margin-top: 24px; color: var(--accent-strong); font-size: 0.82rem; font-weight: 740; text-decoration: none; }
.case-study-prose { min-width: 0; color: var(--text-muted); font-size: clamp(1rem, 1.3vw, 1.08rem); font-weight: var(--type-project-weight); letter-spacing: var(--type-project-letter-spacing); line-height: 1.78; }
.case-study-prose > :first-child { margin-top: 0; }
.case-study-prose h2, .case-study-prose h3, .case-study-prose h4 { color: var(--text); }
.case-study-prose h2 { margin: 72px 0 24px; padding-top: 24px; border-top: 1px solid var(--line); font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.case-study-prose h3 { margin: 44px 0 16px; font-size: clamp(1.25rem, 2.2vw, 1.65rem); }
.case-study-prose h4 { margin: 32px 0 12px; font-size: 0.8rem; letter-spacing: 0.07em; text-transform: uppercase; }
.case-study-prose p { margin-bottom: 24px; }
.case-study-prose ul, .case-study-prose ol { display: grid; gap: 9px; margin: 0 0 28px; padding-left: 1.35em; }
.case-study-prose li::marker { color: var(--accent); font-weight: 760; }
.case-study-prose blockquote { margin: 40px 0; border-left: 3px solid var(--accent); padding: 4px 0 4px 24px; color: var(--text); font-size: clamp(1.12rem, 2vw, 1.32rem); font-weight: 560; line-height: 1.55; }
.case-study-prose blockquote p:last-child { margin-bottom: 0; }
.case-study-prose img { width: 100%; height: auto; margin: 38px 0 12px; border: 1px solid var(--line-strong); background: var(--surface-muted); }
.case-study-prose .case-study-wide-image { position: relative; left: 50%; width: min(1040px, calc(100vw - 56px)); max-width: none; transform: translateX(-50%); }
.case-study-prose .case-study-wide-image img { margin: 0; }
.case-study-prose em.image-caption { display: block; margin: -2px 0 36px; color: var(--text-muted); font-size: 0.76rem; font-style: normal; }
.case-study-prose code { border: 1px solid var(--line); padding: 0.12em 0.35em; background: var(--surface-muted); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.86em; }
.case-study-prose pre { max-width: 100%; margin: 32px 0; overflow-x: auto; border: 1px solid var(--line); padding: 20px; background: var(--surface-muted); }
.case-study-prose pre code { border: 0; padding: 0; background: transparent; }
.case-study-prose table { width: 100%; margin: 32px 0; border-collapse: collapse; font-size: 0.88rem; }
.case-study-prose th, .case-study-prose td { border-bottom: 1px solid var(--line); padding: 11px 12px; text-align: left; vertical-align: top; }
.case-study-prose th { color: var(--text); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }

.writing-list { border-top: 1px solid var(--line-strong); }
.writing-item { display: grid; grid-template-columns: 190px minmax(0, 1fr) 44px; gap: 32px; align-items: start; padding-block: 30px; border-bottom: 1px solid var(--line); }
.writing-meta { display: flex; flex-direction: column; color: var(--text-muted); font-size: 0.82rem; }
.writing-item h3 a { text-decoration: none; }
.writing-item p { max-width: 700px; margin-bottom: 0; color: var(--text-muted); }
.arrow-link { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); color: var(--accent-strong); text-decoration: none; }

.contact-section { background: var(--surface); }
.contact-message { max-width: 720px; font-size: clamp(1.45rem, 3vw, 2.35rem); line-height: 1.3; }
.contact-links { margin-top: 0; }
.contact-email-link { display: block; width: fit-content; max-width: 100%; color: var(--accent-strong); font-size: clamp(1.1rem, 2.5vw, 1.55rem); font-weight: 750; overflow-wrap: anywhere; }
.contact-secondary-links { display: grid; gap: 20px; margin-top: 24px; }
.contact-link-row { display: flex; align-items: center; gap: clamp(12px, 2vw, 20px); min-width: 0; width: fit-content; max-width: 100%; text-decoration: none; }
.contact-link-icon { display: grid; place-items: center; flex: 0 0 clamp(44px, 5vw, 64px); width: clamp(44px, 5vw, 64px); aspect-ratio: 1; border-radius: 50%; background: var(--palette-olive, #474b32); }
.contact-link-icon svg { width: 52%; height: 52%; fill: #fff; }
.contact-link-address { min-width: 0; overflow-wrap: anywhere; font-size: clamp(1rem, 1.6vw, 1.3rem); line-height: 1.4; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.contact-secondary-links a { color: var(--accent-strong); font-weight: 700; text-decoration-thickness: 1px; transition: color var(--motion-fast) ease, text-underline-offset var(--motion-fast) ease; }
.contact-email-link:hover, .contact-secondary-links a:hover { color: var(--text); text-underline-offset: 7px; }
.site-footer { padding-block: 30px; background: var(--text); color: var(--page); }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; }
.footer-inner p { margin: 0; font-size: 0.82rem; }
.error-section { min-height: calc(100vh - 180px); display: grid; align-items: center; }
.error-section p:not(.eyebrow) { color: var(--text-muted); }

.laser-intro { padding-block: clamp(56px, 9vw, 108px); border-bottom: 1px solid var(--line); }
.laser-intro-layout { display: grid; grid-template-columns: 1fr minmax(300px, 0.85fr); gap: clamp(48px, 8vw, 110px); align-items: end; }
.laser-intro-layout > *, .game-heading-row > *, .game-status-bar > * { min-width: 0; }
.laser-intro h1 { margin-bottom: 0; font-size: clamp(3.2rem, 8vw, 7rem); }
.laser-description { font-size: 1.2rem; font-weight: var(--type-project-weight); line-height: var(--type-project-line-height); }
.laser-objective { color: var(--text-muted); font-weight: var(--type-project-weight); letter-spacing: var(--type-project-letter-spacing); line-height: var(--type-project-line-height); }
.laser-play-section { padding-block: clamp(48px, 7vw, 84px); background: var(--page); color: var(--text); }
.laser-shell { width: min(980px, calc(100% - 40px)); margin-inline: auto; }
.game-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.game-heading-row h2 { margin-bottom: 0; font-size: 2rem; }
.game-heading-row .section-index { color: var(--accent-strong); }
.game-actions { display: flex; gap: 8px; }
.game-action-button, .control-group button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.game-action-button,
.control-group button,
.dk-jump-button {
  transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) var(--premium-ease);
}
.game-action-button:hover, .control-group button:hover { border-color: var(--accent); color: var(--accent-strong); transform: translateY(-1px); }
.game-action-button:active, .control-group button:active, .dk-jump-button:active { transform: translateY(1px); }
.pause-symbol { width: 14px; height: 16px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.is-paused .pause-symbol { width: 0; height: 0; border: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid currentColor; }
.reset-symbol { font-size: 1.55rem; line-height: 1; }
.game-status-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-bottom: 0; background: var(--surface); }
.game-status-bar > div { display: flex; align-items: baseline; justify-content: space-between; min-width: 0; gap: 8px; padding: 12px 15px; border-right: 1px solid var(--line); }
.game-status-bar > div:last-child { border-right: 0; }
.game-status-bar span { color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; }
.game-status-bar strong { white-space: nowrap; font-size: 0.92rem; }
.keyboard-guide {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  background: var(--surface-muted);
  color: var(--text-muted);
}
.keyboard-guide > strong {
  flex: 0 0 auto;
  color: var(--accent-strong);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.67rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.keyboard-guide ul { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.keyboard-guide li { display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; white-space: nowrap; }
.keyboard-guide kbd {
  min-width: 26px;
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 18%, transparent);
}
.imu-keyboard-guide { width: min(100% - 48px, 1180px); margin: 0 auto; border-bottom: 1px solid var(--line-strong); }
.game-board-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; border: 1px solid #536164; background: #10191c; color: #edf2ef; overflow: hidden; contain: layout paint; isolation: isolate; }
.game-board { display: block; width: 100%; height: 100%; image-rendering: pixelated; cursor: crosshair; }
.game-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 20px; padding: 32px; background-color: rgba(8, 13, 15, 0.88); background-image: var(--result-art); background-repeat: no-repeat; background-position: center 28%; background-size: min(62%, 400px) auto; text-align: center; }
.game-overlay[hidden] { display: none; }
.game-pause-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgba(8, 8, 8, .72);
}
.game-pause-overlay button {
  padding: 16px 26px;
  border: 2px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.game-pause-overlay[hidden] { display: none; }
.game-overlay strong { max-width: 520px; margin-top: clamp(80px, 22%, 170px); font-size: clamp(1.3rem, 3vw, 2.2rem); }
.game-overlay button { border: 1px solid #58d7cf; padding: 9px 16px; background: #58d7cf; color: #0e1416; font-weight: 700; cursor: pointer; }
.game-controls { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; margin-top: 16px; }
.control-group { display: grid; grid-template-columns: repeat(2, 44px); gap: 8px; }
.control-group button { font-size: 1.35rem; }
.game-message { margin: 0; color: var(--text-muted); text-align: center; }
.game-implementation-note {
  margin: 18px 0 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-align: right;
}
.laser-notes .section-body > p { color: var(--text-muted); font-weight: var(--type-project-weight); letter-spacing: var(--type-project-letter-spacing); line-height: var(--type-project-line-height); }
.project-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 38px; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line); }
.project-metrics > div { min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px; background: color-mix(in srgb, var(--surface) 58%, transparent); }
.project-metrics dt { color: var(--accent-strong); font-size: clamp(1.28rem, 2.7vw, 1.8rem); font-weight: 760; letter-spacing: -0.025em; line-height: 1; }
.project-metrics dd { margin: 7px 0 0; color: var(--text-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.25; text-transform: uppercase; }
.laser-notes .section-body > h3 { margin: 42px 0 12px; color: var(--text); font-size: 0.78rem; letter-spacing: 0.065em; text-transform: uppercase; }
.dk-intro h1 { font-size: clamp(2.8rem, 7vw, 6.2rem); }
.dk-play-section { background: var(--page); }
.dk-status-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dk-controls { grid-template-columns: auto 1fr auto; }
.dk-move-controls { grid-template-columns: repeat(2, 52px); }
.dk-move-controls button { width: 52px; }
.dk-jump-button {
  display: inline-flex;
  min-width: 104px;
  height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.dk-jump-button:hover { border-color: var(--accent); color: var(--accent-strong); transform: translateY(-1px); }
.dk-overlay { background: rgba(0, 0, 0, 0.84); }
.dk-overlay strong { margin-top: 0; color: #ffff00; }

.imu-intro h1 { font-size: clamp(2.8rem, 7vw, 6.2rem); }
.imu-demo-section { overflow: hidden; background: var(--page); color: var(--text); }
.imu-demo-heading,
.imu-toolbar,
.imu-axis-controls {
  width: min(1160px, calc(100% - 48px));
  margin-inline: auto;
}
.imu-demo-heading {
  display: flex;
  min-height: 132px;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding-block: 34px 24px;
}
.imu-demo-heading h2 { margin: 0; font-size: 2rem; }
.imu-demo-heading .section-index { margin-bottom: 7px; color: var(--accent-strong); }
.imu-live-readouts { display: flex; align-items: flex-end; gap: 34px; }
.imu-mode-readout,
.imu-gravity-readout { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.imu-mode-readout > span,
.imu-gravity-readout > span { color: var(--text-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.imu-mode-readout strong { min-width: 90px; text-align: right; }
.imu-gravity-readout strong { display: flex; align-items: baseline; gap: 7px; }
.imu-gravity-readout b { width: 20px; color: var(--accent-strong); font-size: 1.25rem; text-align: center; }
.imu-gravity-readout small { color: var(--text-muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.imu-toolbar {
  display: flex;
  min-height: 82px;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  border-block: 1px solid var(--line);
}
.imu-toolbar-groups { display: flex; min-width: 0; align-items: end; gap: 34px; }
.imu-toolbar-group > span { display: block; padding: 8px 12px 0; color: var(--text-muted); font-size: 0.66rem; font-weight: 750; text-transform: uppercase; }
.imu-mode-control,
.imu-planet-control { display: flex; min-width: 0; overflow-x: auto; }
.imu-mode-control button,
.imu-planet-control button,
.imu-reset-button {
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 700;
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) var(--premium-ease);
}
.imu-mode-control button { position: relative; min-width: 92px; padding: 0 17px; }
.imu-planet-control button { position: relative; min-width: 86px; padding: 4px 13px 2px; line-height: 1.1; }
.imu-planet-control button small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 0.65rem; font-variant-numeric: tabular-nums; }
.imu-mode-control button::after,
.imu-planet-control button::after {
  position: absolute;
  right: 17px;
  bottom: 2px;
  left: 17px;
  height: 2px;
  background: transparent;
  content: "";
}
.imu-mode-control button:hover,
.imu-mode-control button.is-active,
.imu-planet-control button:hover,
.imu-planet-control button.is-active { color: var(--accent-strong); }
.imu-mode-control button.is-active::after,
.imu-planet-control button.is-active::after { background: var(--accent); }
.imu-reset-button { flex: 0 0 44px; width: 44px; padding: 0; font-size: 1.55rem; }
.imu-reset-button:hover { color: var(--accent-strong); transform: rotate(-12deg); }
.imu-scene {
  position: relative;
  width: 100%;
  height: clamp(520px, 68vh, 760px);
  background-color: #101313;
  background-image:
    linear-gradient(rgba(85, 130, 122, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 130, 122, 0.12) 1px, transparent 1px);
  background-size: 42px 42px;
  contain: layout paint;
  isolation: isolate;
}
.imu-scene-status {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  margin: 0;
  place-items: center;
  padding: 24px;
  background: #101313;
  color: #9db0ad;
  text-align: center;
}
.imu-scene-status[hidden] { display: none; }
.imu-scene-status.is-error { color: #ff9a9a; }
.imu-webgl-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.imu-webgl-canvas:active { cursor: grabbing; }
.imu-world-axes {
  position: absolute;
  bottom: 18px;
  left: 18px;
  z-index: 2;
  width: 104px;
  padding: 8px 8px 7px;
  border: 1px solid rgba(220, 239, 235, 0.2);
  background: rgba(6, 12, 12, 0.76);
  color: #bed0cc;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}
.imu-world-axes svg { display: block; width: 100%; height: auto; overflow: visible; }
.imu-axis-line { stroke-width: 2.5; }
.imu-axis-line.is-y { stroke: #70c98b; }
.imu-axis-line.is-z { stroke: #6fa9ff; }
.imu-axis-arrow.is-y { fill: #70c98b; }
.imu-axis-arrow.is-z { fill: #6fa9ff; }
.imu-axis-x-ring { fill: rgba(232, 99, 99, 0.12); stroke: #e86363; stroke-width: 2; }
.imu-axis-x-dot { fill: #e86363; }
.imu-world-axes text { font: 800 12px/1 sans-serif; }
.imu-world-axes text.is-x { fill: #e86363; }
.imu-world-axes text.is-y { fill: #70c98b; }
.imu-world-axes text.is-z { fill: #6fa9ff; }
.imu-css-stage { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1100px; overflow: hidden; }
.imu-css-stage::before,
.imu-css-stage::after {
  position: absolute;
  z-index: 0;
  background-image:
    linear-gradient(rgba(82, 145, 134, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82, 145, 134, 0.32) 1px, transparent 1px);
  background-size: 44px 44px;
  content: "";
  pointer-events: none;
}
.imu-css-stage::before { inset: 0; opacity: 0.48; }
.imu-css-stage::after {
  right: -15%;
  bottom: -37%;
  left: -15%;
  height: 68%;
  opacity: 0.7;
  transform: rotateX(66deg);
  transform-origin: center top;
}
.imu-css-device {
  position: relative;
  z-index: 1;
  width: min(55vw, 700px);
  aspect-ratio: 6.9 / 3.85;
  border: 10px solid #075649;
  background: #064f43;
  box-shadow: 0 26px 34px rgba(0, 0, 0, 0.38), inset 0 4px 0 #177668;
  transform-style: preserve-3d;
  touch-action: none;
  cursor: grab;
  will-change: transform;
}
.imu-css-device:active { cursor: grabbing; }
.imu-css-screen { position: absolute; inset: 10% 7%; padding: 3.5%; background: #050707; box-shadow: inset 0 0 0 4px #0b1010; transform: translateZ(8px); }
.imu-css-screen canvas { display: block; width: 100%; height: 100%; background: #00110f; image-rendering: pixelated; }
.imu-css-screw { position: absolute; z-index: 2; width: 18px; height: 18px; border-radius: 50%; background: #91a09d; box-shadow: inset -3px -3px 0 #53615f; transform: translateZ(12px); }
.imu-css-screw.is-top-left { top: 3%; left: 2%; }
.imu-css-screw.is-top-right { top: 3%; right: 2%; }
.imu-css-screw.is-bottom-left { bottom: 3%; left: 2%; }
.imu-css-screw.is-bottom-right { right: 2%; bottom: 3%; }
.imu-css-pins { position: absolute; bottom: -34px; left: calc(50% - 28px); width: 56px; height: 32px; background: repeating-linear-gradient(90deg, #9aa7a5 0 7px, transparent 7px 13px); transform: translateZ(-2px); }
.imu-axis-controls {
  display: block;
  padding-block: 28px 46px;
  border-top: 1px solid var(--line);
}
.imu-implementation-note { width: min(720px, 100%); margin: 18px auto 0; }
.imu-axis-controls fieldset { width: min(720px, 100%); min-width: 0; margin: 0 auto; padding: 0; border: 0; }
.imu-axis-controls legend { margin-bottom: 14px; color: var(--accent-strong); font-size: 0.76rem; font-weight: 760; text-transform: uppercase; }
.imu-axis-control {
  display: grid;
  grid-template-columns: 46px minmax(80px, 1fr) 58px;
  min-height: 38px;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 650;
}
.imu-axis-control output { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.imu-axis-control input { width: 100%; accent-color: var(--accent); cursor: pointer; }
.imu-axis-control input:focus-visible { outline: 3px solid #69aaff; outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .site-identity:hover { color: var(--accent-strong); }
  .site-identity:hover .identity-mark { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); }
  .experience-item:hover { background: color-mix(in srgb, var(--surface) 58%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
  .project-card, .project-media :is(img, video) { will-change: transform; }
  .project-card::after { will-change: opacity; }
  html.reveal-enabled .project-card.is-revealed { will-change: transform; }
  .project-card:hover,
  html.reveal-enabled .project-card.is-revealed:hover { border-color: var(--line-strong); transform: translate3d(0, -5px, 0); }
  .project-card:hover::after { opacity: 1; }
  .project-card:hover .project-media :is(img, video) { transform: translateZ(0) scale(1.025); }
}

@media (max-width: 1080px) {
  .nav-shell { grid-template-columns: 1fr auto; }
  .site-navigation {
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--header-bg);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity 240ms ease, transform 360ms var(--premium-ease), visibility 0s linear 360ms;
  }
  .site-navigation a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .site-navigation a::after { display: none; }
  .navigation-open .site-navigation { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; transition-delay: 0s; }
  .nav-menu-button { display: block; justify-self: end; }
  .hero-section { min-height: auto; max-height: none; }
  .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(220px, 0.55fr); gap: 42px; padding-block: 64px; }
  .project-card-featured { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .laser-intro-layout { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .content-shell { width: min(100% - 32px, 1160px); }
  .nav-shell { width: calc(100% - 28px); }
  .site-identity > span:last-child { display: none; }
  .hero-layout { grid-template-columns: 1fr; padding-block: 48px; }
  .hero-copy { order: 2; }
  .portrait-frame { order: 1; width: min(72vw, 300px); max-height: none; }
  h1 { font-size: clamp(2.65rem, 15vw, 4.5rem); overflow-wrap: anywhere; }
  .two-column-section, .contact-layout, .section-header { grid-template-columns: 1fr; gap: 24px; }
  .experience-item { grid-template-columns: 1fr; gap: 16px; }
  .experience-meta { flex-direction: row; justify-content: space-between; gap: 16px; }
  .experience-heading { display: block; }
  .achievement-badge { display: inline-flex; margin-bottom: 16px; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card-featured { grid-column: auto; }
  .project-media { min-height: 190px; }
  .project-content { padding: 22px; }
  .case-study-hero { padding-top: 48px; }
  .case-study-hero-media { border-inline: 0; }
  .case-study-hero-media img { aspect-ratio: 4 / 3; }
  .case-study-layout { grid-template-columns: 1fr; gap: 52px; padding-block: 64px; }
  .case-study-meta { position: static; }
  .case-study-prose h2 { margin-top: 56px; }
  .case-study-prose .case-study-wide-image { width: calc(100vw - 32px); }
  .writing-item { grid-template-columns: 1fr 40px; gap: 16px; }
  .writing-meta { grid-column: 1 / -1; flex-direction: row; gap: 14px; }
  .footer-inner { flex-direction: column; }
  .laser-shell { width: calc(100% - 24px); }
  .game-status-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-status-bar > div { padding-inline: 10px; }
  .game-status-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .game-status-bar > div:nth-child(2) { border-right: 0; }
  .game-status-bar > div:nth-child(-n+2) { border-bottom: 1px solid #536164; }
  .keyboard-guide { align-items: flex-start; gap: 10px; }
  .keyboard-guide ul { gap: 8px 12px; }
  .keyboard-guide li { white-space: normal; }
  .imu-keyboard-guide { width: calc(100% - 24px); }
  .game-controls { grid-template-columns: 1fr 1fr; }
  .game-message { grid-column: 1 / -1; grid-row: 1; min-height: 48px; }
  .control-group:first-child { justify-self: start; }
  .control-group:last-child { justify-self: end; }
  .dk-status-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dk-status-bar > div { border-bottom: 0 !important; }
  .dk-status-bar > div:nth-child(2) { border-right: 1px solid #536164; }
  .dk-controls { grid-template-columns: 1fr auto; }
  .dk-controls .game-message { grid-column: 1 / -1; }
  .dk-jump-button { justify-self: end; }
  .imu-demo-heading,
  .imu-toolbar,
  .imu-axis-controls { width: calc(100% - 24px); }
  .imu-demo-heading { min-height: 120px; align-items: start; flex-direction: column; justify-content: end; gap: 12px; }
  .imu-live-readouts { width: 100%; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .imu-mode-readout,
  .imu-gravity-readout { align-items: flex-start; }
  .imu-mode-readout strong { min-width: 0; text-align: left; }
  .imu-gravity-readout small { display: block; }
  .imu-mode-control button { min-width: 70px; padding-inline: 7px; }
  .imu-mode-control button::after { right: 7px; left: 7px; }
  .imu-toolbar { align-items: end; }
  .imu-toolbar-groups { display: block; overflow-x: auto; }
  .imu-toolbar-group { width: max-content; }
  .imu-toolbar-group + .imu-toolbar-group { margin-top: 4px; }
  .imu-planet-control button { min-width: 82px; }
  .imu-scene { height: min(62vh, 520px); min-height: 410px; }
  .imu-css-device { width: min(84vw, 520px); }
  .imu-axis-controls { grid-template-columns: 1fr; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .reveal-item { opacity: 1 !important; transform: none !important; }
}

/* /assets/css/ribbon-menu.css */
/* Persona 4-inspired pause menu.
   Ribbon geometry and opening/closing motion: ribbon-menu.js. */

body .site-header,
body #site-navigation.ribbon-navigation {
  --ribbon-transparent: transparent;
  --ribbon-yellow: #FBFF2D;
  --ribbon-lemon: #FCFF89;
  --ribbon-gold: #F9E121;
  --ribbon-amber: #F4A006;
  --ribbon-orange: #F0850C;
  --ribbon-red: #BE0000;

  --ribbon-lime: #B5EE0A;
  --ribbon-green: #698612;
  /* Muted olive */
  --ribbon-cyan: #50F0FA;
  /* Thin cyan accent */

  --ribbon-violet: #91960E;
  /* Replace purple with olive */
  --ribbon-indigo: #FAD147;
  /* Replace blue with gold */
  --ribbon-teal: #FBF567;
  /* Replace teal with pale yellow */

  --ribbon-honey: #F7C017;
  --ribbon-tangerine: #DA5608;
  --ribbon-white: #F3F3F5;
  --ribbon-charcoal: #242222;
  /* Keep compatibility with existing ribbon animation code. */
  --ribbon-indigo: #433BD4;
  --ribbon-teal: #43D9BE;
  --ribbon-honey: #F7C017;
  --ribbon-tangerine: #DB5108;

  --menu-left: clamp(24px, 23vw, 360px);
  --menu-width: clamp(270px, 30vw, 420px);
}

body .site-header .nav-menu-button {
  display: block;
  grid-column: 3;
  grid-row: 1;
}

/* Full-height column positioned like the reference menu. */
body #site-navigation.ribbon-navigation {
  position: fixed;
  z-index: 200;

  inset: 0 auto auto var(--menu-left);
  width: var(--menu-width);
  height: 100dvh;
  max-height: none;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;

  padding: 32px 28px;

  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;

  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;

  pointer-events: none;
  isolation: isolate;
}

body #site-navigation.ribbon-navigation[hidden] {
  display: none;
}

/* Align the animation canvas with the viewport.
   Clip at the screen edges, not at the narrow menu column. */
body #site-navigation.ribbon-navigation .menu-ribbons {
  position: absolute;
  top: 0;
  left: calc(0px - var(--menu-left));

  width: 100vw;
  height: 100%;
  overflow: hidden;

  z-index: -1;
  pointer-events: none;
}

/* The core bands' half-sine lobes drift slowly upward. One lobe length per
   loop; ribbon-menu.js draws an extra lobe beyond the screen, so it repeats
   seamlessly. Transforms on SVG content use viewBox units. */
body #site-navigation.ribbon-navigation .menu-wave-drift {
  animation: menu-wave-drift 40s linear infinite;
}

@keyframes menu-wave-drift {
  to { transform: translateY(calc(-1px * var(--wave-length))); }
}

@media (prefers-reduced-motion: reduce) {
  body #site-navigation.ribbon-navigation .menu-wave-drift { animation: none; }
}

/* Match the section-topic font face and spacing, retaining the menu outline. */
body #site-navigation.ribbon-navigation a {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: fit-content;
  max-width: 100%;

  padding: 3px 0;
  margin: 0;
  margin-inline-start: 30px;
  border: 0;
  border-radius: 0;

  background: transparent !important;
  box-shadow: none !important;
  color: var(--ribbon-charcoal) !important;

  font-family: 'Persona Slim Wide', 'Persona Slim Local', Arial, sans-serif;
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: 0.02em;

  -webkit-text-stroke: 5px var(--ribbon-white);
  paint-order: stroke fill;

  text-shadow: none;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;

  transform: none;
  transition: none;
  pointer-events: none;
}

body.navigation-open #site-navigation.ribbon-navigation a {
  pointer-events: auto;
}

body #site-navigation.ribbon-navigation a::before,
body #site-navigation.ribbon-navigation a::after {
  display: none;
}

/* Keep row spacing stable: smaller idle words, larger selected words. */
body #site-navigation.ribbon-navigation .menu-word {
  display: block;
  transform: scale(.75);
  transform-origin: left center;
  transition: transform 150ms cubic-bezier(.16, 1, .3, 1);
}

/* Keep one word enlarged, anchored at the shared left edge. */
body #site-navigation.ribbon-navigation a[data-menu-selected="true"] {
  z-index: 2;
}

body #site-navigation.ribbon-navigation a[data-menu-selected="true"] .menu-word {
  transform: scale(1.15);
}

body #site-navigation.ribbon-navigation a:focus-visible {
  outline: none;
}

/* Slide the chrome with the ribbon timeline; layout stays in place. */
body .site-header {
  translate: 0 calc(-110% * var(--menu-chrome-progress, 0));
}

body #site-navigation.ribbon-navigation .ribbon-menu-close {
  position: fixed;
  top: 16px;
  right: max(20px, calc((100vw - 1280px) / 2));
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--ribbon-white);
  border-radius: 50%;
  background: var(--ribbon-charcoal) !important;
  color: var(--ribbon-white) !important;
  box-shadow: none !important;
  font: 700 28px/1 Arial, sans-serif;
  pointer-events: auto;
  cursor: pointer;
}

body #site-navigation.ribbon-navigation .ribbon-menu-close:focus-visible {
  outline: 3px solid var(--ribbon-yellow);
  outline-offset: 4px;
}

/* Smaller screens: retain the left column and room for enlarged words. */
@media (max-width: 540px) {

  body .site-header,
  body #site-navigation.ribbon-navigation {
    --menu-left: 6vw;
    --menu-width: min(82vw, 340px);
  }

  body #site-navigation.ribbon-navigation {
    padding-inline: 25px;
    gap: 5px;
  }

  body #site-navigation.ribbon-navigation a {
    font-size: clamp(28px, 7.8vw, 40px);
    -webkit-text-stroke-width: 4px;
  }

  body #site-navigation.ribbon-navigation a[data-menu-selected="true"] .menu-word {
    transform: scale(1.15);
  }
}

@media (max-height: 500px) {
  body #site-navigation.ribbon-navigation {
    justify-content: flex-start;
    padding-block: 24px;
    gap: 2px;
    overflow-y: auto;
  }

  body #site-navigation.ribbon-navigation a {
    font-size: 26px;
    line-height: 1.12;
    -webkit-text-stroke-width: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body #site-navigation.ribbon-navigation .menu-word {
    transition: none;
  }
}

/* Secondary keyboard instructions; no card or interactive hit area. */
body #site-navigation.ribbon-navigation .menu-input-hints {
  position: absolute;
  right: 24px;
  bottom: max(5px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 16px;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 0;
  color: var(--ribbon-charcoal);
  font: 700 12px/1.2 'Persona Hints Bold', Arial, sans-serif;
  -webkit-text-stroke: 3px var(--ribbon-white);
  paint-order: stroke fill;
  transform: none;
  pointer-events: none;
}

body #site-navigation.ribbon-navigation .menu-input-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transform: rotate(-17deg);
  transform-origin: left bottom;
}

body #site-navigation.ribbon-navigation .menu-input-hint kbd {
  display: inline-grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  min-width: 26px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 2px solid var(--ribbon-white);
  border-radius: 50%;
  outline: none;
  color: var(--ribbon-white);
  background: var(--ribbon-charcoal);
  box-shadow: none;
  font: 700 8px/1 Arial, sans-serif;
  -webkit-text-stroke: 0;
}

body #site-navigation.ribbon-navigation .menu-input-hint .menu-hint-arrow {
  width: 26px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
}

@media (max-width: 540px),
(max-height: 700px) {
  body #site-navigation.ribbon-navigation .menu-input-hints {
    left: 50%;
    right: auto;
    bottom: max(5px, env(safe-area-inset-bottom));
    flex-direction: row;
    gap: 10px;
    font-size: 12px;
    transform: translateX(-50%);
    -webkit-text-stroke-width: 2px;
  }

  body #site-navigation.ribbon-navigation .menu-input-hint {
    gap: 3px;
  }

  body #site-navigation.ribbon-navigation .menu-input-hint kbd {
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    font-size: 8px;
  }

  body #site-navigation.ribbon-navigation .menu-input-hint .menu-hint-arrow {
    width: 26px;
    font-size: 15px;
  }
}

@media (any-hover: none) and (any-pointer: coarse) {
  body #site-navigation.ribbon-navigation .menu-input-hints {
    display: none;
  }
}
/* Compact idle rows; make space on both sides of the selected word.
   Link transforms are separate from the ribbon's inline `translate` animation. */
body #site-navigation.ribbon-navigation {
  --menu-neighbor-shift: .2em;
  gap: 0;
}
body #site-navigation.ribbon-navigation a {
  padding-block: 0;
  margin-block: -.075em;
  transition: transform 160ms cubic-bezier(.16, 1, .3, 1);
}
body #site-navigation.ribbon-navigation a:has(~ a[data-menu-selected="true"]) {
  transform: translateY(calc(-1 * var(--menu-neighbor-shift)));
}
body #site-navigation.ribbon-navigation a[data-menu-selected="true"] ~ a {
  transform: translateY(var(--menu-neighbor-shift));
}
@media (prefers-reduced-motion: reduce) {
  body #site-navigation.ribbon-navigation a { transition: none; }
}
/* A stable two-line slot keeps selection changes from moving the menu words. */
body #site-navigation.ribbon-navigation .menu-selection-description {
  flex: 0 0 auto;
  width: 100%;
  min-height: 2.8em;
  margin: 24px 0 0;
  padding: 0;
  color: var(--ribbon-charcoal);
  font: 700 14px/1.4 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  text-align: center;
  text-wrap: balance;
  -webkit-text-stroke: 2px var(--ribbon-white);
  paint-order: stroke fill;
  pointer-events: none;
}
@media (max-height: 500px) {
  body #site-navigation.ribbon-navigation .menu-selection-description {
    margin-top: 12px;
    font-size: 12px;
  }
}

/* /assets/themes/persona/style.css */
/* Local alternate theme. Change these four colors to retheme the entire design.
   Wipe duration is milliseconds, consumed by interface.js. */
@font-face {
  font-family: 'Persona Slim Local';
  src: url('/assets/themes/persona/fonts/slim-latin.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E;
}

@font-face {
  font-family: 'Persona Slim Wide';
  src: url('/assets/themes/persona/fonts/slim-latin-wide.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E;
}

@font-face {
  font-family: 'Persona Slim Wide';
  src: url('/assets/themes/persona/fonts/slim-latin-wide-bold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E;
}

:root,
:root[data-theme="dark"] {
  --persona-yellow: #ffe348;
  --persona-sky: #67cef6;
  --persona-ink: #132938;
  --persona-paper: #fffdf3;
  --wipe-first: var(--persona-sky);
  --wipe-second: var(--persona-ink);
  --wipe-third: var(--persona-yellow);
  --wipe-duration: 550;
  /* Each panel's movement, in milliseconds. */
  --wipe-stagger: 80;
  /* Delay between the three panels, in milliseconds. */
  /* Menu-only approximation of the supplied P4G screenshot. */
  --menu-font: 'Persona Slim Wide', 'Persona Slim Local', Arial, sans-serif;
  --menu-font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  --menu-outline: 2.5px;
  --page: var(--persona-paper);
  --surface: #fffef9;
  --surface-muted: #dff3fb;
  --text: var(--persona-ink);
  --text-muted: #405462;
  --line: #acbdc5;
  --line-strong: var(--persona-ink);
  --accent: #096387;
  --accent-strong: #075575;
  --signal: var(--persona-ink);
  --header-bg: var(--persona-paper);
  --focus: #075575;
  --shadow-raised: 0.4375rem 0.4375rem 0 var(--persona-ink);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --page: #132938;
  --surface: #203b4a;
  --surface-muted: #294959;
  --text: #fffdf3;
  --text-muted: #d0e2e9;
  --line: #587784;
  --line-strong: #88d7f7;
  --accent: var(--persona-sky);
  --accent-strong: var(--persona-sky);
  --header-bg: #132938;
  --focus: var(--persona-yellow);
  color-scheme: dark;
}

.persona-design {
  font-weight: 450;
}

.persona-design h1,
.persona-design h2,
.persona-design h3 {
  font-family: 'Persona Slim Local', 'Arial Black', Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -.025em;
}

/* Section topics: true 150% glyph widths preserve wrapping and letter hover. */
.persona-design h2,
.persona-design .laser-intro h1,
.persona-design .game-start-button [data-start-label] {
  font-family: 'Persona Slim Wide', 'Persona Slim Local', Arial, sans-serif;
  font-weight: 300;
  color: #000;
  -webkit-text-stroke: 3px #fff;
  paint-order: stroke fill;
  letter-spacing: 0.02em;
}

.persona-design h2 .kinetic-word,
.persona-design .laser-intro h1 .kinetic-word {
  max-width: 100%;
  /* Letters are separate inline elements for hover motion. Keep each word
     intact so a heading can wrap only at real spaces, never mid-word. */
  white-space: nowrap;
}

.persona-design h2 .sr-only,
.persona-design .laser-intro h1 .sr-only {
  -webkit-text-stroke: 0;
}

.site-navigation a,
.site-identity,
.nav-back-link,
.hero-links .text-link,
.project-links a,
.contact-links a,
.case-study-source {
  font-family: 'Persona Slim Local', Arial, sans-serif;
  font-weight: 400;
}

.site-header {
  border-bottom: 2px solid var(--persona-ink);
}

.nav-shell {
  min-height: 4.75rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1.125rem;
}

.nav-menu-button {
  display: block;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.site-navigation {
  position: absolute;
  inset: 100% 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-height: calc(100svh - 4.875rem - var(--hud-height));
  overflow-y: auto;
  padding: 0.75rem max(1.5rem, calc((100vw - 73.75rem) / 2)) 1.375rem;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 240ms ease, transform 360ms var(--premium-ease), visibility 0s linear 360ms;
}

.navigation-open .site-navigation {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.site-navigation a {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--menu-font);
  font-size: var(--menu-font-size);
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.35;
  color: #080808;
  -webkit-text-stroke: var(--menu-outline) #fff;
  paint-order: stroke fill;
  isolation: isolate;
}

.site-navigation a .sr-only {
  -webkit-text-stroke: 0;
}

.site-navigation a::after {
  display: block;
  inset: 0;
  height: auto;
  z-index: -1;
  background: var(--persona-yellow);
  transform: skewX(-10deg) scaleX(0);
  transform-origin: left;
  transition: transform 180ms cubic-bezier(.7, 0, .3, 1);
}

.site-navigation a:hover,
.site-navigation a:focus-visible {
  color: #080808;
}

@media (max-width: 899px) {
  .site-navigation a {
    --menu-font-size: 1.75rem;
    --menu-outline: 0.21875rem;
  }
}

.site-navigation a:hover::after,
.site-navigation a:focus-visible::after {
  transform: skewX(-10deg) scaleX(1);
}

.identity-mark {
  background: var(--persona-yellow);
  color: var(--persona-ink);
  border: 2px solid var(--persona-ink);
  box-shadow: 3px 3px 0 var(--persona-sky);
}

.site-identity,
.nav-menu-button {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.nav-menu-button {
  width: 2.75rem;
  height: 2.75rem;
}

@media (max-height: 700px) {
  .site-header {
    min-height: 3.5rem;
    transform: translateY(0);
    transition: transform 240ms cubic-bezier(.16, 1, .3, 1);
  }

  .nav-shell {
    min-height: 3.5rem;
  }

  .site-identity > span:last-child {
    display: none;
  }

  .site-navigation {
    max-height: calc(100svh - 3.625rem - var(--hud-height));
  }

  body.short-header-hidden:not(.navigation-open) .site-header {
    transform: translateY(calc(-100% - 2px));
    pointer-events: none;
  }

  body.navigation-open .site-header,
  .site-header:focus-within {
    transform: translateY(0);
    pointer-events: auto;
  }
}

@media (max-height: 700px) and (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

.hero-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(51.25rem, calc(100svh - 4.75rem));
  max-height: none;
  background: var(--persona-yellow);
  color: var(--persona-ink);
  border-bottom: 2px solid var(--persona-ink);
}

.hero-section::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--persona-sky);
  clip-path: polygon(72% 0, 100% 0, 100% 100%, 48% 100%);
}

.hero-layout {
  padding-block: 5.5rem;
  gap: 3.5rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(15rem, .8fr);
}

.hero-copy h1 {
  font-size: clamp(3.5rem, 7.3vw, 7rem);
  line-height: .98;
  max-width: 47.5rem;
}

.hero-role {
  color: var(--persona-ink);
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  font-weight: 800;
}

.hero-introduction {
  color: var(--persona-ink);
}

.hero-section .eyebrow {
  color: var(--persona-ink);
  letter-spacing: .07em;
}

.hero-section .text-link {
  color: var(--persona-ink);
}

.hero-links .text-link {
  background: var(--persona-paper);
  padding: 0.75rem 1.125rem;
  border: 2px solid var(--persona-ink);
  box-shadow: 0.25rem 0.25rem 0 var(--persona-ink);
  text-decoration: none;
}

.hero-links .text-link-primary {
  background: var(--persona-ink);
  color: var(--persona-paper);
}

.hero-links .text-link::after {
  display: none;
}

.persona-monogram {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: visible;
  border: 0;
  background: var(--persona-paper);
  color: var(--persona-ink);
  transform: rotate(-7deg);
  box-shadow: 1rem 1rem 0 var(--persona-ink);
}

.persona-monogram>span {
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: clamp(6rem, 15vw, 15rem);
  font-weight: 900;
  letter-spacing: -.12em;
  padding-right: .1em;
}

.monogram-dot {
  color: #0c75a1;
}

html.reveal-enabled .persona-monogram.is-revealed {
  transform: rotate(-7deg);
}

.page-section {
  border-bottom: 2px solid var(--line);
}

.section-index {
  color: var(--text);
  letter-spacing: .12em;
}

/* Persona shows only the content-driven heading on game summary blocks. */
.project-summary-eyebrow { display: none; }

.section-header h2,
.two-column-section h2,
.contact-layout h2 {
  width: fit-content;
}

.section-header h2::after,
.two-column-section h2::after,
.contact-layout h2::after {
  content: '';
  display: block;
  width: 4.25rem;
  height: 0.4375rem;
  margin-top: 1.125rem;
  background: var(--persona-sky);
  transform: skewX(-16deg);
}

.section-muted {
  background: var(--surface-muted);
}

.achievement-badge {
  border-radius: 0;
  background: var(--persona-yellow);
  color: var(--persona-ink);
  border: 1px solid var(--persona-ink);
  box-shadow: 3px 3px 0 var(--persona-ink);
}

.achievement-badge::before {
  background: var(--persona-ink);
  box-shadow: none;
}

.tag-list li,
.technology-list li {
  border: 0;
  border-bottom: 2px solid var(--persona-sky);
  padding-inline: 0;
  margin-right: 0.625rem;
}

.project-grid {
  gap: 2.5rem;
}

.project-card {
  border: 2px solid var(--persona-ink);
  box-shadow: 0.3125rem 0.3125rem 0 var(--persona-sky);
}

.project-card::after {
  box-shadow: 0.5rem 0.5rem 0 var(--persona-yellow);
}

.project-content {
  padding: 1.75rem;
}

.project-content h3 {
  font-size: 1.65rem;
}

.project-media {
  border-bottom: 2px solid var(--persona-ink);
}

.project-demo-link {
  border: 2px solid var(--persona-ink);
  background: var(--persona-yellow);
  color: var(--persona-ink);
  box-shadow: 3px 3px 0 var(--persona-ink);
  font-weight: 800;
}

.project-demo-link:hover,
.project-demo-link:focus-visible {
  background: var(--persona-sky);
  color: var(--persona-ink);
  border-color: var(--persona-ink);
}

.project-demo-link:active,
.hero-links .text-link:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

.collaborator-byline {
  border-radius: 0;
  border: 0;
  background: transparent;
  padding-left: 0;
}

.collaborator-icon {
  background: var(--persona-sky);
  color: var(--persona-ink);
}

.contact-section {
  background: var(--persona-sky);
  color: var(--persona-ink);
}

.contact-section a,
.contact-section .section-index {
  color: var(--persona-ink);
}

.contact-layout h2::after {
  background: var(--persona-yellow);
}

.laser-intro,
.case-study-hero {
  background: var(--surface-muted);
}

/* Character motion is opt-in for headings and links; game controls stay intact. */
.kinetic-label {
  display: inline;
}

.kinetic-word {
  display: inline-block;
  white-space: nowrap;
}

.kinetic-letter {
  display: inline-block;
}

@keyframes letter-hop {

  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  35% {
    transform: translateY(-.15em) rotate(-5deg);
  }

  70% {
    transform: translateY(.04em) rotate(3deg);
  }
}

@media (hover: hover) {
  .kinetic-text:hover .kinetic-letter {
    animation: letter-hop 360ms ease both;
    animation-delay: var(--letter-delay);
  }
}

.kinetic-text:focus-visible .kinetic-letter {
  animation: letter-hop 360ms ease both;
  animation-delay: var(--letter-delay);
}

/* Override base rules that move every span inside a link, including the labels. */
.text-link>.kinetic-label,
.project-demo-link .kinetic-label,
.project-demo-link .kinetic-word {
  transform: none;
  transition: none;
}

.page-wipe {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 1000;
  pointer-events: none;
  visibility: hidden;
}

.page-wipe i {
  position: absolute;
  inset: -20%;
  transform: translateX(-130%) skewX(-12deg);
  background: var(--wipe-first);
}

.page-wipe i:nth-child(2) {
  background: var(--wipe-second);
}

.page-wipe i:nth-child(3) {
  background: var(--wipe-third);
}

.persona-navigating .page-wipe,
.persona-arriving .page-wipe {
  visibility: visible;
}

.persona-arriving .page-wipe i {
  transform: translateX(0) skewX(-12deg);
}

/* Leaving a project page: the screen switches off like a CRT. The beam is
   animated by project-exit.js; this layer only exists during that exit. */
.page-switch-off {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.page-switch-off i {
  position: absolute;
  inset: 0;
  background: var(--palette-white, #FFFDF3);
  box-shadow: 0 0 3.75rem var(--palette-white, #FFFDF3);
}

/* The next page then fades in from that black (arrival.js toggles these). */
html.persona-screen-return body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--palette-black, #080808);
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(.33, 0, .2, 1);
}

html.persona-screen-return.persona-screen-fading body::after {
  opacity: 0;
}

/* A fixed instruction strip; measured padding keeps the last content reachable. */
:root {
  --hud-height: 4.25rem;
}

.persona-design {
  padding-bottom: 0;
}

/* Reserve fixed hints inside the footer on every page, not as yellow body
   padding below it. The measured HUD height already includes the safe area. */
.persona-design .site-footer {
  padding-bottom: calc(1.875rem + var(--hud-height));
}

.persona-design.page-home .site-footer {
  padding-top: 1rem;
  padding-bottom: calc(var(--hud-height) + env(safe-area-inset-bottom, 0px));
}

html {
  scroll-padding-bottom: calc(var(--hud-height) + 1rem);
}

.persona-hud {
  position: fixed;
  z-index: 80;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.625rem);
  min-height: 3.875rem;
  padding: 0.75rem max(1.25rem, calc((100vw - 73.75rem) / 2));
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--persona-ink);
  background: var(--persona-ink);
  color: var(--persona-paper);
  font-family: 'Persona Slim Local', Arial, sans-serif;
  font-size: 1rem;
}

.hud-instruction,
.hud-home {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
}

.persona-hud kbd {
  display: inline-block;
  padding: 3px 0.5625rem;
  border: 0;
  border-radius: 0;
  background: var(--persona-yellow);
  color: var(--persona-ink);
  box-shadow: 2px 2px 0 var(--persona-sky);
  transform: skewX(-8deg);
  font: 700 0.8125rem/1.5 ui-monospace, monospace;
}

.hud-home {
  margin-left: auto;
  min-height: 2.5rem;
  padding: 3px 0.4375rem;
  text-decoration: none;
  color: var(--persona-paper);
}

.hud-home:hover,
.hud-home:focus-visible {
  color: var(--persona-sky);
}

.hud-home:focus-visible {
  outline: 2px solid var(--persona-yellow);
  outline-offset: 3px;
}

.hud-home:active {
  transform: translateY(2px);
}

@media (max-width: 480px) {
  .persona-hud {
    gap: 0.75rem;
    padding-inline: 0.75rem;
    font-size: 0.8125rem;
  }

  .hud-instruction,
  .hud-home {
    gap: 0.375rem;
  }

  .persona-hud kbd {
    padding: 3px 0.3125rem;
    font-size: 0.6875rem;
  }

  .hud-home>span[aria-hidden] {
    display: none;
  }
}

@media (max-width: 360px) {
  .persona-hud {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }
}

@media (max-width:899px) {
  .hero-layout {
    gap: 2.25rem;
  }
}

@media (max-width:680px) {
  .hero-layout {
    grid-template-columns: 1fr;
    padding-block: 3rem 4rem;
  }

  .hero-copy {
    order: 1;
  }

  .hero-copy h1 {
    font-size: clamp(2.8rem, 12vw, 4.8rem);
  }

  .persona-monogram {
    order: 2;
    width: 10rem;
    justify-self: end;
    margin: 0.75rem 1.125rem 0 0;
    box-shadow: 0.5625rem 0.5625rem 0 var(--persona-ink);
  }

  .persona-monogram>span {
    font-size: 7rem;
  }

  .hero-section::before {
    clip-path: polygon(100% 15%, 100% 100%, 0 100%);
  }

  .project-grid {
    gap: 1.875rem;
  }

  .project-content {
    padding: 1.375rem;
  }

  .collaborator-byline {
    flex-wrap: wrap;
  }

  .hero-links {
    gap: 1rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  .kinetic-letter {
    animation: none !important;
    transform: none !important;
  }

  .page-wipe {
    display: none;
  }
}

/* Click-to-play posters keep games idle until the visitor presses Start. */
.persona-game-waiting {
  position: relative;
}

.persona-game-waiting>.imu-scene-status {
  visibility: hidden;
}

.persona-game-start {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--persona-ink);
}

.game-start-poster {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .5;
}

.persona-design .game-pause-overlay {
  background: rgba(8, 8, 8, .72);
}

.game-start-prompt {
  position: relative;
  padding: 1.25rem;
  text-align: center;
}

.persona-design .game-start-button {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.625rem;
  border: 3px solid var(--persona-ink);
  background: var(--persona-yellow);
  color: var(--persona-ink);
  box-shadow: 0.375rem 0.375rem 0 var(--persona-sky);
  font: 700 clamp(1.25rem, 3vw, 1.875rem)/1.2 Arial, sans-serif;
  cursor: pointer;
}

.persona-design .game-start-button:hover {
  transform: translateY(-3px);
}

.persona-design .game-start-button:focus-visible {
  outline: 0.25rem solid white;
  outline-offset: 0.375rem;
}

.persona-design .game-start-button:disabled {
  cursor: wait;
  opacity: .8;
}

.persona-design .game-start-prompt p {
  margin: 1.25rem 0 0;
  color: white;
  font-size: 0.9375rem;
  text-shadow: 0 2px 0.25rem #000;
}

/* Television cabinet: the live counters sit in the lower instrument panel. */
.persona-design .persona-tv {
  position: relative;
  margin-top: 6.5rem;
  padding: clamp(0.75rem, 2.5vw, 1.75rem);
  border: 3px solid #080808;
  border-radius: 1.875rem;
  background: #080808;
  box-shadow: inset 0 3px 0 #424242, inset 0 -0.375rem 0 #000, 0.5rem 0.625rem 0 #132938;
  margin-bottom: 1.5rem;
}

.persona-design .persona-tv-sandbox {
  width: min(72.5rem, calc(100% - 3rem));
  margin-inline: auto;
}

.persona-design .persona-tv>.game-board-wrap,
.persona-design .persona-tv>.imu-scene {
  border: 0.5rem solid #242424;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 2px 0 #505050;
}

.persona-tv-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 0.25rem 0;
  color: #132938;
}

.tv-power {
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: #ffe348;
  box-shadow: 0 0 0 3px #132938;
}

.tv-antennas {
  position: absolute;
  width: 11.25rem;
  height: 6.25rem;
  left: 50%;
  top: -6.25rem;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}

.tv-knob {
  position: relative;
  flex: 0 0 2.625rem;
  height: 2.625rem;
  border: 0.25rem solid #555;
  border-radius: 50%;
  background: #fffdf3;
  box-shadow: 2px 3px 0 #000, inset -0.25rem -3px 0 #b5b5af;
  transform: rotate(-30deg);
}

.tv-knob::after {
  content: '';
  position: absolute;
  width: 0.3125rem;
  height: 1.1875rem;
  top: 3px;
  left: calc(50% - 2.5px);
  border-radius: 3px;
  background: #080808;
}

.tv-speaker {
  flex: 1;
  min-width: 2.5rem;
  height: 1.25rem;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #8d969b 3px 0.3125rem);
  opacity: .5;
}

.persona-design .persona-tv .game-status-bar {
  flex: 1 1 28.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fffdf3;
}

.persona-design .persona-tv .game-status-bar>div {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 0.625rem;
  border: 0;
  gap: 0;
}

.persona-design .persona-tv .game-status-bar span {
  color: #fffdf3;
  font-weight: 700;
}

.persona-design .persona-tv .game-actions {
  margin-left: auto;
}

.persona-design .persona-tv .imu-live-readouts {
  flex-wrap: wrap;
  gap: 1rem;
  margin-left: auto;
}

.persona-design .persona-tv .imu-live-readouts span,
.persona-design .persona-tv .imu-live-readouts strong {
  color: #fffdf3;
}

.persona-hud:has(.hud-game-key) {
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.persona-design .game-start-button {
  font-size: clamp(1.5rem, 4vw, 2.375rem);
}

@media (max-width: 600px) {
  .persona-design .persona-tv {
    border-radius: 1.25rem;
    padding: 0.625rem;
    box-shadow: 0.25rem 0.375rem 0 #132938;
  }

  .persona-design .persona-tv>.game-board-wrap,
  .persona-design .persona-tv>.imu-scene {
    border-width: 0.3125rem;
    border-radius: 0.75rem;
  }

  .persona-design .persona-tv-sandbox {
    width: calc(100% - 1.5rem);
  }

  .persona-tv-panel {
    padding-top: 0.875rem;
    gap: 0.625rem;
  }

  .persona-hud:has(.hud-game-key) {
    gap: 0.375rem 0.75rem;
  }

  .persona-design .persona-tv .game-status-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.persona-design .persona-tv .game-status-bar,
.persona-design .persona-tv .imu-live-readouts {
  font-family: 'Persona Slim Local', Arial, sans-serif;
  font-weight: 400;
}

.persona-design .persona-tv .game-status-bar span,
.persona-design .persona-tv .imu-live-readouts span {
  text-transform: none;
  font-size: .95rem;
}

.persona-design .persona-tv .game-status-bar strong,
.persona-design .persona-tv .imu-live-readouts strong {
  font-weight: 400;
}

/* Working knobs and compact controls built into the two TV feet. */
.persona-design .persona-tv .game-action-button {
  width: 2.75rem;
  height: 2.75rem;
  border: 3px solid #555;
  border-radius: 50%;
  background: linear-gradient(145deg, #414141, #171717);
  color: #fffdf3;
  box-shadow: 0 3px 0 #000, inset 0 2px 0 #686868, inset 0 -3px 0 #080808;
}

.persona-design .persona-tv-with-legs {
  margin-bottom: 4rem;
}

.persona-design .persona-tv .tv-leg-controls {
  position: absolute;
  top: 100%;
  left: clamp(1.125rem, 5%, 3rem);
  right: clamp(1.125rem, 5%, 3rem);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  padding-top: 0.4375rem;
}

.persona-design .tv-leg {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 7.5rem;
  height: 2.75rem;
  padding: 0.25rem 0.75rem;
  border: 2px solid #080808;
  border-radius: 0.25rem 0.25rem 0.75rem 0.75rem;
  background: linear-gradient(#262626, #080808);
  box-shadow: inset 0 1px 0 #555, 3px 0.25rem 0 #132938;
}

.persona-design .tv-leg::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 1rem;
  right: 1rem;
  height: 0.625rem;
  background: #080808;
}

.persona-design .tv-leg .control-group {
  display: grid;
  grid-template-columns: repeat(2, 2rem);
  gap: 0.625rem;
}

.persona-design .tv-leg button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid #606060;
  border-radius: 50%;
  background: linear-gradient(145deg, #414141, #171717);
  color: #fffdf3;
  box-shadow: inset 0 1px 0 #686868, 0 2px 0 #000;
  font: 1.125rem/1 Arial, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}

.persona-design .tv-leg .dk-jump-button {
  width: 4.875rem;
  gap: 0.3125rem;
  border-radius: 1rem;
  font-size: 0.75rem;
}

.persona-design .persona-tv .game-action-button:hover:enabled,
.persona-design .tv-leg button:hover:enabled {
  border-color: #a9b4bd;
  color: #fffdf3;
  background: linear-gradient(145deg, #555, #242424);
}

.persona-design .persona-tv .game-action-button:active:enabled,
.persona-design .tv-leg button:active:enabled {
  transform: translateY(1px);
  box-shadow: inset 0 2px 3px #080808;
}

.persona-design .persona-tv .game-action-button:focus-visible,
.persona-design .tv-leg button:focus-visible {
  outline: 2px solid #ffe348;
  outline-offset: 3px;
}

.persona-design .persona-tv .game-action-button:disabled,
.persona-design .tv-leg button:disabled {
  opacity: .5;
  cursor: default;
}

.persona-design .persona-tv-with-legs+.game-message {
  min-height: 0;
}

@media (max-width: 600px) {
  .persona-design .tv-leg {
    width: 6.25rem;
    padding-inline: 0.375rem;
  }

  .persona-design .persona-tv .tv-leg-controls {
    left: 0.75rem;
    right: 0.75rem;
  }
}

/* /assets/themes/persona/diamond-wipe.css */
/* Only project entry uses this cover; existing page/section wipes stay intact. */
body.persona-design .diamond-wipe {
  position: fixed;
  inset: 0;
  z-index: 1001;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
body.persona-design .diamond-wipe i {
  position: absolute;
  background: var(--persona-yellow);
  transform: rotate(45deg) scale(0);
}
html.persona-diamond body.persona-design .page-wipe {
  visibility: hidden;
}
html.persona-diamond body.persona-design .diamond-wipe {
  visibility: visible;
  pointer-events: auto;
}
html.persona-diamond.persona-arriving body.persona-design .diamond-wipe,
html.persona-diamond-covered body.persona-design .diamond-wipe {
  background: var(--persona-yellow);
}
@media (prefers-reduced-motion: reduce) {
  html.persona-diamond body.persona-design .diamond-wipe { display: none; }
}

/* /assets/themes/persona/tokens.css */
/* Design tokens for the Persona theme (assets/themes/persona/), in three tiers:
   1. Raw palette colors (below); the scoped HUD palette also has literals.
   2. Semantic component aliases (--field, --panel, --border, ...) —
      shared by Persona component styles and the page-level aliases below.
   3. Page-level tokens (--page, --surface, --text, ...) — named the same as
      assets/css/site.css's and assets/themes/persona/style.css's own,
      independent definitions of the same concepts for their own contexts;
      whichever stylesheet loads last in templates/persona/render.mjs wins the
      cascade for a given page. Renaming any of these three requires updating
      all three files in lockstep — see docs/REDESIGN.md.

   Single-version palette, with the scoped original HUD palette below.
   Keep both selectors so saved/system theme preferences cannot change it. */
:root,
:root[data-theme] {
  /* Tier 1 — raw palette colors */
  --flower-red: #FF1600;
  --flower-green: #2CB900;
  --flower-cyan: #50F0FA;
  --flower-fringe-red: #FF0040;
  --flower-fringe-green: #02FE01;
  --palette-yellow: #FFF000;
  --hero-yellow-light: #FCFF89;
  --palette-olive: #4B4A30;
  --palette-gold: #DDB800;
  --palette-amber: #F4A006;
  --palette-play-red: #E5222B; /* Vivid red speech-bubble sticker. */
  --palette-muted: #62614C;
  --palette-black: #080808;
  --palette-ink-panel: #1B1A12; /* Raised panels on the black Skills field. */
  --palette-calendar-pink: #F6A49A; /* Sunday on the header calendar bar. */
  --palette-calendar-blue: #A9CBF2; /* Saturday on the header calendar bar. */
  --palette-white: #FFFDF3;
  --palette-blue: #0C75A1;
  --palette-cyan: #20C9D3; /* Shared with the hero's cyan color bar. */
  /* Education ribbon colors from the settings reference's Config footer. */
  --config-orange: #FFAA00;
  --config-silver: #BFC3C4;
  --config-ice: #F4FFFF;
  --config-taupe: #B99E96;
  --config-violet: #5A25F5;
  --config-lime: #DFFF00;

  /* Reference study (docs/design-reference.md) — sampled from P4G screenshots. */
  --ref-flower-gold: #FFE400;
  --ref-flower-shadow: #FFFF40;
  --ref-flower-dark: #30352D;
  --ref-band: #232323;          /* Selected row / tab bar. */
  --ref-tab-idle: #464646;      /* Unselected tab fill. */
  --ref-row: #FEFF7F;           /* Unselected list row. */
  --ref-field-deep: #FECA12;    /* Deep end of the yellow field gradient. */
  --ref-plate-start: #FFAE16;   /* Dialogue name plate, left. */
  --ref-plate-end: #FF7B02;     /* Dialogue name plate, right. */
  --ref-dialog-edge: #5E4F30;   /* Dialogue panel edges. */
  --ref-dialog-glow: #7A6641;   /* Dialogue panel center; lightened from the
                                   sampled #947D51 only as far as keeps
                                   #FFFDF3 text at 5.4:1. */
  --ref-dialog-rim: #F8980F;    /* Dialogue panel right edge. */

  /* Reference geometry (non-color; allowed here because tokens.css is the
     theme's token file — keep them below the colors). */
  --ref-skew: -10deg;           /* Lean for capsules and name plates. */
  --ref-row-height: 2.875rem;       /* List row min-height. */
  --ref-row-gap: 0.3125rem;           /* Gap between stacked rows. */
  --ref-marker-width: 0.375rem;      /* Lime marker bar on a selected row. */
  --ref-radius: 0;              /* All non-circular chrome. */
  --ref-tag-padding-block: .2em;
  --ref-tag-padding-inline: .8em;

  /* Tier 2 — shared semantic component aliases and shadow tokens. */
  --field: var(--palette-yellow);
  --panel: var(--palette-olive);
  --border: var(--palette-gold);
  --interactive: var(--palette-yellow);
  --on-panel: var(--palette-white);
  --on-field: var(--palette-black);
  --secondary: var(--palette-blue);
  --on-secondary: var(--palette-white);
  --offset-shadow: 0.5rem 0.5rem 0 var(--palette-yellow);
  --control-shadow: 0.25rem 0.25rem 0 var(--palette-yellow);

  /* Tier 3 — page-level tokens, shared in name with site.css/persona/style.css. */
  --page: var(--field);
  --surface: var(--panel);
  --surface-muted: var(--panel);
  --text: var(--on-panel);
  --text-muted: var(--on-panel);
  --line: var(--border);
  --line-strong: var(--border);
  --accent: var(--secondary);
  --accent-strong: var(--on-panel);
  --signal: var(--on-panel);
  --focus: var(--interactive);
  --header-bg: var(--panel);
  --shadow: var(--control-shadow);
  --shadow-raised: var(--offset-shadow);
  --persona-yellow: var(--palette-yellow);
  --persona-sky: var(--palette-gold);
  --persona-ink: var(--palette-olive);
  --persona-paper: var(--palette-yellow);
  --wipe-first: var(--palette-gold);
  --wipe-second: var(--palette-olive);
  --wipe-third: var(--palette-yellow);
  color-scheme: dark;
}

/* Original keyboard instructions are the only fully preserved component. */
.persona-hud {
  --signal: #FFF000;
  --persona-yellow: #ffe348;
  --persona-sky: #67cef6;
  --persona-ink: #132938;
  --persona-paper: #fffdf3;
  --page: var(--persona-paper);
  --surface: #fffef9;
  --surface-muted: #dff3fb;
  --text: var(--persona-ink);
  --text-muted: #405462;
  --line: #acbdc5;
  --line-strong: var(--persona-ink);
  --accent: #096387;
  --accent-strong: #075575;
  --focus: #075575;
}

/* /assets/themes/persona/redesign.css */
/* Reversible visual layer. Remove this and tokens.css from render.mjs to roll back.
   Existing markup, column layouts, content order, game logic and fonts are retained.
   Keyboard HUD (.persona-hud) styling lives in key-instructions.css and is not
   targeted here. */

/* 1. Experience only: reuse the existing olive/gold rounded panel as each card. */
body.persona-design #experience > .content-shell {
  background: transparent;
  border: 0;
}
body.persona-design #experience .section-header :is(h2, p) {
  color: var(--on-field);
}
body.persona-design #experience .experience-carousel { position: relative; padding-inline: 1.625rem; }
body.persona-design #experience .experience-card-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3rem) / 3);
  gap: 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--panel);
  padding: 0.5rem 0 1.125rem;
}
body.persona-design #experience .experience-card {
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--panel);
  border: 3px solid var(--border);
  border-radius: 1.75rem;
  color: var(--on-panel);
}
body.persona-design #experience .experience-card-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 11.25rem;
  padding: 1.25rem;
  border-radius: 1.5625rem 1.5625rem 0 0;
  background: var(--secondary);
  color: var(--on-secondary);
  text-align: center;
}
body.persona-design #experience .experience-card-visual > span {
  font: 900 4rem/1 'Arial Black', Arial, sans-serif;
}
body.persona-design #experience .experience-card-visual small { font-size: .8rem; }
body.persona-design #experience .experience-card-copy { padding: 1.5rem; }
body.persona-design #experience .experience-card h3 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.15;
  text-align: center;
  color: var(--on-panel);
  margin-bottom: 1.25rem;
}
body.persona-design #experience .experience-card h3 > span {
  display: block;
  margin-top: 0.625rem;
  font-size: 1rem;
  font-weight: 700;
}
body.persona-design #experience .experience-card :is(p, li, time, small) { color: var(--on-panel); }
body.persona-design #experience .experience-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
  font-size: .8rem;
}
body.persona-design #experience .experience-card-impact {
  padding-block: 0.75rem;
  border-block: 1px solid var(--border);
  text-align: center;
  font-size: .85rem;
  font-weight: 700;
}
body.persona-design #experience .experience-card ul {
  margin: 0;
  padding-left: 1.125rem;
  font-size: .94rem;
  line-height: 1.65;
}
body.persona-design #experience .experience-card li + li { margin-top: 0.875rem; }
body.persona-design #experience .experience-scroll-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--palette-yellow) 85%, transparent);
  color: var(--on-field);
  font: 700 1.375rem/1 Arial, sans-serif;
  transform: translateY(-50%);
  box-shadow: none;
}
body.persona-design #experience .experience-scroll-previous { left: -0.5rem; }
body.persona-design #experience .experience-scroll-next { right: -0.5rem; }
body.persona-design #experience .experience-scroll-arrow[hidden] { display: none; }
body.persona-design #experience .experience-scroll-arrow:disabled {
  background: color-mix(in srgb, var(--palette-muted) 70%, transparent);
  cursor: default;
}
body.persona-design #experience .experience-scroll-arrow:active { transform: translateY(-50%); }

/* Keep the project introduction readable on the yellow field. */
body.persona-design #projects .section-header > p {
  color: var(--palette-black);
}

/* Footer copy sits on the same olive foundation as the rest of the interface. */
body.persona-design .site-footer {
  background: var(--palette-olive);
  color: var(--palette-white);
}
body.persona-design .site-footer p { color: var(--palette-white); }
@media (max-width: 1000px) {
  body.persona-design #experience .experience-card-track { grid-auto-columns: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 600px) {
  body.persona-design #experience .experience-card-track { grid-auto-columns: 100%; }
  body.persona-design #experience .experience-carousel { padding-inline: 0.75rem; }
  body.persona-design #experience .experience-card { border-radius: 1.375rem; }
  body.persona-design #experience .experience-card-visual { border-radius: 1.1875rem 1.1875rem 0 0; }
  body.persona-design #experience .experience-card-copy { padding: 1.25rem; }
}

/* 2. Projects buttons only: the hard shadow contracts into the button. */
body.persona-design #projects :is(.project-demo-link, button, [role='button']) {
  border-radius: 1.375rem;
  border-color: var(--palette-black);
  background: var(--palette-black);
  color: var(--palette-yellow);
  box-shadow: 0.5rem 0.3125rem 0 0 var(--palette-yellow);
  transform: none;
  transition: background-color 650ms cubic-bezier(.34, 1.56, .64, 1),
    border-color 650ms cubic-bezier(.34, 1.56, .64, 1),
    color 650ms cubic-bezier(.34, 1.56, .64, 1),
    box-shadow 650ms cubic-bezier(.34, 1.56, .64, 1);
}

/* The JY badge's outer hover ring, adapted to the existing project palette. */
body.persona-design #projects .project-demo-link {
  position: relative;
  isolation: isolate;
}
body.persona-design #projects .project-demo-link::before {
  content: '';
  position: absolute;
  inset: -0.375rem;
  border: 2px solid var(--palette-black);
  border-radius: 1.75rem;
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
  transition: opacity 240ms ease-out,
    transform 360ms cubic-bezier(.34, 1.56, .64, 1);
}
body.persona-design #projects .project-demo-link:is(:hover, :focus-visible)::before {
  opacity: .7;
  transform: scale(1);
}

/* Project image windows: keep their olive treatment, with a slightly shorter
   yellow drop so it does not peek around the rounded corners. */
body.persona-design #projects .project-media {
  box-shadow: 0.5rem 0.3125rem 0 var(--palette-yellow);
}
body.persona-design #projects :is(.project-demo-link, button, [role='button']) * { color: inherit; }
body.persona-design #projects :is(.project-demo-link, button, [role='button']):is(:hover, :focus-visible):not(:disabled, [aria-disabled='true']) {
  background: var(--palette-yellow);
  border-color: var(--palette-yellow);
  color: var(--palette-black);
  box-shadow: 0 0 0 -2em color-mix(in srgb, var(--palette-yellow) 0%, transparent);
}
body.persona-design #projects :is(button:disabled, [aria-disabled='true']) {
  background: var(--palette-muted);
  border-color: var(--palette-muted);
  color: var(--on-panel);
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  body.persona-design #projects :is(.project-demo-link, button, [role='button']) { transition: none; }
  body.persona-design #projects .project-demo-link::before { transition: none; }
}

/* Text directly on the electric-yellow field uses the existing black token.
   Stop at panels and overlays, which supply their own surface/text pairing. */
@scope (body.persona-design) to (
  .site-header, .site-footer, .persona-hud, .ribbon-navigation,
  .hero-section > .content-shell,
  .page-section:not(#experience) > .content-shell,
  .laser-intro > .content-shell, .case-study-hero, .case-study-layout,
  .laser-shell, .imu-demo-section, .experience-card
) {
  /* Still !important: section stylesheets set these colours with !important. */
  :scope :is(h1, h2, h3, h4, p, li, dt, dd, span, small, strong, em, time, label) {
    color: var(--palette-black) !important;
    -webkit-text-fill-color: currentColor;
  }
}

/* Yellow controls must also keep nested text black in interactive states.
   Still !important: it must beat the rule above in hover/focus states. */
body.persona-design :is(.skip-link, .text-link-primary, .game-start-button),
body.persona-design :is(.skip-link, .text-link-primary, .game-start-button) :is(span, strong, small),
body.persona-design #projects :is(.project-demo-link, button, [role='button']):is(:hover, :focus-visible):not(:disabled, [aria-disabled='true']),
body.persona-design #projects :is(.project-demo-link, button, [role='button']):is(:hover, :focus-visible):not(:disabled, [aria-disabled='true']) :is(span, strong, small) {
  color: var(--palette-black) !important;
  -webkit-text-fill-color: currentColor;
}

/* Requested exception for the hero contact action, including its arrow.
   Still !important: it must beat the !important black text rule above. */
body.persona-design .hero-links .text-link-primary,
body.persona-design .hero-links .text-link-primary * {
  color: var(--palette-yellow) !important;
  -webkit-text-fill-color: var(--palette-yellow);
}

/* Black project copy on the RF/PCB and autonomous car detail pages only. */
body.persona-design:is(.page-rf-receiver, .page-aps380) .case-study,
body.persona-design:is(.page-rf-receiver, .page-aps380) .case-study :is(h1, h2, h3, h4, p, a, li, dt, dd, figcaption, span, strong, em, code, th, td) {
  color: var(--palette-black);
  -webkit-text-fill-color: var(--palette-black);
}

/* Reference-study refinements (docs/design-reference.md): square chrome and
   slanted chip fills. */
body.persona-design :is(.tag-list li, .technology-list li, .case-study-tools li,
  .achievement-badge, .collaborator-icon, .arrow-link, .source-link,
  .case-study-source, .contact-secondary-links a),
body.persona-design .site-navigation a::after {
  border-radius: var(--ref-radius);
}

/* Only homepage project technology labels use capsules. index.html renders
   plain-text <li> values, and content.yml contains no chip links. */
body.persona-design #projects .technology-list li {
  position: relative;
  isolation: isolate;
  background: transparent;
  font-family: var(--menu-font);
  text-transform: uppercase;
  padding: var(--ref-tag-padding-block) var(--ref-tag-padding-inline);
  border-bottom-style: none;
}
body.persona-design #projects .technology-list li::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: skewX(var(--ref-skew));
  background: var(--secondary);
  z-index: -1;
  pointer-events: none;
}

/* /assets/themes/persona/key-instructions.css */
@font-face {
  font-family: 'Persona Hints Bold';
  src: url('/assets/themes/persona/fonts/slim-latin-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Active keyboard hints. Original implementation: docs/backups/original-key-instructions/. */
body.persona-design .persona-hud {
  --key-strip-height: 0px;
  position: fixed;
  inset: auto 0 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.5625rem 0.9375rem;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  min-height: 0;
  padding: 1.875rem 1.125rem max(0.375rem, env(safe-area-inset-bottom));
  border: 0;
  background: linear-gradient(to top,
      var(--signal) 0 var(--key-strip-height),
      transparent var(--key-strip-height)) !important;
  color: var(--palette-black);
  box-shadow: none;
  font: 700 0.703125rem/1.3 'Persona Hints Bold', Arial, sans-serif;
  -webkit-text-stroke: 2.25px var(--palette-white);
  paint-order: stroke fill;
  transform: none;
}

body.persona-design .persona-hud :is(.hud-instruction, .hud-home, .hud-menu-toggle) {
  display: inline-flex;
  flex: 0 0 auto;
  white-space: nowrap;
  align-items: center;
  gap: 0.28125rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-decoration: none;
  transform: rotate(-17deg);
  transform-origin: left bottom;
}

body.persona-design .persona-hud .hud-menu-toggle {
  border: 0;
  font: inherit;
  -webkit-text-stroke: inherit;
  paint-order: inherit;
  cursor: pointer;
}

/* Long game instructions stay in one row, with headroom for the tilted text. */
body.persona-design .persona-hud:has(.hud-game-key) {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  padding: 2.8125rem 1.125rem max(0.375rem, env(safe-area-inset-bottom));
  box-sizing: border-box;
  scrollbar-width: thin;
}

/* The first group's auto margin packs every hint against the right edge.
   If game hints exceed the viewport, the margin collapses so earlier keys
   remain reachable through the existing horizontal scroll. */
body.persona-design .persona-hud > .hud-instruction:first-child {
  margin-inline-start: auto;
}

body.persona-design .persona-hud kbd {
  display: inline-grid;
  place-items: center;
  flex: 0 0 1.625rem;
  width: 1.625rem;
  min-width: 1.625rem;
  height: 1.625rem;
  box-sizing: border-box;
  padding: 0;
  border: 2px solid var(--palette-white);
  border-radius: 50%;
  outline: none;
  background: var(--palette-black) !important;
  color: var(--palette-white) !important;
  box-shadow: none !important;
  transform: none;
  font: 700 0.5rem/1 Arial, sans-serif;
  -webkit-text-stroke: 0;
  paint-order: stroke fill;
}

body.persona-design .persona-hud kbd.hud-arrow {
  width: 1.625rem;
  padding: 0;
  border-radius: 50%;
  font-size: 0.84375rem;
}

body.persona-design .persona-hud .hud-home:hover,
body.persona-design .persona-hud .hud-home:focus-visible,
body.persona-design .persona-hud .hud-menu-toggle:hover,
body.persona-design .persona-hud .hud-menu-toggle:focus-visible {
  color: var(--palette-black);
  outline-color: var(--palette-black);
}

/* Shared progress also reverses smoothly when the menu is interrupted. */
body.persona-design .persona-hud {
  translate: 0 calc(120% * var(--menu-chrome-progress, 0));
}

@media (min-width: 541px) {
  body.persona-design .persona-hud:has(.hud-game-key) {
    transform: none;
  }
}

@media (max-width: 540px),
(max-height: 700px) {
  body.persona-design .persona-hud {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    gap: 0.46875rem 0.65625rem;
    font-size: 0.625rem;
    transform: none;
  }
}

@media (any-hover: none) and (any-pointer: coarse) {
  body.persona-design .persona-hud {
    display: none;
  }

  /* The home hints are real menu controls, so keep them available to touch. */
  body.page-home.persona-design .persona-hud {
    display: flex;
  }
}

/* Game help belongs to the document flow: it must never cover the TV controls
   or reading copy. Native details works with touch, keyboard and without JS. */
body.persona-tv-screen .game-keyboard-help {
  width: min(100%, var(--tv-stage-width, 51.25rem));
  margin: 0 auto 1.125rem;
  color: var(--palette-olive);
  font: 600 .875rem/1.5 var(--content-font, sans-serif);
}
body.persona-tv-screen .game-keyboard-help summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  min-height: 2.75rem;
  padding: 0.25rem 0.625rem;
  cursor: pointer;
  list-style: none;
}
body.persona-tv-screen .game-keyboard-help summary::-webkit-details-marker { display: none; }
body.persona-tv-screen .game-keyboard-help summary::after {
  content: '';
  width: 0.4375rem;
  height: 0.4375rem;
  margin-left: 0.3125rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
body.persona-tv-screen .game-keyboard-help[open] summary::after { transform: rotate(225deg); }
body.persona-tv-screen .game-keyboard-help summary:focus-visible {
  outline: 2px solid var(--palette-black);
  outline-offset: 2px;
}
body.persona-tv-screen .game-keyboard-help kbd {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 1.75rem;
  height: 1.75rem;
  padding-inline: 0.375rem;
  border-radius: 50%;
  border: 2px solid var(--palette-white);
  background: var(--palette-black);
  color: var(--palette-white);
  font: 700 0.6875rem/1 Arial, sans-serif;
}
body.persona-tv-screen .game-keyboard-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 0.75rem 0.625rem 1rem;
}
body.persona-tv-screen .game-keyboard-hints .hud-instruction {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}
/* The fixed game HUD now holds Esc/Menu only, and its transparent area cannot
   eat clicks on the page. Full game instructions never enter this layer. */
body.persona-tv-screen .persona-hud { pointer-events: none; }
body.persona-tv-screen .persona-hud .hud-menu-toggle { pointer-events: auto; }

/* /assets/themes/persona/header-calendar.css */
/* Header chrome without a bar. The header keeps its place and behaviour but
   is transparent; the name and back link float on black pills, and the
   top-right corner holds a P4-style calendar: concentric yellow, orange,
   white, red and yellow rings around a brightened disc, the date bar and time
   of day on their left, and a sun/moon badge on the rings. The menu button
   sits inside the bright disc. header-calendar.js builds the calendar. */
body.persona-design .site-header {
  border-bottom: 0;
  background: transparent;
  /* The transparent strip must not block clicks on the page beneath it. */
  pointer-events: none;
}
body.persona-design .site-header :is(a, button, #site-navigation) {
  pointer-events: auto;
}
body.persona-design .nav-shell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
}
body.persona-design :is(.site-identity, .nav-back-link) {
  padding: 0.3125rem 1rem 0.3125rem 0.3125rem;
  border-radius: 62.4375rem;
  background: var(--palette-black);
  color: var(--palette-white);
  box-shadow: 3px 3px 0 var(--palette-yellow);
}
body.persona-design .nav-back-link { padding-left: 1rem; }

/* Menu button: a black disc inside the calendar's bright interior. */
body.persona-design .site-header .nav-menu-button {
  position: fixed;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 3;
  border-radius: 50%;
  background: var(--palette-black);
  color: var(--palette-yellow);
  box-shadow: 0 0 0 2px var(--palette-yellow);
}
body.persona-design .site-header .nav-menu-button:focus-visible {
  outline: 3px solid var(--palette-black);
  outline-offset: 0.25rem;
}
/* The menu's close button takes the menu button's exact place and look, so
   the same corner control opens and closes the menu. */
body.persona-design #site-navigation.ribbon-navigation .ribbon-menu-close {
  top: 0.875rem;
  right: 0.875rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: var(--palette-black) !important; /* ribbon-menu.css uses !important. */
  color: var(--palette-yellow) !important;
  box-shadow: 0 0 0 2px var(--palette-yellow) !important;
}

body.persona-design .header-calendar {
  --ring-size: 17.5rem;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2;
  width: 35rem;
  height: 11rem;
  /* The rings extend past the corner; clip them so the page never scrolls sideways. */
  overflow: hidden;
  pointer-events: none;
  transform-origin: top right;
  transition: opacity 240ms ease;
}
/* Rings: radius 140px, centred 10px in from the right edge and 30px below
   the top, so their left side and lower-left arc show. The band is 38.4px
   (27.4% of the radius): from the outside in, a thick yellow, then thinner
   orange, white, red and yellow, then the bright disc. The bar, time and
   badge offsets below assume this centre and size. */
body.persona-design .header-calendar-ring {
  position: absolute;
  top: calc(-0.5 * var(--ring-size) + 1.875rem);
  right: calc(-0.5 * var(--ring-size) + 0.625rem);
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--palette-white) 22%, transparent) 0 72.57%,
    var(--palette-yellow) 72.57% 76.86%,
    var(--palette-play-red) 76.86% 81.14%,
    var(--palette-white) 81.14% 84.57%,
    var(--palette-amber) 84.57% 88.86%,
    var(--palette-yellow) 88.86% 100%);
  -webkit-backdrop-filter: brightness(1.35) saturate(1.05);
  backdrop-filter: brightness(1.35) saturate(1.05);
}
/* Date bar along the top: drawn over the rings, its right end reaches into
   the bright disc. */
body.persona-design .header-calendar-bar {
  position: absolute;
  top: 0.75rem;
  right: 5.9375rem;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  padding: 0.3125rem 2.5rem 0.25rem 1.25rem;
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--palette-black) 88%, transparent);
  line-height: 1;
}
body.persona-design .header-calendar-date {
  color: var(--palette-white);
  font: 600 1.625rem/1 'Persona Slim Wide', 'Persona Slim Local', Arial, sans-serif;
  letter-spacing: .12em;
}
body.persona-design .header-calendar-day {
  font: 400 1.0625rem/1 'Persona Slim Local', Arial, sans-serif;
  letter-spacing: .04em;
}
body.persona-design .header-calendar-weekday { color: var(--palette-white); }
body.persona-design .header-calendar-saturday { color: var(--palette-calendar-blue); }
body.persona-design .header-calendar-sunday { color: var(--palette-calendar-pink); }
/* Time of day under the bar, overlapping the rings' outer edge a little. */
body.persona-design .header-calendar-time {
  position: absolute;
  top: 3.25rem;
  right: 8.125rem;
  z-index: 2;
  color: var(--palette-white);
  /* A clean bold sans like the reference: the traced Persona Hints face has
     lumpy lowercase "e" and "g" at this size. */
  font: 700 1.5625rem/1.1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -.01em;
  -webkit-text-stroke: 0.375rem var(--palette-black);
  paint-order: stroke fill;
}
/* Badge on the band, lower-left of the rings (about 120 degrees). */
body.persona-design .header-calendar-badge {
  position: absolute;
  top: 6.0625rem;
  right: 2.3125rem;
  z-index: 2;
  width: 4rem;
  height: 4rem;
}
body.persona-design .header-calendar-rim,
body.persona-design .header-calendar-glyph {
  fill: var(--palette-yellow);
}
body.persona-design .header-calendar-glyph {
  stroke: var(--palette-yellow);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
body.persona-design .header-calendar-field {
  fill: var(--palette-black);
}

/* Opening the menu slides the header up by 110% of its own 78px height
   (ribbon-menu.css). The calendar is taller, so it adds its own distance on
   the same timeline and leaves the screen completely. */
body.persona-design .site-header .header-calendar {
  translate: 0 calc(-6.875rem * var(--menu-chrome-progress, 0));
}

/* Short windows: the header retreats on downward scroll; so does the corner. */
body.short-header-hidden:not(.navigation-open) .header-calendar { opacity: 0; }

@media (max-width: 600px) {
  body.persona-design .header-calendar { transform: scale(.55); }
  body.persona-design .site-header .nav-menu-button,
  body.persona-design #site-navigation.ribbon-navigation .ribbon-menu-close { top: 0.625rem; right: 0.625rem; }
  /* Phones: the back link needs the room; the rings and badge stay. */
  body.persona-design .site-header:has(.nav-back-link) :is(.header-calendar-bar, .header-calendar-time) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.persona-design .header-calendar { transition: none; }
}

/* /assets/themes/persona/cursor-trail.css */
/* Native cursor and all input affordances remain untouched. Only the echoes
   are drawn here; this viewport overlay cannot receive clicks or add overflow. */
.cursor-afterimages {
  position: fixed;
  inset: 0;
  z-index: 1100;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  user-select: none;
}
.cursor-afterimages[hidden] { display: none; }
.cursor-afterimage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5rem;
  height: 1.875rem;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.cursor-afterimage svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .cursor-afterimages { display: none; }
}

/* /assets/themes/persona/project-tv-effect.css */
/* Vault66-inspired CRT layers; adjustable values live in assets/js/crt-settings.js.
   Adapted from vault66-crt-effect, Copyright (c) 2025 Maksym Dombrov (MIT).
   License: /assets/licenses/vault66-crt-effect.txt. No external runtime required. */
#projects .project-media :is(picture, .project-screen) {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
}

/* The same HTML layers sit inside the SVG's existing sky-ring clip.
   Text, flowers, gold rings and the monogram remain outside the filter. */
.hero-crt-window {
  pointer-events: none;
  overflow: hidden;
  /* Blend the flattened HTML texture with the real SVG sky, not just its
     sibling overlays. This adds shimmer without a dark gray film. */
  mix-blend-mode: screen;
}
.hero-crt-screen { position: relative; width: 100%; height: 100%; overflow: hidden; }
.crt-surface[data-crt-glow="true"] {
  filter: drop-shadow(0 0 0.375rem var(--crt-glow-color)) drop-shadow(0 0 0.75rem var(--crt-glow-color));
}
.crt-layer { position: absolute; inset: 0; pointer-events: none; }

/* Desaturate only the decorative layers, never the original image/video.
   Keep their brightness/opacity unchanged so the sweep does not turn white. */
.crt-scanlines, .crt-edge-glow, .crt-noise {
  filter: saturate(var(--crt-tint-saturation, 1));
}
/* Neutral speckles; the sky-colored scanlines/sweep keep their blue hue. */
.hero-crt-screen > .crt-noise { filter: grayscale(1); }

.crt-scanlines {
  z-index: 6;
  background: repeating-linear-gradient(var(--crt-line-direction),
    var(--crt-line-color) 0 var(--crt-line-width),
    transparent var(--crt-line-width) calc(var(--crt-line-width) + var(--crt-line-gap)));
  opacity: var(--crt-line-opacity);
  mix-blend-mode: screen;
}
.crt-curvature {
  z-index: 1;
  background:
    radial-gradient(ellipse 75% 75% at 30% 25%, rgb(255 255 255 / .05), transparent 55%),
    radial-gradient(ellipse 100% 100% at center, transparent 42%,
      rgb(0 0 0 / calc(var(--crt-curvature-intensity) * .35)) 72%,
      rgb(0 0 0 / calc(var(--crt-curvature-intensity) * .9)) 100%);
}
.crt-vignette {
  z-index: 5;
  background: radial-gradient(ellipse at center, transparent 60%, rgb(0 0 0 / var(--crt-vignette-intensity)));
  mix-blend-mode: multiply;
}
.crt-edge-glow {
  z-index: 4;
  box-shadow: inset 0 0 var(--crt-edge-glow-size) var(--crt-edge-glow-color);
}
.crt-glare {
  z-index: 3;
  background: linear-gradient(115deg, transparent,
    rgb(255 255 255 / calc(var(--crt-glare-intensity) * .15)) 22%,
    rgb(255 255 255 / calc(var(--crt-glare-intensity) * .55)) 50%, transparent);
}
.crt-noise {
  z-index: 2;
  inset: -0.25rem;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/assets/themes/persona/%23n)'/%3E%3C/svg%3E");
  background-size: 11.25rem 11.25rem;
  opacity: var(--crt-noise-opacity);
  mix-blend-mode: screen;
  animation: crt-noise .5s steps(4) infinite paused;
}
.crt-sweep {
  z-index: 7;
  opacity: 0;
  animation: crt-sweep var(--crt-sweep-duration) linear infinite paused;
  animation-delay: calc(-1 * var(--crt-sweep-duration) * var(--crt-sweep-phase));
}
.crt-sweep::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--crt-sweep-thickness);
  background: linear-gradient(to bottom, transparent, rgb(0 0 0 / .4) 40%, rgb(0 0 0 / .6) 50%, transparent);
  filter: blur(1.5px);
}
[data-crt-sweep-style="soft"] > .crt-sweep::before {
  background: linear-gradient(to bottom, transparent, rgb(0 0 0 / .15) 40%, rgb(0 0 0 / .1) 50%, transparent);
  filter: blur(0.3125rem);
}
[data-crt-sweep-style="colored"] > .crt-sweep { mix-blend-mode: screen; }
[data-crt-sweep-style="colored"] > .crt-sweep::before {
  background: linear-gradient(to bottom, transparent, var(--crt-sweep-color) 50%, transparent);
  filter: saturate(var(--crt-tint-saturation, 1)) blur(0.5rem);
}
/* Dimming overlay avoids changing media/frame opacity or the SVG's geometry. */
.crt-flicker {
  z-index: 8;
  background: #000;
  opacity: 0;
  animation: crt-flicker var(--crt-flicker-speed) infinite paused;
  animation-delay: calc(-1 * var(--crt-flicker-speed) * var(--crt-sweep-phase));
}
.crt-surface[data-crt-active="true"] > :is(.crt-sweep, .crt-noise, .crt-flicker) { animation-play-state: running; }
.crt-surface[data-crt-active="true"] > .crt-sweep { opacity: 1; }
.crt-surface[data-crt-active="false"] > .crt-flicker { visibility: hidden; }
.crt-surface[data-crt-active="true"] > :is(.crt-sweep, .crt-noise) { will-change: transform; }

/* Move a full-height carrier, not top/height, to avoid per-frame layout work. */
@keyframes crt-sweep {
  from { transform: translateY(-30%); }
  to { transform: translateY(130%); }
}
@keyframes crt-noise {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(2px, -3px); }
  75% { transform: translate(-2px, -2px); }
}
@keyframes crt-flicker {
  0%, 60%, 90%, 100% { opacity: 0; }
  10% { opacity: calc(var(--crt-flicker-intensity) * .53); }
  20% { opacity: calc(var(--crt-flicker-intensity) * .13); }
  30% { opacity: calc(var(--crt-flicker-intensity) * .8); }
  40% { opacity: calc(var(--crt-flicker-intensity) * .33); }
  50% { opacity: calc(var(--crt-flicker-intensity) * .67); }
  70% { opacity: var(--crt-flicker-intensity); }
  80% { opacity: calc(var(--crt-flicker-intensity) * .27); }
}
@media (prefers-reduced-motion: reduce) {
  .crt-sweep, .crt-flicker { display: none; animation: none; }
  .crt-noise { animation: none; }
}

/* /assets/themes/persona/skills-section.css */
/* Skills is a black status field: each of the six groups is a raised panel
   with a yellow edge and a hard gold shadow, like a layered game-menu window. */
body.persona-design #skills {
  overflow: hidden;
  background: var(--palette-black);
  color: var(--palette-white);
  border-bottom: 3px solid var(--palette-black);
}

body.persona-design #skills > .content-shell {
  position: relative;
  z-index: 1;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
}

body.persona-design #skills .section-index,
body.persona-design #skills .section-header > p {
  color: var(--palette-white);
}

body.persona-design #skills .section-header > p {
  max-width: 42ch;
}

/* The shared black topic would vanish on the black field; this outranks the
   shared rule in content-typography.css, which loads later. */
body.persona-design #skills .section-header h2 {
  color: var(--palette-yellow);
  text-shadow: 3px 0.25rem 1px var(--palette-gold);
}

body.persona-design #skills .skills-categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: clamp(2.375rem, 6vw, 4.375rem);
}

body.persona-design #skills .skills-category {
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--palette-ink-panel);
  border-left: 0.375rem solid var(--palette-yellow);
  box-shadow: 0.375rem 0.375rem 0 var(--palette-gold);
}

body.persona-design #skills .skills-category-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 3rem;
  margin-bottom: 1.5rem;
}

body.persona-design #skills .skills-category-icon {
  display: block;
  flex: none;
  width: 2.125rem;
  height: 2.125rem;
  background-color: var(--palette-yellow);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

body.persona-design #skills [data-skill-icon="hardware"] .skills-category-icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='30' y='30' width='40' height='40' rx='4' fill='none' stroke='black' stroke-width='8'/%3E%3Cpath d='M30 30V12M50 30V8M70 30V12M30 70V88M50 70V92M70 70V88M30 40H12M30 60H8M70 40H88M70 60H92' stroke='black' stroke-width='6' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='30' y='30' width='40' height='40' rx='4' fill='none' stroke='black' stroke-width='8'/%3E%3Cpath d='M30 30V12M50 30V8M70 30V12M30 70V88M50 70V92M70 70V88M30 40H12M30 60H8M70 40H88M70 60H92' stroke='black' stroke-width='6' fill='none'/%3E%3C/svg%3E");
}

body.persona-design #skills [data-skill-icon="software"] .skills-category-icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M35 25 10 50 35 75M65 25 90 50 65 75' fill='none' stroke='black' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M35 25 10 50 35 75M65 25 90 50 65 75' fill='none' stroke='black' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.persona-design #skills [data-skill-icon="backend"] .skills-category-icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='20' rx='34' ry='12' fill='none' stroke='black' stroke-width='8'/%3E%3Cpath d='M16 20V50C16 57 31 62 50 62s34-5 34-12V20M16 50V80c0 7 15 12 34 12s34-5 34-12V50' fill='none' stroke='black' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='20' rx='34' ry='12' fill='none' stroke='black' stroke-width='8'/%3E%3Cpath d='M16 20V50C16 57 31 62 50 62s34-5 34-12V20M16 50V80c0 7 15 12 34 12s34-5 34-12V50' fill='none' stroke='black' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.persona-design #skills [data-skill-icon="robotics"] .skills-category-icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='58' r='26' fill='none' stroke='black' stroke-width='8'/%3E%3Cline x1='50' y1='32' x2='50' y2='14' stroke='black' stroke-width='8'/%3E%3Ccircle cx='50' cy='10' r='6' fill='black'/%3E%3Ccircle cx='40' cy='58' r='5' fill='black'/%3E%3Ccircle cx='60' cy='58' r='5' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='58' r='26' fill='none' stroke='black' stroke-width='8'/%3E%3Cline x1='50' y1='32' x2='50' y2='14' stroke='black' stroke-width='8'/%3E%3Ccircle cx='50' cy='10' r='6' fill='black'/%3E%3Ccircle cx='40' cy='58' r='5' fill='black'/%3E%3Ccircle cx='60' cy='58' r='5' fill='black'/%3E%3C/svg%3E");
}

body.persona-design #skills [data-skill-icon="design"] .skills-category-icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 90 28V72L50 92 10 72V28Z' fill='none' stroke='black' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath d='M50 8V50L10 28M50 50 90 28M50 50V92' fill='none' stroke='black' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 90 28V72L50 92 10 72V28Z' fill='none' stroke='black' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath d='M50 8V50L10 28M50 50 90 28M50 50V92' fill='none' stroke='black' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.persona-design #skills [data-skill-icon="content"] .skills-category-icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M12 18H88V68H48L26 88V68H12Z' fill='none' stroke='black' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M12 18H88V68H48L26 88V68H12Z' fill='none' stroke='black' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.persona-design #skills .skills-category h3 {
  margin: 0;
  color: var(--palette-white);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 800;
  line-height: 1.18;
}

body.persona-design #skills .skill-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6875rem 1.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.persona-design #skills .skill-chips li {
  position: relative;
  min-width: 0;
  padding-left: 1.0625rem;
  color: var(--palette-white);
  font: 700 .88rem/1.4 Arial, sans-serif;
  overflow-wrap: anywhere;
}

body.persona-design #skills .skill-chips li::before {
  content: '';
  position: absolute;
  top: .45em;
  left: 1px;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--palette-yellow);
  transform: rotate(45deg);
}

@media (max-width: 899px) {
  body.persona-design #skills .skills-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  body.persona-design #skills .skills-categories {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 2.125rem;
  }

  body.persona-design #skills .skills-category {
    padding: 1.5rem 1.375rem 1.75rem;
  }
}

@media (max-width: 340px) {
  body.persona-design #skills .skill-chips {
    grid-template-columns: 1fr;
  }
}

/* /assets/themes/persona/hero-poster.css */
/* Opening poster: concentric stage, side sky, and one central monogram figure. */
html.home-overscroll-contained { overscroll-behavior-y: none; }
body.persona-design.page-home #main-content {
  /* Bound offscreen decoration horizontally while preserving the header continuation. */
  overflow-x: clip;
  position: relative;
  /* One geometry contract for the hero and its continuation behind the header. */
  --hero-art-top: 0px;
  --hero-art-left: 0px;
  --hero-art-width: 100%;
}

body.persona-design .hero-top-extension {
  --hero-header-height: 4.875rem;
  display: block;
  position: absolute;
  inset: calc(-1 * var(--hero-header-height)) 0 auto;
  width: 100%;
  height: var(--hero-header-height);
  z-index: 2;
  background: var(--palette-yellow);
  pointer-events: none;
  overflow: hidden;
}
body.persona-design .hero-top-extension .hero-header-art {
  position: absolute;
  top: calc(100% + var(--hero-art-top));
  left: var(--hero-art-left);
  width: var(--hero-art-width);
  height: auto;
  overflow: visible;
}

body.persona-design #home {
  position: relative;
  isolation: isolate;
  min-height: min(47.5rem, calc(100svh - 4.875rem));
  overflow: hidden;
  padding: 0;
  background: var(--palette-yellow);
  color: var(--palette-olive);
}
body.persona-design #home::before { content: none !important; }
body.persona-design #home .hero-visual-stage { position: relative; min-height: inherit; overflow: hidden; z-index: 1; }
body.persona-design #home .hero-reference-art {
  position: absolute;
  inset: var(--hero-art-top) auto auto var(--hero-art-left);
  width: var(--hero-art-width);
  height: auto;
  overflow: visible; /* Scale circles with width, not the section height. */
  pointer-events: none;
  user-select: none;
}

/* Sky is deliberately bluer than the teal used in the original rainbow bands. */
body.persona-design {
  --hero-sky: #04C4EB;
  --hero-circle-offset-y: -60px; /* SVG units: more negative moves all hero circles upward. */
}
body.persona-design :is(#home, .hero-top-extension, #about) .hero-circle-composition {
  transform-origin: 500px 270px;
  transform-box: view-box;
  transform: translateY(calc(var(--hero-circle-offset-y) + var(--hero-circle-lift-svg, 0px))) scale(var(--hero-circle-scale, .9));
}
body.persona-design :is(#home, .hero-top-extension, #about) .hero-side-field { fill: var(--hero-sky); }
body.persona-design :is(#home, .hero-top-extension, #about) .hero-side-highlight { fill: none; stroke: var(--palette-white); stroke-width: 5px; }
body.persona-design :is(#home, .hero-top-extension, #about, #education) .hero-sky-clouds {
  /* Recreate the reference's 40% cyan veil with our existing sky color. */
  opacity: .6;
  filter: brightness(1.15);
  pointer-events: none;
}
body.persona-design :is(#home, .hero-top-extension, #about) .hero-ring-outer { fill: var(--palette-yellow); stroke: var(--config-orange); stroke-width: 14px; }
body.persona-design :is(#home, .hero-top-extension, #about) .hero-ring-middle { fill: none; stroke: var(--config-orange); stroke-width: 5px; }
body.persona-design :is(#home, .hero-top-extension, #about) .hero-ring-inner { fill: var(--palette-yellow); stroke: none; }
body.persona-design :is(#home, .hero-top-extension, #about) .hero-dot-field { opacity: .1; }
body.persona-design #home .hero-visual-stage > .hero-ambient { opacity: .2; }

body.persona-design {

}
body.persona-design #home .hero-flower-dark { fill: var(--palette-olive); }
body.persona-design #home .hero-left-flower {
  position: absolute;
  z-index: 2;
  /* Independent of the circle SVG: move inward with available screen width. */
  left: calc(clamp(1.5rem, 9vw, 8.125rem) + 3.125rem);
  top: 74%;
  transform: translate(-50%, -50%);
  width: clamp(4.5rem, 7vw, 6.875rem);
  height: auto;
  pointer-events: none;
  fill: var(--palette-white);
}
/* White artwork contains its own red/green registration fringe. */
body.persona-design #home .hero-flower-light { fill: var(--palette-white); }

body.persona-design #home .hero-reference-copy {
  position: absolute;
  z-index: 3;
  left: clamp(2.125rem, 6vw, 6rem);
  top: 32%;
  width: min(44vw, 38.125rem);
  transform: rotate(-4deg);
}
body.persona-design #home .hero-name-flower {
  position: absolute;
  bottom: calc(100% + 1.125rem);
  left: clamp(3rem, 5vw, 5rem);
  width: 4rem;
  height: auto;
  fill: var(--palette-olive);
  pointer-events: none;
}
body.persona-design #home .hero-reference-copy h1 {
  margin: 0;
  color: var(--palette-olive) !important;
  font: 400 clamp(3.3rem, 6.2vw, 6rem)/.88 'Persona Slim Local', Arial, sans-serif;
  letter-spacing: -.025em;
  text-wrap: balance;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
  text-shadow: 0.3125rem 0.3125rem 0 var(--palette-white);
}
body.persona-design #home .hero-reference-copy p {
  width: fit-content;
  max-width: 100%;
  margin: 1.375rem 0 0 0.5rem;
  padding: 0.5rem 0.875rem 0.625rem;
  color: var(--palette-white) !important;
  background: var(--palette-olive);
  font: 400 clamp(1.15rem, 2.3vw, 2.1rem)/1 'Persona Slim Local', Arial, sans-serif;
  -webkit-text-fill-color: currentColor;
  transform: rotate(2deg);
}

/* Animated letters remain light against the olive subtitle strip. */
body.persona-design #home .hero-reference-copy p .kinetic-label,
body.persona-design #home .hero-reference-copy p .kinetic-word,
body.persona-design #home .hero-reference-copy p .kinetic-letter {
  color: var(--palette-white) !important;
  -webkit-text-fill-color: var(--palette-white);
}

/* A freestanding monogram takes the place of the reference's character cutout. */
body.persona-design #home .hero-portrait-frame {
  position: absolute;
  z-index: 2;
  left: 67%;
  bottom: 7%;
  width: clamp(22.5rem, 41vw, 38.75rem);
  height: 67%;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--palette-olive);
  box-shadow: none;
  transform: translateX(-50%) rotate(-3deg);
}
body.persona-design #home .hero-portrait-frame::before,
body.persona-design #home .hero-portrait-frame::after { content: none; }
body.persona-design #home .hero-portrait-monogram {
  display: inline-flex;
  align-items: baseline;
  gap: .035em;
  font: 900 clamp(7rem, 16vw, 14rem)/1 'Arial Black', Arial, sans-serif;
  letter-spacing: -.035em;
  color: var(--palette-olive);
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0.375rem var(--palette-white);
  paint-order: stroke fill;
  text-shadow: 0.3125rem 0.3125rem 0 var(--palette-black);
  transform: none;
}
body.persona-design #home .hero-portrait-monogram .monogram-dot {
  font-size: .38em;
  line-height: 1;
  color: var(--palette-blue) !important;
  -webkit-text-fill-color: var(--palette-blue) !important;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

body.persona-design #home .hero-actions {
  position: absolute;
  z-index: 4;
  left: clamp(2.125rem, 6vw, 6rem);
  bottom: clamp(2.375rem, 7vh, 4.75rem);
}
body.persona-design #home .hero-links { display: flex; flex-wrap: wrap; gap: 1.125rem; }
body.persona-design #home .hero-links .text-link {
  font-family: 'Persona Slim Local', Arial, sans-serif;
  font-weight: 400;
  font-synthesis: none;
}
body.persona-design #home .hero-links .text-link-primary { background: var(--palette-olive); }
body.persona-design #home .hero-links .text-link-primary:is(:hover, :focus-visible) { background: var(--palette-muted); }

/* The previous hero's two sweeping gold circles now frame About. */
body.persona-design #about {
  --hero-corner-angle: 30deg;
  --hero-corner-angle-step: .4deg;
  --hero-corner-overlap: 8;
  position: relative;
  isolation: isolate;
  overflow: visible;
  /* Only the stripe corridor may cross the hero seam. */
  clip-path: polygon(0 0, calc(100% - var(--about-stripe-width, 0px) - var(--about-stripe-kick, 0px)) 0, calc(100% - var(--about-stripe-width, 0px) - var(--about-stripe-kick, 0px)) calc(-1 * var(--about-stripe-rise, 0px)), 100% calc(-1 * var(--about-stripe-rise, 0px)), 100% 100%, 0 100%);
  min-height: clamp(26.875rem, 56vw, 43.75rem);
  background: var(--palette-yellow);
}
body.persona-design #about .about-legacy-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  overflow: visible; /* Scale circles with width, not the section height. */
  fill: var(--palette-gold);
  pointer-events: none;
}
body.persona-design #about > .content-shell { position: relative; z-index: 2; }

/* Phone poster: content controls spacing; rings frame the monogram. */
@media (max-width: 899px) {
  body.persona-design.page-home #main-content {
    --hero-art-top: 8.75rem;
    --hero-art-left: -44%;
    --hero-art-width: 150%;
  }
  body.persona-design #home { min-height: 0; }
  body.persona-design #home .hero-visual-stage {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-height: clamp(35rem, calc(100svh - 4.875rem), 42.5rem);
    padding: 4.75rem 1.5rem 2.25rem;
    box-sizing: border-box;
  }
  body.persona-design #home .hero-reference-art {
    max-width: none;
    transform: none;
  }
  body.persona-design #home .hero-left-flower { left: 4.625rem; top: 64%; width: 2.75rem; }
  body.persona-design #home .hero-reference-copy {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    flex-shrink: 0;
    transform: rotate(-3deg);
  }
  body.persona-design #home .hero-name-flower { width: 2.625rem; bottom: calc(100% + 0.75rem); }
  body.persona-design #home .hero-reference-copy h1 {
    max-width: 11ch;
    font-size: clamp(2.8rem, 13vw, 5rem);
    line-height: .98;
    text-shadow: 3px 3px 0 var(--palette-white);
  }
  body.persona-design #home .hero-reference-copy p {
    margin: 1rem 0 0;
    padding: 0.5625rem 0.625rem;
    font-size: clamp(.95rem, 3.8vw, 1.35rem);
    line-height: 1.2;
    white-space: normal;
    text-wrap: balance;
  }
  body.persona-design #home .hero-portrait-frame {
    position: relative;
    left: auto;
    bottom: auto;
    flex: 1;
    width: 100%;
    height: auto;
    min-height: 11.25rem;
    transform: none;
  }
  body.persona-design #home .hero-portrait-monogram {
    font-size: clamp(7rem, 32vw, 12rem);
    -webkit-text-stroke-width: 0.25rem;
    text-shadow: 3px 3px 0 var(--palette-black);
  }
  body.persona-design #home .hero-actions {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    flex-shrink: 0;
  }
  body.persona-design #home .hero-links { gap: 0.75rem; }
  body.persona-design #home .hero-links .text-link {
    flex: 1 1 8.125rem;
    justify-content: center;
    min-height: 3rem;
    padding: 0.75rem 0.625rem;
    font-size: clamp(.82rem, 3.8vw, 1rem);
    gap: .5em;
    white-space: nowrap;
    box-sizing: border-box;
  }
  body.persona-design #about { min-height: 32.5rem; }
}

/* Original rainbow corner artwork, moved with the previous hero background to About. */
body.persona-design #about .about-corner-ribbons {

  position: absolute;
  right: 0;
  bottom: 0;
  width: min(42%, 40rem);
  height: auto;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}
body.persona-design #about .about-corner-ribbon-bands {
  transform: translate(440px, 340px);
}
@media (max-width: 899px) {
  body.persona-design #about .about-corner-ribbons { width: min(32%, 11.25rem); }
}

/* P4G stripes paint above the rings, below copy and the corner fan.
   The final stripe overscans to the right; About clips the excess. */
body.persona-design #about .about-status-stripes {
  position: absolute;
  top: calc(-1 * var(--about-stripe-rise, 0px));
  right: 0;
  z-index: 1;
  overflow: hidden;
  width: clamp(6rem, 16vw, 15rem);
  height: calc(100% + var(--about-stripe-rise, 0px));
  pointer-events: none;
  user-select: none;
}
@media (max-width: 899px) {
  body.persona-design #about .about-status-stripes { width: 1rem; }
}

/* Individual angles: 27.6°–37.6° (outer bands extend below the 30° base). About clips the extended bands at its edges. */
body.persona-design #about .about-corner-ribbon-bands rect {
  transform: rotate(calc(-1 * (var(--hero-corner-angle) + var(--stripe-index) * var(--hero-corner-angle-step))));
}

/* 3 rpm = one revolution every 20 seconds. Position stays on the outer group. */
body.persona-design #home .hero-flower-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-flower-turn 20s linear infinite;
  animation-play-state: paused;
}
body.persona-design #home.hero-flowers-running .hero-flower-spin { animation-play-state: running; }
body.persona-design #home :is(.hero-flower-dark, .hero-name-flower) .hero-flower-spin {
  animation-direction: reverse;
}
@keyframes hero-flower-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.persona-design #home .hero-flower-spin { animation: none; }
}

/* Optional seamless continuation: clipped horizontally by About, behind its rings/text. */
body.persona-design #about .hero-about-art {
  position: absolute;
  height: auto;
  max-width: none;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}

/* P4R's open yellow field: readable copy at left, the original rings at right. */
body.persona-design #about {
  padding: 0 0 7rem;
  min-height: var(--about-section-min-height, 35rem);
  box-sizing: border-box;
}
body.persona-design #about > .content-shell {
  display: block;
  width: min(73.75rem, calc(100% - 3.5rem));
  margin-inline: auto;
  padding: max(3rem, var(--about-content-top, 3rem)) 0 0;
  box-sizing: border-box;
  background: transparent;
}
body.persona-design #about > .content-shell h2 { transform: none; translate: none; margin-left: 0; }
body.persona-design #about > .content-shell .section-body {
  width: min(58%, 37.5rem);
  margin-top: 1.75rem;
}
body.persona-design #about .section-body .prose p {
  margin: 0;
  color: var(--palette-black);
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.65;
  text-wrap: pretty;
}
@media (max-width: 899px) {
  body.persona-design #about { padding-bottom: 10rem; }
  body.persona-design #about > .content-shell {
    width: min(100% - 2.5rem, 42.5rem);
  }
  body.persona-design #about > .content-shell .section-body {
    width: min(100%, 35rem);
    margin-top: 1.75rem;
  }
}
@media (min-width: 900px) and (max-height: 600px) {
  body.persona-design #about { padding-bottom: 5rem; }
}

body.persona-design #about .about-picture-placeholders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: 2.25rem;
  padding-bottom: 3rem;
}
body.persona-design #about .about-picture-frame {
  aspect-ratio: 3 / 4;
  border: 3px solid var(--palette-olive);
  border-radius: 0.75rem;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--palette-yellow);
  color: var(--palette-olive);
  font-size: .875rem;
  font-weight: 700;
}
body.persona-design #about .about-picture-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Flowers are placed on the visible blue annulus by the responsive geometry pass. */
body.persona-design #home :is(.hero-name-flower, .hero-left-flower, .hero-right-dark-flower, .hero-right-light-flower) {
  position: absolute;
  bottom: auto;
  z-index: 2;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
body.persona-design #home .hero-right-dark-flower { width: clamp(3rem, 7vw, 6.875rem); }
body.persona-design #home .hero-right-light-flower { width: clamp(2.125rem, 4vw, 4rem); }
body.persona-design #about > .about-picture-placeholders {
  position: absolute;
  z-index: 2;
  width: var(--arch-photos-width, 35rem);
  left: var(--arch-photos-left, 1.5rem);
  top: var(--arch-photos-top, 40rem);
  margin: 0;
  padding: 0;
}

/* Sky projection is viewport-anchored; CRT surfaces remain in document space. */
body.persona-design :is(#home, .hero-top-extension, #about, #education) .hero-cloud {
  animation: hero-cloud-drift var(--cloud-duration, 64s) linear infinite;
  animation-delay: var(--cloud-delay, -24s);
  animation-play-state: paused;
}
body.persona-design.sky-clouds-running :is(#home, .hero-top-extension, #about, #education) .hero-cloud {
  animation-play-state: running;
}
/* All copies share the same 1000-unit viewport field, including About. */
@keyframes hero-cloud-drift {
  from { transform: translateX(0); }
  to { transform: translateX(1360px); }
}
@media (prefers-reduced-motion: reduce) {
  body.persona-design.sky-clouds-running :is(#home, .hero-top-extension, #about, #education) .hero-cloud {
    animation-play-state: paused;
  }
}

/* Original seven-row CSS sky profile, measured from a reference rather than
   copied artwork. JS snaps period/edges to device pixels in shared SVG space;
   fallback values provide a dense static texture before scripts initialize. */
body.persona-design .hero-crt-window { mix-blend-mode: normal; }
body.persona-design :is(.hero-crt-screen, .about-sky-texture) {
  --hero-texture-period: 3.414216px;
  /* Character-page CRT: a bright phosphor crest and a darker return line.
     Our CSS counterpart to its separate repeating texture, above the clouds.
     See docs/p4r-character-effects.md for the source-layer study. */
  --hero-texture-white: color-mix(in srgb, var(--palette-white) 85%, var(--hero-sky));
  --hero-texture-pale: color-mix(in srgb, var(--palette-white) 45%, var(--hero-sky));
  --hero-texture-soft: color-mix(in srgb, var(--hero-sky) 72%, var(--palette-black));
  --hero-texture-cyan: var(--hero-sky);
  --hero-texture-opacity: .46;
  --hero-texture-row-1: calc(var(--hero-texture-period) / 7);
  --hero-texture-row-2: calc(var(--hero-texture-period) * 2 / 7);
  --hero-texture-row-3: calc(var(--hero-texture-period) * 3 / 7);
  --hero-texture-row-4: calc(var(--hero-texture-period) * 4 / 7);
  --hero-texture-row-5: calc(var(--hero-texture-period) * 5 / 7);
  --hero-texture-row-6: calc(var(--hero-texture-period) * 6 / 7);
}
body.persona-design :is(.hero-crt-screen, .about-sky-texture)::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--hero-texture-opacity);
  background: repeating-linear-gradient(to bottom,
    var(--hero-texture-soft) 0 var(--hero-texture-row-1),
    var(--hero-texture-cyan) var(--hero-texture-row-1) var(--hero-texture-row-2),
    var(--hero-texture-pale) var(--hero-texture-row-2) var(--hero-texture-row-3),
    var(--hero-texture-white) var(--hero-texture-row-3) var(--hero-texture-row-4),
    var(--hero-texture-pale) var(--hero-texture-row-4) var(--hero-texture-row-5),
    var(--hero-texture-cyan) var(--hero-texture-row-5) var(--hero-texture-row-6),
    var(--hero-texture-soft) var(--hero-texture-row-6) var(--hero-texture-period));
  background-position-y: var(--hero-texture-offset, 0px);
}
@media (max-width: 899px) {
  body.persona-design .hero-crt-screen { --hero-texture-period: 5.826928px; }
}

/* I2: independent painted masks expose the common cloud/CRT sky. */
body.persona-design #about {
  --about-sky-mask-image: url("/assets/themes/persona/images/revival/mask-desktop.svg?v=2");
}
body.persona-design #about > .about-sky-base,
body.persona-design #about > .about-sky-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
body.persona-design #about > .about-sky-base {
  z-index: -2;
  overflow: hidden;
  background: var(--hero-sky);
  --hero-texture-period: max(3.5px, calc(100vw * 7 / 1920));
}
body.persona-design #about > .about-sky-base > svg { width: 100%; height: 100%; }
body.persona-design #about > .about-sky-base::before { z-index: 1; }
body.persona-design #about > .about-sky-mask {
  z-index: -1;
  background: var(--palette-yellow);
  mask-image: var(--about-sky-mask-image);
  mask-mode: alpha;
  mask-size: cover;
  mask-position: center top;
  mask-repeat: no-repeat;
}
body.persona-design #about > .about-sky-mask--mobile { display: none; }
body.persona-design #about > .about-corner-ribbons { z-index: 3; }
body.persona-design #about > :is(.content-shell, .about-picture-placeholders) { z-index: 4; }
/* Narrow pads protect copy wherever a curved opening passes beneath it. */
body.persona-design #about > .content-shell h2 { width: fit-content; }
body.persona-design #about > .content-shell :is(h2, .section-body) {
  background: var(--palette-yellow);
}
@media (max-width: 899px) {
  body.persona-design #about {
    --about-sky-mask-image: url("/assets/themes/persona/images/revival/mask-mobile.svg?v=2");
  }
  body.persona-design #about > .about-sky-mask--desktop { display: none; }
  body.persona-design #about > .about-sky-mask--mobile { display: block; }
}

/* About's quieter Revival composition. Keep legacy nodes available for rollback
   and geometry measurements, but remove their visual competition with the sky. */
body.persona-design #about > :is(.about-status-stripes, .about-corner-ribbons, .about-legacy-art, .section-motifs) {
  visibility: hidden;
  pointer-events: none;
}
body.persona-design #about {
  clip-path: inset(0);
  min-height: max(96rem, 152.7778vw);
  padding-bottom: 10rem;
}
@media (max-width: 899px) {
  body.persona-design #about {
    min-height: max(87.5rem, 373.3334vw);
    padding-bottom: 22rem;
  }
}

/* Extracted Revival layout: centered copy inside the open yellow field. */
body.persona-design #about > .content-shell {
  width: min(46.9792%, 42rem);
  padding-top: max(48vw, var(--about-content-top, 12rem));
  text-align: center;
}
body.persona-design #about > .content-shell h2 { margin-inline: auto; }
body.persona-design #about > .content-shell .section-body {
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
}
@media (max-width: 899px) {
  body.persona-design #about > .content-shell {
    width: min(42rem, calc(100% - 2.5rem));
    padding-top: max(88vw, var(--about-content-top, 3rem));
  }
}

/* Reference flower pair: a yellow shadow beneath gold, with a dark companion. */
body.persona-design #about > .about-flower-pair {
  position: absolute;
  left: 6%;
  top: 61%;
  width: 32%;
  aspect-ratio: 1.2;
  z-index: 2;
  pointer-events: none;
}
body.persona-design #about .about-flower { position: absolute; overflow: visible; }
body.persona-design #about .about-flower--gold {
  width: 76%;
  left: 0;
  top: 0;
  fill: var(--ref-flower-gold);
  filter: drop-shadow(-.25rem -.1875rem 0 var(--ref-flower-shadow));
}
body.persona-design #about .about-flower--dark {
  width: 28%;
  right: 0;
  bottom: 0;
  fill: var(--ref-flower-dark);
}
body.persona-design #about .about-flower-spin {
  transform-origin: 160px 160px;
  animation: about-flower-ccw 28s linear infinite paused;
}
body.persona-design #about .about-flower--dark .about-flower-spin { animation-duration: 22s; }
body.persona-design #about.about-flowers-running .about-flower-spin { animation-play-state: running; }
@keyframes about-flower-ccw { to { transform: rotate(-360deg); } }
@media (max-width: 899px) {
  body.persona-design #about > .about-flower-pair { width: 62%; left: 7%; top: 65%; }
}
@media (prefers-reduced-motion: reduce) {
  body.persona-design #about .about-flower-spin { animation: none; }
}

/* /assets/themes/persona/hero-ambient.css */
/* Ambient effects are deliberately confined to the opening section. */
body.persona-design #home {
  --hero-glow-white: var(--palette-white);
  --hero-glow-accent: color-mix(in srgb, var(--palette-gold) 65%, var(--palette-white));
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
html[data-theme="dark"] body.persona-design #home {
  --hero-glow-white: color-mix(in srgb, var(--palette-white) 90%, var(--palette-blue));
  --hero-glow-accent: var(--palette-blue);
}
body.persona-design #home .hero-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: paint;
  mask-image: linear-gradient(to bottom, black 0% 70%, transparent 100%);
}
body.persona-design #home .hero-ambient-orb {
  position: absolute;
  width: clamp(17.5rem, 42vw, 37.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hero-glow-white) 0% 22%, var(--hero-glow-accent) 48%, transparent 74%);
  filter: blur(3.125rem);
  opacity: .20;
  pointer-events: none;
  animation: hero-ambient-drift 26s ease-in-out infinite;
  /* Large blurred layers are costly; drift only while the hero is on screen. */
  animation-play-state: paused;
}
body.persona-design #home.hero-flowers-running .hero-ambient-orb { animation-play-state: running; }
body.persona-design #home .hero-ambient-orb:nth-child(1) { top: -8%; left: 26%; }
body.persona-design #home .hero-ambient-orb:nth-child(2) {
  top: 28%; right: -4%;
  opacity: .20;
  animation-duration: 30s;
  animation-delay: -11s;
  animation-direction: reverse;
}
body.persona-design #home .hero-ambient-orb:nth-child(3) {
  top: 42%; left: 4%;
  animation-duration: 23s;
  animation-delay: -7s;
}
/* SVG paint order places this surface above the fills, below the lettering. */
body.persona-design #home .hero-visual-stage { position: relative; z-index: 1; }
@keyframes hero-ambient-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(60px, 40px, 0) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  body.persona-design #home .hero-ambient-orb { animation: none; transform: none; }
}

body.persona-design #home .hero-ambient-surface { overflow: hidden; pointer-events: none; }

/* /assets/themes/persona/content-typography.css */
/* Supporting type roles. Letter interactions stay in the theme stylesheet;
   this file can be removed independently to roll back. */
body.persona-design {
  --content-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --content-body-size: 1rem;
  --content-label-size: .875rem;
  --content-title-size: clamp(1.25rem, 2vw, 1.65rem);
}
/* Gold offsets on the yellow fields; bright yellow offsets on the darker
   gold, orange and olive fields. Reuse the site's two main accent colors. */
body.persona-design :is(#about, #contact) {
  --section-topic-shadow: var(--palette-gold);
}
body.persona-design :is(#education, #skills, #experience, #projects) {
  --section-topic-shadow: var(--palette-yellow);
}
/* Shift section topics toward the page edge without clipping narrow viewports. */
body.persona-design :is(#about, #education, #skills, #experience, #projects, #contact) h2 {
  /* Larger italic topics share the Experience lettering; shadow color follows
     each section's background through the local semantic token above. */
  font-family: var(--content-font);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2.5rem, 5.2vw, 5rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--palette-black);
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
  text-shadow: 3px 0.25rem 1px var(--section-topic-shadow);
  width: 100%;
  translate: calc(-1 * clamp(0px, (100vw - 73.75rem) / 2 - 1rem, 6.25rem)) 0;
}
/* Reserve the stretched width in the line layout so headings can still wrap.
   Stretch the visual label, leaving heading height and letter motion intact. */
body.persona-design :is(#about, #education, #skills, #experience, #projects, #contact) h2 .kinetic-label {
  display: block;
  width: 80%;
  box-sizing: border-box;
  padding-inline-start: .08em;
  transform: scaleX(1.25);
  transform-origin: left center;
}
/* Animated letters must inherit the new treatment instead of the legacy
   per-element outline/shadow reset. Keep their movement unchanged. */
body.persona-design :is(#about, #education, #skills, #experience, #projects, #contact) h2 span {
  color: inherit;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
  text-shadow: inherit;
}
body.persona-design :is(#about, #education, #skills, #experience, #projects, #contact) h2::after {
  content: none;
  display: none;
}
body.persona-design :is(#about, #education, #skills, #experience, #projects, #contact) :is(p, li, time, small, h3) {
  font-family: var(--content-font);
}
body.persona-design :is(#about .prose, #contact .contact-layout, #skills .section-header, #experience .section-header, #projects .section-header) > p,
body.persona-design #projects .project-content > p:not(.collaborator-byline),
body.persona-design #experience .experience-card ul,
body.persona-design #education .section-body > p {
  font-size: var(--content-body-size);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: normal;
}
body.persona-design :is(#experience .experience-card, #projects .project-content, #education .section-body) h3 {
  font-size: var(--content-title-size);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.015em;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
body.persona-design #skills .skills-category h3 {
  font-size: clamp(1.125rem, 1.6vw, 1.35rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: normal;
}
body.persona-design #experience .experience-card h3 > span {
  font-size: var(--content-body-size);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
}
body.persona-design #experience :is(.experience-card-meta, .experience-card-impact, .experience-card-visual small),
body.persona-design #projects :is(.technology-list, .collaborator-byline),
body.persona-design #skills .skill-chips li {
  font-size: var(--content-label-size);
  line-height: 1.4;
  letter-spacing: normal;
}
body.persona-design #experience .experience-card-meta { font-weight: 500; }
body.persona-design #skills .skill-chips li,
body.persona-design #projects .technology-list { font-weight: 700; }

/* /assets/themes/persona/section-backgrounds.css */
/* Section fields and the reference-inspired Contact corner decoration. */
body.persona-design :is(#about, #skills, #projects) { position: relative; isolation: isolate; }
body.persona-design :is(#about, #skills, #projects) > .content-shell { position: relative; z-index: 1; }
.section-motifs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.section-motif { position: absolute; width: 4rem; height: 4rem; fill: currentColor; }
#about .section-motif--star { right: 7%; top: 0.75rem; transform: rotate(-14deg); }
#about .section-motif--ring { right: 2%; top: 3.25rem; width: 2.25rem; height: 2.25rem; }
#skills .section-motif--sparkle { left: 2%; bottom: 1rem; width: 3.125rem; height: 3.125rem; }
#skills .section-motif--flower { right: 4%; bottom: 0.5rem; transform: rotate(15deg); }
#projects .section-motif--rings { right: -1.125rem; top: -2.375rem; width: 9.375rem; height: 9.375rem; }
#contact .section-motif--flower { left: 1rem; bottom: 0.5rem; width: 4.375rem; height: 4.375rem; transform: rotate(-10deg); }
#contact .section-motif--sparkle { left: 6.25rem; bottom: 1.875rem; width: 1.875rem; height: 1.875rem; }
@media (max-width: 899px) {
  #about .section-motif--star { width: 2.75rem; height: 2.75rem; top: 0.5rem; right: 14%; }
  #about .section-motif--ring { top: 1.6875rem; right: 4%; width: 1.75rem; height: 1.75rem; }
  #projects .section-motif--rings { width: 6.25rem; height: 6.25rem; top: -1.875rem; }
  #skills .section-motif--flower, #contact .section-motif--flower { width: 3rem; height: 3rem; }
}
body.persona-design #about {
  background: var(--palette-yellow);
}
body.persona-design #about .section-motifs { display: none; }
body.persona-design #about .prose p {
  color: var(--on-field);
}

body.persona-design #contact .contact-intro {
  font-family: 'Persona Slim Local', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
}
body.persona-design #contact .contact-link-row {
  color: var(--palette-olive);
  border-radius: 0;
}
body.persona-design #contact .contact-link-row:is(:hover, :focus-visible) {
  background: transparent;
  color: var(--palette-black, #111);
}
body.persona-design #contact .contact-link-row:focus-visible {
  outline: 2px solid var(--palette-olive);
  outline-offset: 0.375rem;
}
body.persona-design #contact .contact-link-row:is(:hover, :focus-visible) .contact-link-icon {
  background: var(--palette-black, #111);
}
body.persona-design #contact .contact-link-address {
  /* Animated inline-block letters leave inherited underlines on spaces only. */
  text-decoration: none;
}

/* Bright yellow case-file field with faint diagonal hazard stripes. */
body.persona-design #projects {
  background: var(--palette-yellow) repeating-linear-gradient(-45deg,
    transparent 0 1.625rem, color-mix(in srgb, var(--palette-black) 5%, transparent) 1.625rem 3.25rem);
  overflow: hidden;
}

/* Same rainbow corner-ribbon technique as About, echoing the CRT/old-TV motif
   already used on the project media. */
body.persona-design #projects .project-corner-ribbons {
  --hero-corner-angle: 30deg;
  --hero-corner-angle-step: .4deg;
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  width: min(42%, 40rem);
  height: auto;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}
body.persona-design #projects .project-corner-ribbon-bands {
  transform: translate(440px, 340px);
}
body.persona-design #projects .project-corner-ribbon-bands rect {
  transform: rotate(calc(-1 * (var(--hero-corner-angle) + var(--stripe-index) * var(--hero-corner-angle-step))));
}
@media (max-width: 899px) {
  body.persona-design #projects .project-corner-ribbons { width: min(32%, 11.25rem); }
}

body.persona-design #contact {
  --pill-gap: clamp(3px, .5vw, 0.5rem);
  --pill-height: clamp(0.625rem, 2vw, 1.875rem);
  --contact-pill-height: calc(6 * var(--pill-height) + 5 * var(--pill-gap));
  --contact-flower-size: clamp(9.375rem, 14vw, 13.125rem);
  --contact-flower-scale: 1.2;
  --contact-flower-period: 30s; /* Two counterclockwise revolutions per minute. */
  /* A spacious closing panel, with a natural height if more links are added. */
  --contact-min-height: clamp(42.5rem, 85svh, 55rem);
  --contact-space-y: clamp(7rem, 14svh, 11rem);
  min-height: var(--contact-min-height);
  padding-block: var(--contact-space-y);
  display: grid;
  align-content: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--palette-yellow);
}

body.persona-design #contact > .content-shell {
  position: relative;
  z-index: 1;
}
@media (max-width: 680px) {
  body.persona-design #contact {
    --contact-min-height: clamp(37.5rem, 78svh, 45rem);
    --contact-space-y: 6rem;
    --contact-ribbon-inset: 0px;
  }
  body.persona-design #contact > .content-shell { padding-inline-end: 1.5rem; }
  /* Keep the full ribbon palette, without running bands underneath the links. */
  body.persona-design #contact .contact-edge-ribbons {
    transform: scaleX(.3);
    transform-origin: right center;
  }
}
/* Short desktop/landscape windows should not gain a screenful of empty space. */
@media (max-height: 600px) {
  body.persona-design #contact {
    --contact-min-height: 30rem;
    --contact-space-y: 5rem;
  }
}
/* Top-edge decoration behind the content, ribbons, flower, and other motifs. */
body.persona-design #contact .contact-pill-field {
  position: absolute;
  left: 0;
  top: 0;
  width: calc((min(85vw, 68.75rem) - 14 * var(--pill-gap)) / 15 * 22 + 21 * var(--pill-gap));
  height: var(--contact-pill-height);
  display: flex;
  gap: var(--pill-gap);
  opacity: .65;
  pointer-events: none;
  z-index: -1;
}
body.persona-design #contact .about-pill-column {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--pill-gap);
}
body.persona-design #contact .about-pill {
  flex: 0 0 var(--pill-height);
  border-radius: calc(var(--pill-height) / 2);
  background: var(--hero-yellow-light);
}

/* Education's band pattern turned clockwise: top band becomes rightmost. */
body.persona-design #contact .contact-edge-ribbons {
  position: absolute;
  inset: 0 var(--contact-ribbon-inset, 1.25rem) 0 auto;
  display: flex;
  flex-direction: row-reverse;
  z-index: 0;
  pointer-events: none;
}

body.persona-design #contact .contact-edge-ribbons > span {
  flex: 0 0 var(--band-height);
  width: var(--band-height);
  background: var(--band-color);
}

body.persona-design #contact .contact-flower {
  position: absolute;
  top: calc(var(--contact-flower-size) * -.3 + 2.1875rem);
  right: calc(var(--contact-flower-size) * -.13 + 0.625rem);
  width: calc(var(--contact-flower-size) * var(--contact-flower-scale));
  height: calc(var(--contact-flower-size) * var(--contact-flower-scale));
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 600px) {
  body.persona-design #contact {
    --contact-flower-size: clamp(4rem, 18vw, 6rem);
  }
}

.contact-flower-shadow { fill: var(--palette-amber); }
.contact-flower-face { fill: var(--hero-yellow-light); }

/* Rotate both silhouettes together; the outer shadow offset stays down/right. */
.contact-flower-spin {
  transform-origin: 160px 160px;
  animation: contact-flower-turn var(--contact-flower-period) linear infinite;
  animation-play-state: paused;
}
.contact-flower[data-rotating="true"] .contact-flower-spin {
  animation-play-state: running;
}
@keyframes contact-flower-turn {
  to { transform: rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-flower-spin { animation: none; }
}

/* /assets/themes/persona/project-cards.css */
/* Homepage project previews as case files: black information panels with hard
   offset shadows under each preview. The image and the panel are siblings,
   not nested elevations. Never apply these rules to the playable TV screens. */
body.persona-design #projects {
  --project-panel: var(--palette-black);
  --project-panel-ink: var(--palette-white);
  --project-panel-accent: var(--palette-yellow);
  /* A white offset block with a black outline, raised further on hover. */
  --project-panel-shadow: 0.5rem 0.5rem 0 var(--palette-white), 0.5rem 0.5rem 0 3px var(--palette-black);
  --project-panel-shadow-raised: 0.75rem 0.75rem 0 var(--palette-white), 0.75rem 0.75rem 0 3px var(--palette-black);
}
body.persona-design #projects .project-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  gap: 1.25rem;
}
/* Retire the old whole-card hover silhouette: it joined both pieces together. */
body.persona-design #projects .project-card::after {
  content: none;
  display: none;
  box-shadow: none;
}
body.persona-design #projects .project-card:hover { transform: none; }
body.persona-design #projects .project-media {
  box-shadow: none;
}
/* Only the sticker escapes the preview; the screen still clips its CRT layers. */
body.persona-design #projects .project-media:has(.project-playable-badge) {
  overflow: visible;
}
body.persona-design #projects .project-card:hover .project-media :is(img, video) {
  transform: none;
}
/* Red speech bubble and tilted outlined lettering from the supplied badge.
   The whole sticker is a link; it stays above, and outside, the CRT layers. */
body.persona-design #projects .project-playable-badge {
  top: 0;
  left: auto;
  right: 0;
  translate: 36% -25%;
  display: block;
  width: clamp(6.6rem, 9.6vw, 8.1rem); /* 20% above the original sticker size. */
  aspect-ratio: 5 / 4;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
body.persona-design #projects .project-play-sticker {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(3px 0.25rem 0 var(--palette-black));
  transition: transform 180ms ease-out;
}
body.persona-design #projects .project-play-bubble {
  fill: var(--palette-play-red);
  stroke: var(--palette-white);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
body.persona-design #projects .project-play-letter-outline {
  fill: var(--palette-white);
  stroke: var(--palette-white);
  stroke-width: 9px;
}
body.persona-design #projects .project-play-lettering {
  fill: var(--palette-white);
  stroke: var(--palette-play-red);
  stroke-width: 4px;
  paint-order: stroke fill;
}
body.persona-design #projects .project-playable-badge:is(:hover, :focus-visible) .project-play-sticker {
  transform: rotate(-4deg) scale(1.04);
}
body.persona-design #projects .project-playable-badge:focus-visible {
  outline: 3px solid var(--palette-yellow);
  outline-offset: 2px;
  border-radius: 0.5rem;
}
body.persona-design #projects .project-playable-badge:active .project-play-sticker {
  transform: scale(.96);
}
@media (max-width: 899px) {
  /* Narrow page gutters cannot contain a rightward overhang. Keep the
     complete link and its focus ring inside the preview on phones/tablets. */
  body.persona-design #projects .project-playable-badge { translate: 0 -25%; }
}

body.persona-design #projects .project-content {
  position: relative;
  background: var(--project-panel);
  color: var(--project-panel-ink);
  border: 0;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  box-shadow: var(--project-panel-shadow);
  transition: transform 240ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 240ms cubic-bezier(.16, 1, .3, 1);
}
/* The "FILE 0X" tag on the panel's top edge, styled in full here. The child
   selector outranks the panel's white `.project-content > p` text. */
body.persona-design #projects .project-content > .project-file-index {
  display: inline-block;
  position: absolute;
  top: -1.125rem;
  left: 1.25rem;
  margin: 0;
  padding: 3px 0.75rem;
  background: var(--palette-yellow);
  color: var(--palette-black);
  -webkit-text-fill-color: currentColor;
  font: 600 0.875rem/1.3 'Persona Slim Wide', 'Persona Slim Local', Arial, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: skew(-12deg);
  box-shadow: 3px 3px 0 var(--palette-black);
}
/* The first project leads, full width with its preview beside the panel. */
@media (min-width: 900px) {
  body.persona-design #projects .project-card:first-child {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: none;
    align-items: stretch;
    gap: 1.75rem;
  }
}
body.persona-design #projects .project-content h3,
body.persona-design #projects .project-content h3 span {
  color: var(--project-panel-accent);
  -webkit-text-fill-color: currentColor;
}
body.persona-design #projects .project-content > p {
  color: var(--project-panel-ink);
}
body.persona-design #projects .technology-list li {
  color: var(--hero-yellow-light);
  border-bottom-color: var(--palette-gold);
}
body.persona-design #projects .project-content .project-demo-link {
  background: var(--project-panel-accent);
  border-color: transparent;
  color: var(--palette-black);
  box-shadow: none;
  transition: background-color 180ms ease-out;
}
body.persona-design #projects .project-content .project-demo-link::before {
  content: none;
}
body.persona-design #projects .project-content .project-demo-link:is(:hover, :focus-visible) {
  background: var(--hero-yellow-light);
  border-color: transparent;
  color: var(--palette-black);
  box-shadow: none;
}
body.persona-design #projects .project-content .project-demo-link:active { transform: none; }
body.persona-design #projects .project-content a:focus-visible {
  outline: 2px solid var(--project-panel-accent);
  outline-offset: 0.3125rem;
}
/* Only the panel jumps toward its shadow; the media stays put. */
@media (hover: hover) and (pointer: fine) {
  body.persona-design #projects .project-card:hover .project-content {
    transform: translate(-4px, -4px);
    box-shadow: var(--project-panel-shadow-raised);
  }
}
body.persona-design #projects .project-card:focus-within .project-content {
  transform: translate(-4px, -4px);
  box-shadow: var(--project-panel-shadow-raised);
}
@media (prefers-reduced-motion: reduce) {
  body.persona-design #projects .project-play-sticker { transition: none; }
  body.persona-design #projects .project-playable-badge:is(:hover, :focus-visible, :active) .project-play-sticker {
    transform: none;
  }
  body.persona-design #projects .project-content,
  body.persona-design #projects .project-content .project-demo-link { transition: none; }
  body.persona-design #projects .project-card:is(:hover, :focus-within) .project-content {
    transform: none;
  }
}
/* Role and date under the title (Persona only, from content.yml): a yellow
   save-file label, a skewed divider, then the term in italics. */
body.persona-design #projects .project-content > p.project-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0.375rem 0 0.75rem;
  font-size: var(--content-label-size);
  line-height: 1.4;
}
body.persona-design #projects .project-meta-role {
  color: var(--project-panel-accent);
  -webkit-text-fill-color: currentColor;
  font: 600 0.8125rem/1.4 'Persona Slim Wide', 'Persona Slim Local', Arial, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.persona-design #projects .project-meta-date {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  color: var(--project-panel-ink);
  -webkit-text-fill-color: currentColor;
  font-style: italic;
  font-weight: 500;
}
body.persona-design #projects .project-meta-role + .project-meta-date::before {
  content: '';
  align-self: center;
  width: 0.25rem;
  height: 0.875rem;
  background: var(--project-panel-accent);
  transform: skew(-12deg);
}
@media (max-width: 600px) {
  body.persona-design #projects .project-content > p.project-meta { flex-direction: column; gap: 0.125rem; }
  body.persona-design #projects .project-meta-role + .project-meta-date::before { display: none; }
}

/* /assets/themes/persona/education-settings.css */
/* Special-page-inspired composition: sky ribbon, serif echo and amber frame.
   The credential remains ordinary document content, with room to grow below. */
/* Frame/details progress lives on the card, its only reader. The timing
   values come from scroll-animation-config.js via education-motion.js; the
   trace only runs once that script has set them. */
body.persona-design #education .education-card {
  --education-ribbon-progress: 1;
  --education-frame-progress: clamp(0, (var(--education-ribbon-progress) - var(--education-frame-start)) / (1 - var(--education-frame-start)), 1);
  --education-details-progress: clamp(0, (var(--education-frame-progress) - var(--education-details-start)) / (1 - var(--education-details-start)), 1);
}
body.persona-design #education {
  --education-mask-image: url('/assets/themes/persona/images/revival/education-mask-desktop.svg?v=2');
  /* The mask's band rises above the section (160 of 1400 units) into About. */
  --education-overhang: calc(160 / 1400);
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
  min-height: 76rem;
  padding-block: clamp(18rem, 20vw, 24rem) 14rem;
  background: var(--palette-yellow);
  color: var(--palette-black);
  border: 0;
}
/* No divider line: the blue ribbon grows out of the yellow seam instead. */
body.persona-design #about { border-bottom: 0; }
body.persona-design #education > .education-sky-window {
  position: absolute;
  z-index: 0;
  inset: calc(var(--education-overhang) * -100%) 0 0;
  overflow: hidden;
  background: var(--hero-sky);
  --hero-texture-period: max(3.5px, calc(100vw * 7 / 1920));
  mask-image: linear-gradient(var(--palette-white) 0 0), var(--education-mask-image);
  mask-size: 100% 100%;
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-composite: exclude;
  pointer-events: none;
}
/* About's stripes continue past its bottom edge as tapered tails; the shape
   comes from about-stripe-tails.js, which reads About's mask. */
body.persona-design #education > .about-stripe-tails {
  position: absolute;
  z-index: 1;
  top: -1px;
  left: 0;
  width: 100%;
  height: 12rem;
  visibility: hidden;
  background: var(--hero-sky);
  pointer-events: none;
}
body.persona-design #education > .about-stripe-tails[data-ready] { visibility: visible; }
/* The same treatment above About, where desktop stripes start at its top.
   It lives in the hero stage (About clips its own overflow): above the hero
   art, below the hero's flowers, copy and buttons. */
body.persona-design #home .about-stripe-heads {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 100%;
  visibility: hidden;
  background: var(--hero-sky);
  pointer-events: none;
}
body.persona-design #home .about-stripe-heads[data-ready] { visibility: visible; }
body.persona-design #education .education-sky-window > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body.persona-design #education .education-sky-window::before { z-index: 1; }
body.persona-design #education .education-ribbon-shine {
  position: absolute;
  z-index: 1;
  inset: 0 auto auto 0;
  width: 40%;
  height: var(--education-shine-height, 55%);
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, transparent 20%, var(--palette-white) 50%, transparent 80%);
  mix-blend-mode: screen;
  transform: translateX(-110%);
}
body.persona-design #education .education-ribbon-shine[data-shining] {
  animation: education-ribbon-shine var(--education-ribbon-shine-ms, 900ms) cubic-bezier(.33, 0, .67, 1) both;
}
@keyframes education-ribbon-shine {
  0% { transform: translateX(-110%); opacity: 0; }
  15%, 75% { opacity: .35; }
  100% { transform: translateX(360%); opacity: 0; }
}
body.persona-design #education .education-title-echo {
  position: absolute;
  z-index: 2;
  top: calc(var(--education-overhang) / (1 + var(--education-overhang)) * 100% + 3cqi);
  left: 14%;
  color: var(--palette-white);
  opacity: .32;
  font: italic 400 13.5cqi/1 Georgia, 'Times New Roman', serif;
  letter-spacing: -.04em;
  white-space: nowrap;
  transform: rotate(-10deg);
  user-select: none;
}
body.persona-design #education > .content-shell {
  position: relative;
  z-index: 2;
  display: block;
  width: min(72rem, calc(100% - 3.5rem));
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
}
body.persona-design #education .education-section-heading {
  position: relative;
  isolation: isolate;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 3.5rem;
  padding-bottom: 1.125rem;
}
body.persona-design #education .education-section-heading::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -.5rem auto -.5rem -1.5rem;
  width: 46%;
  border-radius: 1rem;
  background: var(--ref-row);
}
body.persona-design #education .education-section-heading::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: .625rem;
  border-radius: 1rem;
  background: var(--flower-cyan);
}
body.persona-design #education #education-heading {
  width: fit-content;
  margin: 0;
  translate: none;
  transform: none;
  white-space: nowrap;
  text-align: center;
}
body.persona-design #education #education-heading .kinetic-label {
  width: auto;
  padding: 0;
  transform: none;
}
body.persona-design #education .education-horizontal-ribbons { display: none; }
body.persona-design #education .education-card {
  position: relative;
  display: block;
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  padding: clamp(2rem, 4cqi, 4rem);
  background: var(--palette-white);
  border: clamp(8px, .9cqi, 14px) solid var(--config-orange);
  border-radius: 1.5rem;
  box-shadow: none;
  color: inherit;
}
/* The SVG replaces only the paint, never the border's reserved layout space. */
body.persona-design #education .education-frame-trace { display: none; }
body.persona-design #education[data-frame-tracing] .education-card { border-color: transparent; }
body.persona-design #education[data-frame-tracing] .education-frame-trace {
  display: block;
  position: absolute;
  inset: calc(-1 * var(--education-frame-border));
  width: calc(100% + 2 * var(--education-frame-border));
  height: calc(100% + 2 * var(--education-frame-border));
  pointer-events: none;
  overflow: visible;
}
body.persona-design #education .education-frame-trace rect {
  stroke: var(--config-orange);
  stroke-width: var(--education-frame-border);
  stroke-dashoffset: calc(1 - var(--education-frame-progress));
}
body.persona-design #education[data-frame-tracing] :is(.education-details, .education-descriptor) {
  opacity: calc(var(--education-details-opacity) + (1 - var(--education-details-opacity)) * var(--education-details-progress));
  translate: 0 calc(var(--education-details-offset) * (1 - var(--education-details-progress)));
}
body.persona-design #education .education-details {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr);
  align-items: center;
  column-gap: clamp(2rem, 4cqi, 4rem);
  row-gap: 1.25rem;
}
body.persona-design #education .education-heading-row { display: contents; }
body.persona-design #education .education-logo {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
body.persona-design #education .education-details:has(.education-honors) .education-logo { grid-row: 1 / 5; }
body.persona-design #education .education-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: none;
}
body.persona-design #education .education-logo-fallback {
  color: var(--palette-blue);
  font: 700 1.5rem/1.2 var(--content-font);
}
body.persona-design #education .education-details h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: inherit;
  font-size: clamp(1.75rem, 2.8cqi, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-transform: none;
  text-wrap: balance;
}
body.persona-design #education .education-program {
  grid-column: 2;
  max-width: 45ch;
  margin: 0;
  font-size: clamp(1rem, 1.25cqi, 1.2rem);
  line-height: 1.6;
}
body.persona-design #education .education-dates {
  grid-column: 2;
  width: fit-content;
  margin: .25rem 0 0;
  padding: .625rem .875rem;
  background: var(--ref-row);
  color: var(--palette-olive);
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.5;
}
body.persona-design #education .education-honors {
  grid-column: 2;
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--palette-black);
  font-size: .94rem;
  line-height: 1.5;
}
body.persona-design #education .education-honors li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
}
body.persona-design #education .education-honor-name {
  position: relative;
  overflow: hidden;
  padding: .375rem .625rem;
  background: var(--config-orange);
  font-weight: 700;
}
body.persona-design #education .education-honor-name::after {
  content: '';
  position: absolute;
  inset: -30% auto -30% 0;
  width: 50%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, transparent, var(--palette-white), transparent);
  transform: translateX(-180%);
}
body.persona-design #education .education-honor-name[data-shining]::after {
  animation: education-honor-shine var(--education-honor-shine-ms, 650ms) cubic-bezier(.33, 0, .67, 1) both;
}
@keyframes education-honor-shine {
  0% { transform: translateX(-180%); opacity: 0; }
  15%, 75% { opacity: .4; }
  100% { transform: translateX(320%); opacity: 0; }
}
body.persona-design #education .education-honor-terms { font-weight: 400; }
body.persona-design #education .education-descriptor {
  max-width: 65ch;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--palette-gold);
  font-size: 1rem;
  line-height: 1.6;
}
@media (max-width: 899px) {
  body.persona-design #education {
    --education-mask-image: url('/assets/themes/persona/images/revival/education-mask-mobile.svg?v=2');
    --education-overhang: calc(120 / 1700);
    min-height: 52rem;
    padding-block: clamp(12rem, 38vw, 18rem) 12rem;
  }
  body.persona-design #education .education-title-echo {
    top: calc(var(--education-overhang) / (1 + var(--education-overhang)) * 100% + 7cqi);
    left: 6%;
    font-size: 16cqi;
  }
  body.persona-design #education > .content-shell { width: min(100% - 2.5rem, 42.5rem); }
  body.persona-design #education .education-section-heading { margin-bottom: 2.5rem; }
  body.persona-design #education #education-heading { font-size: clamp(2.25rem, 8.5cqi, 3rem); }
  body.persona-design #education .education-card { padding: 1.5rem; border-radius: 1rem; }
  body.persona-design #education .education-details { display: flex; flex-direction: column; gap: 1.25rem; text-align: center; }
  body.persona-design #education .education-logo { order: -1; width: min(100%, 16rem); margin-bottom: .75rem; }
  body.persona-design #education .education-details h3 { font-size: clamp(1.5rem, 5.5cqi, 2rem); }
  body.persona-design #education .education-dates { font-size: .875rem; }
  body.persona-design #education .education-honors { font-size: .875rem; }
  body.persona-design #education .education-honors li { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  body.persona-design #education[data-frame-tracing] .education-card { border-color: var(--config-orange); }
  body.persona-design #education[data-frame-tracing] .education-frame-trace { display: none; }
  body.persona-design #education[data-frame-tracing] :is(.education-details, .education-descriptor) { opacity: 1; translate: none; }
  body.persona-design #education .education-ribbon-shine[data-shining],
  body.persona-design #education .education-honor-name[data-shining]::after { animation: none; opacity: 0; }
}

/* /assets/themes/persona/experience-save-menu.css */
/* Save-menu preview. Pixel samples from reference/album/savemenu.jpg (2560×1440):
   field (40,40) #FFB403; yellow patch (2200,500)-(2300,600) mode #FEDC34;
   lettering patch (710,390)-(1260,480) #AD6900; checker #000000/#1B1B1B;
   star (208,850) #2E2E2E. The selected disc uses the hero's blue, never pink. */
body.persona-design #experience {
  --save-yellow: #FEDC34;
  --save-orange: #FFB403;
  --save-reference-ink: #AD6900;
  --save-black: #000000;
  --save-check: #1B1B1B;
  --save-star: #2E2E2E;
  --save-white: #FFFFFF;
  --save-disc: #FFF94B;
  --save-disc-light: #FFFDB4;
  --save-disc-shadow: #F3B900;
  --save-selected-disc: var(--hero-sky, #04C4EB);
  --save-selected-disc-light: color-mix(in srgb, var(--save-selected-disc) 35%, var(--save-white));
  --save-selected-disc-shadow: color-mix(in srgb, var(--save-selected-disc) 65%, #003858);
  /* 64% keeps small text at ≥4.5:1 even on the orange end of the row gradient. */
  --save-ink: color-mix(in srgb, var(--save-reference-ink) 64%, var(--save-black));
}
body.persona-design #experience {
  padding-block: clamp(1.75rem, 4vw, 3rem) 2rem;
  background: linear-gradient(115deg, var(--save-orange), var(--save-yellow) 65%, var(--save-disc));
  color: var(--save-ink);
}
body.persona-design #experience > .content-shell {
  background: transparent;
  color: inherit;
  border: 0;
  padding: 0;
}
body.persona-design #experience .section-header { display: block; margin-bottom: 1rem; }
body.persona-design #experience .section-header h2 { margin-bottom: 0; }
body.persona-design #experience .section-header p { color: var(--save-ink); }
body.persona-design #experience .section-header p {
  font-family: 'Persona Slim Local', Arial, sans-serif;
}
body.persona-design #experience .experience-save-menu { position: relative; }
body.persona-design #experience .experience-save-list {
  position: relative;
  display: grid;
  grid-template-rows: repeat(3, var(--experience-row-height));
  /* Paged-out rows use display:none; let enlarged end circles overhang. */
  overflow: visible; overflow-anchor: none;
  height: calc(var(--experience-row-height) * var(--experience-visible-count, 3));
}
body.persona-design #experience .experience-save-option {
  /* Let the marker column give up space before the description column. */
  --sphere-size: clamp(5rem, calc(100vw - 59.375rem), 15.625rem);
  --sphere-width: var(--sphere-size);
  --sphere-stagger: clamp(0.75rem, calc(var(--sphere-size) * .109), 2.25rem);
  --sphere-offset: 0px;
  --row-left-padding: max(4rem, calc((100vw - 80rem) / 2));
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--sphere-width) minmax(0, 1fr);
  align-items: center;
  gap: calc(clamp(1.25rem, 3vw, 2.75rem) + 1.125rem);
  min-height: 15.625rem;
  height: var(--experience-row-height, auto);
  scroll-margin-top: 6rem;
  padding: 0.5rem clamp(1.5rem, 4vw, 5rem) 0.5rem var(--row-left-padding);
  cursor: pointer;
  color: var(--save-ink);
  background: transparent;
}
body.persona-design #experience .experience-save-option[hidden],
body.persona-design #experience .experience-save-menu:not([data-ready]) .experience-save-option:nth-child(n+4) { display: none; }
body.persona-design #experience .experience-save-menu[data-measuring] .experience-save-option {
  display: grid !important;
  position: absolute;
  width: 100%;
  height: auto;
  visibility: hidden;
  pointer-events: none;
}
body.persona-design #experience .experience-save-option[aria-selected="true"] {
  z-index: 2;
  color: var(--save-disc);
  background: repeating-conic-gradient(var(--save-black) 0 25%, var(--save-check) 0 50%) 0 0 / 0.75rem 0.75rem;
}
/* Keyboard focus is shown by underlining the selected title, not an outline box. */
body.persona-design #experience .experience-save-list:focus { outline: none; }
/* "To be continued" rows pad both ends so the selection stays in the middle. */
body.persona-design #experience .experience-save-filler { cursor: default; }
/* Deep-gold lettering stays legible across the orange-to-yellow field; the
   bright yellow underline keeps the requested two-color Persona treatment. */
body.persona-design #experience .experience-save-filler .experience-save-continued {
  --continued-gold: color-mix(in srgb, var(--palette-gold) 38%, var(--save-black));
  width: fit-content;
  margin: 0;
  color: var(--continued-gold) !important;
  -webkit-text-fill-color: currentColor;
  text-decoration-line: underline;
  text-decoration-color: var(--palette-yellow);
  text-decoration-thickness: .12em;
  text-underline-offset: .16em;
  text-shadow: 2px 2px 0 color-mix(in srgb, var(--palette-yellow) 82%, var(--palette-white));
  /* Same face as the Education "University of Toronto" heading, in italic. */
  font: italic 800 clamp(2.4rem, 5vw, 4.2rem)/1.1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
body.persona-design #experience .experience-save-filler .experience-save-number {
  color: var(--save-ink) !important;
  -webkit-text-fill-color: currentColor;
}
body.persona-design #experience .experience-save-list:focus-visible .experience-save-option[aria-selected="true"] h3 {
  text-decoration: underline;
  text-underline-offset: 0.3125rem;
}
body.persona-design #experience .experience-save-option[data-position="first"] { grid-row: 1; --sphere-offset: calc(-1 * var(--sphere-stagger)); }
body.persona-design #experience .experience-save-option[data-position="middle"] { grid-row: 2; }
body.persona-design #experience .experience-save-option[data-position="last"] { grid-row: 3; --sphere-offset: var(--sphere-stagger); }
body.persona-design #experience .experience-save-option:hover:not([aria-selected="true"], .experience-save-filler) { box-shadow: inset 0.25rem 0 var(--save-ink); }
body.persona-design #experience .experience-save-copy { position: relative; grid-column: 2; }
body.persona-design #experience .experience-save-copy :is(h3, p, li, strong, span) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor;
  font-family: 'Persona Slim Local', Arial, sans-serif;
}
body.persona-design #experience .experience-save-heading-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0 0 0.5rem;
}
body.persona-design #experience .experience-save-copy h3 {
  margin: 0;
  font: 700 var(--content-title-size)/1.3 'Persona Slim Local', Arial, sans-serif;
  text-transform: none;
  letter-spacing: -.015em;
  -webkit-text-stroke: 0;
}
/* The shared `logo` thumbnail is for /original/; Persona uses disc marks. */
body.persona-design #experience .experience-save-logo-frame { display: none; }
/* Company mark printed on the disc, like the sakura on P4G's selected save
   disc: tone-on-tone on gold discs, pale on the selected blue one. */
body.persona-design #experience .experience-save-mark {
  position: absolute;
  right: -4%;
  bottom: -2%;
  width: 66%;
  aspect-ratio: 1;
  background: var(--save-disc-shadow);
  opacity: .5;
  -webkit-mask: var(--save-mark) center / contain no-repeat;
  mask: var(--save-mark) center / contain no-repeat;
  transform: rotate(-12deg);
  pointer-events: none;
}
body.persona-design #experience [aria-selected="true"] .experience-save-mark {
  background: var(--save-white);
  opacity: .62;
}
/* Full-color company logo after the name, on a white save-file chip so brand
   colors read on both the gold rows and the black selected band. */
body.persona-design #experience .experience-save-name-logo {
  display: inline-block;
  box-sizing: content-box;
  /* A fixed square keeps the chip sized before the lazy image loads. */
  width: 1.1em;
  height: 1.1em;
  margin-left: 0.5em;
  padding: 0.2em 0.35em;
  vertical-align: -0.3em;
  object-fit: contain;
  border: 2px solid var(--save-black);
  border-radius: 0.375rem;
  background: var(--save-white);
  box-shadow: 2px 2px 0 var(--save-black);
}
body.persona-design #experience .experience-save-meta { margin: 0 0 0.5rem; font-size: .875rem; }
body.persona-design #experience .experience-save-date { font-style: italic; }
body.persona-design #experience .experience-save-summary { list-style: none; margin: 0; padding: 0; max-width: none; font-size: .875rem; line-height: 1.35; }
body.persona-design #experience .experience-save-summary li + li { margin-top: 0.25rem; }
body.persona-design #experience .experience-save-copy .experience-save-impact {
  display: table;
  max-width: 100%;
  margin: 0.75rem 0 0;
  padding: 3px 0.75rem;
  border-radius: 62.4375rem;
  background: var(--save-ink);
  color: var(--save-disc-light) !important;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.3;
}
body.persona-design #experience [aria-selected="true"] .experience-save-copy .experience-save-impact {
  background: var(--save-disc);
  color: var(--save-black) !important;
}
body.persona-design #experience .experience-save-sphere {
  --sphere-glow: var(--save-disc-light);
  position: absolute;
  left: calc(var(--row-left-padding) + var(--sphere-offset));
  top: 50%;
  width: var(--sphere-width);
  height: var(--sphere-size);
  transform: translateY(-50%);
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, var(--save-disc-light), var(--save-disc) 60%, var(--save-disc-shadow));
  color: var(--save-ink) !important;
  font: italic 700 clamp(2.2rem, calc(var(--sphere-size) * .7), 11rem)/1 'Persona Slim Local', Arial, sans-serif;
}
body.persona-design #experience .experience-save-number {
  position: absolute;
  left: 10%;
  top: 15%;
  display: block;
  transform: rotate(12deg);
}
/* Override the general yellow-background span color on the numeral itself. */
body.persona-design #experience .experience-save-option[aria-selected="false"] .experience-save-number {
  color: var(--save-ink) !important;
  -webkit-text-fill-color: currentColor;
}
body.persona-design #experience .experience-save-option[aria-selected="true"] .experience-save-number {
  color: var(--save-black) !important;
  -webkit-text-fill-color: currentColor;
}
body.persona-design #experience [aria-selected="true"] .experience-save-sphere {
  --sphere-glow: var(--save-selected-disc-light);
  color: var(--save-black) !important;
  transform: translateY(-50%) scale(1.3);
  background: radial-gradient(circle at 30% 24%, var(--save-selected-disc-light), var(--save-selected-disc) 46%, var(--save-selected-disc-shadow));
}
body.persona-design #experience .experience-save-sphere::before,
body.persona-design #experience .experience-save-sphere::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--save-white), var(--sphere-glow) 35%, transparent 72%);
  filter: blur(0.5rem);
  opacity: .65;
  pointer-events: none;
}
body.persona-design #experience .experience-save-sphere::before { top: -5%; left: -5%; }
body.persona-design #experience .experience-save-sphere::after {
  top: 18%; left: -38%; width: 100%; height: 110%;
  background: var(--save-white); opacity: .25; filter: none;
  transform: rotate(-28deg);
}
/* A pale circular reflection drifts inside the selected blue disc. With a
   90% diameter and these edge offsets, roughly one third of its area falls
   outside the sphere at each turnaround. The sphere clips that overflow. */
body.persona-design #experience [aria-selected="true"] .experience-save-sphere::after {
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  transform: translate(-28%, 0);
  animation: experience-save-reflection-drift 4.8s ease-in-out infinite alternate;
  animation-play-state: paused;
}
body.persona-design #experience [data-reflection-active="true"] [aria-selected="true"] .experience-save-sphere::after {
  animation-play-state: running;
}
@keyframes experience-save-reflection-drift {
  0% { transform: translate(-32%, -12%); }
  50% { transform: translate(-24%, 0); }
  100% { transform: translate(-32%, 12%); }
}
@media (prefers-reduced-motion: reduce) {
  body.persona-design #experience [aria-selected="true"] .experience-save-sphere::after {
    animation: none;
  }
}
body.persona-design #experience .experience-save-controls {
  position: absolute;
  /* Keep each 44px arrow fully on the yellow row outside the selection. */
  top: calc(var(--selected-row-top, 13.75rem) - 3.5rem);
  height: calc(var(--selected-row-height, 13.75rem) + 7rem);
  width: 2.75rem; margin-left: 0.5rem; z-index: 3;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
}
body.persona-design #experience .experience-save-controls button {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  flex: 0 0 2.75rem;
  padding: 0.625rem; border: 0; border-radius: 0;
  background: transparent !important; color: var(--save-black) !important;
  pointer-events: auto;
  box-shadow: none !important; cursor: pointer;
}
body.persona-design #experience .experience-save-controls svg { width: 1.5rem; height: 1.5rem; fill: currentColor; stroke: var(--save-yellow); stroke-width: 2px; paint-order: stroke fill; }
body.persona-design #experience .experience-save-controls button:disabled { opacity: .4; cursor: default; }
body.persona-design #experience .experience-save-controls button:focus-visible { outline: 3px solid var(--save-black); outline-offset: 2px; }
body.persona-design #experience .experience-save-stars { display: none; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
body.persona-design #experience [aria-selected="true"] .experience-save-stars { display: block; }
body.persona-design #experience .experience-save-stars i {
  position: absolute; width: 4.25rem; height: 4.25rem;
  background: var(--save-star); opacity: .65;
  clip-path: polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%);
}
body.persona-design #experience .experience-save-stars i:nth-child(1) { left: 3%; top: 40%; }
body.persona-design #experience .experience-save-stars i:nth-child(2) { left: 40%; top: 6%; width: 2.375rem; height: 2.375rem; }
body.persona-design #experience .experience-save-stars i:nth-child(3) { right: 16%; bottom: 8%; }
body.persona-design #experience .experience-save-stars i:nth-child(4) { right: 2%; top: 10%; width: 6.25rem; height: 6.25rem; }
@media (max-width: 899px) {
  body.persona-design #experience .experience-save-option { --sphere-size: clamp(3.5rem, 18vw, 5rem); --sphere-stagger: 0.75rem; }
  body.persona-design #experience .experience-save-sphere { font-size: 2.8rem; }
}
@media (max-width: 600px) {
  body.persona-design #experience .experience-save-filler .experience-save-continued {
    max-width: 100%;
    font-size: clamp(1.4rem, 6vw, 2.1rem);
  }
  body.persona-design #experience { padding-bottom: max(1.75rem, env(safe-area-inset-bottom)); }
  body.persona-design #experience .section-header { margin-bottom: 0.5rem; }
  body.persona-design #experience .experience-save-menu { padding-top: 3.75rem; }
  body.persona-design #experience .experience-save-list {
    display: flex;
    flex-direction: column;
    height: auto !important;
  }
  body.persona-design #experience .experience-save-option {
    --row-left-padding: 1.125rem;
    --sphere-size: 3.5rem;
    --sphere-width: 3.5rem;
    --sphere-stagger: 0px;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 1rem;
    min-height: 5.75rem;
    height: auto !important;
    padding: 0.875rem 1rem 0.875rem var(--row-left-padding);
  }
  body.persona-design #experience .experience-save-option[aria-selected="true"] {
    min-height: 0;
    padding-block: 1.375rem;
  }
  body.persona-design #experience .experience-save-copy { grid-column: 2; }
  body.persona-design #experience .experience-save-copy h3 {
    font-size: 1.08rem;
    line-height: 1.22;
  }
  body.persona-design #experience .experience-save-heading-row { margin-bottom: 0.3125rem; }
  body.persona-design #experience .experience-save-meta {
    margin-bottom: 0;
    font-size: .875rem;
    line-height: 1.35;
  }
  body.persona-design #experience .experience-save-summary,
  body.persona-design #experience .experience-save-copy .experience-save-impact {
    display: none;
  }
  body.persona-design #experience .experience-save-option[aria-selected="true"] .experience-save-summary {
    display: block;
    margin-top: 0.75rem;
    font-size: .975rem;
    line-height: 1.5;
  }
  body.persona-design #experience .experience-save-option[aria-selected="true"] .experience-save-summary li:nth-child(n+2) {
    display: none;
  }
  body.persona-design #experience .experience-save-option[aria-selected="true"] .experience-save-impact {
    display: table;
    margin-top: 0.875rem;
    padding: 0.3125rem 0.75rem;
    font-size: .875rem;
  }
  body.persona-design #experience .experience-save-sphere {
    left: var(--row-left-padding);
    font-size: 2.35rem;
  }
  body.persona-design #experience [aria-selected="true"] .experience-save-sphere {
    transform: translateY(-50%) scale(1.12);
  }
  body.persona-design #experience .experience-save-controls {
    top: 0;
    right: 0.875rem;
    width: 6.25rem;
    height: 2.75rem;
    margin: 0;
    flex-direction: row;
    justify-content: space-between;
  }
}
/* The band is outside the animated rows: only badges and metadata travel.
   Three settled rows plus a temporary outgoing row are clipped to this window. */
body.persona-design #experience .experience-save-menu[data-ready] { isolation: isolate; }
body.persona-design #experience .experience-save-menu[data-ready] .experience-save-list {
  overflow: clip;
  /* Also clip promoted/absolutely positioned exit layers at the viewport. */
  clip-path: inset(0);
}
body.persona-design #experience .experience-save-band {
  position: absolute;
  inset-inline: 0;
  top: var(--selected-row-top);
  height: var(--selected-row-height);
  z-index: -1;
  pointer-events: none;
  background: repeating-conic-gradient(var(--save-black) 0 25%, var(--save-check) 0 50%) 0 0 / 0.75rem 0.75rem;
}
body.persona-design #experience .experience-save-band .experience-save-stars { display: block; }
body.persona-design #experience .experience-save-menu[data-ready] .experience-save-option { background: transparent; }
body.persona-design #experience .experience-save-menu[data-ready] .experience-save-option .experience-save-stars { display: none; }
body.persona-design #experience .experience-save-option[data-leaving] {
  position: absolute;
  inset-inline: 0;
  grid-area: auto;
  top: var(--experience-exit-top);
  height: var(--experience-exit-height);
  pointer-events: none;
}
@media (max-width: 600px) {
  /* Reserve the tallest expanded entry and compact neighbour once, keeping
     the band, controls and following section still through every selection. */
  body.persona-design #experience .experience-save-menu[data-ready] .experience-save-list {
    display: grid;
    grid-template-rows: var(--experience-compact-height) var(--experience-row-height) var(--experience-compact-height);
    height: calc(var(--experience-row-height) + 2 * var(--experience-compact-height)) !important;
  }
  body.persona-design #experience .experience-save-menu[data-ready] .experience-save-option {
    height: 100% !important;
  }
  body.persona-design #experience .experience-save-menu[data-ready] .experience-save-option[data-leaving] {
    height: var(--experience-exit-height) !important;
  }
}
/* Measurement must override the responsive row heights, including after resize. */
body.persona-design #experience .experience-save-menu[data-measuring] .experience-save-option {
  height: auto !important;
}

/* /assets/themes/persona/project-categories.css */
/* P4G Config-style category filters; no shared/original-design selectors. */
body.persona-design #projects .project-category-controls {
  --category-gap: .375rem;
  --category-bar-padding: .5rem;
  --category-tab-padding: .65rem 1rem;
  --category-target: 2.75rem;
  --category-margin: 2rem;
  --category-count-gap: .75rem;
  --category-font-size: 1rem;
  --category-count-size: .875rem;
  --category-focus-width: 2px;
  --category-focus-offset: 3px;
  margin-block-end: var(--category-margin);
}
body.persona-design #projects .project-category-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--category-gap);
  padding: var(--category-bar-padding);
  background: var(--ref-band);
}
body.persona-design #projects .project-category-bar .project-category-tab {
  flex: 1 1 auto;
  min-height: var(--category-target);
  padding: var(--category-tab-padding);
  border: 0;
  border-radius: var(--ref-radius);
  background: var(--ref-tab-idle);
  color: var(--palette-white);
  font-family: var(--menu-font);
  font-size: var(--category-font-size);
  line-height: 1.2;
  text-transform: uppercase;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}
body.persona-design #projects .project-category-bar .project-category-tab:is(:hover, :focus-visible),
body.persona-design #projects .project-category-bar .project-category-tab[aria-pressed='true'] {
  background: var(--config-orange);
  color: var(--palette-black);
  box-shadow: none;
}
body.persona-design #projects .project-category-bar .project-category-tab:focus-visible {
  outline: var(--category-focus-width) solid var(--config-lime);
  outline-offset: var(--category-focus-offset);
}
body.persona-design #projects .project-category-count {
  margin: var(--category-count-gap) 0 0;
  color: var(--palette-black);
  font-family: var(--content-font);
  font-size: var(--category-count-size);
}
body.persona-design #projects :is(.project-category-controls, .project-card)[hidden] {
  display: none;
}

/* /assets/themes/persona/desktop-scaling.css */
/* Owner-approved desktop canvas: 1440px = 100%, 900px = 75%, cap 115%.
   The rem contribution preserves text growth under browser zoom. Phones retain
   the existing 16px root. Never use CSS/JS zoom: scroll geometry stays native. */
@media (min-width: 900px) {
  html.persona-root { font-size: clamp(75%, calc(1rem + (100vw - 1440px) / 135), 115%); }
  body.persona-design {
    --content-body-size: max(14px, 1rem);
    --content-label-size: max(14px, .875rem);
    font-size: var(--content-body-size);
  }
  /* Shared-source dimensions need Persona overrides, not edits to site.css. */
  body.persona-design .content-shell { width: min(73.75rem, calc(100% - 3.5rem)); }
  body.persona-design .nav-shell { width: min(80rem, calc(100% - 2.5rem)); }
  body.persona-design .site-header { min-height: 4rem; }
  body.persona-design .page-section { padding-block: 9rem; }
  body.persona-design .section-header {
    grid-template-columns: 1fr minmax(17.5rem, .8fr);
    gap: 3.5rem;
    margin-bottom: 3.5rem;
  }
  body.persona-design #skills .skills-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.persona-design .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
  body.persona-design .case-study-prose { font-size: max(14px, 1.08rem); }
  body.persona-design .case-study-summary { font-size: max(14px, 1.125rem); }
  body.persona-design .case-study-meta :is(dt, dd, li),
  body.persona-design .case-study-hero-media figcaption { font-size: max(14px, .875rem); }

  /* A width-based stage keeps every poster element on the same coordinate
     system. SVG internal coordinates and animation geometry remain unchanged. */
  body.persona-design :is(#home, #about) {
    container-type: inline-size;
    max-width: 90rem;
    margin-inline: auto;
  }
  body.persona-design .hero-top-extension {
    max-width: 90rem;
    left: 50%;
    transform: translateX(-50%);
  }
  body.persona-design #home { min-height: 0; }
  body.persona-design #home .hero-visual-stage { min-height: 52.777778cqi; }
  body.persona-design #home .hero-reference-copy { left: 6cqi; width: 42.361111cqi; }
  body.persona-design #home .hero-reference-copy h1 {
    font-size: 6.2cqi;
    line-height: .95;
    text-shadow: .347222cqi .347222cqi 0 var(--palette-white);
  }
  body.persona-design #home .hero-reference-copy p {
    font-size: 2.3cqi;
    margin: 2cqi 0 0 .555556cqi;
    padding: .555556cqi .972222cqi .694444cqi;
  }
  body.persona-design #home .hero-portrait-frame { width: 41cqi; }
  body.persona-design #home .hero-portrait-monogram {
    font-size: 15.555556cqi;
    -webkit-text-stroke-width: .416667cqi;
    text-shadow: .347222cqi .347222cqi 0 var(--palette-black);
  }
  body.persona-design #home .hero-actions { left: 6cqi; bottom: 4.861111cqi; }
  body.persona-design #home .hero-links { gap: 1.25cqi; }
  body.persona-design #home .hero-links .text-link {
    font-size: 1.111111cqi;
    padding: .833333cqi 1.25cqi;
  }
  body.persona-design #home .hero-name-flower { width: 4.444444cqi; }
  body.persona-design #home .hero-left-flower,
  body.persona-design #home .hero-right-dark-flower { width: 7cqi; }
  body.persona-design #home .hero-right-light-flower { width: 4cqi; }
  body.persona-design #about {
    /* Let the sky reach the viewport edges at full-screen widths. */
    max-width: none;
    padding: 0 0 7rem;
    min-height: max(96rem, 152.7778vw);
  }
  body.persona-design #education { min-height: 76rem; }
  body.persona-design #about .about-status-stripes { width: 16cqi; }
  body.persona-design #about .about-corner-ribbons { width: 42cqi; }
  body.persona-design #about > .content-shell .section-body { width: 100%; }
  body.persona-design #about .section-body .prose p { font-size: max(14px, 1.25rem); }
}

/* /assets/themes/persona/education-skills-transition.css */
/* Keep the live section boxes, anchors, and the About/Education seam intact.
   The existing ribbon/title and framed card retreat together beneath Skills. */
body.persona-design #education[data-education-skills-outgoing] > :is(.education-sky-window, .content-shell) {
  translate: 0 var(--education-exit-offset, 0px);
}
body.persona-design #education[data-education-skills-moving] > :is(.education-sky-window, .content-shell) {
  will-change: translate;
}
body.persona-design #skills[data-education-skills-incoming] {
  position: relative;
  isolation: isolate;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  body.persona-design #education[data-education-skills-outgoing] > :is(.education-sky-window, .content-shell) {
    translate: none;
    will-change: auto;
  }
}

/* /assets/themes/persona/scroll-presence.css */
/* About shockwave tuning: swap this token to change the expanding ring color. */
body.persona-design #about {
  --about-shockwave-color: var(--palette-olive);
}

/* Content is fully readable in the viewport's middle; only the edges recede.
   Individual scale preserves existing hover/reveal transforms and page layout. */
body.persona-design.page-home [data-scroll-presence] {
  opacity: var(--scroll-opacity, 1);
  scale: var(--scroll-scale, 1);
  transform-origin: center;
}
body.persona-design.page-home [data-scroll-presence]:focus-within {
  opacity: 1;
  scale: 1;
}
@media (prefers-reduced-motion: reduce) {
  body.persona-design.page-home [data-scroll-presence] { opacity: 1; scale: 1; }
}

/* About has its own scroll timeline; backgrounds meet without a separator. */
body.persona-design.page-home #home { border-bottom: 0; }
body.persona-design.page-home :is(#home, #about) { background-color: var(--palette-yellow); }
body.persona-design.page-home #about[data-about-scroll] > .content-shell > .section-body {
  transform: translateX(calc((1 - var(--about-copy-progress, 1)) * 18px));
}
body.persona-design.page-home #about[data-about-scroll] h2::after {
  transform-origin: left center;
  transform: skewX(-16deg) scaleX(calc(.5 + var(--about-copy-progress, 1) * .5));
}
/* Move the complete fan along its diagonal, preserving the connected stripes. */
body.persona-design.page-home #about[data-about-scroll] > .about-corner-ribbons {
  opacity: var(--about-ribbon-progress, 1);
  transform: translate(
    calc((1 - var(--about-ribbon-progress, 1)) * 75%),
    calc((1 - var(--about-ribbon-progress, 1)) * 55%)
  );
}
/* Right-edge stripes drop from the top, left stripe first; the last one lags
   by --about-stripes-stagger. Scrolling back retracts them in reverse. */
body.persona-design.page-home #about[data-about-scroll] .about-status-stripe-bands rect {
  transform-box: fill-box;
  transform-origin: right bottom;
  scale: 1 clamp(0, calc(var(--about-stripes-progress, 1) * (1 + var(--about-stripes-stagger, .4))
    - var(--stripe) / max(1, var(--stripe-count) - 1) * var(--about-stripes-stagger, .4)), 1);
}
body.persona-design.page-home #about[data-about-scroll] .about-status-stripe-shade {
  opacity: var(--about-stripes-progress, 1);
}
/* Do not multiply About's new reveal by the earlier one-shot item reveal. */
body.persona-design.page-home #about .reveal-item {
  opacity: 1;
  transform: none;
  transition: none;
}
html.about-scroll-pending body.persona-design #about > :is(.about-legacy-art, .about-corner-ribbons, .about-status-stripes) { opacity: 0; }
body.persona-design.page-home #about[data-about-scroll] > .content-shell > :focus-within { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body.persona-design.page-home #about > :is(.about-legacy-art, .content-shell, .about-corner-ribbons, .about-status-stripes) { opacity: 1 !important; }
  body.persona-design.page-home #about .about-growing-rings { transform: none !important; }
  body.persona-design.page-home #about > .about-corner-ribbons { transform: none !important; }
  body.persona-design.page-home #about .about-status-stripe-bands rect { scale: none !important; }
  body.persona-design.page-home #about .about-status-stripe-shade { opacity: 1 !important; }
  body.persona-design.page-home #about[data-about-scroll] > .content-shell > .section-body { transform: none; }
  body.persona-design.page-home #about[data-about-scroll] h2::after { transform: skewX(-16deg); }
}

body.persona-design #about .about-outer-ring { fill: none; stroke: var(--palette-gold); }
body.persona-design #about .about-shockwave {
  fill: none;
  stroke: var(--about-shockwave-color);
  stroke-width: 38px;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 950px -180px;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.persona-design #about .about-shockwave { display: none; }
}

/* Education retains its ribbon entrance; pills now belong to Contact. */
body.persona-design #education[data-decor-scroll] .education-horizontal-ribbons {
  transform: translateX(calc((1 - var(--education-bars-progress, 1)) * 100vw));
}
/* A settings-screen sweep: bands arrive first; the transparent crest settles
   into place as the school record enters. Content is readable at every point. */
body.persona-design #education[data-decor-scroll] .education-horizontal-ribbons > span:nth-child(even) {
  transform: translateX(calc((1 - var(--education-bars-progress, 1)) * 12vw));
}
/* The Special-page credential stays still and readable while its sky moves. */
body.persona-design #education[data-decor-scroll] .education-logo { transform: none; }
body.persona-design #education[data-decor-scroll] #education-heading::after {
  transform-origin: left center;
  transform: skewX(-16deg) scaleX(calc(.5 + var(--education-entry-progress, 1) * .5));
}
@media (prefers-reduced-motion: reduce) {
  body.persona-design #education :is(.education-horizontal-ribbons, .education-horizontal-ribbons > span, .education-logo) {
    transform: none !important;
  }
  body.persona-design #education #education-heading::after { transform: skewX(-16deg); }
}

/* Portrait frames turn in from opposite sides, tied to the About scroll reveal. */
body.persona-design #about[data-about-scroll] .about-picture-frame {
  --picture-angle: -12deg;
  opacity: var(--picture-progress, 1);
  transform-origin: center 80%;
  transform: translateY(calc((1 - var(--picture-progress, 1)) * 40px))
    rotate(calc((1 - var(--picture-progress, 1)) * var(--picture-angle)))
    scale(calc(.94 + var(--picture-progress, 1) * .06));
}
body.persona-design #about[data-about-scroll] .about-picture-frame:nth-child(2) { --picture-angle: 12deg; }
@media (prefers-reduced-motion: reduce) {
  body.persona-design #about .about-picture-frame { transform: none !important; opacity: 1 !important; }
}

/* Ring/shockwave < stripe band < reading content and corner fan. */
body.persona-design #about .about-legacy-art { z-index: 0; }
body.persona-design #about > .hero-about-art { z-index: 2; }
body.persona-design #about > .about-corner-ribbons { z-index: 3; }
body.persona-design #about > :is(.content-shell, .about-picture-placeholders) { z-index: 4; }

/* /assets/themes/persona/about-title.css */
/* Character-page lettering changes color at the actual sky/mask boundary.
   The readable heading keeps the site's original typography. */
body.persona-design #about {
  container-type: inline-size;
  --about-title-size: 26cqi;
  --about-title-top: 20cqi;
  /* Reserve the serif's ascenders/descenders as well as its line box. The
     readable heading must stay clear when OS font metrics or zoom change. */
  --about-heading-top: max(48cqi,
    calc(var(--about-title-top) + var(--about-title-size) * 1.2 + 2rem),
    var(--about-content-top, 12rem));
}
body.persona-design #about > .content-shell {
  padding-top: var(--about-heading-top);
}
body.persona-design #about > .about-title-echo {
  --about-title-shadow-x: clamp(3px, .55cqi, 8px);
  --about-title-shadow-y: clamp(2px, .35cqi, 5px);
  --hero-texture-period: max(3.5px, calc(100vw * 7 / 1920));
  position: absolute;
  z-index: 3;
  inset: 0;
  color: var(--palette-white);
  font: italic 400 var(--about-title-size)/1 Georgia, 'Times New Roman', serif;
  letter-spacing: -.04em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
body.persona-design #about .about-title-lettering {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding-top: var(--about-title-top);
}
/* Invert the full-section silhouette before painting the offset shadow.
   Clipping the wrapper also contains its soft edge at the yellow boundary. */
body.persona-design #about .about-title-sky-shadow {
  position: absolute;
  inset: 0;
  mask-image: linear-gradient(var(--palette-white) 0 0), var(--about-sky-mask-image);
  mask-mode: alpha;
  mask-size: cover;
  mask-position: center top;
  mask-repeat: no-repeat;
  mask-composite: exclude;
}
body.persona-design #about .about-title-lettering--shadow {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: repeating-linear-gradient(to bottom,
    var(--flower-cyan) 0 var(--hero-texture-row-2, calc(var(--hero-texture-period) * 2 / 7)),
    var(--palette-cyan) var(--hero-texture-row-2, calc(var(--hero-texture-period) * 2 / 7)) var(--hero-texture-row-4, calc(var(--hero-texture-period) * 4 / 7)),
    var(--palette-blue) var(--hero-texture-row-4, calc(var(--hero-texture-period) * 4 / 7)) var(--hero-texture-row-5, calc(var(--hero-texture-period) * 5 / 7)),
    var(--flower-cyan) var(--hero-texture-row-5, calc(var(--hero-texture-period) * 5 / 7)) var(--hero-texture-period));
  background-position-y: calc(var(--hero-texture-offset, 0px) - var(--about-title-shadow-y));
  background-clip: text;
  transform: translate(var(--about-title-shadow-x), var(--about-title-shadow-y));
  filter: drop-shadow(1px 1px 1px var(--palette-cyan));
}
/* Match the full-section mask's image, bounds and sizing, not the text box.
   The stronger warm fill stays distinct from the white in the CRT openings. */
body.persona-design #about .about-title-lettering--yellow {
  color: color-mix(in srgb, var(--palette-yellow) 60%, var(--palette-white));
  mask-image: var(--about-sky-mask-image);
  mask-mode: alpha;
  mask-size: cover;
  mask-position: center top;
  mask-repeat: no-repeat;
}
body.persona-design #about .about-heading h2 {
  background: transparent;
}
/* Center the stretched label itself, not its narrower pre-transform box. */
body.persona-design #about .about-heading h2 .kinetic-label {
  width: 100%;
  padding-inline-start: 0;
  transform-origin: center;
}
@media (max-width: 899px) {
  body.persona-design #about {
    --about-title-size: 28cqi;
    --about-title-top: 24cqi;
    --about-heading-top: max(65cqi,
      calc(var(--about-title-top) + var(--about-title-size) * 1.2 + 2rem),
      var(--about-content-top, 3rem));
    /* Finish About's own stripes before the incoming Education ribbon.
       The reserve fits a 150px tapered tail, its overhang, and clear space. */
    --about-art-clearance: clamp(16rem, 32cqi, 20rem);
    display: flex;
    flex-direction: column;
    min-height: max(64rem, 240vw);
    padding-bottom: var(--about-art-clearance);
  }
  body.persona-design #about > :is(.about-sky-base, .about-sky-mask, .about-title-echo) {
    height: calc(100% - var(--about-art-clearance));
    bottom: auto;
  }
  body.persona-design #about > .content-shell { order: 1; }
  body.persona-design #about .about-heading h2 {
    font-size: clamp(2rem, 6cqi, 3rem);
  }
  body.persona-design #about > .content-shell .section-body {
    margin-top: clamp(1.25rem, 3.5cqi, 1.75rem);
  }
  body.persona-design #about .section-body .prose p {
    font-size: clamp(1rem, 2.15cqi, 1.1rem);
  }
  body.persona-design #about > .about-flower-pair {
    /* Flow after the biography so larger text can never run into the flowers. */
    position: relative;
    order: 2;
    flex: none;
    top: auto;
    width: 42%;
    margin-top: clamp(4rem, 18cqi, 9rem);
  }
}

/* /assets/themes/persona/fullscreen-scaling.css */
/* The owner's Chrome reference is a 933 × 821 content viewport (933 × 908
   window). Preserve its vertical rhythm on wider displays, with full-width
   fields and horizontal anchors. Content remains in normal flow; no zoom or
   page transform, so scroll masks, focus and reduced motion share real geometry.
   Short desktop windows retain a 640px composition floor for readable controls. */
@media (min-width: 900px) and (aspect-ratio > 933/821) {
  html.persona-root:has(body.page-home) {
    font-size: clamp(75%, min(calc(1rem + (100vw - 1440px) / 135),
      calc(.765277778rem + (100svh - 821px) * .014913)), 115%);
  }
  body.persona-design.page-home {
    --composition-unit: min(1vw, max(7.273px, 1.136419svh));
    /* The reference's supporting type uses a 14px floor over a 12.244px root. */
    --content-body-size: max(14px, 1.143376rem);
    --content-label-size: max(14px, 1.143376rem);
    --content-title-size: clamp(1.25rem, calc(2 * var(--composition-unit)), 1.65rem);
  }
  body.persona-design.page-home .content-shell { width: calc(100% - 3.5rem); }
  body.persona-design.page-home .nav-shell { width: calc(100% - 2.5rem); }
  body.persona-design.page-home :is(#about, #education, #skills, #experience, #projects, #contact) h2 {
    font-size: clamp(2.5rem, calc(5.2 * var(--composition-unit)), 5rem);
    translate: none;
  }

  /* Keep the circle round and its center at the same horizontal fraction.
     The yellow field and continuation fill the available screen width. */
  body.persona-design.page-home #main-content {
    --hero-art-width: calc(100 * var(--composition-unit));
    --hero-art-left: calc(62.81407% - 62.81407 * var(--composition-unit));
  }
  body.persona-design.page-home :is(#home, .hero-top-extension) { max-width: none; }
  body.persona-design.page-home #home .hero-visual-stage { min-height: calc(52.777778 * var(--composition-unit)); }
  body.persona-design.page-home #home .hero-reference-copy { left: 6%; width: calc(42.361111 * var(--composition-unit)); }
  body.persona-design.page-home #home .hero-reference-copy h1 {
    font-size: calc(6.2 * var(--composition-unit));
    text-shadow: calc(.347222 * var(--composition-unit)) calc(.347222 * var(--composition-unit)) 0 var(--palette-white);
  }
  body.persona-design.page-home #home .hero-reference-copy p {
    font-size: calc(2.3 * var(--composition-unit));
    margin: calc(2 * var(--composition-unit)) 0 0 calc(.555556 * var(--composition-unit));
    padding: calc(.555556 * var(--composition-unit)) calc(.972222 * var(--composition-unit)) calc(.694444 * var(--composition-unit));
  }
  body.persona-design.page-home #home .hero-portrait-frame { width: calc(41 * var(--composition-unit)); }
  body.persona-design.page-home #home .hero-portrait-monogram {
    font-size: calc(15.555556 * var(--composition-unit));
    -webkit-text-stroke-width: calc(.416667 * var(--composition-unit));
    text-shadow: calc(.347222 * var(--composition-unit)) calc(.347222 * var(--composition-unit)) 0 var(--palette-black);
  }
  body.persona-design.page-home #home .hero-actions { left: 6%; bottom: calc(4.861111 * var(--composition-unit)); }
  body.persona-design.page-home #home .hero-links { gap: calc(1.25 * var(--composition-unit)); }
  body.persona-design.page-home #home .hero-links .text-link {
    font-size: calc(1.111111 * var(--composition-unit));
    padding: calc(.833333 * var(--composition-unit)) calc(1.25 * var(--composition-unit));
  }
  body.persona-design.page-home #home .hero-name-flower { width: calc(4.444444 * var(--composition-unit)); }
  body.persona-design.page-home #home :is(.hero-left-flower, .hero-right-dark-flower) { width: calc(7 * var(--composition-unit)); }
  body.persona-design.page-home #home .hero-right-light-flower { width: calc(4 * var(--composition-unit)); }

  body.persona-design.page-home #about {
    --about-title-size: calc(26 * var(--composition-unit));
    --about-title-top: calc(20 * var(--composition-unit));
    --about-heading-top: max(calc(48 * var(--composition-unit)),
      calc(var(--about-title-top) + var(--about-title-size) * 1.2 + 2rem), var(--about-content-top, 12rem));
    /* Match the reference's cover crop, then fit the same mask vertically.
       All three painted/title masks and the edge tracer use this geometry. */
    --about-mask-width: 1.05323;
    min-height: max(96rem, calc(152.7778 * var(--composition-unit)));
  }
  body.persona-design.page-home #about :is(.about-sky-mask, .about-title-sky-shadow, .about-title-lettering--yellow) {
    mask-size: calc(var(--about-mask-width) * 100%) 100%;
  }
  body.persona-design.page-home #about > .content-shell { width: min(46.9792%, calc(46.9792 * var(--composition-unit))); }
  body.persona-design.page-home #about > .about-flower-pair { width: calc(32 * var(--composition-unit)); }

  body.persona-design.page-home #education { padding-top: clamp(18rem, calc(20 * var(--composition-unit)), 24rem); }
  body.persona-design.page-home #education > .content-shell { width: min(94.49%, calc(100% - 3.5rem)); }
  body.persona-design.page-home #education .education-title-echo {
    top: calc(var(--education-overhang) / (1 + var(--education-overhang)) * 100% + 3 * var(--composition-unit));
    font-size: calc(13.5 * var(--composition-unit));
  }
  body.persona-design.page-home #education .education-card {
    max-width: none;
    width: 88.888889%;
    padding: clamp(2rem, calc(4 * var(--composition-unit)), 4rem);
    border-width: clamp(8px, calc(.9 * var(--composition-unit)), 14px);
  }
  body.persona-design.page-home #education .education-details { column-gap: clamp(2rem, calc(4 * var(--composition-unit)), 4rem); }
  body.persona-design.page-home #education .education-logo { max-width: calc(27 * var(--composition-unit)); justify-self: center; }
  body.persona-design.page-home #education .education-details h3 { font-size: clamp(1.75rem, calc(2.8 * var(--composition-unit)), 2.75rem); }
  body.persona-design.page-home #education .education-program { font-size: clamp(1rem, calc(1.25 * var(--composition-unit)), 1.2rem); }

  body.persona-design.page-home #skills { min-height: calc(95.944 * var(--composition-unit)); }
  body.persona-design.page-home #skills .skills-category {
    min-height: calc(29.305 * var(--composition-unit));
    padding: clamp(1.5rem, calc(3 * var(--composition-unit)), 2.5rem);
  }
  body.persona-design.page-home #skills .skills-category h3 { font-size: clamp(1.125rem, calc(1.6 * var(--composition-unit)), 1.35rem); }
  body.persona-design.page-home #skills .skills-categories { margin-top: clamp(2.375rem, calc(6 * var(--composition-unit)), 4.375rem); }
  body.persona-design.page-home #experience .experience-save-option {
    --sphere-size: clamp(5rem, calc(100 * var(--composition-unit) - 59.375rem), 15.625rem);
    --row-left-padding: 4rem;
    min-height: calc(22.937 * var(--composition-unit));
    gap: calc(clamp(1.25rem, calc(3 * var(--composition-unit)), 2.75rem) + 1.125rem);
    padding-right: clamp(1.5rem, calc(4 * var(--composition-unit)), 5rem);
  }
  body.persona-design.page-home #experience .experience-save-filler .experience-save-continued { font-size: clamp(2.4rem, calc(5 * var(--composition-unit)), 4.2rem); }
  body.persona-design.page-home #projects .section-header h2 { max-width: calc(50 * var(--composition-unit)); }
  body.persona-design.page-home #projects .project-playable-badge { width: clamp(6.6rem, calc(9.6 * var(--composition-unit)), 8.1rem); }
  body.persona-design.page-home #projects .project-content { padding: clamp(1.25rem, calc(2.2 * var(--composition-unit)), 1.75rem); }
  /* Extra horizontal room must not turn every preview into a taller row.
     Keep the original media treatment; the information panel can still grow. */
  body.persona-design.page-home #projects .project-media {
    min-height: calc(28.8 * var(--composition-unit));
    height: calc(28.8 * var(--composition-unit));
  }
  body.persona-design.page-home #projects .project-card:first-child .project-media {
    min-height: calc(37.32 * var(--composition-unit));
    height: auto;
  }
  body.persona-design.page-home #projects .project-media :is(img, video) {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
  body.persona-design.page-home #contact .contact-link-icon {
    flex-basis: clamp(44px, calc(5 * var(--composition-unit)), 64px);
    width: clamp(44px, calc(5 * var(--composition-unit)), 64px);
  }
}