/* Layout: un foglio di carta. Il lettering a pennello apre la pagina a tutta larghezza, allineato a sinistra;
   una sola fascia cobalto (il colore del monogramma) cola sulla sezione successiva come l'inchiostro del logo.
   Tutto il resto è tipografia larga e righe sottili, senza card tranne la scheda richiesta. */
:root {
  --paper: #f1f0ec;        /* la carta del lettering */
  --ink: #0e0e12;          /* inchiostro a pennello */
  --muted: #595a68;        /* grigio con una punta di blu */
  --line: #cdced8;
  --cobalt: #12218c;       /* il blu del monogramma */
  --cobalt-text: #12218c;  /* cobalto usato come testo/accento */
  --on-cobalt: #f1f0ec;
  --screen: #ffffff;       /* schermata bianca dei fondatori: lo stesso bianco dell'illustrazione, in entrambi i temi */
  --on-screen: #0e0e12;
  --on-screen-muted: #595a68;
  --danger: #b3261e;       /* solo nel pannello: errori ed elimina */

  --font-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(56px, 9vw, 120px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b0c13; --ink: #efeee9; --muted: #9c9db0; --line: #2a2c3b;
    --cobalt: #1a2bb0; --cobalt-text: #93a0ff; --on-cobalt: #f1f0ec; --danger: #ff8a80;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0b0c13; --ink: #efeee9; --muted: #9c9db0; --line: #2a2c3b;
  --cobalt: #1a2bb0; --cobalt-text: #93a0ff; --on-cobalt: #f1f0ec; --danger: #ff8a80;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
h1, h2, h3, p, ol, ul, dl, dd, fieldset, legend { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cobalt-text); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.label {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.display {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* marchi come maschere: prendono il colore dai token, quindi funzionano in chiaro e in scuro */
.mark-lettering {
  aspect-ratio: 1245 / 445;
  background: var(--ink);
  -webkit-mask: var(--img-lettering) left center / contain no-repeat;
  mask: var(--img-lettering) left center / contain no-repeat;
}
.mark-monogram {
  aspect-ratio: 409 / 944;
  background: var(--cobalt-text);
  -webkit-mask: var(--img-monogram) center / contain no-repeat;
  mask: var(--img-monogram) center / contain no-repeat;
}

/* ---------- testata ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
  padding-block: 18px;
}
.top-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.top-brand .mark-monogram { width: 15px; }
.top-brand span { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; }
.top nav { display: flex; gap: clamp(14px, 3vw, 30px); flex-wrap: wrap; }
.top nav a {
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; padding-block: 6px; border-bottom: 1px solid transparent;
}
.top nav a:hover { border-bottom-color: var(--ink); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(20px, 4vw, 44px) var(--section); }
.hero .mark-lettering { width: min(100%, 1000px); margin-left: -1.2%; }
.hero-body {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 72px);
  align-items: end; margin-top: clamp(20px, 3.5vw, 40px);
}
.hero-copy { display: grid; gap: 22px; max-width: 40rem; min-width: 0; }
.hero-copy .display { font-size: clamp(1.7rem, 4.2vw, 3.1rem); }
.hero-copy p.text { max-width: 34rem; color: var(--muted); }
.hero-side { display: flex; align-items: flex-end; gap: clamp(18px, 3vw, 34px); }
.hero-side .mark-monogram { width: clamp(84px, 11vw, 132px); flex: none; }
.facts { display: grid; gap: 14px; padding-bottom: 6px; }
.facts div { display: grid; gap: 2px; }
.facts dd { font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 1.05rem; }

.btn {
  display: inline-flex; align-items: center; gap: 12px; justify-self: start;
  font: 700 1rem/1 var(--font-display); font-stretch: 112%;
  padding: 17px 24px; border: 0; border-radius: 2px; cursor: pointer; text-decoration: none;
  background: var(--ink); color: var(--paper);
  transition: background-color .18s ease, transform .18s ease;
}
.btn:hover { background: var(--cobalt-text); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- vetrina ---------- */
.shop { padding-block: 0 var(--section); }
.sec-head { display: grid; gap: 12px; margin-bottom: clamp(24px, 4vw, 44px); max-width: 44rem; }
.sec-head h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
.sec-head p { color: var(--muted); max-width: 34rem; }
.direct { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 6px; }
.direct li { display: grid; gap: 2px; }
.direct a { font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 1.1rem; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.direct a:hover { color: var(--cobalt-text); }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 32px); }
.proto { display: grid; gap: 12px; align-content: start; min-width: 0; }
.proto-photo {
  aspect-ratio: 4 / 5; max-width: 100%; display: grid; place-items: center; text-align: center;
  border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 2px;
  color: var(--muted); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
  padding: 16px;
}
.proto-photo:has(img) { padding: 0; border: 0; overflow: hidden; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.proto-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.proto.sold .proto-photo img { opacity: .55; }
.proto.sold .tag { background: var(--ink); color: var(--paper); }
.proto-ask:disabled { color: var(--muted); border-bottom-color: transparent; cursor: default; }
.proto-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.proto h3 { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 1.15rem; }
.proto .tag { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; }
.proto-ask {
  justify-self: start; background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: 600 .98rem/1.3 var(--font-body); color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.proto-ask:hover { color: var(--cobalt-text); border-bottom-color: var(--cobalt-text); }

/* ---------- funzionamento: fascia cobalto ---------- */
.band { position: relative; background: var(--cobalt); color: var(--on-cobalt); padding-block: var(--section); }
.band .label { color: var(--on-cobalt); opacity: .75; }
.band-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 5vw, 56px); }
.band-head h2 {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.8rem, 11vw, 8.5rem); line-height: .9; letter-spacing: -.03em;
}
.band-head p { max-width: 34rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); opacity: .92; }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(18px, 3vw, 36px); }
.flow li {
  display: grid; gap: 10px; align-content: start; padding-top: 14px;
  border-top: 2px solid color-mix(in srgb, var(--on-cobalt) 70%, transparent);
}
.flow .n { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .06em; opacity: .75; }
.flow h3 { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 1.2rem; line-height: 1.15; }
.flow p { font-size: 1rem; opacity: .88; }

/* le colature: stelo sottile e goccia in fondo, come sotto la "s" del lettering */
.drips { position: absolute; inset: 100% 0 auto 0; height: 0; z-index: 2; pointer-events: none; }
.drip {
  position: absolute; top: -1px; left: var(--x); width: 5px; height: calc(var(--h) * var(--k, 1));
  background: var(--cobalt); border-radius: 0 0 3px 3px;
  animation: drip 2.2s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0s);
}
.drip::before { /* raccordo con la fascia */
  content: ""; position: absolute; top: 0; left: 50%; width: 19px; height: 7px; transform: translateX(-50%);
  background: var(--cobalt); clip-path: polygon(0 0, 100% 0, 63% 100%, 37% 100%);
}
.drip::after {
  content: ""; position: absolute; bottom: -9px; left: 50%; width: 11px; height: 16px; transform: translateX(-50%);
  background: var(--cobalt); border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
}
@keyframes drip { from { height: calc(var(--h) * var(--k, 1) * .3); } to { height: calc(var(--h) * var(--k, 1)); } }

/* ---------- chi siamo: schermata bianca, l'illustrazione fa da sfondo ---------- */
.duo { background: var(--screen); color: var(--on-screen); padding-block: clamp(72px, 9vw, 120px) clamp(40px, 6vw, 80px); }
.duo-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px);
  align-items: center; min-height: min(78svh, 760px);
}
.duo-art { margin: 0; display: grid; justify-items: center; min-width: 0; }
.duo-art img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(82svh, 800px); }
.duo-copy { display: grid; gap: 20px; min-width: 0; }
.duo-copy .label { color: var(--on-screen-muted); }
.duo-copy h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
.duo-copy p { max-width: 32rem; }
.duo-copy p + p { color: var(--on-screen-muted); }

/* ---------- radici ---------- */
.roots { padding-block: var(--section); }
.roots-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.roots-title { display: grid; gap: 18px; min-width: 0; }
.roots-title h2 { font-size: clamp(2.2rem, 5.6vw, 4.2rem); }
/* punto filza: la cucitura a mano delle nonne, in cobalto */
.stitch {
  height: 3px; width: min(100%, 340px); border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--cobalt-text) 0 18px, transparent 18px 30px);
}
.roots-copy { display: grid; gap: 20px; min-width: 0; }
.roots-copy p { max-width: 34rem; }
.roots-copy p.lead { font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.45; }
.roots-close { display: grid; gap: 8px; margin-top: clamp(36px, 6vw, 72px); }
.roots-close p { color: var(--muted); max-width: 40rem; }
.roots-close strong {
  display: block; color: var(--cobalt-text);
  font-family: var(--font-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.2rem, 8vw, 6rem); line-height: .92; letter-spacing: -.025em; text-wrap: balance;
}

/* ---------- contatti ---------- */
.ask { padding-block: var(--section); border-top: 1px solid var(--line); }
.ask-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
form { display: grid; gap: 24px; min-width: 0; }
.field { display: grid; gap: 8px; }
.field > label, legend { font-weight: 700; font-stretch: 108%; }
legend { margin-bottom: 10px; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: block; padding: 10px 16px; border: 1.5px solid var(--ink); border-radius: 2px;
  font-weight: 600; font-size: .98rem; transition: background-color .15s ease, color .15s ease;
}
.chip input:hover + span { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.chip input:checked + span { background: var(--ink); color: var(--paper); }
.chip input:focus-visible + span { outline: 3px solid var(--cobalt-text); outline-offset: 3px; }
input[type="text"], textarea {
  width: 100%; font: inherit; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; padding: 10px 0;
}
textarea { resize: vertical; min-height: 5rem; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input[type="text"]:focus-visible, textarea:focus-visible { outline: 0; border-bottom-color: var(--cobalt-text); box-shadow: 0 2px 0 var(--cobalt-text); }

.ticket { border: 1.5px solid var(--ink); border-radius: 2px; display: grid; min-width: 0; }
.ticket-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1.5px dashed var(--ink);
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
}
.tag { background: var(--cobalt); color: var(--on-cobalt); padding: 3px 8px; border-radius: 2px; white-space: nowrap; }
.ticket pre {
  margin: 0; padding: 18px 16px; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: .92rem; line-height: 1.6; min-height: 12rem;
}
.ticket-foot { display: grid; gap: 12px; padding: 0 16px 16px; }
.ticket-foot .btn { width: 100%; justify-content: center; }
.btn-alt { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-alt:hover { background: transparent; color: var(--cobalt-text); box-shadow: inset 0 0 0 1.5px var(--cobalt-text); }
.ticket-foot p { font-size: .92rem; color: var(--muted); min-height: 1.5em; }
.ticket-foot p.ok { color: var(--cobalt-text); font-weight: 600; }

/* ---------- piede ---------- */
.foot { border-top: 1px solid var(--line); padding-block: clamp(28px, 5vw, 48px); }
.foot-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; }
.foot .mark-lettering { width: min(260px, 60vw); }
.foot-text { display: grid; gap: 8px; }
.foot-links a { text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }
.foot-links a:hover { color: var(--cobalt-text); }
.foot p { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 860px) {
  .hero-body, .duo-grid, .ask-grid, .roots-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-body { align-items: start; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo-grid { min-height: 0; }
  .duo-art img { max-height: none; width: 100%; max-width: 460px; }
}
@media (max-width: 560px) {
  .flow, .shop-grid, .field-row { grid-template-columns: minmax(0, 1fr); }
  .top nav a:nth-child(2) { display: none; }
  .drips { --k: .5; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .drip { animation: none; }
  .btn, .chip span { transition: none; }
}

/* immagini usate come maschera (colorate dai token) */
:root {
  --img-lettering: url("../assets/lettering.webp");
  --img-monogram: url("../assets/monogram.webp");
}