/* ==========================================================================
   NIDDAK - public site
   Extends the game's design system rather than inventing a second one:
   night-indigo grounds, brass ornament, Cairo carrying both languages, and
   logical properties everywhere so [dir="rtl"] mirrors without a second sheet.
   ========================================================================== */

:root{
  color-scheme: dark;

  --void:        #07080f;
  --bg-0:        #0b0d17;
  --bg-1:        #12162a;
  --bg-2:        #1a2038;
  --panel:       #1b2138;
  --panel-hi:    #232b47;
  --hairline:    #ffffff14;
  --hairline-hi: #ffffff26;

  --ink:       #f4efe6;
  --ink-dim:   #c7c2d6;
  --ink-faint: #8e93b0;

  --gold:        #d4a24e;
  --gold-bright: #f2c572;
  --gold-dim:    #8a6b34;
  --gold-ink:    #241a06;

  --ember: #e4572e;
  --tide:  #2fb6a5;
  --gale:  #8fa6d6;
  --stone: #93a066;

  --font: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  clamp(1.75rem, 2.4vw + 1rem, 2.6rem);
  --fs-hero: clamp(2.5rem, 7.2vw + .5rem, 5.4rem);

  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem; --sp-12: 3rem;
  --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  --radius: 14px;
  --radius-lg: 22px;
  --wrap: 1140px;

  --shadow-lg: 0 24px 60px -16px #000c, 0 4px 16px #0009;
  --ease: cubic-bezier(.16,.84,.44,1);

  /* An eight-point star, the recurring motif in the card art borders. Used at
     low opacity as a ground texture rather than as decoration in its own right. */
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23d4a24e' stroke-width='1' opacity='.5'%3E%3Cpath d='M30 6 36 18 48 12 42 24 54 30 42 36 48 48 36 42 30 54 24 42 12 48 18 36 6 30 18 24 12 12 24 18Z'/%3E%3C/g%3E%3C/svg%3E");
}

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

html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body{
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.62;
  color: var(--ink);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; height: auto; display: block; }
h1, h2, h3{ line-height: 1.12; margin: 0; text-wrap: balance; }
p{ margin: 0; text-wrap: pretty; }
ul{ margin: 0; padding: 0; list-style: none; }

a{ color: var(--gold-bright); text-decoration: none; }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px;
}

.wrap{ width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.narrow{ max-width: 68ch; }
.center{ text-align: center; margin-inline: auto; }

.skip{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  background: var(--gold); color: var(--gold-ink);
  font-weight: 700; z-index: 100;
}
.skip:focus{
  width: auto; height: auto; overflow: visible; clip-path: none;
  inset-inline-start: var(--sp-4); top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
}

/* ---- buttons ------------------------------------------------------------ */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  /* A <button> does not inherit font-family, and every other control on this
     site is an <a class="btn"> which does. The storage notice added the first
     real <button>, and it rendered in Arial while the rest of the page was
     Cairo. One element out of the whole site, which is exactly the kind of
     thing nobody sees until it is pointed at. */
  font-family: inherit;
  padding: .7rem 1.35rem;
  border-radius: 999px;
  font-weight: 700; font-size: var(--fs-sm);
  border: 1px solid transparent;
  transition: transform var(--ease) .18s, box-shadow var(--ease) .18s, background .18s;
  white-space: nowrap;
}
.btn-lg{ padding: .95rem 2rem; font-size: var(--fs-md); }
.btn-gold{
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--gold-ink);
  box-shadow: 0 6px 22px -8px #d4a24ecc;
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px -8px #d4a24ecc; }
.btn-ghost{ border-color: var(--hairline-hi); color: var(--ink); background: #ffffff0a; }
.btn-ghost:hover{ background: #ffffff14; transform: translateY(-2px); }

/* ---- header ------------------------------------------------------------- */
.site-head{
  position: sticky; top: 0; z-index: 50;
  background: #0b0d17e6;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.head-inner{
  display: flex; align-items: center; gap: var(--sp-6);
  min-height: 66px;
}
.brand{ display: flex; align-items: center; gap: var(--sp-3); color: var(--ink); }
.brand-mark{
  width: 26px; height: 26px; flex: none;
  /* The real mark, so the header, the tab icon and the home-screen icon are
     one file and cannot drift apart. Relative so it resolves wherever the
     site is mounted. */
  background: url("./favicon.svg") center / contain no-repeat;
}
.brand-text{ display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong{ font-size: var(--fs-md); font-weight: 900; letter-spacing: .12em; }
.brand-sub{ font-size: .6875rem; color: var(--ink-faint); letter-spacing: .04em; }

.nav{ display: flex; gap: var(--sp-6); margin-inline-start: auto; }
.nav a{ color: var(--ink-dim); font-size: var(--fs-sm); font-weight: 600; }
.nav a:hover{ color: var(--gold-bright); }

.head-actions{ display: flex; align-items: center; gap: var(--sp-3); }
.lang{
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-dim);
  padding: .4rem .7rem; border: 1px solid var(--hairline-hi); border-radius: 999px;
}
.lang:hover{ color: var(--gold-bright); border-color: var(--gold-dim); }

@media (max-width: 900px){
  .nav{ display: none; }
  .head-actions{ margin-inline-start: auto; }
}

/* ---- hero: the duel screen ------------------------------------------------
   A duel in progress, not a picture of one. The painting is split down the
   middle so the two champions face each other across a short brass sightline,
   behind a pierced screen that is dense at the edges and opens in the centre.

   The art is never mirrored: Kessa is painted on the left and stays there in
   both languages. So the two cartouches are anchored with PHYSICAL left/right
   while the rest of the page uses logical properties and mirrors normally.
   --------------------------------------------------------------------------*/
.hero{ position: relative; }
.duel{
  position: relative; isolation: isolate; overflow: hidden;
  height: min(84svh, 660px); min-height: 520px;
  background: var(--void);
  display: grid; place-items: center;
  /* Reserve the strip. place-items centres the core in the whole box, so once
     the strip became a real share of the hero the marks row ended up about
     twenty pixels off it. The core should be centred in the space ABOVE the
     ground, which is what a reader perceives as the middle of the picture. */
  padding-bottom: clamp(50px, 10%, 78px);
  box-sizing: border-box;
}
.duel-half{ position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.duel-l{ left: 0; }
.duel-r{ right: 0; }
.duel-half img{
  position: absolute; top: 0; height: 100%; width: 200%; max-width: none;
  object-fit: cover;
  /* Kessa is dark-armoured against her own flame and reads as a silhouette at
     the veil natural strength; this lift is legibility, not styling. */
  filter: brightness(1.14) saturate(1.05);
}
.duel-l img{ left: 0;  transform: scale(1.14) translateX(-4%); transform-origin: 30% 45%; }
.duel-r img{ right: 0; transform: scale(1.14) translateX(4%);  transform-origin: 70% 45%; }

.duel-screen{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--lattice); background-size: 26px 26px; opacity: .34;
  -webkit-mask-image: radial-gradient(56% 76% at 50% 50%, transparent 6%, #000 70%);
          mask-image: radial-gradient(56% 76% at 50% 50%, transparent 6%, #000 70%);
}
.duel-veil{
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(46% 60% at 50% 50%, rgba(7,8,15,.9), rgba(7,8,15,.5) 58%, transparent 80%),
    linear-gradient(180deg, rgba(11,13,23,.34), transparent 24%, rgba(11,13,23,.3) 68%, var(--bg-0));
}
/* Keep the old hook inert for the production smoke test. The visible vertical
   stroke belongs to .orn below, where it can stay centred on the star instead
   of cutting through the headline, copy, buttons and Marks track. */
.duel-seam{ display: none; }
/* ---- champion cartouches ---- */
.champ{
  position: absolute; top: var(--sp-6); z-index: 4;
  display: flex; flex-direction: column; gap: 6px; width: 220px;
}
.champ-l{ left: var(--sp-6); }
.champ-r{ right: var(--sp-6); text-align: right; align-items: flex-end; }
.champ-fac{
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold-bright); text-shadow: 0 1px 5px #000;
}
.champ-r .champ-fac{ letter-spacing: 0; text-transform: none; }
.champ-name{ font-size: 1.45rem; font-weight: 900; letter-spacing: -.01em; text-shadow: 0 2px 9px #000; }
.hp{ display: flex; gap: 3px; width: 100%; }
.hp b{ height: 5px; flex: 1; border-radius: 2px; background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.hp b.on{ background: var(--ember); box-shadow: none; }
.champ-r .hp b.on{ background: var(--tide); }
.hp-n{ font-size: var(--fs-xs); font-weight: 700; color: var(--ink-dim); text-shadow: 0 1px 5px #000; }

/* ---- centre column ---- */
.duel-core{ position: relative; z-index: 4; text-align: center; padding-block: var(--sp-8); }
.orn{
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: clamp(58px, 7vw, 112px) auto clamp(58px, 7vw, 112px);
  align-items: center; justify-content: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.orn::before{
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 1px; height: 40px; transform: translate(-50%, -50%); pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--gold-bright) 28%, #fff2d4 50%, var(--gold-bright) 72%, transparent);
  box-shadow: 0 0 10px rgba(242,197,114,.34);
}
.orn s{ position: relative; z-index: 1; display: block; width: clamp(58px, 7vw, 112px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.orn s + s{ background: linear-gradient(90deg, var(--gold), transparent); }
.orn b{
  position: relative; z-index: 1; width: 14px; height: 14px; background: var(--gold-bright); display: block;
  /* Eight points, not five. Commit 0e5cdb2 put the mark, the lattice and the
     board star on one khatim geometry and missed this one, which sits at the
     exact centre of the hero and is the most looked-at instance of the shape
     on the site. Same sixteen vertices as .star below. */
  clip-path: polygon(
    50% 0%, 61.7% 26.5%, 85.4% 14.6%, 73.5% 38.3%, 100% 50%, 73.5% 61.7%,
    85.4% 85.4%, 61.7% 73.5%, 50% 100%, 38.3% 73.5%, 14.6% 85.4%, 26.5% 61.7%,
    0% 50%, 26.5% 38.3%, 14.6% 14.6%, 38.3% 26.5%);
}
.hero-title{
  font-size: var(--fs-hero); font-weight: 900; letter-spacing: -.025em;
  display: grid; gap: .04em;
  text-shadow: 0 2px 10px #000, 0 0 52px rgba(0,0,0,.95);
}
.hero-title span:last-child{ color: var(--gold-bright); }
.hero-sub{
  margin: var(--sp-4) auto 0; max-width: 46ch;
  font-size: var(--fs-lg); color: var(--ink);
  text-shadow: 0 2px 8px #000, 0 0 30px rgba(0,0,0,.9);
}
.cta-row{ display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); }

/* The seam falls between the two champions, and it should keep falling
   between the two buttons. It did not. justify-content centres the PAIR, and
   because the primary label is the longer of the two, the gap between them sat
   about half that difference to the right of the axis, which dropped the beam
   onto the gold button instead of passing between them.

   Equal columns make the pair symmetric, so centring the pair and centring the
   gap become the same thing. No breakpoint arithmetic, no per-language width,
   and it holds when the labels are translated. Below 640px the buttons stack
   and there is no gap to align, so the flex rule further down still owns it. */
@media (min-width: 641px){
  .duel-core .cta-row{
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    width: fit-content; margin-inline: auto;
  }
}

.marks{ display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-6); }
.marks i{ width: 13px; height: 13px; display: block; transform: rotate(45deg); border: 1.5px solid var(--gold); border-radius: 2px; }
.marks i.won{ background: var(--gold-bright); box-shadow: 0 0 14px rgba(242,197,114,.85); }
.marks u{
  text-decoration: none; font-size: var(--fs-xs); font-weight: 700; color: var(--gold-bright);
  letter-spacing: .1em; text-transform: uppercase; margin-inline-start: var(--sp-2);
  text-shadow: 0 1px 6px #000;
}
/* Latin tracking on Arabic loosens a joined script. .kicker below learned this
   already; .marks u and .terr-n did not, so the Arabic page shipped with .1em
   and .13em on both. The .par[dir="ltr"] restore is for the parity demo, which
   nests an English fragment inside the rtl page: it wins on specificity rather
   than on source order, so it holds whichever way the two are nested. */
[dir="rtl"] .marks u{ text-transform: none; letter-spacing: .04em; }
.par[dir="ltr"] .marks u{ text-transform: uppercase; letter-spacing: .1em; }

/* ---- board strip: the three real duel territories ----
   direction:ltr on purpose. This strip sits directly under a painting that is
   never mirrored, so if the grid flowed RTL in Arabic the cell beneath Kessa
   would be labelled "Right Flank". The Arabic text inside each cell still
   shapes and orders correctly on its own; only the column order is pinned. */
.board{
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
  direction: ltr;
  display: grid; grid-template-columns: 1fr 1.3fr 1fr;
  /* No gap and no hairline grid. Three boxes with 1px gutters read as a table
     bolted under the painting; the strip is meant to be the ground the two
     champions are standing on. It now fades up into the art instead of
     starting at a hard line, and the cells are separated by light rather than
     by borders. */
  background: linear-gradient(180deg, rgba(7,8,15,0), rgba(7,8,15,.86) 44%, rgba(7,8,15,.94));
  border-top: 0;
  /* A share of the hero, not whatever its own text happens to need.
     Sized by content it came out at 7.4 percent of the hero on desktop and
     5.1 on a phone: the base of the composition got thinner exactly where the
     composition got tighter, which is why it read as an afterthought stuck to
     the bottom rather than the ground the two champions stand on. It is
     positioned inside .duel, so a percentage here IS the proportion. */
  height: clamp(50px, 10%, 78px);
  align-items: stretch;
}
.terr{
  position: relative; background: none;
  padding-inline: var(--sp-6); padding-block: 0;
  display: flex; align-items: center; gap: var(--sp-2);
}
/* A hairline that fades out at both ends, so the division is felt at the
   token line and gone by the time it reaches the art. */
.terr + .terr::before{
  content: ""; position: absolute; inset-block: 22% 18%; inset-inline-start: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--hairline) 40%, transparent);
}
.terr-n{ font-size: var(--fs-xs); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
[dir="rtl"] .terr-n{ text-transform: none; letter-spacing: .02em; }
.par[dir="ltr"] .terr-n{ text-transform: uppercase; letter-spacing: .13em; }
/* The Throne is the thing worth taking, so it is the lit one. The glow rises
   from the seam above it rather than sitting as a flat tint on a box. */
.throne{
  justify-content: center;
  background:
    radial-gradient(120% 150% at 50% 100%, rgba(212,162,78,.20), transparent 68%),
    linear-gradient(180deg, rgba(212,162,78,.10), transparent 60%);
}
.throne .terr-n{ color: var(--gold-bright); }
/* The brand's eight-point star, not a five-point one. The mark, the lattice
   texture and the card borders are all the same eight-point geometry, and this
   was the one place drawing a different star. */
.star{
  width: 10px; height: 10px; background: var(--gold-bright); flex: none;
  clip-path: polygon(
    50% 0%, 61.7% 26.5%, 85.4% 14.6%, 73.5% 38.3%, 100% 50%, 73.5% 61.7%,
    85.4% 85.4%, 61.7% 73.5%, 50% 100%, 38.3% 73.5%, 14.6% 85.4%, 26.5% 61.7%,
    0% 50%, 26.5% 38.3%, 14.6% 14.6%, 38.3% 26.5%);
}
.pips{ display: flex; gap: 3px; margin-left: auto; }
/* flex-end, not flex-start. The label was pushed to the outer edge purely by
   the auto margin on .pips, so it fell back to the left in the two places the
   pips are not there: the hero strip below 640, where .pips is display:none,
   and .par-board, which never renders them. Where the pips ARE present the
   auto margin still absorbs the free space and this is a no-op. */
.terr-e{ justify-content: flex-end; }
.terr-e .pips{ margin-left: 0; margin-right: auto; order: -1; }
/* Pips sit toward the centre on both flanks, mirrored about the seam, which
   is the same axis the whole hero is built on. */
.pips b{
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.20); display: block;
}
.pips b.lit{ background: var(--gold-bright); box-shadow: 0 0 6px -1px var(--gold-bright); }

/* ---- proof row ---- */
.proofs{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--sp-4); padding-block: var(--sp-8);
}
@media (min-width: 760px){ .proofs{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.proof{ display: grid; gap: 2px; }
.proof-v{ font-size: var(--fs-xl); font-weight: 900; color: var(--gold-bright); }
.proof-l{ font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.35; }

.kicker{
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-bright); text-shadow: 0 1px 6px #000;
}
[dir="rtl"] .kicker{ text-transform: none; letter-spacing: .04em; }

/* The cartouches need room a phone does not have; below this the split, the
   seam and the board carry the idea on their own. */
@media (max-width: 900px){
  .champ{ display: none; }
  .duel{ height: min(80svh, 560px); min-height: 460px; }
}
@media (max-width: 640px){
  /* Let the hero grow to its content rather than clip it. At 390px the stacked
     buttons and a four-line lede are taller than any fixed height worth
     setting, and the Marks track was landing on top of the board strip. The
     end padding is what keeps it clear of that strip. */
  .duel{ height: auto; min-height: min(78svh, 520px); }
  .duel-core{ padding-block: var(--sp-12) calc(var(--sp-10) + 40px); }
  .duel-half img{ transform: scale(1.3); }
  .duel-l img{ transform-origin: 26% 42%; }
  .duel-r img{ transform-origin: 74% 42%; }
  .orn{ grid-template-columns: clamp(44px, 15vw, 64px) auto clamp(44px, 15vw, 64px); }
  .orn s{ width: clamp(44px, 15vw, 64px); }
  .hero-sub{ font-size: var(--fs-md); max-width: 34ch; }
  .terr{ padding: var(--sp-2) var(--sp-3); }
  .terr-n{ font-size: 9px; letter-spacing: .06em; }
  .pips{ display: none; }
  .marks u{ font-size: 9.5px; letter-spacing: .05em; }
  .cta-row{ flex-direction: column; }
  .cta-row .btn{ width: 100%; }
}

/* ---- bands -------------------------------------------------------------- */
/* The header is sticky, so an anchor jump would otherwise put the heading it
   was aiming at underneath it. */
section[id]{ scroll-margin-block-start: 84px; }
.band{ padding-block: var(--sp-24); position: relative; }
.band-alt{
  background: var(--bg-1);
  border-block: 1px solid var(--hairline);
}
.band-alt::before{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--lattice); background-size: 90px 90px;
  opacity: .035; pointer-events: none;
}
.band > .wrap{ position: relative; z-index: 1; }

.band h2{
  font-size: var(--fs-2xl); font-weight: 900; letter-spacing: -.015em;
}
.lead{
  margin-top: var(--sp-4); font-size: var(--fs-lg); color: var(--ink-dim);
  max-width: 62ch;
}
.center .lead{ margin-inline: auto; }
.note{
  margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-faint);
  max-width: 62ch;
}

/* ---- how: the section is the board --------------------------------------
   This was three equal cards, each an image, a filled gold number circle, a
   title and two lines. DESIGN-AUDIT.md F5 calls that shape "the single most
   recognisable AI-generated section on the web" and prescribes the fix: let
   the Throne dominate the way the Throne dominates the game.

   So the grid is .board's own 1fr 1.3fr 1fr. The Throne takes the centre
   column, wider, raised out of the row at both ends, bordered, carrying the
   lit throne cell's lower radial. The flanks are not cards: no panel, no
   border, just art above text on the band. Different anatomy per tier is what
   stops it reading as a grid of three.

   No new type step. The Throne heading is --fs-xl, already spent on .proof-v.
   The number circles are gone, because those three are not a sequence.
   -------------------------------------------------------------------------- */
.how-grid{
  display: grid; gap: var(--sp-10); margin-top: var(--sp-16);
  grid-template-columns: minmax(0,1fr);
}
@media (min-width: 900px){
  .how-grid{ grid-template-columns: 1fr 1.3fr 1fr; gap: var(--sp-8); align-items: start; }
}

/* DOM order is Throne first, which is the order the page reads in and the
   order a phone should stack in; the grid reorders it above 900. */
.throne-card{
  position: relative; background: var(--panel); border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column;
}
@media (min-width: 900px){
  .throne-card{ order: 2; margin-block: calc(var(--sp-8) * -1); }
}
.throne-card::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* .throne's lower radial only. Its second layer is a top-down tint and the
     top of this card is a painting. */
  background: radial-gradient(120% 150% at 50% 100%, rgba(212,162,78,.20), transparent 68%);
}
.throne-art{ aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.throne-art img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.throne-body{ position: relative; z-index: 1; padding: var(--sp-8); }
.throne-body h3{ font-size: var(--fs-xl); font-weight: 900; letter-spacing: -.015em; }
.throne-body p{ margin-top: var(--sp-3); font-size: var(--fs-md); color: var(--ink-dim); }

.flank{ display: grid; gap: var(--sp-4); align-content: start; }
@media (min-width: 900px){
  .flank-a{ order: 1; }
  .flank-b{ order: 3; }
}
.flank-art{
  aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--bg-2);
}
.flank-art img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.flank h3{ font-size: var(--fs-lg); font-weight: 800; }
.flank p{ margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-dim); }

/* ---- climb -------------------------------------------------------------- */
.climb{ display: grid; gap: var(--sp-12); }
@media (min-width: 900px){
  .climb{ grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: start; }
}
.climb-stats{
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-8);
}
.climb-stats li{
  font-size: var(--fs-xs); font-weight: 700;
  padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid var(--gold-dim); color: var(--gold-bright);
  background: #d4a24e14;
}
.climb-list{ display: grid; gap: var(--sp-6); }
.climb-item{
  padding-inline-start: var(--sp-6);
  border-inline-start: 2px solid var(--gold-dim);
}
/* Was --fs-md while the other h3 on the page was --fs-lg. Two components
   can justify two sizes, but not at the same heading level in the same
   document: the scale should be readable as a system, not per-section taste. */
.climb-item h3{ font-size: var(--fs-lg); font-weight: 800; color: var(--gold-bright); }
.climb-item p{ margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-dim); }

/* ---- world -------------------------------------------------------------- */
.world{ display: grid; gap: var(--sp-12); align-items: center; }
@media (min-width: 900px){ .world{ grid-template-columns: 1.1fr .9fr; gap: var(--sp-16); } }
.crests{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--sp-4);
}
.crests img{
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--hairline-hi);
  background: var(--bg-2);
  transition: transform var(--ease) .3s, border-color .3s;
}
.crests img:hover{ transform: scale(1.03); border-color: var(--gold-dim); }

/* ---- fair --------------------------------------------------------------- */
/* The lead here is four lines and it was centred, which is the one thing the
   type rules say never to do, and it was the second of three consecutive
   centred-narrow bands closing the page. Two columns instead, so the closer
   below is the page's one deliberate centred moment. */
.fair-grid{ display: grid; gap: var(--sp-10); }
@media (min-width: 900px){
  .fair-grid{ grid-template-columns: 1.05fr .95fr; gap: var(--sp-16); align-items: start; }
}
.fair-chips{
  display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8);
}
.fair-chips li{
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 700;
  padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--tide); color: #63e6d4; background: #2fb6a516;
}
/* Was a dingbat glyph in a system whose icons are all line SVG. This is the
   check out of src/ui/icons.js, unchanged, rendered at 18 the way .rules-list
   renders the same set. */
.fair-chips svg{ width: 18px; height: 18px; flex: none; }

/* ---- parity: opposed halves across the seam ------------------------------
   The band said "Arabic first, not Arabic later" and then showed nothing: a
   heading and one sentence centred in a dark field, the thinnest band on the
   page carrying the strongest claim.

   It now runs the move the rest of the design is built on. Two halves of equal
   area, the same interface fragment in each script, meeting at a 2px brass
   seam at exactly 50%. The halves order with the page, so /ar/ leads Arabic.
   The board strip inside them does not: it is pinned direction:ltr for the
   same reason .board is, because the painting above it is never mirrored.
   -------------------------------------------------------------------------- */
.parity{
  position: relative; margin-top: var(--sp-12);
  border: 1px solid var(--hairline-hi); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-0);
  display: grid; grid-template-columns: 1fr 1fr;
}
.parity::after{
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  transform: translateX(-50%); pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, transparent, var(--gold-bright) 14%, #fff2d4 50%, var(--gold-bright) 86%, transparent);
  box-shadow: 0 0 22px rgba(242,197,114,.6), 0 0 60px rgba(242,197,114,.22);
}
.par{ padding: var(--sp-12); display: grid; gap: var(--sp-8); align-content: start; }
.par-tag{
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-bright);
}
.par[dir="rtl"] .par-tag{ text-transform: none; letter-spacing: .04em; }
.par .marks{ justify-content: flex-start; margin-top: 0; }
.par .marks u{ text-shadow: none; }
.par-stat{ display: grid; gap: 2px; }
.par-board{
  direction: ltr;
  display: grid; grid-template-columns: 1fr 1.3fr 1fr;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden; background: #07080f66;
}
.par-board .terr{ padding: var(--sp-3) var(--sp-4); min-height: 52px; }
.par-btn{ justify-self: start; }

/* The strip is narrowest between 781 and about 1200, where .parity is still
   two columns but each half is a third of the page: at 900 a flank cell is
   ~101px and "LEFT FLANK" at 13px with .13em needs ~85px plus padding. */
@media (max-width: 1200px){
  .par{ padding: var(--sp-8); }
  .par-board .star{ display: none; }
  .par-board .terr{ padding: var(--sp-2); min-height: 48px; }
  .par-board .terr-n,
  .par[dir="ltr"] .par-board .terr-n{ font-size: 11px; letter-spacing: .06em; }
}

/* Two 195px halves cannot carry a readable Arabic fragment, so below 780 the
   demo stacks and the seam becomes a short stroke on the same axis, the way
   .orn::before carries it in the hero. Anchored to the boundary between the
   halves rather than to the box midpoint: the halves are not the same height,
   so 50% of the box lands on a button. */
@media (max-width: 780px){
  .parity{ grid-template-columns: minmax(0,1fr); }
  .parity::after{ display: none; }
  .par + .par{ position: relative; }
  .par + .par::before{
    content: ""; position: absolute; left: 50%; top: 0;
    transform: translate(-50%, -50%); pointer-events: none;
    width: 1px; height: 64px;
    background: linear-gradient(180deg, transparent, var(--gold-bright) 28%, #fff2d4 50%, var(--gold-bright) 72%, transparent);
    box-shadow: 0 0 10px rgba(242,197,114,.34);
  }
  .par{ padding: var(--sp-8) var(--sp-6); }
  .par:first-child{ padding-bottom: var(--sp-10); }
  .par:last-child{ padding-top: var(--sp-10); }
  /* The lead above the demo runs to five centred lines on a phone, which is
     the same rule the fair band was breaking. Left-aligned here only. */
  .parity-head{ text-align: start; max-width: none; }
  .parity-head .lead{ margin-inline: 0; }
}

/* ---- closer ------------------------------------------------------------- */
.closer{
  background:
    radial-gradient(80% 120% at 50% 0%, #12162a 0%, var(--bg-0) 70%);
  padding-block: var(--sp-24);
}
.closer .btn{ margin-top: var(--sp-8); }

/* ---- footer ------------------------------------------------------------- */
.site-foot{
  border-top: 1px solid var(--hairline);
  background: var(--void);
  padding-block: var(--sp-10);
}
.foot-inner{ display: grid; gap: var(--sp-4); }
.foot-note{ font-size: var(--fs-sm); color: var(--ink-dim); max-width: 62ch; }
.foot-meta{
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  font-size: var(--fs-xs); color: var(--ink-faint);
}

/* ---- small screens ------------------------------------------------------ */
@media (max-width: 640px){
  .band{ padding-block: var(--sp-16); }
  .hero-inner{ padding-block: var(--sp-16) var(--sp-12); }
  .hero-art img{ object-position: 50% 38%; }
  .hero-sub{ font-size: var(--fs-md); }
  .btn-lg{ width: 100%; }
  .cta-row{ flex-direction: column; }
}

/* ==========================================================================
   legal pages and the storage notice
   ========================================================================== */
.brand-name{ font-weight: 900; letter-spacing: .06em; font-size: var(--fs-lg); }
.btn-sm{ padding: .45rem .9rem; font-size: var(--fs-sm); }

.legal-body{ background: var(--bg-0); }
.legal-wrap{ padding-block: var(--sp-8) var(--sp-16); max-width: 74ch; }
.legal-wrap h1{ font-size: clamp(30px, 5vw, 44px); line-height: 1.05; margin-top: var(--sp-2); }
.legal-updated{ margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-dim); }
.legal-intro{ margin-top: var(--sp-4); font-size: var(--fs-lg); color: var(--ink); }

/* Visible on purpose. A policy that names a company which has not been
   registered yet is a fabricated record, so the gap is shown rather than
   filled with something plausible. */
.legal-pending{
  margin-top: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--gold-dim); border-radius: var(--radius);
  background: #d4a24e14; color: var(--ink); font-size: var(--fs-sm);
}

.legal-sec{ margin-top: var(--sp-8); }
.legal-sec h2{ font-size: var(--fs-xl); line-height: 1.15; }
.legal-sec p{ margin-top: var(--sp-3); color: var(--ink-dim); }
.legal-sec a{ color: var(--gold-bright); }

.foot-links{ display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.foot-links a{ color: var(--ink-dim); font-size: var(--fs-sm); }
.foot-links a:hover{ color: var(--gold-bright); }

.cookie-note{
  position: fixed; z-index: 60; inset-inline: var(--sp-4); bottom: var(--sp-4);
  max-width: 720px; margin-inline: auto;
  padding: var(--sp-4); border: 1px solid var(--hairline-hi); border-radius: var(--radius-lg);
  background: #0b0d17f2; box-shadow: 0 20px 50px -18px #000;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.cookie-inner{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); justify-content: space-between; }
.cookie-note strong{ font-size: var(--fs-md); }
.cookie-note p{ margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-dim); max-width: 52ch; }
.cookie-actions{ display: flex; gap: var(--sp-2); align-items: center; }

/* ==========================================================================
   touch targets
   ==========================================================================
   Measured at 390px: the wordmark was 32px tall, the footer legal links 24px,
   and the language switch and small buttons a few pixels short of 44. The
   wordmark is the way home and the footer links are the legal pages, so both
   are things a thumb has to find on a phone. Nothing here changes how any of
   it looks; the boxes just stop being smaller than a fingertip. */
.site-head .brand{ min-height: 44px; }
.foot-links a{ display: inline-flex; align-items: center; min-height: 44px; }
.lang{ min-height: 44px; }
.btn-sm{ min-height: 44px; }

/* ==========================================================================
   nav: where you are
   ==========================================================================
   The four links jump to sections and nothing said which one you were in, so
   the nav answered "where can I go" and never "where am I". Driven by an
   IntersectionObserver in the page, not by :target, because :target only fires
   when a link is clicked and says nothing when you scroll there yourself. */
.nav a{ position: relative; }
.nav a[aria-current="true"]{ color: var(--gold-bright); }
.nav a[aria-current="true"]::after{
  content: ""; position: absolute; inset-inline: 0; bottom: -6px; height: 2px;
  border-radius: 2px; background: var(--gold);
}
@media (prefers-reduced-motion: no-preference){
  .nav a::after{ transition: opacity .18s var(--ease); }
}