/* Cormorant carries no Armenian, so the slogan falls through to Noto Serif
   Armenian. Straight out of the box Noto reads heavier and larger than
   Cormorant beside it, so this pins the Armenian range to Noto's 300 weight and
   trims the size — the two now sit at a matching colour on the cover headline.
   Scoped by unicode-range, so Latin is untouched. */
@font-face {
  font-family: "Armenian Serif";
  src: url(https://fonts.gstatic.com/s/notoserifarmenian/v30/3XFMEqMt3YoFsciDRZxptyCUKJmytZ0kVU-XvF7QaZuL85rnQ_zDNzDe5xNnKxyZ1cKr0f_bomJ0byVSmWE.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 88%;
  unicode-range: U+0530-058F, U+FB13-FB17;
}

/* Each weight maps one notch lighter than the Cormorant it sits beside — 600
   here is Noto's 400 file. Declaring the real file rather than letting the
   browser synthesise bold from the 300 weight, which smears the strokes. */
@font-face {
  font-family: "Armenian Serif";
  src: url(https://fonts.gstatic.com/s/notoserifarmenian/v30/3XFMEqMt3YoFsciDRZxptyCUKJmytZ0kVU-XvF7QaZuL85rnQ_zDNzDe5xNnKxyZi8Kr0f_bomJ0byVSmWE.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  size-adjust: 88%;
  unicode-range: U+0530-058F, U+FB13-FB17;
}

:root {
  --ink: #111;
  --muted: #8a8a8a;
  --hairline: #e6e6e6;
  --bg: #fff;
  --nav-h: 58px;
  --gap: 10px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 300 14px/1.6 "Nunito Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* ---------------------------------------------------------------- cover -- */

.cover {
  display: grid;
  grid-template-columns: 46fr 54fr;
  height: 100svh;
  min-height: 520px;
}

.cover__image { overflow: hidden; background: #f2f2f2; }

.cover__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s var(--ease);
}

.cover__image img.is-loaded { opacity: 1; }

.cover__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.cover__hero { max-width: 640px; text-align: center; }

.cover__date {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .06em;
  margin-bottom: 26px;
}

.cover__title {
  margin: 0;
  font-family: Cormorant, "Armenian Serif", Georgia, serif;
  /* The floor is set by the longer line, "Yerevan Mall Rebranding": at 25px it
     measures 247px against the 272px a 320px phone leaves after padding, so it
     holds one line on every screen worth caring about. */
  font-size: clamp(25px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1.2;
}

.cover__title-line { display: block; }

.cover__rule {
  display: block;
  width: 44px;
  height: 1px;
  margin: 18px auto;
  background: var(--hairline);
}

.cover__credits {
  margin-top: 26px;
  color: var(--muted);
  font-size: 12.5px;
}

.cover__arrow {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s var(--ease), transform .2s var(--ease);
}

.cover__arrow:hover { color: var(--ink); transform: translate(-50%, 3px); }

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--nav-h);
  padding: 0 24px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
}

.nav__left {
  font-family: Cormorant, "Armenian Serif", Georgia, serif;
  font-size: 19px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* --------------------------------------------------------------- button -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease);
}

.btn--icon { color: var(--muted); }
.btn--icon:hover { color: var(--ink); background: #f4f4f4; }

.btn--solid { border-color: var(--ink); }
.btn--solid:hover { background: var(--ink); color: #fff; }

/* ----------------------------------------------------------------- grid -- */

main { padding: 0 var(--gap); }

.grid {
  position: relative;
  max-width: 1900px;
  margin: 28px auto 60px;
}

.tile {
  position: absolute;
  overflow: hidden;
  background: #f0f0f0;
  cursor: zoom-in;
  /* Rows outside the viewport skip layout+paint until scrolled near. */
  contain: strict;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s var(--ease), transform .5s var(--ease);
}

.tile img.is-loaded { opacity: 1; }
.tile:hover img { transform: scale(1.028); }

/* --------------------------------------------------------------- footer -- */

.footer {
  padding: 46px 24px 60px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}

.footer p { margin: 0 0 8px; }
.footer__meta { font-family: Cormorant, "Armenian Serif", Georgia, serif; font-size: 15px; }

/* ------------------------------------------------------------- lightbox -- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #fff;
  opacity: 0;
  transition: opacity .22s var(--ease);
}

.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }

.lightbox__stage {
  position: absolute;
  inset: 0 0 var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
  touch-action: pan-y;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s var(--ease);
}

.lightbox__img.is-loaded { opacity: 1; }

.lightbox__spinner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--hairline);
  border-top-color: var(--muted);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color .18s var(--ease);
}

.lightbox__nav:hover { color: var(--ink); }
.lightbox__nav:disabled { opacity: .18; cursor: default; }
.lightbox__nav--prev { left: 4px; }
.lightbox__nav--next { right: 4px; }

.lightbox__bar {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: var(--nav-h);
  padding: 0 18px;
  border-top: 1px solid var(--hairline);
}

.lightbox__counter {
  margin-right: auto;
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- toast -- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 200;
  transform: translate(-50%, 14px);
  padding: 10px 18px;
  border-radius: 2px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------- narrower -- */

@media (max-width: 820px) {
  .cover {
    grid-template-columns: 1fr;
    grid-template-rows: 52svh auto;
    height: auto;
    min-height: 0;
  }

  .cover__panel { padding: 48px 24px 72px; }
  .cover__arrow { bottom: 22px; }

  .nav { padding: 0 14px; }
  .nav__left { display: none; }

  .lightbox__stage { padding: 12px; inset: 0 0 var(--nav-h); }
  .lightbox__nav { width: 44px; }
  .lightbox__bar { padding: 0 10px; }
  .btn span { display: none; }
  .btn { padding: 0 11px; }
  .btn--solid span { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}