/* Parti comuni del sito: testata, colonna, fascia di chiusura e piede.
   Si carica dopo lo stile di ogni pagina, quindi vince sulle sue regole. */
:root { --paper: #F1EDE4; --soft: #6F685E; --muted: #524C45; --fascia: #14120F; }
@media (prefers-color-scheme: dark) {
  :root { --paper: #191713; --soft: #948C80; --muted: #B5AEA2; --fascia: #1F1B16; }
}

/* ---- sfondo di tutte le pagine: uno per il tema chiaro, uno per lo scuro ---- */
.bg {
  background: var(--paper) url('/brand/sfondo-chiaro.svg') center / cover no-repeat;
  filter: none; -webkit-mask-image: none; mask-image: none;
  position: absolute; inset: 0 0 auto 0; height: 100svh; /* resta nella prima schermata, non dietro ai testi lunghi */
}
body.lettura .bg { opacity: .45; } /* pagine di testo: il marchio non disturba la lettura */
.veil { display: none; }
@media (prefers-color-scheme: dark) { .bg { background-image: url('/brand/sfondo-scuro.svg'); filter: none; } }
@media (max-width: 980px) { .bg { display: none; } }

/* ---- una sola colonna per testata, contenuto e piede ---- */
.wrap, .strip .wrap, footer .wrap {
  width: 100%; max-width: 1400px; margin-inline: auto;
  padding-inline: clamp(16px, 6vw, 96px);
}

/* ---- il contenuto di ogni pagina parte dalla stessa linea del logo ---- */
:root { --margine: clamp(16px, 6vw, 96px); --linea: max(var(--margine), calc((100% - 1400px) / 2 + var(--margine))); }
@media screen {
  body > main:not(.hero):not(.pagina), body.lettura > .wrap {
    width: min(100% - 2 * var(--margine), var(--colonna, 680px)); max-width: none;
    margin-left: var(--linea); margin-right: auto; padding-left: 0; padding-right: 0;
  }
  body.lettura { --colonna: 860px; }
}

/* ---- bottoni ---- */
.btn.solid .prompt { color: #E0703F; }
.note .btn.privacy { padding: 14px 20px; font-size: inherit; }
@media (prefers-color-scheme: dark) { .btn.solid .prompt { color: #B5451F; } }

/* ---- accessibilità ---- */
html { scroll-padding-top: 72px; } /* la testata fissa non copre la sezione di arrivo */
.salta {
  position: absolute; left: 8px; top: -80px; z-index: 100; padding: 12px 16px; border-radius: 4px;
  background: #F4F1EC; color: #14120F; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 14px;
}
.salta:focus { top: 8px; }
[tabindex="-1"]:focus { outline: 0; }
/* zona da toccare più grande del testo, senza cambiare l'aspetto */
.testata .logo, .testata .menu a, .testata .lingue a, .testata .lingue-schede button, .testata .lingue-sito button, .fascia .comando { position: relative; }
.testata .logo::after, .testata .menu a::after, .testata .lingue a::after, .testata .lingue-schede button::after, .testata .lingue-sito button::after, .fascia .comando::after {
  content: ""; position: absolute; inset: -10px -3px;
}
@media (max-width: 760px) { html { scroll-padding-top: 0; } }

/* ---- testata ---- */
.testata { position: sticky; top: 0; z-index: 60; background: #14120F; color: #F4F1EC; }
.testata .wrap { display: flex; align-items: center; gap: 6px 24px; flex-wrap: wrap; padding-block: 12px; }
.testata a { border: 0; }
.testata .logo { display: flex; align-items: center; gap: 10px; margin-right: auto; color: inherit; text-decoration: none; }
.testata svg { display: block; width: 28px; height: 28px; }
.testata .nose { stroke: #E0703F; }
.testata .wm { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.035em; }
.testata .wm i { font-style: normal; color: #E0703F; }
.testata .wm::after {
  content: "bignose development"; margin-left: 12px; padding-left: 12px; border-left: 1px solid #57514A;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-weight: 400; font-size: 13px; letter-spacing: 0; color: #A39B8F;
}
.testata .menu { display: flex; align-items: center; gap: 4px 18px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 13px; }
.testata .menu a { padding: 6px 0; color: #D8D2C7; text-decoration: none; transition: color .15s ease; }
.testata .menu a:hover, .testata .menu a[aria-current] { color: #fff; }
.testata .menu a[aria-current] { box-shadow: 0 2px 0 #E0703F; }
.testata .lingue, .testata .lingue-schede, .testata .lingue-sito { display: flex; gap: 2px; margin: 0; }
.testata .lingue a, .testata .lingue-schede button, .testata .lingue-sito button {
  padding: 4px; background: none; border: 0; cursor: pointer; text-decoration: none;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .1em; color: #A39B8F;
}
.testata .lingue a:hover, .testata .lingue-schede button:hover, .testata .lingue-sito button:hover { color: #fff; }
.testata .lingue a[aria-current], .testata .lingue-schede button[aria-pressed="true"], .testata .lingue-sito button[aria-pressed="true"] { color: #fff; font-weight: 500; }
.testata :focus-visible { outline: 2px solid #E0703F; outline-offset: 2px; border-radius: 3px; }
@media (max-width: 760px) {
  .testata { position: static; }
  .testata .menu { order: 3; width: 100%; }
}
/* telefoni stretti: logo e nome sulla prima riga, menu e lingue sulla seconda */
@media (max-width: 480px) {
  .testata .wrap { column-gap: 10px; }
  .testata .logo { width: 100%; }
  .testata .menu { width: auto; margin-right: auto; gap: 4px 12px; }
  .testata .lingue, .testata .lingue-sito { order: 4; }
}

/* ---- fascia nera di chiusura: tutto a sinistra, sulla colonna del sito ---- */
.fascia {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding-block: 24px 14px; padding-inline: var(--linea);
  background: var(--fascia); color: #F4F1EC; text-align: left;
  margin-bottom: -1px; /* niente spiraglio chiaro tra fascia e piede */
}
.fascia h2 {
  display: flex; align-items: center; gap: 12px; margin: 0 0 10px;
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(26px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.035em; color: #F4F1EC;
  text-transform: none; border: 0; padding: 0;
}
.fascia h2::before {
  content: ""; flex: none; width: 1.15em; height: 1.15em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='12' y='29' width='14' height='14' rx='2' fill='%23F4F1EC'/%3E%3Crect x='12' y='57' width='14' height='14' rx='2' fill='%23F4F1EC'/%3E%3Cpath d='M38 30 L58 50 L38 70' fill='none' stroke='%23E0703F' stroke-width='11'/%3E%3Cpath d='M73 23 C86 34 86 66 73 77' fill='none' stroke='%23F4F1EC' stroke-width='11'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fascia h2::after { content: none; }
.fascia p { margin: 0 0 14px; max-width: 110ch; color: #C9C2B6; text-wrap: pretty; }
.fascia p:last-child { margin-bottom: 0; }
.fascia .cta { justify-content: flex-start; margin-top: 0; }
.fascia .btn { color: #F4F1EC; border-color: #57514A; background: transparent; }
.fascia .btn:hover { border-color: #E0703F; }
.fascia .btn.solid { background: #F4F1EC; color: #14120F; border-color: #F4F1EC; }
.fascia .prompt { color: #E0703F; }
.fascia .btn.solid .prompt { color: #B5451F; }
.fascia .comando { display: inline-block; border: 0; padding: 4px 0; margin: 0 22px 0 0; color: #F4F1EC; text-decoration: none; font-size: 15px; }
.fascia .comando span { color: #E0703F; }
.fascia .comando:hover { text-decoration: underline; text-underline-offset: 4px; }
.fascia :focus-visible { outline-color: #E0703F; }

/* ---- piede ---- */
footer {
  position: relative; z-index: 1; display: block; width: 100%; max-width: none;
  margin: 0 !important; padding: 0 !important; border-top: 0; background: var(--fascia); color: #A39B8F;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 8px 16px; font-size: 12px; color: #A39B8F; }
footer a { color: #D8D2C7; }
footer .sep { color: #8A8377; }
footer .marchi { flex-basis: 100%; margin: 6px 0 0; padding-top: 6px; border-top: 1px dashed #3A352E; font-size: 12px; color: #A39B8F; }

@media (prefers-reduced-motion: reduce) { .testata .menu a { transition: none; } }
@media print { .testata, .fascia { display: none; } }