/* A quiet, light design system for Yu Zhehao's portfolio.
   The uploaded cover artwork remains an unchanged image. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap');

:root {
  --paper:var(--color-off-white);
  --ink:var(--color-off-black);
  --muted:var(--color-steel-gray);
  --accent:var(--color-signal-blue);
  --line:rgba(15,16,18,.13);
  --sans:'Inter','PingFang SC','Microsoft YaHei UI','Noto Sans CJK SC',sans-serif;
  --display:var(--sans);
  --serif:var(--sans);
  --panel:var(--color-pure-white);
  --blue:var(--color-signal-blue);
  --content-gutter:32px;
}

/* Full-bleed case-study artwork supplied by the designer. */
.detail-page.detail-page--case-study {
  padding-top: clamp(24px, 3vw, 56px);
  background: #000;
}
.detail-page--case-study > .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.case-study-summary {
  width: min(1760px, calc(100% - clamp(32px, 8vw, 160px)));
  margin: 0 auto clamp(20px, 2.4vw, 38px);
  padding: clamp(30px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
  gap: clamp(40px, 7vw, 110px);
  border: 1px solid rgba(255,255,255,.12);
  background: #111;
  color: #f5f5f3;
}
.case-study-summary__intro { align-self: end; }
.case-study-summary__eyebrow {
  display: block;
  margin-bottom: 24px;
  color: #9a9a9a;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.case-study-summary h1 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(36px, 5vw, 76px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.055em;
}
.case-study-summary__intro p {
  max-width: 700px;
  margin: 24px 0 0;
  color: #b8b8b8;
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.65;
}
.case-study-summary dl { margin: 0; border-top: 1px solid #343434; }
.case-study-summary dl div {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid #343434;
}
.case-study-summary dt { color: #858585; font-size: 11px; }
.case-study-summary dd { min-width: 0; margin: 0; color: #e6e6e4; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.case-study-visuals {
  width: min(1760px, calc(100% - clamp(32px, 8vw, 160px)));
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background: #050505;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 28px 88px rgba(0,0,0,.36);
}
.case-study-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--case-content-width) / var(--case-image-height);
  margin: 0;
  overflow: hidden;
  background: #050505;
}
.case-study-visual {
  display: block;
  width: var(--case-image-scale, 100%);
  max-width: none;
  height: auto;
  margin: 0 0 0 var(--case-image-offset, 0%);
}
.case-study-chapter {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  line-height: 0;
}
.case-study-chapter__title,
.case-study-chapter__motion {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
.case-study-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 34px;
  color: #f5f5f3;
  font-size: 12px;
}
.case-study-end a { border-bottom: 1px solid currentColor; }
.case-study-end span { color: #9a9a9a; }

@media (max-width: 760px) {
  .detail-page--case-study { padding-top: 0; }
  .case-study-summary {
    width: 100%;
    margin: 0;
    padding: 34px 20px 38px;
    grid-template-columns: 1fr;
    gap: 34px;
    border: 0;
    border-bottom: 1px solid #2f2f2f;
  }
  .case-study-summary__eyebrow { margin-bottom: 18px; }
  .case-study-summary h1 { font-size: clamp(34px, 10vw, 52px); }
  .case-study-summary__intro p { margin-top: 18px; font-size: 15px; }
  .case-study-visuals { width: 100%; box-shadow: none; }
  .case-study-end { width: calc(100% - 32px); padding-block: 26px; font-size: 10px; }
}

html{scroll-padding-top:105px}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;letter-spacing:-.02em}
body :is(h1,h2,h3,strong,b,blockquote){font-family:var(--sans);font-weight:400}
body :is(h1,h2,h3,p,blockquote){letter-spacing:-.02em}
body em{font-family:var(--sans)!important;font-style:normal!important;font-weight:400!important}
::selection{background:#d6eaff;color:var(--ink)}
:focus-visible{outline:1px solid var(--blue);outline-offset:4px}
.section-wrap,.directory-shell.section-wrap{width:min(var(--page-max-width),calc(100% - var(--content-gutter)*2));max-width:var(--page-max-width)}
.eyebrow,.section-heading{color:var(--muted);font-size:12px;font-weight:400;letter-spacing:-.02em;text-transform:none}
.text-link,.home-intro .text-link,.about-intro .text-link,.about-background-detail .text-link{
  display:inline-flex;gap:18px;padding:0 0 5px;border:0;border-bottom:1px solid transparent;
  color:var(--blue);font-size:15px;font-weight:400;letter-spacing:-.02em;text-transform:none;
  transition:border-color .25s ease,gap .25s ease
}
.text-link:hover,.text-link:focus-visible{gap:23px;border-bottom-color:var(--blue)}

/* The sticky navigation is a full-width frosted strip. */
.site-header,body[data-page="home"] .site-header,body[data-page="about"] .site-header{
  position:sticky;top:0;z-index:1000;
  width:100%;max-width:none;height:88px;margin:0;padding:0 clamp(20px,2vw,40px);
  border:0;border-radius:0;
  background:rgba(215,215,215,.88);color:var(--ink);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6)
}
.wordmark{gap:8px;color:var(--ink);font-size:14px;font-weight:400;letter-spacing:-.02em}
.wordmark-mark,body[data-page="home"] .wordmark-mark,body[data-page="about"] .wordmark-mark{
  color:var(--ink);font-size:17px;font-weight:400
}
.site-nav{gap:clamp(18px,3vw,42px);color:var(--ink);font-size:13px;font-weight:400;letter-spacing:-.02em;text-transform:none}
.site-nav a{padding:7px 0}
.site-nav a span,body[data-page="home"] .site-nav a span,body[data-page="about"] .site-nav a span,
.site-nav a:hover,.site-nav a[aria-current=page],body[data-page="about"] .site-nav a[aria-current=page]{color:var(--blue)}
.site-nav a:after,body[data-page="home"] .site-nav a:after,body[data-page="about"] .site-nav a:after{height:1px;background:var(--blue)}

/* The exact user-supplied artwork is displayed whole, on its own. */
.hero.hero--image-cover{
  display:block;width:min(var(--page-max-width),calc(100% - var(--content-gutter)*2));height:auto;min-height:0;
  margin:40px auto 0;padding:0;overflow:visible;background:transparent
}
.hero.hero--image-cover:before,.hero.hero--image-cover:after{display:none}
.hero-cover-image{display:block;width:100%;height:auto;max-width:none;object-fit:contain}
.hero-cover-meta{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:20px 0 0;color:var(--muted);font-size:13px;letter-spacing:-.02em}
.hero-cover-meta i{margin:0 8px;color:#a1a1a1;font-style:normal}
.hero-cover-meta>div{display:flex;gap:24px}
.hero-cover-meta a{color:var(--blue);border-bottom:1px solid transparent}
.hero-cover-meta a:hover,.hero-cover-meta a:focus-visible{border-bottom-color:var(--blue)}

/* Remove the earlier atmospheric gradients from reading surfaces. */
.home-intro::before,.page-opening::before,.about-opening::before,.detail-overview::before,
.project-directory::before,.practice-section::before,.site-footer::before{display:none!important;animation:none!important}
.home-intro,.about-opening,.detail-overview,.project-directory,.practice-section,.site-footer{isolation:auto}

/* Personal introduction: light weight, wide margins, one image enclosure. */
.home-intro{width:100%;max-width:none;margin:0;padding-top:100px;padding-bottom:120px;background:var(--paper);color:var(--ink)}
.home-intro .section-heading,.about-opening .section-heading,.page-opening .section-heading{
  padding-bottom:16px;border-bottom:1px solid var(--line);color:var(--muted)
}
.home-intro .section-heading .eyebrow,.about-opening .section-heading .eyebrow,
.home-intro-copy>.eyebrow,.about-intro>.eyebrow{color:var(--muted)}
.home-intro-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:70px;align-items:center;padding-top:78px}
.home-intro h2,.home-intro h2 em{color:var(--ink);font-size:clamp(42px,4.3vw,62px);font-weight:400;line-height:1.28;letter-spacing:-.045em}
.home-intro h2{margin-bottom:38px}
.home-intro-copy>p:not(.eyebrow){max-width:550px;color:var(--ink);font-size:clamp(18px,1.55vw,21px);line-height:1.8}
.home-intro-copy strong,.about-intro strong{color:var(--ink);font-weight:400}
.home-intro-copy .home-intro-note{max-width:480px!important;margin-top:24px;color:var(--muted)!important;font-size:15px!important;line-height:1.8!important}
.home-intro .text-link{margin-top:36px}
.editorial-collage{min-height:540px;overflow:hidden;border:1px solid rgba(15,16,18,.06);border-radius:var(--radius-large-cards);background:var(--panel)}
.collage-frame{border-radius:14px;background:#e7e8eb}
.collage-frame img{box-shadow:none}
.collage-frame figcaption,.collage-edition{font-size:10px;font-weight:400;letter-spacing:-.02em}
.collage-edition{top:5%;left:5%;color:var(--muted)}

/* Five-project directory: preview stays on the left, hover logic stays intact. */
.project-directory{padding:115px 0 92px;border-top:1px solid var(--line);background:var(--panel);color:var(--ink)}
.directory-top,.directory-top>span{color:var(--muted);font-size:12px;font-weight:400;letter-spacing:-.02em;line-height:1.5}
.directory-layout{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(50px,7vw,110px);min-height:690px;padding:74px 0 78px}
.directory-preview{max-width:530px;aspect-ratio:1.02;overflow:hidden;border:1px solid var(--line);border-radius:48px;background:var(--paper)}
.directory-preview-label{left:20px;bottom:20px;padding:8px 12px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(15,16,18,.72);font-size:10px;font-weight:400;letter-spacing:-.02em}
.directory-heading{padding-bottom:30px}
.directory-heading .eyebrow{color:var(--muted);font-size:12px;font-weight:400;letter-spacing:-.02em}
.directory-heading h2{margin-top:10px;color:var(--ink);font-size:clamp(36px,4vw,56px);font-weight:400;letter-spacing:-.04em}
.directory-heading h2 span{color:var(--ink)}
.directory-list,.directory-item{border-color:var(--line)}
.directory-link{min-height:91px;padding:12px 0 5px;color:#8f8f8f}
.directory-link:before{height:1px;background:var(--blue)}
.directory-link.is-active{color:var(--ink)}
.directory-number{color:var(--blue);font-size:11px;font-weight:400}
.directory-title{font-size:clamp(31px,3.1vw,44px);font-weight:400;letter-spacing:-.04em;line-height:1.08}
.directory-detail{color:var(--muted);font-size:11px;letter-spacing:-.02em}
.directory-arrow{color:var(--blue);font-size:19px}
.directory-bottom a{gap:17px;padding:10px 17px;border:1px solid var(--blue);border-radius:999px;color:var(--blue);font-size:12px;font-weight:400;letter-spacing:-.02em}
.directory-bottom a span{width:auto;height:auto;background:transparent;color:var(--blue);font-size:15px}
.directory-bottom>span,.directory-disclosure{color:var(--muted);font-size:11px;font-weight:400;letter-spacing:-.02em}
.directory-disclosure{border-color:var(--line)}

/* The orbit remains the distinctive interaction; its controls become quiet. */
.practice-section{padding:105px 0 100px;background:var(--paper);color:var(--ink)}
.practice-heading.section-wrap{align-items:baseline}
.practice-heading h2{color:var(--ink);font-size:clamp(27px,2.6vw,38px);font-weight:400;line-height:1.18;letter-spacing:-.04em}
.practice-heading .eyebrow{color:var(--muted);font-size:12px;font-weight:400;letter-spacing:-.02em}
.practice-heading>p{color:var(--muted);font-size:12px}
.practice-card,.practice-card:nth-child(n){border:1px solid rgba(15,16,18,.08);border-radius:12px;box-shadow:none}
.practice-card.is-hovered,.practice-card:focus-within{box-shadow:none;filter:saturate(1.04)}
.practice-art,.practice-art .art,.practice-art .art-photo{border-radius:11px}
.practice-card-caption h3{font-weight:400}
.practice-center-kicker{color:var(--muted);font-weight:400;letter-spacing:-.02em}
.practice-center p{color:var(--ink);font-size:clamp(27px,3.2vw,46px);font-weight:400;letter-spacing:-.04em;line-height:1.25}
.practice-center-pill{min-width:178px;height:42px;border:1px solid var(--blue);background:var(--panel);color:var(--ink);font-size:12px;font-weight:400}
.practice-center-pill strong{font-weight:400}
.practice-center-pill span:first-child{color:var(--blue)}
.practice-center-pill:hover,.practice-center-pill:focus-visible{background:var(--panel);color:var(--blue)}
.practice-counter,.practice-instruction{color:var(--muted);font-size:11px;font-weight:400;letter-spacing:-.02em}
.practice-buttons button{border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font-weight:400}
.practice-buttons button:hover:not(:disabled),.practice-buttons button:focus-visible{border-color:var(--blue);background:var(--panel);color:var(--blue)}
.practice-find{border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.practice-find input{color:var(--ink)}
.practice-find button{border:0;border-left:1px solid var(--line);background:transparent;color:var(--blue);font-weight:400}
.practice-search-status{color:var(--muted)}

/* Work index and concept case studies use the same pale reading canvas. */
.works-page,.detail-page,.about-page{background:var(--paper);color:var(--ink)}
.page-opening{min-height:0;padding-top:112px;padding-bottom:80px;background:var(--paper);color:var(--ink)}
.page-opening::after{display:none}
.page-opening .section-heading .eyebrow,.page-opening .section-heading>span{color:var(--muted)!important}
.page-opening h1{padding:88px 0 96px clamp(0px,2vw,28px);color:var(--ink);font-size:clamp(56px,6vw,82px);font-weight:400;line-height:1.2}
.page-opening h1 em{color:var(--ink)}
.page-opening-bottom{border-color:var(--line);color:var(--muted);font-size:16px}
.page-opening-bottom p{color:var(--muted)!important}
.page-opening-bottom span{color:var(--muted);font-size:12px;font-weight:400;letter-spacing:-.02em}
.archive{padding-top:35px}
.archive-toolbar{align-items:center;border-color:var(--line)}
.filter-list{gap:8px}
.filter{padding:7px 15px;border:1px solid transparent;border-radius:999px;color:var(--muted);font-size:12px;font-weight:400;letter-spacing:-.02em}
.filter:hover,.filter.is-active{border-color:var(--blue);background:transparent;color:var(--blue)}
.filter sup{color:inherit}
.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:90px 34px}
.archive-item,.archive-item:nth-child(4n+2),.archive-item:nth-child(4n+3),.archive-item:nth-child(4n+4),.archive-item:nth-child(5){grid-column:auto;margin:0;padding:0}
.archive-item:nth-child(5){grid-column:1/-1;width:min(700px,100%);justify-self:center}
.archive-image-link,.archive-image-link .art,.archive-image-link .art-photo{overflow:hidden;border-radius:38px;background:var(--panel)}
.archive-image-link{border:1px solid var(--line)}
.archive-meta{grid-template-columns:34px minmax(0,1fr) auto;border-color:var(--line)}
.archive-meta h2{color:var(--ink);font-size:clamp(25px,2.5vw,34px);font-weight:400;line-height:1.2}
.archive-meta span,.archive-meta span:last-child{color:var(--muted);font-size:11px;font-weight:400;letter-spacing:-.02em}
.archive-note{border-color:var(--line);margin-top:125px;padding-bottom:130px}
.archive-note p{max-width:680px;color:var(--ink);font-size:clamp(25px,2.8vw,37px);font-weight:400;line-height:1.5}
.project-view{border:1px solid var(--blue);border-radius:999px;background:var(--panel);color:var(--blue);font-weight:400;letter-spacing:-.02em}

.detail-back{padding-block:47px 24px;color:var(--muted);font-size:12px;font-weight:400;letter-spacing:-.02em}
.detail-back a:hover{color:var(--blue)}
.detail-cover{width:min(var(--page-max-width),calc(100% - 64px));height:min(68svh,740px);min-height:490px;margin:auto;overflow:hidden;border-radius:50px}
.detail-cover-overlay{padding:34px 44px}
.detail-cover-overlay h1{font-size:clamp(56px,8vw,110px);font-weight:400;line-height:1.15}
.detail-cover-overlay>span{font-size:12px;font-weight:400;letter-spacing:-.02em}
.detail-overview{padding-block:135px 120px;background:var(--paper)}
.detail-side dl div,.detail-concept,.detail-applications{border-color:var(--line)}
.detail-side dt,.detail-side dd{color:var(--muted);font-size:13px}
.detail-side dd{color:var(--ink)}
.lead-text{color:var(--ink);font-size:clamp(32px,3.2vw,46px);font-weight:400;line-height:1.4}
.detail-main>p:not(.lead-text),.detail-concept p{color:var(--muted);font-size:16px;line-height:1.8}
.placeholder-disclosure{color:var(--muted);font-size:11px;font-weight:400;letter-spacing:-.02em}
.detail-concept{padding-bottom:135px}
.detail-concept h2,.detail-concept h2 em,.system-intro h2,.system-intro h2 em,.application-title h2,.application-title h2 em{color:var(--ink);font-size:clamp(40px,4.4vw,62px);font-weight:400;line-height:1.3}
.detail-concept>div:last-child{padding-top:110px}
.detail-visual-frame{height:clamp(420px,62vw,810px)}
.detail-visual-caption{color:var(--muted);font-size:11px;letter-spacing:-.02em}
.detail-system.section-wrap{
  width:min(var(--page-max-width),calc(100% - 64px));margin:100px auto;padding:75px;
  border:1px solid rgba(15,16,18,.06);border-radius:var(--radius-large-cards);
  background:var(--panel);color:var(--ink);box-shadow:none;clip-path:none
}
.system-intro p,.system-specs strong{color:var(--muted)}
.system-specs,.system-specs>div{border-color:var(--line)}
.system-specs span{color:var(--muted);font-size:11px;font-weight:400;letter-spacing:-.02em}
.system-specs strong{font-size:clamp(21px,2.2vw,30px);font-weight:400;line-height:1.4}
.detail-applications{padding-bottom:150px}
.next-project{border-top:1px solid var(--line);background:var(--paper);color:var(--ink)}
.next-project>a{max-width:var(--page-max-width);min-height:360px;margin:auto;padding:75px 0 95px}
.next-project .eyebrow{color:var(--muted)}
.next-project a>div{margin-top:96px;border-color:var(--line)}
.next-project h2{font-size:clamp(42px,5vw,70px);font-weight:400;line-height:1.2}
.next-arrow{color:var(--blue)}

/* Resume-based introduction: light cards, restrained blue links. */
.about-opening{padding-top:110px;padding-bottom:140px;background:var(--paper)}
.about-opening h1,.about-opening h1 em{padding:72px 0 65px;color:var(--ink);font-size:clamp(50px,5.7vw,78px);font-weight:400;line-height:1.32}
.about-opening .about-opening-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:65px}
.about-opening .editorial-collage{min-height:570px}
.about-intro>p{color:var(--ink);font-size:clamp(21px,2.1vw,29px);line-height:1.55}
.about-intro>p:nth-of-type(2){color:var(--muted);font-size:16px;line-height:1.85}
.about-intro .text-link{margin-top:35px;border-color:transparent;color:var(--blue)}
.about-philosophy{padding:0 32px 95px;background:var(--paper);color:var(--ink)}
.about-philosophy .section-wrap{width:min(var(--page-max-width),100%);padding:75px;border:1px solid rgba(15,16,18,.06);border-radius:var(--radius-large-cards);background:var(--panel)}
.about-philosophy blockquote,.about-philosophy blockquote em{margin:65px 0;color:var(--ink);font-size:clamp(44px,5.2vw,70px);font-weight:400;line-height:1.32}
.about-philosophy p{color:var(--muted);font-size:14px;letter-spacing:-.02em;text-transform:none}
.about-fields{padding-top:110px;padding-bottom:125px;background:var(--paper);color:var(--ink)}
.about-fields .eyebrow,.about-resume .eyebrow,.about-background .eyebrow{color:var(--muted)!important}
.about-fields h2,.about-fields h2 em{color:var(--ink);font-size:clamp(39px,4.5vw,60px);font-weight:400;line-height:1.32}
.fields-list,.fields-list>div{border-color:var(--line)!important}
.fields-list span{color:var(--muted)!important;font-weight:400}
.fields-list h3{color:var(--ink);font-size:clamp(24px,2.5vw,32px);font-weight:400;line-height:1.4}
.fields-list p{color:var(--muted);font-size:14px;line-height:1.65}
.about-resume.section-wrap,.about-background.section-wrap{
  width:min(var(--page-max-width),calc(100% - 64px));padding:72px;margin:0 auto 95px;
  border:1px solid rgba(15,16,18,.06);border-radius:var(--radius-large-cards);
  background:var(--panel);color:var(--ink);box-shadow:none;clip-path:none
}
.about-resume.section-wrap,.about-background.section-wrap{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:55px}
.about-resume h2,.about-resume h2 em,.about-background h2,.about-background h2 em{color:var(--ink);font-size:clamp(38px,3.9vw,55px);font-weight:400;line-height:1.35}
.about-resume h2,.about-resume h2 em{font-size:clamp(37px,3.45vw,49px)}
.about-resume-meta,.about-background-detail span{color:var(--muted);font-size:11px;font-weight:400;letter-spacing:-.02em}
.about-resume-list,.about-resume-list article,.about-background-detail>div{border-color:var(--line)}
.about-resume h3{color:var(--ink);font-size:clamp(20px,2.1vw,29px);font-weight:400}
.about-resume-list p,.about-background-detail p{color:var(--muted);font-size:15px;line-height:1.75}
.about-background-detail strong{color:var(--ink);font-size:clamp(21px,2.1vw,30px);font-weight:400}
.about-background-detail .text-link{border-color:transparent;color:var(--blue)}

/* A single dark bookend. */
.site-footer{padding:72px max(32px,calc((100% - 1200px)/2)) 32px;background:var(--surface-dark-surface);color:var(--color-pure-white)}
.site-footer::before{display:none!important}
.footer-top,.footer-top .eyebrow,.footer-note{color:#bcbec3;font-size:12px;font-weight:400;letter-spacing:-.02em;text-transform:none}
.site-footer h2,.site-footer h2 em,.footer--thanks h2{margin:95px 0 86px;color:#fdfdfd;font-size:clamp(52px,6.5vw,88px);font-weight:400;line-height:1.22;letter-spacing:-.04em}
.site-footer h2 em{padding-left:0;color:#fdfdfd}
.period{color:#fdfdfd}
.footer-actions{padding-bottom:95px}
.contact-placeholder{border-color:#79b7ff;color:#79b7ff;font-size:clamp(19px,2vw,26px);letter-spacing:-.02em}
.footer-actions p,.footer-bottom{color:#aeb0b7;font-size:12px;letter-spacing:-.02em}
.footer-bottom{border-color:rgba(255,255,255,.22);text-transform:none}
.footer-bottom .wordmark,.footer-bottom>a:last-child{color:#fdfdfd}

@media(max-width:900px){
  .home-intro-grid,.about-opening .about-opening-grid{gap:40px}
  .directory-layout{gap:45px}
  .directory-title{font-size:clamp(30px,3.6vw,38px)}
  .about-resume.section-wrap,.about-background.section-wrap{padding:52px}
  .detail-system.section-wrap{padding:55px}
}
@media(max-width:780px){
  .site-header,body[data-page="home"] .site-header,body[data-page="about"] .site-header{height:80px;top:0;margin-top:0}
  .hero.hero--image-cover{margin-top:26px}
  .home-intro{padding-top:100px;padding-bottom:110px}
  .home-intro-grid{display:flex;flex-direction:column;align-items:stretch;padding-top:55px}
  .home-intro .editorial-collage{min-height:510px;margin-top:5px}
  .project-directory{padding-top:95px}
  .directory-layout{display:block;min-height:0;padding:50px 0 60px}
  .directory-preview{display:none}
  .directory-link{min-height:103px}
  .directory-title{font-size:clamp(28px,5.3vw,41px)}
  .practice-section{padding-top:85px}
  .page-opening{padding-top:95px}
  .archive-grid{gap:75px 22px}
  .archive-meta{grid-template-columns:24px 1fr;gap:8px}
  .archive-meta span:last-child{grid-column:2}
  .detail-cover{min-height:430px}
  .detail-overview,.detail-concept{grid-template-columns:1fr;gap:45px}
  .detail-concept>div:last-child{padding-top:0}
  .detail-system.section-wrap{grid-template-columns:1fr;gap:50px}
  .about-opening{padding-top:95px;padding-bottom:105px}
  .about-opening .about-opening-grid{display:flex;flex-direction:column;align-items:stretch}
  .about-opening .editorial-collage{width:100%;min-height:510px;margin-bottom:0}
  .about-intro{padding-top:10px}
  .about-fields{grid-template-columns:1fr;gap:55px}
  .about-resume.section-wrap,.about-background.section-wrap{grid-template-columns:1fr;gap:45px}
  .site-footer{padding-inline:32px}
}
@media(max-width:600px){
  html{scroll-padding-top:88px}
  :root{--content-gutter:18px}
  .section-wrap,.directory-shell.section-wrap{width:calc(100% - 36px)}
  .site-header,body[data-page="home"] .site-header,body[data-page="about"] .site-header{
    top:0;width:100%;height:80px;margin-top:0;padding:14px 16px 12px;border-radius:0
  }
  .wordmark{gap:5px;font-size:12px;letter-spacing:-.04em}
  .wordmark-mark,body[data-page="home"] .wordmark-mark,body[data-page="about"] .wordmark-mark{font-size:14px}
  .site-nav{gap:11px;font-size:11px;letter-spacing:-.03em}
  .hero.hero--image-cover{width:calc(100% - var(--content-gutter)*2);margin-top:20px}
  .hero-cover-meta{align-items:flex-start;flex-direction:column;gap:12px;padding-top:15px;font-size:11px}
  .hero-cover-meta>div{gap:18px}
  .home-intro{padding-top:90px;padding-bottom:100px}
  .home-intro-grid{padding-top:42px}
  .home-intro h2,.home-intro h2 em{font-size:clamp(35px,8vw,45px)}
  .home-intro-copy>p:not(.eyebrow){font-size:18px}
  .home-intro .editorial-collage{min-height:390px;border-radius:28px}
  .collage-frame{border-radius:8px}
  .project-directory{padding:80px 0 65px}
  .directory-top{display:flex;justify-content:space-between}
  .directory-top p{max-width:190px}
  .directory-top>span{margin-top:0}
  .directory-heading h2{font-size:39px}
  .directory-link{min-height:94px}
  .directory-title{font-size:clamp(25px,6.8vw,34px)}
  .directory-detail{font-size:9px}
  .practice-section{padding-top:75px;padding-bottom:80px}
  .practice-heading.section-wrap{display:flex;flex-wrap:wrap;gap:7px 15px}
  .practice-heading>p{width:100%}
  .practice-center p{font-size:29px}
  .page-opening{padding-top:80px;padding-bottom:55px}
  .page-opening h1{padding:70px 0 75px;font-size:51px}
  .page-opening-bottom p{font-size:13px}
  .archive-toolbar{align-items:flex-start;flex-direction:column;gap:16px}
  .archive-grid{grid-template-columns:1fr;gap:62px}
  .archive-item:nth-child(5){grid-column:1;width:100%}
  .archive-image-link,.archive-image-link .art,.archive-image-link .art-photo{border-radius:27px}
  .archive-meta h2{font-size:27px}
  .archive-note{grid-template-columns:1fr;gap:22px;margin-top:90px;padding-bottom:110px}
  .archive-note p{font-size:26px}
  .detail-cover{width:calc(100% - 20px);height:58svh;min-height:390px;border-radius:28px}
  .detail-cover-overlay{padding:24px}
  .detail-cover-overlay h1{font-size:clamp(42px,10vw,68px)}
  .detail-overview{padding-block:90px}
  .lead-text{font-size:32px}
  .detail-concept h2,.detail-concept h2 em,.system-intro h2,.system-intro h2 em,.application-title h2,.application-title h2 em{font-size:40px}
  .detail-system.section-wrap{width:calc(100% - 36px);margin-block:75px;padding:34px;border-radius:29px}
  .detail-applications{padding-bottom:100px}
  .application-grid{grid-template-columns:1fr;gap:38px}
  .application-grid>div:last-child{margin-top:0}
  .next-project>a{min-height:320px;padding:65px 18px 80px}
  .next-project a>div{grid-template-columns:1fr auto;gap:12px;margin-top:80px}
  .next-project a>div>span:first-child{grid-column:1/-1}
  .next-project h2{font-size:42px}
  .about-opening{padding-top:75px}
  .about-opening h1,.about-opening h1 em{padding:58px 0 52px;font-size:clamp(39px,8.2vw,52px)}
  .about-opening .editorial-collage{min-height:400px;border-radius:28px}
  .about-intro>p{font-size:22px}
  .about-intro>p:nth-of-type(2){font-size:15px}
  .about-philosophy{padding:0 18px 75px}
  .about-philosophy .section-wrap{padding:40px 30px;border-radius:29px}
  .about-philosophy blockquote,.about-philosophy blockquote em{font-size:42px}
  .about-fields{padding-block:85px}
  .about-fields h2,.about-fields h2 em{font-size:42px}
  .fields-list>div{grid-template-columns:27px 1fr;gap:8px 14px}
  .fields-list p{grid-column:2}
  .about-resume.section-wrap,.about-background.section-wrap{width:calc(100% - 36px);margin-bottom:75px;padding:36px 28px;border-radius:29px}
  .about-resume h2,.about-resume h2 em,.about-background h2,.about-background h2 em{font-size:37px}
  .about-resume-meta{flex-wrap:wrap}
  .about-background-detail{grid-template-columns:1fr}
  .site-footer{padding:65px 18px 28px}
  .site-footer h2,.site-footer h2 em,.footer--thanks h2{margin:85px 0 80px;font-size:clamp(47px,10vw,64px)}
  .footer-actions{align-items:flex-start;flex-direction:column;padding-bottom:75px}
  .footer-bottom{grid-template-columns:1fr 1fr;gap:25px}
}
@media(prefers-reduced-motion:reduce){
  .text-link,.site-nav a:after,.hero-cover-meta a,.directory-link,.practice-center-pill{transition:none!important}
}

/* Progressive scroll entrances. Static content remains visible if scripting is unavailable. */
.reveal:not(.will-reveal){opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  .reveal.will-reveal{
    opacity:0;transform:translate3d(0,18px,0);
    transition:opacity .78s cubic-bezier(.22,1,.36,1),transform .78s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--reveal-delay,0ms)
  }
  .reveal.will-reveal.motion-card{transform:translate3d(0,22px,0) scale(.985)}
  .reveal.will-reveal.motion-fade{transform:none}
  .reveal.will-reveal.is-visible{opacity:1;transform:none}
  .hero-cover-image{animation:cover-arrive .9s cubic-bezier(.22,1,.36,1) both}
  .hero-cover-meta{animation:cover-meta-arrive .7s .22s cubic-bezier(.22,1,.36,1) both}
  body[data-page="work"] #main,body[data-page="about"] #main,body[data-page="detail"] #main{animation:page-arrive .42s ease-out both}
  .fields-list>div:nth-child(2),.about-resume-list article:nth-child(2),.system-specs>div:nth-child(2){--reveal-delay:75ms}
  .fields-list>div:nth-child(3),.about-resume-list article:nth-child(3),.system-specs>div:nth-child(3){--reveal-delay:140ms}
  .fields-list>div:nth-child(4){--reveal-delay:205ms}
}
@keyframes cover-arrive{from{opacity:.5;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes cover-meta-arrive{from{opacity:0;transform:translate3d(0,9px,0)}to{opacity:1;transform:none}}
@keyframes page-arrive{from{opacity:.65}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .reveal.will-reveal{opacity:1;transform:none;transition:none!important}
  .hero-cover-image,.hero-cover-meta,body #main{animation:none!important}
}

/* Video samples align with the eight placeholders in the supplied artwork. */
.case-study-motion {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.case-study-motion__video {
  position: absolute;
  display: block;
  max-width: none;
  margin: 0;
  object-fit: contain;
  background: #09071b;
  pointer-events: auto;
}
.case-study-motion__video:focus-visible {
  outline: 3px solid #0071e3;
  outline-offset: 2px;
}