.project-stream{background:#fff;color:#111}
.brand-films-section{max-width:1450px;margin:0 auto;border-top:1px solid #111;padding-top:6vh}
.brand-films-heading{font:300 clamp(24px,3vw,42px)/1 'Times New Roman',Georgia,serif;text-align:center;margin:0;padding:4vh 5vw 0}
.brand-films-section .brand-films-heading{padding-top:0}
.brand-film .hero-media video{aspect-ratio:16/9}
.project-case{max-width:1450px;margin:0 auto;padding:10vh 4vw 12vh;scroll-margin-top:2rem}
.project-case+.project-case{border-top:1px solid #111}
.project-case .project-title{font:300 clamp(64px,11vw,170px)/.85 Arial,Helvetica,sans-serif;letter-spacing:-.075em;margin:0 0 4vh}
.project-case .project-title em{font-style:normal;font-weight:300}
.project-case .intro{max-width:620px;font:300 clamp(20px,2.4vw,32px)/1.18 Arial,Helvetica,sans-serif;letter-spacing:-.035em;margin:0 0 7vh}
.project-case .hero-media{margin:0}.project-case .hero-media img,.project-case .hero-media video{display:block;width:100%;max-height:80vh;object-fit:contain;background:#000}.project-case .hero-media figcaption{font:12px Arial,sans-serif;padding-top:12px}
.project-case .body-grid{display:grid;grid-template-columns:1fr 2fr;gap:7vw;margin-top:8vh;padding-top:20px;border-top:1px solid #111}
.project-case .body-grid h3{font:400 14px Arial,sans-serif;margin:0}.project-case .body-grid dl{margin-top:28px}.project-case .body-grid dt{font:12px Arial,sans-serif;color:#666;margin-top:25px}.project-case .body-grid dd{font:15px/1.4 Arial,sans-serif;margin:6px 0 0;max-width:260px}
.project-case .story section{border-top:1px solid #bbb;padding:22px 0 34px;display:grid;grid-template-columns:1fr 2fr;gap:25px}.project-case .story section:first-child{border-top:0;padding-top:0}.project-case .story h3{font:400 clamp(24px,3vw,42px)/1 'Times New Roman',Georgia,serif;letter-spacing:-.045em}.project-case .story p,.project-case .story li{font:300 clamp(17px,1.6vw,22px)/1.35 Arial,sans-serif;letter-spacing:-.02em;margin:0}.project-case .story ul{margin:0;padding-left:20px}
.project-editor-link{display:inline-block;margin-top:24px;padding-bottom:5px;border-bottom:1px solid #111;color:inherit;text-decoration:none;font:16px Arial,sans-serif}
.grading-page main{padding-top:4vh}.grading-page h1{font-size:clamp(70px,10vw,148px);margin-top:2vh}.grading-page .intro{margin-bottom:5vh}
.grade-comparison{margin:0;font-family:Arial,Helvetica,sans-serif}
.grade-stage{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden;isolation:isolate}
.grade-poster,.grade-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.grade-before{clip-path:inset(0 calc(100% - var(--split,50%)) 0 0)}
.grade-canvas{opacity:0}.grade-comparison.has-frame .grade-canvas{opacity:1}
.grade-canvas-before{clip-path:inset(0 calc(100% - var(--split,50%)) 0 0);will-change:clip-path}
.grade-label{position:absolute;top:18px;z-index:2;padding:7px 10px;color:#fff;background:#0006;border-radius:2px;font-size:12px;letter-spacing:.04em;pointer-events:none}.grade-label-before{left:18px}.grade-label-after{right:18px}
.grade-divider{position:absolute;z-index:2;top:0;bottom:0;left:var(--split,50%);width:1px;background:#fff;box-shadow:0 0 3px #0006;pointer-events:none}.grade-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border:1px solid #fff;border-radius:50%;background:#ffffffea;color:#111;font:22px Georgia,serif;word-spacing:6px}
.grade-split{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.grade-stage:focus-within{outline:2px solid #111;outline-offset:5px}
.grade-controls{display:flex;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid #ccc;font-size:13px;letter-spacing:0;min-height:56px}
.grade-play{border:0;padding:10px 0;background:transparent;color:#111;font:inherit;min-width:52px;text-align:left;cursor:pointer}.grade-play:focus-visible{outline:1px solid #111;outline-offset:3px}
.grade-timeline{flex:1;min-width:40px;height:24px;accent-color:#111;cursor:pointer}.grade-clock{font-variant-numeric:tabular-nums;white-space:nowrap}.grade-hint{color:#666;margin-left:12px;white-space:nowrap}.grade-status{margin:10px 0 0;font-size:13px;color:#555;min-height:1em}
@media(max-width:700px){.project-case{padding:8vh 5vw}.project-case .project-title{font-size:clamp(58px,17vw,100px)}.project-case .intro{font-size:22px;margin-bottom:5vh}.project-case .body-grid{grid-template-columns:1fr;gap:40px;margin-top:5vh}.project-case .story section{grid-template-columns:1fr;gap:16px}.grade-label{top:10px;font-size:11px;padding:5px 7px}.grade-label-before{left:10px}.grade-label-after{right:10px}.grade-divider span{width:34px;height:34px;font-size:18px}.grade-controls{gap:12px;flex-wrap:wrap}.grade-hint{flex-basis:100%;margin-left:0}.grading-page h1{font-size:clamp(64px,18vw,108px)}}