/* fonts.css — site layer over the Open Design kit (tokens.css + site.css kept verbatim).
   Page infrastructure only: self-hosted Inter declared for the web, AA ink tokens for
   the light theme, the dark-theme flip + sizing/alignment of the brand mark, optical
   alignment of icons with their labels, contact-link wrapping, and the hero figure /
   imagery layout. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-semibold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-bold.woff2") format("woff2");
}

/* logo-mark.svg ships with dark strokes (#242629) + sage spark (#829F68) and its own
   prefers-color-scheme:dark block. In Chrome that query follows the embedding
   document's color-scheme, so under [data-theme="dark"] the strokes self-lighten and
   the invert filter painted them back to near-black on the dark paper (audit i1-f1:
   0.49% ink, 2.52:1). Pinning the <img> to the light scheme keeps the dark ink
   canonical in both themes; the filter alone flips it (invert preserves the geometry
   on the warm dark surface; hue-rotate keeps the spark sage). The favicon file keeps
   its own block for standalone use. */
.logo { color-scheme: light; }
[data-theme="dark"] .logo {
  filter: invert(1) hue-rotate(180deg);
}

/* Brand mark sizing + optical alignment: the kit aligns .brand and .footer-inner
   to the text baseline, and an <img>'s baseline is its bottom edge — so the mark
   hung entirely above the name line (measured: center 8px high in the header,
   10px in the footer) and its 28px read undersized. Center each instance on its
   lockup and give the mark presence. */
.brand { align-items: center; }
.brand .logo { height: 44px; }
.header-inner { min-height: 68px; }
.hero .logo { height: 60px; }
.footer-inner { align-items: center; }
.site-footer .logo { height: 34px; }

/* AA ink for the light theme (audit i1-f3 / i1-f4): tokens.css ships
   --ink-secondary/--ink-muted at #8c8c8c = 3.36:1 on white, under the 4.5:1 floor
   for the 10px labels (.handle, .fact-label, .kv dt) and ~92% of visible light-theme
   text. Site-layer redefinition, scoped so the dark block in tokens.css is untouched. */
:root:not([data-theme="dark"]),
[data-theme="light"] {
  --ink-secondary: #595959; /* 7.0:1 on white · 6.4:1 on --surface */
  --ink-muted: #6b6b6b;     /* 5.3:1 on white · 4.9:1 on --surface */
}

/* Icon optical alignment: site.css aligns several icon containers to the text
   baseline; these additive rules center each icon with its label.
   Nav (audit i1-f5): the kit leaves 0px between icon and label — give it the same
   0.4rem breathing room the other groups already have. */
.nav--primary a { display: inline-flex; align-items: center; gap: 0.4rem; }
.contact-links a { align-items: center; flex-wrap: wrap; white-space: normal; }
.contact-mail { display: inline-flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.kv dt { display: flex; align-items: center; gap: 0.4rem; }
.fact-label { display: flex; align-items: center; gap: 0.4rem; }
/* Contact links (audit i1-f2): at 4 columns the icon + mono handle overflow the
   ~217px cell — the ↗ lands on the next icon (LinkedIn @1440: link 225px in a
   216.5px cell). Below 1300px go 2-up; the kit already drops to 2 columns ≤1020px
   and 1 column ≤680px, so the band starts at 681px. The wrap above is the safety
   net for the 4-column range. */
@media (min-width: 681px) and (max-width: 1299px) {
  .contact-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Imagery (kit classes) */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-grid .figure { margin-top: 0; }
/* Hero portrait is a CUTOUT (U2Net + alpha matting, backdrop removed): no plate —
   a border/background would draw a rectangle behind the transparent silhouette. */
.hero-grid .portrait-cutout { display: block; width: 100%; height: auto; }
/* 60% of this portrait is near-black (black shirt): on the warm dark paper it
   measured 1.58:1 average — the silhouette would vanish and leave a floating
   head. A gentle brightness lift keeps the mass readable in dark; light theme
   is untouched (11.98:1). */
[data-theme="dark"] .hero-grid .portrait-cutout { filter: brightness(1.35); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Stacked hero (audit i1-f7): cap the portrait at its desktop column width. */
  .hero-grid .figure { max-width: 24rem; }
}
.image-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.image-grid--two img:nth-of-type(1) { object-position: 50% 20%; }
/* Intesa facade (audit i1-f8): at 30% the INTESA SANPAOLO sign (rows ~64% of the
   source) fell below the frame; 55% keeps sign and banner in view. */
.image-grid--two img:nth-of-type(2) { object-position: 50% 55%; }

/* Experience strip (audit i1-f6): the Intesa wordmark is ~8.9:1 wide — at the kit's
   fixed 3rem height it filled the whole strip and pushed the other four logos off
   canvas. Cap only that logo (class in index.html); height:auto preserves its ratio
   instead of squashing it under max-width. */
.logo-strip .logo-wordmark { height: auto; max-height: 3rem; max-width: 13.75rem; }
/* Org logos are dark-on-transparent: on dark paper they'd vanish. */
[data-theme="dark"] .logo-strip img { filter: grayscale(1) invert(1); opacity: 0.55; }
[data-theme="dark"] .logo-strip img:hover { filter: grayscale(1) invert(1); opacity: 1; }