*{box-sizing:border-box}
html{background:#000;color:#dedede;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0}h1,h2,p{margin:0}
main{max-width:1920px;margin:auto;padding:24px 4.375vw 80px}
header{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:baseline;margin-bottom:24px;font-size:.625rem;line-height:1.3;letter-spacing:0;font-weight:400}
h1{font-size:inherit;font-weight:400}header p{grid-column:3 / 5;font-weight:400}
.work{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.work img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#111}
.under-grid{display:flex;justify-content:space-between;margin-top:12px;font-size:.625rem;line-height:1.3;color:#929292}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}button:hover{color:#ddd}button:focus-visible{outline:1px solid #ddd;outline-offset:6px}
.information{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:64px;align-items:start}
.bio{grid-column:1 / 3;max-width:490px;padding-right:48px;font-size:.875rem;line-height:1.5;font-weight:400;letter-spacing:-.01em;text-wrap:pretty}
.experience{grid-column:3 / 5}
.experience h2{font-size:.625rem;line-height:1.3;font-weight:400;letter-spacing:0;color:#929292;margin-bottom:22px}
.role{display:grid;grid-template-columns:1fr 3fr;gap:12px;margin-top:20px;font-size:.8125rem;line-height:1.4;letter-spacing:-.01em}
.role strong{font-weight:400}.role>p:first-child{color:#929292;font-size:.625rem;line-height:1.82;letter-spacing:0;font-variant-numeric:tabular-nums}
@media(min-width:1600px){main{padding-top:32px}header{margin-bottom:32px}.bio{max-width:510px}}
@media(max-width:760px){main{padding:20px 20px 48px}header{grid-template-columns:1fr 1fr;margin-bottom:20px;gap:12px}header p{grid-column:2;justify-self:end}.work{grid-template-columns:repeat(2,minmax(0,1fr))}.information{grid-template-columns:1fr;gap:36px;margin-top:40px}.bio{grid-column:1;padding-right:0;max-width:32em;font-size:.875rem;line-height:1.5}.experience{grid-column:1}.role{grid-template-columns:84px minmax(0,1fr);gap:12px}.experience h2{margin-bottom:20px}}

.bio p+p{margin-top:1em}footer{display:flex;gap:24px;margin-top:64px;font-size:.6875rem;line-height:1.4}footer a{color:#929292;text-decoration:none}footer a:hover{color:#dedede}footer a:focus-visible{outline:1px solid currentColor;outline-offset:5px}@media(max-width:760px){footer{margin-top:44px}}

header a{color:inherit;text-decoration:none}header p{grid-column:3}header nav{grid-column:4;justify-self:end;display:flex;gap:20px}header a:hover{text-decoration:underline;text-underline-offset:3px}header a:focus-visible{outline:1px solid currentColor;outline-offset:5px}header [aria-current="page"]{color:#929292}
.profile{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;margin-top:80px}.portrait{grid-column:1;width:100%;max-width:240px;height:auto;display:block}.profile-copy{grid-column:3 / 5;max-width:470px;font-size:.875rem;line-height:1.5;letter-spacing:-.01em;text-wrap:pretty}.profile-copy>.experience{margin-top:42px}.info-page footer{margin-top:80px}
@media(max-width:760px){header p{grid-column:2}header nav{grid-column:1 / -1;justify-self:start}.profile{grid-template-columns:1fr;margin-top:44px;gap:36px}.portrait{grid-column:1;width:160px}.profile-copy{grid-column:1;max-width:32em}.profile-copy>.experience{margin-top:36px}.info-page footer{margin-top:48px}}

/* Quiet, optically balanced brand index on the Info page. */
.brands{margin-top:120px;max-width:1100px}
.brand-grid{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:24px;row-gap:36px;padding:0;margin:0}
.brand-grid li{height:76px;display:flex;align-items:center;justify-content:center;min-width:0}
.brand-grid img{display:block;object-fit:contain;max-width:100%;filter:brightness(0) invert(1);opacity:.64}
.brand-grid .brand-rayban{width:82px;height:48px}
.brand-grid .brand-oakley{width:120px;height:24px}
.brand-grid .brand-meta{width:88px;height:22px}
.brand-grid .brand-facebook{width:32px;height:32px}
.brand-grid .brand-instagram{width:105px;height:30px}
.brand-legacy{display:block;width:130px;max-width:100%;height:75px;filter:grayscale(1) invert(1) contrast(1.15);opacity:.8}
@media(max-width:760px){.brands{margin-top:72px}.brand-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;row-gap:24px}.brand-grid li{height:64px}.brand-grid .brand-oakley{width:98px}.brand-grid .brand-instagram{width:94px}.brand-legacy{width:115px;height:66px}}
@media(max-width:380px){.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.brand-grid li>img,.brand-grid li>svg{transform:scale(.7)}

.brand-grid .brand-rayban{width:120px;height:30px}
@media(max-width:760px){.brand-grid .brand-rayban{width:98px}}

.work video{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#111}

/* Work: a continuous sequence, using the same quiet type as Info. */
.work-page{max-width:1440px}
.project-index{display:flex;flex-wrap:wrap;gap:12px 26px;margin:72px 0 76px;font-size:.625rem;line-height:1.5}
.project-index a{color:#929292;text-decoration:none}
.project-index a:hover{color:#dedede}
.project-index a:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.project{scroll-margin-top:28px}
.project+.project{margin-top:144px}
.project-intro{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:36px;align-items:start}
.project-intro h2{font-size:.8125rem;line-height:1.5;font-weight:400}
.project-intro p{max-width:470px;font-size:.875rem;line-height:1.5;letter-spacing:-.01em;text-wrap:pretty}
.project-media{display:grid;gap:32px}
.media-row{display:grid;gap:20px;align-items:center}
.columns-1{grid-template-columns:minmax(0,1fr)}
.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.project-piece{margin:0;min-width:0;position:relative}
.project-piece figcaption{margin-top:10px;color:#929292;font-size:.625rem;line-height:1.5}
.project-piece img,.project-piece video{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;background:#000}
.study-toggle{display:block;margin-top:8px;color:#929292;font-size:.625rem;line-height:1.4;text-align:left}
.work-page footer{margin-top:100px}
.back-top{margin-left:auto}
@media(max-width:760px){.project-index{margin:40px 0 48px;gap:10px 22px}.project+.project{margin-top:80px}.project-intro{grid-template-columns:1fr;gap:12px;margin-bottom:24px}.project-intro p{font-size:.8125rem;max-width:38em}.project-media{gap:20px}.media-row{gap:12px}.work-page footer{margin-top:64px}}
@media(max-width:480px){.columns-2{grid-template-columns:1fr}.columns-3{gap:8px}.project-index{max-width:290px}}

.work-label{margin:72px 0 76px;color:#929292;font-size:.625rem;line-height:1.5}
@media(max-width:760px){.work-label{margin:40px 0 48px}}

.work-label a{display:inline-block;margin-top:4px;color:inherit;text-decoration:none}.work-label a:hover{text-decoration:underline;text-underline-offset:3px}.work-label a:focus-visible{outline:1px solid currentColor;outline-offset:4px}

/* Info biography and experience. */
.profile-bio h2{font-size:inherit;line-height:inherit;font-weight:400;margin:0 0 22px}.profile-bio p+p{margin-top:20px}.info-page .role{margin-top:26px}.role-summary{margin-top:10px;color:#929292}.info-page .experience h2{text-transform:uppercase}

.lifestyle-row{width:100%;max-width:1060px;justify-self:center}.lifestyle-row.columns-3{max-width:940px}

/* Compact case layouts; proportional columns preserve full images at equal heights. */
.work-page .work-label{margin:40px 0 36px}
.work-page .project+.project{margin-top:72px}
.work-page .project-intro{grid-template-columns:1fr 3fr;gap:20px;margin-bottom:24px}
.work-page .project-intro p{max-width:680px;font-size:.8125rem;line-height:1.5}
.work-page .project-media{gap:10px}
.work-page .media-row{gap:10px;align-items:start;grid-template-columns:var(--media-columns)}
.work-page .lifestyle-row{max-width:none}
.work-page .study-toggle{margin-top:5px}
.work-page .project-piece figcaption{margin-top:6px}
.work-page footer{margin-top:56px}
@media(max-width:760px){.work-page .work-label{margin:28px 0}.work-page .project+.project{margin-top:48px}.work-page .project-intro{grid-template-columns:1fr;gap:8px;margin-bottom:18px}.work-page .project-media,.work-page .media-row{gap:6px}}
@media(max-width:480px){.work-page .columns-2{grid-template-columns:1fr}}