@charset "UTF-8";

/* ==========================================================================
   SV Asset Management, UAB — svam.lt
   Dizaino sistema v2

   Principai (perimti iš šiuolaikinės redakcinės web tipografijos):
   · viena šriftų šeima, išraiška kuriama svoriu ir pločiu, ne papildomais šriftais
   · beveik nespalvota paletė, vienas akcentas tik aktyvioms būsenoms
   · jokių šešėlių, jokių gradientų, jokių apvalintų kortelių
   · struktūrą laiko 1 px plaukinės linijos, ne rėmeliai ir dėžutės
   · didelė tipografija ir daug oro, bet turinys lieka patogaus dydžio
   ========================================================================== */

@layer reset, base, layout, components, utilities;

/* --------------------------------------------------------------------------
   Šriftai — savo serveryje, be išorinių CDN (GDPR)
   -------------------------------------------------------------------------- */

/* Archivo: kintamasis šriftas su svorio (100–900) ir pločio (62–125%) ašimis.
   Pločio ašis leidžia antraštes praplatinti, o etiketes suspausti – tai ir
   sukuria išraišką be papildomų šriftų šeimų. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Žymekliai
   -------------------------------------------------------------------------- */

@layer base {
  :root {
    /* 1 lygis */
    --black: #0a0a0a;
    --grey-90: #171717;
    --grey-70: #3d3d3d;
    --grey-50: #6b6b6b;
    --grey-30: #a8a8a8;
    --grey-15: #d4d4d4;
    --grey-08: #e8e8e8;
    --grey-04: #f4f4f4;
    --white: #fff;
    /* Akcentas – klasikinis burgundy. Uolos nuotraukos yra visiškai neutralios
       (sotis 0 %), todėl spalva pasirinkta pagal toną, ne pagal derinimą.
       Kontrastas 10,15:1 ant balto. Tamsiose sekcijose akcento spalvos
       nenaudojame – ten viskas balta (žr. .section--invert).
       Akcentas niekada nėra vienintelis nuorodos požymis: jį visada palydi
       rodyklė arba pabraukimas (WCAG 1.4.1). */
    --burgundy: #7a1f32;

    /* Įvesties laukų ir kontūrinių mygtukų rėmeliai. 5,33:1 ant balto ir
       3,72:1 ant juodo – abu virš 3:1, kurio reikalauja WCAG 1.4.11. */
    --c-field: var(--grey-50);

    /* 2 lygis */
    --c-bg: var(--white);
    --c-bg-alt: var(--grey-04);
    --c-fg: var(--black);
    --c-fg-soft: var(--grey-50);
    --c-fg-mute: var(--grey-50);
    --c-rule: var(--black);
    --c-rule-soft: var(--grey-15);
    --c-accent: var(--burgundy);

    /* Tipografija */
    --f: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Mastelis. Antraštės auga sparčiai, tekstas – vos vos. */
    --t-micro: 0.6875rem;
    --t-label: 0.75rem;
    --t-sm: 0.8125rem;
    --t-body: clamp(0.9375rem, 0.9rem + 0.16vw, 1.0625rem);
    --t-lead: clamp(1.0625rem, 0.95rem + 0.55vw, 1.4375rem);
    --t-h3: clamp(1.25rem, 1rem + 1.1vw, 2rem);
    --t-h2: clamp(2rem, 1.1rem + 4.1vw, 4.75rem);
    --t-display: clamp(2.5rem, 0.6rem + 8.4vw, 8.5rem);
    --t-numeral: clamp(1.75rem, 1.1rem + 2.7vw, 3.5rem);

    /* Eilučių aukštis. Etalone .82, bet lietuviškos nosinės (ą ę į ų) leidžiasi
       žemiau bazinės linijos ir prie tokio tankio kertasi su kita eilute.
       1.02 yra minimumas, kuriame „nekilnojamąjį“ nepersidengia su „akcijas“. */
    --lh-display: 1.02;
    --lh-h2: 1.04;

    --gutter: clamp(1.125rem, 0.4rem + 3vw, 3.5rem);
    --shell: 96rem;
    --section-y: clamp(4rem, 2rem + 8vw, 10rem);

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-io: cubic-bezier(0.87, 0, 0.13, 1);
    --d-xs: 0.1s;
    --d-sm: 0.2s;
    --d-md: 0.3s;
    --d-lg: 0.5s;
    --d-xl: 0.8s;

    color-scheme: light;
    accent-color: var(--burgundy);
    scroll-behavior: smooth;
    scroll-padding-block-start: 5rem;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      scroll-behavior: auto;
      --d-lg: 0.001s;
      --d-xl: 0.001s;
    }
  }

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

  body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-fg);
    font-family: var(--f);
    font-size: var(--t-body);
    font-weight: 450;
    line-height: 1.5;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3,
  h4 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: var(--lh-display);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--t-display);
    font-stretch: 112%;
  }

  h2 {
    font-size: var(--t-h2);
    line-height: var(--lh-h2);
    font-stretch: 108%;
  }

  h3 {
    font-size: var(--t-h3);
    letter-spacing: -0.02em;
    line-height: 1.05;
  }

  h4 {
    font-size: var(--t-lead);
    letter-spacing: -0.015em;
  }

  p {
    margin: 0;
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }

  img,
  picture,
  svg {
    display: block;
    max-width: 100%;
  }

  img {
    height: auto;
  }

  button {
    font: inherit;
    color: inherit;
    margin: 0;
  }

  :where(a, button, summary, input, select, [tabindex]):focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
  }

  ::selection {
    background: var(--black);
    color: var(--white);
  }
}

/* --------------------------------------------------------------------------
   Išdėstymas
   -------------------------------------------------------------------------- */

@layer layout {
  .shell {
    width: min(100% - var(--gutter) * 2, var(--shell));
    margin-inline: auto;
  }

  .section {
    padding-block: var(--section-y);
    scroll-margin-block-start: 4rem;
    position: relative;
  }

  .section + .section:not(.section--invert) {
    border-block-start: 1px solid var(--c-rule);
  }

  .section--invert {
    background: var(--black);
    color: var(--white);
    isolation: isolate;
    --c-bg: var(--black);
    --c-bg-alt: var(--grey-90);
    --c-fg: var(--white);
    --c-fg-soft: var(--grey-30);
    --c-fg-mute: var(--grey-30);
    --c-rule: var(--white);
    --c-rule-soft: var(--grey-70);
    /* Tamsiame fone akcento spalvos nėra – nuorodas ir žymes
       identifikuoja pabraukimas, rodyklė arba užpildytas kvadratas. */
    --c-accent: var(--white);
  }

  /* Uolos tekstūra tamsiose sekcijose – tik gylis, ne paveikslas.
     Šviesūs tonai suspausti failo lygmenyje (maksimumas 109), todėl net
     ryškiausiame tekstūros pikselyje fonas nešviesėja virš RGB(49,49,49):
     pagalbinis pilkas tekstas ten išlaiko 5,47:1, bronzinis akcentas 5,78:1.
     Be šio suspaudimo ryškiausios dėmės nukristų iki 2,2:1. */
  .section--invert::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("../img/bg/texture-dark.jpg");
    background-image: image-set(
      url("../img/bg/texture-dark.webp") type("image/webp"),
      url("../img/bg/texture-dark.jpg") type("image/jpeg")
    );
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.45;
    pointer-events: none;
  }

  @media (forced-colors: active), print {
    .section--invert::before {
      display: none;
    }
  }

  /* Sekcijos žymė: užpildytas kvadratas + tankus didžiųjų raidžių tekstas */
  .marker {
    display: flex;
    align-items: center;
    gap: 0.7em;
    margin: 0 0 clamp(1.75rem, 1rem + 2.4vw, 3.5rem);
    font-size: var(--t-label);
    font-weight: 700;
    font-stretch: 96%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .marker::before {
    content: "";
    inline-size: 0.72em;
    block-size: 0.72em;
    background: currentColor;
    flex: none;
  }

  .marker--accent {
    color: var(--c-accent);
  }

  .section__head {
    display: grid;
    gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
    margin-block-end: clamp(2.5rem, 1.4rem + 4vw, 6rem);
  }

  .section__head h2 {
    max-width: 18ch;
  }

  .lede {
    font-size: var(--t-lead);
    line-height: 1.32;
    font-weight: 500;
    letter-spacing: -0.015em;
    max-width: 44ch;
  }

  .note {
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--c-fg-soft);
    max-width: 58ch;
  }

  /* Plaukinė linija – pagrindinis struktūros elementas */
  .rule {
    border: 0;
    border-block-start: 1px solid var(--c-rule);
    margin: 0;
  }
}

@layer components {
  /* ------------------------------------------------------------------------
     Antraštė
     ------------------------------------------------------------------------ */

  .masthead {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: var(--white);
    border-block-end: 1px solid var(--black);
  }

  .masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-block-size: 3.75rem;
  }

  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    /* WCAG 2.5.8 – bent 24 px paspaudimo zona */
    min-block-size: 2.75rem;
    align-content: center;
    flex-wrap: wrap;
  }

  /* Masyvus tipografinis ženklas: tas pats Archivo kaip visoje svetainėje,
     tik maksimalus svoris ir praplatintas – vientisa sistema be svetimkūnio. */
  .wordmark__name {
    font-weight: 800;
    font-stretch: 116%;
    font-size: clamp(1.05rem, 0.9rem + 0.75vw, 1.45rem);
    letter-spacing: -0.045em;
    line-height: 1;
  }

  .wordmark__sub {
    font-size: var(--t-micro);
    font-weight: 700;
    font-stretch: 92%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-50);
  }

  @media (width < 34rem) {
    .wordmark__sub {
      display: none;
    }
  }

  .nav {
    display: none;
  }

  @media (width >= 64rem) {
    .nav {
      display: flex;
      align-items: center;
      gap: clamp(1rem, -0.5rem + 2.2vw, 2rem);
    }
  }

  .nav__link {
    position: relative;
    padding-block: 1.3rem;
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: color var(--d-md) var(--ease);
  }

  .nav__link::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 2px;
    background: var(--c-accent);
    scale: 0 1;
    transform-origin: left;
    transition: scale var(--d-md) var(--ease);
  }

  .nav__link:hover {
    color: var(--c-accent);
  }

  .nav__link:hover::after,
  .nav__link[aria-current="true"]::after {
    scale: 1 1;
  }

  .nav__link[aria-current="true"] {
    color: var(--c-accent);
  }

  /* Meniu mygtukas — juodas skritulys, kaip etalone */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-block-size: 2.75rem;
    padding-inline: 1.1rem;
    background: var(--black);
    color: var(--white);
    border: 0;
    border-radius: 999px;
    font-size: var(--t-label);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--d-md) var(--ease);
  }

  .nav-toggle:hover {
    background: var(--c-accent);
  }

  @media (width >= 64rem) {
    .nav-toggle {
      display: none;
    }
  }

  /* Siauruose ekranuose mygtukas lieka tik su ikona – kitaip logotipas
     nebetelpa į vieną eilutę ties 320–390 px. Prieinamas pavadinimas
     išsaugomas per aria-label. */
  @media (width < 27rem) {
    .nav-toggle {
      inline-size: 2.75rem;
      padding-inline: 0;
      justify-content: center;
      gap: 0;
    }

    .nav-toggle__label {
      clip-path: inset(50%);
      block-size: 1px;
      inline-size: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
    }
  }

  .nav-toggle__bars {
    display: grid;
    gap: 3px;
    inline-size: 0.9rem;
  }

  .nav-toggle__bars i {
    block-size: 1.5px;
    background: currentColor;
  }

  /* Mobilus meniu */
  .drawer {
    margin: 0;
    border: 0;
    padding: 0;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    background: var(--black);
    color: var(--white);
  }

  .drawer::backdrop {
    background: rgb(10 10 10 / 60%);
  }

  .drawer__inner {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    box-sizing: border-box;
    padding: 1.125rem var(--gutter) 2.5rem;
    overflow-y: auto;
  }

  .drawer__top {
    display: flex;
    justify-content: flex-end;
    min-block-size: 3.75rem;
    align-items: center;
    margin-block-end: clamp(1.5rem, 6vh, 3.5rem);
  }

  .drawer__close {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: grid;
    place-items: center;
    background: transparent;
    /* 3,72:1 ant juodo – rėmelis yra vienintelis mygtuko požymis */
    border: 1px solid var(--grey-50);
    border-radius: 999px;
    color: inherit;
    cursor: pointer;
  }

  .drawer__close:hover {
    background: var(--grey-90);
  }

  .drawer__link {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding-block: clamp(0.65rem, 1.6vh, 1rem);
    font-size: clamp(1.75rem, 1rem + 4.5vw, 3rem);
    font-weight: 700;
    font-stretch: 105%;
    letter-spacing: -0.03em;
    line-height: 1.02;
    transition: color var(--d-sm) var(--ease);
  }

  .drawer__link:hover {
    color: var(--grey-30);
  }

  .drawer__link span {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--grey-50);
    font-stretch: 100%;
  }

  .skip {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 100;
    padding: 0.7rem 1.1rem;
    background: var(--black);
    color: var(--white);
    font-size: var(--t-sm);
    font-weight: 600;
    translate: 0 -200%;
    transition: translate var(--d-sm) var(--ease);
  }

  .skip:focus {
    translate: 0 0;
  }

  /* ------------------------------------------------------------------------
     Mygtukai — tik piliulės formos, be šešėlių
     ------------------------------------------------------------------------ */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-block-size: 3rem;
    padding: 0.5rem 1.75rem;
    border: 1px solid var(--c-fg);
    border-radius: 999px;
    background: var(--c-fg);
    color: var(--c-bg);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background var(--d-md) var(--ease),
      border-color var(--d-md) var(--ease), color var(--d-md) var(--ease);
  }

  .btn:hover:not(:disabled) {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--white);
  }

  /* Tamsiame fone akcentas yra baltas, o mygtuko fonas jau baltas – todėl
     hover čia negali būti spalvos pakeitimas, kitaip tekstas išnyktų
     (balta ant balto). Vietoje to mygtukas apsiverčia į kontūrinį. */
  .section--invert .btn:hover:not(:disabled) {
    background: transparent;
    border-color: var(--white);
    color: var(--white);
  }

  .section--invert .btn--ghost:hover:not(:disabled) {
    background: var(--white);
    color: var(--black);
  }

  .btn--ghost {
    background: transparent;
    color: var(--c-fg);
  }

  .btn--ghost:hover:not(:disabled) {
    background: var(--c-fg);
    color: var(--c-bg);
    border-color: var(--c-fg);
  }

  .btn--sm {
    min-block-size: 2.5rem;
    padding-inline: 1.25rem;
    font-size: var(--t-label);
  }

  .btn:disabled {
    background: var(--grey-08);
    border-color: var(--grey-08);
    color: var(--grey-50);
    cursor: not-allowed;
  }

  /* Tekstinė nuoroda su rodykle */
  .arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-block-size: 1.75rem;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-accent);
  }

  /* Tamsiame fone nuoroda nebeturi savo spalvos, todėl ją identifikuoja
     pabraukimas – kitaip ji atrodytų kaip paprastas tekstas (WCAG 1.4.1). */
  .section--invert .arrow {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
    transition: text-decoration-color var(--d-md) var(--ease);
  }

  .section--invert .arrow:hover {
    text-decoration-color: currentColor;
  }

  .section--invert .channel:hover .channel__value {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
  }

  .arrow svg {
    transition: translate var(--d-md) var(--ease);
  }

  .arrow:hover svg {
    translate: 0.25em 0;
  }

  /* ------------------------------------------------------------------------
     Hero
     ------------------------------------------------------------------------ */

  .hero {
    position: relative;
    border-block-end: 1px solid var(--black);
    overflow: clip;
  }

  /* Hero seka: teiginys (antraštė) → kontekstas (meta juosta) → įrodymas
     (nuotrauka). Kiekviena horizontali juosta išnaudoja visą plotį, todėl
     nelieka neužpildytų plotų šalia siauro teksto. */
  .hero__inner {
    display: grid;
    gap: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
    padding-block: clamp(3rem, 1.5rem + 5vw, 6.5rem) clamp(2.5rem, 1.5rem + 4vw, 5rem);
  }

  .hero h1 {
    font-stretch: 115%;
    letter-spacing: -0.042em;
  }

  .hero h1 em {
    font-style: normal;
    color: var(--c-accent);
  }

  /* Meta juosta: žymė kairėje, įžanga dešinėje – abu prisegti prie juostos
     kraštų. Tarpas tarp jų yra sąmoninga erdvė, apribota iš abiejų pusių,
     o ne kabantis tuščias plotas. (Anksčiau čia buvo ir skaičių stulpelis;
     jį pašalinus trijų stulpelių tinklelis paliko ~40 % juostos tuščios.) */
  .hero__meta {
    display: grid;
    gap: 1.25rem 2.5rem;
    grid-template-columns: minmax(0, 1fr);
    padding-block-start: clamp(1.25rem, 1rem + 1.4vw, 2rem);
    border-block-start: 1px solid var(--c-rule);
  }

  .hero__meta > .marker {
    margin: 0;
  }

  @media (width >= 48rem) {
    .hero__meta {
      grid-template-columns: auto minmax(0, 46ch);
      justify-content: space-between;
      align-items: start;
    }

    .hero__meta > .marker {
      white-space: nowrap;
    }
  }

  .hero__intro {
    font-size: var(--t-body);
    font-weight: 500;
    line-height: 1.45;
    max-width: 46ch;
  }

  .hero__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--grey-08);
    overflow: clip;
  }

  @media (width >= 56rem) {
    .hero__media {
      aspect-ratio: 21 / 9;
    }
  }

  .hero__media picture {
    display: block;
    block-size: 100%;
  }

  .hero__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.06);
  }

  .hero__facts {
    display: grid;
    gap: 0;
    align-self: start;
  }

  .hero__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: clamp(0.65rem, 1.4vh, 1rem);
    border-block-start: 1px solid var(--c-rule);
  }

  .hero__fact:last-child {
    border-block-end: 1px solid var(--c-rule);
  }

  .hero__fact dt {
    font-size: var(--t-label);
    font-weight: 700;
    font-stretch: 94%;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-fg-soft);
  }

  .hero__fact dd {
    margin: 0;
    font-size: var(--t-h3);
    font-weight: 700;
    font-stretch: 104%;
    letter-spacing: -0.025em;
    text-align: end;
  }

  /* ------------------------------------------------------------------------
     Apie
     ------------------------------------------------------------------------ */

  .about {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start;
  }

  @media (width >= 56rem) {
    .about {
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    }
  }

  .about__body {
    display: grid;
    gap: 1.5rem;
  }

  .about__body p {
    font-size: var(--t-lead);
    line-height: 1.34;
    font-weight: 500;
    letter-spacing: -0.015em;
  }

  .about__body p + p {
    font-size: var(--t-body);
    line-height: 1.5;
    font-weight: 450;
    letter-spacing: 0;
    color: var(--c-fg-soft);
    max-width: 52ch;
  }

  .datalist {
    display: grid;
  }

  .datalist > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
    border-block-start: 1px solid var(--c-rule-soft);
  }

  .datalist > div:first-child {
    border-block-start: 1px solid var(--c-rule);
  }

  .datalist > div:last-child {
    border-block-end: 1px solid var(--c-rule-soft);
  }

  .datalist dt {
    font-size: var(--t-label);
    font-weight: 700;
    font-stretch: 94%;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-fg-soft);
  }

  .datalist dd {
    margin: 0;
    font-size: var(--t-body);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: end;
  }

  /* ------------------------------------------------------------------------
     Investicijų kryptys — redakcinės eilutės, ne dėžutės
     ------------------------------------------------------------------------ */

  .streams {
    display: grid;
    border-block-start: 1px solid var(--c-rule);
  }

  .stream {
    display: grid;
    gap: 0.75rem 2rem;
    grid-template-columns: minmax(0, 1fr);
    padding-block: clamp(1.75rem, 1rem + 2.6vw, 3rem);
    border-block-end: 1px solid var(--c-rule-soft);
    transition: background var(--d-md) var(--ease);
  }

  @media (width >= 48rem) {
    .stream {
      grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 0.9fr);
      align-items: start;
      gap: 1.5rem 2rem;
    }
  }

  .stream__no {
    font-size: var(--t-label);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: var(--c-accent);
    padding-block-start: 0.35em;
  }

  .stream h3 {
    font-stretch: 104%;
  }

  .stream__desc {
    font-size: var(--t-body);
    line-height: 1.5;
    color: var(--c-fg-soft);
  }

  .stream__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.6rem;
  }

  /* Logotipai yra nuorodos į portfelio įmonių svetaines. Paspaudimo zona
     didinama iki 44 px, kad atitiktų WCAG 2.5.8 net kai pats ženklas žemas. */
  .stream__logo {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    transition: opacity var(--d-md) var(--ease);
  }

  .stream__logo:hover img {
    filter: grayscale(0);
    opacity: 1;
  }

  .stream__logos img {
    block-size: 1.5rem;
    inline-size: auto;
    filter: grayscale(1);
    opacity: 0.95;
    transition: opacity var(--d-md) var(--ease), filter var(--d-md) var(--ease);
  }

  .stream__logos img[data-tall] {
    block-size: 2.75rem;
  }

  .stream:hover .stream__logos img {
    opacity: 1;
    filter: grayscale(0);
  }

  /* ------------------------------------------------------------------------
     Butai — kvadratinės nuotraukos, jokių rėmelių ir šešėlių
     ------------------------------------------------------------------------ */

  .flats {
    display: grid;
    gap: clamp(2rem, 1rem + 3.4vw, 4rem) clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
  }

  @media (width >= 40rem) {
    .flats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 72rem) {
    .flats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .flat {
    display: flex;
    flex-direction: column;
  }

  .flat__media {
    position: relative;
    display: block;
    inline-size: 100%;
    padding: 0;
    border: 0;
    background: var(--grey-08);
    aspect-ratio: 4 / 3;
    overflow: clip;
    cursor: pointer;
  }

  .flat__media picture {
    display: block;
    block-size: 100%;
  }

  .flat__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.04);
    transition: scale var(--d-xl) var(--ease), filter var(--d-lg) var(--ease);
  }

  .flat__media:hover img,
  .flat__media:focus-visible img {
    scale: 1.04;
    filter: grayscale(0) contrast(1);
  }

  .flat__badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5rem 0.9rem;
    background: var(--white);
    color: var(--black);
    font-size: var(--t-micro);
    font-weight: 700;
    font-stretch: 94%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .flat__badge::before {
    content: "";
    inline-size: 0.45em;
    block-size: 0.45em;
    background: var(--black);
    flex: none;
  }

  /* Rezervuoto buto žymė. Ne vien spalva – prie jos rodomas ir kitoks
     tekstas, todėl būsena suprantama ir nespalvotai matančiam (WCAG 1.4.1). */
  .flat__badge--reserved::before {
    background: var(--burgundy);
  }

  .flat__count {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    padding: 0.45rem 0.8rem;
    background: var(--white);
    font-size: var(--t-micro);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
  }

  /* Informacija po nuotrauka – tipografinė, be dėžutės */
  .flat__body {
    display: grid;
    gap: 0.9rem;
    padding-block-start: 1rem;
  }

  .flat__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block-end: 0.85rem;
    border-block-end: 1px solid var(--c-rule);
  }

  .flat__code {
    font-size: var(--t-h3);
    font-weight: 700;
    font-stretch: 106%;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
  }

  .flat__area {
    font-size: var(--t-body);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .flat__meta {
    display: grid;
    gap: 0.4rem;
    font-size: var(--t-sm);
  }

  .flat__meta > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }

  .flat__meta dt {
    color: var(--c-fg-soft);
    font-weight: 500;
  }

  .flat__meta dd {
    margin: 0;
    font-weight: 600;
    text-align: end;
  }

  /* Nuomos kontaktas prie kiekvieno buto. Atskirtas plaukine linija, kad
     neatrodytų kaip dar viena buto savybė sąraše. */
  .flat__contact {
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--c-fg-soft);
    padding-block-start: 0.85rem;
    border-block-start: 1px solid var(--c-rule-soft);
  }

  .flat__contact a {
    color: var(--c-accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
    transition: text-decoration-color var(--d-md) var(--ease);
    overflow-wrap: anywhere;
  }

  .flat__contact a:hover {
    text-decoration-color: currentColor;
  }

  .flat__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 0.25rem;
  }

  /* ------------------------------------------------------------------------
     Sodybos
     ------------------------------------------------------------------------ */

  .estates {
    display: grid;
    gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  }

  @media (width >= 62rem) {
    .estates {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .estate {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }

  /* Semantiniai žymekliai, kad vietos rezervas prisitaikytų ir tamsioje
     sekcijoje – literalus --grey-04 ten paliktų baltą dėžę. */
  .estate__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-rule-soft);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.5rem;
  }

  /* Su nuotrauka rėmelis ir vidiniai tarpai nereikalingi – kadras pats
     yra riba, kaip ir butų kortelėse. */
  .estate__media--photo {
    padding: 0;
    border: 0;
    overflow: clip;
  }

  .estate__media--photo picture {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .estate__media--photo img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* Nespalvota, kaip visos kitos svetainės nuotraukos. */
    filter: grayscale(1) contrast(1.04);
  }

  .estate__placeholder {
    display: grid;
    gap: 0.75rem;
    justify-items: center;
    max-width: 24rem;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-fg-soft);
  }

  .estate__body {
    display: grid;
    gap: 1.25rem;
    padding-block-start: 1.25rem;
  }

  .estate__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-block-end: 0.9rem;
    border-block-end: 1px solid var(--c-rule);
  }

  .estate__head h3 {
    font-stretch: 105%;
  }

  .estate__cap {
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: -0.005em;
    white-space: nowrap;
  }

  .estate__addr {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--c-fg-soft);
  }

  .estate__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .estate__tags li {
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--c-rule-soft);
    border-radius: 999px;
    font-size: var(--t-label);
    font-weight: 600;
  }

  /* Technikos skleidimas */
  .gear {
    border-block: 1px solid var(--c-rule-soft);
  }

  .gear > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.9rem;
    min-block-size: 2.75rem;
    font-size: var(--t-sm);
    font-weight: 600;
  }

  .gear > summary::-webkit-details-marker {
    display: none;
  }

  .gear > summary::after {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    rotate: 45deg;
    transition: rotate var(--d-md) var(--ease);
    flex: none;
  }

  .gear[open] > summary::after {
    rotate: -135deg;
  }

  .gear__body {
    display: grid;
    gap: 0.9rem;
    padding-block: 0.25rem 1.25rem;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--c-fg-soft);
  }

  .gear__list {
    display: grid;
    gap: 0.3rem;
    font-weight: 600;
    color: var(--c-fg);
  }

  .gear__list li {
    display: flex;
    gap: 0.6em;
  }

  .gear__list li::before {
    content: "";
    inline-size: 0.35em;
    block-size: 0.35em;
    background: var(--c-accent);
    flex: none;
    margin-block-start: 0.62em;
  }

  .gear__body a {
    color: var(--c-accent);
    font-weight: 600;
  }

  /* Rezervacija — pabraukti laukai, ne dėžutės */
  .book {
    display: grid;
    gap: 1.25rem;
    padding-block-start: 0.5rem;
  }

  .book__legend {
    padding: 0;
    font-size: var(--t-label);
    font-weight: 700;
    font-stretch: 94%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-fg-soft);
  }

  .book__grid {
    display: grid;
    gap: 1rem 1.5rem;
    margin-block-start: 1rem;
  }

  @container (width > 28rem) {
    .book__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .field {
    display: grid;
    gap: 0.35rem;
  }

  .field > span {
    font-size: var(--t-label);
    font-weight: 700;
    font-stretch: 94%;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-fg-soft);
  }

  /* Ramybės būsenoje rėmelis prislopintas, hover – pilno kontrasto.
     Anksčiau ramybės rėmelis buvo --c-rule (tamsiame fone baltas), todėl
     hover į baltą nebūtų davęs jokio matomo atsako. */
  .field :is(input, select) {
    font: inherit;
    font-size: var(--t-body);
    font-weight: 600;
    min-block-size: 2.75rem;
    padding: 0.3rem 0;
    color: var(--c-fg);
    background: transparent;
    border: 0;
    border-block-end: 1px solid var(--c-field);
    border-radius: 0;
    transition: border-color var(--d-sm) var(--ease);
  }

  .field :is(input, select):hover,
  .field :is(input, select):focus {
    border-block-end-color: var(--c-fg);
  }

  .field input:user-invalid {
    border-block-end-color: #c62d17;
  }

  /* ------------------------------------------------------------------------
     Datų pasirinkimas – savas kalendorius
     ------------------------------------------------------------------------
     Progresyvus pagerinimas: HTML lieka <input type="date">, todėl be JS
     veikia naršyklės pasirinkiklis ir forma. JS įjungęs kalendorių paslepia
     lauką ir parodo mygtuką – rašyti ranka nebereikia.
     ------------------------------------------------------------------------ */

  .datepick {
    position: relative;
  }

  /* Laukas lieka DOM'e kaip reikšmės laikiklis ir formos elementas. */
  /* .field :is(input, select) specifiškumas (0,1,1) didesnis nei .datepick__input
     (0,1,0), todėl čia reikia dviejų klasių – kitaip paveldėtas
     min-block-size: 2.75rem nugalėtų. */
  .field .datepick__input,
  .datepick__input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    min-block-size: 0;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .datepick__btn {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-block-size: 2.75rem;
    padding: 0.3rem 0;
    background: transparent;
    border: 0;
    border-block-end: 1px solid var(--c-field);
    border-radius: 0;
    color: var(--c-fg);
    font: inherit;
    font-size: var(--t-body);
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: border-color var(--d-sm) var(--ease);
  }

  .datepick__btn:hover,
  .datepick__btn[aria-expanded="true"] {
    border-block-end-color: var(--c-fg);
  }

  .datepick__btn[data-empty] .datepick__val {
    color: var(--c-fg-soft);
    font-weight: 500;
  }

  .datepick__btn svg {
    flex: none;
    opacity: 0.75;
  }

  .cal {
    position: absolute;
    z-index: 40;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-start: 0;
    inline-size: max(17.5rem, 100%);
    padding: 0.85rem;
    background: var(--c-bg);
    border: 1px solid var(--c-rule);
    box-shadow: 0 18px 44px -20px rgb(0 0 0 / 55%);
  }

  /* Siauruose ekranuose skydelis lygiuojamas pagal kortelę, kad neišlįstų. */
  @media (width < 26rem) {
    .cal {
      inline-size: min(17.5rem, calc(100vw - 2.5rem));
    }
  }

  .cal[hidden] {
    display: none;
  }

  .cal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-end: 0.75rem;
  }

  .cal__month {
    font-size: var(--t-sm);
    font-weight: 700;
    font-stretch: 98%;
    letter-spacing: 0.02em;
  }

  .cal__nav {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--c-field);
    color: inherit;
    cursor: pointer;
    transition: background var(--d-sm) var(--ease), border-color var(--d-sm) var(--ease);
  }

  .cal__nav:hover:not(:disabled) {
    background: var(--c-fg);
    color: var(--c-bg);
    border-color: var(--c-fg);
  }

  .cal__nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  .cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }

  .cal__wd {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-fg-soft);
    text-align: center;
    padding-block: 0.35rem 0.5rem;
  }

  .cal__day {
    aspect-ratio: 1;
    min-block-size: 2.25rem;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    color: var(--c-fg);
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--d-xs) var(--ease), color var(--d-xs) var(--ease);
  }

  .cal__day:hover:not(:disabled) {
    background: color-mix(in oklab, currentColor 16%, transparent);
  }

  .cal__day:disabled {
    color: var(--c-fg-soft);
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* Pasirinkta diena – inversija, todėl matoma ir nespalvotai. */
  .cal__day[aria-selected="true"] {
    background: var(--c-fg);
    color: var(--c-bg);
  }

  /* Dienos tarp atvykimo ir išvykimo. */
  .cal__day[data-inrange]:not([aria-selected="true"]) {
    background: color-mix(in oklab, currentColor 10%, transparent);
  }

  /* Šiandiena – pabraukimas, ne spalva. */
  .cal__day[data-today]::after {
    content: "";
    display: block;
    inline-size: 0.9em;
    block-size: 2px;
    background: currentColor;
    margin-block-start: 0.1em;
  }

  .cal__day:empty {
    cursor: default;
    pointer-events: none;
  }

  .cal__foot {
    display: flex;
    justify-content: flex-end;
    margin-block-start: 0.6rem;
    padding-block-start: 0.6rem;
    border-block-start: 1px solid var(--c-rule-soft);
  }

  .cal__clear {
    background: transparent;
    border: 0;
    color: var(--c-fg-soft);
    font: inherit;
    font-size: var(--t-label);
    font-weight: 600;
    min-block-size: 2.25rem;
    padding-inline: 0.5rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .cal__clear:hover {
    color: var(--c-fg);
  }

  .book__msg {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-fg-soft);
    min-block-size: 1.4rem;
  }

  .book__msg[data-state="error"] {
    color: #c62d17;
  }

  .book__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
  }

  /* ------------------------------------------------------------------------
     Pastaba
     ------------------------------------------------------------------------ */

  .callout {
    display: grid;
    gap: 0.9rem;
    padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
    border-block: 1px solid var(--c-rule);
    margin-block-end: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  }

  .callout h3 {
    font-stretch: 104%;
    max-width: 22ch;
  }

  .callout p {
    font-size: var(--t-body);
    color: var(--c-fg-soft);
    max-width: 62ch;
  }

  /* ------------------------------------------------------------------------
     Parašo blokas – didelis tekstūrinis ženklas prieš kontaktus
     ------------------------------------------------------------------------ */

  .signature {
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 6rem);
    border-block-start: 1px solid var(--c-rule);
    overflow: clip;
  }

  /* Konteineris dedamas ant APRIBOTOS vidinės juostos, ne ant pilno pločio
     sekcijos – kitaip cqi sektų ekrano plotį ir plačiuose monitoriuose,
     kur .shell jau nustoja augti, ženklas išlįstų iš juostos. */
  .signature > .shell {
    container-type: inline-size;
  }

  .signature__mark {
    margin: 0;
    font-weight: 800;
    font-stretch: 116%;
    /* cqi susieja dydį su konteinerio pločiu, todėl ženklas tiksliai
       užpildo juostą visuose ekranuose be atskirų lūžio taškų. */
    font-size: 8.1cqi;
    letter-spacing: -0.05em;
    line-height: 0.95;
    white-space: nowrap;
    color: var(--c-fg);
  }

  /* Tekstūra dedama tik ten, kur naršyklė moka ją įkirpti į raides.
     Be šios apsaugos color: transparent paliktų ženklą nematomą. */
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .signature__mark {
      background-image: url("../img/bg/rock-strata.jpg");
      background-image: image-set(
        url("../img/bg/rock-strata.webp") type("image/webp"),
        url("../img/bg/rock-strata.jpg") type("image/jpeg")
      );
      background-size: cover;
      background-position: center 58%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }

  /* Priverstinių spalvų režimu ir spausdinant fono paveikslėliai pašalinami,
     todėl ženklas grąžinamas į vientisą spalvą. */
  @media (forced-colors: active), print {
    .signature__mark {
      background-image: none;
      color: CanvasText;
      -webkit-text-fill-color: CanvasText;
    }
  }

  /* ------------------------------------------------------------------------
     Kontaktai
     ------------------------------------------------------------------------ */

  .contact {
    display: grid;
    gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    align-items: start;
  }

  @media (width >= 56rem) {
    .contact {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }

  .channels {
    display: grid;
  }

  .channel {
    display: grid;
    gap: 0.3rem;
    padding-block: clamp(1.25rem, 1rem + 1.2vw, 1.85rem);
    border-block-start: 1px solid var(--c-rule-soft);
    transition: padding-inline-start var(--d-md) var(--ease);
  }

  .channel:first-child {
    border-block-start: 1px solid var(--c-rule);
  }

  .channel:last-child {
    border-block-end: 1px solid var(--c-rule-soft);
  }

  .channel:hover {
    padding-inline-start: 0.85rem;
  }

  .channel__label {
    font-size: var(--t-label);
    font-weight: 700;
    font-stretch: 94%;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-fg-soft);
  }

  .channel__value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--t-h3);
    font-weight: 700;
    font-stretch: 102%;
    letter-spacing: -0.025em;
  }

  .channel:hover .channel__value {
    color: var(--c-accent);
  }

  .channel__note {
    font-size: var(--t-sm);
    color: var(--c-fg-soft);
  }

  /* ------------------------------------------------------------------------
     Poraštė
     ------------------------------------------------------------------------ */

  .footer {
    padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
    background: var(--black);
    color: var(--white);
    font-size: var(--t-sm);
  }

  .footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    justify-content: space-between;
    align-items: baseline;
  }

  .footer p {
    color: var(--grey-30);
  }

  .footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.75rem;
  }

  .footer__links a {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
    font-weight: 600;
    transition: color var(--d-sm) var(--ease);
  }

  .footer__links a:hover {
    color: var(--grey-30);
  }

  /* ------------------------------------------------------------------------
     Galerija
     ------------------------------------------------------------------------ */

  .lightbox {
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--black);
    color: var(--white);
  }

  .lightbox::backdrop {
    background: rgb(10 10 10 / 92%);
  }

  .lightbox__inner {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    block-size: 100%;
    gap: 0.75rem;
    padding: clamp(0.75rem, 0.5rem + 1vw, 1.5rem) var(--gutter);
    box-sizing: border-box;
  }

  .lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid var(--grey-70);
  }

  .lightbox__title {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    flex-wrap: wrap;
  }

  .lightbox__title strong {
    font-size: var(--t-h3);
    font-weight: 700;
    font-stretch: 104%;
    letter-spacing: -0.025em;
  }

  .lightbox__title span {
    font-size: var(--t-label);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--grey-30);
    font-variant-numeric: tabular-nums;
  }

  .lightbox__x {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--grey-50);
    border-radius: 999px;
    color: inherit;
    cursor: pointer;
    flex: none;
  }

  .lightbox__x:hover {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
  }

  .lightbox__stage {
    position: relative;
    display: grid;
    place-items: center;
    min-block-size: 0;
  }

  .lightbox__stage img {
    max-inline-size: 100%;
    max-block-size: 100%;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
  }

  .lightbox__nav {
    position: absolute;
    inset-block: 0;
    inline-size: clamp(3rem, 12%, 7rem);
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    color: var(--white);
    cursor: pointer;
  }

  .lightbox__nav > span {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgb(10 10 10 / 55%);
    border: 1px solid var(--grey-50);
    transition: background var(--d-sm) var(--ease), color var(--d-sm) var(--ease);
  }

  .lightbox__nav:hover > span {
    background: var(--white);
    color: var(--black);
  }

  .lightbox__nav--prev {
    inset-inline-start: 0;
  }

  .lightbox__nav--next {
    inset-inline-end: 0;
  }

  .lightbox__thumbs {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-block: 0.4rem;
    scrollbar-width: thin;
    scrollbar-color: var(--grey-50) transparent;
  }

  .lightbox__thumbs button {
    flex: none;
    inline-size: 4.5rem;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    background: var(--grey-90);
    overflow: clip;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity var(--d-sm) var(--ease);
  }

  .lightbox__thumbs button img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .lightbox__thumbs button:hover {
    opacity: 0.75;
  }

  .lightbox__thumbs button[aria-current="true"] {
    opacity: 1;
    outline: 2px solid var(--white);
    outline-offset: -2px;
  }

  /* ------------------------------------------------------------------------
     Taisyklių puslapis
     ------------------------------------------------------------------------ */

  /* Dokumento antraštė – ne reklaminio dydžio: taisyklės skaitomos, ne
     apžiūrimos, todėl naudojamas sekcijų, o ne hero mastelis. */
  .title--doc {
    font-size: var(--t-h2);
    line-height: var(--lh-h2);
    font-stretch: 108%;
    max-width: 20ch;
  }

  .doc {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    align-items: start;
  }

  @media (width >= 68rem) {
    .doc {
      grid-template-columns: 16rem minmax(0, 1fr);
    }
  }

  .doc__toc {
    position: sticky;
    inset-block-start: 5.5rem;
    display: none;
    font-size: var(--t-sm);
  }

  @media (width >= 68rem) {
    .doc__toc {
      display: grid;
    }
  }

  .doc__toc strong {
    font-size: var(--t-label);
    font-weight: 700;
    font-stretch: 94%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-fg-soft);
    padding-block-end: 0.75rem;
    border-block-end: 1px solid var(--c-rule);
    margin-block-end: 0.5rem;
  }

  .doc__toc a {
    padding-block: 0.45rem;
    font-weight: 500;
    color: var(--c-fg-soft);
    transition: color var(--d-sm) var(--ease);
  }

  .doc__toc a:hover {
    color: var(--c-accent);
  }

  .doc__body {
    max-width: 50rem;
    display: grid;
    gap: clamp(2rem, 1rem + 2.6vw, 3.5rem);
  }

  .doc__body section {
    display: grid;
    gap: 1.25rem;
    scroll-margin-block-start: 5.5rem;
  }

  .doc__body h2 {
    font-size: var(--t-h3);
    font-stretch: 104%;
    padding-block-end: 0.9rem;
    border-block-end: 1px solid var(--c-rule);
  }

  .doc__body ol {
    display: grid;
    gap: 1.15rem;
    counter-reset: clause;
  }

  /* Punktas NEGALI būti grid konteineris: grid'e kiekvienas vaikinis elementas
     tampa atskiru grid elementu, todėl bet kokia <a> ar <strong> žymė iškristų
     iš teksto į siaurą skaičiaus stulpelį ir sulūžtų. Numeris dedamas
     absoliučiai, o tekstas lieka įprastame srauto režime. */
  .doc__body ol > li {
    position: relative;
    padding-inline-start: 2.75rem;
    font-size: var(--t-sm);
    line-height: 1.62;
    color: var(--c-fg-soft);
    counter-increment: clause;
  }

  .doc__body ol > li::before {
    content: counter(clause);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    inline-size: 2.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--c-accent);
  }

  .doc__body ol > li a {
    color: var(--c-accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }

  .doc__body strong {
    color: var(--c-fg);
  }

  .doc__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    align-items: center;
    padding-block: 1.25rem;
    border-block: 1px solid var(--c-rule);
    margin-block-end: clamp(2rem, 1.2rem + 2.4vw, 3.5rem);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--c-fg-soft);
  }
}

/* --------------------------------------------------------------------------
   Pagalbinės
   -------------------------------------------------------------------------- */

@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  /* Pasirodymas slenkant. Be JS turinys matomas iš karto. */
  .reveal {
    opacity: 0;
    translate: 0 1.75rem;
    transition: opacity var(--d-xl) var(--ease), translate var(--d-xl) var(--ease);
  }

  .reveal[data-shown] {
    opacity: 1;
    translate: 0 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1;
      translate: none;
      transition: none;
    }
  }

  .no-js .reveal {
    opacity: 1;
    translate: none;
  }
}

/* --------------------------------------------------------------------------
   Priverstinės spalvos ir spauda
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .flat__badge,
  .flat__count,
  .estate__tags li,
  .btn {
    border: 1px solid CanvasText;
  }

  .marker::before,
  .flat__badge::before {
    forced-color-adjust: none;
  }
}

@media print {
  .masthead,
  .nav-toggle,
  .lightbox,
  .drawer,
  .book {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  .section {
    padding-block: 1.5rem;
    break-inside: avoid;
  }

  .section--invert,
  .footer {
    background: #fff;
    color: #000;
  }
}