:root {
  --keycolor: #10576d;
  --accentcolor1: #0c5b32;
  --accentcolor2: #150e6f;
  --bgcolor: #5c5c5c;
  --headerfonts: "Arial Bold", Gadget, sans-serif;
  --headercolor: var(--keycolor);
  --textbgcolor: #edece3;
  --navigationcolor: var(--keycolor);
  --cardcolor: var(--keycolor);
  --altcardcolor: var(--cardcolor);
  --bodyfonts: sans-serif;
  --textcolwidth: 40em;
}
html {
  font-size: 1rem;
}
* {
  box-sizing: border-box;
}
body {
  background: var(--bgcolor);
  color: black;
  margin: 0;
  font-family: var(--bodyfonts);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100lvh;
  scrollbar-color: white var(--bgcolor);
}
p,h1,h2,h3,h4,h5,h6,p+ul {
  &>p {
    margin:0;
  }
}
h2,h3,h4,h5,h6 {
  margin-block-end: 1em;
  & + p {
    margin-block-start: 0;
  }
}
p {
  margin-block: 10px;
}
sup {
  line-height: 1em;
}
.active {
  color: #f3ff9c;
  font-stye: italic;
  list-style: disclosure-closed;
}
ul {
  padding-inline-start: 30px;
  & ul {
    padding-inline-start: 16px;
  }
}
header {
  &>nav {
    list-style: none;
    display: flex;
    flex-flow: row;
    margin:0;
    padding:0;
    gap: 0 16px;
    background: black;
    color: lightblue;
    padding-inline: 16px;
    &>details.forcedopen {
      & summary {
        display: none;
      }
      & ul {
        flex-flow: row;
        padding-inline-start: 0em;
        margin-block-start: 0;
      }
    }
    &>details>ul {
      display: flex;
      flex-flow: column;
      margin: 0;
      list-style: none;
      padding: 0;
      padding-inline-start: 16px;
      gap: 16px;
      margin-block-start: 16px;
    }
    & a {
      color: inherit;
    }
    &>* {
      padding-block: 16px;
    }
  }
}
.textblock {
  max-width: var(--textcolwidth);
  word-break: break-word;
  overflow-y: auto;
  display: grid;
  align-content: start;
  grid-template-columns: [full-start] var(--_margin) [content-start] 1fr [content-end] var(--_margin) [full-end];
  scrollbar-color: var(--keycolor) var(--textbgcolor);
  &>* {
    grid-column: content;
    max-width: var(--textcolwidth);
  }
  &>figure {
    margin: 0;
    padding: 16px 36px;
  }
  &>p:first-child {
    margin-block-start: 18px;
  }
  &>p:last-child {
    margin-block-end: 36px;
  }
  &>h2 {
    font-size: 2rem;
    line-height: 1.2em;
  }
  &>blockquote {
    padding-inline-start: 10px;
    border-inline-start: 2px solid var(--accentcolor1);
    margin-inline-start: 10px;
  }
  & .footnotes {
    & li {
      margin-block: 16px;
    }
    & p {
      display: inline;
    }
    & li::marker {
      display: inline;
    }
    & ol {
      padding-inline-start: 20px;
    }
  }
  & li:target, & sup:target {
    scroll-margin-top: 100px;
    padding: var(--_padding) var(--_padding) 4px;
    border: var(--_border) solid var(--accentcolor1);
    background: rgba(255,255,255,0.5);
    border-radius: 5px;
    position: relative;
    --_bgcolor: var(--accentcolor1);
    --_width: 25px;
    --_padding: 2px;
    --_border: 3px;
    &>p {
      margin: 0;
    }
  }
  & > :first-child {
    margin-block-start: 40px;
  }
  & > :last-child {
    margin-block-end: 60px;
  }
}
#maincontent {
  display: flex;
  flex-grow: 2;
}
main {
  display: flex;
  flex-flow: row;
  height:0;
  flex-grow:1;
  container-type: size;
}
#maincontent {
  position: relative;
}
#main-nav {
  --_griditemminwidth: 270px;
  --_griditemwidth: minmax(var(--_griditemminwidth),1fr);
  & > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--_griditemwidth) var(--_griditemwidth));
    padding: 0;
    --gaps:0;
    list-style: none;
    min-height: 500px;
    height: 100%;
    &>li {
      margin-block-end:0;
      &>a {
        position: relative;
        display:flex;
        flex-direction:column-reverse;
        height: 100%;
        &>img {
          flex-grow:1;
          width: 100%;
          height:0;
          object-fit: cover;
          object-position: center;
        }
      }
    }
  }
}
#intro {
  --_margin: 40px;
  font-size: 1.1em;
  --_bgcolor: var(--textbgcolor);
  background: var(--_bgcolor);
  color: lch(from var(--_bgcolor) calc((49.44 - l) * infinity) 0 0);
  position:relative;
  display:flex;
  flex-basis: calc(26 * 16px);
  flex-grow: 1;
  flex-flow: column;
  overflow: auto;
  &>* {
    padding-inline: 32px;
  }
  & .textblock {
    padding: 0;
    flex: 1;
    flex-basis: 0;
  }
  & h1 {
    font-size: 2.5rem;
    padding: 0;
    text-transform:uppercase;
    line-height: 1em;
    font-weight: inherit;
    margin-block-end: 16px;
  }
  &>hgroup {
    border-block-end: 1px solid var(--textbgcolor);
    font-weight: 800;
    font-family:var(--headerfonts);
    font-size: 1.5em;
    line-height: 1em;
    text-align: left;
    text-wrap: balance;
    padding: 24px 0;
    --_bgcolor: var(--headercolor);
    background: var(--_bgcolor);
    color: lch(from var(--_bgcolor) calc((49.44 - l) * infinity) 0 0);
    &>* {
      margin-inline: var(--_margin);
    }
    &>a {
      margin:0;
      padding:0;
      color: yellow;
      position: absolute;
      top: 5px;
      left: 10px;
      font-size: 1.1em;
      text-decoration: none;
      &:focus, &:hover {
        text-decoration: underline;
      }
    }
    &>p {
      font-size: 1.2em;
      font-weight: 600;
    }
    &>h1,&>p {
      margin-block: 16px;
    }
  }
  &.longtitle hgroup {
    font-weight: normal;
    & h1 {
      text-transform: none;
      font-size: 1.2em;
      text-align: left;
      line-height: 1.1em;
    }
  }
  &.tall {
    & hgroup{
      padding-block: 32px;
      text-align: center;
    }
    & h1 {
      font-size: 2em;
    }
    & .textblock {
      padding-block-start: 16px;
      font-size: 1.3em;
    }
  }
}
#exhibit-nav {
  flex-basis: calc(15 * 16px);
  color: white;
  background: var(--navigationcolor);
  flex: 0;
  &>summary {
    font-size: 1.6rem;
    padding-block: calc(49px - 1ch);
  }
  & nav {
    padding-block-end: 16px;
  }
  & a {
    color:inherit
  }
}
#case-nav, #item-nav, #main-nav, section#item {
  flex-basis: 55%;
  flex-grow:1;
  height: 100cqh;
}
#case-nav, #item-nav, #main-nav {
  overflow-y: auto;
  --gaps: 16px;
  &>*{
    padding: calc(var(--gaps) * 1.2);
  }
  &>ul {
    gap: var(--gaps);
    margin: 0;
    font-size: 1.6rem;
    font-weight: bold;
    --_bgcolor: var(--cardcolor);
    & a {
      text-decoration:none;
      font-weight: 500;
      font-family: var(--headerfonts);
      transition: all 0.2s ease;
      &>div {
        background: var(--_bgcolor);
        color: lch(from var(--_bgcolor) calc((49.44 - l) * infinity) 0 0);
        text-align:center;
        margin:0;
        max-width: unset;
        min-height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        &>p {
          margin: auto 20px;
        }
      }
    }
  }
}
#item-nav {
  min-height: 600px;
  &>ul {
    column-width: min(250px,100vw);
    column-count: 2;
    &>li {
      display: block;
      position: relative;
      break-inside: avoid;
      margin-block-end: var(--gaps);
      &>a {
        display: flex;
        flex-flow: column;
        height:100%;
        &>img  {
          width: 100%;
          object-fit: cover;
        }
      }
    }
    &:has(li:first-child:nth-last-child(n+5)) {
      column-count: 2;
    }
    &:has(li:first-child:nth-last-child(n+11)) {
      column-count: 3;
    }
    &:has(li:first-child:nth-last-child(n+16)) {
      column-count: 4;
    }
  }
}
#case-nav {
  margin-block-start: var(--gaps);
  width: 100%;
  & br {
    display:none;
  }
  &>ul {
    --cols:2;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    container-type: size;
    height: 100%;
    &>li {
      min-height: 250px;
      --_cols: var(--cols, 2);
      --width:calc((100cqw / var(--_cols)) - var(--gaps));
      flex-basis: var(--width);
      display: block;
      position: relative;
      break-inside: avoid;
      flex-grow: 1;
      height: calc(50cqh - var(--gaps));
      contain: paint;
      &>a {
        display: flex;
        flex-flow: column-reverse;
        height:100%;
        &>img  {
          object-fit: cover;
          height:100%;
        }
        &:nth-child(2)>div,&:nth-child(3)>div {
          --_bgcolor: var(--altcardcolor);
        }
      }
    }
  }
}
.carouselthumb {
  &:before {
    --_size: 30px;
    content: "";
    background: white;
    top: 0;
    position: absolute;
    right: 0;
    width: var(--_size);
    height: var(--_size);
    background: linear-gradient(45deg, white 29%, #aaa 50%, var(--bgcolor) 50%);
    pointer-events: none;
    transition-property: width,height;
    transition: 0.15s ease;
  }
  &:hover:before {
    --_size: 40px;
  }
}

@media ( aspect-ratio < 5/4 ) {
  #case-nav, #item-nav, #main-nav, section#item {
    height: unset;
  }
  #maincontent>.inplace.modalcontainer {
    position: fixed;
  }
  #main-nav>ul {
    display: block;
    &>li>a {
      flex-direction: column;
      min-height: 600px;
    }
  }
  #intro>hgroup {
    text-align: center;
    hyphens: auto;
  }
  main, #intro {
    display: block;
  }
  .textblock {
    margin-inline: auto;
  }
}
#cornerswitch {
  margin-inline-start: auto;
}