:root {
  --hg-blue: #3208d9;
  --hg-blue-bright: #3809f6;
  --hg-heading: #596978;
  --hg-body: #252b31;
  --hg-page-width: 1000px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #050505;
  color: var(--hg-body);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.65;
}
.hg-page {
  display: flex;
  flex-direction: column;
  width: min(100%, var(--hg-page-width));
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: #fff url('template/sheet.png') repeat;
  box-shadow: 0 0 7px 4px rgba(0,0,0,.65);
}
.hg-header {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 248;
  min-height: 150px;
  background: #161616 url('template/header.jpg') center / cover no-repeat;
}
.hg-header a { position: absolute; inset: 0; }
.hg-nav {
  position: relative;
  z-index: 10;
  padding: 3px;
  background: linear-gradient(to bottom,#0a0a0a 0,#262626 40%,#292929 50%,#262626 60%,#0a0a0a 100%);
  border-top: 1px solid #3b3b3b;
  border-bottom: 1px solid #050505;
}
.hg-menu-toggle {
  display: none;
  width: 100%;
  padding: .55rem .75rem;
  border: 1px solid #454545;
  background: #151515;
  color: white;
  text-align: left;
  font-weight: bold;
}
.hg-menu, .hg-submenu { margin: 0; padding: 0; list-style: none; }
.hg-menu { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0 5px; }
.hg-menu > li { position: relative; }
.hg-menu > li > a {
  display: flex;
  align-items: center;
  min-height: 27px;
  padding: 0 17px;
  border-radius: 2px;
  color: white;
  font-size: 12px;
  line-height: 27px;
  text-decoration: none;
  white-space: nowrap;
}
.hg-menu > li.active > a,
.hg-menu > li > a:hover,
.hg-menu > li > a:focus {
  background: linear-gradient(to bottom,#2b07bb 0,#3709f1 40%,#3809f6 50%,#3709f1 60%,#2b07bb 100%);
}
.hg-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  min-width: 190px;
  padding: .25rem;
  background: rgba(20,20,20,.98);
  border: 1px solid #444;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.35);
}
.hg-menu li:hover .hg-submenu,
.hg-menu li:focus-within .hg-submenu { display: block; }
.hg-submenu a {
  display: block;
  padding: .5rem .75rem;
  color: white;
  text-decoration: none;
}
.hg-submenu a:hover, .hg-submenu a:focus { background: var(--hg-blue); }
.hg-content {
  flex: 1 0 auto;
  min-width: 0;
  padding: 10px;
  background: rgba(255,255,255,.38);
  overflow-wrap: anywhere;
}
.hg-content h1, .hg-content h2, .hg-content h3, .hg-content h4 {
  color: var(--hg-heading);
  font-weight: 400;
  line-height: 1.3;
}
.hg-content h1 { font-size: 24px; }
.hg-content h2 { font-size: 20px; }
.hg-content h3 { font-size: 18px; }
.hg-content a { color: #3511c9; }
.hg-content img {
  max-width: 100%;
  height: auto;
}
.hg-content table { max-width: 100%; }
.hg-footer {
  flex: 0 0 auto;
  min-height: 72px;
  padding: 18px 12px;
  background: linear-gradient(to bottom,#111,#050505);
  color: #ddd;
  text-align: center;
}
.hg-footer a { color: white; }
.hg-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
  gap: 12px;
  margin: 1rem 0;
}
.hg-model-card {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.55);
  color: #596978 !important;
  text-align: center;
  text-decoration: none;
}
.hg-model-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.hg-model-card span { display: block; padding: .85rem 1rem; }
.hg-model-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.15); }
.contact-details dt { margin-top: .8rem; font-weight: bold; }
.contact-details dd { margin-left: 1.5rem; }
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #20048e;
  color: white;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
}
@media (max-width: 760px) {
  .hg-page { width: 100%; box-shadow: none; }
  .hg-header { min-height: 120px; }
  .hg-menu-toggle { display: block; }
  .hg-menu { display: none; padding-top: .3rem; }
  .hg-menu.open { display: block; }
  .hg-menu > li > a { min-height: 38px; line-height: 38px; }
  .hg-submenu {
    position: static;
    display: block;
    border: 0;
    box-shadow: none;
    background: #151515;
  }
  .hg-submenu a { padding-left: 2rem; }
  .hg-content { padding: 12px; }
}


/* Photo archive */
.archive-intro { margin: .35rem 0 1.1rem; }
.archive-intro h1 { margin-bottom: .35rem; }
.archive-intro p { max-width: 720px; margin-top: 0; color: #545e67; }
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
  margin: 1rem 0 2rem;
}
.archive-card {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.72);
  color: var(--hg-body) !important;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.archive-card:hover, .archive-card:focus {
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(0,0,0,.16);
}
.archive-card > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.archive-card-body { display: grid; gap: 4px; padding: 13px 14px 15px; }
.archive-card-body strong { color: var(--hg-heading); font-size: 18px; font-weight: 400; }
.archive-card-body span { color: #333; }
.archive-card-body small { margin-top: 4px; color: #6d747b; }
.archive-breadcrumb { margin: .15rem 0 .8rem; color: #757d84; font-size: 12px; }
.archive-breadcrumb span { padding: 0 .35rem; }
.album-header { margin-bottom: 1rem; }
.album-header h1 { margin-bottom: .2rem; }
.album-subtitle { margin: 0; color: #3d4852; font-size: 15px; }
.album-meta { margin: .35rem 0 0; color: #737b82; font-size: 12px; }
.album-note { max-width: 820px; margin: .8rem 0 0; color: #555f67; }
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(170px,1fr));
  gap: 9px;
  margin: 1.2rem 0 2rem;
}
.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.12);
  background: #eee;
  text-decoration: none;
  aspect-ratio: 4 / 3;
}
.gallery-item img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .18s ease, filter .18s ease;
}
.gallery-item:hover img, .gallery-item:focus img { transform: scale(1.025); filter: brightness(1.03); }
.gallery-item > span {
  position: absolute;
  right: 5px; bottom: 5px;
  min-width: 24px;
  padding: 2px 5px;
  border-radius: 2px;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: 10px;
  text-align: center;
}
.lightbox[hidden] { display: none !important; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: minmax(42px,72px) 1fr minmax(42px,72px);
  align-items: center;
  background: rgba(0,0,0,.94);
  color: #fff;
}
.lightbox-figure {
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 34px 0 18px;
}
.lightbox-image {
  display: block;
  max-width: min(100%,1800px) !important;
  max-height: calc(100vh - 82px);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 6px 28px rgba(0,0,0,.45);
}
.lightbox-caption { padding-top: 9px; color: #d7d7d7; font-size: 12px; }
.lightbox button {
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: Arial,Helvetica,sans-serif;
}
.lightbox-prev, .lightbox-next { height: 100%; font-size: 50px; opacity: .82; }
.lightbox-prev:hover, .lightbox-next:hover { opacity: 1; }
.lightbox-close {
  position: absolute;
  top: 8px; right: 12px;
  z-index: 2;
  padding: 6px 10px;
  font-size: 34px;
  line-height: 1;
}
body.lightbox-open { overflow: hidden; }
@media (max-width: 760px) {
  .photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .lightbox { grid-template-columns: 42px 1fr 42px; }
  .lightbox-prev, .lightbox-next { font-size: 38px; }
  .lightbox-figure { padding-top: 42px; }
}
@media (max-width: 430px) {
  .archive-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .archive-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 540px) {
  .archive-grid { grid-template-columns: 1fr; }
}