/* SynOct · BUILT BY TITANS · the footer mark, v2 (30 Sep 2026).
   The brief: the mark goes on every public site, links back to the SynOct site, is sized to the page and to where it sits in the footer, and is small and tastefully sized.
   v1 (band up to 640 px, about 350 px on a laptop) was too big. v2 is a small badge.

   THE LAW. The supplied artwork is a MASTER (1916 x 821, 758 KB, two thirds of it empty black). A page never uses it at that size and never
   links it. Every page uses the kit's cropped, resized copies (240 to 640 px wide) through <picture>/srcset, and this file decides how large
   the mark is in its SLOT. The slot width below and the `sizes` attribute in the snippets are the SAME expression, so the browser fetches the
   copy that fits the slot (never a bigger one, never a blurry smaller one).

     band    the mark sits alone on its own row of the footer, centred:   clamp(184px, 15vw, 280px)
             184 px on a phone, about 216 px at 1440, 280 px (the cap) from about 1870 px and on 4K. Height follows the artwork
             (1846 : 420): about 42 px on a phone, about 49 px at 1440, 64 px at the cap. The floor is 184 px, not less, because the
             small tagline inside the artwork ("BUILT BY TITANS") smears below that on ordinary-density screens.
     inline  the mark sits inside a footer column or legal row:           min(100%, 200px)
             never wider than its column, never wider than 200 px (45 px tall at most).

   Height is never set: it follows the width (aspect-ratio 1846 / 420), so the mark cannot be squashed or stretched. The mark is neon on
   black, so it always carries its own black plate (the link), a small rounded badge: on a dark footer it melts in, on a light footer it reads
   as a deliberate badge and not as a full-width black bar. The row around the band is transparent and slim (at most 18 px above and below).
   Nothing here changes the site's own footer content, colours or links. */
.sy-titans {
  --sy-w: clamp(184px, 15vw, 280px);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: clamp(10px, 1.1vw, 18px) clamp(12px, 3vw, 24px);
  background: transparent;
  line-height: 0;
}
.sy-titans:not(.sy-titans--inline) { grid-column: 1 / -1; }   /* in a grid footer the band takes a full row of its own (in a wrapping flex footer its 100% width does the same) */
.sy-titans__link {
  display: block;
  box-sizing: border-box;
  width: var(--sy-w);
  max-width: 100%;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
}
.sy-titans__link:focus-visible { outline: 2px solid #ff6a1f; outline-offset: 3px; }
.sy-titans__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1846 / 420;
}
.sy-titans__link:hover .sy-titans__img { filter: brightness(1.12); }

.sy-titans--inline {
  --sy-w: min(100%, 200px);
  display: block;
  width: var(--sy-w);          /* its own width, so that inside a flex or grid footer it never collapses to its content */
  max-width: 100%;
  flex: 0 0 auto;
  margin: 12px 0 0;
  padding: 0;
}
.sy-titans--inline .sy-titans__link { width: 100%; }

@media (forced-colors: active) {
  .sy-titans, .sy-titans__link { forced-color-adjust: none; }
}
@media print {
  .sy-titans__link { break-inside: avoid; background: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}