:root {
  --ink:#101b33;
  --blue:#173f78;
  --red:#e54b38;
  --gold:#f2b84b;
  --cream:#f4f0e8;
  --paper:#fbfaf7;
  --line:#d9d5cc;
  --sans:"DM Sans",sans-serif;
  --display:"Oswald",sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans)
}
a {
  color:inherit;
  text-decoration:none
}
img {
  max-width:100%;
  height:auto
}
.site-header {
  min-height:12.25rem;
  max-width:90rem;
  margin:auto;
  padding:0 4.5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem
}
.brand {
  display:flex;
  align-items:center;
  gap:.8rem
}
.site-header>.brand {
  min-width:7.5rem;
  flex-direction:column;
  gap:.25rem;
  text-align:center
}
.brand-mark {
  width:7.5rem;
  height:10rem;
  display:grid;
  place-items:center;
  flex:0 0 7.5rem
}
.brand-mark img {
  width:7rem;
  height:9.5rem;
  object-fit:contain
}
.brand strong {
  font-size:.9rem
}
.brand small {
  display:block;
  font-size:.625rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  opacity:.65
}
.site-header nav {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(.65rem,1.3vw,1.35rem);
  font-size:.875rem;
  font-weight:700
}
.site-header nav a:hover,.nav-active {
  color:var(--red)
}
.header-actions {
  display:flex;
  flex-direction:column-reverse;
  gap:.5rem
}
.font-controls {
  height:2.6875rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line)
}
.font-controls button {
  width:2.375rem;
  height:2.5625rem;
  border:0;
  background:transparent;
  font-weight:800
}
.font-controls span {
  min-width:2.8rem;
  text-align:center;
  font-size:.5625rem
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  min-height:3rem;
  padding:0 1.25rem;
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  font-size:.75rem;
  font-weight:800
}
.button:hover {
  background:var(--red);
  border-color:var(--red)
}
.button.light {
  background:#fff;
  border-color:#fff;
  color:var(--ink)
}
.button.compact {
  min-height:2.75rem
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:.65rem;
  font-size:.625rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase
}
.eyebrow span {
  width:2rem;
  border-top:2px solid var(--red)
}
.eyebrow.light span {
  border-color:var(--gold)
}
.projects-hero,.project-hero {
  padding:clamp(4rem,8vw,8rem) max(4.5vw,calc((100vw - 81.875rem)/2));
  background:var(--blue);
  color:#fff
}
.projects-hero {
  display:grid;
  grid-template-columns:1fr .7fr;
  gap:8vw;
  align-items:end
}
.projects-hero h1,.project-hero h1 {
  margin:1rem 0;
  font:500 clamp(5rem,10vw,9rem)/.82 var(--display);
  letter-spacing:-.045em;
  text-transform:uppercase
}
.projects-hero h1 em {
  color:var(--gold);
  font-style:normal
}
.projects-hero>div:last-child>p {
  color:#d3ddea;
  line-height:1.8
}
.projects-intro,.project-overview {
  padding:clamp(4rem,7vw,7rem) max(4.5vw,calc((100vw - 81.875rem)/2));
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:5vw;
  align-items:end
}
.projects-intro h2,.project-overview h2,.project-submit h2,.section-heading h2,.chapter-view h2 {
  margin:.8rem 0 0;
  font:500 clamp(3.2rem,6vw,5.5rem)/.9 var(--display);
  text-transform:uppercase
}
.projects-intro>p,.project-overview>p {
  color:#68717e;
  line-height:1.8
}
.projects-intro>a {
  font-size:.72rem;
  font-weight:800
}
.project-index {
  padding:0 max(4.5vw,calc((100vw - 81.875rem)/2)) clamp(5rem,8vw,8rem)
}
.section-heading {
  display:grid;
  grid-template-columns:auto 1fr .7fr;
  gap:2rem;
  align-items:end;
  margin-bottom:2.5rem
}
.section-heading>span {
  color:var(--red);
  font:500 2.5rem var(--display)
}
.section-heading p {
  color:#68717e
}
.project-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line)
}
.project-card {
  min-height:19rem;
  padding:2rem;
  display:flex;
  flex-direction:column;
  background:#fff
}
/*
 * Older copies of projects.php marked one card as "featured". Keep that
 * legacy class visually neutral so it can never look like a selected card.
 */
.project-card.featured {
  background:#fff;
  color:inherit
}
.project-card:hover {
  background:var(--ink);
  color:#fff
}
.project-card>span {
  color:var(--red);
  font:500 2rem var(--display)
}
.project-card small {
  margin-top:2rem;
  font-weight:800;
  text-transform:uppercase
}
.project-card h3 {
  margin:.7rem 0;
  font:500 2.6rem/1 var(--display);
  text-transform:uppercase
}
.project-card p {
  margin:0;
  color:#6c7480
}
.project-card b {
  margin-top:auto;
  font-size:.7rem
}
.project-submit {
  padding:clamp(4rem,8vw,8rem) max(4.5vw,calc((100vw - 81.875rem)/2));
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7vw;
  background:var(--ink);
  color:#fff
}
.project-submit>div:last-child>p,.project-submit li {
  color:#d4dce6;
  line-height:1.75
}
.project-submit ul {
  padding-left:1.2rem
}
.project-submit a:not(.button) {
  color:var(--gold);
  font-weight:800
}
.project-hero {
  display:grid;
  grid-template-columns:1fr minmax(18rem,30rem);
  align-items:center;
  gap:7vw
}
.project-hero img {
  width:100%;
  height:23rem;
  object-fit:contain;
  background:#092443;
  border:1px solid rgba(255,255,255,.3);
  box-shadow:1rem 1rem 0 var(--gold)
}
.project-hero>div>p:last-child {
  color:#d3ddea
}
.chapter-nav {
  padding:0 max(4.5vw,calc((100vw - 81.875rem)/2)) 4rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--line)
}
.chapter-nav a {
  min-height:13rem;
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line)
}
.chapter-nav a.active,.chapter-nav a:hover {
  background:var(--gold)
}
.chapter-nav span {
  color:var(--red);
  font:500 2rem var(--display)
}
.chapter-nav small {
  margin-top:1rem;
  font-weight:800;
  text-transform:uppercase
}
.chapter-nav strong {
  margin:.4rem 0;
  font:500 1.8rem var(--display);
  text-transform:uppercase
}
.chapter-nav p {
  color:#626d7a;
  font-size:.75rem
}
.chapter-view {
  /*
   * Photographs benefit from the available screen width, especially on large
   * desktop monitors. Article text below remains independently constrained.
   */
  margin:0 clamp(1rem,2vw,2.5rem) 6rem;
  background:#092443;
  color:#fff
}
.chapter-view>header {
  padding:2rem;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:2rem
}
.chapter-view>header>a {
  font-size:.7rem;
  font-weight:800
}
.chapter-view iframe {
  display:block;
  width:100%;
  height:75vh;
  min-height:42rem;
  border:0;
  background:#fff
}
.chapter-view>footer {
  min-height:5rem;
  padding:0 2rem;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.chapter-view>footer a {
  font-size:.7rem;
  font-weight:800
}
.chapter-view a[aria-disabled=true] {
  pointer-events:none;
  opacity:.35
}

/* --------------------------------------------------------------------------
   Native Member Project galleries

   Legacy project pages are not embedded here. The deploy template renders
   these slides, controls, thumbnails, and article copy directly while the
   photograph files remain in their established archive directories.
   -------------------------------------------------------------------------- */
.chapter-photo-count {
  color:var(--gold);
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase
}
.project-native {
  background:var(--paper);
  color:var(--ink)
}
.project-slideshow {
  background:#071a31
}
.project-slide-stage {
  background:#061325
}
.review-slide {
  position:relative;
  width:100%;
  height:clamp(28rem,70vh,46rem);
  margin:0;
  display:none;
  align-items:center;
  justify-content:center;
  overflow:auto;
  background:#061325
}
.review-slide.is-active {
  display:flex
}
.review-slide img {
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  user-select:none
}
.project-slideshow .review-slide {
  flex-direction:column
}
.project-slideshow .review-slide img {
  flex:1 1 auto;
  min-height:0
}
.project-slideshow .review-slide figcaption {
  width:100%;
  box-sizing:border-box;
  flex:0 0 auto;
  padding:.85rem 1.25rem;
  border-top:1px solid rgba(255,255,255,.14);
  background:#101b33;
  color:#e8edf4;
  font-size:.9rem;
  line-height:1.5;
  text-align:left
}
/*
 * The shared media viewer deliberately keeps a fixed stage while zooming.
 * Member Projects receive a larger desktop stage than article slideshows so
 * archival photographs can take advantage of wide and high-resolution screens.
 */
.project-slideshow .review-slide.is-active,
.project-slideshow .review-slide.ipms-is-zoomed {
  height:clamp(34rem,86vh,80rem)!important;
  min-height:0!important;
  max-height:80rem!important
}
.project-thumb span {
  position:absolute;
  right:.45rem;
  bottom:.4rem;
  padding:.2rem .38rem;
  background:rgba(6,19,37,.84);
  color:#fff;
  font:700 .58rem var(--sans)
}
.project-story {
  padding:clamp(3rem,6vw,6rem);
  display:grid;
  grid-template-columns:minmax(11rem,20rem) minmax(0,48rem);
  justify-content:center;
  gap:clamp(2rem,6vw,6rem);
  background:#fff
}
.project-story-label {
  align-self:start;
  position:sticky;
  top:2rem
}
.project-story-label>p:last-child {
  margin-top:2rem;
  color:#69727f;
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase
}
.project-story-copy {
  max-width:48rem;
  font-size:1rem;
  line-height:1.85
}
.project-story-copy h3 {
  margin:0 0 .75rem;
  font:500 clamp(2.6rem,5vw,4.5rem)/.95 var(--display);
  text-transform:uppercase
}
.project-story-copy p {
  margin:0 0 1.5rem
}
.project-story-copy .project-story-deck {
  margin-bottom:2.5rem;
  padding-bottom:1.5rem;
  border-bottom:2px solid var(--gold);
  color:#68717e;
  font-weight:800
}
footer,.site-footer {
  min-height:19rem;
  padding:3.5rem max(4.5vw,calc((100vw - 81.875rem)/2));
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:3rem;
  align-items:center;
  border-top:1px solid var(--line)
}
.footer-brand .brand-mark {
  width:5rem;
  height:7rem;
  flex-basis:5rem
}
.footer-brand .brand-mark img {
  width:4.7rem;
  height:6.6rem
}
.footer-links {
  display:flex;
  gap:1.3rem;
  font-size:.72rem;
  font-weight:800
}
footer>p {
  text-align:right;
  color:#777e88;
  font-size:.68rem;
  line-height:1.7
}
@media(max-width:900px) {
  .site-header {
    padding:1rem 1.25rem;
    flex-wrap:wrap
  }
  .site-header nav {
    order:3;
    width:100%
  }
  .projects-hero,.projects-intro,.project-overview,.project-submit,.project-hero {
    grid-template-columns:1fr
  }
  .project-grid {
    grid-template-columns:1fr
  }
  .chapter-nav {
    grid-template-columns:1fr
  }
  .chapter-view iframe {
    height:65vh;
    min-height:32rem
  }
  .project-story {
    grid-template-columns:1fr
  }
  .project-story-label {
    position:static
  }
  .review-slide-controls {
    justify-content:center
  }
  footer,.site-footer {
    grid-template-columns:1fr;
    text-align:center
  }
  footer .brand {
    justify-content:center
  }
  footer>p {
    text-align:center
  }
}
@media(max-width:760px) {
  /* Keep the expanded desktop viewer comfortable on phones and small tablets. */
  .project-slideshow .review-slide.is-active,
  .project-slideshow .review-slide.ipms-is-zoomed {
    height:60vh!important;
    min-height:22rem!important;
    max-height:38rem!important
  }
}