/* ==========================================================================
   TILTO — bazė: reset, tipografija, layout, spaudos faktūros
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--t-paper);
  color: var(--t-ink);
  font-family: var(--t-font-body);
  font-size: var(--t-fs-body);
  line-height: var(--t-lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--t-font-ui);
  font-weight: 700;
  line-height: var(--t-lh-tight);
  letter-spacing: var(--t-ls-tight);
  text-wrap: balance;
}

h1 { font-size: var(--t-fs-h1); }
h2 { font-size: var(--t-fs-h2); }
h3 { font-size: var(--t-fs-h3); font-weight: 600; line-height: var(--t-lh-snug); }

p, ul, ol { margin: 0; }
a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  /* Oranžinis rėmelis ant popieriaus fono duoda tik 2,86:1 — nepasiekia
     WCAG 3:1 neteksto kontrasto. Rėmelį piešiam rašalu (14,7:1), o spaudos
     spalva lieka kaip halo aplink — taip fokusas matomas ir ant tamsių
     paviršių, ir spalvų neskiriantiems žmonėms. */
  outline: 2px solid var(--t-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--t-signal) 55%, transparent);
}

.t-num, td, th { font-variant-numeric: tabular-nums; }

/* --- layout: per visą plotį, 20 px iš šonų --------------------------- */

.t-container {
  width: 100%;
  padding-inline: var(--t-gutter);
}

/* Siauresnis konteineris ilgam tekstui — skaitomumas svarbiau už plotį. */
.t-container--text { max-width: 76ch; margin-inline: auto; }

.t-section { padding-block: var(--t-section-y); }
.t-section--surface { background: var(--t-surface); }
.t-section--bordered { border-top: 1px solid var(--t-line); }

/* --- etiketės ir sekcijų antraštės ------------------------------------
   Sekcijos antraštė sudaryta kaip gaminio specifikacijos eilutė:
   numeris · pavadinimas · plona linija per likusį plotį · nuoroda.       */

.t-label {
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-tag);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--t-ls-label);
  color: var(--t-ink-soft);
}

.t-shead {
  display: flex;
  align-items: center;
  gap: var(--t-s4);
  margin-bottom: var(--t-s6);
}

.t-shead__index {
  font-family: var(--t-font-mono);
  font-size: var(--t-fs-xs);
  color: var(--t-ink-soft);
  padding-top: 4px;
  flex: none;
}

.t-shead h2 {
  text-transform: uppercase;
  letter-spacing: -0.015em;
  flex: none;
  max-width: 60vw;
}

/* Nuoroda nustumiama į dešinę be jokios jungiančios linijos. */
.t-shead__link { flex: none; margin-inline-start: auto; }

.t-shead__note {
  color: var(--t-ink-soft);
  max-width: 56ch;
  margin: calc(var(--t-s5) * -1) 0 var(--t-s6);
  font-size: var(--t-fs-sm);
}

@media (max-width: 700px) {
  .t-shead { flex-wrap: wrap; gap: var(--t-s2) var(--t-s3); }
  .t-shead h2 { max-width: none; }
}

/* --- spaudos faktūros -------------------------------------------------- */

/* Rastro taškas. `color` valdo taško spalvą, todėl veikia bet kuriame fone. */
.t-halftone {
  background-image: var(--t-halftone);
  background-size: var(--t-halftone-size);
}

/* Siūlės punktyras — vietoj įprasto rėmelio. */
.t-stitch-top,
.t-stitch-bottom { position: relative; }

.t-stitch-top::before,
.t-stitch-bottom::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background-image: var(--t-stitch);
  color: var(--t-line-strong);
}

.t-stitch-top::before { top: 0; }
.t-stitch-bottom::after { bottom: 0; }

/* Registracijos kryželis — spaudos formų sutapdinimo ženklas. */
.t-reg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--t-signal);
}

/* --- prieinamumas ------------------------------------------------------- */

.t-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--t-z-toast);
  background: var(--t-ink);
  color: #fff;
  padding: var(--t-s3) var(--t-s4);
}
.t-skip:focus { left: var(--t-s4); top: var(--t-s4); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* --- pasirodymas slenkant ------------------------------------------------ */

.t-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-slow) var(--t-ease-out),
              transform var(--t-slow) var(--t-ease-out);
}
.t-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .t-reveal { opacity: 1; transform: none; }
}