/* ══════════════════════════════════════════════════════════
   KUOTA — demo motion
   Koncepti: scroll-i është ngjitje. Çdo lëvizje e faqes
   raporton lartësinë, nuk zbukuron.
   ══════════════════════════════════════════════════════════ */

:root{
  --haze:   #b9beb2;   /* mjegulla e luginës — sfondi në kuotën 0 */
  --alt:    #7e99a8;   /* blu i ftohtë i lartësisë — sfondi në majë */
  --ink:    #171a16;   /* e zezë ullinjtë */
  --lime:   #f3f1ea;   /* gur gëlqeror */
  --brass:  #a8813a;   /* bronzi i instrumentit */
  --brass-ink:#6b5019; /* i njëjti bronz, i lexueshëm mbi dritë */

  --rail: 88px;
  --pad:  clamp(20px, 5vw, 72px);

  --disp: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--haze); color:var(--ink);
  font-family:var(--serif); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }

/* qielli që ndërron ngjyrë me kuotën */
.sky{ position:fixed; inset:0; z-index:-1; background:var(--haze); }

/* ── tipografia bazë ─────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass-ink); margin:0 0 1.6rem;
}
.eyebrow span{ opacity:.5; padding:0 .35em; }

/* ── navigimi ────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:var(--rail); right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  color:var(--ink); transition:color .45s ease; will-change:transform;
}
.nav__mark{
  font-family:var(--disp); font-weight:800; font-size:15px;
  letter-spacing:.18em; text-decoration:none;
  font-variation-settings:"wdth" 100;
}
.nav__links{ display:flex; gap:28px; }
.nav__links a{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; padding-bottom:3px;
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.nav__links a:hover, .nav__links a:focus-visible{ border-bottom-color:var(--brass); }

/* ══ ALTIMETRI — elementi nënshkrues ══════════════════════ */
.alt{
  position:fixed; top:0; left:0; bottom:0; width:var(--rail); z-index:45;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  pointer-events:none; color:var(--ink); transition:color .45s ease;
}
.alt__rail{
  position:absolute; inset:0; overflow:hidden;
  --win: linear-gradient(180deg,
      transparent 0, #000 14%,
      #000 calc(50% + 5px), transparent calc(50% + 9px),
      transparent calc(50% + 68px), #000 calc(50% + 72px),
      #000 86%, transparent 100%);
  -webkit-mask-image:var(--win); mask-image:var(--win);
}
/* boshti i vizores */
.alt__rail::before{
  content:""; position:absolute; right:12px; top:0; bottom:0;
  width:1px; background:currentColor; opacity:.16;
}
/* vija e indeksit: gjithmonë në mes të ekranit */
.alt__index{
  position:absolute; top:50%; left:0; width:100%; height:0;
  border-top:1px solid var(--brass);
}
.alt__index::after{
  content:""; position:absolute; right:12px; top:-3px;
  width:6px; height:6px; background:var(--brass); transform:rotate(45deg);
}
.alt__strip{
  position:absolute; left:0; bottom:50%; width:100%;
  will-change:transform;
}
.alt__tick{
  position:absolute; right:12px; height:1px; background:currentColor; opacity:.28;
}
.alt__tick--minor{ width:9px; }
.alt__tick--major{ width:22px; opacity:.5; }
.alt__tick span{
  position:absolute; right:26px; top:-6px;
  font-family:var(--mono); font-size:8px; letter-spacing:.08em;
  opacity:.75;
}
.alt__read{
  position:absolute; top:calc(50% + 16px); left:0; width:100%;
  text-align:center; font-family:var(--mono);
}
.alt__num{
  display:block; font-size:21px; font-weight:600;
  color:var(--brass-ink); transition:color .45s ease; font-variant-numeric:tabular-nums;
}
.alt__unit{
  display:block; font-size:7.5px; letter-spacing:.16em;
  text-transform:uppercase; opacity:.6; margin-top:4px;
}

/* ── shtrati i përmbajtjes ──────────────────────────────── */
main{ margin-left:var(--rail); }
.foot{ margin-left:var(--rail); }

/* ══ HERO ═════════════════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh;
  display:grid; grid-template-rows:1fr auto;
  margin-left:calc(var(--rail) * -1);
  padding:0 var(--pad) 26px calc(var(--pad) + var(--rail));
}
.hero__frame{
  position:absolute; inset:0; overflow:hidden; z-index:0;
}
.hero__img{
  width:100%; height:118%; object-fit:cover; object-position:50% 62%;
  will-change:transform;
}
/* gradimi: fotoja turistike bëhet e njëjta paletë me faqen */
.hero__grade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(23,26,22,.34) 0%, rgba(23,26,22,.06) 16%,
                            rgba(23,26,22,0) 34%, rgba(23,26,22,.30) 58%,
                            rgba(23,26,22,.68) 84%, rgba(23,26,22,.80) 100%),
    linear-gradient(90deg, rgba(23,26,22,.42), rgba(23,26,22,0) 58%);
}
.hero__type{
  position:relative; z-index:2; align-self:end;
  max-width:min(920px, 78vw); padding-bottom:clamp(24px,6vh,64px);
}
.hero__h{
  font-family:var(--disp); font-weight:500;
  font-variation-settings:"wdth" 88, "opsz" 96;
  font-size:clamp(46px, 9.2vw, 132px);
  line-height:.93; letter-spacing:-.035em;
  margin:0 0 1.4rem; color:var(--lime);
  text-wrap:balance;
}
.hero__sub{
  max-width:40ch; margin:0; color:var(--lime);
  font-size:clamp(15px,1.35vw,19px); line-height:1.6; opacity:.9;
}
.hero .eyebrow{ color:var(--lime); opacity:.72; }
.hero__foot{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid rgba(243,241,234,.28); padding-top:12px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lime);
}
.hero__hint{ opacity:.65; }
.hero__from{ color:var(--brass-l, #d6b268); }

/* elementet që hyjnë me maskë rreshtash (SplitText) */
.line-mask{ overflow:hidden; display:block; }

/* ══ MANIFEST ═════════════════════════════════════════════ */
.manifest{
  padding:clamp(80px,14vh,180px) var(--pad) clamp(70px,11vh,150px);
  max-width:1180px;
}
.manifest__lead{
  font-family:var(--disp); font-weight:400;
  font-variation-settings:"wdth" 92, "opsz" 72;
  font-size:clamp(27px,4.1vw,60px); line-height:1.06;
  letter-spacing:-.028em; margin:0 0 clamp(38px,6vh,78px);
  max-width:19ch;
}
.manifest__grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);
  gap:clamp(28px,5vw,80px); align-items:start;
}
.manifest__body{
  margin:0; font-size:clamp(16px,1.5vw,20px); line-height:1.68; max-width:52ch;
}
.manifest__data{ margin:0; }
.manifest__data div{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; padding:11px 0; border-top:1px solid rgba(23,26,22,.2);
}
.manifest__data div:last-child{ border-bottom:1px solid rgba(23,26,22,.2); }
.manifest__data dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; opacity:.62;
}
.manifest__data dd{
  margin:0; font-family:var(--mono); font-size:14px; font-weight:600;
  color:var(--brass-ink); font-variant-numeric:tabular-nums;
}

/* ══ PANORAMA E FIKSUAR ═══════════════════════════════════ */
.pan{ position:relative; }
.pan__stage{
  height:100svh; display:flex; flex-direction:column; justify-content:center;
  gap:16px; padding:0 0 0 var(--pad);
}
.pan__label{
  margin:0; font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass-ink);
}
.pan__viewport{
  position:relative; overflow:hidden;
  height:min(58vh, 520px);
  border-top:1px solid rgba(23,26,22,.25);
  border-bottom:1px solid rgba(23,26,22,.25);
}
.pan__img{
  height:100%; width:auto; max-width:none; will-change:transform;
}
.pan__pin{
  position:absolute; bottom:18px; left:var(--x); z-index:2;
  transform:translateX(-50%);
  font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lime);
  background:rgba(23,26,22,.72); padding:6px 10px;
  white-space:nowrap; opacity:0;
}
.pan__pin::before{
  content:""; position:absolute; left:50%; top:-14px;
  width:1px; height:14px; background:var(--brass-l,#d6b268);
}
.pan__scale{
  display:flex; align-items:center; gap:14px; padding-right:var(--pad);
  font-family:var(--mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; opacity:.55;
}
.pan__scale i{ flex:1; height:1px; background:rgba(23,26,22,.3); }

/* ══ PRONAT ═══════════════════════════════════════════════ */
.props{
  padding:clamp(90px,15vh,190px) var(--pad) clamp(40px,6vh,80px);
  display:grid; gap:clamp(34px,6vh,86px);
}
.props__h{
  margin:0; font-family:var(--disp); font-weight:500;
  font-variation-settings:"wdth" 84, "opsz" 96;
  font-size:clamp(38px,7vw,104px); line-height:.95; letter-spacing:-.04em;
}
.card{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  background:var(--lime);
  box-shadow:0 24px 60px -34px rgba(23,26,22,.55);
}
.card__media{ overflow:hidden; }
.card__media img{
  width:100%; height:100%; min-height:300px; object-fit:cover;
  will-change:transform; transition:transform .9s cubic-bezier(.16,.84,.3,1);
}
.card:hover .card__media img{ transform:scale(1.045); }
.card__meta{
  padding:clamp(26px,3.4vw,54px);
  display:flex; flex-direction:column; align-items:flex-start;
}
.card__elev{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em;
  color:var(--lime); background:var(--brass-ink); padding:5px 9px;
  font-variant-numeric:tabular-nums;
}
.card__name{
  margin:18px 0 10px; font-family:var(--disp); font-weight:500;
  font-variation-settings:"wdth" 96, "opsz" 48;
  font-size:clamp(25px,2.9vw,42px); line-height:1.02; letter-spacing:-.028em;
}
.card__desc{ margin:0 0 auto; max-width:34ch; font-size:16px; line-height:1.62; opacity:.82; }
.card__specs{ margin:30px 0 0; width:100%; }
.card__specs div{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:9px 0; border-top:1px solid rgba(23,26,22,.16);
}
.card__specs dt{
  font-family:var(--mono); font-size:9px; letter-spacing:.13em;
  text-transform:uppercase; opacity:.58;
}
.card__specs dd{
  margin:0; font-family:var(--mono); font-size:13px; font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* ══ FUND ═════════════════════════════════════════════════ */
.end{
  padding:clamp(56px,9vh,120px) var(--pad) clamp(50px,8vh,110px);
  display:flex; flex-direction:column; align-items:flex-start; gap:clamp(26px,4vh,50px);
}
.end__h{
  margin:0; font-family:var(--disp); font-weight:600;
  font-variation-settings:"wdth" 86, "opsz" 96;
  font-size:clamp(58px,14.5vw,224px); line-height:.9; letter-spacing:-.012em;
  color:var(--lime);
}
.end__cta{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none;
  color:var(--ink); background:var(--lime); padding:16px 26px;
  transition:background .3s, color .3s;
}
.end__cta:hover, .end__cta:focus-visible{ background:var(--brass-ink); color:var(--lime); }

/* ══ FUNDI I FAQES ════════════════════════════════════════ */
.foot{
  padding:clamp(34px,5vh,60px) var(--pad) clamp(40px,6vh,72px);
  border-top:1px solid rgba(243,241,234,.3);
  display:grid; gap:14px; max-width:1180px;
}
.foot__note, .foot__credits{
  margin:0; font-family:var(--mono); font-size:9.5px; line-height:1.9;
  letter-spacing:.05em; color:var(--lime); opacity:.95;
}
.foot__credits{ opacity:.72; }
.foot em{ font-style:normal; opacity:.85; }


/* ── mbi hero-n e errët: instrumentet bëhen gëlqerorë ───── */
.is-dark .nav, .is-dark .alt{ color:var(--lime); }
.is-dark .alt__tick{ opacity:.42; }
.is-dark .alt__tick--major{ opacity:.68; }
.is-dark .alt__rail::before{ opacity:.3; }
.is-dark .alt__num{ color:var(--brass-l, #d6b268); }
.is-dark .alt__index{ border-top-color:var(--brass-l, #d6b268); }
.is-dark .alt__index::after{ background:var(--brass-l, #d6b268); }
.is-dark .nav__links a:hover, .is-dark .nav__links a:focus-visible{
  border-bottom-color:var(--brass-l, #d6b268);
}

/* ── fokusi i dukshëm ───────────────────────────────────── */
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* ══ EKRANE TË VEGJËL ═════════════════════════════════════ */
@media (max-width: 860px){
  :root{ --rail:0px; }
  main, .foot{ margin-left:0; }
  .nav{ left:0; padding:16px var(--pad); }
  .nav__links{ gap:16px; }

  /* altimetri bëhet një shirit i vogël sipër djathtas */
  .alt{ top:auto; bottom:16px; left:auto; right:16px; width:auto; height:auto;
        mix-blend-mode:normal; }
  .alt__rail{ display:none; }
  .alt__read{
    position:static; width:auto; text-align:right;
    background:rgba(23,26,22,.72); padding:6px 9px;
  }
  .alt__num{ font-size:14px; color:var(--brass-l,#d6b268); }
  .alt__unit{ color:var(--lime); opacity:.7; }

  .manifest__grid{ grid-template-columns:1fr; }
  .card{ grid-template-columns:1fr; }
  .card__media img{ min-height:230px; }
  .pan__viewport{ height:min(46vh, 340px); }
}

/* ══ LËVIZJE E REDUKTUAR ══════════════════════════════════
   Informacioni mbetet, dekori bie. */
@media (prefers-reduced-motion: reduce){
  .card__media img{ transition:none; }
  .pan__pin{ opacity:1; }
}