/*general*/
  :root {
    background-color: #fffff2;
    font-size:18px;
    --lighttext-color: #634a0c;
    --mediumtext-color:#7c764b;
    --dimtext-color:  #bcbca7;
    --softhighlight: #efefdf;
    --background-color:#fffff2;
    --modal-background:rgba(188, 187, 178, .85);
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  @font-face {
      font-family: 'CormorantGaramond';
      src: url('fonts/CormorantGaramond/CormorantGaramond.ttf') format('truetype');
  }
  @font-face{
      font-family: 'IBMPlexSans';
      src: url('fonts/PlexSans/IBMPlexSans-Regular.ttf') format('truetype');
  }

  body{
    overflow-x: hidden;
  }

/*navigation*/
  nav{
    display: flex;
    width: 100%;
    height: auto;
    padding: 1.5vh 2vw 4vh 1vw; /*top, right, bottom, left*/
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;      /* initial separation from preceding content */
    background: linear-gradient(
        to bottom,
        var(--background-color) 0%,          /* solid at the top */
        var(--background-color) 75%,         /* hold colour for most of it */
        rgba(255,255,242,0) 100%             /* transparent at the very bottom */
    );
    z-index: 100;
  }
  .navbar{
    align-self: stretch;
    justify-content: center; 
    align-items: flex-start;
    gap: 2vw; 
    display: flex;
  }
  .navbar a{ /*nullifies link background color that appears elsewhere*/
    color: var(--mediumtext-color);
  }
  .navbar a:hover{
    color: var(--lighttext-color);
    background-color: transparent;
  }
  .naventry {
    color: var(--mediumtext-color);
    text-align: right;
    font-family: CormorantGaramond;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .pagetitle{
    color: var(--lighttext-color);
    font-family: CormorantGaramond;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.03rem;
  }
  .pagetitle a{
    color: var(--lighttext-color);
    background-color: transparent;
  }  
  @media (max-width: 479px) {
    nav {
      padding: 1vh 0 2vh 0;
    }
  }

/*mobile menu*/
  .hamburger {
      display: none;               /* only visible on small screens */
      position: absolute;
      top: 1vh;
      right: 4vw;
      width: 1.8rem;
      height: 1.8rem;
      background: transparent;
      border: none;
      cursor: pointer;
  }
  .hamburger span,
  .hamburger span::before,
  .hamburger span::after {
      display: block;
      width: 100%;
      height: 2px;
      background: var(--mediumtext-color);
      transition: transform .3s;
  }
  .hamburger span::before,
  .hamburger span::after {
      content: "";
      position: relative;
  }
  .hamburger span::before { top: -6px; }
  .hamburger span::after  { top: 4px; }

  .mobile-menu {
      position: fixed;
      inset: 0;
      background: var(--background-color);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2vh;
      color: var(--mediumtext-color);
      transform: translateY(-100%);
      transition: transform .3s ease;
      z-index: 1000;
  }

  .mobile-menu a{
      font-family: CormorantGaramond;      /* same as desktop nav */
      font-size: 2rem;
  }

  .mobile-menu.open {
      transform: translateY(0);
  }

    /* close button in the panel */
  .mobile-menu .mobile-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--darktext-color);
    font-size: 2rem;
    cursor: pointer;
    z-index: 10001;
    padding: 0;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

/*homepage*/
  .homepage { /*homepageimg*/
    padding: 0 3%; /*top-bottom, right-left */
    display: flex;
    justify-content: center;
    align-items:center;
    min-height: 90vh;    /* ensure mobile view also takes full height */
  }
  
  .landingimg {
    max-height: 80vh;
    max-width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding:10px;
    background-color: var(--dimtext-color);
        margin-top:10vh;
  }
  @media (max-width: 479px) {
      .navbar { display: none; }    /* hide desktop links */
      .hamburger { display: block; }/* show the button */
      .homebutton a {
        font-size: 1.4rem;
        align-items:center;
        padding-left:3vw;
      }
      .homepage {
        min-height: 90vh;    /* ensure mobile view also takes full height */
      }
      .landingimg{
        max-width:90vw;
        padding:5px;
        margin:0;
      }
  }


/*font styles*/
  h1{ /*page titles*/
    color: var(--lighttext-color);
    font-family: CormorantGaramond;
    font-size: 1.5rem;
    font-weight: 450;
    margin:0;
  }
  h2{ /*book and exhibition titles*/
    color: var(--lighttext-color);
    font-family: CormorantGaramond;
    font-size: 1.3rem;
    font-weight: 400;
    margin:0;
  }
  h3{ /*publisher/year on book page*/
    color: var(--lighttext-color);
    font-family: CormorantGaramond;
    font-size: 1rem;
    font-weight: 350;
    margin: 0;
  }
  h4{ /*img gallery captions*/
    color: var(--mediumtext-color);
    font-family: CormorantGaramond;
    font-size: .9rem;
    font-weight: 200;
    margin: 0;
    align-self: flex-start;
    padding-bottom:3vh;
  }
  p { /*book description*/
    font-family: IBMPlexSans;
    color: var(--mediumtext-color);
    font-size: .9rem;
    font-weight: 100;
  }
  p a{
    text-decoration: underline dotted;
    text-decoration-thickness: 10%;
    text-decoration-inset:1rem 1rem;
    color: var(--lighttext-color);
  }
  h2 a{
    text-decoration: none;
    text-decoration-thickness: 10%;
    text-decoration-inset:1rem 1rem;
    color: var(--lighttext-color);
  }
  a{
    background-color: transparent;
    text-decoration: none;
    color: var(--lighttext-color);
  }
  a:hover{
    color: var(--lighttext-color);
    background-color: var(--dimtext-color);
    cursor: pointer;
  }
  a:link{
    color: var(--lighttext-color);
  }
  a:hover{
    background-color: var(--dimtext-color);
  }

  @media (max-width: 479px) {
    h1{
      font-size: 1.2rem;
    }
    h2{
      font-size: 1rem;
    }
    h3{
      font-size: .9rem;
    }
    h4{
      font-size: .75rem;
    }
    p{
      font-size: .75rem;
    }
  }

/*books+general*/
  .books{ /*section styling creates vertical split*/
    display: flex;
    flex-direction: row;
  }
  .contentleft{ /*left column of page (not within the left column itself)*/
    display: flex;
    padding: 10vh 5vw 0 5vw;
    flex-direction: column;
    width: 100%;
    gap: 1vh; /*space betw page title and first entry*/
  }
  .contentheader{ /*gap under page section title*/
    padding-top: 4vh;
    padding-bottom:3vh;
  }
  .contentheader h4{
    padding-bottom:0;
  }
  .contentpad { /*div pushes content slightly to right of page title*/
    padding-left: 3vw;
  }
  .contentrow{ /*each row*/
    display: flex;
    align-items: flex-start; /*aligns text to top of each adjacent image*/
    gap: 3vw;
  }
  .leftcolumn { /*ensures rightcolumn is aligned properly*/
    width: 4ch;        /* exactly 4 characters wide in the current font */
    flex-shrink: 0;    /* prevent it from compressing */
    min-width: 4ch;    /* belt and suspenders */
  }
  .leftcolumn h2 { /*properly aligns year and exh/book*/
    margin: 0;
    line-height: 1;   /* removes any line-height-induced offset */
  }
  .rightcolumn { /*within left side of page adjacent to year (NOT IMG SCROLL)*/
    display: flex;
    flex-direction: column;
    flex: 1; /* allows the right column to take up remaining space */
    max-width:40vw;
    padding-bottom: 4vh;
  }
  .contentright { /*large scrolling image column on right*/
    align-self: flex-start;
    position:sticky;
    top:7.5vh;
  }
  .gallerycontainer { /*contains imgscroll*/
    display: flex;
    align-items: flex-start;
    flex: 1;
    max-width:45vw;
  }
  .gallery-item {
    display: none;
  }
  .gallery-item.active {
    display: block;
    position: sticky;
    top: 0;
    align-self: flex-start;
    z-index: 1;
  }
  .bookcover{
    align-self:start;
  }
  .book-title {
    cursor: e-resize;
    transition: opacity 0.2s ease;
  }
  .book-title span {
    background-color: var(--softhighlight);
    
  }
  .book-title span:hover {
    opacity: 0.7;
    color: var(--lighttext-color);
    background-color: var(--dimtext-color);
  }
  .bookinfo{
    display: grid;
    margin:8vh 0 4vh 0;
    grid-template-columns: 2fr 4fr;
    gap:1vw;
    max-width: 100%;
    box-sizing: border-box;
  }
  .bookinfo img{ /*cover*/
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .bookinfo p{
    font-size: .8rem;
  }
  .booktext{
    align-self:start;
    padding: 0 2vw 0 0;
  }
  .imgscroll {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: calc(100vh - 2vh);
    align-items:flex-start;
    gap: 2vh;
    flex:1;
    padding-top:6vh;
  }
  .imgscroll img{
    height: auto;
    align-items: right;
    max-width: 40vw;
    padding-right:1vw;
    box-sizing: border-box;
  }
  .imgitem{
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* keeps the group right-aligned in the scroll container */
    gap: 0.5vh;
  }
  .books figure {
    margin: 0;          /* remove browser default side margins */
    display: inline-block;
    width: 100%;
  }
  .books figcaption {
    font-size: 0.75rem;
    color: var(--mediumtext-color);
    margin: 0.2rem 0 0.4rem 0 ;
    font-family: cormorantgaramond;
    text-align: left;
    padding-left: 2vw;
    white-space: pre-wrap; /* honors \n line breaks in your caption text */
    display:none;
  }

  @media (max-width: 479px) {
    .contentrow {
      display: grid;                    /* change from flex */
      grid-template-columns: repeat(5, 1fr); /* 5 equal columns, split 2/5 + 3/5 */
      flex-direction: column;
      gap: 0.5vh; /*between year/book title*/
      margin:0;
    }
    .contentheader{ /*section title*/
      padding-left:3vw;
    }
    .contentpad{
      padding-left:6vw;
      padding-bottom:5vh;
    }
    .contentleft{ /*main text column adjustments*/
      padding: 5vh 0 0 0;
      gap:0;
    }
    .rightcolumn {
      max-width: 100%;
      gap:0;
      grid-column: span 5;
      padding-bottom: 2vh;
    }
    .contentright {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s;
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    .contentright.active {
      opacity: 1;
      pointer-events: auto;
    }
    .gallerycontainer{
      max-width:100%;
      max-height:100vh;
      background-color: var(--background-color);
      z-index: 9999;
      flex-direction: column;
      align-items: center;
    }
    .exhibitions{ /*causes popup to appear below instead of to right*/
      flex-direction: column;
    }
    .bookinfo{
      max-width: 100%;
      display:flex;
      flex-direction: column;
      align-items: center;
      padding: 5vh 5vw 0 5vw;
    }
    .bookcover {
      display: flex;
      justify-content: center;
      padding: 0 15vw 3vh 15vw;
    }
    .bookcover img {
      display: block;
      max-width: 100%;
      height: auto;
    }
    .booktext{
      padding:0;
    }
    .imgscroll {
      max-width: 100%;
      height: 100vh;
      gap:1vh;
      padding:0;
    }
    .imgscroll img{
      max-width: 100%;
      padding:0 2vw;
    }
    .books figure{
      display:block;
    }
    .books figcaption {
      display:block;
    }
  }

/*exhibitions*/
  .exhibitions{ /*section styling creates vertical split*/
    display: flex;
    flex-direction: row;
  }
  .exhibitions .rightcolumn{ /*row gap between shows in a given year*/
    gap: 1.5vh;
  }
  .ephgrid2{ /*exhibitions ephemera layouts*/
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 45vw;
  }
  .ephgrid2 img{
    max-width:18vw;
    height:auto;
    margin:0;
  }
  .ephgrid4{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0vw;
    max-width: 45vw;
  }
  .ephgrid4 img{
    max-width: 9vw;
    margin:0;
    height:auto;
  }
  .exhibitions{
    overflow-y:hidden;
  }
  .exhibitions .imgscroll{
    padding-top:6vh;
    box-sizing: border-box;
  }
  .exhibitions .imgscroll > :nth-child(n+2){
    row-gap:6vh;
  }
  .exhibitions .imgscroll p{
    white-space: pre-line;
    font-family:cormorantgaramond;
    font-size:.85rem;
    color: var(--lighttext-color);
    max-width:95%;
    margin:1rem;
  }
  .exhibitions .imgscroll h1{
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: .5rem;
  }
  @media (max-width: 479px) {
  .ephgrid2{ /*exhibitions ephemera layouts*/
    display:grid;
    grid-template-columns: 1fr;
    gap: 1vw;
    max-width: 100vw;
  }
  .ephgrid2 img{
    max-width:100%;
    height:auto;
  }
  .ephgrid4{
    display:grid;
    grid-template-columns: 1fr;
    gap: 0vw;
    max-width: 100%;
  }
  .ephgrid4 img{
    max-width: 100%;
    margin:0;
    height:auto;
  }
  .exhibitions .gallerycontainer{
    height:100vh;
    width:100vw;
  }
  .exhibitions .imgscroll {
    padding-top:8vh;
    height:100%;
    box-sizing: border-box;
    background-color: var(--background-color);
  }
  .exhibitions .imgscroll > :nth-child(n+2) {
    gap:6vh;
  }
  .exhibitions .imgscroll h1{
    margin:0 0 0 1rem;
  }
  }

/*writings page*/
  .writings .rightcolumn{
    max-width:90vw;
    row-gap:5vh;
    column-gap:1.5vw;
    flex-direction: row;
    flex-wrap:wrap;
  }
  .writings .contentrow:not(:first-child) .rightcolumn{
      margin-bottom:4vh;
    }
  .textentry { /*pads space below writing metadata*/
    padding:0 0 2vh 0;
  }
  .writings a{
    background-color: var(--softhighlight);
  }
  .writings a:hover{
    background-color: var(--dimtext-color);
  }
  .articlecontainer{ /*limits each article grid unit width*/
    width:26vw;
  }
  .imggrid{
    display: flex;
    flex-direction: row;
    gap: 0.75vw;
    align-items: flex-start;
    max-width:25vw;
    flex-wrap:wrap;
  }
  .imggrid.imggrid-stack-vertical{
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .imggrid img{ /*article thumbnail grids*/
    display: block;
    height: auto;
    width: 11vw;
  }
  .imggrid > img:only-child{
    width: 75%;
    max-width: 75%;
  }
  .imggrid > img:nth-child(odd):last-child:not(:only-child){ /*sizing for odd-# images that are the last in their group*/
    width: 22vw;
    max-width: 75%;
  }
  .imggrid.imggrid-stack-vertical img{ /*sizing for when wide landscape images are stacked vertically*/
    width: 22vw;
    max-width: 100%;
  }
@media (max-width: 479px) {
    .writings .rightcolumn{
      max-width:100%;
      row-gap:4vh;
    }
    .writings .contentrow:not(:first-child) .rightcolumn{
      margin-bottom:5vh;
    }
    .writings .leftcolumn h2{
      font-size: 1.2rem;
      padding-bottom:2vh;
      text-decoration: underline dotted;
      text-decoration-color: var(--lighttext-color);
      text-decoration-thickness: 1.5px;
      text-underline-offset:.4rem;
    }
    .articlecontainer{
      width:100%;
    }
    .imggrid{
      max-width: 100%;
    }
    .imggrid img{
      width: 42vw;
      max-width: 100%;
    }
    .imggrid.imggrid-stack-vertical img{ /*sizing for when wide landscape images are stacked vertically*/
      width: 84vw;
      max-width: 100%;
    }
    .imggrid img > img:nth-child(odd):last-child:not(:only-child){
      width: 42vw; 
    }
    .imggrid > img:only-child{ /*if sole image for one article*/
      width: 100%;
      max-width: 84vw;
    }
  }

/*Image Modal*/
  .exhibit-thumb{
    cursor:pointer;
    max-width:100%;
    height:auto
  }
  .mm-modal{
    position:fixed;
    inset:0;
    background:var(--modal-background);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s}
  .mm-modal.open{
    opacity:1;
    pointer-events:auto;
  }
  .mm-modal .mm-image-wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:20px;
    box-sizing:border-box;
    gap:8px
  }
  .mm-modal img{
      width: auto;
      height: auto;
      max-width: 70vw;
      max-height: 93vh;
      object-fit: contain;
      display:block;
  }
  .mm-modal .close{
    position:absolute;
    top:18px;
    right:18px;
    color:var(--lighttext-color);
    font-size:2rem;
    border:none;
    background:transparent;
    cursor:pointer
  }
  .mm-modal .mm-prev, .mm-modal .mm-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    color:var(--lighttext-color);
    background:transparent;
    border:none;
    font-size:3rem;
    cursor:pointer;
    padding:6px 12px
  }
  .mm-modal .mm-prev{
    left:8px
  }
  .mm-modal .mm-next{
    right:8px
  }
  .mm-image-wrap{
    position:relative;
    display:flex;
    flex-direction:column;
  }
  .mm-modal .mm-caption{
    margin-top: 0;
    color: var(--lighttext-color);
    font-family:cormorantgaramond;
    white-space: pre-line; /* allows for line breaks in the caption text */
    max-width: calc(100% - 80px);
    font-size: .9rem;
    box-sizing: border-box;
  }
  .mm-modal .mm-caption[hidden]{
    display:none
  }

/*MM bio page*/
  .biocontainer{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top:10vh;
  }
  .biocontainer > :nth-child(n+2) {
    margin-top: 6vh;  /* gap between 3rd+ items only */
  }
  .figure{ /*each figure container,incl. image/caption*/
    margin:0;
    display: inline-flex;
    flex-direction: column;
    justify-content: left;
  }
  .figure p { /*image captions*/
    margin: 0;
    width: 100%;
  }
  .figure img { /*image styling for bio page*/
    display: block;
    width: 100%;
    max-height: 50vh;
    object-fit: contain; /* ensure it fits without distortion */
  }
  .figcaption { /*img caption styling*/
    margin:0.5rem 0 0;
    width: 100%;
    font-size: 0.75rem;
    font-family: CormorantGaramond;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--mediumtext-color);
    align-self:stretch;
  }
  .centeredtext{
    display: flex;
    flex-direction: column;
    padding: 0 33vw;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
  }
  .figures-row {/*first layout, top two images*/
    display: flex;
    max-width: 50vw;
    column-gap: .5vw;
  }
  .figures-row img{
    max-height:30vh;
  }
  .figures-row2 {/*second row layout*/
    display: flex;
    max-width: 60vw;
    column-gap: 5vw;
    align-items: center;
  }
  .figures-row3{ /*apartment pic layout*/
    display: flex;
    flex-direction: row;
    max-width: 60vw;
    column-gap: 4vw;
    align-items: flex-start;
  }
  .figures-row3 img{
    max-height:50vh;
  }
  .figures-row2 img{
    max-height:30vh;
  }
  .righttext{
    max-width: 27vw;
  }
  .figures-pair{ /*container for pairs within a row, separated from another image*/
    display: flex;
    flex-direction: row;
    gap: 0.5vh;
  }
  .figures-pair img{
    display: block;
    width: 100%;
    max-height: 35vh;
    height: auto;
    object-fit: contain; /* ensure it fits without distortion */
  }
  @media (max-width: 479px) {
    .biocontainer{
      padding: 5vh 3vw;
    }
    .biography .contentheader {
      padding: 2vh 0 0 0;
    }
    .centeredtext{
      padding: 0;
    }
    .figure img{
      max-height:50vh;
    }
    .figures-row{
      flex-direction: row;
      max-width: 100%;
      display: flex;
      column-gap: .5vw;
      align-items: flex-start;
    }
    .figures-row2{
      flex-direction: column;
      max-width: 100%;
      gap: 3vh;
    }
    .figures-row3{
      flex-direction: column;
      max-width: 100%;
      align-items:center;
      gap: 3vh;
    }
    .righttext{
      max-width:100%;
    }
    .figures-pair{
      gap: 2vh;
    }
  }

/*archive page*/
 .archivecontent { /*page container for both staff and space sections*/
    display: flex;
    padding: 10vh 4vw;
    gap: 4.5rem;
    flex: 1 0 0;
  }
  .archivecontent h2{
    color: var(--lighttext-color);
    font-family: CormorantGaramond;
    font-size: 1rem;
    font-weight: 450;
    margin:0;
  }
  .archivecontent h3{
    color: var(--lighttext-color);
    font-family: CormorantGaramond;
    font-size: .85rem;
    font-weight: 350;
    margin:0;
  }
  .archivecontent p{
    margin: 0;
    font-family: IBMPlexSans;
    color: var(--mediumtext-color);
    font-size: .725rem;
    font-weight: 100;
    line-height: 1.4;
  }
  .staffcontainer{ /*left half of staffbio page*/
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vh 3vw;
    align-items: start;
    align-self: stretch;
    width: 50vw;
    flex-shrink: 0;
  }
  .staffcontainer > h1 {
    grid-column: 1 / -1;
    margin: 0;
  }
  .portraitgrid{ /*staff subpage of container (left)*/
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw 4vh;
  }
  .staffportrait{
    display: flex;
    flex-direction: column;
    align-items: left;
    max-width:12vw;
    gap: 1vh;
  }
  .staffportrait img{
    height: auto;
    max-width: 12vw;
    display: block;
    margin:0;
  }
  .bios { /*for staff bio texts*/
    display: flex;
    flex-direction: column;
    gap: 2vh;
  }
  .officecontainer{ /*right half of bio page*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2vh;
    flex: 1 0 0;
    max-width:40vw;
  }
  .officephotos {
    display: flex;
    max-width: 50vw;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap:1rem;
  }
  .officephotos img{
    height: 28vh;
    width:auto;
    display: block;
  }

  @media (max-width: 479px) {
    .archivecontent{
      flex-direction: column;
      padding: 5vh 3vw;
    }
    .archivecontent h1{
      padding-top: 4vh;
      font-weight: 500;
    }
    .archivecontent p{
      font-size: .65rem;
    }
    .staffcontainer{
      display: flex;
      flex-direction: column;
      gap: 2vh;
      width: 100%;
    }
    .portraitgrid{ /*staff subpage of container (left)*/
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 3vh 3vw;
    }
    .staffportrait{
      display: flex;
      flex-direction: column;
      align-items: left;
      max-width:43.5vw;
      gap: 1vh;
    }
    .staffportrait img{
      height: auto;
      max-width: 45vw;
      display: block;
      margin:0;
    }
    .officecontainer{
      max-width:100%;
    }
    .officephotos {
      display: flex;
      max-width: 80vw;
      height: auto;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      gap:1rem;
    }
    .officephotos img{
      display: flex;
      width:90vw;
      height:auto;
    }
  }

/* News page*/
  .news{
    display: flex;
    flex-direction: row;
  }
  .news-content{
    max-width: 50vw;
    padding: 8vh 3vw;
    display: flex;
    justify-content: left;
    gap: 2vw;
    align-self: stretch;
    flex-wrap: wrap;
  }
  .news-entry{
    display: flex;
    height:auto;
    width:20vw;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 1vh;
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color 0.1s ease, background-color 0.1s ease;
  }
  .news-entry:hover,
  .news-entry.is-active {
    border-color: var(--dimtext-color);
    border-style: dashed;
    background-color: rgba(235, 235, 213, 0.614);
  }
  .news-entry:focus-visible {
    outline: 2px solid var(--mediumtext-color);
    outline-offset: 2px;
  }
  .news-entry-top{
    display: flex;
    width: inherit;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
  .news-type{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
  }
  .news-type h1{
    color: var(--lighttext-color);
    background-color: #f4f4de;
    font-family: CormorantGaramond;
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin:0;
  }
  .news-image{
    display: flex;
    padding: .5rem 0;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: stretch;
  }
  .news-date{
    display: flex;
    justify-content: left;
    gap: 10px;
    align-self: stretch;
    color: var(--lighttext-color);
    font-family: IBMPlexSans;
    font-size: .8rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .news .gallerycontainer{
    display: flex;
    align-items: flex-start;
    flex: 1;
    max-width:100%;
    padding-top:5vh;
  }

  .news-left{
    display: flex;
    max-width: 60vw;
    padding-left: 3vw;
    box-sizing: border-box;
    flex-direction: column;
    align-self: center;
    gap: 3vh;
    top: 0;
  }


  .news-maintitle{
    display: flex;
    justify-content: center;
    align-items: center;
  }




  .news-type{ /*category styling*/
    display: flex;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    padding-top:.5rem;
    padding-left:.5rem;
  }

  .news-image{
    display: flex;
    padding: .5rem;
    align-self: stretch;
  }

  .news-date{
    display: flex;
    justify-content: left;
    padding-left:.5rem;
    align-self: stretch;
  }

  .news-entry-bottom{
    display: flex;
    width: 100%;
    height: 10vh;
    padding: 0 .75rem;
    flex-shrink: 0;
  }

  .news-entry-bottom h2{
    font-size: 1.15rem;
   }

  .news-detail-panel {
    display: flex;
    flex-direction: column;
    gap: 0rem;
    max-width: 34vw;
  }

  .news-detail-kicker,
  .news-detail-date,
  .news-detail-body p,
  .news-detail-figure figcaption {
    margin: 0;
    color: var(--mediumtext-color);
    font-family: IBMPlexSans;
  }

  .news-detail-date {
    margin: .25rem 0 1rem 0;
  }

  .news-detail-kicker {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
  }

  .news-detail-title {
    margin: 0;
    color: var(--lighttext-color);
    font-family: CormorantGaramond;
    font-size: 1.5rem;
    font-weight: 450;
    line-height: 1.15;
  }

  .news-detail-date {
    font-size: 0.78rem;
  }

  .news-detail-body p {
    font-size: 0.84rem;
    line-height: 1.5;
  }

  .news-detail-cta {
    margin: 0;
  }

  .news-detail-cta a {
    font-family: CormorantGaramond;
    font-size: 1rem;
    text-decoration: underline;
    text-underline-offset: 0.13em;
    background: transparent;
  }

  .news-detail-images {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .news-detail-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .news-detail-image {
    display: block;
    width: 100%;
    max-width: 34vw;
    height: auto;
    padding-right: 0;
    background-color: #f4f4de;
  }

  .news-detail-figure figcaption {
    font-size: 0.72rem;
  }

  .news .imgscroll{
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    position: fixed;
    right:0vw;
    height: 92vh; /* controls how tall the scroll area is */
    width: 45vw;
    flex:1;
    padding-top: 10vh;
    box-sizing: border-box;
    overflow-y: auto;
  }

  .news .imgscroll img{
    height: auto;
    align-items: center;
    max-width: 50%;
    padding-right:1vw;
    box-sizing: border-box;
  }
  @media (max-width: 479px) {
    .news-content{
      max-width:100%;
      justify-content: center;
      padding:0;
    }
    .news-entry{
      padding:0 3vw;
      box-sizing: border-box;
      width:90vw;
      height:35vh;
      justify-content: flex-start;
      align-items: center;
      gap: 1vh;
    }
    .news-type h1{
      font-size:.9rem;
    }
    .news-date{
      font-size:.6rem;
    }
    .news-type{
      font-size:.75rem;
    }
    .news-entry-bottom{
      font-size:.9rem;
    }
  }

/*Close button for mobile gallery modal that replaces right column scroll*/
  .close-gallery {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--background-color);
    border: none;
    color: var(--lighttext-color);
    font-size: 2rem;
    cursor: pointer;
    z-index: 10001;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .close-gallery:hover {
    opacity: 0.8;
  }
  @media (max-width: 479px) {
    .close-gallery {
      display: flex;
    }
  }

  @media (max-width: 479px) {
    .news .imgscroll{
      order: -1; /*places content above news scroller*/
      align-self: stretch;
      max-width: 100vw;
      width: 100%;
      min-height: 0;
      height: 100%;
      max-height: none;
      position: static;
      top: auto;
      padding: 10vh 2vw;
    }
    .news-left { /*bottom scroll bar*/
      order: 1;
      max-width: 95vw;
      position: fixed;
      align-self: end;
      bottom:0;
      overflow: hidden;
      padding-bottom: 2vh;
    }
    .news-container {
      width: 100%;
    }
    .news-content{
      max-width: 100%;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      gap: 3vw;
      margin: 0;
      overflow-x: auto;
      overflow-y: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .news-content::-webkit-scrollbar {
      display: none;
    }
    .news-entry{
      flex: 0 0 68vw;
      max-width: 40vw;
      height: auto;
      min-height: 0;
      padding: 0.4rem;
      scroll-snap-align: start;
      justify-content: flex-start;
    }
    .news-entry-top,
    .news-image {
      width: 100%;
      max-width:40vw;
    }
    .news-type h1{
      font-size:.7rem;
    }
    .news-date{
      font-size:.6rem;
    }
    .news-type{
      font-size:.75rem;
    }
    .news-entry-bottom{
      font-size:.7rem;
      width: 100%;
      max-width: 100%;
      padding:0;
      margin:0;
      height: auto;
      min-height: 4.75rem;
    }
    .news-detail-panel,
    .news-detail-image {
      max-width: 100%;
    }
    .news-detail-panel {
      width: 100%;
      box-sizing: border-box;
      padding-bottom: 0;
    }
    .news-detail-title {
      font-size: 1.15rem;
    }
    .news-detail-body p {
      font-size: 0.7rem;
    }
    .news-detail-body a {
      font-size: 0.7rem;
    }
  }