:root{--black:#000;--white:#e9e7e1;--dim:#696969}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;min-height:100%;background:var(--black);color:var(--white)}
body{font-family:"Courier New",Courier,monospace}
a{color:inherit;text-decoration:none}
::selection{background:var(--white);color:var(--black)}
.site{min-height:100svh;padding:24px 30px 19px;display:grid;grid-template-rows:auto 1fr auto;background:#000}
.header{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:20}
.wordmark{font-family:"Times New Roman",Times,serif;font-size:9px;letter-spacing:.25em;padding:6px 0}
.index summary{list-style:none;display:flex;gap:13px;cursor:pointer;padding:5px 0;font-size:8px;letter-spacing:.17em;text-transform:uppercase}
.index summary::-webkit-details-marker{display:none}
.index summary span:last-child{transition:transform .2s ease}
.index[open] summary span:last-child{transform:rotate(45deg)}
.index-panel{position:fixed;inset:0;z-index:-1;display:grid;grid-template-columns:1fr minmax(300px,560px);grid-template-rows:auto 1fr auto;padding:72px max(30px,6vw) 28px;background:#000}
.panel-head{grid-column:1/-1;display:flex;justify-content:space-between;color:var(--dim);font-size:8px;letter-spacing:.14em;text-transform:uppercase}
.primary-nav{grid-column:2;align-self:center}
.primary-nav a{display:grid;grid-template-columns:38px 1fr auto;align-items:baseline;padding:10px 0;text-transform:uppercase}
.primary-nav a span:first-child{color:var(--dim);font-size:8px}
.primary-nav a span:nth-child(2){font-family:"Times New Roman",Times,serif;font-size:clamp(27px,4vw,52px);letter-spacing:-.03em}
.primary-nav a span:last-child{font-size:9px;color:var(--dim);opacity:0;transition:opacity .2s}
.primary-nav a:hover span:last-child,.primary-nav a:focus-visible span:last-child{opacity:1}
.panel-socials{grid-column:1/-1;display:flex;gap:24px;color:var(--dim);font-size:8px;letter-spacing:.13em;text-transform:uppercase}
.panel-socials a:hover,.panel-socials a:focus-visible{color:var(--white)}
.projects-block{width:min(660px,58vw);align-self:end;justify-self:end;margin-bottom:clamp(60px,11vh,130px)}
.section-kicker{margin:0 0 20px;color:var(--dim);font-size:8px;letter-spacing:.19em;text-transform:uppercase}
.project-list{display:flex;flex-direction:column;gap:10px}
.project-row{position:relative;display:grid;grid-template-columns:34px 1fr 42px 12px;align-items:baseline;transition:transform .25s ease}
.project-row:hover,.project-row:focus-visible{transform:translateX(-8px)}
.item-number,.item-year,.item-arrow{color:var(--dim);font-size:8px}
.item-title{font-family:"Times New Roman",Times,serif;font-size:clamp(18px,2.25vw,32px);letter-spacing:-.02em}
.project-row:hover .item-title,.project-row:focus-visible .item-title{font-style:italic}
.project-cover{position:absolute;right:calc(100% + 19px);top:50%;width:54px;height:54px;object-fit:cover;opacity:0;clip-path:inset(50% 0 50% 0);transform:translateY(-50%) rotate(-4deg) scale(.82);filter:grayscale(1) contrast(1.08);transition:opacity .22s ease,clip-path .3s ease,transform .3s ease;pointer-events:none}
.project-row:nth-child(even) .project-cover{transform:translateY(-50%) rotate(4deg) scale(.82)}
.project-row:hover .project-cover,.project-row:focus-visible .project-cover{opacity:.82;clip-path:inset(0);transform:translateY(-50%) rotate(-4deg) scale(1)}
.project-row:nth-child(even):hover .project-cover,.project-row:nth-child(even):focus-visible .project-cover{transform:translateY(-50%) rotate(4deg) scale(1)}
.footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:24px;color:var(--dim);font-size:7px;letter-spacing:.12em;text-transform:uppercase}
.footer p{margin:0}.footer p:last-child{justify-self:end}.footer nav{display:flex;gap:20px}.footer a:hover,.footer a:focus-visible{color:var(--white)}
.page-content{width:min(1050px,82vw);justify-self:center;align-self:center;display:grid;grid-template-columns:240px 1fr;gap:clamp(45px,8vw,130px);padding:80px 0}
.page-heading p{margin:0 0 20px;color:var(--dim);font-size:8px;letter-spacing:.17em;text-transform:uppercase}
.page-heading h1{margin:0;font:400 clamp(35px,5vw,74px)/.95 "Times New Roman",Times,serif}
.expanded-list{align-self:end;display:flex;flex-direction:column;gap:18px}
.expanded-row{display:grid;grid-template-columns:34px minmax(180px,1fr) minmax(110px,.55fr) 42px 12px;align-items:baseline;font-size:8px;letter-spacing:.08em;text-transform:uppercase}
.expanded-row span:first-child,.expanded-row span:nth-last-child(-n+3){color:var(--dim)}
.expanded-row span:nth-child(2){color:var(--white);font:400 clamp(18px,2vw,28px)/1.1 "Times New Roman",Times,serif;letter-spacing:-.01em;text-transform:none}
.expanded-row:hover span:nth-child(2),.expanded-row:focus-visible span:nth-child(2){font-style:italic}
.video-row{grid-template-columns:34px 1fr 42px 12px}
.contact-content{grid-template-columns:1fr 1fr}
.contact-links{align-self:end;display:flex;flex-direction:column;gap:14px}
.contact-links a{display:grid;grid-template-columns:34px 1fr auto;font-size:8px;letter-spacing:.1em;text-transform:uppercase}
.contact-links a span:first-child,.contact-links a span:last-child{color:var(--dim)}
@media(max-width:700px){.site{padding:20px 17px 15px}.index-panel{padding:64px 22px 24px;grid-template-columns:1fr}.panel-head span:last-child{display:none}.primary-nav{grid-column:1}.primary-nav a span:nth-child(2){font-size:35px}.panel-socials{grid-column:1;gap:16px;flex-wrap:wrap}.projects-block{width:100%;margin-bottom:85px}.project-row{grid-template-columns:28px 1fr 34px 10px}.item-title{font-size:22px}.project-cover{display:none}.footer{grid-template-columns:1fr auto;row-gap:13px}.footer nav{grid-column:1/-1;grid-row:1;gap:15px}.footer p:first-of-type{grid-column:1;grid-row:2}.footer p:last-child{grid-column:2;grid-row:2}.page-content{width:100%;grid-template-columns:1fr;gap:65px;padding:75px 0}.expanded-list{gap:20px}.expanded-row{grid-template-columns:28px 1fr 35px 10px}.expanded-row span:nth-child(3){display:none}.video-row{grid-template-columns:28px 1fr 35px 10px}.contact-content{grid-template-columns:1fr}.contact-links{gap:18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}