:root{--ink:#141210;--ink2:#1E1B17;--line:#3E362D;--parch:#F2ECE1;--mute:#A0968A;--brass:#D8B678}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--parch);font:400 19px/1.72 'Source Serif 4',Georgia,serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.mono{font:400 12px/1 "IBM Plex Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.mast{padding:16vh 0 0;text-align:center}
.mast h1{font:400 clamp(46px,13vw,132px)/.9 'Instrument Serif',serif;letter-spacing:.06em}
.mast .rule{height:1px;background:var(--line);margin:34px 0 14px}
.mast .credit{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.mast .lede{max-width:44ch;margin:26px auto 0;color:var(--mute);font-style:italic;font-size:18px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 22px;padding:56px 0 90px}
@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr);gap:52px 34px}}
@media(min-width:1050px){.grid{grid-template-columns:repeat(4,1fr)}}
.tile{display:block}
.tile:focus-visible .frame{outline:1px solid var(--brass);outline-offset:5px}
.frame{display:block;border:1px solid var(--line);padding:7px;background:var(--ink2);transition:border-color .35s}
.frame img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;filter:saturate(.94) brightness(.94);transition:filter .45s,transform .8s}
.tile:hover .frame{border-color:var(--brass)}
.tile:hover .frame img{filter:none;transform:scale(1.015)}
.meta{display:block;padding-top:11px}
.meta .pl{font:400 12px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--brass);font-style:normal;display:block}
.meta b{display:block;font:400 20px/1.2 'Instrument Serif',serif;letter-spacing:.03em;margin-top:5px}
.meta em{display:block;font-size:14px;color:var(--mute);margin-top:4px;line-height:1.45;opacity:0;transform:translateY(-3px);transition:opacity .4s,transform .4s}
.tile:hover .meta em,.tile:focus-visible .meta em{opacity:1;transform:none}
@media(hover:none){.meta em{opacity:1;transform:none}}
.dhead{padding:9vh 0 0;text-align:center}
.dhead .pl{font:400 12px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--brass)}
.dhead h2{font:400 clamp(36px,8vw,80px)/1 'Instrument Serif',serif;letter-spacing:.045em;margin:16px 0 12px}
.dhead .sub{color:var(--mute);font-style:italic;font-size:18px}
.hero{margin:44px auto 0;max-width:620px;border:1px solid var(--line);padding:9px;background:var(--ink2)}
.hero img{display:block;width:100%;height:auto}
.story{max-width:34em;margin:52px auto 0}
.story p{margin-bottom:1.05em}
.story.about{margin-top:44px}
.story .contact{margin-top:2.2em;color:var(--mute)}
.story .contact a{color:var(--brass);border-bottom:1px solid var(--line)}
.story .sign{margin-top:2.2em}
.plates{display:grid;grid-template-columns:1fr;gap:30px;max-width:920px;margin:64px auto 0}
@media(min-width:700px){.plates{grid-template-columns:1fr 1fr;gap:38px}}
.plate{border:1px solid var(--line);padding:9px;background:var(--ink2)}
.plate img{display:block;width:100%;height:auto}
.plate figcaption{font:400 12px/1 "IBM Plex Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);padding-top:9px}
.scene{max-width:1000px;margin:64px auto 0;border:1px solid var(--line);padding:9px;background:var(--ink2)}
.scene img{display:block;width:100%;height:auto}
.sketchwrap{max-width:460px;margin:64px auto 0}
.vid{max-width:440px;margin:64px auto 0}
.vid video{display:block;width:100%;border:1px solid var(--line);padding:9px;background:var(--ink2)}
.vid .cap{font:400 12px/1.6 "IBM Plex Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);padding-top:9px}
details.tech{max-width:760px;margin:70px auto 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
details.tech summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;align-items:center;font:400 12px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
details.tech summary::-webkit-details-marker{display:none}
details.tech summary::after{content:"+";color:var(--brass);font-size:17px}
details.tech[open] summary::after{content:"\2013"}
.tr{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-top:1px solid var(--line)}
@media(min-width:640px){.tr{grid-template-columns:180px 1fr;gap:26px}}
.tr dt{font:400 12px/1.5 "IBM Plex Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--brass)}
.tr dd{font-size:17px;color:#E4DDD1}
.tr dd ul{list-style:none}
.tr dd li{padding-left:14px;position:relative}
.tr dd li::before{content:"—";position:absolute;left:0;color:var(--mute)}
.tr:last-child{padding-bottom:26px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:900px;margin:74px auto 0;border-top:1px solid var(--line);padding:26px 0 90px}
.pager a{font:400 12px/1.5 "IBM Plex Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.pager a:hover{color:var(--brass)}
.foot{border-top:1px solid var(--line);padding:26px 0 70px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.foot a:hover{color:var(--brass)}
.links{max-width:34em;margin:3em auto 0;border-top:1px solid var(--line);padding-top:2em}
.links h3{margin-bottom:1.2em;color:var(--mute);font-weight:400}
.links p{margin-bottom:1em}
.links a{color:var(--brass);border-bottom:1px solid var(--line)}
.links a:hover{border-color:var(--brass)}
.links span{display:block;color:var(--mute);font-size:16px;margin-top:.2em}
.copy{max-width:34em;margin:3em auto 0;text-align:center;padding-bottom:70px;line-height:1.6}
.foot+.copy{margin-top:0;padding-bottom:60px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}