/* One mark for every static Palace page.

The pages below were built around the old Asha Arena logotype, which was a wide
lockup: they all size the brand image at roughly 92x54 and let it fill that box.
The Athena sigil is a square tile, so every one of those rules would stretch it.
This sheet loads last on each page and restores a square footprint, the rounded
edge the tile was drawn with, and a name that is four characters longer than the
one it replaces and therefore needs its own room to breathe. */

.brand picture img,
footer .brand picture img,
.brandmark{
  width:48px;height:48px;
  border-radius:12px;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 2px 14px rgba(232,185,80,.28));
}

/* "ATHENA'S PALACE" does not fit where "ASHA ARENA" did. The name shrinks with
the viewport instead of pushing the navigation off the right edge. */
.brand{gap:11px}
.brandName,
.brand>span:not(.brandLockup):not(.brandCopy){font-size:clamp(17px,1.6vw,25px)}
.brandCopy>span:first-child{font-size:clamp(16px,1.5vw,24px)}

@media(max-width:880px){
  .brand picture img,
  footer .brand picture img,
  .brandmark{width:42px;height:42px;border-radius:11px}
}

@media(max-width:620px){
  .brand picture img,
  footer .brand picture img,
  .brandmark{width:38px;height:38px;border-radius:10px}
}

/* Two doors, one house.

athenaspalace.com and ashaarena.com serve the same file. The only thing that
differs is the mark and the name, and the choice is made from the hostname by a
script in the head, which sets data-brand before the first paint so neither
brand is ever briefly visible on the other's address. With scripting off nothing
runs and the palace shows, which is right: it is the canonical address, and it
is the one every link, sitemap and sharing card names.

The two marks are not the same shape. The Athena sigil is a square tile; the
Asha Arena logotype is wide. Each gets its own footprint rather than one being
letterboxed inside the other's box. */

picture.brandArena,span.brandArena{display:none}
[data-brand="arena"] picture.brandPalace,
[data-brand="arena"] span.brandPalace{display:none}
[data-brand="arena"] picture.brandArena{display:block}
[data-brand="arena"] span.brandArena{display:inline}
[data-brand="arena"] .brandArena img{
  width:82px;height:48px;
  border-radius:0;
}
@media(max-width:880px){
  [data-brand="arena"] .brandArena img{width:72px;height:42px}
}
@media(max-width:620px){
  [data-brand="arena"] .brandArena img{width:65px;height:38px}
}