/* Naponos Pharmatrading · institutional one-pager.

   Deliberately built on the Velia design tokens so the two sites read as one
   group, but quieter: no editorial serif, no die-cut rules, no motion. Velia is
   the commercial face and gets the personality; Naponos is the entity behind it
   and should feel like a company register entry that happens to be well set.

   Same 62.5% root trick as the Velia theme, so 1rem is 10px and the token scale
   transfers unchanged. */

/* Self-hosted fonts. One variable file carries both Archivo weights; the two
   declarations map the weights onto it exactly as Google's own CSS does. The
   files are the latin subset, which includes every Italian accented vowel.
   Self-hosted so the page calls no third party at all: see the note in
   index.html and the cookie policy this makes possible. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin.woff2') format('woff2');
}

:root {
  --v-ink: #161616;
  --v-paper: #ffffff;
  --v-ink-soft: #767676;
  /* Secondary ink for text sitting ON the sand ground. --v-ink-soft is 4.54:1
     on paper, which passes, but only 3.99:1 on sand, which does not: small text
     needs 4.5:1. This is the Velia theme's own token for the same problem, same
     value, and it measures 4.68:1 on sand. Anything small and grey on sand uses
     this, not --v-ink-soft. */
  --v-ink-soft-tinted: #6b6b6b;
  --v-line: #e8e6e1;
  --v-wash: #f8f7f4;
  --v-sand: #f3f0ea;
  --v-accent: #7f8f82;

  --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-xl: 2.6rem;
  --v-text-hero: clamp(3.2rem, 6vw, 5.6rem);

  --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(72rem, 100% - var(--v-space-6) * 2); }
/* Between narrow and full: prose that should not run to 112rem, but sections
   that would look starved at 72rem. */
.wrap.wide-narrow { width: min(88rem, 100% - var(--v-space-6) * 2); }

/* Skip link: visible only on focus, which is the one time it matters. */
.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-5);
}
.site__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-space-4) var(--v-space-6);
  align-items: baseline;
  justify-content: space-between;
}
.lockup {
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--v-text-s);
}
.lockup__sub {
  display: block;
  font-family: var(--v-font-mono);
  font-size: var(--v-text-xs);
  letter-spacing: 0.14em;
  color: var(--v-ink-soft);
  text-transform: uppercase;
}
.site nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-space-5);
}
.site nav a,
.link {
  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,
.link:hover, .link:focus-visible {
  color: var(--v-ink);
  border-bottom-color: var(--v-line);
}
.link { font-size: var(--v-text-base); }

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

/* The page had no call to action of any kind before this. Every comparable in
   the reference set carries one in the header and one in the hero, and a
   company page a buyer cannot act on is a brochure. */
.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-radius: 0.4rem;
  font-size: var(--v-text-s);
  line-height: 1;
  border: 1px solid var(--v-ink);
  transition: background 160ms ease, color 160ms ease;
}
.btn:hover, .btn:focus-visible {
  background: transparent;
  color: var(--v-ink);
}
.btn--small {
  padding: var(--v-space-3) var(--v-space-4);
  font-size: var(--v-text-xs);
  letter-spacing: 0.04em;
}
/* The header nav styles bare <a>; the CTA is a button and opts out. */
.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); }

/* ---------- image slots ---------- */

/* Empty on purpose. The slot reserves the space and states what it is, so the
   layout is settled now and a photograph drops in without the page moving.
   See README: what belongs here is place or product, never production. */
.slot {
  background: var(--v-sand);
  border: 1px solid var(--v-line);
  border-radius: 0.4rem;
  display: grid;
  place-items: center;
  min-height: 24rem;
}
.slot--hero { aspect-ratio: 4 / 3; }
.slot__label {
  font-family: var(--v-font-mono);
  font-size: var(--v-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-ink-soft-tinted);
  text-align: center;
  line-height: 1.8;
}

/* ---------- pending marker ---------- */

/* Same idea as the Velia theme's DA CONFERMARE flag: a value nobody has given
   us renders as a visible gap rather than as silence or as an invention. */
.pending {
  font-family: var(--v-font-mono);
  font-size: var(--v-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-ink-soft-tinted);
  background: var(--v-sand);
  border: 1px dashed var(--v-line);
  border-radius: 0.3rem;
  padding: 0.3rem 0.8rem;
}

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

.hero { padding-block: var(--v-space-9) var(--v-space-8); }
.hero__inner {
  display: grid;
  gap: var(--v-space-7);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.15fr 0.85fr; gap: var(--v-space-8); }
}
.hero__actions { margin: var(--v-space-6) 0 0; }
.hero h1 {
  font-size: var(--v-text-hero);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0 0 var(--v-space-6);
  max-width: 18ch;
}
.lede {
  font-size: var(--v-text-m);
  max-width: 58ch;
  margin: 0 0 var(--v-space-4);
}
/* The "non produciamo" line is the most important sentence on the page and the
   easiest to skim past, so it is set apart rather than run into the paragraph
   above it. Naponos distributes; production sits with the partner workshops. */
.lede--quiet {
  color: var(--v-ink-soft);
  border-left: 2px solid var(--v-accent);
  padding-left: var(--v-space-4);
}

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

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

h2 {
  font-size: var(--v-text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 var(--v-space-6);
}
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: 62ch; }
p:last-child { margin-bottom: 0; }
.quiet { color: var(--v-ink-soft); font-size: var(--v-text-s); }

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

.brand {
  border: 1px solid var(--v-line);
  border-radius: 0.4rem;
  padding: var(--v-space-6);
}

/* ---------- the two arms ---------- */

/* Two columns that are genuinely two things, not a grid of equal cards. The
   numeral is the only decoration: it says "there are two of these" at a glance,
   which is the one structural fact about this company a visitor should leave
   with. */
.arms {
  display: grid;
  gap: var(--v-space-8);
  margin-top: var(--v-space-7);
}
@media (min-width: 860px) {
  .arms { grid-template-columns: 1fr 1fr; gap: var(--v-space-9); }
}
.arm { border-top: 2px solid var(--v-ink); padding-top: var(--v-space-4); }
.arm__index {
  font-family: var(--v-font-mono);
  font-size: var(--v-text-xs);
  letter-spacing: 0.14em;
  color: var(--v-ink-soft);
  margin: 0 0 var(--v-space-3);
}
.arm h3 { font-size: var(--v-text-xl); letter-spacing: -0.01em; }

/* What we handle. A plain list of the five families, because until now the page
   never said in one place what Naponos actually deals in. */
.tags {
  list-style: none;
  margin: var(--v-space-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-space-2);
}
.tags li {
  font-family: var(--v-font-mono);
  font-size: var(--v-text-xs);
  letter-spacing: 0.04em;
  color: var(--v-ink-soft);
  border: 1px solid var(--v-line);
  border-radius: 2rem;
  padding: 0.5rem 1.2rem;
}

/* The four consulenza pillars, as a definition list because that is what they
   are: a term and what it means. */
.pillars { margin: var(--v-space-5) 0 0; }
.pillars > div { padding-block: var(--v-space-4); border-bottom: 1px solid var(--v-line); }
.pillars > div:last-child { border-bottom: 0; padding-bottom: 0; }
.pillars dt {
  font-weight: 500;
  margin-bottom: var(--v-space-2);
}
.pillars dd {
  margin: 0;
  color: var(--v-ink-soft);
  font-size: var(--v-text-s);
  max-width: 54ch;
}

/* ---------- team ---------- */

.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--v-space-7) var(--v-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The photo slot holds its shape before there is a photograph, so the section
   is laid out now and the images drop in later without the grid moving. Drop
   an <img> inside and it takes the same box; the initials sit behind it. */
.person__photo {
  aspect-ratio: 4 / 5;
  background: var(--v-sand);
  border: 1px solid var(--v-line);
  border-radius: 0.4rem;
  margin-bottom: var(--v-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.person__photo span {
  font-family: var(--v-font-mono);
  font-size: var(--v-text-m);
  letter-spacing: 0.12em;
  color: var(--v-ink-soft-tinted);
}
.person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.person h3 { margin-bottom: 0; }

/* ---------- company data ---------- */

.data { margin: 0; }
.data > div {
  display: grid;
  grid-template-columns: minmax(16rem, 24rem) 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);
}
.data dd { margin: 0; }
.data--contact { margin-bottom: var(--v-space-8); }
.data__heading {
  font-family: var(--v-font-mono);
  font-size: var(--v-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-ink-soft);
  font-weight: 400;
  margin: 0 0 var(--v-space-3);
}

@media (max-width: 40rem) {
  .data > div { grid-template-columns: 1fr; gap: var(--v-space-2); }
}

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

.legal h1 {
  font-size: var(--v-text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  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: 62ch;
}
.legal li { margin-bottom: var(--v-space-2); }
.legal a { color: var(--v-ink); }

/* ---------- 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;
  max-width: none;
}

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

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

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