/* Reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  background:#fff;
  color:#1f1f1f;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }

.page{ width:100%; min-height:100%; }

.layout{
  max-width:1320px;
  margin:0 auto;
  padding:48px 32px 90px;
  display:grid;
  grid-template-columns:340px minmax(0,820px);
  column-gap:110px;
  justify-content:center;
}

/* Sidebar */
.sidebar{
  position:sticky;
  top:48px;
  align-self:start;
}

.brand{ text-align:center; margin-bottom:40px; }
.brand__link{ display:inline-block; }
.brand__logo{
  display:block;
  width:min(280px, 100%);
  height:auto;
}
.brand__title{
  margin:0;
  font-weight:300;
  font-size:22px;
  letter-spacing:0.18em;
}
.brand__subtitle{
  margin:10px 0 0;
  font-size:10px;
  font-weight:400;
  letter-spacing:0.22em;
  color:#3a3a3a;
}

/* MENU */
.menu{
  width:100%;
  max-width:230px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.menu__link,
.menu__toggle{
  font-size:11px;
  line-height:1.35;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#9a9a9a;
  transition:color 120ms ease;
}

.menu__link:hover,
.menu__toggle:hover{ color:#2a2a2a; }

.menu__link.is-active{ color:#2a2a2a; }

.menu__toggle{
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.menu__chev{
  width:10px;
  height:10px;
  display:inline-block;
  transform:rotate(-90deg);
  transition:transform 160ms ease;
  opacity:0.55;
}

.menu__group.is-open .menu__chev{ transform:rotate(0deg); }

/* Submenu */
.submenu{
  margin-top:10px;
  margin-left:14px;
  display:none;
  flex-direction:column;
  gap:10px;

  max-height:calc(100vh - 360px);
  overflow:auto;
  padding-right:10px;
}
.menu__group.is-open .submenu{ display:flex; }

.submenu__link{
  font-size:11px;
  line-height:1.35;
  text-transform:uppercase;
  color:#9a9a9a;
  transition:color 120ms ease;
}
.submenu__link:hover{ color:#2a2a2a; }
.submenu__link.is-active{ color:#2a2a2a; }

.submenu::-webkit-scrollbar{ width:8px; }
.submenu::-webkit-scrollbar-thumb{ background:#efefef; border-radius:10px; }
.submenu::-webkit-scrollbar-track{ background:transparent; }

/* Content */
.content{ padding-top:6px; }

/* Listing (thumbnails) */
.listing{
  display:flex;
  flex-direction:column;
  gap:40px;
}

.thumb{ display:block; }
.thumb__frame{
  position:relative;
  border:1px solid #ededed;
  overflow:hidden;
  background:#fff;
  aspect-ratio:1 / 1;
}
.thumb__frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.thumb__frame--empty{
  background:#e9dfd0;
}

.thumb--tall .thumb__frame{ aspect-ratio:1 / 1; }
.thumb--wide .thumb__frame{ aspect-ratio:16 / 6; }

/* Hover overlay */
.thumb__overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  transition:opacity 180ms ease;
  pointer-events:none;
}
.thumb__panel{
  width:86%;
  height:78%;
  background:rgba(255,255,255,0.90);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:scale(0.985);
  transition:transform 180ms ease;
}
.thumb__year{
  font-size:16px;
  letter-spacing:0.12em;
  color:rgba(0,0,0,0.38);
  margin-bottom:16px;
}
.thumb__title{
  font-size:44px;
  font-weight:300;
  letter-spacing:0.06em;
  color:rgba(0,0,0,0.82);
  text-transform:uppercase;
  text-align:center;
  line-height:1.1;
  padding:0 18px;
}
.thumb__frame:hover .thumb__overlay{ opacity:1; }
.thumb__frame:hover .thumb__panel{ transform:scale(1); }

/* Project page layout */
.projectWrap{
  display:flex;
  justify-content:center;
}
.project{
  width:min(760px,100%);
  text-align:center;
  padding-top:6px;
}
.project__title{
  margin:0;
  font-weight:300;
  font-size:22px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#2a2a2a;
  line-height:1.35;
}
.project__subtitle{
  margin:18px 0 0;
  font-size:11px;
  letter-spacing:0.08em;
  color:#666;
}
.project__meta{
  margin-top:54px;
  font-size:11px;
  letter-spacing:0.06em;
  color:#6f6f6f;
  line-height:1.9;
}
.project__text{
  margin:40px auto 0;
  width:min(620px,100%);
  font-size:11px;
  letter-spacing:0.04em;
  line-height:1.95;
  color:#6a6a6a;
}
.project__text p{ margin:0 0 18px; }

.project__imageFrame{
  margin-top:46px;
  border:1px solid #ededed;
  background:#fff;
  overflow:hidden;
}
.project__imageFrame img{
  display:block;
  width:100%;
  height:auto;
}

/* Simple pages */
.simple{
  width:min(760px,100%);
  margin:0 auto;
  text-align:center;
}
.simple__title{
  margin:0;
  font-weight:300;
  font-size:22px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#2a2a2a;
}
.simple__text{
  margin:24px auto 0;
  width:min(620px,100%);
  font-size:11px;
  letter-spacing:0.04em;
  line-height:1.95;
  color:#6a6a6a;
}

.project-page__meta{
  margin:0;
  padding:0;
}

.project-page__meta--editorial .project-page__meta-row{
  display:block;
  margin:0 0 22px;
}

.project-page__meta--editorial .project-page__meta-row:last-child{
  margin-bottom:0;
}

.project-page__meta--editorial .project-page__meta-label{
  display:block;
  margin:0 0 4px;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#6a6a6a;
}

.project-page__meta--editorial .project-page__meta-value{
  display:block;
  margin:0;
  font-size:12px;
  letter-spacing:0.02em;
  line-height:1.5;
  color:#2a2a2a;
}

/* Mobile drawer */
.mobileToggle{
  display:none;
  width:100%;
  margin:18px auto 0;
  max-width:230px;
  padding:10px 12px;
  border:1px solid #ededed;
  background:#fff;
  color:#2a2a2a;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.18);
  z-index:40;
}

/* Responsive */
@media (max-width:1020px){
  .layout{
    grid-template-columns:1fr;
    row-gap:26px;
    padding:28px 18px 60px;
  }
  .sidebar{ position:relative; top:auto; }
}

@media (max-width:640px){
  .mobileToggle{ display:block; }

  .menu{
    position:fixed;
    top:0; left:0;
    width:min(320px,86vw);
    height:100vh;
    background:#fff;
    padding:22px 18px;
    border-right:1px solid #ededed;
    overflow:auto;
    transform:translateX(-105%);
    transition:transform 160ms ease;
    z-index:50;
    gap:16px;
  }
  .menu.is-open{ transform:translateX(0); }

  .brand{ margin-bottom:18px; }
  .submenu{ max-height:none; overflow:visible; padding-right:0; }

  .thumb--tall .thumb__frame{ aspect-ratio:4 / 5; }
  .thumb--wide .thumb__frame{ aspect-ratio:16 / 8; }
  .thumb__title{ font-size:30px; }
  .thumb__year{ font-size:14px; }

  .project__title{ font-size:18px; }
}