/* /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/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/project-pages.css */
/* Project reading surfaces only. The TV, game controls and demo scene keep
   their existing styles; no page-level tokens or gameplay selectors change. */
body.persona-design :is(.laser-intro, .laser-notes, .case-study-hero, .case-study-layout) {
  background: var(--palette-yellow);
  color: var(--palette-black);
  border: 0;
  border-radius: 0;
}
/* Long-form case studies use the quieter gold field; playable project pages
   keep their brighter yellow stage around the televisions and controls. */
body.persona-design :is(.case-study, .case-study-hero, .case-study-layout) {
  background: var(--palette-gold);
}
body.persona-design :is(.laser-intro, .laser-notes) > .content-shell {
  background: transparent;
  color: var(--palette-black);
  border: 0;
  border-radius: 0;
  padding: 0;
}
body.persona-design :is(.laser-intro, .laser-notes, .case-study) :is(p, li, dt, dd, a, figcaption, strong, em, th, td) {
  color: var(--palette-olive);
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
body.persona-design :is(.laser-intro, .laser-notes, .case-study) :is(h1, h2) {
  color: var(--palette-black);
  -webkit-text-fill-color: currentColor;
  font-family: 'Persona Slim Wide', 'Persona Slim Local', sans-serif;
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.12;
  text-wrap: balance;
  border: 0;
  padding: 0;
}
/* Let animated letters inherit the title ink instead of the legacy panel ink. */
:root body.persona-design :is(.laser-intro, .laser-notes, .case-study) :is(h1, h2) span {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
:root body.persona-design :is(.laser-intro, .laser-notes, .case-study) :is(h1, h2, h1 .kinetic-letter, h2 .kinetic-letter) {
  -webkit-text-stroke: 1.5px var(--palette-white);
  paint-order: stroke fill;
}
body.persona-design :is(.laser-intro, .case-study-hero) h1 {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(2.25rem, 4.5vw, 4.25rem);
  overflow-wrap: anywhere;
}
body.persona-design .case-study-hero h1 .kinetic-word {
  max-width: 100%;
  white-space: normal;
}
body.persona-design :is(.laser-notes, .case-study-prose) h2 {
  font-size: clamp(1.8rem, 2.6vw, 2.7rem);
}
body.persona-design .laser-notes h2::after { display: none; }
body.persona-design :is(.laser-intro, .laser-notes, .case-study) a {
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
body.persona-design :is(.laser-intro, .laser-notes, .case-study) a:hover {
  color: var(--palette-black);
  text-decoration-thickness: 2px;
}
/* Letter-animated links split words into inline-blocks, which a text underline
   skips (it would only draw under the spaces). Rule the whole link instead. */
body.persona-design :is(.laser-intro, .laser-notes, .case-study) a.kinetic-text {
  text-decoration: none;
  padding-bottom: .12em;
  border-bottom: 1px solid currentColor;
}
body.persona-design :is(.laser-intro, .laser-notes, .case-study) a.kinetic-text:hover {
  box-shadow: 0 1px 0 currentColor;
}
body.persona-design :is(.laser-intro, .laser-notes, .case-study) a:focus-visible {
  outline: 2px solid var(--palette-black);
  outline-offset: 0.3125rem;
}
body.persona-design .laser-intro {
  padding-block: clamp(2rem, 5vw, 4rem) 1.25rem;
}
body.persona-design .laser-intro-layout {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
}
body.persona-design .laser-description {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  line-height: 1.6;
}
body.persona-design .laser-objective {
  margin: 0 0 1.125rem;
  font-size: 1rem;
  line-height: 1.6;
}
body.persona-design .laser-intro .collaborator-byline {
  margin: 1rem 0 0;
  font-size: .875rem;
}
body.persona-design .laser-notes {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
body.persona-design .laser-notes .two-column-section {
  grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
  border-top: 2px solid var(--palette-olive);
  padding-top: 2rem;
}
body.persona-design .laser-notes .section-body {
  max-width: 70ch;
  min-width: 0;
}
body.persona-design .laser-notes .section-body > p {
  color: var(--palette-olive);
  margin: 0 0 1.125rem;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: normal;
}
body.persona-design .laser-notes .section-body > h3 {
  color: var(--palette-black);
  margin: 1.75rem 0 0.5rem;
  font: 750 1rem/1.4 var(--content-font);
  letter-spacing: normal;
  text-transform: none;
}
body.persona-design .laser-notes .project-source-note {
  border-top: 1px solid var(--palette-gold);
  padding-top: 1rem;
  font-size: .875rem;
}
body.persona-design .laser-notes .project-metrics dt { color: var(--palette-black); }
/* P4G battle-result stat stack (docs/design-reference.md, item 5): a black
   icon block beside each stat, large slanted wide numerals, ALL-CAPS label.
   DOM order (value, then label) is unchanged. */
body.persona-design .project-metrics {
  gap: 1.125rem clamp(1rem, 3vw, 2rem);
  border: 0;
}
body.persona-design .project-metrics > div {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 0.875rem;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
}
body.persona-design .project-metrics > div::before,
body.persona-design .project-metrics > div::after {
  content: '';
  grid-row: 1 / span 2;
  grid-column: 1;
}
body.persona-design .project-metrics > div::before {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.25rem; /* The reference icon blocks are slightly rounded. */
  background: var(--palette-black);
}
/* The four-point sparkle from the site's section motifs (EXP icon shape). */
body.persona-design .project-metrics > div::after {
  justify-self: center;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--palette-yellow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C55 39 61 45 98 50C61 55 55 61 50 98C45 61 39 55 2 50C39 45 45 39 50 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C55 39 61 45 98 50C61 55 55 61 50 98C45 61 39 55 2 50C39 45 45 39 50 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.persona-design .project-metrics dt {
  grid-row: 1;
  grid-column: 2;
  justify-self: start;
  color: var(--palette-black);
  font-family: var(--menu-font);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: 0;
  line-height: 1.05;
  transform: skewX(-8deg);
  overflow-wrap: anywhere;
}
body.persona-design .project-metrics dd {
  grid-row: 2;
  grid-column: 2;
  margin: 0.25rem 0 0;
  color: var(--palette-black);
  font-family: var(--menu-font);
  font-size: .72rem;
  letter-spacing: .08em;
}
@media (max-width: 480px) {
  body.persona-design .project-metrics { grid-template-columns: minmax(0, 1fr); }
}
/* These notes sit below the television, not in its screen or control panel. */
body.persona-design .laser-shell > :is(.game-message, .game-implementation-note),
body.persona-design .imu-axis-controls > .imu-implementation-note {
  color: var(--palette-olive);
  -webkit-text-fill-color: currentColor;
}
body.persona-design .case-study-hero {
  display: flex;
  flex-direction: column;
  width: min(73.75rem, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 0 0;
  gap: 2rem;
}
body.persona-design .case-study-hero-copy {
  order: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
body.persona-design .case-study-summary {
  max-width: 65ch;
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.65;
}
body.persona-design .case-study-hero-media {
  order: 1;
  background: transparent;
  border: 0;
  border-radius: 0;
}
body.persona-design .case-study-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  max-height: 30rem;
  border-radius: 0.75rem;
  box-shadow: none;
}
body.persona-design .case-study-hero-media figcaption {
  background: transparent;
  margin-top: 0.75rem;
  padding: 0;
  text-align: left;
  font-size: .875rem;
}
body.persona-design .case-study-layout {
  grid-template-columns: minmax(11.25rem, 15rem) minmax(0, 70ch);
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  margin-bottom: 0;
}
body.persona-design .case-study-meta {
  position: static;
  border-top: 2px solid var(--palette-olive);
  padding-top: 1.25rem;
}
body.persona-design .case-study-meta div {
  grid-template-columns: 1fr;
  gap: 0.25rem;
}
body.persona-design .case-study-meta dt {
  font-size: .75rem;
  letter-spacing: .04em;
}
body.persona-design .case-study-meta dd { font-size: .9375rem; }
body.persona-design .case-study-tools { display: grid; gap: 0.25rem; }
body.persona-design .case-study-tools li {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
}
body.persona-design .case-study-prose {
  max-width: 70ch;
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: normal;
}
body.persona-design .case-study-prose h2 {
  margin: 3rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--palette-gold);
}
body.persona-design .case-study-prose > h2:first-child { margin-top: 0; padding-top: 0; border: 0; }
body.persona-design .case-study-prose p { margin: 0 0 1.25rem; }
body.persona-design .case-study-prose strong { color: var(--palette-black); }
body.persona-design .case-study-prose img {
  margin: 1rem 0 0;
  border: 1px solid var(--palette-olive);
  border-radius: 0.75rem;
  box-shadow: none;
}
body.persona-design .case-study-prose .image-caption {
  margin: -0.5rem 0 1.75rem;
  text-align: left;
  font-size: .875rem;
  font-style: normal;
}
body.persona-design .case-study-prose table { font-variant-numeric: tabular-nums; }
body.persona-design .case-study-prose :is(th, td) {
  border-color: var(--palette-gold);
  padding: 0.625rem 0.5rem;
  overflow-wrap: anywhere;
}
body.persona-design .case-study-prose th { color: var(--palette-black); background: var(--palette-gold); }
/* IMU settings live on the yellow page, outside the untouched black TV. */
body.persona-design .imu-demo-section > :is(.imu-toolbar, .imu-axis-controls) {
  color: var(--palette-olive);
  border-color: var(--palette-gold);
}
body.persona-design .imu-demo-section > :is(.imu-toolbar, .imu-axis-controls) :is(span, small, legend, output, button) {
  color: var(--palette-olive);
  -webkit-text-fill-color: currentColor;
}
body.persona-design .imu-toolbar :is(.imu-mode-control, .imu-planet-control) button:is(.is-active, :hover) {
  background: var(--palette-gold);
  color: var(--palette-black);
}
body.persona-design .imu-toolbar button.is-active::after { background: var(--palette-black); }
body.persona-design .imu-toolbar button:focus-visible,
body.persona-design .imu-axis-control input:focus-visible {
  outline: 2px solid var(--palette-black);
  outline-offset: 3px;
}
body.persona-design .imu-axis-control input { accent-color: var(--palette-olive); }
@media (max-width: 899px) {
  body.persona-design :is(.laser-intro-layout, .laser-notes .two-column-section, .case-study-layout) {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  body.persona-design .laser-intro h1 { max-width: 24ch; }
  body.persona-design .case-study-meta dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.persona-design .case-study-hero h1 {
    font-family: 'Persona Slim Local', sans-serif;
    font-size: clamp(1.75rem, 7vw, 3rem);
  }
  body.persona-design .case-study-hero-media img { aspect-ratio: 4 / 3; }
  body.persona-design .imu-toolbar { align-items: start; }
  body.persona-design .imu-toolbar-groups { display: grid; gap: 0.5rem; overflow: visible; }
  body.persona-design .imu-toolbar-group { width: auto; min-width: 0; }
  body.persona-design :is(.imu-mode-control, .imu-planet-control) { flex-wrap: wrap; overflow: visible; gap: 0.25rem; }
  body.persona-design :is(.imu-mode-control, .imu-planet-control) button { min-width: 0; min-height: 2.75rem; }
}
@media (max-width: 380px) {
  body.persona-design .case-study-meta dl { grid-template-columns: minmax(0, 1fr); }
}

/* P4G Result-style decoration, injected only by the Persona renderer. */
body.persona-design .case-study-cropped-title { display: none; }
@media (min-width: 600px) {
  body.persona-design .case-study-hero:has(.case-study-cropped-title) {
    --case-title-crop: .3;
    --case-title-overlap: .2;
    --case-hero-gap: 2rem;
    container-type: inline-size;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: var(--case-hero-gap);
  }
  body.persona-design .case-study-cropped-title {
    /* Measured uppercase advances at 100px in Persona Slim Wide. The small
       inset allows for glyph overhang; no horizontal crop or fixed minimum. */
    --case-title-size: min(12rem, calc(98cqi / (var(--case-title-chars) * var(--case-title-advance))));
    --case-title-weight: 300;
    --case-title-tracking: -.025em;
    --case-title-opacity: .85;
    display: block;
    order: 2;
    flex: none;
    position: relative;
    width: 100%;
    height: calc(var(--case-title-size) * (1 - var(--case-title-crop)));
    margin-block-start: calc(-1 * (var(--case-hero-gap) + var(--case-title-size) * var(--case-title-overlap)));
    z-index: 0;
    pointer-events: none;
    user-select: none;
    opacity: var(--case-title-opacity);
  }
  body.persona-design .case-study-cropped-title::after {
    content: attr(data-title);
    display: block;
    color: var(--palette-olive);
    font-family: var(--menu-font);
    font-size: var(--case-title-size);
    font-weight: var(--case-title-weight);
    letter-spacing: var(--case-title-tracking);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }
  body.persona-design .case-study-hero:has(.case-study-cropped-title) > :is(.case-study-hero-copy, .case-study-hero-media) {
    position: relative;
    z-index: 1;
  }
  /* Keep the caption above the image, clear of the decorative overlap. */
  body.persona-design .case-study-hero:has(.case-study-cropped-title) .case-study-hero-media {
    display: flex;
    flex-direction: column;
    gap: .75rem;
  }
  body.persona-design .case-study-hero:has(.case-study-cropped-title) figcaption {
    order: -1;
    margin: 0;
  }
}

/* /assets/themes/persona/tv-frame.css */
/* Shared approved P4 TV frame for the three Persona game pages. */
body.persona-tv-screen .persona-tv {
  --tv-ink: #080808;
  --tv-paper: #fffdf3;
  --tv-feet-height: clamp(2.875rem, 8vw, 4.5rem);
  --tv-knob-offset: clamp(0.375rem, .8vw, 0.625rem);
  width: min(100%, 51.25rem);
  margin: clamp(6.5rem, 23vw, 15rem) auto calc(var(--tv-feet-height) + 5rem);
  padding: 0;
  border: 0;
  border-radius: 4% 5% 4% 4% / 5% 5% 5% 5%;
  background: var(--tv-ink);
  color: var(--tv-ink);
  box-shadow: none;
  container: television / inline-size;
}

body.persona-tv-screen .tv-antennas {
  top: auto;
  bottom: calc(100% - 0.375rem);
  left: 17%;
  width: 66%;
  height: auto;
  transform: none;
  color: var(--tv-ink);
}

.tv-frame-cabinet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(3rem, 16%);
  align-items: center;
  gap: 3%;
  padding: 5% 3.5% 1.5% 4%;
}

body.persona-tv-screen .tv-frame-cabinet > :is(.game-board-wrap, .imu-scene) {
  min-width: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  border: 0;
  border-radius: 4% / 5%;
  overflow: hidden;
  box-shadow: none;
}

.tv-frame-hardware { position: relative; aspect-ratio: 130 / 440; color: var(--tv-paper); }
.tv-frame-hardware svg { display: block; width: 100%; height: auto; pointer-events: none; }

body.persona-tv-screen .persona-tv-panel {
  padding: 0.5rem 4% 0.875rem;
  gap: 0;
}
body.persona-tv-screen .persona-tv-panel > :is(.tv-speaker, .tv-power, .tv-knob) { display: none; }
body.persona-tv-screen .persona-tv .game-status-bar { flex: 1; min-width: 0; margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.persona-tv-screen .persona-tv .game-status-bar > div { padding: 0 0.25rem; align-items: center; gap: 0.25rem; }
body.persona-tv-screen .persona-tv .game-status-bar :is(span, strong) {
  font-family: 'Persona Slim Local', Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  color: var(--tv-paper);
  -webkit-text-stroke: 0;
  line-height: 1.1;
}
body.persona-tv-screen .persona-tv .game-status-bar span { font-size: 0.75rem; text-transform: uppercase; }
body.persona-tv-screen .persona-tv .game-status-bar strong { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }

body.persona-tv-screen .persona-tv .game-actions { position: absolute; inset: 0; display: block; margin: 0; }
body.persona-tv-screen .persona-tv .game-action-button {
  position: absolute;
  left: 50%;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 3px solid var(--tv-paper);
  border-radius: 50%;
  background: var(--tv-ink);
  color: var(--tv-paper);
  box-shadow: none;
  transform: translateX(-50%);
}
.tv-secondary-controls {
  position: absolute;
  top: calc(55% - 1.375rem + var(--tv-knob-offset));
  left: 50%;
  display: flex;
  gap: 0.5rem;
  transform: translateX(-50%);
}
body.persona-tv-screen .persona-tv .tv-secondary-controls .game-action-button {
  position: relative;
  left: auto;
  flex: 0 0 2.75rem;
  transform: none;
}
body.persona-tv-screen .persona-tv .tv-secondary-controls .game-action-button:active:enabled { transform: scale(.96); }
/* White knob faces with a black concentric ring, like the supplied TV. */
body.persona-tv-screen .persona-tv .tv-secondary-controls .game-action-button::before,
body.persona-tv-screen .tv-leg button::before {
  content: '';
  position: absolute;
  inset: 0.25rem;
  border-radius: 50%;
  background: var(--tv-paper);
  pointer-events: none;
}
body.persona-tv-screen .persona-tv .pause-symbol { position: relative; z-index: 1; color: var(--tv-ink); }
.crt-knob-label { position: relative; z-index: 1; color: var(--tv-ink); font: 700 0.625rem/1 Arial, sans-serif; letter-spacing: -.04em; }
.crt-knob-indicator { position: absolute; z-index: 1; bottom: 0.5rem; left: calc(50% - 3px); width: 0.375rem; height: 3px; border: 1px solid var(--tv-ink); border-radius: 2px; }
.tv-crt-control[aria-pressed="true"] .crt-knob-indicator { background: var(--tv-ink); }
.tv-crt-control[aria-pressed="false"] .crt-knob-label { text-decoration: line-through; text-decoration-thickness: 1px; }
body.persona-tv-screen .persona-tv .game-action-button:focus-visible { outline: 3px solid #fff000; outline-offset: 3px; }

/* Decoration only: never intercept game input or apply a filter to the canvas.
   Keep the existing Start / Pause / game-result interfaces above the texture. */
.game-crt-overlay { position: absolute; inset: 0; z-index: 4; overflow: hidden; border-radius: inherit; pointer-events: none; isolation: isolate; }
.game-crt-overlay[hidden] { display: none; }
body.persona-tv-screen .game-overlay { z-index: 10; }
body.persona-tv-screen .persona-tv .tv-reset-control {
  bottom: calc(2% - var(--tv-knob-offset) - 0.5rem);
  width: 100%;
  min-width: 2.75rem;
  height: auto;
  aspect-ratio: 1;
  border: 0;
  background: transparent;
}
body.persona-tv-screen .persona-tv .reset-symbol { position: absolute; width: 26%; inset: 37%; color: var(--tv-ink); }
body.persona-tv-screen .persona-tv .game-action-button:hover:enabled { color: var(--tv-paper); border-color: var(--tv-paper); background: var(--tv-ink); }
body.persona-tv-screen .persona-tv .tv-reset-control:hover:enabled { background: transparent; }
body.persona-tv-screen .persona-tv .game-action-button:active:enabled { transform: translateX(-50%) scale(.96); box-shadow: none; }

/* Preserve the real controls; the silhouette feet are decoration, not buttons. */
body.persona-tv-screen .persona-tv .tv-leg-controls {
  position: absolute;
  top: calc(100% + var(--tv-feet-height) + 0.75rem);
  left: 6%;
  right: 6%;
  width: auto;
  margin: 0;
  padding: 0;
}
body.persona-tv-screen .tv-leg { width: auto; height: auto; padding: 0; border: 0; background: none; box-shadow: none; }
body.persona-tv-screen .tv-leg::before { display: none; }
body.persona-tv-screen .tv-leg .control-group { grid-template-columns: repeat(2, 2.75rem); gap: 0.625rem; }
body.persona-tv-screen .tv-leg button { position: relative; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; border: 3px solid var(--tv-paper); background: var(--tv-ink); color: var(--tv-ink); box-shadow: none; }
body.persona-tv-screen .tv-leg button svg { position: relative; z-index: 1; width: 1.25rem; height: 1.25rem; }
body.persona-tv-screen .tv-leg button:hover:enabled { color: var(--tv-ink); border-color: var(--tv-paper); background: var(--tv-ink); }
body.persona-tv-screen .tv-leg button:focus-visible { outline: 3px solid var(--tv-ink); outline-offset: 3px; }
body.persona-tv-screen .persona-tv .game-action-button:disabled,
body.persona-tv-screen .tv-leg button:disabled { opacity: 1; cursor: not-allowed; }

body.persona-tv-screen .persona-tv .game-start-prompt { padding: 0.75rem; }
:root body.persona-tv-screen .persona-tv .game-start-button {
  min-height: 2.75rem;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  border: 2px solid var(--tv-ink);
  border-radius: 0.25rem;
  background: var(--tv-paper);
  box-shadow: none;
  font-size: 1.25rem;
  line-height: 1.1;
  transform: none;
}
body.persona-tv-screen .persona-tv .game-start-button [data-start-label] {
  font-family: 'Persona Slim Local', Arial, sans-serif;
  font-size: inherit;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .02em;
  -webkit-text-stroke: 0;
  white-space: nowrap;
  text-transform: uppercase;
}
:root body.persona-tv-screen .persona-tv .game-start-button:hover:enabled { background: #fff000; }
:root body.persona-tv-screen .persona-tv .game-start-button:active:enabled { transform: scale(.98); }

.tv-frame-feet {
  position: absolute;
  top: calc(100% - 2px);
  inset-inline: 0;
  height: var(--tv-feet-height);
  pointer-events: none;
}
.tv-frame-feet svg { display: block; width: 100%; height: 100%; }

/* Each game keeps its own counters and input model. */
body.persona-tv-screen .persona-tv .dk-status-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.persona-tv-screen .tv-leg .dk-jump-button { width: 4.875rem; border-radius: 1.375rem; font: 400 0.875rem/1 'Persona Slim Local', Arial, sans-serif; }
body.persona-tv-screen .tv-leg .dk-jump-button::before { border-radius: inherit; }
body.persona-tv-screen .tv-leg .dk-jump-button span { position: relative; z-index: 1; color: var(--tv-ink); }
body.persona-tv-screen .persona-tv-sandbox { margin-bottom: calc(var(--tv-feet-height) + 1.75rem); }
body.persona-tv-screen .tv-frame-cabinet > .imu-scene { height: auto; min-height: 16.25rem; }
body.persona-tv-screen .persona-tv .imu-live-readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 0; gap: 0.75rem; text-align: center; }
body.persona-tv-screen .persona-tv .imu-live-readouts > div { min-width: 0; align-items: center; white-space: normal; }
body.persona-tv-screen .persona-tv .imu-live-readouts :is(span, strong, small, b) { color: var(--tv-paper); font: 400 0.875rem/1.3 'Persona Slim Local', Arial, sans-serif; }
body.persona-tv-screen .persona-tv .imu-live-readouts > div > span { font-size: 0.75rem; text-transform: uppercase; }
body.persona-tv-screen .persona-tv .imu-mode-readout strong { min-width: 0; text-align: center; }
body.persona-tv-screen .persona-tv .imu-gravity-readout strong { flex-wrap: wrap; justify-content: center; gap: 2px 0.375rem; }
body.persona-tv-screen .persona-tv .imu-gravity-readout small { flex-basis: 100%; font-size: 0.75rem; }

/* Keep the narrow rail and full-width game screen. Stack the two small knobs
   only when the cabinet cannot fit two accessible 44px targets side by side. */
@container television (max-width: 650px) {
  .tv-frame-hardware { height: 13.125rem; aspect-ratio: auto; }
  .tv-frame-hardware .tv-frame-grille { height: 3.375rem; }
  .tv-secondary-controls { top: 3.875rem; flex-direction: column; gap: 0.375rem; }
  body.persona-tv-screen .persona-tv .tv-reset-control { bottom: 0; width: 2.75rem; }
}

@media (max-width: 600px) {
  /* Give the actual 320×240 game as much phone width as the reference allows. */
  body.persona-tv-screen .laser-play-section .laser-shell { width: calc(100% - 1.5rem); padding: 1rem 0.5rem; }
  body.persona-tv-screen .imu-demo-section { width: calc(100% - 1.5rem); margin-inline: auto; padding-inline: 0.5rem; }
  body.persona-tv-screen .persona-tv { margin-top: 6.375rem; }
  .tv-frame-cabinet { grid-template-columns: minmax(0, 1fr) minmax(2.75rem, 14%); gap: 3%; padding: 5% 3% 2% 3%; }
  body.persona-tv-screen .persona-tv-panel { padding: 0.4375rem 3% 0.75rem; }
  body.persona-tv-screen .persona-tv .game-status-bar span { font-size: 0.6875rem; }
  body.persona-tv-screen .persona-tv .game-status-bar strong { font-size: 0.9375rem; }
  :root body.persona-tv-screen .persona-tv .game-start-button { font-size: 1.125rem; padding: 0.5rem 0.625rem; gap: 0.5rem; }
}

@media (max-width: 360px) {
  body.persona-tv-screen .persona-tv-sandbox .game-start-prompt { padding: 0.5rem; }
  :root body.persona-tv-screen .persona-tv-sandbox .game-start-button { font-size: 1rem; padding-inline: 0.5rem; gap: 0.375rem; }
}

/* Give the game the first viewport. The title remains first in reading order;
   below desktop widths it stacks naturally, without clipping any copy. */
body.persona-tv-screen .game-entry .laser-intro { padding-block: 1.5rem 0.5rem; }
body.persona-tv-screen .game-entry .laser-play-section { padding-block: 0.5rem 1.5rem; }
body.persona-tv-screen .game-entry .laser-shell { display: flow-root; }
body.persona-tv-screen .game-entry .persona-tv {
  --tv-antenna-height: clamp(5rem, 18vw, 10rem);
  margin-top: calc(var(--tv-antenna-height) + 0.5rem);
}
body.persona-tv-screen .game-entry .tv-antennas { height: var(--tv-antenna-height); }
body.persona-tv-screen .game-entry .imu-demo-section {
  display: flow-root;
  width: calc(100% - 2.5rem);
  margin-inline: auto;
  margin-block: 0 1.5rem;
  padding: 0 0.5rem;
  overflow: visible;
}
body.persona-tv-screen .game-entry .imu-toolbar { margin-block: 1rem; }
body.persona-tv-screen .game-entry .imu-toolbar-groups { flex-wrap: wrap; gap: 0.75rem 1.5rem; }

@media (min-width: 1000px) {
  body.persona-tv-screen .game-entry {
    --tv-stage-width: max(22.5rem, min(51.25rem, calc(108svh - 17.5rem)));
    display: grid;
    grid-template-columns: minmax(16.25rem, .7fr) minmax(0, 1.6fr);
    align-items: start;
    gap: clamp(1.5rem, 3vw, 3rem);
    /* Same measure as .content-shell, so the notes below share this left edge. */
    width: min(73.75rem, calc(100% - 3.5rem));
    margin-inline: auto;
    padding-top: 1.5rem;
  }
  body.persona-tv-screen .game-entry > * { min-width: 0; }
  body.persona-tv-screen .game-entry .laser-intro { padding: clamp(4rem, 12svh, 7.5rem) 0 0; }
  body.persona-tv-screen .game-entry .laser-intro-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  body.persona-tv-screen .game-entry .laser-intro h1 {
    font-size: clamp(2rem, 3vw, 3.25rem);
    max-width: 100%;
  }
  body.persona-tv-screen .game-entry :is(.laser-play-section, .laser-shell, .imu-demo-section) {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  body.persona-tv-screen .game-entry .persona-tv {
    --tv-antenna-height: clamp(3.75rem, 11svh, 6.5rem);
    --tv-feet-height: clamp(2.5rem, 6svh, 3.5rem);
    width: min(100%, var(--tv-stage-width));
    margin-top: calc(var(--tv-antenna-height) + 0.5rem);
  }
  body.persona-tv-screen .game-entry .tv-antennas {
    height: var(--tv-antenna-height);
  }
  body.persona-tv-screen .game-entry :is(.imu-toolbar, .imu-axis-controls) {
    width: min(100%, var(--tv-stage-width));
  }
  body.persona-tv-screen .game-entry :is(.imu-mode-control, .imu-planet-control) {
    flex-wrap: wrap;
    overflow: visible;
  }
  body.persona-tv-screen .game-entry .imu-toolbar button { min-height: 2.75rem; }
}

/* The sandbox's screen and settings are one workspace, not a vertical queue.
   Keep the short introduction above both; phone order is TV, then settings. */
body.persona-tv-screen .imu-control-panel {
  min-width: 0;
  padding: 1.25rem;
  background: var(--palette-olive);
  color: var(--palette-white);
}
body.persona-tv-screen .game-entry .imu-control-panel :is(.imu-toolbar, .imu-axis-controls) {
  width: 100%;
  margin: 0;
  padding: 1rem 0;
}
body.persona-tv-screen .imu-control-panel .imu-toolbar-groups {
  display: grid;
  width: 100%;
  gap: 1rem;
  overflow: visible;
}
body.persona-tv-screen .imu-control-panel .imu-toolbar-group { width: 100%; }
body.persona-tv-screen .imu-control-panel :is(.imu-mode-control, .imu-planet-control) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
}
body.persona-tv-screen .imu-control-panel .imu-planet-control { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.persona-tv-screen .imu-control-panel :is(.imu-mode-control, .imu-planet-control) button {
  min-width: 0;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
}
body.persona-tv-screen .imu-control-panel .imu-axis-control { min-height: 2.75rem; }
body.persona-tv-screen .imu-control-panel .imu-axis-control input { min-height: 2rem; }
body.persona-tv-screen .imu-control-panel .game-keyboard-help {
  margin-top: 1rem;
  color: var(--palette-white);
}
body.persona-tv-screen .imu-control-panel .game-implementation-note { color: var(--palette-white); }
body.persona-tv-screen .imu-control-panel :is(.imu-toolbar-group > span, .imu-axis-controls legend) {
  color: var(--palette-yellow);
}

@media (min-width: 1000px) {
  body.persona-tv-screen .game-entry.game-entry-imu {
    --tv-stage-width: max(25rem, min(47.5rem, calc(100svh - 16.25rem)));
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  body.persona-tv-screen .game-entry-imu .laser-intro { padding: 0; }
  body.persona-tv-screen .game-entry-imu .laser-intro-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 2rem;
  }
  body.persona-tv-screen .game-entry-imu .laser-description { margin-top: 0; }
  body.persona-tv-screen .game-entry-imu .imu-demo-section {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(20rem, 1fr);
    align-items: start;
    gap: 2rem;
  }
  body.persona-tv-screen .game-entry-imu .imu-control-panel {
    margin-top: calc(clamp(3rem, 8svh, 4.5rem) + 0.5rem);
  }
  body.persona-tv-screen .game-entry-imu .persona-tv {
    --tv-antenna-height: clamp(3rem, 8svh, 4.5rem);
  }
}

@media (min-width: 1200px) {
  body.persona-tv-screen .imu-control-panel .imu-mode-control {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Wide-screen play space: the full set, including feet/buttons, fits between
   header and HUD. Hardware dimensions inherit the cabinet's container scale. */
@media (min-width: 1280px) {
  body.persona-tv-screen .game-entry {
    --tv-stage-width: min(65vw, calc((100svh - 14.25rem) / .783));
    width: calc(100% - 4rem);
    grid-template-columns: minmax(15rem, 1fr) minmax(0, var(--tv-stage-width));
    gap: 2rem;
    padding-top: .75rem;
  }
  body.persona-tv-screen .game-entry .persona-tv {
    --tv-antenna-height: calc(var(--tv-stage-width) * .06);
    --tv-feet-height: calc(var(--tv-stage-width) * .04);
    --tv-knob-offset: .76cqi;
    width: var(--tv-stage-width);
    margin-top: calc(var(--tv-antenna-height) + .5rem);
  }
  body.persona-tv-screen .game-entry .persona-tv-panel { padding: .61cqi 4% 1.07cqi; }
  body.persona-tv-screen .game-entry .game-status-bar span { font-size: 1.46cqi; }
  body.persona-tv-screen .game-entry .game-status-bar strong { font-size: 2.07cqi; }
  body.persona-tv-screen .game-entry .tv-secondary-controls {
    top: calc(55% - 2.68cqi + var(--tv-knob-offset));
    gap: .98cqi;
  }
  body.persona-tv-screen .game-entry .tv-secondary-controls .game-action-button {
    width: max(2.75rem, 5.37cqi);
    height: max(2.75rem, 5.37cqi);
    flex-basis: max(2.75rem, 5.37cqi);
  }
  body.persona-tv-screen .game-entry .crt-knob-label { font-size: 1.22cqi; }
  body.persona-tv-screen .game-entry .tv-leg-controls { top: calc(100% + var(--tv-feet-height) + .75rem); }
  body.persona-tv-screen .game-entry .game-board {
    width: var(--game-pixel-width, 100%);
    height: auto;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    image-rendering: pixelated;
  }
  body.persona-tv-screen .game-entry.game-entry-imu {
    --tv-stage-width: min(65vw, calc((100svh - 14rem - var(--game-intro-height, 7rem)) / .78));
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
  }
  body.persona-tv-screen .game-entry-imu .laser-intro { padding-inline-end: 6rem; }
  body.persona-tv-screen .game-entry-imu .laser-intro-layout {
    grid-template-columns: minmax(0, .75fr) minmax(0, 1fr);
  }
  body.persona-tv-screen .game-entry-imu .imu-demo-section {
    grid-template-columns: minmax(0, var(--tv-stage-width)) minmax(18rem, 1fr);
  }
  body.persona-tv-screen .game-entry-imu .persona-tv {
    /* The intro is above this TV, so reserve its measured block height. */
    --tv-antenna-height: calc(var(--tv-stage-width) * .08);
  }
  body.persona-tv-screen .game-entry-imu .imu-live-readouts :is(span, strong, small, b) { font-size: 1.7cqi; }
}

/* /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); }
}