/* ============================================================
   Dark Bridge Records — dizaino sistema
   Paletė ir logotipas pagal patvirtintą identiteto brifą.
   Šriftai: Archivo (display, kintamas wght+wdth) + Source Serif 4 (tekstas).
   ============================================================ */

@import url('fonts.css');

/* ---- 1. ŽETONAI ------------------------------------------- */
:root {
  /* Paletė — trys pagrindinės spalvos iš brifo, plius darbiniai atspalviai. */
  --void:        #0B0E17;  /* fonas, header, footer */
  --panel:       #10131E;  /* pakelta sekcija */
  --panel-2:     #161A28;  /* kortelė ant pakeltos sekcijos */
  --rule:        #232838;  /* plaukelinės linijos */
  --rule-strong: #313850;
  --signal:      #3DA9FC;  /* CTA, nuorodos, akcentai */
  --signal-deep: #245C86;  /* akcento kraštinės */
  --signal-wash: rgba(61, 169, 252, 0.07);
  --ink:         #EDEDE6;  /* pagrindinis tekstas */
  --ink-dim:     #8B8F9C;  /* antrinis tekstas — 5.7:1 ant --void */
  --violet:      #8A5CF6;  /* tik hover detalės (brifas: neprivaloma) */

  /* Tipografija */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   1.25rem;
  --t-lg:   1.6rem;
  --t-xl:   clamp(1.9rem, 3.4vw, 2.6rem);
  --t-2xl:  clamp(2.4rem, 7vw, 4.4rem);

  /* Tarpai — 4pt tinklelis */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --measure: 66ch;
  --wide: 1180px;
  --text-col: 760px;
  --gutter: clamp(20px, 5vw, 56px);

  --ease: cubic-bezier(0.2, 0, 0.1, 1);
}

/* ---- 2. PAGRINDAS ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  font-variation-settings: 'opsz' 14;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--violet); }

img, svg, video { max-width: 100%; height: auto; }

/* Matoma klaviatūros fokuso žymė — niekur nenuimama. */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Praleisti į turinį — pirmas tab'as puslapyje. */
.skip {
  position: absolute; left: var(--s-4); top: -100px;
  background: var(--signal); color: var(--void);
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600;
  padding: var(--s-3) var(--s-4); z-index: 200;
  transition: top 120ms var(--ease);
}
.skip:focus { top: var(--s-4); color: var(--void); }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- 3. IŠDĖSTYMAS ---------------------------------------- */
.shell { width: 100%; max-width: var(--wide); margin: 0 auto; padding-inline: var(--gutter); }
.col   { max-width: var(--text-col); }

.band { padding-block: var(--s-9); border-top: 1px solid var(--rule); }
.band:first-of-type { border-top: none; }
/* Brifas: kontrastas tarp sekcijų kaitaliojant fono atspalvį, ne linijomis. */
.band--raised { background: var(--panel); border-top-color: transparent; }
.band--tight { padding-block: var(--s-8); }

.band__head { margin-bottom: var(--s-7); }
.band__head h2 { font-size: var(--t-xl); }
.band__head p { color: var(--ink-dim); margin-top: var(--s-4); font-size: var(--t-md); }

/* ---- 4. ANTRAŠTĖ ------------------------------------------ */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 14, 23, 0.92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead__in {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 68px;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display); font-size: var(--t-sm);
  letter-spacing: 0.05em; color: var(--ink); text-decoration: none;
  flex: none; font-weight: 500;
}
.wordmark:hover { color: var(--ink); }
.wordmark b { color: var(--signal); font-weight: 700; }
.wordmark svg { width: 30px; height: 30px; flex: none; }

.nav { display: flex; gap: var(--s-5); margin-left: auto; align-items: center; }
.nav a {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-dim); text-decoration: none; padding-block: var(--s-2);
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); border-bottom-color: var(--signal); }

.btn {
  display: inline-block; font-family: var(--font-display);
  font-size: var(--t-sm); font-weight: 600; text-decoration: none;
  padding: 10px 20px; border: 1px solid var(--signal-deep);
  color: var(--signal); background: transparent;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
  cursor: pointer;
}
.btn:hover { background: var(--signal); border-color: var(--signal); color: var(--void); }
.btn--solid { background: var(--signal); border-color: var(--signal); color: var(--void); }
.btn--solid:hover { background: var(--ink); border-color: var(--ink); color: var(--void); }
.btn--lg { font-size: var(--t-base); padding: 14px 28px; }

/* Kalbos perjungiklis — dvi būsenos, ne išskleidžiamasis sąrašas. */
.lang { display: flex; align-items: center; border: 1px solid var(--rule-strong); flex: none; }
.lang a {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600;
  color: var(--ink-dim); text-decoration: none; padding: 5px 9px; line-height: 1.4;
}
.lang a:hover { color: var(--ink); background: var(--panel-2); }
.lang a[aria-current] { background: var(--signal); color: var(--void); }

.burger {
  display: none; margin-left: auto; background: none; cursor: pointer;
  border: 1px solid var(--rule-strong); color: var(--ink);
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 500;
  padding: 8px 14px;
}

/* ---- 5. HERO — vienintelė vieta, kur dizainas kelia balsą --- */
.hero { padding-block: clamp(var(--s-8), 12vh, var(--s-10)) var(--s-9); text-align: center; }
.hero__span { max-width: 780px; margin: 0 auto var(--s-6); }
.hero__span svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Tilto lankas nusibrėžia vieną kartą, įkrovus puslapį. */
.arc-line {
  stroke-dasharray: var(--arc-len, 900);
  stroke-dashoffset: var(--arc-len, 900);
  animation: draw 1100ms var(--ease) 120ms forwards;
}
.arc-node { opacity: 0; animation: fade 400ms var(--ease) 900ms forwards; }
.arc-label {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  fill: var(--ink-dim); letter-spacing: 0.04em;
  opacity: 0; animation: fade 400ms var(--ease) 1050ms forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .arc-line, .arc-node, .arc-label { animation: none; stroke-dashoffset: 0; opacity: 1; }
}

.hero h1 { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.025em; max-width: 16ch; margin: 0 auto; }
.hero__lead {
  font-size: var(--t-md); color: var(--ink-dim); margin: var(--s-5) auto 0;
  max-width: 54ch;
}
.hero__acts { margin-top: var(--s-7); display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* ---- 6. TRYS DURYS ---------------------------------------- */
/* Ne trys vienodos kortelės su šešėliu: plokšti skydai, sujungti
   viena plaukeline linija — tas pats tilto motyvas, tik struktūroje. */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.door {
  background: var(--void); padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  text-decoration: none; color: inherit;
  transition: background-color 180ms var(--ease);
}
.band--raised .door { background: var(--panel); }
.door:hover { background: var(--panel-2); color: inherit; }
.door:hover .door__title { color: var(--signal); }
.door__glyph { width: 26px; height: 26px; color: var(--signal); }
.door__title { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; transition: color 180ms var(--ease); }
.door__body { color: var(--ink-dim); font-size: var(--t-sm); margin: 0; }
.door__list { list-style: none; margin: var(--s-2) 0 0; padding: 0; font-family: var(--font-display); font-size: var(--t-xs); color: var(--ink-dim); }
.door__list li { padding-block: 3px; }

/* ---- 7. TURINIO BLOKAI ------------------------------------ */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.tile { border: 1px solid var(--rule); padding: var(--s-5); background: var(--void); }
.band--raised .tile { background: var(--panel-2); border-color: transparent; }
.tile h3 { font-size: var(--t-md); margin-bottom: var(--s-3); }
.tile p { color: var(--ink-dim); font-size: var(--t-sm); }

/* Procesas — čia numeracija pagrįsta, nes tai tikra seka. */
.chain { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.chain li {
  counter-increment: step;
  display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4);
  padding-block: var(--s-5); border-top: 1px solid var(--rule);
}
.chain li:first-child { border-top: none; padding-top: 0; }
.chain li::before {
  content: counter(step);
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600;
  color: var(--signal); padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.chain h3 { font-size: var(--t-base); font-weight: 600; margin-bottom: var(--s-2); }
.chain p { color: var(--ink-dim); font-size: var(--t-sm); }

/* Faktų eilutė */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.fact { border-left: 2px solid var(--signal-deep); padding-left: var(--s-4); }
.fact__n { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; display: block; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fact__t { color: var(--ink-dim); font-size: var(--t-sm); display: block; margin-top: var(--s-2); }

/* Specifikacijų / įrangos sąrašas */
.spec { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.spec th, .spec td { text-align: left; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.spec th { font-family: var(--font-display); font-weight: 500; color: var(--signal); width: 190px; padding-right: var(--s-5); }
.spec td { color: var(--ink-dim); }

/* Partnerių / platformų tinklelis — vardai tekstu, ne suklastoti logotipai. */
.net { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.net__i {
  background: var(--void); padding: var(--s-4) var(--s-4);
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 500;
  display: flex; flex-direction: column; gap: 2px; min-height: 76px; justify-content: center;
}
.band--raised .net__i { background: var(--panel); }
.net__i span { font-size: var(--t-xs); color: var(--ink-dim); font-weight: 400; }

/* Citata / teiginys */
.claim {
  border-left: 2px solid var(--signal); padding-left: var(--s-5);
  font-size: var(--t-md); max-width: 58ch;
}
.claim cite { display: block; font-family: var(--font-display); font-size: var(--t-xs); font-style: normal; color: var(--ink-dim); margin-top: var(--s-3); }

/* Tuščia būsena — kvietimas veikti, ne atsiprašymas. */
.empty { border: 1px dashed var(--rule-strong); padding: var(--s-8) var(--s-6); text-align: center; }
.empty h3 { font-size: var(--t-lg); margin-bottom: var(--s-4); }
.empty p { color: var(--ink-dim); margin-inline: auto; }

/* Turinio tekstas ilgesniuose puslapiuose */
.prose h2 { font-size: var(--t-lg); margin-top: var(--s-8); margin-bottom: var(--s-4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--t-md); margin-top: var(--s-6); margin-bottom: var(--s-3); }
.prose ul { color: var(--ink-dim); padding-left: var(--s-5); max-width: var(--measure); }
.prose li { margin-bottom: var(--s-2); }
.prose .note { color: var(--ink-dim); font-size: var(--t-sm); border-top: 1px solid var(--rule); padding-top: var(--s-4); margin-top: var(--s-6); }

/* Puslapio antraštė */
.phead { padding-block: var(--s-8) var(--s-7); border-bottom: 1px solid var(--rule); }
.phead h1 { font-size: var(--t-xl); font-weight: 700; }
.phead p { color: var(--ink-dim); font-size: var(--t-md); margin-top: var(--s-4); }
.crumbs { font-family: var(--font-display); font-size: var(--t-xs); color: var(--ink-dim); margin-bottom: var(--s-4); }
.crumbs a { color: var(--ink-dim); text-decoration: none; }
.crumbs a:hover { color: var(--signal); }

/* Baigiamasis CTA */
.close { text-align: center; padding-block: var(--s-9); background: var(--panel); }
.close h2 { font-size: var(--t-xl); max-width: 20ch; margin-inline: auto; }
.close p { color: var(--ink-dim); margin: var(--s-4) auto 0; max-width: 50ch; }
.close .btn { margin-top: var(--s-6); }

/* ---- 8. FORMA --------------------------------------------- */
.form { max-width: 620px; display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label { font-family: var(--font-display); font-size: var(--t-sm); font-weight: 500; }
.field .hint { font-size: var(--t-xs); color: var(--ink-dim); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: var(--t-base); color: var(--ink);
  background: var(--panel); border: 1px solid var(--rule-strong);
  padding: 11px 13px; width: 100%; min-height: 44px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--signal); }

/* ---- 9. PORAŠTĖ ------------------------------------------- */
.foot {
  border-top: 1px solid var(--rule);
  margin-top: clamp(var(--s-6), 4vw, var(--s-8));
  padding-block: clamp(var(--s-7), 5vw, var(--s-9)) var(--s-6);
  background: var(--void);
}
/* Po tamsesne baigiamąja juosta papildomo tarpo nereikia — ji jau yra
   vizualinė riba. */
.close + .foot { margin-top: 0; }
.foot__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-6); }
.foot .foot__h { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600; color: var(--ink); margin-bottom: var(--s-4); letter-spacing: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: var(--s-2); }
.foot a { color: var(--ink-dim); text-decoration: none; font-size: var(--t-sm); }
.foot a:hover { color: var(--signal); }
.foot address { font-style: normal; color: var(--ink-dim); font-size: var(--t-sm); line-height: 1.7; }
.foot__base {
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  font-size: var(--t-xs); color: var(--ink-dim);
}
.foot__mark { display: inline-flex; align-items: center; gap: 9px; }
.foot__mark svg { width: 20px; height: 20px; color: var(--ink-dim); }

/* ---- 10. ADAPTYVUMAS -------------------------------------- */
@media (max-width: 900px) {
  .doors, .grid--3, .facts { grid-template-columns: 1fr; }
  .doors { gap: 1px; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .burger { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--panel); border-bottom: 1px solid var(--rule); padding: var(--s-2) var(--gutter) var(--s-5);
  }
  .nav[data-open='true'] { display: flex; }
  .nav a { padding-block: var(--s-4); border-bottom: 1px solid var(--rule); min-height: 44px; display: flex; align-items: center; }
  .nav a[aria-current] { border-bottom-color: var(--rule); color: var(--signal); }
  .nav .btn { margin-top: var(--s-4); text-align: center; border-bottom: 1px solid var(--signal-deep); }
  .masthead__in { position: relative; gap: var(--s-3); }
  .grid--2 { grid-template-columns: 1fr; }
  .spec th { width: auto; display: block; border: none; padding-bottom: 0; }
  .spec td { display: block; padding-top: var(--s-1); }
  .chain li { grid-template-columns: 28px 1fr; gap: var(--s-3); }
  .band { padding-block: var(--s-8); }
}

@media (max-width: 480px) {
  .foot__cols { grid-template-columns: 1fr; }
  .hero__acts .btn { width: 100%; }
}

@media print {
  .masthead, .nav, .close, .burger { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   11. KŪNO TINKLELIS SU ŠONINĖMIS JUOSTOMIS
   Puslapis pats pasako, ar turi kairę/dešinę juostą; tinklelis
   prisitaiko, o be jų turinys lieka vienas ir centre.
   ============================================================ */
.frame { padding-block: clamp(var(--s-6), 4vw, var(--s-8)); }
/* Puslapiai, kurių kūnas prasideda savo juostomis (.band), tarpo iš .frame
   negauna — juostos jį jau turi savyje. Kitaip susidėtų dvigubas. */
.frame:has(> .shell > .frame__main > .band:first-child) { padding-block: 0; }
.frame:has(> .shell > .frame__main > .prose:first-child) { padding-block-start: clamp(var(--s-6), 4vw, var(--s-8)); }
.frame__grid { display: block; }
.frame--aside .frame__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
  padding-block: var(--s-8);
}
@media (min-width: 1000px) {
  .frame--aside .frame__grid { grid-template-columns: 240px minmax(0, 1fr); }
  .frame--aside .frame__grid:has(.aside--right):not(:has(.aside--left)) {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
  .frame--aside .frame__grid:has(.aside--left):has(.aside--right) {
    grid-template-columns: 220px minmax(0, 1fr) 260px;
  }
  .aside { position: sticky; top: 92px; }
}
.aside {
  font-size: var(--t-sm); color: var(--ink-dim);
  border-left: 1px solid var(--rule); padding-left: var(--s-4);
}
.aside--right { border-left: none; border-top: 1px solid var(--rule); padding: var(--s-5) 0 0; }
@media (min-width: 1000px) {
  .aside--right { border-top: none; border-left: 1px solid var(--rule); padding: 0 0 0 var(--s-5); }
}
.aside h2, .aside h3 { font-size: var(--t-sm); color: var(--ink); margin-bottom: var(--s-3); }
.aside ul { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.aside li { padding-block: 5px; border-bottom: 1px solid var(--rule); }
.aside a { text-decoration: none; }
.aside a:hover { text-decoration: underline; }
.aside p { font-size: var(--t-sm); }

/* ============================================================
   12. HERO PREZENTACIJA
   ============================================================ */
.hero--media { position: relative; min-height: min(84vh, 780px); display: flex; align-items: flex-end; overflow: hidden; }
.hero__stage { position: absolute; inset: 0; z-index: 0; background: var(--void); }
.hero__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease); }
.hero__layer.is-on { opacity: 1; }
.hero__video, .hero__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Uždanga — be jos baltas tekstas ant šviesaus kadro taptų neįskaitomas. */
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--void) 4%, rgba(11,14,23,0.82) 38%, rgba(11,14,23,0.42) 72%, rgba(11,14,23,0.66) 100%);
}
.hero--media .hero__in { position: relative; z-index: 1; padding-block: var(--s-9) var(--s-8); text-align: left; }
.hero--media .hero__title, .hero--media .hero__lead, .hero--media .hero__span { margin-inline: 0; }
.hero--media .hero__span { max-width: 520px; margin-top: var(--s-7); }

.hero__kicker {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600;
  color: var(--signal); margin-bottom: var(--s-3);
}
.hero__title { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.025em; max-width: 17ch; }
.hero__lead { font-size: var(--t-md); color: var(--ink-dim); margin-top: var(--s-4); max-width: 52ch; }
.hero__copy:not(.is-on) { display: none; }
.hero__copy.is-on { animation: rise 600ms var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.hero__controls { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); flex-wrap: wrap; }
.hero__dots { display: flex; gap: var(--s-2); }
.hero__dots button {
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  background: none; border: none; position: relative;
}
.hero__dots button::after {
  content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px;
  background: var(--rule-strong); transition: background-color 200ms var(--ease);
}
.hero__dots button[aria-selected='true']::after { background: var(--signal); }
.hero__btn {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600;
  color: var(--ink-dim); background: rgba(11,14,23,0.6); cursor: pointer;
  border: 1px solid var(--rule-strong); padding: 9px 14px; min-height: 40px;
}
.hero__btn:hover { color: var(--ink); border-color: var(--signal-deep); }
.hero__btn[aria-pressed='true'] { color: var(--signal); border-color: var(--signal-deep); }

@media (max-width: 760px) {
  .hero--media { min-height: auto; }
  .hero--media .hero__in { padding-block: var(--s-8) var(--s-7); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__layer, .hero__copy { transition: none; animation: none; }
}

/* ============================================================
   13. ŠONINIAI SKYDELIAI — slapukai (kairėje), prieinamumas (dešinėje)
   ============================================================ */
.dock { position: fixed; bottom: 0; z-index: 150; max-width: min(370px, calc(100vw - 24px)); }
.dock--left { left: 0; }
.dock--right { right: 0; }
.dock__panel {
  background: var(--panel); border: 1px solid var(--rule-strong);
  padding: var(--s-5); margin: var(--s-4);
  max-height: calc(100vh - 32px); overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.dock__title { font-size: var(--t-md); margin-bottom: var(--s-3); }
.dock__text { font-size: var(--t-sm); color: var(--ink-dim); margin-bottom: var(--s-4); }
.dock__list { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.dock__row { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-sm); padding-block: 7px; cursor: pointer; min-height: 44px; }
.dock__row input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--signal); }
.dock__row span { color: var(--ink-dim); }
.dock__row b { color: var(--ink); font-weight: 600; font-family: var(--font-display); }
.dock__group { margin-bottom: var(--s-4); }
.dock__label { display: block; font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600; margin-bottom: var(--s-2); }
.dock__seg { display: flex; border: 1px solid var(--rule-strong); }
.dock__seg button {
  flex: 1; min-height: 44px; cursor: pointer; background: none; border: none;
  color: var(--ink-dim); font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600;
}
.dock__seg button + button { border-left: 1px solid var(--rule-strong); }
.dock__seg button[aria-pressed='true'] { background: var(--signal); color: var(--void); }
.dock__acts { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.dock__acts .btn { flex: 1; text-align: center; min-height: 44px; }
.dock__fine { margin-top: var(--s-4); font-size: var(--t-xs); }

.dock__tab {
  position: fixed; bottom: 20px; z-index: 149;
  width: 48px; height: 48px; cursor: pointer;
  display: grid; place-items: center;
  background: var(--panel); color: var(--ink-dim);
  border: 1px solid var(--rule-strong);
}
.dock__tab:hover { color: var(--signal); border-color: var(--signal-deep); }
.dock__tab--left { left: 20px; }
.dock__tab--right { right: 20px; }
@media (max-width: 520px) {
  .dock { max-width: 100vw; left: 0; right: 0; }
  .dock__panel { margin: var(--s-2); }
  .dock__tab { bottom: 12px; }
  .dock__tab--left { left: 12px; }
  .dock__tab--right { right: 12px; }
}

/* ============================================================
   14. PRIEINAMUMO BŪSENOS
   Nuostatos taikomos <html> atributais, tad veikia visam puslapiui
   ir neprikauso nuo komponento.
   ============================================================ */
:root[data-a11y-size='l']  { font-size: 125%; }
:root[data-a11y-size='xl'] { font-size: 150%; }

:root[data-a11y-contrast='on'] {
  --ink: #FFFFFF;
  --ink-dim: #D6D9E0;     /* 12:1 ant --void */
  --signal: #7FC6FF;
  --rule: #454C62;
  --rule-strong: #6A7288;
  --panel: #05070C;
  --panel-2: #0D111B;
}
:root[data-a11y-links='on'] a:not(.btn):not(.wordmark):not(.door) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  background: rgba(61, 169, 252, 0.12);
  outline: 1px solid var(--signal-deep);
  outline-offset: 1px;
}
:root[data-a11y-motion='on'] *,
:root[data-a11y-motion='on'] *::before,
:root[data-a11y-motion='on'] *::after {
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}
:root[data-a11y-spacing='on'] body { line-height: 1.9; letter-spacing: 0.02em; word-spacing: 0.1em; }
:root[data-a11y-spacing='on'] p { margin-bottom: var(--s-5); }

.a11y-ruler {
  position: fixed; left: 0; right: 0; height: 42px; margin-top: -21px;
  border-top: 2px solid var(--signal); border-bottom: 2px solid var(--signal);
  background: rgba(61, 169, 252, 0.10); pointer-events: none; z-index: 140;
}

/* ============================================================
   15. ANTRAŠTĖS IR PORAŠTĖS PAPILDYMAI
   ============================================================ */
.wordmark img { width: 132px; height: auto; display: block; }
.masthead__end { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.masthead__acct {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 500;
  color: var(--ink-dim); text-decoration: none; white-space: nowrap;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.masthead__acct:hover { color: var(--signal); }
.burger { display: none; align-items: center; gap: 9px; }
.burger__box { display: inline-grid; gap: 3px; width: 16px; }
.burger__box span { height: 2px; background: currentColor; display: block; }

.foot__cols { grid-template-columns: 1.5fr repeat(4, 1fr); }
.foot__brand img { width: 150px; height: auto; opacity: 0.85; margin-bottom: var(--s-4); }
.foot__legal { font-size: var(--t-xs); max-width: 70ch; margin: 0; }
.foot__legal-note { display: block; color: var(--ink-dim); margin-top: var(--s-2); }
.foot__made a { font-size: var(--t-xs); }
@media (max-width: 1000px) { .foot__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__cols { grid-template-columns: 1fr; } }

/* ============================================================
   16. KLAIDŲ EKRANAS
   ============================================================ */
.gone { min-height: 72vh; display: grid; place-items: center; text-align: center; padding-block: var(--s-9); }
.gone__in { max-width: 560px; }
.gone__code {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600;
  color: var(--signal); margin-bottom: var(--s-5);
}
.gone h1 { font-size: var(--t-xl); margin-bottom: var(--s-5); }
.gone p { color: var(--ink-dim); margin-inline: auto; }
.gone__acts { margin-top: var(--s-7); display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
/* Tuščia scena: mikrofonas ant stovo, muzikantų nėra. */
.gone__stage { margin: 0 auto var(--s-6); width: 148px; color: var(--rule-strong); }

/* ============================================================
   17. FORMOS ATSAKAS IR PRANEŠIMAI
   ============================================================ */
.flash { border-left: 2px solid var(--signal); background: var(--panel); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); font-size: var(--t-sm); }
.flash--error { border-left-color: #FF6B6B; }
.field__err { color: #FF9A9A; font-size: var(--t-xs); }
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: #FF6B6B; }

/* FAQ — matomas turinys, iš kurio imama FAQPage schema. */
.faq { border-top: 1px solid var(--rule); }
.faq__q { font-family: var(--font-display); font-size: var(--t-base); font-weight: 600; margin: 0; padding-top: var(--s-5); }
.faq__a { color: var(--ink-dim); font-size: var(--t-sm); padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule); }
.faq__a p:last-child { margin-bottom: 0; }

/* Užsakymo formos kategorijų pasirinkimas. Radijo mygtukai atrodo kaip
   žymos, bet lieka radijo mygtukais — klaviatūra ir ekrano skaitytuvas
   elgiasi taip, kaip lankytojas tikisi. */
.form--wide { max-width: 860px; }
.form fieldset { border: none; margin: 0; padding: 0; }
.form legend { font-family: var(--font-display); font-size: var(--t-sm); font-weight: 500; padding: 0; margin-bottom: var(--s-3); }
.choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: block; padding: 10px 16px; min-height: 44px; line-height: 24px;
  border: 1px solid var(--rule-strong); color: var(--ink-dim);
  font-family: var(--font-display); font-size: var(--t-sm);
  transition: color 160ms var(--ease), border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.choice input:checked + span { border-color: var(--signal); color: var(--void); background: var(--signal); }
.choice input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 3px; }
.choice:hover span { color: var(--ink); }
.form .grid { gap: var(--s-5); }
@media (max-width: 640px) { .form .grid--2 { grid-template-columns: 1fr; } }

/* Atlikėjų sąrašas. Vardas yra pagrindinis dalykas, todėl jis didelis;
   žanrai — smulkios žymos, nes jie tikslina, o ne pristato. */
.roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.act { background: var(--void); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.band--raised .act { background: var(--panel); }
.act__photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--panel-2); }
.act__name { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.act__genres { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.act__genres span { font-family: var(--font-display); font-size: 11px; color: var(--signal); border: 1px solid var(--signal-deep); padding: 2px 8px; }
.act__line { color: var(--ink); font-size: var(--t-sm); margin: 0; }
.act__bio { color: var(--ink-dim); font-size: var(--t-sm); }
.act__bio p { margin-bottom: var(--s-3); }
.act__links { display: flex; gap: var(--s-4); margin: auto 0 0; padding-top: var(--s-3); font-family: var(--font-display); font-size: var(--t-xs); }


/* Medijos autorystė. Tyli, bet pasiekiama: ji nekonkuruoja su turiniu,
   tačiau ir nėra paslėpta taip, kad jos nebūtų galima perskaityti. */
.hero__credit { position: absolute; right: var(--gutter); bottom: 10px; margin: 0; z-index: 2; }
.hero__credit-i { font-family: var(--font-display); font-size: 11px; color: var(--ink-dim); opacity: .75; }
.hero__credit-i a { color: inherit; text-decoration: none; }
.hero__credit-i a:hover { color: var(--signal); text-decoration: underline; }
.media-credit { font-family: var(--font-display); font-size: 11px; color: var(--ink-dim); margin-top: var(--s-2); }
@media (max-width: 760px) {
  .hero__credit { position: static; text-align: right; padding-top: var(--s-3); }
}

/* ============================================================
   18. HERO BE VIDEO
   Kol fono medijos nėra, hero negali būti 84vh juoda tuštuma su
   tekstu apačioje. Šitas variantas yra suprojektuotas blokas:
   aukštis pagal turinį, o tilto lankas tampa struktūriniu elementu,
   perkertančiu visą plotį, ne smulkia dekoracija kampe.
   ============================================================ */
.hero--plain {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--s-8), 9vw, var(--s-10)) clamp(var(--s-7), 6vw, var(--s-9));
  text-align: left;
  border-bottom: 1px solid var(--rule);
  /* Signalas, sklindantis iš kairės — tos pačios krypties kaip tarpatramis. */
  background:
    radial-gradient(120% 90% at 12% 105%, rgba(61, 169, 252, 0.13), transparent 62%),
    radial-gradient(70% 60% at 88% 0%, rgba(138, 92, 246, 0.07), transparent 70%),
    var(--void);
}

.hero--plain .hero__in { position: relative; z-index: 1; }
.hero--plain .hero__title,
.hero--plain .hero__lead,
.hero--plain .hero__kicker { margin-inline: 0; }
.hero--plain .hero__title { max-width: 15ch; }
.hero--plain .hero__lead { max-width: 46ch; }
.hero--plain .hero__acts { justify-content: flex-start; margin-top: var(--s-6); }

/* Lankas nebe smulkmena: jis perkerta visą turinio plotį ir laiko
   du inkarus — Vilnių ir pasaulinę sklaidą. Tai vienintelė vieta
   svetainėje, kur identiteto motyvas kalba garsiai. */
.hero--plain .hero__span {
  max-width: none;
  margin: clamp(var(--s-7), 7vw, var(--s-9)) 0 0;
}
.hero--plain .hero__span svg { width: 100%; height: auto; }
.hero--plain .arc-label { font-size: 13px; fill: var(--ink-dim); }

/* Skaidrių valdikliai be medijos: karuselė vis tiek sukasi tarp
   penkių žinučių, tad taškai lieka, o „groti“ mygtukas nerodomas —
   stabdyti nėra ko. */
.hero--plain .hero__controls { margin-top: var(--s-7); }
.hero--plain [data-hero-motion] { display: none; }

@media (max-width: 760px) {
  .hero--plain { padding-block: var(--s-7) var(--s-6); }
  .hero--plain .hero__span { margin-top: var(--s-6); }
  .hero--plain .hero__acts .btn { width: auto; }
}

/* ============================================================
   19. VERTIKALUS RITMAS
   96 px tarp kiekvienos sekcijos plačiame ekrane atrodė kaip
   iškritęs turinys. Tarpas dabar auga kartu su ekranu, o ne
   stovi fiksuotas.
   ============================================================ */
.band { padding-block: clamp(var(--s-7), 6.5vw, var(--s-9)); }
.band--tight { padding-block: clamp(var(--s-6), 5vw, var(--s-8)); }
.close { padding-block: clamp(var(--s-7), 6.5vw, var(--s-9)); }
.band__head { margin-bottom: clamp(var(--s-5), 3.5vw, var(--s-7)); }
.frame--aside .frame__grid { padding-block: clamp(var(--s-6), 5vw, var(--s-8)); }

/* Durų glifas buvo per smulkus ir atrodė kaip trūkinėjanti linija. */
.door__glyph { width: 32px; height: 32px; stroke-width: 2.2; }
.door { padding: var(--s-6) var(--s-5); gap: var(--s-4); }

/* ============================================================
   20. FONO MOTYVAI
   Fonai generuojami iš pačios svetainės ženklų (tarpatramis, garso
   banga, vinilo grioveliai) — backend/tools/make_backgrounds.py.
   Jie stovi PO tekstu, tad jų darbas yra netrukdyti: virš paveikslo
   guli gradientas, kuris grąžina kontrastą ten, kur yra žodžiai.
   ============================================================ */
.hero--plain,
.phead--bg {
  position: relative;
  isolation: isolate;
}
.hero--plain::before,
.phead--bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--bg);
  background-size: cover;
  background-position: center 58%;
}
/* Uždanga. Be jos šviesesnė banga pakištų po tekstu pilką dėmę. */
.hero--plain::after,
.phead--bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Uždanga stipri ten, kur guli tekstas (kairėje), ir atsitraukia dešinėje,
     kur motyvas gali būti matomas. Tolygi uždanga arba paslėptų paveikslą,
     arba paliktų tekstą ant margo fono — nei viena, nei kita netinka. */
  background:
    linear-gradient(96deg,
      rgba(11, 14, 23, .95) 0%,
      rgba(11, 14, 23, .80) 34%,
      rgba(11, 14, 23, .46) 66%,
      rgba(11, 14, 23, .28) 100%),
    linear-gradient(to bottom, rgba(11, 14, 23, .70), transparent 26%, rgba(11, 14, 23, .55));
}
.hero--plain { background-color: var(--void); }

.phead--bg {
  padding-block: clamp(var(--s-7), 6vw, var(--s-9)) clamp(var(--s-6), 4.5vw, var(--s-8));
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.phead--bg h1 { max-width: 20ch; }

@media (max-width: 760px) {
  .hero--plain::before { background-position: center; }
  .hero--plain::after {
    background:
      linear-gradient(to bottom, rgba(11, 14, 23, .82), rgba(11, 14, 23, .62) 45%, rgba(11, 14, 23, .88));
  }
}

/* ============================================================
   21. PAVEIKSLĖLIAI KORTELĖSE
   „Trys kryptys“ ir „Šioje skiltyje“ kortelės gaudavo tik tekstą ir
   smulkų glifą. Motyvas kortelės viršuje pasako kryptį anksčiau,
   nei ją perskaitai.
   ============================================================ */
.door { padding: 0; overflow: hidden; }
.door__media {
  display: block;
  aspect-ratio: 16 / 7;
  width: 100%;
  object-fit: cover;
  background: var(--panel-2);
  filter: saturate(.9);
  transition: transform 500ms var(--ease), filter 300ms var(--ease);
}
.door:hover .door__media { transform: scale(1.03); filter: saturate(1.15); }
.door__body-wrap { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.door__glyph { margin-top: calc(var(--s-2) * -1); }

.tile--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tile__media {
  display: block;
  aspect-ratio: 16 / 7;
  width: 100%;
  object-fit: cover;
  background: var(--panel-2);
  transition: transform 500ms var(--ease);
}
a.tile--media:hover .tile__media { transform: scale(1.03); }
.tile__body { padding: var(--s-5); flex: 1; }
.tile__body h3 { margin-bottom: var(--s-2); }
@media (prefers-reduced-motion: reduce) {
  .door__media, .tile__media { transition: none; }
  .door:hover .door__media, a.tile--media:hover .tile__media { transform: none; }
}

/* Fono vaizdo įrašas hero juostoje. Guli po uždanga (z-index -2), tad
   tvarko jį tos pačios taisyklės kaip ir fono paveikslą. */
.hero__bgvideo {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__bgvideo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Kai yra video, statinio fono paveikslo nebereikia — jis lieka tik kaip
   video poster. */
.hero--plain:has(.hero__bgvideo)::before { display: none; }

/* ============================================================
   22. RADIJAS IR GROTUVAI
   ============================================================ */
.stations { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.station { background: var(--void); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.band--raised .station { background: var(--panel); }
.station__name { font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; margin: 0; }
.station__genres { font-family: var(--font-display); font-size: var(--t-xs); color: var(--ink-dim); margin: var(--s-1) 0 0; }
.station__now {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-sm); color: var(--ink-dim); margin: 0;
  min-height: 2.6em; /* vieta dviem eilutėms — kad pavadinimas nešokdintų mygtuko */
}
.station__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--rule-strong); }
.station[data-playing='true'] .station__dot { background: var(--signal); animation: pulse 2s ease-in-out infinite; }
.station[data-playing='true'] .station__name { color: var(--signal); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .station__dot { animation: none !important; } }

.station__acts { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: auto; }
.station__play { min-width: 110px; }
.station__vol { display: flex; align-items: center; flex: 1; min-width: 90px; }
.station__vol input { width: 100%; accent-color: var(--signal); min-height: 44px; cursor: pointer; }
.station__site { font-family: var(--font-display); font-size: var(--t-xs); }

.players { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-5); }
.player { border: 1px solid var(--rule); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.band--raised .player { background: var(--panel-2); border-color: transparent; }
.player__name { font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; margin: 0; }
.player__links { display: flex; gap: var(--s-4); margin: auto 0 0; padding-top: var(--s-2); font-family: var(--font-display); font-size: var(--t-xs); }

/* Išorinės medijos vieta. Kol grotuvas neįkeltas, čia stovi paaiškinimas ir
   mygtukas — ne tuščias plotas ir ne staigmena. */
.embed { min-height: 150px; }
.embed__ask {
  border: 1px dashed var(--rule-strong); padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start;
}
.embed__ask p { font-size: var(--t-sm); color: var(--ink-dim); margin: 0; }
.embed__out { font-family: var(--font-display); font-size: var(--t-xs); }
.embed iframe { width: 100%; border: 0; display: block; background: var(--panel); }

/* Judantis fonas vidinių puslapių antraštėje. Guli po ta pačia uždanga,
   kaip ir statinis motyvas, tad tekstas lieka įskaitomas abiem atvejais. */
.phead__video { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.phead__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Su video statinio fono paveikslo nebereikia — jis lieka kaip poster. */
.phead--bg:has(.phead__video)::before { display: none; }
.phead__credit {
  position: absolute; right: var(--gutter); bottom: 8px; margin: 0; z-index: 1;
  font-family: var(--font-display); font-size: 11px; color: var(--ink-dim); opacity: .7;
}
@media (max-width: 760px) { .phead__credit { position: static; text-align: right; padding: var(--s-3) var(--gutter) 0; } }

/* ============================================================
   23. KVIETIMAS REGISTRUOTIS (po prisijungimo)
   ============================================================ */
.casting {
  position: fixed; inset: 0; z-index: 180;
  display: grid; place-items: center; padding: var(--s-4);
  background: rgba(5, 7, 12, .72);
  backdrop-filter: blur(3px);
}
.casting[hidden] { display: none; }
.casting__box {
  position: relative; max-width: 520px; width: 100%;
  background: var(--panel); border: 1px solid var(--rule-strong);
  padding: clamp(var(--s-6), 5vw, var(--s-8));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.casting__x {
  position: absolute; top: 8px; right: 8px;
  width: 44px; height: 44px; cursor: pointer;
  background: none; border: none; color: var(--ink-dim);
  font-size: 26px; line-height: 1;
}
.casting__x:hover { color: var(--ink); }
.casting__kicker { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600; color: var(--signal); margin: 0 0 var(--s-3); }
.casting__h { font-size: var(--t-lg); margin-bottom: var(--s-4); max-width: 18ch; }
.casting__d { color: var(--ink-dim); font-size: var(--t-sm); margin-bottom: var(--s-6); }
.casting__acts { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.casting__acts .btn { flex: 1; text-align: center; min-width: 150px; }

.form__h { font-size: var(--t-md); margin: var(--s-7) 0 var(--s-2); }
.form__h:first-of-type { margin-top: 0; }
.form input[type='file'] {
  padding: 9px 11px; background: var(--panel); border: 1px dashed var(--rule-strong);
  font-family: var(--font-display); font-size: var(--t-sm);
}

/* ============================================================
   24. NAUJIENŲ SKILTIS
   Dvi pagrindinės greta, po jomis šešios mažos vertikaliai,
   dešinėje — penkios atsitiktinės.
   ============================================================ */
.newsroom { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1000px) {
  .newsroom { grid-template-columns: minmax(0, 1fr) 280px; }
  .newsroom__aside { position: sticky; top: 92px; }
}

.post-lead { display: grid; gap: var(--s-5); margin-bottom: var(--s-7); }
@media (min-width: 700px) { .post-lead { grid-template-columns: 1fr 1fr; } }

.post { border: 1px solid var(--rule); background: var(--void); display: flex; flex-direction: column; }
.band--raised .post { background: var(--panel); }
.post__media { display: block; overflow: hidden; background: var(--panel-2); }
.post__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform 500ms var(--ease); }
.post:hover .post__media img { transform: scale(1.03); }
.post__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.post__meta { font-family: var(--font-display); font-size: var(--t-xs); color: var(--ink-dim); margin: 0; }
.post__title { font-size: var(--t-md); margin: 0; }
.post__title a { color: var(--ink); text-decoration: none; }
.post__title a:hover { color: var(--signal); }
.post__excerpt { color: var(--ink-dim); font-size: var(--t-sm); margin: 0; }
.post__source {
  font-family: var(--font-display); font-size: var(--t-xs); color: var(--ink-dim);
  margin: auto 0 0; padding-top: var(--s-3); border-top: 1px solid var(--rule);
}
.post__credit { display: block; margin-top: 2px; opacity: .75; }

.post--big .post__title { font-size: var(--t-lg); }
.post--big .post__media img { aspect-ratio: 3 / 2; }

/* Šešios mažos — horizontalios juostelės, viena po kita. */
.post-list { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.post-list .post { border: none; flex-direction: row; }
.post-list .post__media { flex: none; width: 200px; }
.post-list .post__media img { aspect-ratio: 4 / 3; height: 100%; }
@media (max-width: 620px) {
  .post-list .post { flex-direction: column; }
  .post-list .post__media { width: 100%; }
  .post-list .post__media img { aspect-ratio: 16 / 9; }
}

.newsroom__aside-h { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600; margin-bottom: var(--s-4); }
.post-mini { list-style: none; margin: 0; padding: 0; }
.post-mini li { border-top: 1px solid var(--rule); }
.post-mini li:last-child { border-bottom: 1px solid var(--rule); }
.post-mini a { display: flex; gap: var(--s-3); padding: var(--s-3) 0; text-decoration: none; align-items: flex-start; }
.post-mini img { width: 74px; flex: none; aspect-ratio: 4 / 3; object-fit: cover; background: var(--panel-2); }
.post-mini b { display: block; font-family: var(--font-display); font-size: var(--t-sm); font-weight: 500; color: var(--ink); line-height: 1.3; }
.post-mini a:hover b { color: var(--signal); }
.post-mini time { display: block; font-size: var(--t-xs); color: var(--ink-dim); margin-top: 4px; }

.pager { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-7); flex-wrap: wrap; }
.pager__at { font-family: var(--font-display); font-size: var(--t-sm); color: var(--ink-dim); }

@media (prefers-reduced-motion: reduce) {
  .post__media img, .post:hover .post__media img { transition: none; transform: none; }
}

/* Du biurai poraštėje ir CYBORA ženklas. */
.foot__office { margin-bottom: var(--s-4); }
.foot__office b { font-family: var(--font-display); color: var(--ink); font-size: var(--t-xs); font-weight: 600; }
.foot__sep { color: var(--rule-strong); margin-inline: var(--s-3); }
.foot__guard { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.foot__guard img { width: 18px; height: 18px; object-fit: contain; opacity: .8; }
.foot__guard:hover img { opacity: 1; }
.foot__made { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }


/* ============================================================
   25. LEIDINIAI
   Viršelis yra kvadratas — tokia yra apipavidalinimo forma, ir
   jos keisti nereikia. Peržiūra groja čia pat, visas kūrinys
   atidaromas Spotify.
   ============================================================ */
.rel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s-4);
  margin-block: var(--s-3);
}
.rel__i { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rel__art { display: block; overflow: hidden; background: var(--panel-2); }
.rel__art img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform 400ms var(--ease), opacity 200ms var(--ease); }
.rel__art:hover img { transform: scale(1.04); }
.rel__blank { display: block; aspect-ratio: 1; background: var(--panel-2); }
.rel__t { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 500; margin: 0; line-height: 1.3; }
.rel__t a { color: var(--ink); text-decoration: none; }
.rel__t a:hover { color: var(--signal); }
.rel__m { margin: 0; font-size: 11px; color: var(--ink-dim); display: flex; flex-wrap: wrap; gap: 6px; }
.rel__p { width: 100%; height: 32px; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .rel__art img, .rel__art:hover img { transition: none; transform: none; }
}

/* Dviejų veiksnių patvirtinimas. */
.mfa { max-width: 620px; }
.mfa__qr { display: block; margin: var(--s-4) 0; background: #fff; padding: 10px; }
.mfa__secret {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--t-base);
  letter-spacing: 0.1em; background: var(--panel); border: 1px solid var(--rule-strong);
  padding: 8px 12px; display: inline-block; user-select: all; word-break: break-all;
}
.mfa__input {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 1.4rem !important; letter-spacing: 0.35em; text-align: center;
}
.mfa__codes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3); list-style: none; margin: var(--s-5) 0; padding: 0;
}
.mfa__codes code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--t-base);
  background: var(--panel); border: 1px solid var(--rule-strong);
  padding: 10px 12px; display: block; text-align: center; user-select: all;
}
/* Turnstile valdiklis tamsiame fone. */
.cf-turnstile { margin-block: var(--s-2); min-height: 65px; }