/* Edit the colour tokens here to change the two themes. No external assets or fonts. */
:root {
  color-scheme:light;
  --page-width:1280px;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-synthesis:none;
  --bg:#f0f6fa;
  --surface:#f9fcff;
  --ink:#142739;
  --muted:#3b5265;
  --line:#cad9e5;
  --accent:#075eb5;
  --accent-soft:#e1eef8;
  --inverse:#fff;
  --diagram:#e5f0f8;
  --accent-two:#007982;
  --glow-blue:rgba(42,133,225,.16);
  --glow-cyan:rgba(40,184,214,.18);
  --glow-violet:rgba(38,101,186,.14);
  --glass:rgba(249,252,255,.82);
  --name-gradient:linear-gradient(110deg,#085bb8 5%,#0a73a8 46%,#087b86 85%);
  --shadow:0 24px 90px #243f7326;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#071019;
  --surface:#0d1b2a;
  --ink:#edf6ff;
  --muted:#a4b9cc;
  --line:#243c50;
  --accent:#86d5f6;
  --accent-soft:#122e43;
  --inverse:#071019;
  --diagram:#10273c;
  --accent-two:#6bddd9;
  --glow-blue:rgba(21,119,235,.22);
  --glow-cyan:rgba(44,216,228,.13);
  --glow-violet:rgba(15,92,181,.24);
  --glass:rgba(9,22,34,.84);
  --name-gradient:linear-gradient(110deg,#bce6ff 5%,#75b9ff 35%,#73dfe8 66%,#c5f3f1 95%);
  --shadow:0 24px 90px #0009;
}

*,*::before,*::after {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-size:1rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

body.modal-open {
  overflow:hidden;
}

button,a,input,summary {
  -webkit-tap-highlight-color:transparent;
}

button,a,summary {
  touch-action:manipulation;
}

button {
  font:inherit;
  cursor:pointer;
  color:inherit;
}

a {
  color:inherit;
  text-decoration:none;
}

button:disabled {
  cursor:default;
}

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

figure,h1,h2,h3,h4,p {
  margin:0;
}

button {
  border:0;
}

::selection {
  background:var(--accent);
  color:var(--inverse);
}

:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:6px;
}

.wrap {
  width:min(var(--page-width),calc(100% - 112px));
  margin-inline:auto;
}

.skip-link {
  position:fixed;
  left:20px;
  top:12px;
  padding:12px 20px;
  background:var(--ink);
  color:var(--bg);
  z-index:100;
  transform:translateY(-150%);
}

.skip-link:focus {
  transform:translateY(0);
}

.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}

.header-inner {
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.wordmark {
  font-size:2.375rem;
  line-height:1;
  font-weight:800;
  letter-spacing:-4px;
  padding-right:8px;
}

.wordmark span {
  color:var(--accent);
}

.main-nav {
  display:flex;
  gap:38px;
  margin-left:auto;
  margin-right:48px;
  font-size:0.875rem;
  font-weight:500;
}

.main-nav a {
  padding-block:12px;
  position:relative;
}

.main-nav a::after {
  content:"";
  height:2px;
  position:absolute;
  bottom:6px;
  left:0;
  right:0;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s;
}

.main-nav a:hover::after,.main-nav a[aria-current="location"]::after {
  transform:scaleX(1);
}

.theme-toggle {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  background:none;
  border:1px solid var(--line);
  border-radius:50%;
}

.theme-toggle:hover {
  border-color:var(--ink);
}

.theme-toggle svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
}

.theme-toggle svg path {
  fill:currentColor;
  stroke:none;
}

.hero {
  padding-top:38px;
}

.hero-topline {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:0.875rem;
}

h1 {
  font-size:clamp(4.5rem,12.4vw,11.125rem);
  font-weight:500;
  letter-spacing:-.05em;
  line-height:1.12;
  margin:14px 0 37px;
  margin-left:-.055em;
  white-space:nowrap;
}

.name-period {
  color:var(--accent);
}

.hero-bottom {
  display:grid;
  grid-template-columns:1.4fr .7fr .85fr;
  gap:35px;
  align-items:start;
}

.hero-intro {
  padding-top:4px;
}

.role {
  font-size:clamp(1.75rem,2.65vw,2.5rem);
  line-height:1.13;
  letter-spacing:-.04em;
  font-weight:500;
}

.intro-copy {
  color:var(--muted);
  margin-top:24px;
  max-width:450px;
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:30px;
  margin-top:30px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:50px;
  padding:13px 22px;
  font-size:0.875rem;
  font-weight:500;
  border:1px solid transparent;
  transition:background .2s,color .2s,transform .2s;
}

.button-solid {
  background:var(--ink);
  color:var(--bg);
}

.button-solid:hover {
  background:var(--accent);
  color:var(--inverse);
  transform:translateY(-2px);
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:16px;
  font-size:0.875rem;
  min-height:44px;
  border-bottom:1px solid var(--line);
  transition:border-color .2s;
}

.text-link:hover {
  border-color:var(--accent);
  color:var(--accent);
}

.hero-aside {
  align-self:end;
  margin-bottom:35px;
  border-left:2px solid var(--accent);
  padding-left:18px;
}

.hero-aside p {
  font-weight:500;
  font-size:1rem;
  line-height:1.4;
  margin-bottom:10px;
}

.hero-aside>span {
  color:var(--muted);
  font-size:0.75rem;
  line-height:1.6;
}

.portrait {
  width:100%;
  max-width:310px;
  justify-self:end;
}

.portrait img {
  width:100%;
  aspect-ratio:1.12;
  object-fit:cover;
  object-position:center 39%;
  filter:grayscale(1);
}

.portrait figcaption {
  font-size:0.75rem;
  color:var(--muted);
  padding-top:10px;
}

.hero-foot {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  margin-top:43px;
  padding-top:15px;
  font-size:0.75rem;
  color:var(--muted);
}

.work-section {
  padding-block:110px 105px;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:38px;
}

.eyebrow {
  font-size:0.875rem;
  color:var(--accent);
  font-weight:500;
  margin-bottom:12px;
}

h2 {
  font-size:clamp(2rem,3.5vw,3rem);
  line-height:1.12;
  letter-spacing:-.045em;
  font-weight:500;
}

.section-heading>p {
  font-size:0.875rem;
  color:var(--muted);
  line-height:1.65;
}

.work-grid {
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:40px;
}

.project-gym {
  padding-top:95px;
}

.project-cover {
  display:block;
  position:relative;
  overflow:hidden;
  aspect-ratio:1.16;
  background:var(--diagram);
}

.bin-cover img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 59%;
  transition:transform .65s cubic-bezier(.2,.7,.2,1);
}

.bin-cover:hover img {
  transform:scale(1.025);
}

.cover-label {
  position:absolute;
  top:22px;
  left:22px;
  font-size:0.75rem;
  color:#fff;
  background:#171a1b;
  padding:5px 10px;
  z-index:1;
}

.cover-open {
  display:grid;
  place-items:center;
  position:absolute;
  bottom:22px;
  right:22px;
  border-radius:50%;
  width:46px;
  height:46px;
  background:#fff;
  color:#171a1b;
  font-size:1.5rem;
  transition:transform .25s;
}

.project-cover:hover .cover-open {
  transform:rotate(45deg);
}

.gym-cover {
  background:var(--diagram);
  border:1px solid var(--line);
}

.gym-cover .cover-label {
  color:var(--muted);
  background:none;
  padding:0;
}

.gym-cover .cover-open {
  background:var(--ink);
  color:var(--bg);
}

.database-art {
  height:auto;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:58px 40px 28px;
}

.db-heading {
  font-size:clamp(1.5rem,3.15vw,2.75rem);
  line-height:1.08;
  letter-spacing:-.055em;
  font-weight:500;
  margin-bottom:22px;
}

.db-heading>span {
  color:var(--accent);
}

.entity-list {
  position:relative;
  display:grid;
  gap:4px;
  padding-left:23px;
  max-width:260px;
}

.entity-list::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:19px;
  width:1px;
  background:var(--muted);
}

.entity-list>div {
  position:relative;
  font-size:0.875rem;
  line-height:1.4;
  border-bottom:1px solid var(--line);
  padding:7px 0;
  display:flex;
  gap:10px;
  align-items:center;
}

.entity-list>div::before {
  content:"";
  position:absolute;
  width:23px;
  height:1px;
  left:-23px;
  top:50%;
  background:var(--muted);
}

.entity-list i {
  width:5px;
  height:5px;
  background:var(--accent);
  margin-left:9px;
}

.db-caption {
  font-size:0.75rem;
  color:var(--muted);
  margin-top:19px;
}

.project-meta {
  display:flex;
  justify-content:space-between;
  gap:15px;
  color:var(--muted);
  font-size:0.75rem;
  margin:20px 0 8px;
}

h3 {
  font-size:clamp(1.4375rem,2.2vw,1.875rem);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.2;
}

.project h3 a {
  overflow-wrap:anywhere;
  display:flex;
  gap:18px;
  justify-content:space-between;
  align-items:start;
}

.project h3 a>span {
  font-size:1.375rem;
  opacity:0;
  transition:opacity .2s;
}

.project h3 a:hover {
  color:var(--accent);
}

.project h3 a:hover>span,.project h3 a:focus-visible>span {
  opacity:1;
}

.project>p {
  color:var(--muted);
  font-size:1rem;
  margin-top:14px;
  line-height:1.7;
}

.project-tags {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
}

.project-tags>span {
  font-size:0.75rem;
  border:1px solid var(--line);
  border-radius:3px;
  padding:3px 8px;
  color:var(--muted);
}

.about-section {
  padding-block:85px 95px;
  background:var(--surface);
  border-block:1px solid var(--line);
}

.about-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  margin-bottom:58px;
}

.about-intro>p {
  max-width:520px;
  font-size:1.25rem;
  line-height:1.6;
  letter-spacing:-.02em;
  padding-top:30px;
}

.experience-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
}

.group-title {
  font-size:0.875rem;
  font-weight:500;
  letter-spacing:0;
  line-height:1.5;
}

.experience-group>.group-title {
  margin-bottom:16px;
  color:var(--muted);
}

details>summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}

summary::-webkit-details-marker {
  display:none;
}

summary::marker {
  content:"";
}

.story {
  border-top:1px solid var(--line);
}

.story:last-child {
  border-bottom:1px solid var(--line);
}

.story>summary {
  padding:22px 0;
  min-height:100px;
}

.story-title {
  font-size:1.1875rem;
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.3;
}

.story-title>span {
  display:block;
  font-size:0.875rem;
  font-weight:400;
  letter-spacing:0;
  color:var(--muted);
  margin-top:6px;
}

.expand-icon {
  display:block;
  width:16px;
  height:16px;
  flex:0 0 16px;
  position:relative;
  color:var(--muted);
}

.expand-icon::before,.expand-icon::after {
  content:"";
  position:absolute;
  background:currentColor;
}

.expand-icon::before {
  width:12px;
  height:1px;
  left:2px;
  top:7px;
}

.expand-icon::after {
  width:1px;
  height:12px;
  top:2px;
  left:7px;
  transition:transform .2s;
}

details[open]>summary .expand-icon::after {
  transform:rotate(90deg);
}

summary:hover,.story[open] .story-title {
  color:var(--accent);
}

.story-body {
  padding:0 35px 25px 0;
  color:var(--muted);
  font-size:1rem;
  max-width:530px;
}

.story-body .detail-meta {
  font-size:0.75rem;
  margin-bottom:10px;
  color:var(--accent);
}

.education-strip {
  border-block:1px solid var(--line);
  padding:32px 0;
  margin-top:55px;
  display:grid;
  grid-template-columns:.72fr 2fr 1fr;
  gap:24px;
  align-items:center;
}

.education-strip>.group-title {
  color:var(--muted);
}

.education-strip h3 {
  font-size:1.4375rem;
}

.education-strip p {
  font-size:0.875rem;
  color:var(--muted);
  margin-top:5px;
}

.education-strip>span:last-child {
  text-align:right;
  font-size:0.75rem;
  color:var(--muted);
}

.education-strip b {
  display:block;
  font-size:2rem;
  font-weight:400;
  line-height:1.3;
  letter-spacing:-.04em;
  color:var(--ink);
}

.knowledge-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  margin-top:55px;
}

.skills-intro {
  font-size:1.4375rem;
  line-height:1.4;
  letter-spacing:-.025em;
  margin:20px 0 26px;
}

.skill-row {
  border-top:1px solid var(--line);
}

.skill-row:last-child {
  border-bottom:1px solid var(--line);
}

.skill-row summary {
  font-size:0.875rem;
  font-weight:500;
  padding:16px 0;
}

.skill-row p {
  font-size:1rem;
  line-height:1.8;
  color:var(--muted);
  padding:0 30px 19px 0;
}

.mini-heading {
  flex-wrap:wrap;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
}

.small-link {
  font-size:0.875rem;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  text-decoration:underline;
  text-underline-offset:4px;
}

.small-link:hover {
  color:var(--accent);
}

.certificate-list {
  margin-top:14px;
  border-block:1px solid var(--line);
}

.certificate-list summary {
  padding:22px 0;
  font-size:1.1875rem;
  line-height:1.4;
  letter-spacing:-.02em;
}

.certificate-list summary>span>span {
  display:block;
  color:var(--muted);
  font-size:0.75rem;
  letter-spacing:0;
  margin-top:4px;
}

.certificate-list ul {
  list-style:none;
  margin:0;
  padding:0 30px 12px 0;
}

.certificate-list li {
  padding-block:12px;
  border-top:1px solid var(--line);
}

.certificate-list li b {
  font-size:1rem;
  font-weight:500;
  display:block;
}

.certificate-list li span {
  display:block;
  font-size:0.875rem;
  color:var(--muted);
  margin-top:3px;
}

.languages {
  margin-top:33px;
}

.languages dl {
  margin:13px 0 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px 25px;
}

.languages dt {
  font-size:1rem;
}

.languages dd {
  margin:3px 0 0;
  font-size:0.875rem;
  color:var(--muted);
}

.contact-section {
  background:#bc3226;
  color:#fff;
  padding-block:47px 36px;
}

[data-theme="dark"] .contact-section {
  background:#a82e24;
}

.contact-section :focus-visible {
  outline-color:#fff;
}

.contact-topline {
  display:flex;
  justify-content:space-between;
  gap:30px;
  font-size:0.875rem;
}

.contact-topline>span {
  font-size:0.75rem;
  color:#ffe1dc;
}

.contact-main {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  align-items:end;
  gap:40px;
  margin-top:37px;
  margin-bottom:47px;
}

.contact-main h2 {
  font-size:clamp(2.375rem,5.8vw,5.125rem);
  line-height:1.04;
  letter-spacing:-.055em;
}

.contact-intro {
  padding-bottom:3px;
}

.contact-intro p {
  font-size:1rem;
  line-height:1.75;
  color:#ffe9e4;
}

.contact-cta {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  min-width:200px;
  padding:13px 0;
  border-bottom:1px solid #fff8;
  margin-top:19px;
  font-size:1.375rem;
  letter-spacing:-.025em;
}

.contact-cta:hover {
  border-bottom-color:#fff;
}

.contact-cta>span {
  transition:transform .2s;
}

.contact-cta:hover>span {
  transform:translate(3px,-3px);
}

.contact-bottom {
  display:flex;
  justify-content:space-between;
  gap:28px;
  border-top:1px solid #fff5;
  padding-top:20px;
  align-items:center;
}

.email-link {
  font-size:1rem;
}

.social-links {
  flex-wrap:wrap;
  row-gap:8px;
  display:flex;
  gap:27px;
  font-size:0.875rem;
}

.social-links a,.email-link {
  padding-block:6px;
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:5px;
  transition:text-decoration-color .2s;
}

.social-links a:hover,.email-link:hover {
  text-decoration-color:currentColor;
}

.social-links a>span {
  font-size:0.75rem;
  margin-left:4px;
}

.site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-block:25px;
  font-size:0.75rem;
  color:var(--muted);
}

.footer-name {
  color:var(--ink);
  font-size:0.875rem;
  font-weight:500;
}

.site-footer a:last-child {
  padding-block:7px;
}

.project-details-fallback {
  padding-block:35px;
}

.project-details-fallback:empty {
  display:none;
}

.case-study {
  border-block:1px solid var(--line);
  padding-block:15px;
}

.project-dialog {
  border:1px solid var(--line);
  padding:0;
  background:var(--surface);
  color:var(--ink);
  width:min(1000px,calc(100% - 64px));
  max-width:none;
  max-height:calc(100dvh - 64px);
  margin:auto;
  box-shadow:var(--shadow);
  overscroll-behavior:contain;
}

.project-dialog::backdrop {
  background:#080e14b3;
  backdrop-filter:blur(6px);
}

.project-dialog[open] {
  animation:dialog-enter .28s cubic-bezier(.2,.7,.2,1);
}

.case-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:17px 35px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
  position:sticky;
  top:0;
  z-index:3;
}

.case-header>span {
  font-size:0.75rem;
  color:var(--muted);
}

.dialog-close {
  display:inline-flex;
  gap:20px;
  align-items:center;
  background:var(--bg);
  border:1px solid var(--line);
  padding:8px 14px;
  min-height:42px;
  font-size:0.875rem;
}

.dialog-close:hover {
  border-color:var(--accent);
  color:var(--accent);
}

.dialog-close>span {
  font-size:1.4375rem;
  line-height:1;
}

.case-body {
  padding:38px 45px 48px;
}

.case-body>h2 {
  font-size:clamp(2rem,4.5vw,3.5rem);
  max-width:750px;
}

.case-lead {
  font-size:1.3125rem;
  line-height:1.5;
  color:var(--muted);
  margin:18px 0 32px;
  max-width:630px;
  letter-spacing:-.02em;
}

.media-tabs {
  flex-wrap:wrap;
  display:flex;
  gap:26px;
  border-bottom:1px solid var(--line);
  margin-bottom:20px;
}

.media-tabs button {
  min-height:48px;
  padding:10px 0;
  background:none;
  font-size:0.875rem;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  color:var(--muted);
}

.media-tabs button[aria-selected="true"] {
  border-bottom-color:var(--accent);
  color:var(--ink);
}

.media-tabs button:hover {
  color:var(--accent);
}

.media-stage {
  background:var(--bg);
  height:390px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
}

.media-stage img,.media-stage video {
  width:100%;
  height:100%;
  object-fit:contain;
}

.video-stage {
  background:#101314;
}

.poster-stage {
  height:auto;
  min-height:180px;
}

.media-panel figcaption {
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:0.75rem;
  margin-top:10px;
}

.media-panel figcaption a {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
}

.case-overview {
  display:grid;
  grid-template-columns:1fr 2.4fr;
  gap:30px;
  padding-block:34px;
  margin-top:15px;
  border-bottom:1px solid var(--line);
}

.case-overview h3,.components h3 {
  font-size:1.125rem;
  letter-spacing:-.02em;
}

.case-overview p,.components p {
  font-size:1rem;
  line-height:1.75;
  color:var(--muted);
}

.feature-list {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:28px;
  margin-top:30px;
}

.feature-list h3 {
  font-size:1.125rem;
  letter-spacing:-.025em;
  margin-bottom:12px;
}

.feature-list p {
  font-size:1rem;
  color:var(--muted);
  line-height:1.7;
}

.components {
  display:grid;
  grid-template-columns:1fr 2.4fr;
  gap:30px;
  border-top:1px solid var(--line);
  padding-top:28px;
  margin-top:33px;
}

.project-facts {
  display:grid;
  grid-template-columns:1fr 1fr 1.5fr;
  gap:24px;
  border-block:1px solid var(--line);
  padding:23px 0;
  margin:0 0 30px;
}

.project-facts dt {
  font-size:0.75rem;
  color:var(--muted);
}

.project-facts dd {
  font-size:1rem;
  margin:5px 0 0;
}

.system-figure {
  background:var(--diagram);
  padding:34px 30px 23px;
}

.system-root {
  width:fit-content;
  margin-inline:auto;
  font-size:1.4375rem;
  letter-spacing:-.035em;
  border:1px solid var(--muted);
  padding:14px 28px;
  position:relative;
}

.system-root::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-25px;
  height:24px;
  width:1px;
  background:var(--muted);
}

.system-entities {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:15px;
  margin-top:48px;
  position:relative;
}

.system-entities::before {
  content:"";
  position:absolute;
  top:-24px;
  height:1px;
  background:var(--muted);
  left:16.1%;
  right:16.1%;
}

.system-entities>span {
  position:relative;
  border:1px solid var(--line);
  padding:16px 10px;
  text-align:center;
  background:var(--surface);
  font-size:0.875rem;
  line-height:1.4;
}

.system-entities>span::before {
  content:"";
  position:absolute;
  top:-25px;
  left:50%;
  height:24px;
  width:1px;
  background:var(--muted);
}

.system-figure figcaption {
  font-size:0.75rem;
  color:var(--muted);
  text-align:center;
  margin-top:23px;
}

[hidden] {
  display:none!important;
}

@keyframes dialog-enter {
  from {
    opacity:0;
    transform:translateY(14px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media(min-width:1500px) {
  h1 {
    font-size:11.125rem;
  }
}

@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 72px);
  }
  .hero-bottom {
    grid-template-columns:1.4fr 1fr;
  }
  .hero-aside {
    display:none;
  }
  .portrait {
    max-width:280px;
  }
  .work-grid {
    gap:28px;
  }
  .database-art {
    padding:55px 28px 22px;
  }
  .db-heading {
    font-size:2.125rem;
  }
  .project-gym {
    padding-top:65px;
  }
  .hero-foot {
    font-size:0.75rem;
  }
  .desktop-break {
    display:none;
  }
}

@media(max-width:760px) {
  html {
    scroll-padding-top:84px;
  }
  .wrap {
    width:calc(100% - 40px);
  }
  .header-inner {
    height:68px;
  }
  .wordmark {
    font-size:2.0625rem;
  }
  .main-nav {
    gap:24px;
    margin-right:22px;
  }
  .theme-toggle {
    width:40px;
    height:40px;
  }
  .hero {
    padding-top:27px;
  }
  .hero-topline {
    font-size:0.75rem;
  }
  h1 {
    font-size:12.2vw;
    margin-top:22px;
    margin-bottom:30px;
    letter-spacing:-.05em;
  }
  .hero-bottom {
    gap:22px;
    grid-template-columns:1.3fr .7fr;
  }
  .role {
    font-size:1.6875rem;
  }
  .intro-copy {
    margin-top:19px;
    font-size:0.875rem;
  }
  .hero-actions {
    gap:20px;
    margin-top:23px;
    flex-wrap:wrap;
  }
  .button {
    padding:12px 16px;
    gap:20px;
  }
  .portrait {
    max-width:220px;
  }
  .portrait img {
    aspect-ratio:.84;
    object-position:50% 40%;
  }
  .portrait figcaption {
    font-size:0.75rem;
    line-height:1.4;
  }
  .hero-foot {
    gap:25px;
    margin-top:28px;
    padding-top:13px;
    line-height:1.5;
  }
  .hero-foot>span {
    max-width:50%;
  }
  .hero-foot>span:last-child {
    text-align:right;
  }
  .work-section {
    padding-block:72px;
  }
  .section-heading {
    margin-bottom:27px;
  }
  .section-heading>p {
    display:none;
  }
  .eyebrow {
    font-size:0.875rem;
    margin-bottom:10px;
  }
  .work-grid {
    gap:46px;
    grid-template-columns:1fr;
  }
  .project-gym {
    padding-top:0;
  }
  .project-cover {
    aspect-ratio:1.22;
  }
  .db-heading {
    font-size:2.5rem;
  }
  .database-art {
    padding:65px 32px 28px;
  }
  .entity-list {
    max-width:65%;
  }
  .project h3 {
    font-size:1.75rem;
  }
  .project h3 a>span {
    opacity:1;
  }
  .project>p {
    font-size:1rem;
  }
  .project-meta {
    margin-top:17px;
  }
}

@media(max-width:430px) {
  .main-nav {
    gap:18px;
    margin-right:18px;
  }
  .hero-bottom {
    grid-template-columns:minmax(0,1fr) 108px;
    gap:17px;
  }
  .role {
    font-size:1.5625rem;
  }
  .portrait img {
    aspect-ratio:.72;
  }
  .portrait figcaption {
    font-size:0.75rem;
  }
  .intro-copy {
    font-size:1rem;
  }
  .hero-actions {
    gap:10px 18px;
  }
  .hero-actions .text-link {
    min-height:40px;
  }
  .button {
    font-size:0.875rem;
    gap:16px;
  }
  .hero-foot {
    font-size:0.75rem;
    gap:15px;
  }
  .hero-topline {
    gap:18px;
    align-items:start;
  }
  .hero-topline>span:last-child {
    text-align:right;
  }
  .database-art {
    padding:59px 25px 23px;
  }
  .db-heading {
    font-size:2.125rem;
    margin-bottom:14px;
  }
  .entity-list>div {
    padding:5px 0;
  }
  .db-caption {
    margin-top:13px;
  }
  .cover-label {
    left:20px;
    top:18px;
  }
  .cover-open {
    bottom:18px;
    right:18px;
  }
  .project h3 {
    font-size:1.5625rem;
  }
}

@media(max-width:1100px) {
  .about-intro {
    gap:45px;
  }
  .experience-grid,.knowledge-grid {
    gap:40px;
  }
  .education-strip {
    grid-template-columns:.65fr 2fr 1fr;
  }
  .contact-main {
    grid-template-columns:1.2fr 1fr;
    gap:32px;
  }
  .contact-main h2 {
    font-size:6vw;
  }
  .contact-intro br {
    display:none;
  }
  .contact-bottom {
    gap:20px;
  }
  .social-links {
    gap:20px;
  }
  .case-body {
    padding-inline:35px;
  }
}

@media(max-width:760px) {
  .about-section {
    padding-block:60px;
  }
  .about-intro {
    grid-template-columns:1fr;
    gap:24px;
    margin-bottom:40px;
  }
  .about-intro>p {
    padding:0;
    font-size:1.125rem;
    max-width:580px;
  }
  .experience-grid {
    grid-template-columns:1fr;
    gap:35px;
  }
  .story>summary {
    padding-block:20px;
    min-height:90px;
  }
  .story-title {
    font-size:1.1875rem;
  }
  .education-strip {
    grid-template-columns:1fr auto;
    gap:18px;
    margin-top:35px;
    padding-block:25px;
  }
  .education-strip>.group-title {
    grid-column:1/-1;
  }
  .education-strip h3 {
    font-size:1.375rem;
  }
  .education-strip>span:last-child {
    max-width:6.25rem;
  }
  .education-strip p {
    font-size:0.875rem;
  }
  .knowledge-grid {
    grid-template-columns:1fr;
    gap:40px;
    margin-top:36px;
  }
  .skills-intro {
    font-size:1.375rem;
    margin-top:14px;
  }
  .credentials-languages {
    display:grid;
    grid-template-columns:1fr;
    gap:30px;
  }
  .languages {
    margin-top:0;
  }
  .contact-section {
    padding-block:30px;
  }
  .contact-topline>span {
    display:none;
  }
  .contact-main {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:28px;
    margin-bottom:30px;
  }
  .contact-main h2 {
    font-size:clamp(2.625rem,9vw,4.0625rem);
  }
  .contact-intro p {
    font-size:1rem;
    max-width:440px;
  }
  .contact-cta {
    margin-top:16px;
    font-size:1.375rem;
    min-width:180px;
  }
  .contact-bottom {
    flex-direction:column;
    align-items:start;
    gap:14px;
  }
  .social-links {
    gap:27px;
  }
  .email-link {
    font-size:1rem;
    overflow-wrap:anywhere;
  }
  .site-footer {
    font-size:0.75rem;
    gap:15px;
  }
  .site-footer .footer-name {
    font-size:0.875rem;
  }
  .project-dialog {
    width:calc(100% - 24px);
    max-height:calc(100dvh - 24px);
  }
  .case-header {
    padding:12px 20px;
    gap:12px;
  }
  .case-header>span {
    max-width:190px;
  }
  .case-body {
    padding:25px 22px 32px;
  }
  .case-lead {
    font-size:1.125rem;
    margin:15px 0 25px;
  }
  .case-body>h2 {
    font-size:2.25rem;
  }
  .media-tabs {
    gap:23px;
  }
  .media-tabs button {
    font-size:0.875rem;
  }
  .media-stage {
    height:330px;
  }
  .poster-stage {
    height:auto;
    min-height:0;
  }
  .case-overview {
    grid-template-columns:1fr;
    gap:15px;
    padding-block:25px;
  }
  .feature-list {
    grid-template-columns:1fr;
    gap:23px;
    margin-top:25px;
  }
  .feature-list h3 {
    margin-bottom:8px;
  }
  .components {
    grid-template-columns:1fr;
    gap:15px;
  }
  .project-facts {
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .project-facts>div:last-child {
    grid-column:1/-1;
  }
  .system-figure {
    padding:27px 15px 20px;
  }
  .system-entities {
    gap:7px;
  }
  .system-entities>span {
    font-size:0.75rem;
    padding:12px 5px;
  }
  .system-root {
    font-size:1.3125rem;
  }
  .media-panel figcaption {
    gap:12px;
  }
  .dialog-close {
    gap:12px;
    flex-shrink:0;
  }
  .project-details-fallback {
    padding-block:20px;
  }
}

@media(max-width:360px) {
  .wrap {
    width:calc(100% - 32px);
  }
  .main-nav {
    gap:14px;
    margin-right:13px;
    font-size:0.875rem;
  }
  .hero-bottom {
    grid-template-columns:minmax(0,1fr) 88px;
    gap:14px;
  }
  .role {
    font-size:1.375rem;
  }
  .portrait figcaption {
    font-size:0.75rem;
  }
  .button {
    padding-inline:12px;
    gap:9px;
  }
  .education-strip {
    grid-template-columns:1fr;
  }
  .education-strip>span:last-child {
    text-align:left;
    max-width:none;
  }
  .education-strip b {
    display:inline;
    margin-left:10px;
    font-size:1.375rem;
  }
  .case-body {
    padding-inline:18px;
  }
  .case-header {
    padding-inline:18px;
  }
  .case-header>span {
    font-size:0.75rem;
    max-width:135px;
  }
  .media-tabs {
    gap:17px;
  }
  .media-tabs button {
    font-size:0.75rem;
  }
  .system-entities {
    grid-template-columns:1fr;
    gap:10px;
    margin-top:34px;
  }
  .system-entities::before,.system-entities>span::before {
    display:none;
  }
  .system-root::after {
    height:33px;
    bottom:-34px;
  }
  .system-entities>span {
    font-size:0.875rem;
  }
  .contact-main h2 {
    font-size:2.4375rem;
  }
  .database-art {
    padding-top:52px;
  }
  .db-heading {
    font-size:1.8125rem;
  }
  .entity-list>div {
    font-size:0.75rem;
  }
  .db-caption {
    font-size:0.75rem;
    margin-top:8px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
}

@media print {
  .site-header,.hero-actions,.theme-toggle,.cover-open,.contact-cta,.project-details-fallback,.project-dialog,.site-footer>a:last-child {
    display:none!important;
  }
  body {
    background:#fff;
    color:#111;
    font-size:12pt;
  }
  .wrap {
    width:100%;
  }
  .hero {
    padding-top:0;
  }
  h1 {
    font-size:70pt;
  }
  .hero-bottom {
    grid-template-columns:1.5fr 1fr;
  }
  .hero-aside {
    display:none;
  }
  .portrait {
    max-width:170px;
  }
  .hero-foot {
    margin-top:20px;
  }
  .work-section,.about-section {
    padding-block:30px;
  }
  .work-grid {
    gap:20px;
  }
  .project-gym {
    padding-top:0;
  }
  .project-cover {
    max-height:230px;
  }
  .database-art {
    padding:40px 20px 20px;
  }
  .db-heading {
    font-size:1.5625rem;
  }
  .project {
    break-inside:avoid;
  }
  .contact-section {
    background:#fff;
    color:#111;
    border-top:1px solid #ccc;
    padding-block:25px;
  }
  .contact-main h2 {
    font-size:32pt;
  }
  .contact-intro p,.contact-topline>span {
    color:#333;
  }
  .contact-main {
    margin:20px 0;
  }
  .about-intro>p {
    font-size:15pt;
  }
  .experience-grid,.knowledge-grid {
    gap:30px;
  }
  .story-title {
    font-size:14pt;
  }
  .expand-icon {
    display:none;
  }
  .about-section {
    background:#fff;
  }
  .contact-main,.contact-bottom {
    display:block;
  }
  .social-links {
    margin-top:12px;
  }
  .site-footer {
    padding-block:16px;
  }
}
/* Let enlarged text reflow without hiding navigation or project information. */
.hero-intro, .experience-group, .knowledge-grid>*, .contact-main>*, .hero-bottom>* { min-width:0; }
.role, h2, h3, .portrait figcaption { overflow-wrap:anywhere; }
.site-footer { flex-wrap:wrap; }
.cover-label { max-width:calc(100% - 44px); }
@media(max-width:760px) {
  .header-inner {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) 40px;
    gap:14px;
    height:auto;
    min-height:68px;
    padding-block:12px;
  }
  .main-nav {
    flex-wrap:wrap;
    gap:0 18px;
    justify-content:flex-end;
    margin:0;
  }
  .main-nav a { padding-block:7px; }
  .contact-main { grid-template-columns:minmax(0,1fr); }
}

/* ── Luminous edition: atmosphere, materials, and motion ── */

main { position:relative; isolation:isolate; }
.header-actions { display:flex; align-items:center; gap:8px; }
.site-header { background:none; border:0; top:16px; margin-top:16px; }
.header-inner {
  background:var(--glass);
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  border-radius:24px;
  padding-inline:25px;
  height:72px;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 8px 36px #0000000a,inset 0 1px 0 #ffffff0a;
}
.wordmark { font-size:2.125rem; letter-spacing:-3px; }
.wordmark span { color:var(--accent); text-shadow:0 0 20px var(--glow-blue); }
.main-nav { gap:9px; margin-right:30px; }
.main-nav a { padding:8px 17px; border-radius:12px; color:var(--muted); transition:background .25s,color .25s; }
.main-nav a::after { display:none; }
.main-nav a:hover,.main-nav a[aria-current="location"] { background:var(--accent-soft); color:var(--ink); }
.theme-toggle,.motion-toggle {
  flex-shrink:0;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  background:transparent;
  transition:background .25s,border-color .25s,box-shadow .25s;
}
.theme-toggle:hover,.motion-toggle:hover { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 24px var(--glow-blue); }
.motion-toggle svg { stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.motion-toggle .play-icon { display:none; }
[data-motion="quiet"] .motion-toggle .pause-icon { display:none; }
[data-motion="quiet"] .motion-toggle .play-icon { display:block; }
.ambient-stage { position:absolute; z-index:-1; inset:-105px 0 auto; height:1050px; overflow:hidden; pointer-events:none; contain:paint; }
.aurora { position:absolute; border-radius:50%; filter:blur(75px); opacity:.9; }
.aurora-blue { width:760px; height:640px; left:24%; top:-300px; background:var(--glow-blue); }
.aurora-violet { width:570px; height:660px; right:-100px; top:60px; background:var(--glow-violet); }
.aurora-cyan { width:420px; height:380px; right:18%; top:370px; background:var(--glow-cyan); }
.horizon-light { position:absolute; top:810px; left:12%; width:76%; height:1px; background:linear-gradient(90deg,transparent,var(--accent),var(--accent-two),transparent); opacity:.22; box-shadow:0 0 38px 2px var(--glow-blue); }
.hero { position:relative; padding-top:58px; }
.hero-topline { font-size:.8125rem; letter-spacing:.025em; }
.hero-topline>span:first-child { display:flex; align-items:center; gap:10px; }
.hero-topline>span:first-child::before { content:""; width:16px; height:1px; background:var(--accent); box-shadow:0 0 10px var(--accent); flex-shrink:0; }
h1 { font-size:clamp(4.5rem,12.1vw,10.75rem); font-weight:600; letter-spacing:-.055em; line-height:1.14; margin:28px 0 42px; }
.name-first,.name-last { display:inline-block; }
.name-last,.accent-text {
  color:var(--accent);
  background:var(--name-gradient);
  background-size:180% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.name-period { -webkit-text-fill-color:var(--accent); color:var(--accent); text-shadow:0 0 35px var(--glow-blue); }
.hero-bottom { grid-template-columns:1.25fr .65fr 1fr; gap:44px; align-items:center; }
.role { font-size:clamp(1.75rem,2.7vw,2.5rem); line-height:1.2; font-weight:500; }
.role-accent { color:var(--accent); }
.intro-copy { line-height:1.8; max-width:420px; }
.hero-actions { gap:28px; margin-top:32px; }
.button { border-radius:14px; position:relative; overflow:hidden; min-height:54px; }
.button-solid { color:#081427; background:linear-gradient(105deg,#9ee4f0,#8ac8ff); border-color:#cbe6ff; box-shadow:0 7px 30px var(--glow-blue),inset 0 1px 0 #fff8; }
[data-theme="light"] .button-solid { background:linear-gradient(110deg,#0966b6,#087c92); color:#fff; border-color:#388aa9; }
.button-solid::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 25%,#ffffff65 50%,transparent 75%); transform:translateX(-140%); transition:transform .7s; pointer-events:none; }
.button-solid:hover::before { transform:translateX(140%); }
.button-solid:hover { color:#081427; background:linear-gradient(105deg,#bdf4f5,#aed9ff); box-shadow:0 10px 42px var(--glow-blue); }
[data-theme="light"] .button-solid:hover { color:#fff; background:linear-gradient(110deg,#0b72c6,#09889b); }
.text-link { border-color:var(--line); color:var(--ink); }
.hero-aside { align-self:end; margin-bottom:46px; border:0; padding-left:0; }
.hero-aside p { font-size:.875rem; line-height:1.65; }
.hero-aside p::before { content:""; display:block; width:30px; height:3px; margin-bottom:17px; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent-two)); box-shadow:0 0 20px var(--glow-blue); }
.hero-aside>span { line-height:1.8; }
.portrait { max-width:340px; position:relative; padding:8px; isolation:isolate; }
.portrait::before { content:""; position:absolute; z-index:-1; inset:2% -9% 8%; border-radius:48%; background:conic-gradient(from 50deg,var(--glow-cyan),var(--glow-blue),var(--glow-violet),var(--glow-cyan)); filter:blur(34px); opacity:1; }
.portrait-frame { border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); background:var(--glass); border-radius:24px; padding:9px; box-shadow:0 22px 60px #0003,inset 0 1px 1px #ffffff25; transform:perspective(1100px) rotateY(-6deg) rotateZ(2deg); position:relative; transition:transform .6s cubic-bezier(.2,.65,.2,1); }
.portrait-image { overflow:hidden; border-radius:17px; position:relative; }
.portrait-image::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(145deg,#559edf18,transparent 50%,#44c2d424); }
.portrait img { aspect-ratio:1; object-position:50% 38%; filter:grayscale(.25); transition:filter .6s,transform .8s; }
.portrait-frame:hover img { filter:grayscale(0); transform:scale(1.025); }
.portrait-label { display:flex; justify-content:space-between; gap:12px; padding:12px 6px 4px; font-size:.75rem; color:var(--ink); }
.portrait-label>span:last-child { color:var(--muted); }
.portrait figcaption { padding-top:20px; text-align:center; font-size:.75rem; }
.hero-foot { margin-top:53px; padding-top:20px; border-color:color-mix(in srgb,var(--line) 65%,transparent); }
.work-section { padding-block:112px 100px; }
.eyebrow { letter-spacing:.09em; text-transform:uppercase; font-size:.75rem; font-weight:600; }
h2 { font-size:clamp(2rem,3.7vw,3.25rem); line-height:1.2; }
.section-heading { margin-bottom:43px; }
.work-grid { gap:42px; }
.project-gym { padding-top:90px; }
.project-cover { border-radius:24px; border:1px solid var(--line); isolation:isolate; box-shadow:0 16px 50px #00000014; transition:transform .45s cubic-bezier(.2,.65,.2,1),border-color .3s,box-shadow .3s; }
.project-cover::after { content:""; position:absolute; z-index:2; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 #ffffff28; background:radial-gradient(340px circle at var(--mx,50%) var(--my,20%),#9ec8ff22,transparent 65%); opacity:0; transition:opacity .35s; }
.project-cover:hover::after { opacity:1; }
.project-cover:hover { border-color:color-mix(in srgb,var(--accent) 65%,var(--line)); box-shadow:0 22px 65px #00000028,0 0 35px var(--glow-blue); }
.bin-cover::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,#07101940,transparent 35%,#07101930); pointer-events:none; }
.cover-label { border:1px solid #ffffff2b; border-radius:30px; padding:7px 13px; background:#0b1228b8; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:.75rem; }
.cover-open { z-index:3; background:#e7f2ff; color:#122548; box-shadow:0 4px 25px #0002; }
.gym-cover { background:radial-gradient(ellipse at 90% 5%,var(--glow-violet),transparent 60%),radial-gradient(ellipse at 0% 100%,var(--glow-blue),transparent 55%),var(--diagram); }
.gym-cover .cover-label { padding:7px 13px; border-color:var(--line); color:var(--muted); background:var(--glass); }
.gym-cover .cover-open { background:linear-gradient(135deg,#9cddff,#9ae9e4); color:#102142; }
.database-art { padding:75px 42px 38px; }
.db-heading { font-size:clamp(1.5rem,3.4vw,3rem); margin-bottom:29px; }
.entity-list { max-width:310px; gap:9px; }
.entity-list>div { border:1px solid var(--line); background:var(--glass); border-radius:9px; padding:9px 12px; font-size:.8125rem; box-shadow:0 3px 10px #00000008; }
.entity-list i { background:var(--accent); box-shadow:0 0 9px var(--glow-cyan); border-radius:50%; margin-left:0; }
.entity-list::before,.entity-list>div::before { background:var(--accent); opacity:.45; }
.db-caption { margin-top:23px; }
.project-meta { margin-top:24px; font-size:.75rem; }
.project h3 { margin-top:9px; font-size:clamp(1.5rem,2.15vw,1.9375rem); }
.project-tags { gap:8px; margin-top:20px; }
.project-tags>span { border-radius:30px; background:var(--accent-soft); border-color:transparent; padding:5px 11px; color:var(--muted); }
.about-section { position:relative; background:linear-gradient(145deg,var(--surface),var(--bg)); border-block:1px solid var(--line); padding-block:95px; }
.about-section::before { content:""; position:absolute; top:-1px; left:20%; right:20%; height:1px; background:linear-gradient(90deg,transparent,var(--accent),var(--accent-two),transparent); box-shadow:0 0 24px var(--glow-blue); }
.about-intro>p { font-size:1.1875rem; color:var(--muted); }
.story,.skill-row { transition:border-color .3s,background .3s; }
.story>summary { padding-inline:10px; margin-inline:-10px; border-radius:10px; transition:background .3s; }
.story>summary:hover { background:var(--accent-soft); }
.story[open] { border-top-color:var(--accent); }
.expand-icon { color:var(--accent); transition:transform .35s; }
.story-body { animation:none; }
.education-strip { background:linear-gradient(100deg,var(--accent-soft),transparent 75%); border:1px solid var(--line); border-radius:18px; padding:27px; }
.education-strip b { color:var(--accent); text-shadow:0 0 28px var(--glow-blue); }
.certificate-list { border-radius:14px; border:1px solid var(--line); padding-inline:18px; background:var(--glass); }
.certificate-list>summary { font-size:1.0625rem; }
.languages dl { gap:22px 25px; }
.contact-section,[data-theme="dark"] .contact-section { background:transparent; color:var(--ink); padding-block:90px 28px; }
.contact-section>.wrap { position:relative; isolation:isolate; padding:44px 48px 30px; border:1px solid var(--line); border-radius:30px; background:var(--surface); overflow:hidden; box-shadow:0 18px 90px #0000000f; }
.contact-section>.wrap::before { content:""; position:absolute; z-index:-1; width:85%; height:110%; left:-15%; bottom:-75%; border-radius:50%; background:linear-gradient(90deg,var(--glow-blue),var(--glow-violet)); filter:blur(55px); }
.contact-section>.wrap::after { content:""; position:absolute; z-index:-1; width:500px; height:500px; border-radius:50%; background:var(--glow-cyan); right:-270px; top:-310px; filter:blur(70px); }
.contact-topline { color:var(--accent); font-size:.8125rem; }
.contact-topline>span,.contact-intro p { color:var(--muted); }
.contact-main { grid-template-columns:1.45fr 1fr; margin-top:42px; }
.contact-main h2 { font-size:clamp(2.375rem,5.1vw,4.75rem); }
.contact-cta { color:var(--ink); border-color:var(--line); }
.contact-cta:hover { color:var(--accent); border-color:var(--accent); }
.contact-bottom { border-color:var(--line); }
.contact-section :focus-visible { outline-color:var(--accent); }
.site-footer { padding-bottom:34px; }
.project-dialog { border-radius:24px; border-color:color-mix(in srgb,var(--accent) 30%,var(--line)); box-shadow:0 25px 120px #0008,0 0 45px var(--glow-blue); }
.project-dialog::backdrop { background:#030818bd; backdrop-filter:blur(12px); }
.case-header { background:var(--glass); backdrop-filter:blur(20px); }
.dialog-close { border-radius:10px; }
.media-stage,.system-figure { border-radius:15px; overflow:hidden; }
.system-root,.system-entities>span { border-radius:10px; }
.system-entities>span { box-shadow:0 5px 24px var(--glow-blue); }
[data-motion="full"] .aurora-blue { animation:aurora-drift 16s ease-in-out infinite alternate; }
[data-motion="full"] .aurora-violet { animation:aurora-drift 20s ease-in-out -5s infinite alternate-reverse; }
[data-motion="full"] .aurora-cyan { animation:aurora-drift 18s ease-in-out -8s infinite alternate; }
[data-motion="full"] .name-last { animation:name-light 12s ease-in-out infinite alternate; }
[data-motion="quiet"] *,[data-motion="quiet"] *::before,[data-motion="quiet"] *::after { animation:none!important; }
html[data-motion="quiet"] { scroll-behavior:auto; }
@keyframes aurora-drift { from { transform:translate3d(-3%,0,0) rotate(-8deg) scale(.92); } to { transform:translate3d(7%,7%,0) rotate(12deg) scale(1.12); } }
@keyframes name-light { from { background-position:0% 50%; } to { background-position:100% 50%; } }
@keyframes disclosure-enter { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:761px) and (hover:hover) and (pointer:fine) {
  [data-motion="full"] [data-tilt] { transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
  [data-motion="full"] .portrait-frame[data-tilt] { transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(calc(-4deg + var(--ry,0deg))) rotateZ(2deg); }
}
@media(max-width:1100px) {
  .hero-bottom { grid-template-columns:1.4fr 1fr; gap:42px; }
  .portrait { max-width:300px; }
  .database-art { padding:65px 28px 30px; }
  .entity-list { gap:6px; }
  .entity-list>div { padding:7px 10px; }
  .contact-section>.wrap { padding:35px 32px 26px; }
  .contact-main { grid-template-columns:1.25fr 1fr; gap:30px; }
}
@media(max-width:760px) {
  .site-header { top:8px; margin-top:8px; }
  .header-inner.wrap { width:calc(100% - 24px); padding:9px 14px; border-radius:18px; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; min-height:62px; height:auto; }
  .wordmark { font-size:1.875rem; }
  .main-nav { margin:0; gap:0 1px; }
  .main-nav a { padding:8px 10px; font-size:.8125rem; border-radius:9px; }
  .header-actions { gap:5px; }
  .theme-toggle,.motion-toggle { width:34px; height:36px; border-radius:10px; }
  .hero { padding-top:38px; }
  .hero-topline { font-size:.75rem; }
  .hero-topline>span:first-child { gap:7px; }
  .hero-topline>span:first-child::before { width:10px; }
  h1 { font-size:12vw; letter-spacing:-.05em; margin:24px 0 35px; }
  .hero-bottom { grid-template-columns:minmax(0,1fr) 160px; gap:24px; align-items:start; }
  .portrait { padding:0; margin-top:6px; }
  .portrait-frame { padding:5px; border-radius:17px; transform:rotate(2deg); }
  .portrait-image { border-radius:12px; }
  .portrait img { aspect-ratio:.86; }
  .portrait-label { font-size:.75rem; padding:9px 3px 3px; gap:5px; }
  .portrait-label>span:last-child { display:none; }
  .portrait figcaption { font-size:.75rem; line-height:1.55; padding-top:17px; }
  .role { font-size:1.6875rem; }
  .hero-actions { gap:15px; margin-top:24px; }
  .button { border-radius:12px; min-height:50px; }
  .hero-foot { margin-top:37px; padding-top:17px; }
  .ambient-stage { height:900px; }
  .aurora { filter:blur(50px); }
  .aurora-blue { width:400px; height:400px; left:-100px; top:-160px; }
  .aurora-violet { width:300px; height:400px; right:-140px; top:170px; }
  .aurora-cyan { width:220px; height:250px; right:0; top:410px; }
  .horizon-light { top:700px; }
  .work-section { padding-block:78px 65px; }
  .section-heading { margin-bottom:29px; }
  .work-grid { gap:45px; }
  .project-gym { padding-top:0; }
  .project-cover { border-radius:19px; }
  .database-art { padding:65px 28px 27px; }
  .db-heading { font-size:2.25rem; margin-bottom:20px; }
  .entity-list { max-width:72%; }
  .entity-list>div { font-size:.8125rem; }
  .cover-label { top:16px; left:16px; font-size:.75rem; }
  .project h3 { font-size:1.625rem; }
  .about-section { padding-block:60px; }
  .education-strip { padding:22px; }
  .contact-section { padding-block:58px 15px; }
  .contact-section>.wrap { padding:30px 26px 26px; border-radius:23px; }
  .contact-main { grid-template-columns:minmax(0,1fr); gap:28px; margin-top:30px; }
  .contact-main h2 { font-size:clamp(2.25rem,8.4vw,4rem); }
  .social-links { gap:17px; }
  .project-dialog { border-radius:18px; }
}
@media(max-width:430px) {
  .hero-bottom { grid-template-columns:minmax(0,1fr) 115px; gap:20px; }
  .role { font-size:1.5rem; }
  .intro-copy { font-size:1rem; }
  .portrait img { aspect-ratio:.8; }
  .portrait-label { font-size:.75rem; }
  .portrait-frame { transform:rotate(2deg); }
  .hero-topline>span:first-child::before { display:none; }
  .main-nav a { padding-inline:8px; }
  .header-inner.wrap { gap:7px; padding-inline:12px; }
  .button { padding-inline:14px; gap:13px; }
  .db-heading { font-size:2rem; }
  .entity-list { max-width:78%; }
  .contact-section>.wrap { padding-inline:22px; }
  .email-link { font-size:.875rem; }
}
@media(max-width:360px) {
  .main-nav a { padding-inline:5px; font-size:.75rem; }
  .header-inner.wrap { padding-inline:10px; gap:6px; }
  .header-actions { gap:4px; }
  .theme-toggle,.motion-toggle { width:30px; }
  .hero-bottom { grid-template-columns:minmax(0,1fr) 90px; gap:15px; }
  .role { font-size:1.375rem; }
  .portrait-label { display:none; }
  .database-art { padding:62px 22px 25px; }
  .db-heading { font-size:1.8125rem; }
  .entity-list { max-width:88%; }
  .contact-main h2 { font-size:2rem; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
  [data-tilt] { transform:none!important; }
  .motion-toggle { display:none!important; }
}
@media print {
  .ambient-stage,.motion-toggle { display:none!important; }
  .name-last,.accent-text { background:none; -webkit-text-fill-color:currentColor; color:inherit; }
  .portrait-frame { transform:none; box-shadow:none; }
  .portrait::before,.contact-section>.wrap::before,.contact-section>.wrap::after { display:none; }
  .contact-section>.wrap { padding:20px 0; border:0; box-shadow:none; background:none; }
}


/* Only the disclosure body is clipped; the hover and focus treatment stays still. */
.disclosure-content { display:flow-root; }
.certificate-link { width:100%; justify-content:space-between; min-height:60px; padding:17px 22px; font-size:1rem; font-weight:650; color:#081427; background:linear-gradient(105deg,#9ee4f0,#8ac8ff); border-color:#cbe6ff; box-shadow:0 8px 32px var(--glow-blue),inset 0 1px 0 #fff8; }
.certificate-link:hover { color:#081427; background:linear-gradient(105deg,#bdf4f5,#aed9ff); box-shadow:0 10px 40px var(--glow-blue); }
[data-theme="light"] .certificate-link { color:#fff; background:linear-gradient(110deg,#0966b6,#087c92); border-color:#388aa9; }
[data-theme="light"] .certificate-link:hover { background:linear-gradient(110deg,#07579e,#076b80); }
.certificate-link>span { font-size:1.4rem; }
/* Accepted blue appearance, document actions, and interaction refinements. */
.hero { padding-top:48px; } h1 { font-size:clamp(4.5rem,11.8vw,10rem); margin:24px 0 32px; } .portrait { max-width:300px; } .hero-foot { margin-top:37px; } .work-section { padding-top:88px; }
.cover-open { display:flex; align-items:center; gap:15px; width:auto; padding-inline:17px; border-radius:30px; font-size:.8125rem; font-weight:500; } .cover-open>span:last-child { font-size:1.375rem; } .project-cover:hover .cover-open { transform:translateY(-3px); }
.theme-toggle { display:flex; align-items:center; justify-content:center; width:96px; gap:9px; border-radius:30px; min-height:42px; } .theme-name { font-size:.8125rem; font-weight:500; } .theme-icon { width:20px; height:20px; position:relative; flex:0 0 20px; } .theme-toggle .theme-icon svg { position:absolute; inset:0; width:20px; height:20px; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; fill:none; transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .35s; } .theme-toggle .theme-icon svg path { stroke:currentColor; fill:none; } .theme-toggle .theme-moon { opacity:1; transform:rotate(0) scale(1); } .theme-toggle .theme-sun { opacity:0; transform:rotate(-100deg) scale(.4); } [data-theme="light"] .theme-toggle .theme-moon { opacity:0; transform:rotate(100deg) scale(.4); } [data-theme="light"] .theme-toggle .theme-sun { opacity:1; transform:rotate(0) scale(1); }
::view-transition-old(root),::view-transition-new(root) { animation:none; mix-blend-mode:normal; } ::view-transition-old(root) { z-index:1; } ::view-transition-new(root) { z-index:2; } ::view-transition-group(root) { animation:none; }
.cv-link { background:var(--accent-soft); border:1px solid var(--accent); color:var(--ink); box-shadow:0 0 24px var(--glow-cyan); padding-inline:22px; } .cv-link:hover { background:var(--surface); box-shadow:0 0 35px var(--glow-blue); transform:translateY(-2px); }
.mini-heading { flex-wrap:wrap; gap:18px; align-items:center; } .certificate-link { display:flex; border-radius:14px; gap:18px; text-decoration:none; } .certificate-list { border:1px solid var(--line); border-radius:16px; padding-inline:18px; margin-top:20px; } .certificate-list summary>span>span { color:var(--accent); }
.mini-schema { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:45px 18px; margin-top:22px; max-width:380px; } .mini-schema svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .mini-schema path { fill:none; stroke:var(--accent); stroke-width:1.4; opacity:.65; } .mini-schema>span { position:relative; background:var(--surface); border:1px solid var(--line); padding:10px 5px; border-radius:8px; font-size:.7rem; text-align:center; color:var(--ink); box-shadow:0 3px 15px var(--glow-blue); }
.schema-figure { margin:35px 0; padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--accent-soft); } .schema-heading { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; } .schema-heading>strong { font-size:1rem; } .schema-heading>span { font-size:.75rem; color:var(--muted); } .schema-heading b { color:var(--accent); margin-left:10px; } .schema-scroll { overflow-x:auto; margin-block:18px; border-radius:12px; } .schema-canvas { position:relative; min-width:680px; aspect-ratio:900/560; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:1fr 1fr; gap:20% 8%; padding:2% 1%; } .schema-connections { position:absolute; inset:0; width:100%; height:100%; } .schema-connections path { fill:none; stroke:var(--accent); stroke-width:1.8; } .schema-connections text { fill:var(--accent); font:13px ui-monospace,monospace; } .schema-table { position:relative; align-self:center; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 6px 24px var(--glow-blue); } .schema-table h4 { margin:0; padding:12px 13px; font-size:.875rem; color:var(--accent); border-bottom:1px solid var(--line); background:var(--glass); } .schema-table ul { padding:9px 11px; margin:0; list-style:none; } .schema-table li { display:flex; align-items:center; gap:6px; min-height:26px; } .schema-table code { font-size:.625rem; white-space:nowrap; } .key-tag { color:var(--accent); font:600 .5625rem ui-monospace,monospace; min-width:16px; } .schema-figure figcaption,.schema-description { font-size:.8125rem; line-height:1.7; color:var(--muted); margin:12px 0 0; } .schema-scroll-hint { font-size:.75rem; color:var(--accent); margin:16px 0 0; }
.gym-cover { aspect-ratio:auto; } .gym-cover .database-art { min-height:0; padding-bottom:86px; }
@media(max-width:1100px) { .portrait { max-width:280px; } }
@media(max-width:760px) { .hero { padding-top:35px; } h1 { font-size:12vw; margin:24px 0 32px; } .theme-toggle { width:40px; height:40px; min-height:40px; border-radius:12px; } .theme-name { display:none; } .main-nav { gap:0 6px; } .main-nav a { font-size:.875rem; padding-inline:10px; } .work-section { padding-top:66px; } .cover-open { height:44px; padding-inline:14px; gap:12px; } .schema-figure { padding:16px; } .mini-schema { gap:36px 9px; } .mini-schema>span { font-size:.625rem; padding:9px 3px; } .db-heading { font-size:1.875rem; } .db-caption { margin-top:15px; } }
@media(max-width:360px) { .main-nav { gap:0; } .main-nav a { font-size:.8125rem; padding-inline:7px; } }
@media(prefers-reduced-motion:no-preference) { .project-dialog[open] { animation:project-arrive .4s cubic-bezier(.16,1,.3,1); } .project-dialog[open]::backdrop { animation:backdrop-arrive .35s ease-out; } @keyframes project-arrive { from { opacity:0; transform:translateY(26px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } } @keyframes backdrop-arrive { from { opacity:0; } to { opacity:1; } } }
@media(prefers-reduced-motion:reduce) { .theme-toggle .theme-icon svg { transition:none; } }
/* Featured nonprofit project, using the supplied screenshot without remote assets. */
.project-academy { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:40px; align-items:center; padding-bottom:48px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.academy-cover { aspect-ratio:2880/1864; background:#eee9df; }
.academy-cover img { display:block; width:100%; height:auto; }
.academy-cover .cover-open { background:#eff8ff; color:#102142; box-shadow:0 6px 25px #0004; }
.academy-intro { min-width:0; }
.academy-intro .project-meta { margin-top:0; gap:18px; }
.academy-intro h3 { font-size:clamp(1.75rem,2.7vw,2.5rem); line-height:1.15; margin-top:20px; }
.academy-intro .academy-kicker { color:var(--accent); margin-top:18px; font-size:.9375rem; }
.academy-intro>p { font-size:1rem; }
.live-status { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.live-status::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent-two); box-shadow:0 0 12px var(--glow-cyan); }
.academy-live { margin-top:25px; text-decoration:none; }
.academy-preview { margin:30px 0; }
.academy-preview img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:15px; }
.academy-preview figcaption { margin-top:12px; color:var(--muted); font-size:.8125rem; }
.academy-closing { color:var(--accent); margin-top:28px; }
@media(max-width:1000px) { .project-academy { grid-template-columns:minmax(0,1fr); gap:25px; } .academy-intro h3 { font-size:2rem; } }
@media(max-width:760px) { .project-academy { gap:22px; padding-bottom:35px; margin-bottom:0; } .academy-intro h3 { font-size:1.75rem; } .academy-live { margin-top:20px; } }

.case-body>.academy-live { margin-bottom:28px; }