@import url("https://fonts.googleapis.com/css2?family=Tektur:wght@400&display=swap");

*{box-sizing:border-box}

:root{
  --bg:#353535;
  --text:#f4f4f0;
  --muted:#b9b9b6;
  --panel-height:100px;
  --sidebar-width:260px;
  --gap:24px;
  --page-pad:28px;
  --scrollbar-comp:18px;
}

html,
body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:"Tektur","Arial Narrow",Arial,sans-serif;
  font-size:12px;
  font-weight:400;
  letter-spacing:.02em;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(1000px 650px at 8% 5%, rgba(255,255,255,.05), transparent 58%),
    radial-gradient(900px 620px at 92% 14%, rgba(255,255,255,.03), transparent 55%),
    radial-gradient(900px 700px at 58% 88%, rgba(0,0,0,.15), transparent 62%),
    linear-gradient(180deg, rgba(60,60,60,.30) 0%, rgba(53,53,53,.44) 38%, rgba(48,48,48,.58) 100%);
}

a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
img{display:block;width:100%}


/* video glitch background */
body{
  isolation:isolate;
  background:transparent;
}

.bg-video-wrap{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:#353535 url("assets/d4-title-glitch-20260729v4-poster.jpg") center/cover no-repeat;
}


.bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.42;
  filter:grayscale(1) contrast(1.18) brightness(.82);
  transform:scale(1.025);
}

/* Fixed upper panel */
.top-panel{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  height:var(--panel-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 calc(var(--page-pad) + var(--scrollbar-comp)) 0 36px;
  background:linear-gradient(180deg,rgba(58,58,58,.86) 0%, rgba(53,53,53,.82) 100%); backdrop-filter: blur(2px);
  border-bottom:1px solid rgba(255,255,255,.11);
  box-shadow:0 8px 20px rgba(0,0,0,.20);
}

.site-logo{
  display:block;
  width:180px;
  flex:0 0 auto;
}

.site-logo img{
  width:100%;
  height:auto;
}

.top-links{
  display:flex;
  align-items:center;
  gap:24px;
  font-size:13px;
  white-space:nowrap;
}

.top-links a:hover,
.top-links a.is-active{
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Fixed project navigation below the upper panel */
.sidebar{
  position:fixed;
  z-index:500;
  left:0;
  top:var(--panel-height);
  bottom:0;
  width:var(--sidebar-width);
  padding:18px 24px 22px 36px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:linear-gradient(90deg,rgba(58,58,58,.80),rgba(53,53,53,.74)); backdrop-filter: blur(2px);
  border-right:1px solid rgba(255,255,255,.045);
}

.project-nav{
  overflow-y:auto;
  padding-right:5px;
  scrollbar-width:none;
}

.project-nav::-webkit-scrollbar{display:none}

.project-link{
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 0 8px;
  font-size:16px;
  line-height:1.12;
  text-transform:uppercase;
}

.project-link:hover,
.project-link.is-active{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.sidebar-footer{
  margin-top:auto;
  padding-top:18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  color:var(--muted);
  font-size:10px;
}

.sidebar-footer a:hover{color:#fff}

/* Only this area scrolls. It starts below the panel, so photos cannot overlap it. */
.content{
  position:fixed;
  z-index:10;
  left:var(--sidebar-width);
  right:0;
  top:var(--panel-height);
  bottom:0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  padding:var(--gap) var(--page-pad) 56px;
  background:transparent;
}

.photo-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
}

.project-card{min-width:0}

.project-cover{
  position:relative;
  display:block;
  overflow:hidden;
  background:#2f2f2f;
  border:1px solid rgba(255,255,255,.035);
  box-shadow:
    0 7px 17px rgba(0,0,0,.25),
    0 3px 7px rgba(0,0,0,.16);
  transition:box-shadow .25s ease,transform .25s ease;
}

.project-cover img{
  aspect-ratio:1600/950;
  object-fit:cover;
  transition:transform .35s ease,filter .35s ease;
}

.project-cover-video{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#2f2f2f;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.project-cover.has-hover-video.is-video-active .project-cover-video{
  opacity:1;
}

.project-cover.has-hover-video.is-video-active .project-cover-image{
  visibility:hidden;
}

.project-cover:hover{
  transform:translateY(-1px);
  box-shadow:
    0 10px 22px rgba(0,0,0,.29),
    0 4px 9px rgba(0,0,0,.18);
}

.project-cover:hover img{
  transform:scale(1.01);
  filter:brightness(1.05);
}

/* Project pages */
.project-heading{
  margin:0 0 24px;
  padding:0 0 20px;
  border-bottom:1px solid rgba(255,255,255,.13);
}

.project-heading h1{
  margin:0;
  font-size:clamp(30px,4.2vw,68px);
  font-weight:400;
  line-height:.92;
  letter-spacing:-.045em;
  text-transform:uppercase;
}

.project-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
  align-items:start;
  padding-bottom:56px;
}

.project-gallery figure{
  margin:0;
  overflow:hidden;
  aspect-ratio:4/3;
  background:#2f2f2f;
  border:1px solid rgba(255,255,255,.035);
  box-shadow:
    0 7px 17px rgba(0,0,0,.25),
    0 3px 7px rgba(0,0,0,.16);
  transition:box-shadow .25s ease,transform .25s ease;
}

.project-gallery figure:hover{
  transform:translateY(-1px);
  box-shadow:
    0 10px 22px rgba(0,0,0,.29),
    0 4px 9px rgba(0,0,0,.18);
}

.project-gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.project-gallery .gallery-empty{
  grid-column:1/-1;
  padding:40px 0;
  color:var(--muted);
}

.project-footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:18px 0 12px;
  border-top:1px solid rgba(255,255,255,.13);
  font-size:11px;
}

.project-footer a:hover{text-decoration:underline}

/* Contacts */
.contacts-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.contacts-content h1{
  margin:0 0 42px;
  font-size:clamp(46px,8vw,128px);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.05em;
}

.contacts-list{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  font-size:clamp(22px,3vw,48px);
  letter-spacing:-.03em;
}

.contacts-list a:hover{text-decoration:underline}

.mobile-menu-button{display:none}

@media(max-width:1200px){
  .photo-grid,
  .project-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:900px){
  :root{
    --panel-height:72px;
    --sidebar-width:min(84vw,340px);
    --gap:14px;
    --page-pad:14px;
    --scrollbar-comp:0px;
  }

  .top-panel{
    padding:0 12px 0 14px;
  }

  .site-logo{width:115px}

  .top-links{
    gap:12px;
    font-size:10px;
  }

  .sidebar{
    top:var(--panel-height);
    width:var(--sidebar-width);
    padding:18px 22px;
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:18px 0 50px rgba(0,0,0,.28);
  }

  .sidebar.is-open{transform:translateX(0)}

  .content{
    left:0;
    top:var(--panel-height);
    padding:var(--gap) var(--page-pad) 40px;
  }

  .photo-grid,
  .project-gallery{
    grid-template-columns:1fr;
    gap:var(--gap);
  }

  .project-heading h1{font-size:11vw}

  .mobile-menu-button{
    position:fixed;
    z-index:1100;
    left:14px;
    bottom:14px;
    display:block;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(53,53,53,.95);
    padding:8px 10px;
    font-size:10px;
    cursor:pointer;
  }
}


/* Project navigation: underline only, no dimming or flicker */
.project-link,
.project-link:hover,
.project-link.is-active{
  opacity:1 !important;
  filter:none !important;
  transition:none !important;
}

.project-link:hover,
.project-link.is-active{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}




/* Project galleries: no crop, tightly grouped, equal column widths */
.project-gallery{
  display:block !important;
  column-count:3;
  column-gap:8px;
  padding-bottom:56px;
}

.project-gallery figure{
  display:inline-block;
  width:100%;
  margin:0 0 8px !important;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  aspect-ratio:auto !important;
  height:auto !important;
  overflow:visible;
  vertical-align:top;
  background:#2f2f2f;
  border:1px solid rgba(255,255,255,.035);
  box-shadow:
    0 5px 12px rgba(0,0,0,.20),
    0 2px 5px rgba(0,0,0,.12);
}

.project-gallery figure:hover{
  transform:none;
  box-shadow:
    0 6px 14px rgba(0,0,0,.22),
    0 2px 6px rgba(0,0,0,.13);
}

.project-gallery img{
  width:100%;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center;
  display:block;
}

.project-gallery .gallery-empty{
  display:block;
  column-span:all;
}

@media(max-width:1200px){
  .project-gallery{
    column-count:2;
    column-gap:8px;
  }
}

@media(max-width:900px){
  .project-gallery{
    column-count:1;
    column-gap:8px;
  }

  .project-gallery figure{
    margin:0 0 8px !important;
  }
}

/* =========================
   MOBILE / IPHONE LAYOUT
   ========================= */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

button,
a{
  -webkit-tap-highlight-color:transparent;
}

.menu-backdrop{
  display:none;
}

@media(max-width:900px){
  :root{
    --mobile-panel-base:68px;
    --panel-height:calc(var(--mobile-panel-base) + var(--safe-top));
    --sidebar-width:min(88vw, 350px);
    --gap:12px;
    --page-pad:12px;
    --scrollbar-comp:0px;
  }

  html,
  body{
    width:100%;
    height:100%;
    overflow:hidden;
    overscroll-behavior:none;
  }

  .top-panel{
    height:var(--panel-height);
    padding:
      var(--safe-top)
      12px
      0
      12px;
    gap:12px;
    box-shadow:0 5px 14px rgba(0,0,0,.22);
  }

  .site-logo{
    width:104px;
    min-width:0;
  }

  .top-links{
    margin-left:auto;
    gap:12px;
    font-size:9px;
    line-height:1;
    letter-spacing:.025em;
  }

  .top-links a{
    display:flex;
    min-height:36px;
    align-items:center;
  }

  .content{
    left:0;
    right:0;
    top:var(--panel-height);
    bottom:0;
    padding:12px 12px calc(78px + var(--safe-bottom));
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:auto;
  }

  .photo-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .project-cover,
  .project-cover:hover{
    transform:none;
    box-shadow:
      0 6px 15px rgba(0,0,0,.24),
      0 2px 6px rgba(0,0,0,.14);
  }

  .project-cover:hover img{
    transform:none;
    filter:none;
  }

  .project-cover-video{
    display:none;
  }

  .project-cover.has-hover-video.is-video-active .project-cover-image{
    visibility:visible;
  }

  .project-cover img{
    aspect-ratio:16 / 10;
  }

  .project-heading{
    margin:2px 0 12px;
    padding:0 0 12px;
  }

  .project-heading h1{
    font-size:clamp(27px, 9.5vw, 42px);
    line-height:.96;
    letter-spacing:-.035em;
    overflow-wrap:anywhere;
  }

  .project-gallery{
    column-count:1 !important;
    column-gap:0 !important;
    padding-bottom:26px;
  }

  .project-gallery figure{
    margin:0 0 8px !important;
    box-shadow:
      0 5px 12px rgba(0,0,0,.20),
      0 2px 5px rgba(0,0,0,.12);
  }

  .project-gallery img{
    width:100%;
    height:auto !important;
    object-fit:contain !important;
  }

  .project-footer{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding-bottom:calc(12px + var(--safe-bottom));
  }

  .contacts-content{
    justify-content:flex-start;
    padding-top:clamp(48px, 16vh, 120px);
  }

  .contacts-content h1{
    margin-bottom:28px;
    font-size:clamp(42px, 17vw, 72px);
  }

  .contacts-list{
    gap:16px;
    font-size:clamp(20px, 7vw, 30px);
    overflow-wrap:anywhere;
  }

  .sidebar{
    z-index:1050;
    top:var(--panel-height);
    bottom:0;
    width:var(--sidebar-width);
    padding:22px 20px calc(28px + var(--safe-bottom));
    transform:translateX(-105%);
    transition:transform .24s ease;
    background:linear-gradient(100deg,#3b3b3b 0%,#353535 100%);
    border-right:1px solid rgba(255,255,255,.08);
    box-shadow:18px 0 44px rgba(0,0,0,.38);
  }

  .sidebar.is-open{
    transform:translateX(0);
  }

  .project-nav{
    padding-right:8px;
    -webkit-overflow-scrolling:touch;
  }

  .project-link{
    width:100%;
    margin-bottom:12px;
    font-size:16px;
    line-height:1.18;
  }

  .menu-backdrop{
    position:fixed;
    z-index:1040;
    left:0;
    right:0;
    top:var(--panel-height);
    bottom:0;
    display:block;
    border:0;
    padding:0;
    background:rgba(0,0,0,.46);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
  }

  body.menu-open .menu-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  .mobile-menu-button{
    position:fixed;
    z-index:1100;
    left:auto;
    right:12px;
    bottom:calc(12px + var(--safe-bottom));
    display:flex;
    min-width:108px;
    min-height:44px;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.24);
    border-radius:0;
    background:rgba(53,53,53,.96);
    box-shadow:0 5px 14px rgba(0,0,0,.28);
    padding:9px 13px;
    color:#fff;
    font-size:10px;
    letter-spacing:.04em;
    cursor:pointer;
  }

  body.menu-open .mobile-menu-button{
    background:#444;
  }
}

@media(max-width:360px){
  .site-logo{width:88px}
  .top-links{gap:9px;font-size:8px}
  .top-panel{padding-left:10px;padding-right:10px}
}

@media(min-width:901px) and (max-width:1100px){
  .photo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(orientation:landscape) and (max-height:520px) and (max-width:950px){
  :root{
    --mobile-panel-base:58px;
  }

  .site-logo{width:86px}
  .top-links{font-size:8px}
  .content{padding-top:9px}
  .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .project-gallery{column-count:2 !important;column-gap:8px !important}
}


body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.08;
  background:
    linear-gradient(rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  background-size:3px 3px, 3px 3px;
}


/* Updated project dates and photo captions */
.project-link{
  width:100%;
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  margin-bottom:10px;
}

.project-link-title{
  display:block;
  font-size:14px;
  line-height:1.1;
}

.project-link-date{
  display:block;
  color:rgba(244,244,240,.58);
  font-size:9px;
  line-height:1;
  letter-spacing:.04em;
}

.project-link:hover .project-link-title,
.project-link.is-active .project-link-title{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.project-card-caption{
  margin-top:7px;
  color:rgba(244,244,240,.72);
  font-size:10px;
  line-height:1.25;
}

.project-gallery figure.project-photo{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.project-photo-frame{
  overflow:hidden;
  background:#2f2f2f;
  border:1px solid rgba(255,255,255,.035);
  box-shadow:
    0 5px 12px rgba(0,0,0,.20),
    0 2px 5px rgba(0,0,0,.12);
}

.project-photo-frame img{
  width:100%;
  height:auto !important;
  object-fit:contain !important;
  display:block;
}

.project-gallery figcaption{
  margin:5px 1px 2px;
  color:rgba(244,244,240,.72);
  font-size:10px;
  line-height:1.25;
}

@media(max-width:900px){
  .project-link-title{font-size:15px}
  .project-link-date{font-size:9px}
  .project-card-caption,
  .project-gallery figcaption{font-size:9px}
}

/* Project videos */
.project-video-frame{position:relative;overflow:hidden;background:#171717;}
.project-video-frame video{display:block;width:100%;height:auto;max-width:100%;background:#111;object-fit:contain;}
.project-video-frame video:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:-1px;}



/* Project pages: align photo/video grid to full content width */
.project-gallery{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(420px, 1fr));
  grid-auto-flow:row dense;
  align-items:start;
  gap:14px;
  width:100%;
  padding-bottom:56px;
  column-count:unset !important;
  column-gap:0 !important;
}

.project-gallery figure,
.project-gallery figure.project-photo{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  break-inside:auto !important;
  -webkit-column-break-inside:auto !important;
  page-break-inside:auto !important;
  vertical-align:top;
}

.project-gallery .project-photo-frame,
.project-gallery .project-video-frame{
  width:100%;
}

.project-gallery img,
.project-gallery video{
  width:100%;
  height:auto !important;
  max-width:100%;
}

@media(max-width:1200px){
  .project-gallery{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }
}

@media(max-width:900px){
  .project-gallery{
    grid-template-columns:1fr;
    gap:12px;
  }
}


/* Project pages: single-column media layout */
.project-gallery{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-auto-flow:row;
  align-items:start;
  gap:14px;
  width:100%;
  padding-bottom:56px;
  column-count:unset !important;
  column-gap:0 !important;
}

.project-gallery figure,
.project-gallery figure.project-photo,
.project-gallery figure.project-video{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  break-inside:auto !important;
  -webkit-column-break-inside:auto !important;
  page-break-inside:auto !important;
  vertical-align:top;
}

.project-gallery .project-photo-frame,
.project-gallery .project-video-frame{
  width:100%;
}

.project-gallery img,
.project-gallery video{
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:100%;
  object-fit:contain !important;
}

.project-gallery figcaption{
  width:100%;
}

@media(max-width:1200px){
  .project-gallery{
    grid-template-columns:1fr !important;
    gap:12px;
  }
}

@media(max-width:900px){
  .project-gallery{
    grid-template-columns:1fr !important;
    gap:12px;
  }
}


/* Final project layout: one photo/video per row. Desktop width is 70%. */
.project-gallery{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-auto-flow:row !important;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  gap:14px;
  column-count:unset !important;
  column-gap:0 !important;
}
.project-gallery figure,
.project-gallery figure.project-photo,
.project-gallery figure.project-video{
  display:block !important;
  width:100% !important;
  margin:0 !important;
}
.project-gallery .project-photo-frame,
.project-gallery .project-video-frame,
.project-gallery img,
.project-gallery video{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
}
@media(min-width:901px){
  .project-gallery{
    width:70% !important;
  }
}
@media(max-width:900px){
  .project-gallery{
    width:100% !important;
  }
}

/* =========================================================
   D4 PATCH 2026-07-29: projects control moved into top menu
   ========================================================= */
.mobile-menu-button{
  display:none !important;
}

.top-links .projects-menu-link{
  cursor:pointer;
}

@media(max-width:900px){
  .content{
    padding-bottom:calc(18px + var(--safe-bottom));
  }

  body.menu-open .top-links .projects-menu-link{
    text-decoration:underline;
    text-underline-offset:3px;
  }
}


/* =========================================================
   V5 — прозрачный хидер + управляемая мобильная версия
   ========================================================= */
.top-panel{
  background:transparent !important;
  background-color:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
@media(max-width:900px){
  .top-panel{
    padding:var(--safe-top) var(--mobile-page-pad,12px) 0 var(--mobile-page-pad,12px) !important;
    gap:12px;
  }
  .site-logo{width:var(--mobile-logo-width,104px) !important}
  .top-links{font-size:var(--mobile-top-links-font,9px) !important}
  .content{
    padding-left:var(--mobile-page-pad,12px) !important;
    padding-right:var(--mobile-page-pad,12px) !important;
  }
  .photo-grid{
    grid-template-columns:repeat(var(--mobile-grid-columns,1),minmax(0,1fr)) !important;
    gap:var(--mobile-gap,12px) !important;
  }
  .project-gallery{gap:var(--mobile-gap,12px) !important}
  .sidebar{width:min(var(--mobile-sidebar-width,88vw),420px) !important}
  .project-link{font-size:var(--mobile-nav-font-size,16px) !important}
  .home-page .content{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .home-page .photo-grid{
    margin-left:var(--mobile-page-pad,12px) !important;
    margin-right:var(--mobile-page-pad,12px) !important;
  }
  .hero-screen{
    height:var(--mobile-hero-height,150px) !important;
  }
}

/* =========================================================
   V6 — без верхнего хидера; боковая панель от верха до низа
   ========================================================= */
:root{--panel-height:0px}
.top-panel{display:none !important}
.sidebar{
  top:0 !important;
  bottom:0 !important;
  padding-top:28px !important;
  z-index:600;
}
.sidebar-logo{
  display:block;
  width:180px;
  margin:0 0 30px 0;
  flex:0 0 auto;
}
.sidebar-logo img{display:block;width:100%;height:auto}
.content{top:0 !important}
.home-page .content{top:0 !important;padding-top:0 !important}
.home-page .hero-screen{margin-top:0 !important}
.mobile-logo-trigger{display:none}

@media(max-width:900px){
  .content{top:0 !important}
  .home-page .content{top:0 !important;padding-top:0 !important}
  .home-page .hero-screen{margin-top:0 !important}
  .sidebar{
    top:0 !important;
    bottom:0 !important;
    padding-top:calc(var(--safe-top) + 76px) !important;
  }
  .sidebar .sidebar-logo{display:none !important}
  .mobile-logo-trigger{
    position:fixed;
    z-index:1150;
    top:0;
    left:0;
    display:block;
    width:calc(var(--mobile-logo-width,104px) + 28px);
    height:calc(var(--safe-top) + 68px);
    padding:var(--safe-top) 14px 8px;
    border:0;
    background:linear-gradient(90deg,rgba(58,58,58,.94),rgba(53,53,53,.88));
    box-shadow:none;
    cursor:pointer;
  }
  .mobile-logo-trigger img{
    display:block;
    width:var(--mobile-logo-width,104px);
    max-width:100%;
    height:auto;
  }
  body.menu-open .mobile-logo-trigger{
    background:linear-gradient(90deg,rgba(58,58,58,.98),rgba(53,53,53,.94));
  }
}

/* =========================================================
   V7 — solid header, contacts, fixed mobile header
   ========================================================= */
:root{
  --panel-height:100px;
  --d4-header-bg:#404041;
}
.top-panel,
.site-header{
  display:flex !important;
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:1200 !important;
  height:var(--panel-height) !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:0 calc(var(--page-pad) + var(--scrollbar-comp)) 0 36px !important;
  background:var(--d4-header-bg) !important;
  background-image:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border:0 !important;
  box-shadow:none !important;
}
.site-header .header-logo{
  display:block !important;
  width:180px !important;
  flex:0 0 auto;
  margin:0 !important;
}
.site-header .header-logo img{display:block;width:100%;height:auto}
.site-header .top-links{margin-left:auto}
.site-header .contacts-link{text-transform:uppercase}
.site-header .contacts-link:hover,
.site-header .contacts-link.is-active{text-decoration:underline;text-underline-offset:4px}
.mobile-projects-trigger{display:none}
.mobile-logo-trigger,.sidebar-logo{display:none !important}
.sidebar{
  top:0 !important;
  bottom:0 !important;
  padding-top:calc(var(--panel-height) + 18px) !important;
  background:var(--d4-header-bg) !important;
  background-image:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  z-index:600 !important;
}
.content{top:var(--panel-height) !important}
.home-page .content{top:var(--panel-height) !important;padding-top:0 !important}
.home-page .hero-screen{margin-top:0 !important}
.contacts-note{margin-top:28px;max-width:760px;color:var(--muted);font-size:14px;line-height:1.55}
.contacts-list span{display:block}

@media(max-width:900px){
  :root{--panel-height:calc(var(--mobile-panel-base,68px) + var(--safe-top))}
  .top-panel,
  .site-header{
    height:var(--panel-height) !important;
    padding:var(--safe-top) var(--mobile-page-pad,12px) 0 var(--mobile-page-pad,12px) !important;
    gap:8px !important;
    background:var(--d4-header-bg) !important;
  }
  .site-header .header-logo{
    width:var(--mobile-logo-width,104px) !important;
    max-width:45vw;
  }
  .site-header .top-links{
    margin-left:auto;
    font-size:var(--mobile-top-links-font,9px) !important;
    white-space:nowrap;
  }
  .mobile-projects-trigger{
    display:grid;
    place-items:center;
    flex:0 0 32px;
    width:32px;
    height:32px;
    margin-left:2px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--text);
    font-size:25px;
    line-height:1;
    cursor:pointer;
  }
  .mobile-projects-trigger span{transform:translateY(-1px)}
  body.menu-open .mobile-projects-trigger{opacity:.72}
  .sidebar{
    top:0 !important;
    bottom:0 !important;
    width:min(var(--mobile-sidebar-width,88vw),420px) !important;
    padding-top:calc(var(--panel-height) + 14px) !important;
    background:var(--d4-header-bg) !important;
    background-image:none !important;
    z-index:1100 !important;
  }
  .project-link{font-size:var(--mobile-nav-font-size,16px) !important}
  .content{top:var(--panel-height) !important}
  .home-page .content{top:var(--panel-height) !important;padding-top:0 !important}
  .home-page .hero-screen{margin-top:0 !important}
  .home-page .content{padding-left:0 !important;padding-right:0 !important}
  .home-page .photo-grid{
    margin-left:var(--mobile-page-pad,12px) !important;
    margin-right:var(--mobile-page-pad,12px) !important;
  }
  .hero-screen{height:var(--mobile-hero-height,150px) !important}
}


/* =========================================================
   V8 — transparent overlay header/sidebar + hero from viewport top
   ========================================================= */
:root{--d4-overlay-bg:rgba(53,53,53,.16)}
.top-panel,.site-header{
  background:var(--d4-overlay-bg) !important;
  background-image:none !important;
  -webkit-backdrop-filter:blur(2px) !important;
  backdrop-filter:blur(2px) !important;
  border:0 !important;
  box-shadow:none !important;
}
.sidebar{
  background:rgba(53,53,53,.13) !important;
  background-image:none !important;
  -webkit-backdrop-filter:blur(1.5px) !important;
  backdrop-filter:blur(1.5px) !important;
  border-right:0 !important;
}
.home-page .content{
  top:0 !important;
  padding-top:0 !important;
}
.home-page .hero-screen{
  margin-top:0 !important;
  position:relative;
  z-index:1;
}
.home-page .photo-grid{position:relative;z-index:2}
.site-header{z-index:1200 !important}
.sidebar{z-index:1100 !important}
@media(max-width:900px){
  .top-panel,.site-header{background:rgba(53,53,53,.15) !important}
  .sidebar{background:rgba(53,53,53,.15) !important}
  .home-page .content{top:0 !important;padding-top:0 !important}
  .home-page .hero-screen{margin-top:0 !important}
}


/* =========================================================
   V9 — panorama-linked header geometry + adjustable overlays
   ========================================================= */
:root{
  --d4-hero-height:220px;
  --d4-hero-width:100vw;
  --d4-header-opacity:.30;
  --d4-sidebar-opacity:.26;
}
.home-page .hero-screen{
  width:var(--d4-hero-width) !important;
  max-width:100vw !important;
  height:var(--d4-hero-height) !important;
  margin:0 !important;
}
.home-page .hero-screen-stage{width:100% !important;height:100% !important}
.home-page .site-header{
  width:var(--d4-hero-width) !important;
  max-width:100vw !important;
  right:auto !important;
  height:var(--d4-hero-height) !important;
  min-height:0 !important;
  align-items:flex-start !important;
  padding-top:28px !important;
  background:rgba(53,53,53,var(--d4-header-opacity)) !important;
  -webkit-backdrop-filter:blur(2px) !important;
  backdrop-filter:blur(2px) !important;
}
.home-page .site-header .top-links{padding-top:10px}
.home-page .sidebar{
  top:var(--d4-hero-height) !important;
  bottom:0 !important;
  padding-top:18px !important;
  background:rgba(53,53,53,var(--d4-sidebar-opacity)) !important;
  -webkit-backdrop-filter:blur(1.5px) !important;
  backdrop-filter:blur(1.5px) !important;
}
/* Other pages retain a compact header but use the same adjustable opacity. */
.project-page .site-header,.contacts-page .site-header{
  background:rgba(53,53,53,var(--d4-header-opacity)) !important;
}
.project-page .sidebar,.contacts-page .sidebar{
  background:rgba(53,53,53,var(--d4-sidebar-opacity)) !important;
}
@media(max-width:900px){
  :root{--panel-height:var(--mobile-hero-height,150px) !important}
  .home-page .hero-screen{
    width:var(--d4-hero-width) !important;
    height:var(--mobile-hero-height,150px) !important;
  }
  .home-page .site-header{
    width:var(--d4-hero-width) !important;
    height:var(--mobile-hero-height,150px) !important;
    padding:calc(var(--safe-top) + 10px) var(--mobile-page-pad,12px) 0 var(--mobile-page-pad,12px) !important;
    background:rgba(53,53,53,var(--d4-header-opacity)) !important;
  }
  .home-page .site-header .top-links{padding-top:5px}
  .home-page .sidebar{
    top:var(--mobile-hero-height,150px) !important;
    height:calc(100vh - var(--mobile-hero-height,150px)) !important;
    padding-top:14px !important;
    background:rgba(53,53,53,var(--d4-sidebar-opacity)) !important;
  }
}
/* =========================================================
   V10 — page backgrounds + header navigation alignment
   ========================================================= */
.page-custom-background{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
  background:transparent;
}
.page-custom-background img,
.page-custom-background video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(var(--page-bg-brightness,100%)) contrast(var(--page-bg-contrast,100%));
  opacity:var(--page-bg-opacity,1);
}
.bg-video-wrap{z-index:-2 !important}

/* Logo and navigation are centered vertically inside the actual header height. */
.site-header,
.home-page .site-header{
  align-items:center !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.site-header .header-logo{
  align-self:center !important;
}
.site-header .header-actions{
  margin-left:auto !important;
  margin-right:var(--page-pad,36px) !important;
  padding-top:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:7px !important;
  height:100% !important;
}
.site-header .header-actions a,
.site-header .header-actions button{
  font:inherit;
  font-size:inherit;
  letter-spacing:inherit;
  line-height:1.1;
  color:inherit;
  background:none;
  border:0;
  padding:0;
  margin:0;
  text-transform:uppercase;
  cursor:pointer;
}
.site-header .header-actions a:hover,
.site-header .header-actions button:hover,
.site-header .header-actions .is-active{
  text-decoration:underline;
  text-underline-offset:4px;
}

/* The projects panel always begins below the header, on current and future non-home pages. */
body:not(.home-page) .sidebar{
  top:var(--panel-height) !important;
  height:calc(100vh - var(--panel-height)) !important;
  bottom:auto !important;
}
.home-page .sidebar{
  top:var(--d4-hero-height) !important;
  height:calc(100vh - var(--d4-hero-height)) !important;
  bottom:auto !important;
}

/* Old three-line menu button is removed. */
.site-header .mobile-projects-trigger.projects-link{
  display:block !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  border:0 !important;
  border-radius:0 !important;
}

/* Contact/projects block follows the right edge used by the page media. */
.project-page .site-header .header-actions,
.contacts-page .site-header .header-actions{
  margin-right:var(--page-pad,36px) !important;
}

@media(max-width:900px){
  .site-header,
  .home-page .site-header{
    align-items:center !important;
    padding-top:var(--safe-top) !important;
    padding-bottom:0 !important;
  }
  .site-header .header-actions{
    margin-right:var(--mobile-page-pad,12px) !important;
    gap:6px !important;
    justify-content:center !important;
    font-size:var(--mobile-top-links-font,9px) !important;
  }
  .home-page .sidebar{
    top:var(--mobile-hero-height,150px) !important;
    height:calc(100vh - var(--mobile-hero-height,150px)) !important;
  }
  body:not(.home-page) .sidebar{
    top:var(--panel-height) !important;
    height:calc(100vh - var(--panel-height)) !important;
  }
}

/* =========================================================
   V11 — global header geometry controls
   ========================================================= */
.site-header .header-logo{
  width:var(--d4-logo-width,180px) !important;
  transform:translate(var(--d4-logo-x,0px),var(--d4-logo-y,0px));
}
.site-header .header-logo img{width:100% !important;height:auto !important;display:block}
.site-header .header-actions{
  gap:var(--d4-header-buttons-gap,7px) !important;
  transform:translate(var(--d4-header-buttons-x,0px),var(--d4-header-buttons-y,0px));
}
.site-header .projects-link{display:block !important}
@media(max-width:900px){
  .site-header .header-logo{
    width:var(--mobile-logo-width,104px) !important;
    transform:translate(var(--mobile-logo-x,0px),var(--mobile-logo-y,0px));
  }
  .site-header .header-actions{
    gap:var(--mobile-buttons-gap,6px) !important;
    transform:translate(var(--mobile-buttons-x,0px),var(--mobile-buttons-y,0px));
  }
}