/* Mini màquina arcade DIY — fitxa de projecte
   Identitat de les DIY: sans-serif, fons blanc, negre i grisos. Estructura sense color:
   foto, títol i text, fitxa tècnica per blocs i el procés pas a pas. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

:root {
  --ink: #111;
  --gray: #6b6b6b;
  --line: #e3e3e3;
  --col: 40rem;          /* columna de text */
  --wide: 60rem;         /* foto, fitxa i procés */
  --side: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
body {
  background: #fff; color: var(--ink);
  font: 400 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.page { padding: 4.5rem var(--side) 0; }
.col  { max-width: var(--col);  margin-inline: auto; }
.wide { max-width: var(--wide); margin-inline: auto; }

/* La foto, primer de tot */
.photo img { margin-inline: auto; max-height: 78svh; width: auto; }

/* Títol i text */
.intro { margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
h1 {
  font-size: clamp(2.5rem, 1.5rem + 5vw, 5.25rem);
  font-weight: 800; line-height: 0.98; letter-spacing: -0.045em;
  text-wrap: balance;
}
.sub {
  margin-top: 0.5em;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--gray);
}
.text { margin-top: clamp(1.75rem, 1.5rem + 1.5vw, 2.75rem); }
.text p { font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty; }

/* Títols de secció: una línia fina i prou */
.section { margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
h2 {
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--ink);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
}

/* Fitxa tècnica: blocs amb icona i files etiqueta / valor */
.sheet { display: grid; gap: 0 clamp(2rem, 1rem + 3vw, 4rem); margin-top: 0.5rem; }
@media (min-width: 52rem) { .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.group { padding-top: 1.75rem; }
.group h3 {
  display: flex; align-items: center; gap: 0.6rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--ink);
  font: 600 0.75rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.group h3 svg { width: 1.25rem; height: 1.25rem; flex: none; }
.group dl div {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.15rem 1rem;
  padding-block: 0.7rem; border-bottom: 1px solid var(--line);
}
.group dt { font-size: 0.8125rem; line-height: 1.5; color: var(--gray); }
.group dd { font-size: 0.9375rem; line-height: 1.5; }
.group dd small { display: block; font-size: 0.8125rem; color: var(--gray); }
.systems { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; padding: 0; }
.systems li {
  list-style: none; padding: 0.15rem 0.55rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.8125rem; line-height: 1.5;
}
@media (max-width: 30rem) { .group dl div { grid-template-columns: minmax(0, 1fr); } }

/* El procés: passos numerats amb el seu text */
.steps { list-style: none; padding: 0; display: grid; gap: clamp(1.75rem, 1rem + 2vw, 2.75rem); margin-top: 1.5rem; }
.steps img { width: 100%; }
.step-cap {
  display: flex; gap: 0.9rem; align-items: baseline;
  margin-top: 0.75rem;
  font-size: 0.9375rem; line-height: 1.45; color: var(--gray);
}
.step-cap span { flex: none; font: 600 0.75rem/1.45 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }

.footer { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }

:lang(zh) h1, :lang(zh) .sub, :lang(zh) h2 { letter-spacing: 0; }