:root {
  --paper:#f8f6ef;
  --ink:#332b3e;
  --muted:#6a6372;
  --line:#ddd8d5;
  --lilac:#d6c5f3;
  --violet:#75549c;
  --coral:#db654c;
  --lime:#e4efa4;
  --peach:#f2d2bd;
  --sans:'DM Sans',Arial,sans-serif;
  --display:'Space Grotesk',Arial,sans-serif;
  --hand:'Caveat',cursive;
}

* {
  box-sizing:border-box;
}

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

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

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

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

button {
  border:0;
}

button:disabled {
  cursor:default;
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--violet);
  outline-offset:5px;
  border-radius:3px;
}

::selection {
  background:var(--lilac);
  color:var(--ink);
}

[hidden] {
  display:none!important;
}

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

h1,h2,h3 {
  font-family:var(--display);
  font-weight:500;
  line-height:1.12;
}

h2 {
  font-size:clamp(36px,4vw,56px);
  letter-spacing:-2.5px;
}

h2 em {
  font-family:Georgia,serif;
  font-weight:400;
}

p+p {
  margin-top:18px;
}

img {
  max-width:100%;
  display:block;
}

button {
  background:none;
}

em {
  font-weight:400;
}

.section-shell {
  max-width:1200px;
  margin:0 auto;
  padding-left:58px;
  padding-right:58px;
}

.eyebrow {
  font-family:var(--display);
  font-size:10px;
  font-weight:500;
  letter-spacing:1.8px;
  line-height:1.6;
}

.handwritten {
  font-family:var(--hand);
  font-weight:500;
}

.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  padding:10px 20px;
  background:var(--lime);
  z-index:200;
}

.skip-link:focus {
  top:15px;
}

.site-header {
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:0 5%;
  border-bottom:1px solid var(--line);
  background:rgba(248,246,239,.96);
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(12px);
}

.wordmark {
  font-family:var(--hand);
  font-size:47px;
  font-weight:700;
  letter-spacing:-3px;
  line-height:1;
  display:flex;
  align-items:baseline;
  transform:rotate(-7deg);
}

.wordmark span {
  color:var(--coral);
  font-size:58px;
}

.wordmark i {
  font-family:var(--sans);
  font-size:20px;
  color:var(--violet);
  font-style:normal;
  align-self:flex-start;
  line-height:2;
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:12px;
  font-weight:500;
}

.site-header nav a {
  position:relative;
  padding:8px 0;
}

.site-header nav a:after {
  position:absolute;
  bottom:2px;
  left:0;
  right:100%;
  height:2px;
  background:var(--coral);
  content:'';
  transition:right .2s;
}

.site-header nav a:hover:after {
  right:0;
}

.daily-nav {
  color:#76513e;
}

.game-toggle {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #c9c2d2;
  border-radius:30px;
  padding:9px 13px;
  font-size:10px;
  white-space:nowrap;
}

.game-toggle b {
  font-weight:400;
  color:var(--muted);
}

.toggle-track {
  width:24px;
  height:14px;
  background:#d5cfd9;
  border-radius:15px;
  padding:3px;
  display:block;
}

.toggle-track span {
  display:block;
  width:8px;
  height:8px;
  background:var(--ink);
  border-radius:50%;
  transition:transform .2s;
}

.game-toggle[aria-checked=true] {
  background:var(--lime);
  border-color:#bcc986;
}

.game-toggle[aria-checked=true] .toggle-track {
  background:#b1c16e;
}

.game-toggle[aria-checked=true] .toggle-track span {
  transform:translateX(10px);
}

.side-index {
  position:fixed;
  left:22px;
  top:40%;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:17px;
  z-index:10;
  font:10px var(--display);
  color:#938a9a;
}

.side-index .side-label {
  writing-mode:vertical-rl;
  font-size:8px;
  letter-spacing:2px;
  position:absolute;
  bottom:calc(100% + 35px);
  max-height:120px;
  white-space:nowrap;
  transform:rotate(180deg);
}

.side-index a {
  width:22px;
  text-align:center;
  position:relative;
}

.side-index a.active {
  color:var(--ink);
}

.side-index a.active:before {
  content:'';
  position:absolute;
  left:-8px;
  top:3px;
  background:var(--coral);
  width:5px;
  height:5px;
  border-radius:50%;
}

.hero {
  padding-top:78px;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  column-gap:40px;
  position:relative;
}

.status-dot {
  width:6px;
  height:6px;
  display:inline-block;
  margin-right:5px;
  background:#758343;
  border-radius:50%;
  box-shadow:0 0 0 4px #e6ead6;
}

.hello {
  font-size:33px;
  color:var(--violet);
  margin-top:29px;
  transform:rotate(-4deg);
  display:inline-block;
}

.hello span {
  display:inline-block;
  font-size:38px;
  margin-left:7px;
  transform:rotate(-12deg);
}

.hero h1 {
  font-size:clamp(56px,5.5vw,77px);
  letter-spacing:-4.5px;
  margin-top:12px;
  line-height:1.03;
}

.coral {
  color:var(--coral);
}

.hero-alias {
  display:inline-block;
  font-size:clamp(30px,2.8vw,41px);
  letter-spacing:-1.8px;
  margin-top:14px;
}

.hero-alias em {
  font-family:var(--hand);
  font-size:1.4em;
  font-weight:600;
  position:relative;
}

.hero-alias em:after {
  content:'';
  position:absolute;
  left:-2px;
  right:0;
  bottom:-3px;
  height:9px;
  border:2px solid var(--coral);
  border-top:0;
  border-left:0;
  border-right:0;
  border-radius:50%;
  transform:rotate(-5deg);
}

.hero-description {
  font-size:19px;
  line-height:1.6;
  margin-top:31px;
  font-weight:500;
  letter-spacing:-.35px;
}

.hero-note {
  color:var(--muted);
  font-size:14px;
  margin-top:14px;
  line-height:1.8;
}

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

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  font-size:12px;
  font-weight:500;
  padding:15px 22px;
  border:1px solid var(--ink);
  border-radius:5px;
  transition:transform .2s,box-shadow .2s;
}

.button:hover {
  transform:translateY(-3px);
  box-shadow:3px 4px 0 #bdadce;
}

.primary {
  background:var(--ink);
  color:var(--paper);
}

.text-link {
  font-size:12px;
  border-bottom:1px solid var(--ink);
  padding:5px 0;
}

.text-link span {
  margin-left:10px;
}

.availability {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:27px;
  font-size:10px;
  color:var(--muted);
}

.tiny-star {
  font-size:19px;
  color:var(--coral);
}

.portrait-composition {
  height:530px;
  position:relative;
  align-self:center;
  isolation:isolate;
}

.portrait-stage {
  position:absolute;
  inset:10px 0 30px;
  overflow:hidden;
  clip-path:ellipse(47% 49% at 50% 50%);
  background:#e7dff0;
}

.portrait-stage img {
  width:100%;
  height:100%;
  object-fit:cover;
  mix-blend-mode:multiply;
}

.portrait-stage canvas {
  width:100%;
  height:100%;
  display:block;
  cursor:crosshair;
}

.orbit {
  position:absolute;
  border:1px solid #b9a4ce;
  border-radius:50%;
  z-index:-1;
}

.orbit-one {
  inset:60px 18px 61px;
  transform:rotate(-28deg);
}

.orbit-two {
  inset:7px 35px 6px;
  transform:rotate(22deg);
}

.portrait-star {
  font-size:99px;
  position:absolute;
  top:-26px;
  right:8px;
  color:var(--coral);
  line-height:1;
  z-index:2;
  transform:rotate(10deg);
}

.portrait-sticker {
  position:absolute;
  bottom:68px;
  left:-9px;
  transform:rotate(-10deg);
  background:var(--lime);
  border:1px solid #83904d;
  border-radius:5px;
  font-size:11px;
  padding:6px 13px;
  box-shadow:2px 3px 0 rgba(51,43,62,.1);
  display:flex;
  align-items:center;
  gap:8px;
  z-index:2;
}

.portrait-sticker span {
  font-size:26px;
  line-height:1.2;
}

.portrait-caption {
  position:absolute;
  left:10%;
  bottom:-2px;
  z-index:2;
  margin:0;
  color:var(--lilac);
  font-size:22px;
  line-height:1.1;
  transform:rotate(-3deg);
  white-space:nowrap;
}


.hero-footer {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  margin-top:55px;
  padding:22px 0 25px;
  font-size:10px;
  color:var(--muted);
}

.hero-footer strong {
  font-weight:600;
  color:var(--ink);
}

.hero-footer a:hover {
  color:var(--coral);
}

.hero-footer>div {
  display:flex;
  gap:19px;
}

.hero-footer>a span {
  display:inline-block;
  margin-left:8px;
}

.ribbon {
  background:var(--lilac);
  border-top:1px solid #b9a5d4;
  border-bottom:1px solid #b9a5d4;
  padding:17px 0;
  overflow:hidden;
}

.ribbon>div {
  display:flex;
  justify-content:space-around;
  gap:28px;
  align-items:center;
  max-width:1250px;
  margin:auto;
  white-space:nowrap;
  padding:0 30px;
  font:11px var(--display);
  letter-spacing:2px;
}

.ribbon b {
  font-size:22px;
  font-weight:400;
  line-height:1;
}

.about-section,.projects-section,.beyond-section {
  padding-top:100px;
  padding-bottom:95px;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-bottom:46px;
}

.section-heading .handwritten {
  font-size:25px;
  color:var(--violet);
  transform:rotate(-4deg);
}

.about-grid {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:90px;
}

.about-grid h2 {
  line-height:1.13;
  position:relative;
}

.about-grid h2 em {
  color:var(--violet);
}


.about-copy {
  font-size:14px;
  color:var(--muted);
}

.about-copy .large-copy {
  font-size:20px;
  color:var(--ink);
  line-height:1.55;
  letter-spacing:-.3px;
}

.about-copy strong {
  color:var(--ink);
  font-weight:600;
}

.inline-link {
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:#b3a4bf;
}

.inline-link:hover {
  color:var(--violet);
}






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

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

.section-title-row>p {
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
  padding-bottom:4px;
}

.project-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
}

.project-card {
  border:1px solid #ccc4d4;
  border-radius:9px;
  overflow:hidden;
  transition:transform .25s,box-shadow .25s;
}

.project-card:hover {
  transform:translateY(-5px);
  box-shadow:0 14px 28px #332b3e0c;
}

.project-art {
  height:272px;
  position:relative;
  overflow:hidden;
}

.interview-art {
  background:#d9cdf0;
  display:grid;
  place-items:center;
  padding:30px;
}

.wezaap-award-art {
  background:#234633;
}

.wezaap-award-art::after {
  position:absolute;
  inset:45% 0 0;
  content:"";
  background:linear-gradient(transparent,#08170fc2);
  pointer-events:none;
}

.wezaap-award-art img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 49%;
}

.wezaap-award-label {
  position:absolute;
  z-index:1;
  left:19px;
  bottom:17px;
  padding:7px 10px;
  border:1px solid #ffffff6b;
  border-radius:999px;
  color:#fff;
  background:#10251dcc;
  font:500 8px/1 var(--display);
  letter-spacing:1px;
}

.mini-window {
  width:88%;
  background:#f7f4fc;
  border:1px solid #937aac;
  border-radius:9px;
  box-shadow:9px 10px 0 #b9a2d2;
  transform:rotate(-4deg);
  padding:0 19px 17px;
}

.window-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #d6c9e0;
  padding:9px 0;
  font-size:11px;
  color:var(--violet);
  font-family:var(--display);
}

.window-bar span:first-child {
  font-size:7px;
  letter-spacing:3px;
}

.mini-eyebrow {
  font:7px var(--display);
  letter-spacing:1.1px;
  margin:17px 0 10px;
}

.waveform {
  height:43px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:10px auto 15px;
}

.waveform i {
  width:5px;
  height:16px;
  border-radius:3px;
  background:#8a64b4;
}

.waveform i:nth-child(3n) {
  height:40px;
}

.waveform i:nth-child(4n) {
  height:25px;
}

.waveform i:nth-child(5n) {
  height:33px;
  background:var(--coral);
}

.chat-bubble {
  font-size:10px;
  background:var(--lime);
  border:1px solid #bec68d;
  padding:8px 12px;
  border-radius:8px 8px 8px 0;
}

.feedback-chip {
  display:block;
  margin-top:8px;
  font-size:8px;
  color:var(--muted);
  text-align:center;
}

.art-spark {
  position:absolute;
  right:20px;
  top:20px;
  font-size:48px;
  color:var(--violet);
}

.source-art {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:25px 28px 20px;
  color:#e9f4ff;
  background:
    radial-gradient(ellipse at 50% 48%,#1d4261 0,#102944 58%,#0b1b30 100%);
}

.source-art-heading,.source-art-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#9ab0c7;
  font:500 8px/1.4 var(--display);
  letter-spacing:1px;
}

.source-art-heading i { color:#ffb66f; font:normal 16px/1 var(--display); }

.source-pipeline {
  display:grid;
  grid-template-columns:1fr 20px 1fr 20px 1fr 20px 1fr;
  align-items:center;
  gap:5px;
}

.source-stage {
  min-width:0;
  min-height:86px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px 8px;
  border:1px solid #42617b;
  border-radius:8px;
  background:#122c45d9;
  box-shadow:0 8px 22px #07132255;
}

.source-stage small { margin-bottom:7px; color:#63f2d0; font:10px/1 var(--display); }
.source-stage strong { color:#f3f7ff; font:600 12px/1.3 var(--display); }
.source-stage span { margin-top:4px; color:#a9bdd0; font-size:8px; line-height:1.4; }
.source-stage-final { border-color:#d59c5f; background:#322d37; }
.source-stage-final small { color:#ffbd79; }
.source-pipeline>i { color:#ffbd79; text-align:center; font:normal 15px/1 var(--display); }
.source-art-footer { justify-content:center; gap:20px; color:#63f2d0; font-size:7px; }

.project-content {
  padding:28px;
}

.project-meta {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font:8px var(--display);
  letter-spacing:1px;
  color:var(--muted);
  margin-bottom:20px;
}

.project-content h3 {
  font-size:28px;
  letter-spacing:-1px;
}

.project-content .project-subtitle {
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  margin-top:8px;
}

.project-content>p {
  color:var(--muted);
  font-size:12px;
  line-height:1.8;
  margin-top:17px;
}

.tags {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:22px;
}

.tags span {
  border:1px solid #d8cfdc;
  border-radius:4px;
  padding:3px 8px;
  font-size:9px;
  color:#63536f;
}

.project-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-top:17px;
  font-size:12px;
  font-weight:500;
}

.project-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.project-links .project-link {
  min-width:0;
}

.project-link span {
  font-size:21px;
}

.project-link:hover {
  color:var(--violet);
}

.more-projects {
  margin-top:28px;
}

.more-projects article {
  display:flex;
  align-items:center;
  gap:25px;
  padding:27px 5px;
  border-bottom:1px solid var(--line);
}

.more-projects h3 {
  font-size:21px;
  letter-spacing:-.6px;
}

.more-projects p {
  font-size:12px;
  color:var(--muted);
  margin:9px 0;
}

.small-tags {
  font:8px var(--display);
  letter-spacing:1.1px;
}

.more-projects article>a {
  font-size:28px;
  padding:10px;
  margin-left:auto;
}







.experience-section {
  background:#eeebf3;
  border-top:1px solid #d5cddf;
  border-bottom:1px solid #d5cddf;
  padding:95px 0;
}

.experience-list {
  border-top:1px solid #cfc6da;
}

.experience {
  border-bottom:1px solid #cfc6da;
  scroll-margin-top:115px;
}










.experience-heading {
  flex:1;
  min-width:0;
}

.experience-heading>strong {
  display:block;
  font:21px var(--display);
  font-weight:500;
  letter-spacing:-.6px;
}

.experience-heading>span {
  font-size:12px;
  color:var(--muted);
  display:block;
  margin-top:5px;
}

.experience-heading small {
  font:9px var(--display);
  margin-left:7px;
  letter-spacing:.3px;
}

.experience-heading .now-badge {
  background:var(--lime);
  color:#56602a;
  padding:4px 6px;
  vertical-align:middle;
  letter-spacing:1px;
}

.experience-date {
  font:9px var(--display);
  letter-spacing:.7px;
  color:var(--muted);
  white-space:nowrap;
}



.experience-body {
  padding:0 45px 32px 66px;
  max-width:900px;
}


.experience-body ul {
  padding-left:16px;
  margin:0;
  font-size:12px;
  color:#625a6c;
  line-height:1.85;
}

.experience-body li+li {
  margin-top:10px;
}

.experience-body li::marker {
  color:#8f73ac;
}

.experience-body strong {
  font-weight:600;
  color:var(--ink);
}

.beyond-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:90px;
  align-items:center;
}

.beyond-grid>div>p {
  font-size:14px;
  color:var(--muted);
  margin-top:25px;
  line-height:1.8;
}

.little-wins {
  margin-top:29px;
  display:grid;
  gap:20px;
}

.little-wins>a,.little-wins>div {
  display:flex;
  gap:16px;
  align-items:center;
}

.little-wins>a>span,.little-wins>div>span {
  font-size:27px;
  color:var(--violet);
  width:26px;
}

.little-wins strong {
  font-size:12px;
  font-weight:500;
  display:block;
}

.little-wins small {
  font-size:10px;
  color:var(--muted);
  display:block;
  margin-top:3px;
}

.daily-card {
  background:#f4e6ce;
  border:1px solid #d1b997;
  border-radius:6px;
  transform:rotate(3deg);
  padding:24px;
  box-shadow:6px 6px 0 #ece5d9;
  transition:transform .25s;
}

.daily-card:hover {
  transform:rotate(0deg) translateY(-5px);
}

.daily-card-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font:9px var(--display);
  letter-spacing:2px;
}

.daily-card-top span:last-child {
  font-size:23px;
}

.sketch-preview {
  position:relative;
  min-height:210px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:8px 0 18px;
}

.sketch-preview img {
  width:155px;
  height:185px;
  object-fit:cover;
  object-position:center;
  transform:rotate(-12deg);
  border:7px solid #fffdf5;
  box-shadow:2px 4px 12px #79573826;
  mix-blend-mode:multiply;
}

.sketch-preview>.handwritten {
  font-size:26px;
  line-height:1;
  transform:rotate(5deg);
  margin-left:-5px;
  margin-top:90px;
  z-index:1;
}

.daily-star {
  position:absolute;
  right:24px;
  top:16px;
  color:var(--coral);
  font-size:63px;
}

.daily-card h3 {
  font-family:var(--hand);
  font-size:37px;
  letter-spacing:-1px;
}

.daily-card p {
  font-size:12px;
  margin-top:13px;
  color:#726453;
  line-height:1.8;
}

.daily-card-link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:25px;
  padding-top:17px;
  border-top:1px solid #d9c3a2;
  font-size:11px;
}

.contact-section {
  background:var(--lilac);
  padding:75px 0 38px;
  border-top:1px solid #bba6d1;
}

.contact-section h2 {
  margin-top:20px;
  font-size:clamp(36px,4.5vw,62px);
  line-height:1.15;
}

.contact-email {
  font-family:var(--display);
  display:inline-flex;
  gap:35px;
  border-bottom:1px solid #756286;
  font-size:23px;
  letter-spacing:-.6px;
  padding-bottom:8px;
  margin-top:32px;
}

.contact-section .section-shell>p:not(.eyebrow) {
  font-size:12px;
  margin-top:16px;
  color:#62516f;
}

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

.contact-bottom .handwritten {
  font-size:24px;
}

.contact-bottom>div {
  display:flex;
  gap:25px;
  font-size:11px;
}

.site-footer {
  padding:23px 5%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:9px;
  color:var(--muted);
}

@media(min-width:1450px) {
  .section-shell {
    max-width:1280px;
  }
  .hero {
    padding-top:95px;
  }
  .portrait-composition {
    height:575px;
  }
  .hero h1 {
    font-size:84px;
  }
  .hero-alias {
    font-size:44px;
  }
  .hero-footer {
    margin-top:70px;
  }
  .site-header {
    padding-left:7%;
    padding-right:7%;
  }
}

@media(max-width:1100px) {
  .site-header {
    gap:20px;
    padding:0 4%;
    height:88px;
  }
  .site-header nav {
    gap:20px;
    font-size:11px;
  }
  .section-shell {
    padding-left:65px;
    padding-right:45px;
  }
  .hero {
    column-gap:15px;
    padding-top:58px;
  }
  .hero h1 {
    font-size:62px;
  }
  .hero-alias {
    font-size:32px;
  }
  .hero-description {
    font-size:17px;
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1.3px;
  }
  .portrait-composition {
    height:460px;
  }
.portrait-star {
    font-size:85px;
  }
  .about-grid {
    gap:55px;
  }
  .beyond-grid {
    gap:50px;
  }
  .project-content {
    padding:23px;
  }
  .project-art {
    height:240px;
  }
  .interview-art {
    padding:20px;
  }
  .source-art { padding:22px 16px; }
  .source-pipeline { gap:3px; grid-template-columns:1fr 14px 1fr 14px 1fr 14px 1fr; }
  .source-stage { padding:8px 6px; }
  .experience-heading>strong {
    font-size:19px;
  }
  .experience-date {
    font-size:8px;
  }
  .section-heading .handwritten {
    font-size:23px;
  }
}

@media(max-width:820px) {
  .side-index {
    display:none;
  }
  .site-header {
    height:auto;
    min-height:88px;
    flex-wrap:wrap;
    padding:12px 6%;
    gap:8px 20px;
  }
  .wordmark {
    font-size:37px;
  }
  .wordmark span {
    font-size:45px;
  }
  .wordmark i {
    font-size:17px;
  }
  .site-header nav {
    order:3;
    flex-basis:100%;
    justify-content:space-between;
    gap:12px;
    font-size:10px;
  }
  .game-toggle {
    margin-left:auto;
  }
  .section-shell {
    padding-left:6%;
    padding-right:6%;
  }
  .hero {
    padding-top:45px;
    gap:20px;
  }
  .hero h1 {
    font-size:53px;
    letter-spacing:-3px;
  }
  .hero-alias {
    font-size:27px;
    letter-spacing:-1px;
  }
  .hello {
    font-size:28px;
    margin-top:22px;
  }
  .hero-description {
    font-size:16px;
    margin-top:23px;
  }
  .hero-note {
    font-size:12px;
  }
  .hero-actions {
    gap:20px;
  }
  .button {
    padding:12px 15px;
    gap:20px;
  }
  .availability {
    font-size:9px;
  }
  .portrait-composition {
    height:385px;
  }
  .portrait-star {
    font-size:64px;
    top:-4px;
  }
  .portrait-sticker {
    bottom:65px;
    font-size:9px;
    padding:4px 8px;
    left:-12px;
  }
  .hero-footer {
    margin-top:25px;
    flex-wrap:wrap;
    font-size:9px;
  }
  .hero-footer>a {
    display:none;
  }
  .ribbon>div {
    gap:20px;
    font-size:9px;
    letter-spacing:1px;
  }
  .ribbon {
    padding:12px 0;
  }
  .ribbon b {
    font-size:18px;
  }
  .about-section,.projects-section,.beyond-section {
    padding-top:70px;
    padding-bottom:70px;
  }
  .section-heading {
    margin-bottom:33px;
  }
  .section-heading .handwritten {
    font-size:21px;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.2px;
  }
  .about-grid {
    gap:40px;
  }
  .about-copy .large-copy {
    font-size:17px;
  }
  .about-copy {
    font-size:12px;
  }
  h2 {
    font-size:40px;
    letter-spacing:-1.9px;
  }
  .section-title-row>p {
    font-size:11px;
  }
  .project-grid {
    gap:18px;
  }
  .project-content {
    padding:19px;
  }
  .project-content h3 {
    font-size:24px;
  }
  .project-meta {
    font-size:7px;
    letter-spacing:.5px;
  }
  .project-art {
    height:215px;
  }
  .mini-window {
    width:95%;
    padding:0 12px 12px;
  }
  .mini-eyebrow {
    font-size:6px;
    letter-spacing:.5px;
  }
  .chat-bubble {
    font-size:8px;
    padding:7px;
  }
  .waveform {
    gap:4px;
  }
  .feedback-chip {
    font-size:6px;
  }
  .art-spark {
    font-size:35px;
    right:6px;
    top:8px;
  }
  .source-art { padding:20px 14px; }
  .source-art-heading,.source-art-footer { font-size:7px; letter-spacing:.6px; }
  .source-pipeline { grid-template-columns:1fr 12px 1fr 12px 1fr 12px 1fr; gap:2px; }
  .source-stage { min-height:76px; padding:7px 5px; }
  .source-stage strong { font-size:10px; }
  .source-stage span { font-size:7px; }
  .experience-section {
    padding:70px 0;
  }
  .experience-date {
    max-width:110px;
    white-space:normal;
    text-align:right;
    font-size:8px;
  }
  .experience-heading>strong {
    font-size:18px;
  }
  .experience-heading>span {
    font-size:10px;
  }
  .experience-body {
    padding-left:61px;
    padding-right:20px;
  }
  .beyond-grid {
    gap:38px;
  }
  .daily-card {
    padding:18px;
  }
  .sketch-preview {
    min-height:170px;
  }
  .sketch-preview img {
    width:130px;
    height:150px;
  }
  .sketch-preview>.handwritten {
    font-size:21px;
  }
  .daily-star {
    font-size:48px;
    right:8px;
  }
  .daily-card h3 {
    font-size:32px;
  }
  .contact-bottom .handwritten {
    font-size:21px;
  }
  .contact-bottom>div {
    gap:16px;
    font-size:10px;
  }
}

@media(max-width:600px) {
  html {
    scroll-padding-top:125px;
  }
  .site-header {
    padding:10px 6% 8px;
  }
  .site-header nav {
    font-size:9px;
    gap:9px;
  }
  .daily-nav {
    max-width:120px;
  }
  .game-toggle {
    padding:7px 10px;
    font-size:9px;
  }
  .hero {
    display:flex;
    flex-direction:column;
    padding-top:33px;
    gap:0;
  }
  .hero .eyebrow {
    font-size:7px;
    letter-spacing:1.1px;
  }
  .hello {
    font-size:29px;
    margin-top:21px;
  }
  .hero h1 {
    font-size:62px;
    letter-spacing:-3.8px;
    margin-top:8px;
  }
  .hero-alias {
    font-size:31px;
    letter-spacing:-1.1px;
    margin-top:12px;
  }
  .hero-description {
    font-size:18px;
    margin-top:25px;
  }
  .hero-note {
    font-size:13px;
  }
  .hero-actions {
    margin-top:22px;
    gap:28px;
  }
  .button {
    padding:13px 19px;
    font-size:11px;
  }
  .availability {
    margin-top:20px;
    font-size:9px;
    max-width:330px;
  }
  .portrait-composition {
    width:90%;
    max-width:365px;
    height:425px;
    margin:40px auto 10px;
  }
  .orbit-one {
    inset:60px 18px 61px;
    transform:rotate(-20deg);
  }
.portrait-sticker {
    font-size:10px;
    bottom:68px;
    left:-5px;
  }
  .portrait-star {
    font-size:79px;
    top:-17px;
    right:0;
  }
  .hero-footer {
    width:100%;
    padding:18px 0;
    margin-top:20px;
    gap:10px;
    font-size:8px;
  }
  .hero-footer>div {
    gap:12px;
  }
  .ribbon>div {
    justify-content:flex-start;
    gap:16px;
    padding:0 20px;
    font-size:8px;
    letter-spacing:1px;
  }
  .ribbon b {
    font-size:15px;
  }
  .about-section,.projects-section,.beyond-section {
    padding-top:57px;
    padding-bottom:55px;
  }
  .section-heading {
    align-items:flex-start;
    margin-bottom:27px;
  }
  .section-heading .handwritten {
    font-size:17px;
    max-width:135px;
    text-align:right;
  }
  .eyebrow {
    font-size:7px;
    letter-spacing:1px;
  }
  .about-grid {
    grid-template-columns:1fr;
    gap:27px;
  }
  h2 {
    font-size:42px;
    letter-spacing:-2px;
  }
  .about-grid h2 br:nth-of-type(2) {
    display:none;
  }
  .about-grid h2 {
    max-width:330px;
  }
  .about-copy {
    font-size:13px;
  }
  .about-copy .large-copy {
    font-size:19px;
  }
  .section-title-row {
    display:block;
    margin-bottom:27px;
  }
  .section-title-row>p {
    font-size:12px;
    margin-top:20px;
  }
  .section-title-row>p br {
    display:none;
  }
  .project-grid {
    grid-template-columns:1fr;
    gap:24px;
  }
  .project-art {
    height:260px;
  }
  .mini-window {
    width:83%;
    padding:0 18px 17px;
  }
  .mini-eyebrow {
    font-size:7px;
    letter-spacing:1px;
  }
  .chat-bubble {
    font-size:10px;
  }
  .feedback-chip {
    font-size:8px;
  }
  .art-spark {
    font-size:45px;
    right:16px;
    top:19px;
  }
  .source-art { padding:24px 22px; }
  .source-pipeline { grid-template-columns:1fr 16px 1fr 16px 1fr 16px 1fr; gap:4px; }
  .source-stage { min-height:84px; padding:9px 7px; }
  .project-content {
    padding:25px;
  }
  .project-content h3 {
    font-size:29px;
  }
  .project-meta {
    font-size:8px;
  }
  .project-content>p {
    font-size:13px;
  }
  .tags span {
    font-size:9px;
  }
  .more-projects article {
    gap:14px;
    padding:24px 0;
  }
  .more-projects h3 {
    font-size:19px;
  }
  .more-projects p {
    font-size:12px;
  }
.more-projects article>a {
    font-size:23px;
    padding:5px;
  }
  .experience-section {
    padding:57px 0;
  }
  .experience-section h2 {
    font-size:40px;
  }
  .experience-heading>strong {
    font-size:18px;
  }
  .experience-heading>span {
    font-size:11px;
    line-height:1.5;
    margin-top:5px;
  }
  .experience-date {
    grid-column:2;
    grid-row:2;
    max-width:none;
    text-align:left;
    font-size:7px;
  }
  .experience-body {
    padding:0 0 25px 0;
  }
  .experience-body ul {
    font-size:12px;
  }
  .experience-heading small {
    font-size:8px;
  }
  .beyond-grid {
    grid-template-columns:1fr;
    gap:45px;
  }
  .beyond-grid>div>p {
    font-size:13px;
  }
  .little-wins strong {
    font-size:13px;
  }
  .little-wins small {
    font-size:11px;
  }
  .daily-card {
    max-width:375px;
    margin:auto;
    width:92%;
    padding:24px;
  }
  .sketch-preview {
    min-height:215px;
  }
  .sketch-preview img {
    width:155px;
    height:185px;
  }
  .sketch-preview>.handwritten {
    font-size:27px;
  }
  .daily-star {
    font-size:57px;
    right:10px;
  }
  .daily-card h3 {
    font-size:36px;
  }
  .contact-section {
    padding:55px 0 25px;
  }
  .contact-section h2 {
    font-size:40px;
  }
  .contact-email {
    font-size:21px;
    gap:24px;
    margin-top:25px;
  }
  .contact-section .section-shell>p:not(.eyebrow) {
    font-size:11px;
  }
  .contact-bottom {
    display:block;
    margin-top:35px;
    padding-top:21px;
  }
  .contact-bottom .handwritten {
    font-size:22px;
  }
  .contact-bottom>div {
    margin-top:18px;
    gap:28px;
    font-size:11px;
  }
  .site-footer {
    padding:22px 6%;
    flex-wrap:wrap;
    font-size:8px;
    gap:12px;
  }
  .site-footer>span:nth-child(2) {
    display:none;
  }
  .site-footer>a {
    margin-left:auto;
  }
  .portrait-caption {
    left:8%;
    bottom:0;
    font-size:20px;
  }

}

@media(max-width:420px) {
  .source-pipeline { grid-template-columns:1fr 12px 1fr; row-gap:8px; }
  .source-pipeline>i:nth-of-type(2) { display:none; }
  .source-stage:nth-of-type(3) { grid-column:1; }
  .source-pipeline>i:nth-of-type(3) { grid-column:2; }
  .source-stage-final { grid-column:3; }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
  .project-card:hover,.button:hover,.daily-card:hover {
    transform:none;
  }
}

@media print {
  .site-header,.side-index,.ribbon,.portrait-composition,.skip-link,.project-art {
    display:none!important;
  }
  body {
    background:#fff;
    color:#000;
    font-size:12px;
  }
  .section-shell {
    padding:20px;
    max-width:none;
  }
  .hero {
    display:block;
  }
  .hero h1 {
    font-size:42px;
  }
  .hero-footer {
    margin-top:20px;
  }
  .about-section,.projects-section,.beyond-section,.experience-section,.contact-section {
    padding-top:20px;
    padding-bottom:20px;
    background:#fff;
  }
  .section-heading {
    margin-bottom:15px;
  }
  .section-title-row {
    margin-bottom:20px;
  }
  h2 {
    font-size:30px;
  }
  .project-card,.experience {
    break-inside:avoid;
  }
  .project-grid,.beyond-grid,.about-grid {
    gap:20px;
  }
  .experience-body {
    padding:0 0 15px 66px;
  }
  .site-footer {
    font-size:8px;
  }
}

@media(prefers-reduced-motion:no-preference) {
  .hero-copy {
    animation:hello-there .65s ease-out both;
  }
  .portrait-composition {
    animation:hello-there .9s ease-out both;
  }
  .project-card:hover .waveform i {
    animation:wave .7s ease-in-out infinite alternate;
  }
  .project-card:hover .waveform i:nth-child(2n) {
    animation-delay:.2s;
  }
  .project-card:hover .waveform i:nth-child(3n) {
    animation-delay:.4s;
  }
}

@keyframes hello-there {
  from {
    opacity:0;
    transform:translateY(15px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes wave {
  from {
    transform:scaleY(.65);
  }
  to {
    transform:scaleY(1.1);
  }
}


/* Clearer section structure and the original experience imagery. */
.opportunity-aside { font-style: italic; }
.availability { align-items: flex-start; line-height: 1.8; }
.portrait-sticker { color: var(--ink); }
.about-section { padding-bottom: 65px; }
.about-copy em { font-style: italic; }
.skills-section { padding-top: 55px; padding-bottom: 80px; border-top: 1px solid var(--line); }
.skills-section .section-heading { margin-bottom: 25px; }
.skills-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 35px; margin-top: 35px; }
.skill-group h3 { font: 500 13px var(--display); margin-bottom: 12px; }
.skill-group p { color: var(--muted); font-size: 12px; line-height: 2; }
.experience-tabs { display: flex; overflow-x: auto; gap: 6px; border-bottom: 1px solid #c5b7d2; padding-bottom: 1px; scrollbar-width: thin; scrollbar-color: #b39ac8 transparent; }
.experience-tabs button { flex: 1 0 auto; padding: 15px 12px; border-bottom: 3px solid transparent; font: 500 13px var(--display); color: var(--muted); white-space: nowrap; }
.experience-tabs button:hover { background: #e4dced; }
.experience-tabs button[aria-selected=true] { color: #5d3c7c; background: #e4dced; border-bottom-color: #795599; }
.experience-tabs button:focus-visible { outline-offset: -4px; }
.experience-list { border-top: 0; }
.experience { border-bottom: 0; }
.experience:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
.experience-panel-heading { display: flex; align-items: center; gap: 24px; padding: 36px 0 24px; }
.experience-logo { width: 80px; height: 80px; flex: 0 0 80px; object-fit: contain; border-radius: 8px; background: #fff; padding: 7px; }
#work-launchx .experience-logo, #work-unt .experience-logo, #work-berkeley .experience-logo { object-fit: cover; padding: 0; }
.experience-heading > strong { font-size: 25px; }
.experience-heading > span { margin-top: 10px; font: 14px var(--sans); }
.experience-body { padding: 0 40px 15px 104px; max-width: 970px; }
.experience-body ul { font-size: 14px; line-height: 1.85; }
.experience-body li + li { margin-top: 13px; }
.experience-demo { display: inline-flex; gap: 18px; align-items: center; margin-top: 24px; font-size: 13px; border-bottom: 1px solid var(--violet); padding: 5px 0; }
.project-thumbnail { width: 120px; height: 86px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.more-projects .small-tags { display: block; margin-bottom: 8px; }
@media (max-width: 820px) {
  .skills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px; }
  .experience-heading > strong { font-size: 21px; }
  .experience-body { padding-right: 0; padding-left: 0; }
  .experience-tabs button { font-size: 12px; padding: 14px 16px; }
  .site-header nav { gap: 10px; }
}
@media (max-width: 600px) {
  .site-header nav { flex-wrap: wrap; justify-content: flex-start; gap: 0 16px; font-size: 10px; }
  .site-header .daily-nav { max-width: none; margin-left: auto; }
  .skills-section { padding-top: 42px; padding-bottom: 55px; }
  .skills-grid { gap: 25px 20px; }
  .skill-group h3 { font-size: 12px; line-height: 1.5; }
  .skill-group p { font-size: 11px; }
  .experience-panel-heading { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px 16px; padding: 28px 0 22px; }
  .experience-logo { width: 60px; height: 60px; grid-row: 1 / 3; }
  .experience-heading > strong { font-size: 21px; }
  .experience-heading > span { font-size: 12px; line-height: 1.5; margin-top: 8px; }
  .experience-panel-heading .experience-date { grid-column: 2; grid-row: 2; font-size: 8px; }
  .experience-body ul { font-size: 13px; }
  .project-thumbnail { width: 75px; height: 85px; }
  .more-projects h3 { font-size: 17px; }
  .more-projects p { font-size: 11px; }
}
@media print { .experience-tabs, .portrait-sticker { display: none !important; } .experience[hidden] { display: block !important; } .experience-body { padding-left: 0; } }
#work-pinch .experience-logo { background: #000; padding: 3px; }
.experience-logo-frame { width: 80px; height: 80px; flex: 0 0 80px; overflow: hidden; border-radius: 8px; background: #000; display: grid; place-items: center; }
#work-phylactics .experience-logo { background: #000; padding: 0; transform: scale(1.22); }
#portrait:focus-visible { outline: 2px dashed var(--violet); outline-offset: -12px; }
@media(max-width:600px) { .experience-logo-frame { width: 60px; height: 60px; grid-row: 1 / 3; } }