/* ============================================================
   Lukas Dapkus — lukasdapkus.lt
   Koncepcija: "Techninis brėžinys → dirbtuvė"
   ============================================================ */

:root {
  --popierius: #F6F5F1;   /* base */
  --grafitas: #1C1B19;    /* text */
  --zarija:   #E2542A;    /* accent */
  --plienas:  #3E5C66;    /* secondary technical */
  --anglis:   #26211E;    /* dark sections */
  --linija:   #DAD6CD;    /* hairline */
  --linija-2: #E7E3DA;

  --maxw: 1240px;
  --pad: clamp(1.25rem, 5vw, 4rem);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  background: var(--popierius);
  color: var(--grafitas);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; color: var(--zarija); }
strong { font-weight: 600; }
::selection { background: var(--zarija); color: var(--popierius); }

/* ---------- Background layers (technical paper) ---------- */
.bg-grid {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background-image:
    linear-gradient(var(--linija) 1px, transparent 1px),
    linear-gradient(90deg, var(--linija) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.35;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 85%);
          mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 85%);
}
.bg-ruler {
  position: fixed; top: 0; left: 0; width: 100%; height: 22px; z-index: -2;
  pointer-events: none; opacity: 0.5;
  background-image: repeating-linear-gradient(90deg,
    var(--plienas) 0, var(--plienas) 1px, transparent 1px, transparent 16px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-grid { animation: gridDrift 90s linear infinite; }
@keyframes gridDrift { to { background-position: 64px 64px; } }

/* ---------- Ambient moving decorations ---------- */
.decor { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.decor > * { position: absolute; will-change: transform; }

/* Registration / crosshair marks */
.decor__reg {
  width: 44px; height: 44px; border: 1px solid var(--plienas);
  border-radius: 50%; opacity: 0.22;
}
.decor__reg::before, .decor__reg::after { content: ""; position: absolute; background: var(--plienas); }
.decor__reg::before { left: 50%; top: -9px; bottom: -9px; width: 1px; transform: translateX(-50%); }
.decor__reg::after { top: 50%; left: -9px; right: -9px; height: 1px; transform: translateY(-50%); }
.decor__reg--1 { top: 15%; left: 6%; animation: decorSpin 60s linear infinite; }
.decor__reg--2 { bottom: 12%; right: 7%; animation: decorSpin 84s linear infinite reverse; }

/* Square outlines */
.decor__sq { border: 1px solid var(--linija); opacity: 0.6; }
.decor__sq--1 { width: 90px; height: 90px; top: 20%; right: 11%; animation: decorSpin 55s linear infinite; }
.decor__sq--2 { width: 54px; height: 54px; bottom: 26%; left: 9%; animation: decorSpin 46s linear infinite reverse; }

/* Žarija plus marks */
.decor__plus { width: 13px; height: 13px; opacity: 0.55; }
.decor__plus::before, .decor__plus::after { content: ""; position: absolute; background: var(--zarija); }
.decor__plus::before { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.decor__plus::after { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.decor__plus--1 { top: 58%; left: 28%; animation: decorFloatB 9s ease-in-out infinite; }
.decor__plus--2 { top: 13%; left: 44%; animation: decorFloatA 12s ease-in-out infinite; }
.decor__plus--3 { bottom: 18%; right: 30%; animation: decorFloatB 11s ease-in-out infinite; }

/* Dimension lines */
.decor__dim {
  width: 130px; height: 10px; opacity: 0.22;
  border-left: 1px solid var(--plienas); border-right: 1px solid var(--plienas);
}
.decor__dim::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--plienas); }
.decor__dim--1 { top: 54%; right: 13%; animation: decorFloatA 15s ease-in-out infinite; }
.decor__dim--2 { bottom: 34%; left: 6%; animation: decorFloatB 18s ease-in-out infinite; }

/* Mono measurement labels */
.decor__tick {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--plienas); opacity: 0.28;
}
.decor__tick--1 { top: 40%; left: 4%; animation: decorFloatA 10s ease-in-out infinite; }
.decor__tick--2 { top: 72%; left: 13%; animation: decorFloatB 13s ease-in-out infinite; }
.decor__tick--3 { top: 30%; right: 5%; animation: decorFloatA 11s ease-in-out infinite; }
.decor__tick--4 { bottom: 22%; left: 47%; color: var(--zarija); opacity: 0.4; animation: decorFloatB 10s ease-in-out infinite; }
.decor__tick--5 { top: 84%; right: 16%; animation: decorFloatA 14s ease-in-out infinite; }

@keyframes decorSpin { to { transform: rotate(360deg); } }
@keyframes decorFloatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }
@keyframes decorFloatB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, 16px); } }

/* ---------- Shared ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plienas);
  display: flex; align-items: center; gap: 0.55em;
}
.eyebrow span { color: var(--zarija); }
.eyebrow__no { color: var(--zarija); font-weight: 500; }
.eyebrow--light { color: var(--linija); }
.eyebrow--light .eyebrow__no { color: var(--zarija); }

.section {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(4.5rem, 11vh, 9rem) var(--pad);
}
.section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-top: 1rem;
}

/* Layer separator motif (3D-print layers) */
.section + .section::before,
.section--work::before, .section--exp::before, .section--skills::before,
.section--do::before, .section--life::before {
  content: "";
  position: absolute; top: 0; left: var(--pad); right: var(--pad);
  height: 4px;
  background-image: repeating-linear-gradient(
    var(--linija), var(--linija) 1px, transparent 1px, transparent 4px);
  opacity: 0.7;
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 0.95em 1.5em;
  border: 1px solid var(--grafitas);
  display: inline-flex; align-items: center; gap: 0.5em;
  transition: transform .35s var(--ease), background .35s var(--ease),
              color .35s var(--ease), box-shadow .35s var(--ease);
  position: relative;
}
.btn--primary { background: var(--zarija); color: var(--popierius); border-color: var(--zarija); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--grafitas); }
.btn--ghost:hover { transform: translateY(-3px); background: var(--grafitas); color: var(--popierius); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--pad);
  background: color-mix(in srgb, var(--popierius) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), padding .4s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--linija); padding-top: .7rem; padding-bottom: .7rem; }
.nav__brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; }
.nav__mark {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border: 1.5px solid var(--grafitas); color: var(--grafitas);
  font-size: 0.8rem; letter-spacing: -0.03em;
}
.nav__name { font-size: 0.98rem; letter-spacing: -0.01em; }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__links a {
  font-family: var(--font-mono);
  font-size: 0.82rem; letter-spacing: 0.02em;
  position: relative; padding: 0.2rem 0;
}
.nav__links a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1.5px; background: var(--zarija);
  transition: width .3s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after,
.nav__links a.is-active::after { width: 100%; }
.nav__cta { border: 1px solid var(--grafitas); padding: 0.5em 1em !important; }
.nav__cta:hover { background: var(--zarija); color: var(--popierius); border-color: var(--zarija); }

.nav__burger { display: none; background: none; border: none; cursor: pointer; width: 34px; height: 34px; flex-direction: column; gap: 6px; justify-content: center; }
.nav__burger span { display: block; height: 2px; width: 24px; background: var(--grafitas); transition: transform .3s var(--ease), opacity .3s; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  padding: 7rem var(--pad) 3rem;
}
.hero__eyebrow { margin-bottom: 1.5rem; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > * , .hero__title em { display: inline-block; }
.hero__sub {
  max-width: 46ch;
  margin: 1.8rem 0 2.2rem;
  font-size: 1.125rem;
  color: color-mix(in srgb, var(--grafitas) 85%, transparent);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 3rem; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: clamp(1rem, 3vw, 2.6rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--linija);
}
.stat__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1;
  letter-spacing: -0.03em;
}
.stat__num--inf { color: var(--zarija); }
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.04em;
  color: var(--plienas); margin-top: 0.5rem; max-width: 14ch;
  text-transform: uppercase;
}

/* Hero visual */
.hero__visual { position: relative; aspect-ratio: 1 / 1; width: 100%; }
#hero-canvas { width: 100%; height: 100%; }
.annotations { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.anno__line { fill: none; stroke: var(--plienas); stroke-width: 1; stroke-dasharray: 1; }
.anno__dot { fill: var(--zarija); }
.anno-label {
  position: absolute; font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.06em;
  color: var(--plienas); text-transform: uppercase;
  opacity: 0; transition: opacity .6s var(--ease);
  white-space: nowrap;
}
.anno-label.is-on { opacity: 1; }
.anno-label--1 { top: 14%; right: -4%; }
.anno-label--2 { bottom: 14%; left: -2%; }
.anno-label--3 { top: 58%; right: -6%; color: var(--zarija); }
.hero__hint {
  position: absolute; bottom: -2.5rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em;
  color: var(--plienas); text-transform: uppercase;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,6px);} }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  border-top: 1px solid var(--linija);
  border-bottom: 1px solid var(--linija);
  overflow: hidden; padding: 1.1rem 0;
  background: color-mix(in srgb, var(--popierius) 60%, #fff);
}
.marquee__track {
  display: inline-flex; align-items: center; gap: 1.4rem;
  white-space: nowrap; will-change: transform;
  animation: scroll-x 38s linear infinite;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: -0.01em;
}
.marquee__track .dot { color: var(--zarija); }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ============================================================
   APIE
   ============================================================ */
.about__layout {
  display: grid; grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
}
.about__photo { margin: 0; position: sticky; top: 92px; }
.about__photo figcaption,
.life-shot figcaption {
  margin-top: 0.7rem; font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.04em; color: var(--plienas);
  text-transform: uppercase;
}
.about__body { display: grid; gap: 1.2rem; }
.about__body p { font-size: 1.08rem; color: color-mix(in srgb, var(--grafitas) 88%, transparent); }

/* Shared technical photo frame (corner ticks) */
.photo-frame {
  position: relative; border: 1px solid var(--linija);
  padding: 10px; background: #fff;
  box-shadow: 9px 9px 0 color-mix(in srgb, var(--plienas) 15%, transparent);
}
.photo-frame::before, .photo-frame::after {
  content: ""; position: absolute; width: 12px; height: 12px; z-index: 2;
  border: 1.5px solid var(--zarija);
}
.photo-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.photo-frame::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.photo-frame__media { position: relative; overflow: hidden; }
.photo-frame__media img { width: 100%; height: auto; display: block; }

/* Life photo gallery + moving fog */
.life-gallery {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}
.life-shot { margin: 0; }
.fog { position: absolute; top: 0; left: -25%; right: -25%; height: 62%; pointer-events: none; opacity: 0; }
.fog--1 {
  background:
    radial-gradient(60% 80% at 30% 18%, rgba(255,255,255,0.6), transparent 70%),
    radial-gradient(48% 70% at 72% 8%, rgba(255,255,255,0.5), transparent 72%);
  filter: blur(9px); animation: fogDrift1 17s ease-in-out infinite;
}
.fog--2 {
  background: radial-gradient(55% 75% at 58% 28%, rgba(246,245,241,0.55), transparent 72%);
  filter: blur(13px); animation: fogDrift2 25s ease-in-out infinite;
}
@keyframes fogDrift1 {
  0% { transform: translateX(-12%); opacity: 0.2; }
  50% { opacity: 0.75; }
  100% { transform: translateX(12%); opacity: 0.2; }
}
@keyframes fogDrift2 {
  0% { transform: translateX(10%); opacity: 0.15; }
  50% { opacity: 0.55; }
  100% { transform: translateX(-10%); opacity: 0.15; }
}

/* ============================================================
   KĄ VEIKIU
   ============================================================ */
.do-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linija); border: 1px solid var(--linija); }
.do-card {
  background: var(--popierius);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  position: relative; overflow: hidden;
  transition: background .4s var(--ease);
}
.do-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--zarija); transition: width .45s var(--ease);
}
.do-card:hover { background: #fff; }
.do-card:hover::after { width: 100%; }
.do-card__no { font-family: var(--font-mono); font-size: 0.8rem; color: var(--zarija); letter-spacing: 0.1em; }
.do-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin: 0.7rem 0 0.7rem; letter-spacing: -0.01em; }
.do-card p { color: color-mix(in srgb, var(--grafitas) 82%, transparent); font-size: 1rem; }

/* ============================================================
   PROJEKTAI
   ============================================================ */
.work-list { border-top: 1px solid var(--linija); }
.work {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.8rem, 3.5vw, 2.8rem) 0;
  border-bottom: 1px solid var(--linija);
  position: relative;
  transition: padding-left .4s var(--ease);
}
.work:hover { padding-left: 1.2rem; }
.work::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--zarija); transition: width .4s var(--ease);
}
.work:hover::before { width: 4px; }
.work__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.02em; line-height: 1.1; }
.work__tags { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--plienas); margin-top: 0.7rem; text-transform: uppercase; }
.work__desc { color: color-mix(in srgb, var(--grafitas) 86%, transparent); align-self: center; }
.work__index { position: absolute; top: clamp(1.8rem, 3.5vw, 2.8rem); right: 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--linija); }

/* ============================================================
   PATIRTIS (timeline)
   ============================================================ */
.timeline { list-style: none; position: relative; padding-left: 2rem; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px;
  background: var(--linija);
}
.timeline::after {
  content: ""; position: absolute; left: 5px; top: 6px; width: 2px;
  height: var(--tl-fill, 0%); background: var(--zarija);
  transition: height .1s linear;
}
.tl {
  position: relative;
  display: grid; grid-template-columns: 9rem 1fr; gap: 0.2rem 1.5rem;
  padding: 1.1rem 0; border-bottom: 1px dashed var(--linija);
}
.tl::before {
  content: ""; position: absolute; left: -2rem; top: 1.5rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--popierius); border: 2px solid var(--plienas);
  transform: translateX(0);
}
.tl__time { font-family: var(--font-mono); font-size: 0.82rem; color: var(--zarija); letter-spacing: 0.02em; }
.tl__role { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; grid-column: 2; }
.tl__place { grid-column: 2; color: var(--plienas); font-size: 0.95rem; }
.tl__brands {
  grid-column: 2; margin-top: 0.35rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--plienas) 80%, transparent);
}
@media (min-width: 720px) {
  .tl { grid-template-columns: 11rem 1fr auto; align-items: baseline; }
  .tl__role { grid-column: auto; }
  .tl__place { grid-column: auto; text-align: right; }
  .tl__brands { grid-column: 2 / -1; text-align: left; }
}

/* Education — enlarged card with logo */
.edu-card {
  margin-top: 2.5rem;
  display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.2rem);
  padding: clamp(1.4rem, 3vw, 2rem);
  background: #fff;
  border: 1px solid var(--linija);
  border-left: 4px solid var(--zarija);
  position: relative;
}
.edu-card__logo {
  flex: none; width: clamp(64px, 9vw, 92px); height: clamp(64px, 9vw, 92px);
  border: 1px solid var(--linija); background: #fff; overflow: hidden;
}
.edu-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.edu-card__tag {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--zarija); margin-bottom: 0.5rem;
}
.edu-card__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.85rem); line-height: 1.1;
  letter-spacing: -0.02em;
}
.edu-card__meta { color: var(--plienas); font-size: 1rem; margin-top: 0.45rem; }
@media (max-width: 560px) {
  .edu-card { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ============================================================
   ĮGŪDŽIAI
   ============================================================ */
.skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.5rem); }
.skill { border-top: 2px solid var(--grafitas); padding-top: 1rem; }
.skill h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin-bottom: 0.6rem; }
.skill p { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.7; color: var(--plienas); }

/* ============================================================
   KŪRYBA & GYVENIMAS
   ============================================================ */
.life__intro { font-size: 1.25rem; max-width: 40ch; margin-bottom: 2.5rem; color: color-mix(in srgb, var(--grafitas) 88%, transparent); }
.life__layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.life-list { list-style: none; display: grid; gap: 0; }

/* Framed photo (technical-drawing treatment) */
.life-photo { margin: 0; position: relative; }
.life-photo__frame {
  position: relative; border: 1px solid var(--linija);
  padding: 10px; background: #fff;
  box-shadow: 10px 10px 0 color-mix(in srgb, var(--plienas) 16%, transparent);
}
.life-photo__frame::before, .life-photo__frame::after {
  content: ""; position: absolute; width: 12px; height: 12px; z-index: 2;
  border: 1.5px solid var(--zarija);
}
.life-photo__frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.life-photo__frame::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.life-photo__frame img { width: 100%; height: auto; display: block; filter: saturate(1.02); }
.life-photo figcaption {
  margin-top: 0.7rem; font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.04em; color: var(--plienas);
  text-transform: uppercase;
}
.life-list li {
  padding: 1.2rem 0; border-bottom: 1px solid var(--linija);
  font-size: 1.08rem; padding-left: 2rem; position: relative;
}
.life-list li::before { content: "→"; position: absolute; left: 0; color: var(--zarija); font-family: var(--font-mono); }
.life-list li strong { font-family: var(--font-display); }

/* ============================================================
   KONTAKTAI
   ============================================================ */
.section--contact {
  max-width: none; background: var(--anglis); color: var(--popierius);
  margin-top: clamp(3rem, 6vw, 6rem);
}
.section--contact::before { display: none; }
.contact__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.contact__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 5.5vw, 4.5rem); line-height: 1.02; letter-spacing: -0.03em; margin: 1.2rem 0 1.2rem; }
.contact__lead { color: var(--linija); max-width: 44ch; font-size: 1.15rem; margin-bottom: 3rem; }
.contact__grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255,255,255,0.15); }
.contact__row {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.15);
  transition: padding-left .35s var(--ease), color .35s var(--ease);
}
.contact__row:nth-child(odd) { padding-right: 2rem; }
.contact__row:nth-child(even) { padding-left: 2rem; border-left: 1px solid rgba(255,255,255,0.15); }
.contact__row:hover { padding-left: 1rem; color: var(--zarija); }
.contact__row:nth-child(even):hover { padding-left: 3rem; }
.contact__k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--plienas); }
.contact__row:hover .contact__k { color: inherit; }
.contact__v { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 2.5vw, 1.7rem); letter-spacing: -0.01em; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--anglis); color: var(--linija);
  padding: 2.5rem var(--pad);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em;
}
.footer__sig { color: var(--zarija); }

/* ============================================================
   REVEAL (set initial; JS animates). If no JS/anim -> visible.
   ============================================================ */
/* Hidden ONLY when JS is active — no-JS users see full content. */
.js-ready .reveal {
  opacity: 0; transform: translateY(24px); will-change: opacity, transform;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js-ready .reveal.is-in { opacity: 1; transform: none; }
/* Motion is forced on per site-owner preference, so animations are NOT disabled
   under prefers-reduced-motion. JS still reveals content if scripts fail to load. */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 6rem; gap: 2.5rem; }
  .hero__visual { max-width: 420px; margin: 0 auto; order: 2; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; }
  .about__layout { grid-template-columns: 1fr; }
  .about__photo { position: static; max-width: 460px; }
  .do-grid { grid-template-columns: 1fr; }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1.6rem; padding: 2rem;
    background: var(--popierius); border-left: 1px solid var(--linija);
    transform: translateX(100%); transition: transform .45s var(--ease);
  }
  .nav.is-open .nav__links { transform: translateX(0); }
  .nav__links a { font-size: 1rem; }
  .nav__burger { display: flex; z-index: 101; }
  .work { grid-template-columns: 1fr; }
  .work__index { display: none; }
  .skills-grid { grid-template-columns: 1fr; }
  .life__layout { grid-template-columns: 1fr; }
  .life-photo { max-width: 420px; }
  .life-gallery { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__row:nth-child(even) { padding-left: 0; border-left: none; }
  .contact__row:nth-child(even):hover { padding-left: 1rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}