/* Resonika 1.8.0 — umbrella architecture, About and Gallery. */

@media (min-width:1101px) {
  html body .site-header[data-header] .main-nav { padding-inline-end: 0; }
  html body .site-header[data-header] .main-nav .menu { gap: 0; }
  html body .site-header[data-header] .main-nav .main-nav__link { padding-inline: 10px; font-size: .64rem; letter-spacing: .13em; }
  html body .site-header[data-header] .res-submenu-toggle { margin-left: -5px; margin-right: 2px; }
}

/* About */
html body .res-project-document .res-about-180 { padding-top: clamp(56px,6vw,88px); }
html body .res-project-document .res-about-timeline {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin:clamp(34px,5vw,64px) 0;
  border:1px solid var(--line);
  background:var(--line);
}
html body .res-project-document .res-about-card {
  background:#202020;
  padding:clamp(24px,3vw,38px);
  min-height:270px;
}
html body .res-project-document .res-about-card h2 {
  margin:0 0 26px;
  font:600 .72rem/1.5 var(--res-font-menu,'Courier New',monospace);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#f4efe7;
}
html body .res-project-document .res-about-card p {
  margin:0;
  font:400 clamp(16px,1.3vw,19px)/1.65 var(--res-font-body,Arial,sans-serif);
  color:#d7d0c7;
}

/* Gallery */
html body .res-project-document .res-gallery-shell { padding-bottom:0; }
html body .res-project-document .res-gallery-page { padding-top:clamp(34px,4vw,60px); }
html body .res-project-document .res-gallery-head { max-width:980px; margin-bottom:clamp(54px,7vw,90px); }
html body .res-project-document .res-gallery-head h1 {
  margin:12px 0 18px;
  font-family:var(--res-font-display,Arial,sans-serif);
  font-size:clamp(54px,9vw,128px);
  font-weight:650;
  line-height:.82;
  letter-spacing:-.075em;
  color:#f6f4ef;
}
html body .res-project-document .res-gallery-head p {
  max-width:780px;
  margin:0;
  font:400 clamp(18px,1.5vw,24px)/1.55 var(--res-font-body,Arial,sans-serif);
  color:#cfc9c0;
}
html body .res-project-document .res-gallery-section { margin:0 0 clamp(72px,9vw,132px); }
html body .res-project-document .res-gallery-section-head {
  display:flex;
  align-items:baseline;
  gap:22px;
  margin-bottom:24px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
html body .res-project-document .res-gallery-section-head span {
  flex:0 0 auto;
  font:500 .62rem/1 var(--res-font-menu,'Courier New',monospace);
  letter-spacing:.14em;
  color:#8d877f;
}
html body .res-project-document .res-gallery-section-head h2 {
  margin:0;
  font-family:var(--res-font-display,Arial,sans-serif);
  font-size:clamp(25px,3vw,44px);
  line-height:1;
  letter-spacing:-.045em;
  text-transform:uppercase;
  color:#f6f4ef;
}
html body .res-project-document .res-gallery-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
html body .res-project-document .res-gallery-tile {
  position:relative;
  display:block;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#292929;
}
html body .res-project-document .res-gallery-tile img {
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:transform .45s ease, filter .35s ease;
}
html body .res-project-document .res-gallery-tile:hover img,
html body .res-project-document .res-gallery-tile:focus-visible img { transform:scale(1.035); filter:grayscale(.08) contrast(1.03); }
html body .res-project-document .res-gallery-empty {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  min-height:160px;
  border:1px dashed rgba(255,255,255,.25);
  padding:24px;
  color:#aaa39a;
  font:500 .65rem/1.6 var(--res-font-menu,'Courier New',monospace);
  letter-spacing:.08em;
  text-transform:uppercase;
}
html body .res-project-document .res-gallery-empty strong { color:#f5f1eb; }
html body .res-project-document .res-gallery-empty span { grid-column:1/-1; align-self:end; }

@media (max-width:900px) {
  html body .res-project-document .res-about-timeline { grid-template-columns:1fr; }
  html body .res-project-document .res-about-card { min-height:0; }
  html body .res-project-document .res-gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:620px) {
  html body .res-project-document .res-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  html body .res-project-document .res-gallery-section-head { gap:14px; }
  html body .res-project-document .res-gallery-head h1 { font-size:clamp(48px,18vw,78px); }
}