/* Shared base for the example websites in /demo/ (2026-09-26).
   Each example keeps its own brand in an inline <style>; this file holds only what they all share:
   the "Example by Azoth" strip, the no-script language switch and the Azoth band at the end.
   Language switch: three radio buttons sit before .site; [data-l] elements show for the checked one.
   Put data-l only on inline wrappers or plain blocks (span, p, h1-h3, li, a), never on layout boxes,
   because "display: revert" hands them back the browser default. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---- language switch ------------------------------------------------------ */
.lang-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* .site raises this above any single-class rule, so a slip hides the other languages instead of showing all three */
.site [data-l] {
  display: none;
}

#l-sq:checked ~ .site [data-l=sq],
#l-en:checked ~ .site [data-l=en],
#l-it:checked ~ .site [data-l=it] {
  display: revert;
}

.langs {
  display: flex;
  gap: 0.35rem;
}

.langs label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.55;
}

#l-sq:checked ~ .site label[for=l-sq],
#l-en:checked ~ .site label[for=l-en],
#l-it:checked ~ .site label[for=l-it] {
  opacity: 1;
}

.lang-radio:focus-visible ~ .site .langs {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 999px;
}

/* ---- the strip that says this is an example ------------------------------- */
.az-strip {
  margin: 0;
  padding: 0.55rem 1rem;
  background: #17120f;
  color: #ede6d8;
  font: 500 0.78rem/1.4 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
  text-align: center;
}

.az-strip a {
  color: #d9b86c;
  white-space: nowrap;
}

/* ---- the Azoth band at the end --------------------------------------------- */
.az-band {
  padding: 3rem 1rem;
  background: #17120f;
  color: #ede6d8;
  font-family: 'Instrument Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.az-band__inner {
  max-width: 44rem;
  margin: 0 auto;
}

.az-band__eyebrow {
  margin: 0 0 0.75rem;
  color: #b08d49;
  font: 500 0.8rem/1.4 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.az-band__text {
  margin: 0;
  font: 500 clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem)/1.25 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 72, 'WONK' 1;
}

.az-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin: 1.5rem 0 0;
}

.az-band__wa {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 1.4rem;
  background: #6e1319;
  border: 1px solid #8e1b22;
  color: #f3e9d8;
  font: 500 0.85rem/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
}

.az-band__wa:hover {
  background: #8e1b22;
}

.az-band__more {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  font: 500 0.85rem/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-underline-offset: 0.35em;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}