/* Exhibition notes — warm paper, ink, and the existing blue accent.
   Extends the existing exhibition components; motion-v1 owns animation. */
:root {
  --bg: #fafbfd;
  --panel: #ffffff;
  --ink: #172033;
  --muted: #596579;
  --line: #dce3ed;
  --exhibition-blue: #e8edf3;
  --exhibition-shadow: 0 2px 3px #25302f08, 10px 20px 32px #25302f12, 20px 40px 64px #25302f08;
  --editorial-font: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
}

html, body { background: var(--bg); }
::selection { background: #d8e3fa; color: var(--ink); }
.site-header { height: 110px; }
.site-header::after {
  content: "";
  position: absolute;
  height: 1px;
  bottom: 0;
  left: var(--gutter);
  right: var(--gutter);
  background: var(--line);
}
.site-header .pageviews { top: 83px; font-size: 9px; color: var(--muted); }
.identity { gap: 12px; }
.monogram { color: var(--ink); }
.identity-caption { font-size: 11px; }
body:has(#home:not([hidden])) .header-edition { display: block; }
.header-edition { font-size: 9px; letter-spacing: 1.5px; }
.header-link { font-size: 11px; }
.header-link span { color: var(--accent); }

/* The introduction and the objects share a canvas, with a distinct reading order. */
.home-view {
  height: 100svh;
  min-height: 800px;
  background: var(--bg);
}
.home-view .hero-description :is(h2, .hero-eyebrow, .hero-index) { display: block; }
.home-view .hero-description {
  left: var(--gutter);
  right: auto;
  top: 50%;
  bottom: auto;
  width: 32%;
  max-width: 410px;
  padding: 0;
  transform: translateY(-43%);
  text-align: left;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 2;
}
.home-view .hero-description .hero-eyebrow {
  display: flex;
  margin: 0 0 25px;
  font-size: 9px;
  letter-spacing: 1.8px;
  color: var(--muted);
}
.hero-eyebrow > span { width: 5px; height: 5px; border-radius: 0; }
.home-view .hero-description h2 {
  display: block;
  font-family: var(--editorial-font);
  font-size: clamp(44px, 4.35vw, 68px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.065em;
  margin: 0 0 26px;
}
.curiosity { color: var(--accent); }
.curiosity svg { bottom: -4px; height: 8px; opacity: .55; }
.home-view .hero-description .hero-intro { font-size: 14px; line-height: 1.95; color: var(--muted); margin: 0 0 26px; }
.home-view .hero-description .hero-cta {
  display: inline-flex;
  gap: 25px;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
}
.home-view .hero-cta > span { width: 38px; height: 38px; font-size: 19px; background: var(--accent); }
.home-view .hero-cta:hover > span { background: var(--ink); }
.home-view .hero-description .hero-index { display: block; margin-top: 36px; padding-top: 18px; max-width: 278px; }
.hero-index > span { font-size: 10px; color: var(--ink); }
.hero-index > p { font-size: 10px; letter-spacing: .5px; color: var(--muted); }
.home-view .stage { inset: 150px 0 133px 34%; perspective: 2400px; overflow: visible; }
.home-view .stage-label {
  position: absolute;
  display: flex;
  justify-content: space-between;
  left: 8%;
  right: 8%;
  top: 0;
  color: var(--muted);
  font: 9px var(--mono);
  letter-spacing: 1.3px;
}
.home-view .stage-label::before { display: none; }
.home-view .stage-label > span:last-child { color: var(--accent); }
.home-view .world { transform: translateY(5px) rotateX(40deg) rotateZ(-12deg) scale(.60); }
.home-view:not(.workbench-open) .exhibit-art { top: -65px; }
.home-view:not(.workbench-open) .wordmark { top: 425px; }
.home-view:not(.workbench-open) .exhibit-attacker { top: 210px; }
.home-view:not(.workbench-open) .exhibit-atlas { top: 830px; }
.home-view:not(.workbench-open) .exhibit-jianying { left: 240px; top: 800px; }
.home-view .plane-grid {
  inset: -350px;
  opacity: .52;
  background-image: linear-gradient(#859fbc25 1px, transparent 1px), linear-gradient(90deg, #859fbc25 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 8%, transparent 63%);
}
.home-view .wordmark { color: var(--ink); }
.home-view .wordmark button { color: var(--ink); filter: none; text-shadow: 1px 2px 0 #17203312; }
.home-view .wordmark button:hover { color: var(--accent); }
.home-view .exhibit-face { border: 1px solid #1720330e; border-radius: 4px; box-shadow: var(--exhibition-shadow); }
.home-view .exhibit:is(:hover, :focus-visible):not(:disabled) .exhibit-face {
  border-color: #2867ed40;
  box-shadow: 0 2px 3px #25302f0a, 12px 28px 40px #25302f18, 24px 50px 68px #25302f0d;
}
.home-view .exhibit-attacker .exhibit-face { background: #172033; border-color: #ffffff18; }
.home-view .exhibit-attacker .terminal-light { background: #a8badd; }
.home-view .exhibit-atlas .atlas-flow > span:not(.atlas-core) { background: #edf1f5; color: #41566c; }
.home-view .exhibit-art .exhibit-face { background: var(--panel); }
.home-view .exhibit-art .art-cover { height: 180px; }
.home-view .exhibit-caption { font-family: var(--mono); font-size: 14px; letter-spacing: -.4px; color: #525d65; padding-top: 16px; }
.home-view .exhibit-caption > span { color: var(--accent); font-size: 18px; }
.home-view .scene-note { inset: auto auto 112px calc(34% + 30px); font: 9px var(--mono); color: var(--muted); }
.scene-note .scene-cross { color: var(--accent); font-size: 17px; }
.home-view .plane-annotation { color: #75828b; font-size: 10px; letter-spacing: 1.8px; }
.home-view.workbench-open .world { transform: translateY(5px) rotateX(0) rotateZ(0) scale(.47); }

/* A quiet glass dock and a printed footer rule anchor every view. */
.dock { padding: 6px; border: 1px solid #fff; border-radius: 19px; background: #ffffffdc; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 3px 5px #26313704, 0 12px 30px #2631370d; }
.dock .dock-item.active { background: var(--ink); color: var(--panel); border-radius: 13px; }
.dock .dock-item:not(.active):hover { background: #e8effa; color: var(--ink); }
.dock .dock-item:focus-visible { outline-offset: 3px; }
.dock-divider { background: var(--line); }
footer { bottom: 37px; color: var(--muted); font-size: 9px; }
body:has(#home:not([hidden])) { position: relative; }
body:has(#home:not([hidden])) footer { position: absolute; }
body:has(#home:not([hidden])) footer::before { content: ""; position: absolute; top: -38px; left: 0; right: 0; height: 1px; background: var(--line); }

/* Catalogue: group labels sit in a margin beside the project index. */
.projects-view, .about-view { padding-top: 166px; }
.kicker { color: var(--muted); letter-spacing: 1.6px; }
.page-heading { grid-template-columns: 1fr 340px; gap: 18px 50px; }
.page-heading .kicker { margin-bottom: 12px; }
.page-heading h2 { font-family: var(--editorial-font); font-weight: 600; font-size: 62px; letter-spacing: -.06em; }
.page-heading .heading-count { color: var(--accent); font-size: 12px; }
.page-heading > p:last-child { color: var(--muted); font-size: 13px; }
.projects-view .toolbar { margin-top: 42px; }
.projects-view .filters { gap: 24px; }
.filter { transition: color 160ms ease; }
.filter:hover:not(:disabled) { color: var(--accent); }
.filter.active::after { background: var(--accent); height: 2px; }
.search { border: 1px solid var(--line); background: transparent; border-radius: 4px; padding: 11px 13px; }
.search:hover { background: #e8effa; }
.search:focus-within { background: var(--panel); border-color: var(--accent); box-shadow: 0 0 0 3px #2867ed12; }
.search input:focus-visible { outline: none; }
.projects-view .project-group { display: grid; grid-template-columns: 175px minmax(0, 1fr); column-gap: 36px; margin-top: 32px; }
.projects-view .group-heading { grid-column: 1; grid-row: 1 / span 30; display: block; align-self: start; padding: 30px 0 0; border: 0; }
.projects-view .group-heading h3 { font-size: 17px; font-weight: 500; }
.group-heading h3 > span { color: var(--accent); font: 10px var(--mono); margin-left: 12px; }
.projects-view .group-heading p { margin-top: 12px; max-width: 160px; font-size: 11px; line-height: 1.9; }
.projects-view .group-index { display: block; margin-top: 23px; font-size: 9px; }
.projects-view .project-group + .project-group { margin-top: 42px; border-top: 1px solid var(--line); }
.project { grid-column: 2; grid-template-columns: 20px 146px minmax(0, 1fr) 32px; gap: 18px; padding: 28px 0; border-color: var(--line); }
.project-number { font-size: 9px; color: var(--muted); }
.projects-view .project h4 { font-size: 24px; font-weight: 500; letter-spacing: -.65px; }
.project .description { font-size: 12px; line-height: 1.85; color: var(--muted); }
.project-preview { height: 125px; border-radius: 3px; border: 1px solid #17203308; background: #e8edf0; }
.preview-logo { background: #e8edf3; }
.preview-logo .project-logo { width: 84px; height: 84px; }
.preview-object { --preview-scale: .34; }
.preview-object.exhibit-art { --preview-scale: .31; }
.preview-object.exhibit-jianying { --preview-scale: .36; }
.preview-backend { background: #e8ece5; }
.preview-frontend { background: #ebe9ef; }
.preview-demo { background: #eee9df; }
.preview-symbol { font-size: 40px; color: #526574; }
.preview-grid { opacity: .7; }
.preview-caption { font-size: 7px; letter-spacing: .5px; }
.project-meta { margin-top: 12px; gap: 9px 12px; }
.project-meta .tags { gap: 6px 9px; font-size: 9px; }
.project-meta .tags > span { color: #596579; }
.project-meta .role, .project-meta .project-github { font-size: 10px; }
.project-arrow { width: 32px; height: 32px; border-color: var(--line); color: var(--accent); }
.project-arrow:hover { background: var(--accent); border-color: var(--accent); color: white; }
.project-name:hover, .project-github:hover { color: var(--accent); }
.project-name { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.project:focus-within .project-preview { border-color: #2867ed40; }
.state { background: #ffffff80; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); }

/* Author page and project notes reuse the paper, type and line system. */
.about-view h2 { font-family: var(--editorial-font); font-weight: 600; line-height: 1.35; letter-spacing: -.055em; }
.about-columns { gap: 100px; border-color: var(--line); }
.about-columns aside { padding-left: 28px; border-left: 1px solid var(--line); }
.about-columns aside h3 { font-weight: 500; font-size: 12px; color: var(--muted); }
.about-columns li { font: 12px/3.8 var(--mono); border-color: var(--line); }
.about-columns aside > p:last-child { font-family: Georgia, serif; font-style: italic; font-size: 23px; color: var(--ink); }
.about-columns p { color: var(--muted); }
.button { border-radius: 4px; background: var(--ink); box-shadow: none; transition: background 180ms ease, translate 240ms var(--ease); }
.button:hover { background: var(--accent); translate: 0 -1px; }
.button:active { translate: 0 0; }
#project-dialog .kicker { color: var(--accent); font-size: 9px; }
#project-dialog h2 { font-weight: 500; letter-spacing: -1px; }
#project-dialog .project-notes .tags > span { border: 1px solid #dce3ed; border-radius: 3px; padding: 4px 8px; background: #ffffff70; }
.easter-egg-message { background: #ffffffed; border-color: var(--line); box-shadow: 0 8px 24px #1720330a; }

@media (min-width: 1600px) {
  .home-view .world { transform: translateY(5px) rotateX(40deg) rotateZ(-12deg) scale(.70); }
  .home-view.workbench-open .world { transform: translateY(5px) rotateX(0) rotateZ(0) scale(.56); }
}
@media (min-width: 951px) and (max-height: 780px) {
  .home-view { min-height: 780px; }
  .home-view .stage { top: 140px; bottom: 110px; }
  .home-view .world { transform: translateY(8px) rotateX(40deg) rotateZ(-12deg) scale(.51); }
  .home-view .hero-description { transform: translateY(-40%); }
  .home-view .hero-description h2 { font-size: 51px; margin-bottom: 18px; }
  .home-view .hero-description .hero-eyebrow { margin-bottom: 20px; }
  .home-view .hero-description .hero-index { margin-top: 25px; }
  .home-view:not(.workbench-open) .exhibit-attacker { top: 190px; }
  .home-view:not(.workbench-open) .exhibit-atlas { top: 840px; }
  .home-view:not(.workbench-open) .exhibit-jianying { left: 240px; top: 750px; }
  .home-view .scene-note { bottom: 90px; }
  .home-view.workbench-open .world { transform: translateY(5px) rotateX(0) rotateZ(0) scale(.41); }
}
@media (min-width: 951px) and (max-width: 1150px) {
  .home-view .world { transform: translateY(5px) rotateX(40deg) rotateZ(-12deg) scale(.48); }
  .home-view .hero-description h2 { font-size: 46px; }
  .projects-view .project-group { grid-template-columns: 140px minmax(0, 1fr); column-gap: 22px; }
  .project { grid-template-columns: 16px 122px minmax(0, 1fr) 30px; gap: 14px; }
  .project-preview { height: 115px; }
  .home-view.workbench-open .world { transform: translateY(5px) rotateX(0) rotateZ(0) scale(.40); }
}
@media (max-width: 950px) {
  .site-header { height: 104px; }
  .site-header .pageviews { top: 79px; }
  .header-edition { display: none !important; }
  .home-view { min-height: 1060px; height: auto; }
  .home-view .hero-description { left: var(--gutter); top: 153px; width: calc(100% - var(--gutter) * 2); max-width: none; transform: none; }
  .home-view .hero-description h2 { font-size: 55px; line-height: 1.3; margin-bottom: 20px; }
  .home-view .hero-description .hero-eyebrow { margin-bottom: 18px; }
  .home-view .hero-description .hero-intro { font-size: 13px; margin-bottom: 20px; }
  .home-view .hero-description .hero-index { position: absolute; right: 0; bottom: 9px; margin: 0; width: 240px; }
  .home-view .stage { inset: 488px 0 127px; overflow: hidden; }
  .home-view .stage-label { left: var(--gutter); right: var(--gutter); top: 0; }
  .home-view .world { transform: translateY(15px) rotateX(40deg) rotateZ(-12deg) scale(.40); }
  .home-view:not(.workbench-open) .exhibit-atlas { top: 770px; }
  .home-view:not(.workbench-open) .exhibit-jianying { top: 750px; }
  .home-view:not(.workbench-open) .wordmark { top: 425px; }
  .home-view .scene-note { left: auto; right: var(--gutter); bottom: 104px; }
  .home-view.workbench-open .world { transform: translateY(7px) rotateX(0) rotateZ(0) scale(.39); }
  .page-heading { grid-template-columns: 1fr; gap: 15px; }
  .page-heading h2 { font-size: 52px; }
  .page-heading > p:last-child { max-width: none; }
  .projects-view .project-group { display: block; }
  .projects-view .group-heading { display: flex; padding: 17px 0 22px; }
  .projects-view .group-heading p { max-width: none; margin-top: 8px; }
  .projects-view .group-index { margin-top: 5px; }
  .project { grid-template-columns: 20px 146px minmax(0, 1fr) 32px; gap: 18px; }
  .about-columns { gap: 50px; }
}
@media (max-width: 600px) {
  .site-header { padding-top: 20px; padding-bottom: 24px; height: 99px; }
  .identity-caption { font-size: 10px; }
  .site-header .pageviews { top: 76px; }
  .header-link { font-size: 10px; }
  .header-link span { margin-left: 4px; }
  .home-view { min-height: 1040px; }
  .home-view .hero-description { top: 142px; }
  .home-view .hero-description h2 { font-size: 48px; margin-bottom: 20px; }
  .home-view .hero-description .hero-eyebrow { font-size: 8px; margin-bottom: 18px; }
  .home-view .hero-description .hero-intro { font-size: 13px; margin-bottom: 23px; }
  .home-view .hero-description .hero-cta { font-size: 12px; gap: 20px; }
  .home-view .hero-cta > span { width: 34px; height: 34px; }
  .home-view .hero-description .hero-index { position: static; width: 100%; max-width: none; margin-top: 29px; padding-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .hero-index > span { font-size: 9px; }
  .hero-index > p { font-size: 8px; margin: 0; letter-spacing: 0; }
  .home-view .stage { inset: 527px 0 118px; }
  .home-view .stage-label { font-size: 8px; letter-spacing: .9px; }
  .home-view .world { transform: translateY(3px) rotateX(38deg) rotateZ(-10deg) scale(.29); }
  .home-view:not(.workbench-open) .exhibit-memory { left: 170px; top: 110px; }
  .home-view:not(.workbench-open) .exhibit-art { left: 615px; top: -65px; }
  .home-view:not(.workbench-open) .exhibit-attacker { left: 935px; top: 290px; }
  .home-view:not(.workbench-open) .exhibit-atlas { left: 825px; top: 845px; }
  .home-view:not(.workbench-open) .exhibit-jianying { left: 215px; top: 820px; }
  .home-view:not(.workbench-open) .wordmark { left: 550px; top: 445px; }
  .home-view .exhibit-caption { font-size: 19px; }
  .home-view .plane-annotation { top: 1130px; left: 400px; font-size: 15px; }
  .home-view .scene-note { bottom: 99px; font-size: 8px; }
  .home-view.workbench-open .world { transform: translateY(3px) rotateX(0) rotateZ(0) scale(.26); }
  .dock-wrap { bottom: max(18px, env(safe-area-inset-bottom)); }
  .dock { border-radius: 17px; }
  .dock .dock-item { height: 40px; }
  footer { bottom: 31px; font-size: 8px; }
  body:has(#home:not([hidden])) footer { bottom: 81px; }
  body:has(#home:not([hidden])) footer::before { display: none; }
  .projects-view, .about-view { padding-top: 146px; }
  .page-heading .kicker { font-size: 9px; margin-bottom: 2px; }
  .page-heading h2 { font-size: 43px; }
  .page-heading > p:last-child { font-size: 12px; line-height: 1.9; }
  .projects-view .toolbar { margin-top: 29px; }
  .projects-view .filters { gap: 19px; }
  .projects-view .filter { font-size: 12px; white-space: nowrap; }
  .project { grid-template-columns: 62px minmax(0, 1fr) 28px; column-gap: 15px; padding: 25px 0; }
  .project-number { display: none; }
  .project-preview { height: 68px; grid-column: 1; grid-row: 1; align-self: start; }
  .project-copy { grid-column: 2; grid-row: 1; }
  .project-arrow { grid-column: 3; grid-row: 1; width: 28px; height: 28px; align-self: start; margin-top: 2px; }
  .projects-view .project h4 { font-size: 20px; letter-spacing: -.6px; margin-bottom: 9px; }
  .project .description { font-size: 12px; }
  .project-meta { margin-top: 12px; }
  .project-meta .tags { gap: 6px; font-size: 9px; }
  .preview-logo .project-logo { width: 47px; height: 47px; }
  .preview-object { --preview-scale: .16; }
  .preview-object.exhibit-art { --preview-scale: .18; }
  .preview-object.exhibit-jianying { --preview-scale: .17; }
  .preview-symbol { font-size: 25px; margin: 0; }
  .preview-caption { display: none; }
  .about-view h2 { font-size: 43px; margin-top: 25px; margin-bottom: 34px; }
  .about-columns { grid-template-columns: 1fr; gap: 36px; padding-top: 28px; }
  .about-columns aside { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .about-columns p { font-size: 14px; }
}
@media (max-width: 370px) {
  .home-view .hero-description h2 { font-size: 43px; }
  .home-view .world { transform: translateY(3px) rotateX(38deg) rotateZ(-10deg) scale(.27); }
  .home-view .hero-description .hero-index { align-items: start; flex-direction: column; gap: 7px; }
  .project { grid-template-columns: 50px minmax(0, 1fr) 26px; column-gap: 12px; }
  .project-preview { height: 58px; }
  .projects-view .filters { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .filter, .search, .project-name, .project-arrow { transition: none; }
}