:root{--wine:#71343d;--ink:#100e0e;--paper:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--wine);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:7px}header{height:126px;margin:0 4vw;display:flex;align-items:center;justify-content:space-between;gap:24px}.wordmark{font-size:26px;letter-spacing:-1.4px;white-space:nowrap}.wordmark strong{font-weight:900}nav{display:flex;gap:34px}.filter{padding:8px 0;font-size:13px;opacity:.65}.filter.active{opacity:1;border-bottom:1px solid}.contact-open{font-size:14px;padding:10px 0}.contact-open span{margin-left:20px}main{padding:28px 4vw 0}.intro{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 24px;font-size:11px;letter-spacing:.02em}.intro h1{font-size:11px;font-weight:400;margin:0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 26px}.project{min-width:0}.tile{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1.12;background:var(--paper);padding:12%;position:relative;overflow:hidden}.tile img{width:100%;height:100%;object-fit:contain;transition:transform .5s ease}.tile:hover img{transform:scale(1.035)}.open-hint{position:absolute;bottom:18px;right:20px;font-size:18px;opacity:0;transition:opacity .2s}.tile:hover .open-hint,.tile:focus-visible .open-hint{opacity:1}.project-info{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-top:13px;font-size:11px}.project-info h2{font-size:12px;font-weight:400;margin:0}.project-info span{font-size:10px;opacity:.8}.endnote{font-size:clamp(27px,4.4vw,72px);letter-spacing:-.055em;margin:130px 0 100px;max-width:700px}footer{border-top:1px solid #100e0e44;display:flex;justify-content:space-between;gap:24px;margin:0 4vw;padding:28px 0 38px;font-size:10px}footer div{display:flex;gap:25px}footer a:hover{text-decoration:underline}dialog{border:0;padding:0;color:var(--ink)}dialog::backdrop{background:rgba(10,8,8,.88)}#viewer{width:94vw;max-width:none;height:94dvh;max-height:none;background:#f8f7f5;overflow:hidden}.close{position:absolute;right:24px;top:20px;width:38px;height:38px;font-size:22px;z-index:3}.viewer-top,.viewer-bottom{position:absolute;left:30px;right:30px;display:flex;justify-content:space-between;font-size:11px}.viewer-top{top:34px;padding-right:65px}.viewer-bottom{bottom:24px}.image-stage{height:100%;padding:80px 80px 65px;display:flex;justify-content:center;align-items:center}.image-stage img{max-width:100%;max-height:100%;object-fit:contain}.arrow{position:absolute;top:48%;font-size:30px;padding:15px}.prev{left:12px}.next{right:12px}.arrow[hidden]{display:none}#contact{background:var(--wine);width:min(620px,94vw);max-height:94dvh;overflow:auto}.contact-content{padding:62px 56px 58px}.eyebrow{font-size:12px}.contact-content h2{font-size:82px;letter-spacing:-5px;font-weight:400;margin:50px 0 24px}.contact-content>p:not(.eyebrow){font-size:14px;line-height:1.7}.social-list{margin-top:40px}.social-list a,.download{display:flex;justify-content:space-between;border-top:1px solid #100e0e55;padding:18px 0;font-size:17px}.download{font-size:13px;margin-top:30px}.social-list a:hover,.download:hover{padding-left:8px}body.modal-open{overflow:hidden}@media(min-width:1700px){header,main,footer{max-width:1800px;margin-left:auto;margin-right:auto}header,footer{width:92%}}@media(max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}header{height:110px}.wordmark{font-size:23px}nav{gap:20px}}@media(max-width:600px){header{height:126px;position:relative;align-items:flex-start;padding-top:28px;margin:0 6vw}.wordmark{font-size:23px}nav{position:absolute;bottom:15px;left:0;gap:30px}.contact-open{padding:2px 0}.contact-open span{margin-left:8px}main{padding:30px 6vw 0}.intro{font-size:9px;margin-bottom:18px}.intro h1{font-size:10px}.grid{grid-template-columns:1fr;gap:30px}.tile{aspect-ratio:1/1.08;padding:11%}.endnote{margin:80px 0 60px;font-size:38px}footer{margin:0 6vw;flex-wrap:wrap;line-height:1.7}footer div{gap:18px}#viewer{width:100vw;height:100dvh}.image-stage{padding:80px 20px}.arrow{top:auto;bottom:58px;padding:10px}.viewer-top,.viewer-bottom{left:20px;right:20px}.contact-content{padding:55px 28px 35px}.contact-content h2{font-size:65px}.close{right:14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Project typography follows the reference; the JCL wordmark is unchanged. */
.tile{padding-bottom:90px}
.project-info{position:absolute;left:20px;right:20px;bottom:27px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;text-align:center;font-family:Garamond,serif;font-weight:500;line-height:1.2}
.project-info .project-title{font-size:20px;opacity:1}
.project-info .project-credit{font-size:12px;opacity:1}
@media(max-width:600px){.tile{padding-bottom:90px}}
/* Background recreated from the public JCL Instagram avatar (150px reference). */
:root{--wine:#6d1a29}
body{background:#6d1a29;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 4% 3%,#983d49 0%,transparent 22%),radial-gradient(ellipse at 50% 5%,#420a16 0%,transparent 31%),radial-gradient(ellipse at 85% 7%,#8f3141 0%,transparent 24%),radial-gradient(ellipse at 20% 45%,#4a0e1c 0%,transparent 26%),radial-gradient(ellipse at 62% 40%,#8c2c3e 0%,transparent 30%),radial-gradient(ellipse at 97% 60%,#470a16 0%,transparent 28%),radial-gradient(ellipse at 9% 92%,#983d49 0%,transparent 26%),radial-gradient(ellipse at 55% 95%,#420a16 0%,transparent 27%),radial-gradient(ellipse at 90% 98%,#903344 0%,transparent 25%);background-color:#6d1a29}
#contact{background:radial-gradient(ellipse at 0 0,#983d49,transparent 65%),radial-gradient(ellipse at 100% 100%,#420a16,transparent 70%),#6d1a29}

.intro{color:#fff}

/* Readable navigation and project stories. */
.intro{color:#fff}
.filter{font-weight:600;opacity:1;color:#fff}
.filter:not(.active){opacity:.75}
#viewer{overflow-y:auto}
#viewer[open]{display:flex;flex-direction:column}
.viewer-top{position:relative;left:auto;right:auto;top:auto;flex:none;padding:32px 85px 12px 30px;gap:20px;line-height:1.4}
.image-stage{position:relative;height:calc(94dvh - 230px);min-height:240px;flex:none;padding:20px 80px}
.project-description{max-width:850px;margin:12px auto 20px;padding:0 35px;font-family:Garamond,serif;font-size:18px;line-height:1.5;color:#292626}
.viewer-bottom{position:relative;left:auto;right:auto;bottom:auto;margin-top:auto;flex:none;padding:10px 30px 24px}
@media(max-width:600px){.viewer-top{padding:28px 65px 10px 20px}.image-stage{height:48dvh;min-height:220px;padding:15px 38px}.image-stage .arrow{top:45%;bottom:auto;padding:5px;font-size:25px}.prev{left:3px}.next{right:3px}.project-description{font-size:17px;padding:0 24px;margin-top:15px}.viewer-bottom{padding:12px 24px 24px}}

#project-description{max-width:none;padding:0;width:calc(100% - 160px)}
@media(max-width:600px){#project-description{width:calc(100% - 76px)}}
/* Navigation in black, matching the wordmark. */
.contact-open{font-weight:700;color:#100e0e}
.filter,.filter:not(.active){color:#100e0e;opacity:1}
/* Soft neutral paper for the project cards. */
:root{--paper:#f1f0ed}

.header-links{display:flex;align-items:center;gap:25px;font-size:14px;font-weight:700}
.about{display:grid;grid-template-columns:1fr 2fr;gap:26px;margin:110px 0 95px;padding-top:35px;border-top:1px solid #ffffff55;color:var(--paper);scroll-margin-top:35px}
.about h2{font-size:13px;font-weight:600;margin:8px 0}
.about p{font-family:Garamond,serif;font-size:clamp(24px,2.6vw,38px);line-height:1.3;margin:0 0 24px;max-width:900px}
.about a{display:inline-block;font-size:14px;margin-top:12px;border-bottom:1px solid;padding-bottom:6px}
@media(max-width:600px){.header-links{gap:15px;font-size:13px}.header-links .contact-open{font-size:13px}.about{grid-template-columns:1fr;margin:65px 0 55px;gap:22px}.about p{font-size:26px}}

/* Landscape projects span two columns; portraits retain one. */
.grid{grid-auto-flow:row dense;grid-auto-rows:clamp(340px,34vw,620px)}
.project-wide{grid-column:span 2}
.grid .tile{height:100%;aspect-ratio:auto;padding:36px 11% 90px}
.grid .project-wide .tile{padding:36px 7% 90px}
@media(max-width:1000px) and (min-width:601px){.grid{grid-auto-rows:440px}}
@media(max-width:600px){.grid{grid-auto-rows:auto}.project-wide{grid-column:auto}.grid .tile{height:auto;aspect-ratio:1/1.2;padding:28px 10% 85px}.grid .project-wide .tile{aspect-ratio:1.2/1;padding:24px 7% 85px}}