/* ==========================================================================
   Shadalac Games! – homepage
   Fonts: Bangers (display) + Parkinsans (body). Both SIL OFL, see assets/fonts.

   Layout approach
   - Mobile first (< 1000px): a normal stacked layout.
   - Desktop (>= 1000px): the hi-fi comp is built on a 1440px canvas, so every
     measurement is written as  calc(var(--u) * <px at 1440>)  and scales with the
     width of the page (capped at 1920px). Change --u and the whole page rescales.
   ========================================================================== */

@font-face {
  font-family: "Bangers";
  src: url("../fonts/Bangers-Regular.woff") format("woff");
  font-weight: var(--font-weight-display);
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Parkinsans";
  src: url("../fonts/Parkinsans-VariableFont_wght.woff") format("woff");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}


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

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-on-dark);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--color-yellow); color: var(--text-on-light); padding: 10px 16px; font-weight: var(--font-weight-bold);
}
.skip-link:focus { top: 12px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* the page wrapper is a size container so cqw ignores the scrollbar width */
.page { container-type: inline-size; overflow-x: clip; }
.page__inner {
  --u: calc(min(100cqw, var(--layout-canvas-max)) / var(--layout-canvas));
  max-width: 1920px;
  margin-inline: auto;
  position: relative;
  background: var(--surface-page);
}

/* --------------------------------------------------------------------------
   Shared bits: sticker titles + buttons
   -------------------------------------------------------------------------- */
.sticker {
  --stroke: var(--sticker-stroke-pink);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-display);
  font-style: normal;
  text-transform: uppercase;
  color: var(--sticker-fill);
  line-height: .9;
  letter-spacing: .01em;
  -webkit-text-stroke: var(--sticker-stroke-width) var(--stroke);
  paint-order: stroke fill;
  stroke-linejoin: miter;
  transform: rotate(var(--sticker-rotate)) skewX(var(--sticker-skew)) scaleY(var(--sticker-scale-y));
  transform-origin: left bottom;
}
.sticker--blue   { --stroke: var(--sticker-stroke-blue); }
.sticker--pink   { --stroke: var(--sticker-stroke-pink); }
.sticker--accent { --stroke: var(--accent, var(--color-blue-deep)); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-family-display); font-style: normal; text-transform: uppercase;
  font-size: var(--font-size-2xl); line-height: 1;
  color: var(--text-on-dark); text-decoration: none; border: 0; cursor: pointer;
  padding: 0 28px; height: 52px;
  transition: transform var(--motion-fast) ease, filter var(--motion-fast) ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn span { display: inline-block; transform: skewX(var(--button-skew)); }
.btn--green { background: var(--action-success); }
.btn--pink  { background: var(--action-secondary); }

/* ==========================================================================
   MOBILE / TABLET (default)
   ========================================================================== */

/* ---- header ---- */
.site-header { position: relative; z-index: 30; height: 64px; background: var(--surface-page); }
.site-header__logo { position: absolute; left: 0; top: 0; z-index: 2; }
.site-header__logo img { width: 230px; height: auto; }

.nav-toggle {
  position: absolute; right: 12px; top: 10px; z-index: 3;
  width: 46px; height: 46px; border: 0; background: var(--action-primary); cursor: pointer;
  display: grid; place-items: center;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 22px; height: 3px; background: var(--surface-card); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -8px; }
.nav-toggle__bars::after  { top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-8px) rotate(-45deg); }

.site-nav {
  position: absolute; left: 0; right: 0; top: 64px; z-index: 40;
  background: var(--surface-page); border-top: 3px solid var(--action-primary);
  display: none; padding: 8px 0 18px;
  box-shadow: 0 18px 30px rgba(0,0,0,.35);
}
.site-nav.is-open { display: block; }
.site-nav a {
  display: block; padding: 14px 24px;
  font-family: var(--font-family-display); font-style: normal; text-transform: uppercase;
  font-size: var(--font-size-3xl); text-decoration: none; color: var(--text-on-dark);
}
.site-nav a span { display: inline-block; transform: skewX(var(--button-skew)); }
.site-nav a[aria-current="page"] { background: var(--action-primary); }
.site-nav a:hover { background: var(--action-secondary); }

/* ---- hero ---- */
.hero { position: relative; z-index: 1; background: var(--surface-page); padding-bottom: 8px; }
.hero__slides { display: grid; }
.slide {
  grid-area: 1 / 1; position: relative; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity var(--motion-slow) ease, visibility var(--motion-slow);
}
.slide.is-active { opacity: 1; visibility: visible; }

.slide__bg { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 540px; object-fit: cover; object-position: 66% 20%; }
.slide__title { position: relative; z-index: 2; margin: -62px 0 0 22px; font-size: 68px; -webkit-text-stroke-width: 12px; }
.slide__card {
  position: relative; z-index: 1; background: var(--action-secondary);
  margin: -6px 22px 0 30px; padding: 30px 22px 56px;
  box-shadow: -9px 14px 0 var(--color-black);
}
.slide__card p { font-weight: var(--font-weight-medium); font-size: var(--font-size-base); line-height: 1.6; transform: rotate(-3deg); transform-origin: left center; }
.slide__btn { align-self: flex-end; margin: -26px 30px 0 0; position: relative; z-index: 2; height: 54px; padding: 0 30px; }

.slide--poster { background: linear-gradient(135deg, var(--bg-a), var(--bg-b)); padding-top: 26px; padding-bottom: 28px; }
.slide__poster { width: min(58%, 230px); margin: 0 auto; box-shadow: 0 12px 28px rgba(0,0,0,.45); }
.slide--poster .slide__title { margin-top: -26px; }

.hero__dots { display: flex; justify-content: center; gap: 8px; padding-top: 22px; }
.hero__dots button {
  position: relative; width: 52px; height: 9px; border: 0; padding: 0; border-radius: var(--radius-pill);
  background: var(--surface-card); cursor: pointer; opacity: .9;
}
.hero__dots button::before { content: ""; position: absolute; inset: -14px -2px; }
.hero__dots button.is-active { background: var(--color-sky); opacity: 1; }

/* ---- explore our worlds ---- */
.worlds {
  position: relative; z-index: 2;
  background: linear-gradient(110deg, var(--surface-page) 30%, var(--color-indigo) 100%);
  padding: 26px 0 34px;
}
.worlds__head { display: flex; align-items: center; justify-content: space-between; padding: 0 22px; margin-bottom: 16px; }
.worlds h2 { font-weight: var(--font-weight-medium); font-size: 24px; line-height: 1.2; }
.worlds__arrows { display: none; gap: 8px; }
.arrow-btn {
  width: 42px; height: 42px; border: 0; cursor: pointer; background: var(--action-secondary); color: var(--text-on-dark);
  font: var(--font-size-2xl)/1 var(--font-family-body); font-weight: var(--font-weight-bold);
}
.arrow-btn:hover { filter: brightness(1.15); }

.worlds__row {
  display: flex; gap: 6px; padding: 0 18px 8px; overflow-x: auto;
  scroll-snap-type: x proximity; scroll-padding-inline: 18px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; cursor: grab;
}
.worlds__row::-webkit-scrollbar { display: none; }
.worlds__row.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.worlds__row li { flex: 0 0 min(66vw, 250px); scroll-snap-align: start; }
.worlds__row a { display: block; transition: transform .18s ease; }
.worlds__row a:hover { transform: translateY(-4px); }
.worlds__row img { width: 100%; -webkit-user-drag: none; user-select: none; }

/* ---- merch ---- */
.merch {
  position: relative; z-index: 3; overflow: hidden;
  background: linear-gradient(var(--color-teal), var(--color-ocean));
  padding: 0 0 100px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 44px));
}
.merch__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.merch__character { position: relative; width: 112%; max-width: none; margin-left: -4%; }
.merch__title { position: relative; margin: -50px 0 0 auto; width: max-content; right: 26px; font-size: 70px; transform-origin: center; }
.merch__card {
  position: relative; isolation: isolate; background: var(--action-primary);
  margin: 6px 24px 0 34px; padding: 26px 22px 30px;
}
.merch__card { box-shadow: -9px 14px 0 var(--color-black), -9px 40px 0 var(--color-black); }
.merch__card p { font-weight: var(--font-weight-medium); font-size: var(--font-size-base); line-height: 1.6; transform: rotate(-3deg); transform-origin: left center; }
.merch__btn { position: relative; margin: -4px 24px 0 auto; display: flex; width: max-content; height: 56px; }

/* ---- fan art ---- */
.fanart {
  position: relative; z-index: 4; margin-top: -40px;
  background:
    radial-gradient(rgba(255,255,255,.07) 2px, transparent 2.6px) 0 0 / 22px 22px,
    linear-gradient(160deg, var(--color-navy) 30%, var(--color-navy-light) 100%);
  clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%);
  padding: 96px 20px 110px;
}
.fanart__card {
  position: relative; background: var(--action-primary); max-width: 560px; margin-inline: auto;
  padding: 64px 20px 66px; box-shadow: -10px 16px 0 var(--color-black);
}
.fanart__title { position: absolute; left: -6px; top: -50px; font-size: 56px; -webkit-text-stroke-width: 12px; }
.fanart__intro { font-weight: var(--font-weight-bold); font-size: var(--font-size-base); transform: rotate(-3deg); transform-origin: left center; margin-bottom: 26px; }
.fanart__wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 14px; padding: 0 6px; }
.polaroid {
  background: var(--surface-card); color: var(--text-on-light); padding: 8px 8px 6px; text-align: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .18s ease;
}
.polaroid:hover { transform: rotate(0deg) scale(1.06); z-index: 2; }
.polaroid__art { aspect-ratio: 1 / .92; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.polaroid__name { display: block; font: var(--font-weight-medium) var(--font-size-sm)/1.2 var(--font-family-body); padding-top: 7px; color: var(--color-gray-500); }
.fanart__more { margin-top: 28px; font-weight: var(--font-weight-medium); font-size: 15px; line-height: 1.5; }
.fanart__btn { position: absolute; right: -16px; bottom: -28px; height: 56px; padding: 0 30px; }

/* ---- join the club ---- */
.club {
  position: relative; z-index: 3; margin-top: -40px;
  background: var(--color-royal) url("../img/club-bg.webp") center / cover no-repeat;
  padding: 110px 20px 70px;
}
.club__card {
  position: relative; isolation: isolate; background: var(--action-primary);
  padding: 62px 20px 74px; box-shadow: -10px 16px 0 var(--color-black); max-width: 560px; margin-inline: auto;
}
.club__art { position: absolute; z-index: -1; right: 0; bottom: 0; width: 78%; max-width: 380px; opacity: .95; }
.club__title { position: absolute; left: -6px; top: -52px; font-size: 54px; -webkit-text-stroke-width: 12px; }
.club__intro { font-weight: var(--font-weight-bold); font-size: var(--font-size-base); line-height: 1.45; transform: rotate(-3deg); transform-origin: left center; margin-bottom: 22px; }
.club__form { position: relative; display: grid; gap: 14px; }
.club__form input:not(.hp-field), .club__form textarea {
  width: 100%; border: 0; border-radius: var(--radius-none); background: var(--surface-card); color: var(--text-on-light);
  font: var(--font-weight-bold) 17px/1.3 var(--font-family-body); padding: 18px 18px;
}
.club__form textarea { min-height: 140px; resize: vertical; }
.club__form ::placeholder { color: var(--color-gray-placeholder); opacity: 1; }
.club__btn { position: absolute; right: -20px; bottom: -112px; height: 58px; }
.club__status { position: absolute; left: 0; bottom: -110px; max-width: 58%; font-size: var(--font-size-md); font-weight: var(--font-weight-medium); line-height: 1.35; }
.club__status.is-error { color: var(--color-blush); }

/* ---- footer ---- */
.site-footer { position: relative; z-index: 1; background: var(--surface-card); }
.site-footer__crew { width: 100%; height: 150px; object-fit: cover; object-position: center 60%; }
.site-footer__bar {
  background: var(--surface-page); padding: 22px 22px 26px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px;
}
.social { display: flex; align-items: center; gap: 24px; }
.social a { display: block; color: var(--text-on-dark); transition: transform .15s ease, color .15s ease; }
.social a:hover { color: var(--text-highlight); transform: translateY(-2px); }
.social svg { display: block; fill: currentColor; }
.social li:nth-child(1) svg { width: 44px; height: 31px; }
.social li:nth-child(2) svg { width: 40px; height: 40px; }
.social li:nth-child(3) svg { width: 36px; height: 36px; }
.social .cut { fill: var(--surface-page); }
.site-footer__copy { font-weight: var(--font-weight-medium); font-size: var(--font-size-md); }

/* ==========================================================================
   DESKTOP – scaled 1440px canvas
   ========================================================================== */
@media (min-width: 1000px) {

  .sticker { -webkit-text-stroke-width: calc(var(--u) * 18); }

  .btn { font-size: max(15px, calc(var(--u) * 22)); padding: 0; height: auto; }

  /* ---- header ---- */
  .site-header { height: calc(var(--u) * 85); }
  .site-header__logo img { width: calc(var(--u) * 487); }
  .nav-toggle { display: none; }
  .site-nav {
    display: block; position: absolute; left: auto; right: calc(var(--u) * 29); top: calc(var(--u) * 16);
    background: none; border: 0; padding: 0; box-shadow: none;
  }
  .site-nav ul { display: flex; }
  .site-nav a {
    padding: 0 calc(var(--u) * 26);
    height: calc(var(--u) * 54); line-height: calc(var(--u) * 54);
    font-size: max(16px, calc(var(--u) * 22));
  }
  .site-nav a[aria-current="page"] { background: var(--action-primary); padding: 0 calc(var(--u) * 45); margin-right: calc(var(--u) * 9); }

  /* ---- hero ---- */
  .hero { margin-top: calc(var(--u) * -34); height: calc(var(--u) * 584); padding: 0; background: none; }
  .hero__slides { height: 100%; }
  .slide { display: block; height: 100%; }

  .slide__bg {
    position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto;
    object-fit: cover; object-position: center;
  }
  .slide__title {
    position: absolute; left: calc(var(--u) * 166); top: calc(var(--u) * 226); margin: 0;
    font-size: calc(var(--u) * 92); -webkit-text-stroke-width: calc(var(--u) * 19);
  }
  .slide__card {
    position: absolute; left: calc(var(--u) * 154); top: calc(var(--u) * 275);
    width: calc(var(--u) * 393); min-height: calc(var(--u) * 202); margin: 0;
    padding: calc(var(--u) * 62) calc(var(--u) * 2) calc(var(--u) * 24) calc(var(--u) * 22);
    box-shadow: calc(var(--u) * -11) calc(var(--u) * 25) 0 var(--color-black);
  }
  .slide__card p {
    font-size: max(13px, calc(var(--u) * 15.8)); line-height: 1.42; font-weight: var(--font-weight-bold);
    transform: rotate(-5deg);
  }
  .slide__btn {
    position: absolute; left: calc(var(--u) * 441); top: calc(var(--u) * 460); margin: 0;
    width: calc(var(--u) * 125); height: calc(var(--u) * 55); padding: 0;
  }

  .slide--poster { padding: 0; background: linear-gradient(110deg, var(--bg-a), var(--bg-b)); }
  .slide__poster {
    position: absolute; right: calc(var(--u) * 190); top: calc(var(--u) * 62);
    height: calc(var(--u) * 480); width: auto; margin: 0;
  }
  .slide--poster .slide__title { font-size: calc(var(--u) * 80); top: calc(var(--u) * 205); }

  .hero__dots {
    position: absolute; left: 50%; bottom: calc(var(--u) * 15); transform: translateX(-50%);
    gap: calc(var(--u) * 22); padding: 0; z-index: 5;
  }
  .hero__dots button { width: calc(var(--u) * 81); height: calc(var(--u) * 10); }

  /* ---- explore ---- */
  .worlds { padding: calc(var(--u) * 26) 0 calc(var(--u) * 20); min-height: calc(var(--u) * 463); }
  .worlds__head { padding: 0 calc(var(--u) * 141); margin-bottom: calc(var(--u) * 17); }
  .worlds h2 { font-size: max(20px, calc(var(--u) * 26)); }
  .worlds__arrows { display: flex; }
  .arrow-btn { width: calc(var(--u) * 42); height: calc(var(--u) * 42); font-size: max(16px, calc(var(--u) * 22)); }
  .worlds__row { gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 137) calc(var(--u) * 6); scroll-padding-inline: calc(var(--u) * 137); }
  .worlds__row li { flex: 0 0 calc(var(--u) * 283); }

  /* ---- merch ---- */
  .merch {
    height: calc(var(--u) * 649); padding: 0; overflow: visible; clip-path: none; background: none;
  }
  .merch__bg { object-fit: fill; }
  .merch__character { position: absolute; left: 0; top: 0; width: calc(var(--u) * 1302.5); margin: 0; max-width: none; }
  .merch__title {
    position: absolute; left: calc(var(--u) * 902); top: calc(var(--u) * 134); margin: 0; right: auto;
    font-size: calc(var(--u) * 97); transform: rotate(-8deg) skewX(-10deg) scaleY(.92);
  }
  .merch__card {
    position: absolute; left: calc(var(--u) * 922); top: calc(var(--u) * 224);
    width: calc(var(--u) * 394); min-height: calc(var(--u) * 166); margin: 0;
    padding: calc(var(--u) * 34) calc(var(--u) * 4) calc(var(--u) * 20) calc(var(--u) * 24);
  }
  .merch__card { box-shadow: calc(var(--u) * -9) calc(var(--u) * 24) 0 var(--color-black), calc(var(--u) * -9) calc(var(--u) * 67) 0 var(--color-black); }
  .merch__card p { font-size: max(13px, calc(var(--u) * 16)); line-height: 1.55; transform: rotate(-4deg); }
  .merch__btn {
    position: absolute; left: calc(var(--u) * 1191); top: calc(var(--u) * 407); margin: 0;
    width: calc(var(--u) * 125); height: calc(var(--u) * 70);
  }

  /* ---- fan art ---- */
  .fanart { margin-top: calc(var(--u) * -96); height: calc(var(--u) * 700); padding: 0; clip-path: polygon(0 calc(var(--u) * 94), 100% 0, 100% calc(100% - var(--u) * 70), 0 100%); background-size: calc(var(--u) * 22) calc(var(--u) * 22), 100% 100%; }
  .fanart__card {
    position: absolute; left: calc(var(--u) * 220); top: calc(var(--u) * 190);
    width: calc(var(--u) * 1000); height: calc(var(--u) * 400); max-width: none; margin: 0; padding: 0;
    box-shadow: calc(var(--u) * -17) calc(var(--u) * 27) 0 var(--color-black);
  }
  .fanart__title { left: calc(var(--u) * -28); top: calc(var(--u) * -34); font-size: calc(var(--u) * 80); -webkit-text-stroke-width: calc(var(--u) * 16); }
  .fanart__intro { position: absolute; left: calc(var(--u) * 44); top: calc(var(--u) * 58); margin: 0; font-size: max(13px, calc(var(--u) * 18)); transform: rotate(-3deg); }
  .fanart__wall {
    position: absolute; left: calc(var(--u) * 46); top: calc(var(--u) * 100); width: calc(var(--u) * 948);
    display: flex; justify-content: space-between; gap: 0; padding: 0;
  }
  .polaroid { flex: 0 0 calc(var(--u) * 158); margin-right: calc(var(--u) * 0); padding: calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 5); transform: translateY(calc(var(--u) * var(--lift, 0))) rotate(var(--tilt, 0deg)); }
  .polaroid:hover { transform: translateY(calc(var(--u) * var(--lift, 0) - 6px)) rotate(0deg) scale(1.06); }
  .polaroid__name { font-size: max(11px, calc(var(--u) * 13)); padding-top: calc(var(--u) * 6); }
  .fanart__more { position: absolute; left: calc(var(--u) * 44); top: calc(var(--u) * 318); width: calc(var(--u) * 660); margin: 0; font-size: max(13px, calc(var(--u) * 16)); }
  .fanart__btn { right: calc(var(--u) * 40); bottom: calc(var(--u) * -34); width: calc(var(--u) * 150); height: calc(var(--u) * 66); padding: 0; }

  /* ---- join the club ---- */
  .club { margin-top: calc(var(--u) * -70); height: calc(var(--u) * 740); padding: 0; border-top: calc(var(--u) * 70) solid transparent; background-origin: border-box; background-size: cover; background-position: center; }
  .club__card {
    position: absolute; left: calc(var(--u) * 361); top: calc(var(--u) * 110);
    width: calc(var(--u) * 741); height: calc(var(--u) * 447);
    padding: 0; max-width: none; margin: 0;
    box-shadow: calc(var(--u) * -17) calc(var(--u) * 27) 0 var(--color-black);
  }
  .club__art { right: 0; top: 0; bottom: auto; width: calc(var(--u) * 532); max-width: none; opacity: 1; }
  .club__title { left: calc(var(--u) * -28); top: calc(var(--u) * -22); font-size: calc(var(--u) * 71); -webkit-text-stroke-width: calc(var(--u) * 15); }
  .club__intro {
    position: absolute; left: calc(var(--u) * 23); top: calc(var(--u) * 46); width: calc(var(--u) * 455); margin: 0;
    font-size: max(13px, calc(var(--u) * 16)); line-height: 1.55; transform: rotate(-4deg);
  }
  .club__form { position: absolute; left: calc(var(--u) * 45); top: calc(var(--u) * 109); width: calc(var(--u) * 390); gap: calc(var(--u) * 21); }
  .club__form input:not(.hp-field), .club__form textarea {
    height: calc(var(--u) * 60); padding: 0 calc(var(--u) * 21); font-size: max(14px, calc(var(--u) * 16)); font-weight: var(--font-weight-medium);
  }
  .club__form textarea { height: calc(var(--u) * 147); padding-top: calc(var(--u) * 17); min-height: 0; resize: none; }
  .club__btn {
    right: auto; bottom: auto; left: calc(var(--u) * 265); top: calc(var(--u) * 332);
    width: calc(var(--u) * 125); height: calc(var(--u) * 66);
  }
  .club__status { left: 0; bottom: auto; top: calc(var(--u) * 353); max-width: calc(var(--u) * 250); font-size: max(12px, calc(var(--u) * 14)); }

  /* ---- footer ---- */
  .site-footer__crew { height: auto; object-fit: fill; }
  .site-footer__bar { height: calc(var(--u) * 100); padding: 0 calc(var(--u) * 141); flex-wrap: nowrap; }
  .social { gap: calc(var(--u) * 44); }
  .social li:nth-child(1) svg { width: calc(var(--u) * 55); height: calc(var(--u) * 39); }
  .social li:nth-child(2) svg { width: calc(var(--u) * 52); height: calc(var(--u) * 52); }
  .social li:nth-child(3) svg { width: calc(var(--u) * 45); height: calc(var(--u) * 45); }
  .social li:nth-child(3) { margin-left: calc(var(--u) * 6); }
  .site-footer__copy { font-size: max(13px, calc(var(--u) * 16)); }
}

/* ---- motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slide { transition: none; }
  .btn, .social a, .worlds__row a { transition: none; }
}

/* editor support: sections hidden from the Editor, and photos dropped into picture spots */
[hidden] { display: none !important; }
.polaroid__art > img, .fa-art > img { display: block; width: 100%; height: 100%; object-fit: cover; }