:root{
  --ink:#050505;
  --came:#26262a;
  --lead:#55555c;
  --chalk:#e9e5dd;
  --dim:#8e8a83;
  --amber:#c4762f;
  --cobalt:#5f77bf;
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --gut:clamp(20px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--chalk);
  font-family:var(--body);font-size:15px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut);width:100%}
.came{height:1px;background:var(--came);border:0;margin:0}

/* masthead */
header.top{
  position:sticky;top:0;z-index:60;background:rgba(5,5,5,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--came)
}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.mark{font-family:var(--display);font-weight:400;font-size:clamp(14px,2vw,17px);
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.mark span{color:var(--dim)}
nav.top-nav{display:flex;gap:clamp(14px,2.4vw,30px);overflow-x:auto;scrollbar-width:none}
nav.top-nav::-webkit-scrollbar{display:none}
nav.top-nav a{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;
  white-space:nowrap;transition:color .25s,border-color .25s
}
nav.top-nav a:hover,nav.top-nav a:focus-visible{color:var(--chalk);border-bottom-color:var(--amber)}
nav.top-nav a[aria-current="page"]{color:var(--chalk);border-bottom-color:var(--amber)}

/* page head */
.page-head{padding:clamp(46px,8vh,84px) 0 clamp(26px,4vh,44px)}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin:0 0 14px}
.page-head h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(28px,5.4vw,50px);line-height:1.12;letter-spacing:.13em;
  text-transform:uppercase;margin:0 0 14px
}
.page-head p.lede{max-width:60ch;color:var(--dim);margin:0}
.page-head .count{font-size:11px;letter-spacing:.16em;color:var(--lead);text-transform:uppercase;margin:14px 0 0}

section{padding:0 0 clamp(52px,8vh,92px)}
.sec-head{display:flex;align-items:baseline;gap:20px;margin:clamp(40px,6vh,68px) 0 30px}
.sec-head h2{
  font-family:var(--display);font-weight:400;font-size:clamp(20px,3.2vw,30px);
  letter-spacing:.16em;text-transform:uppercase;margin:0;white-space:nowrap
}
.sec-head .rule{flex:1;height:1px;background:var(--came);min-width:30px}

/* gallery */
.gal{columns:3;column-gap:14px}
@media(max-width:900px){.gal{columns:2}}
@media(max-width:520px){.gal{columns:1}}
.gal figure{
  margin:0 0 14px;break-inside:avoid;position:relative;cursor:zoom-in;
  border:1px solid var(--came);background:#0b0b0c;
  opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease
}
.gal figure.in{opacity:1;transform:none}
.gal figure img{width:100%;transition:opacity .4s}
.gal figure:hover img{opacity:.8}
.gal figure:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.gal-note{margin:30px 0 0;color:var(--lead);font-size:12.5px}

/* home: featured + section links */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,30px)}
@media(max-width:720px){.pair{grid-template-columns:1fr}}
.card{display:block;text-decoration:none;border:1px solid var(--came);background:#0b0b0c;transition:border-color .3s}
.card:hover,.card:focus-visible{border-color:var(--amber)}
.card img{width:100%;height:clamp(200px,26vw,320px);object-fit:cover;transition:opacity .4s}
.card:hover img{opacity:.82}
.card .cap{padding:18px 22px 22px}
.card .cap h3{
  font-family:var(--display);font-weight:400;font-size:clamp(17px,2.4vw,23px);
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 5px
}
.card .cap p{margin:0;color:var(--dim);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}

/* two-column text/photo */
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.two p{margin:0 0 18px;max-width:52ch}
.two img{border:1px solid var(--came);width:100%}

/* timeline */
.tl{border-top:1px solid var(--came)}
.tl .row{display:grid;grid-template-columns:150px 1fr;gap:clamp(16px,3vw,40px);
  padding:20px 0;border-bottom:1px solid var(--came)}
@media(max-width:640px){.tl .row{grid-template-columns:1fr;gap:4px;padding:16px 0}}
.tl .yr{font-family:var(--display);font-size:17px;letter-spacing:.08em;color:var(--amber);white-space:nowrap}
.tl .what{margin:0;max-width:60ch}

/* record lists */
.ex{list-style:none;margin:0;padding:0;border-top:1px solid var(--came)}
.ex li{display:grid;grid-template-columns:80px 1fr;gap:clamp(14px,3vw,32px);
  padding:16px 0;border-bottom:1px solid var(--came)}
@media(max-width:640px){.ex li{grid-template-columns:1fr;gap:2px}}
.ex .yr{font-family:var(--display);font-size:16px;color:var(--cobalt);letter-spacing:.06em}
.ex .title{margin:0}
.ex .where{color:var(--dim);display:block;font-size:13.5px}
.ex .award{
  display:inline-block;margin-top:5px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);border:1px solid rgba(196,118,47,.45);padding:2px 9px
}
.ex li.more{display:none}
.ex.all li.more{display:grid}
.more-btn{
  margin-top:26px;background:none;border:1px solid var(--lead);color:var(--chalk);
  font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:12px 30px;cursor:pointer;transition:border-color .25s,color .25s
}
.more-btn:hover,.more-btn:focus-visible{border-color:var(--amber);color:var(--amber)}

/* footer — carries contact on every page */
footer{border-top:1px solid var(--came);margin-top:auto;padding:clamp(38px,6vh,58px) 0 30px}
.foot-grid{
  display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:clamp(24px,4vw,56px);
  padding-bottom:32px;border-bottom:1px solid var(--came)
}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:30px}}
.foot-grid h4{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--lead);
  margin:0 0 14px;font-weight:500
}
.foot-addr{font-family:var(--display);font-size:19px;line-height:1.6;letter-spacing:.05em;margin:0}
.foot-line{margin:0 0 8px}
.foot-line a{
  font-family:var(--display);font-size:19px;letter-spacing:.07em;text-decoration:none;
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s
}
.foot-line a:hover,.foot-line a:focus-visible{color:var(--amber);border-bottom-color:var(--amber)}
.foot-note{margin:0;color:var(--dim);font-size:13px;max-width:34ch}
.foot-base{padding-top:24px;text-align:center}
.foot-base p{margin:0;color:var(--lead);font-size:11.5px;letter-spacing:.1em}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(3,3,3,.97);
  display:none;align-items:center;justify-content:center;padding:clamp(16px,5vh,64px)}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain;border:1px solid var(--came)}
.lb button{position:absolute;background:none;border:1px solid var(--came);color:var(--chalk);
  width:46px;height:46px;cursor:pointer;font-size:18px;line-height:1;
  transition:border-color .25s,color .25s}
.lb button:hover,.lb button:focus-visible{border-color:var(--amber);color:var(--amber)}
.lb .prev{left:clamp(10px,3vw,34px);top:50%;transform:translateY(-50%)}
.lb .next{right:clamp(10px,3vw,34px);top:50%;transform:translateY(-50%)}
.lb .close{top:clamp(10px,3vw,26px);right:clamp(10px,3vw,34px)}
.lb .idx{position:absolute;bottom:clamp(12px,3vw,26px);left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.2em;color:var(--lead)}

@media(max-width:760px){
  .mark span{display:none}
  .sec-head{flex-wrap:wrap;gap:10px 16px}
  .sec-head h2{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gal figure{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important}
}