/* ==========================================================================
   Bahrain Social Club website
   Colours, type and shapes come from the BSC brand system.
   ========================================================================== */

/* ---------- Fonts (SIL Open Font License, see assets/fonts/) ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Shantell Sans";
  src: url("../fonts/ShantellSans-Variable.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Rubik Marker Hatch";
  src: url("../fonts/RubikMarkerHatch-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("../fonts/NotoKufiArabic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ---------- Tokens ---------- */
:root {
  /* brand colours: the same in both themes */
  --club-red: #D22619;
  --club-red-dark: #B01E13;
  --gulf-teal: #0E7470;
  --gulf-teal-dark: #0A5C59;
  --sun: #FFC83D;
  --flamingo: #FF9CC2;
  --sand: #FAF1E2;
  --ink: #2A1712;

  /* theme: day */
  --surface: #FAF1E2;
  --surface-raised: #FFF9EF;
  --line: #E6D5BA;
  --text: #2A1712;
  --text-muted: #6B5549;
  --accent-text: #D22619;
  --header-bg: rgba(250, 241, 226, 0.95);
  --shadow-sticker: 3px 4px 0 #2A1712;
  --shadow-color: #2A1712;
  --logo-fg: #D22619;
  --logo-d1: #D22619;
  --logo-d2: #D22619;

  /* what components read (tones override these) */
  --bg: var(--surface);
  --fg: var(--text);
  --muted: var(--text-muted);
  --pop: var(--club-red);
  --link-color: var(--accent-text);
  --focus-color: var(--text);
  --card: var(--surface-raised);
  --card-edge: var(--text);

  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-text: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Shantell Sans", "Segoe Print", "Bradley Hand", cursive;
  --font-scribble: "Rubik Marker Hatch", "Bricolage Grotesque", "Arial Black", sans-serif;

  --fs-hero: clamp(2.4rem, 6.2vw, 5.6rem);
  --fs-xl: clamp(2.6rem, 7vw, 6rem);
  --fs-lg: clamp(2.1rem, 4.8vw, 4.1rem);
  --fs-md: clamp(1.55rem, 2.6vw, 2.25rem);
  --fs-sm: clamp(1.2rem, 1.6vw, 1.4rem);
  --fs-lead: clamp(1.15rem, 1.5vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-note: clamp(1.2rem, 1.9vw, 1.55rem);

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --gutter: clamp(16px, 4.5vw, 56px);
  --maxw: 1240px;
  --section-y: clamp(64px, 9vw, 124px);
  --zz: 14px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #1F1411;
    --surface-raised: #2E1E19;
    --line: #4A3530;
    --text: #FAF1E2;
    --text-muted: #CDBBA6;
    --accent-text: #FF6B57;
    --header-bg: rgba(31, 20, 17, 0.95);
    --shadow-sticker: 3px 4px 0 #000000;
    --shadow-color: #000000;
    --logo-fg: #FAF1E2;
    --logo-d1: #FF9CC2;
    --logo-d2: #FFC83D;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #1F1411;
  --surface-raised: #2E1E19;
  --line: #4A3530;
  --text: #FAF1E2;
  --text-muted: #CDBBA6;
  --accent-text: #FF6B57;
  --header-bg: rgba(31, 20, 17, 0.95);
  --shadow-sticker: 3px 4px 0 #000000;
  --shadow-color: #000000;
  --logo-fg: #FAF1E2;
  --logo-d1: #FF9CC2;
  --logo-d2: #FFC83D;
  color-scheme: dark;
}

/* ---------- Tones: a band or card sets its ground, and everything inside follows ---------- */
.tone-paper, .tone-raised {
  --fg: var(--text); --muted: var(--text-muted); --pop: var(--accent-text);
  --link-color: var(--accent-text); --focus-color: var(--text); --card-edge: var(--text);
}
.tone-paper { --bg: var(--surface); --card: var(--surface-raised); }
.tone-raised { --bg: var(--surface-raised); --card: var(--surface); }
.tone-red {
  --bg: var(--club-red); --fg: var(--sand); --muted: var(--sand); --pop: var(--sun);
  --link-color: var(--sand); --focus-color: var(--sand); --card: rgba(42, 23, 18, 0.16); --card-edge: var(--sand);
  --logo-fg: var(--sand); --logo-d1: var(--flamingo); --logo-d2: var(--sun);
}
.tone-teal {
  --bg: var(--gulf-teal); --fg: var(--sand); --muted: var(--sand); --pop: var(--sun);
  --link-color: var(--sand); --focus-color: var(--sand); --card: rgba(42, 23, 18, 0.18); --card-edge: var(--sand);
  --logo-fg: var(--sand); --logo-d1: var(--flamingo); --logo-d2: var(--sun);
}
.tone-sun {
  --bg: var(--sun); --fg: var(--ink); --muted: var(--ink); --pop: var(--club-red);
  --link-color: var(--ink); --focus-color: var(--ink); --card: rgba(255, 249, 239, 0.55); --card-edge: var(--ink);
  --logo-fg: var(--ink); --logo-d1: var(--ink); --logo-d2: var(--ink);
}
.tone-ink {
  --bg: var(--ink); --fg: var(--sand); --muted: #E3D3BE; --pop: var(--sun);
  --link-color: var(--sun); --focus-color: var(--sand); --card: rgba(250, 241, 226, 0.07); --card-edge: var(--sand);
  --logo-fg: var(--sand); --logo-d1: var(--flamingo); --logo-d2: var(--sun);
}
.tone-paper, .tone-raised, .tone-red, .tone-teal, .tone-sun, .tone-ink {
  background-color: var(--bg);
  color: var(--fg);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
p, ul, ol, dl, h1, h2, h3, h4, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

a { color: var(--link-color); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 3px; }

:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--ink); color: var(--sand); padding: 12px 18px; border-radius: var(--radius-pill);
  font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type ---------- */
.shout-hero, .shout-xl, .shout-lg, .shout-md, .shout-sm,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  text-wrap: balance;
  font-variation-settings: "opsz" 96;
}
.shout-hero { font-size: var(--fs-hero); line-height: 0.86; letter-spacing: -0.045em; }
.shout-xl   { font-size: var(--fs-xl); line-height: 0.88; letter-spacing: -0.045em; }
.shout-lg, h2 { font-size: var(--fs-lg); line-height: 0.9; letter-spacing: -0.04em; }
.shout-md, h3 { font-size: var(--fs-md); line-height: 0.95; letter-spacing: -0.03em; }
.shout-sm   { font-size: var(--fs-sm); line-height: 1.05; letter-spacing: -0.01em; }
h4 { font: 800 1.15rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; }

.line, .scribble { display: block; }
.scribble {
  font-family: var(--font-scribble);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.95;
  color: var(--pop);
  font-variation-settings: normal;
  margin-block: 0.02em 0.04em;
}
.lead { font-size: var(--fs-lead); line-height: 1.5; font-weight: 500; max-width: 38ch; }
.lead.wide { max-width: 52ch; }
.small { font-size: var(--fs-small); line-height: 1.45; }
.muted { color: var(--muted); }
.kicker {
  font: 800 0.82rem/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variation-settings: "opsz" 12;
}
.kicker.accent { color: var(--pop); }
.tone-paper .kicker.accent, .tone-raised .kicker.accent { color: var(--accent-text); }

.note {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 var(--fs-note)/1.15 var(--font-hand);
  text-transform: lowercase;
}
.note .note-arrow { width: 52px; height: 52px; flex: none; transform: rotate(-10deg) scaleX(-1); }
.note.center { justify-content: center; text-align: center; }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--fs-md); margin-top: 2.2em; scroll-margin-top: 100px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-sm); margin-top: 1.6em; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--accent-text); }

.stack { display: flex; flex-direction: column; gap: 18px; }
.stack-lg { display: flex; flex-direction: column; gap: 28px; }

/* ---------- Doodles, sparkles, stickers ---------- */
.doodle { display: block; overflow: visible; color: inherit; }
.sparkle { display: inline-block; width: 1em; height: 1em; fill: currentColor; flex: none; }

.sticker {
  --size: 150px; --rot: -8deg; --fs: 1;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  flex: none;
  transform: rotate(var(--rot));
}
.sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(var(--shadow-sticker)); }
.sticker-shape { fill: var(--s-bg); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.sticker-text {
  position: relative;
  max-width: 70%;
  color: var(--s-fg);
  font: 800 calc(var(--size) * 0.135 * var(--fs))/0.92 var(--font-display);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}
.s-pink { --s-bg: var(--flamingo); --s-fg: var(--ink); }
.s-sun  { --s-bg: var(--sun); --s-fg: var(--ink); }
.s-red  { --s-bg: var(--club-red); --s-fg: var(--sand); }
.s-teal { --s-bg: var(--gulf-teal); --s-fg: var(--sand); }

/* ---------- Ticket buttons (every call to action is a ticket) ---------- */
.ticket-btn {
  appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; margin: 0;
  display: inline-block; max-width: 100%;
  cursor: pointer; text-decoration: none; line-height: 0; font: inherit;
  border-radius: var(--radius-sm);
  transition: transform 0.15s ease;
  vertical-align: middle;
}
.ticket-btn:hover { transform: rotate(-2deg) scale(1.03); }
.ticket-btn:active { transform: rotate(-1deg) scale(0.99); }
.ticket-btn:disabled { cursor: progress; opacity: 0.65; transform: none; }
.ticket {
  --n: 0.5em;
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  background: var(--t-bg);
  color: var(--t-fg);
  border-radius: var(--radius-sm);
  font: 800 1.1rem/1.05 var(--font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-variation-settings: "opsz" 36;
  -webkit-mask:
    radial-gradient(circle var(--n) at 0 50%, #0000 96%, #000) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle var(--n) at 100% 50%, #0000 96%, #000) 100% 0 / 51% 100% no-repeat;
          mask:
    radial-gradient(circle var(--n) at 0 50%, #0000 96%, #000) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle var(--n) at 100% 50%, #0000 96%, #000) 100% 0 / 51% 100% no-repeat;
}
.ticket.is-lg { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.ticket-label { padding-block: 0.85em; padding-inline: 1.3em 1em; text-wrap: balance; }
.ticket-stub { display: flex; align-items: center; padding-inline: 0.75em 1.05em; border-inline-start: 0.12em dashed currentColor; }
.ticket .sparkle { width: 0.8em; height: 0.8em; }
.t-red  { --t-bg: var(--club-red); --t-fg: var(--sand); }
.t-sun  { --t-bg: var(--sun); --t-fg: var(--ink); }
.t-teal { --t-bg: var(--gulf-teal); --t-fg: var(--sand); }
.t-ink  { --t-bg: var(--ink); --t-fg: var(--sand); }
.t-sand { --t-bg: var(--sand); --t-fg: var(--ink); }

.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; color: var(--link-color);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em;
}
.arrow-link svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.arrow-link:hover svg { transform: translateX(3px); }

.text-button {
  appearance: none; background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--link-color); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em;
}

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* ---------- Ticker ---------- */
.ticker { position: relative; z-index: 3; font-size: clamp(0.9rem, 1.3vw, 1.05rem); }
.ticker-red { --tk-bg: var(--club-red); --tk-fg: var(--sand); --tk-pop: var(--sun); }
.ticker-ink { --tk-bg: var(--ink); --tk-fg: var(--sand); --tk-pop: var(--sun); }
.ticker-bar { position: relative; display: flex; align-items: stretch; background: var(--tk-bg); color: var(--tk-fg); }
.ticker-viewport { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; padding-block: 0.7em; }
.ticker-track { display: inline-flex; animation: bsc-marquee 60s linear infinite; will-change: transform; }
.ticker-group { display: inline-flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.ticker-item {
  padding-inline: 0.8em;
  font: 800 1em/1 var(--font-display);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  font-variation-settings: "opsz" 36;
}
.ticker-spark { display: inline-flex; color: var(--tk-pop); }
.ticker-spark .sparkle { width: 0.95em; height: 0.95em; }
.ticker.is-paused .ticker-track { animation-play-state: paused; }
.ticker-toggle {
  flex: none; display: grid; place-items: center;
  width: 44px; border: 0; margin: 0; padding: 0; cursor: pointer;
  background: var(--tk-bg); color: var(--tk-fg);
  box-shadow: -14px 0 14px -4px var(--tk-bg);
}
.ticker-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.ticker-toggle .i-play { display: none; }
.ticker.is-paused .i-play { display: block; }
.ticker.is-paused .i-pause { display: none; }
.ticker-toggle:focus-visible { outline-color: var(--tk-fg); outline-offset: -5px; }
.ticker .zz {
  display: block; height: 10px; margin-top: -1px; background: var(--tk-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Cpath d='M0 0H2L1 1Z'/%3E%3C/svg%3E") 0 0 / 20px 100% repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Cpath d='M0 0H2L1 1Z'/%3E%3C/svg%3E") 0 0 / 20px 100% repeat-x;
  position: relative;
}
@keyframes bsc-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-toggle { display: none; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: var(--header-bg);
  color: var(--text);
  border-bottom: 2px solid var(--line);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
          backdrop-filter: saturate(1.3) blur(10px);
}
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 76px; padding-block: 10px; }
.brand { display: block; flex: none; width: clamp(150px, 15vw, 204px); line-height: 0; border-radius: 8px; }
.brand .logo { width: 100%; height: auto; }
.logo .lg-l { fill: var(--logo-fg); }
.logo .lg-d1 { fill: var(--logo-d1); }
.logo .lg-d2 { fill: var(--logo-d2); }


.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.ticket .shield { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ticket-label:has(.shield) { display: inline-flex; align-items: center; gap: 0.4em; }
.header-safety .ticket { font-size: 1rem; }
.header-safety .ticket-label { padding-block: 0.8em; padding-inline: 1em 0.85em; white-space: nowrap; }
.header-safety[aria-current="page"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--gulf-teal); }
}
.header-join .ticket { font-size: 1rem; }
.header-join .ticket-label { padding-block: 0.8em; padding-inline: 1.15em 0.85em; white-space: nowrap; }

.menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 14px;
  border: 2.5px solid var(--text); border-radius: var(--radius-pill);
  background: transparent; color: var(--text); cursor: pointer;
  font: 800 0.95rem/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em;
}
.menu-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.menu-btn svg path { transition: transform 0.2s ease, opacity 0.2s ease; transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] .m1 { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .m2 { opacity: 0; }
.menu-btn[aria-expanded="true"] .m3 { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  border-top: 2px solid var(--line);
  background: var(--surface);
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  padding-block: 12px 28px;
}
.mobile-links { list-style: none; margin: 0; padding: 0; display: grid; }
.mobile-links a {
  display: block; padding: 12px 0;
  font: 800 clamp(1.6rem, 6vw, 2.2rem)/1 var(--font-display); letter-spacing: -0.03em; text-transform: uppercase;
  color: var(--text); text-decoration: none; border-bottom: 2px solid var(--line);
}
.mobile-links a[aria-current="page"] { color: var(--accent-text); }
.mobile-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.mobile-emergency { margin-top: 18px; font-weight: 700; }

/* The menu always lives in the Menu button on the right */
.header-actions { margin-inline-start: auto; }
@media (min-width: 900px) {
  .mobile-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (max-width: 600px) {
  .header-join { display: none; }
  .header-inner { min-height: 66px; gap: 10px; }
  .header-safety .ticket { font-size: 0.92rem; }
  .header-safety .ticket-label { padding-block: 0.75em; padding-inline: 0.85em 0.6em; }
  .header-safety .ticket-stub { padding-inline: 0.55em 0.8em; }
  .menu-btn { min-height: 42px; padding: 0 12px; }
}
@media (max-width: 480px) {
  .menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-btn { width: 44px; padding: 0; justify-content: center; }
  .brand { width: 140px; }
}
@media (max-width: 340px) {
  .brand { width: 106px; }
  .header-inner { gap: 8px; }
  .header-safety .ticket { font-size: 0.85rem; }
}

/* ---------- Bands (page sections) ---------- */
.band { position: relative; padding-block: var(--section-y); }
.band.tight { padding-block: clamp(48px, 6vw, 80px); }
.band.zz-bottom::after, .band.zz-top::before {
  content: "";
  position: absolute; left: 0; right: 0; height: var(--zz);
  background: var(--bg);
  pointer-events: none;
  z-index: 2;
}
.band.zz-bottom::after {
  top: calc(100% - 1px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Cpath d='M0 0H2L1 1Z'/%3E%3C/svg%3E") 0 0 / 28px 100% repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Cpath d='M0 0H2L1 1Z'/%3E%3C/svg%3E") 0 0 / 28px 100% repeat-x;
}
.band.zz-top::before {
  bottom: calc(100% - 1px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Cpath d='M0 1H2L1 0Z'/%3E%3C/svg%3E") 0 0 / 28px 100% repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Cpath d='M0 1H2L1 0Z'/%3E%3C/svg%3E") 0 0 / 28px 100% repeat-x;
}

.section-head { display: flex; flex-direction: column; gap: 16px; max-width: 820px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; align-items: center; }
.section-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(32px, 4vw, 48px); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.split.middle { align-items: center; }
.split-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 860px) {
  .split, .split-7-5, .split-5-7 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 112px); overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.hero-copy .shout-hero { margin-block: 4px 6px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.hero-art { position: relative; width: clamp(180px, 21vw, 290px); aspect-ratio: 1; display: grid; place-items: center; }
.hero-art .sticker { position: absolute; right: 0; top: 0; z-index: 2; }
.hero-art .doodle { position: absolute; left: 0; bottom: 6%; width: 60%; height: auto; }
.hero-art .art-sparkle { left: auto; right: 6%; bottom: 0; width: 28%; }
.hero-art:not(:has(.sticker)) .doodle:not(.art-sparkle) { left: 12%; top: 12%; bottom: auto; width: 72%; }
.hero.compact .shout-hero { font-size: clamp(2.2rem, 5.6vw, 5rem); }
.hero-copy .events-title, .hero-copy .board-title { font-size: var(--fs-lg); }
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { overflow-x: visible; }
  .hero-art { position: absolute; right: 12px; bottom: -44px; width: auto; aspect-ratio: auto; z-index: 3; display: block; }
  .hero-art .doodle { display: none; }
  .hero-art .sticker { position: relative; --size: 112px !important; }
  .hero-art:not(:has(.sticker)) { display: none; }
}

/* ---------- Cards and lists ---------- */
.card {
  background: var(--card);
  color: inherit;
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px);
}
.card.outlined { border: 2.5px solid var(--card-edge); box-shadow: 5px 6px 0 var(--shadow-color); }
.card h3 { font-size: var(--fs-md); margin-bottom: 12px; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.tick-list { list-style: none; padding: 0; display: grid; gap: 14px; }
.tick-list li { position: relative; padding-inline-start: 36px; }
.tick-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.2em; width: 22px; height: 22px;
  background: var(--pop);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.7 7 17 11.3 24 12C17 12.7 12.7 17 12 24C11.3 17 7 12.7 0 12C7 11.3 11.3 7 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.7 7 17 11.3 24 12C17 12.7 12.7 17 12 24C11.3 17 7 12.7 0 12C7 11.3 11.3 7 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bullets { padding-inline-start: 1.2em; display: grid; gap: 10px; }
.bullets li::marker { color: var(--pop); }

/* numbered steps: only where the order matters */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(16px, 2vw, 24px); counter-reset: step; }
.steps > li { position: relative; padding: 26px 26px 28px; border-radius: var(--radius-lg); background: var(--card); display: flex; flex-direction: column; gap: 10px; }
.steps h3 { font-size: var(--fs-sm); }
.step-num {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px;
  border-radius: 50%; background: var(--club-red); color: var(--sand);
  font: 800 1.6rem/1 var(--font-display); font-variation-settings: "opsz" 48;
}
.tone-red .step-num, .tone-teal .step-num, .tone-ink .step-num { background: var(--sun); color: var(--ink); }
.tone-sun .step-num { background: var(--ink); color: var(--sand); }

/* ---------- Series cards (event types) ---------- */
.series-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 2vw, 22px); }
.series-card {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 250px;
  padding: 26px 26px 28px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.series-card .doodle { position: absolute; right: 16px; top: 16px; width: 86px; height: 86px; }
.series-card .kicker { opacity: 1; }
.series-card h3 { margin-top: 0; padding-top: 58px; font-size: clamp(2rem, 3.2vw, 2.6rem); line-height: 0.9; letter-spacing: -0.04em; }
.series-card p:last-child { max-width: 34ch; }
.series-card.tone-paper, .series-card.tone-raised { box-shadow: inset 0 0 0 2.5px var(--text); }
.series-card.tone-white { background: #FFFFFF; color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink); --pop: var(--club-red); --focus-color: var(--ink); }
.series-card.is-online { background: var(--surface-raised); color: var(--text); box-shadow: inset 0 0 0 2.5px var(--text); background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(14, 116, 112, 0.07) 14px 16px); }

/* ---------- Home: welcome block ---------- */
.welcome-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.welcome-grid .shout-xl { max-width: 11ch; }
.open-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.open-list li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--radius-pill);
  background: var(--surface-raised); box-shadow: inset 0 0 0 2.5px var(--text);
  font: 800 0.95rem/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em;
}
.open-list li svg { width: 18px; height: 18px; fill: none; stroke: var(--gulf-teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) { .welcome-grid { grid-template-columns: minmax(0, 1fr); } }

.why-member {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px);
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 2.5px solid var(--text);
  box-shadow: 6px 7px 0 var(--shadow-color);
}
.why-member h3 { font-size: var(--fs-lg); line-height: 0.9; }
.reasons { list-style: none; padding: 0; display: grid; gap: 18px; counter-reset: r; }
.reasons li { position: relative; padding-inline-start: 58px; counter-increment: r; }
.reasons li::before {
  content: counter(r); position: absolute; inset-inline-start: 0; top: -2px;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--club-red); color: var(--sand); font: 800 1.3rem/1 var(--font-display);
}
.reasons strong { display: block; font: 800 1.2rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 2px; }
@media (max-width: 860px) { .why-member { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Discord bits ---------- */
.live-count {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: var(--radius-pill);
  background: rgba(42, 23, 18, 0.22);
  font-weight: 700;
}
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #5BE38A; box-shadow: 0 0 0 4px rgba(91, 227, 138, 0.25); }
.doodle-cluster { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin-inline: auto; }
.doodle-cluster .doodle { position: absolute; }
.doodle-cluster .d1 { width: 58%; left: 0; top: 4%; transform: rotate(-6deg); }
.doodle-cluster .d2 { width: 48%; right: 0; top: 36%; transform: rotate(8deg); }
.doodle-cluster .d3 { width: 36%; left: 12%; bottom: 0; transform: rotate(-4deg); }
.online-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.online-grid li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px; border-radius: var(--radius-md); background: var(--card); }
.online-grid .doodle { width: 64px; height: 64px; }
.online-grid h3 { font-size: 1.3rem; margin-bottom: 4px; }

/* ---------- Team ---------- */

/* ---------- Name tags ---------- */
.nametag {
  width: 100%; max-width: 330px;
  border-radius: var(--radius-md);
  background: var(--nt-bg); color: var(--nt-fg);
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow-sticker);
  overflow: hidden;
}
.nt-red  { --nt-bg: var(--club-red); --nt-fg: var(--sand); }
.nt-teal { --nt-bg: var(--gulf-teal); --nt-fg: var(--sand); }
.nt-sun  { --nt-bg: var(--sun); --nt-fg: var(--ink); }
.nt-pink { --nt-bg: var(--flamingo); --nt-fg: var(--ink); }
.nametag-band { display: flex; flex-direction: column; align-items: center; padding: 14px 14px 10px; text-align: center; }
.nametag-hello { font: 800 2.2rem/0.9 var(--font-display); letter-spacing: -0.03em; text-transform: uppercase; font-variation-settings: "opsz" 96; }
.nametag-sub { font: 600 1.05rem/1.2 var(--font-hand); margin-top: 6px; text-transform: lowercase; }
.nametag-body {
  margin: 0 10px 10px; min-height: 118px; padding: 14px;
  border-radius: 8px; background: #FFF9EF; color: #2A1712;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.nametag-name { font: 700 clamp(2.2rem, 5vw, 2.9rem)/1 var(--font-hand); text-transform: none; letter-spacing: 0; color: #2A1712; font-variation-settings: normal; }
.nametag-prompt { font: 600 0.98rem/1.25 var(--font-hand); color: #6B5549; margin-top: 8px; }
.nametag-blank { display: block; width: 78%; height: 44px; border-bottom: 3px dashed #6B5549; }

/* ---------- Membership ---------- */
.notice {
  position: relative;
  padding: clamp(26px, 5vw, 60px);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 3px solid var(--text);
  box-shadow: 8px 9px 0 var(--club-red);
}
.notice h2 { max-width: 18ch; margin-block: 14px 18px; }
.need-list { list-style: none; padding: 0; margin-top: clamp(24px, 4vw, 40px); display: grid; border-top: 2.5px solid var(--text); }
.need-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 2.5px solid var(--line); font-weight: 600; font-size: 1.1rem; }
.need-list .ans { font: 800 clamp(1.4rem, 3vw, 2rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: -0.03em; flex: none; }
.need-list .ans.no { color: var(--accent-text); }
.need-list .ans.yes { color: var(--gulf-teal); }
:root[data-theme="dark"] .need-list .ans.yes { color: #4FC7BF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .need-list .ans.yes { color: #4FC7BF; } }
.need-q { display: block; font: 800 0.82rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: clamp(24px, 4vw, 36px); }

.reasons-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(16px, 2.5vw, 28px); }
.reasons-grid li { display: flex; flex-direction: column; gap: 10px; }
.reasons-grid .reason-num { font: 400 clamp(4rem, 8vw, 6rem)/0.8 var(--font-scribble); color: var(--pop); }
.reasons-grid h3 { font-size: var(--fs-md); }

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(16px, 2vw, 22px); }
.tier { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; border-radius: var(--radius-lg); }
.tier.tone-paper, .tier.tone-raised { box-shadow: inset 0 0 0 2.5px var(--text); }
.tier-price { font: 800 0.85rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.tier h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.tier .cta-row { margin-top: auto; padding-top: 8px; }
.tier .sticker { position: absolute; right: -8px; top: -40px; }

.join-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.join-intro { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 110px; }
.join-intro .nametag { margin-top: 12px; transform: rotate(-3deg); max-width: 280px; }
@media (max-width: 900px) {
  .join-grid { grid-template-columns: minmax(0, 1fr); }
  .join-intro { position: static; }
  .join-intro .nametag { display: none; }
}

/* ---------- Forms ---------- */
.form-card {
  background: var(--surface-raised);
  color: var(--text);
  border: 2.5px solid var(--text);
  border-radius: var(--radius-lg);
  box-shadow: 6px 7px 0 var(--shadow-color);
  padding: clamp(20px, 4vw, 40px);
}
.tone-raised .form-card { background: var(--surface); }
.form { display: grid; gap: 22px; }
.form-note { font-size: var(--fs-small); color: var(--text-muted); }
.req { color: var(--accent-text); font-weight: 800; }
.opt { font-weight: 500; color: var(--text-muted); font-size: 0.9em; }
.field { display: grid; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field > label, .field > legend { font-weight: 700; font-size: 1.02rem; line-height: 1.3; padding: 0; }
.field > legend { margin-bottom: 8px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="url"], .form input[type="search"],
.form select, .form textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 2.5px solid var(--text);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: 500 1.0625rem/1.4 var(--font-text);
}
.tone-raised .form-card input[type="text"], .tone-raised .form-card input[type="email"], .tone-raised .form-card input[type="tel"],
.tone-raised .form-card select, .tone-raised .form-card textarea { background: var(--surface-raised); }
.form textarea { min-height: 132px; resize: vertical; }
.form ::placeholder { color: var(--text-muted); opacity: 1; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 2px; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; inset-inline-end: 16px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 3px solid var(--text); border-bottom: 3px solid var(--text); transform: rotate(45deg); pointer-events: none;
}
.form select { appearance: none; -webkit-appearance: none; padding-inline-end: 44px; }
.form input[type="search"] { appearance: none; -webkit-appearance: none; }
.hint { font-size: 0.92rem; line-height: 1.45; color: var(--text-muted); }
.error-msg { display: flex; gap: 8px; align-items: flex-start; color: var(--accent-text); font-weight: 700; font-size: 0.95rem; line-height: 1.35; }
.error-msg::before { content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-text); color: var(--surface); font: 800 0.8rem/1 var(--font-display); margin-top: 1px; }
.form [aria-invalid="true"] { border-color: var(--accent-text) !important; box-shadow: 0 0 0 1.5px var(--accent-text); }

.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-choice { position: relative; display: inline-flex; cursor: pointer; }
.pill-choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pill-choice span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border: 2.5px solid var(--text); border-radius: var(--radius-pill);
  background: var(--surface); font-weight: 700;
}
.pill-choice span::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; flex: none;
}
.pill-choice input[type="checkbox"] + span::before { border-radius: 4px; }
.pill-choice input:checked + span { background: var(--club-red); border-color: var(--club-red); color: var(--sand); }
.pill-choice input:checked + span::before { background: var(--sand); box-shadow: inset 0 0 0 3px var(--club-red); border-color: var(--sand); }
.pill-choice input:focus-visible + span { outline: 3px solid var(--focus-color); outline-offset: 3px; }
.choice-group[aria-invalid="true"] .pill-choice span { border-color: var(--accent-text); }

.checks { display: grid; gap: 14px; border: 0; padding: 0; margin: 0; }
.check { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.check input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--club-red); cursor: pointer; }
.check label { line-height: 1.45; cursor: pointer; }
.check .error-msg { grid-column: 2; }
.check input[aria-invalid="true"] { outline: 2.5px solid var(--accent-text); outline-offset: 2px; }

.inline-note {
  padding: 14px 16px; border-radius: 12px;
  background: rgba(14, 116, 112, 0.1); border: 2px dashed var(--gulf-teal);
  font-size: 0.98rem; line-height: 1.5;
}
.checks > .checks-legend { padding: 0; margin-bottom: 4px; font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
/* date of birth: day, month and year boxes in a row (birth_date() in macros.html), one error line for all three */
.date-boxes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px; max-width: 320px; }
.date-box { display: grid; gap: 4px; min-width: 0; }
.date-box label { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); }
.form .date-field[aria-invalid="true"] { box-shadow: none; }
.form .date-field[aria-invalid="true"] input { border-color: var(--accent-text); }
/* the invisible "are you a person" check only takes room when Cloudflare needs a click */
.form-turnstile:empty { display: none; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.form-small { font-size: var(--fs-small); color: var(--text-muted); }
.form-status { padding: 14px 16px; border-radius: 12px; background: rgba(210, 38, 25, 0.1); border: 2px solid var(--accent-text); font-weight: 600; }
/* off the start side of the page: left in English, right in Arabic, so it never makes a page scroll sideways */
.hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

.preview-banner { padding: 12px 16px; border-radius: 12px; background: var(--sun); color: var(--ink); font-size: 0.95rem; line-height: 1.45; }

.success { display: flex; flex-direction: column; gap: 16px; }
.success:focus { outline: none; }
.success .shout-lg { font-size: clamp(2rem, 4.4vw, 3.4rem); }

/* member welcome (the account page, after confirming the email): the sticker sits on the card's stub, so the heading
   has the whole width for a long name */
.welcome-card { position: relative; max-width: 460px; margin-top: 12px; }
.welcome-card .sticker { position: absolute; z-index: 1; inset-block-start: -34px; inset-inline-end: -8px; }
.next-steps { list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 8px; }
.next-step { padding: 20px; border-radius: var(--radius-md); border: 2.5px solid var(--text); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.next-step.is-current { background: var(--surface); box-shadow: 5px 6px 0 var(--club-red); border-color: var(--club-red); }
.next-step.is-locked { border-style: dashed; opacity: 0.7; }
.next-step.is-done { border-color: var(--gulf-teal); }
.next-step.is-done .step-label::after { content: " \2713  done"; color: var(--gulf-teal); }
:lang(ar) .next-step.is-done .step-label::after { content: " \2713  \62A\645"; }
.nowrap { white-space: nowrap; }
.step-label { font: 800 0.8rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.next-step h4 { font-size: 1.35rem; }

/* ---------- FAQ ---------- */
.faq-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 4vw, 44px); list-style: none; padding: 0; }
.faq-nav a {
  display: inline-flex; padding: 10px 16px; border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--text); box-shadow: inset 0 0 0 2.5px var(--text);
  font-weight: 800; text-decoration: none; font-size: 0.95rem;
}
.faq-nav a:hover { background: var(--sun); color: var(--ink); }
.faq-section + .faq-section { margin-top: clamp(40px, 6vw, 64px); }
.faq-section > h2 { font-size: var(--fs-md); margin-bottom: 18px; scroll-margin-top: 110px; }
.qa-list { display: grid; gap: 12px; }
details.qa { border: 2.5px solid var(--text); border-radius: var(--radius-md); background: var(--surface-raised); }
.tone-raised details.qa { background: var(--surface); }
details.qa > summary {
  list-style: none; cursor: pointer; position: relative;
  padding-block: 18px; padding-inline: 20px 60px;
  font: 700 1.1rem/1.35 var(--font-text);
  border-radius: var(--radius-md);
}
details.qa > summary::-webkit-details-marker { display: none; }
details.qa > summary::after {
  content: ""; position: absolute; inset-inline-end: 18px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  border-radius: 50%;
  background:
    linear-gradient(#FAF1E2, #FAF1E2) center / 13px 3px no-repeat,
    linear-gradient(#FAF1E2, #FAF1E2) center / 3px 13px no-repeat,
    #D22619;
  transition: transform 0.2s ease;
}
details.qa[open] > summary::after { transform: rotate(45deg); }
details.qa > summary:hover { background: rgba(210, 38, 25, 0.06); }
.qa-body { padding: 0 20px 20px; max-width: 70ch; }
.qa-body > * + * { margin-top: 0.8em; }

/* ---------- Safety ---------- */
.emergency {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 24px; align-items: center;
  padding: clamp(20px, 3.5vw, 32px);
  border-radius: var(--radius-lg);
  background: var(--club-red); color: var(--sand);
  box-shadow: 6px 7px 0 var(--ink);
}
.emergency-num { font: 800 clamp(3.4rem, 9vw, 6rem)/0.85 var(--font-display); letter-spacing: -0.05em; font-variation-settings: "opsz" 96; }
.emergency h2 { font-size: var(--fs-sm); margin-bottom: 6px; }
.emergency a { color: var(--sand); }
@media (max-width: 560px) { .emergency { grid-template-columns: minmax(0, 1fr); } }
.jump-nav { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; padding: 0; }
.jump-nav a {
  display: inline-flex; padding: 9px 14px; border-radius: var(--radius-pill);
  background: var(--card); color: var(--fg); box-shadow: inset 0 0 0 2px var(--card-edge);
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
}
.jump-nav a:hover { background: var(--sun); color: var(--ink); box-shadow: none; }
.promise-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.promise-grid li { padding: 24px; border-radius: var(--radius-lg); background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.promise-grid .doodle { width: 56px; height: 56px; margin-bottom: 6px; }
.promise-grid h3 { font-size: 1.4rem; }
.rules { list-style: none; padding: 0; display: grid; gap: 0; border-top: 2.5px solid var(--card-edge); }
.rules li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 2px solid var(--line); }
.tone-ink .rules li, .tone-red .rules li, .tone-teal .rules li { border-bottom-color: rgba(250, 241, 226, 0.22); }
.rules li .sparkle { width: 24px; height: 24px; margin-top: 3px; color: var(--pop); }
.rules strong { font-weight: 800; }

/* ---------- Legal pages ---------- */
.legal-layout { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.toc { position: sticky; top: 110px; padding: 20px; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: inset 0 0 0 2px var(--line); }
.toc h2 { font-size: 0.85rem; letter-spacing: 0.12em; margin-bottom: 12px; }
.toc ol { padding-inline-start: 1.2em; display: grid; gap: 6px; font-size: 0.95rem; }
.toc a { color: var(--text); text-decoration-thickness: 1px; }
.toc a:hover { color: var(--accent-text); }
.legal-meta { font-weight: 700; color: var(--text-muted); }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
}

/* ---------- Partner logos ---------- */
.logo-wall { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 16px; }
.logo-wall li { aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 18px; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: inset 0 0 0 2px var(--line); }
.logo-wall img { max-height: 70px; width: auto; }
.empty-state {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
  padding: clamp(22px, 4vw, 36px); border-radius: var(--radius-lg);
  border: 3px dashed var(--text-muted);
}
.empty-state p { font-size: var(--fs-lead); font-weight: 600; max-width: 42ch; }

.path-card { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg); }
.path-card h2 { font-size: var(--fs-lg); }
.path-card h3 { font-size: 1.15rem; margin-top: 8px; }
.path-card .cta-row { margin-top: auto; padding-top: 10px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-ways { list-style: none; padding: 0; display: grid; gap: 14px; }
.contact-ways li { padding: 20px; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: inset 0 0 0 2px var(--line); }
.contact-ways h3 { font-size: 1.1rem; margin-bottom: 6px; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.copy-row code, .copy-text { font: 700 1rem/1.4 var(--font-text); user-select: all; word-break: break-all; }
.copy-btn {
  appearance: none; border: 2px solid var(--text); background: transparent; color: var(--text);
  border-radius: var(--radius-pill); padding: 6px 12px; font: 800 0.8rem/1 var(--font-display);
  text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer;
}
.copy-btn:hover { background: var(--text); color: var(--surface); }
.topic-hint { padding: 12px 14px; border-radius: 12px; background: rgba(255, 200, 61, 0.28); border: 2px solid var(--sun); font-size: 0.97rem; }

/* ---------- Final CTA band ---------- */
.final-cta .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: end; }
.final-cta .shout-xl { max-width: 13ch; }
.final-cta .cta-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.final-cta .doodle { width: 120px; margin-inline-start: 20px; }
@media (max-width: 860px) { .final-cta .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Manifesto ---------- */
.manifesto-list { list-style: none; padding: 0; display: grid; gap: clamp(22px, 3vw, 34px); margin-top: 26px; }
.manifesto-list li {
  font: 700 clamp(1.45rem, 3.1vw, 2.35rem)/1.2 var(--font-display);
  letter-spacing: -0.02em;
  max-width: 30ch;
  font-variation-settings: "opsz" 48;
  padding-inline-start: clamp(40px, 5vw, 64px);
  position: relative;
}
.manifesto-list li .sparkle { position: absolute; inset-inline-start: 0; top: 0.18em; width: clamp(24px, 3vw, 36px); height: clamp(24px, 3vw, 36px); color: var(--pop); }

.not-list { list-style: none; padding: 0; display: grid; gap: 0; border-top: 2.5px solid var(--text); }
.not-list li { padding: 16px 0; border-bottom: 2px solid var(--line); font-size: 1.08rem; }
.not-list strong { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; margin-inline-end: 6px; }

/* ---------- Footer ---------- */
.site-footer { position: relative; padding-block: clamp(56px, 7vw, 88px) 28px; margin-top: 0; }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--zz); background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Cpath d='M0 1H2L1 0Z'/%3E%3C/svg%3E") 0 0 / 28px 100% repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Cpath d='M0 1H2L1 0Z'/%3E%3C/svg%3E") 0 0 / 28px 100% repeat-x;
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); gap: clamp(36px, 6vw, 80px); }
.footer-brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.footer-logo { display: block; width: 190px; line-height: 0; border-radius: 8px; }
.footer-logo .logo { width: 100%; height: auto; }
.footer-tagline { font: 700 1.4rem/1.15 var(--font-hand); text-transform: lowercase; }
.footer-small { color: var(--muted); max-width: 32ch; }
.social-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.social-links a {
  display: inline-flex; padding: 9px 15px; border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 2px rgba(250, 241, 226, 0.5); color: var(--sand);
  font-weight: 700; text-decoration: none; font-size: 0.95rem;
}
.social-links a:hover { background: var(--sand); color: var(--ink); }
.footer-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; }
.footer-heading { font: 800 0.8rem/1 var(--font-display); letter-spacing: 0.12em; color: var(--sun); margin-bottom: 14px; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.footer-col a { color: var(--sand); text-decoration: none; font-weight: 500; }
.footer-col a:hover { text-decoration: underline; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  margin-top: clamp(40px, 6vw, 64px); padding-top: 22px; border-top: 1.5px solid rgba(250, 241, 226, 0.2);
  font-size: 0.92rem; color: var(--muted);
}
.footer-bottom a { color: var(--sand); }
.footer-emergency { font-weight: 800; color: var(--sand); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  transform: translateX(-50%);
  max-width: min(92vw, 460px);
  padding: 14px 20px; border-radius: 14px;
  background: var(--ink); color: var(--sand);
  box-shadow: 4px 5px 0 var(--club-red);
  font-weight: 600; text-align: center;
}

/* ---------- 404 ---------- */
.nf-actions { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .ticket-btn:hover { transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .ticker, .site-header, .site-footer, .hero-art, .ticket-btn, .toast { display: none !important; }
  .band { padding-block: 24px; background: #fff !important; color: #000 !important; }
  .band::after, .band::before { display: none; }
}

/* doodles inside cards */
.card > .doodle { width: 72px; height: 72px; }
@media (max-width: 600px) { .tier .sticker { right: 6px; } }
.promise-grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ---------- Home: member strip, formats, Instagram ---------- */
.member-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
  margin-top: clamp(36px, 5vw, 56px); padding: clamp(20px, 3vw, 28px) clamp(20px, 3.5vw, 36px);
  border-radius: var(--radius-lg); background: var(--surface-raised);
  border: 2.5px solid var(--text); box-shadow: 6px 7px 0 var(--shadow-color);
}
.member-strip p { font-size: var(--fs-lead); max-width: 46ch; }
.format-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.format-note { display: flex; align-items: flex-start; gap: 12px; margin-top: clamp(24px, 3vw, 36px); max-width: 62ch; font-size: var(--fs-lead); font-weight: 600; }
.format-note .shield { width: 30px; height: 30px; flex: none; margin-top: 2px; fill: none; stroke: var(--gulf-teal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .format-note .shield { stroke: #4FC7BF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .format-note .shield { stroke: #4FC7BF; } }
.ig-art { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin-inline: auto; }
.ig-art .doodle { position: absolute; left: 6%; top: 4%; width: 74%; height: auto; transform: rotate(-6deg); }
.ig-art .art-sparkle { left: auto; top: auto; right: 4%; bottom: 4%; width: 26%; color: var(--accent-text); }
@media (max-width: 860px) { .ig-art { display: none; } }

/* ---------- Who we are: team ---------- */
.split .manifesto-list { margin-top: 0; }
.split .manifesto-list li { font-size: clamp(1.3rem, 2.4vw, 1.9rem); }

/* ---------- Modal ---------- */
.modal {
  width: min(640px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; overflow: auto;
  border: 2.5px solid var(--text); border-radius: var(--radius-lg);
  background: var(--surface-raised); color: var(--text);
  box-shadow: 8px 9px 0 var(--club-red);
}
.modal::backdrop { background: rgba(42, 23, 18, 0.62); }
.modal-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px clamp(20px, 4vw, 32px); background: var(--surface-raised); border-bottom: 2px solid var(--line);
}
.modal-body { padding: clamp(20px, 4vw, 32px); }
.modal-close {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border: 2.5px solid var(--text); border-radius: 50%; background: transparent; color: var(--text); cursor: pointer;
}
.modal-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.modal-close:hover { background: var(--text); color: var(--surface); }
.modal .form-card { box-shadow: none; }
body:has(.modal[open]) { overflow: hidden; }

/* ---------- Shop (coming soon) ---------- */
.shop-soon { min-height: 60vh; display: flex; align-items: center; }

/* ---------- Partners ---------- */
.partner-wall { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(16px, 2.5vw, 28px); }
.partner-card {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 14px 14px 18px; border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); text-decoration: none;
  border: 2.5px solid var(--text); box-shadow: 6px 7px 0 var(--shadow-color);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.partner-card:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 8px 9px 0 var(--club-red); }
.partner-card img { width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); margin-bottom: 8px; }
.partner-name { display: inline-flex; align-items: center; gap: 6px; font: 800 1.3rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.partner-name svg { width: 1em; height: 1em; flex: none; fill: none; stroke: var(--accent-text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.partner-about { color: var(--text-muted); font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) { a.partner-card:hover { transform: none; } }
.tiers-2 { max-width: 900px; }
.emergency.cyber { background: var(--gulf-teal); }

/* ---------- Arabic (right to left) ---------- */
:root[lang="ar"] {
  --font-display: "Bricolage Grotesque", "Noto Kufi Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  --font-text: "Bricolage Grotesque", "Noto Kufi Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  --font-hand: "Shantell Sans", "Noto Kufi Arabic", "Geeza Pro", Tahoma, sans-serif;
  --font-scribble: "Noto Kufi Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
}
/* Arabic letters join up, so no letter-spacing, and caps don't exist */
:lang(ar) * { letter-spacing: 0 !important; }
/* Arabic letters reach well above and below the line, so headings need more room between lines */
:lang(ar) .shout-hero, :lang(ar) .shout-xl, :lang(ar) .shout-lg, :lang(ar) h2 { line-height: 1.45; }
:lang(ar) .shout-md, :lang(ar) .shout-sm, :lang(ar) h3, :lang(ar) .series-card h3 { line-height: 1.4; }
:lang(ar) .scribble { font-weight: 800; line-height: 1.3; text-decoration: underline wavy var(--pop); text-decoration-thickness: 0.06em; text-underline-offset: 0.3em; }
:lang(ar) .lead, :lang(ar) body { line-height: 1.8; }
:lang(ar) body { font-size: 1rem; }
:lang(ar) .note { font-weight: 600; }
:lang(ar) .manifesto-list li { line-height: 1.45; }
:lang(ar) .nametag-name { line-height: 1.3; }
[dir="rtl"] .note .note-arrow { transform: rotate(10deg); }
[dir="rtl"] .arrow-link svg { transform: scaleX(-1); }
[dir="rtl"] .arrow-link:hover svg { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .ticker-track { direction: ltr; }
[dir="rtl"] .ticker-item { direction: rtl; }
[dir="rtl"] .ticker-toggle { box-shadow: 14px 0 14px -4px var(--tk-bg); }

/* ---------- Language switch (top of the ticker) ---------- */
.lang-switch {
  flex: none; position: relative; z-index: 1; align-self: center;
  display: inline-flex; align-items: center; margin-inline: 8px 2px; padding: 3px;
  border-radius: var(--radius-pill); background: var(--tk-bg);
  box-shadow: inset 0 0 0 2px var(--tk-fg), -14px 0 14px -4px var(--tk-bg);
  color: var(--tk-fg); text-decoration: none;
}
.ls-opt { display: inline-grid; place-items: center; min-width: 40px; padding: 4px 9px; border-radius: var(--radius-pill); font: 800 0.78rem/1 var(--font-display); letter-spacing: 0.04em; }
.ls-opt[lang="ar"] { font-family: "Noto Kufi Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif; font-size: 0.85rem; letter-spacing: 0; }
.ls-opt.is-on { background: var(--sun); color: var(--ink); }
.lang-switch:hover .ls-opt:not(.is-on) { text-decoration: underline; text-decoration-thickness: 2px; }
.lang-switch:focus-visible { outline: 3px solid var(--tk-fg); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .lang-switch { margin-inline-end: 10px; } }
/* Event formats: same card for all three, colour as the accent. Mixed = Club Red, women only = Flamingo, men only = Gulf Teal */
.format-grid li {
  position: relative; overflow: hidden;
  background: var(--surface); color: var(--text);
  border: 2.5px solid var(--text); box-shadow: 7px 8px 0 var(--fmt);
  padding-top: 34px;
}
.format-grid li::before { content: ""; position: absolute; inset: 0 0 auto; height: 12px; background: var(--fmt); border-bottom: 2.5px solid var(--text); }
.format-grid .doodle { width: 72px; height: 72px; }
.format-mixed { --fmt: var(--club-red); }
.format-women { --fmt: var(--flamingo); }
.format-men { --fmt: var(--gulf-teal); }
.team-discord { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; overflow-wrap: anywhere; }
.team-discord-label { font: 800 0.72rem/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius-pill); background: var(--text); color: var(--surface); }

/* ---------- Staff area ---------- */
.staff-band { min-height: 70vh; }
.staff-bar, .staff-editor-head, .staff-members { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.staff-editor-head { margin-bottom: 20px; }
.staff-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.staff-preview { position: sticky; top: 110px; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
  .staff-grid { grid-template-columns: minmax(0, 1fr); }
  .staff-preview { position: static; max-width: 280px; }
}
.field-label { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.staff-photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.staff-file { position: relative; }
.staff-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.staff-file:focus-within { outline: 3px solid var(--focus-color); outline-offset: 3px; }
.staff-admin-fields { border: 2.5px dashed var(--line); border-radius: var(--radius-md); padding: 18px 18px 22px; margin: 0; }
.staff-admin-fields legend { padding: 0 8px; }
.staff-members { padding: clamp(20px, 3vw, 28px); border-radius: var(--radius-lg); background: var(--surface-raised); border: 2.5px solid var(--text); }
.staff-group + .staff-group { margin-top: 26px; }
.staff-group h3 { margin-bottom: 10px; }
.staff-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 0; border-top: 2px solid var(--line); }
.staff-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.staff-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.copy-btn.danger { border-color: var(--accent-text); color: var(--accent-text); }
.copy-btn.danger:hover { background: var(--accent-text); color: var(--surface); }
.staff-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: rgba(255, 200, 61, 0.22); border-color: var(--sun); }
.staff-invite input { flex: 1 1 260px; min-width: 0; padding: 8px 10px; border: 2px solid var(--text); border-radius: 10px; background: var(--surface); color: var(--text); font: 600 0.9rem/1.3 var(--font-text); }
.staff-add { padding-top: 8px; }
.staff-add-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px; align-items: end; }
@media (max-width: 700px) { .staff-add-row { grid-template-columns: minmax(0, 1fr); } }
.staff-dev { padding: 16px; border-radius: var(--radius-md); border: 2px dashed var(--sun); }
.staff-dev-list { display: flex; flex-wrap: wrap; gap: 8px; }
.staff-dev-list a { text-decoration: none; }
/* the "be our first partner" box only shows while a list is empty */
.partner-wall:not(:has(li)) { display: none; }
.partner-wall:has(li) + .empty-state { display: none; }
/* shop: "coming soon" until a product is live, then the product grid */
main:has(.product-grid li) .shop-soon, .shop-live:not(:has(.product-grid li)) { display: none; }
.product-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(18px, 2.5vw, 28px); }
.product-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.product-card h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.product-photo { width: 100%; margin-bottom: 6px; }
.product-photo img, .product-photo .photo-soon { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); border: 2.5px solid var(--text); box-shadow: 6px 7px 0 var(--shadow-color); }
.product-price { font: 800 1.2rem/1 var(--font-display); color: var(--accent-text); }
.staff-catalog { padding-top: 12px; border-top: 2.5px solid var(--text); }
.staff-thumb { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: #FFFFFF; border: 2px solid var(--line); }
.staff-who-img { flex-direction: row; align-items: center; gap: 12px; }
/* staff: looking members up, the anonymous totals and the log */
.staff-panel { padding: clamp(20px, 3vw, 28px); border-radius: var(--radius-lg); background: var(--surface-raised); border: 2.5px solid var(--text); min-width: 0; }
.staff-lookup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; max-width: 640px; }
@media (max-width: 560px) { .staff-lookup { grid-template-columns: minmax(0, 1fr); } }
.staff-member { padding: 18px; border-radius: var(--radius-md); background: var(--surface); border: 2px solid var(--line); min-width: 0; }
.staff-member h3 { overflow-wrap: anywhere; }
.staff-facts { display: grid; gap: 8px; }
.staff-facts > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 2px 16px; }
.staff-facts dt { font-weight: 700; }
.staff-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .staff-facts > div { grid-template-columns: minmax(0, 1fr); } }
.staff-agreements { padding-inline-start: 1.1em; display: grid; gap: 4px; }
.staff-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 20px 32px; }
.staff-total { display: grid; gap: 8px; align-content: start; }
.staff-total .staff-facts > div { grid-template-columns: minmax(0, 1fr) auto; }
.staff-audit { list-style: none; padding: 0; font-size: 0.95rem; }
.staff-audit li { padding: 8px 0; border-top: 2px solid var(--line); overflow-wrap: anywhere; }
/* founders: the list of every member. The table scrolls inside its own box, so the page never scrolls sideways.
   The column names stay in sight while it scrolls down, the member number while it scrolls sideways, and long names wrap. */
.staff-list-search { max-width: 640px; }
.staff-table-wrap { position: relative; overflow: auto; max-height: 70vh; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.staff-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.95rem; line-height: 1.4; }
.staff-table th, .staff-table td { padding: 8px 12px; text-align: start; vertical-align: top; white-space: nowrap; }
.staff-table th { position: sticky; top: 0; z-index: 1; background: var(--surface); font-weight: 800; box-shadow: inset 0 -2px 0 var(--line); }
.staff-table td { border-top: 2px solid var(--line); }
.staff-table tbody tr:first-child td { border-top: 0; }
.staff-table th:first-child, .staff-table td:first-child { position: sticky; inset-inline-start: 0; background: var(--surface); box-shadow: inset -2px 0 0 var(--line); }
.staff-table th:first-child { z-index: 2; box-shadow: inset 0 -2px 0 var(--line), inset -2px 0 0 var(--line); }
.staff-table td:first-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.staff-table bdi { display: inline-block; min-width: 10em; max-width: 14em; white-space: normal; }
/* a headline's second sentence, set smaller so it reads as one paragraph */
.why-sub { font-size: 0.58em; line-height: 1.45 !important; text-wrap: pretty; margin-top: 0.35em; max-width: 26ch; }
/* Arabic reads right to left, so corner doodles and stickers move to the left, away from where the text starts */
[dir="rtl"] .series-card .doodle { right: auto; left: 16px; }
[dir="rtl"] .tier .sticker { right: auto; left: -8px; }
@media (max-width: 600px) { [dir="rtl"] .tier .sticker { left: 6px; } }
@media (max-width: 820px) { [dir="rtl"] .hero-art { right: auto; left: 12px; } }

/* ---------- Member account ---------- */
.form input[type="password"] {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 2.5px solid var(--text); border-radius: 12px;
  background: var(--surface); color: var(--text); font: 500 1.0625rem/1.4 var(--font-text);
}
.tone-raised .form-card input[type="password"] { background: var(--surface-raised); }
.account-band { min-height: 70vh; }
.account-narrow { max-width: 560px; }
[data-view]:focus, [data-2fa]:focus { outline: none; }
/* the member's sections, one column in the order they read */
.account-sections, .account-welcome { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); max-width: 760px; }
.account-welcome .shout-lg { overflow-wrap: anywhere; }
.account-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.account-top > .stack { flex: 1 1 300px; max-width: 460px; min-width: 0; }
.account-section { display: grid; gap: 14px; }
/* an email address has nowhere to break, so a long one could push the page sideways on a phone */
[data-member-email], [data-inbox-email] { overflow-wrap: anywhere; }
.account-notice:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: rgba(255, 200, 61, 0.22); border-color: var(--sun); }
.agreed-list { list-style: none; padding: 0; display: grid; border-top: 2px solid var(--line); }
.agreed-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; padding: 12px 0; border-bottom: 2px solid var(--line); }
.agreed-list a { font-weight: 800; }
.agreed-list [data-agreed] { color: var(--text-muted); font-size: var(--fs-small); }
/* a newer version to agree to: the first card a member sees, with a Sun shadow (a highlight, the same in both themes) */
.account-updates { box-shadow: 6px 7px 0 var(--sun); }
.account-danger { border-color: var(--accent-text); box-shadow: 6px 7px 0 var(--accent-text); }
.account-delete-btn { padding: 10px 16px; font-size: 0.9rem; }
.account-section code, .tfa-key, .backup-codes { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* two-step login: the QR code (an SVG account.js draws, ink on sand in both themes, so phones can scan it), and the
   key and the backup codes, which may break anywhere on a narrow phone */
.tfa-qr { display: block; width: 220px; max-width: 100%; height: auto; border: 2.5px solid var(--text); border-radius: 12px; }
.tfa-key { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.backup-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5em), 1fr)); gap: 8px 20px; font-weight: 700; font-size: 1.05rem; }
.step-form { display: grid; gap: 10px; }

/* ---------- Member card (member_card() in macros.html, filled by account.js) ---------- */
/* A sand ticket with a Club Red band and a Sun stub, notched at both ends with the same mask as the ticket buttons.
   Brand colours only, so it's the same in dark mode. The ink outline and the shadow are drop-shadows on .mcard, so they
   follow the notches. The notches sit halfway down; the padding at both ends keeps the words clear of them. */
.mcard {
  width: 100%; max-width: 460px;
  filter: drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(4px 5px 0 var(--shadow-color));
}
.mcard-ticket {
  --n: 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden; border-radius: 16px;
  background: var(--sand); color: var(--ink);
  -webkit-mask:
    radial-gradient(circle var(--n) at 0 50%, #0000 96%, #000) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle var(--n) at 100% 50%, #0000 96%, #000) 100% 0 / 51% 100% no-repeat;
          mask:
    radial-gradient(circle var(--n) at 0 50%, #0000 96%, #000) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle var(--n) at 100% 50%, #0000 96%, #000) 100% 0 / 51% 100% no-repeat;
}
.mcard-main { display: flex; flex-direction: column; min-width: 0; }
.mcard-band {
  position: relative; z-index: 1;
  padding-block: 14px 12px; padding-inline: calc(var(--n) + 10px) 14px;
  background: var(--club-red);
  --logo-fg: var(--sand); --logo-d1: var(--flamingo); --logo-d2: var(--sun);
}
.mcard-band::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 10px; background: var(--club-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Cpath d='M0 0H2L1 1Z'/%3E%3C/svg%3E") 0 0 / 20px 100% repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Cpath d='M0 0H2L1 1Z'/%3E%3C/svg%3E") 0 0 / 20px 100% repeat-x;
}
.mcard-logo { width: min(100%, 190px); height: auto; }
.mcard-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding-block: 22px 18px; padding-inline: calc(var(--n) + 10px) 14px; }
.mcard-kicker { font: 800 0.75rem/1.1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.mcard-name {
  font: 800 clamp(1.1rem, 0.6rem + 2.5vw, 2rem)/1 var(--font-display); letter-spacing: -0.02em; text-transform: uppercase;
  font-variation-settings: "opsz" 96; text-wrap: balance; overflow-wrap: anywhere;
}
.mcard-since { font-weight: 600; font-size: 0.9rem; line-height: 1.4; }
.mcard-since span { white-space: nowrap; }
.mcard-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding-block: 14px; padding-inline: 12px calc(var(--n) + 8px);
  background: var(--sun); color: var(--ink); border-inline-start: 3px dashed var(--ink); text-align: center;
}
.mcard-no-label { font: 800 0.75rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.mcard-no { font: 800 clamp(1.45rem, 0.85rem + 3vw, 2.8rem)/1 var(--font-display); letter-spacing: -0.03em; font-variation-settings: "opsz" 96; font-variant-numeric: tabular-nums; }
:lang(ar) .mcard-name { line-height: 1.35; }
:lang(ar) .mcard-kicker, :lang(ar) .mcard-no-label { line-height: 1.5; font-size: 0.85rem; }

/* ---------- Meet the team: one even grid of cards, built like the partner cards ---------- */
.team-wall { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(16px, 2.5vw, 28px); }
.team-card {
  --tc: var(--club-red); --tc-fg: var(--sand);
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 14px 14px 18px; border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text);
  border: 2.5px solid var(--text); box-shadow: 6px 7px 0 var(--tc);
}
.tc-teal { --tc: var(--gulf-teal); --tc-fg: var(--sand); }
.tc-sun  { --tc: var(--sun); --tc-fg: var(--ink); }
.tc-pink { --tc: var(--flamingo); --tc-fg: var(--ink); }
.team-photo {
  width: 100%; aspect-ratio: 1; margin-bottom: 8px; overflow: hidden;
  display: grid; place-items: center; border-radius: var(--radius-md);
  background: var(--tc); color: var(--tc-fg);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.team-initial { font: 800 clamp(5rem, 9vw, 7rem)/1 var(--font-display); letter-spacing: -0.04em; text-transform: uppercase; font-variation-settings: "opsz" 96; }
.team-name { font: 800 1.3rem/1.1 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; overflow-wrap: anywhere; }
.team-meta { color: var(--text-muted); font-size: 0.95rem; line-height: 1.4; }
.team-card .team-discord { margin-top: 4px; }
:lang(ar) .team-name { line-height: 1.4; }
/* phones: two cards per row so the team stays compact */
@media (max-width: 560px) {
  .team-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .team-card { padding: 10px 10px 14px; box-shadow: 4px 5px 0 var(--tc); }
  .team-initial { font-size: 3.6rem; }
  .team-name { font-size: 1.02rem; }
  .team-meta { font-size: 0.85rem; }
  .team-card .team-discord { font-size: 0.8rem; flex-wrap: wrap; gap: 4px 6px; }
}

/* ---------- What's on (events) ---------- */
/* Cards use the series colours (.series-card tones; Online Nights is .is-online). The list is filled in
   live from the events bot (functions/_lib/events.js), so it must work for any mix of cards. */
.event-board { display: grid; gap: 18px; }
.event-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(18px, 2.5vw, 28px); align-items: stretch; }
.event-card { padding: 0; gap: 0; min-height: 0; scroll-margin-top: 110px; }
/* Hangouts cards stay white in dark mode too, so their links and boxes can't follow the page theme */
.event-card.tone-white, .past-card.tone-white { --link-color: var(--club-red); --card: rgba(42, 23, 18, 0.06); }
.event-card:target { outline: 4px solid var(--text); outline-offset: 4px; }
/* Covers show whole at their own shape (no cropping). The img's width and height attributes come from the bot, so the
   browser reserves the right space before it loads. Very tall covers stop at 36rem and fit inside the box. Unknown size
   (an older bot): a 5:2 box with the banner fitted inside. */
.event-cover { overflow: hidden; background: var(--card); border-bottom: 2.5px solid currentColor; }
.event-cover img { display: block; width: 100%; height: auto; max-height: 36rem; object-fit: contain; }
.event-cover.is-boxed { aspect-ratio: 5 / 2; }
.event-cover.is-boxed img { height: 100%; max-height: none; }
.event-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 20px clamp(18px, 3vw, 24px) 24px; min-width: 0; }
.event-card h3 { padding-top: 0; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 0.95; overflow-wrap: anywhere; }
.event-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.event-format, .event-live {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  border-radius: var(--radius-pill); font: 800 0.75rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase;
}
.event-format { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 2px var(--text); }
.event-format::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--fmt); box-shadow: 0 0 0 2px var(--text); }
.event-live { background: var(--sun); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.event-when { font: 800 1.08rem/1.3 var(--font-display); font-variation-settings: "opsz" 36; }
.event-repeats { font-weight: 700; font-size: 0.95rem; }
.event-desc { white-space: pre-line; overflow-wrap: anywhere; }
.event-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; padding-top: 12px; border-top: 2px dashed currentColor; }
.event-facts > div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; }
.event-facts dt { font: 800 0.75rem/1.5 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.event-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.event-place { margin-inline-end: 10px; }
.event-map { font-weight: 800; white-space: nowrap; }
/* separate caps for men and women: each side wraps as one piece when it can */
.event-side { display: inline-block; }
.event-split { font-weight: 600; }
/* packages: one line each on the card, then the entry fee they include; one choice a line in the sign-up box */
.event-package, .event-package-fee { display: block; }
.event-package-fee { font-weight: 500; }
.event-signup-packages .pills { flex-direction: column; align-items: flex-start; }
.event-signup-packages .pill-choice span { padding-block: 8px; }
.event-signup-packages .pill-choice .event-package-words { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.event-signup-packages .pill-choice .event-package-words::before { content: none; }
.event-rsvp:not([hidden]) {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  padding: 10px 14px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 2px currentColor; font-weight: 700;
}
.event-rsvp .text-button { color: inherit; }
.event-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: auto; padding-top: 6px; }
.event-stale, .board-stale { padding: 12px 14px; border-radius: 12px; background: rgba(255, 200, 61, 0.28); border: 2px solid var(--sun); font-weight: 600; }
/* the sign-up box */
.event-signup-for { font: 800 1.2rem/1.15 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.event-signup-for:empty { display: none; }
.event-signup-note { font-weight: 600; }
.event-signup-done:focus { outline: none; }
/* the house rules, for types that ask (the list comes in from the events list's <template id="event-rules">) */
.event-signup-rules { padding: 14px 16px; border-radius: 12px; background: var(--surface-raised); box-shadow: inset 0 0 0 2px var(--line); }
.event-rules { margin: 0; padding-inline-start: 1.25em; display: grid; gap: 6px; line-height: 1.45; overflow-wrap: anywhere; }
[dir="rtl"] .event-rules[dir="ltr"] { text-align: left; }
/* Been and gone: dates that have happened, as smaller cards with no actions. They reuse the event card parts
   but never .event-card. The first 6 show; "Show more" (events.js) adds 6 at a time and focuses the first new one. */
.past-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(14px, 2vw, 22px); align-items: stretch; }
.past-card { padding: 0; gap: 0; min-height: 0; }
.past-card:focus-visible { outline: 4px solid var(--text); outline-offset: 4px; }
.past-card .event-body { gap: 8px; padding: 16px clamp(16px, 2.5vw, 20px) 20px; }
.past-card h3 { padding-top: 0; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 0.95; overflow-wrap: anywhere; }
.past-card .event-when { font-size: 1rem; }
/* p.past-went so the dashed line spans the card: it beats the 34ch cap on .series-card p:last-child */
.past-card p.past-went { margin-top: auto; padding-top: 10px; border-top: 2px dashed currentColor; font-weight: 800; max-width: none; }
.past-more { align-self: flex-start; }
/* Event text stays English (left to right) on Arabic pages, but lines up with the Arabic around it */
[dir="rtl"] .event-card [dir="ltr"], [dir="rtl"] .past-card [dir="ltr"], [dir="rtl"] .event-signup-for { text-align: right; }
:lang(ar) .event-card h3:lang(en), :lang(ar) .past-card h3:lang(en) { line-height: 0.95; }
:lang(ar) .event-card p:lang(en) { line-height: 1.6; }
@media (max-width: 420px) {
  .event-body { gap: 10px; }
  .event-facts { gap: 6px 10px; }
}

/* ---------- Leaderboard ---------- */
/* Filled in live from BahrainBot (functions/_lib/leaderboard.js). Names come from Discord, so expect anything: long,
   any script, emoji. The initial sits under the picture and shows when there's no picture or it doesn't load.
   Tier badges, in brand colours only: Bronze a dashed outline, Silver an outline, then Gold sun, Emerald teal,
   Ruby red, Diamond flamingo and Champion ink with a sun sparkle. */
.board-wrap { display: grid; gap: 18px; max-width: 860px; }
.board {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  background: var(--card); border: 2.5px solid var(--card-edge); border-radius: var(--radius-lg);
  box-shadow: 6px 7px 0 var(--club-red);
}
.board-row {
  display: grid; grid-template-columns: minmax(2.4rem, auto) 48px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 12px clamp(14px, 3vw, 24px);
}
.board-row + .board-row { border-top: 2px solid var(--line); }
.board-rank { font: 800 1.2rem/1 var(--font-display); text-align: center; font-variation-settings: "opsz" 48; }
.board-row.is-top .board-rank {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; justify-self: center;
  border-radius: 50%; background: var(--sun); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink);
}
.board-pic {
  position: relative; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden;
  border: 2px solid var(--text); border-radius: 50%; background: var(--tc, var(--club-red)); color: var(--tc-fg, var(--sand));
  font: 800 1.35rem/1 var(--font-display); text-transform: uppercase;
}
.board-photo { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.board-who { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.board-name { display: block; max-width: 100%; font: 800 1.12rem/1.2 var(--font-display); overflow-wrap: anywhere; }
.board-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.board-xp { color: var(--muted); font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.board-level { display: grid; justify-items: center; gap: 2px; }
.board-level-label { color: var(--muted); font: 800 0.68rem/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.board-level-num { font: 800 1.9rem/1 var(--font-display); letter-spacing: -0.03em; font-variation-settings: "opsz" 96; }
.board-tier {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border: 2px solid var(--text); border-radius: var(--radius-pill);
  font: 800 0.7rem/1 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.tier-bronze { border-style: dashed; }
.tier-gold { background: var(--sun); color: var(--ink); }
.tier-emerald { background: var(--gulf-teal); color: var(--sand); }
.tier-ruby { background: var(--club-red); color: var(--sand); }
.tier-diamond { background: var(--flamingo); color: var(--ink); }
.tier-champion { background: var(--ink); color: var(--sand); }
.tier-champion .sparkle { width: 0.95em; height: 0.95em; color: var(--sun); }
.board-pages .jump-nav a[aria-current="page"] { background: var(--text); color: var(--surface); box-shadow: none; }
:lang(ar) .board-level-label { font-size: 0.8rem; }
:lang(ar) .board-name { line-height: 1.5; }
@media (max-width: 420px) {
  .board-row { grid-template-columns: minmax(2rem, auto) 40px minmax(0, 1fr) auto; gap: 10px; padding-inline: 12px; }
  .board-row.is-top .board-rank { width: 2rem; height: 2rem; }
  .board-rank { font-size: 1.05rem; }
  .board-pic { width: 40px; height: 40px; font-size: 1.1rem; }
  .board-name { font-size: 1rem; }
  .board-level-num { font-size: 1.6rem; }
  .board-tier { padding: 3px 7px; letter-spacing: 0.03em; }
}