/* =========================================================================
   PRESENCE & PROTOCOL — design system "wellhead & protolib", prefix xj-
   An independent editorial guide to Jabber/XMPP. Vocabulary of the wire and
   the routing desk: spool (usable width), wordmark (masthead), operators
   (nav), wellhead (cover band), veil (fixed photo scrim), layering (numbered
   section), nameplate (label), handset (asymmetric mosaic), stanza (card),
   sawcut (image frame), tagline (card kicker), protolib/probe (dated flow),
   opener (essay header), surfacing (header image), chute (reading column),
   record (dark mono block), footnote (aside), validation (checklist),
   wallchart (table), afterlog (further reading), junction (SVG divider),
   brandmark (SVG ornaments), socketbase (footer).
   Palette: cold paper + slate ink + copper accent. No green, no remote font,
   no gradient device. Automatic dark mode.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. COLORI · la wellhead e l'officina --------------------------------- */
  --slate:       #eef1f5;  /* bianco slate: carta di tutte le pagine   */
  --vein:          #e2e7ee;  /* riserve, sezioni alternate                 */
  --backbone-live:    #f7f9fb;  /* riserva chiara: footnotes, righe pari           */
  --ink:    #16202b;  /* ink del copy                       */
  --lead:        #1d2a38;  /* grigio lead: wordmark, socketbase, records     */
  --lead-backdrop:  #16212c;  /* backdrop piu profondo                         */
  --ink-soft: #5b6b7c; /* didascalie, meta, sottotitoli            */
  --wire:    #8a3324;  /* verde wire: link, forte, filetti     */
  --wire-dark: #6d281c; /* pressione / hover                        */
  --wire-light: #e0866f; /* wire su fondi scuri               */
  --rule:       #c9d3de;  /* hairline sulla carta                       */
  --rule-night: #33404e;  /* hairline sulla night                       */

  /* Dark mode: la wellhead afterlog il tramonto, la lucerna dell'officina. */
  --night-paper:   #12181f;
  --night-vein:    #1a222b;
  --night-copy:   #e4e9ef;
  --night-soft:   #9aa8b6;

  /* ---- 2. TIPO · stack composti, nulla va a cercarsi fuori -------------- */
  --face-headline: Menlo, "DejaVu Sans Mono", Consolas, "Liberation Mono", "Courier New", ui-monospace, monospace;
  --face-copy: "Hoefler Text", Baskerville, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --face-mono: "Trebuchet MS", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif;

  --headline-weight: 600;
  --headline-track: -0.012em;
  --caps-track: 0.16em;   /* targhe, issue, citations */

  --body-size: clamp(1.03rem, 0.98rem + 0.24vw, 1.15rem);
  --body-lead: 1.72;
  --scale-h1: clamp(2.25rem, 1.15rem + 3.9vw, 4.4rem);
  --scale-h2: clamp(1.52rem, 1.1rem + 1.55vw, 2.35rem);
  --scale-h3: clamp(1.14rem, 1.02rem + 0.58vw, 1.46rem);
  --scale-h4: 1.05rem;

  /* ---- 3. RITMO --------------------------------------------------------- */
  --measure:        66ch;       /* chute di lettura                         */
  --measure-wide:  1340px;
  --gutter-page: clamp(1.1rem, 4vw, 4rem);
  --channelway:        clamp(0.9rem, 2.2vw, 2rem);
  --breath:       clamp(2.4rem, 5.5vw, 5.2rem);
  --step:       clamp(1.2rem, 3vw, 3.2rem);

  /* ---- 4. PARTICOLARI --------------------------------------------------- */
  --corner:     0px;
  --rule-thin: 1px solid var(--rule);
  --ease:    150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --slate:      var(--night-paper);
    --vein:         var(--night-vein);
    --backbone-live:   #212b35;
    --ink:   var(--night-copy);
    --ink-soft: var(--night-soft);
    --wire:   var(--wire-light);
    --wire-dark: #f0ab98;
    --rule:      #3b3f45;
  }
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--slate);
  color: var(--ink);
  font-family: var(--face-copy);
  font-size: var(--body-size);
  line-height: var(--body-lead);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
svg.xj-brandmark { display: inline-block; vertical-align: -0.12em; }

h1, h2, h3, h4 {
  font-family: var(--face-headline);
  font-weight: var(--headline-weight);
  letter-spacing: var(--headline-track);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--scale-h1); }
h2 { font-size: var(--scale-h2); }
h3 { font-size: var(--scale-h3); }
h4 { font-size: var(--scale-h4); }

p, ul, ol { margin: 0 0 1.12em; }
a {
  color: var(--wire);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--ease);
}
a:hover { color: var(--wire-dark); }
:focus-visible {
  outline: 2px solid var(--wire);
  outline-offset: 3px;
  border-radius: 1px;
}
hr { border: 0; border-top: var(--rule-thin); margin: var(--breath) 0; }

::selection { background: var(--wire); color: var(--backbone-live); }
@media (prefers-color-scheme: dark) {
  ::selection { background: var(--wire-light); color: #1b1d20; }
}

/* Counts di tabelle, prezzi e date in cifre tabulari. */
.xj-wallchart, .xj-record, .xj-footnote, .xj-validation, .xj-daymark, .xj-citations,
.xj-layering__count, .xj-wellhead__issue, .xj-stanza__hint {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   SCAFFOLD
   ========================================================================= */

/* Skip link. Non si tocca mai. */
.xj-bypass {
  position: absolute; left: -9999px; top: 0;
  background: var(--lead); color: var(--backbone-live);
  padding: 0.7rem 1.15rem; z-index: 60;
}
.xj-bypass:focus { left: 0.6rem; top: 0.6rem; }

/* La spool: larghezza utile di ogni zona di contenuto. */
.xj-spool {
  width: 100%;
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-page);
}
.xj-buildout { display: block; }

/* --- Wordmark (il segno sopra il portale dell'officina) ------------------- */
.xj-wordmark {
  background: var(--lead);
  color: var(--backbone-live);
  border-bottom: 1px solid var(--rule-night);
  box-shadow: inset 0 -4px 0 var(--wire);
  padding-block: clamp(0.72rem, 1.6vw, 1.15rem);
}
.xj-wordmark__queue {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.6rem;
}
.xj-wordmark__handle {
  font-family: var(--face-headline);
  font-size: clamp(1.32rem, 1.1rem + 0.98vw, 1.95rem);
  font-weight: var(--headline-weight);
  color: var(--backbone-live);
  text-decoration: none;
  letter-spacing: 0.014em;
}
.xj-wordmark__handle:hover { color: #fff; }
.xj-wordmark__handle span {
  display: block;
  font-family: var(--face-mono);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--wire-light);
  margin-top: 0.34rem;
}
.xj-operators ul {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  list-style: none; margin: 0; padding: 0;
}
.xj-operators a {
  color: var(--night-soft);
  text-decoration: none;
  font-family: var(--face-mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding-block: 0.25rem;
  transition: color var(--ease);
}
.xj-operators a:hover { color: var(--wire-light); }


/* --- Menu: a disclosure, folded on a phone, always open on a wide screen ---- */
.xj-operators__fold { position: relative; }
.xj-operators__toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--face-mono);
  font-size: 0.78rem; letter-spacing: var(--caps-track); text-transform: uppercase;
  color: var(--night-soft);
  cursor: pointer; list-style: none;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(255,255,255,0.22);
}
.xj-operators__toggle::-webkit-details-marker { display: none; }
.xj-operators__toggle::after { content: "+"; font-size: 1rem; line-height: 1; }
.xj-operators__fold[open] > .xj-operators__toggle::after { content: "\2212"; }
.xj-operators__fold[open] > .xj-operators__toggle { color: var(--wire-light); }
.xj-operators__fold > ul { padding-block-start: 0.7rem; }
.xj-operators a[aria-current="page"] {
  color: var(--wire-light);
  box-shadow: inset 0 -2px 0 0 var(--wire-light);
}
@media (min-width: 46rem) {
  .xj-operators__toggle { display: none; }
  .xj-operators__fold > ul { padding-block-start: 0; }
  /* the list is shown whatever the open state of the element */
  .xj-operators__fold:not([open]) > ul { display: flex; }
}
@media (max-width: 45.99rem) {
  .xj-operators__fold:not([open]) > ul { display: none; }
  .xj-operators__fold > ul { flex-direction: column; gap: 0.15rem; }
  .xj-operators a { font-size: 0.95rem; padding-block: 0.5rem; display: block; }
}

/* --- Wireline (breadcrumb) -------------------------------------------------- */
.xj-wireline { padding-block: clamp(0.85rem, 1.8vw, 1.3rem); }
.xj-wireline ol {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--face-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.xj-wireline li + li::before {
  content: "›";
  margin-right: 0.55rem;
  color: var(--wire);
}
.xj-wireline a { color: var(--ink-soft); }
.xj-wireline a:hover { color: var(--wire); }
.xj-wireline [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* =========================================================================
   HOME · LA WELLHEAD (affiche: tipografia prima, still dietro, banda corta
   perché la griglia degli strati cominci sotto i 700 px di altezza)
   ========================================================================= */

.xj-wellhead { position: relative; isolation: isolate; }
.xj-wellhead__still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Il veil e un colore FISSO per dottrina, mai un var(). */
.xj-wellhead__veil {
  position: absolute; inset: 0;
  background: rgba(35, 38, 42, 0.82);
  z-index: -1;
}
@media (prefers-color-scheme: dark) {
  .xj-wellhead__veil { background: rgba(15, 16, 18, 0.87); }
}
.xj-wellhead__copy {
  padding-block: clamp(2.9rem, 6.5vw, 5rem) clamp(2.2rem, 5vw, 3.8rem);
  max-width: 66rem;
  color: var(--night-copy);
}
.xj-wellhead__eyebrow {
  display: flex; align-items: center;
  gap: 0.8rem;
  font-family: var(--face-mono);
  font-size: 0.74rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--wire-light);
  margin: 0 0 1rem;
}
.xj-wellhead__eyebrow::after {
  content: "";
  flex: 1;
  max-width: 9rem;
  border-top: 1px solid currentColor;
  opacity: 0.7;
}
.xj-wellhead__copy h1 {
  color: #fff;
  max-width: 21ch;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.xj-wellhead__copy > p:not([class]) {
  font-size: clamp(1.02rem, 0.95rem + 0.38vw, 1.22rem);
  line-height: 1.55;
  max-width: 58ch;
  color: var(--night-copy);
  margin: 1.05rem 0 0;
}
/* Doppio rule + riga d'issue, la firma dell'affiche di wellhead. */
.xj-wellhead__issue {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 1.1rem;
  margin-top: 1.5rem;
  padding-top: 0.85rem;
  border-top: 3px double rgba(230, 228, 222, 0.5);
  font-family: var(--face-mono);
  font-size: 0.75rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--wire-light);
}
.xj-wellhead__issue .xj-brandmark { color: var(--wire-light); }
.xj-wellhead__issue em {
  font-style: normal;
  color: var(--night-copy);
  letter-spacing: 0.08em;
}

/* =========================================================================
   STRATI (sezioni), numerati 01-05
   ========================================================================= */

.xj-layering { padding-block: clamp(1.9rem, 4.4vw, 3.6rem); }
.xj-layering--inset { background: var(--vein); }
.xj-layering__header {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  border-bottom: var(--rule-thin);
  padding-bottom: 0.6rem;
  margin-bottom: clamp(1.2rem, 2.6vw, 1.9rem);
}
.xj-layering__count {
  font-family: var(--face-mono);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.3em;
  color: var(--wire);
  margin-right: 0.7rem;
}
.xj-layering__headline { font-size: var(--scale-h2); }
.xj-layering__footnote {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-width: 42ch;
}

/* Il junction: ornamento SVG tra le grandi sezioni. */
.xj-junction {
  display: flex;
  justify-content: center;
  padding-block: clamp(0.4rem, 1.2vw, 1rem);
  color: var(--wire);
  opacity: 0.75;
}

/* La nameplate: surtitolo in maiuscoletto verde. */
.xj-nameplate {
  font-family: var(--face-mono);
  font-size: 0.72rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--wire);
  margin: 0 0 0.55rem;
}

/* =========================================================================
   L'HANDSET · mosaico asimmetrico di stanzas
   ========================================================================= */

.xj-handset {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--channelway);
  list-style: none; margin: 0; padding: 0;
}
.xj-stanza { margin: 0; }
.xj-stanza--full   { grid-column: span 6; }
.xj-stanza--major  { grid-column: span 4; }
.xj-stanza--half   { grid-column: span 3; }
.xj-stanza--minor { grid-column: span 2; }
.xj-stanza--step  { transform: translateY(var(--step)); }
.xj-stanza--step2 { transform: translateY(calc(var(--step) * 0.5)); }
.xj-handset--dense { padding-bottom: var(--step); }

.xj-stanza__sawcut {
  position: relative;
  overflow: hidden;
  border-radius: var(--corner);
  border: var(--rule-thin);
  background: var(--vein);
}
.xj-stanza__sawcut::after {   /* l'ombra sale sul passaggio; il link resta sul headline */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(35, 38, 42, 0) 58%, rgba(35, 38, 42, 0.26));
  opacity: 0;
  transition: opacity var(--ease);
}
.xj-stanza:hover .xj-stanza__sawcut::after,
.xj-stanza:focus-within .xj-stanza__sawcut::after { opacity: 1; }
.xj-stanza__sawcut--wide      { aspect-ratio: 21 / 9; }
.xj-stanza__sawcut--landscape { aspect-ratio: 4 / 3; }
.xj-stanza__sawcut--square  { aspect-ratio: 1 / 1; }
.xj-stanza__sawcut--portrait  { aspect-ratio: 3 / 4; }
.xj-stanza__view {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}
.xj-stanza:hover .xj-stanza__view { transform: scale(1.02); }

.xj-stanza__tagline { padding-top: 0.7rem; }
.xj-stanza__headline { margin: 0 0 0.3rem; }
.xj-stanza__link {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--wire), var(--wire));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 96%;
  transition: background-size var(--ease), color var(--ease);
}
.xj-stanza__link:hover { color: var(--wire-dark); background-size: 100% 2px; }
.xj-stanza__footnote {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}
.xj-stanza__hint {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--face-mono);
  font-size: 0.7rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--wire);
  border: 1px solid currentColor;
  border-radius: var(--corner);
  padding: 0.14rem 0.5rem;
}

/* =========================================================================
   LA PROTOLIB · il flusso datato della home
   ========================================================================= */

.xj-protolib {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--channelway) * 1.5);
}
.xj-probe {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.05rem;
  padding-block: 1.1rem;
  border-bottom: var(--rule-thin);
  margin: 0;
}
.xj-protolib .xj-probe:nth-last-child(-n+2) { border-bottom: 0; }
.xj-probe__view {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--corner);
  border: var(--rule-thin);
}
.xj-daymark {
  margin: 0 0 0.3rem;
  font-family: var(--face-mono);
  font-size: 0.72rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--wire);
}
.xj-probe h3 { margin: 0 0 0.3rem; }
.xj-probe h3 a { color: var(--ink); text-decoration: none; }
.xj-probe h3 a:hover { color: var(--wire); text-decoration: underline; }
.xj-probe p:not([class]) { margin: 0; color: var(--ink-soft); font-size: 0.93rem; }

/* =========================================================================
   SAGGI · opener, surfacing, chute
   ========================================================================= */

.xj-opener {
  padding-block: clamp(0.4rem, 1.5vw, 1.1rem) clamp(1.3rem, 3vw, 2.1rem);
  max-width: 58rem;
}
.xj-opener__standfirst {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0.9rem 0 0;
}
.xj-citations {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none; margin: 1.05rem 0 0; padding: 0;
  font-family: var(--face-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  border-top: var(--rule-thin);
  padding-top: 0.8rem;
}
.xj-citations a { color: var(--ink-soft); }
.xj-citations a:hover { color: var(--wire); }

.xj-surfacing { margin: 0; }
.xj-surfacing__view {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--corner);
  border: var(--rule-thin);
}

.xj-chute {
  max-width: var(--measure);
  padding-block: clamp(1.5rem, 3.4vw, 2.5rem) clamp(1.9rem, 4.4vw, 3.2rem);
}
.xj-chute > * + * { margin-top: 0.9em; }
.xj-chute h2 {
  margin-top: 1.75em;
  padding-bottom: 0.26rem;
  border-bottom: var(--rule-thin);
}
.xj-chute h3 { margin-top: 1.35em; }
.xj-chute ul, .xj-chute ol { padding-left: 1.4rem; }
.xj-chute li + li { margin-top: 0.45em; }
.xj-chute strong { color: var(--wire-dark); }
@media (prefers-color-scheme: dark) {
  .xj-chute strong { color: #a9d3bd; }
}

/* Capolettera: la lettera iniziale di un saggio, come su un catalogo. */
.xj-chute > p:first-of-type::first-letter {
  font-family: var(--face-headline);
  font-weight: var(--headline-weight);
  float: left;
  font-size: 3.05em;
  line-height: 0.82;
  padding-right: 0.12em;
  padding-top: 0.06em;
  color: var(--wire);
}

/* La validation: lista di controllo con quadratini da wellhead. */
.xj-validation, .xj-chute ul.xj-validation {
  background: var(--backbone-live);
  border: var(--rule-thin);
  border-left: 3px solid var(--wire);
  border-radius: var(--corner);
  padding: 1rem 1.25rem 1rem 2.1rem;
  font-size: 0.97em;
}
.xj-validation li::marker { color: var(--wire); }

/* La footnote: ricordo incartato su carta piu profonda. */
.xj-footnote {
  background: var(--vein);
  border: var(--rule-thin);
  border-radius: var(--corner);
  padding: 1rem 1.2rem;
  font-size: 0.95em;
}
.xj-footnote p { margin: 0; }

/* Record mono: record scura su grigio lead, headline wire. */
.xj-record {
  margin: 1.7em 0;
  background: var(--lead);
  color: var(--night-copy);
  border-radius: var(--corner);
  padding: 1.15rem 1.3rem 1.25rem;
  border: 1px solid var(--rule-night);
}
.xj-record h2, .xj-record h3, .xj-record h4 {
  font-family: var(--face-mono);
  font-weight: 600;
  font-size: 0.77rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--wire-light);
  margin: 0 0 0.7rem;
  border: 0;
  padding: 0;
}
.xj-record p, .xj-record ul { margin: 0; font-size: 0.95rem; color: var(--night-copy); }
.xj-record strong { color: #fff; font-variant-numeric: tabular-nums; }
.xj-record p + p, .xj-record ul { margin-top: 0.5rem; }

/* La wallchart: tabella da officina, intestazione su lead. */
.xj-wallchart {
  overflow-x: auto;
  margin: 1.5em 0;
  border: var(--rule-thin);
  border-radius: var(--corner);
}
.xj-wallchart table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.92em;
}
.xj-wallchart th, .xj-wallchart td {
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.xj-wallchart caption {
  caption-side: top;
  text-align: left;
  padding: 0.6rem 0.85rem;
  font-family: var(--face-mono);
  font-size: 0.75rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--wire);
  border-bottom: 1px solid var(--rule);
}
.xj-wallchart thead th {
  background: var(--lead);
  color: var(--night-copy);
  font-family: var(--face-mono);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
}
.xj-wallchart tbody tr:last-child td { border-bottom: 0; }
.xj-wallchart tbody tr:nth-child(even) { background: var(--backbone-live); }

/* Da leggere afterlog. */
.xj-afterlog {
  margin-top: 2.3em;
  padding-top: 1.15rem;
  border-top: 3px double var(--rule);
}
.xj-afterlog h2 {
  font-size: 1.18rem;
  border-bottom: 0;
  margin: 0 0 0.55rem;
}
.xj-afterlog ul { list-style: none; margin: 0; padding: 0; }
.xj-afterlog li { padding: 0.3rem 0; }
.xj-afterlog li::before {
  content: "·";
  color: var(--wire);
  margin-right: 0.55rem;
  font-weight: 700;
}

/* =========================================================================
   IL SOCKETBASE (piede)
   ========================================================================= */

.xj-socketbase {
  margin-top: var(--breath);
  background: var(--lead);
  color: var(--night-copy);
  box-shadow: inset 0 4px 0 var(--wire);
}
.xj-socketbase__queue {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--channelway) * 1.5);
  padding-block: clamp(1.9rem, 4.4vw, 3rem);
}
.xj-socketbase h2 {
  font-family: var(--face-mono);
  font-weight: 600;
  font-size: 0.77rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--wire-light);
  margin-bottom: 0.7rem;
}
.xj-socketbase ul { list-style: none; margin: 0; padding: 0; }
.xj-socketbase li { padding-block: 0.22rem; }
.xj-socketbase a { color: var(--night-soft); text-decoration: none; transition: color var(--ease); }
.xj-socketbase a:hover { color: var(--wire-light); text-decoration: underline; }
.xj-socketbase__backdrop {
  border-top: 1px solid var(--rule-night);
  padding-block: 1.05rem;
  font-family: var(--face-mono);
  font-size: 0.78rem;
  color: var(--night-soft);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 0.9rem;
}
.xj-socketbase__backdrop .xj-brandmark { color: var(--wire-light); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1080px) {
  .xj-stanza--major  { grid-column: span 6; }
  .xj-stanza--half   { grid-column: span 3; }
  .xj-stanza--minor { grid-column: span 3; }
  .xj-stanza--step, .xj-stanza--step2 { transform: none; }
  .xj-handset--dense { padding-bottom: 0; }
}

@media (max-width: 760px) {
  .xj-handset { grid-template-columns: repeat(2, 1fr); }
  .xj-stanza--major, .xj-stanza--half, .xj-stanza--minor { grid-column: span 2; }
  .xj-protolib { grid-template-columns: 1fr; }
  .xj-probe { grid-template-columns: 118px 1fr; }
  .xj-socketbase__queue { grid-template-columns: 1fr; }
  .xj-wellhead__copy { padding-block: 2.5rem 2rem; }
  .xj-layering__header { flex-direction: column; gap: 0.3rem; }
  .xj-chute > p:first-of-type::first-letter {
    font-size: 2.7em;
    float: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
  }
}

@media (max-width: 480px) {
  .xj-probe { grid-template-columns: 1fr; }
  .xj-operators ul { gap: 0.35rem 0.95rem; }
}

/* Cortesia del movimento. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .xj-stanza:hover .xj-stanza__view { transform: none; }
}

/* Stampa: un saggio di wellhead sulla carta. */
@media print {
  .xj-wordmark, .xj-socketbase, .xj-bypass, .xj-wireline, .xj-junction { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .xj-chute { max-width: none; }
  .xj-record { background: #fff; color: #000; border: 1pt solid #000; }
  .xj-wellhead__veil { background: rgba(35, 38, 42, 0.94); }
}