:root {
  --sky-indigo: #1B1F5C;
  --sky-lapis: #2B3F9E;
  --sky-dusk: #6B4C9A;
  --sky-rose: #C9707F;
  --sky-apricot: #F2A65A;
  --sand-pale: #F3DCB3;
  --sand-gold: #D9A860;
  --sand-ochre: #B5762F;
  --sand-umber: #5E3A1C;
  --terracotta: #B8512E;
  --oasis-teal: #1E8C8A;
  --oasis-turquoise: #3FC1B9;
  --oasis-deep: #0E4F56;
  --crescent-green: #117A4A;
  --crescent-jade: #2FA66E;
  --crescent-glow: #7FE0A8;
  --palm-green: #2E5D3A;
  --gold: #D4A84B;
  --gold-bright: #F3D27A;
  --brass-shadow: #8A6420;
  --lapis-tile: #1F4FA3;
  --cobalt-tile: #163C85;
  --rug-crimson: #8E1F2C;
  --rug-madder: #B5323A;
  --rug-rust: #A3482A;
  --rug-ivory: #EADFC5;
  --rug-navy: #1C2A5A;
  --ink: #120C1A;
  --ink-warm: #241A1C;
  --text-primary: #FBF3E4;
  --text-muted: #C9B38F;
  --ok-indigo: oklch(28% 0.11 280);
  --ok-lapis: oklch(40% 0.14 270);
  --ok-dusk: oklch(48% 0.12 305);
  --ok-rose: oklch(64% 0.13 15);
  --ok-apricot: oklch(78% 0.15 60);
  --ok-sand: oklch(76% 0.11 80);
  --ok-ochre: oklch(58% 0.12 70);
  --ok-teal: oklch(58% 0.11 190);
  --ok-turq: oklch(74% 0.12 185);
  --ok-green: oklch(48% 0.14 160);
  --ok-gold: oklch(75% 0.12 85);
  --horizon: 64%;
  --ease: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --rug-rhythm: 2.4rem;
  --girih-scale: 42px;
  --girih-opacity: 0.12;
  --sky-intensity: 1;
  --caustic-intensity: 1;
  --veil-opacity: 0.2;
  --silhouette-opacity: 1;
  --grain-opacity: 0.04;
  --khatam: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23EADFC5' fill-opacity='.30' stroke='%23D4A84B' stroke-opacity='.7' stroke-width='2'><rect x='27' y='27' width='46' height='46'/><rect x='27' y='27' width='46' height='46' transform='rotate(45 50 50)'/></g><circle cx='50' cy='50' r='8' fill='%231C2A5A' fill-opacity='.72'/></svg>");
  --mashrabiya: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path fill='none' stroke='white' stroke-width='1.5' d='M14 3c2.2 3.6 4.2 5.4 8 5.6-3.8 1.6-5.6 3.6-5.8 7.6-1.8-3.8-3.8-5.6-7.6-5.8 3.6-1.6 5.2-3.6 5.4-7.4z'/><path fill='none' stroke='white' stroke-width='1.15' d='M4 14h20M14 4v20M6 6l16 16M22 6L6 22'/></svg>");
  --sky-x: 0px; --sky-y: 0px;
  --palm-x: 0px; --palm-y: 0px;
  --lantern-x: 0px; --lantern-y: 0px;
  --angle: 20deg;
  --stop-shift: 0%;
  --grain-url: none;
}

@property --angle { syntax: "<angle>"; inherits: false; initial-value: 20deg; }
@property --stop-shift { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; background: var(--ink); }
body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: clip;
  background: var(--ink);
  color: var(--text-primary);
  font-family: Amiri, "Times New Roman", serif;
}
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.stage {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  overflow-x: clip;
}

.layer-sky, .layer-ground, .sky-fallback, .ground-fallback,
.veil, .silhouettes, .atmosphere, .css-moon, .grain {
  position: fixed;
}
.layer-sky, .layer-ground, .sky-fallback, .ground-fallback {
  inset: 0;
  width: 100%;
  height: 100dvh;
  pointer-events: none;
}
.layer-sky, .sky-fallback { z-index: 0; mix-blend-mode: normal; opacity: 1; will-change: opacity; }
.layer-ground, .ground-fallback { z-index: 1; mix-blend-mode: normal; will-change: opacity; }
.layer-sky, .layer-ground { display: block; opacity: 0; }
html.webgl .layer-sky, html.webgl .layer-ground { opacity: 1; transition: opacity 1s var(--ease); }
html.webgl .sky-fallback, html.webgl .ground-fallback { opacity: 0; visibility: hidden; }

.sky-fallback {
  background: linear-gradient(to bottom in oklch,
    var(--sky-indigo) 0%,
    color-mix(in oklch, var(--sky-indigo), var(--sky-lapis)) 22%,
    var(--sky-lapis) 40%,
    var(--sky-dusk) 58%,
    var(--sky-rose) 74%,
    var(--sky-apricot) var(--horizon),
    var(--sand-ochre) 78%,
    var(--sand-umber) 100%);
}
.ground-fallback {
  top: var(--horizon);
  background:
    radial-gradient(ellipse 28% 22% at 36% 42%, color-mix(in oklch, var(--oasis-turquoise) 70%, transparent), transparent 70%),
    radial-gradient(ellipse 22% 16% at 36% 48%, var(--oasis-deep), transparent 72%),
    linear-gradient(to bottom in oklch, var(--sand-pale), var(--sand-gold) 30%, var(--sand-ochre) 70%, var(--sand-umber));
}
.css-moon {
  z-index: 0;
  right: 12vw;
  top: 8vh;
  width: min(18vh, 140px);
  height: min(18vh, 140px);
  pointer-events: none;
}
html.webgl .css-moon { display: none; }

/* Girih strapwork */
.pattern-girih {
  background-image:
    repeating-linear-gradient(30deg, transparent 0 18px, color-mix(in oklch, var(--gold) calc(var(--girih-opacity) * 100%), transparent) 18px 19px),
    repeating-linear-gradient(-30deg, transparent 0 18px, color-mix(in oklch, var(--gold) calc(var(--girih-opacity) * 80%), transparent) 18px 19px),
    repeating-linear-gradient(90deg, transparent 0 36px, color-mix(in oklch, var(--gold) calc(var(--girih-opacity) * 50%), transparent) 36px 37px);
  background-size: var(--girih-scale) var(--girih-scale);
}

/* Silk veil */
.veil {
  inset: 0;
  height: 100dvh;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: normal;
  opacity: 1;
  will-change: transform;
}
.wave {
  position: absolute;
  left: -16%;
  width: 132%;
  mix-blend-mode: soft-light;
  opacity: var(--veil-opacity);
  will-change: transform;
  --girih-opacity: 0.06;
  background-image:
    repeating-linear-gradient(30deg, transparent 0 22px, color-mix(in oklch, var(--gold) 8%, transparent) 22px 23px),
    conic-gradient(from var(--angle) at calc(40% + var(--stop-shift)) 40% in oklch,
      var(--ok-dusk), color-mix(in oklch, var(--ok-dusk), var(--ok-apricot)) 30%,
      var(--ok-sand) 55%, color-mix(in oklch, var(--ok-sand), var(--ok-teal)) 78%, var(--ok-teal));
}
.wave-a { top: calc(var(--horizon) - 8vh); height: 22vh; animation: drift-a 29s var(--ease) infinite alternate; clip-path: polygon(0 55%, 15% 32%, 32% 58%, 50% 28%, 68% 52%, 84% 26%, 100% 48%, 100% 72%, 78% 88%, 52% 64%, 24% 90%, 0 70%); }
.wave-b { top: calc(var(--horizon) - 2vh); height: 18vh; animation: drift-b 41s var(--ease) infinite alternate; clip-path: polygon(0 48%, 18% 30%, 36% 62%, 58% 24%, 76% 50%, 100% 34%, 100% 70%, 70% 86%, 40% 62%, 0 78%); }
.wave-c {
  top: calc(var(--horizon) + 1vh); height: 16vh;
  animation: drift-c 67s var(--ease) infinite alternate;
  clip-path: polygon(0 42%, 20% 28%, 40% 55%, 62% 22%, 80% 46%, 100% 30%, 100% 68%, 64% 84%, 30% 60%, 0 74%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}
@keyframes drift-a { from { transform: translate3d(0,0,0); --angle: 10deg; } to { transform: translate3d(-8%, 2%, 0); --angle: 90deg; --stop-shift: 10%; } }
@keyframes drift-b { from { transform: translate3d(-6%, 1%, 0); --angle: 40deg; } to { transform: translate3d(7%, -2%, 0); --angle: 160deg; } }
@keyframes drift-c { from { transform: translate3d(4%, 0, 0); --angle: 0deg; } to { transform: translate3d(-9%, 3%, 0); --angle: 140deg; --stop-shift: 12%; } }

/* Silhouettes */
.silhouettes {
  inset: 0;
  height: 100dvh;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: normal;
  opacity: var(--silhouette-opacity);
  will-change: transform;
}
.depth {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to top, black 0%, black 46%, transparent 82%);
  mask-image: linear-gradient(to top, black 0%, black 46%, transparent 82%);
}
.silhouettes svg { fill: var(--ink-warm); overflow: visible; }
.win { fill: var(--gold); opacity: 0; animation: flicker var(--dur, 7s) var(--ease) infinite; animation-delay: var(--delay, 0s); }
@keyframes flicker {
  0%, 78%, 100% { opacity: 0; }
  84% { opacity: 0.9; }
  90% { opacity: 0.2; }
  95% { opacity: 0.75; }
}
.para-sky { position: absolute; left: 0; right: 0; top: var(--horizon); transform: translate3d(var(--sky-x), calc(-100% + var(--sky-y)), 0); }
.skyline-svg { width: min(32vw, 420px); height: 18vh; margin-left: auto; display: block; }
.para-palm { position: absolute; inset: 0; transform: translate3d(var(--palm-x), var(--palm-y), 0); }
.palm { position: absolute; width: clamp(64px, 8vw, 128px); height: auto; transform-origin: 50% 100%; }
.palm-1 { left: 8%; bottom: 16%; animation: sway 8s var(--ease) infinite alternate; }
.palm-2 { left: 14%; bottom: 9%; width: clamp(86px, 11vw, 168px); animation: sway 11s var(--ease) infinite alternate; }
.palm-3 { left: 22%; bottom: 18%; animation: sway 6.5s var(--ease) infinite alternate; }
.palm-4 { left: 27%; bottom: 7%; width: clamp(54px, 6.5vw, 100px); animation: sway 9s var(--ease) infinite alternate; }
.palm-5 { left: 33%; bottom: 13%; width: clamp(74px, 9vw, 140px); animation: sway 7.5s var(--ease) infinite alternate; }
.palm-6 { left: 39%; bottom: 20%; width: clamp(48px, 5.5vw, 90px); animation: sway 10s var(--ease) infinite alternate; }
.palm-7 { left: 4%; bottom: 24%; width: clamp(46px, 5vw, 84px); animation: sway 9.5s var(--ease) infinite alternate; }
.palm-8 { left: 46%; bottom: 11%; animation: sway 8.4s var(--ease) infinite alternate; }
@keyframes sway { from { transform: rotate(-0.5deg); } to { transform: rotate(0.5deg); } }
.caravan {
  position: absolute;
  left: -20%;
  top: calc(var(--horizon) - 4vh);
  width: min(28vw, 280px);
  animation: trek 120s linear infinite;
}
@keyframes trek { from { transform: translateX(0); } to { transform: translateX(70vw); } }
.lantern {
  position: absolute;
  top: 4vh;
  width: 36px;
  transform: translate3d(var(--lantern-x), var(--lantern-y), 0);
}
.lantern svg { width: 100%; height: auto; display: block; }
.lantern-l { left: 4vw; }
.lantern-r { right: 4vw; }
.lantern .leak {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-bright);
  opacity: 0.6;
  transform: translate(-50%, -50%);
  animation: pulse 4s var(--ease) infinite alternate;
}
@keyframes pulse { from { opacity: 0.35; } to { opacity: 0.85; } }

/* Atmosphere */
.atmosphere {
  inset: 0;
  height: 100dvh;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: normal;
  opacity: 1;
}
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 46%, color-mix(in oklch, var(--terracotta) 40%, var(--sky-indigo)) 100%);
  mix-blend-mode: multiply;
  opacity: 0.45;
}
.mashrabiya {
  position: absolute;
  top: 0;
  width: 38vw;
  height: 42vh;
  background: color-mix(in oklch, var(--gold) 62%, transparent);
  -webkit-mask-image: var(--mashrabiya), linear-gradient(black, transparent 80%);
  mask-image: var(--mashrabiya), linear-gradient(black, transparent 80%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-size: 22px 26px, 100% 100%;
  mask-size: 22px 26px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  opacity: 0.72;
  mix-blend-mode: screen;
}
.mash-l { left: 0; }
.mash-r { right: 0; transform: scaleX(-1); }
.bokeh { position: absolute; border-radius: 50%; filter: blur(50px); mix-blend-mode: screen; }
.bokeh-a { width: 28vw; height: 28vw; left: -6vw; top: 8vh; background: var(--gold-bright); opacity: 0.18; animation: float-a 48s var(--ease) infinite alternate; }
.bokeh-b { width: 22vw; height: 22vw; right: 8vw; bottom: 18vh; background: var(--oasis-turquoise); opacity: 0.16; animation: float-b 61s var(--ease) infinite alternate; }
@keyframes float-a { to { transform: translate3d(6vw, 4vh, 0); } }
@keyframes float-b { to { transform: translate3d(-4vw, -6vh, 0); } }
.sand {
  position: absolute;
  left: 0; right: 0;
  top: var(--horizon);
  bottom: 0;
  overflow: hidden;
}
.grain {
  inset: 0;
  height: 100dvh;
  z-index: 8;
  pointer-events: none;
  background-image: var(--grain-url);
  background-size: 180px 720px;
  mix-blend-mode: overlay;
  opacity: var(--grain-opacity);
  animation: grain 0.333s steps(4, end) infinite;
}
@keyframes grain { to { background-position-y: -720px; } }

/* Zellige */
.zellige {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22px, 1fr));
  gap: 1px;
  height: 26px;
  background: var(--gold);
  overflow: hidden;
}
.zellige i {
  background: var(--lapis-tile);
  clip-path: polygon(50% 0, 62% 18%, 82% 18%, 68% 38%, 100% 50%, 68% 62%, 82% 82%, 62% 82%, 50% 100%, 38% 82%, 18% 82%, 32% 62%, 0 50%, 32% 38%, 18% 18%, 38% 18%);
}
.zellige i:nth-child(4n+2) {
  background: var(--rug-ivory);
  clip-path: polygon(42% 0, 58% 0, 58% 42%, 100% 42%, 100% 58%, 58% 58%, 58% 100%, 42% 100%, 42% 58%, 0 58%, 0 42%, 42% 42%);
}
.zellige i:nth-child(4n+3) { background: var(--cobalt-tile); }
.zellige i:nth-child(4n+4) {
  background: var(--oasis-turquoise);
  clip-path: polygon(42% 0, 58% 0, 58% 42%, 100% 42%, 100% 58%, 58% 58%, 58% 100%, 42% 100%, 42% 58%, 0 58%, 0 42%, 42% 42%);
}

/* Rugs */
.rug {
  position: relative;
  color: var(--rug-ivory);
  background-color: var(--rug-crimson);
  background-image:
    var(--khatam),
    repeating-linear-gradient(28deg, transparent 0 15px, color-mix(in oklch, var(--gold) 18%, transparent) 15px 16px),
    repeating-linear-gradient(-32deg, transparent 0 15px, color-mix(in oklch, var(--gold) 12%, transparent) 15px 16px),
    repeating-linear-gradient(45deg, var(--rug-crimson) 0 2px, var(--rug-madder) 2px 4px),
    repeating-linear-gradient(-45deg, transparent 0 2px, color-mix(in oklch, var(--rug-rust) 45%, transparent) 2px 4px),
    repeating-linear-gradient(90deg, transparent 0 1px, color-mix(in oklch, var(--rug-ivory) 9%, transparent) 1px 2px);
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat;
  background-position: center, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-size: 34% 78%, auto, auto, auto, auto, auto;
  border: 8px solid var(--rug-navy);
  border-image: repeating-linear-gradient(90deg, var(--rug-navy) 0 4px, var(--rug-ivory) 4px 5px, var(--rug-navy) 5px 9px) 8;
  border-radius: 0;
  box-shadow:
    inset 0 0 0 1px var(--gold),
    0 0 0 1px var(--gold);
  font-family: "Reem Kufi", sans-serif;
  letter-spacing: 0.08em;
  text-shadow: 0 0.5px 0 var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.rug::before, .rug::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 12px;
  background: repeating-linear-gradient(90deg, transparent 0 1px, var(--rug-ivory) 1px 2px);
  pointer-events: none;
}
.rug::before {
  left: -13px;
  -webkit-mask-image: linear-gradient(to left, black 20%, transparent);
  mask-image: linear-gradient(to left, black 20%, transparent);
}
.rug::after {
  right: -13px;
  -webkit-mask-image: linear-gradient(to right, black 20%, transparent);
  mask-image: linear-gradient(to right, black 20%, transparent);
}
.rug:hover::before, .rug:hover::after { animation: fringe 1.5s var(--ease) infinite alternate; }
@keyframes fringe { to { transform: skewY(2.4deg); } }
.rug:hover {
  background-image:
    linear-gradient(115deg, transparent 28%, color-mix(in oklch, var(--gold-bright) 16%, transparent) 48%, transparent 68%),
    var(--khatam),
    repeating-linear-gradient(28deg, transparent 0 15px, color-mix(in oklch, var(--gold) 18%, transparent) 15px 16px),
    repeating-linear-gradient(45deg, var(--rug-crimson) 0 2px, var(--rug-madder) 2px 4px),
    repeating-linear-gradient(-45deg, transparent 0 2px, color-mix(in oklch, var(--rug-rust) 28%, transparent) 2px 4px),
    repeating-linear-gradient(90deg, transparent 0 1px, color-mix(in oklch, var(--rug-ivory) 7%, transparent) 1px 2px);
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat;
  background-size: 240% 100%, 34% 78%, auto, auto, auto, auto;
  background-position: 120% 0, center, 0 0, 0 0, 0 0, 0 0;
  animation: nap 0.9s var(--ease);
}
@keyframes nap { to { background-position: -20% 0, center, 0 0, 0 0, 0 0, 0 0; } }
.rug:active { filter: contrast(0.96) brightness(0.96); }

.nav-wrap { position: relative; z-index: 6; }
.nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.8rem 1.4rem 0;
  padding: 0.55rem 1.4rem;
  min-height: 58px;
  background-repeat: repeat-x, repeat, repeat, repeat, repeat, repeat;
  background-size: var(--rug-rhythm) 72%, auto, auto, auto, auto, auto;
  background-position: center, 0 0, 0 0, 0 0, 0 0, 0 0;
}
.nav a {
  font-family: "Reem Kufi", sans-serif;
  color: var(--rug-ivory);
  text-decoration: none;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.7rem;
  text-shadow: 0 0.5px 0 var(--ink);
}
.nav .x-tile {
  margin-left: auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  background-size: 78% 78%, auto, auto, auto, auto, auto;
}
.nav .x-tile:hover { background-size: 96% 96%, auto, auto, auto, auto, auto; }
.nav .x-tile::before, .nav .x-tile::after { width: 7px; top: 4px; bottom: 4px; }
.nav .x-tile::before { left: -8px; }
.nav .x-tile::after { right: -8px; }
.nav .x-tile i {
  position: relative;
  z-index: 1;
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  font-style: normal;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--rug-ivory);
}
.nav .x-tile i::before {
  display: block;
  transform: translateY(0.05em);
}

/* Foreground */
.hero {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100dvh - 6.2rem);
  padding: clamp(1.4rem, 6vh, 3.4rem) 1rem 1.2rem;
}
.panel {
  position: relative;
  width: min(640px, 100%);
  padding: 1.6rem 1.4rem 1.3rem;
  background: color-mix(in oklch, var(--ink-warm) 30%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--gold);
  box-shadow: 0 18px 50px color-mix(in oklch, var(--ink) 45%, transparent);
  text-align: center;
  --girih-opacity: 0.1;
}
.panel .girih {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
}
.corner { position: absolute; width: 72px; height: 48px; pointer-events: none; }
.corner-tl { top: 6px; left: 6px; }
.corner-tr { top: 6px; right: 6px; transform: scaleX(-1); }
.corner-bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.corner-br { bottom: 6px; right: 6px; transform: scale(-1); }
.lockup { display: flex; flex-direction: column; align-items: center; }
.ticker {
  position: relative;
  margin: 0;
  display: inline-block;
  font-family: "Reem Kufi", sans-serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 7vw, 5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  animation: lamp 2s var(--ease) 1 both;
}
.ticker span {
  background: linear-gradient(to bottom in oklch, var(--gold-bright), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px var(--brass-shadow);
  filter: drop-shadow(0 8px 16px color-mix(in oklch, var(--brass-shadow) 50%, transparent));
}
.tittle {
  position: absolute;
  left: 0.42em;
  top: -0.18em;
  width: 0.28em;
  height: 0.28em;
  pointer-events: none;
}
.token-name {
  margin: 0.35rem 0 0;
  font-family: Amiri, serif;
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--text-primary);
}
@keyframes lamp {
  0% { opacity: 0.15; filter: brightness(0.4); }
  18% { opacity: 1; }
  26% { opacity: 0.35; }
  40% { opacity: 1; }
  52% { opacity: 0.55; }
  100% { opacity: 1; filter: none; }
}
.tagline {
  margin: 0.8rem 0 0;
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.06em;
  color: var(--text-primary);
  text-wrap: balance;
}
.ca-pill.rug {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1rem auto 0;
  width: min(460px, 100%);
  padding: 0.45rem 0.7rem;
  background-size: 64px 64px, auto, auto, auto, auto, auto;
}
.ca-end { width: 22px; height: 22px; flex: none; }
.ca-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--rug-ivory);
}
.ca-copy {
  flex: none;
  width: 36px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: color-mix(in oklch, var(--rug-navy) 65%, transparent);
  color: var(--rug-ivory);
  cursor: pointer;
}
.ca-copy .copied-mark { display: none; width: 16px; height: 16px; }
.ca-pill.is-copied .ca-copy i { display: none; }
.ca-pill.is-copied .copied-mark { display: block; }
.ca-pill:not(.has-address) .ca-copy { cursor: default; opacity: 0.6; }

.socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.95rem;
}
.social {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--text-primary);
  text-decoration: none;
  border: 1px solid var(--gold);
  background-color: color-mix(in oklch, var(--ink) 35%, transparent);
  background-image:
    repeating-linear-gradient(45deg, transparent 0 3px, color-mix(in oklch, var(--rug-crimson) 35%, transparent) 3px 4px);
  box-shadow: inset 0 0 0 3px var(--rug-navy), 0 0 10px color-mix(in oklch, var(--gold) 35%, transparent);
}
.social svg, .social img { width: 1.15rem; height: 1.15rem; display: block; object-fit: contain; position: relative; z-index: 1; }
.social i {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--text-primary);
}
.social i::before { display: block; line-height: 1; }
.social .fa-x-twitter::before { transform: translateY(0.05em); }
.social .fa-telegram::before { transform: translate(-0.04em, 0.06em); }
.social img { width: 100%; height: 100%; object-fit: cover; }
#ray-link img { width: 78%; height: 78%; object-fit: contain; }
.social:hover {
  color: var(--gold-bright);
  background-image: var(--khatam);
  background-size: 86% 86%;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset 0 0 0 3px var(--rug-navy), 0 0 16px var(--gold);
}

.divider { position: relative; z-index: 5; display: grid; place-items: center; margin: 0.4rem 0 0.2rem; }
.divider svg { width: 36px; height: 36px; }

.gallery {
  position: relative;
  z-index: 5;
  padding: 1rem 1rem 0;
}
.gallery h2 {
  margin: 0 0 0.8rem;
  text-align: center;
  font-family: "Reem Kufi", sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-bright);
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem;
  max-width: 1100px;
  margin: 0 auto;
}
.tile {
  border: 1px solid var(--gold);
  background: var(--ink-warm);
  box-shadow: inset 0 0 0 6px var(--rug-navy), inset 0 0 0 7px var(--gold);
}
.tile img, .tile video { display: block; width: 100%; height: 220px; object-fit: cover; }

.footer-wrap { position: relative; z-index: 5; margin-top: 1.2rem; }
.colophon {
  margin: 0;
  padding: 0.45rem 1rem 0.7rem;
  text-align: center;
  font-family: "Reem Kufi", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

@media (max-width: 520px) {
  .nav { margin-inline: 1rem; padding-inline: 0.7rem; gap: 0.1rem; }
  .nav a { padding-inline: 0.35rem; }
  .ticker { font-size: clamp(1.55rem, 8.4vw, 2.3rem); }
  .social { width: 38px; height: 38px; }
  .caravan { display: none; }
  .palm-6, .palm-7, .palm-8 { display: none; }
  .hero { min-height: calc(100dvh - 5.4rem); }
}
@media (max-height: 700px) {
  .hero { padding-top: 0.6rem; }
  .gallery { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .win.lit { opacity: 0.85 !important; }
  .lantern .leak { opacity: 0.6; }
}