:root{
  --ink:#050505;
  --came:#26262a;
  --lead:#55555c;
  --chalk:#e9e5dd;
  --dim:#8e8a83;
  --amber:#c4762f;
  --cobalt:#5f77bf;
  --display:"Sorts Mill Goudy",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;
  /* Sorts Mill Goudy defaults to old-style figures; Keith's original
     used lining figures for the address and dates */
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
  -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)}

/* home hero — image capped at native width so it never upscales */
.hero{padding:clamp(44px,8vh,90px) 0 clamp(44px,8vh,86px)}
.hero-in{display:grid;grid-template-columns:1fr 530px;gap:clamp(30px,5vw,70px);align-items:center}
.hero-img{width:100%;max-width:530px;border:1px solid var(--came)}
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,5.6vw,56px);line-height:1.1;letter-spacing:.13em;
  text-transform:uppercase;margin:0 0 18px
}
.hero .lede{max-width:44ch;color:var(--dim);margin:0}
@media(max-width:980px){
  .hero-in{grid-template-columns:1fr;gap:32px}
  .hero-img{max-width:100%}
}

/* ---- splash landing page ----
   Proportions measured off Keith's original opener: cap heights ran
   26 / 19 / 15px on an 800px canvas, so the name sits at 0.73 of the
   wordmark and the descriptor at 0.58, with tracking of roughly
   0.085em rather than the wide spacing of the interior headings.
   One unit drives all of it so the block scales as a whole. */
.splash-body{--u:min(1vw,1.2vh)}
.splash{
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--u) * 2.2) 0;text-align:center
}
.splash > .wrap{max-width:calc(var(--u) * 88)}
.splash-head h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,calc(var(--u) * 4.56),68px);line-height:1;letter-spacing:.083em;
  text-transform:uppercase;margin:0 0 calc(var(--u) * 1.3)
}
.splash-head .name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(20px,calc(var(--u) * 3.33),50px);line-height:1;letter-spacing:.142em;
  text-transform:uppercase;margin:0 0 calc(var(--u) * 2.1);color:var(--chalk)
}
.splash-head .disc{
  font-family:var(--display);font-weight:400;
  font-size:clamp(14px,calc(var(--u) * 2.63),39px);line-height:1.3;letter-spacing:.098em;
  text-transform:uppercase;color:var(--dim);margin:0 0 calc(var(--u) * 4.2)
}
.splash-pair{
  /* Measured off the original: the two pictures span 65% of the canvas
     with a 13% gap between them — a far more generous separation than a
     typical grid gutter, and a good part of why the old opener breathed. */
  display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 13);
  max-width:calc(var(--u) * 65);margin:0 auto calc(var(--u) * 2)
}
.splash-card{text-decoration:none;display:block}
.splash-card .frame{
  display:block;position:relative;overflow:hidden;aspect-ratio:1/1;background:#0b0b0c
}
.splash-card .frame::after{
  content:"";position:absolute;inset:0;border:1px solid var(--came);
  pointer-events:none;transition:border-color .35s
}
.splash-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.6,.2,1),opacity .4s
}
.splash-card:hover img,.splash-card:focus-visible img{transform:scale(1.05);opacity:.9}
.splash-card:hover .frame::after,.splash-card:focus-visible .frame::after{border-color:var(--amber)}
.splash-card .lbl{
  display:block;margin-top:calc(var(--u) * 1.1);
  font-size:clamp(10px,calc(var(--u) * 1.25),15px);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);transition:color .3s
}
.splash-card:hover .lbl,.splash-card:focus-visible .lbl{color:var(--chalk)}
.splash-nav{margin:0 0 calc(var(--u) * 3.2);display:flex;flex-wrap:wrap;
  justify-content:center;align-items:baseline;gap:0 calc(var(--u) * .4);
  max-width:calc(var(--u) * 70);margin-left:auto;margin-right:auto}
.splash-nav a{
  font-size:clamp(10px,calc(var(--u) * 1.25),15px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;
  transition:color .25s,border-color .25s
}
.splash-nav a:hover,.splash-nav a:focus-visible{color:var(--chalk);border-bottom-color:var(--amber)}
.splash-nav .dot{color:var(--lead);margin:0 calc(var(--u) * .6)}
.splash-copy{margin:0;color:var(--lead);font-size:clamp(9.5px,calc(var(--u) * 1.05),12px);letter-spacing:.1em}

@media(max-width:620px){
  .splash-body{--u:min(2.6vw,1.15vh)}
  .splash{min-height:0;padding:36px 0}
  .splash-pair{gap:calc(var(--u) * 8);max-width:100%}
}

/* 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:400;
  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 — uniform tile grid; each tile is a crop, the lightbox shows
   the full uncropped work */
.gal{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px
}
@media(max-width:1040px){.gal{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.gal{grid-template-columns:repeat(2,1fr);gap:10px}}
.gal figure{
  margin:0;position:relative;cursor:zoom-in;overflow:hidden;background:#0b0b0c;
  aspect-ratio:1/1;opacity:0;transition:opacity .6s ease
}
.gal figure.in{opacity:1}
.gal figure img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .6s cubic-bezier(.2,.6,.2,1),opacity .4s
}
.gal figure:hover img{transform:scale(1.06);opacity:.88}
.gal figure::after{
  content:"";position:absolute;inset:0;border:1px solid transparent;
  pointer-events:none;transition:border-color .3s
}
.gal figure:hover::after{border-color:rgba(196,118,47,.6)}
.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;transition:none}
  .gal figure:hover img{transform:none}
  *{transition-duration:.01ms!important}
}