:root {
  --paper:#f6f3eb;
  --ink:#302e29;
  --red:#892c35;
  --muted:#716d64;
  --line:#d6d0c4;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Arial,Helvetica,sans-serif;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:32px;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a {
  color:inherit;
  text-decoration:none;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
p,h1,h2,h3,figure {
  margin:0;
}
a:focus-visible {
  outline:2px solid var(--red);
  outline-offset:7px;
}
::selection {
  background:#eac5c5;
  color:var(--ink);
}
.wrap {
  width:min(1320px,calc(100% - 112px));
  margin-inline:auto;
}
.skip-link {
  position:fixed;
  left:20px;
  top:-80px;
  padding:14px;
  background:var(--ink);
  color:white;
  z-index:10;
}
.skip-link:focus {
  top:12px;
}
.site-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:30px 0;
  border-bottom:1px solid var(--line);
}
.wordmark {
  font-family:var(--serif);
  font-size:30px;
  letter-spacing:-1.7px;
  color:var(--red);
  font-style:italic;
}
.wordmark span {
  font-size:40px;
  margin-left:4px;
}
.site-header nav {
  display:flex;
  gap:38px;
  font-size:14px;
}
.site-header nav a:hover,.footer-bottom a:hover {
  color:var(--red);
  text-decoration:underline;
  text-underline-offset:5px;
}
.intro {
  padding-top:49px;
  padding-bottom:100px;
}
.intro-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}
.eyebrow,.section-label,.project-kicker,.art-caption,.tiny,.project-facts,.photo figcaption {
  font-size:11px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  line-height:1.6;
}
.intro-note {
  font-family:var(--serif);
  font-size:20px;
  font-style:italic;
  line-height:1.3;
  padding-right:40px;
  color:var(--red);
}
h1 {
  font-family:var(--serif);
  font-size:clamp(72px,8.15vw,120px);
  line-height:1.01;
  letter-spacing:-6px;
  font-weight:400;
  color:var(--red);
  margin-top:29px;
}
h1 em {
  font-weight:400;
}
.period {
  color:#af654f;
}
.intro-bottom {
  display:grid;
  grid-template-columns:25% 49% 26%;
  align-items:center;
  margin-top:45px;
}
.portrait {
  width:148px;
  margin-left:25px;
  transform:rotate(-7deg);
  position:relative;
}
.portrait img {
  aspect-ratio:1/1.12;
  object-fit:cover;
  border:7px solid #fffdf7;
  box-shadow:0 2px 8px #302e2910;
}
.portrait figcaption {
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  padding-top:10px;
  text-align:center;
  color:var(--red);
}
.portrait figcaption span {
  margin-left:4px;
}
.intro-copy {
  max-width:550px;
}
.intro-copy>p:first-child {
  font-size:21px;
  line-height:1.55;
  letter-spacing:-.4px;
}
.quiet {
  color:var(--muted);
  line-height:1.65;
  margin-top:15px;
  font-size:14px;
  max-width:410px;
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:35px;
  border-bottom:1px solid currentColor;
  padding-bottom:8px;
  font-size:13px;
  line-height:1.4;
  margin-top:28px;
}
.text-link span {
  font-size:19px;
  transition:transform .2s;
}
.text-link:hover span {
  transform:translate(3px,-2px);
}
.margin-note {
  justify-self:end;
  align-self:end;
  padding:0 27px 8px 0;
  color:var(--red);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.4;
  font-style:italic;
  transform:rotate(7deg);
}
.section-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:17px;
  color:var(--muted);
}
.section-label h2 {
  font:inherit;
  color:var(--ink);
}
.project {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:8%;
  align-items:center;
  margin-top:125px;
}
.work>.project:first-of-type {
  margin-top:49px;
}
.project-art {
  position:relative;
  overflow:hidden;
}
.project-art>a {
  position:absolute;
  inset:0;
  display:block;
  cursor:pointer;
}
.penny-art {
  background:#e3cccc;
  aspect-ratio:1.05;
}
.penny-cover-heading {
  color:#633d46;
}
.penny-cover-heading sup {
  position:relative;
  top:-1.7em;
  margin-left:5px;
  font:700 10px/1 var(--sans);
  letter-spacing:0;
}
.phones {
  position:absolute;
  inset:24% 10% 15%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6%;
}
.phones img {
  width:36%;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(6px 14px 10px #743f3430);
  transition:transform .45s;
}
.phone-one {
  transform:rotate(-9deg) translateY(6%);
}
.phone-two {
  transform:rotate(9deg) translateY(-2%);
}
.penny-art a:hover .phone-one {
  transform:rotate(-6deg) translateY(3%);
}
.penny-art a:hover .phone-two {
  transform:rotate(6deg) translateY(-4%);
}
.art-caption {
  position:absolute;
  bottom:24px;
  left:28px;
  font-size:9px;
  letter-spacing:1px;
}
.open-circle {
  position:absolute;
  right:22px;
  bottom:19px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid #302e2955;
  border-radius:50%;
  font-size:21px;
}
.project-kicker {
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:10px;
  letter-spacing:1.1px;
}
.project-kicker span+span {
  color:var(--muted);
}
h3 {
  font-family:var(--serif);
  font-size:clamp(35px,3.5vw,52px);
  line-height:1.1;
  letter-spacing:-1.8px;
  font-weight:400;
  margin-top:24px;
}
h3 a:hover {
  color:var(--red);
}
.project-info>p {
  font-size:15px;
  line-height:1.8;
  max-width:370px;
  margin-top:23px;
  color:#5e5a51;
}
.evidence {
  display:flex;
  gap:18px;
  align-items:center;
  margin-top:25px;
  padding-top:18px;
  border-top:1px solid var(--line);
  max-width:340px;
}
.evidence-number {
  font-family:var(--serif);
  font-size:45px;
  color:var(--red);
  line-height:1;
}
.evidence p {
  font-size:12px;
  line-height:1.7;
}
.evidence p span {
  font-size:10px;
  color:var(--muted);
}
.nextbit {
  grid-template-columns:1.2fr .8fr;
  gap:8%;
}
.nextbit .project-info {
  padding-right:20px;
}
.nextbit-art {
  background:#d9dfd3;
  aspect-ratio:1.05;
}
.nextbit-cover-heading {
  color:#3c493c;
}
.nextbit-cover-heading .cover-name {
  white-space:nowrap;
}
.cover-heading {
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:27px 30px 0;
}
.cover-name {
  font:700 58px/.9 var(--serif);
  letter-spacing:-4px;
}
.tiny {
  font-size:9px;
  text-align:right;
}
.nextbit-art img {
  position:absolute;
  top:24%;
  left:50%;
  width:56%;
  height:67%;
  object-fit:contain;
  transform:translateX(-50%);
  transition:transform .45s;
}
.nextbit-art a:hover img {
  transform:translateX(-50%) translateY(-6px);
}
.vibesync {
  grid-template-columns:.8fr 1.2fr;
  gap:9%;
}
.vibesync .project-info {
  padding-left:30px;
}
.vibesync-art {
  background:#000;
  aspect-ratio:1.05;
}
.vibesync-cover-heading {
  color:#fff;
}
.vibesync-cover-heading .cover-name {
  color:#38d8dc;
  white-space:nowrap;
}
.vibesync-art> a>img {
  position:absolute;
  top:17%;
  left:2%;
  width:96%;
  height:70%;
  object-fit:contain;
  object-position:center;
  transition:transform .45s ease;
}
.vibesync-art a:hover>img {
  transform:translateY(-6px);
}
.vibesync-art .art-caption {
  color:#fff;
}
.vibesync-art .open-circle {
  color:#38d8dc;
  border-color:#38d8dc99;
}
.penny {
  grid-template-columns:.8fr 1.2fr;
  gap:9%;
}
.penny .project-info {
  padding-left:30px;
}
.project-facts {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:24px;
  font-size:10px;
  color:var(--muted);
}
.tencent {
  grid-template-columns:1.22fr .78fr;
}
.tencent-art {
  aspect-ratio:1.05;
  background:#e4d9a7;
}
.tencent-art>a {
  position:absolute;
  padding:0;
}
.tencent-cover-heading {
  color:#29231f;
}
.tencent-device {
  position:absolute;
  top:24%;
  left:15%;
  width:70%;
  aspect-ratio:463.729/439.759;
  transition:transform .5s ease;
}
.tencent-device img {
  position:absolute;
  display:block;
  max-width:none;
}
.tencent-device-shadow {
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.7;
}
.tencent-device-frame {
  top:0;
  left:5.75%;
  width:94.25%;
  height:96.66%;
  object-fit:contain;
}
.tencent-device-screen {
  top:.6%;
  left:7.21%;
  width:82.16%;
  height:69.93%;
  object-fit:fill;
}
.tencent-art a:hover .tencent-device {
  transform:translateY(-7px) rotate(.5deg);
}
.tencent-art .art-caption,.tencent-art .open-circle {
  z-index:2;
}
.tencent-art .art-caption {
  color:#29231f;
}
.tencent-art .open-circle {
  color:#29231f;
  border-color:#29231f66;
}
.tencent .project-info {
  padding-right:20px;
}
.personal {
  padding-top:108px;
  padding-bottom:105px;
}
.personal-grid {
  display:grid;
  grid-template-columns:1.1fr .75fr .65fr;
  gap:5%;
  align-items:start;
  margin-top:60px;
}
.personal-copy {
  padding-top:30px;
}
.large-serif {
  font-family:var(--serif);
  font-size:37px;
  letter-spacing:-1.4px;
  line-height:1.18;
}
.personal-copy>p:not(.large-serif) {
  font-size:14px;
  line-height:1.8;
  margin-top:23px;
  color:var(--muted);
  max-width:350px;
}
.photo img {
  width:100%;
  filter:saturate(.7);
}
.museum {
  transform:rotate(4deg);
  padding:10px;
  background:#fffdf8;
  box-shadow:0 2px 8px #302e2910;
}
.museum img {
  aspect-ratio:3/4;
  object-fit:cover;
}
.photo figcaption {
  font-size:8px;
  letter-spacing:.7px;
  margin-top:10px;
}
.studio {
  margin-top:155px;
  transform:rotate(-5deg);
}
.studio img {
  aspect-ratio:1.15;
  object-fit:cover;
}
.footer {
  border-top:1px solid var(--line);
  padding-top:40px;
}
.footer-top .eyebrow {
  color:var(--muted);
}
.footer-hello {
  display:block;
  position:relative;
  font-family:var(--serif);
  font-size:clamp(65px,7.2vw,104px);
  letter-spacing:-4px;
  line-height:1.05;
  color:var(--red);
  padding:23px 0 60px;
}
.footer-hello>span {
  position:absolute;
  right:4%;
  top:25px;
  font-family:var(--sans);
  font-size:105px;
  font-weight:300;
  transition:transform .3s;
}
.footer-hello:hover>span {
  transform:translate(8px,-8px);
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:25px;
  border-top:1px solid var(--line);
  padding:23px 0 30px;
  font-size:11px;
}
.footer-bottom p>span {
  margin-left:20px;
  color:var(--muted);
}
.footer-bottom>div {
  display:flex;
  gap:25px;
}
@media(min-width:1600px) {
  h1 {
    font-size:126px;
  }
}
@media(max-width:1000px) {
  .wrap {
    width:calc(100% - 64px);
  }
  h1 {
    letter-spacing:-4px;
  }
  .intro-note {
    padding-right:0;
  }
  .intro-bottom {
    grid-template-columns:25% 60% 15%;
  }
  .portrait {
    width:120px;
    margin-left:0;
  }
  .margin-note {
    display:none;
  }
  .intro-copy>p:first-child {
    font-size:18px;
  }
  .project {
    gap:6%;
  }
  .project-art {
    aspect-ratio:.85;
  }
  .phones {
    inset:24% 4% 13%;
    gap:5%;
  }
  .phones img {
    width:38.7%;
  }
  .nextbit,.vibesync,.penny {
    gap:6%;
  }
  .nextbit .project-info,.vibesync .project-info,.penny .project-info {
    padding-left:0;
    padding-right:0;
  }
  .cover-heading {
    padding:25px 20px 0;
  }
  .cover-name {
    font-size:49px;
  }
  .nextbit-art img {
    top:24%;
    width:60%;
    height:67%;
  }
  .vibesync-art> a>img {
    top:17%;
    left:2%;
    width:96%;
    height:70%;
  }
  .art-caption {
    left:18px;
    font-size:8px;
  }
  .personal-grid {
    grid-template-columns:1fr .8fr;
    gap:8%;
  }
  .studio {
    display:none;
  }
  .large-serif {
    font-size:33px;
  }
  .footer-bottom>div {
    gap:18px;
  }
}
@media(max-width:650px) {
  .wrap {
    width:calc(100% - 40px);
  }
  .site-header {
    padding:19px 0;
  }
  .wordmark {
    font-size:26px;
  }
  .wordmark span {
    font-size:30px;
  }
  .site-header nav {
    gap:20px;
    font-size:12px;
  }
  .intro {
    padding-top:29px;
    padding-bottom:65px;
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1px;
  }
  .intro-note {
    display:none;
  }
  h1 {
    font-size:clamp(48px,10.8vw,70px);
    letter-spacing:-2.8px;
    line-height:1.06;
    margin-top:24px;
  }
  .intro-bottom {
    grid-template-columns:1fr;
    gap:25px;
    margin-top:30px;
  }
  .intro-copy {
    grid-row:1;
    max-width:410px;
  }
  .intro-copy>p:first-child {
    font-size:17px;
    line-height:1.65;
  }
  .quiet {
    font-size:13px;
    max-width:310px;
  }
  .portrait {
    width:105px;
    margin-left:auto;
    margin-right:14px;
    margin-top:-28px;
  }
  .portrait figcaption {
    font-size:15px;
  }
  .intro-copy .text-link {
    margin-top:24px;
  }
  .section-label {
    font-size:9px;
    letter-spacing:.7px;
    gap:15px;
  }
  .section-label>span {
    font-size:8px;
    text-align:right;
  }
  .project {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:65px;
  }
  .work>.project:first-of-type {
    margin-top:30px;
  }
  .project-art {
    aspect-ratio:1.05;
  }
  .project-info {
    padding:0 3px;
  }
  .project-kicker {
    font-size:9px;
  }
  h3 {
    font-size:39px;
    margin-top:17px;
    letter-spacing:-1.5px;
  }
  .project-info>p {
    font-size:14px;
    margin-top:17px;
    max-width:100%;
  }
  .evidence {
    max-width:100%;
    margin-top:22px;
  }
  .phones {
    inset:25% 10% 16%;
  }
  .phones img {
    width:36%;
  }
  .nextbit-art,.vibesync-art,.penny-art {
    grid-row:1;
  }
  .nextbit-art img {
    top:25%;
    width:56%;
    height:66%;
  }
  .cover-heading {
    padding:25px 25px 0;
  }
  .cover-name {
    font-size:36px;
    letter-spacing:-2.5px;
  }
  .tiny {
    font-size:8px;
  }
  .nextbit .project-info,.vibesync .project-info,.penny .project-info {
    padding-left:3px;
    padding-right:3px;
  }
  .tencent-art {
    aspect-ratio:1.05;
  }
  .tencent .project-info {
    padding-right:3px;
  }
  .personal {
    padding-top:60px;
    padding-bottom:65px;
  }
  .personal-grid {
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-top:30px;
  }
  .personal-copy {
    grid-column:1/-1;
    padding-top:0;
  }
  .large-serif {
    font-size:34px;
  }
  .personal-copy>p:not(.large-serif) {
    max-width:100%;
    margin-top:18px;
  }
  .museum {
    margin-top:12px;
    padding:7px;
  }
  .studio {
    display:block;
    margin-top:85px;
  }
  .photo figcaption {
    font-size:7px;
  }
  .footer {
    padding-top:28px;
  }
  .footer-hello {
    font-size:62px;
    letter-spacing:-3px;
    padding:22px 0 35px;
  }
  .footer-hello>span {
    font-size:52px;
    right:0;
    top:28px;
  }
  .footer-bottom {
    flex-direction:column;
    gap:20px;
    padding:23px 0;
  }
  .footer-bottom>div {
    flex-wrap:wrap;
    gap:24px;
  }
  .art-caption {
    font-size:8px;
  }
  .open-circle {
    width:30px;
    height:30px;
    font-size:18px;
    bottom:19px;
  }
  .text-link {
    margin-top:23px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
  }
}

/* A line-by-line marker treatment for the opening introduction. */
.intro-highlight {
  color: inherit;
  background: linear-gradient(transparent 12%, #f1dfa0 12%, #f1dfa0 94%, transparent 94%);
  padding: 0.08em 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}