/* A consistent reading order and quieter illustrations on small screens. */
@media(max-width:760px){
  html{scroll-behavior:auto}
  .hero-note,.hand-star,.little-spark,.heading-spark,.stack-note,.side-section-mark,.work-background{display:none!important}
  .work,.side-projects{padding:48px 0}
  .work-heading,.side-section-heading{padding:0 4px;margin-bottom:28px}
  .work-heading h2,.side-section-heading h2{font-size:39px;line-height:1.1;letter-spacing:-2px}
  .work-heading p,.side-section-heading p{font-size:14px;max-width:100%}
  .eyebrow{font-size:9px;line-height:1.6}
  .project-card{padding:18px 18px 0;border-radius:20px;margin-bottom:22px}
  .side-project-list{gap:22px}
  .side-project-card{margin-bottom:0}
  .card-top{align-items:flex-start;gap:10px;font-size:9px;line-height:1.5;flex-wrap:wrap}
  .status{font-size:8px;line-height:1.4;padding:6px 9px}
  .project-card .card-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:22px 0;min-height:0;align-items:start}
  .project-card .card-copy{display:contents}
  .project-card .card-copy h3{order:0;font-size:35px;line-height:1.1;letter-spacing:-1.6px;margin:0}
  #chess-title .competition-title,#hacked-title .achievement-line,#wallet-title .achievement-line{font-size:25px;line-height:1.15;letter-spacing:-.7px;margin-top:6px;max-width:none}
  .project-card .card-grid>div:not(.card-copy){order:1;min-width:0;width:100%;max-width:380px;justify-self:center;margin:0}
  .project-card .project-hook{order:2;max-width:none;font-size:18px;line-height:1.4;letter-spacing:-.3px;margin:2px 0 0}
  .project-card .project-description{order:3;font-size:13px;line-height:1.75;margin:0;max-width:none}
  .project-card .chips{order:4;gap:6px;margin:0;align-items:center}
  .project-card .chips span{font-size:10px;padding:6px 9px}
  .project-card .card-actions{order:5;display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
  .project-card .card-actions>*{flex:1 1 125px}
  .project-card .card-copy>.solid-button,.project-card .card-copy>.story-button{order:5;width:100%}
  .project-card .solid-button,.project-card .story-button{min-height:44px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;font-size:11px;line-height:1.4;padding:12px;border-radius:12px}
  .project-card .story-button{border:1px solid #807789}
  [data-theme=ascii] .project-card .story-button{border-color:#666}
  .card-bottom{font-size:9px;line-height:1.6;gap:8px;padding:16px 0;flex-wrap:wrap;align-items:flex-start}
  .card-bottom>span:last-child{max-width:100%;text-align:left}
  .card-bottom>*{flex:1 1 140px}
  .illustra-stage,.school-visual,.hub-visual{padding:6px 0 10px!important}
  .screen-frame,.screen-frame:hover,.optics-sheet,.hub-window,.game-window{transform:none!important;box-shadow:0 5px 0 #0002!important}
  .shipped,.won-sticker,.paper-back,.credit-back,.screenshot-note,.visual-caption,.school-visual-caption{display:none!important}
  .screen-frame{padding:7px;border-radius:12px}
  .screen-bar{font-size:6px;padding:2px 2px 8px}
  .chess-stage{height:280px;padding:28px 0 26px}
  .chess-board{width:210px;height:210px;background-size:52.5px 52.5px;transform:rotateX(28deg) rotateZ(-12deg)}
  .piece{font-family:Georgia,'Times New Roman',serif;font-variant-emoji:text;transform:rotateZ(12deg);font-size:82px}
  .p2,.p4{font-size:64px}
  .result-sticker.prize-sticker{width:78px;height:78px;right:0;top:2px;transform:none}
  .result-sticker.prize-sticker strong{font-size:27px;letter-spacing:-1px}
  .result-sticker span{font-size:6px;margin-top:4px}
  .chess-caption{bottom:0;font-size:12px;transform:none;text-align:center;width:100%}
  .learning-stage{height:auto;min-height:0;padding:8px 0 10px}
  .learning-note{width:calc(100% - 8px);max-width:310px;padding:22px;transform:none;box-shadow:0 5px 0 #6487b0}
  .learning-note h4{font-size:26px;margin-top:16px}
  .learning-pills{gap:6px;flex-wrap:wrap}
  .learning-pills span{font-size:9px;padding:7px}
  .learning-flow{margin-top:18px;font-size:9px}
  .wallet-stage{height:230px;padding-top:24px}
  .credit-card.credit-front{width:100%;max-width:310px;height:185px;position:relative;transform:none;box-shadow:0 5px 0 #473751}
  .credit-front strong{font-size:22px;max-width:180px}
  .credit-footer{font-size:8px}
  .limit-sticker.prize-sticker{width:76px;height:76px;right:-3px;top:0;transform:none}
  .limit-sticker.prize-sticker strong{font-size:24px}
  .optics-sheet{border-radius:12px}
  .visual-toolbar{font-size:8px;padding:12px}
  .optics-equation{flex-wrap:wrap;font-size:15px}
  .hub-window .visual-toolbar{font-size:7px;padding:12px}
  .hub-window .game-metrics{display:flex;flex-direction:column;align-items:flex-start;padding:12px;gap:6px}
  .hub-window .game-metrics>span{font-size:16px}
  .hub-window .game-metrics small{font-size:10px;text-align:left}
  .hub-menu-top{font-size:2.2cqw}.hub-menu-top small{font-size:1.5cqw}
  .hud-hearts{font-variant-emoji:text}
  .about{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px 22px;padding:48px 24px;align-items:center}
  .about-copy{display:contents}.about-sticker.about-photo{grid-column:1;grid-row:1/3;width:100px;float:none;margin:0;transform:none;align-self:start}
  .about .eyebrow{grid-column:2;grid-row:1;font-size:10px;max-width:none;align-self:end}
  .about h2{grid-column:2;grid-row:2;font-size:39px;line-height:1.1;margin:0;letter-spacing:-2px;align-self:start}
  .about .wave{display:none}.about p,.about .text-link{grid-column:1/-1;margin-top:8px}.about .text-link{justify-self:start;min-height:40px;display:flex;align-items:center}
  .about-doodles{display:none}
  #story-dialog{max-height:85svh;padding:32px 22px}#story-dialog h2{font-size:30px}
}
@media(max-width:360px){
  .project-card{padding-inline:14px}.project-card .card-copy h3{font-size:31px}
  .learning-note{padding:18px}.learning-note h4{font-size:23px}.learning-pills span{font-size:8px;padding:5px}
  .about{gap:12px 16px;grid-template-columns:90px minmax(0,1fr)}.about-sticker.about-photo{width:90px}.about h2{font-size:34px}
}
@media(max-width:760px){
  .js-reveal .project-card .card-grid{opacity:1;translate:none;transition:none}
  .limit-sticker.prize-sticker strong{font-size:20px;letter-spacing:-.6px}
  .chip-icon{display:none}
}