/* ==========================================================================
   Studio Atelier — design tokens
   Grotesk (Archivo) for structure/nav, editorial serif (Newsreader) for
   long-form bio/about copy, mono (Space Mono) for drawing-style annotations
   (index numbers, location/year meta) — a nod to architectural notation.
   ========================================================================== */
:root{
  --color-bg:       #ffffff;
  --color-ink:      #15140f;
  --color-stone:    #6f6a5c;
  --color-hairline: #dfdac9;
  --color-panel:    #f6f4ee;
  --color-overlay:  rgba(21,20,15,0.58);
  --font-display: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Roboto', Georgia, 'Times New Roman', serif;
  --font-mono:    'Roboto', 'Courier New', monospace;
  --gutter: 1px;
  --header-h: 76px;
  --text-base: .7rem; /* base size for all body copy; headings stay larger */
}

*, *::before, *::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:var(--color-stone) transparent;
}
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background-color:var(--color-stone); border-radius:3px; }
::-webkit-scrollbar-thumb:hover{ background-color:var(--color-ink); }

body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-ink);
  font-family:var(--font-display);
  font-size:var(--text-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--color-ink); outline-offset:3px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-stone);
}

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center;
  height:var(--header-h);
  padding:0 clamp(20px,4vw,48px);
  background:var(--color-bg);
}
.site-header:not(.site-header--splash){
  position:static;
}
.site-branding,
.site-branding a,
.custom-logo-link{
  line-height:0;
  display:flex;
  align-items:center;
}
.site-branding a{
  font-size:1rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.site-branding img{ height:32px; width:auto; }

.primary-nav{ margin-left:auto; }
.primary-nav ul{ display:flex; gap:clamp(14px,2.4vw,32px); align-items:center; }
.primary-nav a{
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:6px 2px;
  border-bottom:1px solid transparent;
  line-height:1;
  transition:border-color .2s ease;
}
.primary-nav a:hover,
.primary-nav a.is-active{ border-color:var(--color-ink); }

.header-tools{ display:flex; align-items:center; gap:18px; margin-left:18px; }
.header-tools .icon-btn{ display:flex; padding:4px; }
.header-tools svg{ width:18px; height:18px; }
.header-tools .search-toggle{ display:none; }

.menu-toggle{ display:none; }

/* Splash / entry screen header — logo only, floating over the hero */
.site-header--splash{
  position:absolute; top:0; left:0; right:0; z-index:20;
  height:auto;
  background:transparent;
  padding:28px clamp(20px,4vw,48px);
}
.site-header--splash .site-branding a{ color:#fff; }
.site-header--splash .site-branding img{
  filter:brightness(0) invert(1);
}

@media (max-width:820px){
  .primary-nav{
    position:fixed; inset:var(--header-h) 0 0 0;
    background:var(--color-bg);
    transform:translateY(-8px);
    opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    padding:32px clamp(20px,6vw,48px);
    overflow-y:auto;
    margin-left:0;
  }
  .primary-nav.is-open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .primary-nav ul{ flex-direction:column; align-items:flex-start; gap:22px; }
  .primary-nav a{ font-size:1.1rem; }
  .menu-toggle{
    display:flex; flex-direction:column; gap:5px; padding:8px;
  }
  .menu-toggle span{ width:22px; height:1px; background:var(--color-ink); }
}

/* ==========================================================================
   Search overlay
   ========================================================================== */
.search-overlay{
  position:fixed; inset:0; z-index:100;
  background:var(--color-bg);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:18vh;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.search-overlay.is-open{ opacity:1; pointer-events:auto; }
.search-overlay form{ width:min(640px,86vw); }
.search-overlay input[type="search"]{
  width:100%; border:0; border-bottom:2px solid var(--color-ink);
  background:none; font-family:var(--font-serif); font-size:2rem;
  padding:8px 4px; color:var(--color-ink);
}
.search-overlay .search-close{
  position:absolute; top:26px; right:clamp(20px,4vw,48px);
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase;
}

/* ==========================================================================
   Splash / entry screen (front page only)
   ========================================================================== */
.splash-hero{
  position:relative;
  display:block;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:var(--color-ink);
  cursor:pointer;
}
.splash-slide{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
.splash-slide-0{ opacity:1; }
.splash-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.splash-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}

/* ==========================================================================
   Project grid (front page) — 3-across, full-screen rows, scroll-snap
   ========================================================================== */
html:has(body.post-type-archive-project){
  scroll-snap-type: y mandatory;
}
/* Хедърът остава фиксиран горе на страницата с проекти, докато скролираш през редовете */
.post-type-archive-project .site-header{
  position: sticky;
  top: 0;
  z-index: 50;
}
.project-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:calc(100vh - var(--header-h));
  gap:4px;
  padding:0;
  background:var(--color-bg);
}
@media (max-width:1024px){ .project-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .project-grid{ grid-template-columns:1fr; } }

.project-tile{
  display:block;
  width:100%;
  height:100%;
  position:relative;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  scroll-margin-top:var(--header-h);
}
.project-tile .tile-image{
  position:relative;
  overflow:hidden;
  width:100%;
  height:100%;
  background:var(--color-panel);
}
.project-tile img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.project-tile .tile-image::before{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:55%;
  background:linear-gradient(to top, rgba(0,0,0,.62), transparent);
  pointer-events:none;
  z-index:1;
}
.project-tile .tile-image::after{
  content:'';
  position:absolute; inset:0;
  background:var(--color-ink);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
  z-index:1;
}
.project-tile:hover .tile-image::after{ opacity:.16; }

.project-tile .tile-caption{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:14px 16px;
}
.tile-caption .tile-title{
  font-size:var(--text-base);
  letter-spacing:.02em;
  font-weight:500;
  color:#fff;
}
.project-tile .tile-trigger{ position:absolute; inset:0; z-index:3; cursor:pointer; }

/* ==========================================================================
   Single project
   ========================================================================== */
.project-title-bar{
  padding:48px clamp(20px,4vw,48px) 32px;
  max-width:1100px; margin:0 auto;
}
.project-title-bar h1{
  margin:0; font-size:2rem; text-transform:uppercase; letter-spacing:.02em;
}

.project-images{
  display:flex; flex-direction:column; gap:clamp(10px,1.4vw,18px);
  max-width:1100px; margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
}
.project-images-item{ background:var(--color-panel); overflow:hidden; }
.project-images-item img{ width:100%; height:auto; display:block; }

.project-body{
  max-width:1100px; margin:0 auto;
  padding:56px clamp(20px,4vw,48px) 24px;
}
.project-body-row{
  display:flex; flex-wrap:wrap; gap:48px;
}
.project-meta-col{
  flex:0 0 220px;
}
.meta-item{ margin-bottom:14px; font-size:var(--text-base); }
.meta-item .label{
  font-family:var(--font-mono); color:var(--color-stone);
  margin-right:6px;
}
.meta-item .value{ color:var(--color-ink); }

.project-description{
  flex:1 1 420px;
  font-family:var(--font-serif); font-size:var(--text-base); line-height:1.7;
  color:#232016;
}
.project-description p{ margin:0 0 1.2em; font-size:var(--text-base); }

@media (max-width:700px){
  .project-body-row{ flex-direction:column; gap:24px; }
  .project-meta-col{ flex:none; display:flex; flex-wrap:wrap; gap:8px 24px; }
  .meta-item{ margin-bottom:0; }
}

.project-pagination{
  display:flex; justify-content:space-between; align-items:center;
  padding:36px clamp(20px,4vw,48px) 64px;
  max-width:1100px; margin:0 auto;
  border-top:none;
}
.project-pagination a{ font-family:var(--font-mono); font-size:var(--text-base); letter-spacing:.05em; text-transform:uppercase; }
.project-pagination .back-link{ text-align:center; flex:1; }

/* Minimalist back arrow: a single thin stroke drawn with an SVG mask,
   instead of a font glyph (which rendered too bold/rounded). */
.project-pagination .back-link a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  font-size:0;
  transition:transform .2s ease;
}
.project-pagination .back-link a:hover{
  transform:translateX(-4px);
}
.project-pagination .back-link a::before{
  content:"";
  display:block;
  width:19px;
  height:19px;
  background-color:var(--color-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' y1='12' x2='3' y2='12'/%3E%3Cpolyline points='10 5 3 12 10 19'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' y1='12' x2='3' y2='12'/%3E%3Cpolyline points='10 5 3 12 10 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Studio / About page
   ========================================================================== */
.page-content{ max-width:760px; margin:0 auto; padding:72px clamp(20px,4vw,48px) 40px; }
.page-content--studio{ max-width:1180px; }
.page-content h1{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em;
  font-size:2rem; margin:0 0 40px;
}
.page-content h2{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em;
  font-size:.85rem; color:var(--color-stone); margin:56px 0 16px;
}
.page-content h2:first-of-type{ margin-top:0; }
.page-content .lede,
.page-content p{
  font-family:var(--font-serif); font-size:var(--text-base); line-height:1.75; margin:0 0 1.2em;
}

.studio-layout{ display:flex; gap:clamp(32px,5vw,72px); align-items:flex-start; }
.studio-layout-text{ flex:1 1 55%; min-width:0; }
.studio-layout-media{ flex:1 1 40%; max-width:440px; position:sticky; top:calc(var(--header-h) + 32px); }
.studio-layout-media img{ width:100%; height:auto; object-fit:cover; }
@media (max-width:820px){
  .studio-layout{ flex-direction:column; }
  .studio-layout-media{ position:static; max-width:none; order:-1; }
}

.principal-block{ display:flex; gap:32px; align-items:flex-start; margin-bottom:8px; }
.principal-block img{ width:180px; height:220px; object-fit:cover; flex:none; }
@media (max-width:600px){ .principal-block{ flex-direction:column; } .principal-block img{ width:100%; height:auto; aspect-ratio:4/5; } }

.contact-block{ margin-top:8px; }
.contact-block .contact-line{ font-family:var(--font-mono); font-size:.9rem; margin:6px 0; color:var(--color-stone); }
.contact-block a{ color:var(--color-ink); border-bottom:1px solid var(--color-hairline); }
.contact-block a:hover{ border-color:var(--color-ink); }
.social-row{ display:flex; gap:18px; margin-top:24px; }
.social-row a{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--color-hairline); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  padding:28px clamp(20px,4vw,48px);
  display:flex; flex-wrap:wrap; gap:16px;
  justify-content:center; align-items:center;
}
.site-footer,
.site-footer a{ font-family:var(--font-mono); font-size:var(--text-base); letter-spacing:.04em; color:var(--color-stone); }
.site-footer a:hover{ color:var(--color-ink); }
.footer-social{ display:flex; gap:16px; }

.site-footer span,
.site-footer a,
.site-footer .footer-social{
  display:none;
}
.site-footer-brand{
  font-family:var(--font-mono);
  letter-spacing:.1em;
  color:var(--color-ink);
  font-size:var(--text-base);
}

/* ==========================================================================
   Utility
   ========================================================================== */
.visually-hidden-heading{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);
}

/* ==========================================================
   VAANK — Custom additions (вкарани от Additional CSS в темата)
   ========================================================== */

/* --- Лого на splash екрана: маха малкия артефакт долу-ляво --- */
.site-header--splash .site-branding img{
  -webkit-mask-image: radial-gradient(circle at bottom left, transparent 5px, black 6px);
  mask-image: radial-gradient(circle at bottom left, transparent 5px, black 6px);
}
.site-branding img{
  height: 28px;
  width: auto;
}

/* --- Скролбар: тънък, светло сив, прави ъгли, без стрелки --- */
html{
  scrollbar-width: thin;
  scrollbar-color: #cfcfcf transparent;
}
::-webkit-scrollbar{ width: 4px !important; height: 4px !important; }
::-webkit-scrollbar-track{ background: transparent !important; }
::-webkit-scrollbar-thumb{
  background-color: #cfcfcf !important;
  border-radius: 0 !important;
  border: none !important;
}
::-webkit-scrollbar-thumb:hover{ background-color: #b8b8b8 !important; }
::-webkit-scrollbar-button{ display: none !important; width: 0 !important; height: 0 !important; }
::-webkit-scrollbar-corner{ background: transparent !important; }

/* --- Заглавия в началото на страница --- */
.project-title-bar h1,
.page-content h1{ font-size: 1.2rem; }

/* --- Текстово съдържание в страниците --- */
.project-description,
.project-description p,
.page-content p,
.page-content .lede{ font-size: .85rem; }

/* --- Имената на проектите в плочките на грида --- */
.tile-caption .tile-title{
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* --- Location / Type / Status --- */
.meta-item{ font-size: .85rem; }

/* --- Меню --- */
.primary-nav a{ font-size: .75rem; letter-spacing: .05em; }

/* --- Футър --- */
.site-footer-brand{ font-size: .75rem; letter-spacing: .05em; }
.site-footer{ display: none; }
.post-type-archive-project .site-footer{ display: flex; }

/* ================================
   Contact страница — подредба, центриране, цветове
   ================================ */
/* Contact страница: общият контейнер (заглавие + custom текст) се центрира
   като цяло на страницата, а вътре всичко тръгва отляво спрямо най-дългия ред */
.page-content:has(.contact-block){
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.contact-block{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-block .contact-line,
.contact-block .contact-line a{ color: #15140f; }

/* ред: адрес → телефон → имейл → социални */
.contact-block .contact-line:nth-of-type(1){ order: 2; } /* телефон */
.contact-block .contact-line:nth-of-type(2){ order: 3; } /* имейл */
.contact-block .contact-line:nth-of-type(5){ order: 1; } /* адрес */
.social-row{ order: 4; justify-content: center; gap: 14px; margin-top: 6px; }

/* маха press и jobs имейлите изцяло */
.contact-block .contact-line:nth-of-type(3),
.contact-block .contact-line:nth-of-type(4){ display: none; }

/* маха текста "— general enquiries", оставя само имейл линка */
.contact-block .contact-line:nth-of-type(2){ font-size: 0; }
.contact-block .contact-line:nth-of-type(2) a{ font-size: .9rem; }

/* имейлът се чете, но не се кликва / не отваря Outlook */
.contact-block .contact-line:nth-of-type(2) a{
  pointer-events: none;
  cursor: default;
  border-bottom: none;
}

/* ================================
   Instagram / Facebook — тънки минималистични иконки
   ================================ */
.social-row a{
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-bottom: none;
}
.social-row a::before{
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-color: #15140f;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.social-row a:hover::before{ background-color: #6f6a5c; }

.social-row a[href*="instagram"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='0.8' fill='white' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='0.8' fill='white' stroke='none'/%3E%3C/svg%3E");
}
.social-row a[href*="facebook"]::before{
  width: 20px;
  height: 20px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='white' d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='white' d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
}

/* ================================
   Fade reveal — обща анимация
   ================================ */
@keyframes vaank-fade{
  to{ opacity: 1; }
}

/* --- Reveal при отваряне на проект --- */
.project-title-bar{
  opacity: 0;
  animation: vaank-fade .8s ease forwards;
}
.project-images-item{
  opacity: 0;
  animation: vaank-fade 1s ease forwards;
}
.project-images-item:nth-child(1){ animation-delay: 0s; }
.project-images-item:nth-child(2){ animation-delay: .12s; }
.project-images-item:nth-child(3){ animation-delay: .24s; }
.project-images-item:nth-child(4){ animation-delay: .36s; }
.project-images-item:nth-child(5){ animation-delay: .48s; }
.project-images-item:nth-child(6){ animation-delay: .6s; }
.project-images-item:nth-child(n+7){ animation-delay: .7s; }

/* --- Splash страница --- */
.splash-hero{
  opacity: 0;
  animation: vaank-fade 1.1s ease forwards;
}

/* --- Studio страница --- */
.page-content--studio .studio-layout-text{
  opacity: 0;
  animation: vaank-fade .9s ease forwards;
}
.page-content--studio .studio-layout-media{
  opacity: 0;
  animation: vaank-fade .9s ease forwards;
  animation-delay: .15s;
}

/* --- Грид със страницата с всички проекти --- */
.project-tile{
  opacity: 0;
  animation: vaank-fade .9s ease forwards;
}
.project-tile:nth-child(1){ animation-delay: 0s; }
.project-tile:nth-child(2){ animation-delay: .08s; }
.project-tile:nth-child(3){ animation-delay: .16s; }
.project-tile:nth-child(4){ animation-delay: .24s; }
.project-tile:nth-child(5){ animation-delay: .32s; }
.project-tile:nth-child(6){ animation-delay: .4s; }
.project-tile:nth-child(n+7){ animation-delay: .46s; }

/* --- Contact страница: заглавие + текстът въведен в страницата --- */
.page-content:has(.contact-block) h1,
.page-content:has(.contact-block) p:not(.contact-line),
.contact-custom p{
  opacity: 0;
  animation: vaank-fade .9s ease forwards;
}

/* --- Contact страница: адрес / телефон / имейл / социални --- */
.contact-block .contact-line,
.contact-block .social-row{
  opacity: 0;
  animation: vaank-fade .9s ease forwards;
}
.contact-block .contact-line:nth-of-type(5){ animation-delay: .15s; } /* адрес */
.contact-block .contact-line:nth-of-type(1){ animation-delay: .27s; } /* телефон */
.contact-block .contact-line:nth-of-type(2){ animation-delay: .39s; } /* имейл */
.contact-block .social-row{ animation-delay: .51s; }