/* ==========================================================================
   Metro architektūra
   Šriftas: Inter Display (visur Bold)
   Grafika: tik horizontalios 1–2 pt linijos
   ========================================================================== */

/* --------------------------------------------------------------- 1. FONTS */

@font-face {
  font-family: 'Inter Display';
  src: url('../fonts/InterDisplay-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter Display';
  src: url('../fonts/InterDisplay-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------- 2. TOKENS */

:root {
  --ink:        #0b0b0b;
  --ink-60:     rgba(11, 11, 11, .56);
  --ink-38:     rgba(11, 11, 11, .36);
  --paper:      #ffffff;
  --bone:       #f3f2f0;
  --night:      #0b0b0b;

  --rule:        rgba(11, 11, 11, .16);
  --rule-col:    rgba(11, 11, 11, .42);   /* stulpelio žymė — matoma kaip eskize */
  --rule-strong: rgba(11, 11, 11, .38);
  --rule-inv:        rgba(255, 255, 255, .22);
  --rule-inv-strong: rgba(255, 255, 255, .45);

  --gut:  clamp(18px, 4vw, 60px);
  --cell-in:  clamp(12px, 1.1vw, 18px);   /* atitraukimas nuo stulpelio linijos */
  --cell-pad: clamp(16px, 2.2vw, 40px);   /* tarpas iki kito stulpelio */
  --ease: cubic-bezier(.16, .84, .34, 1);

  /* Visas tekstas Bold. Norint lengvesnės pagrindinės teksto dalies —
     pakeisk tik šią reikšmę į 500. */
  --w-body: 700;
}

/* --------------------------------------------------------------- 3. RESET */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
a  { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, dl, dd, figure { margin: 0; font-weight: 700; }

::selection { background: var(--ink); color: var(--paper); }

/* ----------------------------------------------------------- 4. TIPOGRAFIJA */

.label {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.label--inv { color: rgba(255, 255, 255, .6); }

/* Sekcijų užrašai — Studija / Darbai / Komanda / Kontaktai.
   Visi vienodi: pilki, mažosiomis, vieno dydžio.                          */
.sec-label {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.03em;
  text-transform: none;
  color: var(--ink-60);
}
.section--night .sec-label { color: rgba(255, 255, 255, .5); }

.lead {
  font-weight: 700;
  font-size: clamp(1.28rem, 2.35vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: pretty;
}

.body-copy {
  font-weight: var(--w-body);
  font-size: 15.5px;
  line-height: 1.36;
  letter-spacing: -.014em;
  color: var(--ink-60);
}
.body-copy p + p { margin-top: 1.25em; }

.num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- 5. LAYOUT */

.shell { position: relative; padding-inline: var(--gut); }
.shell--wide { padding-inline: 0; }

/* ---- keturių stulpelių gridas -------------------------------------------
   Stulpeliai — tikslūs turinio pločio ketvirčiai, be tarpo tarp jų.
   Tarpą sudaro pačių langelių vidinis padding, todėl stulpelio linija
   visada krenta tiksliai ant ketvirčio ribos.                             */
.g4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 0;
}

/* Vienodas atitraukimas nuo stulpelio pradžios — tas pats visam puslapiui:
   tekstas ir nuotraukos visada prasideda per --cell-in nuo stulpelio ribos. */
.g4 > * {
  padding-left: var(--cell-in);
  padding-right: var(--cell-pad);
}

/* stulpelio pradžią žymi vertikali 1 pt linija (tik langelio aukštyje) */
.g4 .ruled { border-left: 1px solid var(--rule-col); }
.section--night .g4 .ruled { border-left-color: var(--rule-inv-strong); }

@media (max-width: 860px) {
  .g4 { grid-template-columns: 1fr; }
  .g4 > * { padding-right: 0; grid-column: 1 !important; }
}

.section {
  position: relative;
  scroll-margin-top: 84px;
  --col4: calc((100% - 2 * var(--gut)) / 4);
}

/* Sekcijos aukščio stulpelio linija. Dvi gretimos sekcijos su ta pačia
   data-col reikšme sudaro vientisą, nepertraukiamą brūkšnį.              */
.v-rule {
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  z-index: 1;
  border-left: 1px solid var(--rule-inv-strong);
  pointer-events: none;
}
.v-rule[data-col="2"] { left: calc(var(--gut) + var(--col4)); }
.v-rule[data-col="3"] { left: calc(var(--gut) + var(--col4) * 2); }
.v-rule[data-col="4"] { left: calc(var(--gut) + var(--col4) * 3); }
@media (max-width: 860px) { .v-rule { display: none; } }
.section--paper { background: var(--paper); }
.section--bone  { background: var(--bone); }
.section--night { background: var(--night); color: #fff; }

/* horizontalios linijos — vienintelis grafinis elementas */
.rule   { height: 0; border-top: 1px solid var(--rule); }
.rule-2 { height: 0; border-top: 2px solid var(--rule-strong); }
.section--night .rule   { border-top-color: var(--rule-inv); }
.section--night .rule-2 { border-top-color: var(--rule-inv-strong); }

.sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--rule-strong);
}
.sechead h2 { font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: -.03em; }
.sechead--inv { border-bottom-color: var(--rule-inv-strong); }

/* --------------------------------------------------------------- 6. HEADER */

.head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(16px, 2.2vw, 28px) var(--gut) clamp(24px, 3.2vw, 40px);
  color: var(--ink);
  transition: color .5s var(--ease), transform .55s var(--ease);
}
body.is-dark .head { color: #fff; }

/* slenkant pasislepia; grįžta, kai pelė priartėja prie viršaus */
body.head-hidden .head { transform: translateY(-108%); }

/* nematoma juosta viršuje — ją užvedus antraštė nusileidžia */
.head-sensor {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 96px;
  z-index: 59;
  pointer-events: none;
}

.head::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(100% + 18px);
  z-index: -1;
  opacity: 0;
  transition: opacity .4s var(--ease), background .5s var(--ease);
  background: linear-gradient(to bottom, var(--paper) 48%, rgba(255, 255, 255, 0));
}
body.is-scrolled .head::before { opacity: 1; }
body.is-bone .head::before { background: linear-gradient(to bottom, var(--bone) 48%, rgba(243, 242, 240, 0)); }
body.is-dark .head::before { background: linear-gradient(to bottom, var(--night) 48%, rgba(11, 11, 11, 0)); }

.head__logo { display: block; width: clamp(104px, 10vw, 146px); }
.head__logo img { width: 100%; height: auto; transition: filter .5s var(--ease); }
body.is-dark .head__logo img { filter: invert(1); }

.head__nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); padding-top: 4px; }
.head__nav a {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 3px;
}
.head__nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.head__nav a:hover::after,
.head__nav a[aria-current]::after { transform: scaleX(1); }

@media (max-width: 640px) { .head__nav a.is-hide-s { display: none; } }

/* ------------------------------------------------------------ 7. HERO / KINO */

.hero {
  position: relative;
  height: 100vh;      /* atsarginis variantas */
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: var(--night);
  touch-action: pan-y pinch-zoom;   /* horizontalų braukimą valdo skriptas */
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.15s var(--ease);
  pointer-events: none;
}
.hero__slide.is-on { opacity: 1; pointer-events: auto; }
.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 52%;
  transform: scale(1.045);
  transition: transform 7.5s linear;
}

/* Pirmoji nuotrauka „prisipildo" iš viršaus keturiomis vertikaliomis juostomis.
   Juostos yra uždanga VIRŠ nuotraukos, o ne pati nuotrauka — todėl kadras
   matomas net tada, kai animacijos neveikia ar skriptas neužsikrauna.      */
.hero__curtain {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  pointer-events: none;
}
.hero__curtain i {
  flex: 1;
  background: var(--night);
  /* pagrindinė būsena — pasitraukusi; animacija tik parodo kelią iki jos */
  clip-path: inset(100% 0 0 0);
  animation: curtain-down 1.15s var(--ease) both;
}
.hero__curtain i:nth-child(2) { animation-delay: .13s; }
.hero__curtain i:nth-child(3) { animation-delay: .26s; }
.hero__curtain i:nth-child(4) { animation-delay: .39s; }

@keyframes curtain-down {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(100% 0 0 0); }
}

/* Suderinamumas: jei naršyklė rodo įsimintą SENĄ index.html su .hero__band
   žymėjimu, nuotrauka vis tiek matoma — pirma juosta išsiplečia per visą
   ekraną, likusios paslepiamos. Be šios taisyklės senas HTML su nauju CSS
   duotų tuščią pirmą ekraną.                                             */
.hero__band {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}
.hero__band ~ .hero__band { display: none; }
.hero__band img { width: 100%; height: 100%; max-width: none; left: 0; }

.hero__slide.is-on img { transform: scale(1); }
.hero__slide::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 46%, rgba(0,0,0,.62) 100%);
}

.hero__foot {
  position: absolute;
  left: var(--gut); right: var(--gut);
  bottom: clamp(20px, 3vw, 42px);
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
  pointer-events: none;
}
.hero__caption { pointer-events: auto; }
.hero__caption h1 {
  font-size: clamp(1.35rem, 2.95vw, 2.78rem);
  line-height: 1.04;
  letter-spacing: -.045em;
  /* em auga kartu su šriftu, todėl ilgiausias pavadinimas visada
     lūžta į dvi eilutes, o trumpesni telpa į vieną */
  max-width: 12em;
}
.hero__caption:hover h1 { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }

/* skaitikliai — horizontalios linijos.
   Matoma tik 2 px linija, bet kiekvienas mygtukas yra aukštas nematomas
   paspaudimo laukas (--hit), o pusė tarpo tarp linijų (--pad) įeina į jį,
   tad juosta be negyvų zonų. Neigiami marginai palieka išdėstymą tokį
   patį, kaip buvo su plona linija.                                        */
.hero__dots {
  --hit: 30px; --line: 2px; --pad: 5px; --w: 34px;
  display: flex; align-items: center; pointer-events: auto; flex: none;
  margin: calc((var(--line) - var(--hit)) / 2) calc(var(--pad) * -1);
}
.hero__dot {
  width: calc(var(--w) + var(--pad) * 2); height: var(--hit);
  position: relative;
  cursor: pointer;
  padding: 0;
  border: 0;
  background: none;
  -webkit-tap-highlight-color: transparent;
}
.hero__dot::before,
.hero__dot::after {
  content: '';
  position: absolute;
  left: var(--pad); right: var(--pad);
  top: calc((var(--hit) - var(--line)) / 2);
  height: var(--line);
}
.hero__dot::before { background: rgba(255,255,255,.3); transition: background .2s; }
.hero__dot:hover::before { background: rgba(255,255,255,.55); }
.hero__dot::after {
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}
.hero__dot.is-on::after { animation: fill var(--dur, 5.5s) linear forwards; }
.hero__dot.is-done::after { transform: scaleX(1); }
@keyframes fill { to { transform: scaleX(1); } }

@media (max-width: 720px) {
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero__dots { --w: 26px; }
}

/* --------------------------------------------------------------- 8. STUDIJA */

/* Studija — turinys 3 ir 4 stulpelyje, eilučių tarpo nėra,
   kad stulpelių linijos susijungtų į vientisą brūkšnį.                    */
.intro { padding-block: clamp(104px, 14.5vh, 200px) clamp(92px, 12.5vh, 172px); }

.intro__grid { row-gap: 0; }

.intro__kicker { grid-column: 3; padding-bottom: clamp(40px, 6vh, 88px); }
.intro__lead   { grid-column: 3 / 5; padding-bottom: clamp(48px, 8vh, 112px); }
.intro__p1     { grid-column: 3; }
.intro__p2     { grid-column: 4; padding-top: clamp(46px, 6.5vw, 96px); }

/* Vientisas stulpelio brūkšnys — vienas elementas, ne kelių teksto blokų
   kraštai sudėti vienas ant kito (tai anksčiau darė matomą siūlę). Pradžioje
   nematomas (scaleY 0, viršus kaip atrama), pildosi scrolinant — žr. .rule-draw. */
.intro__rule {
  border-left: 1px solid var(--rule-col);
  pointer-events: none;
  transform-origin: top;
  transform: scaleY(0);
}

@media (max-width: 860px) {
  .intro__kicker, .intro__lead, .intro__p1, .intro__p2 { grid-row: auto !important; }
  .intro__kicker { padding-bottom: 28px; }
  .intro__lead   { padding-bottom: 34px; }
  .intro__p1     { padding-bottom: 26px; }
  .intro__p2     { padding-top: 0; }
  .intro__rule   { display: none; }
}

/* ------------------------------------------------------------- 9. GALERIJA */

.works { padding-block: clamp(56px, 8vh, 100px) clamp(70px, 10vh, 128px); }

/* be horizontalios linijos ir be projektų skaičiaus; dydį duoda .sec-label */
.works__head { grid-column: 1; }

/* Kaskada: du kadrai stulpelyje, kitas stulpelis viena eilute žemiau;
   pasiekus dešinį kraštą juosta grįžta atgal į kairę.
   Eilučių ir stulpelių padėtis įrašoma generuojant (grid-column / grid-row). */
.gal {
  margin-top: clamp(20px, 3vw, 38px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 0;
  row-gap: clamp(8px, 1vw, 16px);
}

.gal__cell {
  padding-left: clamp(12px, 1.1vw, 18px);
  padding-right: clamp(10px, .9vw, 14px);
}

/* pažymėtas projektas — 2 x 2 langeliai; kadras užpildo visą sritį */
/* Kvadratas pagal PLOTĮ (kaip ir įprastas kadras), ne height:100% pagal
   tėvinį langelį — pastarasis lūždavo, kai pažymėtas projektas atsiduria
   PIRMAS sąraše: tada jo eilutėse nelieka jokio kito kadro, kuris
   netiesiogiai apibrėžtų grid eilutės aukštį, ir 100% virsta beveik 0. */
.gal__cell--big .tile { aspect-ratio: 1 / 1; height: auto; }
.gal__cell--big .tile__name strong { font-size: clamp(1rem, 1.4vw, 1.45rem); }
.gal__cell--big .tile__name span { font-size: clamp(1rem, 1.4vw, 1.45rem); }

/* stulpelio linija greta kadrų grupės — gali driektis per kelias eilutes,
   todėl piešiasi scrolinant (žr. .rule-draw site.js), ne fiksuotos
   trukmės perėjimu: ilgas brūkšnys taip pildosi proporcingai savo ilgiui. */
.gal__rule {
  border-left: 1px solid var(--rule-col);
  pointer-events: none;
  z-index: 0;
  transform-origin: top;
  transform: scaleY(0);
}

@media (max-width: 860px) {
  .gal { grid-template-columns: repeat(2, 1fr); column-gap: 8px; row-gap: 8px; }
  .gal__cell { grid-column: auto !important; grid-row: auto !important; padding: 0; }
  .gal__rule { display: none; }
}

.tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bone);
}
/* dėklas su atsarga — jis slenka paralaksui, o nuotrauka jame priartėja */
.tile__media {
  position: absolute;
  inset: -18px 0;
  display: block;
}
.tile__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.03);
  transition: transform .85s var(--ease), filter .55s var(--ease);
}
.tile:hover .tile__media img, .tile:focus-visible .tile__media img {
  transform: scale(1.045);
  filter: grayscale(0) contrast(1);
}

/* grūdas */
.tile::before {
  content: '';
  position: absolute;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: .4;
  mix-blend-mode: overlay;
  transition: opacity .55s var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.tile:hover::before, .tile:focus-visible::before { opacity: .12; }

/* tamsėjimas po tekstu */
.tile::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 34%, rgba(0,0,0,0) 62%);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.tile:hover::after, .tile:focus-visible::after { opacity: 1; }

/* pavadinimas — kairiajame apatiniame kampe */
.tile__name {
  position: absolute;
  left: 14px; right: 14px; bottom: 13px;
  z-index: 2;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
  font-size: clamp(.82rem, 1.05vw, 1rem);
  line-height: 1.18;
  letter-spacing: -.028em;
}
.tile:hover .tile__name, .tile:focus-visible .tile__name { opacity: 1; transform: none; }
.tile__name strong { display: block; }
.tile__name span { display: block; color: rgba(255, 255, 255, .5); }

@media (hover: none) {
  .tile__media img { filter: none; }
  .tile::before { opacity: .12; }
  .tile::after { opacity: 1; }
  .tile__name { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- 10. KOMANDA */

/* linijos prasideda ties užrašu ir baigiasi ties žemiausiu portretu */
#komanda { --rule-top: clamp(70px, 10vh, 140px); --rule-bottom: clamp(70px, 10vh, 140px); }
#komanda .v-rule { top: var(--rule-top); bottom: var(--rule-bottom); }

/* Šachmatinis išdėstymas: nariai paskirstomi į 4 kolonas ciklo tvarka
   (žr. build.py TEAM_COLUMNS) — pirmas kiekvienos kolonos narys nuleidžiamas
   savo dydžiu (procentai nuo stulpelio pločio, tad kompozicija nesikeičia
   keičiantis ekranui), kiekvienas kitas tos pačios kolonos narys tiesiog
   sukrenta žemiau su vienodu tarpu. Kolonos aukštis nepriklauso nuo kitų —
   pridėjus narį, keičiasi tik jo kolona, ne visa sekcija.                 */
.team {
  padding-block: var(--rule-top) var(--rule-bottom);
  row-gap: 0;
}

.t-label { grid-column: 1; grid-row: 1; align-self: start; }

.t-col {
  grid-row: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  padding-left: var(--cell-in);
  padding-right: clamp(10px, .9vw, 14px);
}

.t-media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #141414;
}
.t-media img {
  position: absolute;
  inset: -4% 0;
  width: 100%;
  height: 108%;
  object-fit: cover;
}
.t-card figcaption { margin-top: 14px; }
.t-card figcaption strong {
  display: block;
  font-size: clamp(.95rem, 1.25vw, 1.2rem);
  line-height: 1.16;
  letter-spacing: -.032em;
}
.t-card figcaption span {
  display: block;
  margin-top: 2px;
  font-size: clamp(.95rem, 1.25vw, 1.2rem);
  line-height: 1.16;
  letter-spacing: -.032em;
  color: rgba(255, 255, 255, .5);
}

@media (max-width: 860px) {
  .team { grid-template-columns: repeat(2, 1fr); column-gap: 10px; row-gap: 34px; }
  .team > * { grid-column: auto !important; padding-right: 0; padding-left: 0; }
  .t-label { grid-column: 1 / -1 !important; margin-bottom: 8px; }
  /* kolonų grupavimas ekrane nebereikalingas — visi nariai vienodai į 2 stulpelius */
  .t-col { display: contents; }
  .t-card { margin-top: 0 !important; }
}

/* ----------------------------------------------------- 11. PROJEKTO PUSLAPIS */

.pj-hero {
  position: relative;
  height: min(86svh, 860px);
  min-height: 420px;
  overflow: hidden;
  background: var(--night);
}
.pj-hero img { width: 100%; height: 100%; object-fit: cover; }
.pj-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 30%);
}

/* --- antraštė ir metrika: 3-4 stulpelis, eilučių tarpo nėra, kad
       stulpelio linija liktų vientisa                                     --- */
.pj-top { padding-block: clamp(52px, 7vw, 104px) clamp(40px, 5.5vw, 84px); row-gap: 0; }

.pj-meta {
  grid-column: 3;
  grid-row: 1;
  padding-bottom: clamp(18px, 2.4vw, 30px);
  font-size: clamp(12px, 1vw, 13.5px);
  letter-spacing: -.015em;
  text-transform: none;
  color: var(--ink-38);
}

.pj-name {
  grid-column: 3 / 5;
  grid-row: 2;
  font-size: clamp(1.7rem, 3.1vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
  padding-bottom: clamp(38px, 5vw, 76px);
}

.pj-spec { grid-column: 3; grid-row: 3; }
.pj-spec__row + .pj-spec__row { margin-top: clamp(11px, 1.2vw, 16px); }
.pj-spec dt {
  font-size: clamp(12px, 1vw, 13.5px);
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink-38);
}
.pj-spec dd {
  margin-top: 1px;
  font-size: clamp(12px, 1vw, 13.5px);
  line-height: 1.32;
  letter-spacing: -.015em;
}

/* tik linija ties 4 stulpelio pradžia, metrikos aukštyje */
.pj-specedge { grid-column: 4; grid-row: 3; align-self: stretch; }

/* --- aprašymas kairėje, pirma nuotrauka dešinėje --------------------- */
.pj-body { padding-bottom: clamp(46px, 6vw, 92px); align-items: start; }
.pj-desc { grid-column: 1 / 3; max-width: 58ch; }

/* projekto tekstas — Medium storis, juoda spalva */
.pj-desc, .pj-note { font-weight: 500; color: var(--ink); }
.pj-lead { grid-column: 3 / 5; overflow: hidden; }
.pj-lead img { width: 100%; height: auto; }

/* --- nuotraukų stulpelis; pastaba kairėje tik prie to kadro, kuris ją turi
       (brūkšnys atsiranda kartu su pastaba)                            --- */
.pj-stack {
  padding-bottom: clamp(56px, 8vw, 112px);
  --shot-gap: clamp(10px, 1.4vw, 22px);
  row-gap: var(--shot-gap);
}
/* Tekstas lygiuojamas nuo nuotraukos viršaus; linija — tik teksto aukščio
   plius viena eilutė, ir stovi tarp teksto ir nuotraukos.                 */
.pj-note {
  grid-column: 1;
  align-self: start;
  text-align: right;
  padding-right: var(--cell-in);
  padding-bottom: 1.36em;       /* atsarginis variantas be lh vieneto */
  padding-bottom: 1lh;
  border-right: 1px solid var(--rule-col);
}
.pj-shot { grid-column: 2 / 5; }
.pj-shot img { width: 100%; height: auto; }

/* Dvi vertikalios nuotraukos greta — kiekviena per 2 pilnus stulpelius
   (ne per pusę vieno), fiksuotos proporcijos, kad abi vienoje eilutėje
   visada sueitų vienodo aukščio, nepriklausomai nuo originalo matmenų. */
.pj-shot--v { aspect-ratio: 4 / 5; }
.pj-shot--v img { width: 100%; height: 100%; object-fit: cover; }

/* Tarpas tarp poros — tiksliai tokio pat atstumo, kaip iki eilutės virš
   ir po jos (row-gap), padalinto per pusę ant kiekvieno vidinio krašto. */
.pj-shot--v-a { padding-right: calc(var(--shot-gap) / 2); }
.pj-shot--v-b { padding-left: calc(var(--shot-gap) / 2); }

@media (max-width: 860px) {
  .pj-meta, .pj-name, .pj-spec, .pj-desc, .pj-lead, .pj-note, .pj-shot {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .pj-shot.ruled { border-left: 0; padding-left: 0; }
  /* Susikrovus į vieną stulpelį, poros nuotraukos irgi turi būti tokio
     pat pločio, kaip visos kitos — vidurio tarpo padding'as nebeaktualus. */
  .pj-shot--v-a, .pj-shot--v-b { padding-left: var(--cell-in); padding-right: 0; }
  .pj-specedge { display: none; }
  .pj-name { padding-bottom: 26px; }
  .pj-spec { padding-bottom: 34px; }
  .pj-desc { padding-bottom: 26px; }
  .pj-note { text-align: left; padding-right: 0; padding-bottom: 22px; border-right: 0; }
}

/* --- perėjimas prie kito / ankstesnio projekto ----------------------------
   Rodyklė kairėje, rodyklė dešinėje, „Visi darbai" viduryje.            --- */
.pj-nav {
  --arrow-h: clamp(38px, 4.2vw, 62px);
  --arrow-w: calc(var(--arrow-h) / 4);
  --arrow-gap: clamp(12px, 1.6vw, 26px);
  padding-block: clamp(34px, 4.6vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 3vw, 56px);
  /* „Visi darbai" atsistoja ant tos pačios bazinės linijos kaip pavadinimai */
  align-items: end;
  align-items: last baseline;
}

/* Rodyklė iškelta iš teksto srauto, kad bazinę liniją nustatytų
   tik pats pavadinimas.                                                   */
.pj-nav__side { position: relative; display: block; min-width: 0; }
.pj-nav__prev { padding-left: calc(var(--arrow-w) + var(--arrow-gap)); }
.pj-nav__next { padding-right: calc(var(--arrow-w) + var(--arrow-gap)); text-align: right; }

.pj-nav__arrow {
  position: absolute;
  top: 50%;
  color: rgba(255, 255, 255, .6);
  transition: color .35s var(--ease), transform .45s var(--ease);
}
.pj-nav__prev .pj-nav__arrow { left: 0;  transform: translateY(-50%); }
.pj-nav__next .pj-nav__arrow { right: 0; transform: translateY(-50%); }
.pj-nav__arrow svg { height: var(--arrow-h); width: auto; display: block; }
.pj-nav__prev:hover .pj-nav__arrow { color: #fff; transform: translateY(-50%) translateX(-6px); }
.pj-nav__next:hover .pj-nav__arrow { color: #fff; transform: translateY(-50%) translateX(6px); }

.pj-nav__title {
  display: block;
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  line-height: 1.14;
  letter-spacing: -.032em;
  max-width: 16em;
}
.pj-nav__next .pj-nav__title { margin-left: auto; }
.pj-nav__side:hover .pj-nav__title { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

.pj-nav__all {
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  letter-spacing: -.026em;
  color: rgba(255, 255, 255, .5);
  transition: color .3s var(--ease);
  white-space: nowrap;
}
.pj-nav__all:hover { color: #fff; }

@media (max-width: 720px) {
  .pj-nav { grid-template-columns: auto auto; row-gap: 22px; }
  .pj-nav__all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .pj-nav__title { font-size: .95rem; max-width: 9em; }
  .pj-nav__arrow svg { height: 32px; }
}


/* ------------------------------------------------------------ 11. KONTAKTAI */

/* vidurinė linija prasideda ties „Kontaktai" užrašu (tiek pat, kiek .contact
   viršutinis padding) ir baigiasi ties poraštės eilute, kaip ir kitos */
/* -1px persidengimas su Komanda — kai kuriuose naršyklės rendereriuose
   dviejų vienodos spalvos sekcijų riba parodo plaukiojantį subpikselio
   plyšį (matosi kaip plona horizontali linija). Persidengimas jį paslepia. */
#kontaktai { --rule-top: clamp(108px, 15vh, 210px); --rule-bottom: clamp(26px, 3.4vw, 46px); margin-top: -1px; }
#kontaktai .v-rule { top: var(--rule-top); bottom: var(--rule-bottom); }

/* Kontaktai ir poraštė — vienas keturių stulpelių blokas.
   3 ir 4 stulpelio linijos nusileidžia iki pat apačios, kur kairėje stovi
   logotipas, o šalia jo — autorių teisių eilutė.                          */
.contact {
  padding-block: clamp(108px, 15vh, 210px) var(--rule-bottom);
  row-gap: 0;
}

/* prasideda ten, kur „info@…", ir nusileidžia iki poraštės eilutės.
   Piešiasi scrolinant (.rule-draw, site.js) — ne fiksuotos trukmės
   perėjimu, kad visada tiksliai atitiktų dabartinę scroll poziciją, o ne
   vytųsi paskui greta esantį tekstą, kurio savas .rise turi kitą trukmę. */
.c-rule {
  grid-column: 4;
  grid-row: 3;
  width: 0;
  padding: 0;
  justify-self: start;
  align-self: stretch;
  border-left: 1px solid var(--rule-inv-strong);
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: top;
}

.c-label { grid-column: 3; grid-row: 1; padding-bottom: clamp(48px, 7vw, 108px); }

/* kreipinys — 1–2 stulpelyje, lygiuotas į dešinę prie vidurinės linijos */
.c-claim {
  grid-column: 1 / 3;
  grid-row: 2;
  text-align: right;
  max-width: 15em;
  margin-left: auto;
  padding-right: var(--cell-in);
  font-size: clamp(1.3rem, 2.32vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: -.042em;
  padding-bottom: clamp(70px, 10vw, 168px);
}
.c-claim a { border-bottom: 2px solid rgba(255, 255, 255, .3); transition: border-color .35s var(--ease); }
.c-claim a:hover { border-bottom-color: #fff; }

.c-info {
  grid-column: 3;
  grid-row: 3;
  align-self: start;
  padding-bottom: clamp(80px, 11vw, 180px);
}
.c-info p { font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.34; letter-spacing: -.022em; color: rgba(255, 255, 255, .55); }
.c-info p + p { margin-top: 1.5em; }
.c-info a:hover { color: #fff; }

/* Apatinė juosta — logotipas ir autorių teisės lygiuojami pagal paskutinę
   teksto eilutę, ne pagal langelio kraštą.                                */
.c-logo, .c-copy, .c-social {
  grid-row: 3;
  align-self: end;              /* atsarginis variantas senesnėms naršyklėms */
  align-self: last baseline;
}

/* rekvizitai nuleisti žemiau kontaktų, bet virš poraštės eilutės */
.c-req {
  grid-column: 4;
  grid-row: 3;
  align-self: start;
  padding-top: clamp(120px, 14.5vw, 216px);
  padding-bottom: clamp(96px, 12vw, 180px);
}
.c-req p { font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.34; letter-spacing: -.022em; color: rgba(255, 255, 255, .55); }

.c-logo { grid-column: 1; }

/* socialiniai tinklai — 4 stulpelio apačioje, ant tos pačios apatinės linijos */
.c-social {
  grid-column: 3;
  display: flex;
  gap: clamp(14px, 1.5vw, 22px);
  padding-bottom: 3px;
}
.c-social a { display: block; color: rgba(255, 255, 255, .5); transition: color .3s var(--ease); }
.c-social a:hover { color: #fff; }
.c-social svg { width: clamp(18px, 1.5vw, 22px); height: auto; display: block; }
.c-logo img { width: clamp(132px, 13.5vw, 205px); height: auto; }

.c-copy {
  grid-column: 2;
  padding-right: 0;                       /* kad tilptų į vieną eilutę */
  font-size: clamp(10.2px, .8vw, 11.5px);
  line-height: 1.4;
  letter-spacing: -.005em;
  color: rgba(255, 255, 255, .42);
}

@media (max-width: 860px) {
  .c-claim { text-align: left; max-width: none; margin-left: 0; }
  .c-rule { display: none; }
  .c-label, .c-claim, .c-info, .c-req, .c-logo, .c-copy, .c-social { grid-row: auto !important; align-self: start; }
  .c-social { margin: 6px 0 22px; }
  .c-label { padding-bottom: 26px; }
  .c-claim { padding-bottom: 44px; }
  .c-info  { padding-bottom: 34px; }
  .c-req   { padding-top: 0; padding-bottom: 56px; }
  .c-logo  { width: 150px; margin-bottom: 14px; }
}

/* ------------------------------------------------------------ 12. ANIMACIJA */

/* Visos vertikalios linijos (.v-rule, .gal__rule, .c-rule, .intro__rule)
   piešiasi scrolinant (žr. .rule-draw site.js) — nė viena nebenaudoja
   fiksuotos trukmės perėjimo. Taip linija visada tiksliai sutampa su
   dabartine scroll pozicija, o ne vejasi greta esantį tekstą, kurio .rise
   turi savo, nesusietą su šia, trukmę — dėl to anksčiau atsirasdavo matomas
   nesutapimas. */
.v-rule {
  transform: scaleY(0);
  transform-origin: top;
}

/* labai lengvas paralaksas — poslinkį kiekvienam kadrui skaičiuoja site.js */
[data-par] { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }

.rise {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.45s var(--ease), transform 1.45s var(--ease);
}
.rise.is-in { opacity: 1; transform: none; }
.rise[data-d="1"] { transition-delay: .14s; }
.rise[data-d="2"] { transition-delay: .28s; }

.veil { position: relative; overflow: hidden; }
.veil::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--paper);
  transform-origin: bottom;
  transition: transform 1.75s var(--ease);
}
.section--bone .veil::after { background: var(--bone); }
.veil.is-in::after { transform: scaleY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__curtain { display: none; }
  .rise, .veil::after, .hero__slide img, .v-rule, .c-rule, .gal__rule, .intro__rule, [data-par] {
    transition: none !important; transform: none !important; opacity: 1 !important;
    clip-path: none !important;
  }
  .hero__dot.is-on::after { animation: none; transform: scaleX(1); }
}