/* ==========================================================
   Arman Harutyunyan — ընդհանուր ոճ բոլոր էջերի համար
   Փոխում ես այստեղ → փոխվում է ամբողջ կայքում
   ========================================================== */
:root{
  --bg:    #FFFFFF;
  --ink:   #0A0A0A;
  --muted: #9A9A9A;
  --line:  #E8E8E8;
  --gut:   20px;

  /* Անվան նկարի չափը = մեծատառի բարձրություն։ Պատուհանը միշտ քառակուսի է։ */
  --chip:  .72em;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg); overflow-x:clip; }
body{
  font-family:'Helvetica Neue', Helvetica, Arial, 'Inter', sans-serif;
  color:var(--ink); -webkit-font-smoothing:antialiased;
  min-height:100svh; display:flex; flex-direction:column;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; }

.micro{ text-transform:uppercase; letter-spacing:.16em; font-size:.66rem; font-weight:500; }

/* ---------- ՎԵՐԵՎ ---------- */
.top{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px var(--gut); gap:16px;
}
.mark{
  width:38px; height:38px; flex-shrink:0;
  border:1.5px solid var(--ink); border-radius:50%;
  display:grid; place-items:center;
  font-size:.72rem; font-weight:700;
  transition:background .25s ease, color .25s ease;
}
.mark:hover{ background:var(--ink); color:#fff; }
.menu{ display:flex; gap:26px; font-size:.9rem; }
.menu a{ transition:opacity .2s ease; }
.menu a:hover{ opacity:.4; }
.menu a[aria-current="page"]{ opacity:.4; }

/* ---------- ԳԼԽԱՎՈՐ ԷՋԻ ԱՆՈՒՆԸ ---------- */
.middle{ flex:1; display:flex; align-items:center; justify-content:center; padding:0 var(--gut); }
.name .w{ white-space:nowrap; }
.name{
  display:block; width:100%; text-align:center;
  font-weight:700; letter-spacing:-.045em; line-height:1;
  font-size:12vw;                 /* fallback — JS-ը ճշգրտում է */
}
.chip{
  display:inline-block; vertical-align:baseline; position:relative;
  width:var(--chip); height:var(--chip);
  margin:0 .05em; overflow:hidden; background:#EFEFEF;
}
.chip img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .7s ease;
}
.chip img.on{ opacity:1; }

/* ---------- ԳԼԽԱՎՈՐԻ ՆԵՐՔԵՎԸ ---------- */
.bottom{
  display:grid; grid-template-columns:1fr; gap:14px;
  padding:24px var(--gut) 26px;
  font-size:.82rem; line-height:1.45;
}
.bottom .side{ color:var(--muted); }
.cat{ position:relative; white-space:nowrap; }
.cat::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.cat:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- ՆԵՐՔԻՆ ԷՋԵՐ ---------- */
.sheet{ flex:1; padding:40px var(--gut) 0; }
.title{
  font-weight:700; letter-spacing:-.045em; line-height:.95;
  font-size:clamp(3rem,13vw,10rem);
}
.title-row{
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:8px 20px; margin-bottom:32px;
}
.count{ color:var(--muted); }
.intro{ max-width:44ch; line-height:1.55; margin-bottom:48px; color:#333; }

/* ---------- ՏՈՂԵՐ (contact / about փաստեր) ---------- */
.rows{ border-top:1px solid var(--line); }
.row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:20px 0; border-bottom:1px solid var(--line);
  transition:padding-left .3s cubic-bezier(.22,1,.36,1);
}
a.row:hover{ padding-left:10px; }
.row .k{ color:var(--muted); font-size:.82rem; }
.row .v{ font-weight:500; letter-spacing:-.02em; font-size:clamp(1.1rem,3.4vw,1.7rem); }
.row .go{ color:var(--muted); }

/* ---------- ՏԵՔՍՏ (about) ---------- */
.prose{ max-width:56ch; margin-bottom:56px; }
.prose .lead{
  font-weight:700; letter-spacing:-.03em; line-height:1.1;
  font-size:clamp(1.5rem,4.6vw,2.3rem); margin-bottom:26px;
}
.prose p{ line-height:1.65; color:#333; margin-bottom:16px; }
.prose .sub{ font-size:.82rem; font-weight:500; color:var(--muted); margin:38px 0 16px;
  text-transform:uppercase; letter-spacing:.16em; }
.prose .rule{ color:var(--ink); font-weight:500; border-left:2px solid var(--ink); padding-left:16px; }

/* ---------- PORTFOLIO՝ երեք ուղղահայաց սյուն ---------- */
.pf{ flex:1; display:flex; flex-direction:column; padding:0 var(--gut); min-height:0; }
.bands{
  flex:1; min-height:0;
  display:grid; grid-template-columns:1fr; grid-auto-rows:1fr;
  gap:8px; padding-bottom:24px;
}
.band{
  position:relative; display:block; overflow:hidden;
  background:#EEE; min-height:0;
}
.band img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.1s cubic-bezier(.22,1,.36,1), filter .5s ease;
  filter:grayscale(.2);
}
.band:hover img{ transform:scale(1.06); filter:grayscale(0); }
.band::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.62) 100%);
}
.band .label{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:18px; color:#fff;
  display:flex; justify-content:space-between; align-items:flex-end; gap:10px;
}
.band .label h2{
  font-weight:700; letter-spacing:-.04em; line-height:.95;
  font-size:clamp(1.6rem,5vw,3.2rem);
}

/* ---------- ՆԿԱՐՆԵՐԻ ՑԱՆՑ ---------- */
.grid{ columns:1; column-gap:10px; padding-bottom:8px; }
.grid figure{ break-inside:avoid; margin:0 0 10px; }
.grid button{
  display:block; width:100%; padding:0; border:0; background:#F2F2F2;
  cursor:zoom-in; overflow:hidden;
}
.grid img{ width:100%; height:auto; transition:transform .8s cubic-bezier(.22,1,.36,1); }
.grid button:hover img{ transform:scale(1.03); }

/* ---------- LIGHTBOX ---------- */
.lb{
  position:fixed; inset:0; z-index:100; display:none;
  background:#FFFFFF;
  align-items:center; justify-content:center;
}
.lb.open{ display:flex; }
.lb img{
  width:auto; height:92svh; max-width:95vw;
  object-fit:contain;
}
@media (orientation:portrait){
  .lb img{ height:auto; width:95vw; max-height:88svh; }
}
.lb .x, .lb .prev, .lb .next{
  position:absolute; background:none; border:0; cursor:pointer;
  color:var(--ink); font-size:1.5rem; line-height:1; padding:14px;
}
.lb .x{ top:10px; right:12px; }
.lb .prev{ left:6px; top:50%; transform:translateY(-50%); }
.lb .next{ right:6px; top:50%; transform:translateY(-50%); }
.lb .n{ position:absolute; bottom:18px; left:0; right:0; text-align:center; color:var(--muted); }

/* ---------- FOOTER ---------- */
.foot{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:56px var(--gut) 26px; color:var(--muted); font-size:.82rem;
}

/* ==========================================================
   ԱԴԱՊՏԻՎ
   ========================================================== */
@media (max-width:639px){
  .name .w:first-child{ display:block; }
  .name{ line-height:1.06; }
}
@media (min-width:640px){
  :root{ --gut:32px; }
  .name{ display:inline-block; width:auto; white-space:nowrap; }
  .menu{ gap:44px; font-size:1rem; }
  .bottom{ grid-template-columns:1fr auto 1fr; align-items:end; }
  .bottom .left{ justify-self:start; }
  .bottom .note{ justify-self:center; text-align:center; }
  .bottom .right{ justify-self:end; text-align:right; }
  .grid{ columns:2; }
  .bands{ grid-template-columns:repeat(3,1fr); grid-auto-rows:auto; gap:10px; }
  .row .k{ min-width:200px; }
}
@media (min-width:1100px){
  :root{ --gut:40px; }
  .grid{ columns:3; }
}

/* ==========================================================
   ԱՆՑՈՒՄՆԵՐ
   ========================================================== */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vtOut .35s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root){ animation:vtIn .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes vtOut{ to{ opacity:0; } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(16px); } }

.fade{ opacity:0; animation:fadeIn .9s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
.d1{animation-delay:.08s} .d2{animation-delay:.18s} .d3{animation-delay:.28s}

@media (prefers-reduced-motion:reduce){
  .fade{ animation:none; opacity:1; }
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
  .grid button:hover img, .band:hover img{ transform:none; }
  .chip img{ transition:none; }
}