/* The charter (terms, privacy) and "lost in the dunes" (404). Loaded after pages.css and overrides it there.
   pages_src/terms.html, privacy.html, 404.html */

/* ================= the charter: a framed, readable document with a sticky contents list ================= */
.charter-head { text-align: center; }
.charter-head .page-mark { opacity: .035; }
.charter-head .page-lead { margin-inline: auto; }
.charter-head .page-title::after { display: none; } /* the charter has its own centred rule below the title */
.charter-seal { display: inline-grid; place-items: center; width: 92px; height: 92px; margin-bottom: var(--sp-4); border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 198, 92, .16), rgba(8, 12, 26, .9) 62%);
  box-shadow: 0 0 0 1px rgba(226, 169, 59, .55), 0 0 0 6px rgba(8, 12, 26, .85), 0 0 0 7px rgba(226, 169, 59, .22), 0 18px 40px -12px rgba(0, 0, 0, .8); }
.charter-seal img { width: 72px; height: 72px; filter: drop-shadow(0 6px 14px rgba(4, 7, 16, .8)); }
.charter-rule { display: block; position: relative; width: min(320px, 70%); height: 1px; margin: var(--sp-4) auto 0;
  background: linear-gradient(90deg, transparent, var(--copper-500) 30%, var(--copper-300) 50%, var(--copper-500) 70%, transparent); }
.charter-rule::after { content: ""; position: absolute; inset-inline-start: 50%; top: -4px; width: 9px; height: 9px; translate: -50% 0; rotate: 45deg;
  background: var(--copper-500); box-shadow: 0 0 0 3px var(--night-900), 0 0 14px rgba(244, 198, 92, .6); }
[dir="rtl"] .charter-rule::after { translate: 50% 0; }

.charter { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 1024px) {
  .charter { grid-template-columns: 250px minmax(0, 1fr); gap: var(--sp-8); max-width: 1080px; }
  .charter-toc { position: sticky; inset-block-start: 112px; }
}

/* contents: a narrow gold-ruled list; the link of the section you jumped to stays lit (the :has(:target) rule in fix1) */
.charter-toc { padding: var(--sp-5); background: linear-gradient(180deg, rgba(22, 34, 70, .7), rgba(10, 16, 36, .75));
  box-shadow: inset 0 0 0 1px rgba(226, 169, 59, .28); border-radius: 2px; }
.charter-toc-title { padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); color: var(--copper-300); font-family: var(--font-head-en); font-size: 1.125rem;
  border-bottom: 1px solid rgba(226, 169, 59, .3); }
:lang(ar) .charter-toc-title { font-family: var(--font-head-ar); letter-spacing: 0; }
.charter-toc ul { display: grid; gap: 2px; list-style: none; padding: 0; margin: 0; }
.charter-toc a { position: relative; display: block; padding: 8px 12px; padding-inline-start: 22px; color: var(--text-2); font-size: .9375rem; line-height: 1.35;
  text-decoration: none; border-radius: 2px; transition: color var(--t-base), background var(--t-base); }
.charter-toc a::before { content: ""; position: absolute; inset-inline-start: 6px; top: calc(8px + .675em - 3px); width: 6px; height: 6px; rotate: 45deg;
  background: rgba(226, 169, 59, .45); transition: background var(--t-base), box-shadow var(--t-base); }
.charter-toc a:hover { color: var(--sand-50); background: rgba(226, 169, 59, .08); }
.charter-toc a:hover::before { background: var(--copper-300); box-shadow: 0 0 10px rgba(244, 198, 92, .7); }
.charter-toc a:focus-visible { outline: 2px solid var(--copper-300); outline-offset: 2px; }
@media (max-width: 1023px) {
  .charter-toc ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
}

/* the document: a night panel inside a gold double frame with studs on its corners */
.charter-doc { position: relative; padding: var(--sp-7) clamp(20px, 5vw, 64px) var(--sp-8);
  background: radial-gradient(90% 40% at 50% 0%, rgba(244, 198, 92, .07), transparent 70%), linear-gradient(180deg, rgba(18, 27, 54, .92), rgba(9, 14, 30, .95));
  border: 1px solid rgba(226, 169, 59, .55); border-radius: 2px;
  box-shadow: 0 0 0 4px rgba(8, 12, 26, .9), 0 0 0 5px rgba(226, 169, 59, .22), 0 40px 90px -30px rgba(0, 0, 0, .85); }
.charter-doc::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(226, 169, 59, .14); pointer-events: none; }
.charter-doc::after { content: ""; position: absolute; inset: -5px; pointer-events: none;
  background: radial-gradient(circle, #E2A93B 2.5px, transparent 3px) 0 0 / 10px 10px no-repeat,
              radial-gradient(circle, #E2A93B 2.5px, transparent 3px) 100% 0 / 10px 10px no-repeat,
              radial-gradient(circle, #E2A93B 2.5px, transparent 3px) 0 100% / 10px 10px no-repeat,
              radial-gradient(circle, #E2A93B 2.5px, transparent 3px) 100% 100% / 10px 10px no-repeat; }
.charter-doc > * { max-width: 70ch; margin-inline: auto; }
.charter-doc .legal-note { display: table; margin-inline: auto; margin-bottom: var(--sp-7); }
.charter-doc h2 { position: relative; scroll-margin-top: 120px; margin: var(--sp-8) auto var(--sp-4); padding-bottom: var(--sp-3);
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); color: var(--sand-50); }
.charter-doc h2:first-of-type { margin-top: 0; }
/* a gold rule under each heading, brightest at its start */
.charter-doc h2::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--copper-500), rgba(226, 169, 59, .25) 40%, transparent); }
[dir="rtl"] .charter-doc h2::after { background: linear-gradient(270deg, var(--copper-500), rgba(226, 169, 59, .25) 40%, transparent); }
.charter-doc h2::before { content: ""; position: absolute; inset-inline-start: 0; bottom: -3px; width: 7px; height: 7px; rotate: 45deg; background: var(--copper-300); }
.charter-doc h2:target { color: var(--copper-300); }
.charter-doc ul { gap: var(--sp-3); padding-inline-start: 0; list-style: none; }
.charter-doc li { position: relative; padding-inline-start: 26px; color: var(--text-2); font-size: 1.0625rem; line-height: 1.75; }
.charter-doc li::before { content: ""; position: absolute; inset-inline-start: 4px; top: .78em; width: 7px; height: 7px; rotate: 45deg;
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--copper-500); }
.charter-doc p { font-size: 1.0625rem; line-height: 1.75; }
:lang(ar) .charter-doc li, :lang(ar) .charter-doc p { line-height: 1.95; }
:lang(ar) .charter-doc h2, :lang(ar) .charter-toc a { letter-spacing: 0; }
@media (max-width: 599px) {
  .charter-doc { padding: var(--sp-6) var(--sp-4) var(--sp-7); }
  .charter-doc li, .charter-doc p { font-size: 1rem; }
  .charter-seal { width: 76px; height: 76px; } .charter-seal img { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: no-preference) {
  .charter-seal { animation: charter-seal-in 1s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes charter-seal-in { from { opacity: 0; scale: .6; rotate: -20deg; } }
  .charter-rule { animation: charter-rule-in 1.1s .2s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes charter-rule-in { from { opacity: 0; scale: .2 1; } }
  .charter-toc, .charter-doc { animation: charter-up .9s .15s cubic-bezier(.16, 1, .3, 1) both; }
  .charter-doc { animation-delay: .3s; }
  @keyframes charter-up { from { opacity: 0; translate: 0 26px; } }
  .charter-toc a::before { transition: background var(--t-base), box-shadow var(--t-base), scale var(--t-base); }
  .charter-toc a:hover::before { scale: 1.35; }
}

/* ================= 404: lost in the dunes ================= */
.lost-inner { position: relative; padding-block: 128px 88px; }
.lost-dunes { position: absolute; inset: auto 0 6%; z-index: -1; height: 46%; pointer-events: none; }
.lost-route { width: 100%; height: 100%; overflow: visible; }
.lost-route path { fill: none; stroke: rgba(244, 198, 92, .55); stroke-width: 2.5; stroke-dasharray: 2 14; stroke-linecap: round; vector-effect: non-scaling-stroke; }
[dir="rtl"] .lost-route { scale: -1 1; }

.lost-compass { position: relative; display: grid; place-items: center; width: clamp(240px, 22vw + 140px, 380px); aspect-ratio: 1; margin: 0 auto var(--sp-5); }
.lost-compass > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.compass-ring { fill: none; stroke: rgba(226, 169, 59, .5); stroke-width: 1.2; filter: drop-shadow(0 0 10px rgba(244, 198, 92, .25)); }
.compass-ring circle:first-child { stroke: rgba(226, 169, 59, .75); stroke-width: 1.6; }
.compass-ring path { stroke: var(--copper-300); stroke-width: 2; stroke-linecap: round; }
.compass-rose path { fill: rgba(226, 169, 59, .16); stroke: rgba(244, 198, 92, .55); stroke-width: 1; stroke-linejoin: round; }
.compass-rose .rose-dim { fill: rgba(226, 169, 59, .08); stroke: rgba(244, 198, 92, .3); rotate: 45deg; transform-origin: 100px 100px; }
.compass-needle { z-index: 1; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .7)); }
.compass-needle .needle-n { fill: var(--copper-300); }
.compass-needle .needle-s { fill: rgba(246, 238, 223, .35); }
.compass-needle circle { fill: var(--night-950); stroke: var(--copper-300); stroke-width: 2.5; }
.lost .lost-code { position: relative; z-index: 2; margin: 0; font: clamp(4.5rem, 3rem + 6vw, 8rem)/.9 var(--font-head-en); color: var(--sand-50); -webkit-text-stroke: 0;
  opacity: 1; text-shadow: 0 0 0 transparent, 0 4px 0 rgba(58, 36, 8, .9), 0 0 40px rgba(244, 198, 92, .45); letter-spacing: .04em; }
.lost .page-title { text-wrap: balance; margin-top: var(--sp-4); line-height: 1.3; }
:lang(ar) .lost .page-title { line-height: 1.5; }   /* owner review 2026-10-16: the two Arabic lines touched */
.lost .page-lead { margin-top: var(--sp-5); line-height: 1.8; }
.lost .lost-cta .btn .icon { width: 22px; height: 22px; }
@media (max-width: 599px) {
  .lost-inner { padding-block: 104px 64px; }
  .lost-dunes { height: 30%; inset-block-end: 4%; }
}
@media (prefers-reduced-motion: no-preference) {
  /* the needle searches for north and never settles: the visitor is lost */
  .compass-needle { animation: legal-needle-search 7s cubic-bezier(.45, 0, .2, 1) infinite; transform-origin: 50% 50%; }
  @keyframes legal-needle-search { 0% { rotate: -38deg; } 22% { rotate: 64deg; } 40% { rotate: 18deg; } 62% { rotate: 140deg; } 80% { rotate: -12deg; } 100% { rotate: -38deg; } }
  .compass-ring { animation: legal-ring-turn 90s linear infinite; transform-origin: 50% 50%; }
  @keyframes legal-ring-turn { to { rotate: 360deg; } }
  .compass-rose { animation: legal-rose-in 1.4s cubic-bezier(.16, 1, .3, 1) both; transform-origin: 50% 50%; }
  @keyframes legal-rose-in { from { opacity: 0; scale: .4; rotate: -90deg; } }
  .lost .lost-code { animation: legal-code-in 1s .3s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes legal-code-in { from { opacity: 0; scale: 1.25; } }
  .lost-route { animation: legal-route-drift 14s ease-in-out infinite alternate; }
  @keyframes legal-route-drift { from { translate: -1.5% 0; opacity: .7; } to { translate: 1.5% -2%; opacity: 1; } }
  .lost-bg { animation: legal-bg-drift 30s ease-in-out infinite alternate; }
  @keyframes legal-bg-drift { from { scale: 1.02; } to { scale: 1.1; translate: -1.5% 1%; } }
}

/* ================= fix1 (review round 2) ================= */
/* the contents link of the section you jumped to stays lit (pure CSS: the article holds the :target) */
.charter-toc a { padding-block: 12px; }
.charter-toc a::before { top: calc(12px + .675em - 3px); }
.charter:has(#your-account:target) a[href="#your-account"], .charter:has(#playing-fair:target) a[href="#playing-fair"],
.charter:has(#items-and-gold:target) a[href="#items-and-gold"], .charter:has(#the-service:target) a[href="#the-service"],
.charter:has(#rules-broken:target) a[href="#rules-broken"], .charter:has(#contact:target) a[href="#contact"],
.charter:has(#what-we-keep:target) a[href="#what-we-keep"], .charter:has(#why-we-keep-it:target) a[href="#why-we-keep-it"],
.charter:has(#what-we-do-not-do:target) a[href="#what-we-do-not-do"], .charter:has(#in-your-browser:target) a[href="#in-your-browser"],
.charter:has(#what-you-can-ask:target) a[href="#what-you-can-ask"], .charter:has(#changes:target) a[href="#changes"] {
  color: var(--copper-300); background: rgba(226, 169, 59, .1); box-shadow: inset 2px 0 0 var(--copper-500); }
[dir="rtl"] .charter:has(#your-account:target) a[href="#your-account"], [dir="rtl"] .charter:has(#playing-fair:target) a[href="#playing-fair"],
[dir="rtl"] .charter:has(#items-and-gold:target) a[href="#items-and-gold"], [dir="rtl"] .charter:has(#the-service:target) a[href="#the-service"],
[dir="rtl"] .charter:has(#rules-broken:target) a[href="#rules-broken"], [dir="rtl"] .charter:has(#contact:target) a[href="#contact"],
[dir="rtl"] .charter:has(#what-we-keep:target) a[href="#what-we-keep"], [dir="rtl"] .charter:has(#why-we-keep-it:target) a[href="#why-we-keep-it"],
[dir="rtl"] .charter:has(#what-we-do-not-do:target) a[href="#what-we-do-not-do"], [dir="rtl"] .charter:has(#in-your-browser:target) a[href="#in-your-browser"],
[dir="rtl"] .charter:has(#what-you-can-ask:target) a[href="#what-you-can-ask"], [dir="rtl"] .charter:has(#changes:target) a[href="#changes"] { box-shadow: inset -2px 0 0 var(--copper-500); }
.charter-top { display: flex; align-items: center; min-height: 44px; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid rgba(226, 169, 59, .2);
  color: var(--text-2); font-size: .9375rem; text-decoration: none; }
.charter-top:hover { color: var(--copper-300); }
.charter-top:focus-visible { outline: 2px solid var(--copper-300); outline-offset: 2px; }

/* the draft note: a thin gold ribbon instead of a grey box */
.charter-doc .legal-note { padding: 7px 32px; border: 0; border-radius: 0; color: var(--sand-300); font-size: .875rem;
  background: linear-gradient(90deg, transparent, rgba(226, 169, 59, .14) 18% 82%, transparent);
  box-shadow: inset 0 1px 0 rgba(226, 169, 59, .35), inset 0 -1px 0 rgba(226, 169, 59, .35); }

/* the opening medal (terms: a sword, privacy: a lock) sits in the seal ring */
.charter-seal { position: relative; }
.charter-seal .medal { --m: 68px; }
@media (max-width: 599px) { .charter-seal .medal { --m: 56px; } }

/* privacy: the vault door, twelve gold bolts around the lock */
.charter-vault .charter-seal { width: 120px; height: 120px; }
.charter-bolts { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(244, 198, 92, .85) 0deg 4deg, transparent 4deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 74%, transparent 75%); mask: radial-gradient(circle, transparent 66%, #000 67%, #000 74%, transparent 75%); }
@media (max-width: 599px) { .charter-vault .charter-seal { width: 100px; height: 100px; } }

/* the closing seal: wax with two ribbon tails */
.charter-doc > .charter-close { display: grid; place-items: center; margin-top: var(--sp-8); padding-top: var(--sp-6); position: relative; isolation: isolate; }
.charter-close::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 20%; height: 1px; background: linear-gradient(90deg, transparent, rgba(226, 169, 59, .5), transparent); }
.charter-wax { position: relative; display: grid; place-items: center; width: 96px; aspect-ratio: 1; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 40% 35%, var(--copper-300), var(--copper-500) 50%, #7A5414);
  box-shadow: 0 0 0 3px #3A2408, 0 0 0 5px rgba(226, 169, 59, .3), 0 12px 26px rgba(0, 0, 0, .6), inset 0 2px 4px rgba(255, 243, 204, .45), inset 0 -4px 8px rgba(58, 36, 8, .55); }
.charter-wax::before, .charter-wax::after { content: ""; position: absolute; z-index: -1; top: 62%; width: 18px; height: 56px; background: var(--night-700);
  box-shadow: inset 0 0 0 1px rgba(226, 169, 59, .55); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.charter-wax::before { left: 22px; rotate: 18deg; }
.charter-wax::after { right: 22px; rotate: -18deg; }
.charter-wax img { width: 60px; height: 60px; filter: drop-shadow(0 2px 0 rgba(58, 36, 8, .8)); }
.charter-wax .medal { --m: 60px; }

/* ================= 404: real dunes, a wandering caravan, and the compass alone at the centre ================= */
.lost { grid-template-columns: minmax(0, 1fr); }
.lost-inner { min-width: 0; }
.lost::after { background: radial-gradient(60% 60% at 50% 42%, transparent, rgba(5, 7, 15, .55)); }
.lost-bg { filter: none; background:
  radial-gradient(1px 1px at 20% 30%, rgba(246, 238, 223, .7), transparent 60%) 0 0 / 180px 180px,
  radial-gradient(1px 1px at 70% 60%, rgba(246, 238, 223, .5), transparent 60%) 0 0 / 260px 260px,
  radial-gradient(1.5px 1.5px at 40% 80%, rgba(255, 231, 163, .55), transparent 60%) 0 0 / 340px 340px,
  radial-gradient(120% 70% at 50% 100%, var(--night-800), var(--night-950) 70%); }
.lost-dunes { inset: auto 0 0; height: 52%; }
.lost-dunes .dune { position: absolute; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.dune-back { inset-inline: -10% 20%; bottom: 0; height: 64%; background: linear-gradient(180deg, #1E2C5C, var(--night-900) 70%);
  box-shadow: inset 0 1px 0 rgba(226, 169, 59, .3), 0 -30px 80px -40px rgba(244, 198, 92, .25); }
.dune-front { inset-inline: 30% -20%; bottom: -18%; height: 66%; background: linear-gradient(180deg, #0F1834, var(--night-950) 60%);
  box-shadow: inset 0 1px 0 rgba(226, 169, 59, .22); overflow: hidden; }
.lost-caravan { position: absolute; bottom: 44%; inset-inline-end: 5%; width: clamp(80px, 8vw, 130px); height: auto; opacity: .75;
  filter: brightness(.55) saturate(.7) drop-shadow(0 6px 10px #000); }
[dir="rtl"] .lost-caravan { transform: scaleX(-1); }
.lost-route { position: absolute; inset: 0; }
.lost-compass { width: clamp(200px, 14vw + 120px, 300px); margin-bottom: var(--sp-4); }
.compass-needle circle { fill: var(--copper-500); stroke: var(--night-950); stroke-width: 2.5; }
.lost .lost-code { margin: 0 0 var(--sp-3); font: 600 clamp(1rem, .8rem + .6vw, 1.25rem)/1 var(--font-head-en); letter-spacing: .3em; color: var(--copper-300);
  text-shadow: 0 2px 0 rgba(58, 36, 8, .8); -webkit-text-stroke: 0; opacity: 1; }
:lang(ar) .lost .lost-code { letter-spacing: 0; }
.lost-cta .link { min-height: 44px; }
@media (max-width: 599px) { .lost-inner { padding-block: 96px 56px; } .lost-dunes { height: 34%; } .lost-caravan { bottom: 50%; inset-inline-end: 3%; } }
@media (max-width: 399px) { .lost .lost-cta .btn { padding-inline: var(--sp-4); font-size: 1rem; } }

@media (prefers-reduced-motion: no-preference) {
  .charter-bolts { animation: legal-vault-turn 1.6s .3s cubic-bezier(.7, 0, .2, 1) both; }
  @keyframes legal-vault-turn { from { rotate: -90deg; opacity: .3; } }
  .charter-code .charter-wax { animation: legal-wax-stamp .8s cubic-bezier(.2, 1, .3, 1) both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  @keyframes legal-wax-stamp { 0% { opacity: 0; scale: 1.8; rotate: -20deg; } 70% { scale: .94; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
  .charter-vault .charter-close { animation: legal-close-in .8s cubic-bezier(.16, 1, .3, 1) both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  @keyframes legal-close-in { from { opacity: 0; translate: 0 20px; } }
  .lost-caravan { animation: legal-caravan-walk 70s linear infinite alternate; }
  @keyframes legal-caravan-walk { from { translate: 0 0; } to { translate: -28vw 1vh; } }
  [dir="rtl"] .lost-caravan { animation-name: legal-caravan-walk-rtl; }
  @keyframes legal-caravan-walk-rtl { from { translate: 0 0; } to { translate: 28vw 1vh; } }
  .dune-front::after { content: ""; position: absolute; inset: 0 -200px 0 0;
    background: repeating-linear-gradient(170deg, transparent 0 22px, rgba(246, 238, 223, .035) 22px 23px);
    animation: legal-sand-blow 6s linear infinite; }
  @keyframes legal-sand-blow { to { translate: -200px 0; } }
  .dune-back { animation: legal-dune-drift 40s ease-in-out infinite alternate; }
  @keyframes legal-dune-drift { to { translate: 2% 0; } }
}