/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, picture { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(a) { color: inherit; }

/* Anchors clear the sticky header. */
:where(section, div)[id] { scroll-margin-top: calc(var(--head-h) + 1.5rem); }

/* ── Fonts ─────────────────────────────────────────────────────────────────
   Self-hosted, so an EU business makes no third-party request to render text.
   Two subsets each: latin-ext carries ė ų į š ž č ū, which is what Lithuanian
   actually needs.

   One deliberate change from Google's own CSS: the combining marks U+0304,
   U+0308 and U+0329 are claimed ONLY by the latin-ext faces. Google lets both
   subsets claim them, which can break a font that decomposes a precomposed
   letter into base + combining mark — if the mark resolves to a different font
   file than its base letter the browser cannot attach the two, and the mark
   lands on the following character ("Pietūs" renders as "Pietuš"). Keep the
   marks in one file only. This bit us with Fraunces; the rule stays.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-latin-ext.woff2") format("woff2-variations");
  font-weight: 200 700; font-display: swap; font-style: normal;
  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;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-latin.woff2") format("woff2-variations");
  font-weight: 200 700; font-display: swap; font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
                 U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2-variations");
  font-weight: 300 700; font-display: swap; font-style: normal;
  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;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2-variations");
  font-weight: 300 700; font-display: swap; font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
                 U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-400-latin-ext.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
  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;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
                 U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-500-latin-ext.woff2") format("woff2");
  font-weight: 500; font-display: swap; font-style: normal;
  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;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500; font-display: swap; font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
                 U+2215, U+FEFF, U+FFFD;
}

/* ── Type ──────────────────────────────────────────────────────────────── */
.h1 {
  font-family: var(--display);
  font-size: var(--t-h1);
  font-weight: 200;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-hero);
  text-transform: uppercase;
  text-wrap: balance;
  /* Lithuanian compounds like DEVYNIASDEŠIMT are long; last-resort break
     rather than let a single word push the layout wider than the screen. */
  overflow-wrap: break-word;
}

.h2 {
  font-family: var(--display);
  font-size: var(--t-h2);
  font-weight: 300;
  line-height: var(--lh-head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
}

.h3 {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}
.on-dark .eyebrow, .band--dark .eyebrow { color: var(--cyan); }

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 48ch;
  text-wrap: pretty;
}
.band--dark .lede { color: var(--foam-2); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--rule-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.9em 1.7em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform 0.18s var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--cyan { --btn-bg: var(--cyan); --btn-fg: var(--abyss); --btn-bd: var(--cyan); }
.btn--cyan:hover { --btn-bg: var(--cyan-2); --btn-bd: var(--cyan-2); box-shadow: 0 10px 30px rgba(63, 169, 214, 0.32); }

.btn--ink { --btn-bg: var(--abyss); --btn-fg: var(--foam); --btn-bd: var(--abyss); }
.btn--ink:hover { --btn-bg: var(--navy); --btn-bd: var(--navy); }

.btn--glass {
  --btn-bg: var(--glass-bg);
  --btn-fg: var(--foam);
  --btn-bd: var(--glass-line);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.btn--glass:hover { --btn-bg: var(--glass-bg-2); --btn-bd: rgba(255,255,255,0.34); }

.btn--outline-dark { --btn-fg: var(--foam); --btn-bd: var(--rule-dark); }
.btn--outline-dark:hover { --btn-bd: var(--cyan); --btn-fg: var(--cyan); }

.btn--sm   { padding: 0.65em 1.25em; font-size: var(--t-xs); }
.btn--full { width: 100%; }

/* Circular arrow affordance, as on the reference sites. */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule-dark);
  background: transparent;
  color: var(--foam);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--cyan); border-color: var(--cyan); color: var(--abyss); }
.icon-btn svg { width: 1.1rem; height: 1.1rem; }

/* ── Focus & skip link ─────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: var(--s-4);
  top: -5rem;
  z-index: 100;
  background: var(--abyss);
  color: var(--foam);
  padding: 0.8rem 1.2rem;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: var(--t-sm);
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: var(--s-3); }

.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}