:root {
  color-scheme: dark;
  --background: #131516;
  --text: #ece9e2;
  --red: #e08577;
  font-family: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--text); }
main { min-height: 100svh; display: grid; place-items: center; padding: 40px 20px; }
.landing { width: min(100%, 1280px); }
h1 { margin: 0; font-size: inherit; font-weight: normal; }
/* Preserve the hand-set ASCII spacing. */
.ascii, .subtitle-art, .button-art {
  white-space: pre;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0;
}
.ascii {
  display: block;
  font-weight: 900;
  font-size: clamp(4px, 1.48vw, 20px);
  line-height: 1.22;
  text-align: center;
  color: var(--red);
  filter: url('#ascii-thicken');
}
/* Two identical colour cycles make the animation loop seamless. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .ascii {
    background-image: linear-gradient(90deg, #ef6565 0%, #efa45c 7%, #e5d866 14%, #6bd69b 21%, #66b4ed 28.5%, #a879ed 35.5%, #e875b6 42.5%, #ef6565 50%, #efa45c 57%, #e5d866 64%, #6bd69b 71%, #66b4ed 78.5%, #a879ed 85.5%, #e875b6 92.5%, #ef6565 100%);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: title-rainbow 10s linear infinite;
  }
}
@keyframes title-rainbow {
  from { background-position: 100% 50%; }
  to { background-position: 0% 50%; }
}
.svg-filters { position: absolute; pointer-events: none; }
.subtitle { margin: 26px 0 0; text-align: center; }
.subtitle-art {
  display: inline-block;
  font-size: clamp(4px, 1.12vw, 14px);
  font-weight: 900;
  line-height: 1.2;
  text-align: left;
  -webkit-text-stroke: .35px currentColor;
  paint-order: stroke fill;
}
.socials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 3vw, 40px); margin: 42px auto 0; }
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  container-type: inline-size;
  min-width: 0;
  min-height: 90px;
  padding: 47px 8px 18px;
  border: 1px solid #535251;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.button-art { display: block; font-size: 2.35cqw; font-weight: normal; line-height: 1.15; text-align: left; }
.platform-icon { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; fill: currentColor; }
.button--discord:is(:hover, :focus-visible) { background: #5865f2; border-color: #5865f2; color: #fff; }
.button--youtube:is(:hover, :focus-visible) { background: #c90000; border-color: #ff0033; color: #fff; }
.button--instagram:is(:hover, :focus-visible) { background: linear-gradient(120deg, #7139a5, #a92b71 55%, #9b411b); border-color: #e5789e; color: #fff; }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.clan-intro { max-width: 760px; margin: 32px auto 0; color: #bfc0bd; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; text-align: center; text-wrap: pretty; }
/* Instagram hosts all media. Reserve frame space and defer loading. */
.instagram-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(140px, 22svh, 260px); align-items: start; }
.reel-card { min-width: 0; }
.reel-card iframe { display: block; width: 100%; height: 640px; border: 0; background: transparent; color-scheme: light; }
.reel-fallback { display: block; padding: 14px 4px; color: #bfc0bd; font-size: 12px; text-align: center; text-decoration: none; }
.reel-fallback:hover { color: var(--red); }
@media (max-width: 1050px) {
  .instagram-media { grid-template-columns: 1fr; width: min(100%, 440px); margin-inline: auto; }
}
@media (max-width: 640px) {
  .socials { grid-template-columns: 1fr; width: min(100%, 380px); gap: 16px; }
}
@media (max-width: 540px) {
  main { padding-inline: 12px; }
  .ascii { font-size: 1.48vw; }
  .subtitle { margin-top: 20px; }
  .socials { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
  .ascii { animation: none; }
}
@media (forced-colors: active) {
  .ascii { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; filter: none; animation: none; }
}


/* Keep the introduction on the first screen and Reels below the fold. */
.intro-screen { min-height: calc(100svh - 40px); display: flex; flex-direction: column; justify-content: center; }
.intro-screen .socials { width: 100%; }
.instagram-media { margin-top: clamp(64px, 10svh, 120px); }
@media (max-width: 640px) { .intro-screen .socials { width: min(100%, 380px); } }