/* Update 44 (5 Nov 2026), owner: "the brand symbols are not on the website and it is not professional, especially the first page:
   dull; before was better, but make it different". The single swash (the AAT main symbol) comes back, used with restraint:
   one large light swash in the home opening and in every inner opening, a small red swash as the mark between sections,
   a faint swash in the footer. The home opening also gets the magazine's masthead band (Arabic · English · Chinese).
   Loaded after brand27.css. No full-screen fixed or animated backgrounds (performance rule from update 38). */

/* ---------- home opening ---------- */
#app section.hero { position: relative; overflow: hidden; padding-bottom: 0 !important;
  background: radial-gradient(42% 70% at 18% 52%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 70%),
              linear-gradient(118deg, #5A060B 0%, #8E0C13 34%, #C0161E 68%, #D9262D 100%) !important;
  box-shadow: none !important; }
#app section.hero::before { content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(86vw, 1180px) !important; height: auto !important; aspect-ratio: 1301 / 861; top: auto !important; bottom: 6% !important; margin: 0 !important; border-radius: 0 !important;
  left: auto !important; right: auto !important; inset-inline-end: -8% !important; box-shadow: none !important;
  background: url(../img/brand/aat-swash-white.svg) no-repeat center / contain !important; opacity: .12; display: block !important; }
html[dir="ltr"] #app section.hero::before { transform: scaleX(-1); }
#app section.hero > .wrap { position: relative; z-index: 1; padding-bottom: clamp(26px, 3.4vw, 46px); }
#app section.hero .kick { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 18px; border-radius: 40px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); }
#app section.hero .kick::before { width: 34px; height: 22px; background: url(../img/brand/aat-swash-white.svg) no-repeat center / contain !important; }
#app section.hero .book { box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .25); }
#app section.hero .hero-cover::after { content: ""; position: absolute; inset: 8% -6% -4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); }
#app section.hero .hero-cover { position: relative; }
/* the masthead band at the foot of the opening, as on the printed cover */
.hero-band { position: relative; z-index: 1; background: #fff; box-shadow: inset 0 4px 0 #7A0A10; }
.hero-band-in { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 34px); min-height: 64px; flex-wrap: wrap; padding-block: 10px; }
.hero-band span { color: #C4141C; font-weight: 800; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.2; white-space: nowrap; }
.hero-band span[lang="ar"] { font-family: Jazeera, var(--font-ar, sans-serif); }
.hero-band span[lang="en"] { font-family: Arimo, Arial, sans-serif; letter-spacing: .5px; }
.hero-band span[lang="zh"] { letter-spacing: 3px; }
.hero-band i { width: 30px; height: 20px; flex: none; background: url(../img/brand/aat-swash-red.svg) no-repeat center / contain; }
html[dir="ltr"] .hero-band i { transform: scaleX(-1); }
@media (max-width: 700px) { .hero-band span[lang="en"]:last-child, .hero-band i:nth-last-of-type(1) { display: none; } .hero-band-in { gap: 12px; } }

/* ---------- inner page openings: the same light swash ---------- */
#app header.ph:not(.co):not(.mz-ph) { position: relative; overflow: hidden;
  background: radial-gradient(50% 120% at 85% 100%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%), linear-gradient(118deg, #6E0910 0%, #A4111A 45%, #D21F26 100%) !important; }
#app header.ph:not(.co):not(.mz-ph)::before { content: ""; position: absolute; z-index: 0; pointer-events: none;
  height: 150%; aspect-ratio: 1301 / 861; bottom: -32%; inset-inline-start: -4%;
  background: url(../img/brand/aat-swash-white.svg) no-repeat center / contain; opacity: .13; }
html[dir="rtl"] #app header.ph:not(.co):not(.mz-ph)::before { transform: scaleX(-1); }
#app header.ph:not(.co):not(.mz-ph) > * { position: relative; z-index: 1; }

/* ---------- the mark between sections: a small red swash on the line (was a red bar) ---------- */
#app section + section:not(.hero)::before { width: 66px !important; height: 30px !important; top: -15px !important; margin-left: -33px !important; border-radius: 15px !important;
  background: #fff url(../img/brand/aat-swash-red.svg) no-repeat center / 40px auto !important; box-shadow: 0 0 0 1px #E7DADB; }
#app section.sec:not(.cta):not(.facts):not(.trust):nth-of-type(odd) + section:not(.hero)::before { background-color: #fff !important; }

/* ---------- footer: one faint swash ---------- */
#ftr { position: relative; overflow: hidden; }
#ftr::before { content: ""; position: absolute; z-index: 0; pointer-events: none; width: min(70vw, 900px); aspect-ratio: 1301 / 861; bottom: -18%; inset-inline-end: -6%;
  background: url(../img/brand/aat-swash-white.svg) no-repeat center / contain; opacity: .05; }
#ftr > * { position: relative; z-index: 1; }