/*  The site's own stylesheet.

    Everything here used to be an inline <style> in base.html, which meant the
    palette, the type scale and every rule below travelled with every document —
    four and a half kilobytes, on every page, uncacheable because it was markup.
    As a file it is fetched once and then read from cache, and collectstatic
    gives it a content-hashed name so a change to it can never be served stale.

    Load order: after ibex-fonts.css and ibex-responsive.css, before
    ibex-light.css. That is the order the <link> tags declare and the order the
    cascade needs.

    Written to the standard the IBEX Capital project set. Not copied from it:
    the two firms are different companies with different palettes, and every
    colour below is IBEX SERVICES' own, measured rather than adopted.  */

/* ── the palette, and the only place it exists ──────────────────────────────
   These nine values were written out as hex literals in twelve files —
   blocks/_band.html, eight block templates, the 404 and this document's own
   <style>. That is not a palette, it is a habit: the difference between "the
   accent" and "#C9A96E" was a string to search for rather than a decision that
   could be revisited.

   Every ratio below was measured against the band the colour is used on, by
   scripts/check_contrast.py, which reads this file rather than a table
   somebody retyped. WCAG 2.2 AA asks 4.5:1 of body text and 3:1 of text at
   24px or above. Nothing here is below 4.5:1 on any ground it is used on.

   WHAT THIS PALETTE DOES NOT HAVE, and why the Capital one does. That project
   carries --acc-lg, a second value of the accent for type set large, because
   its gold is a bright 8.1:1 metal that shouts at forty pixels. This accent is
   a soft tan and there is no size at which it shouts, so a second value would
   be a ramp nobody can see. It does have the other tier Capital added —
   --ink-045, the step below muted — because the footer's address and the
   regulatory disclosure were already using it, as a literal, in two files.  */
:root{
  --serif:"Playfair Display", Georgia, serif;
  --sans:"Archivo", system-ui, sans-serif;

  --ink-900:#0D0D0D;   /* the dark band */
  --ink-800:#171614;   /* the dark band, recessed — the closing call to action */
  --ink-100:#F0EDE8;   /* type on dark                            16.6:1 */
  --ink-060:#A79F96;   /* muted type on dark                       7.4:1 */
  --ink-045:#8C857D;   /* the address, the disclosure, the tab      5.3:1 */

  --paper-050:#FBFAF8; /* the light band */
  --paper-100:#F0ECE4; /* the warm band */
  --paper-900:#1A1817; /* type on light                           17.0:1 */
  --paper-500:#635C53; /* muted type on light         6.3:1 · warm 5.6:1 */
  --paper-045:#6E6760; /* the same step, on paper     5.4:1 · warm 4.8:1 */

  --gold:#C9A96E;      /* the accent on dark: marks, links, focus  8.7:1 */
  --gold-deep:#7E6128; /* the same metal on paper     5.6:1 · warm 4.9:1 */
  /* The lamp, as components, because rgba() needs them separately. This is
     --gold opened up and desaturated: a glow carries its hue over a large soft
     area, where the value that reads as metal in a hairline reads as a yellow
     spotlight. */
  --gold-lamp:214,190,144;

  --color-accent:var(--gold);
}

/* The vertical scale, and the only four steps anything inside a band may use.
   Eleven values were in circulation for four jobs — 8, 10, 12, 14, 16, 18, 20,
   22, 24, 26, 30 — and the difference between 20 and 22 is not a decision
   anyone makes, it is a decision nobody made. Read down a page it registers as
   almost-aligned, which is worse than either alignment or contrast. */
:root{
  --s-tight:8px;    /* a label to the thing it labels */
  --s-inner:14px;   /* within one element: kicker to heading, figure to note */
  --s-between:18px; /* element to element: heading to prose */
  --s-group:32px;   /* group to group inside one band */
}

/* The interlinear scale, which the one above always had and this never did.
   Two tokens, for the two roles where a reader's eye crosses many lines and the
   rhythm has to be the same one every time.

   Display sizes are deliberately NOT here. Every line height on a heading is an
   optical decision about a particular size — a 64px headline closes to 1.06, a
   19px standfirst opens to 1.72 — and a token that averaged them would replace
   a dozen judgements with one compromise. A scale is for what repeats; the
   display line is set once, by eye, per size. */
:root{
  --lh-prose:1.75;  /* running text, 14–19px */
  --lh-note:1.7;    /* captions, credits, small print, 11–13px */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink-900);color:var(--ink-100);font-family:"Archivo",system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}

/* ---- the details that are noticed without being looked at --------------- */

/* Selection in the accent at low strength, and the text stays legible through
   it. The browser default is a blue that belongs to no palette. */
::selection{background:rgba(var(--gold-lamp),0.28);color:inherit}

/* A focus ring that sits far enough out to be read as attention rather than as
   a border, and follows the shape it is on rather than boxing it.

   IL COLORE NON PUO' ESSERE UNO SOLO, e per un anno lo e' stato: --gold. WCAG
   2.2 SC 1.4.11 «Non-text Contrast» chiede 3:1 di un indicatore di fuoco contro
   il fondo su cui si posa, e il #C9A96E e' scelto per le bande scure, dove
   misura 8.68:1. Sulle bande chiare misura 2.15:1.

   Misurato sul sito servito il 02.09.2026, spazzando i quarantotto indirizzi
   del sitemap: 127 elementi raggiungibili da tastiera stanno dentro una banda
   chiara — 103 collegamenti, e quattro volte i nove comandi del modulo di
   contatto. Chi compila il modulo della societa' con la tastiera non vedeva
   quale campo avesse il fuoco. Alla testata succedeva lo stesso ogni volta che
   passava sopra una banda chiara.

   PERCHE' IL CONTROLLO DEL DEPLOY NON LO VEDEVA. scripts/check_contrast.py
   misura coppie testo/fondo prese dalla tavolozza e dai token della testata;
   il colore di un outline non e' ne' l'uno ne' l'altro, e 1.4.11 non e' 1.4.3.
   home/tests/test_accessibility.py rifa' il conto su ogni fondo del sito.

   NESSUN COLORE NUOVO. Ogni banda dichiara gia' il proprio accento in --acc
   (blocks/_band.html: var(--gold) sulle scure, var(--gold-deep) sulle chiare)
   e la testata dichiara gia' il suo in --chrome-acc, che [data-over="light"]
   ribalta insieme al resto della chrome. L'anello prende quello. Dopo: 5.55:1
   sulla banda chiara e sulla testata ribaltata, 8.68:1 dove era gia' giusto.

   IL CASSETTO DEL TELEFONO E' L'ECCEZIONE, ed e' il motivo per cui la riga
   della testata non basta da sola: [data-mobnav] sta dentro <header> ma non si
   ribalta — e' una lastra sul fondo scuro della tavolozza ovunque si apra
   (si veda la sua regola piu' sotto). Con il solo --chrome-acc avrebbe preso
   #7E6128 sul #0D0D0D, cioe' 3.36:1: sopra la soglia, e un terzo di quello che
   aveva. Il difetto che si introduce riparando l'altro.  */
:root{--focus:var(--gold)}
[data-band]{--focus:var(--acc)}
[data-header]{--focus:var(--chrome-acc)}
[data-mobnav]{--focus:var(--gold)}
:focus-visible{outline:2px solid var(--focus,var(--gold));outline-offset:3px;border-radius:1px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--ink-900);padding:12px 20px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.skip-link:focus{left:0}

/* ---- the type scale -----------------------------------------------------
   Headings tighten as they grow and prose does not: a serif at fifty pixels
   set at the tracking of a paragraph reads as loose, and the same tracking on a
   paragraph reads as nothing at all. Declared once here rather than inline on
   every heading, so the relationship between the sizes is a rule instead of
   forty separate decisions. */
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance;overflow-wrap:break-word}
h1{letter-spacing:-0.028em}
h2{letter-spacing:-0.024em}
h3{letter-spacing:-0.016em}
p{margin:0}

/* German builds one word where English builds three, and a heading is the one
   place the column is narrow and the type is large. «Geldwäschereibekämpfung»
   is 24 characters that cannot be broken anywhere good, and on the German
   legal notice it is a sub-heading inside a 68-character measure. Hyphenation
   is the fix rather than break-word, because the browser knows German breaks
   at Geldwäscherei-bekämpfung and break-word would cut it wherever the line ran
   out. It needs the language, which <html lang> already declares. French gets
   it for the same reason; English and Italian do not, both because they need it
   far less and because hyphenation in a display serif is a decision, not a
   default. */
:lang(de) h1,:lang(de) h2,:lang(de) h3,:lang(de) h4,
:lang(fr) h1,:lang(fr) h2,:lang(fr) h3,:lang(fr) h4{hyphens:auto}

/* A serif at display size is drawn for print, where it is not asked to sit on a
   black ground. Half a hairline of negative weight takes back the thickening
   that a light-on-dark rendering adds. */
h1,h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Numbers align in columns wherever they are set, without asking. On a page of
   dates, article counts and register numbers, proportional figures wobble.

   `dt` si e' aggiunto dopo averlo misurato. In blocks/definitions.html il
   TERMINE e' la cifra — «≈42%», «≈23%», «≈11%», incolonnate una sotto l'altra —
   e la descrizione e' la prosa. La regola dava le figure tabulari al `dd`, cioe'
   alla prosa, e le negava al `dt`, cioe' all'unica colonna di numeri della
   pagina: esattamente al contrario. Il `dd` resta, perche' altrove porta cifre
   davvero, e su un testo senza numeri la dichiarazione non ha effetto. */
.tnum,dt,dd,time,[data-figure]{font-variant-numeric:tabular-nums}

/* The heavy tracking on the design's small uppercase labels leaves a gap after
   the final letter that reads as a misalignment against anything under them.
   Pulled back by exactly the tracking that caused it. */
p[style*="text-transform:uppercase"]{margin-right:-0.24em}

/* ---- rich text ----------------------------------------------------------
   The one place the markup is written by an editor rather than by a template,
   so it cannot carry inline styles. The static site set a margin on every
   paragraph by hand; here the rule does it once. */
.rich-text p+p{margin-top:var(--s-between)}
.rich-text ul,.rich-text ol{margin:var(--s-between) 0 0;padding-left:22px}
.rich-text li+li{margin-top:var(--s-tight)}
.rich-text li{line-height:var(--lh-prose)}
/* Strategic bold, which is the only kind worth having: the phrase a reader who
   is skimming must not miss. Set at 600 and in the band's foreground rather
   than at 700 in an inherited grey — the weight alone is the emphasis, and
   prose that turns a shade darker to make its point is shouting. */
.rich-text b,.rich-text strong{font-weight:600;color:var(--fg)}
/* a[href] e non a. Quando il bersaglio di un collegamento interno smette di
   essere pubblicato, home/wagtail_hooks.py restituisce <a> senza href — «a
   sentence that referred to a page which is no longer published should read as
   a sentence». Con il selettore largo il foglio di stile lo dipingeva lo
   stesso: accento, sottolineatura, e l'animazione qui sotto. Sembrava un
   collegamento in tutto tranne che nel funzionare. */
.rich-text a[href]{color:var(--acc);border-bottom:1px solid var(--rl2)}
/* An em inside prose is the legal register's own device — «fiduciario
   commercialista», «albo dei fiduciari» — and it is a Latin or Italian term of
   art, not emphasis. It keeps the italic and takes nothing else. */
.rich-text em{font-style:italic}

/* A hairline where two bands of the same colour meet. Without it the join is
   invisible and the sections read as one undifferentiated column of air. */
main > div > section + section,
main > section + section{border-top:1px solid var(--rl2)}
main > div > section[data-band="dark"] + section[data-band="dark"],
main > section[data-band="dark"] + section[data-band="dark"]{border-top-color:rgba(240,237,232,0.09)}

/* ---- i ritratti ----------------------------------------------------------
   Rimessa il 28 agosto 2026. `people.html` porta `class="grayscale"` fin dalla
   riscrittura, il vecchio sito la definiva esattamente così, e questa
   riscrittura non l'ha portata: la classe stava nel markup e non stilava
   niente. Un attributo class senza regola non dà nessun errore — non in
   pagina, non nel deploy, non nei test — e l'unico modo di accorgersene è
   guardare la pagina sapendo che cosa aspettarsi.

   Che cosa faceva, misurato sulle tre foto vere: i tre ritratti vengono da tre
   sedute diverse e a colori non stanno insieme — capelli ramati, una camicetta
   bianca, e due neri di fondo che non sono lo stesso nero (uno neutro, uno
   caldo di 4 punti su R-B). Desaturati diventano una serie. Non chiude la
   differenza fra lo sfondo grigio di uno e il nero degli altri due, che è di
   luminanza e non di colore: quella è una domanda per il fotografo. */
.grayscale{filter:grayscale(1) contrast(1.08)}

/* La vignettatura, chiesta il 28 agosto 2026. Non ripara la differenza fra i
   fondali — la accorcia. Luminanza media della striscia alta, misurata sulle
   renditions vere: 106 / 38 / 22 senza velo, 62 / 27 / 17 con. La distanza fra
   il più chiaro e il più scuro passa da 84 a 45.

   PERCHÉ NON DI PIÙ. Una taratura che chiude fino a 37 esiste, ed è quella che
   avevo mostrato in anteprima — ma era disegnata con un'ellisse sfocata, che è
   un operatore che un browser non ha. Riscritta come radial-gradient e misurata
   contro il riquadro del viso di ciascuna delle tre foto, quella taratura
   scurisce un viso (alfa 0,076). Il vincolo è che i visi non si toccano: la
   linea degli occhi di Benedetti sta al 32% dell'altezza, cioè proprio dove
   servirebbe scurire. Fra le tarature che lo rispettano, questa è la più
   efficace: alfa media sul viso 0,047 su Camponovo e meno sugli altri due.

   L'ordine conta e non è quello che sembra: `filter` sta sul contenitore e
   ::after è un suo figlio, quindi il browser compone immagine + velo e POI
   filtra il risultato. Con contrast() attorno a 0,5 le due sequenze danno
   numeri diversi; i 45 qui sopra sono misurati nell'ordine del browser.

   `:has(img)` NON è ornamentale. Lo stesso contenitore ospita il monogramma,
   quando una persona non ha ritratto: è una targa piatta sulla tinta della
   banda, e scurirle gli angoli non legge come un'intenzione, legge come una
   macchia. Il velo vale solo dove c'è una fotografia. */
.grayscale:has(img)::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 78% 68% at 50% 42%,
             rgba(10,10,10,0) 32%,
             rgba(10,10,10,.42) 64%,
             rgba(10,10,10,.94) 100%);
}

/* ---- motion, meant to be felt ------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  /* Body links draw their rule from the left over a third of a second. The
     instant appearance of an underline is the single commonest tell of a
     template; a line that is drawn was decided on. */
  .rich-text a[href]{
    background-image:linear-gradient(currentColor,currentColor);
    background-repeat:no-repeat;
    background-position:0 100%;
    background-size:0 1px;
    border-bottom:0;
    transition:background-size .42s cubic-bezier(.22,1,.36,1);
  }
  .rich-text a[href]:hover,.rich-text a[href]:focus-visible{background-size:100% 1px}

  html.ibex-js [data-reveal]{opacity:0;transform:translateY(16px)}
  html.ibex-js [data-reveal].is-in{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1)}
}

/* ---- where one band meets the next --------------------------------------
   Each band draws its own contours, so a line that runs into the boundary is
   cut there — and a sliced contour is the one thing on this background that
   reads as a seam. The texture fades out over the last seven per cent of each
   band instead. It is a mask on the layer, not a gradient over the content, so
   nothing is painted on top of the text and the band colour stays exactly what
   the palette says. */
ibex-atmosphere{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
}
/* The hero opens the page: there is nothing above it to dissolve into, and
   fading its top edge would leave the first screen emptier than it is. */
main > div > section:first-child ibex-atmosphere,
main > section:first-child ibex-atmosphere,
main > header:first-child ibex-atmosphere{
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 93%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 93%,transparent 100%);
}

/* ---- la fotografia nella hero -------------------------------------------
   Lo stambecco del Piz Nair sulla home, in due forme.

   Sopra 900 prende quasi meta' della larghezza e tre quarti dell'altezza: un
   pannello alto, ancorato a destra, che si dissolve verso il testo invece di
   finire con un bordo. Non c'era
   spazio per tanto finche' i due pulsanti stavano nella colonna destra della
   griglia — a quel punto il pannello doveva chiudersi prima di loro e stava
   nel 36% della larghezza. La griglia della home passa a colonna sola e la
   destra si libera: e' la riga `[data-heropic] [data-herogrid]` piu' sotto, ed
   e' il perno di tutta questa composizione.

   Sotto 900 quel vuoto non c'e' piu' e la fotografia diventa una fascia in
   cima alla sezione, prima del testo. In cima e non in fondo: il motivo per
   cui questa immagine esiste e' che caricando il sito non se ne vedeva
   nessuna, e una fotografia in fondo alla hero sarebbe di nuovo sotto la
   piega su un telefono. 900 e non un numero scelto qui: e' dove commutano il
   menu, la griglia della hero e ogni altra coppia di colonne del sito, e un
   secondo punto di rottura vicino al primo si nota.

   IL RITAGLIO NON E' NEL CSS. object-position sposta una finestra dentro un
   file gia' tagliato; i due file li taglia scripts/prepare_hero_photo.py, uno
   per forma. Un ritaglio solo, girato fra un pannello 0.81:1 e una fascia
   1.8:1, taglia le corna in una delle due — che e' il difetto gia' pagato una
   volta sulla banda fotografica.

   I COLORI NON SONO QUI. La didascalia usa --fg e --mut della banda, come
   ogni altro testo del sito, ed e' quello che la fa stampare: il foglio di
   stampa ribalta quei due token in inchiostro e la didascalia segue. Il velo
   e' l'unica cosa che non puo' seguire, perche' un gradiente non e' un token,
   e infatti porta data-veil e la stampa lo spegne. */
[data-heroland]{position:relative;z-index:1}
/*  68vw, e la ragione e' aritmetica. Un'altezza in vw tiene un rapporto
    COSTANTE su tutta la fascia in cui vale — qui 1.47:1 contro l'1.55:1 del
    ritaglio, cioe' la fascia e' appena piu' stretta della fotografia e non ne
    taglia NIENTE in altezza a nessuna larghezza. Con l'altezza fissa che
    c'era prima, a 768 la finestra scendeva al 56% e la banda diventava mezzo
    cielo vuoto con l'animale in un angolo: simulato ritaglio per ritaglio,
    non guardato, perche' e' un difetto della cornice e uno scatto a schermo
    intero lo attraversa senza vederlo.  */
[data-heropanel]{position:relative;overflow:hidden;height:clamp(230px,68vw,540px)}
[data-heropanel] picture{display:block;width:100%;height:100%}
[data-heropanel] img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  /* La stessa desaturazione della banda fotografica, un filo meno scura:
     qui sopra ci va del testo solo sul bordo che si dissolve, non sopra la
     fotografia intera. */
  filter:saturate(.22) contrast(1.14) brightness(.82);
}
[data-heropanel] [data-veil]{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(13,13,13,.55) 0,rgba(13,13,13,0) 24%,rgba(13,13,13,0) 56%,rgba(13,13,13,.97) 100%);
}
[data-herocredit]{
  margin:0;padding:clamp(10px,1.2vw,14px) clamp(20px,4vw,64px) 0;
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  line-height:var(--lh-note,1.6);color:var(--mut);
}
[data-herocap]{
  display:block;margin-bottom:5px;
  font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--fg);
}
[data-herocredit] a{color:inherit;text-decoration:underline;text-underline-offset:3px}

@media (min-width:900px){
  /* Il pannello sanguina fino al bordo destro della sezione, non del
     contenitore: fermarlo sul contenitore lascerebbe una colonna di fondo
     scuro alla sua destra su ogni schermo sopra i 1800.

     bottom:0 NON E' DECORAZIONE. Senza, il riquadro ha altezza automatica, e
     una percentuale di altezza contro un contenitore ad altezza automatica non
     risolve: misurato a 900, `min(62%,640px)` dava 206.77px — ne' il 62% della
     sezione ne' i 640 del limite, ma il residuo di una dipendenza circolare
     fra il figlio e il padre. Con top e bottom fissati l'altezza del padre e'
     definita e il 52% e' il 52%.

     pointer-events: il riquadro copre il terzo destro di tutta la sezione,
     dove piu' in basso stanno i due pulsanti. Stanno sopra per z-index e i
     clic gia' li raggiungono; questo lo rende vero per costruzione invece che
     per ordine di dipintura. Il link della licenza se li riprende: e' l'unica
     cosa cliccabile qui dentro, ed e' anche l'adempimento. */
  [data-heroland]{position:absolute;top:0;right:0;bottom:0;z-index:0;width:min(48%,720px);pointer-events:none}
  [data-herocredit] a{pointer-events:auto}
  /*  LA COLONNA DESTRA DELLA GRIGLIA VIENE CHIUSA, ed e' questa riga che
      lascia crescere la fotografia. La hero manda in griglia il sommario e i
      due pulsanti, e sopra i 900 i pulsanti stanno a destra: cioe' sotto il
      pannello. Finche' ci stanno, l'altezza della fotografia e' vincolata a
      chiudersi prima di loro — misurato, il 48% della sezione, oltre il quale
      la didascalia entrava nei pulsanti. A colonna sola sommario e pulsanti si
      impilano a sinistra, la destra si libera per intero e il pannello passa
      dal 48% al 74% di altezza e dal 36% al 48% di larghezza: poco piu' del
      doppio dell'area, 2.1 volte, uguale a ogni larghezza perche' i due
      fattori sono entrambi proporzioni.

      !important perche' la griglia non e' dichiarata in un foglio: la scrive
      ibex-layout.js come stile in linea, a 900. Un foglio non batte uno stile
      in linea senza questo, e riscrivere il ramo nel JS metterebbe una
      decisione di composizione di UNA pagina dentro il motore che impagina
      TUTTE le bande del sito.  */
  [data-heropic] [data-herogrid]{grid-template-columns:minmax(0,1fr) !important}
  /* 74%. Sotto il pannello ci va ancora la didascalia, e sotto di lei ormai
     non c'e' piu' niente a destra — resta solo da non arrivare in fondo alla
     sezione, dove la banda finisce e comincia quella dopo. */
  [data-heropanel]{
    height:74%;
    /* Non c'e' un bordo, c'e' una fine. La dissolvenza comincia larga —
       .42 gia' al 18% — perche' l'animale occupa i due terzi sinistri del
       ritaglio e una maschera piu' stretta se ne mangerebbe la groppa. */
    -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.42) 18%,rgba(0,0,0,.90) 46%,#000 70%);
    mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.42) 18%,rgba(0,0,0,.90) 46%,#000 70%);
  }
  [data-heropanel] img{object-position:50% 50%}
  /* Allineata alla fotografia e non al contenitore: e' la didascalia di
     quella, non della pagina. */
  [data-herocredit]{padding:14px 26px 0 clamp(20px,3vw,40px);text-align:right}
  /*  IL TITOLO SI FERMA PRIMA DEL PANNELLO, e questa riga e' una correzione,
      non una rifinitura. 19ch e' scritto in linea nel template ed e' una
      misura tipografica: conta i caratteri, non lo spazio rimasto. In tedesco
      «Um die Schweiz kümmern» ci sta dentro e a 900 arriva a 652 pixel, dove
      il pannello comincia a 570 — misurato, si sovrapponevano davvero, e la
      didascalia della fotografia passava attraverso la terza riga del titolo.
      Il 50% e' la larghezza oltre la quale il testo entrerebbe nel pannello a
      ogni larghezza fra 900 e 1920, ora che il pannello e' largo il 48%. In
      italiano non cambia niente: le righe sono gia' piu' corte del limite. In
      tedesco aggiunge una riga, che e' il prezzo, e va pagato qui e non
      lasciato al caso della lingua.
      !important perche' il valore che scavalca sta in un attributo style.  */
  [data-heropic] h1{max-width:min(19ch,50%) !important}
  /*  E lo stesso per il sommario, che finora non aveva mai raggiunto il
      pannello perche' il pannello era stretto. A 900 il pannello comincia a
      463 e il limite ferma il paragrafo a 445; senza, le 58 battute lo
      porterebbero sopra la meta' opaca della fotografia. 58ch resta il valore
      su ogni altra pagina — qui e' solo il minore dei due.  */
  [data-heropic] [data-herogrid] > p{max-width:min(58ch,50%) !important}
  /*  E ANCHE I PULSANTI, che non sono testo e non avevano un limite. Chiudere
      la colonna destra li ha resi larghi quanto tutta la griglia: misurato a
      900, il loro contenitore andava da 36 a 854 e il secondo pulsante
      finiva a 587, dentro la didascalia che comincia a 463. Con il limite si
      impilano quando non ci stanno affiancati, che e' quello che il flex-wrap
      gia' sa fare — mancava solo qualcosa contro cui misurarsi.  */
  [data-heropic] [data-herogrid] > div{max-width:50%}
}

/* ── the chrome, and the band under it ─────────────────────────────────────
   The header lies on whatever band is passing beneath it, and inverts. Both
   states are here, as two sets of the same six tokens; ibex-chrome.js does
   nothing but put data-over="light" on <html> when the band under the probe
   line is a light one.

   This is the fix for a defect the palette audit found and that nothing else
   could have. The script used to write these colours itself, as literals, onto
   five selectors — and [data-burger], [data-mobbtn] and [data-navlink] were
   never in the markup, while --lang-on and --lang-off were set on the header
   and read by nobody. Over a light band the header background went light and
   the navigation did not: #A79F96 links at 2.50:1 and a #F0EDE8 active link at
   1.12:1, which is white on white. It looked correct from every dark band, and
   the dark bands are where anybody testing it would have started.

   Every value below is measured by scripts/check_contrast.py against the
   ground it sits on, in both states, and the deploy stops if one drops under
   WCAG AA. That is the whole reason the colours had to come out of the script:
   a stylesheet can be read by arithmetic and a sequence of assignments cannot.

   The DARK values are the ones the site has always had. The LIGHT ones are new,
   because there were none — three of them had to be chosen, and each is the
   band's own equivalent from the palette rather than a fresh colour. */
:root{
  --chrome-bg:rgba(13,13,13,0.90);
  --chrome-rule:rgba(240,237,232,0.14);
  --chrome-fg:#F0EDE8;                     /* --ink-100, active link   16.6:1 */
  --chrome-mut:#A79F96;                    /* --ink-060, other links    7.4:1 */
  --chrome-acc:#C9A96E;                    /* --gold, CTA and current   8.7:1 */
  --chrome-off:#8C857D;                    /* --ink-045, other langs    5.3:1 */
  --chrome-edge:rgba(240,237,232,0.24);    /* the burger's box */
}
[data-over="light"]{
  --chrome-bg:rgba(251,250,248,0.92);
  --chrome-rule:rgba(26,24,23,0.14);
  --chrome-fg:#1A1817;                     /* --paper-900              17.0:1 */
  --chrome-mut:#635C53;                    /* --paper-500               6.3:1 */
  --chrome-acc:#7E6128;                    /* --gold-deep               5.6:1 */
  --chrome-off:#6E6760;                    /* --paper-045               5.3:1 */
  --chrome-edge:rgba(26,24,23,0.22);
}

[data-header]{background:var(--chrome-bg);border-bottom:1px solid var(--chrome-rule)}

[data-desknav]{display:none;align-items:center;gap:clamp(12px,1.35vw,22px)}
[data-navlink]{font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--chrome-mut);padding:4px 0;border-bottom:1px solid transparent;transition:color .4s ease,border-color .4s ease}
[data-navlink][data-active="1"]{color:var(--chrome-fg);border-bottom-color:var(--chrome-acc)}

[data-desklang]{display:none;align-items:center;gap:1px}
[data-lang-btn]{padding:6px 7px;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--chrome-off);transition:color .4s ease}
[data-lang-btn][aria-current]{color:var(--chrome-acc)}

[data-headercta]{display:none;border:1px solid var(--chrome-acc);color:var(--chrome-acc);padding:11px 18px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;transition:background .25s ease,color .25s ease,border-color .4s ease}

[data-mobmenu]{position:relative}
[data-mobmenu] summary::-webkit-details-marker{display:none}
[data-mobbtn]{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid var(--chrome-edge);cursor:pointer;padding:0 11px;list-style:none}
[data-burger]{display:block;height:1px;background:var(--chrome-fg)}

/* The mobile panel is a sheet over the whole page rather than a strip lying on
   one band, so it does not invert: it is the palette's dark, wherever it
   opens. */
[data-mobnav]{position:fixed;left:0;right:0;top:89px;z-index:99;border-top:1px solid rgba(240,237,232,0.14);background:var(--ink-900);max-height:calc(100dvh - 89px);overflow-y:auto;display:flex;flex-direction:column;padding:8px clamp(20px,4vw,64px) 28px}
[data-mobnav] > a{padding:15px 0;border-bottom:1px solid rgba(240,237,232,0.14);font-family:var(--serif);font-size:21px;color:var(--ink-100)}
[data-mobnav] [data-mobcta]{margin-top:26px;border-bottom:0;font-family:var(--sans);background:var(--gold);color:var(--ink-900);padding:16px 20px;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
[data-moblang]{display:flex;gap:14px;margin-top:24px}
[data-moblang] a{padding:8px 0;font-size:12px;font-weight:600;letter-spacing:.14em;color:#8C857D}
[data-moblang] a[aria-current]{color:var(--gold)}

@media (min-width:1180px){
  [data-desknav]{display:flex}
  [data-desklang]{display:flex}
  [data-headercta]{display:inline-block}
  [data-mobmenu]{display:none}
}

/* Four columns is one per group. Below 900 they would be 180px wide and a page
   title would break across three lines, so they become one column. */
@media (max-width:900px){
  [data-footgrid]{grid-template-columns:minmax(0,1fr) !important}
}

/* Il telefono e l'indirizzo nel piede, che erano gli unici due bersagli della
   pagina sotto misura.

   Misurati a 1440px: alti 14 pixel, e i due centri a 20,7 pixel l'uno
   dall'altro. Il 2.5.8 (AA) chiede 24×24, oppure — per un bersaglio piu'
   piccolo — che due cerchi di 24 pixel di diametro centrati sui due non si
   tocchino. 20,7 contro 24: mancavano 3,3 pixel. Gli altri diciannove
   bersagli sotto misura della pagina passano tutti per spaziatura; questi due
   no, perche' stanno in due paragrafi separati da sei pixel.

   Ventiquattro pixel di altezza soddisfano il criterio invece di un'eccezione,
   e portano i centri a 30,5: passano anche per spaziatura, con margine. Il
   piede cresce di venti pixel su 549.

   LA SPECIFICITA' E' LA REGOLA, non un dettaglio. `[data-contact]` vale (0,1,0)
   e sta SOTTO al `footer a[href]` di ibex-responsive.css, che vale (0,1,2):
   su un puntatore grossolano vince quello e questi due restano a 44 pixel come
   ogni altro link del piede. Un selettore piu' preciso — `footer p
   a[href^="tel:"]` — vincerebbe lui, e ridurrebbe il bersaglio sul telefono da
   44 a 24 mentre sembra che lo stia allargando.

   Non si usa l'imbottitura del blocco telefono qui sotto, che sembra fatta
   apposta: quella regola vive dentro @media (max-width:640px) e non tocca il
   desktop, dov'e' il difetto. E i suoi 13px con margine negativo lascerebbero
   qui due scatole da 40 pixel a 20,7 di distanza, sovrapposte per venti —
   meta' del numero di telefono aprirebbe la posta.

   Quella regola portava anche un secondo selettore, [data-linkbtn], che
   nessun elemento ha mai avuto: tolto il 02.09.2026 con ESC-22. Il
   ragionamento qui sopra riguarda l'imbottitura e non il gancio, quindi resta
   intero senza di esso — ed e' il motivo per cui vale la pena tenerlo scritto:
   e' la misura che spiega perche' [data-contact] sta a 24 e non a 44. */
[data-contact]{min-height:24px;display:inline-flex;align-items:center}

/* ---- the phone, which is not the desktop made smaller -------------------- */
@media (max-width:640px){
  /* Sixteen pixels in a 335px column reads at forty-two characters a line,
     below the forty-five where prose stops feeling choppy. Fifteen buys the
     three that were missing without the text becoming small.

     !important because this site styles almost everything inline, and an
     inline declaration beats any selector. It is not a shortcut here, it is
     the only way a stylesheet can speak at all. */
  .rich-text,.rich-text p,.rich-text li,main dd,main li{font-size:15px !important}

  /* A standalone link is a target on a phone, and these were seventeen pixels
     tall. The padding is vertical only and negative-margined back out, so
     nothing moves — the target grows, the design does not.

     a[href]: un'ancora senza href non è un bersaglio, e allargarla darebbe
     43 px di area di tocco a una parola su cui non si può toccare niente. */
  .rich-text a[href]{padding-block:13px;margin-block:-13px;display:inline-block}
}