* { box-sizing: border-box; }

html { background: var(--bv-canvas); }

body {
  margin: var(--bv-s-0);
  padding: var(--bv-s-12) var(--bv-s-5);
  background: var(--bv-canvas);
  color: var(--bv-ink-2);
  font-family: var(--bv-font-sans);
  font-size: var(--bv-fs-body);
  line-height: var(--bv-lh-body);
}

.container {
  width: var(--bv-full);
  max-width: var(--bv-measure);
  margin: var(--bv-s-0) auto;
}

.back {
  display: inline-flex;
  align-items: center;
  min-height: var(--bv-tap);
  margin-bottom: var(--bv-s-6);
  color: var(--bv-coral-ink);
  font-size: var(--bv-fs-eyebrow);
  font-weight: var(--bv-fw-semibold);
  letter-spacing: var(--bv-ls-eyebrow);
  text-decoration: none;
  text-transform: uppercase;
}

h1 {
  margin: var(--bv-s-0) var(--bv-s-0) var(--bv-s-2);
  color: var(--bv-ink);
  font-family: var(--bv-font-serif);
  font-size: var(--bv-fs-h1);
  font-weight: var(--bv-fw-regular);
  line-height: var(--bv-lh-title);
  letter-spacing: var(--bv-ls-title);
}

h2 {
  margin: var(--bv-s-10) var(--bv-s-0) var(--bv-s-3);
  padding-top: var(--bv-s-4);
  border-top: var(--bv-bw) solid var(--bv-line);
  color: var(--bv-ink);
  font-family: var(--bv-font-serif);
  font-size: var(--bv-fs-h4);
  font-weight: var(--bv-fw-regular);
  line-height: var(--bv-lh-snug);
}

p { margin: var(--bv-s-0) var(--bv-s-0) var(--bv-s-3); }

ul {
  margin: var(--bv-s-3) var(--bv-s-0) var(--bv-s-3) var(--bv-s-6);
  padding: var(--bv-s-0);
}

li { margin-bottom: var(--bv-s-2); }

a { color: var(--bv-coral-ink); text-underline-offset: var(--bv-s-1); }

a:focus-visible,
.card:focus-visible {
  outline: var(--bv-bw-focus) solid var(--bv-focus);
  outline-offset: var(--bv-s-1);
}

.subtitle {
  margin-bottom: var(--bv-s-10);
  color: var(--bv-ink-3);
  font-size: var(--bv-fs-meta);
}

.notice,
.draft-note {
  margin: var(--bv-s-5) var(--bv-s-0) var(--bv-s-8);
  padding: var(--bv-s-4) var(--bv-s-5);
  border: var(--bv-bw) solid var(--bv-line-strong);
  border-radius: var(--bv-r-sm);
  background: var(--bv-surface-sunk);
  color: var(--bv-ink-2);
  font-size: var(--bv-fs-body-sm);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(var(--bv-s-0), var(--bv-col-text)));
  gap: var(--bv-s-4);
}

.card {
  display: block;
  min-height: var(--bv-tap);
  padding: var(--bv-s-6) var(--bv-s-5);
  border: var(--bv-bw) solid var(--bv-line-strong);
  border-radius: var(--bv-r-sm);
  background: var(--bv-surface);
  color: var(--bv-ink-2);
  text-decoration: none;
  transition: border-color var(--bv-dur-fast) var(--bv-ease), transform var(--bv-dur-fast) var(--bv-ease);
}

.card:hover { border-color: var(--bv-ink); transform: translateY(var(--bv-lift)); }
.card-title { margin-bottom: var(--bv-s-2); color: var(--bv-ink); font-family: var(--bv-font-serif); font-size: var(--bv-fs-h4); }
.card-desc { color: var(--bv-ink-3); font-size: var(--bv-fs-body-sm); line-height: var(--bv-lh-body); }
.card.soon { opacity: var(--bv-op-hover); cursor: default; pointer-events: none; }
.card.soon .card-title::after { content: ' · in preparazione'; color: var(--bv-ink-3); font-family: var(--bv-font-sans); font-size: var(--bv-fs-eyebrow-sm); letter-spacing: var(--bv-ls-eyebrow); text-transform: uppercase; }

.field {
  display: grid;
  grid-template-columns: minmax(var(--bv-s-0), var(--bv-col-text)) minmax(var(--bv-s-0), var(--bv-col-text));
  gap: var(--bv-s-4);
  padding: var(--bv-s-4) var(--bv-s-0);
  border-bottom: var(--bv-bw) solid var(--bv-line);
}

.field .k { color: var(--bv-ink-3); font-size: var(--bv-fs-eyebrow-sm); font-weight: var(--bv-fw-semibold); letter-spacing: var(--bv-ls-eyebrow); text-transform: uppercase; }
.field .v { color: var(--bv-ink); text-align: right; }
.pending { color: var(--bv-ink-3); font-style: italic; }

.footer {
  margin-top: var(--bv-s-12);
  padding-top: var(--bv-s-5);
  border-top: var(--bv-bw) solid var(--bv-line);
  color: var(--bv-ink-3);
  font-size: var(--bv-fs-meta);
}

@media (max-width: 600px) {
  body { padding-top: var(--bv-s-8); }
  h1 { font-size: var(--bv-fs-h2); }
  .grid { grid-template-columns: var(--bv-col-text); }
  .field { grid-template-columns: var(--bv-col-text); gap: var(--bv-s-1); }
  .field .v { text-align: left; }
}