/* Sebastian's review: muted electric blue, ivory/ash, and complete visible artwork. */
:root{
  --paper:#f3f0e9;
  --ink:#172849;
  --line:#c5ccd6;
  --acid:#3d65c4;
}
body{background:var(--paper);color:var(--ink)}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline-color:#315fc7}
.project-index{background:#e4e7ea}
.project-row{border-bottom-color:var(--line)}
.project-row.active,.range-list button:hover strong{color:#2857b5}
.project-row small,.range-list small,.index-bottom{color:#50617e}
.filters button.active{background:#2857b5;color:#fff}
.stage{
  background-color:#315bb9!important;
  color:#f8f7f2;
  --accent:#bad1ff!important;
  display:grid;
  grid-template-columns:minmax(260px,41%) minmax(0,59%);
  grid-template-rows:auto 1fr auto;
  gap:0 24px;
  padding:28px 35px 25px;
  min-height:680px;
}
.stage-backdrop,.stage-tint{display:none}
.stage-top{
  position:relative;top:auto;left:auto;right:auto;
  grid-column:1/-1;grid-row:1;
  padding-bottom:14px;border-bottom:1px solid #ffffff50;
}
.stage-copy{
  position:relative;top:auto;left:auto;right:auto;
  grid-column:1;grid-row:2;align-self:center;
  padding:32px 0 38px;
  pointer-events:auto;
}
.stage-copy>p:first-child{margin-bottom:18px}
.stage h2{
  font-size:clamp(36px,4.4vw,69px);
  line-height:1.02;
  max-width:100%;
  overflow-wrap:anywhere;
  text-shadow:none;
}
.stage h2 em{color:#bad1ff}
.stage-copy #stage-summary{max-width:390px;font-size:14px;line-height:1.6;text-shadow:none}
.open-project{border-color:#ffffff90}
.art-button,.stage.landscape .art-button{
  position:relative;inset:auto;
  grid-column:2;grid-row:2;
  width:100%;height:100%;
  min-height:380px;
  padding:26px;
  align-items:center;justify-content:center;
  background:#eef0ee;
  border:1px solid #ffffff60;
  cursor:zoom-in;
}
.art-button img,.stage.landscape .art-button img{
  width:100%;height:100%;max-height:450px;
  object-fit:contain;object-position:center;
  opacity:1;mask-image:none;filter:none;
}
.stage-bottom{
  position:relative;left:auto;right:auto;bottom:auto;
  grid-column:1/-1;grid-row:3;
  margin-top:8px;
}
.preview-thumbs img{object-fit:contain;background:#f3f0e9}
.about{background:#172d59;color:#f6f4ed}
.about h2 em{color:#b7cdfd}
.about-copy .about-note{color:#d3dced}
.about-disclosures details{border-color:#7892bf}
.about-disclosures summary:hover{color:#c4d5ff}
.learning{background:#f3f0e9}
.contact{background:#dae3f4;color:#172849}
.contact a{border-color:#2b57a9}
.case-info{background:#f3f0e9}
.case-tabs button[aria-selected=true]{border-color:#315fc7}
.case-tabs button:hover{color:#315fc7}
.case-gallery{background:#e1e5ec}
.case-header>button:hover{background:#2b57a9}
.project-documents{margin-top:30px;border-top:1px solid var(--line);padding-top:20px}
.project-documents h3{font-size:19px;letter-spacing:-.03em}
.project-documents>p{font-size:11px;line-height:1.6;color:#50617e;margin:9px 0 15px}
.project-document-list{display:grid;gap:7px}
.project-document-list a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;
  background:#e4e9f2;border:1px solid #c3cfdf;
  font-size:11px;line-height:1.35;overflow-wrap:anywhere;
}
.project-document-list a:hover{background:#d3def3;border-color:#315fc7}
@media(max-width:1100px){
  .stage{grid-template-columns:minmax(220px,42%) minmax(0,58%);padding:24px;gap:0 18px}
  .stage h2{font-size:clamp(34px,4.1vw,55px)}
  .art-button,.stage.landscape .art-button{padding:16px}
}
@media(max-width:760px){
  .stage{
    display:grid;grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto auto;
    gap:0;
    min-height:0;
    padding:20px 6% 22px;
  }
  .stage-top{grid-column:1;grid-row:1;padding-bottom:13px}
  .art-button,.stage.landscape .art-button{
    grid-column:1;grid-row:2;
    min-height:0;height:clamp(230px,65vw,370px);
    margin-top:18px;padding:12px;
  }
  .art-button img,.stage.landscape .art-button img{max-height:100%;height:100%;width:100%;object-fit:contain}
  .stage-copy{grid-column:1;grid-row:3;padding:28px 0 20px}
  .stage-copy>p:first-child{margin-bottom:13px}
  .stage h2{font-size:clamp(34px,8.5vw,55px)}
  .stage-copy #stage-summary{font-size:13px;margin-top:15px;max-width:100%}
  .open-project{margin-top:9px}
  .stage-bottom{grid-column:1;grid-row:4;margin-top:0;padding-top:13px}
  .preview-thumbs{max-width:35%}
}
@media(max-width:370px){
  .stage h2{font-size:32px}
  .art-button,.stage.landscape .art-button{height:225px}
  .stage-top>span{max-width:100px}
}