html,body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: a drawing set. A sticky sheet index on the left, plates on the right, each project carrying its own title block. */
:root{
color-scheme:dark; /* single dark look, matching the original site */
--vellum:#000000; /* page: black, as on the original */
--sheet:#131312; /* raised surface */
--graphite:#EDEDE6; /* ink */
--lead:#9C9B92; /* secondary text */
--rule:#272724; /* hairlines */
--npb:#FBF0B0; /* accent: the logo's butter yellow */
--npb-soft:#6B6747; /* accent linework */
--hatch:#191917;
--frame:#5E5D57; /* box outlines: softened ink */
--name-font:"futura-pt","Futura PT","Futura","Jost","Century Gothic",sans-serif; /* original logo face; Jost stands in */
--name-color:#FBF0B0;
--display:"futura-pt","Futura PT","Futura","Jost","Century Gothic",sans-serif;
--body:"Source Serif 4",Georgia,"Times New Roman",serif;
--mono:"Instrument Sans","Helvetica Neue",Arial,sans-serif; /* supplementary: warm sans for labels */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--vellum);color:var(--graphite);font-family:var(--body);font-size:17px;line-height:1.6}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--npb);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:24px;padding-block:0 64px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px}
@media (max-width:860px){.wrap{grid-template-columns:minmax(0,1fr);gap:0;padding-inline:16px}}
/* Sheet index */
.index{position:sticky;top:env(safe-area-inset-top,0px);align-self:start;padding-block:40px;display:flex;flex-direction:column;gap:28px;max-height:100vh;overflow:auto}
.name{font-family:var(--name-font);color:var(--name-color);font-weight:600;font-size:2.35rem;line-height:1.02;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;display:block}
.roles{font-family:var(--mono);font-size:0.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--lead);margin-top:10px;line-height:1.7}
.index nav{display:flex;flex-direction:column;gap:18px}
.idx-group h2{font-family:var(--mono);font-size:0.73rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--npb);margin:0 0 6px;border-bottom:1px solid var(--npb-soft);padding-bottom:4px}
.idx-group ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.idx-group a{display:block;font-size:.9rem;text-decoration:none;line-height:1.35;padding-block:2px}
.idx-group a:hover span{text-decoration:underline;text-decoration-color:var(--npb);text-underline-offset:3px}
.idx-links{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--mono);font-size:0.80rem;text-transform:uppercase;letter-spacing:.06em}
.idx-links a{text-decoration:none;color:var(--npb)}
.idx-links a:hover{text-decoration:underline}
@media (max-width:860px){
.index{position:static;max-height:none;padding-block:28px 8px;gap:18px}
.index nav{flex-direction:row;flex-wrap:wrap;gap:8px 18px}
.idx-group ol{display:none}
.idx-group h2{border:0;margin:0;padding:0}
.idx-group h2 a{text-decoration:none}
.name{font-size:2rem}
}
main{min-width:0;padding-block:40px;display:flex;flex-direction:column;gap:96px}
/* Intro */
.intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:end;border-bottom:2px solid var(--graphite);padding-bottom:36px}
.intro h1{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.02;letter-spacing:.02em;margin:0;text-transform:uppercase;text-wrap:balance}
.intro h1 em{font-style:normal;color:var(--npb)}
.intro p{margin:0;max-width:44ch;color:var(--lead)}
@media (max-width:700px){.intro{grid-template-columns:minmax(0,1fr);gap:18px}}
/* Hero slideshow */
.hero{display:flex;flex-direction:column;gap:14px;margin-bottom:-40px}
.slides{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--hatch);overflow:hidden;
background-image:repeating-linear-gradient(135deg,transparent 0 11px,var(--rule) 11px 12px)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.slide.is-active{opacity:1;pointer-events:auto}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 10px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0))}
.slide figcaption a{font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:#EDEDE6}
.slide figcaption a:hover{color:var(--npb)}
.slide figcaption span{font-family:var(--mono);font-size:0.68rem;letter-spacing:.08em;text-transform:uppercase;color:#C9C8BF}
.hero-ctrl{display:flex;align-items:center;gap:10px}
.hero-dots{display:flex;gap:6px;flex:1}
.hero-dot{width:28px;height:3px;border:0;padding:0;background:var(--rule);cursor:pointer}
.hero-dot[aria-current="true"]{background:var(--npb)}
.hero-btn{background:transparent;border:1px solid var(--rule);color:var(--graphite);font-family:var(--mono);font-size:0.84rem;padding:4px 10px;cursor:pointer;line-height:1.4}
.hero-btn:hover{border-color:var(--npb);color:var(--npb)}
.hero-pause{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;min-width:64px}
@media (prefers-reduced-motion: reduce){.slide{transition:none}}
@media (max-width:600px){.slides{aspect-ratio:4/3}.slide figcaption a{font-size:.78rem}}
/* Section heads */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.sec-head h2{font-family:var(--display);font-weight:600;font-size:1.9rem;line-height:1;margin:0;text-transform:uppercase;letter-spacing:.03em}
.sec-head p{font-family:var(--mono);font-size:0.80rem;letter-spacing:.08em;text-transform:uppercase;color:var(--lead);margin:0}
.subhead{font-family:var(--mono);font-size:0.80rem;letter-spacing:.14em;text-transform:uppercase;color:var(--npb);margin:56px 0 20px;display:flex;align-items:center;gap:12px}
.subhead::after{content:"";flex:1;height:1px;background:var(--npb-soft)}
.subhead:first-of-type{margin-top:0}
/* Project */
.project{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding-block:32px;border-top:1px solid var(--rule)}
.project:first-of-type{border-top:0;padding-top:0}
@media (max-width:1040px){.project{grid-template-columns:minmax(0,1fr)}}
.plates{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.plate{position:relative;background:var(--hatch);aspect-ratio:3/2;max-width:100%;overflow:hidden;
background-image:repeating-linear-gradient(135deg,transparent 0 9px,var(--rule) 9px 10px)}
.plate.lead{grid-column:span 6;aspect-ratio:16/9}
.plate:not(.lead){grid-column:span 2}
.plate figcaption{position:absolute;left:8px;bottom:6px;font-family:var(--mono);font-size:0.71rem;letter-spacing:.06em;text-transform:uppercase;color:var(--lead);background:var(--sheet);padding:1px 6px}
.plate.lead figcaption{font-size:.72rem}
.plate img{width:100%;height:100%;object-fit:cover;display:block}
figure{margin:0}
/* Title block */
.tblock{border:1.5px solid var(--frame);background:var(--sheet);align-self:start;font-size:.9rem}
.tb-title{padding:14px 16px 12px;border-bottom:1.5px solid var(--frame)}
.tb-title h3{font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:.02em;line-height:1.02;margin:0;text-transform:uppercase;text-wrap:balance}
.tb-title .by{display:block;font-style:italic;color:var(--lead);margin-top:4px;display:block}
.tb-row{display:grid;grid-template-columns:86px minmax(0,1fr);border-bottom:1px solid var(--rule)}
.tb-row:last-child{border-bottom:0}
.tb-row dt{font-family:var(--mono);font-size:0.69rem;letter-spacing:.08em;text-transform:uppercase;color:var(--lead);padding:7px 0 7px 16px}
.tb-row dd{margin:0;padding:6px 16px 6px 8px;line-height:1.4;min-width:0;overflow-wrap:break-word}
.tb-row:has(.team){grid-template-columns:minmax(0,1fr)}
.tb-row:has(.team) dt{padding-bottom:0}
.tb-row:has(.team) dd{padding:4px 16px 10px}
.tb-row dd.mono{font-family:var(--mono);font-size:0.86rem}
.tblock dl{margin:0}
.team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:fit-content(46%) minmax(0,1fr);gap:4px 14px;line-height:1.35}
.team li{display:contents}
.team li span{min-width:0;overflow-wrap:break-word}
.team li span:first-child{color:var(--lead)}
.tag{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:0.69rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border:1px solid currentColor}
.tag.built{color:var(--npb)}
.tag.paper{color:var(--lead)}
.tb-title h3 a{text-decoration:none}
.tb-title h3 a:hover{color:var(--npb)}
.view{display:block;padding:10px 16px;border-top:1.5px solid var(--frame);font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--npb)}
.view:hover{background:var(--npb);color:var(--vellum)}
/* Drafting */
.dgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
@media (max-width:1100px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.dgrid{grid-template-columns:minmax(0,1fr)}}
.dcard{display:flex;flex-direction:column;gap:14px;min-width:0}
.dcard .plate{aspect-ratio:4/3}
.dbody{display:flex;flex-direction:column;gap:8px;font-size:.88rem}
.dhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:1px solid var(--rule);padding-bottom:6px}
.dhead h3{min-width:0;overflow-wrap:break-word;font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:.03em;text-transform:uppercase;margin:0;line-height:1.1}
.dyear{font-family:var(--mono);font-size:.78rem;color:var(--lead);font-variant-numeric:tabular-nums}
.dproj{margin:0;font-style:italic;color:var(--lead)}
.packet{align-self:start;margin-top:4px;font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--npb);border:1px solid var(--npb);padding:5px 10px}
.packet:hover{background:var(--npb);color:var(--vellum)}
.dlock{border:1.5px solid var(--frame);background:var(--sheet);padding:28px 24px;max-width:520px}
.dlock-form{display:flex;flex-direction:column;gap:10px;margin:0}
.dlock-lead{margin:0 0 6px;font-size:1rem}
.dlock-form label{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--lead)}
.dlock-row{display:flex;gap:8px;flex-wrap:wrap}
.dlock-row input{flex:1;min-width:0;background:var(--vellum);color:var(--graphite);border:1px solid var(--rule);padding:9px 12px;font:inherit;font-size:1rem}
.dlock-row input:focus{outline:2px solid var(--npb);outline-offset:1px;border-color:var(--npb)}
.dlock-row button{font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;background:var(--npb);color:var(--vellum);border:1px solid var(--npb);padding:9px 18px;cursor:pointer}
.dlock-row button:hover{background:transparent;color:var(--npb)}
.dlock-row button:disabled{opacity:.6;cursor:wait}
.dlock-msg{margin:0;min-height:1.3em;font-size:.88rem;color:var(--npb)}
.dlock-help{margin:0;font-size:.85rem;color:var(--lead)}
.dlock-help .sel{color:var(--graphite);user-select:all}
.dempty{grid-column:1/-1;border:1px dashed var(--rule);padding:28px 20px;color:var(--lead);font-style:italic;text-align:center}
/* Art */
.art-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.art-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.art-grid figure{display:flex;flex-direction:column;gap:8px}
.art-grid .plate{aspect-ratio:1/1}
.art-grid figcaption.cap{display:flex;justify-content:space-between;gap:8px;font-size:.92rem}
.art-grid figcaption.cap span:last-child{font-family:var(--mono);font-size:0.80rem;color:var(--lead);font-variant-numeric:tabular-nums}
/* About + contact */
.about{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px}
@media (max-width:800px){.about{grid-template-columns:minmax(0,1fr);gap:32px}}
.about-text p{margin:0 0 1em;max-width:62ch}
.about-text p:first-child{font-size:1.25rem;line-height:1.45}
.facts{display:flex;flex-direction:column;gap:22px}
.fact h3{font-family:var(--mono);font-size:0.73rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--npb);margin:0 0 6px}
.fact p{margin:0}
.contact{border:1.5px solid var(--frame);background:var(--sheet);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.contact > div{padding:22px 22px 20px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:8px;min-width:0;container-type:inline-size}
.contact > div:last-child{border-right:0}
#contact{container-type:inline-size}
/* Stack the three boxes when the content area is narrow */
@container (max-width:840px){.contact{grid-template-columns:minmax(0,1fr)}.contact > div{border-right:0;border-bottom:1px solid var(--rule)}.contact > div:last-child{border-bottom:0}}
.contact h3{font-family:var(--mono);font-size:0.73rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--lead);margin:0}
/* Text shrinks to fit its box instead of breaking onto two lines */
.contact .big{font-family:var(--display);font-weight:600;font-size:min(1.3rem,10cqi);line-height:1.15;white-space:nowrap;user-select:all}
.contact #email{font-size:min(1.3rem,6.8cqi)}
.contact a.big{text-decoration:none}
.contact a.big:hover{color:var(--npb)}
.copy{align-self:start;font-family:var(--mono);font-size:0.76rem;letter-spacing:.08em;text-transform:uppercase;background:transparent;color:var(--npb);border:1px solid var(--npb);padding:4px 10px;cursor:pointer}
.copy:hover{background:var(--npb);color:var(--vellum)}
footer{font-family:var(--mono);font-size:0.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--lead);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid var(--rule);padding-top:18px}
.crumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lead);display:flex;gap:8px;flex-wrap:wrap}
.crumb a{text-decoration:none;color:var(--npb)}
.crumb a:hover{text-decoration:underline}
.p-head{display:flex;flex-direction:column;gap:6px;border-bottom:2px solid var(--graphite);padding-bottom:22px}
.p-head h1{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.02;letter-spacing:.02em;text-transform:uppercase;margin:0;text-wrap:balance}
.p-head .by{font-style:italic;color:var(--lead);font-size:1.1rem}
.p-head .meta{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--lead)}
.p-lead{aspect-ratio:16/9}
.p-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
@media (max-width:1040px){.p-body{grid-template-columns:minmax(0,1fr)}}
.notes h2,.gallery h2{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--npb);margin:0 0 14px;display:flex;align-items:center;gap:12px}
.notes h2::after,.gallery h2::after{content:"";flex:1;height:1px;background:var(--npb-soft)}
.notes p{max-width:62ch;margin:0 0 1em}
.todo{border:1px dashed var(--rule);padding:18px 20px;color:var(--lead);font-style:italic;max-width:62ch}
.todo ul{margin:8px 0 0;padding-left:18px}
.gallery{display:flex;flex-direction:column;gap:36px}
.g-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:700px){.g-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.g-grid .plate{grid-column:auto;aspect-ratio:3/2}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--rule);padding-top:20px}
.pager a{text-decoration:none;display:flex;flex-direction:column;gap:4px}
.pager a:last-child{text-align:right}
.pager small{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lead)}
.pager span{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase}
.pager a:hover span{color:var(--npb)}
.index a[aria-current="page"] span{color:var(--npb)}
.pdfview{display:flex;flex-direction:column;gap:10px}
.pdf-stage{position:relative;aspect-ratio:17/11;max-width:100%;background:var(--sheet);border:1.5px solid var(--frame);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pdf-canvas{max-width:100%;max-height:100%;display:block;background:#fff}
.pdf-empty{margin:0;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lead);border:1px dashed var(--rule);padding:14px 18px}
.pdf-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pdf-count{font-family:var(--mono);font-size:.78rem;color:var(--lead);font-variant-numeric:tabular-nums;min-width:70px;text-align:center}
.pdf-open{margin-left:auto;font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--npb)}
.pdf-open:hover{text-decoration:underline}
/* Real images inside plates */
.plate img,.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate picture,.slide picture{display:contents}
.plate.has-img{background-image:none;background:var(--sheet)}
.plate.has-img figcaption{display:none}
.notes .prose p{max-width:62ch;margin:0 0 1em}
.notes .prose a{color:var(--npb)}
.p-body.no-notes{grid-template-columns:minmax(0,360px)}
.slide .cap-title{font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;color:#EDEDE6}
/* Upcoming productions */
.tag.soon{color:var(--npb);border-style:dashed}
.idx-soon{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--npb);white-space:nowrap;margin-left:4px}
.idx-plain{display:block;font-size:.9rem;line-height:1.35;padding-block:2px;color:var(--lead);cursor:default}
/* Full-screen photo viewer on project pages */
.lb-item{cursor:zoom-in}
.lb-item img{transition:opacity .2s ease}
.lb-item:hover img{opacity:.85}
.lb-item:focus-visible{outline:2px solid var(--npb);outline-offset:3px}
.lb{position:fixed;inset:0;z-index:100;background:#000;display:grid;grid-template-columns:64px minmax(0,1fr) 64px;grid-template-rows:auto minmax(0,1fr);
padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.lb-top{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;padding:14px 20px}
.lb-count{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#9C9B92;font-variant-numeric:tabular-nums}
.lb-close{background:none;border:0;color:#EDEDE6;font-size:2rem;line-height:1;cursor:pointer;padding:4px 8px}
.lb-close:hover{color:var(--npb)}
.lb-stage{margin:0;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding-bottom:24px}
.lb-stage img{max-width:100%;max-height:calc(100% - 36px);object-fit:contain;display:block;user-select:none}
.lb-cap{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 14px;text-align:center;padding:0 12px}
.lb-title{font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;color:#EDEDE6}
.lb-dir{font-family:var(--body);font-style:italic;font-size:.95rem;color:#9C9B92}
.lb-nav{background:none;border:0;color:#EDEDE6;font-size:1.6rem;cursor:pointer;align-self:center;height:100%;max-height:70vh;width:100%}
.lb-nav:hover{color:var(--npb)}
.lb-nav:focus-visible,.lb-close:focus-visible{outline:2px solid var(--npb);outline-offset:-4px}
@media (max-width:600px){.lb{grid-template-columns:40px minmax(0,1fr) 40px}.lb-nav{font-size:1.3rem}}
/* Resume page */
.resume-head{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.resume-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.resume-actions .packet{margin-top:0}
.resume-open{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--lead)}
.resume-open:hover{color:var(--npb)}
.pdfpages{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:900px;width:100%}
.pdfpages canvas{width:100%;height:auto;display:block;background:#fff;box-shadow:0 0 0 1px var(--rule)}
.idx-links a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}
/* Plain status text instead of outlined badges */
.tag{border:0;padding:0;margin-top:8px;letter-spacing:.08em}
.tag.soon{border:0}
/* Social icons in the sidebar */
.idx-social{display:inline-flex;align-items:center;gap:14px}
.idx-social a{display:inline-flex;color:var(--npb)}
.idx-social a:hover{color:var(--graphite)}
.brand-icon{width:17px;height:17px;display:block}
/* Whole slideshow photo opens its project */
.slide-link{position:absolute;inset:0;display:block;cursor:pointer}
.slide figcaption{z-index:1;pointer-events:none}
.slide figcaption a{pointer-events:auto}
/* Slideshow arrows only, at either end */
.hero-ctrl{justify-content:space-between}
/* Wide windows: the page uses the full width, the slideshow grows with it,
and everything else keeps a comfortable reading width */
.wrap{max-width:none;padding-inline:clamp(24px,3vw,56px)}
main > :not(.hero):not(.lb){width:100%;max-width:1180px}
.slides{max-height:calc(100vh - 120px);max-height:calc(100svh - 120px)}
/* Drafting project pages */
.dhead h3 a{text-decoration:none}
.dhead h3 a:hover{color:var(--npb)}
.pdf-newtab{margin:10px 0 0;font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.pdf-newtab a{color:var(--npb);text-decoration:none}
.pdf-newtab a:hover{text-decoration:underline}
main > .dlock{max-width:520px}
.dpage{display:flex;flex-direction:column;gap:44px}
/* Home page project cards: the credits panel matches the height of the photos
beside it, with its contents centered vertically */
@media (min-width:1041px){
.project:not(.no-photos){align-items:stretch}
.project:not(.no-photos) > .plates{align-self:center}
.project:not(.no-photos) > .tblock{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
}
/* Art "table" layout: prints scattered and overlapping; hover or tap brings one forward */
.art-table-wrap{container-type:inline-size}
.art-table{position:relative;height:calc(var(--hd) * 1cqi + 40px);margin-top:8px}
.print{position:absolute;margin:0;left:calc(var(--dx) * 1cqi);top:calc(var(--dy) * 1cqi);width:calc(var(--wd) * 1cqi);
transform:rotate(var(--r));z-index:var(--z);background:var(--name-color);padding:7px 7px 30px;
box-shadow:0 6px 18px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5);cursor:pointer;
transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.print-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--hatch);
background-image:repeating-linear-gradient(135deg,transparent 0 9px,var(--rule) 9px 10px)}
.print-photo.has-img{background:#111}
.print-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.print-photo picture{display:contents}
.print figcaption{position:absolute;left:9px;right:9px;bottom:7px;display:flex;justify-content:space-between;gap:8px;
font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#1E2423;
opacity:0;transition:opacity .25s ease}
.print:hover,.print:focus-visible,.print:focus{z-index:100;transform:rotate(0deg) scale(1.1);box-shadow:0 18px 40px rgba(0,0,0,.75);outline:none}
.print:hover figcaption,.print:focus figcaption{opacity:1}
.print:focus-visible{box-shadow:0 18px 40px rgba(0,0,0,.75),0 0 0 2px var(--npb)}
@media (max-width:700px){
.art-table{height:calc(var(--hm) * 1cqi + 40px)}
.print{left:calc(var(--mx) * 1cqi);top:calc(var(--my) * 1cqi);width:calc(var(--wm) * 1cqi)}
}
@media (prefers-reduced-motion: reduce){.print{transition:none}}
/* Home page project cards: photos only, with a small label box on the main photo */
.project,.project:not(.no-photos){grid-template-columns:minmax(0,1fr)}
.lead-link{position:absolute;inset:0;z-index:1}
.cap-box{position:absolute;left:14px;bottom:14px;z-index:2;max-width:calc(100% - 28px);display:flex;flex-direction:column;gap:3px;
padding:9px 13px 10px;background:rgba(0,0,0,.74);border:1px solid var(--frame);text-decoration:none;
backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.cap-box strong{font-family:var(--display);font-weight:600;font-size:.92rem;line-height:1.15;letter-spacing:.03em;text-transform:uppercase;color:#EDEDE6}
.cap-box span{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#B9B8AF}
.cap-box:hover strong,.cap-box:focus-visible strong,.plate.lead:hover .cap-box strong{color:var(--npb)}
.plate.lead figcaption{z-index:2}
.plate.lead:not(.has-img) figcaption{left:auto;right:8px}
@media (max-width:600px){.cap-box{left:8px;bottom:8px;padding:7px 10px}.cap-box strong{font-size:.8rem}}
/* Art table, polished 3D version: thin-edged panels floating in perspective.
Hover lifts a panel toward the viewer, flattens it and shows its caption. */
.art-table{perspective:1600px;perspective-origin:50% 30%}
.print{background:#0c0c0b;padding:0;border-radius:6px;overflow:hidden;border:1px solid rgba(237,237,230,.10);
transform-style:preserve-3d;
transform:rotateX(9deg) rotateY(var(--ry)) rotateZ(var(--r));
box-shadow:0 40px 60px -28px rgba(0,0,0,.95),0 14px 26px -14px rgba(0,0,0,.8);
transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease,border-color .3s ease}
.print::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:linear-gradient(135deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.05) 100%)}
.print-photo{border-radius:5px}
.print figcaption{left:0;right:0;bottom:0;padding:26px 12px 10px;
background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));color:#EDEDE6;
transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;z-index:1}
.print figcaption span:last-child{color:var(--npb)}
.print:hover,.print:focus-visible,.print:focus{z-index:100;
transform:translateZ(90px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) rotateZ(0deg) scale(1.06);
border-color:rgba(251,240,176,.55);
box-shadow:0 60px 80px -30px rgba(0,0,0,.95),0 24px 40px -20px rgba(0,0,0,.85)}
.print:hover figcaption,.print:focus figcaption{transform:none}
.print:focus-visible{box-shadow:0 60px 80px -30px rgba(0,0,0,.95),0 0 0 2px var(--npb)}
@media (prefers-reduced-motion: reduce){.print{transition:none}}
.print{transform-origin:var(--ox) 50%}
@media (max-width:700px){.print{transform-origin:var(--oxm) 50%}}
/* Home project layout "side": three small photos stacked beside the main photo,
switching sides from one project to the next */
@media (min-width:701px){
.layout-side .plates{grid-template-columns:minmax(0,3fr) minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr))}
.layout-side .plate.lead{grid-column:1;grid-row:1 / span 3}
.layout-side .plate:not(.lead){grid-column:2;aspect-ratio:auto;min-height:0}
.layout-side article.project:nth-of-type(even) .plates{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}
.layout-side article.project:nth-of-type(even) .plate.lead{grid-column:2}
.layout-side article.project:nth-of-type(even) .plate:not(.lead){grid-column:1}
}
/* Project pages: info box runs the full width of the photo, laid out horizontally,
with optional design notes along the bottom */
.tblock.wide{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,3fr);width:100%}
.tblock.wide .tb-title{border-bottom:0;border-right:1.5px solid var(--frame);display:flex;flex-direction:column;justify-content:center;padding:18px 20px}
.tblock.wide dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-content:stretch}
.tblock.wide .tb-row,.tblock.wide .tb-row:has(.team){display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-bottom:0;border-right:1px solid var(--rule)}
.tblock.wide .tb-row:last-child{border-right:0}
.tblock.wide .tb-row dt{padding:0}
.tblock.wide .tb-row dd,.tblock.wide .tb-row:has(.team) dd{padding:0}
.tblock.wide .tb-row:has(.team){grid-column:span 2}
.tblock.wide .tb-notes,.tblock.wide .view{grid-column:1 / -1}
.tb-notes{border-top:1.5px solid var(--frame);padding:18px 20px 20px}
.tb-notes h4{margin:0 0 10px;font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--npb)}
.tb-notes .prose p{margin:0 0 .9em;max-width:72ch}
.tb-notes .prose p:last-child{margin-bottom:0}
.tblock.wide .view{border-top:1.5px solid var(--frame)}
@media (max-width:820px){
.tblock.wide{grid-template-columns:minmax(0,1fr)}
.tblock.wide .tb-title{border-right:0;border-bottom:1.5px solid var(--frame)}
.tblock.wide .tb-row,.tblock.wide .tb-row:has(.team){border-right:0;border-bottom:1px solid var(--rule)}
.tblock.wide .tb-row:has(.team){grid-column:auto}
}
/* Art table focus: thin butter-yellow edge on every panel, thicker on the one in focus;
the others are dimmed under a grey wash while one is hovered */
.print{border:1px solid var(--name-color)}
.print-photo::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(14,14,13,.88);opacity:0;transition:opacity .35s ease;pointer-events:none}
.art-table:has(.print:hover) .print:not(:hover) .print-photo::before,
.art-table:focus-within .print:not(:focus):not(:hover) .print-photo::before{opacity:1}
.art-table:has(.print:hover) .print:not(:hover)::after{opacity:.4}
.print:hover,.print:focus,.print:focus-visible{border-color:var(--name-color);outline:3px solid var(--name-color);outline-offset:-1px}
.plate:not(.lead) .lead-link:hover,.dcard .plate .lead-link:hover{background:rgba(251,240,176,.06)}
/* Home page previews: focus point and zoom set per photo in the editor */
.project .plate img,.dcard .plate img{object-position:var(--fx,50%) var(--fy,50%);transform:scale(var(--fz,1));transform-origin:var(--fx,50%) var(--fy,50%)}
/* Photo credit: small line under the production photos */
.photo-credit{margin:10px 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--lead)}
.photo-credit-lead{margin:-30px 0 0}
/* Project pages: the lead photo shows whole, at its own proportions (tall photos are capped to the screen height) */
.p-lead.has-img{aspect-ratio:auto;background:none;display:flex;justify-content:center}
.p-lead.has-img img{position:static;width:100%;height:auto;max-height:85vh;object-fit:contain}
/* Phones: section menu sticks to the top while scrolling; Resume, Contact and social icons sit in a small bar fixed to the bottom */
@media (max-width:860px){
.index{display:contents}
.index > div:first-child{padding-top:28px}
.index nav{position:sticky;top:0;z-index:60;background:var(--vellum);margin:14px -24px 0;padding:10px 24px;
border-bottom:1px solid var(--npb-soft);gap:6px 18px;justify-content:space-between}
.index nav{flex-wrap:nowrap}
.index nav .idx-group h2{font-size:.68rem;letter-spacing:.1em;white-space:nowrap}
.idx-links{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--vellum);border-top:1px solid var(--npb-soft);
padding:9px 16px calc(9px + env(safe-area-inset-bottom,0px));justify-content:center;align-items:center;gap:6px 22px;font-size:.74rem}
.idx-social{gap:16px}
.wrap{padding-bottom:calc(64px + 44px + env(safe-area-inset-bottom,0px))}
main{padding-top:28px}
main section[id],main [id]{scroll-margin-top:52px}
}
@media (max-width:370px){.index nav{gap:6px 8px;padding-inline:12px}.index nav .idx-group h2{font-size:.6rem;letter-spacing:.04em}}
/* Art uses the full width of the page; on wide screens the table switches to six columns of smaller panels */
main > #art{max-width:none}
/* Art table: one box per category, laid out in centered rows with an even gap between them.
--pw is the panel width; positions inside a box are in panel widths (x) and panel heights (y). */
.art-flow{height:auto;margin-top:8px;perspective:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
gap:44px 56px;--pw0:clamp(150px,19cqi,250px)}
.art-clump{position:relative;display:flex;flex-direction:column;gap:10px;--pw:calc(var(--pw0) * var(--s, 1))}
.art-flow .art-label{position:static;transform:rotate(-2deg);transform-origin:left bottom;align-self:flex-start;margin-left:4px;
font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--npb);white-space:nowrap;
background:var(--vellum);padding:2px 6px;border:1px solid var(--npb-soft);z-index:auto}
.art-flow .art-label[data-empty]{visibility:hidden}
.art-stage{position:relative;width:calc(var(--pw) * var(--dw));height:calc(var(--pw) * var(--dh));perspective:1600px;perspective-origin:50% 30%}
.art-flow .print{left:calc(var(--pw) * var(--px));top:calc(var(--pw) * var(--py));width:var(--pw);transform-origin:50% 50%}
.art-flow .print-photo{aspect-ratio:auto;height:calc(var(--pw) * var(--ar, 1.25))}
.art-flow .print:hover,.art-flow .print:focus,.art-flow .print:focus-visible{z-index:1000}
@media (max-width:700px){
.art-flow{gap:32px 4cqi;--pw0:min(44cqi,220px)}
.art-clump{--pw:var(--pw0)}
.art-stage{width:calc(var(--pw) * var(--mw));height:calc(var(--pw) * var(--mh))}
.art-flow .print{left:calc(var(--pw) * var(--pxm));top:calc(var(--pw) * var(--pym))}
}
/* PDF viewer bar: "Open PDF in separate tab" button on the left, page arrows on the right */
.pdf-bar{justify-content:space-between}
.pdf-nav{display:inline-flex;align-items:center;gap:10px;margin-left:auto}
.pdf-open{margin-left:0;border:1px solid var(--npb);padding:6px 11px;line-height:1.2}
.pdf-open:hover{text-decoration:none;background:var(--npb);color:var(--vellum)}
@media (max-width:520px){
.pdf-bar{flex-wrap:nowrap;gap:8px}
.pdf-open{font-size:.64rem;letter-spacing:.05em;padding:6px 8px;white-space:nowrap}
.pdf-nav{gap:6px}
.pdf-count{min-width:0;font-size:.68rem;white-space:nowrap}
}
/* PDF bar: page arrows and "Open in new tab" share one look, a soft yellow outline */
.pdf-bar .pdf-open,.pdf-bar .hero-btn{border:1px solid rgba(251,240,176,.5);color:rgba(251,240,176,.85);background:transparent;
min-height:32px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease,border-color .2s ease}
.pdf-bar .hero-btn{min-width:38px;font-size:.95rem;padding:3px 10px}
.pdf-bar .pdf-open:hover,.pdf-bar .hero-btn:hover{background:var(--npb);border-color:var(--npb);color:var(--vellum);text-decoration:none}
.pdf-count{color:rgba(237,237,230,.75)}