:root {
  --wa-font-family-body: tekton-pro;
  --wa-font-family-heading: am-tripoli;
}

#front-header {
  width: 40%;
  margin-left: 10%;
  margin-top: 10vh;
  text-align: right;
  container-type: inline-size;
}

#front-header h1 {
  font-size: 19cqw;
  margin-bottom: -1rem;
}

#front-header .tagline {
  text-transform: uppercase;
  font-size: 6cqw;
}

#explore-by, #section-nav {
  width: 50%;
}

#explore-by h2 {
  margin-bottom: -1rem;
  font-size: clamp(var(--wa-font-size-l), 2vw, 2rem);
}

.image-button {
  display: flex;
}

.image-button::part(base) {
  text-transform: uppercase;
  font-size: var(--wa-font-size-l);
  padding: var(--wa-space-s);
  height: auto;
}

.image-button #credit-line {
  text-transform: none;
}

.image-button #description {
  text-transform: none;
}

.image-button wa-include > svg {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

#section-nav .image-button div {
  display: inline-block;
  vertical-align: middle;
}

#section-nav .image-button .button-image {
  width: 40%;
}

#section-nav .image-button .button-label {
  width: 55%;
  text-wrap: balance;
  text-align: right;
}

#specifications wa-button {
  width: 95%;
  margin: 1vh;
}

#specifications wa-button div {
  display: inline-flex;
  vertical-align: middle;
}

#specifications wa-button span {
  margin: auto;
}

#specifications wa-include {
  display: inline-flex;
  margin-right: 0.5rem;
}

#specifications wa-include > svg {
  height: 3em;
}


#drawer-spaces .asset_title {
  text-wrap: balance;
}

.title-menu {
  text-align: right;
  width: 20cqw;
  position: fixed;
}

.title-menu h1 {
  font-size: clamp(var(--wa-font-size-l), 3cqw, 2rem);
}

#section-nav {
  margin-top: 10vh;
}

#section-nav h2 {
  font-family: tekton-pro;
  font-weight: 400;
  text-align: right;
  margin-bottom: 0;
  font-size: clamp(var(--wa-font-size-l), 2.5cqh, 2rem);
}

#section-nav .field-content {
  font-family: neue-haas-grotesk-display;
  font-weight: 700;
  text-align: right;
  font-size: clamp(var(--wa-font-size-s), 1.5cqh, 1rem);
}

.drawing, #specifications {
  border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-neutral-border-loud);
}

#title-block h1 {
  border-top: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-neutral-border-loud);
  border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-neutral-border-loud);
  border-right: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-neutral-border-loud);  
}

#title-block div:first-of-type {
  border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-neutral-border-loud);
  border-right: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-neutral-border-loud);
  border-bottom: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-neutral-border-loud);        
}

#title-block h3 {
  font-family: neue-haas-grotesk-display;
  margin-top: 2rem;
}

#meta-block {
  border-top: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-neutral-border-loud);
  border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-neutral-border-loud);
  border-right: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-neutral-border-loud);
}

.drawing #sidebar {
  border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-neutral-border-loud);
  overflow: scroll;  
}

.drawing {
  margin: 3vh;
  max-width: 80%;
  height: 94vh;
  --flank-size: 18rem;
  --divider-width: 1.25rem;
}

.room_layout #display-area {
  margin: 3vh;
}
.room_layout .asset_title {
  text-align: right;
}

#specifications, #title-block {
  min-height: 33%;
}

#title-block {
  text-align: right;
}

#title-block h1 {
  font-size: clamp(var(--wa-font-size-l), 5cqw, 2rem);
  margin-bottom: 0rem;
}

#title-block h2 {
  font-family: tekton-pro;
  font-weight: 400;
  font-size: clamp(var(--wa-font-size-l), 2cqw, 2rem);
  text-transform: uppercase;
}

#title-block wa-button wa-icon {
  font-size: clamp(var(--wa-font-size-l), 1.5cqw, 2rem);
}

#meta-block h3 {
  font-family: neue-haas-grotesk-display;
  text-align: center;
  border-bottom: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-neutral-border-loud);
  margin-bottom: 0;
  padding: 1rem 0;
}

#meta-block .wa-stack {
  border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-neutral-border-loud);
}

#meta-block div:not(.field-label, .field-content, #accession, .wa-stack, #archive-ref), #colophon h2 {
  border-bottom: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-neutral-border-loud);
}

.field-label {
  font-family: neue-haas-grotesk-display;
  text-transform: uppercase;
}

#date .field-label {
  min-width: 3.5rem;
}

#accession .field-content, #specifications .field-label, wa-drawer::part(header) {
  font-family: neue-haas-grotesk-display;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  padding: 1rem 0;
}

#archive-ref {
  width: clamp(var(--wa-font-size-l), 10cqw, 5rem);
  text-align: center;
}

#archive-ref wa-button {
  width: 100%;
  font-size: clamp(var(--wa-font-size-l), 2cqw, 2rem);
}

#archive-ref wa-button wa-icon {
  font-size: clamp(var(--wa-font-size-l), 3cqw, 2rem);
}

.ref-list, #specifications ul {
  list-style: none;
  text-align: left;
  padding-left: 2em;
  text-indent: -2em;
}

.drawing #display-area {
  max-height: 100%;
  overflow: hidden;
  padding-top: 1em;
}

.drawing wa-carousel {
  height: 85vh;
}

.drawing wa-carousel::part(navigation-button):hover {
  background-color: var(--wa-color-fill-quiet);
}

.drawing wa-carousel-item object {
  height: 100%;
}

.drawing #sidebar {
  height: 100%;
  padding: 1vh;
}

.drawing #sidebar > div {
  width: 100%;
}

.asset_title {
  text-transform: uppercase;
  text-decoration: underline;
  font-family: tekton-pro;
  font-size: clamp(var(--wa-font-size-l), 3cqh, 2rem);
}

#code {
  float: left;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-left: 10px solid;
  border-right: 10px solid;
  padding: 0 0.5cqw;
  left: 3cqw;
  position: relative;
  top: -3cqh;
  border-radius: var(--wa-border-radius-m);
}

#display-area g.hover-active,
#display-area g.focus-active {
  filter: sepia(100%) hue-rotate(150deg);
}

.image #display-area g .overlay {
  fill: #c2c2c2;
  opacity: 0;
}

.image #display-area g.hover-active .overlay,
.image #display-area g.focus-active .overlay {
  opacity: 0.6;
}

#recognition-block {
  width: 15%;
  position: fixed;
  bottom: 0;
  right: 1rem;
  font-family: neue-haas-grotesk-display;
  font-weight: 700;
  text-align: right;
  text-wrap: balance;
}

#recognition-block img {
  max-width: 75%;
  max-height: 6rem;
}

#recognition-block wa-dialog {
  text-transform: none;
  font-weight: 300;
  text-align: left;
}

#colophon {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

/* Display Order */
#sidebar {
  order: 2;
}

#specifications {
  order: 1;
}

#title-block {
  order: 2;
}

#meta-block {
  order: 3;
}

/* Media Queries */
@media only screen 
  and (max-width: 850px) { 
  #recognition-block {
    position: relative;
    width: 100%;
  }
  
  .drawing {
    max-width: 100%;
  }
}

@media only screen
  and (max-width: 600px) {
  .drawing, #sidebar {
    height: auto;
  }
  
  .drawing wa-carousel {
    height: auto;
  }
  
  .drawing #sidebar, .drawing #display-area {
    overflow: visible;
  }
  
  .drawing #sidebar {
    border-left: none;
  }
  
  wa-split-panel {
    grid-template-columns: none !important;
  }
  
  wa-split-panel::part(divider) {
    visibility: hidden;
  }

  #specifications, #title-block {
    min-height: 0;
  }
  
  #sidebar {
    order: 2;
  }

  #specifications {
    order: 2;
  }

  #title-block {
    order: 1;
  }

  #meta-block {
    order: 3;
  }
}