.architecture-waves-hero{isolation:isolate}
.architecture-wave-field{
  position:absolute;
  z-index:1;
  inset:52px 0 25.5svh;
  overflow:hidden;
  border-radius:0;
  background:rgba(255,255,255,.2);
  border-bottom:1px solid #1d1d1f;
  pointer-events:none;
}
.architecture-wave-field:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg,rgba(245,245,247,.08),rgba(245,245,247,.24));
  pointer-events:none;
}
.architecture-wave-field .selected-works-waves{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  opacity:.78;
  mix-blend-mode:multiply;
}
.architecture-waves-hero .category-grid,
.architecture-waves-hero .category-image-stage{z-index:0}
.architecture-waves-hero .category-kicker,
.architecture-waves-hero .category-figure,
.architecture-waves-hero h1.selected-works-title{
  position:relative;
  z-index:3;
}
.architecture-waves-hero h1.selected-works-title{
  min-height:1em;
  color:#1d1d1f;
  white-space:nowrap;
}
.category-architecture-archive .arch-work-card{
  width:min(100%,500px);
  justify-self:center;
  content-visibility:auto;
  contain-intrinsic-size:auto 720px;
}
.category-architecture-archive .arch-work-index{
  margin-left:clamp(54px,4vw,76px);
}
.category-architecture-archive .arch-work-card:nth-child(odd){
  position:relative;
  left:clamp(52px,7.5vw,145px);
}
@media(max-width:900px){
  .architecture-wave-field{inset:52px 0 34svh;border-radius:0}
  .architecture-wave-field .selected-works-waves{opacity:.58}
  .architecture-waves-hero h1.selected-works-title{white-space:normal}
  .category-architecture-archive .arch-work-index{margin-left:0}
  .category-architecture-archive .arch-work-card:nth-child(odd){left:0}
}
@media(prefers-reduced-motion:reduce){.architecture-wave-field .selected-works-waves{opacity:.5}}

/* ARCH archive: three projects to a row on wide screens (two on mid-size,
   one on phones), each card filling its column. */
.category-architecture-archive .arch-work-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,3vw,56px)}
.category-architecture-archive .arch-work-card{width:100%;justify-self:stretch}
.category-architecture-archive .arch-work-card:nth-child(odd){left:0}
@media(max-width:1100px){.category-architecture-archive .arch-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.category-architecture-archive .arch-work-grid{grid-template-columns:1fr}}

/* Oct 6: centre SELECTED WORKS vertically in the band under the wave field
   (the band is the bottom 25.5svh of the hero; 34svh on narrow screens). */
.architecture-waves-hero h1.selected-works-title{position:absolute;left:var(--pad,24px);right:var(--pad,24px);bottom:0;width:auto;height:25.5svh;margin:0;display:flex;align-items:center;justify-content:center}
@media(max-width:900px){.architecture-waves-hero h1.selected-works-title{height:34svh;text-align:center}}

/* Oct 6: Call of the Sea card: cover image, and on hover the same
   in-progress tag as OpenGym on the PRODUCTS page. */
.category-architecture-archive .arch-wip{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:rgba(245,245,247,.42);opacity:0;transition:opacity .35s ease;pointer-events:none}
.category-architecture-archive .arch-wip b{padding:12px 18px;border:1px solid #1d1d1f;background:#f5f5f7;color:#1d1d1f;font:500 12px/1 DM Mono,ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
.category-architecture-archive .arch-work-card:hover .arch-wip,.category-architecture-archive .arch-work-card:focus-visible .arch-wip{opacity:1}
@media(hover:none){.category-architecture-archive .arch-wip{opacity:1;background:none;place-items:end start;padding:12px}.category-architecture-archive .arch-wip b{padding:8px 10px;font-size:10px}}
/* Oct 6: an in-progress project (Call of the Sea) is not a link. */
.category-architecture-archive .arch-work-card.is-wip{cursor:default}
.arch-work-index nav span.is-wip{color:rgba(23,24,22,.32);font-size:clamp(12px,1.08vw,16px);line-height:1.25;cursor:default}