/* Homepage iteration: portrait, visible work links, and a numbered page index. */
.top{z-index:20}
.top .wrap{height:80px}
.site-index{display:flex;align-items:center;gap:25px;font-size:11px;font-weight:720;letter-spacing:.04em}
.site-index span{font-size:10px;letter-spacing:.16em;color:var(--lime);margin-right:13px}
.site-index a{opacity:.82;transition:opacity .2s}
.site-index a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.index-toggle{display:none;border:1px solid #ffffff58;color:#fff;background:transparent;border-radius:100px;padding:10px 14px;font:700 11px var(--sans);letter-spacing:.1em}
.index-toggle span{margin-left:10px}
.mobile-index[hidden]{display:none!important}
.mobile-index{position:absolute;right:20px;top:72px;display:flex;flex-direction:column;gap:0;min-width:230px;background:#f7f5ee;color:var(--ink);padding:10px;border-radius:8px;box-shadow:0 25px 55px #090e1d6b}
.mobile-index a{font-size:14px;font-weight:700;padding:13px 12px;border-radius:4px}
.mobile-index a:hover{background:#e7e8dd}
.hero-v2{min-height:770px;padding:0;overflow:hidden}
.hero-v2:after{content:none}
.hero-v2 .hero-stage{position:relative;min-height:770px}
.hero-copy{position:relative;z-index:4;width:62%;padding-top:138px}
.hero-kicker{color:#cbd3e5}
.hello{font-size:18px;line-height:1.5;font-weight:750;margin:48px 0 0}
.hero-v2 h1{font-size:clamp(54px,5.7vw,90px);line-height:1.08;letter-spacing:-.075em;margin:10px 0 0;font-weight:850}
.hero-v2 h1 span,.hero-v2 h1 span:nth-child(2),.hero-v2 h1 span:nth-child(3){display:block;padding-left:0}
.hero-v2 h1 b{color:var(--lime);font-weight:400;-webkit-text-stroke:0;font-size:.75em;vertical-align:8%}
.hero-v2 h1 em{font-family:var(--sans);font-style:normal;letter-spacing:-.055em;color:var(--lime)}
.hero-v2 .hero-desc{margin-top:25px;max-width:585px;font-size:16px;line-height:1.75}
.hero-cue{display:inline-flex;align-items:center;gap:22px;border-bottom:1px solid #ffffff8a;padding:0 0 9px;margin-top:14px;font-size:12px;font-weight:750}
.hero-cue span{font-size:18px}
.portrait-stage{position:absolute;z-index:2;right:-18px;top:111px;width:49%;height:588px;pointer-events:none}
.portrait-halo{position:absolute;inset:7% 6% 13%;border:1px solid #d5ea7d69;border-radius:50%;background:radial-gradient(circle at 50% 50%,#b8d2ff38,transparent 66%);box-shadow:0 0 0 28px #d5ea7d09,0 0 0 62px #d5ea7d07}
.portrait{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 25px 25px #080e1a50)}
.orbit{position:absolute;z-index:3;color:#ecf4ff;border:1px solid #ffffff7d;background:#172137ae;backdrop-filter:blur(9px);border-radius:100px;padding:10px 14px;font-size:11px;letter-spacing:.08em;white-space:nowrap;animation:orbit-float 5s ease-in-out infinite}
.orbit-one{top:17%;left:-9%;transform:rotate(-9deg)}
.orbit-two{top:37%;right:5%;animation-delay:-1.3s}
.orbit-three{bottom:25%;left:-9%;animation-delay:-2.4s}
.orbit-four{bottom:13%;right:5%;animation-delay:-3.5s}
@keyframes orbit-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
.hero-projects{position:absolute;z-index:5;bottom:35px;left:0;width:100%}
.hero-projects-heading{display:flex;justify-content:space-between;max-width:920px;color:#e3e8f1;margin-bottom:13px}
.hero-projects-heading span{font-size:10px;color:#9daac6}
.hero-project-links{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:920px}
.hero-project{position:relative;height:125px;display:flex;gap:15px;align-items:flex-start;padding:20px;border:1px solid #ffffff66;border-radius:8px;background:#e8eeffef;color:#17233d;overflow:hidden;box-shadow:0 18px 45px #070c1e33;transition:transform .25s,box-shadow .25s}
.hero-project:hover{transform:translateY(-6px);box-shadow:0 25px 55px #070c1e54}
.hero-project:focus-visible{outline:4px solid var(--lime);outline-offset:3px}
.hero-project.museum-project{background:#ffebdff2;color:#2d261f}
.hero-project-no{font-size:33px;font-weight:790;line-height:1;letter-spacing:-.08em}
.hero-project-name{position:relative;z-index:2;margin-top:5px;font-size:22px;font-weight:850;letter-spacing:-.05em;white-space:nowrap}
.hero-project-name small{display:block;font-size:10px;font-weight:650;letter-spacing:.05em;margin-top:8px}
.hero-project img{position:absolute;width:135px;height:91px;right:32px;bottom:-18px;object-fit:cover;object-position:left top;border-radius:5px;transform:rotate(-7deg);box-shadow:0 8px 18px #0e152d32}
.hero-project.museum-project img{object-position:center;transform:rotate(8deg)}
.hero-project-arrow{position:absolute;z-index:3;right:15px;top:14px;font-size:20px}
.section:first-of-type{padding-top:115px}
@media(min-width:761px){.mobile-index{display:none!important}}
@media(max-width:1100px){
  .site-index{gap:13px}
  .site-index span{margin-right:4px}
  .hero-copy{width:64%}
  .portrait-stage{right:-68px;width:52%}
  .hero-project-links,.hero-projects-heading{max-width:100%}
  .hero-project{height:120px}
}
@media(max-width:760px){
  .site-index{display:none}
  .index-toggle{display:block}
  .hero-v2,.hero-v2 .hero-stage{min-height:825px}
  .hero-copy{width:100%;padding-top:115px}
  .hello{margin-top:30px;font-size:15px}
  .hero-v2 h1{font-size:clamp(43px,8vw,65px)}
  .hero-v2 .hero-desc{font-size:14px;max-width:440px;margin-top:17px}
  .hero-cue{margin-top:7px}
  .portrait-stage{top:325px;right:-65px;width:65%;height:370px}
  .orbit{font-size:9px;padding:7px 10px}
  .orbit-one,.orbit-four{display:none}
  .orbit-two{right:1%;top:18%}
  .orbit-three{left:-7%;bottom:31%}
  .hero-projects{bottom:26px}
  .hero-project{height:120px;padding:15px}
  .hero-project-name{font-size:19px}
  .hero-project img{width:105px;height:77px;right:25px;bottom:-14px;opacity:.6}
}
@media(max-width:570px){
  .top .wrap{height:66px}
  .hero-v2,.hero-v2 .hero-stage{min-height:780px}
  .hero-copy{padding-top:102px}
  .hero-kicker{font-size:9px}
  .hello{font-size:14px;margin-top:35px}
  .hero-v2 h1{font-size:clamp(39px,10.3vw,54px);line-height:1.13;margin-top:9px}
  .hero-v2 .hero-desc{font-size:13px;line-height:1.65;max-width:315px;margin-top:18px}
  .hero-cue{display:none}
  .portrait-stage{top:337px;right:-45px;width:75%;height:294px}
  .portrait-halo{inset:2% 8% 10%}
  .orbit{display:none}
  .hero-projects{bottom:24px}
  .hero-projects-heading{font-size:9px;margin-bottom:9px}
  .hero-projects-heading span{font-size:8px}
  .hero-project-links{gap:8px}
  .hero-project{height:116px;display:block;padding:12px}
  .hero-project-no{font-size:22px}
  .hero-project-name{display:block;font-size:15px;margin-top:9px;white-space:normal}
  .hero-project-name small{font-size:9px;margin-top:5px;line-height:1.25}
  .hero-project img{width:62px;height:55px;right:-7px;bottom:-10px;opacity:.45}
  .hero-project-arrow{font-size:15px;right:9px;top:8px}
}
@media(prefers-reduced-motion:reduce){.orbit{animation:none}.hero-project{transition:none}}
/* Typography and smaller project tickets for the pointing portrait. */
.hero-v2 h1.hero-statement{font-size:clamp(62px,6.5vw,106px);line-height:.98;letter-spacing:-.075em;margin-top:18px}
.hero-statement .statement-line,.hero-v2 h1 .statement-line:nth-child(2),.hero-v2 h1 .statement-line:nth-child(3){display:block;padding-left:0;white-space:nowrap}
.hero-statement .statement-line span{display:inline}
.hero-statement .line-two{margin-left:clamp(35px,5vw,90px)}
.hero-statement .line-three{margin-left:clamp(76px,10vw,165px)}
.hero-statement .mark.tech{font-family:"Microsoft YaHei UI","Microsoft YaHei",var(--sans);font-weight:1000;letter-spacing:-.11em;color:#fff}
.hero-statement .mark.bside{font-family:Georgia,"SimSun",serif;font-style:italic;font-weight:750;letter-spacing:-.085em;color:var(--lime)}
.hero-statement .mark.native{font-family:Impact,"Arial Narrow",var(--sans);font-weight:900;font-style:normal;letter-spacing:.005em;color:var(--lime)}
.hero-statement .rest{font-family:"Microsoft YaHei UI","Microsoft YaHei",var(--sans);font-weight:480;letter-spacing:-.09em;color:#f8f8f6}
.hero-statement .ai-prefix{font-family:Impact,"Arial Narrow",var(--sans);font-weight:650;letter-spacing:.005em;color:transparent;-webkit-text-stroke:1.6px #f8f8f6}
.hero-statement .cross{font:italic 400 .7em Georgia,serif;color:transparent;-webkit-text-stroke:1.2px #b5bbc9;margin-left:.19em}
.portrait-stage{right:1%;top:106px;width:47%;height:615px}
.portrait-halo{inset:5% 3% 8%}
.hero-projects{left:auto;right:4%;bottom:30px;width:43%;max-width:560px}
.hero-projects-heading{max-width:none;margin-bottom:10px}
.hero-project-links{max-width:none;gap:18px}
.hero-project{height:124px;display:block;padding:15px 16px;border-radius:5px;transform:rotate(-4deg);box-shadow:0 16px 28px #080c1d52}
.hero-project.museum-project{transform:rotate(4deg)}
.hero-project:hover{transform:translateY(-7px) rotate(-2deg)}
.hero-project.museum-project:hover{transform:translateY(-7px) rotate(2deg)}
.hero-project-no{font-size:25px}
.hero-project-name{display:block;margin-top:10px;font-size:17px}
.hero-project-name small{font-size:9px;margin-top:5px}
.hero-project img{width:75px;height:62px;right:-8px;bottom:-16px;opacity:.6}
.hero-project-arrow{right:10px;top:9px;font-size:15px}
@media(max-width:1100px){
  .hero-v2 h1.hero-statement{font-size:clamp(54px,6.2vw,80px)}
  .hero-projects{right:2%;width:48%}
  .hero-project-links{gap:13px}
  .portrait-stage{right:-2%;width:52%}
}
@media(max-width:760px){
  .hero-v2 h1.hero-statement{font-size:clamp(44px,8vw,65px)}
  .hero-statement .line-two{margin-left:30px}
  .hero-statement .line-three{margin-left:60px}
  .portrait-stage{top:329px;right:-4%;width:62%;height:373px}
  .hero-projects{right:0;bottom:24px;width:100%}
  .hero-project-links{gap:16px}
  .hero-project{height:110px;padding:12px}
  .hero-project-name{font-size:16px}
}
@media(max-width:570px){
  .hero-v2,.hero-v2 .hero-stage{min-height:800px}
  .hero-v2 h1.hero-statement{font-size:clamp(39px,10.2vw,54px);line-height:1.02}
  .hero-statement .line-two{margin-left:18px}
  .hero-statement .line-three{margin-left:37px}
  .hero-statement .cross{margin-left:.09em}
  .hero-v2 .hero-desc{margin-top:22px}
  .portrait-stage{top:387px;right:-11%;width:89%;height:315px}
  .hero-projects{bottom:23px;width:100%}
  .hero-project-links{gap:12px}
  .hero-project{height:104px;padding:10px;transform:rotate(-3deg)}
  .hero-project.museum-project{transform:rotate(3deg)}
  .hero-project-no{font-size:20px}
  .hero-project-name{font-size:14px;margin-top:10px;line-height:1.12}
  .hero-project-name small{font-size:8px;margin-top:4px}
  .hero-project img{width:47px;height:43px;right:-6px;bottom:-12px;opacity:.42}
}
@media(prefers-reduced-motion:reduce){.hero-project,.hero-project:hover,.hero-project.museum-project,.hero-project.museum-project:hover{transform:none}}
.hero-v2 h1.hero-statement .statement-line > span{display:inline;padding-left:0}