/* ---------------------------------------------------------------
   arbitas.lt/straipsniai - skaitymo puslapiai.

   Ta pati paletė ir tipografija kaip saknyje ir /kainos (DM Serif
   Display + Instrument Sans is ../../assets/fonts.css), bet BE
   judancios sviesos rigo.

   Priezastis ta pati kaip /kainos: cia zmogus skaito teksta, o ne
   ziuri i darba. Rigas kainuoja ~50ms p90 telefone (matuota
   2026-08-06) ir nieko neprideda puslapiui, kuri zmogus atsidaro is
   Google, kad rastu atsakyma.

   SVARBU: jokiu transition savybems, isvestoms is --lc. Sio failo
   rigas neuzkrauna, tad --lc cia is viso nera, bet taisykle galioja
   visam projektui - zr. README.
   --------------------------------------------------------------- */

:root{
  --void:#08090c;
  --slate:#11131a;
  --porcelain:#f2f0ec;
  --ash:#8a8f99;
  --edge:rgba(242,240,236,.13);
  --amber:#c95a2e;
  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --wrap:1120px;
  --prose:68ch;
  --gut:clamp(20px,4vw,34px);
}

*{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(--porcelain);
  font:17px/1.72 var(--sans);
  overflow-wrap:break-word;
}
a{color:var(--porcelain)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.prose{max-width:var(--prose)}

.skip{position:absolute;left:-9999px;top:0;background:var(--porcelain);color:var(--void);padding:10px 16px;z-index:100}
.skip:focus{left:0}

/* ---------- head ---------- */
.head{border-bottom:1px solid var(--edge);position:sticky;top:0;background:rgba(8,9,12,.92);backdrop-filter:blur(8px);z-index:30}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:15px;padding-bottom:15px}
.brand{font-family:var(--sans);font-weight:700;letter-spacing:.16em;font-size:14px;text-decoration:none}
.head-mail{font-size:14px;color:var(--ash);text-decoration:none}
.head-mail:hover{color:var(--porcelain)}

/* ---------- hero ---------- */
.hero{padding:58px 0 40px;border-bottom:1px solid var(--edge)}
.eyebrow{margin:0 0 18px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);font-weight:650}
.hero h1{
  margin:0 0 22px;font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,6.6vw,58px);line-height:1.07;
  /* nosinems ir varnelems reikia vietos abiejuose galuose */
  padding:.1em 0;max-width:20ch;
}
.lede{margin:0;font-size:18.5px;color:var(--ash);max-width:56ch}
.meta{margin:26px 0 0;font-size:13.5px;color:var(--ash);letter-spacing:.02em}
.meta b{color:var(--porcelain);font-weight:600}

/* ---------- turinys (TOC) ---------- */
.toc{padding:30px 0;border-bottom:1px solid var(--edge);background:var(--slate)}
.toc h2{margin:0 0 14px;font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);font-weight:650}
.toc ol{margin:0;padding-left:1.3em;display:grid;gap:9px;max-width:var(--prose);color:var(--ash);font-size:15.5px}
.toc a{color:var(--porcelain);text-decoration:none;border-bottom:1px solid var(--edge)}
.toc a:hover{border-bottom-color:var(--amber)}

/* ---------- sections ---------- */
.sec{padding:56px 0;border-bottom:1px solid var(--edge)}
.sec-alt{background:var(--slate)}
.sec h2{
  margin:0 0 8px;font-family:var(--serif);font-weight:400;
  font-size:clamp(25px,4.6vw,38px);line-height:1.16;padding:.06em 0;max-width:24ch;
  scroll-margin-top:74px;
}
.sec h3{margin:34px 0 10px;font-size:17.5px;font-weight:650;letter-spacing:.01em}
.sec p{margin:0 0 18px;max-width:var(--prose)}
.sec p:last-child{margin-bottom:0}
.num{display:block;margin:0 0 12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);font-weight:650}
.sec strong{font-weight:650}

/* ---------- privalomu daiktu sarasas ---------- */
.ticks{list-style:none;margin:22px 0;padding:0;display:grid;gap:13px;max-width:var(--prose)}
.ticks li{position:relative;padding-left:27px}
.ticks li::before{
  content:"";position:absolute;left:0;top:10px;width:9px;height:5px;
  border-left:1.5px solid var(--amber);border-bottom:1.5px solid var(--amber);
  transform:rotate(-45deg);
}
.ticks b{font-weight:650}
.ticks span{color:var(--ash)}

/* ---------- issanaudojamas blokas: „ka daryti" ---------- */
.box{
  border:1px solid var(--edge);border-left:2px solid var(--amber);
  background:rgba(201,90,46,.05);
  padding:24px 26px;margin:26px 0;max-width:var(--prose);
}
.box p{margin:0 0 12px}
.box p:last-child{margin-bottom:0}
.box-t{
  display:block;margin:0 0 12px;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);font-weight:650;
}

/* neutralus blokas - faktas be raginimo veikti */
.box-plain{border-left-color:var(--edge);background:rgba(242,240,236,.03)}
.box-plain .box-t{color:var(--ash)}

/* ---------- saltinis su data ---------- */
.src{
  margin:18px 0 0;font-size:14px;color:var(--ash);max-width:var(--prose);
  padding-left:16px;border-left:1px solid var(--edge);
}
.src a{color:var(--ash)}
.src a:hover{color:var(--porcelain)}

/* ---------- santrauka / checklist ---------- */
.list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0;max-width:var(--prose);border-top:1px solid var(--edge)}
.list li{
  display:flex;gap:16px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--edge);
}
.list .k{flex:0 0 auto;width:26px;font-family:var(--serif);font-size:19px;color:var(--amber);line-height:1}
.list .v b{display:block;font-weight:650;margin-bottom:3px}
.list .v span{color:var(--ash);font-size:15.5px}

/* ---------- pabaigos CTA ---------- */
.end{padding:64px 0}
.end h2{margin:0 0 16px;font-family:var(--serif);font-weight:400;font-size:clamp(26px,5vw,42px);line-height:1.14;padding:.06em 0;max-width:20ch}
.end p{margin:0 0 26px;color:var(--ash);max-width:54ch;font-size:17.5px}
.act{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--amber);color:#0b0b0c;text-decoration:none;
  padding:15px 26px;font-weight:650;font-size:15.5px;letter-spacing:.01em;
  border:1px solid var(--amber);
}
/* opacity, ne spalva: zr. failo virsu */
.act:hover{opacity:.88}
.wire{display:inline-block;margin-left:18px;color:var(--ash);font-size:15px}
.wire:hover{color:var(--porcelain)}

/* ---------- foot ---------- */
.foot{border-top:1px solid var(--edge);padding:28px 0;font-size:14px;color:var(--ash)}
.foot-in{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
.foot a{color:var(--ash);text-decoration:none}
.foot a:hover{color:var(--porcelain)}

/* ---------- straipsniu sarasas (hub) ---------- */
.cards{display:grid;gap:0;max-width:var(--prose);margin-top:8px;border-top:1px solid var(--edge)}
.card{display:block;padding:26px 0;border-bottom:1px solid var(--edge);text-decoration:none}
.card h2{margin:0 0 9px;font-family:var(--serif);font-weight:400;font-size:clamp(21px,3.6vw,29px);line-height:1.2;padding:.04em 0}
.card:hover h2{color:var(--amber)}
.card p{margin:0 0 11px;color:var(--ash);font-size:16px}
.card .when{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}

@media (max-width:640px){
  body{font-size:16.5px}
  .hero{padding:44px 0 34px}
  .sec{padding:44px 0}
  .box{padding:20px 20px}
}