/* Apple × Nintendo redesign, 2026-10-21. Source of the look: Figma 「个人网站 · 样式库 v1」 and design-kit/DESIGN.md.
   Skeleton from Apple (white / #F5F5F7 bands, generous space, quiet type); expression from Nintendo
   (rounded headings, pill buttons with a pressed "step", one candy colour per project).
   Every value comes from /tokens.css (design-kit/tokens.json). The floating glass menu from site-interactions.css
   is kept on purpose (user, 2026-10-21); it only picks up the new colours.
   Selectors start with `html` where they must beat the inline page / _detail.css rules that load later. */

:root[data-theme="light"]{color-scheme:light}
body{background:var(--color-bg);color:var(--color-text);font-size:var(--body-size);line-height:var(--body-line)}
:root[data-lang="en"] body{line-height:1.6}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em}

/* candy colour per project: homepage tiles and cards, detail pages */
[data-p="personal-system"],#personal-system,[data-project="personal-system"]{--fun:var(--color-fun-blue)}
[data-p="twin"],#twin,[data-project="twin"]{--fun:var(--color-fun-green)}
[data-p="fieldwork"],#eat-it,[data-project="fieldwork"]{--fun:var(--color-fun-orange)}
[data-p="crash-map"],#crash-map,[data-project="crash-map"]{--fun:var(--color-fun-red)}
[data-p="ready-to-train"],#ready-to-train,[data-project="ready-to-train"]{--fun:var(--color-fun-purple)}
[data-p="research"],#research,[data-project="research"]{--fun:var(--color-fun-teal)}
[data-p="hackathon"],#hackathon,[data-project="hackathon"]{--fun:var(--color-fun-yellow)}

/* ---------- section rhythm: white and light-grey bands, no rules between them ---------- */
html section.block{padding-block:var(--section-y)}
html section.band{background:var(--color-bg-subtle)}
html #contact{background:var(--color-bg)}
html .sec-head{gap:var(--space-3);margin-bottom:var(--space-12)}
html .sec-head h2{font-size:var(--h2-size);line-height:var(--h2-line)}
html .sec-head p{font-size:var(--lead-size);line-height:var(--lead-line);color:var(--color-text-secondary);max-width:40em}
html .label,:root[data-lang="en"] .label{font-family:var(--font-body);font-size:var(--small-size);line-height:var(--small-line);letter-spacing:0;text-transform:none;color:var(--color-accent-text)}

/* ---------- buttons: pill; primary has a 4px ultramarine step and sinks when pressed ---------- */
html body .btn{
  min-height:var(--control-height);padding:0 var(--space-6);border:0;border-radius:var(--radius-pill);
  background:var(--color-accent);color:var(--color-on-accent);box-shadow:var(--shadow-press);
  font:var(--font-weight-bold) var(--body-size)/1 var(--font-display);letter-spacing:.01em;
  transition:transform var(--motion-base) var(--motion-bounce),box-shadow var(--motion-base) var(--motion-bounce),background-color var(--motion-fast) var(--motion-ease);
}
html body .btn.ghost{background:var(--color-bg-subtle);color:var(--color-text);box-shadow:none}
html section.band .btn.ghost{background:var(--color-surface)}
html #contact .btn.ghost{background:var(--color-bg-subtle)}
@media(hover:hover) and (pointer:fine){
  html body .btn:not(.ghost):hover{background:var(--color-accent-hover);color:var(--color-on-accent)}
  html body .btn.ghost:hover{background:var(--color-border);color:var(--color-text)}
}
html body .btn:not(.ghost):not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 var(--color-accent-press)}
html body .btn.ghost:not(:disabled):active{transform:scale(.97)}

/* copy feedback becomes a toast that pops up from the bottom */
html .copied:not(:empty){
  position:fixed;left:50%;bottom:max(var(--space-8),env(safe-area-inset-bottom,0px));z-index:80;transform:translateX(-50%);
  max-width:calc(100vw - 32px);padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);
  background:var(--color-text);color:var(--color-bg);box-shadow:var(--shadow-lift);
  font-size:var(--small-size);line-height:var(--small-line);animation:redesign-toast var(--motion-slow) var(--motion-bounce);
}
html .copied .sel{color:inherit}
@keyframes redesign-toast{from{transform:translate(-50%,160%)}to{transform:translate(-50%,0)}}

/* ---------- homepage: first screen ---------- */
html .hero{padding-block:var(--space-24) var(--space-16);overflow:visible}
html .hero-bg{display:none}
html .hero-grid{grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-16);align-items:center}
html .hero-text{gap:var(--space-6)}
html .who{display:flex;flex-direction:column;gap:var(--space-5);padding:0;min-height:0}
html .seek{order:-1;align-self:flex-start;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--color-accent-soft);color:var(--color-accent-text);font-size:var(--caption-size);line-height:var(--caption-line);font-weight:var(--font-weight-medium);letter-spacing:.02em}
html .seek .dot{display:none}
html .who .name{display:grid;gap:var(--space-1);font:var(--font-weight-heavy) var(--display-size)/var(--display-line) var(--font-display);letter-spacing:-.02em}
html .who .name .muted{font:var(--font-weight-regular) var(--lead-size)/var(--lead-line) var(--font-body);letter-spacing:0;color:var(--color-text-secondary)}
html .slogan,:root[data-lang="en"] .slogan{font:var(--font-weight-heavy) var(--h1-size)/var(--h1-line) var(--font-display);letter-spacing:-.015em}
html .slogan .hl{color:inherit}
html .intro{font-size:var(--lead-size);line-height:var(--lead-line);color:var(--color-text-secondary);max-width:36em}
html .avail{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);padding:0;border:0;max-width:none;font-size:var(--body-size)}
html .avail>div{display:grid;gap:var(--space-1);align-content:start;padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);background:var(--color-bg-subtle)}
html .avail dt{font-size:var(--caption-size);line-height:var(--caption-line);color:var(--color-text-secondary)}
html .actions{gap:var(--space-3)}
html .hero .copy-mail .mono{display:none}
html .portrait{position:static;width:320px}
html .portrait img{aspect-ratio:4/5;border:0;border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}

/* project shortcuts: the console home-menu row */
.project-tiles{display:grid;gap:var(--space-5);margin-top:var(--space-20)}
.tiles-label{font-size:var(--small-size);line-height:var(--small-line);color:var(--color-text-secondary)}
.tiles{list-style:none;display:flex;gap:var(--space-4);margin:0 calc(var(--space-2) * -1);padding:var(--space-2) var(--space-2) var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.tiles::-webkit-scrollbar{display:none}
.tiles li{flex:none;scroll-snap-align:start}
.tile{width:112px;display:grid;justify-items:center;gap:var(--space-3);text-align:center;color:var(--color-text);text-decoration:none;font-size:var(--small-size);line-height:var(--small-line)}
/* One icon per project (src/project-icons.json), drawn like an app icon: squircle, light-to-deep gradient of the
   project colour, white glyph, soft tinted shadow. Same rule at 88px (tiles), 40px (detail header), 28px (cards). */
.p-icon{
  --size:28px;display:inline-grid;place-items:center;flex:none;width:var(--size);height:var(--size);border-radius:23%;color:#fff;
  background:var(--fun,var(--color-accent));
  background:linear-gradient(180deg,color-mix(in oklab,var(--fun) 78%,white) 0%,var(--fun) 55%,color-mix(in oklab,var(--fun) 86%,black) 100%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .45),inset 0 -1px 0 rgb(0 0 0 / .08),0 6px 14px -8px color-mix(in oklab,var(--fun) 70%,transparent);
}
html .p-icon svg{width:58%;height:58%;color:inherit;flex-shrink:0;stroke-width:2.3;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .18))}
.p-icon[data-p="hackathon"]{background:linear-gradient(180deg,color-mix(in oklab,var(--color-fun-yellow) 72%,white) 0%,var(--color-fun-yellow) 55%,color-mix(in oklab,var(--color-fun-yellow) 78%,var(--color-fun-orange)) 100%)}
.tile .p-icon{--size:88px;box-shadow:inset 0 1px 0 rgb(255 255 255 / .45),inset 0 -1px 0 rgb(0 0 0 / .08),0 12px 24px -12px color-mix(in oklab,var(--fun) 75%,transparent);transition:transform var(--motion-base) var(--motion-bounce),box-shadow var(--motion-base) var(--motion-bounce)}
html .tile .p-icon svg{width:48%;height:48%}
@media(hover:hover) and (pointer:fine){.tile:hover .p-icon{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .45),0 16px 28px -12px color-mix(in oklab,var(--fun) 80%,transparent),0 0 0 3px var(--color-focus)}}
.tile:active .p-icon{transform:scale(.93)}

/* ---------- project cards: image left, copy right; whole card lifts on hover ---------- */
html #works,html #more{padding-block:var(--section-y)}
html #works .sec-head,html #more .sec-head{margin-bottom:var(--space-12)}
html .project-index{gap:var(--space-6)}
html .project-teaser>a,html #works .project-teaser>a{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;padding:0;border:0;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--color-surface);box-shadow:var(--shadow-card);
  transition:transform var(--motion-base) var(--motion-bounce),box-shadow var(--motion-base) var(--motion-bounce);
}
html .project-teaser>a:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);background:var(--color-surface);border-color:transparent}
html .teaser-media{height:100%;aspect-ratio:8/5;border:0;border-radius:0;background:var(--color-bg-subtle)}
html .teaser-media img{object-fit:cover;object-position:top left}
html .teaser-copy{display:flex;justify-content:center;padding:var(--space-10)}
html .project-teaser .teaser-kind{gap:var(--space-2);margin-bottom:var(--space-3);font-size:var(--caption-size);line-height:var(--caption-line);color:var(--color-text-secondary)}
html .project-teaser .teaser-kind{gap:var(--space-3)}
html .project-teaser h3{font:var(--font-weight-semibold) var(--h3-size)/var(--h3-line) var(--font-body);margin:0 0 var(--space-3)}
html .project-teaser p{font-size:var(--body-size);line-height:var(--body-line);color:var(--color-text-secondary);margin:0 0 var(--space-4)}
html .project-teaser .teaser-link{gap:var(--space-1);color:var(--color-accent-text);font:var(--font-weight-bold) var(--body-size)/1 var(--font-display);transition:gap var(--motion-base) var(--motion-bounce)}
html .project-teaser>a:hover .teaser-link{gap:var(--space-2)}
html #more .project-index{grid-template-columns:repeat(2,minmax(0,1fr))}
html #more .project-teaser>a{grid-template-columns:1fr;align-content:start}
html #more .teaser-media{aspect-ratio:16/9;height:auto}
html #more .teaser-copy{padding:var(--space-6)}

/* how the projects connect */
html .project-relations{padding:var(--space-8);margin:0 0 var(--space-6);border:0;border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-card)}
html .project-relations :is(h2,h3){font:var(--font-weight-semibold) var(--h3-size)/var(--h3-line) var(--font-body);margin:0 0 var(--space-2)}
html .relation-lineage{gap:var(--space-10)}
html .relation-lineage li{padding:var(--space-3) var(--space-4);border:0;border-radius:var(--radius-md);background:var(--color-bg-subtle)}
html .relation-lineage li+li:before{left:calc(var(--space-10) / -2 - .35em);top:50%;transform:translateY(-50%)}
html .relation-transfer{border-radius:var(--radius-md);background:var(--color-bg-subtle)}
html .project-context{border-left:0;border-radius:var(--radius-md);background:var(--color-bg-subtle)}
html section.band .project-context{background:var(--color-surface)}

/* ---------- background: timeline as one card, three cards below ---------- */
html #path .wrap{display:flex;flex-direction:column}
html #path .sec-head{order:0}
html .tl-legend{order:1;margin:calc(var(--space-12) * -1 + var(--space-4)) 0 var(--space-8);gap:var(--space-6)}
html .tl-legend i{width:10px;height:10px;border:0;background:var(--color-accent)}
html .tl-legend i.b{background:var(--color-fun-blue)}
html .tl-legend i.n{background:var(--color-fun-green);border:0}
html .timeline{order:2;display:block;padding:var(--space-4) var(--space-8);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-card)}
html .timeline::before{display:none}
html .timeline li{display:grid;grid-template-columns:180px minmax(0,1fr);column-gap:calc(var(--space-6) * 2 + 12px);row-gap:var(--space-1);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border)}
html .timeline li:last-child{border-bottom:0}
html .timeline li::before{top:50%;left:calc(180px + var(--space-6));width:12px;height:12px;margin-top:-6px;border:0;background:var(--color-accent)}
html .timeline li.build::before{background:var(--color-fun-blue)}
html .timeline li.next::before{border:0;background:var(--color-fun-green)}
html .timeline .when{grid-column:1;grid-row:1/span 2;align-self:center;font:var(--small-size)/var(--small-line) var(--font-body);color:var(--color-text-secondary)}
html .timeline .what{grid-column:2;margin:0;font:var(--font-weight-semibold) var(--h3-size)/var(--h3-line) var(--font-body)}
html .timeline li.next .what{color:var(--color-accent-text)}
html .timeline .sub{grid-column:2;margin:0;font-size:var(--body-size);line-height:var(--body-line)}
html .cv{order:3;gap:var(--grid-gap);margin-top:var(--space-12)}
html .cv>div{padding:var(--space-8);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-card)}
html .cv h3,:root[data-lang="en"] .cv h3{font:var(--font-weight-semibold) var(--h3-size)/var(--h3-line) var(--font-body);letter-spacing:0;text-transform:none;color:var(--color-text);margin-bottom:var(--space-4)}
html .cv p,html .cv li{font-size:var(--small-size);line-height:var(--small-line);color:var(--color-text-secondary)}

/* ---------- contact: two columns, the AI card on the right ---------- */
html .contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-16);row-gap:var(--space-6);align-items:start}
html .contact>*{grid-column:1}
html .contact h2{font-size:var(--h1-size);line-height:var(--h1-line);font-weight:var(--font-weight-heavy)}
html .mail{font:var(--font-weight-bold) var(--h2-size)/var(--h2-line) var(--font-display);letter-spacing:0}
html .contact .note{color:var(--color-text-secondary)}
html .contact .ai-card{grid-column:2;grid-row:1/span 6;margin:0;max-width:none;padding:var(--space-8);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
html .ai-card h3{font:var(--font-weight-semibold) var(--h3-size)/var(--h3-line) var(--font-body)}
html .brief{background:var(--color-bg-subtle);border-radius:var(--radius-md)}
html footer{border-top:1px solid var(--color-border)}

/* ---------- shared pieces on project pages ---------- */
html .card{border:0;border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-card)}
html :is(.arch,.figure){border-radius:var(--radius-lg);background:var(--color-bg-subtle)}
html section.band :is(.arch,.figure){background:var(--color-surface)}
html .shot a{border-radius:var(--radius-lg);box-shadow:var(--shadow-lift)}
html .thumb{border-radius:var(--radius-md)}
html .p-hero{padding-block:var(--space-20) var(--space-12)}
html .p-hero .wrap{gap:var(--space-5)}
html .p-kicker{display:inline-flex;align-items:center;gap:var(--space-3)}
html .p-kicker .p-icon{--size:40px}
html .p-hero h1,:root[data-lang="en"] .p-hero h1{font:var(--font-weight-heavy) var(--display-size)/var(--display-line) var(--font-display);letter-spacing:-.02em}
html .p-sub{font-size:var(--lead-size);line-height:var(--lead-line);color:var(--color-text-secondary)}
html .p-hero .cv-points{list-style:none;padding:0;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);font-size:var(--body-size)}
html .p-hero .cv-points li{padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-bg-subtle)}
html .p-hero .cv-points b{display:block;margin-bottom:var(--space-2);font-size:var(--small-size);color:var(--color-accent-text);font-weight:var(--font-weight-regular)}
html .p-facts{border-top:0;padding-top:0}
html .p-facts div{padding-top:var(--space-4);border-top:1px solid var(--color-border)}
html .quote{max-width:none;padding:var(--space-6) var(--space-8);border:0;border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:inset 4px 0 0 var(--fun,var(--color-accent));font:var(--lead-size)/var(--lead-line) var(--font-body)}
html .themes{gap:var(--grid-gap)}
html .themes li{padding:var(--space-6);border:0;border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-card)}
html .themes li.hl-theme{box-shadow:var(--shadow-card),inset 0 3px 0 var(--color-accent)}
html .decisions{gap:var(--grid-gap)}
html .decisions li{padding:var(--space-8);border-top:0;border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-card)}
html .decisions h3{font:var(--font-weight-semibold) var(--h3-size)/var(--h3-line) var(--font-body)}
html .two-col h2{font-size:var(--h2-size);line-height:var(--h2-line)}
html .steps-flow li{padding:var(--space-3) var(--space-4);border:0;border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-card)}
html .steps-flow li.arw{box-shadow:none;background:none}
html .steps-flow li.hl{box-shadow:var(--shadow-card),inset 0 0 0 1.5px var(--color-accent)}
html .demo-frame{border-radius:var(--radius-lg);box-shadow:var(--shadow-lift)}
html .video-wrap video{border-radius:var(--radius-lg)}
html .gallery a{border-radius:var(--radius-md)}
html .p-next{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);padding-block:var(--space-16);border-top:0}
html .p-next a{max-width:none;padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-card);transition:transform var(--motion-base) var(--motion-bounce),box-shadow var(--motion-base) var(--motion-bounce)}
html .p-next a:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
html .p-next b{font:var(--font-weight-semibold) var(--h3-size)/var(--h3-line) var(--font-body)}
html .p-next .nx{grid-column:2;margin-left:0}

/* ---------- photography ---------- */
html .photography-page .sec-head h1{font:var(--font-weight-heavy) var(--display-size)/var(--display-line) var(--font-display);letter-spacing:-.02em}
html .photo-days{gap:var(--space-16)}
html .photo-day-date{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);font:var(--font-weight-semibold) var(--h3-size)/var(--h3-line) var(--font-body);color:var(--color-text)}
html .photo-day-date::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-accent)}
html .photo-day-grid{gap:var(--space-4)}
html .photo-open{border-radius:var(--radius-md);transition:transform var(--motion-base) var(--motion-bounce)}
@media(hover:hover) and (pointer:fine){html .photo-open:hover{transform:translateY(-3px)}}
html #photo-dialog{border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-lift)}
html #photo-dialog::backdrop{background:var(--color-scrim)}
html #photo-dialog button{border-radius:var(--radius-pill)}
html .photo-image-area{border-radius:var(--radius-md)}

/* ---------- below 1024px: stack cards, fewer columns ---------- */
@media(max-width:1023.98px){
  html .hero-grid{grid-template-columns:minmax(0,1fr) 240px;gap:var(--space-10)}
  html .portrait{width:240px}
  html .project-teaser>a,html #works .project-teaser>a{grid-template-columns:1fr;gap:0;padding:0;align-items:stretch}
  html .teaser-copy{display:flex;padding:var(--space-6)}
  html .teaser-media{grid-column:auto;grid-row:auto;aspect-ratio:16/9;height:auto}
  html .project-teaser :is(.teaser-kind,h3,p,.teaser-link){grid-column:auto}
  html .cv,html .p-hero .cv-points{grid-template-columns:1fr}
  html .contact{grid-template-columns:1fr}
  html .contact .ai-card{grid-column:1;grid-row:auto}
}
@media(max-width:767.98px){
  html .hero{padding-top:var(--space-12)}
  html .hero-grid{grid-template-columns:1fr;gap:var(--space-8)}
  html .portrait{order:-1;width:120px}
  html .portrait img{border-radius:var(--radius-lg)}
  html .avail,html #more .project-index,html .p-next{grid-template-columns:1fr}
  html .p-next .nx{grid-column:auto}
  html .project-tiles{margin-top:var(--space-12)}
  html .tiles{gap:var(--space-3);padding-right:var(--space-12);-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
  html .tile{width:88px;font-size:var(--caption-size);line-height:var(--caption-line);gap:var(--space-2)}
  html .tile .p-icon{--size:68px}
  html .timeline{padding:var(--space-2) var(--space-5)}
  html .timeline li{grid-template-columns:minmax(0,1fr);padding-left:22px;position:relative}
  html .timeline li::before{left:0;top:calc(var(--space-4) + .45em);margin-top:0}
  html .timeline .when{grid-column:1;grid-row:auto}
  html .timeline .what,html .timeline .sub{grid-column:1}
  html .project-relations{padding:var(--space-5)}
  html .relation-lineage{gap:var(--space-8)}
  html .relation-lineage li+li:before{left:var(--space-4);top:calc(var(--space-8) / -2);transform:translateY(-50%)}
  html .quote{padding:var(--space-5)}
}