@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&family=ZCOOL+QingKe+HuangYou&display=swap');

@font-face { font-family: 'Director'; src: url('../assets/fonts/Director-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Anthony'; src: url('../assets/fonts/Anthony.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Geist Pixel Circle'; src: url('../assets/fonts/GeistPixel-Circle.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }

:root {
  --paper: #f1efe8;
  --ink: #151515;
  --orange: #e9572b;
  --line: rgba(21, 21, 21, .25);
  --sans: 'Director', Arial, sans-serif;
  --display: 'Geist Pixel', Arial, sans-serif;
  --mono: 'DM Mono', monospace;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(.22, .8, .28, 1); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }

.case-header { display: flex; justify-content: space-between; align-items: center; padding: 25px 4vw; border-bottom: 1px solid var(--line); font: 10px var(--mono); text-transform: uppercase; }
.case-brand { font-family: 'ZCOOL QingKe HuangYou', var(--mono); font-size: 25px; letter-spacing: .12em; }
.back-link { border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.back-link:hover { color: var(--orange); border-color: var(--orange); }
.case-top { display: flex; justify-content: space-between; padding: 25px 4vw 0; font: 10px var(--mono); text-transform: uppercase; }

.case-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: end; padding: 95px 8vw 85px; }
.case-hero h1 { margin: 0; font-size: clamp(70px, 11vw, 170px); line-height: .82; letter-spacing: -.09em; font-weight: 500; }
.case-hero h1 em { color: var(--orange); font-family: Georgia, serif; font-weight: 400; }
.case-lede { max-width: 330px; margin: 0 0 8px; font-size: 19px; line-height: 1.12; letter-spacing: -.04em; }
.case-hero-meta { margin-top: 38px; font: 10px/1.5 var(--mono); text-transform: uppercase; opacity: .65; }
.case-visit { display: inline-flex; margin-top: 28px; padding: 13px 17px; background: var(--ink); color: var(--paper); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .03em; transition: background .2s, color .2s; }
.case-visit:hover { background: var(--orange); color: var(--ink); }

.case-art { position: relative; height: min(52vw, 650px); margin: 0 4vw; overflow: hidden; }
.case-art::before, .case-art::after { content: ''; position: absolute; }
.case-art::before { inset: 0; background: var(--orange); }
.case-art::after { top: 15%; right: 18%; width: 32%; aspect-ratio: 1; border-radius: 50%; background: var(--paper); box-shadow: -130px 270px 0 rgba(21, 21, 21, .12); }
.case-art.noma::before { background: #d8d5c7; }
.case-art.noma::after { background: var(--orange); box-shadow: -150px 250px 0 var(--ink); }
.case-art.rivage::before { background: #7eaaa8; }
.case-art.rivage::after { background: #142725; box-shadow: -180px 290px 0 rgba(241, 239, 232, .65); }
.case-art.meteore::before { background: #c88a67; }
.case-art.meteore::after { background: #9d6049; box-shadow: -150px 220px 0 var(--paper); }
.case-art-label { position: absolute; z-index: 1; left: 5%; bottom: 6%; font-size: clamp(42px, 8vw, 120px); line-height: .8; letter-spacing: -.09em; }
.case-art-index { position: absolute; z-index: 1; top: 5%; left: 5%; font: 11px var(--mono); }

.case-details { display: grid; grid-template-columns: 1fr 1.1fr; gap: 8vw; padding: 120px 8vw; border-top: 1px solid var(--line); }
.case-details h2 { margin: 0; font-size: clamp(42px, 6vw, 82px); line-height: .88; letter-spacing: -.08em; font-weight: 500; }
.case-details h2 em { color: var(--orange); font-family: Georgia, serif; font-weight: 400; }
.case-details-copy { max-width: 480px; }
.case-details-copy > p { margin: 0 0 50px; font-size: 22px; line-height: 1.15; letter-spacing: -.04em; }
.detail-list { display: grid; grid-template-columns: 1fr 1fr; padding-top: 12px; border-top: 1px solid var(--line); font: 10px/1.5 var(--mono); text-transform: uppercase; }
.detail-list span:nth-child(even) { text-align: right; }

.case-footer { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 25px 4vw; border-top: 1px solid var(--line); font: 10px var(--mono); text-transform: uppercase; }
.case-footer a { border-bottom: 1px solid transparent; }
.case-footer a:hover { color: var(--orange); border-color: var(--orange); }

@media (max-width: 700px) {
  .case-header { padding: 20px; }
  .case-top { padding: 20px 20px 0; }
  .case-hero { display: block; padding: 70px 20px 55px; }
  .case-hero h1 { font-size: clamp(68px, 20vw, 110px); }
  .case-lede { margin-top: 45px; }
  .case-art { height: 90vw; margin: 0 20px; }
  .case-details { display: block; padding: 80px 20px; }
  .case-details-copy { margin-top: 50px; }
  .case-details-copy > p { font-size: 20px; }
  .case-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; line-height: 1.4; }
  .case-footer a:nth-child(3), .case-footer span:last-child { text-align: right; }
}
body { overflow-x: hidden; }
.title-char { display: inline-block; opacity: 0; transform: translateY(.18em); animation: title-char-in .45s cubic-bezier(.22, .8, .28, 1) var(--title-delay) both; animation-play-state: paused; }
.is-title-visible .title-char { animation-play-state: running; }
@keyframes title-char-in { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .title-char { opacity: 1; transform: none; animation: none; } }
a,button { transition: color .35s cubic-bezier(.22,.8,.28,1), background-color .35s cubic-bezier(.22,.8,.28,1), border-color .35s cubic-bezier(.22,.8,.28,1), opacity .35s cubic-bezier(.22,.8,.28,1); }
.case-visit { transition: transform .45s cubic-bezier(.22,.8,.28,1), color .35s cubic-bezier(.22,.8,.28,1), background-color .35s cubic-bezier(.22,.8,.28,1); }
.case-visit:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { a,button,.case-visit { transition: none; } }
.case-hero h1, .case-details h2, .case-art-label { font-family: var(--display); }
.case-brand { font-family: 'Anthony', var(--sans); letter-spacing: .04em; }
.case-hero h1, .case-hero h1 em, .case-details h2, .case-details h2 em, .case-art-label { font-family: 'Geist Pixel Circle', sans-serif; font-weight: 400; font-style: normal; text-transform: none; }
.case-footer h3 { font-family: 'Geist Pixel', sans-serif; font-weight: 400; font-style: normal; text-transform: none; }
.case-hero h1 em, .case-details h2 em { color: inherit; }
@media (min-width: 701px) { .case-hero h1 { font-size: clamp(60px, 9vw, 135px); } .case-details h2 { font-size: clamp(38px, 5vw, 68px); } }
@media (max-width: 700px) { .case-hero h1 { font-size: clamp(58px, 17vw, 94px); } .case-details h2 { font-size: clamp(38px, 15vw, 68px); } }