/* ============================================================
   EDDIE WANG — PRIVATE DESIGN ARCHIVE
   Black / white / silver-gray. Editorial. Restrained.
   ONE TYPEFACE — HOST GROTESK — used everywhere. Hierarchy is
   built only through weight, size, spacing, opacity, position.
   ALL VISIBLE TEXT IS UPPERCASE — enforced in markup and
   reinforced here as a safety net via text-transform.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');

:root{
  --bg:#070707;
  --surface:#0c0c0c;
  --fg:#f3f3f1;
  --grey:#8d8d8d;
  --grey-dim:#5a5a5a;
  --line:#1f1f1f;

  /* single typeface for the whole site — only weight/size/spacing vary */
  --font:'Host Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --serif:var(--font);
  --sans:var(--font);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-transform:uppercase; /* safety net: every visible word stays uppercase */
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}

/* Header vignette — dark gradient on all pages */
body::before{
  content:'';
  position:fixed;
  top:0;left:0;right:0;
  height:160px;
  background:linear-gradient(to bottom,rgba(5,5,5,0.55) 0%,transparent 100%);
  pointer-events:none;
  z-index:999;
  transition:height 0.5s cubic-bezier(.4,0,.2,1), opacity 0.5s cubic-bezier(.4,0,.2,1);
}
body.header-scrolled::before{
  height:48px;
  opacity:0.5;
}
ul{list-style:none;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}

/* ---------- NAV ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 5vw;
  mix-blend-mode:difference;
}
.wordmark{
  font-family:var(--font);font-size:13px;letter-spacing:.14em;font-weight:600;opacity:.9;
}
nav ul{display:flex;gap:38px;}
nav a{
  font-size:10px;font-weight:500;letter-spacing:.26em;color:var(--fg);
  position:relative;padding-bottom:4px;
}
nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--fg);
  transition:width .4s ease;
}
nav a:hover::after{width:100%;}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:1100;}
.nav-toggle span{width:20px;height:1px;background:var(--fg);display:block;}

@media (max-width:760px){
  nav ul{
    position:fixed;top:0;right:0;height:100vh;width:78vw;background:#000;
    flex-direction:column;justify-content:center;align-items:flex-start;gap:32px;padding:0 44px;
    transform:translateX(100%);transition:transform .4s ease;mix-blend-mode:normal;
  }
  nav ul.open{transform:translateX(0);}
  .nav-toggle{display:flex;}
}

/* ---------- SECTION SHARED ---------- */
.section-label{
  font-size:10.5px;font-weight:500;letter-spacing:.32em;color:var(--grey);
  padding:0 5vw;margin-bottom:50px;
}
.section-label span{border-bottom:1px solid var(--line);display:inline-block;padding-bottom:10px;}

/* ---------- INDEX (landing composition) ---------- */
#work{padding:0;background:var(--bg);}
.index-grid{
  display:grid;
  grid-template-columns:3fr 2fr 2fr;
  grid-template-rows:1fr 1fr;
  min-height:100vh;
  gap:1px;background:var(--line);
}
.index-block{
  position:relative;display:block;overflow:hidden;background:#000;
}
.b-ysl{grid-column:1;grid-row:1 / 3;}
.b-rr{grid-column:2 / 4;grid-row:1;}
.b-jag{grid-column:2;grid-row:2;}
.b-cit{grid-column:3;grid-row:2;}

.block-media{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#3a3a3a,#0a0a0a 55%,#1b1b1b);
  filter:grayscale(1) brightness(.48) contrast(1.05);
  transition:filter .75s ease;
}
.block-media svg{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52%;color:#c6c6c6;opacity:.45;transition:opacity .75s ease;
}
.block-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.index-block:hover .block-media{filter:grayscale(.65) brightness(.78) contrast(1.05);}
.index-block:hover .block-media svg{opacity:.85;}

/* real photography: quiet and desaturated at rest, hover reveals subtle color */
.block-media.has-photo{filter:grayscale(.92) brightness(.5) contrast(1.05);}
.index-block:hover .block-media.has-photo{filter:grayscale(.35) brightness(.82) contrast(1.05);}

.block-content{position:absolute;left:0;bottom:0;right:0;z-index:2;}
.block-num{display:block;font-size:11px;font-weight:500;letter-spacing:.34em;color:var(--grey);opacity:.85;margin-bottom:16px;}
.block-title{
  font-family:var(--font);font-weight:800;letter-spacing:-.01em;line-height:1;
}
.block-desc{
  font-size:10.5px;font-weight:300;letter-spacing:.18em;color:#d4d4d4;margin-top:16px;max-width:360px;line-height:1.8;
  opacity:0;transform:translateY(8px);transition:opacity .65s ease, transform .65s ease;
}
.index-block:hover .block-desc{opacity:.85;transform:translateY(0);}
.block-enter{
  position:absolute;right:30px;bottom:30px;z-index:2;
  font-size:10px;font-weight:500;letter-spacing:.28em;color:var(--fg);
  opacity:0;transform:translateY(6px);transition:opacity .6s ease .08s, transform .6s ease .08s;
}
.index-block:hover .block-enter{opacity:.9;transform:translateY(0);}
.block-line{
  position:absolute;left:0;bottom:0;height:1px;width:0;background:rgba(255,255,255,.5);
  transition:width .8s ease;z-index:2;
}
.index-block:hover .block-line{width:100%;}

.b-ysl .block-content{padding:0 0 60px 60px;}
.b-ysl .block-title{font-size:clamp(42px,6.4vw,92px);font-weight:800;}
.b-rr .block-content{padding:0 0 46px 46px;}
.b-rr .block-title{font-size:clamp(28px,4.2vw,50px);font-weight:700;}
.b-jag .block-content,.b-cit .block-content{padding:0 0 30px 30px;}
.b-jag .block-title,.b-cit .block-title{font-size:clamp(18px,2.4vw,27px);font-weight:600;}
.b-jag .block-desc,.b-cit .block-desc{max-width:240px;}

@media (max-width:900px){
  .index-grid{grid-template-columns:1fr;grid-template-rows:none;min-height:auto;gap:2px;}
  .b-ysl,.b-rr,.b-jag,.b-cit{grid-column:1;grid-row:auto;}
  .b-ysl{min-height:64vh;}
  .b-rr{min-height:48vh;}
  .b-jag,.b-cit{min-height:38vh;}
  .block-desc{opacity:.7 !important;transform:none !important;}
  .block-enter{display:none;}
}

/* ---------- ARTWORKS — ARCHIVE FILM STRIP ---------- */
#artworks { padding: 260px 0 280px; background: var(--bg); text-align: center; }
#artworks .section-label { padding: 0; margin-bottom: 50px; display: flex; justify-content: center; }
#artworks .strip-view-all-wrap { display: flex; justify-content: center; }

/* Curtain wipe reveal */
.strip-curtain {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 2;
  pointer-events: none;
  transform: translateX(0);
  transition: transform 1.6s cubic-bezier(.77, 0, .175, 1);
}
.strip-outer.curtain-open .strip-curtain {
  transform: translateX(101%);
}

.strip-outer {
  position: relative;
  overflow: hidden;
  height: 360px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.strip-track {
  display: flex;
  align-items: stretch;
  height: 100%;
  will-change: transform;
}

.strip-item {
  flex: 0 0 auto;
  height: 100%;
  margin-right: 2px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.strip-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) brightness(.52) contrast(1.05);
  transition: filter .72s ease, transform .72s ease;
}

.strip-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #1c1c1c, #080808 55%, #131313);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1) brightness(.52) contrast(1.05);
  transition: filter .72s ease, transform .72s ease;
}
.strip-placeholder svg {
  width: 40%;
  color: #999;
  opacity: .3;
}

.strip-item:hover img,
.strip-item:hover .strip-placeholder {
  filter: grayscale(.1) brightness(.88) contrast(1.05);
  transform: scale(1.03);
}

@media (max-width: 760px) {
  .strip-outer { height: 220px; }
}

/* ---------- MUSEUM FULLSCREEN OVERLAY ---------- */
.art-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(4,4,4,.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.art-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease;
}

.art-overlay-close {
  position: absolute;
  top: 36px;
  right: 5vw;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--grey);
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0 0 6px;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}
.art-overlay-close:hover { color: var(--fg); border-color: var(--fg); }

.art-overlay-media {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 62vh;
  max-width: min(74vw, 860px);
  transform: translateY(16px);
  transition: transform .6s cubic-bezier(.19,1,.22,1);
}
.art-overlay.is-open .art-overlay-media { transform: translateY(0); }

.art-overlay-media img {
  max-height: 62vh;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(.08) brightness(.92);
}

.overlay-placeholder {
  height: 62vh;
  background: linear-gradient(160deg, #1e1e1e, #080808 55%, #131313);
  display: flex;
  align-items: center;
  justify-content: center;
}
.overlay-placeholder svg {
  width: 36%;
  color: #aaa;
  opacity: .3;
}

.art-overlay-info {
  margin-top: 34px;
  text-align: center;
  max-width: min(74vw, 680px);
  padding: 0 5vw;
}
.art-overlay-title {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--fg);
  margin-bottom: 10px;
}
.art-overlay-medium {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  color: var(--grey);
  margin-bottom: 18px;
}
.art-overlay-desc {
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--grey-dim);
  line-height: 1.88;
  max-width: 520px;
  margin: 0 auto;
}

@media (max-width: 760px) {
  .art-overlay-media { max-height: 48vh; max-width: 90vw; }
  .overlay-placeholder { height: 48vh; }
  .art-overlay-close { top: 24px; }
  .art-overlay-info { margin-top: 24px; }
}

/* ---------- VIEW ALL button ---------- */
.strip-view-all-wrap {
  text-align: center;
  padding: 30px 0 0;
}
.strip-view-all {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;
  color: var(--grey);
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0 0 7px;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}
.strip-view-all:hover { color: var(--fg); border-color: var(--fg); }

/* ---------- VIEW ALL grid overlay ---------- */
.art-grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 4500;
  background: rgba(4,4,4,.97);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.art-grid-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease;
}
.art-grid-header {
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 28px 5vw 20px;
  background: rgba(4,4,4,.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.art-grid-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;
  color: var(--grey);
}
.art-grid-close {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--grey);
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0 0 5px;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}
.art-grid-close:hover { color: var(--fg); border-color: var(--fg); }

/* Justified row layout — JS sets exact pixel width/height per item.
   Each row shares a uniform height; widths scale from each image's
   natural aspect ratio. No cropping, no gaps, full color. */
.art-grid-body {
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
  padding: 24px 5vw 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
}
.art-grid-item {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  flex: 0 0 auto; /* JS sets exact width + height */
}
.art-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills the JS-calculated container exactly — minimal/no crop */
  display: block;
  transition: opacity .35s ease;
}
.art-grid-item:hover img { opacity: .82; } /* subtle, no color change */

/* ---------- PROJECT SCROLL (contained vertical) ---------- */
/* Used by Rolls-Royce Ethereal and any project with continuous image scroll.
   Images sit in a centered column — not edge-to-edge — for comfortable
   viewing and to avoid resolution strain on large monitors. */

/* Centered column wrapper: max ~1040px, comfortable side breathing room */
.scroll-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 60px);
  box-sizing: border-box;
}

.scroll-intro {
  padding-top: 190px; /* clear the fixed header */
  padding-bottom: 72px;
}
.scroll-intro h1 {
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -.01em;
  font-size: clamp(38px, 7.2vw, 92px);
  line-height: 1.04;
  max-width: 820px;
  margin-bottom: 18px;
}

/* Museum-style info tag — minimal, 2 fields, thin top rule */
.museum-tag {
  display: flex;
  gap: 40px;
  margin: 26px 0 46px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  color: var(--grey);
}

.scroll-body-text {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.95;
  letter-spacing: .01em;
  color: #cfcfcf;
  max-width: 600px;
}

/* Contained image stack */
.scroll-images {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scroll-images img {
  width: 100%;
  height: auto;
  display: block;
}
.scroll-images .img-row {
  display: flex;
  gap: 6px;
}
.scroll-images .img-row img {
  flex: 1;
  width: 0;
  height: auto;
}
.scroll-images.seamless {
  gap: 0;
  font-size: 0;
  line-height: 0;
}
.scroll-images .img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.scroll-images .img-grid .img-cell {
  background: #fff;
  display: flex;
  align-items: flex-start;
}
.scroll-images .img-grid .img-cell img {
  width: 100%;
  height: auto;
  display: block;
}
.scroll-images .img-grid img {
  width: 100%;
  height: auto;
  display: block;
}

/* Specs + next-project footer area */
.scroll-end {
  padding: 90px 0 110px;
}
.scroll-end .scroll-specs-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .26em;
  color: var(--grey);
  margin-bottom: 24px;
}
.scroll-end .next-project {
  margin-top: 80px;
}

@media (max-width: 680px) {
  .scroll-intro { padding-top: 140px; padding-bottom: 56px; }
  .scroll-end { padding: 70px 0 80px; }
}

/* ---------- PROFILE ---------- */
#profile{padding:60px 5vw 170px;background:var(--bg);display:flex;flex-direction:column;align-items:center;text-align:center;}
.profile-wrap{max-width:760px;width:100%;}
.profile-copy{
  font-family:var(--font);font-weight:300;font-size:clamp(17px,2.1vw,23px);line-height:1.85;
  letter-spacing:.01em;color:#d6d6d6;margin-top:28px;
}

/* ---------- CONTACT ---------- */
#contact{padding:60px 5vw 140px;background:var(--bg);display:flex;flex-direction:column;align-items:center;text-align:center;}
.contact-list{display:flex;flex-wrap:wrap;gap:50px;margin-top:28px;justify-content:center;}
.contact-link{
  font-size:11px;font-weight:500;letter-spacing:.24em;color:var(--fg);
  border-bottom:1px solid var(--line);padding-bottom:10px;position:relative;
}
.contact-link::after{
  content:'';position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--fg);
  transition:width .4s ease;
}
.contact-link:hover::after{width:100%;}

@media (max-width:680px){
  .contact-list{gap:30px;}
}

/* ---------- RESUME UNFOLD ---------- */
.resume-section {
  height: 0;
  overflow: hidden;
  transition: height 1.5s cubic-bezier(.4,0,.2,1);
}
.resume-inner {
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  padding: 88px 5vw 140px;
}
.resume-contact-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 64px;
  padding: 56px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
  font-size: 11.5px;
  letter-spacing: .20em;
  color: var(--grey);
  text-align: center;
}
.resume-block {
  display: block;
  padding: 56px 0;
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.resume-block.in {
  opacity: 1;
  transform: none;
}
/* Label becomes a full-width section header with rule */
.resume-block-label {
  display: block;
  font-size: 10px;
  letter-spacing: .32em;
  color: var(--grey-dim);
  margin-bottom: 32px;
}
.resume-entry + .resume-entry { margin-top: 52px; }
.resume-company {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  margin-bottom: 10px;
}
.resume-sub {
  font-size: 12px;
  letter-spacing: .13em;
  color: var(--grey);
  margin-bottom: 4px;
}
.resume-date {
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--grey-dim);
  margin-bottom: 24px;
  margin-top: 12px;
}
.resume-body {
  font-size: 12px;
  letter-spacing: .06em;
  line-height: 2.2;
  color: var(--grey);
}
.resume-body p + p { margin-top: 18px; }
.resume-body .sep { color: var(--grey-dim); }
.resume-list {
  font-size: 12px;
  letter-spacing: .18em;
  line-height: 2.6;
  color: var(--fg);
}
@media (max-width: 680px) {
  .resume-inner { padding: 60px 5vw 90px; }
}

/* ---------- PAGE TRANSITION VEIL ---------- */
#pageVeil{
  position:fixed;inset:0;
  background:#070707;
  z-index:9998;
  opacity:0;
  pointer-events:none;
  transition:opacity .8s cubic-bezier(.4,0,.2,1);
}

/* ---------- FOOTER ---------- */
footer{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:44px 5vw;
  border-top:1px solid var(--line);
  background:var(--bg);
}
.footer-sig-link{
  justify-self:center;
  line-height:0;
  cursor:pointer;
}
.footer-sig{
  display:block;width:200px;opacity:.88;
  filter:brightness(1.08);
  transition:opacity .4s ease;
}
.footer-sig-link:hover .footer-sig{ opacity:.55; }
.footer-left{
  font-size:10px;font-weight:400;color:var(--grey);letter-spacing:.18em;
  text-align:left;
}
.footer-right{
  font-size:10px;font-weight:400;color:var(--grey);letter-spacing:.18em;
  text-align:right;
}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ============================================================
   PROJECT DETAIL PAGE
   ============================================================ */
.project-hero{padding:190px 5vw 0;background:var(--bg);}
.breadcrumb{
  display:flex;align-items:center;gap:14px;font-size:10px;font-weight:400;letter-spacing:.24em;color:var(--grey);margin-bottom:50px;
}
.breadcrumb a{border-bottom:1px solid var(--grey);padding-bottom:2px;}
.breadcrumb a:hover{color:var(--fg);border-color:var(--fg);}
.project-hero h1{
  font-family:var(--font);font-weight:800;letter-spacing:-.01em;font-size:clamp(38px,7.2vw,92px);line-height:1.04;max-width:980px;margin-bottom:18px;
}
.project-tagline{
  font-size:11px;font-weight:300;letter-spacing:.2em;color:var(--grey);max-width:680px;margin-bottom:54px;
}
.project-meta-row{
  display:flex;gap:0;border-top:1px solid var(--line);max-width:780px;flex-wrap:wrap;margin-bottom:90px;
}
.project-meta-row div{font-size:10px;font-weight:400;color:var(--grey);letter-spacing:.18em;padding:18px 40px 0 0;flex:1;min-width:150px;}
.project-meta-row div b{display:block;color:var(--fg);font-family:var(--font);font-size:16px;font-weight:600;letter-spacing:0;margin-bottom:6px;}

.project-figure{
  aspect-ratio:16/9;width:100%;position:relative;overflow:hidden;
  background:linear-gradient(155deg,#3a3a3a,#0a0a0a 60%,#1b1b1b);
  display:flex;align-items:center;justify-content:center;margin-bottom:8px;
}
.project-figure svg{width:44%;color:#c6c6c6;}
.project-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.figure-cap{font-size:10px;font-weight:400;letter-spacing:.16em;color:var(--grey);margin-bottom:120px;}

.project-content{display:grid;grid-template-columns:1.3fr .7fr;gap:90px;margin-bottom:130px;}
.project-content .col-desc p{font-size:14.5px;font-weight:300;line-height:1.95;letter-spacing:.01em;color:#cfcfcf;margin-bottom:24px;max-width:560px;}
.project-content .col-specs{border-left:1px solid var(--line);padding-left:50px;}
.project-content .col-specs h4{font-size:10px;font-weight:500;letter-spacing:.26em;color:var(--grey);margin-bottom:24px;}
.spec-row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:11.5px;font-weight:400;letter-spacing:.05em;}
.spec-row span:first-child{color:var(--grey);font-size:10px;font-weight:400;letter-spacing:.16em;}
.spec-row:last-child{border-bottom:none;}

.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-bottom:160px;}
.project-gallery .gal-item{aspect-ratio:4/5;background:linear-gradient(155deg,#3a3a3a,#0a0a0a 60%,#1b1b1b);display:flex;align-items:center;justify-content:center;position:relative;}
.project-gallery .gal-item svg{width:48%;color:#c6c6c6;}
.project-gallery .gal-item span.frame-label{position:absolute;bottom:16px;right:16px;font-size:9.5px;font-weight:400;letter-spacing:.16em;color:rgba(255,255,255,.55);}

.next-project{
  border-top:1px solid var(--line);padding-top:40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;
}
.next-project a.next-link{display:flex;align-items:center;gap:24px;}
.next-project .next-thumb{width:90px;aspect-ratio:5/4;background:linear-gradient(155deg,#3a3a3a,#0a0a0a 60%,#1b1b1b);flex:0 0 auto;}
.next-project .next-text{display:flex;flex-direction:column;gap:6px;}
.next-project .next-label{font-size:10px;font-weight:400;letter-spacing:.22em;color:var(--grey);}
.next-project .next-title{font-family:var(--font);font-weight:700;font-size:22px;}
.next-project .back-link{font-size:10px;font-weight:500;letter-spacing:.22em;color:var(--grey);border-bottom:1px solid var(--line);padding-bottom:4px;}
.next-project .back-link:hover{color:var(--fg);border-color:var(--fg);}

@media (max-width:900px){
  .project-content{grid-template-columns:1fr;gap:50px;}
  .project-content .col-specs{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:30px;}
  .project-gallery{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .project-hero{padding-top:140px;}
}