.project-page-body { background: var(--paper); }
.project-site-header { position: relative; display: flex; align-items: center; justify-content: space-between; padding-top: 72px; padding-bottom: 32px; }
.back-link { border-bottom: 1px solid var(--ink); padding-bottom: 5px; font: 11px var(--mono); text-transform: uppercase; }
.back-link:hover, .back-link:focus-visible { color: var(--orange); border-color: var(--orange); }
.case-hero { display: grid; grid-template-columns: 1.03fr .97fr; gap: 7%; align-items: stretch; padding-top: 72px; padding-bottom: 105px; }
.case-hero-copy { display: flex; flex-direction: column; justify-content: center; }
.case-kicker { margin: 0; color: var(--blue); font: 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.case-hero h1 { max-width: 760px; margin: 24px 0 22px; font: 600 clamp(70px, 11vw, 150px)/.8 var(--display); letter-spacing: -.105em; }
.case-hero h1 i { color: var(--orange); font-style: normal; }
.case-lede { max-width: 570px; margin: 0; color: #4f5a55; font-size: 19px; line-height: 1.5; }
.case-meta { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 39px; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }
.case-meta strong { display: block; margin-top: 7px; color: var(--ink); font-weight: 400; }
.case-board { position: relative; display: flex; min-height: 430px; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.case-board-head, .case-board-foot { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line-dark); padding: 13px 15px; color: rgba(232,235,230,.72); font: 10px var(--mono); text-transform: uppercase; }
.case-board-foot { border-top: 1px solid var(--line-dark); border-bottom: 0; }
.case-board-main { padding: 35px 28px; }.case-board-main p { margin: 0 0 14px; color: var(--orange); font: 10px var(--mono); text-transform: uppercase; }.case-board-main strong { display: block; max-width: 350px; color: var(--paper); font: 500 clamp(36px, 5vw, 68px)/.86 var(--display); letter-spacing: -.09em; }.case-board-main span { display: block; max-width: 290px; margin-top: 22px; color: rgba(232,235,230,.68); font-size: 14px; }
.case-stack { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 36px; }.case-stack .stack-item { color: var(--muted); }.case-board .case-stack { padding: 0 28px 28px; }.case-board .stack-item { color: var(--paper); }.case-board .stack-mark { border-color: rgba(232,235,230,.4); }
.case-intro { display: grid; grid-template-columns: .35fr 1.1fr .7fr; gap: 40px; border-top: 1px solid var(--line); padding-top: 72px; padding-bottom: 95px; }.case-intro h2 { margin: 0; font: 500 clamp(32px, 4.3vw, 62px)/.93 var(--display); letter-spacing: -.08em; }.case-intro p { margin: 0; color: var(--muted); font-size: 14px; }.case-intro .section-tag { margin-top: 5px; }
.screen-story { padding-bottom: 125px; }.screen-story-head { display: flex; align-items: end; justify-content: space-between; gap: 36px; border-top: 1px solid var(--line); padding-top: 22px; margin-bottom: 48px; }.screen-story-head h2 { max-width: 620px; margin: 15px 0 0; font: 500 clamp(37px, 5vw, 72px)/.88 var(--display); letter-spacing: -.09em; }.screen-story-head p { max-width: 275px; margin: 0 0 3px; color: var(--muted); font-size: 14px; }
.screen-list { display: grid; gap: 82px; }.screen-record { margin: 0; }.screen-frame { position: relative; overflow: hidden; border: 1px solid var(--ink); background: #0b0d0f; }.screen-frame::before { position: absolute; z-index: 1; top: 0; right: 0; left: 0; height: 29px; border-bottom: 1px solid rgba(232,235,230,.18); background: rgba(17,20,22,.88); content: ""; }.screen-frame::after { position: absolute; z-index: 2; top: 10px; left: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 12px 0 0 var(--blue), 24px 0 0 #a9bd97; content: ""; }.screen-frame img { display: block; width: 100%; height: auto; padding-top: 29px; background: #101315; }.screen-record figcaption { display: grid; grid-template-columns: 55px 1fr 1fr; gap: 20px; border-bottom: 1px solid var(--line); padding: 17px 0 19px; }.screen-number { color: var(--orange); font: 11px var(--mono); }.screen-record figcaption strong { font: 500 24px/.95 var(--display); letter-spacing: -.05em; }.screen-record figcaption span { color: var(--muted); font-size: 14px; }
.case-close { display: grid; grid-template-columns: 1fr .75fr; gap: 13%; background: var(--blue); color: var(--paper); padding-top: 90px; padding-bottom: 30px; }.case-close h2 { margin: 18px 0 0; font: 500 clamp(48px, 6.5vw, 92px)/.88 var(--display); letter-spacing: -.09em; }.case-close p { max-width: 350px; margin: 48px 0 25px; color: rgba(232,235,230,.84); font-size: 17px; }.case-close .button-light { display: inline-flex; }.case-close .closing-rule { grid-column: 1 / -1; }
.theme-orange .case-board { background: var(--orange); color: var(--ink); }.theme-orange .case-board-head, .theme-orange .case-board-foot { border-color: rgba(17,20,22,.25); color: rgba(17,20,22,.72); }.theme-orange .case-board-main p { color: var(--ink); }.theme-orange .case-board-main strong { color: var(--ink); }.theme-orange .case-board-main span { color: rgba(17,20,22,.72); }.theme-orange .case-board .stack-item { color: var(--ink); }.theme-orange .case-board .stack-mark { border-color: rgba(17,20,22,.45); }
.theme-blue .case-board { background: var(--blue); }.theme-blue .case-board-head, .theme-blue .case-board-foot { border-color: rgba(232,235,230,.35); }.theme-blue .case-board-main p { color: var(--paper); }
@media (max-width: 780px) { .project-site-header { width: calc(100% - 36px); padding-top: 58px; }.case-hero { display: block; padding-top: 46px; padding-bottom: 75px; }.case-hero h1 { font-size: clamp(70px, 20vw, 120px); }.case-board { min-height: 370px; margin-top: 58px; }.case-intro { display: block; padding-top: 58px; padding-bottom: 78px; }.case-intro h2 { margin: 22px 0; }.screen-story-head { display: block; margin-bottom: 34px; }.screen-story-head p { margin-top: 22px; }.screen-list { gap: 56px; }.screen-record figcaption { grid-template-columns: 34px 1fr; gap: 10px; }.screen-record figcaption span { grid-column: 2; }.case-close { display: block; padding-top: 72px; }.case-close p { margin-top: 38px; }.case-close .closing-rule { margin-top: 75px; } }
@media (prefers-reduced-motion: reduce) { .screen-frame img { scroll-behavior: auto; } }