:root {
  --ink: #171717;
  --muted: #969696;
  --line: #dedede;
  --paper: #fff;
  --surface: #f1f1ef;
  --accent: #bf4b2a;
  --gutter: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.skip { position: fixed; top: -60px; left: 16px; z-index: 50; background: #fff; padding: 12px; }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.shell { width: 100%; max-width: 1700px; margin: 0 auto; padding: 0 24px; }

/* Shared navigation */
.site-header {
  height: 92px;
  padding-top: 25px;
  display: flex;
  align-items: flex-start;
}
.logo { font-size: 18px; font-weight: 400; letter-spacing: -.5px; }
.header-role { margin-left: 8%; font-size: 14px; }
nav { margin-left: auto; display: flex; gap: 64px; }
nav a { font-size: 14px; }
nav sup { font-size: 9px; margin-left: 3px; }
nav a[aria-current=page] { color: var(--muted); }

/* Intro */
.intro-page { min-height: 100svh; overflow: hidden; }
.intro {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 42px;
  transition: opacity .45s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
}
.intro-top, .intro-bottom { display: flex; justify-content: space-between; font-size: 14px; line-height: 1.4; }
.intro h1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-right: .06em;
  font-size: clamp(180px, 34vw, 500px);
  font-weight: 400;
  letter-spacing: -.085em;
  line-height: .8;
}
.intro h1 span { animation: letter-arrive 1.25s cubic-bezier(.16, 1, .3, 1) both; }
.intro h1 span:nth-child(2) { animation-delay: .08s; }
.intro h1 span:nth-child(3) { animation-delay: .16s; }
.intro h1 span:nth-child(4) { animation-delay: .24s; }
.intro-bottom { align-items: end; padding-bottom: 12px; }
.enter-label span { margin-left: 22px; font-size: 17px; }
.intro:hover .enter-label { transform: translateY(-3px); }
.entering .intro { opacity: 0; transform: translateY(-20px) scale(1.015); }
@keyframes letter-arrive { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }

/* Transition */
.page-work { padding-top: 100svh; }
.identity-transition {
  --identity-progress: 0;
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform-origin: center;
}
.identity-discipline, .identity-name {
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: -.058em;
  will-change: opacity;
}
.identity-discipline {
  margin-top: -.04em;
  font-size: 10.1vw;
  line-height: .94;
  opacity: calc(1 - var(--identity-progress) * 3.2);
}
.identity-name {
  margin-bottom: -.08em;
  font-size: 19vw;
  line-height: .79;
  opacity: calc(1 - var(--identity-progress) * 3.2);
}
.identity-scroll {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent);
  text-align: center;
  text-transform: none;
  opacity: calc(1 - var(--identity-progress) * 4);
  will-change: opacity;
}
.identity-scroll span { display: block; margin-top: 10px; font-size: 30px; transition: transform .25s ease; }
.identity-scroll:hover span { transform: translateY(5px); }
.page-work #selected-work {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  background: var(--paper);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .08);
}

/* Work gallery */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.gallery-column { display: flex; flex-direction: column; gap: 38px; }
.project { display: block; }
.project-image {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--surface);
}
.project-1 .project-image { aspect-ratio: 1 / .95; }
.project-2 .project-image { aspect-ratio: 1.5 / 1; }
.project-3 .project-image { aspect-ratio: 1.5 / 1; }
.project-4 .project-image { aspect-ratio: .98 / 1.2; }
.project-5 .project-image { aspect-ratio: 1 / .96; }
.project-6 .project-image { aspect-ratio: 1.45 / 1; }
.project-tone {
  display: grid;
  place-items: center;
  isolation: isolate;
}
.project-tone::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.48), transparent 38%);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
  z-index: -1;
}
.project:hover .project-tone::before { transform: scale(1.04); }
.project-tone span { font-size: clamp(20px, 2.2vw, 36px); letter-spacing: -.04em; }
.project-tone small { position: absolute; bottom: 20px; left: 20px; color: rgba(0,0,0,.5); text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }
.tone-hexagun { background: linear-gradient(135deg, #d2b69e, #f1e7dd 46%, #9f7a60); }
.tone-heato { background: linear-gradient(145deg, #ddd9d3, #a9a39b); }
.tone-camis { background: linear-gradient(150deg, #ccd0d9, #edf0f5 58%, #848c99); }
.tone-harmocore { color: white; background: linear-gradient(145deg, #ffbe5a, #ef6d0d 55%, #a50202); }
.tone-harmocore small { color: rgba(255,255,255,.7); }
.tone-terra { color: white; background: radial-gradient(circle at 58% 48%, #9e6a44, #241811 35%, #000 72%); }
.tone-terra small { color: rgba(255,255,255,.6); }
.tone-collection { background: linear-gradient(145deg, #e6e5dc, #bdc4ad 50%, #929a79); }
.gallery-caption { display: flex; gap: 5px; align-items: baseline; padding-top: 14px; text-transform: uppercase; font-size: 20px; letter-spacing: -.035em; }
.gallery-caption h2 { margin: 0; font: inherit; }

/* Contact */
.contact {
  min-height: 100svh;
  padding-top: 140px;
  display: flex;
  flex-direction: column;
}
.eyebrow { font-size: 12px; }
.contact h2 {
  margin: 58px 0 0;
  max-width: 1180px;
  font-size: clamp(70px, 8.6vw, 138px);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .96;
}
.contact h2 span { display: inline-block; margin-left: .18em; font-size: .72em; }
.contact-bottom { margin-top: auto; padding-bottom: 82px; display: flex; justify-content: space-between; align-items: end; }
.contact-link { padding: 0; font-size: 14px; }
.socials { display: flex; gap: 58px; }
.socials button { padding: 0; }
footer { display: grid; grid-template-columns: 1fr auto auto; gap: 32px; padding: 0 0 34px; color: var(--muted); font-size: 11px; }
footer a { color: var(--ink); }

/* About */
.section-label { display: flex; justify-content: space-between; padding-top: 50px; }
.section-label h1 { margin: 0; font-size: 14px; font-weight: 400; }
.section-label span { color: var(--muted); }
.about-grid { display: grid; grid-template-columns: 42% 1fr; gap: 9%; padding: 76px 0 170px; }
.portrait {
  width: min(390px, 100%);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--muted);
}
.about-portrait p { font-size: 18px; line-height: 1.4; }
.bio { padding-top: 2px; max-width: 700px; }
.bio h2 { margin: 0 0 34px; font-size: clamp(40px, 4vw, 62px); line-height: 1.02; letter-spacing: -.05em; font-weight: 400; }
.bio > p { max-width: 700px; margin: 0 0 24px; font-size: 18px; line-height: 1.4; }
.bio > .muted { margin: 28px 0 24px; color: var(--muted); font-size: 13px; }
.experience-row { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid var(--line); }
.experience-row > span { color: var(--muted); }
.text-link { display: inline-flex; gap: 24px; margin-top: 38px; }
.page-about .contact { min-height: 90svh; padding-top: 20px; }

/* Project case study */
.project-shell { width: 100%; padding: 0 20px; }
.project-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 60px;
  padding-top: 17px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
}
.project-bar p { margin: 0; text-align: center; font-size: 14px; }
.project-exit { justify-self: end; color: var(--accent); }
.case-title { min-height: 245px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.case-title h1 { margin: 0; font-size: clamp(54px, 5.6vw, 90px); line-height: .93; letter-spacing: -.06em; font-weight: 400; }
.case-title h1 span { color: #b6b6b6; }
.case-title time { align-self: end; padding-bottom: 52px; color: #a9a9a9; font-size: clamp(34px, 3vw, 48px); }
.case-media {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #ededeb;
  color: rgba(0,0,0,.42);
}
.case-media span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.case-hero { aspect-ratio: 1.65 / 1; }
.media-hexagun, .media-silk, .media-silk-warm, .media-silk-soft, .media-related { background: linear-gradient(135deg, #b98f70, #e8d5c4 50%, #9a745d); }
.media-detail { background: linear-gradient(135deg, #e4cbbb, #ad8068); }
.media-studio, .media-studio-light { background: linear-gradient(145deg, #f6f6f7, #d7d8dc); }
.media-use, .media-use-soft { background: linear-gradient(145deg, #ead2c8, #c99680); }
.case-colorways { background: linear-gradient(120deg, #eee 0 20%, #df854f 20% 40%, #b3ab8d 40% 60%, #c8a16d 60% 80%, #a8aa55 80%); }
.case-intro { padding: 42px 0 58px; }
.case-lead { max-width: 1360px; margin: 0 0 56px; font-size: clamp(25px, 2.45vw, 39px); line-height: 1.22; letter-spacing: -.025em; }
.case-meta { margin: 0; text-transform: uppercase; }
.case-meta div { margin-bottom: 22px; }
.case-meta dt { margin-bottom: 8px; font-size: 13px; }
.case-meta dd { margin: 0; color: #aaa; font-size: 17px; line-height: 1.35; }
.case-wide { width: 100%; aspect-ratio: 1.53 / 1; }
.case-copy { width: 48%; max-width: 650px; margin: 40px 0 90px; font-size: 18px; line-height: 1.4; }
.case-copy-wide { width: 62%; max-width: 900px; }
.case-asymmetric { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.case-asymmetric .case-media { aspect-ratio: .78 / 1; }
.case-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.case-pair .case-media { aspect-ratio: 1 / 1; }
.case-half { width: calc(50% - 12px); margin-bottom: 24px; }
.case-half .case-media { aspect-ratio: .78 / 1; }
.explore-more { margin: 105px 0 70px; }
.explore-more > h2 { margin: 0 0 28px; font-size: clamp(42px, 4vw, 64px); font-weight: 400; letter-spacing: -.04em; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.related-grid .case-media { aspect-ratio: 1 / 1.22; }
.related-grid h3 { margin: 12px 0 0; font-size: 20px; font-weight: 400; text-transform: uppercase; }
.project-footer { grid-template-columns: 1fr auto; padding-top: 10px; }
.pending-hero { aspect-ratio: 1.65 / 1; }
.pending-note { margin: 32px 0; color: var(--muted); }

/* Dialog */
dialog { width: min(520px, 90vw); padding: 60px 36px 36px; border: 0; }
dialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }
.close { position: absolute; top: 18px; right: 20px; }

@media (min-width: 1800px) {
  .shell { padding: 0 40px; }
  .project-shell { padding: 0 32px; }
}

@media (max-width: 800px) {
  .shell { padding: 0 18px; }
  .site-header { height: 78px; padding-top: 20px; }
  .header-role { display: none; }
  nav { gap: 24px; }
  .intro { padding: 24px; }
  .intro h1 { font-size: 34vw; }
  .intro-index { display: none; }
  .intro-top, .intro-bottom { font-size: 12px; }
  .identity-transition { min-height: 480px; padding: 0 8px; }
  .identity-scroll { font-size: 12px; }
  .gallery { gap: 14px; }
  .gallery-column { gap: 28px; }
  .gallery-caption { font-size: 13px; }
  .contact { min-height: 80svh; padding-top: 80px; }
  .contact h2 { margin-top: 42px; font-size: 10vw; }
  .contact-bottom { padding-bottom: 50px; }
  .about-grid { gap: 40px; grid-template-columns: 1fr; padding-top: 46px; }
  .portrait { width: 270px; }
  .project-shell { padding: 0 14px; }
  .project-bar { grid-template-columns: auto 1fr auto; gap: 12px; font-size: 11px; }
  .project-bar p { font-size: 11px; }
  .case-title { min-height: 180px; }
  .case-title time { padding-bottom: 38px; }
  .case-copy, .case-copy-wide { width: 75%; }
}

@media (max-width: 520px) {
  .gallery { display: flex; flex-direction: column; gap: 28px; }
  .gallery-column { display: contents; }
  .project-1 { order: 1; }
  .project-2 { order: 2; }
  .project-3 { order: 3; }
  .project-4 { order: 4; }
  .project-5 { order: 5; }
  .project-6 { order: 6; }
  .project-image { aspect-ratio: 1.2 / 1 !important; }
  .contact-bottom { flex-direction: column; align-items: flex-start; gap: 38px; }
  .socials { gap: 28px; }
  footer { grid-template-columns: 1fr auto; }
  footer span:nth-child(2) { display: none; }
  .section-label { padding-top: 24px; }
  .about-grid { padding-bottom: 90px; }
  .bio h2 { font-size: 38px; }
  .bio > p { font-size: 16px; }
  .experience-row { grid-template-columns: 90px 1fr; }
  .project-bar p { max-width: 180px; justify-self: center; }
  .case-title { min-height: 160px; }
  .case-title h1 { font-size: 9vw; }
  .case-title time { font-size: 22px; }
  .case-lead { font-size: 22px; }
  .case-copy, .case-copy-wide { width: 100%; margin-bottom: 55px; font-size: 16px; }
  .case-asymmetric { grid-template-columns: 1fr; }
  .case-spacer { display: none; }
  .case-pair { grid-template-columns: 1fr; gap: 14px; }
  .case-half { width: 100%; }
  .related-grid { gap: 12px; }
  .related-grid h3 { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Project title transition */
.project-arriving body { visibility: hidden; }
.project-departing { overflow: hidden; }
.project-curtain {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: 7vw; background: #fff; color: #171717;
  opacity: 0; visibility: visible;
  transition: opacity .25s ease, transform .65s cubic-bezier(.76, 0, .24, 1);
}
.project-curtain p {
  margin: 0; max-width: 100%; text-align: center;
  font-size: clamp(40px, 8vw, 150px); font-weight: 400;
  letter-spacing: -.055em; line-height: 1.02;
  opacity: 0; transform: translateY(22px);
  transition: opacity .35s ease .15s, transform .5s cubic-bezier(.16, 1, .3, 1) .15s;
}
.project-curtain.is-visible { opacity: 1; }
.project-curtain.is-visible p { opacity: 1; transform: none; }
.project-curtain.is-exiting { transform: translateY(-100%); }
.project-curtain.is-exiting p { opacity: 0; transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .project-curtain, .project-curtain p { transition: none; }
}

@font-face {font-family:'Instrument Sans';font-style:normal;font-weight:500;src:url('/assets/fonts/instrument-sans-500.ttf') format('truetype');font-display:swap}
@font-face {font-family:'Instrument Sans';font-style:normal;font-weight:600;src:url('/assets/fonts/instrument-sans-600.ttf') format('truetype');font-display:swap}
/* Opening frames 01, 01.1, and 02, based on the supplied 1440px exports. */
.identity-transition {font-family:'Instrument Sans',sans-serif;min-height:0;padding:0;display:block;color:#181818}
.identity-discipline,.identity-name {position:absolute;left:1.3889%;margin:0;text-align:left;font-size:clamp(48px,8.3333vw,160px);font-weight:600;line-height:1;letter-spacing:-.05em;white-space:nowrap}
.identity-discipline {top:3.3296%}
.identity-name {top:auto;bottom:3.4406%;display:flex;align-items:baseline}
.identity-dot,.identity-g {display:inline-block}
.identity-dot {margin-left:.12em;transform-origin:50% 90%}
.identity-g {margin-left:.1em}
.identity-portfolio,.identity-cities,.identity-scroll {position:absolute;left:auto;right:1.3889%;margin:0;font-size:14px;font-weight:500;line-height:20px;text-align:right;color:#181818;transform:none;opacity:calc(1 - var(--identity-progress)*3.2)}
.identity-portfolio {top:3.7736%}
.identity-cities {top:47.7248%}
.identity-scroll {top:auto;bottom:4.4395%;text-transform:uppercase}
.opening {overflow:hidden;height:100svh}
.opening-stage {position:fixed;inset:0;background:#000;z-index:100;overflow:hidden;will-change:clip-path}
.opening-word {position:absolute;left:50%;top:50%;width:max-content;font-family:'Instrument Sans',sans-serif;font-size:clamp(44px,5vw,100px);font-weight:600;line-height:1;letter-spacing:-.05em;color:#fff;translate:-50% -50%;transform-origin:top left;opacity:0;will-change:transform}
.opening .identity-reveal,.opening .boyi-anchor,.opening .identity-dot {opacity:0}
.opening-bridge .boyi-anchor {opacity:1}
.opening-dot .identity-dot {animation:opening-dot-arrive .4s .12s both cubic-bezier(.16,1,.3,1)}
.opening-reveal .identity-reveal {animation:identity-arrive .7s both cubic-bezier(.16,1,.3,1)}
.opening-reveal .identity-g {animation-delay:0s}
.opening-reveal .identity-discipline {animation-delay:.12s}
.opening-reveal .identity-portfolio {animation-delay:.23s}
.opening-reveal .identity-cities {animation-delay:.31s}
.opening-reveal .identity-scroll {animation-delay:.39s}
@keyframes opening-dot-arrive {from {opacity:0;transform:translateY(12px) scale(.55)} to {opacity:1;transform:none}}
@keyframes identity-arrive {from {opacity:0;translate:0 18px} to {opacity:1;translate:0 0}}
@media(max-width:600px) {.identity-portfolio,.identity-cities,.identity-scroll {font-size:11px;line-height:16px}.identity-discipline,.identity-name {font-size:12vw}.identity-portfolio {top:30%}}

/* Portfolio revision: 03 gallery, 04 about, 05 editorial pages. */
body {font-family:'Instrument Sans',Arial,sans-serif;font-weight:500}
.page-work .shell,.page-about .shell {max-width:none;padding:0 20px}
.page-work #selected-work {box-shadow:none}
.site-header {height:56px;padding-top:0;align-items:center}
.page-work .site-header,.page-about .site-header {position:sticky;top:0;z-index:40;background:#fff}
.site-header .logo,.detail-header .logo {font-size:14px;font-weight:500;letter-spacing:-.025em}
.site-header nav {gap:38px}
.site-header nav a {font-size:13px;font-weight:500}
.site-header nav a[aria-current=page] {color:inherit}
.mobile-menu-toggle {display:none}
.header-role {display:none}

.page-work .gallery {gap:24px;--gallery-card-gap:30px;--gallery-caption-gap:14px}
.page-work .gallery-column {gap:var(--gallery-card-gap)}
.page-work .project {overflow:visible}
.page-work .project-image {aspect-ratio:688/660;overflow:hidden}
.page-work .gallery-column:nth-child(1) .project:nth-child(2) .project-image {aspect-ratio:688/460}
.page-work .gallery-column:nth-child(2) .project:nth-child(1) .project-image {aspect-ratio:688/460}
.page-work .gallery-column:nth-child(2) .project:nth-child(2) .project-image {aspect-ratio:688/848}
.page-work .gallery-column:nth-child(2) .project:nth-child(3) .project-image {aspect-ratio:688/472}
.page-work .gallery-caption {padding-top:var(--gallery-caption-gap);font-size:20px;line-height:1.2;letter-spacing:-.035em;gap:.3em}
.page-work .gallery-caption h2 {font-weight:500}
.media-placeholder {position:relative;display:grid;place-items:center;overflow:hidden;background:#eae8e4;color:#47433e;isolation:isolate}
.media-placeholder::before {content:'';position:absolute;inset:0;background:radial-gradient(circle at 28% 25%,rgba(255,255,255,.55),transparent 44%),linear-gradient(145deg,rgba(255,255,255,.12),transparent 58%);z-index:-1}
.media-placeholder span {font-size:11px;letter-spacing:.13em;font-weight:500;text-transform:uppercase;opacity:.55}
.media-placeholder small {position:absolute;left:20px;bottom:18px;font-size:12px;letter-spacing:.02em;opacity:.7}
.gallery-image,.related-image,.portrait-image,.editorial-media {display:block;object-fit:cover;object-position:center}
.editorial-image-crop {overflow:hidden}
.editorial-image-crop .editorial-media {position:absolute;display:block}
@media (hover:hover) and (pointer:fine) {
  .page-project .editorial-flow>.editorial-frame:first-child .editorial-media {
    transform:scale(1);
    transform-origin:center;
    transition:transform .95s cubic-bezier(.16,1,.3,1);
    backface-visibility:hidden;
  }
  .page-project .editorial-flow>.editorial-frame:first-child:hover .editorial-media {transform:scale(1.1)}
}
.gallery-image,.related-image {width:100%;height:100%}
.portrait-image {width:100%;aspect-ratio:400/500}
.editorial-video {background:#000;overflow:hidden}
.editorial-video video {display:block;width:100%;height:100%;object-fit:cover}
.video-audio-toggle {position:absolute;inset:0;width:100%;height:100%;padding:18px;display:flex;align-items:flex-end;justify-content:flex-end;color:#fff;text-align:right;cursor:pointer}
.video-audio-toggle span {display:block;padding:7px 10px;background:rgba(0,0,0,.58);font-size:11px;letter-spacing:.08em;line-height:1;text-transform:uppercase}
.video-audio-toggle:hover span,.video-audio-toggle:focus-visible span {background:rgba(0,0,0,.8)}
.palette-hexagun-mini .media-placeholder,.media-placeholder.palette-hexagun-mini {background:#d7c0a9;color:#3e302a}
.palette-heato-mini .media-placeholder,.media-placeholder.palette-heato-mini {background:#c3bfb9;color:#393737}
.palette-camis .media-placeholder,.media-placeholder.palette-camis {background:#adb0b7;color:#343840}
.palette-harmocore-actuators .media-placeholder,.media-placeholder.palette-harmocore-actuators {background:linear-gradient(135deg,#ffad36,#e75b0c 55%,#cc1e0c);color:#201614}
.palette-terra .media-placeholder,.media-placeholder.palette-terra {background:#31211c;color:#e3cabc}
.palette-acquair .media-placeholder,.media-placeholder.palette-acquair {background:#a5b1a0;color:#28362b}
.page-work .project-image::after {content:'';position:absolute;inset:0;border:1px solid rgba(0,0,0,.035);pointer-events:none}
.page-work .project-image {transform:none;filter:none;position:relative}
.page-work .gallery-art {position:absolute;inset:0;width:100%;height:100%;transform:scale(var(--gallery-base-scale,1));transform-origin:center;transition:transform .95s cubic-bezier(.16,1,.3,1);backface-visibility:hidden}
.page-work .project:hover .gallery-art,.page-work .project:focus-visible .gallery-art {transform:scale(var(--gallery-hover-scale,1.1))}
.page-work .gallery-caption {transform:none}
.motion-ready .reveal-card {opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.motion-ready .reveal-card.is-visible {opacity:1;transform:none}

.site-outro {padding:96px 0 34px;min-height:520px;display:flex;flex-direction:column}
.site-outro h2 {margin:0;font-size:clamp(56px,6.1vw,108px);font-weight:500;letter-spacing:-.065em;line-height:.98}
.outro-meta {display:flex;justify-content:space-between;align-items:flex-start;margin-top:42px;font-size:14px;line-height:1.55}
.outro-social {display:flex;flex-direction:column;align-items:flex-start}
.outro-social-mobile {display:none}
.outro-social a {transition:opacity .25s ease,transform .3s ease}
.outro-social a:hover {opacity:.55;transform:translateX(3px)}
.outro-meta p {margin:0;text-align:right}
.outro-meta p span {display:block}
.site-outro small {margin-top:auto;font-size:12px}

/* About follows the supplied asymmetric text / portrait composition. */
.about-intro {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:clamp(24px,4vw,72px);align-items:start;padding-bottom:clamp(70px,6.25vw,100px)}
.about-copy {max-width:min(100%,700px)}
.about-copy p {margin:0;font-size:clamp(25px,2.4vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.12}
.about-copy p+p {margin-top:1em}
.about-portrait {width:100%;max-width:400px;justify-self:end;margin-top:clamp(250px,30vw,430px)}
.about-portrait.about-motion-ready {opacity:0;transform:translate3d(0,22px,0);transition:opacity .9s ease,transform 1.05s cubic-bezier(.16,1,.3,1)}
.about-portrait.about-motion-ready.is-flow-visible {opacity:1;transform:none}
.portrait-placeholder {aspect-ratio:400/500;background:#e5e5e5;color:#777}
.profile-section {margin:0 0 58px}
.profile-section h2 {font-size:15px;line-height:1.3;font-weight:500;margin:0 0 24px}
.profile-head,.profile-row {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.profile-head>span,.profile-row>span {min-width:0;overflow-wrap:break-word}
.profile-head {font-size:12px;color:#999;text-transform:uppercase;margin-bottom:7px}
.profile-row {font-size:15px;line-height:1.35;min-height:30px}
.page-about .site-outro {padding-top:84px}

/* Editorial project pages retain the varying widths and rests of the PNGs. */
.page-project .project-shell {width:100%;max-width:none;padding:0 20px}
.detail-header {height:56px;padding-top:0;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:40;background:#fff}
.detail-header a:last-child {font-size:14px}
.detail-title {height:auto;padding-top:clamp(34px,4.3vw,62px);padding-bottom:clamp(38px,4.2vw,60px)}
.detail-title h1,.detail-title p {margin:0;font-size:clamp(48px,5.8vw,84px);font-weight:500;letter-spacing:-.058em;line-height:.99}
.detail-title p {color:#9a9a9a}
.editorial-flow {width:100%;--editorial-column-gap:24px}
.editorial-frame {width:100%;min-height:0;position:relative;overflow:hidden}
.editorial-full .editorial-tile {position:absolute;inset:0;width:100%;height:100%}
.editorial-split {display:block}
.editorial-split .editorial-tile {position:absolute;top:0;left:0;width:calc((100% - var(--editorial-column-gap))/2);height:100%}
.editorial-split .editorial-tile:nth-child(2),.editorial-split.right .editorial-tile {left:auto;right:0}
.editorial-tile span {font-size:12px}
.editorial-flow>.editorial-frame+.editorial-frame {margin-top:24px}
.editorial-flow>.editorial-frame+.editorial-intro,.editorial-flow>.editorial-frame+.editorial-note,.editorial-flow>.editorial-intro+.editorial-frame,.editorial-flow>.editorial-note+.editorial-frame {margin-top:40px}
.editorial-intro,.editorial-note {min-height:0;padding:0}
.editorial-lead {width:100%;max-width:none;margin:0 0 46px;font-size:clamp(21px,2.45vw,36px);line-height:1.18;letter-spacing:-.032em}
.editorial-intro dl {margin:0;text-transform:uppercase;font-size:15px;line-height:1.32}
.editorial-intro dl>div {margin:0 0 15px}
.editorial-intro dt {color:#999;font-size:12px;margin-bottom:5px}
.editorial-intro dd {margin:0}
.editorial-note {width:calc((100% - var(--editorial-column-gap))/2);padding:0}
.editorial-note h2 {margin:0 0 10px;font-size:30px;line-height:1.05;font-weight:500;letter-spacing:-.04em}
.editorial-note p {width:100%;max-width:none;margin:0;font-size:17px;line-height:1.3}
.related-work {padding-top:90px}
.related-work>h2 {margin:0 0 24px;font-size:16px;font-weight:500}
.related-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.related-frame {aspect-ratio:688/860;position:relative;overflow:hidden;container-type:inline-size;--award-inset:clamp(6px,2.3cqw,16px)}
.related-card .related-art {position:absolute;inset:0;width:100%;height:100%;transform:scale(1.015);transform-origin:center;transition:transform .95s cubic-bezier(.16,1,.3,1);backface-visibility:hidden}
.related-awards {position:absolute;top:var(--award-inset);left:var(--award-inset);z-index:2;display:flex;align-items:flex-start;flex-wrap:wrap;gap:clamp(3px,1.15cqw,8px);max-width:calc(100% - var(--award-inset) - var(--award-inset));pointer-events:none}
.related-awards img {display:block;width:auto;height:clamp(13px,6.7cqw,46px);max-width:100%;object-fit:contain;background:transparent}
.related-card h3 {margin:13px 0 0;font-size:17px;line-height:1.2;font-weight:500}
.related-card:hover .related-art,.related-card:focus-visible .related-art {transform:scale(1.115)}
.text-flow-ready .flow-word {display:inline-block;opacity:0;transform:translate3d(0,.7em,0);transition:opacity .65s ease,transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--word-delay)}
.text-flow-ready.is-flow-visible .flow-word {opacity:1;transform:none}
.page-project .site-outro {padding-top:90px}

/* The 05.0 title screen echoes the black 01.1 stage. */
.project-arriving body {visibility:hidden}
.project-curtain {position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:flex-start;padding:20px 20px 36px;background:#000;color:#fff;opacity:1;visibility:visible;transform:translateY(100%);transition:transform .8s cubic-bezier(.76,0,.24,1)}
.project-curtain p {margin:0;font-family:'Instrument Sans',sans-serif;font-size:clamp(52px,8.333vw,140px);font-weight:500;letter-spacing:-.055em;line-height:.9;text-align:left;opacity:0;transform:translateY(26px);transition:opacity .4s ease .22s,transform .65s cubic-bezier(.16,1,.3,1) .2s}
.project-curtain.is-visible {transform:translateY(0)}
.project-progress {position:absolute;top:0;left:0;right:0;height:3px;overflow:hidden}
.project-progress span {display:block;width:0;height:100%;background:#fff;transition:width .95s linear .13s}
.project-curtain.is-visible .project-progress span,.project-curtain.is-loaded .project-progress span {width:100%}
.project-curtain.is-visible p {opacity:1;transform:none}
.project-curtain.is-exiting {transform:none;opacity:0;pointer-events:none;transition:opacity 1.05s cubic-bezier(.22,1,.36,1)}
.project-curtain.is-exiting p {opacity:0;transform:translateY(-12px);transition:opacity .38s ease,transform .55s ease}
.project-entry-active .detail-title h1,.project-entry-active .detail-title p,.project-entry-active .editorial-flow>.editorial-frame:first-child {opacity:0;transform:translate3d(0,24px,0);transition:opacity .9s ease,transform 1.05s cubic-bezier(.16,1,.3,1)}
.project-entry-active.project-entry-reveal .detail-title h1,.project-entry-active.project-entry-reveal .detail-title p,.project-entry-active.project-entry-reveal .editorial-flow>.editorial-frame:first-child {opacity:1;transform:none}
.project-entry-active .detail-title p {transition-delay:.1s}
.project-entry-active .editorial-flow>.editorial-frame:first-child {transition-delay:.18s}

/* A quiet document handoff for the global navigation and EXIT. */
html.nav-arriving {scroll-behavior:auto}
html.nav-arriving body {opacity:0;transform:translate3d(0,10px,0)}
html.nav-arriving.nav-arrived body {opacity:1;transform:none;transition:opacity .58s cubic-bezier(.22,1,.36,1),transform .68s cubic-bezier(.16,1,.3,1)}
body.nav-departing {opacity:0;transform:translate3d(0,-8px,0);transition:opacity .38s cubic-bezier(.4,0,.2,1),transform .42s cubic-bezier(.4,0,.2,1)}
#contact {scroll-margin-top:72px}
.site-outro.contact-incoming>h2,.site-outro.contact-incoming>.outro-meta,.site-outro.contact-incoming>small {opacity:0;transform:translate3d(0,24px,0);transition:opacity .85s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.site-outro.contact-incoming.contact-visible>h2,.site-outro.contact-incoming.contact-visible>.outro-meta,.site-outro.contact-incoming.contact-visible>small {opacity:1;transform:none}
.site-outro.contact-incoming>.outro-meta {transition-delay:.18s}
.site-outro.contact-incoming>small {transition-delay:.28s}

@media(max-width:800px) {
  .page-work .shell,.page-about .shell,.page-project .project-shell {padding-left:14px;padding-right:14px}
  .site-header {height:56px;padding-top:0}
  .site-header nav {gap:18px}
  .site-header nav a {font-size:11px}
  .page-work .gallery {gap:14px}
  .page-work .gallery {--gallery-card-gap:24px;--gallery-caption-gap:9px}
  .page-work .gallery-caption {font-size:15px}
  .site-outro {min-height:470px;padding-top:100px}
  .site-outro h2 {font-size:clamp(42px,8vw,70px)}
  .about-copy p {font-size:clamp(23px,3vw,28px)}
  .about-portrait {margin-top:clamp(170px,28vw,260px)}
  .detail-header {height:56px;padding-top:0}
  .detail-title {height:auto;padding-top:clamp(28px,5vw,42px);padding-bottom:clamp(32px,5vw,48px)}
  .detail-title h1,.detail-title p {font-size:clamp(36px,6vw,60px)}
  .editorial-intro,.editorial-note,.editorial-breath {min-height:0}
  .editorial-intro,.editorial-note {padding:0}
  .editorial-lead {font-size:clamp(20px,3vw,30px)}
  .related-work {padding-top:80px}
}
@media(max-width:720px) {
  .about-intro {display:block;padding-bottom:84px}
  .about-copy {max-width:700px}
  .about-portrait {width:min(58%,400px);margin:56px 0 0 auto}
  .profile-head,.profile-row {grid-template-columns:minmax(0,1.15fr) minmax(0,.62fr) minmax(0,1.23fr);gap:12px}
}
@media(max-width:520px) {
  .site-header nav {gap:12px}
  .site-header nav a {font-size:10px}
  .page-work .gallery {display:flex;flex-direction:column;gap:24px}
  .page-work .gallery-column {display:contents}
  .page-work .gallery-column:nth-child(1) .project:nth-child(1) {order:1}
  .page-work .gallery-column:nth-child(2) .project:nth-child(1) {order:2}
  .page-work .gallery-column:nth-child(1) .project:nth-child(2) {order:3}
  .page-work .gallery-column:nth-child(2) .project:nth-child(2) {order:4}
  .page-work .gallery-column:nth-child(1) .project:nth-child(3) {order:5}
  .page-work .gallery-column:nth-child(2) .project:nth-child(3) {order:6}
  .page-work .project-image {aspect-ratio:1.15/1!important}
  .site-outro {padding-top:84px;min-height:420px}
  .site-outro h2 {font-size:10vw}
  .outro-meta {font-size:12px;margin-top:30px}
  .about-intro {display:block;padding-bottom:80px}
  .about-copy {max-width:none}
  .about-copy p {font-size:25px}
  .about-portrait {width:min(70%,360px);margin:56px 0 0 auto}
  .profile-head,.profile-row {grid-template-columns:minmax(0,1.15fr) minmax(0,.62fr) minmax(0,1.23fr);gap:8px}
  .profile-section h2 {font-size:13px}
  .profile-head {font-size:10px}
  .profile-row {font-size:11px;min-height:32px}
  .detail-title {height:auto;padding-top:32px;padding-bottom:32px}
  .detail-title h1,.detail-title p {font-size:clamp(29px,8vw,48px)}
  .editorial-flow {--editorial-column-gap:12px}
  .editorial-note {width:100%}
  .editorial-flow>.editorial-frame+.editorial-frame {margin-top:12px}
  .editorial-flow>.editorial-frame+.editorial-intro,.editorial-flow>.editorial-frame+.editorial-note,.editorial-flow>.editorial-intro+.editorial-frame,.editorial-flow>.editorial-note+.editorial-frame {margin-top:24px}
  .editorial-lead {font-size:20px}
  .editorial-intro dl {font-size:12px}
  .editorial-note h2 {font-size:23px}
  .editorial-note p {font-size:14px}
  .related-grid {gap:10px}
  .related-card h3 {font-size:12px}
  .project-curtain {padding:14px 14px 26px}
  .project-curtain p {font-size:10vw}
}
@media(prefers-reduced-motion:reduce) {
  html.nav-arriving body,html.nav-arriving.nav-arrived body,body.nav-departing {opacity:1;transform:none;transition:none}
  .site-outro.contact-incoming>h2,.site-outro.contact-incoming>.outro-meta,.site-outro.contact-incoming>small {opacity:1;transform:none;transition:none}
  .page-project .editorial-flow>.editorial-frame:first-child .editorial-media {transform:none!important;transition:none!important}
  .motion-ready .reveal-card {opacity:1;transform:none}
  .page-work .gallery-art,.related-art,.project-curtain,.project-curtain p,.project-progress span,.flow-word {transition:none!important;transform:none!important;opacity:1!important}
  .project-entry-active .detail-title h1,.project-entry-active .detail-title p,.project-entry-active .editorial-flow>.editorial-frame:first-child {transition:none!important;transform:none!important;opacity:1!important}
  .about-portrait.about-motion-ready {transition:none!important;transform:none!important;opacity:1!important}
}

/* Mobile edition: keep the editorial pacing, but let imagery and text own the width. */
@media(max-width:700px) {
  .page-work .shell,.page-about .shell,.page-project .project-shell {padding-left:16px;padding-right:16px}
  .site-header,.detail-header {height:56px}
  .site-header .logo,.detail-header .logo {font-size:14px}
  .site-header .logo,.site-header nav a,.detail-header a {display:inline-flex;align-items:center;min-height:44px}
  .mobile-menu-toggle {position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;margin-left:auto;padding:0;border:0;background:transparent;color:#171717;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mobile-menu-toggle span {display:block;flex:none;width:24px;height:2px;background:currentColor;transform-origin:center;transition:transform .35s cubic-bezier(.16,1,.3,1)}
  html.mobile-menu-open .mobile-menu-toggle span:first-child {transform:translateY(4px) rotate(45deg)}
  html.mobile-menu-open .mobile-menu-toggle span:last-child {transform:translateY(-4px) rotate(-45deg)}
  .mobile-menu-toggle:focus-visible {outline:2px solid currentColor;outline-offset:2px}
  .site-header nav {position:fixed;inset:56px 0 0;z-index:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;margin:0;padding:48px 16px max(24px,env(safe-area-inset-bottom));background:#fff;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);transition:opacity .3s ease,transform .45s cubic-bezier(.16,1,.3,1),visibility .3s;overflow-y:auto}
  html.mobile-menu-open {overflow:hidden}
  html.mobile-menu-open .site-header nav {opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .site-header nav a {width:50%;min-height:64px;padding:10px 0;border:0;font-size:clamp(32px,7.8vw,54px);font-weight:500;line-height:1;letter-spacing:-.052em;white-space:nowrap}
  .detail-header a:last-child {font-size:12px}
  .site-header nav a:active,.detail-header a:active {opacity:.5}

  .identity-transition {padding:0 16px}
  .identity-discipline,.identity-name {left:16px;letter-spacing:-.055em}
  .identity-discipline {top:4.5%;font-size:clamp(37px,11.8vw,76px);line-height:.95}
  .identity-name {bottom:4%;font-size:clamp(51px,16vw,100px)}
  .identity-portfolio,.identity-cities,.identity-scroll {right:16px;font-size:11px;line-height:1.3}
  .identity-portfolio {top:25%}
  .identity-cities {top:49%}
  .identity-scroll {bottom:17%}
  .opening-word {font-size:clamp(48px,10vw,74px)}

  .page-work .gallery {display:flex;flex-direction:column;gap:clamp(30px,7vw,44px)}
  .page-work .gallery-column {display:contents}
  .page-work .gallery-column:nth-child(1) .project:nth-child(1) {order:1}
  .page-work .gallery-column:nth-child(2) .project:nth-child(1) {order:2}
  .page-work .gallery-column:nth-child(1) .project:nth-child(2) {order:3}
  .page-work .gallery-column:nth-child(2) .project:nth-child(2) {order:4}
  .page-work .gallery-column:nth-child(1) .project:nth-child(3) {order:5}
  .page-work .gallery-column:nth-child(2) .project:nth-child(3) {order:6}
  .page-work .gallery .project-image {aspect-ratio:1.08/1!important}
  .page-work .palette-harmocore-actuators .gallery-image {object-position:50% 50%!important}
  .page-work .gallery-caption {padding-top:10px;font-size:clamp(16px,4.1vw,20px);line-height:1.15}
  .motion-ready .reveal-card {transform:translateY(18px);transition-duration:.7s,.8s}
  .page-work .project:active .gallery-art {transform:scale(var(--gallery-hover-scale,1.1))}

  .site-outro {min-height:360px;padding:78px 0 24px}
  .site-outro h2 {font-size:clamp(31px,8.8vw,60px);line-height:1;letter-spacing:-.06em}
  .outro-meta {flex-direction:column;align-items:stretch;gap:28px;margin-top:36px;font-size:13px;line-height:1.45}
  .outro-meta p {order:0;align-self:flex-end;text-align:right;font-size:13px}
  .outro-social-desktop {display:none}
  .outro-social-mobile {order:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:0;width:100%}
  .outro-social-mobile a {min-height:44px;display:inline-flex;align-items:center;font-size:clamp(12px,3.5vw,14px)}
  .outro-social-mobile a:nth-child(1) {justify-self:start}
  .outro-social-mobile a:nth-child(2) {justify-self:center}
  .outro-social-mobile a:nth-child(3) {justify-self:end}
  .site-outro small {font-size:10px}

  .about-intro {display:block;padding-bottom:66px}
  .about-copy {max-width:none}
  .about-copy p {font-size:clamp(21px,5.5vw,30px);line-height:1.18;letter-spacing:-.03em}
  .about-copy p+p {margin-top:1.05em}
  .about-portrait {width:50%;max-width:240px;margin:46px 0 0 auto}
  .profile-section {margin-bottom:48px}
  .profile-section h2 {margin-bottom:14px;font-size:12px}
  .profile-head {display:none}
  .profile-row {grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;min-height:0;padding:12px 0;border-top:1px solid #e9e9e9;font-size:13px;line-height:1.35}
  .profile-row>span:nth-child(2) {white-space:nowrap}
  .profile-row>span:nth-child(3) {grid-column:1/-1;color:#777;font-size:12px}

  .detail-title {padding-top:28px;padding-bottom:32px}
  .detail-title h1,.detail-title p {font-size:clamp(32px,7.8vw,54px);line-height:1.01;letter-spacing:-.052em}
  .editorial-flow {--editorial-column-gap:12px}
  .editorial-flow>.editorial-frame:first-child {aspect-ratio:5/4!important}
  .editorial-split {display:flex;flex-direction:column;gap:12px;aspect-ratio:auto!important;overflow:visible}
  .editorial-split .editorial-tile,.editorial-split .editorial-tile:nth-child(2),.editorial-split.right .editorial-tile {position:relative;top:auto;left:auto;right:auto;width:100%;height:auto;aspect-ratio:var(--mobile-tile-ratio);overflow:hidden}
  .editorial-flow>.editorial-frame+.editorial-frame {margin-top:12px}
  .editorial-flow>.editorial-frame+.editorial-intro,.editorial-flow>.editorial-frame+.editorial-note,.editorial-flow>.editorial-intro+.editorial-frame,.editorial-flow>.editorial-note+.editorial-frame {margin-top:30px}
  .editorial-lead {margin-bottom:34px;font-size:clamp(20px,5.2vw,27px);line-height:1.2}
  .editorial-intro dl {font-size:13px;line-height:1.35}
  .editorial-intro dl>div {margin-bottom:15px}
  .editorial-intro dt {font-size:11px}
  .editorial-note {width:100%;max-width:600px}
  .editorial-note h2 {font-size:clamp(23px,6vw,30px);line-height:1.08}
  .editorial-note p {font-size:15px;line-height:1.43}
  .video-audio-toggle {padding:12px}
  .video-audio-toggle span {min-height:32px;display:flex;align-items:center}
  .related-work {padding-top:70px}
  .related-work>h2 {margin-bottom:16px;font-size:13px}
  .related-grid {display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,78vw);gap:12px;margin-right:-16px;padding-right:16px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .related-grid::-webkit-scrollbar {display:none}
  .related-card {scroll-snap-align:start}
  .related-frame {aspect-ratio:4/5}
  .related-card h3 {margin-top:10px;font-size:14px}
  .related-card:active .related-art {transform:scale(1.09)}
  .project-curtain {padding:16px 16px max(28px,env(safe-area-inset-bottom))}
  .project-curtain p {font-size:clamp(38px,10.8vw,74px);line-height:.95}
}

@media(max-width:370px) {
  .page-work .shell,.page-about .shell,.page-project .project-shell {padding-left:14px;padding-right:14px}
  .site-header nav {padding-left:14px;padding-right:14px}
  .related-grid {margin-right:-14px;padding-right:14px}
  .identity-discipline,.identity-name {left:14px}
  .identity-portfolio,.identity-cities,.identity-scroll {right:14px}
}