/* Velia · static institutional landing.

   This is NOT a port of the Shopify theme. It is a deliberately small subset
   built on the same tokens, because the theme is 4.000+ lines that exist to
   serve a shop, and this page exists to say who Velia is and how to reach it
   until the store can serve velialab.it itself.

   Token values are copied from v-tokens.liquid and MUST stay in step with it.
   Same warning as naponos/style.css: a palette change is two edits, here and
   there, or the three surfaces silently diverge. */

/* Self-hosted, like Naponos and for the same reason: Google's CDN would send
   every visitor's IP to a third party, and without it the cookie policy can
   truthfully say this page calls nobody. One variable file carries both
   Archivo weights, latin subset, which covers every Italian accented vowel. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/archivo_n4.dc8d917cc69af0a65ae04d01fd8eeab28a3573c9.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/archivo_n5.272841b6d6b831864f7fecfa55541752bb399511.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibmplexmono_n4.d7299acf9bbb54fdf0e44c1227f98684451f21b6.woff2') format('woff2');
}

:root {
  --v-ink: #161616;
  --v-paper: #ffffff;
  --v-ink-soft: #767676;
  /* Grey on the tinted grounds. #767676 is 4.54:1 on paper and passes, but
     drops below 4.5:1 on wash and sand. Same fix, same values as the theme. */
  --v-ink-soft-tinted: #6b6b6b;
  --v-line: #e8e6e1;
  --v-wash: #f8f7f4;
  --v-sand: #f3f0ea;
  --v-accent: #7f8f82;
  --v-focus: #6f7f72;

  --v-font-system: 'Archivo', system-ui, -apple-system, sans-serif;
  --v-font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --v-text-xs: 1.2rem;
  --v-text-s: 1.4rem;
  --v-text-base: 1.6rem;
  --v-text-m: 1.8rem;
  --v-text-l: 2.2rem;
  --v-text-xl: 2.8rem;
  --v-text-hero: clamp(3.2rem, 6.2vw, 5.8rem);

  --v-space-2: 0.8rem;
  --v-space-3: 1.2rem;
  --v-space-4: 1.6rem;
  --v-space-5: 2.4rem;
  --v-space-6: 3.2rem;
  --v-space-7: 4.8rem;
  --v-space-8: 6.4rem;
  --v-space-9: 9.6rem;
}

html { font-size: 62.5%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--v-paper);
  color: var(--v-ink);
  font-family: var(--v-font-system);
  font-size: var(--v-text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(112rem, 100% - var(--v-space-6) * 2); margin-inline: auto; }
.wrap.narrow { width: min(76rem, 100% - var(--v-space-6) * 2); }

.skip {
  position: absolute; left: -9999px; top: var(--v-space-3);
  background: var(--v-ink); color: var(--v-paper);
  padding: var(--v-space-3) var(--v-space-4); z-index: 10; text-decoration: none;
}
.skip:focus { left: var(--v-space-4); }

/* ---------- header ---------- */

.site { border-bottom: 1px solid var(--v-line); padding-block: var(--v-space-4); }
.site__inner {
  display: flex; flex-wrap: wrap; gap: var(--v-space-4) var(--v-space-6);
  align-items: center; justify-content: space-between;
}
.site__logo { display: block; height: 3.2rem; width: auto; }
.site nav { display: flex; flex-wrap: wrap; gap: var(--v-space-5); align-items: center; }
.site nav a {
  color: var(--v-ink-soft); text-decoration: none; font-size: var(--v-text-s);
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.site nav a:hover, .site nav a:focus-visible { color: var(--v-ink); border-bottom-color: var(--v-line); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block; background: var(--v-ink); color: var(--v-paper);
  text-decoration: none; padding: var(--v-space-4) var(--v-space-6);
  border: 1px solid var(--v-ink); border-radius: 0.4rem;
  font-size: var(--v-text-s); line-height: 1;
  transition: background 160ms ease, color 160ms ease;
}
.btn:hover, .btn:focus-visible { background: transparent; color: var(--v-ink); }
.btn--ghost { background: transparent; color: var(--v-ink); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--v-ink); color: var(--v-paper); }
.btn--small { padding: var(--v-space-3) var(--v-space-4); font-size: var(--v-text-xs); letter-spacing: 0.04em; }
.site nav a.btn { border-bottom: 0; color: var(--v-paper); }
.site nav a.btn:hover, .site nav a.btn:focus-visible { color: var(--v-ink); }

/* ---------- hero ---------- */

.hero { padding-block: var(--v-space-9) var(--v-space-8); background: var(--v-wash); }
.hero h1 {
  font-size: var(--v-text-hero); line-height: 1.03; letter-spacing: -0.025em;
  font-weight: 500; margin: 0 0 var(--v-space-5); max-width: 17ch;
}
.hero__sub { font-size: var(--v-text-m); max-width: 46ch; margin: 0 0 var(--v-space-3); }
.hero__target { color: var(--v-ink-soft-tinted); margin: 0 0 var(--v-space-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--v-space-4); margin: 0 0 var(--v-space-7); }

/* The two client numbers. Mono marks the FIGURE, not the sentence: the same
   rule the theme follows, and it is what lets each number be read as data. */
.trust { font-size: var(--v-text-s); color: var(--v-ink-soft-tinted); max-width: 52ch; margin: 0; }
.num { font-family: var(--v-font-mono); font-weight: 500; font-size: 0.92em; color: var(--v-ink); }

/* ---------- bands ---------- */

.band { padding-block: var(--v-space-8); border-top: 1px solid var(--v-line); }
.band--wash { background: var(--v-wash); }
.band--sand { background: var(--v-sand); }

h2 { font-size: var(--v-text-xl); font-weight: 500; letter-spacing: -0.015em; margin: 0 0 var(--v-space-3); }
h3 { font-size: var(--v-text-m); font-weight: 500; margin: 0 0 var(--v-space-3); }
p { margin: 0 0 var(--v-space-4); max-width: 64ch; }
p:last-child { margin-bottom: 0; }
.lede { font-size: var(--v-text-m); color: var(--v-ink-soft-tinted); max-width: 58ch; margin-bottom: var(--v-space-7); }
.band .lede { color: var(--v-ink-soft); }
.band--wash .lede, .band--sand .lede { color: var(--v-ink-soft-tinted); }
.quiet { color: var(--v-ink-soft); font-size: var(--v-text-s); }
.band--wash .quiet, .band--sand .quiet { color: var(--v-ink-soft-tinted); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: var(--v-space-7) var(--v-space-6); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); }

/* ---------- chi sei ---------- */

.route { border-top: 2px solid var(--v-ink); padding-top: var(--v-space-4); }
.route h3 { font-size: var(--v-text-l); letter-spacing: -0.01em; }
.route p { color: var(--v-ink-soft-tinted); margin: 0; }

/* ---------- families ---------- */

.fams { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--v-space-5); }
.fam { border: 1px solid var(--v-line); border-radius: 1.4rem; background: var(--v-paper); padding: var(--v-space-5) var(--v-space-6); }
.fam h3 { margin-bottom: var(--v-space-2); }
.fam p { color: var(--v-ink-soft); font-size: var(--v-text-s); margin: 0; }

/* ---------- numbered steps ---------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--v-space-6); }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--v-space-6); } }
.steps li { counter-increment: step; border-top: 1px solid var(--v-line); padding-top: var(--v-space-4); }
.steps li::before {
  content: "0" counter(step);
  display: block; font-family: var(--v-font-mono); font-size: var(--v-text-xs);
  letter-spacing: 0.14em; color: var(--v-ink-soft); margin-bottom: var(--v-space-3);
}
.steps h3 { margin-bottom: var(--v-space-2); font-size: var(--v-text-base); }
.steps p { color: var(--v-ink-soft); font-size: var(--v-text-s); margin: 0; }

/* ---------- conformity ---------- */

.conf { font-size: var(--v-text-m); max-width: 62ch; }
.conf strong { font-weight: 500; }

/* ---------- contact ---------- */

.contact { display: grid; gap: var(--v-space-7); }
@media (min-width: 800px) { .contact { grid-template-columns: 1fr 1fr; gap: var(--v-space-9); } }
.data { margin: 0; }
.data > div {
  display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr; gap: var(--v-space-4);
  padding-block: var(--v-space-3); border-bottom: 1px solid var(--v-line);
}
.data > div:last-child { border-bottom: 0; }
.data dt {
  font-family: var(--v-font-mono); font-size: var(--v-text-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--v-ink-soft-tinted);
}
.data dd { margin: 0; }
.data a { color: var(--v-ink); }
@media (max-width: 40rem) { .data > div { grid-template-columns: 1fr; gap: var(--v-space-2); } }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--v-line); padding-block: var(--v-space-6); }
.site-footer p { color: var(--v-ink-soft); font-size: var(--v-text-s); margin: 0 0 var(--v-space-2); max-width: none; }
.site-footer a { color: var(--v-ink-soft); }
.site-footer a:hover { color: var(--v-ink); }

/* ---------- legal pages ---------- */

.legal h1 { font-size: var(--v-text-xl); font-weight: 500; letter-spacing: -0.015em; margin: 0 0 var(--v-space-3); }
.legal .updated {
  font-family: var(--v-font-mono); font-size: var(--v-text-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--v-ink-soft); margin-bottom: var(--v-space-7);
}
.legal h2 { font-size: var(--v-text-m); margin: var(--v-space-7) 0 var(--v-space-3); }
.legal ul { margin: 0 0 var(--v-space-4); padding-left: 2rem; max-width: 64ch; }
.legal li { margin-bottom: var(--v-space-2); }
.legal a { color: var(--v-ink); }

/* ---------- focus, once and globally ---------- */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--v-focus); outline-offset: 3px; border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}