:root {
  --ink: #080706;
  --paper: #f4f2ed;
  --white: #fff;
  --muted: #8b8882;
  --line: rgba(8, 7, 6, 0.18);
  --dark-line: rgba(255, 255, 255, 0.18);
  --page: min(1440px, calc(100vw - 56px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.project-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  height: 88px;
  padding: 0 max(28px, calc((100vw - 1440px) / 2));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--white);
  border-bottom: 1px solid var(--dark-line);
  transition: height .35s, color .35s, background .35s, border-color .35s;
}
.project-header.scrolled {
  height: 72px;
  color: var(--ink);
  background: rgba(244, 242, 237, .94);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 12px; width: max-content; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 15px "Prata", serif; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy b { font-size: 12px; letter-spacing: .22em; }
.brand-copy small { font-size: 6px; text-transform: uppercase; letter-spacing: .15em; opacity: .55; }
.project-nav { display: flex; align-items: center; gap: 36px; }
.project-nav a, .back-link { font-size: 8px; text-transform: uppercase; letter-spacing: .14em; }
.project-nav a { opacity: .72; transition: opacity .2s; }
.project-nav a:hover { opacity: 1; }
.back-link { justify-self: end; padding: 13px 0; border-bottom: 1px solid currentColor; }
.menu-toggle { display: none; }

.project-hero { position: relative; min-height: max(720px, 100svh); overflow: hidden; color: var(--white); background: #18130e; }
.project-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.01); animation: hero-in 1.4s cubic-bezier(.2,.8,.2,1) both; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,5,4,.72) 0%, rgba(6,5,4,.25) 55%, rgba(6,5,4,.08) 100%), linear-gradient(0deg, rgba(6,5,4,.46), transparent 52%); }
.hero-topline { position: absolute; z-index: 1; top: 128px; left: max(28px, calc((100vw - 1440px) / 2)); right: max(28px, calc((100vw - 1440px) / 2)); display: flex; justify-content: space-between; font-size: 8px; text-transform: uppercase; letter-spacing: .16em; opacity: .75; }
.hero-copy { position: absolute; z-index: 1; left: max(28px, calc((100vw - 1440px) / 2)); bottom: 110px; }
.hero-copy p { margin: 0 0 24px; font-size: 8px; letter-spacing: .18em; }
.hero-copy h1 { margin: 0; font-size: clamp(64px, 9vw, 144px); line-height: .82; font-weight: 500; letter-spacing: -.075em; }
.hero-copy h1 em { font-family: "Prata", serif; font-weight: 400; }
.hero-scroll { position: absolute; z-index: 1; right: max(28px, calc((100vw - 1440px) / 2)); bottom: 58px; display: flex; align-items: center; gap: 12px; font-size: 8px; text-transform: uppercase; letter-spacing: .14em; }
.hero-scroll span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; }
@keyframes hero-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1.01); } }

.project-story { width: var(--page); margin: 0 auto; padding: 150px 0 170px; display: grid; grid-template-columns: .45fr 1.3fr .9fr; column-gap: 7vw; row-gap: 88px; }
.story-label { font-size: 8px; text-transform: uppercase; letter-spacing: .16em; }
.story-title { grid-column: 2 / 4; display: grid; grid-template-columns: .75fr 1.3fr; gap: 7vw; align-items: end; }
.story-title > p { margin: 0 0 8px; max-width: 340px; font-size: 12px; line-height: 1.8; color: rgba(8,7,6,.58); }
.story-title h2 { margin: 0; font-size: clamp(58px, 7vw, 108px); line-height: .93; font-weight: 500; letter-spacing: -.065em; }
.story-title h2 em { font-family: "Prata", serif; font-weight: 400; }
.story-copy { grid-column: 2; }
.story-copy p { margin: 0 0 24px; max-width: 690px; font-size: 14px; line-height: 1.9; color: rgba(8,7,6,.67); }
.story-meta { grid-column: 3; margin: 0; border-top: 1px solid var(--line); }
.story-meta div { padding: 20px 0; display: grid; grid-template-columns: 90px 1fr; gap: 20px; border-bottom: 1px solid var(--line); }
.story-meta dt { font-size: 7px; text-transform: uppercase; letter-spacing: .14em; opacity: .45; }
.story-meta dd { margin: 0; font-size: 11px; }

.gallery-section { padding: 140px max(28px, calc((100vw - 1440px) / 2)) 170px; background: var(--ink); color: var(--white); }
.gallery-head { margin-bottom: 86px; display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.gallery-head span, .gallery-head p { font-size: 8px; text-transform: uppercase; letter-spacing: .15em; opacity: .5; }
.gallery-head h2 { margin: 22px 0 0; font: clamp(46px, 6vw, 88px)/.95 "Prata", serif; letter-spacing: -.055em; }
.gallery-head p { margin: 0 0 10px; }
.project-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.gallery-item,
.gallery-item.gallery-wide,
.gallery-item.gallery-tall { position: relative; grid-column: auto; width: 100%; padding: 0; border: 0; overflow: hidden; background: #141414; cursor: zoom-in; aspect-ratio: 1; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .35s; }
.gallery-item::after { content: "Открыть ↗"; position: absolute; right: 18px; bottom: 16px; font-size: 7px; text-transform: uppercase; letter-spacing: .14em; opacity: 0; transform: translateY(8px); transition: .3s; }
.gallery-item:hover img { transform: scale(1.025); filter: brightness(.82); }
.gallery-item:hover::after { opacity: 1; transform: none; }

.project-cta { padding: 150px max(28px, calc((100vw - 1440px) / 2)) 170px; background: var(--paper); }
.project-cta > span { font-size: 8px; text-transform: uppercase; letter-spacing: .16em; opacity: .5; }
.project-cta h2 { margin: 42px 0 70px; max-width: 1050px; font-size: clamp(58px, 7.2vw, 110px); line-height: .95; font-weight: 500; letter-spacing: -.065em; }
.project-cta h2 em { font-family: "Prata", serif; font-weight: 400; }
.project-cta > a { width: 160px; height: 160px; display: grid; place-items: center; align-content: center; gap: 14px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 8px; text-align: center; text-transform: uppercase; letter-spacing: .13em; transition: transform .3s; }
.project-cta > a:hover { transform: scale(1.04); }
.project-cta > a b { font-size: 18px; font-weight: 400; }

.project-footer { padding: 42px max(28px, calc((100vw - 1440px) / 2)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 40px; background: var(--ink); color: var(--white); border-top: 1px solid var(--dark-line); }
.project-footer > a:nth-child(2), .project-footer > span { font-size: 8px; text-transform: uppercase; letter-spacing: .14em; opacity: .55; }
.project-footer > span { justify-self: end; }

.gallery-viewer { position: fixed; z-index: 100; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s; }
.gallery-viewer.open { opacity: 1; pointer-events: auto; }
.viewer-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.88); backdrop-filter: blur(14px); }
.viewer-panel { position: absolute; inset: 18px; min-width: 0; min-height: 0; padding: 20px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--ink); color: var(--white); transform: translateY(20px) scale(.99); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.gallery-viewer.open .viewer-panel { transform: none; }
.viewer-bar, .viewer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 8px; text-transform: uppercase; letter-spacing: .14em; }
.viewer-bar { padding-bottom: 14px; }
.viewer-bar button { padding: 8px 11px; border: 1px solid var(--dark-line); border-radius: 999px; background: rgba(255,255,255,.02); cursor: pointer; text-transform: uppercase; letter-spacing: .13em; transition: color .2s, background .2s, border-color .2s; }
.viewer-bar button:hover { color: var(--ink); background: var(--white); border-color: var(--white); }
.viewer-bar button:focus-visible { outline-width: 1px; outline-offset: 3px; }
.viewer-panel figure { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; isolation: isolate; background: #100f0e; }
.viewer-panel figure::before { content: ""; position: absolute; z-index: -1; inset: -42px; background-image: linear-gradient(rgba(8,7,6,.58), rgba(8,7,6,.58)), var(--viewer-bg, none); background-position: center; background-size: cover; filter: blur(28px); opacity: .65; transform: scale(1.08); transition: background-image .2s; }
.viewer-panel figure::after { content: ""; position: absolute; z-index: 2; top: 50%; left: 50%; width: 28px; height: 28px; margin: -16px 0 0 -16px; border: 1px solid rgba(255,255,255,.25); border-top-color: var(--white); border-radius: 50%; animation: viewer-spin .8s linear infinite; transition: opacity .2s; }
.viewer-panel figure img { position: absolute; z-index: 1; top: 50%; left: 50%; width: auto; height: auto; max-width: none; object-fit: contain; opacity: 0; transform: translate(-50%, -50%) scale(.985); transition: opacity .25s, transform .5s cubic-bezier(.2,.8,.2,1); }
.gallery-viewer.image-ready .viewer-panel figure img { opacity: 1; transform: translate(-50%, -50%); }
.gallery-viewer.image-ready .viewer-panel figure::after { opacity: 0; }
.gallery-viewer.image-error .viewer-panel figure::after { animation: none; border-color: #e87474; }
@keyframes viewer-spin { to { transform: rotate(360deg); } }
.viewer-bottom { padding-top: 16px; }
.viewer-bottom > span { max-width: 60%; opacity: .55; }
.viewer-bottom > div { display: flex; gap: 8px; }
.viewer-bottom button { width: 46px; height: 46px; border: 1px solid var(--dark-line); border-radius: 50%; background: transparent; cursor: pointer; }
.viewer-bottom button:hover { color: var(--ink); background: var(--white); }

@media (max-width: 980px) {
  .project-nav { gap: 20px; }
  .project-story { grid-template-columns: .45fr 1fr; }
  .story-title { grid-column: 2; grid-template-columns: 1fr; }
  .story-copy { grid-column: 2; }
  .story-meta { grid-column: 2; }
  .project-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --page: calc(100vw - 36px); }
  .project-header { height: 70px; padding: 0 18px; grid-template-columns: 1fr auto; }
  .project-header.scrolled { height: 70px; }
  .project-header .back-link { display: none; }
  .menu-toggle { position: relative; z-index: 2; width: 42px; height: 42px; display: grid; place-content: center; gap: 7px; border: 0; background: transparent; cursor: pointer; }
  .menu-toggle span { width: 26px; height: 1px; background: currentColor; transition: transform .3s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .project-nav { position: absolute; top: 0; left: 0; right: 0; padding: 96px 22px 42px; display: grid; gap: 22px; color: var(--white); background: var(--ink); transform: translateY(-110%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
  .project-header.menu-open .project-nav { transform: none; }
  .project-header.menu-open { color: var(--white); }
  .project-nav a { font-size: 17px; text-transform: none; letter-spacing: -.03em; opacity: 1; }
  .project-hero { min-height: 760px; }
  .project-hero > img { object-position: 56% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(6,5,4,.72), rgba(6,5,4,.08) 78%); }
  .hero-topline { top: 98px; left: 18px; right: 18px; }
  .hero-topline span:last-child { display: none; }
  .hero-copy { left: 18px; right: 18px; bottom: 132px; }
  .hero-copy h1 { font-size: 60px; line-height: .88; }
  .hero-scroll { left: 18px; right: auto; bottom: 42px; }
  .project-story { padding: 96px 0 110px; grid-template-columns: 1fr; row-gap: 54px; }
  .story-label, .story-title, .story-copy, .story-meta { grid-column: 1; }
  .story-title { gap: 34px; }
  .story-title h2 { font-size: 54px; }
  .story-copy p { font-size: 13px; line-height: 1.75; }
  .story-meta div { grid-template-columns: 76px 1fr; }
  .gallery-section { padding: 96px 0 110px; }
  .gallery-head { margin: 0 18px 52px; align-items: start; flex-direction: column; gap: 22px; }
  .gallery-head h2 { font-size: 49px; }
  .project-gallery { grid-template-columns: 1fr; gap: 8px; }
  .gallery-item, .gallery-item.gallery-wide, .gallery-item.gallery-tall { grid-column: auto; aspect-ratio: 1; }
  .gallery-item::after { display: none; }
  .project-cta { padding: 96px 18px 110px; }
  .project-cta h2 { margin: 34px 0 56px; font-size: 52px; }
  .project-cta > a { width: 142px; height: 142px; }
  .project-footer { padding: 38px 18px; grid-template-columns: 1fr auto; }
  .project-footer > span { display: none; }
  .viewer-panel { inset: 0; padding: 14px; }
  .viewer-panel figure::before { inset: -24px; filter: blur(20px); }
  .viewer-bottom > span { max-width: 52%; line-height: 1.5; }
  .viewer-bottom button { width: 42px; height: 42px; }
}

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